ui: show selector shortcuts inline

packages/ui/src/components/agent-selector.tsx

@@ -4,6 +4,7 @@ import { agents, fetchAgents, sessions } from "../stores/sessions"
 import { ChevronDown } from "lucide-solid"
 import type { Agent } from "../types/session"
 import { getLogger } from "../lib/logger"
+import Kbd from "./kbd"
 const log = getLogger("session")
 
 
@@ -99,15 +100,20 @@ export default function AgentSelector(props: AgentSelectorProps) {
           data-agent-selector
           class="selector-trigger"
         >
-          <Select.Value<Agent>>
-            {(state) => (
-              <div class="selector-trigger-label">
-                <span class="selector-trigger-primary">
-                  Agent: {state.selectedOption()?.name ?? "None"}
-                </span>
-              </div>
-            )}
-          </Select.Value>
+          <div class="flex-1 min-w-0">
+            <Select.Value<Agent>>
+              {(state) => (
+                <div class="selector-trigger-label selector-trigger-label--stacked">
+                  <span class="selector-trigger-primary selector-trigger-primary--align-left">
+                    Agent: {state.selectedOption()?.name ?? "None"}
+                  </span>
+                </div>
+              )}
+            </Select.Value>
+          </div>
+          <span class="selector-trigger-hint selector-trigger-hint--top" aria-hidden="true">
+            <Kbd shortcut="cmd+shift+a" />
+          </span>
           <Select.Icon class="selector-trigger-icon">
             <ChevronDown class="w-3 h-3" />
           </Select.Icon>

packages/ui/src/components/instance/instance-shell2.tsx

@@ -48,6 +48,7 @@ import { clearSessionRenderCache } from "../message-block"
 import { isOpen as isCommandPaletteOpen, hideCommandPalette, showCommandPalette } from "../../stores/command-palette"
 import SessionList from "../session-list"
 import KeyboardHint from "../keyboard-hint"
+import Kbd from "../kbd"
 import InstanceWelcomeView from "../instance-welcome-view"
 import InfoView from "../info-view"
 import InstanceServiceStatus from "../instance-service-status"
@@ -57,7 +58,6 @@ import ThinkingSelector from "../thinking-selector"
 import CommandPalette from "../command-palette"
 import PermissionNotificationBanner from "../permission-notification-banner"
 import PermissionApprovalModal from "../permission-approval-modal"
-import Kbd from "../kbd"
 import { TodoListView } from "../tool-call/renderers/todo"
 import ContextUsagePanel from "../session/context-usage-panel"
 import SessionView from "../session/session-view"
@@ -915,18 +915,6 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
                   onAgentChange={(agent) => props.handleSidebarAgentChange(activeSession().id, agent)}
                 />
 
-                <div class="sidebar-selector-hints" aria-hidden="true">
-                  <span class="hint sidebar-selector-hint sidebar-selector-hint--left">
-                    <Kbd shortcut="cmd+shift+a" />
-                  </span>
-                  <span class="hint sidebar-selector-hint sidebar-selector-hint--center">
-                    <Kbd shortcut="cmd+shift+m" />
-                  </span>
-                  <span class="hint sidebar-selector-hint sidebar-selector-hint--right">
-                    <Kbd shortcut="cmd+shift+t" />
-                  </span>
-                </div>
-
                 <ModelSelector
                   instanceId={props.instance.id}
                   sessionId={activeSession().id}

packages/ui/src/components/model-selector.tsx

@@ -4,6 +4,7 @@ import { providers, fetchProviders } from "../stores/sessions"
 import { ChevronDown } from "lucide-solid"
 import type { Model } from "../types/session"
 import { getLogger } from "../lib/logger"
+import Kbd from "./kbd"
 const log = getLogger("session")
 
 
@@ -105,7 +106,7 @@ export default function ModelSelector(props: ModelSelectorProps) {
             ref={triggerRef}
             class="selector-trigger"
           >
-            <div class="selector-trigger-label selector-trigger-label--stacked">
+            <div class="selector-trigger-label selector-trigger-label--stacked flex-1 min-w-0">
               <span class="selector-trigger-primary selector-trigger-primary--align-left">
                 Model: {currentModelValue()?.name ?? "None"}
               </span>
@@ -115,6 +116,9 @@ export default function ModelSelector(props: ModelSelectorProps) {
                 </span>
               )}
             </div>
+            <span class="selector-trigger-hint selector-trigger-hint--top" aria-hidden="true">
+              <Kbd shortcut="cmd+shift+m" />
+            </span>
             <Combobox.Icon class="selector-trigger-icon">
               <ChevronDown class="w-3 h-3" />
             </Combobox.Icon>

packages/ui/src/components/thinking-selector.tsx

@@ -4,6 +4,7 @@ import { providers, fetchProviders } from "../stores/sessions"
 import { ChevronDown } from "lucide-solid"
 import { getLogger } from "../lib/logger"
 import { getModelThinkingSelection, setModelThinkingSelection } from "../stores/preferences"
+import Kbd from "./kbd"
 
 const log = getLogger("session")
 
@@ -83,9 +84,12 @@ export default function ThinkingSelector(props: ThinkingSelectorProps) {
         <Combobox.Control class="relative w-full" data-thinking-selector-control>
           <Combobox.Input class="sr-only" data-thinking-selector />
           <Combobox.Trigger class="selector-trigger">
-            <div class="selector-trigger-label selector-trigger-label--stacked">
+            <div class="selector-trigger-label selector-trigger-label--stacked flex-1 min-w-0">
               <span class="selector-trigger-primary selector-trigger-primary--align-left">{triggerPrimary()}</span>
             </div>
+            <span class="selector-trigger-hint" aria-hidden="true">
+              <Kbd shortcut="cmd+shift+t" />
+            </span>
             <Combobox.Icon class="selector-trigger-icon">
               <ChevronDown class="w-3 h-3" />
             </Combobox.Icon>