From 58eb473baa817f8105d51b8651dd30b5d731682e Mon Sep 17 00:00:00 2001
From: Brooklyn Nicholson <brooklyn.bb.nicholson@gmail.com>
Date: Wed, 3 Jun 2026 21:07:33 -0500
Subject: [PATCH 01/29] fix(desktop): surface background-session clarify
 prompts instead of hanging

clarify.request is a one-shot blocking event: the gateway turn blocks on
clarify.respond. The desktop handler dropped it for any non-focused session
(`if (!isActiveEvent) return`) and stored at most one request in a single
global atom, so a background session that asked a clarifying question hung
forever and re-focusing it could never recover (the event was already gone).

- store/clarify.ts: key pending requests by runtime session id; expose the
  active session's request via a focus-scoped computed view (ClarifyTool is
  unchanged). clearClarifyRequest takes an optional session id for targeted
  clears, with a request-id fallback.
- use-message-stream.ts: park every session's clarify (drop the isActiveEvent
  early return); toast when one lands for a background session since the row
  otherwise just keeps spinning like normal work.
- clarify-tool.tsx: clear by session id so answering one chat can't wipe
  another's pending request.
- store/clarify.test.ts: concurrent independence, focus-scoped view,
  targeted/stale/fallback clears.
---
 .../app/session/hooks/use-message-stream.ts   | 22 ++++-
 .../components/assistant-ui/clarify-tool.tsx  |  2 +-
 apps/desktop/src/store/clarify.test.ts        | 81 +++++++++++++++++++
 apps/desktop/src/store/clarify.ts             | 63 ++++++++++++---
 4 files changed, 150 insertions(+), 18 deletions(-)
 create mode 100644 apps/desktop/src/store/clarify.test.ts

diff --git a/apps/desktop/src/app/session/hooks/use-message-stream.ts b/apps/desktop/src/app/session/hooks/use-message-stream.ts
index fc0d8ec3e35..f4dbb244e51 100644
--- a/apps/desktop/src/app/session/hooks/use-message-stream.ts
+++ b/apps/desktop/src/app/session/hooks/use-message-stream.ts
@@ -798,13 +798,16 @@ export function useMessageStream({
           )
         }
       } else if (event.type === 'clarify.request') {
-        if (!isActiveEvent) {
-          return
-        }
-
         // Surface the clarify tool's overlay. The Python side is blocked on
         // `clarify.respond`, so without this handler the agent would hang
         // forever (see tools/clarify_tool.py + tui_gateway/server.py:_block).
+        //
+        // Store the request for whichever session raised it — even a background
+        // one. clarify.request is a one-shot event; if we dropped it for an
+        // unfocused session, that session would block on `clarify.respond`
+        // indefinitely and re-focusing it could never recover (the event is
+        // gone). Parking it per-session lets the user answer once they switch
+        // over; the inline ClarifyTool reads the active session's entry.
         const requestId = typeof payload?.request_id === 'string' ? payload.request_id : ''
         const question = typeof payload?.question === 'string' ? payload.question : ''
 
@@ -815,6 +818,17 @@ export function useMessageStream({
             choices: Array.isArray(payload?.choices) ? payload!.choices!.filter(c => typeof c === 'string') : null,
             sessionId: sessionId ?? null
           })
+
+          // The transcript only renders the active session, so a background
+          // clarify is otherwise invisible (the row just keeps spinning like
+          // it's working). Nudge the user toward the chat that needs them.
+          if (!isActiveEvent) {
+            notify({
+              kind: 'info',
+              title: 'Another chat needs input',
+              message: 'Hermes asked a question in a background session. Open it to answer.'
+            })
+          }
         }
       } else if (event.type === 'error') {
         const errorMessage = payload?.message || 'Hermes reported an error'
diff --git a/apps/desktop/src/components/assistant-ui/clarify-tool.tsx b/apps/desktop/src/components/assistant-ui/clarify-tool.tsx
index 266e554ad11..1fb652f04c2 100644
--- a/apps/desktop/src/components/assistant-ui/clarify-tool.tsx
+++ b/apps/desktop/src/components/assistant-ui/clarify-tool.tsx
@@ -103,7 +103,7 @@ function ClarifyToolPending({ args }: ToolCallMessagePartProps) {
           answer
         })
         triggerHaptic('submit')
-        clearClarifyRequest(matchingRequest.requestId)
+        clearClarifyRequest(matchingRequest.requestId, matchingRequest.sessionId)
         // The matching tool.complete will land shortly after, swapping this
         // panel for the ToolFallback view above.
       } catch (error) {
diff --git a/apps/desktop/src/store/clarify.test.ts b/apps/desktop/src/store/clarify.test.ts
new file mode 100644
index 00000000000..269004b49f1
--- /dev/null
+++ b/apps/desktop/src/store/clarify.test.ts
@@ -0,0 +1,81 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+
+import {
+  $clarifyRequest,
+  $clarifyRequests,
+  type ClarifyRequest,
+  clearClarifyRequest,
+  setClarifyRequest
+} from './clarify'
+import { $activeSessionId } from './session'
+
+function clarify(sessionId: string | null, requestId: string): ClarifyRequest {
+  return {
+    requestId,
+    question: `question-${requestId}`,
+    choices: null,
+    sessionId
+  }
+}
+
+describe('clarify store', () => {
+  beforeEach(() => {
+    $clarifyRequests.set({})
+    $activeSessionId.set(null)
+  })
+
+  afterEach(() => {
+    $clarifyRequests.set({})
+    $activeSessionId.set(null)
+  })
+
+  it('keeps clarify requests from concurrent sessions independent', () => {
+    setClarifyRequest(clarify('session-a', 'req-a'))
+    setClarifyRequest(clarify('session-b', 'req-b'))
+
+    expect($clarifyRequests.get()['session-a']?.requestId).toBe('req-a')
+    expect($clarifyRequests.get()['session-b']?.requestId).toBe('req-b')
+  })
+
+  it('exposes only the active session via the focus-scoped view', () => {
+    setClarifyRequest(clarify('session-a', 'req-a'))
+    setClarifyRequest(clarify('session-b', 'req-b'))
+
+    $activeSessionId.set('session-a')
+    expect($clarifyRequest.get()?.requestId).toBe('req-a')
+
+    $activeSessionId.set('session-b')
+    expect($clarifyRequest.get()?.requestId).toBe('req-b')
+
+    $activeSessionId.set('session-c')
+    expect($clarifyRequest.get()).toBeNull()
+  })
+
+  it('clears only the targeted session, leaving the other pending', () => {
+    setClarifyRequest(clarify('session-a', 'req-a'))
+    setClarifyRequest(clarify('session-b', 'req-b'))
+
+    clearClarifyRequest('req-a', 'session-a')
+
+    expect($clarifyRequests.get()['session-a']).toBeUndefined()
+    expect($clarifyRequests.get()['session-b']?.requestId).toBe('req-b')
+  })
+
+  it('ignores a stale clear whose request id no longer matches', () => {
+    setClarifyRequest(clarify('session-a', 'req-a2'))
+
+    clearClarifyRequest('req-a1', 'session-a')
+
+    expect($clarifyRequests.get()['session-a']?.requestId).toBe('req-a2')
+  })
+
+  it('clears by request id across sessions when no session hint is given', () => {
+    setClarifyRequest(clarify('session-a', 'shared'))
+    setClarifyRequest(clarify('session-b', 'other'))
+
+    clearClarifyRequest('shared')
+
+    expect($clarifyRequests.get()['session-a']).toBeUndefined()
+    expect($clarifyRequests.get()['session-b']?.requestId).toBe('other')
+  })
+})
diff --git a/apps/desktop/src/store/clarify.ts b/apps/desktop/src/store/clarify.ts
index ce90f48d8c9..14a98f15c88 100644
--- a/apps/desktop/src/store/clarify.ts
+++ b/apps/desktop/src/store/clarify.ts
@@ -1,4 +1,6 @@
-import { atom } from 'nanostores'
+import { atom, computed } from 'nanostores'
+
+import { $activeSessionId } from './session'
 
 export interface ClarifyRequest {
   requestId: string
@@ -7,26 +9,61 @@ export interface ClarifyRequest {
   sessionId: string | null
 }
 
-// Holds the request_id (and metadata) for the most recent in-flight
-// clarify call. The inline ClarifyTool component (rendered inside the
-// assistant message stream) reads this to know which request_id to send
-// back over `clarify.respond`.
-export const $clarifyRequest = atom<ClarifyRequest | null>(null)
+// Pending clarify requests keyed by the runtime session id that raised them.
+// Storing per-session (instead of one shared slot) lets a *background* session
+// park its clarify request while the user is looking at a different chat, then
+// resolve it once they switch over — without a second concurrent clarify
+// clobbering the first. A request with no session id lands under the empty key.
+const keyFor = (sessionId: string | null | undefined): string => sessionId ?? ''
+
+export const $clarifyRequests = atom<Record<string, ClarifyRequest>>({})
+
+// The clarify request for the currently-viewed session. The inline ClarifyTool
+// only ever mounts inside the active session's transcript, so it reads this
+// focus-scoped view rather than reaching into the whole map.
+export const $clarifyRequest = computed(
+  [$clarifyRequests, $activeSessionId],
+  (requests, activeId) => requests[keyFor(activeId)] ?? null
+)
 
 export function setClarifyRequest(request: ClarifyRequest): void {
-  $clarifyRequest.set(request)
+  $clarifyRequests.set({ ...$clarifyRequests.get(), [keyFor(request.sessionId)]: request })
 }
 
-export function clearClarifyRequest(requestId?: string): void {
-  const current = $clarifyRequest.get()
+export function clearClarifyRequest(requestId?: string, sessionId?: string | null): void {
+  const requests = $clarifyRequests.get()
+
+  // Targeted clear when the caller knows the session (the common path from the
+  // inline ClarifyTool answering its own request).
+  if (sessionId !== undefined) {
+    const key = keyFor(sessionId)
+    const current = requests[key]
+
+    if (!current || (requestId && current.requestId !== requestId)) {
+      return
+    }
+
+    const next = { ...requests }
+    delete next[key]
+    $clarifyRequests.set(next)
 
-  if (!current) {
     return
   }
 
-  if (requestId && current.requestId !== requestId) {
-    return
+  // Fallback with no session hint: drop every entry matching the request id
+  // (or clear all when none is given).
+  const next: Record<string, ClarifyRequest> = {}
+  let changed = false
+
+  for (const [key, value] of Object.entries(requests)) {
+    if (requestId && value.requestId !== requestId) {
+      next[key] = value
+    } else {
+      changed = true
+    }
   }
 
-  $clarifyRequest.set(null)
+  if (changed) {
+    $clarifyRequests.set(next)
+  }
 }

From 35a750eedd7b8b669dee3c9878ab157f1e4eb010 Mon Sep 17 00:00:00 2001
From: Brooklyn Nicholson <brooklyn.bb.nicholson@gmail.com>
Date: Wed, 3 Jun 2026 21:44:30 -0500
Subject: [PATCH 02/29] feat(desktop): persistent needs-input indicator + icon
 button consolidation

Replace the background-clarify toast (expired on alt-tab, easy to miss) with a
persistent, glowing amber "needs input" dot on the session's sidebar row,
driven off a new ClientSessionState.needsInput flag mirrored into a
$attentionSessionIds store. The flag is set on clarify.request and cleared the
moment the turn resumes (tool.complete) or ends.

Also: redesign the clarify tool UI (borderless choices, pseudo-radio dots,
right-aligned checkmark, arc border, tighter padding), make Button the single
source of icon-button styling (4px radius, new icon-titlebar variant, titlebar
buttons rendered polymorphically via asChild, Codicons throughout), put the
file-tree refresh action first, and .trim() pasted composer text.
---
 apps/desktop/src/app/chat/composer/index.tsx  | 10 ++-
 .../src/app/chat/sidebar/session-row.tsx      | 52 ++++++++++--
 apps/desktop/src/app/right-sidebar/index.tsx  | 48 ++++++-----
 .../app/session/hooks/use-message-stream.ts   | 23 +++---
 .../session/hooks/use-session-state-cache.ts  |  7 +-
 .../src/app/shell/titlebar-controls.tsx       | 48 ++++++-----
 apps/desktop/src/app/shell/titlebar.ts        |  6 +-
 apps/desktop/src/app/types.ts                 |  3 +
 .../components/assistant-ui/clarify-tool.tsx  | 81 ++++++++-----------
 apps/desktop/src/components/ui/button.tsx     |  9 ++-
 apps/desktop/src/lib/chat-runtime.ts          |  3 +-
 apps/desktop/src/store/session.test.ts        | 30 ++++++-
 apps/desktop/src/store/session.ts             | 41 +++++++---
 apps/desktop/src/styles.css                   | 31 +++++++
 14 files changed, 262 insertions(+), 130 deletions(-)

diff --git a/apps/desktop/src/app/chat/composer/index.tsx b/apps/desktop/src/app/chat/composer/index.tsx
index d19c0a2532f..6d1be390706 100644
--- a/apps/desktop/src/app/chat/composer/index.tsx
+++ b/apps/desktop/src/app/chat/composer/index.tsx
@@ -407,13 +407,19 @@ export function ChatBar({
       return
     }
 
-    const pastedText = event.clipboardData.getData('text')
+    // Trim surrounding whitespace so a copy that dragged along leading/trailing
+    // blank lines (common when selecting from terminals, code blocks, web pages)
+    // doesn't dump multiline padding into the composer. Internal newlines are
+    // preserved — only the edges are cleaned up.
+    const pastedText = event.clipboardData.getData('text').trim()
 
     if (!pastedText) {
+      event.preventDefault()
+
       return
     }
 
-    if (DATA_IMAGE_URL_RE.test(pastedText.trim())) {
+    if (DATA_IMAGE_URL_RE.test(pastedText)) {
       event.preventDefault()
 
       return
diff --git a/apps/desktop/src/app/chat/sidebar/session-row.tsx b/apps/desktop/src/app/chat/sidebar/session-row.tsx
index 81359a6f854..aaa623faa3f 100644
--- a/apps/desktop/src/app/chat/sidebar/session-row.tsx
+++ b/apps/desktop/src/app/chat/sidebar/session-row.tsx
@@ -1,3 +1,4 @@
+import { useStore } from '@nanostores/react'
 import type * as React from 'react'
 
 import { Button } from '@/components/ui/button'
@@ -6,6 +7,7 @@ import type { SessionInfo } from '@/hermes'
 import { sessionTitle } from '@/lib/chat-runtime'
 import { triggerHaptic } from '@/lib/haptics'
 import { cn } from '@/lib/utils'
+import { $attentionSessionIds } from '@/store/session'
 
 import { SessionActionsMenu, SessionContextMenu } from './session-actions-menu'
 
@@ -61,6 +63,10 @@ export function SidebarSessionRow({
   const title = sessionTitle(session)
   const age = formatAge(session.last_active || session.started_at)
   const handleLabel = `Reorder ${title}`
+  // Subscribe per-row (the leaf) instead of drilling a set through the list —
+  // the atom is tiny and rarely non-empty. True when a clarify prompt in this
+  // session is waiting on the user.
+  const needsInput = useStore($attentionSessionIds).includes(session.id)
 
   return (
     <SessionContextMenu
@@ -84,7 +90,7 @@ export function SidebarSessionRow({
         style={style}
         {...rest}
       >
-        {isWorking && <span aria-hidden="true" className="arc-border" />}
+        {isWorking && !needsInput && <span aria-hidden="true" className="arc-border" />}
         <button
           className="z-0 flex min-w-0 cursor-pointer items-center gap-1.5 bg-transparent py-0.5 pl-2 pr-1 text-left group-hover:pr-12"
           onClick={event => {
@@ -114,16 +120,25 @@ export function SidebarSessionRow({
             <span
               {...dragHandleProps}
               aria-label={handleLabel}
-              className="relative -my-0.5 grid w-4 shrink-0 cursor-grab touch-none place-items-center self-stretch overflow-hidden active:cursor-grabbing"
+              className={cn(
+                // Scope the dot↔grabber swap to a local group so the grabber
+                // only reveals when hovering/focusing the handle itself, not
+                // anywhere on the row.
+                'group/handle relative -my-0.5 grid w-4 shrink-0 cursor-grab touch-none place-items-center self-stretch overflow-hidden active:cursor-grabbing',
+                // The quest-glow box-shadow extends past the dot; let it bleed
+                // out instead of being clipped by this handle's overflow-hidden.
+                needsInput && 'overflow-visible'
+              )}
               onClick={event => event.stopPropagation()}
             >
               <SidebarRowDot
-                className="transition-opacity group-hover:opacity-0 group-focus-within:opacity-0"
+                className="transition-opacity group-hover/handle:opacity-0 group-focus-within/handle:opacity-0"
                 isWorking={isWorking}
+                needsInput={needsInput}
               />
               <Codicon
                 className={cn(
-                  'absolute text-(--ui-text-quaternary) opacity-0 transition-opacity group-hover:opacity-80 group-focus-within:opacity-80 hover:text-(--ui-text-secondary)',
+                  'absolute text-(--ui-text-quaternary) opacity-0 transition-opacity group-hover/handle:opacity-80 group-focus-within/handle:opacity-80 hover:text-(--ui-text-secondary)',
                   dragging && 'text-(--ui-text-secondary) opacity-100'
                 )}
                 name="grabber"
@@ -131,8 +146,8 @@ export function SidebarSessionRow({
               />
             </span>
           ) : (
-            <span className="grid w-3.5 shrink-0 place-items-center overflow-hidden">
-              <SidebarRowDot isWorking={isWorking} />
+            <span className={cn('grid w-3.5 shrink-0 place-items-center', needsInput ? 'overflow-visible' : 'overflow-hidden')}>
+              <SidebarRowDot isWorking={isWorking} needsInput={needsInput} />
             </span>
           )}
           <span className="truncate text-[0.8125rem] font-normal text-(--ui-text-secondary) group-hover:text-foreground group-data-[working=true]:text-foreground/90">
@@ -169,7 +184,30 @@ export function SidebarSessionRow({
   )
 }
 
-function SidebarRowDot({ isWorking, className }: { isWorking: boolean; className?: string }) {
+function SidebarRowDot({
+  isWorking,
+  needsInput = false,
+  className
+}: {
+  isWorking: boolean
+  needsInput?: boolean
+  className?: string
+}) {
+  // "Needs input" wins over "working": a clarify-blocked session is technically
+  // still running, but the actionable state is that it's waiting on the user.
+  // Amber + steady (no ping) reads as "your turn", distinct from the accent
+  // pulse of an active turn.
+  if (needsInput) {
+    return (
+      <span
+        aria-label="Needs your input"
+        className={cn('quest-glow relative size-1.5 rounded-full bg-amber-500', className)}
+        role="status"
+        title="Waiting for your answer"
+      />
+    )
+  }
+
   return (
     <span
       aria-label={isWorking ? 'Session running' : undefined}
diff --git a/apps/desktop/src/app/right-sidebar/index.tsx b/apps/desktop/src/app/right-sidebar/index.tsx
index ac6e0b53f48..8e46aeb6799 100644
--- a/apps/desktop/src/app/right-sidebar/index.tsx
+++ b/apps/desktop/src/app/right-sidebar/index.tsx
@@ -31,7 +31,7 @@ interface RightSidebarTab {
 }
 
 const RIGHT_SIDEBAR_TABS: readonly RightSidebarTab[] = [
-  { id: 'files', label: 'File system', icon: 'files' },
+  { id: 'files', label: 'File system', icon: 'list-tree' },
   { id: 'terminal', label: 'Terminal', icon: 'terminal' }
 ]
 
@@ -141,23 +141,24 @@ function RightSidebarChrome({
       <div className="flex items-center gap-2 px-2.5 py-1">
         <nav aria-label="Right sidebar panels" className="flex min-w-0 items-center gap-1">
           {tabs.map(tab => (
-            <button
+            <Button
               aria-label={tab.label}
               aria-pressed={tab.id === activeTab}
               className={cn(
-                'grid size-6 shrink-0 place-items-center rounded-lg text-(--ui-text-tertiary) transition-colors hover:bg-(--ui-control-hover-background) hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring active:bg-(--ui-control-active-background) active:text-foreground',
-                'data-[active=true]:bg-(--ui-control-active-background) data-[active=true]:text-foreground'
+                'text-(--ui-text-tertiary) hover:bg-(--ui-control-hover-background) hover:text-foreground',
+                tab.id === activeTab && 'bg-(--ui-control-active-background) text-foreground'
               )}
-              data-active={tab.id === activeTab}
               key={tab.id}
               onClick={() => setRightSidebarTab(tab.id)}
+              size="icon-xs"
               title={tab.label}
-              type="button"
+              variant="ghost"
             >
               <Codicon name={tab.icon} size="0.875rem" />
-            </button>
+            </Button>
           ))}
         </nav>
+
         {branch && (
           <span className="ml-auto flex min-w-0 items-center gap-1 text-[0.6875rem] text-(--ui-text-tertiary)">
             <Codicon className="shrink-0" name="git-branch" size="0.75rem" />
@@ -178,8 +179,11 @@ interface FilesystemTabProps extends FileTreeBodyProps {
   onRefresh: () => void
 }
 
+// Sidebar-specific color/hover treatment only — size, radius, cursor and the
+// base focus ring come from <Button size="icon-xs">. This constant exists
+// purely to share the sidebar palette + the hover-reveal behavior below.
 const HEADER_ACTION_CLASS =
-  'size-6 shrink-0 rounded-md text-sidebar-foreground/70 transition-colors hover:bg-sidebar-accent! hover:text-sidebar-accent-foreground! focus-visible:ring-2 focus-visible:ring-sidebar-ring'
+  'text-sidebar-foreground/70 hover:bg-sidebar-accent! hover:text-sidebar-accent-foreground! focus-visible:ring-sidebar-ring'
 
 const HEADER_ACTION_REVEAL_CLASS = `${HEADER_ACTION_CLASS} pointer-events-none opacity-0 transition-opacity focus-visible:opacity-100 group-focus-within/project-header:pointer-events-auto group-focus-within/project-header:opacity-100 group-hover/project-header:pointer-events-auto group-hover/project-header:opacity-100`
 
@@ -213,11 +217,22 @@ function FilesystemTab({
         >
           <SidebarPanelLabel>{cwdName}</SidebarPanelLabel>
         </button>
+        <Button
+          aria-label="Refresh tree"
+          className={HEADER_ACTION_CLASS}
+          disabled={!hasCwd || loading}
+          onClick={onRefresh}
+          size="icon-xs"
+          title="Refresh tree"
+          variant="ghost"
+        >
+          <Codicon name="refresh" size="0.8125rem" spinning={loading} />
+        </Button>
         <Button
           aria-label="Open folder"
           className={HEADER_ACTION_CLASS}
           onClick={() => void onChangeFolder()}
-          size="icon"
+          size="icon-xs"
           title={hasCwd ? 'Open a different folder' : 'Open a folder'}
           variant="ghost"
         >
@@ -228,23 +243,12 @@ function FilesystemTab({
           className={HEADER_ACTION_REVEAL_CLASS}
           disabled={!hasCwd || !canCollapse}
           onClick={onCollapseAll}
-          size="icon"
+          size="icon-xs"
           title="Collapse all folders"
           variant="ghost"
         >
           <Codicon name="collapse-all" size="0.8125rem" />
         </Button>
-        <Button
-          aria-label="Refresh tree"
-          className={HEADER_ACTION_REVEAL_CLASS}
-          disabled={!hasCwd || loading}
-          onClick={onRefresh}
-          size="icon"
-          title="Refresh tree"
-          variant="ghost"
-        >
-          <Codicon name="refresh" size="0.8125rem" spinning={loading} />
-        </Button>
       </RightSidebarSectionHeader>
       <FileTreeBody
         collapseNonce={collapseNonce}
@@ -264,7 +268,7 @@ function FilesystemTab({
 }
 
 export function RightSidebarSectionHeader({ children }: { children: ReactNode }) {
-  return <div className="flex h-7 shrink-0 items-center px-2">{children}</div>
+  return <div className="flex h-7 shrink-0 items-center px-2.5">{children}</div>
 }
 
 interface FileTreeBodyProps {
diff --git a/apps/desktop/src/app/session/hooks/use-message-stream.ts b/apps/desktop/src/app/session/hooks/use-message-stream.ts
index f6bf95adb8a..e4c49b8404c 100644
--- a/apps/desktop/src/app/session/hooks/use-message-stream.ts
+++ b/apps/desktop/src/app/session/hooks/use-message-stream.ts
@@ -531,7 +531,8 @@ export function useMessageStream({
           streamId: null,
           pendingBranchGroup: null,
           awaitingResponse: false,
-          busy: false
+          busy: false,
+          needsInput: false
         }
       })
 
@@ -588,7 +589,8 @@ export function useMessageStream({
           pendingBranchGroup: null,
           sawAssistantPayload: true,
           awaitingResponse: false,
-          busy: false
+          busy: false,
+          needsInput: false
         }
       })
     },
@@ -786,6 +788,11 @@ export function useMessageStream({
         if (sessionId) {
           flushQueuedDeltas(sessionId)
           upsertToolCall(sessionId, toTodoPayload(payload) ?? payload, 'complete', event.type)
+          // A pending clarify blocks the turn, so the first tool.complete after
+          // one is the clarify resolving — drop the "needs input" flag here so
+          // the sidebar indicator clears as soon as it's answered, not only at
+          // message.complete.
+          updateSessionState(sessionId, state => (state.needsInput ? { ...state, needsInput: false } : state))
         }
 
         if (typeof payload?.inline_diff === 'string' && payload.inline_diff.trim()) {
@@ -829,13 +836,11 @@ export function useMessageStream({
 
           // The transcript only renders the active session, so a background
           // clarify is otherwise invisible (the row just keeps spinning like
-          // it's working). Nudge the user toward the chat that needs them.
-          if (!isActiveEvent) {
-            notify({
-              kind: 'info',
-              title: 'Another chat needs input',
-              message: 'Hermes asked a question in a background session. Open it to answer.'
-            })
+          // it's working). Flag the session so the sidebar shows a persistent
+          // "needs input" indicator on its row — works for the active session
+          // too, and survives alt-tab / window blur (unlike a toast).
+          if (sessionId) {
+            updateSessionState(sessionId, state => ({ ...state, needsInput: true }))
           }
         }
       } else if (event.type === 'approval.request') {
diff --git a/apps/desktop/src/app/session/hooks/use-session-state-cache.ts b/apps/desktop/src/app/session/hooks/use-session-state-cache.ts
index b2597fea8fa..adb4f362edb 100644
--- a/apps/desktop/src/app/session/hooks/use-session-state-cache.ts
+++ b/apps/desktop/src/app/session/hooks/use-session-state-cache.ts
@@ -4,7 +4,7 @@ import { type MutableRefObject, useCallback, useEffect, useRef } from 'react'
 import type { ChatMessage } from '@/lib/chat-messages'
 import { preserveLocalAssistantErrors } from '@/lib/chat-messages'
 import { createClientSessionState } from '@/lib/chat-runtime'
-import { $busy, $messages, noteSessionActivity, setSessionWorking } from '@/store/session'
+import { $busy, $messages, noteSessionActivity, setSessionAttention, setSessionWorking } from '@/store/session'
 
 import type { ClientSessionState } from '../../types'
 
@@ -152,7 +152,12 @@ export function useSessionStateCache({
         setSessionWorking(previous.storedSessionId, false)
       }
 
+      if (previous.storedSessionId !== next.storedSessionId || !next.needsInput) {
+        setSessionAttention(previous.storedSessionId, false)
+      }
+
       setSessionWorking(next.storedSessionId, next.busy)
+      setSessionAttention(next.storedSessionId, next.needsInput)
       // Every state update is effectively a "still alive" heartbeat for
       // streaming events. The session-store watchdog uses this to keep the
       // working flag alive during long-running turns and to clear it once
diff --git a/apps/desktop/src/app/shell/titlebar-controls.tsx b/apps/desktop/src/app/shell/titlebar-controls.tsx
index 1f0a8690ed5..99e778a6f21 100644
--- a/apps/desktop/src/app/shell/titlebar-controls.tsx
+++ b/apps/desktop/src/app/shell/titlebar-controls.tsx
@@ -2,6 +2,7 @@ import { useStore } from '@nanostores/react'
 import type { ComponentProps, ReactNode } from 'react'
 import { useNavigate } from 'react-router-dom'
 
+import { Button } from '@/components/ui/button'
 import { Codicon } from '@/components/ui/codicon'
 import {
   DropdownMenu,
@@ -12,7 +13,6 @@ import {
   DropdownMenuTrigger
 } from '@/components/ui/dropdown-menu'
 import { triggerHaptic } from '@/lib/haptics'
-import { Volume2, VolumeX } from '@/lib/icons'
 import { cn } from '@/lib/utils'
 import { $hapticsMuted, toggleHapticsMuted } from '@/store/haptics'
 import { $fileBrowserOpen, $sidebarOpen, toggleFileBrowserOpen, toggleSidebarOpen } from '@/store/layout'
@@ -109,7 +109,7 @@ export function TitlebarControls({
   const systemTools: TitlebarTool[] = [
     {
       active: hapticsMuted,
-      icon: hapticsMuted ? <VolumeX /> : <Volume2 />,
+      icon: <Codicon name={hapticsMuted ? 'mute' : 'unmute'} />,
       id: 'haptics',
       label: hapticsMuted ? 'Unmute haptics' : 'Mute haptics',
       onSelect: toggleHaptics
@@ -181,15 +181,20 @@ function ProfilesMenuButton({ navigate }: { navigate: ReturnType<typeof useNavig
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <button
+        <Button
           aria-label="Profiles"
-          className={cn(titlebarButtonClass, 'grid place-items-center bg-transparent select-none [&_svg]:size-4')}
+          className={cn(titlebarButtonClass, 'bg-transparent select-none')}
           onPointerDown={event => event.stopPropagation()}
+          size="icon-titlebar"
           title="Profiles"
           type="button"
+          variant="ghost"
         >
-          <Codicon name="account" />
-        </button>
+          {/* Optical bump: the `account` glyph has more internal padding than
+              `search`/`settings-gear`, so at the shared 0.875rem it reads small.
+              Nudge just this glyph to visually match its neighbours. */}
+          <Codicon name="account" size="1rem" />
+        </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end" className="w-64" sideOffset={8}>
         <DropdownMenuLabel>
@@ -216,29 +221,30 @@ function ProfilesMenuButton({ navigate }: { navigate: ReturnType<typeof useNavig
 function TitlebarToolButton({ navigate, tool }: { navigate: ReturnType<typeof useNavigate>; tool: TitlebarTool }) {
   const className = cn(
     titlebarButtonClass,
-    'grid place-items-center bg-transparent select-none [&_svg]:size-4',
+    'bg-transparent select-none',
     tool.active && 'bg-(--ui-control-active-background)! text-foreground!',
     tool.className
   )
 
   if (tool.href) {
     return (
-      <a
-        aria-label={tool.label}
-        className={className}
-        href={tool.href}
-        onPointerDown={event => event.stopPropagation()}
-        rel="noreferrer"
-        target="_blank"
-        title={tool.title ?? tool.label}
-      >
-        {tool.icon}
-      </a>
+      <Button asChild className={className} size="icon-titlebar" variant="ghost">
+        <a
+          aria-label={tool.label}
+          href={tool.href}
+          onPointerDown={event => event.stopPropagation()}
+          rel="noreferrer"
+          target="_blank"
+          title={tool.title ?? tool.label}
+        >
+          {tool.icon}
+        </a>
+      </Button>
     )
   }
 
   return (
-    <button
+    <Button
       aria-label={tool.label}
       aria-pressed={tool.active ?? undefined}
       className={className}
@@ -251,10 +257,12 @@ function TitlebarToolButton({ navigate, tool }: { navigate: ReturnType<typeof us
         tool.onSelect?.()
       }}
       onPointerDown={event => event.stopPropagation()}
+      size="icon-titlebar"
       title={tool.title ?? tool.label}
       type="button"
+      variant="ghost"
     >
       {tool.icon}
-    </button>
+    </Button>
   )
 }
diff --git a/apps/desktop/src/app/shell/titlebar.ts b/apps/desktop/src/app/shell/titlebar.ts
index 34f0da8e5ad..c5002eafef6 100644
--- a/apps/desktop/src/app/shell/titlebar.ts
+++ b/apps/desktop/src/app/shell/titlebar.ts
@@ -12,8 +12,10 @@ export const TITLEBAR_FALLBACK_WINDOW_BUTTON_X = 24
 // (traffic lights are hidden). Matches the right-cluster's 0.75rem padding.
 export const TITLEBAR_EDGE_INSET = 14
 
-export const titlebarButtonClass =
-  'h-[var(--titlebar-control-height)] w-[var(--titlebar-control-size)] cursor-pointer rounded-md text-muted-foreground/85 transition-colors hover:bg-(--ui-control-hover-background) hover:text-foreground'
+// Titlebar palette only. All sizing/radius/cursor/centering come from the
+// shared <Button size="icon-titlebar"> (used polymorphically via asChild) —
+// Button is the single source of button styling.
+export const titlebarButtonClass = 'text-muted-foreground/85 hover:bg-(--ui-control-hover-background) hover:text-foreground'
 
 export const titlebarHeaderBaseClass =
   'pointer-events-none relative z-3 flex h-(--titlebar-height) shrink-0 items-center justify-start gap-3 border-b border-(--ui-stroke-tertiary) bg-(--ui-chat-surface-background) px-[max(0.75rem,var(--titlebar-content-inset,0rem))]'
diff --git a/apps/desktop/src/app/types.ts b/apps/desktop/src/app/types.ts
index 246076bd36b..d6164a70d86 100644
--- a/apps/desktop/src/app/types.ts
+++ b/apps/desktop/src/app/types.ts
@@ -73,4 +73,7 @@ export interface ClientSessionState {
   sawAssistantPayload: boolean
   pendingBranchGroup: string | null
   interrupted: boolean
+  /** A blocking clarify prompt is waiting on the user for this session. Drives
+   *  the sidebar "needs input" indicator; cleared when the turn resumes/ends. */
+  needsInput: boolean
 }
diff --git a/apps/desktop/src/components/assistant-ui/clarify-tool.tsx b/apps/desktop/src/components/assistant-ui/clarify-tool.tsx
index 1fb652f04c2..74ebb639b3b 100644
--- a/apps/desktop/src/components/assistant-ui/clarify-tool.tsx
+++ b/apps/desktop/src/components/assistant-ui/clarify-tool.tsx
@@ -8,7 +8,7 @@ import { ToolFallback } from '@/components/assistant-ui/tool-fallback'
 import { Button } from '@/components/ui/button'
 import { Textarea } from '@/components/ui/textarea'
 import { triggerHaptic } from '@/lib/haptics'
-import { HelpCircle, Loader2, PencilLine } from '@/lib/icons'
+import { Check, HelpCircle, Loader2 } from '@/lib/icons'
 import { cn } from '@/lib/utils'
 import { $clarifyRequest, clearClarifyRequest } from '@/store/clarify'
 import { $gateway } from '@/store/gateway'
@@ -74,6 +74,7 @@ function ClarifyToolPending({ args }: ToolCallMessagePartProps) {
   const [typing, setTyping] = useState(false)
   const [draft, setDraft] = useState('')
   const [submitting, setSubmitting] = useState(false)
+  const [selectedChoice, setSelectedChoice] = useState<string | null>(null)
   const textareaRef = useRef<HTMLTextAreaElement | null>(null)
 
   // Race: tool.start fires a tick before clarify.request, so request_id
@@ -140,71 +141,59 @@ function ClarifyToolPending({ args }: ToolCallMessagePartProps) {
     [draft, respond]
   )
 
-  const handleChoiceKey = useCallback(
-    (event: KeyboardEvent<HTMLDivElement>) => {
-      if (typing || submitting) {
-        return
-      }
-
-      const numeric = Number.parseInt(event.key, 10)
-
-      if (Number.isFinite(numeric) && numeric >= 1 && numeric <= choices.length) {
-        event.preventDefault()
-        void respond(choices[numeric - 1]!)
-      }
-    },
-    [choices, respond, submitting, typing]
-  )
-
   return (
     <div
-      className={cn(
-        'mb-3 mt-2 grid gap-3 rounded-xl border border-border/70 bg-card/40 px-4 py-3.5 text-sm',
-        'shadow-[inset_0_1px_0_color-mix(in_srgb,var(--foreground)_3%,transparent)]'
-      )}
+      className="relative mb-3 mt-2 grid gap-2 rounded-[0.5rem] border border-border/70 bg-card/40 px-3 py-2.5 text-sm shadow-[inset_0_1px_0_color-mix(in_srgb,var(--foreground)_3%,transparent)]"
       data-slot="clarify-inline"
     >
-      <div className="flex items-start gap-2.5">
+      <span aria-hidden className="arc-border" />
+      <div className="flex items-center gap-2.5">
         <span
           aria-hidden
-          className="mt-0.5 grid size-6 shrink-0 place-items-center rounded-md bg-[color-mix(in_srgb,var(--dt-primary)_14%,transparent)] text-primary ring-1 ring-inset ring-primary/15"
+          className="grid size-6 shrink-0 place-items-center rounded-md bg-[color-mix(in_srgb,var(--dt-primary)_14%,transparent)] text-primary ring-1 ring-inset ring-primary/15"
         >
           <HelpCircle className="size-3.5" />
         </span>
-        <div className="grid flex-1 gap-0.5">
-          <span className="text-[0.6875rem] font-medium uppercase tracking-wide text-muted-foreground/85">
-            Hermes is asking
-          </span>
-          <span className="whitespace-pre-wrap leading-snug text-foreground">
-            {question || <em className="text-muted-foreground/70">Loading question…</em>}
-          </span>
-        </div>
+        <span className="flex-1 whitespace-pre-wrap font-medium leading-snug text-foreground">
+          {question || <em className="font-normal text-muted-foreground/70">Loading question…</em>}
+        </span>
       </div>
 
       {!typing && hasChoices && (
-        <div className="grid gap-1.5" onKeyDown={handleChoiceKey} role="group">
+        <div className="grid gap-0.5" role="group">
           {choices.map((choice, index) => (
             <button
               className={cn(
-                'group/choice flex w-full items-center gap-3 rounded-lg border border-border/70 bg-background/60 px-3 py-2 text-left text-sm text-foreground/95',
-                'transition-colors hover:border-border hover:bg-accent/60 disabled:cursor-not-allowed disabled:opacity-55'
+                'flex w-full cursor-pointer items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-sm text-foreground/95',
+                'transition-colors hover:bg-accent/60 disabled:cursor-not-allowed disabled:opacity-55',
+                selectedChoice === choice && 'bg-accent/60'
               )}
               data-choice
               disabled={!ready || submitting}
               key={`${index}-${choice}`}
-              onClick={() => void respond(choice)}
+              onClick={() => {
+                setSelectedChoice(choice)
+                void respond(choice)
+              }}
               type="button"
             >
-              <span className="grid size-5 shrink-0 place-items-center rounded-md bg-muted text-[0.6875rem] font-mono tabular-nums text-muted-foreground group-hover/choice:bg-background">
-                {index + 1}
+              <span
+                aria-hidden
+                className={cn(
+                  'grid size-3.5 shrink-0 place-items-center rounded-full border transition-colors',
+                  selectedChoice === choice ? 'border-primary' : 'border-muted-foreground/40'
+                )}
+              >
+                {selectedChoice === choice && <span className="size-1.5 rounded-full bg-primary" />}
               </span>
               <span className="flex-1 wrap-anywhere">{choice}</span>
+              {selectedChoice === choice && <Check aria-hidden className="size-4 shrink-0 text-primary" />}
             </button>
           ))}
           <button
             className={cn(
-              'flex w-full items-center gap-3 rounded-lg border border-dashed border-border/60 bg-transparent px-3 py-2 text-left text-sm text-muted-foreground',
-              'transition-colors hover:border-border hover:bg-accent/40 hover:text-foreground'
+              'flex w-full cursor-pointer items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-sm text-muted-foreground',
+              'transition-colors hover:bg-accent/40 hover:text-foreground'
             )}
             disabled={submitting}
             onClick={() => {
@@ -213,12 +202,7 @@ function ClarifyToolPending({ args }: ToolCallMessagePartProps) {
             }}
             type="button"
           >
-            <span
-              aria-hidden
-              className="grid size-5 shrink-0 place-items-center rounded-md bg-muted text-muted-foreground"
-            >
-              <PencilLine className="size-3" />
-            </span>
+            <span aria-hidden className="size-3.5 shrink-0 rounded-full border border-muted-foreground/40" />
             <span className="flex-1">Other (type your answer)</span>
           </button>
         </div>
@@ -227,7 +211,7 @@ function ClarifyToolPending({ args }: ToolCallMessagePartProps) {
       {(typing || !hasChoices) && (
         <form className="grid gap-2" onSubmit={handleSubmitFreeform}>
           <Textarea
-            className="min-h-20 resize-y rounded-lg border-border/70 bg-background/60 text-sm"
+            className="min-h-20 resize-y rounded-lg border-transparent bg-accent/40 text-sm focus-visible:bg-background/60"
             disabled={submitting}
             onChange={event => setDraft(event.target.value)}
             onKeyDown={handleTextareaKey}
@@ -270,10 +254,9 @@ function ClarifyToolPending({ args }: ToolCallMessagePartProps) {
       )}
 
       {!typing && hasChoices && (
-        <div className="flex items-center justify-between text-[0.6875rem] text-muted-foreground/85">
-          <span>1–{choices.length} to pick</span>
+        <div className="flex justify-end">
           <button
-            className="bg-transparent text-muted-foreground/85 underline-offset-4 decoration-current/20 hover:text-foreground hover:underline disabled:opacity-50"
+            className="cursor-pointer bg-transparent text-[0.6875rem] text-muted-foreground/70 underline-offset-4 hover:text-foreground hover:underline disabled:cursor-not-allowed disabled:opacity-50"
             disabled={!ready || submitting}
             onClick={() => void respond('')}
             type="button"
diff --git a/apps/desktop/src/components/ui/button.tsx b/apps/desktop/src/components/ui/button.tsx
index be38242bfa4..c715af4cae0 100644
--- a/apps/desktop/src/components/ui/button.tsx
+++ b/apps/desktop/src/components/ui/button.tsx
@@ -23,10 +23,11 @@ const buttonVariants = cva(
         xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
         sm: 'h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5',
         lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
-        icon: 'size-9',
-        'icon-xs': "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
-        'icon-sm': 'size-8',
-        'icon-lg': 'size-10'
+        icon: 'size-9 rounded-[4px]',
+        'icon-xs': "size-6 rounded-[4px] [&_svg:not([class*='size-'])]:size-3",
+        'icon-sm': 'size-8 rounded-[4px]',
+        'icon-lg': 'size-10 rounded-[4px]',
+        'icon-titlebar': 'h-(--titlebar-control-height) w-(--titlebar-control-size) rounded-[4px] [&_.codicon]:text-[0.875rem]'
       }
     },
     defaultVariants: {
diff --git a/apps/desktop/src/lib/chat-runtime.ts b/apps/desktop/src/lib/chat-runtime.ts
index 915869a4fd1..fd81a9ad25a 100644
--- a/apps/desktop/src/lib/chat-runtime.ts
+++ b/apps/desktop/src/lib/chat-runtime.ts
@@ -46,7 +46,8 @@ export function createClientSessionState(
     streamId: null,
     sawAssistantPayload: false,
     pendingBranchGroup: null,
-    interrupted: false
+    interrupted: false,
+    needsInput: false
   }
 }
 
diff --git a/apps/desktop/src/store/session.test.ts b/apps/desktop/src/store/session.test.ts
index a6c1627eb1b..4254929e34d 100644
--- a/apps/desktop/src/store/session.test.ts
+++ b/apps/desktop/src/store/session.test.ts
@@ -2,7 +2,7 @@ import { describe, expect, it } from 'vitest'
 
 import type { SessionInfo } from '@/types/hermes'
 
-import { mergeSessionPage, sessionPinId } from './session'
+import { $attentionSessionIds, mergeSessionPage, sessionPinId, setSessionAttention } from './session'
 
 const session = (over: Partial<SessionInfo>): SessionInfo => ({
   archived: false,
@@ -23,6 +23,34 @@ const session = (over: Partial<SessionInfo>): SessionInfo => ({
   ...over
 })
 
+describe('setSessionAttention', () => {
+  it('adds and removes a session id without duplicating it', () => {
+    $attentionSessionIds.set([])
+
+    setSessionAttention('s1', true)
+    setSessionAttention('s1', true)
+    expect($attentionSessionIds.get()).toEqual(['s1'])
+
+    setSessionAttention('s2', true)
+    expect($attentionSessionIds.get()).toEqual(['s1', 's2'])
+
+    setSessionAttention('s1', false)
+    expect($attentionSessionIds.get()).toEqual(['s2'])
+
+    $attentionSessionIds.set([])
+  })
+
+  it('ignores empty ids and no-op clears', () => {
+    $attentionSessionIds.set([])
+
+    setSessionAttention(null, true)
+    setSessionAttention(undefined, true)
+    setSessionAttention('', true)
+    setSessionAttention('missing', false)
+    expect($attentionSessionIds.get()).toEqual([])
+  })
+})
+
 describe('sessionPinId', () => {
   it('uses the live id when there is no compression lineage', () => {
     expect(sessionPinId(session({ id: 'abc' }))).toBe('abc')
diff --git a/apps/desktop/src/store/session.ts b/apps/desktop/src/store/session.ts
index 8f87b65049a..1d3197891da 100644
--- a/apps/desktop/src/store/session.ts
+++ b/apps/desktop/src/store/session.ts
@@ -193,24 +193,41 @@ export function noteSessionActivity(sessionId: string | null | undefined) {
   armSessionWatchdog(sessionId)
 }
 
+// Toggle an id's membership in a string-set atom, no-op when unchanged (keeps
+// the same array reference so subscribers don't churn).
+const toggleMembership = (set: (next: Updater<string[]>) => void, id: string, on: boolean) =>
+  set(current => {
+    const present = current.includes(id)
+
+    if (on) {
+      return present ? current : [...current, id]
+    }
+
+    return present ? current.filter(x => x !== id) : current
+  })
+
+// Stored session ids with a blocking prompt (clarify) waiting on the user.
+// Separate from $workingSessionIds: a session can be "working" (turn running)
+// AND need input. The sidebar row reads this for a persistent indicator that,
+// unlike a toast, survives window blur / alt-tab.
+export const $attentionSessionIds = atom<string[]>([])
+export const setAttentionSessionIds = (next: Updater<string[]>) => updateAtom($attentionSessionIds, next)
+
+export function setSessionAttention(sessionId: string | null | undefined, needsInput: boolean) {
+  if (sessionId) {
+    toggleMembership(setAttentionSessionIds, sessionId, needsInput)
+  }
+}
+
 export function setSessionWorking(sessionId: string | null | undefined, working: boolean) {
   if (!sessionId) {
     return
   }
 
-  setWorkingSessionIds(current => {
-    const alreadyWorking = current.includes(sessionId)
+  toggleMembership(setWorkingSessionIds, sessionId, working)
 
-    if (working) {
-      return alreadyWorking ? current : [...current, sessionId]
-    }
-
-    return alreadyWorking ? current.filter(id => id !== sessionId) : current
-  })
-
-  // Bookend the watchdog: arm it whenever a session enters "working",
-  // disarm it whenever it leaves. A subsequent noteSessionActivity() from
-  // a streaming event will refresh the timer.
+  // Bookend the watchdog: arm on enter, disarm on leave. A later
+  // noteSessionActivity() from a streaming event refreshes the timer.
   if (working) {
     armSessionWatchdog(sessionId)
   } else {
diff --git a/apps/desktop/src/styles.css b/apps/desktop/src/styles.css
index b85f21f3665..cca4855cbdd 100644
--- a/apps/desktop/src/styles.css
+++ b/apps/desktop/src/styles.css
@@ -467,6 +467,37 @@
   --arc-c1: var(--dt-foreground);
 }
 
+/* Quest-style "needs you" pulse for a clarify-blocked session's dot —
+   a soft amber glow that breathes so the row draws the eye without a toast. */
+@keyframes quest-glow {
+  0%,
+  100% {
+    transform: scale(1);
+    box-shadow:
+      0 0 0.1875rem color-mix(in srgb, var(--color-amber-500, #f59e0b) 70%, transparent),
+      0 0 0.5rem color-mix(in srgb, var(--color-amber-500, #f59e0b) 45%, transparent);
+  }
+  50% {
+    transform: scale(1.18);
+    box-shadow:
+      0 0 0.3125rem color-mix(in srgb, var(--color-amber-500, #f59e0b) 90%, transparent),
+      0 0 0.875rem color-mix(in srgb, var(--color-amber-500, #f59e0b) 65%, transparent);
+  }
+}
+
+.quest-glow {
+  animation: quest-glow 1.8s ease-in-out infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .quest-glow {
+    animation: none;
+    box-shadow:
+      0 0 0.25rem color-mix(in srgb, var(--color-amber-500, #f59e0b) 80%, transparent),
+      0 0 0.625rem color-mix(in srgb, var(--color-amber-500, #f59e0b) 55%, transparent);
+  }
+}
+
 .arc-border::before {
   content: '';
   position: absolute;

From 712bf4d8e4294fba44f1b5782033dad3160a74f8 Mon Sep 17 00:00:00 2001
From: Brooklyn Nicholson <brooklyn.bb.nicholson@gmail.com>
Date: Wed, 3 Jun 2026 21:50:03 -0500
Subject: [PATCH 03/29] style(desktop): padding-driven, square non-icon buttons

Default button sizing was vanilla-shadcn chunky (fixed h-9, 16px padding) and
inconsistent with the icon-button radius pass. Size text variants by
padding + line-height instead of fixed heights so they stay snug and scale
with content, and drop the radius on non-icon buttons (icon buttons keep the
shared 4px). Move the update-overlay CTAs off a hardcoded h-10 onto the
padding-based lg variant. Composer and the inline approval strip are untouched.
---
 apps/desktop/src/app/updates-overlay.tsx  | 10 +++++-----
 apps/desktop/src/components/ui/button.tsx | 13 ++++++++-----
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/apps/desktop/src/app/updates-overlay.tsx b/apps/desktop/src/app/updates-overlay.tsx
index 39cbe97c133..1e0c6af6615 100644
--- a/apps/desktop/src/app/updates-overlay.tsx
+++ b/apps/desktop/src/app/updates-overlay.tsx
@@ -222,7 +222,7 @@ function IdleView({
       </div>
 
       <div className="grid gap-2">
-        <Button className="h-10 text-sm font-semibold" onClick={onInstall} size="default">
+        <Button className="font-semibold" onClick={onInstall} size="lg">
           Update now
         </Button>
         <button
@@ -267,9 +267,9 @@ function ManualView({ command, onDone }: { command: string; onDone: () => void }
       </div>
 
       <button
-        type="button"
-        onClick={handleCopy}
         className="group flex w-full items-center justify-between gap-3 rounded-xl border border-border/70 bg-muted/30 px-4 py-3 text-left transition-colors hover:border-border hover:bg-muted/50"
+        onClick={handleCopy}
+        type="button"
       >
         <code className="select-all font-mono text-sm text-foreground">
           <span className="text-muted-foreground">$ </span>
@@ -294,7 +294,7 @@ function ManualView({ command, onDone }: { command: string; onDone: () => void }
         Hermes will pick up the new version next time you launch it.
       </p>
 
-      <Button className="h-10 text-sm font-semibold" onClick={onDone} variant="outline">
+      <Button className="font-semibold" onClick={onDone} size="lg" variant="outline">
         Done
       </Button>
     </div>
@@ -352,7 +352,7 @@ function ErrorView({ message, onDismiss, onRetry }: { message: string; onDismiss
       </div>
 
       <div className="grid gap-2">
-        <Button className="h-10 text-sm font-semibold" onClick={onRetry}>
+        <Button className="font-semibold" onClick={onRetry} size="lg">
           Try again
         </Button>
         <button
diff --git a/apps/desktop/src/components/ui/button.tsx b/apps/desktop/src/components/ui/button.tsx
index c715af4cae0..21c04a3670a 100644
--- a/apps/desktop/src/components/ui/button.tsx
+++ b/apps/desktop/src/components/ui/button.tsx
@@ -4,8 +4,11 @@ import * as React from 'react'
 
 import { cn } from '@/lib/utils'
 
+// Text buttons are square (no radius) and sized by padding + line-height — no
+// fixed heights — so they stay snug and scale with content. Only icon buttons
+// (inherently square) carry the shared 4px radius.
 const buttonVariants = cva(
-  "inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-none text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
@@ -19,10 +22,10 @@ const buttonVariants = cva(
         link: 'text-primary underline-offset-4 decoration-current/20 hover:underline'
       },
       size: {
-        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
-        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
-        sm: 'h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5',
-        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+        default: 'px-3.5 py-1.5 has-[>svg]:px-3',
+        xs: "gap-1 px-2 py-1 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: 'gap-1.5 px-3 py-1 has-[>svg]:px-2.5',
+        lg: 'px-6 py-2.5 has-[>svg]:px-4',
         icon: 'size-9 rounded-[4px]',
         'icon-xs': "size-6 rounded-[4px] [&_svg:not([class*='size-'])]:size-3",
         'icon-sm': 'size-8 rounded-[4px]',

From 8c0f15478de9dd12eb3171b162da17547c9f273f Mon Sep 17 00:00:00 2001
From: Brooklyn Nicholson <brooklyn.bb.nicholson@gmail.com>
Date: Wed, 3 Jun 2026 21:56:35 -0500
Subject: [PATCH 04/29] style(desktop): shrink button scale, flush overlay
 sidebar, variant-ize stray buttons

- Buttons: smaller default font (14px -> 13px) and tighter padding-driven sizes
  across every variant; the chunky shadcn scale read as oversized in a dense
  desktop UI.
- Overlay split layout (settings / command center): the shared OverlayView top
  padding left the card surface showing as a gap above the sidebar. Move the
  titlebar clearance into each column so the sidebar background runs flush to
  the card's top edge.
- Consolidate buttons that hardcoded size/radius/font onto the proper size
  variants (tooltip-icon-button, overlay close, cron IconAction, SidebarTrigger,
  gateway system button, session-row actions radius, title chip radius, release
  notes link) so styling flows from variant props, not per-call overrides.
  Composer and the inline approval strip are intentionally left as-is.
---
 apps/desktop/src/app/chat/index.tsx                 |  2 +-
 apps/desktop/src/app/chat/sidebar/session-row.tsx   |  2 +-
 apps/desktop/src/app/cron/index.tsx                 |  4 ++--
 .../src/app/overlays/overlay-split-layout.tsx       | 13 +++++++++++--
 apps/desktop/src/app/overlays/overlay-view.tsx      |  9 ++++++---
 apps/desktop/src/app/settings/about-settings.tsx    |  2 +-
 apps/desktop/src/app/settings/index.tsx             |  2 +-
 apps/desktop/src/app/shell/gateway-menu-panel.tsx   |  2 +-
 .../components/assistant-ui/tooltip-icon-button.tsx |  4 ++--
 apps/desktop/src/components/ui/button.tsx           | 10 +++++-----
 apps/desktop/src/components/ui/sidebar.tsx          |  4 ++--
 11 files changed, 33 insertions(+), 21 deletions(-)

diff --git a/apps/desktop/src/app/chat/index.tsx b/apps/desktop/src/app/chat/index.tsx
index a5c5e383309..ac19adc60eb 100644
--- a/apps/desktop/src/app/chat/index.tsx
+++ b/apps/desktop/src/app/chat/index.tsx
@@ -123,7 +123,7 @@ function ChatHeader({
           title={title}
         >
           <Button
-            className="pointer-events-auto h-6 min-w-0 gap-1 rounded-md border border-transparent bg-transparent px-2 py-0 text-(--ui-text-secondary) hover:border-(--ui-stroke-tertiary) hover:bg-(--ui-control-hover-background) hover:text-foreground data-[state=open]:border-(--ui-stroke-tertiary) data-[state=open]:bg-(--ui-control-active-background) [-webkit-app-region:no-drag]"
+            className="pointer-events-auto h-6 min-w-0 gap-1 border border-transparent bg-transparent px-2 py-0 text-(--ui-text-secondary) hover:border-(--ui-stroke-tertiary) hover:bg-(--ui-control-hover-background) hover:text-foreground data-[state=open]:border-(--ui-stroke-tertiary) data-[state=open]:bg-(--ui-control-active-background) [-webkit-app-region:no-drag]"
             type="button"
             variant="ghost"
           >
diff --git a/apps/desktop/src/app/chat/sidebar/session-row.tsx b/apps/desktop/src/app/chat/sidebar/session-row.tsx
index aaa623faa3f..20e14c35b0c 100644
--- a/apps/desktop/src/app/chat/sidebar/session-row.tsx
+++ b/apps/desktop/src/app/chat/sidebar/session-row.tsx
@@ -170,7 +170,7 @@ export function SidebarSessionRow({
           >
             <Button
               aria-label={`Actions for ${title}`}
-              className="size-5 rounded-md bg-transparent text-transparent transition-colors duration-100 hover:bg-(--ui-control-active-background) hover:text-foreground focus-visible:bg-(--ui-control-active-background) focus-visible:text-foreground focus-visible:ring-0 data-[state=open]:bg-(--ui-control-active-background) data-[state=open]:text-foreground group-hover:text-(--ui-text-tertiary) [&_svg]:size-3.5!"
+              className="size-5 rounded-[4px] bg-transparent text-transparent transition-colors duration-100 hover:bg-(--ui-control-active-background) hover:text-foreground focus-visible:bg-(--ui-control-active-background) focus-visible:text-foreground focus-visible:ring-0 data-[state=open]:bg-(--ui-control-active-background) data-[state=open]:text-foreground group-hover:text-(--ui-text-tertiary) [&_svg]:size-3.5!"
               size="icon"
               title="Session actions"
               variant="ghost"
diff --git a/apps/desktop/src/app/cron/index.tsx b/apps/desktop/src/app/cron/index.tsx
index 16a8c5c1c88..dbddcb01ab7 100644
--- a/apps/desktop/src/app/cron/index.tsx
+++ b/apps/desktop/src/app/cron/index.tsx
@@ -604,8 +604,8 @@ function CronJobRow({
 function IconAction({ children, className, ...props }: Omit<React.ComponentProps<typeof Button>, 'size' | 'variant'>) {
   return (
     <Button
-      className={cn('size-7 text-muted-foreground hover:text-foreground', className)}
-      size="icon"
+      className={cn('text-muted-foreground hover:text-foreground', className)}
+      size="icon-sm"
       variant="ghost"
       {...props}
     >
diff --git a/apps/desktop/src/app/overlays/overlay-split-layout.tsx b/apps/desktop/src/app/overlays/overlay-split-layout.tsx
index 2ce6c85bcf5..a6e66986849 100644
--- a/apps/desktop/src/app/overlays/overlay-split-layout.tsx
+++ b/apps/desktop/src/app/overlays/overlay-split-layout.tsx
@@ -43,7 +43,9 @@ export function OverlaySidebar({ children, className }: OverlaySidebarProps) {
   return (
     <aside
       className={cn(
-        'flex min-h-0 flex-col gap-0.5 overflow-y-auto bg-(--ui-sidebar-surface-background) px-2.5 py-3',
+        // pt clears the floating titlebar/header; the bg itself fills from the
+        // card's top edge so there's no surface-colored gap above the sidebar.
+        'flex min-h-0 flex-col gap-0.5 overflow-y-auto bg-(--ui-sidebar-surface-background) px-2.5 pb-3 pt-[calc(var(--titlebar-height)+1rem)]',
         className
       )}
     >
@@ -54,7 +56,14 @@ export function OverlaySidebar({ children, className }: OverlaySidebarProps) {
 
 export function OverlayMain({ children, className }: OverlayMainProps) {
   return (
-    <main className={cn('flex min-h-0 flex-1 flex-col overflow-hidden bg-transparent p-3', className)}>{children}</main>
+    <main
+      className={cn(
+        'flex min-h-0 flex-1 flex-col overflow-hidden bg-transparent px-3 pb-3 pt-[calc(var(--titlebar-height)+1rem)]',
+        className
+      )}
+    >
+      {children}
+    </main>
   )
 }
 
diff --git a/apps/desktop/src/app/overlays/overlay-view.tsx b/apps/desktop/src/app/overlays/overlay-view.tsx
index 8408be6b3f9..60fe4ec8a8c 100644
--- a/apps/desktop/src/app/overlays/overlay-view.tsx
+++ b/apps/desktop/src/app/overlays/overlay-view.tsx
@@ -71,16 +71,19 @@ export function OverlayView({
 
           <Button
             aria-label={closeLabel}
-            className="pointer-events-auto absolute right-3 top-[calc(0.1875rem+var(--titlebar-height)/2)] h-7 w-7 -translate-y-1/2 rounded-md text-(--ui-text-tertiary) hover:bg-(--chrome-action-hover) hover:text-foreground [-webkit-app-region:no-drag]"
+            className="pointer-events-auto absolute right-3 top-[calc(0.1875rem+var(--titlebar-height)/2)] -translate-y-1/2 text-(--ui-text-tertiary) hover:bg-(--chrome-action-hover) hover:text-foreground [-webkit-app-region:no-drag]"
             onClick={closeOverlay}
-            size="icon"
+            size="icon-titlebar"
             variant="ghost"
           >
             <Codicon name="close" size="1rem" />
           </Button>
         </div>
 
-        <div className={cn('min-h-0 flex flex-1 flex-col pt-(--titlebar-height)', contentClassName)}>{children}</div>
+        {/* No top padding here: the split-layout columns own their own
+            titlebar clearance so their backgrounds run flush to the card top
+            (otherwise the card surface shows as a gap above the sidebar). */}
+        <div className={cn('min-h-0 flex flex-1 flex-col', contentClassName)}>{children}</div>
       </div>
     </div>
   )
diff --git a/apps/desktop/src/app/settings/about-settings.tsx b/apps/desktop/src/app/settings/about-settings.tsx
index 991b860624b..319f97960d4 100644
--- a/apps/desktop/src/app/settings/about-settings.tsx
+++ b/apps/desktop/src/app/settings/about-settings.tsx
@@ -145,7 +145,7 @@ export function AboutSettings() {
 
             <Button
               asChild
-              className="ml-auto text-xs text-muted-foreground hover:text-foreground"
+              className="ml-auto text-muted-foreground hover:text-foreground"
               size="sm"
               variant="ghost"
             >
diff --git a/apps/desktop/src/app/settings/index.tsx b/apps/desktop/src/app/settings/index.tsx
index 9aa590c873c..21b45414a48 100644
--- a/apps/desktop/src/app/settings/index.tsx
+++ b/apps/desktop/src/app/settings/index.tsx
@@ -182,7 +182,7 @@ export function SettingsView({ gateway, onClose, onConfigSaved, onMainModelChang
           </div>
         </OverlaySidebar>
 
-        <OverlayMain className="p-0">
+        <OverlayMain className="px-0 pb-0 pt-[calc(var(--titlebar-height)+1rem)]">
           {activeView === 'config:appearance' ? (
             <AppearanceSettings />
           ) : activeView === 'about' ? (
diff --git a/apps/desktop/src/app/shell/gateway-menu-panel.tsx b/apps/desktop/src/app/shell/gateway-menu-panel.tsx
index fc5a0c218d0..1d45093eb79 100644
--- a/apps/desktop/src/app/shell/gateway-menu-panel.tsx
+++ b/apps/desktop/src/app/shell/gateway-menu-panel.tsx
@@ -78,7 +78,7 @@ export function GatewayMenuPanel({
         <div className="flex items-center">
           <Button
             aria-label="Open system panel"
-            className="size-7 text-muted-foreground hover:text-foreground"
+            className="text-muted-foreground hover:text-foreground"
             onClick={onOpenSystem}
             size="icon-sm"
             title="Open system panel"
diff --git a/apps/desktop/src/components/assistant-ui/tooltip-icon-button.tsx b/apps/desktop/src/components/assistant-ui/tooltip-icon-button.tsx
index 76bce0da291..07c676e99d4 100644
--- a/apps/desktop/src/components/assistant-ui/tooltip-icon-button.tsx
+++ b/apps/desktop/src/components/assistant-ui/tooltip-icon-button.tsx
@@ -14,11 +14,11 @@ export const TooltipIconButton = forwardRef<HTMLButtonElement, TooltipIconButton
   ({ children, tooltip, side: _side = 'bottom', className, ...rest }, ref) => {
     return (
       <Button
-        size="icon"
+        size="icon-xs"
         variant="ghost"
         {...rest}
         aria-label={tooltip}
-        className={cn('aui-button-icon size-6 p-1', className)}
+        className={cn('aui-button-icon', className)}
         ref={ref}
         title={tooltip}
       >
diff --git a/apps/desktop/src/components/ui/button.tsx b/apps/desktop/src/components/ui/button.tsx
index 21c04a3670a..f5ffa2f84de 100644
--- a/apps/desktop/src/components/ui/button.tsx
+++ b/apps/desktop/src/components/ui/button.tsx
@@ -8,7 +8,7 @@ import { cn } from '@/lib/utils'
 // fixed heights — so they stay snug and scale with content. Only icon buttons
 // (inherently square) carry the shared 4px radius.
 const buttonVariants = cva(
-  "inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-none text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "inline-flex shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-none text-[0.8125rem] leading-5 font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
   {
     variants: {
       variant: {
@@ -22,10 +22,10 @@ const buttonVariants = cva(
         link: 'text-primary underline-offset-4 decoration-current/20 hover:underline'
       },
       size: {
-        default: 'px-3.5 py-1.5 has-[>svg]:px-3',
-        xs: "gap-1 px-2 py-1 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
-        sm: 'gap-1.5 px-3 py-1 has-[>svg]:px-2.5',
-        lg: 'px-6 py-2.5 has-[>svg]:px-4',
+        default: 'px-3 py-1 has-[>svg]:px-2.5',
+        xs: "gap-1 px-2 py-0.5 text-[0.6875rem] leading-4 has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: 'px-2.5 py-0.5 has-[>svg]:px-2',
+        lg: 'px-5 py-2 text-sm leading-5 has-[>svg]:px-4',
         icon: 'size-9 rounded-[4px]',
         'icon-xs': "size-6 rounded-[4px] [&_svg:not([class*='size-'])]:size-3",
         'icon-sm': 'size-8 rounded-[4px]',
diff --git a/apps/desktop/src/components/ui/sidebar.tsx b/apps/desktop/src/components/ui/sidebar.tsx
index eba6fb8e489..7c555166a82 100644
--- a/apps/desktop/src/components/ui/sidebar.tsx
+++ b/apps/desktop/src/components/ui/sidebar.tsx
@@ -242,14 +242,14 @@ function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<t
 
   return (
     <Button
-      className={cn('size-7', className)}
+      className={className}
       data-sidebar="trigger"
       data-slot="sidebar-trigger"
       onClick={event => {
         onClick?.(event)
         toggleSidebar()
       }}
-      size="icon"
+      size="icon-sm"
       variant="ghost"
       {...props}
     >

From 1e1ab31ad6c8683ada89c9340f108909ecf17438 Mon Sep 17 00:00:00 2001
From: Brooklyn Nicholson <brooklyn.bb.nicholson@gmail.com>
Date: Wed, 3 Jun 2026 21:58:47 -0500
Subject: [PATCH 05/29] style(desktop): 12px button text, drop sparkle
 decoration + redundant settings titles
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Button base font down to 12px (text-xs) for the dense desktop scale.
- Remove the decorative Sparkles glyph from the model "Apply" button (keep the
  spinner while applying).
- Drop the page-level section titles that just restate the left nav ("Main
  model", "Appearance", "MCP servers") — the sidebar already labels the pane.
  Sub-section headings (Auxiliary models, LLM providers, etc.) stay.
---
 apps/desktop/src/app/settings/appearance-settings.tsx | 5 ++---
 apps/desktop/src/app/settings/mcp-settings.tsx        | 7 +++----
 apps/desktop/src/app/settings/model-settings.tsx      | 9 ++-------
 apps/desktop/src/components/ui/button.tsx             | 2 +-
 4 files changed, 8 insertions(+), 15 deletions(-)

diff --git a/apps/desktop/src/app/settings/appearance-settings.tsx b/apps/desktop/src/app/settings/appearance-settings.tsx
index c35ec3417e5..4abd79c8dc1 100644
--- a/apps/desktop/src/app/settings/appearance-settings.tsx
+++ b/apps/desktop/src/app/settings/appearance-settings.tsx
@@ -1,7 +1,7 @@
 import { useStore } from '@nanostores/react'
 
 import { triggerHaptic } from '@/lib/haptics'
-import { Check, Palette } from '@/lib/icons'
+import { Check } from '@/lib/icons'
 import { cn } from '@/lib/utils'
 import { $toolViewMode, setToolViewMode } from '@/store/tool-view'
 import { useTheme } from '@/themes/context'
@@ -9,7 +9,7 @@ import { BUILTIN_THEMES } from '@/themes/presets'
 
 import { MODE_OPTIONS } from './constants'
 import { prettyName } from './helpers'
-import { Pill, SectionHeading, SettingsContent } from './primitives'
+import { Pill, SettingsContent } from './primitives'
 
 function ThemePreview({ name }: { name: string }) {
   const t = BUILTIN_THEMES[name]
@@ -60,7 +60,6 @@ export function AppearanceSettings() {
     <SettingsContent>
       <div className="space-y-5">
         <div>
-          <SectionHeading icon={Palette} title="Appearance" />
           <p className="max-w-2xl text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
             These are desktop-only display preferences. Mode controls brightness; theme controls the accent palette and
             chat surface styling.
diff --git a/apps/desktop/src/app/settings/mcp-settings.tsx b/apps/desktop/src/app/settings/mcp-settings.tsx
index 794ea3c4695..32f9c5ea2d8 100644
--- a/apps/desktop/src/app/settings/mcp-settings.tsx
+++ b/apps/desktop/src/app/settings/mcp-settings.tsx
@@ -5,13 +5,13 @@ import { OverlayActionButton, OverlayCard } from '@/app/overlays/overlay-chrome'
 import { Input } from '@/components/ui/input'
 import { Textarea } from '@/components/ui/textarea'
 import { getHermesConfigRecord, type HermesGateway, saveHermesConfig } from '@/hermes'
-import { Package, Wrench } from '@/lib/icons'
+import { Wrench } from '@/lib/icons'
 import { notify, notifyError } from '@/store/notifications'
 import { $activeSessionId } from '@/store/session'
 import type { HermesConfigRecord } from '@/types/hermes'
 
 import { includesQuery } from './helpers'
-import { EmptyState, LoadingState, Pill, SectionHeading, SettingsContent } from './primitives'
+import { EmptyState, LoadingState, Pill, SettingsContent } from './primitives'
 import type { SearchProps } from './types'
 
 interface McpSettingsProps extends SearchProps {
@@ -188,8 +188,7 @@ export function McpSettings({ gateway, onConfigSaved, query }: McpSettingsProps)
 
   return (
     <SettingsContent>
-      <div className="mb-4 flex items-center justify-between gap-3">
-        <SectionHeading icon={Package} meta={`${names.length} configured`} title="MCP servers" />
+      <div className="mb-4 flex items-center justify-end gap-3">
         <div className="flex items-center gap-2">
           <OverlayActionButton onClick={() => setSelected(null)}>New server</OverlayActionButton>
           <OverlayActionButton disabled={reloading} onClick={() => void reloadMcp()}>
diff --git a/apps/desktop/src/app/settings/model-settings.tsx b/apps/desktop/src/app/settings/model-settings.tsx
index 4b27b59fd8f..40474749ca8 100644
--- a/apps/desktop/src/app/settings/model-settings.tsx
+++ b/apps/desktop/src/app/settings/model-settings.tsx
@@ -10,7 +10,7 @@ import {
 } from '@/components/ui/select'
 import { getAuxiliaryModels, getGlobalModelInfo, getGlobalModelOptions, setModelAssignment } from '@/hermes'
 import type { AuxiliaryModelsResponse, ModelOptionProvider } from '@/hermes'
-import { Cpu, Loader2, Sparkles } from '@/lib/icons'
+import { Cpu, Loader2 } from '@/lib/icons'
 import { cn } from '@/lib/utils'
 
 import { CONTROL_TEXT } from './constants'
@@ -204,11 +204,6 @@ export function ModelSettings({ onMainModelChanged }: ModelSettingsProps) {
   return (
     <div className="grid gap-6">
       <section>
-        <SectionHeading
-          icon={Sparkles}
-          meta={mainModel ? `${mainModel.provider} / ${mainModel.model}` : undefined}
-          title="Main model"
-        />
         <p className="mb-3 text-xs text-muted-foreground">
           Applies to new sessions. Use the model picker in the composer to hot-swap the active chat.
         </p>
@@ -238,7 +233,7 @@ export function ModelSettings({ onMainModelChanged }: ModelSettingsProps) {
             </SelectContent>
           </Select>
           <Button disabled={!selectedProvider || !selectedModel || applying} onClick={() => void applyMainModel()} size="sm">
-            {applying ? <Loader2 className="size-3.5 animate-spin" /> : <Sparkles className="size-3.5" />}
+            {applying && <Loader2 className="size-3.5 animate-spin" />}
             {applying ? 'Applying...' : 'Apply'}
           </Button>
         </div>
diff --git a/apps/desktop/src/components/ui/button.tsx b/apps/desktop/src/components/ui/button.tsx
index f5ffa2f84de..a44b6d95e31 100644
--- a/apps/desktop/src/components/ui/button.tsx
+++ b/apps/desktop/src/components/ui/button.tsx
@@ -8,7 +8,7 @@ import { cn } from '@/lib/utils'
 // fixed heights — so they stay snug and scale with content. Only icon buttons
 // (inherently square) carry the shared 4px radius.
 const buttonVariants = cva(
-  "inline-flex shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-none text-[0.8125rem] leading-5 font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
+  "inline-flex shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-none text-xs leading-4 font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
   {
     variants: {
       variant: {

From fb0250ef63c88c3696cd0bda5372d021e2757888 Mon Sep 17 00:00:00 2001
From: Brooklyn Nicholson <brooklyn.bb.nicholson@gmail.com>
Date: Wed, 3 Jun 2026 21:59:44 -0500
Subject: [PATCH 06/29] feat(desktop): add boxless `text` button variant; use
 for aux-model actions

New reusable `text` variant renders a button as inline label text (no
bg/border, muted -> foreground, underline-on-hover affordance). Emphasize the
actionable word by adding `font-semibold`/`underline` at the call site. Applied
to the auxiliary-model "Set to main" (plain), "Change" and "Reset all to main"
(bold + underlined) actions, replacing the boxed ghost/outline buttons.
---
 apps/desktop/src/app/settings/model-settings.tsx | 8 +++++---
 apps/desktop/src/components/ui/button.tsx        | 6 +++++-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/apps/desktop/src/app/settings/model-settings.tsx b/apps/desktop/src/app/settings/model-settings.tsx
index 40474749ca8..463add4b47a 100644
--- a/apps/desktop/src/app/settings/model-settings.tsx
+++ b/apps/desktop/src/app/settings/model-settings.tsx
@@ -244,10 +244,11 @@ export function ModelSettings({ onMainModelChanged }: ModelSettingsProps) {
         <div className="mb-2.5 flex items-center justify-between">
           <SectionHeading icon={Cpu} title="Auxiliary models" />
           <Button
+            className="font-semibold underline"
             disabled={!mainModel || applying}
             onClick={() => void resetAuxiliaryModels()}
             size="sm"
-            variant="outline"
+            variant="text"
           >
             Reset all to main
           </Button>
@@ -270,15 +271,16 @@ export function ModelSettings({ onMainModelChanged }: ModelSettingsProps) {
                         disabled={!mainModel || applying}
                         onClick={() => void setAuxiliaryToMain(meta.key)}
                         size="sm"
-                        variant="ghost"
+                        variant="text"
                       >
                         Set to main
                       </Button>
                       <Button
+                        className="font-semibold underline"
                         disabled={!providers.length || applying}
                         onClick={() => beginAuxiliaryEdit(meta.key)}
                         size="sm"
-                        variant="outline"
+                        variant="text"
                       >
                         Change
                       </Button>
diff --git a/apps/desktop/src/components/ui/button.tsx b/apps/desktop/src/components/ui/button.tsx
index a44b6d95e31..0fd1166cd60 100644
--- a/apps/desktop/src/components/ui/button.tsx
+++ b/apps/desktop/src/components/ui/button.tsx
@@ -19,7 +19,11 @@ const buttonVariants = cva(
           'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50',
         secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
-        link: 'text-primary underline-offset-4 decoration-current/20 hover:underline'
+        link: 'text-primary underline-offset-4 decoration-current/20 hover:underline',
+        // Boxless inline-text action (no bg/border). Reads as label text; add
+        // `font-semibold` and/or `underline` at the call site to emphasize the
+        // actionable word (e.g. a "Change" affordance next to muted copy).
+        text: 'text-muted-foreground underline-offset-4 hover:text-foreground hover:underline'
       },
       size: {
         default: 'px-3 py-1 has-[>svg]:px-2.5',

From d6e2c940e9d1d760c2a8d29a8f5dc6896f80096c Mon Sep 17 00:00:00 2001
From: Brooklyn Nicholson <brooklyn.bb.nicholson@gmail.com>
Date: Wed, 3 Jun 2026 22:00:39 -0500
Subject: [PATCH 07/29] style(desktop): nudge button scale up + 2.5px radius on
 non-icon buttons

Bump default/sm vertical padding a step (the 12px pass read too small) and give
non-icon buttons a subtle 2.5px radius instead of square corners. Icon buttons
keep their 4px.
---
 apps/desktop/src/components/ui/button.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/desktop/src/components/ui/button.tsx b/apps/desktop/src/components/ui/button.tsx
index 0fd1166cd60..117356741b2 100644
--- a/apps/desktop/src/components/ui/button.tsx
+++ b/apps/desktop/src/components/ui/button.tsx
@@ -8,7 +8,7 @@ import { cn } from '@/lib/utils'
 // fixed heights — so they stay snug and scale with content. Only icon buttons
 // (inherently square) carry the shared 4px radius.
 const buttonVariants = cva(
-  "inline-flex shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-none text-xs leading-4 font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
+  "inline-flex shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-[2.5px] text-xs leading-4 font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
   {
     variants: {
       variant: {
@@ -26,9 +26,9 @@ const buttonVariants = cva(
         text: 'text-muted-foreground underline-offset-4 hover:text-foreground hover:underline'
       },
       size: {
-        default: 'px-3 py-1 has-[>svg]:px-2.5',
+        default: 'px-3 py-1.5 has-[>svg]:px-2.5',
         xs: "gap-1 px-2 py-0.5 text-[0.6875rem] leading-4 has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
-        sm: 'px-2.5 py-0.5 has-[>svg]:px-2',
+        sm: 'px-2.5 py-1 has-[>svg]:px-2',
         lg: 'px-5 py-2 text-sm leading-5 has-[>svg]:px-4',
         icon: 'size-9 rounded-[4px]',
         'icon-xs': "size-6 rounded-[4px] [&_svg:not([class*='size-'])]:size-3",

From 0776d1b19cb37deb3727fb569b856785c67d0a90 Mon Sep 17 00:00:00 2001
From: Brooklyn Nicholson <brooklyn.bb.nicholson@gmail.com>
Date: Wed, 3 Jun 2026 22:03:46 -0500
Subject: [PATCH 08/29] style(desktop): unify Input/Textarea/SelectTrigger on
 shared controlVariants

Mirror the buttonVariants exercise for non-composer form controls: add a
single controlVariants source of truth (2.5px radius, 12px text,
padding-driven sizing, chrome via desktop-input-chrome) and consume it from
Input, Textarea, and SelectTrigger. Drop per-call radius/height/font
overrides that fought the shared look.
---
 apps/desktop/src/app/cron/index.tsx           |  4 ++--
 apps/desktop/src/app/messaging/index.tsx      |  2 +-
 .../src/app/overlays/overlay-search-input.tsx |  4 ++--
 .../src/app/settings/config-settings.tsx      |  6 ++---
 apps/desktop/src/app/settings/constants.ts    |  2 +-
 apps/desktop/src/components/ui/control.ts     | 24 +++++++++++++++++++
 apps/desktop/src/components/ui/input.tsx      | 12 ++++++++--
 apps/desktop/src/components/ui/select.tsx     | 13 +++++++---
 apps/desktop/src/components/ui/textarea.tsx   |  9 ++++---
 9 files changed, 57 insertions(+), 19 deletions(-)
 create mode 100644 apps/desktop/src/components/ui/control.ts

diff --git a/apps/desktop/src/app/cron/index.tsx b/apps/desktop/src/app/cron/index.tsx
index dbddcb01ab7..d195453e1d0 100644
--- a/apps/desktop/src/app/cron/index.tsx
+++ b/apps/desktop/src/app/cron/index.tsx
@@ -768,7 +768,7 @@ function CronEditorDialog({
           <div className="grid items-start gap-4 sm:grid-cols-2">
             <Field htmlFor="cron-frequency" label="Frequency">
               <Select onValueChange={handleSchedulePresetChange} value={schedulePreset}>
-                <SelectTrigger className="h-9 rounded-md" id="cron-frequency">
+                <SelectTrigger id="cron-frequency">
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
@@ -783,7 +783,7 @@ function CronEditorDialog({
 
             <Field htmlFor="cron-deliver" label="Deliver to">
               <Select onValueChange={setDeliver} value={deliver}>
-                <SelectTrigger className="h-9 rounded-md" id="cron-deliver">
+                <SelectTrigger id="cron-deliver">
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
diff --git a/apps/desktop/src/app/messaging/index.tsx b/apps/desktop/src/app/messaging/index.tsx
index a3fca713f2e..93bfda59cc2 100644
--- a/apps/desktop/src/app/messaging/index.tsx
+++ b/apps/desktop/src/app/messaging/index.tsx
@@ -651,7 +651,7 @@ function MessagingField({
       </div>
       <div className="flex items-center gap-2">
         <Input
-          className="h-9 rounded-lg font-mono text-sm"
+          className="font-mono"
           id={`messaging-field-${field.key}`}
           onChange={event => onEdit(field.key, event.target.value)}
           placeholder={field.is_set ? field.redacted_value || 'Replace current value' : copy.placeholder}
diff --git a/apps/desktop/src/app/overlays/overlay-search-input.tsx b/apps/desktop/src/app/overlays/overlay-search-input.tsx
index ab3603d4d44..5241c358d01 100644
--- a/apps/desktop/src/app/overlays/overlay-search-input.tsx
+++ b/apps/desktop/src/app/overlays/overlay-search-input.tsx
@@ -37,7 +37,7 @@ export function OverlaySearchInput({
       <Search className="pointer-events-none absolute left-3 top-1/2 z-1 size-3.5 -translate-y-1/2 text-muted-foreground/80" />
       <Input
         className={cn(
-          'relative z-0 h-8 rounded-lg py-2 pl-8 text-[length:var(--conversation-text-font-size)]',
+          'relative z-0 py-2 pl-8 text-[length:var(--conversation-text-font-size)]',
           hasTrailing || loading || value ? 'pr-16' : 'pr-8',
           inputClassName
         )}
@@ -71,7 +71,7 @@ export function PageSearchInput(props: OverlaySearchInputProps) {
     <OverlaySearchInput
       {...props}
       containerClassName={cn('mx-auto w-[min(36rem,calc(100%-2rem))] min-w-0', props.containerClassName)}
-      inputClassName={cn('h-8 rounded-lg py-2 pl-8', props.inputClassName)}
+      inputClassName={cn('py-2 pl-8', props.inputClassName)}
     />
   )
 }
diff --git a/apps/desktop/src/app/settings/config-settings.tsx b/apps/desktop/src/app/settings/config-settings.tsx
index 3969c2c09b5..957531e9be8 100644
--- a/apps/desktop/src/app/settings/config-settings.tsx
+++ b/apps/desktop/src/app/settings/config-settings.tsx
@@ -89,7 +89,7 @@ function ConfigField({
   if (schema.type === 'number') {
     return row(
       <Input
-        className={cn('h-8', CONTROL_TEXT)}
+        className={CONTROL_TEXT}
         onChange={e => {
           const raw = e.target.value
           const n = raw === '' ? 0 : Number(raw)
@@ -108,7 +108,7 @@ function ConfigField({
   if (schema.type === 'list') {
     return row(
       <Input
-        className={cn('h-8', CONTROL_TEXT)}
+        className={CONTROL_TEXT}
         onChange={e =>
           onChange(
             e.target.value
@@ -154,7 +154,7 @@ function ConfigField({
       />
     ) : (
       <Input
-        className={cn('h-8', CONTROL_TEXT)}
+        className={CONTROL_TEXT}
         onChange={e => onChange(e.target.value)}
         placeholder="Not set"
         value={String(value ?? '')}
diff --git a/apps/desktop/src/app/settings/constants.ts b/apps/desktop/src/app/settings/constants.ts
index 51f44dcc7b2..4738dad6520 100644
--- a/apps/desktop/src/app/settings/constants.ts
+++ b/apps/desktop/src/app/settings/constants.ts
@@ -22,7 +22,7 @@ interface ProviderPrefix {
 }
 
 export const EMPTY_SELECT_VALUE = '__hermes_empty__'
-export const CONTROL_TEXT = 'text-[0.8125rem]'
+export const CONTROL_TEXT = 'text-xs'
 
 export const PROVIDER_GROUPS: ProviderPrefix[] = [
   { prefix: 'NOUS_', name: 'Nous Portal', priority: 0 },
diff --git a/apps/desktop/src/components/ui/control.ts b/apps/desktop/src/components/ui/control.ts
new file mode 100644
index 00000000000..c4d2721090a
--- /dev/null
+++ b/apps/desktop/src/components/ui/control.ts
@@ -0,0 +1,24 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
+// Single source of truth for non-composer form-control chrome — Input,
+// Textarea, and SelectTrigger all consume this. Mirrors `buttonVariants`:
+// 2.5px radius, 12px text, padding-driven sizing (no fixed heights). The visual
+// chrome (background, border tint, hover, focus glow, invalid state) comes from
+// the `desktop-input-chrome` CSS so every control shares one exact look.
+export const controlVariants = cva(
+  'desktop-input-chrome w-full min-w-0 rounded-[2.5px] border text-xs leading-4 text-foreground outline-none placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+  {
+    variants: {
+      size: {
+        sm: 'px-2 py-1',
+        default: 'px-2.5 py-1.5',
+        lg: 'px-3 py-2 text-sm leading-5'
+      }
+    },
+    defaultVariants: {
+      size: 'default'
+    }
+  }
+)
+
+export type ControlVariantProps = VariantProps<typeof controlVariants>
diff --git a/apps/desktop/src/components/ui/input.tsx b/apps/desktop/src/components/ui/input.tsx
index ddb8de6b2cd..726b261876c 100644
--- a/apps/desktop/src/components/ui/input.tsx
+++ b/apps/desktop/src/components/ui/input.tsx
@@ -2,11 +2,19 @@ import * as React from 'react'
 
 import { cn } from '@/lib/utils'
 
-function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
+import { type ControlVariantProps, controlVariants } from './control'
+
+function Input({
+  className,
+  type,
+  size,
+  ...props
+}: Omit<React.ComponentProps<'input'>, 'size'> & ControlVariantProps) {
   return (
     <input
       className={cn(
-        'desktop-input-chrome h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        controlVariants({ size }),
+        'selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-xs file:font-medium file:text-foreground',
         className
       )}
       data-slot="input"
diff --git a/apps/desktop/src/components/ui/select.tsx b/apps/desktop/src/components/ui/select.tsx
index c207fc18bc4..eeee4cb7df5 100644
--- a/apps/desktop/src/components/ui/select.tsx
+++ b/apps/desktop/src/components/ui/select.tsx
@@ -2,17 +2,24 @@ import { Select as SelectPrimitive } from 'radix-ui'
 import * as React from 'react'
 
 import { Codicon } from '@/components/ui/codicon'
+import { type ControlVariantProps, controlVariants } from '@/components/ui/control'
 import { cn } from '@/lib/utils'
 
 function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>) {
   return <SelectPrimitive.Root data-slot="select" {...props} />
 }
 
-function SelectTrigger({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Trigger>) {
+function SelectTrigger({
+  className,
+  children,
+  size,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & ControlVariantProps) {
   return (
     <SelectPrimitive.Trigger
       className={cn(
-        'flex h-8 w-full items-center justify-between gap-2 rounded-lg border border-input bg-background px-3 py-2 text-sm whitespace-nowrap shadow-xs outline-none transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-placeholder:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0',
+        controlVariants({ size }),
+        'flex items-center justify-between gap-2 whitespace-nowrap data-placeholder:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0',
         className
       )}
       data-slot="select-trigger"
@@ -66,7 +73,7 @@ function SelectItem({ className, children, ...props }: React.ComponentProps<type
   return (
     <SelectPrimitive.Item
       className={cn(
-        'relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
+        'relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-xs outline-none select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
         className
       )}
       data-slot="select-item"
diff --git a/apps/desktop/src/components/ui/textarea.tsx b/apps/desktop/src/components/ui/textarea.tsx
index 3c2fa9d4374..e62f47088d5 100644
--- a/apps/desktop/src/components/ui/textarea.tsx
+++ b/apps/desktop/src/components/ui/textarea.tsx
@@ -2,13 +2,12 @@ import * as React from 'react'
 
 import { cn } from '@/lib/utils'
 
-function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
+import { type ControlVariantProps, controlVariants } from './control'
+
+function Textarea({ className, size, ...props }: React.ComponentProps<'textarea'> & ControlVariantProps) {
   return (
     <textarea
-      className={cn(
-        'desktop-input-chrome min-h-16 w-full rounded-md border px-3 py-2 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
-        className
-      )}
+      className={cn(controlVariants({ size }), 'min-h-16', className)}
       data-slot="textarea"
       {...props}
     />

From 75adf7d603b1b7eae7aee5c6610c0a789f7e0aa7 Mon Sep 17 00:00:00 2001
From: Brooklyn Nicholson <brooklyn.bb.nicholson@gmail.com>
Date: Wed, 3 Jun 2026 22:05:06 -0500
Subject: [PATCH 09/29] =?UTF-8?q?style(desktop):=20flatten=20appearance=20?=
 =?UTF-8?q?settings=20=E2=80=94=20drop=20card-in-card=20sections?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Remove the outer card chrome (border/bg/shadow/rounded) wrapping each
appearance section so they're flat headings + option grids instead of
boxes nested inside boxes, matching the other settings pages.
---
 .../src/app/settings/appearance-settings.tsx  | 75 ++++++++++---------
 1 file changed, 38 insertions(+), 37 deletions(-)

diff --git a/apps/desktop/src/app/settings/appearance-settings.tsx b/apps/desktop/src/app/settings/appearance-settings.tsx
index 4abd79c8dc1..8bf208b5ad9 100644
--- a/apps/desktop/src/app/settings/appearance-settings.tsx
+++ b/apps/desktop/src/app/settings/appearance-settings.tsx
@@ -1,4 +1,5 @@
 import { useStore } from '@nanostores/react'
+import type { ReactNode } from 'react'
 
 import { triggerHaptic } from '@/lib/haptics'
 import { Check } from '@/lib/icons'
@@ -51,6 +52,20 @@ function ThemePreview({ name }: { name: string }) {
   )
 }
 
+function SectionHead({ title, description, pill }: { title: string; description: string; pill?: ReactNode }) {
+  return (
+    <div className="flex items-center justify-between gap-3">
+      <div>
+        <div className="text-[length:var(--conversation-text-font-size)] font-medium">{title}</div>
+        <div className="mt-1 text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
+          {description}
+        </div>
+      </div>
+      {pill}
+    </div>
+  )
+}
+
 export function AppearanceSettings() {
   const { themeName, mode, availableThemes, setTheme, setMode } = useTheme()
   const toolViewMode = useStore($toolViewMode)
@@ -58,24 +73,18 @@ export function AppearanceSettings() {
 
   return (
     <SettingsContent>
-      <div className="space-y-5">
-        <div>
-          <p className="max-w-2xl text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
-            These are desktop-only display preferences. Mode controls brightness; theme controls the accent palette and
-            chat surface styling.
-          </p>
-        </div>
+      <div className="grid gap-8">
+        <p className="max-w-2xl text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
+          These are desktop-only display preferences. Mode controls brightness; theme controls the accent palette and
+          chat surface styling.
+        </p>
 
-        <section className="rounded-xl border border-(--ui-stroke-tertiary) bg-(--ui-chat-bubble-background) p-3 shadow-sm">
-          <div className="mb-3 flex items-center justify-between gap-3">
-            <div>
-              <div className="text-sm font-medium">Color Mode</div>
-              <div className="mt-1 text-xs text-muted-foreground">
-                Pick a fixed mode or let Hermes follow your system setting.
-              </div>
-            </div>
-            <Pill>{prettyName(mode)}</Pill>
-          </div>
+        <section className="grid gap-3">
+          <SectionHead
+            description="Pick a fixed mode or let Hermes follow your system setting."
+            pill={<Pill>{prettyName(mode)}</Pill>}
+            title="Color Mode"
+          />
           <div className="grid gap-2 sm:grid-cols-3">
             {MODE_OPTIONS.map(({ id, label, description, icon: Icon }) => {
               const active = mode === id
@@ -113,16 +122,12 @@ export function AppearanceSettings() {
           </div>
         </section>
 
-        <section className="rounded-xl border border-(--ui-stroke-tertiary) bg-(--ui-chat-bubble-background) p-3 shadow-sm">
-          <div className="mb-3 flex items-center justify-between gap-3">
-            <div>
-              <div className="text-sm font-medium">Tool Call Display</div>
-              <div className="mt-1 text-xs text-muted-foreground">
-                Product hides raw tool payloads; Technical shows full input/output.
-              </div>
-            </div>
-            <Pill>{toolViewMode === 'technical' ? 'Technical' : 'Product'}</Pill>
-          </div>
+        <section className="grid gap-3">
+          <SectionHead
+            description="Product hides raw tool payloads; Technical shows full input/output."
+            pill={<Pill>{toolViewMode === 'technical' ? 'Technical' : 'Product'}</Pill>}
+            title="Tool Call Display"
+          />
           <div className="grid gap-2 sm:grid-cols-2">
             {(
               [
@@ -170,16 +175,12 @@ export function AppearanceSettings() {
           </div>
         </section>
 
-        <section className="rounded-xl border border-(--ui-stroke-tertiary) bg-(--ui-chat-bubble-background) p-3 shadow-sm">
-          <div className="mb-3 flex items-center justify-between gap-3">
-            <div>
-              <div className="text-sm font-medium">Theme</div>
-              <div className="mt-1 text-xs text-muted-foreground">
-                Desktop palettes only. The selected mode is applied on top.
-              </div>
-            </div>
-            {activeTheme && <Pill>{activeTheme.label}</Pill>}
-          </div>
+        <section className="grid gap-3">
+          <SectionHead
+            description="Desktop palettes only. The selected mode is applied on top."
+            pill={activeTheme ? <Pill>{activeTheme.label}</Pill> : undefined}
+            title="Theme"
+          />
           <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
             {availableThemes.map(theme => {
               const active = themeName === theme.name

From 2b762c53640f42fc0c10c6ede94adad62fd5d17e Mon Sep 17 00:00:00 2001
From: Brooklyn Nicholson <brooklyn.bb.nicholson@gmail.com>
Date: Wed, 3 Jun 2026 22:06:23 -0500
Subject: [PATCH 10/29] style(desktop): de-box appearance options into flat
 rows + bare theme swatches
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Color Mode and Tool Call Display become flat radio-style rows (no tile
border/fill, no inner icon box, no filled check badge — just a subtle active
bg and a check). Theme drops its outer card wrapper so only the preview
swatch shows, with a primary ring marking the active palette.
---
 .../src/app/settings/appearance-settings.tsx  | 154 +++++++++---------
 1 file changed, 76 insertions(+), 78 deletions(-)

diff --git a/apps/desktop/src/app/settings/appearance-settings.tsx b/apps/desktop/src/app/settings/appearance-settings.tsx
index 8bf208b5ad9..86cbf718c73 100644
--- a/apps/desktop/src/app/settings/appearance-settings.tsx
+++ b/apps/desktop/src/app/settings/appearance-settings.tsx
@@ -2,7 +2,7 @@ import { useStore } from '@nanostores/react'
 import type { ReactNode } from 'react'
 
 import { triggerHaptic } from '@/lib/haptics'
-import { Check } from '@/lib/icons'
+import { Check, type IconComponent } from '@/lib/icons'
 import { cn } from '@/lib/utils'
 import { $toolViewMode, setToolViewMode } from '@/store/tool-view'
 import { useTheme } from '@/themes/context'
@@ -66,6 +66,40 @@ function SectionHead({ title, description, pill }: { title: string; description:
   )
 }
 
+function OptionRow({
+  icon: Icon,
+  label,
+  description,
+  active,
+  onClick
+}: {
+  icon?: IconComponent
+  label: string
+  description: string
+  active: boolean
+  onClick: () => void
+}) {
+  return (
+    <button
+      className={cn(
+        'group flex items-center gap-3 rounded-md px-3 py-2 text-left transition hover:bg-(--chrome-action-hover)',
+        active && 'bg-(--ui-bg-tertiary)'
+      )}
+      onClick={onClick}
+      type="button"
+    >
+      {Icon && <Icon className={cn('size-4 shrink-0', active ? 'text-foreground' : 'text-muted-foreground')} />}
+      <div className="min-w-0 flex-1">
+        <div className="text-[length:var(--conversation-text-font-size)] font-medium">{label}</div>
+        <div className="mt-0.5 text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
+          {description}
+        </div>
+      </div>
+      <Check className={cn('size-4 shrink-0 text-primary transition-opacity', active ? 'opacity-100' : 'opacity-0')} />
+    </button>
+  )
+}
+
 export function AppearanceSettings() {
   const { themeName, mode, availableThemes, setTheme, setMode } = useTheme()
   const toolViewMode = useStore($toolViewMode)
@@ -85,40 +119,20 @@ export function AppearanceSettings() {
             pill={<Pill>{prettyName(mode)}</Pill>}
             title="Color Mode"
           />
-          <div className="grid gap-2 sm:grid-cols-3">
-            {MODE_OPTIONS.map(({ id, label, description, icon: Icon }) => {
-              const active = mode === id
-
-              return (
-                <button
-                  className={cn(
-                    'group rounded-lg border border-(--ui-stroke-tertiary) bg-(--ui-bg-quinary) p-2.5 text-left transition hover:bg-(--chrome-action-hover)',
-                    active && 'border-(--ui-stroke-secondary) bg-(--ui-bg-tertiary)'
-                  )}
-                  key={id}
-                  onClick={() => {
-                    triggerHaptic('crisp')
-                    setMode(id)
-                  }}
-                  type="button"
-                >
-                  <div className="flex items-start justify-between gap-3">
-                    <span className="flex size-9 items-center justify-center rounded-lg bg-muted text-foreground transition group-hover:bg-background">
-                      <Icon className="size-4" />
-                    </span>
-                    {active && (
-                      <span className="grid size-5 place-items-center rounded-full bg-primary text-primary-foreground">
-                        <Check className="size-3.5" />
-                      </span>
-                    )}
-                  </div>
-                  <div className="mt-2 text-[length:var(--conversation-text-font-size)] font-medium">{label}</div>
-                  <div className="mt-1 text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
-                    {description}
-                  </div>
-                </button>
-              )
-            })}
+          <div className="grid gap-0.5">
+            {MODE_OPTIONS.map(({ id, label, description, icon }) => (
+              <OptionRow
+                active={mode === id}
+                description={description}
+                icon={icon}
+                key={id}
+                label={label}
+                onClick={() => {
+                  triggerHaptic('crisp')
+                  setMode(id)
+                }}
+              />
+            ))}
           </div>
         </section>
 
@@ -128,7 +142,7 @@ export function AppearanceSettings() {
             pill={<Pill>{toolViewMode === 'technical' ? 'Technical' : 'Product'}</Pill>}
             title="Tool Call Display"
           />
-          <div className="grid gap-2 sm:grid-cols-2">
+          <div className="grid gap-0.5">
             {(
               [
                 {
@@ -142,36 +156,18 @@ export function AppearanceSettings() {
                   description: 'Include raw tool args/results and low-level details.'
                 }
               ] as const
-            ).map(option => {
-              const active = toolViewMode === option.id
-
-              return (
-                <button
-                  className={cn(
-                    'group rounded-lg border border-(--ui-stroke-tertiary) bg-(--ui-bg-quinary) p-2.5 text-left transition hover:bg-(--chrome-action-hover)',
-                    active && 'border-(--ui-stroke-secondary) bg-(--ui-bg-tertiary)'
-                  )}
-                  key={option.id}
-                  onClick={() => {
-                    triggerHaptic('selection')
-                    setToolViewMode(option.id)
-                  }}
-                  type="button"
-                >
-                  <div className="flex items-start justify-between gap-3">
-                    <div className="text-[length:var(--conversation-text-font-size)] font-medium">{option.label}</div>
-                    {active && (
-                      <span className="grid size-5 place-items-center rounded-full bg-primary text-primary-foreground">
-                        <Check className="size-3.5" />
-                      </span>
-                    )}
-                  </div>
-                  <div className="mt-1 text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
-                    {option.description}
-                  </div>
-                </button>
-              )
-            })}
+            ).map(option => (
+              <OptionRow
+                active={toolViewMode === option.id}
+                description={option.description}
+                key={option.id}
+                label={option.label}
+                onClick={() => {
+                  triggerHaptic('selection')
+                  setToolViewMode(option.id)
+                }}
+              />
+            ))}
           </div>
         </section>
 
@@ -181,16 +177,13 @@ export function AppearanceSettings() {
             pill={activeTheme ? <Pill>{activeTheme.label}</Pill> : undefined}
             title="Theme"
           />
-          <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
+          <div className="grid gap-x-4 gap-y-5 sm:grid-cols-2 xl:grid-cols-3">
             {availableThemes.map(theme => {
               const active = themeName === theme.name
 
               return (
                 <button
-                  className={cn(
-                    'rounded-lg border border-(--ui-stroke-tertiary) bg-(--ui-bg-quinary) p-2 text-left transition hover:bg-(--chrome-action-hover)',
-                    active && 'border-(--ui-stroke-secondary) bg-(--ui-bg-tertiary)'
-                  )}
+                  className="group text-left"
                   key={theme.name}
                   onClick={() => {
                     triggerHaptic('crisp')
@@ -198,8 +191,17 @@ export function AppearanceSettings() {
                   }}
                   type="button"
                 >
-                  <ThemePreview name={theme.name} />
-                  <div className="mt-3 flex items-start justify-between gap-3 px-1">
+                  <div
+                    className={cn(
+                      'rounded-xl transition',
+                      active
+                        ? 'ring-2 ring-primary ring-offset-2 ring-offset-background'
+                        : 'opacity-90 group-hover:opacity-100'
+                    )}
+                  >
+                    <ThemePreview name={theme.name} />
+                  </div>
+                  <div className="mt-2.5 flex items-start justify-between gap-2 px-0.5">
                     <div className="min-w-0">
                       <div className="truncate text-[length:var(--conversation-text-font-size)] font-medium">
                         {theme.label}
@@ -208,11 +210,7 @@ export function AppearanceSettings() {
                         {theme.description}
                       </div>
                     </div>
-                    {active && (
-                      <span className="mt-0.5 grid size-5 shrink-0 place-items-center rounded-full bg-primary text-primary-foreground">
-                        <Check className="size-3.5" />
-                      </span>
-                    )}
+                    {active && <Check className="mt-0.5 size-4 shrink-0 text-primary" />}
                   </div>
                 </button>
               )

From f15d2cb5e42468bc48dca9c88e62c4b201bb6224 Mon Sep 17 00:00:00 2001
From: Brooklyn Nicholson <brooklyn.bb.nicholson@gmail.com>
Date: Wed, 3 Jun 2026 22:14:25 -0500
Subject: [PATCH 11/29] style(desktop): primitive-level pointer cursor +
 borderless settings lists

Add a base-layer rule giving every interactive control (button, select,
menu item, switch, tab, summary) cursor:pointer, and strip the now-redundant
hardcoded cursor-pointer from those elements (plain clickable divs/labels
keep theirs). Remove the divide-y separators from settings list sections so
they breathe.
---
 apps/desktop/src/app/artifacts/index.tsx      |  3 +--
 .../src/app/chat/composer/context-menu.tsx    |  2 +-
 .../app/chat/right-rail/preview-console.tsx   |  2 +-
 .../src/app/chat/right-rail/preview-pane.tsx  |  4 ++--
 apps/desktop/src/app/chat/sidebar/index.tsx   | 16 ++++++++--------
 .../src/app/chat/sidebar/session-row.tsx      |  2 +-
 apps/desktop/src/app/cron/index.tsx           |  2 +-
 .../src/app/settings/config-settings.tsx      |  2 +-
 .../src/app/settings/gateway-settings.tsx     |  4 ++--
 .../src/app/settings/model-settings.tsx       |  4 ++--
 .../src/app/settings/sessions-settings.tsx    |  2 +-
 .../src/app/shell/model-edit-submenu.tsx      | 11 +++++------
 .../src/app/shell/model-menu-panel.tsx        |  4 ++--
 .../src/app/shell/statusbar-controls.tsx      |  6 +++---
 apps/desktop/src/app/skills/index.tsx         |  2 +-
 .../components/assistant-ui/clarify-tool.tsx  |  6 +++---
 .../src/components/assistant-ui/thread.tsx    | 10 +++++-----
 .../components/assistant-ui/tool-fallback.tsx |  2 +-
 .../src/components/chat/disclosure-row.tsx    |  2 +-
 .../components/model-visibility-dialog.tsx    |  1 -
 apps/desktop/src/components/notifications.tsx |  2 +-
 apps/desktop/src/styles.css                   | 19 +++++++++++++++++++
 22 files changed, 62 insertions(+), 46 deletions(-)

diff --git a/apps/desktop/src/app/artifacts/index.tsx b/apps/desktop/src/app/artifacts/index.tsx
index f53366cb520..bed86e7fff6 100644
--- a/apps/desktop/src/app/artifacts/index.tsx
+++ b/apps/desktop/src/app/artifacts/index.tsx
@@ -742,8 +742,7 @@ function ArtifactCellAction({
   return (
     <button
       className={cn(
-        'flex h-full w-full min-w-0 items-center gap-2 px-2.5 py-1.5 text-left text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) font-normal text-(--ui-text-secondary) no-underline underline-offset-4 decoration-current/20 transition-colors hover:text-foreground hover:underline',
-        'cursor-pointer'
+        'flex h-full w-full min-w-0 items-center gap-2 px-2.5 py-1.5 text-left text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) font-normal text-(--ui-text-secondary) no-underline underline-offset-4 decoration-current/20 transition-colors hover:text-foreground hover:underline'
       )}
       onClick={onClick}
       title={title}
diff --git a/apps/desktop/src/app/chat/composer/context-menu.tsx b/apps/desktop/src/app/chat/composer/context-menu.tsx
index 300ddf92597..b7ebef7d84e 100644
--- a/apps/desktop/src/app/chat/composer/context-menu.tsx
+++ b/apps/desktop/src/app/chat/composer/context-menu.tsx
@@ -137,7 +137,7 @@ function PromptSnippetsDialog({
           {snippets.map(snippet => (
             <li key={snippet.label}>
               <button
-                className="group/snippet flex w-full cursor-pointer items-start gap-2.5 rounded-md border border-transparent px-2.5 py-2 text-left transition-colors hover:border-(--ui-stroke-tertiary) hover:bg-(--ui-control-hover-background) focus-visible:border-(--ui-stroke-tertiary) focus-visible:bg-(--ui-control-hover-background) focus-visible:outline-none"
+                className="group/snippet flex w-full items-start gap-2.5 rounded-md border border-transparent px-2.5 py-2 text-left transition-colors hover:border-(--ui-stroke-tertiary) hover:bg-(--ui-control-hover-background) focus-visible:border-(--ui-stroke-tertiary) focus-visible:bg-(--ui-control-hover-background) focus-visible:outline-none"
                 onClick={() => {
                   onInsertText(snippet.text)
                   onOpenChange(false)
diff --git a/apps/desktop/src/app/chat/right-rail/preview-console.tsx b/apps/desktop/src/app/chat/right-rail/preview-console.tsx
index 3617f59a1ed..93b867a28c7 100644
--- a/apps/desktop/src/app/chat/right-rail/preview-console.tsx
+++ b/apps/desktop/src/app/chat/right-rail/preview-console.tsx
@@ -82,7 +82,7 @@ function ConsoleRow({ copyText, log, onSend, onToggleSelect, selected }: Console
     >
       <button
         className={cn(
-          'mt-0.5 cursor-pointer text-left uppercase opacity-70 transition-colors hover:opacity-100',
+          'mt-0.5 text-left uppercase opacity-70 transition-colors hover:opacity-100',
           consoleLevelClass[log.level] ?? consoleLevelClass[0]
         )}
         onClick={onToggleSelect}
diff --git a/apps/desktop/src/app/chat/right-rail/preview-pane.tsx b/apps/desktop/src/app/chat/right-rail/preview-pane.tsx
index 7cd405aa94f..4788344dd74 100644
--- a/apps/desktop/src/app/chat/right-rail/preview-pane.tsx
+++ b/apps/desktop/src/app/chat/right-rail/preview-pane.tsx
@@ -83,7 +83,7 @@ function PreviewLoadError({
       body={
         <>
           <a
-            className="pointer-events-auto block cursor-pointer font-mono text-muted-foreground/90 underline decoration-current/20 underline-offset-4 transition-colors hover:text-foreground"
+            className="pointer-events-auto block font-mono text-muted-foreground/90 underline decoration-current/20 underline-offset-4 transition-colors hover:text-foreground"
             href={error.url}
             onClick={event => {
               event.preventDefault()
@@ -608,7 +608,7 @@ export function PreviewPane({
           <div className="pointer-events-none flex min-h-(--titlebar-height) items-center gap-1.5 border-b border-border/60 bg-background px-2 py-1">
             <div className="min-w-0 flex-1">
               <a
-                className="pointer-events-auto inline max-w-full cursor-pointer truncate text-left text-xs font-medium text-foreground underline-offset-4 decoration-current/20 transition-colors hover:text-primary hover:underline"
+                className="pointer-events-auto inline max-w-full truncate text-left text-xs font-medium text-foreground underline-offset-4 decoration-current/20 transition-colors hover:text-primary hover:underline"
                 href={currentUrl}
                 rel="noreferrer"
                 target="_blank"
diff --git a/apps/desktop/src/app/chat/sidebar/index.tsx b/apps/desktop/src/app/chat/sidebar/index.tsx
index 35171ce668f..2bffdd8d24f 100644
--- a/apps/desktop/src/app/chat/sidebar/index.tsx
+++ b/apps/desktop/src/app/chat/sidebar/index.tsx
@@ -430,7 +430,7 @@ export function ChatSidebar({
                     <SidebarMenuButton
                       aria-disabled={!isInteractive}
                       className={cn(
-                        'flex h-7 w-full cursor-pointer justify-start gap-2 rounded-md border border-transparent px-2 text-left text-[0.8125rem] font-medium text-(--ui-text-secondary) transition-colors duration-100 ease-out hover:bg-(--ui-control-hover-background) hover:text-foreground hover:transition-none',
+                        'flex h-7 w-full justify-start gap-2 rounded-md border border-transparent px-2 text-left text-[0.8125rem] font-medium text-(--ui-text-secondary) transition-colors duration-100 ease-out hover:bg-(--ui-control-hover-background) hover:text-foreground hover:transition-none',
                         active &&
                           'border-(--ui-stroke-tertiary) bg-(--ui-control-active-background) text-foreground shadow-none hover:border-(--ui-stroke-tertiary)!',
                         !isInteractive &&
@@ -472,7 +472,7 @@ export function ChatSidebar({
               {searchQuery && (
                 <button
                   aria-label="Clear search"
-                  className="grid size-4 shrink-0 cursor-pointer place-items-center rounded-sm text-(--ui-text-tertiary) hover:bg-(--ui-control-active-background) hover:text-foreground"
+                  className="grid size-4 shrink-0 place-items-center rounded-sm text-(--ui-text-tertiary) hover:bg-(--ui-control-active-background) hover:text-foreground"
                   onClick={() => setSearchQuery('')}
                   type="button"
                 >
@@ -554,7 +554,7 @@ export function ChatSidebar({
                 <Button
                   aria-label={agentsGrouped ? 'Show sessions as a single list' : 'Group sessions by workspace'}
                   className={cn(
-                    'cursor-pointer text-(--ui-text-tertiary) opacity-70 hover:bg-(--ui-control-hover-background) hover:text-foreground hover:opacity-100 focus-visible:opacity-100',
+                    'text-(--ui-text-tertiary) opacity-70 hover:bg-(--ui-control-hover-background) hover:text-foreground hover:opacity-100 focus-visible:opacity-100',
                     agentsGrouped && 'bg-(--ui-control-active-background) text-foreground opacity-100'
                   )}
                   onClick={event => {
@@ -604,7 +604,7 @@ function SidebarSectionHeader({ label, open, onToggle, action, meta }: SidebarSe
   return (
     <div className="group/section flex shrink-0 items-center justify-between pb-1 pt-1.5">
       <button
-        className="group/section-label flex w-fit cursor-pointer items-center gap-1 bg-transparent text-left leading-none"
+        className="group/section-label flex w-fit items-center gap-1 bg-transparent text-left leading-none"
         onClick={onToggle}
         type="button"
       >
@@ -848,7 +848,7 @@ function SidebarWorkspaceGroup({
     <div className={cn('grid gap-px', dragging && 'z-10 opacity-60', className)} ref={ref} style={style} {...rest}>
       <div className="group/workspace flex min-h-6 items-center gap-1 px-2 pt-1 text-[0.6875rem] font-medium text-(--ui-text-tertiary)">
         <button
-          className="flex min-w-0 cursor-pointer items-center gap-1 bg-transparent text-left hover:text-(--ui-text-secondary)"
+          className="flex min-w-0 items-center gap-1 bg-transparent text-left hover:text-(--ui-text-secondary)"
           onClick={() => setOpen(value => !value)}
           title={group.path ?? undefined}
           type="button"
@@ -863,7 +863,7 @@ function SidebarWorkspaceGroup({
         {onNewSession && (
           <button
             aria-label={`New session in ${group.label}`}
-            className="grid size-4 shrink-0 cursor-pointer place-items-center rounded-sm bg-transparent text-(--ui-text-quaternary) opacity-0 transition-opacity hover:bg-(--ui-control-hover-background) hover:text-foreground group-hover/workspace:opacity-100"
+            className="grid size-4 shrink-0 place-items-center rounded-sm bg-transparent text-(--ui-text-quaternary) opacity-0 transition-opacity hover:bg-(--ui-control-hover-background) hover:text-foreground group-hover/workspace:opacity-100"
             onClick={() => onNewSession(group.path)}
             title={`New session in ${group.label}`}
             type="button"
@@ -895,7 +895,7 @@ function SidebarWorkspaceGroup({
           {hiddenCount > 0 && (
             <button
               aria-label={`Show ${nextCount} more in ${group.label}`}
-              className="ml-auto grid size-5 cursor-pointer place-items-center rounded-sm bg-transparent text-(--ui-text-tertiary) transition-colors hover:bg-(--ui-control-hover-background) hover:text-foreground"
+              className="ml-auto grid size-5 place-items-center rounded-sm bg-transparent text-(--ui-text-tertiary) transition-colors hover:bg-(--ui-control-hover-background) hover:text-foreground"
               onClick={() => setVisibleCount(count => count + WORKSPACE_PAGE)}
               title={`Show ${nextCount} more in ${group.label}`}
               type="button"
@@ -949,7 +949,7 @@ function SidebarLoadMoreRow({ loading, onClick, step }: SidebarLoadMoreRowProps)
 
   return (
     <button
-      className="flex min-h-5 cursor-pointer items-center gap-1 self-start bg-transparent pl-2 text-left text-[0.6875rem] text-(--ui-text-tertiary) transition-colors duration-100 ease-out hover:text-foreground hover:transition-none disabled:cursor-default disabled:opacity-60 disabled:hover:text-(--ui-text-tertiary)"
+      className="flex min-h-5 items-center gap-1 self-start bg-transparent pl-2 text-left text-[0.6875rem] text-(--ui-text-tertiary) transition-colors duration-100 ease-out hover:text-foreground hover:transition-none disabled:cursor-default disabled:opacity-60 disabled:hover:text-(--ui-text-tertiary)"
       disabled={loading}
       onClick={onClick}
       type="button"
diff --git a/apps/desktop/src/app/chat/sidebar/session-row.tsx b/apps/desktop/src/app/chat/sidebar/session-row.tsx
index 20e14c35b0c..1b4fe660496 100644
--- a/apps/desktop/src/app/chat/sidebar/session-row.tsx
+++ b/apps/desktop/src/app/chat/sidebar/session-row.tsx
@@ -92,7 +92,7 @@ export function SidebarSessionRow({
       >
         {isWorking && !needsInput && <span aria-hidden="true" className="arc-border" />}
         <button
-          className="z-0 flex min-w-0 cursor-pointer items-center gap-1.5 bg-transparent py-0.5 pl-2 pr-1 text-left group-hover:pr-12"
+          className="z-0 flex min-w-0 items-center gap-1.5 bg-transparent py-0.5 pl-2 pr-1 text-left group-hover:pr-12"
           onClick={event => {
             if (event.shiftKey) {
               event.preventDefault()
diff --git a/apps/desktop/src/app/cron/index.tsx b/apps/desktop/src/app/cron/index.tsx
index d195453e1d0..43c27277178 100644
--- a/apps/desktop/src/app/cron/index.tsx
+++ b/apps/desktop/src/app/cron/index.tsx
@@ -547,7 +547,7 @@ function CronJobRow({
   return (
     <div className="grid gap-3 px-3 py-2.5 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-start">
       <button
-        className="min-w-0 cursor-pointer rounded-md text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"
+        className="min-w-0 rounded-md text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"
         onClick={onEdit}
         type="button"
       >
diff --git a/apps/desktop/src/app/settings/config-settings.tsx b/apps/desktop/src/app/settings/config-settings.tsx
index 957531e9be8..8b8f5d79208 100644
--- a/apps/desktop/src/app/settings/config-settings.tsx
+++ b/apps/desktop/src/app/settings/config-settings.tsx
@@ -338,7 +338,7 @@ export function ConfigSettings({
       {fields.length === 0 ? (
         <EmptyState description="Try a different search term or choose another section." title="No matching settings" />
       ) : (
-        <div className="divide-y divide-border/40">
+        <div className="grid gap-1">
           {fields.map(([key, field]) => (
             <ConfigField
               enumOptions={
diff --git a/apps/desktop/src/app/settings/gateway-settings.tsx b/apps/desktop/src/app/settings/gateway-settings.tsx
index 81649a1621f..f7a16ee2f6b 100644
--- a/apps/desktop/src/app/settings/gateway-settings.tsx
+++ b/apps/desktop/src/app/settings/gateway-settings.tsx
@@ -237,7 +237,7 @@ export function GatewaySettings() {
         />
       </div>
 
-      <div className="mt-5 divide-y divide-border/40">
+      <div className="mt-5 grid gap-1">
         <ListRow
           action={
             <Input
@@ -290,7 +290,7 @@ export function GatewaySettings() {
         </Button>
       </div>
 
-      <div className="mt-6 divide-y divide-border/40">
+      <div className="mt-6 grid gap-1">
         <ListRow
           action={
             <Button onClick={() => void window.hermesDesktop?.revealLogs()} variant="outline">
diff --git a/apps/desktop/src/app/settings/model-settings.tsx b/apps/desktop/src/app/settings/model-settings.tsx
index 463add4b47a..435467002da 100644
--- a/apps/desktop/src/app/settings/model-settings.tsx
+++ b/apps/desktop/src/app/settings/model-settings.tsx
@@ -256,7 +256,7 @@ export function ModelSettings({ onMainModelChanged }: ModelSettingsProps) {
         <p className="mb-2 text-xs text-muted-foreground">
           Helper tasks run on the main model by default. Assign a dedicated model to any task to override.
         </p>
-        <div className="divide-y divide-border/40">
+        <div className="grid gap-1">
           {AUX_TASKS.map(meta => {
             const current = auxiliary?.tasks.find(entry => entry.task === meta.key)
             const isAuto = !current || !current.provider || current.provider === 'auto'
@@ -289,7 +289,7 @@ export function ModelSettings({ onMainModelChanged }: ModelSettingsProps) {
                 }
                 below={
                   isEditing && (
-                    <div className="mt-2 flex flex-wrap items-center gap-2 border-t border-border/40 pt-2">
+                    <div className="mt-2 flex flex-wrap items-center gap-2 pt-1">
                       <Select
                         onValueChange={value => setAuxDraft(prev => ({ ...prev, provider: value, model: '' }))}
                         value={auxDraft.provider}
diff --git a/apps/desktop/src/app/settings/sessions-settings.tsx b/apps/desktop/src/app/settings/sessions-settings.tsx
index b56af902040..89e4bc5c86b 100644
--- a/apps/desktop/src/app/settings/sessions-settings.tsx
+++ b/apps/desktop/src/app/settings/sessions-settings.tsx
@@ -123,7 +123,7 @@ export function SessionsSettings({ query }: SearchProps) {
           title="Nothing archived"
         />
       ) : (
-        <div className="divide-y divide-border/30">
+        <div className="grid gap-1">
           {filtered.map(session => {
             const label = workspaceLabel(session.cwd)
             const busy = busyId === session.id
diff --git a/apps/desktop/src/app/shell/model-edit-submenu.tsx b/apps/desktop/src/app/shell/model-edit-submenu.tsx
index 8328f7ddfc6..d2fb9279fea 100644
--- a/apps/desktop/src/app/shell/model-edit-submenu.tsx
+++ b/apps/desktop/src/app/shell/model-edit-submenu.tsx
@@ -11,7 +11,6 @@ import {
   DropdownMenuSubContent
 } from '@/components/ui/dropdown-menu'
 import { Switch } from '@/components/ui/switch'
-import { cn } from '@/lib/utils'
 import { notifyError } from '@/store/notifications'
 import {
   $activeSessionId,
@@ -184,24 +183,24 @@ export function ModelEditSubmenu({
           <DropdownMenuLabel className={dropdownMenuSectionLabel}>Options</DropdownMenuLabel>
           {reasoning ? (
             <DropdownMenuItem
-              className={cn(dropdownMenuRow, 'cursor-pointer')}
+              className={dropdownMenuRow}
               onSelect={event => event.preventDefault()}
             >
               Thinking
               <Switch
                 checked={thinkingOn}
-                className="ml-auto cursor-pointer"
+                className="ml-auto"
                 onCheckedChange={checked => void patchReasoning(checked ? effort || 'medium' : 'none', currentReasoningEffort)}
               />
             </DropdownMenuItem>
           ) : null}
           {hasFast ? (
             <DropdownMenuItem
-              className={cn(dropdownMenuRow, 'cursor-pointer')}
+              className={dropdownMenuRow}
               onSelect={event => event.preventDefault()}
             >
               Fast
-              <Switch checked={fastOn} className="ml-auto cursor-pointer" onCheckedChange={toggleFast} />
+              <Switch checked={fastOn} className="ml-auto" onCheckedChange={toggleFast} />
             </DropdownMenuItem>
           ) : null}
           {reasoning ? (
@@ -214,7 +213,7 @@ export function ModelEditSubmenu({
               >
                 {EFFORT_OPTIONS.map(option => (
                   <DropdownMenuRadioItem
-                    className={cn(dropdownMenuRow, 'cursor-pointer')}
+                    className={dropdownMenuRow}
                     key={option.value}
                     onSelect={event => event.preventDefault()}
                     value={option.value}
diff --git a/apps/desktop/src/app/shell/model-menu-panel.tsx b/apps/desktop/src/app/shell/model-menu-panel.tsx
index 97338a94618..be3b26f148a 100644
--- a/apps/desktop/src/app/shell/model-menu-panel.tsx
+++ b/apps/desktop/src/app/shell/model-menu-panel.tsx
@@ -178,7 +178,7 @@ export function ModelMenuPanel({ gateway, onSelectModel, requestGateway }: Model
                 return (
                   <DropdownMenuSub key={`${group.provider.slug}:${family.id}`}>
                     <DropdownMenuSubTrigger
-                      className={cn(dropdownMenuRow, 'cursor-pointer')}
+                      className={dropdownMenuRow}
                       hideChevron
                       onClick={activate}
                       onKeyDown={event => {
@@ -212,7 +212,7 @@ export function ModelMenuPanel({ gateway, onSelectModel, requestGateway }: Model
       <DropdownMenuSeparator className="mx-0" />
 
       <DropdownMenuItem
-        className={cn(dropdownMenuRow, 'cursor-pointer text-(--ui-text-tertiary)')}
+        className={cn(dropdownMenuRow, 'text-(--ui-text-tertiary)')}
         onSelect={() => setModelVisibilityOpen(true)}
       >
         Edit Models…
diff --git a/apps/desktop/src/app/shell/statusbar-controls.tsx b/apps/desktop/src/app/shell/statusbar-controls.tsx
index ced40816753..43487fae7b9 100644
--- a/apps/desktop/src/app/shell/statusbar-controls.tsx
+++ b/apps/desktop/src/app/shell/statusbar-controls.tsx
@@ -94,7 +94,7 @@ function StatusbarItemView({ item, navigate }: { item: StatusbarItem; navigate:
         <DropdownMenuTrigger asChild>
           <button
             className={cn(
-              'inline-flex h-full cursor-pointer items-center gap-1 rounded-none px-1.5 text-[0.6875rem] text-(--ui-text-tertiary) transition-colors hover:bg-(--chrome-action-hover) hover:text-foreground disabled:cursor-default disabled:opacity-45',
+              'inline-flex h-full items-center gap-1 rounded-none px-1.5 text-[0.6875rem] text-(--ui-text-tertiary) transition-colors hover:bg-(--chrome-action-hover) hover:text-foreground disabled:cursor-default disabled:opacity-45',
               item.className
             )}
             disabled={item.disabled}
@@ -168,7 +168,7 @@ function StatusbarItemView({ item, navigate }: { item: StatusbarItem; navigate:
     return (
       <a
         className={cn(
-          'inline-flex h-full cursor-pointer items-center gap-1 rounded-none px-1.5 text-[0.6875rem] text-(--ui-text-tertiary) transition-colors hover:bg-(--chrome-action-hover) hover:text-foreground disabled:cursor-default disabled:opacity-45',
+          'inline-flex h-full items-center gap-1 rounded-none px-1.5 text-[0.6875rem] text-(--ui-text-tertiary) transition-colors hover:bg-(--chrome-action-hover) hover:text-foreground disabled:cursor-default disabled:opacity-45',
           item.className
         )}
         href={item.href}
@@ -184,7 +184,7 @@ function StatusbarItemView({ item, navigate }: { item: StatusbarItem; navigate:
   return (
     <button
       className={cn(
-        'inline-flex h-full cursor-pointer items-center gap-1 rounded-none px-1.5 text-[0.6875rem] text-(--ui-text-tertiary) transition-colors hover:bg-(--chrome-action-hover) hover:text-foreground disabled:cursor-default disabled:opacity-45',
+        'inline-flex h-full items-center gap-1 rounded-none px-1.5 text-[0.6875rem] text-(--ui-text-tertiary) transition-colors hover:bg-(--chrome-action-hover) hover:text-foreground disabled:cursor-default disabled:opacity-45',
         item.className
       )}
       disabled={item.disabled}
diff --git a/apps/desktop/src/app/skills/index.tsx b/apps/desktop/src/app/skills/index.tsx
index ace615c28a4..da307610835 100644
--- a/apps/desktop/src/app/skills/index.tsx
+++ b/apps/desktop/src/app/skills/index.tsx
@@ -287,7 +287,7 @@ export function SkillsView({ setStatusbarItemGroup: _setStatusbarItemGroup, ...p
                           <button
                             aria-expanded={expanded}
                             aria-label={`Configure ${label}`}
-                            className="cursor-pointer rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+                            className="rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                             onClick={() => setExpandedToolset(current => (current === toolset.name ? null : toolset.name))}
                             type="button"
                           >
diff --git a/apps/desktop/src/components/assistant-ui/clarify-tool.tsx b/apps/desktop/src/components/assistant-ui/clarify-tool.tsx
index 74ebb639b3b..337ae457705 100644
--- a/apps/desktop/src/components/assistant-ui/clarify-tool.tsx
+++ b/apps/desktop/src/components/assistant-ui/clarify-tool.tsx
@@ -164,7 +164,7 @@ function ClarifyToolPending({ args }: ToolCallMessagePartProps) {
           {choices.map((choice, index) => (
             <button
               className={cn(
-                'flex w-full cursor-pointer items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-sm text-foreground/95',
+                'flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-sm text-foreground/95',
                 'transition-colors hover:bg-accent/60 disabled:cursor-not-allowed disabled:opacity-55',
                 selectedChoice === choice && 'bg-accent/60'
               )}
@@ -192,7 +192,7 @@ function ClarifyToolPending({ args }: ToolCallMessagePartProps) {
           ))}
           <button
             className={cn(
-              'flex w-full cursor-pointer items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-sm text-muted-foreground',
+              'flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-sm text-muted-foreground',
               'transition-colors hover:bg-accent/40 hover:text-foreground'
             )}
             disabled={submitting}
@@ -256,7 +256,7 @@ function ClarifyToolPending({ args }: ToolCallMessagePartProps) {
       {!typing && hasChoices && (
         <div className="flex justify-end">
           <button
-            className="cursor-pointer bg-transparent text-[0.6875rem] text-muted-foreground/70 underline-offset-4 hover:text-foreground hover:underline disabled:cursor-not-allowed disabled:opacity-50"
+            className="bg-transparent text-[0.6875rem] text-muted-foreground/70 underline-offset-4 hover:text-foreground hover:underline disabled:cursor-not-allowed disabled:opacity-50"
             disabled={!ready || submitting}
             onClick={() => void respond('')}
             type="button"
diff --git a/apps/desktop/src/components/assistant-ui/thread.tsx b/apps/desktop/src/components/assistant-ui/thread.tsx
index 7cd4a88bb4a..9dbe6b0fc6b 100644
--- a/apps/desktop/src/components/assistant-ui/thread.tsx
+++ b/apps/desktop/src/components/assistant-ui/thread.tsx
@@ -616,13 +616,13 @@ const AssistantFooter: FC<MessageActionProps> = props => (
       className="inline-flex h-6 items-center gap-1 text-xs text-muted-foreground"
       hideWhenSingleBranch
     >
-      <BranchPickerPrimitive.Previous className="grid size-6 cursor-pointer place-items-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:cursor-default disabled:opacity-35">
+      <BranchPickerPrimitive.Previous className="grid size-6 place-items-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:cursor-default disabled:opacity-35">
         <Codicon name="chevron-left" size="0.875rem" />
       </BranchPickerPrimitive.Previous>
       <span className="tabular-nums">
         <BranchPickerPrimitive.Number /> / <BranchPickerPrimitive.Count />
       </span>
-      <BranchPickerPrimitive.Next className="grid size-6 cursor-pointer place-items-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:cursor-default disabled:opacity-35">
+      <BranchPickerPrimitive.Next className="grid size-6 place-items-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:cursor-default disabled:opacity-35">
         <Codicon name="chevron-right" size="0.875rem" />
       </BranchPickerPrimitive.Next>
     </BranchPickerPrimitive.Root>
@@ -660,7 +660,7 @@ const USER_BUBBLE_BASE_CLASS =
   'composer-human-message standalone-glass relative flex w-full min-w-0 max-w-full flex-col gap-1.5 overflow-hidden rounded-xl border bg-(--dt-user-bubble) px-3 py-2 text-left shadow-composer'
 
 const USER_ACTION_ICON_BUTTON_CLASS =
-  'grid cursor-pointer place-items-center rounded-md bg-transparent text-(--ui-text-secondary) transition-colors hover:bg-(--ui-control-active-background) hover:text-foreground disabled:cursor-default disabled:text-(--ui-text-quaternary) disabled:opacity-70'
+  'grid place-items-center rounded-md bg-transparent text-(--ui-text-secondary) transition-colors hover:bg-(--ui-control-active-background) hover:text-foreground disabled:cursor-default disabled:text-(--ui-text-quaternary) disabled:opacity-70'
 
 const USER_ACTION_ICON_SIZE = '0.6875rem'
 const StopGlyph = <IconPlayerStopFilled aria-hidden className="size-3.5 -translate-y-px" />
@@ -803,7 +803,7 @@ const UserMessage: FC<{
             >
               <span aria-hidden className="checkpoint-icon size-1.5 rounded-full border border-current" />
               <BranchPickerPrimitive.Previous
-                className="checkpoint-restore-text cursor-pointer rounded-sm bg-transparent px-1 opacity-65 hover:opacity-100 disabled:hidden disabled:cursor-default"
+                className="checkpoint-restore-text rounded-sm bg-transparent px-1 opacity-65 hover:opacity-100 disabled:hidden disabled:cursor-default"
                 title="Restore previous checkpoint"
               >
                 Restore checkpoint
@@ -812,7 +812,7 @@ const UserMessage: FC<{
                 <BranchPickerPrimitive.Number />/<BranchPickerPrimitive.Count />
               </span>
               <BranchPickerPrimitive.Next
-                className="checkpoint-restore-text cursor-pointer rounded-sm bg-transparent px-1 opacity-65 hover:opacity-100 disabled:hidden disabled:cursor-default"
+                className="checkpoint-restore-text rounded-sm bg-transparent px-1 opacity-65 hover:opacity-100 disabled:hidden disabled:cursor-default"
                 title="Restore next checkpoint"
               >
                 Go forward
diff --git a/apps/desktop/src/components/assistant-ui/tool-fallback.tsx b/apps/desktop/src/components/assistant-ui/tool-fallback.tsx
index 32498bca471..4835e125c0f 100644
--- a/apps/desktop/src/components/assistant-ui/tool-fallback.tsx
+++ b/apps/desktop/src/components/assistant-ui/tool-fallback.tsx
@@ -389,7 +389,7 @@ function ToolEntry({ part }: ToolEntryProps) {
             ))}
           {showRawSearchDrilldown && (
             <details className="max-w-full">
-              <summary className={cn(TOOL_SECTION_LABEL_CLASS, 'cursor-pointer mb-0')}>Raw response</summary>
+              <summary className={cn(TOOL_SECTION_LABEL_CLASS, 'mb-0')}>Raw response</summary>
               <pre className={cn(TOOL_SECTION_PRE_CLASS, 'mt-1 whitespace-pre-wrap wrap-anywhere')}>
                 {view.rawResult}
               </pre>
diff --git a/apps/desktop/src/components/chat/disclosure-row.tsx b/apps/desktop/src/components/chat/disclosure-row.tsx
index b528e10c601..75fab9a0732 100644
--- a/apps/desktop/src/components/chat/disclosure-row.tsx
+++ b/apps/desktop/src/components/chat/disclosure-row.tsx
@@ -34,7 +34,7 @@ export function DisclosureRow({
           // background fill, just the cursor + the affordance caret.
           'flex min-w-0 max-w-fit items-start gap-1.5 text-left transition-colors',
           onToggle
-            ? 'cursor-pointer hover:text-foreground focus-visible:text-foreground focus-visible:outline-none'
+            ? 'hover:text-foreground focus-visible:text-foreground focus-visible:outline-none'
             : 'cursor-default'
         )}
         disabled={!onToggle}
diff --git a/apps/desktop/src/components/model-visibility-dialog.tsx b/apps/desktop/src/components/model-visibility-dialog.tsx
index b0322684264..00acfe316c9 100644
--- a/apps/desktop/src/components/model-visibility-dialog.tsx
+++ b/apps/desktop/src/components/model-visibility-dialog.tsx
@@ -118,7 +118,6 @@ export function ModelVisibilityDialog({ gw, onOpenChange, onOpenProviders, open,
                         </span>
                         <Switch
                           checked={visible.has(key)}
-                          className="cursor-pointer"
                           onCheckedChange={() => toggle(provider, family.id)}
                         />
                       </label>
diff --git a/apps/desktop/src/components/notifications.tsx b/apps/desktop/src/components/notifications.tsx
index af1d9a96e12..506e91e6719 100644
--- a/apps/desktop/src/components/notifications.tsx
+++ b/apps/desktop/src/components/notifications.tsx
@@ -132,7 +132,7 @@ function NotificationItem({ notification }: { notification: AppNotification }) {
 function NotificationDetail({ detail }: { detail: string }) {
   return (
     <details className="mt-2 text-xs text-muted-foreground">
-      <summary className="cursor-pointer select-none font-medium text-muted-foreground hover:text-foreground">
+      <summary className="select-none font-medium text-muted-foreground hover:text-foreground">
         Details
       </summary>
       <div className="mt-1 rounded-md border border-border/70 bg-background/65 p-2">
diff --git a/apps/desktop/src/styles.css b/apps/desktop/src/styles.css
index cca4855cbdd..d4fdb64a9e3 100644
--- a/apps/desktop/src/styles.css
+++ b/apps/desktop/src/styles.css
@@ -425,6 +425,25 @@
   display: none;
 }
 
+/* Primitive-level pointer cursor for every interactive control (buttons,
+   selects, menu items, switches, tabs, summaries). Keeps individual
+   components from having to hardcode `cursor-pointer`; explicit cursor
+   utilities (cursor-grab, cursor-default, disabled:cursor-*) still win since
+   they live in the utilities layer. */
+@layer base {
+  button:not(:disabled):not([aria-disabled='true']),
+  summary,
+  [role='button']:not([aria-disabled='true']),
+  [role='menuitem']:not([aria-disabled='true']),
+  [role='menuitemradio']:not([aria-disabled='true']),
+  [role='menuitemcheckbox']:not([aria-disabled='true']),
+  [role='option']:not([aria-disabled='true']),
+  [role='switch']:not([aria-disabled='true']),
+  [role='tab']:not([aria-disabled='true']) {
+    cursor: pointer;
+  }
+}
+
 @layer utilities {
   [class*='rounded-full'],
   [class*=':rounded-full'] {

From 41ede963041fb1650828a6d1c55ada7a66f7eef3 Mon Sep 17 00:00:00 2001
From: Brooklyn Nicholson <brooklyn.bb.nicholson@gmail.com>
Date: Wed, 3 Jun 2026 22:15:27 -0500
Subject: [PATCH 12/29] style(desktop): Color Mode + Tool Call Display as
 one-row segmented controls

Replace the vertical option-row lists with a compact SegmentedControl
(grouped pill buttons on a single track), dropping the per-option
descriptions since the section subtitle already covers the context.
---
 .../src/app/settings/appearance-settings.tsx  | 117 ++++++++----------
 1 file changed, 49 insertions(+), 68 deletions(-)

diff --git a/apps/desktop/src/app/settings/appearance-settings.tsx b/apps/desktop/src/app/settings/appearance-settings.tsx
index 86cbf718c73..d60b1194577 100644
--- a/apps/desktop/src/app/settings/appearance-settings.tsx
+++ b/apps/desktop/src/app/settings/appearance-settings.tsx
@@ -66,37 +66,39 @@ function SectionHead({ title, description, pill }: { title: string; description:
   )
 }
 
-function OptionRow({
-  icon: Icon,
-  label,
-  description,
-  active,
-  onClick
+function SegmentedControl<T extends string>({
+  options,
+  value,
+  onChange
 }: {
-  icon?: IconComponent
-  label: string
-  description: string
-  active: boolean
-  onClick: () => void
+  options: readonly { id: T; label: string; icon?: IconComponent }[]
+  value: T
+  onChange: (id: T) => void
 }) {
   return (
-    <button
-      className={cn(
-        'group flex items-center gap-3 rounded-md px-3 py-2 text-left transition hover:bg-(--chrome-action-hover)',
-        active && 'bg-(--ui-bg-tertiary)'
-      )}
-      onClick={onClick}
-      type="button"
-    >
-      {Icon && <Icon className={cn('size-4 shrink-0', active ? 'text-foreground' : 'text-muted-foreground')} />}
-      <div className="min-w-0 flex-1">
-        <div className="text-[length:var(--conversation-text-font-size)] font-medium">{label}</div>
-        <div className="mt-0.5 text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
-          {description}
-        </div>
-      </div>
-      <Check className={cn('size-4 shrink-0 text-primary transition-opacity', active ? 'opacity-100' : 'opacity-0')} />
-    </button>
+    <div className="inline-grid w-fit auto-cols-fr grid-flow-col gap-0.5 rounded-md bg-(--ui-bg-tertiary) p-0.5">
+      {options.map(({ id, label, icon: Icon }) => {
+        const active = value === id
+
+        return (
+          <button
+            aria-pressed={active}
+            className={cn(
+              'flex items-center justify-center gap-1.5 rounded-[3px] px-3.5 py-1.5 text-xs font-medium transition-colors',
+              active
+                ? 'bg-background text-foreground shadow-sm'
+                : 'text-muted-foreground hover:text-foreground'
+            )}
+            key={id}
+            onClick={() => onChange(id)}
+            type="button"
+          >
+            {Icon && <Icon className="size-3.5" />}
+            {label}
+          </button>
+        )
+      })}
+    </div>
   )
 }
 
@@ -119,21 +121,14 @@ export function AppearanceSettings() {
             pill={<Pill>{prettyName(mode)}</Pill>}
             title="Color Mode"
           />
-          <div className="grid gap-0.5">
-            {MODE_OPTIONS.map(({ id, label, description, icon }) => (
-              <OptionRow
-                active={mode === id}
-                description={description}
-                icon={icon}
-                key={id}
-                label={label}
-                onClick={() => {
-                  triggerHaptic('crisp')
-                  setMode(id)
-                }}
-              />
-            ))}
-          </div>
+          <SegmentedControl
+            onChange={id => {
+              triggerHaptic('crisp')
+              setMode(id)
+            }}
+            options={MODE_OPTIONS}
+            value={mode}
+          />
         </section>
 
         <section className="grid gap-3">
@@ -142,33 +137,19 @@ export function AppearanceSettings() {
             pill={<Pill>{toolViewMode === 'technical' ? 'Technical' : 'Product'}</Pill>}
             title="Tool Call Display"
           />
-          <div className="grid gap-0.5">
-            {(
+          <SegmentedControl
+            onChange={id => {
+              triggerHaptic('selection')
+              setToolViewMode(id)
+            }}
+            options={
               [
-                {
-                  id: 'product',
-                  label: 'Product',
-                  description: 'Human-friendly tool activity with concise summaries.'
-                },
-                {
-                  id: 'technical',
-                  label: 'Technical',
-                  description: 'Include raw tool args/results and low-level details.'
-                }
+                { id: 'product', label: 'Product' },
+                { id: 'technical', label: 'Technical' }
               ] as const
-            ).map(option => (
-              <OptionRow
-                active={toolViewMode === option.id}
-                description={option.description}
-                key={option.id}
-                label={option.label}
-                onClick={() => {
-                  triggerHaptic('selection')
-                  setToolViewMode(option.id)
-                }}
-              />
-            ))}
-          </div>
+            }
+            value={toolViewMode}
+          />
         </section>
 
         <section className="grid gap-3">

From 947f305f84c56b30ff30739462cca2059ce79458 Mon Sep 17 00:00:00 2001
From: Brooklyn Nicholson <brooklyn.bb.nicholson@gmail.com>
Date: Wed, 3 Jun 2026 22:15:55 -0500
Subject: [PATCH 13/29] style(desktop): drop redundant On/Off label next to
 boolean config switches

The switch already communicates state, so the text label was noise.
---
 apps/desktop/src/app/settings/config-settings.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/apps/desktop/src/app/settings/config-settings.tsx b/apps/desktop/src/app/settings/config-settings.tsx
index 8b8f5d79208..34f129bfbd9 100644
--- a/apps/desktop/src/app/settings/config-settings.tsx
+++ b/apps/desktop/src/app/settings/config-settings.tsx
@@ -53,8 +53,7 @@ function ConfigField({
 
   if (schema.type === 'boolean') {
     return row(
-      <div className="flex items-center justify-end gap-3">
-        <span className="text-xs text-muted-foreground">{value ? 'On' : 'Off'}</span>
+      <div className="flex items-center justify-end">
         <Switch checked={Boolean(value)} onCheckedChange={onChange} />
       </div>
     )

From 75e29f97ee3919e6269542a5b6d0b3306816b10e Mon Sep 17 00:00:00 2001
From: Brooklyn Nicholson <brooklyn.bb.nicholson@gmail.com>
Date: Wed, 3 Jun 2026 22:17:26 -0500
Subject: [PATCH 14/29] style(desktop): add Switch xs size; move appearance
 controls inline-right

Add an xs size variant to the Switch primitive and use it for the provider
edit submenu toggles. In appearance settings, drop the redundant selection
Pills (the UI already shows the active choice), move the Color Mode and Tool
Call Display segmented controls into the section header's right side
(responsive: stacks under the heading on narrow widths), and shrink the
segmented control.
---
 .../src/app/settings/appearance-settings.tsx  | 76 +++++++++----------
 .../src/app/shell/model-edit-submenu.tsx      |  3 +-
 apps/desktop/src/components/ui/switch.tsx     | 53 +++++++++----
 3 files changed, 76 insertions(+), 56 deletions(-)

diff --git a/apps/desktop/src/app/settings/appearance-settings.tsx b/apps/desktop/src/app/settings/appearance-settings.tsx
index d60b1194577..b249f0dff7a 100644
--- a/apps/desktop/src/app/settings/appearance-settings.tsx
+++ b/apps/desktop/src/app/settings/appearance-settings.tsx
@@ -9,8 +9,7 @@ import { useTheme } from '@/themes/context'
 import { BUILTIN_THEMES } from '@/themes/presets'
 
 import { MODE_OPTIONS } from './constants'
-import { prettyName } from './helpers'
-import { Pill, SettingsContent } from './primitives'
+import { SettingsContent } from './primitives'
 
 function ThemePreview({ name }: { name: string }) {
   const t = BUILTIN_THEMES[name]
@@ -52,16 +51,16 @@ function ThemePreview({ name }: { name: string }) {
   )
 }
 
-function SectionHead({ title, description, pill }: { title: string; description: string; pill?: ReactNode }) {
+function SectionHead({ title, description, control }: { title: string; description: string; control?: ReactNode }) {
   return (
-    <div className="flex items-center justify-between gap-3">
-      <div>
+    <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
+      <div className="min-w-0">
         <div className="text-[length:var(--conversation-text-font-size)] font-medium">{title}</div>
         <div className="mt-1 text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
           {description}
         </div>
       </div>
-      {pill}
+      {control && <div className="shrink-0">{control}</div>}
     </div>
   )
 }
@@ -76,7 +75,7 @@ function SegmentedControl<T extends string>({
   onChange: (id: T) => void
 }) {
   return (
-    <div className="inline-grid w-fit auto-cols-fr grid-flow-col gap-0.5 rounded-md bg-(--ui-bg-tertiary) p-0.5">
+    <div className="inline-grid w-fit auto-cols-fr grid-flow-col gap-0.5 rounded-[5px] bg-(--ui-bg-tertiary) p-0.5">
       {options.map(({ id, label, icon: Icon }) => {
         const active = value === id
 
@@ -84,7 +83,7 @@ function SegmentedControl<T extends string>({
           <button
             aria-pressed={active}
             className={cn(
-              'flex items-center justify-center gap-1.5 rounded-[3px] px-3.5 py-1.5 text-xs font-medium transition-colors',
+              'flex items-center justify-center gap-1 rounded-[3px] px-2.5 py-0.5 text-[0.6875rem] font-medium transition-colors',
               active
                 ? 'bg-background text-foreground shadow-sm'
                 : 'text-muted-foreground hover:text-foreground'
@@ -93,7 +92,7 @@ function SegmentedControl<T extends string>({
             onClick={() => onChange(id)}
             type="button"
           >
-            {Icon && <Icon className="size-3.5" />}
+            {Icon && <Icon className="size-3" />}
             {label}
           </button>
         )
@@ -105,7 +104,6 @@ function SegmentedControl<T extends string>({
 export function AppearanceSettings() {
   const { themeName, mode, availableThemes, setTheme, setMode } = useTheme()
   const toolViewMode = useStore($toolViewMode)
-  const activeTheme = availableThemes.find(t => t.name === themeName)
 
   return (
     <SettingsContent>
@@ -115,49 +113,47 @@ export function AppearanceSettings() {
           chat surface styling.
         </p>
 
-        <section className="grid gap-3">
+        <section>
           <SectionHead
+            control={
+              <SegmentedControl
+                onChange={id => {
+                  triggerHaptic('crisp')
+                  setMode(id)
+                }}
+                options={MODE_OPTIONS}
+                value={mode}
+              />
+            }
             description="Pick a fixed mode or let Hermes follow your system setting."
-            pill={<Pill>{prettyName(mode)}</Pill>}
             title="Color Mode"
           />
-          <SegmentedControl
-            onChange={id => {
-              triggerHaptic('crisp')
-              setMode(id)
-            }}
-            options={MODE_OPTIONS}
-            value={mode}
-          />
         </section>
 
-        <section className="grid gap-3">
+        <section>
           <SectionHead
+            control={
+              <SegmentedControl
+                onChange={id => {
+                  triggerHaptic('selection')
+                  setToolViewMode(id)
+                }}
+                options={
+                  [
+                    { id: 'product', label: 'Product' },
+                    { id: 'technical', label: 'Technical' }
+                  ] as const
+                }
+                value={toolViewMode}
+              />
+            }
             description="Product hides raw tool payloads; Technical shows full input/output."
-            pill={<Pill>{toolViewMode === 'technical' ? 'Technical' : 'Product'}</Pill>}
             title="Tool Call Display"
           />
-          <SegmentedControl
-            onChange={id => {
-              triggerHaptic('selection')
-              setToolViewMode(id)
-            }}
-            options={
-              [
-                { id: 'product', label: 'Product' },
-                { id: 'technical', label: 'Technical' }
-              ] as const
-            }
-            value={toolViewMode}
-          />
         </section>
 
         <section className="grid gap-3">
-          <SectionHead
-            description="Desktop palettes only. The selected mode is applied on top."
-            pill={activeTheme ? <Pill>{activeTheme.label}</Pill> : undefined}
-            title="Theme"
-          />
+          <SectionHead description="Desktop palettes only. The selected mode is applied on top." title="Theme" />
           <div className="grid gap-x-4 gap-y-5 sm:grid-cols-2 xl:grid-cols-3">
             {availableThemes.map(theme => {
               const active = themeName === theme.name
diff --git a/apps/desktop/src/app/shell/model-edit-submenu.tsx b/apps/desktop/src/app/shell/model-edit-submenu.tsx
index d2fb9279fea..1ccaa20396c 100644
--- a/apps/desktop/src/app/shell/model-edit-submenu.tsx
+++ b/apps/desktop/src/app/shell/model-edit-submenu.tsx
@@ -191,6 +191,7 @@ export function ModelEditSubmenu({
                 checked={thinkingOn}
                 className="ml-auto"
                 onCheckedChange={checked => void patchReasoning(checked ? effort || 'medium' : 'none', currentReasoningEffort)}
+                size="xs"
               />
             </DropdownMenuItem>
           ) : null}
@@ -200,7 +201,7 @@ export function ModelEditSubmenu({
               onSelect={event => event.preventDefault()}
             >
               Fast
-              <Switch checked={fastOn} className="ml-auto" onCheckedChange={toggleFast} />
+              <Switch checked={fastOn} className="ml-auto" onCheckedChange={toggleFast} size="xs" />
             </DropdownMenuItem>
           ) : null}
           {reasoning ? (
diff --git a/apps/desktop/src/components/ui/switch.tsx b/apps/desktop/src/components/ui/switch.tsx
index 237f696b9ab..96bbe345d82 100644
--- a/apps/desktop/src/components/ui/switch.tsx
+++ b/apps/desktop/src/components/ui/switch.tsx
@@ -1,24 +1,47 @@
+import { cva, type VariantProps } from 'class-variance-authority'
 import { Switch as SwitchPrimitive } from 'radix-ui'
 import * as React from 'react'
 
 import { cn } from '@/lib/utils'
 
-function Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+const switchVariants = cva(
+  'peer inline-flex shrink-0 items-center rounded-full border border-[color-mix(in_srgb,var(--dt-foreground)_18%,transparent)] bg-[color-mix(in_srgb,var(--dt-background)_58%,var(--dt-input))] shadow-[inset_0_0_0_0.0625rem_color-mix(in_srgb,var(--dt-foreground)_8%,transparent)] transition-colors outline-none focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-transparent data-[state=checked]:bg-primary',
+  {
+    variants: {
+      size: {
+        default: 'h-5 w-9',
+        xs: 'h-4 w-7'
+      }
+    },
+    defaultVariants: {
+      size: 'default'
+    }
+  }
+)
+
+const switchThumbVariants = cva(
+  'pointer-events-none block rounded-full bg-foreground shadow-[0_0.0625rem_0.1875rem_color-mix(in_srgb,var(--dt-background)_50%,transparent)] ring-0 transition-transform data-[state=unchecked]:translate-x-0 data-[state=checked]:bg-background',
+  {
+    variants: {
+      size: {
+        default: 'size-4 data-[state=checked]:translate-x-4',
+        xs: 'size-3 data-[state=checked]:translate-x-3.5'
+      }
+    },
+    defaultVariants: {
+      size: 'default'
+    }
+  }
+)
+
+function Switch({
+  className,
+  size,
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root> & VariantProps<typeof switchVariants>) {
   return (
-    <SwitchPrimitive.Root
-      className={cn(
-        'peer inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-[color-mix(in_srgb,var(--dt-foreground)_18%,transparent)] bg-[color-mix(in_srgb,var(--dt-background)_58%,var(--dt-input))] shadow-[inset_0_0_0_0.0625rem_color-mix(in_srgb,var(--dt-foreground)_8%,transparent)] transition-colors outline-none focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-transparent data-[state=checked]:bg-primary',
-        className
-      )}
-      data-slot="switch"
-      {...props}
-    >
-      <SwitchPrimitive.Thumb
-        className={cn(
-          'pointer-events-none block size-4 rounded-full bg-foreground shadow-[0_0.0625rem_0.1875rem_color-mix(in_srgb,var(--dt-background)_50%,transparent)] ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=checked]:bg-background data-[state=unchecked]:translate-x-0'
-        )}
-        data-slot="switch-thumb"
-      />
+    <SwitchPrimitive.Root className={cn(switchVariants({ size }), className)} data-slot="switch" {...props}>
+      <SwitchPrimitive.Thumb className={cn(switchThumbVariants({ size }))} data-slot="switch-thumb" />
     </SwitchPrimitive.Root>
   )
 }

From e68fc4def2baaa38e49b04c5646bee35167bc21d Mon Sep 17 00:00:00 2001
From: Brooklyn Nicholson <brooklyn.bb.nicholson@gmail.com>
Date: Wed, 3 Jun 2026 22:30:47 -0500
Subject: [PATCH 15/29] feat(desktop): titlebar toggle to flip sidebar sides
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds a top-left swap button (replacing the search icon) that mirrors the
layout: sessions sidebar ↔ file browser + preview rail. Persisted via
$panesFlipped. The left/right sidebar toggles, content inset, and pane
borders all follow the active side so the buttons stay accurate after a flip.
---
 apps/desktop/src/app/chat/sidebar/index.tsx   |   5 +-
 apps/desktop/src/app/desktop-controller.tsx   | 102 ++++++++++++------
 apps/desktop/src/app/right-sidebar/index.tsx  |   9 +-
 apps/desktop/src/app/shell/app-shell.tsx      |  20 ++--
 .../src/app/shell/titlebar-controls.tsx       |  54 ++++++----
 apps/desktop/src/store/layout.ts              |   9 ++
 6 files changed, 131 insertions(+), 68 deletions(-)

diff --git a/apps/desktop/src/app/chat/sidebar/index.tsx b/apps/desktop/src/app/chat/sidebar/index.tsx
index 2bffdd8d24f..bee1feb6b44 100644
--- a/apps/desktop/src/app/chat/sidebar/index.tsx
+++ b/apps/desktop/src/app/chat/sidebar/index.tsx
@@ -36,6 +36,7 @@ import { Skeleton } from '@/components/ui/skeleton'
 import { searchSessions, type SessionInfo, type SessionSearchResult } from '@/hermes'
 import { cn } from '@/lib/utils'
 import {
+  $panesFlipped,
   $pinnedSessionIds,
   $sidebarAgentsGrouped,
   $sidebarOpen,
@@ -214,6 +215,7 @@ export function ChatSidebar({
   onNewSessionInWorkspace
 }: ChatSidebarProps) {
   const sidebarOpen = useStore($sidebarOpen)
+  const panesFlipped = useStore($panesFlipped)
   const agentsGrouped = useStore($sidebarAgentsGrouped)
   const pinnedSessionIds = useStore($pinnedSessionIds)
   const pinsOpen = useStore($sidebarPinsOpen)
@@ -406,7 +408,8 @@ export function ChatSidebar({
   return (
     <Sidebar
       className={cn(
-        'relative h-full min-w-0 overflow-hidden border-r border-t-0 border-b-0 border-l-0 text-foreground transition-none',
+        'relative h-full min-w-0 overflow-hidden border-t-0 border-b-0 text-foreground transition-none',
+        panesFlipped ? 'border-l border-r-0' : 'border-r border-l-0',
         sidebarOpen
           ? 'border-(--sidebar-edge-border) bg-(--ui-sidebar-surface-background) opacity-100'
           : 'pointer-events-none border-transparent bg-transparent opacity-0'
diff --git a/apps/desktop/src/app/desktop-controller.tsx b/apps/desktop/src/app/desktop-controller.tsx
index 52c07c822d8..1647abda365 100644
--- a/apps/desktop/src/app/desktop-controller.tsx
+++ b/apps/desktop/src/app/desktop-controller.tsx
@@ -13,7 +13,9 @@ import { useSkinCommand } from '@/themes/use-skin-command'
 import { formatRefValue } from '../components/assistant-ui/directive-text'
 import { getSessionMessages, listSessions } from '../hermes'
 import { preserveLocalAssistantErrors, toChatMessages } from '../lib/chat-messages'
+import { toggleCommandPalette } from '../store/command-palette'
 import {
+  $panesFlipped,
   $pinnedSessionIds,
   $sessionsLimit,
   bumpSessionsLimit,
@@ -58,6 +60,7 @@ import {
   PREVIEW_RAIL_PANE_WIDTH
 } from './chat/right-rail'
 import { ChatSidebar } from './chat/sidebar'
+import { CommandPalette } from './command-palette'
 import { useGatewayBoot } from './gateway/hooks/use-gateway-boot'
 import { useGatewayRequest } from './gateway/hooks/use-gateway-request'
 import { ModelPickerOverlay } from './model-picker-overlay'
@@ -112,6 +115,7 @@ export function DesktopController() {
   const previewTarget = useStore($previewTarget)
   const selectedStoredSessionId = useStore($selectedStoredSessionId)
   const terminalTakeover = useStore($terminalTakeover)
+  const panesFlipped = useStore($panesFlipped)
 
   const routedSessionId = routeSessionId(location.pathname)
   const routeToken = `${location.pathname}:${location.search}:${location.hash}`
@@ -195,6 +199,21 @@ export function DesktopController() {
     }
   }, [])
 
+  // Global command palette: Cmd/Ctrl+K from anywhere. Plain Cmd+K is reserved
+  // for the palette; the composer's "drain next queued" moved to Cmd+Shift+K.
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      if ((event.metaKey || event.ctrlKey) && !event.altKey && !event.shiftKey && event.key.toLowerCase() === 'k') {
+        event.preventDefault()
+        toggleCommandPalette()
+      }
+    }
+
+    window.addEventListener('keydown', onKeyDown)
+
+    return () => window.removeEventListener('keydown', onKeyDown)
+  }, [])
+
   const refreshSessions = useCallback(async () => {
     const requestId = refreshSessionsRequestRef.current + 1
     refreshSessionsRequestRef.current = requestId
@@ -564,6 +583,7 @@ export function DesktopController() {
       <UpdatesOverlay />
       <GatewayConnectingOverlay />
       <BootFailureOverlay />
+      <CommandPalette />
 
       {settingsOpen && (
         <Suspense fallback={null}>
@@ -641,12 +661,52 @@ export function DesktopController() {
     </div>
   )
 
+  // Flipped layout mirrors the default: sessions sidebar → right, file
+  // browser + preview rail → left. Same panes, swapped sides.
+  const sidebarSide = panesFlipped ? 'right' : 'left'
+  const railSide = panesFlipped ? 'left' : 'right'
+
+  const previewPane = (
+    <Pane
+      disabled={!chatOpen || (!previewTarget && !filePreviewTarget)}
+      id="preview"
+      key="preview"
+      maxWidth={PREVIEW_RAIL_MAX_WIDTH}
+      minWidth={PREVIEW_RAIL_MIN_WIDTH}
+      resizable
+      side={railSide}
+      width={PREVIEW_RAIL_PANE_WIDTH}
+    >
+      {chatOpen ? (
+        <ChatPreviewRail onRestartServer={restartPreviewServer} setTitlebarToolGroup={setTitlebarToolGroup} />
+      ) : null}
+    </Pane>
+  )
+
+  const fileBrowserPane = (
+    <Pane
+      defaultOpen={false}
+      disabled={!chatOpen}
+      id="file-browser"
+      key="file-browser"
+      maxWidth={FILE_BROWSER_MAX_WIDTH}
+      minWidth={FILE_BROWSER_MIN_WIDTH}
+      resizable
+      side={railSide}
+      width={FILE_BROWSER_DEFAULT_WIDTH}
+    >
+      <RightSidebarPane
+        onActivateFile={composer.attachContextFilePath}
+        onActivateFolder={composer.attachContextFolderPath}
+        onChangeCwd={changeSessionCwd}
+      />
+    </Pane>
+  )
+
   return (
     <AppShell
-      commandCenterOpen={commandCenterOpen}
       leftStatusbarItems={leftStatusbarItems}
       leftTitlebarTools={titlebarToolGroups.flat.left}
-      onOpenSearch={() => openCommandCenterSection('sessions')}
       onOpenSettings={openSettings}
       overlays={overlays}
       statusbarItems={statusbarItems}
@@ -658,7 +718,7 @@ export function DesktopController() {
         maxWidth={SIDEBAR_MAX_WIDTH}
         minWidth={SIDEBAR_DEFAULT_WIDTH}
         resizable
-        side="left"
+        side={sidebarSide}
         width={`${SIDEBAR_DEFAULT_WIDTH}px`}
       >
         {sidebar}
@@ -718,35 +778,13 @@ export function DesktopController() {
           <Route element={<Navigate replace to={NEW_CHAT_ROUTE} />} path="*" />
         </Routes>
       </PaneMain>
-      <Pane
-        disabled={!chatOpen || (!previewTarget && !filePreviewTarget)}
-        id="preview"
-        maxWidth={PREVIEW_RAIL_MAX_WIDTH}
-        minWidth={PREVIEW_RAIL_MIN_WIDTH}
-        resizable
-        side="right"
-        width={PREVIEW_RAIL_PANE_WIDTH}
-      >
-        {chatOpen ? (
-          <ChatPreviewRail onRestartServer={restartPreviewServer} setTitlebarToolGroup={setTitlebarToolGroup} />
-        ) : null}
-      </Pane>
-      <Pane
-        defaultOpen={false}
-        disabled={!chatOpen}
-        id="file-browser"
-        maxWidth={FILE_BROWSER_MAX_WIDTH}
-        minWidth={FILE_BROWSER_MIN_WIDTH}
-        resizable
-        side="right"
-        width={FILE_BROWSER_DEFAULT_WIDTH}
-      >
-        <RightSidebarPane
-          onActivateFile={composer.attachContextFilePath}
-          onActivateFolder={composer.attachContextFolderPath}
-          onChangeCwd={changeSessionCwd}
-        />
-      </Pane>
+      {/*
+        Order within a side maps to column order. Default (rail on the right):
+        main | preview | file-browser. Flipped (rail on the left): mirror it to
+        file-browser | preview | main so preview stays adjacent to the chat.
+      */}
+      {panesFlipped ? fileBrowserPane : previewPane}
+      {panesFlipped ? previewPane : fileBrowserPane}
     </AppShell>
   )
 }
diff --git a/apps/desktop/src/app/right-sidebar/index.tsx b/apps/desktop/src/app/right-sidebar/index.tsx
index 8e46aeb6799..9acb93e3520 100644
--- a/apps/desktop/src/app/right-sidebar/index.tsx
+++ b/apps/desktop/src/app/right-sidebar/index.tsx
@@ -7,6 +7,7 @@ import { Codicon } from '@/components/ui/codicon'
 import { Loader } from '@/components/ui/loader'
 import { normalizeOrLocalPreviewTarget } from '@/lib/local-preview'
 import { cn } from '@/lib/utils'
+import { $panesFlipped } from '@/store/layout'
 import { notifyError } from '@/store/notifications'
 import { setCurrentSessionPreviewTarget } from '@/store/preview'
 import { $currentBranch, $currentCwd } from '@/store/session'
@@ -38,6 +39,7 @@ const RIGHT_SIDEBAR_TABS: readonly RightSidebarTab[] = [
 export function RightSidebarPane({ onActivateFile, onActivateFolder, onChangeCwd }: RightSidebarPaneProps) {
   const activeTab = useStore($rightSidebarTab)
   const terminalTakeover = useStore($terminalTakeover)
+  const panesFlipped = useStore($panesFlipped)
   const currentBranch = useStore($currentBranch).trim()
   const currentCwd = useStore($currentCwd).trim()
   const hasCwd = currentCwd.length > 0
@@ -96,7 +98,12 @@ export function RightSidebarPane({ onActivateFile, onActivateFolder, onChangeCwd
   return (
     <aside
       aria-label="Right sidebar"
-      className="before:pointer-events-none relative flex h-full w-full min-w-0 flex-col overflow-hidden border-l border-(--ui-stroke-secondary) bg-(--ui-sidebar-surface-background) pt-(--titlebar-height) text-(--ui-text-tertiary) shadow-[inset_0.0625rem_0_0_color-mix(in_srgb,white_18%,transparent)]"
+      className={cn(
+        'before:pointer-events-none relative flex h-full w-full min-w-0 flex-col overflow-hidden border-(--ui-stroke-secondary) bg-(--ui-sidebar-surface-background) pt-(--titlebar-height) text-(--ui-text-tertiary)',
+        panesFlipped
+          ? 'border-r shadow-[inset_-0.0625rem_0_0_color-mix(in_srgb,white_18%,transparent)]'
+          : 'border-l shadow-[inset_0.0625rem_0_0_color-mix(in_srgb,white_18%,transparent)]'
+      )}
     >
       <RightSidebarChrome activeTab={effectiveTab} branch={currentBranch} tabs={tabs} />
 
diff --git a/apps/desktop/src/app/shell/app-shell.tsx b/apps/desktop/src/app/shell/app-shell.tsx
index 98f97a337f9..8455666a9ea 100644
--- a/apps/desktop/src/app/shell/app-shell.tsx
+++ b/apps/desktop/src/app/shell/app-shell.tsx
@@ -6,6 +6,7 @@ import { PaneShell } from '@/components/pane-shell'
 import { SidebarProvider } from '@/components/ui/sidebar'
 import {
   $fileBrowserOpen,
+  $panesFlipped,
   $sidebarOpen,
   FILE_BROWSER_DEFAULT_WIDTH,
   FILE_BROWSER_PANE_ID,
@@ -20,11 +21,9 @@ import { TitlebarControls, type TitlebarTool } from './titlebar-controls'
 
 interface AppShellProps {
   children: ReactNode
-  commandCenterOpen?: boolean
   leftStatusbarItems?: readonly StatusbarItem[]
   leftTitlebarTools?: readonly TitlebarTool[]
   onOpenSettings: () => void
-  onOpenSearch: () => void
   overlays?: ReactNode
   statusbarItems?: readonly StatusbarItem[]
   titlebarTools?: readonly TitlebarTool[]
@@ -47,17 +46,16 @@ const viewportIsFullscreen = () =>
 
 export function AppShell({
   children,
-  commandCenterOpen = false,
   leftStatusbarItems,
   leftTitlebarTools,
   onOpenSettings,
-  onOpenSearch,
   overlays,
   statusbarItems,
   titlebarTools
 }: AppShellProps) {
   const sidebarOpen = useStore($sidebarOpen)
   const fileBrowserOpen = useStore($fileBrowserOpen)
+  const panesFlipped = useStore($panesFlipped)
   const fileBrowserWidthOverride = useStore($paneWidthOverride(FILE_BROWSER_PANE_ID))
   const connection = useStore($connection)
   const viewportFullscreen = useSyncExternalStore(subscribeWindowSize, viewportIsFullscreen, () => false)
@@ -69,7 +67,11 @@ export function AppShell({
   const nativeOverlayWidth = connection?.nativeOverlayWidth ?? 0
   const titlebarToolsRight = nativeOverlayWidth > 0 ? `${nativeOverlayWidth}px` : '0.75rem'
 
-  const titlebarContentInset = sidebarOpen
+  // The inset clears the top-left titlebar buttons when nothing covers the
+  // window's left edge. Default layout: the sessions sidebar sits there.
+  // Flipped layout: the file browser does instead.
+  const leftEdgePaneOpen = panesFlipped ? fileBrowserOpen : sidebarOpen
+  const titlebarContentInset = leftEdgePaneOpen
     ? 0
     : titlebarControls.left + TITLEBAR_HEIGHT + Math.round(TITLEBAR_HEIGHT / 2)
 
@@ -130,13 +132,7 @@ export function AppShell({
         } as CSSProperties
       }
     >
-      <TitlebarControls
-        commandCenterOpen={commandCenterOpen}
-        leftTools={leftTitlebarTools}
-        onOpenSearch={onOpenSearch}
-        onOpenSettings={onOpenSettings}
-        tools={titlebarTools}
-      />
+      <TitlebarControls leftTools={leftTitlebarTools} onOpenSettings={onOpenSettings} tools={titlebarTools} />
 
       <main className="relative z-3 flex min-h-0 w-full flex-1 flex-col overflow-hidden transition-none">
         <PaneShell className="min-h-0 flex-1">
diff --git a/apps/desktop/src/app/shell/titlebar-controls.tsx b/apps/desktop/src/app/shell/titlebar-controls.tsx
index 99e778a6f21..9c652745db8 100644
--- a/apps/desktop/src/app/shell/titlebar-controls.tsx
+++ b/apps/desktop/src/app/shell/titlebar-controls.tsx
@@ -15,7 +15,14 @@ import {
 import { triggerHaptic } from '@/lib/haptics'
 import { cn } from '@/lib/utils'
 import { $hapticsMuted, toggleHapticsMuted } from '@/store/haptics'
-import { $fileBrowserOpen, $sidebarOpen, toggleFileBrowserOpen, toggleSidebarOpen } from '@/store/layout'
+import {
+  $fileBrowserOpen,
+  $panesFlipped,
+  $sidebarOpen,
+  toggleFileBrowserOpen,
+  togglePanesFlipped,
+  toggleSidebarOpen
+} from '@/store/layout'
 
 import { PROFILES_ROUTE } from '../routes'
 
@@ -41,22 +48,15 @@ export type SetTitlebarToolGroup = (id: string, tools: readonly TitlebarTool[],
 interface TitlebarControlsProps extends ComponentProps<'div'> {
   leftTools?: readonly TitlebarTool[]
   tools?: readonly TitlebarTool[]
-  commandCenterOpen?: boolean
   onOpenSettings: () => void
-  onOpenSearch: () => void
 }
 
-export function TitlebarControls({
-  leftTools = [],
-  tools = [],
-  commandCenterOpen = false,
-  onOpenSettings,
-  onOpenSearch
-}: TitlebarControlsProps) {
+export function TitlebarControls({ leftTools = [], tools = [], onOpenSettings }: TitlebarControlsProps) {
   const navigate = useNavigate()
   const hapticsMuted = useStore($hapticsMuted)
   const fileBrowserOpen = useStore($fileBrowserOpen)
   const sidebarOpen = useStore($sidebarOpen)
+  const panesFlipped = useStore($panesFlipped)
 
   const toggleHaptics = () => {
     if (!hapticsMuted) {
@@ -70,38 +70,48 @@ export function TitlebarControls({
     }
   }
 
+  // Each titlebar button controls the pane physically on its side, so a flip
+  // swaps which pane each one toggles. Default: sessions left, file browser
+  // right. Flipped: file browser left, sessions right.
+  // `active` stays tied to the file browser (the toggleable extra pane) rather
+  // than the sessions sidebar, which has never shown a highlight.
+  const fileBrowserEdge = { active: fileBrowserOpen, open: fileBrowserOpen, toggle: toggleFileBrowserOpen }
+  const sessionsEdge = { active: undefined, open: sidebarOpen, toggle: toggleSidebarOpen }
+  const leftEdge = panesFlipped ? fileBrowserEdge : sessionsEdge
+  const rightEdge = panesFlipped ? sessionsEdge : fileBrowserEdge
+
   const leftToolbarTools: TitlebarTool[] = [
     {
+      active: leftEdge.active,
       icon: <Codicon name="layout-sidebar-left" />,
       id: 'sidebar',
-      label: sidebarOpen ? 'Hide sidebar' : 'Show sidebar',
+      label: `${leftEdge.open ? 'Hide' : 'Show'} left sidebar`,
       onSelect: () => {
         triggerHaptic('tap')
-        toggleSidebarOpen()
+        leftEdge.toggle()
       }
     },
     {
-      active: commandCenterOpen,
-      icon: <Codicon name="search" />,
-      id: 'search',
-      label: 'Search',
+      icon: <Codicon name="arrow-swap" />,
+      id: 'flip-panes',
+      label: 'Swap sidebar sides',
       onSelect: () => {
-        triggerHaptic('open')
-        onOpenSearch()
+        triggerHaptic('tap')
+        togglePanesFlipped()
       },
-      title: 'Search sessions, views, and actions'
+      title: 'Swap the sessions and file browser sides'
     },
     ...leftTools
   ]
 
   const rightSidebarTool: TitlebarTool = {
-    active: fileBrowserOpen,
+    active: rightEdge.active,
     icon: <Codicon name="layout-sidebar-right" />,
     id: 'right-sidebar',
-    label: fileBrowserOpen ? 'Hide right sidebar' : 'Show right sidebar',
+    label: `${rightEdge.open ? 'Hide' : 'Show'} right sidebar`,
     onSelect: () => {
       triggerHaptic('tap')
-      toggleFileBrowserOpen()
+      rightEdge.toggle()
     }
   }
 
diff --git a/apps/desktop/src/store/layout.ts b/apps/desktop/src/store/layout.ts
index a01e22961c3..c8f5386b6e7 100644
--- a/apps/desktop/src/store/layout.ts
+++ b/apps/desktop/src/store/layout.ts
@@ -21,6 +21,7 @@ export const SIDEBAR_SESSIONS_PAGE_SIZE = 50
 
 const SIDEBAR_PINNED_STORAGE_KEY = 'hermes.desktop.pinnedSessions'
 const SIDEBAR_AGENTS_GROUPED_STORAGE_KEY = 'hermes.desktop.agentsGroupedByWorkspace'
+const PANES_FLIPPED_STORAGE_KEY = 'hermes.desktop.panesFlipped'
 
 export const CHAT_SIDEBAR_PANE_ID = 'chat-sidebar'
 export const FILE_BROWSER_PANE_ID = 'file-browser'
@@ -53,11 +54,15 @@ export const $pinnedSessionIds = atom(storedStringArray(SIDEBAR_PINNED_STORAGE_K
 export const $sidebarPinsOpen = atom(true)
 export const $sidebarRecentsOpen = atom(true)
 export const $sidebarAgentsGrouped = atom(storedBoolean(SIDEBAR_AGENTS_GROUPED_STORAGE_KEY, false))
+// When true, the sessions sidebar moves to the right and the file browser +
+// preview rail move to the left — a mirror of the default layout.
+export const $panesFlipped = atom(storedBoolean(PANES_FLIPPED_STORAGE_KEY, false))
 export const $isSidebarResizing = atom(false)
 export const $sessionsLimit = atom(SIDEBAR_SESSIONS_PAGE_SIZE)
 
 $pinnedSessionIds.subscribe(ids => persistStringArray(SIDEBAR_PINNED_STORAGE_KEY, [...ids]))
 $sidebarAgentsGrouped.subscribe(grouped => persistBoolean(SIDEBAR_AGENTS_GROUPED_STORAGE_KEY, grouped))
+$panesFlipped.subscribe(flipped => persistBoolean(PANES_FLIPPED_STORAGE_KEY, flipped))
 
 export function setSidebarWidth(width: number) {
   const bounded = Math.min(SIDEBAR_MAX_WIDTH, Math.max(SIDEBAR_DEFAULT_WIDTH, width))
@@ -76,6 +81,10 @@ export function toggleFileBrowserOpen() {
   togglePane(FILE_BROWSER_PANE_ID)
 }
 
+export function togglePanesFlipped() {
+  $panesFlipped.set(!$panesFlipped.get())
+}
+
 export function selectRightRailTab(id: RightRailTabId) {
   $rightRailActiveTabId.set(id)
 }

From ac9de2e80c01c9d44e4496f94bf7c1befd54d66c Mon Sep 17 00:00:00 2001
From: Brooklyn Nicholson <brooklyn.bb.nicholson@gmail.com>
Date: Wed, 3 Jun 2026 23:45:45 -0500
Subject: [PATCH 16/29] feat(desktop): global Cmd+K palette + UI consistency
 overhaul
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Builds on the clarify/needs-input work with a cross-cutting pass to make
the desktop surfaces feel like one app.

- Global Cmd+K command palette (cmdk): nav, settings deep-links, async
  API-key / MCP-server / archived-session groups, reusable theme sub-page
  (light/dark groups, stays open on pick), loop nav, fuzzy match. Replaces
  per-page settings search.
- Shared SearchField: borderless, underline-on-focus, `field-sizing`
  auto-width. Unifies sessions sidebar, pages, overlays, command center,
  cron; drops bespoke OverlaySearchInput.
- Cron & Profiles converted to OverlayView; flat token-driven panels
  (no card-in-card / divider borders) matching command center.
- `r` refresh hotkey via useRefreshHotkey; drop the visible refresh buttons.
- Button text/textStrong link variants applied across settings & views;
  shared PAGE_INSET_X content gutters.
- Math/ascii loaders replace "Loading…" text placeholders; x-icon close
  over text "Close"; cursor-pointer at the dropdown/select primitive level.
---
 apps/desktop/src/app/artifacts/index.tsx      |  60 +-
 apps/desktop/src/app/chat/composer/index.tsx  |   5 +-
 .../src/app/chat/right-rail/preview-file.tsx  |   3 +-
 apps/desktop/src/app/chat/sidebar/index.tsx   |  32 +-
 apps/desktop/src/app/command-center/index.tsx | 848 ++++++------------
 .../desktop/src/app/command-palette/index.tsx | 462 ++++++++++
 apps/desktop/src/app/cron/index.tsx           | 116 ++-
 apps/desktop/src/app/desktop-controller.tsx   |  36 +-
 .../src/app/hooks/use-refresh-hotkey.ts       |  45 +
 apps/desktop/src/app/layout-constants.ts      |  13 +
 apps/desktop/src/app/messaging/index.tsx      |  32 +-
 .../src/app/overlays/overlay-search-input.tsx |  77 --
 .../src/app/overlays/overlay-split-layout.tsx |   5 +-
 .../desktop/src/app/overlays/overlay-view.tsx |   2 +-
 apps/desktop/src/app/page-search-shell.tsx    |  60 +-
 apps/desktop/src/app/profiles/index.tsx       | 166 ++--
 .../src/app/right-sidebar/files/tree.tsx      |   7 +-
 apps/desktop/src/app/routes.ts                |  15 +
 .../src/app/settings/about-settings.tsx       |  35 +-
 .../src/app/settings/appearance-settings.tsx  |  39 +-
 .../src/app/settings/config-settings.tsx      |  91 +-
 apps/desktop/src/app/settings/constants.ts    |   9 -
 .../src/app/settings/gateway-settings.tsx     |  12 +-
 apps/desktop/src/app/settings/index.tsx       |  59 +-
 .../src/app/settings/keys-settings.tsx        | 107 ++-
 .../desktop/src/app/settings/mcp-settings.tsx | 105 ++-
 .../src/app/settings/model-settings.tsx       |   6 +-
 apps/desktop/src/app/settings/primitives.tsx  |   4 +-
 .../src/app/settings/sessions-settings.tsx    |  87 +-
 .../src/app/settings/toolset-config-panel.tsx |  12 +-
 apps/desktop/src/app/settings/types.ts        |   5 -
 .../app/shell/hooks/use-overlay-routing.ts    |   9 +-
 .../src/app/shell/titlebar-controls.tsx       |  13 +-
 apps/desktop/src/app/skills/index.tsx         |  89 +-
 apps/desktop/src/app/updates-overlay.tsx      |  18 +-
 .../components/desktop-onboarding-overlay.tsx |  25 +-
 .../components/model-visibility-dialog.tsx    |   7 +-
 apps/desktop/src/components/ui/button.tsx     |  10 +-
 .../src/components/ui/dropdown-menu.tsx       |   8 +-
 .../src/components/ui/search-field.tsx        |  78 ++
 .../src/components/ui/segmented-control.tsx   |  51 ++
 apps/desktop/src/components/ui/select.tsx     |   2 +-
 apps/desktop/src/store/command-palette.ts     |  20 +
 apps/desktop/src/styles.css                   |  20 +
 44 files changed, 1594 insertions(+), 1311 deletions(-)
 create mode 100644 apps/desktop/src/app/command-palette/index.tsx
 create mode 100644 apps/desktop/src/app/hooks/use-refresh-hotkey.ts
 create mode 100644 apps/desktop/src/app/layout-constants.ts
 delete mode 100644 apps/desktop/src/app/overlays/overlay-search-input.tsx
 create mode 100644 apps/desktop/src/components/ui/search-field.tsx
 create mode 100644 apps/desktop/src/components/ui/segmented-control.tsx
 create mode 100644 apps/desktop/src/store/command-palette.ts

diff --git a/apps/desktop/src/app/artifacts/index.tsx b/apps/desktop/src/app/artifacts/index.tsx
index bed86e7fff6..b6205d11c76 100644
--- a/apps/desktop/src/app/artifacts/index.tsx
+++ b/apps/desktop/src/app/artifacts/index.tsx
@@ -5,7 +5,6 @@ import { useNavigate } from 'react-router-dom'
 import { ZoomableImage } from '@/components/chat/zoomable-image'
 import { PageLoader } from '@/components/page-loader'
 import { Button } from '@/components/ui/button'
-import { Codicon } from '@/components/ui/codicon'
 import { CopyButton } from '@/components/ui/copy-button'
 import {
   Pagination,
@@ -25,7 +24,9 @@ import { cn } from '@/lib/utils'
 import { notifyError } from '@/store/notifications'
 import type { SessionInfo, SessionMessage } from '@/types/hermes'
 
+import { useRefreshHotkey } from '../hooks/use-refresh-hotkey'
 import { useRouteEnumParam } from '../hooks/use-route-enum-param'
+import { PAGE_INSET_NEG_X, PAGE_INSET_X } from '../layout-constants'
 import { PageSearchShell } from '../page-search-shell'
 import { sessionRoute } from '../routes'
 import type { SetStatusbarItemGroup } from '../shell/statusbar-controls'
@@ -372,14 +373,11 @@ export function ArtifactsView({ setStatusbarItemGroup: _setStatusbarItemGroup, .
 
   const [kindFilter, setKindFilter] = useRouteEnumParam('tab', ARTIFACT_FILTERS, 'all')
 
-  const [refreshing, setRefreshing] = useState(false)
   const [failedImageIds, setFailedImageIds] = useState<Set<string>>(() => new Set())
   const [imagePage, setImagePage] = useState(1)
   const [filePage, setFilePage] = useState(1)
 
   const refreshArtifacts = useCallback(async () => {
-    setRefreshing(true)
-
     try {
       const sessions = (await listSessions(30, 1)).sessions
       const results = await Promise.allSettled(sessions.map(session => getSessionMessages(session.id)))
@@ -398,11 +396,11 @@ export function ArtifactsView({ setStatusbarItemGroup: _setStatusbarItemGroup, .
     } catch (err) {
       notifyError(err, 'Artifacts failed to load')
       setArtifacts([])
-    } finally {
-      setRefreshing(false)
     }
   }, [])
 
+  useRefreshHotkey(refreshArtifacts)
+
   useEffect(() => {
     void refreshArtifacts()
   }, [refreshArtifacts])
@@ -502,7 +500,10 @@ export function ArtifactsView({ setStatusbarItemGroup: _setStatusbarItemGroup, .
   return (
     <PageSearchShell
       {...props}
-      filters={
+      onSearchChange={setQuery}
+      searchPlaceholder="Search artifacts..."
+      searchValue={query}
+      tabs={
         <>
           <TextTab active={kindFilter === 'all'} onClick={() => setKindFilter('all')}>
             All <TextTabMeta>({counts.all})</TextTabMeta>
@@ -518,23 +519,6 @@ export function ArtifactsView({ setStatusbarItemGroup: _setStatusbarItemGroup, .
           </TextTab>
         </>
       }
-      onSearchChange={setQuery}
-      searchPlaceholder="Search artifacts..."
-      searchTrailingAction={
-        <Button
-          aria-label={refreshing ? 'Refreshing artifacts' : 'Refresh artifacts'}
-          className="text-(--ui-text-tertiary) hover:bg-transparent hover:text-foreground"
-          disabled={refreshing}
-          onClick={() => void refreshArtifacts()}
-          size="icon-xs"
-          title={refreshing ? 'Refreshing artifacts' : 'Refresh artifacts'}
-          type="button"
-          variant="ghost"
-        >
-          <Codicon name="refresh" size="0.875rem" spinning={refreshing} />
-        </Button>
-      }
-      searchValue={query}
     >
       {!artifacts ? (
         <PageLoader label="Indexing recent session artifacts" />
@@ -549,10 +533,16 @@ export function ArtifactsView({ setStatusbarItemGroup: _setStatusbarItemGroup, .
         </div>
       ) : (
         <div className="h-full overflow-y-auto">
-          <div className="flex flex-col gap-3 px-2 pb-2">
+          <div className={cn('flex flex-col gap-3 pb-2', PAGE_INSET_X)}>
             {visibleImageArtifacts.length > 0 && (
               <section className="flex flex-col">
-                <div className="sticky top-0 z-10 -mx-2 flex h-7 items-center gap-3 overflow-x-auto bg-background px-3">
+                <div
+                  className={cn(
+                    'sticky top-0 z-10 flex h-7 items-center gap-3 overflow-x-auto bg-background',
+                    PAGE_INSET_NEG_X,
+                    PAGE_INSET_X
+                  )}
+                >
                   <ArtifactsPagination
                     className="ml-auto justify-end px-0"
                     itemLabel="images"
@@ -578,7 +568,13 @@ export function ArtifactsView({ setStatusbarItemGroup: _setStatusbarItemGroup, .
 
             {visibleFileArtifacts.length > 0 && (
               <section className="flex flex-col">
-                <div className="sticky top-0 z-10 -mx-2 flex h-7 items-center gap-3 overflow-x-auto bg-background px-3">
+                <div
+                  className={cn(
+                    'sticky top-0 z-10 flex h-7 items-center gap-3 overflow-x-auto bg-background',
+                    PAGE_INSET_NEG_X,
+                    PAGE_INSET_X
+                  )}
+                >
                   <ArtifactsPagination
                     className="ml-auto justify-end px-0"
                     itemLabel={itemsLabel(kindFilter)}
@@ -588,7 +584,7 @@ export function ArtifactsView({ setStatusbarItemGroup: _setStatusbarItemGroup, .
                     total={visibleFileArtifacts.length}
                   />
                 </div>
-                <div className="overflow-x-auto rounded-lg border border-(--ui-stroke-tertiary) bg-(--ui-chat-bubble-background) shadow-sm">
+                <div className="overflow-x-auto rounded-lg border border-(--ui-stroke-tertiary) bg-(--ui-chat-bubble-background)">
                   <ArtifactTable artifacts={pagedFileArtifacts} ctx={cellCtx} filter={kindFilter} />
                 </div>
               </section>
@@ -662,7 +658,7 @@ function ArtifactImageCard({ artifact, failedImage, onImageError, onOpenChat }:
   return (
     <article
       className={cn(
-        'group/artifact overflow-hidden rounded-lg border border-(--ui-stroke-tertiary) bg-(--ui-chat-bubble-background) shadow-sm'
+        'group/artifact overflow-hidden rounded-lg border border-(--ui-stroke-tertiary) bg-(--ui-chat-bubble-background)'
       )}
     >
       <div
@@ -674,7 +670,7 @@ function ArtifactImageCard({ artifact, failedImage, onImageError, onOpenChat }:
         {!failedImage && (
           <ZoomableImage
             alt={artifact.label}
-            className="max-h-40 max-w-full cursor-zoom-in rounded-md object-contain shadow-sm"
+            className="max-h-40 max-w-full cursor-zoom-in rounded-md object-contain"
             containerClassName="max-h-full"
             decoding="async"
             loading="lazy"
@@ -702,7 +698,7 @@ function ArtifactImageCard({ artifact, failedImage, onImageError, onOpenChat }:
         </div>
 
         <div className="flex flex-wrap gap-1.5">
-          <Button onClick={() => onOpenChat(artifact.sessionId)} size="xs" type="button" variant="outline">
+          <Button onClick={() => onOpenChat(artifact.sessionId)} size="xs" type="button" variant="textStrong">
             <FolderOpen className="size-3" />
             Chat
           </Button>
@@ -862,7 +858,7 @@ function ArtifactTable({
           ))}
         </tr>
       </thead>
-      <tbody className="divide-y divide-(--ui-stroke-quaternary)">
+      <tbody>
         {artifacts.map(artifact => (
           <tr className="group/artifact" key={artifact.id}>
             {ARTIFACT_COLUMNS.map(col => {
diff --git a/apps/desktop/src/app/chat/composer/index.tsx b/apps/desktop/src/app/chat/composer/index.tsx
index 6d1be390706..2a903813e28 100644
--- a/apps/desktop/src/app/chat/composer/index.tsx
+++ b/apps/desktop/src/app/chat/composer/index.tsx
@@ -157,6 +157,7 @@ export function ChatBar({
   const showHelpHint = draft === '?'
 
   const gatewayState = useStore($gatewayState)
+
   // When the bar is disabled it's because the gateway isn't open. Distinguish a
   // cold start ("Starting Hermes...") from a dropped connection we're trying to
   // restore (e.g. after the Mac slept) so the stuck state reads as recoverable.
@@ -588,7 +589,9 @@ export function ChatBar({
       return
     }
 
-    if ((event.metaKey || event.ctrlKey) && !event.altKey && !event.shiftKey && event.key.toLowerCase() === 'k') {
+    // Cmd/Ctrl+Shift+K drains the next queued message. Plain Cmd/Ctrl+K is
+    // reserved for the global command palette.
+    if ((event.metaKey || event.ctrlKey) && !event.altKey && event.shiftKey && event.key.toLowerCase() === 'k') {
       event.preventDefault()
 
       if (!busy) {
diff --git a/apps/desktop/src/app/chat/right-rail/preview-file.tsx b/apps/desktop/src/app/chat/right-rail/preview-file.tsx
index 708961c23ae..86b8acf9c39 100644
--- a/apps/desktop/src/app/chat/right-rail/preview-file.tsx
+++ b/apps/desktop/src/app/chat/right-rail/preview-file.tsx
@@ -11,6 +11,7 @@ import ShikiHighlighter from 'react-shiki'
 import { Streamdown } from 'streamdown'
 
 import { HERMES_PATHS_MIME } from '@/app/chat/hooks/use-composer-actions'
+import { PageLoader } from '@/components/page-loader'
 import { cn } from '@/lib/utils'
 import type { PreviewTarget } from '@/store/preview'
 
@@ -481,7 +482,7 @@ export function LocalFilePreview({ reloadKey, target }: { reloadKey: number; tar
   }, [blockedByTarget, filePath, forcePreview, isImage, isText, reloadKey, target.language])
 
   if (state.loading) {
-    return <div className="grid h-full place-items-center text-xs text-muted-foreground">Loading preview…</div>
+    return <PageLoader label="Loading preview" />
   }
 
   if (state.error) {
diff --git a/apps/desktop/src/app/chat/sidebar/index.tsx b/apps/desktop/src/app/chat/sidebar/index.tsx
index bee1feb6b44..f5f7808ef74 100644
--- a/apps/desktop/src/app/chat/sidebar/index.tsx
+++ b/apps/desktop/src/app/chat/sidebar/index.tsx
@@ -23,6 +23,7 @@ import { Button } from '@/components/ui/button'
 import { Codicon } from '@/components/ui/codicon'
 import { DisclosureCaret } from '@/components/ui/disclosure-caret'
 import { KbdGroup } from '@/components/ui/kbd'
+import { SearchField } from '@/components/ui/search-field'
 import {
   Sidebar,
   SidebarContent,
@@ -461,28 +462,13 @@ export function ChatSidebar({
         </SidebarGroup>
 
         {sidebarOpen && showSessionSections && (
-          <div className="shrink-0 pb-1 pt-1">
-            <div className="flex items-center gap-1.5 rounded-md border border-transparent bg-transparent px-2 transition-colors focus-within:border-(--ui-stroke-tertiary)">
-              <Codicon className="shrink-0 text-(--ui-text-tertiary)" name="search" size="0.75rem" />
-              <input
-                aria-label="Search sessions"
-                className="h-6 min-w-0 flex-1 bg-transparent text-[0.8125rem] text-foreground placeholder:text-(--ui-text-tertiary) focus:outline-none"
-                onChange={event => setSearchQuery(event.target.value)}
-                placeholder="Search sessions…"
-                type="text"
-                value={searchQuery}
-              />
-              {searchQuery && (
-                <button
-                  aria-label="Clear search"
-                  className="grid size-4 shrink-0 place-items-center rounded-sm text-(--ui-text-tertiary) hover:bg-(--ui-control-active-background) hover:text-foreground"
-                  onClick={() => setSearchQuery('')}
-                  type="button"
-                >
-                  <Codicon name="close" size="0.75rem" />
-                </button>
-              )}
-            </div>
+          <div className="shrink-0 px-2 pb-1 pt-1">
+            <SearchField
+              aria-label="Search sessions"
+              onChange={setSearchQuery}
+              placeholder="Search sessions…"
+              value={searchQuery}
+            />
           </div>
         )}
 
@@ -648,7 +634,7 @@ function SidebarPinnedEmptyState() {
       <span className="grid w-3.5 shrink-0 place-items-center text-(--ui-text-quaternary)">
         <Codicon name="pin" size="0.75rem" />
       </span>
-      <span>Shift-click a chat to pin · drag to reorder</span>
+      <span>Shift-click a chat to pin</span>
     </div>
   )
 }
diff --git a/apps/desktop/src/app/command-center/index.tsx b/apps/desktop/src/app/command-center/index.tsx
index 758b7ade3ea..e4e0d470d3a 100644
--- a/apps/desktop/src/app/command-center/index.tsx
+++ b/apps/desktop/src/app/command-center/index.tsx
@@ -1,29 +1,20 @@
 import { useStore } from '@nanostores/react'
-import {
-  IconBookmark,
-  IconBookmarkFilled,
-  IconDownload,
-  IconRefresh,
-  IconTrash
-} from '@tabler/icons-react'
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { IconBookmark, IconBookmarkFilled, IconDownload, IconTrash } from '@tabler/icons-react'
+import { type MouseEvent, type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
+import { PageLoader } from '@/components/page-loader'
+import { Button } from '@/components/ui/button'
+import { SearchField } from '@/components/ui/search-field'
+import { SegmentedControl } from '@/components/ui/segmented-control'
 import {
   getActionStatus,
   getLogs,
   getStatus,
   getUsageAnalytics,
   restartGateway,
-  searchSessions,
   updateHermes
 } from '@/hermes'
-import type {
-  ActionStatusResponse,
-  AnalyticsResponse,
-  SessionInfo,
-  SessionSearchResult as SessionSearchApiResult,
-  StatusResponse
-} from '@/hermes'
+import type { ActionStatusResponse, AnalyticsResponse, StatusResponse } from '@/hermes'
 import { sessionTitle } from '@/lib/chat-runtime'
 import { Activity, AlertCircle, BarChart3, Pin } from '@/lib/icons'
 import { exportSession } from '@/lib/session-export'
@@ -32,12 +23,10 @@ import { upsertDesktopActionTask } from '@/store/activity'
 import { $pinnedSessionIds, pinSession, unpinSession } from '@/store/layout'
 import { $sessions, sessionPinId } from '@/store/session'
 
+import { useRefreshHotkey } from '../hooks/use-refresh-hotkey'
 import { useRouteEnumParam } from '../hooks/use-route-enum-param'
-import { OverlayActionButton, OverlayCard, overlayCardClass, OverlayIconButton } from '../overlays/overlay-chrome'
-import { OverlaySearchInput } from '../overlays/overlay-search-input'
 import { OverlayMain, OverlayNavItem, OverlaySidebar, OverlaySplitLayout } from '../overlays/overlay-split-layout'
 import { OverlayView } from '../overlays/overlay-view'
-import { ARTIFACTS_ROUTE, MESSAGING_ROUTE, NEW_CHAT_ROUTE, SETTINGS_ROUTE, SKILLS_ROUTE } from '../routes'
 
 export type CommandCenterSection = 'sessions' | 'system' | 'usage'
 
@@ -50,7 +39,6 @@ interface CommandCenterViewProps {
   initialSection?: CommandCenterSection
   onClose: () => void
   onDeleteSession: (sessionId: string) => Promise<void>
-  onNavigateRoute: (path: string) => void
   onOpenSession: (sessionId: string) => void
 }
 
@@ -66,77 +54,6 @@ const SECTION_DESCRIPTIONS: Record<CommandCenterSection, string> = {
   usage: 'Token, cost, and skill activity over time'
 }
 
-interface NavigationSearchEntry {
-  detail?: string
-  id: string
-  route: string
-  title: string
-}
-
-interface SectionSearchEntry {
-  detail?: string
-  id: string
-  section: CommandCenterSection
-  title: string
-}
-
-const NAVIGATION_SEARCH_ENTRIES: readonly NavigationSearchEntry[] = [
-  { id: 'nav-new-chat', route: NEW_CHAT_ROUTE, title: 'New session', detail: 'Start a fresh session' },
-  { id: 'nav-settings', route: SETTINGS_ROUTE, title: 'Settings', detail: 'Configure Hermes desktop' },
-  { id: 'nav-skills', route: SKILLS_ROUTE, title: 'Skills & Tools', detail: 'Enable skills, toolsets, and providers' },
-  {
-    id: 'nav-messaging',
-    route: MESSAGING_ROUTE,
-    title: 'Messaging',
-    detail: 'Set up Telegram, Slack, Discord, and more'
-  },
-  { id: 'nav-artifacts', route: ARTIFACTS_ROUTE, title: 'Artifacts', detail: 'Browse generated outputs' }
-]
-
-const SECTION_SEARCH_ENTRIES: readonly SectionSearchEntry[] = [
-  { id: 'section-sessions', section: 'sessions', title: 'Sessions panel', detail: 'Search, pin, and manage sessions' },
-  { id: 'section-system', section: 'system', title: 'System panel', detail: 'Gateway status, logs, restart/update' },
-  { id: 'section-usage', section: 'usage', title: 'Usage panel', detail: 'Token, cost, and skill activity' }
-]
-
-interface SessionSearchHit {
-  detail?: string
-  kind: 'session'
-  /** Durable lineage-root id used for pinning so the pin survives compression. */
-  pinId: string
-  sessionId: string
-  snippet: string
-  title: string
-}
-
-interface RouteSearchHit {
-  detail?: string
-  kind: 'route'
-  route: string
-  title: string
-}
-
-interface SectionSearchHit {
-  detail?: string
-  kind: 'section'
-  section: CommandCenterSection
-  title: string
-}
-
-type CommandCenterSearchResult = RouteSearchHit | SectionSearchHit | SessionSearchHit
-
-interface CommandCenterSearchProvider {
-  id: string
-  label: string
-  search: (query: string) => Promise<CommandCenterSearchResult[]>
-}
-
-interface CommandCenterSearchGroup {
-  id: string
-  label: string
-  results: CommandCenterSearchResult[]
-}
-
 function formatTimestamp(value?: number | null): string {
   if (!value) {
     return ''
@@ -151,24 +68,6 @@ function formatTimestamp(value?: number | null): string {
   return new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'short' }).format(date)
 }
 
-function splitSessionSearchResult(result: SessionSearchApiResult, sessionsById: Map<string, SessionInfo>) {
-  const row = sessionsById.get(result.session_id)
-  const title = row ? sessionTitle(row) : result.session_id
-  const detail = [result.model, result.source].filter(Boolean).join(' · ')
-
-  return { detail, title }
-}
-
-function matchesSearchQuery(query: string, ...values: Array<string | undefined>): boolean {
-  const normalized = query.trim().toLowerCase()
-
-  if (!normalized) {
-    return true
-  }
-
-  return values.some(value => value?.toLowerCase().includes(normalized))
-}
-
 function useDebouncedValue<T>(value: T, delayMs: number): T {
   const [debounced, setDebounced] = useState(value)
 
@@ -181,11 +80,50 @@ function useDebouncedValue<T>(value: T, delayMs: number): T {
   return debounced
 }
 
+function RowIconButton({
+  children,
+  className,
+  onClick,
+  title
+}: {
+  children: ReactNode
+  className?: string
+  onClick: (event: MouseEvent<HTMLButtonElement>) => void
+  title: string
+}) {
+  return (
+    <Button
+      aria-label={title}
+      className={cn('text-(--ui-text-tertiary) hover:bg-(--chrome-action-hover) hover:text-foreground', className)}
+      onClick={onClick}
+      size="icon-xs"
+      title={title}
+      type="button"
+      variant="ghost"
+    >
+      {children}
+    </Button>
+  )
+}
+
+function EmptyPanel({ action, description, title }: { action?: ReactNode; description: string; title: string }) {
+  return (
+    <div className="grid min-h-48 place-items-center px-6 text-center">
+      <div>
+        <div className="text-[length:var(--conversation-text-font-size)] font-medium text-foreground">{title}</div>
+        <div className="mt-1 text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
+          {description}
+        </div>
+        {action && <div className="mt-3 flex justify-center">{action}</div>}
+      </div>
+    </div>
+  )
+}
+
 export function CommandCenterView({
   initialSection,
   onClose,
   onDeleteSession,
-  onNavigateRoute,
   onOpenSession
 }: CommandCenterViewProps) {
   const sessions = useStore($sessions)
@@ -194,8 +132,6 @@ export function CommandCenterView({
   const [section, setSection] = useRouteEnumParam('section', SECTIONS, initialSection ?? 'sessions')
 
   const [query, setQuery] = useState('')
-  const [searchLoading, setSearchLoading] = useState(false)
-  const [searchGroups, setSearchGroups] = useState<CommandCenterSearchGroup[]>([])
   const [status, setStatus] = useState<StatusResponse | null>(null)
   const [logs, setLogs] = useState<string[]>([])
   const [systemLoading, setSystemLoading] = useState(false)
@@ -205,74 +141,30 @@ export function CommandCenterView({
   const [usage, setUsage] = useState<AnalyticsResponse | null>(null)
   const [usageLoading, setUsageLoading] = useState(false)
   const [usageError, setUsageError] = useState('')
-  const searchRequestRef = useRef(0)
   const usageRequestRef = useRef(0)
 
   const debouncedQuery = useDebouncedValue(query.trim(), 180)
 
-  const sessionsById = useMemo(() => new Map(sessions.map(session => [session.id, session])), [sessions])
+  const filteredSessions = useMemo(() => {
+    const sorted = [...sessions].sort((a, b) => {
+      const left = a.last_active || a.started_at || 0
+      const right = b.last_active || b.started_at || 0
 
-  const filteredSessions = useMemo(
-    () =>
-      [...sessions].sort((a, b) => {
-        const left = a.last_active || a.started_at || 0
-        const right = b.last_active || b.started_at || 0
+      return right - left
+    })
 
-        return right - left
-      }),
-    [sessions]
-  )
+    const needle = debouncedQuery.toLowerCase()
 
-  const searchProviders = useMemo<readonly CommandCenterSearchProvider[]>(
-    () => [
-      {
-        id: 'navigation',
-        label: 'Navigate',
-        search: async searchQuery => {
-          const routeHits: RouteSearchHit[] = NAVIGATION_SEARCH_ENTRIES.filter(entry =>
-            matchesSearchQuery(searchQuery, entry.title, entry.detail, entry.route)
-          ).map(entry => ({
-            detail: entry.detail,
-            kind: 'route',
-            route: entry.route,
-            title: entry.title
-          }))
+    if (!needle) {
+      return sorted
+    }
 
-          const sectionHits: SectionSearchHit[] = SECTION_SEARCH_ENTRIES.filter(entry =>
-            matchesSearchQuery(searchQuery, entry.title, entry.detail, SECTION_LABELS[entry.section])
-          ).map(entry => ({
-            detail: entry.detail,
-            kind: 'section',
-            section: entry.section,
-            title: entry.title
-          }))
+    return sorted.filter(session => {
+      const haystack = `${sessionTitle(session)} ${session.id}`.toLowerCase()
 
-          return [...routeHits, ...sectionHits]
-        }
-      },
-      {
-        id: 'sessions',
-        label: 'Sessions',
-        search: async searchQuery => {
-          const response = await searchSessions(searchQuery)
-
-          return response.results.map(result => {
-            const { detail, title } = splitSessionSearchResult(result, sessionsById)
-
-            return {
-              detail,
-              kind: 'session',
-              pinId: result.lineage_root || result.session_id,
-              sessionId: result.session_id,
-              snippet: result.snippet || '',
-              title
-            } satisfies SessionSearchHit
-          })
-        }
-      }
-    ],
-    [sessionsById]
-  )
+      return haystack.includes(needle)
+    })
+  }, [debouncedQuery, sessions])
 
   const refreshSystem = useCallback(async () => {
     setSystemLoading(true)
@@ -319,42 +211,6 @@ export function CommandCenterView({
     }
   }, [])
 
-  useEffect(() => {
-    if (!debouncedQuery) {
-      setSearchGroups([])
-      setSearchLoading(false)
-
-      return
-    }
-
-    const requestId = searchRequestRef.current + 1
-    searchRequestRef.current = requestId
-    setSearchLoading(true)
-
-    void Promise.all(
-      searchProviders.map(async provider => ({
-        id: provider.id,
-        label: provider.label,
-        results: await provider.search(debouncedQuery)
-      }))
-    )
-      .then(groups => {
-        if (searchRequestRef.current === requestId) {
-          setSearchGroups(groups.filter(group => group.results.length > 0))
-        }
-      })
-      .catch(() => {
-        if (searchRequestRef.current === requestId) {
-          setSearchGroups([])
-        }
-      })
-      .finally(() => {
-        if (searchRequestRef.current === requestId) {
-          setSearchLoading(false)
-        }
-      })
-  }, [debouncedQuery, searchProviders])
-
   useEffect(() => {
     if (section === 'system' && !status && !systemLoading) {
       void refreshSystem()
@@ -367,8 +223,14 @@ export function CommandCenterView({
     }
   }, [refreshUsage, section, usagePeriod])
 
-  const showGlobalSearchResults = debouncedQuery.length > 0
-  const hasGlobalSearchResults = searchGroups.length > 0
+  useRefreshHotkey(() => {
+    if (section === 'system') {
+      void refreshSystem()
+    } else if (section === 'usage') {
+      void refreshUsage(usagePeriod)
+    }
+  })
+
   const sessionListHasResults = filteredSessions.length > 0
 
   const runSystemAction = useCallback(
@@ -412,40 +274,8 @@ export function CommandCenterView({
     [refreshSystem]
   )
 
-  const handleSearchSelect = useCallback(
-    (result: CommandCenterSearchResult) => {
-      if (result.kind === 'route') {
-        onNavigateRoute(result.route)
-
-        return
-      }
-
-      if (result.kind === 'section') {
-        setSection(result.section)
-        setQuery('')
-
-        return
-      }
-
-      onOpenSession(result.sessionId)
-    },
-    [onNavigateRoute, onOpenSession, setSection]
-  )
-
   return (
-    <OverlayView
-      closeLabel="Close command center"
-      headerContent={
-        <OverlaySearchInput
-          containerClassName="w-[min(36rem,calc(100vw-32rem))] min-w-80"
-          loading={searchLoading}
-          onChange={next => setQuery(next)}
-          placeholder="Search sessions, views, and actions"
-          value={query}
-        />
-      }
-      onClose={onClose}
-    >
+    <OverlayView closeLabel="Close command center" onClose={onClose}>
       <OverlaySplitLayout>
         <OverlaySidebar>
           {SECTIONS.map(value => (
@@ -460,181 +290,107 @@ export function CommandCenterView({
         </OverlaySidebar>
 
         <OverlayMain>
-          <header className="mb-4 flex items-center justify-between gap-2">
-            <div>
-              <h2 className="text-sm font-semibold text-foreground">{SECTION_LABELS[section]}</h2>
-              <p className="text-xs text-muted-foreground">{SECTION_DESCRIPTIONS[section]}</p>
+          <header className="mb-4 flex items-center justify-between gap-3">
+            <div className="min-w-0">
+              <h2 className="text-[length:var(--conversation-text-font-size)] font-semibold text-foreground">
+                {SECTION_LABELS[section]}
+              </h2>
+              <p className="mt-0.5 text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
+                {SECTION_DESCRIPTIONS[section]}
+              </p>
             </div>
-            {section === 'system' && (
-              <OverlayActionButton disabled={systemLoading} onClick={() => void refreshSystem()}>
-                <IconRefresh className={cn('mr-1.5 size-3.5', systemLoading && 'animate-spin')} />
-                {systemLoading ? 'Refreshing...' : 'Refresh'}
-              </OverlayActionButton>
-            )}
-            {section === 'usage' && (
-              <OverlayActionButton disabled={usageLoading} onClick={() => void refreshUsage(usagePeriod)}>
-                <IconRefresh className={cn('mr-1.5 size-3.5', usageLoading && 'animate-spin')} />
-                {usageLoading ? 'Refreshing...' : 'Refresh'}
-              </OverlayActionButton>
-            )}
-          </header>
-
-          {showGlobalSearchResults ? (
-            <div className="min-h-0 flex-1 overflow-y-auto pr-1">
-              {!hasGlobalSearchResults ? (
-                <OverlayCard className="px-3 py-4 text-sm text-muted-foreground">
-                  No matching results found.
-                </OverlayCard>
-              ) : (
-                <div className="grid gap-3">
-                  {searchGroups.map(group => (
-                    <section className="grid gap-1.5" key={group.id}>
-                      <h3 className="px-0.5 text-xs font-semibold tracking-[0.08em] text-muted-foreground/80 uppercase">
-                        {group.label}
-                      </h3>
-                      {group.results.map(result => {
-                        if (result.kind === 'session') {
-                          const pinned = pinnedSessionIds.includes(result.pinId)
-
-                          return (
-                            <OverlayCard className="p-2.5" key={`${group.id}:${result.sessionId}:${result.snippet}`}>
-                              <button
-                                className="w-full text-left"
-                                onClick={() => handleSearchSelect(result)}
-                                type="button"
-                              >
-                                <div className="truncate text-sm font-medium text-foreground">{result.title}</div>
-                                <div className="mt-0.5 text-xs text-muted-foreground">
-                                  {result.detail || result.sessionId}
-                                </div>
-                                {result.snippet && (
-                                  <div className="mt-1 whitespace-pre-wrap text-xs text-muted-foreground/85">
-                                    {result.snippet}
-                                  </div>
-                                )}
-                              </button>
-                              <div className="mt-2 flex gap-1">
-                                <OverlayIconButton
-                                  onClick={event => {
-                                    event.preventDefault()
-                                    event.stopPropagation()
-                                    pinned ? unpinSession(result.pinId) : pinSession(result.pinId)
-                                  }}
-                                  title={pinned ? 'Unpin session' : 'Pin session'}
-                                >
-                                  {pinned ? (
-                                    <IconBookmarkFilled className="size-3.5" />
-                                  ) : (
-                                    <IconBookmark className="size-3.5" />
-                                  )}
-                                </OverlayIconButton>
-                                <OverlayIconButton
-                                  onClick={event => {
-                                    event.preventDefault()
-                                    event.stopPropagation()
-                                    void exportSession(result.sessionId, { title: result.title })
-                                  }}
-                                  title="Export session"
-                                >
-                                  <IconDownload className="size-3.5" />
-                                </OverlayIconButton>
-                                <OverlayIconButton
-                                  className="hover:text-destructive"
-                                  onClick={event => {
-                                    event.preventDefault()
-                                    event.stopPropagation()
-                                    void onDeleteSession(result.sessionId)
-                                  }}
-                                  title="Delete session"
-                                >
-                                  <IconTrash className="size-3.5" />
-                                </OverlayIconButton>
-                              </div>
-                            </OverlayCard>
-                          )
-                        }
-
-                        return (
-                          <button
-                            className={cn(
-                              overlayCardClass,
-                              'w-full px-3 py-2 text-left transition-colors hover:bg-[color-mix(in_srgb,var(--dt-muted)_48%,var(--dt-card))]'
-                            )}
-                            key={`${group.id}:${result.kind}:${result.title}`}
-                            onClick={() => handleSearchSelect(result)}
-                            type="button"
-                          >
-                            <div className="text-sm font-medium text-foreground">{result.title}</div>
-                            {result.detail && (
-                              <div className="mt-0.5 text-xs text-muted-foreground">{result.detail}</div>
-                            )}
-                          </button>
-                        )
-                      })}
-                    </section>
-                  ))}
-                </div>
+            <div className="flex shrink-0 items-center gap-2">
+              {section === 'sessions' && (
+                <SearchField
+                  containerClassName="max-w-[40vw]"
+                  onChange={next => setQuery(next)}
+                  placeholder="Search sessions…"
+                  value={query}
+                />
+              )}
+              {section === 'usage' && (
+                <SegmentedControl
+                  onChange={id => setUsagePeriod(Number(id) as UsagePeriod)}
+                  options={USAGE_PERIODS.map(value => ({ id: String(value), label: `${value}d` }))}
+                  value={String(usagePeriod)}
+                />
               )}
             </div>
-          ) : section === 'sessions' ? (
+          </header>
+
+          {section === 'sessions' ? (
             <div className="min-h-0 flex-1 overflow-y-auto">
               {!sessionListHasResults ? (
-                <OverlayCard className="px-3 py-4 text-sm text-muted-foreground">No sessions yet.</OverlayCard>
+                <EmptyPanel
+                  description={
+                    debouncedQuery
+                      ? 'No sessions match your search.'
+                      : 'Sessions you start will show up here to search, pin, and export.'
+                  }
+                  title={debouncedQuery ? 'No matches' : 'No sessions yet'}
+                />
               ) : (
-                <div className="grid gap-1.5">
+                <ul>
                   {filteredSessions.map(session => {
                     const pinId = sessionPinId(session)
                     const pinned = pinnedSessionIds.includes(pinId)
 
                     return (
-                      <OverlayCard className="flex items-center gap-2 px-2.5 py-2" key={session.id}>
+                      <li className="group flex items-center gap-2 py-2" key={session.id}>
                         <button
                           className="min-w-0 flex-1 text-left"
                           onClick={() => onOpenSession(session.id)}
                           type="button"
                         >
-                          <div className="truncate text-sm font-medium text-foreground">{sessionTitle(session)}</div>
-                          <div className="truncate text-xs text-muted-foreground">
+                          <div className="truncate text-[length:var(--conversation-text-font-size)] font-medium text-foreground">
+                            {sessionTitle(session)}
+                          </div>
+                          <div className="truncate text-[length:var(--conversation-caption-font-size)] text-(--ui-text-tertiary)">
                             {formatTimestamp(session.last_active || session.started_at)}
                           </div>
                         </button>
-                        <OverlayIconButton
-                          onClick={() => (pinned ? unpinSession(pinId) : pinSession(pinId))}
-                          title={pinned ? 'Unpin session' : 'Pin session'}
-                        >
-                          {pinned ? <IconBookmarkFilled className="size-3.5" /> : <IconBookmark className="size-3.5" />}
-                        </OverlayIconButton>
-                        <OverlayIconButton
-                          onClick={() => void exportSession(session.id, { session, title: sessionTitle(session) })}
-                          title="Export session"
-                        >
-                          <IconDownload className="size-3.5" />
-                        </OverlayIconButton>
-                        <OverlayIconButton
-                          className="hover:text-destructive"
-                          onClick={() => void onDeleteSession(session.id)}
-                          title="Delete session"
-                        >
-                          <IconTrash className="size-3.5" />
-                        </OverlayIconButton>
-                      </OverlayCard>
+                        <div className="flex shrink-0 items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100">
+                          <RowIconButton
+                            onClick={() => (pinned ? unpinSession(pinId) : pinSession(pinId))}
+                            title={pinned ? 'Unpin session' : 'Pin session'}
+                          >
+                            {pinned ? (
+                              <IconBookmarkFilled className="size-3.5" />
+                            ) : (
+                              <IconBookmark className="size-3.5" />
+                            )}
+                          </RowIconButton>
+                          <RowIconButton
+                            onClick={() => void exportSession(session.id, { session, title: sessionTitle(session) })}
+                            title="Export session"
+                          >
+                            <IconDownload className="size-3.5" />
+                          </RowIconButton>
+                          <RowIconButton
+                            className="hover:text-destructive"
+                            onClick={() => void onDeleteSession(session.id)}
+                            title="Delete session"
+                          >
+                            <IconTrash className="size-3.5" />
+                          </RowIconButton>
+                        </div>
+                      </li>
                     )
                   })}
-                </div>
+                </ul>
               )}
             </div>
           ) : section === 'usage' ? (
             <UsagePanel
               error={usageError}
               loading={usageLoading}
-              onPeriodChange={setUsagePeriod}
               onRefresh={() => void refreshUsage(usagePeriod)}
               period={usagePeriod}
               usage={usage}
             />
           ) : (
-            <div className="grid min-h-0 flex-1 grid-rows-[auto_minmax(0,1fr)] gap-3">
-              <OverlayCard className="p-3 text-sm">
+            <div className="grid min-h-0 flex-1 grid-rows-[auto_minmax(0,1fr)] gap-4">
+              <div className="border-b border-(--ui-stroke-tertiary) pb-4">
                 {status ? (
                   <div className="grid gap-2">
                     <div className="flex items-start justify-between gap-3">
@@ -646,49 +402,51 @@ export function CommandCenterView({
                               status.gateway_running ? 'bg-emerald-500' : 'bg-amber-500'
                             )}
                           />
-                          <span className="font-medium text-foreground">
+                          <span className="text-[length:var(--conversation-text-font-size)] font-medium text-foreground">
                             {status.gateway_running ? 'Messaging gateway running' : 'Messaging gateway stopped'}
                           </span>
                         </div>
-                        <div className="mt-1 text-xs text-muted-foreground">
+                        <div className="mt-1 text-[length:var(--conversation-caption-font-size)] text-(--ui-text-tertiary)">
                           Hermes {status.version} · Active sessions {status.active_sessions}
                         </div>
                       </div>
                       <div className="flex shrink-0 items-center gap-1.5 whitespace-nowrap">
-                        <OverlayActionButton className="h-7 px-2.5" onClick={() => void runSystemAction('restart')}>
+                        <Button onClick={() => void runSystemAction('restart')} size="xs" variant="text">
                           Restart messaging
-                        </OverlayActionButton>
-                        <OverlayActionButton className="h-7 px-2.5" onClick={() => void runSystemAction('update')}>
+                        </Button>
+                        <Button onClick={() => void runSystemAction('update')} size="xs" variant="textStrong">
                           Update Hermes
-                        </OverlayActionButton>
+                        </Button>
                       </div>
                     </div>
                     {systemAction && (
-                      <div className="text-xs text-muted-foreground">
+                      <div className="text-[length:var(--conversation-caption-font-size)] text-(--ui-text-tertiary)">
                         {systemAction.name} ·{' '}
                         {systemAction.running ? 'running' : systemAction.exit_code === 0 ? 'done' : 'failed'}
                       </div>
                     )}
                   </div>
                 ) : (
-                  <div className="text-xs text-muted-foreground">Loading status...</div>
+                  <PageLoader className="min-h-32" label="Loading status" />
                 )}
-              </OverlayCard>
+              </div>
 
-              <OverlayCard className="min-h-0 overflow-hidden p-2">
+              <div className="flex min-h-0 flex-col">
                 <div className="mb-2 flex items-center justify-between">
-                  <span className="text-xs font-medium text-muted-foreground">Recent logs</span>
+                  <span className="text-[0.625rem] font-medium uppercase tracking-[0.08em] text-(--ui-text-tertiary)">
+                    Recent logs
+                  </span>
                   {systemError && (
-                    <span className="inline-flex items-center gap-1 text-xs text-destructive">
+                    <span className="inline-flex items-center gap-1 text-[length:var(--conversation-caption-font-size)] text-destructive">
                       <AlertCircle className="size-3.5" />
                       {systemError}
                     </span>
                   )}
                 </div>
-                <pre className="h-full min-h-0 overflow-auto whitespace-pre-wrap wrap-break-word font-mono text-[0.65rem] leading-relaxed text-muted-foreground">
+                <pre className="min-h-0 flex-1 overflow-auto whitespace-pre-wrap wrap-break-word rounded-lg border border-(--ui-stroke-tertiary) bg-(--ui-bg-quinary) p-3 font-mono text-[0.65rem] leading-relaxed text-(--ui-text-tertiary)">
                   {logs.length ? logs.join('\n') : 'No logs loaded yet.'}
                 </pre>
-              </OverlayCard>
+              </div>
             </div>
           )}
         </OverlayMain>
@@ -732,13 +490,12 @@ function formatInteger(value: null | number | undefined): string {
 interface UsagePanelProps {
   error: string
   loading: boolean
-  onPeriodChange: (period: UsagePeriod) => void
   onRefresh: () => void
   period: UsagePeriod
   usage: AnalyticsResponse | null
 }
 
-function UsagePanel({ error, loading, onPeriodChange, onRefresh, period, usage }: UsagePanelProps) {
+function UsagePanel({ error, loading, onRefresh, period, usage }: UsagePanelProps) {
   const daily = useMemo(() => usage?.daily ?? [], [usage])
   const totals = usage?.totals
   const byModel = usage?.by_model ?? []
@@ -752,171 +509,162 @@ function UsagePanel({ error, loading, onPeriodChange, onRefresh, period, usage }
     return daily.reduce((acc, entry) => Math.max(acc, (entry.input_tokens || 0) + (entry.output_tokens || 0)), 1)
   }, [daily])
 
-  return (
-    <div className="grid min-h-0 flex-1 grid-rows-[auto_auto_minmax(0,1fr)] gap-3">
-      <OverlayCard className="flex flex-wrap items-center justify-between gap-2 p-3">
-        <div className="flex items-center gap-1">
-          {USAGE_PERIODS.map(value => (
-            <button
-              className={cn(
-                'h-7 rounded-md px-2.5 text-xs transition-colors',
-                value === period
-                  ? 'bg-foreground text-background'
-                  : 'text-muted-foreground hover:bg-muted/40 hover:text-foreground'
-              )}
-              key={value}
-              onClick={() => onPeriodChange(value)}
-              type="button"
-            >
-              {value}d
-            </button>
-          ))}
-        </div>
-        {error && (
-          <span className="inline-flex items-center gap-1 text-xs text-destructive">
-            <AlertCircle className="size-3.5" />
-            {error}
-          </span>
-        )}
-      </OverlayCard>
-
-      <OverlayCard className="p-3">
-        {totals ? (
-          <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
-            <UsageStat label="Sessions" value={formatInteger(totals.total_sessions)} />
-            <UsageStat label="API calls" value={formatInteger(totals.total_api_calls)} />
-            <UsageStat
-              label="Tokens in/out"
-              value={`${formatTokens(totals.total_input)} / ${formatTokens(totals.total_output)}`}
-            />
-            <UsageStat
-              hint={totals.total_actual_cost > 0 ? `actual ${formatCost(totals.total_actual_cost)}` : undefined}
-              label="Est. cost"
-              value={formatCost(totals.total_estimated_cost)}
-            />
-          </div>
-        ) : loading ? (
-          <div className="text-xs text-muted-foreground">Loading usage...</div>
+  if (!totals) {
+    return (
+      <div className="min-h-0 flex-1">
+        {loading ? (
+          <PageLoader className="min-h-48" label="Loading usage" />
         ) : (
-          <div className="text-xs text-muted-foreground">
-            No usage in the last {period} days.{' '}
-            <button className="underline underline-offset-4 decoration-current/20" onClick={onRefresh} type="button">
-              Retry
-            </button>
-          </div>
+          <EmptyPanel
+            action={
+              <Button onClick={onRefresh} size="xs" variant="outline">
+                Retry
+              </Button>
+            }
+            description={`No token, cost, or skill activity recorded in the last ${period} days.`}
+            title="No usage yet"
+          />
         )}
-      </OverlayCard>
+      </div>
+    )
+  }
 
-      <div className="grid min-h-0 grid-rows-[auto_minmax(0,1fr)] gap-3">
-        <OverlayCard className="p-3">
-          <div className="mb-2 flex items-baseline justify-between">
-            <span className="text-xs font-medium text-muted-foreground">Daily tokens</span>
-            <span className="flex items-center gap-3 text-[0.65rem] text-muted-foreground">
-              <span className="inline-flex items-center gap-1">
-                <span className="size-2 bg-[color:var(--dt-primary)]/60" /> input
-              </span>
-              <span className="inline-flex items-center gap-1">
-                <span className="size-2 bg-emerald-500/70" /> output
-              </span>
+  return (
+    <div className="flex min-h-0 flex-1 flex-col gap-5 overflow-y-auto pb-2">
+      {error && (
+        <span className="inline-flex items-center gap-1 text-[length:var(--conversation-caption-font-size)] text-destructive">
+          <AlertCircle className="size-3.5" />
+          {error}
+        </span>
+      )}
+
+      <div className="grid grid-cols-2 gap-x-4 gap-y-4 border-b border-(--ui-stroke-tertiary) pb-5 sm:grid-cols-4">
+        <UsageStat label="Sessions" value={formatInteger(totals.total_sessions)} />
+        <UsageStat label="API calls" value={formatInteger(totals.total_api_calls)} />
+        <UsageStat
+          label="Tokens in/out"
+          value={`${formatTokens(totals.total_input)} / ${formatTokens(totals.total_output)}`}
+        />
+        <UsageStat
+          hint={totals.total_actual_cost > 0 ? `actual ${formatCost(totals.total_actual_cost)}` : undefined}
+          label="Est. cost"
+          value={formatCost(totals.total_estimated_cost)}
+        />
+      </div>
+
+      <section>
+        <div className="mb-2 flex items-baseline justify-between">
+          <span className="text-[0.625rem] font-medium uppercase tracking-[0.08em] text-(--ui-text-tertiary)">
+            Daily tokens
+          </span>
+          <span className="flex items-center gap-3 text-[0.65rem] text-(--ui-text-tertiary)">
+            <span className="inline-flex items-center gap-1">
+              <span className="size-2 rounded-[1px] bg-[color:var(--dt-primary)]/60" /> input
             </span>
+            <span className="inline-flex items-center gap-1">
+              <span className="size-2 rounded-[1px] bg-emerald-500/70" /> output
+            </span>
+          </span>
+        </div>
+        {daily.length === 0 ? (
+          <div className="grid h-24 place-items-center text-[length:var(--conversation-caption-font-size)] text-(--ui-text-tertiary)">
+            No daily activity.
           </div>
-          {daily.length === 0 ? (
-            <div className="grid h-24 place-items-center text-xs text-muted-foreground">No daily activity.</div>
-          ) : (
-            <>
-              <div className="flex h-24 items-end gap-px">
-                {daily.map(entry => {
-                  const total = (entry.input_tokens || 0) + (entry.output_tokens || 0)
-                  const inputH = Math.round(((entry.input_tokens || 0) / maxTokens) * 96)
-                  const outputH = Math.round(((entry.output_tokens || 0) / maxTokens) * 96)
+        ) : (
+          <>
+            <div className="flex h-24 items-end gap-px">
+              {daily.map(entry => {
+                const inputH = Math.round(((entry.input_tokens || 0) / maxTokens) * 96)
+                const outputH = Math.round(((entry.output_tokens || 0) / maxTokens) * 96)
 
-                  return (
+                return (
+                  <div
+                    className="group relative flex h-24 min-w-0 flex-1 flex-col justify-end"
+                    key={entry.day}
+                    title={`${entry.day} · in ${formatTokens(entry.input_tokens)} · out ${formatTokens(entry.output_tokens)}`}
+                  >
                     <div
-                      className="group relative flex h-24 min-w-0 flex-1 flex-col justify-end"
-                      key={entry.day}
-                      title={`${entry.day} · in ${formatTokens(entry.input_tokens)} · out ${formatTokens(entry.output_tokens)}`}
-                    >
-                      <div
-                        className="w-full bg-[color:var(--dt-primary)]/50"
-                        style={{ height: Math.max(inputH, entry.input_tokens > 0 ? 1 : 0) }}
-                      />
-                      <div
-                        className="w-full bg-emerald-500/60"
-                        style={{ height: Math.max(outputH, entry.output_tokens > 0 ? 1 : 0) }}
-                      />
-                    </div>
-                  )
-                })}
-              </div>
-              <div className="mt-1 flex justify-between text-[0.6rem] text-muted-foreground/70">
-                <span>{daily[0]?.day}</span>
-                <span>{daily[daily.length - 1]?.day}</span>
-              </div>
-            </>
-          )}
-        </OverlayCard>
+                      className="w-full rounded-t-[1px] bg-[color:var(--dt-primary)]/50"
+                      style={{ height: Math.max(inputH, entry.input_tokens > 0 ? 1 : 0) }}
+                    />
+                    <div
+                      className="w-full bg-emerald-500/60"
+                      style={{ height: Math.max(outputH, entry.output_tokens > 0 ? 1 : 0) }}
+                    />
+                  </div>
+                )
+              })}
+            </div>
+            <div className="mt-1 flex justify-between text-[0.6rem] text-(--ui-text-tertiary)">
+              <span>{daily[0]?.day}</span>
+              <span>{daily[daily.length - 1]?.day}</span>
+            </div>
+          </>
+        )}
+      </section>
 
-        <OverlayCard className="min-h-0 overflow-auto p-2">
-          <div className="grid gap-3 sm:grid-cols-2">
-            <section className="min-w-0">
-              <div className="mb-1.5 text-[0.7rem] font-medium uppercase tracking-wide text-muted-foreground">
-                Top models
-              </div>
-              {byModel.length === 0 ? (
-                <div className="text-xs text-muted-foreground">No model usage yet.</div>
-              ) : (
-                <ul className="space-y-1">
-                  {byModel.slice(0, 6).map(entry => (
-                    <li
-                      className="flex items-center justify-between gap-2 rounded px-1.5 py-1 text-xs hover:bg-muted/40"
-                      key={entry.model}
-                    >
-                      <span className="min-w-0 truncate font-mono text-[0.7rem] text-foreground">{entry.model}</span>
-                      <span className="shrink-0 text-[0.65rem] text-muted-foreground">
-                        {formatTokens((entry.input_tokens || 0) + (entry.output_tokens || 0))} ·{' '}
-                        {formatCost(entry.estimated_cost)}
-                      </span>
-                    </li>
-                  ))}
-                </ul>
-              )}
-            </section>
-
-            <section className="min-w-0">
-              <div className="mb-1.5 text-[0.7rem] font-medium uppercase tracking-wide text-muted-foreground">
-                Top skills
-              </div>
-              {topSkills.length === 0 ? (
-                <div className="text-xs text-muted-foreground">No skill activity yet.</div>
-              ) : (
-                <ul className="space-y-1">
-                  {topSkills.slice(0, 6).map(entry => (
-                    <li
-                      className="flex items-center justify-between gap-2 rounded px-1.5 py-1 text-xs hover:bg-muted/40"
-                      key={entry.skill}
-                    >
-                      <span className="min-w-0 truncate font-mono text-[0.7rem] text-foreground">{entry.skill}</span>
-                      <span className="shrink-0 text-[0.65rem] text-muted-foreground">
-                        {entry.total_count.toLocaleString()} actions
-                      </span>
-                    </li>
-                  ))}
-                </ul>
-              )}
-            </section>
-          </div>
-        </OverlayCard>
+      <div className="grid min-h-0 gap-x-8 gap-y-5 border-t border-(--ui-stroke-tertiary) pt-5 sm:grid-cols-2">
+        <UsageList
+          emptyLabel="No model usage yet."
+          rows={byModel.slice(0, 6).map(entry => ({
+            key: entry.model,
+            label: entry.model,
+            value: `${formatTokens((entry.input_tokens || 0) + (entry.output_tokens || 0))} · ${formatCost(entry.estimated_cost)}`
+          }))}
+          title="Top models"
+        />
+        <UsageList
+          emptyLabel="No skill activity yet."
+          rows={topSkills.slice(0, 6).map(entry => ({
+            key: entry.skill,
+            label: entry.skill,
+            value: `${entry.total_count.toLocaleString()} actions`
+          }))}
+          title="Top skills"
+        />
       </div>
     </div>
   )
 }
 
+function UsageList({
+  emptyLabel,
+  rows,
+  title
+}: {
+  emptyLabel: string
+  rows: Array<{ key: string; label: string; value: string }>
+  title: string
+}) {
+  return (
+    <section className="min-w-0">
+      <div className="mb-1.5 text-[0.625rem] font-medium uppercase tracking-[0.08em] text-(--ui-text-tertiary)">
+        {title}
+      </div>
+      {rows.length === 0 ? (
+        <div className="text-[length:var(--conversation-caption-font-size)] text-(--ui-text-tertiary)">
+          {emptyLabel}
+        </div>
+      ) : (
+        <ul>
+          {rows.map(row => (
+            <li className="flex items-center justify-between gap-2 py-1.5" key={row.key}>
+              <span className="min-w-0 truncate font-mono text-[0.7rem] text-foreground">{row.label}</span>
+              <span className="shrink-0 text-[0.65rem] text-(--ui-text-tertiary)">{row.value}</span>
+            </li>
+          ))}
+        </ul>
+      )}
+    </section>
+  )
+}
+
 function UsageStat({ hint, label, value }: { hint?: string; label: string; value: string }) {
   return (
     <div className="min-w-0">
-      <div className="text-[0.65rem] font-medium uppercase tracking-[0.12em] text-muted-foreground">{label}</div>
-      <div className="mt-0.5 truncate text-sm font-semibold tracking-tight text-foreground">{value}</div>
-      {hint && <div className="mt-0.5 truncate text-[0.62rem] text-muted-foreground/80">{hint}</div>}
+      <div className="text-[0.625rem] font-medium uppercase tracking-[0.12em] text-(--ui-text-tertiary)">{label}</div>
+      <div className="mt-1 truncate text-base font-semibold tracking-tight text-foreground">{value}</div>
+      {hint && <div className="mt-0.5 truncate text-[0.62rem] text-(--ui-text-tertiary)">{hint}</div>}
     </div>
   )
 }
diff --git a/apps/desktop/src/app/command-palette/index.tsx b/apps/desktop/src/app/command-palette/index.tsx
new file mode 100644
index 00000000000..8b98b50b8f8
--- /dev/null
+++ b/apps/desktop/src/app/command-palette/index.tsx
@@ -0,0 +1,462 @@
+import { useStore } from '@nanostores/react'
+import { Dialog as DialogPrimitive } from 'radix-ui'
+import { useEffect, useMemo, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from '@/components/ui/command'
+import { getEnvVars, getHermesConfigRecord, listSessions } from '@/hermes'
+import { sessionTitle } from '@/lib/chat-runtime'
+import {
+  Activity,
+  Archive,
+  BarChart3,
+  Check,
+  ChevronLeft,
+  ChevronRight,
+  Clock,
+  Cpu,
+  Globe,
+  type IconComponent,
+  Info,
+  KeyRound,
+  MessageCircle,
+  Monitor,
+  Moon,
+  Package,
+  Palette,
+  Plus,
+  Settings,
+  Sun,
+  Users,
+  Wrench
+} from '@/lib/icons'
+import { cn } from '@/lib/utils'
+import { $commandPaletteOpen, closeCommandPalette, setCommandPaletteOpen } from '@/store/command-palette'
+import { type ThemeMode, useTheme } from '@/themes/context'
+
+import {
+  AGENTS_ROUTE,
+  ARTIFACTS_ROUTE,
+  COMMAND_CENTER_ROUTE,
+  CRON_ROUTE,
+  MESSAGING_ROUTE,
+  NEW_CHAT_ROUTE,
+  PROFILES_ROUTE,
+  SETTINGS_ROUTE,
+  SKILLS_ROUTE
+} from '../routes'
+import { FIELD_LABELS, SECTIONS } from '../settings/constants'
+import { prettyName } from '../settings/helpers'
+
+interface PaletteItem {
+  active?: boolean
+  icon: IconComponent
+  id: string
+  /** Keep the palette open after running (live-preview pickers like theme/mode). */
+  keepOpen?: boolean
+  keywords?: string[]
+  label: string
+  /** Action to run when selected. Mutually exclusive with `to`. */
+  run?: () => void
+  /** Open a nested palette page (VS Code-style "choose X → options"). */
+  to?: string
+}
+
+interface PaletteGroup {
+  heading: string
+  items: PaletteItem[]
+}
+
+/** A nested page reachable from a root item via `to`. */
+interface PalettePage {
+  groups: PaletteGroup[]
+  placeholder: string
+  title: string
+}
+
+const NON_CONFIG_SETTINGS: ReadonlyArray<{ icon: IconComponent; keywords?: string[]; label: string; tab: string }> = [
+  { icon: Globe, keywords: ['connection', 'messaging'], label: 'Gateway', tab: 'gateway' },
+  { icon: KeyRound, keywords: ['api', 'secrets', 'tokens', 'credentials'], label: 'API Keys', tab: 'keys' },
+  { icon: Wrench, keywords: ['servers', 'tools'], label: 'MCP', tab: 'mcp' },
+  { icon: Archive, keywords: ['history', 'archived'], label: 'Archived Chats', tab: 'sessions' },
+  { icon: Info, keywords: ['version', 'about'], label: 'About', tab: 'about' }
+]
+
+const THEME_MODES: ReadonlyArray<{ icon: IconComponent; label: string; mode: ThemeMode }> = [
+  { icon: Sun, label: 'Light', mode: 'light' },
+  { icon: Moon, label: 'Dark', mode: 'dark' },
+  { icon: Monitor, label: 'System', mode: 'system' }
+]
+
+function fieldLabel(key: string): string {
+  return FIELD_LABELS[key] ?? prettyName(key.split('.').pop() ?? key)
+}
+
+export function CommandPalette() {
+  const open = useStore($commandPaletteOpen)
+  const navigate = useNavigate()
+  const { availableThemes, mode, resolvedMode, setMode, setTheme, themeName } = useTheme()
+  const [search, setSearch] = useState('')
+  const [page, setPage] = useState<string | null>(null)
+  const [envKeys, setEnvKeys] = useState<Array<{ description?: string; key: string }>>([])
+  const [mcpServers, setMcpServers] = useState<string[]>([])
+  const [archivedSessions, setArchivedSessions] = useState<Array<{ id: string; preview?: string; title: string }>>([])
+
+  useEffect(() => {
+    if (!open) {
+      setSearch('')
+      setPage(null)
+
+      return
+    }
+
+    let cancelled = false
+
+    void (async () => {
+      try {
+        const [vars, config, sessions] = await Promise.all([
+          getEnvVars(),
+          getHermesConfigRecord(),
+          listSessions(200, 0, 'only')
+        ])
+
+        if (cancelled) {
+          return
+        }
+
+        setEnvKeys(Object.entries(vars).map(([key, info]) => ({ description: info.description, key })))
+
+        const rawServers = config?.mcp_servers
+
+        const servers =
+          rawServers && typeof rawServers === 'object' && !Array.isArray(rawServers)
+            ? Object.keys(rawServers as Record<string, unknown>).sort()
+            : []
+
+        setMcpServers(servers)
+
+        setArchivedSessions(
+          sessions.sessions.map(session => ({
+            id: session.id,
+            preview: session.preview ?? undefined,
+            title: sessionTitle(session)
+          }))
+        )
+      } catch {
+        // Best-effort: deep-link sources just stay empty if a load fails.
+      }
+    })()
+
+    return () => void (cancelled = true)
+  }, [open])
+
+  const baseGroups = useMemo<PaletteGroup[]>(() => {
+    const go = (path: string) => () => navigate(path)
+    const settingsTab = (tab: string) => `${SETTINGS_ROUTE}?tab=${tab}`
+
+    return [
+      {
+        heading: 'Go to',
+        items: [
+          { icon: Plus, id: 'nav-new', keywords: ['chat', 'create'], label: 'New session', run: go(NEW_CHAT_ROUTE) },
+          { icon: Settings, id: 'nav-settings', label: 'Settings', run: go(SETTINGS_ROUTE) },
+          {
+            icon: Wrench,
+            id: 'nav-skills',
+            keywords: ['tools', 'toolsets', 'providers'],
+            label: 'Skills & Tools',
+            run: go(SKILLS_ROUTE)
+          },
+          { icon: MessageCircle, id: 'nav-messaging', label: 'Messaging', run: go(MESSAGING_ROUTE) },
+          { icon: Package, id: 'nav-artifacts', label: 'Artifacts', run: go(ARTIFACTS_ROUTE) },
+          { icon: Clock, id: 'nav-cron', keywords: ['schedule', 'jobs'], label: 'Cron', run: go(CRON_ROUTE) },
+          { icon: Users, id: 'nav-profiles', label: 'Profiles', run: go(PROFILES_ROUTE) },
+          { icon: Cpu, id: 'nav-agents', label: 'Agents', run: go(AGENTS_ROUTE) }
+        ]
+      },
+      {
+        heading: 'Command Center',
+        items: [
+          {
+            icon: Archive,
+            id: 'cc-sessions',
+            keywords: ['command center', 'sessions', 'pin'],
+            label: 'Sessions',
+            run: go(`${COMMAND_CENTER_ROUTE}?section=sessions`)
+          },
+          {
+            icon: Activity,
+            id: 'cc-system',
+            keywords: ['command center', 'system', 'status', 'logs'],
+            label: 'System',
+            run: go(`${COMMAND_CENTER_ROUTE}?section=system`)
+          },
+          {
+            icon: BarChart3,
+            id: 'cc-usage',
+            keywords: ['command center', 'usage', 'tokens', 'cost'],
+            label: 'Usage',
+            run: go(`${COMMAND_CENTER_ROUTE}?section=usage`)
+          }
+        ]
+      },
+      {
+        heading: 'Settings',
+        items: [
+          ...SECTIONS.map(section => ({
+            icon: section.icon,
+            id: `set-config-${section.id}`,
+            keywords: ['settings', section.label],
+            label: section.label,
+            run: go(settingsTab(`config:${section.id}`))
+          })),
+          ...NON_CONFIG_SETTINGS.map(entry => ({
+            icon: entry.icon,
+            id: `set-${entry.tab}`,
+            keywords: ['settings', ...(entry.keywords ?? [])],
+            label: entry.label,
+            run: go(settingsTab(entry.tab))
+          }))
+        ]
+      },
+      {
+        heading: 'Appearance',
+        items: [
+          {
+            icon: Palette,
+            id: 'appearance-theme',
+            keywords: ['theme', 'appearance', 'color', 'palette', 'skin', 'dark', 'light', 'look'],
+            label: 'Change theme…',
+            to: 'theme'
+          },
+          {
+            icon: Sun,
+            id: 'appearance-mode',
+            keywords: ['appearance', 'color mode', 'brightness', 'dark', 'light', 'system'],
+            label: 'Change color mode…',
+            to: 'color-mode'
+          }
+        ]
+      }
+    ]
+  }, [navigate])
+
+  // The long, granular lists (settings fields, API keys, MCP servers, archived
+  // chats) only surface once the user types — otherwise they'd bury the
+  // navigation entries on an empty palette.
+  const searchGroups = useMemo<PaletteGroup[]>(() => {
+    if (!search.trim()) {
+      return []
+    }
+
+    const go = (path: string) => () => navigate(path)
+    const result: PaletteGroup[] = []
+
+    const fieldItems = SECTIONS.flatMap(section =>
+      section.keys.map(key => ({
+        icon: section.icon,
+        id: `field-${key}`,
+        keywords: ['settings', key, section.label],
+        label: `${section.label}: ${fieldLabel(key)}`,
+        run: go(`${SETTINGS_ROUTE}?tab=config:${section.id}&field=${encodeURIComponent(key)}`)
+      }))
+    )
+
+    result.push({ heading: 'Settings fields', items: fieldItems })
+
+    if (envKeys.length > 0) {
+      result.push({
+        heading: 'API keys',
+        items: envKeys.map(entry => ({
+          icon: KeyRound,
+          id: `key-${entry.key}`,
+          keywords: ['api', 'secret', 'token', ...(entry.description ? [entry.description] : [])],
+          label: entry.key,
+          run: go(`${SETTINGS_ROUTE}?tab=keys&key=${encodeURIComponent(entry.key)}`)
+        }))
+      })
+    }
+
+    if (mcpServers.length > 0) {
+      result.push({
+        heading: 'MCP servers',
+        items: mcpServers.map(name => ({
+          icon: Wrench,
+          id: `mcp-${name}`,
+          keywords: ['mcp', 'server', 'tool'],
+          label: name,
+          run: go(`${SETTINGS_ROUTE}?tab=mcp&server=${encodeURIComponent(name)}`)
+        }))
+      })
+    }
+
+    if (archivedSessions.length > 0) {
+      result.push({
+        heading: 'Archived chats',
+        items: archivedSessions.map(session => ({
+          icon: Archive,
+          id: `archived-${session.id}`,
+          keywords: ['archived', 'chat', 'session', ...(session.preview ? [session.preview] : [])],
+          label: session.title,
+          run: go(`${SETTINGS_ROUTE}?tab=sessions&session=${encodeURIComponent(session.id)}`)
+        }))
+      })
+    }
+
+    return result
+  }, [archivedSessions, envKeys, mcpServers, navigate, search])
+
+  const groups = useMemo(() => [...baseGroups, ...searchGroups], [baseGroups, searchGroups])
+
+  // Nested palette pages (VS Code-style submenus). Reusable: add an entry here
+  // and point a root item at it via `to`.
+  const subPages = useMemo<Record<string, PalettePage>>(
+    () => ({
+      theme: {
+        title: 'Theme',
+        placeholder: 'Choose a theme…',
+        // Skins aren't inherently light/dark — the same skin renders in either
+        // mode. Group by appearance so picking an entry sets skin + mode at
+        // once, and keep the palette open so each pick previews live.
+        groups: (['light', 'dark'] as const).map(groupMode => ({
+          heading: groupMode === 'light' ? 'Light' : 'Dark',
+          items: availableThemes.map(theme => ({
+            active: themeName === theme.name && resolvedMode === groupMode,
+            icon: groupMode === 'light' ? Sun : Moon,
+            id: `theme-${theme.name}-${groupMode}`,
+            keepOpen: true,
+            keywords: ['theme', 'appearance', 'palette', groupMode, theme.label, theme.description ?? ''],
+            label: theme.label,
+            run: () => {
+              setTheme(theme.name)
+              setMode(groupMode)
+            }
+          }))
+        }))
+      },
+      'color-mode': {
+        title: 'Color mode',
+        placeholder: 'Choose color mode…',
+        groups: [
+          {
+            heading: 'Color mode',
+            items: THEME_MODES.map(entry => ({
+              active: mode === entry.mode,
+              icon: entry.icon,
+              id: `mode-${entry.mode}`,
+              keepOpen: true,
+              keywords: ['appearance', 'brightness', entry.label],
+              label: entry.label,
+              run: () => setMode(entry.mode)
+            }))
+          }
+        ]
+      }
+    }),
+    [availableThemes, mode, resolvedMode, setMode, setTheme, themeName]
+  )
+
+  const activePage = page ? subPages[page] : null
+  const visibleGroups = activePage ? activePage.groups : groups
+  const placeholder = activePage ? activePage.placeholder : 'Search commands and settings...'
+
+  const handleSelect = (item: PaletteItem) => {
+    if (item.to) {
+      setPage(item.to)
+      setSearch('')
+
+      return
+    }
+
+    item.run?.()
+
+    if (!item.keepOpen) {
+      closeCommandPalette()
+    }
+  }
+
+  return (
+    <DialogPrimitive.Root onOpenChange={setCommandPaletteOpen} open={open}>
+      <DialogPrimitive.Portal>
+        <DialogPrimitive.Overlay className="fixed inset-0 z-[200] bg-black/15 backdrop-blur-[1px] data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0" />
+        <DialogPrimitive.Content
+          aria-describedby={undefined}
+          className="fixed left-1/2 top-[14vh] z-[210] w-[min(40rem,calc(100vw-2rem))] -translate-x-1/2 overflow-hidden rounded-xl border border-(--ui-stroke-secondary) bg-(--ui-chat-bubble-background) shadow-lg duration-150 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-top-2 data-[state=open]:zoom-in-95"
+        >
+          <DialogPrimitive.Title className="sr-only">Command palette</DialogPrimitive.Title>
+          <Command className="bg-transparent" loop>
+            {activePage && (
+              <button
+                className="flex w-full items-center gap-1.5 border-b border-border px-3 py-1.5 text-left text-xs text-muted-foreground transition-colors hover:text-foreground"
+                onClick={() => setPage(null)}
+                type="button"
+              >
+                <ChevronLeft className="size-3.5" />
+                <span>Back</span>
+                <span className="text-muted-foreground/50">/</span>
+                <span className="font-medium text-foreground">{activePage.title}</span>
+              </button>
+            )}
+            <CommandInput
+              onKeyDown={event => {
+                if (!activePage) {
+                  return
+                }
+
+                // In a submenu: Esc and empty-input Backspace step back out
+                // instead of closing the whole palette.
+                if (event.key === 'Escape' || (event.key === 'Backspace' && search === '')) {
+                  event.preventDefault()
+                  event.stopPropagation()
+                  setPage(null)
+                }
+              }}
+              onValueChange={setSearch}
+              placeholder={placeholder}
+              value={search}
+            />
+            <CommandList className="max-h-[min(24rem,60vh)]">
+              <CommandEmpty>No results found.</CommandEmpty>
+              {visibleGroups.map(group => (
+                <CommandGroup
+                  className="**:[[cmdk-group-heading]]:uppercase **:[[cmdk-group-heading]]:tracking-wider **:[[cmdk-group-heading]]:text-[0.6875rem] **:[[cmdk-group-heading]]:text-muted-foreground/70"
+                  heading={group.heading}
+                  key={group.heading}
+                >
+                  {group.items.map(item => {
+                    const Icon = item.icon
+
+                    return (
+                      <CommandItem
+                        className="gap-2.5"
+                        key={item.id}
+                        keywords={item.keywords}
+                        onSelect={() => handleSelect(item)}
+                        value={`${item.label} ${item.keywords?.join(' ') ?? ''} ${item.id}`}
+                      >
+                        <Icon className="size-4 shrink-0 text-muted-foreground" />
+                        <span className="truncate">{item.label}</span>
+                        {item.to ? (
+                          <ChevronRight className="ml-auto size-4 shrink-0 text-muted-foreground/70" />
+                        ) : (
+                          <Check className={cn('ml-auto size-4 text-foreground', !item.active && 'invisible')} />
+                        )}
+                      </CommandItem>
+                    )
+                  })}
+                </CommandGroup>
+              ))}
+            </CommandList>
+          </Command>
+        </DialogPrimitive.Content>
+      </DialogPrimitive.Portal>
+    </DialogPrimitive.Root>
+  )
+}
diff --git a/apps/desktop/src/app/cron/index.tsx b/apps/desktop/src/app/cron/index.tsx
index 43c27277178..9929b92f785 100644
--- a/apps/desktop/src/app/cron/index.tsx
+++ b/apps/desktop/src/app/cron/index.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 
 import { PageLoader } from '@/components/page-loader'
@@ -13,6 +12,7 @@ import {
   DialogTitle
 } from '@/components/ui/dialog'
 import { Input } from '@/components/ui/input'
+import { SearchField } from '@/components/ui/search-field'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { Textarea } from '@/components/ui/textarea'
 import {
@@ -29,8 +29,8 @@ import { AlertTriangle, Clock, Pause, Pencil, Play, Trash2, Zap } from '@/lib/ic
 import { cn } from '@/lib/utils'
 import { notify, notifyError } from '@/store/notifications'
 
-import { PageSearchShell } from '../page-search-shell'
-import type { SetStatusbarItemGroup } from '../shell/statusbar-controls'
+import { useRefreshHotkey } from '../hooks/use-refresh-hotkey'
+import { OverlayView } from '../overlays/overlay-view'
 
 const DEFAULT_DELIVER = 'local'
 
@@ -305,14 +305,13 @@ function matchesQuery(job: CronJob, q: string): boolean {
   )
 }
 
-interface CronViewProps extends React.ComponentProps<'section'> {
-  setStatusbarItemGroup?: SetStatusbarItemGroup
+interface CronViewProps {
+  onClose: () => void
 }
 
-export function CronView({ setStatusbarItemGroup: _setStatusbarItemGroup, ...props }: CronViewProps) {
+export function CronView({ onClose }: CronViewProps) {
   const [jobs, setJobs] = useState<CronJob[] | null>(null)
   const [query, setQuery] = useState('')
-  const [refreshing, setRefreshing] = useState(false)
   const [busyJobId, setBusyJobId] = useState<null | string>(null)
 
   const [editor, setEditor] = useState<EditorState>({ mode: 'closed' })
@@ -320,18 +319,16 @@ export function CronView({ setStatusbarItemGroup: _setStatusbarItemGroup, ...pro
   const [deleting, setDeleting] = useState(false)
 
   const refresh = useCallback(async () => {
-    setRefreshing(true)
-
     try {
       const result = await getCronJobs()
       setJobs(result)
     } catch (err) {
       notifyError(err, 'Failed to load cron jobs')
-    } finally {
-      setRefreshing(false)
     }
   }, [])
 
+  useRefreshHotkey(refresh)
+
   useEffect(() => {
     void refresh()
   }, [refresh])
@@ -426,29 +423,19 @@ export function CronView({ setStatusbarItemGroup: _setStatusbarItemGroup, ...pro
   }
 
   return (
-    <PageSearchShell
-      {...props}
-      onSearchChange={setQuery}
-      searchPlaceholder="Search cron jobs..."
-      searchTrailingAction={
-        <Button
-          aria-label={refreshing ? 'Refreshing cron jobs' : 'Refresh cron jobs'}
-          className="text-(--ui-text-tertiary) hover:bg-(--chrome-action-hover) hover:text-foreground"
-          disabled={refreshing}
-          onClick={() => void refresh()}
-          size="icon-xs"
-          title={refreshing ? 'Refreshing cron jobs' : 'Refresh cron jobs'}
-          type="button"
-          variant="ghost"
-        >
-          <Codicon name="refresh" size="0.875rem" spinning={refreshing} />
-        </Button>
-      }
-      searchValue={query}
-    >
-      {!jobs ? (
-        <PageLoader label="Loading cron jobs..." />
-      ) : visibleJobs.length === 0 ? (
+    <OverlayView closeLabel="Close cron" onClose={onClose}>
+      <div className="flex min-h-0 flex-1 flex-col pt-[calc(var(--titlebar-height)+0.5rem)]">
+        <div className="mx-auto flex w-full max-w-4xl items-center gap-2 px-4 pb-2">
+          <SearchField
+            containerClassName="max-w-[60vw]"
+            onChange={setQuery}
+            placeholder="Search cron jobs…"
+            value={query}
+          />
+        </div>
+        {!jobs ? (
+          <PageLoader label="Loading cron jobs..." />
+        ) : visibleJobs.length === 0 ? (
         // Empty state owns the primary "create" CTA — we used to also have
         // one in the filters bar but it was redundant. Only show the button
         // when there are zero jobs total; the search-empty case ("No
@@ -463,36 +450,37 @@ export function CronView({ setStatusbarItemGroup: _setStatusbarItemGroup, ...pro
           onAction={totalCount === 0 ? () => setEditor({ mode: 'create' }) : undefined}
           title={totalCount === 0 ? 'No scheduled jobs yet' : 'No matches'}
         />
-      ) : (
-        <div className="h-full overflow-y-auto px-4 py-3">
-          {/* Inline header replaces the old top-bar "New cron" button. We
-              still need a single, always-visible affordance to add a job
-              when the list is non-empty (rows themselves only expose
-              edit/pause/trigger/delete). */}
-          <div className="mb-2 flex items-center justify-between">
-            <span className="text-[0.7rem] uppercase tracking-wide text-muted-foreground">
-              {enabledCount}/{totalCount} active
-            </span>
-            <Button onClick={() => setEditor({ mode: 'create' })} size="sm">
-              <Codicon name="add" />
-              New cron
-            </Button>
+        ) : (
+          <div className="mx-auto w-full max-w-4xl min-h-0 flex-1 overflow-y-auto px-4 py-3">
+            {/* Inline header replaces the old top-bar "New cron" button. We
+                still need a single, always-visible affordance to add a job
+                when the list is non-empty (rows themselves only expose
+                edit/pause/trigger/delete). */}
+            <div className="mb-2 flex items-center justify-between">
+              <span className="text-[0.7rem] uppercase tracking-wide text-muted-foreground">
+                {enabledCount}/{totalCount} active
+              </span>
+              <Button onClick={() => setEditor({ mode: 'create' })} size="sm">
+                <Codicon name="add" />
+                New cron
+              </Button>
+            </div>
+            <div>
+              {visibleJobs.map(job => (
+                <CronJobRow
+                  busy={busyJobId === job.id}
+                  job={job}
+                  key={job.id}
+                  onDelete={() => setPendingDelete(job)}
+                  onEdit={() => setEditor({ mode: 'edit', job })}
+                  onPauseResume={() => void handlePauseResume(job)}
+                  onTrigger={() => void handleTrigger(job)}
+                />
+              ))}
+            </div>
           </div>
-          <div className="divide-y divide-border/40 rounded-lg border border-border/40 bg-background/70">
-            {visibleJobs.map(job => (
-              <CronJobRow
-                busy={busyJobId === job.id}
-                job={job}
-                key={job.id}
-                onDelete={() => setPendingDelete(job)}
-                onEdit={() => setEditor({ mode: 'edit', job })}
-                onPauseResume={() => void handlePauseResume(job)}
-                onTrigger={() => void handleTrigger(job)}
-              />
-            ))}
-          </div>
-        </div>
-      )}
+        )}
+      </div>
       <CronEditorDialog editor={editor} onClose={() => setEditor({ mode: 'closed' })} onSave={handleEditorSave} />
 
       <Dialog onOpenChange={open => !open && !deleting && setPendingDelete(null)} open={pendingDelete !== null}>
@@ -519,7 +507,7 @@ export function CronView({ setStatusbarItemGroup: _setStatusbarItemGroup, ...pro
           </DialogFooter>
         </DialogContent>
       </Dialog>
-    </PageSearchShell>
+    </OverlayView>
   )
 }
 
diff --git a/apps/desktop/src/app/desktop-controller.tsx b/apps/desktop/src/app/desktop-controller.tsx
index 1647abda365..0a46319799e 100644
--- a/apps/desktop/src/app/desktop-controller.tsx
+++ b/apps/desktop/src/app/desktop-controller.tsx
@@ -129,9 +129,11 @@ export function DesktopController() {
     closeOverlayToPreviousRoute,
     commandCenterInitialSection,
     commandCenterOpen,
+    cronOpen,
     currentView,
     openAgents,
     openCommandCenterSection,
+    profilesOpen,
     settingsOpen,
     toggleCommandCenter
   } = useOverlayRouting()
@@ -612,7 +614,6 @@ export function DesktopController() {
             initialSection={commandCenterInitialSection}
             onClose={closeOverlayToPreviousRoute}
             onDeleteSession={removeSession}
-            onNavigateRoute={path => navigate(path)}
             onOpenSession={sessionId => navigate(sessionRoute(sessionId))}
           />
         </Suspense>
@@ -623,6 +624,18 @@ export function DesktopController() {
           <AgentsView onClose={closeOverlayToPreviousRoute} />
         </Suspense>
       )}
+
+      {cronOpen && (
+        <Suspense fallback={null}>
+          <CronView onClose={closeOverlayToPreviousRoute} />
+        </Suspense>
+      )}
+
+      {profilesOpen && (
+        <Suspense fallback={null}>
+          <ProfilesView onClose={closeOverlayToPreviousRoute} />
+        </Suspense>
+      )}
     </>
   )
 
@@ -751,25 +764,8 @@ export function DesktopController() {
             }
             path="artifacts"
           />
-          <Route
-            element={
-              <Suspense fallback={null}>
-                <CronView setStatusbarItemGroup={setStatusbarItemGroup} />
-              </Suspense>
-            }
-            path="cron"
-          />
-          <Route
-            element={
-              <Suspense fallback={null}>
-                <ProfilesView
-                  setStatusbarItemGroup={setStatusbarItemGroup}
-                  setTitlebarToolGroup={setTitlebarToolGroup}
-                />
-              </Suspense>
-            }
-            path="profiles"
-          />
+          <Route element={null} path="cron" />
+          <Route element={null} path="profiles" />
           <Route element={null} path="settings" />
           <Route element={null} path="command-center" />
           <Route element={null} path="agents" />
diff --git a/apps/desktop/src/app/hooks/use-refresh-hotkey.ts b/apps/desktop/src/app/hooks/use-refresh-hotkey.ts
new file mode 100644
index 00000000000..3e1490e4158
--- /dev/null
+++ b/apps/desktop/src/app/hooks/use-refresh-hotkey.ts
@@ -0,0 +1,45 @@
+import { useEffect, useRef } from 'react'
+
+/**
+ * Binds the bare `r` key to a refresh action while the calling view is mounted.
+ * Ignored when a modifier is held, the event repeats, or focus is in an
+ * editable field (so typing "r" in a search/input never triggers it).
+ */
+export function useRefreshHotkey(onRefresh: () => void, enabled = true) {
+  const ref = useRef(onRefresh)
+  ref.current = onRefresh
+
+  useEffect(() => {
+    if (!enabled) {
+      return
+    }
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== 'r' && event.key !== 'R') {
+        return
+      }
+
+      if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey || event.repeat) {
+        return
+      }
+
+      const target = event.target as HTMLElement | null
+
+      if (
+        target?.isContentEditable ||
+        target instanceof HTMLInputElement ||
+        target instanceof HTMLTextAreaElement ||
+        target instanceof HTMLSelectElement
+      ) {
+        return
+      }
+
+      event.preventDefault()
+      ref.current()
+    }
+
+    window.addEventListener('keydown', onKeyDown)
+
+    return () => window.removeEventListener('keydown', onKeyDown)
+  }, [enabled])
+}
diff --git a/apps/desktop/src/app/layout-constants.ts b/apps/desktop/src/app/layout-constants.ts
new file mode 100644
index 00000000000..fff56d1e2b6
--- /dev/null
+++ b/apps/desktop/src/app/layout-constants.ts
@@ -0,0 +1,13 @@
+// Responsive horizontal gutter for primary content bodies (settings right side,
+// skills, artifacts, command center / sessions). Ratio-based so it scales with
+// the window, but clamped so it never collapses on narrow widths or runs away
+// on ultrawide displays. Headers/tabs intentionally keep their own tighter
+// padding.
+//
+// NOTE: these must stay literal strings — Tailwind's scanner only picks up
+// complete class names, so do not build them via template interpolation.
+export const PAGE_INSET_X = 'px-[clamp(1.25rem,4vw,4rem)]'
+
+// Matching negative inline-margin to bleed an element (e.g. a sticky header bar)
+// out to the gutter edges before re-applying PAGE_INSET_X.
+export const PAGE_INSET_NEG_X = '-mx-[clamp(1.25rem,4vw,4rem)]'
diff --git a/apps/desktop/src/app/messaging/index.tsx b/apps/desktop/src/app/messaging/index.tsx
index 93bfda59cc2..4922838da6c 100644
--- a/apps/desktop/src/app/messaging/index.tsx
+++ b/apps/desktop/src/app/messaging/index.tsx
@@ -17,6 +17,7 @@ import { AlertTriangle, ExternalLink, Save, Trash2 } from '@/lib/icons'
 import { cn } from '@/lib/utils'
 import { notify, notifyError } from '@/store/notifications'
 
+import { useRefreshHotkey } from '../hooks/use-refresh-hotkey'
 import { useRouteEnumParam } from '../hooks/use-route-enum-param'
 import { PageSearchShell } from '../page-search-shell'
 import type { SetStatusbarItemGroup } from '../shell/statusbar-controls'
@@ -213,6 +214,8 @@ export function MessagingView({ setStatusbarItemGroup: _setStatusbarItemGroup, .
     }
   }, [])
 
+  useRefreshHotkey(() => void refreshPlatforms())
+
   useEffect(() => {
     void refreshPlatforms()
   }, [refreshPlatforms])
@@ -344,14 +347,13 @@ export function MessagingView({ setStatusbarItemGroup: _setStatusbarItemGroup, .
       {...props}
       onSearchChange={setQuery}
       searchPlaceholder="Search messaging..."
-      searchTrailingAction={null}
       searchValue={query}
     >
       {!platforms ? (
         <PageLoader label="Loading messaging platforms..." />
       ) : (
         <div className="grid h-full min-h-0 grid-cols-1 lg:grid-cols-[14rem_minmax(0,1fr)]">
-          <aside className="min-h-0 overflow-y-auto border-b border-(--ui-stroke-tertiary) p-2 lg:border-b-0 lg:border-r">
+          <aside className="min-h-0 overflow-y-auto p-2">
             <ul className="space-y-1">
               {visiblePlatforms.map(platform => (
                 <li key={platform.id}>
@@ -406,8 +408,8 @@ function PlatformRow({
       className={cn(
         'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left transition-colors',
         active
-          ? 'bg-(--ui-bg-tertiary) text-foreground'
-          : 'text-(--ui-text-secondary) hover:bg-(--chrome-action-hover) hover:text-foreground'
+          ? 'bg-(--ui-row-active-background) text-foreground'
+          : 'text-(--ui-text-secondary) hover:bg-(--ui-row-hover-background) hover:text-foreground'
       )}
       onClick={onSelect}
       type="button"
@@ -482,7 +484,7 @@ function PlatformDetail({
               {introCopy(platform)}
             </p>
             <div className="mt-3">
-              <Button asChild size="sm" variant="outline">
+              <Button asChild size="sm" variant="textStrong">
                 <a href={platform.docs_url} rel="noreferrer" target="_blank">
                   Open setup guide
                   <ExternalLink className="size-3.5" />
@@ -560,19 +562,15 @@ function PlatformDetail({
         </div>
       </div>
 
-      <footer className="border-t border-(--ui-stroke-tertiary) bg-(--ui-chat-surface-background) px-5 py-2.5">
+      <footer className="bg-(--ui-chat-surface-background) px-5 py-2.5">
         <div className="mx-auto flex max-w-2xl flex-wrap items-center gap-2">
-          <label className="flex shrink-0 items-center gap-2 rounded-md border border-(--ui-stroke-tertiary) bg-(--ui-bg-quinary) px-2.5 py-1.5 text-[length:var(--conversation-text-font-size)]">
-            <Switch
-              aria-label={platform.enabled ? `Disable ${platform.name}` : `Enable ${platform.name}`}
-              checked={platform.enabled}
-              disabled={saving === `enabled:${platform.id}`}
-              onCheckedChange={onToggle}
-            />
-            <span className="text-xs font-medium text-muted-foreground">
-              {platform.enabled ? 'Enabled' : 'Disabled'}
-            </span>
-          </label>
+          <Switch
+            aria-label={platform.enabled ? `Disable ${platform.name}` : `Enable ${platform.name}`}
+            checked={platform.enabled}
+            disabled={saving === `enabled:${platform.id}`}
+            onCheckedChange={onToggle}
+            size="xs"
+          />
 
           <div className="ml-auto flex items-center gap-2">
             {hasEdits && <span className="text-xs text-muted-foreground">Unsaved changes</span>}
diff --git a/apps/desktop/src/app/overlays/overlay-search-input.tsx b/apps/desktop/src/app/overlays/overlay-search-input.tsx
deleted file mode 100644
index 5241c358d01..00000000000
--- a/apps/desktop/src/app/overlays/overlay-search-input.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import type { ReactNode, RefObject } from 'react'
-
-import { Button } from '@/components/ui/button'
-import { Codicon } from '@/components/ui/codicon'
-import { Input } from '@/components/ui/input'
-import { Loader2, Search } from '@/lib/icons'
-import { cn } from '@/lib/utils'
-
-interface OverlaySearchInputProps {
-  placeholder: string
-  value: string
-  onChange: (value: string) => void
-  containerClassName?: string
-  inputClassName?: string
-  loading?: boolean
-  onClear?: () => void
-  inputRef?: RefObject<HTMLInputElement | null>
-  trailingAction?: ReactNode
-}
-
-export function OverlaySearchInput({
-  placeholder,
-  value,
-  onChange,
-  containerClassName,
-  inputClassName,
-  loading = false,
-  onClear,
-  inputRef,
-  trailingAction
-}: OverlaySearchInputProps) {
-  const clear = onClear ?? (() => onChange(''))
-  const hasTrailing = Boolean(trailingAction)
-
-  return (
-    <div className={cn('relative', containerClassName)}>
-      <Search className="pointer-events-none absolute left-3 top-1/2 z-1 size-3.5 -translate-y-1/2 text-muted-foreground/80" />
-      <Input
-        className={cn(
-          'relative z-0 py-2 pl-8 text-[length:var(--conversation-text-font-size)]',
-          hasTrailing || loading || value ? 'pr-16' : 'pr-8',
-          inputClassName
-        )}
-        onChange={event => onChange(event.target.value)}
-        placeholder={placeholder}
-        ref={inputRef}
-        value={value}
-      />
-      <div className="absolute right-1.5 top-1/2 z-1 flex -translate-y-1/2 items-center gap-0.5">
-        {trailingAction}
-        {loading ? (
-          <Loader2 className="pointer-events-none size-3.5 animate-spin text-muted-foreground/70" />
-        ) : value ? (
-          <Button
-            aria-label="Clear search"
-            className="text-muted-foreground/85 hover:bg-accent/60 hover:text-foreground"
-            onClick={clear}
-            size="icon-xs"
-            variant="ghost"
-          >
-            <Codicon name="close" size="0.875rem" />
-          </Button>
-        ) : null}
-      </div>
-    </div>
-  )
-}
-
-export function PageSearchInput(props: OverlaySearchInputProps) {
-  return (
-    <OverlaySearchInput
-      {...props}
-      containerClassName={cn('mx-auto w-[min(36rem,calc(100%-2rem))] min-w-0', props.containerClassName)}
-      inputClassName={cn('py-2 pl-8', props.inputClassName)}
-    />
-  )
-}
diff --git a/apps/desktop/src/app/overlays/overlay-split-layout.tsx b/apps/desktop/src/app/overlays/overlay-split-layout.tsx
index a6e66986849..a70e9fc37ff 100644
--- a/apps/desktop/src/app/overlays/overlay-split-layout.tsx
+++ b/apps/desktop/src/app/overlays/overlay-split-layout.tsx
@@ -3,6 +3,8 @@ import type { ReactNode } from 'react'
 import type { IconComponent } from '@/lib/icons'
 import { cn } from '@/lib/utils'
 
+import { PAGE_INSET_X } from '../layout-constants'
+
 interface OverlaySplitLayoutProps {
   children: ReactNode
   className?: string
@@ -58,7 +60,8 @@ export function OverlayMain({ children, className }: OverlayMainProps) {
   return (
     <main
       className={cn(
-        'flex min-h-0 flex-1 flex-col overflow-hidden bg-transparent px-3 pb-3 pt-[calc(var(--titlebar-height)+1rem)]',
+        'flex min-h-0 flex-1 flex-col overflow-hidden bg-transparent pb-3 pt-[calc(var(--titlebar-height)+1rem)]',
+        PAGE_INSET_X,
         className
       )}
     >
diff --git a/apps/desktop/src/app/overlays/overlay-view.tsx b/apps/desktop/src/app/overlays/overlay-view.tsx
index 60fe4ec8a8c..6fb9ab38c3d 100644
--- a/apps/desktop/src/app/overlays/overlay-view.tsx
+++ b/apps/desktop/src/app/overlays/overlay-view.tsx
@@ -64,7 +64,7 @@ export function OverlayView({
       >
         <div className="pointer-events-none absolute inset-x-0 top-0 z-10 h-[calc(var(--titlebar-height)+0.1875rem)] [-webkit-app-region:drag]">
           {headerContent && (
-            <div className="pointer-events-auto absolute left-1/2 top-[calc(1rem+var(--titlebar-height)/2)] -translate-x-1/2 -translate-y-1/2 [-webkit-app-region:no-drag]">
+            <div className="pointer-events-auto absolute left-1/2 top-[calc(0.5rem+var(--titlebar-height)/2)] -translate-x-1/2 -translate-y-1/2 [-webkit-app-region:no-drag]">
               {headerContent}
             </div>
           )}
diff --git a/apps/desktop/src/app/page-search-shell.tsx b/apps/desktop/src/app/page-search-shell.tsx
index fc29935dca0..2a2c97e19a3 100644
--- a/apps/desktop/src/app/page-search-shell.tsx
+++ b/apps/desktop/src/app/page-search-shell.tsx
@@ -1,25 +1,26 @@
 import type { ReactNode } from 'react'
 
+import { SearchField } from '@/components/ui/search-field'
 import { cn } from '@/lib/utils'
 
-import { PageSearchInput } from './overlays/overlay-search-input'
-
 interface PageSearchShellProps extends React.ComponentProps<'section'> {
   children: ReactNode
+  /** Primary tabs shown on the top row, beside the search. */
+  tabs?: ReactNode
+  /** Secondary filters shown full-width on their own row below (expands). */
   filters?: ReactNode
   onSearchChange: (value: string) => void
   searchPlaceholder: string
-  searchTrailingAction?: ReactNode
   searchValue: string
 }
 
 export function PageSearchShell({
   children,
   className,
+  tabs,
   filters,
   onSearchChange,
   searchPlaceholder,
-  searchTrailingAction,
   searchValue,
   ...props
 }: PageSearchShellProps) {
@@ -29,29 +30,38 @@ export function PageSearchShell({
       className={cn('flex h-full min-w-0 flex-col overflow-hidden bg-(--ui-chat-surface-background)', className)}
     >
       {/*
-        This header sits in the titlebar row, so it overlaps the OS window-drag
-        region painted by the shell. Without `-webkit-app-region: no-drag` on
-        the search row, mousedown on the input gets intercepted as a window-
-        drag start and the input never receives focus (visible as "I can't
-        click the search box" on the messaging/cron/etc pages).
+        Header lives in the page body, below the window chrome (the shell floats
+        traffic lights over the top titlebar-height strip, which the `pt` clears
+        and leaves draggable). Top row: primary tabs + search. Second row:
+        secondary filters, full-width so they expand. Interactive bits opt out
+        of the drag region.
       */}
-      <div className="relative z-10 grid gap-2 border-b border-(--ui-stroke-tertiary) px-3 py-2.5 [-webkit-app-region:no-drag]">
-        {/* Reserve the top-right titlebar tools + native window-controls
-            footprint so the full-width search input never slides under them. */}
-        <div
-          style={{
-            paddingRight:
-              'max(0px, calc(var(--titlebar-tools-right, 0px) + var(--titlebar-tools-width, 0px) - 0.75rem))'
-          }}
-        >
-          <PageSearchInput
-            onChange={onSearchChange}
-            placeholder={searchPlaceholder}
-            trailingAction={searchTrailingAction}
-            value={searchValue}
-          />
+      {/*
+        IMPORTANT: do NOT put `-webkit-app-region: drag` on this header. It spans
+        full width over the band where the floating titlebar icon clusters live,
+        and an overlapping OS drag region eats their clicks at the compositor
+        level (pointer-events / no-drag carve-outs across separate stacking
+        contexts don't reliably fix it on macOS). The shell already supplies a
+        draggable titlebar strip that is `calc()`'d around the icon clusters
+        (see app-shell.tsx), so window dragging still works here.
+      */}
+      <div className="shrink-0">
+        <div className="flex items-center gap-3 px-3 pb-2 pt-[calc(var(--titlebar-height)+0.5rem)]">
+          {tabs ? (
+            <div className="flex min-w-0 flex-1 flex-wrap items-center gap-x-2 gap-y-1">{tabs}</div>
+          ) : null}
+          <div className={cn('flex shrink-0 items-center', !tabs && 'flex-1')}>
+            <SearchField
+              containerClassName="max-w-[45vw]"
+              onChange={onSearchChange}
+              placeholder={searchPlaceholder}
+              value={searchValue}
+            />
+          </div>
         </div>
-        {filters ? <div className="flex flex-wrap items-center justify-center gap-1.5">{filters}</div> : null}
+        {filters ? (
+          <div className="flex flex-wrap items-center gap-x-2 gap-y-1 px-3 pb-2">{filters}</div>
+        ) : null}
       </div>
       <div className="min-h-0 flex-1 overflow-hidden bg-(--ui-chat-surface-background)">{children}</div>
     </section>
diff --git a/apps/desktop/src/app/profiles/index.tsx b/apps/desktop/src/app/profiles/index.tsx
index 29a9c753808..ec528df00d8 100644
--- a/apps/desktop/src/app/profiles/index.tsx
+++ b/apps/desktop/src/app/profiles/index.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 import { PageLoader } from '@/components/page-loader'
@@ -28,9 +27,9 @@ import { AlertTriangle, Pencil, Save, Terminal, Trash2, Users } from '@/lib/icon
 import { cn } from '@/lib/utils'
 import { notify, notifyError } from '@/store/notifications'
 
-import type { SetStatusbarItemGroup } from '../shell/statusbar-controls'
-import { titlebarHeaderBaseClass } from '../shell/titlebar'
-import type { SetTitlebarToolGroup } from '../shell/titlebar-controls'
+import { useRefreshHotkey } from '../hooks/use-refresh-hotkey'
+import { OverlayMain, OverlaySidebar, OverlaySplitLayout } from '../overlays/overlay-split-layout'
+import { OverlayView } from '../overlays/overlay-view'
 
 const PROFILE_NAME_RE = /^[a-z0-9][a-z0-9_-]{0,63}$/
 
@@ -40,26 +39,18 @@ function isValidProfileName(name: string): boolean {
   return PROFILE_NAME_RE.test(name.trim())
 }
 
-interface ProfilesViewProps extends React.ComponentProps<'section'> {
-  setStatusbarItemGroup?: SetStatusbarItemGroup
-  setTitlebarToolGroup?: SetTitlebarToolGroup
+interface ProfilesViewProps {
+  onClose: () => void
 }
 
-export function ProfilesView({
-  setStatusbarItemGroup: _setStatusbarItemGroup,
-  setTitlebarToolGroup,
-  ...props
-}: ProfilesViewProps) {
+export function ProfilesView({ onClose }: ProfilesViewProps) {
   const [profiles, setProfiles] = useState<null | ProfileInfo[]>(null)
-  const [refreshing, setRefreshing] = useState(false)
   const [selectedName, setSelectedName] = useState<null | string>(null)
   const [createOpen, setCreateOpen] = useState(false)
   const [pendingDelete, setPendingDelete] = useState<null | ProfileInfo>(null)
   const [deleting, setDeleting] = useState(false)
 
   const refresh = useCallback(async () => {
-    setRefreshing(true)
-
     try {
       const { profiles: list } = await getProfiles()
       setProfiles(list)
@@ -72,33 +63,15 @@ export function ProfilesView({
       })
     } catch (err) {
       notifyError(err, 'Failed to load profiles')
-    } finally {
-      setRefreshing(false)
     }
   }, [])
 
+  useRefreshHotkey(refresh)
+
   useEffect(() => {
     void refresh()
   }, [refresh])
 
-  useEffect(() => {
-    if (!setTitlebarToolGroup) {
-      return
-    }
-
-    setTitlebarToolGroup('profiles', [
-      {
-        disabled: refreshing,
-        icon: <Codicon name="refresh" spinning={refreshing} />,
-        id: 'refresh-profiles',
-        label: refreshing ? 'Refreshing profiles' : 'Refresh profiles',
-        onSelect: () => void refresh()
-      }
-    ])
-
-    return () => setTitlebarToolGroup('profiles', [])
-  }, [refresh, refreshing, setTitlebarToolGroup])
-
   const selected = useMemo(() => {
     if (!profiles) {
       return null
@@ -164,62 +137,53 @@ export function ProfilesView({
   }, [pendingDelete, refresh])
 
   return (
-    <section {...props} className="flex h-full min-w-0 flex-col overflow-hidden rounded-b-[0.9375rem] bg-background">
-      <header className={titlebarHeaderBaseClass}>
-        <h2 className="pointer-events-auto text-base font-semibold leading-none tracking-tight">Profiles</h2>
-        <span className="pointer-events-auto text-xs text-muted-foreground">
-          {profiles ? `${profiles.length} ${profiles.length === 1 ? 'profile' : 'profiles'}` : ''}
-        </span>
-      </header>
+    <OverlayView closeLabel="Close profiles" onClose={onClose}>
+      {!profiles ? (
+        <PageLoader label="Loading profiles..." />
+      ) : (
+        <OverlaySplitLayout>
+          <OverlaySidebar>
+            <Button
+              className="mb-1 w-full justify-start gap-2"
+              onClick={() => setCreateOpen(true)}
+              size="sm"
+              variant="text"
+            >
+              <Codicon name="add" />
+              New profile
+            </Button>
+            {profiles.map(profile => (
+              <ProfileRow
+                active={selected?.name === profile.name}
+                key={profile.name}
+                onSelect={() => setSelectedName(profile.name)}
+                profile={profile}
+              />
+            ))}
+            {profiles.length === 0 && (
+              <p className="px-2 py-4 text-center text-xs text-muted-foreground">No profiles yet.</p>
+            )}
+          </OverlaySidebar>
 
-      <div className="min-h-0 flex-1 overflow-hidden rounded-b-[1.0625rem] border border-border/50 bg-background/85">
-        {!profiles ? (
-          <PageLoader label="Loading profiles..." />
-        ) : (
-          <div className="grid h-full min-h-0 grid-cols-1 lg:grid-cols-[16rem_minmax(0,1fr)]">
-            <aside className="flex min-h-0 flex-col overflow-hidden border-b border-border/50 lg:border-b-0 lg:border-r">
-              <div className="border-b border-border/40 p-2">
-                <Button className="w-full" onClick={() => setCreateOpen(true)} size="sm">
-                  <Codicon name="add" />
-                  New profile
-                </Button>
-              </div>
-              <ul className="min-h-0 flex-1 space-y-1 overflow-y-auto p-2">
-                {profiles.map(profile => (
-                  <li key={profile.name}>
-                    <ProfileRow
-                      active={selected?.name === profile.name}
-                      onSelect={() => setSelectedName(profile.name)}
-                      profile={profile}
-                    />
-                  </li>
-                ))}
-                {profiles.length === 0 && (
-                  <li className="px-2 py-4 text-center text-xs text-muted-foreground">No profiles yet.</li>
-                )}
-              </ul>
-            </aside>
-
-            <main className="min-h-0 overflow-hidden">
-              {selected ? (
-                <ProfileDetail
-                  key={selected.name}
-                  onDelete={() => setPendingDelete(selected)}
-                  onRename={newName => handleRename(selected.name, newName)}
-                  profile={selected}
-                />
-              ) : (
-                <div className="grid h-full place-items-center px-6 py-12 text-center text-sm text-muted-foreground">
-                  <div>
-                    <Users className="mx-auto size-6 text-muted-foreground/60" />
-                    <p className="mt-3">Select a profile to view its details.</p>
-                  </div>
+          <OverlayMain className="px-0">
+            {selected ? (
+              <ProfileDetail
+                key={selected.name}
+                onDelete={() => setPendingDelete(selected)}
+                onRename={newName => handleRename(selected.name, newName)}
+                profile={selected}
+              />
+            ) : (
+              <div className="grid h-full place-items-center px-6 py-12 text-center text-sm text-muted-foreground">
+                <div>
+                  <Users className="mx-auto size-6 text-muted-foreground/60" />
+                  <p className="mt-3">Select a profile to view its details.</p>
                 </div>
-              )}
-            </main>
-          </div>
-        )}
-      </div>
+              </div>
+            )}
+          </OverlayMain>
+        </OverlaySplitLayout>
+      )}
 
       <CreateProfileDialog
         onClose={() => setCreateOpen(false)}
@@ -250,7 +214,7 @@ export function ProfilesView({
           </DialogFooter>
         </DialogContent>
       </Dialog>
-    </section>
+    </OverlayView>
   )
 }
 
@@ -258,8 +222,10 @@ function ProfileRow({ active, onSelect, profile }: { active: boolean; onSelect:
   return (
     <button
       className={cn(
-        'flex w-full flex-col items-start gap-1 rounded-lg px-2.5 py-2 text-left transition-colors',
-        active ? 'bg-accent text-foreground' : 'text-foreground/85 hover:bg-accent/60'
+        'flex w-full flex-col items-start gap-0.5 rounded-md px-2 py-1.5 text-left transition-colors',
+        active
+          ? 'bg-(--ui-row-active-background) text-foreground'
+          : 'text-(--ui-text-secondary) hover:bg-(--ui-row-hover-background) hover:text-foreground'
       )}
       onClick={onSelect}
       type="button"
@@ -326,23 +292,23 @@ function ProfileDetail({
                   {profile.path}
                 </p>
               </div>
-              <div className="flex shrink-0 items-center gap-1">
+              <div className="flex shrink-0 items-center gap-3">
                 {!profile.is_default && (
-                  <Button onClick={() => setRenameOpen(true)} size="sm" variant="outline">
+                  <Button onClick={() => setRenameOpen(true)} size="sm" variant="text">
                     <Pencil />
                     Rename
                   </Button>
                 )}
-                <Button disabled={copying} onClick={() => void handleCopySetup()} size="sm" variant="outline">
+                <Button disabled={copying} onClick={() => void handleCopySetup()} size="sm" variant="text">
                   <Terminal />
                   {copying ? 'Copying...' : 'Copy setup'}
                 </Button>
                 {!profile.is_default && (
                   <Button
-                    className="text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
+                    className="hover:text-destructive hover:no-underline"
                     onClick={onDelete}
                     size="sm"
-                    variant="ghost"
+                    variant="text"
                   >
                     <Trash2 />
                     Delete
@@ -351,7 +317,7 @@ function ProfileDetail({
               </div>
             </div>
 
-            <dl className="grid gap-2 rounded-lg border border-border/40 bg-background/70 px-3 py-3 text-xs sm:grid-cols-2">
+            <dl className="grid gap-2 text-xs sm:grid-cols-2">
               <DetailRow label="Model">
                 {profile.model ? (
                   <>
@@ -458,9 +424,7 @@ function SoulEditor({ profileName }: { profileName: string }) {
       </div>
 
       {loading ? (
-        <div className="grid h-44 place-items-center rounded-md border border-border/40 bg-background/60 text-xs text-muted-foreground">
-          Loading SOUL.md...
-        </div>
+        <PageLoader className="min-h-44" label="Loading SOUL.md" />
       ) : (
         <Textarea
           className="min-h-72 font-mono text-xs leading-5"
diff --git a/apps/desktop/src/app/right-sidebar/files/tree.tsx b/apps/desktop/src/app/right-sidebar/files/tree.tsx
index 40cc4ed8222..6f6da603e9b 100644
--- a/apps/desktop/src/app/right-sidebar/files/tree.tsx
+++ b/apps/desktop/src/app/right-sidebar/files/tree.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useRef, useState } from 'react'
 import { type NodeApi, type NodeRendererProps, Tree, type TreeApi } from 'react-arborist'
 
+import { PageLoader } from '@/components/page-loader'
 import { Codicon } from '@/components/ui/codicon'
 import { useResizeObserver } from '@/hooks/use-resize-observer'
 import { cn } from '@/lib/utils'
@@ -121,11 +122,7 @@ export function ProjectTree({
 }
 
 function TreeSizingState() {
-  return (
-    <div className="flex h-full min-h-24 items-center justify-center px-3 text-[0.68rem] text-(--ui-text-tertiary)">
-      Loading files...
-    </div>
-  )
+  return <PageLoader aria-label="Loading files" className="min-h-24 px-3" />
 }
 
 function ProjectTreeRow({
diff --git a/apps/desktop/src/app/routes.ts b/apps/desktop/src/app/routes.ts
index 8de358dbafb..fbf8df40ada 100644
--- a/apps/desktop/src/app/routes.ts
+++ b/apps/desktop/src/app/routes.ts
@@ -52,6 +52,21 @@ export const APP_ROUTES = [
 const APP_VIEW_BY_PATH = new Map<string, AppView>(APP_ROUTES.map(route => [route.path, route.view]))
 const RESERVED_PATHS: ReadonlySet<string> = new Set(APP_ROUTES.map(route => route.path))
 
+// Views that render as a full-screen modal card (OverlayView) over the shell.
+// While one is open the app's titlebar control clusters must hide so they don't
+// bleed over the overlay (they sit at a higher z-index than the overlay card).
+export const OVERLAY_VIEWS: ReadonlySet<AppView> = new Set([
+  'agents',
+  'command-center',
+  'cron',
+  'profiles',
+  'settings'
+])
+
+export function isOverlayView(view: AppView): boolean {
+  return OVERLAY_VIEWS.has(view)
+}
+
 export function isNewChatRoute(pathname: string): boolean {
   return pathname === NEW_CHAT_ROUTE
 }
diff --git a/apps/desktop/src/app/settings/about-settings.tsx b/apps/desktop/src/app/settings/about-settings.tsx
index 319f97960d4..4d276788e72 100644
--- a/apps/desktop/src/app/settings/about-settings.tsx
+++ b/apps/desktop/src/app/settings/about-settings.tsx
@@ -2,7 +2,7 @@ import { useStore } from '@nanostores/react'
 import { useEffect, useState } from 'react'
 
 import { Button } from '@/components/ui/button'
-import { CheckCircle2, ExternalLink, Loader2, RefreshCw, Sparkles } from '@/lib/icons'
+import { Loader2, RefreshCw, Sparkles } from '@/lib/icons'
 import { cn } from '@/lib/utils'
 import {
   $desktopVersion,
@@ -111,29 +111,22 @@ export function AboutSettings() {
             statusTone === 'idle' && 'border-border/70 bg-muted/20 text-foreground'
           )}
         >
-          <div className="flex items-start gap-2">
-            {statusTone === 'available' ? (
-              <Sparkles className="mt-0.5 size-4 shrink-0 text-primary" />
-            ) : statusTone === 'error' ? null : (
-              <CheckCircle2 className="mt-0.5 size-4 shrink-0 text-emerald-600 dark:text-emerald-400" />
-            )}
-            <div className="min-w-0">
-              <p className="font-medium">{statusLine}</p>
-              <p className="mt-1 text-xs text-muted-foreground">
-                Last checked {relativeTime(status?.fetchedAt)}
-                {justChecked && !checking ? ' · just now' : ''}
-              </p>
-            </div>
+          <div className="min-w-0">
+            <p className="font-medium">{statusLine}</p>
+            <p className="mt-1 text-xs text-muted-foreground">
+              Last checked {relativeTime(status?.fetchedAt)}
+              {justChecked && !checking ? ' · just now' : ''}
+            </p>
           </div>
 
-          <div className="mt-3 flex flex-wrap items-center gap-2">
+          <div className="mt-3 flex flex-wrap items-center gap-4">
             <Button
               disabled={checking || applying || !supported}
               onClick={() => void handleCheck()}
               size="sm"
-              variant="outline"
+              variant="textStrong"
             >
-              {checking ? <Loader2 className="size-3 animate-spin" /> : <RefreshCw className="size-3" />}
+              {checking ? <Loader2 className="size-3 animate-spin" /> : null}
               {checking ? 'Checking…' : 'Check now'}
             </Button>
 
@@ -143,12 +136,7 @@ export function AboutSettings() {
               </Button>
             )}
 
-            <Button
-              asChild
-              className="ml-auto text-muted-foreground hover:text-foreground"
-              size="sm"
-              variant="ghost"
-            >
+            <Button asChild className="ml-auto" size="sm" variant="text">
               <a
                 href={RELEASE_NOTES_URL}
                 onClick={event => {
@@ -158,7 +146,6 @@ export function AboutSettings() {
                 rel="noreferrer"
                 target="_blank"
               >
-                <ExternalLink className="size-3" />
                 Release notes
               </a>
             </Button>
diff --git a/apps/desktop/src/app/settings/appearance-settings.tsx b/apps/desktop/src/app/settings/appearance-settings.tsx
index b249f0dff7a..91ffb3d9217 100644
--- a/apps/desktop/src/app/settings/appearance-settings.tsx
+++ b/apps/desktop/src/app/settings/appearance-settings.tsx
@@ -1,8 +1,9 @@
 import { useStore } from '@nanostores/react'
 import type { ReactNode } from 'react'
 
+import { SegmentedControl } from '@/components/ui/segmented-control'
 import { triggerHaptic } from '@/lib/haptics'
-import { Check, type IconComponent } from '@/lib/icons'
+import { Check } from '@/lib/icons'
 import { cn } from '@/lib/utils'
 import { $toolViewMode, setToolViewMode } from '@/store/tool-view'
 import { useTheme } from '@/themes/context'
@@ -65,42 +66,6 @@ function SectionHead({ title, description, control }: { title: string; descripti
   )
 }
 
-function SegmentedControl<T extends string>({
-  options,
-  value,
-  onChange
-}: {
-  options: readonly { id: T; label: string; icon?: IconComponent }[]
-  value: T
-  onChange: (id: T) => void
-}) {
-  return (
-    <div className="inline-grid w-fit auto-cols-fr grid-flow-col gap-0.5 rounded-[5px] bg-(--ui-bg-tertiary) p-0.5">
-      {options.map(({ id, label, icon: Icon }) => {
-        const active = value === id
-
-        return (
-          <button
-            aria-pressed={active}
-            className={cn(
-              'flex items-center justify-center gap-1 rounded-[3px] px-2.5 py-0.5 text-[0.6875rem] font-medium transition-colors',
-              active
-                ? 'bg-background text-foreground shadow-sm'
-                : 'text-muted-foreground hover:text-foreground'
-            )}
-            key={id}
-            onClick={() => onChange(id)}
-            type="button"
-          >
-            {Icon && <Icon className="size-3" />}
-            {label}
-          </button>
-        )
-      })}
-    </div>
-  )
-}
-
 export function AppearanceSettings() {
   const { themeName, mode, availableThemes, setTheme, setMode } = useTheme()
   const toolViewMode = useStore($toolViewMode)
diff --git a/apps/desktop/src/app/settings/config-settings.tsx b/apps/desktop/src/app/settings/config-settings.tsx
index 34f129bfbd9..57a9b34bbc1 100644
--- a/apps/desktop/src/app/settings/config-settings.tsx
+++ b/apps/desktop/src/app/settings/config-settings.tsx
@@ -1,5 +1,6 @@
 import type { ChangeEvent, ReactNode } from 'react'
 import { useEffect, useMemo, useRef, useState } from 'react'
+import { useSearchParams } from 'react-router-dom'
 
 import { Input } from '@/components/ui/input'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
@@ -17,10 +18,9 @@ import { notify, notifyError } from '@/store/notifications'
 import type { ConfigFieldSchema, HermesConfigRecord } from '@/types/hermes'
 
 import { CONTROL_TEXT, EMPTY_SELECT_VALUE, FIELD_DESCRIPTIONS, FIELD_LABELS, SECTIONS } from './constants'
-import { enumOptionsFor, getNested, includesQuery, prettyName, setNested } from './helpers'
+import { enumOptionsFor, getNested, prettyName, setNested } from './helpers'
 import { ModelSettings } from './model-settings'
 import { EmptyState, ListRow, LoadingState, SettingsContent } from './primitives'
-import type { SearchProps } from './types'
 
 function ConfigField({
   schemaKey,
@@ -164,12 +164,11 @@ function ConfigField({
 }
 
 export function ConfigSettings({
-  query,
   activeSectionId,
   onConfigSaved,
   onMainModelChanged,
   importInputRef
-}: SearchProps & {
+}: {
   activeSectionId: string
   onConfigSaved?: () => void
   onMainModelChanged?: (provider: string, model: string) => void
@@ -264,37 +263,41 @@ export function ConfigSettings({
     )
   }, [schema])
 
-  const matched = useMemo(() => {
-    const q = query.trim().toLowerCase()
+  const fields = sectionFields.get(activeSectionId) ?? []
 
-    if (!schema || !q) {
-      return []
+  // Deep-link target from the command palette (?field=<key>): scroll the row
+  // into view and flash it, then drop the param so it doesn't re-fire.
+  const [searchParams, setSearchParams] = useSearchParams()
+  const targetField = searchParams.get('field')
+
+  useEffect(() => {
+    if (!targetField || !config || !schema) {
+      return
     }
 
-    const seen = new Set<string>()
+    const element = document.getElementById(`setting-field-${targetField}`)
 
-    return SECTIONS.flatMap(s =>
-      s.keys.flatMap(k => {
-        if (seen.has(k) || !schema[k]) {
-          return []
-        }
+    if (!element) {
+      return
+    }
 
-        seen.add(k)
-        const label = prettyName(k.split('.').pop() ?? k)
-        const item = schema[k]
+    element.scrollIntoView({ behavior: 'smooth', block: 'center' })
+    element.classList.add('setting-field-highlight')
 
-        const hit =
-          k.toLowerCase().includes(q) ||
-          label.toLowerCase().includes(q) ||
-          includesQuery(item.category, q) ||
-          includesQuery(item.description, q)
+    const timeout = window.setTimeout(() => element.classList.remove('setting-field-highlight'), 1600)
 
-        return hit ? [[k, item] as [string, ConfigFieldSchema]] : []
-      })
+    setSearchParams(
+      previous => {
+        const next = new URLSearchParams(previous)
+        next.delete('field')
+
+        return next
+      },
+      { replace: true }
     )
-  }, [schema, query])
 
-  const fields = query.trim() ? matched : (sectionFields.get(activeSectionId) ?? [])
+    return () => window.clearTimeout(timeout)
+  }, [config, schema, setSearchParams, targetField])
 
   function handleImport(e: ChangeEvent<HTMLInputElement>) {
     const file = e.target.files?.[0]
@@ -324,34 +327,30 @@ export function ConfigSettings({
 
   return (
     <SettingsContent>
-      {activeSectionId === 'model' && !query.trim() && (
+      {activeSectionId === 'model' && (
         <div className="mb-6">
           <ModelSettings onMainModelChanged={onMainModelChanged} />
         </div>
       )}
-      {query.trim() && (
-        <div className="mb-4 text-xs text-muted-foreground">
-          {fields.length} result{fields.length === 1 ? '' : 's'}
-        </div>
-      )}
       {fields.length === 0 ? (
-        <EmptyState description="Try a different search term or choose another section." title="No matching settings" />
+        <EmptyState description="This section has no adjustable settings." title="Nothing to configure" />
       ) : (
         <div className="grid gap-1">
           {fields.map(([key, field]) => (
-            <ConfigField
-              enumOptions={
-                key === 'tts.elevenlabs.voice_id'
-                  ? enumOptionsFor(key, getNested(config, key), config, elevenLabsVoiceOptions ?? undefined)
-                  : enumOptionsFor(key, getNested(config, key), config)
-              }
-              key={key}
-              onChange={value => updateConfig(setNested(config, key, value))}
-              optionLabels={key === 'tts.elevenlabs.voice_id' ? elevenLabsVoiceLabels : undefined}
-              schema={field}
-              schemaKey={key}
-              value={getNested(config, key)}
-            />
+            <div className="scroll-mt-6 rounded-lg" id={`setting-field-${key}`} key={key}>
+              <ConfigField
+                enumOptions={
+                  key === 'tts.elevenlabs.voice_id'
+                    ? enumOptionsFor(key, getNested(config, key), config, elevenLabsVoiceOptions ?? undefined)
+                    : enumOptionsFor(key, getNested(config, key), config)
+                }
+                onChange={value => updateConfig(setNested(config, key, value))}
+                optionLabels={key === 'tts.elevenlabs.voice_id' ? elevenLabsVoiceLabels : undefined}
+                schema={field}
+                schemaKey={key}
+                value={getNested(config, key)}
+              />
+            </div>
           ))}
         </div>
       )}
diff --git a/apps/desktop/src/app/settings/constants.ts b/apps/desktop/src/app/settings/constants.ts
index 4738dad6520..3f499b2ea9d 100644
--- a/apps/desktop/src/app/settings/constants.ts
+++ b/apps/desktop/src/app/settings/constants.ts
@@ -298,12 +298,3 @@ export const MODE_OPTIONS: ModeOption[] = [
   { id: 'dark', label: 'Dark', description: 'Low-glare workspace', icon: Moon },
   { id: 'system', label: 'System', description: 'Follow OS appearance', icon: Monitor }
 ]
-
-export const SEARCH_PLACEHOLDER: Record<'about' | 'config' | 'gateway' | 'keys' | 'mcp' | 'sessions', string> = {
-  about: 'About Hermes Desktop',
-  config: 'Search settings...',
-  gateway: 'Gateway connection...',
-  keys: 'Search API keys...',
-  mcp: 'Search MCP servers...',
-  sessions: 'Search archived sessions...'
-}
diff --git a/apps/desktop/src/app/settings/gateway-settings.tsx b/apps/desktop/src/app/settings/gateway-settings.tsx
index f7a16ee2f6b..a4b831489d5 100644
--- a/apps/desktop/src/app/settings/gateway-settings.tsx
+++ b/apps/desktop/src/app/settings/gateway-settings.tsx
@@ -272,19 +272,21 @@ export function GatewaySettings() {
 
       {lastTest ? <div className="mt-4 text-xs text-primary">{lastTest}</div> : null}
 
-      <div className="mt-6 flex flex-wrap justify-end gap-3">
+      <div className="mt-6 flex flex-wrap items-center justify-end gap-4">
         <Button
+          className="mr-auto"
           disabled={state.envOverride || testing || !canUseRemote}
           onClick={() => void testRemote()}
-          variant="outline"
+          size="sm"
+          variant="text"
         >
           {testing ? <Loader2 className="size-4 animate-spin" /> : null}
           Test remote
         </Button>
-        <Button disabled={state.envOverride || saving} onClick={() => void save(false)} variant="outline">
+        <Button disabled={state.envOverride || saving} onClick={() => void save(false)} size="sm" variant="textStrong">
           Save for next restart
         </Button>
-        <Button disabled={state.envOverride || saving} onClick={() => void save(true)}>
+        <Button disabled={state.envOverride || saving} onClick={() => void save(true)} size="sm">
           {saving ? <Loader2 className="size-4 animate-spin" /> : null}
           Save and reconnect
         </Button>
@@ -293,7 +295,7 @@ export function GatewaySettings() {
       <div className="mt-6 grid gap-1">
         <ListRow
           action={
-            <Button onClick={() => void window.hermesDesktop?.revealLogs()} variant="outline">
+            <Button onClick={() => void window.hermesDesktop?.revealLogs()} size="sm" variant="textStrong">
               <FileText className="size-4" />
               Open logs
             </Button>
diff --git a/apps/desktop/src/app/settings/index.tsx b/apps/desktop/src/app/settings/index.tsx
index 21b45414a48..46c2081ec8f 100644
--- a/apps/desktop/src/app/settings/index.tsx
+++ b/apps/desktop/src/app/settings/index.tsx
@@ -1,5 +1,5 @@
 import { IconDownload, IconRefresh, IconUpload } from '@tabler/icons-react'
-import { useEffect, useRef, useState } from 'react'
+import { useRef } from 'react'
 
 import { getHermesConfigDefaults, getHermesConfigRecord, saveHermesConfig } from '@/hermes'
 import { triggerHaptic } from '@/lib/haptics'
@@ -8,19 +8,18 @@ import { notifyError } from '@/store/notifications'
 
 import { useRouteEnumParam } from '../hooks/use-route-enum-param'
 import { OverlayIconButton } from '../overlays/overlay-chrome'
-import { OverlaySearchInput } from '../overlays/overlay-search-input'
 import { OverlayMain, OverlayNavItem, OverlaySidebar, OverlaySplitLayout } from '../overlays/overlay-split-layout'
 import { OverlayView } from '../overlays/overlay-view'
 
 import { AboutSettings } from './about-settings'
 import { AppearanceSettings } from './appearance-settings'
 import { ConfigSettings } from './config-settings'
-import { SEARCH_PLACEHOLDER, SECTIONS } from './constants'
+import { SECTIONS } from './constants'
 import { GatewaySettings } from './gateway-settings'
 import { KeysSettings } from './keys-settings'
 import { McpSettings } from './mcp-settings'
 import { SessionsSettings } from './sessions-settings'
-import type { SettingsPageProps, SettingsQueryKey, SettingsView as SettingsViewId } from './types'
+import type { SettingsPageProps, SettingsView as SettingsViewId } from './types'
 
 const SETTINGS_VIEWS: readonly SettingsViewId[] = [
   ...SECTIONS.map(s => `config:${s.id}` as SettingsViewId),
@@ -34,22 +33,8 @@ const SETTINGS_VIEWS: readonly SettingsViewId[] = [
 export function SettingsView({ gateway, onClose, onConfigSaved, onMainModelChanged }: SettingsPageProps) {
   const [activeView, setActiveView] = useRouteEnumParam('tab', SETTINGS_VIEWS, 'config:model' as SettingsViewId)
 
-  const [queries, setQueries] = useState<Record<SettingsQueryKey, string>>({
-    about: '',
-    config: '',
-    gateway: '',
-    keys: '',
-    mcp: '',
-    sessions: ''
-  })
-
-  const searchInputRef = useRef<HTMLInputElement>(null)
   const importInputRef = useRef<HTMLInputElement | null>(null)
 
-  const queryKey: SettingsQueryKey = activeView.startsWith('config:') ? 'config' : (activeView as SettingsQueryKey)
-  const query = queries[queryKey]
-  const setQuery = (next: string) => setQueries(c => ({ ...c, [queryKey]: next }))
-
   const exportConfig = async () => {
     try {
       const cfg = await getHermesConfigRecord()
@@ -80,35 +65,8 @@ export function SettingsView({ gateway, onClose, onConfigSaved, onMainModelChang
     }
   }
 
-  // OverlayView handles Esc; this just adds Cmd/Ctrl+P → focus search.
-  useEffect(() => {
-    const onKeyDown = (e: KeyboardEvent) => {
-      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'p') {
-        e.preventDefault()
-        searchInputRef.current?.focus()
-        searchInputRef.current?.select()
-      }
-    }
-
-    window.addEventListener('keydown', onKeyDown)
-
-    return () => window.removeEventListener('keydown', onKeyDown)
-  }, [])
-
   return (
-    <OverlayView
-      closeLabel="Close settings"
-      headerContent={
-        <OverlaySearchInput
-          containerClassName="w-[min(36rem,calc(100vw-32rem))] min-w-80"
-          inputRef={searchInputRef}
-          onChange={setQuery}
-          placeholder={SEARCH_PLACEHOLDER[queryKey]}
-          value={query}
-        />
-      }
-      onClose={onClose}
-    >
+    <OverlayView closeLabel="Close settings" onClose={onClose}>
       <OverlaySplitLayout>
         <OverlaySidebar>
           {SECTIONS.map(s => {
@@ -116,7 +74,7 @@ export function SettingsView({ gateway, onClose, onConfigSaved, onMainModelChang
 
             return (
               <OverlayNavItem
-                active={activeView === view && !queries.config.trim()}
+                active={activeView === view}
                 icon={s.icon}
                 key={s.id}
                 label={s.label}
@@ -195,14 +153,13 @@ export function SettingsView({ gateway, onClose, onConfigSaved, onMainModelChang
               importInputRef={importInputRef}
               onConfigSaved={onConfigSaved}
               onMainModelChanged={onMainModelChanged}
-              query={queries.config}
             />
           ) : activeView === 'keys' ? (
-            <KeysSettings query={queries.keys} />
+            <KeysSettings />
           ) : activeView === 'mcp' ? (
-            <McpSettings gateway={gateway} onConfigSaved={onConfigSaved} query={queries.mcp} />
+            <McpSettings gateway={gateway} onConfigSaved={onConfigSaved} />
           ) : (
-            <SessionsSettings query={queries.sessions} />
+            <SessionsSettings />
           )}
         </OverlayMain>
       </OverlaySplitLayout>
diff --git a/apps/desktop/src/app/settings/keys-settings.tsx b/apps/desktop/src/app/settings/keys-settings.tsx
index 0b778b12e1d..3f629071494 100644
--- a/apps/desktop/src/app/settings/keys-settings.tsx
+++ b/apps/desktop/src/app/settings/keys-settings.tsx
@@ -1,7 +1,7 @@
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
+import { useSearchParams } from 'react-router-dom'
 
 import { Button } from '@/components/ui/button'
-import { Codicon } from '@/components/ui/codicon'
 import { Input } from '@/components/ui/input'
 import { deleteEnvVar, getEnvVars, revealEnvVar, setEnvVar } from '@/hermes'
 import { Check, Eye, EyeOff, Save, Settings2, Trash2, Zap } from '@/lib/icons'
@@ -10,17 +10,9 @@ import { notify, notifyError } from '@/store/notifications'
 import type { EnvVarInfo } from '@/types/hermes'
 
 import { CONTROL_TEXT } from './constants'
-import {
-  asText,
-  includesQuery,
-  prettyName,
-  providerGroup,
-  providerPriority,
-  redactedValue,
-  withoutKey
-} from './helpers'
+import { asText, prettyName, providerGroup, providerPriority, redactedValue, withoutKey } from './helpers'
 import { LoadingState, Pill, SectionHeading, SettingsContent } from './primitives'
-import type { EnvPatch, EnvRowProps, ProviderGroup, SearchProps } from './types'
+import type { EnvPatch, EnvRowProps, ProviderGroup } from './types'
 
 interface EnvActionsProps {
   varKey: string
@@ -62,7 +54,7 @@ function EnvActions({
           {isRevealed ? <EyeOff /> : <Eye />}
         </Button>
       )}
-      <Button onClick={onEdit} size="xs" variant="outline">
+      <Button onClick={onEdit} size="xs" variant="textStrong">
         {info.is_set ? 'Replace' : 'Set'}
       </Button>
       {info.is_set && (
@@ -167,8 +159,7 @@ function EnvVarRow({
             <Save />
             {saving === varKey ? 'Saving' : 'Save'}
           </Button>
-          <Button onClick={() => setEdits(c => withoutKey(c, varKey))} size="sm" variant="outline">
-            <Codicon name="close" />
+          <Button onClick={() => setEdits(c => withoutKey(c, varKey))} size="sm" variant="text">
             Cancel
           </Button>
         </div>
@@ -179,16 +170,24 @@ function EnvVarRow({
 
 function EnvProviderGroup({
   group,
-  rowProps
+  rowProps,
+  forceExpand = false
 }: {
   group: ProviderGroup
   rowProps: Omit<EnvRowProps, 'varKey' | 'info'>
+  forceExpand?: boolean
 }) {
   const setCount = group.entries.filter(([, info]) => info.is_set).length
   // Default-expand providers that already have at least one key set; the
   // user is much more likely to be coming back to edit those than to start
   // configuring a fresh provider from scratch.
-  const [expanded, setExpanded] = useState(setCount > 0)
+  const [expanded, setExpanded] = useState(setCount > 0 || forceExpand)
+
+  useEffect(() => {
+    if (forceExpand) {
+      setExpanded(true)
+    }
+  }, [forceExpand])
 
   return (
     <div className="overflow-hidden rounded-xl bg-background/60">
@@ -209,7 +208,9 @@ function EnvProviderGroup({
       {expanded && (
         <div className="grid gap-2 bg-muted/20 p-3">
           {group.entries.map(([key, info]) => (
-            <EnvVarRow compact={!info.is_set} info={info} key={key} varKey={key} {...rowProps} />
+            <div className="scroll-mt-6 rounded-md" id={`env-var-${key}`} key={key}>
+              <EnvVarRow compact={!info.is_set} info={info} varKey={key} {...rowProps} />
+            </div>
           ))}
         </div>
       )}
@@ -217,12 +218,17 @@ function EnvProviderGroup({
   )
 }
 
-export function KeysSettings({ query }: SearchProps) {
+export function KeysSettings() {
   const [vars, setVars] = useState<Record<string, EnvVarInfo> | null>(null)
   const [edits, setEdits] = useState<Record<string, string>>({})
   const [revealed, setRevealed] = useState<Record<string, string>>({})
   const [saving, setSaving] = useState<string | null>(null)
 
+  // Deep-link target from the command palette (?key=<ENV_VAR>): force-expand
+  // the matching provider group, scroll the row in, and flash it.
+  const [searchParams, setSearchParams] = useSearchParams()
+  const highlightKey = searchParams.get('key')
+
   // We used to hide ~80% of rows behind a global "Show advanced" toggle, but
   // everything in this view is configuration-level — "advanced" was a poor
   // distinction. The full list is rendered now and provider groups
@@ -253,32 +259,44 @@ export function KeysSettings({ query }: SearchProps) {
     return () => void (cancelled = true)
   }, [])
 
-  const filterEnv = useCallback((info: EnvVarInfo, key: string, q: string, cat: string, extra?: string) => {
-    if (asText(info.category) !== cat) {
-      return false
+  useEffect(() => {
+    if (!highlightKey || !vars || !vars[highlightKey]) {
+      return
     }
 
-    if (!q) {
-      return true
-    }
+    // Group expansion is async (state), so defer the scroll a frame to let the
+    // target row mount before we look it up.
+    const scrollTimeout = window.setTimeout(() => {
+      const element = document.getElementById(`env-var-${highlightKey}`)
 
-    return (
-      key.toLowerCase().includes(q) ||
-      includesQuery(info.description, q) ||
-      Boolean(extra && extra.toLowerCase().includes(q))
+      if (!element) {
+        return
+      }
+
+      element.scrollIntoView({ behavior: 'smooth', block: 'center' })
+      element.classList.add('setting-field-highlight')
+      window.setTimeout(() => element.classList.remove('setting-field-highlight'), 1600)
+    }, 80)
+
+    setSearchParams(
+      previous => {
+        const next = new URLSearchParams(previous)
+        next.delete('key')
+
+        return next
+      },
+      { replace: true }
     )
-  }, [])
+
+    return () => window.clearTimeout(scrollTimeout)
+  }, [highlightKey, setSearchParams, vars])
 
   const providerGroups = useMemo<ProviderGroup[]>(() => {
     if (!vars) {
       return []
     }
 
-    const q = query.trim().toLowerCase()
-
-    const entries = Object.entries(vars).filter(([key, info]) =>
-      filterEnv(info, key, q, 'provider', providerGroup(key))
-    )
+    const entries = Object.entries(vars).filter(([, info]) => asText(info.category) === 'provider')
 
     const groups = new Map<string, [string, EnvVarInfo][]>()
 
@@ -293,15 +311,13 @@ export function KeysSettings({ query }: SearchProps) {
       entries: entries.sort(([a], [b]) => a.localeCompare(b)),
       hasAnySet: entries.some(([, info]) => info.is_set)
     })).sort((a, b) => a.priority - b.priority || a.name.localeCompare(b.name))
-  }, [filterEnv, query, vars])
+  }, [vars])
 
   const otherGroups = useMemo(() => {
     if (!vars) {
       return []
     }
 
-    const q = query.trim().toLowerCase()
-
     const labels: Record<string, string> = {
       tool: 'Tools',
       messaging: 'Messaging',
@@ -310,12 +326,12 @@ export function KeysSettings({ query }: SearchProps) {
 
     return ['tool', 'messaging', 'setting'].flatMap(cat => {
       const entries = Object.entries(vars)
-        .filter(([key, info]) => filterEnv(info, key, q, cat))
+        .filter(([, info]) => asText(info.category) === cat)
         .sort(([a], [b]) => a.localeCompare(b))
 
       return entries.length === 0 ? [] : [{ category: cat, label: labels[cat] ?? prettyName(cat), entries }]
     })
-  }, [filterEnv, query, vars])
+  }, [vars])
 
   function patchVar(key: string, patch: EnvPatch) {
     setVars(c => (c ? { ...c, [key]: { ...c[key], ...patch } } : c))
@@ -407,7 +423,12 @@ export function KeysSettings({ query }: SearchProps) {
         />
         <div className="grid gap-2">
           {providerGroups.map(group => (
-            <EnvProviderGroup group={group} key={group.name} rowProps={rowProps} />
+            <EnvProviderGroup
+              forceExpand={Boolean(highlightKey) && group.entries.some(([key]) => key === highlightKey)}
+              group={group}
+              key={group.name}
+              rowProps={rowProps}
+            />
           ))}
         </div>
       </div>
@@ -421,7 +442,9 @@ export function KeysSettings({ query }: SearchProps) {
           />
           <div className="grid gap-2">
             {group.entries.map(([key, info]) => (
-              <EnvVarRow info={info} key={key} varKey={key} {...rowProps} />
+              <div className="scroll-mt-6 rounded-md" id={`env-var-${key}`} key={key}>
+                <EnvVarRow info={info} varKey={key} {...rowProps} />
+              </div>
             ))}
           </div>
         </div>
diff --git a/apps/desktop/src/app/settings/mcp-settings.tsx b/apps/desktop/src/app/settings/mcp-settings.tsx
index 32f9c5ea2d8..f5ae916522a 100644
--- a/apps/desktop/src/app/settings/mcp-settings.tsx
+++ b/apps/desktop/src/app/settings/mcp-settings.tsx
@@ -1,20 +1,20 @@
 import { useStore } from '@nanostores/react'
 import { useEffect, useMemo, useState } from 'react'
+import { useSearchParams } from 'react-router-dom'
 
-import { OverlayActionButton, OverlayCard } from '@/app/overlays/overlay-chrome'
+import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Textarea } from '@/components/ui/textarea'
 import { getHermesConfigRecord, type HermesGateway, saveHermesConfig } from '@/hermes'
 import { Wrench } from '@/lib/icons'
+import { cn } from '@/lib/utils'
 import { notify, notifyError } from '@/store/notifications'
 import { $activeSessionId } from '@/store/session'
 import type { HermesConfigRecord } from '@/types/hermes'
 
-import { includesQuery } from './helpers'
 import { EmptyState, LoadingState, Pill, SettingsContent } from './primitives'
-import type { SearchProps } from './types'
 
-interface McpSettingsProps extends SearchProps {
+interface McpSettingsProps {
   gateway?: HermesGateway | null
   onConfigSaved?: () => void
 }
@@ -42,18 +42,11 @@ const transportLabel = (server: Record<string, unknown>) =>
         ? 'stdio'
         : 'custom'
 
-function serverMatches(name: string, server: Record<string, unknown>, query: string) {
-  if (!query) {
-    return true
-  }
-
-  return includesQuery(name, query) || includesQuery(JSON.stringify(server), query)
-}
-
-export function McpSettings({ gateway, onConfigSaved, query }: McpSettingsProps) {
+export function McpSettings({ gateway, onConfigSaved }: McpSettingsProps) {
   const activeSessionId = useStore($activeSessionId)
   const [config, setConfig] = useState<HermesConfigRecord | null>(null)
   const [selected, setSelected] = useState<string | null>(null)
+  const [searchParams, setSearchParams] = useSearchParams()
   const [name, setName] = useState('')
   const [body, setBody] = useState('')
   const [saving, setSaving] = useState(false)
@@ -80,10 +73,36 @@ export function McpSettings({ gateway, onConfigSaved, query }: McpSettingsProps)
   const servers = useMemo(() => getServers(config), [config])
   const names = useMemo(() => Object.keys(servers).sort(), [servers])
 
-  const filtered = useMemo(
-    () => names.filter(serverName => serverMatches(serverName, servers[serverName], query.trim().toLowerCase())),
-    [names, query, servers]
-  )
+  // Deep-link target from the command palette (?server=<name>): select it and
+  // scroll the list entry into view.
+  const targetServer = searchParams.get('server')
+
+  useEffect(() => {
+    if (!targetServer || !config || !(targetServer in servers)) {
+      return
+    }
+
+    setSelected(targetServer)
+
+    const scrollTimeout = window.setTimeout(() => {
+      const element = document.getElementById(`mcp-server-${targetServer}`)
+      element?.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
+      element?.classList.add('setting-field-highlight')
+      window.setTimeout(() => element?.classList.remove('setting-field-highlight'), 1600)
+    }, 80)
+
+    setSearchParams(
+      previous => {
+        const next = new URLSearchParams(previous)
+        next.delete('server')
+
+        return next
+      },
+      { replace: true }
+    )
+
+    return () => window.clearTimeout(scrollTimeout)
+  }, [config, servers, setSearchParams, targetServer])
 
   useEffect(() => {
     const server = selected ? servers[selected] : null
@@ -188,30 +207,32 @@ export function McpSettings({ gateway, onConfigSaved, query }: McpSettingsProps)
 
   return (
     <SettingsContent>
-      <div className="mb-4 flex items-center justify-end gap-3">
-        <div className="flex items-center gap-2">
-          <OverlayActionButton onClick={() => setSelected(null)}>New server</OverlayActionButton>
-          <OverlayActionButton disabled={reloading} onClick={() => void reloadMcp()}>
-            {reloading ? 'Reloading...' : 'Reload MCP'}
-          </OverlayActionButton>
-        </div>
+      <div className="mb-4 flex items-center justify-end gap-4">
+        <Button onClick={() => setSelected(null)} size="xs" variant="text">
+          New server
+        </Button>
+        <Button disabled={reloading} onClick={() => void reloadMcp()} size="xs" variant="text">
+          {reloading ? 'Reloading...' : 'Reload MCP'}
+        </Button>
       </div>
 
-      <div className="grid min-h-0 gap-4 lg:grid-cols-[17rem_minmax(0,1fr)]">
-        <OverlayCard className="min-h-64 overflow-hidden p-2">
-          {filtered.length === 0 ? (
+      <div className="grid min-h-0 gap-6 lg:grid-cols-[16rem_minmax(0,1fr)]">
+        <div className="min-h-64">
+          {names.length === 0 ? (
             <EmptyState description="Add a stdio or HTTP server to expose MCP tools." title="No MCP servers" />
           ) : (
-            <div className="grid gap-1">
-              {filtered.map(serverName => {
+            <div className="grid gap-0.5">
+              {names.map(serverName => {
                 const server = servers[serverName]
                 const active = selected === serverName
 
                 return (
                   <button
-                    className={`rounded-md px-2 py-2 text-left transition-colors hover:bg-(--chrome-action-hover) ${
-                      active ? 'bg-accent/45 text-foreground' : 'text-muted-foreground'
-                    }`}
+                    className={cn(
+                      'scroll-mt-2 rounded-md px-2 py-2 text-left transition-colors hover:bg-(--chrome-action-hover)',
+                      active ? 'bg-(--ui-bg-tertiary) text-foreground' : 'text-muted-foreground'
+                    )}
+                    id={`mcp-server-${serverName}`}
                     key={serverName}
                     onClick={() => setSelected(serverName)}
                     type="button"
@@ -226,9 +247,9 @@ export function McpSettings({ gateway, onConfigSaved, query }: McpSettingsProps)
               })}
             </div>
           )}
-        </OverlayCard>
+        </div>
 
-        <OverlayCard className="grid gap-3 p-4">
+        <div className="grid content-start gap-3">
           <div className="flex items-center gap-2 text-sm font-medium">
             <Wrench className="size-4 text-muted-foreground" />
             {selected ? 'Edit server' : 'New server'}
@@ -248,17 +269,23 @@ export function McpSettings({ gateway, onConfigSaved, query }: McpSettingsProps)
           </label>
           <div className="flex items-center justify-between">
             {selected ? (
-              <OverlayActionButton disabled={saving} onClick={() => void removeServer(selected)} tone="danger">
+              <Button
+                className="text-destructive hover:text-destructive"
+                disabled={saving}
+                onClick={() => void removeServer(selected)}
+                size="xs"
+                variant="text"
+              >
                 Remove
-              </OverlayActionButton>
+              </Button>
             ) : (
               <span />
             )}
-            <OverlayActionButton disabled={saving} onClick={() => void saveServer()}>
+            <Button disabled={saving} onClick={() => void saveServer()} size="sm">
               {saving ? 'Saving...' : 'Save server'}
-            </OverlayActionButton>
+            </Button>
           </div>
-        </OverlayCard>
+        </div>
       </div>
     </SettingsContent>
   )
diff --git a/apps/desktop/src/app/settings/model-settings.tsx b/apps/desktop/src/app/settings/model-settings.tsx
index 435467002da..6f3497ad9cb 100644
--- a/apps/desktop/src/app/settings/model-settings.tsx
+++ b/apps/desktop/src/app/settings/model-settings.tsx
@@ -244,11 +244,10 @@ export function ModelSettings({ onMainModelChanged }: ModelSettingsProps) {
         <div className="mb-2.5 flex items-center justify-between">
           <SectionHeading icon={Cpu} title="Auxiliary models" />
           <Button
-            className="font-semibold underline"
             disabled={!mainModel || applying}
             onClick={() => void resetAuxiliaryModels()}
             size="sm"
-            variant="text"
+            variant="textStrong"
           >
             Reset all to main
           </Button>
@@ -276,11 +275,10 @@ export function ModelSettings({ onMainModelChanged }: ModelSettingsProps) {
                         Set to main
                       </Button>
                       <Button
-                        className="font-semibold underline"
                         disabled={!providers.length || applying}
                         onClick={() => beginAuxiliaryEdit(meta.key)}
                         size="sm"
-                        variant="text"
+                        variant="textStrong"
                       >
                         Change
                       </Button>
diff --git a/apps/desktop/src/app/settings/primitives.tsx b/apps/desktop/src/app/settings/primitives.tsx
index d883a5b31dc..788c3d063e7 100644
--- a/apps/desktop/src/app/settings/primitives.tsx
+++ b/apps/desktop/src/app/settings/primitives.tsx
@@ -5,10 +5,12 @@ import { Button } from '@/components/ui/button'
 import type { IconComponent } from '@/lib/icons'
 import { cn } from '@/lib/utils'
 
+import { PAGE_INSET_X } from '../layout-constants'
+
 export function SettingsContent({ children }: { children: ReactNode }) {
   return (
     <section className="min-h-0 overflow-hidden">
-      <div className="h-full min-h-0 overflow-y-auto px-5 py-4 pb-20">
+      <div className={cn('h-full min-h-0 overflow-y-auto pb-20', PAGE_INSET_X)}>
         <div className="mx-auto w-full max-w-4xl">{children}</div>
       </div>
     </section>
diff --git a/apps/desktop/src/app/settings/sessions-settings.tsx b/apps/desktop/src/app/settings/sessions-settings.tsx
index 89e4bc5c86b..1ca7e29fac2 100644
--- a/apps/desktop/src/app/settings/sessions-settings.tsx
+++ b/apps/desktop/src/app/settings/sessions-settings.tsx
@@ -1,4 +1,5 @@
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
+import { useSearchParams } from 'react-router-dom'
 
 import { Button } from '@/components/ui/button'
 import { deleteSession, listSessions, setSessionArchived } from '@/hermes'
@@ -10,7 +11,6 @@ import { setSessions } from '@/store/session'
 import type { SessionInfo } from '@/types/hermes'
 
 import { EmptyState, ListRow, LoadingState, SectionHeading, SettingsContent } from './primitives'
-import type { SearchProps } from './types'
 
 const ARCHIVED_FETCH_LIMIT = 200
 
@@ -30,10 +30,11 @@ function workspaceLabel(cwd: null | string | undefined): string {
   )
 }
 
-export function SessionsSettings({ query }: SearchProps) {
+export function SessionsSettings() {
   const [sessions, setLocalSessions] = useState<SessionInfo[]>([])
   const [loading, setLoading] = useState(true)
   const [busyId, setBusyId] = useState<string | null>(null)
+  const [searchParams, setSearchParams] = useSearchParams()
 
   const load = useCallback(async () => {
     setLoading(true)
@@ -87,17 +88,39 @@ export function SessionsSettings({ query }: SearchProps) {
     }
   }, [])
 
-  const filtered = useMemo(() => {
-    const needle = query.trim().toLowerCase()
+  // Deep-link target from the command palette (?session=<id>): scroll the row
+  // into view and flash it.
+  const targetSession = searchParams.get('session')
 
-    if (!needle) {
-      return sessions
+  useEffect(() => {
+    if (!targetSession || loading || !sessions.some(session => session.id === targetSession)) {
+      return
     }
 
-    return sessions.filter(session =>
-      [sessionTitle(session), session.preview ?? '', session.cwd ?? ''].join(' ').toLowerCase().includes(needle)
+    const scrollTimeout = window.setTimeout(() => {
+      const element = document.getElementById(`archived-session-${targetSession}`)
+
+      if (!element) {
+        return
+      }
+
+      element.scrollIntoView({ behavior: 'smooth', block: 'center' })
+      element.classList.add('setting-field-highlight')
+      window.setTimeout(() => element.classList.remove('setting-field-highlight'), 1600)
+    }, 80)
+
+    setSearchParams(
+      previous => {
+        const next = new URLSearchParams(previous)
+        next.delete('session')
+
+        return next
+      },
+      { replace: true }
     )
-  }, [query, sessions])
+
+    return () => window.clearTimeout(scrollTimeout)
+  }, [loading, sessions, setSearchParams, targetSession])
 
   if (loading) {
     return <LoadingState label="Loading archived sessions…" />
@@ -117,27 +140,25 @@ export function SessionsSettings({ query }: SearchProps) {
         archive it.
       </p>
 
-      {filtered.length === 0 ? (
-        <EmptyState
-          description={query.trim() ? 'No archived chats match your search.' : 'Archive a chat to hide it here.'}
-          title="Nothing archived"
-        />
+      {sessions.length === 0 ? (
+        <EmptyState description="Archive a chat to hide it here." title="Nothing archived" />
       ) : (
         <div className="grid gap-1">
-          {filtered.map(session => {
+          {sessions.map(session => {
             const label = workspaceLabel(session.cwd)
             const busy = busyId === session.id
 
             return (
-              <ListRow
-                action={
+              <div className="scroll-mt-6 rounded-lg" id={`archived-session-${session.id}`} key={session.id}>
+                <ListRow
+                  action={
                   <div className="flex items-center gap-1.5">
                     <Button
                       disabled={busy}
                       onClick={() => void unarchive(session)}
                       size="sm"
                       type="button"
-                      variant="outline"
+                      variant="textStrong"
                     >
                       {busy ? <Loader2 className="size-3.5 animate-spin" /> : <ArchiveOff className="size-3.5" />}
                       <span>Unarchive</span>
@@ -156,11 +177,11 @@ export function SessionsSettings({ query }: SearchProps) {
                     </Button>
                   </div>
                 }
-                description={session.preview || undefined}
-                hint={label ? `${label} · ${session.message_count} messages` : `${session.message_count} messages`}
-                key={session.id}
-                title={sessionTitle(session)}
-              />
+                  description={session.preview || undefined}
+                  hint={label ? `${label} · ${session.message_count} messages` : `${session.message_count} messages`}
+                  title={sessionTitle(session)}
+                />
+              </div>
             )
           })}
         </div>
@@ -192,7 +213,7 @@ function DefaultProjectDirSetting() {
     let alive = true
 
     void settings.getDefaultProjectDir().then(result => {
-      if (!alive) return
+      if (!alive) {return}
       setDir(result.dir)
       setFallback(result.defaultLabel)
     })
@@ -205,7 +226,7 @@ function DefaultProjectDirSetting() {
   const choose = useCallback(async () => {
     const settings = window.hermesDesktop?.settings
 
-    if (!settings) return
+    if (!settings) {return}
 
     setBusy(true)
 
@@ -229,7 +250,7 @@ function DefaultProjectDirSetting() {
   const clear = useCallback(async () => {
     const settings = window.hermesDesktop?.settings
 
-    if (!settings) return
+    if (!settings) {return}
 
     setBusy(true)
 
@@ -251,13 +272,19 @@ function DefaultProjectDirSetting() {
       </p>
       <ListRow
         action={
-          <div className="flex items-center gap-1.5">
-            <Button disabled={busy} onClick={() => void choose()} size="sm" type="button" variant="outline">
+          <div className="flex items-center gap-3">
+            <Button
+              disabled={busy}
+              onClick={() => void choose()}
+              size="sm"
+              type="button"
+              variant="textStrong"
+            >
               <FolderOpen className="size-3.5" />
               <span>{dir ? 'Change' : 'Choose'}</span>
             </Button>
             {dir && (
-              <Button disabled={busy} onClick={() => void clear()} size="sm" type="button" variant="ghost">
+              <Button disabled={busy} onClick={() => void clear()} size="sm" type="button" variant="text">
                 Clear
               </Button>
             )}
diff --git a/apps/desktop/src/app/settings/toolset-config-panel.tsx b/apps/desktop/src/app/settings/toolset-config-panel.tsx
index aeb5ac81a5c..4ca4f53a53c 100644
--- a/apps/desktop/src/app/settings/toolset-config-panel.tsx
+++ b/apps/desktop/src/app/settings/toolset-config-panel.tsx
@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from 'react'
 
+import { PageLoader } from '@/components/page-loader'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { deleteEnvVar, getToolsetConfig, revealEnvVar, selectToolsetProvider, setEnvVar } from '@/hermes'
@@ -121,7 +122,7 @@ function EnvVarField({ envVar, isSet, onSaved, onCleared }: EnvVarFieldProps) {
               {revealed !== null ? <EyeOff /> : <Eye />}
             </Button>
           )}
-          <Button onClick={() => setEditing(e => !e)} size="xs" variant="outline">
+          <Button onClick={() => setEditing(e => !e)} size="xs" variant="textStrong">
             {isSet ? 'Replace' : 'Set'}
           </Button>
           {isSet && (
@@ -150,7 +151,7 @@ function EnvVarField({ envVar, isSet, onSaved, onCleared }: EnvVarFieldProps) {
             {busy ? <Loader2 className="size-3.5 animate-spin" /> : <Save />}
             Save
           </Button>
-          <Button onClick={() => setEditing(false)} size="sm" variant="outline">
+          <Button onClick={() => setEditing(false)} size="sm" variant="text">
             Cancel
           </Button>
         </div>
@@ -250,12 +251,7 @@ export function ToolsetConfigPanel({ toolset, onConfiguredChange }: ToolsetConfi
   }, [cfg, loading, providers.length])
 
   if (loading) {
-    return (
-      <div className="flex items-center gap-2 px-1 py-3 text-xs text-muted-foreground">
-        <Loader2 className="size-3.5 animate-spin" />
-        Loading configuration...
-      </div>
-    )
+    return <PageLoader className="min-h-32" label="Loading configuration" />
   }
 
   if (emptyMessage) {
diff --git a/apps/desktop/src/app/settings/types.ts b/apps/desktop/src/app/settings/types.ts
index 6ab9384aec1..665ce65cb87 100644
--- a/apps/desktop/src/app/settings/types.ts
+++ b/apps/desktop/src/app/settings/types.ts
@@ -5,7 +5,6 @@ import type { IconComponent } from '@/lib/icons'
 import type { EnvVarInfo } from '@/types/hermes'
 
 export type SettingsView = 'about' | 'gateway' | 'keys' | 'mcp' | 'sessions' | `config:${string}`
-export type SettingsQueryKey = 'about' | 'config' | 'gateway' | 'keys' | 'mcp' | 'sessions'
 export type EnvPatch = Partial<Pick<EnvVarInfo, 'is_set' | 'redacted_value'>>
 
 export interface SettingsPageProps {
@@ -15,10 +14,6 @@ export interface SettingsPageProps {
   onMainModelChanged?: (provider: string, model: string) => void
 }
 
-export interface SearchProps {
-  query: string
-}
-
 export interface ProviderGroup {
   name: string
   priority: number
diff --git a/apps/desktop/src/app/shell/hooks/use-overlay-routing.ts b/apps/desktop/src/app/shell/hooks/use-overlay-routing.ts
index d3b9311e21e..d4b0d2130f5 100644
--- a/apps/desktop/src/app/shell/hooks/use-overlay-routing.ts
+++ b/apps/desktop/src/app/shell/hooks/use-overlay-routing.ts
@@ -2,10 +2,9 @@ import { useCallback, useEffect, useMemo, useRef } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
 
 import { type CommandCenterSection } from '@/app/command-center'
-import { AGENTS_ROUTE, appViewForPath, COMMAND_CENTER_ROUTE, NEW_CHAT_ROUTE } from '@/app/routes'
+import { AGENTS_ROUTE, appViewForPath, COMMAND_CENTER_ROUTE, isOverlayView, NEW_CHAT_ROUTE } from '@/app/routes'
 
 const SECTIONS = ['sessions', 'system', 'usage'] as const
-const OVERLAY_VIEWS = new Set(['settings', 'command-center', 'agents'])
 
 export function useOverlayRouting() {
   const location = useLocation()
@@ -15,8 +14,10 @@ export function useOverlayRouting() {
   const settingsOpen = currentView === 'settings'
   const commandCenterOpen = currentView === 'command-center'
   const agentsOpen = currentView === 'agents'
+  const cronOpen = currentView === 'cron'
+  const profilesOpen = currentView === 'profiles'
   const chatOpen = currentView === 'chat'
-  const overlayOpen = OVERLAY_VIEWS.has(currentView)
+  const overlayOpen = isOverlayView(currentView)
 
   // Overlay routes (settings/command-center/agents) stash the underlying path
   // so closing them returns there instead of bouncing to /.
@@ -59,9 +60,11 @@ export function useOverlayRouting() {
     closeOverlayToPreviousRoute,
     commandCenterInitialSection,
     commandCenterOpen,
+    cronOpen,
     currentView,
     openAgents,
     openCommandCenterSection,
+    profilesOpen,
     settingsOpen,
     toggleCommandCenter
   }
diff --git a/apps/desktop/src/app/shell/titlebar-controls.tsx b/apps/desktop/src/app/shell/titlebar-controls.tsx
index 9c652745db8..67351044a53 100644
--- a/apps/desktop/src/app/shell/titlebar-controls.tsx
+++ b/apps/desktop/src/app/shell/titlebar-controls.tsx
@@ -1,6 +1,6 @@
 import { useStore } from '@nanostores/react'
 import type { ComponentProps, ReactNode } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
 
 import { Button } from '@/components/ui/button'
 import { Codicon } from '@/components/ui/codicon'
@@ -24,7 +24,7 @@ import {
   toggleSidebarOpen
 } from '@/store/layout'
 
-import { PROFILES_ROUTE } from '../routes'
+import { appViewForPath, isOverlayView, PROFILES_ROUTE } from '../routes'
 
 import { titlebarButtonClass } from './titlebar'
 
@@ -53,6 +53,7 @@ interface TitlebarControlsProps extends ComponentProps<'div'> {
 
 export function TitlebarControls({ leftTools = [], tools = [], onOpenSettings }: TitlebarControlsProps) {
   const navigate = useNavigate()
+  const location = useLocation()
   const hapticsMuted = useStore($hapticsMuted)
   const fileBrowserOpen = useStore($fileBrowserOpen)
   const sidebarOpen = useStore($sidebarOpen)
@@ -135,6 +136,14 @@ export function TitlebarControls({ leftTools = [], tools = [], onOpenSettings }:
     }
   ]
 
+  // While a full-screen overlay (settings, command center, …) is open it should
+  // visually own the window. These control clusters are `fixed` at a higher
+  // z-index than the overlay card, so they'd otherwise bleed over it — hide them
+  // and let the overlay's own chrome (close button, drag region) take over.
+  if (isOverlayView(appViewForPath(location.pathname))) {
+    return null
+  }
+
   const visibleSystemTools = systemTools.filter(tool => !tool.hidden)
   const settingsTool = visibleSystemTools.find(tool => tool.id === 'settings')
   const visibleSystemToolsBeforeSettings = visibleSystemTools.filter(tool => tool.id !== 'settings')
diff --git a/apps/desktop/src/app/skills/index.tsx b/apps/desktop/src/app/skills/index.tsx
index da307610835..2f01ae0a49d 100644
--- a/apps/desktop/src/app/skills/index.tsx
+++ b/apps/desktop/src/app/skills/index.tsx
@@ -2,8 +2,6 @@ import type * as React from 'react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 
 import { PageLoader } from '@/components/page-loader'
-import { Button } from '@/components/ui/button'
-import { Codicon } from '@/components/ui/codicon'
 import { Switch } from '@/components/ui/switch'
 import { TextTab, TextTabMeta } from '@/components/ui/text-tab'
 import { getSkills, getToolsets, toggleSkill, toggleToolset } from '@/hermes'
@@ -11,7 +9,9 @@ import { cn } from '@/lib/utils'
 import { notify, notifyError } from '@/store/notifications'
 import type { SkillInfo, ToolsetInfo } from '@/types/hermes'
 
+import { useRefreshHotkey } from '../hooks/use-refresh-hotkey'
 import { useRouteEnumParam } from '../hooks/use-route-enum-param'
+import { PAGE_INSET_X } from '../layout-constants'
 import { PageSearchShell } from '../page-search-shell'
 import { asText, includesQuery, prettyName, toolNames } from '../settings/helpers'
 import { ToolsetConfigPanel } from '../settings/toolset-config-panel'
@@ -72,25 +72,22 @@ export function SkillsView({ setStatusbarItemGroup: _setStatusbarItemGroup, ...p
   const [skills, setSkills] = useState<SkillInfo[] | null>(null)
   const [toolsets, setToolsets] = useState<ToolsetInfo[] | null>(null)
   const [activeCategory, setActiveCategory] = useState<string | null>(null)
-  const [refreshing, setRefreshing] = useState(false)
   const [savingSkill, setSavingSkill] = useState<string | null>(null)
   const [savingToolset, setSavingToolset] = useState<string | null>(null)
   const [expandedToolset, setExpandedToolset] = useState<string | null>(null)
 
   const refreshCapabilities = useCallback(async () => {
-    setRefreshing(true)
-
     try {
       const [nextSkills, nextToolsets] = await Promise.all([getSkills(), getToolsets()])
       setSkills(nextSkills)
       setToolsets(nextToolsets)
     } catch (err) {
       notifyError(err, 'Skills failed to load')
-    } finally {
-      setRefreshing(false)
     }
   }, [])
 
+  useRefreshHotkey(refreshCapabilities)
+
   const refreshToolsets = useCallback(() => {
     getToolsets()
       .then(setToolsets)
@@ -181,65 +178,53 @@ export function SkillsView({ setStatusbarItemGroup: _setStatusbarItemGroup, ...p
     <PageSearchShell
       {...props}
       filters={
-        <>
-          <div className="flex flex-wrap items-center justify-center gap-x-2 gap-y-1">
-            <TextTab active={mode === 'skills'} onClick={() => setMode('skills')}>
-              Skills
+        mode === 'skills' && categories.length > 0 ? (
+          <>
+            <TextTab active={activeCategory === null} onClick={() => setActiveCategory(null)}>
+              All <TextTabMeta>{totalSkills}</TextTabMeta>
             </TextTab>
-            <TextTab active={mode === 'toolsets'} onClick={() => setMode('toolsets')}>
-              Toolsets
-            </TextTab>
-          </div>
-          {mode === 'skills' && categories.length > 0 && (
-            <div className="flex flex-wrap justify-center gap-x-2 gap-y-1">
-              <TextTab active={activeCategory === null} onClick={() => setActiveCategory(null)}>
-                All <TextTabMeta>{totalSkills}</TextTabMeta>
+            {categories.map(category => (
+              <TextTab
+                active={activeCategory === category.key}
+                key={category.key}
+                onClick={() => setActiveCategory(activeCategory === category.key ? null : category.key)}
+              >
+                {prettyName(category.key)} <TextTabMeta>{category.count}</TextTabMeta>
               </TextTab>
-              {categories.map(category => (
-                <TextTab
-                  active={activeCategory === category.key}
-                  key={category.key}
-                  onClick={() => setActiveCategory(activeCategory === category.key ? null : category.key)}
-                >
-                  {prettyName(category.key)} <TextTabMeta>{category.count}</TextTabMeta>
-                </TextTab>
-              ))}
-            </div>
-          )}
-        </>
+            ))}
+          </>
+        ) : undefined
       }
       onSearchChange={setQuery}
       searchPlaceholder={mode === 'skills' ? 'Search skills...' : 'Search toolsets...'}
-      searchTrailingAction={
-        <Button
-          aria-label={refreshing ? 'Refreshing skills' : 'Refresh skills'}
-          className="text-(--ui-text-tertiary) hover:bg-transparent hover:text-foreground"
-          disabled={refreshing}
-          onClick={() => void refreshCapabilities()}
-          size="icon-xs"
-          title={refreshing ? 'Refreshing skills' : 'Refresh skills'}
-          type="button"
-          variant="ghost"
-        >
-          <Codicon name="refresh" size="0.875rem" spinning={refreshing} />
-        </Button>
-      }
       searchValue={query}
+      tabs={
+        <>
+          <TextTab active={mode === 'skills'} onClick={() => setMode('skills')}>
+            Skills
+          </TextTab>
+          <TextTab active={mode === 'toolsets'} onClick={() => setMode('toolsets')}>
+            Toolsets
+          </TextTab>
+        </>
+      }
     >
       {!skills || !toolsets ? (
         <PageLoader label="Loading capabilities..." />
       ) : mode === 'skills' ? (
-        <div className="h-full overflow-y-auto px-4 py-3">
+        <div className={cn('h-full overflow-y-auto py-3', PAGE_INSET_X)}>
           {visibleSkills.length === 0 ? (
             <EmptyState description="Try a broader search or different category." title="No skills found" />
           ) : (
             <div className="space-y-4">
               {skillGroups.map(([category, list]) => (
                 <div className="space-y-1.5" key={category}>
-                  <div className="text-[0.68rem] font-semibold uppercase tracking-[0.12em] text-muted-foreground">
-                    {prettyName(category)}
-                  </div>
-                  <div className="divide-y divide-(--ui-stroke-quaternary)">
+                  {activeCategory === null && (
+                    <div className="text-[0.68rem] font-semibold uppercase tracking-[0.12em] text-muted-foreground">
+                      {prettyName(category)}
+                    </div>
+                  )}
+                  <div>
                     {list.map(skill => (
                       <div
                         className="grid gap-3 px-0 py-2.5 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-center"
@@ -265,7 +250,7 @@ export function SkillsView({ setStatusbarItemGroup: _setStatusbarItemGroup, ...p
           )}
         </div>
       ) : (
-        <div className="h-full overflow-y-auto px-4 py-3">
+        <div className={cn('h-full overflow-y-auto py-3', PAGE_INSET_X)}>
           {visibleToolsets.length === 0 ? (
             <EmptyState description="Try a broader search query." title="No toolsets found" />
           ) : (
@@ -273,7 +258,7 @@ export function SkillsView({ setStatusbarItemGroup: _setStatusbarItemGroup, ...p
               <div className="text-xs text-muted-foreground">
                 {enabledToolsets}/{toolsets.length} toolsets enabled
               </div>
-              <div className="divide-y divide-(--ui-stroke-quaternary)">
+              <div>
                 {visibleToolsets.map(toolset => {
                   const tools = toolNames(toolset)
                   const label = asText(toolset.label || toolset.name)
diff --git a/apps/desktop/src/app/updates-overlay.tsx b/apps/desktop/src/app/updates-overlay.tsx
index 1e0c6af6615..792665d4500 100644
--- a/apps/desktop/src/app/updates-overlay.tsx
+++ b/apps/desktop/src/app/updates-overlay.tsx
@@ -146,11 +146,6 @@ function IdleView({
   if (!status.supported) {
     return (
       <CenteredStatus
-        action={
-          <Button onClick={onLater} size="sm" variant="outline">
-            Close
-          </Button>
-        }
         body={status.message ?? 'This version of Hermes can’t update itself from inside the app.'}
         icon={<AlertCircle className="size-6 text-muted-foreground" />}
         title="Update not available"
@@ -176,11 +171,6 @@ function IdleView({
   if (behind === 0) {
     return (
       <CenteredStatus
-        action={
-          <Button onClick={onLater} size="sm" variant="outline">
-            Close
-          </Button>
-        }
         body="You’re running the latest version."
         icon={<CheckCircle2 className="size-7 text-emerald-600 dark:text-emerald-400" />}
         title="You’re all set"
@@ -208,11 +198,13 @@ function IdleView({
       <div className="grid gap-3 rounded-xl border border-border/70 bg-muted/20 px-4 py-3">
         {groups.map(group => (
           <div key={group.id}>
-            <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">{group.label}</p>
-            <ul className="mt-1.5 grid gap-1.5 text-sm text-foreground">
+            <p className="text-[0.625rem] font-semibold uppercase tracking-wide text-muted-foreground">
+              {group.label}
+            </p>
+            <ul className="mt-1.5 grid gap-1.5 text-xs text-foreground">
               {group.items.map(item => (
                 <li className="flex items-start gap-2" key={item}>
-                  <span aria-hidden className="mt-2 inline-block size-1.5 shrink-0 rounded-full bg-primary" />
+                  <span aria-hidden className="mt-1.5 inline-block size-1 shrink-0 rounded-full bg-primary" />
                   <span className="leading-snug">{item}</span>
                 </li>
               ))}
diff --git a/apps/desktop/src/components/desktop-onboarding-overlay.tsx b/apps/desktop/src/components/desktop-onboarding-overlay.tsx
index 75366731549..98c9fd21f82 100644
--- a/apps/desktop/src/components/desktop-onboarding-overlay.tsx
+++ b/apps/desktop/src/components/desktop-onboarding-overlay.tsx
@@ -4,6 +4,7 @@ import { useEffect, useMemo, useRef, useState } from 'react'
 
 import { ModelPickerDialog } from '@/components/model-picker'
 import { Button } from '@/components/ui/button'
+import { Codicon } from '@/components/ui/codicon'
 import { Input } from '@/components/ui/input'
 import { getGlobalModelOptions } from '@/hermes'
 import {
@@ -167,20 +168,20 @@ export function DesktopOnboardingOverlay({ enabled, onCompleted, requestGateway
 
   return (
     <div className="fixed inset-0 z-1300 flex items-center justify-center bg-(--ui-chat-surface-background) p-6">
-      <div className="w-full max-w-[45rem] overflow-hidden rounded-xl border border-(--ui-stroke-secondary) bg-(--ui-chat-bubble-background) shadow-sm">
+      <div className="relative w-full max-w-[45rem] overflow-hidden rounded-xl border border-(--ui-stroke-secondary) bg-(--ui-chat-bubble-background) shadow-sm">
         <Header />
+        {onboarding.manual ? (
+          <Button
+            aria-label="Close"
+            className="absolute right-3 top-3 z-10 text-(--ui-text-tertiary) hover:bg-(--chrome-action-hover) hover:text-foreground"
+            onClick={() => closeManualOnboarding()}
+            size="icon-sm"
+            variant="ghost"
+          >
+            <Codicon name="close" size="1rem" />
+          </Button>
+        ) : null}
         <div className="grid gap-3 p-5">
-          {onboarding.manual ? (
-            <div className="flex justify-end">
-              <button
-                className="text-xs font-medium text-muted-foreground transition hover:text-foreground"
-                onClick={() => closeManualOnboarding()}
-                type="button"
-              >
-                Close
-              </button>
-            </div>
-          ) : null}
           {reason ? <ReasonNotice reason={reason} /> : null}
           {ready ? showPicker ? <Picker ctx={ctx} /> : <FlowPanel ctx={ctx} flow={flow} /> : <Preparing boot={boot} />}
         </div>
diff --git a/apps/desktop/src/components/model-visibility-dialog.tsx b/apps/desktop/src/components/model-visibility-dialog.tsx
index 00acfe316c9..1deeb7adc77 100644
--- a/apps/desktop/src/components/model-visibility-dialog.tsx
+++ b/apps/desktop/src/components/model-visibility-dialog.tsx
@@ -2,6 +2,7 @@ import { useStore } from '@nanostores/react'
 import { useQuery } from '@tanstack/react-query'
 import { useMemo, useState } from 'react'
 
+import { BrailleSpinner } from '@/components/ui/braille-spinner'
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
 import { Switch } from '@/components/ui/switch'
 import type { HermesGateway } from '@/hermes'
@@ -86,7 +87,11 @@ export function ModelVisibilityDialog({ gw, onOpenChange, onOpenProviders, open,
         <div className="max-h-[55vh] overflow-y-auto pb-1">
           {providers.length === 0 ? (
             <div className="px-3 py-5 text-center text-xs text-muted-foreground">
-              {modelOptions.isPending ? 'Loading…' : 'No authenticated providers.'}
+              {modelOptions.isPending ? (
+                <BrailleSpinner className="mx-auto text-sm" />
+              ) : (
+                'No authenticated providers.'
+              )}
             </div>
           ) : (
             providers.map(provider => {
diff --git a/apps/desktop/src/components/ui/button.tsx b/apps/desktop/src/components/ui/button.tsx
index 117356741b2..b6cbb4e8f5d 100644
--- a/apps/desktop/src/components/ui/button.tsx
+++ b/apps/desktop/src/components/ui/button.tsx
@@ -20,10 +20,12 @@ const buttonVariants = cva(
         secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
         link: 'text-primary underline-offset-4 decoration-current/20 hover:underline',
-        // Boxless inline-text action (no bg/border). Reads as label text; add
-        // `font-semibold` and/or `underline` at the call site to emphasize the
-        // actionable word (e.g. a "Change" affordance next to muted copy).
-        text: 'text-muted-foreground underline-offset-4 hover:text-foreground hover:underline'
+        // Boxless inline-text action (no bg/border). Quiet by default — reads as
+        // muted label text, underlines on hover (e.g. "Cancel", "Clear").
+        text: 'text-muted-foreground underline-offset-4 hover:text-foreground hover:underline',
+        // Emphasized inline-text action: bold + always-underlined link. Use for
+        // the actionable affordance in a row ("Change", "Set", "Open logs", …).
+        textStrong: 'font-semibold text-muted-foreground underline underline-offset-4 hover:text-foreground'
       },
       size: {
         default: 'px-3 py-1.5 has-[>svg]:px-2.5',
diff --git a/apps/desktop/src/components/ui/dropdown-menu.tsx b/apps/desktop/src/components/ui/dropdown-menu.tsx
index 818843ec97f..0997b9c02d4 100644
--- a/apps/desktop/src/components/ui/dropdown-menu.tsx
+++ b/apps/desktop/src/components/ui/dropdown-menu.tsx
@@ -110,7 +110,7 @@ function DropdownMenuItem({
   return (
     <DropdownMenuPrimitive.Item
       className={cn(
-        "relative flex cursor-default items-center gap-2 rounded-md px-2 py-1 text-xs outline-hidden select-none focus:bg-(--ui-control-active-background) focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 [&_svg:not([class*='text-'])]:text-(--ui-text-tertiary) data-[variant=destructive]:*:[svg]:text-destructive!",
+        "relative flex cursor-pointer items-center gap-2 rounded-md px-2 py-1 text-xs outline-hidden select-none focus:bg-(--ui-control-active-background) focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 [&_svg:not([class*='text-'])]:text-(--ui-text-tertiary) data-[variant=destructive]:*:[svg]:text-destructive!",
         className
       )}
       data-inset={inset}
@@ -131,7 +131,7 @@ function DropdownMenuCheckboxItem({
     <DropdownMenuPrimitive.CheckboxItem
       checked={checked}
       className={cn(
-        "relative flex cursor-default items-center gap-2 rounded-md px-2 py-1 text-xs outline-hidden select-none focus:bg-(--ui-control-active-background) focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
+        "relative flex cursor-pointer items-center gap-2 rounded-md px-2 py-1 text-xs outline-hidden select-none focus:bg-(--ui-control-active-background) focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
         className
       )}
       data-slot="dropdown-menu-checkbox-item"
@@ -157,7 +157,7 @@ function DropdownMenuRadioItem({
   return (
     <DropdownMenuPrimitive.RadioItem
       className={cn(
-        "relative flex cursor-default items-center gap-2 rounded-md px-2 py-1 text-xs outline-hidden select-none focus:bg-(--ui-control-active-background) focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
+        "relative flex cursor-pointer items-center gap-2 rounded-md px-2 py-1 text-xs outline-hidden select-none focus:bg-(--ui-control-active-background) focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
         className
       )}
       data-slot="dropdown-menu-radio-item"
@@ -226,7 +226,7 @@ function DropdownMenuSubTrigger({
   return (
     <DropdownMenuPrimitive.SubTrigger
       className={cn(
-        "flex cursor-default items-center gap-2 rounded-md px-2 py-1 text-xs outline-hidden select-none focus:bg-(--ui-control-active-background) focus:text-foreground data-[inset]:pl-7 data-[state=open]:bg-(--ui-control-active-background) data-[state=open]:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 [&_svg:not([class*='text-'])]:text-(--ui-text-tertiary)",
+        "flex cursor-pointer items-center gap-2 rounded-md px-2 py-1 text-xs outline-hidden select-none focus:bg-(--ui-control-active-background) focus:text-foreground data-[inset]:pl-7 data-[state=open]:bg-(--ui-control-active-background) data-[state=open]:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 [&_svg:not([class*='text-'])]:text-(--ui-text-tertiary)",
         className
       )}
       data-inset={inset}
diff --git a/apps/desktop/src/components/ui/search-field.tsx b/apps/desktop/src/components/ui/search-field.tsx
new file mode 100644
index 00000000000..90d8d7c74bc
--- /dev/null
+++ b/apps/desktop/src/components/ui/search-field.tsx
@@ -0,0 +1,78 @@
+import type { ReactNode, RefObject } from 'react'
+
+import { Button } from '@/components/ui/button'
+import { Codicon } from '@/components/ui/codicon'
+import { Loader2, Search } from '@/lib/icons'
+import { cn } from '@/lib/utils'
+
+interface SearchFieldProps {
+  placeholder: string
+  value: string
+  onChange: (value: string) => void
+  containerClassName?: string
+  inputClassName?: string
+  loading?: boolean
+  onClear?: () => void
+  inputRef?: RefObject<HTMLInputElement | null>
+  trailingAction?: ReactNode
+  'aria-label'?: string
+}
+
+/**
+ * Shared search field used everywhere (sessions sidebar, pages, overlays,
+ * command center, cron). No box — borderless until focus, then an underline.
+ * Width/placement come from `containerClassName`.
+ */
+export function SearchField({
+  placeholder,
+  value,
+  onChange,
+  containerClassName,
+  inputClassName,
+  loading = false,
+  onClear,
+  inputRef,
+  trailingAction,
+  'aria-label': ariaLabel
+}: SearchFieldProps) {
+  const clear = onClear ?? (() => onChange(''))
+
+  return (
+    <div
+      className={cn(
+        'inline-flex max-w-full items-center gap-1.5 border-b border-transparent px-0.5 transition-colors focus-within:border-(--ui-stroke-secondary)',
+        containerClassName
+      )}
+    >
+      <Search className="pointer-events-none size-3.5 shrink-0 text-muted-foreground/70" />
+      <input
+        aria-label={ariaLabel}
+        className={cn(
+          // `field-sizing: content` grows the input to fit the placeholder/typed
+          // text, capped by the container's max-width — no awkward empty space.
+          'h-7 max-w-full bg-transparent text-sm text-foreground [field-sizing:content] placeholder:text-muted-foreground focus:outline-none',
+          inputClassName
+        )}
+        onChange={event => onChange(event.target.value)}
+        placeholder={placeholder}
+        ref={inputRef}
+        type="text"
+        value={value}
+      />
+      {trailingAction}
+      {loading ? (
+        <Loader2 className="pointer-events-none size-3.5 shrink-0 animate-spin text-muted-foreground/70" />
+      ) : value ? (
+        <Button
+          aria-label="Clear search"
+          className="shrink-0 text-muted-foreground/85 hover:bg-accent/60 hover:text-foreground"
+          onClick={clear}
+          size="icon-xs"
+          variant="ghost"
+        >
+          <Codicon name="close" size="0.875rem" />
+        </Button>
+      ) : null}
+    </div>
+  )
+}
diff --git a/apps/desktop/src/components/ui/segmented-control.tsx b/apps/desktop/src/components/ui/segmented-control.tsx
new file mode 100644
index 00000000000..994cc17a99b
--- /dev/null
+++ b/apps/desktop/src/components/ui/segmented-control.tsx
@@ -0,0 +1,51 @@
+import type { IconComponent } from '@/lib/icons'
+import { cn } from '@/lib/utils'
+
+export interface SegmentedControlOption<T extends string> {
+  id: T
+  label: string
+  icon?: IconComponent
+}
+
+interface SegmentedControlProps<T extends string> {
+  options: readonly SegmentedControlOption<T>[]
+  value: T
+  onChange: (id: T) => void
+  className?: string
+}
+
+/**
+ * Grouped one-row toggle used for small mutually-exclusive choices
+ * (color mode, tool-call display, usage period, etc.). Flat by design —
+ * no per-option borders, just a tinted track with a raised active pill.
+ */
+export function SegmentedControl<T extends string>({ options, value, onChange, className }: SegmentedControlProps<T>) {
+  return (
+    <div
+      className={cn(
+        'inline-grid w-fit auto-cols-fr grid-flow-col gap-0.5 rounded-[5px] bg-(--ui-bg-tertiary) p-0.5',
+        className
+      )}
+    >
+      {options.map(({ id, label, icon: Icon }) => {
+        const active = value === id
+
+        return (
+          <button
+            aria-pressed={active}
+            className={cn(
+              'flex items-center justify-center gap-1 rounded-[3px] px-2.5 py-0.5 text-[0.6875rem] font-medium transition-colors',
+              active ? 'bg-background text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'
+            )}
+            key={id}
+            onClick={() => onChange(id)}
+            type="button"
+          >
+            {Icon && <Icon className="size-3" />}
+            {label}
+          </button>
+        )
+      })}
+    </div>
+  )
+}
diff --git a/apps/desktop/src/components/ui/select.tsx b/apps/desktop/src/components/ui/select.tsx
index eeee4cb7df5..db5fd9a6985 100644
--- a/apps/desktop/src/components/ui/select.tsx
+++ b/apps/desktop/src/components/ui/select.tsx
@@ -73,7 +73,7 @@ function SelectItem({ className, children, ...props }: React.ComponentProps<type
   return (
     <SelectPrimitive.Item
       className={cn(
-        'relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-xs outline-none select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
+        'relative flex w-full cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-xs outline-none select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50',
         className
       )}
       data-slot="select-item"
diff --git a/apps/desktop/src/store/command-palette.ts b/apps/desktop/src/store/command-palette.ts
new file mode 100644
index 00000000000..d214d1c2f26
--- /dev/null
+++ b/apps/desktop/src/store/command-palette.ts
@@ -0,0 +1,20 @@
+import { atom } from 'nanostores'
+
+/** Whether the global command palette (Cmd/Ctrl+K) is currently open. */
+export const $commandPaletteOpen = atom(false)
+
+export function openCommandPalette(): void {
+  $commandPaletteOpen.set(true)
+}
+
+export function closeCommandPalette(): void {
+  $commandPaletteOpen.set(false)
+}
+
+export function setCommandPaletteOpen(open: boolean): void {
+  $commandPaletteOpen.set(open)
+}
+
+export function toggleCommandPalette(): void {
+  $commandPaletteOpen.set(!$commandPaletteOpen.get())
+}
diff --git a/apps/desktop/src/styles.css b/apps/desktop/src/styles.css
index d4fdb64a9e3..1afef1f0189 100644
--- a/apps/desktop/src/styles.css
+++ b/apps/desktop/src/styles.css
@@ -517,6 +517,26 @@
   }
 }
 
+/* Command-palette deep-link: briefly flash the targeted settings row. */
+@keyframes setting-field-flash {
+  0% {
+    background-color: color-mix(in srgb, var(--dt-primary, #f59e0b) 22%, transparent);
+  }
+  100% {
+    background-color: transparent;
+  }
+}
+
+.setting-field-highlight {
+  animation: setting-field-flash 1.6s ease-out;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .setting-field-highlight {
+    animation: none;
+  }
+}
+
 .arc-border::before {
   content: '';
   position: absolute;

From 311e80809f50f220d014e74d3964c973131575e4 Mon Sep 17 00:00:00 2001
From: Brooklyn Nicholson <brooklyn.bb.nicholson@gmail.com>
Date: Wed, 3 Jun 2026 23:46:49 -0500
Subject: [PATCH 17/29] style(desktop): tidy root error-boundary actions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Reload window → text link, Open logs pushed right (ml-auto), and the
error message box drops the oversized rounded-2xl for rounded-md.
---
 apps/desktop/src/components/error-boundary.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/apps/desktop/src/components/error-boundary.tsx b/apps/desktop/src/components/error-boundary.tsx
index 0afef1c9e2a..596ace59a40 100644
--- a/apps/desktop/src/components/error-boundary.tsx
+++ b/apps/desktop/src/components/error-boundary.tsx
@@ -68,19 +68,23 @@ function RootErrorFallback({ error, reset }: ErrorBoundaryFallbackProps) {
         </div>
 
         <div className="grid gap-4 p-5">
-          <div className="rounded-2xl border border-destructive/30 bg-destructive/10 px-4 py-3 font-mono text-[0.7rem] leading-4 text-destructive">
+          <div className="rounded-md border border-destructive/30 bg-destructive/10 px-4 py-3 font-mono text-[0.7rem] leading-4 text-destructive">
             {error.message || String(error)}
           </div>
 
-          <div className="flex flex-wrap gap-2">
+          <div className="flex flex-wrap items-center gap-4">
             <Button onClick={reset}>
               <RefreshCw className="size-4" />
               Try again
             </Button>
-            <Button onClick={() => window.location.reload()} variant="outline">
+            <Button onClick={() => window.location.reload()} variant="text">
               Reload window
             </Button>
-            <Button onClick={() => void window.hermesDesktop?.revealLogs()?.catch(() => undefined)} variant="ghost">
+            <Button
+              className="ml-auto"
+              onClick={() => void window.hermesDesktop?.revealLogs()?.catch(() => undefined)}
+              variant="text"
+            >
               Open logs
             </Button>
           </div>

From ded620b7114df6145838e99c3da99ae057cf4a9c Mon Sep 17 00:00:00 2001
From: Brooklyn Nicholson <brooklyn.bb.nicholson@gmail.com>
Date: Wed, 3 Jun 2026 23:47:42 -0500
Subject: [PATCH 18/29] =?UTF-8?q?style(desktop):=20fix=20profiles=20sideba?=
 =?UTF-8?q?r=20=E2=80=94=20header=20+=20add-icon,=20drop=20text-link?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The full-width `text` New-profile button drew an underline under the +
glyph on hover (text-decoration spans the icon). Replace with a proper
"PROFILES" section header + ghost add-icon button, matching the chat
sidebar's header/new-item pattern.
---
 apps/desktop/src/app/profiles/index.tsx | 25 +++++++++++++++----------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/apps/desktop/src/app/profiles/index.tsx b/apps/desktop/src/app/profiles/index.tsx
index ec528df00d8..7bd44829e22 100644
--- a/apps/desktop/src/app/profiles/index.tsx
+++ b/apps/desktop/src/app/profiles/index.tsx
@@ -143,15 +143,20 @@ export function ProfilesView({ onClose }: ProfilesViewProps) {
       ) : (
         <OverlaySplitLayout>
           <OverlaySidebar>
-            <Button
-              className="mb-1 w-full justify-start gap-2"
-              onClick={() => setCreateOpen(true)}
-              size="sm"
-              variant="text"
-            >
-              <Codicon name="add" />
-              New profile
-            </Button>
+            <div className="mb-1 flex items-center justify-between gap-2 pl-1.5 pr-0.5">
+              <span className="text-[0.7rem] font-semibold uppercase tracking-wider text-(--ui-text-tertiary)">
+                Profiles
+              </span>
+              <Button
+                aria-label="New profile"
+                className="text-(--ui-text-tertiary) hover:bg-(--ui-control-hover-background) hover:text-foreground"
+                onClick={() => setCreateOpen(true)}
+                size="icon-xs"
+                variant="ghost"
+              >
+                <Codicon name="add" size="0.875rem" />
+              </Button>
+            </div>
             {profiles.map(profile => (
               <ProfileRow
                 active={selected?.name === profile.name}
@@ -161,7 +166,7 @@ export function ProfilesView({ onClose }: ProfilesViewProps) {
               />
             ))}
             {profiles.length === 0 && (
-              <p className="px-2 py-4 text-center text-xs text-muted-foreground">No profiles yet.</p>
+              <p className="px-1.5 py-3 text-xs text-muted-foreground">No profiles yet.</p>
             )}
           </OverlaySidebar>
 

From 88bdb6b074514ec674629006e5d58f2c4683b108 Mon Sep 17 00:00:00 2001
From: Brooklyn Nicholson <brooklyn.bb.nicholson@gmail.com>
Date: Wed, 3 Jun 2026 23:48:22 -0500
Subject: [PATCH 19/29] style(desktop): kill focus rings globally

Tab/focus showed Tailwind's `focus-visible:ring-*` (a box-shadow) plus the
native outline. Drop both via an unlayered reset that nulls --tw-ring-*;
the composer / input soft-glow is untouched (those use direct box-shadows).
---
 apps/desktop/src/styles.css | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/apps/desktop/src/styles.css b/apps/desktop/src/styles.css
index 1afef1f0189..ab483818a63 100644
--- a/apps/desktop/src/styles.css
+++ b/apps/desktop/src/styles.css
@@ -568,6 +568,21 @@
   }
 }
 
+/* No focus rings, anywhere. Kills the native outline plus Tailwind's
+   `focus-visible:ring-*` (a box-shadow driven by --tw-ring-*). Unlayered so it
+   beats the utilities layer without !important on the outline. The composer /
+   .desktop-input-chrome focus glow is untouched — those set `box-shadow`
+   directly rather than through the ring vars. */
+*:focus,
+*:focus-visible {
+  outline: none;
+}
+
+*:focus-visible {
+  --tw-ring-shadow: 0 0 #0000 !important;
+  --tw-ring-offset-shadow: 0 0 #0000 !important;
+}
+
 button {
   -webkit-app-region: no-drag;
 }

From fd88d527af37e9d76a611e1507c4dcc062b994bb Mon Sep 17 00:00:00 2001
From: Brooklyn Nicholson <brooklyn.bb.nicholson@gmail.com>
Date: Wed, 3 Jun 2026 23:49:45 -0500
Subject: [PATCH 20/29] style(desktop): shared Badge component; tidy profile
 metadata
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add a proper shadcn-style Badge (CVA tones, app radius — not a full pill)
and use it for the Default/.env tags instead of bespoke rounded-full spans.
Drop the oversized text-sm metadata values to text-xs.
---
 apps/desktop/src/app/profiles/index.tsx  | 15 +++--------
 apps/desktop/src/components/ui/badge.tsx | 34 ++++++++++++++++++++++++
 2 files changed, 38 insertions(+), 11 deletions(-)
 create mode 100644 apps/desktop/src/components/ui/badge.tsx

diff --git a/apps/desktop/src/app/profiles/index.tsx b/apps/desktop/src/app/profiles/index.tsx
index 7bd44829e22..46bb8721e02 100644
--- a/apps/desktop/src/app/profiles/index.tsx
+++ b/apps/desktop/src/app/profiles/index.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 import { PageLoader } from '@/components/page-loader'
+import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { Codicon } from '@/components/ui/codicon'
 import {
@@ -282,16 +283,8 @@ function ProfileDetail({
               <div className="min-w-0">
                 <div className="flex flex-wrap items-center gap-2">
                   <h3 className="text-xl font-semibold tracking-tight">{profile.name}</h3>
-                  {profile.is_default && (
-                    <span className="rounded-full bg-primary/10 px-2 py-0.5 text-[0.65rem] font-medium text-primary">
-                      Default
-                    </span>
-                  )}
-                  {profile.has_env && (
-                    <span className="rounded-full bg-muted px-2 py-0.5 text-[0.65rem] font-medium text-muted-foreground">
-                      .env
-                    </span>
-                  )}
+                  {profile.is_default && <Badge>Default</Badge>}
+                  {profile.has_env && <Badge variant="muted">.env</Badge>}
                 </div>
                 <p className="mt-1 font-mono text-[0.7rem] text-muted-foreground" title={profile.path}>
                   {profile.path}
@@ -358,7 +351,7 @@ function DetailRow({ children, label }: { children: React.ReactNode; label: stri
   return (
     <div className="flex flex-wrap items-baseline gap-2">
       <dt className="text-[0.65rem] font-semibold uppercase tracking-[0.12em] text-muted-foreground">{label}</dt>
-      <dd className="text-sm text-foreground">{children}</dd>
+      <dd className="text-xs text-foreground">{children}</dd>
     </div>
   )
 }
diff --git a/apps/desktop/src/components/ui/badge.tsx b/apps/desktop/src/components/ui/badge.tsx
new file mode 100644
index 00000000000..1b3091c1884
--- /dev/null
+++ b/apps/desktop/src/components/ui/badge.tsx
@@ -0,0 +1,34 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+import { Slot } from 'radix-ui'
+import type * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+// Small status/metadata tag. App radius (not a full pill); tones map to the
+// shared accent/muted/destructive surfaces so badges read consistently.
+const badgeVariants = cva(
+  'inline-flex w-fit shrink-0 items-center gap-1 rounded-[3px] px-1.5 py-0.5 text-[0.65rem] font-medium leading-none whitespace-nowrap [&_svg]:size-3 [&_svg]:pointer-events-none',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary/10 text-primary',
+        muted: 'bg-muted text-muted-foreground',
+        destructive: 'bg-destructive/10 text-destructive',
+        outline: 'border border-(--ui-stroke-secondary) text-muted-foreground'
+      }
+    },
+    defaultVariants: { variant: 'default' }
+  }
+)
+
+export interface BadgeProps extends React.ComponentProps<'span'>, VariantProps<typeof badgeVariants> {
+  asChild?: boolean
+}
+
+export function Badge({ asChild = false, className, variant, ...props }: BadgeProps) {
+  const Comp = asChild ? Slot.Root : 'span'
+
+  return <Comp className={cn(badgeVariants({ variant }), className)} data-slot="badge" {...props} />
+}
+
+export { badgeVariants }

From e026fd88cdbbce9857d184ad2b11c5309f4f9e62 Mon Sep 17 00:00:00 2001
From: Brooklyn Nicholson <brooklyn.bb.nicholson@gmail.com>
Date: Wed, 3 Jun 2026 23:52:51 -0500
Subject: [PATCH 21/29] style(desktop): migrate bespoke pills to shared Badge;
 tidy cron/titlebar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Sidebar toggles in the titlebar no longer carry an active highlight —
  they're plain show/hide affordances now.
- Replace every bespoke rounded-full status pill (cron, messaging,
  settings, skills) with the shared Badge (adds a `warn` tone). App radius,
  one component.
- Cron row actions use Codicons (play/debug-pause/zap/edit/trash) to match
  the rest of the chrome instead of stray lucide glyphs.
---
 apps/desktop/src/app/cron/index.tsx           | 48 ++++++++-----------
 apps/desktop/src/app/messaging/index.tsx      | 31 ++++--------
 apps/desktop/src/app/settings/primitives.tsx  | 12 +----
 .../src/app/shell/titlebar-controls.tsx       | 11 ++---
 apps/desktop/src/app/skills/index.tsx         | 10 ++--
 apps/desktop/src/components/ui/badge.tsx      |  1 +
 6 files changed, 39 insertions(+), 74 deletions(-)

diff --git a/apps/desktop/src/app/cron/index.tsx b/apps/desktop/src/app/cron/index.tsx
index 9929b92f785..c543d918a4a 100644
--- a/apps/desktop/src/app/cron/index.tsx
+++ b/apps/desktop/src/app/cron/index.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from 'react'
 
 import { PageLoader } from '@/components/page-loader'
+import { Badge, type BadgeProps } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { Codicon } from '@/components/ui/codicon'
 import {
@@ -25,7 +26,7 @@ import {
   triggerCronJob,
   updateCronJob
 } from '@/hermes'
-import { AlertTriangle, Clock, Pause, Pencil, Play, Trash2, Zap } from '@/lib/icons'
+import { AlertTriangle, Clock } from '@/lib/icons'
 import { cn } from '@/lib/utils'
 import { notify, notifyError } from '@/store/notifications'
 
@@ -86,23 +87,16 @@ const SCHEDULE_OPTIONS: ReadonlyArray<ScheduleOption> = [
   }
 ]
 
-const STATE_TONE: Record<string, 'good' | 'muted' | 'warn' | 'bad'> = {
-  enabled: 'good',
-  scheduled: 'good',
-  running: 'good',
+const STATE_VARIANT: Record<string, BadgeProps['variant']> = {
+  enabled: 'default',
+  scheduled: 'default',
+  running: 'default',
   paused: 'warn',
   disabled: 'muted',
-  error: 'bad',
+  error: 'destructive',
   completed: 'muted'
 }
 
-const PILL_TONE: Record<'good' | 'muted' | 'warn' | 'bad', string> = {
-  good: 'bg-primary/10 text-primary',
-  muted: 'bg-muted text-muted-foreground',
-  warn: 'bg-amber-500/10 text-amber-600 dark:text-amber-300',
-  bad: 'bg-destructive/10 text-destructive'
-}
-
 const asText = (value: unknown): string => (typeof value === 'string' ? value : '')
 
 const truncate = (value: string, max = 80): string => (value.length > max ? `${value.slice(0, max)}…` : value)
@@ -541,8 +535,14 @@ function CronJobRow({
       >
         <div className="flex flex-wrap items-center gap-2">
           <span className="truncate text-sm font-medium">{jobTitle(job)}</span>
-          <StatePill tone={STATE_TONE[state] ?? 'muted'}>{state}</StatePill>
-          {deliver && deliver !== DEFAULT_DELIVER && <StatePill tone="muted">{deliver}</StatePill>}
+          <Badge className="capitalize" variant={STATE_VARIANT[state] ?? 'muted'}>
+            {state}
+          </Badge>
+          {deliver && deliver !== DEFAULT_DELIVER && (
+            <Badge className="capitalize" variant="muted">
+              {deliver}
+            </Badge>
+          )}
         </div>
         {hasName && prompt && <p className="mt-1 truncate text-xs text-muted-foreground">{truncate(prompt, 120)}</p>}
         <div className="mt-1 flex flex-wrap items-center gap-x-4 gap-y-1 text-[0.68rem] text-muted-foreground">
@@ -568,13 +568,13 @@ function CronJobRow({
           onClick={onPauseResume}
           title={isPaused ? 'Resume' : 'Pause'}
         >
-          {isPaused ? <Play className="size-3.5" /> : <Pause className="size-3.5" />}
+          <Codicon name={isPaused ? 'play' : 'debug-pause'} size="0.875rem" />
         </IconAction>
         <IconAction aria-label="Trigger now" disabled={busy} onClick={onTrigger} title="Trigger now">
-          <Zap className="size-3.5" />
+          <Codicon name="zap" size="0.875rem" />
         </IconAction>
         <IconAction aria-label="Edit cron" onClick={onEdit} title="Edit">
-          <Pencil className="size-3.5" />
+          <Codicon name="edit" size="0.875rem" />
         </IconAction>
         <IconAction
           aria-label="Delete cron"
@@ -582,7 +582,7 @@ function CronJobRow({
           onClick={onDelete}
           title="Delete"
         >
-          <Trash2 className="size-3.5" />
+          <Codicon name="trash" size="0.875rem" />
         </IconAction>
       </div>
     </div>
@@ -602,16 +602,6 @@ function IconAction({ children, className, ...props }: Omit<React.ComponentProps
   )
 }
 
-function StatePill({ children, tone }: { children: string; tone: keyof typeof PILL_TONE }) {
-  return (
-    <span
-      className={cn('inline-flex items-center rounded-full px-1.5 py-0.5 text-[0.64rem] capitalize', PILL_TONE[tone])}
-    >
-      {children}
-    </span>
-  )
-}
-
 function EmptyState({
   actionLabel,
   description,
diff --git a/apps/desktop/src/app/messaging/index.tsx b/apps/desktop/src/app/messaging/index.tsx
index 4922838da6c..c4d08d58d9a 100644
--- a/apps/desktop/src/app/messaging/index.tsx
+++ b/apps/desktop/src/app/messaging/index.tsx
@@ -3,6 +3,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
 
 import { PageLoader } from '@/components/page-loader'
 import { StatusDot, type StatusTone } from '@/components/status-dot'
+import { Badge, type BadgeProps } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { DisclosureCaret } from '@/components/ui/disclosure-caret'
 import { Input } from '@/components/ui/input'
@@ -42,11 +43,11 @@ const STATE_LABELS: Record<string, string> = {
   startup_failed: 'Startup failed'
 }
 
-const PILL_TONE: Record<StatusTone, string> = {
-  good: 'bg-primary/10 text-primary',
-  muted: 'bg-muted text-muted-foreground',
-  warn: 'bg-amber-500/10 text-amber-600 dark:text-amber-300',
-  bad: 'bg-destructive/10 text-destructive'
+const TONE_VARIANT: Record<StatusTone, BadgeProps['variant']> = {
+  good: 'default',
+  muted: 'muted',
+  warn: 'warn',
+  bad: 'destructive'
 }
 
 const HINT_BY_STATE: Record<string, string> = {
@@ -696,27 +697,13 @@ function PlatformHint({ platform }: { platform: MessagingPlatformInfo }) {
 
 function StatePill({ children, tone }: { children: string; tone: StatusTone }) {
   return (
-    <span
-      className={cn(
-        'inline-flex shrink-0 items-center gap-1.5 rounded-full px-2 py-0.5 text-[0.66rem] font-medium',
-        PILL_TONE[tone]
-      )}
-    >
+    <Badge variant={TONE_VARIANT[tone]}>
       <StatusDot tone={tone} />
       {children}
-    </span>
+    </Badge>
   )
 }
 
 function SetupPill({ active, children }: { active: boolean; children: string }) {
-  return (
-    <span
-      className={cn(
-        'inline-flex items-center rounded-full px-2 py-0.5 text-[0.66rem] font-medium',
-        PILL_TONE[active ? 'good' : 'muted']
-      )}
-    >
-      {children}
-    </span>
-  )
+  return <Badge variant={active ? 'default' : 'muted'}>{children}</Badge>
 }
diff --git a/apps/desktop/src/app/settings/primitives.tsx b/apps/desktop/src/app/settings/primitives.tsx
index 788c3d063e7..e2ebcbe5975 100644
--- a/apps/desktop/src/app/settings/primitives.tsx
+++ b/apps/desktop/src/app/settings/primitives.tsx
@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react'
 
 import { PageLoader } from '@/components/page-loader'
+import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import type { IconComponent } from '@/lib/icons'
 import { cn } from '@/lib/utils'
@@ -18,16 +19,7 @@ export function SettingsContent({ children }: { children: ReactNode }) {
 }
 
 export function Pill({ tone = 'muted', children }: { tone?: 'muted' | 'primary'; children: ReactNode }) {
-  return (
-    <span
-      className={cn(
-        'inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[0.6875rem]',
-        tone === 'primary' ? 'bg-primary/10 text-primary' : 'bg-muted text-muted-foreground'
-      )}
-    >
-      {children}
-    </span>
-  )
+  return <Badge variant={tone === 'primary' ? 'default' : 'muted'}>{children}</Badge>
 }
 
 export function SectionHeading({ icon: Icon, title, meta }: { icon: IconComponent; title: string; meta?: string }) {
diff --git a/apps/desktop/src/app/shell/titlebar-controls.tsx b/apps/desktop/src/app/shell/titlebar-controls.tsx
index 67351044a53..5c3336fb456 100644
--- a/apps/desktop/src/app/shell/titlebar-controls.tsx
+++ b/apps/desktop/src/app/shell/titlebar-controls.tsx
@@ -73,17 +73,15 @@ export function TitlebarControls({ leftTools = [], tools = [], onOpenSettings }:
 
   // Each titlebar button controls the pane physically on its side, so a flip
   // swaps which pane each one toggles. Default: sessions left, file browser
-  // right. Flipped: file browser left, sessions right.
-  // `active` stays tied to the file browser (the toggleable extra pane) rather
-  // than the sessions sidebar, which has never shown a highlight.
-  const fileBrowserEdge = { active: fileBrowserOpen, open: fileBrowserOpen, toggle: toggleFileBrowserOpen }
-  const sessionsEdge = { active: undefined, open: sidebarOpen, toggle: toggleSidebarOpen }
+  // right. Flipped: file browser left, sessions right. Sidebar toggles never
+  // carry an active highlight — they're plain show/hide affordances.
+  const fileBrowserEdge = { open: fileBrowserOpen, toggle: toggleFileBrowserOpen }
+  const sessionsEdge = { open: sidebarOpen, toggle: toggleSidebarOpen }
   const leftEdge = panesFlipped ? fileBrowserEdge : sessionsEdge
   const rightEdge = panesFlipped ? sessionsEdge : fileBrowserEdge
 
   const leftToolbarTools: TitlebarTool[] = [
     {
-      active: leftEdge.active,
       icon: <Codicon name="layout-sidebar-left" />,
       id: 'sidebar',
       label: `${leftEdge.open ? 'Hide' : 'Show'} left sidebar`,
@@ -106,7 +104,6 @@ export function TitlebarControls({ leftTools = [], tools = [], onOpenSettings }:
   ]
 
   const rightSidebarTool: TitlebarTool = {
-    active: rightEdge.active,
     icon: <Codicon name="layout-sidebar-right" />,
     id: 'right-sidebar',
     label: `${rightEdge.open ? 'Hide' : 'Show'} right sidebar`,
diff --git a/apps/desktop/src/app/skills/index.tsx b/apps/desktop/src/app/skills/index.tsx
index 2f01ae0a49d..3ee2d2ecb97 100644
--- a/apps/desktop/src/app/skills/index.tsx
+++ b/apps/desktop/src/app/skills/index.tsx
@@ -2,6 +2,7 @@ import type * as React from 'react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 
 import { PageLoader } from '@/components/page-loader'
+import { Badge } from '@/components/ui/badge'
 import { Switch } from '@/components/ui/switch'
 import { TextTab, TextTabMeta } from '@/components/ui/text-tab'
 import { getSkills, getToolsets, toggleSkill, toggleToolset } from '@/hermes'
@@ -318,14 +319,11 @@ export function SkillsView({ setStatusbarItemGroup: _setStatusbarItemGroup, ...p
 
 function StatusPill({ active, children }: { active: boolean; children: string }) {
   return (
-    <span
-      className={cn(
-        'inline-flex items-center rounded-full px-1.5 py-0.5 text-[0.64rem]',
-        active ? 'bg-(--ui-bg-tertiary) text-(--ui-text-secondary)' : 'bg-(--ui-bg-quinary) text-(--ui-text-tertiary)'
-      )}
+    <Badge
+      className={active ? 'bg-(--ui-bg-tertiary) text-(--ui-text-secondary)' : 'bg-(--ui-bg-quinary) text-(--ui-text-tertiary)'}
     >
       {children}
-    </span>
+    </Badge>
   )
 }
 
diff --git a/apps/desktop/src/components/ui/badge.tsx b/apps/desktop/src/components/ui/badge.tsx
index 1b3091c1884..6f286c3fde7 100644
--- a/apps/desktop/src/components/ui/badge.tsx
+++ b/apps/desktop/src/components/ui/badge.tsx
@@ -13,6 +13,7 @@ const badgeVariants = cva(
       variant: {
         default: 'bg-primary/10 text-primary',
         muted: 'bg-muted text-muted-foreground',
+        warn: 'bg-amber-500/10 text-amber-600 dark:text-amber-300',
         destructive: 'bg-destructive/10 text-destructive',
         outline: 'border border-(--ui-stroke-secondary) text-muted-foreground'
       }

From fd68ae63315ae073b4e310d4f3a82c29331ddc22 Mon Sep 17 00:00:00 2001
From: Brooklyn Nicholson <brooklyn.bb.nicholson@gmail.com>
Date: Wed, 3 Jun 2026 23:53:10 -0500
Subject: [PATCH 22/29] style(desktop): drop active background on titlebar
 actions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Mute/haptics state reads from the icon glyph (and aria-pressed) — no
background highlight on any titlebar action.
---
 apps/desktop/src/app/shell/titlebar-controls.tsx | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/apps/desktop/src/app/shell/titlebar-controls.tsx b/apps/desktop/src/app/shell/titlebar-controls.tsx
index 5c3336fb456..43496794619 100644
--- a/apps/desktop/src/app/shell/titlebar-controls.tsx
+++ b/apps/desktop/src/app/shell/titlebar-controls.tsx
@@ -235,12 +235,10 @@ function ProfilesMenuButton({ navigate }: { navigate: ReturnType<typeof useNavig
 }
 
 function TitlebarToolButton({ navigate, tool }: { navigate: ReturnType<typeof useNavigate>; tool: TitlebarTool }) {
-  const className = cn(
-    titlebarButtonClass,
-    'bg-transparent select-none',
-    tool.active && 'bg-(--ui-control-active-background)! text-foreground!',
-    tool.className
-  )
+  // Titlebar actions never show an active background — state reads from the
+  // icon itself (e.g. the mute/unmute glyph). aria-pressed still carries it
+  // for a11y.
+  const className = cn(titlebarButtonClass, 'bg-transparent select-none', tool.className)
 
   if (tool.href) {
     return (

From 9e02b18828a28347b244bd0de66e63b7b30498f5 Mon Sep 17 00:00:00 2001
From: Brooklyn Nicholson <brooklyn.bb.nicholson@gmail.com>
Date: Wed, 3 Jun 2026 23:53:25 -0500
Subject: [PATCH 23/29] style(desktop): tighten error-boundary action gap
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

gap-4 → gap-2.5 between Try again / Reload window.
---
 apps/desktop/src/components/error-boundary.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/desktop/src/components/error-boundary.tsx b/apps/desktop/src/components/error-boundary.tsx
index 596ace59a40..d9f4bb80dfa 100644
--- a/apps/desktop/src/components/error-boundary.tsx
+++ b/apps/desktop/src/components/error-boundary.tsx
@@ -72,7 +72,7 @@ function RootErrorFallback({ error, reset }: ErrorBoundaryFallbackProps) {
             {error.message || String(error)}
           </div>
 
-          <div className="flex flex-wrap items-center gap-4">
+          <div className="flex flex-wrap items-center gap-2.5">
             <Button onClick={reset}>
               <RefreshCw className="size-4" />
               Try again

From aecdc75bb001f0ceeebf68a80676e8e9aa984ba2 Mon Sep 17 00:00:00 2001
From: Brooklyn Nicholson <brooklyn.bb.nicholson@gmail.com>
Date: Wed, 3 Jun 2026 23:55:04 -0500
Subject: [PATCH 24/29] style(desktop): hide search when there's nothing to
 search

Empty datasets no longer render a search field. Adds a `searchHidden` prop
to PageSearchShell (artifacts/skills/messaging) and gates cron + command
center sessions search on a non-empty list. The chat sidebar already did
this via showSessionSections.
---
 apps/desktop/src/app/artifacts/index.tsx      |  1 +
 apps/desktop/src/app/command-center/index.tsx |  2 +-
 apps/desktop/src/app/cron/index.tsx           | 18 ++++++-----
 apps/desktop/src/app/messaging/index.tsx      |  1 +
 apps/desktop/src/app/page-search-shell.tsx    | 31 ++++++++++++-------
 apps/desktop/src/app/skills/index.tsx         |  1 +
 6 files changed, 33 insertions(+), 21 deletions(-)

diff --git a/apps/desktop/src/app/artifacts/index.tsx b/apps/desktop/src/app/artifacts/index.tsx
index b6205d11c76..98e4721712e 100644
--- a/apps/desktop/src/app/artifacts/index.tsx
+++ b/apps/desktop/src/app/artifacts/index.tsx
@@ -501,6 +501,7 @@ export function ArtifactsView({ setStatusbarItemGroup: _setStatusbarItemGroup, .
     <PageSearchShell
       {...props}
       onSearchChange={setQuery}
+      searchHidden={counts.all === 0}
       searchPlaceholder="Search artifacts..."
       searchValue={query}
       tabs={
diff --git a/apps/desktop/src/app/command-center/index.tsx b/apps/desktop/src/app/command-center/index.tsx
index e4e0d470d3a..d1ebf2c84a4 100644
--- a/apps/desktop/src/app/command-center/index.tsx
+++ b/apps/desktop/src/app/command-center/index.tsx
@@ -300,7 +300,7 @@ export function CommandCenterView({
               </p>
             </div>
             <div className="flex shrink-0 items-center gap-2">
-              {section === 'sessions' && (
+              {section === 'sessions' && sessions.length > 0 && (
                 <SearchField
                   containerClassName="max-w-[40vw]"
                   onChange={next => setQuery(next)}
diff --git a/apps/desktop/src/app/cron/index.tsx b/apps/desktop/src/app/cron/index.tsx
index c543d918a4a..fe5f108beb5 100644
--- a/apps/desktop/src/app/cron/index.tsx
+++ b/apps/desktop/src/app/cron/index.tsx
@@ -419,14 +419,16 @@ export function CronView({ onClose }: CronViewProps) {
   return (
     <OverlayView closeLabel="Close cron" onClose={onClose}>
       <div className="flex min-h-0 flex-1 flex-col pt-[calc(var(--titlebar-height)+0.5rem)]">
-        <div className="mx-auto flex w-full max-w-4xl items-center gap-2 px-4 pb-2">
-          <SearchField
-            containerClassName="max-w-[60vw]"
-            onChange={setQuery}
-            placeholder="Search cron jobs…"
-            value={query}
-          />
-        </div>
+        {totalCount > 0 && (
+          <div className="mx-auto flex w-full max-w-4xl items-center gap-2 px-4 pb-2">
+            <SearchField
+              containerClassName="max-w-[60vw]"
+              onChange={setQuery}
+              placeholder="Search cron jobs…"
+              value={query}
+            />
+          </div>
+        )}
         {!jobs ? (
           <PageLoader label="Loading cron jobs..." />
         ) : visibleJobs.length === 0 ? (
diff --git a/apps/desktop/src/app/messaging/index.tsx b/apps/desktop/src/app/messaging/index.tsx
index c4d08d58d9a..6a2dbdcee66 100644
--- a/apps/desktop/src/app/messaging/index.tsx
+++ b/apps/desktop/src/app/messaging/index.tsx
@@ -347,6 +347,7 @@ export function MessagingView({ setStatusbarItemGroup: _setStatusbarItemGroup, .
     <PageSearchShell
       {...props}
       onSearchChange={setQuery}
+      searchHidden={(platforms?.length ?? 0) === 0}
       searchPlaceholder="Search messaging..."
       searchValue={query}
     >
diff --git a/apps/desktop/src/app/page-search-shell.tsx b/apps/desktop/src/app/page-search-shell.tsx
index 2a2c97e19a3..f0eb5129212 100644
--- a/apps/desktop/src/app/page-search-shell.tsx
+++ b/apps/desktop/src/app/page-search-shell.tsx
@@ -12,6 +12,8 @@ interface PageSearchShellProps extends React.ComponentProps<'section'> {
   onSearchChange: (value: string) => void
   searchPlaceholder: string
   searchValue: string
+  /** Hide the search field when there's nothing to search (empty dataset). */
+  searchHidden?: boolean
 }
 
 export function PageSearchShell({
@@ -22,6 +24,7 @@ export function PageSearchShell({
   onSearchChange,
   searchPlaceholder,
   searchValue,
+  searchHidden = false,
   ...props
 }: PageSearchShellProps) {
   return (
@@ -46,19 +49,23 @@ export function PageSearchShell({
         (see app-shell.tsx), so window dragging still works here.
       */}
       <div className="shrink-0">
-        <div className="flex items-center gap-3 px-3 pb-2 pt-[calc(var(--titlebar-height)+0.5rem)]">
-          {tabs ? (
-            <div className="flex min-w-0 flex-1 flex-wrap items-center gap-x-2 gap-y-1">{tabs}</div>
-          ) : null}
-          <div className={cn('flex shrink-0 items-center', !tabs && 'flex-1')}>
-            <SearchField
-              containerClassName="max-w-[45vw]"
-              onChange={onSearchChange}
-              placeholder={searchPlaceholder}
-              value={searchValue}
-            />
+        {(tabs || !searchHidden) && (
+          <div className="flex items-center gap-3 px-3 pb-2 pt-[calc(var(--titlebar-height)+0.5rem)]">
+            {tabs ? (
+              <div className="flex min-w-0 flex-1 flex-wrap items-center gap-x-2 gap-y-1">{tabs}</div>
+            ) : null}
+            {!searchHidden && (
+              <div className={cn('flex shrink-0 items-center', !tabs && 'flex-1')}>
+                <SearchField
+                  containerClassName="max-w-[45vw]"
+                  onChange={onSearchChange}
+                  placeholder={searchPlaceholder}
+                  value={searchValue}
+                />
+              </div>
+            )}
           </div>
-        </div>
+        )}
         {filters ? (
           <div className="flex flex-wrap items-center gap-x-2 gap-y-1 px-3 pb-2">{filters}</div>
         ) : null}
diff --git a/apps/desktop/src/app/skills/index.tsx b/apps/desktop/src/app/skills/index.tsx
index 3ee2d2ecb97..05a8bdca126 100644
--- a/apps/desktop/src/app/skills/index.tsx
+++ b/apps/desktop/src/app/skills/index.tsx
@@ -197,6 +197,7 @@ export function SkillsView({ setStatusbarItemGroup: _setStatusbarItemGroup, ...p
         ) : undefined
       }
       onSearchChange={setQuery}
+      searchHidden={mode === 'skills' ? (skills?.length ?? 0) === 0 : (toolsets?.length ?? 0) === 0}
       searchPlaceholder={mode === 'skills' ? 'Search skills...' : 'Search toolsets...'}
       searchValue={query}
       tabs={

From 3a5e36cfa50afe7e08cde4a03b196f56e4329153 Mon Sep 17 00:00:00 2001
From: Brooklyn Nicholson <brooklyn.bb.nicholson@gmail.com>
Date: Thu, 4 Jun 2026 00:03:41 -0500
Subject: [PATCH 25/29] fix(desktop): composer wraps long text & expands at the
 real wrap point

Long unbroken input ran off horizontally and the stacked layout flipped
on a char-count guess (too early). Add wrap rules to the contentEditable
and drive expansion off the editor's actual rendered height via the
resize observer, so it stacks exactly when the text wraps to a 2nd line.
---
 apps/desktop/src/app/chat/composer/index.tsx | 38 ++++++++++++++------
 1 file changed, 27 insertions(+), 11 deletions(-)

diff --git a/apps/desktop/src/app/chat/composer/index.tsx b/apps/desktop/src/app/chat/composer/index.tsx
index 2a903813e28..d6b54c4d6a3 100644
--- a/apps/desktop/src/app/chat/composer/index.tsx
+++ b/apps/desktop/src/app/chat/composer/index.tsx
@@ -73,6 +73,11 @@ import { VoiceActivity, VoicePlaybackActivity } from './voice-activity'
 
 const COMPOSER_STACK_BREAKPOINT_PX = 320
 
+// A single editor line is ~28px (--composer-input-min-height 1.625rem + 0.5rem
+// vertical padding). Anything taller means the text wrapped to a second line,
+// which is when the composer should expand to the stacked layout.
+const COMPOSER_SINGLE_LINE_MAX_PX = 36
+
 const COMPOSER_FADE_BACKGROUND =
   'linear-gradient(to bottom, transparent, color-mix(in srgb, var(--dt-background) 10%, transparent))'
 
@@ -256,14 +261,13 @@ export function ChatBar({
     }
   }, [urlOpen])
 
-  // Track expansion via cheap heuristics (newline or length threshold) instead
-  // of reading editor.scrollHeight on every keystroke. scrollHeight forces a
-  // synchronous layout flush — measured at 2.27 layouts per character typed
-  // (see scripts/leak-typing.mjs). With ~30 chars before a typical wrap on
-  // composer-default-width, this heuristic flips at roughly the right time
-  // and the user only notices if they type far past the wrap boundary
-  // without a newline; in that case the ResizeObserver below catches it via
-  // a height delta and we still expand.
+  // Expansion (input on its own full-width row, controls below) is driven by
+  // the editor's *actual* rendered height via the ResizeObserver in
+  // syncComposerMetrics — it only fires when the text genuinely wraps to a
+  // second line, so the layout flips exactly at the wrap point rather than at
+  // a guessed character count. We only handle the two cases the observer
+  // can't: an explicit newline (expand before layout settles) and an emptied
+  // draft (collapse back). We never read scrollHeight per keystroke.
   useEffect(() => {
     if (!draft) {
       setExpanded(false)
@@ -275,7 +279,7 @@ export function ChatBar({
       return
     }
 
-    if (draft.includes('\n') || draft.length > 60) {
+    if (draft.includes('\n')) {
       setExpanded(true)
     }
   }, [draft, expanded])
@@ -311,6 +315,18 @@ export function ChatBar({
       }
     }
 
+    // Expand once the input has actually wrapped past a single line. The
+    // observer only fires on real size changes, so this reads scrollHeight at
+    // most once per wrap (not per keystroke). One line ≈ 28px (1.625rem
+    // min-height + padding); a second line clears ~36px. We only ever expand
+    // here — collapse is handled by the emptied-draft effect to avoid
+    // oscillating across the wrap boundary as the input switches widths.
+    const editor = editorRef.current
+
+    if (editor && editor.scrollHeight > COMPOSER_SINGLE_LINE_MAX_PX) {
+      setExpanded(true)
+    }
+
     if (height > 0) {
       const bucket = Math.round(height / 8) * 8
 
@@ -330,7 +346,7 @@ export function ChatBar({
     }
   }, [])
 
-  useResizeObserver(syncComposerMetrics, composerRef, composerSurfaceRef)
+  useResizeObserver(syncComposerMetrics, composerRef, composerSurfaceRef, editorRef)
 
   useEffect(() => {
     return () => {
@@ -1109,7 +1125,7 @@ export function ChatBar({
         autoCapitalize="off"
         autoCorrect="off"
         className={cn(
-          'min-h-(--composer-input-min-height) max-h-(--composer-input-max-height) overflow-y-auto bg-transparent pb-1 pr-1 pt-1 leading-normal text-foreground outline-none disabled:cursor-not-allowed',
+          'min-h-(--composer-input-min-height) max-h-(--composer-input-max-height) overflow-y-auto whitespace-pre-wrap break-words [overflow-wrap:anywhere] bg-transparent pb-1 pr-1 pt-1 leading-normal text-foreground outline-none disabled:cursor-not-allowed',
           'empty:before:content-[attr(data-placeholder)] empty:before:text-muted-foreground/60',
           '**:data-ref-text:cursor-default',
           stacked && 'pl-3',

From 5bb7156949f4d307f9b810c5c2f606dd530a0668 Mon Sep 17 00:00:00 2001
From: Brooklyn Nicholson <brooklyn.bb.nicholson@gmail.com>
Date: Thu, 4 Jun 2026 00:19:05 -0500
Subject: [PATCH 26/29] feat(desktop): composer/intro polish + shared
 ErrorState
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Composer single-line row centers (was bottom-aligned); placeholder
  randomizes per session (starter vs follow-up) without mid-stream flip.
- Drop chat header on brand-new sessions (dead label + border).
- ⌘N flashes its sidebar hint; ⌘. toggles the command center.
- Intro wordmark fills width (drop 8rem fit cap).
- Unify error states on a shared ErrorState component (boundary + updates).
---
 apps/desktop/src/app/chat/composer/index.tsx  | 56 +++++++++++++++++-
 apps/desktop/src/app/chat/index.tsx           |  7 +++
 apps/desktop/src/app/chat/sidebar/index.tsx   | 25 +++++++-
 apps/desktop/src/app/desktop-controller.tsx   | 16 +++++
 apps/desktop/src/app/updates-overlay.tsx      | 38 +++++-------
 apps/desktop/src/components/chat/intro.tsx    | 14 ++---
 .../desktop/src/components/error-boundary.tsx | 58 +++++++------------
 .../desktop/src/components/ui/error-state.tsx | 45 ++++++++++++++
 8 files changed, 188 insertions(+), 71 deletions(-)
 create mode 100644 apps/desktop/src/components/ui/error-state.tsx

diff --git a/apps/desktop/src/app/chat/composer/index.tsx b/apps/desktop/src/app/chat/composer/index.tsx
index d6b54c4d6a3..f55e3c11597 100644
--- a/apps/desktop/src/app/chat/composer/index.tsx
+++ b/apps/desktop/src/app/chat/composer/index.tsx
@@ -81,6 +81,31 @@ const COMPOSER_SINGLE_LINE_MAX_PX = 36
 const COMPOSER_FADE_BACKGROUND =
   'linear-gradient(to bottom, transparent, color-mix(in srgb, var(--dt-background) 10%, transparent))'
 
+// Resting composer placeholders. New sessions get open-ended starters; an
+// existing chat gets phrasings that read as a continuation of the thread.
+// One is picked at random per session (stable until the session changes).
+const NEW_SESSION_PLACEHOLDERS = [
+  'What are we building?',
+  'Give Hermes a task',
+  "What's on your mind?",
+  'Describe what you need',
+  'What should we tackle?',
+  'Ask anything',
+  'Start with a goal'
+]
+
+const FOLLOW_UP_PLACEHOLDERS = [
+  'Send a follow-up',
+  'Add more context',
+  'Refine the request',
+  "What's next?",
+  'Keep it going',
+  'Push it further',
+  'Adjust or continue'
+]
+
+const pickPlaceholder = (pool: readonly string[]) => pool[Math.floor(Math.random() * pool.length)]
+
 interface QueueEditState {
   attachments: ComposerAttachment[]
   draft: string
@@ -163,6 +188,33 @@ export function ChatBar({
 
   const gatewayState = useStore($gatewayState)
 
+  // Resting placeholder: a starter for brand-new sessions, a continuation for
+  // existing ones. Picked once and only re-rolled when we genuinely move to a
+  // *different* conversation. Critically, the first id assignment of a freshly
+  // started session (null → id, on the first send) is treated as the same
+  // conversation so the placeholder doesn't visibly flip mid-stream.
+  const [restingPlaceholder, setRestingPlaceholder] = useState(() =>
+    pickPlaceholder(sessionId ? FOLLOW_UP_PLACEHOLDERS : NEW_SESSION_PLACEHOLDERS)
+  )
+  const prevSessionIdRef = useRef(sessionId)
+
+  useEffect(() => {
+    const prev = prevSessionIdRef.current
+    prevSessionIdRef.current = sessionId
+
+    if (prev === sessionId) {
+      return
+    }
+
+    // null → id: the new session we're already in just got persisted. Keep the
+    // starter we showed instead of swapping to a follow-up under the user.
+    if (prev == null && sessionId) {
+      return
+    }
+
+    setRestingPlaceholder(pickPlaceholder(sessionId ? FOLLOW_UP_PLACEHOLDERS : NEW_SESSION_PLACEHOLDERS))
+  }, [sessionId])
+
   // When the bar is disabled it's because the gateway isn't open. Distinguish a
   // cold start ("Starting Hermes...") from a dropped connection we're trying to
   // restore (e.g. after the Mac slept) so the stuck state reads as recoverable.
@@ -170,7 +222,7 @@ export function ChatBar({
     ? gatewayState === 'closed' || gatewayState === 'error'
       ? 'Reconnecting to Hermes…'
       : 'Starting Hermes...'
-    : 'Send follow-up'
+    : restingPlaceholder
 
   const focusInput = useCallback(() => {
     focusComposerInput(editorRef.current)
@@ -1285,7 +1337,7 @@ export function ChatBar({
                     'grid w-full',
                     stacked
                       ? 'grid-cols-[auto_1fr] gap-(--composer-row-gap) [grid-template-areas:"input_input"_"menu_controls"]'
-                      : 'grid-cols-[auto_1fr_auto] items-end gap-(--composer-control-gap) [grid-template-areas:"menu_input_controls"]'
+                      : 'grid-cols-[auto_1fr_auto] items-center gap-(--composer-control-gap) [grid-template-areas:"menu_input_controls"]'
                   )}
                 >
                   <div className="flex items-center [grid-area:menu]">{contextMenu}</div>
diff --git a/apps/desktop/src/app/chat/index.tsx b/apps/desktop/src/app/chat/index.tsx
index ac19adc60eb..7630bb7338b 100644
--- a/apps/desktop/src/app/chat/index.tsx
+++ b/apps/desktop/src/app/chat/index.tsx
@@ -110,6 +110,13 @@ function ChatHeader({
       ? pinnedSessionIds.includes(selectedSessionId)
       : false
 
+  // A brand-new session has no session to pin/delete/rename, so the header is
+  // just a dead "New session" label + chevron. Drop it (and its border)
+  // entirely until there's a real session to act on.
+  if (!selectedSessionId && !activeSessionId && !isRoutedSessionView) {
+    return null
+  }
+
   return (
     <header className={cn(titlebarHeaderBaseClass, isRoutedSessionView && titlebarHeaderShadowClass)}>
       <div className="min-w-0 flex-1">
diff --git a/apps/desktop/src/app/chat/sidebar/index.tsx b/apps/desktop/src/app/chat/sidebar/index.tsx
index f5f7808ef74..a8aa706e2e6 100644
--- a/apps/desktop/src/app/chat/sidebar/index.tsx
+++ b/apps/desktop/src/app/chat/sidebar/index.tsx
@@ -230,8 +230,28 @@ export function ChatSidebar({
   const [workspaceOrderIds, setWorkspaceOrderIds] = useState<string[]>([])
   const [searchQuery, setSearchQuery] = useState('')
   const [serverMatches, setServerMatches] = useState<SessionSearchResult[]>([])
+  const [newSessionKbdFlash, setNewSessionKbdFlash] = useState(false)
   const trimmedQuery = searchQuery.trim()
 
+  // Flash the ⌘N hint full-opacity (no transition) for the press, so hitting
+  // the shortcut visibly pings its affordance in the sidebar.
+  useEffect(() => {
+    let timeout: ReturnType<typeof setTimeout> | undefined
+
+    const onShortcut = () => {
+      setNewSessionKbdFlash(true)
+      clearTimeout(timeout)
+      timeout = setTimeout(() => setNewSessionKbdFlash(false), 140)
+    }
+
+    window.addEventListener('hermes:new-session-shortcut', onShortcut)
+
+    return () => {
+      window.removeEventListener('hermes:new-session-shortcut', onShortcut)
+      clearTimeout(timeout)
+    }
+  }, [])
+
   const activeSidebarSessionId = currentView === 'chat' ? selectedSessionId : null
 
   const dndSensors = useSensors(
@@ -449,7 +469,10 @@ export function ChatSidebar({
                         <>
                           <span className="min-w-0 flex-1 truncate max-[46.25rem]:hidden">{item.label}</span>
                           {item.id === 'new-session' && (
-                            <KbdGroup className="ml-auto max-[46.25rem]:hidden" keys={[...NEW_SESSION_KBD]} />
+                            <KbdGroup
+                              className={cn('ml-auto max-[46.25rem]:hidden', newSessionKbdFlash && 'opacity-100!')}
+                              keys={[...NEW_SESSION_KBD]}
+                            />
                           )}
                         </>
                       )}
diff --git a/apps/desktop/src/app/desktop-controller.tsx b/apps/desktop/src/app/desktop-controller.tsx
index 0a46319799e..801b963b378 100644
--- a/apps/desktop/src/app/desktop-controller.tsx
+++ b/apps/desktop/src/app/desktop-controller.tsx
@@ -216,6 +216,20 @@ export function DesktopController() {
     return () => window.removeEventListener('keydown', onKeyDown)
   }, [])
 
+  // Cmd/Ctrl+. toggles the command center (sessions / system / usage).
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      if ((event.metaKey || event.ctrlKey) && !event.altKey && !event.shiftKey && event.key === '.') {
+        event.preventDefault()
+        toggleCommandCenter()
+      }
+    }
+
+    window.addEventListener('keydown', onKeyDown)
+
+    return () => window.removeEventListener('keydown', onKeyDown)
+  }, [toggleCommandCenter])
+
   const refreshSessions = useCallback(async () => {
     const requestId = refreshSessionsRequestRef.current + 1
     refreshSessionsRequestRef.current = requestId
@@ -435,6 +449,8 @@ export function DesktopController() {
 
       event.preventDefault()
       startFreshSessionDraft()
+      // Briefly light up the sidebar's ⌘N hint so the shortcut is discoverable.
+      window.dispatchEvent(new CustomEvent('hermes:new-session-shortcut'))
     }
 
     window.addEventListener('keydown', onKeyDown)
diff --git a/apps/desktop/src/app/updates-overlay.tsx b/apps/desktop/src/app/updates-overlay.tsx
index 792665d4500..1bbd4130470 100644
--- a/apps/desktop/src/app/updates-overlay.tsx
+++ b/apps/desktop/src/app/updates-overlay.tsx
@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react'
 import { Button } from '@/components/ui/button'
 import { writeClipboardText } from '@/components/ui/copy-button'
 import { Dialog, DialogContent, DialogDescription, DialogTitle } from '@/components/ui/dialog'
+import { ErrorState } from '@/components/ui/error-state'
 import type { DesktopUpdateCommit, DesktopUpdateStage, DesktopUpdateStatus } from '@/global'
 import { buildCommitChangelog, type CommitGroup } from '@/lib/commit-changelog'
 import { AlertCircle, Check, CheckCircle2, Copy, Loader2, Sparkles, Terminal } from '@/lib/icons'
@@ -331,31 +332,22 @@ function ApplyingView({ apply }: { apply: UpdateApplyState }) {
 
 function ErrorView({ message, onDismiss, onRetry }: { message: string; onDismiss: () => void; onRetry: () => void }) {
   return (
-    <div className="grid gap-5 px-6 pb-6 pt-7 pr-8">
-      <div className="flex flex-col items-center gap-3 text-center">
-        <span className="flex size-14 items-center justify-center rounded-2xl bg-destructive/10 text-destructive">
-          <AlertCircle className="size-7" />
-        </span>
-
-        <DialogTitle className="text-center text-xl">Update didn’t finish</DialogTitle>
-        <DialogDescription className="text-center text-sm">
+    <ErrorState
+      className="px-6 pb-6 pt-7 pr-8"
+      description={
+        <DialogDescription className="max-w-prose text-center text-sm leading-5 text-muted-foreground">
           {message || 'No worries — nothing was lost. You can try again now.'}
         </DialogDescription>
-      </div>
-
-      <div className="grid gap-2">
-        <Button className="font-semibold" onClick={onRetry} size="lg">
-          Try again
-        </Button>
-        <button
-          className="text-center text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
-          onClick={onDismiss}
-          type="button"
-        >
-          Not now
-        </button>
-      </div>
-    </div>
+      }
+      title={<DialogTitle className="text-center text-xl font-semibold tracking-tight">Update didn’t finish</DialogTitle>}
+    >
+      <Button className="font-semibold" onClick={onRetry} size="lg">
+        Try again
+      </Button>
+      <Button onClick={onDismiss} variant="text">
+        Not now
+      </Button>
+    </ErrorState>
   )
 }
 
diff --git a/apps/desktop/src/components/chat/intro.tsx b/apps/desktop/src/components/chat/intro.tsx
index 7cd914c8dbe..d5ec61b0b81 100644
--- a/apps/desktop/src/components/chat/intro.tsx
+++ b/apps/desktop/src/components/chat/intro.tsx
@@ -142,6 +142,8 @@ function pickCopy(copies: IntroCopy[], seed = 0): IntroCopy {
   return copies[Math.abs(seed) % copies.length] || FALLBACK_COPY[0]
 }
 
+const WORDMARK = 'HERMES AGENT'
+
 function resolveCopy(personality?: string, seed?: number): IntroCopy {
   const personalityKey = normalizeKey(personality)
 
@@ -155,7 +157,6 @@ function resolveCopy(personality?: string, seed?: number): IntroCopy {
 export function Intro({ personality, seed }: IntroProps) {
   const [mountSeed] = useState(() => Math.floor(Math.random() * 100000))
   const copy = resolveCopy(personality, mountSeed + (seed ?? 0))
-
   return (
     <div
       className="pointer-events-none flex w-full min-w-0 flex-col items-center justify-center px-3 py-6 text-center text-muted-foreground sm:px-6 lg:px-8"
@@ -163,15 +164,14 @@ export function Intro({ personality, seed }: IntroProps) {
     >
       <div className="w-full min-w-0">
         <p
-          className="fit-text mx-auto mb-3 w-4/5 font-['Collapse'] font-bold uppercase leading-[0.9] tracking-[0.08em] text-midground mix-blend-plus-lighter dark:text-foreground/90"
-          style={
-            { '--fit-text-line-height': '0.9', '--fit-text-max': '8rem', '--fit-text-min': '2.75rem' } as CSSProperties
-          }
+          aria-label={WORDMARK}
+          className="fit-text mx-auto mb-3 w-[88%] font-['Collapse'] font-bold uppercase leading-[0.9] tracking-[0.08em] text-midground mix-blend-plus-lighter dark:text-foreground/90"
+          style={{ '--fit-text-line-height': '0.9', '--fit-text-min': '2.75rem' } as CSSProperties}
         >
           <span>
-            <span>HERMES AGENT</span>
+            <span>{WORDMARK}</span>
           </span>
-          <span aria-hidden="true">HERMES AGENT</span>
+          <span aria-hidden="true">{WORDMARK}</span>
         </p>
 
         <p className="m-0 text-center leading-normal tracking-tight">{copy.body}</p>
diff --git a/apps/desktop/src/components/error-boundary.tsx b/apps/desktop/src/components/error-boundary.tsx
index d9f4bb80dfa..12a7dbcf269 100644
--- a/apps/desktop/src/components/error-boundary.tsx
+++ b/apps/desktop/src/components/error-boundary.tsx
@@ -1,7 +1,7 @@
 import { Component, type ErrorInfo, type ReactNode } from 'react'
 
 import { Button } from '@/components/ui/button'
-import { AlertTriangle, RefreshCw } from '@/lib/icons'
+import { ErrorState } from '@/components/ui/error-state'
 
 export interface ErrorBoundaryFallbackProps {
   error: Error
@@ -53,43 +53,25 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
 
 function RootErrorFallback({ error, reset }: ErrorBoundaryFallbackProps) {
   return (
-    <div className="fixed inset-0 z-[1500] flex items-center justify-center bg-(--ui-chat-surface-background) p-6">
-      <div className="w-full max-w-[40rem] overflow-hidden rounded-xl border border-(--ui-stroke-secondary) bg-(--ui-chat-bubble-background) shadow-sm">
-        <div className="flex items-start gap-3 border-b border-(--ui-stroke-tertiary) px-5 py-4">
-          <div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-destructive/10 text-destructive">
-            <AlertTriangle className="size-5" />
-          </div>
-          <div>
-            <h2 className="text-[0.9375rem] font-semibold tracking-tight">Something broke in the interface</h2>
-            <p className="mt-1 text-[0.8125rem] leading-5 text-(--ui-text-tertiary)">
-              The view hit an unexpected error. Your chats and settings are safe - try again, or reload the window.
-            </p>
-          </div>
-        </div>
-
-        <div className="grid gap-4 p-5">
-          <div className="rounded-md border border-destructive/30 bg-destructive/10 px-4 py-3 font-mono text-[0.7rem] leading-4 text-destructive">
-            {error.message || String(error)}
-          </div>
-
-          <div className="flex flex-wrap items-center gap-2.5">
-            <Button onClick={reset}>
-              <RefreshCw className="size-4" />
-              Try again
-            </Button>
-            <Button onClick={() => window.location.reload()} variant="text">
-              Reload window
-            </Button>
-            <Button
-              className="ml-auto"
-              onClick={() => void window.hermesDesktop?.revealLogs()?.catch(() => undefined)}
-              variant="text"
-            >
-              Open logs
-            </Button>
-          </div>
-        </div>
-      </div>
+    <div className="fixed inset-0 z-[1500] grid place-items-center bg-(--ui-chat-surface-background) p-6">
+      <ErrorState
+        className="w-full max-w-[28rem]"
+        description={error.message || 'The view hit an unexpected error. Your chats and settings are safe.'}
+        title="Something broke in the interface"
+      >
+        <Button className="font-semibold" onClick={reset} size="lg">
+          Try again
+        </Button>
+        <Button onClick={() => window.location.reload()} variant="text">
+          Reload window
+        </Button>
+        <Button
+          onClick={() => void window.hermesDesktop?.revealLogs()?.catch(() => undefined)}
+          variant="text"
+        >
+          Open logs
+        </Button>
+      </ErrorState>
     </div>
   )
 }
diff --git a/apps/desktop/src/components/ui/error-state.tsx b/apps/desktop/src/components/ui/error-state.tsx
new file mode 100644
index 00000000000..52ecc2e4d9f
--- /dev/null
+++ b/apps/desktop/src/components/ui/error-state.tsx
@@ -0,0 +1,45 @@
+import type { ReactNode } from 'react'
+
+import { AlertCircle } from '@/lib/icons'
+import { cn } from '@/lib/utils'
+
+export interface ErrorStateProps {
+  /** Optional actions row/stack rendered below the copy. */
+  children?: ReactNode
+  className?: string
+  description?: ReactNode
+  /** Defaults to a destructive AlertCircle. */
+  icon?: ReactNode
+  title: ReactNode
+}
+
+// Shared, presentation-only error layout: a destructive icon chip over a
+// centered title + body, with an optional actions stack. Used by both the
+// top-level React error boundary and the in-dialog update error so every
+// failure state reads the same. Title/description accept nodes so callers in a
+// Radix Dialog can pass DialogTitle/DialogDescription for accessibility.
+export function ErrorState({ children, className, description, icon, title }: ErrorStateProps) {
+  return (
+    <div className={cn('grid gap-5', className)}>
+      <div className="flex flex-col items-center gap-3 text-center">
+        <span className="flex size-14 items-center justify-center rounded-2xl bg-destructive/10 text-destructive">
+          {icon ?? <AlertCircle className="size-7" />}
+        </span>
+
+        {typeof title === 'string' ? (
+          <h2 className="text-center text-xl font-semibold tracking-tight">{title}</h2>
+        ) : (
+          title
+        )}
+
+        {typeof description === 'string' ? (
+          <p className="max-w-prose text-center text-sm leading-5 text-muted-foreground">{description}</p>
+        ) : (
+          description
+        )}
+      </div>
+
+      {children && <div className="grid gap-2">{children}</div>}
+    </div>
+  )
+}

From 38acced6873d63086d415625a9d04fb0240cd63e Mon Sep 17 00:00:00 2001
From: Brooklyn Nicholson <brooklyn.bb.nicholson@gmail.com>
Date: Thu, 4 Jun 2026 00:22:17 -0500
Subject: [PATCH 27/29] style(desktop): satisfy lint across PR-touched files

---
 apps/desktop/src/app/chat/composer/index.tsx                  | 1 +
 apps/desktop/src/app/chat/index.tsx                           | 3 +++
 apps/desktop/src/app/session/hooks/use-message-stream.ts      | 1 +
 apps/desktop/src/app/session/hooks/use-session-state-cache.ts | 2 ++
 apps/desktop/src/app/settings/toolset-config-panel.tsx        | 1 +
 apps/desktop/src/app/shell/app-shell.tsx                      | 1 +
 apps/desktop/src/components/chat/intro.tsx                    | 1 +
 apps/desktop/src/components/desktop-onboarding-overlay.tsx    | 2 ++
 apps/desktop/src/store/session.ts                             | 2 ++
 9 files changed, 14 insertions(+)

diff --git a/apps/desktop/src/app/chat/composer/index.tsx b/apps/desktop/src/app/chat/composer/index.tsx
index f55e3c11597..069dc490f11 100644
--- a/apps/desktop/src/app/chat/composer/index.tsx
+++ b/apps/desktop/src/app/chat/composer/index.tsx
@@ -196,6 +196,7 @@ export function ChatBar({
   const [restingPlaceholder, setRestingPlaceholder] = useState(() =>
     pickPlaceholder(sessionId ? FOLLOW_UP_PLACEHOLDERS : NEW_SESSION_PLACEHOLDERS)
   )
+
   const prevSessionIdRef = useRef(sessionId)
 
   useEffect(() => {
diff --git a/apps/desktop/src/app/chat/index.tsx b/apps/desktop/src/app/chat/index.tsx
index 7630bb7338b..38c2cff071c 100644
--- a/apps/desktop/src/app/chat/index.tsx
+++ b/apps/desktop/src/app/chat/index.tsx
@@ -98,9 +98,12 @@ function ChatHeader({
 }: ChatHeaderProps) {
   const sessions = useStore($sessions)
   const pinnedSessionIds = useStore($pinnedSessionIds)
+
   const activeStoredSession =
     sessions.find(session => session.id === selectedSessionId || session._lineage_root_id === selectedSessionId) || null
+
   const title = activeStoredSession ? sessionTitle(activeStoredSession) : 'New session'
+
   // Pins live on the durable lineage-root id, but selectedSessionId is the live
   // (tip) id — resolve through the loaded row so the menu reflects the pin
   // state after auto-compression rotates the id.
diff --git a/apps/desktop/src/app/session/hooks/use-message-stream.ts b/apps/desktop/src/app/session/hooks/use-message-stream.ts
index e4c49b8404c..1763e5eb2a5 100644
--- a/apps/desktop/src/app/session/hooks/use-message-stream.ts
+++ b/apps/desktop/src/app/session/hooks/use-message-stream.ts
@@ -313,6 +313,7 @@ export function useMessageStream({
     // commit and the synthetic harness shows longtask counts drop from ~5/5s
     // to ~1/5s on big sessions (see scripts/profile-typing-lag.md).
     const sinceLast = performance.now() - lastFlushAtRef.current
+
     const runFlush = () => {
       flushHandleRef.current = null
       lastFlushAtRef.current = performance.now()
diff --git a/apps/desktop/src/app/session/hooks/use-session-state-cache.ts b/apps/desktop/src/app/session/hooks/use-session-state-cache.ts
index adb4f362edb..0a682948243 100644
--- a/apps/desktop/src/app/session/hooks/use-session-state-cache.ts
+++ b/apps/desktop/src/app/session/hooks/use-session-state-cache.ts
@@ -158,6 +158,7 @@ export function useSessionStateCache({
 
       setSessionWorking(next.storedSessionId, next.busy)
       setSessionAttention(next.storedSessionId, next.needsInput)
+
       // Every state update is effectively a "still alive" heartbeat for
       // streaming events. The session-store watchdog uses this to keep the
       // working flag alive during long-running turns and to clear it once
@@ -165,6 +166,7 @@ export function useSessionStateCache({
       if (next.busy) {
         noteSessionActivity(next.storedSessionId)
       }
+
       syncSessionStateToView(sessionId, next)
 
       return next
diff --git a/apps/desktop/src/app/settings/toolset-config-panel.tsx b/apps/desktop/src/app/settings/toolset-config-panel.tsx
index 4ca4f53a53c..ece09e53ee8 100644
--- a/apps/desktop/src/app/settings/toolset-config-panel.tsx
+++ b/apps/desktop/src/app/settings/toolset-config-panel.tsx
@@ -211,6 +211,7 @@ export function ToolsetConfigPanel({ toolset, onConfiguredChange }: ToolsetConfi
       (cfg?.active_provider ? providers.find(p => p.name === cfg.active_provider) : undefined) ??
       providers.find(p => providerConfigured(p, envState)) ??
       providers[0]
+
     setActiveProvider(selected.name)
   }, [activeProvider, providers, envState, cfg])
 
diff --git a/apps/desktop/src/app/shell/app-shell.tsx b/apps/desktop/src/app/shell/app-shell.tsx
index 8455666a9ea..e9e4b90efe3 100644
--- a/apps/desktop/src/app/shell/app-shell.tsx
+++ b/apps/desktop/src/app/shell/app-shell.tsx
@@ -71,6 +71,7 @@ export function AppShell({
   // window's left edge. Default layout: the sessions sidebar sits there.
   // Flipped layout: the file browser does instead.
   const leftEdgePaneOpen = panesFlipped ? fileBrowserOpen : sidebarOpen
+
   const titlebarContentInset = leftEdgePaneOpen
     ? 0
     : titlebarControls.left + TITLEBAR_HEIGHT + Math.round(TITLEBAR_HEIGHT / 2)
diff --git a/apps/desktop/src/components/chat/intro.tsx b/apps/desktop/src/components/chat/intro.tsx
index d5ec61b0b81..e942f55ff21 100644
--- a/apps/desktop/src/components/chat/intro.tsx
+++ b/apps/desktop/src/components/chat/intro.tsx
@@ -157,6 +157,7 @@ function resolveCopy(personality?: string, seed?: number): IntroCopy {
 export function Intro({ personality, seed }: IntroProps) {
   const [mountSeed] = useState(() => Math.floor(Math.random() * 100000))
   const copy = resolveCopy(personality, mountSeed + (seed ?? 0))
+
   return (
     <div
       className="pointer-events-none flex w-full min-w-0 flex-col items-center justify-center px-3 py-6 text-center text-muted-foreground sm:px-6 lg:px-8"
diff --git a/apps/desktop/src/components/desktop-onboarding-overlay.tsx b/apps/desktop/src/components/desktop-onboarding-overlay.tsx
index 98c9fd21f82..6b430ee7b64 100644
--- a/apps/desktop/src/components/desktop-onboarding-overlay.tsx
+++ b/apps/desktop/src/components/desktop-onboarding-overlay.tsx
@@ -695,9 +695,11 @@ function ConfirmingModelPanel({
     queryKey: ['onboarding-model-options', flow.providerSlug],
     queryFn: () => getGlobalModelOptions()
   })
+
   const providerRow = options.data?.providers?.find(
     p => String(p.slug).toLowerCase() === flow.providerSlug.toLowerCase()
   )
+
   const price = providerRow?.pricing?.[flow.currentModel]
   const freeTier = providerRow?.free_tier
 
diff --git a/apps/desktop/src/store/session.ts b/apps/desktop/src/store/session.ts
index 1d3197891da..8106b002f83 100644
--- a/apps/desktop/src/store/session.ts
+++ b/apps/desktop/src/store/session.ts
@@ -62,6 +62,7 @@ export function mergeSessionPage(
   }
 
   const incomingIds = new Set(incoming.map(session => session.id))
+
   const survivors = previous.filter(
     session =>
       !incomingIds.has(session.id) &&
@@ -164,6 +165,7 @@ function armSessionWatchdog(sessionId: string) {
 
   const timer = setTimeout(() => {
     sessionWatchdogTimers.delete(sessionId)
+
     // Re-check the latest state at fire-time. If the user already navigated
     // away or the session genuinely finished, the timer is a no-op.
     if ($workingSessionIds.get().includes(sessionId)) {

From bc9e33d66b126b8166ade7bf74c43baee2e1a4be Mon Sep 17 00:00:00 2001
From: Brooklyn Nicholson <brooklyn.bb.nicholson@gmail.com>
Date: Thu, 4 Jun 2026 00:28:57 -0500
Subject: [PATCH 28/29] refactor(desktop): DRY/elegance pass over PR-touched
 files

- Shared useDeepLinkHighlight hook collapses 3 near-identical settings
  deep-link effects (keys/mcp); config kept inline (distinct bail-clear).
- command-center: table-driven SECTION_ICONS + single errorText helper.
- clarify-tool: OPTION_ROW_CLASS + RadioDot extracted from option rows.
- desktop-controller: merge Cmd+K / Cmd+. into one keydown handler.
- statusbar-controls: hoist shared action class.
- Misc: drop redundant cn()/cursor-pointer/dead fields; tidy switch.
---
 apps/desktop/src/app/artifacts/index.tsx      |  10 +-
 apps/desktop/src/app/command-center/index.tsx |  18 ++-
 apps/desktop/src/app/desktop-controller.tsx   |  26 ++---
 .../src/app/settings/about-settings.tsx       |   2 +-
 apps/desktop/src/app/settings/constants.ts    |   7 +-
 .../src/app/settings/keys-settings.tsx        |  45 ++------
 .../desktop/src/app/settings/mcp-settings.tsx |  40 ++-----
 .../src/app/settings/sessions-settings.tsx    | 104 +++++++-----------
 .../app/settings/use-deep-link-highlight.ts   |  60 ++++++++++
 .../src/app/shell/statusbar-controls.tsx      |  20 ++--
 .../components/assistant-ui/clarify-tool.tsx  |  38 ++++---
 .../src/components/ui/dropdown-menu.tsx       |   6 +-
 apps/desktop/src/components/ui/switch.tsx     |   2 +-
 13 files changed, 181 insertions(+), 197 deletions(-)
 create mode 100644 apps/desktop/src/app/settings/use-deep-link-highlight.ts

diff --git a/apps/desktop/src/app/artifacts/index.tsx b/apps/desktop/src/app/artifacts/index.tsx
index 98e4721712e..c5e8183c221 100644
--- a/apps/desktop/src/app/artifacts/index.tsx
+++ b/apps/desktop/src/app/artifacts/index.tsx
@@ -657,11 +657,7 @@ interface ArtifactImageCardProps {
 
 function ArtifactImageCard({ artifact, failedImage, onImageError, onOpenChat }: ArtifactImageCardProps) {
   return (
-    <article
-      className={cn(
-        'group/artifact overflow-hidden rounded-lg border border-(--ui-stroke-tertiary) bg-(--ui-chat-bubble-background)'
-      )}
-    >
+    <article className="group/artifact overflow-hidden rounded-lg border border-(--ui-stroke-tertiary) bg-(--ui-chat-bubble-background)">
       <div
         className={cn(
           'relative flex h-40 w-full items-center justify-center overflow-hidden border-b border-(--ui-stroke-tertiary) bg-(--ui-bg-quinary) p-1.5',
@@ -738,9 +734,7 @@ function ArtifactCellAction({
 
   return (
     <button
-      className={cn(
-        'flex h-full w-full min-w-0 items-center gap-2 px-2.5 py-1.5 text-left text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) font-normal text-(--ui-text-secondary) no-underline underline-offset-4 decoration-current/20 transition-colors hover:text-foreground hover:underline'
-      )}
+      className="flex h-full w-full min-w-0 items-center gap-2 px-2.5 py-1.5 text-left text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) font-normal text-(--ui-text-secondary) no-underline underline-offset-4 decoration-current/20 transition-colors hover:text-foreground hover:underline"
       onClick={onClick}
       title={title}
       type="button"
diff --git a/apps/desktop/src/app/command-center/index.tsx b/apps/desktop/src/app/command-center/index.tsx
index d1ebf2c84a4..3789cbf4558 100644
--- a/apps/desktop/src/app/command-center/index.tsx
+++ b/apps/desktop/src/app/command-center/index.tsx
@@ -16,7 +16,7 @@ import {
 } from '@/hermes'
 import type { ActionStatusResponse, AnalyticsResponse, StatusResponse } from '@/hermes'
 import { sessionTitle } from '@/lib/chat-runtime'
-import { Activity, AlertCircle, BarChart3, Pin } from '@/lib/icons'
+import { Activity, AlertCircle, BarChart3, type IconComponent, Pin } from '@/lib/icons'
 import { exportSession } from '@/lib/session-export'
 import { cn } from '@/lib/utils'
 import { upsertDesktopActionTask } from '@/store/activity'
@@ -54,6 +54,14 @@ const SECTION_DESCRIPTIONS: Record<CommandCenterSection, string> = {
   usage: 'Token, cost, and skill activity over time'
 }
 
+const SECTION_ICONS: Record<CommandCenterSection, IconComponent> = {
+  sessions: Pin,
+  system: Activity,
+  usage: BarChart3
+}
+
+const errorText = (error: unknown): string => (error instanceof Error ? error.message : String(error))
+
 function formatTimestamp(value?: number | null): string {
   if (!value) {
     return ''
@@ -182,7 +190,7 @@ export function CommandCenterView({
       setStatus(nextStatus)
       setLogs(nextLogs.lines)
     } catch (error) {
-      setSystemError(error instanceof Error ? error.message : String(error))
+      setSystemError(errorText(error))
     } finally {
       setSystemLoading(false)
     }
@@ -202,7 +210,7 @@ export function CommandCenterView({
       }
     } catch (error) {
       if (usageRequestRef.current === requestId) {
-        setUsageError(error instanceof Error ? error.message : String(error))
+        setUsageError(errorText(error))
       }
     } finally {
       if (usageRequestRef.current === requestId) {
@@ -266,7 +274,7 @@ export function CommandCenterView({
           upsertDesktopActionTask(pendingStatus)
         }
       } catch (error) {
-        setSystemError(error instanceof Error ? error.message : String(error))
+        setSystemError(errorText(error))
       } finally {
         void refreshSystem()
       }
@@ -281,7 +289,7 @@ export function CommandCenterView({
           {SECTIONS.map(value => (
             <OverlayNavItem
               active={section === value}
-              icon={value === 'sessions' ? Pin : value === 'system' ? Activity : BarChart3}
+              icon={SECTION_ICONS[value]}
               key={value}
               label={SECTION_LABELS[value]}
               onClick={() => setSection(value)}
diff --git a/apps/desktop/src/app/desktop-controller.tsx b/apps/desktop/src/app/desktop-controller.tsx
index 801b963b378..86a6cca19ea 100644
--- a/apps/desktop/src/app/desktop-controller.tsx
+++ b/apps/desktop/src/app/desktop-controller.tsx
@@ -201,25 +201,21 @@ export function DesktopController() {
     }
   }, [])
 
-  // Global command palette: Cmd/Ctrl+K from anywhere. Plain Cmd+K is reserved
-  // for the palette; the composer's "drain next queued" moved to Cmd+Shift+K.
+  // Global chrome shortcuts (plain Cmd/Ctrl, no alt/shift): Cmd+K → command
+  // palette (the composer's "drain next queued" moved to Cmd+Shift+K), Cmd+. →
+  // command center (sessions / system / usage).
   useEffect(() => {
     const onKeyDown = (event: KeyboardEvent) => {
-      if ((event.metaKey || event.ctrlKey) && !event.altKey && !event.shiftKey && event.key.toLowerCase() === 'k') {
+      if (!(event.metaKey || event.ctrlKey) || event.altKey || event.shiftKey) {
+        return
+      }
+
+      const key = event.key.toLowerCase()
+
+      if (key === 'k') {
         event.preventDefault()
         toggleCommandPalette()
-      }
-    }
-
-    window.addEventListener('keydown', onKeyDown)
-
-    return () => window.removeEventListener('keydown', onKeyDown)
-  }, [])
-
-  // Cmd/Ctrl+. toggles the command center (sessions / system / usage).
-  useEffect(() => {
-    const onKeyDown = (event: KeyboardEvent) => {
-      if ((event.metaKey || event.ctrlKey) && !event.altKey && !event.shiftKey && event.key === '.') {
+      } else if (key === '.') {
         event.preventDefault()
         toggleCommandCenter()
       }
diff --git a/apps/desktop/src/app/settings/about-settings.tsx b/apps/desktop/src/app/settings/about-settings.tsx
index 4d276788e72..48e451c225a 100644
--- a/apps/desktop/src/app/settings/about-settings.tsx
+++ b/apps/desktop/src/app/settings/about-settings.tsx
@@ -126,7 +126,7 @@ export function AboutSettings() {
               size="sm"
               variant="textStrong"
             >
-              {checking ? <Loader2 className="size-3 animate-spin" /> : null}
+              {checking && <Loader2 className="size-3 animate-spin" />}
               {checking ? 'Checking…' : 'Check now'}
             </Button>
 
diff --git a/apps/desktop/src/app/settings/constants.ts b/apps/desktop/src/app/settings/constants.ts
index 3f499b2ea9d..09c75d1b17e 100644
--- a/apps/desktop/src/app/settings/constants.ts
+++ b/apps/desktop/src/app/settings/constants.ts
@@ -289,12 +289,11 @@ export const SECTIONS: DesktopConfigSection[] = [
 export interface ModeOption {
   id: ThemeMode
   label: string
-  description: string
   icon: IconComponent
 }
 
 export const MODE_OPTIONS: ModeOption[] = [
-  { id: 'light', label: 'Light', description: 'Bright desktop surfaces', icon: Sun },
-  { id: 'dark', label: 'Dark', description: 'Low-glare workspace', icon: Moon },
-  { id: 'system', label: 'System', description: 'Follow OS appearance', icon: Monitor }
+  { id: 'light', label: 'Light', icon: Sun },
+  { id: 'dark', label: 'Dark', icon: Moon },
+  { id: 'system', label: 'System', icon: Monitor }
 ]
diff --git a/apps/desktop/src/app/settings/keys-settings.tsx b/apps/desktop/src/app/settings/keys-settings.tsx
index 3f629071494..2dbf228e6ae 100644
--- a/apps/desktop/src/app/settings/keys-settings.tsx
+++ b/apps/desktop/src/app/settings/keys-settings.tsx
@@ -1,5 +1,4 @@
 import { useEffect, useMemo, useState } from 'react'
-import { useSearchParams } from 'react-router-dom'
 
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
@@ -13,6 +12,7 @@ import { CONTROL_TEXT } from './constants'
 import { asText, prettyName, providerGroup, providerPriority, redactedValue, withoutKey } from './helpers'
 import { LoadingState, Pill, SectionHeading, SettingsContent } from './primitives'
 import type { EnvPatch, EnvRowProps, ProviderGroup } from './types'
+import { useDeepLinkHighlight } from './use-deep-link-highlight'
 
 interface EnvActionsProps {
   varKey: string
@@ -224,10 +224,13 @@ export function KeysSettings() {
   const [revealed, setRevealed] = useState<Record<string, string>>({})
   const [saving, setSaving] = useState<string | null>(null)
 
-  // Deep-link target from the command palette (?key=<ENV_VAR>): force-expand
-  // the matching provider group, scroll the row in, and flash it.
-  const [searchParams, setSearchParams] = useSearchParams()
-  const highlightKey = searchParams.get('key')
+  // Deep-link from the command palette (?key=<ENV_VAR>): force-expand the
+  // matching provider group, scroll the row in, and flash it.
+  const highlightKey = useDeepLinkHighlight({
+    elementId: key => `env-var-${key}`,
+    param: 'key',
+    ready: key => Boolean(vars?.[key])
+  })
 
   // We used to hide ~80% of rows behind a global "Show advanced" toggle, but
   // everything in this view is configuration-level — "advanced" was a poor
@@ -259,38 +262,6 @@ export function KeysSettings() {
     return () => void (cancelled = true)
   }, [])
 
-  useEffect(() => {
-    if (!highlightKey || !vars || !vars[highlightKey]) {
-      return
-    }
-
-    // Group expansion is async (state), so defer the scroll a frame to let the
-    // target row mount before we look it up.
-    const scrollTimeout = window.setTimeout(() => {
-      const element = document.getElementById(`env-var-${highlightKey}`)
-
-      if (!element) {
-        return
-      }
-
-      element.scrollIntoView({ behavior: 'smooth', block: 'center' })
-      element.classList.add('setting-field-highlight')
-      window.setTimeout(() => element.classList.remove('setting-field-highlight'), 1600)
-    }, 80)
-
-    setSearchParams(
-      previous => {
-        const next = new URLSearchParams(previous)
-        next.delete('key')
-
-        return next
-      },
-      { replace: true }
-    )
-
-    return () => window.clearTimeout(scrollTimeout)
-  }, [highlightKey, setSearchParams, vars])
-
   const providerGroups = useMemo<ProviderGroup[]>(() => {
     if (!vars) {
       return []
diff --git a/apps/desktop/src/app/settings/mcp-settings.tsx b/apps/desktop/src/app/settings/mcp-settings.tsx
index f5ae916522a..7ff9a7c5e92 100644
--- a/apps/desktop/src/app/settings/mcp-settings.tsx
+++ b/apps/desktop/src/app/settings/mcp-settings.tsx
@@ -1,6 +1,5 @@
 import { useStore } from '@nanostores/react'
 import { useEffect, useMemo, useState } from 'react'
-import { useSearchParams } from 'react-router-dom'
 
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
@@ -13,6 +12,7 @@ import { $activeSessionId } from '@/store/session'
 import type { HermesConfigRecord } from '@/types/hermes'
 
 import { EmptyState, LoadingState, Pill, SettingsContent } from './primitives'
+import { useDeepLinkHighlight } from './use-deep-link-highlight'
 
 interface McpSettingsProps {
   gateway?: HermesGateway | null
@@ -46,7 +46,6 @@ export function McpSettings({ gateway, onConfigSaved }: McpSettingsProps) {
   const activeSessionId = useStore($activeSessionId)
   const [config, setConfig] = useState<HermesConfigRecord | null>(null)
   const [selected, setSelected] = useState<string | null>(null)
-  const [searchParams, setSearchParams] = useSearchParams()
   const [name, setName] = useState('')
   const [body, setBody] = useState('')
   const [saving, setSaving] = useState(false)
@@ -73,36 +72,13 @@ export function McpSettings({ gateway, onConfigSaved }: McpSettingsProps) {
   const servers = useMemo(() => getServers(config), [config])
   const names = useMemo(() => Object.keys(servers).sort(), [servers])
 
-  // Deep-link target from the command palette (?server=<name>): select it and
-  // scroll the list entry into view.
-  const targetServer = searchParams.get('server')
-
-  useEffect(() => {
-    if (!targetServer || !config || !(targetServer in servers)) {
-      return
-    }
-
-    setSelected(targetServer)
-
-    const scrollTimeout = window.setTimeout(() => {
-      const element = document.getElementById(`mcp-server-${targetServer}`)
-      element?.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
-      element?.classList.add('setting-field-highlight')
-      window.setTimeout(() => element?.classList.remove('setting-field-highlight'), 1600)
-    }, 80)
-
-    setSearchParams(
-      previous => {
-        const next = new URLSearchParams(previous)
-        next.delete('server')
-
-        return next
-      },
-      { replace: true }
-    )
-
-    return () => window.clearTimeout(scrollTimeout)
-  }, [config, servers, setSearchParams, targetServer])
+  useDeepLinkHighlight({
+    block: 'nearest',
+    elementId: serverName => `mcp-server-${serverName}`,
+    onResolve: setSelected,
+    param: 'server',
+    ready: serverName => Boolean(config) && serverName in servers
+  })
 
   useEffect(() => {
     const server = selected ? servers[selected] : null
diff --git a/apps/desktop/src/app/settings/sessions-settings.tsx b/apps/desktop/src/app/settings/sessions-settings.tsx
index 1ca7e29fac2..caf7647ac70 100644
--- a/apps/desktop/src/app/settings/sessions-settings.tsx
+++ b/apps/desktop/src/app/settings/sessions-settings.tsx
@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useState } from 'react'
-import { useSearchParams } from 'react-router-dom'
 
 import { Button } from '@/components/ui/button'
 import { deleteSession, listSessions, setSessionArchived } from '@/hermes'
@@ -11,6 +10,7 @@ import { setSessions } from '@/store/session'
 import type { SessionInfo } from '@/types/hermes'
 
 import { EmptyState, ListRow, LoadingState, SectionHeading, SettingsContent } from './primitives'
+import { useDeepLinkHighlight } from './use-deep-link-highlight'
 
 const ARCHIVED_FETCH_LIMIT = 200
 
@@ -34,7 +34,6 @@ export function SessionsSettings() {
   const [sessions, setLocalSessions] = useState<SessionInfo[]>([])
   const [loading, setLoading] = useState(true)
   const [busyId, setBusyId] = useState<string | null>(null)
-  const [searchParams, setSearchParams] = useSearchParams()
 
   const load = useCallback(async () => {
     setLoading(true)
@@ -88,39 +87,11 @@ export function SessionsSettings() {
     }
   }, [])
 
-  // Deep-link target from the command palette (?session=<id>): scroll the row
-  // into view and flash it.
-  const targetSession = searchParams.get('session')
-
-  useEffect(() => {
-    if (!targetSession || loading || !sessions.some(session => session.id === targetSession)) {
-      return
-    }
-
-    const scrollTimeout = window.setTimeout(() => {
-      const element = document.getElementById(`archived-session-${targetSession}`)
-
-      if (!element) {
-        return
-      }
-
-      element.scrollIntoView({ behavior: 'smooth', block: 'center' })
-      element.classList.add('setting-field-highlight')
-      window.setTimeout(() => element.classList.remove('setting-field-highlight'), 1600)
-    }, 80)
-
-    setSearchParams(
-      previous => {
-        const next = new URLSearchParams(previous)
-        next.delete('session')
-
-        return next
-      },
-      { replace: true }
-    )
-
-    return () => window.clearTimeout(scrollTimeout)
-  }, [loading, sessions, setSearchParams, targetSession])
+  useDeepLinkHighlight({
+    elementId: id => `archived-session-${id}`,
+    param: 'session',
+    ready: id => !loading && sessions.some(session => session.id === id)
+  })
 
   if (loading) {
     return <LoadingState label="Loading archived sessions…" />
@@ -152,31 +123,31 @@ export function SessionsSettings() {
               <div className="scroll-mt-6 rounded-lg" id={`archived-session-${session.id}`} key={session.id}>
                 <ListRow
                   action={
-                  <div className="flex items-center gap-1.5">
-                    <Button
-                      disabled={busy}
-                      onClick={() => void unarchive(session)}
-                      size="sm"
-                      type="button"
-                      variant="textStrong"
-                    >
-                      {busy ? <Loader2 className="size-3.5 animate-spin" /> : <ArchiveOff className="size-3.5" />}
-                      <span>Unarchive</span>
-                    </Button>
-                    <Button
-                      aria-label="Delete permanently"
-                      className="text-muted-foreground hover:text-destructive"
-                      disabled={busy}
-                      onClick={() => void remove(session)}
-                      size="icon"
-                      title="Delete permanently"
-                      type="button"
-                      variant="ghost"
-                    >
-                      <Trash2 className="size-3.5" />
-                    </Button>
-                  </div>
-                }
+                    <div className="flex items-center gap-1.5">
+                      <Button
+                        disabled={busy}
+                        onClick={() => void unarchive(session)}
+                        size="sm"
+                        type="button"
+                        variant="textStrong"
+                      >
+                        {busy ? <Loader2 className="size-3.5 animate-spin" /> : <ArchiveOff className="size-3.5" />}
+                        <span>Unarchive</span>
+                      </Button>
+                      <Button
+                        aria-label="Delete permanently"
+                        className="text-muted-foreground hover:text-destructive"
+                        disabled={busy}
+                        onClick={() => void remove(session)}
+                        size="icon"
+                        title="Delete permanently"
+                        type="button"
+                        variant="ghost"
+                      >
+                        <Trash2 className="size-3.5" />
+                      </Button>
+                    </div>
+                  }
                   description={session.preview || undefined}
                   hint={label ? `${label} · ${session.message_count} messages` : `${session.message_count} messages`}
                   title={sessionTitle(session)}
@@ -213,7 +184,10 @@ function DefaultProjectDirSetting() {
     let alive = true
 
     void settings.getDefaultProjectDir().then(result => {
-      if (!alive) {return}
+      if (!alive) {
+        return
+      }
+
       setDir(result.dir)
       setFallback(result.defaultLabel)
     })
@@ -226,7 +200,9 @@ function DefaultProjectDirSetting() {
   const choose = useCallback(async () => {
     const settings = window.hermesDesktop?.settings
 
-    if (!settings) {return}
+    if (!settings) {
+      return
+    }
 
     setBusy(true)
 
@@ -250,7 +226,9 @@ function DefaultProjectDirSetting() {
   const clear = useCallback(async () => {
     const settings = window.hermesDesktop?.settings
 
-    if (!settings) {return}
+    if (!settings) {
+      return
+    }
 
     setBusy(true)
 
diff --git a/apps/desktop/src/app/settings/use-deep-link-highlight.ts b/apps/desktop/src/app/settings/use-deep-link-highlight.ts
new file mode 100644
index 00000000000..a4cabce3a46
--- /dev/null
+++ b/apps/desktop/src/app/settings/use-deep-link-highlight.ts
@@ -0,0 +1,60 @@
+import { useEffect } from 'react'
+import { useSearchParams } from 'react-router-dom'
+
+interface DeepLinkHighlightOptions {
+  param: string
+  ready: (target: string) => boolean
+  elementId: (target: string) => string
+  onResolve?: (target: string) => void
+  block?: ScrollLogicalPosition
+}
+
+// Deep-link from the command palette (?<param>=<id>): once the target row is
+// renderable, scroll it into view and flash it, then drop the param so it
+// doesn't re-fire. Returns the pending target (null once consumed) so callers
+// can force the row open before it mounts.
+export function useDeepLinkHighlight({
+  param,
+  ready,
+  elementId,
+  onResolve,
+  block = 'center'
+}: DeepLinkHighlightOptions): null | string {
+  const [searchParams, setSearchParams] = useSearchParams()
+  const target = searchParams.get(param)
+
+  useEffect(() => {
+    if (!target || !ready(target)) {
+      return
+    }
+
+    onResolve?.(target)
+
+    // Defer a frame so async state (expansion, selection) mounts the row first.
+    const scrollTimeout = window.setTimeout(() => {
+      const element = document.getElementById(elementId(target))
+
+      if (!element) {
+        return
+      }
+
+      element.scrollIntoView({ behavior: 'smooth', block })
+      element.classList.add('setting-field-highlight')
+      window.setTimeout(() => element.classList.remove('setting-field-highlight'), 1600)
+    }, 80)
+
+    setSearchParams(
+      previous => {
+        const next = new URLSearchParams(previous)
+        next.delete(param)
+
+        return next
+      },
+      { replace: true }
+    )
+
+    return () => window.clearTimeout(scrollTimeout)
+  }, [block, elementId, onResolve, param, ready, setSearchParams, target])
+
+  return target
+}
diff --git a/apps/desktop/src/app/shell/statusbar-controls.tsx b/apps/desktop/src/app/shell/statusbar-controls.tsx
index 43487fae7b9..5a97f1a7b7f 100644
--- a/apps/desktop/src/app/shell/statusbar-controls.tsx
+++ b/apps/desktop/src/app/shell/statusbar-controls.tsx
@@ -4,6 +4,11 @@ import { useNavigate } from 'react-router-dom'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
 import { cn } from '@/lib/utils'
 
+// Shared chrome styling for interactive statusbar items (button / link / menu
+// trigger). The 'text' variant intentionally omits hover/transition/disabled.
+const STATUSBAR_ACTION_CLASS =
+  'inline-flex h-full items-center gap-1 rounded-none px-1.5 text-[0.6875rem] text-(--ui-text-tertiary) transition-colors hover:bg-(--chrome-action-hover) hover:text-foreground disabled:cursor-default disabled:opacity-45'
+
 export interface StatusbarMenuItem {
   id: string
   icon?: ReactNode
@@ -93,10 +98,7 @@ function StatusbarItemView({ item, navigate }: { item: StatusbarItem; navigate:
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <button
-            className={cn(
-              'inline-flex h-full items-center gap-1 rounded-none px-1.5 text-[0.6875rem] text-(--ui-text-tertiary) transition-colors hover:bg-(--chrome-action-hover) hover:text-foreground disabled:cursor-default disabled:opacity-45',
-              item.className
-            )}
+            className={cn(STATUSBAR_ACTION_CLASS, item.className)}
             disabled={item.disabled}
             title={title}
             type="button"
@@ -167,10 +169,7 @@ function StatusbarItemView({ item, navigate }: { item: StatusbarItem; navigate:
   if (item.href || item.variant === 'link') {
     return (
       <a
-        className={cn(
-          'inline-flex h-full items-center gap-1 rounded-none px-1.5 text-[0.6875rem] text-(--ui-text-tertiary) transition-colors hover:bg-(--chrome-action-hover) hover:text-foreground disabled:cursor-default disabled:opacity-45',
-          item.className
-        )}
+        className={cn(STATUSBAR_ACTION_CLASS, item.className)}
         href={item.href}
         rel="noreferrer"
         target="_blank"
@@ -183,10 +182,7 @@ function StatusbarItemView({ item, navigate }: { item: StatusbarItem; navigate:
 
   return (
     <button
-      className={cn(
-        'inline-flex h-full items-center gap-1 rounded-none px-1.5 text-[0.6875rem] text-(--ui-text-tertiary) transition-colors hover:bg-(--chrome-action-hover) hover:text-foreground disabled:cursor-default disabled:opacity-45',
-        item.className
-      )}
+      className={cn(STATUSBAR_ACTION_CLASS, item.className)}
       disabled={item.disabled}
       onClick={() => {
         if (item.to) {
diff --git a/apps/desktop/src/components/assistant-ui/clarify-tool.tsx b/apps/desktop/src/components/assistant-ui/clarify-tool.tsx
index 337ae457705..cad01efe6ee 100644
--- a/apps/desktop/src/components/assistant-ui/clarify-tool.tsx
+++ b/apps/desktop/src/components/assistant-ui/clarify-tool.tsx
@@ -33,6 +33,23 @@ function readClarifyArgs(args: unknown): ClarifyArgs {
   }
 }
 
+// Choice and "Other" rows share a layout; only color/hover differs.
+const OPTION_ROW_CLASS = 'flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-sm transition-colors'
+
+function RadioDot({ selected }: { selected: boolean }) {
+  return (
+    <span
+      aria-hidden
+      className={cn(
+        'grid size-3.5 shrink-0 place-items-center rounded-full border transition-colors',
+        selected ? 'border-primary' : 'border-muted-foreground/40'
+      )}
+    >
+      {selected && <span className="size-1.5 rounded-full bg-primary" />}
+    </span>
+  )
+}
+
 export const ClarifyTool = (props: ToolCallMessagePartProps) => {
   const isPending = props.result === undefined
 
@@ -164,8 +181,8 @@ function ClarifyToolPending({ args }: ToolCallMessagePartProps) {
           {choices.map((choice, index) => (
             <button
               className={cn(
-                'flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-sm text-foreground/95',
-                'transition-colors hover:bg-accent/60 disabled:cursor-not-allowed disabled:opacity-55',
+                OPTION_ROW_CLASS,
+                'text-foreground/95 hover:bg-accent/60 disabled:cursor-not-allowed disabled:opacity-55',
                 selectedChoice === choice && 'bg-accent/60'
               )}
               data-choice
@@ -177,24 +194,13 @@ function ClarifyToolPending({ args }: ToolCallMessagePartProps) {
               }}
               type="button"
             >
-              <span
-                aria-hidden
-                className={cn(
-                  'grid size-3.5 shrink-0 place-items-center rounded-full border transition-colors',
-                  selectedChoice === choice ? 'border-primary' : 'border-muted-foreground/40'
-                )}
-              >
-                {selectedChoice === choice && <span className="size-1.5 rounded-full bg-primary" />}
-              </span>
+              <RadioDot selected={selectedChoice === choice} />
               <span className="flex-1 wrap-anywhere">{choice}</span>
               {selectedChoice === choice && <Check aria-hidden className="size-4 shrink-0 text-primary" />}
             </button>
           ))}
           <button
-            className={cn(
-              'flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-sm text-muted-foreground',
-              'transition-colors hover:bg-accent/40 hover:text-foreground'
-            )}
+            className={cn(OPTION_ROW_CLASS, 'text-muted-foreground hover:bg-accent/40 hover:text-foreground')}
             disabled={submitting}
             onClick={() => {
               setTyping(true)
@@ -202,7 +208,7 @@ function ClarifyToolPending({ args }: ToolCallMessagePartProps) {
             }}
             type="button"
           >
-            <span aria-hidden className="size-3.5 shrink-0 rounded-full border border-muted-foreground/40" />
+            <RadioDot selected={false} />
             <span className="flex-1">Other (type your answer)</span>
           </button>
         </div>
diff --git a/apps/desktop/src/components/ui/dropdown-menu.tsx b/apps/desktop/src/components/ui/dropdown-menu.tsx
index 0997b9c02d4..7c4c7072c12 100644
--- a/apps/desktop/src/components/ui/dropdown-menu.tsx
+++ b/apps/desktop/src/components/ui/dropdown-menu.tsx
@@ -110,7 +110,7 @@ function DropdownMenuItem({
   return (
     <DropdownMenuPrimitive.Item
       className={cn(
-        "relative flex cursor-pointer items-center gap-2 rounded-md px-2 py-1 text-xs outline-hidden select-none focus:bg-(--ui-control-active-background) focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 [&_svg:not([class*='text-'])]:text-(--ui-text-tertiary) data-[variant=destructive]:*:[svg]:text-destructive!",
+        "relative flex items-center gap-2 rounded-md px-2 py-1 text-xs outline-hidden select-none focus:bg-(--ui-control-active-background) focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 [&_svg:not([class*='text-'])]:text-(--ui-text-tertiary) data-[variant=destructive]:*:[svg]:text-destructive!",
         className
       )}
       data-inset={inset}
@@ -131,7 +131,7 @@ function DropdownMenuCheckboxItem({
     <DropdownMenuPrimitive.CheckboxItem
       checked={checked}
       className={cn(
-        "relative flex cursor-pointer items-center gap-2 rounded-md px-2 py-1 text-xs outline-hidden select-none focus:bg-(--ui-control-active-background) focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
+        "relative flex items-center gap-2 rounded-md px-2 py-1 text-xs outline-hidden select-none focus:bg-(--ui-control-active-background) focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
         className
       )}
       data-slot="dropdown-menu-checkbox-item"
@@ -157,7 +157,7 @@ function DropdownMenuRadioItem({
   return (
     <DropdownMenuPrimitive.RadioItem
       className={cn(
-        "relative flex cursor-pointer items-center gap-2 rounded-md px-2 py-1 text-xs outline-hidden select-none focus:bg-(--ui-control-active-background) focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
+        "relative flex items-center gap-2 rounded-md px-2 py-1 text-xs outline-hidden select-none focus:bg-(--ui-control-active-background) focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
         className
       )}
       data-slot="dropdown-menu-radio-item"
diff --git a/apps/desktop/src/components/ui/switch.tsx b/apps/desktop/src/components/ui/switch.tsx
index 96bbe345d82..2b6b72cadea 100644
--- a/apps/desktop/src/components/ui/switch.tsx
+++ b/apps/desktop/src/components/ui/switch.tsx
@@ -41,7 +41,7 @@ function Switch({
 }: React.ComponentProps<typeof SwitchPrimitive.Root> & VariantProps<typeof switchVariants>) {
   return (
     <SwitchPrimitive.Root className={cn(switchVariants({ size }), className)} data-slot="switch" {...props}>
-      <SwitchPrimitive.Thumb className={cn(switchThumbVariants({ size }))} data-slot="switch-thumb" />
+      <SwitchPrimitive.Thumb className={switchThumbVariants({ size })} data-slot="switch-thumb" />
     </SwitchPrimitive.Root>
   )
 }

From 86643d84e99ee7680bd94a065373fbf9501e02a2 Mon Sep 17 00:00:00 2001
From: Brooklyn Nicholson <brooklyn.bb.nicholson@gmail.com>
Date: Thu, 4 Jun 2026 00:32:55 -0500
Subject: [PATCH 29/29] feat(desktop): Cmd+K jumps to sessions; drop API-key
 entries

Add active sessions to the palette (fuzzy jump-to-chat), remove the
low-value per-API-key entries, and move the lazy palette sources
(config/sessions/archived) to react-query instead of hand-rolled
useState + effect fetching. Hoist the shared nav helper.
---
 .../desktop/src/app/command-palette/index.tsx | 124 +++++++++---------
 1 file changed, 61 insertions(+), 63 deletions(-)

diff --git a/apps/desktop/src/app/command-palette/index.tsx b/apps/desktop/src/app/command-palette/index.tsx
index 8b98b50b8f8..ffabbc864be 100644
--- a/apps/desktop/src/app/command-palette/index.tsx
+++ b/apps/desktop/src/app/command-palette/index.tsx
@@ -1,6 +1,7 @@
 import { useStore } from '@nanostores/react'
+import { useQuery } from '@tanstack/react-query'
 import { Dialog as DialogPrimitive } from 'radix-ui'
-import { useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 
 import {
@@ -11,7 +12,7 @@ import {
   CommandItem,
   CommandList
 } from '@/components/ui/command'
-import { getEnvVars, getHermesConfigRecord, listSessions } from '@/hermes'
+import { getHermesConfigRecord, listSessions } from '@/hermes'
 import { sessionTitle } from '@/lib/chat-runtime'
 import {
   Activity,
@@ -49,6 +50,7 @@ import {
   MESSAGING_ROUTE,
   NEW_CHAT_ROUTE,
   PROFILES_ROUTE,
+  sessionRoute,
   SETTINGS_ROUTE,
   SKILLS_ROUTE
 } from '../routes'
@@ -81,6 +83,20 @@ interface PalettePage {
   title: string
 }
 
+interface SessionEntry {
+  id: string
+  preview?: string
+  title: string
+}
+
+type SessionRow = Awaited<ReturnType<typeof listSessions>>['sessions'][number]
+
+const toSessionEntry = (session: SessionRow): SessionEntry => ({
+  id: session.id,
+  preview: session.preview ?? undefined,
+  title: sessionTitle(session)
+})
+
 const NON_CONFIG_SETTINGS: ReadonlyArray<{ icon: IconComponent; keywords?: string[]; label: string; tab: string }> = [
   { icon: Globe, keywords: ['connection', 'messaging'], label: 'Gateway', tab: 'gateway' },
   { icon: KeyRound, keywords: ['api', 'secrets', 'tokens', 'credentials'], label: 'API Keys', tab: 'keys' },
@@ -105,60 +121,43 @@ export function CommandPalette() {
   const { availableThemes, mode, resolvedMode, setMode, setTheme, themeName } = useTheme()
   const [search, setSearch] = useState('')
   const [page, setPage] = useState<string | null>(null)
-  const [envKeys, setEnvKeys] = useState<Array<{ description?: string; key: string }>>([])
-  const [mcpServers, setMcpServers] = useState<string[]>([])
-  const [archivedSessions, setArchivedSessions] = useState<Array<{ id: string; preview?: string; title: string }>>([])
 
+  // Server-backed sources for the type-to-search groups, fetched lazily while
+  // the palette is open. react-query handles caching/dedup/staleness.
+  const configQuery = useQuery({ queryKey: ['command-palette', 'config'], queryFn: getHermesConfigRecord, enabled: open })
+
+  const sessionsQuery = useQuery({
+    queryKey: ['command-palette', 'sessions'],
+    queryFn: () => listSessions(200, 1, 'exclude'),
+    enabled: open
+  })
+
+  const archivedQuery = useQuery({
+    queryKey: ['command-palette', 'archived'],
+    queryFn: () => listSessions(200, 0, 'only'),
+    enabled: open
+  })
+
+  const mcpServers = useMemo(() => {
+    const raw = configQuery.data?.mcp_servers
+
+    return raw && typeof raw === 'object' && !Array.isArray(raw) ? Object.keys(raw as Record<string, unknown>).sort() : []
+  }, [configQuery.data])
+
+  const sessions = useMemo(() => (sessionsQuery.data?.sessions ?? []).map(toSessionEntry), [sessionsQuery.data])
+  const archivedSessions = useMemo(() => (archivedQuery.data?.sessions ?? []).map(toSessionEntry), [archivedQuery.data])
+
+  // Reset the query/sub-page on close so it reopens clean.
   useEffect(() => {
     if (!open) {
       setSearch('')
       setPage(null)
-
-      return
     }
-
-    let cancelled = false
-
-    void (async () => {
-      try {
-        const [vars, config, sessions] = await Promise.all([
-          getEnvVars(),
-          getHermesConfigRecord(),
-          listSessions(200, 0, 'only')
-        ])
-
-        if (cancelled) {
-          return
-        }
-
-        setEnvKeys(Object.entries(vars).map(([key, info]) => ({ description: info.description, key })))
-
-        const rawServers = config?.mcp_servers
-
-        const servers =
-          rawServers && typeof rawServers === 'object' && !Array.isArray(rawServers)
-            ? Object.keys(rawServers as Record<string, unknown>).sort()
-            : []
-
-        setMcpServers(servers)
-
-        setArchivedSessions(
-          sessions.sessions.map(session => ({
-            id: session.id,
-            preview: session.preview ?? undefined,
-            title: sessionTitle(session)
-          }))
-        )
-      } catch {
-        // Best-effort: deep-link sources just stay empty if a load fails.
-      }
-    })()
-
-    return () => void (cancelled = true)
   }, [open])
 
+  const go = useCallback((path: string) => () => navigate(path), [navigate])
+
   const baseGroups = useMemo<PaletteGroup[]>(() => {
-    const go = (path: string) => () => navigate(path)
     const settingsTab = (tab: string) => `${SETTINGS_ROUTE}?tab=${tab}`
 
     return [
@@ -246,7 +245,7 @@ export function CommandPalette() {
         ]
       }
     ]
-  }, [navigate])
+  }, [go])
 
   // The long, granular lists (settings fields, API keys, MCP servers, archived
   // chats) only surface once the user types — otherwise they'd bury the
@@ -256,9 +255,21 @@ export function CommandPalette() {
       return []
     }
 
-    const go = (path: string) => () => navigate(path)
     const result: PaletteGroup[] = []
 
+    if (sessions.length > 0) {
+      result.push({
+        heading: 'Sessions',
+        items: sessions.map(session => ({
+          icon: MessageCircle,
+          id: `session-${session.id}`,
+          keywords: ['chat', 'session', ...(session.preview ? [session.preview] : [])],
+          label: session.title,
+          run: go(sessionRoute(session.id))
+        }))
+      })
+    }
+
     const fieldItems = SECTIONS.flatMap(section =>
       section.keys.map(key => ({
         icon: section.icon,
@@ -271,19 +282,6 @@ export function CommandPalette() {
 
     result.push({ heading: 'Settings fields', items: fieldItems })
 
-    if (envKeys.length > 0) {
-      result.push({
-        heading: 'API keys',
-        items: envKeys.map(entry => ({
-          icon: KeyRound,
-          id: `key-${entry.key}`,
-          keywords: ['api', 'secret', 'token', ...(entry.description ? [entry.description] : [])],
-          label: entry.key,
-          run: go(`${SETTINGS_ROUTE}?tab=keys&key=${encodeURIComponent(entry.key)}`)
-        }))
-      })
-    }
-
     if (mcpServers.length > 0) {
       result.push({
         heading: 'MCP servers',
@@ -311,7 +309,7 @@ export function CommandPalette() {
     }
 
     return result
-  }, [archivedSessions, envKeys, mcpServers, navigate, search])
+  }, [archivedSessions, go, mcpServers, search, sessions])
 
   const groups = useMemo(() => [...baseGroups, ...searchGroups], [baseGroups, searchGroups])