fix(desktop): better keybind tooltips

5 files changed, 100 insertions, 29 deletions

diff --git a/packages/desktop/src/components/header.tsx b/packages/desktop/src/components/header.tsx
index fd4b2c439..6e0ea96dc 100644
--- a/packages/desktop/src/components/header.tsx
+++ b/packages/desktop/src/components/header.tsx
@@ -10,6 +10,7 @@ import { Select } from "@opencode-ai/ui/select"
 import { TextField } from "@opencode-ai/ui/text-field"
 import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { base64Decode } from "@opencode-ai/util/encode"
+import { useCommand } from "@/context/command"
 import { getFilename } from "@opencode-ai/util/path"
 import { A, useParams } from "@solidjs/router"
 import { createMemo, createResource, Show } from "solid-js"
@@ -24,6 +25,7 @@ export function Header(props: {
   const globalSDK = useGlobalSDK()
   const layout = useLayout()
   const params = useParams()
+  const command = useCommand()
 
   return (
     <header class="h-12 shrink-0 bg-background-base border-b border-border-weak-base flex" data-tauri-drag-region>
@@ -80,9 +82,18 @@ export function Header(props: {
                     />
                   </div>
                   <Show when={currentSession()}>
-                    <Button as={A} href={`/${params.dir}/session`} icon="plus-small">
-                      New session
-                    </Button>
+                    <Tooltip
+                      value={
+                        <div class="flex items-center gap-2">
+                          <span>New session</span>
+                          <span class="text-icon-base text-12-medium">{command.keybind("session.new")}</span>
+                        </div>
+                      }
+                    >
+                      <Button as={A} href={`/${params.dir}/session`} icon="plus-small">
+                        New session
+                      </Button>
+                    </Tooltip>
                   </Show>
                 </div>
                 <div class="flex items-center gap-4">
@@ -91,7 +102,7 @@ export function Header(props: {
                     value={
                       <div class="flex items-center gap-2">
                         <span>Toggle terminal</span>
-                        <span class="text-icon-base text-12-medium">Ctrl `</span>
+                        <span class="text-icon-base text-12-medium">{command.keybind("terminal.toggle")}</span>
                       </div>
                     }
                   >
diff --git a/packages/desktop/src/components/prompt-input.tsx b/packages/desktop/src/components/prompt-input.tsx
index 78415cd2b..c548cea0e 100644
--- a/packages/desktop/src/components/prompt-input.tsx
+++ b/packages/desktop/src/components/prompt-input.tsx
@@ -19,7 +19,7 @@ import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { DialogSelectModel } from "@/components/dialog-select-model"
 import { DialogSelectModelUnpaid } from "@/components/dialog-select-model-unpaid"
 import { useProviders } from "@/hooks/use-providers"
-import { useCommand, formatKeybind } from "@/context/command"
+import { useCommand } from "@/context/command"
 import { persisted } from "@/utils/persist"
 import { Identifier } from "@/utils/id"
 
@@ -889,8 +889,8 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                             custom
                           </span>
                         </Show>
-                        <Show when={cmd.keybind}>
-                          <span class="text-12-regular text-text-subtle">{formatKeybind(cmd.keybind!)}</span>
+                        <Show when={command.keybind(cmd.id)}>
+                          <span class="text-12-regular text-text-subtle">{command.keybind(cmd.id)}</span>
                         </Show>
                       </div>
                     </button>
@@ -990,26 +990,46 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                 </div>
               </Match>
               <Match when={store.mode === "normal"}>
-                <Select
-                  options={local.agent.list().map((agent) => agent.name)}
-                  current={local.agent.current().name}
-                  onSelect={local.agent.set}
-                  class="capitalize"
-                  variant="ghost"
-                />
-                <Button
-                  as="div"
-                  variant="ghost"
-                  onClick={() =>
-                    dialog.show(() =>
-                      providers.paid().length > 0 ? <DialogSelectModel /> : <DialogSelectModelUnpaid />,
-                    )
+                <Tooltip
+                  placement="top"
+                  value={
+                    <div class="flex items-center gap-2">
+                      <span>Cycle agent</span>
+                      <span class="text-icon-base text-12-medium">{command.keybind("agent.cycle")}</span>
+                    </div>
                   }
                 >
-                  {local.model.current()?.name ?? "Select model"}
-                  <span class="ml-0.5 text-text-weak text-12-regular">{local.model.current()?.provider.name}</span>
-                  <Icon name="chevron-down" size="small" />
-                </Button>
+                  <Select
+                    options={local.agent.list().map((agent) => agent.name)}
+                    current={local.agent.current().name}
+                    onSelect={local.agent.set}
+                    class="capitalize"
+                    variant="ghost"
+                  />
+                </Tooltip>
+                <Tooltip
+                  placement="top"
+                  value={
+                    <div class="flex items-center gap-2">
+                      <span>Choose model</span>
+                      <span class="text-icon-base text-12-medium">{command.keybind("model.choose")}</span>
+                    </div>
+                  }
+                >
+                  <Button
+                    as="div"
+                    variant="ghost"
+                    onClick={() =>
+                      dialog.show(() =>
+                        providers.paid().length > 0 ? <DialogSelectModel /> : <DialogSelectModelUnpaid />,
+                      )
+                    }
+                  >
+                    {local.model.current()?.name ?? "Select model"}
+                    <span class="ml-0.5 text-text-weak text-12-regular">{local.model.current()?.provider.name}</span>
+                    <Icon name="chevron-down" size="small" />
+                  </Button>
+                </Tooltip>
               </Match>
             </Switch>
           </div>
diff --git a/packages/desktop/src/context/command.tsx b/packages/desktop/src/context/command.tsx
index 8fd76ee21..362f35b97 100644
--- a/packages/desktop/src/context/command.tsx
+++ b/packages/desktop/src/context/command.tsx
@@ -226,6 +226,11 @@ export const { use: useCommand, provider: CommandProvider } = createSimpleContex
           }
         }
       },
+      keybind(id: string) {
+        const option = options().find((x) => x.id === id || x.id === "suggested." + id)
+        if (!option?.keybind) return ""
+        return formatKeybind(option.keybind)
+      },
       show: showPalette,
       keybinds(enabled: boolean) {
         setSuspendCount((count) => count + (enabled ? -1 : 1))
diff --git a/packages/desktop/src/pages/layout.tsx b/packages/desktop/src/pages/layout.tsx
index ade510069..1c8bb615c 100644
--- a/packages/desktop/src/pages/layout.tsx
+++ b/packages/desktop/src/pages/layout.tsx
@@ -674,7 +674,17 @@ export default function Layout(props: ParentProps) {
             />
           </Show>
           <div class="flex flex-col items-start self-stretch gap-4 p-2 min-h-0 overflow-hidden">
-            <Tooltip class="shrink-0" placement="right" value="Toggle sidebar" inactive={layout.sidebar.opened()}>
+            <Tooltip
+              class="shrink-0"
+              placement="right"
+              value={
+                <div class="flex items-center gap-2">
+                  <span>Toggle sidebar</span>
+                  <span class="text-icon-base text-12-medium">{command.keybind("sidebar.toggle")}</span>
+                </div>
+              }
+              inactive={layout.sidebar.opened()}
+            >
               <Button
                 variant="ghost"
                 size="large"
@@ -762,7 +772,16 @@ export default function Layout(props: ParentProps) {
               </Match>
             </Switch>
             <Show when={platform.openDirectoryPickerDialog}>
-              <Tooltip placement="right" value="Open project" inactive={layout.sidebar.opened()}>
+              <Tooltip
+                placement="right"
+                value={
+                  <div class="flex items-center gap-2">
+                    <span>Open project</span>
+                    <span class="text-icon-base text-12-medium">{command.keybind("project.open")}</span>
+                  </div>
+                }
+                inactive={layout.sidebar.opened()}
+              >
                 <Button
                   class="flex w-full text-left justify-start text-text-base stroke-[1.5px] rounded-lg px-2"
                   variant="ghost"
diff --git a/packages/desktop/src/pages/session.tsx b/packages/desktop/src/pages/session.tsx
index 508fbc9c2..362e2922a 100644
--- a/packages/desktop/src/pages/session.tsx
+++ b/packages/desktop/src/pages/session.tsx
@@ -662,7 +662,15 @@ export default function Page() {
                       </For>
                     </SortableProvider>
                     <div class="bg-background-base h-full flex items-center justify-center border-b border-border-weak-base px-3">
-                      <Tooltip value="Open file" class="flex items-center">
+                      <Tooltip
+                        value={
+                          <div class="flex items-center gap-2">
+                            <span>Open file</span>
+                            <span class="text-icon-base text-12-medium">{command.keybind("file.open")}</span>
+                          </div>
+                        }
+                        class="flex items-center"
+                      >
                         <IconButton
                           icon="plus-small"
                           variant="ghost"
@@ -774,7 +782,15 @@ export default function Page() {
                   <For each={terminal.all()}>{(pty) => <SortableTerminalTab terminal={pty} />}</For>
                 </SortableProvider>
                 <div class="h-full flex items-center justify-center">
-                  <Tooltip value="New Terminal" class="flex items-center">
+                  <Tooltip
+                    value={
+                      <div class="flex items-center gap-2">
+                        <span>New terminal</span>
+                        <span class="text-icon-base text-12-medium">{command.keybind("terminal.new")}</span>
+                      </div>
+                    }
+                    class="flex items-center"
+                  >
                     <IconButton icon="plus-small" variant="ghost" iconSize="large" onClick={terminal.new} />
                   </Tooltip>
                 </div>