fix(desktop): better keybind tooltips

2 files changed, 56 insertions, 25 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>