tui: remove deprecated and unused keybinds to simplify configuration

Users no longer see confusing deprecated keybind options in config that were never implemented (switch_mode, file operations, etc). Keybinds now use consistent Zod schema defaults instead of hardcoded fallbacks, making configuration more predictable. Session interruption (esc) now works consistently through keybind system.

Author: thdxr

packages/opencode/src/cli/cmd/tui/component/prompt/index.tsx

@@ -316,7 +316,9 @@ export function Prompt(props: PromptProps) {
 
     // Expand pasted text inline before submitting
     const allExtmarks = input.extmarks.getAllForTypeId(promptPartTypeId)
-    const sortedExtmarks = allExtmarks.sort((a: { start: number }, b: { start: number }) => b.start - a.start)
+    const sortedExtmarks = allExtmarks.sort(
+      (a: { start: number }, b: { start: number }) => b.start - a.start,
+    )
 
     for (const extmark of sortedExtmarks) {
       const partIndex = store.extmarkToPartIndex.get(extmark.id)
@@ -472,15 +474,28 @@ export function Prompt(props: PromptProps) {
         <box
           flexDirection="row"
           {...SplitBorder}
-          borderColor={keybind.leader ? Theme.accent : store.mode === "shell" ? Theme.secondary : undefined}
+          borderColor={
+            keybind.leader ? Theme.accent : store.mode === "shell" ? Theme.secondary : undefined
+          }
           justifyContent="space-evenly"
         >
-          <box backgroundColor={Theme.backgroundElement} width={3} height="100%" alignItems="center" paddingTop={1}>
+          <box
+            backgroundColor={Theme.backgroundElement}
+            width={3}
+            height="100%"
+            alignItems="center"
+            paddingTop={1}
+          >
             <text attributes={TextAttributes.BOLD} fg={Theme.primary}>
               {store.mode === "normal" ? ">" : "!"}
             </text>
           </box>
-          <box paddingTop={1} paddingBottom={1} backgroundColor={Theme.backgroundElement} flexGrow={1}>
+          <box
+            paddingTop={1}
+            paddingBottom={1}
+            backgroundColor={Theme.backgroundElement}
+            flexGrow={1}
+          >
             <textarea
               placeholder={
                 props.showPlaceholder
@@ -523,7 +538,10 @@ export function Prompt(props: PromptProps) {
                   return
                 }
                 if (store.mode === "shell") {
-                  if ((e.name === "backspace" && input.visualCursor.offset === 0) || e.name === "escape") {
+                  if (
+                    (e.name === "backspace" && input.visualCursor.offset === 0) ||
+                    e.name === "escape"
+                  ) {
                     setStore("mode", "normal")
                     e.preventDefault()
                     return
@@ -554,7 +572,7 @@ export function Prompt(props: PromptProps) {
                     input.cursorOffset = input.plainText.length
                 }
                 if (!autocomplete.visible) {
-                  if (e.name === "escape" && props.sessionID) {
+                  if (keybind.match("session_interrupt", e) && props.sessionID) {
                     sdk.client.session.abort({
                       path: {
                         id: props.sessionID,
@@ -644,7 +662,12 @@ export function Prompt(props: PromptProps) {
               syntaxStyle={syntaxTheme}
             />
           </box>
-          <box backgroundColor={Theme.backgroundElement} width={1} justifyContent="center" alignItems="center"></box>
+          <box
+            backgroundColor={Theme.backgroundElement}
+            width={1}
+            justifyContent="center"
+            alignItems="center"
+          ></box>
         </box>
         <box flexDirection="row" justifyContent="space-between">
           <text flexShrink={0} wrapMode="none">

packages/opencode/src/cli/cmd/tui/context/keybind.tsx

@@ -14,8 +14,7 @@ export const { use: useKeybind, provider: KeybindProvider } = createSimpleContex
     const sync = useSync()
     const keybinds = createMemo(() => {
       return pipe(
-        DEFAULT_KEYBINDS,
-        (val) => Object.assign(val, sync.data.config.keybinds),
+        sync.data.config.keybinds ?? {},
         mapValues((value) => Keybind.parse(value)),
       )
     })
@@ -102,46 +101,3 @@ export const { use: useKeybind, provider: KeybindProvider } = createSimpleContex
     return result
   },
 })
-
-const DEFAULT_KEYBINDS: KeybindsConfig = {
-  leader: "ctrl+x",
-  app_help: "<leader>h",
-  app_exit: "ctrl+c,<leader>q",
-  status_view: "<leader>s",
-  editor_open: "<leader>e",
-  theme_list: "<leader>t",
-  project_init: "<leader>i",
-  tool_details: "<leader>d",
-  thinking_blocks: "<leader>b",
-  sidebar_toggle: "<leader>b",
-  session_export: "<leader>x",
-  session_new: "<leader>n",
-  session_list: "<leader>l",
-  session_share: "none",
-  session_unshare: "none",
-  session_interrupt: "esc",
-  session_compact: "<leader>c",
-  session_child_cycle: "ctrl+right",
-  session_child_cycle_reverse: "ctrl+left",
-  session_timeline: "<leader>t",
-  messages_page_up: "pageup",
-  messages_page_down: "pagedown",
-  messages_half_page_up: "ctrl+alt+u",
-  messages_half_page_down: "ctrl+alt+d",
-  messages_first: "home",
-  messages_last: "end",
-  messages_copy: "<leader>y",
-  messages_undo: "<leader>u",
-  messages_redo: "<leader>r",
-  model_list: "<leader>m",
-  command_list: "ctrl+p",
-  model_cycle_recent: "f2",
-  model_cycle_recent_reverse: "shift+f2",
-  agent_list: "<leader>a",
-  agent_cycle: "tab",
-  agent_cycle_reverse: "shift+tab",
-  input_clear: "ctrl+c",
-  input_paste: "ctrl+v",
-  input_submit: "enter",
-  input_newline: "ctrl+j,shift+enter",
-}

packages/opencode/src/cli/cmd/tui/routes/session/index.tsx

@@ -18,7 +18,14 @@ import { SplitBorder } from "@tui/component/border"
 import { syntaxTheme, Theme } from "@tui/context/theme"
 import { BoxRenderable, ScrollBoxRenderable, addDefaultParsers } from "@opentui/core"
 import { Prompt, type PromptRef } from "@tui/component/prompt"
-import type { AssistantMessage, Part, ToolPart, UserMessage, TextPart, ReasoningPart } from "@opencode-ai/sdk"
+import type {
+  AssistantMessage,
+  Part,
+  ToolPart,
+  UserMessage,
+  TextPart,
+  ReasoningPart,
+} from "@opencode-ai/sdk"
 import { useLocal } from "@tui/context/local"
 import { Locale } from "@/util/locale"
 import type { Tool } from "@/tool/tool"
@@ -177,19 +184,18 @@ export function Session() {
       disabled: !!session()?.share?.url,
       category: "Session",
       onSelect: async (dialog) => {
-        await sdk.client.session.share({
-          path: {
-            id: route.sessionID,
-          },
-        })
+        await sdk.client.session
+          .share({
+            path: {
+              id: route.sessionID,
+            },
+          })
           .then((res) =>
             Clipboard.copy(res.data!.share!.url).catch(() =>
-              toast.show({ message: "Failed to copy URL to clipboard", type: "error" })
-            )
-          )
-          .then(() =>
-            toast.show({ message: "Share URL copied to clipboard!", type: "success" })
+              toast.show({ message: "Failed to copy URL to clipboard", type: "error" }),
+            ),
           )
+          .then(() => toast.show({ message: "Share URL copied to clipboard!", type: "success" }))
           .catch(() => toast.show({ message: "Failed to share session", type: "error" }))
         dialog.clear()
       },
@@ -399,7 +405,14 @@ export function Session() {
         },
       }}
     >
-      <box flexDirection="row" paddingBottom={1} paddingTop={1} paddingLeft={2} paddingRight={2} gap={2}>
+      <box
+        flexDirection="row"
+        paddingBottom={1}
+        paddingTop={1}
+        paddingLeft={2}
+        paddingRight={2}
+        gap={2}
+      >
         <box flexGrow={1} gap={1}>
           <Show when={session()}>
             <Show when={!sidebarVisible()}>
@@ -447,12 +460,18 @@ export function Session() {
                               paddingTop={1}
                               paddingBottom={1}
                               paddingLeft={2}
-                              backgroundColor={hover() ? Theme.backgroundElement : Theme.backgroundPanel}
+                              backgroundColor={
+                                hover() ? Theme.backgroundElement : Theme.backgroundPanel
+                              }
                             >
-                              <text fg={Theme.textMuted}>{revert()!.reverted.length} message reverted</text>
                               <text fg={Theme.textMuted}>
-                                <span style={{ fg: Theme.text }}>{keybind.print("messages_redo")}</span> or /redo to
-                                restore
+                                {revert()!.reverted.length} message reverted
+                              </text>
+                              <text fg={Theme.textMuted}>
+                                <span style={{ fg: Theme.text }}>
+                                  {keybind.print("messages_redo")}
+                                </span>{" "}
+                                or /redo to restore
                               </text>
                               <Show when={revert()!.diffFiles?.length}>
                                 <box marginTop={1}>
@@ -461,10 +480,16 @@ export function Session() {
                                       <text>
                                         {file.filename}
                                         <Show when={file.additions > 0}>
-                                          <span style={{ fg: Theme.diffAdded }}> +{file.additions}</span>
+                                          <span style={{ fg: Theme.diffAdded }}>
+                                            {" "}
+                                            +{file.additions}
+                                          </span>
                                         </Show>
                                         <Show when={file.deletions > 0}>
-                                          <span style={{ fg: Theme.diffRemoved }}> -{file.deletions}</span>
+                                          <span style={{ fg: Theme.diffRemoved }}>
+                                            {" "}
+                                            -{file.deletions}
+                                          </span>
                                         </Show>
                                       </text>
                                     )}
@@ -483,7 +508,9 @@ export function Session() {
                       <UserMessage
                         index={index()}
                         onMouseUp={() =>
-                          dialog.replace(() => <DialogMessage messageID={message.id} sessionID={route.sessionID} />)
+                          dialog.replace(() => (
+                            <DialogMessage messageID={message.id} sessionID={route.sessionID} />
+                          ))
                         }
                         message={message as UserMessage}
                         parts={sync.data.part[message.id] ?? []}
@@ -539,7 +566,9 @@ function UserMessage(props: {
   index: number
   pending?: string
 }) {
-  const text = createMemo(() => props.parts.flatMap((x) => (x.type === "text" && !x.synthetic ? [x] : []))[0])
+  const text = createMemo(
+    () => props.parts.flatMap((x) => (x.type === "text" && !x.synthetic ? [x] : []))[0],
+  )
   const files = createMemo(() => props.parts.flatMap((x) => (x.type === "file" ? [x] : [])))
   const sync = useSync()
   const [hover, setHover] = createSignal(false)
@@ -579,8 +608,14 @@ function UserMessage(props: {
                 })
                 return (
                   <text>
-                    <span style={{ bg: bg(), fg: Theme.background }}> {MIME_BADGE[file.mime] ?? file.mime} </span>
-                    <span style={{ bg: Theme.backgroundElement, fg: Theme.textMuted }}> {file.filename} </span>
+                    <span style={{ bg: bg(), fg: Theme.background }}>
+                      {" "}
+                      {MIME_BADGE[file.mime] ?? file.mime}{" "}
+                    </span>
+                    <span style={{ bg: Theme.backgroundElement, fg: Theme.textMuted }}>
+                      {" "}
+                      {file.filename}{" "}
+                    </span>
                   </text>
                 )
               }}
@@ -591,9 +626,16 @@ function UserMessage(props: {
           {sync.data.config.username ?? "You"}{" "}
           <Show
             when={queued()}
-            fallback={<span style={{ fg: Theme.textMuted }}>({Locale.time(props.message.time.created)})</span>}
+            fallback={
+              <span style={{ fg: Theme.textMuted }}>
+                ({Locale.time(props.message.time.created)})
+              </span>
+            }
           >
-            <span style={{ bg: Theme.accent, fg: Theme.backgroundPanel, bold: true }}> QUEUED </span>
+            <span style={{ bg: Theme.accent, fg: Theme.backgroundPanel, bold: true }}>
+              {" "}
+              QUEUED{" "}
+            </span>
           </Show>
         </text>
       </box>
@@ -632,7 +674,8 @@ function AssistantMessage(props: { message: AssistantMessage; parts: Part[]; las
       <Show
         when={
           !props.message.time.completed ||
-          (props.last && props.parts.some((item) => item.type === "step-finish" && item.reason === "tool-calls"))
+          (props.last &&
+            props.parts.some((item) => item.type === "step-finish" && item.reason === "tool-calls"))
         }
       >
         <box
@@ -644,7 +687,9 @@ function AssistantMessage(props: { message: AssistantMessage; parts: Part[]; las
           customBorderChars={SplitBorder.customBorderChars}
           borderColor={Theme.backgroundElement}
         >
-          <text fg={local.agent.color(props.message.mode)}>{Locale.titlecase(props.message.mode)}</text>
+          <text fg={local.agent.color(props.message.mode)}>
+            {Locale.titlecase(props.message.mode)}
+          </text>
           <Shimmer text={`${props.message.modelID}`} color={Theme.text} />
         </box>
       </Show>
@@ -656,7 +701,9 @@ function AssistantMessage(props: { message: AssistantMessage; parts: Part[]; las
       >
         <box paddingLeft={3}>
           <text marginTop={1}>
-            <span style={{ fg: local.agent.color(props.message.mode) }}>{Locale.titlecase(props.message.mode)}</span>{" "}
+            <span style={{ fg: local.agent.color(props.message.mode) }}>
+              {Locale.titlecase(props.message.mode)}
+            </span>{" "}
             <span style={{ fg: Theme.textMuted }}>{props.message.modelID}</span>
           </text>
         </box>
@@ -682,7 +729,12 @@ function ReasoningPart(props: { part: ReasoningPart; message: AssistantMessage }
         customBorderChars={SplitBorder.customBorderChars}
         borderColor={Theme.backgroundPanel}
       >
-        <box paddingTop={1} paddingBottom={1} paddingLeft={2} backgroundColor={Theme.backgroundPanel}>
+        <box
+          paddingTop={1}
+          paddingBottom={1}
+          paddingLeft={2}
+          backgroundColor={Theme.backgroundPanel}
+        >
           <text>{props.part.text.trim()}</text>
         </box>
       </box>
@@ -814,7 +866,10 @@ function GenericTool(props: ToolProps<any>) {
 }
 
 const ToolRegistry = (() => {
-  const state: Record<string, { name: string; container: "inline" | "block"; render?: Component<ToolProps<any>> }> = {}
+  const state: Record<
+    string,
+    { name: string; container: "inline" | "block"; render?: Component<ToolProps<any>> }
+  > = {}
   function register<T extends Tool.Info>(input: {
     name: string
     container: "inline" | "block"
@@ -908,10 +963,16 @@ ToolRegistry.register<typeof WriteTool>({
         </ToolTitle>
         <box flexDirection="row">
           <box flexShrink={0}>
-            <For each={numbers()}>{(value) => <text style={{ fg: Theme.textMuted }}>{value}</text>}</For>
+            <For each={numbers()}>
+              {(value) => <text style={{ fg: Theme.textMuted }}>{value}</text>}
+            </For>
           </box>
           <box paddingLeft={1} flexGrow={1}>
-            <code filetype={filetype(props.input.filePath!)} syntaxStyle={syntaxTheme} content={code()} />
+            <code
+              filetype={filetype(props.input.filePath!)}
+              syntaxStyle={syntaxTheme}
+              content={code()}
+            />
           </box>
         </box>
       </>
@@ -926,7 +987,8 @@ ToolRegistry.register<typeof GlobTool>({
     return (
       <>
         <ToolTitle icon="✱" fallback="Finding files..." when={props.input.pattern}>
-          Glob "{props.input.pattern}" <Show when={props.input.path}>in {normalizePath(props.input.path)} </Show>
+          Glob "{props.input.pattern}"{" "}
+          <Show when={props.input.path}>in {normalizePath(props.input.path)} </Show>
           <Show when={props.metadata.count}>({props.metadata.count} matches)</Show>
         </ToolTitle>
       </>
@@ -940,7 +1002,8 @@ ToolRegistry.register<typeof GrepTool>({
   render(props) {
     return (
       <ToolTitle icon="✱" fallback="Searching content..." when={props.input.pattern}>
-        Grep "{props.input.pattern}" <Show when={props.input.path}>in {normalizePath(props.input.path)} </Show>
+        Grep "{props.input.pattern}"{" "}
+        <Show when={props.input.path}>in {normalizePath(props.input.path)} </Show>
         <Show when={props.metadata.matches}>({props.metadata.matches} matches)</Show>
       </ToolTitle>
     )