diff --git a/apps/dashboard/src/components/ChatSidebar.tsx b/apps/dashboard/src/components/ChatSidebar.tsx
index 38f1cf80abd..87af497237a 100644
--- a/apps/dashboard/src/components/ChatSidebar.tsx
+++ b/apps/dashboard/src/components/ChatSidebar.tsx
@@ -323,7 +323,7 @@ export function ChatSidebar({ channel, className }: ChatSidebarProps) {
                 <ChevronDown className="opacity-60" />
               ) : undefined
             }
-            className="self-start min-w-0 px-0 py-0 normal-case tracking-normal text-sm font-medium hover:underline disabled:no-underline"
+            className="self-start min-w-0 px-0 py-0 normal-case tracking-normal text-sm font-medium underline-offset-4 decoration-current/40 hover:underline disabled:no-underline"
             title={info.model ?? "switch model"}
           >
             <span className="truncate">{modelLabel}</span>
diff --git a/apps/dashboard/src/components/Markdown.tsx b/apps/dashboard/src/components/Markdown.tsx
index bef0804e7c4..c80ea08d11e 100644
--- a/apps/dashboard/src/components/Markdown.tsx
+++ b/apps/dashboard/src/components/Markdown.tsx
@@ -331,7 +331,7 @@ function InlineContent({
                 href={node.href}
                 target="_blank"
                 rel="noreferrer"
-                className="text-primary underline underline-offset-2 decoration-primary/30 hover:decoration-primary/60 transition-colors"
+                className="text-primary underline underline-offset-4 decoration-current/40 transition-colors"
               >
                 {node.text}
               </a>
diff --git a/apps/dashboard/src/pages/AnalyticsPage.tsx b/apps/dashboard/src/pages/AnalyticsPage.tsx
index 4896e760636..e46a1806e6d 100644
--- a/apps/dashboard/src/pages/AnalyticsPage.tsx
+++ b/apps/dashboard/src/pages/AnalyticsPage.tsx
@@ -510,7 +510,7 @@ export default function AnalyticsPage() {
                 <span className="font-mono">
                   dashboard.show_token_analytics: true
                 </span>{" "}
-                in <a href="/config" className="underline">Config</a>.
+                in <a href="/config" className="underline underline-offset-4 decoration-current/40">Config</a>.
               </p>
             </div>
           </CardContent>
diff --git a/apps/dashboard/src/pages/EnvPage.tsx b/apps/dashboard/src/pages/EnvPage.tsx
index 1c457da0583..a06df1a5e15 100644
--- a/apps/dashboard/src/pages/EnvPage.tsx
+++ b/apps/dashboard/src/pages/EnvPage.tsx
@@ -148,7 +148,7 @@ function EnvVarRow({
               href={info.url}
               target="_blank"
               rel="noreferrer"
-              className="inline-flex items-center gap-1 text-[0.65rem] text-primary hover:underline"
+              className="inline-flex items-center gap-1 text-[0.65rem] text-primary underline-offset-4 decoration-current/40 hover:underline"
             >
               {t.env.getKey} <ExternalLink className="h-2.5 w-2.5" />
             </a>
@@ -184,7 +184,7 @@ function EnvVarRow({
               href={info.url}
               target="_blank"
               rel="noreferrer"
-              className="inline-flex items-center gap-1 text-[0.65rem] text-primary hover:underline"
+              className="inline-flex items-center gap-1 text-[0.65rem] text-primary underline-offset-4 decoration-current/40 hover:underline"
             >
               {t.env.getKey} <ExternalLink className="h-2.5 w-2.5" />
             </a>
@@ -217,7 +217,7 @@ function EnvVarRow({
             href={info.url}
             target="_blank"
             rel="noreferrer"
-            className="inline-flex items-center gap-1 text-[0.65rem] text-primary hover:underline"
+            className="inline-flex items-center gap-1 text-[0.65rem] text-primary underline-offset-4 decoration-current/40 hover:underline"
           >
             {t.env.getKey} <ExternalLink className="h-2.5 w-2.5" />
           </a>
@@ -407,7 +407,7 @@ function ProviderGroupCard({
               href={keyUrl}
               target="_blank"
               rel="noreferrer"
-              className="inline-flex items-center gap-1 text-[0.65rem] text-primary hover:underline"
+              className="inline-flex items-center gap-1 text-[0.65rem] text-primary underline-offset-4 decoration-current/40 hover:underline"
               onClick={(e) => e.stopPropagation()}
             >
               {t.env.getKey} <ExternalLink className="h-2.5 w-2.5" />
diff --git a/apps/dashboard/src/pages/ModelsPage.tsx b/apps/dashboard/src/pages/ModelsPage.tsx
index f09104d4241..98c5be1a617 100644
--- a/apps/dashboard/src/pages/ModelsPage.tsx
+++ b/apps/dashboard/src/pages/ModelsPage.tsx
@@ -927,7 +927,7 @@ export default function ModelsPage() {
                   …) and provider retries, so they diverge from your provider
                   bill. Enable{" "}
                   <span className="font-mono">dashboard.show_token_analytics</span>{" "}
-                  in <a href="/config" className="underline">Config</a> to
+                  in <a href="/config" className="underline underline-offset-4 decoration-current/40">Config</a> to
                   show the local debug estimate anyway.
                 </p>
               )}
diff --git a/apps/dashboard/src/pages/PluginsPage.tsx b/apps/dashboard/src/pages/PluginsPage.tsx
index 290e5e04f0f..6696f3580c1 100644
--- a/apps/dashboard/src/pages/PluginsPage.tsx
+++ b/apps/dashboard/src/pages/PluginsPage.tsx
@@ -346,7 +346,7 @@ export default function PluginsPage() {
                   {!m.tab?.hidden ? (
 
 
-                    <Link className="ml-3 inline-flex items-center gap-1 underline" to={m.tab.path}>
+                    <Link className="ml-3 inline-flex items-center gap-1 underline underline-offset-4 decoration-current/40" to={m.tab.path}>
 
 
                       <ExternalLink className="h-3 w-3 opacity-65" />
diff --git a/apps/desktop/electron/main.cjs b/apps/desktop/electron/main.cjs
index 9cd1b07068e..0d1c77d514c 100644
--- a/apps/desktop/electron/main.cjs
+++ b/apps/desktop/electron/main.cjs
@@ -31,6 +31,14 @@ const {
   resolveTimeoutMs
 } = require('./hardening.cjs')
 
+let nodePty = null
+
+try {
+  nodePty = require('@homebridge/node-pty-prebuilt-multiarch')
+} catch {
+  nodePty = null
+}
+
 const USER_DATA_OVERRIDE = process.env.HERMES_DESKTOP_USER_DATA_DIR
 if (USER_DATA_OVERRIDE) {
   const resolvedUserData = path.resolve(USER_DATA_OVERRIDE)
@@ -133,6 +141,7 @@ const APP_ICON_PATHS = [
 ]
 
 let rendererTitleBarTheme = null
+const terminalSessions = new Map()
 
 function isHexColor(value) {
   return typeof value === 'string' && /^#[0-9a-f]{6}$/i.test(value)
@@ -608,11 +617,10 @@ function findSystemPython() {
   if (pyExe) {
     for (const version of SUPPORTED_VERSIONS) {
       try {
-        const out = execFileSync(
-          pyExe,
-          [`-${version}`, '-c', 'import sys; print(sys.executable)'],
-          { encoding: 'utf8', stdio: ['ignore', 'pipe', 'ignore'] }
-        )
+        const out = execFileSync(pyExe, [`-${version}`, '-c', 'import sys; print(sys.executable)'], {
+          encoding: 'utf8',
+          stdio: ['ignore', 'pipe', 'ignore']
+        })
         const candidate = out.trim()
         if (candidate && fileExists(candidate)) return candidate
       } catch {
@@ -2792,7 +2800,21 @@ ipcMain.handle('hermes:fetchLinkTitle', (_event, url) => fetchLinkTitle(url))
 
 // Always-hidden noise (covers non-git projects too — gitignore would catch
 // these anyway when present, but we want the same hygiene without one).
-const FS_READDIR_HIDDEN = new Set(['.git', '.hg', '.svn', 'node_modules', '__pycache__', '.next', '.venv', 'venv'])
+const FS_READDIR_HIDDEN = new Set([
+  '.git',
+  '.hg',
+  '.svn',
+  '.cache',
+  '.next',
+  '.turbo',
+  '.venv',
+  '__pycache__',
+  'build',
+  'dist',
+  'node_modules',
+  'target',
+  'venv'
+])
 
 function findGitRoot(start) {
   let dir = start
@@ -2818,6 +2840,76 @@ function findGitRoot(start) {
   return null
 }
 
+function terminalShellCommand() {
+  if (IS_WINDOWS) {
+    return { args: [], command: process.env.COMSPEC || 'cmd.exe' }
+  }
+
+  const configuredShell = process.env.SHELL || ''
+  const shellPath =
+    (path.isAbsolute(configuredShell) && fs.existsSync(configuredShell) && configuredShell) ||
+    ['/bin/zsh', '/bin/bash', '/bin/sh'].find(candidate => fs.existsSync(candidate)) ||
+    '/bin/sh'
+  const shellName = path.basename(shellPath)
+  const interactiveArgs = shellName.includes('zsh') || shellName.includes('bash') ? ['-il'] : ['-i']
+
+  return { args: interactiveArgs, command: shellPath, name: shellName }
+}
+
+function safeTerminalCwd(cwd) {
+  const candidate = path.resolve(String(cwd || app.getPath('home')))
+
+  try {
+    const stat = fs.statSync(candidate)
+
+    return stat.isDirectory() ? candidate : path.dirname(candidate)
+  } catch {
+    return app.getPath('home')
+  }
+}
+
+function terminalShellEnv() {
+  const env = { ...process.env }
+
+  // Electron is commonly launched through `npm run dev`; do not leak npm's
+  // managed prefix into a user's interactive shell (nvm/proto warn loudly).
+  for (const key of Object.keys(env)) {
+    if (key === 'npm_config_prefix' || key.startsWith('npm_config_') || key.startsWith('npm_package_')) {
+      delete env[key]
+    }
+  }
+
+  env.COLORTERM = env.COLORTERM || 'truecolor'
+  env.LC_CTYPE = env.LC_CTYPE || 'UTF-8'
+  env.TERM = 'xterm-256color'
+  env.TERM_PROGRAM = 'Hermes'
+  env.TERM_PROGRAM_VERSION = app.getVersion()
+
+  return env
+}
+
+function terminalChannel(id, suffix) {
+  return `hermes:terminal:${id}:${suffix}`
+}
+
+function disposeTerminalSession(id) {
+  const sessionInfo = terminalSessions.get(id)
+
+  if (!sessionInfo) {
+    return false
+  }
+
+  terminalSessions.delete(id)
+
+  try {
+    sessionInfo.pty.kill()
+  } catch {
+    // Process may already be gone.
+  }
+
+  return true
+}
+
 ipcMain.handle('hermes:fs:readDir', async (_event, dirPath) => {
   const resolved = path.resolve(String(dirPath || ''))
 
@@ -2859,6 +2951,72 @@ ipcMain.handle('hermes:fs:gitRoot', async (_event, startPath) => {
   }
 })
 
+ipcMain.handle('hermes:terminal:start', async (event, payload = {}) => {
+  if (!nodePty) {
+    throw new Error('PTY support is unavailable. Reinstall desktop dependencies and restart Hermes.')
+  }
+
+  const id = crypto.randomUUID()
+  const { args, command, name } = terminalShellCommand()
+  const cwd = safeTerminalCwd(payload?.cwd)
+  const cols = Math.max(2, Number.parseInt(String(payload?.cols || 80), 10) || 80)
+  const rows = Math.max(2, Number.parseInt(String(payload?.rows || 24), 10) || 24)
+  const ptyProcess = nodePty.spawn(command, args, {
+    cols,
+    cwd,
+    env: terminalShellEnv(),
+    name: 'xterm-256color',
+    rows
+  })
+
+  terminalSessions.set(id, { pty: ptyProcess, webContentsId: event.sender.id })
+
+  const send = (suffix, payload) => {
+    if (event.sender.isDestroyed()) {
+      return
+    }
+
+    event.sender.send(terminalChannel(id, suffix), payload)
+  }
+
+  ptyProcess.onData(data => send('data', data))
+  ptyProcess.onExit(({ exitCode, signal }) => {
+    terminalSessions.delete(id)
+    send('exit', { code: exitCode, signal: signal || null })
+  })
+  event.sender.once('destroyed', () => disposeTerminalSession(id))
+
+  return { cwd, id, shell: name }
+})
+
+ipcMain.handle('hermes:terminal:write', (_event, id, data) => {
+  const sessionInfo = terminalSessions.get(String(id || ''))
+
+  if (!sessionInfo) {
+    return false
+  }
+
+  sessionInfo.pty.write(String(data || ''))
+
+  return true
+})
+
+ipcMain.handle('hermes:terminal:resize', (_event, id, size = {}) => {
+  const sessionInfo = terminalSessions.get(String(id || ''))
+
+  if (!sessionInfo) {
+    return false
+  }
+
+  const cols = Math.max(2, Number.parseInt(String(size?.cols || 80), 10) || 80)
+  const rows = Math.max(2, Number.parseInt(String(size?.rows || 24), 10) || 24)
+
+  sessionInfo.pty.resize(cols, rows)
+
+  return true
+})
+ipcMain.handle('hermes:terminal:dispose', (_event, id) => disposeTerminalSession(String(id || '')))
+
 ipcMain.handle('hermes:updates:check', async () =>
   checkUpdates().catch(error => ({
     supported: true,
diff --git a/apps/desktop/electron/preload.cjs b/apps/desktop/electron/preload.cjs
index de3dbeb8f93..2cc04f5a62e 100644
--- a/apps/desktop/electron/preload.cjs
+++ b/apps/desktop/electron/preload.cjs
@@ -33,6 +33,24 @@ contextBridge.exposeInMainWorld('hermesDesktop', {
   fetchLinkTitle: url => ipcRenderer.invoke('hermes:fetchLinkTitle', url),
   readDir: dirPath => ipcRenderer.invoke('hermes:fs:readDir', dirPath),
   gitRoot: startPath => ipcRenderer.invoke('hermes:fs:gitRoot', startPath),
+  terminal: {
+    dispose: id => ipcRenderer.invoke('hermes:terminal:dispose', id),
+    resize: (id, size) => ipcRenderer.invoke('hermes:terminal:resize', id, size),
+    start: options => ipcRenderer.invoke('hermes:terminal:start', options),
+    write: (id, data) => ipcRenderer.invoke('hermes:terminal:write', id, data),
+    onData: (id, callback) => {
+      const channel = `hermes:terminal:${id}:data`
+      const listener = (_event, payload) => callback(payload)
+      ipcRenderer.on(channel, listener)
+      return () => ipcRenderer.removeListener(channel, listener)
+    },
+    onExit: (id, callback) => {
+      const channel = `hermes:terminal:${id}:exit`
+      const listener = (_event, payload) => callback(payload)
+      ipcRenderer.on(channel, listener)
+      return () => ipcRenderer.removeListener(channel, listener)
+    }
+  },
   onClosePreviewRequested: callback => {
     const listener = () => callback()
     ipcRenderer.on('hermes:close-preview-requested', listener)
diff --git a/apps/desktop/package.json b/apps/desktop/package.json
index a70afbc7979..634356f55f0 100644
--- a/apps/desktop/package.json
+++ b/apps/desktop/package.json
@@ -45,7 +45,11 @@
     "@assistant-ui/react-streamdown": "^0.1.11",
     "@audiowave/react": "^0.6.2",
     "@chenglou/pretext": "^0.0.6",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@hermes/shared": "file:../shared",
+    "@homebridge/node-pty-prebuilt-multiarch": "^0.13.1",
     "@nanostores/react": "^1.1.0",
     "@nous-research/ui": "^0.13.0",
     "@radix-ui/react-slot": "^1.2.4",
@@ -54,6 +58,12 @@
     "@tailwindcss/typography": "^0.5.19",
     "@tailwindcss/vite": "^4.2.4",
     "@tanstack/react-query": "^5.100.6",
+    "@tanstack/react-virtual": "^3.13.24",
+    "@vscode/codicons": "^0.0.45",
+    "@xterm/addon-fit": "^0.11.0",
+    "@xterm/addon-unicode11": "^0.9.0",
+    "@xterm/addon-web-links": "^0.12.0",
+    "@xterm/xterm": "^6.0.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
@@ -62,7 +72,6 @@
     "ignore": "^7.0.5",
     "katex": "^0.16.45",
     "leva": "^0.10.1",
-    "lucide-react": "^0.577.0",
     "motion": "^12.38.0",
     "nanostores": "^1.3.0",
     "radix-ui": "^1.4.3",
@@ -80,7 +89,6 @@
     "unicode-animations": "^1.0.3",
     "unified": "^11.0.5",
     "unist-util-visit-parents": "^6.0.2",
-    "use-stick-to-bottom": "^1.1.4",
     "vfile": "^6.0.3",
     "web-haptics": "^0.0.6"
   },
diff --git a/apps/desktop/src/app/agents/index.tsx b/apps/desktop/src/app/agents/index.tsx
index cc5afa17f42..4bcf76e46e6 100644
--- a/apps/desktop/src/app/agents/index.tsx
+++ b/apps/desktop/src/app/agents/index.tsx
@@ -36,12 +36,7 @@ function statusGlyph(status: SubagentStatus): ReactNode {
     return <AlertCircle aria-label="Failed" className="size-3.5 shrink-0 text-destructive" />
   }
 
-  return (
-    <CheckCircle2
-      aria-label="Done"
-      className="size-3.5 shrink-0 text-emerald-600/85 dark:text-emerald-400/85"
-    />
-  )
+  return <CheckCircle2 aria-label="Done" className="size-3.5 shrink-0 text-emerald-600/85 dark:text-emerald-400/85" />
 }
 
 const STREAM_TONE: Record<SubagentStreamEntry['kind'], string> = {
@@ -65,7 +60,11 @@ function streamGlyph(entry: SubagentStreamEntry): ReactNode {
   }
 
   if (entry.kind === 'thinking') {
-    return <span aria-hidden className="font-mono text-[0.7rem] leading-none text-muted-foreground/70">…</span>
+    return (
+      <span aria-hidden className="font-mono text-[0.7rem] leading-none text-muted-foreground/70">
+        …
+      </span>
+    )
   }
 
   return <span aria-hidden className="mt-0.5 size-1 shrink-0 rounded-full bg-muted-foreground/55" />
@@ -103,8 +102,13 @@ export function AgentsView({ onClose }: AgentsViewProps) {
 }
 
 const fmtDuration = (seconds?: number) => {
-  if (!seconds || seconds <= 0) return ''
-  if (seconds < 60) return `${seconds.toFixed(1)}s`
+  if (!seconds || seconds <= 0) {
+    return ''
+  }
+
+  if (seconds < 60) {
+    return `${seconds.toFixed(1)}s`
+  }
 
   const m = Math.floor(seconds / 60)
   const s = Math.round(seconds % 60)
@@ -113,18 +117,29 @@ const fmtDuration = (seconds?: number) => {
 }
 
 const fmtTokens = (value?: number) => {
-  if (!value) return ''
+  if (!value) {
+    return ''
+  }
 
   return value >= 1000 ? `${(value / 1000).toFixed(1)}k tok` : `${value} tok`
 }
 
 const fmtAge = (updatedAt: number, nowMs: number) => {
   const s = Math.max(0, Math.round((nowMs - updatedAt) / 1000))
-  if (s < 2) return 'now'
-  if (s < 60) return `${s}s ago`
+
+  if (s < 2) {
+    return 'now'
+  }
+
+  if (s < 60) {
+    return `${s}s ago`
+  }
 
   const m = Math.floor(s / 60)
-  if (m < 60) return `${m}m ago`
+
+  if (m < 60) {
+    return `${m}m ago`
+  }
 
   return `${Math.floor(m / 60)}h ago`
 }
@@ -152,12 +167,14 @@ function groupDelegations(roots: readonly SubagentNode[]): RootGroup[] {
 
     if (prev && sameShape && closeInTime && uniqueStep) {
       prev.nodes.push(node)
+
       continue
     }
 
     if (node.taskCount > 1) {
       n += 1
       groups.push({ id: `delegation-${n}`, label: `Delegation ${n}`, nodes: [node], taskCount: node.taskCount })
+
       continue
     }
 
@@ -180,7 +197,9 @@ function SubagentTree({ tree }: { tree: SubagentNode[] }) {
   const cost = flat.reduce((sum, n) => sum + (n.costUsd ?? 0), 0)
 
   useEffect(() => {
-    if (active <= 0 || typeof window === 'undefined') return
+    if (active <= 0 || typeof window === 'undefined') {
+      return
+    }
 
     const id = window.setInterval(() => setNowMs(Date.now()), 500)
 
@@ -261,10 +280,7 @@ function StreamLine({
   const tone = entry.isError ? 'text-destructive' : STREAM_TONE[entry.kind]
 
   return (
-    <div
-      className="flex min-w-0 items-baseline gap-2 text-[0.72rem] leading-relaxed"
-      ref={enterRef}
-    >
+    <div className="flex min-w-0 items-baseline gap-2 text-[0.72rem] leading-relaxed" ref={enterRef}>
       <span className="flex h-[0.95rem] shrink-0 items-center">{streamGlyph(entry)}</span>
       <span className={cn('min-w-0 flex-1 wrap-anywhere', tone, isMono && 'font-mono text-[0.69rem]')}>
         {entry.text}
@@ -283,13 +299,17 @@ function StreamLine({
 function SubagentRow({ node, depth = 0, nowMs }: { node: SubagentNode; depth?: number; nowMs: number }) {
   const running = node.status === 'running' || node.status === 'queued'
   const elapsed = useElapsedSeconds(running, `subagent:${node.id}`)
+
   const durationSeconds =
     typeof node.durationSeconds === 'number' ? Math.max(0, Math.round(node.durationSeconds)) : elapsed
+
   const [open, setOpen] = useState(() => running || depth < 2)
   const enterRef = useEnterAnimation(true, `subagent-row:${node.id}`)
 
   useEffect(() => {
-    if (running) setOpen(true)
+    if (running) {
+      setOpen(true)
+    }
   }, [running])
 
   const visibleRows = open ? node.stream.slice(-10) : node.stream.slice(-2)
@@ -304,11 +324,7 @@ function SubagentRow({ node, depth = 0, nowMs }: { node: SubagentNode; depth?: n
   ].filter(Boolean)
 
   return (
-    <div
-      className={cn('grid min-w-0 max-w-full gap-2', depth > 0 && 'pl-4')}
-      data-slot="tool-block"
-      ref={enterRef}
-    >
+    <div className={cn('grid min-w-0 max-w-full gap-2', depth > 0 && 'pl-4')} data-slot="tool-block" ref={enterRef}>
       <button
         aria-expanded={open}
         className="group flex w-full min-w-0 items-start gap-2.5 text-left"
@@ -374,4 +390,3 @@ function SubagentRow({ node, depth = 0, nowMs }: { node: SubagentNode; depth?: n
     </div>
   )
 }
-
diff --git a/apps/desktop/src/app/artifacts/index.tsx b/apps/desktop/src/app/artifacts/index.tsx
index e00666286ee..f53366cb520 100644
--- a/apps/desktop/src/app/artifacts/index.tsx
+++ b/apps/desktop/src/app/artifacts/index.tsx
@@ -5,8 +5,8 @@ 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 { Input } from '@/components/ui/input'
 import {
   Pagination,
   PaginationButton,
@@ -16,19 +16,19 @@ import {
   PaginationNext,
   PaginationPrevious
 } from '@/components/ui/pagination'
+import { TextTab, TextTabMeta } from '@/components/ui/text-tab'
 import { getSessionMessages, listSessions } from '@/hermes'
 import { sessionTitle } from '@/lib/chat-runtime'
 import { ExternalLink, ExternalLinkIcon, hostPathLabel, urlSlugTitleLabel, useLinkTitle } from '@/lib/external-link'
-import { FileImage, FileText, FolderOpen, Layers3, Link2, RefreshCw, Search, X } from '@/lib/icons'
+import { FileImage, FileText, FolderOpen, Link2 } from '@/lib/icons'
 import { cn } from '@/lib/utils'
 import { notifyError } from '@/store/notifications'
 import type { SessionInfo, SessionMessage } from '@/types/hermes'
 
 import { useRouteEnumParam } from '../hooks/use-route-enum-param'
+import { PageSearchShell } from '../page-search-shell'
 import { sessionRoute } from '../routes'
 import type { SetStatusbarItemGroup } from '../shell/statusbar-controls'
-import { titlebarHeaderBaseClass } from '../shell/titlebar'
-import type { SetTitlebarToolGroup } from '../shell/titlebar-controls'
 
 type ArtifactKind = 'image' | 'file' | 'link'
 type ArtifactFilter = 'all' | ArtifactKind
@@ -363,14 +363,9 @@ const itemsLabel = (f: ArtifactFilter) => (f === 'link' ? 'links' : f === 'file'
 
 interface ArtifactsViewProps extends React.ComponentProps<'section'> {
   setStatusbarItemGroup?: SetStatusbarItemGroup
-  setTitlebarToolGroup?: SetTitlebarToolGroup
 }
 
-export function ArtifactsView({
-  setStatusbarItemGroup: _setStatusbarItemGroup,
-  setTitlebarToolGroup,
-  ...props
-}: ArtifactsViewProps) {
+export function ArtifactsView({ setStatusbarItemGroup: _setStatusbarItemGroup, ...props }: ArtifactsViewProps) {
   const navigate = useNavigate()
   const [artifacts, setArtifacts] = useState<ArtifactRecord[] | null>(null)
   const [query, setQuery] = useState('')
@@ -412,24 +407,6 @@ export function ArtifactsView({
     void refreshArtifacts()
   }, [refreshArtifacts])
 
-  useEffect(() => {
-    if (!setTitlebarToolGroup) {
-      return
-    }
-
-    setTitlebarToolGroup('artifacts', [
-      {
-        disabled: refreshing,
-        icon: <RefreshCw className={cn(refreshing && 'animate-spin')} />,
-        id: 'refresh-artifacts',
-        label: refreshing ? 'Refreshing artifacts' : 'Refresh artifacts',
-        onSelect: () => void refreshArtifacts()
-      }
-    ])
-
-    return () => setTitlebarToolGroup('artifacts', [])
-  }, [refreshArtifacts, refreshing, setTitlebarToolGroup])
-
   useEffect(() => {
     setImagePage(1)
     setFilePage(1)
@@ -523,127 +500,103 @@ export function ArtifactsView({
   }
 
   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">Artifacts</h2>
-        <span className="pointer-events-auto text-xs text-muted-foreground">{counts.all} found</span>
-      </header>
-
-      <div className="min-h-0 flex-1 overflow-hidden rounded-b-[1.0625rem] border border-border/50 bg-background/85">
-        <div className="border-b border-border/50 px-4 py-3">
-          <div className="flex flex-wrap items-center gap-2">
-            <FilterButton
-              active={kindFilter === 'all'}
-              icon={Layers3}
-              label={`All (${counts.all})`}
-              onClick={() => setKindFilter('all')}
-            />
-            <FilterButton
-              active={kindFilter === 'image'}
-              icon={FileImage}
-              label={`Images (${counts.image})`}
-              onClick={() => setKindFilter('image')}
-            />
-            <FilterButton
-              active={kindFilter === 'file'}
-              icon={FileText}
-              label={`Files (${counts.file})`}
-              onClick={() => setKindFilter('file')}
-            />
-            <FilterButton
-              active={kindFilter === 'link'}
-              icon={Link2}
-              label={`Links (${counts.link})`}
-              onClick={() => setKindFilter('link')}
-            />
-            <div className="ml-auto w-full max-w-sm min-w-64">
-              <div className="relative">
-                <Search className="pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" />
-                <Input
-                  className="h-8 rounded-lg pl-8 pr-8 text-sm"
-                  onChange={event => setQuery(event.target.value)}
-                  placeholder="Search artifacts..."
-                  value={query}
-                />
-                {query && (
-                  <Button
-                    aria-label="Clear search"
-                    className="absolute right-1 top-1/2 h-6 w-6 -translate-y-1/2 text-muted-foreground hover:text-foreground"
-                    onClick={() => setQuery('')}
-                    size="icon"
-                    type="button"
-                    variant="ghost"
-                  >
-                    <X className="size-3.5" />
-                  </Button>
-                )}
-              </div>
+    <PageSearchShell
+      {...props}
+      filters={
+        <>
+          <TextTab active={kindFilter === 'all'} onClick={() => setKindFilter('all')}>
+            All <TextTabMeta>({counts.all})</TextTabMeta>
+          </TextTab>
+          <TextTab active={kindFilter === 'image'} onClick={() => setKindFilter('image')}>
+            Images <TextTabMeta>({counts.image})</TextTabMeta>
+          </TextTab>
+          <TextTab active={kindFilter === 'file'} onClick={() => setKindFilter('file')}>
+            Files <TextTabMeta>({counts.file})</TextTabMeta>
+          </TextTab>
+          <TextTab active={kindFilter === 'link'} onClick={() => setKindFilter('link')}>
+            Links <TextTabMeta>({counts.link})</TextTabMeta>
+          </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" />
+      ) : visibleArtifacts.length === 0 ? (
+        <div className="grid h-full place-items-center px-6 text-center">
+          <div>
+            <div className="text-sm font-medium">No artifacts found</div>
+            <div className="mt-1 text-xs text-muted-foreground">
+              Generated images and file outputs will appear here as sessions produce them.
             </div>
           </div>
         </div>
-
-        {!artifacts ? (
-          <PageLoader label="Indexing recent session artifacts" />
-        ) : visibleArtifacts.length === 0 ? (
-          <div className="grid h-full place-items-center px-6 text-center">
-            <div>
-              <div className="text-sm font-medium">No artifacts found</div>
-              <div className="mt-1 text-xs text-muted-foreground">
-                Generated images and file outputs will appear here as sessions produce them.
-              </div>
-            </div>
-          </div>
-        ) : (
-          <div className="h-full overflow-y-auto">
-            <div className="flex flex-col gap-4 px-2 pb-2">
-              {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">
-                    <ArtifactsPagination
-                      className="ml-auto justify-end px-0"
-                      itemLabel="images"
-                      onPageChange={setImagePage}
-                      page={currentImagePage}
-                      pageSize={24}
-                      total={visibleImageArtifacts.length}
+      ) : (
+        <div className="h-full overflow-y-auto">
+          <div className="flex flex-col gap-3 px-2 pb-2">
+            {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">
+                  <ArtifactsPagination
+                    className="ml-auto justify-end px-0"
+                    itemLabel="images"
+                    onPageChange={setImagePage}
+                    page={currentImagePage}
+                    pageSize={24}
+                    total={visibleImageArtifacts.length}
+                  />
+                </div>
+                <div className="grid grid-cols-[repeat(auto-fill,minmax(11rem,1fr))] items-start gap-2 pt-1.5">
+                  {pagedImageArtifacts.map(artifact => (
+                    <ArtifactImageCard
+                      artifact={artifact}
+                      failedImage={failedImageIds.has(artifact.id)}
+                      key={artifact.id}
+                      onImageError={markImageFailed}
+                      onOpenChat={sessionId => navigate(sessionRoute(sessionId))}
                     />
-                  </div>
-                  <div className="grid grid-cols-[repeat(auto-fill,minmax(12rem,1fr))] items-start gap-2 pt-1.5">
-                    {pagedImageArtifacts.map(artifact => (
-                      <ArtifactImageCard
-                        artifact={artifact}
-                        failedImage={failedImageIds.has(artifact.id)}
-                        key={artifact.id}
-                        onImageError={markImageFailed}
-                        onOpenChat={sessionId => navigate(sessionRoute(sessionId))}
-                      />
-                    ))}
-                  </div>
-                </section>
-              )}
+                  ))}
+                </div>
+              </section>
+            )}
 
-              {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">
-                    <ArtifactsPagination
-                      className="ml-auto justify-end px-0"
-                      itemLabel={itemsLabel(kindFilter)}
-                      onPageChange={setFilePage}
-                      page={currentFilePage}
-                      pageSize={100}
-                      total={visibleFileArtifacts.length}
-                    />
-                  </div>
-                  <div className="overflow-x-auto rounded-lg border border-border/50 bg-background/70 shadow-[0_0.125rem_0.5rem_color-mix(in_srgb,black_3%,transparent)]">
-                    <ArtifactTable artifacts={pagedFileArtifacts} ctx={cellCtx} filter={kindFilter} />
-                  </div>
-                </section>
-              )}
-            </div>
+            {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">
+                  <ArtifactsPagination
+                    className="ml-auto justify-end px-0"
+                    itemLabel={itemsLabel(kindFilter)}
+                    onPageChange={setFilePage}
+                    page={currentFilePage}
+                    pageSize={100}
+                    total={visibleFileArtifacts.length}
+                  />
+                </div>
+                <div className="overflow-x-auto rounded-lg border border-(--ui-stroke-tertiary) bg-(--ui-chat-bubble-background) shadow-sm">
+                  <ArtifactTable artifacts={pagedFileArtifacts} ctx={cellCtx} filter={kindFilter} />
+                </div>
+              </section>
+            )}
           </div>
-        )}
-      </div>
-    </section>
+        </div>
+      )}
+    </PageSearchShell>
   )
 }
 
@@ -698,34 +651,6 @@ function ArtifactsPagination({ className, itemLabel, onPageChange, page, pageSiz
   )
 }
 
-function FilterButton({
-  active,
-  icon: Icon,
-  label,
-  onClick
-}: {
-  active: boolean
-  icon: typeof Layers3
-  label: string
-  onClick: () => void
-}) {
-  return (
-    <Button
-      className={cn(
-        'h-8 gap-1.5 rounded-md px-2.5 text-xs',
-        active ? 'bg-accent text-foreground' : 'text-muted-foreground hover:text-foreground'
-      )}
-      onClick={onClick}
-      size="sm"
-      type="button"
-      variant="ghost"
-    >
-      <Icon className="size-3.5" />
-      {label}
-    </Button>
-  )
-}
-
 interface ArtifactImageCardProps {
   artifact: ArtifactRecord
   failedImage: boolean
@@ -737,13 +662,12 @@ function ArtifactImageCard({ artifact, failedImage, onImageError, onOpenChat }:
   return (
     <article
       className={cn(
-        'group/artifact overflow-hidden rounded-lg border border-border/50 bg-background/70 shadow-[0_0.125rem_0.5rem_color-mix(in_srgb,black_3%,transparent)]',
-        'bg-muted/20'
+        'group/artifact overflow-hidden rounded-lg border border-(--ui-stroke-tertiary) bg-(--ui-chat-bubble-background) shadow-sm'
       )}
     >
       <div
         className={cn(
-          'relative flex h-44 w-full items-center justify-center overflow-hidden border-b border-border/50 bg-[color-mix(in_srgb,var(--dt-muted)_58%,var(--dt-background))] p-1.5',
+          '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',
           failedImage && 'cursor-default'
         )}
       >
@@ -763,15 +687,17 @@ function ArtifactImageCard({ artifact, failedImage, onImageError, onOpenChat }:
 
       <div className="space-y-1.5 p-2">
         <div className="min-w-0">
-          <div className="mb-0.5 flex items-center gap-1 text-[0.62rem] uppercase tracking-[0.08em] text-muted-foreground">
+          <div className="mb-0.5 flex items-center gap-1 text-[0.625rem] uppercase tracking-[0.08em] text-(--ui-text-tertiary)">
             <FileImage className="size-3" />
             {artifact.kind}
           </div>
-          <div className="truncate text-xs font-medium">{artifact.label}</div>
-          <div className="mt-0.5 truncate text-[0.62rem] text-muted-foreground">{artifact.value}</div>
+          <div className="truncate text-[length:var(--conversation-caption-font-size)] font-medium">
+            {artifact.label}
+          </div>
+          <div className="mt-0.5 truncate text-[0.625rem] text-(--ui-text-tertiary)">{artifact.value}</div>
         </div>
 
-        <div className="truncate text-[0.62rem] text-muted-foreground">
+        <div className="truncate text-[0.625rem] text-(--ui-text-tertiary)">
           {artifact.sessionTitle} · {formatArtifactTime(artifact.timestamp)}
         </div>
 
@@ -803,7 +729,7 @@ function ArtifactCellAction({
   if (href) {
     return (
       <ExternalLink
-        className="flex h-full w-full min-w-0 items-center gap-2 px-2.5 py-1.5 text-left text-sm leading-snug font-medium text-foreground/90 no-underline 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"
         href={href}
         showExternalIcon={false}
         title={title}
@@ -816,7 +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-sm leading-snug font-medium text-foreground/90 no-underline transition-colors hover:text-foreground hover:underline',
+        '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'
       )}
       onClick={onClick}
@@ -840,7 +766,7 @@ function PrimaryCell({ artifact, ctx }: { artifact: ArtifactRecord; ctx: CellCtx
       onClick={isLink ? undefined : () => void ctx.onOpen(artifact.href)}
       title={label}
     >
-      <span className="grid size-7 shrink-0 place-items-center rounded-md bg-muted text-muted-foreground">
+      <span className="mt-0.5 grid size-6 shrink-0 place-items-center self-start rounded-md bg-(--ui-bg-tertiary) text-(--ui-text-tertiary)">
         <Icon className="size-3.5" />
       </span>
       <span className={cn('min-w-0 flex-1', isLink ? 'wrap-anywhere' : 'truncate')}>
@@ -859,7 +785,10 @@ function LocationCell({ artifact }: { artifact: ArtifactRecord; ctx: CellCtx })
   return (
     <div className="group/location flex min-w-0 items-center gap-1.5">
       <div
-        className={cn('min-w-0 flex-1 truncate text-xs text-muted-foreground/85', isLink ? 'font-medium' : 'font-mono')}
+        className={cn(
+          'min-w-0 flex-1 truncate text-[length:var(--conversation-caption-font-size)] text-(--ui-text-tertiary)',
+          isLink ? 'font-normal' : 'font-mono'
+        )}
         title={artifact.value}
       >
         {value}
@@ -882,7 +811,7 @@ function SessionCell({ artifact, ctx }: { artifact: ArtifactRecord; ctx: CellCtx
     <ArtifactCellAction onClick={() => ctx.onOpenChat(artifact.sessionId)} title={artifact.sessionTitle}>
       <span className="flex min-w-0 flex-col">
         <span className="truncate">{artifact.sessionTitle}</span>
-        <span className="truncate text-xs font-normal text-muted-foreground/75">
+        <span className="truncate text-[0.6875rem] font-normal text-(--ui-text-tertiary)">
           {formatArtifactTime(artifact.timestamp)}
         </span>
       </span>
@@ -924,8 +853,8 @@ function ArtifactTable({
   filter: ArtifactFilter
 }) {
   return (
-    <table className="w-full min-w-176 table-fixed text-left text-xs">
-      <thead className="border-b border-border/50 bg-muted/35 text-[0.62rem] uppercase tracking-[0.08em] text-muted-foreground">
+    <table className="w-full min-w-176 table-fixed text-left text-[length:var(--conversation-caption-font-size)]">
+      <thead className="border-b border-(--ui-stroke-tertiary) bg-(--ui-bg-quinary) text-[0.625rem] uppercase tracking-[0.08em] text-(--ui-text-tertiary)">
         <tr>
           {ARTIFACT_COLUMNS.map(col => (
             <th className={cn(col.width(filter), 'px-2.5 py-1.5 font-medium')} key={col.id}>
@@ -934,9 +863,9 @@ function ArtifactTable({
           ))}
         </tr>
       </thead>
-      <tbody className="divide-y divide-border/45">
+      <tbody className="divide-y divide-(--ui-stroke-quaternary)">
         {artifacts.map(artifact => (
-          <tr className="group/artifact transition-colors hover:bg-muted/30" key={artifact.id}>
+          <tr className="group/artifact" key={artifact.id}>
             {ARTIFACT_COLUMNS.map(col => {
               const Cell = col.Cell
 
diff --git a/apps/desktop/src/app/chat/composer/attachments.tsx b/apps/desktop/src/app/chat/composer/attachments.tsx
index 71525215061..8d515fa9548 100644
--- a/apps/desktop/src/app/chat/composer/attachments.tsx
+++ b/apps/desktop/src/app/chat/composer/attachments.tsx
@@ -1,6 +1,7 @@
 import { useStore } from '@nanostores/react'
 
-import { FileText, FolderOpen, ImageIcon, Link, X } from '@/lib/icons'
+import { Codicon } from '@/components/ui/codicon'
+import { FileText, FolderOpen, ImageIcon, Link, Terminal } from '@/lib/icons'
 import { normalizeOrLocalPreviewTarget } from '@/lib/local-preview'
 import type { ComposerAttachment } from '@/store/composer'
 import { notifyError } from '@/store/notifications'
@@ -16,17 +17,17 @@ export function AttachmentList({
 }) {
   return (
     <div className="flex max-w-full flex-wrap gap-1.5 px-1 pt-1" data-slot="composer-attachments">
-      {attachments.map(a => (
-        <AttachmentPill attachment={a} key={a.id} onRemove={onRemove} />
+      {attachments.map(attachment => (
+        <AttachmentPill attachment={attachment} key={attachment.id} onRemove={onRemove} />
       ))}
     </div>
   )
 }
 
 function AttachmentPill({ attachment, onRemove }: { attachment: ComposerAttachment; onRemove?: (id: string) => void }) {
-  const Icon = { folder: FolderOpen, url: Link, image: ImageIcon, file: FileText }[attachment.kind]
+  const Icon = { folder: FolderOpen, url: Link, image: ImageIcon, file: FileText, terminal: Terminal }[attachment.kind]
   const cwd = useStore($currentCwd)
-  const canPreview = attachment.kind !== 'folder'
+  const canPreview = attachment.kind !== 'folder' && attachment.kind !== 'terminal'
   const detail = attachment.detail && attachment.detail !== attachment.label ? attachment.detail : undefined
 
   async function openPreview() {
@@ -101,7 +102,7 @@ function AttachmentPill({ attachment, onRemove }: { attachment: ComposerAttachme
           onClick={() => onRemove(attachment.id)}
           type="button"
         >
-          <X className="size-2.5" />
+          <Codicon name="close" size="0.625rem" />
         </button>
       )}
     </div>
diff --git a/apps/desktop/src/app/chat/composer/completion-drawer.tsx b/apps/desktop/src/app/chat/composer/completion-drawer.tsx
index 34470fe63e6..8b23c54f879 100644
--- a/apps/desktop/src/app/chat/composer/completion-drawer.tsx
+++ b/apps/desktop/src/app/chat/composer/completion-drawer.tsx
@@ -3,23 +3,30 @@ import { ComposerPrimitive } from '@assistant-ui/react'
 import type { ReactNode } from 'react'
 
 export const COMPLETION_DRAWER_CLASS = [
-  'absolute inset-x-0 bottom-[calc(100%-0.5rem)] z-50',
+  'absolute bottom-[calc(100%+0.25rem)] left-0 z-50',
+  'w-60 max-w-[calc(100vw-2rem)]',
   'max-h-[min(23rem,calc(100vh-8rem))] overflow-y-auto overscroll-contain',
-  'border border-b-0',
-  'border-[color-mix(in_srgb,var(--dt-ring)_45%,transparent)]',
-  'bg-[color-mix(in_srgb,var(--dt-popover)_96%,transparent)]',
-  'px-1.5 pb-3 pt-1.5 text-popover-foreground',
-  'backdrop-blur-[0.75rem] backdrop-saturate-[1.1]',
-  '[-webkit-backdrop-filter:blur(0.75rem)_saturate(1.1)]',
-  'data-[state=open]:-mb-2',
-  'data-[state=open]:shadow-[0_-0.0625rem_0_0.0625rem_color-mix(in_srgb,var(--dt-ring)_35%,transparent),0_-1rem_2.25rem_-1.75rem_color-mix(in_srgb,var(--dt-foreground)_34%,transparent),0_-0.3125rem_0.875rem_-0.6875rem_color-mix(in_srgb,var(--dt-foreground)_22%,transparent)]'
+  'rounded-lg border border-(--ui-stroke-secondary)',
+  'bg-[color-mix(in_srgb,var(--ui-bg-elevated)_96%,transparent)]',
+  'p-1 text-xs text-popover-foreground shadow-md',
+  'backdrop-blur-md'
+].join(' ')
+
+export const COMPLETION_DRAWER_BELOW_CLASS = [
+  'absolute left-0 top-[calc(100%+0.25rem)] z-50',
+  'w-60 max-w-[calc(100vw-2rem)]',
+  'max-h-[min(23rem,calc(100vh-8rem))] overflow-y-auto overscroll-contain',
+  'rounded-lg border border-(--ui-stroke-secondary)',
+  'bg-[color-mix(in_srgb,var(--ui-bg-elevated)_96%,transparent)]',
+  'p-1 text-xs text-popover-foreground shadow-md',
+  'backdrop-blur-md'
 ].join(' ')
 
 export const COMPLETION_DRAWER_ROW_CLASS = [
-  'flex w-full min-w-0 items-baseline gap-2 rounded-md px-2.5 py-1',
-  'text-left text-xs transition-colors',
-  'hover:bg-[color-mix(in_srgb,var(--dt-accent)_70%,transparent)]',
-  'data-[highlighted]:bg-[color-mix(in_srgb,var(--dt-accent)_70%,transparent)]'
+  'relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1',
+  'w-full min-w-0 text-left text-xs outline-hidden transition-colors',
+  'hover:bg-(--ui-bg-tertiary)',
+  'data-[highlighted]:bg-(--ui-bg-tertiary) data-[highlighted]:text-foreground'
 ].join(' ')
 
 export function ComposerCompletionDrawer({
@@ -48,9 +55,9 @@ export function ComposerCompletionDrawer({
 
 export function CompletionDrawerEmpty({ children, title }: { children?: ReactNode; title: string }) {
   return (
-    <div className="px-3 py-3 text-sm text-muted-foreground">
+    <div className="px-3 py-3 text-xs text-(--ui-text-tertiary)">
       <p>{title}</p>
-      {children && <p className="mt-1 text-xs text-muted-foreground/80">{children}</p>}
+      {children && <p className="mt-1 text-xs text-(--ui-text-tertiary)">{children}</p>}
     </div>
   )
 }
diff --git a/apps/desktop/src/app/chat/composer/context-menu.tsx b/apps/desktop/src/app/chat/composer/context-menu.tsx
index 4743d08b0f5..74de7b3b70a 100644
--- a/apps/desktop/src/app/chat/composer/context-menu.tsx
+++ b/apps/desktop/src/app/chat/composer/context-menu.tsx
@@ -1,4 +1,5 @@
 import { Button } from '@/components/ui/button'
+import { Codicon } from '@/components/ui/codicon'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -10,7 +11,7 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger
 } from '@/components/ui/dropdown-menu'
-import { Clipboard, FileText, FolderOpen, ImageIcon, Link, type LucideIcon, MessageSquareText, Plus } from '@/lib/icons'
+import { Clipboard, FileText, FolderOpen, type IconComponent, ImageIcon, Link, MessageSquareText } from '@/lib/icons'
 import { cn } from '@/lib/utils'
 
 import { GHOST_ICON_BTN } from './controls'
@@ -38,14 +39,17 @@ export function ContextMenu({
       <DropdownMenuTrigger asChild>
         <Button
           aria-label={state.tools.label}
-          className={cn(GHOST_ICON_BTN, 'data-[state=open]:bg-accent data-[state=open]:text-foreground')}
+          className={cn(
+            GHOST_ICON_BTN,
+            'data-[state=open]:bg-(--chrome-action-hover) data-[state=open]:text-foreground'
+          )}
           disabled={!state.tools.enabled}
           size="icon"
           title={state.tools.label}
           type="button"
           variant="ghost"
         >
-          <Plus size={18} />
+          <Codicon name="add" size="1rem" />
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="start" className="w-60" side="top" sideOffset={10}>
@@ -107,7 +111,7 @@ export function ContextMenuItem({
 }: {
   children: string
   disabled?: boolean
-  icon: LucideIcon
+  icon: IconComponent
   onSelect?: () => void
 }) {
   return (
diff --git a/apps/desktop/src/app/chat/composer/controls.tsx b/apps/desktop/src/app/chat/composer/controls.tsx
index 7fa9255a9ea..bd4b140b471 100644
--- a/apps/desktop/src/app/chat/composer/controls.tsx
+++ b/apps/desktop/src/app/chat/composer/controls.tsx
@@ -1,13 +1,17 @@
 import { Button } from '@/components/ui/button'
+import { Codicon } from '@/components/ui/codicon'
 import { triggerHaptic } from '@/lib/haptics'
-import { ArrowUp, AudioLines, Layers3, Loader2, Mic, MicOff, Square } from '@/lib/icons'
+import { AudioLines, Layers3, Loader2, Square } from '@/lib/icons'
 import { cn } from '@/lib/utils'
 
 import type { ConversationStatus } from './hooks/use-voice-conversation'
 import type { ChatBarState, VoiceStatus } from './types'
 
-export const ICON_BTN = 'size-(--composer-control-size) shrink-0 rounded-full'
-export const GHOST_ICON_BTN = cn(ICON_BTN, 'text-muted-foreground hover:bg-accent hover:text-foreground')
+export const ICON_BTN = 'size-(--composer-control-size) shrink-0 rounded-md'
+export const GHOST_ICON_BTN = cn(
+  ICON_BTN,
+  'text-(--ui-text-tertiary) hover:bg-(--chrome-action-hover) hover:text-foreground'
+)
 // Send/voice-conversation primary: solid foreground-on-background circle
 // (reads as black-on-white in light mode, white-on-black in dark mode) to
 // match the reference composer's high-contrast CTA. Keeps the pill itself
@@ -89,7 +93,7 @@ export function ComposerControls({
               <span className="block size-3 rounded-[0.1875rem] bg-current" />
             )
           ) : (
-            <ArrowUp size={18} />
+            <Codicon name="arrow-up" size="1rem" />
           )}
         </Button>
       )}
@@ -136,7 +140,7 @@ function ConversationPill({
         type="button"
         variant="ghost"
       >
-        {muted ? <MicOff size={16} /> : <Mic size={16} />}
+        <Codicon name={muted ? 'mic-off' : 'mic'} size="1rem" />
       </Button>
       {listening && (
         <Button
@@ -246,7 +250,7 @@ function DictationButton({
       ) : status === 'transcribing' ? (
         <Loader2 className="animate-spin" size={16} />
       ) : (
-        <Mic size={16} />
+        <Codicon name="mic" size="1rem" />
       )}
     </Button>
   )
diff --git a/apps/desktop/src/app/chat/composer/drop-affordance.ts b/apps/desktop/src/app/chat/composer/drop-affordance.ts
new file mode 100644
index 00000000000..3426ec282b1
--- /dev/null
+++ b/apps/desktop/src/app/chat/composer/drop-affordance.ts
@@ -0,0 +1,2 @@
+export const COMPOSER_DROP_FADE_CLASS = 'transition-opacity duration-150 ease-out'
+export const COMPOSER_DROP_ACTIVE_CLASS = 'opacity-60'
diff --git a/apps/desktop/src/app/chat/composer/focus.ts b/apps/desktop/src/app/chat/composer/focus.ts
index c728577465e..bf9e72b4b63 100644
--- a/apps/desktop/src/app/chat/composer/focus.ts
+++ b/apps/desktop/src/app/chat/composer/focus.ts
@@ -1,49 +1,103 @@
-export type ComposerFocusTarget = 'main' | 'edit'
+/**
+ * Composer focus + external-insert bus.
+ *
+ * Mutations from outside the composer (sidebar attach, drag drop, terminal
+ * Cmd+L, preview console, etc.) dispatch through here. Each composer subscribes
+ * and routes the work back into its own ref/state.
+ *
+ * `dispatch` defers to a macrotask so synchronous click/keydown handlers
+ * (react-arborist row focus, picker `node.select()`) finish first and don't
+ * steal focus from the composer effect.
+ */
 
-interface ComposerFocusRequestDetail {
-  target: ComposerFocusTarget
+export type ComposerTarget = 'edit' | 'main'
+export type ComposerInsertMode = 'block' | 'inline'
+
+interface FocusDetail {
+  target: ComposerTarget
 }
 
-const COMPOSER_FOCUS_REQUEST_EVENT = 'hermes:composer-focus-request'
-
-let activeComposerTarget: ComposerFocusTarget = 'main'
-
-function resolveTarget(target: ComposerFocusTarget | 'active'): ComposerFocusTarget {
-  return target === 'active' ? activeComposerTarget : target
+interface InsertDetail {
+  mode: ComposerInsertMode
+  target: ComposerTarget
+  text: string
 }
 
-export function markActiveComposer(target: ComposerFocusTarget) {
-  activeComposerTarget = target
-}
+const FOCUS_EVENT = 'hermes:composer-focus'
+const INSERT_EVENT = 'hermes:composer-insert'
 
-export function requestComposerFocus(target: ComposerFocusTarget | 'active' = 'active') {
+let activeTarget: ComposerTarget = 'main'
+
+const resolve = (target: ComposerTarget | 'active') => (target === 'active' ? activeTarget : target)
+
+const dispatch = <T>(name: string, detail: T) => {
   if (typeof window === 'undefined') {
     return
   }
 
-  const resolvedTarget = resolveTarget(target)
-
-  const event = new CustomEvent<ComposerFocusRequestDetail>(COMPOSER_FOCUS_REQUEST_EVENT, {
-    detail: { target: resolvedTarget }
-  })
-
-  window.dispatchEvent(event)
+  window.setTimeout(() => window.dispatchEvent(new CustomEvent<T>(name, { detail })), 0)
 }
 
-export function onComposerFocusRequest(handler: (target: ComposerFocusTarget) => void) {
+const subscribe = <T>(name: string, handler: (detail: T) => void) => {
   if (typeof window === 'undefined') {
     return () => undefined
   }
 
   const listener = (event: Event) => {
-    const detail = (event as CustomEvent<ComposerFocusRequestDetail>).detail
+    const detail = (event as CustomEvent<T>).detail
 
-    if (detail?.target === 'main' || detail?.target === 'edit') {
-      handler(detail.target)
+    if (detail) {
+      handler(detail)
     }
   }
 
-  window.addEventListener(COMPOSER_FOCUS_REQUEST_EVENT, listener)
+  window.addEventListener(name, listener)
 
-  return () => window.removeEventListener(COMPOSER_FOCUS_REQUEST_EVENT, listener)
+  return () => window.removeEventListener(name, listener)
+}
+
+export const markActiveComposer = (target: ComposerTarget) => {
+  activeTarget = target
+}
+
+export const requestComposerFocus = (target: ComposerTarget | 'active' = 'active') =>
+  dispatch<FocusDetail>(FOCUS_EVENT, { target: resolve(target) })
+
+export const requestComposerInsert = (
+  text: string,
+  { mode = 'block', target = 'active' }: { mode?: ComposerInsertMode; target?: ComposerTarget | 'active' } = {}
+) => {
+  const trimmed = text.trim()
+
+  if (!trimmed) {
+    return
+  }
+
+  dispatch<InsertDetail>(INSERT_EVENT, { mode, target: resolve(target), text: trimmed })
+}
+
+export const onComposerFocusRequest = (handler: (target: ComposerTarget) => void) =>
+  subscribe<FocusDetail>(FOCUS_EVENT, ({ target }) => handler(target))
+
+export const onComposerInsertRequest = (handler: (detail: InsertDetail) => void) =>
+  subscribe<InsertDetail>(INSERT_EVENT, handler)
+
+/**
+ * Focus a composer input across React commit + browser focus restore.
+ *
+ * The triple-call survives:
+ *   - sync: contenteditable already mounted
+ *   - rAF:  React just committed a `renderComposerContents` swap
+ *   - 0ms:  browser focus reclaim from a click target inside an external panel
+ */
+export const focusComposerInput = (el: HTMLElement | null) => {
+  if (!el) {
+    return
+  }
+
+  const focus = () => el.focus({ preventScroll: true })
+
+  focus()
+  window.requestAnimationFrame(focus)
+  window.setTimeout(focus, 0)
 }
diff --git a/apps/desktop/src/app/chat/composer/index.tsx b/apps/desktop/src/app/chat/composer/index.tsx
index db9935d3898..eb3eb507eba 100644
--- a/apps/desktop/src/app/chat/composer/index.tsx
+++ b/apps/desktop/src/app/chat/composer/index.tsx
@@ -8,16 +8,16 @@ import {
   type DragEvent as ReactDragEvent,
   useCallback,
   useEffect,
+  useMemo,
   useRef,
   useState
 } from 'react'
 
-import { formatRefValue, hermesDirectiveFormatter } from '@/components/assistant-ui/directive-text'
+import { hermesDirectiveFormatter } from '@/components/assistant-ui/directive-text'
 import { Button } from '@/components/ui/button'
 import { useMediaQuery } from '@/hooks/use-media-query'
 import { useResizeObserver } from '@/hooks/use-resize-observer'
 import { chatMessageText } from '@/lib/chat-messages'
-import { contextPath } from '@/lib/chat-runtime'
 import { DATA_IMAGE_URL_RE } from '@/lib/embedded-images'
 import { triggerHaptic } from '@/lib/haptics'
 import { cn } from '@/lib/utils'
@@ -25,28 +25,39 @@ import {
   $composerAttachments,
   $composerDraft,
   clearComposerAttachments,
-  type ComposerAttachment
+  type ComposerAttachment,
+  reconcileComposerTerminalSelections
 } from '@/store/composer'
 import {
   $queuedPromptsBySession,
   enqueueQueuedPrompt,
-  removeQueuedPrompt,
   type QueuedPromptEntry,
+  removeQueuedPrompt,
   updateQueuedPrompt
 } from '@/store/composer-queue'
 import { $messages } from '@/store/session'
 import { $threadScrolledUp } from '@/store/thread-scroll'
 
-import { type DroppedFile, extractDroppedFiles, HERMES_PATHS_MIME } from '../hooks/use-composer-actions'
+import { extractDroppedFiles, HERMES_PATHS_MIME } from '../hooks/use-composer-actions'
 
 import { AttachmentList } from './attachments'
 import { ContextMenu } from './context-menu'
 import { ComposerControls } from './controls'
+import { COMPOSER_DROP_ACTIVE_CLASS, COMPOSER_DROP_FADE_CLASS } from './drop-affordance'
+import {
+  type ComposerInsertMode,
+  focusComposerInput,
+  markActiveComposer,
+  onComposerFocusRequest,
+  onComposerInsertRequest
+} from './focus'
 import { HelpHint } from './help-hint'
 import { useAtCompletions } from './hooks/use-at-completions'
 import { useSlashCompletions } from './hooks/use-slash-completions'
 import { useVoiceConversation } from './hooks/use-voice-conversation'
 import { useVoiceRecorder } from './hooks/use-voice-recorder'
+import { dragHasAttachments, droppedFileInlineRef, insertInlineRefsIntoEditor } from './inline-refs'
+import { QueuePanel } from './queue-panel'
 import {
   composerPlainText,
   placeCaretEnd,
@@ -54,7 +65,6 @@ import {
   renderComposerContents,
   RICH_INPUT_SLOT
 } from './rich-editor'
-import { QueuePanel } from './queue-panel'
 import { SkinSlashPopover } from './skin-slash-popover'
 import { detectTrigger, extractClipboardImageBlobs, textBeforeCaret, type TriggerState } from './text-utils'
 import { ComposerTriggerPopover } from './trigger-popover'
@@ -104,7 +114,11 @@ export function ChatBar({
   const queuedPromptsBySession = useStore($queuedPromptsBySession)
   const scrolledUp = useStore($threadScrolledUp)
   const activeQueueSessionKey = queueSessionKey || sessionId || null
-  const queuedPrompts = activeQueueSessionKey ? (queuedPromptsBySession[activeQueueSessionKey] ?? []) : []
+
+  const queuedPrompts = useMemo(
+    () => (activeQueueSessionKey ? (queuedPromptsBySession[activeQueueSessionKey] ?? []) : []),
+    [activeQueueSessionKey, queuedPromptsBySession]
+  )
 
   const composerRef = useRef<HTMLFormElement | null>(null)
   const composerSurfaceRef = useRef<HTMLDivElement | null>(null)
@@ -121,10 +135,11 @@ export function ChatBar({
   const [tight, setTight] = useState(false)
   const [dragActive, setDragActive] = useState(false)
   const [queueEdit, setQueueEdit] = useState<QueueEditState | null>(null)
+  const [focusRequestId, setFocusRequestId] = useState(0)
   const dragDepthRef = useRef(0)
   const lastSpokenIdRef = useRef<string | null>(null)
 
-  const narrow = useMediaQuery('(max-width: 480px)')
+  const narrow = useMediaQuery('(max-width: 30rem)')
 
   const at = useAtCompletions({ gateway: gateway ?? null, sessionId: sessionId ?? null, cwd: cwd ?? null })
   const slash = useSlashCompletions({ gateway: gateway ?? null })
@@ -132,23 +147,81 @@ export function ChatBar({
   const stacked = expanded || narrow || tight
   const hasComposerPayload = draft.trim().length > 0 || attachments.length > 0
   const canSubmit = busy || hasComposerPayload
-  const editingQueuedPrompt = queueEdit ? queuedPrompts.find(entry => entry.id === queueEdit.entryId) ?? null : null
+  const editingQueuedPrompt = queueEdit ? (queuedPrompts.find(entry => entry.id === queueEdit.entryId) ?? null) : null
   const busyAction = busy && hasComposerPayload ? 'queue' : 'stop'
   const showHelpHint = draft === '?'
 
-  const placeholder = disabled ? 'Starting Hermes…' : 'Ask anything'
+  const placeholder = disabled ? 'Starting Hermes...' : 'Send follow-up'
 
-  const focusInput = () => window.requestAnimationFrame(() => editorRef.current?.focus({ preventScroll: true }))
+  const focusInput = useCallback(() => {
+    focusComposerInput(editorRef.current)
+    markActiveComposer('main')
+  }, [])
+
+  const requestMainFocus = useCallback(() => {
+    setFocusRequestId(id => id + 1)
+  }, [])
+
+  const appendExternalText = useCallback(
+    (text: string, mode: ComposerInsertMode) => {
+      const value = text.trim()
+
+      if (!value) {
+        return
+      }
+
+      const base = mode === 'inline' ? draftRef.current.trimEnd() : draftRef.current
+      const sep = mode === 'inline' ? (base ? ' ' : '') : base && !base.endsWith('\n') ? '\n\n' : ''
+      const next = `${base}${sep}${value}`
+
+      draftRef.current = next
+      aui.composer().setText(next)
+
+      const editor = editorRef.current
+
+      if (editor) {
+        renderComposerContents(editor, next)
+        placeCaretEnd(editor)
+      }
+
+      setFocusRequestId(id => id + 1)
+    },
+    [aui]
+  )
 
   useEffect(() => {
     if (!disabled) {
       focusInput()
     }
-  }, [disabled, focusKey])
+  }, [disabled, focusInput, focusKey, focusRequestId])
+
+  useEffect(() => {
+    if (disabled) {
+      return undefined
+    }
+
+    const offFocus = onComposerFocusRequest(target => {
+      if (target === 'main') {
+        setFocusRequestId(id => id + 1)
+      }
+    })
+
+    const offInsert = onComposerInsertRequest(({ mode, target, text }) => {
+      if (target === 'main') {
+        appendExternalText(text, mode)
+      }
+    })
+
+    return () => {
+      offFocus()
+      offInsert()
+    }
+  }, [appendExternalText, disabled])
 
   useEffect(() => {
     draftRef.current = draft
     $composerDraft.set(draft)
+    reconcileComposerTerminalSelections(draft)
 
     const editor = editorRef.current
 
@@ -232,114 +305,33 @@ export function ChatBar({
 
     draftRef.current = nextDraft
     aui.composer().setText(nextDraft)
-    focusInput()
+    requestMainFocus()
   }
 
   const insertInlineRefs = (refs: string[]) => {
     const editor = editorRef.current
 
-    if (!refs.length || !editor) {
+    if (!editor) {
       return false
     }
 
-    const inline = refs.join(' ')
-    const selection = window.getSelection()
+    const nextDraft = insertInlineRefsIntoEditor(editor, refs)
 
-    const range =
-      selection?.rangeCount && editor.contains(selection.getRangeAt(0).commonAncestorContainer)
-        ? selection.getRangeAt(0)
-        : null
-
-    editor.focus({ preventScroll: true })
-
-    if (range) {
-      const beforeRange = range.cloneRange()
-      beforeRange.selectNodeContents(editor)
-      beforeRange.setEnd(range.startContainer, range.startOffset)
-      const beforeContainer = document.createElement('div')
-      beforeContainer.appendChild(beforeRange.cloneContents())
-
-      const afterRange = range.cloneRange()
-      afterRange.selectNodeContents(editor)
-      afterRange.setStart(range.endContainer, range.endOffset)
-      const afterContainer = document.createElement('div')
-      afterContainer.appendChild(afterRange.cloneContents())
-
-      const beforeText = composerPlainText(beforeContainer)
-      const afterText = composerPlainText(afterContainer)
-      const needsBeforeSpace = beforeText.length > 0 && !/\s$/.test(beforeText)
-      const needsAfterSpace = afterText.length === 0 || !/^\s/.test(afterText)
-      range.deleteContents()
-      const fragment = document.createDocumentFragment()
-
-      if (needsBeforeSpace) {
-        fragment.appendChild(document.createTextNode(' '))
-      }
-
-      refs.forEach((ref, index) => {
-        const match = ref.match(/^@([^:]+):(.+)$/)
-        fragment.appendChild(match ? refChipElement(match[1], match[2]) : document.createTextNode(ref))
-
-        if (index < refs.length - 1) {
-          fragment.appendChild(document.createTextNode(' '))
-        }
-      })
-
-      const trailingSpace = needsAfterSpace ? document.createTextNode(' ') : null
-
-      if (trailingSpace) {
-        fragment.appendChild(trailingSpace)
-      }
-
-      range.insertNode(fragment)
-
-      const nextRange = document.createRange()
-
-      if (trailingSpace) {
-        nextRange.setStart(trailingSpace, trailingSpace.length)
-      } else {
-        nextRange.setStartAfter(fragment.lastChild || range.startContainer)
-      }
-
-      nextRange.collapse(true)
-      selection?.removeAllRanges()
-      selection?.addRange(nextRange)
-    } else {
-      const current = composerPlainText(editor)
-      renderComposerContents(editor, `${current}${current && !/\s$/.test(current) ? ' ' : ''}${inline} `)
-      placeCaretEnd(editor)
+    if (nextDraft === null) {
+      return false
     }
 
-    const nextDraft = composerPlainText(editor)
     draftRef.current = nextDraft
     aui.composer().setText(nextDraft)
+    requestMainFocus()
 
     return true
   }
 
-  const droppedFileInlineRef = (candidate: DroppedFile) => {
-    if (!candidate.path) {
-      return null
-    }
-
-    const rel = contextPath(candidate.path, cwd || '')
-
-    if (candidate.line) {
-      const { line, lineEnd } = candidate
-      const range = lineEnd && lineEnd > line ? `${line}-${lineEnd}` : `${line}`
-
-      return `@line:${formatRefValue(`${rel}:${range}`)}`
-    }
-
-    const kind = candidate.isDirectory ? 'folder' : 'file'
-
-    return `@${kind}:${formatRefValue(rel)}`
-  }
-
   const selectSkinSlashCommand = (command: string) => {
     draftRef.current = command
     aui.composer().setText(command)
-    focusInput()
+    requestMainFocus()
   }
 
   const handlePaste = (event: ClipboardEvent<HTMLDivElement>) => {
@@ -453,6 +445,7 @@ export function ChatBar({
     const finish = () => {
       draftRef.current = composerPlainText(editor)
       aui.composer().setText(draftRef.current)
+      requestMainFocus()
       starter ? window.setTimeout(refreshTrigger, 0) : closeTrigger()
     }
 
@@ -498,7 +491,9 @@ export function ChatBar({
     if ((event.metaKey || event.ctrlKey) && !event.altKey && !event.shiftKey && event.key.toLowerCase() === 'k') {
       event.preventDefault()
 
-      if (!busy) void drainNextQueued()
+      if (!busy) {
+        void drainNextQueued()
+      }
 
       return
     }
@@ -554,29 +549,13 @@ export function ChatBar({
     window.setTimeout(refreshTrigger, 0)
   }
 
-  const dragHasAttachments = (transfer: DataTransfer | null) => {
-    if (!transfer) {
-      return false
-    }
-
-    if (Array.from(transfer.types || []).includes(HERMES_PATHS_MIME)) {
-      return true
-    }
-
-    if (Array.from(transfer.types || []).includes('Files')) {
-      return true
-    }
-
-    return Array.from(transfer.items || []).some(item => item.kind === 'file')
-  }
-
   const resetDragState = () => {
     dragDepthRef.current = 0
     setDragActive(false)
   }
 
   const handleDragEnter = (event: ReactDragEvent<HTMLFormElement>) => {
-    if (!onAttachDroppedItems || !dragHasAttachments(event.dataTransfer)) {
+    if (!onAttachDroppedItems || !dragHasAttachments(event.dataTransfer, HERMES_PATHS_MIME)) {
       return
     }
 
@@ -589,7 +568,7 @@ export function ChatBar({
   }
 
   const handleDragOver = (event: ReactDragEvent<HTMLFormElement>) => {
-    if (!onAttachDroppedItems || !dragHasAttachments(event.dataTransfer)) {
+    if (!onAttachDroppedItems || !dragHasAttachments(event.dataTransfer, HERMES_PATHS_MIME)) {
       return
     }
 
@@ -625,7 +604,9 @@ export function ChatBar({
     }
 
     if (Array.from(event.dataTransfer.types || []).includes(HERMES_PATHS_MIME)) {
-      const refs = candidates.map(droppedFileInlineRef).filter((ref): ref is string => Boolean(ref))
+      const refs = candidates
+        .map(candidate => droppedFileInlineRef(candidate, cwd))
+        .filter((ref): ref is string => Boolean(ref))
 
       if (insertInlineRefs(refs)) {
         triggerHaptic('selection')
@@ -637,13 +618,13 @@ export function ChatBar({
     void Promise.resolve(onAttachDroppedItems(candidates)).then(attached => {
       if (attached) {
         triggerHaptic('selection')
-        focusInput()
+        requestMainFocus()
       }
     })
   }
 
   const handleInputDragOver = (event: ReactDragEvent<HTMLDivElement>) => {
-    if (!dragHasAttachments(event.dataTransfer)) {
+    if (!dragHasAttachments(event.dataTransfer, HERMES_PATHS_MIME)) {
       return
     }
 
@@ -653,12 +634,15 @@ export function ChatBar({
   }
 
   const handleInputDrop = (event: ReactDragEvent<HTMLDivElement>) => {
-    if (!dragHasAttachments(event.dataTransfer)) {
+    if (!dragHasAttachments(event.dataTransfer, HERMES_PATHS_MIME)) {
       return
     }
 
     const candidates = extractDroppedFiles(event.dataTransfer)
-    const refs = candidates.map(droppedFileInlineRef).filter((ref): ref is string => Boolean(ref))
+
+    const refs = candidates
+      .map(candidate => droppedFileInlineRef(candidate, cwd))
+      .filter((ref): ref is string => Boolean(ref))
 
     if (!refs.length) {
       return
@@ -673,14 +657,14 @@ export function ChatBar({
     }
   }
 
-  const clearDraft = () => {
+  const clearDraft = useCallback(() => {
     aui.composer().setText('')
     draftRef.current = ''
 
     if (editorRef.current) {
       editorRef.current.replaceChildren()
     }
-  }
+  }, [aui])
 
   const loadIntoComposer = (text: string, attachments: ComposerAttachment[]) => {
     draftRef.current = text
@@ -696,7 +680,9 @@ export function ChatBar({
   }
 
   const beginQueuedEdit = (entry: QueuedPromptEntry) => {
-    if (!activeQueueSessionKey || queueEdit) return
+    if (!activeQueueSessionKey || queueEdit) {
+      return
+    }
 
     setQueueEdit({
       attachments: cloneAttachments($composerAttachments.get()),
@@ -710,13 +696,17 @@ export function ChatBar({
   }
 
   const exitQueuedEdit = (action: 'cancel' | 'save'): boolean => {
-    if (!queueEdit) return false
+    if (!queueEdit) {
+      return false
+    }
 
     if (action === 'save') {
       const text = draftRef.current
       const next = cloneAttachments($composerAttachments.get())
 
-      if (!text.trim() && next.length === 0) return false
+      if (!text.trim() && next.length === 0) {
+        return false
+      }
 
       const saved = updateQueuedPrompt(queueEdit.sessionKey, queueEdit.entryId, { attachments: next, text })
       triggerHaptic(saved ? 'success' : 'selection')
@@ -732,32 +722,45 @@ export function ChatBar({
   }
 
   const queueCurrentDraft = useCallback(() => {
-    if (!activeQueueSessionKey || (!draft.trim() && attachments.length === 0)) return false
-    if (!enqueueQueuedPrompt(activeQueueSessionKey, { text: draft, attachments })) return false
+    if (!activeQueueSessionKey || (!draft.trim() && attachments.length === 0)) {
+      return false
+    }
+
+    if (!enqueueQueuedPrompt(activeQueueSessionKey, { text: draft, attachments })) {
+      return false
+    }
 
     clearDraft()
     clearComposerAttachments()
     triggerHaptic('selection')
 
     return true
-  }, [activeQueueSessionKey, attachments, draft])
+  }, [activeQueueSessionKey, attachments, clearDraft, draft])
 
   // All queue drain paths share one lock + send-then-remove sequence.
   // `pickEntry` lets each caller choose head, by-id, or skip-edited.
   const runDrain = useCallback(
     async (pickEntry: (entries: QueuedPromptEntry[]) => QueuedPromptEntry | undefined): Promise<boolean> => {
-      if (drainingQueueRef.current || !activeQueueSessionKey) return false
+      if (drainingQueueRef.current || !activeQueueSessionKey) {
+        return false
+      }
 
       const entry = pickEntry(queuedPrompts)
 
-      if (!entry) return false
+      if (!entry) {
+        return false
+      }
 
       drainingQueueRef.current = true
 
       try {
-        const accepted = await Promise.resolve(onSubmit(entry.text, { attachments: entry.attachments, fromQueue: true }))
+        const accepted = await Promise.resolve(
+          onSubmit(entry.text, { attachments: entry.attachments, fromQueue: true })
+        )
 
-        if (accepted === false) return false
+        if (accepted === false) {
+          return false
+        }
 
         removeQueuedPrompt(activeQueueSessionKey, entry.id)
 
@@ -785,7 +788,9 @@ export function ChatBar({
   )
 
   const interruptAndSendNextQueued = useCallback(async () => {
-    if (queuedPrompts.length === 0) return false
+    if (queuedPrompts.length === 0) {
+      return false
+    }
 
     await Promise.resolve(onCancel())
 
@@ -797,15 +802,22 @@ export function ChatBar({
     const wasBusy = previousBusyRef.current
     previousBusyRef.current = busy
 
-    if (busy || !wasBusy || queuedPrompts.length === 0) return
+    if (busy || !wasBusy || queuedPrompts.length === 0) {
+      return
+    }
 
     void drainNextQueued()
   }, [busy, drainNextQueued, queuedPrompts.length])
 
   // Clean up queue edit when its target disappears (session swap or external delete).
   useEffect(() => {
-    if (!queueEdit) return
-    if (queueEdit.sessionKey === activeQueueSessionKey && editingQueuedPrompt) return
+    if (!queueEdit) {
+      return
+    }
+
+    if (queueEdit.sessionKey === activeQueueSessionKey && editingQueuedPrompt) {
+      return
+    }
 
     loadIntoComposer(queueEdit.draft, queueEdit.attachments)
     setQueueEdit(null)
@@ -815,9 +827,11 @@ export function ChatBar({
     if (queueEdit) {
       exitQueuedEdit('save')
     } else if (busy) {
-      if (hasComposerPayload) queueCurrentDraft()
-      else if (queuedPrompts.length > 0) void interruptAndSendNextQueued()
-      else {
+      if (hasComposerPayload) {
+        queueCurrentDraft()
+      } else if (queuedPrompts.length > 0) {
+        void interruptAndSendNextQueued()
+      } else {
         triggerHaptic('cancel')
         void Promise.resolve(onCancel())
       }
@@ -966,6 +980,7 @@ export function ChatBar({
         onBlur={() => window.setTimeout(closeTrigger, 80)}
         onDragOver={handleInputDragOver}
         onDrop={handleInputDrop}
+        onFocus={() => markActiveComposer('main')}
         onInput={handleEditorInput}
         onKeyDown={handleEditorKeyDown}
         onKeyUp={handleEditorKeyUp}
@@ -1033,10 +1048,11 @@ export function ChatBar({
             <div
               className={cn(
                 'relative z-4 isolate rounded-[inherit] border border-[color-mix(in_srgb,var(--dt-composer-ring)_calc(18%*var(--composer-ring-strength)),var(--dt-input))] shadow-composer transition-[border-color,box-shadow] duration-200 ease-out',
+                COMPOSER_DROP_FADE_CLASS,
                 'group-focus-within/composer:border-[color-mix(in_srgb,var(--dt-composer-ring)_calc(45%*var(--composer-ring-strength)),transparent)] group-focus-within/composer:shadow-composer-focus',
                 'group-has-data-[state=open]/composer:border-t-transparent',
                 'group-has-data-[state=open]/composer:shadow-[0_0.0625rem_0_0.0625rem_color-mix(in_srgb,var(--dt-composer-ring)_calc(35%*var(--composer-ring-strength)),transparent),0_0.5rem_1.5rem_color-mix(in_srgb,var(--shadow-ink)_6%,transparent)]',
-                dragActive && 'border-midground/70 shadow-composer-focus ring-2 ring-midground/40'
+                dragActive && COMPOSER_DROP_ACTIVE_CLASS
               )}
               data-slot="composer-surface"
               ref={composerSurfaceRef}
@@ -1053,14 +1069,6 @@ export function ChatBar({
                   'group-focus-within/composer:bg-[color-mix(in_srgb,var(--dt-card)_85%,transparent)]'
                 )}
               />
-              {dragActive && (
-                <div
-                  aria-hidden
-                  className="pointer-events-none absolute inset-0 z-3 flex items-center justify-center bg-midground/10 text-sm font-semibold uppercase tracking-[0.18em] text-midground backdrop-blur-[1px]"
-                >
-                  Drop files to attach
-                </div>
-              )}
               <div
                 className={cn(
                   'relative z-1 flex min-h-0 w-full flex-col gap-(--composer-row-gap) overflow-hidden rounded-[inherit] px-(--composer-surface-pad-x) py-(--composer-surface-pad-y) transition-opacity duration-200 ease-out',
@@ -1074,7 +1082,9 @@ export function ChatBar({
                 <VoicePlaybackActivity />
                 {queueEdit && editingQueuedPrompt && (
                   <div className="flex items-center justify-between gap-2 rounded-lg border border-[color-mix(in_srgb,var(--dt-composer-ring)_32%,transparent)] bg-accent/18 px-2 py-1">
-                    <div className="min-w-0 text-[0.7rem] text-muted-foreground/88">Editing queued turn in composer</div>
+                    <div className="min-w-0 text-[0.7rem] text-muted-foreground/88">
+                      Editing queued turn in composer
+                    </div>
                     <div className="flex shrink-0 items-center gap-1">
                       <Button
                         className="h-6 rounded-md px-2 text-[0.68rem]"
diff --git a/apps/desktop/src/app/chat/composer/inline-refs.ts b/apps/desktop/src/app/chat/composer/inline-refs.ts
new file mode 100644
index 00000000000..bb59a9c68ff
--- /dev/null
+++ b/apps/desktop/src/app/chat/composer/inline-refs.ts
@@ -0,0 +1,91 @@
+import { formatRefValue } from '@/components/assistant-ui/directive-text'
+import { contextPath } from '@/lib/chat-runtime'
+
+import type { DroppedFile } from '../hooks/use-composer-actions'
+
+import { composerPlainText, escapeHtml, placeCaretEnd, refChipHtml } from './rich-editor'
+
+export function dragHasAttachments(transfer: DataTransfer | null, pathsMime: string) {
+  if (!transfer) {
+    return false
+  }
+
+  if (Array.from(transfer.types || []).includes(pathsMime)) {
+    return true
+  }
+
+  if (Array.from(transfer.types || []).includes('Files')) {
+    return true
+  }
+
+  return Array.from(transfer.items || []).some(item => item.kind === 'file')
+}
+
+export function droppedFileInlineRef(candidate: DroppedFile, cwd: string | null | undefined) {
+  if (!candidate.path) {
+    return null
+  }
+
+  const rel = contextPath(candidate.path, cwd || '')
+
+  if (candidate.line) {
+    const { line, lineEnd } = candidate
+    const range = lineEnd && lineEnd > line ? `${line}-${lineEnd}` : `${line}`
+
+    return `@line:${formatRefValue(`${rel}:${range}`)}`
+  }
+
+  const kind = candidate.isDirectory ? 'folder' : 'file'
+
+  return `@${kind}:${formatRefValue(rel)}`
+}
+
+export function insertInlineRefsIntoEditor(editor: HTMLDivElement, refs: readonly string[]) {
+  if (!refs.length) {
+    return null
+  }
+
+  const refsHtml = refs
+    .map(ref => {
+      const match = ref.match(/^@([^:]+):(.+)$/)
+
+      return match ? refChipHtml(match[1], match[2]) : escapeHtml(ref)
+    })
+    .join(' ')
+
+  const selection = window.getSelection()
+
+  const range =
+    selection?.rangeCount && editor.contains(selection.getRangeAt(0).commonAncestorContainer)
+      ? selection.getRangeAt(0)
+      : null
+
+  editor.focus({ preventScroll: true })
+
+  if (range) {
+    const beforeRange = range.cloneRange()
+    beforeRange.selectNodeContents(editor)
+    beforeRange.setEnd(range.startContainer, range.startOffset)
+    const beforeContainer = document.createElement('div')
+    beforeContainer.appendChild(beforeRange.cloneContents())
+
+    const afterRange = range.cloneRange()
+    afterRange.selectNodeContents(editor)
+    afterRange.setStart(range.endContainer, range.endOffset)
+    const afterContainer = document.createElement('div')
+    afterContainer.appendChild(afterRange.cloneContents())
+
+    const beforeText = composerPlainText(beforeContainer)
+    const afterText = composerPlainText(afterContainer)
+    const needsBeforeSpace = beforeText.length > 0 && !/\s$/.test(beforeText)
+    const needsAfterSpace = afterText.length === 0 || !/^\s/.test(afterText)
+
+    document.execCommand('insertHTML', false, `${needsBeforeSpace ? ' ' : ''}${refsHtml}${needsAfterSpace ? ' ' : ''}`)
+  } else {
+    const current = composerPlainText(editor)
+    placeCaretEnd(editor)
+    document.execCommand('insertHTML', false, `${current && !/\s$/.test(current) ? ' ' : ''}${refsHtml} `)
+  }
+
+  return composerPlainText(editor)
+}
diff --git a/apps/desktop/src/app/chat/composer/queue-panel.tsx b/apps/desktop/src/app/chat/composer/queue-panel.tsx
index e0c8dc88e2a..18e95d0444e 100644
--- a/apps/desktop/src/app/chat/composer/queue-panel.tsx
+++ b/apps/desktop/src/app/chat/composer/queue-panel.tsx
@@ -1,7 +1,8 @@
 import { useState } from 'react'
 
 import { Button } from '@/components/ui/button'
-import { ArrowUp, ChevronDown, Pencil, Trash2 } from '@/lib/icons'
+import { DisclosureCaret } from '@/components/ui/disclosure-caret'
+import { ArrowUp, Pencil, Trash2 } from '@/lib/icons'
 import { cn } from '@/lib/utils'
 import type { QueuedPromptEntry } from '@/store/composer-queue'
 
@@ -20,7 +21,9 @@ const entryPreview = (entry: QueuedPromptEntry) =>
 export function QueuePanel({ busy, editingId, entries, onDelete, onEdit, onSendNow }: QueuePanelProps) {
   const [collapsed, setCollapsed] = useState(false)
 
-  if (entries.length === 0) return null
+  if (entries.length === 0) {
+    return null
+  }
 
   return (
     <div className="rounded-2xl border border-border/65 bg-[color-mix(in_srgb,var(--dt-card)_70%,transparent)] py-0.5 shadow-[0_0_0_1px_color-mix(in_srgb,var(--dt-card)_30%,transparent)_inset]">
@@ -29,7 +32,7 @@ export function QueuePanel({ busy, editingId, entries, onDelete, onEdit, onSendN
         onClick={() => setCollapsed(open => !open)}
         type="button"
       >
-        <ChevronDown className={cn('shrink-0 transition-transform', collapsed && '-rotate-90')} size={14} />
+        <DisclosureCaret className="shrink-0" open={!collapsed} size="0.875rem" />
         <span className="truncate">{entries.length} Queued</span>
       </button>
 
diff --git a/apps/desktop/src/app/chat/composer/rich-editor.ts b/apps/desktop/src/app/chat/composer/rich-editor.ts
index f88c2fbd611..3a45028e7ab 100644
--- a/apps/desktop/src/app/chat/composer/rich-editor.ts
+++ b/apps/desktop/src/app/chat/composer/rich-editor.ts
@@ -15,7 +15,7 @@ import {
 
 export const RICH_INPUT_SLOT = 'composer-rich-input'
 
-export const REF_RE = /@(file|folder|url|image|tool|line):(`[^`\n]+`|"[^"\n]+"|'[^'\n]+'|\S+)/g
+export const REF_RE = /@(file|folder|url|image|tool|line|terminal):(`[^`\n]+`|"[^"\n]+"|'[^'\n]+'|\S+)/g
 
 const ESC: Record<string, string> = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#039;' }
 
diff --git a/apps/desktop/src/app/chat/composer/trigger-popover.tsx b/apps/desktop/src/app/chat/composer/trigger-popover.tsx
index 82cf863f659..7cc6a3b2237 100644
--- a/apps/desktop/src/app/chat/composer/trigger-popover.tsx
+++ b/apps/desktop/src/app/chat/composer/trigger-popover.tsx
@@ -1,8 +1,45 @@
 import type { Unstable_TriggerItem } from '@assistant-ui/core'
 
+import { Codicon } from '@/components/ui/codicon'
 import { cn } from '@/lib/utils'
 
-import { COMPLETION_DRAWER_CLASS, COMPLETION_DRAWER_ROW_CLASS, CompletionDrawerEmpty } from './completion-drawer'
+import {
+  COMPLETION_DRAWER_BELOW_CLASS,
+  COMPLETION_DRAWER_CLASS,
+  COMPLETION_DRAWER_ROW_CLASS,
+  CompletionDrawerEmpty
+} from './completion-drawer'
+
+const AT_ICON_BY_TYPE: Record<string, string> = {
+  diff: 'diff',
+  file: 'book',
+  folder: 'folder',
+  git: 'git-branch',
+  image: 'file-media',
+  simple: 'symbol-misc',
+  staged: 'diff-added',
+  tool: 'tools',
+  url: 'globe'
+}
+
+function completionIcon(kind: '@' | '/', item: Unstable_TriggerItem) {
+  if (kind === '/') {
+    return 'terminal'
+  }
+
+  const meta = item.metadata as { rawText?: string } | undefined
+  const raw = meta?.rawText || item.label
+
+  if (raw.startsWith('@diff')) {
+    return AT_ICON_BY_TYPE.diff
+  }
+
+  if (raw.startsWith('@staged')) {
+    return AT_ICON_BY_TYPE.staged
+  }
+
+  return AT_ICON_BY_TYPE[item.type] || AT_ICON_BY_TYPE.simple
+}
 
 interface ComposerTriggerPopoverProps {
   activeIndex: number
@@ -11,6 +48,7 @@ interface ComposerTriggerPopoverProps {
   loading: boolean
   onHover: (index: number) => void
   onPick: (item: Unstable_TriggerItem) => void
+  placement?: 'bottom' | 'top'
 }
 
 export function ComposerTriggerPopover({
@@ -19,11 +57,12 @@ export function ComposerTriggerPopover({
   kind,
   loading,
   onHover,
-  onPick
+  onPick,
+  placement = 'top'
 }: ComposerTriggerPopoverProps) {
   return (
     <div
-      className={COMPLETION_DRAWER_CLASS}
+      className={placement === 'bottom' ? COMPLETION_DRAWER_BELOW_CLASS : COMPLETION_DRAWER_CLASS}
       data-slot="composer-completion-drawer"
       data-state="open"
       onMouseDown={event => event.preventDefault()}
@@ -50,19 +89,19 @@ export function ComposerTriggerPopover({
 
           return (
             <button
-              className={cn(
-                COMPLETION_DRAWER_ROW_CLASS,
-                index === activeIndex && 'bg-[color-mix(in_srgb,var(--dt-accent)_70%,transparent)]'
-              )}
+              className={cn(COMPLETION_DRAWER_ROW_CLASS, index === activeIndex && 'bg-(--ui-bg-tertiary)')}
               data-highlighted={index === activeIndex ? '' : undefined}
               key={item.id}
               onClick={() => onPick(item)}
               onMouseEnter={() => onHover(index)}
               type="button"
             >
-              <span className="shrink-0 truncate font-mono font-medium leading-5 text-foreground">{display}</span>
+              <span className="grid size-3.5 shrink-0 place-items-center text-(--ui-text-tertiary)">
+                <Codicon name={completionIcon(kind, item)} size="0.875rem" />
+              </span>
+              <span className="min-w-0 shrink truncate font-mono font-medium leading-5 text-foreground">{display}</span>
               {description && (
-                <span className="min-w-0 truncate leading-5 text-muted-foreground/80">{description}</span>
+                <span className="min-w-0 flex-1 truncate leading-5 text-(--ui-text-tertiary)">{description}</span>
               )}
             </button>
           )
diff --git a/apps/desktop/src/app/chat/hooks/use-composer-actions.ts b/apps/desktop/src/app/chat/hooks/use-composer-actions.ts
index d9629e2871b..e48ff7accff 100644
--- a/apps/desktop/src/app/chat/hooks/use-composer-actions.ts
+++ b/apps/desktop/src/app/chat/hooks/use-composer-actions.ts
@@ -1,8 +1,14 @@
 import { useCallback } from 'react'
 
+import { requestComposerFocus, requestComposerInsert } from '@/app/chat/composer/focus'
 import { formatRefValue } from '@/components/assistant-ui/directive-text'
 import { attachmentId, contextPath, pathLabel } from '@/lib/chat-runtime'
-import { addComposerAttachment, type ComposerAttachment, removeComposerAttachment } from '@/store/composer'
+import {
+  addComposerAttachment,
+  type ComposerAttachment,
+  removeComposerAttachment,
+  setComposerTerminalSelection
+} from '@/store/composer'
 import { notify, notifyError } from '@/store/notifications'
 
 import type { ImageDetachResponse } from '../../types'
@@ -180,19 +186,38 @@ interface ComposerActionsOptions {
   requestGateway: <T>(method: string, params?: Record<string, unknown>) => Promise<T>
 }
 
+/** Add to the main composer and focus it. All sidebar/picker/drop attach paths funnel through here. */
+const attachToMain = (attachment: ComposerAttachment) => {
+  addComposerAttachment(attachment)
+  requestComposerFocus('main')
+}
+
 export function useComposerActions({ activeSessionId, currentCwd, requestGateway }: ComposerActionsOptions) {
+  const addTextToDraft = useCallback((text: string) => {
+    requestComposerInsert(text, { mode: 'block' })
+  }, [])
+
+  const addTerminalSelectionAttachment = useCallback((text: string, label = 'selection') => {
+    const trimmed = text.trim()
+    const normalizedLabel = label.trim() || 'selection'
+    const refText = `@terminal:${formatRefValue(normalizedLabel)}`
+
+    if (!trimmed) {
+      return
+    }
+
+    setComposerTerminalSelection(normalizedLabel, trimmed)
+    requestComposerInsert(refText, { mode: 'inline' })
+  }, [])
+
   const addContextRefAttachment = useCallback((refText: string, label?: string, detail?: string) => {
-    let kind: ComposerAttachment['kind'] = 'file'
+    const kind: ComposerAttachment['kind'] = refText.startsWith('@folder:')
+      ? 'folder'
+      : refText.startsWith('@url:')
+        ? 'url'
+        : 'file'
 
-    if (refText.startsWith('@folder:')) {
-      kind = 'folder'
-    }
-
-    if (refText.startsWith('@url:')) {
-      kind = 'url'
-    }
-
-    addComposerAttachment({
+    attachToMain({
       id: attachmentId(kind, refText),
       kind,
       label: label || refText.replace(/^@(file|folder|url):/, ''),
@@ -216,7 +241,7 @@ export function useComposerActions({ activeSessionId, currentCwd, requestGateway
       for (const path of paths) {
         const rel = contextPath(path, currentCwd)
 
-        addComposerAttachment({
+        attachToMain({
           id: attachmentId(kind, rel),
           kind,
           label: pathLabel(path),
@@ -237,7 +262,7 @@ export function useComposerActions({ activeSessionId, currentCwd, requestGateway
 
       const rel = contextPath(filePath, currentCwd)
 
-      addComposerAttachment({
+      attachToMain({
         id: attachmentId('file', rel),
         kind: 'file',
         label: pathLabel(filePath),
@@ -264,7 +289,7 @@ export function useComposerActions({ activeSessionId, currentCwd, requestGateway
       path: filePath
     }
 
-    addComposerAttachment(baseAttachment)
+    attachToMain(baseAttachment)
 
     try {
       const previewUrl = await window.hermesDesktop?.readFileDataUrl(filePath)
@@ -361,7 +386,7 @@ export function useComposerActions({ activeSessionId, currentCwd, requestGateway
 
       const rel = contextPath(folderPath, currentCwd)
 
-      addComposerAttachment({
+      attachToMain({
         id: attachmentId('folder', rel),
         kind: 'folder',
         label: pathLabel(folderPath),
@@ -482,7 +507,10 @@ export function useComposerActions({ activeSessionId, currentCwd, requestGateway
 
   return {
     addContextRefAttachment,
+    addTerminalSelectionAttachment,
+    addTextToDraft,
     attachContextFilePath,
+    attachContextFolderPath,
     attachDroppedItems,
     attachImageBlob,
     attachImagePath,
diff --git a/apps/desktop/src/app/chat/index.tsx b/apps/desktop/src/app/chat/index.tsx
index 8786b7bb2a1..98cb2f636b9 100644
--- a/apps/desktop/src/app/chat/index.tsx
+++ b/apps/desktop/src/app/chat/index.tsx
@@ -11,16 +11,17 @@ import { Suspense, useMemo, useRef } from 'react'
 import { useLocation } from 'react-router-dom'
 
 import { Thread } from '@/components/assistant-ui/thread'
+import { Backdrop } from '@/components/Backdrop'
 import { NotificationStack } from '@/components/notifications'
 import { Button } from '@/components/ui/button'
+import { Codicon } from '@/components/ui/codicon'
 import { getGlobalModelOptions, type HermesGateway } from '@/hermes'
 import type { ChatMessage } from '@/lib/chat-messages'
 import { quickModelOptions, sessionTitle, toRuntimeMessage } from '@/lib/chat-runtime'
-import { ChevronDown } from '@/lib/icons'
 import { useIncrementalExternalStoreRuntime } from '@/lib/incremental-external-store-runtime'
 import { cn } from '@/lib/utils'
-import { $pinnedSessionIds } from '@/store/layout'
 import type { ComposerAttachment } from '@/store/composer'
+import { $pinnedSessionIds } from '@/store/layout'
 import {
   $activeSessionId,
   $awaitingResponse,
@@ -92,32 +93,30 @@ function ChatHeader({
   const sessions = useStore($sessions)
   const pinnedSessionIds = useStore($pinnedSessionIds)
   const activeStoredSession = sessions.find(session => session.id === selectedSessionId) || null
-  const title = activeStoredSession ? sessionTitle(activeStoredSession) : ''
+  const title = activeStoredSession ? sessionTitle(activeStoredSession) : 'New agent'
   const selectedIsPinned = selectedSessionId ? pinnedSessionIds.includes(selectedSessionId) : false
 
   return (
     <header className={cn(titlebarHeaderBaseClass, isRoutedSessionView && titlebarHeaderShadowClass)}>
       <div className="min-w-0 flex-1">
-        {title && (
-          <SessionActionsMenu
-            align="start"
-            onDelete={selectedSessionId ? onDeleteSelectedSession : undefined}
-            onPin={selectedSessionId ? onToggleSelectedPin : undefined}
-            pinned={selectedIsPinned}
-            sessionId={selectedSessionId || activeSessionId || ''}
-            sideOffset={8}
-            title={title}
+        <SessionActionsMenu
+          align="start"
+          onDelete={selectedSessionId ? onDeleteSelectedSession : undefined}
+          onPin={selectedSessionId ? onToggleSelectedPin : undefined}
+          pinned={selectedIsPinned}
+          sessionId={selectedSessionId || activeSessionId || ''}
+          sideOffset={8}
+          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]"
+            type="button"
+            variant="ghost"
           >
-            <Button
-              className="pointer-events-auto h-7 min-w-0 gap-1.5 rounded-lg px-1 py-0 text-foreground hover:bg-accent/70 data-[state=open]:bg-accent/70 [-webkit-app-region:no-drag]"
-              type="button"
-              variant="ghost"
-            >
-              <h2 className="max-w-[62vw] truncate text-base font-semibold leading-none tracking-tight">{title}</h2>
-              <ChevronDown className="shrink-0 text-foreground/75" size={16} />
-            </Button>
-          </SessionActionsMenu>
-        )}
+            <h2 className="max-w-[52vw] truncate text-[0.75rem] font-medium leading-none">{title}</h2>
+            <Codicon className="shrink-0 text-(--ui-text-tertiary)" name="chevron-down" size="0.8125rem" />
+          </Button>
+        </SessionActionsMenu>
       </div>
     </header>
   )
@@ -271,10 +270,11 @@ export function ChatView({
   return (
     <div
       className={cn(
-        'relative flex h-full min-w-0 flex-col overflow-hidden rounded-b-[0.9375rem] bg-transparent',
+        'relative isolate flex h-full min-w-0 flex-col overflow-hidden bg-(--ui-chat-surface-background)',
         className
       )}
     >
+      <Backdrop />
       <ChatHeader
         activeSessionId={activeSessionId}
         isRoutedSessionView={isRoutedSessionView}
@@ -285,13 +285,17 @@ export function ChatView({
 
       <NotificationStack />
 
-      <div className="relative min-h-0 max-w-full flex-1 overflow-hidden rounded-b-[1.0625rem] bg-transparent contain-[layout_paint]">
+      <div className="relative min-h-0 max-w-full flex-1 overflow-hidden bg-(--ui-chat-surface-background) contain-[layout_paint]">
         <AssistantRuntimeProvider runtime={runtime}>
           <Thread
             clampToComposer={showChatBar}
+            cwd={currentCwd}
+            gateway={gateway}
             intro={showIntro ? { personality: introPersonality, seed: introSeed } : undefined}
             loading={threadLoading}
             onBranchInNewChat={onBranchInNewChat}
+            onCancel={onCancel}
+            sessionId={activeSessionId}
             sessionKey={threadKey}
           />
           {showChatBar && (
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 22841aaa238..3617f59a1ed 100644
--- a/apps/desktop/src/app/chat/right-rail/preview-console.tsx
+++ b/apps/desktop/src/app/chat/right-rail/preview-console.tsx
@@ -2,10 +2,10 @@ import { useStore } from '@nanostores/react'
 import type { CSSProperties, MutableRefObject, PointerEvent as ReactPointerEvent, RefObject } from 'react'
 import { useEffect, useMemo, useRef } from 'react'
 
+import { requestComposerInsert } from '@/app/chat/composer/focus'
 import { CopyButton } from '@/components/ui/copy-button'
 import { PanelBottom, Send, Trash2 } from '@/lib/icons'
 import { cn } from '@/lib/utils'
-import { $composerDraft, setComposerDraft } from '@/store/composer'
 import { notify } from '@/store/notifications'
 
 import type { ConsoleEntry, PreviewConsoleState } from './preview-console-state'
@@ -186,10 +186,8 @@ export function PreviewConsolePanel({
     }
 
     const block = ['Preview console:', '```', ...entries.map(formatLogLine), '```'].join('\n')
-    const draft = $composerDraft.get()
-    const next = draft && !draft.endsWith('\n') ? `${draft}\n\n${block}` : `${draft}${block}`
 
-    setComposerDraft(next)
+    requestComposerInsert(block, { mode: 'block', target: 'main' })
     consoleState.clearSelection()
     notify({
       kind: 'success',
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 7a650da4fa7..708961c23ae 100644
--- a/apps/desktop/src/app/chat/right-rail/preview-file.tsx
+++ b/apps/desktop/src/app/chat/right-rail/preview-file.tsx
@@ -100,7 +100,7 @@ export function PreviewEmptyState({
             )}
             {secondaryAction && (
               <button
-                className="text-[0.6875rem] font-medium text-muted-foreground underline decoration-muted-foreground/25 underline-offset-4 transition-colors hover:text-foreground hover:decoration-foreground/55 disabled:cursor-default disabled:text-muted-foreground/55 disabled:no-underline"
+                className="text-[0.6875rem] font-medium text-muted-foreground underline decoration-current/20 underline-offset-4 transition-colors hover:text-foreground disabled:cursor-default disabled:text-muted-foreground/55 disabled:no-underline"
                 disabled={secondaryAction.disabled}
                 onClick={secondaryAction.onClick}
                 type="button"
@@ -296,9 +296,9 @@ function MarkdownPreview({ text }: { text: string }) {
 
 function PreviewToggle({ asSource, onToggle }: { asSource: boolean; onToggle: () => void }) {
   return (
-    <div className="sticky top-0 z-10 flex justify-end border-b border-border/40 bg-background/90 px-3 py-1 backdrop-blur">
+    <div className="sticky top-0 z-10 flex justify-end border-b border-border/40 bg-transparent px-3 py-1 backdrop-blur">
       <button
-        className="text-[0.625rem] font-bold text-muted-foreground underline decoration-muted-foreground/25 underline-offset-4 transition-colors hover:text-foreground hover:decoration-foreground/55"
+        className="text-[0.625rem] font-bold text-muted-foreground underline decoration-current/20 underline-offset-4 transition-colors hover:text-foreground"
         onClick={onToggle}
         type="button"
       >
@@ -379,7 +379,7 @@ function SourceView({ filePath, language, text }: { filePath: string; language:
           )
         })}
       </div>
-      <div className="relative [&_pre]:m-0 [&_pre]:px-3 [&_pre]:py-3">
+      <div className="relative [&_pre]:m-0 [&_pre]:px-3 [&_pre]:py-3 [&_pre]:bg-transparent!">
         {selection && (
           <div
             aria-hidden
@@ -512,7 +512,7 @@ export function LocalFilePreview({ reloadKey, target }: { reloadKey: number; tar
 
   if (isImage && state.dataUrl) {
     return (
-      <div className="flex h-full w-full items-center justify-center overflow-auto bg-[color-mix(in_srgb,var(--dt-card)_42%,transparent)] p-4">
+      <div className="flex h-full w-full items-center justify-center overflow-auto bg-transparent p-4">
         <img
           alt={target.label}
           className="max-h-full max-w-full rounded-lg object-contain shadow-sm"
@@ -528,7 +528,7 @@ export function LocalFilePreview({ reloadKey, target }: { reloadKey: number; tar
     const showRendered = isMarkdown && !renderMarkdownAsSource
 
     return (
-      <div className="h-full overflow-auto bg-background">
+      <div className="h-full overflow-auto bg-transparent">
         {state.truncated && (
           <div className="border-b border-border/60 bg-muted/35 px-3 py-1.5 text-[0.68rem] text-muted-foreground">
             Showing first 512 KB.
diff --git a/apps/desktop/src/app/chat/right-rail/preview-pane.test.tsx b/apps/desktop/src/app/chat/right-rail/preview-pane.test.tsx
index 5c64bd55c95..163511b05bc 100644
--- a/apps/desktop/src/app/chat/right-rail/preview-pane.test.tsx
+++ b/apps/desktop/src/app/chat/right-rail/preview-pane.test.tsx
@@ -13,7 +13,6 @@ describe('PreviewPane console state', () => {
 
     const rendered = render(
       <PreviewPane
-        onClose={vi.fn()}
         setTitlebarToolGroup={setTitlebarToolGroup}
         target={{
           kind: 'url',
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 dee253b7590..7cd405aa94f 100644
--- a/apps/desktop/src/app/chat/right-rail/preview-pane.tsx
+++ b/apps/desktop/src/app/chat/right-rail/preview-pane.tsx
@@ -3,7 +3,7 @@ import type { PointerEvent as ReactPointerEvent } from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 
 import type { SetTitlebarToolGroup, TitlebarTool } from '@/app/shell/titlebar-controls'
-import { Bug, RefreshCw, X } from '@/lib/icons'
+import { Bug } from '@/lib/icons'
 import { cn } from '@/lib/utils'
 import { notify, notifyError } from '@/store/notifications'
 import { $previewServerRestart, failPreviewServerRestart, type PreviewTarget } from '@/store/preview'
@@ -30,7 +30,6 @@ type PreviewWebview = HTMLElement & {
 
 interface PreviewPaneProps {
   embedded?: boolean
-  onClose: () => void
   onRestartServer?: (url: string, context?: string) => Promise<string>
   reloadRequest?: number
   setTitlebarToolGroup?: SetTitlebarToolGroup
@@ -84,7 +83,7 @@ function PreviewLoadError({
       body={
         <>
           <a
-            className="pointer-events-auto block cursor-pointer font-mono text-muted-foreground/90 underline decoration-muted-foreground/30 underline-offset-4 transition-colors hover:text-foreground hover:decoration-foreground/70"
+            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"
             href={error.url}
             onClick={event => {
               event.preventDefault()
@@ -117,7 +116,6 @@ const TITLEBAR_GROUP_ID = 'preview'
 
 export function PreviewPane({
   embedded = false,
-  onClose,
   onRestartServer,
   reloadRequest = 0,
   setTitlebarToolGroup,
@@ -299,35 +297,13 @@ export function PreviewPane({
               onSelect: toggleDevTools
             }
           ]
-        : []),
-      {
-        icon: <RefreshCw className={cn(loading && 'animate-spin')} />,
-        id: `${TITLEBAR_GROUP_ID}-reload`,
-        label: 'Reload preview',
-        onSelect: reloadPreview
-      },
-      {
-        icon: <X />,
-        id: `${TITLEBAR_GROUP_ID}-close`,
-        label: 'Close preview',
-        onSelect: onClose
-      }
+        : [])
     ]
 
     setTitlebarToolGroup(TITLEBAR_GROUP_ID, tools)
 
     return () => setTitlebarToolGroup(TITLEBAR_GROUP_ID, [])
-  }, [
-    consoleOpen,
-    consoleState,
-    devtoolsOpen,
-    isWebPreview,
-    loading,
-    onClose,
-    reloadPreview,
-    setTitlebarToolGroup,
-    toggleDevTools
-  ])
+  }, [consoleOpen, consoleState, devtoolsOpen, isWebPreview, setTitlebarToolGroup, toggleDevTools])
 
   useEffect(() => {
     if (!consoleOpen) {
@@ -534,7 +510,7 @@ export function PreviewPane({
     }
 
     const webview = document.createElement('webview') as PreviewWebview
-    webview.className = 'flex h-full w-full flex-1 bg-background'
+    webview.className = 'flex h-full w-full flex-1 bg-transparent'
     webview.setAttribute('partition', 'persist:hermes-preview')
     webview.setAttribute('src', target.url)
     webview.setAttribute('webpreferences', 'contextIsolation=yes,nodeIntegration=no,sandbox=yes')
@@ -626,13 +602,13 @@ export function PreviewPane({
   }, [appendConsoleEntry, consoleState, isWebPreview, target.url])
 
   return (
-    <aside className="relative flex h-full w-full min-w-0 flex-col overflow-hidden bg-background text-muted-foreground">
+    <aside className="relative flex h-full w-full min-w-0 flex-col overflow-hidden bg-transparent text-muted-foreground">
       <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
         {!embedded && (
           <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 transition-colors hover:text-primary hover:underline"
+                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"
                 href={currentUrl}
                 rel="noreferrer"
                 target="_blank"
@@ -645,12 +621,12 @@ export function PreviewPane({
         )}
 
         <div
-          className="pointer-events-auto relative min-h-0 flex-1 overflow-hidden bg-background"
+          className="pointer-events-auto relative min-h-0 flex-1 overflow-hidden bg-transparent"
           ref={previewContentRef}
         >
           <div
             className={cn(
-              'absolute inset-0 flex bg-background',
+              'absolute inset-0 flex bg-transparent',
               (!isWebPreview || loadError) && 'pointer-events-none opacity-0'
             )}
             ref={hostRef}
diff --git a/apps/desktop/src/app/chat/right-rail/preview.tsx b/apps/desktop/src/app/chat/right-rail/preview.tsx
index 05158a526da..268b9c41ce5 100644
--- a/apps/desktop/src/app/chat/right-rail/preview.tsx
+++ b/apps/desktop/src/app/chat/right-rail/preview.tsx
@@ -2,7 +2,7 @@ import { useStore } from '@nanostores/react'
 import { useEffect, useMemo } from 'react'
 
 import type { SetTitlebarToolGroup } from '@/app/shell/titlebar-controls'
-import { X } from '@/lib/icons'
+import { Codicon } from '@/components/ui/codicon'
 import { cn } from '@/lib/utils'
 import {
   $rightRailActiveTabId,
@@ -14,7 +14,7 @@ import {
   $filePreviewTabs,
   $previewReloadRequest,
   $previewTarget,
-  closeActiveRightRailTab,
+  closeRightRail,
   closeRightRailTab,
   type PreviewTarget
 } from '@/store/preview'
@@ -30,7 +30,7 @@ const INTRINSIC = `clamp(${PREVIEW_RAIL_MIN_WIDTH}, 36vw, 32rem)`
 // against --chat-min-width so the chat surface never gets squeezed below it.
 // Subtracts the project browser width so preview yields rather than crushing
 // the chat when both right-side panes are open.
-export const PREVIEW_RAIL_PANE_WIDTH = `min(${INTRINSIC}, max(0px, calc(100vw - var(--pane-chat-sidebar-width) - var(--pane-file-browser-width, 0px) - var(--chat-min-width))))`
+export const PREVIEW_RAIL_PANE_WIDTH = `min(${INTRINSIC}, max(0rem, calc(100vw - var(--pane-chat-sidebar-width) - var(--pane-file-browser-width, 0rem) - var(--chat-min-width))))`
 
 interface ChatPreviewRailProps {
   onRestartServer?: (url: string, context?: string) => Promise<string>
@@ -79,56 +79,69 @@ export function ChatPreviewRail({ onRestartServer, setTitlebarToolGroup }: ChatP
   const isPreview = activeTab.id === RIGHT_RAIL_PREVIEW_TAB_ID
 
   return (
-    <aside className="relative flex h-full w-full min-w-0 flex-col overflow-hidden border-l border-border/60 bg-background text-muted-foreground">
-      <div
-        className="flex h-(--titlebar-height) shrink-0 overflow-x-auto overflow-y-hidden overscroll-x-contain border-b border-border/60 bg-[color-mix(in_srgb,var(--dt-sidebar-bg)_94%,transparent)] [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
-        role="tablist"
-      >
-        {tabs.map(tab => {
-          const active = tab.id === activeTab.id
+    <aside className="relative flex h-full w-full min-w-0 flex-col overflow-hidden border-l border-(--ui-stroke-tertiary) bg-(--ui-editor-surface-background) text-(--ui-text-tertiary)">
+      <div className="group/rail-tabs flex h-(--titlebar-height) shrink-0 border-b border-(--ui-stroke-tertiary) bg-(--ui-sidebar-surface-background)">
+        <div
+          className="flex min-w-0 flex-1 overflow-x-auto overflow-y-hidden overscroll-x-contain [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+          role="tablist"
+        >
+          {tabs.map(tab => {
+            const active = tab.id === activeTab.id
 
-          return (
-            <div
-              className={cn(
-                'group/tab relative flex h-full max-w-48 shrink-0 items-center text-[0.6875rem] font-medium [-webkit-app-region:no-drag]',
-                active
-                  ? 'bg-background text-foreground'
-                  : 'border-r border-border/40 text-muted-foreground hover:bg-accent/30 hover:text-foreground'
-              )}
-              key={tab.id}
-            >
-              {active && <span aria-hidden="true" className="absolute inset-x-0 top-0 h-px bg-primary/70" />}
-              <button
-                aria-selected={active}
-                className="flex h-full min-w-0 flex-1 items-center truncate pl-3 pr-1.5 text-left outline-none"
-                onClick={() => selectRightRailTab(tab.id)}
-                role="tab"
-                title={tab.label}
-                type="button"
-              >
-                {tab.label}
-              </button>
-              <button
-                aria-label={`Close ${tab.label}`}
+            return (
+              <div
                 className={cn(
-                  'mr-1.5 hidden size-4 shrink-0 place-items-center rounded-sm text-muted-foreground/55 transition-colors hover:bg-accent hover:text-foreground focus-visible:grid group-hover/tab:grid',
-                  active && 'grid'
+                  'group/tab relative flex h-full min-w-0 max-w-48 shrink-0 items-center text-[0.6875rem] font-medium [-webkit-app-region:no-drag] last:border-r last:border-(--ui-stroke-quaternary)',
+                  active
+                    ? 'bg-(--ui-editor-surface-background) text-foreground [--tab-bg:var(--ui-editor-surface-background)]'
+                    : 'border-r border-(--ui-stroke-quaternary) text-(--ui-text-tertiary) [--tab-bg:var(--ui-sidebar-surface-background)] hover:bg-(--chrome-action-hover) hover:text-foreground'
                 )}
-                onClick={() => closeRightRailTab(tab.id)}
-                title={`Close ${tab.label}`}
-                type="button"
+                key={tab.id}
               >
-                <X className="size-3" />
-              </button>
-            </div>
-          )
-        })}
+                {active && (
+                  <span aria-hidden="true" className="absolute inset-x-0 top-0 h-px bg-(--ui-stroke-primary)" />
+                )}
+                <button
+                  aria-selected={active}
+                  className="flex h-full min-w-0 max-w-full items-center overflow-hidden pl-3 pr-2 text-left outline-none"
+                  onClick={() => selectRightRailTab(tab.id)}
+                  role="tab"
+                  title={tab.label}
+                  type="button"
+                >
+                  <span className="block min-w-0 truncate">{tab.label}</span>
+                </button>
+                <span
+                  aria-hidden="true"
+                  className="pointer-events-none absolute inset-y-0 right-0 w-9 bg-[linear-gradient(to_right,transparent,var(--tab-bg)_55%)] opacity-0 transition-opacity group-hover/tab:opacity-100 group-focus-within/tab:opacity-100"
+                />
+                <button
+                  aria-label={`Close ${tab.label}`}
+                  className="pointer-events-none absolute right-1.5 top-1/2 grid size-4 -translate-y-1/2 place-items-center rounded-sm text-(--ui-text-tertiary) opacity-0 transition-[background-color,color,opacity] hover:bg-(--ui-bg-secondary) hover:text-foreground focus-visible:pointer-events-auto focus-visible:opacity-100 group-hover/tab:pointer-events-auto group-hover/tab:opacity-100 group-focus-within/tab:pointer-events-auto group-focus-within/tab:opacity-100"
+                  onClick={() => closeRightRailTab(tab.id)}
+                  title={`Close ${tab.label}`}
+                  type="button"
+                >
+                  <Codicon name="close" size="0.75rem" />
+                </button>
+              </div>
+            )
+          })}
+        </div>
+        <button
+          aria-label="Close preview pane"
+          className="mr-1.5 grid size-6 shrink-0 self-center place-items-center rounded-md text-(--ui-text-tertiary) opacity-0 transition-opacity hover:bg-(--ui-control-hover-background) hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring group-hover/rail-tabs:opacity-100 [-webkit-app-region:no-drag]"
+          onClick={closeRightRail}
+          title="Close preview pane"
+          type="button"
+        >
+          <Codicon name="close" size="0.75rem" />
+        </button>
       </div>
 
       <div className="min-h-0 flex-1 overflow-hidden">
         <PreviewPane
           embedded
-          onClose={closeActiveRightRailTab}
           onRestartServer={isPreview ? onRestartServer : undefined}
           reloadRequest={previewReloadRequest}
           setTitlebarToolGroup={setTitlebarToolGroup}
diff --git a/apps/desktop/src/app/chat/sidebar/index.tsx b/apps/desktop/src/app/chat/sidebar/index.tsx
index 4b3e22fa2e1..05cc5b41dc4 100644
--- a/apps/desktop/src/app/chat/sidebar/index.tsx
+++ b/apps/desktop/src/app/chat/sidebar/index.tsx
@@ -1,8 +1,28 @@
+import {
+  closestCenter,
+  DndContext,
+  type DragEndEvent,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors
+} from '@dnd-kit/core'
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy
+} from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
 import { useStore } from '@nanostores/react'
 import type * as React from 'react'
-import { useMemo } from 'react'
+import { useMemo, useState } from 'react'
 
 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 {
   Sidebar,
   SidebarContent,
@@ -14,42 +34,119 @@ import {
 } from '@/components/ui/sidebar'
 import { Skeleton } from '@/components/ui/skeleton'
 import type { SessionInfo } from '@/hermes'
-import { Brain, ChevronDown, Layers3, MessageCircle, Plus, RefreshCw } from '@/lib/icons'
 import { cn } from '@/lib/utils'
 import {
   $pinnedSessionIds,
+  $sidebarAgentsGrouped,
   $sidebarOpen,
   $sidebarPinsOpen,
   $sidebarRecentsOpen,
   pinSession,
+  reorderPinnedSession,
+  setSidebarAgentsGrouped,
   setSidebarPinsOpen,
   setSidebarRecentsOpen,
+  SIDEBAR_SESSIONS_PAGE_SIZE,
   unpinSession
 } from '@/store/layout'
-import { $selectedStoredSessionId, $sessions, $sessionsLoading, $workingSessionIds } from '@/store/session'
+import {
+  $selectedStoredSessionId,
+  $sessions,
+  $sessionsLoading,
+  $sessionsTotal,
+  $workingSessionIds
+} from '@/store/session'
 
 import { type AppView, ARTIFACTS_ROUTE, MESSAGING_ROUTE, SKILLS_ROUTE } from '../../routes'
 import { SidebarPanelLabel } from '../../shell/sidebar-label'
 import type { SidebarNavItem } from '../../types'
 
 import { SidebarSessionRow } from './session-row'
+import { VirtualSessionList } from './virtual-session-list'
+
+const VIRTUALIZE_THRESHOLD = 25
 
 const SIDEBAR_NAV: SidebarNavItem[] = [
-  {
-    id: 'new-session',
-    label: 'New chat',
-    icon: Plus,
-    action: 'new-session'
-  },
-  { id: 'skills', label: 'Skills', icon: Brain, route: SKILLS_ROUTE },
-  { id: 'messaging', label: 'Messaging', icon: MessageCircle, route: MESSAGING_ROUTE },
-  { id: 'artifacts', label: 'Artifacts', icon: Layers3, route: ARTIFACTS_ROUTE }
+  { id: 'new-session', label: 'New agent', icon: props => <Codicon name="robot" {...props} />, action: 'new-session' },
+  { id: 'skills', label: 'Skills', icon: props => <Codicon name="symbol-misc" {...props} />, route: SKILLS_ROUTE },
+  { id: 'messaging', label: 'Messaging', icon: props => <Codicon name="comment" {...props} />, route: MESSAGING_ROUTE },
+  { id: 'artifacts', label: 'Artifacts', icon: props => <Codicon name="files" {...props} />, route: ARTIFACTS_ROUTE }
 ]
 
+const WORKSPACE_PAGE = 5
+const WS_ID_PREFIX = 'workspace:'
+
+const wsId = (id: string) => `${WS_ID_PREFIX}${id}`
+const parseWsId = (id: string) => (id.startsWith(WS_ID_PREFIX) ? id.slice(WS_ID_PREFIX.length) : null)
+const countLabel = (loaded: number, total: number) => (total > loaded ? `${loaded}/${total}` : String(loaded))
+const sessionTime = (s: SessionInfo) => s.last_active || s.started_at || 0
+
+function orderByIds<T>(items: T[], getId: (item: T) => string, orderIds: string[]): T[] {
+  if (!orderIds.length) {
+    return items
+  }
+
+  const byId = new Map(items.map(item => [getId(item), item]))
+  const seen = new Set<string>()
+  const out: T[] = []
+
+  for (const id of orderIds) {
+    const item = byId.get(id)
+
+    if (item) {
+      out.push(item)
+      seen.add(id)
+    }
+  }
+
+  for (const item of items) {
+    if (!seen.has(getId(item))) {
+      out.push(item)
+    }
+  }
+
+  return out
+}
+
+const baseName = (path: string) =>
+  path
+    .replace(/[/\\]+$/, '')
+    .split(/[/\\]/)
+    .filter(Boolean)
+    .pop()
+
+function workspaceGroupsFor(sessions: SessionInfo[]): SidebarSessionGroup[] {
+  const groups = new Map<string, SidebarSessionGroup>()
+
+  for (const session of sessions) {
+    const path = session.cwd?.trim() || ''
+    const id = path || '__no_workspace__'
+    const label = baseName(path) || path || 'No workspace'
+
+    const group = groups.get(id) ?? { id, label, path: path || null, sessions: [] }
+    group.sessions.push(session)
+    groups.set(id, group)
+  }
+
+  return [...groups.values()]
+}
+
+function useSortableBindings(id: string) {
+  const { attributes, isDragging, listeners, setNodeRef, transform, transition } = useSortable({ id })
+
+  return {
+    dragging: isDragging,
+    dragHandleProps: { ...attributes, ...listeners },
+    ref: setNodeRef,
+    reorderable: true as const,
+    style: { transform: CSS.Transform.toString(transform), transition }
+  }
+}
+
 interface ChatSidebarProps extends React.ComponentProps<typeof Sidebar> {
   currentView: AppView
   onNavigate: (item: SidebarNavItem) => void
-  onRefreshSessions: () => void
+  onLoadMoreSessions: () => void
   onResumeSession: (sessionId: string) => void
   onDeleteSession: (sessionId: string) => void
 }
@@ -57,58 +154,131 @@ interface ChatSidebarProps extends React.ComponentProps<typeof Sidebar> {
 export function ChatSidebar({
   currentView,
   onNavigate,
-  onRefreshSessions,
+  onLoadMoreSessions,
   onResumeSession,
   onDeleteSession
 }: ChatSidebarProps) {
   const sidebarOpen = useStore($sidebarOpen)
+  const agentsGrouped = useStore($sidebarAgentsGrouped)
   const pinnedSessionIds = useStore($pinnedSessionIds)
   const pinsOpen = useStore($sidebarPinsOpen)
-  const recentsOpen = useStore($sidebarRecentsOpen)
+  const agentsOpen = useStore($sidebarRecentsOpen)
   const selectedSessionId = useStore($selectedStoredSessionId)
-  const activeSidebarSessionId = currentView === 'chat' ? selectedSessionId : null
   const sessions = useStore($sessions)
   const sessionsLoading = useStore($sessionsLoading)
+  const sessionsTotal = useStore($sessionsTotal)
   const workingSessionIds = useStore($workingSessionIds)
+  const [agentOrderIds, setAgentOrderIds] = useState<string[]>([])
+  const [workspaceOrderIds, setWorkspaceOrderIds] = useState<string[]>([])
 
-  const sortedSessions = useMemo(
-    () =>
-      [...sessions].sort((a, b) => {
-        const aTime = a.last_active || a.started_at || 0
-        const bTime = b.last_active || b.started_at || 0
+  const activeSidebarSessionId = currentView === 'chat' ? selectedSessionId : null
 
-        return bTime - aTime
-      }),
-    [sessions]
+  const dndSensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
   )
 
-  const sessionsById = useMemo(() => new Map(sessions.map(session => [session.id, session])), [sessions])
+  const sortedSessions = useMemo(() => [...sessions].sort((a, b) => sessionTime(b) - sessionTime(a)), [sessions])
+
+  const sessionsById = useMemo(() => new Map(sessions.map(s => [s.id, s])), [sessions])
   const workingSessionIdSet = useMemo(() => new Set(workingSessionIds), [workingSessionIds])
-  const visiblePinnedIds = pinnedSessionIds.filter(id => sessionsById.has(id))
-  const visiblePinnedIdSet = new Set(visiblePinnedIds)
 
-  const pinnedSessions = visiblePinnedIds
-    .map(id => sessionsById.get(id))
-    .filter((session): session is SessionInfo => Boolean(session))
+  const visiblePinnedIds = useMemo(
+    () => pinnedSessionIds.filter(id => sessionsById.has(id)),
+    [pinnedSessionIds, sessionsById]
+  )
 
-  const recentSessions = sortedSessions.filter(session => !visiblePinnedIdSet.has(session.id))
+  const visiblePinnedIdSet = useMemo(() => new Set(visiblePinnedIds), [visiblePinnedIds])
+
+  const pinnedSessions = useMemo(
+    () => visiblePinnedIds.map(id => sessionsById.get(id)!).filter(Boolean),
+    [visiblePinnedIds, sessionsById]
+  )
+
+  const unpinnedAgentSessions = useMemo(
+    () => sortedSessions.filter(s => !visiblePinnedIdSet.has(s.id)),
+    [sortedSessions, visiblePinnedIdSet]
+  )
+
+  const agentSessions = useMemo(
+    () => orderByIds(unpinnedAgentSessions, s => s.id, agentOrderIds),
+    [unpinnedAgentSessions, agentOrderIds]
+  )
+
+  const agentGroups = useMemo(
+    () => orderByIds(workspaceGroupsFor(agentSessions), g => g.id, workspaceOrderIds),
+    [agentSessions, workspaceOrderIds]
+  )
 
   const showSessionSkeletons = sessionsLoading && sortedSessions.length === 0
   const showSessionSections = showSessionSkeletons || sortedSessions.length > 0
+  const knownSessionTotal = Math.max(sessionsTotal, sortedSessions.length)
+  const hasMoreSessions = knownSessionTotal > sortedSessions.length
+  const remainingSessionCount = Math.max(0, knownSessionTotal - sortedSessions.length)
+
+  const handlePinnedDragEnd = ({ active, over }: DragEndEvent) => {
+    if (!over || active.id === over.id) {
+      return
+    }
+
+    const newIndex = pinnedSessions.findIndex(s => s.id === String(over.id))
+
+    if (newIndex < 0) {
+      return
+    }
+
+    reorderPinnedSession(String(active.id), newIndex)
+  }
+
+  const handleAgentDragEnd = ({ active, over }: DragEndEvent) => {
+    if (!over || active.id === over.id) {
+      return
+    }
+
+    const activeId = String(active.id)
+    const overId = String(over.id)
+    const activeWs = parseWsId(activeId)
+    const overWs = parseWsId(overId)
+
+    if (activeWs && overWs) {
+      const oldIdx = agentGroups.findIndex(g => g.id === activeWs)
+      const newIdx = agentGroups.findIndex(g => g.id === overWs)
+
+      if (oldIdx < 0 || newIdx < 0) {
+        return
+      }
+
+      setWorkspaceOrderIds(arrayMove(agentGroups, oldIdx, newIdx).map(g => g.id))
+
+      return
+    }
+
+    if (activeWs || overWs) {
+      return
+    }
+
+    const oldIdx = agentSessions.findIndex(s => s.id === activeId)
+    const newIdx = agentSessions.findIndex(s => s.id === overId)
+
+    if (oldIdx < 0 || newIdx < 0) {
+      return
+    }
+
+    setAgentOrderIds(arrayMove(agentSessions, oldIdx, newIdx).map(s => s.id))
+  }
 
   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 [backdrop-filter:blur(1.5rem)_saturate(1.08)]',
+        'relative h-full min-w-0 overflow-hidden border-r border-t-0 border-b-0 border-l-0 text-foreground transition-none',
         sidebarOpen
-          ? 'border-(--sidebar-edge-border) bg-[color-mix(in_srgb,var(--dt-sidebar-bg)_97%,transparent)] opacity-100'
+          ? 'border-(--sidebar-edge-border) bg-(--ui-sidebar-surface-background) opacity-100'
           : 'pointer-events-none border-transparent bg-transparent opacity-0'
       )}
       collapsible="none"
     >
-      <SidebarContent className="gap-0 overflow-hidden bg-transparent px-(--sidebar-content-inline-padding)">
-        <SidebarGroup className="shrink-0 p-0 pb-2 pt-[calc(var(--titlebar-height)+0.25rem)]">
-          <SidebarPanelLabel className="pb-1 pt-1">Workspace</SidebarPanelLabel>
+      <SidebarContent className="gap-0 overflow-hidden bg-transparent px-2.5">
+        <SidebarGroup className="shrink-0 p-0 pb-2 pt-[calc(var(--titlebar-height)+0.375rem)]">
           <SidebarGroupContent>
             <SidebarMenu className="gap-px">
               {SIDEBAR_NAV.map(item => {
@@ -124,9 +294,9 @@ export function ChatSidebar({
                     <SidebarMenuButton
                       aria-disabled={!isInteractive}
                       className={cn(
-                        'flex h-7 w-full justify-start gap-2 rounded-md border border-transparent px-2 text-left text-sm font-medium text-sidebar-foreground/78 transition-colors duration-300 ease-out hover:border-[color-mix(in_srgb,var(--dt-border)_60%,transparent)] hover:bg-(--chrome-action-hover) hover:text-foreground hover:transition-none',
+                        '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',
                         active &&
-                          'border-[color-mix(in_srgb,var(--dt-midground)_34%,var(--dt-border))] bg-[color-mix(in_srgb,var(--dt-midground)_10%,var(--dt-card))] text-foreground shadow-[inset_0_0.0625rem_0_color-mix(in_srgb,white_40%,transparent)] hover:border-[color-mix(in_srgb,var(--dt-midground)_34%,var(--dt-border))]!',
+                          'border-(--ui-stroke-tertiary) bg-(--ui-control-active-background) text-foreground shadow-none hover:border-(--ui-stroke-tertiary)!',
                         !isInteractive &&
                           'cursor-default hover:border-transparent hover:bg-transparent hover:text-inherit'
                       )}
@@ -135,7 +305,14 @@ export function ChatSidebar({
                       type="button"
                     >
                       <item.icon className="size-4 shrink-0 text-[color-mix(in_srgb,currentColor_72%,transparent)]" />
-                      {sidebarOpen && <span className="max-[46.25rem]:hidden">{item.label}</span>}
+                      {sidebarOpen && (
+                        <>
+                          <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={['⇧', 'N']} />
+                          )}
+                        </>
+                      )}
                     </SidebarMenuButton>
                   </SidebarMenuItem>
                 )
@@ -145,102 +322,103 @@ export function ChatSidebar({
         </SidebarGroup>
 
         {sidebarOpen && showSessionSections && (
-          <SidebarGroup className="shrink-0 p-0 pb-1">
-            <SidebarSectionHeader label="Pinned" onToggle={() => setSidebarPinsOpen(!pinsOpen)} open={pinsOpen} />
-            {pinsOpen && (
-              <SidebarGroupContent className="flex min-h-10 shrink-0 flex-col gap-px rounded-lg pb-2 pt-1">
-                {pinnedSessions.length === 0 && (
-                  <div className="italic flex min-h-7 items-center gap-2 rounded-lg pl-2 text-xs text-muted-foreground/80">
-                    <span>Shift click to pin a chat</span>
-                  </div>
-                )}
-                {pinnedSessions.map(session => (
-                  <SidebarSessionRow
-                    isPinned
-                    isSelected={session.id === activeSidebarSessionId}
-                    isWorking={workingSessionIdSet.has(session.id)}
-                    key={session.id}
-                    onDelete={() => onDeleteSession(session.id)}
-                    onPin={() => unpinSession(session.id)}
-                    onResume={() => onResumeSession(session.id)}
-                    session={session}
-                  />
-                ))}
-              </SidebarGroupContent>
-            )}
-          </SidebarGroup>
+          <SidebarSessionsSection
+            activeSessionId={activeSidebarSessionId}
+            contentClassName="flex min-h-10 shrink-0 flex-col gap-px rounded-lg pb-2 pt-1"
+            dndSensors={dndSensors}
+            emptyState={<SidebarPinnedEmptyState />}
+            label="Pinned"
+            onDeleteSession={onDeleteSession}
+            onReorder={handlePinnedDragEnd}
+            onResumeSession={onResumeSession}
+            onToggle={() => setSidebarPinsOpen(!pinsOpen)}
+            onTogglePin={unpinSession}
+            open={pinsOpen}
+            pinned
+            rootClassName="shrink-0 p-0 pb-1"
+            sessions={pinnedSessions}
+            sortable={pinnedSessions.length > 1}
+            workingSessionIdSet={workingSessionIdSet}
+          />
         )}
 
         {sidebarOpen && showSessionSections && (
-          <SidebarGroup className="min-h-0 flex-1 p-0">
-            <SidebarSectionHeader
-              action={
-                <Button
-                  aria-label={sessionsLoading ? 'Refreshing sessions' : 'Refresh sessions'}
-                  className="size-4 rounded-sm p-0 text-muted-foreground opacity-10 hover:bg-accent hover:text-foreground hover:opacity-100 focus-visible:opacity-100 disabled:opacity-35 [&_svg]:size-3!"
-                  disabled={sessionsLoading}
-                  onClick={event => {
-                    event.stopPropagation()
-                    setSidebarRecentsOpen(true)
-                    onRefreshSessions()
-                  }}
-                  size="icon-xs"
-                  variant="ghost"
-                >
-                  <RefreshCw className={cn(sessionsLoading && 'animate-spin')} />
-                </Button>
-              }
-              label="Recent chats"
-              onToggle={() => setSidebarRecentsOpen(!recentsOpen)}
-              open={recentsOpen}
-            />
-
-            {recentsOpen && (
-              <SidebarGroupContent className="flex min-h-0 flex-1 flex-col gap-px overflow-y-auto overscroll-contain pb-1.75">
-                {showSessionSkeletons && <SidebarSessionSkeletons />}
-                {!showSessionSkeletons && recentSessions.length === 0 && <SidebarAllPinnedState />}
-                {recentSessions.map(session => (
-                  <SidebarSessionRow
-                    isPinned={false}
-                    isSelected={session.id === activeSidebarSessionId}
-                    isWorking={workingSessionIdSet.has(session.id)}
-                    key={session.id}
-                    onDelete={() => onDeleteSession(session.id)}
-                    onPin={() => pinSession(session.id)}
-                    onResume={() => onResumeSession(session.id)}
-                    session={session}
-                  />
-                ))}
-              </SidebarGroupContent>
-            )}
-          </SidebarGroup>
+          <SidebarSessionsSection
+            activeSessionId={activeSidebarSessionId}
+            contentClassName="flex min-h-0 flex-1 flex-col gap-px overflow-y-auto overscroll-contain pb-1.75"
+            dndSensors={dndSensors}
+            emptyState={showSessionSkeletons ? <SidebarSessionSkeletons /> : <SidebarAllPinnedState />}
+            footer={
+              !agentsGrouped && !showSessionSkeletons && hasMoreSessions ? (
+                <SidebarLoadMoreRow
+                  loading={sessionsLoading}
+                  onClick={onLoadMoreSessions}
+                  step={Math.min(SIDEBAR_SESSIONS_PAGE_SIZE, remainingSessionCount)}
+                />
+              ) : null
+            }
+            forceEmptyState={showSessionSkeletons}
+            groups={agentsGrouped ? agentGroups : undefined}
+            headerAction={
+              <Button
+                aria-label={agentsGrouped ? 'Show agents as a single list' : 'Group agents by workspace'}
+                className={cn(
+                  'cursor-pointer text-(--ui-text-tertiary) opacity-0 hover:bg-(--ui-control-hover-background) hover:text-foreground hover:opacity-100 focus-visible:opacity-100 group-hover/section:opacity-100',
+                  agentsGrouped && 'bg-(--ui-control-active-background) text-foreground opacity-100'
+                )}
+                onClick={event => {
+                  event.stopPropagation()
+                  setSidebarRecentsOpen(true)
+                  setSidebarAgentsGrouped(!agentsGrouped)
+                }}
+                size="icon-xs"
+                title={agentsGrouped ? 'Ungroup agents' : 'Group by workspace'}
+                variant="ghost"
+              >
+                <Codicon name={agentsGrouped ? 'list-unordered' : 'root-folder'} size="0.75rem" />
+              </Button>
+            }
+            label="Agents"
+            labelMeta={countLabel(agentSessions.length, knownSessionTotal)}
+            onDeleteSession={onDeleteSession}
+            onReorder={handleAgentDragEnd}
+            onResumeSession={onResumeSession}
+            onToggle={() => setSidebarRecentsOpen(!agentsOpen)}
+            onTogglePin={pinSession}
+            open={agentsOpen}
+            pinned={false}
+            rootClassName="min-h-0 flex-1 p-0"
+            sessions={agentSessions}
+            sortable={agentSessions.length > 1}
+            workingSessionIdSet={workingSessionIdSet}
+          />
         )}
       </SidebarContent>
     </Sidebar>
   )
 }
 
-interface SidebarSectionHeaderProps extends React.ComponentProps<'div'> {
+interface SidebarSectionHeaderProps {
   label: string
   open: boolean
   onToggle: () => void
   action?: React.ReactNode
+  meta?: React.ReactNode
 }
 
-function SidebarSectionHeader({ label, open, onToggle, action }: SidebarSectionHeaderProps) {
+function SidebarSectionHeader({ label, open, onToggle, action, meta }: SidebarSectionHeaderProps) {
   return (
-    <div className="flex shrink-0 items-center justify-between pb-1 pt-1.5">
+    <div className="group/section flex shrink-0 items-center justify-between pb-1 pt-1.5">
       <button
-        className="group/section-label flex w-fit items-center gap-2 bg-transparent text-left leading-none"
+        className="group/section-label flex w-fit cursor-pointer items-center gap-1 bg-transparent text-left leading-none"
         onClick={onToggle}
         type="button"
       >
         <SidebarPanelLabel>{label}</SidebarPanelLabel>
-        <ChevronDown
-          className={cn(
-            'size-3 text-muted-foreground/70 opacity-0 transition group-hover/section-label:opacity-100',
-            !open && '-rotate-90'
-          )}
+        {meta && <SidebarCount>{meta}</SidebarCount>}
+        <DisclosureCaret
+          className="text-(--ui-text-tertiary) opacity-0 transition group-hover/section-label:opacity-100"
+          open={open}
         />
       </button>
       {action}
@@ -262,7 +440,295 @@ function SidebarSessionSkeletons() {
 }
 
 const SidebarAllPinnedState = () => (
-  <div className="grid min-h-24 place-items-center rounded-lg text-center text-xs text-muted-foreground">
+  <div className="grid min-h-24 place-items-center rounded-lg text-center text-xs text-(--ui-text-tertiary)">
     Everything here is pinned. Unpin a chat to show it in recents.
   </div>
 )
+
+function SidebarPinnedEmptyState() {
+  return (
+    <div className="flex min-h-7 items-center gap-1.5 rounded-lg pl-2 text-[0.75rem] text-(--ui-text-tertiary)">
+      <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 to pin a chat</span>
+    </div>
+  )
+}
+
+interface SidebarSessionGroup {
+  id: string
+  label: string
+  path: null | string
+  sessions: SessionInfo[]
+}
+
+interface SidebarSessionsSectionProps {
+  label: string
+  open: boolean
+  onToggle: () => void
+  sessions: SessionInfo[]
+  activeSessionId: null | string
+  workingSessionIdSet: Set<string>
+  onResumeSession: (sessionId: string) => void
+  onDeleteSession: (sessionId: string) => void
+  onTogglePin: (sessionId: string) => void
+  pinned: boolean
+  rootClassName?: string
+  contentClassName?: string
+  emptyState: React.ReactNode
+  forceEmptyState?: boolean
+  headerAction?: React.ReactNode
+  footer?: React.ReactNode
+  groups?: SidebarSessionGroup[]
+  labelMeta?: React.ReactNode
+  sortable?: boolean
+  onReorder?: (event: DragEndEvent) => void
+  dndSensors?: ReturnType<typeof useSensors>
+}
+
+function SidebarSessionsSection({
+  label,
+  open,
+  onToggle,
+  sessions,
+  activeSessionId,
+  workingSessionIdSet,
+  onResumeSession,
+  onDeleteSession,
+  onTogglePin,
+  pinned,
+  rootClassName,
+  contentClassName,
+  emptyState,
+  forceEmptyState = false,
+  headerAction,
+  footer,
+  groups,
+  labelMeta,
+  sortable = false,
+  onReorder,
+  dndSensors
+}: SidebarSessionsSectionProps) {
+  const showEmptyState = forceEmptyState || sessions.length === 0
+  const dndActive = sortable && !!onReorder
+
+  const renderRow = (session: SessionInfo) => {
+    const rowProps = {
+      isPinned: pinned,
+      isSelected: session.id === activeSessionId,
+      isWorking: workingSessionIdSet.has(session.id),
+      onDelete: () => onDeleteSession(session.id),
+      onPin: () => onTogglePin(session.id),
+      onResume: () => onResumeSession(session.id),
+      session
+    }
+
+    return sortable ? (
+      <SortableSidebarSessionRow key={session.id} {...rowProps} />
+    ) : (
+      <SidebarSessionRow key={session.id} {...rowProps} />
+    )
+  }
+
+  const renderRows = (items: SessionInfo[]) => items.map(renderRow)
+
+  const renderSessionList = (items: SessionInfo[]) =>
+    dndActive ? (
+      <SortableContext items={items.map(s => s.id)} strategy={verticalListSortingStrategy}>
+        {renderRows(items)}
+      </SortableContext>
+    ) : (
+      renderRows(items)
+    )
+
+  const flatVirtualized = !showEmptyState && !groups?.length && sessions.length >= VIRTUALIZE_THRESHOLD
+
+  let inner: React.ReactNode
+
+  if (showEmptyState) {
+    inner = emptyState
+  } else if (groups?.length) {
+    const groupNodes = groups.map(group =>
+      dndActive ? (
+        <SortableSidebarWorkspaceGroup group={group} key={group.id} renderRows={renderSessionList} />
+      ) : (
+        <SidebarWorkspaceGroup group={group} key={group.id} renderRows={renderSessionList} />
+      )
+    )
+
+    inner = dndActive ? (
+      <SortableContext items={groups.map(g => wsId(g.id))} strategy={verticalListSortingStrategy}>
+        {groupNodes}
+      </SortableContext>
+    ) : (
+      groupNodes
+    )
+  } else if (flatVirtualized) {
+    inner = (
+      <VirtualSessionList
+        activeSessionId={activeSessionId}
+        onDeleteSession={onDeleteSession}
+        onResumeSession={onResumeSession}
+        onTogglePin={onTogglePin}
+        pinned={pinned}
+        sessions={sessions}
+        sortable={sortable}
+        workingSessionIdSet={workingSessionIdSet}
+      />
+    )
+  } else {
+    inner = renderSessionList(sessions)
+  }
+
+  const body =
+    dndActive && !showEmptyState ? (
+      <DndContext collisionDetection={closestCenter} onDragEnd={onReorder} sensors={dndSensors}>
+        {inner}
+      </DndContext>
+    ) : (
+      inner
+    )
+
+  // The virtualizer owns its own scroller, so suppress the wrapper's overflow
+  // to avoid a double scroll container.
+  const resolvedContentClassName = cn(contentClassName, flatVirtualized && 'overflow-y-visible')
+
+  return (
+    <SidebarGroup className={rootClassName}>
+      <SidebarSectionHeader action={headerAction} label={label} meta={labelMeta} onToggle={onToggle} open={open} />
+      {open && (
+        <SidebarGroupContent className={resolvedContentClassName}>
+          {body}
+          {footer}
+        </SidebarGroupContent>
+      )}
+    </SidebarGroup>
+  )
+}
+
+interface SidebarWorkspaceGroupProps extends React.ComponentProps<'div'> {
+  group: SidebarSessionGroup
+  renderRows: (sessions: SessionInfo[]) => React.ReactNode
+  reorderable?: boolean
+  dragging?: boolean
+  dragHandleProps?: React.HTMLAttributes<HTMLElement>
+}
+
+function SidebarWorkspaceGroup({
+  group,
+  renderRows,
+  reorderable = false,
+  dragging = false,
+  dragHandleProps,
+  className,
+  style,
+  ref,
+  ...rest
+}: SidebarWorkspaceGroupProps) {
+  const [open, setOpen] = useState(true)
+  const [visibleCount, setVisibleCount] = useState(WORKSPACE_PAGE)
+  const visibleSessions = group.sessions.slice(0, visibleCount)
+  const hiddenCount = Math.max(0, group.sessions.length - visibleSessions.length)
+  const nextCount = Math.min(WORKSPACE_PAGE, hiddenCount)
+
+  return (
+    <div className={cn('grid gap-px', dragging && 'z-10 opacity-60', className)} ref={ref} style={style} {...rest}>
+      <button
+        className="group/workspace flex min-h-6 cursor-pointer items-center gap-1 px-2 pt-1 text-left text-[0.6875rem] font-medium text-(--ui-text-tertiary) hover:text-(--ui-text-secondary)"
+        onClick={() => setOpen(value => !value)}
+        title={group.path ?? undefined}
+        type="button"
+      >
+        <span className="truncate">{group.label}</span>
+        <SidebarCount>{group.sessions.length}</SidebarCount>
+        <DisclosureCaret
+          className="text-(--ui-text-tertiary) opacity-0 transition group-hover/workspace:opacity-100"
+          open={open}
+        />
+        {reorderable && (
+          <span
+            {...dragHandleProps}
+            aria-label={`Reorder workspace ${group.label}`}
+            className="ml-auto -my-0.5 grid w-4 shrink-0 cursor-grab touch-none place-items-center self-stretch overflow-hidden active:cursor-grabbing"
+            onClick={event => event.stopPropagation()}
+          >
+            <Codicon
+              className={cn(
+                'text-(--ui-text-quaternary) opacity-0 transition-opacity group-hover/workspace:opacity-80 hover:text-(--ui-text-secondary)',
+                dragging && 'text-(--ui-text-secondary) opacity-100'
+              )}
+              name="grabber"
+              size="0.75rem"
+            />
+          </span>
+        )}
+      </button>
+      {open && (
+        <>
+          {renderRows(visibleSessions)}
+          {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"
+              onClick={() => setVisibleCount(count => count + WORKSPACE_PAGE)}
+              title={`Show ${nextCount} more in ${group.label}`}
+              type="button"
+            >
+              <Codicon name="ellipsis" size="0.75rem" />
+            </button>
+          )}
+        </>
+      )}
+    </div>
+  )
+}
+
+interface SortableWorkspaceProps {
+  group: SidebarSessionGroup
+  renderRows: (sessions: SessionInfo[]) => React.ReactNode
+}
+
+function SortableSidebarWorkspaceGroup(props: SortableWorkspaceProps) {
+  return <SidebarWorkspaceGroup {...props} {...useSortableBindings(wsId(props.group.id))} />
+}
+
+function SidebarCount({ children }: { children: React.ReactNode }) {
+  return <span className="text-[0.6875rem] font-medium text-(--ui-text-quaternary)">{children}</span>
+}
+
+interface SortableSessionRowProps {
+  session: SessionInfo
+  isPinned: boolean
+  isSelected: boolean
+  isWorking: boolean
+  onDelete: () => void
+  onPin: () => void
+  onResume: () => void
+}
+
+function SortableSidebarSessionRow(props: SortableSessionRowProps) {
+  return <SidebarSessionRow {...props} {...useSortableBindings(props.session.id)} />
+}
+
+interface SidebarLoadMoreRowProps {
+  loading: boolean
+  onClick: () => void
+  step: number
+}
+
+function SidebarLoadMoreRow({ loading, onClick, step }: SidebarLoadMoreRowProps) {
+  const label = loading ? 'Loading…' : step > 0 ? `Load ${step} more` : 'Load more'
+
+  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)"
+      disabled={loading}
+      onClick={onClick}
+      type="button"
+    >
+      <Codicon className="opacity-70" name={loading ? 'loading' : 'chevron-down'} size="0.75rem" spinning={loading} />
+      <span>{label}</span>
+    </button>
+  )
+}
diff --git a/apps/desktop/src/app/chat/sidebar/session-actions-menu.tsx b/apps/desktop/src/app/chat/sidebar/session-actions-menu.tsx
index 5c58e1b10f6..65f8d8bf4ee 100644
--- a/apps/desktop/src/app/chat/sidebar/session-actions-menu.tsx
+++ b/apps/desktop/src/app/chat/sidebar/session-actions-menu.tsx
@@ -1,10 +1,10 @@
-import { IconBookmark, IconBookmarkFilled, IconCircleX, IconFileDownload, IconPencil } from '@tabler/icons-react'
-import { useEffect, useRef, useState } from 'react'
 import type * as React from 'react'
-import type { ReactNode } from 'react'
+import { useEffect, useRef, useState } from 'react'
 
 import { Button } from '@/components/ui/button'
-import { CopyButton } from '@/components/ui/copy-button'
+import { Codicon } from '@/components/ui/codicon'
+import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from '@/components/ui/context-menu'
+import { writeClipboardText } from '@/components/ui/copy-button'
 import {
   Dialog,
   DialogContent,
@@ -13,111 +13,144 @@ import {
   DialogHeader,
   DialogTitle
 } from '@/components/ui/dialog'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger
-} from '@/components/ui/dropdown-menu'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
 import { Input } from '@/components/ui/input'
 import { renameSession } from '@/hermes'
 import { triggerHaptic } from '@/lib/haptics'
 import { exportSession } from '@/lib/session-export'
-import { cn } from '@/lib/utils'
 import { notify, notifyError } from '@/store/notifications'
 import { setSessions } from '@/store/session'
 
-interface SessionActionsMenuProps extends Pick<
-  React.ComponentProps<typeof DropdownMenuContent>,
-  'align' | 'sideOffset'
-> {
-  children: ReactNode
-  title: string
+interface SessionActions {
   sessionId: string
+  title: string
   pinned?: boolean
   onPin?: () => void
   onDelete?: () => void
 }
 
-export function SessionActionsMenu({
-  children,
-  title,
-  sessionId,
-  pinned = false,
-  onPin,
-  onDelete,
-  align = 'end',
-  sideOffset = 6
-}: SessionActionsMenuProps) {
+type MenuItem = typeof DropdownMenuItem | typeof ContextMenuItem
+
+interface ItemSpec {
+  className?: string
+  disabled: boolean
+  icon: string
+  label: string
+  onSelect: (event: Event) => void
+  variant?: 'destructive'
+}
+
+function useSessionActions({ sessionId, title, pinned = false, onPin, onDelete }: SessionActions) {
   const [renameOpen, setRenameOpen] = useState(false)
 
+  const items: ItemSpec[] = [
+    {
+      disabled: !onPin,
+      icon: 'pin',
+      label: pinned ? 'Unpin' : 'Pin',
+      onSelect: () => {
+        triggerHaptic('selection')
+        onPin?.()
+      }
+    },
+    {
+      disabled: !sessionId,
+      icon: 'copy',
+      label: 'Copy ID',
+      onSelect: event => {
+        event.preventDefault()
+        triggerHaptic('selection')
+        void writeClipboardText(sessionId).catch(err => notifyError(err, 'Could not copy session ID'))
+      }
+    },
+    {
+      disabled: !sessionId,
+      icon: 'cloud-download',
+      label: 'Export',
+      onSelect: () => {
+        triggerHaptic('selection')
+        void exportSession(sessionId, { title })
+      }
+    },
+    {
+      disabled: !sessionId,
+      icon: 'edit',
+      label: 'Rename',
+      onSelect: () => {
+        triggerHaptic('selection')
+        setRenameOpen(true)
+      }
+    },
+    {
+      className: 'text-destructive focus:text-destructive',
+      disabled: !onDelete,
+      icon: 'trash',
+      label: 'Delete',
+      onSelect: () => {
+        triggerHaptic('warning')
+        onDelete?.()
+      },
+      variant: 'destructive'
+    }
+  ]
+
+  const renderItems = (Item: MenuItem) =>
+    items.map(({ className, disabled, icon, label, onSelect, variant }) => (
+      <Item className={className} disabled={disabled} key={label} onSelect={onSelect} variant={variant}>
+        <Codicon name={icon} size="0.875rem" />
+        <span>{label}</span>
+      </Item>
+    ))
+
+  const renameDialog = (
+    <RenameSessionDialog currentTitle={title} onOpenChange={setRenameOpen} open={renameOpen} sessionId={sessionId} />
+  )
+
+  return { renameDialog, renderItems }
+}
+
+interface SessionActionsMenuProps
+  extends SessionActions, Pick<React.ComponentProps<typeof DropdownMenuContent>, 'align' | 'sideOffset'> {
+  children: React.ReactNode
+}
+
+export function SessionActionsMenu({ children, align = 'end', sideOffset = 6, ...actions }: SessionActionsMenuProps) {
+  const { renameDialog, renderItems } = useSessionActions(actions)
+
   return (
     <>
       <DropdownMenu>
         <DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
-        <DropdownMenuContent align={align} aria-label={`Actions for ${title}`} className="w-44" sideOffset={sideOffset}>
-          <DropdownMenuItem
-            className="gap-2.5 text-foreground focus:bg-accent [&_svg]:size-4"
-            disabled={!onPin}
-            onSelect={() => {
-              triggerHaptic('selection')
-              onPin?.()
-            }}
-          >
-            {pinned ? <IconBookmarkFilled /> : <IconBookmark />}
-            <span>{pinned ? 'Unpin' : 'Pin'}</span>
-          </DropdownMenuItem>
-          <CopyButton
-            appearance="menu-item"
-            className="gap-2.5 text-foreground focus:bg-accent [&_svg]:size-4"
-            disabled={!sessionId}
-            errorMessage="Could not copy session ID"
-            label="Copy ID"
-            text={sessionId}
-          />
-          <DropdownMenuItem
-            className="gap-2.5 text-foreground focus:bg-accent [&_svg]:size-4"
-            disabled={!sessionId}
-            onSelect={() => {
-              triggerHaptic('selection')
-              void exportSession(sessionId, { title })
-            }}
-          >
-            <IconFileDownload />
-            <span>Export</span>
-          </DropdownMenuItem>
-          <DropdownMenuItem
-            className="gap-2.5 text-foreground focus:bg-accent [&_svg]:size-4"
-            disabled={!sessionId}
-            onSelect={() => {
-              triggerHaptic('selection')
-              setRenameOpen(true)
-            }}
-          >
-            <IconPencil />
-            <span>Rename</span>
-          </DropdownMenuItem>
-          <DropdownMenuSeparator className="my-3" />
-          <DropdownMenuItem
-            className={cn(
-              'gap-2.5 text-foreground focus:bg-accent [&_svg]:size-4',
-              'text-destructive focus:text-destructive'
-            )}
-            disabled={!onDelete}
-            onSelect={() => {
-              triggerHaptic('warning')
-              onDelete?.()
-            }}
-            variant="destructive"
-          >
-            <IconCircleX />
-            <span>Delete</span>
-          </DropdownMenuItem>
+        <DropdownMenuContent
+          align={align}
+          aria-label={`Actions for ${actions.title}`}
+          className="w-40"
+          sideOffset={sideOffset}
+        >
+          {renderItems(DropdownMenuItem)}
         </DropdownMenuContent>
       </DropdownMenu>
+      {renameDialog}
+    </>
+  )
+}
 
-      <RenameSessionDialog currentTitle={title} onOpenChange={setRenameOpen} open={renameOpen} sessionId={sessionId} />
+interface SessionContextMenuProps extends SessionActions {
+  children: React.ReactNode
+}
+
+export function SessionContextMenu({ children, ...actions }: SessionContextMenuProps) {
+  const { renameDialog, renderItems } = useSessionActions(actions)
+
+  return (
+    <>
+      <ContextMenu>
+        <ContextMenuTrigger asChild>{children}</ContextMenuTrigger>
+        <ContextMenuContent aria-label={`Actions for ${actions.title}`} className="w-40">
+          {renderItems(ContextMenuItem)}
+        </ContextMenuContent>
+      </ContextMenu>
+      {renameDialog}
     </>
   )
 }
@@ -160,7 +193,7 @@ function RenameSessionDialog({ open, onOpenChange, sessionId, currentTitle }: Re
       const result = await renameSession(sessionId, next)
       const finalTitle = result.title || next || ''
       setSessions(prev => prev.map(s => (s.id === sessionId ? { ...s, title: finalTitle || null } : s)))
-      notify({ kind: 'success', message: 'Renamed', durationMs: 2_000 })
+      notify({ durationMs: 2_000, kind: 'success', message: 'Renamed' })
       onOpenChange(false)
     } catch (err) {
       notifyError(err, 'Rename failed')
diff --git a/apps/desktop/src/app/chat/sidebar/session-row.tsx b/apps/desktop/src/app/chat/sidebar/session-row.tsx
index dfd88d940ef..f4059cb0452 100644
--- a/apps/desktop/src/app/chat/sidebar/session-row.tsx
+++ b/apps/desktop/src/app/chat/sidebar/session-row.tsx
@@ -1,13 +1,13 @@
 import type * as React from 'react'
 
 import { Button } from '@/components/ui/button'
+import { Codicon } from '@/components/ui/codicon'
 import type { SessionInfo } from '@/hermes'
 import { sessionTitle } from '@/lib/chat-runtime'
 import { triggerHaptic } from '@/lib/haptics'
-import { MoreVertical } from '@/lib/icons'
 import { cn } from '@/lib/utils'
 
-import { SessionActionsMenu } from './session-actions-menu'
+import { SessionActionsMenu, SessionContextMenu } from './session-actions-menu'
 
 interface SidebarSessionRowProps extends React.ComponentProps<'div'> {
   session: SessionInfo
@@ -17,6 +17,27 @@ interface SidebarSessionRowProps extends React.ComponentProps<'div'> {
   onDelete: () => void
   onPin: () => void
   onResume: () => void
+  reorderable?: boolean
+  dragging?: boolean
+  dragHandleProps?: React.HTMLAttributes<HTMLElement>
+}
+
+const AGE_TICKS: ReadonlyArray<[number, string]> = [
+  [86_400_000, 'd'],
+  [3_600_000, 'h'],
+  [60_000, 'm']
+]
+
+function formatAge(seconds: number): string {
+  const delta = Math.max(0, Date.now() - seconds * 1000)
+
+  for (const [ms, suffix] of AGE_TICKS) {
+    if (delta >= ms) {
+      return `${Math.floor(delta / ms)}${suffix}`
+    }
+  }
+
+  return 'now'
 }
 
 export function SidebarSessionRow({
@@ -26,59 +47,115 @@ export function SidebarSessionRow({
   isWorking,
   onDelete,
   onPin,
-  onResume
+  onResume,
+  reorderable = false,
+  dragging = false,
+  dragHandleProps,
+  className,
+  style,
+  ref,
+  ...rest
 }: SidebarSessionRowProps) {
   const title = sessionTitle(session)
+  const age = formatAge(session.last_active || session.started_at)
+  const handleLabel = `Reorder ${title}`
 
   return (
-    <div
-      className={cn(
-        'group relative grid min-h-7 cursor-pointer grid-cols-[minmax(0,1fr)_1.5rem] items-center rounded-lg transition-colors duration-300 ease-out hover:bg-(--chrome-action-hover) hover:transition-none',
-        'after:pointer-events-none after:absolute after:inset-y-0 after:right-0 after:z-1 after:w-18 after:rounded-[inherit] after:bg-linear-to-r after:from-transparent after:via-[color-mix(in_srgb,var(--dt-sidebar-bg)_78%,transparent)] after:to-[color-mix(in_srgb,var(--dt-sidebar-bg)_96%,transparent)] after:opacity-0 after:transition-opacity after:duration-200 after:ease-out hover:after:opacity-100 focus-within:after:opacity-100',
-        isSelected && 'bg-accent',
-        isWorking && 'text-foreground'
-      )}
-      data-working={isWorking ? 'true' : undefined}
-    >
-      {isWorking && <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-1 pl-2 text-left"
-        onClick={event => {
-          if (event.shiftKey) {
-            event.preventDefault()
-            event.stopPropagation()
-            triggerHaptic('selection')
-            onPin()
-
-            return
-          }
-
-          onResume()
-        }}
-        type="button"
-      >
-        {isWorking && (
-          <span
-            aria-label="Session running"
-            className="relative size-1.5 shrink-0 rounded-full bg-midground shadow-[0_0_0.625rem_color-mix(in_srgb,var(--dt-midground)_65%,transparent)] before:absolute before:inset-0 before:rounded-full before:bg-midground before:opacity-75 before:content-[''] before:animate-ping"
-            role="status"
-          />
+    <SessionContextMenu onDelete={onDelete} onPin={onPin} pinned={isPinned} sessionId={session.id} title={title}>
+      <div
+        className={cn(
+          'group relative grid min-h-[1.625rem] cursor-pointer grid-cols-[minmax(0,1fr)_1.375rem] items-center rounded-md transition-colors duration-100 ease-out hover:bg-(--ui-row-hover-background) hover:transition-none',
+          isSelected && 'bg-(--ui-row-active-background)',
+          isWorking && 'text-foreground',
+          dragging && 'z-10 cursor-grabbing opacity-60 shadow-sm',
+          className
         )}
-        <span className="truncate text-sm font-medium text-foreground/90">{title}</span>
-      </button>
-      <div className="relative z-2 grid w-6 place-items-center">
-        <SessionActionsMenu onDelete={onDelete} onPin={onPin} pinned={isPinned} sessionId={session.id} title={title}>
-          <Button
-            aria-label={`Actions for ${title}`}
-            className="size-6 rounded-md bg-transparent text-transparent transition-colors duration-150 hover:bg-accent hover:text-foreground focus-visible:bg-accent focus-visible:text-foreground focus-visible:ring-0 data-[state=open]:bg-accent data-[state=open]:text-foreground group-hover:text-muted-foreground"
-            size="icon"
-            title="Session actions"
-            variant="ghost"
-          >
-            <MoreVertical size={15} />
-          </Button>
-        </SessionActionsMenu>
+        data-working={isWorking ? 'true' : undefined}
+        ref={ref}
+        style={style}
+        {...rest}
+      >
+        {isWorking && <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 => {
+            if (event.shiftKey) {
+              event.preventDefault()
+              event.stopPropagation()
+              triggerHaptic('selection')
+              onPin()
+
+              return
+            }
+
+            onResume()
+          }}
+          type="button"
+        >
+          {reorderable ? (
+            <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"
+              onClick={event => event.stopPropagation()}
+            >
+              <SidebarRowDot
+                className="transition-opacity group-hover:opacity-0 group-focus-within:opacity-0"
+                isWorking={isWorking}
+              />
+              <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)',
+                  dragging && 'text-(--ui-text-secondary) opacity-100'
+                )}
+                name="grabber"
+                size="0.75rem"
+              />
+            </span>
+          ) : (
+            <span className="grid w-3.5 shrink-0 place-items-center overflow-hidden">
+              <SidebarRowDot isWorking={isWorking} />
+            </span>
+          )}
+          <span className="truncate text-[0.8125rem] font-normal text-(--ui-text-secondary) group-hover:text-foreground group-data-[working=true]:text-foreground/90">
+            {title}
+          </span>
+        </button>
+        <div className="relative z-2 grid w-[1.375rem] place-items-center">
+          {!isWorking && (
+            <span className="pointer-events-none absolute right-6 top-1/2 min-w-6 -translate-y-1/2 text-right text-[0.625rem] leading-none text-(--ui-text-tertiary) opacity-0 transition-opacity group-hover:opacity-100">
+              {age}
+            </span>
+          )}
+          <SessionActionsMenu onDelete={onDelete} onPin={onPin} pinned={isPinned} sessionId={session.id} title={title}>
+            <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!"
+              size="icon"
+              title="Session actions"
+              variant="ghost"
+            >
+              <Codicon name="ellipsis" size="0.875rem" />
+            </Button>
+          </SessionActionsMenu>
+        </div>
       </div>
-    </div>
+    </SessionContextMenu>
+  )
+}
+
+function SidebarRowDot({ isWorking, className }: { isWorking: boolean; className?: string }) {
+  return (
+    <span
+      aria-label={isWorking ? 'Session running' : undefined}
+      className={cn(
+        'rounded-full',
+        isWorking
+          ? "relative size-1.5 bg-(--ui-accent) shadow-[0_0_0.625rem_color-mix(in_srgb,var(--ui-accent)_55%,transparent)] before:absolute before:inset-0 before:animate-ping before:rounded-full before:bg-(--ui-accent) before:opacity-70 before:content-['']"
+          : 'size-1 bg-(--ui-text-quaternary) opacity-80',
+        className
+      )}
+      role={isWorking ? 'status' : undefined}
+    />
   )
 }
diff --git a/apps/desktop/src/app/chat/sidebar/virtual-session-list.tsx b/apps/desktop/src/app/chat/sidebar/virtual-session-list.tsx
new file mode 100644
index 00000000000..7613c621736
--- /dev/null
+++ b/apps/desktop/src/app/chat/sidebar/virtual-session-list.tsx
@@ -0,0 +1,149 @@
+import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+import { useVirtualizer } from '@tanstack/react-virtual'
+import { type FC, useCallback, useMemo, useRef } from 'react'
+
+import type { SessionInfo } from '@/hermes'
+import { cn } from '@/lib/utils'
+
+import { SidebarSessionRow } from './session-row'
+
+interface SessionRowCommonProps {
+  isPinned: boolean
+  isSelected: boolean
+  isWorking: boolean
+  onDelete: () => void
+  onPin: () => void
+  onResume: () => void
+}
+
+interface VirtualSessionListProps {
+  activeSessionId: null | string
+  className?: string
+  onDeleteSession: (sessionId: string) => void
+  onResumeSession: (sessionId: string) => void
+  onTogglePin: (sessionId: string) => void
+  pinned: boolean
+  sessions: SessionInfo[]
+  sortable: boolean
+  workingSessionIdSet: Set<string>
+}
+
+const ROW_ESTIMATE_PX = 28
+const OVERSCAN_ROWS = 12
+
+export const VirtualSessionList: FC<VirtualSessionListProps> = ({
+  activeSessionId,
+  className,
+  onDeleteSession,
+  onResumeSession,
+  onTogglePin,
+  pinned,
+  sessions,
+  sortable,
+  workingSessionIdSet
+}) => {
+  const scrollerRef = useRef<HTMLDivElement | null>(null)
+  const ids = useMemo(() => sessions.map(s => s.id), [sessions])
+
+  const virtualizer = useVirtualizer({
+    count: sessions.length,
+    estimateSize: () => ROW_ESTIMATE_PX,
+    getItemKey: index => sessions[index]?.id ?? index,
+    getScrollElement: () => scrollerRef.current,
+    // jsdom-friendly default; the real rect takes over on first observe.
+    initialRect: { height: 600, width: 240 },
+    overscan: OVERSCAN_ROWS
+  })
+
+  const virtualItems = virtualizer.getVirtualItems()
+  const totalSize = virtualizer.getTotalSize()
+  const paddingTop = virtualItems[0]?.start ?? 0
+  const paddingBottom = Math.max(0, totalSize - (virtualItems[virtualItems.length - 1]?.end ?? 0))
+
+  const rows = virtualItems.map(virtualItem => {
+    const session = sessions[virtualItem.index]
+
+    if (!session) {
+      return null
+    }
+
+    const commonProps: SessionRowCommonProps = {
+      isPinned: pinned,
+      isSelected: session.id === activeSessionId,
+      isWorking: workingSessionIdSet.has(session.id),
+      onDelete: () => onDeleteSession(session.id),
+      onPin: () => onTogglePin(session.id),
+      onResume: () => onResumeSession(session.id)
+    }
+
+    return sortable ? (
+      <VirtualSortableRow
+        index={virtualItem.index}
+        key={session.id}
+        measureRef={virtualizer.measureElement}
+        rowProps={commonProps}
+        session={session}
+      />
+    ) : (
+      <SidebarSessionRow
+        {...commonProps}
+        data-index={virtualItem.index}
+        key={session.id}
+        ref={virtualizer.measureElement}
+        session={session}
+      />
+    )
+  })
+
+  const list = (
+    <div className={cn('relative min-h-0 flex-1 overflow-y-auto overscroll-contain', className)} ref={scrollerRef}>
+      <div className="grid gap-px" style={{ paddingBottom: `${paddingBottom}px`, paddingTop: `${paddingTop}px` }}>
+        {rows}
+      </div>
+    </div>
+  )
+
+  return sortable ? (
+    <SortableContext items={ids} strategy={verticalListSortingStrategy}>
+      {list}
+    </SortableContext>
+  ) : (
+    list
+  )
+}
+
+interface VirtualSortableRowProps {
+  index: number
+  measureRef: (node: Element | null) => void
+  rowProps: SessionRowCommonProps
+  session: SessionInfo
+}
+
+function VirtualSortableRow({ index, measureRef, rowProps, session }: VirtualSortableRowProps) {
+  const { attributes, isDragging, listeners, setNodeRef, transform, transition } = useSortable({ id: session.id })
+
+  // Merge dnd-kit's setNodeRef with the virtualizer's measureElement so
+  // the row participates in both DnD hit-testing and TanStack height
+  // measurement.
+  const refMerged = useCallback(
+    (node: HTMLDivElement | null) => {
+      setNodeRef(node)
+      measureRef(node)
+    },
+    [measureRef, setNodeRef]
+  )
+
+  return (
+    <SidebarSessionRow
+      {...rowProps}
+      data-index={index}
+      dragging={isDragging}
+      dragHandleProps={{ ...attributes, ...listeners }}
+      ref={refMerged}
+      reorderable
+      session={session}
+      style={{ transform: CSS.Transform.toString(transform), transition }}
+    />
+  )
+}
diff --git a/apps/desktop/src/app/command-center/index.tsx b/apps/desktop/src/app/command-center/index.tsx
index 30d09973aca..9e4e42ee61d 100644
--- a/apps/desktop/src/app/command-center/index.tsx
+++ b/apps/desktop/src/app/command-center/index.tsx
@@ -113,7 +113,7 @@ interface SectionSearchEntry {
 }
 
 const NAVIGATION_SEARCH_ENTRIES: readonly NavigationSearchEntry[] = [
-  { id: 'nav-new-chat', route: NEW_CHAT_ROUTE, title: 'New chat', detail: 'Start a fresh session' },
+  { id: 'nav-new-chat', route: NEW_CHAT_ROUTE, title: 'New agent', 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', detail: 'Enable and inspect skills' },
   {
@@ -365,31 +365,28 @@ export function CommandCenterView({
     }
   }, [])
 
-  const refreshUsage = useCallback(
-    async (days: UsagePeriod) => {
-      const requestId = usageRequestRef.current + 1
-      usageRequestRef.current = requestId
-      setUsageLoading(true)
-      setUsageError('')
+  const refreshUsage = useCallback(async (days: UsagePeriod) => {
+    const requestId = usageRequestRef.current + 1
+    usageRequestRef.current = requestId
+    setUsageLoading(true)
+    setUsageError('')
 
-      try {
-        const response = await getUsageAnalytics(days)
+    try {
+      const response = await getUsageAnalytics(days)
 
-        if (usageRequestRef.current === requestId) {
-          setUsage(response)
-        }
-      } catch (error) {
-        if (usageRequestRef.current === requestId) {
-          setUsageError(error instanceof Error ? error.message : String(error))
-        }
-      } finally {
-        if (usageRequestRef.current === requestId) {
-          setUsageLoading(false)
-        }
+      if (usageRequestRef.current === requestId) {
+        setUsage(response)
       }
-    },
-    []
-  )
+    } catch (error) {
+      if (usageRequestRef.current === requestId) {
+        setUsageError(error instanceof Error ? error.message : String(error))
+      }
+    } finally {
+      if (usageRequestRef.current === requestId) {
+        setUsageLoading(false)
+      }
+    }
+  }, [])
 
   useEffect(() => {
     if (!debouncedQuery) {
@@ -583,7 +580,10 @@ export function CommandCenterView({
   const beginAuxiliaryEdit = useCallback(
     (task: string) => {
       const current = auxiliary?.tasks.find(entry => entry.task === task)
-      const initialProvider = current?.provider && current.provider !== 'auto' ? current.provider : mainModel?.provider ?? ''
+
+      const initialProvider =
+        current?.provider && current.provider !== 'auto' ? current.provider : (mainModel?.provider ?? '')
+
       const initialModel = current?.model || mainModel?.model || ''
       setAuxDraft({ provider: initialProvider, model: initialModel })
       setEditingAuxTask(task)
@@ -658,15 +658,7 @@ export function CommandCenterView({
           {SECTIONS.map(value => (
             <OverlayNavItem
               active={section === value}
-              icon={
-                value === 'sessions'
-                  ? Pin
-                  : value === 'system'
-                    ? Activity
-                    : value === 'models'
-                      ? Cpu
-                      : BarChart3
-              }
+              icon={value === 'sessions' ? Pin : value === 'system' ? Activity : value === 'models' ? Cpu : BarChart3}
               key={value}
               label={SECTION_LABELS[value]}
               onClick={() => setSection(value)}
@@ -1168,7 +1160,7 @@ function UsagePanel({ error, loading, onPeriodChange, onRefresh, period, usage }
         ) : (
           <div className="text-xs text-muted-foreground">
             No usage in the last {period} days.{' '}
-            <button className="underline" onClick={onRefresh} type="button">
+            <button className="underline underline-offset-4 decoration-current/20" onClick={onRefresh} type="button">
               Retry
             </button>
           </div>
diff --git a/apps/desktop/src/app/cron/index.tsx b/apps/desktop/src/app/cron/index.tsx
index d3e156194b0..b5c1deb083b 100644
--- a/apps/desktop/src/app/cron/index.tsx
+++ b/apps/desktop/src/app/cron/index.tsx
@@ -3,6 +3,7 @@ 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 {
   Dialog,
   DialogContent,
@@ -24,13 +25,12 @@ import {
   triggerCronJob,
   updateCronJob
 } from '@/hermes'
-import { AlertTriangle, Clock, Pause, Pencil, Play, Plus, RefreshCw, Search, Trash2, X, Zap } from '@/lib/icons'
+import { AlertTriangle, Clock, Pause, Pencil, Play, Trash2, Zap } from '@/lib/icons'
 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 { titlebarHeaderBaseClass } from '../shell/titlebar'
-import type { SetTitlebarToolGroup } from '../shell/titlebar-controls'
 
 const DEFAULT_DELIVER = 'local'
 
@@ -216,11 +216,23 @@ function scheduleOptionForExpr(expr: string): ScheduleOption {
     return SCHEDULE_OPTIONS.find(option => option.value === 'weekdays') ?? SCHEDULE_OPTIONS[0]
   }
 
-  if (dayOfMonth === '*' && month === '*' && isIntegerToken(dayOfWeek) && isIntegerToken(minute) && isIntegerToken(hour)) {
+  if (
+    dayOfMonth === '*' &&
+    month === '*' &&
+    isIntegerToken(dayOfWeek) &&
+    isIntegerToken(minute) &&
+    isIntegerToken(hour)
+  ) {
     return SCHEDULE_OPTIONS.find(option => option.value === 'weekly') ?? SCHEDULE_OPTIONS[0]
   }
 
-  if (month === '*' && dayOfWeek === '*' && isIntegerToken(dayOfMonth) && isIntegerToken(minute) && isIntegerToken(hour)) {
+  if (
+    month === '*' &&
+    dayOfWeek === '*' &&
+    isIntegerToken(dayOfMonth) &&
+    isIntegerToken(minute) &&
+    isIntegerToken(hour)
+  ) {
     return SCHEDULE_OPTIONS.find(option => option.value === 'monthly') ?? SCHEDULE_OPTIONS[0]
   }
 
@@ -295,14 +307,9 @@ function matchesQuery(job: CronJob, q: string): boolean {
 
 interface CronViewProps extends React.ComponentProps<'section'> {
   setStatusbarItemGroup?: SetStatusbarItemGroup
-  setTitlebarToolGroup?: SetTitlebarToolGroup
 }
 
-export function CronView({
-  setStatusbarItemGroup: _setStatusbarItemGroup,
-  setTitlebarToolGroup,
-  ...props
-}: CronViewProps) {
+export function CronView({ setStatusbarItemGroup: _setStatusbarItemGroup, ...props }: CronViewProps) {
   const [jobs, setJobs] = useState<CronJob[] | null>(null)
   const [query, setQuery] = useState('')
   const [refreshing, setRefreshing] = useState(false)
@@ -329,24 +336,6 @@ export function CronView({
     void refresh()
   }, [refresh])
 
-  useEffect(() => {
-    if (!setTitlebarToolGroup) {
-      return
-    }
-
-    setTitlebarToolGroup('cron', [
-      {
-        disabled: refreshing,
-        icon: <RefreshCw className={cn(refreshing && 'animate-spin')} />,
-        id: 'refresh-cron',
-        label: refreshing ? 'Refreshing cron jobs' : 'Refresh cron jobs',
-        onSelect: () => void refresh()
-      }
-    ])
-
-    return () => setTitlebarToolGroup('cron', [])
-  }, [refresh, refreshing, setTitlebarToolGroup])
-
   const visibleJobs = useMemo(() => {
     if (!jobs) {
       return []
@@ -437,79 +426,65 @@ export function CronView({
   }
 
   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">Cron</h2>
-        <span className="pointer-events-auto text-xs text-muted-foreground">
-          {totalCount === 0 ? 'No scheduled jobs' : `${enabledCount}/${totalCount} active`}
-        </span>
-      </header>
-
-      <div className="min-h-0 flex-1 overflow-hidden rounded-b-[1.0625rem] border border-border/50 bg-background/85">
-        <div className="border-b border-border/50 px-4 py-3">
-          <div className="flex flex-wrap items-center gap-2">
-            <Button onClick={() => setEditor({ mode: 'create' })} size="sm">
-              <Plus />
-              New cron
-            </Button>
-
-            <div className="ml-auto w-full max-w-sm min-w-64">
-              <div className="relative">
-                <Search className="pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" />
-                <Input
-                  className="h-8 rounded-lg pl-8 pr-8 text-sm"
-                  onChange={event => setQuery(event.target.value)}
-                  placeholder="Search cron jobs..."
-                  value={query}
-                />
-                {query && (
-                  <Button
-                    aria-label="Clear search"
-                    className="absolute right-1 top-1/2 h-6 w-6 -translate-y-1/2 text-muted-foreground hover:text-foreground"
-                    onClick={() => setQuery('')}
-                    size="icon"
-                    type="button"
-                    variant="ghost"
-                  >
-                    <X className="size-3.5" />
-                  </Button>
-                )}
-              </div>
-            </div>
+    <PageSearchShell
+      {...props}
+      filters={
+        <div className="flex flex-wrap items-center justify-center gap-2">
+          <Button onClick={() => setEditor({ mode: 'create' })} size="sm">
+            <Codicon name="add" />
+            New cron
+          </Button>
+        </div>
+      }
+      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 ? (
+        <EmptyState
+          actionLabel={totalCount === 0 ? 'Create first cron' : undefined}
+          description={
+            totalCount === 0
+              ? 'Schedule a prompt to run on a cron expression. Hermes will run it and deliver results to the destination you pick.'
+              : 'Try a broader search query.'
+          }
+          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">
+          <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>
-
-        {!jobs ? (
-          <PageLoader label="Loading cron jobs..." />
-        ) : visibleJobs.length === 0 ? (
-          <EmptyState
-            actionLabel={totalCount === 0 ? 'Create first cron' : undefined}
-            description={
-              totalCount === 0
-                ? 'Schedule a prompt to run on a cron expression. Hermes will run it and deliver results to the destination you pick.'
-                : 'Try a broader search query.'
-            }
-            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">
-            <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>
+      )}
+      <div className="hidden">{totalCount === 0 ? 'No scheduled jobs' : `${enabledCount}/${totalCount} active`}</div>
 
       <CronEditorDialog editor={editor} onClose={() => setEditor({ mode: 'closed' })} onSave={handleEditorSave} />
 
@@ -520,7 +495,8 @@ export function CronView({
             <DialogDescription>
               {pendingDelete ? (
                 <>
-                  This will remove <span className="font-medium text-foreground">{truncate(jobTitle(pendingDelete), 60)}</span>{' '}
+                  This will remove{' '}
+                  <span className="font-medium text-foreground">{truncate(jobTitle(pendingDelete), 60)}</span>{' '}
                   permanently. It will stop firing immediately.
                 </>
               ) : null}
@@ -536,7 +512,7 @@ export function CronView({
           </DialogFooter>
         </DialogContent>
       </Dialog>
-    </section>
+    </PageSearchShell>
   )
 }
 
@@ -618,13 +594,14 @@ function CronJobRow({
   )
 }
 
-function IconAction({
-  children,
-  className,
-  ...props
-}: Omit<React.ComponentProps<typeof Button>, 'size' | 'variant'>) {
+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" variant="ghost" {...props}>
+    <Button
+      className={cn('size-7 text-muted-foreground hover:text-foreground', className)}
+      size="icon"
+      variant="ghost"
+      {...props}
+    >
       {children}
     </Button>
   )
@@ -632,7 +609,9 @@ function IconAction({
 
 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])}>
+    <span
+      className={cn('inline-flex items-center rounded-full px-1.5 py-0.5 text-[0.64rem] capitalize', PILL_TONE[tone])}
+    >
       {children}
     </span>
   )
@@ -656,7 +635,7 @@ function EmptyState({
         <p className="text-xs text-muted-foreground">{description}</p>
         {actionLabel && onAction && (
           <Button className="mt-2" onClick={onAction} size="sm">
-            <Plus />
+            <Codicon name="add" />
             {actionLabel}
           </Button>
         )}
diff --git a/apps/desktop/src/app/desktop-controller.tsx b/apps/desktop/src/app/desktop-controller.tsx
index 0fad6f588ca..c6f9143ed0e 100644
--- a/apps/desktop/src/app/desktop-controller.tsx
+++ b/apps/desktop/src/app/desktop-controller.tsx
@@ -9,9 +9,11 @@ import { useSkinCommand } from '@/themes/use-skin-command'
 
 import { formatRefValue } from '../components/assistant-ui/directive-text'
 import { getSessionMessages, listSessions } from '../hermes'
-import { toChatMessages } from '../lib/chat-messages'
+import { preserveLocalAssistantErrors, toChatMessages } from '../lib/chat-messages'
 import {
   $pinnedSessionIds,
+  $sessionsLimit,
+  bumpSessionsLimit,
   FILE_BROWSER_DEFAULT_WIDTH,
   FILE_BROWSER_MAX_WIDTH,
   FILE_BROWSER_MIN_WIDTH,
@@ -33,7 +35,8 @@ import {
   setCurrentProvider,
   setMessages,
   setSessions,
-  setSessionsLoading
+  setSessionsLoading,
+  setSessionsTotal
 } from '../store/session'
 import { openUpdatesWindow, startUpdatePoller, stopUpdatePoller } from '../store/updates'
 
@@ -46,10 +49,10 @@ import {
   PREVIEW_RAIL_PANE_WIDTH
 } from './chat/right-rail'
 import { ChatSidebar } from './chat/sidebar'
-import { FileBrowserPane } from './file-browser'
 import { useGatewayBoot } from './gateway/hooks/use-gateway-boot'
 import { useGatewayRequest } from './gateway/hooks/use-gateway-request'
 import { ModelPickerOverlay } from './model-picker-overlay'
+import { RightSidebarPane } from './right-sidebar'
 import { NEW_CHAT_ROUTE, routeSessionId, sessionRoute } from './routes'
 import { useContextSuggestions } from './session/hooks/use-context-suggestions'
 import { useCwdActions } from './session/hooks/use-cwd-actions'
@@ -182,10 +185,12 @@ export function DesktopController() {
     setSessionsLoading(true)
 
     try {
-      const result = await listSessions(50)
+      const limit = $sessionsLimit.get()
+      const result = await listSessions(limit)
 
       if (refreshSessionsRequestRef.current === requestId) {
         setSessions(result.sessions)
+        setSessionsTotal(typeof result.total === 'number' ? result.total : result.sessions.length)
       }
     } finally {
       if (refreshSessionsRequestRef.current === requestId) {
@@ -194,6 +199,11 @@ export function DesktopController() {
     }
   }, [])
 
+  const loadMoreSessions = useCallback(() => {
+    bumpSessionsLimit()
+    void refreshSessions()
+  }, [refreshSessions])
+
   const toggleSelectedPin = useCallback(() => {
     const sessionId = $selectedStoredSessionId.get()
 
@@ -210,10 +220,27 @@ export function DesktopController() {
 
   const { gatewayLogLines, inferenceStatus, statusSnapshot } = useStatusSnapshot(gatewayState, requestGateway)
 
-  const { browseSessionCwd, changeSessionCwd, refreshProjectBranch } = useCwdActions({
+  const updateActiveSessionRuntimeInfo = useCallback(
+    (info: { branch?: string; cwd?: string }) => {
+      const sessionId = activeSessionIdRef.current
+
+      if (!sessionId) {
+        return
+      }
+
+      updateSessionState(sessionId, state => ({
+        ...state,
+        branch: info.branch ?? state.branch,
+        cwd: info.cwd ?? state.cwd
+      }))
+    },
+    [activeSessionIdRef, updateSessionState]
+  )
+
+  const { changeSessionCwd, refreshProjectBranch } = useCwdActions({
     activeSessionId,
     activeSessionIdRef,
-    currentCwd,
+    onSessionRuntimeInfo: updateActiveSessionRuntimeInfo,
     requestGateway
   })
 
@@ -253,7 +280,7 @@ export function DesktopController() {
             runtimeSessionId,
             state => ({
               ...state,
-              messages: toChatMessages(latest.messages)
+              messages: preserveLocalAssistantErrors(toChatMessages(latest.messages), state.messages)
             }),
             storedSessionId
           )
@@ -315,6 +342,31 @@ export function DesktopController() {
     updateSessionState
   })
 
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      const target = event.target as HTMLElement | null
+
+      const editing =
+        target?.isContentEditable ||
+        target instanceof HTMLInputElement ||
+        target instanceof HTMLTextAreaElement ||
+        target instanceof HTMLSelectElement
+
+      if (editing || event.defaultPrevented || event.repeat || event.altKey || event.ctrlKey || event.metaKey) {
+        return
+      }
+
+      if (event.shiftKey && event.code === 'KeyN') {
+        event.preventDefault()
+        startFreshSessionDraft()
+      }
+    }
+
+    window.addEventListener('keydown', onKeyDown)
+
+    return () => window.removeEventListener('keydown', onKeyDown)
+  }, [startFreshSessionDraft])
+
   const composer = useComposerActions({
     activeSessionId,
     currentCwd,
@@ -388,7 +440,6 @@ export function DesktopController() {
 
   const { leftStatusbarItems, statusbarItems } = useStatusbarItems({
     agentsOpen,
-    browseSessionCwd,
     commandCenterOpen,
     extraLeftItems: statusbarItemGroups.flat.left,
     extraRightItems: statusbarItemGroups.flat.right,
@@ -405,8 +456,8 @@ export function DesktopController() {
     <ChatSidebar
       currentView={currentView}
       onDeleteSession={sessionId => void removeSession(sessionId)}
+      onLoadMoreSessions={loadMoreSessions}
       onNavigate={selectSidebarItem}
-      onRefreshSessions={() => void refreshSessions()}
       onResumeSession={sessionId => navigate(sessionRoute(sessionId))}
     />
   )
@@ -497,8 +548,10 @@ export function DesktopController() {
 
   return (
     <AppShell
+      commandCenterOpen={commandCenterOpen}
       leftStatusbarItems={leftStatusbarItems}
       leftTitlebarTools={titlebarToolGroups.flat.left}
+      onOpenSearch={() => openCommandCenterSection('sessions')}
       onOpenSettings={openSettings}
       overlays={overlays}
       statusbarItems={statusbarItems}
@@ -521,7 +574,7 @@ export function DesktopController() {
           <Route
             element={
               <Suspense fallback={null}>
-                <SkillsView setStatusbarItemGroup={setStatusbarItemGroup} setTitlebarToolGroup={setTitlebarToolGroup} />
+                <SkillsView setStatusbarItemGroup={setStatusbarItemGroup} />
               </Suspense>
             }
             path="skills"
@@ -529,10 +582,7 @@ export function DesktopController() {
           <Route
             element={
               <Suspense fallback={null}>
-                <MessagingView
-                  setStatusbarItemGroup={setStatusbarItemGroup}
-                  setTitlebarToolGroup={setTitlebarToolGroup}
-                />
+                <MessagingView setStatusbarItemGroup={setStatusbarItemGroup} />
               </Suspense>
             }
             path="messaging"
@@ -540,10 +590,7 @@ export function DesktopController() {
           <Route
             element={
               <Suspense fallback={null}>
-                <ArtifactsView
-                  setStatusbarItemGroup={setStatusbarItemGroup}
-                  setTitlebarToolGroup={setTitlebarToolGroup}
-                />
+                <ArtifactsView setStatusbarItemGroup={setStatusbarItemGroup} />
               </Suspense>
             }
             path="artifacts"
@@ -551,7 +598,7 @@ export function DesktopController() {
           <Route
             element={
               <Suspense fallback={null}>
-                <CronView setStatusbarItemGroup={setStatusbarItemGroup} setTitlebarToolGroup={setTitlebarToolGroup} />
+                <CronView setStatusbarItemGroup={setStatusbarItemGroup} />
               </Suspense>
             }
             path="cron"
@@ -590,6 +637,7 @@ export function DesktopController() {
       </Pane>
       <Pane
         defaultOpen={false}
+        disabled={!chatOpen}
         id="file-browser"
         maxWidth={FILE_BROWSER_MAX_WIDTH}
         minWidth={FILE_BROWSER_MIN_WIDTH}
@@ -597,7 +645,12 @@ export function DesktopController() {
         side="right"
         width={FILE_BROWSER_DEFAULT_WIDTH}
       >
-        <FileBrowserPane onActivateFile={composer.attachContextFilePath} onChangeCwd={changeSessionCwd} />
+        <RightSidebarPane
+          onActivateFile={composer.attachContextFilePath}
+          onActivateFolder={composer.attachContextFolderPath}
+          onAddTerminalSelection={composer.addTerminalSelectionAttachment}
+          onChangeCwd={changeSessionCwd}
+        />
       </Pane>
     </AppShell>
   )
diff --git a/apps/desktop/src/app/file-browser/index.tsx b/apps/desktop/src/app/file-browser/index.tsx
deleted file mode 100644
index 42e27c8efb6..00000000000
--- a/apps/desktop/src/app/file-browser/index.tsx
+++ /dev/null
@@ -1,173 +0,0 @@
-import { useStore } from '@nanostores/react'
-
-import { Button } from '@/components/ui/button'
-import { FadeText } from '@/components/ui/fade-text'
-import { FolderOpen, RefreshCw } from '@/lib/icons'
-import { normalizeOrLocalPreviewTarget } from '@/lib/local-preview'
-import { cn } from '@/lib/utils'
-import { notifyError } from '@/store/notifications'
-import { setCurrentSessionPreviewTarget } from '@/store/preview'
-import { $currentCwd } from '@/store/session'
-
-import { SidebarPanelLabel } from '../shell/sidebar-label'
-
-import { ProjectTree } from './tree'
-import { useProjectTree } from './use-project-tree'
-
-interface FileBrowserPaneProps {
-  /** Activates a file row — drops the path into the composer as `@file:` ref. */
-  onActivateFile: (path: string) => void
-  onChangeCwd: (path: string) => Promise<void> | void
-}
-
-export function FileBrowserPane({ onActivateFile, onChangeCwd }: FileBrowserPaneProps) {
-  const currentCwd = useStore($currentCwd).trim()
-  const hasCwd = currentCwd.length > 0
-
-  const cwdName = hasCwd
-    ? (currentCwd
-        .split(/[\\/]+/)
-        .filter(Boolean)
-        .pop() ?? currentCwd)
-    : 'No folder selected'
-
-  const { data, loadChildren, openState, refreshRoot, rootError, rootLoading, setNodeOpen } = useProjectTree(currentCwd)
-
-  const chooseFolder = async () => {
-    const selected = await window.hermesDesktop?.selectPaths({
-      title: 'Change working directory',
-      defaultPath: hasCwd ? currentCwd : undefined,
-      directories: true,
-      multiple: false
-    })
-
-    if (selected?.[0]) {
-      await onChangeCwd(selected[0])
-    }
-  }
-
-  const previewFile = async (path: string) => {
-    try {
-      const preview = await normalizeOrLocalPreviewTarget(path, currentCwd || undefined)
-
-      if (!preview) {
-        throw new Error(`Could not preview ${path}`)
-      }
-
-      setCurrentSessionPreviewTarget(preview, 'file-browser', path)
-    } catch (error) {
-      notifyError(error, 'Preview unavailable')
-    }
-  }
-
-  return (
-    <aside
-      aria-label="File browser"
-      className="relative flex h-full w-full min-w-0 flex-col overflow-hidden border-l border-border/60 bg-[color-mix(in_srgb,var(--dt-sidebar-bg)_94%,transparent)] px-(--sidebar-content-inline-padding) pt-[calc(var(--titlebar-height)-0.625rem)] text-muted-foreground [backdrop-filter:blur(1.5rem)_saturate(1.08)]"
-    >
-      <header className="group/project-header shrink-0 pb-1 pt-0">
-        <div className="flex items-center gap-1.5">
-          <FadeText
-            className="flex flex-1 items-center px-2 pb-1 pt-1"
-            title={hasCwd ? currentCwd : 'No folder selected'}
-          >
-            <SidebarPanelLabel>{cwdName}</SidebarPanelLabel>
-          </FadeText>
-          <Button
-            aria-label="Change working directory"
-            className="pointer-events-none size-6 shrink-0 text-muted-foreground/75 opacity-0 transition-opacity hover:text-foreground 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"
-            onClick={() => void chooseFolder()}
-            size="icon"
-            title="Change working directory"
-            variant="ghost"
-          >
-            <FolderOpen className="size-3.5" />
-          </Button>
-          <Button
-            aria-label="Refresh tree"
-            className="pointer-events-none size-6 shrink-0 text-muted-foreground/75 opacity-0 transition-opacity hover:text-foreground 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"
-            disabled={!hasCwd || rootLoading}
-            onClick={() => void refreshRoot()}
-            size="icon"
-            title="Refresh tree"
-            variant="ghost"
-          >
-            <RefreshCw className={cn('size-3.5', rootLoading && 'animate-spin')} />
-          </Button>
-        </div>
-      </header>
-
-      <FileTreeBody
-        cwd={currentCwd}
-        data={data}
-        error={rootError}
-        loading={rootLoading}
-        onActivateFile={onActivateFile}
-        onLoadChildren={loadChildren}
-        onNodeOpenChange={setNodeOpen}
-        onPreviewFile={previewFile}
-        openState={openState}
-      />
-    </aside>
-  )
-}
-
-interface FileTreeBodyProps {
-  cwd: string
-  data: ReturnType<typeof useProjectTree>['data']
-  error: string | null
-  loading: boolean
-  onActivateFile: (path: string) => void
-  onLoadChildren: (id: string) => void | Promise<void>
-  onNodeOpenChange: (id: string, open: boolean) => void
-  onPreviewFile?: (path: string) => void
-  openState: ReturnType<typeof useProjectTree>['openState']
-}
-
-function FileTreeBody({
-  cwd,
-  data,
-  error,
-  loading,
-  onActivateFile,
-  onLoadChildren,
-  onNodeOpenChange,
-  onPreviewFile,
-  openState
-}: FileTreeBodyProps) {
-  if (!cwd) {
-    return <EmptyState body="Set a working directory from the status bar to browse files." title="No project" />
-  }
-
-  if (error) {
-    return <EmptyState body={`Could not read this folder (${error}).`} title="Unreadable" />
-  }
-
-  if (loading && data.length === 0) {
-    return <EmptyState body="Reading project…" title="Loading" />
-  }
-
-  if (data.length === 0) {
-    return <EmptyState body="This folder is empty." title="Empty" />
-  }
-
-  return (
-    <ProjectTree
-      data={data}
-      onActivateFile={onActivateFile}
-      onLoadChildren={onLoadChildren}
-      onNodeOpenChange={onNodeOpenChange}
-      onPreviewFile={onPreviewFile}
-      openState={openState}
-    />
-  )
-}
-
-function EmptyState({ body, title }: { body: string; title: string }) {
-  return (
-    <div className="flex min-h-0 flex-1 flex-col items-center justify-center gap-1 px-4 text-center">
-      <div className="text-[0.7rem] font-semibold uppercase tracking-[0.07em] text-muted-foreground/75">{title}</div>
-      <div className="text-[0.68rem] leading-relaxed text-muted-foreground/65">{body}</div>
-    </div>
-  )
-}
diff --git a/apps/desktop/src/app/messaging/index.tsx b/apps/desktop/src/app/messaging/index.tsx
index 63b2040f422..9d0904a70ba 100644
--- a/apps/desktop/src/app/messaging/index.tsx
+++ b/apps/desktop/src/app/messaging/index.tsx
@@ -4,6 +4,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
 import { PageLoader } from '@/components/page-loader'
 import { StatusDot, type StatusTone } from '@/components/status-dot'
 import { Button } from '@/components/ui/button'
+import { DisclosureCaret } from '@/components/ui/disclosure-caret'
 import { Input } from '@/components/ui/input'
 import { Switch } from '@/components/ui/switch'
 import {
@@ -12,18 +13,16 @@ import {
   type MessagingPlatformInfo,
   updateMessagingPlatform
 } from '@/hermes'
-import { AlertTriangle, ChevronDown, ExternalLink, RefreshCw, Save, Trash2 } from '@/lib/icons'
+import { AlertTriangle, ExternalLink, Save, Trash2 } from '@/lib/icons'
 import { cn } from '@/lib/utils'
 import { notify, notifyError } from '@/store/notifications'
 
 import { useRouteEnumParam } from '../hooks/use-route-enum-param'
+import { PageSearchShell } from '../page-search-shell'
 import type { SetStatusbarItemGroup } from '../shell/statusbar-controls'
-import { titlebarHeaderBaseClass } from '../shell/titlebar'
-import type { SetTitlebarToolGroup } from '../shell/titlebar-controls'
 
 interface MessagingViewProps extends React.ComponentProps<'section'> {
   setStatusbarItemGroup?: SetStatusbarItemGroup
-  setTitlebarToolGroup?: SetTitlebarToolGroup
 }
 
 type EditMap = Record<string, Record<string, string>>
@@ -207,13 +206,10 @@ function fieldCopy(field: MessagingEnvVarInfo) {
   }
 }
 
-export function MessagingView({
-  setStatusbarItemGroup: _setStatusbarItemGroup,
-  setTitlebarToolGroup,
-  ...props
-}: MessagingViewProps) {
+export function MessagingView({ setStatusbarItemGroup: _setStatusbarItemGroup, ...props }: MessagingViewProps) {
   const [platforms, setPlatforms] = useState<MessagingPlatformInfo[] | null>(null)
   const [edits, setEdits] = useState<EditMap>({})
+  const [query, setQuery] = useState('')
   const [refreshing, setRefreshing] = useState(false)
   const [saving, setSaving] = useState<string | null>(null)
   const platformIds = useMemo(() => platforms?.map(p => p.id) ?? [], [platforms])
@@ -263,24 +259,6 @@ export function MessagingView({
     }
   }, [refreshPlatforms])
 
-  useEffect(() => {
-    if (!setTitlebarToolGroup) {
-      return
-    }
-
-    setTitlebarToolGroup('messaging', [
-      {
-        disabled: refreshing,
-        icon: <RefreshCw className={cn(refreshing && 'animate-spin')} />,
-        id: 'refresh-messaging',
-        label: refreshing ? 'Refreshing messaging' : 'Refresh messaging',
-        onSelect: () => void refreshPlatforms()
-      }
-    ])
-
-    return () => setTitlebarToolGroup('messaging', [])
-  }, [refreshPlatforms, refreshing, setTitlebarToolGroup])
-
   const selected = useMemo(() => {
     if (!platforms) {
       return null
@@ -289,7 +267,23 @@ export function MessagingView({
     return platforms.find(platform => platform.id === selectedId) || platforms[0] || null
   }, [platforms, selectedId])
 
-  const enabledCount = platforms?.filter(platform => platform.enabled).length || 0
+  const visiblePlatforms = useMemo(() => {
+    if (!platforms) {
+      return []
+    }
+
+    const q = query.trim().toLowerCase()
+
+    if (!q) {
+      return platforms
+    }
+
+    return platforms.filter(platform =>
+      [platform.id, platform.name, platform.description, platform.state]
+        .filter(Boolean)
+        .some(value => String(value).toLowerCase().includes(q))
+    )
+  }, [platforms, query])
 
   async function handleToggle(platform: MessagingPlatformInfo, enabled: boolean) {
     setSaving(`enabled:${platform.id}`)
@@ -367,58 +361,55 @@ export function MessagingView({
   }
 
   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">Messaging</h2>
-        <span className="pointer-events-auto text-xs text-muted-foreground">
-          {enabledCount === 0 ? 'No platforms enabled' : `${enabledCount} enabled`}
-        </span>
-      </header>
+    <PageSearchShell
+      {...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">
+            <ul className="space-y-1">
+              {visiblePlatforms.map(platform => (
+                <li key={platform.id}>
+                  <PlatformRow
+                    active={selected?.id === platform.id}
+                    onSelect={() => setSelectedId(platform.id)}
+                    platform={platform}
+                  />
+                </li>
+              ))}
+            </ul>
+          </aside>
 
-      <div className="min-h-0 flex-1 overflow-hidden rounded-b-[1.0625rem] border border-border/50 bg-background/85">
-        {!platforms ? (
-          <PageLoader label="Loading messaging platforms..." />
-        ) : (
-          <div className="grid h-full min-h-0 grid-cols-1 lg:grid-cols-[16rem_minmax(0,1fr)]">
-            <aside className="min-h-0 overflow-y-auto border-b border-border/50 p-2 lg:border-b-0 lg:border-r">
-              <ul className="space-y-1">
-                {platforms.map(platform => (
-                  <li key={platform.id}>
-                    <PlatformRow
-                      active={selected?.id === platform.id}
-                      onSelect={() => setSelectedId(platform.id)}
-                      platform={platform}
-                    />
-                  </li>
-                ))}
-              </ul>
-            </aside>
-
-            <main className="min-h-0 overflow-hidden">
-              {selected && (
-                <PlatformDetail
-                  edits={edits[selected.id] || {}}
-                  onClear={key => void handleClear(selected, key)}
-                  onEdit={(key, value) =>
-                    setEdits(current => ({
-                      ...current,
-                      [selected.id]: {
-                        ...(current[selected.id] || {}),
-                        [key]: value
-                      }
-                    }))
-                  }
-                  onSave={() => void handleSave(selected)}
-                  onToggle={enabled => void handleToggle(selected, enabled)}
-                  platform={selected}
-                  saving={saving}
-                />
-              )}
-            </main>
-          </div>
-        )}
-      </div>
-    </section>
+          <main className="min-h-0 overflow-hidden">
+            {selected && (
+              <PlatformDetail
+                edits={edits[selected.id] || {}}
+                onClear={key => void handleClear(selected, key)}
+                onEdit={(key, value) =>
+                  setEdits(current => ({
+                    ...current,
+                    [selected.id]: {
+                      ...(current[selected.id] || {}),
+                      [key]: value
+                    }
+                  }))
+                }
+                onSave={() => void handleSave(selected)}
+                onToggle={enabled => void handleToggle(selected, enabled)}
+                platform={selected}
+                saving={saving}
+              />
+            )}
+          </main>
+        </div>
+      )}
+    </PageSearchShell>
   )
 }
 
@@ -434,15 +425,17 @@ function PlatformRow({
   return (
     <button
       className={cn(
-        'flex w-full items-center gap-3 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 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'
       )}
       onClick={onSelect}
       type="button"
     >
       <PlatformAvatar platformId={platform.id} platformName={platform.name} />
       <span className="flex min-w-0 flex-1 items-center justify-between gap-2">
-        <span className="truncate text-sm font-medium">{platform.name}</span>
+        <span className="truncate text-[length:var(--conversation-text-font-size)] font-normal">{platform.name}</span>
         <StatusDot tone={stateTone(platform)} />
       </span>
     </button>
@@ -453,8 +446,8 @@ function PlatformAvatar({ platformId, platformName }: { platformId: string; plat
   return (
     <span
       className={cn(
-        'inline-flex size-7 shrink-0 items-center justify-center rounded-md text-sm font-semibold',
-        PLATFORM_TINTS[platformId] || 'bg-muted text-muted-foreground'
+        'inline-flex size-6 shrink-0 items-center justify-center rounded-md text-[length:var(--conversation-caption-font-size)] font-medium',
+        PLATFORM_TINTS[platformId] || 'bg-(--ui-bg-tertiary) text-(--ui-text-tertiary)'
       )}
     >
       {platformName.charAt(0).toUpperCase()}
@@ -491,12 +484,14 @@ function PlatformDetail({
   return (
     <div className="flex h-full min-h-0 flex-col">
       <div className="min-h-0 flex-1 overflow-y-auto">
-        <div className="mx-auto max-w-2xl space-y-7 px-6 py-6">
-          <header className="flex items-start gap-4">
+        <div className="mx-auto max-w-2xl space-y-5 px-5 py-4">
+          <header className="flex items-start gap-3">
             <PlatformAvatar platformId={platform.id} platformName={platform.name} />
             <div className="min-w-0 flex-1">
-              <h3 className="text-xl font-semibold tracking-tight">{platform.name}</h3>
-              <p className="mt-1 text-sm leading-6 text-muted-foreground">{platform.description}</p>
+              <h3 className="text-[0.9375rem] font-semibold tracking-tight">{platform.name}</h3>
+              <p className="mt-1 text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
+                {platform.description}
+              </p>
               <div className="mt-3 flex flex-wrap items-center gap-2">
                 <StatePill tone={stateTone(platform)}>{stateLabel(platform.state)}</StatePill>
                 <SetupPill active={platform.configured}>
@@ -509,7 +504,7 @@ function PlatformDetail({
           </header>
 
           {platform.error_message && (
-            <div className="flex items-start gap-2 rounded-xl border border-destructive/30 bg-destructive/10 px-3 py-2.5 text-xs leading-5 text-destructive">
+            <div className="flex items-start gap-2 rounded-xl border border-destructive/30 bg-destructive/10 px-3 py-2 text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-destructive">
               <AlertTriangle className="mt-0.5 size-3.5 shrink-0" />
               <span>{platform.error_message}</span>
             </div>
@@ -517,7 +512,9 @@ function PlatformDetail({
 
           <section>
             <SectionTitle>Get your credentials</SectionTitle>
-            <p className="mt-1 text-sm leading-6 text-muted-foreground">{introCopy(platform)}</p>
+            <p className="mt-1 text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
+              {introCopy(platform)}
+            </p>
             <div className="mt-3">
               <Button asChild size="sm" variant="outline">
                 <a href={platform.docs_url} rel="noreferrer" target="_blank">
@@ -543,7 +540,7 @@ function PlatformDetail({
                   />
                 ))
               ) : (
-                <p className="text-sm leading-6 text-muted-foreground">
+                <p className="text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
                   This platform does not need a token here. Use the setup guide above, then enable it below.
                 </p>
               )}
@@ -576,7 +573,7 @@ function PlatformDetail({
                 type="button"
               >
                 <span>Advanced ({hiddenCount})</span>
-                <ChevronDown className={cn('size-3.5 transition-transform', !showAdvanced && '-rotate-90')} />
+                <DisclosureCaret open={showAdvanced} size="0.875rem" />
               </button>
               {showAdvanced && (
                 <div className="mt-3 space-y-4">
@@ -597,9 +594,9 @@ function PlatformDetail({
         </div>
       </div>
 
-      <footer className="border-t border-border/50 bg-background/95 px-6 py-3 backdrop-blur">
+      <footer className="border-t border-(--ui-stroke-tertiary) 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-lg border border-border/50 bg-muted/25 px-3 py-1.5 text-sm">
+          <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}
diff --git a/apps/desktop/src/app/overlays/overlay-search-input.tsx b/apps/desktop/src/app/overlays/overlay-search-input.tsx
index 929b0e54d4f..ab3603d4d44 100644
--- a/apps/desktop/src/app/overlays/overlay-search-input.tsx
+++ b/apps/desktop/src/app/overlays/overlay-search-input.tsx
@@ -1,8 +1,9 @@
-import type { RefObject } from 'react'
+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, X } from '@/lib/icons'
+import { Loader2, Search } from '@/lib/icons'
 import { cn } from '@/lib/utils'
 
 interface OverlaySearchInputProps {
@@ -14,6 +15,7 @@ interface OverlaySearchInputProps {
   loading?: boolean
   onClear?: () => void
   inputRef?: RefObject<HTMLInputElement | null>
+  trailingAction?: ReactNode
 }
 
 export function OverlaySearchInput({
@@ -24,33 +26,52 @@ export function OverlaySearchInput({
   inputClassName,
   loading = false,
   onClear,
-  inputRef
+  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 h-8 rounded-lg py-2 pl-8 pr-12 text-sm', inputClassName)}
+        className={cn(
+          'relative z-0 h-8 rounded-lg 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}
       />
-      {loading ? (
-        <Loader2 className="pointer-events-none absolute right-3 top-1/2 z-1 size-3.5 -translate-y-1/2 animate-spin text-muted-foreground/70" />
-      ) : value ? (
-        <Button
-          aria-label="Clear search"
-          className="absolute right-1.5 top-1/2 z-1 -translate-y-1/2 text-muted-foreground/85 hover:bg-accent/60 hover:text-foreground"
-          onClick={clear}
-          size="icon-xs"
-          variant="ghost"
-        >
-          <X className="size-3.5" />
-        </Button>
-      ) : null}
+      <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('h-8 rounded-lg 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 b321d6d2702..2ce6c85bcf5 100644
--- a/apps/desktop/src/app/overlays/overlay-split-layout.tsx
+++ b/apps/desktop/src/app/overlays/overlay-split-layout.tsx
@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
 
-import type { LucideIcon } from '@/lib/icons'
+import type { IconComponent } from '@/lib/icons'
 import { cn } from '@/lib/utils'
 
 interface OverlaySplitLayoutProps {
@@ -20,7 +20,7 @@ interface OverlayMainProps {
 
 interface OverlayNavItemProps {
   active: boolean
-  icon: LucideIcon
+  icon: IconComponent
   label: string
   onClick: () => void
   trailing?: ReactNode
@@ -30,7 +30,7 @@ export function OverlaySplitLayout({ children, className }: OverlaySplitLayoutPr
   return (
     <div
       className={cn(
-        'grid h-full min-h-0 flex-1 grid-cols-[13rem_minmax(0,1fr)] overflow-hidden rounded-[0.95rem] border border-[color-mix(in_srgb,var(--dt-border)_58%,transparent)] bg-[color-mix(in_srgb,var(--dt-card)_94%,transparent)] shadow-[inset_0_0.0625rem_0_color-mix(in_srgb,white_46%,transparent),0_0.5rem_1.5rem_-1rem_color-mix(in_srgb,#000_22%,transparent)] max-[760px]:grid-cols-1 dark:border-[color-mix(in_srgb,var(--dt-border)_36%,transparent)] dark:shadow-[inset_0_0.0625rem_0_color-mix(in_srgb,white_10%,transparent),0_0.5rem_1.5rem_-1rem_color-mix(in_srgb,#000_45%,transparent)]',
+        'grid h-full min-h-0 flex-1 grid-cols-[13rem_minmax(0,1fr)] overflow-hidden bg-transparent max-[47.5rem]:grid-cols-1',
         className
       )}
     >
@@ -43,7 +43,7 @@ export function OverlaySidebar({ children, className }: OverlaySidebarProps) {
   return (
     <aside
       className={cn(
-        'flex min-h-0 flex-col gap-0.5 overflow-y-auto border-r border-[color-mix(in_srgb,var(--dt-border)_48%,transparent)] bg-[color-mix(in_srgb,var(--dt-muted)_55%,var(--dt-card))] px-3.5 py-4',
+        'flex min-h-0 flex-col gap-0.5 overflow-y-auto bg-(--ui-sidebar-surface-background) px-2.5 py-3',
         className
       )}
     >
@@ -54,7 +54,7 @@ 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-4', className)}>{children}</main>
+    <main className={cn('flex min-h-0 flex-1 flex-col overflow-hidden bg-transparent p-3', className)}>{children}</main>
   )
 }
 
@@ -62,10 +62,10 @@ export function OverlayNavItem({ active, icon: Icon, label, onClick, trailing }:
   return (
     <button
       className={cn(
-        'flex h-8 w-full items-center justify-start gap-2 rounded-md border px-2.5 text-left text-sm font-medium transition-colors',
+        'flex h-7 w-full items-center justify-start gap-2 rounded-md border px-2 text-left text-[length:var(--conversation-text-font-size)] font-normal transition-colors',
         active
-          ? 'border-[color-mix(in_srgb,var(--dt-primary)_34%,var(--dt-border))] bg-[color-mix(in_srgb,var(--dt-primary)_10%,var(--dt-card))] text-foreground shadow-[inset_0_0.0625rem_0_color-mix(in_srgb,white_40%,transparent)]'
-          : 'border-transparent bg-transparent text-foreground/78 hover:border-[color-mix(in_srgb,var(--dt-border)_60%,transparent)] hover:bg-[color-mix(in_srgb,var(--dt-card)_78%,transparent)] hover:text-foreground'
+          ? 'border-(--ui-stroke-tertiary) bg-(--ui-bg-tertiary) text-foreground'
+          : 'border-transparent bg-transparent text-(--ui-text-secondary) hover:bg-(--chrome-action-hover) hover:text-foreground'
       )}
       onClick={onClick}
       type="button"
diff --git a/apps/desktop/src/app/overlays/overlay-view.tsx b/apps/desktop/src/app/overlays/overlay-view.tsx
index 3886c22b21f..8408be6b3f9 100644
--- a/apps/desktop/src/app/overlays/overlay-view.tsx
+++ b/apps/desktop/src/app/overlays/overlay-view.tsx
@@ -1,8 +1,8 @@
 import { type ReactNode, useEffect } from 'react'
 
 import { Button } from '@/components/ui/button'
+import { Codicon } from '@/components/ui/codicon'
 import { triggerHaptic } from '@/lib/haptics'
-import { X } from '@/lib/icons'
 import { cn } from '@/lib/utils'
 
 interface OverlayViewProps {
@@ -32,7 +32,9 @@ export function OverlayView({
   // Settings still closes the picker first instead of the underlying overlay.
   useEffect(() => {
     const onKeyDown = (event: KeyboardEvent) => {
-      if (event.key !== 'Escape' || event.defaultPrevented) return
+      if (event.key !== 'Escape' || event.defaultPrevented) {
+        return
+      }
 
       event.preventDefault()
       triggerHaptic('close')
@@ -46,7 +48,7 @@ export function OverlayView({
 
   return (
     <div
-      className="fixed inset-0 z-50 bg-black/22 p-3 backdrop-blur-[2px] sm:p-8"
+      className="fixed inset-0 z-50 bg-black/22 p-3 backdrop-blur-[0.125rem] sm:p-6"
       onClick={event => {
         if (event.target === event.currentTarget) {
           closeOverlay()
@@ -56,7 +58,7 @@ export function OverlayView({
     >
       <div
         className={cn(
-          'relative flex h-full min-h-0 flex-col overflow-hidden rounded-2xl border border-[color-mix(in_srgb,var(--dt-border)_60%,transparent)] bg-background/96 shadow-[0_1.5rem_4rem_-2rem_color-mix(in_srgb,#000_40%,transparent)]',
+          'relative flex h-full min-h-0 flex-col overflow-hidden rounded-xl border border-(--ui-stroke-secondary) bg-(--ui-chat-surface-background) shadow-md',
           rootClassName
         )}
       >
@@ -69,12 +71,12 @@ export function OverlayView({
 
           <Button
             aria-label={closeLabel}
-            className="pointer-events-auto absolute right-3.75 top-[calc(0.1875rem+var(--titlebar-height)/2)] h-7 w-7 -translate-y-1/2 rounded-lg text-muted-foreground hover:bg-accent/70 hover:text-foreground [-webkit-app-region:no-drag]"
+            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]"
             onClick={closeOverlay}
             size="icon"
             variant="ghost"
           >
-            <X size={16} />
+            <Codicon name="close" size="1rem" />
           </Button>
         </div>
 
diff --git a/apps/desktop/src/app/page-search-shell.tsx b/apps/desktop/src/app/page-search-shell.tsx
new file mode 100644
index 00000000000..d2f8ddaabf0
--- /dev/null
+++ b/apps/desktop/src/app/page-search-shell.tsx
@@ -0,0 +1,43 @@
+import type { ReactNode } from 'react'
+
+import { cn } from '@/lib/utils'
+
+import { PageSearchInput } from './overlays/overlay-search-input'
+
+interface PageSearchShellProps extends React.ComponentProps<'section'> {
+  children: ReactNode
+  filters?: ReactNode
+  onSearchChange: (value: string) => void
+  searchPlaceholder: string
+  searchTrailingAction?: ReactNode
+  searchValue: string
+}
+
+export function PageSearchShell({
+  children,
+  className,
+  filters,
+  onSearchChange,
+  searchPlaceholder,
+  searchTrailingAction,
+  searchValue,
+  ...props
+}: PageSearchShellProps) {
+  return (
+    <section
+      {...props}
+      className={cn('flex h-full min-w-0 flex-col overflow-hidden bg-(--ui-chat-surface-background)', className)}
+    >
+      <div className="relative z-10 grid gap-2 border-b border-(--ui-stroke-tertiary) px-3 py-2.5">
+        <PageSearchInput
+          onChange={onSearchChange}
+          placeholder={searchPlaceholder}
+          trailingAction={searchTrailingAction}
+          value={searchValue}
+        />
+        {filters ? <div className="flex flex-wrap items-center justify-center gap-1.5">{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 5ed9842ad5f..29a9c753808 100644
--- a/apps/desktop/src/app/profiles/index.tsx
+++ b/apps/desktop/src/app/profiles/index.tsx
@@ -3,6 +3,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 import { PageLoader } from '@/components/page-loader'
 import { Button } from '@/components/ui/button'
+import { Codicon } from '@/components/ui/codicon'
 import {
   Dialog,
   DialogContent,
@@ -23,7 +24,7 @@ import {
   renameProfile,
   updateProfileSoul
 } from '@/hermes'
-import { AlertTriangle, Pencil, Plus, RefreshCw, Save, Terminal, Trash2, Users } from '@/lib/icons'
+import { AlertTriangle, Pencil, Save, Terminal, Trash2, Users } from '@/lib/icons'
 import { cn } from '@/lib/utils'
 import { notify, notifyError } from '@/store/notifications'
 
@@ -88,7 +89,7 @@ export function ProfilesView({
     setTitlebarToolGroup('profiles', [
       {
         disabled: refreshing,
-        icon: <RefreshCw className={cn(refreshing && 'animate-spin')} />,
+        icon: <Codicon name="refresh" spinning={refreshing} />,
         id: 'refresh-profiles',
         label: refreshing ? 'Refreshing profiles' : 'Refresh profiles',
         onSelect: () => void refresh()
@@ -179,7 +180,7 @@ export function ProfilesView({
             <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">
-                  <Plus />
+                  <Codicon name="add" />
                   New profile
                 </Button>
               </div>
@@ -253,15 +254,7 @@ export function ProfilesView({
   )
 }
 
-function ProfileRow({
-  active,
-  onSelect,
-  profile
-}: {
-  active: boolean
-  onSelect: () => void
-  profile: ProfileInfo
-}) {
+function ProfileRow({ active, onSelect, profile }: { active: boolean; onSelect: () => void; profile: ProfileInfo }) {
   return (
     <button
       className={cn(
@@ -363,9 +356,7 @@ function ProfileDetail({
                 {profile.model ? (
                   <>
                     <span className="font-mono">{profile.model}</span>
-                    {profile.provider && (
-                      <span className="text-muted-foreground"> · {profile.provider}</span>
-                    )}
+                    {profile.provider && <span className="text-muted-foreground"> · {profile.provider}</span>}
                   </>
                 ) : (
                   <span className="text-muted-foreground">Not set</span>
@@ -672,7 +663,8 @@ function RenameProfileDialog({
         <DialogHeader>
           <DialogTitle>Rename profile</DialogTitle>
           <DialogDescription>
-            Renaming updates the profile directory and any wrapper scripts in <span className="font-mono">~/.local/bin</span>.
+            Renaming updates the profile directory and any wrapper scripts in{' '}
+            <span className="font-mono">~/.local/bin</span>.
           </DialogDescription>
         </DialogHeader>
 
diff --git a/apps/desktop/src/app/file-browser/ipc.ts b/apps/desktop/src/app/right-sidebar/files/ipc.ts
similarity index 100%
rename from apps/desktop/src/app/file-browser/ipc.ts
rename to apps/desktop/src/app/right-sidebar/files/ipc.ts
diff --git a/apps/desktop/src/app/file-browser/tree.tsx b/apps/desktop/src/app/right-sidebar/files/tree.tsx
similarity index 68%
rename from apps/desktop/src/app/file-browser/tree.tsx
rename to apps/desktop/src/app/right-sidebar/files/tree.tsx
index 1cc083468e7..95bea5fd45a 100644
--- a/apps/desktop/src/app/file-browser/tree.tsx
+++ b/apps/desktop/src/app/right-sidebar/files/tree.tsx
@@ -1,18 +1,19 @@
 import { useCallback, useRef, useState } from 'react'
 import { type NodeApi, type NodeRendererProps, Tree, type TreeApi } from 'react-arborist'
 
+import { Codicon } from '@/components/ui/codicon'
 import { useResizeObserver } from '@/hooks/use-resize-observer'
-import { ChevronDown, ChevronRight, FileText, FolderOpen, Loader2 } from '@/lib/icons'
 import { cn } from '@/lib/utils'
 
 import type { TreeNode } from './use-project-tree'
 
-const ROW_HEIGHT = 28
-const INDENT = 14
+const ROW_HEIGHT = 22
+const INDENT = 10
 
 interface ProjectTreeProps {
   data: TreeNode[]
   onActivateFile: (path: string) => void
+  onActivateFolder: (path: string) => void
   onLoadChildren: (id: string) => void | Promise<void>
   onNodeOpenChange: (id: string, open: boolean) => void
   onPreviewFile?: (path: string) => void
@@ -22,6 +23,7 @@ interface ProjectTreeProps {
 export function ProjectTree({
   data,
   onActivateFile,
+  onActivateFolder,
   onLoadChildren,
   onNodeOpenChange,
   onPreviewFile,
@@ -97,9 +99,26 @@ export function ProjectTree({
           rowHeight={ROW_HEIGHT}
           width={size.width}
         >
-          {props => <ProjectTreeRow {...props} onAttachFile={onActivateFile} onPreviewFile={onPreviewFile} />}
+          {props => (
+            <ProjectTreeRow
+              {...props}
+              onAttachFile={onActivateFile}
+              onAttachFolder={onActivateFolder}
+              onPreviewFile={onPreviewFile}
+            />
+          )}
         </Tree>
-      ) : null}
+      ) : (
+        <TreeSizingState />
+      )}
+    </div>
+  )
+}
+
+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>
   )
 }
@@ -108,20 +127,24 @@ function ProjectTreeRow({
   dragHandle,
   node,
   onAttachFile,
+  onAttachFolder,
   onPreviewFile,
   style
-}: NodeRendererProps<TreeNode> & { onAttachFile: (path: string) => void; onPreviewFile?: (path: string) => void }) {
+}: NodeRendererProps<TreeNode> & {
+  onAttachFile: (path: string) => void
+  onAttachFolder: (path: string) => void
+  onPreviewFile?: (path: string) => void
+}) {
   const isFolder = node.data.isDirectory
   const isPlaceholder = node.data.id.endsWith('::__loading__')
-  const Caret = node.isOpen ? ChevronDown : ChevronRight
 
   return (
     <div
       aria-expanded={isFolder ? node.isOpen : undefined}
       aria-selected={node.isSelected}
       className={cn(
-        'group/row flex h-full cursor-pointer select-none items-center gap-0.5 rounded-sm px-0 text-sm font-medium leading-snug text-foreground/90 transition-colors hover:bg-(--chrome-action-hover)',
-        node.isSelected && 'bg-accent/65 text-foreground',
+        'group/row flex h-full cursor-pointer select-none items-center gap-1 border border-transparent px-3 text-xs font-normal leading-(--file-tree-row-height) text-(--ui-text-secondary) transition-colors hover:bg-(--ui-row-hover-background) hover:text-foreground',
+        node.isSelected && 'bg-(--ui-row-active-background) text-foreground',
         isPlaceholder && 'pointer-events-none italic text-muted-foreground/70'
       )}
       draggable={!isPlaceholder}
@@ -132,14 +155,16 @@ function ProjectTreeRow({
           return
         }
 
+        if (event.shiftKey) {
+          ;(isFolder ? onAttachFolder : onAttachFile)(node.data.id)
+
+          return
+        }
+
         if (isFolder) {
           node.toggle()
         } else {
           node.select()
-
-          if (event.shiftKey) {
-            onAttachFile(node.data.id)
-          }
         }
       }}
       onDoubleClick={event => {
@@ -166,17 +191,22 @@ function ProjectTreeRow({
       style={style}
     >
       {isFolder && !isPlaceholder && (
-        <span aria-hidden className="flex w-2.5 items-center justify-center">
-          <Caret className="size-3 text-muted-foreground/70" />
+        <span aria-hidden className="flex w-3 items-center justify-center">
+          <Codicon
+            className="text-(--ui-text-tertiary)"
+            name={node.isOpen ? 'chevron-down' : 'chevron-right'}
+            size="0.75rem"
+          />
         </span>
       )}
-      <span aria-hidden className="flex w-3 items-center justify-center text-muted-foreground/85">
+      {!isFolder && <span aria-hidden className="w-3 shrink-0" />}
+      <span aria-hidden className="flex w-3.5 items-center justify-center text-(--ui-text-tertiary)">
         {isPlaceholder ? (
-          <Loader2 className="size-3 animate-spin" />
+          <Codicon name="loading" size="0.75rem" spinning />
         ) : isFolder ? (
-          <FolderOpen className="size-3.5" />
+          <Codicon name={node.isOpen ? 'folder-opened' : 'folder'} size="0.875rem" />
         ) : (
-          <FileText className="size-3.5" />
+          <Codicon name="file" size="0.875rem" />
         )}
       </span>
       <span className="min-w-0 flex-1 truncate">{node.data.name}</span>
diff --git a/apps/desktop/src/app/file-browser/use-project-tree.test.ts b/apps/desktop/src/app/right-sidebar/files/use-project-tree.test.ts
similarity index 100%
rename from apps/desktop/src/app/file-browser/use-project-tree.test.ts
rename to apps/desktop/src/app/right-sidebar/files/use-project-tree.test.ts
diff --git a/apps/desktop/src/app/file-browser/use-project-tree.ts b/apps/desktop/src/app/right-sidebar/files/use-project-tree.ts
similarity index 98%
rename from apps/desktop/src/app/file-browser/use-project-tree.ts
rename to apps/desktop/src/app/right-sidebar/files/use-project-tree.ts
index 02d6728afcf..229bfcacd82 100644
--- a/apps/desktop/src/app/file-browser/use-project-tree.ts
+++ b/apps/desktop/src/app/right-sidebar/files/use-project-tree.ts
@@ -227,7 +227,7 @@ export function useProjectTree(cwd: string): UseProjectTreeResult {
       openState: state.cwd === cwd ? state.openState : {},
       refreshRoot,
       rootError: state.cwd === cwd ? state.rootError : null,
-      rootLoading: state.cwd === cwd ? state.rootLoading : false,
+      rootLoading: state.cwd === cwd ? state.rootLoading : Boolean(cwd),
       setNodeOpen
     }),
     [
diff --git a/apps/desktop/src/app/right-sidebar/index.tsx b/apps/desktop/src/app/right-sidebar/index.tsx
new file mode 100644
index 00000000000..c0950c11db8
--- /dev/null
+++ b/apps/desktop/src/app/right-sidebar/index.tsx
@@ -0,0 +1,292 @@
+import { useStore } from '@nanostores/react'
+import type { ReactNode } from 'react'
+
+import { Button } from '@/components/ui/button'
+import { Codicon } from '@/components/ui/codicon'
+import { Loader } from '@/components/ui/loader'
+import { normalizeOrLocalPreviewTarget } from '@/lib/local-preview'
+import { cn } from '@/lib/utils'
+import { notifyError } from '@/store/notifications'
+import { setCurrentSessionPreviewTarget } from '@/store/preview'
+import { $currentBranch, $currentCwd } from '@/store/session'
+
+import { SidebarPanelLabel } from '../shell/sidebar-label'
+
+import { ProjectTree } from './files/tree'
+import { useProjectTree } from './files/use-project-tree'
+import { $rightSidebarTab, type RightSidebarTabId, setRightSidebarTab } from './store'
+import { TerminalTab } from './terminal'
+
+interface RightSidebarPaneProps {
+  onActivateFile: (path: string) => void
+  onActivateFolder: (path: string) => void
+  onAddTerminalSelection: (text: string, label?: string) => void
+  onChangeCwd: (path: string) => Promise<void> | void
+}
+
+interface RightSidebarTab {
+  icon: string
+  id: RightSidebarTabId
+  label: string
+}
+
+const RIGHT_SIDEBAR_TABS: readonly RightSidebarTab[] = [
+  { id: 'files', label: 'File system', icon: 'files' },
+  { id: 'terminal', label: 'Terminal', icon: 'terminal' }
+]
+
+export function RightSidebarPane({
+  onActivateFile,
+  onActivateFolder,
+  onAddTerminalSelection,
+  onChangeCwd
+}: RightSidebarPaneProps) {
+  const activeTab = useStore($rightSidebarTab)
+  const currentBranch = useStore($currentBranch).trim()
+  const currentCwd = useStore($currentCwd).trim()
+  const hasCwd = currentCwd.length > 0
+
+  const cwdName = hasCwd
+    ? (currentCwd
+        .split(/[\\/]+/)
+        .filter(Boolean)
+        .pop() ?? currentCwd)
+    : 'No folder selected'
+
+  const { data, loadChildren, openState, refreshRoot, rootError, rootLoading, setNodeOpen } = useProjectTree(currentCwd)
+
+  const chooseFolder = async () => {
+    const selected = await window.hermesDesktop?.selectPaths({
+      defaultPath: hasCwd ? currentCwd : undefined,
+      directories: true,
+      multiple: false,
+      title: 'Change working directory'
+    })
+
+    if (selected?.[0]) {
+      await onChangeCwd(selected[0])
+    }
+  }
+
+  const previewFile = async (path: string) => {
+    try {
+      const preview = await normalizeOrLocalPreviewTarget(path, currentCwd || undefined)
+
+      if (!preview) {
+        throw new Error(`Could not preview ${path}`)
+      }
+
+      setCurrentSessionPreviewTarget(preview, 'file-browser', path)
+    } catch (error) {
+      notifyError(error, 'Preview unavailable')
+    }
+  }
+
+  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)] before:absolute before:inset-x-0 before:top-(--titlebar-height) before:z-1 before:h-px before:bg-(--ui-stroke-tertiary)"
+    >
+      <RightSidebarChrome activeTab={activeTab} branch={currentBranch} />
+
+      {activeTab === 'terminal' ? (
+        <TerminalTab cwd={currentCwd} onAddSelectionToChat={onAddTerminalSelection} />
+      ) : (
+        <FilesystemTab
+          cwd={currentCwd}
+          cwdName={cwdName}
+          data={data}
+          error={rootError}
+          hasCwd={hasCwd}
+          loading={rootLoading}
+          onActivateFile={onActivateFile}
+          onActivateFolder={onActivateFolder}
+          onChangeFolder={chooseFolder}
+          onLoadChildren={loadChildren}
+          onNodeOpenChange={setNodeOpen}
+          onPreviewFile={previewFile}
+          onRefresh={() => void refreshRoot()}
+          openState={openState}
+        />
+      )}
+    </aside>
+  )
+}
+
+function RightSidebarChrome({ activeTab, branch }: { activeTab: RightSidebarTabId; branch: string }) {
+  return (
+    <header className="shrink-0 bg-transparent text-[0.75rem]">
+      <div className="flex items-center gap-2 border-b border-(--ui-stroke-tertiary) px-2.5 py-1">
+        <nav aria-label="Right sidebar panels" className="flex min-w-0 items-center gap-1">
+          {RIGHT_SIDEBAR_TABS.map(tab => (
+            <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'
+              )}
+              data-active={tab.id === activeTab}
+              key={tab.id}
+              onClick={() => setRightSidebarTab(tab.id)}
+              title={tab.label}
+              type="button"
+            >
+              <Codicon name={tab.icon} size="0.875rem" />
+            </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" />
+            <span className="truncate">{branch}</span>
+          </span>
+        )}
+      </div>
+    </header>
+  )
+}
+
+interface FilesystemTabProps extends FileTreeBodyProps {
+  cwdName: string
+  hasCwd: boolean
+  onChangeFolder: () => Promise<void> | void
+  onRefresh: () => void
+}
+
+function FilesystemTab({
+  cwd,
+  cwdName,
+  data,
+  error,
+  hasCwd,
+  loading,
+  onActivateFile,
+  onActivateFolder,
+  onChangeFolder,
+  onLoadChildren,
+  onNodeOpenChange,
+  onPreviewFile,
+  onRefresh,
+  openState
+}: FilesystemTabProps) {
+  return (
+    <div className="group/project-header flex min-h-0 flex-1 flex-col">
+      <RightSidebarSectionHeader>
+        <button
+          className="flex min-w-0 flex-1 items-center rounded-md text-left hover:text-(--ui-text-secondary)"
+          onClick={() => void onChangeFolder()}
+          title={hasCwd ? cwd : 'No folder selected'}
+          type="button"
+        >
+          <SidebarPanelLabel>{cwdName}</SidebarPanelLabel>
+        </button>
+        <Button
+          aria-label="Refresh tree"
+          className="pointer-events-none size-6 shrink-0 rounded-md text-sidebar-foreground/70 opacity-0 transition-opacity hover:bg-sidebar-accent! hover:text-sidebar-accent-foreground! focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-sidebar-ring 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"
+          disabled={!hasCwd || loading}
+          onClick={onRefresh}
+          size="icon"
+          title="Refresh tree"
+          variant="ghost"
+        >
+          <Codicon name="refresh" size="0.8125rem" spinning={loading} />
+        </Button>
+      </RightSidebarSectionHeader>
+      <FileTreeBody
+        cwd={cwd}
+        data={data}
+        error={error}
+        loading={loading}
+        onActivateFile={onActivateFile}
+        onActivateFolder={onActivateFolder}
+        onLoadChildren={onLoadChildren}
+        onNodeOpenChange={onNodeOpenChange}
+        onPreviewFile={onPreviewFile}
+        openState={openState}
+      />
+    </div>
+  )
+}
+
+export function RightSidebarSectionHeader({ children }: { children: ReactNode }) {
+  return <div className="flex h-7 shrink-0 items-center px-2">{children}</div>
+}
+
+interface FileTreeBodyProps {
+  cwd: string
+  data: ReturnType<typeof useProjectTree>['data']
+  error: string | null
+  loading: boolean
+  onActivateFile: (path: string) => void
+  onActivateFolder: (path: string) => void
+  onLoadChildren: (id: string) => void | Promise<void>
+  onNodeOpenChange: (id: string, open: boolean) => void
+  onPreviewFile?: (path: string) => void
+  openState: ReturnType<typeof useProjectTree>['openState']
+}
+
+function FileTreeBody({
+  cwd,
+  data,
+  error,
+  loading,
+  onActivateFile,
+  onActivateFolder,
+  onLoadChildren,
+  onNodeOpenChange,
+  onPreviewFile,
+  openState
+}: FileTreeBodyProps) {
+  if (!cwd) {
+    return <EmptyState body="Set a working directory from the status bar to browse files." title="No project" />
+  }
+
+  if (error) {
+    return <EmptyState body={`Could not read this folder (${error}).`} title="Unreadable" />
+  }
+
+  if (loading && data.length === 0) {
+    return <FileTreeLoadingState />
+  }
+
+  if (data.length === 0) {
+    return <EmptyState body="This folder is empty." title="Empty" />
+  }
+
+  return (
+    <ProjectTree
+      data={data}
+      onActivateFile={onActivateFile}
+      onActivateFolder={onActivateFolder}
+      onLoadChildren={onLoadChildren}
+      onNodeOpenChange={onNodeOpenChange}
+      onPreviewFile={onPreviewFile}
+      openState={openState}
+    />
+  )
+}
+
+function FileTreeLoadingState() {
+  return (
+    <div aria-label="Loading file tree" className="grid min-h-0 flex-1 place-items-center px-3" role="status">
+      <Loader
+        aria-hidden="true"
+        className="size-8 text-(--ui-text-tertiary)"
+        pathSteps={180}
+        role="presentation"
+        strokeScale={0.68}
+        type="spiral-search"
+      />
+    </div>
+  )
+}
+
+function EmptyState({ body, title }: { body: string; title: string }) {
+  return (
+    <div className="flex min-h-0 flex-1 flex-col items-center justify-center gap-1 px-4 text-center">
+      <div className="text-[0.7rem] font-semibold uppercase tracking-[0.07em] text-muted-foreground/75">{title}</div>
+      <div className="text-[0.68rem] leading-relaxed text-muted-foreground/65">{body}</div>
+    </div>
+  )
+}
diff --git a/apps/desktop/src/app/right-sidebar/store.ts b/apps/desktop/src/app/right-sidebar/store.ts
new file mode 100644
index 00000000000..805be693003
--- /dev/null
+++ b/apps/desktop/src/app/right-sidebar/store.ts
@@ -0,0 +1,9 @@
+import { atom } from 'nanostores'
+
+export type RightSidebarTabId = 'files' | 'git' | 'terminal' | 'web'
+
+export const $rightSidebarTab = atom<RightSidebarTabId>('files')
+
+export function setRightSidebarTab(tab: RightSidebarTabId) {
+  $rightSidebarTab.set(tab)
+}
diff --git a/apps/desktop/src/app/right-sidebar/terminal/index.tsx b/apps/desktop/src/app/right-sidebar/terminal/index.tsx
new file mode 100644
index 00000000000..a9f2f4995a8
--- /dev/null
+++ b/apps/desktop/src/app/right-sidebar/terminal/index.tsx
@@ -0,0 +1,63 @@
+import '@xterm/xterm/css/xterm.css'
+
+import { Button } from '@/components/ui/button'
+import { Loader } from '@/components/ui/loader'
+
+import { SidebarPanelLabel } from '../../shell/sidebar-label'
+
+import { addSelectionShortcutLabel } from './selection'
+import { useTerminalSession } from './use-terminal-session'
+
+interface TerminalTabProps {
+  cwd: string
+  onAddSelectionToChat: (text: string, label?: string) => void
+}
+
+export function TerminalTab({ cwd, onAddSelectionToChat }: TerminalTabProps) {
+  const { addSelectionToChat, hostRef, selection, selectionStyle, shellName, status } = useTerminalSession({
+    cwd,
+    onAddSelectionToChat
+  })
+
+  return (
+    <div className="relative flex min-h-0 flex-1 flex-col">
+      <div className="flex h-7 shrink-0 items-center px-3">
+        <SidebarPanelLabel>{shellName}</SidebarPanelLabel>
+      </div>
+      <div className="relative min-h-0 flex-1 px-2 pb-2">
+        {status === 'starting' && (
+          <div className="pointer-events-none absolute inset-0 z-10 grid place-items-center">
+            <Loader
+              className="size-8 text-(--ui-text-tertiary)"
+              pathSteps={180}
+              strokeScale={0.68}
+              type="spiral-search"
+            />
+          </div>
+        )}
+        {selection.trim() && (
+          <div className="absolute z-50 flex items-center gap-1" style={selectionStyle ?? { right: 12, top: 8 }}>
+            <Button
+              className="h-6 rounded-md px-2 text-[0.68rem] shadow-md backdrop-blur-md"
+              onClick={event => event.preventDefault()}
+              onMouseDown={event => {
+                event.preventDefault()
+                event.stopPropagation()
+                addSelectionToChat()
+              }}
+              type="button"
+              variant="secondary"
+            >
+              Add to chat
+              <span className="ml-1 text-[0.6rem] text-(--ui-text-tertiary)">{addSelectionShortcutLabel()}</span>
+            </Button>
+          </div>
+        )}
+        <div
+          className="h-full min-h-0 overflow-hidden px-1 py-1 text-(--ui-text-secondary) [&_.xterm]:h-full [&_.xterm-screen]:bg-transparent! [&_.xterm-viewport]:bg-transparent!"
+          ref={hostRef}
+        />
+      </div>
+    </div>
+  )
+}
diff --git a/apps/desktop/src/app/right-sidebar/terminal/selection.ts b/apps/desktop/src/app/right-sidebar/terminal/selection.ts
new file mode 100644
index 00000000000..ed202b5ce6f
--- /dev/null
+++ b/apps/desktop/src/app/right-sidebar/terminal/selection.ts
@@ -0,0 +1,96 @@
+import type { ITheme, Terminal } from '@xterm/xterm'
+import type { CSSProperties } from 'react'
+
+// Solarized (Ethan Schoonover) for both modes. The accent palette is shared
+// — Schoonover's design is that ANSI 0–15 are identical between Light and
+// Dark; only fg/bg/cursor swap (`base00/01` vs `base0/1`). We skip both
+// Solarized backgrounds (`base3` cream / `base03` slate) and keep the glass
+// translucent in either mode.
+//
+// Heads-up: ANSI 7 (`white` = `base2` #eee8d5) is the lightest cream by
+// design — near-invisible against light glass. Bump to `base1` (#93a1a1)
+// if anything that emits `\x1b[37m` (e.g. tmux status bars) breaks.
+//
+// Palette source: altercation/solarized (iTerm2 scheme).
+const SOLARIZED_ANSI: ITheme = {
+  black: '#073642',
+  red: '#dc322f',
+  green: '#859900',
+  yellow: '#b58900',
+  blue: '#268bd2',
+  magenta: '#d33682',
+  cyan: '#2aa198',
+  white: '#eee8d5',
+  brightBlack: '#002b36',
+  brightRed: '#cb4b16',
+  brightGreen: '#586e75',
+  brightYellow: '#657b83',
+  brightBlue: '#839496',
+  brightMagenta: '#6c71c4',
+  brightCyan: '#93a1a1',
+  brightWhite: '#fdf6e3'
+}
+
+const TRANSPARENT_GLASS: ITheme = {
+  background: '#00000000',
+  selectionBackground: '#8c8c8c33'
+}
+
+// The only thing Schoonover swaps between modes: the fg + cursor pair.
+const MODE_TONES = {
+  light: { foreground: '#657b83', cursor: '#586e75', cursorAccent: '#fdf6e3' }, // base00 / base01 / base3
+  dark: { foreground: '#839496', cursor: '#93a1a1', cursorAccent: '#002b36' } //   base0  / base1  / base03
+}
+
+export const terminalTheme = (mode: 'light' | 'dark'): ITheme => ({
+  ...SOLARIZED_ANSI,
+  ...TRANSPARENT_GLASS,
+  ...MODE_TONES[mode]
+})
+
+export const isMacPlatform = () => navigator.platform.toLowerCase().includes('mac')
+
+export const addSelectionShortcutLabel = () => (isMacPlatform() ? '⌘L' : 'Ctrl+L')
+
+export function isAddSelectionShortcut(event: KeyboardEvent) {
+  return isMacPlatform()
+    ? event.metaKey && !event.shiftKey && event.key.toLowerCase() === 'l'
+    : event.ctrlKey && !event.shiftKey && event.key.toLowerCase() === 'l'
+}
+
+function selectionLineCount(text: string) {
+  return Math.max(1, text.trim().split(/\r?\n/).length)
+}
+
+export function terminalSelectionLabel(term: Terminal, shellName: string, text: string) {
+  const position = term.getSelectionPosition()
+
+  if (position) {
+    return position.start.y === position.end.y
+      ? `${shellName}:${position.start.y}`
+      : `${shellName}:${position.start.y}-${position.end.y}`
+  }
+
+  const lines = selectionLineCount(text)
+
+  return `${shellName}:${lines} line${lines === 1 ? '' : 's'}`
+}
+
+export function terminalSelectionAnchor(host: HTMLDivElement): CSSProperties | null {
+  const selectionRects = Array.from(host.querySelectorAll<HTMLElement>('.xterm-selection div'))
+    .map(node => node.getBoundingClientRect())
+    .filter(rect => rect.width > 0 && rect.height > 0)
+
+  const rect = selectionRects.at(-1)
+
+  if (!rect) {
+    return null
+  }
+
+  const hostRect = host.getBoundingClientRect()
+  const buttonWidth = 128
+  const left = Math.min(Math.max(rect.left - hostRect.left, 8), Math.max(8, host.clientWidth - buttonWidth - 8))
+  const top = Math.min(Math.max(rect.bottom - hostRect.top + 4, 8), Math.max(8, host.clientHeight - 34))
+
+  return { left, top }
+}
diff --git a/apps/desktop/src/app/right-sidebar/terminal/use-terminal-session.ts b/apps/desktop/src/app/right-sidebar/terminal/use-terminal-session.ts
new file mode 100644
index 00000000000..8935da82759
--- /dev/null
+++ b/apps/desktop/src/app/right-sidebar/terminal/use-terminal-session.ts
@@ -0,0 +1,346 @@
+import { FitAddon } from '@xterm/addon-fit'
+import { Unicode11Addon } from '@xterm/addon-unicode11'
+import { WebLinksAddon } from '@xterm/addon-web-links'
+import { Terminal } from '@xterm/xterm'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import type { CSSProperties } from 'react'
+
+import { triggerHaptic } from '@/lib/haptics'
+import { useTheme } from '@/themes/context'
+
+import { isAddSelectionShortcut, terminalSelectionAnchor, terminalSelectionLabel, terminalTheme } from './selection'
+
+type TerminalStatus = 'closed' | 'open' | 'starting'
+
+function readEscapeSequence(data: string, index: number) {
+  if (data.charCodeAt(index) !== 0x1b || index + 1 >= data.length) {
+    return null
+  }
+
+  const kind = data[index + 1]
+
+  if (kind === '[') {
+    for (let i = index + 2; i < data.length; i += 1) {
+      const code = data.charCodeAt(i)
+
+      if (code >= 0x40 && code <= 0x7e) {
+        return data.slice(index, i + 1)
+      }
+    }
+  }
+
+  if (kind === ']') {
+    for (let i = index + 2; i < data.length; i += 1) {
+      if (data.charCodeAt(i) === 0x07) {
+        return data.slice(index, i + 1)
+      }
+
+      if (data.charCodeAt(i) === 0x1b && data[i + 1] === '\\') {
+        return data.slice(index, i + 2)
+      }
+    }
+  }
+
+  return data.slice(index, Math.min(index + 2, data.length))
+}
+
+function stripEscapeSequences(data: string) {
+  let index = 0
+  let text = ''
+
+  while (index < data.length) {
+    const sequence = readEscapeSequence(data, index)
+
+    if (sequence) {
+      index += sequence.length
+    } else {
+      text += data[index]
+      index += 1
+    }
+  }
+
+  return text
+}
+
+function isStartupSpacer(data: string) {
+  const text = stripEscapeSequences(data).replace(/[\s\r\n]/g, '')
+
+  return text === '' || text === '%'
+}
+
+function stripInitialPromptGap(data: string) {
+  let index = 0
+  let prefix = ''
+
+  while (index < data.length) {
+    const sequence = readEscapeSequence(data, index)
+
+    if (sequence) {
+      prefix += sequence
+      index += sequence.length
+    } else if (data[index] === '\r' || data[index] === '\n') {
+      index += 1
+    } else {
+      return prefix + data.slice(index)
+    }
+  }
+
+  return prefix
+}
+
+interface UseTerminalSessionOptions {
+  cwd: string
+  onAddSelectionToChat: (text: string, label?: string) => void
+}
+
+export function useTerminalSession({ cwd, onAddSelectionToChat }: UseTerminalSessionOptions) {
+  const hostRef = useRef<HTMLDivElement | null>(null)
+  const termRef = useRef<Terminal | null>(null)
+  const sessionIdRef = useRef<string | null>(null)
+  const shellNameRef = useRef('shell')
+  const selectionLabelRef = useRef('')
+  const selectionRef = useRef('')
+  const onAddSelectionToChatRef = useRef(onAddSelectionToChat)
+  const { resolvedMode } = useTheme()
+  const resolvedModeRef = useRef(resolvedMode)
+  const [status, setStatus] = useState<TerminalStatus>('starting')
+  const [selection, setSelection] = useState('')
+  const [selectionStyle, setSelectionStyle] = useState<CSSProperties | null>(null)
+  const [shellName, setShellName] = useState('shell')
+
+  useEffect(() => {
+    onAddSelectionToChatRef.current = onAddSelectionToChat
+  }, [onAddSelectionToChat])
+
+  useEffect(() => {
+    resolvedModeRef.current = resolvedMode
+
+    if (termRef.current) {
+      termRef.current.options.theme = terminalTheme(resolvedMode)
+    }
+  }, [resolvedMode])
+
+  const addSelectionToChat = useCallback(() => {
+    const selectedText = selectionRef.current || termRef.current?.getSelection() || ''
+
+    const label =
+      selectionLabelRef.current ||
+      (termRef.current ? terminalSelectionLabel(termRef.current, shellNameRef.current, selectedText) : 'selection')
+
+    const trimmed = selectedText.trim()
+
+    if (!trimmed) {
+      return
+    }
+
+    onAddSelectionToChatRef.current(trimmed, label)
+    termRef.current?.clearSelection()
+    selectionRef.current = ''
+    selectionLabelRef.current = ''
+    setSelection('')
+    setSelectionStyle(null)
+    triggerHaptic('selection')
+  }, [])
+
+  useEffect(() => {
+    if (!selection.trim()) {
+      return
+    }
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (!isAddSelectionShortcut(event)) {
+        return
+      }
+
+      event.preventDefault()
+      event.stopPropagation()
+      addSelectionToChat()
+    }
+
+    window.addEventListener('keydown', onKeyDown, { capture: true })
+
+    return () => window.removeEventListener('keydown', onKeyDown, { capture: true })
+  }, [addSelectionToChat, selection])
+
+  useEffect(() => {
+    const host = hostRef.current
+    const terminalApi = window.hermesDesktop?.terminal
+
+    if (!host || !terminalApi) {
+      setStatus('closed')
+
+      return
+    }
+
+    let disposed = false
+    const cleanup: Array<() => void> = []
+    let lastSentSize: { cols: number; rows: number } | null = null
+
+    const term = new Terminal({
+      allowProposedApi: true,
+      allowTransparency: true,
+      convertEol: true,
+      cursorBlink: true,
+      fontFamily: "'SF Mono', 'Menlo', 'Cascadia Code', 'JetBrains Mono', monospace",
+      fontSize: 11,
+      lineHeight: 1.12,
+      macOptionIsMeta: true,
+      scrollback: 1000,
+      theme: terminalTheme(resolvedModeRef.current)
+    })
+
+    const fit = new FitAddon()
+
+    termRef.current = term
+    term.loadAddon(fit)
+    term.loadAddon(new Unicode11Addon())
+    term.loadAddon(new WebLinksAddon())
+    term.unicode.activeVersion = '11'
+    term.open(host)
+
+    const fitAndResize = () => {
+      if (disposed || !host.isConnected || host.clientWidth <= 0 || host.clientHeight <= 0) {
+        return
+      }
+
+      try {
+        fit.fit()
+      } catch {
+        return
+      }
+
+      const id = sessionIdRef.current
+
+      if (id && (lastSentSize?.cols !== term.cols || lastSentSize.rows !== term.rows)) {
+        lastSentSize = { cols: term.cols, rows: term.rows }
+        void terminalApi.resize(id, { cols: term.cols, rows: term.rows })
+      }
+    }
+
+    const resizeObserver = new ResizeObserver(fitAndResize)
+    resizeObserver.observe(host)
+    cleanup.push(() => resizeObserver.disconnect())
+
+    const dataDisposable = term.onData(data => {
+      const id = sessionIdRef.current
+
+      if (id) {
+        void terminalApi.write(id, data)
+      }
+    })
+
+    cleanup.push(() => dataDisposable.dispose())
+
+    const selectionDisposable = term.onSelectionChange(() => {
+      const next = term.getSelection()
+      selectionRef.current = next
+      selectionLabelRef.current = next.trim() ? terminalSelectionLabel(term, shellNameRef.current, next) : ''
+      setSelection(next)
+      setSelectionStyle(next.trim() ? terminalSelectionAnchor(host) : null)
+    })
+
+    cleanup.push(() => selectionDisposable.dispose())
+
+    term.attachCustomKeyEventHandler(event => {
+      if (event.type !== 'keydown') {
+        return true
+      }
+
+      if (isAddSelectionShortcut(event) && term.hasSelection()) {
+        event.preventDefault()
+        addSelectionToChat()
+
+        return false
+      }
+
+      return true
+    })
+
+    fitAndResize()
+
+    void terminalApi
+      .start({ cols: term.cols, cwd, rows: term.rows })
+      .then(session => {
+        if (disposed) {
+          void terminalApi.dispose(session.id)
+
+          return
+        }
+
+        sessionIdRef.current = session.id
+        lastSentSize = { cols: term.cols, rows: term.rows }
+        shellNameRef.current = session.shell || 'shell'
+        setShellName(session.shell || 'shell')
+
+        if (term.hasSelection()) {
+          const currentSelection = term.getSelection()
+          selectionRef.current = currentSelection
+          selectionLabelRef.current = terminalSelectionLabel(term, shellNameRef.current, currentSelection)
+        } else {
+          selectionRef.current = ''
+          selectionLabelRef.current = ''
+        }
+
+        setStatus('open')
+        let wrotePromptContent = false
+
+        cleanup.push(
+          terminalApi.onData(session.id, data => {
+            if (wrotePromptContent) {
+              term.write(data)
+
+              return
+            }
+
+            if (isStartupSpacer(data)) {
+              return
+            }
+
+            const next = stripInitialPromptGap(data)
+
+            if (next) {
+              wrotePromptContent = true
+              term.write(next)
+            }
+          }),
+          terminalApi.onExit(session.id, sessionExit => {
+            const { code, signal } = sessionExit
+            setStatus('closed')
+            term.write(`\r\n[terminal exited${signal ? `: ${signal}` : code !== null ? `: ${code}` : ''}]\r\n`)
+          })
+        )
+        window.requestAnimationFrame(fitAndResize)
+      })
+      .catch(error => {
+        setStatus('closed')
+        term.write(`Terminal failed to start: ${error instanceof Error ? error.message : String(error)}\r\n`)
+      })
+
+    return () => {
+      disposed = true
+      cleanup.forEach(run => run())
+
+      const id = sessionIdRef.current
+      sessionIdRef.current = null
+
+      if (id) {
+        void terminalApi.dispose(id)
+      }
+
+      term.dispose()
+      termRef.current = null
+      shellNameRef.current = 'shell'
+      selectionRef.current = ''
+      selectionLabelRef.current = ''
+    }
+  }, [addSelectionToChat, cwd])
+
+  return {
+    addSelectionToChat,
+    hostRef,
+    selection,
+    selectionStyle,
+    shellName,
+    status
+  }
+}
diff --git a/apps/desktop/src/app/session/hooks/use-cwd-actions.ts b/apps/desktop/src/app/session/hooks/use-cwd-actions.ts
index 0c549b7164e..b1122d1c550 100644
--- a/apps/desktop/src/app/session/hooks/use-cwd-actions.ts
+++ b/apps/desktop/src/app/session/hooks/use-cwd-actions.ts
@@ -7,11 +7,16 @@ import type { SessionRuntimeInfo } from '@/types/hermes'
 interface CwdActionsOptions {
   activeSessionId: string | null
   activeSessionIdRef: MutableRefObject<string | null>
-  currentCwd: string
+  onSessionRuntimeInfo?: (info: Pick<SessionRuntimeInfo, 'branch' | 'cwd'>) => void
   requestGateway: <T = unknown>(method: string, params?: Record<string, unknown>) => Promise<T>
 }
 
-export function useCwdActions({ activeSessionId, activeSessionIdRef, currentCwd, requestGateway }: CwdActionsOptions) {
+export function useCwdActions({
+  activeSessionId,
+  activeSessionIdRef,
+  onSessionRuntimeInfo,
+  requestGateway
+}: CwdActionsOptions) {
   const refreshProjectBranch = useCallback(
     async (cwd: string) => {
       const target = cwd.trim()
@@ -44,23 +49,15 @@ export function useCwdActions({ activeSessionId, activeSessionIdRef, currentCwd,
         return
       }
 
-      const persistGlobal = async () => {
-        const info = await requestGateway<{ branch?: string; cwd?: string; value?: string }>('config.set', {
-          ...(activeSessionId && { session_id: activeSessionId }),
-          key: 'terminal.cwd',
-          value: trimmed
-        })
-
-        setCurrentCwd(info.cwd || info.value || trimmed)
-
-        if (!activeSessionId) {
-          setCurrentBranch(info.branch || '')
-        }
-      }
-
       if (!activeSessionId) {
         try {
-          await persistGlobal()
+          const info = await requestGateway<{ branch?: string; cwd?: string }>('config.get', {
+            key: 'project',
+            cwd: trimmed
+          })
+
+          setCurrentCwd(info.cwd || trimmed)
+          setCurrentBranch(info.branch || '')
         } catch (err) {
           notifyError(err, 'Working directory change failed')
         }
@@ -76,44 +73,27 @@ export function useCwdActions({ activeSessionId, activeSessionIdRef, currentCwd,
 
         setCurrentCwd(info.cwd || trimmed)
         setCurrentBranch(info.branch || '')
+        onSessionRuntimeInfo?.({ branch: info.branch || '', cwd: info.cwd || trimmed })
       } catch (err) {
         const message = err instanceof Error ? err.message : String(err)
 
-        // Older gateways without `session.cwd.set` fall back to a global write —
-        // user has to restart the active session for it to take effect.
         if (!message.includes('unknown method')) {
           notifyError(err, 'Working directory change failed')
 
           return
         }
 
-        try {
-          await persistGlobal()
-          notify({
-            kind: 'warning',
-            title: 'Working directory saved',
-            message: 'Restart the desktop backend to apply cwd changes to this active session.'
-          })
-        } catch (fallbackErr) {
-          notifyError(fallbackErr, 'Working directory change failed')
-        }
+        setCurrentCwd(trimmed)
+        setCurrentBranch('')
+        notify({
+          kind: 'warning',
+          title: 'Working directory staged',
+          message: 'Restart the desktop backend to apply cwd changes to this active session.'
+        })
       }
     },
-    [activeSessionId, requestGateway]
+    [activeSessionId, onSessionRuntimeInfo, requestGateway]
   )
 
-  const browseSessionCwd = useCallback(async () => {
-    const paths = await window.hermesDesktop?.selectPaths({
-      title: 'Change working directory',
-      defaultPath: currentCwd || undefined,
-      directories: true,
-      multiple: false
-    })
-
-    if (paths?.[0]) {
-      await changeSessionCwd(paths[0])
-    }
-  }, [changeSessionCwd, currentCwd])
-
-  return { browseSessionCwd, changeSessionCwd, refreshProjectBranch }
+  return { changeSessionCwd, refreshProjectBranch }
 }
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 8a84ba31b38..3410ae9deb0 100644
--- a/apps/desktop/src/app/session/hooks/use-message-stream.ts
+++ b/apps/desktop/src/app/session/hooks/use-message-stream.ts
@@ -61,6 +61,21 @@ interface QueuedStreamDeltas {
 
 const STREAM_DELTA_FLUSH_MS = 16
 
+// Gateway/provider failures sometimes arrive as message.complete text instead
+// of an explicit error event. Treat matches as inline assistant errors so they
+// persist like real error events and don't get erased by hydrate fallback.
+const COMPLETION_ERROR_PATTERNS = [
+  /^API call failed after \d+ retries:/i,
+  /^HTTP\s+\d{3}\b/i,
+  /^(Provider|Gateway)\s+error:/i
+]
+
+function completionErrorText(finalText: string): string | null {
+  const text = finalText.trim()
+
+  return text && COMPLETION_ERROR_PATTERNS.some(re => re.test(text)) ? text : null
+}
+
 const SUBAGENT_EVENT_TYPES = new Set([
   'subagent.spawn_requested',
   'subagent.start',
@@ -100,7 +115,9 @@ function parseMaybeRecord(value: unknown): Record<string, unknown> {
 
 const firstString = (...candidates: unknown[]): string => {
   for (const v of candidates) {
-    if (typeof v === 'string' && v) return v
+    if (typeof v === 'string' && v) {
+      return v
+    }
   }
 
   return ''
@@ -111,7 +128,9 @@ function delegateTaskPayloads(
   phase: 'running' | 'complete',
   sourceEventType?: string
 ): Record<string, unknown>[] {
-  if (payload?.name !== 'delegate_task') return []
+  if (payload?.name !== 'delegate_task') {
+    return []
+  }
 
   const args = parseMaybeRecord(payload.args ?? payload.input)
   const result = parseMaybeRecord(payload.result)
@@ -120,6 +139,7 @@ function delegateTaskPayloads(
   const status = phase === 'complete' ? (payload.error ? 'failed' : 'completed') : 'running'
   const toolId = payload.tool_id || payload.tool_call_id || payload.id || 'delegate_task'
   const progressText = firstString(payload.preview, payload.message, payload.context)
+
   const eventType =
     phase === 'complete'
       ? 'subagent.complete'
@@ -372,7 +392,12 @@ export function useMessageStream({
     ) => {
       if (!nativeSubagentSessionsRef.current.has(sessionId)) {
         for (const subagentPayload of delegateTaskPayloads(payload, phase, sourceEventType)) {
-          upsertSubagent(sessionId, subagentPayload, true, phase === 'complete' ? 'delegate.complete' : 'delegate.running')
+          upsertSubagent(
+            sessionId,
+            subagentPayload,
+            true,
+            phase === 'complete' ? 'delegate.complete' : 'delegate.running'
+          )
         }
       }
 
@@ -401,6 +426,7 @@ export function useMessageStream({
 
         const streamId = state.streamId
         const finalText = renderMediaTags(text).trim()
+        const completionError = completionErrorText(finalText)
         const normalize = (value: string) => value.replace(/\s+/g, ' ').trim()
         const dedupeReference = normalize(finalText)
 
@@ -422,10 +448,26 @@ export function useMessageStream({
           return finalText ? [...kept, assistantTextPart(finalText)] : kept
         }
 
-        const completeMessage = (message: ChatMessage): ChatMessage => ({
-          ...message,
-          parts: replaceTextPart(message.parts),
-          pending: false
+        const completeMessage = (message: ChatMessage): ChatMessage =>
+          completionError
+            ? {
+                ...message,
+                error: completionError,
+                parts: message.parts.filter(part => part.type !== 'text'),
+                pending: false
+              }
+            : {
+                ...message,
+                parts: replaceTextPart(message.parts),
+                pending: false
+              }
+
+        const newAssistantFromCompletion = (): ChatMessage => ({
+          id: `assistant-${Date.now()}`,
+          role: 'assistant',
+          parts: completionError ? [] : [assistantTextPart(finalText)],
+          branchGroupId: state.pendingBranchGroup ?? undefined,
+          ...(completionError && { error: completionError })
         })
 
         const prev = state.messages
@@ -448,30 +490,18 @@ export function useMessageStream({
                 messageIndex === index ? completeMessage(message) : message
               )
             } else if (finalText) {
-              nextMessages = [
-                ...prev,
-                {
-                  id: `assistant-${Date.now()}`,
-                  role: 'assistant',
-                  parts: [assistantTextPart(finalText)],
-                  branchGroupId: state.pendingBranchGroup ?? undefined
-                }
-              ]
+              nextMessages = [...prev, newAssistantFromCompletion()]
             }
           } else if (finalText) {
-            nextMessages = [
-              ...prev,
-              {
-                id: `assistant-${Date.now()}`,
-                role: 'assistant',
-                parts: [assistantTextPart(finalText)],
-                branchGroupId: state.pendingBranchGroup ?? undefined
-              }
-            ]
+            nextMessages = [...prev, newAssistantFromCompletion()]
           }
         }
 
-        shouldHydrate = !state.sawAssistantPayload || !finalText
+        const hasInlineError = nextMessages.some(m => m.role === 'assistant' && m.error && !m.hidden)
+        const lastVisible = [...nextMessages].reverse().find(m => !m.hidden)
+        const unresolvedUserTail = lastVisible?.role === 'user'
+        shouldHydrate =
+          !completionError && !hasInlineError && !unresolvedUserTail && (!state.sawAssistantPayload || !finalText)
 
         return {
           ...state,
@@ -499,6 +529,50 @@ export function useMessageStream({
     [activeSessionIdRef, hydrateFromStoredSession, refreshSessions, updateSessionState]
   )
 
+  const failAssistantMessage = useCallback(
+    (sessionId: string, errorMessage: string) => {
+      updateSessionState(sessionId, state => {
+        const streamId = state.streamId ?? `assistant-error-${Date.now()}`
+        const groupId = state.pendingBranchGroup ?? undefined
+        const prev = state.messages
+        const error = errorMessage.trim() || 'Hermes reported an error'
+
+        const nextMessages = prev.some(m => m.id === streamId)
+          ? prev.map(message =>
+              message.id === streamId
+                ? {
+                    ...message,
+                    error,
+                    pending: false
+                  }
+                : message
+            )
+          : [
+              ...prev,
+              {
+                id: streamId,
+                role: 'assistant' as const,
+                parts: [],
+                error,
+                pending: false,
+                branchGroupId: groupId
+              }
+            ]
+
+        return {
+          ...state,
+          messages: nextMessages,
+          streamId: null,
+          pendingBranchGroup: null,
+          sawAssistantPayload: true,
+          awaitingResponse: false,
+          busy: false
+        }
+      })
+    },
+    [updateSessionState]
+  )
+
   const handleGatewayEvent = useCallback(
     (event: RpcEvent) => {
       const payload = event.payload as GatewayEventPayload | undefined
@@ -517,6 +591,8 @@ export function useMessageStream({
         const runningChanged = typeof payload?.running === 'boolean'
 
         if (apply) {
+          const runtimeInfo: { branch?: string; cwd?: string } = {}
+
           if (modelChanged) {
             setCurrentModel(payload!.model || '')
           }
@@ -527,10 +603,20 @@ export function useMessageStream({
 
           if (typeof payload?.cwd === 'string') {
             setCurrentCwd(payload.cwd)
+            runtimeInfo.cwd = payload.cwd
           }
 
           if (typeof payload?.branch === 'string') {
             setCurrentBranch(payload.branch)
+            runtimeInfo.branch = payload.branch
+          }
+
+          if (sessionId && (runtimeInfo.cwd !== undefined || runtimeInfo.branch !== undefined)) {
+            updateSessionState(sessionId, state => ({
+              ...state,
+              branch: runtimeInfo.branch ?? state.branch,
+              cwd: runtimeInfo.cwd ?? state.cwd
+            }))
           }
 
           if (typeof payload?.personality === 'string') {
@@ -721,11 +807,7 @@ export function useMessageStream({
 
         if (sessionId) {
           flushQueuedDeltas(sessionId)
-          updateSessionState(sessionId, state => ({
-            ...state,
-            awaitingResponse: false,
-            busy: false
-          }))
+          failAssistantMessage(sessionId, errorMessage)
         }
 
         if (isActiveEvent) {
@@ -738,6 +820,7 @@ export function useMessageStream({
       appendReasoningDelta,
       activeSessionIdRef,
       completeAssistantMessage,
+      failAssistantMessage,
       flushQueuedDeltas,
       queryClient,
       refreshHermesConfig,
diff --git a/apps/desktop/src/app/session/hooks/use-prompt-actions.ts b/apps/desktop/src/app/session/hooks/use-prompt-actions.ts
index ebb1e7dd6e9..62d685fc701 100644
--- a/apps/desktop/src/app/session/hooks/use-prompt-actions.ts
+++ b/apps/desktop/src/app/session/hooks/use-prompt-actions.ts
@@ -23,7 +23,8 @@ import {
   $composerAttachments,
   addComposerAttachment,
   clearComposerAttachments,
-  type ComposerAttachment
+  type ComposerAttachment,
+  terminalContextBlocksFromDraft
 } from '@/store/composer'
 import { clearNotifications, notify, notifyError } from '@/store/notifications'
 import { requestDesktopOnboarding } from '@/store/onboarding'
@@ -53,6 +54,12 @@ function isProviderSetupError(error: unknown) {
   return isProviderSetupErrorMessage(message)
 }
 
+function inlineErrorMessage(error: unknown, fallback: string): string {
+  const raw = error instanceof Error ? error.message : typeof error === 'string' ? error : fallback
+
+  return (raw.match(/Error invoking remote method '[^']+': Error: (.+)$/)?.[1] ?? raw).replace(/^Error:\s*/, '').trim()
+}
+
 interface PromptActionsOptions {
   activeSessionId: string | null
   activeSessionIdRef: MutableRefObject<string | null>
@@ -202,15 +209,19 @@ export function usePromptActions({
       const visibleText = rawText.trim()
       const usingComposerAttachments = !options?.attachments
       const attachments = options?.attachments ?? $composerAttachments.get()
+
       const contextRefs = attachments
         .map(a => a.refText)
         .filter(Boolean)
         .join('\n')
+
+      const terminalContextBlocks = terminalContextBlocksFromDraft(rawText).join('\n\n')
       const hasImage = attachments.some(a => a.kind === 'image')
       const attachmentRefs = attachments.map(attachmentDisplayText).filter((r): r is string => Boolean(r))
 
       const text =
-        [contextRefs, visibleText].filter(Boolean).join('\n\n') || (hasImage ? 'What do you see in this image?' : '')
+        [contextRefs, terminalContextBlocks, visibleText].filter(Boolean).join('\n\n') ||
+        (hasImage ? 'What do you see in this image?' : '')
 
       if (!text || busyRef.current) {
         return false
@@ -311,12 +322,32 @@ export function usePromptActions({
         })
         await requestGateway('prompt.submit', { session_id: sessionId, text })
 
-        if (usingComposerAttachments) clearComposerAttachments()
+        if (usingComposerAttachments) {
+          clearComposerAttachments()
+        }
 
         return true
       } catch (err) {
+        const message = inlineErrorMessage(err, 'Prompt failed')
+
         releaseBusy()
-        updateSessionState(sessionId, state => ({ ...state, busy: false, awaitingResponse: false }))
+        updateSessionState(sessionId, state => ({
+          ...state,
+          messages: [
+            ...state.messages,
+            {
+              id: `assistant-error-${Date.now()}`,
+              role: 'assistant',
+              parts: [],
+              error: message || 'Prompt failed',
+              branchGroupId: state.pendingBranchGroup ?? undefined
+            }
+          ],
+          busy: false,
+          awaitingResponse: false,
+          pendingBranchGroup: null,
+          sawAssistantPayload: true
+        }))
 
         if (isProviderSetupError(err)) {
           requestDesktopOnboarding('Add a provider credential before sending your first message.')
@@ -325,6 +356,7 @@ export function usePromptActions({
         }
 
         notifyError(err, 'Prompt failed')
+
         return false
       }
     },
@@ -681,10 +713,16 @@ export function usePromptActions({
         return
       }
 
-      const truncate_before_user_ordinal = visibleUserOrdinal(messages, sourceIndex)
+      // Failed turn: optimistic user msg never reached the gateway, so truncating
+      // by ordinal would 422. Submit as a plain resend instead.
+      const nextMessage = messages[sourceIndex + 1]
+      const isFailedTurn = nextMessage?.role === 'assistant' && Boolean(nextMessage.error)
       const editedMessage: ChatMessage = { ...source, parts: [textPart(text)] }
 
       clearNotifications()
+      busyRef.current = true
+      setBusy(true)
+      setAwaitingResponse(true)
       updateSessionState(sessionId, state => ({
         ...state,
         busy: true,
@@ -695,14 +733,39 @@ export function usePromptActions({
         messages: [...state.messages.slice(0, sourceIndex), editedMessage]
       }))
 
+      const submit = (truncateOrdinal?: number) =>
+        requestGateway('prompt.submit', {
+          session_id: sessionId,
+          text,
+          ...(truncateOrdinal !== undefined && { truncate_before_user_ordinal: truncateOrdinal })
+        })
+
+      const isStaleTargetError = (err: unknown) =>
+        /no longer in session history|not in session history/i.test(err instanceof Error ? err.message : String(err))
+
       try {
-        await requestGateway('prompt.submit', { session_id: sessionId, text, truncate_before_user_ordinal })
+        await submit(isFailedTurn ? undefined : visibleUserOrdinal(messages, sourceIndex))
       } catch (err) {
+        let surfaced = err
+
+        if (!isFailedTurn && isStaleTargetError(err)) {
+          try {
+            await submit()
+
+            return
+          } catch (retryErr) {
+            surfaced = retryErr
+          }
+        }
+
+        busyRef.current = false
+        setBusy(false)
+        setAwaitingResponse(false)
         updateSessionState(sessionId, state => ({ ...state, busy: false, awaitingResponse: false }))
-        notifyError(err, 'Edit failed')
+        notifyError(surfaced, 'Edit failed')
       }
     },
-    [activeSessionId, activeSessionIdRef, requestGateway, updateSessionState]
+    [activeSessionId, activeSessionIdRef, busyRef, requestGateway, updateSessionState]
   )
 
   const handleThreadMessagesChange = useCallback(
diff --git a/apps/desktop/src/app/session/hooks/use-session-actions.ts b/apps/desktop/src/app/session/hooks/use-session-actions.ts
index f1685de244e..da13409ae0c 100644
--- a/apps/desktop/src/app/session/hooks/use-session-actions.ts
+++ b/apps/desktop/src/app/session/hooks/use-session-actions.ts
@@ -3,7 +3,7 @@ import { useCallback, useRef } from 'react'
 import type { NavigateFunction } from 'react-router-dom'
 
 import { deleteSession, getSessionMessages } from '@/hermes'
-import { type ChatMessage, chatMessageText, toChatMessages } from '@/lib/chat-messages'
+import { type ChatMessage, chatMessageText, preserveLocalAssistantErrors, toChatMessages } from '@/lib/chat-messages'
 import { normalizePersonalityValue } from '@/lib/chat-runtime'
 import { embeddedImageUrls, textWithoutEmbeddedImages } from '@/lib/embedded-images'
 import { clearComposerAttachments, clearComposerDraft } from '@/store/composer'
@@ -12,6 +12,7 @@ import { $pinnedSessionIds } from '@/store/layout'
 import { clearNotifications, notify, notifyError } from '@/store/notifications'
 import { requestDesktopOnboarding } from '@/store/onboarding'
 import {
+  $currentCwd,
   $messages,
   $sessions,
   setActiveSessionId,
@@ -91,6 +92,7 @@ function chatMessagesEquivalent(a: ChatMessage, b: ChatMessage): boolean {
     a.id !== b.id ||
     a.role !== b.role ||
     a.pending !== b.pending ||
+    a.error !== b.error ||
     a.hidden !== b.hidden ||
     a.branchGroupId !== b.branchGroupId
   ) {
@@ -166,6 +168,7 @@ function upsertOptimisticSession(
   const now = Date.now() / 1000
 
   const session: SessionInfo = {
+    cwd: created.info?.cwd ?? null,
     ended_at: null,
     id,
     input_tokens: 0,
@@ -184,11 +187,23 @@ function upsertOptimisticSession(
   setSessions(prev => [session, ...prev.filter(s => s.id !== id)])
 }
 
-function applyRuntimeInfo(info: SessionCreateResponse['info'] | undefined) {
-  if (!info) {
+function patchSessionWorkspace(sessionId: string, cwd: string | undefined) {
+  if (!cwd) {
     return
   }
 
+  setSessions(prev => prev.map(session => (session.id === sessionId ? { ...session, cwd } : session)))
+}
+
+function applyRuntimeInfo(
+  info: SessionCreateResponse['info'] | undefined
+): Partial<Pick<ClientSessionState, 'branch' | 'cwd'>> | null {
+  if (!info) {
+    return null
+  }
+
+  const sessionState: Partial<Pick<ClientSessionState, 'branch' | 'cwd'>> = {}
+
   if (info.credential_warning) {
     requestDesktopOnboarding(info.credential_warning)
   }
@@ -203,10 +218,12 @@ function applyRuntimeInfo(info: SessionCreateResponse['info'] | undefined) {
 
   if (info.cwd) {
     setCurrentCwd(info.cwd)
+    sessionState.cwd = info.cwd
   }
 
   if (info.branch !== undefined) {
     setCurrentBranch(info.branch || '')
+    sessionState.branch = info.branch || ''
   }
 
   if (typeof info.personality === 'string') {
@@ -228,6 +245,8 @@ function applyRuntimeInfo(info: SessionCreateResponse['info'] | undefined) {
   if (info.usage) {
     setCurrentUsage(current => ({ ...current, ...info.usage }))
   }
+
+  return sessionState
 }
 
 export function useSessionActions({
@@ -269,6 +288,8 @@ export function useSessionActions({
       })
       setSessionStartedAt(null)
       setTurnStartedAt(null)
+      setCurrentCwd('')
+      setCurrentBranch('')
       clearComposerDraft()
       clearComposerAttachments()
       setFreshDraftReady(true)
@@ -284,7 +305,8 @@ export function useSessionActions({
     creatingSessionRef.current = true
 
     try {
-      const created = await requestGateway<SessionCreateResponse>('session.create', { cols: 96 })
+      const cwd = $currentCwd.get().trim()
+      const created = await requestGateway<SessionCreateResponse>('session.create', { cols: 96, ...(cwd && { cwd }) })
       const stored = created.stored_session_id ?? null
 
       if (
@@ -310,7 +332,11 @@ export function useSessionActions({
       setActiveSessionId(created.session_id)
       setSelectedStoredSessionId(stored)
       setSessionStartedAt(Date.now())
-      applyRuntimeInfo(created.info)
+      const runtimeInfo = applyRuntimeInfo(created.info)
+
+      if (runtimeInfo) {
+        updateSessionState(created.session_id, state => ({ ...state, ...runtimeInfo }), stored)
+      }
 
       return created.session_id
     } finally {
@@ -325,7 +351,8 @@ export function useSessionActions({
     getRouteToken,
     navigate,
     requestGateway,
-    selectedStoredSessionIdRef
+    selectedStoredSessionIdRef,
+    updateSessionState
   ])
 
   const selectSidebarItem = useCallback(
@@ -376,6 +403,8 @@ export function useSessionActions({
         setActiveSessionId(cachedRuntimeId)
         activeSessionIdRef.current = cachedRuntimeId
         syncSessionStateToView(cachedRuntimeId, cachedState)
+        setCurrentCwd(cachedState.cwd)
+        setCurrentBranch(cachedState.branch)
         setSessionStartedAt(Date.now())
         clearComposerDraft()
         clearComposerAttachments()
@@ -428,7 +457,7 @@ export function useSessionActions({
           const storedMessages = await getSessionMessages(storedSessionId)
 
           if (isCurrentResume()) {
-            localSnapshot = toChatMessages(storedMessages.messages)
+            localSnapshot = preserveLocalAssistantErrors(toChatMessages(storedMessages.messages), $messages.get())
 
             if (!chatMessageArraysEquivalent($messages.get(), localSnapshot)) {
               setMessages(localSnapshot)
@@ -448,7 +477,11 @@ export function useSessionActions({
         }
 
         const currentMessages = $messages.get()
-        const resumedMessages = reconcileResumeMessages(toChatMessages(resumed.messages), currentMessages)
+
+        const resumedMessages = preserveLocalAssistantErrors(
+          reconcileResumeMessages(toChatMessages(resumed.messages), currentMessages),
+          currentMessages
+        )
         // Avoid a second visible transcript rebuild on resume/switch.
         // `getSessionMessages()` is the stable stored transcript snapshot and
         // paints first; `session.resume` can return a slightly different
@@ -458,19 +491,26 @@ export function useSessionActions({
         // exists; use gateway messages only as a fallback when no local
         // snapshot was available.
 
-        const messagesForView =
+        const preferredMessages =
           localSnapshot.length > 0
             ? localSnapshot
             : chatMessageArraysEquivalent(currentMessages, resumedMessages)
               ? currentMessages
               : resumedMessages
 
+        const messagesForView = preserveLocalAssistantErrors(preferredMessages, currentMessages)
+
         setActiveSessionId(resumed.session_id)
         activeSessionIdRef.current = resumed.session_id
+        const runtimeInfo = applyRuntimeInfo(resumed.info)
+
+        patchSessionWorkspace(storedSessionId, runtimeInfo?.cwd)
+
         updateSessionState(
           resumed.session_id,
           state => ({
             ...state,
+            ...(runtimeInfo ?? {}),
             messages: messagesForView,
             busy: false,
             awaitingResponse: false
@@ -479,7 +519,6 @@ export function useSessionActions({
         )
         clearComposerDraft()
         clearComposerAttachments()
-        applyRuntimeInfo(resumed.info)
       } catch (err) {
         if (!isCurrentResume()) {
           return
@@ -491,7 +530,7 @@ export function useSessionActions({
           return
         }
 
-        setMessages(toChatMessages(fallback.messages))
+        setMessages(preserveLocalAssistantErrors(toChatMessages(fallback.messages), $messages.get()))
         notifyError(err, 'Resume failed')
       } finally {
         if (isCurrentResume()) {
@@ -570,8 +609,11 @@ export function useSessionActions({
 
         clearNotifications()
 
+        const cwd = $currentCwd.get().trim()
+
         const branched = await requestGateway<SessionCreateResponse>('session.create', {
           cols: 96,
+          ...(cwd && { cwd }),
           messages: branchMessages.map(({ content, role }) => ({ content, role })),
           title: 'Branch'
         })
@@ -600,7 +642,13 @@ export function useSessionActions({
 
         clearComposerDraft()
         clearComposerAttachments()
-        applyRuntimeInfo(branched.info)
+        const runtimeInfo = applyRuntimeInfo(branched.info)
+
+        patchSessionWorkspace(routedSessionId, runtimeInfo?.cwd)
+
+        if (runtimeInfo) {
+          updateSessionState(branched.session_id, state => ({ ...state, ...runtimeInfo }), routedSessionId)
+        }
 
         return true
       } catch (err) {
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 8c6bdfd7f2f..398c3c9325d 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
@@ -2,8 +2,9 @@ import { useStore } from '@nanostores/react'
 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, setSessionWorking } from '@/store/session'
+import { $busy, $messages, setSessionWorking } from '@/store/session'
 
 import type { ClientSessionState } from '../../types'
 
@@ -78,6 +79,20 @@ export function useSessionStateCache({
     return created
   }, [])
 
+  const flushPendingViewState = useCallback(() => {
+    const pending = pendingViewStateRef.current
+    pendingViewStateRef.current = null
+
+    if (!pending || pending.sessionId !== activeSessionIdRef.current) {
+      return
+    }
+
+    setMessages(preserveLocalAssistantErrors(pending.state.messages, $messages.get()))
+    setBusy(pending.state.busy)
+    busyRef.current = pending.state.busy
+    setAwaitingResponse(pending.state.awaitingResponse)
+  }, [busyRef, setAwaitingResponse, setBusy, setMessages])
+
   const syncSessionStateToView = useCallback(
     (sessionId: string, state: ClientSessionState) => {
       pendingViewStateRef.current = { sessionId, state }
@@ -87,41 +102,17 @@ export function useSessionStateCache({
       }
 
       if (typeof window === 'undefined') {
-        const pending = pendingViewStateRef.current
-
-        if (!pending || pending.sessionId !== activeSessionIdRef.current) {
-          pendingViewStateRef.current = null
-
-          return
-        }
-
-        pendingViewStateRef.current = null
-        setMessages(pending.state.messages)
-        setBusy(pending.state.busy)
-        busyRef.current = pending.state.busy
-        setAwaitingResponse(pending.state.awaitingResponse)
+        flushPendingViewState()
 
         return
       }
 
       viewSyncRafRef.current = window.requestAnimationFrame(() => {
         viewSyncRafRef.current = null
-        const pending = pendingViewStateRef.current
-
-        if (!pending || pending.sessionId !== activeSessionIdRef.current) {
-          pendingViewStateRef.current = null
-
-          return
-        }
-
-        pendingViewStateRef.current = null
-        setMessages(pending.state.messages)
-        setBusy(pending.state.busy)
-        busyRef.current = pending.state.busy
-        setAwaitingResponse(pending.state.awaitingResponse)
+        flushPendingViewState()
       })
     },
-    [busyRef, setAwaitingResponse, setBusy, setMessages]
+    [flushPendingViewState]
   )
 
   useEffect(
diff --git a/apps/desktop/src/app/settings/appearance-settings.tsx b/apps/desktop/src/app/settings/appearance-settings.tsx
index 78f9df9d692..c35ec3417e5 100644
--- a/apps/desktop/src/app/settings/appearance-settings.tsx
+++ b/apps/desktop/src/app/settings/appearance-settings.tsx
@@ -58,16 +58,16 @@ export function AppearanceSettings() {
 
   return (
     <SettingsContent>
-      <div className="space-y-7">
+      <div className="space-y-5">
         <div>
           <SectionHeading icon={Palette} title="Appearance" />
-          <p className="max-w-2xl text-sm leading-6 text-muted-foreground">
+          <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>
 
-        <section className="rounded-2xl border border-border/50 bg-card/55 p-4 shadow-sm">
+        <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>
@@ -84,8 +84,8 @@ export function AppearanceSettings() {
               return (
                 <button
                   className={cn(
-                    'group rounded-xl border border-border/45 bg-background/55 p-3 text-left transition hover:border-primary/35 hover:bg-accent/45',
-                    active && 'border-primary/65 bg-primary/8 ring-2 ring-primary/25'
+                    '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={() => {
@@ -104,15 +104,17 @@ export function AppearanceSettings() {
                       </span>
                     )}
                   </div>
-                  <div className="mt-3 text-sm font-medium">{label}</div>
-                  <div className="mt-1 text-xs leading-5 text-muted-foreground">{description}</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>
         </section>
 
-        <section className="rounded-2xl border border-border/50 bg-card/55 p-4 shadow-sm">
+        <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>
@@ -142,8 +144,8 @@ export function AppearanceSettings() {
               return (
                 <button
                   className={cn(
-                    'group rounded-xl border border-border/45 bg-background/55 p-3 text-left transition hover:border-primary/35 hover:bg-accent/45',
-                    active && 'border-primary/65 bg-primary/8 ring-2 ring-primary/25'
+                    '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={() => {
@@ -153,21 +155,23 @@ export function AppearanceSettings() {
                   type="button"
                 >
                   <div className="flex items-start justify-between gap-3">
-                    <div className="text-sm font-medium">{option.label}</div>
+                    <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-xs leading-5 text-muted-foreground">{option.description}</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>
               )
             })}
           </div>
         </section>
 
-        <section className="rounded-2xl border border-border/50 bg-card/55 p-4 shadow-sm">
+        <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>
@@ -184,8 +188,8 @@ export function AppearanceSettings() {
               return (
                 <button
                   className={cn(
-                    'rounded-2xl border border-border/45 bg-background/50 p-2.5 text-left transition hover:border-primary/35 hover:bg-accent/35',
-                    active && 'border-primary/65 bg-primary/8 ring-2 ring-primary/25'
+                    '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)'
                   )}
                   key={theme.name}
                   onClick={() => {
@@ -197,8 +201,10 @@ export function AppearanceSettings() {
                   <ThemePreview name={theme.name} />
                   <div className="mt-3 flex items-start justify-between gap-3 px-1">
                     <div className="min-w-0">
-                      <div className="truncate text-sm font-medium">{theme.label}</div>
-                      <div className="mt-0.5 line-clamp-2 text-xs leading-5 text-muted-foreground">
+                      <div className="truncate text-[length:var(--conversation-text-font-size)] font-medium">
+                        {theme.label}
+                      </div>
+                      <div className="mt-0.5 line-clamp-2 text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
                         {theme.description}
                       </div>
                     </div>
diff --git a/apps/desktop/src/app/settings/constants.ts b/apps/desktop/src/app/settings/constants.ts
index 605737b043f..a150bcd6a32 100644
--- a/apps/desktop/src/app/settings/constants.ts
+++ b/apps/desktop/src/app/settings/constants.ts
@@ -1,7 +1,7 @@
 import {
   Brain,
+  type IconComponent,
   Lock,
-  type LucideIcon,
   MessageCircle,
   Mic,
   Monitor,
@@ -302,7 +302,7 @@ export interface ModeOption {
   id: ThemeMode
   label: string
   description: string
-  icon: LucideIcon
+  icon: IconComponent
 }
 
 export const MODE_OPTIONS: ModeOption[] = [
diff --git a/apps/desktop/src/app/settings/gateway-settings.tsx b/apps/desktop/src/app/settings/gateway-settings.tsx
index fddfcd20235..c09f2db47f3 100644
--- a/apps/desktop/src/app/settings/gateway-settings.tsx
+++ b/apps/desktop/src/app/settings/gateway-settings.tsx
@@ -45,22 +45,24 @@ function ModeCard({
   return (
     <button
       className={cn(
-        'rounded-2xl border p-4 text-left transition',
+        'rounded-xl border p-3 text-left transition',
         active
-          ? 'border-primary bg-primary/10 ring-2 ring-primary/15'
-          : 'border-border bg-background/60 hover:bg-muted/40',
+          ? 'border-(--ui-stroke-secondary) bg-(--ui-bg-tertiary)'
+          : 'border-(--ui-stroke-tertiary) bg-(--ui-bg-quinary) hover:bg-(--chrome-action-hover)',
         disabled && 'cursor-not-allowed opacity-50'
       )}
       disabled={disabled}
       onClick={onSelect}
       type="button"
     >
-      <div className="flex items-center gap-2 text-sm font-medium">
+      <div className="flex items-center gap-2 text-[length:var(--conversation-text-font-size)] font-medium">
         <Icon className="size-4 text-muted-foreground" />
         <span>{title}</span>
         {active ? <Check className="ml-auto size-4 text-primary" /> : null}
       </div>
-      <p className="mt-2 text-xs leading-5 text-muted-foreground">{description}</p>
+      <p className="mt-1.5 text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
+        {description}
+      </p>
     </button>
   )
 }
@@ -191,20 +193,20 @@ export function GatewaySettings() {
 
   return (
     <SettingsContent>
-      <div className="mb-6">
-        <div className="flex items-center gap-2 text-sm font-medium">
+      <div className="mb-5">
+        <div className="flex items-center gap-2 text-[length:var(--conversation-text-font-size)] font-medium">
           <Globe className="size-4 text-muted-foreground" />
           Gateway Connection
           {state.envOverride ? <Pill tone="primary">env override</Pill> : null}
         </div>
-        <p className="mt-2 max-w-2xl text-xs leading-5 text-muted-foreground">
+        <p className="mt-2 max-w-2xl text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
           Hermes Desktop starts its own local gateway by default. Use a remote gateway when you want this app to control
           an already-running Hermes backend on another machine or behind a trusted proxy.
         </p>
       </div>
 
       {state.envOverride ? (
-        <div className="mb-5 flex items-start gap-2 rounded-2xl border border-destructive/30 bg-destructive/10 px-4 py-3 text-xs text-destructive">
+        <div className="mb-5 flex items-start gap-2 rounded-xl border border-destructive/30 bg-destructive/10 px-3 py-2.5 text-[length:var(--conversation-caption-font-size)] text-destructive">
           <AlertCircle className="mt-0.5 size-4 shrink-0" />
           <div>
             <div className="font-medium">Environment variables are controlling this desktop session.</div>
diff --git a/apps/desktop/src/app/settings/keys-settings.tsx b/apps/desktop/src/app/settings/keys-settings.tsx
index 32d812dced4..242485e5c8b 100644
--- a/apps/desktop/src/app/settings/keys-settings.tsx
+++ b/apps/desktop/src/app/settings/keys-settings.tsx
@@ -1,9 +1,10 @@
 import { useCallback, useEffect, useMemo, useState } from 'react'
 
 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, X, Zap } from '@/lib/icons'
+import { Check, Eye, EyeOff, Save, Settings2, Trash2, Zap } from '@/lib/icons'
 import { cn } from '@/lib/utils'
 import { notify, notifyError } from '@/store/notifications'
 import type { EnvVarInfo } from '@/types/hermes'
@@ -169,7 +170,7 @@ function EnvVarRow({
             {saving === varKey ? 'Saving' : 'Save'}
           </Button>
           <Button onClick={() => setEdits(c => withoutKey(c, varKey))} size="sm" variant="outline">
-            <X />
+            <Codicon name="close" />
             Cancel
           </Button>
         </div>
diff --git a/apps/desktop/src/app/settings/mcp-settings.tsx b/apps/desktop/src/app/settings/mcp-settings.tsx
index 428b76bbd64..794ea3c4695 100644
--- a/apps/desktop/src/app/settings/mcp-settings.tsx
+++ b/apps/desktop/src/app/settings/mcp-settings.tsx
@@ -1,13 +1,13 @@
+import { useStore } from '@nanostores/react'
 import { useEffect, useMemo, useState } from 'react'
 
 import { OverlayActionButton, OverlayCard } from '@/app/overlays/overlay-chrome'
 import { Input } from '@/components/ui/input'
 import { Textarea } from '@/components/ui/textarea'
-import { getHermesConfigRecord, saveHermesConfig, type HermesGateway } from '@/hermes'
+import { getHermesConfigRecord, type HermesGateway, saveHermesConfig } from '@/hermes'
 import { Package, Wrench } from '@/lib/icons'
 import { notify, notifyError } from '@/store/notifications'
 import { $activeSessionId } from '@/store/session'
-import { useStore } from '@nanostores/react'
 import type { HermesConfigRecord } from '@/types/hermes'
 
 import { includesQuery } from './helpers'
@@ -64,7 +64,10 @@ export function McpSettings({ gateway, onConfigSaved, query }: McpSettingsProps)
 
     getHermesConfigRecord()
       .then(next => {
-        if (cancelled) return
+        if (cancelled) {
+          return
+        }
+
         setConfig(next)
         const first = Object.keys(getServers(next)).sort()[0] ?? null
         setSelected(first)
@@ -76,6 +79,7 @@ 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]
@@ -97,6 +101,7 @@ export function McpSettings({ gateway, onConfigSaved, query }: McpSettingsProps)
 
     if (!nextName) {
       notify({ kind: 'error', title: 'Name required', message: 'Give this MCP server a config key.' })
+
       return
     }
 
@@ -112,6 +117,7 @@ export function McpSettings({ gateway, onConfigSaved, query }: McpSettingsProps)
       parsed = raw as Record<string, unknown>
     } catch (err) {
       notifyError(err, 'Invalid MCP JSON')
+
       return
     }
 
@@ -161,6 +167,7 @@ export function McpSettings({ gateway, onConfigSaved, query }: McpSettingsProps)
   const reloadMcp = async () => {
     if (!gateway) {
       notify({ kind: 'warning', title: 'Gateway unavailable', message: 'Reconnect the gateway before reloading MCP.' })
+
       return
     }
 
diff --git a/apps/desktop/src/app/settings/primitives.tsx b/apps/desktop/src/app/settings/primitives.tsx
index f941a4e1ea5..d883a5b31dc 100644
--- a/apps/desktop/src/app/settings/primitives.tsx
+++ b/apps/desktop/src/app/settings/primitives.tsx
@@ -2,14 +2,14 @@ import type { ReactNode } from 'react'
 
 import { PageLoader } from '@/components/page-loader'
 import { Button } from '@/components/ui/button'
-import type { LucideIcon } from '@/lib/icons'
+import type { IconComponent } from '@/lib/icons'
 import { cn } from '@/lib/utils'
 
 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-8 py-6 pb-24">
-        <div className="mx-auto w-full max-w-5xl">{children}</div>
+      <div className="h-full min-h-0 overflow-y-auto px-5 py-4 pb-20">
+        <div className="mx-auto w-full max-w-4xl">{children}</div>
       </div>
     </section>
   )
@@ -19,7 +19,7 @@ export function Pill({ tone = 'muted', children }: { tone?: 'muted' | 'primary';
   return (
     <span
       className={cn(
-        'inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[0.66rem]',
+        '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'
       )}
     >
@@ -28,9 +28,9 @@ export function Pill({ tone = 'muted', children }: { tone?: 'muted' | 'primary';
   )
 }
 
-export function SectionHeading({ icon: Icon, title, meta }: { icon: LucideIcon; title: string; meta?: string }) {
+export function SectionHeading({ icon: Icon, title, meta }: { icon: IconComponent; title: string; meta?: string }) {
   return (
-    <div className="mb-3 flex items-center gap-2 pt-3.5 text-sm font-medium">
+    <div className="mb-2.5 flex items-center gap-2 pt-2 text-[length:var(--conversation-text-font-size)] font-medium">
       <Icon className="size-4 text-muted-foreground" />
       <span>{title}</span>
       {meta && <Pill>{meta}</Pill>}
@@ -44,7 +44,7 @@ export function NavLink({
   active,
   onClick
 }: {
-  icon: LucideIcon
+  icon: IconComponent
   label: string
   active: boolean
   onClick: () => void
@@ -52,8 +52,10 @@ export function NavLink({
   return (
     <Button
       className={cn(
-        'flex min-h-8 w-full justify-start gap-2 rounded-lg px-2.5 text-left text-sm transition',
-        active ? 'bg-muted text-foreground' : 'text-foreground/80 hover:bg-muted/70'
+        'flex min-h-7 w-full justify-start gap-2 rounded-md px-2 text-left text-[length:var(--conversation-text-font-size)] transition',
+        active
+          ? 'bg-(--ui-bg-tertiary) text-foreground'
+          : 'text-(--ui-text-secondary) hover:bg-(--chrome-action-hover) hover:text-foreground'
       )}
       onClick={onClick}
       size="sm"
@@ -84,13 +86,17 @@ export function ListRow({
   return (
     <div
       className={cn(
-        'grid gap-4 py-3.5 sm:grid-cols-[minmax(0,1fr)_minmax(15rem,22rem)] sm:items-center',
+        'grid gap-3 py-3 sm:grid-cols-[minmax(0,1fr)_minmax(15rem,22rem)] sm:items-center',
         wide && 'sm:grid-cols-1 sm:items-start'
       )}
     >
       <div className="min-w-0">
-        <div className="text-sm font-medium text-foreground">{title}</div>
-        {description && <div className="mt-1 text-xs leading-5 text-muted-foreground">{description}</div>}
+        <div className="text-[length:var(--conversation-text-font-size)] font-medium text-foreground">{title}</div>
+        {description && (
+          <div className="mt-1 text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
+            {description}
+          </div>
+        )}
         {hint && <div className="mt-1 block font-mono text-[0.68rem] text-muted-foreground/45">{hint}</div>}
         {below}
       </div>
diff --git a/apps/desktop/src/app/settings/types.ts b/apps/desktop/src/app/settings/types.ts
index adf97501ddf..ae67c079b53 100644
--- a/apps/desktop/src/app/settings/types.ts
+++ b/apps/desktop/src/app/settings/types.ts
@@ -1,7 +1,7 @@
 import type { Dispatch, SetStateAction } from 'react'
 
 import type { HermesGateway } from '@/hermes'
-import type { LucideIcon } from '@/lib/icons'
+import type { IconComponent } from '@/lib/icons'
 import type { EnvVarInfo } from '@/types/hermes'
 
 export type SettingsView = 'about' | 'gateway' | 'keys' | 'mcp' | 'tools' | `config:${string}`
@@ -28,7 +28,7 @@ export interface ProviderGroup {
 export interface DesktopConfigSection {
   id: string
   label: string
-  icon: LucideIcon
+  icon: IconComponent
   keys: string[]
 }
 
diff --git a/apps/desktop/src/app/shell/app-shell.tsx b/apps/desktop/src/app/shell/app-shell.tsx
index 093bf1d7beb..98f97a337f9 100644
--- a/apps/desktop/src/app/shell/app-shell.tsx
+++ b/apps/desktop/src/app/shell/app-shell.tsx
@@ -2,7 +2,6 @@ import { useStore } from '@nanostores/react'
 import type { CSSProperties, ReactNode } from 'react'
 import { useSyncExternalStore } from 'react'
 
-import { Backdrop } from '@/components/Backdrop'
 import { PaneShell } from '@/components/pane-shell'
 import { SidebarProvider } from '@/components/ui/sidebar'
 import {
@@ -21,9 +20,11 @@ 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[]
@@ -46,9 +47,11 @@ const viewportIsFullscreen = () =>
 
 export function AppShell({
   children,
+  commandCenterOpen = false,
   leftStatusbarItems,
   leftTitlebarTools,
   onOpenSettings,
+  onOpenSearch,
   overlays,
   statusbarItems,
   titlebarTools
@@ -70,9 +73,9 @@ export function AppShell({
     ? 0
     : titlebarControls.left + TITLEBAR_HEIGHT + Math.round(TITLEBAR_HEIGHT / 2)
 
-  // The static system cluster (file-browser, haptics, settings) is hardcoded
-  // in TitlebarControls. Pane-supplied tools (preview's group) render in a
-  // separate cluster anchored further left.
+  // The static system cluster (haptics, profiles, settings, right-sidebar) is
+  // hardcoded in TitlebarControls. Pane-supplied tools (preview's group) render
+  // in a separate cluster anchored further left.
   //
   // Width math has to include the `gap-x-1` (0.25rem) between buttons:
   // N buttons + (N - 1) inner gaps, plus one extra 0.25rem of breathing room
@@ -105,7 +108,7 @@ export function AppShell({
 
   return (
     <SidebarProvider
-      className="h-screen min-h-0 bg-background"
+      className="h-screen min-h-0 flex-col bg-background"
       onOpenChange={setSidebarOpen}
       open={sidebarOpen}
       style={
@@ -127,10 +130,15 @@ export function AppShell({
         } as CSSProperties
       }
     >
-      <TitlebarControls leftTools={leftTitlebarTools} onOpenSettings={onOpenSettings} tools={titlebarTools} />
+      <TitlebarControls
+        commandCenterOpen={commandCenterOpen}
+        leftTools={leftTitlebarTools}
+        onOpenSearch={onOpenSearch}
+        onOpenSettings={onOpenSettings}
+        tools={titlebarTools}
+      />
 
-      <Backdrop />
-      <main className="relative z-3 flex h-screen w-full flex-col overflow-hidden pr-0.75 pt-0.75 transition-none">
+      <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">
           <div
             aria-hidden="true"
diff --git a/apps/desktop/src/app/shell/gateway-menu-panel.tsx b/apps/desktop/src/app/shell/gateway-menu-panel.tsx
index 27008cc275d..fc5a0c218d0 100644
--- a/apps/desktop/src/app/shell/gateway-menu-panel.tsx
+++ b/apps/desktop/src/app/shell/gateway-menu-panel.tsx
@@ -42,11 +42,13 @@ export function GatewayMenuPanel({
   const gatewayOpen = gatewayState === 'open'
   const gatewayConnecting = gatewayState === 'connecting'
   const inferenceReady = gatewayOpen && inferenceStatus?.ready === true
+
   const connectionLabel = gatewayOpen
     ? 'Connected'
     : gatewayConnecting
       ? 'Connecting'
       : prettyState(gatewayState || 'offline')
+
   const inferenceLabel = gatewayOpen
     ? inferenceStatus?.ready
       ? 'Inference ready'
@@ -54,6 +56,7 @@ export function GatewayMenuPanel({
         ? 'Inference not ready'
         : 'Checking inference'
     : 'Disconnected'
+
   const platforms = Object.entries(statusSnapshot?.gateway_platforms || {}).sort(([l], [r]) => l.localeCompare(r))
   const recentLogs = logLines.slice(-5)
 
diff --git a/apps/desktop/src/app/shell/hooks/use-statusbar-items.tsx b/apps/desktop/src/app/shell/hooks/use-statusbar-items.tsx
index 8da8f5e8024..66e7a19fed4 100644
--- a/apps/desktop/src/app/shell/hooks/use-statusbar-items.tsx
+++ b/apps/desktop/src/app/shell/hooks/use-statusbar-items.tsx
@@ -3,16 +3,14 @@ import { useMemo } from 'react'
 
 import type { CommandCenterSection } from '@/app/command-center'
 import { GatewayMenuPanel } from '@/app/shell/gateway-menu-panel'
-import { Activity, AlertCircle, Clock, Command, Cpu, FolderOpen, GitBranch, Hash, Loader2, Sparkles } from '@/lib/icons'
+import { Activity, AlertCircle, Clock, Command, Cpu, Hash, Loader2, Sparkles } from '@/lib/icons'
 import type { RuntimeReadinessResult } from '@/lib/runtime-readiness'
-import { compactPath, contextBarLabel, LiveDuration, usageContextLabel } from '@/lib/statusbar'
+import { contextBarLabel, LiveDuration, usageContextLabel } from '@/lib/statusbar'
 import { cn } from '@/lib/utils'
 import { $desktopActionTasks } from '@/store/activity'
 import { $previewServerRestartStatus } from '@/store/preview'
 import {
   $busy,
-  $currentBranch,
-  $currentCwd,
   $currentModel,
   $currentProvider,
   $currentUsage,
@@ -30,7 +28,6 @@ import type { StatusbarItem } from '../statusbar-controls'
 
 interface StatusbarItemsOptions {
   agentsOpen: boolean
-  browseSessionCwd: () => Promise<void>
   commandCenterOpen: boolean
   extraLeftItems: readonly StatusbarItem[]
   extraRightItems: readonly StatusbarItem[]
@@ -45,7 +42,6 @@ interface StatusbarItemsOptions {
 
 export function useStatusbarItems({
   agentsOpen,
-  browseSessionCwd,
   commandCenterOpen,
   extraLeftItems,
   extraRightItems,
@@ -58,8 +54,6 @@ export function useStatusbarItems({
   toggleCommandCenter
 }: StatusbarItemsOptions) {
   const busy = useStore($busy)
-  const currentBranch = useStore($currentBranch)
-  const currentCwd = useStore($currentCwd)
   const currentModel = useStore($currentModel)
   const currentProvider = useStore($currentProvider)
   const currentUsage = useStore($currentUsage)
@@ -79,10 +73,10 @@ export function useStatusbarItems({
   const gatewayMenuContent = useMemo(
     () => (
       <GatewayMenuPanel
-        logLines={gatewayLogLines}
-        onOpenSystem={() => openCommandCenterSection('system')}
         gatewayState={gatewayState}
         inferenceStatus={inferenceStatus}
+        logLines={gatewayLogLines}
+        onOpenSystem={() => openCommandCenterSection('system')}
         statusSnapshot={statusSnapshot}
       />
     ),
@@ -95,7 +89,11 @@ export function useStatusbarItems({
     const failed = actions.filter(t => !t.status.running && (t.status.exit_code ?? 0) !== 0).length
     const previewRunning = previewServerRestartStatus === 'running' ? 1 : 0
     const previewFailed = previewServerRestartStatus === 'error' ? 1 : 0
-    const subagentsRunning = Object.values(subagentsBySession).reduce((sum, items) => sum + activeSubagentCount(items), 0)
+
+    const subagentsRunning = Object.values(subagentsBySession).reduce(
+      (sum, items) => sum + activeSubagentCount(items),
+      0
+    )
 
     return {
       bgFailed: failed + previewFailed,
@@ -108,6 +106,7 @@ export function useStatusbarItems({
   const gatewayConnecting = gatewayState === 'connecting'
   const inferenceReady = gatewayOpen && inferenceStatus?.ready === true
   const gatewayDegraded = gatewayOpen || gatewayConnecting
+
   const gatewayDetail = gatewayOpen
     ? inferenceStatus?.ready
       ? 'ready'
@@ -117,6 +116,7 @@ export function useStatusbarItems({
     : gatewayConnecting
       ? 'connecting'
       : 'offline'
+
   const gatewayClassName = inferenceReady
     ? undefined
     : gatewayDegraded
@@ -277,37 +277,9 @@ export function useStatusbarItems({
         title: currentProvider ? `Switch model · ${currentProvider}: ${currentModel || ''}` : 'Open model picker',
         variant: 'action'
       },
-      {
-        icon: <FolderOpen className="size-3" />,
-        id: 'cwd',
-        label: currentCwd ? compactPath(currentCwd) : 'No project cwd',
-        onSelect: () => void browseSessionCwd(),
-        title: currentCwd ? `Change working directory · ${currentCwd}` : 'Choose working directory',
-        variant: 'action'
-      },
-      {
-        hidden: !currentBranch,
-        icon: <GitBranch className="size-3" />,
-        id: 'branch',
-        label: currentBranch,
-        title: currentBranch ? `Current branch: ${currentBranch}` : undefined,
-        variant: 'text'
-      },
       versionItem
     ],
-    [
-      browseSessionCwd,
-      busy,
-      contextBar,
-      contextUsage,
-      currentBranch,
-      currentCwd,
-      currentModel,
-      currentProvider,
-      sessionStartedAt,
-      turnStartedAt,
-      versionItem
-    ]
+    [busy, contextBar, contextUsage, currentModel, currentProvider, sessionStartedAt, turnStartedAt, versionItem]
   )
 
   const leftStatusbarItems = useMemo(
diff --git a/apps/desktop/src/app/shell/sidebar-label.tsx b/apps/desktop/src/app/shell/sidebar-label.tsx
index dd8c9fc48c7..759bae1d5c6 100644
--- a/apps/desktop/src/app/shell/sidebar-label.tsx
+++ b/apps/desktop/src/app/shell/sidebar-label.tsx
@@ -10,7 +10,7 @@ export function SidebarPanelLabel({ children, className, dotClassName, ...props
   return (
     <span
       className={cn(
-        'flex min-w-0 items-center gap-2 text-[0.64rem] font-semibold uppercase tracking-[0.16em] text-sidebar-foreground/72',
+        'flex min-w-0 items-center gap-2 pl-2 text-[0.64rem] font-semibold uppercase tracking-[0.16em] text-(--theme-primary)',
         className
       )}
       {...props}
diff --git a/apps/desktop/src/app/shell/statusbar-controls.tsx b/apps/desktop/src/app/shell/statusbar-controls.tsx
index 1020f071500..227d59dc8c5 100644
--- a/apps/desktop/src/app/shell/statusbar-controls.tsx
+++ b/apps/desktop/src/app/shell/statusbar-controls.tsx
@@ -49,7 +49,7 @@ export function StatusbarControls({ className, leftItems = [], items = [], ...pr
   return (
     <footer
       className={cn(
-        'flex h-7 shrink-0 items-stretch justify-between gap-2 border-t border-border/55 bg-[color-mix(in_srgb,var(--dt-muted)_45%,var(--dt-card))] px-1 py-0 text-muted-foreground/95 [-webkit-app-region:no-drag]',
+        'flex h-5 shrink-0 items-stretch justify-between gap-2 border-t border-(--ui-stroke-tertiary) bg-(--ui-sidebar-surface-background) px-1 py-0 text-(--ui-text-tertiary) [-webkit-app-region:no-drag]',
         className
       )}
       {...props}
@@ -89,7 +89,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.68rem] text-muted-foreground/95 transition-colors hover:bg-(--chrome-action-hover) hover:text-foreground disabled:cursor-default disabled:opacity-45',
+              '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',
               item.className
             )}
             disabled={item.disabled}
@@ -150,7 +150,7 @@ function StatusbarItemView({ item, navigate }: { item: StatusbarItem; navigate:
     return (
       <div
         className={cn(
-          'inline-flex h-full items-center gap-1 px-1.5 text-[0.68rem] text-muted-foreground/90',
+          'inline-flex h-full items-center gap-1 px-1.5 text-[0.6875rem] text-(--ui-text-tertiary)',
           item.className
         )}
       >
@@ -163,7 +163,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.68rem] text-muted-foreground/95 transition-colors hover:bg-(--chrome-action-hover) hover:text-foreground disabled:cursor-default disabled:opacity-45',
+          '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',
           item.className
         )}
         href={item.href}
@@ -179,7 +179,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.68rem] text-muted-foreground/95 transition-colors hover:bg-(--chrome-action-hover) hover:text-foreground disabled:cursor-default disabled:opacity-45',
+        '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',
         item.className
       )}
       disabled={item.disabled}
diff --git a/apps/desktop/src/app/shell/titlebar-controls.tsx b/apps/desktop/src/app/shell/titlebar-controls.tsx
index 6817bd444ca..1f0a8690ed5 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 { Codicon } from '@/components/ui/codicon'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -11,7 +12,7 @@ import {
   DropdownMenuTrigger
 } from '@/components/ui/dropdown-menu'
 import { triggerHaptic } from '@/lib/haptics'
-import { FolderOpen, NotebookTabs, Settings, Users, Volume2, VolumeX } from '@/lib/icons'
+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'
@@ -40,10 +41,18 @@ 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 = [], onOpenSettings }: TitlebarControlsProps) {
+export function TitlebarControls({
+  leftTools = [],
+  tools = [],
+  commandCenterOpen = false,
+  onOpenSettings,
+  onOpenSearch
+}: TitlebarControlsProps) {
   const navigate = useNavigate()
   const hapticsMuted = useStore($hapticsMuted)
   const fileBrowserOpen = useStore($fileBrowserOpen)
@@ -63,7 +72,7 @@ export function TitlebarControls({ leftTools = [], tools = [], onOpenSettings }:
 
   const leftToolbarTools: TitlebarTool[] = [
     {
-      icon: <NotebookTabs />,
+      icon: <Codicon name="layout-sidebar-left" />,
       id: 'sidebar',
       label: sidebarOpen ? 'Hide sidebar' : 'Show sidebar',
       onSelect: () => {
@@ -71,21 +80,33 @@ export function TitlebarControls({ leftTools = [], tools = [], onOpenSettings }:
         toggleSidebarOpen()
       }
     },
+    {
+      active: commandCenterOpen,
+      icon: <Codicon name="search" />,
+      id: 'search',
+      label: 'Search',
+      onSelect: () => {
+        triggerHaptic('open')
+        onOpenSearch()
+      },
+      title: 'Search sessions, views, and actions'
+    },
     ...leftTools
   ]
 
+  const rightSidebarTool: TitlebarTool = {
+    active: fileBrowserOpen,
+    icon: <Codicon name="layout-sidebar-right" />,
+    id: 'right-sidebar',
+    label: fileBrowserOpen ? 'Hide right sidebar' : 'Show right sidebar',
+    onSelect: () => {
+      triggerHaptic('tap')
+      toggleFileBrowserOpen()
+    }
+  }
+
   // Static system tools — always pinned to the screen's right edge.
   const systemTools: TitlebarTool[] = [
-    {
-      active: fileBrowserOpen,
-      icon: <FolderOpen />,
-      id: 'file-browser',
-      label: fileBrowserOpen ? 'Hide file browser' : 'Show file browser',
-      onSelect: () => {
-        triggerHaptic('tap')
-        toggleFileBrowserOpen()
-      }
-    },
     {
       active: hapticsMuted,
       icon: hapticsMuted ? <VolumeX /> : <Volume2 />,
@@ -94,7 +115,7 @@ export function TitlebarControls({ leftTools = [], tools = [], onOpenSettings }:
       onSelect: toggleHaptics
     },
     {
-      icon: <Settings />,
+      icon: <Codicon name="settings-gear" />,
       id: 'settings',
       label: 'Open settings',
       onSelect: () => {
@@ -113,7 +134,7 @@ export function TitlebarControls({ leftTools = [], tools = [], onOpenSettings }:
     <>
       <div
         aria-label="Window controls"
-        className="fixed left-(--titlebar-controls-left) top-(--titlebar-controls-top) z-70 flex translate-y-[2px] flex-row items-center gap-x-1 pointer-events-auto select-none [-webkit-app-region:no-drag]"
+        className="fixed left-(--titlebar-controls-left) top-(--titlebar-controls-top) z-70 flex translate-y-0.5 flex-row items-center gap-x-1 pointer-events-auto select-none [-webkit-app-region:no-drag]"
       >
         {leftToolbarTools
           .filter(tool => !tool.hidden)
@@ -150,6 +171,7 @@ export function TitlebarControls({ leftTools = [], tools = [], onOpenSettings }:
         ))}
         <ProfilesMenuButton navigate={navigate} />
         {settingsTool && <TitlebarToolButton navigate={navigate} tool={settingsTool} />}
+        <TitlebarToolButton navigate={navigate} tool={rightSidebarTool} />
       </div>
     </>
   )
@@ -161,15 +183,12 @@ function ProfilesMenuButton({ navigate }: { navigate: ReturnType<typeof useNavig
       <DropdownMenuTrigger asChild>
         <button
           aria-label="Profiles"
-          className={cn(
-            titlebarButtonClass,
-            'grid place-items-center bg-transparent select-none [&_svg]:size-4'
-          )}
+          className={cn(titlebarButtonClass, 'grid place-items-center bg-transparent select-none [&_svg]:size-4')}
           onPointerDown={event => event.stopPropagation()}
           title="Profiles"
           type="button"
         >
-          <Users />
+          <Codicon name="account" />
         </button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end" className="w-64" sideOffset={8}>
@@ -186,7 +205,7 @@ function ProfilesMenuButton({ navigate }: { navigate: ReturnType<typeof useNavig
             navigate(PROFILES_ROUTE)
           }}
         >
-          <Users className="size-4" />
+          <Codicon name="account" size="1rem" />
           <span>Manage profiles</span>
         </DropdownMenuItem>
       </DropdownMenuContent>
@@ -198,6 +217,7 @@ function TitlebarToolButton({ navigate, tool }: { navigate: ReturnType<typeof us
   const className = cn(
     titlebarButtonClass,
     'grid place-items-center bg-transparent select-none [&_svg]:size-4',
+    tool.active && 'bg-(--ui-control-active-background)! text-foreground!',
     tool.className
   )
 
diff --git a/apps/desktop/src/app/shell/titlebar.test.ts b/apps/desktop/src/app/shell/titlebar.test.ts
index 830eed31ca8..8b6f2d8678d 100644
--- a/apps/desktop/src/app/shell/titlebar.test.ts
+++ b/apps/desktop/src/app/shell/titlebar.test.ts
@@ -21,8 +21,6 @@ describe('titlebarControlsPosition', () => {
   })
 
   it('uses the macOS fallback while the initial window state is unknown', () => {
-    expect(titlebarControlsPosition(undefined).left).toBe(
-      TITLEBAR_FALLBACK_WINDOW_BUTTON_X + TITLEBAR_CONTROL_OFFSET_X
-    )
+    expect(titlebarControlsPosition(undefined).left).toBe(TITLEBAR_FALLBACK_WINDOW_BUTTON_X + TITLEBAR_CONTROL_OFFSET_X)
   })
 })
diff --git a/apps/desktop/src/app/shell/titlebar.ts b/apps/desktop/src/app/shell/titlebar.ts
index 87cfb4bb495..b3ed2b630af 100644
--- a/apps/desktop/src/app/shell/titlebar.ts
+++ b/apps/desktop/src/app/shell/titlebar.ts
@@ -13,13 +13,13 @@ export const TITLEBAR_FALLBACK_WINDOW_BUTTON_X = 24
 export const TITLEBAR_EDGE_INSET = 14
 
 export const titlebarButtonClass =
-  'h-[var(--titlebar-control-height)] w-[var(--titlebar-control-size)] rounded-md text-muted-foreground hover:bg-accent hover:text-foreground'
+  'h-[var(--titlebar-control-height)] w-[var(--titlebar-control-size)] rounded-md text-muted-foreground/85 transition-colors 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 bg-background/70 px-[max(0.75rem,var(--titlebar-content-inset,0px))] backdrop-blur-sm'
+  '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))]'
 
 export const titlebarHeaderShadowClass =
-  "shadow-header after:pointer-events-none after:absolute after:left-0 after:right-0 after:top-full after:h-10 after:bg-linear-to-b after:from-background after:via-background/80 after:to-transparent after:content-['']"
+  "after:pointer-events-none after:absolute after:left-0 after:right-0 after:top-full after:h-4 after:bg-linear-to-b after:from-(--ui-chat-surface-background) after:to-transparent after:content-['']"
 
 export function titlebarControlsPosition(
   windowButtonPosition: HermesConnection['windowButtonPosition'] | undefined,
diff --git a/apps/desktop/src/app/skills/index.tsx b/apps/desktop/src/app/skills/index.tsx
index 9826bd52167..f02bd5ffb97 100644
--- a/apps/desktop/src/app/skills/index.tsx
+++ b/apps/desktop/src/app/skills/index.tsx
@@ -3,20 +3,18 @@ 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 { Codicon } from '@/components/ui/codicon'
 import { Switch } from '@/components/ui/switch'
 import { TextTab, TextTabMeta } from '@/components/ui/text-tab'
 import { getSkills, getToolsets, toggleSkill } from '@/hermes'
-import { RefreshCw, Search, X } from '@/lib/icons'
 import { cn } from '@/lib/utils'
 import { notify, notifyError } from '@/store/notifications'
 import type { SkillInfo, ToolsetInfo } from '@/types/hermes'
 
 import { useRouteEnumParam } from '../hooks/use-route-enum-param'
+import { PageSearchShell } from '../page-search-shell'
 import { asText, includesQuery, prettyName, toolNames } from '../settings/helpers'
 import type { SetStatusbarItemGroup } from '../shell/statusbar-controls'
-import { titlebarHeaderBaseClass } from '../shell/titlebar'
-import type { SetTitlebarToolGroup } from '../shell/titlebar-controls'
 
 const SKILLS_MODES = ['skills', 'toolsets'] as const
 type SkillsMode = (typeof SKILLS_MODES)[number]
@@ -64,14 +62,9 @@ function filteredToolsets(toolsets: ToolsetInfo[], query: string): ToolsetInfo[]
 
 interface SkillsViewProps extends React.ComponentProps<'section'> {
   setStatusbarItemGroup?: SetStatusbarItemGroup
-  setTitlebarToolGroup?: SetTitlebarToolGroup
 }
 
-export function SkillsView({
-  setStatusbarItemGroup: _setStatusbarItemGroup,
-  setTitlebarToolGroup,
-  ...props
-}: SkillsViewProps) {
+export function SkillsView({ setStatusbarItemGroup: _setStatusbarItemGroup, ...props }: SkillsViewProps) {
   const [mode, setMode] = useRouteEnumParam('tab', SKILLS_MODES, 'skills')
 
   const [query, setQuery] = useState('')
@@ -99,24 +92,6 @@ export function SkillsView({
     void refreshCapabilities()
   }, [refreshCapabilities])
 
-  useEffect(() => {
-    if (!setTitlebarToolGroup) {
-      return
-    }
-
-    setTitlebarToolGroup('skills', [
-      {
-        disabled: refreshing,
-        icon: <RefreshCw className={cn(refreshing && 'animate-spin')} />,
-        id: 'refresh-skills',
-        label: refreshing ? 'Refreshing skills' : 'Refresh skills',
-        onSelect: () => void refreshCapabilities()
-      }
-    ])
-
-    return () => setTitlebarToolGroup('skills', [])
-  }, [refreshCapabilities, refreshing, setTitlebarToolGroup])
-
   const categories = useMemo(() => {
     if (!skills) {
       return []
@@ -153,7 +128,6 @@ export function SkillsView({
   }, [visibleSkills])
 
   const totalSkills = skills?.length || 0
-  const enabledSkills = skills?.filter(skill => skill.enabled).length || 0
   const enabledToolsets = toolsets?.filter(toolset => toolset.enabled).length || 0
 
   async function handleToggleSkill(skill: SkillInfo, enabled: boolean) {
@@ -175,50 +149,20 @@ export function SkillsView({
   }
 
   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">Skills</h2>
-        <span className="pointer-events-auto text-xs text-muted-foreground">
-          {enabledSkills}/{totalSkills} enabled
-        </span>
-      </header>
-
-      <div className="min-h-0 flex-1 overflow-hidden rounded-b-[1.0625rem] border border-border/50 bg-background/85">
-        <div className="border-b border-border/50 px-4 py-3">
-          <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
+    <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
             </TextTab>
             <TextTab active={mode === 'toolsets'} onClick={() => setMode('toolsets')}>
               Toolsets
             </TextTab>
-            <div className="ml-auto w-full max-w-sm min-w-64">
-              <div className="relative">
-                <Search className="pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" />
-                <Input
-                  className="h-8 rounded-lg pl-8 pr-8 text-sm"
-                  onChange={event => setQuery(event.target.value)}
-                  placeholder={mode === 'skills' ? 'Search skills...' : 'Search toolsets...'}
-                  value={query}
-                />
-                {query && (
-                  <Button
-                    aria-label="Clear search"
-                    className="absolute right-1 top-1/2 h-6 w-6 -translate-y-1/2 text-muted-foreground hover:text-foreground"
-                    onClick={() => setQuery('')}
-                    size="icon"
-                    type="button"
-                    variant="ghost"
-                  >
-                    <X className="size-3.5" />
-                  </Button>
-                )}
-              </div>
-            </div>
           </div>
-
           {mode === 'skills' && categories.length > 0 && (
-            <div className="mt-2 flex flex-wrap gap-x-2 gap-y-1">
+            <div className="flex flex-wrap justify-center gap-x-2 gap-y-1">
               <TextTab active={activeCategory === null} onClick={() => setActiveCategory(null)}>
                 All <TextTabMeta>{totalSkills}</TextTabMeta>
               </TextTab>
@@ -233,96 +177,113 @@ export function SkillsView({
               ))}
             </div>
           )}
-        </div>
-
-        {!skills || !toolsets ? (
-          <PageLoader label="Loading capabilities..." />
-        ) : mode === 'skills' ? (
-          <div className="h-full overflow-y-auto px-4 py-3">
-            {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-border/40 rounded-lg border border-border/40 bg-background/70">
-                      {list.map(skill => (
-                        <div
-                          className="grid gap-3 px-3 py-2.5 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-center"
-                          key={skill.name}
-                        >
-                          <div className="min-w-0">
-                            <div className="truncate text-sm font-medium">{skill.name}</div>
-                            <p className="mt-0.5 text-xs text-muted-foreground">
-                              {asText(skill.description) || 'No description.'}
-                            </p>
-                          </div>
-                          <Switch
-                            checked={skill.enabled}
-                            disabled={savingSkill === skill.name}
-                            onCheckedChange={checked => void handleToggleSkill(skill, checked)}
-                          />
-                        </div>
-                      ))}
-                    </div>
+        </>
+      }
+      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}
+    >
+      {!skills || !toolsets ? (
+        <PageLoader label="Loading capabilities..." />
+      ) : mode === 'skills' ? (
+        <div className="h-full overflow-y-auto px-4 py-3">
+          {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>
-            )}
-          </div>
-        ) : (
-          <div className="h-full overflow-y-auto px-4 py-3">
-            {visibleToolsets.length === 0 ? (
-              <EmptyState description="Try a broader search query." title="No toolsets found" />
-            ) : (
-              <div className="space-y-2">
-                <div className="text-xs text-muted-foreground">
-                  {enabledToolsets}/{toolsets.length} toolsets enabled
-                </div>
-                <div className="divide-y divide-border/40 rounded-lg border border-border/40 bg-background/70">
-                  {visibleToolsets.map(toolset => {
-                    const tools = toolNames(toolset)
-                    const label = asText(toolset.label || toolset.name)
-
-                    return (
-                      <div className="px-3 py-2.5" key={toolset.name}>
-                        <div className="flex items-center justify-between gap-2">
-                          <div className="truncate text-sm font-medium">{label}</div>
-                          <div className="flex items-center gap-1.5">
-                            <StatusPill active={toolset.enabled}>{toolset.enabled ? 'Enabled' : 'Disabled'}</StatusPill>
-                            <StatusPill active={toolset.configured}>
-                              {toolset.configured ? 'Configured' : 'Needs keys'}
-                            </StatusPill>
-                          </div>
+                  <div className="divide-y divide-(--ui-stroke-quaternary)">
+                    {list.map(skill => (
+                      <div
+                        className="grid gap-3 px-0 py-2.5 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-center"
+                        key={skill.name}
+                      >
+                        <div className="min-w-0">
+                          <div className="truncate text-sm font-medium">{skill.name}</div>
+                          <p className="mt-0.5 text-xs text-muted-foreground">
+                            {asText(skill.description) || 'No description.'}
+                          </p>
                         </div>
-                        <p className="mt-1 text-xs text-muted-foreground">
-                          {asText(toolset.description) || 'No description.'}
-                        </p>
-                        {tools.length > 0 && (
-                          <div className="mt-2 flex flex-wrap gap-1">
-                            {tools.map(name => (
-                              <span
-                                className="rounded-md bg-muted px-1.5 py-0.5 font-mono text-[0.65rem] text-muted-foreground"
-                                key={name}
-                              >
-                                {name}
-                              </span>
-                            ))}
-                          </div>
-                        )}
+                        <Switch
+                          checked={skill.enabled}
+                          disabled={savingSkill === skill.name}
+                          onCheckedChange={checked => void handleToggleSkill(skill, checked)}
+                        />
                       </div>
-                    )
-                  })}
+                    ))}
+                  </div>
                 </div>
+              ))}
+            </div>
+          )}
+        </div>
+      ) : (
+        <div className="h-full overflow-y-auto px-4 py-3">
+          {visibleToolsets.length === 0 ? (
+            <EmptyState description="Try a broader search query." title="No toolsets found" />
+          ) : (
+            <div className="space-y-2">
+              <div className="text-xs text-muted-foreground">
+                {enabledToolsets}/{toolsets.length} toolsets enabled
               </div>
-            )}
-          </div>
-        )}
-      </div>
-    </section>
+              <div className="divide-y divide-(--ui-stroke-quaternary)">
+                {visibleToolsets.map(toolset => {
+                  const tools = toolNames(toolset)
+                  const label = asText(toolset.label || toolset.name)
+
+                  return (
+                    <div className="px-0 py-2.5" key={toolset.name}>
+                      <div className="flex items-center justify-between gap-2">
+                        <div className="truncate text-sm font-medium">{label}</div>
+                        <div className="flex items-center gap-1.5">
+                          <StatusPill active={toolset.enabled}>{toolset.enabled ? 'Enabled' : 'Disabled'}</StatusPill>
+                          <StatusPill active={toolset.configured}>
+                            {toolset.configured ? 'Configured' : 'Needs keys'}
+                          </StatusPill>
+                        </div>
+                      </div>
+                      <p className="mt-1 text-xs text-muted-foreground">
+                        {asText(toolset.description) || 'No description.'}
+                      </p>
+                      {tools.length > 0 && (
+                        <div className="mt-2 flex flex-wrap gap-1">
+                          {tools.map(name => (
+                            <span
+                              className="rounded-md bg-(--ui-bg-quinary) px-1.5 py-0.5 font-mono text-[0.65rem] text-(--ui-text-tertiary)"
+                              key={name}
+                            >
+                              {name}
+                            </span>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  )
+                })}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </PageSearchShell>
   )
 }
 
@@ -331,7 +292,7 @@ function StatusPill({ active, children }: { active: boolean; children: string })
     <span
       className={cn(
         'inline-flex items-center rounded-full px-1.5 py-0.5 text-[0.64rem]',
-        active ? 'bg-primary/10 text-primary' : 'bg-muted text-muted-foreground'
+        active ? 'bg-(--ui-bg-tertiary) text-(--ui-text-secondary)' : 'bg-(--ui-bg-quinary) text-(--ui-text-tertiary)'
       )}
     >
       {children}
diff --git a/apps/desktop/src/app/types.ts b/apps/desktop/src/app/types.ts
index 36ea97d8746..246076bd36b 100644
--- a/apps/desktop/src/app/types.ts
+++ b/apps/desktop/src/app/types.ts
@@ -1,5 +1,6 @@
+import type * as React from 'react'
+
 import type { ChatMessage } from '@/lib/chat-messages'
-import type { LucideIcon } from '@/lib/icons'
 
 export interface ContextSuggestion {
   text: string
@@ -51,18 +52,12 @@ export type CommandDispatchResponse =
   | SkillCommandDispatchResponse
   | SendCommandDispatchResponse
 
-export type SidebarNavId =
-  | 'artifacts'
-  | 'command-center'
-  | 'messaging'
-  | 'new-session'
-  | 'settings'
-  | 'skills'
+export type SidebarNavId = 'artifacts' | 'command-center' | 'messaging' | 'new-session' | 'settings' | 'skills'
 
 export interface SidebarNavItem {
   id: SidebarNavId
   label: string
-  icon: LucideIcon
+  icon: React.ComponentType<{ className?: string }>
   route?: string
   action?: 'new-session'
 }
@@ -70,6 +65,8 @@ export interface SidebarNavItem {
 export interface ClientSessionState {
   storedSessionId: string | null
   messages: ChatMessage[]
+  branch: string
+  cwd: string
   busy: boolean
   awaitingResponse: boolean
   streamId: string | null
diff --git a/apps/desktop/src/components/Backdrop.tsx b/apps/desktop/src/components/Backdrop.tsx
index 9621cb12fcc..1f69167c6cd 100644
--- a/apps/desktop/src/components/Backdrop.tsx
+++ b/apps/desktop/src/components/Backdrop.tsx
@@ -1,8 +1,5 @@
-import { useGpuTier } from '@nous-research/ui/hooks/use-gpu-tier'
 import { Leva, useControls } from 'leva'
-import { type CSSProperties, useEffect, useMemo, useState } from 'react'
-
-import { ThemeControls } from './ThemeControls'
+import { type CSSProperties, useEffect, useState } from 'react'
 
 const BLEND_MODES = [
   'normal',
@@ -25,43 +22,7 @@ const BLEND_MODES = [
 
 type BlendMode = (typeof BLEND_MODES)[number]
 
-function binaryNoiseDataUrl(tile: number, density: number, size: number, color: string): string {
-  if (typeof document === 'undefined') {
-    return ''
-  }
-
-  // Cap at 1.5x to match the design-language overlay perf work (PR #14):
-  // with `image-rendering: pixelated` there's no visible win above 1.5x, and
-  // a full retina (2x) PNG is ~78% larger to keep resident in compositor memory.
-  const dpr = Math.min(window.devicePixelRatio || 1, 1.5)
-  const physTile = Math.round(tile * dpr)
-  const block = Math.max(1, Math.round(size * dpr))
-
-  const canvas = document.createElement('canvas')
-  canvas.width = physTile
-  canvas.height = physTile
-
-  const ctx = canvas.getContext('2d')
-
-  if (!ctx) {
-    return ''
-  }
-
-  ctx.fillStyle = color
-
-  for (let y = 0; y < physTile; y += block) {
-    for (let x = 0; x < physTile; x += block) {
-      if (Math.random() < density) {
-        ctx.fillRect(x, y, block, block)
-      }
-    }
-  }
-
-  return `url("${canvas.toDataURL('image/png')}")`
-}
-
 export function Backdrop() {
-  const gpuTier = useGpuTier()
   const [controlsOpen, setControlsOpen] = useState(false)
 
   useEffect(() => {
@@ -94,9 +55,7 @@ export function Backdrop() {
 
   const shape = useControls(
     'UI / Shape',
-    {
-      radiusScalar: { value: 0.2, min: 0, max: 2, step: 0.1, label: 'radius scalar' }
-    },
+    { radiusScalar: { value: 0.2, min: 0, max: 2, step: 0.1, label: 'radius scalar' } },
     { collapsed: true }
   )
 
@@ -108,7 +67,7 @@ export function Backdrop() {
     'Backdrop / Statue',
     {
       enabled: { value: true, label: 'on' },
-      opacity: { value: 0.04, min: 0, max: 1, step: 0.005 },
+      opacity: { value: 0.025, min: 0, max: 1, step: 0.005 },
       blendMode: { value: 'difference' as BlendMode, options: BLEND_MODES, label: 'blend' },
       invert: { value: true, label: 'invert color' },
       saturate: { value: 1, min: 0, max: 3, step: 0.05, label: 'saturate' },
@@ -123,55 +82,14 @@ export function Backdrop() {
     { collapsed: true }
   )
 
-  const vignette = useControls(
-    'Backdrop / Vignette',
-    {
-      enabled: { value: true, label: 'on' },
-      opacity: { value: 0.22, min: 0, max: 1, step: 0.01 },
-      blendMode: { value: 'lighten' as BlendMode, options: BLEND_MODES, label: 'blend' },
-      useTheme: { value: true, label: 'use --warm-glow' },
-      color: { value: '#ffbd38', label: 'color (override)' },
-      origin: {
-        value: '0% 0%',
-        options: ['0% 0%', '100% 0%', '50% 0%', '0% 100%', '100% 100%', '50% 50%'],
-        label: 'corner'
-      },
-      transparentStop: { value: 60, min: 0, max: 100, step: 1, label: 'fade start %' }
-    },
-    { collapsed: true }
-  )
-
-  const noise = useControls(
-    'Backdrop / Noise',
-    {
-      enabled: { value: false, label: 'on' },
-      opacity: { value: 0.21, min: 0, max: 1.5, step: 0.01, label: 'opacity (× mul)' },
-      blendMode: { value: 'color-dodge' as BlendMode, options: BLEND_MODES, label: 'blend' },
-      color: { value: '#eaeaea', label: 'dot color' },
-      density: { value: 0.11, min: 0, max: 1, step: 0.005, label: 'density' },
-      size: { value: 1, min: 1, max: 10, step: 1, label: 'block px' },
-      tile: { value: 256, min: 64, max: 1024, step: 32, label: 'tile px' },
-      reroll: { value: 0, min: 0, max: 100, step: 1, label: 'reroll' }
-    },
-    { collapsed: true }
-  )
-
-  const noiseUrl = useMemo(
-    () => binaryNoiseDataUrl(noise.tile, noise.density, noise.size, noise.color),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [noise.tile, noise.density, noise.size, noise.color, noise.reroll]
-  )
-
   return (
     <>
       <Leva collapsed hidden={!import.meta.env.DEV || !controlsOpen} titleBar={{ title: 'backdrop', drag: true }} />
 
-      {import.meta.env.DEV && <ThemeControls />}
-
-      {statue.enabled && gpuTier > 0 && (
+      {statue.enabled && (
         <div
           aria-hidden
-          className="pointer-events-none fixed inset-0 z-2"
+          className="pointer-events-none absolute inset-0 z-2"
           style={{
             mixBlendMode: statue.blendMode as CSSProperties['mixBlendMode'],
             opacity: statue.opacity
@@ -190,33 +108,6 @@ export function Backdrop() {
           />
         </div>
       )}
-
-      {vignette.enabled && (
-        <div
-          aria-hidden
-          className="pointer-events-none fixed inset-0 z-99"
-          style={{
-            background: `radial-gradient(ellipse at ${vignette.origin}, transparent ${vignette.transparentStop}%, ${vignette.useTheme ? 'var(--warm-glow)' : vignette.color} 100%)`,
-            mixBlendMode: vignette.blendMode as CSSProperties['mixBlendMode'],
-            opacity: vignette.opacity
-          }}
-        />
-      )}
-
-      {noise.enabled && gpuTier > 0 && noiseUrl && (
-        <div
-          aria-hidden
-          className="pointer-events-none fixed inset-0 z-101"
-          style={{
-            backgroundImage: noiseUrl,
-            backgroundSize: `${noise.tile}px ${noise.tile}px`,
-            backgroundRepeat: 'repeat',
-            imageRendering: 'pixelated',
-            mixBlendMode: noise.blendMode as CSSProperties['mixBlendMode'],
-            opacity: `calc(${noise.opacity} * var(--noise-opacity-mul, 1))`
-          }}
-        />
-      )}
     </>
   )
 }
diff --git a/apps/desktop/src/components/ThemeControls.tsx b/apps/desktop/src/components/ThemeControls.tsx
deleted file mode 100644
index 05984b019a7..00000000000
--- a/apps/desktop/src/components/ThemeControls.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-/**
- * Leva-driven palette fine-tuning, dev-mode only.
- *
- * Two folders (`Theme / Light` and `Theme / Dark`) expose color pickers
- * for the most-tweaked surface tokens of the *active* skin. Edits write
- * CSS variables directly — they're live-only and do not persist or feed
- * back into the theme resolver.
- */
-
-import { button, useControls } from 'leva'
-import { useMemo } from 'react'
-
-import { getBaseColors, useTheme } from '@/themes/context'
-import type { DesktopThemeColors } from '@/themes/types'
-
-/** Curated subset of tokens that materially change the app's look. */
-const FIELDS: Array<[keyof DesktopThemeColors, string]> = [
-  ['background', 'background'],
-  ['foreground', 'foreground'],
-  ['card', 'card'],
-  ['muted', 'muted'],
-  ['mutedForeground', 'muted text'],
-  ['primary', 'primary'],
-  ['primaryForeground', 'primary text'],
-  ['secondary', 'secondary'],
-  ['accent', 'accent'],
-  ['border', 'border'],
-  ['ring', 'ring'],
-  ['midground', 'midground'],
-  ['composerRing', 'composer ring'],
-  ['sidebarBackground', 'sidebar bg'],
-  ['userBubble', 'user bubble']
-]
-
-const CSS_VARS: Record<keyof DesktopThemeColors, string> = {
-  background: '--dt-background',
-  foreground: '--dt-foreground',
-  card: '--dt-card',
-  cardForeground: '--dt-card-foreground',
-  muted: '--dt-muted',
-  mutedForeground: '--dt-muted-foreground',
-  popover: '--dt-popover',
-  popoverForeground: '--dt-popover-foreground',
-  primary: '--dt-primary',
-  primaryForeground: '--dt-primary-foreground',
-  secondary: '--dt-secondary',
-  secondaryForeground: '--dt-secondary-foreground',
-  accent: '--dt-accent',
-  accentForeground: '--dt-accent-foreground',
-  border: '--dt-border',
-  input: '--dt-input',
-  ring: '--dt-ring',
-  midground: '--dt-midground',
-  midgroundForeground: '--dt-midground-foreground',
-  composerRing: '--dt-composer-ring',
-  destructive: '--dt-destructive',
-  destructiveForeground: '--dt-destructive-foreground',
-  sidebarBackground: '--dt-sidebar-bg',
-  sidebarBorder: '--dt-sidebar-border',
-  userBubble: '--dt-user-bubble',
-  userBubbleBorder: '--dt-user-bubble-border'
-}
-
-const HEX_RE = /^#[0-9a-f]{6}$/i
-
-// Leva's color picker only renders concrete `#rrggbb` values; non-hex seeds
-// (e.g. color-mix(...)) fall back to a dark grey so the swatch is clickable.
-const swatch = (value: string | undefined) =>
-  typeof value === 'string' && HEX_RE.test(value.trim()) ? value : '#444444'
-
-const setVar = (key: keyof DesktopThemeColors, value: string) =>
-  document.documentElement.style.setProperty(CSS_VARS[key], value)
-
-function buildSchema(skinName: string, mode: 'light' | 'dark') {
-  const base = getBaseColors(skinName, mode)
-  const entries: Record<string, unknown> = {}
-
-  for (const [key, label] of FIELDS) {
-    entries[key] = {
-      value: swatch(base[key]),
-      label,
-      transient: false,
-      onChange: (value: string, _path: string, ctx: { initial: boolean }) => {
-        if (!ctx.initial) {
-          setVar(key, value)
-        }
-      }
-    }
-  }
-
-  entries['reset live edits'] = button(() => {
-    for (const [key] of FIELDS) {
-      const v = base[key]
-
-      if (typeof v === 'string') {
-        setVar(key, v)
-      }
-    }
-  })
-
-  return entries as Parameters<typeof useControls>[1]
-}
-
-/** Renders nothing — Leva's UI is a portal driven by `useControls`. */
-export function ThemeControls() {
-  const { themeName } = useTheme()
-  const light = useMemo(() => buildSchema(themeName, 'light'), [themeName])
-  const dark = useMemo(() => buildSchema(themeName, 'dark'), [themeName])
-
-  useControls('Theme / Light', light, { collapsed: true }, [themeName])
-  useControls('Theme / Dark', dark, { collapsed: true }, [themeName])
-
-  return null
-}
diff --git a/apps/desktop/src/components/assistant-ui/clarify-tool.tsx b/apps/desktop/src/components/assistant-ui/clarify-tool.tsx
index 2ea23507c43..266e554ad11 100644
--- a/apps/desktop/src/components/assistant-ui/clarify-tool.tsx
+++ b/apps/desktop/src/components/assistant-ui/clarify-tool.tsx
@@ -273,7 +273,7 @@ function ClarifyToolPending({ args }: ToolCallMessagePartProps) {
         <div className="flex items-center justify-between text-[0.6875rem] text-muted-foreground/85">
           <span>1–{choices.length} to pick</span>
           <button
-            className="bg-transparent text-muted-foreground/85 underline-offset-2 hover:text-foreground hover:underline disabled:opacity-50"
+            className="bg-transparent text-muted-foreground/85 underline-offset-4 decoration-current/20 hover:text-foreground hover:underline disabled:opacity-50"
             disabled={!ready || submitting}
             onClick={() => void respond('')}
             type="button"
diff --git a/apps/desktop/src/components/assistant-ui/directive-text.tsx b/apps/desktop/src/components/assistant-ui/directive-text.tsx
index 03937c5ca3b..9189356dc03 100644
--- a/apps/desktop/src/components/assistant-ui/directive-text.tsx
+++ b/apps/desktop/src/components/assistant-ui/directive-text.tsx
@@ -8,7 +8,7 @@ import { Fragment, useEffect, useMemo, useState } from 'react'
 import { ZoomableImage } from '@/components/chat/zoomable-image'
 import { extractEmbeddedImages } from '@/lib/embedded-images'
 
-const HERMES_REF_TYPES = ['file', 'folder', 'url', 'image', 'tool', 'line'] as const
+const HERMES_REF_TYPES = ['file', 'folder', 'url', 'image', 'tool', 'line', 'terminal'] as const
 type HermesRefType = (typeof HERMES_REF_TYPES)[number]
 
 /** Single source of truth for chip icon glyphs (Tabler outline @ 24×24).
@@ -37,7 +37,8 @@ const ICON_PATHS: Record<HermesRefType, string[]> = {
     'M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3'
   ],
   tool: ['M7 10h3v-3l-3.5 -3.5a6 6 0 0 1 8 8l6 6a2 2 0 0 1 -3 3l-6 -6a6 6 0 0 1 -8 -8l3.5 3.5'],
-  line: ['M5 9l14 0', 'M5 15l14 0', 'M11 4l-4 16', 'M17 4l-4 16']
+  line: ['M5 9l14 0', 'M5 15l14 0', 'M11 4l-4 16', 'M17 4l-4 16'],
+  terminal: ['M5 7l5 5l-5 5', 'M12 19l7 0']
 }
 
 const ICON_FALLBACK = ['M8 12a4 4 0 1 0 8 0a4 4 0 1 0 -8 0', 'M16 12v1.5a2.5 2.5 0 0 0 5 0v-1.5a9 9 0 1 0 -5.5 8.28']
@@ -112,7 +113,7 @@ export const DIRECTIVE_CHIP_CLASS =
 const CANONICAL_DIRECTIVE_RE = /:([\w-]{1,64})\[([^\]\n]{1,1024})\](?:\{name=([^}\n]{1,1024})\})?/g
 
 const HERMES_DIRECTIVE_RE = new RegExp(
-  '@(file|folder|url|image|tool|line):(' + '`[^`\\n]+`' + '|"[^"\\n]+"' + "|'[^'\\n]+'" + '|\\S+' + ')',
+  '@(file|folder|url|image|tool|line|terminal):(' + '`[^`\\n]+`' + '|"[^"\\n]+"' + "|'[^'\\n]+'" + '|\\S+' + ')',
   'g'
 )
 
@@ -248,6 +249,10 @@ function parseDirectiveText(text: string): Unstable_DirectiveSegment[] {
 }
 
 function shortLabel(type: HermesRefType, id: string): string {
+  if (type === 'terminal') {
+    return id || 'terminal'
+  }
+
   if (type === 'url') {
     try {
       const parsed = new URL(id)
diff --git a/apps/desktop/src/components/assistant-ui/markdown-text.tsx b/apps/desktop/src/components/assistant-ui/markdown-text.tsx
index 8e2fbfc8f84..00bbc1e8661 100644
--- a/apps/desktop/src/components/assistant-ui/markdown-text.tsx
+++ b/apps/desktop/src/components/assistant-ui/markdown-text.tsx
@@ -12,10 +12,8 @@ import { type ComponentProps, memo, useEffect, useMemo, useState } from 'react'
 import { PreviewAttachment } from '@/components/chat/preview-attachment'
 import { SyntaxHighlighter } from '@/components/chat/shiki-highlighter'
 import { ZoomableImage } from '@/components/chat/zoomable-image'
-import { CopyButton } from '@/components/ui/copy-button'
 import { normalizeExternalUrl, openExternalLink, PrettyLink } from '@/lib/external-link'
 import { createMemoizedMathPlugin } from '@/lib/katex-memo'
-import { isLikelyProseCodeBlock, sanitizeLanguageTag } from '@/lib/markdown-code'
 import { preprocessMarkdown } from '@/lib/markdown-preprocess'
 import {
   filePathFromMediaPath,
@@ -42,28 +40,6 @@ import { cn } from '@/lib/utils'
 // LLM convention). The default false-setting only accepts `$$...$$`.
 const mathPlugin = createMemoizedMathPlugin({ singleDollarTextMath: true })
 
-function CodeHeader({ language, code }: { language?: string; code?: string }) {
-  const normalizedCode = (code ?? '').replace(/^\n+/, '').trimEnd()
-
-  if (!normalizedCode.trim() || isLikelyProseCodeBlock(language, normalizedCode)) {
-    return null
-  }
-
-  const cleanLanguage = sanitizeLanguageTag(language || '')
-  const label = cleanLanguage && cleanLanguage !== 'unknown' ? cleanLanguage : ''
-
-  return (
-    <div className="aui-code-header m-0 flex items-stretch justify-between gap-2 rounded-t-md border border-b-0 border-border bg-muted/60 pr-3 text-xs text-muted-foreground">
-      <span className="flex items-center gap-2.5 py-1.5 pl-3 font-mono uppercase tracking-[0.16em]">
-        <span className="text-midground/85">{label || 'code'}</span>
-      </span>
-      <CopyButton appearance="inline" iconClassName="size-3" label="Copy code" text={normalizedCode}>
-        Copy
-      </CopyButton>
-    </div>
-  )
-}
-
 async function typedBlobUrl(dataUrl: string, mime: string): Promise<string> {
   const blob = await fetch(dataUrl).then(response => response.blob())
 
@@ -87,7 +63,7 @@ async function mediaSrc(path: string): Promise<string> {
 function OpenMediaButton({ kind, path }: { kind: 'audio' | 'video'; path: string }) {
   return (
     <button
-      className="mt-2 bg-transparent text-xs font-medium text-muted-foreground underline underline-offset-4 hover:text-foreground"
+      className="mt-2 bg-transparent text-xs font-medium text-muted-foreground underline underline-offset-4 decoration-current/20 hover:text-foreground"
       onClick={() => void window.hermesDesktop?.openExternal(mediaExternalUrl(path))}
       type="button"
     >
@@ -145,7 +121,7 @@ function MediaAttachment({ path }: { path: string }) {
 
   if (kind === 'audio' && src) {
     return (
-      <span className="my-3 block max-w-md rounded-xl border border-border/70 bg-card/70 p-3">
+      <span className="my-3 block max-w-md rounded-xl border border-border bg-muted/35 p-3">
         <span className="mb-2 block truncate text-xs font-medium text-muted-foreground">{name}</span>
         <audio className="block w-full" controls onError={() => setFailed(true)} preload="metadata" src={src} />
         {failed && <OpenMediaButton kind="audio" path={path} />}
@@ -155,7 +131,7 @@ function MediaAttachment({ path }: { path: string }) {
 
   if (kind === 'video' && src) {
     return (
-      <span className="my-3 block max-w-2xl rounded-xl border border-border/70 bg-card/70 p-3">
+      <span className="my-3 block max-w-2xl rounded-xl border border-border bg-muted/35 p-3">
         <span className="mb-2 block truncate text-xs font-medium text-muted-foreground">{name}</span>
         <video
           className="block max-h-112 w-full rounded-lg bg-black"
@@ -170,7 +146,7 @@ function MediaAttachment({ path }: { path: string }) {
 
   return (
     <a
-      className="font-semibold text-foreground underline underline-offset-4 decoration-current wrap-anywhere"
+      className="font-semibold text-foreground underline underline-offset-4 decoration-current/20 wrap-anywhere"
       href="#"
       onClick={event => {
         event.preventDefault()
@@ -213,7 +189,7 @@ function MarkdownLink({ children, className, href, ...props }: ComponentProps<'a
     return (
       <a
         className={cn(
-          'font-semibold text-foreground underline underline-offset-4 decoration-current wrap-anywhere',
+          'font-semibold text-foreground underline underline-offset-4 decoration-current/20 wrap-anywhere',
           className
         )}
         href={href}
@@ -250,6 +226,15 @@ function MarkdownImage({ className, src, alt, ...props }: ComponentProps<'img'>)
   )
 }
 
+// Headings shrink to chat scale rather than the prose default (h1≈xl). Kept
+// table-driven so adding/tweaking levels is one row.
+const HEADING_SIZES: Record<'h1' | 'h2' | 'h3' | 'h4', string> = {
+  h1: 'text-[1rem] tracking-tight',
+  h2: 'text-[0.9375rem] tracking-tight',
+  h3: 'text-[0.875rem]',
+  h4: 'text-[0.8125rem]'
+}
+
 const MarkdownTextImpl = () => {
   const isStreaming = useAuiState(s => s.message.status?.type === 'running')
 
@@ -257,40 +242,44 @@ const MarkdownTextImpl = () => {
     () =>
       ({
         h1: ({ className, ...props }: ComponentProps<'h1'>) => (
-          <h1 className={cn('text-xl font-semibold tracking-tight', className)} {...props} />
+          <h1 className={cn('my-1 font-semibold', HEADING_SIZES.h1, className)} {...props} />
         ),
         h2: ({ className, ...props }: ComponentProps<'h2'>) => (
-          <h2 className={cn('text-lg font-semibold tracking-tight', className)} {...props} />
+          <h2 className={cn('my-1 font-semibold', HEADING_SIZES.h2, className)} {...props} />
         ),
         h3: ({ className, ...props }: ComponentProps<'h3'>) => (
-          <h3 className={cn('text-base font-semibold', className)} {...props} />
+          <h3 className={cn('my-1 font-semibold', HEADING_SIZES.h3, className)} {...props} />
         ),
         h4: ({ className, ...props }: ComponentProps<'h4'>) => (
-          <h4 className={cn('text-sm font-semibold', className)} {...props} />
+          <h4 className={cn('my-1 font-semibold', HEADING_SIZES.h4, className)} {...props} />
         ),
         p: ({ className, ...props }: ComponentProps<'p'>) => (
-          <p className={cn('wrap-anywhere leading-(--dt-line-height)', className)} {...props} />
+          <p className={cn('my-1 wrap-anywhere leading-(--dt-line-height)', className)} {...props} />
         ),
         a: MarkdownLink,
         hr: ({ className, ...props }: ComponentProps<'hr'>) => (
-          <hr className={cn('border-border/70', className)} {...props} />
+          <hr className={cn('border-border', className)} {...props} />
         ),
         blockquote: ({ className, ...props }: ComponentProps<'blockquote'>) => (
           <blockquote
-            className={cn('border-l-2 border-midground/40 pl-3 text-muted-foreground italic', className)}
+            className={cn('border-l-2 border-border pl-3 text-muted-foreground italic', className)}
             {...props}
           />
         ),
-        ul: ({ className, ...props }: ComponentProps<'ul'>) => <ul className={cn(className)} {...props} />,
-        ol: ({ className, ...props }: ComponentProps<'ol'>) => <ol className={cn(className)} {...props} />,
+        ul: ({ className, ...props }: ComponentProps<'ul'>) => (
+          <ul className={cn('my-1 gap-0', className)} {...props} />
+        ),
+        ol: ({ className, ...props }: ComponentProps<'ol'>) => (
+          <ol className={cn('my-1 gap-0', className)} {...props} />
+        ),
         li: ({ className, ...props }: ComponentProps<'li'>) => (
           <li className={cn('leading-(--dt-line-height)', className)} {...props} />
         ),
         table: ({ className, ...props }: ComponentProps<'table'>) => (
-          <div className="aui-md-table my-3 max-w-full overflow-x-auto rounded-md border border-border">
+          <div className="aui-md-table my-2 max-w-full overflow-x-auto rounded-[0.375rem] border border-border">
             <table
               className={cn(
-                'm-0 w-full border-collapse text-sm [&_tr]:border-b [&_tr]:border-border last:[&_tr]:border-0',
+                'm-0 w-full border-collapse text-[0.8125rem] [&_tr]:border-b [&_tr]:border-border last:[&_tr]:border-0',
                 className
               )}
               {...props}
@@ -298,23 +287,22 @@ const MarkdownTextImpl = () => {
           </div>
         ),
         thead: ({ className, ...props }: ComponentProps<'thead'>) => (
-          <thead className={cn('m-0 bg-muted/50 text-foreground', className)} {...props} />
+          <thead className={cn('m-0 bg-muted/35 text-muted-foreground', className)} {...props} />
         ),
         th: ({ className, ...props }: ComponentProps<'th'>) => (
           <th
             className={cn(
-              'px-3 py-1.5 text-left align-middle text-xs font-semibold uppercase tracking-[0.16em] text-midground/75',
+              'px-2.5 py-1.5 text-left align-middle text-[0.75rem] font-medium text-muted-foreground',
               className
             )}
             {...props}
           />
         ),
         td: ({ className, ...props }: ComponentProps<'td'>) => (
-          <td className={cn('px-3 py-2 align-top text-sm leading-snug', className)} {...props} />
+          <td className={cn('px-2.5 py-1.5 align-top text-[0.8125rem] leading-snug', className)} {...props} />
         ),
         img: MarkdownImage,
-        SyntaxHighlighter: (props: SyntaxHighlighterProps) => <SyntaxHighlighter {...props} defer={isStreaming} />,
-        CodeHeader
+        SyntaxHighlighter: (props: SyntaxHighlighterProps) => <SyntaxHighlighter {...props} defer={isStreaming} />
       }) as StreamdownTextComponents,
     [isStreaming]
   )
@@ -324,13 +312,13 @@ const MarkdownTextImpl = () => {
       caret="block"
       components={components}
       containerClassName={cn(
-        'aui-md prose w-full max-w-none overflow-hidden text-base leading-(--dt-line-height) text-foreground',
+        'aui-md prose w-full max-w-none overflow-hidden text-[length:var(--conversation-text-font-size)] leading-(--dt-line-height) text-foreground',
         'prose-p:leading-(--dt-line-height) prose-li:leading-(--dt-line-height)',
         'prose-headings:text-foreground prose-strong:text-foreground',
         'prose-a:break-words prose-p:[overflow-wrap:anywhere]',
-        'prose-li:marker:text-midground/55',
-        'prose-code:rounded prose-code:border-0 prose-code:bg-muted/80 prose-code:px-0.5 prose-code:py-px prose-code:font-mono prose-code:text-[0.86em] prose-code:text-muted-foreground prose-code:before:content-none prose-code:after:content-none',
-        '[&>*:last-child]:mb-0'
+        'prose-li:marker:text-muted-foreground/70',
+        'prose-code:rounded-[0.25rem] prose-code:px-[0.1875rem] prose-code:py-px prose-code:font-mono prose-code:text-[0.9em] prose-code:font-normal prose-code:before:content-none prose-code:after:content-none',
+        '[&>*:first-child]:mt-0 [&>*:last-child]:mb-0 [&>*+*]:mt-1'
       )}
       lineNumbers={false}
       mode="streaming"
@@ -345,7 +333,6 @@ const MarkdownTextImpl = () => {
       parseIncompleteMarkdown
       plugins={{ math: mathPlugin, ...(isStreaming ? {} : { code }) }}
       preprocess={preprocessMarkdown}
-      shikiTheme={['github-light-default', 'github-dark-default']}
     />
   )
 }
diff --git a/apps/desktop/src/components/assistant-ui/streaming.test.tsx b/apps/desktop/src/components/assistant-ui/streaming.test.tsx
index 44e70549083..70f66040e85 100644
--- a/apps/desktop/src/components/assistant-ui/streaming.test.tsx
+++ b/apps/desktop/src/components/assistant-ui/streaming.test.tsx
@@ -51,6 +51,34 @@ vi.stubGlobal('cancelAnimationFrame', (id: number) => window.clearTimeout(id))
 
 Element.prototype.scrollTo = function scrollTo() {}
 
+Element.prototype.animate = function animate() {
+  return {
+    cancel: () => {},
+    finished: Promise.resolve()
+  } as unknown as Animation
+}
+
+// jsdom returns 0 for offset*; the virtualizer reads those to size its
+// viewport. Fall through to client* (which tests can override) or a sane
+// default so virtualized items render.
+function stubOffsetDimension(
+  prop: 'offsetHeight' | 'offsetWidth',
+  clientProp: 'clientHeight' | 'clientWidth',
+  fallback: number
+) {
+  const previous = Object.getOwnPropertyDescriptor(HTMLElement.prototype, prop)
+
+  Object.defineProperty(HTMLElement.prototype, prop, {
+    configurable: true,
+    get() {
+      return previous?.get?.call(this) || (this as HTMLElement)[clientProp] || fallback
+    }
+  })
+}
+
+stubOffsetDimension('offsetWidth', 'clientWidth', 800)
+stubOffsetDimension('offsetHeight', 'clientHeight', 600)
+
 async function wait(ms: number) {
   await act(async () => {
     await new Promise(resolve => window.setTimeout(resolve, ms))
@@ -85,6 +113,23 @@ function assistantMessage(text: string, running = true): ThreadMessage {
   } as ThreadMessage
 }
 
+function assistantErrorMessage(error: string): ThreadMessage {
+  return {
+    id: 'assistant-error-1',
+    role: 'assistant',
+    content: [],
+    status: { type: 'incomplete', reason: 'error', error },
+    createdAt,
+    metadata: {
+      unstable_state: null,
+      unstable_annotations: [],
+      unstable_data: [],
+      steps: [],
+      custom: {}
+    }
+  } as ThreadMessage
+}
+
 function assistantReasoningMessage(text: string): ThreadMessage {
   return {
     id: 'assistant-reasoning-1',
@@ -232,6 +277,20 @@ function TodoHarness({ message }: { message: ThreadMessage }) {
   )
 }
 
+function MessageHarness({ message }: { message: ThreadMessage }) {
+  const runtime = useExternalStoreRuntime<ThreadMessage>({
+    messages: [message],
+    isRunning: false,
+    onNew: async () => {}
+  })
+
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      <Thread />
+    </AssistantRuntimeProvider>
+  )
+}
+
 function ReasoningHarness() {
   const runtime = useExternalStoreRuntime<ThreadMessage>({
     messages: [assistantReasoningMessage(' The user is asking what this file is.')],
@@ -311,6 +370,12 @@ describe('assistant-ui streaming renderer', () => {
     expect(container.querySelector('[data-slot="aui_composer-clearance"]')).toBeNull()
   })
 
+  it('renders assistant provider errors inline', () => {
+    render(<MessageHarness message={assistantErrorMessage('OpenRouter rejected the request (403).')} />)
+
+    expect(screen.getByRole('alert').textContent).toContain('OpenRouter rejected the request (403).')
+  })
+
   it('does not pull the viewport back down after the user scrolls up during streaming', async () => {
     const { container } = render(<StreamingHarness />)
 
diff --git a/apps/desktop/src/components/assistant-ui/thread-virtualizer.tsx b/apps/desktop/src/components/assistant-ui/thread-virtualizer.tsx
new file mode 100644
index 00000000000..bfb7a26aa47
--- /dev/null
+++ b/apps/desktop/src/components/assistant-ui/thread-virtualizer.tsx
@@ -0,0 +1,306 @@
+import { ThreadPrimitive, useAuiEvent, useAuiState } from '@assistant-ui/react'
+import { useVirtualizer, type Virtualizer } from '@tanstack/react-virtual'
+import { type ComponentProps, type FC, type ReactNode, useCallback, useEffect, useMemo, useRef } from 'react'
+
+import { cn } from '@/lib/utils'
+import { setThreadScrolledUp } from '@/store/thread-scroll'
+
+const ESTIMATED_ITEM_HEIGHT = 220
+const OVERSCAN = 4
+const AT_BOTTOM_THRESHOLD = 4
+
+type ThreadMessageComponents = ComponentProps<typeof ThreadPrimitive.MessageByIndex>['components']
+
+type MessageGroup = { id: string; index: number; kind: 'standalone' } | { id: string; indices: number[]; kind: 'turn' }
+
+interface VirtualizedThreadProps {
+  clampToComposer: boolean
+  components: ThreadMessageComponents
+  emptyPlaceholder?: ReactNode
+  loadingIndicator?: ReactNode
+  sessionKey?: string | null
+}
+
+function buildGroups(signature: string): MessageGroup[] {
+  if (!signature) {
+    return []
+  }
+
+  const messages = signature.split('\n').map(row => {
+    const [index, id, role] = row.split(':')
+
+    return { id, index: Number(index), role }
+  })
+
+  const groups: MessageGroup[] = []
+
+  for (let i = 0; i < messages.length; i++) {
+    const message = messages[i]
+
+    if (message.role !== 'user') {
+      groups.push({ id: message.id, index: message.index, kind: 'standalone' })
+
+      continue
+    }
+
+    const indices = [message.index]
+
+    while (i + 1 < messages.length && messages[i + 1].role !== 'user') {
+      indices.push(messages[++i].index)
+    }
+
+    groups.push({ id: message.id, indices, kind: 'turn' })
+  }
+
+  return groups
+}
+
+export const VirtualizedThread: FC<VirtualizedThreadProps> = ({
+  clampToComposer,
+  components,
+  emptyPlaceholder,
+  loadingIndicator,
+  sessionKey
+}) => {
+  const messageSignature = useAuiState(s =>
+    s.thread.messages.map((message, index) => `${index}:${message.id}:${message.role}`).join('\n')
+  )
+
+  const groups = useMemo(() => buildGroups(messageSignature), [messageSignature])
+  const renderEmpty = groups.length === 0 && Boolean(emptyPlaceholder)
+  const scrollerRef = useRef<HTMLDivElement | null>(null)
+
+  const virtualizer = useVirtualizer({
+    count: groups.length,
+    estimateSize: () => ESTIMATED_ITEM_HEIGHT,
+    getItemKey: index => groups[index]?.id ?? index,
+    getScrollElement: () => scrollerRef.current,
+    // Seed the rect so the initial range mounts something before
+    // `observeElementRect` reports the real layout (it overrides this).
+    initialRect: { height: 600, width: 800 },
+    overscan: OVERSCAN
+  })
+
+  useThreadScrollAnchor({
+    enabled: !renderEmpty,
+    groupCount: groups.length,
+    scrollerRef,
+    sessionKey: sessionKey ?? null,
+    virtualizer
+  })
+
+  const virtualItems = virtualizer.getVirtualItems()
+  const totalSize = virtualizer.getTotalSize()
+  const paddingTop = virtualItems[0]?.start ?? 0
+  const paddingBottom = Math.max(0, totalSize - (virtualItems.at(-1)?.end ?? 0))
+
+  return (
+    <div
+      className="relative min-h-0 max-w-full overflow-hidden contain-[layout_paint]"
+      style={{ height: clampToComposer ? 'var(--thread-viewport-height)' : '100%' }}
+    >
+      <div
+        className="size-full overflow-x-hidden overflow-y-auto overscroll-contain"
+        data-slot="aui_thread-viewport"
+        ref={scrollerRef}
+      >
+        {renderEmpty ? (
+          <div
+            className="mx-auto grid h-full w-full max-w-(--composer-width) grid-rows-[minmax(0,1fr)_auto] min-w-0 gap-(--conversation-turn-gap) px-6 py-8"
+            data-slot="aui_thread-content"
+          >
+            {emptyPlaceholder}
+          </div>
+        ) : (
+          <div
+            className={cn(
+              'mx-auto flex w-full max-w-(--composer-width) min-w-0 flex-col px-6 pt-[calc(var(--titlebar-height)+1.5rem)]'
+            )}
+            data-slot="aui_thread-content"
+          >
+            {/* Natural-flow virtualization: mounted items render as normal
+                flex siblings so `position: sticky` on the human bubble
+                resolves against the scroller without transform interference.
+                Padding spacers reserve scroll space for unmounted items. */}
+            <div style={{ paddingBottom: `${paddingBottom}px`, paddingTop: `${paddingTop}px` }}>
+              {virtualItems.map(virtualItem => {
+                const group = groups[virtualItem.index]
+
+                if (!group) {
+                  return null
+                }
+
+                return (
+                  <div
+                    className="flex min-w-0 flex-col gap-(--conversation-turn-gap) pb-(--conversation-turn-gap)"
+                    data-index={virtualItem.index}
+                    key={virtualItem.key}
+                    ref={virtualizer.measureElement}
+                  >
+                    {group.kind === 'turn' ? (
+                      <div
+                        className="composer-human-ai-pair-container relative flex min-w-0 flex-col gap-(--conversation-turn-gap)"
+                        data-slot="aui_turn-pair"
+                      >
+                        {group.indices.map(index => (
+                          <ThreadPrimitive.MessageByIndex components={components} index={index} key={index} />
+                        ))}
+                      </div>
+                    ) : (
+                      <ThreadPrimitive.MessageByIndex components={components} index={group.index} />
+                    )}
+                  </div>
+                )
+              })}
+            </div>
+            {loadingIndicator}
+            {clampToComposer && (
+              <div
+                aria-hidden="true"
+                className="shrink-0"
+                data-slot="aui_composer-clearance"
+                style={{ height: 'var(--thread-last-message-clearance)' }}
+              />
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+interface ScrollAnchorOptions {
+  enabled: boolean
+  groupCount: number
+  scrollerRef: React.RefObject<HTMLDivElement | null>
+  sessionKey: string | null
+  virtualizer: Virtualizer<HTMLDivElement, Element>
+}
+
+function useThreadScrollAnchor({ enabled, groupCount, scrollerRef, sessionKey, virtualizer }: ScrollAnchorOptions) {
+  // `armed` = parked at bottom, content growth should follow. Cleared on
+  // user-driven upward scroll; re-armed when they reach bottom again.
+  const armedRef = useRef(true)
+  const lastTopRef = useRef(0)
+  const prevSessionKeyRef = useRef(sessionKey)
+  const prevGroupCountRef = useRef(0)
+
+  const pinToBottom = useCallback(() => {
+    const el = scrollerRef.current
+
+    if (!el) {
+      return
+    }
+
+    el.scrollTop = el.scrollHeight
+    lastTopRef.current = el.scrollTop
+  }, [scrollerRef])
+
+  const jumpToBottom = useCallback(() => {
+    armedRef.current = true
+
+    if (groupCount > 0) {
+      virtualizer.scrollToIndex(groupCount - 1, { align: 'end', behavior: 'auto' })
+    }
+
+    requestAnimationFrame(() => {
+      if (armedRef.current) {
+        pinToBottom()
+      }
+    })
+  }, [groupCount, pinToBottom, virtualizer])
+
+  useEffect(() => () => setThreadScrolledUp(false), [])
+
+  // Track at-bottom state, dim composer when scrolled up, disarm on user
+  // scroll/wheel/touch.
+  useEffect(() => {
+    const el = scrollerRef.current
+
+    if (!el) {
+      return undefined
+    }
+
+    const disarm = () => {
+      armedRef.current = false
+    }
+
+    const onScroll = () => {
+      const top = el.scrollTop
+
+      if (top + 1 < lastTopRef.current) {
+        armedRef.current = false
+      }
+
+      lastTopRef.current = top
+
+      const atBottom = el.scrollHeight - (top + el.clientHeight) <= AT_BOTTOM_THRESHOLD
+
+      if (atBottom) {
+        armedRef.current = true
+      }
+
+      setThreadScrolledUp(!atBottom)
+    }
+
+    const onWheel = (event: WheelEvent) => {
+      if (event.deltaY < 0) {
+        disarm()
+      }
+    }
+
+    el.addEventListener('scroll', onScroll, { passive: true })
+    el.addEventListener('wheel', onWheel, { passive: true })
+    el.addEventListener('touchmove', disarm, { passive: true })
+
+    return () => {
+      el.removeEventListener('scroll', onScroll)
+      el.removeEventListener('wheel', onWheel)
+      el.removeEventListener('touchmove', disarm)
+    }
+  }, [scrollerRef])
+
+  // Follow content growth (streaming, item measurements, loading indicator)
+  // while armed.
+  useEffect(() => {
+    if (!enabled) {
+      return undefined
+    }
+
+    const el = scrollerRef.current
+
+    if (!el) {
+      return undefined
+    }
+
+    const observer = new ResizeObserver(() => {
+      if (armedRef.current) {
+        pinToBottom()
+      }
+    })
+
+    observer.observe(el)
+
+    if (el.firstElementChild) {
+      observer.observe(el.firstElementChild)
+    }
+
+    return () => observer.disconnect()
+  }, [enabled, pinToBottom, scrollerRef])
+
+  // Jump to bottom on session change OR when an empty thread first gets
+  // content. Both share the same intent and the same effect.
+  useEffect(() => {
+    const sessionChanged = prevSessionKeyRef.current !== sessionKey
+    const becameNonEmpty = prevGroupCountRef.current === 0 && groupCount > 0
+
+    prevSessionKeyRef.current = sessionKey
+    prevGroupCountRef.current = groupCount
+
+    if (enabled && (sessionChanged || becameNonEmpty)) {
+      jumpToBottom()
+    }
+  }, [enabled, groupCount, jumpToBottom, sessionKey])
+
+  useAuiEvent('thread.runStart', jumpToBottom)
+}
diff --git a/apps/desktop/src/components/assistant-ui/thread.tsx b/apps/desktop/src/components/assistant-ui/thread.tsx
index d0a039f0f14..ecc350d53d9 100644
--- a/apps/desktop/src/components/assistant-ui/thread.tsx
+++ b/apps/desktop/src/components/assistant-ui/thread.tsx
@@ -1,22 +1,57 @@
+import type { Unstable_TriggerAdapter, Unstable_TriggerItem } from '@assistant-ui/core'
 import {
   ActionBarPrimitive,
-  AuiIf,
   BranchPickerPrimitive,
   ComposerPrimitive,
   ErrorPrimitive,
   MessagePrimitive,
-  ThreadPrimitive,
   type ToolCallMessagePartProps,
-  useAuiEvent,
+  useAui,
   useAuiState
 } from '@assistant-ui/react'
 import { useStore } from '@nanostores/react'
-import { type FC, type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { StickToBottom, useStickToBottomContext } from 'use-stick-to-bottom'
+import { IconPlayerStopFilled } from '@tabler/icons-react'
+import {
+  type ClipboardEvent,
+  type FC,
+  type FocusEvent,
+  type FormEvent,
+  type KeyboardEvent,
+  type DragEvent as ReactDragEvent,
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from 'react'
 
+import { COMPOSER_DROP_ACTIVE_CLASS, COMPOSER_DROP_FADE_CLASS } from '@/app/chat/composer/drop-affordance'
+import {
+  type ComposerInsertMode,
+  focusComposerInput,
+  markActiveComposer,
+  onComposerFocusRequest,
+  onComposerInsertRequest
+} from '@/app/chat/composer/focus'
+import { useAtCompletions } from '@/app/chat/composer/hooks/use-at-completions'
+import { useSlashCompletions } from '@/app/chat/composer/hooks/use-slash-completions'
+import { dragHasAttachments, droppedFileInlineRef, insertInlineRefsIntoEditor } from '@/app/chat/composer/inline-refs'
+import {
+  composerPlainText,
+  placeCaretEnd,
+  refChipElement,
+  renderComposerContents,
+  RICH_INPUT_SLOT
+} from '@/app/chat/composer/rich-editor'
+import { detectTrigger, textBeforeCaret, type TriggerState } from '@/app/chat/composer/text-utils'
+import { ComposerTriggerPopover } from '@/app/chat/composer/trigger-popover'
+import { extractDroppedFiles, HERMES_PATHS_MIME } from '@/app/chat/hooks/use-composer-actions'
 import { ClarifyTool } from '@/components/assistant-ui/clarify-tool'
 import { DirectiveContent, DirectiveText } from '@/components/assistant-ui/directive-text'
+import { hermesDirectiveFormatter } from '@/components/assistant-ui/directive-text'
 import { MarkdownText } from '@/components/assistant-ui/markdown-text'
+import { VirtualizedThread } from '@/components/assistant-ui/thread-virtualizer'
 import { HoistedTodoPanel, todosFromMessageContent } from '@/components/assistant-ui/todo-tool'
 import { ToolFallback, ToolGroupSlot } from '@/components/assistant-ui/tool-fallback'
 import { TooltipIconButton } from '@/components/assistant-ui/tooltip-icon-button'
@@ -27,6 +62,7 @@ import { GeneratedImageProvider, useGeneratedImageContext } from '@/components/c
 import { ImageGenerationPlaceholder } from '@/components/chat/image-generation-placeholder'
 import { Intro, type IntroProps } from '@/components/chat/intro'
 import { PreviewAttachment } from '@/components/chat/preview-attachment'
+import { Codicon } from '@/components/ui/codicon'
 import { CopyButton } from '@/components/ui/copy-button'
 import {
   DropdownMenu,
@@ -36,35 +72,19 @@ import {
   DropdownMenuTrigger
 } from '@/components/ui/dropdown-menu'
 import { Loader } from '@/components/ui/loader'
+import type { HermesGateway } from '@/hermes'
+import { DATA_IMAGE_URL_RE } from '@/lib/embedded-images'
 import { triggerHaptic } from '@/lib/haptics'
-import {
-  CheckIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  GitBranchIcon,
-  Loader2Icon,
-  MoreHorizontalIcon,
-  PencilIcon,
-  RefreshCwIcon,
-  Volume2Icon,
-  VolumeXIcon,
-  XIcon
-} from '@/lib/icons'
+import { GitBranchIcon, Loader2Icon, Volume2Icon, VolumeXIcon } from '@/lib/icons'
 import { extractPreviewTargets } from '@/lib/preview-targets'
 import { useEnterAnimation } from '@/lib/use-enter-animation'
 import { cn } from '@/lib/utils'
 import { playSpeechText, stopVoicePlayback } from '@/lib/voice-playback'
 import { notifyError } from '@/store/notifications'
-import { setThreadScrolledUp } from '@/store/thread-scroll'
 import { $voicePlayback } from '@/store/voice-playback'
 
 type ThreadLoadingState = 'response' | 'session'
 
-interface StickyStateFlags {
-  escapedFromLock: boolean
-  isAtBottom: boolean
-}
-
 interface MessageActionProps {
   messageId: string
   messageText: string
@@ -99,236 +119,62 @@ const INTERRUPTED_ONLY_RE = /^_?\[interrupted\]_?$/i
 
 const isInterruptedOnlyMessage = (text: string) => INTERRUPTED_ONLY_RE.test(text.trim())
 
-function resetStickyState(state: StickyStateFlags) {
-  state.escapedFromLock = false
-  state.isAtBottom = true
-}
-
-function pinElementToBottom(el: HTMLElement) {
-  el.scrollTop = el.scrollHeight
-
-  return el.scrollTop
-}
-
 export const Thread: FC<{
   clampToComposer?: boolean
+  cwd?: string | null
+  gateway?: HermesGateway | null
   intro?: IntroProps
   loading?: ThreadLoadingState
   onBranchInNewChat?: (messageId: string) => void
+  onCancel?: () => Promise<void> | void
+  sessionId?: string | null
   sessionKey?: string | null
-}> = ({ clampToComposer = false, intro, loading, onBranchInNewChat, sessionKey }) => {
-  const introHero = useAuiState(s => Boolean(intro) && s.thread.isEmpty)
+}> = ({
+  clampToComposer = false,
+  cwd = null,
+  gateway = null,
+  intro,
+  loading,
+  onBranchInNewChat,
+  onCancel,
+  sessionId = null,
+  sessionKey
+}) => {
+  const messageComponents = useMemo(
+    () => ({
+      AssistantMessage: () => <AssistantMessage onBranchInNewChat={onBranchInNewChat} />,
+      SystemMessage,
+      UserEditComposer: () => <UserEditComposer cwd={cwd} gateway={gateway} sessionId={sessionId} />,
+      UserMessage: () => <UserMessage onCancel={onCancel} />
+    }),
+    [cwd, gateway, onBranchInNewChat, onCancel, sessionId]
+  )
+
+  const emptyPlaceholder = intro ? (
+    <div
+      className="flex min-h-0 w-full flex-col items-center justify-center"
+      style={{ paddingBottom: 'var(--composer-measured-height)' }}
+    >
+      <Intro {...intro} />
+    </div>
+  ) : undefined
 
   return (
     <GeneratedImageProvider>
-      <ThreadPrimitive.Root className="relative grid h-full min-h-0 max-w-full grid-rows-[minmax(0,1fr)] overflow-hidden bg-transparent contain-[layout_paint]">
-        <ThreadPrimitive.ViewportProvider>
-          <StickToBottom
-            className="relative min-h-0 max-w-full overflow-hidden contain-[layout_paint]"
-            initial="instant"
-            resize="instant"
-            style={{ height: clampToComposer ? 'var(--thread-viewport-height)' : '100%' }}
-          >
-            <ThreadScrollSync sessionKey={sessionKey} />
-            <StickToBottom.Content
-              className={cn(
-                'scroll-auto mx-auto min-h-full w-full max-w-[calc(var(--composer-width)-2rem)] min-w-0 gap-3 px-4 sm:px-6 lg:px-8',
-                introHero
-                  ? 'grid grid-rows-[minmax(0,1fr)_auto] py-[calc(var(--vsq)*12)]'
-                  : 'flex flex-col pt-[calc(var(--vsq)*19)]'
-              )}
-              data-slot="aui_thread-content"
-              scrollClassName="overflow-x-hidden overflow-y-auto overscroll-contain"
-            >
-              <AuiIf condition={s => Boolean(intro) && s.thread.isEmpty}>
-                {intro ? (
-                  <div
-                    className="flex min-h-0 w-full flex-col items-center justify-center"
-                    style={{ paddingBottom: 'var(--composer-measured-height)' }}
-                  >
-                    <Intro {...intro} />
-                  </div>
-                ) : null}
-              </AuiIf>
-              <ThreadPrimitive.Messages
-                components={{
-                  AssistantMessage: () => <AssistantMessage onBranchInNewChat={onBranchInNewChat} />,
-                  SystemMessage,
-                  UserEditComposer,
-                  UserMessage
-                }}
-              />
-              {loading === 'response' && <ResponseLoadingIndicator />}
-            </StickToBottom.Content>
-          </StickToBottom>
-        </ThreadPrimitive.ViewportProvider>
+      <div className="relative grid h-full min-h-0 max-w-full grid-rows-[minmax(0,1fr)] overflow-hidden bg-transparent contain-[layout_paint]">
+        <VirtualizedThread
+          clampToComposer={clampToComposer}
+          components={messageComponents}
+          emptyPlaceholder={emptyPlaceholder}
+          loadingIndicator={loading === 'response' ? <ResponseLoadingIndicator /> : null}
+          sessionKey={sessionKey}
+        />
         {loading === 'session' && <CenteredThreadSpinner />}
-      </ThreadPrimitive.Root>
+      </div>
     </GeneratedImageProvider>
   )
 }
 
-const ThreadScrollSync: FC<{ sessionKey?: string | null }> = ({ sessionKey }) => {
-  const { scrollRef, isAtBottom, state } = useStickToBottomContext()
-  const sessionKeyRef = useRef<string | null>(sessionKey ?? null)
-
-  const armedRef = useRef<ScrollBehavior | null>(null)
-  const pinRafRef = useRef<number | null>(null)
-  const previousScrollTopRef = useRef(0)
-  const suppressNextScrollEventRef = useRef(false)
-
-  const messageCount = useAuiState(s => s.thread.messages.length)
-  const prevMessageCountRef = useRef(messageCount)
-
-  useEffect(() => {
-    setThreadScrolledUp(!isAtBottom)
-  }, [isAtBottom])
-
-  useEffect(() => {
-    return () => {
-      setThreadScrolledUp(false)
-    }
-  }, [])
-
-  const armAndPin = useCallback(
-    (behavior: ScrollBehavior) => {
-      const el = scrollRef.current
-
-      if (!el) {
-        return
-      }
-
-      armedRef.current = behavior
-      resetStickyState(state)
-      suppressNextScrollEventRef.current = true
-      previousScrollTopRef.current = pinElementToBottom(el)
-    },
-    [scrollRef, state]
-  )
-
-  useEffect(() => {
-    const el = scrollRef.current
-
-    if (!el) {
-      return
-    }
-
-    const observer = new ResizeObserver(() => {
-      if (pinRafRef.current !== null) {
-        return
-      }
-
-      pinRafRef.current = window.requestAnimationFrame(() => {
-        pinRafRef.current = null
-
-        if (!armedRef.current) {
-          return
-        }
-
-        const distance = el.scrollHeight - (el.scrollTop + el.clientHeight)
-
-        if (distance < 2) {
-          armedRef.current = null
-
-          return
-        }
-
-        suppressNextScrollEventRef.current = true
-        previousScrollTopRef.current = pinElementToBottom(el)
-      })
-    })
-
-    observer.observe(el)
-
-    const content = el.firstElementChild
-
-    if (content) {
-      observer.observe(content)
-    }
-
-    return () => {
-      observer.disconnect()
-
-      if (pinRafRef.current !== null) {
-        window.cancelAnimationFrame(pinRafRef.current)
-        pinRafRef.current = null
-      }
-    }
-  }, [scrollRef])
-
-  useEffect(() => {
-    const el = scrollRef.current
-
-    if (!el) {
-      return
-    }
-
-    const onWheel = (e: WheelEvent) => {
-      if (e.deltaY < 0) {
-        armedRef.current = null
-      }
-    }
-
-    const onTouch = () => {
-      armedRef.current = null
-    }
-
-    const onScroll = () => {
-      const currentTop = el.scrollTop
-
-      if (suppressNextScrollEventRef.current) {
-        suppressNextScrollEventRef.current = false
-        previousScrollTopRef.current = currentTop
-
-        return
-      }
-
-      if (currentTop + 1 < previousScrollTopRef.current) {
-        armedRef.current = null
-      }
-
-      previousScrollTopRef.current = currentTop
-    }
-
-    el.addEventListener('wheel', onWheel, { passive: true })
-    el.addEventListener('touchmove', onTouch, { passive: true })
-    el.addEventListener('scroll', onScroll, { passive: true })
-
-    return () => {
-      el.removeEventListener('wheel', onWheel)
-      el.removeEventListener('touchmove', onTouch)
-      el.removeEventListener('scroll', onScroll)
-    }
-  }, [scrollRef])
-
-  useEffect(() => {
-    const next = sessionKey ?? null
-
-    if (sessionKeyRef.current === next) {
-      return
-    }
-
-    sessionKeyRef.current = next
-    prevMessageCountRef.current = 0
-    armAndPin('auto')
-  }, [armAndPin, sessionKey])
-
-  useEffect(() => {
-    const prev = prevMessageCountRef.current
-    prevMessageCountRef.current = messageCount
-
-    if (prev === 0 && messageCount > 0) {
-      armAndPin('auto')
-    }
-  }, [armAndPin, messageCount])
-
-  useAuiEvent('thread.runStart', () => {
-    armAndPin('instant')
-  })
-
-  return null
-}
-
 function pickPrimaryPreviewTarget(targets: string[]): string[] {
   if (targets.length <= 1) {
     return targets
@@ -386,7 +232,7 @@ const AssistantMessage: FC<{ onBranchInNewChat?: (messageId: string) => void }>
     >
       <div
         className={cn(
-          'wrap-anywhere min-w-0 max-w-full overflow-hidden text-pretty text-base leading-(--dt-line-height) text-foreground',
+          'wrap-anywhere min-w-0 max-w-full overflow-hidden text-pretty text-[length:var(--conversation-text-font-size)] leading-(--dt-line-height) text-foreground',
           interruptedOnly && 'text-[0.8rem] leading-5 text-muted-foreground/82'
         )}
         data-slot="aui_assistant-message-content"
@@ -402,7 +248,7 @@ const AssistantMessage: FC<{ onBranchInNewChat?: (messageId: string) => void }>
         )}
         <MessagePrimitive.Error>
           <ErrorPrimitive.Root
-            className="mt-2 rounded-md border border-destructive/20 bg-destructive/5 px-3 py-2 text-sm text-destructive"
+            className="mt-1.5 text-[0.78rem] leading-5 text-[color-mix(in_srgb,var(--dt-destructive)_78%,var(--ui-text-secondary))]"
             role="alert"
           >
             <ErrorPrimitive.Message />
@@ -457,7 +303,7 @@ const ImageGenerateTool: FC<ToolCallMessagePartProps> = ({ result }) => {
   }
 
   return (
-    <div className="mt-2">
+    <div className="mt-1.5">
       <ImageGenerationPlaceholder />
     </div>
   )
@@ -527,28 +373,36 @@ const ThinkingDisclosure: FC<{
   }, [isPreview])
 
   return (
-    <div className="text-sm text-muted-foreground" data-slot="aui_thinking-disclosure" ref={enterRef}>
+    <div
+      className="text-[length:var(--conversation-tool-font-size)] text-(--ui-text-tertiary)"
+      data-slot="aui_thinking-disclosure"
+      ref={enterRef}
+    >
       <DisclosureRow onToggle={() => setUserOpen(!open)} open={open}>
         <span className="flex min-w-0 items-baseline gap-1.5">
           <span
             className={cn(
-              'text-[0.78rem] font-medium leading-[1.1rem] text-foreground/85',
+              'text-[length:var(--conversation-tool-font-size)] font-medium leading-(--conversation-line-height) text-(--ui-text-secondary)',
               pending && 'shimmer text-foreground/55'
             )}
           >
             Thinking
           </span>
           {pending && (
-            <ActivityTimerText className="text-[0.625rem] tabular-nums text-muted-foreground/55" seconds={elapsed} />
+            <ActivityTimerText
+              className="text-[length:var(--conversation-caption-font-size)] tabular-nums text-(--ui-text-tertiary)"
+              seconds={elapsed}
+            />
           )}
         </span>
       </DisclosureRow>
       {open && (
         <div
           className={cn(
-            // Keep the reasoning body tucked close to the "Thinking" row so
-            // it aligns with tool-group disclosure rhythm.
-            'mt-0.5 w-full min-w-0 max-w-full overflow-hidden pr-2 pl-3 wrap-anywhere pb-1',
+            // Body sits flush with the "Thinking" header — no left indent —
+            // and inherits the disclosure-level opacity fade defined in
+            // styles.css (~0.67 at rest, 1 on hover/focus).
+            'mt-0.5 w-full min-w-0 max-w-full overflow-hidden wrap-anywhere pb-1',
             isPreview && 'thinking-preview max-h-40'
           )}
           ref={scrollRef}
@@ -660,10 +514,10 @@ const AssistantActionBar: FC<MessageActionProps> = ({ messageId, messageText, on
   const [menuOpen, setMenuOpen] = useState(false)
 
   return (
-    <div className="relative shrink-0">
+    <div className="relative flex w-full shrink-0 justify-end">
       <ActionBarPrimitive.Root
         className={cn(
-          'relative flex flex-row items-center gap-2 py-2.5 opacity-0 pointer-events-none group-hover:pointer-events-auto group-hover:opacity-100 focus-within:pointer-events-auto focus-within:opacity-100',
+          'relative flex flex-row items-center justify-end gap-2 py-1.5 opacity-0 pointer-events-none group-hover:pointer-events-auto group-hover:opacity-100 focus-within:pointer-events-auto focus-within:opacity-100',
           menuOpen && 'pointer-events-auto opacity-100 [&_button]:opacity-100'
         )}
         data-slot="aui_msg-actions"
@@ -672,13 +526,13 @@ const AssistantActionBar: FC<MessageActionProps> = ({ messageId, messageText, on
         <CopyButton appearance="icon" buttonSize="icon" disabled={!messageText} label="Copy" text={messageText} />
         <ActionBarPrimitive.Reload asChild>
           <TooltipIconButton onClick={() => triggerHaptic('submit')} tooltip="Refresh">
-            <RefreshCwIcon />
+            <Codicon name="refresh" />
           </TooltipIconButton>
         </ActionBarPrimitive.Reload>
         <DropdownMenu onOpenChange={setMenuOpen} open={menuOpen}>
           <DropdownMenuTrigger asChild>
             <TooltipIconButton tooltip="More actions">
-              <MoreHorizontalIcon />
+              <Codicon name="ellipsis" />
             </TooltipIconButton>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="start" onCloseAutoFocus={e => e.preventDefault()} sideOffset={6}>
@@ -744,19 +598,19 @@ const MessageTimestamp: FC = () => {
 }
 
 const AssistantFooter: FC<MessageActionProps> = props => (
-  <div className="flex min-h-6 flex-col items-start gap-1 pl-(--message-text-indent)">
+  <div className="flex min-h-6 flex-col items-end gap-1 pr-(--message-text-indent) pl-(--message-text-indent)">
     <BranchPickerPrimitive.Root
       className="inline-flex h-6 items-center gap-1 text-xs text-muted-foreground"
       hideWhenSingleBranch
     >
-      <BranchPickerPrimitive.Previous className="grid size-6 place-items-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:opacity-35">
-        <ChevronLeftIcon className="size-3.5" />
+      <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">
+        <Codicon name="chevron-left" size="0.875rem" />
       </BranchPickerPrimitive.Previous>
       <span className="tabular-nums">
         <BranchPickerPrimitive.Number /> / <BranchPickerPrimitive.Count />
       </span>
-      <BranchPickerPrimitive.Next className="grid size-6 place-items-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:opacity-35">
-        <ChevronRightIcon className="size-3.5" />
+      <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">
+        <Codicon name="chevron-right" size="0.875rem" />
       </BranchPickerPrimitive.Next>
     </BranchPickerPrimitive.Root>
     <AssistantActionBar {...props} />
@@ -773,9 +627,50 @@ function messageAttachmentRefs(value: unknown): string[] {
   return value.every(ref => typeof ref === 'string') ? value : EMPTY_ATTACHMENT_REFS
 }
 
-const UserMessage: FC = () => {
+function StickyHumanMessageContainer({ children }: { children: ReactNode }) {
+  return (
+    <div
+      className="group/user-message sticky top-0 z-40 -mx-4 flex w-[calc(100%+2rem)] min-w-0 max-w-none flex-col items-stretch gap-0 self-end overflow-visible bg-(--ui-chat-surface-background) px-4 pb-(--conversation-turn-gap) pt-2"
+      data-role="user"
+      data-slot="aui_user-message-root"
+    >
+      {children}
+    </div>
+  )
+}
+
+// Shared "user bubble" base. Both the read-only message and the inline
+// edit composer render the same bubble surface (rounded glass card,
+// shadow-composer); they only differ in border weight, cursor, and
+// padding-right (the read-only view reserves room for the restore icon).
+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'
+
+const USER_ACTION_ICON_SIZE = '0.6875rem'
+const StopGlyph = <IconPlayerStopFilled aria-hidden className="size-3.5 -translate-y-px" />
+
+const UserMessage: FC<{
+  onCancel?: () => Promise<void> | void
+}> = ({ onCancel }) => {
+  const messageId = useAuiState(s => s.message.id)
   const content = useAuiState(s => s.message.content)
   const messageText = messageContentText(content)
+  const threadRunning = useAuiState(s => s.thread.isRunning)
+
+  const latestUserId = useAuiState(s => {
+    for (let i = s.thread.messages.length - 1; i >= 0; i--) {
+      const message = s.thread.messages[i] as { id?: string; role?: string }
+
+      if (message.role === 'user') {
+        return message.id ?? null
+      }
+    }
+
+    return null
+  })
 
   const attachmentRefs = useAuiState(s => {
     const custom = (s.message.metadata?.custom ?? {}) as { attachmentRefs?: unknown }
@@ -784,47 +679,108 @@ const UserMessage: FC = () => {
   })
 
   const hasBody = messageText.trim().length > 0
+  const isLatestUser = messageId === latestUserId
+  const showStop = isLatestUser && threadRunning && Boolean(onCancel)
+  const showRestore = !isLatestUser && !threadRunning
+
+  const bubbleClassName = cn(
+    USER_BUBBLE_BASE_CLASS,
+    'border-(--ui-stroke-tertiary) pr-9 text-[length:var(--conversation-text-font-size)] leading-(--dt-line-height) text-foreground/95 transition-colors',
+    !threadRunning && 'cursor-pointer hover:border-(--ui-stroke-secondary)'
+  )
+
+  const bubbleContent = (
+    <>
+      {attachmentRefs.length > 0 && (
+        <span className="-mx-1 flex flex-wrap gap-1 border-b border-border/45 pb-1.5">
+          <DirectiveContent text={attachmentRefs.join(' ')} />
+        </span>
+      )}
+      {hasBody && (
+        <span className="wrap-anywhere block whitespace-pre-line">
+          <MessagePrimitive.Parts components={{ Text: DirectiveText }} />
+        </span>
+      )}
+    </>
+  )
 
   return (
-    <MessagePrimitive.Root
-      className="group flex min-w-0 max-w-[min(72%,34rem)] flex-col items-end gap-2 self-end overflow-hidden"
-      data-role="user"
-      data-slot="aui_user-message-root"
-    >
-      <div className="flex min-w-0 max-w-full flex-col gap-1.5 overflow-hidden rounded-2xl border border-[color-mix(in_srgb,var(--dt-user-bubble-border)_78%,transparent)] bg-[color-mix(in_srgb,var(--dt-user-bubble)_94%,transparent)] px-3 py-2 text-base leading-(--dt-line-height) text-foreground/95">
-        {attachmentRefs.length > 0 && (
-          <div className="-mx-1 flex flex-wrap gap-1 border-b border-border/45 pb-1.5">
-            <DirectiveContent text={attachmentRefs.join(' ')} />
+    <MessagePrimitive.Root asChild>
+      <StickyHumanMessageContainer>
+        <ActionBarPrimitive.Root className="relative w-full max-w-full" data-slot="aui_user-bubble-actions">
+          <div className="human-message-with-todos-wrapper flex w-full flex-col gap-0">
+            <div className="relative w-full">
+              {threadRunning ? (
+                <div className={bubbleClassName}>{bubbleContent}</div>
+              ) : (
+                <ActionBarPrimitive.Edit asChild>
+                  <button
+                    aria-label="Edit message"
+                    className={bubbleClassName}
+                    onClick={() => triggerHaptic('selection')}
+                    title="Edit message"
+                    type="button"
+                  >
+                    {bubbleContent}
+                  </button>
+                </ActionBarPrimitive.Edit>
+              )}
+              {(showStop || showRestore) && (
+                <div className="pointer-events-none absolute right-2 bottom-2 z-10 flex items-center justify-center opacity-0 transition-opacity group-hover/user-message:opacity-100 group-focus-within/user-message:opacity-100">
+                  {showStop ? (
+                    <button
+                      aria-label="Stop"
+                      className={cn('pointer-events-auto size-5', USER_ACTION_ICON_BUTTON_CLASS)}
+                      onClick={event => {
+                        event.preventDefault()
+                        event.stopPropagation()
+                        void onCancel?.()
+                      }}
+                      title="Stop"
+                      type="button"
+                    >
+                      {StopGlyph}
+                    </button>
+                  ) : (
+                    <span
+                      aria-hidden="true"
+                      className="flex size-6 items-center justify-center rounded-md text-(--ui-text-tertiary)"
+                      title="Editable checkpoint"
+                    >
+                      <Codicon name="discard" size="0.875rem" />
+                    </span>
+                  )}
+                </div>
+              )}
+            </div>
+            <BranchPickerPrimitive.Root
+              className="checkpoint-container flex items-center gap-1 pb-0 pt-1 pl-1.5 text-[0.75rem] leading-none text-(--ui-text-tertiary)"
+              hideWhenSingleBranch
+            >
+              <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"
+                title="Restore previous checkpoint"
+              >
+                Restore checkpoint
+              </BranchPickerPrimitive.Previous>
+              <span className="checkpoint-divider opacity-55">
+                <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"
+                title="Restore next checkpoint"
+              >
+                Go forward
+              </BranchPickerPrimitive.Next>
+            </BranchPickerPrimitive.Root>
           </div>
-        )}
-        {hasBody && (
-          <div className="wrap-anywhere whitespace-pre-line">
-            <MessagePrimitive.Parts components={{ Text: DirectiveText }} />
-          </div>
-        )}
-      </div>
-      <UserActionBar messageText={messageText} />
+        </ActionBarPrimitive.Root>
+      </StickyHumanMessageContainer>
     </MessagePrimitive.Root>
   )
 }
 
-const UserActionBar: FC<{ messageText: string }> = ({ messageText }) => (
-  <div className="relative shrink-0">
-    <ActionBarPrimitive.Root
-      className="relative flex flex-row items-center gap-2 py-2.5 opacity-0 pointer-events-none group-hover:pointer-events-auto group-hover:opacity-100 focus-within:pointer-events-auto focus-within:opacity-100"
-      data-slot="aui_msg-actions"
-      hideWhenRunning
-    >
-      <CopyButton appearance="icon" buttonSize="icon" disabled={!messageText} label="Copy" text={messageText} />
-      <ActionBarPrimitive.Edit asChild>
-        <TooltipIconButton onClick={() => triggerHaptic('selection')} tooltip="Edit">
-          <PencilIcon />
-        </TooltipIconButton>
-      </ActionBarPrimitive.Edit>
-    </ActionBarPrimitive.Root>
-  </div>
-)
-
 const SLASH_STATUS_RE = /^slash:(?<command>\/[^\n]+)\n(?<output>[\s\S]*)$/
 
 const SystemMessage: FC = () => {
@@ -861,29 +817,502 @@ const SystemMessage: FC = () => {
   )
 }
 
-const UserEditComposer: FC = () => (
-  <ComposerPrimitive.Root
-    className="flex min-w-[min(18rem,72vw)] max-w-[min(72%,34rem)] flex-col gap-1.5 self-end rounded-2xl border border-[color-mix(in_srgb,var(--dt-user-bubble-border)_88%,transparent)] bg-[color-mix(in_srgb,var(--dt-user-bubble)_98%,transparent)] px-3 py-2 shadow-sm"
-    data-slot="aui_edit-composer-root"
-  >
-    <ComposerPrimitive.Input
-      autoFocus
-      className="min-h-8 w-full resize-none bg-transparent text-base leading-(--dt-line-height) text-foreground/95 outline-none"
-      rows={1}
-      submitMode="enter"
-      unstable_focusOnScrollToBottom={false}
-    />
-    <div className="flex justify-end gap-1">
-      <ComposerPrimitive.Cancel asChild>
-        <TooltipIconButton tooltip="Cancel edit">
-          <XIcon />
-        </TooltipIconButton>
-      </ComposerPrimitive.Cancel>
-      <ComposerPrimitive.Send asChild>
-        <TooltipIconButton onClick={() => triggerHaptic('submit')} tooltip="Send edit">
-          <CheckIcon />
-        </TooltipIconButton>
-      </ComposerPrimitive.Send>
-    </div>
-  </ComposerPrimitive.Root>
-)
+interface UserEditComposerProps {
+  cwd: string | null
+  gateway: HermesGateway | null
+  sessionId: string | null
+}
+
+const UserEditComposer: FC<UserEditComposerProps> = ({ cwd, gateway, sessionId }) => {
+  const aui = useAui()
+  const draft = useAuiState(s => s.composer.text)
+  const rootRef = useRef<HTMLDivElement | null>(null)
+  const editorRef = useRef<HTMLDivElement | null>(null)
+  const draftRef = useRef(draft)
+  const dragDepthRef = useRef(0)
+  const [dragActive, setDragActive] = useState(false)
+  const [trigger, setTrigger] = useState<TriggerState | null>(null)
+  const [triggerActive, setTriggerActive] = useState(0)
+  const [triggerItems, setTriggerItems] = useState<readonly Unstable_TriggerItem[]>([])
+  const [triggerPlacement, setTriggerPlacement] = useState<'bottom' | 'top'>('top')
+  const [focusRequestId, setFocusRequestId] = useState(0)
+  const [submitting, setSubmitting] = useState(false)
+  const expanded = draft.includes('\n')
+  const canSubmit = draft.trim().length > 0
+  const at = useAtCompletions({ cwd, gateway, sessionId })
+  const slash = useSlashCompletions({ gateway })
+
+  const focusEditor = useCallback(() => {
+    const editor = editorRef.current
+
+    focusComposerInput(editor)
+
+    if (editor) {
+      placeCaretEnd(editor)
+    }
+
+    markActiveComposer('edit')
+  }, [])
+
+  const requestEditFocus = useCallback(() => {
+    setFocusRequestId(id => id + 1)
+  }, [])
+
+  const appendExternalText = useCallback(
+    (text: string, mode: ComposerInsertMode) => {
+      const value = text.trim()
+
+      if (!value) {
+        return
+      }
+
+      const base = mode === 'inline' ? draftRef.current.trimEnd() : draftRef.current
+      const sep = mode === 'inline' ? (base ? ' ' : '') : base && !base.endsWith('\n') ? '\n\n' : ''
+      const next = `${base}${sep}${value}`
+
+      draftRef.current = next
+      aui.composer().setText(next)
+
+      const editor = editorRef.current
+
+      if (editor) {
+        renderComposerContents(editor, next)
+        placeCaretEnd(editor)
+      }
+
+      setFocusRequestId(id => id + 1)
+    },
+    [aui]
+  )
+
+  useEffect(() => {
+    draftRef.current = draft
+
+    const editor = editorRef.current
+
+    if (
+      editor &&
+      (editor.childNodes.length === 0 || (document.activeElement !== editor && composerPlainText(editor) !== draft))
+    ) {
+      renderComposerContents(editor, draft)
+
+      if (document.activeElement === editor) {
+        placeCaretEnd(editor)
+      }
+    }
+  }, [draft])
+
+  useEffect(() => {
+    focusEditor()
+  }, [focusEditor, focusRequestId])
+
+  useEffect(() => {
+    const offFocus = onComposerFocusRequest(target => {
+      if (target === 'edit') {
+        setFocusRequestId(id => id + 1)
+      }
+    })
+
+    const offInsert = onComposerInsertRequest(({ mode, target, text }) => {
+      if (target === 'edit') {
+        appendExternalText(text, mode)
+      }
+    })
+
+    return () => {
+      offFocus()
+      offInsert()
+    }
+  }, [appendExternalText])
+
+  const syncDraftFromEditor = useCallback(
+    (editor: HTMLDivElement) => {
+      const nextDraft = composerPlainText(editor)
+
+      if (nextDraft !== draftRef.current) {
+        draftRef.current = nextDraft
+        aui.composer().setText(nextDraft)
+      }
+
+      return nextDraft
+    },
+    [aui]
+  )
+
+  const refreshTrigger = useCallback(() => {
+    const editor = editorRef.current
+
+    if (!editor) {
+      return
+    }
+
+    const before = textBeforeCaret(editor)
+    const detected = detectTrigger(before ?? composerPlainText(editor))
+
+    if (detected) {
+      const rect = editor.getBoundingClientRect()
+      const spaceAbove = rect.top
+      const spaceBelow = window.innerHeight - rect.bottom
+
+      setTriggerPlacement(spaceAbove < 220 && spaceBelow > spaceAbove ? 'bottom' : 'top')
+    }
+
+    setTrigger(detected)
+    setTriggerActive(0)
+  }, [])
+
+  const closeTrigger = useCallback(() => {
+    setTrigger(null)
+    setTriggerItems([])
+    setTriggerActive(0)
+  }, [])
+
+  const triggerAdapter: Unstable_TriggerAdapter | null =
+    trigger?.kind === '@' ? at.adapter : trigger?.kind === '/' ? slash.adapter : null
+
+  useEffect(() => {
+    if (!trigger || !triggerAdapter?.search) {
+      setTriggerItems([])
+
+      return
+    }
+
+    setTriggerItems(triggerAdapter.search(trigger.query))
+  }, [trigger, triggerAdapter])
+
+  useEffect(() => {
+    setTriggerActive(idx => Math.min(idx, Math.max(0, triggerItems.length - 1)))
+  }, [triggerItems.length])
+
+  const triggerLoading = trigger?.kind === '@' ? at.loading : trigger?.kind === '/' ? slash.loading : false
+
+  const replaceTriggerWithChip = useCallback(
+    (item: Unstable_TriggerItem) => {
+      const editor = editorRef.current
+
+      if (!editor || !trigger) {
+        return
+      }
+
+      const serialized = hermesDirectiveFormatter.serialize(item)
+      const starter = serialized.endsWith(':')
+      const text = starter || serialized.endsWith(' ') ? serialized : `${serialized} `
+      const directive = !starter && serialized.match(/^@([^:]+):(.+)$/)
+
+      const finish = () => {
+        draftRef.current = composerPlainText(editor)
+        aui.composer().setText(draftRef.current)
+        requestEditFocus()
+        starter ? window.setTimeout(refreshTrigger, 0) : closeTrigger()
+      }
+
+      const sel = window.getSelection()
+      const range = sel?.rangeCount ? sel.getRangeAt(0) : null
+      const node = range?.startContainer
+      const offset = range?.startOffset ?? 0
+
+      if (!sel || !range || node?.nodeType !== Node.TEXT_NODE || offset < trigger.tokenLength) {
+        const current = composerPlainText(editor)
+        renderComposerContents(editor, `${current.slice(0, Math.max(0, current.length - trigger.tokenLength))}${text}`)
+        placeCaretEnd(editor)
+
+        return finish()
+      }
+
+      const replaceRange = document.createRange()
+      replaceRange.setStart(node, offset - trigger.tokenLength)
+      replaceRange.setEnd(node, offset)
+      replaceRange.deleteContents()
+
+      if (directive) {
+        const chip = refChipElement(directive[1], directive[2])
+        const space = document.createTextNode(' ')
+        const fragment = document.createDocumentFragment()
+        fragment.append(chip, space)
+        replaceRange.insertNode(fragment)
+
+        const caret = document.createRange()
+        caret.setStart(space, 1)
+        caret.collapse(true)
+        sel.removeAllRanges()
+        sel.addRange(caret)
+
+        return finish()
+      }
+
+      document.execCommand('insertText', false, text)
+      finish()
+    },
+    [aui, closeTrigger, refreshTrigger, requestEditFocus, trigger]
+  )
+
+  const insertDroppedRefs = useCallback(
+    (candidates: ReturnType<typeof extractDroppedFiles>) => {
+      const editor = editorRef.current
+
+      if (!editor) {
+        return false
+      }
+
+      const refs = candidates
+        .map(candidate => droppedFileInlineRef(candidate, cwd))
+        .filter((ref): ref is string => Boolean(ref))
+
+      const nextDraft = insertInlineRefsIntoEditor(editor, refs)
+
+      if (nextDraft === null) {
+        return false
+      }
+
+      draftRef.current = nextDraft
+      aui.composer().setText(nextDraft)
+      requestEditFocus()
+
+      return true
+    },
+    [aui, cwd, requestEditFocus]
+  )
+
+  const resetDragState = useCallback(() => {
+    dragDepthRef.current = 0
+    setDragActive(false)
+  }, [])
+
+  const handleDragEnter = (event: ReactDragEvent<HTMLElement>) => {
+    if (!dragHasAttachments(event.dataTransfer, HERMES_PATHS_MIME)) {
+      return
+    }
+
+    event.preventDefault()
+    dragDepthRef.current += 1
+
+    if (!dragActive) {
+      setDragActive(true)
+    }
+  }
+
+  const handleDragOver = (event: ReactDragEvent<HTMLElement>) => {
+    if (!dragHasAttachments(event.dataTransfer, HERMES_PATHS_MIME)) {
+      return
+    }
+
+    event.preventDefault()
+    event.dataTransfer.dropEffect = 'copy'
+  }
+
+  const handleDragLeave = (event: ReactDragEvent<HTMLElement>) => {
+    event.preventDefault()
+    dragDepthRef.current = Math.max(0, dragDepthRef.current - 1)
+
+    if (dragDepthRef.current === 0) {
+      setDragActive(false)
+    }
+  }
+
+  const handleDrop = (event: ReactDragEvent<HTMLElement>) => {
+    if (!dragHasAttachments(event.dataTransfer, HERMES_PATHS_MIME)) {
+      return
+    }
+
+    const candidates = extractDroppedFiles(event.dataTransfer)
+
+    if (!candidates.length) {
+      return
+    }
+
+    event.preventDefault()
+    event.stopPropagation()
+    resetDragState()
+
+    if (insertDroppedRefs(candidates)) {
+      triggerHaptic('selection')
+    }
+  }
+
+  const handleInput = (event: FormEvent<HTMLDivElement>) => {
+    const editor = event.currentTarget
+
+    if (editor.childNodes.length === 1 && editor.firstChild?.nodeName === 'BR') {
+      editor.replaceChildren()
+    }
+
+    syncDraftFromEditor(editor)
+    window.setTimeout(refreshTrigger, 0)
+  }
+
+  const handlePaste = (event: ClipboardEvent<HTMLDivElement>) => {
+    const pastedText = event.clipboardData.getData('text')
+
+    if (!pastedText || DATA_IMAGE_URL_RE.test(pastedText.trim())) {
+      event.preventDefault()
+
+      return
+    }
+
+    event.preventDefault()
+    document.execCommand('insertText', false, pastedText)
+    syncDraftFromEditor(event.currentTarget)
+  }
+
+  const submitEdit = (editor: HTMLDivElement) => {
+    const nextDraft = syncDraftFromEditor(editor)
+
+    if (submitting || !nextDraft.trim()) {
+      return
+    }
+
+    setSubmitting(true)
+    aui.composer().send()
+  }
+
+  const handleEditBlur = useCallback(
+    (event: FocusEvent<HTMLDivElement>) => {
+      const nextTarget = event.relatedTarget
+
+      if (nextTarget instanceof Node && event.currentTarget.contains(nextTarget)) {
+        return
+      }
+
+      window.setTimeout(() => {
+        const root = rootRef.current
+        const active = document.activeElement
+
+        if (submitting || (root && active && root.contains(active))) {
+          return
+        }
+
+        closeTrigger()
+        aui.composer().cancel()
+      }, 80)
+    },
+    [aui, closeTrigger, submitting]
+  )
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (trigger && triggerItems.length > 0) {
+      if (event.key === 'ArrowDown') {
+        event.preventDefault()
+        setTriggerActive(idx => (idx + 1) % triggerItems.length)
+
+        return
+      }
+
+      if (event.key === 'ArrowUp') {
+        event.preventDefault()
+        setTriggerActive(idx => (idx - 1 + triggerItems.length) % triggerItems.length)
+
+        return
+      }
+
+      if (event.key === 'Enter' || event.key === 'Tab') {
+        event.preventDefault()
+        const item = triggerItems[triggerActive]
+
+        if (item) {
+          replaceTriggerWithChip(item)
+        }
+
+        return
+      }
+
+      if (event.key === 'Escape') {
+        event.preventDefault()
+        closeTrigger()
+
+        return
+      }
+    }
+
+    if (event.key === 'Escape') {
+      event.preventDefault()
+      aui.composer().cancel()
+
+      return
+    }
+
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault()
+      submitEdit(event.currentTarget)
+    }
+  }
+
+  return (
+    <ComposerPrimitive.Root className="contents" data-slot="aui_edit-composer-root">
+      <StickyHumanMessageContainer>
+        <div
+          className="composer-human-message-container human-execution-message-top relative flex w-full items-start rounded-md bg-(--ui-chat-surface-background)"
+          onBlur={handleEditBlur}
+          onDragEnter={handleDragEnter}
+          onDragLeave={handleDragLeave}
+          onDragOver={handleDragOver}
+          onDrop={handleDrop}
+          ref={rootRef}
+        >
+          {trigger && (
+            <ComposerTriggerPopover
+              activeIndex={triggerActive}
+              items={triggerItems}
+              kind={trigger.kind}
+              loading={triggerLoading}
+              onHover={setTriggerActive}
+              onPick={replaceTriggerWithChip}
+              placement={triggerPlacement}
+            />
+          )}
+          <div
+            className={cn(
+              USER_BUBBLE_BASE_CLASS,
+              'ui-prompt-input__container relative border-(--ui-stroke-secondary) data-[expanded=true]:min-h-20',
+              COMPOSER_DROP_FADE_CLASS,
+              dragActive && COMPOSER_DROP_ACTIVE_CLASS
+            )}
+            data-expanded={expanded ? 'true' : undefined}
+          >
+            <div
+              aria-label="Edit message"
+              autoFocus
+              className={cn(
+                'ui-prompt-input-editor__input max-h-48 w-full resize-none bg-transparent p-0 pr-7 text-[length:var(--conversation-text-font-size)] leading-(--dt-line-height) text-foreground/95 outline-none',
+                'empty:before:content-[attr(data-placeholder)] empty:before:text-muted-foreground/60',
+                '**:data-ref-text:cursor-default',
+                expanded ? 'min-h-16' : 'min-h-[1.25rem]'
+              )}
+              contentEditable
+              data-placeholder="Edit message"
+              data-slot={RICH_INPUT_SLOT}
+              onBlur={() => window.setTimeout(closeTrigger, 80)}
+              onDragOver={handleDragOver}
+              onDrop={handleDrop}
+              onFocus={() => markActiveComposer('edit')}
+              onInput={handleInput}
+              onKeyDown={handleKeyDown}
+              onKeyUp={() => window.setTimeout(refreshTrigger, 0)}
+              onMouseUp={refreshTrigger}
+              onPaste={handlePaste}
+              ref={editorRef}
+              role="textbox"
+              suppressContentEditableWarning
+            />
+            <ComposerPrimitive.Input className="sr-only" tabIndex={-1} unstable_focusOnScrollToBottom={false} />
+            <button
+              aria-label="Send edited message"
+              className={cn('absolute right-2 bottom-2 size-5', USER_ACTION_ICON_BUTTON_CLASS)}
+              disabled={!canSubmit || submitting}
+              onClick={() => {
+                const editor = editorRef.current
+
+                if (editor) {
+                  submitEdit(editor)
+                }
+              }}
+              title="Send edited message"
+              type="button"
+            >
+              {submitting ? StopGlyph : <Codicon name="arrow-up" size={USER_ACTION_ICON_SIZE} />}
+            </button>
+          </div>
+        </div>
+      </StickyHumanMessageContainer>
+    </ComposerPrimitive.Root>
+  )
+}
diff --git a/apps/desktop/src/components/assistant-ui/todo-tool.tsx b/apps/desktop/src/components/assistant-ui/todo-tool.tsx
index e974b6ba51f..549c8c3bd9d 100644
--- a/apps/desktop/src/components/assistant-ui/todo-tool.tsx
+++ b/apps/desktop/src/components/assistant-ui/todo-tool.tsx
@@ -16,11 +16,13 @@ export function todosFromMessageContent(content: unknown): TodoItem[] {
     if (!part || typeof part !== 'object') {
       continue
     }
+
     const row = part as Record<string, unknown>
 
     if (row.type !== 'tool-call' || row.toolName !== 'todo') {
       continue
     }
+
     const parsed = parseTodos(row.result) ?? parseTodos(row.args)
 
     if (parsed !== null) {
@@ -70,6 +72,7 @@ export const HoistedTodoPanel: FC<{ todos: TodoItem[] }> = ({ todos }) => {
   if (!todos.length) {
     return null
   }
+
   const label = headerLabel(todos)
 
   return (
diff --git a/apps/desktop/src/components/assistant-ui/tool-fallback-model.ts b/apps/desktop/src/components/assistant-ui/tool-fallback-model.ts
index df0e38103b3..9ca808d2096 100644
--- a/apps/desktop/src/components/assistant-ui/tool-fallback-model.ts
+++ b/apps/desktop/src/components/assistant-ui/tool-fallback-model.ts
@@ -1,6 +1,4 @@
 import { normalizeExternalUrl } from '@/lib/external-link'
-import { Command, FileText, Globe, LinkIcon, Search, Sparkles, Wrench } from '@/lib/icons'
-import type { LucideIcon } from '@/lib/icons'
 import { extractToolErrorMessage, formatToolResultSummary } from '@/lib/tool-result-summary'
 
 export type ToolTone = 'agent' | 'browser' | 'default' | 'file' | 'image' | 'terminal' | 'web'
@@ -31,7 +29,7 @@ export interface ToolView {
   detail: string
   detailLabel: string
   durationLabel?: string
-  icon: LucideIcon
+  icon?: string
   imageUrl?: string
   inlineDiff: string
   previewTarget?: string
@@ -46,7 +44,7 @@ export interface ToolView {
 
 interface ToolMeta {
   done: string
-  icon: LucideIcon
+  icon?: string
   pending: string
   tone: ToolTone
 }
@@ -63,39 +61,39 @@ export interface MessageRunningStateSlice {
 }
 
 const TOOL_META: Record<string, ToolMeta> = {
-  browser_click: { done: 'Clicked page element', pending: 'Clicking page element', icon: Globe, tone: 'browser' },
-  browser_fill: { done: 'Filled form field', pending: 'Filling form field', icon: Globe, tone: 'browser' },
-  browser_navigate: { done: 'Opened page', pending: 'Opening page', icon: Globe, tone: 'browser' },
+  browser_click: { done: 'Clicked page element', pending: 'Clicking page element', icon: 'globe', tone: 'browser' },
+  browser_fill: { done: 'Filled form field', pending: 'Filling form field', icon: 'globe', tone: 'browser' },
+  browser_navigate: { done: 'Opened page', pending: 'Opening page', icon: 'globe', tone: 'browser' },
   browser_snapshot: {
     done: 'Captured page snapshot',
     pending: 'Capturing page snapshot',
-    icon: Globe,
+    icon: 'globe',
     tone: 'browser'
   },
   browser_take_screenshot: {
     done: 'Captured screenshot',
     pending: 'Capturing screenshot',
-    icon: Sparkles,
+    icon: 'file-media',
     tone: 'browser'
   },
-  browser_type: { done: 'Typed on page', pending: 'Typing on page', icon: Globe, tone: 'browser' },
-  edit_file: { done: 'Edited file', pending: 'Editing file', icon: FileText, tone: 'file' },
-  execute_code: { done: 'Ran code', pending: 'Running code', icon: Command, tone: 'terminal' },
-  image_generate: { done: 'Generated image', pending: 'Generating image', icon: Sparkles, tone: 'image' },
-  list_files: { done: 'Listed files', pending: 'Listing files', icon: FileText, tone: 'file' },
-  read_file: { done: 'Read file', pending: 'Reading file', icon: FileText, tone: 'file' },
-  search_files: { done: 'Searched files', pending: 'Searching files', icon: FileText, tone: 'file' },
+  browser_type: { done: 'Typed on page', pending: 'Typing on page', icon: 'globe', tone: 'browser' },
+  edit_file: { done: 'Edited file', pending: 'Editing file', icon: 'edit', tone: 'file' },
+  execute_code: { done: 'Ran code', pending: 'Running code', icon: 'terminal', tone: 'terminal' },
+  image_generate: { done: 'Generated image', pending: 'Generating image', icon: 'file-media', tone: 'image' },
+  list_files: { done: 'Listed files', pending: 'Listing files', icon: 'files', tone: 'file' },
+  read_file: { done: 'Read file', pending: 'Reading file', icon: 'file', tone: 'file' },
+  search_files: { done: 'Searched files', pending: 'Searching files', icon: 'search', tone: 'file' },
   session_search_recall: {
     done: 'Searched session history',
     pending: 'Searching session history',
-    icon: Search,
+    icon: 'search',
     tone: 'agent'
   },
-  terminal: { done: 'Ran command', pending: 'Running command', icon: Command, tone: 'terminal' },
-  todo: { done: 'Updated todos', pending: 'Updating todos', icon: Wrench, tone: 'agent' },
-  web_extract: { done: 'Read webpage', pending: 'Reading webpage', icon: LinkIcon, tone: 'web' },
-  web_search: { done: 'Searched web', pending: 'Searching web', icon: Search, tone: 'web' },
-  write_file: { done: 'Edited file', pending: 'Editing file', icon: FileText, tone: 'file' }
+  terminal: { done: 'Ran command', pending: 'Running command', icon: 'terminal', tone: 'terminal' },
+  todo: { done: 'Updated todos', pending: 'Updating todos', icon: 'tools', tone: 'agent' },
+  web_extract: { done: 'Read webpage', pending: 'Reading webpage', icon: 'globe', tone: 'web' },
+  web_search: { done: 'Searched web', pending: 'Searching web', icon: 'search', tone: 'web' },
+  write_file: { done: 'Edited file', pending: 'Editing file', icon: 'edit', tone: 'file' }
 }
 
 const INLINE_CODE_SPLIT_RE = /(`[^`\n]+`)/g
@@ -117,9 +115,9 @@ function titleForTool(name: string): string {
   )
 }
 
-const PREFIX_META: { icon: LucideIcon; prefix: string; tone: ToolTone; verb: string }[] = [
-  { prefix: 'browser_', verb: 'Browser', icon: Globe, tone: 'browser' },
-  { prefix: 'web_', verb: 'Web', icon: Search, tone: 'web' }
+const PREFIX_META: { icon?: string; prefix: string; tone: ToolTone; verb: string }[] = [
+  { prefix: 'browser_', verb: 'Browser', icon: 'globe', tone: 'browser' },
+  { prefix: 'web_', verb: 'Web', icon: 'globe', tone: 'web' }
 ]
 
 function toolMeta(name: string): ToolMeta {
@@ -137,7 +135,7 @@ function toolMeta(name: string): ToolMeta {
         icon: prefix.icon,
         tone: prefix.tone
       }
-    : { done: action, pending: `Running ${action.toLowerCase()}`, icon: Wrench, tone: 'default' }
+    : { done: action, pending: `Running ${action.toLowerCase()}`, tone: 'default' }
 }
 
 function isRecord(value: unknown): value is Record<string, unknown> {
@@ -836,9 +834,17 @@ export function inlineDiffFromResult(result: unknown): string {
 // Falls back to a string only when there's something concrete to render —
 // counts of opaque items/fields are noise, not signal.
 function minimalValueSummary(value: unknown): string {
-  if (value == null) return ''
-  if (typeof value === 'string') return value
-  if (typeof value === 'number' || typeof value === 'boolean') return String(value)
+  if (value == null) {
+    return ''
+  }
+
+  if (typeof value === 'string') {
+    return value
+  }
+
+  if (typeof value === 'number' || typeof value === 'boolean') {
+    return String(value)
+  }
 
   return ''
 }
@@ -1195,6 +1201,7 @@ export function buildToolView(part: ToolPart, inlineDiff: string): ToolView {
 
   const searchHits =
     part.toolName === 'web_search' && status !== 'error' ? extractSearchResults(part.result) : undefined
+
   const resultCount = status === 'error' ? null : toolResultCount(part, argsRecord, resultRecord)
 
   return {
diff --git a/apps/desktop/src/components/assistant-ui/tool-fallback.tsx b/apps/desktop/src/components/assistant-ui/tool-fallback.tsx
index 09fc3279dc1..5e2f75ae167 100644
--- a/apps/desktop/src/components/assistant-ui/tool-fallback.tsx
+++ b/apps/desktop/src/components/assistant-ui/tool-fallback.tsx
@@ -8,10 +8,12 @@ import { useShallow } from 'zustand/shallow'
 import { useElapsedSeconds } from '@/components/chat/activity-timer'
 import { ActivityTimerText } from '@/components/chat/activity-timer-text'
 import { CompactMarkdown } from '@/components/chat/compact-markdown'
+import { DiffLines } from '@/components/chat/diff-lines'
 import { DisclosureRow } from '@/components/chat/disclosure-row'
 import { PreviewAttachment } from '@/components/chat/preview-attachment'
 import { ZoomableImage } from '@/components/chat/zoomable-image'
 import { BrailleSpinner } from '@/components/ui/braille-spinner'
+import { Codicon } from '@/components/ui/codicon'
 import { CopyButton } from '@/components/ui/copy-button'
 import { FadeText } from '@/components/ui/fade-text'
 import { PrettyLink, LinkifiedText as SharedLinkifiedText, urlSlugTitleLabel } from '@/lib/external-link'
@@ -25,11 +27,9 @@ import {
   groupCopyText as buildGroupCopyText,
   buildToolView,
   cleanVisibleText,
-  compactPreview,
   groupFailedStepCount,
   groupPreviewTargets,
   groupStatus,
-  groupTailSubtitle,
   groupTitle,
   groupTotalDurationLabel,
   inlineDiffFromResult,
@@ -54,27 +54,48 @@ const SPECIAL_TOOL_NAMES = new Set(['todo', 'image_generate', 'clarify'])
 // the group already shows.
 const ToolEmbedContext = createContext(false)
 
-const STATUS_DOT_CLASS: Record<ToolStatus, string> = {
-  error: 'bg-destructive',
-  running: 'bg-muted-foreground/55 animate-pulse',
-  success: 'bg-emerald-500',
-  warning: 'bg-amber-500'
-}
+// Shared header chrome for tool rows. Both the single-tool DisclosureRow
+// and the multi-tool group header pass through these constants so a
+// "Patch" row and a "Tool actions · 2 steps" row are visually identical.
+const TOOL_HEADER_TITLE_CLASS =
+  'text-[length:var(--conversation-tool-font-size)] font-medium leading-(--conversation-line-height) text-(--ui-text-secondary)'
 
-const STATUS_LABEL: Record<ToolStatus, string> = {
-  error: 'Error',
-  running: 'Running',
-  success: 'Done',
-  warning: 'Recovered'
-}
+const TOOL_HEADER_DURATION_CLASS = 'shrink-0 text-[0.625rem] tabular-nums text-(--ui-text-tertiary)'
 
-function statusDot(status: ToolStatus): ReactNode {
-  return (
-    <span
-      aria-label={STATUS_LABEL[status]}
-      className={cn('size-1.5 shrink-0 rounded-full', STATUS_DOT_CLASS[status])}
-    />
-  )
+const TOOL_HEADER_SUBTITLE_CLASS =
+  'text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)'
+
+const TOOL_HEADER_GLYPH_WRAP_CLASS = 'grid size-3.5 shrink-0 place-items-center self-center'
+
+// Glass-style section label that sits above any pre/JSON/output block.
+// Lowercase tracking + tiny size so it reads as a quiet field label rather
+// than a chrome heading. Used for "COMMAND OUTPUT", "INPUT", "OUTPUT", etc.
+const TOOL_SECTION_LABEL_CLASS = 'mb-1 text-[0.65rem] font-medium uppercase tracking-[0.08em] text-(--ui-text-tertiary)'
+
+// Inset scroll surface for any detail body. The expanded tool row owns the
+// border; the payload itself is just clipped raw text.
+const TOOL_SECTION_SURFACE_CLASS =
+  'max-h-20 max-w-full overflow-auto bg-transparent px-2 py-1.5 text-(--ui-text-secondary)'
+
+const TOOL_SECTION_PRE_CLASS = cn(TOOL_SECTION_SURFACE_CLASS, 'font-mono text-[0.7rem] leading-relaxed')
+
+function rawTechnicalTrace(args: unknown, result: unknown): string {
+  const parts = [args, result]
+    .filter(value => value !== undefined && value !== null)
+    .map(value => {
+      if (typeof value === 'string') {
+        return value
+      }
+
+      try {
+        return JSON.stringify(value)
+      } catch {
+        return String(value)
+      }
+    })
+    .filter(Boolean)
+
+  return parts.join('\n')
 }
 
 function statusGlyph(status: ToolStatus): ReactNode {
@@ -82,7 +103,7 @@ function statusGlyph(status: ToolStatus): ReactNode {
     return (
       <BrailleSpinner
         ariaLabel="Running"
-        className="size-3.5 shrink-0 text-[0.95rem] text-muted-foreground/80"
+        className="size-3.5 shrink-0 text-[0.95rem] text-(--ui-text-tertiary)"
         spinner="breathe"
       />
     )
@@ -99,6 +120,29 @@ function statusGlyph(status: ToolStatus): ReactNode {
   return <CheckCircle2 aria-label="Done" className="size-3.5 shrink-0 text-emerald-600/85 dark:text-emerald-400/85" />
 }
 
+// Leading glyph for any tool-row header. Status (running/error/warning)
+// takes precedence; otherwise falls back to the tool's codicon. Returns
+// null when neither applies so callers can render unconditionally.
+function ToolGlyph({ icon, status }: { icon?: string; status?: ToolStatus }) {
+  const node = status ? (
+    statusGlyph(status)
+  ) : icon ? (
+    <Codicon className="text-(--ui-text-tertiary)" name={icon} size="0.875rem" />
+  ) : null
+
+  return node ? <span className={TOOL_HEADER_GLYPH_WRAP_CLASS}>{node}</span> : null
+}
+
+// Which status (if any) should pre-empt the tool's icon in the leading
+// slot. Success is silent — the row reads as "done" without a checkmark.
+function leadingStatus(isPending: boolean, status: ToolStatus): ToolStatus | undefined {
+  if (isPending) {
+    return 'running'
+  }
+
+  return status === 'success' ? undefined : status
+}
+
 function SearchResultsList({ hits }: { hits: SearchResultRow[] }) {
   return (
     <ol className="m-0 grid list-none gap-2.5 p-0">
@@ -110,17 +154,15 @@ function SearchResultsList({ hits }: { hits: SearchResultRow[] }) {
           <li className="grid min-w-0 gap-0.5" key={key}>
             {hit.url ? (
               <PrettyLink
-                className="block max-w-full text-[0.78rem] leading-snug"
+                className={cn(TOOL_HEADER_TITLE_CLASS, 'block max-w-full')}
                 fallbackLabel={trimmedTitle || urlSlugTitleLabel(hit.url)}
                 href={hit.url}
                 label={trimmedTitle || undefined}
               />
             ) : (
-              <span className="text-[0.78rem] font-medium leading-snug text-foreground/85">{trimmedTitle}</span>
-            )}
-            {hit.snippet && (
-              <p className="m-0 line-clamp-3 text-[0.7rem] leading-snug text-muted-foreground/85">{hit.snippet}</p>
+              <span className={TOOL_HEADER_TITLE_CLASS}>{trimmedTitle}</span>
             )}
+            {hit.snippet && <p className={cn(TOOL_HEADER_SUBTITLE_CLASS, 'm-0 line-clamp-3')}>{hit.snippet}</p>}
           </li>
         )
       })}
@@ -156,7 +198,6 @@ function ToolEntry({ part }: ToolEntryProps) {
   // handles its own enter animation, so embedded children skip it.
   const enterRef = useEnterAnimation(messageRunning && !embedded, `tool-entry:${disclosureId}`)
   const elapsed = useElapsedSeconds(isPending, `tool:${disclosureId}`)
-  const preview = compactPreview(part.args) || compactPreview(part.result)
   const liveDiffs = useStore($toolInlineDiffs)
   const sideDiff = part.toolCallId ? liveDiffs[part.toolCallId] || '' : ''
   const inlineDiff = stripInlineDiffChrome(sideDiff) || inlineDiffFromResult(part.result)
@@ -224,97 +265,67 @@ function ToolEntry({ part }: ToolEntryProps) {
     toolViewMode === 'technical'
   )
 
-  const isTerminalLike = part.toolName === 'terminal' || part.toolName === 'execute_code'
-  const subtitleText = view.subtitle ? (toolViewMode === 'technical' ? preview || view.subtitle : view.subtitle) : ''
-  const subtitleIsSingleLine = !subtitleText.includes('\n')
-  const showStatusGlyph = isPending || view.status === 'error' || view.status === 'warning'
   const copyAction = useMemo(() => toolCopyPayload(part, view), [part, view])
 
   const trailing =
     isPending && !embedded ? (
-      <ActivityTimerText className="text-[0.625rem] tabular-nums text-muted-foreground/55" seconds={elapsed} />
+      <ActivityTimerText className={TOOL_HEADER_DURATION_CLASS} seconds={elapsed} />
     ) : !isPending && copyAction.text ? (
       <CopyButton appearance="tool-row" label={copyAction.label} stopPropagation text={copyAction.text} />
     ) : undefined
 
   return (
     <div
-      className="min-w-0 max-w-full overflow-hidden text-sm text-muted-foreground"
+      className={cn(
+        'min-w-0 max-w-full overflow-hidden text-[length:var(--conversation-tool-font-size)] text-(--ui-text-tertiary)',
+        open && 'rounded-[0.625rem] border border-(--ui-stroke-tertiary)'
+      )}
       data-slot="tool-block"
       ref={enterRef}
     >
-      <DisclosureRow
-        onToggle={hasExpandableContent ? () => setToolDisclosureOpen(disclosureId, !open) : undefined}
-        open={open}
-        trailing={trailing}
-      >
-        <span className="flex min-w-0 items-baseline gap-1.5">
-          {showStatusGlyph && (
-            <span className="flex h-[1.1rem] shrink-0 items-center">
-              {statusGlyph(isPending ? 'running' : view.status)}
-            </span>
-          )}
-          <FadeText
-            className={cn(
-              'text-[0.78rem] font-medium leading-[1.1rem] text-foreground/85',
-              isPending && 'shimmer text-foreground/55',
-              view.status === 'error' && 'text-destructive',
-              view.status === 'warning' && 'text-amber-700 dark:text-amber-300'
-            )}
-          >
-            {view.title}
-          </FadeText>
-          {!isPending && view.countLabel && (
-            <span className="shrink-0 text-[0.68rem] tabular-nums text-foreground/70">{view.countLabel}</span>
-          )}
-          {!isPending && view.durationLabel && (
-            <span className="shrink-0 text-[0.625rem] tabular-nums text-midground/60 tracking-[0.04em]">
-              {view.durationLabel}
-            </span>
-          )}
-        </span>
-        {subtitleText &&
-          (subtitleIsSingleLine ? (
+      <div className={cn(open && 'border-b border-(--ui-stroke-tertiary) px-2 py-1.5')}>
+        <DisclosureRow
+          onToggle={hasExpandableContent ? () => setToolDisclosureOpen(disclosureId, !open) : undefined}
+          open={open}
+          trailing={trailing}
+        >
+          <span className="flex min-w-0 items-center gap-1.5">
+            <ToolGlyph icon={view.icon} status={leadingStatus(isPending, view.status)} />
             <FadeText
               className={cn(
-                'text-[0.7rem] leading-[1.05rem] text-muted-foreground/70',
-                isTerminalLike && 'font-mono text-[0.68rem]'
+                TOOL_HEADER_TITLE_CLASS,
+                isPending && 'shimmer text-(--ui-text-tertiary)',
+                view.status === 'error' && 'text-destructive',
+                view.status === 'warning' && 'text-amber-700 dark:text-amber-300'
               )}
             >
-              {subtitleText}
+              {view.title}
             </FadeText>
-          ) : (
-            <span
-              className={cn(
-                'line-clamp-2 block whitespace-pre-wrap text-[0.7rem] leading-[1.05rem] text-muted-foreground/70',
-                isTerminalLike && 'font-mono text-[0.68rem]'
-              )}
-            >
-              {subtitleText}
-            </span>
-          ))}
-      </DisclosureRow>
+            {!isPending && view.countLabel && <span className={TOOL_HEADER_DURATION_CLASS}>{view.countLabel}</span>}
+            {!isPending && view.durationLabel && (
+              <span className={TOOL_HEADER_DURATION_CLASS}>{view.durationLabel}</span>
+            )}
+          </span>
+        </DisclosureRow>
+      </div>
       {open && (
-        <div className={cn('mt-2 grid w-full min-w-0 max-w-full gap-2 overflow-hidden pb-2 pr-2 pl-3')}>
+        <div className="grid w-full min-w-0 max-w-full gap-1.5 overflow-hidden p-1.5">
           {!embedded && view.previewTarget && isPreviewableTarget(view.previewTarget) && (
             <PreviewAttachment source="tool-result" target={view.previewTarget} />
           )}
           {view.imageUrl && (
-            <div className="max-w-72 overflow-hidden rounded-lg border border-border/70">
+            <div className="max-w-72 overflow-hidden rounded-[0.25rem] border border-(--ui-stroke-tertiary)">
               <ZoomableImage alt="Tool output" className="h-auto w-full object-cover" src={view.imageUrl} />
             </div>
           )}
           {hasSearchHits && view.searchHits && (
-            <div className="max-w-full text-xs leading-relaxed text-muted-foreground/90">
-              {searchResultsLabel && (
-                <p className="mb-1 text-[0.66rem] font-medium uppercase tracking-[0.06em] text-muted-foreground/65">
-                  {searchResultsLabel}
-                </p>
-              )}
+            <div className="max-w-full text-xs leading-relaxed text-(--ui-text-secondary)">
+              {searchResultsLabel && <p className={TOOL_SECTION_LABEL_CLASS}>{searchResultsLabel}</p>}
               <SearchResultsList hits={view.searchHits} />
             </div>
           )}
           {showDetail &&
+            toolViewMode !== 'technical' &&
             (view.status === 'error' ? (
               detailSections.summary || detailSections.body ? (
                 <div className="max-w-full text-xs leading-relaxed text-destructive">
@@ -334,53 +345,31 @@ function ToolEntry({ part }: ToolEntryProps) {
                 </div>
               ) : null
             ) : (
-              <div className="max-w-full text-xs leading-relaxed text-muted-foreground/90">
-                {view.detailLabel && (
-                  <p className="mb-1 text-[0.66rem] font-medium uppercase tracking-[0.06em] text-muted-foreground/65">
-                    {view.detailLabel}
-                  </p>
-                )}
+              <div className="max-w-full text-xs leading-relaxed text-(--ui-text-secondary)">
+                {view.detailLabel && <p className={TOOL_SECTION_LABEL_CLASS}>{view.detailLabel}</p>}
                 {renderDetailAsCode ? (
-                  <pre className="max-h-56 max-w-full overflow-auto whitespace-pre-wrap wrap-anywhere border-l-2 border-border/50 pl-3 font-mono text-[0.7rem] leading-[1.55] text-foreground/85">
-                    {view.detail}
-                  </pre>
+                  <pre className={cn(TOOL_SECTION_PRE_CLASS, 'whitespace-pre-wrap wrap-anywhere')}>{view.detail}</pre>
                 ) : (
-                  <CompactMarkdown text={view.detail} />
+                  <CompactMarkdown className={cn(TOOL_SECTION_SURFACE_CLASS, 'wrap-anywhere')} text={view.detail} />
                 )}
               </div>
             ))}
           {showRawSearchDrilldown && (
-            <details className="max-w-full rounded-md border border-border/60 bg-background/55 px-2 py-1.5">
-              <summary className="cursor-pointer text-[0.65rem] font-medium uppercase tracking-[0.06em] text-muted-foreground/70">
-                Raw response
-              </summary>
-              <pre className="mt-2 max-h-56 max-w-full overflow-auto whitespace-pre-wrap wrap-anywhere font-mono text-[0.66rem] leading-normal text-muted-foreground/90">
+            <details className="max-w-full">
+              <summary className={cn(TOOL_SECTION_LABEL_CLASS, 'cursor-pointer mb-0')}>Raw response</summary>
+              <pre className={cn(TOOL_SECTION_PRE_CLASS, 'mt-1 whitespace-pre-wrap wrap-anywhere')}>
                 {view.rawResult}
               </pre>
             </details>
           )}
           {toolViewMode === 'technical' && (
-            <div className="grid gap-2">
-              <JsonSection label="Input" value={view.rawArgs} />
-              {part.result !== undefined && <JsonSection label="Output" value={view.rawResult} />}
-            </div>
+            <pre className={cn(TOOL_SECTION_PRE_CLASS, 'whitespace-pre-wrap wrap-anywhere')}>
+              {rawTechnicalTrace(part.args, part.result)}
+            </pre>
           )}
         </div>
       )}
-      {view.inlineDiff && <InlineDiff text={view.inlineDiff} />}
-    </div>
-  )
-}
-
-function JsonSection({ label, value }: { label: string; value: string }) {
-  return (
-    <div>
-      <div className="mb-1 text-[0.65rem] font-medium tracking-[0.08em] text-muted-foreground/75 uppercase">
-        {label}
-      </div>
-      <pre className="max-h-56 max-w-full overflow-auto rounded-md border border-border/70 bg-background/65 p-2 font-mono text-[0.65rem] leading-relaxed text-muted-foreground/90">
-        {value}
-      </pre>
+      {view.inlineDiff && <DiffLines text={view.inlineDiff} />}
     </div>
   )
 }
@@ -422,6 +411,7 @@ export const ToolGroupSlot: FC<PropsWithChildren<{ endIndex: number; startIndex:
         if (!p || typeof p !== 'object') {
           return false
         }
+
         const row = p as { toolName?: unknown; type?: unknown }
 
         return row.type === 'tool-call' && typeof row.toolName === 'string' && !SPECIAL_TOOL_NAMES.has(row.toolName)
@@ -454,10 +444,8 @@ export const ToolGroupSlot: FC<PropsWithChildren<{ endIndex: number; startIndex:
           ? '1 step failed'
           : `${failedStepCount} steps failed`
 
-  const tailSummary = useMemo(() => groupTailSubtitle(visibleParts), [visibleParts])
   const groupCopyText = useMemo(() => buildGroupCopyText(visibleParts), [visibleParts])
   const previewTargets = useMemo(() => groupPreviewTargets(visibleParts), [visibleParts])
-  const showGroupStatusGlyph = displayStatus !== 'success'
 
   return (
     <ToolEmbedContext.Provider value={isGroup}>
@@ -473,34 +461,23 @@ export const ToolGroupSlot: FC<PropsWithChildren<{ endIndex: number; startIndex:
               ) : undefined
             }
           >
-            <span className="flex min-w-0 items-baseline gap-1.5">
-              {showGroupStatusGlyph && (
-                <span className="flex h-[1.1rem] shrink-0 items-center">{statusGlyph(displayStatus)}</span>
-              )}
+            <span className="flex min-w-0 items-center gap-1.5">
+              <ToolGlyph status={displayStatus === 'success' ? undefined : displayStatus} />
               <FadeText
                 className={cn(
-                  'text-[0.78rem] font-medium leading-[1.1rem] text-foreground/85',
+                  TOOL_HEADER_TITLE_CLASS,
                   displayStatus === 'error' && 'text-destructive',
                   displayStatus === 'warning' && 'text-amber-700 dark:text-amber-300'
                 )}
               >
                 {groupTitle(visibleParts)}
               </FadeText>
-              {totalDurationLabel && (
-                <span className="shrink-0 text-[0.625rem] tabular-nums text-muted-foreground/55">
-                  {totalDurationLabel}
-                </span>
-              )}
+              {totalDurationLabel && <span className={TOOL_HEADER_DURATION_CLASS}>{totalDurationLabel}</span>}
             </span>
-            {tailSummary && (
-              <FadeText className="text-[0.7rem] leading-[1.05rem] text-muted-foreground/70">
-                {tailSummary.replace(/\n+/g, ' · ')}
-              </FadeText>
-            )}
             {statusSummary && (
               <FadeText
                 className={cn(
-                  'text-[0.68rem] leading-[1.05rem]',
+                  TOOL_HEADER_SUBTITLE_CLASS,
                   displayStatus === 'warning' ? 'text-amber-700/80 dark:text-amber-300/85' : 'text-destructive/85'
                 )}
               >
@@ -538,31 +515,3 @@ export const ToolFallback = ({ toolCallId, toolName, args, isError, result }: To
 
   return <ToolEntry part={part} />
 }
-
-function InlineDiff({ text }: { text: string }) {
-  return (
-    <pre className="mt-2 max-h-96 max-w-full min-w-0 overflow-auto rounded-lg border border-border/60 bg-background/70 px-3 py-2 font-mono text-[0.6875rem] leading-relaxed">
-      {text.split('\n').map((line, index) => {
-        const added = line.startsWith('+') && !line.startsWith('+++')
-        const removed = line.startsWith('-') && !line.startsWith('---')
-        const hunk = line.startsWith('@@')
-        const fileHeader = line.startsWith('---') || line.startsWith('+++') || / → /.test(line.slice(0, 60))
-
-        return (
-          <span
-            className={cn(
-              'block min-w-max whitespace-pre',
-              added && 'text-emerald-700 dark:text-emerald-300',
-              removed && 'text-rose-700 dark:text-rose-300',
-              hunk && 'text-sky-700 dark:text-sky-300',
-              !added && !removed && !hunk && fileHeader && 'text-muted-foreground/80'
-            )}
-            key={`${index}-${line}`}
-          >
-            {line || ' '}
-          </span>
-        )
-      })}
-    </pre>
-  )
-}
diff --git a/apps/desktop/src/components/chat/activity-timer.ts b/apps/desktop/src/components/chat/activity-timer.ts
index 29095c32db6..533dc5b373c 100644
--- a/apps/desktop/src/components/chat/activity-timer.ts
+++ b/apps/desktop/src/components/chat/activity-timer.ts
@@ -9,11 +9,13 @@ function startedAt(key?: string): number {
   if (!key) {
     return Date.now()
   }
+
   const existing = startedAtByKey.get(key)
 
   if (existing !== undefined) {
     return existing
   }
+
   const now = Date.now()
   startedAtByKey.set(key, now)
 
diff --git a/apps/desktop/src/components/chat/code-card.tsx b/apps/desktop/src/components/chat/code-card.tsx
new file mode 100644
index 00000000000..46997caa4d7
--- /dev/null
+++ b/apps/desktop/src/components/chat/code-card.tsx
@@ -0,0 +1,78 @@
+import * as React from 'react'
+
+import { Codicon, type CodiconProps } from '@/components/ui/codicon'
+import { cn } from '@/lib/utils'
+
+/**
+ * Rounded-card shell for fenced code (and any equivalent: diffs, raw payloads,
+ * etc.) sized for the conversation column. Mirrors the expanded tool-row
+ * pattern so code blocks read as the same family of artifact.
+ */
+function CodeCard({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      className={cn(
+        'min-w-0 max-w-full overflow-hidden rounded-[0.625rem] border border-border text-[length:var(--conversation-tool-font-size)] text-muted-foreground',
+        className
+      )}
+      data-slot="code-card"
+      {...props}
+    />
+  )
+}
+
+function CodeCardHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      className={cn('flex items-center justify-between gap-2 border-b border-border px-2 py-1.5', className)}
+      data-slot="code-card-header"
+      {...props}
+    />
+  )
+}
+
+function CodeCardTitle({ className, children, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      className={cn(
+        'flex min-w-0 items-center gap-1.5 truncate text-[length:var(--conversation-tool-font-size)] font-medium leading-(--conversation-line-height) text-foreground/80',
+        className
+      )}
+      data-slot="code-card-title"
+      {...props}
+    >
+      {children}
+    </span>
+  )
+}
+
+function CodeCardIcon({ className, ...props }: CodiconProps) {
+  return (
+    <Codicon
+      className={cn('shrink-0 text-[0.875rem] leading-none text-muted-foreground', className)}
+      data-slot="code-card-icon"
+      {...props}
+    />
+  )
+}
+
+function CodeCardSubtitle({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span className={cn('font-normal text-muted-foreground', className)} data-slot="code-card-subtitle" {...props} />
+  )
+}
+
+function CodeCardBody({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      className={cn(
+        'p-1.5 font-mono text-[0.7rem] leading-relaxed text-foreground/90 [&_pre]:m-0 [&_pre]:overflow-x-auto [&_pre]:bg-transparent! [&_pre]:px-2 [&_pre]:py-1.5 [&_pre]:font-mono [&_pre]:leading-relaxed',
+        className
+      )}
+      data-slot="code-card-body"
+      {...props}
+    />
+  )
+}
+
+export { CodeCard, CodeCardBody, CodeCardHeader, CodeCardIcon, CodeCardSubtitle, CodeCardTitle }
diff --git a/apps/desktop/src/components/chat/compact-markdown.tsx b/apps/desktop/src/components/chat/compact-markdown.tsx
index 7bc88c86019..79e96e8fa65 100644
--- a/apps/desktop/src/components/chat/compact-markdown.tsx
+++ b/apps/desktop/src/components/chat/compact-markdown.tsx
@@ -41,14 +41,18 @@ function tagged<T extends keyof typeof TAG_CLASSES>(Tag: T) {
 function MarkdownAnchor({ children, className, href, ...rest }: ComponentProps<'a'>) {
   if (!href || !/^https?:\/\//i.test(href)) {
     return (
-      <a className={cn('font-medium underline underline-offset-4 decoration-current', className)} href={href} {...rest}>
+      <a
+        className={cn('font-medium underline underline-offset-4 decoration-current/20', className)}
+        href={href}
+        {...rest}
+      >
         {children}
       </a>
     )
   }
 
   return (
-    <ExternalLink className={cn('decoration-current', className)} href={href} showExternalIcon={false}>
+    <ExternalLink className={cn('decoration-current/20', className)} href={href} showExternalIcon={false}>
       {children}
       <ExternalLinkIcon />
     </ExternalLink>
diff --git a/apps/desktop/src/components/chat/diff-lines.tsx b/apps/desktop/src/components/chat/diff-lines.tsx
new file mode 100644
index 00000000000..926b77edf92
--- /dev/null
+++ b/apps/desktop/src/components/chat/diff-lines.tsx
@@ -0,0 +1,54 @@
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+/**
+ * Per-line classed renderer for unified diffs. Lives outside `CodeCard` so
+ * tool-result panels (already nested inside a tool card) don't double-shell;
+ * for markdown ` ```diff ` fences the standard `CodeCard` + Shiki path runs
+ * instead and gives equivalent coloring.
+ */
+interface DiffLineKind {
+  className?: string
+  match: (line: string) => boolean
+}
+
+const DIFF_LINE_KINDS: DiffLineKind[] = [
+  {
+    className: 'text-emerald-700 dark:text-emerald-300',
+    match: line => line.startsWith('+') && !line.startsWith('+++')
+  },
+  { className: 'text-rose-700 dark:text-rose-300', match: line => line.startsWith('-') && !line.startsWith('---') },
+  { className: 'text-sky-700 dark:text-sky-300', match: line => line.startsWith('@@') },
+  {
+    className: 'text-muted-foreground/70',
+    match: line => line.startsWith('---') || line.startsWith('+++') || / → /.test(line.slice(0, 60))
+  }
+]
+
+function classifyLine(line: string): string | undefined {
+  return DIFF_LINE_KINDS.find(kind => kind.match(line))?.className
+}
+
+interface DiffLinesProps extends Omit<React.ComponentProps<'pre'>, 'children'> {
+  text: string
+}
+
+export function DiffLines({ className, text, ...props }: DiffLinesProps) {
+  return (
+    <pre
+      className={cn(
+        'mt-2 max-h-96 max-w-full min-w-0 overflow-auto rounded-md border border-border/60 bg-muted/35 px-2.5 py-1.5 font-mono text-[0.7rem] leading-relaxed text-muted-foreground',
+        className
+      )}
+      data-slot="diff-lines"
+      {...props}
+    >
+      {text.split('\n').map((line, index) => (
+        <span className={cn('block min-w-max whitespace-pre', classifyLine(line))} key={`${index}-${line}`}>
+          {line || ' '}
+        </span>
+      ))}
+    </pre>
+  )
+}
diff --git a/apps/desktop/src/components/chat/disclosure-row.tsx b/apps/desktop/src/components/chat/disclosure-row.tsx
index 911be03f953..b528e10c601 100644
--- a/apps/desktop/src/components/chat/disclosure-row.tsx
+++ b/apps/desktop/src/components/chat/disclosure-row.tsx
@@ -1,13 +1,13 @@
-import { ChevronRight } from 'lucide-react'
 import type { ReactNode } from 'react'
 
+import { DisclosureCaret } from '@/components/ui/disclosure-caret'
 import { cn } from '@/lib/utils'
 
 // Shared header row for any collapsible block (thinking, tool group, single
 // tool). Each parent supplies its own outer wrapper (with the data-slot CSS
 // uses to escape the message padding) and its own expanded body.
 //
-// Cursor-style affordance:
+// Affordance:
 //   - No leading chevron; a caret appears to the RIGHT of the text on hover
 //     (and stays visible when the row is open).
 //   - The hover background is a tight content-shaped pill — sized to the
@@ -26,13 +26,13 @@ export function DisclosureRow({
   trailing?: ReactNode
 }) {
   return (
-    <div className="group/disclosure-row relative flex w-full max-w-full min-w-0 text-muted-foreground">
+    <div className="group/disclosure-row relative flex w-full max-w-full min-w-0 text-(--ui-text-tertiary)">
       <button
         aria-expanded={onToggle ? open : undefined}
         className={cn(
           // max-w-fit so the click target hugs the title text width — no
           // background fill, just the cursor + the affordance caret.
-          'flex min-w-0 max-w-fit items-start gap-2 text-left transition-colors',
+          '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'
             : 'cursor-default'
@@ -41,31 +41,25 @@ export function DisclosureRow({
         onClick={onToggle}
         type="button"
       >
-        <span className="flex min-w-0 flex-col">{children}</span>
+        <span className="flex min-w-0 flex-col gap-0.5">{children}</span>
         {onToggle && (
-          // Wrapper height matches the title row's line-height so the caret
-          // is vertically centred with the title (not with the full stack
-          // when a subtitle wraps below).
+          // Wrapper height matches the title row's actual line-height so the
+          // caret centres with the title, not the whole subtitle stack.
           <span
             className={cn(
-              'flex h-[1.1rem] shrink-0 items-center justify-center transition-opacity duration-150',
+              'flex h-(--conversation-line-height) shrink-0 items-center justify-center transition-opacity duration-150',
               open
                 ? 'opacity-80'
                 : 'opacity-0 group-hover/disclosure-row:opacity-80 group-focus-within/disclosure-row:opacity-80'
             )}
           >
-            <ChevronRight
-              aria-hidden
-              className={cn('size-3.5 transition-transform duration-150', open && 'rotate-90')}
-              // currentColor + a chunkier stroke so the caret reads as a
-              // confident hover affordance instead of a hairline.
-              color="currentColor"
-              strokeWidth={2.75}
-            />
+            <DisclosureCaret open={open} />
           </span>
         )}
       </button>
-      {trailing && <span className="absolute right-1 top-0.5 flex h-[1.1rem] items-center">{trailing}</span>}
+      {trailing && (
+        <span className="absolute right-1 top-0 flex h-(--conversation-line-height) items-center">{trailing}</span>
+      )}
     </div>
   )
 }
diff --git a/apps/desktop/src/components/chat/intro.tsx b/apps/desktop/src/components/chat/intro.tsx
index f417c163995..7cd914c8dbe 100644
--- a/apps/desktop/src/components/chat/intro.tsx
+++ b/apps/desktop/src/components/chat/intro.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { type CSSProperties, useState } from 'react'
 
 import introCopyJsonl from './intro-copy.jsonl?raw'
 
@@ -161,9 +161,17 @@ export function Intro({ personality, seed }: IntroProps) {
       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"
       data-slot="aui_intro"
     >
-      <div className="w-full min-w-0 max-w-xl">
-        <p className="mb-3 font-['Collapse'] text-[clamp(3.25rem,4.6dvw,4.875rem)] font-bold uppercase leading-[0.95] tracking-wider text-midground mix-blend-plus-lighter dark:text-foreground/90">
-          Hermes Agent
+      <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
+          }
+        >
+          <span>
+            <span>HERMES AGENT</span>
+          </span>
+          <span aria-hidden="true">HERMES AGENT</span>
         </p>
 
         <p className="m-0 text-center leading-normal tracking-tight">{copy.body}</p>
diff --git a/apps/desktop/src/components/chat/shiki-highlighter.tsx b/apps/desktop/src/components/chat/shiki-highlighter.tsx
index a5fbe1c340b..a0088e9eea9 100644
--- a/apps/desktop/src/components/chat/shiki-highlighter.tsx
+++ b/apps/desktop/src/components/chat/shiki-highlighter.tsx
@@ -4,72 +4,89 @@ import type { SyntaxHighlighterProps } from '@assistant-ui/react-streamdown'
 import type { FC } from 'react'
 import ShikiHighlighter from 'react-shiki'
 
-import { isLikelyProseCodeBlock } from '@/lib/markdown-code'
+import {
+  CodeCard,
+  CodeCardBody,
+  CodeCardHeader,
+  CodeCardIcon,
+  CodeCardSubtitle,
+  CodeCardTitle
+} from '@/components/chat/code-card'
+import { CopyButton } from '@/components/ui/copy-button'
+import { codiconForLanguage, isLikelyProseCodeBlock, sanitizeLanguageTag } from '@/lib/markdown-code'
 
 /**
- * assistant-ui's recommended `SyntaxHighlighter` slot.
+ * Streamdown's code adapter renders header + body as inline siblings, so we
+ * own the wrapping `<CodeCard>` here and neutralize the upstream
+ * `data-streamdown="code-block"` chrome from styles.css. Anything that wants
+ * a card-shaped code surface should compose `CodeCard*` directly.
  *
- * Uses the full `react-shiki` bundle so all `bundledLanguages` work
- * (rust, go, swift, kotlin, sql, etc.) — the `/web` subpath only ships
- * common web languages and silently falls back to plain text otherwise.
- *
- * Theme switching is automatic via the CSS `color-scheme` on `:root`
- * (set from the desktop theme provider).
- *
- * `showLanguage` is disabled because we render our own `CodeHeader`;
- * leaving it on causes the language to appear twice.
+ * `react-shiki` full bundle so all `bundledLanguages` work; theme switches
+ * follow the document `color-scheme` via `defaultColor="light-dark()"`.
  */
 interface HermesSyntaxHighlighterProps extends SyntaxHighlighterProps {
   defer?: boolean
 }
 
+const SHIKI_THEME = { dark: 'github-dark-default', light: 'github-light-default' } as const
+
 export const SyntaxHighlighter: FC<HermesSyntaxHighlighterProps> = ({
-  components: { Pre, Code: _UnusedCode },
+  components: { Pre },
   language,
   code,
   defer = false
 }) => {
-  const preClassName =
-    'aui-shiki m-0 overflow-hidden rounded-b-md border border-t-0 border-border bg-card font-mono text-sm leading-relaxed [&_pre]:m-0 [&_pre]:overflow-x-auto [&_pre]:bg-transparent! [&_pre]:px-4 [&_pre]:py-3 [&_pre]:font-mono [&_pre]:leading-relaxed'
-
-  // Streamdown may hand us fence contents with edge newlines. Strip blank
-  // fence padding without touching indentation on the first real line.
   const trimmed = (code ?? '').replace(/^\n+/, '').trimEnd()
 
-  // Avoid rendering an empty code card while Streamdown is still deciding
-  // whether a transient/incomplete fence is real markdown.
+  // Streaming may hand us empty/incomplete fences — render nothing rather
+  // than a transient empty card.
   if (!trimmed.trim()) {
     return null
   }
 
   if (isLikelyProseCodeBlock(language, trimmed)) {
-    return <div className="whitespace-pre-wrap wrap-anywhere text-foreground">{trimmed}</div>
+    return <div className="aui-prose-fence whitespace-pre-wrap wrap-anywhere text-foreground">{trimmed}</div>
   }
 
-  if (defer) {
-    return (
-      <Pre className={preClassName}>
-        <code className="block whitespace-pre">{trimmed}</code>
-      </Pre>
-    )
-  }
+  const cleanLanguage = sanitizeLanguageTag(language || '')
+  const label = cleanLanguage && cleanLanguage !== 'unknown' ? cleanLanguage : ''
 
   return (
-    <Pre className={preClassName}>
-      <ShikiHighlighter
-        addDefaultStyles={false}
-        as="div"
-        defaultColor="light-dark()"
-        delay={120}
-        language={language || 'text'}
-        showLanguage={false}
-        theme={{
-          light: 'github-light-default',
-          dark: 'github-dark-default'
-        }}
-      >
-        {trimmed}
-      </ShikiHighlighter>
-    </Pre>
+    <CodeCard>
+      <CodeCardHeader>
+        <CodeCardTitle>
+          <CodeCardIcon name={codiconForLanguage(label)} />
+          Code
+          {label && <CodeCardSubtitle> · {label}</CodeCardSubtitle>}
+        </CodeCardTitle>
+        <CopyButton
+          appearance="inline"
+          className="-my-1 -mr-1 h-5 px-1 opacity-55 hover:opacity-100"
+          iconClassName="size-2.5"
+          label="Copy code"
+          showLabel={false}
+          text={trimmed}
+        />
+      </CodeCardHeader>
+      <CodeCardBody>
+        <Pre className="aui-shiki m-0 overflow-hidden bg-transparent p-0">
+          {defer ? (
+            <code className="block whitespace-pre">{trimmed}</code>
+          ) : (
+            <ShikiHighlighter
+              addDefaultStyles={false}
+              as="div"
+              defaultColor="light-dark()"
+              delay={120}
+              language={language || 'text'}
+              showLanguage={false}
+              theme={SHIKI_THEME}
+            >
+              {trimmed}
+            </ShikiHighlighter>
+          )}
+        </Pre>
+      </CodeCardBody>
+    </CodeCard>
   )
 }
diff --git a/apps/desktop/src/components/desktop-onboarding-overlay.tsx b/apps/desktop/src/components/desktop-onboarding-overlay.tsx
index fce4fec0c40..d9e39861c49 100644
--- a/apps/desktop/src/components/desktop-onboarding-overlay.tsx
+++ b/apps/desktop/src/components/desktop-onboarding-overlay.tsx
@@ -144,8 +144,8 @@ export function DesktopOnboardingOverlay({ enabled, onCompleted, requestGateway
   const showPicker = flow.status === 'idle' || flow.status === 'success'
 
   return (
-    <div className="fixed inset-0 z-1300 flex items-center justify-center bg-background/80 p-6 backdrop-blur-xl">
-      <div className="w-full max-w-2xl overflow-hidden rounded-3xl border border-border bg-card/95 shadow-2xl">
+    <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">
         <Header />
         <div className="grid gap-5 p-6">
           {reason ? <ReasonNotice reason={reason} /> : null}
@@ -209,14 +209,14 @@ function Preparing({ boot }: { boot: DesktopBootState }) {
 
 function Header() {
   return (
-    <div className="border-b border-border bg-muted/30 px-6 py-5">
+    <div className="border-b border-(--ui-stroke-tertiary) bg-(--ui-chat-bubble-background) px-6 py-5">
       <div className="flex items-start gap-3">
-        <div className="flex size-11 shrink-0 items-center justify-center rounded-2xl bg-primary/10 text-primary">
+        <div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-(--ui-bg-tertiary) text-(--ui-text-tertiary)">
           <Sparkles className="size-5" />
         </div>
         <div>
-          <h2 className="text-lg font-semibold tracking-tight">Welcome to Hermes</h2>
-          <p className="mt-1 max-w-xl text-sm leading-6 text-muted-foreground">
+          <h2 className="text-[0.9375rem] font-semibold tracking-tight">Welcome to Hermes</h2>
+          <p className="mt-1 max-w-xl text-[0.8125rem] leading-5 text-(--ui-text-tertiary)">
             Connect a model provider to start chatting. Most options take one click.
           </p>
         </div>
@@ -252,7 +252,7 @@ function FooterLink({ children, onClick }: { children: React.ReactNode; onClick:
   return (
     <div className="pt-2 text-center">
       <button
-        className="text-sm font-semibold text-foreground underline-offset-4 hover:underline"
+        className="text-sm font-semibold text-foreground underline-offset-4 decoration-current/20 hover:underline"
         onClick={onClick}
         type="button"
       >
diff --git a/apps/desktop/src/components/notifications.tsx b/apps/desktop/src/components/notifications.tsx
index c4734b8c268..af1d9a96e12 100644
--- a/apps/desktop/src/components/notifications.tsx
+++ b/apps/desktop/src/components/notifications.tsx
@@ -2,9 +2,10 @@ import { useStore } from '@nanostores/react'
 import { type ReactNode, useEffect, useRef, useState } from 'react'
 
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
+import { Codicon } from '@/components/ui/codicon'
 import { CopyButton } from '@/components/ui/copy-button'
 import { triggerHaptic } from '@/lib/haptics'
-import { AlertCircle, AlertTriangle, CheckCircle2, Info, type LucideIcon, X } from '@/lib/icons'
+import { AlertCircle, AlertTriangle, CheckCircle2, type IconComponent, Info } from '@/lib/icons'
 import { cn } from '@/lib/utils'
 import {
   $notifications,
@@ -16,7 +17,7 @@ import {
 
 type ToneVariant = 'default' | 'destructive' | 'warning' | 'success'
 
-const tone: Record<NotificationKind, { icon: LucideIcon; iconClass: string; variant: ToneVariant }> = {
+const tone: Record<NotificationKind, { icon: IconComponent; iconClass: string; variant: ToneVariant }> = {
   error: { icon: AlertCircle, iconClass: 'text-destructive', variant: 'destructive' },
   warning: { icon: AlertTriangle, iconClass: 'text-primary', variant: 'warning' },
   info: { icon: Info, iconClass: 'text-muted-foreground', variant: 'default' },
@@ -122,7 +123,7 @@ function NotificationItem({ notification }: { notification: AppNotification }) {
         onClick={() => dismissNotification(notification.id)}
         type="button"
       >
-        <X className="size-3.5" />
+        <Codicon name="close" size="0.875rem" />
       </button>
     </Alert>
   )
diff --git a/apps/desktop/src/components/pane-shell/pane-shell.tsx b/apps/desktop/src/components/pane-shell/pane-shell.tsx
index 6e6aab4127b..a3f6719ee54 100644
--- a/apps/desktop/src/components/pane-shell/pane-shell.tsx
+++ b/apps/desktop/src/components/pane-shell/pane-shell.tsx
@@ -54,6 +54,7 @@ interface CollectedPane {
   defaultOpen: boolean
   disabled: boolean
   id: string
+  resizable: boolean
   side: PaneSide
   width: string
 }
@@ -110,6 +111,7 @@ function collectPanes(children: ReactNode) {
       defaultOpen: props.defaultOpen ?? true,
       disabled: props.disabled ?? false,
       id: props.id,
+      resizable: props.resizable ?? false,
       side: props.side,
       width: widthToCss(props.width, DEFAULT_WIDTH)
     }
@@ -128,7 +130,7 @@ function trackForPane(pane: CollectedPane, states: Record<string, { open: boolea
     return { open: false, track: '0px' }
   }
 
-  const override = states[pane.id]?.widthOverride
+  const override = pane.resizable ? states[pane.id]?.widthOverride : undefined
 
   return { open: true, track: override !== undefined ? `${override}px` : pane.width }
 }
@@ -286,14 +288,14 @@ export function Pane({
           aria-label={`Resize ${id}`}
           aria-orientation="vertical"
           className={cn(
-            'group absolute bottom-0 top-0 z-10 w-3 cursor-col-resize [-webkit-app-region:no-drag]',
+            'group absolute bottom-0 top-0 z-20 w-1 cursor-col-resize [-webkit-app-region:no-drag]',
             slot.side === 'left' ? 'right-0 translate-x-1/2' : 'left-0 -translate-x-1/2'
           )}
           onPointerDown={startResize}
           role="separator"
           tabIndex={0}
         >
-          <span className="absolute left-1/2 top-1/2 h-18 w-0.5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-muted-foreground/80 opacity-0 transition-opacity duration-100 group-hover:opacity-[0.65] group-focus-visible:opacity-[0.65]" />
+          <span className="absolute inset-y-0 left-1/2 w-(--vscode-sash-hover-size,0.25rem) -translate-x-1/2 bg-(--ui-sash-hover-border) opacity-0 transition-opacity duration-100 group-hover:opacity-100 group-focus-visible:opacity-100" />
         </div>
       )}
       {children}
diff --git a/apps/desktop/src/components/ui/button.tsx b/apps/desktop/src/components/ui/button.tsx
index 4b0aff4a9aa..467f4c0a5df 100644
--- a/apps/desktop/src/components/ui/button.tsx
+++ b/apps/desktop/src/components/ui/button.tsx
@@ -16,7 +16,7 @@ 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 hover:underline'
+        link: 'text-primary underline-offset-4 decoration-current/20 hover:underline'
       },
       size: {
         default: 'h-9 px-4 py-2 has-[>svg]:px-3',
diff --git a/apps/desktop/src/components/ui/checkbox.tsx b/apps/desktop/src/components/ui/checkbox.tsx
index e44111847ae..2e6b24256b2 100644
--- a/apps/desktop/src/components/ui/checkbox.tsx
+++ b/apps/desktop/src/components/ui/checkbox.tsx
@@ -1,7 +1,7 @@
 import { Checkbox as CheckboxPrimitive } from 'radix-ui'
 import * as React from 'react'
 
-import { CheckIcon } from '@/lib/icons'
+import { Codicon } from '@/components/ui/codicon'
 import { cn } from '@/lib/utils'
 
 function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
@@ -18,7 +18,7 @@ function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxP
         className="flex items-center justify-center text-current"
         data-slot="checkbox-indicator"
       >
-        <CheckIcon className="size-3.5" />
+        <Codicon name="check" size="0.875rem" />
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>
   )
diff --git a/apps/desktop/src/components/ui/codicon.tsx b/apps/desktop/src/components/ui/codicon.tsx
new file mode 100644
index 00000000000..b079216884c
--- /dev/null
+++ b/apps/desktop/src/components/ui/codicon.tsx
@@ -0,0 +1,20 @@
+import type * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+export interface CodiconProps extends React.HTMLAttributes<HTMLElement> {
+  name: string
+  size?: number | string
+  spinning?: boolean
+}
+
+export function Codicon({ className, name, size, spinning, style, ...props }: CodiconProps) {
+  return (
+    <i
+      aria-hidden="true"
+      className={cn('codicon', `codicon-${name}`, spinning && 'codicon-modifier-spin', className)}
+      style={{ fontSize: size, ...style }}
+      {...props}
+    />
+  )
+}
diff --git a/apps/desktop/src/components/ui/context-menu.tsx b/apps/desktop/src/components/ui/context-menu.tsx
new file mode 100644
index 00000000000..0849efdd53c
--- /dev/null
+++ b/apps/desktop/src/components/ui/context-menu.tsx
@@ -0,0 +1,141 @@
+import { ContextMenu as ContextMenuPrimitive } from 'radix-ui'
+import * as React from 'react'
+
+import { Codicon } from '@/components/ui/codicon'
+import { cn } from '@/lib/utils'
+
+function ContextMenu({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
+}
+
+function ContextMenuPortal({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
+  return <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
+}
+
+function ContextMenuTrigger({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
+  return <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
+}
+
+function ContextMenuGroup({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
+  return <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
+}
+
+function ContextMenuContent({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Content
+        className={cn(
+          'z-50 max-h-(--radix-context-menu-content-available-height) min-w-36 origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg border border-(--ui-stroke-secondary) bg-[color-mix(in_srgb,var(--ui-bg-elevated)_96%,transparent)] p-1 text-[length:var(--conversation-text-font-size)] text-popover-foreground shadow-md backdrop-blur-md data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 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]:zoom-in-95',
+          className
+        )}
+        data-slot="context-menu-content"
+        {...props}
+      />
+    </ContextMenuPrimitive.Portal>
+  )
+}
+
+function ContextMenuItem({
+  className,
+  inset,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: 'default' | 'destructive'
+}) {
+  return (
+    <ContextMenuPrimitive.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!",
+        className
+      )}
+      data-inset={inset}
+      data-slot="context-menu-item"
+      data-variant={variant}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.Label
+      className={cn('px-2 py-1 text-xs font-medium text-(--ui-text-tertiary) data-[inset]:pl-7', className)}
+      data-inset={inset}
+      data-slot="context-menu-label"
+      {...props}
+    />
+  )
+}
+
+function ContextMenuSeparator({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
+  return (
+    <ContextMenuPrimitive.Separator
+      className={cn('-mx-1 my-1 h-px bg-(--ui-stroke-tertiary)', className)}
+      data-slot="context-menu-separator"
+      {...props}
+    />
+  )
+}
+
+function ContextMenuSub({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
+  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />
+}
+
+function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.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)",
+        className
+      )}
+      data-inset={inset}
+      data-slot="context-menu-sub-trigger"
+      {...props}
+    >
+      {children}
+      <Codicon className="ml-auto text-(--ui-text-tertiary)" name="chevron-right" size="1rem" />
+    </ContextMenuPrimitive.SubTrigger>
+  )
+}
+
+function ContextMenuSubContent({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
+  return (
+    <ContextMenuPrimitive.SubContent
+      className={cn(
+        'z-50 min-w-36 origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-lg border border-(--ui-stroke-secondary) bg-[color-mix(in_srgb,var(--ui-bg-elevated)_96%,transparent)] p-1 text-[length:var(--conversation-text-font-size)] text-popover-foreground shadow-md backdrop-blur-md data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 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]:zoom-in-95',
+        className
+      )}
+      data-slot="context-menu-sub-content"
+      {...props}
+    />
+  )
+}
+
+export {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuPortal,
+  ContextMenuSeparator,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger
+}
diff --git a/apps/desktop/src/components/ui/dialog.tsx b/apps/desktop/src/components/ui/dialog.tsx
index a54bf5da21d..4f732954a2e 100644
--- a/apps/desktop/src/components/ui/dialog.tsx
+++ b/apps/desktop/src/components/ui/dialog.tsx
@@ -1,7 +1,7 @@
 import { Dialog as DialogPrimitive } from 'radix-ui'
 import * as React from 'react'
 
-import { XIcon } from '@/lib/icons'
+import { Codicon } from '@/components/ui/codicon'
 import { cn } from '@/lib/utils'
 
 function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
@@ -24,7 +24,7 @@ function DialogOverlay({ className, ...props }: React.ComponentProps<typeof Dial
   return (
     <DialogPrimitive.Overlay
       className={cn(
-        'fixed inset-0 z-[120] pointer-events-auto bg-black/50 backdrop-blur-sm data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0',
+        'fixed inset-0 z-[120] pointer-events-auto bg-black/22 backdrop-blur-[0.125rem] data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0',
         className
       )}
       data-slot="dialog-overlay"
@@ -46,7 +46,7 @@ function DialogContent({
       <DialogOverlay />
       <DialogPrimitive.Content
         className={cn(
-          'fixed left-1/2 top-1/2 z-[130] pointer-events-auto grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg border border-border bg-card p-6 shadow-lg duration-200 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]:zoom-in-95',
+          'fixed left-1/2 top-1/2 z-[130] pointer-events-auto grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-3 rounded-xl border border-(--ui-stroke-secondary) bg-(--ui-chat-bubble-background) p-4 text-[length:var(--conversation-text-font-size)] text-foreground shadow-md duration-200 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]:zoom-in-95',
           className
         )}
         data-slot="dialog-content"
@@ -55,10 +55,10 @@ function DialogContent({
         {children}
         {showCloseButton && (
           <DialogPrimitive.Close
-            className="absolute right-3 top-3 rounded-md p-1.5 text-muted-foreground opacity-70 transition-opacity hover:bg-accent hover:text-foreground hover:opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 disabled:pointer-events-none"
+            className="absolute right-2.5 top-2.5 rounded-md p-1 text-(--ui-text-tertiary) opacity-70 transition-opacity hover:bg-(--chrome-action-hover) hover:text-foreground hover:opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 disabled:pointer-events-none"
             data-slot="dialog-close-button"
           >
-            <XIcon className="size-4" />
+            <Codicon name="close" size="1rem" />
             <span className="sr-only">Close</span>
           </DialogPrimitive.Close>
         )}
@@ -70,7 +70,7 @@ function DialogContent({
 function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
-      className={cn('flex flex-col gap-1.5 text-center sm:text-left', className)}
+      className={cn('flex flex-col gap-1 text-center sm:text-left', className)}
       data-slot="dialog-header"
       {...props}
     />
@@ -90,7 +90,7 @@ function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
 function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
   return (
     <DialogPrimitive.Title
-      className={cn('text-base font-semibold tracking-tight text-foreground', className)}
+      className={cn('text-[0.9375rem] font-semibold tracking-tight text-foreground', className)}
       data-slot="dialog-title"
       {...props}
     />
@@ -100,7 +100,10 @@ function DialogTitle({ className, ...props }: React.ComponentProps<typeof Dialog
 function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>) {
   return (
     <DialogPrimitive.Description
-      className={cn('text-sm text-muted-foreground', className)}
+      className={cn(
+        'text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)',
+        className
+      )}
       data-slot="dialog-description"
       {...props}
     />
diff --git a/apps/desktop/src/components/ui/disclosure-caret.tsx b/apps/desktop/src/components/ui/disclosure-caret.tsx
new file mode 100644
index 00000000000..850ba469190
--- /dev/null
+++ b/apps/desktop/src/components/ui/disclosure-caret.tsx
@@ -0,0 +1,20 @@
+import { Codicon, type CodiconProps } from '@/components/ui/codicon'
+import { cn } from '@/lib/utils'
+
+interface DisclosureCaretProps extends Omit<CodiconProps, 'name'> {
+  open: boolean
+}
+
+// Chrome caret for collapsible sections: points right when closed (▶),
+// rotates to point down (▼) when open. Override `className` to layer
+// hover/opacity styling; twMerge resolves transition conflicts.
+export function DisclosureCaret({ className, open, size = '0.75rem', ...props }: DisclosureCaretProps) {
+  return (
+    <Codicon
+      className={cn('transition-transform duration-150', open && 'rotate-90', className)}
+      name="chevron-right"
+      size={size}
+      {...props}
+    />
+  )
+}
diff --git a/apps/desktop/src/components/ui/dropdown-menu.tsx b/apps/desktop/src/components/ui/dropdown-menu.tsx
index ba1ab8fedde..ee180726b96 100644
--- a/apps/desktop/src/components/ui/dropdown-menu.tsx
+++ b/apps/desktop/src/components/ui/dropdown-menu.tsx
@@ -1,7 +1,7 @@
 import { DropdownMenu as DropdownMenuPrimitive } from 'radix-ui'
 import * as React from 'react'
 
-import { CheckIcon, ChevronRightIcon, CircleIcon } from '@/lib/icons'
+import { Codicon } from '@/components/ui/codicon'
 import { cn } from '@/lib/utils'
 
 function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
@@ -25,7 +25,7 @@ function DropdownMenuContent({
     <DropdownMenuPrimitive.Portal>
       <DropdownMenuPrimitive.Content
         className={cn(
-          'z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 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]:zoom-in-95',
+          'z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-36 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg border border-(--ui-stroke-secondary) bg-[color-mix(in_srgb,var(--ui-bg-elevated)_96%,transparent)] p-1 text-[length:var(--conversation-text-font-size)] text-popover-foreground shadow-md backdrop-blur-md data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 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]:zoom-in-95',
           className
         )}
         data-slot="dropdown-menu-content"
@@ -52,7 +52,7 @@ function DropdownMenuItem({
   return (
     <DropdownMenuPrimitive.Item
       className={cn(
-        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 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-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!",
+        "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!",
         className
       )}
       data-inset={inset}
@@ -73,7 +73,7 @@ function DropdownMenuCheckboxItem({
     <DropdownMenuPrimitive.CheckboxItem
       checked={checked}
       className={cn(
-        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-2 rounded-md py-1 pr-2 pl-7 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"
@@ -81,7 +81,7 @@ function DropdownMenuCheckboxItem({
     >
       <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
         <DropdownMenuPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
+          <Codicon name="check" size="1rem" />
         </DropdownMenuPrimitive.ItemIndicator>
       </span>
       {children}
@@ -101,7 +101,7 @@ function DropdownMenuRadioItem({
   return (
     <DropdownMenuPrimitive.RadioItem
       className={cn(
-        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-2 rounded-md py-1 pr-2 pl-7 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"
@@ -109,7 +109,7 @@ function DropdownMenuRadioItem({
     >
       <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
         <DropdownMenuPrimitive.ItemIndicator>
-          <CircleIcon className="size-2 fill-current" />
+          <Codicon name="primitive-dot" size="0.5rem" />
         </DropdownMenuPrimitive.ItemIndicator>
       </span>
       {children}
@@ -126,7 +126,7 @@ function DropdownMenuLabel({
 }) {
   return (
     <DropdownMenuPrimitive.Label
-      className={cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', className)}
+      className={cn('px-2 py-1 text-xs font-medium text-(--ui-text-tertiary) data-[inset]:pl-7', className)}
       data-inset={inset}
       data-slot="dropdown-menu-label"
       {...props}
@@ -137,7 +137,7 @@ function DropdownMenuLabel({
 function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
   return (
     <DropdownMenuPrimitive.Separator
-      className={cn('-mx-1 my-1 h-px bg-border', className)}
+      className={cn('-mx-1 my-1 h-px bg-(--ui-stroke-tertiary)', className)}
       data-slot="dropdown-menu-separator"
       {...props}
     />
@@ -169,7 +169,7 @@ function DropdownMenuSubTrigger({
   return (
     <DropdownMenuPrimitive.SubTrigger
       className={cn(
-        "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        "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)",
         className
       )}
       data-inset={inset}
@@ -177,7 +177,7 @@ function DropdownMenuSubTrigger({
       {...props}
     >
       {children}
-      <ChevronRightIcon className="ml-auto size-4" />
+      <Codicon className="ml-auto text-(--ui-text-tertiary)" name="chevron-right" size="1rem" />
     </DropdownMenuPrimitive.SubTrigger>
   )
 }
@@ -189,7 +189,7 @@ function DropdownMenuSubContent({
   return (
     <DropdownMenuPrimitive.SubContent
       className={cn(
-        'z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 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]:zoom-in-95',
+        'z-50 min-w-36 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-lg border border-(--ui-stroke-secondary) bg-[color-mix(in_srgb,var(--ui-bg-elevated)_96%,transparent)] p-1 text-[length:var(--conversation-text-font-size)] text-popover-foreground shadow-md backdrop-blur-md data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 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]:zoom-in-95',
         className
       )}
       data-slot="dropdown-menu-sub-content"
diff --git a/apps/desktop/src/components/ui/kbd.tsx b/apps/desktop/src/components/ui/kbd.tsx
new file mode 100644
index 00000000000..7f5ecf28d65
--- /dev/null
+++ b/apps/desktop/src/components/ui/kbd.tsx
@@ -0,0 +1,37 @@
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+function Kbd({ className, ...props }: React.ComponentProps<'kbd'>) {
+  return (
+    <kbd
+      className={cn(
+        'inline-grid h-4 min-w-4 place-items-center rounded-sm border border-border/70 bg-muted/45 px-1 font-mono text-[0.5625rem] font-medium leading-none text-muted-foreground shadow-xs',
+        className
+      )}
+      data-slot="kbd"
+      {...props}
+    />
+  )
+}
+
+interface KbdGroupProps extends Omit<React.ComponentProps<'span'>, 'children'> {
+  keys: string[]
+}
+
+function KbdGroup({ className, keys, ...props }: KbdGroupProps) {
+  return (
+    <span
+      aria-label={keys.join(' ')}
+      className={cn('inline-flex shrink-0 items-center gap-0.5 opacity-55', className)}
+      data-slot="kbd-group"
+      {...props}
+    >
+      {keys.map(key => (
+        <Kbd key={key}>{key}</Kbd>
+      ))}
+    </span>
+  )
+}
+
+export { Kbd, KbdGroup }
diff --git a/apps/desktop/src/components/ui/pagination.tsx b/apps/desktop/src/components/ui/pagination.tsx
index ab15c47eb45..f8be0007820 100644
--- a/apps/desktop/src/components/ui/pagination.tsx
+++ b/apps/desktop/src/components/ui/pagination.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { ChevronLeft, ChevronRight, MoreHorizontal } from '@/lib/icons'
+import { Codicon } from '@/components/ui/codicon'
 import { cn } from '@/lib/utils'
 
 function Pagination({ className, ...props }: React.ComponentProps<'nav'>) {
@@ -59,7 +59,7 @@ function PaginationPrevious({ className, ...props }: React.ComponentProps<'butto
       type="button"
       {...props}
     >
-      <ChevronLeft className="size-3" />
+      <Codicon name="chevron-left" size="0.75rem" />
       <span>Prev</span>
     </button>
   )
@@ -78,7 +78,7 @@ function PaginationNext({ className, ...props }: React.ComponentProps<'button'>)
       {...props}
     >
       <span>Next</span>
-      <ChevronRight className="size-3" />
+      <Codicon name="chevron-right" size="0.75rem" />
     </button>
   )
 }
@@ -91,7 +91,7 @@ function PaginationEllipsis({ className, ...props }: React.ComponentProps<'span'
       data-slot="pagination-ellipsis"
       {...props}
     >
-      <MoreHorizontal className="size-3" />
+      <Codicon name="ellipsis" size="0.75rem" />
     </span>
   )
 }
diff --git a/apps/desktop/src/components/ui/select.tsx b/apps/desktop/src/components/ui/select.tsx
index 3ef49cdfaec..c207fc18bc4 100644
--- a/apps/desktop/src/components/ui/select.tsx
+++ b/apps/desktop/src/components/ui/select.tsx
@@ -1,7 +1,7 @@
 import { Select as SelectPrimitive } from 'radix-ui'
 import * as React from 'react'
 
-import { CheckIcon, ChevronDownIcon } from '@/lib/icons'
+import { Codicon } from '@/components/ui/codicon'
 import { cn } from '@/lib/utils'
 
 function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>) {
@@ -20,7 +20,7 @@ function SelectTrigger({ className, children, ...props }: React.ComponentProps<t
     >
       {children}
       <SelectPrimitive.Icon asChild>
-        <ChevronDownIcon className="size-4 opacity-60" />
+        <Codicon className="opacity-60" name="chevron-down" size="1rem" />
       </SelectPrimitive.Icon>
     </SelectPrimitive.Trigger>
   )
@@ -74,7 +74,7 @@ function SelectItem({ className, children, ...props }: React.ComponentProps<type
     >
       <span className="absolute right-2 flex size-3.5 items-center justify-center">
         <SelectPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
+          <Codicon name="check" size="1rem" />
         </SelectPrimitive.ItemIndicator>
       </span>
       <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
diff --git a/apps/desktop/src/components/ui/sheet.tsx b/apps/desktop/src/components/ui/sheet.tsx
index cb1a5a4083e..0cc619a4dbe 100644
--- a/apps/desktop/src/components/ui/sheet.tsx
+++ b/apps/desktop/src/components/ui/sheet.tsx
@@ -3,7 +3,7 @@
 import { Dialog as SheetPrimitive } from 'radix-ui'
 import * as React from 'react'
 
-import { XIcon } from '@/lib/icons'
+import { Codicon } from '@/components/ui/codicon'
 import { cn } from '@/lib/utils'
 
 function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
@@ -26,7 +26,7 @@ function SheetOverlay({ className, ...props }: React.ComponentProps<typeof Sheet
   return (
     <SheetPrimitive.Overlay
       className={cn(
-        'fixed inset-0 z-50 bg-black/50 backdrop-blur-sm data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0',
+        'fixed inset-0 z-50 bg-black/22 backdrop-blur-[0.125rem] data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0',
         className
       )}
       data-slot="sheet-overlay"
@@ -50,7 +50,7 @@ function SheetContent({
       <SheetOverlay />
       <SheetPrimitive.Content
         className={cn(
-          'fixed z-50 flex flex-col gap-4 bg-background shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500',
+          'fixed z-50 flex flex-col gap-3 border-(--ui-stroke-secondary) bg-(--ui-sidebar-surface-background) text-[length:var(--conversation-text-font-size)] shadow-md transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500',
           side === 'right' &&
             'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
           side === 'left' &&
@@ -66,8 +66,8 @@ function SheetContent({
       >
         {children}
         {showCloseButton && (
-          <SheetPrimitive.Close className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-secondary">
-            <XIcon className="size-4" />
+          <SheetPrimitive.Close className="absolute top-3 right-3 rounded-md p-1 text-(--ui-text-tertiary) opacity-70 ring-offset-background transition-opacity hover:bg-(--chrome-action-hover) hover:text-foreground hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-secondary">
+            <Codicon name="close" size="1rem" />
             <span className="sr-only">Close</span>
           </SheetPrimitive.Close>
         )}
@@ -77,17 +77,17 @@ function SheetContent({
 }
 
 function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
-  return <div className={cn('flex flex-col gap-1.5 p-4', className)} data-slot="sheet-header" {...props} />
+  return <div className={cn('flex flex-col gap-1 p-3', className)} data-slot="sheet-header" {...props} />
 }
 
 function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
-  return <div className={cn('mt-auto flex flex-col gap-2 p-4', className)} data-slot="sheet-footer" {...props} />
+  return <div className={cn('mt-auto flex flex-col gap-2 p-3', className)} data-slot="sheet-footer" {...props} />
 }
 
 function SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>) {
   return (
     <SheetPrimitive.Title
-      className={cn('font-semibold text-foreground', className)}
+      className={cn('text-[0.9375rem] font-semibold text-foreground', className)}
       data-slot="sheet-title"
       {...props}
     />
@@ -97,7 +97,10 @@ function SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPr
 function SheetDescription({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Description>) {
   return (
     <SheetPrimitive.Description
-      className={cn('text-sm text-muted-foreground', className)}
+      className={cn(
+        'text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)',
+        className
+      )}
       data-slot="sheet-description"
       {...props}
     />
diff --git a/apps/desktop/src/components/ui/text-tab.tsx b/apps/desktop/src/components/ui/text-tab.tsx
new file mode 100644
index 00000000000..4e85966883b
--- /dev/null
+++ b/apps/desktop/src/components/ui/text-tab.tsx
@@ -0,0 +1,43 @@
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+function TextTabMeta({ className, ...props }: React.ComponentProps<'span'>) {
+  return <span className={cn('text-[0.72em] font-normal text-(--ui-text-tertiary)', className)} {...props} />
+}
+
+interface TextTabProps extends React.ComponentProps<'button'> {
+  active?: boolean
+}
+
+function TextTab({ active = false, children, className, type = 'button', ...props }: TextTabProps) {
+  return (
+    <button
+      className={cn(
+        'group/text-tab inline-flex h-7 items-center gap-1 bg-transparent px-1 text-[length:var(--conversation-caption-font-size)] font-medium text-(--ui-text-tertiary) transition-colors hover:bg-transparent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring disabled:pointer-events-none disabled:opacity-50',
+        active && 'text-foreground',
+        className
+      )}
+      data-active={active}
+      type={type}
+      {...props}
+    >
+      {React.Children.map(children, child =>
+        React.isValidElement(child) && child.type === TextTabMeta ? (
+          child
+        ) : (
+          <span
+            className={cn(
+              'underline-offset-4 decoration-current/25',
+              active ? 'underline' : 'group-hover/text-tab:underline'
+            )}
+          >
+            {child}
+          </span>
+        )
+      )}
+    </button>
+  )
+}
+
+export { TextTab, TextTabMeta }
diff --git a/apps/desktop/src/global.d.ts b/apps/desktop/src/global.d.ts
index a893af6d9c9..0b7a02e5646 100644
--- a/apps/desktop/src/global.d.ts
+++ b/apps/desktop/src/global.d.ts
@@ -29,6 +29,14 @@ declare global {
       fetchLinkTitle: (url: string) => Promise<string>
       readDir: (path: string) => Promise<HermesReadDirResult>
       gitRoot?: (path: string) => Promise<string | null>
+      terminal: {
+        dispose: (id: string) => Promise<boolean>
+        onData: (id: string, callback: (payload: string) => void) => () => void
+        onExit: (id: string, callback: (payload: HermesTerminalExit) => void) => () => void
+        resize: (id: string, size: { cols: number; rows: number }) => Promise<boolean>
+        start: (options?: { cols?: number; cwd?: string; rows?: number }) => Promise<HermesTerminalSession>
+        write: (id: string, data: string) => Promise<boolean>
+      }
       onClosePreviewRequested?: (callback: () => void) => () => void
       onOpenUpdatesRequested?: (callback: () => void) => () => void
       onWindowStateChanged?: (callback: (payload: HermesWindowState) => void) => () => void
@@ -47,6 +55,17 @@ declare global {
   }
 }
 
+export interface HermesTerminalSession {
+  cwd: string
+  id: string
+  shell: string
+}
+
+export interface HermesTerminalExit {
+  code: number | null
+  signal: string | null
+}
+
 export interface DesktopVersionInfo {
   appVersion: string
   electronVersion: string
diff --git a/apps/desktop/src/hermes.ts b/apps/desktop/src/hermes.ts
index 8992359c58f..a8d32e48bef 100644
--- a/apps/desktop/src/hermes.ts
+++ b/apps/desktop/src/hermes.ts
@@ -394,9 +394,7 @@ export function getProfiles(): Promise<ProfilesResponse> {
   })
 }
 
-export function createProfile(
-  body: ProfileCreatePayload
-): Promise<{ name: string; ok: boolean; path: string }> {
+export function createProfile(body: ProfileCreatePayload): Promise<{ name: string; ok: boolean; path: string }> {
   return window.hermesDesktop.api<{ name: string; ok: boolean; path: string }>({
     path: '/api/profiles',
     method: 'POST',
@@ -404,10 +402,7 @@ export function createProfile(
   })
 }
 
-export function renameProfile(
-  name: string,
-  newName: string
-): Promise<{ name: string; ok: boolean; path: string }> {
+export function renameProfile(name: string, newName: string): Promise<{ name: string; ok: boolean; path: string }> {
   return window.hermesDesktop.api<{ name: string; ok: boolean; path: string }>({
     path: `/api/profiles/${encodeURIComponent(name)}`,
     method: 'PATCH',
diff --git a/apps/desktop/src/hooks/use-resize-observer.ts b/apps/desktop/src/hooks/use-resize-observer.ts
index 517d007aa55..b350a367d72 100644
--- a/apps/desktop/src/hooks/use-resize-observer.ts
+++ b/apps/desktop/src/hooks/use-resize-observer.ts
@@ -1,17 +1,22 @@
-import { type RefObject, useEffect } from 'react'
+import { type RefObject, useLayoutEffect, useRef } from 'react'
 
 export function useResizeObserver(onResize: () => void, ...refs: readonly RefObject<Element | null>[]) {
-  const elements = refs.map(ref => ref.current)
+  const refsRef = useRef(refs)
+  refsRef.current = refs
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (typeof ResizeObserver === 'undefined') {
+      onResize()
+
       return
     }
 
     const observer = new ResizeObserver(() => onResize())
     let observed = false
 
-    for (const element of elements) {
+    for (const ref of refsRef.current) {
+      const element = ref.current
+
       if (!element) {
         continue
       }
@@ -29,5 +34,5 @@ export function useResizeObserver(onResize: () => void, ...refs: readonly RefObj
     onResize()
 
     return () => observer.disconnect()
-  }, [onResize, ...elements])
+  }, [onResize])
 }
diff --git a/apps/desktop/src/lib/chat-messages.test.ts b/apps/desktop/src/lib/chat-messages.test.ts
index 6f62de758b8..20329d85428 100644
--- a/apps/desktop/src/lib/chat-messages.test.ts
+++ b/apps/desktop/src/lib/chat-messages.test.ts
@@ -1,9 +1,10 @@
 import { describe, expect, it } from 'vitest'
 
-import type { ChatMessagePart } from './chat-messages'
+import type { ChatMessage, ChatMessagePart } from './chat-messages'
 import {
   appendAssistantTextPart,
   chatMessageText,
+  preserveLocalAssistantErrors,
   renderMediaTags,
   toChatMessages,
   upsertToolPart
@@ -142,6 +143,173 @@ describe('renderMediaTags', () => {
   })
 })
 
+describe('preserveLocalAssistantErrors', () => {
+  it('preserves a local user+error pair when hydration omits the failed turn', () => {
+    const nextMessages: ChatMessage[] = [
+      {
+        id: 'stored-user',
+        parts: [{ text: 'earlier', type: 'text' }],
+        role: 'user'
+      }
+    ]
+
+    const currentMessages: ChatMessage[] = [
+      {
+        id: 'stored-user',
+        parts: [{ text: 'earlier', type: 'text' }],
+        role: 'user'
+      },
+      {
+        id: 'user-123',
+        parts: [{ text: 'new prompt', type: 'text' }],
+        role: 'user'
+      },
+      {
+        error: 'OpenRouter 403',
+        id: 'assistant-error-1',
+        parts: [],
+        role: 'assistant'
+      }
+    ]
+
+    const merged = preserveLocalAssistantErrors(nextMessages, currentMessages)
+
+    expect(merged.map(message => message.id)).toEqual(['stored-user', 'user-123', 'assistant-error-1'])
+    expect(merged[2]?.error).toBe('OpenRouter 403')
+  })
+
+  it('does not keep orphan local user turns when there is no inline assistant error', () => {
+    const nextMessages: ChatMessage[] = [
+      {
+        id: 'stored-user',
+        parts: [{ text: 'earlier', type: 'text' }],
+        role: 'user'
+      }
+    ]
+
+    const currentMessages: ChatMessage[] = [
+      ...nextMessages,
+      {
+        id: 'user-123',
+        parts: [{ text: 'new prompt', type: 'text' }],
+        role: 'user'
+      }
+    ]
+
+    const merged = preserveLocalAssistantErrors(nextMessages, currentMessages)
+
+    expect(merged.map(message => message.id)).toEqual(['stored-user'])
+  })
+
+  it('does not duplicate local user when stored history already has equivalent text', () => {
+    const nextMessages: ChatMessage[] = [
+      {
+        id: 'stored-user',
+        parts: [{ text: 'hi', type: 'text' }],
+        role: 'user'
+      }
+    ]
+
+    const currentMessages: ChatMessage[] = [
+      {
+        id: 'optimistic-user',
+        parts: [{ text: 'hi', type: 'text' }],
+        role: 'user'
+      },
+      {
+        error: 'OpenRouter 403',
+        id: 'assistant-error-1',
+        parts: [],
+        role: 'assistant'
+      }
+    ]
+
+    const merged = preserveLocalAssistantErrors(nextMessages, currentMessages)
+
+    expect(merged.map(message => message.id)).toEqual(['stored-user', 'assistant-error-1'])
+  })
+
+  it('keeps local user when only older history has equivalent text', () => {
+    const nextMessages: ChatMessage[] = [
+      {
+        id: 'older-user',
+        parts: [{ text: 'hi', type: 'text' }],
+        role: 'user'
+      },
+      {
+        id: 'older-assistant',
+        parts: [{ text: 'hello', type: 'text' }],
+        role: 'assistant'
+      },
+      {
+        id: 'tail-user',
+        parts: [{ text: 'different prompt', type: 'text' }],
+        role: 'user'
+      }
+    ]
+
+    const currentMessages: ChatMessage[] = [
+      {
+        id: 'optimistic-user',
+        parts: [{ text: 'hi', type: 'text' }],
+        role: 'user'
+      },
+      {
+        error: 'OpenRouter 403',
+        id: 'assistant-error-1',
+        parts: [],
+        role: 'assistant'
+      }
+    ]
+
+    const merged = preserveLocalAssistantErrors(nextMessages, currentMessages)
+
+    expect(merged.map(message => message.id)).toEqual([
+      'older-user',
+      'older-assistant',
+      'tail-user',
+      'optimistic-user',
+      'assistant-error-1'
+    ])
+  })
+
+  it('keeps local assistant error when hydrated message reuses same id', () => {
+    const nextMessages: ChatMessage[] = [
+      {
+        id: 'user-1',
+        parts: [{ text: 'new prompt', type: 'text' }],
+        role: 'user'
+      },
+      {
+        id: 'assistant-stream-1',
+        parts: [{ text: '', type: 'text' }],
+        role: 'assistant'
+      }
+    ]
+
+    const currentMessages: ChatMessage[] = [
+      {
+        id: 'user-1',
+        parts: [{ text: 'new prompt', type: 'text' }],
+        role: 'user'
+      },
+      {
+        error: 'OpenRouter 403',
+        id: 'assistant-stream-1',
+        parts: [],
+        role: 'assistant'
+      }
+    ]
+
+    const merged = preserveLocalAssistantErrors(nextMessages, currentMessages)
+
+    const assistant = merged.find(message => message.id === 'assistant-stream-1')
+
+    expect(assistant?.error).toBe('OpenRouter 403')
+    expect(assistant?.pending).toBe(false)
+  })
+})
+
 describe('upsertToolPart', () => {
   it('preserves inline diffs from tool completion events', () => {
     const parts = upsertToolPart(
@@ -221,6 +389,7 @@ describe('upsertToolPart', () => {
 
     const completedResult =
       completed[0] && 'result' in completed[0] ? (completed[0].result as Record<string, unknown>) : {}
+
     const clearedResult = cleared[0] && 'result' in cleared[0] ? (cleared[0].result as Record<string, unknown>) : {}
 
     expect(completedResult.todos).toEqual([{ content: 'Boil water', id: 'boil', status: 'in_progress' }])
diff --git a/apps/desktop/src/lib/chat-messages.ts b/apps/desktop/src/lib/chat-messages.ts
index 0839daae01c..f8a32d9e536 100644
--- a/apps/desktop/src/lib/chat-messages.ts
+++ b/apps/desktop/src/lib/chat-messages.ts
@@ -12,6 +12,7 @@ export type ChatMessage = {
   parts: ChatMessagePart[]
   timestamp?: number
   pending?: boolean
+  error?: string
   branchGroupId?: string
   hidden?: boolean
   /** Composer attachment ref strings (`@file:...`, `@image:...`) sent with this user message. */
@@ -104,7 +105,7 @@ export function chatMessageText(message: ChatMessage): string {
 
 const ATTACHED_CONTEXT_MARKER_RE = /(?:^|\n)--- Attached Context ---\s*\n/
 const CONTEXT_WARNINGS_MARKER_RE = /(?:^|\n)--- Context Warnings ---[\s\S]*$/
-const CONTEXT_REF_RE = /@(file|folder|url|image|tool):(?:"[^"\n]+"|'[^'\n]+'|`[^`\n]+`|\S+)/g
+const CONTEXT_REF_RE = /@(file|folder|url|image|tool|terminal):(?:"[^"\n]+"|'[^'\n]+'|`[^`\n]+`|\S+)/g
 
 function textFromUnknown(value: unknown, depth = 0): string {
   if (typeof value === 'string') {
@@ -435,6 +436,7 @@ export function upsertToolPart(
   if (index === -1) {
     return [...next, base]
   }
+
   next[index] = { ...next[index], ...base }
 
   return next
@@ -800,6 +802,77 @@ export function toChatMessages(messages: SessionMessage[]): ChatMessage[] {
   )
 }
 
+export function preserveLocalAssistantErrors(
+  nextMessages: ChatMessage[],
+  currentMessages: ChatMessage[]
+): ChatMessage[] {
+  const localById = new Map(currentMessages.map(message => [message.id, message]))
+
+  const mergedNextMessages = nextMessages.map(message => {
+    if (message.role !== 'assistant' || message.error || message.hidden) {
+      return message
+    }
+
+    const local = localById.get(message.id)
+
+    if (!local || local.role !== 'assistant' || !local.error || local.hidden) {
+      return message
+    }
+
+    return {
+      ...message,
+      error: local.error,
+      pending: false
+    }
+  })
+
+  const existingIds = new Set(mergedNextMessages.map(message => message.id))
+  const preserveIds = new Set<string>()
+  const normalize = (value: string) => value.replace(/\s+/g, ' ').trim()
+  const tailUserInNext = [...mergedNextMessages].reverse().find(message => message.role === 'user' && !message.hidden)
+  const tailUserText = tailUserInNext ? normalize(chatMessageText(tailUserInNext)) : ''
+  const tailUserRefs = tailUserInNext ? (tailUserInNext.attachmentRefs ?? []).join('\n') : ''
+
+  const matchesTailUserInNext = (candidate: ChatMessage) =>
+    Boolean(tailUserInNext) &&
+    normalize(chatMessageText(candidate)) === tailUserText &&
+    (candidate.attachmentRefs ?? []).join('\n') === tailUserRefs
+
+  for (let index = 0; index < currentMessages.length; index += 1) {
+    const message = currentMessages[index]
+
+    if (message.role !== 'assistant' || !message.error || message.hidden || existingIds.has(message.id)) {
+      continue
+    }
+
+    preserveIds.add(message.id)
+
+    for (let probe = index - 1; probe >= 0; probe -= 1) {
+      const candidate = currentMessages[probe]
+
+      if (candidate.hidden) {
+        continue
+      }
+
+      if (candidate.role === 'user' && !existingIds.has(candidate.id) && !matchesTailUserInNext(candidate)) {
+        preserveIds.add(candidate.id)
+      }
+
+      break
+    }
+  }
+
+  if (preserveIds.size === 0) {
+    return mergedNextMessages
+  }
+
+  const preserved = currentMessages
+    .filter(message => preserveIds.has(message.id))
+    .map(message => ({ ...message, pending: false }))
+
+  return [...mergedNextMessages, ...preserved]
+}
+
 export function branchGroupForUser(userMessage: ChatMessage): string {
   return `branch:${userMessage.id}`
 }
diff --git a/apps/desktop/src/lib/chat-runtime.ts b/apps/desktop/src/lib/chat-runtime.ts
index 7f278729e74..915869a4fd1 100644
--- a/apps/desktop/src/lib/chat-runtime.ts
+++ b/apps/desktop/src/lib/chat-runtime.ts
@@ -39,6 +39,8 @@ export function createClientSessionState(
   return {
     storedSessionId,
     messages,
+    branch: '',
+    cwd: '',
     busy: false,
     awaitingResponse: false,
     streamId: null,
@@ -145,6 +147,10 @@ export function pathLabel(path: string): string {
 }
 
 export function attachmentDisplayText(attachment: ComposerAttachment): string | null {
+  if (attachment.kind === 'terminal' && attachment.detail) {
+    return `\`\`\`terminal\n${attachment.detail.trim()}\n\`\`\``
+  }
+
   if (attachment.refText) {
     return attachment.refText
   }
@@ -312,7 +318,11 @@ export function toRuntimeMessage(message: ChatMessage): ThreadMessage {
     role,
     content: message.parts as Extract<ThreadMessage, { role: 'assistant' }>['content'],
     createdAt,
-    status: message.pending ? { type: 'running' } : { type: 'complete', reason: 'stop' },
+    status: message.error
+      ? { type: 'incomplete', reason: 'error', error: message.error }
+      : message.pending
+        ? { type: 'running' }
+        : { type: 'complete', reason: 'stop' },
     metadata: {
       unstable_state: null,
       unstable_annotations: [],
diff --git a/apps/desktop/src/lib/external-link.test.tsx b/apps/desktop/src/lib/external-link.test.tsx
index 3023d79d0d2..4e529576548 100644
--- a/apps/desktop/src/lib/external-link.test.tsx
+++ b/apps/desktop/src/lib/external-link.test.tsx
@@ -143,6 +143,7 @@ describe('external link helpers', () => {
   it('ignores error-like fetched titles and falls back to slug label', async () => {
     const bridge = vi.fn().mockResolvedValue('GetYourGuide – Error')
     installDesktopBridge({ fetchLinkTitle: bridge as unknown as Window['hermesDesktop']['fetchLinkTitle'] })
+
     const url =
       'https://www.getyourguide.com/culebra-island-l145468/from-fajardo-full-day-cordillera-islands-catamaran-tour-t19894/'
 
diff --git a/apps/desktop/src/lib/external-link.tsx b/apps/desktop/src/lib/external-link.tsx
index cd3912cf995..05f1ec02f66 100644
--- a/apps/desktop/src/lib/external-link.tsx
+++ b/apps/desktop/src/lib/external-link.tsx
@@ -216,7 +216,7 @@ export function ExternalLink({
 
   return (
     <a
-      className={cn('font-semibold text-foreground underline underline-offset-4 decoration-current', className)}
+      className={cn('font-semibold text-foreground underline underline-offset-4 decoration-current/20', className)}
       href={target}
       onClick={event => {
         event.stopPropagation()
diff --git a/apps/desktop/src/lib/icons.ts b/apps/desktop/src/lib/icons.ts
index 198124e1f29..54d71e770e7 100644
--- a/apps/desktop/src/lib/icons.ts
+++ b/apps/desktop/src/lib/icons.ts
@@ -190,4 +190,4 @@ export {
   Zap
 }
 
-export type { LucideIcon } from 'lucide-react'
+export type { Icon as IconComponent } from '@tabler/icons-react'
diff --git a/apps/desktop/src/lib/katex-memo.ts b/apps/desktop/src/lib/katex-memo.ts
index 2f7b07ffb2b..7143fbff905 100644
--- a/apps/desktop/src/lib/katex-memo.ts
+++ b/apps/desktop/src/lib/katex-memo.ts
@@ -180,9 +180,7 @@ function createMemoizedRehypeKatex(options: KatexMemoOptions = {}): Pluggable {
   return () =>
     function transform(tree: Root, file: VFile): undefined {
       visitParents(tree, 'element', (element, parents) => {
-        const classes = Array.isArray(element.properties?.className)
-          ? (element.properties.className as string[])
-          : []
+        const classes = Array.isArray(element.properties?.className) ? (element.properties.className as string[]) : []
 
         // Match the same class set rehype-katex looks for. `language-math`
         // is the markdown ` ```math ` form, `math-inline` is what
@@ -201,12 +199,7 @@ function createMemoizedRehypeKatex(options: KatexMemoOptions = {}): Pluggable {
 
         // For ` ```math ` the scope walks up to the wrapping <pre> and
         // we treat it as display math. Same logic rehype-katex uses.
-        if (
-          languageMath &&
-          parent &&
-          parent.type === 'element' &&
-          (parent as Element).tagName === 'pre'
-        ) {
+        if (languageMath && parent && parent.type === 'element' && (parent as Element).tagName === 'pre') {
           scope = parent as Element
           parent = parents[parents.length - 2]
           displayMode = true
@@ -253,10 +246,7 @@ function createMemoizedRehypeKatex(options: KatexMemoOptions = {}): Pluggable {
  * wrapper. Drop-in for `@streamdown/math`'s `createMathPlugin`.
  */
 export function createMemoizedMathPlugin(config: MathPluginConfig = {}) {
-  const remarkPlugin: Pluggable = [
-    remarkMath,
-    { singleDollarTextMath: config.singleDollarTextMath ?? false }
-  ]
+  const remarkPlugin: Pluggable = [remarkMath, { singleDollarTextMath: config.singleDollarTextMath ?? false }]
 
   const rehypePlugin = createMemoizedRehypeKatex({ errorColor: config.errorColor })
 
diff --git a/apps/desktop/src/lib/markdown-code.ts b/apps/desktop/src/lib/markdown-code.ts
index b4d9e641490..0b105727490 100644
--- a/apps/desktop/src/lib/markdown-code.ts
+++ b/apps/desktop/src/lib/markdown-code.ts
@@ -49,6 +49,65 @@ export function sanitizeLanguageTag(tag: string): string {
   return VALID_LANGUAGE_RE.test(first) && first.length <= 16 ? first.toLowerCase() : ''
 }
 
+// Sanitized language tag → codicon glyph. Anything not listed falls back to
+// the generic `code` glyph, which matches what the tool-row icons use.
+const CODICON_BY_LANGUAGE: Record<string, string> = {
+  bash: 'terminal',
+  cmd: 'terminal',
+  console: 'terminal',
+  fish: 'terminal',
+  powershell: 'terminal',
+  ps1: 'terminal',
+  sh: 'terminal',
+  shell: 'terminal',
+  zsh: 'terminal',
+
+  md: 'markdown',
+  markdown: 'markdown',
+
+  json: 'json',
+  json5: 'json',
+
+  ini: 'settings-gear',
+  toml: 'settings-gear',
+  yaml: 'settings-gear',
+  yml: 'settings-gear',
+  dotenv: 'settings-gear',
+  env: 'settings-gear',
+
+  graphql: 'database',
+  gql: 'database',
+  mysql: 'database',
+  postgres: 'database',
+  postgresql: 'database',
+  sql: 'database',
+  sqlite: 'database',
+
+  diff: 'diff',
+  patch: 'diff',
+
+  css: 'symbol-color',
+  less: 'symbol-color',
+  sass: 'symbol-color',
+  scss: 'symbol-color',
+  svg: 'symbol-color',
+
+  regex: 'regex',
+  regexp: 'regex',
+
+  curl: 'globe',
+  http: 'globe',
+
+  docker: 'package',
+  dockerfile: 'package',
+
+  mermaid: 'graph'
+}
+
+export function codiconForLanguage(language: string | undefined): string {
+  return CODICON_BY_LANGUAGE[sanitizeLanguageTag(language || '')] || 'code'
+}
+
 function proseLineCount(body: string): number {
   return body.split('\n').filter(line => {
     const trimmed = line.trim()
diff --git a/apps/desktop/src/lib/markdown-preprocess.ts b/apps/desktop/src/lib/markdown-preprocess.ts
index bb85b22b0a2..c4d4637befa 100644
--- a/apps/desktop/src/lib/markdown-preprocess.ts
+++ b/apps/desktop/src/lib/markdown-preprocess.ts
@@ -310,7 +310,9 @@ const LATEX_INLINE_RE = /\\\(([^\n]+?)\\\)/g
 const LATEX_DISPLAY_RE = /\\\[([\s\S]+?)\\\]/g
 
 function rewriteLatexBracketDelimiters(text: string): string {
-  return text.replace(LATEX_INLINE_RE, (_, body: string) => `$${body}$`).replace(LATEX_DISPLAY_RE, (_, body: string) => `$$${body}$$`)
+  return text
+    .replace(LATEX_INLINE_RE, (_, body: string) => `$${body}$`)
+    .replace(LATEX_DISPLAY_RE, (_, body: string) => `$$${body}$$`)
 }
 
 // Escape `$<digit>` patterns so they don't get eaten as math delimiters.
@@ -340,14 +342,19 @@ export function preprocessMarkdown(text: string): string {
     .split(CODE_FENCE_SPLIT_RE)
     .map(part => {
       // Fence blocks pass through untouched.
-      if (/^(?:```|~~~)/.test(part)) {return part}
+      if (/^(?:```|~~~)/.test(part)) {
+        return part
+      }
 
       // Whitespace-only segments (e.g. the `\n\n` between two adjacent
       // fences) must NOT go through stripPreviewTargets — its internal
       // .trim() would collapse them to '' and glue the surrounding
       // fences together, producing things like ``````math which the
       // markdown parser then reads as a single 6-backtick block.
-      if (!part.trim()) {return part}
+      if (!part.trim()) {
+        return part
+      }
+
       // Preserve leading/trailing whitespace around the prose body so
       // that fence-prose-fence sequences keep their blank-line gaps.
       // stripPreviewTargets internally calls .trim() on its result for
diff --git a/apps/desktop/src/lib/provider-setup-errors.test.ts b/apps/desktop/src/lib/provider-setup-errors.test.ts
index 62f99e3a2df..e5a9dc65089 100644
--- a/apps/desktop/src/lib/provider-setup-errors.test.ts
+++ b/apps/desktop/src/lib/provider-setup-errors.test.ts
@@ -4,16 +4,16 @@ import { isProviderSetupErrorMessage } from './provider-setup-errors'
 
 describe('isProviderSetupErrorMessage', () => {
   it('matches generic missing-provider copy', () => {
-    expect(isProviderSetupErrorMessage('No inference provider configured. Run `hermes model` to choose one.')).toBe(true)
+    expect(isProviderSetupErrorMessage('No inference provider configured. Run `hermes model` to choose one.')).toBe(
+      true
+    )
     expect(isProviderSetupErrorMessage('No inference provider is configured.')).toBe(true)
     expect(isProviderSetupErrorMessage('set an API key (OPENROUTER_API_KEY) in ~/.hermes/.env')).toBe(true)
   })
 
   it('does not match non-provider runtime failures', () => {
     expect(
-      isProviderSetupErrorMessage(
-        'Selected runtime is not available. setup.status reports configured credentials.'
-      )
+      isProviderSetupErrorMessage('Selected runtime is not available. setup.status reports configured credentials.')
     ).toBe(false)
   })
 
diff --git a/apps/desktop/src/lib/todos.ts b/apps/desktop/src/lib/todos.ts
index 01071a3f0e9..56f36b45c27 100644
--- a/apps/desktop/src/lib/todos.ts
+++ b/apps/desktop/src/lib/todos.ts
@@ -16,6 +16,7 @@ function parseArray(value: unknown[]): TodoItem[] {
     if (!isRecord(item) || !isStatus(item.status)) {
       return []
     }
+
     const id = String(item.id ?? '').trim()
     const content = String(item.content ?? '').trim()
 
diff --git a/apps/desktop/src/lib/tool-result-summary.ts b/apps/desktop/src/lib/tool-result-summary.ts
index 615473568c3..22af5644452 100644
--- a/apps/desktop/src/lib/tool-result-summary.ts
+++ b/apps/desktop/src/lib/tool-result-summary.ts
@@ -2,6 +2,7 @@
 // mode still gets the raw JSON section.
 
 const WRAPPER_KEYS = ['data', 'result', 'output', 'response', 'payload'] as const
+
 const PRIORITY_KEYS = [
   'title',
   'name',
@@ -17,6 +18,7 @@ const PRIORITY_KEYS = [
   'summary',
   'description'
 ] as const
+
 const ERROR_KEYS = ['error', 'errors', 'failure', 'exception'] as const
 const ERROR_MSG_KEYS = ['message', 'reason', 'detail', 'stderr'] as const
 const NON_ERROR_TEXT = new Set(['', '0', 'false', 'none', 'null', 'nil', 'ok', 'success', 'n/a', 'na'])
@@ -66,6 +68,7 @@ function clipBlock(value: string, maxChars = 1800, maxLines = 18): string {
   if (!t) {
     return ''
   }
+
   const lines = t.split('\n')
   let text = lines.slice(0, maxLines).join('\n')
   const clipped = lines.length > maxLines || text.length > maxChars
@@ -187,11 +190,13 @@ function formatFieldValue(value: unknown, depth: number): string {
     if (!v.length) {
       return ''
     }
+
     const scalars = v.map(summarizeScalar).filter(Boolean)
 
     if (scalars.length === v.length && v.length <= 4) {
       return clipInline(scalars.join(', '))
     }
+
     const first = summarizeListItem(v[0], depth + 1)
 
     return first ? `${pluralize(v.length, 'item')} (${first})` : pluralize(v.length, 'item')
@@ -207,16 +212,21 @@ function formatFieldValue(value: unknown, depth: number): string {
 // "Returned N items" / "0 items" / "Returned an empty object" are all
 // noise — better to render nothing and let the title carry the signal.
 function formatArraySummary(value: unknown[], depth: number): string {
-  if (!value.length) return ''
+  if (!value.length) {
+    return ''
+  }
 
   const max = 6
+
   const lines = value
     .slice(0, max)
     .map(item => summarizeListItem(item, depth + 1))
     .filter(Boolean)
     .map(l => `- ${l}`)
 
-  if (!lines.length) return ''
+  if (!lines.length) {
+    return ''
+  }
 
   if (value.length > max) {
     const remaining = value.length - max
@@ -228,7 +238,10 @@ function formatArraySummary(value: unknown[], depth: number): string {
 
 function formatRecordSummary(record: Json, depth: number): string {
   const keys = Object.keys(record)
-  if (!keys.length) return ''
+
+  if (!keys.length) {
+    return ''
+  }
 
   if (depth <= 2) {
     const direct = firstString(record, ['message', 'summary', 'description', 'preview', 'text', 'content'])
@@ -249,6 +262,7 @@ function formatRecordSummary(record: Json, depth: number): string {
     if (!v) {
       continue
     }
+
     lines.push(`- ${titleCase(k)}: ${v}`)
 
     if (lines.length >= max) {
@@ -256,7 +270,9 @@ function formatRecordSummary(record: Json, depth: number): string {
     }
   }
 
-  if (!lines.length) return ''
+  if (!lines.length) {
+    return ''
+  }
 
   if (candidates.length > lines.length) {
     const remaining = candidates.length - lines.length
@@ -270,6 +286,7 @@ function formatSummaryValue(value: unknown, depth: number): string {
   if (depth > 4) {
     return ''
   }
+
   const v = norm(value)
 
   if (typeof v === 'string') {
@@ -383,11 +400,13 @@ function findNestedError(value: unknown, depth: number, seen: Set<unknown>): str
   if (depth > 5) {
     return ''
   }
+
   const v = norm(value)
 
   if (!v || typeof v !== 'object' || seen.has(v)) {
     return ''
   }
+
   seen.add(v)
 
   if (Array.isArray(v)) {
@@ -408,6 +427,7 @@ function findNestedError(value: unknown, depth: number, seen: Set<unknown>): str
     if (!hasMeaningfulErrorValue(record[k])) {
       continue
     }
+
     const text = valueErrorText(record[k])
 
     if (text) {
diff --git a/apps/desktop/src/store/composer-queue.ts b/apps/desktop/src/store/composer-queue.ts
index d2a3f228ff1..3f231fb7b2a 100644
--- a/apps/desktop/src/store/composer-queue.ts
+++ b/apps/desktop/src/store/composer-queue.ts
@@ -14,7 +14,10 @@ type QueueState = Record<string, QueuedPromptEntry[]>
 const STORAGE_KEY = 'hermes.desktop.composerQueue.v1'
 
 const load = (): QueueState => {
-  if (typeof window === 'undefined') return {}
+  if (typeof window === 'undefined') {
+    return {}
+  }
+
   try {
     const raw = window.localStorage.getItem(STORAGE_KEY)
     const parsed = raw ? JSON.parse(raw) : null
@@ -26,10 +29,16 @@ const load = (): QueueState => {
 }
 
 const save = (state: QueueState) => {
-  if (typeof window === 'undefined') return
+  if (typeof window === 'undefined') {
+    return
+  }
+
   try {
-    if (Object.keys(state).length === 0) window.localStorage.removeItem(STORAGE_KEY)
-    else window.localStorage.setItem(STORAGE_KEY, JSON.stringify(state))
+    if (Object.keys(state).length === 0) {
+      window.localStorage.removeItem(STORAGE_KEY)
+    } else {
+      window.localStorage.setItem(STORAGE_KEY, JSON.stringify(state))
+    }
   } catch {
     // best-effort: storage may be unavailable, queue still works in-memory
   }
@@ -41,8 +50,11 @@ const writeSession = (sid: string, queue: QueuedPromptEntry[]) => {
   const current = $queuedPromptsBySession.get()
   const next = { ...current }
 
-  if (queue.length === 0) delete next[sid]
-  else next[sid] = queue
+  if (queue.length === 0) {
+    delete next[sid]
+  } else {
+    next[sid] = queue
+  }
 
   $queuedPromptsBySession.set(next)
   save(next)
@@ -72,7 +84,9 @@ export const enqueueQueuedPrompt = (
 ): null | QueuedPromptEntry => {
   const sid = sidOf(key)
 
-  if (!sid) return null
+  if (!sid) {
+    return null
+  }
 
   const entry: QueuedPromptEntry = {
     id: nextId(),
@@ -89,11 +103,15 @@ export const enqueueQueuedPrompt = (
 export const dequeueQueuedPrompt = (key: string | null | undefined): null | QueuedPromptEntry => {
   const sid = sidOf(key)
 
-  if (!sid) return null
+  if (!sid) {
+    return null
+  }
 
   const [head, ...rest] = queueFor(sid)
 
-  if (!head) return null
+  if (!head) {
+    return null
+  }
 
   writeSession(sid, rest)
 
@@ -103,12 +121,16 @@ export const dequeueQueuedPrompt = (key: string | null | undefined): null | Queu
 export const removeQueuedPrompt = (key: string | null | undefined, id: string): boolean => {
   const sid = sidOf(key)
 
-  if (!sid) return false
+  if (!sid) {
+    return false
+  }
 
   const queue = queueFor(sid)
   const next = queue.filter(e => e.id !== id)
 
-  if (next.length === queue.length) return false
+  if (next.length === queue.length) {
+    return false
+  }
 
   writeSession(sid, next)
 
@@ -122,24 +144,32 @@ export const updateQueuedPrompt = (
 ): boolean => {
   const sid = sidOf(key)
 
-  if (!sid) return false
+  if (!sid) {
+    return false
+  }
 
   const queue = queueFor(sid)
   let changed = false
 
   const next = queue.map(entry => {
-    if (entry.id !== id) return entry
+    if (entry.id !== id) {
+      return entry
+    }
 
     const attachments = update.attachments ? cloneAttachments(update.attachments) : entry.attachments
 
-    if (entry.text === update.text && !update.attachments) return entry
+    if (entry.text === update.text && !update.attachments) {
+      return entry
+    }
 
     changed = true
 
     return { ...entry, text: update.text, attachments }
   })
 
-  if (!changed) return false
+  if (!changed) {
+    return false
+  }
 
   writeSession(sid, next)
 
@@ -152,7 +182,9 @@ export const updateQueuedPromptText = (key: string | null | undefined, id: strin
 export const clearQueuedPrompts = (key: string | null | undefined) => {
   const sid = sidOf(key)
 
-  if (!sid || !(sid in $queuedPromptsBySession.get())) return
+  if (!sid || !(sid in $queuedPromptsBySession.get())) {
+    return
+  }
 
   writeSession(sid, [])
 }
diff --git a/apps/desktop/src/store/composer.ts b/apps/desktop/src/store/composer.ts
index 564b9981e38..f986de9802f 100644
--- a/apps/desktop/src/store/composer.ts
+++ b/apps/desktop/src/store/composer.ts
@@ -4,7 +4,7 @@ import { triggerHaptic } from '@/lib/haptics'
 
 export interface ComposerAttachment {
   id: string
-  kind: 'image' | 'file' | 'folder' | 'url'
+  kind: 'image' | 'file' | 'folder' | 'terminal' | 'url'
   label: string
   detail?: string
   refText?: string
@@ -15,11 +15,38 @@ export interface ComposerAttachment {
 
 export const $composerDraft = atom('')
 export const $composerAttachments = atom<ComposerAttachment[]>([])
+export const $composerTerminalSelections = atom<Record<string, string>>({})
 
 export function setComposerDraft(value: string) {
   $composerDraft.set(value)
 }
 
+export function appendComposerDraft(value: string) {
+  const text = value.trim()
+
+  if (!text) {
+    return
+  }
+
+  const current = $composerDraft.get()
+  const separator = current && !current.endsWith('\n') ? '\n\n' : ''
+
+  $composerDraft.set(`${current}${separator}${text}`)
+}
+
+export function appendComposerInline(value: string) {
+  const text = value.trim()
+
+  if (!text) {
+    return
+  }
+
+  const current = $composerDraft.get().trimEnd()
+  const separator = current ? ' ' : ''
+
+  $composerDraft.set(`${current}${separator}${text}`)
+}
+
 export function clearComposerDraft() {
   $composerDraft.set('')
 }
@@ -46,6 +73,103 @@ export function clearComposerAttachments() {
   $composerAttachments.set([])
 }
 
+const TERMINAL_REF_RE = /@terminal:(`[^`\n]+`|"[^"\n]+"|'[^'\n]+'|\S+)/g
+
+function unquoteRefValue(raw: string) {
+  const head = raw[0]
+  const tail = raw[raw.length - 1]
+  const quoted = (head === '`' && tail === '`') || (head === '"' && tail === '"') || (head === "'" && tail === "'")
+
+  return (quoted ? raw.slice(1, -1) : raw).replace(/[,.;!?]+$/, '').trim()
+}
+
+function terminalLabelsFromDraft(draft: string) {
+  const labels: string[] = []
+  const seen = new Set<string>()
+
+  for (const match of draft.matchAll(TERMINAL_REF_RE)) {
+    const label = unquoteRefValue(match[1] || '')
+
+    if (!label || seen.has(label)) {
+      continue
+    }
+
+    seen.add(label)
+    labels.push(label)
+  }
+
+  return labels
+}
+
+export function setComposerTerminalSelection(label: string, text: string) {
+  const nextLabel = label.trim()
+  const nextText = text.trim()
+
+  if (!nextLabel || !nextText) {
+    return
+  }
+
+  const current = $composerTerminalSelections.get()
+
+  if (current[nextLabel] === nextText) {
+    return
+  }
+
+  $composerTerminalSelections.set({
+    ...current,
+    [nextLabel]: nextText
+  })
+}
+
+export function reconcileComposerTerminalSelections(draft: string) {
+  const current = $composerTerminalSelections.get()
+  const labels = new Set(terminalLabelsFromDraft(draft))
+  let changed = false
+  const next: Record<string, string> = {}
+
+  for (const [label, text] of Object.entries(current)) {
+    if (!labels.has(label)) {
+      changed = true
+
+      continue
+    }
+
+    next[label] = text
+  }
+
+  if (changed) {
+    $composerTerminalSelections.set(next)
+  }
+}
+
+export function terminalContextBlocksFromDraft(draft: string) {
+  const labels = terminalLabelsFromDraft(draft)
+
+  if (labels.length === 0) {
+    return []
+  }
+
+  const selections = $composerTerminalSelections.get()
+
+  return labels.flatMap(label => {
+    const text = selections[label]?.trim()
+
+    if (!text) {
+      return []
+    }
+
+    return `\`\`\`terminal\n${text}\n\`\`\``
+  })
+}
+
+export function clearComposerTerminalSelections() {
+  if (Object.keys($composerTerminalSelections.get()).length === 0) {
+    return
+  }
+
+  $composerTerminalSelections.set({})
+}
+
 function upsertAttachment(attachments: ComposerAttachment[], attachment: ComposerAttachment) {
   const index = attachments.findIndex(item => item.id === attachment.id)
 
diff --git a/apps/desktop/src/store/layout.ts b/apps/desktop/src/store/layout.ts
index 5b1da277aef..a01e22961c3 100644
--- a/apps/desktop/src/store/layout.ts
+++ b/apps/desktop/src/store/layout.ts
@@ -1,16 +1,26 @@
 import { atom, computed, type ReadableAtom } from 'nanostores'
 
-import { arraysEqual, insertUniqueId, persistStringArray, storedStringArray } from '@/lib/storage'
+import {
+  arraysEqual,
+  insertUniqueId,
+  persistBoolean,
+  persistStringArray,
+  storedBoolean,
+  storedStringArray
+} from '@/lib/storage'
 
 import { $paneStates, ensurePaneRegistered, setPaneOpen, setPaneWidthOverride, togglePane } from './panes'
 
-export const SIDEBAR_DEFAULT_WIDTH = 224
-export const SIDEBAR_MAX_WIDTH = 320
+export const SIDEBAR_DEFAULT_WIDTH = 237
+export const SIDEBAR_MAX_WIDTH = 360
 export const FILE_BROWSER_DEFAULT_WIDTH = '17rem'
 export const FILE_BROWSER_MIN_WIDTH = '14rem'
 export const FILE_BROWSER_MAX_WIDTH = '20rem'
 
+export const SIDEBAR_SESSIONS_PAGE_SIZE = 50
+
 const SIDEBAR_PINNED_STORAGE_KEY = 'hermes.desktop.pinnedSessions'
+const SIDEBAR_AGENTS_GROUPED_STORAGE_KEY = 'hermes.desktop.agentsGroupedByWorkspace'
 
 export const CHAT_SIDEBAR_PANE_ID = 'chat-sidebar'
 export const FILE_BROWSER_PANE_ID = 'file-browser'
@@ -42,9 +52,12 @@ export const $sidebarWidth: ReadableAtom<number> = computed($paneStates, states
 export const $pinnedSessionIds = atom(storedStringArray(SIDEBAR_PINNED_STORAGE_KEY))
 export const $sidebarPinsOpen = atom(true)
 export const $sidebarRecentsOpen = atom(true)
+export const $sidebarAgentsGrouped = atom(storedBoolean(SIDEBAR_AGENTS_GROUPED_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))
 
 export function setSidebarWidth(width: number) {
   const bounded = Math.min(SIDEBAR_MAX_WIDTH, Math.max(SIDEBAR_DEFAULT_WIDTH, width))
@@ -75,6 +88,10 @@ export function setSidebarRecentsOpen(open: boolean) {
   $sidebarRecentsOpen.set(open)
 }
 
+export function setSidebarAgentsGrouped(grouped: boolean) {
+  $sidebarAgentsGrouped.set(grouped)
+}
+
 export function setSidebarResizing(resizing: boolean) {
   $isSidebarResizing.set(resizing)
 }
@@ -96,3 +113,28 @@ export function unpinSession(sessionId: string) {
     $pinnedSessionIds.set(next)
   }
 }
+
+export function reorderPinnedSession(sessionId: string, targetIndex: number) {
+  const prev = $pinnedSessionIds.get()
+
+  if (!prev.includes(sessionId)) {
+    return
+  }
+
+  const next = insertUniqueId(prev, sessionId, targetIndex)
+
+  if (!arraysEqual(prev, next)) {
+    $pinnedSessionIds.set(next)
+  }
+}
+
+export function bumpSessionsLimit(step: number = SIDEBAR_SESSIONS_PAGE_SIZE) {
+  const safeStep = Math.max(1, Math.floor(step))
+  $sessionsLimit.set($sessionsLimit.get() + safeStep)
+}
+
+export function resetSessionsLimit() {
+  if ($sessionsLimit.get() !== SIDEBAR_SESSIONS_PAGE_SIZE) {
+    $sessionsLimit.set(SIDEBAR_SESSIONS_PAGE_SIZE)
+  }
+}
diff --git a/apps/desktop/src/store/onboarding.ts b/apps/desktop/src/store/onboarding.ts
index ae2b7e7a8cd..642ab13ab1d 100644
--- a/apps/desktop/src/store/onboarding.ts
+++ b/apps/desktop/src/store/onboarding.ts
@@ -164,7 +164,9 @@ async function fetchProviderDefaultModel(
   // returned (model.options orders by recency / authenticated state, so
   // the just-authenticated provider is usually first anyway).
   const lower = preferredSlugs.map(s => s.toLowerCase())
-  const matched = providers.find((p: ModelOptionProvider) => lower.includes(String(p.slug).toLowerCase())) ?? providers[0]
+
+  const matched =
+    providers.find((p: ModelOptionProvider) => lower.includes(String(p.slug).toLowerCase())) ?? providers[0]
 
   const models = matched.models ?? []
 
diff --git a/apps/desktop/src/store/preview.ts b/apps/desktop/src/store/preview.ts
index 461cbc9a14d..3fff6a24086 100644
--- a/apps/desktop/src/store/preview.ts
+++ b/apps/desktop/src/store/preview.ts
@@ -400,6 +400,15 @@ export function closeRightRailTab(tabId: RightRailTabId) {
 
 export const closeActiveRightRailTab = () => closeRightRailTab($rightRailActiveTabId.get())
 
+/** Dismisses the active preview + every file tab so the rail pane unmounts. */
+export function closeRightRail() {
+  if ($previewTarget.get()) {
+    dismissPreviewTarget()
+  }
+
+  $filePreviewTabs.set([])
+}
+
 export function clearSessionPreviewRegistry() {
   $sessionPreviewRegistry.set({})
   setPreviewTarget(null)
diff --git a/apps/desktop/src/store/session.ts b/apps/desktop/src/store/session.ts
index 52af1fe3ea9..6cd26f6b95c 100644
--- a/apps/desktop/src/store/session.ts
+++ b/apps/desktop/src/store/session.ts
@@ -19,6 +19,7 @@ function updateAtom<T>(store: AppAtom<T>, next: Updater<T>) {
 export const $connection = atom<HermesConnection | null>(null)
 export const $gatewayState = atom('idle')
 export const $sessions = atom<SessionInfo[]>([])
+export const $sessionsTotal = atom<number>(0)
 export const $sessionsLoading = atom(true)
 export const $workingSessionIds = atom<string[]>([])
 export const $activeSessionId = atom<string | null>(null)
@@ -52,6 +53,7 @@ export const $modelPickerOpen = atom(false)
 export const setConnection = (next: Updater<HermesConnection | null>) => updateAtom($connection, next)
 export const setGatewayState = (next: Updater<string>) => updateAtom($gatewayState, next)
 export const setSessions = (next: Updater<SessionInfo[]>) => updateAtom($sessions, next)
+export const setSessionsTotal = (next: Updater<number>) => updateAtom($sessionsTotal, next)
 export const setSessionsLoading = (next: Updater<boolean>) => updateAtom($sessionsLoading, next)
 export const setWorkingSessionIds = (next: Updater<string[]>) => updateAtom($workingSessionIds, next)
 export const setActiveSessionId = (next: Updater<string | null>) => updateAtom($activeSessionId, next)
diff --git a/apps/desktop/src/store/subagents.test.ts b/apps/desktop/src/store/subagents.test.ts
index 4d4d079aebe..6dee494e2ef 100644
--- a/apps/desktop/src/store/subagents.test.ts
+++ b/apps/desktop/src/store/subagents.test.ts
@@ -54,7 +54,13 @@ describe('subagent store', () => {
     )
     upsertSubagent(
       's1',
-      { status: 'running', subagent_id: 'a1', task_index: 0, tool_name: 'search_files', tool_preview: 'pattern=hermes' },
+      {
+        status: 'running',
+        subagent_id: 'a1',
+        task_index: 0,
+        tool_name: 'search_files',
+        tool_preview: 'pattern=hermes'
+      },
       false,
       'subagent.tool'
     )
diff --git a/apps/desktop/src/store/subagents.ts b/apps/desktop/src/store/subagents.ts
index db01e2db35d..bc94794c0e0 100644
--- a/apps/desktop/src/store/subagents.ts
+++ b/apps/desktop/src/store/subagents.ts
@@ -56,15 +56,24 @@ const asStatus = (v: unknown): SubagentStatus =>
 
 const compact = (text: string, max = PREVIEW_MAX) => {
   const line = text.replace(/\s+/g, ' ').trim()
-  if (!line) return ''
+
+  if (!line) {
+    return ''
+  }
+
   return line.length > max ? `${line.slice(0, max - 1)}…` : line
 }
 
 const toolLabel = (name: string) =>
-  name.split('_').filter(Boolean).map(p => p[0]!.toUpperCase() + p.slice(1)).join(' ') || name
+  name
+    .split('_')
+    .filter(Boolean)
+    .map(p => p[0]!.toUpperCase() + p.slice(1))
+    .join(' ') || name
 
 const formatTool = (name: string, preview = '') => {
   const snippet = compact(preview, TOOL_PREVIEW_MAX)
+
   return snippet ? `${toolLabel(name)}("${snippet}")` : toolLabel(name)
 }
 
@@ -90,7 +99,10 @@ const idOf = (p: SubagentPayload) =>
 
 const appendStream = (stream: SubagentStreamEntry[], entry: SubagentStreamEntry) => {
   const last = stream.at(-1)
-  if (last?.kind === entry.kind && last.text === entry.text && last.isError === entry.isError) return stream
+
+  if (last?.kind === entry.kind && last.text === entry.text && last.isError === entry.isError) {
+    return stream
+  }
 
   return [...stream, entry].slice(-MAX_STREAM)
 }
@@ -108,19 +120,29 @@ function streamFromPayload(
 
   for (const tail of asTail(payload.output_tail)) {
     const line = tail.tool ? formatTool(tail.tool, tail.preview ?? '') : compact(tail.preview ?? '')
-    if (line) out.push({ at, isError: tail.isError, kind: tail.tool ? 'tool' : 'progress', text: line })
+
+    if (line) {
+      out.push({ at, isError: tail.isError, kind: tail.tool ? 'tool' : 'progress', text: line })
+    }
   }
 
-  if (tool) out.push({ at, isError: !!payload.error, kind: 'tool', text: formatTool(tool, preview) })
+  if (tool) {
+    out.push({ at, isError: !!payload.error, kind: 'tool', text: formatTool(tool, preview) })
+  }
 
-  if (eventType === 'subagent.progress' && text)
+  if (eventType === 'subagent.progress' && text) {
     out.push({ at, isError: !!payload.error, kind: 'progress', text })
+  }
 
-  if (eventType === 'subagent.thinking' && text) out.push({ at, kind: 'thinking', text })
+  if (eventType === 'subagent.thinking' && text) {
+    out.push({ at, kind: 'thinking', text })
+  }
 
   const summary = compact(str(payload.summary) || str(payload.text))
-  if (TERMINAL.has(status) && summary)
+
+  if (TERMINAL.has(status) && summary) {
     out.push({ at, isError: status === 'failed', kind: 'summary', text: summary })
+  }
 
   return out
 }
@@ -158,7 +180,10 @@ function toProgress(payload: SubagentPayload, prev: SubagentProgress | undefined
 
 export function clearSessionSubagents(sid: string) {
   const map = $subagentsBySession.get()
-  if (!(sid in map)) return
+
+  if (!(sid in map)) {
+    return
+  }
 
   const { [sid]: _drop, ...rest } = map
   $subagentsBySession.set(rest)
@@ -167,10 +192,16 @@ export function clearSessionSubagents(sid: string) {
 export function pruneDelegateFallbackSubagents(sid: string) {
   const map = $subagentsBySession.get()
   const list = map[sid]
-  if (!list?.length) return
+
+  if (!list?.length) {
+    return
+  }
 
   const next = list.filter(item => !item.id.startsWith('delegate-tool:'))
-  if (next.length === list.length) return
+
+  if (next.length === list.length) {
+    return
+  }
 
   $subagentsBySession.set({ ...map, [sid]: next })
 }
@@ -180,10 +211,16 @@ export function upsertSubagent(sid: string, payload: SubagentPayload, createIfMi
   const list = map[sid] ?? []
   const id = idOf(payload)
   const idx = list.findIndex(item => item.id === id)
-  if (idx < 0 && !createIfMissing) return
+
+  if (idx < 0 && !createIfMissing) {
+    return
+  }
 
   const prev = idx >= 0 ? list[idx] : undefined
-  if (prev && TERMINAL.has(prev.status)) return
+
+  if (prev && TERMINAL.has(prev.status)) {
+    return
+  }
 
   const next = toProgress(payload, prev, eventType)
   const nextList = idx >= 0 ? list.map(item => (item.id === id ? next : item)) : [...list, next]
@@ -193,17 +230,26 @@ export function upsertSubagent(sid: string, payload: SubagentPayload, createIfMi
 
 export function buildSubagentTree(items: readonly SubagentProgress[]): SubagentNode[] {
   const nodes = new Map<string, SubagentNode>()
-  for (const item of items) nodes.set(item.id, { ...item, children: [] })
+
+  for (const item of items) {
+    nodes.set(item.id, { ...item, children: [] })
+  }
 
   const roots: SubagentNode[] = []
+
   for (const node of nodes.values()) {
     const parent = node.parentId ? nodes.get(node.parentId) : null
-    if (parent) parent.children.push(node)
-    else roots.push(node)
+
+    if (parent) {
+      parent.children.push(node)
+    } else {
+      roots.push(node)
+    }
   }
 
   const sort = (a: SubagentNode, b: SubagentNode) =>
     a.startedAt - b.startedAt || a.taskIndex - b.taskIndex || a.goal.localeCompare(b.goal)
+
   const walk = (node: SubagentNode) => node.children.sort(sort).forEach(walk)
   roots.sort(sort).forEach(walk)
 
diff --git a/apps/desktop/src/styles.css b/apps/desktop/src/styles.css
index 0d059e3ab88..33090db769d 100644
--- a/apps/desktop/src/styles.css
+++ b/apps/desktop/src/styles.css
@@ -2,6 +2,7 @@
 @plugin '@tailwindcss/typography';
 @import 'tw-shimmer';
 @import 'katex/dist/katex.min.css';
+@import '@vscode/codicons/dist/codicon.css';
 @custom-variant dark (&:is(.dark *));
 
 @font-face {
@@ -60,87 +61,243 @@
   --color-sidebar: var(--sidebar);
 
   --shadow-ink: var(--dt-foreground);
+  --shadow-xs: 0 0.0625rem 0.125rem color-mix(in srgb, #000 5%, transparent);
+  --shadow-sm:
+    0 0 0 0.0625rem color-mix(in srgb, var(--dt-foreground) 6%, transparent),
+    0 0.125rem 0.5rem color-mix(in srgb, #000 4%, transparent);
+  --shadow-md:
+    0 0 0 0.0625rem color-mix(in srgb, var(--dt-foreground) 8%, transparent),
+    0 0.25rem 1rem color-mix(in srgb, #000 8%, transparent),
+    0 1rem 2rem -1.5rem color-mix(in srgb, #000 18%, transparent);
+  --shadow-lg:
+    inset 0 0.0625rem 0 color-mix(in srgb, #fff 28%, transparent),
+    0 0 0 0.0625rem color-mix(in srgb, var(--dt-foreground) 8%, transparent),
+    0 0.75rem 2rem color-mix(in srgb, #000 12%, transparent);
   --shadow-header:
-    0 0.5rem 0.875rem -0.375rem color-mix(in srgb, var(--dt-background) 96%, transparent),
-    0 1.25rem 2rem -0.875rem color-mix(in srgb, var(--dt-background) 82%, transparent),
-    0 2rem 3rem -1.5rem color-mix(in srgb, var(--dt-background) 55%, transparent);
+    0 0.0625rem 0 color-mix(in srgb, var(--dt-foreground) 7%, transparent),
+    0 0.625rem 1.5rem -1.25rem color-mix(in srgb, #000 16%, transparent);
   --shadow-composer:
-    0 0 0 0.0625rem color-mix(in srgb, var(--shadow-ink) 4%, transparent),
-    0 0.0625rem 0.25rem color-mix(in srgb, var(--shadow-ink) 3%, transparent);
+    0 0.0625rem 0.125rem color-mix(in srgb, #000 5%, transparent);
   --shadow-composer-focus:
-    0 0 0 0.125rem color-mix(in srgb, var(--dt-composer-ring) calc(14% * var(--composer-ring-strength)), transparent),
-    0 0 0 0.0625rem color-mix(in srgb, var(--dt-composer-ring) calc(26% * var(--composer-ring-strength)), transparent),
-    0 0.1875rem 0.625rem color-mix(in srgb, var(--shadow-ink) 4%, transparent);
+    0 0 0 0.125rem color-mix(in srgb, var(--dt-composer-ring) calc(10% * var(--composer-ring-strength)), transparent),
+    0 0 0 0.0625rem color-mix(in srgb, var(--dt-composer-ring) calc(22% * var(--composer-ring-strength)), transparent),
+    0 0.25rem 0.875rem color-mix(in srgb, #000 8%, transparent),
+    0 0.75rem 2rem -1.25rem color-mix(in srgb, #000 14%, transparent);
 }
 
 @layer base {
   :root {
-    color-scheme: dark;
+    color-scheme: light;
 
-    --dt-background: #f7f7f7;
-    --dt-foreground: #242424;
-    --dt-card: #ffffff;
-    --dt-card-foreground: #242424;
-    --dt-muted: #f0f0ef;
-    --dt-muted-foreground: #737373;
-    --dt-popover: #ffffff;
-    --dt-popover-foreground: #242424;
-    --dt-primary: #cf806d;
-    --dt-primary-foreground: #ffffff;
-    --dt-secondary: #f1f1f0;
-    --dt-secondary-foreground: #2d2d2d;
-    --dt-accent: #eeeeed;
-    --dt-accent-foreground: #242424;
-    --dt-border: #dfdfdc;
-    --dt-input: #ddddda;
-    --dt-ring: #b97969;
-    --dt-destructive: #b94a3a;
+    --theme-foreground: #17171a;
+    --theme-primary: #0053fd;
+    --theme-secondary: color-mix(in srgb, #0053fd 7%, #ffffff);
+    --theme-accent-soft: color-mix(in srgb, #0053fd 10%, #ffffff);
+    --theme-midground: #0053fd;
+    --theme-warm: #cf806d;
+    --theme-background-seed: #f8faff;
+    --theme-sidebar-seed: #f3f7ff;
+    --theme-card-seed: #ffffff;
+    --theme-elevated-seed: #ffffff;
+    --theme-bubble-seed: color-mix(in srgb, #0053fd 6%, #ffffff);
+    --theme-neutral-chrome: #f3f3f3;
+    --theme-neutral-sidebar: #f3f3f3;
+    --theme-neutral-card: #fcfcfc;
+    --theme-mix-chrome: 92%;
+    --theme-mix-sidebar: 100%;
+    --theme-mix-card: 22%;
+    --theme-mix-elevated: 28%;
+    --theme-mix-bubble: 0%;
+    --theme-fill-primary-accent-mix: 16%;
+    --theme-fill-secondary-accent-mix: 11%;
+    --theme-fill-tertiary-accent-mix: 8%;
+    --theme-fill-quaternary-accent-mix: 5%;
+    --theme-fill-quinary-accent-mix: 3%;
+    --theme-stroke-primary-accent-mix: 24%;
+    --theme-stroke-secondary-accent-mix: 16%;
+    --theme-stroke-tertiary-accent-mix: 10%;
+    --theme-stroke-quaternary-accent-mix: 6%;
+    --theme-row-hover-accent-mix: 4%;
+    --theme-row-active-accent-mix: 8%;
+    --theme-control-hover-accent-mix: 6%;
+    --theme-control-active-accent-mix: 8%;
+
+    --ui-base: var(--theme-foreground);
+    --ui-accent: var(--theme-midground);
+    --ui-accent-secondary: var(--theme-primary);
+    --ui-warm: var(--theme-warm);
+    --ui-red: #cf2d56;
+    --ui-orange: #db704b;
+    --ui-yellow: #c08532;
+    --ui-green: #1f8a65;
+    --ui-cyan: #4c7f8c;
+    --ui-blue: #0053fd;
+    --ui-purple: #9e94d5;
+    --ui-bg-chrome: color-mix(in srgb, var(--theme-background-seed) var(--theme-mix-chrome), var(--theme-neutral-chrome));
+    --ui-bg-sidebar: color-mix(in srgb, var(--theme-sidebar-seed) var(--theme-mix-sidebar), var(--theme-neutral-sidebar));
+    --ui-bg-editor: color-mix(in srgb, var(--theme-card-seed) var(--theme-mix-card), var(--theme-neutral-card));
+    --ui-bg-elevated: color-mix(in srgb, var(--theme-elevated-seed) var(--theme-mix-elevated), var(--theme-neutral-card));
+    --ui-bg-card: color-mix(
+      in srgb,
+      var(--ui-accent) 4%,
+      color-mix(in srgb, var(--ui-base) 4%, transparent)
+    );
+    --ui-bg-input: #fcfcfc;
+    --ui-bg-primary: color-mix(
+      in srgb,
+      var(--ui-accent) var(--theme-fill-primary-accent-mix),
+      color-mix(in srgb, var(--ui-base) 10%, transparent)
+    );
+    --ui-bg-secondary: color-mix(
+      in srgb,
+      var(--ui-accent) var(--theme-fill-secondary-accent-mix),
+      color-mix(in srgb, var(--ui-base) 7%, transparent)
+    );
+    --ui-bg-tertiary: color-mix(
+      in srgb,
+      var(--ui-accent) var(--theme-fill-tertiary-accent-mix),
+      color-mix(in srgb, var(--ui-base) 5%, transparent)
+    );
+    --ui-bg-quaternary: color-mix(
+      in srgb,
+      var(--ui-accent) var(--theme-fill-quaternary-accent-mix),
+      color-mix(in srgb, var(--ui-base) 4%, transparent)
+    );
+    --ui-bg-quinary: color-mix(
+      in srgb,
+      var(--ui-accent) var(--theme-fill-quinary-accent-mix),
+      color-mix(in srgb, var(--ui-base) 3%, transparent)
+    );
+    --ui-row-hover-background: color-mix(
+      in srgb,
+      var(--ui-accent) var(--theme-row-hover-accent-mix),
+      color-mix(in srgb, var(--ui-base) 3%, transparent)
+    );
+    --ui-row-active-background: color-mix(
+      in srgb,
+      var(--ui-accent) var(--theme-row-active-accent-mix),
+      color-mix(in srgb, var(--ui-base) 5%, transparent)
+    );
+    --ui-control-hover-background: color-mix(
+      in srgb,
+      var(--ui-accent) var(--theme-control-hover-accent-mix),
+      color-mix(in srgb, var(--ui-base) 4%, transparent)
+    );
+    --ui-control-active-background: color-mix(
+      in srgb,
+      var(--ui-accent) var(--theme-control-active-accent-mix),
+      color-mix(in srgb, var(--ui-base) 5%, transparent)
+    );
+    --ui-text-primary: color-mix(in srgb, var(--ui-base) 94%, transparent);
+    --ui-text-secondary: color-mix(in srgb, var(--ui-base) 74%, transparent);
+    --ui-text-tertiary: color-mix(in srgb, var(--ui-base) 54%, transparent);
+    --ui-text-quaternary: color-mix(in srgb, var(--ui-base) 36%, transparent);
+    --ui-stroke-primary: color-mix(
+      in srgb,
+      var(--ui-accent) var(--theme-stroke-primary-accent-mix),
+      color-mix(in srgb, var(--ui-base) 10%, transparent)
+    );
+    --ui-stroke-secondary: color-mix(
+      in srgb,
+      var(--ui-accent) var(--theme-stroke-secondary-accent-mix),
+      color-mix(in srgb, var(--ui-base) 7%, transparent)
+    );
+    --ui-stroke-tertiary: color-mix(
+      in srgb,
+      var(--ui-accent) var(--theme-stroke-tertiary-accent-mix),
+      color-mix(in srgb, var(--ui-base) 5%, transparent)
+    );
+    --ui-stroke-quaternary: color-mix(
+      in srgb,
+      var(--ui-accent) var(--theme-stroke-quaternary-accent-mix),
+      color-mix(in srgb, var(--ui-base) 3%, transparent)
+    );
+    --ui-sash-hover-border: color-mix(in srgb, var(--ui-accent) 18%, var(--ui-stroke-tertiary));
+    --ui-sash-hover-background: color-mix(in srgb, var(--ui-accent) 6%, transparent);
+    --ui-surface-background: var(--ui-bg-editor);
+    --ui-sidebar-surface-background: var(--ui-bg-sidebar);
+    --ui-chat-surface-background: var(--ui-bg-chrome);
+    --ui-editor-surface-background: var(--ui-bg-chrome);
+    --ui-chat-bubble-background: color-mix(in srgb, var(--theme-bubble-seed) var(--theme-mix-bubble), var(--theme-neutral-card));
+    --ui-chat-bubble-opaque-background: var(--ui-bg-editor);
+    --ui-inline-code-background: color-mix(in srgb, #141414 5%, transparent);
+    --ui-inline-code-border: color-mix(in srgb, #141414 8%, transparent);
+    --ui-inline-code-foreground: color-mix(in srgb, #141414 88%, transparent);
+    --ui-selection-background: color-mix(in srgb, #ffd24a 55%, transparent);
+
+    --dt-background: var(--ui-bg-chrome);
+    --dt-foreground: var(--ui-text-primary);
+    --dt-card: var(--ui-bg-editor);
+    --dt-card-foreground: var(--ui-text-primary);
+    --dt-muted: var(--ui-bg-tertiary);
+    --dt-muted-foreground: var(--ui-text-tertiary);
+    --dt-popover: color-mix(in srgb, var(--ui-bg-elevated) 96%, transparent);
+    --dt-popover-foreground: var(--ui-text-primary);
+    --dt-primary: var(--theme-primary);
+    --dt-primary-foreground: #fcfcfc;
+    --dt-secondary: var(--theme-secondary);
+    --dt-secondary-foreground: var(--ui-text-secondary);
+    --dt-accent: var(--theme-accent-soft);
+    --dt-accent-foreground: var(--ui-text-primary);
+    --dt-border: var(--ui-stroke-secondary);
+    --dt-input: var(--ui-stroke-primary);
+    --dt-ring: var(--ui-stroke-primary);
+    --dt-midground: var(--theme-midground);
+    --dt-composer-ring: var(--ui-base);
+    --dt-destructive: #cf2d56;
     --dt-destructive-foreground: #ffffff;
-    --dt-sidebar-bg: #fafafa;
-    --dt-sidebar-border: #e2e2df;
-    --dt-user-bubble: #f2f2f1;
-    --dt-user-bubble-border: #dededb;
+    --dt-sidebar-bg: var(--ui-bg-sidebar);
+    --dt-sidebar-border: var(--ui-stroke-secondary);
+    --dt-user-bubble: var(--ui-chat-bubble-background);
+    --dt-user-bubble-border: var(--ui-stroke-tertiary);
 
-    --dt-font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
-    --dt-font-mono: 'SF Mono', ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace;
-    --dt-base-size: 0.875rem;
-    --dt-line-height: 1.55;
+    --dt-font-sans: 'Segoe WPC', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
+    --dt-font-mono: 'Cascadia Code', 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
+    --dt-base-size: 1rem;
+    --dt-line-height: 1.5;
     --dt-letter-spacing: 0;
     --dt-spacing-mul: 1;
 
     --radius: 0.75rem;
-    --radius-scalar: 0.2;
+    --radius-scalar: 0.6;
 
     /* Space under last message vs overlay composer — driven by the measured composer height (see composer/index.tsx). */
-    --thread-last-message-clearance: calc(var(--composer-measured-height) + 1.25rem);
+    --thread-last-message-clearance: calc(var(--composer-measured-height) + 2rem);
 
-    --composer-shell-pad-block-end: 2.5rem;
-    --message-text-indent: 1.5rem;
+    --composer-shell-pad-block-end: 0.625rem;
+    --message-text-indent: 0.75rem;
+    --conversation-text-font-size: 0.8125rem;
+    --conversation-tool-font-size: var(--conversation-text-font-size);
+    --conversation-caption-font-size: 0.75rem;
+    --conversation-line-height: 1.125rem;
+    --conversation-caption-line-height: 1rem;
+    --conversation-turn-gap: 0.375rem;
+    --file-tree-row-height: 1.375rem;
 
-    --composer-width: 88%;
-    --composer-control-size: 2rem;
-    --composer-control-primary-size: 2.125rem;
-    --composer-control-gap: 0.375rem;
-    --composer-row-gap: 0.375rem;
+    --composer-width: 48.75rem;
+    --composer-control-size: 1.75rem;
+    --composer-control-primary-size: 1.875rem;
+    --composer-control-gap: 0.25rem;
+    --composer-row-gap: 0.25rem;
     --composer-ring-strength: 1;
-    --composer-surface-pad-x: 0.625rem;
-    --composer-surface-pad-y: 0.5rem;
-    --composer-input-min-height: 2rem;
+    --composer-surface-pad-x: 0.5rem;
+    --composer-surface-pad-y: 0.3125rem;
+    --composer-input-min-height: 1.625rem;
     --composer-input-max-height: 9.375rem;
     --composer-input-inline-min-width: 8rem;
     --composer-fallback-height: 2.75rem;
     --composer-measured-height: calc(0.5rem + var(--composer-shell-pad-block-end) + var(--composer-fallback-height));
     --composer-surface-measured-height: var(--composer-fallback-height);
     --thread-viewport-height: max(
-      0px,
+      0rem,
       calc(100% - var(--composer-measured-height) + var(--composer-surface-measured-height))
     );
     --vsq: min(0.5vh, 0.5vw);
     --image-preview-max-width: 34rem;
     --image-preview-height: clamp(16.25rem, calc(var(--vsq) * 100), 26.25rem);
 
-    --sidebar-width: 14rem;
-    --chat-min-width: 24rem;
+    --sidebar-width: 14.8125rem;
+    --chat-min-width: 28rem;
     --titlebar-control-size: 1.25rem;
     --titlebar-control-height: 1.375rem;
     --sidebar-content-inline-padding: 1rem;
@@ -149,27 +306,46 @@
     --sidebar-foreground: var(--dt-foreground);
     --sidebar-primary: var(--dt-primary);
     --sidebar-primary-foreground: var(--dt-primary-foreground);
-    --sidebar-accent: var(--dt-accent);
+    --sidebar-accent: var(--ui-control-active-background);
     --sidebar-accent-foreground: var(--dt-accent-foreground);
     --sidebar-border: var(--dt-sidebar-border);
     --sidebar-ring: var(--dt-ring);
-    --sidebar-edge-border: color-mix(in srgb, var(--dt-sidebar-border) 42%, transparent);
-    --chrome-action-hover: color-mix(in srgb, var(--dt-accent) 72%, transparent);
+    --sidebar-edge-border: color-mix(in srgb, var(--ui-base) 7.5%, transparent);
+    --chrome-action-hover: var(--ui-control-hover-background);
 
     --midground: var(--dt-midground);
     --background: var(--dt-background);
     --foreground: var(--dt-foreground);
 
-    --warm-glow: color-mix(in srgb, var(--dt-midground) 35%, transparent);
+    --warm-glow: color-mix(in srgb, var(--ui-warm) 32%, color-mix(in srgb, var(--ui-accent) 6%, transparent));
     /* `--noise-opacity-mul` is set per-mode by `applyTheme()`. */
     --noise-opacity-mul: 1;
     --backdrop-invert-mul: 1;
   }
 
   :root.dark {
-    --sidebar-edge-border: color-mix(in srgb, var(--dt-sidebar-border) 78%, transparent);
-    --composer-ring-strength: 1.65;
+    /* Per-mode mix knobs — overridden inline by `applyTheme()` per skin. */
+    --theme-mix-chrome: 74%;
+    --theme-mix-card: 38%;
+    --theme-mix-elevated: 46%;
+    --theme-mix-bubble: 46%;
+    --theme-neutral-chrome: #0d0d0e;
+    --theme-neutral-sidebar: #0a0a0b;
+    --theme-neutral-card: #161618;
+
+    /* Dark-only accent palette overrides. */
+    --ui-red: #e75e78;
+    --ui-green: #55a583;
+    --ui-cyan: #6f9ba6;
+
+    --sidebar-edge-border: color-mix(in srgb, var(--ui-base) 12%, transparent);
+    --composer-ring-strength: 1.3;
     --backdrop-invert-mul: 0;
+
+    --ui-inline-code-background: color-mix(in srgb, #ffffff 7%, transparent);
+    --ui-inline-code-border: color-mix(in srgb, #ffffff 10%, transparent);
+    --ui-inline-code-foreground: color-mix(in srgb, #ffffff 88%, transparent);
+    --ui-selection-background: color-mix(in srgb, #ffd24a 38%, transparent);
   }
 
   * {
@@ -189,9 +365,10 @@
 
   body {
     margin: 0;
-    background: var(--dt-background);
+    background: var(--ui-chat-surface-background);
     color: var(--dt-foreground);
     font-family: var(--dt-font-sans);
+    font-size: 0.8125rem;
     line-height: var(--dt-line-height, 1.55);
     letter-spacing: var(--dt-letter-spacing, 0);
     overflow: hidden;
@@ -205,14 +382,27 @@
     font: inherit;
   }
 
+  :where(
+    a,
+    .underline,
+    [class~='hover:underline'],
+    [class~='focus:underline'],
+    [class~='focus-visible:underline'],
+    [class~='group-hover:underline'],
+    [class~='peer-hover:underline']
+  ) {
+    text-decoration-color: color-mix(in srgb, currentColor 20%, transparent);
+    text-underline-offset: 0.25rem;
+  }
+
   *::selection {
-    background: var(--dt-midground);
-    color: var(--dt-midground-foreground);
+    background: var(--ui-selection-background);
+    color: inherit;
   }
 }
 
 .dither {
-  background: repeating-conic-gradient(currentColor 0% 25%, transparent 0% 50%) 0 0 / 2px 2px;
+  background: repeating-conic-gradient(currentColor 0% 25%, transparent 0% 50%) 0 0 / 0.125rem 0.125rem;
 }
 
 :root:not([style*='--theme-asset-bg:']) .theme-default-filler {
@@ -226,7 +416,7 @@
 @layer utilities {
   [class*='rounded-full'],
   [class*=':rounded-full'] {
-    border-radius: calc(var(--radius-scalar) * 9999px);
+    border-radius: calc(var(--radius-scalar) * 9999rem);
   }
 }
 
@@ -244,8 +434,8 @@
   --arc-c1: var(--dt-midground);
   --arc-c2: var(--dt-background);
   --arc-angle: 160deg;
-  --arc-width: 1.25px;
-  --arc-inset: -2px;
+  --arc-width: 0.078125rem;
+  --arc-inset: -0.125rem;
   --arc-duration: 2.23s;
 
   pointer-events: none;
@@ -300,6 +490,46 @@ button {
   -webkit-app-region: no-drag;
 }
 
+[data-slot='button'] {
+  box-shadow: none;
+  transition-duration: 100ms;
+}
+
+[data-slot='button'][data-variant='outline'],
+[data-slot='button'][data-variant='secondary'] {
+  border-color: var(--ui-stroke-secondary);
+  background: var(--ui-bg-tertiary);
+  color: var(--ui-text-primary);
+}
+
+[data-slot='button'][data-variant='ghost'] {
+  color: var(--ui-text-secondary);
+}
+
+[data-slot='button'][data-variant='outline']:hover,
+[data-slot='button'][data-variant='secondary']:hover,
+[data-slot='button'][data-variant='ghost']:hover {
+  background: var(--chrome-action-hover);
+  color: var(--ui-text-primary);
+}
+
+[data-slot='dropdown-menu-content'],
+[data-slot='select-content'],
+[data-slot='dialog-content'] {
+  border-color: var(--ui-stroke-secondary);
+  background: color-mix(in srgb, var(--ui-bg-elevated) 96%, transparent);
+  box-shadow: var(--shadow-md);
+  backdrop-filter: blur(0.75rem) saturate(1.08);
+  -webkit-backdrop-filter: blur(0.75rem) saturate(1.08);
+}
+
+[data-slot='dropdown-menu-item']:focus,
+[data-slot='dropdown-menu-checkbox-item']:focus,
+[data-slot='dropdown-menu-radio-item']:focus {
+  background: var(--ui-bg-tertiary);
+  color: var(--ui-text-primary);
+}
+
 input,
 textarea,
 [contenteditable]:not([contenteditable='false']),
@@ -396,7 +626,7 @@ canvas {
   .scrollbar-dt::-webkit-scrollbar-thumb,
   .scrollbar-dt *::-webkit-scrollbar-thumb {
     background: color-mix(in srgb, var(--dt-midground) 18%, transparent);
-    border-radius: 9999px;
+  border-radius: 9999rem;
     border: 0.125rem solid transparent;
     background-clip: padding-box;
   }
@@ -413,24 +643,146 @@ canvas {
   }
 }
 
-/* Last thread row with a message root — avoids composer overlap (Chromium/Electron). */
-[data-slot='aui_thread-content']
-  > :nth-last-child(
-    1
-      of
-      :is(
-        [data-slot='aui_assistant-message-root'],
-        [data-slot='aui_user-message-root'],
-        [data-slot='aui_system-message-root'],
-        [data-slot='aui_edit-composer-root'],
-        [data-slot='aui_response-loading']
-      )
-  ) {
-  margin-bottom: var(--thread-last-message-clearance);
-}
+/* Bottom clearance lives on [data-slot='aui_composer-clearance'] —
+   virtualized items unmount, so :nth-last-child can't fire reliably. */
 
 [data-slot='aui_assistant-message-content'] {
   padding-left: var(--message-text-indent);
+  font-size: var(--conversation-text-font-size);
+  line-height: 1.5;
+}
+
+[data-slot='aui_assistant-message-root'] {
+  width: 100%;
+}
+
+[data-slot='aui_assistant-message-content'] .aui-md,
+[data-slot='aui_assistant-message-content'] .aui-md :where(p, li, blockquote, table, pre) {
+  font-size: inherit;
+}
+
+/* Streamed prose hangs slightly indented from the tool/todo column so the
+   reading column reads as a "reply" within the conversation gutter. Tools,
+   todos, and thinking blocks keep the existing --message-text-indent so they
+   remain flush with the user message text above them. */
+[data-slot='aui_assistant-message-content'] > .aui-md {
+  padding-inline-start: var(--md-text-indent, 0.5rem);
+}
+
+[data-slot='aui_user-message-root'],
+[data-slot='aui_edit-composer-root'] {
+  font-size: var(--conversation-text-font-size);
+}
+
+[data-slot='aui_thread-content'] {
+  max-width: var(--composer-width);
+  padding-inline: 1.5rem;
+}
+
+[data-slot='aui_intro'] {
+  align-items: center;
+  justify-content: center;
+  padding-bottom: var(--composer-measured-height);
+  text-align: center;
+}
+
+[data-slot='aui_intro'] > div {
+  max-width: min(var(--composer-width), 82vw);
+}
+
+[data-slot='aui_intro'] p:last-child {
+  max-width: 34rem;
+  margin-inline: auto;
+  color: var(--ui-text-tertiary);
+  font-size: 0.875rem;
+  line-height: 1.45;
+}
+
+.fit-text {
+  display: flex;
+  font-size: var(--fit-text-min, 1rem);
+  container-type: inline-size;
+  --captured-length: initial;
+  --support-sentinel: var(--captured-length, 9999px);
+}
+
+.fit-text > [aria-hidden='true'] {
+  visibility: hidden;
+}
+
+.fit-text > :not([aria-hidden='true']) {
+  flex-grow: 1;
+  container-type: inline-size;
+  --captured-length: 100cqi;
+  --available-space: var(--captured-length);
+}
+
+.fit-text > :not([aria-hidden='true']) > * {
+  display: block;
+  inline-size: var(--available-space);
+  line-height: var(--fit-text-line-height, 1);
+  --support-sentinel: inherit;
+  --captured-length: 100cqi;
+  --ratio: tan(atan2(var(--available-space), var(--available-space) - var(--captured-length)));
+  --font-size: clamp(
+    var(--fit-text-min, 1em),
+    1em * var(--ratio),
+    var(--fit-text-max, infinity * 1px) - var(--support-sentinel)
+  );
+  font-size: var(--font-size);
+}
+
+@container (inline-size > 0) {
+  .fit-text > :not([aria-hidden='true']) > * {
+    white-space: nowrap;
+  }
+}
+
+@property --captured-length {
+  syntax: '<length>';
+  initial-value: 0px;
+  inherits: true;
+}
+
+@property --captured-length2 {
+  syntax: '<length>';
+  initial-value: 0px;
+  inherits: true;
+}
+
+[data-slot='composer-root'] {
+  width: min(var(--composer-width), calc(100% - 2rem));
+  padding-bottom: var(--composer-shell-pad-block-end);
+}
+
+[data-slot='composer-root'] > .pointer-events-none {
+  background: linear-gradient(
+    to bottom,
+    transparent,
+    color-mix(in srgb, var(--ui-chat-surface-background) 88%, transparent)
+  ) !important;
+}
+
+[data-slot='composer-surface'] {
+  border-color: var(--ui-stroke-secondary) !important;
+  box-shadow: var(--shadow-composer) !important;
+}
+
+[data-slot='composer-fade'] {
+  min-height: 2.375rem;
+}
+
+[data-slot='composer-rich-input'] {
+  color: var(--ui-text-primary);
+  font-size: 0.8125rem;
+}
+
+[data-slot='composer-rich-input']:empty::before {
+  color: var(--ui-text-tertiary) !important;
+}
+
+[data-slot='composer-root']:focus-within [data-slot='composer-surface'] > [aria-hidden='true'] {
+  background: var(--ui-chat-bubble-background) !important;
 }
 
 /* Tool/thinking blocks now live at message-text alignment (no leading
@@ -457,10 +809,33 @@ canvas {
   white-space: inherit;
 }
 
-[data-slot='aui_assistant-message-content'] .aui-md :where(.aui-code-header, .aui-shiki, .aui-shiki > pre) {
+/* Streamdown's adapter wraps code fences in a `data-streamdown="code-block"`
+   container with its own card chrome. We render our own <CodeCard>, so this
+   strips the upstream chrome down to a layout-only passthrough. */
+[data-slot='aui_assistant-message-content'] .aui-md [data-streamdown='code-block'] {
+  contain: none;
+  overflow: visible;
+  margin-block: 0.375rem !important;
+  padding: 0 !important;
+  gap: 0 !important;
+  border: 0 !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+  color: inherit;
+}
+
+[data-slot='aui_assistant-message-content'] .aui-md [data-streamdown='code-block']:has(.aui-prose-fence) {
+  margin-block: 0 !important;
+}
+
+[data-slot='aui_assistant-message-content'] .aui-md :not(pre) > code {
+  border: 0.0625rem solid var(--ui-inline-code-border);
+  background: var(--ui-inline-code-background);
+  color: var(--ui-inline-code-foreground);
+}
+
+[data-slot='aui_assistant-message-content'] .aui-md :where(.aui-shiki, .aui-shiki > pre) {
   margin: 0 !important;
-  margin-block-start: 0 !important;
-  margin-block-end: 0 !important;
 }
 
 [data-slot='aui_assistant-message-content'] .aui-md .aui-md-table {
@@ -478,23 +853,54 @@ canvas {
   margin-block-end: 0 !important;
 }
 
+/* Tool / thinking blocks are scaffolding around the model's reply, so we
+   keep them transparent and fade them slightly. The reading column (prose)
+   stays at full strength; scaffolding lifts back to full opacity on
+   hover/focus so it stays legible when the user actually wants to read it. */
+[data-slot='tool-block'],
+[data-slot='aui_thinking-disclosure'] {
+  background: transparent !important;
+}
+
+[data-slot='aui_assistant-message-content']
+  > :is([data-slot='tool-block'], [data-slot='aui_thinking-disclosure']) {
+  opacity: 0.67;
+  transition: opacity 120ms ease-out;
+}
+
+[data-slot='aui_assistant-message-content']
+  > :is([data-slot='tool-block'], [data-slot='aui_thinking-disclosure']):is(:hover, :focus-within) {
+  opacity: 1;
+}
+
+/* Conversation block rhythm. Consecutive tool calls stay tight so a step
+   sequence reads as one action group; the gap between any scaffolding
+   block and adjacent prose bumps up so the model's reply visually
+   separates from its scaffolding. */
 [data-slot='tool-block'] + [data-slot='tool-block'] {
-  margin-top: 0.25rem;
+  margin-top: 0.375rem;
 }
 
 [data-slot='tool-block']:has(> :nth-child(2)) + [data-slot='tool-block'] {
   margin-top: 0.625rem;
 }
 
-[data-slot='aui_assistant-message-content'] [data-slot='tool-block'] + .aui-md,
-[data-slot='aui_assistant-message-content'] .aui-md + [data-slot='tool-block'] {
-  margin-top: 0.875rem;
+[data-slot='aui_assistant-message-content']
+  :is([data-slot='tool-block'], [data-slot='aui_thinking-disclosure'])
+  + .aui-md,
+[data-slot='aui_assistant-message-content']
+  .aui-md
+  + :is([data-slot='tool-block'], [data-slot='aui_thinking-disclosure']) {
+  margin-top: 1rem;
 }
 
-/* Reasoning “Thinking” row — same column as message body, not full-bleed like tools */
-[data-slot='aui_assistant-message-content'] .aui-md + [data-slot='aui_thinking-disclosure'],
-[data-slot='aui_assistant-message-content'] [data-slot='aui_thinking-disclosure'] + .aui-md {
-  margin-top: 0.375rem;
+[data-slot='aui_assistant-message-content']
+  [data-slot='aui_thinking-disclosure']
+  + [data-slot='tool-block'],
+[data-slot='aui_assistant-message-content']
+  [data-slot='tool-block']
+  + [data-slot='aui_thinking-disclosure'] {
+  margin-top: 0.75rem;
 }
 
 [data-slot='aui_assistant-message-content'] > [data-slot='tool-block']:first-child {
@@ -514,10 +920,15 @@ canvas {
   min-height: 0;
   min-width: 0;
   flex-shrink: 0;
+  cursor: pointer;
   color: var(--color-muted-foreground);
   opacity: 0.5;
 }
 
+[data-slot='aui_msg-actions'] button:disabled {
+  cursor: default;
+}
+
 [data-slot='aui_msg-actions'] button:hover {
   background: transparent;
   color: var(--color-foreground);
@@ -552,8 +963,8 @@ canvas {
   height: 1em;
   margin-left: 0.18em;
   vertical-align: middle;
-  border-radius: 1.5px;
-  background: repeating-conic-gradient(currentColor 0% 25%, transparent 0% 50%) 0 0 / 2px 2px;
+  border-radius: 0.09375rem;
+  background: repeating-conic-gradient(currentColor 0% 25%, transparent 0% 50%) 0 0 / 0.125rem 0.125rem;
   color: color-mix(in srgb, var(--dt-foreground) 72%, transparent);
   box-shadow:
     -0.8ch 0 1.4ch 0.55em color-mix(in srgb, var(--dt-background) 80%, transparent),
diff --git a/apps/desktop/src/themes/context.tsx b/apps/desktop/src/themes/context.tsx
index d9476e40e15..4ee3282450f 100644
--- a/apps/desktop/src/themes/context.tsx
+++ b/apps/desktop/src/themes/context.tsx
@@ -148,6 +148,17 @@ function renderedModeFor(colors: DesktopThemeColors, mode: 'light' | 'dark'): 'l
 
 // ─── CSS application ────────────────────────────────────────────────────────
 
+// Per-mode mix knobs. Light/dark fallbacks live in styles.css `:root` /
+// `:root.dark`; setting them inline keeps active-skin overrides surviving
+// the boot-time paint.
+const mixesFor = (isDark: boolean): Record<string, string> => ({
+  '--theme-mix-chrome': isDark ? '74%' : '92%',
+  '--theme-mix-sidebar': '100%',
+  '--theme-mix-card': isDark ? '38%' : '22%',
+  '--theme-mix-elevated': isDark ? '46%' : '28%',
+  '--theme-mix-bubble': isDark ? '46%' : '0%'
+})
+
 function applyTheme(theme: DesktopTheme, mode: 'light' | 'dark') {
   if (typeof document === 'undefined') {
     return
@@ -157,44 +168,54 @@ function applyTheme(theme: DesktopTheme, mode: 'light' | 'dark') {
   const c = theme.colors
   const typo = { ...DEFAULT_TYPOGRAPHY, ...nousTheme.typography, ...theme.typography }
   const rendered = renderedModeFor(c, mode)
+  const isDark = rendered === 'dark'
   const midground = c.midground ?? c.ring
   const skinName = theme.name.endsWith(`-${mode}`) ? theme.name.slice(0, -mode.length - 1) : theme.name
 
   root.style.setProperty('color-scheme', rendered)
   root.dataset.hermesTheme = skinName
   root.dataset.hermesMode = rendered
-  root.classList.toggle('dark', rendered === 'dark')
+  root.classList.toggle('dark', isDark)
+
+  // Brand seeds feed every glass + shadcn token via `color-mix()` in styles.css.
+  const seeds: Record<string, string> = {
+    '--theme-foreground': c.foreground,
+    '--theme-primary': c.primary,
+    '--theme-secondary': c.secondary,
+    '--theme-accent-soft': c.accent,
+    '--theme-midground': midground,
+    '--theme-warm': c.primary,
+    '--theme-background-seed': c.background,
+    '--theme-sidebar-seed': c.sidebarBackground ?? c.background,
+    '--theme-card-seed': c.card,
+    '--theme-elevated-seed': c.popover,
+    '--theme-bubble-seed': c.userBubble ?? c.popover
+  }
+
+  // shadcn/Tailwind tokens that aren't derived from the seed chain.
+  const palette: Record<string, string> = {
+    '--dt-primary-foreground': c.primaryForeground,
+    '--dt-secondary-foreground': c.secondaryForeground,
+    '--dt-accent-foreground': c.accentForeground,
+    '--dt-border': c.border,
+    '--dt-input': c.input,
+    '--dt-ring': c.ring,
+    '--dt-muted': c.muted,
+    '--dt-midground-foreground': c.midgroundForeground ?? readableOn(midground),
+    '--dt-composer-ring': c.composerRing ?? midground,
+    '--dt-destructive': c.destructive,
+    '--dt-destructive-foreground': c.destructiveForeground,
+    '--dt-sidebar-border': c.sidebarBorder ?? c.border,
+    '--dt-user-bubble-border': c.userBubbleBorder ?? c.border,
+    '--dt-font-sans': typo.fontSans,
+    '--dt-font-mono': typo.fontMono,
+    '--noise-opacity-mul': isDark ? 'calc(0.04 / 0.21)' : 'calc(0.34 / 0.21)'
+  }
+
+  for (const [k, v] of Object.entries({ ...seeds, ...mixesFor(isDark), ...palette })) {
+    root.style.setProperty(k, v)
+  }
 
-  const set = (k: string, v: string) => root.style.setProperty(k, v)
-  set('--dt-background', c.background)
-  set('--dt-foreground', c.foreground)
-  set('--dt-card', c.card)
-  set('--dt-card-foreground', c.cardForeground)
-  set('--dt-muted', c.muted)
-  set('--dt-muted-foreground', c.mutedForeground)
-  set('--dt-popover', c.popover)
-  set('--dt-popover-foreground', c.popoverForeground)
-  set('--dt-primary', c.primary)
-  set('--dt-primary-foreground', c.primaryForeground)
-  set('--dt-secondary', c.secondary)
-  set('--dt-secondary-foreground', c.secondaryForeground)
-  set('--dt-accent', c.accent)
-  set('--dt-accent-foreground', c.accentForeground)
-  set('--dt-border', c.border)
-  set('--dt-input', c.input)
-  set('--dt-ring', c.ring)
-  set('--dt-midground', midground)
-  set('--dt-midground-foreground', c.midgroundForeground ?? readableOn(midground))
-  set('--dt-composer-ring', c.composerRing ?? midground)
-  set('--dt-destructive', c.destructive)
-  set('--dt-destructive-foreground', c.destructiveForeground)
-  set('--dt-sidebar-bg', c.sidebarBackground ?? c.background)
-  set('--dt-sidebar-border', c.sidebarBorder ?? c.border)
-  set('--dt-user-bubble', c.userBubble ?? c.muted)
-  set('--dt-user-bubble-border', c.userBubbleBorder ?? c.border)
-  set('--dt-font-sans', typo.fontSans)
-  set('--dt-font-mono', typo.fontMono)
-  set('--noise-opacity-mul', rendered === 'dark' ? 'calc(0.04 / 0.21)' : 'calc(0.34 / 0.21)')
   window.hermesDesktop?.setTitleBarTheme?.({
     background: c.background,
     foreground: c.foreground
diff --git a/apps/desktop/src/themes/presets.ts b/apps/desktop/src/themes/presets.ts
index 7ab01d89052..170b5456e57 100644
--- a/apps/desktop/src/themes/presets.ts
+++ b/apps/desktop/src/themes/presets.ts
@@ -6,10 +6,9 @@
 import type { DesktopTheme, DesktopThemeTypography } from './types'
 
 const SYSTEM_SANS =
-  'ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif'
+  '"Segoe WPC", "Segoe UI", -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif'
 
-const SYSTEM_MONO =
-  'ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Monaco, Consolas, "Liberation Mono", monospace'
+const SYSTEM_MONO = '"Cascadia Code", "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Monaco, Consolas, monospace'
 
 export const DEFAULT_TYPOGRAPHY: DesktopThemeTypography = { fontSans: SYSTEM_SANS, fontMono: SYSTEM_MONO }
 
@@ -17,43 +16,44 @@ const NOUS_BLUE = '#0053FD'
 const PSYCHE_BLUE = '#1540B1'
 const PSYCHE_WARM = '#FFE6CB'
 
-const tint = (pct: number) => `color-mix(in srgb, ${NOUS_BLUE} ${pct}%, #FFFFFF)`
-const tintTransparent = (pct: number) => `color-mix(in srgb, ${NOUS_BLUE} ${pct}%, transparent)`
+const nousTint = (pct: number) => `color-mix(in srgb, ${NOUS_BLUE} ${pct}%, #FFFFFF)`
+const nousTintTransparent = (pct: number) => `color-mix(in srgb, ${NOUS_BLUE} ${pct}%, transparent)`
 
 /**
- * Nous — canonical Hermes/Nous identity. Replaces the historical trio of
- * `nous-light`, `default`, and `gold`. Light = bright Nous blue on white;
- * dark = Hermes lens-blue with cream foreground.
+ * Nous — canonical Hermes desktop identity. The palette keeps the current
+ * glass geometry neutral, then lets the old bb/gui blue and psyche cream
+ * return as accent seeds.
  */
 export const nousTheme: DesktopTheme = {
   name: 'nous',
   label: 'Nous',
-  description: 'Bright Nous blue in light mode, Hermes blue in dark mode',
+  description: 'Glass neutrals with Nous blue accents',
   colors: {
-    background: '#FFFFFF',
+    background: '#F8FAFF',
     foreground: '#17171A',
     card: '#FFFFFF',
     cardForeground: '#17171A',
-    muted: tint(5),
+    muted: nousTint(5),
     mutedForeground: '#666678',
     popover: '#FFFFFF',
     popoverForeground: '#17171A',
     primary: NOUS_BLUE,
-    primaryForeground: '#FFFFFF',
-    secondary: tint(7),
+    primaryForeground: '#FCFCFC',
+    secondary: nousTint(7),
     secondaryForeground: '#242432',
-    accent: tint(10),
+    accent: nousTint(10),
     accentForeground: '#202030',
-    border: tintTransparent(22),
-    input: tintTransparent(30),
+    border: nousTintTransparent(22),
+    input: nousTintTransparent(30),
     ring: NOUS_BLUE,
     midground: NOUS_BLUE,
+    composerRing: NOUS_BLUE,
     destructive: '#C72E4D',
     destructiveForeground: '#FFFFFF',
-    sidebarBackground: tint(2.5),
-    sidebarBorder: tintTransparent(18),
-    userBubble: tint(6),
-    userBubbleBorder: tintTransparent(24)
+    sidebarBackground: '#F3F7FF',
+    sidebarBorder: nousTintTransparent(18),
+    userBubble: nousTint(6),
+    userBubbleBorder: nousTintTransparent(24)
   },
   darkColors: {
     background: '#0D2F86',
diff --git a/apps/desktop/src/types/hermes.ts b/apps/desktop/src/types/hermes.ts
index b72f5d6e88c..ddc7b152391 100644
--- a/apps/desktop/src/types/hermes.ts
+++ b/apps/desktop/src/types/hermes.ts
@@ -222,6 +222,7 @@ export interface SessionCreateResponse {
 }
 
 export interface SessionInfo {
+  cwd?: null | string
   ended_at: null | number
   id: string
   input_tokens: number
diff --git a/apps/desktop/vite.config.ts b/apps/desktop/vite.config.ts
index 364dbf2b7a2..ec5784dc71e 100644
--- a/apps/desktop/vite.config.ts
+++ b/apps/desktop/vite.config.ts
@@ -18,8 +18,13 @@ export default defineConfig({
   resolve: {
     alias: {
       '@': path.resolve(__dirname, './src'),
-      '@hermes/shared': path.resolve(__dirname, '../shared/src')
-    }
+      '@hermes/shared': path.resolve(__dirname, '../shared/src'),
+      react: path.resolve(__dirname, '../../node_modules/react'),
+      'react-dom': path.resolve(__dirname, '../../node_modules/react-dom'),
+      'react/jsx-dev-runtime': path.resolve(__dirname, '../../node_modules/react/jsx-dev-runtime.js'),
+      'react/jsx-runtime': path.resolve(__dirname, '../../node_modules/react/jsx-runtime.js')
+    },
+    dedupe: ['react', 'react-dom']
   },
   server: {
     host: '127.0.0.1',
diff --git a/hermes_cli/web_server.py b/hermes_cli/web_server.py
index a9161f900cd..0f3f1e8f4cd 100644
--- a/hermes_cli/web_server.py
+++ b/hermes_cli/web_server.py
@@ -1055,6 +1055,10 @@ async def get_sessions(limit: int = 20, offset: int = 0, min_messages: int = 0):
             total = db.session_count(min_message_count=min_message_count)
             now = time.time()
             for s in sessions:
+                # Return only persisted per-session cwd from SessionDB.
+                # Falling back to process-level terminal.cwd causes historical
+                # sessions to "teleport" between workspaces as config changes.
+                s["cwd"] = s.get("cwd") or None
                 s["is_active"] = (
                     s.get("ended_at") is None
                     and (now - s.get("last_active", s.get("started_at", 0))) < 300
diff --git a/hermes_state.py b/hermes_state.py
index ba3b2d51522..14f40dd5ddd 100644
--- a/hermes_state.py
+++ b/hermes_state.py
@@ -205,6 +205,7 @@ CREATE TABLE IF NOT EXISTS sessions (
     cache_read_tokens INTEGER DEFAULT 0,
     cache_write_tokens INTEGER DEFAULT 0,
     reasoning_tokens INTEGER DEFAULT 0,
+    cwd TEXT,
     billing_provider TEXT,
     billing_base_url TEXT,
     billing_mode TEXT,
@@ -690,13 +691,14 @@ class SessionDB:
         system_prompt: str = None,
         user_id: str = None,
         parent_session_id: str = None,
+        cwd: str = None,
     ) -> None:
         """Shared INSERT OR IGNORE for session rows."""
         def _do(conn):
             conn.execute(
                 """INSERT OR IGNORE INTO sessions (id, source, user_id, model, model_config,
-                   system_prompt, parent_session_id, started_at)
-                   VALUES (?, ?, ?, ?, ?, ?, ?, ?)""",
+                   system_prompt, parent_session_id, cwd, started_at)
+                   VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)""",
                 (
                     session_id,
                     source,
@@ -705,6 +707,7 @@ class SessionDB:
                     json.dumps(model_config) if model_config else None,
                     system_prompt,
                     parent_session_id,
+                    cwd,
                     time.time(),
                 ),
             )
@@ -741,6 +744,16 @@ class SessionDB:
             )
         self._execute_write(_do)
 
+    def update_session_cwd(self, session_id: str, cwd: str) -> None:
+        """Persist the session working directory when a frontend knows it."""
+        if not session_id or not cwd:
+            return
+
+        def _do(conn):
+            conn.execute("UPDATE sessions SET cwd = ? WHERE id = ?", (cwd, session_id))
+
+        self._execute_write(_do)
+
     def update_system_prompt(self, session_id: str, system_prompt: str) -> None:
         """Store the full assembled system prompt snapshot."""
         def _do(conn):
@@ -1343,7 +1356,7 @@ class SessionDB:
                 for key in (
                     "id", "ended_at", "end_reason", "message_count",
                     "tool_call_count", "title", "last_active", "preview",
-                    "model", "system_prompt",
+                    "model", "system_prompt", "cwd",
                 ):
                     if key in tip_row:
                         merged[key] = tip_row[key]
diff --git a/package-lock.json b/package-lock.json
index b099032877a..162e16566f2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -70,7 +70,11 @@
         "@assistant-ui/react-streamdown": "^0.1.11",
         "@audiowave/react": "^0.6.2",
         "@chenglou/pretext": "^0.0.6",
+        "@dnd-kit/core": "^6.3.1",
+        "@dnd-kit/sortable": "^10.0.0",
+        "@dnd-kit/utilities": "^3.2.2",
         "@hermes/shared": "file:../shared",
+        "@homebridge/node-pty-prebuilt-multiarch": "^0.13.1",
         "@nanostores/react": "^1.1.0",
         "@nous-research/ui": "^0.13.0",
         "@radix-ui/react-slot": "^1.2.4",
@@ -79,6 +83,12 @@
         "@tailwindcss/typography": "^0.5.19",
         "@tailwindcss/vite": "^4.2.4",
         "@tanstack/react-query": "^5.100.6",
+        "@tanstack/react-virtual": "^3.13.24",
+        "@vscode/codicons": "^0.0.45",
+        "@xterm/addon-fit": "^0.11.0",
+        "@xterm/addon-unicode11": "^0.9.0",
+        "@xterm/addon-web-links": "^0.12.0",
+        "@xterm/xterm": "^6.0.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "cmdk": "^1.1.1",
@@ -87,7 +97,6 @@
         "ignore": "^7.0.5",
         "katex": "^0.16.45",
         "leva": "^0.10.1",
-        "lucide-react": "^0.577.0",
         "motion": "^12.38.0",
         "nanostores": "^1.3.0",
         "radix-ui": "^1.4.3",
@@ -105,7 +114,6 @@
         "unicode-animations": "^1.0.3",
         "unified": "^11.0.5",
         "unist-util-visit-parents": "^6.0.2",
-        "use-stick-to-bottom": "^1.1.4",
         "vfile": "^6.0.3",
         "web-haptics": "^0.0.6"
       },
@@ -254,7 +262,6 @@
       "integrity": "sha512-rZuUu9j6J5uotLDs+cAA4O5H4K1SfPliUlQwqa6YEwSrWDZzP4rhm00oJR5snMewjxF5V/K3D4kctsUTsIU9Mw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "lightningcss": "^1.32.0",
         "picomatch": "^4.0.4",
@@ -468,7 +475,6 @@
       "resolved": "https://registry.npmjs.org/@assistant-ui/react/-/react-0.12.28.tgz",
       "integrity": "sha512-czjpexLK1lKnNDNM1YMJi8SufeKUWBICqiVUtiHMV+86PYGCwJykOZKkchI8MVbSQ62xZ8A1LfPO5W2IDjed3A==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@assistant-ui/core": "^0.1.17",
         "@assistant-ui/store": "^0.2.9",
@@ -545,7 +551,6 @@
       "resolved": "https://registry.npmjs.org/@assistant-ui/store/-/store-0.2.9.tgz",
       "integrity": "sha512-EDd6yCfirb2OsAKoTo7HeMtqPG+1cqVlNXOzUsho35ZF3O1XQ2CyEY4iUbdhj3HfmWeZo7rmfhvbaYQVEqAfeA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "use-effect-event": "^2.0.3"
       },
@@ -565,7 +570,6 @@
       "resolved": "https://registry.npmjs.org/@assistant-ui/tap/-/tap-0.5.10.tgz",
       "integrity": "sha512-sBHTf+q1geRyu5l4gJJp2hk6ZxwhHZHj39ixjC9ARADuIYedYv1B8bCNS82eTC/COpD1xe86mzvT/+HwIsO9WA==",
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "@types/react": "*",
         "react": "^18 || ^19"
@@ -629,7 +633,6 @@
       "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.0",
         "@babel/generator": "^7.29.0",
@@ -1232,7 +1235,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=20.19.0"
       },
@@ -1281,7 +1283,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=20.19.0"
       }
@@ -1304,6 +1305,55 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/@dnd-kit/accessibility": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/accessibility/-/accessibility-3.1.1.tgz",
+      "integrity": "sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/core": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.3.1.tgz",
+      "integrity": "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==",
+      "dependencies": {
+        "@dnd-kit/accessibility": "^3.1.1",
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/sortable": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/sortable/-/sortable-10.0.0.tgz",
+      "integrity": "sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg==",
+      "dependencies": {
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@dnd-kit/core": "^6.3.0",
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/utilities": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.2.2.tgz",
+      "integrity": "sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/@electron/asar": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/@electron/asar/-/asar-3.4.1.tgz",
@@ -2591,6 +2641,24 @@
       "resolved": "apps/shared",
       "link": true
     },
+    "node_modules/@homebridge/node-pty-prebuilt-multiarch": {
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/@homebridge/node-pty-prebuilt-multiarch/-/node-pty-prebuilt-multiarch-0.13.1.tgz",
+      "integrity": "sha512-ccQ60nMcbEGrQh0U9E6x0ajW9qJNeazpcM/9CH6J8leyNtJgb+gu24WTBAfBUVeO486ZhscnaxLEITI2HXwhow==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "node-addon-api": "^7.1.0",
+        "prebuild-install": "^7.1.2"
+      },
+      "engines": {
+        "node": ">=18.0.0 <25.0.0"
+      }
+    },
+    "node_modules/@homebridge/node-pty-prebuilt-multiarch/node_modules/node-addon-api": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
+      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ=="
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.2",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.2.tgz",
@@ -2906,7 +2974,6 @@
       "resolved": "https://registry.npmjs.org/@observablehq/plot/-/plot-0.6.17.tgz",
       "integrity": "sha512-/qaXP/7mc4MUS0s4cPPFASDRjtsWp85/TbfsciqDgU1HwYixbSbbytNuInD8AcTYC3xaxACgVX06agdfQy9W+g==",
       "license": "ISC",
-      "peer": true,
       "dependencies": {
         "d3": "^7.9.0",
         "interval-tree-1d": "^1.0.0",
@@ -2921,7 +2988,6 @@
       "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-1.9.1.tgz",
       "integrity": "sha512-gLyJlPHPZYdAk1JENA9LeHejZe1Ti77/pTeFm/nMXmQH/HFZlcS/O2XJB+L8fkbrNSqhdtlvjBVjxwUYanNH5Q==",
       "license": "Apache-2.0",
-      "peer": true,
       "engines": {
         "node": ">=8.0.0"
       }
@@ -6503,7 +6569,6 @@
       "resolved": "https://registry.npmjs.org/@react-three/fiber/-/fiber-9.6.1.tgz",
       "integrity": "sha512-zF0rsKcVYpcJwbFEnv2HkHX9cvOEgsfQo/X8lwmR2dn13S4qEQJXir9fxf5js2LQFoXqxOY7MDkOkYx2uZ4gSg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.17.8",
         "@types/webxr": "*",
@@ -7292,7 +7357,6 @@
       "resolved": "https://registry.npmjs.org/@streamdown/code/-/code-1.1.1.tgz",
       "integrity": "sha512-i7HTNuDgZWb+VdrNVOam9gQhIc5MSSDXKWXgbUrn/4vSRaSMM+Rtl10MQj4wLWPNpF7p80waJsAqFP8HZfb0Jg==",
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "shiki": "^3.19.0"
       },
@@ -7382,7 +7446,6 @@
       "resolved": "https://registry.npmjs.org/@streamdown/math/-/math-1.0.2.tgz",
       "integrity": "sha512-r8Ur9/lBuFnzZAFdEWrLUF2s/gRwRRRwruqltdZibyjbCBnuW7SJbFm26nXqvpJPW/gzpBUMrBVBzd88z05D5g==",
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "katex": "^0.16.27",
         "rehype-katex": "^7.0.1",
@@ -7783,6 +7846,31 @@
         "react": "^18 || ^19"
       }
     },
+    "node_modules/@tanstack/react-virtual": {
+      "version": "3.13.24",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.13.24.tgz",
+      "integrity": "sha512-aIJvz5OSkhNIhZIpYivrxrPTKYsjW9Uzy+sP/mx0S3sev2HyvPb7xmjbYvokzEpfgYHy/HjzJ2zFAETuUfgCpg==",
+      "dependencies": {
+        "@tanstack/virtual-core": "3.14.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@tanstack/virtual-core": {
+      "version": "3.14.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.14.0.tgz",
+      "integrity": "sha512-JLANqGy/D6k4Ujmh8Tr25lGimuOXNiaVyXaCAZS0W+1390sADdGnyUdSWNIfd49gebtIxGMij4IktRVzrdr12Q==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@testing-library/dom": {
       "version": "10.4.1",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz",
@@ -7848,7 +7936,8 @@
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
       "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
@@ -8879,6 +8968,11 @@
         "url": "https://opencollective.com/vitest"
       }
     },
+    "node_modules/@vscode/codicons": {
+      "version": "0.0.45",
+      "resolved": "https://registry.npmjs.org/@vscode/codicons/-/codicons-0.0.45.tgz",
+      "integrity": "sha512-1KAZ7XCMagp5Gdrlr4bbbcAqgcIL623iO1wW6rfcSVGAVUQvR0WP7bQx1SbJ11gmV3fdQTSEFIJQ/5C+HuVasw=="
+    },
     "node_modules/@xmldom/xmldom": {
       "version": "0.8.13",
       "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.13.tgz",
@@ -8892,20 +8986,17 @@
     "node_modules/@xterm/addon-fit": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@xterm/addon-fit/-/addon-fit-0.11.0.tgz",
-      "integrity": "sha512-jYcgT6xtVYhnhgxh3QgYDnnNMYTcf8ElbxxFzX0IZo+vabQqSPAjC3c1wJrKB5E19VwQei89QCiZZP86DCPF7g==",
-      "license": "MIT"
+      "integrity": "sha512-jYcgT6xtVYhnhgxh3QgYDnnNMYTcf8ElbxxFzX0IZo+vabQqSPAjC3c1wJrKB5E19VwQei89QCiZZP86DCPF7g=="
     },
     "node_modules/@xterm/addon-unicode11": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/@xterm/addon-unicode11/-/addon-unicode11-0.9.0.tgz",
-      "integrity": "sha512-FxDnYcyuXhNl+XSqGZL/t0U9eiNb/q3EWT5rYkQT/zuig8Gz/VagnQANKHdDWFM2lTMk9ly0EFQxxxtZUoRetw==",
-      "license": "MIT"
+      "integrity": "sha512-FxDnYcyuXhNl+XSqGZL/t0U9eiNb/q3EWT5rYkQT/zuig8Gz/VagnQANKHdDWFM2lTMk9ly0EFQxxxtZUoRetw=="
     },
     "node_modules/@xterm/addon-web-links": {
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/@xterm/addon-web-links/-/addon-web-links-0.12.0.tgz",
-      "integrity": "sha512-4Smom3RPyVp7ZMYOYDoC/9eGJJJqYhnPLGGqJ6wOBfB8VxPViJNSKdgRYb8NpaM6YSelEKbA2SStD7lGyqaobw==",
-      "license": "MIT"
+      "integrity": "sha512-4Smom3RPyVp7ZMYOYDoC/9eGJJJqYhnPLGGqJ6wOBfB8VxPViJNSKdgRYb8NpaM6YSelEKbA2SStD7lGyqaobw=="
     },
     "node_modules/@xterm/addon-webgl": {
       "version": "0.19.0",
@@ -8917,7 +9008,6 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/@xterm/xterm/-/xterm-6.0.0.tgz",
       "integrity": "sha512-TQwDdQGtwwDt+2cgKDLn0IRaSxYu1tSUjgKarSDkUM0ZNiSRXFpjxEsvc/Zgc5kq5omJ+V0a8/kIM2WD3sMOYg==",
-      "license": "MIT",
       "workspaces": [
         "addons/*"
       ]
@@ -8957,7 +9047,6 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
       "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -9010,7 +9099,6 @@
       "integrity": "sha512-fgFx7Hfoq60ytK2c7DhnF8jIvzYgOMxfugjLOSMHjLIPgenqa7S7oaagATUq99mV6IYvN2tRmC0wnTYX6iPbMw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -9276,6 +9364,7 @@
       "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "dequal": "^2.0.3"
       }
@@ -9468,7 +9557,6 @@
       "resolved": "https://registry.npmjs.org/assistant-cloud/-/assistant-cloud-0.1.27.tgz",
       "integrity": "sha512-BGfVnx7YFN5xtB/kbrgGxRI0TfSWq4yxB3MwYn6RDPlv4JvdtPupvDC1Y6An0EhAe42Z0AYtSmDSsR6p6eeBng==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "assistant-stream": "^0.3.12"
       }
@@ -9747,7 +9835,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.10.12",
         "caniuse-lite": "^1.0.30001782",
@@ -10130,7 +10217,6 @@
       "resolved": "https://registry.npmjs.org/chevrotain/-/chevrotain-12.0.0.tgz",
       "integrity": "sha512-csJvb+6kEiQaqo1woTdSAuOWdN0WTLIydkKrBnS+V5gZz0oqBrp4kQ35519QgK6TpBThiG3V1vNSHlIkv4AglQ==",
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@chevrotain/cst-dts-gen": "12.0.0",
         "@chevrotain/gast": "12.0.0",
@@ -10537,7 +10623,6 @@
       "resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.33.3.tgz",
       "integrity": "sha512-Gej7U+OKR+LZ8kvX7rb2HhCYJ0IhvEFsnkud4SB1PR+BUY/TsSO0dmOW59WEVLu51b1Rm+gQRKoz4bLYxGSZ2g==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10"
       }
@@ -10959,7 +11044,6 @@
       "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
       "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
       "license": "ISC",
-      "peer": true,
       "engines": {
         "node": ">=12"
       }
@@ -11398,7 +11482,6 @@
       "integrity": "sha512-glMJgnTreo8CFINujtAhCgN96QAqApDMZ8Vl1r8f0QT8QprvC1UCltV4CcWj20YoIyLZx6IUskaJZ0NV8fokcg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "app-builder-lib": "26.8.1",
         "builder-util": "26.8.1",
@@ -11486,7 +11569,8 @@
       "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
       "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/dom-serializer": {
       "version": "2.0.0",
@@ -11745,6 +11829,7 @@
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@electron/asar": "^3.2.1",
         "debug": "^4.1.1",
@@ -11765,6 +11850,7 @@
       "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "ms": "^2.1.3"
       },
@@ -11783,6 +11869,7 @@
       "integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "graceful-fs": "^4.1.2",
         "jsonfile": "^4.0.0",
@@ -11798,6 +11885,7 @@
       "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "optionalDependencies": {
         "graceful-fs": "^4.1.6"
       }
@@ -11807,7 +11895,8 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/electron-winstaller/node_modules/universalify": {
       "version": "0.1.2",
@@ -11815,6 +11904,7 @@
       "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">= 4.0.0"
       }
@@ -12082,7 +12172,6 @@
       "integrity": "sha512-IxpibTjyVnmrIQo5aqNpCgoACA/dTKLTlhMHihVHhdkxKyPO1uBBthumT0rdHmcsk9uMonIWS0m4FljWzILh3w==",
       "hasInstallScript": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "esbuild": "bin/esbuild"
       },
@@ -12151,7 +12240,6 @@
       "integrity": "sha512-XoMjdBOwe/esVgEvLmNsD3IRHkm7fbKIUGvrleloJXUZgDHig2IPWNniv+GwjyJXzuNqVjlr5+4yVUZjycJwfQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -12283,7 +12371,6 @@
       "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
@@ -13399,8 +13486,7 @@
       "version": "3.15.0",
       "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.15.0.tgz",
       "integrity": "sha512-dMW4CWBTUK1AEEDeZc1g4xpPGIrSf9fJF960qbTZmN/QwZIWY5wgliS6JWl9/25fpTGJrMRtSjGtOmPnfjZB+A==",
-      "license": "Standard 'no charge' license: https://gsap.com/standard-license.",
-      "peer": true
+      "license": "Standard 'no charge' license: https://gsap.com/standard-license."
     },
     "node_modules/hachure-fill": {
       "version": "0.5.2",
@@ -15262,7 +15348,6 @@
       "version": "0.10.1",
       "resolved": "https://registry.npmjs.org/leva/-/leva-0.10.1.tgz",
       "integrity": "sha512-BcjnfUX8jpmwZUz2L7AfBtF9vn4ggTH33hmeufDULbP3YgNZ/C+ss/oO3stbrqRQyaOmRwy70y7BGTGO81S3rA==",
-      "peer": true,
       "dependencies": {
         "@radix-ui/react-portal": "^1.1.4",
         "@radix-ui/react-tooltip": "^1.1.8",
@@ -15661,6 +15746,7 @@
       "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "lz-string": "bin/bin.js"
       }
@@ -16904,6 +16990,7 @@
       "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "minimist": "^1.2.6"
       },
@@ -16943,7 +17030,6 @@
       "version": "12.38.0",
       "resolved": "https://registry.npmjs.org/motion/-/motion-12.38.0.tgz",
       "integrity": "sha512-uYfXzeHlgThchzwz5Te47dlv5JOUC7OB4rjJ/7XTUgtBZD8CchMN8qEJ4ZVsUmTyYA44zjV0fBwsiktRuFnn+w==",
-      "peer": true,
       "dependencies": {
         "framer-motion": "^12.38.0",
         "tslib": "^2.4.0"
@@ -17013,7 +17099,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": "^20.0.0 || >=22.0.0"
       }
@@ -17664,7 +17749,6 @@
       "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.59.1.tgz",
       "integrity": "sha512-C8oWjPR3F81yljW9o5OxcWzfh6avkVwDD2VYdwIGqTkl+OGFISgypqzfu7dOe4QNLL2aqcWBmI3PMtLIK233lw==",
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "playwright-core": "1.59.1"
       },
@@ -17683,7 +17767,6 @@
       "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.59.1.tgz",
       "integrity": "sha512-HBV/RJg81z5BiiZ9yPzIiClYV/QMsDCKUyogwH9p3MCP6IYjUFu/MActgYAvK0oWyV9NlwM3GLBjADyWgydVyg==",
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "playwright-core": "cli.js"
       },
@@ -17906,6 +17989,7 @@
       "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "ansi-regex": "^5.0.1",
         "ansi-styles": "^5.0.0",
@@ -17921,6 +18005,7 @@
       "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -18524,7 +18609,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.5.tgz",
       "integrity": "sha512-llUJLzz1zTUBrskt2pwZgLq59AemifIftw4aB7JxOqf1HY2FDaGDxgwpAPVzHU1kdWabH7FauP4i1oEeer2WCA==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -18597,7 +18681,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.5.tgz",
       "integrity": "sha512-J5bAZz+DXMMwW/wV3xzKke59Af6CHY7G4uYLN1OvBcKEsWOs4pQExj86BBKamxl/Ik5bx9whOrvBlSDfWzgSag==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -18627,7 +18710,8 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/react-refresh": {
       "version": "0.18.0",
@@ -19213,6 +19297,7 @@
       "deprecated": "Rimraf versions prior to v4 are no longer supported",
       "dev": true,
       "license": "ISC",
+      "peer": true,
       "dependencies": {
         "glob": "^7.1.3"
       },
@@ -19225,7 +19310,8 @@
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/rimraf/node_modules/brace-expansion": {
       "version": "1.1.14",
@@ -19233,6 +19319,7 @@
       "integrity": "sha512-MWPGfDxnyzKU7rNOW9SP/c50vi3xrmrua/+6hfPbCS2ABNWfx24vPidzvC7krjU/RTo235sV776ymlsMtGKj8g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -19245,6 +19332,7 @@
       "deprecated": "Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me",
       "dev": true,
       "license": "ISC",
+      "peer": true,
       "dependencies": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
@@ -19266,6 +19354,7 @@
       "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
       "dev": true,
       "license": "ISC",
+      "peer": true,
       "dependencies": {
         "brace-expansion": "^1.1.7"
       },
@@ -20428,8 +20517,7 @@
       "version": "4.2.4",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.2.4.tgz",
       "integrity": "sha512-HhKppgO81FQof5m6TEnuBWCZGgfRAWbaeOaGT00KOy/Pf/j6oUihdvBpA7ltCeAvZpFhW3j0PTclkxsd4IXYDA==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/tapable": {
       "version": "2.3.3",
@@ -20524,6 +20612,7 @@
       "integrity": "sha512-yYrrsWnrXMcdsnu/7YMYAofM1ktpL5By7vZhf15CrXijWWrEYZks5AXBudalfSWJLlnen/QUJUB5aoB0kqZUGA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "mkdirp": "^0.5.1",
         "rimraf": "~2.6.2"
@@ -20547,8 +20636,7 @@
       "version": "0.180.0",
       "resolved": "https://registry.npmjs.org/three/-/three-0.180.0.tgz",
       "integrity": "sha512-o+qycAMZrh+TsE01GqWUxUIKR1AL0S8pq7zDkYOQw8GqfX8b8VoCKYUoHbhiX5j+7hr8XsuHDVU6+gkQJQKg9w==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/tiny-async-pool": {
       "version": "1.3.0",
@@ -21326,21 +21414,11 @@
         }
       }
     },
-    "node_modules/use-stick-to-bottom": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/use-stick-to-bottom/-/use-stick-to-bottom-1.1.4.tgz",
-      "integrity": "sha512-2w/lydkrwhWMv1vCaEhYbzMDhgbwIodHpAHPV0/xKJErRkbjDEUe1EWmvr6Fwb+qhiERjc1EWgAEZaSaF69CpA==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
-      }
-    },
     "node_modules/use-sync-external-store": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
       "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
@@ -21467,7 +21545,6 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.2.tgz",
       "integrity": "sha512-Bby3NOsna2jsjfLVOHKes8sGwgl4TT0E6vvpYgnAYDIF/tie7MRaFthmKuHx1NSXjiTueXH3do80FMQgvEktRg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.27.0",
         "fdir": "^6.5.0",
@@ -22064,7 +22141,6 @@
       "resolved": "https://registry.npmjs.org/zod/-/zod-4.4.2.tgz",
       "integrity": "sha512-IynmDyxsEsb9RKzO3J9+4SxXnl2FTFSzNBaKKaMV6tsSk0rw9gYw9gs+JFCq/qk2LCZ78KDwyj+Z289TijSkUw==",
       "license": "MIT",
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
@@ -22087,7 +22163,6 @@
       "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.12.tgz",
       "integrity": "sha512-i77ae3aZq4dhMlRhJVCYgMLKuSiZAaUPAct2AksxQ+gOtimhGMdXljRT21P5BNpeT4kXlLIckvkPM029OljD7g==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12.20.0"
       },
diff --git a/tests/hermes_cli/test_web_server.py b/tests/hermes_cli/test_web_server.py
index 22e2b8b2944..61de9145acc 100644
--- a/tests/hermes_cli/test_web_server.py
+++ b/tests/hermes_cli/test_web_server.py
@@ -125,6 +125,29 @@ class TestWebServerEndpoints:
         assert "hermes_home" in data
         assert "active_sessions" in data
 
+    def test_get_sessions_uses_only_persisted_cwd(self, monkeypatch):
+        """Session rows without persisted cwd must not inherit TERMINAL_CWD.
+
+        /api/sessions should reflect per-session DB state, not process/global
+        cwd settings, so workspace grouping stays stable and deterministic.
+        """
+        from hermes_state import SessionDB
+
+        monkeypatch.setenv("TERMINAL_CWD", "/tmp/global-default")
+
+        db = SessionDB()
+        try:
+            db.create_session(session_id="session-no-cwd", source="cli")
+        finally:
+            db.close()
+
+        resp = self.client.get("/api/sessions?limit=20&offset=0")
+        assert resp.status_code == 200
+
+        rows = resp.json()["sessions"]
+        row = next(s for s in rows if s["id"] == "session-no-cwd")
+        assert row["cwd"] is None
+
     def test_audio_transcription_endpoint(self, monkeypatch):
         import tools.transcription_tools as transcription_tools
 
diff --git a/tests/test_hermes_state.py b/tests/test_hermes_state.py
index 3bae763b941..f88c6333f8f 100644
--- a/tests/test_hermes_state.py
+++ b/tests/test_hermes_state.py
@@ -2348,6 +2348,24 @@ class TestCompressionChainProjection:
         assert tip_row["ended_at"] is None  # tip is still live
         assert tip_row["end_reason"] is None
 
+    def test_list_projection_uses_tip_cwd(self, db):
+        """Projected lineage rows should carry cwd from the live tip row.
+
+        Without this, compressed conversations can lose workspace grouping
+        even after the continuation session persists its cwd.
+        """
+        import time as _time
+
+        self._build_compression_chain(db, _time.time() - 3600)
+        db.update_session_cwd("tip1", "/tmp/workspaces/tip")
+        db._conn.commit()
+
+        sessions = db.list_sessions_rich(source="cli", limit=20)
+        tip_row = next(s for s in sessions if s["id"] == "tip1")
+
+        assert tip_row["_lineage_root_id"] == "root1"
+        assert tip_row["cwd"] == "/tmp/workspaces/tip"
+
     def test_list_without_projection_returns_raw_root(self, db):
         """project_compression_tips=False returns the raw parent-NULL root
         rows — useful for admin/debug UIs.
diff --git a/tui_gateway/server.py b/tui_gateway/server.py
index cf77bf5d659..e405afb7427 100644
--- a/tui_gateway/server.py
+++ b/tui_gateway/server.py
@@ -707,6 +707,12 @@ def _set_session_cwd(session: dict, cwd: str) -> str:
         raise ValueError(f"working directory does not exist: {cwd}")
     session["cwd"] = resolved
     _register_session_cwd(session)
+    db = _get_db()
+    if db is not None:
+        try:
+            db.update_session_cwd(session.get("session_key", ""), resolved)
+        except Exception:
+            logger.debug("failed to persist session cwd", exc_info=True)
     try:
         from tools.terminal_tool import cleanup_vm
 
@@ -2164,6 +2170,16 @@ def _init_session(sid: str, key: str, agent, history: list, cols: int = 80):
         # session (stdio for Ink, JSON-RPC WS for the dashboard sidebar).
         "transport": current_transport() or _stdio_transport,
     }
+    db = _get_db()
+    if db is not None:
+        row = db.get_session(key)
+        if row and row.get("cwd"):
+            _sessions[sid]["cwd"] = row["cwd"]
+        else:
+            try:
+                db.update_session_cwd(key, _sessions[sid]["cwd"])
+            except Exception:
+                logger.debug("failed to persist resumed session cwd", exc_info=True)
     _register_session_cwd(_sessions[sid])
     try:
         _sessions[sid]["slash_worker"] = _SlashWorker(
@@ -2450,6 +2466,17 @@ def _(rid, params: dict) -> dict:
         "transport": current_transport() or _stdio_transport,
     }
     _register_session_cwd(_sessions[sid])
+    db = _get_db()
+    if db is not None:
+        try:
+            db.create_session(
+                key,
+                source="tui",
+                model=_resolve_model(),
+                cwd=_sessions[sid]["cwd"],
+            )
+        except Exception:
+            logger.debug("failed to pre-create desktop session row", exc_info=True)
 
     # Return the lightweight session immediately so Ink can paint the composer
     # + skeleton panel, then build the real AIAgent just after this response is
@@ -3045,7 +3072,11 @@ def _(rid, params: dict) -> dict:
                 else f"{current} (branch)"
             )
         db.create_session(
-            new_key, source="tui", model=_resolve_model(), parent_session_id=old_key
+            new_key,
+            source="tui",
+            model=_resolve_model(),
+            parent_session_id=old_key,
+            cwd=_session_cwd(session),
         )
         for msg in history:
             db.append_message(
@@ -5604,7 +5635,13 @@ def _(rid, params: dict) -> dict:
         # editors like Cursor / VS Code do for Cmd-P. Path-ish queries (with
         # `/`, `./`, `~/`, `/abs`) fall through to the directory-listing
         # path so explicit navigation intent is preserved.
-        if is_context and path_part and "/" not in path_part and prefix_tag != "folder":
+        if (
+            is_context
+            and path_part
+            and len(path_part.strip()) >= 2
+            and "/" not in path_part
+            and prefix_tag != "folder"
+        ):
             ranked: list[tuple[tuple[int, int], str, str]] = []
             for rel in _list_repo_files(root):
                 basename = os.path.basename(rel)
@@ -5648,6 +5685,8 @@ def _(rid, params: dict) -> dict:
         for entry in sorted(os.listdir(search_dir)):
             if match and not entry.lower().startswith(match_lower):
                 continue
+            if is_context and entry in _FUZZY_FALLBACK_EXCLUDES:
+                continue
             if is_context and not prefix_tag and entry.startswith("."):
                 continue
             full = os.path.join(search_dir, entry)
diff --git a/website/src/components/UserStoriesCollage/styles.module.css b/website/src/components/UserStoriesCollage/styles.module.css
index bc365e47b20..42b9e6c7f93 100644
--- a/website/src/components/UserStoriesCollage/styles.module.css
+++ b/website/src/components/UserStoriesCollage/styles.module.css
@@ -242,7 +242,11 @@
   text-decoration: none;
   font-weight: 600;
 }
-.footer a:hover { text-decoration: underline; }
+.footer a:hover {
+  text-decoration: underline;
+  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
+  text-underline-offset: 4px;
+}
 
 .empty {
   padding: 3rem 1rem;