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>>
+          <div class="flex-1 min-w-0">
-            {(state) => (
+            <Select.Value<Agent>>
-              <div class="selector-trigger-label">
+              {(state) => (
-                <span class="selector-trigger-primary">
+                <div class="selector-trigger-label selector-trigger-label--stacked">
-                  Agent: {state.selectedOption()?.name ?? "None"}
+                  <span class="selector-trigger-primary selector-trigger-primary--align-left">
-                </span>
+                    Agent: {state.selectedOption()?.name ?? "None"}
-              </div>
+                  </span>
-            )}
+                </div>
-          </Select.Value>
+              )}
+            </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>

packages/ui/src/styles/components/selector.css

@@ -27,6 +27,10 @@
   @apply items-start;
 }
 
+.selector-trigger-label--top {
+  @apply self-start;
+}
+
 .selector-trigger-primary {
   @apply text-sm font-medium truncate;
   color: var(--text-primary);
@@ -46,6 +50,15 @@
   color: var(--text-muted);
 }
 
+.selector-trigger-hint {
+  @apply flex-shrink-0;
+  color: var(--text-muted);
+}
+
+.selector-trigger-hint--top {
+  @apply self-start mt-0.5;
+}
+
 .selector-popover {
   @apply rounded-md shadow-lg overflow-hidden min-w-[300px];
   background-color: var(--surface-base);

packages/ui/src/styles/panels/session-layout.css

@@ -115,34 +115,6 @@ session-sidebar-controls .selector-trigger-primary {
   @apply flex flex-col gap-1 w-full;
 }
 
-.sidebar-selector-hint {
-  @apply flex justify-center text-xs w-full;
-  color: var(--text-muted);
-}
-
-.sidebar-selector-hints {
-  @apply grid gap-2 w-full;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-}
-
-.sidebar-selector-hint--left,
-.sidebar-selector-hint--center,
-.sidebar-selector-hint--right {
-  justify-content: center;
-}
-
-@media (max-width: 520px) {
-  .sidebar-selector-hints {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-
-@media (max-width: 360px) {
-  .sidebar-selector-hints {
-    grid-template-columns: 1fr;
-  }
-}
-
 .session-header-hints {
   @apply flex-shrink-0;
 }