diff --git a/apps/desktop/electron/backend-command.cjs b/apps/desktop/electron/backend-command.cjs
index 9ada2cdf0..9ce953346 100644
--- a/apps/desktop/electron/backend-command.cjs
+++ b/apps/desktop/electron/backend-command.cjs
@@ -47,5 +47,5 @@ function sourceDeclaresServe(dashboardPySource) {
 module.exports = {
   serveBackendArgs,
   dashboardFallbackArgs,
-  sourceDeclaresServe,
+  sourceDeclaresServe
 }
diff --git a/apps/desktop/electron/backend-command.test.cjs b/apps/desktop/electron/backend-command.test.cjs
index d483ad2fa..a318b9ec2 100644
--- a/apps/desktop/electron/backend-command.test.cjs
+++ b/apps/desktop/electron/backend-command.test.cjs
@@ -3,32 +3,14 @@
 const test = require('node:test')
 const assert = require('node:assert/strict')
 
-const {
-  serveBackendArgs,
-  dashboardFallbackArgs,
-  sourceDeclaresServe,
-} = require('./backend-command.cjs')
+const { serveBackendArgs, dashboardFallbackArgs, sourceDeclaresServe } = require('./backend-command.cjs')
 
 test('serveBackendArgs builds a headless serve invocation', () => {
-  assert.deepEqual(serveBackendArgs(), [
-    'serve',
-    '--host',
-    '127.0.0.1',
-    '--port',
-    '0',
-  ])
+  assert.deepEqual(serveBackendArgs(), ['serve', '--host', '127.0.0.1', '--port', '0'])
 })
 
 test('serveBackendArgs pins a profile when provided', () => {
-  assert.deepEqual(serveBackendArgs('worker'), [
-    '--profile',
-    'worker',
-    'serve',
-    '--host',
-    '127.0.0.1',
-    '--port',
-    '0',
-  ])
+  assert.deepEqual(serveBackendArgs('worker'), ['--profile', 'worker', 'serve', '--host', '127.0.0.1', '--port', '0'])
 })
 
 test('dashboardFallbackArgs rewrites serve -> dashboard --no-open, keeping the -m prefix', () => {
@@ -41,7 +23,7 @@ test('dashboardFallbackArgs rewrites serve -> dashboard --no-open, keeping the -
     '--host',
     '127.0.0.1',
     '--port',
-    '0',
+    '0'
   ])
 })
 
@@ -57,7 +39,7 @@ test('dashboardFallbackArgs preserves a --profile flag ahead of serve', () => {
     '--host',
     '127.0.0.1',
     '--port',
-    '0',
+    '0'
   ])
 })
 
diff --git a/apps/desktop/electron/link-title-window.test.cjs b/apps/desktop/electron/link-title-window.test.cjs
index 1682e5abb..468c646a0 100644
--- a/apps/desktop/electron/link-title-window.test.cjs
+++ b/apps/desktop/electron/link-title-window.test.cjs
@@ -63,13 +63,27 @@ test('createLinkTitleWindow still returns the window if muting throws', () => {
 test('guardLinkTitleSession cancels downloads triggered by the title-fetch window', () => {
   let cancelled = false
   const handlers = {}
-  guardLinkTitleSession({ on: (e, h) => { handlers[e] = h } })
-  handlers['will-download'](null, { cancel: () => { cancelled = true } })
+  guardLinkTitleSession({
+    on: (e, h) => {
+      handlers[e] = h
+    }
+  })
+  handlers['will-download'](null, {
+    cancel: () => {
+      cancelled = true
+    }
+  })
   assert.ok(cancelled)
 })
 
 test('guardLinkTitleSession is a no-op when session.on throws', () => {
-  assert.doesNotThrow(() => guardLinkTitleSession({ on() { throw new Error() } }))
+  assert.doesNotThrow(() =>
+    guardLinkTitleSession({
+      on() {
+        throw new Error()
+      }
+    })
+  )
 })
 
 test('readLinkTitleWindowTitle returns empty for missing or destroyed windows', () => {
diff --git a/apps/desktop/electron/main.cjs b/apps/desktop/electron/main.cjs
index eac26c0af..bd6b867fa 100644
--- a/apps/desktop/electron/main.cjs
+++ b/apps/desktop/electron/main.cjs
@@ -1375,10 +1375,7 @@ function backendSupportsServe(backend) {
   let supported = null
   if (backend.root) {
     try {
-      const src = fs.readFileSync(
-        path.join(backend.root, 'hermes_cli', 'subcommands', 'dashboard.py'),
-        'utf8'
-      )
+      const src = fs.readFileSync(path.join(backend.root, 'hermes_cli', 'subcommands', 'dashboard.py'), 'utf8')
       supported = sourceDeclaresServe(src)
     } catch {
       supported = null // source unreadable — fall through to the probe
@@ -2335,9 +2332,7 @@ async function handOffWindowsBootstrapRecovery(reason) {
   // --repair (full venv recreate) and drove reinstall loops. The venv interpreter
   // and the bootstrap-complete marker are present earlier and are better signals.
   const haveRealInstall =
-    fileExists(venvPython) ||
-    fileExists(venvHermes) ||
-    fileExists(path.join(updateRoot, '.hermes-bootstrap-complete'))
+    fileExists(venvPython) || fileExists(venvHermes) || fileExists(path.join(updateRoot, '.hermes-bootstrap-complete'))
   const updaterArgs = haveRealInstall ? ['--update', '--branch', branch] : ['--repair', '--branch', branch]
 
   await releaseBackendLockForUpdate(updateRoot)
diff --git a/apps/desktop/electron/profile-delete-respawn.test.cjs b/apps/desktop/electron/profile-delete-respawn.test.cjs
index a982072bd..07e17f787 100644
--- a/apps/desktop/electron/profile-delete-respawn.test.cjs
+++ b/apps/desktop/electron/profile-delete-respawn.test.cjs
@@ -32,11 +32,7 @@ test('prepareProfileDeleteRequest returns the torn-down profile name', () => {
   )
 
   // The early-exit guard must return null (not void/undefined).
-  assert.match(
-    fnBody,
-    /return null/,
-    'early-exit guard should return null, not undefined'
-  )
+  assert.match(fnBody, /return null/, 'early-exit guard should return null, not undefined')
 })
 
 test('hermes:api handler routes profile-delete requests to the primary backend', () => {
diff --git a/apps/desktop/electron/titlebar-overlay-width.cjs b/apps/desktop/electron/titlebar-overlay-width.cjs
index 9d7a49334..9336ae89f 100644
--- a/apps/desktop/electron/titlebar-overlay-width.cjs
+++ b/apps/desktop/electron/titlebar-overlay-width.cjs
@@ -12,11 +12,11 @@ const OVERLAY_FALLBACK_WIDTH = 144
  * macOS uses traffic lights positioned via trafficLightPosition, not a WCO
  * overlay, so it reserves nothing here. Every other desktop platform now paints
  * the Electron overlay (Windows, WSLg, and plain Linux KDE/GNOME), so they all
- * reserve the fallback width.
+ * reserve the fallback width — the split is simply mac vs. not.
  *
- * @param {{ isWindows?: boolean, isWsl?: boolean, isMac?: boolean }} opts
+ * @param {{ isMac?: boolean }} opts
  */
-function nativeOverlayWidth({ isWindows = false, isWsl = false, isMac = false } = {}) {
+function nativeOverlayWidth({ isMac = false } = {}) {
   if (isMac) return 0
   return OVERLAY_FALLBACK_WIDTH
 }
diff --git a/apps/desktop/electron/windows-hermes-resolution.test.cjs b/apps/desktop/electron/windows-hermes-resolution.test.cjs
index ada41ce29..3e0f9db1d 100644
--- a/apps/desktop/electron/windows-hermes-resolution.test.cjs
+++ b/apps/desktop/electron/windows-hermes-resolution.test.cjs
@@ -43,21 +43,13 @@ test('findOnPath tries PATHEXT extensions before the bare (empty) name on Window
 test('Windows bootstrap recovery chooses --update when any real-install signal is present', () => {
   const source = readMain()
   assert.match(source, /const haveRealInstall =/, 'recovery must compute haveRealInstall')
-  assert.match(
-    source,
-    /fileExists\(venvPython\)/,
-    'recovery must accept the venv interpreter as a real-install signal'
-  )
+  assert.match(source, /fileExists\(venvPython\)/, 'recovery must accept the venv interpreter as a real-install signal')
   assert.match(
     source,
     /\.hermes-bootstrap-complete/,
     'recovery must accept the bootstrap-complete marker as a real-install signal'
   )
-  assert.match(
-    source,
-    /updaterArgs = haveRealInstall \? \['--update'/,
-    'updaterArgs must gate on haveRealInstall'
-  )
+  assert.match(source, /updaterArgs = haveRealInstall \? \['--update'/, 'updaterArgs must gate on haveRealInstall')
   // The old too-narrow check (only venv\Scripts\hermes.exe) must not return.
   assert.doesNotMatch(
     source,
diff --git a/apps/desktop/src/app/agents/index.tsx b/apps/desktop/src/app/agents/index.tsx
index fd1375859..fe392e846 100644
--- a/apps/desktop/src/app/agents/index.tsx
+++ b/apps/desktop/src/app/agents/index.tsx
@@ -7,6 +7,7 @@ import { Codicon } from '@/components/ui/codicon'
 import { FadeText } from '@/components/ui/fade-text'
 import { GlyphSpinner } from '@/components/ui/glyph-spinner'
 import { type Translations, useI18n } from '@/i18n'
+import { compactNumber } from '@/lib/format'
 import { AlertCircle, CheckCircle2 } from '@/lib/icons'
 import { useEnterAnimation } from '@/lib/use-enter-animation'
 import { cn } from '@/lib/utils'
@@ -114,14 +115,11 @@ const fmtDuration = (seconds: number | undefined, a: Translations['agents']) =>
   return a.durationMinutes(m, s)
 }
 
-const fmtTokens = (value: number | undefined, a: Translations['agents']) => {
-  if (!value) {
-    return ''
-  }
-
-  return value >= 1000 ? a.tokensK((value / 1000).toFixed(1)) : a.tokens(value)
-}
+const fmtTokens = (value: number | undefined, a: Translations['agents']) =>
+  value ? a.tokens(compactNumber(value)) : ''
 
+// Distinct contract from coarseElapsed: rounds to the second (this ticks live),
+// and hours are unbounded ("25h", never "1d"). Kept local on purpose.
 const fmtAge = (updatedAt: number, nowMs: number, a: Translations['agents']) => {
   const s = Math.max(0, Math.round((nowMs - updatedAt) / 1000))
 
@@ -135,11 +133,7 @@ const fmtAge = (updatedAt: number, nowMs: number, a: Translations['agents']) =>
 
   const m = Math.floor(s / 60)
 
-  if (m < 60) {
-    return a.ageMinutes(m)
-  }
-
-  return a.ageHours(Math.floor(m / 60))
+  return m < 60 ? a.ageMinutes(m) : a.ageHours(Math.floor(m / 60))
 }
 
 const flatten = (nodes: readonly SubagentNode[]): SubagentNode[] =>
diff --git a/apps/desktop/src/app/artifacts/index.tsx b/apps/desktop/src/app/artifacts/index.tsx
index 77e87b038..049e0a437 100644
--- a/apps/desktop/src/app/artifacts/index.tsx
+++ b/apps/desktop/src/app/artifacts/index.tsx
@@ -5,7 +5,6 @@ import { useNavigate } from 'react-router-dom'
 import { ZoomableImage } from '@/components/chat/zoomable-image'
 import { PageLoader } from '@/components/page-loader'
 import { Button } from '@/components/ui/button'
-import { Codicon } from '@/components/ui/codicon'
 import { CopyButton } from '@/components/ui/copy-button'
 import {
   Pagination,
@@ -17,18 +16,19 @@ import {
   PaginationPrevious
 } from '@/components/ui/pagination'
 import { RowButton } from '@/components/ui/row-button'
-import { TextTab, TextTabMeta } from '@/components/ui/text-tab'
 import { Tip } from '@/components/ui/tooltip'
 import { getSessionMessages, listAllProfileSessions } from '@/hermes'
 import { type Translations, useI18n } from '@/i18n'
 import { ExternalLink, ExternalLinkIcon, hostPathLabel, urlSlugTitleLabel, useLinkTitle } from '@/lib/external-link'
-import { FileImage, FileText, FolderOpen, Link2 } from '@/lib/icons'
+import { FileImage, FileText, FolderOpen, Link2, Loader2, RefreshCw } from '@/lib/icons'
+import { downloadGatewayMediaFile, isRemoteGateway } from '@/lib/media'
+import { normalize } from '@/lib/text'
+import { fmtDayTime } from '@/lib/time'
 import { cn } from '@/lib/utils'
 import { notifyError } from '@/store/notifications'
 
 import { useRefreshHotkey } from '../hooks/use-refresh-hotkey'
 import { useRouteEnumParam } from '../hooks/use-route-enum-param'
-import { PAGE_INSET_NEG_X, PAGE_INSET_X } from '../layout-constants'
 import { PageSearchShell } from '../page-search-shell'
 import { sessionRoute } from '../routes'
 import type { SetStatusbarItemGroup } from '../shell/statusbar-controls'
@@ -41,15 +41,8 @@ import {
   collectArtifactsForSession
 } from './artifact-utils'
 
-const ARTIFACT_TIME_FMT = new Intl.DateTimeFormat(undefined, {
-  day: 'numeric',
-  hour: 'numeric',
-  minute: '2-digit',
-  month: 'short'
-})
-
 function formatArtifactTime(timestamp: number): string {
-  return ARTIFACT_TIME_FMT.format(new Date(timestamp))
+  return fmtDayTime.format(new Date(timestamp))
 }
 
 function pageRangeLabel(total: number, page: number, pageSize: number, a: Translations['artifacts']): string {
@@ -115,7 +108,6 @@ export function ArtifactsView({ setStatusbarItemGroup: _setStatusbarItemGroup, .
   const navigate = useNavigate()
   const [artifacts, setArtifacts] = useState<ArtifactRecord[] | null>(null)
   const [query, setQuery] = useState('')
-  const [refreshing, setRefreshing] = useState(false)
 
   const [kindFilter, setKindFilter] = useRouteEnumParam('tab', ARTIFACT_FILTERS, 'all')
 
@@ -123,6 +115,8 @@ export function ArtifactsView({ setStatusbarItemGroup: _setStatusbarItemGroup, .
   const [imagePage, setImagePage] = useState(1)
   const [filePage, setFilePage] = useState(1)
 
+  const [refreshing, setRefreshing] = useState(false)
+
   const refreshArtifacts = useCallback(async () => {
     setRefreshing(true)
 
@@ -165,7 +159,7 @@ export function ArtifactsView({ setStatusbarItemGroup: _setStatusbarItemGroup, .
       return []
     }
 
-    const q = query.trim().toLowerCase()
+    const q = normalize(query)
 
     return artifacts.filter(artifact => {
       if (kindFilter !== 'all' && artifact.kind !== kindFilter) {
@@ -209,6 +203,25 @@ export function ArtifactsView({ setStatusbarItemGroup: _setStatusbarItemGroup, .
     [currentFilePage, visibleFileArtifacts]
   )
 
+  // Rotating placeholder nudges from real data — search matches file paths and
+  // session titles, not just labels; show it.
+  // TODO(i18n): literals until the UX settles.
+  const searchHints = useMemo(() => {
+    if (!artifacts?.length) {
+      return undefined
+    }
+
+    const extensions = [
+      ...new Set(artifacts.map(artifact => /\.(\w{2,4})$/.exec(artifact.value)?.[1]?.toLowerCase()).filter(Boolean))
+    ].slice(0, 3) as string[]
+
+    const titles = [...new Set(artifacts.map(artifact => artifact.sessionTitle).filter(Boolean))].slice(0, 2)
+
+    const hints = [...extensions.map(ext => `Try “.${ext}”`), ...titles.map(title => `Try “${title}”`)]
+
+    return hints.length > 0 ? hints : undefined
+  }, [artifacts])
+
   const counts = useMemo(() => {
     const all = artifacts || []
 
@@ -223,6 +236,16 @@ export function ArtifactsView({ setStatusbarItemGroup: _setStatusbarItemGroup, .
   const openArtifact = useCallback(
     async (href: string) => {
       try {
+        // A gateway-local file resolves to file:// in remote mode (the file
+        // lives on the gateway, not this disk). Opening that locally fails —
+        // and an OAuth remote connection has no query token to build a download
+        // URL. Fetch the bytes over the authenticated fs bridge instead.
+        if (isRemoteGateway() && /^file:/i.test(href)) {
+          await downloadGatewayMediaFile(href)
+
+          return
+        }
+
         if (window.hermesDesktop?.openExternal) {
           await window.hermesDesktop.openExternal(href)
         } else {
@@ -253,40 +276,33 @@ export function ArtifactsView({ setStatusbarItemGroup: _setStatusbarItemGroup, .
   return (
     <PageSearchShell
       {...props}
+      activeTab={kindFilter}
       onSearchChange={setQuery}
+      onTabChange={id => setKindFilter(id as typeof kindFilter)}
       searchHidden={counts.all === 0}
+      searchHints={searchHints}
       searchPlaceholder={a.search}
       searchTrailingAction={
-        <Button
-          aria-label={refreshing ? a.refreshing : a.refresh}
-          className="text-(--ui-text-tertiary) hover:bg-transparent hover:text-foreground"
-          disabled={refreshing}
-          onClick={() => void refreshArtifacts()}
-          size="icon-xs"
-          title={refreshing ? a.refreshing : a.refresh}
-          type="button"
-          variant="ghost"
-        >
-          <Codicon name="refresh" size="0.875rem" spinning={refreshing} />
-        </Button>
+        <Tip label={refreshing ? a.refreshing : a.refresh}>
+          <Button
+            aria-label={refreshing ? a.refreshing : a.refresh}
+            className="text-(--ui-text-tertiary) hover:bg-(--chrome-action-hover) hover:text-foreground"
+            disabled={refreshing}
+            onClick={() => void refreshArtifacts()}
+            size="icon-titlebar"
+            variant="ghost"
+          >
+            {refreshing ? <Loader2 className="animate-spin" /> : <RefreshCw />}
+          </Button>
+        </Tip>
       }
       searchValue={query}
-      tabs={
-        <>
-          <TextTab active={kindFilter === 'all'} onClick={() => setKindFilter('all')}>
-            {a.tabAll} <TextTabMeta>({counts.all})</TextTabMeta>
-          </TextTab>
-          <TextTab active={kindFilter === 'image'} onClick={() => setKindFilter('image')}>
-            {a.tabImages} <TextTabMeta>({counts.image})</TextTabMeta>
-          </TextTab>
-          <TextTab active={kindFilter === 'file'} onClick={() => setKindFilter('file')}>
-            {a.tabFiles} <TextTabMeta>({counts.file})</TextTabMeta>
-          </TextTab>
-          <TextTab active={kindFilter === 'link'} onClick={() => setKindFilter('link')}>
-            {a.tabLinks} <TextTabMeta>({counts.link})</TextTabMeta>
-          </TextTab>
-        </>
-      }
+      tabs={[
+        { id: 'all', label: a.tabAll, meta: artifacts ? counts.all : null },
+        { id: 'image', label: a.tabImages, meta: artifacts ? counts.image : null },
+        { id: 'file', label: a.tabFiles, meta: artifacts ? counts.file : null },
+        { id: 'link', label: a.tabLinks, meta: artifacts ? counts.link : null }
+      ]}
     >
       {!artifacts ? (
         <PageLoader label={a.indexing} />
@@ -298,17 +314,11 @@ export function ArtifactsView({ setStatusbarItemGroup: _setStatusbarItemGroup, .
           </div>
         </div>
       ) : (
-        <div className="h-full overflow-y-auto">
-          <div className={cn('flex flex-col gap-3 pb-2', PAGE_INSET_X)}>
+        <div className="h-full overflow-y-auto [scrollbar-gutter:stable]">
+          <div className="flex flex-col gap-3 px-3 pb-2">
             {visibleImageArtifacts.length > 0 && (
               <section className="flex flex-col">
-                <div
-                  className={cn(
-                    'sticky top-0 z-10 flex h-7 items-center gap-3 overflow-x-auto bg-background',
-                    PAGE_INSET_NEG_X,
-                    PAGE_INSET_X
-                  )}
-                >
+                <div className="sticky top-0 z-10 -mx-3 flex h-7 items-center gap-3 overflow-x-auto bg-background px-3">
                   <ArtifactsPagination
                     className="ml-auto justify-end px-0"
                     itemLabel={a.itemsImage}
@@ -334,13 +344,7 @@ export function ArtifactsView({ setStatusbarItemGroup: _setStatusbarItemGroup, .
 
             {visibleFileArtifacts.length > 0 && (
               <section className="flex flex-col">
-                <div
-                  className={cn(
-                    'sticky top-0 z-10 flex h-7 items-center gap-3 overflow-x-auto bg-background',
-                    PAGE_INSET_NEG_X,
-                    PAGE_INSET_X
-                  )}
-                >
+                <div className="sticky top-0 z-10 -mx-3 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, a)}
diff --git a/apps/desktop/src/app/chat/composer/hooks/use-at-completions.ts b/apps/desktop/src/app/chat/composer/hooks/use-at-completions.ts
index 4d6a68d90..d56a6d57e 100644
--- a/apps/desktop/src/app/chat/composer/hooks/use-at-completions.ts
+++ b/apps/desktop/src/app/chat/composer/hooks/use-at-completions.ts
@@ -2,6 +2,7 @@ import type { Unstable_TriggerAdapter, Unstable_TriggerItem } from '@assistant-u
 import { useCallback } from 'react'
 
 import type { HermesGateway } from '@/hermes'
+import { normalize } from '@/lib/text'
 
 import type { CompletionEntry, CompletionPayload } from './use-live-completion-adapter'
 import { useLiveCompletionAdapter } from './use-live-completion-adapter'
@@ -19,7 +20,7 @@ const STARTER_META: Record<string, string> = {
 }
 
 function starterEntries(query: string): CompletionEntry[] {
-  const q = query.trim().toLowerCase()
+  const q = normalize(query)
   const kinds = Array.from(REF_STARTERS)
   const filtered = q ? kinds.filter(kind => kind.startsWith(q)) : kinds
 
diff --git a/apps/desktop/src/app/chat/composer/hooks/use-slash-completions.ts b/apps/desktop/src/app/chat/composer/hooks/use-slash-completions.ts
index 1e3e48c15..bf6e5006b 100644
--- a/apps/desktop/src/app/chat/composer/hooks/use-slash-completions.ts
+++ b/apps/desktop/src/app/chat/composer/hooks/use-slash-completions.ts
@@ -12,6 +12,7 @@ import {
   isDesktopSlashExtensionCommand,
   isDesktopSlashSuggestion
 } from '@/lib/desktop-slash-commands'
+import { normalize } from '@/lib/text'
 import { $sessions } from '@/store/session'
 
 import type { CompletionEntry, CompletionPayload } from './use-live-completion-adapter'
@@ -94,7 +95,7 @@ export function useSlashCompletions(options: {
       const sessionArg = /^\/(?:resume|sessions|switch)\s+(.*)$/is.exec(text)
 
       if (sessionArg) {
-        const needle = (sessionArg[1] ?? '').trim().toLowerCase()
+        const needle = normalize(sessionArg[1])
 
         const matches = (
           needle
diff --git a/apps/desktop/src/app/chat/composer/index.tsx b/apps/desktop/src/app/chat/composer/index.tsx
index bda9d5d20..1f5df46eb 100644
--- a/apps/desktop/src/app/chat/composer/index.tsx
+++ b/apps/desktop/src/app/chat/composer/index.tsx
@@ -1,12 +1,6 @@
 import { ComposerPrimitive } from '@assistant-ui/react'
 import { useStore } from '@nanostores/react'
-import {
-  type ClipboardEvent,
-  type FormEvent,
-  type KeyboardEvent,
-  useEffect,
-  useRef
-} from 'react'
+import { type ClipboardEvent, type FormEvent, type KeyboardEvent, useEffect, useRef } from 'react'
 
 import { composerFill, composerSurfaceGlass } from '@/components/chat/composer-dock'
 import { Button } from '@/components/ui/button'
@@ -27,11 +21,7 @@ import { $autoSpeakReplies } from '@/store/voice-prefs'
 import { useTheme } from '@/themes'
 
 import { AttachmentList } from './attachments'
-import {
-  COMPOSER_FADE_BACKGROUND,
-  type QueueEditState,
-  slashArgStage
-} from './composer-utils'
+import { COMPOSER_FADE_BACKGROUND, type QueueEditState, slashArgStage } from './composer-utils'
 import { ContextMenu } from './context-menu'
 import { ComposerControls } from './controls'
 import { COMPOSER_DROP_ACTIVE_CLASS, COMPOSER_DROP_FADE_CLASS } from './drop-affordance'
diff --git a/apps/desktop/src/app/chat/composer/status-stack/status-row.tsx b/apps/desktop/src/app/chat/composer/status-stack/status-row.tsx
index 68962cb72..6857be46c 100644
--- a/apps/desktop/src/app/chat/composer/status-stack/status-row.tsx
+++ b/apps/desktop/src/app/chat/composer/status-stack/status-row.tsx
@@ -7,16 +7,12 @@ import { Codicon } from '@/components/ui/codicon'
 import { GlyphSpinner } from '@/components/ui/glyph-spinner'
 import { Tip } from '@/components/ui/tooltip'
 import { type Translations, useI18n } from '@/i18n'
+import { capitalize } from '@/lib/text'
 import type { TodoStatus } from '@/lib/todos'
 import { cn } from '@/lib/utils'
 import type { ComposerStatusItem } from '@/store/composer-status'
 
-const toolLabel = (name: string) =>
-  name
-    .split('_')
-    .filter(Boolean)
-    .map(part => part[0]!.toUpperCase() + part.slice(1))
-    .join(' ') || name
+const toolLabel = (name: string) => name.split('_').filter(Boolean).map(capitalize).join(' ') || name
 
 // Todo rows speak checkbox, not spinner-and-dot: a dashed ring while the item
 // is still open (pending), codicons once it resolves, a live spinner only on
diff --git a/apps/desktop/src/app/chat/hooks/use-composer-actions.test.ts b/apps/desktop/src/app/chat/hooks/use-composer-actions.test.ts
index 9ecf4faa6..76ab53ef9 100644
--- a/apps/desktop/src/app/chat/hooks/use-composer-actions.test.ts
+++ b/apps/desktop/src/app/chat/hooks/use-composer-actions.test.ts
@@ -122,9 +122,9 @@ describe('extractDroppedFiles', () => {
   }
 
   it('emits a dropped directory as a path-only entry with isDirectory (no File to upload)', () => {
-    const transfer = stubTransfer([
-      { path: '/Users/jeff/projects/hermes', isDirectory: true }
-    ]) as DataTransfer & { _pathByFile: Map<File, string> }
+    const transfer = stubTransfer([{ path: '/Users/jeff/projects/hermes', isDirectory: true }]) as DataTransfer & {
+      _pathByFile: Map<File, string>
+    }
 
     stubBridge(transfer)
 
@@ -174,9 +174,9 @@ describe('extractDroppedFiles', () => {
   it('does not duplicate a folder that appears in both items and files', () => {
     // Chromium lists a dropped folder in transfer.files too (as a size-0 File);
     // the items pass claims its path first so the files fallback skips it.
-    const transfer = stubTransfer([
-      { path: '/abs/project', isDirectory: true }
-    ]) as DataTransfer & { _pathByFile: Map<File, string> }
+    const transfer = stubTransfer([{ path: '/abs/project', isDirectory: true }]) as DataTransfer & {
+      _pathByFile: Map<File, string>
+    }
 
     stubBridge(transfer)
 
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 1ebd2420f..d510c59f4 100644
--- a/apps/desktop/src/app/chat/hooks/use-composer-actions.ts
+++ b/apps/desktop/src/app/chat/hooks/use-composer-actions.ts
@@ -6,6 +6,7 @@ import { formatRefValue } from '@/components/assistant-ui/directive-text'
 import { useI18n } from '@/i18n'
 import { attachmentId, contextPath, pathLabel } from '@/lib/chat-runtime'
 import { readDesktopFileDataUrl, selectDesktopPaths } from '@/lib/desktop-fs'
+import { normalize } from '@/lib/text'
 import {
   addComposerAttachment,
   type ComposerAttachment,
@@ -30,9 +31,9 @@ const BLOB_MIME_EXTENSION: Record<string, string> = {
 }
 
 function blobExtension(blob: Blob): string {
-  const mime = blob.type.split(';')[0]?.trim().toLowerCase()
+  const mime = normalize(blob.type.split(';')[0])
 
-  return (mime && BLOB_MIME_EXTENSION[mime]) || '.png'
+  return BLOB_MIME_EXTENSION[mime] || '.png'
 }
 
 export function isImagePath(filePath: string): boolean {
diff --git a/apps/desktop/src/app/chat/sidebar/cron-jobs-section.tsx b/apps/desktop/src/app/chat/sidebar/cron-jobs-section.tsx
index 707e7c5e6..e6fb6fda7 100644
--- a/apps/desktop/src/app/chat/sidebar/cron-jobs-section.tsx
+++ b/apps/desktop/src/app/chat/sidebar/cron-jobs-section.tsx
@@ -8,6 +8,7 @@ import { SidebarGroup, SidebarGroupContent } from '@/components/ui/sidebar'
 import { Tip } from '@/components/ui/tooltip'
 import { getCronJobRuns, type SessionInfo } from '@/hermes'
 import { useI18n } from '@/i18n'
+import { fmtDayTime, relativeTime } from '@/lib/time'
 import { cn } from '@/lib/utils'
 import { $selectedStoredSessionId } from '@/store/session'
 import type { CronJob } from '@/types/hermes'
@@ -32,30 +33,6 @@ const PEEK_POLL_INTERVAL_MS = 8000
 const INITIAL_VISIBLE_JOBS = 3
 const LOAD_MORE_STEP = 10
 
-const relativeFmt = new Intl.RelativeTimeFormat(undefined, { numeric: 'auto', style: 'short' })
-
-// Localized "in 5 min" / "2 hr ago" without hand-rolled strings — picks the
-// coarsest sensible unit so a daily job reads "in 14 hr", not "in 840 min".
-function relativeTime(targetMs: number, nowMs: number): string {
-  const diff = targetMs - nowMs
-  const abs = Math.abs(diff)
-  const sign = diff < 0 ? -1 : 1
-
-  if (abs < 60_000) {
-    return relativeFmt.format(sign * Math.round(abs / 1000), 'second')
-  }
-
-  if (abs < 3_600_000) {
-    return relativeFmt.format(sign * Math.round(abs / 60_000), 'minute')
-  }
-
-  if (abs < 86_400_000) {
-    return relativeFmt.format(sign * Math.round(abs / 3_600_000), 'hour')
-  }
-
-  return relativeFmt.format(sign * Math.round(abs / 86_400_000), 'day')
-}
-
 function nextRunMs(job: CronJob): null | number {
   if (!job.next_run_at) {
     return null
@@ -76,9 +53,7 @@ function formatRunTime(seconds?: null | number): string {
 
   const date = new Date(seconds * 1000)
 
-  return Number.isNaN(date.valueOf())
-    ? '—'
-    : date.toLocaleString(undefined, { day: 'numeric', hour: 'numeric', minute: '2-digit', month: 'short' })
+  return Number.isNaN(date.valueOf()) ? '—' : fmtDayTime.format(date)
 }
 
 interface SidebarCronJobsSectionProps {
diff --git a/apps/desktop/src/app/chat/sidebar/index.tsx b/apps/desktop/src/app/chat/sidebar/index.tsx
index 89e719f77..416483dde 100644
--- a/apps/desktop/src/app/chat/sidebar/index.tsx
+++ b/apps/desktop/src/app/chat/sidebar/index.tsx
@@ -1132,7 +1132,7 @@ export function ChatSidebar({
                   searchPending ? (
                     <SidebarSessionSkeletons />
                   ) : (
-                    <div className="grid min-h-24 place-items-center rounded-lg px-2 text-center text-xs text-(--ui-text-tertiary)">
+                    <div className="wrap-anywhere grid min-h-24 place-items-center rounded-lg px-2 text-center text-xs text-(--ui-text-tertiary)">
                       {s.noMatch(trimmedQuery)}
                     </div>
                   )
diff --git a/apps/desktop/src/app/chat/sidebar/profile-switcher.tsx b/apps/desktop/src/app/chat/sidebar/profile-switcher.tsx
index 4c919b144..c3016ec67 100644
--- a/apps/desktop/src/app/chat/sidebar/profile-switcher.tsx
+++ b/apps/desktop/src/app/chat/sidebar/profile-switcher.tsx
@@ -22,17 +22,21 @@ import { useStore } from '@nanostores/react'
 import { useEffect, useRef, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 
+import { CodeEditor } from '@/components/chat/code-editor'
 import { Button } from '@/components/ui/button'
 import { Codicon } from '@/components/ui/codicon'
 import { ColorSwatches } from '@/components/ui/color-swatches'
 import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from '@/components/ui/context-menu'
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
 import { Popover, PopoverAnchor, PopoverContent } from '@/components/ui/popover'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { Tip, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
+import { getProfileSoul, updateProfileSoul } from '@/hermes'
 import { useI18n } from '@/i18n'
 import { triggerHaptic } from '@/lib/haptics'
 import { PROFILE_SWATCHES, profileColorSoft, resolveProfileColor } from '@/lib/profile-color'
 import { cn } from '@/lib/utils'
+import { notify, notifyError } from '@/store/notifications'
 import {
   $activeGatewayProfile,
   $profileColors,
@@ -106,6 +110,7 @@ export function ProfileRail() {
   const [createOpen, setCreateOpen] = useState(false)
   const [pendingRename, setPendingRename] = useState<null | ProfileInfo>(null)
   const [pendingDelete, setPendingDelete] = useState<null | ProfileInfo>(null)
+  const [pendingSoul, setPendingSoul] = useState<null | string>(null)
   const scrollRef = useRef<HTMLDivElement>(null)
 
   // Too many profiles for the square strip → collapse to the select. Declared
@@ -277,6 +282,7 @@ export function ProfileRail() {
                       key={profile.name}
                       label={profile.name}
                       onDelete={() => setPendingDelete(profile)}
+                      onEditSoul={() => setPendingSoul(profile.name)}
                       onRecolor={color => setProfileColor(profile.name, color)}
                       onRename={() => setPendingRename(profile)}
                       onSelect={() => selectProfile(profile.name)}
@@ -322,10 +328,89 @@ export function ProfileRail() {
         open={pendingDelete !== null}
         profile={pendingDelete}
       />
+
+      <EditSoulDialog onClose={() => setPendingSoul(null)} profileName={pendingSoul} />
     </div>
   )
 }
 
+// Right-click → Edit SOUL.md for a sidebar profile — the same in-app markdown
+// editor as the memory-graph node edit, so a profile's persona is editable
+// without opening the Manage overlay.
+function EditSoulDialog({ onClose, profileName }: { onClose: () => void; profileName: null | string }) {
+  const { t } = useI18n()
+  const p = t.profiles
+  const [content, setContent] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [saving, setSaving] = useState(false)
+
+  useEffect(() => {
+    if (!profileName) {
+      return
+    }
+
+    let cancelled = false
+    setLoading(true)
+    setContent('')
+
+    getProfileSoul(profileName)
+      .then(soul => !cancelled && setContent(soul.content))
+      .catch(err => !cancelled && notifyError(err, p.failedLoadSoul))
+      .finally(() => !cancelled && setLoading(false))
+
+    return () => void (cancelled = true)
+  }, [p, profileName])
+
+  const save = async () => {
+    if (!profileName) {
+      return
+    }
+
+    setSaving(true)
+
+    try {
+      await updateProfileSoul(profileName, content)
+      notify({ kind: 'success', title: p.soulSaved, message: profileName })
+      onClose()
+    } catch (err) {
+      notifyError(err, p.failedSaveSoul)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <Dialog onOpenChange={open => !open && !saving && onClose()} open={profileName !== null}>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>{profileName} · SOUL.md</DialogTitle>
+        </DialogHeader>
+        <div className="h-80">
+          {!loading && profileName && (
+            <CodeEditor
+              filePath="SOUL.md"
+              framed
+              initialValue={content}
+              key={profileName}
+              onCancel={() => !saving && onClose()}
+              onChange={setContent}
+              onSave={() => void save()}
+            />
+          )}
+        </div>
+        <DialogFooter>
+          <Button disabled={saving} onClick={onClose} type="button" variant="ghost">
+            {t.common.cancel}
+          </Button>
+          <Button disabled={saving || loading} onClick={() => void save()}>
+            {saving ? p.saving : p.saveSoul}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
 // The "+" create button, shared by both rail render paths.
 function AddProfileButton({ label, onClick }: { label: string; onClick: () => void }) {
   return (
@@ -427,6 +512,7 @@ interface ProfileSquareProps {
   onSelect: () => void
   onRecolor: (color: null | string) => void
   onRename: () => void
+  onEditSoul: () => void
   onDelete: () => void
 }
 
@@ -441,7 +527,16 @@ const LONG_PRESS_MS = 450
 // right-click to rename/delete. The button carries both the tooltip and
 // context-menu triggers via nested asChild Slots, so a single element keeps the
 // dnd listeners, hover tip, and right-click menu.
-function ProfileSquare({ active, color, label, onDelete, onRecolor, onRename, onSelect }: ProfileSquareProps) {
+function ProfileSquare({
+  active,
+  color,
+  label,
+  onDelete,
+  onEditSoul,
+  onRecolor,
+  onRename,
+  onSelect
+}: ProfileSquareProps) {
   const { t } = useI18n()
   const p = t.profiles
   const hue = color ?? 'var(--ui-text-quaternary)'
@@ -565,8 +660,12 @@ function ProfileSquare({ active, color, label, onDelete, onRecolor, onRename, on
             <span>{p.color}</span>
           </ContextMenuItem>
           <ContextMenuItem onSelect={onRename}>
+            <Codicon name="text-size" size="0.875rem" />
+            <span>{p.renameMenu}</span>
+          </ContextMenuItem>
+          <ContextMenuItem onSelect={onEditSoul}>
             <Codicon name="edit" size="0.875rem" />
-            <span>{p.rename}</span>
+            <span>{p.editSoul}</span>
           </ContextMenuItem>
           <ContextMenuItem
             className="text-destructive focus:text-destructive"
diff --git a/apps/desktop/src/app/chat/sidebar/project-dialog.tsx b/apps/desktop/src/app/chat/sidebar/project-dialog.tsx
index dcd9f067f..5d0fc29db 100644
--- a/apps/desktop/src/app/chat/sidebar/project-dialog.tsx
+++ b/apps/desktop/src/app/chat/sidebar/project-dialog.tsx
@@ -149,10 +149,7 @@ export function ProjectDialog() {
 
   return (
     <Dialog onOpenChange={onOpenChange} open={open}>
-      <DialogContent
-        className="max-w-md"
-        onInteractOutside={event => event.preventDefault()}
-      >
+      <DialogContent className="max-w-md" onInteractOutside={event => event.preventDefault()}>
         <DialogHeader>
           <DialogTitle>{title}</DialogTitle>
           {mode === 'create' && <DialogDescription>{p.createDesc}</DialogDescription>}
diff --git a/apps/desktop/src/app/chat/sidebar/projects/workspace-groups.ts b/apps/desktop/src/app/chat/sidebar/projects/workspace-groups.ts
index 4ab4261af..899a59e69 100644
--- a/apps/desktop/src/app/chat/sidebar/projects/workspace-groups.ts
+++ b/apps/desktop/src/app/chat/sidebar/projects/workspace-groups.ts
@@ -1,5 +1,6 @@
 import type { HermesGitWorktree } from '@/global'
 import type { ProjectInfo, SessionInfo } from '@/hermes'
+import { normalize } from '@/lib/text'
 
 // Session grouping is now computed authoritatively on the backend
 // (`tui_gateway/project_tree.py`, exposed via `projects.tree` /
@@ -191,7 +192,7 @@ export function mergeRepoWorktreeGroups(
       return branchForPath !== group.label ? { ...group, label: branchForPath } : group
     }
 
-    const livePath = livePathByBranch.get(group.label.trim().toLowerCase())
+    const livePath = livePathByBranch.get(normalize(group.label))
 
     if (livePath && normalizePath(livePath) !== normalizePath(group.path)) {
       return { ...group, id: livePath, path: livePath }
diff --git a/apps/desktop/src/app/chat/sidebar/reorderable-list.tsx b/apps/desktop/src/app/chat/sidebar/reorderable-list.tsx
index 8be14fcb8..736096572 100644
--- a/apps/desktop/src/app/chat/sidebar/reorderable-list.tsx
+++ b/apps/desktop/src/app/chat/sidebar/reorderable-list.tsx
@@ -1,4 +1,4 @@
-import type { useSensors } from '@dnd-kit/core';
+import type { useSensors } from '@dnd-kit/core'
 import { closestCenter, DndContext, type DragEndEvent } from '@dnd-kit/core'
 import { arrayMove, SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable'
 import type * as React from 'react'
diff --git a/apps/desktop/src/app/chat/sidebar/session-row.tsx b/apps/desktop/src/app/chat/sidebar/session-row.tsx
index 2451f4d41..d2543b905 100644
--- a/apps/desktop/src/app/chat/sidebar/session-row.tsx
+++ b/apps/desktop/src/app/chat/sidebar/session-row.tsx
@@ -11,6 +11,7 @@ import { type Translations, useI18n } from '@/i18n'
 import { sessionTitle } from '@/lib/chat-runtime'
 import { triggerHaptic } from '@/lib/haptics'
 import { handoffOriginSource, sessionSourceLabel } from '@/lib/session-source'
+import { coarseElapsed } from '@/lib/time'
 import { cn } from '@/lib/utils'
 import { $attentionSessionIds } from '@/store/session'
 import { canOpenSessionWindow, openSessionInNewWindow } from '@/store/windows'
@@ -35,22 +36,13 @@ interface SidebarSessionRowProps extends React.ComponentProps<'div'> {
   dragHandleProps?: React.HTMLAttributes<HTMLElement>
 }
 
-const AGE_TICKS: ReadonlyArray<[number, 'ageDay' | 'ageHour' | 'ageMin']> = [
-  [86_400_000, 'ageDay'],
-  [3_600_000, 'ageHour'],
-  [60_000, 'ageMin']
-]
+const AGE_KEY = { day: 'ageDay', hour: 'ageHour', minute: 'ageMin' } as const
 
 function formatAge(seconds: number, r: Translations['sidebar']['row']): string {
-  const delta = Math.max(0, Date.now() - seconds * 1000)
+  const { unit, value } = coarseElapsed(Date.now() - seconds * 1000)
 
-  for (const [ms, key] of AGE_TICKS) {
-    if (delta >= ms) {
-      return `${Math.floor(delta / ms)}${r[key]}`
-    }
-  }
-
-  return r.ageNow
+  // Under a minute reads as "now" — the sidebar never shows a seconds tick.
+  return unit === 'second' ? r.ageNow : `${value}${r[AGE_KEY[unit]]}`
 }
 
 export function SidebarSessionRow({
@@ -129,7 +121,7 @@ export function SidebarSessionRow({
           </div>
         }
         className={cn(
-          'group relative cursor-pointer transition-colors duration-100 ease-out hover:bg-(--ui-row-hover-background) hover:transition-none',
+          'group row-hover relative',
           isSelected && 'bg-(--ui-row-active-background)',
           isWorking && 'text-foreground',
           // Opaque surface while lifted so the dragged row erases what's under
diff --git a/apps/desktop/src/app/command-center/index.tsx b/apps/desktop/src/app/command-center/index.tsx
index 765951809..5eb2cf8a5 100644
--- a/apps/desktop/src/app/command-center/index.tsx
+++ b/apps/desktop/src/app/command-center/index.tsx
@@ -1,14 +1,17 @@
 import { useStore } from '@nanostores/react'
 import { type MouseEvent, type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
+import { LogTail } from '@/components/chat/log-tail'
 import { PageLoader } from '@/components/page-loader'
 import { Button } from '@/components/ui/button'
 import { SearchField } from '@/components/ui/search-field'
 import { SegmentedControl } from '@/components/ui/segmented-control'
+import { ResponsiveTabs } from '@/components/ui/tab-dropdown'
 import { getActionStatus, getLogs, getStatus, getUsageAnalytics, restartGateway, updateHermes } from '@/hermes'
 import type { ActionStatusResponse, AnalyticsResponse, StatusResponse } from '@/hermes'
 import { useI18n } from '@/i18n'
 import { sessionTitle } from '@/lib/chat-runtime'
+import { compactNumber } from '@/lib/format'
 import {
   Activity,
   AlertCircle,
@@ -21,6 +24,7 @@ import {
   Wrench
 } from '@/lib/icons'
 import { exportSession } from '@/lib/session-export'
+import { fmtDateTime } from '@/lib/time'
 import { cn } from '@/lib/utils'
 import { upsertDesktopActionTask } from '@/store/activity'
 import { $pinnedSessionIds, pinSession, unpinSession } from '@/store/layout'
@@ -28,7 +32,7 @@ import { $sessions, sessionPinId } from '@/store/session'
 
 import { useRefreshHotkey } from '../hooks/use-refresh-hotkey'
 import { useRouteEnumParam } from '../hooks/use-route-enum-param'
-import { OverlayMain, OverlayNavItem, OverlaySidebar, OverlaySplitLayout } from '../overlays/overlay-split-layout'
+import { OverlayMain, OverlayNav, OverlaySplitLayout } from '../overlays/overlay-split-layout'
 import { OverlayView } from '../overlays/overlay-view'
 
 import { MaintenancePanel } from './maintenance'
@@ -63,7 +67,7 @@ function formatTimestamp(value?: number | null): string {
     return ''
   }
 
-  return new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'short' }).format(date)
+  return fmtDateTime.format(date)
 }
 
 function useDebouncedValue<T>(value: T, delayMs: number): T {
@@ -291,29 +295,27 @@ export function CommandCenterView({ initialSection, onClose, onDeleteSession, on
   return (
     <OverlayView closeLabel={cc.close} onClose={onClose}>
       <OverlaySplitLayout>
-        <OverlaySidebar>
-          {SECTIONS.map(value => (
-            <OverlayNavItem
-              active={section === value}
-              icon={
-                value === 'sessions'
-                  ? MessageCircle
-                  : value === 'system'
-                    ? Activity
-                    : value === 'maintenance'
-                      ? Wrench
-                      : BarChart3
-              }
-              key={value}
-              label={cc.sections[value]}
-              onClick={() => setSection(value)}
-            />
-          ))}
-        </OverlaySidebar>
+        <OverlayNav
+          groups={SECTIONS.map(value => ({
+            active: section === value,
+            icon:
+              value === 'sessions'
+                ? MessageCircle
+                : value === 'system'
+                  ? Activity
+                  : value === 'maintenance'
+                    ? Wrench
+                    : BarChart3,
+            id: value,
+            label: cc.sections[value],
+            onSelect: () => setSection(value)
+          }))}
+        />
 
         <OverlayMain>
-          <header className="mb-4 flex items-center justify-between gap-3">
-            <div className="min-w-0">
+          <header className="mb-4 flex items-center justify-between gap-3 max-[47.5rem]:mb-2">
+            {/* Redundant on narrow — the nav dropdown already names the section. */}
+            <div className="min-w-0 max-[47.5rem]:hidden">
               <h2 className="text-[length:var(--conversation-text-font-size)] font-semibold text-foreground">
                 {cc.sections[section]}
               </h2>
@@ -406,12 +408,12 @@ export function CommandCenterView({ initialSection, onClose, onDeleteSession, on
               <div>
                 {status ? (
                   <div className="grid gap-2">
-                    <div className="flex items-start justify-between gap-3">
+                    <div className="flex items-start justify-between gap-3 max-[47.5rem]:flex-col max-[47.5rem]:gap-2">
                       <div className="min-w-0">
                         <div className="flex items-center gap-2">
                           <span
                             className={cn(
-                              'size-2 rounded-full',
+                              'size-2 shrink-0 rounded-full',
                               status.gateway_running ? 'bg-emerald-500' : 'bg-amber-500'
                             )}
                           />
@@ -423,7 +425,7 @@ export function CommandCenterView({ initialSection, onClose, onDeleteSession, on
                           {cc.hermesActiveSessions(status.version, status.active_sessions)}
                         </div>
                       </div>
-                      <div className="flex shrink-0 items-center gap-1.5 whitespace-nowrap">
+                      <div className="flex shrink-0 flex-wrap items-center gap-x-3 gap-y-1 whitespace-nowrap max-[47.5rem]:whitespace-normal">
                         <Button onClick={() => void runSystemAction('restart')} size="xs" variant="text">
                           {cc.restartGateway}
                         </Button>
@@ -449,19 +451,21 @@ export function CommandCenterView({ initialSection, onClose, onDeleteSession, on
               </div>
 
               <div className="flex min-h-0 flex-col pt-2">
-                <div className="mb-2 flex flex-wrap items-center justify-between gap-2">
+                <div className="mb-2 flex flex-wrap items-center justify-between gap-x-3 gap-y-1">
                   <span className="text-[0.625rem] font-medium uppercase tracking-[0.08em] text-(--ui-text-tertiary)">
                     {cc.recentLogs}
                   </span>
-                  <div className="flex items-center gap-2">
-                    <SegmentedControl
-                      onChange={id => setLogFile(id)}
-                      options={LOG_FILES.map(value => ({ id: value, label: value }))}
+                  <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
+                    <ResponsiveTabs
+                      align="end"
+                      onChange={id => setLogFile(id as (typeof LOG_FILES)[number])}
+                      tabs={LOG_FILES.map(value => ({ id: value, label: value }))}
                       value={logFile}
                     />
-                    <SegmentedControl
-                      onChange={id => setLogLevel(id)}
-                      options={LOG_LEVELS.map(value => ({
+                    <ResponsiveTabs
+                      align="end"
+                      onChange={id => setLogLevel(id as (typeof LOG_LEVELS)[number])}
+                      tabs={LOG_LEVELS.map(value => ({
                         id: value,
                         label: value === 'ALL' ? 'all' : value.toLowerCase()
                       }))}
@@ -481,12 +485,11 @@ export function CommandCenterView({ initialSection, onClose, onDeleteSession, on
                     </span>
                   )}
                 </div>
-                <pre
-                  className="min-h-0 flex-1 overflow-auto whitespace-pre-wrap wrap-break-word rounded-lg border border-(--ui-stroke-tertiary) bg-(--ui-bg-quinary) p-3 font-mono text-[0.65rem] leading-relaxed text-(--ui-text-tertiary)"
-                  data-selectable-text="true"
-                >
-                  {visibleLogs.length ? visibleLogs.join('\n') : cc.noLogs}
-                </pre>
+                <LogTail
+                  className="flex-1 rounded-lg border border-(--ui-stroke-tertiary) bg-(--ui-bg-quinary)"
+                  emptyLabel={cc.noLogs}
+                  lines={systemLoading && logs.length === 0 ? null : visibleLogs}
+                />
               </div>
             </div>
           )}
@@ -496,24 +499,6 @@ export function CommandCenterView({ initialSection, onClose, onDeleteSession, on
   )
 }
 
-function formatTokens(value: null | number | undefined): string {
-  const num = Number(value || 0)
-
-  if (num >= 1_000_000) {
-    return `${(num / 1_000_000).toFixed(1)}M`
-  }
-
-  if (num >= 1_000) {
-    return `${(num / 1_000).toFixed(1)}K`
-  }
-
-  return num.toLocaleString()
-}
-
-function formatInteger(value: null | number | undefined): string {
-  return Number(value ?? 0).toLocaleString()
-}
-
 interface UsagePanelProps {
   error: string
   loading: boolean
@@ -567,11 +552,11 @@ function UsagePanel({ error, loading, onRefresh, period, usage }: UsagePanelProp
       )}
 
       <div className="grid grid-cols-2 gap-x-4 gap-y-4 py-2 sm:grid-cols-3">
-        <UsageStat label={cc.statSessions} value={formatInteger(totals.total_sessions)} />
-        <UsageStat label={cc.statApiCalls} value={formatInteger(totals.total_api_calls)} />
+        <UsageStat label={cc.statSessions} value={compactNumber(totals.total_sessions)} />
+        <UsageStat label={cc.statApiCalls} value={compactNumber(totals.total_api_calls)} />
         <UsageStat
           label={cc.statTokens}
-          value={`${formatTokens(totals.total_input)} / ${formatTokens(totals.total_output)}`}
+          value={`${compactNumber(totals.total_input)} / ${compactNumber(totals.total_output)}`}
         />
       </div>
 
@@ -604,7 +589,7 @@ function UsagePanel({ error, loading, onRefresh, period, usage }: UsagePanelProp
                   <div
                     className="group relative flex h-24 min-w-0 flex-1 flex-col justify-end"
                     key={entry.day}
-                    title={`${entry.day} · in ${formatTokens(entry.input_tokens)} · out ${formatTokens(entry.output_tokens)}`}
+                    title={`${entry.day} · in ${compactNumber(entry.input_tokens)} · out ${compactNumber(entry.output_tokens)}`}
                   >
                     <div
                       className="w-full rounded-t-[1px] bg-[color:var(--dt-primary)]/50"
@@ -632,7 +617,7 @@ function UsagePanel({ error, loading, onRefresh, period, usage }: UsagePanelProp
           rows={byModel.slice(0, 6).map(entry => ({
             key: entry.model,
             label: entry.model,
-            value: `${formatTokens((entry.input_tokens || 0) + (entry.output_tokens || 0))}`
+            value: `${compactNumber((entry.input_tokens || 0) + (entry.output_tokens || 0))}`
           }))}
           title={cc.topModels}
         />
@@ -641,7 +626,7 @@ function UsagePanel({ error, loading, onRefresh, period, usage }: UsagePanelProp
           rows={topSkills.slice(0, 6).map(entry => ({
             key: entry.skill,
             label: entry.skill,
-            value: cc.actions(entry.total_count.toLocaleString())
+            value: cc.actions(compactNumber(entry.total_count))
           }))}
           title={cc.topSkills}
         />
diff --git a/apps/desktop/src/app/command-palette/index.tsx b/apps/desktop/src/app/command-palette/index.tsx
index ec1c79566..be89ebb4e 100644
--- a/apps/desktop/src/app/command-palette/index.tsx
+++ b/apps/desktop/src/app/command-palette/index.tsx
@@ -6,7 +6,7 @@ import { useNavigate } from 'react-router-dom'
 
 import { HUD_HEADING, HUD_ITEM, HUD_POSITION, HUD_SURFACE, HUD_TEXT } from '@/app/floating-hud'
 import { setTerminalTakeover } from '@/app/right-sidebar/store'
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command'
+import { Command, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command'
 import { KbdCombo } from '@/components/ui/kbd'
 import { getHermesConfigRecord, listAllProfileSessions } from '@/hermes'
 import { useI18n } from '@/i18n'
@@ -26,6 +26,7 @@ import {
   type IconComponent,
   Info,
   KeyRound,
+  Layers3,
   MessageCircle,
   Monitor,
   Moon,
@@ -36,6 +37,7 @@ import {
   RefreshCw,
   Settings,
   Settings2,
+  SlidersHorizontal,
   Starmap,
   Sun,
   Terminal,
@@ -43,6 +45,7 @@ import {
   Wrench,
   Zap
 } from '@/lib/icons'
+import { normalize } from '@/lib/text'
 import { cn } from '@/lib/utils'
 import { $repoWorktrees } from '@/store/coding-status'
 import {
@@ -55,6 +58,7 @@ import { $bindings } from '@/store/keybinds'
 import { openPetGenerate } from '@/store/pet-generate'
 import { requestStartWorkSession } from '@/store/projects'
 import { runGatewayRestart } from '@/store/system-actions'
+import { applyBackendUpdate } from '@/store/updates'
 import { luminance } from '@/themes/color'
 import { type ThemeMode, useTheme } from '@/themes/context'
 import { isUserTheme, resolveTheme } from '@/themes/user-themes'
@@ -118,22 +122,88 @@ interface SessionEntry {
   title: string
 }
 
-// cmdk defaults to fuzzy subsequence scoring, so "color" matches anything with
-// c…o…l…o…r scattered across it. Use case-insensitive multi-term substring
-// matching instead: every typed word must literally appear in the item's
-// value/keywords, which keeps results tight and predictable.
-const paletteFilter = (value: string, search: string, keywords?: string[]): number => {
-  const needle = search.trim().toLowerCase()
+// Ranking happens in React, not cmdk. We score, sort, and prune the groups
+// ourselves and hand cmdk an already-ordered list with `shouldFilter={false}`,
+// leaving it as pure keyboard/selection machinery. (cmdk's own group
+// re-sorting silently no-ops: its sort() queries groups by an internal id that
+// never matches the heading text it writes into `data-value`, so groups always
+// keep source order — which put a generic keyword match like "Capabilities" on
+// top and the auto-highlight on it while an exact "Tools" row sat below.)
+//
+// cmdk still auto-selects the first DOM item whenever the search changes, so
+// rendering best-match-first is what puts the highlight on the best match.
+//
+// AND semantics: every typed word must appear in the label or keywords. The
+// grade rewards matches on the visible label — exact > prefix > whole word >
+// word prefix > substring > scattered terms > keyword-only — so typing "tools"
+// selects the row that says Tools, not a row that hides it in keywords.
+const scoreItem = (item: PaletteItem, needle: string): number => {
+  const label = item.label.toLowerCase()
+  const keys = (item.keywords ?? []).join(' ').toLowerCase()
+  const terms = needle.split(/\s+/).filter(Boolean)
 
-  if (!needle) {
+  if (terms.some(term => !label.includes(term) && !keys.includes(term))) {
+    return 0
+  }
+
+  if (label === needle) {
     return 1
   }
 
-  const haystack = `${value} ${keywords?.join(' ') ?? ''}`.toLowerCase()
+  if (label.startsWith(needle)) {
+    return 0.9
+  }
 
-  return needle.split(/\s+/).every(term => haystack.includes(term)) ? 1 : 0
+  const words = label.split(/[^\p{L}\p{N}]+/u).filter(Boolean)
+
+  if (words.includes(needle)) {
+    return 0.85
+  }
+
+  if (words.some(word => word.startsWith(needle))) {
+    return 0.8
+  }
+
+  if (label.includes(needle)) {
+    return 0.7
+  }
+
+  if (terms.every(term => label.includes(term))) {
+    return 0.6
+  }
+
+  // Matched only via keywords — the weakest, generic-row signal.
+  return 0.4
 }
 
+// Order items within each group by score, order groups by their best item, and
+// drop everything that doesn't match. Ties keep their original order (stable
+// sort), so curated group/item ordering still breaks even scores.
+const rankGroups = (groups: PaletteGroup[], search: string): PaletteGroup[] => {
+  const needle = normalize(search)
+
+  if (!needle) {
+    return groups
+  }
+
+  return groups
+    .map(group => {
+      const scored = group.items
+        .map(item => ({ item, score: scoreItem(item, needle) }))
+        .filter(entry => entry.score > 0)
+        .sort((a, b) => b.score - a.score)
+
+      return { group: { ...group, items: scored.map(entry => entry.item) }, max: scored[0]?.score ?? 0 }
+    })
+    .filter(entry => entry.max > 0)
+    .sort((a, b) => b.max - a.max)
+    .map(entry => entry.group)
+}
+
+// cmdk selection values must be unique; labels alone can repeat (the same
+// theme lists under both Light and Dark). The id suffix disambiguates.
+const paletteValue = (item: PaletteItem): string => `${item.label}\u0001${item.id}`
+
 // Hermes session ids: <YYYYMMDD>_<HHMMSS>_<6 hex>. Used to offer a direct
 // "Go to session ‹id›" jump for ids that aren't in the recent-200 list.
 const SESSION_ID_RE = /^\d{8}_\d{6}_[a-f0-9]{6}$/
@@ -187,7 +257,6 @@ const NON_CONFIG_SETTINGS: ReadonlyArray<{
     labelKey: 'keysSettings',
     tab: 'keys&kview=settings'
   },
-  { icon: Wrench, keywords: ['servers', 'tools'], labelKey: 'mcp', tab: 'mcp' },
   { icon: Archive, keywords: ['history', 'archived'], labelKey: 'archivedChats', tab: 'sessions' },
   { icon: Info, keywords: ['version', 'about'], labelKey: 'about', tab: 'about' }
 ]
@@ -358,7 +427,7 @@ export function CommandPalette() {
             action: 'nav.skills',
             icon: Wrench,
             id: 'nav-skills',
-            keywords: ['tools', 'toolsets'],
+            keywords: ['skills', 'tools', 'toolsets', 'mcp', 'capabilities'],
             label: cc.nav.skills.title,
             run: go(SKILLS_ROUTE)
           },
@@ -426,6 +495,13 @@ export function CommandPalette() {
             keywords: ['gateway', 'restart', 'messaging', 'reconnect', 'system'],
             label: cc.restartGateway,
             run: () => void runGatewayRestart()
+          },
+          {
+            icon: Download,
+            id: 'cc-update-hermes',
+            keywords: ['update', 'upgrade', 'hermes', 'version', 'system', 'restart'],
+            label: cc.updateHermes,
+            run: () => void applyBackendUpdate()
           }
         ]
       },
@@ -515,6 +591,73 @@ export function CommandPalette() {
       })
     }
 
+    // Deep-link straight to a Capabilities sub-tab. The root "Go to" entry only
+    // lands on the top-level Skills view; typing "mcp"/"tools"/"skills" should
+    // jump to the exact tab (matches the "not just the top lvl" ask).
+    const capLabel = t.commandCenter.nav.skills.title
+
+    result.push({
+      heading: capLabel,
+      items: [
+        {
+          icon: Wrench,
+          id: 'cap-skills',
+          keywords: ['skills', 'capabilities'],
+          label: `${capLabel}: ${t.skills.tabSkills}`,
+          run: go(`${SKILLS_ROUTE}?tab=skills`)
+        },
+        {
+          icon: SlidersHorizontal,
+          id: 'cap-toolsets',
+          keywords: ['tools', 'toolsets', 'capabilities'],
+          label: `${capLabel}: ${t.skills.tabToolsets}`,
+          run: go(`${SKILLS_ROUTE}?tab=toolsets`)
+        },
+        {
+          icon: Layers3,
+          id: 'cap-mcp',
+          keywords: ['mcp', 'servers', 'tools', 'capabilities', 'model context protocol'],
+          label: `${capLabel}: ${t.skills.tabMcp}`,
+          run: go(`${SKILLS_ROUTE}?tab=mcp`)
+        }
+      ]
+    })
+
+    // Apply a theme directly from the root search (e.g. "nous" → Nous). Live
+    // preview via keepOpen, mirroring the nested theme picker. If the theme
+    // can't render the current light/dark mode, flip to the one it supports.
+    result.push({
+      heading: t.settings.appearance.themeTitle,
+      items: availableThemes.map(theme => ({
+        icon: Palette,
+        id: `search-theme-${theme.name}`,
+        keepOpen: true,
+        keywords: ['theme', 'appearance', 'color', 'skin', theme.name, theme.description],
+        label: theme.label,
+        run: () => {
+          setTheme(theme.name)
+
+          if (!themeSupportsMode(theme.name, resolvedMode)) {
+            setMode(resolvedMode === 'dark' ? 'light' : 'dark')
+          }
+        }
+      }))
+    })
+
+    // Switch light/dark/system directly (typing "dark" shouldn't require the
+    // nested color-mode page).
+    result.push({
+      heading: t.settings.appearance.colorMode,
+      items: THEME_MODES.map(entry => ({
+        icon: entry.icon,
+        id: `search-mode-${entry.mode}`,
+        keepOpen: true,
+        keywords: ['appearance', 'color mode', 'brightness', entry.mode, t.settings.modeOptions[entry.mode].label],
+        label: t.settings.modeOptions[entry.mode].label,
+        run: () => setMode(entry.mode)
+      }))
+    })
+
     if (sessions.length > 0) {
       result.push({
         heading: t.commandCenter.sections.sessions,
@@ -548,7 +691,7 @@ export function CommandPalette() {
           id: `mcp-${name}`,
           keywords: ['mcp', 'server', 'tool'],
           label: name,
-          run: go(`${SETTINGS_ROUTE}?tab=mcp&server=${encodeURIComponent(name)}`)
+          run: go(`${SKILLS_ROUTE}?tab=mcp&server=${encodeURIComponent(name)}`)
         }))
       })
     }
@@ -567,7 +710,20 @@ export function CommandPalette() {
     }
 
     return result
-  }, [archivedSessions, configFieldLabel, go, mcpServers, search, sessions, settingsSectionLabel, t])
+  }, [
+    archivedSessions,
+    availableThemes,
+    configFieldLabel,
+    go,
+    mcpServers,
+    resolvedMode,
+    search,
+    sessions,
+    setMode,
+    setTheme,
+    settingsSectionLabel,
+    t
+  ])
 
   const groups = useMemo(() => [...baseGroups, ...searchGroups], [baseGroups, searchGroups])
 
@@ -639,7 +795,7 @@ export function CommandPalette() {
       // Server-driven page: items come from the Marketplace, rendered by
       // <MarketplaceThemePage> (loader + live search + per-row install).
       'install-theme': {
-        title: t.commandCenter.installTheme.title,
+        title: t.commandCenter.installTheme.pageTitle,
         placeholder: t.commandCenter.installTheme.placeholder,
         groups: []
       }
@@ -648,7 +804,8 @@ export function CommandPalette() {
   )
 
   const activePage = page ? subPages[page] : null
-  const visibleGroups = activePage ? activePage.groups : groups
+  const unrankedGroups = activePage ? activePage.groups : groups
+  const visibleGroups = useMemo(() => rankGroups(unrankedGroups, search), [unrankedGroups, search])
   const placeholder = activePage ? activePage.placeholder : t.commandCenter.searchPlaceholder
 
   const handleSelect = (item: PaletteItem) => {
@@ -680,7 +837,7 @@ export function CommandPalette() {
           )}
         >
           <DialogPrimitive.Title className="sr-only">{t.commandCenter.paletteTitle}</DialogPrimitive.Title>
-          <Command className="bg-transparent" filter={paletteFilter} loop>
+          <Command className="bg-transparent" loop shouldFilter={false}>
             {activePage && (
               <button
                 className="flex w-full items-center gap-1.5 border-b border-border px-3 py-1.5 text-left text-xs text-muted-foreground transition-colors hover:text-foreground"
@@ -729,7 +886,11 @@ export function CommandPalette() {
                 <MarketplaceThemePage onPickTheme={setTheme} search={search} />
               ) : (
                 <>
-                  <CommandEmpty>{t.commandCenter.noResults}</CommandEmpty>
+                  {/* Filtering happens in rankGroups, so cmdk's own CommandEmpty
+                      (keyed to its internal filter count) would never fire. */}
+                  {visibleGroups.length === 0 && (
+                    <div className="py-6 text-center text-sm text-muted-foreground">{t.commandCenter.noResults}</div>
+                  )}
                   {visibleGroups.map((group, index) => (
                     <CommandGroup
                       className={HUD_HEADING}
@@ -746,7 +907,7 @@ export function CommandPalette() {
                             key={item.id}
                             keywords={item.keywords}
                             onSelect={() => handleSelect(item)}
-                            value={`${item.label} ${item.keywords?.join(' ') ?? ''} ${item.id}`}
+                            value={paletteValue(item)}
                           >
                             <Icon className="size-3.5 shrink-0 text-muted-foreground" />
                             <span className="truncate">{item.label}</span>
diff --git a/apps/desktop/src/app/cron/index.tsx b/apps/desktop/src/app/cron/index.tsx
index eb298bde1..7989125af 100644
--- a/apps/desktop/src/app/cron/index.tsx
+++ b/apps/desktop/src/app/cron/index.tsx
@@ -30,6 +30,7 @@ import {
 } from '@/hermes'
 import { type Translations, useI18n } from '@/i18n'
 import { AlertTriangle } from '@/lib/icons'
+import { asText } from '@/lib/text'
 import { $cronFocusJobId, $cronJobs, setCronFocusJobId, setCronJobs, updateCronJobs } from '@/store/cron'
 import { notify, notifyError } from '@/store/notifications'
 
@@ -79,8 +80,6 @@ const STATE_TONE: Record<string, PanelPillTone> = {
   completed: 'muted'
 }
 
-const asText = (value: unknown): string => (typeof value === 'string' ? value : '')
-
 const truncate = (value: string, max = 80): string => (value.length > max ? `${value.slice(0, max)}…` : value)
 
 function jobName(job: CronJob): string {
@@ -432,6 +431,12 @@ export function CronView({ onClose, onOpenSession, setStatusbarItemGroup: _setSt
           <PanelBody>
             <PanelList
               onSearchChange={setQuery}
+              // TODO(i18n): literal until the UX settles.
+              searchHints={jobs
+                .map(jobTitle)
+                .filter(Boolean)
+                .slice(0, 5)
+                .map(title => `Try “${title}”`)}
               searchLabel={c.search}
               searchPlaceholder={c.search}
               searchValue={query}
@@ -677,7 +682,7 @@ function CronJobRuns({
         <div className="flex flex-col gap-px">
           {runs.map(run => (
             <button
-              className="flex items-center justify-between gap-3 rounded-md px-2 py-1 text-left text-xs transition-colors duration-100 hover:bg-(--ui-row-hover-background) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"
+              className="row-hover flex items-center justify-between gap-3 rounded-md px-2 py-1 text-left text-xs focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"
               key={run.id}
               onClick={() => onOpenSession?.(run.id)}
               type="button"
diff --git a/apps/desktop/src/app/desktop-controller.tsx b/apps/desktop/src/app/desktop-controller.tsx
index 3325857dd..4b8c249bc 100644
--- a/apps/desktop/src/app/desktop-controller.tsx
+++ b/apps/desktop/src/app/desktop-controller.tsx
@@ -46,12 +46,7 @@ import {
   setPetOverlaySubmitHandler
 } from '../store/pet-overlay'
 import { $filePreviewTarget, $previewTarget, closeActiveRightRailTab } from '../store/preview'
-import {
-  $activeGatewayProfile,
-  $freshSessionRequest,
-  $profileScope,
-  refreshActiveProfile
-} from '../store/profile'
+import { $activeGatewayProfile, $freshSessionRequest, $profileScope, refreshActiveProfile } from '../store/profile'
 import { $startWorkSessionRequest, followActiveSessionCwd, resolveNewSessionCwd } from '../store/projects'
 import { $reviewOpen, REVIEW_PANE_ID } from '../store/review'
 import {
@@ -176,7 +171,7 @@ function sessionMessagesSignature(messages: SessionMessage[]): string {
   for (const m of messages) {
     hash = hashString(hash, m.role)
     hash = hashString(hash, String(m.timestamp ?? ''))
-    hash = hashString(hash, typeof m.content === 'string' ? m.content : JSON.stringify(m.content) ?? '')
+    hash = hashString(hash, typeof m.content === 'string' ? m.content : (JSON.stringify(m.content) ?? ''))
   }
 
   return `${messages.length}:${hash}`
diff --git a/apps/desktop/src/app/floating-hud.ts b/apps/desktop/src/app/floating-hud.ts
index ef501dcc6..1655fc99f 100644
--- a/apps/desktop/src/app/floating-hud.ts
+++ b/apps/desktop/src/app/floating-hud.ts
@@ -2,7 +2,14 @@
 // switcher). They pin just under the title bar, centered, and lean on a crisp
 // border + shadow to separate from the app — no dimming/blurring backdrop.
 // Each caller layers on its own z-index, width, and overflow.
-export const HUD_POSITION = 'fixed left-1/2 top-3 -translate-x-1/2'
+//
+// Narrow screens: the centered HUD widens toward full-width and its top-left
+// corner slides under the macOS traffic lights. Below ~44rem (where the overlap
+// begins) drop the whole surface beneath the titlebar band so the search row
+// always clears the window controls. These HUDs portal to <body>, outside the
+// app-shell subtree that defines --titlebar-height, so the var needs a fallback.
+export const HUD_POSITION =
+  'fixed left-1/2 top-3 -translate-x-1/2 max-[44rem]:top-[calc(var(--titlebar-height,34px)+0.375rem)]'
 
 // Matches the app's borderless-overlay surface (dialog, keybind panel, …):
 // hairline `--stroke-nous` paired with the soft `--shadow-nous` float.
diff --git a/apps/desktop/src/app/hooks/use-config-record.ts b/apps/desktop/src/app/hooks/use-config-record.ts
new file mode 100644
index 000000000..ca4f00cb2
--- /dev/null
+++ b/apps/desktop/src/app/hooks/use-config-record.ts
@@ -0,0 +1,22 @@
+import { useQuery } from '@tanstack/react-query'
+
+import { getHermesConfigRecord } from '@/hermes'
+import { queryClient, writeCache } from '@/lib/query-client'
+import type { HermesConfigRecord } from '@/types/hermes'
+
+// One shared cache for the whole profile config record (`GET /api/config`).
+// Every settings surface (MCP, model, config) reads and writes through this key
+// so a save in one shows in the others, and revisiting a tab paints the cache
+// instead of blanking on a fresh fetch.
+//
+// Distinct from session/hooks/use-hermes-config.ts, which is side-effecting —
+// it pushes personality/cwd/voice/… into the session stores for live chat.
+export const HERMES_CONFIG_KEY = ['hermes-config-record'] as const
+
+// staleTime 0 → serve cache instantly, background-revalidate on every mount.
+export const useHermesConfigRecord = () =>
+  useQuery({ queryKey: HERMES_CONFIG_KEY, queryFn: getHermesConfigRecord, staleTime: 0 })
+
+export const setHermesConfigCache = writeCache<HermesConfigRecord>(HERMES_CONFIG_KEY)
+
+export const invalidateHermesConfig = () => queryClient.invalidateQueries({ queryKey: HERMES_CONFIG_KEY })
diff --git a/apps/desktop/src/app/hooks/use-debounced.ts b/apps/desktop/src/app/hooks/use-debounced.ts
new file mode 100644
index 000000000..1fc80bbe7
--- /dev/null
+++ b/apps/desktop/src/app/hooks/use-debounced.ts
@@ -0,0 +1,15 @@
+import { useEffect, useState } from 'react'
+
+/** Debounce a fast-changing value (search input, slider, …) so effects/queries
+ *  keyed on it only fire once the value settles. */
+export function useDebounced<T>(value: T, delayMs: number): T {
+  const [debounced, setDebounced] = useState(value)
+
+  useEffect(() => {
+    const handle = setTimeout(() => setDebounced(value), delayMs)
+
+    return () => clearTimeout(handle)
+  }, [value, delayMs])
+
+  return debounced
+}
diff --git a/apps/desktop/src/app/hooks/use-on-profile-switch.ts b/apps/desktop/src/app/hooks/use-on-profile-switch.ts
new file mode 100644
index 000000000..04662a8be
--- /dev/null
+++ b/apps/desktop/src/app/hooks/use-on-profile-switch.ts
@@ -0,0 +1,24 @@
+import { useStore } from '@nanostores/react'
+import { useEffect, useRef } from 'react'
+
+import { $activeGatewayProfile } from '@/store/profile'
+
+/** Run `onSwitch` when the active gateway profile changes — never on first
+ *  mount. For dropping per-profile view state (probes, cached usage, drafts)
+ *  when the backend the app talks to swaps underneath a still-mounted view. */
+export function useOnProfileSwitch(onSwitch: () => void): void {
+  const profile = useStore($activeGatewayProfile)
+  const first = useRef(true)
+
+  useEffect(() => {
+    if (first.current) {
+      first.current = false
+
+      return
+    }
+
+    onSwitch()
+    // Fire on profile change only; onSwitch identity is intentionally ignored.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [profile])
+}
diff --git a/apps/desktop/src/app/learning/archive-skill-confirm-dialog.tsx b/apps/desktop/src/app/learning/archive-skill-confirm-dialog.tsx
new file mode 100644
index 000000000..298e890ee
--- /dev/null
+++ b/apps/desktop/src/app/learning/archive-skill-confirm-dialog.tsx
@@ -0,0 +1,72 @@
+import { ConfirmDialog } from '@/components/ui/confirm-dialog'
+import { deleteLearningNode } from '@/hermes'
+import { notify } from '@/store/notifications'
+
+export const ARCHIVE_SKILL_DESCRIPTION = 'The skill is archived and can be restored with `hermes curator restore`.'
+
+export function notifySkillArchived(): void {
+  // TODO(i18n): literals until the UX settles.
+  notify({ kind: 'success', message: 'Restorable via hermes curator restore.', title: 'Skill archived' })
+}
+
+export async function archiveLearningSkill(id: string): Promise<void> {
+  const res = await deleteLearningNode(id)
+
+  if (!res.ok) {
+    throw new Error(res.message || 'Archive failed')
+  }
+}
+
+/** Fire-and-forget a mutation whose UI already applied optimistically; a failure just rolls it back + reports. */
+export function fireOptimistic(action: Promise<void>, rollback: () => void, onFailure: (err: unknown) => void): void {
+  void action.catch(err => {
+    rollback()
+    onFailure(err)
+  })
+}
+
+interface ArchiveSkillConfirmDialogProps {
+  /** Apply optimistic UI updates; return rollback if the background archive fails. */
+  onApply: () => () => void
+  onClose: () => void
+  onFailure?: (err: unknown, skillName: string) => void
+  onSuccess?: () => void
+  open: boolean
+  skillId: string
+  skillName: string
+}
+
+/** Shared archive confirm for learned skills (capabilities page + memory graph). */
+export function ArchiveSkillConfirmDialog({
+  onApply,
+  onClose,
+  onFailure,
+  onSuccess,
+  open,
+  skillId,
+  skillName
+}: ArchiveSkillConfirmDialogProps) {
+  return (
+    <ConfirmDialog
+      confirmLabel="Archive"
+      description={ARCHIVE_SKILL_DESCRIPTION}
+      destructive
+      dismissOnConfirm
+      onClose={onClose}
+      onConfirm={() => {
+        const rollback = onApply()
+
+        fireOptimistic(
+          archiveLearningSkill(skillId).then(() => {
+            notifySkillArchived()
+            onSuccess?.()
+          }),
+          rollback,
+          err => onFailure?.(err, skillName)
+        )
+      }}
+      open={open}
+      title={`Archive ${skillName}?`}
+    />
+  )
+}
diff --git a/apps/desktop/src/app/master-detail.tsx b/apps/desktop/src/app/master-detail.tsx
new file mode 100644
index 000000000..ef2045612
--- /dev/null
+++ b/apps/desktop/src/app/master-detail.tsx
@@ -0,0 +1,404 @@
+import { useStore } from '@nanostores/react'
+import { type ReactNode, type PointerEvent as ReactPointerEvent, useEffect, useState } from 'react'
+
+import { Button } from '@/components/ui/button'
+import { Codicon } from '@/components/ui/codicon'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
+import { RowButton } from '@/components/ui/row-button'
+import { Switch } from '@/components/ui/switch'
+import { cn } from '@/lib/utils'
+import { $paneHeightOverride, $paneState, setPaneHeightOverride } from '@/store/panes'
+
+// Monospace capability chip (tool name, transport, …). Shared by the Skills
+// and MCP tabs so the pill reads identically everywhere.
+export function ToolChip({ children, title }: { children: ReactNode; title?: string }) {
+  return (
+    <span
+      className="rounded-md bg-(--ui-bg-quinary) px-1.5 py-0.5 font-mono text-[0.65rem] text-(--ui-text-tertiary)"
+      title={title}
+    >
+      {children}
+    </span>
+  )
+}
+
+// Master–detail page scaffolding (14rem rail, p-2, centered max-w-2xl detail):
+// dense uniform rows on the left, roomy inspector on the right. Shared by the
+// Capabilities and Messaging pages — pages bring their own row/detail content
+// (CapRow here is the toggle-row flavor; Messaging has its own avatar rows).
+
+// `pane` docks a full-bleed work surface (editor, log viewer, terminal) below
+// the whole master–detail grid — the app's bottom-pane pattern, page-local.
+// The wide-rail track shared by every Capabilities tab (skills/tools/mcp) so
+// the three read as one page. Exported for pages that build their own grid
+// (the MCP tab's cursor-driven layout) but must stay in step.
+export const MASTER_DETAIL_WIDE_COLS = 'sm:grid-cols-[minmax(0,0.75fr)_minmax(0,1fr)]'
+
+// `split="wide"` gives list-heavy pages a rail that shares the page with a
+// sparse detail (skills/tools/mcp); the default 14rem rail suits pages whose
+// detail carries the weight (messaging).
+export function MasterDetail({
+  children,
+  pane,
+  split = 'rail'
+}: {
+  children: ReactNode
+  pane?: ReactNode
+  split?: 'rail' | 'wide'
+}) {
+  return (
+    <div className="flex h-full min-h-0 flex-col">
+      <div
+        className={cn(
+          'grid min-h-0 flex-1 grid-cols-1',
+          split === 'wide' ? MASTER_DETAIL_WIDE_COLS : 'sm:grid-cols-[14rem_minmax(0,1fr)]'
+        )}
+      >
+        {children}
+      </div>
+      {pane}
+    </div>
+  )
+}
+
+export function ListColumn({ children, header }: { children: ReactNode; header?: ReactNode }) {
+  return (
+    <aside className="flex min-h-0 flex-col p-2">
+      {header}
+      <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain [scrollbar-gutter:stable]">{children}</div>
+    </aside>
+  )
+}
+
+// `footer` pins one quiet caption below the scroll (e.g. "changes apply to
+// new sessions") so per-item detail components never repeat it themselves.
+// `actionBar` pins a real control row (save/toggle) below the scroll instead.
+export function DetailColumn({
+  actionBar,
+  children,
+  footer
+}: {
+  actionBar?: ReactNode
+  children: ReactNode
+  footer?: ReactNode
+}) {
+  return (
+    <main className="flex min-h-0 flex-col overflow-hidden">
+      <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain [scrollbar-gutter:stable]">
+        <div className="mx-auto max-w-2xl space-y-5 px-5 py-4">{children}</div>
+      </div>
+      {footer && (
+        <div className="mx-auto w-full max-w-2xl shrink-0 px-5 pb-3 pt-1.5 text-right text-[0.65rem] text-muted-foreground/50">
+          {footer}
+        </div>
+      )}
+      {actionBar && (
+        <footer className="shrink-0 bg-(--ui-chat-surface-background) px-5 py-2.5">
+          <div className="mx-auto flex max-w-2xl flex-wrap items-center gap-2">{actionBar}</div>
+        </footer>
+      )}
+    </main>
+  )
+}
+
+// Full-bleed docked bottom pane: title strip + actions + close, drag-resizable
+// on its top edge like every other pane (height persisted through the same
+// pane-state store the terminal uses). No min height — drag (or the chevron)
+// collapses it down to just the header. Content swaps freely: JSON editor
+// today, stdio/log viewers tomorrow.
+const DETAIL_PANE_DEFAULT_BODY_PX = 288
+const DETAIL_PANE_MAX_VH = 0.7
+const DETAIL_PANE_COLLAPSED_PX = 4
+
+// Ghost icon-button on the kebab-trigger scale (pane headers, list-strip menu,
+// per-server MCP actions, JSON editor format button). MUST stay a class string
+// (not a CSS @utility): the leading `size-5` is what tailwind-merge uses to
+// strip <Button size="icon">'s larger built-in size — a custom utility class
+// isn't size-merge-aware, so Button's icon size would leak and blow it up.
+// Compose extra state (data-[state=open], hover:text-destructive) with cn().
+export const ICON_BUTTON =
+  'size-5 cursor-pointer rounded-[4px] text-muted-foreground/70 hover:bg-(--ui-control-active-background) hover:text-foreground'
+
+export function DetailPane({
+  actions,
+  children,
+  defaultCollapsed = false,
+  defaultHeight = DETAIL_PANE_DEFAULT_BODY_PX,
+  id,
+  onClose,
+  title
+}: {
+  actions?: ReactNode
+  children: ReactNode
+  /** Start collapsed to the header the first time this pane is ever shown.
+   *  Only seeds when the id has no saved state — a later expand/collapse
+   *  persists and wins, so it's "collapsed by default", not "always collapsed". */
+  defaultCollapsed?: boolean
+  /** Default body height in px (before any user resize). */
+  defaultHeight?: number
+  /** Pane-store key — height overrides persist under it. */
+  id: string
+  /** Omit for permanent panes (collapsible to the header, never removed). */
+  onClose?: () => void
+  title: ReactNode
+}) {
+  const override = useStore($paneHeightOverride(id))
+
+  useEffect(() => {
+    if (defaultCollapsed && $paneState(id).get() === undefined) {
+      setPaneHeightOverride(id, 0)
+    }
+  }, [defaultCollapsed, id])
+
+  const height = override ?? defaultHeight
+  const collapsed = height <= DETAIL_PANE_COLLAPSED_PX
+  // Sash drag mirrors the shell's y-axis pane resize: pointer capture on the
+  // top edge, clamped to [0, 70vh]; double-click resets to the default.
+  const [dragging, setDragging] = useState(false)
+
+  const startDrag = (event: ReactPointerEvent<HTMLDivElement>) => {
+    event.preventDefault()
+    const startY = event.clientY
+    const startHeight = height
+    const max = Math.round(window.innerHeight * DETAIL_PANE_MAX_VH)
+    setDragging(true)
+
+    const onMove = (move: globalThis.PointerEvent) => {
+      setPaneHeightOverride(id, Math.min(max, Math.max(0, Math.round(startHeight + (startY - move.clientY)))))
+    }
+
+    const onUp = () => {
+      window.removeEventListener('pointermove', onMove)
+      setDragging(false)
+    }
+
+    window.addEventListener('pointermove', onMove)
+    window.addEventListener('pointerup', onUp, { once: true })
+  }
+
+  return (
+    <section className="relative flex shrink-0 flex-col border-t border-(--ui-stroke-tertiary) bg-(--ui-chat-surface-background)">
+      <div
+        className="group/sash absolute inset-x-0 top-0 z-10 h-1 -translate-y-1/2 cursor-row-resize"
+        onDoubleClick={() => setPaneHeightOverride(id, undefined)}
+        onPointerDown={startDrag}
+      >
+        <div
+          className={cn(
+            'absolute inset-x-0 top-1/2 h-px -translate-y-1/2 transition-colors',
+            dragging ? 'bg-(--ui-stroke-secondary)' : 'group-hover/sash:bg-(--ui-stroke-secondary)'
+          )}
+        />
+      </div>
+      <header className="flex h-9 shrink-0 items-center gap-2 px-3">
+        <span className="min-w-0 truncate text-xs font-medium text-foreground">{title}</span>
+        <div className="ml-auto flex shrink-0 items-center gap-1.5">
+          {actions}
+          <Button
+            aria-expanded={!collapsed}
+            // TODO(i18n): literals until the UX settles.
+            aria-label={collapsed ? 'Expand' : 'Collapse'}
+            className={ICON_BUTTON}
+            onClick={() => setPaneHeightOverride(id, collapsed ? undefined : 0)}
+            size="icon"
+            variant="ghost"
+          >
+            <Codicon name={collapsed ? 'chevron-up' : 'chevron-down'} size="0.8125rem" />
+          </Button>
+          {onClose && (
+            // TODO(i18n): literal until the UX settles.
+            <Button aria-label="Close" className={ICON_BUTTON} onClick={onClose} size="icon" variant="ghost">
+              <Codicon name="close" size="0.8125rem" />
+            </Button>
+          )}
+        </div>
+      </header>
+      <div className="min-h-0 overflow-hidden" style={{ height: collapsed ? 0 : height }}>
+        {children}
+      </div>
+    </section>
+  )
+}
+
+// One-line control strip pinned above the list: sort/primary action on the
+// left, overflow kebab on the right.
+export function ListStrip({ left, right }: { left?: ReactNode; right?: ReactNode }) {
+  return (
+    <div className="mb-1 flex h-6 shrink-0 items-center justify-between gap-2 pl-2 pr-1">
+      <div className="flex min-w-0 items-center gap-1.5">{left}</div>
+      <div className="flex shrink-0 items-center gap-1.5">{right}</div>
+    </div>
+  )
+}
+
+export interface ListStripMenuItem {
+  disabled?: boolean
+  label: string
+  onSelect: () => void
+}
+
+export interface ListStripMenuToggle {
+  checked: boolean
+  disabled?: boolean
+  label: string
+  onToggle: (checked: boolean) => void
+}
+
+// Overflow kebab for list-wide actions. `toggle` renders as the first row —
+// one label + switch line covering enable-all/disable-all (checked = every
+// visible item on; mixed reads as off so one flip always means "all on").
+export function ListStripMenu({
+  items = [],
+  label,
+  toggle
+}: {
+  items?: ListStripMenuItem[]
+  label: string
+  toggle?: ListStripMenuToggle
+}) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          aria-label={label}
+          className={cn(
+            ICON_BUTTON,
+            'data-[state=open]:bg-(--ui-control-active-background) data-[state=open]:text-foreground'
+          )}
+          size="icon"
+          title={label}
+          variant="ghost"
+        >
+          <Codicon name="kebab-vertical" size="0.8125rem" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-44" sideOffset={6}>
+        {toggle && (
+          <DropdownMenuItem
+            disabled={toggle.disabled}
+            onSelect={event => {
+              // Keep the menu open so the switch is seen flipping.
+              event.preventDefault()
+              toggle.onToggle(!toggle.checked)
+            }}
+          >
+            <span className="min-w-0 flex-1 truncate">{toggle.label}</span>
+            <Switch
+              checked={toggle.checked}
+              className={cn('pointer-events-none shrink-0', !toggle.checked && 'opacity-60')}
+              size="xs"
+              tabIndex={-1}
+            />
+          </DropdownMenuItem>
+        )}
+        {items.map(item => (
+          <DropdownMenuItem disabled={item.disabled} key={item.label} onSelect={item.onSelect}>
+            {item.label}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+export function ListStripButton({
+  active,
+  children,
+  disabled,
+  onClick
+}: {
+  active?: boolean
+  children: ReactNode
+  disabled?: boolean
+  onClick: () => void
+}) {
+  return (
+    <button
+      className={cn(
+        'cursor-pointer text-[0.68rem] font-medium transition-colors disabled:opacity-40',
+        active ? 'text-foreground' : 'text-muted-foreground/70 hover:text-foreground'
+      )}
+      disabled={disabled}
+      onClick={onClick}
+      type="button"
+    >
+      {children}
+    </button>
+  )
+}
+
+interface CapRowProps {
+  active: boolean
+  busy?: boolean
+  enabled: boolean
+  meta?: ReactNode
+  onSelect: () => void
+  onToggle: (checked: boolean) => void
+  rowId?: string
+  /** Second line under the name (category, description, status). Rows grow to h-11. */
+  subtitle?: ReactNode
+  title: string
+  toggleLabel: string
+}
+
+// The one row used by all three lists. Fixed height, always-visible switch —
+// state reads from the switch + dimmed title, toggling never requires
+// selecting first. Off rows dim; the switch itself dims when off.
+export function CapRow({
+  active,
+  busy,
+  enabled,
+  meta,
+  onSelect,
+  onToggle,
+  rowId,
+  subtitle,
+  title,
+  toggleLabel
+}: CapRowProps) {
+  return (
+    <div
+      className={cn(
+        'group/row row-hover flex w-full shrink-0 items-center rounded-md hover:text-foreground',
+        subtitle ? 'h-11' : 'h-8',
+        active ? 'bg-(--ui-row-active-background) text-foreground' : 'text-(--ui-text-secondary)'
+      )}
+      id={rowId}
+    >
+      <RowButton
+        className="flex h-full min-w-0 flex-1 cursor-pointer items-center gap-2 rounded-md pl-2 pr-1.5 text-left"
+        onClick={onSelect}
+      >
+        <span className="min-w-0 flex-1">
+          <span
+            className={cn(
+              'block truncate text-[0.78rem]',
+              enabled ? 'font-medium text-foreground/85' : 'font-normal text-muted-foreground/60'
+            )}
+          >
+            {title}
+          </span>
+          {subtitle != null && (
+            <span className="flex min-w-0 items-center gap-1 text-[0.62rem] text-muted-foreground/50">
+              {typeof subtitle === 'string' ? <span className="truncate">{subtitle}</span> : subtitle}
+            </span>
+          )}
+        </span>
+        {meta != null && (
+          <span className="shrink-0 rounded bg-(--ui-bg-quinary) px-1 py-px text-[0.6rem] tabular-nums leading-3.5 text-(--ui-text-tertiary)">
+            {meta}
+          </span>
+        )}
+      </RowButton>
+      <Switch
+        aria-label={toggleLabel}
+        checked={enabled}
+        className={cn('mr-1.5 shrink-0 cursor-pointer', !enabled && 'opacity-60')}
+        disabled={busy}
+        onCheckedChange={onToggle}
+        size="xs"
+        title={toggleLabel}
+      />
+    </div>
+  )
+}
diff --git a/apps/desktop/src/app/messaging/index.tsx b/apps/desktop/src/app/messaging/index.tsx
index b2d5837fe..13d68c63b 100644
--- a/apps/desktop/src/app/messaging/index.tsx
+++ b/apps/desktop/src/app/messaging/index.tsx
@@ -5,6 +5,7 @@ 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 { ErrorBanner } from '@/components/ui/error-state'
 import { Input } from '@/components/ui/input'
 import { Switch } from '@/components/ui/switch'
 import {
@@ -15,13 +16,15 @@ import {
 } from '@/hermes'
 import { type Translations, useI18n } from '@/i18n'
 import { openExternalLink } from '@/lib/external-link'
-import { AlertTriangle, ExternalLink, Save, Trash2 } from '@/lib/icons'
+import { ExternalLink, Save, Trash2 } from '@/lib/icons'
+import { normalize } from '@/lib/text'
 import { cn } from '@/lib/utils'
 import { notify, notifyError } from '@/store/notifications'
 import { runGatewayRestart } from '@/store/system-actions'
 
 import { useRefreshHotkey } from '../hooks/use-refresh-hotkey'
 import { useRouteEnumParam } from '../hooks/use-route-enum-param'
+import { DetailColumn, ListColumn, MasterDetail } from '../master-detail'
 import { PageSearchShell } from '../page-search-shell'
 import { CREDENTIAL_CONTROL_CLASS } from '../settings/credential-key-ui'
 import { ListRow } from '../settings/primitives'
@@ -171,7 +174,7 @@ export function MessagingView({ setStatusbarItemGroup: _setStatusbarItemGroup, .
       return []
     }
 
-    const q = query.trim().toLowerCase()
+    const q = normalize(query)
 
     if (!q) {
       return platforms
@@ -266,14 +269,16 @@ export function MessagingView({ setStatusbarItemGroup: _setStatusbarItemGroup, .
       {...props}
       onSearchChange={setQuery}
       searchHidden={(platforms?.length ?? 0) === 0}
+      // TODO(i18n): literal until the UX settles.
+      searchHints={platforms?.slice(0, 5).map(platform => `Try “${platform.name.toLowerCase()}”`)}
       searchPlaceholder={m.search}
       searchValue={query}
     >
       {!platforms ? (
         <PageLoader label={m.loading} />
       ) : (
-        <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 p-2">
+        <MasterDetail>
+          <ListColumn>
             <ul className="space-y-1">
               {visiblePlatforms.map(platform => (
                 <li key={platform.id}>
@@ -285,9 +290,21 @@ export function MessagingView({ setStatusbarItemGroup: _setStatusbarItemGroup, .
                 </li>
               ))}
             </ul>
-          </aside>
+          </ListColumn>
 
-          <main className="min-h-0 overflow-hidden">
+          <DetailColumn
+            actionBar={
+              selected && (
+                <PlatformActionBar
+                  hasEdits={Object.keys(trimEdits(edits[selected.id] || {})).length > 0}
+                  onSave={() => void handleSave(selected)}
+                  onToggle={enabled => void handleToggle(selected, enabled)}
+                  platform={selected}
+                  saving={saving}
+                />
+              )
+            }
+          >
             {selected && (
               <PlatformDetail
                 edits={edits[selected.id] || {}}
@@ -301,14 +318,12 @@ export function MessagingView({ setStatusbarItemGroup: _setStatusbarItemGroup, .
                     }
                   }))
                 }
-                onSave={() => void handleSave(selected)}
-                onToggle={enabled => void handleToggle(selected, enabled)}
                 platform={selected}
                 saving={saving}
               />
             )}
-          </main>
-        </div>
+          </DetailColumn>
+        </MasterDetail>
       )}
     </PageSearchShell>
   )
@@ -326,10 +341,8 @@ function PlatformRow({
   return (
     <button
       className={cn(
-        'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left transition-colors',
-        active
-          ? 'bg-(--ui-row-active-background) text-foreground'
-          : 'text-(--ui-text-secondary) hover:bg-(--ui-row-hover-background) hover:text-foreground'
+        'row-hover flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left hover:text-foreground',
+        active ? 'bg-(--ui-row-active-background) text-foreground' : 'text-(--ui-text-secondary)'
       )}
       onClick={onSelect}
       type="button"
@@ -347,16 +360,12 @@ function PlatformDetail({
   edits,
   onClear,
   onEdit,
-  onSave,
-  onToggle,
   platform,
   saving
 }: {
   edits: Record<string, string>
   onClear: (key: string) => void
   onEdit: (key: string, value: string) => void
-  onSave: () => void
-  onToggle: (enabled: boolean) => void
   platform: MessagingPlatformInfo
   saving: string | null
 }) {
@@ -364,163 +373,169 @@ function PlatformDetail({
   const m = t.messaging
   const [showAdvanced, setShowAdvanced] = useState(false)
 
-  const hasEdits = Object.keys(trimEdits(edits)).length > 0
   const requiredFields = platform.env_vars.filter(field => field.required)
   const optionalFields = platform.env_vars.filter(field => !field.required && !fieldCopy(field, m).advanced)
   const advancedFields = platform.env_vars.filter(field => !field.required && fieldCopy(field, m).advanced)
   const hiddenCount = advancedFields.length
+
+  return (
+    <>
+      <header className="flex items-start gap-3">
+        <PlatformAvatar platformId={platform.id} platformName={platform.name} />
+        <div className="min-w-0 flex-1">
+          <div className="flex flex-wrap items-center gap-2">
+            <h3 className="min-w-0 truncate text-[0.9375rem] font-semibold tracking-tight">{platform.name}</h3>
+            <StatePill tone={stateTone(platform)}>{stateLabel(platform.state, m)}</StatePill>
+            {/* Resting states earn no pill — only actionable ones. */}
+            {!platform.configured && <SetupPill active={false}>{m.needsSetup}</SetupPill>}
+            {!platform.gateway_running && <SetupPill active={false}>{m.gatewayStopped}</SetupPill>}
+          </div>
+          <p className="mt-1 text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
+            {platform.description}
+          </p>
+          <PlatformHint platform={platform} />
+        </div>
+      </header>
+
+      {platform.error_message && <ErrorBanner>{platform.error_message}</ErrorBanner>}
+
+      <section>
+        <SectionTitle>{m.getCredentials}</SectionTitle>
+        <p className="mt-1 text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
+          {introCopy(platform, m)}
+        </p>
+        {platform.docs_url && (
+          <div className="mt-3">
+            <Button asChild size="sm" variant="textStrong">
+              <a
+                href={platform.docs_url}
+                onClick={event => {
+                  // Route through the validated external opener instead of
+                  // letting Electron resolve the anchor. A packaged build's
+                  // empty/relative href resolves to the app's own
+                  // index.html file path, which shell.openPath then fails to
+                  // open ("file not found"). Plugin platforms (Teams, etc.)
+                  // ship no docs_url, so this guard + handler keeps the
+                  // button from ever pointing at a local bundle path.
+                  event.preventDefault()
+                  openExternalLink(platform.docs_url)
+                }}
+                rel="noreferrer"
+                target="_blank"
+              >
+                {m.openSetupGuide}
+                <ExternalLink className="size-3.5" />
+              </a>
+            </Button>
+          </div>
+        )}
+      </section>
+
+      <section>
+        <SectionTitle>{m.required}</SectionTitle>
+        <div className="mt-3 grid gap-1">
+          {requiredFields.length > 0 ? (
+            requiredFields.map(field => (
+              <MessagingField
+                edits={edits}
+                field={field}
+                key={field.key}
+                onClear={onClear}
+                onEdit={onEdit}
+                saving={saving}
+              />
+            ))
+          ) : (
+            <p className="text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
+              {m.noTokenNeeded}
+            </p>
+          )}
+        </div>
+      </section>
+
+      {optionalFields.length > 0 && (
+        <section>
+          <SectionTitle>{m.recommended}</SectionTitle>
+          <div className="mt-3 grid gap-1">
+            {optionalFields.map(field => (
+              <MessagingField
+                edits={edits}
+                field={field}
+                key={field.key}
+                onClear={onClear}
+                onEdit={onEdit}
+                saving={saving}
+              />
+            ))}
+          </div>
+        </section>
+      )}
+
+      {hiddenCount > 0 && (
+        <section>
+          <button
+            className="flex w-full items-center justify-between gap-2 py-0.5 text-left text-[0.7rem] font-semibold uppercase tracking-[0.14em] text-muted-foreground transition-colors hover:text-foreground"
+            onClick={() => setShowAdvanced(value => !value)}
+            type="button"
+          >
+            <span>{m.advanced(hiddenCount)}</span>
+            <DisclosureCaret open={showAdvanced} size="0.875rem" />
+          </button>
+          {showAdvanced && (
+            <div className="mt-3 grid gap-1">
+              {advancedFields.map(field => (
+                <MessagingField
+                  edits={edits}
+                  field={field}
+                  key={field.key}
+                  onClear={onClear}
+                  onEdit={onEdit}
+                  saving={saving}
+                />
+              ))}
+            </div>
+          )}
+        </section>
+      )}
+    </>
+  )
+}
+
+function PlatformActionBar({
+  hasEdits,
+  onSave,
+  onToggle,
+  platform,
+  saving
+}: {
+  hasEdits: boolean
+  onSave: () => void
+  onToggle: (enabled: boolean) => void
+  platform: MessagingPlatformInfo
+  saving: string | null
+}) {
+  const { t } = useI18n()
+  const m = t.messaging
   const isSavingEnv = saving === `env:${platform.id}`
 
   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-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-[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, m)}</StatePill>
-                <SetupPill active={platform.configured}>
-                  {platform.configured ? m.credentialsSet : m.needsSetup}
-                </SetupPill>
-                {!platform.gateway_running && <SetupPill active={false}>{m.gatewayStopped}</SetupPill>}
-              </div>
-              <PlatformHint platform={platform} />
-            </div>
-          </header>
+    <>
+      <Switch
+        aria-label={platform.enabled ? m.disableAria(platform.name) : m.enableAria(platform.name)}
+        checked={platform.enabled}
+        disabled={saving === `enabled:${platform.id}`}
+        onCheckedChange={onToggle}
+        size="xs"
+      />
 
-          {platform.error_message && (
-            <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>
-          )}
-
-          <section>
-            <SectionTitle>{m.getCredentials}</SectionTitle>
-            <p className="mt-1 text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
-              {introCopy(platform, m)}
-            </p>
-            {platform.docs_url && (
-              <div className="mt-3">
-                <Button asChild size="sm" variant="textStrong">
-                  <a
-                    href={platform.docs_url}
-                    onClick={event => {
-                      // Route through the validated external opener instead of
-                      // letting Electron resolve the anchor. A packaged build's
-                      // empty/relative href resolves to the app's own
-                      // index.html file path, which shell.openPath then fails to
-                      // open ("file not found"). Plugin platforms (Teams, etc.)
-                      // ship no docs_url, so this guard + handler keeps the
-                      // button from ever pointing at a local bundle path.
-                      event.preventDefault()
-                      openExternalLink(platform.docs_url)
-                    }}
-                    rel="noreferrer"
-                    target="_blank"
-                  >
-                    {m.openSetupGuide}
-                    <ExternalLink className="size-3.5" />
-                  </a>
-                </Button>
-              </div>
-            )}
-          </section>
-
-          <section>
-            <SectionTitle>{m.required}</SectionTitle>
-            <div className="mt-3 grid gap-1">
-              {requiredFields.length > 0 ? (
-                requiredFields.map(field => (
-                  <MessagingField
-                    edits={edits}
-                    field={field}
-                    key={field.key}
-                    onClear={onClear}
-                    onEdit={onEdit}
-                    saving={saving}
-                  />
-                ))
-              ) : (
-                <p className="text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
-                  {m.noTokenNeeded}
-                </p>
-              )}
-            </div>
-          </section>
-
-          {optionalFields.length > 0 && (
-            <section>
-              <SectionTitle>{m.recommended}</SectionTitle>
-              <div className="mt-3 grid gap-1">
-                {optionalFields.map(field => (
-                  <MessagingField
-                    edits={edits}
-                    field={field}
-                    key={field.key}
-                    onClear={onClear}
-                    onEdit={onEdit}
-                    saving={saving}
-                  />
-                ))}
-              </div>
-            </section>
-          )}
-
-          {hiddenCount > 0 && (
-            <section>
-              <button
-                className="flex w-full items-center justify-between gap-2 py-0.5 text-left text-[0.7rem] font-semibold uppercase tracking-[0.14em] text-muted-foreground transition-colors hover:text-foreground"
-                onClick={() => setShowAdvanced(value => !value)}
-                type="button"
-              >
-                <span>{m.advanced(hiddenCount)}</span>
-                <DisclosureCaret open={showAdvanced} size="0.875rem" />
-              </button>
-              {showAdvanced && (
-                <div className="mt-3 grid gap-1">
-                  {advancedFields.map(field => (
-                    <MessagingField
-                      edits={edits}
-                      field={field}
-                      key={field.key}
-                      onClear={onClear}
-                      onEdit={onEdit}
-                      saving={saving}
-                    />
-                  ))}
-                </div>
-              )}
-            </section>
-          )}
-        </div>
+      <div className="ml-auto flex items-center gap-2">
+        {hasEdits && <span className="text-xs text-muted-foreground">{m.unsavedChanges}</span>}
+        <Button disabled={!hasEdits || isSavingEnv} onClick={onSave} size="sm">
+          <Save />
+          {isSavingEnv ? m.saving : m.saveChanges}
+        </Button>
       </div>
-
-      <footer className="bg-(--ui-chat-surface-background) px-5 py-2.5">
-        <div className="mx-auto flex max-w-2xl flex-wrap items-center gap-2">
-          <Switch
-            aria-label={platform.enabled ? m.disableAria(platform.name) : m.enableAria(platform.name)}
-            checked={platform.enabled}
-            disabled={saving === `enabled:${platform.id}`}
-            onCheckedChange={onToggle}
-            size="xs"
-          />
-
-          <div className="ml-auto flex items-center gap-2">
-            {hasEdits && <span className="text-xs text-muted-foreground">{m.unsavedChanges}</span>}
-            <Button disabled={!hasEdits || isSavingEnv} onClick={onSave} size="sm">
-              <Save />
-              {isSavingEnv ? m.saving : m.saveChanges}
-            </Button>
-          </div>
-        </div>
-      </footer>
-    </div>
+    </>
   )
 }
 
diff --git a/apps/desktop/src/app/overlays/overlay-chrome.tsx b/apps/desktop/src/app/overlays/overlay-chrome.tsx
index 5a28e4fb8..65bde4256 100644
--- a/apps/desktop/src/app/overlays/overlay-chrome.tsx
+++ b/apps/desktop/src/app/overlays/overlay-chrome.tsx
@@ -1,51 +1,24 @@
 import type { ButtonHTMLAttributes, ReactNode } from 'react'
 
+import { Button } from '@/components/ui/button'
 import { cn } from '@/lib/utils'
 
-interface OverlayActionButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  tone?: 'default' | 'danger' | 'subtle'
-}
-
-export function OverlayActionButton({
-  children,
-  className,
-  tone = 'default',
-  type = 'button',
-  ...props
-}: OverlayActionButtonProps) {
-  return (
-    <button
-      className={cn(
-        'inline-flex h-8 items-center rounded-md border px-3 text-xs font-medium transition-colors disabled:cursor-default disabled:opacity-45',
-        tone === 'default' &&
-          'border-[color-mix(in_srgb,var(--dt-border)_55%,transparent)] bg-[color-mix(in_srgb,var(--dt-card)_80%,transparent)] text-foreground hover:bg-[color-mix(in_srgb,var(--dt-muted)_46%,var(--dt-card))]',
-        tone === 'subtle' &&
-          'h-7 border-transparent px-2 text-muted-foreground hover:border-[color-mix(in_srgb,var(--dt-border)_54%,transparent)] hover:bg-[color-mix(in_srgb,var(--dt-card)_72%,transparent)] hover:text-foreground',
-        tone === 'danger' &&
-          'h-7 border-transparent px-2 text-destructive hover:border-[color-mix(in_srgb,var(--dt-destructive)_40%,transparent)] hover:bg-[color-mix(in_srgb,var(--dt-destructive)_10%,transparent)] hover:text-destructive',
-        className
-      )}
-      type={type}
-      {...props}
-    >
-      {children}
-    </button>
-  )
-}
-
 interface OverlayIconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   children: ReactNode
 }
 
+// Overlay chrome icon action — same titlebar-sized ghost button as the overlay
+// close (X), so footer/header actions read identically across breakpoints.
 export function OverlayIconButton({ children, className, type = 'button', ...props }: OverlayIconButtonProps) {
   return (
-    <OverlayActionButton
-      className={cn('h-7 w-7 justify-center px-0 [&_svg]:size-4', className)}
-      tone="subtle"
+    <Button
+      className={cn('text-(--ui-text-tertiary) hover:bg-(--chrome-action-hover) hover:text-foreground', className)}
+      size="icon-titlebar"
       type={type}
+      variant="ghost"
       {...props}
     >
       {children}
-    </OverlayActionButton>
+    </Button>
   )
 }
diff --git a/apps/desktop/src/app/overlays/overlay-split-layout.tsx b/apps/desktop/src/app/overlays/overlay-split-layout.tsx
index 330c6dbad..cf0200275 100644
--- a/apps/desktop/src/app/overlays/overlay-split-layout.tsx
+++ b/apps/desktop/src/app/overlays/overlay-split-layout.tsx
@@ -1,10 +1,16 @@
-import type { ReactNode } from 'react'
+import { Fragment, type ReactNode } from 'react'
 
+import { TabDropdown } from '@/components/ui/tab-dropdown'
 import type { IconComponent } from '@/lib/icons'
 import { cn } from '@/lib/utils'
 
 import { PAGE_INSET_X, PAGE_MAX_W } from '../layout-constants'
 
+// The wide rail and the narrow dropdown swap at exactly the width where
+// OverlaySplitLayout drops to a single column, so the rail never stacks.
+const RAIL_HIDDEN = 'max-[47.5rem]:hidden'
+const BAR_HIDDEN = 'hidden max-[47.5rem]:flex'
+
 interface OverlaySplitLayoutProps {
   children: ReactNode
   className?: string
@@ -35,7 +41,10 @@ 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 bg-transparent max-[47.5rem]:grid-cols-1',
+        // Narrow: one column, and pin rows to [nav-bar auto | main 1fr] — without
+        // an explicit template the grid's default align-content:stretch splits the
+        // height evenly across the two rows, shoving the content to mid-screen.
+        'grid h-full min-h-0 flex-1 grid-cols-[13rem_minmax(0,1fr)] overflow-hidden bg-transparent max-[47.5rem]:grid-cols-1 max-[47.5rem]:grid-rows-[auto_minmax(0,1fr)]',
         className
       )}
     >
@@ -64,7 +73,9 @@ export function OverlayMain({ children, className }: OverlayMainProps) {
   return (
     <main
       className={cn(
-        'mx-auto flex min-h-0 w-full flex-1 flex-col overflow-hidden bg-transparent pb-3 pt-[calc(var(--titlebar-height)/2+1rem)]',
+        // Narrow: the OverlayNav dropdown bar already clears the titlebar, so
+        // drop the tall top pad to a normal gap below it.
+        'mx-auto flex min-h-0 w-full flex-1 flex-col overflow-hidden bg-transparent pb-3 pt-[calc(var(--titlebar-height)/2+1rem)] max-[47.5rem]:pt-2',
         PAGE_MAX_W,
         PAGE_INSET_X,
         className
@@ -103,3 +114,96 @@ export function OverlayNavItem({ active, icon: Icon, label, nested, onClick, tra
     </button>
   )
 }
+
+export interface OverlayNavLink {
+  active: boolean
+  icon: IconComponent
+  id: string
+  label: string
+  onSelect: () => void
+}
+
+export interface OverlayNavGroup extends OverlayNavLink {
+  /** Sub-links: expanded under the active group on the rail, always listed
+   *  (flattened + indented) in the narrow dropdown. */
+  children?: OverlayNavLink[]
+  /** Visual break before this group — a spacer on the rail, a separator in
+   *  the dropdown. */
+  gapBefore?: boolean
+}
+
+// Data-driven pane nav: one model renders a persistent left rail on wide
+// viewports and a single dropdown bar on narrow ones (matching the tab
+// dropdown in PageSearchShell), so every OverlaySplitLayout pane degrades the
+// same way instead of stacking its whole sidebar. Drop it in as the first
+// child of an OverlaySplitLayout, before OverlayMain.
+export function OverlayNav({ footer, groups }: { footer?: ReactNode; groups: OverlayNavGroup[] }) {
+  return (
+    <>
+      <OverlaySidebar className={RAIL_HIDDEN}>
+        {groups.map(group => (
+          <Fragment key={group.id}>
+            {group.gapBefore && <div aria-hidden className="h-2" />}
+            <OverlayNavItem active={group.active} icon={group.icon} label={group.label} onClick={group.onSelect} />
+            {group.children && group.active && (
+              <div className="ml-3.5 flex flex-col gap-0.5 pl-1.5">
+                {group.children.map(child => (
+                  <OverlayNavItem
+                    active={child.active}
+                    icon={child.icon}
+                    key={child.id}
+                    label={child.label}
+                    nested
+                    onClick={child.onSelect}
+                  />
+                ))}
+              </div>
+            )}
+          </Fragment>
+        ))}
+        {footer && <div className="mt-auto flex items-center gap-1 pt-2">{footer}</div>}
+      </OverlaySidebar>
+
+      {/* Narrow: ride the OverlayView titlebar strip so the dropdown shares the
+          close button's row instead of taking its own. The bar is
+          pointer-events-none (children opt back in) so the floating X underneath
+          stays clickable; pr clears it, no-drag beats the strip's drag region,
+          and the height matches the strip so the trigger lines up with the X. */}
+      <div
+        className={cn(
+          'pointer-events-none relative z-20 h-[calc(var(--titlebar-height)+0.1875rem)] items-center justify-between gap-2 pl-3 pr-12',
+          BAR_HIDDEN
+        )}
+      >
+        <div className="pointer-events-auto min-w-0 [-webkit-app-region:no-drag]">
+          <TabDropdown
+            align="start"
+            items={groups.flatMap(group => [
+              {
+                active: group.active && !group.children?.some(child => child.active),
+                icon: group.icon,
+                id: group.id,
+                label: group.label,
+                onSelect: group.onSelect,
+                separatorBefore: group.gapBefore
+              },
+              ...(group.children ?? []).map(child => ({
+                active: child.active,
+                icon: child.icon,
+                id: child.id,
+                indent: true,
+                label: child.label,
+                onSelect: child.onSelect
+              }))
+            ])}
+          />
+        </div>
+        {footer && (
+          <div className="pointer-events-auto flex shrink-0 items-center gap-1 [-webkit-app-region:no-drag]">
+            {footer}
+          </div>
+        )}
+      </div>
+    </>
+  )
+}
diff --git a/apps/desktop/src/app/overlays/panel.tsx b/apps/desktop/src/app/overlays/panel.tsx
index ae4ee5fde..60fc2ebfb 100644
--- a/apps/desktop/src/app/overlays/panel.tsx
+++ b/apps/desktop/src/app/overlays/panel.tsx
@@ -81,7 +81,19 @@ export function PanelHeader({ actions, subtitle, title }: PanelHeaderProps) {
 }
 
 export function PanelBody({ children, className }: { children: ReactNode; className?: string }) {
-  return <div className={cn('flex min-h-0 flex-1 gap-5 overflow-hidden', className)}>{children}</div>
+  return (
+    <div
+      className={cn(
+        // Side-by-side master/detail on a wide card; once it narrows (same
+        // threshold the other overlays collapse at) stack the list above the
+        // detail so the detail keeps full width instead of being squished.
+        'flex min-h-0 flex-1 flex-col gap-4 overflow-hidden min-[47.5rem]:flex-row min-[47.5rem]:gap-5',
+        className
+      )}
+    >
+      {children}
+    </div>
+  )
 }
 
 interface PanelListProps {
@@ -92,6 +104,8 @@ interface PanelListProps {
   onSearchChange?: (value: string) => void
   searchLabel?: string
   searchPlaceholder?: string
+  /** Data-derived rotating placeholder nudges (see SearchField.hints). */
+  searchHints?: string[]
   searchValue?: string
 }
 
@@ -104,14 +118,18 @@ export function PanelList({
   onSearchChange,
   searchLabel,
   searchPlaceholder,
+  searchHints,
   searchValue
 }: PanelListProps) {
   return (
-    <div className={cn('flex w-52 shrink-0 flex-col', className)}>
+    // Full-width and height-capped when stacked (narrow); a fixed 13rem rail
+    // beside the detail when wide.
+    <div className={cn('flex w-full shrink-0 flex-col max-[47.5rem]:max-h-[40%] min-[47.5rem]:w-52', className)}>
       {onSearchChange ? (
         <SearchField
           aria-label={searchLabel ?? searchPlaceholder ?? ''}
           containerClassName="mb-1 w-full shrink-0"
+          hints={searchHints}
           onChange={onSearchChange}
           placeholder={searchPlaceholder ?? ''}
           value={searchValue ?? ''}
@@ -156,10 +174,8 @@ export function PanelListRow({
   return (
     <div
       className={cn(
-        'group/row relative flex h-7 w-full items-center rounded-md text-[0.78rem] transition-colors duration-100 ease-out',
-        active
-          ? 'bg-(--ui-row-active-background) text-foreground'
-          : 'text-(--ui-text-secondary) hover:bg-(--ui-row-hover-background) hover:text-foreground'
+        'group/row row-hover relative flex h-7 w-full items-center rounded-md text-[0.78rem] hover:text-foreground',
+        active ? 'bg-(--ui-row-active-background) text-foreground' : 'text-(--ui-text-secondary)'
       )}
       data-panel-row={rowKey}
     >
diff --git a/apps/desktop/src/app/page-search-shell.tsx b/apps/desktop/src/app/page-search-shell.tsx
index f20b5bae9..b94f28114 100644
--- a/apps/desktop/src/app/page-search-shell.tsx
+++ b/apps/desktop/src/app/page-search-shell.tsx
@@ -1,34 +1,74 @@
 import type { ReactNode } from 'react'
 
 import { SearchField } from '@/components/ui/search-field'
+import { ResponsiveTabs } from '@/components/ui/tab-dropdown'
 import { cn } from '@/lib/utils'
 
+// Tabs are data, not nodes: the shell owns their presentation so every page
+// gets the same behavior — a centered TextTab row on wide viewports that
+// collapses into a dropdown when the header can't fit both search and tabs.
+export interface PageShellTab {
+  id: string
+  label: string
+  /** Count badge. `null` = still loading (renders a skeleton); `undefined` = no badge. */
+  meta?: string | number | null
+}
+
 interface PageSearchShellProps extends React.ComponentProps<'section'> {
   children: ReactNode
-  /** Primary tabs shown on the top row, beside the search. */
-  tabs?: ReactNode
+  tabs?: PageShellTab[]
+  activeTab?: string
+  onTabChange?: (id: string) => void
   /** Secondary filters shown full-width on their own row below (expands). */
   filters?: ReactNode
   onSearchChange: (value: string) => void
   searchPlaceholder: string
-  searchTrailingAction?: ReactNode
+  /** Data-derived rotating placeholder nudges (see SearchField.hints). */
+  searchHints?: string[]
   searchValue: string
   /** Hide the search field when there's nothing to search (empty dataset). */
   searchHidden?: boolean
+  /** Right-aligned control in the header's trailing cell (e.g. a refresh button)
+   *  so mouse users get a visible affordance for the refresh hotkey. */
+  searchTrailingAction?: ReactNode
+}
+
+function ShellTabs({
+  tabs,
+  activeTab,
+  onTabChange
+}: {
+  tabs: PageShellTab[]
+  activeTab?: string
+  onTabChange?: (id: string) => void
+}) {
+  return (
+    <ResponsiveTabs
+      onChange={id => onTabChange?.(id)}
+      tabs={tabs}
+      value={activeTab ?? tabs[0]?.id ?? ''}
+      wideClassName="justify-center"
+    />
+  )
 }
 
 export function PageSearchShell({
   children,
   className,
   tabs,
+  activeTab,
+  onTabChange,
   filters,
   onSearchChange,
   searchPlaceholder,
-  searchTrailingAction,
+  searchHints,
   searchValue,
   searchHidden = false,
+  searchTrailingAction,
   ...props
 }: PageSearchShellProps) {
+  const hasTabs = (tabs?.length ?? 0) > 0
+
   return (
     <section
       {...props}
@@ -37,9 +77,8 @@ export function PageSearchShell({
       {/*
         Header lives in the page body, below the window chrome (the shell floats
         traffic lights over the top titlebar-height strip, which the `pt` clears
-        and leaves draggable). Top row: primary tabs + search. Second row:
-        secondary filters, full-width so they expand. Interactive bits opt out
-        of the drag region.
+        and leaves draggable). Search left, tabs centered on the page via the
+        1fr/auto/1fr grid; the trailing 1fr keeps the center honest.
       */}
       {/*
         IMPORTANT: do NOT put `-webkit-app-region: drag` on this header. It spans
@@ -51,20 +90,21 @@ export function PageSearchShell({
         (see app-shell.tsx), so window dragging still works here.
       */}
       <div className="shrink-0">
-        {(tabs || !searchHidden) && (
-          <div className="flex items-center gap-3 px-3 pb-2 pt-[calc(var(--titlebar-height)+0.5rem)]">
-            {tabs ? <div className="flex min-w-0 flex-1 flex-wrap items-center gap-x-2 gap-y-1">{tabs}</div> : null}
-            {!searchHidden && (
-              <div className={cn('flex shrink-0 items-center', !tabs && 'flex-1')}>
+        {(hasTabs || !searchHidden) && (
+          <div className="grid grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-3 px-3 pb-2 pt-[calc(var(--titlebar-height)+0.5rem)]">
+            <div className="flex min-w-0 items-center justify-start">
+              {!searchHidden && (
                 <SearchField
                   containerClassName="max-w-[45vw]"
+                  hints={searchHints}
                   onChange={onSearchChange}
                   placeholder={searchPlaceholder}
-                  trailingAction={searchTrailingAction}
                   value={searchValue}
                 />
-              </div>
-            )}
+              )}
+            </div>
+            {hasTabs ? <ShellTabs activeTab={activeTab} onTabChange={onTabChange} tabs={tabs!} /> : <span />}
+            <div className="flex min-w-0 items-center justify-end">{searchTrailingAction}</div>
           </div>
         )}
         {filters ? <div className="flex flex-wrap items-center gap-x-2 gap-y-1 px-3 pb-2">{filters}</div> : null}
diff --git a/apps/desktop/src/app/profiles/index.tsx b/apps/desktop/src/app/profiles/index.tsx
index df5b58751..8f777b046 100644
--- a/apps/desktop/src/app/profiles/index.tsx
+++ b/apps/desktop/src/app/profiles/index.tsx
@@ -2,6 +2,7 @@ import { useStore } from '@nanostores/react'
 import type * as React from 'react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
+import { CodeEditor } from '@/components/chat/code-editor'
 import { PageLoader } from '@/components/page-loader'
 import { Button } from '@/components/ui/button'
 import { Codicon } from '@/components/ui/codicon'
@@ -15,7 +16,6 @@ import {
 } from '@/components/ui/dialog'
 import { SanitizedInput } from '@/components/ui/sanitized-input'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
-import { Textarea } from '@/components/ui/textarea'
 import {
   createProfile,
   deleteProfile,
@@ -28,6 +28,7 @@ import { useI18n } from '@/i18n'
 import { AlertTriangle, Save } from '@/lib/icons'
 import { profileColorSoft, resolveProfileColor } from '@/lib/profile-color'
 import { slug } from '@/lib/sanitize'
+import { normalize } from '@/lib/text'
 import { cn } from '@/lib/utils'
 import { notify, notifyError } from '@/store/notifications'
 import { $profileColors, refreshProfiles } from '@/store/profile'
@@ -100,7 +101,7 @@ export function ProfilesView({ onClose }: ProfilesViewProps) {
   }, [profiles, selectedName])
 
   const visibleProfiles = useMemo(() => {
-    const q = query.trim().toLowerCase()
+    const q = normalize(query)
 
     if (!profiles || !q) {
       return profiles ?? []
@@ -202,7 +203,7 @@ export function ProfilesView({ onClose }: ProfilesViewProps) {
                         profile.is_default
                           ? []
                           : [
-                              { icon: 'edit', label: p.rename, onSelect: () => setPendingRename(profile) },
+                              { icon: 'edit', label: p.renameMenu, onSelect: () => setPendingRename(profile) },
                               {
                                 icon: 'trash',
                                 label: t.common.delete,
@@ -415,7 +416,6 @@ function SoulEditor({ profileName }: { profileName: string }) {
   }, [p, profileName])
 
   const dirty = content !== original
-  const isEmpty = !content.trim()
 
   async function handleSave() {
     setSaving(true)
@@ -445,12 +445,16 @@ function SoulEditor({ profileName }: { profileName: string }) {
       {loading ? (
         <PageLoader className="min-h-44" label={p.loadingSoul} />
       ) : (
-        <Textarea
-          className="min-h-48 font-mono text-xs leading-5"
-          onChange={event => setContent(event.target.value)}
-          placeholder={isEmpty ? p.emptySoul : undefined}
-          value={content}
-        />
+        <div className="min-h-48">
+          <CodeEditor
+            filePath="SOUL.md"
+            framed
+            initialValue={content}
+            key={profileName}
+            onChange={setContent}
+            onSave={() => void handleSave()}
+          />
+        </div>
       )}
 
       {error && (
diff --git a/apps/desktop/src/app/right-sidebar/files/remote-picker.tsx b/apps/desktop/src/app/right-sidebar/files/remote-picker.tsx
index 66c24ed40..b502c014c 100644
--- a/apps/desktop/src/app/right-sidebar/files/remote-picker.tsx
+++ b/apps/desktop/src/app/right-sidebar/files/remote-picker.tsx
@@ -185,7 +185,7 @@ export function RemoteFolderPicker() {
 function FolderRow({ disabled = false, name, onClick }: { disabled?: boolean; name: string; onClick: () => void }) {
   return (
     <button
-      className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-xs text-(--ui-text-secondary) hover:bg-(--ui-row-hover-background) hover:text-foreground disabled:pointer-events-none disabled:opacity-40"
+      className="row-hover flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-xs text-(--ui-text-secondary) hover:text-foreground disabled:pointer-events-none disabled:opacity-40"
       disabled={disabled}
       onClick={onClick}
       type="button"
diff --git a/apps/desktop/src/app/right-sidebar/files/tree.tsx b/apps/desktop/src/app/right-sidebar/files/tree.tsx
index 2b74280a7..97d96f267 100644
--- a/apps/desktop/src/app/right-sidebar/files/tree.tsx
+++ b/apps/desktop/src/app/right-sidebar/files/tree.tsx
@@ -275,7 +275,7 @@ function ProjectTreeRow({
       aria-expanded={isFolder ? node.isOpen : undefined}
       aria-selected={node.isSelected}
       className={cn(
-        '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 duration-100 ease-out hover:bg-(--ui-row-hover-background) hover:text-foreground hover:transition-none',
+        'group/row row-hover flex h-full select-none items-center gap-1 border border-transparent px-3 text-xs font-normal leading-(--file-tree-row-height) text-(--ui-text-secondary) hover:text-foreground',
         node.isSelected && 'bg-(--ui-row-active-background) text-foreground',
         isPlaceholder && 'pointer-events-none italic text-muted-foreground/70'
       )}
diff --git a/apps/desktop/src/app/right-sidebar/review/file-tree.tsx b/apps/desktop/src/app/right-sidebar/review/file-tree.tsx
index 6f01987e6..e09c964b7 100644
--- a/apps/desktop/src/app/right-sidebar/review/file-tree.tsx
+++ b/apps/desktop/src/app/right-sidebar/review/file-tree.tsx
@@ -206,7 +206,7 @@ function ReviewDirRow({
   return (
     <>
       <div
-        className="group/review-row flex h-6 cursor-pointer select-none items-center gap-1.5 rounded-md pr-1.5 text-xs text-(--ui-text-secondary) transition-colors duration-100 ease-out hover:bg-(--ui-row-hover-background) hover:text-foreground hover:transition-none"
+        className="group/review-row row-hover flex h-6 select-none items-center gap-1.5 rounded-md pr-1.5 text-xs text-(--ui-text-secondary) hover:text-foreground"
         onClick={toggle}
         style={rowStyle(depth)}
       >
@@ -302,7 +302,7 @@ function ReviewFileRow({ node, depth }: { node: ReviewTreeNode; depth: number })
       <div
         aria-selected={selected}
         className={cn(
-          'group/review-row flex h-6 cursor-pointer select-none items-center gap-1.5 rounded-md pr-1.5 text-xs text-(--ui-text-secondary) transition-colors duration-100 ease-out hover:bg-(--ui-row-hover-background) hover:text-foreground hover:transition-none',
+          'group/review-row row-hover flex h-6 select-none items-center gap-1.5 rounded-md pr-1.5 text-xs text-(--ui-text-secondary) hover:text-foreground',
           selected && 'bg-(--ui-row-active-background) text-foreground'
         )}
         draggable
diff --git a/apps/desktop/src/app/right-sidebar/terminal/instance.tsx b/apps/desktop/src/app/right-sidebar/terminal/instance.tsx
index 12bfbe9db..399407d81 100644
--- a/apps/desktop/src/app/right-sidebar/terminal/instance.tsx
+++ b/apps/desktop/src/app/right-sidebar/terminal/instance.tsx
@@ -44,7 +44,12 @@ export function TerminalInstance({ id, active, cwd, onAddSelectionToChat, revive
     >
       {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" />
+          <Loader
+            className="size-8 text-(--ui-text-tertiary)"
+            pathSteps={180}
+            strokeScale={0.68}
+            type="spiral-search"
+          />
         </div>
       )}
       {selection.trim() && (
diff --git a/apps/desktop/src/app/session-switcher.tsx b/apps/desktop/src/app/session-switcher.tsx
index 297226bb5..21bd6b801 100644
--- a/apps/desktop/src/app/session-switcher.tsx
+++ b/apps/desktop/src/app/session-switcher.tsx
@@ -62,12 +62,10 @@ export function SessionSwitcher() {
           return (
             <div
               className={cn(
-                'flex cursor-pointer items-center rounded leading-tight',
+                'row-hover flex items-center rounded leading-tight',
                 HUD_ITEM,
                 HUD_TEXT,
-                selected
-                  ? 'bg-accent text-accent-foreground'
-                  : 'text-(--ui-text-secondary) hover:bg-(--ui-row-hover-background)'
+                selected ? 'bg-accent text-accent-foreground' : 'text-(--ui-text-secondary)'
               )}
               key={session.id}
               onMouseDown={e => {
diff --git a/apps/desktop/src/app/session/hooks/use-hermes-config.ts b/apps/desktop/src/app/session/hooks/use-hermes-config.ts
index fe2a42d46..8c3cbac65 100644
--- a/apps/desktop/src/app/session/hooks/use-hermes-config.ts
+++ b/apps/desktop/src/app/session/hooks/use-hermes-config.ts
@@ -2,6 +2,7 @@ import { type MutableRefObject, useCallback, useState } from 'react'
 
 import { getHermesConfig, getHermesConfigDefaults } from '@/hermes'
 import { BUILTIN_PERSONALITIES, normalizePersonalityValue, personalityNamesFromConfig } from '@/lib/chat-runtime'
+import { normalize } from '@/lib/text'
 import {
   $currentCwd,
   setAvailablePersonalities,
@@ -33,7 +34,7 @@ function normalizeConfigEffort(value: unknown): string {
     return ''
   }
 
-  const effort = value.trim().toLowerCase()
+  const effort = normalize(value)
 
   return effort === 'false' || effort === 'disabled' ? 'none' : effort
 }
diff --git a/apps/desktop/src/app/session/hooks/use-prompt-actions/index.test.tsx b/apps/desktop/src/app/session/hooks/use-prompt-actions/index.test.tsx
index fd50574ea..09ccc8459 100644
--- a/apps/desktop/src/app/session/hooks/use-prompt-actions/index.test.tsx
+++ b/apps/desktop/src/app/session/hooks/use-prompt-actions/index.test.tsx
@@ -329,7 +329,9 @@ describe('usePromptActions slash.exec dispatch payloads', () => {
     const requestGateway = vi.fn(async () => ({}) as never)
 
     let handle: HarnessHandle | null = null
-    render(<Harness onReady={h => (handle = h)} refreshSessions={async () => undefined} requestGateway={requestGateway} />)
+    render(
+      <Harness onReady={h => (handle = h)} refreshSessions={async () => undefined} requestGateway={requestGateway} />
+    )
 
     // `/ text` parses to an empty command name on every surface (CLI parity).
     // The composer draft was already cleared on submit and slash input never
diff --git a/apps/desktop/src/app/session/hooks/use-prompt-actions/index.ts b/apps/desktop/src/app/session/hooks/use-prompt-actions/index.ts
index 66b4667b2..5928bae6f 100644
--- a/apps/desktop/src/app/session/hooks/use-prompt-actions/index.ts
+++ b/apps/desktop/src/app/session/hooks/use-prompt-actions/index.ts
@@ -9,6 +9,7 @@ import { branchGroupForUser, type ChatMessage, chatMessageText, textPart } from
 import { pathLabel, SLASH_COMMAND_RE } from '@/lib/chat-runtime'
 import { triggerHaptic } from '@/lib/haptics'
 import { setMutableRef } from '@/lib/mutable-ref'
+import { normalize } from '@/lib/text'
 import { clearClarifyRequest } from '@/store/clarify'
 import {
   $composerAttachments,
@@ -374,7 +375,7 @@ export function usePromptActions({
         return { error: copy.sessionUnavailable, ok: false }
       }
 
-      const target = platform.trim().toLowerCase()
+      const target = normalize(platform)
 
       if (!target) {
         return { error: copy.handoff.failed(''), ok: false }
diff --git a/apps/desktop/src/app/session/hooks/use-prompt-actions/utils.ts b/apps/desktop/src/app/session/hooks/use-prompt-actions/utils.ts
index 8d8b462ef..00fc50855 100644
--- a/apps/desktop/src/app/session/hooks/use-prompt-actions/utils.ts
+++ b/apps/desktop/src/app/session/hooks/use-prompt-actions/utils.ts
@@ -6,11 +6,7 @@ import { type CommandsCatalogLike, filterDesktopCommandsCatalog } from '@/lib/de
 import { isProviderSetupErrorMessage } from '@/lib/provider-setup-errors'
 import type { ComposerAttachment } from '@/store/composer'
 
-export type GatewayRequest = <T>(
-  method: string,
-  params?: Record<string, unknown>,
-  timeoutMs?: number
-) => Promise<T>
+export type GatewayRequest = <T>(method: string, params?: Record<string, unknown>, timeoutMs?: number) => Promise<T>
 
 export function delay(ms: number): Promise<void> {
   return new Promise(resolve => setTimeout(resolve, ms))
diff --git a/apps/desktop/src/app/session/hooks/use-session-actions/index.ts b/apps/desktop/src/app/session/hooks/use-session-actions/index.ts
index 32d7d6d56..0f88fc948 100644
--- a/apps/desktop/src/app/session/hooks/use-session-actions/index.ts
+++ b/apps/desktop/src/app/session/hooks/use-session-actions/index.ts
@@ -9,12 +9,7 @@ import { setSessionYolo } from '@/lib/yolo-session'
 import { clearQueuedPrompts } from '@/store/composer-queue'
 import { $pinnedSessionIds } from '@/store/layout'
 import { clearNotifications, notify, notifyError } from '@/store/notifications'
-import {
-  $activeGatewayProfile,
-  $newChatProfile,
-  ensureGatewayProfile,
-  normalizeProfileKey
-} from '@/store/profile'
+import { $activeGatewayProfile, $newChatProfile, ensureGatewayProfile, normalizeProfileKey } from '@/store/profile'
 import { resolveNewSessionCwd, tombstoneSessions, untombstoneSessions } from '@/store/projects'
 import {
   $currentCwd,
@@ -48,11 +43,7 @@ import {
 } from '@/store/session'
 import { broadcastSessionsChanged } from '@/store/session-sync'
 import { isWatchWindow } from '@/store/windows'
-import type {
-  SessionCreateResponse,
-  SessionResumeResponse,
-  UsageStats
-} from '@/types/hermes'
+import type { SessionCreateResponse, SessionResumeResponse, UsageStats } from '@/types/hermes'
 
 import { NEW_CHAT_ROUTE, sessionRoute, SETTINGS_ROUTE } from '../../../routes'
 import type { ClientSessionState, SidebarNavItem } from '../../../types'
diff --git a/apps/desktop/src/app/settings/appearance-settings.tsx b/apps/desktop/src/app/settings/appearance-settings.tsx
index f9fbc5462..d0494db14 100644
--- a/apps/desktop/src/app/settings/appearance-settings.tsx
+++ b/apps/desktop/src/app/settings/appearance-settings.tsx
@@ -10,6 +10,7 @@ import { useI18n } from '@/i18n'
 import { triggerHaptic } from '@/lib/haptics'
 import { Check, Download, Loader2, Palette, Trash2 } from '@/lib/icons'
 import { selectableCardClass } from '@/lib/selectable-card'
+import { normalize } from '@/lib/text'
 import { cn } from '@/lib/utils'
 import { $embedAllowed, $embedMode, clearEmbedAllowed, type EmbedMode, setEmbedMode } from '@/store/embed-consent'
 import { $activeGatewayProfile, $profiles, normalizeProfileKey } from '@/store/profile'
@@ -243,7 +244,7 @@ export function AppearanceSettings() {
   // One box does double duty: filter installed themes live (below), and run a
   // name search against the VS Code Marketplace (the Cmd-K "Install theme…"
   // backend) for anything not already installed.
-  const needle = query.trim().toLowerCase()
+  const needle = normalize(query)
 
   const filteredThemes = availableThemes
     .filter(
diff --git a/apps/desktop/src/app/settings/computer-use-panel.tsx b/apps/desktop/src/app/settings/computer-use-panel.tsx
index ada5c08e3..bf30b3b83 100644
--- a/apps/desktop/src/app/settings/computer-use-panel.tsx
+++ b/apps/desktop/src/app/settings/computer-use-panel.tsx
@@ -134,7 +134,7 @@ export function ComputerUsePanel({ onConfiguredChange }: ComputerUsePanelProps)
 
   if (loading) {
     return (
-      <div className="mt-3 flex items-center gap-2 px-1 text-xs text-muted-foreground">
+      <div className="flex items-center gap-2 px-1 text-xs text-muted-foreground">
         <Loader2 className="size-3.5 animate-spin" />
         Checking Computer Use status…
       </div>
@@ -147,7 +147,7 @@ export function ComputerUsePanel({ onConfiguredChange }: ComputerUsePanelProps)
 
   if (!status.platform_supported) {
     return (
-      <p className="mt-3 px-1 text-xs text-muted-foreground">
+      <p className="px-1 text-xs text-muted-foreground">
         Computer Use isn&apos;t supported on this platform ({status.platform}).
       </p>
     )
@@ -155,7 +155,7 @@ export function ComputerUsePanel({ onConfiguredChange }: ComputerUsePanelProps)
 
   if (!status.installed) {
     return (
-      <p className="mt-3 px-1 text-xs text-muted-foreground">
+      <p className="px-1 text-xs text-muted-foreground">
         Install the cua-driver backend below to drive this machine.
         {status.can_grant && ' Then grant Accessibility and Screen Recording here.'}
       </p>
@@ -165,7 +165,7 @@ export function ComputerUsePanel({ onConfiguredChange }: ComputerUsePanelProps)
   const failingChecks = status.checks.filter(c => c.status !== 'ok')
 
   return (
-    <div className="mt-3 grid gap-2">
+    <div className="grid gap-2">
       <div className="flex flex-wrap items-center justify-between gap-2 px-1">
         <div className="min-w-0">
           {status.can_grant ? (
diff --git a/apps/desktop/src/app/settings/config-settings.tsx b/apps/desktop/src/app/settings/config-settings.tsx
index 6a4878aa8..6a87590b3 100644
--- a/apps/desktop/src/app/settings/config-settings.tsx
+++ b/apps/desktop/src/app/settings/config-settings.tsx
@@ -1,28 +1,28 @@
+import { useQuery } from '@tanstack/react-query'
 import type { ChangeEvent, ReactNode } from 'react'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useSearchParams } from 'react-router-dom'
 
+import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { Switch } from '@/components/ui/switch'
 import { Textarea } from '@/components/ui/textarea'
-import {
-  getElevenLabsVoices,
-  getHermesConfigDefaults,
-  getHermesConfigRecord,
-  getHermesConfigSchema,
-  saveHermesConfig
-} from '@/hermes'
+import { getElevenLabsVoices, getHermesConfigSchema, saveHermesConfig } from '@/hermes'
 import { useI18n } from '@/i18n'
 import { cn } from '@/lib/utils'
 import { notify, notifyError } from '@/store/notifications'
 import type { ConfigFieldSchema, HermesConfigRecord } from '@/types/hermes'
 
+import { setHermesConfigCache, useHermesConfigRecord } from '../hooks/use-config-record'
+import { useOnProfileSwitch } from '../hooks/use-on-profile-switch'
+import { PanelEmpty } from '../overlays/panel'
+
 import { CONTROL_TEXT, EMPTY_SELECT_VALUE, FIELD_DESCRIPTIONS, FIELD_LABELS, SECTIONS } from './constants'
 import { fieldCopyForSchemaKey } from './field-copy'
 import { enumOptionsFor, getNested, prettyName, setNested } from './helpers'
 import { MemoryConnect } from './memory/connect'
-import { ModelSettings } from './model-settings'
+import { ModelSettings, ModelSettingsSkeleton } from './model-settings'
 import { EmptyState, ListRow, LoadingState, SettingsContent } from './primitives'
 import { ProviderConfigPanel } from './provider-config-panel'
 
@@ -225,31 +225,49 @@ export function ConfigSettings({
 }) {
   const { t } = useI18n()
   const c = t.settings.config
+  // The editable draft is local (debounced autosave watches it), but it's seeded
+  // from — and saved back through — the shared config cache, so edits are visible
+  // in the MCP/model surfaces and reopening the page doesn't reload-flash.
   const [config, setConfig] = useState<HermesConfigRecord | null>(null)
-  const [_defaults, setDefaults] = useState<HermesConfigRecord | null>(null)
-  const [schema, setSchema] = useState<Record<string, ConfigFieldSchema> | null>(null)
+  const { data: loadedConfig, isError: configLoadFailed, refetch: refetchConfig } = useHermesConfigRecord()
+
+  const {
+    data: schemaResponse,
+    isError: schemaFailed,
+    refetch: refetchSchema
+  } = useQuery({
+    queryKey: ['hermes-config-schema'],
+    queryFn: getHermesConfigSchema,
+    staleTime: 5 * 60 * 1000
+  })
+
+  const schema = schemaResponse?.fields ?? null
   const [elevenLabsVoiceOptions, setElevenLabsVoiceOptions] = useState<string[] | null>(null)
   const [elevenLabsVoiceLabels, setElevenLabsVoiceLabels] = useState<Record<string, string>>({})
   const saveVersionRef = useRef(0)
   const [saveVersion, setSaveVersion] = useState(0)
 
+  // Seed the local draft once, the first time the shared record lands.
+  // Background refetches thereafter must not clobber in-progress edits.
+  const configSeeded = useRef(false)
+
   useEffect(() => {
-    let cancelled = false
-    Promise.all([getHermesConfigRecord(), getHermesConfigDefaults(), getHermesConfigSchema()])
-      .then(([c, d, s]) => {
-        if (cancelled) {
-          return
-        }
+    if (loadedConfig && !configSeeded.current) {
+      configSeeded.current = true
+      setConfig(loadedConfig)
+    }
+  }, [loadedConfig])
 
-        setConfig(c)
-        setDefaults(d)
-        setSchema(s.fields)
-      })
-      .catch(err => notifyError(err, c.failedLoad))
-
-    return () => void (cancelled = true)
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- load once on mount; copy is stable
-  }, [])
+  // A profile switch invalidates (but doesn't clear) the shared config query, so
+  // the local draft would otherwise keep profile A's data and autosave it into
+  // B. Drop the seed + draft (re-seeds from B's refetch) and zero saveVersion so
+  // the pending debounced autosave is cancelled by its effect cleanup.
+  useOnProfileSwitch(() => {
+    configSeeded.current = false
+    setConfig(null)
+    saveVersionRef.current = 0
+    setSaveVersion(0)
+  })
 
   useEffect(() => {
     let cancelled = false
@@ -284,6 +302,9 @@ export function ConfigSettings({
       void (async () => {
         try {
           await saveHermesConfig(config)
+          // Mirror the saved record into the shared cache so MCP/model surfaces
+          // reflect the edit without their own refetch.
+          setHermesConfigCache(config)
 
           if (saveVersionRef.current === v) {
             onConfigSaved?.()
@@ -375,6 +396,41 @@ export function ConfigSettings({
   }
 
   if (!config || !schema) {
+    // A failed config/schema fetch must surface a retry, not spin forever.
+    if ((configLoadFailed && !config) || (schemaFailed && !schema)) {
+      return (
+        <div className="flex h-full min-h-0 flex-1">
+          <PanelEmpty
+            action={
+              <Button
+                onClick={() => {
+                  void refetchConfig()
+                  void refetchSchema()
+                }}
+                size="sm"
+              >
+                {t.skills.refresh}
+              </Button>
+            }
+            icon="error"
+            title={c.failedLoad}
+          />
+        </div>
+      )
+    }
+
+    // Model keeps its shape via a skeleton (its catalog fetch is the slow part);
+    // other sections are quick config/schema reads, so a light loader is fine.
+    if (activeSectionId === 'model') {
+      return (
+        <SettingsContent>
+          <div className="mb-6">
+            <ModelSettingsSkeleton />
+          </div>
+        </SettingsContent>
+      )
+    }
+
     return <LoadingState label={c.loading} />
   }
 
diff --git a/apps/desktop/src/app/settings/constants.ts b/apps/desktop/src/app/settings/constants.ts
index eb0cb6814..9ef127c65 100644
--- a/apps/desktop/src/app/settings/constants.ts
+++ b/apps/desktop/src/app/settings/constants.ts
@@ -1,5 +1,16 @@
-import { codiconIcon } from '@/components/ui/codicon'
-import { Brain, type IconComponent, Lock, MessageCircle, Mic, Monitor, Moon, Palette, Sun, Wrench } from '@/lib/icons'
+import {
+  Box,
+  Brain,
+  type IconComponent,
+  Lock,
+  MessageCircle,
+  Mic,
+  Monitor,
+  Moon,
+  Palette,
+  Sun,
+  Wrench
+} from '@/lib/icons'
 import type { ThemeMode } from '@/themes/context'
 
 import { defineFieldCopy } from './field-copy'
@@ -490,7 +501,7 @@ export const SECTIONS: DesktopConfigSection[] = [
   {
     id: 'model',
     label: 'Model',
-    icon: codiconIcon('symbol-namespace'),
+    icon: Box,
     keys: ['model_context_length', 'fallback_providers']
   },
   {
diff --git a/apps/desktop/src/app/settings/credential-key-ui.tsx b/apps/desktop/src/app/settings/credential-key-ui.tsx
index dc829ae68..e963c3c0f 100644
--- a/apps/desktop/src/app/settings/credential-key-ui.tsx
+++ b/apps/desktop/src/app/settings/credential-key-ui.tsx
@@ -3,7 +3,7 @@ import { type ChangeEvent, type KeyboardEvent } from 'react'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { translateNow, useI18n } from '@/i18n'
-import { ChevronDown, ExternalLink, Loader2, Save } from '@/lib/icons'
+import { ChevronDown, ExternalLink, Loader2, Save, Trash2 } from '@/lib/icons'
 import { cn } from '@/lib/utils'
 import type { EnvVarInfo } from '@/types/hermes'
 
@@ -17,6 +17,13 @@ export type KeyRowProps = Omit<EnvRowProps, 'info' | 'varKey'>
 /** Matches Advanced / config field controls (ListRow + Input). */
 export const CREDENTIAL_CONTROL_CLASS = cn('h-8', CONTROL_TEXT)
 
+// Resting credential field: chrome stripped so it reads as plain subtext.
+// Stacked (<@2xl) it collapses to zero box (flush under its label); at @2xl it
+// keeps the full control metrics (h-8 + px-2.5/py-1.5) so it centres on the
+// label and nothing shifts when focus/expand adds the border. `!` beats the
+// unlayered chrome CSS and the shared control sizing.
+const CRED_BARE = 'border-0! bg-transparent! shadow-none! h-auto! p-0! @2xl:h-8! @2xl:px-2.5! @2xl:py-1.5!'
+
 export const isKeyVar = (key: string, info: EnvVarInfo) => info.is_password || /(?:_API_KEY|_TOKEN|_KEY)$/.test(key)
 
 export const friendlyFieldLabel = (key: string, info: EnvVarInfo) =>
@@ -37,11 +44,13 @@ export const credentialPlaceholder = (key: string, info: EnvVarInfo, label: stri
 // (redacted value) that edits in place on click. Save appears once typed; a set
 // key also offers Remove, and Esc cancels without closing the overlay.
 export function KeyField({
+  expanded = false,
   info,
   placeholder,
   rowProps,
   varKey
 }: {
+  expanded?: boolean
   info: EnvVarInfo
   placeholder?: string
   rowProps: KeyRowProps
@@ -50,6 +59,9 @@ export function KeyField({
   const { t } = useI18n()
   const { edits, onClear, onSave, saving, setEdits } = rowProps
   const editing = edits[varKey] !== undefined
+  // Bare (plain subtext) only while the group is collapsed and idle. Expanding
+  // the card counts as "focused in", so it gets full input chrome too.
+  const bare = !editing && !expanded
   const draft = edits[varKey] ?? ''
   const dirty = draft.trim().length > 0
   const busy = saving === varKey
@@ -73,7 +85,7 @@ export function KeyField({
   if (info.is_set && !editing) {
     return (
       <Input
-        className={cn(CREDENTIAL_CONTROL_CLASS, 'cursor-pointer text-muted-foreground')}
+        className={cn(CREDENTIAL_CONTROL_CLASS, bare && CRED_BARE, 'cursor-pointer text-muted-foreground')}
         onFocus={startEdit}
         readOnly
         value={masked}
@@ -82,42 +94,46 @@ export function KeyField({
   }
 
   return (
-    <div className="grid gap-1">
-      <div className="flex items-center gap-2">
-        <Input
-          autoFocus={editing}
-          className={cn(CREDENTIAL_CONTROL_CLASS, 'min-w-0 flex-1')}
-          onChange={update}
-          onKeyDown={keydown}
-          placeholder={placeholder ?? t.settings.credentials.pasteKey}
-          type={editType}
-          value={draft}
-        />
-        {dirty && (
-          <Button className="h-8 shrink-0" disabled={busy} onClick={() => void onSave(varKey)} size="sm">
-            {busy ? <Loader2 className="animate-spin" /> : <Save />}
-            {busy ? t.settings.credentials.saving : t.common.save}
-          </Button>
-        )}
-      </div>
-      {editing && (
-        <div className="flex items-center gap-1 text-[0.6875rem]">
+    <div className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-2">
+      <Input
+        autoFocus={editing}
+        className={cn(CREDENTIAL_CONTROL_CLASS, bare && CRED_BARE)}
+        onChange={update}
+        onFocus={() => {
+          if (!editing) {
+            startEdit()
+          }
+        }}
+        onKeyDown={keydown}
+        placeholder={placeholder ?? t.settings.credentials.pasteKey}
+        type={editType}
+        value={draft}
+      />
+      {/* Inline trailing controls — mirrors SearchField's inline clear button.
+          No floating hint row that reflows the grid or overlaps the card body;
+          Esc still cancels via keydown. */}
+      {editing && (info.is_set || dirty) && (
+        <div className="flex items-center gap-1">
           {info.is_set && (
-            <>
-              <Button
-                className="text-[0.6875rem] text-destructive hover:text-destructive"
-                disabled={busy}
-                onClick={() => void onClear(varKey)}
-                size="inline"
-                type="button"
-                variant="text"
-              >
-                {t.settings.credentials.remove}
-              </Button>
-              <span className="text-muted-foreground">{t.settings.credentials.or}</span>
-            </>
+            <Button
+              aria-label={t.settings.credentials.remove}
+              className="text-muted-foreground hover:text-destructive"
+              disabled={busy}
+              onClick={() => void onClear(varKey)}
+              size="icon-xs"
+              title={t.settings.credentials.remove}
+              type="button"
+              variant="ghost"
+            >
+              <Trash2 />
+            </Button>
+          )}
+          {dirty && (
+            <Button className="h-8" disabled={busy} onClick={() => void onSave(varKey)} size="sm">
+              {busy ? <Loader2 className="animate-spin" /> : <Save />}
+              {busy ? t.settings.credentials.saving : t.common.save}
+            </Button>
           )}
-          <span className="text-muted-foreground">{t.settings.credentials.escToCancel}</span>
         </div>
       )}
     </div>
@@ -159,15 +175,22 @@ export function CredentialKeyCard({
   return (
     <div
       className={cn(
-        'group/card rounded-[6px] px-2 py-1 transition-colors',
+        '@container group/card rounded-[6px] p-3 transition-colors',
         expandable && 'cursor-pointer',
-        expandable && !expanded && 'hover:bg-(--ui-row-hover-background)',
+        expandable && !expanded && 'row-hover',
         expanded && 'bg-(--ui-bg-quaternary) ring-1 ring-(--ui-stroke-secondary)'
       )}
       onClick={expandable ? onToggle : undefined}
       onKeyDown={
         expandable
           ? e => {
+              // Only the card's own focus toggles it — ignore Enter/Space
+              // bubbling up from the inputs/buttons inside (Enter saves a key,
+              // Space types a space) so keyboard editing never collapses the card.
+              if (e.target !== e.currentTarget) {
+                return
+              }
+
               if (e.key === 'Enter' || e.key === ' ') {
                 e.preventDefault()
                 onToggle()
@@ -178,8 +201,11 @@ export function CredentialKeyCard({
       role={expandable ? 'button' : undefined}
       tabIndex={expandable ? 0 : undefined}
     >
-      <div className="grid gap-3 py-2 sm:grid-cols-[minmax(0,1fr)_minmax(15rem,22rem)] sm:items-center">
-        <div className="flex min-w-0 items-center gap-2">
+      {/* One CSS grid: 1 col stacked, 2 cols at @2xl. p-3 card padding = gap-3
+          row/col gaps, everything top-left aligned (items-start), no indents.
+          The label row is h-8 to line up with the input row beside it. */}
+      <div className="grid grid-cols-1 items-start gap-x-3 gap-y-1.5 @2xl:grid-cols-[minmax(0,1fr)_minmax(15rem,22rem)] @2xl:gap-y-3">
+        <div className="flex h-8 min-w-0 items-center gap-2">
           <span
             className={cn('size-2 shrink-0 rounded-full', info.is_set ? 'bg-primary' : 'bg-(--ui-stroke-secondary)')}
           />
@@ -199,7 +225,7 @@ export function CredentialKeyCard({
         </div>
 
         <div
-          className="min-w-0 sm:justify-self-end"
+          className="min-w-0"
           onClick={e => e.stopPropagation()}
           onFocus={() => {
             if (expandable && !expanded) {
@@ -207,21 +233,21 @@ export function CredentialKeyCard({
             }
           }}
         >
-          <KeyField info={info} placeholder={placeholder} rowProps={rowProps} varKey={varKey} />
+          <KeyField expanded={expanded} info={info} placeholder={placeholder} rowProps={rowProps} varKey={varKey} />
         </div>
+
+        {expandable && expanded && (
+          <div className="grid gap-3 @2xl:col-span-2" onClick={e => e.stopPropagation()}>
+            {description && (
+              <p className="text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
+                {description}
+              </p>
+            )}
+
+            {docsUrl && <CredentialDocsLink href={docsUrl} />}
+          </div>
+        )}
       </div>
-
-      {expandable && expanded && (
-        <div className="grid gap-2.5 pb-2 pl-4" onClick={e => e.stopPropagation()}>
-          {description && (
-            <p className="text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
-              {description}
-            </p>
-          )}
-
-          {docsUrl && <CredentialDocsLink href={docsUrl} />}
-        </div>
-      )}
     </div>
   )
 }
@@ -236,15 +262,22 @@ export function ProviderKeyRows({ expanded, group, onExpand, onToggle, rowProps
   return (
     <div
       className={cn(
-        'group/card rounded-[6px] px-2 py-1 transition-colors',
+        '@container group/card rounded-[6px] p-3 transition-colors',
         expandable && 'cursor-pointer',
-        expandable && !expanded && 'hover:bg-(--ui-row-hover-background)',
+        expandable && !expanded && 'row-hover',
         expanded && 'bg-(--ui-bg-quaternary) ring-1 ring-(--ui-stroke-secondary)'
       )}
       onClick={expandable ? onToggle : undefined}
       onKeyDown={
         expandable
           ? e => {
+              // Only the card's own focus toggles it — ignore Enter/Space
+              // bubbling up from the inputs/buttons inside (Enter saves a key,
+              // Space types a space) so keyboard editing never collapses the card.
+              if (e.target !== e.currentTarget) {
+                return
+              }
+
               if (e.key === 'Enter' || e.key === ' ') {
                 e.preventDefault()
                 onToggle()
@@ -255,8 +288,10 @@ export function ProviderKeyRows({ expanded, group, onExpand, onToggle, rowProps
       role={expandable ? 'button' : undefined}
       tabIndex={expandable ? 0 : undefined}
     >
-      <div className="grid gap-3 py-2 sm:grid-cols-[minmax(0,1fr)_minmax(15rem,22rem)] sm:items-center">
-        <div className="flex min-w-0 items-center gap-2">
+      {/* Same grid as CredentialKeyCard: 1 col stacked, 2 cols at @2xl, p-3 =
+          gap-3, items-start, label row h-8 to line up with the input row. */}
+      <div className="grid grid-cols-1 items-start gap-x-3 gap-y-1.5 @2xl:grid-cols-[minmax(0,1fr)_minmax(15rem,22rem)] @2xl:gap-y-3">
+        <div className="flex h-8 min-w-0 items-center gap-2">
           <span
             className={cn(
               'size-2 shrink-0 rounded-full',
@@ -279,7 +314,7 @@ export function ProviderKeyRows({ expanded, group, onExpand, onToggle, rowProps
         </div>
 
         <div
-          className="min-w-0 sm:justify-self-end"
+          className="min-w-0"
           onClick={e => e.stopPropagation()}
           onFocus={() => {
             if (expandable && !expanded) {
@@ -288,46 +323,48 @@ export function ProviderKeyRows({ expanded, group, onExpand, onToggle, rowProps
           }}
         >
           <KeyField
+            expanded={expanded}
             info={group.primary[1]}
             placeholder={t.settings.credentials.pasteLabelKey(group.name)}
             rowProps={rowProps}
             varKey={group.primary[0]}
           />
         </div>
+
+        {expandable && expanded && (
+          <div className="grid gap-3 @2xl:col-span-2" onClick={e => e.stopPropagation()}>
+            {description && (
+              <p className="text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
+                {description}
+              </p>
+            )}
+
+            {group.advanced.map(([key, info]) => {
+              const fieldLabel = isKeyVar(key, info)
+                ? prettyName(key.replace(/(?:_API_KEY|_TOKEN|_KEY)$/i, ''))
+                : friendlyFieldLabel(key, info)
+
+              return (
+                <ListRow
+                  action={
+                    <KeyField
+                      expanded={expanded}
+                      info={info}
+                      placeholder={credentialPlaceholder(key, info, fieldLabel)}
+                      rowProps={rowProps}
+                      varKey={key}
+                    />
+                  }
+                  key={key}
+                  title={fieldLabel}
+                />
+              )
+            })}
+
+            {docsUrl && <CredentialDocsLink href={docsUrl} />}
+          </div>
+        )}
       </div>
-
-      {expandable && expanded && (
-        <div className="grid gap-2.5 pb-2 pl-4" onClick={e => e.stopPropagation()}>
-          {description && (
-            <p className="text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
-              {description}
-            </p>
-          )}
-
-          {group.advanced.map(([key, info]) => {
-            const fieldLabel = isKeyVar(key, info)
-              ? prettyName(key.replace(/(?:_API_KEY|_TOKEN|_KEY)$/i, ''))
-              : friendlyFieldLabel(key, info)
-
-            return (
-              <ListRow
-                action={
-                  <KeyField
-                    info={info}
-                    placeholder={credentialPlaceholder(key, info, fieldLabel)}
-                    rowProps={rowProps}
-                    varKey={key}
-                  />
-                }
-                key={key}
-                title={fieldLabel}
-              />
-            )
-          })}
-
-          {docsUrl && <CredentialDocsLink href={docsUrl} />}
-        </div>
-      )}
     </div>
   )
 }
diff --git a/apps/desktop/src/app/settings/helpers.ts b/apps/desktop/src/app/settings/helpers.ts
index d08bc5a60..ff5818129 100644
--- a/apps/desktop/src/app/settings/helpers.ts
+++ b/apps/desktop/src/app/settings/helpers.ts
@@ -1,12 +1,11 @@
+import { asText } from '@/lib/text'
 import type { HermesConfigRecord, ToolsetInfo } from '@/types/hermes'
 
 import { BUILTIN_PERSONALITIES, ENUM_OPTIONS, PROVIDER_GROUPS } from './constants'
 
-export const asText = (v: unknown): string => (typeof v === 'string' ? v : v == null ? '' : String(v))
-
-export const includesQuery = (v: unknown, q: string) => asText(v).toLowerCase().includes(q)
-
-export const prettyName = (v: string) => v.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase())
+// Canonical implementations live in @/lib/text; re-exported here so the many
+// settings/capabilities call sites keep their import path.
+export { asText, includesQuery, prettyName } from '@/lib/text'
 
 /** Strip leading emoji from toolset titles (CLI registry prefixes labels with icons). */
 export const stripToolsetLabel = (label: string): string =>
diff --git a/apps/desktop/src/app/settings/index.tsx b/apps/desktop/src/app/settings/index.tsx
index 09a029709..9c7c4dd0b 100644
--- a/apps/desktop/src/app/settings/index.tsx
+++ b/apps/desktop/src/app/settings/index.tsx
@@ -1,4 +1,5 @@
-import { useRef } from 'react'
+import { useEffect, useRef } from 'react'
+import { useLocation, useNavigate } from 'react-router-dom'
 
 import { codiconIcon } from '@/components/ui/codicon'
 import { Tip } from '@/components/ui/tooltip'
@@ -10,8 +11,9 @@ import { notifyError } from '@/store/notifications'
 
 import { useRouteEnumParam } from '../hooks/use-route-enum-param'
 import { OverlayIconButton } from '../overlays/overlay-chrome'
-import { OverlayMain, OverlayNavItem, OverlaySidebar, OverlaySplitLayout } from '../overlays/overlay-split-layout'
+import { OverlayMain, OverlayNav, type OverlayNavGroup, OverlaySplitLayout } from '../overlays/overlay-split-layout'
 import { OverlayView } from '../overlays/overlay-view'
+import { SKILLS_ROUTE } from '../routes'
 
 import { AboutSettings } from './about-settings'
 import { AppearanceSettings } from './appearance-settings'
@@ -19,7 +21,6 @@ import { ConfigSettings } from './config-settings'
 import { SECTIONS } from './constants'
 import { GatewaySettings } from './gateway-settings'
 import { KEYS_VIEWS, KeysSettings, type KeysView } from './keys-settings'
-import { McpSettings } from './mcp-settings'
 import { NotificationsSettings } from './notifications-settings'
 import { PROVIDER_VIEWS, ProvidersSettings, type ProviderView } from './providers-settings'
 import { SessionsSettings } from './sessions-settings'
@@ -30,29 +31,55 @@ const SETTINGS_VIEWS: readonly SettingsViewId[] = [
   'providers',
   'gateway',
   'keys',
-  'mcp',
   'notifications',
   'sessions',
   'about'
 ]
 
-export function SettingsView({ gateway, onClose, onConfigSaved, onMainModelChanged }: SettingsPageProps) {
+export function SettingsView({ onClose, onConfigSaved, onMainModelChanged }: SettingsPageProps) {
   const { t } = useI18n()
+  const navigate = useNavigate()
+  const { hash, pathname, search } = useLocation()
+
+  // MCP moved out of Settings into Capabilities (/skills?tab=mcp). Keep old
+  // `/settings?tab=mcp` deep links working — `useRouteEnumParam` would silently
+  // coerce the unknown tab to the default view otherwise. Preserve `server=` so
+  // an old bookmark still lands on (and highlights) the selected server.
+  useEffect(() => {
+    const params = new URLSearchParams(search)
+
+    if (params.get('tab') === 'mcp') {
+      const server = params.get('server')
+      const suffix = server ? `&server=${encodeURIComponent(server)}` : ''
+      navigate(`${SKILLS_ROUTE}?tab=mcp${suffix}`, { replace: true })
+    }
+  }, [navigate, search])
+
   const [activeView, setActiveView] = useRouteEnumParam('tab', SETTINGS_VIEWS, 'config:model' as SettingsViewId)
   // Providers subnav (Accounts vs API keys) lives in its own param so each
   // sub-view is deep-linkable and survives a refresh.
   const [providerView, setProviderView] = useRouteEnumParam<ProviderView>('pview', PROVIDER_VIEWS, 'accounts')
-  const [keysView, setKeysView] = useRouteEnumParam<KeysView>('kview', KEYS_VIEWS, 'tools')
+  const [keysView] = useRouteEnumParam<KeysView>('kview', KEYS_VIEWS, 'tools')
 
-  const openProviderView = (view: ProviderView) => {
-    setActiveView('providers')
-    setProviderView(view)
+  // Jump to a section + its sub-view in one navigate. Two sequential setters
+  // would each read the same stale `search` and the second would clobber the
+  // first's `tab` — so the sub-view never opened on narrow screens.
+  const openSubView = (tab: SettingsViewId, param: string, value: string, fallback: string) => {
+    const params = new URLSearchParams(search)
+    params.set('tab', tab)
+
+    if (value === fallback) {
+      params.delete(param)
+    } else {
+      params.set(param, value)
+    }
+
+    const qs = params.toString()
+    navigate({ hash, pathname, search: qs ? `?${qs}` : '' }, { replace: true })
   }
 
-  const openKeysView = (view: KeysView) => {
-    setActiveView('keys')
-    setKeysView(view)
-  }
+  const openProviderView = (view: ProviderView) => openSubView('providers', 'pview', view, 'accounts')
+  const openKeysView = (view: KeysView) => openSubView('keys', 'kview', view, 'tools')
 
   const importInputRef = useRef<HTMLInputElement | null>(null)
 
@@ -86,134 +113,133 @@ export function SettingsView({ gateway, onClose, onConfigSaved, onMainModelChang
     }
   }
 
+  const navGroups: OverlayNavGroup[] = [
+    ...SECTIONS.map(s => {
+      const view = `config:${s.id}` as SettingsViewId
+
+      return {
+        active: activeView === view,
+        icon: s.icon,
+        id: view,
+        label: t.settings.sections[s.id] ?? s.label,
+        onSelect: () => setActiveView(view)
+      }
+    }),
+    {
+      active: activeView === 'notifications',
+      icon: Bell,
+      id: 'notifications',
+      label: t.settings.nav.notifications,
+      onSelect: () => setActiveView('notifications')
+    },
+    {
+      active: activeView === 'providers',
+      children: [
+        {
+          active: activeView === 'providers' && providerView === 'accounts',
+          icon: codiconIcon('account'),
+          id: 'pview:accounts',
+          label: t.settings.nav.providerAccounts,
+          onSelect: () => openProviderView('accounts')
+        },
+        {
+          active: activeView === 'providers' && providerView === 'keys',
+          icon: KeyRound,
+          id: 'pview:keys',
+          label: t.settings.nav.providerApiKeys,
+          onSelect: () => openProviderView('keys')
+        }
+      ],
+      gapBefore: true,
+      icon: Zap,
+      id: 'providers',
+      label: t.settings.nav.providers,
+      onSelect: () => setActiveView('providers')
+    },
+    {
+      active: activeView === 'gateway',
+      icon: Globe,
+      id: 'gateway',
+      label: t.settings.nav.gateway,
+      onSelect: () => setActiveView('gateway')
+    },
+    {
+      active: activeView === 'keys',
+      children: [
+        {
+          active: activeView === 'keys' && keysView === 'tools',
+          icon: Wrench,
+          id: 'kview:tools',
+          label: t.settings.nav.keysTools,
+          onSelect: () => openKeysView('tools')
+        },
+        {
+          active: activeView === 'keys' && keysView === 'settings',
+          icon: Settings2,
+          id: 'kview:settings',
+          label: t.settings.nav.keysSettings,
+          onSelect: () => openKeysView('settings')
+        }
+      ],
+      icon: KeyRound,
+      id: 'keys',
+      label: t.settings.nav.apiKeys,
+      onSelect: () => setActiveView('keys')
+    },
+    {
+      active: activeView === 'sessions',
+      icon: Archive,
+      id: 'sessions',
+      label: t.settings.nav.archivedChats,
+      onSelect: () => setActiveView('sessions')
+    },
+    {
+      active: activeView === 'about',
+      gapBefore: true,
+      icon: Info,
+      id: 'about',
+      label: t.settings.nav.about,
+      onSelect: () => setActiveView('about')
+    }
+  ]
+
+  const navFooter = (
+    <>
+      <Tip label={t.settings.exportConfig}>
+        <OverlayIconButton onClick={() => void exportConfig()}>
+          <Download />
+        </OverlayIconButton>
+      </Tip>
+      <Tip label={t.settings.importConfig}>
+        <OverlayIconButton
+          onClick={() => {
+            triggerHaptic('open')
+            importInputRef.current?.click()
+          }}
+        >
+          <Upload />
+        </OverlayIconButton>
+      </Tip>
+      <Tip label={t.settings.resetToDefaults}>
+        <OverlayIconButton
+          className="hover:text-destructive"
+          onClick={() => {
+            triggerHaptic('warning')
+            void resetConfig()
+          }}
+        >
+          <RefreshCw />
+        </OverlayIconButton>
+      </Tip>
+    </>
+  )
+
   return (
     <OverlayView closeLabel={t.settings.closeSettings} onClose={onClose}>
       <OverlaySplitLayout>
-        <OverlaySidebar>
-          {SECTIONS.map(s => {
-            const view = `config:${s.id}` as SettingsViewId
+        <OverlayNav footer={navFooter} groups={navGroups} />
 
-            return (
-              <OverlayNavItem
-                active={activeView === view}
-                icon={s.icon}
-                key={s.id}
-                label={t.settings.sections[s.id] ?? s.label}
-                onClick={() => setActiveView(view)}
-              />
-            )
-          })}
-          <OverlayNavItem
-            active={activeView === 'notifications'}
-            icon={Bell}
-            label={t.settings.nav.notifications}
-            onClick={() => setActiveView('notifications')}
-          />
-          <div className="my-2 h-px bg-border/30" />
-          <OverlayNavItem
-            active={activeView === 'providers'}
-            icon={Zap}
-            label={t.settings.nav.providers}
-            onClick={() => setActiveView('providers')}
-          />
-          {activeView === 'providers' && (
-            <div className="ml-3.5 flex flex-col gap-0.5 pl-1.5">
-              <OverlayNavItem
-                active={providerView === 'accounts'}
-                icon={codiconIcon('account')}
-                label={t.settings.nav.providerAccounts}
-                nested
-                onClick={() => openProviderView('accounts')}
-              />
-              <OverlayNavItem
-                active={providerView === 'keys'}
-                icon={KeyRound}
-                label={t.settings.nav.providerApiKeys}
-                nested
-                onClick={() => openProviderView('keys')}
-              />
-            </div>
-          )}
-          <OverlayNavItem
-            active={activeView === 'gateway'}
-            icon={Globe}
-            label={t.settings.nav.gateway}
-            onClick={() => setActiveView('gateway')}
-          />
-          <OverlayNavItem
-            active={activeView === 'keys'}
-            icon={KeyRound}
-            label={t.settings.nav.apiKeys}
-            onClick={() => setActiveView('keys')}
-          />
-          {activeView === 'keys' && (
-            <div className="ml-3.5 flex flex-col gap-0.5 pl-1.5">
-              <OverlayNavItem
-                active={keysView === 'tools'}
-                icon={Wrench}
-                label={t.settings.nav.keysTools}
-                nested
-                onClick={() => openKeysView('tools')}
-              />
-              <OverlayNavItem
-                active={keysView === 'settings'}
-                icon={Settings2}
-                label={t.settings.nav.keysSettings}
-                nested
-                onClick={() => openKeysView('settings')}
-              />
-            </div>
-          )}
-          <OverlayNavItem
-            active={activeView === 'mcp'}
-            icon={Wrench}
-            label={t.settings.nav.mcp}
-            onClick={() => setActiveView('mcp')}
-          />
-          <OverlayNavItem
-            active={activeView === 'sessions'}
-            icon={Archive}
-            label={t.settings.nav.archivedChats}
-            onClick={() => setActiveView('sessions')}
-          />
-          <div className="my-2 h-px bg-border/30" />
-          <OverlayNavItem
-            active={activeView === 'about'}
-            icon={Info}
-            label={t.settings.nav.about}
-            onClick={() => setActiveView('about')}
-          />
-          <div className="mt-auto flex items-center gap-1 pt-2">
-            <Tip label={t.settings.exportConfig}>
-              <OverlayIconButton onClick={() => void exportConfig()}>
-                <Download className="size-3.5" />
-              </OverlayIconButton>
-            </Tip>
-            <Tip label={t.settings.importConfig}>
-              <OverlayIconButton
-                onClick={() => {
-                  triggerHaptic('open')
-                  importInputRef.current?.click()
-                }}
-              >
-                <Upload className="size-3.5" />
-              </OverlayIconButton>
-            </Tip>
-            <Tip label={t.settings.resetToDefaults}>
-              <OverlayIconButton
-                className="hover:text-destructive"
-                onClick={() => {
-                  triggerHaptic('warning')
-                  void resetConfig()
-                }}
-              >
-                <RefreshCw className="size-3.5" />
-              </OverlayIconButton>
-            </Tip>
-          </div>
-        </OverlaySidebar>
-
-        <OverlayMain className="px-0 pb-0 pt-[calc(var(--titlebar-height)/2+1rem)]">
+        <OverlayMain className="px-0 pb-0">
           {activeView === 'config:appearance' ? (
             <AppearanceSettings />
           ) : activeView === 'about' ? (
@@ -231,8 +257,6 @@ export function SettingsView({ gateway, onClose, onConfigSaved, onMainModelChang
             <ProvidersSettings onClose={onClose} onViewChange={setProviderView} view={providerView} />
           ) : activeView === 'keys' ? (
             <KeysSettings view={keysView} />
-          ) : activeView === 'mcp' ? (
-            <McpSettings gateway={gateway} onConfigSaved={onConfigSaved} />
           ) : activeView === 'notifications' ? (
             <NotificationsSettings />
           ) : (
diff --git a/apps/desktop/src/app/settings/mcp-settings.tsx b/apps/desktop/src/app/settings/mcp-settings.tsx
deleted file mode 100644
index c638f0b2c..000000000
--- a/apps/desktop/src/app/settings/mcp-settings.tsx
+++ /dev/null
@@ -1,534 +0,0 @@
-import { useStore } from '@nanostores/react'
-import { useCallback, useEffect, useMemo, useState } from 'react'
-
-import { Badge } from '@/components/ui/badge'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Switch } from '@/components/ui/switch'
-import { Textarea } from '@/components/ui/textarea'
-import {
-  getHermesConfigRecord,
-  getMcpCatalog,
-  type HermesGateway,
-  installMcpCatalogEntry,
-  type McpCatalogEntry,
-  saveHermesConfig,
-  setMcpServerEnabled,
-  testMcpServer
-} from '@/hermes'
-import { useI18n } from '@/i18n'
-import { Wrench } from '@/lib/icons'
-import { cn } from '@/lib/utils'
-import { notify, notifyError } from '@/store/notifications'
-import { $activeSessionId } from '@/store/session'
-import type { HermesConfigRecord, McpServerTestResponse } from '@/types/hermes'
-
-import { EmptyState, LoadingState, Pill, SettingsContent } from './primitives'
-import { useDeepLinkHighlight } from './use-deep-link-highlight'
-
-interface McpSettingsProps {
-  gateway?: HermesGateway | null
-  onConfigSaved?: () => void
-}
-
-type McpServers = Record<string, Record<string, unknown>>
-type McpView = 'catalog' | 'servers'
-
-const EMPTY_SERVER = {
-  command: '',
-  args: [],
-  env: {}
-}
-
-function getServers(config: HermesConfigRecord | null): McpServers {
-  const raw = config?.mcp_servers
-
-  return raw && typeof raw === 'object' && !Array.isArray(raw) ? (raw as McpServers) : {}
-}
-
-const transportLabel = (server: Record<string, unknown>) =>
-  typeof server.transport === 'string'
-    ? server.transport
-    : typeof server.url === 'string'
-      ? 'http'
-      : typeof server.command === 'string'
-        ? 'stdio'
-        : 'custom'
-
-export function McpSettings({ gateway, onConfigSaved }: McpSettingsProps) {
-  const { t } = useI18n()
-  const m = t.settings.mcp
-  const activeSessionId = useStore($activeSessionId)
-  const [view, setView] = useState<McpView>('servers')
-  const [config, setConfig] = useState<HermesConfigRecord | null>(null)
-  const [selected, setSelected] = useState<string | null>(null)
-  const [name, setName] = useState('')
-  const [body, setBody] = useState('')
-  const [saving, setSaving] = useState(false)
-  const [reloading, setReloading] = useState(false)
-  const [testing, setTesting] = useState(false)
-  const [testResult, setTestResult] = useState<McpServerTestResponse | null>(null)
-  const [togglingEnabled, setTogglingEnabled] = useState(false)
-
-  useEffect(() => {
-    let cancelled = false
-
-    getHermesConfigRecord()
-      .then(next => {
-        if (cancelled) {
-          return
-        }
-
-        setConfig(next)
-        const first = Object.keys(getServers(next)).sort()[0] ?? null
-        setSelected(first)
-      })
-      .catch(err => notifyError(err, m.failedLoad))
-
-    return () => void (cancelled = true)
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- load once on mount; copy is stable
-  }, [])
-
-  const servers = useMemo(() => getServers(config), [config])
-  const names = useMemo(() => Object.keys(servers).sort(), [servers])
-
-  useDeepLinkHighlight({
-    block: 'nearest',
-    elementId: serverName => `mcp-server-${serverName}`,
-    onResolve: setSelected,
-    param: 'server',
-    ready: serverName => Boolean(config) && serverName in servers
-  })
-
-  useEffect(() => {
-    const server = selected ? servers[selected] : null
-
-    setName(selected ?? '')
-    setBody(JSON.stringify(server ?? EMPTY_SERVER, null, 2))
-    setTestResult(null)
-  }, [selected, servers])
-
-  const refreshConfig = useCallback(async () => {
-    try {
-      const next = await getHermesConfigRecord()
-      setConfig(next)
-    } catch (err) {
-      notifyError(err, m.failedLoad)
-    }
-  }, [m.failedLoad])
-
-  if (!config) {
-    return <LoadingState label={m.loading} />
-  }
-
-  const saveServer = async () => {
-    const nextName = name.trim()
-
-    if (!nextName) {
-      notify({ kind: 'error', title: m.nameRequiredTitle, message: m.nameRequiredMessage })
-
-      return
-    }
-
-    let parsed: Record<string, unknown>
-
-    try {
-      const raw = JSON.parse(body)
-
-      if (!raw || typeof raw !== 'object' || Array.isArray(raw)) {
-        throw new Error(m.objectRequired)
-      }
-
-      parsed = raw as Record<string, unknown>
-    } catch (err) {
-      notifyError(err, m.invalidJson)
-
-      return
-    }
-
-    setSaving(true)
-
-    try {
-      const nextServers = { ...servers }
-
-      if (selected && selected !== nextName) {
-        delete nextServers[selected]
-      }
-
-      nextServers[nextName] = parsed
-
-      const nextConfig = { ...config, mcp_servers: nextServers }
-      await saveHermesConfig(nextConfig)
-      setConfig(nextConfig)
-      setSelected(nextName)
-      onConfigSaved?.()
-      notify({ kind: 'success', title: m.savedTitle, message: m.savedMessage(nextName) })
-    } catch (err) {
-      notifyError(err, m.saveFailed)
-    } finally {
-      setSaving(false)
-    }
-  }
-
-  const removeServer = async (serverName: string) => {
-    setSaving(true)
-
-    try {
-      const nextServers = { ...servers }
-      delete nextServers[serverName]
-
-      const nextConfig = { ...config, mcp_servers: nextServers }
-      await saveHermesConfig(nextConfig)
-      setConfig(nextConfig)
-      setSelected(Object.keys(nextServers).sort()[0] ?? null)
-      onConfigSaved?.()
-    } catch (err) {
-      notifyError(err, m.removeFailed)
-    } finally {
-      setSaving(false)
-    }
-  }
-
-  const reloadMcp = async () => {
-    if (!gateway) {
-      notify({ kind: 'warning', title: m.gatewayUnavailableTitle, message: m.gatewayUnavailableMessage })
-
-      return
-    }
-
-    setReloading(true)
-
-    try {
-      await gateway.request('reload.mcp', {
-        confirm: true,
-        session_id: activeSessionId ?? undefined
-      })
-      notify({ kind: 'success', title: m.reloadedTitle, message: m.reloadedMessage })
-    } catch (err) {
-      notifyError(err, m.reloadFailed)
-    } finally {
-      setReloading(false)
-    }
-  }
-
-  const runTest = async (serverName: string) => {
-    setTesting(true)
-    setTestResult(null)
-
-    try {
-      const result = await testMcpServer(serverName)
-      setTestResult(result)
-    } catch (err) {
-      setTestResult({ ok: false, error: err instanceof Error ? err.message : String(err), tools: [] })
-    } finally {
-      setTesting(false)
-    }
-  }
-
-  const toggleEnabled = async (serverName: string, enabled: boolean) => {
-    setTogglingEnabled(true)
-
-    try {
-      await setMcpServerEnabled(serverName, enabled)
-      // Mirror the change locally so the editor and list stay in sync.
-      const nextServers = { ...servers, [serverName]: { ...servers[serverName], enabled } }
-      setConfig({ ...config, mcp_servers: nextServers })
-      notify({
-        kind: 'success',
-        title: enabled ? m.serverEnabled(serverName) : m.serverDisabled(serverName),
-        message: ''
-      })
-    } catch (err) {
-      notifyError(err, m.toggleFailed(serverName))
-    } finally {
-      setTogglingEnabled(false)
-    }
-  }
-
-  const selectedEnabled = selected ? servers[selected]?.enabled !== false : true
-
-  return (
-    <SettingsContent>
-      <div className="mb-4 flex items-center justify-between gap-4">
-        <div className="flex items-center gap-3">
-          <TabButton active={view === 'servers'} label={m.tabServers} onClick={() => setView('servers')} />
-          <TabButton active={view === 'catalog'} label={m.tabCatalog} onClick={() => setView('catalog')} />
-        </div>
-        {view === 'servers' && (
-          <div className="flex items-center gap-4">
-            <Button onClick={() => setSelected(null)} size="xs" variant="text">
-              {m.newServer}
-            </Button>
-            <Button disabled={reloading} onClick={() => void reloadMcp()} size="xs" variant="text">
-              {reloading ? m.reloading : m.reload}
-            </Button>
-          </div>
-        )}
-      </div>
-
-      {view === 'catalog' ? (
-        <McpCatalogBrowser onInstalled={() => void refreshConfig()} />
-      ) : (
-        <div className="grid min-h-0 gap-6 lg:grid-cols-[16rem_minmax(0,1fr)]">
-          <div className="min-h-64">
-            {names.length === 0 ? (
-              <EmptyState description={m.emptyDesc} title={m.emptyTitle} />
-            ) : (
-              <div className="grid gap-0.5">
-                {names.map(serverName => {
-                  const server = servers[serverName]
-                  const active = selected === serverName
-
-                  return (
-                    <button
-                      className={cn(
-                        'scroll-mt-2 rounded-md px-2 py-2 text-left transition-colors hover:bg-(--chrome-action-hover)',
-                        active ? 'bg-(--ui-bg-tertiary) text-foreground' : 'text-muted-foreground'
-                      )}
-                      id={`mcp-server-${serverName}`}
-                      key={serverName}
-                      onClick={() => setSelected(serverName)}
-                      type="button"
-                    >
-                      <div className="truncate text-sm font-medium">{serverName}</div>
-                      <div className="mt-1 flex items-center gap-1.5">
-                        <Pill>{transportLabel(server)}</Pill>
-                        {(server.enabled === false || server.disabled === true) && <Pill>{m.disabled}</Pill>}
-                      </div>
-                    </button>
-                  )
-                })}
-              </div>
-            )}
-          </div>
-
-          <div className="grid content-start gap-3">
-            <div className="flex items-center justify-between gap-2">
-              <div className="flex items-center gap-2 text-sm font-medium">
-                <Wrench className="size-4 text-muted-foreground" />
-                {selected ? m.editServer : m.newServer}
-              </div>
-              {selected && (
-                <div className="flex items-center gap-2">
-                  <Button disabled={testing} onClick={() => void runTest(selected)} size="xs" variant="text">
-                    {testing ? m.testing : m.test}
-                  </Button>
-                  <Switch
-                    aria-label={selectedEnabled ? m.disableServer(selected) : m.enableServer(selected)}
-                    checked={selectedEnabled}
-                    disabled={togglingEnabled}
-                    onCheckedChange={checked => void toggleEnabled(selected, checked)}
-                  />
-                </div>
-              )}
-            </div>
-            {testResult && (
-              <div
-                className={cn(
-                  'rounded-lg border border-(--ui-stroke-tertiary) bg-(--ui-bg-quinary) p-3 text-xs',
-                  testResult.ok ? 'text-emerald-400' : 'text-destructive'
-                )}
-              >
-                {testResult.ok ? m.testOk(testResult.tools.length) : `${m.testFailed}: ${testResult.error ?? ''}`}
-                {testResult.ok && testResult.tools.length > 0 && (
-                  <div className="mt-1.5 flex flex-wrap gap-1">
-                    {testResult.tools.map(tool => (
-                      <span
-                        className="rounded-md bg-(--ui-bg-quinary) px-1.5 py-0.5 font-mono text-[0.65rem] text-(--ui-text-tertiary)"
-                        key={tool.name}
-                        title={tool.description}
-                      >
-                        {tool.name}
-                      </span>
-                    ))}
-                  </div>
-                )}
-              </div>
-            )}
-            <label className="grid gap-1.5">
-              <span className="text-xs text-muted-foreground">{m.name}</span>
-              <Input onChange={event => setName(event.currentTarget.value)} placeholder="filesystem" value={name} />
-            </label>
-            <label className="grid gap-1.5">
-              <span className="text-xs text-muted-foreground">{m.serverJson}</span>
-              <Textarea
-                className="min-h-80 font-mono text-xs"
-                onChange={event => setBody(event.currentTarget.value)}
-                spellCheck={false}
-                value={body}
-              />
-            </label>
-            <div className="flex items-center justify-between">
-              {selected ? (
-                <Button
-                  className="text-destructive hover:text-destructive"
-                  disabled={saving}
-                  onClick={() => void removeServer(selected)}
-                  size="xs"
-                  variant="text"
-                >
-                  {m.remove}
-                </Button>
-              ) : (
-                <span />
-              )}
-              <Button disabled={saving} onClick={() => void saveServer()} size="sm">
-                {saving ? t.common.saving : m.saveServer}
-              </Button>
-            </div>
-          </div>
-        </div>
-      )}
-    </SettingsContent>
-  )
-}
-
-function TabButton({ active, label, onClick }: { active: boolean; label: string; onClick: () => void }) {
-  return (
-    <button
-      className={cn(
-        'cursor-pointer text-sm font-medium transition-colors',
-        active ? 'text-foreground' : 'text-muted-foreground hover:text-foreground'
-      )}
-      onClick={onClick}
-      type="button"
-    >
-      {label}
-    </button>
-  )
-}
-
-/** Nous-approved MCP catalog browser — the desktop counterpart of
- *  `hermes mcp catalog` / `hermes mcp install` and the dashboard MCP page. */
-function McpCatalogBrowser({ onInstalled }: { onInstalled: () => void }) {
-  const { t } = useI18n()
-  const m = t.settings.mcp
-  const [entries, setEntries] = useState<McpCatalogEntry[] | null>(null)
-  const [installing, setInstalling] = useState<null | string>(null)
-  // Per-entry env var drafts for catalog entries that need credentials.
-  const [envDrafts, setEnvDrafts] = useState<Record<string, Record<string, string>>>({})
-  const [envOpenFor, setEnvOpenFor] = useState<null | string>(null)
-
-  useEffect(() => {
-    let cancelled = false
-
-    getMcpCatalog()
-      .then(response => {
-        if (!cancelled) {
-          setEntries(response.entries)
-        }
-      })
-      .catch(err => {
-        if (!cancelled) {
-          notifyError(err, m.catalogLoadFailed)
-          setEntries([])
-        }
-      })
-
-    return () => void (cancelled = true)
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- load once on mount
-  }, [])
-
-  const install = async (entry: McpCatalogEntry) => {
-    const required = entry.required_env.filter(env => env.required)
-    const draft = envDrafts[entry.name] ?? {}
-
-    if (required.some(env => !draft[env.name]?.trim())) {
-      if (envOpenFor !== entry.name) {
-        setEnvOpenFor(entry.name)
-
-        return
-      }
-
-      notify({ kind: 'error', title: m.catalogEnvPrompt(entry.name), message: m.catalogEnvRequired })
-
-      return
-    }
-
-    setInstalling(entry.name)
-
-    try {
-      await installMcpCatalogEntry(entry.name, draft)
-      notify({ kind: 'success', title: m.catalogInstallStarted(entry.name), message: '' })
-      setEntries(
-        current =>
-          current?.map(row => (row.name === entry.name ? { ...row, installed: true, enabled: true } : row)) ?? current
-      )
-      setEnvOpenFor(null)
-      onInstalled()
-    } catch (err) {
-      notifyError(err, m.catalogInstallFailed(entry.name))
-    } finally {
-      setInstalling(null)
-    }
-  }
-
-  if (entries === null) {
-    return <LoadingState label={m.catalogLoading} />
-  }
-
-  if (entries.length === 0) {
-    return <EmptyState description={m.catalogEmpty} title={m.tabCatalog} />
-  }
-
-  return (
-    <div>
-      {entries.map(entry => {
-        const envOpen = envOpenFor === entry.name
-        const draft = envDrafts[entry.name] ?? {}
-
-        return (
-          <div className="px-0 py-2.5" key={entry.name}>
-            <div className="flex items-center justify-between gap-2">
-              <div className="flex min-w-0 items-center gap-2">
-                <span className="truncate text-sm font-medium">{entry.name}</span>
-                <Pill>{entry.transport}</Pill>
-                {entry.installed && (
-                  <Badge className="bg-emerald-500/15 text-emerald-400">
-                    {entry.enabled ? m.catalogEnabled : m.catalogInstalled}
-                  </Badge>
-                )}
-                {entry.needs_install && !entry.installed && <Pill>{m.catalogNeedsInstall}</Pill>}
-              </div>
-              <Button
-                disabled={entry.installed || installing !== null}
-                onClick={() => void install(entry)}
-                size="xs"
-                variant="textStrong"
-              >
-                {installing === entry.name
-                  ? m.catalogInstalling
-                  : entry.installed
-                    ? m.catalogInstalled
-                    : m.catalogInstall}
-              </Button>
-            </div>
-            <p className="mt-1 text-xs text-muted-foreground">{entry.description}</p>
-            {envOpen && entry.required_env.length > 0 && (
-              <div className="mt-2 grid max-w-md gap-2">
-                {entry.required_env.map(env => (
-                  <label className="grid gap-1" key={env.name}>
-                    <span className="text-xs text-muted-foreground">
-                      {env.prompt || env.name}
-                      {env.required ? ' *' : ''}
-                    </span>
-                    <Input
-                      onChange={event =>
-                        setEnvDrafts(prev => ({
-                          ...prev,
-                          [entry.name]: { ...prev[entry.name], [env.name]: event.currentTarget.value }
-                        }))
-                      }
-                      type="password"
-                      value={draft[env.name] ?? ''}
-                    />
-                  </label>
-                ))}
-              </div>
-            )}
-          </div>
-        )
-      })}
-    </div>
-  )
-}
diff --git a/apps/desktop/src/app/settings/model-settings.tsx b/apps/desktop/src/app/settings/model-settings.tsx
index 6459370dc..01c57f992 100644
--- a/apps/desktop/src/app/settings/model-settings.tsx
+++ b/apps/desktop/src/app/settings/model-settings.tsx
@@ -1,14 +1,14 @@
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { Skeleton } from '@/components/ui/skeleton'
 import { Switch } from '@/components/ui/switch'
 import {
   getAuxiliaryModels,
   getGlobalModelInfo,
   getGlobalModelOptions,
-  getHermesConfigRecord,
   getMoaModels,
   getRecommendedDefaultModel,
   saveHermesConfig,
@@ -28,11 +28,57 @@ import { AlertTriangle, Cpu, Loader2 } from '@/lib/icons'
 import { cn } from '@/lib/utils'
 import { notifyError } from '@/store/notifications'
 import { startManualLocalEndpoint, startManualProviderOAuth } from '@/store/onboarding'
-import type { HermesConfigRecord } from '@/types/hermes'
+
+import { invalidateHermesConfig, setHermesConfigCache, useHermesConfigRecord } from '../hooks/use-config-record'
+import { useOnProfileSwitch } from '../hooks/use-on-profile-switch'
 
 import { CONTROL_TEXT } from './constants'
 import { getNested, setNested } from './helpers'
-import { ListRow, LoadingState, Pill, SectionHeading } from './primitives'
+import { ListRow, Pill, SectionHeading } from './primitives'
+
+// Skeleton mirror of the Model settings DOM so the page keeps its shape while
+// the provider/model catalog loads, instead of collapsing to a centered
+// spinner. Same containers/rhythm as the real render below.
+export function ModelSettingsSkeleton() {
+  return (
+    <div className="grid gap-6" data-slot="model-settings-skeleton">
+      <section>
+        <Skeleton className="mb-3 h-3 w-72 max-w-full" />
+        <div className="flex flex-wrap items-center gap-2">
+          <Skeleton className="h-8 w-40" />
+          <Skeleton className="h-8 w-60 max-w-full" />
+          <Skeleton className="h-8 w-16" />
+        </div>
+        <div className="mt-3 flex flex-wrap items-center gap-x-6 gap-y-3">
+          <Skeleton className="h-3 w-16" />
+          <Skeleton className="h-8 w-28" />
+          <Skeleton className="h-6 w-20" />
+        </div>
+      </section>
+
+      <section>
+        <div className="mb-2.5 flex items-center gap-2 pt-2">
+          <Skeleton className="size-4" />
+          <Skeleton className="h-4 w-36" />
+        </div>
+        <div className="grid gap-1">
+          {[0, 1, 2, 3].map(row => (
+            <div
+              className="grid gap-3 py-3 @2xl:grid-cols-[minmax(0,1fr)_minmax(15rem,22rem)] @2xl:items-center"
+              key={row}
+            >
+              <div className="min-w-0 space-y-1.5">
+                <Skeleton className="h-3.5 w-32" />
+                <Skeleton className="h-3 w-52 max-w-full" />
+              </div>
+              <Skeleton className="h-8 w-full @2xl:justify-self-end @2xl:w-56" />
+            </div>
+          ))}
+        </div>
+      </section>
+    </div>
+  )
+}
 
 // Hermes' reasoning levels (VALID_REASONING_EFFORTS); `none` = thinking off.
 // Empty config = Hermes default (medium), shown as Medium.
@@ -136,9 +182,10 @@ export function ModelSettings({ onMainModelChanged }: ModelSettingsProps) {
   const [moa, setMoa] = useState<MoaConfigResponse | null>(null)
   const [selectedMoaPreset, setSelectedMoaPreset] = useState('')
   const [newMoaPresetName, setNewMoaPresetName] = useState('')
-  // Full profile config, kept so the reasoning/speed defaults round-trip
-  // (read agent.* → write back the whole record) like the generic config page.
-  const [config, setConfig] = useState<HermesConfigRecord | null>(null)
+  // agent.* defaults round-trip through the shared config cache (read → write
+  // back the whole record), so a save here shows in the MCP/config surfaces.
+  const { data: config } = useHermesConfigRecord()
+  const setConfig = setHermesConfigCache
   const [applying, setApplying] = useState(false)
   const [editingAuxTask, setEditingAuxTask] = useState<null | string>(null)
   const [auxDraft, setAuxDraft] = useState<{ model: string; provider: string }>({ model: '', provider: '' })
@@ -150,19 +197,28 @@ export function ModelSettings({ onMainModelChanged }: ModelSettingsProps) {
   const [apiKeyDraft, setApiKeyDraft] = useState('')
   const [activating, setActivating] = useState(false)
 
+  // Every profile-scoped async here captures this and bails before writing back,
+  // so a request in flight when the user switches profiles can't paint profile
+  // A's models/providers into profile B (or fire onMainModelChanged for A).
+  const profileEpoch = useRef(0)
+
   const refresh = useCallback(async () => {
+    const epoch = profileEpoch.current
     setLoading(true)
     setError('')
 
     try {
-      const [modelInfo, modelOptions, auxiliaryModels, moaModels, cfg] = await Promise.all([
+      const [modelInfo, modelOptions, auxiliaryModels, moaModels] = await Promise.all([
         getGlobalModelInfo(),
         getGlobalModelOptions(),
         getAuxiliaryModels(),
-        getMoaModels().catch(() => null),
-        getHermesConfigRecord()
+        getMoaModels().catch(() => null)
       ])
 
+      if (profileEpoch.current !== epoch) {
+        return
+      }
+
       setMainModel({ model: modelInfo.model, provider: modelInfo.provider })
       setProviders(modelOptions.providers || [])
       setSelectedProvider(prev => prev || modelInfo.provider)
@@ -174,11 +230,17 @@ export function ModelSettings({ onMainModelChanged }: ModelSettingsProps) {
         setSelectedMoaPreset(prev => (prev && moaModels.presets[prev] ? prev : moaModels.default_preset))
       }
 
-      setConfig(cfg)
+      // The config record loads via its own shared query; a model switch can
+      // change it server-side (aux slots), so nudge that cache to refetch.
+      void invalidateHermesConfig()
     } catch (err) {
-      setError(err instanceof Error ? err.message : String(err))
+      if (profileEpoch.current === epoch) {
+        setError(err instanceof Error ? err.message : String(err))
+      }
     } finally {
-      setLoading(false)
+      if (profileEpoch.current === epoch) {
+        setLoading(false)
+      }
     }
   }, [])
 
@@ -186,14 +248,19 @@ export function ModelSettings({ onMainModelChanged }: ModelSettingsProps) {
     void refresh()
   }, [refresh])
 
+  // A profile switch swaps the backend under the mounted panel — reload for the
+  // new profile (bumping the epoch first so any in-flight A request is discarded).
+  useOnProfileSwitch(() => {
+    profileEpoch.current += 1
+    void refresh()
+  })
+
   const providerOptions = providers.length ? providers : NO_PROVIDERS
 
   // MoA reference/aggregator slots must never be the moa virtual provider —
   // that would create a recursive MoA tree (the backend rejects it on save).
   // Hide it from the slot selectors so it isn't offered as a dead choice.
-  const moaSlotProviderOptions = providerOptions.filter(
-    provider => (provider.slug || '').toLowerCase() !== 'moa'
-  )
+  const moaSlotProviderOptions = providerOptions.filter(provider => (provider.slug || '').toLowerCase() !== 'moa')
 
   const selectedProviderRow = useMemo(
     () => providers.find(provider => provider.slug === selectedProvider),
@@ -261,11 +328,17 @@ export function ModelSettings({ onMainModelChanged }: ModelSettingsProps) {
   }, [])
 
   const saveMoa = useCallback(async (next: MoaConfigResponse) => {
+    const epoch = profileEpoch.current
     setApplying(true)
     setError('')
 
     try {
       const saved = await saveMoaModels(next)
+
+      if (profileEpoch.current !== epoch) {
+        return
+      }
+
       setMoa(saved)
     } catch (err) {
       setError(err instanceof Error ? err.message : String(err))
@@ -312,6 +385,7 @@ export function ModelSettings({ onMainModelChanged }: ModelSettingsProps) {
   const rawEffort = String(getNested(config ?? {}, 'agent.reasoning_effort') ?? '')
     .trim()
     .toLowerCase()
+
   const effortValue = rawEffort === 'false' || rawEffort === 'disabled' ? 'none' : rawEffort || 'medium'
 
   const fastOn = isFastTier(getNested(config ?? {}, 'agent.service_tier'))
@@ -349,6 +423,7 @@ export function ModelSettings({ onMainModelChanged }: ModelSettingsProps) {
       return
     }
 
+    const epoch = profileEpoch.current
     setActivating(true)
     setError('')
 
@@ -369,6 +444,11 @@ export function ModelSettings({ onMainModelChanged }: ModelSettingsProps) {
       }
 
       const options = await getGlobalModelOptions()
+
+      if (profileEpoch.current !== epoch) {
+        return
+      }
+
       setProviders(options.providers || [])
       const refreshedRow = options.providers?.find(p => p.slug === slug)
       const fallbackModel = refreshedRow?.models?.[0] ?? ''
@@ -406,11 +486,17 @@ export function ModelSettings({ onMainModelChanged }: ModelSettingsProps) {
       return
     }
 
+    const epoch = profileEpoch.current
     setApplying(true)
     setError('')
 
     try {
       const result = await setModelAssignment({ model: selectedModel, provider: selectedProvider, scope: 'main' })
+
+      if (profileEpoch.current !== epoch) {
+        return
+      }
+
       const provider = result.provider || selectedProvider
       const model = result.model || selectedModel
       setMainModel({ provider, model })
@@ -506,7 +592,7 @@ export function ModelSettings({ onMainModelChanged }: ModelSettingsProps) {
   }, [mainModel, refresh])
 
   if (loading && !mainModel) {
-    return <LoadingState label={m.loading} />
+    return <ModelSettingsSkeleton />
   }
 
   return (
@@ -785,6 +871,7 @@ export function ModelSettings({ onMainModelChanged }: ModelSettingsProps) {
                   ...moa,
                   default_preset: selectedMoaPreset || moa.default_preset
                 }
+
                 void saveMoa(next)
               }}
               size="sm"
@@ -802,12 +889,14 @@ export function ModelSettings({ onMainModelChanged }: ModelSettingsProps) {
                 const presets = { ...moa.presets }
                 delete presets[selectedMoaPreset]
                 const fallback = Object.keys(presets)[0]
+
                 const next: MoaConfigResponse = {
                   ...moa,
                   presets,
                   default_preset: moa.default_preset === selectedMoaPreset ? fallback : moa.default_preset,
                   active_preset: moa.active_preset === selectedMoaPreset ? '' : moa.active_preset
                 }
+
                 setSelectedMoaPreset(Object.keys(moa.presets).find(name => name !== selectedMoaPreset) || '')
                 void saveMoa(next)
               }}
@@ -826,6 +915,7 @@ export function ModelSettings({ onMainModelChanged }: ModelSettingsProps) {
               disabled={!newMoaPresetName.trim() || !!moa.presets[newMoaPresetName.trim()] || applying}
               onClick={() => {
                 const name = newMoaPresetName.trim()
+
                 const next: MoaConfigResponse = {
                   ...moa,
                   presets: {
@@ -833,6 +923,7 @@ export function ModelSettings({ onMainModelChanged }: ModelSettingsProps) {
                     [name]: { ...currentMoaPreset, reference_models: [...currentMoaPreset.reference_models] }
                   }
                 }
+
                 setSelectedMoaPreset(name)
                 setNewMoaPresetName('')
                 void saveMoa(next)
diff --git a/apps/desktop/src/app/settings/notifications-settings.tsx b/apps/desktop/src/app/settings/notifications-settings.tsx
index 8f23eecd6..efb0bf662 100644
--- a/apps/desktop/src/app/settings/notifications-settings.tsx
+++ b/apps/desktop/src/app/settings/notifications-settings.tsx
@@ -78,8 +78,6 @@ export function NotificationsSettings() {
         onChange={setNativeNotifyEnabled}
       />
 
-      <div className="my-1 h-px bg-border/30" />
-
       {NATIVE_NOTIFICATION_KINDS.map(kind => (
         <ToggleRow
           checked={prefs.enabled && prefs.kinds[kind]}
@@ -91,8 +89,6 @@ export function NotificationsSettings() {
         />
       ))}
 
-      <div className="my-1 h-px bg-border/30" />
-
       <ListRow
         action={
           <div className="flex flex-wrap items-center justify-end gap-2">
diff --git a/apps/desktop/src/app/settings/pet-settings.tsx b/apps/desktop/src/app/settings/pet-settings.tsx
index 1ee2dc407..70c1ab6c5 100644
--- a/apps/desktop/src/app/settings/pet-settings.tsx
+++ b/apps/desktop/src/app/settings/pet-settings.tsx
@@ -143,7 +143,7 @@ export function PetSettings() {
                     {copy.unreachable}
                   </p>
                 ) : shown.length === 0 ? (
-                  <p className="text-[length:var(--conversation-caption-font-size)] text-(--ui-text-tertiary)">
+                  <p className="wrap-anywhere text-[length:var(--conversation-caption-font-size)] text-(--ui-text-tertiary)">
                     {copy.noMatch(query)}
                   </p>
                 ) : (
diff --git a/apps/desktop/src/app/settings/primitives.tsx b/apps/desktop/src/app/settings/primitives.tsx
index 5a305d515..beeddf32c 100644
--- a/apps/desktop/src/app/settings/primitives.tsx
+++ b/apps/desktop/src/app/settings/primitives.tsx
@@ -76,23 +76,28 @@ export function ListRow({
   wide?: boolean
 }) {
   return (
-    <div
-      className={cn(
-        '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-[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>
+    // Container-queried, not viewport-queried: the label/control split keys on
+    // the row's own pane width, so a narrow detail column (messaging, split
+    // views) stacks instead of squishing the label against minmax(15rem,…).
+    <div className="@container">
+      <div
+        className={cn(
+          'grid gap-3 py-3',
+          !wide && '@2xl:grid-cols-[minmax(0,1fr)_minmax(15rem,22rem)] @2xl:items-center'
         )}
-        {hint && <div className="mt-1 block font-mono text-[0.68rem] text-muted-foreground/45">{hint}</div>}
-        {below}
+      >
+        <div className="min-w-0">
+          <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>
+        {action && <div className={cn('min-w-0', !wide && '@2xl:justify-self-end')}>{action}</div>}
       </div>
-      {action && <div className={cn('min-w-0', !wide && 'sm:justify-self-end')}>{action}</div>}
     </div>
   )
 }
@@ -101,13 +106,6 @@ export function LoadingState({ label }: { label: string }) {
   return <PageLoader label={label} />
 }
 
-export function EmptyState({ title, description }: { title: string; description: string }) {
-  return (
-    <div className="grid min-h-48 place-items-center text-center">
-      <div>
-        <div className="text-sm font-medium">{title}</div>
-        <div className="mt-1 text-xs text-muted-foreground">{description}</div>
-      </div>
-    </div>
-  )
-}
+// Canonical implementation lives in components/ui; re-exported so the many
+// settings call sites keep their import path.
+export { EmptyState } from '@/components/ui/empty-state'
diff --git a/apps/desktop/src/app/settings/providers-settings.tsx b/apps/desktop/src/app/settings/providers-settings.tsx
index 10c9619d6..214cf37a9 100644
--- a/apps/desktop/src/app/settings/providers-settings.tsx
+++ b/apps/desktop/src/app/settings/providers-settings.tsx
@@ -17,6 +17,7 @@ import { SearchField } from '@/components/ui/search-field'
 import { disconnectOAuthProvider, listOAuthProviders } from '@/hermes'
 import { useI18n } from '@/i18n'
 import { Check, ChevronDown, ChevronRight, KeyRound, Loader2, Terminal, Trash2 } from '@/lib/icons'
+import { normalize } from '@/lib/text'
 import { cn } from '@/lib/utils'
 import { notify, notifyError } from '@/store/notifications'
 import { $desktopOnboarding, startManualProviderOAuth } from '@/store/onboarding'
@@ -400,7 +401,7 @@ export function ProvidersSettings({ onClose, onViewChange, view }: ProvidersSett
   const keyGroups = buildProviderKeyGroups(vars)
 
   if (showApiKeys) {
-    const q = keyQuery.trim().toLowerCase()
+    const q = normalize(keyQuery)
 
     const visibleGroups = q
       ? keyGroups.filter(group => {
diff --git a/apps/desktop/src/app/settings/toolset-config-panel.test.tsx b/apps/desktop/src/app/settings/toolset-config-panel.test.tsx
index 456d36012..dff7eaee5 100644
--- a/apps/desktop/src/app/settings/toolset-config-panel.test.tsx
+++ b/apps/desktop/src/app/settings/toolset-config-panel.test.tsx
@@ -66,6 +66,12 @@ function config(overrides: Partial<ToolsetConfig> = {}): ToolsetConfig {
 }
 
 beforeEach(() => {
+  // Radix menus/selects call these on open; jsdom implements neither, so the
+  // dropdown never opens without the stubs (mirrors model-settings.test.tsx).
+  Element.prototype.scrollIntoView = vi.fn()
+  Element.prototype.hasPointerCapture = vi.fn(() => false)
+  Element.prototype.releasePointerCapture = vi.fn()
+
   getToolsetConfig.mockResolvedValue(config())
   getToolsetModels.mockResolvedValue({
     name: 'tts',
@@ -165,8 +171,10 @@ describe('ToolsetConfigPanel', () => {
     const elevenlabs = await screen.findByRole('button', { name: /ElevenLabs/ })
     fireEvent.click(elevenlabs)
 
-    // Click "Set" to reveal the input for the unset key.
-    fireEvent.click(await screen.findByRole('button', { name: 'Set' }))
+    // Open the credential actions menu (Radix opens on pointerdown), then "Set".
+    const trigger = await screen.findByRole('button', { name: /Actions for ELEVENLABS_API_KEY/ })
+    fireEvent.pointerDown(trigger, { button: 0, ctrlKey: false, pointerType: 'mouse' })
+    fireEvent.click(await screen.findByRole('menuitem', { name: 'Set' }))
 
     const input = await screen.findByPlaceholderText('ElevenLabs API key')
     fireEvent.change(input, { target: { value: 'sk-test-123' } })
diff --git a/apps/desktop/src/app/settings/toolset-config-panel.tsx b/apps/desktop/src/app/settings/toolset-config-panel.tsx
index 95f1a099a..aa4824d5e 100644
--- a/apps/desktop/src/app/settings/toolset-config-panel.tsx
+++ b/apps/desktop/src/app/settings/toolset-config-panel.tsx
@@ -1,6 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
-import { PageLoader } from '@/components/page-loader'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import {
@@ -512,32 +511,31 @@ export function ToolsetConfigPanel({ toolset, onConfiguredChange }: ToolsetConfi
     onConfiguredChange?.()
   }
 
-  const emptyMessage = useMemo(() => {
-    if (loading || !cfg) {
-      return null
-    }
-
-    if (!cfg.has_category) {
-      return copy.noProviderOptions
-    }
-
-    if (providers.length === 0) {
-      return copy.noProviders
-    }
-
-    return null
-  }, [cfg, copy, loading, providers.length])
-
   if (loading) {
-    return <PageLoader className="min-h-32" label={copy.loadingConfig} />
+    // Inline row, not a full block loader — a big centered spinner is what
+    // caused the Skills/Tools tab-switch layout jump; this reads as "more
+    // config incoming" without reserving a tall empty area.
+    return (
+      <div className="flex items-center gap-2 px-1 text-xs text-muted-foreground">
+        <Loader2 className="size-3.5 animate-spin" />
+        {copy.loadingConfig}
+      </div>
+    )
   }
 
-  if (emptyMessage) {
-    return <p className="px-1 py-3 text-xs text-muted-foreground">{emptyMessage}</p>
+  // Nothing to configure → render nothing. An inspector explaining that there
+  // is nothing to explain is noise (the old expander UX needed the message so
+  // an expanded-empty panel didn't look broken; the always-open detail doesn't).
+  if (!cfg || !cfg.has_category) {
+    return null
+  }
+
+  if (providers.length === 0) {
+    return <p className="px-1 py-3 text-xs text-muted-foreground">{copy.noProviders}</p>
   }
 
   return (
-    <div className="mt-3 grid gap-2">
+    <div className="grid gap-2">
       {providers.map(provider => {
         const isActive = activeProvider === provider.name
         const configured = providerConfigured(provider, envState)
diff --git a/apps/desktop/src/app/settings/types.ts b/apps/desktop/src/app/settings/types.ts
index fba38a23c..1b6509ef1 100644
--- a/apps/desktop/src/app/settings/types.ts
+++ b/apps/desktop/src/app/settings/types.ts
@@ -8,7 +8,6 @@ export type SettingsView =
   | 'about'
   | 'gateway'
   | 'keys'
-  | 'mcp'
   | 'notifications'
   | 'providers'
   | 'sessions'
diff --git a/apps/desktop/src/app/settings/use-deep-link-highlight.ts b/apps/desktop/src/app/settings/use-deep-link-highlight.ts
index a4cabce3a..a7f9e2fb7 100644
--- a/apps/desktop/src/app/settings/use-deep-link-highlight.ts
+++ b/apps/desktop/src/app/settings/use-deep-link-highlight.ts
@@ -30,30 +30,50 @@ export function useDeepLinkHighlight({
 
     onResolve?.(target)
 
-    // Defer a frame so async state (expansion, selection) mounts the row first.
-    const scrollTimeout = window.setTimeout(() => {
-      const element = document.getElementById(elementId(target))
+    let cancelled = false
+    let timer = 0
 
-      if (!element) {
+    // onResolve may flip view state that mounts the row a few frames later, so
+    // poll briefly for it and only drop the param AFTER a successful scroll —
+    // deleting up front would lose the deep link when the target mounts late.
+    let attempts = 0
+
+    const attempt = () => {
+      if (cancelled) {
         return
       }
 
-      element.scrollIntoView({ behavior: 'smooth', block })
-      element.classList.add('setting-field-highlight')
-      window.setTimeout(() => element.classList.remove('setting-field-highlight'), 1600)
-    }, 80)
+      const element = document.getElementById(elementId(target))
 
-    setSearchParams(
-      previous => {
-        const next = new URLSearchParams(previous)
-        next.delete(param)
+      if (element) {
+        element.scrollIntoView({ behavior: 'smooth', block })
+        element.classList.add('setting-field-highlight')
+        window.setTimeout(() => element.classList.remove('setting-field-highlight'), 1600)
 
-        return next
-      },
-      { replace: true }
-    )
+        setSearchParams(
+          previous => {
+            const next = new URLSearchParams(previous)
+            next.delete(param)
 
-    return () => window.clearTimeout(scrollTimeout)
+            return next
+          },
+          { replace: true }
+        )
+
+        return
+      }
+
+      if (attempts++ < 20) {
+        timer = window.setTimeout(attempt, 80)
+      }
+    }
+
+    timer = window.setTimeout(attempt, 80)
+
+    return () => {
+      cancelled = true
+      window.clearTimeout(timer)
+    }
   }, [block, elementId, onResolve, param, ready, setSearchParams, target])
 
   return target
diff --git a/apps/desktop/src/app/settings/with-active.test.ts b/apps/desktop/src/app/settings/with-active.test.ts
index 6a2ce5703..0785d1a98 100644
--- a/apps/desktop/src/app/settings/with-active.test.ts
+++ b/apps/desktop/src/app/settings/with-active.test.ts
@@ -9,10 +9,7 @@ describe('withActive', () => {
   const curated = ['hermes-4', 'hermes-4-mini']
 
   it('prepends a custom model missing from the curated list', () => {
-    expect(withActive(curated, 'anthropic/claude-opus-4.7')).toEqual([
-      'anthropic/claude-opus-4.7',
-      ...curated
-    ])
+    expect(withActive(curated, 'anthropic/claude-opus-4.7')).toEqual(['anthropic/claude-opus-4.7', ...curated])
   })
 
   it('leaves the list untouched when the active model is already curated', () => {
diff --git a/apps/desktop/src/app/shell/context-usage-panel.tsx b/apps/desktop/src/app/shell/context-usage-panel.tsx
index 5343515ef..5a243c091 100644
--- a/apps/desktop/src/app/shell/context-usage-panel.tsx
+++ b/apps/desktop/src/app/shell/context-usage-panel.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from 'react'
 
 import { useI18n } from '@/i18n'
-import { formatK } from '@/lib/statusbar'
+import { compactNumber } from '@/lib/format'
 import { cn } from '@/lib/utils'
 import type { ContextBreakdown, ContextUsageCategory, UsageStats } from '@/types/hermes'
 
@@ -21,6 +21,7 @@ export function ContextUsagePanel({ currentUsage, requestGateway, sessionId }: C
     if (!sessionId) {
       setBreakdown(null)
       setLoading(false)
+
       return
     }
 
@@ -51,6 +52,7 @@ export function ContextUsagePanel({ currentUsage, requestGateway, sessionId }: C
 
   const contextMax = breakdown?.context_max ?? currentUsage.context_max ?? 0
   const contextUsed = breakdown?.context_used ?? currentUsage.context_used ?? 0
+
   const contextPercent = Math.max(
     0,
     Math.min(100, Math.round(breakdown?.context_percent ?? currentUsage.context_percent ?? 0))
@@ -62,7 +64,7 @@ export function ContextUsagePanel({ currentUsage, requestGateway, sessionId }: C
         ...category,
         label: copy.categories[category.id as keyof typeof copy.categories] ?? category.label
       })),
-    [breakdown?.categories, copy.categories]
+    [breakdown?.categories, copy]
   )
 
   const segmentTotal = categories.reduce((sum, category) => sum + category.tokens, 0) || contextUsed || 1
@@ -73,7 +75,7 @@ export function ContextUsagePanel({ currentUsage, requestGateway, sessionId }: C
         <p className="font-medium text-foreground">{copy.title}</p>
 
         <span className="text-[0.6875rem] text-muted-foreground">
-          {copy.tokenSummary(`~${formatK(contextUsed)}`, formatK(contextMax))}
+          {copy.tokenSummary(`~${compactNumber(contextUsed)}`, compactNumber(contextMax))}
         </span>
       </div>
 
@@ -85,15 +87,12 @@ export function ContextUsagePanel({ currentUsage, requestGateway, sessionId }: C
         {categories.map(category => (
           <li className="flex items-center justify-between gap-2" key={category.id}>
             <span className="flex min-w-0 items-center gap-2">
-              <span
-                className="size-2 shrink-0 rounded-[2px]"
-                style={{ background: category.color }}
-              />
+              <span className="size-2 shrink-0 rounded-[2px]" style={{ background: category.color }} />
 
               <span className="truncate text-muted-foreground">{category.label}</span>
             </span>
 
-            <span className="shrink-0 tabular-nums text-foreground">{formatCategoryTokens(category.tokens)}</span>
+            <span className="shrink-0 tabular-nums text-foreground">{compactNumber(category.tokens)}</span>
           </li>
         ))}
       </ul>
@@ -133,15 +132,3 @@ function ContextUsageBar({
     </div>
   )
 }
-
-function formatCategoryTokens(value: number): string {
-  if (!Number.isFinite(value) || value <= 0) {
-    return '0'
-  }
-
-  if (value >= 1_000) {
-    return `${formatK(value)}`
-  }
-
-  return value.toLocaleString()
-}
diff --git a/apps/desktop/src/app/shell/gateway-menu-panel.tsx b/apps/desktop/src/app/shell/gateway-menu-panel.tsx
index 64f3f7563..c5e542f36 100644
--- a/apps/desktop/src/app/shell/gateway-menu-panel.tsx
+++ b/apps/desktop/src/app/shell/gateway-menu-panel.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react'
+import { type ReactNode, useEffect, useRef, useState } from 'react'
 
 import { StatusDot, type StatusTone } from '@/components/status-dot'
 import { Button } from '@/components/ui/button'
@@ -8,6 +8,7 @@ import { getLogs } from '@/hermes'
 import { useI18n } from '@/i18n'
 import { LayoutDashboard, RefreshCw } from '@/lib/icons'
 import type { RuntimeReadinessResult } from '@/lib/runtime-readiness'
+import { cn } from '@/lib/utils'
 import { runGatewayRestart } from '@/store/system-actions'
 import type { StatusResponse } from '@/types/hermes'
 
@@ -176,13 +177,13 @@ export function GatewayMenuPanel({
       </div>
 
       {inferenceStatus?.reason && (
-        <div className="border-t border-border/50 px-3 py-2 text-xs text-muted-foreground">
+        <Section className="text-xs text-muted-foreground">
           <div className="line-clamp-3">{inferenceStatus.reason}</div>
-        </div>
+        </Section>
       )}
 
       {recentLogs.length > 0 && (
-        <div className="px-3 py-2">
+        <Section>
           <div className="flex items-center justify-between gap-2">
             <SectionLabel>{copy.recentActivity}</SectionLabel>
             <Button
@@ -198,11 +199,11 @@ export function GatewayMenuPanel({
           <LogView className="mt-1.5 max-h-40 border-0 px-0" ref={logScrollRef}>
             {recentLogs.map(trimLogLine).join('\n')}
           </LogView>
-        </div>
+        </Section>
       )}
 
       {platforms.length > 0 && (
-        <div className="border-t border-border/50 px-3 py-2">
+        <Section>
           <SectionLabel>{copy.messagingPlatforms}</SectionLabel>
           <ul className="mt-1.5 space-y-1">
             {platforms.map(([name, platform]) => (
@@ -215,12 +216,16 @@ export function GatewayMenuPanel({
               </li>
             ))}
           </ul>
-        </div>
+        </Section>
       )}
     </div>
   )
 }
 
+function Section({ children, className }: { children: ReactNode; className?: string }) {
+  return <div className={cn('border-t border-border/50 px-3 py-2', className)}>{children}</div>
+}
+
 function SectionLabel({ children }: { children: string }) {
   return (
     <div className="text-[0.62rem] font-semibold uppercase tracking-[0.14em] text-muted-foreground/80">{children}</div>
diff --git a/apps/desktop/src/app/shell/model-edit-submenu.tsx b/apps/desktop/src/app/shell/model-edit-submenu.tsx
index 303e1c27c..cf2a8af66 100644
--- a/apps/desktop/src/app/shell/model-edit-submenu.tsx
+++ b/apps/desktop/src/app/shell/model-edit-submenu.tsx
@@ -12,6 +12,7 @@ import {
 } from '@/components/ui/dropdown-menu'
 import { Switch } from '@/components/ui/switch'
 import { useI18n } from '@/i18n'
+import { normalize } from '@/lib/text'
 import { setModelPreset } from '@/store/model-presets'
 import { notifyError } from '@/store/notifications'
 import { $activeSessionId, setCurrentFastMode, setCurrentReasoningEffort } from '@/store/session'
@@ -233,11 +234,11 @@ export function ModelEditSubmenu({
 
 function isThinkingEnabled(effort: string): boolean {
   // Empty = Hermes default (medium) = on; only an explicit "none" is off.
-  return (effort || 'medium').trim().toLowerCase() !== 'none'
+  return normalize(effort || 'medium') !== 'none'
 }
 
 function normalizeEffort(effort: string): string {
-  const value = (effort || 'medium').trim().toLowerCase()
+  const value = normalize(effort || 'medium')
 
   // Thinking off → no effort selected in the radio group.
   if (value === 'none') {
diff --git a/apps/desktop/src/app/shell/model-menu-panel.tsx b/apps/desktop/src/app/shell/model-menu-panel.tsx
index ae93c2179..f358a29ff 100644
--- a/apps/desktop/src/app/shell/model-menu-panel.tsx
+++ b/apps/desktop/src/app/shell/model-menu-panel.tsx
@@ -24,6 +24,7 @@ import {
   modelDisplayParts,
   reasoningEffortLabel
 } from '@/lib/model-status-label'
+import { normalize } from '@/lib/text'
 import { cn } from '@/lib/utils'
 import { $modelPresets, applyModelPreset, modelPresetKey } from '@/store/model-presets'
 import {
@@ -339,9 +340,7 @@ export function ModelMenuPanel({ gateway, onSelectModel, requestGateway }: Model
                 }}
               >
                 <span className="min-w-0 flex-1 truncate">MoA: {preset}</span>
-                {isCurrentMoa ? (
-                  <Codicon className="ml-auto text-foreground" name="check" size="0.75rem" />
-                ) : null}
+                {isCurrentMoa ? <Codicon className="ml-auto text-foreground" name="check" size="0.75rem" /> : null}
               </DropdownMenuItem>
             )
           })}
@@ -384,7 +383,7 @@ function groupModels(
   current: { model: string; provider: string },
   visible: Set<string> | null
 ): ProviderGroup[] {
-  const q = search.trim().toLowerCase()
+  const q = normalize(search)
   const groups: ProviderGroup[] = []
 
   for (const provider of providers) {
diff --git a/apps/desktop/src/app/skills/hub.tsx b/apps/desktop/src/app/skills/hub.tsx
index 75edbd429..a7ed3ca8f 100644
--- a/apps/desktop/src/app/skills/hub.tsx
+++ b/apps/desktop/src/app/skills/hub.tsx
@@ -1,5 +1,10 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useStore } from '@nanostores/react'
+import { useQueries, useQuery } from '@tanstack/react-query'
+import { useCallback, useMemo, useState } from 'react'
 
+import { useDebounced } from '@/app/hooks/use-debounced'
+import { DetailPane } from '@/app/master-detail'
+import { LogTail } from '@/components/chat/log-tail'
 import { PageLoader } from '@/components/page-loader'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
@@ -13,25 +18,33 @@ import {
   DialogTitle
 } from '@/components/ui/dialog'
 import {
-  getActionStatus,
   getSkillHubSources,
-  installSkillFromHub,
   previewSkillHub,
   scanSkillHub,
   searchSkillsHub,
-  type SkillHubInstalledEntry,
-  type SkillHubPreview,
   type SkillHubResult,
-  type SkillHubScanResult,
-  type SkillHubSource,
-  updateSkillsFromHub
+  type SkillHubScanResult
 } from '@/hermes'
 import { useI18n } from '@/i18n'
+import { stripAnsi } from '@/lib/ansi'
+import { Loader2 } from '@/lib/icons'
 import { cn } from '@/lib/utils'
-import { upsertDesktopActionTask } from '@/store/activity'
+import {
+  $hubActions,
+  $hubActiveLog,
+  $hubInstalledOverride,
+  closeHubLog,
+  HUB_SOURCES_KEY,
+  installHubSkill,
+  uninstallHubSkill,
+  UPDATE_ALL_KEY,
+  updateHubSkills
+} from '@/store/hub-actions'
 import { notify, notifyError } from '@/store/notifications'
 
-const ACTION_POLL_MS = 1200
+// Dedup rank when the same skill surfaces from multiple sources — higher trust
+// wins. Mirrors the backend's unified_search `_TRUST_RANK`.
+const TRUST_RANK: Record<string, number> = { builtin: 2, trusted: 1, community: 0 }
 
 function trustTone(level: string): string {
   switch (level) {
@@ -59,208 +72,145 @@ function verdictTone(policy: string): string {
   }
 }
 
+// One hub result — a self-contained row that installs/uninstalls ITSELF and
+// reads its own action status from the store, so parallel installs never desync.
+// `rawInstalled` is the sources/search truth; the store's optimistic override
+// wins so the row flips the instant its own action resolves.
+function HubSkillRow({
+  installedName,
+  onPreview,
+  rawInstalled,
+  skill
+}: {
+  installedName: null | string
+  onPreview: (skill: SkillHubResult) => void
+  rawInstalled: boolean
+  skill: SkillHubResult
+}) {
+  const { t } = useI18n()
+  const h = t.skills.hub
+  const action = useStore($hubActions)[skill.identifier]
+  const override = useStore($hubInstalledOverride)[skill.identifier]
+  const installed = override ?? rawInstalled
+  const running = action?.running ?? false
+
+  const doInstall = () => {
+    notify({ kind: 'success', title: h.installStarted(skill.name), message: h.actionLog })
+    void installHubSkill(skill.identifier).catch(err => notifyError(err, h.actionFailed))
+  }
+
+  const doUninstall = () => {
+    notify({ kind: 'success', title: h.uninstallStarted(skill.name), message: h.actionLog })
+    void uninstallHubSkill(skill.identifier, installedName || skill.name).catch(err => notifyError(err, h.actionFailed))
+  }
+
+  return (
+    <div className="row-hover flex items-start gap-3 rounded-md px-2 py-2.5">
+      <div className="min-w-0 flex-1">
+        <div className="flex flex-wrap items-center gap-1.5">
+          <span className="truncate text-[0.78rem] font-medium text-foreground/85">{skill.name}</span>
+          <span className={cn('rounded px-1.5 py-0.5 text-[0.6rem]', trustTone(skill.trust_level))}>
+            {h.trust[skill.trust_level] ?? skill.trust_level}
+          </span>
+          {installed && <span className="text-[0.6rem] text-emerald-400">{h.installed}</span>}
+        </div>
+        <p className="mt-0.5 line-clamp-2 text-[0.68rem] text-muted-foreground/70">{skill.description}</p>
+      </div>
+      <div className="flex shrink-0 items-center gap-1">
+        <Button onClick={() => onPreview(skill)} size="xs" variant="text">
+          {h.preview}
+        </Button>
+        {installed ? (
+          <Button className="hover:text-destructive" disabled={running} onClick={doUninstall} size="xs" variant="text">
+            {running && <Loader2 className="size-3 animate-spin" />}
+            {running ? h.uninstalling : h.uninstall}
+          </Button>
+        ) : (
+          <Button disabled={running} onClick={doInstall} size="xs" variant="textStrong">
+            {running && <Loader2 className="size-3 animate-spin" />}
+            {running ? h.installing : h.install}
+          </Button>
+        )}
+      </div>
+    </div>
+  )
+}
+
 interface SkillsHubProps {
-  /** Called after an install/uninstall/update finishes so the parent can refresh the installed-skills list. */
-  onInstalledChange?: () => void
   query: string
 }
 
-export function SkillsHub({ onInstalledChange, query }: SkillsHubProps) {
+export function SkillsHub({ query }: SkillsHubProps) {
   const { t } = useI18n()
   const h = t.skills.hub
 
-  const [sources, setSources] = useState<SkillHubSource[]>([])
-  const [featured, setFeatured] = useState<SkillHubResult[]>([])
-  const [installed, setInstalled] = useState<Record<string, SkillHubInstalledEntry>>({})
-  const [sourcesLoading, setSourcesLoading] = useState(true)
+  // Sources + featured + the installed map — one cached fetch, revalidated on
+  // mount and re-fetched (from the store) after an action lands.
+  const sourcesQuery = useQuery({
+    queryKey: HUB_SOURCES_KEY,
+    queryFn: getSkillHubSources,
+    staleTime: 5 * 60_000
+  })
 
-  const [results, setResults] = useState<SkillHubResult[]>([])
-  const [searching, setSearching] = useState(false)
-  const [searched, setSearched] = useState(false)
-  const [timedOut, setTimedOut] = useState<string[]>([])
-  const [searchMs, setSearchMs] = useState<null | number>(null)
+  // Debounced hub search, keyed on the settled query so RQ dedupes/caches per
+  // term and abandons stale terms for us (no hand-rolled sequence guard).
+  const term = useDebounced(query.trim(), 350)
 
-  // Live log tail for the most recent install/uninstall/update action.
-  const [action, setAction] = useState<null | string>(null)
-  const [actionLog, setActionLog] = useState<string[]>([])
-  const [actionRunning, setActionRunning] = useState(false)
+  // Progressive per-source search: one query per source the backend says is
+  // worth hitting individually (it marks index-covered API sources unsearchable
+  // so we don't re-hammer ~70 GitHub calls). Each resolves independently, so the
+  // list fills in as sources return instead of blocking on the slowest one, and
+  // each source shows its own spinner. Stale terms key out and are abandoned.
+  const searchableSources = useMemo(
+    () => (sourcesQuery.data?.sources ?? []).filter(source => source.searchable !== false),
+    [sourcesQuery.data]
+  )
 
-  // Preview/scan dialog state.
+  const sourceSearches = useQueries({
+    queries: searchableSources.map(source => ({
+      queryKey: ['skill-hub-search', term, source.id],
+      queryFn: () => searchSkillsHub(term, source.id),
+      enabled: term.length > 0,
+      staleTime: 60_000
+    }))
+  })
+
+  // Per-item action lifecycle + log live in the store (store/hub-actions): each
+  // row reads ITS own entry, so concurrent installs never desync each other,
+  // and an optimistic installed-override flips a row the instant its own action
+  // resolves rather than racing the sources refetch.
+  const actions = useStore($hubActions)
+  const overrides = useStore($hubInstalledOverride)
+  const activeLogKey = useStore($hubActiveLog)
+  const activeLog = activeLogKey ? actions[activeLogKey] : undefined
+
+  // Preview/scan dialog. Preview is cache-worthy (keyed by identifier); scan is
+  // an explicit, on-demand security pass so it stays imperative.
   const [detail, setDetail] = useState<null | SkillHubResult>(null)
-  const [preview, setPreview] = useState<null | SkillHubPreview>(null)
-  const [previewLoading, setPreviewLoading] = useState(false)
   const [scan, setScan] = useState<null | SkillHubScanResult>(null)
   const [scanning, setScanning] = useState(false)
 
-  const searchSeq = useRef(0)
-
-  useEffect(() => {
-    let cancelled = false
-
-    getSkillHubSources()
-      .then(response => {
-        if (cancelled) {
-          return
-        }
-
-        setSources(response.sources)
-        setFeatured(response.featured)
-        setInstalled(response.installed)
-      })
-      .catch(err => notifyError(err, h.loadFailed))
-      .finally(() => {
-        if (!cancelled) {
-          setSourcesLoading(false)
-        }
-      })
-
-    return () => void (cancelled = true)
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- load once on mount
-  }, [])
-
-  // Debounced hub search driven by the shared page search field.
-  useEffect(() => {
-    const trimmed = query.trim()
-
-    if (!trimmed) {
-      setResults([])
-      setSearched(false)
-      setSearching(false)
-      setTimedOut([])
-      setSearchMs(null)
-
-      return
-    }
-
-    const seq = searchSeq.current + 1
-    searchSeq.current = seq
-    setSearching(true)
-
-    const timer = window.setTimeout(() => {
-      const started = performance.now()
-
-      searchSkillsHub(trimmed)
-        .then(response => {
-          if (searchSeq.current !== seq) {
-            return
-          }
-
-          setResults(response.results)
-          setTimedOut(response.timed_out || [])
-          setInstalled(prev => ({ ...prev, ...(response.installed || {}) }))
-          setSearchMs(Math.round(performance.now() - started))
-          setSearched(true)
-        })
-        .catch(err => {
-          if (searchSeq.current === seq) {
-            notifyError(err, h.searchFailed)
-            setResults([])
-            setSearched(true)
-          }
-        })
-        .finally(() => {
-          if (searchSeq.current === seq) {
-            setSearching(false)
-          }
-        })
-    }, 350)
-
-    return () => window.clearTimeout(timer)
-  }, [h, query])
-
-  // Poll a spawned hub action's log until it exits, then refresh installed state.
-  useEffect(() => {
-    if (!action) {
-      return
-    }
-
-    let cancelled = false
-    let timer: null | number = null
-
-    const poll = async () => {
-      try {
-        const status = await getActionStatus(action, 200)
-
-        if (cancelled) {
-          return
-        }
-
-        setActionLog(status.lines)
-        setActionRunning(status.running)
-        upsertDesktopActionTask(status)
-
-        if (status.running) {
-          timer = window.setTimeout(() => void poll(), ACTION_POLL_MS)
-        } else {
-          getSkillHubSources()
-            .then(response => {
-              if (!cancelled) {
-                setInstalled(response.installed)
-              }
-            })
-            .catch(() => {})
-          onInstalledChange?.()
-        }
-      } catch {
-        if (!cancelled) {
-          setActionRunning(false)
-        }
-      }
-    }
-
-    void poll()
-
-    return () => {
-      cancelled = true
-
-      if (timer !== null) {
-        window.clearTimeout(timer)
-      }
-    }
-  }, [action, onInstalledChange])
+  const previewQuery = useQuery({
+    queryKey: ['skill-hub-preview', detail?.identifier],
+    queryFn: () => previewSkillHub(detail!.identifier),
+    enabled: detail !== null,
+    staleTime: 5 * 60_000
+  })
 
   const install = useCallback(
-    async (identifier: string, name: string) => {
-      try {
-        const started = await installSkillFromHub(identifier)
-        notify({ kind: 'success', title: h.installStarted(name), message: h.actionLog })
-        setActionLog([])
-        setActionRunning(true)
-        setAction(started.name)
-        setDetail(null)
-      } catch (err) {
-        notifyError(err, h.actionFailed)
-      }
+    (identifier: string, name: string) => {
+      setDetail(null)
+      notify({ kind: 'success', title: h.installStarted(name), message: h.actionLog })
+      void installHubSkill(identifier).catch(err => notifyError(err, h.actionFailed))
     },
     [h]
   )
 
-  const updateAll = useCallback(async () => {
-    try {
-      const started = await updateSkillsFromHub()
-      notify({ kind: 'success', title: h.updateStarted, message: h.actionLog })
-      setActionLog([])
-      setActionRunning(true)
-      setAction(started.name)
-    } catch (err) {
-      notifyError(err, h.actionFailed)
-    }
+  const updateAll = useCallback(() => {
+    notify({ kind: 'success', title: h.updateStarted, message: h.actionLog })
+    void updateHubSkills().catch(err => notifyError(err, h.actionFailed))
   }, [h])
 
-  const openDetail = useCallback(
-    (skill: SkillHubResult) => {
-      setDetail(skill)
-      setPreview(null)
-      setScan(null)
-      setPreviewLoading(true)
-      previewSkillHub(skill.identifier)
-        .then(setPreview)
-        .catch(err => notifyError(err, h.previewFailed))
-        .finally(() => setPreviewLoading(false))
-    },
-    [h]
-  )
-
   const runScan = useCallback(
     (identifier: string) => {
       setScanning(true)
@@ -272,115 +222,170 @@ export function SkillsHub({ onInstalledChange, query }: SkillsHubProps) {
     [h]
   )
 
-  const isInstalled = useCallback((identifier: string) => Boolean(installed[identifier]), [installed])
+  const openDetail = useCallback((skill: SkillHubResult) => {
+    setDetail(skill)
+    setScan(null)
+  }, [])
 
-  const hasInstalled = Object.keys(installed).length > 0
-  const showLanding = !searched && !searching
+  // Per-source progress, keyed by source id (drives the connected-hub chips'
+  // spinner/degraded tint while a search is streaming in).
+  const searchStateById = new Map<string, { failed: boolean; fetching: boolean }>()
+  searchableSources.forEach((source, i) => {
+    const q = sourceSearches[i]
+    searchStateById.set(source.id, { failed: q.isError, fetching: term.length > 0 && q.isFetching })
+  })
+
+  // Merge every source's results, deduped by identifier preferring higher trust
+  // (mirrors the backend's unified_search rank). Recomputes as each source lands.
+  const results = useMemo(() => {
+    const seen = new Map<string, SkillHubResult>()
+
+    for (const q of sourceSearches) {
+      for (const r of q.data?.results ?? []) {
+        const prev = seen.get(r.identifier)
+
+        if (!prev || (TRUST_RANK[r.trust_level] ?? 0) > (TRUST_RANK[prev.trust_level] ?? 0)) {
+          seen.set(r.identifier, r)
+        }
+      }
+    }
+
+    return [...seen.values()].sort(
+      (a, b) => (TRUST_RANK[b.trust_level] ?? 0) - (TRUST_RANK[a.trust_level] ?? 0) || a.name.localeCompare(b.name)
+    )
+  }, [sourceSearches])
+
+  // Installed map: sources seeds it, search results patch it (a term can surface
+  // installs the sources list didn't feature); the optimistic override wins so a
+  // just-(un)installed row reflects its own outcome without the refetch race.
+  const installed = { ...(sourcesQuery.data?.installed ?? {}) }
+
+  for (const q of sourceSearches) {
+    Object.assign(installed, q.data?.installed ?? {})
+  }
+
+  const isInstalled = (identifier: string) => overrides[identifier] ?? Boolean(installed[identifier])
+
+  const sources = sourcesQuery.data?.sources ?? []
+  const featured = sourcesQuery.data?.featured ?? []
+
+  // Still fetching from at least one source; "done" only once every source has
+  // settled (so "No results" doesn't flash while slower sources are still in).
+  const anyFetching = term.length > 0 && sourceSearches.some(q => q.isFetching)
+  const searched = term.length > 0 && sourceSearches.length > 0 && sourceSearches.every(q => !q.isFetching)
+  const showLanding = term.length === 0
   const listed = showLanding ? featured : results
+  // Only block the whole pane on the first sources landing; after that results
+  // stream in progressively while a subtle footer shows more are coming.
+  const searching = anyFetching && results.length === 0
+  const hasInstalled = Object.keys(installed).length > 0
 
   return (
-    <div className="space-y-4">
-      <div className="flex flex-wrap items-center justify-between gap-2">
-        <div className="flex min-w-0 flex-wrap items-center gap-1.5 text-xs text-muted-foreground">
-          {sourcesLoading ? (
-            <span>{h.connectingHubs}</span>
-          ) : (
-            <>
-              <span>{h.connectedHubs}</span>
-              {sources.map(source => {
-                const degraded = source.available === false || source.rate_limited === true
+    <div className="flex h-full min-h-0 flex-col">
+      {/* Connected hubs — label on its own line, chips below, roomy padding. */}
+      <div className="shrink-0 px-4 pt-5 pb-8 text-[0.68rem] text-(--ui-text-tertiary)">
+        <span className="mb-1.5 block">{h.connectedHubs}</span>
+        <div className="flex flex-wrap items-center gap-1.5">
+          {sourcesQuery.isLoading
+            ? null
+            : sources.map(source => {
+                const state = searchStateById.get(source.id)
+                const degraded = source.available === false || source.rate_limited === true || state?.failed
+                const fetching = state?.fetching ?? false
 
                 return (
-                  <Badge
+                  <span
                     className={cn(
-                      degraded ? 'bg-amber-500/15 text-amber-400' : 'bg-(--ui-bg-tertiary) text-(--ui-text-secondary)'
+                      'relative rounded px-1.5 py-0.5 text-[0.6rem] transition-opacity',
+                      degraded ? 'bg-amber-500/15 text-amber-400' : 'bg-(--ui-bg-tertiary) text-(--ui-text-secondary)',
+                      // While searching, un-hit sources dim so the active ones read clearly.
+                      term.length > 0 && !fetching && !state?.failed && 'opacity-55'
                     )}
                     key={source.id}
                   >
-                    {source.label}
-                  </Badge>
+                    {/* Spinner overlays the (dimmed) label rather than pushing it,
+                        so a chip never resizes as its search starts/finishes. */}
+                    <span className={cn(fetching && 'opacity-30')}>{source.label}</span>
+                    {fetching && (
+                      <span className="absolute inset-0 grid place-items-center">
+                        <Loader2 className="size-2.5 animate-spin" />
+                      </span>
+                    )}
+                  </span>
                 )
               })}
-            </>
+        </div>
+      </div>
+
+      {/* Result summary (left) + Update installed (right) — only when a results
+          table is actually on screen, and update only if something's installed. */}
+      {listed.length > 0 && (
+        <div className="flex shrink-0 items-center justify-between gap-3 px-4 pb-1.5 text-[0.68rem] text-(--ui-text-tertiary)">
+          <span className="min-w-0 truncate">
+            {term.length > 0 ? h.resultCount(results.length, null) : h.featured}
+            {anyFetching && results.length > 0 && <span className="ml-2 text-(--ui-text-quaternary)">{h.searching}</span>}
+          </span>
+
+          {hasInstalled && (
+            <Button
+              className="shrink-0"
+              disabled={actions[UPDATE_ALL_KEY]?.running}
+              onClick={updateAll}
+              size="xs"
+              variant="text"
+            >
+              {actions[UPDATE_ALL_KEY]?.running && <Loader2 className="size-3 animate-spin" />}
+              {actions[UPDATE_ALL_KEY]?.running ? h.updating : h.updateAll}
+            </Button>
           )}
         </div>
-        {hasInstalled && (
-          <Button disabled={actionRunning} onClick={() => void updateAll()} size="xs" variant="text">
-            {actionRunning ? h.updating : h.updateAll}
-          </Button>
+      )}
+
+      {/* Scrollable results. */}
+      <div className="min-h-0 flex-1 overflow-y-auto px-4 pb-4 [scrollbar-gutter:stable]">
+        {searching ? (
+          <div className="grid min-h-40 place-items-center">
+            <PageLoader label={h.searching} />
+          </div>
+        ) : listed.length === 0 ? (
+          <div className="grid min-h-40 place-items-center px-6 text-center">
+            <p className="max-w-md text-[0.72rem] text-(--ui-text-tertiary)">
+              {searched ? h.noResults : h.landingHint}
+            </p>
+          </div>
+        ) : (
+          <div className="flex flex-col">
+            {listed.map(skill => (
+              <HubSkillRow
+                installedName={installed[skill.identifier]?.name ?? null}
+                key={skill.identifier}
+                onPreview={openDetail}
+                rawInstalled={Boolean(installed[skill.identifier])}
+                skill={skill}
+              />
+            ))}
+          </div>
         )}
       </div>
 
-      {searched && !searching && (
-        <div className="flex items-center gap-3 text-xs text-muted-foreground">
-          <span>{h.resultCount(results.length, searchMs)}</span>
-          {timedOut.length > 0 && <span className="text-amber-400">{h.timedOut(timedOut.join(', '))}</span>}
-        </div>
-      )}
-
-      {searching ? (
-        <PageLoader className="min-h-40" label={h.searching} />
-      ) : listed.length === 0 ? (
-        <div className="grid min-h-40 place-items-center text-center">
-          <div className="max-w-md text-xs text-muted-foreground">{searched ? h.noResults : h.landingHint}</div>
-        </div>
-      ) : (
-        <div className="space-y-1">
-          {showLanding && (
-            <div className="text-[0.68rem] font-semibold uppercase tracking-[0.12em] text-muted-foreground">
-              {h.featured}
-            </div>
-          )}
-          <div>
-            {listed.map(skill => (
-              <div
-                className="grid gap-3 px-0 py-2.5 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-center"
-                key={skill.identifier}
-              >
-                <div className="min-w-0">
-                  <div className="flex items-center gap-2">
-                    <span className="truncate text-sm font-medium">{skill.name}</span>
-                    <Badge className={trustTone(skill.trust_level)}>
-                      {h.trust[skill.trust_level] ?? skill.trust_level}
-                    </Badge>
-                    {isInstalled(skill.identifier) && (
-                      <Badge className="bg-emerald-500/15 text-emerald-400">{h.installed}</Badge>
-                    )}
-                  </div>
-                  <p className="mt-0.5 line-clamp-2 text-xs text-muted-foreground">{skill.description}</p>
-                </div>
-                <div className="flex shrink-0 items-center gap-1.5">
-                  <Button onClick={() => openDetail(skill)} size="xs" variant="text">
-                    {h.preview}
-                  </Button>
-                  <Button
-                    disabled={actionRunning || isInstalled(skill.identifier)}
-                    onClick={() => void install(skill.identifier, skill.name)}
-                    size="xs"
-                    variant="textStrong"
-                  >
-                    {isInstalled(skill.identifier) ? h.installed : h.install}
-                  </Button>
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-
-      {action && actionLog.length > 0 && (
-        <div>
-          <div className="mb-1.5 flex items-center gap-2 text-[0.68rem] font-semibold uppercase tracking-[0.12em] text-muted-foreground">
-            {h.actionLog}
-            {actionRunning && <Codicon name="loading" size="0.75rem" spinning />}
-          </div>
-          <pre
-            className="max-h-48 overflow-auto whitespace-pre-wrap wrap-break-word rounded-lg border border-(--ui-stroke-tertiary) bg-(--ui-bg-quinary) p-3 font-mono text-[0.65rem] leading-relaxed text-(--ui-text-tertiary)"
-            data-selectable-text="true"
-          >
-            {actionLog.join('\n')}
-          </pre>
-        </div>
+      {/* Action log — same resizable, flush-width bottom pane + LogTail surface
+          as the MCP logs. ANSI stripped so spawn output reads clean. Tails the
+          latest-started action ($hubActiveLog). */}
+      {activeLogKey && (
+        <DetailPane
+          defaultCollapsed
+          defaultHeight={176}
+          id="hub-action-log"
+          onClose={closeHubLog}
+          title={
+            <span className="flex items-center gap-1.5 text-[0.68rem] font-normal text-muted-foreground/60">
+              {h.actionLog}
+              {activeLog?.running && <Codicon name="loading" size="0.75rem" spinning />}
+            </span>
+          }
+        >
+          <LogTail emptyLabel={h.searching} lines={activeLog?.lines.length ? activeLog.lines.map(stripAnsi) : null} />
+        </DetailPane>
       )}
 
       <Dialog onOpenChange={open => !open && setDetail(null)} open={detail !== null}>
@@ -421,19 +426,19 @@ export function SkillsHub({ onInstalledChange, query }: SkillsHubProps) {
                   </div>
                 )}
 
-                {previewLoading ? (
+                {previewQuery.isLoading ? (
                   <PageLoader className="min-h-32" label={h.searching} />
-                ) : preview ? (
+                ) : previewQuery.data ? (
                   <>
                     <pre
                       className="max-h-72 overflow-auto whitespace-pre-wrap wrap-break-word rounded-lg border border-(--ui-stroke-tertiary) bg-(--ui-bg-quinary) p-3 font-mono text-[0.68rem] leading-relaxed"
                       data-selectable-text="true"
                     >
-                      {preview.skill_md || h.noReadme}
+                      {previewQuery.data.skill_md || h.noReadme}
                     </pre>
-                    {preview.files.length > 0 && (
+                    {previewQuery.data.files.length > 0 && (
                       <div className="text-xs text-muted-foreground">
-                        <span className="font-medium">{h.files}:</span> {preview.files.join(', ')}
+                        <span className="font-medium">{h.files}:</span> {previewQuery.data.files.join(', ')}
                       </div>
                     )}
                   </>
@@ -445,8 +450,8 @@ export function SkillsHub({ onInstalledChange, query }: SkillsHubProps) {
                   {scanning ? h.scanning : h.scan}
                 </Button>
                 <Button
-                  disabled={actionRunning || isInstalled(detail.identifier)}
-                  onClick={() => void install(detail.identifier, detail.name)}
+                  disabled={actions[detail.identifier]?.running || isInstalled(detail.identifier)}
+                  onClick={() => install(detail.identifier, detail.name)}
                   size="sm"
                 >
                   {isInstalled(detail.identifier) ? h.installed : h.install}
diff --git a/apps/desktop/src/app/skills/index.test.tsx b/apps/desktop/src/app/skills/index.test.tsx
index ff51acfb4..fe3e39a72 100644
--- a/apps/desktop/src/app/skills/index.test.tsx
+++ b/apps/desktop/src/app/skills/index.test.tsx
@@ -1,24 +1,32 @@
+// @vitest-environment jsdom
+import { QueryClientProvider } from '@tanstack/react-query'
 import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { MemoryRouter } from 'react-router-dom'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
+import type * as HermesApi from '@/hermes'
+import { queryClient } from '@/lib/query-client'
+
 const getSkills = vi.fn()
 const getToolsets = vi.fn()
 const toggleSkill = vi.fn()
 const toggleToolset = vi.fn()
 const getToolsetConfig = vi.fn()
 const selectToolsetProvider = vi.fn()
+const getUsageAnalytics = vi.fn()
 
-vi.mock('@/hermes', () => ({
+// Partial mock: keep the real module (SkillsView pulls in @/store/profile,
+// whose import-time subscription calls setApiRequestProfile) and stub only the
+// calls we assert on.
+vi.mock('@/hermes', async importOriginal => ({
+  ...(await importOriginal<typeof HermesApi>()),
   getSkills: () => getSkills(),
   getToolsets: () => getToolsets(),
   toggleSkill: (name: string, enabled: boolean) => toggleSkill(name, enabled),
   toggleToolset: (name: string, enabled: boolean) => toggleToolset(name, enabled),
   getToolsetConfig: (name: string) => getToolsetConfig(name),
   selectToolsetProvider: (toolset: string, provider: string) => selectToolsetProvider(toolset, provider),
-  deleteEnvVar: vi.fn(),
-  revealEnvVar: vi.fn(),
-  setEnvVar: vi.fn()
+  getUsageAnalytics: (days: number) => getUsageAnalytics(days)
 }))
 
 // Notifications hit nanostores/timers we don't care about here.
@@ -43,9 +51,12 @@ function toolset(overrides: Record<string, unknown> = {}) {
 function renderSkills() {
   return import('./index').then(({ SkillsView }) =>
     render(
-      <MemoryRouter initialEntries={['/skills?tab=toolsets']}>
-        <SkillsView />
-      </MemoryRouter>
+      // SkillsView reads skills/toolsets via useQuery, so it needs a provider.
+      <QueryClientProvider client={queryClient}>
+        <MemoryRouter initialEntries={['/skills?tab=toolsets']}>
+          <SkillsView />
+        </MemoryRouter>
+      </QueryClientProvider>
     )
   )
 }
@@ -54,12 +65,15 @@ beforeEach(() => {
   getSkills.mockResolvedValue([])
   getToolsets.mockResolvedValue([toolset()])
   toggleToolset.mockResolvedValue({ ok: true, name: 'web', enabled: false })
-  getToolsetConfig.mockResolvedValue({ has_category: false, active_provider: null, providers: [] })
+  getToolsetConfig.mockResolvedValue({ has_category: true, active_provider: null, providers: [] })
+  getUsageAnalytics.mockResolvedValue({ tools: [] })
 })
 
 afterEach(() => {
   cleanup()
   vi.clearAllMocks()
+  // Shared singleton client — drop cached skills/toolsets so each test refetches.
+  queryClient.clear()
 })
 
 describe('SkillsView toolset management', () => {
@@ -79,23 +93,20 @@ describe('SkillsView toolset management', () => {
 
     await renderSkills()
 
-    expect(await screen.findByText('Cron Jobs')).toBeTruthy()
+    // The label renders in both the row and the auto-selected detail header, so
+    // assert via the switch's (emoji-stripped) accessible name and the absence
+    // of the emoji rather than a single-match text lookup.
+    await screen.findByRole('switch', { name: 'Toggle Cron Jobs toolset' })
     expect(screen.queryByText(/⏰/)).toBeNull()
   })
 
-  it('keeps the configured pill alongside the switch', async () => {
+  it('renders the provider config panel inline for the selected toolset', async () => {
+    // The master-detail UI dropped the resting "Configured" pill and the
+    // "Configure" expander: the detail column auto-selects the first toolset
+    // and renders its config panel directly, which fetches on mount.
     await renderSkills()
 
     await screen.findByRole('switch', { name: 'Toggle Web Search toolset' })
-    expect(screen.getByText('Configured')).toBeTruthy()
-  })
-
-  it('expands the provider config panel when the configured pill is clicked', async () => {
-    await renderSkills()
-
-    const configureBtn = await screen.findByRole('button', { name: 'Configure Web Search' })
-    fireEvent.click(configureBtn)
-
     await waitFor(() => expect(getToolsetConfig).toHaveBeenCalledWith('web'))
   })
 })
diff --git a/apps/desktop/src/app/skills/index.tsx b/apps/desktop/src/app/skills/index.tsx
index e0be94ae3..845a15f7c 100644
--- a/apps/desktop/src/app/skills/index.tsx
+++ b/apps/desktop/src/app/skills/index.tsx
@@ -1,22 +1,50 @@
+import { useStore } from '@nanostores/react'
+import { useQuery } from '@tanstack/react-query'
 import type * as React from 'react'
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
+import { ArchiveSkillConfirmDialog } from '@/app/learning/archive-skill-confirm-dialog'
+import { CodeEditor } from '@/components/chat/code-editor'
 import { PageLoader } from '@/components/page-loader'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
-import { Codicon } from '@/components/ui/codicon'
-import { Switch } from '@/components/ui/switch'
-import { TextTab, TextTabMeta } from '@/components/ui/text-tab'
-import { getSkills, getToolsets, toggleSkill, toggleToolset } from '@/hermes'
+import { CountSkeleton } from '@/components/ui/skeleton'
+import {
+  editLearningNode,
+  getLearningNode,
+  getSkills,
+  getToolsets,
+  getUsageAnalytics,
+  type HermesGateway,
+  toggleSkill,
+  toggleToolset
+} from '@/hermes'
 import { useI18n } from '@/i18n'
 import { isDesktopToolsetVisible } from '@/lib/desktop-toolsets'
-import { cn } from '@/lib/utils'
+import { compactNumber } from '@/lib/format'
+import { queryClient, writeCache } from '@/lib/query-client'
+import { normalize } from '@/lib/text'
+import { $gateway } from '@/store/gateway'
 import { notify, notifyError } from '@/store/notifications'
+import { $activeGatewayProfile, normalizeProfileKey } from '@/store/profile'
 import type { SkillInfo, ToolsetInfo } from '@/types/hermes'
 
+import { useOnProfileSwitch } from '../hooks/use-on-profile-switch'
 import { useRefreshHotkey } from '../hooks/use-refresh-hotkey'
 import { useRouteEnumParam } from '../hooks/use-route-enum-param'
-import { PAGE_INSET_X } from '../layout-constants'
+import {
+  CapRow,
+  DetailColumn,
+  DetailPane,
+  ListColumn,
+  ListStrip,
+  ListStripButton,
+  ListStripMenu,
+  type ListStripMenuToggle,
+  MasterDetail,
+  ToolChip
+} from '../master-detail'
+import { PanelEmpty, PanelPill } from '../overlays/panel'
 import { PageSearchShell } from '../page-search-shell'
 import { ComputerUsePanel } from '../settings/computer-use-panel'
 import { asText, includesQuery, prettyName, toolNames, toolsetDisplayLabel } from '../settings/helpers'
@@ -24,34 +52,108 @@ import { ToolsetConfigPanel } from '../settings/toolset-config-panel'
 import type { SetStatusbarItemGroup } from '../shell/statusbar-controls'
 
 import { SkillsHub } from './hub'
+import { McpTab } from './mcp-tab'
+import { $skillsSortDesc, $toolsetsSortDesc } from './store'
 
-const SKILLS_MODES = ['skills', 'toolsets', 'hub'] as const
-type SkillsMode = (typeof SKILLS_MODES)[number]
+const SKILLS_MODES = ['skills', 'toolsets', 'mcp', 'hub'] as const
 
-function categoryFor(skill: SkillInfo): string {
-  return asText(skill.category) || 'general'
+// Skills + toolsets live in the RQ cache so switching tabs/pages paints the
+// cached lists instantly (no reload flash) and mount only fires a deduped
+// background refetch. A profile swap globally invalidates (see store/profile),
+// so these plain keys refetch against the new backend automatically.
+const SKILLS_QUERY_KEY = ['skills-list'] as const
+const TOOLSETS_QUERY_KEY = ['toolsets-list'] as const
+
+// Optimistic write-through: toggles/bulk/archive repaint instantly; the next
+// background refetch reconciles with the backend.
+const setSkills = writeCache<SkillInfo[]>(SKILLS_QUERY_KEY)
+const setToolsets = writeCache<ToolsetInfo[]>(TOOLSETS_QUERY_KEY)
+
+// Per-tool call counts come from a 365-day message scan — heavy, and purely
+// cosmetic (Toolsets usage badges). Cache the result module-wide with a TTL so
+// bouncing between tabs/pages doesn't re-run the scan every time. Keyed by
+// profile: analytics are profile-scoped, so a switch must not show the previous
+// profile's counts. `useRefreshHotkey` still forces a fresh pull.
+const TOOL_CALLS_TTL_MS = 10 * 60 * 1000
+const toolCallsCache = new Map<string, { at: number; value: Record<string, number> }>()
+
+async function loadToolCalls(force = false): Promise<Record<string, number>> {
+  const key = normalizeProfileKey($activeGatewayProfile.get())
+  const cached = toolCallsCache.get(key)
+
+  if (!force && cached && Date.now() - cached.at < TOOL_CALLS_TTL_MS) {
+    return cached.value
+  }
+
+  const analytics = await getUsageAnalytics(365)
+
+  const value = Object.fromEntries((analytics.tools ?? []).map(e => [e.tool, e.count]))
+
+  // Only cache if the active profile hasn't changed during the request — else a
+  // switch mid-flight would file this result under the wrong profile's key.
+  if (normalizeProfileKey($activeGatewayProfile.get()) === key) {
+    toolCallsCache.set(key, { at: Date.now(), value })
+  }
+
+  return value
 }
 
-function filteredSkills(skills: SkillInfo[], query: string, category: string | null): SkillInfo[] {
-  const q = query.trim().toLowerCase()
+const usageOf = (skill: SkillInfo): number => (typeof skill.usage === 'number' ? skill.usage : 0)
+
+const categoryFor = (skill: SkillInfo): string => asText(skill.category) || 'general'
+
+// TODO(i18n): literals until the UX settles.
+const PROVENANCE_LABEL: Record<NonNullable<SkillInfo['provenance']>, string> = {
+  agent: 'Learned',
+  bundled: 'Built-in',
+  hub: 'Hub'
+}
+
+// Row subtitle: category, with non-default origins badged.
+function skillSubtitle(skill: SkillInfo): React.ReactNode {
+  const category = prettyName(categoryFor(skill))
+  const provenance = skill.provenance
+
+  return (
+    <>
+      <span className="truncate">{category}</span>
+      {provenance === 'agent' && (
+        <Badge className="shrink-0 normal-case" variant="default">
+          learned
+        </Badge>
+      )}
+      {provenance === 'hub' && (
+        <Badge className="shrink-0 normal-case" variant="muted">
+          hub
+        </Badge>
+      )}
+    </>
+  )
+}
+
+function filteredSkills(skills: SkillInfo[], query: string, desc: boolean): SkillInfo[] {
+  const q = normalize(query)
+  const sign = desc ? 1 : -1
 
   return skills
-    .filter(skill => {
-      if (category && categoryFor(skill) !== category) {
-        return false
-      }
-
-      if (!q) {
-        return true
-      }
-
-      return includesQuery(skill.name, q) || includesQuery(skill.description, q) || includesQuery(skill.category, q)
-    })
-    .sort((a, b) => asText(a.name).localeCompare(asText(b.name)))
+    .filter(
+      skill =>
+        !q || includesQuery(skill.name, q) || includesQuery(skill.description, q) || includesQuery(skill.category, q)
+    )
+    .sort((a, b) => sign * (usageOf(b) - usageOf(a)) || asText(a.name).localeCompare(asText(b.name)))
 }
 
-function filteredToolsets(toolsets: ToolsetInfo[], query: string): ToolsetInfo[] {
-  const q = query.trim().toLowerCase()
+const toolsetCalls = (toolset: ToolsetInfo, toolCalls: Record<string, number>): number =>
+  toolNames(toolset).reduce((sum, name) => sum + (toolCalls[name] ?? 0), 0)
+
+function filteredToolsets(
+  toolsets: ToolsetInfo[],
+  query: string,
+  toolCalls: Record<string, number>,
+  desc: boolean
+): ToolsetInfo[] {
+  const q = normalize(query)
+  const sign = desc ? 1 : -1
 
   return toolsets
     .filter(toolset => {
@@ -63,164 +165,388 @@ function filteredToolsets(toolsets: ToolsetInfo[], query: string): ToolsetInfo[]
         return true
       }
 
-      const label = toolsetDisplayLabel(toolset)
-
       return (
         includesQuery(toolset.name, q) ||
-        includesQuery(label, q) ||
-        includesQuery(toolset.label, q) ||
+        includesQuery(toolsetDisplayLabel(toolset), q) ||
         includesQuery(toolset.description, q) ||
         toolNames(toolset).some(name => includesQuery(name, q))
       )
     })
-    .sort((a, b) => toolsetDisplayLabel(a).localeCompare(toolsetDisplayLabel(b)))
+    .sort(
+      (a, b) =>
+        sign * (toolsetCalls(b, toolCalls) - toolsetCalls(a, toolCalls)) ||
+        toolsetDisplayLabel(a).localeCompare(toolsetDisplayLabel(b))
+    )
 }
 
+const visibleToolsetCount = (toolsets: ToolsetInfo[]) => toolsets.filter(ts => isDesktopToolsetVisible(ts.name)).length
+
 interface SkillsViewProps extends React.ComponentProps<'section'> {
   setStatusbarItemGroup?: SetStatusbarItemGroup
 }
 
 export function SkillsView({ setStatusbarItemGroup: _setStatusbarItemGroup, ...props }: SkillsViewProps) {
   const { t } = useI18n()
+  const gateway = useStore($gateway) as HermesGateway | null
   const [mode, setMode] = useRouteEnumParam('tab', SKILLS_MODES, 'skills')
 
   const [query, setQuery] = useState('')
-  const [skills, setSkills] = useState<SkillInfo[] | null>(null)
-  const [toolsets, setToolsets] = useState<ToolsetInfo[] | null>(null)
-  const [activeCategory, setActiveCategory] = useState<string | null>(null)
-  const [refreshing, setRefreshing] = useState(false)
-  const [savingSkill, setSavingSkill] = useState<string | null>(null)
-  const [savingToolset, setSavingToolset] = useState<string | null>(null)
-  const [expandedToolset, setExpandedToolset] = useState<string | null>(null)
+
+  const {
+    data: skills,
+    isError: skillsFailed,
+    error: skillsError
+  } = useQuery({
+    queryKey: SKILLS_QUERY_KEY,
+    queryFn: getSkills,
+    staleTime: 0
+  })
+
+  const { data: toolsets, isError: toolsetsFailed } = useQuery({
+    queryKey: TOOLSETS_QUERY_KEY,
+    queryFn: getToolsets,
+    staleTime: 0
+  })
+
+  // tool name -> call count over the analytics window. null = still loading
+  // (badges show skeletons); {} = loaded empty / unavailable backend.
+  const [toolCalls, setToolCalls] = useState<Record<string, number> | null>(null)
+  // Bumped on profile switch so a slow analytics load from profile A can't set
+  // toolCalls after the user moved to B.
+  const toolCallsEpoch = useRef(0)
+  const skillsSortDesc = useStore($skillsSortDesc)
+  const toolsetsSortDesc = useStore($toolsetsSortDesc)
+  const [bulkBusy, setBulkBusy] = useState(false)
+  const [selectedSkill, setSelectedSkill] = useState<string | null>(null)
+  const [selectedToolset, setSelectedToolset] = useState<string | null>(null)
 
   const refreshCapabilities = useCallback(async () => {
-    setRefreshing(true)
+    await Promise.all([
+      queryClient.invalidateQueries({ queryKey: SKILLS_QUERY_KEY }),
+      queryClient.invalidateQueries({ queryKey: TOOLSETS_QUERY_KEY })
+    ])
 
-    try {
-      const [nextSkills, nextToolsets] = await Promise.all([getSkills(), getToolsets()])
-      setSkills(nextSkills)
-      setToolsets(nextToolsets)
-    } catch (err) {
-      notifyError(err, t.skills.skillsLoadFailed)
-    } finally {
-      setRefreshing(false)
+    // An explicit refresh is the one time we bypass the analytics TTL — but
+    // only if the badges are already on screen; otherwise let the lazy load
+    // pick it up when Toolsets is first shown. Guard the async set against a
+    // profile switch landing before it resolves.
+    if (toolCallsCache.size > 0) {
+      const epoch = toolCallsEpoch.current
+
+      loadToolCalls(true)
+        .then(value => toolCallsEpoch.current === epoch && setToolCalls(value))
+        .catch(() => toolCallsEpoch.current === epoch && setToolCalls({}))
     }
-  }, [t])
+  }, [])
 
   const refreshToolsets = useCallback(() => {
-    getToolsets()
-      .then(setToolsets)
-      .catch(err => notifyError(err, t.skills.toolsetsRefreshFailed))
-  }, [t])
+    void queryClient.invalidateQueries({ queryKey: TOOLSETS_QUERY_KEY })
+  }, [])
 
   useRefreshHotkey(refreshCapabilities)
 
+  // Per-tool call counts feed ONLY the Toolsets tab's usage badges/sort, and
+  // the query behind them is a 365-day message scan — heavy. Fetch it lazily
+  // the first time Toolsets is shown, never on Skills or MCP, so it can't
+  // starve the MCP tab's config load. Absent → toolsets sort A–Z until it lands.
   useEffect(() => {
-    void refreshCapabilities()
-  }, [refreshCapabilities])
-
-  const categories = useMemo(() => {
-    if (!skills) {
-      return []
+    if (mode !== 'toolsets' || toolCalls !== null) {
+      return
     }
 
-    const counts = new Map<string, number>()
+    let cancelled = false
+    // Guard the setter by epoch too: when toolCalls is already null at switch
+    // time, setToolCalls(null) is a no-op so this effect never re-runs to flip
+    // `cancelled` — the epoch check catches that gap.
+    const epoch = toolCallsEpoch.current
+    const live = () => !cancelled && toolCallsEpoch.current === epoch
 
-    for (const skill of skills) {
-      const key = categoryFor(skill)
-      counts.set(key, (counts.get(key) || 0) + 1)
-    }
+    loadToolCalls()
+      .then(value => live() && setToolCalls(value))
+      .catch(() => live() && setToolCalls({}))
 
-    return Array.from(counts.entries())
-      .sort(([a], [b]) => a.localeCompare(b))
-      .map(([key, count]) => ({ key, count }))
-  }, [skills])
+    return () => void (cancelled = true)
+  }, [mode, toolCalls])
+
+  // On a profile switch the analytics cache is profile-keyed, but our local
+  // toolCalls state isn't — leaving it non-null would keep the lazy effect from
+  // ever re-running, so badges/sort would show the previous profile's counts.
+  // Reset to null so the next Toolsets view reloads for the active profile.
+  useOnProfileSwitch(() => {
+    toolCallsEpoch.current += 1
+    setToolCalls(null)
+  })
 
   const visibleSkills = useMemo(
-    () => (skills ? filteredSkills(skills, query, mode === 'skills' ? activeCategory : null) : []),
-    [activeCategory, mode, query, skills]
+    () => (skills ? filteredSkills(skills, query, skillsSortDesc) : []),
+    [query, skills, skillsSortDesc]
   )
 
-  const visibleToolsets = useMemo(() => (toolsets ? filteredToolsets(toolsets, query) : []), [query, toolsets])
+  const visibleToolsets = useMemo(
+    () => (toolsets ? filteredToolsets(toolsets, query, toolCalls ?? {}, toolsetsSortDesc) : []),
+    [query, toolCalls, toolsets, toolsetsSortDesc]
+  )
 
-  const skillGroups = useMemo(() => {
-    const groups = new Map<string, SkillInfo[]>()
+  // Bulk actions ("All" master switch, "Disable unused") and the master-switch
+  // state target the WHOLE tab, never the search-filtered view — a tab-wide
+  // control that silently scoped to the current query would be a lie.
+  const bulkSkills = skills ?? []
+  const bulkToolsets = useMemo(() => (toolsets ?? []).filter(ts => isDesktopToolsetVisible(ts.name)), [toolsets])
 
-    for (const skill of visibleSkills) {
-      const key = categoryFor(skill)
-      groups.set(key, [...(groups.get(key) || []), skill])
+  // Rotating placeholder nudges from the user's own data — teach that search
+  // understands categories and tool names, not just titles.
+  // TODO(i18n): literals until the UX settles.
+  const searchHints = useMemo(() => {
+    if (mode === 'skills' && skills?.length) {
+      const counts = new Map<string, number>()
+
+      for (const skill of skills) {
+        const key = categoryFor(skill)
+        counts.set(key, (counts.get(key) || 0) + 1)
+      }
+
+      return [...counts.entries()]
+        .sort(([, a], [, b]) => b - a)
+        .slice(0, 5)
+        .map(([category]) => `Try “${category.toLowerCase()}”`)
     }
 
-    return Array.from(groups.entries()).sort(([a], [b]) => a.localeCompare(b))
-  }, [visibleSkills])
+    if (mode === 'toolsets' && toolsets?.length) {
+      return toolsets
+        .filter(ts => isDesktopToolsetVisible(ts.name) && toolNames(ts).length > 0)
+        .slice(0, 5)
+        .map(ts => `Try “${toolNames(ts)[0]}”`)
+    }
 
-  const totalSkills = skills?.length || 0
-  const enabledToolsets = toolsets?.filter(toolset => toolset.enabled).length || 0
+    return undefined
+  }, [mode, skills, toolsets])
 
+  // Keep a valid selection: fall back to the first visible row when the
+  // current selection is filtered out (or nothing is selected yet).
+  const activeSkill = useMemo(
+    () => visibleSkills.find(s => s.name === selectedSkill) ?? visibleSkills[0] ?? null,
+    [selectedSkill, visibleSkills]
+  )
+
+  const activeToolset = useMemo(
+    () => visibleToolsets.find(ts => ts.name === selectedToolset) ?? visibleToolsets[0] ?? null,
+    [selectedToolset, visibleToolsets]
+  )
+
+  // Single toggles are optimistic and silent on success (the row repaints
+  // immediately — a toast per flip would spam rapid customization). Errors
+  // revert and notify.
   async function handleToggleSkill(skill: SkillInfo, enabled: boolean) {
-    setSavingSkill(skill.name)
+    setSkills(current => current?.map(row => (row.name === skill.name ? { ...row, enabled } : row)) ?? current)
 
     try {
       await toggleSkill(skill.name, enabled)
-      setSkills(current => current?.map(row => (row.name === skill.name ? { ...row, enabled } : row)) ?? current)
-      notify({
-        kind: 'success',
-        title: enabled ? t.skills.skillEnabled : t.skills.skillDisabled,
-        message: t.skills.appliesToNewSessions(skill.name)
-      })
     } catch (err) {
+      setSkills(
+        current => current?.map(row => (row.name === skill.name ? { ...row, enabled: !enabled } : row)) ?? current
+      )
       notifyError(err, t.skills.failedToUpdate(skill.name))
-    } finally {
-      setSavingSkill(null)
     }
   }
 
   async function handleToggleToolset(toolset: ToolsetInfo, enabled: boolean) {
-    setSavingToolset(toolset.name)
+    setToolsets(
+      current =>
+        current?.map(row => (row.name === toolset.name ? { ...row, enabled, available: enabled } : row)) ?? current
+    )
 
     try {
       await toggleToolset(toolset.name, enabled)
+    } catch (err) {
       setToolsets(
         current =>
-          current?.map(row => (row.name === toolset.name ? { ...row, enabled, available: enabled } : row)) ?? current
+          current?.map(row => (row.name === toolset.name ? { ...row, enabled: !enabled, available: !enabled } : row)) ??
+          current
       )
-      notify({
-        kind: 'success',
-        title: enabled ? t.skills.toolsetEnabled : t.skills.toolsetDisabled,
-        message: t.skills.appliesToNewSessions(toolsetDisplayLabel(toolset))
-      })
-    } catch (err) {
       notifyError(err, t.skills.failedToUpdate(toolsetDisplayLabel(toolset)))
-    } finally {
-      setSavingToolset(null)
     }
   }
 
+  // Sequential on purpose: each toggle is a config read-modify-write on the
+  // backend; parallel calls would race the disabled-list save.
+  async function bulkApply(skillTargets: SkillInfo[], toolsetTargets: ToolsetInfo[], enabled: boolean) {
+    if (bulkBusy || skillTargets.length + toolsetTargets.length === 0) {
+      return
+    }
+
+    setBulkBusy(true)
+
+    let done = 0
+
+    try {
+      for (const row of skillTargets) {
+        await toggleSkill(row.name, enabled)
+        setSkills(cur => cur?.map(r => (r.name === row.name ? { ...r, enabled } : r)) ?? cur)
+        done += 1
+      }
+
+      for (const row of toolsetTargets) {
+        await toggleToolset(row.name, enabled)
+        setToolsets(cur => cur?.map(r => (r.name === row.name ? { ...r, enabled, available: enabled } : r)) ?? cur)
+        done += 1
+      }
+
+      notify({ kind: 'success', title: t.skills.bulkUpdated(done), message: '' })
+    } catch (err) {
+      notifyError(err, t.skills.failedToUpdate(mode === 'skills' ? t.skills.tabSkills : t.skills.tabToolsets))
+    } finally {
+      setBulkBusy(false)
+    }
+  }
+
+  const bulkToggle = (enabled: boolean) =>
+    mode === 'skills'
+      ? bulkApply(
+          bulkSkills.filter(row => row.enabled !== enabled),
+          [],
+          enabled
+        )
+      : bulkApply(
+          [],
+          bulkToolsets.filter(row => row.enabled !== enabled),
+          enabled
+        )
+
+  // "Never used" = zero recorded activity. The pruning move for a 100+ skill
+  // install: keep the workhorses, shed the noise.
+  const disableUnused = () =>
+    bulkApply(
+      bulkSkills.filter(skill => skill.enabled && usageOf(skill) === 0),
+      [],
+      false
+    )
+
+  // One switch line covering enable-all/disable-all.
+  // TODO(i18n): literals until the UX settles.
+  const bulkSwitch = (allEnabled: boolean): ListStripMenuToggle => ({
+    checked: allEnabled,
+    disabled: bulkBusy,
+    label: 'All',
+    onToggle: checked => void bulkToggle(checked)
+  })
+
+  const allSkillsEnabled = bulkSkills.length > 0 && bulkSkills.every(s => s.enabled)
+  const allToolsetsEnabled = bulkToolsets.length > 0 && bulkToolsets.every(ts => ts.enabled)
+
+  // TODO(i18n): literals until the UX settles.
+  const sortButton = (desc: boolean, flip: () => void) => (
+    <ListStripButton onClick={flip}>{desc ? '↓ Most used' : '↑ Least used'}</ListStripButton>
+  )
+
+  // Full-bleed empty state, matching the MCP tab (spans both columns, not a
+  // cramped note in the left rail). Query-aware, and says "tools" not the
+  // internal "toolsets".
+  // TODO(i18n): literals until the UX settles.
+  const capabilityEmpty = (noun: string) => {
+    const q = query.trim()
+
+    return (
+      <div className="flex h-full min-h-0 flex-1">
+        <PanelEmpty
+          description={q ? `Nothing matches “${q}”.` : `No ${noun} available yet.`}
+          icon="search"
+          title={`No ${noun} found`}
+        />
+      </div>
+    )
+  }
+
+  // Learned/local skills are editable + archivable, mirroring the memory
+  // graph (same /api/learning/node endpoints — delete archives, restorable
+  // via `hermes curator restore`).
+  const [skillEditor, setSkillEditor] = useState<null | { content: string; name: string }>(null)
+  const [skillDraft, setSkillDraft] = useState('')
+  const [skillSaving, setSkillSaving] = useState(false)
+  const [archiveTarget, setArchiveTarget] = useState<null | string>(null)
+  // Bumped on profile switch so an in-flight openSkillEditor fetch from profile
+  // A can't reopen the editor with A's content after switching to B.
+  const skillEditorEpoch = useRef(0)
+
+  // A profile switch swaps the backend under the open editor/archive dialog —
+  // their targets belong to profile A, so a save/archive would hit B. Drop them
+  // so nothing edits or archives against the newly active profile.
+  useOnProfileSwitch(() => {
+    skillEditorEpoch.current += 1
+    setSkillEditor(null)
+    setSkillDraft('')
+    setArchiveTarget(null)
+  })
+
+  const openSkillEditor = async (name: string) => {
+    const epoch = skillEditorEpoch.current
+
+    try {
+      const node = await getLearningNode(name)
+
+      if (skillEditorEpoch.current !== epoch) {
+        return
+      }
+
+      setSkillEditor({ content: node.content, name })
+      setSkillDraft(node.content)
+    } catch (err) {
+      notifyError(err, name)
+    }
+  }
+
+  const saveSkillEdit = async () => {
+    if (!skillEditor) {
+      return
+    }
+
+    setSkillSaving(true)
+
+    try {
+      await editLearningNode(skillEditor.name, skillDraft)
+      // TODO(i18n): literal until the UX settles.
+      notify({ kind: 'success', title: 'Skill updated', message: t.skills.appliesToNewSessions(skillEditor.name) })
+      setSkillEditor(null)
+      void refreshCapabilities()
+    } catch (err) {
+      notifyError(err, skillEditor.name)
+    } finally {
+      setSkillSaving(false)
+    }
+  }
+
+  const skillEditorPane = skillEditor && (
+    <DetailPane
+      actions={
+        <Button disabled={skillSaving} onClick={() => void saveSkillEdit()} size="xs">
+          {/* TODO(i18n): literal until the UX settles. */}
+          {skillSaving ? t.common.saving : 'Save'}
+        </Button>
+      }
+      id="skill-editor"
+      onClose={() => setSkillEditor(null)}
+      title={<span className="text-[0.68rem] font-normal text-muted-foreground/60">{skillEditor.name}/SKILL.md</span>}
+    >
+      <CodeEditor
+        filePath="SKILL.md"
+        initialValue={skillEditor.content}
+        key={skillEditor.name}
+        onCancel={() => setSkillEditor(null)}
+        onChange={setSkillDraft}
+        onSave={() => void saveSkillEdit()}
+      />
+    </DetailPane>
+  )
+
   return (
     <PageSearchShell
       {...props}
-      filters={
-        mode === 'skills' && categories.length > 0 ? (
-          <>
-            <TextTab active={activeCategory === null} onClick={() => setActiveCategory(null)}>
-              {t.skills.all} <TextTabMeta>{totalSkills}</TextTabMeta>
-            </TextTab>
-            {categories.map(category => (
-              <TextTab
-                active={activeCategory === category.key}
-                key={category.key}
-                onClick={() => setActiveCategory(activeCategory === category.key ? null : category.key)}
-              >
-                {prettyName(category.key)} <TextTabMeta>{category.count}</TextTabMeta>
-              </TextTab>
-            ))}
-          </>
-        ) : undefined
-      }
+      activeTab={mode}
       onSearchChange={setQuery}
-      searchHidden={
-        mode === 'skills' ? (skills?.length ?? 0) === 0 : mode === 'toolsets' && (toolsets?.length ?? 0) === 0
-      }
+      onTabChange={id => setMode(id as (typeof SKILLS_MODES)[number])}
+      // MCP manages a handful of entries with the editor right there —
+      // searching it is noise.
+      searchHidden={mode === 'mcp'}
+      searchHints={searchHints}
       searchPlaceholder={
         mode === 'skills'
           ? t.skills.searchSkills
@@ -228,170 +554,246 @@ export function SkillsView({ setStatusbarItemGroup: _setStatusbarItemGroup, ...p
             ? t.skills.hub.searchPlaceholder
             : t.skills.searchToolsets
       }
-      searchTrailingAction={
-        <Button
-          aria-label={refreshing ? t.skills.refreshing : t.skills.refresh}
-          className="text-(--ui-text-tertiary) hover:bg-transparent hover:text-foreground"
-          disabled={refreshing}
-          onClick={() => void refreshCapabilities()}
-          size="icon-xs"
-          title={refreshing ? t.skills.refreshing : t.skills.refresh}
-          type="button"
-          variant="ghost"
-        >
-          <Codicon name="refresh" size="0.875rem" spinning={refreshing} />
-        </Button>
-      }
       searchValue={query}
-      tabs={
-        <>
-          <TextTab active={mode === 'skills'} onClick={() => setMode('skills')}>
-            {t.skills.tabSkills}
-          </TextTab>
-          <TextTab active={mode === 'toolsets'} onClick={() => setMode('toolsets')}>
-            {t.skills.tabToolsets}
-          </TextTab>
-          <TextTab active={mode === 'hub'} onClick={() => setMode('hub')}>
-            {t.skills.tabHub}
-          </TextTab>
-        </>
-      }
+      tabs={[
+        { id: 'skills', label: t.skills.tabSkills, meta: skills?.length ?? null },
+        { id: 'toolsets', label: t.skills.tabToolsets, meta: toolsets ? visibleToolsetCount(toolsets) : null },
+        { id: 'mcp', label: t.skills.tabMcp },
+        { id: 'hub', label: t.skills.tabHub }
+      ]}
     >
       {mode === 'hub' ? (
-        <div className={cn('h-full overflow-y-auto py-3', PAGE_INSET_X)}>
-          <SkillsHub onInstalledChange={() => void refreshCapabilities()} query={query} />
-        </div>
+        <SkillsHub query={query} />
+      ) : mode === 'mcp' ? (
+        <McpTab gateway={gateway} />
+      ) : (skillsFailed || toolsetsFailed) && (!skills || !toolsets) ? (
+        <PanelEmpty
+          action={
+            <Button onClick={() => void refreshCapabilities()} size="sm">
+              {t.skills.refresh}
+            </Button>
+          }
+          description={skillsError instanceof Error ? skillsError.message : undefined}
+          icon="error"
+          title={t.skills.skillsLoadFailed}
+        />
       ) : !skills || !toolsets ? (
         <PageLoader label={t.skills.loading} />
       ) : mode === 'skills' ? (
-        <div className={cn('h-full overflow-y-auto py-3', PAGE_INSET_X)}>
-          {visibleSkills.length === 0 ? (
-            <EmptyState description={t.skills.noSkillsDesc} title={t.skills.noSkillsTitle} />
-          ) : (
-            <div className="space-y-4">
-              {skillGroups.map(([category, list]) => (
-                <div className="space-y-1.5" key={category}>
-                  {activeCategory === null && (
-                    <div className="text-[0.68rem] font-semibold uppercase tracking-[0.12em] text-muted-foreground">
-                      {prettyName(category)}
-                    </div>
-                  )}
-                  <div>
-                    {list.map(skill => (
-                      <div
-                        className="grid gap-3 px-0 py-2.5 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-center"
-                        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) || t.skills.noDescription}
-                          </p>
-                        </div>
-                        <Switch
-                          checked={skill.enabled}
-                          disabled={savingSkill === skill.name}
-                          onCheckedChange={checked => void handleToggleSkill(skill, checked)}
-                        />
-                      </div>
-                    ))}
-                  </div>
-                </div>
+        visibleSkills.length === 0 ? (
+          capabilityEmpty('skills')
+        ) : (
+          <MasterDetail pane={skillEditorPane} split="wide">
+            <ListColumn
+              header={
+                <ListStrip
+                  left={sortButton(skillsSortDesc, () => $skillsSortDesc.set(!$skillsSortDesc.get()))}
+                  right={
+                    <ListStripMenu
+                      items={[{ disabled: bulkBusy, label: 'Disable unused', onSelect: () => void disableUnused() }]}
+                      label={t.skills.tabSkills}
+                      toggle={bulkSwitch(allSkillsEnabled)}
+                    />
+                  }
+                />
+              }
+            >
+              {visibleSkills.map(skill => (
+                <CapRow
+                  active={activeSkill?.name === skill.name}
+                  busy={bulkBusy}
+                  enabled={skill.enabled}
+                  key={skill.name}
+                  meta={usageOf(skill) > 0 ? `×${compactNumber(usageOf(skill))}` : undefined}
+                  onSelect={() => setSelectedSkill(skill.name)}
+                  onToggle={enabled => void handleToggleSkill(skill, enabled)}
+                  subtitle={skillSubtitle(skill)}
+                  title={skill.name}
+                  toggleLabel={skill.name}
+                />
               ))}
-            </div>
-          )}
-        </div>
+            </ListColumn>
+            {/* TODO(i18n): literal until the UX settles. */}
+            <DetailColumn footer="Changes apply to new sessions.">
+              {activeSkill && (
+                <SkillDetail
+                  onArchive={() => setArchiveTarget(activeSkill.name)}
+                  onEdit={() => void openSkillEditor(activeSkill.name)}
+                  skill={activeSkill}
+                />
+              )}
+            </DetailColumn>
+          </MasterDetail>
+        )
+      ) : visibleToolsets.length === 0 ? (
+        capabilityEmpty('tools')
       ) : (
-        <div className={cn('h-full overflow-y-auto py-3', PAGE_INSET_X)}>
-          {visibleToolsets.length === 0 ? (
-            <EmptyState description={t.skills.noToolsetsDesc} title={t.skills.noToolsetsTitle} />
-          ) : (
-            <div className="space-y-2">
-              <div className="text-xs text-muted-foreground">
-                {t.skills.toolsetsEnabled(enabledToolsets, toolsets.length)}
-              </div>
-              <div>
-                {visibleToolsets.map(toolset => {
-                  const tools = toolNames(toolset)
-                  const label = toolsetDisplayLabel(toolset)
-                  const expanded = expandedToolset === toolset.name
+        <MasterDetail split="wide">
+          <ListColumn
+            header={
+              <ListStrip
+                left={sortButton(toolsetsSortDesc, () => $toolsetsSortDesc.set(!$toolsetsSortDesc.get()))}
+                right={<ListStripMenu label={t.skills.tabToolsets} toggle={bulkSwitch(allToolsetsEnabled)} />}
+              />
+            }
+          >
+            {visibleToolsets.map(toolset => {
+              const label = toolsetDisplayLabel(toolset)
+              const calls = toolCalls ? toolsetCalls(toolset, toolCalls) : null
 
-                  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 shrink-0 items-center gap-1.5">
-                          <button
-                            aria-expanded={expanded}
-                            aria-label={t.skills.configureToolset(label)}
-                            className="cursor-pointer rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
-                            onClick={() =>
-                              setExpandedToolset(current => (current === toolset.name ? null : toolset.name))
-                            }
-                            type="button"
-                          >
-                            <StatusPill active={toolset.configured}>
-                              {toolset.configured ? t.skills.configured : t.skills.needsKeys}
-                            </StatusPill>
-                          </button>
-                          <Switch
-                            aria-label={t.skills.toggleToolset(label)}
-                            checked={toolset.enabled}
-                            disabled={savingToolset === toolset.name}
-                            onCheckedChange={checked => void handleToggleToolset(toolset, checked)}
-                          />
-                        </div>
-                      </div>
-                      <p className="mt-1 text-xs text-muted-foreground">
-                        {asText(toolset.description) || t.skills.noDescription}
-                      </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>
-                      )}
-                      {expanded && toolset.name === 'computer_use' && (
-                        <ComputerUsePanel onConfiguredChange={refreshToolsets} />
-                      )}
-                      {expanded && <ToolsetConfigPanel onConfiguredChange={refreshToolsets} toolset={toolset.name} />}
-                    </div>
-                  )
-                })}
-              </div>
-            </div>
-          )}
-        </div>
+              return (
+                <CapRow
+                  active={activeToolset?.name === toolset.name}
+                  busy={bulkBusy}
+                  enabled={toolset.enabled}
+                  key={toolset.name}
+                  meta={
+                    calls === null ? (
+                      <CountSkeleton />
+                    ) : calls > 0 ? (
+                      `×${compactNumber(calls)}`
+                    ) : (
+                      `${toolNames(toolset).length} tools`
+                    )
+                  }
+                  onSelect={() => setSelectedToolset(toolset.name)}
+                  onToggle={checked => void handleToggleToolset(toolset, checked)}
+                  subtitle={asText(toolset.description)}
+                  title={label}
+                  toggleLabel={t.skills.toggleToolset(label)}
+                />
+              )
+            })}
+          </ListColumn>
+          {/* TODO(i18n): literal until the UX settles. */}
+          <DetailColumn footer="Changes apply to new sessions.">
+            {activeToolset && (
+              <ToolsetDetail onConfiguredChange={refreshToolsets} toolCalls={toolCalls ?? {}} toolset={activeToolset} />
+            )}
+          </DetailColumn>
+        </MasterDetail>
+      )}
+      {archiveTarget && (
+        <ArchiveSkillConfirmDialog
+          onApply={() => {
+            const name = archiveTarget
+            const snapshot = skills
+
+            setSkills(current => current?.filter(skill => skill.name !== name) ?? current)
+
+            if (skillEditor?.name === name) {
+              setSkillEditor(null)
+            }
+
+            return () => setSkills(snapshot)
+          }}
+          onClose={() => setArchiveTarget(null)}
+          onFailure={(err, name) => notifyError(err, name)}
+          open
+          skillId={archiveTarget}
+          skillName={archiveTarget}
+        />
       )}
     </PageSearchShell>
   )
 }
 
-function StatusPill({ active, children }: { active: boolean; children: string }) {
+// Shared inspector header — mirrors Messaging's PlatformDetail so Skills and
+// Tools share one title/description block and tab switches don't jump.
+function DetailHeader({
+  description,
+  pills,
+  title
+}: {
+  description: React.ReactNode
+  pills?: React.ReactNode
+  title: string
+}) {
   return (
-    <Badge
-      className={
-        active ? 'bg-(--ui-bg-tertiary) text-(--ui-text-secondary)' : 'bg-(--ui-bg-quinary) text-(--ui-text-tertiary)'
-      }
-    >
-      {children}
-    </Badge>
+    <header>
+      <div className="flex min-h-6 flex-wrap items-center gap-2">
+        <h3 className="min-w-0 truncate text-[0.9375rem] font-semibold tracking-tight">{title}</h3>
+        {pills}
+      </div>
+      <p className="mt-1 text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
+        {description}
+      </p>
+    </header>
   )
 }
 
-function EmptyState({ title, description }: { title: string; description: string }) {
+function SkillDetail({ onArchive, onEdit, skill }: { onArchive: () => void; onEdit: () => void; skill: SkillInfo }) {
+  const { t } = useI18n()
+  // Only learned/local skills are the user's to rewrite or archive — bundled
+  // and hub skills are managed by their sources.
+  const editable = skill.provenance === 'agent'
+
   return (
-    <div className="grid min-h-52 place-items-center text-center">
-      <div>
-        <div className="text-sm font-medium">{title}</div>
-        <div className="mt-1 text-xs text-muted-foreground">{description}</div>
-      </div>
-    </div>
+    <>
+      <DetailHeader
+        description={asText(skill.description) || t.skills.noDescription}
+        pills={
+          <>
+            <PanelPill>{prettyName(categoryFor(skill))}</PanelPill>
+            {skill.provenance && skill.provenance !== 'bundled' && (
+              <PanelPill tone={skill.provenance === 'agent' ? 'good' : 'muted'}>
+                {PROVENANCE_LABEL[skill.provenance]}
+              </PanelPill>
+            )}
+          </>
+        }
+        title={skill.name}
+      />
+      {editable && (
+        <div className="flex items-center gap-2">
+          {/* TODO(i18n): literals until the UX settles. */}
+          <Button onClick={onEdit} size="xs" variant="text">
+            Edit
+          </Button>
+          <Button className="text-destructive hover:text-destructive" onClick={onArchive} size="xs" variant="text">
+            Archive
+          </Button>
+        </div>
+      )}
+    </>
+  )
+}
+
+function ToolsetDetail({
+  toolset,
+  toolCalls,
+  onConfiguredChange
+}: {
+  toolset: ToolsetInfo
+  toolCalls: Record<string, number>
+  onConfiguredChange: () => void
+}) {
+  const { t } = useI18n()
+  const tools = toolNames(toolset)
+  const label = toolsetDisplayLabel(toolset)
+
+  return (
+    <>
+      {/* "Configured" as a resting state is noise — only the warn state earns a pill. */}
+      <DetailHeader
+        description={asText(toolset.description) || t.skills.noDescription}
+        pills={!toolset.configured && <PanelPill tone="warn">{t.skills.needsKeys}</PanelPill>}
+        title={label}
+      />
+      {tools.length > 0 && (
+        <div className="flex flex-wrap gap-1">
+          {tools.map(name => (
+            <ToolChip key={name}>
+              {name}
+              {(toolCalls[name] ?? 0) > 0 && (
+                <span className="ml-1 text-(--ui-text-quaternary)">×{compactNumber(toolCalls[name])}</span>
+              )}
+            </ToolChip>
+          ))}
+        </div>
+      )}
+      {toolset.name === 'computer_use' && <ComputerUsePanel onConfiguredChange={onConfiguredChange} />}
+      <ToolsetConfigPanel key={toolset.name} onConfiguredChange={onConfiguredChange} toolset={toolset.name} />
+    </>
   )
 }
diff --git a/apps/desktop/src/app/skills/mcp-tab.tsx b/apps/desktop/src/app/skills/mcp-tab.tsx
new file mode 100644
index 000000000..dca667ff2
--- /dev/null
+++ b/apps/desktop/src/app/skills/mcp-tab.tsx
@@ -0,0 +1,1644 @@
+import {
+  SiFigma,
+  SiGithub,
+  SiGitlab,
+  SiLinear,
+  SiNotion,
+  SiPostgresql,
+  SiSentry,
+  SiStripe,
+  SiSupabase,
+  SiVercel
+} from '@icons-pack/react-simple-icons'
+import { useStore } from '@nanostores/react'
+import { useQuery } from '@tanstack/react-query'
+import { type ComponentType, type SVGProps, useEffect, useMemo, useRef, useState } from 'react'
+
+import { type CodeEditorApi } from '@/components/chat/code-editor'
+import { JsonDocumentEditor } from '@/components/chat/json-document-editor'
+import { LogTail } from '@/components/chat/log-tail'
+import { PageLoader } from '@/components/page-loader'
+import { Button } from '@/components/ui/button'
+import { Codicon } from '@/components/ui/codicon'
+import { ErrorBanner } from '@/components/ui/error-state'
+import { Input } from '@/components/ui/input'
+import { Switch } from '@/components/ui/switch'
+import { TextTab } from '@/components/ui/text-tab'
+import {
+  authMcpServer,
+  getActionStatus,
+  getLogs,
+  getMcpCatalog,
+  type HermesGateway,
+  installMcpCatalogEntry,
+  type McpCatalogEntry,
+  type McpTestResult,
+  saveMcpServers,
+  testMcpServer
+} from '@/hermes'
+import { useI18n } from '@/i18n'
+import { countEnabledTools, isToolEnabled, toggleToolInServer } from '@/lib/mcp-tool-filter'
+import { cn } from '@/lib/utils'
+import { notify, notifyError } from '@/store/notifications'
+import { $activeGatewayProfile, normalizeProfileKey } from '@/store/profile'
+import { $activeSessionId } from '@/store/session'
+import type { HermesConfigRecord } from '@/types/hermes'
+
+import { setHermesConfigCache, useHermesConfigRecord } from '../hooks/use-config-record'
+import { useOnProfileSwitch } from '../hooks/use-on-profile-switch'
+import { DetailPane, ICON_BUTTON, MASTER_DETAIL_WIDE_COLS } from '../master-detail'
+import { PanelAddButton, PanelEmpty } from '../overlays/panel'
+import { prettyName } from '../settings/helpers'
+import { useDeepLinkHighlight } from '../settings/use-deep-link-highlight'
+
+type McpServers = Record<string, Record<string, unknown>>
+
+// The editor always speaks the ecosystem's mcp.json document format — names
+// are the JSON keys, transport is inferred from `command` vs `url` — so any
+// README's "add this to your mcp.json" snippet pastes verbatim. Storage stays
+// the config.yaml `mcp_servers` map (CLI/TUI untouched).
+const STARTER_ENTRY = { command: 'npx', args: ['-y', '@modelcontextprotocol/server-filesystem', '/path/to/dir'] }
+
+const pretty = (value: unknown) => JSON.stringify(value, null, 2)
+const wrapDoc = (entries: McpServers) => pretty({ mcpServers: entries })
+
+const isServerShape = (value: Record<string, unknown>) =>
+  typeof value.command === 'string' || typeof value.url === 'string'
+
+// Cursor/Claude write `type`; Hermes reads `transport`. Normalize on the way
+// in so pasted configs behave identically under the CLI/TUI loader.
+function normalizeEntry(entry: Record<string, unknown>): Record<string, unknown> {
+  if (typeof entry.type === 'string' && entry.transport === undefined) {
+    const { type, ...rest } = entry
+
+    return { ...rest, transport: type }
+  }
+
+  return entry
+}
+
+/** Accepts `{"mcpServers": {...}}` (ecosystem), a bare name→config map, or throws. */
+function parseServersDoc(raw: string): McpServers {
+  const parsed = JSON.parse(raw) as unknown
+
+  if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
+    throw new Error('Expected a JSON object')
+  }
+
+  const doc = parsed as Record<string, unknown>
+
+  if (isServerShape(doc)) {
+    throw new Error('Wrap the server in {"mcpServers": {"name": …}} so it has a name')
+  }
+
+  const wrapper = doc.mcpServers ?? doc.mcp_servers
+
+  const map =
+    wrapper && typeof wrapper === 'object' && !Array.isArray(wrapper) ? (wrapper as McpServers) : (doc as McpServers)
+
+  return Object.fromEntries(Object.entries(map).map(([name, entry]) => [name, normalizeEntry(entry)]))
+}
+
+function getServers(config: HermesConfigRecord | null): McpServers {
+  const raw = config?.mcp_servers
+
+  return raw && typeof raw === 'object' && !Array.isArray(raw) ? (raw as McpServers) : {}
+}
+
+// The runtime gate is `enabled: false` — the same flag `hermes mcp` and the
+// agent's MCP loader read.
+const serverEnabled = (server: Record<string, unknown>) => server.enabled !== false
+
+const NEEDS_AUTH_RE = /\b(401|unauthorized|forbidden|invalid[_ ]?token|authentication|oauth)\b/i
+
+// Shared cache for the Nous-approved catalog — feeds both description enrichment
+// and the Catalog install view; invalidated after an install.
+const MCP_CATALOG_KEY = ['mcp-catalog'] as const
+
+// Probe results outlive the component: each probe is a REAL connect/disconnect
+// (stdio servers get spawned!), so re-entering the page must not re-probe the
+// fleet. Manual refresh / auth / toggle-on bypass the cache.
+const PROBE_TTL_MS = 5 * 60_000
+const probeCache = new Map<string, { at: number; result: McpTestResult }>()
+
+// A probe is only valid for one (profile, exact-config) pair. Keying the cache
+// by a fingerprint of the connection-relevant fields — plus the active profile
+// — means a same-name edit (url/command/env change) or a same-named server in
+// another profile MISSES the cache instead of showing a stale probe.
+const serverFingerprint = (server: Record<string, unknown>): string =>
+  JSON.stringify([server.url, server.command, server.args, server.env, server.headers, server.transport, server.auth])
+
+const probeKey = (name: string, server: Record<string, unknown> | undefined): string =>
+  `${normalizeProfileKey($activeGatewayProfile.get())}::${name}::${serverFingerprint(server ?? {})}`
+
+type Probe = McpTestResult | 'probing'
+
+type ServerStatus = 'off' | 'probing' | 'ok' | 'needs-auth' | 'error' | 'unknown'
+
+function statusOf(server: Record<string, unknown>, probe: Probe | undefined): ServerStatus {
+  if (!serverEnabled(server)) {
+    return 'off'
+  }
+
+  if (probe === 'probing') {
+    return 'probing'
+  }
+
+  if (!probe) {
+    return 'unknown'
+  }
+
+  if (probe.ok) {
+    return 'ok'
+  }
+
+  return NEEDS_AUTH_RE.test(probe.error ?? '') ? 'needs-auth' : 'error'
+}
+
+const STATUS_DOT: Record<ServerStatus, string> = {
+  ok: 'bg-emerald-500',
+  error: 'bg-red-500',
+  'needs-auth': 'bg-amber-500',
+  probing: 'animate-pulse bg-foreground/40',
+  off: 'bg-foreground/20',
+  unknown: 'bg-foreground/20'
+}
+
+// "12 tools enabled" / "25 tools, 1 prompts, 103 resources enabled" — only
+// the capabilities the server actually has. When a `server` config is passed,
+// the tool count reflects the per-tool include/exclude filter (what's actually
+// registered), not the raw discovered count.
+// TODO(i18n): literals until the UX settles.
+function capabilitySummary(probe: McpTestResult, server?: Record<string, unknown>): string {
+  const toolCount = server
+    ? countEnabledTools(
+        server,
+        probe.tools.map(tool => tool.name)
+      )
+    : probe.tools.length
+
+  const parts = [
+    `${toolCount} tools`,
+    ...(probe.prompts ? [`${probe.prompts} prompts`] : []),
+    ...(probe.resources ? [`${probe.resources} resources`] : [])
+  ]
+
+  return `${parts.join(', ')} enabled`
+}
+
+// TODO(i18n): literals until the UX settles.
+function statusLine(status: ServerStatus, probe: Probe | undefined, server?: Record<string, unknown>): string {
+  switch (status) {
+    case 'ok':
+      return capabilitySummary(probe as McpTestResult, server)
+
+    case 'probing':
+      return 'Connecting…'
+
+    case 'needs-auth':
+      return 'Needs authentication'
+
+    case 'error':
+      return 'Error'
+
+    case 'off':
+      return 'Off'
+
+    default:
+      return ''
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Cursor → server-block mapping. A tolerant character walker (not JSON.parse —
+// it must work mid-edit) that finds each server's key+object range inside the
+// mcpServers container, so the editor cursor selects a server and the block
+// can be highlighted.
+// ---------------------------------------------------------------------------
+
+interface ServerBlock {
+  from: number
+  name: string
+  to: number
+}
+
+function scanServerBlocks(text: string): ServerBlock[] {
+  const skipString = (index: number): number => {
+    let i = index + 1
+
+    while (i < text.length) {
+      if (text[i] === '\\') {
+        i += 2
+      } else if (text[i] === '"') {
+        return i + 1
+      } else {
+        i++
+      }
+    }
+
+    return i
+  }
+
+  // Container: the object after "mcpServers"/"mcp_servers", else the doc root.
+  let start = -1
+  const wrapper = /"mcpServers"|"mcp_servers"/.exec(text)
+
+  if (wrapper) {
+    let i = wrapper.index + wrapper[0].length
+
+    while (i < text.length && text[i] !== '{') {
+      i++
+    }
+
+    start = i
+  } else {
+    start = text.indexOf('{')
+  }
+
+  if (start < 0 || text[start] !== '{') {
+    return []
+  }
+
+  const blocks: ServerBlock[] = []
+  let i = start + 1
+
+  while (i < text.length) {
+    const ch = text[i]
+
+    if (ch === '}') {
+      break
+    }
+
+    if (ch !== '"') {
+      i++
+
+      continue
+    }
+
+    const keyStart = i
+    const keyEnd = skipString(i)
+    const name = text.slice(keyStart + 1, keyEnd - 1)
+    i = keyEnd
+
+    while (i < text.length && text[i] !== ':') {
+      i++
+    }
+
+    i++
+
+    while (i < text.length && /\s/.test(text[i])) {
+      i++
+    }
+
+    if (text[i] === '{') {
+      let depth = 0
+      let j = i
+
+      while (j < text.length) {
+        const c = text[j]
+
+        if (c === '"') {
+          j = skipString(j)
+
+          continue
+        }
+
+        if (c === '{') {
+          depth++
+        } else if (c === '}') {
+          depth--
+
+          if (depth === 0) {
+            j++
+
+            break
+          }
+        }
+
+        j++
+      }
+
+      blocks.push({ from: keyStart, name, to: j })
+      i = j
+    } else {
+      // Non-object value — skip to the next sibling.
+      while (i < text.length && text[i] !== ',' && text[i] !== '}') {
+        if (text[i] === '"') {
+          i = skipString(i)
+
+          continue
+        }
+
+        i++
+      }
+    }
+  }
+
+  return blocks
+}
+
+export function McpTab({ gateway }: { gateway: HermesGateway | null }) {
+  const { t } = useI18n()
+  const m = t.settings.mcp
+  const activeSessionId = useStore($activeSessionId)
+
+  // Shared config cache (see use-config-record): revisiting the tab paints the
+  // cached record instantly; mutations write through `setConfig` and stay
+  // visible to the other settings surfaces.
+  const {
+    data: config,
+    isLoading: configLoading,
+    isError: configFailed,
+    error: configError,
+    refetch: refetchConfig,
+    dataUpdatedAt: configUpdatedAt,
+    errorUpdatedAt: configErroredAt
+  } = useHermesConfigRecord()
+
+  const setConfig = setHermesConfigCache
+
+  // True from a profile switch until the config query resettles for the new
+  // profile. Until then `config` (and thus `servers`) still holds profile A's
+  // data, so any persist would write A's server list into B — block mutations.
+  const [profilePending, setProfilePending] = useState(false)
+  const staleConfigStamp = useRef<null | number>(null)
+  const staleErrorStamp = useRef<null | number>(null)
+
+  const [saving, setSaving] = useState(false)
+  const [probes, setProbes] = useState<Record<string, Probe>>({})
+  const probesRef = useRef(probes)
+  probesRef.current = probes
+
+  // Blocks the browser until an OAuth flow lands a token; also reset on profile
+  // switch, so declared up here alongside the other per-profile view state.
+  const [authing, setAuthing] = useState<null | string>(null)
+
+  // Master document draft. `docVersion` remounts the editor when the draft is
+  // regenerated programmatically (list-side mutations); `dirty` guards user
+  // edits from being clobbered by those regenerations.
+  const [draft, setDraft] = useState('')
+  const [dirty, setDirty] = useState(false)
+  const [docVersion, setDocVersion] = useState(0)
+  const [logSource, setLogSource] = useState<'stdio' | 'agent'>('stdio')
+
+  // Selection IS the editor cursor: whichever server block contains it is the
+  // configured server on the left. Cursor outside every block → the list.
+  const editorApi = useRef<CodeEditorApi | null>(null)
+  const [cursor, setCursor] = useState(0)
+  const blocks = useMemo(() => scanServerBlocks(draft), [draft])
+
+  const activeBlock = useMemo(
+    () => blocks.find(block => cursor >= block.from && cursor <= block.to) ?? null,
+    [blocks, cursor]
+  )
+
+  const selected = activeBlock?.name ?? null
+
+  const focusServer = (name: string) => {
+    const block = blocks.find(b => b.name === name)
+
+    if (block) {
+      // Land just inside the key so the block claims the cursor.
+      editorApi.current?.setCursor(block.from + 1)
+      setCursor(block.from + 1)
+    }
+  }
+
+  const servers = useMemo(() => getServers(config ?? null), [config])
+
+  // Config/document order, not alphabetical — the list mirrors mcp.json.
+  const names = useMemo(() => Object.keys(servers), [servers])
+
+  // Left column view: the configured fleet, or the Nous-approved catalog to
+  // install from. Both share one cached catalog fetch (also feeds description
+  // enrichment below), so switching between them never re-requests.
+  const [leftView, setLeftView] = useState<'catalog' | 'servers'>('servers')
+
+  // Key by active profile — installed/enabled badges are per-profile, so sharing
+  // one cache across profiles would flash the previous profile's state on switch.
+  const catalogQuery = useQuery({
+    queryKey: [...MCP_CATALOG_KEY, normalizeProfileKey(useStore($activeGatewayProfile))],
+    queryFn: getMcpCatalog,
+    staleTime: 5 * 60_000
+  })
+
+  const catalog = catalogQuery.data?.entries ?? []
+
+  const descriptionFor = (serverName: string, server: Record<string, unknown>): null | string => {
+    const lower = serverName.toLowerCase()
+
+    const match = catalog.find(
+      entry =>
+        entry.name.toLowerCase() === lower ||
+        (entry.url && entry.url === server.url) ||
+        (entry.command && entry.command === server.command)
+    )
+
+    return match?.description ?? null
+  }
+
+  const resetDraft = (entries: McpServers) => {
+    setDraft(wrapDoc(entries))
+    setDirty(false)
+    setDocVersion(version => version + 1)
+  }
+
+  // Mirror a list-side mutation into a dirty draft without losing the user's
+  // other edits. Unparseable drafts are left alone — save resolves the race.
+  const patchDraft = (mutate: (doc: McpServers) => McpServers) => {
+    try {
+      setDraft(wrapDoc(mutate(parseServersDoc(draft))))
+      setDocVersion(version => version + 1)
+    } catch {
+      // Draft is mid-edit / invalid JSON; the user's text wins until save.
+    }
+  }
+
+  // Seed the editor draft from config exactly once, the first time it lands.
+  // Background refetches thereafter update the list but must not clobber an
+  // in-progress edit — the draft is the user's until they save or reset.
+  const draftSeeded = useRef(false)
+
+  useEffect(() => {
+    if (config && !draftSeeded.current) {
+      draftSeeded.current = true
+      resetDraft(getServers(config))
+    }
+  }, [config])
+
+  // Bumped on every profile switch. Async probe/auth completions capture the
+  // epoch at call time and bail if it changed, so a slow profile-A request can't
+  // write its result into profile B's state after the user switched.
+  const profileEpoch = useRef(0)
+
+  // A profile switch invalidates the config query (see store/profile.ts), which
+  // refetches the new backend's mcp.json. Reset ALL per-profile view state — the
+  // draft (incl. a dirty one, so profile A's edits can't be saved into B), its
+  // seed latch, probes, and cursor — so everything reseeds for the new profile.
+  // The probe cache is already profile-keyed, so this just forces a re-probe.
+  useOnProfileSwitch(() => {
+    profileEpoch.current += 1
+    draftSeeded.current = false
+    setProbes({})
+    setCursor(0)
+    setAuthing(null)
+    setDirty(false)
+    setDraft('')
+    setDocVersion(version => version + 1)
+    // Mark stale until the config query replaces profile A's data — guards
+    // sidebar mutations from persisting A's server list into B mid-refetch.
+    staleConfigStamp.current = configUpdatedAt
+    staleErrorStamp.current = configErroredAt
+    setProfilePending(true)
+  })
+
+  // Clear once the config query settles for the new profile: dataUpdatedAt bumps
+  // on a fresh success, errorUpdatedAt on a fresh failure. Releasing on error too
+  // means a failed refetch surfaces the retry UI instead of leaving mutations
+  // silently no-op forever.
+  useEffect(() => {
+    if (
+      profilePending &&
+      staleConfigStamp.current !== null &&
+      (configUpdatedAt !== staleConfigStamp.current || configErroredAt !== staleErrorStamp.current)
+    ) {
+      setProfilePending(false)
+      staleConfigStamp.current = null
+      staleErrorStamp.current = null
+    }
+  }, [profilePending, configUpdatedAt, configErroredAt])
+
+  useDeepLinkHighlight({
+    block: 'nearest',
+    elementId: serverName => `mcp-server-${serverName}`,
+    onResolve: focusServer,
+    param: 'server',
+    ready: serverName => blocks.some(block => block.name === serverName)
+  })
+
+  const runProbe = async (serverName: string) => {
+    const epoch = profileEpoch.current
+    const key = probeKey(serverName, servers[serverName])
+    setProbes(current => ({ ...current, [serverName]: 'probing' }))
+
+    try {
+      const result = await testMcpServer(serverName)
+
+      // Drop the result if the profile changed mid-probe — it belongs to A.
+      if (profileEpoch.current !== epoch) {
+        return
+      }
+
+      probeCache.set(key, { at: Date.now(), result })
+      setProbes(current => ({ ...current, [serverName]: result }))
+    } catch (err) {
+      if (profileEpoch.current !== epoch) {
+        return
+      }
+
+      const result = { ok: false, error: err instanceof Error ? err.message : String(err), tools: [] }
+      probeCache.set(key, { at: Date.now(), result })
+      setProbes(current => ({ ...current, [serverName]: result }))
+    }
+  }
+
+  // First-class OAuth: opens the system browser, blocks until the flow lands a
+  // token (verified on disk — a friendly tools/list is not proof), then the
+  // auth result doubles as the probe (it carries the tool list).
+  const authenticate = async (serverName: string) => {
+    const epoch = profileEpoch.current
+    setAuthing(serverName)
+    setProbes(current => ({ ...current, [serverName]: 'probing' }))
+
+    try {
+      const result = await authMcpServer(serverName)
+
+      // Bail if the user switched profiles mid-flow — this result is profile A's.
+      if (profileEpoch.current !== epoch) {
+        return
+      }
+
+      setProbes(current => ({ ...current, [serverName]: result }))
+      // Cache under the POST-auth fingerprint (auth: oauth) on success — that's
+      // the config the mount effect will read back, so it hits this entry.
+      const probedConfig = result.ok ? { ...servers[serverName], auth: 'oauth' } : servers[serverName]
+      probeCache.set(probeKey(serverName, probedConfig), { at: Date.now(), result })
+
+      if (result.ok) {
+        // The endpoint persisted `auth: oauth` — mirror it locally.
+        const nextServers = { ...servers, [serverName]: { ...servers[serverName], auth: 'oauth' } }
+        setConfig(current => (current ? { ...current, mcp_servers: nextServers } : current))
+
+        // Mirror `auth: oauth` into the editor too. If we only reset a clean
+        // draft, a dirty draft keeps the pre-auth text and the next Save would
+        // drop the freshly-persisted auth field — so patch the dirty draft in
+        // place instead of clobbering the user's other edits.
+        if (dirty) {
+          patchDraft(doc => (doc[serverName] ? { ...doc, [serverName]: { ...doc[serverName], auth: 'oauth' } } : doc))
+        } else {
+          resetDraft(nextServers)
+        }
+
+        // TODO(i18n): literal until the UX settles.
+        notify({ kind: 'success', title: 'Authenticated', message: `${serverName}: ${result.tools.length} tools` })
+        void silentReload()
+      } else if (result.error) {
+        notifyError(new Error(result.error), serverName)
+      }
+    } catch (err) {
+      if (profileEpoch.current !== epoch) {
+        return
+      }
+
+      setProbes(current => ({
+        ...current,
+        [serverName]: { ok: false, error: err instanceof Error ? err.message : String(err), tools: [] }
+      }))
+      notifyError(err, serverName)
+    } finally {
+      if (profileEpoch.current === epoch) {
+        setAuthing(null)
+      }
+    }
+  }
+
+  // It should just know: probe enabled servers as config arrives — but through
+  // the cache, so revisiting the page doesn't respawn/reconnect the fleet.
+  useEffect(() => {
+    for (const [serverName, server] of Object.entries(servers)) {
+      if (!serverEnabled(server) || probesRef.current[serverName] !== undefined) {
+        continue
+      }
+
+      const cached = probeCache.get(probeKey(serverName, server))
+
+      if (cached && Date.now() - cached.at < PROBE_TTL_MS) {
+        setProbes(current => ({ ...current, [serverName]: cached.result }))
+      } else {
+        void runProbe(serverName)
+      }
+    }
+    // Re-run only when the server set changes; runProbe is recreated every
+    // render and adding it would re-probe the fleet on every keystroke.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [servers])
+
+  // Config writes reach live sessions immediately — no manual "Reload MCP".
+  const silentReload = async () => {
+    if (!gateway) {
+      return
+    }
+
+    try {
+      await gateway.request('reload.mcp', { confirm: true, session_id: activeSessionId ?? undefined })
+    } catch (err) {
+      notifyError(err, m.reloadFailed)
+    }
+  }
+
+  // Whole-map replace (NOT saveHermesConfig, which deep-merges and so can never
+  // delete a server, drop `enabled: false`, or remove a nested field). Only
+  // after the replace lands do we write the cache through + reload live sessions.
+  // Returns false when the profile switched mid-save: the write hit profile A's
+  // backend (correct), but the client-side cache/editor now belong to B, so the
+  // caller must skip its post-await writes.
+  const persist = async (nextServers: McpServers): Promise<boolean> => {
+    const epoch = profileEpoch.current
+    await saveMcpServers(nextServers)
+
+    if (profileEpoch.current !== epoch) {
+      return false
+    }
+
+    setConfig(current => ({ ...current, mcp_servers: nextServers }))
+    void silentReload()
+
+    return true
+  }
+
+  // A catalog install wrote a new server into config.yaml on the backend —
+  // refresh the catalog (installed state) and the config, then RECONCILE THE
+  // EDITOR DRAFT with the fresh servers. Without this a dirty draft (or even a
+  // clean one the seed never refreshes) would omit the new server, and the next
+  // whole-map Save would silently drop it.
+  const onCatalogInstalled = async () => {
+    void catalogQuery.refetch()
+    const { data } = await refetchConfig()
+    const nextServers = getServers(data ?? null)
+
+    if (dirty) {
+      // Keep the user's in-progress edits (doc wins), add any server the install
+      // introduced that the draft doesn't have yet.
+      patchDraft(doc => ({ ...nextServers, ...doc }))
+    } else {
+      resetDraft(nextServers)
+    }
+
+    void silentReload()
+  }
+
+  const withEnabled = (server: Record<string, unknown>, enabled: boolean) => {
+    const next = { ...server }
+
+    if (enabled) {
+      delete next.enabled
+    } else {
+      next.enabled = false
+    }
+
+    return next
+  }
+
+  const toggleServer = async (serverName: string, enabled: boolean) => {
+    if (profilePending) {
+      return
+    }
+
+    try {
+      if (!(await persist({ ...servers, [serverName]: withEnabled(servers[serverName], enabled) }))) {
+        return
+      }
+
+      if (dirty) {
+        patchDraft(doc => (doc[serverName] ? { ...doc, [serverName]: withEnabled(doc[serverName], enabled) } : doc))
+      } else {
+        resetDraft({ ...servers, [serverName]: withEnabled(servers[serverName], enabled) })
+      }
+
+      if (enabled) {
+        void runProbe(serverName)
+      }
+    } catch (err) {
+      notifyError(err, m.saveFailed)
+    }
+  }
+
+  // Per-tool gating writes the server's `tools.include`/`tools.exclude` and
+  // persists like any other config change (immediate reload of live sessions).
+  // The probe still lists every discovered tool; the filter decides which ones
+  // the agent actually registers.
+  const toggleTool = async (serverName: string, toolName: string) => {
+    const base = servers[serverName]
+
+    if (!base || profilePending) {
+      return
+    }
+
+    const next = toggleToolInServer(base, toolName)
+
+    try {
+      if (!(await persist({ ...servers, [serverName]: next }))) {
+        return
+      }
+
+      if (dirty) {
+        patchDraft(doc =>
+          doc[serverName] ? { ...doc, [serverName]: toggleToolInServer(doc[serverName], toolName) } : doc
+        )
+      } else {
+        resetDraft({ ...servers, [serverName]: next })
+      }
+    } catch (err) {
+      notifyError(err, m.saveFailed)
+    }
+  }
+
+  const removeServer = async (serverName: string) => {
+    if (profilePending) {
+      return
+    }
+
+    setSaving(true)
+
+    try {
+      const next = { ...servers }
+      delete next[serverName]
+
+      if (!(await persist(next))) {
+        return
+      }
+
+      if (dirty) {
+        patchDraft(doc => {
+          const patched = { ...doc }
+          delete patched[serverName]
+
+          return patched
+        })
+      } else {
+        resetDraft(next)
+      }
+
+      setCursor(0)
+    } catch (err) {
+      notifyError(err, m.removeFailed)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  // "+" seeds a starter entry into the document (unique key) and marks it
+  // dirty — naming happens in the editor, like every other mcp.json.
+  const addServer = () => {
+    if (profilePending) {
+      return
+    }
+
+    let base: McpServers
+
+    try {
+      base = parseServersDoc(draft)
+    } catch {
+      base = { ...servers }
+    }
+
+    let key = 'my-server'
+
+    for (let i = 2; key in base; i++) {
+      key = `my-server-${i}`
+    }
+
+    const nextDraft = wrapDoc({ ...base, [key]: STARTER_ENTRY })
+    setDraft(nextDraft)
+    setDirty(true)
+    setDocVersion(version => version + 1)
+
+    // Focus the fresh block once the editor remounts with the new doc.
+    const from = nextDraft.indexOf(`"${key}"`)
+
+    if (from >= 0) {
+      requestAnimationFrame(() => {
+        editorApi.current?.setCursor(from + 1)
+        setCursor(from + 1)
+      })
+    }
+  }
+
+  const saveDoc = async () => {
+    if (profilePending) {
+      return
+    }
+
+    let entries: McpServers
+
+    try {
+      entries = parseServersDoc(draft)
+    } catch (err) {
+      notifyError(err, m.invalidJson)
+
+      return
+    }
+
+    setSaving(true)
+
+    const prevServers = servers
+
+    try {
+      if (!(await persist(entries))) {
+        return
+      }
+
+      resetDraft(entries)
+      // Keep only probes for servers that survived AND kept the same config;
+      // removed OR edited entries drop their probe so the mount effect re-probes
+      // the new shape (the cache also misses on the changed fingerprint).
+      setProbes(current =>
+        Object.fromEntries(
+          Object.entries(current).filter(
+            ([name]) =>
+              name in entries && serverFingerprint(entries[name]) === serverFingerprint(prevServers[name] ?? {})
+          )
+        )
+      )
+      notify({ kind: 'success', title: m.savedTitle, message: m.savedMessage('mcp.json') })
+    } catch (err) {
+      notifyError(err, m.saveFailed)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  // Cached data paints instantly; a spinner only ever shows on the first-ever
+  // load, and a failed load gets a real retry — never a silent blank pane.
+  if (configFailed && !config) {
+    return (
+      <div className="flex h-full min-h-0 flex-1 items-center justify-center p-6">
+        <ErrorBanner className="max-w-sm">
+          <span className="flex flex-col gap-2">
+            {configError instanceof Error ? configError.message : m.failedLoad}
+            <Button className="self-start" onClick={() => void refetchConfig()} size="xs" variant="text">
+              {m.reload}
+            </Button>
+          </span>
+        </ErrorBanner>
+      </div>
+    )
+  }
+
+  if (!config) {
+    return <PageLoader className="min-h-24" label={configLoading ? m.loading : t.skills.loading} />
+  }
+
+  // Zero servers and a pristine doc: one centered invitation — with a path into
+  // the catalog (kept out when the user is already browsing it).
+  if (Object.keys(servers).length === 0 && !dirty && leftView === 'servers') {
+    return (
+      <div className="flex h-full min-h-0 flex-1">
+        <PanelEmpty
+          action={
+            <span className="flex items-center gap-2">
+              <Button onClick={addServer} size="sm">
+                {m.newServer}
+              </Button>
+              <Button onClick={() => setLeftView('catalog')} size="sm" variant="text">
+                {m.tabCatalog}
+              </Button>
+            </span>
+          }
+          description={m.emptyDesc}
+          icon="plug"
+          title={m.emptyTitle}
+        />
+      </div>
+    )
+  }
+
+  // Selection may reference an unsaved block (freshly pasted) — fall back to
+  // the draft's parsed entry so the config pane can still describe it.
+  const savedEntry = selected ? servers[selected] : undefined
+
+  const draftEntry = (() => {
+    if (!selected || savedEntry) {
+      return undefined
+    }
+
+    try {
+      return parseServersDoc(draft)[selected]
+    } catch {
+      return undefined
+    }
+  })()
+
+  const activeEntry = savedEntry ?? draftEntry
+
+  return (
+    <div className={cn('grid h-full min-h-0 grid-cols-1', MASTER_DETAIL_WIDE_COLS)}>
+      {/* LEFT: the focused block's server config, or the fleet list / catalog. */}
+      <aside className="flex min-h-0 flex-col overflow-hidden border-r border-(--ui-stroke-quaternary)">
+        {leftView === 'servers' && selected && activeEntry ? (
+          <ServerConfig
+            authing={authing === selected}
+            description={descriptionFor(selected, activeEntry)}
+            entry={activeEntry}
+            name={selected}
+            onAuthenticate={() => void authenticate(selected)}
+            onBack={() => setCursor(0)}
+            onProbe={() => void runProbe(selected)}
+            onRemove={() => void removeServer(selected)}
+            onToggle={checked => void toggleServer(selected, checked)}
+            onToggleTool={toolName => void toggleTool(selected, toolName)}
+            probe={probes[selected]}
+            saved={savedEntry !== undefined}
+            saving={saving}
+          />
+        ) : (
+          <div className="flex min-h-0 flex-1 flex-col p-2">
+            {/* Geometry mirrors ListStrip (mb-1 h-6 pl-2) so these tabs land on
+                the exact line the sort link occupies in the Skills/Tools views. */}
+            <div className="mb-1 flex h-6 shrink-0 items-center gap-3 pl-2 pr-1">
+              {(['servers', 'catalog'] as const).map(view => (
+                <TextTab
+                  active={leftView === view}
+                  className="h-6 px-0 text-[0.72rem]"
+                  key={view}
+                  onClick={() => setLeftView(view)}
+                >
+                  {view === 'servers' ? m.tabServers : m.tabCatalog}
+                </TextTab>
+              ))}
+            </div>
+            <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain [scrollbar-gutter:stable]">
+              {leftView === 'catalog' ? (
+                <McpCatalog entries={catalog} loading={catalogQuery.isLoading} onInstalled={onCatalogInstalled} />
+              ) : (
+                <>
+                  {names.map(serverName => {
+                    const server = servers[serverName]
+                    const status = statusOf(server, probes[serverName])
+
+                    return (
+                      <McpRow
+                        active={false}
+                        busy={saving}
+                        enabled={serverEnabled(server)}
+                        key={serverName}
+                        name={serverName}
+                        onProbe={() => void runProbe(serverName)}
+                        onRemove={() => void removeServer(serverName)}
+                        onSelect={() => focusServer(serverName)}
+                        onToggle={checked => void toggleServer(serverName, checked)}
+                        status={status}
+                        statusText={statusLine(status, probes[serverName], server)}
+                      />
+                    )
+                  })}
+                  <PanelAddButton label={m.newServer} onClick={addServer} />
+                </>
+              )}
+            </div>
+          </div>
+        )}
+      </aside>
+
+      {/* RIGHT: the mcp.json editor, logs hard-pinned below. */}
+      <main className="flex min-h-0 flex-col overflow-hidden">
+        <JsonDocumentEditor
+          apiRef={editorApi}
+          disabled={saving}
+          filePath="mcp.json"
+          header={
+            <>
+              mcp.json
+              {dirty && <span aria-hidden className="size-1.5 rounded-full bg-current/60" />}
+            </>
+          }
+          highlight={activeBlock ? { from: activeBlock.from, to: activeBlock.to } : null}
+          initialValue={draft}
+          onChange={next => {
+            setDraft(next)
+            setDirty(true)
+          }}
+          onCursorChange={setCursor}
+          onFormatJsonError={error => notifyError(new Error(error), m.invalidJson)}
+          onSave={() => void saveDoc()}
+          remountKey={docVersion}
+          trailing={
+            <Button disabled={saving || !dirty} onClick={() => void saveDoc()} size="xs">
+              {/* TODO(i18n): literal until the UX settles. */}
+              {saving ? t.common.saving : 'Save'}
+            </Button>
+          }
+        />
+        <DetailPane
+          actions={
+            <span className="flex items-center gap-1.5">
+              {(['stdio', 'agent'] as const).map(kind => (
+                <TextTab
+                  active={logSource === kind}
+                  className="h-5 px-0.5 text-[0.65rem]"
+                  key={kind}
+                  onClick={() => setLogSource(kind)}
+                >
+                  {kind}
+                </TextTab>
+              ))}
+            </span>
+          }
+          defaultHeight={176}
+          id="mcp-logs"
+          title={
+            // TODO(i18n): literal until the UX settles.
+            <span className="text-[0.68rem] font-normal text-muted-foreground/60">
+              {selected && savedEntry ? selected : 'All servers'}
+            </span>
+          }
+        >
+          <McpLogs server={selected && savedEntry ? selected : null} source={logSource} />
+        </DetailPane>
+      </main>
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Left column: one server's config (mirrors the block under the cursor).
+// ---------------------------------------------------------------------------
+
+function ServerConfig({
+  authing,
+  description,
+  entry,
+  name,
+  onAuthenticate,
+  onBack,
+  onProbe,
+  onRemove,
+  onToggle,
+  onToggleTool,
+  probe,
+  saved,
+  saving
+}: {
+  authing: boolean
+  description: null | string
+  entry: Record<string, unknown>
+  name: string
+  onAuthenticate: () => void
+  onBack: () => void
+  onProbe: () => void
+  onRemove: () => void
+  onToggle: (checked: boolean) => void
+  onToggleTool: (toolName: string) => void
+  probe: Probe | undefined
+  saved: boolean
+  saving: boolean
+}) {
+  const { t } = useI18n()
+  const m = t.settings.mcp
+  const status = statusOf(entry, probe)
+
+  // OAuth is only offered to servers that are actually OAuth-shaped. A server
+  // with `headers` uses API-key/bearer auth — a 401 there means a bad key, NOT
+  // "log in with OAuth"; routing it through the browser flow would wrongly
+  // rewrite its config to `auth: oauth`. So: explicit `auth: oauth` can re-auth
+  // on failure; an auth-less HTTP server may try OAuth on a 401; header servers
+  // never do.
+  const hasHeaderAuth = !!entry.headers && typeof entry.headers === 'object'
+
+  const canAuth =
+    typeof entry.url === 'string' &&
+    !hasHeaderAuth &&
+    (entry.auth === 'oauth' ? status === 'needs-auth' || status === 'error' : !entry.auth && status === 'needs-auth')
+
+  const summary = probe && probe !== 'probing' && probe.ok ? capabilitySummary(probe, entry) : null
+
+  return (
+    // p-2 matches the list view's container so flipping list ⇄ config keeps
+    // content anchored at the same origin.
+    <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain p-2 [scrollbar-gutter:stable]">
+      {/* Geometry cloned from McpRow so nothing jumps when flipping list ⇄
+          config: items-start with per-element top margins that reproduce the
+          row's h-11 centering exactly (h-5 controls → mt-3, size-6 avatar →
+          mt-2.5, h-4 switch → mt-3.5) no matter how tall the text column gets. */}
+      <div className="flex items-start gap-2 pr-1.5">
+        <Button
+          // TODO(i18n): literal until the UX settles.
+          aria-label="All servers"
+          className={cn('mt-3', ICON_BUTTON)}
+          onClick={onBack}
+          size="icon"
+          title="All servers"
+          variant="ghost"
+        >
+          <Codicon name="chevron-left" size="0.8125rem" />
+        </Button>
+        <McpAvatar className="mt-2.5" name={name} status={status} />
+        <div className="min-w-0 flex-1 pt-1">
+          <h3 className="min-w-0 truncate text-[0.9375rem] font-semibold tracking-tight">{prettyName(name)}</h3>
+          <p className="mt-0.5 truncate text-[0.68rem] text-(--ui-text-tertiary)">
+            {typeof entry.url === 'string' ? entry.url : [entry.command, ...((entry.args as string[]) ?? [])].join(' ')}
+          </p>
+          {summary && <p className="mt-0.5 text-[0.68rem] text-(--ui-text-tertiary)">{summary}</p>}
+        </div>
+        {saved && (
+          // Direct row children (no wrapper): the icons↔switch gap must be the
+          // row's own gap-2, byte-identical to McpRow.
+          <>
+            <ServerIconActions
+              className="mt-3"
+              onProbe={onProbe}
+              onRemove={onRemove}
+              probing={probe === 'probing'}
+              saving={saving}
+            />
+            <ServerSwitch
+              className="mt-3.5"
+              disabled={saving}
+              enabled={serverEnabled(entry)}
+              name={name}
+              onToggle={onToggle}
+            />
+          </>
+        )}
+      </div>
+
+      {description && (
+        <p className="mt-2 text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
+          {description}
+        </p>
+      )}
+
+      {canAuth && saved && (
+        <div className="mt-3 flex justify-end">
+          <Button disabled={authing} onClick={onAuthenticate} size="xs">
+            {/* TODO(i18n): literals until the UX settles. */}
+            {authing ? 'Waiting for browser…' : 'Authenticate'}
+          </Button>
+        </div>
+      )}
+      {!saved && (
+        // TODO(i18n): literal until the UX settles.
+        <p className="mt-3 text-[0.68rem] text-muted-foreground/60">Unsaved — save mcp.json to connect.</p>
+      )}
+
+      {status === 'probing' && <PageLoader className="min-h-24" label={t.skills.loading} />}
+
+      {/* No inline error dump — the status dot/line says "Error"/"Needs
+          authentication", and the actual failure lands in the logs pane below
+          (and the console). A big red block here just shouts the same thing. */}
+
+      {probe && probe !== 'probing' && probe.ok && probe.tools.length > 0 && (
+        <div className="mt-3 flex flex-wrap gap-1">
+          {/* Chip = a discovered tool; click to include/exclude it (struck
+              through when excluded, so it won't register). The probe always
+              lists every tool regardless of the filter.
+              TODO(i18n): titles are literal until the UX settles. */}
+          {probe.tools.map(tool => {
+            const on = isToolEnabled(entry, tool.name)
+
+            return (
+              <button
+                aria-pressed={on}
+                className={cn(
+                  'rounded-md px-1.5 py-0.5 font-mono text-[0.65rem] text-(--ui-text-tertiary) hover:text-foreground',
+                  saved ? 'cursor-pointer' : 'cursor-default',
+                  on ? 'bg-(--ui-bg-quinary)' : 'line-through opacity-70'
+                )}
+                disabled={!saved}
+                key={tool.name}
+                onClick={() => onToggleTool(tool.name)}
+                title={on ? `Disable ${tool.name}` : `Enable ${tool.name}`}
+                type="button"
+              >
+                {tool.name}
+              </button>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}
+
+// The enable toggle, shared by the row and the config header. It reflects the
+// configured `enabled` flag ONLY — full-strength when on, dimmed when off — so
+// "is this on?" reads instantly from config, never gated on a probe that can
+// take seconds (stdio servers spawn `npx`). Whether it's actually *connected*
+// is the status dot's job, not the switch's.
+function ServerSwitch({
+  className,
+  disabled,
+  enabled,
+  name,
+  onToggle
+}: {
+  className?: string
+  disabled: boolean
+  enabled: boolean
+  name: string
+  onToggle: (checked: boolean) => void
+}) {
+  return (
+    <Switch
+      aria-label={name}
+      checked={enabled}
+      className={cn('shrink-0 cursor-pointer', !enabled && 'opacity-60', className)}
+      disabled={disabled}
+      onCheckedChange={onToggle}
+      size="xs"
+      title={name}
+    />
+  )
+}
+
+// Refresh + delete, identical beside every toggle (rows and config header).
+function ServerIconActions({
+  className,
+  onProbe,
+  onRemove,
+  probing,
+  saving
+}: {
+  className?: string
+  onProbe: () => void
+  onRemove: () => void
+  probing: boolean
+  saving: boolean
+}) {
+  const { t } = useI18n()
+  const m = t.settings.mcp
+
+  return (
+    <span className={cn('flex items-center gap-0.5', className)}>
+      <Button
+        aria-label={m.reload}
+        className={ICON_BUTTON}
+        disabled={probing}
+        onClick={onProbe}
+        size="icon"
+        title={m.reload}
+        variant="ghost"
+      >
+        <Codicon name="refresh" size="0.8125rem" spinning={probing} />
+      </Button>
+      <Button
+        aria-label={m.remove}
+        className={cn(ICON_BUTTON, 'hover:text-destructive')}
+        disabled={saving}
+        onClick={onRemove}
+        size="icon"
+        title={m.remove}
+        variant="ghost"
+      >
+        <Codicon name="trash" size="0.8125rem" />
+      </Button>
+    </span>
+  )
+}
+
+// Small gray attribute chip (transport / auth / needs-build), matching the
+// catalog's flat row treatment.
+function CatalogTag({ children }: { children: string }) {
+  return (
+    <span className="rounded bg-(--ui-bg-tertiary) px-1.5 py-0.5 text-[0.6rem] text-(--ui-text-secondary)">
+      {children}
+    </span>
+  )
+}
+
+// The Nous-approved MCP catalog: one-click installs of curated servers, with an
+// inline prompt for any required credentials (never shows stored values). On
+// install the parent refetches config + catalog and reloads live sessions.
+function McpCatalog({
+  entries,
+  loading,
+  onInstalled
+}: {
+  entries: McpCatalogEntry[]
+  loading: boolean
+  onInstalled: () => void
+}) {
+  const { t } = useI18n()
+  const m = t.settings.mcp
+  const [installing, setInstalling] = useState<null | string>(null)
+  const [envDrafts, setEnvDrafts] = useState<Record<string, Record<string, string>>>({})
+  const [envOpenFor, setEnvOpenFor] = useState<null | string>(null)
+
+  const install = async (entry: McpCatalogEntry) => {
+    const required = entry.required_env.filter(env => env.required)
+    const draft = envDrafts[entry.name] ?? {}
+
+    // Reveal the credential prompt first; only error once it's shown and unfilled.
+    if (required.some(env => !draft[env.name]?.trim())) {
+      if (envOpenFor !== entry.name) {
+        setEnvOpenFor(entry.name)
+
+        return
+      }
+
+      notify({ kind: 'error', title: m.catalogEnvPrompt(entry.name), message: m.catalogEnvRequired })
+
+      return
+    }
+
+    setInstalling(entry.name)
+
+    try {
+      const res = await installMcpCatalogEntry(entry.name, draft)
+
+      // Git-backed entries clone in the background — keep the row busy and poll
+      // the action to completion before refetching / re-enabling, so a re-click
+      // can't spawn a second install over the first's tracked process. A non-zero
+      // exit is a real failure — surface it instead of a false success.
+      if (res.background && res.action) {
+        for (;;) {
+          const status = await getActionStatus(res.action, 1)
+
+          if (!status.running) {
+            if (status.exit_code !== 0) {
+              throw new Error(m.catalogInstallFailed(entry.name))
+            }
+
+            break
+          }
+
+          await new Promise(resolve => setTimeout(resolve, CATALOG_INSTALL_POLL_MS))
+        }
+      }
+
+      notify({ kind: 'success', title: m.catalogInstallStarted(entry.name), message: '' })
+      setEnvOpenFor(null)
+      onInstalled()
+    } catch (err) {
+      notifyError(err, m.catalogInstallFailed(entry.name))
+    } finally {
+      setInstalling(null)
+    }
+  }
+
+  if (loading) {
+    return <PageLoader className="min-h-24" label={m.catalogLoading} />
+  }
+
+  if (entries.length === 0) {
+    return <PanelEmpty description={m.catalogEmpty} icon="plug" title={m.tabCatalog} />
+  }
+
+  return (
+    <div className="flex flex-col">
+      {entries.map(entry => {
+        const draft = envDrafts[entry.name] ?? {}
+
+        return (
+          <div className="rounded-md px-2 py-2" key={entry.name}>
+            <div className="flex items-start gap-2">
+              {/* 2px nudge so the start-aligned avatar sits where McpRow's
+                  center-aligned one does — no jump when flipping Servers⇄Catalog. */}
+              <McpAvatar
+                className="mt-0.5"
+                name={entry.name}
+                status={entry.installed ? (entry.enabled ? 'ok' : 'off') : 'unknown'}
+              />
+              <div className="min-w-0 flex-1">
+                <div className="flex flex-wrap items-center gap-1.5">
+                  <span className="truncate text-[0.78rem] font-medium text-foreground/85">
+                    {prettyName(entry.name)}
+                  </span>
+                  <CatalogTag>{entry.transport}</CatalogTag>
+                  {entry.auth_type === 'oauth' && <CatalogTag>OAuth</CatalogTag>}
+                  {entry.auth_type === 'api_key' && <CatalogTag>API key</CatalogTag>}
+                  {entry.needs_install && !entry.installed && <CatalogTag>{m.catalogNeedsInstall}</CatalogTag>}
+                  {entry.installed && (
+                    <span className="text-[0.6rem] text-emerald-400">
+                      {entry.enabled ? m.catalogEnabled : m.catalogInstalled}
+                    </span>
+                  )}
+                </div>
+                <p className="mt-0.5 line-clamp-2 text-[0.68rem] text-muted-foreground/70">{entry.description}</p>
+                {envOpenFor === entry.name && entry.required_env.length > 0 && (
+                  <div className="mt-2 grid gap-2">
+                    {entry.required_env.map(env => (
+                      <label className="grid gap-1" key={env.name}>
+                        <span className="text-[0.62rem] text-muted-foreground">
+                          {env.prompt || env.name}
+                          {env.required ? ' *' : ''}
+                        </span>
+                        <Input
+                          className="h-7 text-xs"
+                          onChange={event =>
+                            setEnvDrafts(prev => ({
+                              ...prev,
+                              [entry.name]: { ...prev[entry.name], [env.name]: event.currentTarget.value }
+                            }))
+                          }
+                          type="password"
+                          value={draft[env.name] ?? ''}
+                        />
+                      </label>
+                    ))}
+                  </div>
+                )}
+              </div>
+              <Button
+                className="mt-0.5 shrink-0"
+                disabled={entry.installed || installing !== null}
+                onClick={() => void install(entry)}
+                size="xs"
+                variant="text"
+              >
+                {installing === entry.name
+                  ? m.catalogInstalling
+                  : entry.installed
+                    ? m.catalogInstalled
+                    : m.catalogInstall}
+              </Button>
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+const LOG_POLL_MS = 2000
+
+// Cadence for polling a background (git-bootstrap) catalog install to completion.
+const CATALOG_INSTALL_POLL_MS = 1500
+
+const STDIO_MARKER_RE = /^===== \[.*\] starting MCP server '(.+)' =====$/
+
+// Keep only the stdio-log sections belonging to one server. The shared file
+// has no per-line tags — sections start at that server's session marker and
+// run until the next marker (any server's).
+function filterStdioSections(lines: string[], server: string): string[] {
+  const out: string[] = []
+  let inSection = false
+
+  for (const line of lines) {
+    const marker = STDIO_MARKER_RE.exec(line.trim())
+
+    if (marker) {
+      inSection = marker[1] === server
+    }
+
+    if (inSection) {
+      out.push(line)
+    }
+  }
+
+  return out
+}
+
+// The MCP output channel — Cursor's "MCP Logs" equivalent, pinned under the
+// editor. Scope follows the cursor-selected server (all servers otherwise);
+// source controls live in the pane header. Body is the app's tool-output
+// surface: CodeCardBody typography + the floating hover-reveal copy button.
+function McpLogs({ server, source }: { server: null | string; source: 'stdio' | 'agent' }) {
+  const [lines, setLines] = useState<null | string[]>(null)
+  // A profile switch reroutes getLogs to the new backend; keying the effect on
+  // the active profile tears down the old poll (its `cancelled` flag blocks a
+  // late setLines) so profile A's logs never flash in B.
+  const activeProfile = useStore($activeGatewayProfile)
+
+  useEffect(() => {
+    let cancelled = false
+
+    const poll = async () => {
+      try {
+        const response =
+          source === 'stdio'
+            ? await getLogs({ file: 'mcp', lines: 500 })
+            : await getLogs({ file: 'agent', lines: 300, search: server ?? 'mcp' })
+
+        if (!cancelled) {
+          setLines(source === 'stdio' && server ? filterStdioSections(response.lines, server) : response.lines)
+        }
+      } catch {
+        // Backend momentarily unavailable — keep the last tail.
+      }
+    }
+
+    setLines(null)
+    void poll()
+    const timer = window.setInterval(() => void poll(), LOG_POLL_MS)
+
+    return () => {
+      cancelled = true
+      window.clearInterval(timer)
+    }
+  }, [server, source, activeProfile])
+
+  // TODO(i18n): literal until the UX settles.
+  return <LogTail emptyLabel="No output yet." lines={lines} />
+}
+
+// ---------------------------------------------------------------------------
+// Avatars + list rows
+// ---------------------------------------------------------------------------
+
+// Brand glyphs for well-known MCP providers, exactly the Messaging avatar
+// treatment (simpleicons on a 16% brand tint). Unknown servers fall back to
+// the same letter monogram Messaging uses.
+const MCP_BRAND_ICONS: Record<string, { Icon: ComponentType<SVGProps<SVGSVGElement>>; color: string }> = {
+  figma: { Icon: SiFigma, color: '#F24E1E' },
+  github: { Icon: SiGithub, color: '#181717' },
+  gitlab: { Icon: SiGitlab, color: '#FC6D26' },
+  linear: { Icon: SiLinear, color: '#5E6AD2' },
+  notion: { Icon: SiNotion, color: '#000000' },
+  postgres: { Icon: SiPostgresql, color: '#4169E1' },
+  postgresql: { Icon: SiPostgresql, color: '#4169E1' },
+  sentry: { Icon: SiSentry, color: '#362D59' },
+  stripe: { Icon: SiStripe, color: '#635BFF' },
+  supabase: { Icon: SiSupabase, color: '#3FCF8E' },
+  vercel: { Icon: SiVercel, color: '#000000' }
+}
+
+const brandFor = (name: string) => {
+  const lower = name.toLowerCase()
+
+  return MCP_BRAND_ICONS[lower] ?? Object.entries(MCP_BRAND_ICONS).find(([key]) => lower.includes(key))?.[1] ?? null
+}
+
+// PlatformAvatar (messaging), copied 1:1 — same size, radius, type scale, and
+// brand-tint treatment — plus a status dot overlay. Identity ladder: curated
+// brand glyph → letter monogram. We deliberately do NOT fetch remote favicons:
+// a configured MCP URL can be a private/internal host, and hitting Google's
+// favicon service for it would leak that hostname off-box.
+function McpAvatar({ className, name, status }: { className?: string; name: string; status: ServerStatus }) {
+  const brand = brandFor(name)
+
+  return (
+    <span
+      className={cn(
+        'relative inline-grid size-6 shrink-0 place-items-center rounded-md text-[length:var(--conversation-caption-font-size)] font-medium',
+        !brand && 'bg-(--ui-bg-tertiary) text-(--ui-text-tertiary)',
+        className
+      )}
+      style={brand ? { backgroundColor: `color-mix(in srgb, ${brand.color} 16%, transparent)` } : undefined}
+    >
+      {brand ? (
+        <brand.Icon aria-hidden className="size-3.5" style={{ color: brand.color }} />
+      ) : (
+        name.charAt(0).toUpperCase()
+      )}
+      <span
+        aria-hidden
+        className={cn(
+          'absolute -bottom-0.5 -right-0.5 size-2 rounded-full ring-2 ring-(--ui-chat-surface-background)',
+          STATUS_DOT[status]
+        )}
+      />
+    </span>
+  )
+}
+
+function McpRow({
+  active,
+  busy,
+  enabled,
+  name,
+  onProbe,
+  onRemove,
+  onSelect,
+  onToggle,
+  status,
+  statusText
+}: {
+  active: boolean
+  busy: boolean
+  enabled: boolean
+  name: string
+  onProbe: () => void
+  onRemove: () => void
+  onSelect: () => void
+  onToggle: (checked: boolean) => void
+  status: ServerStatus
+  statusText: string
+}) {
+  return (
+    <div
+      className={cn(
+        'group/row row-hover flex h-11 w-full shrink-0 items-center gap-2 rounded-md pl-2 pr-1.5 hover:text-foreground',
+        active ? 'bg-(--ui-row-active-background) text-foreground' : 'text-(--ui-text-secondary)'
+      )}
+      id={`mcp-server-${name}`}
+    >
+      <button
+        className="flex min-w-0 flex-1 cursor-pointer items-center gap-2 text-left"
+        onClick={onSelect}
+        type="button"
+      >
+        <McpAvatar name={name} status={status} />
+        <span className="min-w-0 flex-1">
+          <span
+            className={cn(
+              'block truncate text-[0.78rem]',
+              enabled ? 'font-medium text-foreground/85' : 'font-normal text-muted-foreground/60'
+            )}
+          >
+            {prettyName(name)}
+          </span>
+          <span className="block truncate text-[0.62rem] text-muted-foreground/50">{statusText}</span>
+        </span>
+      </button>
+      <ServerIconActions
+        className="opacity-0 transition-opacity focus-within:opacity-100 group-hover/row:opacity-100"
+        onProbe={onProbe}
+        onRemove={onRemove}
+        probing={status === 'probing'}
+        saving={busy}
+      />
+      <ServerSwitch disabled={busy} enabled={enabled} name={name} onToggle={onToggle} />
+    </div>
+  )
+}
diff --git a/apps/desktop/src/app/skills/store.ts b/apps/desktop/src/app/skills/store.ts
new file mode 100644
index 000000000..2105a5d45
--- /dev/null
+++ b/apps/desktop/src/app/skills/store.ts
@@ -0,0 +1,6 @@
+import { Codecs, persistentAtom } from '@/lib/persisted'
+
+// Per-view sort direction for the Capabilities lists — persisted so each tab
+// remembers most/least-used across navigations and restarts.
+export const $skillsSortDesc = persistentAtom('hermes.desktop.capabilities.skillsSortDesc', true, Codecs.bool)
+export const $toolsetsSortDesc = persistentAtom('hermes.desktop.capabilities.toolsetsSortDesc', true, Codecs.bool)
diff --git a/apps/desktop/src/app/starmap/color.ts b/apps/desktop/src/app/starmap/color.ts
index 0d5e44480..acc23fbde 100644
--- a/apps/desktop/src/app/starmap/color.ts
+++ b/apps/desktop/src/app/starmap/color.ts
@@ -76,7 +76,17 @@ function hslToRgb(h: number, s: number, l: number): Rgb {
   const m = l - c / 2
 
   const [r, g, b] =
-    hue < 60 ? [c, x, 0] : hue < 120 ? [x, c, 0] : hue < 180 ? [0, c, x] : hue < 240 ? [0, x, c] : hue < 300 ? [x, 0, c] : [c, 0, x]
+    hue < 60
+      ? [c, x, 0]
+      : hue < 120
+        ? [x, c, 0]
+        : hue < 180
+          ? [0, c, x]
+          : hue < 240
+            ? [0, x, c]
+            : hue < 300
+              ? [x, 0, c]
+              : [c, 0, x]
 
   return { b: Math.round((b + m) * 255), g: Math.round((g + m) * 255), r: Math.round((r + m) * 255) }
 }
@@ -106,7 +116,9 @@ export function computePalette(canvas: HTMLCanvasElement): Palette {
   const primary = resolveRgb(style.getPropertyValue('--theme-primary').trim() || style.color)
 
   const bg = resolveRgb(
-    style.getPropertyValue('--background').trim() || style.getPropertyValue('--dt-background').trim() || (darkTheme ? '#000' : '#fff')
+    style.getPropertyValue('--background').trim() ||
+      style.getPropertyValue('--dt-background').trim() ||
+      (darkTheme ? '#000' : '#fff')
   )
 
   return {
diff --git a/apps/desktop/src/app/starmap/index.tsx b/apps/desktop/src/app/starmap/index.tsx
index 7603006d8..28d825ac8 100644
--- a/apps/desktop/src/app/starmap/index.tsx
+++ b/apps/desktop/src/app/starmap/index.tsx
@@ -46,7 +46,12 @@ export function StarmapView({ onClose }: { onClose: () => void }) {
       ) : shown && shown.nodes.length === 0 && !imported ? (
         <PanelEmpty description={t.starmap.emptyDesc} icon="lightbulb" title={t.starmap.emptyTitle} />
       ) : shown ? (
-        <StarMap graph={shown} imported={imported !== null} onImport={setImported} onResetMap={() => setImported(null)} />
+        <StarMap
+          graph={shown}
+          imported={imported !== null}
+          onImport={setImported}
+          onResetMap={() => setImported(null)}
+        />
       ) : null}
     </Panel>
   )
diff --git a/apps/desktop/src/app/starmap/node-context-menu.tsx b/apps/desktop/src/app/starmap/node-context-menu.tsx
index dc7a1bece..7a5e75b32 100644
--- a/apps/desktop/src/app/starmap/node-context-menu.tsx
+++ b/apps/desktop/src/app/starmap/node-context-menu.tsx
@@ -1,10 +1,15 @@
-import { useState } from 'react'
+import { useRef, useState } from 'react'
 
+import { ArchiveSkillConfirmDialog, fireOptimistic } from '@/app/learning/archive-skill-confirm-dialog'
+import { CodeEditor } from '@/components/chat/code-editor'
 import { Button } from '@/components/ui/button'
 import { ConfirmDialog } from '@/components/ui/confirm-dialog'
 import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
-import { Textarea } from '@/components/ui/textarea'
 import { deleteLearningNode, editLearningNode, getLearningNode } from '@/hermes'
+import { notifyError } from '@/store/notifications'
+import { evictStarmapNode, loadStarmapGraph } from '@/store/starmap'
+
+import { useOnProfileSwitch } from '../hooks/use-on-profile-switch'
 
 export interface NodeMenuTarget {
   id: string
@@ -15,8 +20,8 @@ export interface NodeMenuTarget {
 }
 
 interface NodeContextMenuProps {
-  onChanged: () => void
   onClose: () => void
+  onNodeRemoved: () => void
   target: NodeMenuTarget | null
 }
 
@@ -27,13 +32,27 @@ interface EditState {
 }
 
 /** Right-click actions for a star-map node: edit (modal) or delete (confirm). */
-export function NodeContextMenu({ onChanged, onClose, target }: NodeContextMenuProps) {
+export function NodeContextMenu({ onClose, onNodeRemoved, target }: NodeContextMenuProps) {
   const [editing, setEditing] = useState<EditState | null>(null)
-  const [deleting, setDeleting] = useState<{ id: string; label: string } | null>(null)
+  const [deleting, setDeleting] = useState<Omit<NodeMenuTarget, 'x' | 'y'> | null>(null)
   const [loading, setLoading] = useState(false)
   const [saving, setSaving] = useState(false)
   const [error, setError] = useState<null | string>(null)
 
+  // Bumped on profile switch so an in-flight openEdit fetch from profile A can't
+  // reopen the editor with A's node content after switching to B.
+  const editEpoch = useRef(0)
+
+  // A profile switch swaps the backend under an open edit/delete dialog — its
+  // node id belongs to the previous profile, so a Save/Delete after the switch
+  // would hit the newly active profile. Close everything on switch.
+  useOnProfileSwitch(() => {
+    editEpoch.current += 1
+    setEditing(null)
+    setDeleting(null)
+    setError(null)
+  })
+
   const noun = target?.kind === 'memory' ? 'memory' : 'skill'
 
   const openEdit = async () => {
@@ -41,10 +60,17 @@ export function NodeContextMenu({ onChanged, onClose, target }: NodeContextMenuP
       return
     }
 
+    const epoch = editEpoch.current
     setLoading(true)
     setError(null)
+
     try {
       const detail = await getLearningNode(target.id)
+
+      if (editEpoch.current !== epoch) {
+        return
+      }
+
       setEditing({ content: detail.content, id: target.id, label: target.label })
       onClose()
     } catch (e) {
@@ -61,13 +87,16 @@ export function NodeContextMenu({ onChanged, onClose, target }: NodeContextMenuP
 
     setSaving(true)
     setError(null)
+
     try {
       const res = await editLearningNode(editing.id, editing.content)
+
       if (!res.ok) {
         throw new Error(res.message)
       }
+
       setEditing(null)
-      onChanged()
+      void loadStarmapGraph(true)
     } catch (e) {
       setError(e instanceof Error ? e.message : String(e))
     } finally {
@@ -82,13 +111,16 @@ export function NodeContextMenu({ onChanged, onClose, target }: NodeContextMenuP
       {menuOpen ? (
         <>
           <div className="fixed inset-0 z-50" onClick={onClose} onContextMenu={e => e.preventDefault()} />
+          {/* Styled to DropdownMenuContent/Item scale (rounded-lg card, p-1,
+              text-xs rows) — the hand-rolled fixed positioning stays because
+              the target is a canvas point, not a DOM anchor. */}
           <div
-            className="fixed z-50 min-w-36 overflow-hidden rounded-md border border-border bg-popover py-1 text-sm shadow-md"
+            className="fixed z-50 min-w-36 rounded-lg border border-(--ui-stroke-secondary) bg-[color-mix(in_srgb,var(--ui-bg-elevated)_96%,transparent)] p-1 shadow-md backdrop-blur-md"
             style={{ left: target.x, top: target.y }}
           >
-            <div className="truncate px-3 py-1 text-xs text-muted-foreground">{target.label}</div>
+            <div className="truncate px-2 py-1 text-[0.68rem] text-muted-foreground">{target.label}</div>
             <button
-              className="block w-full px-3 py-1 text-left hover:bg-accent hover:text-accent-foreground disabled:opacity-50"
+              className="block w-full cursor-pointer rounded-md px-2 py-1 text-left text-xs hover:bg-(--ui-control-active-background) hover:text-foreground disabled:opacity-50"
               disabled={loading}
               onClick={() => void openEdit()}
               type="button"
@@ -96,14 +128,14 @@ export function NodeContextMenu({ onChanged, onClose, target }: NodeContextMenuP
               Edit {noun}…
             </button>
             <button
-              className="block w-full px-3 py-1 text-left text-destructive hover:bg-destructive/10"
+              className="block w-full cursor-pointer rounded-md px-2 py-1 text-left text-xs text-destructive hover:bg-destructive/10"
               onClick={() => {
-                setDeleting({ id: target.id, label: target.label })
+                setDeleting({ id: target.id, kind: target.kind, label: target.label })
                 onClose()
               }}
               type="button"
             >
-              Delete {noun}
+              {target.kind === 'skill' ? 'Archive skill' : 'Delete memory'}
             </button>
           </div>
         </>
@@ -114,11 +146,19 @@ export function NodeContextMenu({ onChanged, onClose, target }: NodeContextMenuP
           <DialogHeader>
             <DialogTitle>Edit {editing?.label}</DialogTitle>
           </DialogHeader>
-          <Textarea
-            className="h-80 font-mono text-xs"
-            onChange={e => setEditing(prev => (prev ? { ...prev, content: e.target.value } : prev))}
-            value={editing?.content ?? ''}
-          />
+          <div className="h-80">
+            {editing && (
+              <CodeEditor
+                filePath={noun === 'skill' ? 'SKILL.md' : 'memory.md'}
+                framed
+                initialValue={editing.content}
+                key={editing.id}
+                onCancel={() => !saving && setEditing(null)}
+                onChange={content => setEditing(prev => (prev ? { ...prev, content } : prev))}
+                onSave={() => void save()}
+              />
+            )}
+          </div>
           {error ? <p className="text-xs text-destructive">{error}</p> : null}
           <DialogFooter>
             <Button disabled={saving} onClick={() => setEditing(null)} type="button" variant="ghost">
@@ -131,29 +171,49 @@ export function NodeContextMenu({ onChanged, onClose, target }: NodeContextMenuP
         </DialogContent>
       </Dialog>
 
-      <ConfirmDialog
-        confirmLabel="Delete"
-        description={
-          noun === 'skill'
-            ? 'The skill is archived and can be restored with `hermes curator restore`.'
-            : 'This memory is removed permanently.'
-        }
-        destructive
-        onClose={() => setDeleting(null)}
-        onConfirm={async () => {
-          if (!deleting) {
-            return
-          }
+      {deleting?.kind === 'skill' ? (
+        <ArchiveSkillConfirmDialog
+          onApply={() => {
+            onNodeRemoved()
 
-          const res = await deleteLearningNode(deleting.id)
-          if (!res.ok) {
-            throw new Error(res.message)
-          }
-          onChanged()
-        }}
-        open={Boolean(deleting)}
-        title={`Delete ${deleting?.label ?? ''}?`}
-      />
+            return evictStarmapNode(deleting.id)
+          }}
+          onClose={() => setDeleting(null)}
+          onFailure={(err, name) => notifyError(err, name)}
+          open
+          skillId={deleting.id}
+          skillName={deleting.label}
+        />
+      ) : (
+        <ConfirmDialog
+          confirmLabel="Delete"
+          description="This memory is removed permanently."
+          destructive
+          dismissOnConfirm
+          onClose={() => setDeleting(null)}
+          onConfirm={() => {
+            if (!deleting) {
+              return
+            }
+
+            const { id, label } = deleting
+            const rollback = evictStarmapNode(id)
+            onNodeRemoved()
+
+            fireOptimistic(
+              deleteLearningNode(id).then(res => {
+                if (!res.ok) {
+                  throw new Error(res.message)
+                }
+              }),
+              rollback,
+              err => notifyError(err, label)
+            )
+          }}
+          open={Boolean(deleting)}
+          title={`Delete ${deleting?.label ?? ''}?`}
+        />
+      )}
     </>
   )
 }
diff --git a/apps/desktop/src/app/starmap/share-code.test.ts b/apps/desktop/src/app/starmap/share-code.test.ts
index a011292d8..6cf33f869 100644
--- a/apps/desktop/src/app/starmap/share-code.test.ts
+++ b/apps/desktop/src/app/starmap/share-code.test.ts
@@ -16,9 +16,40 @@ function sampleGraph(): StarmapGraph {
       { body: 'Uses a worktree.', source: 'memory', timestamp: null, title: 'Env' }
     ],
     nodes: [
-      { category: 'devops', createdBy: 'agent', id: 'skill-a', kind: 'skill', label: 'skill-a', pinned: true, state: 'active', timestamp: 1_699_900_000, useCount: 7 },
-      { category: 'devops', createdBy: null, id: 'skill-b', kind: 'skill', label: 'skill-b', pinned: false, state: 'draft', timestamp: 1_699_950_000, useCount: 0 },
-      { category: 'memory', createdBy: null, id: 'memory:profile:0', kind: 'memory', label: 'A fact', memorySource: 'profile', pinned: false, state: 'active', timestamp: 1_700_000_000, useCount: 0 }
+      {
+        category: 'devops',
+        createdBy: 'agent',
+        id: 'skill-a',
+        kind: 'skill',
+        label: 'skill-a',
+        pinned: true,
+        state: 'active',
+        timestamp: 1_699_900_000,
+        useCount: 7
+      },
+      {
+        category: 'devops',
+        createdBy: null,
+        id: 'skill-b',
+        kind: 'skill',
+        label: 'skill-b',
+        pinned: false,
+        state: 'draft',
+        timestamp: 1_699_950_000,
+        useCount: 0
+      },
+      {
+        category: 'memory',
+        createdBy: null,
+        id: 'memory:profile:0',
+        kind: 'memory',
+        label: 'A fact',
+        memorySource: 'profile',
+        pinned: false,
+        state: 'active',
+        timestamp: 1_700_000_000,
+        useCount: 0
+      }
     ],
     stats: {}
   }
diff --git a/apps/desktop/src/app/starmap/share-code.ts b/apps/desktop/src/app/starmap/share-code.ts
index 6e1e0d70a..753171540 100644
--- a/apps/desktop/src/app/starmap/share-code.ts
+++ b/apps/desktop/src/app/starmap/share-code.ts
@@ -157,7 +157,9 @@ function readGraph(r: BitReader): StarmapGraph {
     counts.set(n.category, (counts.get(n.category) ?? 0) + 1)
   }
 
-  const clusters = [...counts.entries()].map(([category, count]) => ({ category, count })).sort((a, b) => b.count - a.count)
+  const clusters = [...counts.entries()]
+    .map(([category, count]) => ({ category, count }))
+    .sort((a, b) => b.count - a.count)
 
   // Memory cards are dropped (viz-only); a marker lets the UI tell a decoded map
   // apart from a freshly-scanned one.
diff --git a/apps/desktop/src/app/starmap/simulation.ts b/apps/desktop/src/app/starmap/simulation.ts
index f18fa67f1..7c6205282 100644
--- a/apps/desktop/src/app/starmap/simulation.ts
+++ b/apps/desktop/src/app/starmap/simulation.ts
@@ -80,7 +80,8 @@ function bucketStart(ts: number, { kind, step }: Unit): number {
   return Math.floor(d.getTime() / 1000)
 }
 
-const populatedStarts = (stamps: number[], u: Unit): number[] => [...new Set(stamps.map(t => bucketStart(t, u)))].sort((a, b) => a - b)
+const populatedStarts = (stamps: number[], u: Unit): number[] =>
+  [...new Set(stamps.map(t => bucketStart(t, u)))].sort((a, b) => a - b)
 
 // "Nice ticks" for time (à la D3/Heckbert): aim for a target ring count that
 // grows ~log2 with the span, then snap to the calendar interval whose POPULATED
@@ -118,7 +119,9 @@ function bucketLabel(ts: number, { kind, step }: Unit): string {
   try {
     const d = new Date(ts * 1000)
 
-    return step >= 12 ? String(d.getUTCFullYear()) : d.toLocaleDateString(undefined, { month: 'short', timeZone: 'UTC', year: 'numeric' })
+    return step >= 12
+      ? String(d.getUTCFullYear())
+      : d.toLocaleDateString(undefined, { month: 'short', timeZone: 'UTC', year: 'numeric' })
   } catch {
     return formatDate(ts)
   }
@@ -138,7 +141,10 @@ interface Layout {
 // or one instant): keep the legacy continuous mapping so nothing regresses.
 function evenLayout(recById: Map<string, number>, minTs: null | number, maxTs: null | number, timed: boolean): Layout {
   const rings: Ring[] = Array.from({ length: RING_STEPS + 1 }, (_, i) => ({
-    label: timed && minTs !== null && maxTs !== null ? formatDate(Math.round(minTs + (maxTs - minTs) * (i / RING_STEPS))) : null,
+    label:
+      timed && minTs !== null && maxTs !== null
+        ? formatDate(Math.round(minTs + (maxTs - minTs) * (i / RING_STEPS)))
+        : null,
     r: ringRadius(i),
     ratio: recForRatio(i / RING_STEPS)
   }))
@@ -163,7 +169,13 @@ function evenLayout(recById: Map<string, number>, minTs: null | number, maxTs: n
 
 // One equal-width ring per POPULATED calendar bucket; a bucket's nodes fill the
 // band INSIDE their ring (fanned by angle) and ignite staggered across it.
-function buildLayout(graph: StarmapGraph, recById: Map<string, number>, minTs: null | number, maxTs: null | number, timed: boolean): Layout {
+function buildLayout(
+  graph: StarmapGraph,
+  recById: Map<string, number>,
+  minTs: null | number,
+  maxTs: null | number,
+  timed: boolean
+): Layout {
   const stamps = graph.nodes.map(n => Number(n.timestamp)).filter(Number.isFinite)
 
   if (!(timed && minTs !== null && maxTs !== null && maxTs > minTs && stamps.length)) {
@@ -184,7 +196,12 @@ function buildLayout(graph: StarmapGraph, recById: Map<string, number>, minTs: n
   // decouples a ring's ignite moment from its position — a bursty gap makes a
   // ring appear bands ahead of the nodes that belong to it. Labels stay real dates.
   const last = Math.max(1, starts.length - 1)
-  const rings: Ring[] = starts.map((s, i) => ({ label: bucketLabel(s, unit), r: ringRadius(i), ratio: recForRatio(i / last) }))
+
+  const rings: Ring[] = starts.map((s, i) => ({
+    label: bucketLabel(s, unit),
+    r: ringRadius(i),
+    ratio: recForRatio(i / last)
+  }))
 
   // A node's bucket is its ring; undated nodes (rare, in an otherwise-timed
   // graph) fall to the newest ring so they still appear.
diff --git a/apps/desktop/src/app/starmap/star-map.tsx b/apps/desktop/src/app/starmap/star-map.tsx
index a1a5b652c..f16cc9db8 100644
--- a/apps/desktop/src/app/starmap/star-map.tsx
+++ b/apps/desktop/src/app/starmap/star-map.tsx
@@ -4,7 +4,6 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 import { useThemeEpoch } from '@/hooks/use-theme-epoch'
 import { createDoubleTapDetector, isSmartZoomWheel } from '@/lib/trackpad-gestures'
-import { loadStarmapGraph } from '@/store/starmap'
 import type { StarmapGraph } from '@/types/hermes'
 
 import { computePalette, memoryInkFor, resolveRgb, rgba } from './color'
@@ -929,12 +928,11 @@ export function StarMap({
       />
 
       <NodeContextMenu
-        onChanged={() => {
+        onClose={() => setMenuTarget(null)}
+        onNodeRemoved={() => {
           setMenuTarget(null)
           setSelectedId(null)
-          void loadStarmapGraph(true)
         }}
-        onClose={() => setMenuTarget(null)}
         target={menuTarget}
       />
 
diff --git a/apps/desktop/src/app/starmap/text.ts b/apps/desktop/src/app/starmap/text.ts
index 7b99f0599..c0563d046 100644
--- a/apps/desktop/src/app/starmap/text.ts
+++ b/apps/desktop/src/app/starmap/text.ts
@@ -1,3 +1,4 @@
+import { fmtDate } from '@/lib/time'
 import type { StarmapNode } from '@/types/hermes'
 
 export function formatDate(ts?: null | number): string {
@@ -6,7 +7,7 @@ export function formatDate(ts?: null | number): string {
   }
 
   try {
-    return new Date(ts * 1000).toLocaleDateString(undefined, { day: 'numeric', month: 'short', year: 'numeric' })
+    return fmtDate.format(new Date(ts * 1000))
   } catch {
     return 'unknown'
   }
diff --git a/apps/desktop/src/components/assistant-ui/clarify-tool.tsx b/apps/desktop/src/components/assistant-ui/clarify-tool.tsx
index 898e83cd6..ed3ee6be8 100644
--- a/apps/desktop/src/components/assistant-ui/clarify-tool.tsx
+++ b/apps/desktop/src/components/assistant-ui/clarify-tool.tsx
@@ -280,7 +280,11 @@ function ClarifyToolPending({ args }: ToolCallMessagePartProps) {
 
   if (loading) {
     return (
-      <ClarifyShell aria-label={copy.loadingQuestion} className="grid min-h-12 place-items-center px-2.5 py-3" role="status">
+      <ClarifyShell
+        aria-label={copy.loadingQuestion}
+        className="grid min-h-12 place-items-center px-2.5 py-3"
+        role="status"
+      >
         <Loader2 aria-hidden className="size-4 animate-spin text-(--ui-text-tertiary)" />
       </ClarifyShell>
     )
diff --git a/apps/desktop/src/components/assistant-ui/thread/timeline.tsx b/apps/desktop/src/components/assistant-ui/thread/timeline.tsx
index 6c1a8380f..5892e04f0 100644
--- a/apps/desktop/src/components/assistant-ui/thread/timeline.tsx
+++ b/apps/desktop/src/components/assistant-ui/thread/timeline.tsx
@@ -16,7 +16,7 @@ const VIEWPORT = '[data-slot="aui_thread-viewport"]'
 const HOVER_CLOSE_MS = 140
 
 const ROW_CLASS =
-  'relative flex w-full min-w-0 max-w-full cursor-pointer select-none overflow-hidden rounded-md px-2 py-1 text-left outline-hidden transition-colors duration-100 ease-out hover:bg-(--ui-row-hover-background) hover:transition-none'
+  'row-hover relative flex w-full min-w-0 max-w-full select-none overflow-hidden rounded-md px-2 py-1 text-left outline-hidden'
 
 // Surface (border-color/bg/shadow/blur) comes from the shared
 // `[data-slot='thread-timeline-popover']` rule in styles.css, so it's 1:1 with
diff --git a/apps/desktop/src/components/assistant-ui/thread/timestamp.ts b/apps/desktop/src/components/assistant-ui/thread/timestamp.ts
index f9df65019..f2b0689dd 100644
--- a/apps/desktop/src/components/assistant-ui/thread/timestamp.ts
+++ b/apps/desktop/src/components/assistant-ui/thread/timestamp.ts
@@ -1,11 +1,4 @@
-const TIME_FMT = new Intl.DateTimeFormat(undefined, { hour: 'numeric', minute: '2-digit' })
-
-const SHORT_FMT = new Intl.DateTimeFormat(undefined, {
-  day: 'numeric',
-  hour: 'numeric',
-  minute: '2-digit',
-  month: 'short'
-})
+import { fmtClock, fmtDayTime } from '@/lib/time'
 
 function startOfDay(d: Date): number {
   return new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime()
@@ -28,12 +21,12 @@ export function formatMessageTimestamp(
   const dayDelta = Math.round((startOfDay(new Date()) - startOfDay(date)) / 86_400_000)
 
   if (dayDelta === 0) {
-    return labels.today(TIME_FMT.format(date))
+    return labels.today(fmtClock.format(date))
   }
 
   if (dayDelta === 1) {
-    return labels.yesterday(TIME_FMT.format(date))
+    return labels.yesterday(fmtClock.format(date))
   }
 
-  return SHORT_FMT.format(date)
+  return fmtDayTime.format(date)
 }
diff --git a/apps/desktop/src/components/assistant-ui/tool/fallback-model/format.ts b/apps/desktop/src/components/assistant-ui/tool/fallback-model/format.ts
index c9a5c57fe..ba7581461 100644
--- a/apps/desktop/src/components/assistant-ui/tool/fallback-model/format.ts
+++ b/apps/desktop/src/components/assistant-ui/tool/fallback-model/format.ts
@@ -1,4 +1,3 @@
-
 export function isRecord(value: unknown): value is Record<string, unknown> {
   return Boolean(value && typeof value === 'object' && !Array.isArray(value))
 }
diff --git a/apps/desktop/src/components/assistant-ui/tool/fallback-model/index.ts b/apps/desktop/src/components/assistant-ui/tool/fallback-model/index.ts
index 62d6faccf..e027e97ef 100644
--- a/apps/desktop/src/components/assistant-ui/tool/fallback-model/index.ts
+++ b/apps/desktop/src/components/assistant-ui/tool/fallback-model/index.ts
@@ -1,6 +1,7 @@
 import { type ToolTitleKey, translateNow } from '@/i18n'
 import { normalizeExternalUrl } from '@/lib/external-link'
 import { summarizeShellCommand } from '@/lib/summarize-command'
+import { capitalize, normalize } from '@/lib/text'
 import { extractToolErrorMessage, formatToolResultSummary } from '@/lib/tool-result-summary'
 
 import {
@@ -13,12 +14,7 @@ import {
   prettyJson,
   unwrapToolPayload
 } from './format'
-import {
-  findFirstUrl,
-  hostnameOf,
-  looksLikePath,
-  looksLikeUrl
-} from './targets'
+import { findFirstUrl, hostnameOf, looksLikePath, looksLikeUrl } from './targets'
 import type {
   CountMetric,
   MessageRunningStateSlice,
@@ -217,13 +213,7 @@ export const selectMessageRunning = (state: MessageRunningStateSlice) =>
 function titleForTool(name: string): string {
   const normalized = name.replace(/^browser_/, '').replace(/^web_/, '')
 
-  return (
-    normalized
-      .split('_')
-      .filter(Boolean)
-      .map(part => `${part[0]?.toUpperCase() ?? ''}${part.slice(1)}`)
-      .join(' ') || name
-  )
+  return normalized.split('_').filter(Boolean).map(capitalize).join(' ') || name
 }
 
 const PREFIX_META: { icon?: string; labelKey: string; prefix: string; tone: ToolTone }[] = [
@@ -361,7 +351,7 @@ function countFromUnknown(value: unknown): null | number {
 }
 
 function singularizeNoun(noun: string): string {
-  const normalized = noun.trim().toLowerCase()
+  const normalized = normalize(noun)
 
   if (!normalized) {
     return ''
@@ -875,7 +865,7 @@ function cronjobSubtitle(argsRecord: Record<string, unknown>, resultRecord: Reco
 
   const action = firstStringField(argsRecord, ['action']) || 'manage'
   const name = firstStringField(resultRecord, ['name']) || firstStringField(argsRecord, ['name', 'job_id'])
-  const label = `${action[0]?.toUpperCase() ?? ''}${action.slice(1)}`
+  const label = capitalize(action)
 
   return name ? `${label} ${name}` : `Cron ${action}`
 }
diff --git a/apps/desktop/src/components/assistant-ui/tool/fallback-model/targets.ts b/apps/desktop/src/components/assistant-ui/tool/fallback-model/targets.ts
index 07e9a2c20..8423c77ad 100644
--- a/apps/desktop/src/components/assistant-ui/tool/fallback-model/targets.ts
+++ b/apps/desktop/src/components/assistant-ui/tool/fallback-model/targets.ts
@@ -1,4 +1,3 @@
-
 import type { ToolPart } from './types'
 
 export function looksLikeUrl(value: string): boolean {
diff --git a/apps/desktop/src/components/assistant-ui/tool/fallback-model/types.ts b/apps/desktop/src/components/assistant-ui/tool/fallback-model/types.ts
index a6969eee8..b4225310f 100644
--- a/apps/desktop/src/components/assistant-ui/tool/fallback-model/types.ts
+++ b/apps/desktop/src/components/assistant-ui/tool/fallback-model/types.ts
@@ -1,4 +1,3 @@
-
 export type ToolTone = 'agent' | 'browser' | 'default' | 'file' | 'image' | 'terminal' | 'web'
 export type ToolStatus = 'error' | 'running' | 'success' | 'warning'
 
diff --git a/apps/desktop/src/components/assistant-ui/tool/fallback.tsx b/apps/desktop/src/components/assistant-ui/tool/fallback.tsx
index acee3a18f..63e81c8c8 100644
--- a/apps/desktop/src/components/assistant-ui/tool/fallback.tsx
+++ b/apps/desktop/src/components/assistant-ui/tool/fallback.tsx
@@ -34,6 +34,7 @@ import { Tip } from '@/components/ui/tooltip'
 import { useI18n } from '@/i18n'
 import { PrettyLink, LinkifiedText as SharedLinkifiedText, urlSlugTitleLabel } from '@/lib/external-link'
 import { AlertCircle, CheckCircle2 } from '@/lib/icons'
+import { normalize } from '@/lib/text'
 import { useEnterAnimation } from '@/lib/use-enter-animation'
 import { cn } from '@/lib/utils'
 import { recordPreviewArtifact } from '@/store/preview-status'
@@ -336,7 +337,7 @@ function ToolEntry({ part }: ToolEntryProps) {
       .filter(Boolean)
 
     const [summary = '', ...rest] = chunks
-    const subtitleNorm = view.subtitle.trim().toLowerCase()
+    const subtitleNorm = normalize(view.subtitle)
     const summaryDuplicatesSubtitle = summary && summary.toLowerCase() === subtitleNorm
 
     if (summaryDuplicatesSubtitle) {
diff --git a/apps/desktop/src/components/chat/code-editor.tsx b/apps/desktop/src/components/chat/code-editor.tsx
index 4d81494f4..0059ed621 100644
--- a/apps/desktop/src/components/chat/code-editor.tsx
+++ b/apps/desktop/src/components/chat/code-editor.tsx
@@ -2,25 +2,90 @@ import { defaultKeymap, history, historyKeymap, indentWithTab } from '@codemirro
 import { bracketMatching, indentOnInput, LanguageDescription } from '@codemirror/language'
 import { languages } from '@codemirror/language-data'
 import { Compartment, EditorState } from '@codemirror/state'
-import { drawSelection, EditorView, keymap, lineNumbers } from '@codemirror/view'
-import { useEffect, useRef } from 'react'
+import { Decoration, drawSelection, EditorView, keymap, lineNumbers } from '@codemirror/view'
+import { type RefObject, useEffect, useRef } from 'react'
 
+import { tryFormatJson } from '@/lib/json-format'
 import { cn } from '@/lib/utils'
 import { useTheme } from '@/themes/context'
 
 import { githubEditorTheme } from './code-editor-theme'
 
+type FormatOutcome = { ok: true } | { ok: false; error: string }
+
+function applyFormatJson(view: EditorView, onError?: (error: string) => void): FormatOutcome {
+  const text = view.state.doc.toString()
+  const result = tryFormatJson(text)
+
+  if (!result.ok) {
+    onError?.(result.error)
+
+    return result
+  }
+
+  if (result.text !== text) {
+    view.dispatch({ changes: { from: 0, insert: result.text, to: view.state.doc.length } })
+  }
+
+  return { ok: true }
+}
+
+/** Imperative surface for callers that drive selection from outside (e.g. a
+ *  config list focusing its block in the document). */
+export interface CodeEditorApi {
+  formatJson: () => FormatOutcome
+  setCursor: (pos: number) => void
+}
+
 interface CodeEditorProps {
+  apiRef?: RefObject<CodeEditorApi | null>
   className?: string
+  /** Read-only: block edits (e.g. while a save is in flight) without unmounting. */
+  disabled?: boolean
+  /** Mod-Shift-F + `apiRef.formatJson()`. In-memory JSON docs only. */
+  formatJson?: boolean
+  /**
+   * Standalone chrome: rounded border on an outer shell. The CodeMirror surface
+   * inside is identical to pane previews (no extra inset). Off by default.
+   */
+  framed?: boolean
   filePath: string
+  /** Character range to wash with a subtle background (the "you are here" block). */
+  highlight?: null | { from: number; to: number }
   // Read once at mount. To load a different file or discard edits, remount the
   // component (give it a new React `key`) rather than pushing a new value in.
   initialValue: string
   onCancel?: () => void
   onChange: (value: string) => void
+  /** Button or Mod-Shift-F. */
+  onFormatJsonError?: (error: string) => void
+  /** Fires with the primary cursor offset whenever the selection moves. */
+  onCursorChange?: (pos: number) => void
   onSave?: () => void
 }
 
+// Focus treatment for the active range: a subtle wash on its lines, and
+// everything OUTSIDE dimmed — the document recedes so the block you're in
+// reads as "you are here".
+function blockHighlight(range: { from: number; to: number }) {
+  return EditorView.decorations.compute([], state => {
+    const clamp = (pos: number) => Math.max(0, Math.min(pos, state.doc.length))
+    const active = Decoration.line({ class: 'cm-hermes-active-block' })
+    // Inline style, not a theme class: theme rules are scoped per-extension
+    // and line opacity must never lose that fight.
+    const dimmed = Decoration.line({ attributes: { style: 'opacity:0.5;transition:opacity 120ms ease-out' } })
+    const first = state.doc.lineAt(clamp(range.from)).number
+    const last = state.doc.lineAt(clamp(range.to)).number
+    const marks = []
+
+    for (let n = 1; n <= state.doc.lines; n++) {
+      marks.push((n >= first && n <= last ? active : dimmed).range(state.doc.line(n).from))
+    }
+
+    return Decoration.set(marks)
+  })
+}
+
 function baseName(filePath: string): string {
   const cleaned = filePath.replace(/[\\/]+$/, '')
 
@@ -49,12 +114,16 @@ const LAYOUT_THEME = EditorView.theme({
     backgroundColor: 'transparent',
     height: '100%'
   },
+  // CM's base theme ships `.cm-content { padding: 4px 0 }` (~5px top/bottom).
+  // Zero it explicitly so pane + framed interiors match SourceView flush-top.
   '.cm-content': {
     fontFamily: MONO_FONT,
     fontSize: CODE_SIZE,
     fontWeight: '400',
     lineHeight: ROW_HEIGHT,
-    padding: '0'
+    padding: '0',
+    paddingBottom: '0',
+    paddingTop: '0'
   },
   '.cm-gutters': {
     backgroundColor: 'transparent',
@@ -85,27 +154,60 @@ const LAYOUT_THEME = EditorView.theme({
     fontSize: CODE_SIZE,
     lineHeight: ROW_HEIGHT,
     overflow: 'auto'
+  },
+  '.cm-hermes-active-block': {
+    backgroundColor: 'color-mix(in srgb, var(--dt-foreground) 5%, transparent)'
   }
 })
 
+// Framed = prose editing (SOUL.md, skills, memories): no line-number gutter (it
+// shoved text right and made the left inset dwarf the top), and zero the line's
+// own horizontal padding so the host's uniform `p-2` is the ONLY inset — even
+// breathing room on all four sides. Long lines wrap rather than scroll.
+const FRAMED_THEME = EditorView.theme({
+  '.cm-line': { padding: '0' }
+})
+
 // A deliberately small CodeMirror 6 surface for *spot edits* — not an IDE: line
 // numbers, history, selection, bracket matching, syntax highlighting. No fold
 // gutter, autocomplete, or active-line chrome, so it reads like the preview it
 // replaces. It owns its own buffer; the parent tracks dirty via `onChange` and
 // resets by remounting. ⌘/Ctrl+S and ⌘/Ctrl+Enter save; Esc cancels; the app's
 // light/dark mode is followed live without losing the cursor.
-export function CodeEditor({ className, filePath, initialValue, onCancel, onChange, onSave }: CodeEditorProps) {
+export function CodeEditor({
+  apiRef,
+  className,
+  disabled = false,
+  formatJson = false,
+  framed = false,
+  filePath,
+  highlight,
+  initialValue,
+  onCancel,
+  onChange,
+  onCursorChange,
+  onFormatJsonError,
+  onSave
+}: CodeEditorProps) {
   const { resolvedMode } = useTheme()
   const hostRef = useRef<HTMLDivElement | null>(null)
   const viewRef = useRef<EditorView | null>(null)
   const languageConf = useRef(new Compartment())
   const themeConf = useRef(new Compartment())
+  const highlightConf = useRef(new Compartment())
+  const editableConf = useRef(new Compartment())
   const onCancelRef = useRef(onCancel)
   const onChangeRef = useRef(onChange)
+  const onCursorChangeRef = useRef(onCursorChange)
+  const onFormatJsonErrorRef = useRef(onFormatJsonError)
   const onSaveRef = useRef(onSave)
+  const formatJsonRef = useRef(formatJson)
   onCancelRef.current = onCancel
   onChangeRef.current = onChange
+  onCursorChangeRef.current = onCursorChange
+  onFormatJsonErrorRef.current = onFormatJsonError
   onSaveRef.current = onSave
+  formatJsonRef.current = formatJson
 
   useEffect(() => {
     const host = hostRef.current
@@ -122,10 +224,21 @@ export function CodeEditor({ className, filePath, initialValue, onCancel, onChan
       return true
     }
 
+    const runFormatJson = () => {
+      if (!formatJsonRef.current || !viewRef.current) {
+        return false
+      }
+
+      applyFormatJson(viewRef.current, error => onFormatJsonErrorRef.current?.(error))
+
+      return true
+    }
+
     const state = EditorState.create({
       doc: initialValue,
       extensions: [
-        lineNumbers(),
+        // Gutter only outside framed mode — framed prose reads better flush.
+        ...(framed ? [] : [lineNumbers()]),
         history(),
         drawSelection(),
         indentOnInput(),
@@ -136,6 +249,7 @@ export function CodeEditor({ className, filePath, initialValue, onCancel, onChan
           indentWithTab,
           { key: 'Mod-s', preventDefault: true, run: save },
           { key: 'Mod-Enter', preventDefault: true, run: save },
+          ...(formatJson ? [{ key: 'Mod-Shift-f', preventDefault: true, run: runFormatJson }] : []),
           {
             key: 'Escape',
             run: () => {
@@ -151,17 +265,47 @@ export function CodeEditor({ className, filePath, initialValue, onCancel, onChan
         ]),
         languageConf.current.of([]),
         themeConf.current.of(githubEditorTheme(isDark)),
+        highlightConf.current.of([]),
+        editableConf.current.of(EditorState.readOnly.of(disabled)),
         EditorView.updateListener.of(update => {
           if (update.docChanged) {
             onChangeRef.current(update.state.doc.toString())
           }
+
+          if (update.selectionSet || update.docChanged) {
+            onCursorChangeRef.current?.(update.state.selection.main.head)
+          }
         }),
-        LAYOUT_THEME
+        LAYOUT_THEME,
+        // Standalone edits (SOUL.md, skills, memories) are prose, not code —
+        // wrap long lines instead of scrolling horizontally, and drop the gutter
+        // inset. Pane previews stay flush/scrolling to mirror their SourceView.
+        ...(framed ? [EditorView.lineWrapping, FRAMED_THEME] : [])
       ]
     })
 
     const view = new EditorView({ parent: host, state })
     viewRef.current = view
+
+    if (apiRef) {
+      apiRef.current = {
+        formatJson: () => {
+          const view = viewRef.current
+
+          if (!view || !formatJsonRef.current) {
+            return { ok: false, error: 'JSON formatting is not enabled for this editor' }
+          }
+
+          return applyFormatJson(view)
+        },
+        setCursor: pos => {
+          const clamped = Math.max(0, Math.min(pos, view.state.doc.length))
+          view.dispatch({ scrollIntoView: true, selection: { anchor: clamped } })
+          view.focus()
+        }
+      }
+    }
+
     // Focus on mount so entering edit mode (button or double-click) lands the
     // caret in the buffer ready to type, no extra click required.
     view.focus()
@@ -169,6 +313,10 @@ export function CodeEditor({ className, filePath, initialValue, onCancel, onChan
     return () => {
       view.destroy()
       viewRef.current = null
+
+      if (apiRef) {
+        apiRef.current = null
+      }
     }
     // Created once per mount; the parent remounts (via `key`) to load a new
     // file or discard. Theme/language are applied reactively below.
@@ -203,5 +351,41 @@ export function CodeEditor({ className, filePath, initialValue, onCancel, onChan
     })
   }, [resolvedMode])
 
-  return <div className={cn('h-full min-h-0 overflow-hidden', className)} ref={hostRef} />
+  const highlightFrom = highlight?.from
+  const highlightTo = highlight?.to
+
+  useEffect(() => {
+    viewRef.current?.dispatch({
+      effects: highlightConf.current.reconfigure(
+        highlightFrom !== undefined && highlightTo !== undefined
+          ? blockHighlight({ from: highlightFrom, to: highlightTo })
+          : []
+      )
+    })
+  }, [highlightFrom, highlightTo])
+
+  useEffect(() => {
+    viewRef.current?.dispatch({ effects: editableConf.current.reconfigure(EditorState.readOnly.of(disabled)) })
+  }, [disabled])
+
+  if (!framed) {
+    return <div className={cn('h-full min-h-0 overflow-hidden', className)} ref={hostRef} />
+  }
+
+  // Border on the shell only — inner body matches preview-file / DetailPane:
+  // <div className="min-h-0 flex-1 overflow-hidden"><CodeEditor /></div>
+  return (
+    <div
+      className={cn(
+        'flex h-full min-h-0 flex-col overflow-hidden rounded-md border border-(--ui-stroke-tertiary)',
+        className
+      )}
+    >
+      {/* Padding lives on the CM *mount node* itself — outside CodeMirror's
+          DOM entirely, so its `.cm-content { padding: 0 }` can't fight it. This
+          is why every prior attempt (Tailwind on .cm-content, scroller padding)
+          lost: they targeted CM-owned nodes. This div isn't one. */}
+      <div className="min-h-0 flex-1 overflow-hidden p-2" ref={hostRef} />
+    </div>
+  )
 }
diff --git a/apps/desktop/src/components/chat/intro.tsx b/apps/desktop/src/components/chat/intro.tsx
index f7784855e..6dc365e64 100644
--- a/apps/desktop/src/components/chat/intro.tsx
+++ b/apps/desktop/src/components/chat/intro.tsx
@@ -1,5 +1,7 @@
 import { type CSSProperties, useState } from 'react'
 
+import { capitalize, normalize } from '@/lib/text'
+
 import introCopyJsonl from './intro-copy.jsonl?raw'
 
 type IntroCopy = {
@@ -42,14 +44,14 @@ const FALLBACK_COPY: IntroCopy[] = [
 ]
 
 function normalizeKey(value?: string): string {
-  return (value || '').trim().toLowerCase()
+  return normalize(value)
 }
 
 function titleize(value: string): string {
   return value
     .split(/[-_\s]+/)
     .filter(Boolean)
-    .map(part => part.charAt(0).toUpperCase() + part.slice(1))
+    .map(capitalize)
     .join(' ')
 }
 
diff --git a/apps/desktop/src/components/chat/json-document-editor.tsx b/apps/desktop/src/components/chat/json-document-editor.tsx
new file mode 100644
index 000000000..cd4493e4d
--- /dev/null
+++ b/apps/desktop/src/components/chat/json-document-editor.tsx
@@ -0,0 +1,97 @@
+import type * as React from 'react'
+import { type RefObject, useRef } from 'react'
+
+import { CodeEditor, type CodeEditorApi } from '@/components/chat/code-editor'
+import { Button } from '@/components/ui/button'
+import { Codicon } from '@/components/ui/codicon'
+import { Tip } from '@/components/ui/tooltip'
+import { useI18n } from '@/i18n'
+import { cn } from '@/lib/utils'
+
+// Kept a string (not a shared CSS utility): the `size-5` prefix lets
+// tailwind-merge override <Button size="icon">'s larger built-in size.
+const ICON_BUTTON =
+  'size-5 cursor-pointer rounded-[4px] text-muted-foreground/70 hover:bg-(--ui-control-active-background) hover:text-foreground'
+
+interface JsonDocumentEditorProps {
+  apiRef?: RefObject<CodeEditorApi | null>
+  className?: string
+  disabled?: boolean
+  filePath?: string
+  header?: React.ReactNode
+  highlight?: null | { from: number; to: number }
+  initialValue: string
+  onChange: (value: string) => void
+  onCursorChange?: (pos: number) => void
+  onFormatJsonError: (error: string) => void
+  onSave?: () => void
+  remountKey?: number | string
+  trailing?: React.ReactNode
+}
+
+/** In-memory JSON editor — not for on-disk file previews in the right rail. */
+export function JsonDocumentEditor({
+  apiRef,
+  className,
+  disabled,
+  filePath = 'document.json',
+  header,
+  highlight,
+  initialValue,
+  onChange,
+  onCursorChange,
+  onFormatJsonError,
+  onSave,
+  remountKey,
+  trailing
+}: JsonDocumentEditorProps) {
+  const { t } = useI18n()
+  const localApi = useRef<CodeEditorApi | null>(null)
+  const editorApi = apiRef ?? localApi
+
+  return (
+    <div className={cn('flex min-h-0 flex-1 flex-col overflow-hidden', className)}>
+      <div className="flex h-8 shrink-0 items-center gap-2 px-3">
+        {header ? (
+          <span className="flex min-w-0 items-center gap-1.5 text-[0.68rem] text-(--ui-text-tertiary)">{header}</span>
+        ) : null}
+        <div className="ml-auto flex items-center gap-1">
+          <Tip label={t.common.formatJson}>
+            <Button
+              aria-label={t.common.formatJson}
+              className={ICON_BUTTON}
+              disabled={disabled}
+              onClick={() => {
+                const result = editorApi.current?.formatJson()
+
+                if (result && !result.ok) {
+                  onFormatJsonError(result.error)
+                }
+              }}
+              size="icon"
+              variant="ghost"
+            >
+              <Codicon name="json" size="0.8125rem" />
+            </Button>
+          </Tip>
+          {trailing}
+        </div>
+      </div>
+      <div className="min-h-0 flex-1">
+        <CodeEditor
+          apiRef={editorApi}
+          disabled={disabled}
+          filePath={filePath}
+          formatJson
+          highlight={highlight}
+          initialValue={initialValue}
+          key={remountKey}
+          onChange={onChange}
+          onCursorChange={onCursorChange}
+          onFormatJsonError={onFormatJsonError}
+          onSave={onSave}
+        />
+      </div>
+    </div>
+  )
+}
diff --git a/apps/desktop/src/components/chat/log-tail.tsx b/apps/desktop/src/components/chat/log-tail.tsx
new file mode 100644
index 000000000..e7debd275
--- /dev/null
+++ b/apps/desktop/src/components/chat/log-tail.tsx
@@ -0,0 +1,67 @@
+import { useEffect, useRef } from 'react'
+
+import { CodeCardBody } from '@/components/chat/code-card'
+import { CopyButton } from '@/components/ui/copy-button'
+import { cn } from '@/lib/utils'
+
+interface LogTailProps {
+  /** null = still loading (shows the loading glyph); [] = loaded-but-empty
+   *  (shows `emptyLabel`); non-empty renders as a tailing terminal log. */
+  lines: null | string[]
+  emptyLabel: string
+  className?: string
+}
+
+/** The shared terminal-log surface: CodeCardBody typography, a hover-reveal copy
+ *  button, and follow-the-tail scrolling (releases when the user scrolls up).
+ *  One component behind every log pane — MCP stdio/agent, hub action logs, etc.
+ *  — so they all read, copy, and scroll identically. */
+export function LogTail({ className, emptyLabel, lines }: LogTailProps) {
+  const scrollRef = useRef<HTMLDivElement | null>(null)
+  const stickRef = useRef(true)
+
+  useEffect(() => {
+    const el = scrollRef.current
+
+    if (el && stickRef.current) {
+      el.scrollTop = el.scrollHeight
+    }
+  }, [lines])
+
+  return (
+    <div className={cn('group/logs relative h-full min-h-0', className)}>
+      <CopyButton
+        appearance="inline"
+        className="absolute right-2.5 top-1.5 z-10 h-5 gap-0 rounded-md px-1 opacity-5 transition-opacity group-hover/logs:opacity-100 hover:opacity-100 focus-visible:opacity-100"
+        iconClassName="size-3"
+        showLabel={false}
+        text={() => (lines ?? []).join('\n')}
+      />
+      <div
+        className="h-full min-h-0 overflow-y-auto [scrollbar-gutter:stable]"
+        data-selectable-text="true"
+        onScroll={event => {
+          const el = event.currentTarget
+          stickRef.current = el.scrollHeight - el.scrollTop - el.clientHeight < 24
+        }}
+        ref={scrollRef}
+      >
+        {lines === null || lines.length === 0 ? (
+          <p className="px-2 py-1.5 font-mono text-[0.7rem] leading-relaxed text-muted-foreground/50">
+            {lines === null ? '…' : emptyLabel}
+          </p>
+        ) : (
+          <CodeCardBody>
+            <pre className="whitespace-pre-wrap break-words">
+              {lines.map((line, index) => (
+                <span className={cn('block', line.startsWith('=====') && 'mt-1 text-(--ui-text-tertiary)')} key={index}>
+                  {line}
+                </span>
+              ))}
+            </pre>
+          </CodeCardBody>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/apps/desktop/src/components/chat/status-row.tsx b/apps/desktop/src/components/chat/status-row.tsx
index 074417558..575fb5617 100644
--- a/apps/desktop/src/components/chat/status-row.tsx
+++ b/apps/desktop/src/components/chat/status-row.tsx
@@ -35,8 +35,9 @@ export function StatusRow({
   return (
     <div
       className={cn(
-        'group/status-row flex min-h-6 items-center gap-2 rounded-md px-1.5 py-1 hover:bg-(--ui-row-hover-background)',
-        onActivate && 'cursor-pointer',
+        'group/status-row flex min-h-6 items-center gap-2 rounded-md px-1.5 py-1',
+        // row-hover bundles cursor:pointer — only when the row actually activates.
+        onActivate ? 'row-hover' : 'hover:bg-(--ui-row-hover-background)',
         className
       )}
       onClick={onActivate}
diff --git a/apps/desktop/src/components/desktop-install-overlay.tsx b/apps/desktop/src/components/desktop-install-overlay.tsx
index c06c9f134..7bcbc4bf8 100644
--- a/apps/desktop/src/components/desktop-install-overlay.tsx
+++ b/apps/desktop/src/components/desktop-install-overlay.tsx
@@ -15,6 +15,7 @@ import type {
 } from '@/global'
 import { useI18n } from '@/i18n'
 import { ChevronDown, ChevronRight, iconSize } from '@/lib/icons'
+import { capitalize } from '@/lib/text'
 import { cn } from '@/lib/utils'
 
 /**
@@ -62,7 +63,7 @@ function formatStageName(name: string): string {
 
   return name
     .split('-')
-    .map((word, i) => (i === 0 ? word.charAt(0).toUpperCase() + word.slice(1) : word))
+    .map((word, i) => (i === 0 ? capitalize(word) : word))
     .join(' ')
 }
 
@@ -145,11 +146,7 @@ function StageRow({ descriptor, result, now }: StageRowProps) {
         {reason && state !== 'pending' && <p className="mt-0.5 truncate text-xs text-muted-foreground">{reason}</p>}
       </div>
       <span className="flex-shrink-0 text-xs tabular-nums text-muted-foreground">
-        {state === 'running'
-          ? elapsed
-            ? `${copy.stageStates[state]} · ${elapsed}`
-            : copy.stageStates[state]
-          : null}
+        {state === 'running' ? (elapsed ? `${copy.stageStates[state]} · ${elapsed}` : copy.stageStates[state]) : null}
         {state === 'succeeded' || state === 'skipped' ? formatDuration(result?.durationMs) : null}
         {state === 'failed' ? copy.stageStates[state] : null}
       </span>
diff --git a/apps/desktop/src/components/language-switcher.tsx b/apps/desktop/src/components/language-switcher.tsx
index a95c361d4..f54c85036 100644
--- a/apps/desktop/src/components/language-switcher.tsx
+++ b/apps/desktop/src/components/language-switcher.tsx
@@ -8,6 +8,7 @@ import { useIsMobile } from '@/hooks/use-mobile'
 import { type Locale, LOCALE_META, useI18n } from '@/i18n'
 import { triggerHaptic } from '@/lib/haptics'
 import { Check, ChevronDown, Globe } from '@/lib/icons'
+import { normalize } from '@/lib/text'
 import { cn } from '@/lib/utils'
 import { notifyError } from '@/store/notifications'
 
@@ -134,7 +135,7 @@ function LanguageCommand({
   // and do a plain substring filter that preserves array order — matching
   // model-picker.tsx. Match against the endonym, the (hidden) English name,
   // and the locale code so "日本"/"japanese"/"ja" all find Japanese.
-  const q = search.trim().toLowerCase()
+  const q = normalize(search)
 
   const filtered = allLocales.filter(
     ([code, meta]) =>
diff --git a/apps/desktop/src/components/model-picker.tsx b/apps/desktop/src/components/model-picker.tsx
index e2ca29083..37de510c6 100644
--- a/apps/desktop/src/components/model-picker.tsx
+++ b/apps/desktop/src/components/model-picker.tsx
@@ -4,6 +4,7 @@ import { useState } from 'react'
 import { useI18n } from '@/i18n'
 import { requestModelOptions } from '@/lib/model-options'
 import { currentPickerSelection } from '@/lib/model-status-label'
+import { normalize } from '@/lib/text'
 import type { ModelOptionProvider, ModelPricing } from '@/types/hermes'
 
 import type { HermesGateway } from '../hermes'
@@ -166,7 +167,7 @@ function ModelResults({
     return <div className="px-4 py-6 text-sm text-muted-foreground">{copy.noAuthenticatedProviders}</div>
   }
 
-  const q = search.trim().toLowerCase()
+  const q = normalize(search)
 
   const matches = (provider: ModelOptionProvider, model: string) =>
     !q ||
diff --git a/apps/desktop/src/components/model-visibility-dialog.tsx b/apps/desktop/src/components/model-visibility-dialog.tsx
index 05a5e92cb..8f1aad947 100644
--- a/apps/desktop/src/components/model-visibility-dialog.tsx
+++ b/apps/desktop/src/components/model-visibility-dialog.tsx
@@ -10,6 +10,7 @@ import type { HermesGateway } from '@/hermes'
 import { getGlobalModelOptions } from '@/hermes'
 import { useI18n } from '@/i18n'
 import { displayModelName, modelDisplayParts } from '@/lib/model-status-label'
+import { normalize } from '@/lib/text'
 import {
   $visibleModels,
   collapseModelFamilies,
@@ -63,7 +64,7 @@ export function ModelVisibilityDialog({
     setVisibleModels(toggleModelVisibility($visibleModels.get(), providers, provider.slug, model))
   }
 
-  const q = search.trim().toLowerCase()
+  const q = normalize(search)
 
   const matches = (provider: ModelOptionProvider, model: string) =>
     !q || `${model} ${provider.name} ${provider.slug} ${displayModelName(model)}`.toLowerCase().includes(q)
diff --git a/apps/desktop/src/components/notifications.tsx b/apps/desktop/src/components/notifications.tsx
index ad260d6e0..ec6051843 100644
--- a/apps/desktop/src/components/notifications.tsx
+++ b/apps/desktop/src/components/notifications.tsx
@@ -29,18 +29,34 @@ const tone: Record<NotificationKind, { icon: IconComponent; iconClass: string; v
 
 const STACK_SURFACE = 'pointer-events-auto border border-(--stroke-nous) bg-popover/95 shadow-nous backdrop-blur-md'
 
+function partitionNotifications(notifications: AppNotification[]) {
+  const defaultStack: AppNotification[] = []
+  const bottomRightStack: AppNotification[] = []
+
+  for (const notification of notifications) {
+    if (notification.placement === 'bottom-right') {
+      bottomRightStack.push(notification)
+    } else {
+      defaultStack.push(notification)
+    }
+  }
+
+  return { bottomRightStack, defaultStack }
+}
+
 export function NotificationStack() {
   const notifications = useStore($notifications)
+  const { bottomRightStack, defaultStack } = partitionNotifications(notifications)
   const { t } = useI18n()
   const lastNotificationIdRef = useRef<string | null>(null)
   const [expanded, setExpanded] = useState(false)
   const copy = t.notifications
 
   useEffect(() => {
-    if (notifications.length <= 1) {
+    if (defaultStack.length <= 1) {
       setExpanded(false)
     }
-  }, [notifications.length])
+  }, [defaultStack.length])
 
   useEffect(() => {
     const latest = notifications[0]
@@ -60,37 +76,58 @@ export function NotificationStack() {
     }
   }, [notifications])
 
-  if (notifications.length === 0) {
-    return null
-  }
+  return (
+    <>
+      {defaultStack.length > 0 && (
+        <TopCenterStack
+          copy={copy}
+          expanded={expanded}
+          notifications={defaultStack}
+          onToggleExpanded={() => setExpanded(v => !v)}
+        />
+      )}
+      {bottomRightStack.length > 0 && <BottomRightStack copy={copy} notifications={bottomRightStack} />}
+    </>
+  )
+}
 
-  const [latest, ...olderNotifications] = notifications
-  const overflowCount = olderNotifications.length
+// Portaled to <body> with a z above the Radix dialog layer (overlay z-[120],
+// content z-[130]) — see the top-center variant below for why.
+const REGION_BASE = 'pointer-events-none fixed z-[200] flex gap-2'
+
+// Primary stack: top-center, collapsed to the latest toast with a "+N more"
+// expander + clear-all — the noisy/important surface (errors, warnings,
+// action toasts). Without the portal it lives inside the React root subtree,
+// which any body-level dialog/overlay portal paints over — so a toast fired
+// while a dialog is open was invisible.
+function TopCenterStack({
+  copy,
+  expanded,
+  notifications,
+  onToggleExpanded
+}: {
+  copy: ReturnType<typeof useI18n>['t']['notifications']
+  expanded: boolean
+  notifications: AppNotification[]
+  onToggleExpanded: () => void
+}) {
+  const [latest, ...older] = notifications
 
-  // Portaled to <body> with a z above the Radix dialog layer (overlay z-[120],
-  // content z-[130]). Without the portal the stack lives inside the React root
-  // subtree, which any body-level dialog/overlay portal paints over — so a
-  // success toast fired while a dialog is open (or over an OverlayView page)
-  // was invisible. The titlebar-height var only exists inside the app shell
-  // scope, so fall back to its constant (34px) when mounted on <body>.
   return createPortal(
     <div
       aria-label={copy.region}
-      className="pointer-events-none fixed left-1/2 top-[calc(var(--titlebar-height,34px)+0.75rem)] z-[200] flex w-[min(32rem,calc(100%-2rem))] -translate-x-1/2 flex-col gap-2"
+      className={cn(
+        REGION_BASE,
+        'left-1/2 top-[calc(var(--titlebar-height,34px)+0.75rem)] w-[min(32rem,calc(100%-2rem))] -translate-x-1/2 flex-col'
+      )}
       role="region"
     >
       <NotificationItem notification={latest} />
-      {expanded && olderNotifications.map(n => <NotificationItem key={n.id} notification={n} />)}
-      {overflowCount > 0 && (
+      {expanded && older.map(n => <NotificationItem key={n.id} notification={n} />)}
+      {older.length > 0 && (
         <div className={cn(STACK_SURFACE, 'flex min-h-8 items-center justify-between rounded-lg px-3 text-xs')}>
-          <Button
-            className="-ml-2 font-medium"
-            onClick={() => setExpanded(v => !v)}
-            size="xs"
-            type="button"
-            variant="text"
-          >
-            {expanded ? copy.hide : copy.show} {copy.more(overflowCount)}
+          <Button className="-ml-2" onClick={onToggleExpanded} size="xs" type="button" variant="text">
+            {expanded ? copy.hide : copy.show} {copy.more(older.length)}
           </Button>
           <Button className="-mr-2" onClick={clearNotifications} size="xs" type="button" variant="text">
             {copy.clearAll}
@@ -102,6 +139,29 @@ export function NotificationStack() {
   )
 }
 
+// Ambient stack: bottom-right, every toast shown at once (routine confirmations
+// rarely queue up), newest on top, no expand/clear-all chrome.
+function BottomRightStack({
+  copy,
+  notifications
+}: {
+  copy: ReturnType<typeof useI18n>['t']['notifications']
+  notifications: AppNotification[]
+}) {
+  return createPortal(
+    <div
+      aria-label={copy.region}
+      className={cn(REGION_BASE, 'right-4 bottom-4 w-[min(24rem,calc(100%-2rem))] flex-col-reverse')}
+      role="region"
+    >
+      {notifications.map(n => (
+        <NotificationItem key={n.id} notification={n} />
+      ))}
+    </div>,
+    document.body
+  )
+}
+
 function NotificationItem({ notification }: { notification: AppNotification }) {
   const styles = tone[notification.kind]
   const Icon = styles.icon
@@ -114,7 +174,7 @@ function NotificationItem({ notification }: { notification: AppNotification }) {
       aria-live={notification.kind === 'error' ? 'assertive' : 'polite'}
       className={cn(STACK_SURFACE, 'grid-cols-[auto_minmax(0,1fr)_auto] pr-2.5')}
       role={notification.kind === 'error' ? 'alert' : 'status'}
-      variant="default"
+      variant={styles.variant}
     >
       {notification.icon ? (
         <Codicon className={styles.iconClass} name={notification.icon} size="1rem" />
@@ -128,14 +188,14 @@ function NotificationItem({ notification }: { notification: AppNotification }) {
           {hasDetail && <NotificationDetail detail={notification.detail || ''} />}
           {notification.action && (
             <Button
-              className="mt-1.5 bg-primary/15 font-medium text-primary hover:bg-primary/25 hover:text-primary"
+              className="mt-1.5"
               onClick={() => {
                 notification.action?.onClick()
                 dismissNotification(notification.id)
               }}
               size="xs"
               type="button"
-              variant="ghost"
+              variant="textStrong"
             >
               {notification.action.label}
             </Button>
@@ -172,7 +232,7 @@ function NotificationDetail({ detail }: { detail: string }) {
         </pre>
         <CopyButton
           appearance="inline"
-          className="mt-1 inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-[0.6875rem] text-muted-foreground hover:bg-accent hover:text-foreground"
+          className="mt-1 rounded px-1.5 py-0.5 text-[0.6875rem]"
           errorMessage={copy.copyDetailFailed}
           iconClassName="size-3"
           label={copy.copyDetail}
diff --git a/apps/desktop/src/components/onboarding/index.tsx b/apps/desktop/src/components/onboarding/index.tsx
index fb61cb83e..d6d08cb97 100644
--- a/apps/desktop/src/components/onboarding/index.tsx
+++ b/apps/desktop/src/components/onboarding/index.tsx
@@ -414,7 +414,7 @@ export function Picker({ ctx }: { ctx: OnboardingContext }) {
           options={apiKeyOptions}
         />
         {manual ? null : (
-          <div className="flex justify-center border-t border-(--ui-stroke-tertiary) pt-3">
+          <div className="flex justify-center pt-1">
             <ChooseLaterLink />
           </div>
         )}
diff --git a/apps/desktop/src/components/pet/floating-pet.tsx b/apps/desktop/src/components/pet/floating-pet.tsx
index 2bc9512ec..5ead9838d 100644
--- a/apps/desktop/src/components/pet/floating-pet.tsx
+++ b/apps/desktop/src/components/pet/floating-pet.tsx
@@ -2,12 +2,21 @@ import { useStore } from '@nanostores/react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 
 import { useGatewayRequest } from '@/app/gateway/hooks/use-gateway-request'
+import { useOnProfileSwitch } from '@/app/hooks/use-on-profile-switch'
 import { useRouteOverlayActive } from '@/app/hooks/use-route-overlay-active'
 import { persistString, storedString } from '@/lib/storage'
-import { $petAtRest, $petInfo, $petRoam, $petRoamDir, clearPetUnread, type PetInfo, petProfile, setPetInfo } from '@/store/pet'
+import {
+  $petAtRest,
+  $petInfo,
+  $petRoam,
+  $petRoamDir,
+  clearPetUnread,
+  type PetInfo,
+  petProfile,
+  setPetInfo
+} from '@/store/pet'
 import { resetPetGallery, setPetScale } from '@/store/pet-gallery'
 import { $petOverlayActive, initPetOverlayBridge, popOutPet, restorePetOverlay } from '@/store/pet-overlay'
-import { $activeGatewayProfile, normalizeProfileKey } from '@/store/profile'
 import { $gatewayState } from '@/store/session'
 import { isSecondaryWindow } from '@/store/windows'
 import { useTheme } from '@/themes/context'
@@ -205,22 +214,10 @@ export function FloatingPet() {
   // Pets are per-profile. When the active profile changes, drop the previous
   // profile's mascot + gallery cache so the poll above refetches the new
   // profile's pet (its config + pets dir resolve per-profile on the backend).
-  const profileRef = useRef(normalizeProfileKey($activeGatewayProfile.get()))
-  useEffect(
-    () =>
-      $activeGatewayProfile.subscribe(next => {
-        const key = normalizeProfileKey(next)
-
-        if (key === profileRef.current) {
-          return
-        }
-
-        profileRef.current = key
-        setPetInfo({ enabled: false })
-        resetPetGallery()
-      }),
-    []
-  )
+  useOnProfileSwitch(() => {
+    setPetInfo({ enabled: false })
+    resetPetGallery()
+  })
 
   // Wire the overlay control channel once, only in the primary window — the
   // pop-out overlay belongs to it (main.cjs positions it against the main
diff --git a/apps/desktop/src/components/pet/roam-behavior.test.ts b/apps/desktop/src/components/pet/roam-behavior.test.ts
index 91d65b9b7..668113cb3 100644
--- a/apps/desktop/src/components/pet/roam-behavior.test.ts
+++ b/apps/desktop/src/components/pet/roam-behavior.test.ts
@@ -1,6 +1,14 @@
 import { describe, expect, it } from 'vitest'
 
-import { chooseMove, dwellMs, type DwellRange, HOP_CHANCE, pickStrollTarget, REST_CHANCE, type Rng } from './roam-behavior'
+import {
+  chooseMove,
+  dwellMs,
+  type DwellRange,
+  HOP_CHANCE,
+  pickStrollTarget,
+  REST_CHANCE,
+  type Rng
+} from './roam-behavior'
 import type { Ledge } from './roam-geometry'
 
 // Deterministic rng that replays a fixed sequence (last value sticks).
diff --git a/apps/desktop/src/components/pet/roam-behavior.ts b/apps/desktop/src/components/pet/roam-behavior.ts
index 054ceca60..0eb7302b9 100644
--- a/apps/desktop/src/components/pet/roam-behavior.ts
+++ b/apps/desktop/src/components/pet/roam-behavior.ts
@@ -88,7 +88,7 @@ export function pickStrollTarget(ledge: Ledge, fromX: number, rng: Rng = Math.ra
   const roomLeft = fromX - ledge.left
   const roomRight = ledge.right - fromX
   // Usually head to the roomier side; the long tail of the coin doubles back.
-  const goRight = (rng() < STROLL_TOWARD_ROOM) === (roomRight >= roomLeft)
+  const goRight = rng() < STROLL_TOWARD_ROOM === roomRight >= roomLeft
   const room = Math.max(0, goRight ? roomRight : roomLeft)
   const minDist = Math.min(room, Math.max(span * STROLL_MIN_FRACTION, STROLL_MIN_PX))
   const dist = minDist + rng() * Math.max(0, room - minDist)
diff --git a/apps/desktop/src/components/pet/use-pet-roam.ts b/apps/desktop/src/components/pet/use-pet-roam.ts
index 24ab9c9f4..84d7b5386 100644
--- a/apps/desktop/src/components/pet/use-pet-roam.ts
+++ b/apps/desktop/src/components/pet/use-pet-roam.ts
@@ -3,7 +3,15 @@ import { type RefObject, useEffect } from 'react'
 import { $petMotion, $petRoamDir, type PetState } from '@/store/pet'
 
 import { chooseMove, dwellMs, PAUSE_DWELL, pickStrollTarget } from './roam-behavior'
-import { GROUND_EPS, groundTop, type Ledge, overlapsX, overlayLedge, resolveLedge, snapshotLedges } from './roam-geometry'
+import {
+  GROUND_EPS,
+  groundTop,
+  type Ledge,
+  overlapsX,
+  overlayLedge,
+  resolveLedge,
+  snapshotLedges
+} from './roam-geometry'
 
 interface Point {
   x: number
diff --git a/apps/desktop/src/components/remote-display-banner.tsx b/apps/desktop/src/components/remote-display-banner.tsx
index 39e25575d..6a4fb2743 100644
--- a/apps/desktop/src/components/remote-display-banner.tsx
+++ b/apps/desktop/src/components/remote-display-banner.tsx
@@ -1,42 +1,25 @@
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
 
-import { Alert, AlertDescription } from '@/components/ui/alert'
-import { Button } from '@/components/ui/button'
-import { Codicon } from '@/components/ui/codicon'
-import { useI18n } from '@/i18n'
-import { Info } from '@/lib/icons'
+import { translateNow } from '@/i18n'
+import { notify } from '@/store/notifications'
 
+// GPU acceleration is disabled under remote display (RDP/VNC/etc) to avoid
+// flicker. Surfaces once per launch as a persistent toast through the shared
+// notification stack — was a hand-rolled second top-center card at these same
+// exact fixed coordinates, which could overlap a real toast.
 export function RemoteDisplayBanner() {
-  const { t } = useI18n()
-  const [reason, setReason] = useState<string | null>(null)
-  const [dismissed, setDismissed] = useState(false)
-
   useEffect(() => {
-    void window.hermesDesktop?.getRemoteDisplayReason?.().then(result => setReason(result))
+    void window.hermesDesktop?.getRemoteDisplayReason?.().then(reason => {
+      if (reason) {
+        notify({
+          durationMs: 0,
+          kind: 'info',
+          message: translateNow('remoteDisplayBanner.message', reason),
+          placement: 'default'
+        })
+      }
+    })
   }, [])
 
-  if (!reason || dismissed) {
-    return null
-  }
-
-  return (
-    <div className="pointer-events-none fixed left-1/2 top-[calc(var(--titlebar-height,34px)+0.75rem)] z-[200] w-[min(32rem,calc(100%-2rem))] -translate-x-1/2">
-      <Alert className="pointer-events-auto grid-cols-[auto_minmax(0,1fr)_auto] border-(--stroke-nous) bg-popover/95 pr-2.5 shadow-nous backdrop-blur-md">
-        <Info className="text-muted-foreground" />
-        <AlertDescription className="col-start-2">
-          <p className="m-0">{t.remoteDisplayBanner.message(reason)}</p>
-        </AlertDescription>
-        <Button
-          aria-label={t.remoteDisplayBanner.dismiss}
-          className="col-start-3 -mr-1 text-muted-foreground"
-          onClick={() => setDismissed(true)}
-          size="icon-xs"
-          type="button"
-          variant="ghost"
-        >
-          <Codicon name="close" size="0.875rem" />
-        </Button>
-      </Alert>
-    </div>
-  )
+  return null
 }
diff --git a/apps/desktop/src/components/ui/confirm-dialog.tsx b/apps/desktop/src/components/ui/confirm-dialog.tsx
index 064230c21..becb958a9 100644
--- a/apps/desktop/src/components/ui/confirm-dialog.tsx
+++ b/apps/desktop/src/components/ui/confirm-dialog.tsx
@@ -26,6 +26,8 @@ interface ConfirmDialogProps {
   doneLabel?: string
   cancelLabel?: string
   destructive?: boolean
+  /** Close as soon as onConfirm resolves — for optimistic actions that finish in the background. */
+  dismissOnConfirm?: boolean
 }
 
 // Shared confirmation dialog: Enter confirms (from anywhere in the dialog),
@@ -41,7 +43,8 @@ export function ConfirmDialog({
   busyLabel,
   doneLabel,
   cancelLabel,
-  destructive = false
+  destructive = false,
+  dismissOnConfirm = false
 }: ConfirmDialogProps) {
   const { t } = useI18n()
   const [status, setStatus] = useState<'done' | 'idle' | 'saving'>('idle')
@@ -64,9 +67,21 @@ export function ConfirmDialog({
       return
     }
 
-    setStatus('saving')
     setError(null)
 
+    if (dismissOnConfirm) {
+      try {
+        await onConfirm()
+        onClose()
+      } catch (err) {
+        setError(err instanceof Error ? err.message : t.errors.genericFailure)
+      }
+
+      return
+    }
+
+    setStatus('saving')
+
     try {
       await onConfirm()
       setStatus('done')
diff --git a/apps/desktop/src/components/ui/empty-state.tsx b/apps/desktop/src/components/ui/empty-state.tsx
new file mode 100644
index 000000000..a034f56ce
--- /dev/null
+++ b/apps/desktop/src/components/ui/empty-state.tsx
@@ -0,0 +1,24 @@
+import { cn } from '@/lib/utils'
+
+// Canonical centered empty state (title + description). The default for "no
+// results / nothing here yet" page bodies. For richer master-detail lists that
+// want an icon + action, use PanelEmpty (overlays/panel); the file-tree's
+// inline uppercase error state is its own deliberately-distinct treatment.
+export function EmptyState({
+  title,
+  description,
+  className
+}: {
+  title: string
+  description?: string
+  className?: string
+}) {
+  return (
+    <div className={cn('grid min-h-48 place-items-center text-center', className)}>
+      <div>
+        <div className="text-sm font-medium">{title}</div>
+        {description && <div className="mt-1 text-xs text-muted-foreground">{description}</div>}
+      </div>
+    </div>
+  )
+}
diff --git a/apps/desktop/src/components/ui/error-state.tsx b/apps/desktop/src/components/ui/error-state.tsx
index 4beada7d2..99863535d 100644
--- a/apps/desktop/src/components/ui/error-state.tsx
+++ b/apps/desktop/src/components/ui/error-state.tsx
@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react'
 
 import { Codicon } from '@/components/ui/codicon'
+import { AlertTriangle } from '@/lib/icons'
 import { cn } from '@/lib/utils'
 
 // The single canonical error glyph (codicon's filled error mark). Use this
@@ -10,6 +11,23 @@ export function ErrorIcon({ className, size = '1.75rem' }: { className?: string;
   return <Codicon className={cn('text-destructive', className)} name="error" size={size} />
 }
 
+// Inline error banner for detail panes (born in Messaging's platform error,
+// now shared with the MCP config pane): warn glyph + tinted rounded box.
+// For centered full-surface failures use ErrorState below instead.
+export function ErrorBanner({ children, className }: { children: ReactNode; className?: string }) {
+  return (
+    <div
+      className={cn(
+        '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',
+        className
+      )}
+    >
+      <AlertTriangle className="mt-0.5 size-3.5 shrink-0" />
+      <span className="min-w-0 whitespace-pre-wrap break-words">{children}</span>
+    </div>
+  )
+}
+
 export interface ErrorStateProps {
   /** Optional actions row/stack rendered below the copy. */
   children?: ReactNode
diff --git a/apps/desktop/src/components/ui/search-field.tsx b/apps/desktop/src/components/ui/search-field.tsx
index 11071816a..142229b89 100644
--- a/apps/desktop/src/components/ui/search-field.tsx
+++ b/apps/desktop/src/components/ui/search-field.tsx
@@ -1,4 +1,4 @@
-import type { ReactNode, RefObject } from 'react'
+import { type ReactNode, type RefObject, useState } from 'react'
 
 import { Button } from '@/components/ui/button'
 import { Codicon } from '@/components/ui/codicon'
@@ -10,6 +10,12 @@ interface SearchFieldProps {
   placeholder: string
   value: string
   onChange: (value: string) => void
+  /**
+   * Data-driven placeholder suggestions ("Try \u201ccreative\u201d") — one is picked at
+   * random per mount, the nudge that search understands more than names.
+   * Falls back to `placeholder` when absent/empty.
+   */
+  hints?: string[]
   containerClassName?: string
   inputClassName?: string
   loading?: boolean
@@ -22,12 +28,14 @@ interface SearchFieldProps {
 /**
  * Shared search field used everywhere (sessions sidebar, pages, overlays,
  * command center, cron). No box — borderless until focus, then an underline.
- * Width/placement come from `containerClassName`.
+ * Rests at low opacity until focused or filled. Width/placement come from
+ * `containerClassName`.
  */
 export function SearchField({
   placeholder,
   value,
   onChange,
+  hints,
   containerClassName,
   inputClassName,
   loading = false,
@@ -39,25 +47,37 @@ export function SearchField({
   const { t } = useI18n()
   const clear = onClear ?? (() => onChange(''))
 
+  // One hint per mount, picked at random — fresh nudge every visit, no
+  // mid-page carousel.
+  const [hintIndex] = useState(() => Math.floor(Math.random() * 4096))
+  const hintCount = hints?.length ?? 0
+  const effectivePlaceholder = hintCount > 0 ? hints![hintIndex % hintCount] : placeholder
+
   return (
     <div
       className={cn(
-        'inline-flex max-w-full items-center gap-1.5 border-b border-transparent px-0.5 transition-colors focus-within:border-(--ui-stroke-secondary)',
+        // min-w-0 is load-bearing: without it the content-sized input sets the
+        // container's flex min-width and the field bulldozes its siblings
+        // instead of shrinking to fit its context.
+        'inline-flex min-w-0 max-w-full items-center gap-1.5 border-b border-transparent px-0.5 transition-[color,border-color,opacity]',
+        // Recede until the user reaches for it.
+        !value && 'opacity-30 focus-within:opacity-100',
         containerClassName
       )}
     >
       <Search className="pointer-events-none size-3.5 shrink-0 text-muted-foreground/70" />
       <input
-        aria-label={ariaLabel}
+        aria-label={ariaLabel ?? placeholder}
         className={cn(
           // `field-sizing: content` grows the input to fit the placeholder/typed
-          // text, capped by the container's max-width — no awkward empty space.
+          // text; min-w-0 lets it shrink back below content size when the
+          // context is narrower — long queries scroll inside the field.
           // text-xs matches the form controls (Input/Select via controlVariants).
-          'h-7 max-w-full bg-transparent text-xs text-foreground [field-sizing:content] placeholder:text-muted-foreground focus:outline-none',
+          'h-7 min-w-0 max-w-full bg-transparent text-xs text-foreground [field-sizing:content] placeholder:text-muted-foreground focus:outline-none',
           inputClassName
         )}
         onChange={event => onChange(event.target.value)}
-        placeholder={placeholder}
+        placeholder={effectivePlaceholder}
         ref={inputRef}
         type="text"
         value={value}
diff --git a/apps/desktop/src/components/ui/skeleton.tsx b/apps/desktop/src/components/ui/skeleton.tsx
index 14057fb79..a4b3e1d14 100644
--- a/apps/desktop/src/components/ui/skeleton.tsx
+++ b/apps/desktop/src/components/ui/skeleton.tsx
@@ -4,4 +4,15 @@ function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
   return <div className={cn('animate-pulse rounded-md bg-accent', className)} data-slot="skeleton" {...props} />
 }
 
-export { Skeleton }
+/** Inline pulsing chip standing in for a small count/badge while it loads. */
+function CountSkeleton({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      className={cn('inline-block h-2 w-3.5 translate-y-px animate-pulse rounded-sm bg-current/25', className)}
+      data-slot="count-skeleton"
+      {...props}
+    />
+  )
+}
+
+export { CountSkeleton, Skeleton }
diff --git a/apps/desktop/src/components/ui/tab-dropdown.tsx b/apps/desktop/src/components/ui/tab-dropdown.tsx
new file mode 100644
index 000000000..5e2070100
--- /dev/null
+++ b/apps/desktop/src/components/ui/tab-dropdown.tsx
@@ -0,0 +1,137 @@
+import { Fragment } from 'react'
+
+import { Codicon } from '@/components/ui/codicon'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu'
+import { CountSkeleton } from '@/components/ui/skeleton'
+import { TextTab, TextTabMeta } from '@/components/ui/text-tab'
+import { compactNumber } from '@/lib/format'
+import type { IconComponent } from '@/lib/icons'
+import { cn } from '@/lib/utils'
+
+// A count badge beside a tab label. `null` = still loading (pulsing chip, not a
+// fake 0); numbers render compact; strings pass through; `undefined` = no badge.
+export type TabMeta = number | string | null | undefined
+
+export function tabMetaContent(meta: number | string | null) {
+  return meta === null ? <CountSkeleton /> : typeof meta === 'number' ? compactNumber(meta) : meta
+}
+
+export interface TabDropdownItem {
+  active: boolean
+  id: string
+  icon?: IconComponent
+  /** Indent as a sub-item (flattened nested nav). */
+  indent?: boolean
+  label: string
+  meta?: number | string | null
+  onSelect: () => void
+  /** Draw a separator above this item (group break). */
+  separatorBefore?: boolean
+}
+
+function TabDropdownIcon({ icon: Icon, indent }: { icon: IconComponent; indent?: boolean }) {
+  return <Icon className={cn('shrink-0 text-muted-foreground/80', indent ? 'size-3.5' : 'size-4')} />
+}
+
+/** The Capabilities tab dropdown: a borderless "Label ⌄" trigger and a menu of
+ *  labels with right-aligned meta. The single narrow-width collapse used by
+ *  every responsive tab/nav in the app. */
+export function TabDropdown({
+  align = 'center',
+  className,
+  items
+}: {
+  align?: 'center' | 'end' | 'start'
+  className?: string
+  items: TabDropdownItem[]
+}) {
+  const active = items.find(item => item.active) ?? items[0]
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button
+          className="flex h-7 cursor-pointer items-center gap-1.5 px-1 text-[length:var(--conversation-caption-font-size)] font-medium text-foreground [-webkit-app-region:no-drag]"
+          type="button"
+        >
+          {active?.icon && <TabDropdownIcon icon={active.icon} indent={active.indent} />}
+          <span className="min-w-0 truncate">{active?.label}</span>
+          {active?.meta !== undefined && <TextTabMeta>{tabMetaContent(active.meta)}</TextTabMeta>}
+          <Codicon className="text-muted-foreground" name="chevron-down" size="0.75rem" />
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align={align} className={cn('w-44', className)} sideOffset={6}>
+        {items.map((item, index) => (
+          <Fragment key={item.id}>
+            {item.separatorBefore && index > 0 && <DropdownMenuSeparator />}
+            <DropdownMenuItem
+              className={cn(item.indent && 'pl-6', item.active && 'text-foreground')}
+              onSelect={item.onSelect}
+            >
+              {item.icon && <TabDropdownIcon icon={item.icon} indent={item.indent} />}
+              <span className="min-w-0 flex-1 truncate">{item.label}</span>
+              {item.meta !== undefined && (
+                <span className="text-xs text-muted-foreground">{tabMetaContent(item.meta)}</span>
+              )}
+            </DropdownMenuItem>
+          </Fragment>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+export interface ResponsiveTab {
+  id: string
+  label: string
+  meta?: number | string | null
+}
+
+/** Centered/left `TextTab` row on wide viewports that collapses into a single
+ *  `TabDropdown` once the header can't fit it — the shared behavior behind the
+ *  Capabilities page tabs, log-source switches, etc. */
+export function ResponsiveTabs({
+  align = 'center',
+  onChange,
+  tabs,
+  value,
+  wideClassName
+}: {
+  align?: 'center' | 'end' | 'start'
+  onChange: (id: string) => void
+  tabs: ResponsiveTab[]
+  value: string
+  /** Extra classes for the wide `TextTab` row (e.g. `justify-center`). */
+  wideClassName?: string
+}) {
+  return (
+    <>
+      <div className={cn('hidden min-w-0 flex-wrap items-center gap-x-2 gap-y-1 md:flex', wideClassName)}>
+        {tabs.map(tab => (
+          <TextTab active={tab.id === value} key={tab.id} onClick={() => onChange(tab.id)}>
+            {tab.label}
+            {tab.meta !== undefined && <TextTabMeta>{tabMetaContent(tab.meta)}</TextTabMeta>}
+          </TextTab>
+        ))}
+      </div>
+      <div className="md:hidden">
+        <TabDropdown
+          align={align}
+          items={tabs.map(tab => ({
+            active: tab.id === value,
+            id: tab.id,
+            label: tab.label,
+            meta: tab.meta,
+            onSelect: () => onChange(tab.id)
+          }))}
+        />
+      </div>
+    </>
+  )
+}
diff --git a/apps/desktop/src/hermes.test.ts b/apps/desktop/src/hermes.test.ts
index 96c326484..e9ad04a55 100644
--- a/apps/desktop/src/hermes.test.ts
+++ b/apps/desktop/src/hermes.test.ts
@@ -73,9 +73,7 @@ describe('Hermes REST session helpers', () => {
   })
 
   it('uses a longer timeout for active profile refresh during desktop startup', async () => {
-    api
-      .mockResolvedValueOnce({ current: 'default' })
-      .mockResolvedValueOnce({ profiles: [] })
+    api.mockResolvedValueOnce({ current: 'default' }).mockResolvedValueOnce({ profiles: [] })
 
     await refreshActiveProfile()
 
diff --git a/apps/desktop/src/hermes.ts b/apps/desktop/src/hermes.ts
index c5a73391f..cf03e0d83 100644
--- a/apps/desktop/src/hermes.ts
+++ b/apps/desktop/src/hermes.ts
@@ -22,7 +22,6 @@ import type {
   LogsResponse,
   McpCatalogResponse,
   McpServerSummary,
-  McpServerTestResponse,
   MemoryProviderConfig,
   MemoryProviderOAuthStatus,
   MemoryStatusResponse,
@@ -343,6 +342,7 @@ export function getLogs(params: {
   file?: string
   level?: string
   lines?: number
+  search?: string
 }): Promise<LogsResponse> {
   const query = new URLSearchParams()
 
@@ -362,6 +362,10 @@ export function getLogs(params: {
     query.set('component', params.component)
   }
 
+  if (params.search) {
+    query.set('search', params.search)
+  }
+
   const suffix = query.toString()
 
   return window.hermesDesktop.api<LogsResponse>({
@@ -592,6 +596,49 @@ export function toggleSkill(name: string, enabled: boolean): Promise<{ ok: boole
   })
 }
 
+export interface McpTestResult {
+  ok: boolean
+  error?: string
+  tools: { name: string; description: string }[]
+  /** Capability counts (absent on older backends / failed probes). */
+  prompts?: number
+  resources?: number
+}
+
+/** Connect to the server, list its tools, disconnect. Slow (spawns/handshakes
+ *  for real) — well past the 15s default fetch timeout. */
+export function testMcpServer(name: string): Promise<McpTestResult> {
+  return window.hermesDesktop.api<McpTestResult>({
+    ...profileScoped(),
+    path: `/api/mcp/servers/${encodeURIComponent(name)}/test`,
+    method: 'POST',
+    timeoutMs: 60_000
+  })
+}
+
+/** Replace the whole `mcp_servers` map (the mcp.json editor's save). Unlike
+ *  `saveHermesConfig`, this REPLACES rather than deep-merges, so deletes,
+ *  re-enables (dropping `enabled: false`), and removed nested fields persist. */
+export function saveMcpServers(servers: Record<string, Record<string, unknown>>): Promise<{ ok: boolean }> {
+  return window.hermesDesktop.api<{ ok: boolean }>({
+    ...profileScoped(),
+    path: '/api/mcp/servers',
+    method: 'PUT',
+    body: { servers }
+  })
+}
+
+/** Run the OAuth flow for an HTTP server — opens the system browser and blocks
+ *  until the user finishes (or gives up), hence the very generous timeout. */
+export function authMcpServer(name: string): Promise<McpTestResult> {
+  return window.hermesDesktop.api<McpTestResult>({
+    ...profileScoped(),
+    path: `/api/mcp/servers/${encodeURIComponent(name)}/auth`,
+    method: 'POST',
+    timeoutMs: 300_000
+  })
+}
+
 export function getToolsets(): Promise<ToolsetInfo[]> {
   return window.hermesDesktop.api<ToolsetInfo[]>({
     ...profileScoped(),
@@ -981,6 +1028,7 @@ export function searchSkillsHub(query: string, source = 'all', limit = 20): Prom
 
 export function previewSkillHub(identifier: string): Promise<SkillHubPreview> {
   return window.hermesDesktop.api<SkillHubPreview>({
+    ...profileScoped(),
     path: `/api/skills/hub/preview?identifier=${encodeURIComponent(identifier)}`,
     timeoutMs: HUB_REQUEST_TIMEOUT_MS
   })
@@ -988,6 +1036,7 @@ export function previewSkillHub(identifier: string): Promise<SkillHubPreview> {
 
 export function scanSkillHub(identifier: string): Promise<SkillHubScanResult> {
   return window.hermesDesktop.api<SkillHubScanResult>({
+    ...profileScoped(),
     path: `/api/skills/hub/scan?identifier=${encodeURIComponent(identifier)}`,
     timeoutMs: HUB_REQUEST_TIMEOUT_MS
   })
@@ -1033,16 +1082,6 @@ export function listMcpServers(): Promise<{ servers: McpServerSummary[] }> {
   })
 }
 
-export function testMcpServer(name: string): Promise<McpServerTestResponse> {
-  return window.hermesDesktop.api<McpServerTestResponse>({
-    ...profileScoped(),
-    path: `/api/mcp/servers/${encodeURIComponent(name)}/test`,
-    method: 'POST',
-    // Connect + list tools can be slow for stdio servers that boot a process.
-    timeoutMs: 60_000
-  })
-}
-
 export function setMcpServerEnabled(name: string, enabled: boolean): Promise<{ ok: boolean }> {
   return window.hermesDesktop.api<{ ok: boolean }>({
     ...profileScoped(),
@@ -1062,8 +1101,8 @@ export function getMcpCatalog(): Promise<McpCatalogResponse> {
 export function installMcpCatalogEntry(
   name: string,
   env: Record<string, string> = {}
-): Promise<{ ok: boolean; name?: string; pid?: number; action?: string }> {
-  return window.hermesDesktop.api<{ ok: boolean; name?: string; pid?: number; action?: string }>({
+): Promise<{ ok: boolean; name?: string; pid?: number; action?: string; background?: boolean }> {
+  return window.hermesDesktop.api<{ ok: boolean; name?: string; pid?: number; action?: string; background?: boolean }>({
     ...profileScoped(),
     path: '/api/mcp/catalog/install',
     method: 'POST',
diff --git a/apps/desktop/src/i18n/en.ts b/apps/desktop/src/i18n/en.ts
index 67172bc2c..c769d9db7 100644
--- a/apps/desktop/src/i18n/en.ts
+++ b/apps/desktop/src/i18n/en.ts
@@ -26,6 +26,7 @@ export const en: Translations = {
     done: 'Done',
     error: 'Error',
     failed: 'Failed',
+    formatJson: 'Format JSON',
     free: 'Free',
     loading: 'Loading…',
     notSet: 'Not set',
@@ -165,8 +166,7 @@ export const en: Translations = {
 
   remoteDisplayBanner: {
     message: reason =>
-      `Software rendering active — remote display detected (${reason}). GPU acceleration is disabled to prevent flickering.`,
-    dismiss: 'Dismiss'
+      `Software rendering active — remote display detected (${reason}). GPU acceleration is disabled to prevent flickering.`
   },
 
   titlebar: {
@@ -495,8 +495,6 @@ export const en: Translations = {
       enterValueFirst: 'Enter a value first.',
       couldNotSave: 'Could not save credential.',
       remove: 'Remove',
-      or: 'or',
-      escToCancel: 'esc to cancel',
       getKey: 'Get a key',
       saving: 'Saving'
     },
@@ -758,11 +756,12 @@ export const en: Translations = {
 
   skills: {
     tabSkills: 'Skills',
-    tabToolsets: 'Toolsets',
+    tabToolsets: 'Tools',
+    tabMcp: 'MCP',
     tabHub: 'Browse Hub',
     all: 'All',
     searchSkills: 'Search skills...',
-    searchToolsets: 'Search toolsets...',
+    searchToolsets: 'Search tools...',
     refresh: 'Refresh skills',
     refreshing: 'Refreshing skills',
     loading: 'Loading capabilities...',
@@ -784,8 +783,15 @@ export const en: Translations = {
     toolsetDisabled: 'Toolset disabled',
     appliesToNewSessions: name => `${name} applies to new sessions.`,
     failedToUpdate: name => `Failed to update ${name}`,
+    sortMostUsed: 'Most used',
+    sortAlpha: 'A–Z',
+    enableAll: 'Enable all',
+    disableAll: 'Disable all',
+    bulkUpdated: count => `Updated ${count} ${count === 1 ? 'item' : 'items'} for new sessions.`,
+    bulkNoChange: 'Nothing to change.',
+    usageCount: count => `used ${count}×`,
     hub: {
-      searchPlaceholder: 'Search the skill hub (official, GitHub, community)...',
+      searchPlaceholder: 'Search the skill hub',
       search: 'Search',
       searching: 'Searching...',
       connectingHubs: 'Connecting to skill hubs...',
@@ -800,6 +806,7 @@ export const en: Translations = {
       install: 'Install',
       installing: 'Installing...',
       uninstall: 'Uninstall',
+      uninstalling: 'Uninstalling...',
       updateAll: 'Update installed',
       updating: 'Updating...',
       preview: 'Preview',
@@ -888,7 +895,6 @@ export const en: Translations = {
     ageHours: hours => `${hours}h ago`,
     durationSeconds: seconds => `${seconds}s`,
     durationMinutes: (minutes, seconds) => `${minutes}m ${seconds}s`,
-    tokensK: k => `${k}k tok`,
     tokens: value => `${value} tok`
   },
 
@@ -905,7 +911,7 @@ export const en: Translations = {
     appearance: 'Appearance',
     settings: 'Settings',
     changeTheme: 'Change theme',
-    changeColorMode: 'Change color mode...',
+    changeColorMode: 'Change color mode…',
     pets: {
       title: 'Pets',
       placeholder: 'Search pets…',
@@ -952,7 +958,8 @@ export const en: Translations = {
       startOver: 'Start over'
     },
     installTheme: {
-      title: 'Install theme...',
+      title: 'Install theme…',
+      pageTitle: 'Install theme',
       placeholder: 'Search the VS Code Marketplace...',
       loading: 'Searching the Marketplace...',
       error: 'Could not reach the Marketplace.',
@@ -975,7 +982,7 @@ export const en: Translations = {
     nav: {
       newChat: { title: 'New session', detail: 'Start a fresh session' },
       settings: { title: 'Settings', detail: 'Configure Hermes desktop' },
-      skills: { title: 'Skills & Tools', detail: 'Enable skills, toolsets, and providers' },
+      skills: { title: 'Capabilities', detail: 'Skills, tools, and MCP servers' },
       messaging: { title: 'Messaging', detail: 'Set up Telegram, Slack, Discord, and more' },
       artifacts: { title: 'Artifacts', detail: 'Browse generated outputs' }
     },
@@ -1218,9 +1225,9 @@ export const en: Translations = {
     allProfiles: 'All profiles',
     showAllProfiles: 'Show all profiles',
     switchToProfile: name => `Switch to ${name}`,
-    manageProfiles: 'Manage profiles...',
+    manageProfiles: 'Manage profiles…',
     actionsFor: name => `Actions for ${name}`,
-    color: 'Color...',
+    color: 'Color…',
     colorFor: name => `Color for ${name}`,
     setColor: color => `Set color ${color}`,
     autoColor: 'Auto',
@@ -1233,6 +1240,8 @@ export const en: Translations = {
     env: 'env',
     defaultBadge: 'Default',
     rename: 'Rename',
+    renameMenu: 'Rename…',
+    editSoul: 'Edit SOUL.md…',
     copySetup: 'Copy setup',
     copying: 'Copying...',
     modelLabel: 'Model',
@@ -1433,7 +1442,7 @@ export const en: Translations = {
   sidebar: {
     nav: {
       'new-session': 'New session',
-      skills: 'Skills & Tools',
+      skills: 'Capabilities',
       messaging: 'Messaging',
       artifacts: 'Artifacts'
     },
diff --git a/apps/desktop/src/i18n/ja.ts b/apps/desktop/src/i18n/ja.ts
index 7c23fb656..465a62346 100644
--- a/apps/desktop/src/i18n/ja.ts
+++ b/apps/desktop/src/i18n/ja.ts
@@ -26,6 +26,7 @@ export const ja = defineLocale({
     done: '完了',
     error: 'エラー',
     failed: '失敗',
+    formatJson: 'JSON を整形',
     free: '無料',
     loading: '読み込み中…',
     notSet: '未設定',
@@ -166,8 +167,7 @@ export const ja = defineLocale({
 
   remoteDisplayBanner: {
     message: reason =>
-      `ソフトウェアレンダリングが有効です — リモートディスプレイを検出しました（${reason}）。ちらつきを防ぐため GPU アクセラレーションは無効化されています。`,
-    dismiss: '閉じる'
+      `ソフトウェアレンダリングが有効です — リモートディスプレイを検出しました（${reason}）。ちらつきを防ぐため GPU アクセラレーションは無効化されています。`
   },
 
   titlebar: {
@@ -608,8 +608,6 @@ export const ja = defineLocale({
       enterValueFirst: '最初に値を入力してください。',
       couldNotSave: '認証情報を保存できませんでした。',
       remove: '削除',
-      or: 'または',
-      escToCancel: 'Esc でキャンセル',
       getKey: 'キーを取得',
       saving: '保存中'
     },
@@ -839,6 +837,7 @@ export const ja = defineLocale({
   skills: {
     tabSkills: 'スキル',
     tabToolsets: 'ツールセット',
+    tabMcp: 'MCP',
     all: 'すべて',
     searchSkills: 'スキルを検索...',
     searchToolsets: 'ツールセットを検索...',
@@ -862,7 +861,14 @@ export const ja = defineLocale({
     toolsetEnabled: 'ツールセットを有効にしました',
     toolsetDisabled: 'ツールセットを無効にしました',
     appliesToNewSessions: name => `${name} は新しいセッションに適用されます。`,
-    failedToUpdate: name => `${name} の更新に失敗しました`
+    failedToUpdate: name => `${name} の更新に失敗しました`,
+    sortMostUsed: '使用頻度順',
+    sortAlpha: 'A–Z',
+    enableAll: 'すべて有効化',
+    disableAll: 'すべて無効化',
+    bulkUpdated: count => `${count} 件を新しいセッション向けに更新しました。`,
+    bulkNoChange: '変更するものはありません。',
+    usageCount: count => `${count} 回使用`
   },
 
   starmap: {
@@ -907,7 +913,6 @@ export const ja = defineLocale({
     ageHours: hours => `${hours}時間前`,
     durationSeconds: seconds => `${seconds}秒`,
     durationMinutes: (minutes, seconds) => `${minutes}分 ${seconds}秒`,
-    tokensK: k => `${k}k トーク`,
     tokens: value => `${value} トーク`
   },
 
@@ -924,7 +929,7 @@ export const ja = defineLocale({
     appearance: '外観',
     settings: '設定',
     changeTheme: 'テーマを変更',
-    changeColorMode: 'カラーモードを変更...',
+    changeColorMode: 'カラーモードを変更…',
     pets: {
       title: 'ペット',
       placeholder: 'ペットを検索…',
@@ -970,7 +975,8 @@ export const ja = defineLocale({
       startOver: 'やり直す'
     },
     installTheme: {
-      title: 'テーマをインストール...',
+      title: 'テーマをインストール…',
+      pageTitle: 'テーマをインストール',
       placeholder: 'VS Code Marketplace を検索...',
       loading: 'Marketplace を検索中...',
       error: 'Marketplace に接続できませんでした。',
@@ -1195,9 +1201,9 @@ export const ja = defineLocale({
     allProfiles: 'すべてのプロファイル',
     showAllProfiles: 'すべてのプロファイルを表示',
     switchToProfile: name => `${name} に切り替え`,
-    manageProfiles: 'プロファイルを管理...',
+    manageProfiles: 'プロファイルを管理…',
     actionsFor: name => `${name} のアクション`,
-    color: 'カラー...',
+    color: 'カラー…',
     colorFor: name => `${name} のカラー`,
     setColor: color => `カラー ${color} に設定`,
     autoColor: '自動',
@@ -1210,6 +1216,8 @@ export const ja = defineLocale({
     env: 'env',
     defaultBadge: 'デフォルト',
     rename: '名前を変更',
+    renameMenu: '名前を変更…',
+    editSoul: 'SOUL.md を編集…',
     copySetup: 'セットアップをコピー',
     copying: 'コピー中...',
     modelLabel: 'モデル',
diff --git a/apps/desktop/src/i18n/languages.ts b/apps/desktop/src/i18n/languages.ts
index 5b4990f49..96daf9b59 100644
--- a/apps/desktop/src/i18n/languages.ts
+++ b/apps/desktop/src/i18n/languages.ts
@@ -1,3 +1,5 @@
+import { normalize } from '@/lib/text'
+
 import type { Locale } from './types'
 
 export const DEFAULT_LOCALE: Locale = 'en'
@@ -74,11 +76,11 @@ export function normalizeLocale(value: unknown): Locale {
     return DEFAULT_LOCALE
   }
 
-  return LOCALE_ALIASES[value.trim().toLowerCase()] ?? DEFAULT_LOCALE
+  return LOCALE_ALIASES[normalize(value)] ?? DEFAULT_LOCALE
 }
 
 export function isSupportedLocaleValue(value: unknown): boolean {
-  return typeof value === 'string' && LOCALE_ALIASES[value.trim().toLowerCase()] != null
+  return typeof value === 'string' && LOCALE_ALIASES[normalize(value)] != null
 }
 
 export function localeConfigValue(locale: Locale): string {
diff --git a/apps/desktop/src/i18n/types.ts b/apps/desktop/src/i18n/types.ts
index 7bf026714..6248435a8 100644
--- a/apps/desktop/src/i18n/types.ts
+++ b/apps/desktop/src/i18n/types.ts
@@ -71,6 +71,7 @@ export interface Translations {
     done: string
     error: string
     failed: string
+    formatJson: string
     free: string
     loading: string
     notSet: string
@@ -208,7 +209,6 @@ export interface Translations {
 
   remoteDisplayBanner: {
     message: (reason: string) => string
-    dismiss: string
   }
 
   titlebar: {
@@ -411,8 +411,6 @@ export interface Translations {
       enterValueFirst: string
       couldNotSave: string
       remove: string
-      or: string
-      escToCancel: string
       getKey: string
       saving: string
     }
@@ -656,6 +654,7 @@ export interface Translations {
   skills: {
     tabSkills: string
     tabToolsets: string
+    tabMcp: string
     tabHub: string
     all: string
     searchSkills: string
@@ -681,6 +680,13 @@ export interface Translations {
     toolsetDisabled: string
     appliesToNewSessions: (name: string) => string
     failedToUpdate: (name: string) => string
+    sortMostUsed: string
+    sortAlpha: string
+    enableAll: string
+    disableAll: string
+    bulkUpdated: (count: number) => string
+    bulkNoChange: string
+    usageCount: (count: number | string) => string
     hub: {
       searchPlaceholder: string
       search: string
@@ -696,6 +702,7 @@ export interface Translations {
       install: string
       installing: string
       uninstall: string
+      uninstalling: string
       updateAll: string
       updating: string
       preview: string
@@ -779,8 +786,7 @@ export interface Translations {
     ageHours: (hours: number) => string
     durationSeconds: (seconds: string) => string
     durationMinutes: (minutes: number, seconds: number) => string
-    tokensK: (k: string) => string
-    tokens: (value: number) => string
+    tokens: (value: number | string) => string
   }
 
   commandCenter: {
@@ -843,6 +849,7 @@ export interface Translations {
     }
     installTheme: {
       title: string
+      pageTitle: string
       placeholder: string
       loading: string
       error: string
@@ -1017,6 +1024,8 @@ export interface Translations {
     env: string
     defaultBadge: string
     rename: string
+    renameMenu: string
+    editSoul: string
     copySetup: string
     copying: string
     modelLabel: string
diff --git a/apps/desktop/src/i18n/zh-hant.ts b/apps/desktop/src/i18n/zh-hant.ts
index 5859569a2..90c0f9e97 100644
--- a/apps/desktop/src/i18n/zh-hant.ts
+++ b/apps/desktop/src/i18n/zh-hant.ts
@@ -26,6 +26,7 @@ export const zhHant = defineLocale({
     done: '完成',
     error: '錯誤',
     failed: '失敗',
+    formatJson: '格式化 JSON',
     free: '免費',
     loading: '載入中…',
     notSet: '未設定',
@@ -160,8 +161,7 @@ export const zhHant = defineLocale({
   },
 
   remoteDisplayBanner: {
-    message: reason => `軟體繪圖已啟用 — 偵測到遠端顯示（${reason}）。為防止畫面閃爍，已停用 GPU 加速。`,
-    dismiss: '關閉'
+    message: reason => `軟體繪圖已啟用 — 偵測到遠端顯示（${reason}）。為防止畫面閃爍，已停用 GPU 加速。`
   },
 
   titlebar: {
@@ -596,8 +596,6 @@ export const zhHant = defineLocale({
       enterValueFirst: '請先輸入一個值。',
       couldNotSave: '無法儲存憑證。',
       remove: '移除',
-      or: '或',
-      escToCancel: '按 esc 取消',
       getKey: '取得金鑰',
       saving: '儲存中'
     },
@@ -811,6 +809,7 @@ export const zhHant = defineLocale({
   skills: {
     tabSkills: '技能',
     tabToolsets: '工具集',
+    tabMcp: 'MCP',
     all: '全部',
     searchSkills: '搜尋技能...',
     searchToolsets: '搜尋工具集...',
@@ -834,7 +833,14 @@ export const zhHant = defineLocale({
     toolsetEnabled: '工具集已啟用',
     toolsetDisabled: '工具集已停用',
     appliesToNewSessions: name => `${name} 將套用至新工作階段。`,
-    failedToUpdate: name => `更新 ${name} 失敗`
+    failedToUpdate: name => `更新 ${name} 失敗`,
+    sortMostUsed: '最常用',
+    sortAlpha: 'A–Z',
+    enableAll: '全部啟用',
+    disableAll: '全部停用',
+    bulkUpdated: count => `已為新工作階段更新 ${count} 項。`,
+    bulkNoChange: '沒有需要變更的內容。',
+    usageCount: count => `已使用 ${count} 次`
   },
 
   starmap: {
@@ -879,7 +885,6 @@ export const zhHant = defineLocale({
     ageHours: hours => `${hours} 小時前`,
     durationSeconds: seconds => `${seconds} 秒`,
     durationMinutes: (minutes, seconds) => `${minutes} 分 ${seconds} 秒`,
-    tokensK: k => `${k}k 詞元`,
     tokens: value => `${value} 詞元`
   },
 
@@ -896,7 +901,7 @@ export const zhHant = defineLocale({
     appearance: '外觀',
     settings: '設定',
     changeTheme: '變更主題',
-    changeColorMode: '變更色彩模式...',
+    changeColorMode: '變更色彩模式…',
     pets: {
       title: '寵物',
       placeholder: '搜尋寵物…',
@@ -942,7 +947,8 @@ export const zhHant = defineLocale({
       startOver: '重新開始'
     },
     installTheme: {
-      title: '安裝主題...',
+      title: '安裝主題…',
+      pageTitle: '安裝主題',
       placeholder: '搜尋 VS Code Marketplace...',
       loading: '正在搜尋 Marketplace...',
       error: '無法連接到 Marketplace。',
@@ -1151,9 +1157,9 @@ export const zhHant = defineLocale({
     allProfiles: '全部設定檔',
     showAllProfiles: '顯示全部設定檔',
     switchToProfile: name => `切換至 ${name}`,
-    manageProfiles: '管理設定檔...',
+    manageProfiles: '管理設定檔…',
     actionsFor: name => `${name} 的動作`,
-    color: '顏色...',
+    color: '顏色…',
     colorFor: name => `${name} 的顏色`,
     setColor: color => `設定顏色 ${color}`,
     autoColor: '自動',
@@ -1166,6 +1172,8 @@ export const zhHant = defineLocale({
     env: 'env',
     defaultBadge: '預設',
     rename: '重新命名',
+    renameMenu: '重新命名…',
+    editSoul: '編輯 SOUL.md…',
     copySetup: '複製安裝指令',
     copying: '複製中…',
     modelLabel: '模型',
@@ -1419,8 +1427,7 @@ export const zhHant = defineLocale({
       copyPath: '複製路徑',
       removeFromSidebar: '從側邊欄移除',
       createFailed: '無法建立專案',
-      staleBackend:
-        '請更新 Hermes 後端以建立專案——目前後端比桌面應用舊（設定 → 更新 → 後端）。',
+      staleBackend: '請更新 Hermes 後端以建立專案——目前後端比桌面應用舊（設定 → 更新 → 後端）。',
       deleteConfirm: '這會從 Hermes 中移除已儲存的專案。檔案、git 儲存庫和工作樹維持不變。',
       startWork: '新增工作樹',
       newWorktreeTitle: '新增工作樹',
diff --git a/apps/desktop/src/i18n/zh.ts b/apps/desktop/src/i18n/zh.ts
index 4c0b14150..7e738fe05 100644
--- a/apps/desktop/src/i18n/zh.ts
+++ b/apps/desktop/src/i18n/zh.ts
@@ -26,6 +26,7 @@ export const zh: Translations = {
     done: '完成',
     error: '错误',
     failed: '失败',
+    formatJson: '格式化 JSON',
     free: '免费',
     loading: '加载中…',
     notSet: '未设置',
@@ -160,8 +161,7 @@ export const zh: Translations = {
   },
 
   remoteDisplayBanner: {
-    message: reason => `软件渲染已启用 — 检测到远程显示（${reason}）。为防止画面闪烁，已禁用 GPU 加速。`,
-    dismiss: '关闭'
+    message: reason => `软件渲染已启用 — 检测到远程显示（${reason}）。为防止画面闪烁，已禁用 GPU 加速。`
   },
 
   titlebar: {
@@ -687,8 +687,6 @@ export const zh: Translations = {
       enterValueFirst: '请先输入一个值。',
       couldNotSave: '无法保存凭据。',
       remove: '移除',
-      or: '或',
-      escToCancel: '按 esc 取消',
       getKey: '获取密钥',
       saving: '保存中'
     },
@@ -943,6 +941,7 @@ export const zh: Translations = {
   skills: {
     tabSkills: '技能',
     tabToolsets: '工具集',
+    tabMcp: 'MCP',
     tabHub: '浏览技能中心',
     all: '全部',
     searchSkills: '搜索技能…',
@@ -968,8 +967,15 @@ export const zh: Translations = {
     toolsetDisabled: '工具集已禁用',
     appliesToNewSessions: name => `${name} 将应用于新会话。`,
     failedToUpdate: name => `更新 ${name} 失败`,
+    sortMostUsed: '最常用',
+    sortAlpha: 'A–Z',
+    enableAll: '全部启用',
+    disableAll: '全部停用',
+    bulkUpdated: count => `已为新会话更新 ${count} 项。`,
+    bulkNoChange: '没有需要更改的内容。',
+    usageCount: count => `已使用 ${count} 次`,
     hub: {
-      searchPlaceholder: '搜索技能中心（官方、GitHub、社区）…',
+      searchPlaceholder: '搜索技能中心',
       search: '搜索',
       searching: '搜索中…',
       connectingHubs: '正在连接技能中心…',
@@ -983,6 +989,7 @@ export const zh: Translations = {
       install: '安装',
       installing: '安装中…',
       uninstall: '卸载',
+      uninstalling: '卸载中…',
       updateAll: '更新已安装',
       updating: '更新中…',
       preview: '预览',
@@ -1070,7 +1077,6 @@ export const zh: Translations = {
     ageHours: hours => `${hours} 小时前`,
     durationSeconds: seconds => `${seconds} 秒`,
     durationMinutes: (minutes, seconds) => `${minutes} 分 ${seconds} 秒`,
-    tokensK: k => `${k}k 词元`,
     tokens: value => `${value} 词元`
   },
 
@@ -1087,7 +1093,7 @@ export const zh: Translations = {
     appearance: '外观',
     settings: '设置',
     changeTheme: '更改主题',
-    changeColorMode: '更改颜色模式...',
+    changeColorMode: '更改颜色模式…',
     pets: {
       title: '宠物',
       placeholder: '搜索宠物…',
@@ -1133,7 +1139,8 @@ export const zh: Translations = {
       startOver: '重新开始'
     },
     installTheme: {
-      title: '安装主题...',
+      title: '安装主题…',
+      pageTitle: '安装主题',
       placeholder: '搜索 VS Code Marketplace...',
       loading: '正在搜索 Marketplace...',
       error: '无法连接到 Marketplace。',
@@ -1397,9 +1404,9 @@ export const zh: Translations = {
     allProfiles: '全部配置档案',
     showAllProfiles: '显示全部配置档案',
     switchToProfile: name => `切换到 ${name}`,
-    manageProfiles: '管理配置档案...',
+    manageProfiles: '管理配置档案…',
     actionsFor: name => `${name} 的操作`,
-    color: '颜色...',
+    color: '颜色…',
     colorFor: name => `${name} 的颜色`,
     setColor: color => `设置颜色 ${color}`,
     autoColor: '自动',
@@ -1412,6 +1419,8 @@ export const zh: Translations = {
     env: 'env',
     defaultBadge: '默认',
     rename: '重命名',
+    renameMenu: '重命名…',
+    editSoul: '编辑 SOUL.md…',
     copySetup: '复制安装命令',
     copying: '复制中…',
     modelLabel: '模型',
diff --git a/apps/desktop/src/lib/chat-messages.ts b/apps/desktop/src/lib/chat-messages.ts
index 317108a99..47ac077cd 100644
--- a/apps/desktop/src/lib/chat-messages.ts
+++ b/apps/desktop/src/lib/chat-messages.ts
@@ -2,6 +2,7 @@ import type { ThreadMessageLike } from '@assistant-ui/react'
 
 import { dedupeGeneratedImageEchoesInParts } from '@/lib/generated-images'
 import { mediaDisplayLabel, mediaMarkdownHref } from '@/lib/media'
+import { normalize } from '@/lib/text'
 import { parseTodos } from '@/lib/todos'
 import type { SessionMessage, UsageStats } from '@/types/hermes'
 
@@ -285,7 +286,7 @@ function firstStringField(record: Record<string, unknown>, keys: readonly string
 }
 
 function normalizeToolMatchValue(value: string): string {
-  return value.trim().toLowerCase()
+  return normalize(value)
 }
 
 function collectToolMatchValues(query: string, context: string, preview: string): string[] {
diff --git a/apps/desktop/src/lib/chat-runtime.ts b/apps/desktop/src/lib/chat-runtime.ts
index 2ae7dd262..06d8e4c32 100644
--- a/apps/desktop/src/lib/chat-runtime.ts
+++ b/apps/desktop/src/lib/chat-runtime.ts
@@ -4,6 +4,7 @@ import type { QuickModelOption } from '@/app/chat/composer/types'
 import type { ClientSessionState, CommandDispatchResponse } from '@/app/types'
 import { formatRefValue } from '@/components/assistant-ui/directive-text'
 import { type ChatMessage, type ChatMessagePart, chatMessageText, textPart } from '@/lib/chat-messages'
+import { normalize } from '@/lib/text'
 import type { ComposerAttachment } from '@/store/composer'
 import type { ModelOptionsResponse, SessionInfo } from '@/types/hermes'
 
@@ -217,7 +218,7 @@ export function personalityNamesFromConfig(config: unknown): string[] {
 }
 
 export function normalizePersonalityValue(value: string): string {
-  const trimmed = value.trim().toLowerCase()
+  const trimmed = normalize(value)
 
   return !trimmed || trimmed === 'default' || trimmed === 'none' ? '' : trimmed
 }
diff --git a/apps/desktop/src/lib/commit-changelog.ts b/apps/desktop/src/lib/commit-changelog.ts
index 5cd91c404..a6aa60bec 100644
--- a/apps/desktop/src/lib/commit-changelog.ts
+++ b/apps/desktop/src/lib/commit-changelog.ts
@@ -10,6 +10,8 @@
  * header is a small regex.
  */
 
+import { capitalize } from '@/lib/text'
+
 export type CommitGroupId = 'new' | 'fixed' | 'faster' | 'improved' | 'other'
 
 export interface CommitGroup {
@@ -110,7 +112,7 @@ function tidySubject(subject: string): string {
     return cleaned
   }
 
-  return cleaned.charAt(0).toUpperCase() + cleaned.slice(1)
+  return capitalize(cleaned)
 }
 
 /**
diff --git a/apps/desktop/src/lib/format.ts b/apps/desktop/src/lib/format.ts
new file mode 100644
index 000000000..3ecb762f0
--- /dev/null
+++ b/apps/desktop/src/lib/format.ts
@@ -0,0 +1,24 @@
+// THE compact-number formatter — every user-facing count/token figure goes
+// through here. 999 → "999", 1000 → "1k", 1230 → "1.2k", 10000 → "10k",
+// 1_500_000 → "1.5M". Do not hand-roll `/ 1000` display math elsewhere.
+export function compactNumber(value: null | number | undefined): string {
+  const num = Number(value ?? 0)
+
+  if (!Number.isFinite(num) || num <= 0) {
+    return '0'
+  }
+
+  const scaled = (v: number, suffix: string) => `${v.toFixed(1).replace(/\.0$/, '')}${suffix}`
+
+  // Thresholds sit just under the unit boundary so rounding can't produce
+  // "1000k" or "1000" — those promote to the next unit instead.
+  if (num >= 999_950) {
+    return scaled(num / 1_000_000, 'M')
+  }
+
+  if (num >= 999.5) {
+    return scaled(num / 1_000, 'k')
+  }
+
+  return `${Math.round(num)}`
+}
diff --git a/apps/desktop/src/lib/icons.ts b/apps/desktop/src/lib/icons.ts
index 574599b4a..e863aa392 100644
--- a/apps/desktop/src/lib/icons.ts
+++ b/apps/desktop/src/lib/icons.ts
@@ -12,6 +12,7 @@ import {
   IconBell as Bell,
   IconBookmark as Bookmark,
   IconBookmarkFilled as BookmarkFilled,
+  IconBox as Box,
   IconBrain as Brain,
   IconBug as Bug,
   IconCheck as Check,
@@ -126,6 +127,7 @@ export {
   Bell,
   Bookmark,
   BookmarkFilled,
+  Box,
   Brain,
   Bug,
   Check,
diff --git a/apps/desktop/src/lib/json-format.test.ts b/apps/desktop/src/lib/json-format.test.ts
new file mode 100644
index 000000000..79942ff5f
--- /dev/null
+++ b/apps/desktop/src/lib/json-format.test.ts
@@ -0,0 +1,26 @@
+import { describe, expect, it } from 'vitest'
+
+import { tryFormatJson } from './json-format'
+
+describe('tryFormatJson', () => {
+  it('pretty-prints compact JSON', () => {
+    expect(tryFormatJson('{"a":1,"b":[2,3]}')).toEqual({
+      ok: true,
+      text: '{\n  "a": 1,\n  "b": [\n    2,\n    3\n  ]\n}'
+    })
+  })
+
+  it('leaves empty input unchanged', () => {
+    expect(tryFormatJson('   ')).toEqual({ ok: true, text: '   ' })
+  })
+
+  it('reports parse errors', () => {
+    const result = tryFormatJson('{bad')
+
+    expect(result.ok).toBe(false)
+
+    if (!result.ok) {
+      expect(result.error.length).toBeGreaterThan(0)
+    }
+  })
+})
diff --git a/apps/desktop/src/lib/json-format.ts b/apps/desktop/src/lib/json-format.ts
new file mode 100644
index 000000000..a24caeeda
--- /dev/null
+++ b/apps/desktop/src/lib/json-format.ts
@@ -0,0 +1,15 @@
+export type FormatJsonResult = { ok: true; text: string } | { ok: false; error: string }
+
+export function tryFormatJson(raw: string): FormatJsonResult {
+  const text = raw.trim()
+
+  if (!text) {
+    return { ok: true, text: raw }
+  }
+
+  try {
+    return { ok: true, text: JSON.stringify(JSON.parse(text) as unknown, null, 2) }
+  } catch (err) {
+    return { ok: false, error: err instanceof Error ? err.message : String(err) }
+  }
+}
diff --git a/apps/desktop/src/lib/loadout.ts b/apps/desktop/src/lib/loadout.ts
index 6991a106b..b687690c4 100644
--- a/apps/desktop/src/lib/loadout.ts
+++ b/apps/desktop/src/lib/loadout.ts
@@ -1,5 +1,7 @@
 import { deflateSync, inflateSync } from 'fflate'
 
+import { capitalize } from '@/lib/text'
+
 // ── Loadout codec ─────────────────────────────────────────────────────────────
 //
 // A generic, WoW-talent-loadout-style binary share codec: pack *bits and
@@ -211,7 +213,7 @@ const HEAD_BYTES = 3 // 8-bit version + 16-bit checksum
 export function createLoadout<T>(spec: LoadoutSpec<T>): Loadout<T> {
   const Err = spec.error ?? LoadoutError
   const noun = spec.noun ?? 'code'
-  const Noun = noun.charAt(0).toUpperCase() + noun.slice(1)
+  const Noun = capitalize(noun)
 
   const encode = (value: T): string => {
     const body = new BitWriter()
diff --git a/apps/desktop/src/lib/markdown-code.ts b/apps/desktop/src/lib/markdown-code.ts
index 3d9f3e5e1..4b1632b98 100644
--- a/apps/desktop/src/lib/markdown-code.ts
+++ b/apps/desktop/src/lib/markdown-code.ts
@@ -1,3 +1,5 @@
+import { normalize } from '@/lib/text'
+
 const VALID_LANGUAGE_RE = /^[a-z0-9][a-z0-9+#-]*$/i
 const NON_CODE_FENCE_LANGUAGES = new Set(['', 'text', 'plain', 'plaintext', 'md', 'markdown'])
 
@@ -154,7 +156,7 @@ export function codiconForFilename(path: string | undefined): string {
 // Last path segment's extension (or the bare lowercased name for `Dockerfile`,
 // `Makefile`, …). Shared by the icon and Shiki-language resolvers.
 function filenameExtToken(path: string | undefined): string {
-  const base = (path || '').replace(/\\/g, '/').split('/').pop()?.trim().toLowerCase() || ''
+  const base = normalize((path || '').replace(/\\/g, '/').split('/').pop())
   const dot = base.lastIndexOf('.')
 
   return dot > 0 ? base.slice(dot + 1) : base
diff --git a/apps/desktop/src/lib/mcp-tool-filter.test.ts b/apps/desktop/src/lib/mcp-tool-filter.test.ts
new file mode 100644
index 000000000..ade59df5e
--- /dev/null
+++ b/apps/desktop/src/lib/mcp-tool-filter.test.ts
@@ -0,0 +1,74 @@
+import { describe, expect, it } from 'vitest'
+
+import { countEnabledTools, isToolEnabled, readToolsFilter, toggleToolInServer } from './mcp-tool-filter'
+
+describe('readToolsFilter', () => {
+  it('returns empty when no tools object', () => {
+    expect(readToolsFilter({ command: 'x' })).toEqual({ exclude: undefined, include: undefined })
+  })
+
+  it('reads include/exclude and ignores non-string entries', () => {
+    expect(readToolsFilter({ tools: { exclude: ['c', 2], include: ['a', 'b', null] } })).toEqual({
+      exclude: ['c'],
+      include: ['a', 'b']
+    })
+  })
+})
+
+describe('isToolEnabled', () => {
+  it('enables everything with no filter', () => {
+    expect(isToolEnabled({ command: 'x' }, 'anything')).toBe(true)
+  })
+
+  it('include wins over exclude', () => {
+    const server = { tools: { exclude: ['a'], include: ['a'] } }
+    expect(isToolEnabled(server, 'a')).toBe(true)
+    expect(isToolEnabled(server, 'b')).toBe(false)
+  })
+
+  it('exclude disables listed tools', () => {
+    const server = { tools: { exclude: ['b'] } }
+    expect(isToolEnabled(server, 'a')).toBe(true)
+    expect(isToolEnabled(server, 'b')).toBe(false)
+  })
+})
+
+describe('toggleToolInServer', () => {
+  it('adds a fresh tool to a new exclude denylist when disabled', () => {
+    const next = toggleToolInServer({ command: 'x' }, 'a')
+    expect(next.tools).toEqual({ exclude: ['a'] })
+  })
+
+  it('re-enabling removes the tool and drops the empty exclude/tools', () => {
+    const next = toggleToolInServer({ command: 'x', tools: { exclude: ['a'] } }, 'a')
+    expect(next.tools).toBeUndefined()
+  })
+
+  it('respects include mode: toggling removes from include', () => {
+    const next = toggleToolInServer({ tools: { include: ['a', 'b'] } }, 'a')
+    expect(next.tools).toEqual({ include: ['b'] })
+  })
+
+  it('respects include mode: re-enabling adds back to include', () => {
+    const next = toggleToolInServer({ tools: { include: ['b'] } }, 'a')
+    expect(next.tools).toEqual({ include: ['b', 'a'] })
+  })
+
+  it('preserves sibling tools keys like resources/prompts', () => {
+    const next = toggleToolInServer({ tools: { resources: false } }, 'a')
+    expect(next.tools).toEqual({ exclude: ['a'], resources: false })
+  })
+
+  it('does not mutate the input server', () => {
+    const server = { tools: { exclude: ['a'] } }
+    toggleToolInServer(server, 'b')
+    expect(server.tools.exclude).toEqual(['a'])
+  })
+})
+
+describe('countEnabledTools', () => {
+  it('counts enabled tools out of a discovered list', () => {
+    const server = { tools: { exclude: ['b'] } }
+    expect(countEnabledTools(server, ['a', 'b', 'c'])).toBe(2)
+  })
+})
diff --git a/apps/desktop/src/lib/mcp-tool-filter.ts b/apps/desktop/src/lib/mcp-tool-filter.ts
new file mode 100644
index 000000000..8653c32e0
--- /dev/null
+++ b/apps/desktop/src/lib/mcp-tool-filter.ts
@@ -0,0 +1,61 @@
+// Per-tool MCP gating. A server's optional `tools.include` (whitelist) /
+// `tools.exclude` (denylist) decide which discovered tools the agent registers
+// — `include` wins, no filter means all. Mirrors `_register_server_tools` in
+// `tools/mcp_tool.py`.
+
+export interface McpToolsFilter {
+  exclude?: string[]
+  include?: string[]
+}
+
+type ServerConfig = Record<string, unknown>
+
+const asNames = (value: unknown): string[] | undefined =>
+  Array.isArray(value) ? value.filter((v): v is string => typeof v === 'string') : undefined
+
+const toolsObject = (server: ServerConfig | null | undefined): Record<string, unknown> => {
+  const tools = server?.tools
+
+  return tools && typeof tools === 'object' && !Array.isArray(tools) ? (tools as Record<string, unknown>) : {}
+}
+
+export function readToolsFilter(server: ServerConfig | null | undefined): McpToolsFilter {
+  const tools = toolsObject(server)
+
+  return { exclude: asNames(tools.exclude), include: asNames(tools.include) }
+}
+
+export function isToolEnabled(server: ServerConfig | null | undefined, name: string): boolean {
+  const { exclude, include } = readToolsFilter(server)
+
+  return include?.length ? include.includes(name) : !exclude?.includes(name)
+}
+
+// Toggle one tool, preserving the config's mode (include if present, else an
+// exclude denylist). Empty lists — and an emptied `tools` — are dropped.
+export function toggleToolInServer(server: ServerConfig, name: string): ServerConfig {
+  const { exclude, include } = readToolsFilter(server)
+  const key = include?.length ? 'include' : 'exclude'
+  const current = (key === 'include' ? include : exclude) ?? []
+  const names = current.includes(name) ? current.filter(n => n !== name) : [...current, name]
+  const tools = { ...toolsObject(server) }
+
+  if (names.length) {
+    tools[key] = names
+  } else {
+    delete tools[key]
+  }
+
+  const next = { ...server }
+
+  if (Object.keys(tools).length) {
+    next.tools = tools
+  } else {
+    delete next.tools
+  }
+
+  return next
+}
+
+export const countEnabledTools = (server: ServerConfig | null | undefined, names: string[]): number =>
+  names.filter(name => isToolEnabled(server, name)).length
diff --git a/apps/desktop/src/lib/media.remote.test.ts b/apps/desktop/src/lib/media.remote.test.ts
index 9bb47ce68..e10ca5f59 100644
--- a/apps/desktop/src/lib/media.remote.test.ts
+++ b/apps/desktop/src/lib/media.remote.test.ts
@@ -1,3 +1,5 @@
+// @vitest-environment jsdom
+// downloadGatewayMediaFile drives an <a download> click, so these need a DOM.
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { $connection } from '@/store/session'
diff --git a/apps/desktop/src/lib/media.ts b/apps/desktop/src/lib/media.ts
index 24988d97f..e8dfd35c7 100644
--- a/apps/desktop/src/lib/media.ts
+++ b/apps/desktop/src/lib/media.ts
@@ -1,4 +1,5 @@
 import { readDesktopFileDataUrl } from '@/lib/desktop-fs'
+import { capitalize } from '@/lib/text'
 import { $connection } from '@/store/session'
 
 export type MediaKind = 'audio' | 'image' | 'video' | 'file'
@@ -149,5 +150,5 @@ export function mediaDisplayLabel(path: string): string {
   const escaped = mediaName(path).replace(/[[\]\\]/g, '\\$&')
   const kind = mediaKind(path)
 
-  return `${kind[0].toUpperCase()}${kind.slice(1)}: ${escaped}`
+  return `${capitalize(kind)}: ${escaped}`
 }
diff --git a/apps/desktop/src/lib/model-options.ts b/apps/desktop/src/lib/model-options.ts
index f441b0dfd..a76555ec6 100644
--- a/apps/desktop/src/lib/model-options.ts
+++ b/apps/desktop/src/lib/model-options.ts
@@ -6,7 +6,11 @@ interface ModelOptionsRequest {
   sessionId?: null | string
 }
 
-export function requestModelOptions({ gateway, refresh = false, sessionId }: ModelOptionsRequest): Promise<ModelOptionsResponse> {
+export function requestModelOptions({
+  gateway,
+  refresh = false,
+  sessionId
+}: ModelOptionsRequest): Promise<ModelOptionsResponse> {
   if (gateway) {
     const params: Record<string, unknown> = {}
 
diff --git a/apps/desktop/src/lib/model-status-label.ts b/apps/desktop/src/lib/model-status-label.ts
index 9b0e8df7a..27a4d202b 100644
--- a/apps/desktop/src/lib/model-status-label.ts
+++ b/apps/desktop/src/lib/model-status-label.ts
@@ -1,3 +1,5 @@
+import { normalize } from '@/lib/text'
+
 const REASONING_LABELS: Record<string, string> = {
   none: 'Off',
   minimal: 'Min',
@@ -8,7 +10,7 @@ const REASONING_LABELS: Record<string, string> = {
 }
 
 export function reasoningEffortLabel(effort: string): string {
-  const key = effort.trim().toLowerCase()
+  const key = normalize(effort)
 
   if (!key) {
     return ''
diff --git a/apps/desktop/src/lib/query-client.ts b/apps/desktop/src/lib/query-client.ts
index e59c62cb2..dd0df1994 100644
--- a/apps/desktop/src/lib/query-client.ts
+++ b/apps/desktop/src/lib/query-client.ts
@@ -1,4 +1,4 @@
-import { QueryClient } from '@tanstack/react-query'
+import { QueryClient, type QueryKey } from '@tanstack/react-query'
 
 // Shared React Query client. Lives in its own module (not main.tsx) so non-React
 // code — e.g. the profile store on a gateway swap — can invalidate cached,
@@ -11,3 +11,10 @@ export const queryClient = new QueryClient({
     }
   }
 })
+
+// Curried, setState-shaped cache writer for optimistic write-through: keeps
+// mutation sites terse (`setX(next)` or `setX(prev => …)`) over one query key.
+export const writeCache =
+  <T>(key: QueryKey) =>
+  (next: T | undefined | ((prev: T | undefined) => T | undefined)): void =>
+    void queryClient.setQueryData<T>(key, next)
diff --git a/apps/desktop/src/lib/session-search.ts b/apps/desktop/src/lib/session-search.ts
index 6ec6dde85..1b7f508a2 100644
--- a/apps/desktop/src/lib/session-search.ts
+++ b/apps/desktop/src/lib/session-search.ts
@@ -1,10 +1,11 @@
+import { normalize } from '@/lib/text'
 import type { SessionInfo } from '@/types/hermes'
 
 import { sessionTitle } from './chat-runtime'
 import { sessionSourceSearchTerms } from './session-source'
 
 export function sessionMatchesSearch(session: SessionInfo, query: string): boolean {
-  const needle = query.trim().toLowerCase()
+  const needle = normalize(query)
 
   if (!needle) {
     return true
diff --git a/apps/desktop/src/lib/session-source.ts b/apps/desktop/src/lib/session-source.ts
index 4db25f3ec..e0773c232 100644
--- a/apps/desktop/src/lib/session-source.ts
+++ b/apps/desktop/src/lib/session-source.ts
@@ -1,3 +1,5 @@
+import { normalize } from '@/lib/text'
+
 const SOURCE_LABELS: Record<string, string> = {
   api_server: 'API',
   bluebubbles: 'iMessage',
@@ -76,9 +78,7 @@ export function isMessagingSource(source: null | string | undefined): boolean {
 }
 
 export function normalizeSessionSource(source: null | string | undefined): string | null {
-  const id = source?.trim().toLowerCase()
-
-  return id || null
+  return normalize(source) || null
 }
 
 /**
diff --git a/apps/desktop/src/lib/statusbar.ts b/apps/desktop/src/lib/statusbar.ts
index 8cd7ea2f6..b06f9cc0d 100644
--- a/apps/desktop/src/lib/statusbar.ts
+++ b/apps/desktop/src/lib/statusbar.ts
@@ -1,23 +1,8 @@
 import { useEffect, useState } from 'react'
 
+import { compactNumber } from '@/lib/format'
 import type { UsageStats } from '@/types/hermes'
 
-export function formatK(value: number): string {
-  if (!Number.isFinite(value) || value <= 0) {
-    return '0'
-  }
-
-  if (value >= 1_000_000) {
-    return `${(value / 1_000_000).toFixed(1)}M`
-  }
-
-  if (value >= 1_000) {
-    return `${(value / 1_000).toFixed(1)}k`
-  }
-
-  return `${Math.round(value)}`
-}
-
 export function formatDuration(elapsedMs: number): string {
   const totalSeconds = Math.max(0, Math.floor(elapsedMs / 1000))
   const seconds = totalSeconds % 60
@@ -56,10 +41,10 @@ export function contextBar(percent: number | undefined, width = 10): string {
 
 export function usageContextLabel(usage: UsageStats): string {
   if (usage.context_max) {
-    return `${formatK(usage.context_used ?? 0)}/${formatK(usage.context_max)}`
+    return `${compactNumber(usage.context_used ?? 0)}/${compactNumber(usage.context_max)}`
   }
 
-  return usage.total > 0 ? `${formatK(usage.total)} tok` : ''
+  return usage.total > 0 ? `${compactNumber(usage.total)} tok` : ''
 }
 
 export function contextBarLabel(usage: UsageStats): string {
diff --git a/apps/desktop/src/lib/text.ts b/apps/desktop/src/lib/text.ts
new file mode 100644
index 000000000..815a5d731
--- /dev/null
+++ b/apps/desktop/src/lib/text.ts
@@ -0,0 +1,15 @@
+// Canonical text micro-helpers. Do not redefine these per-page.
+
+export const asText = (v: unknown): string => (typeof v === 'string' ? v : v == null ? '' : String(v))
+
+export const includesQuery = (v: unknown, q: string) => asText(v).toLowerCase().includes(q)
+
+export const prettyName = (v: string) => v.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase())
+
+/** Search-key normalization: the exact `value.trim().toLowerCase()` idiom that
+ *  was hand-written at ~30 filter/lookup sites. */
+export const normalize = (v: unknown): string => asText(v).trim().toLowerCase()
+
+/** Uppercase the first character, leave the rest. Matches the
+ *  `s.charAt(0).toUpperCase() + s.slice(1)` idiom (empty-safe). */
+export const capitalize = (v: string): string => (v ? v.charAt(0).toUpperCase() + v.slice(1) : v)
diff --git a/apps/desktop/src/lib/time.ts b/apps/desktop/src/lib/time.ts
new file mode 100644
index 000000000..e26666c15
--- /dev/null
+++ b/apps/desktop/src/lib/time.ts
@@ -0,0 +1,74 @@
+// Canonical time/date formatting. Shared `Intl` instances (created once, not
+// per-render) + relative-time helpers. Every surface that shows a timestamp or
+// an age pulls from here so the rendered strings stay consistent app-wide.
+
+export const SECOND = 1000
+export const MINUTE = 60_000
+export const HOUR = 3_600_000
+export const DAY = 86_400_000
+
+// ── Absolute date/time formatters ──────────────────────────────────────────
+// `hh:mm` clock (thread today/yesterday lines).
+export const fmtClock = new Intl.DateTimeFormat(undefined, { hour: 'numeric', minute: '2-digit' })
+
+// Compact "day + clock", no year/seconds (artifacts, thread fallback, cron runs).
+export const fmtDayTime = new Intl.DateTimeFormat(undefined, {
+  day: 'numeric',
+  hour: 'numeric',
+  minute: '2-digit',
+  month: 'short'
+})
+
+// Medium date + short time (command center session detail).
+export const fmtDateTime = new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'short' })
+
+// Date only, "5 Jun 2026" (starmap tooltip).
+export const fmtDate = new Intl.DateTimeFormat(undefined, { day: 'numeric', month: 'short', year: 'numeric' })
+
+// ── Relative time ──────────────────────────────────────────────────────────
+const rtf = new Intl.RelativeTimeFormat(undefined, { numeric: 'auto', style: 'short' })
+
+// Localized bidirectional "in 5 min" / "2 hr ago" — coarsest sensible unit so a
+// daily job reads "in 14 hr", not "in 840 min".
+export function relativeTime(targetMs: number, nowMs = Date.now()): string {
+  const diff = targetMs - nowMs
+  const abs = Math.abs(diff)
+  const sign = diff < 0 ? -1 : 1
+
+  if (abs < MINUTE) {
+    return rtf.format(sign * Math.round(abs / SECOND), 'second')
+  }
+
+  if (abs < HOUR) {
+    return rtf.format(sign * Math.round(abs / MINUTE), 'minute')
+  }
+
+  if (abs < DAY) {
+    return rtf.format(sign * Math.round(abs / HOUR), 'hour')
+  }
+
+  return rtf.format(sign * Math.round(abs / DAY), 'day')
+}
+
+export type ElapsedUnit = 'day' | 'hour' | 'minute' | 'second'
+
+// Coarsest elapsed bucket for a (clamped-nonnegative) duration, floored. The
+// caller owns rendering — compact "5m", "5m ago", etc. — so no format is baked
+// in here.
+export function coarseElapsed(deltaMs: number): { unit: ElapsedUnit; value: number } {
+  const ms = Math.max(0, deltaMs)
+
+  if (ms >= DAY) {
+    return { unit: 'day', value: Math.floor(ms / DAY) }
+  }
+
+  if (ms >= HOUR) {
+    return { unit: 'hour', value: Math.floor(ms / HOUR) }
+  }
+
+  if (ms >= MINUTE) {
+    return { unit: 'minute', value: Math.floor(ms / MINUTE) }
+  }
+
+  return { unit: 'second', value: Math.floor(ms / SECOND) }
+}
diff --git a/apps/desktop/src/lib/tool-result-summary.ts b/apps/desktop/src/lib/tool-result-summary.ts
index b51f1c35b..394110621 100644
--- a/apps/desktop/src/lib/tool-result-summary.ts
+++ b/apps/desktop/src/lib/tool-result-summary.ts
@@ -1,6 +1,8 @@
 // Heuristic JSON → human summary for tool results. Default view; technical
 // mode still gets the raw JSON section.
 
+import { capitalize, normalize } from '@/lib/text'
+
 const WRAPPER_KEYS = ['data', 'result', 'output', 'response', 'payload'] as const
 
 const PRIORITY_KEYS = [
@@ -55,7 +57,7 @@ const titleCase = (k: string) =>
   k
     .split(/[_\-.]+/)
     .filter(Boolean)
-    .map(p => `${p[0]?.toUpperCase() ?? ''}${p.slice(1)}`)
+    .map(capitalize)
     .join(' ')
 
 const pluralize = (n: number, noun: string) => `${n} ${noun}${n === 1 ? '' : 's'}`
@@ -345,7 +347,7 @@ function hasMeaningfulErrorValue(value: unknown): boolean {
   }
 
   if (typeof v === 'string') {
-    return !NON_ERROR_TEXT.has(v.trim().toLowerCase())
+    return !NON_ERROR_TEXT.has(normalize(v))
   }
 
   if (typeof v === 'boolean') {
diff --git a/apps/desktop/src/store/hub-actions.ts b/apps/desktop/src/store/hub-actions.ts
new file mode 100644
index 000000000..3483cb589
--- /dev/null
+++ b/apps/desktop/src/store/hub-actions.ts
@@ -0,0 +1,142 @@
+import { atom, map } from 'nanostores'
+
+import { getActionStatus, installSkillFromHub, uninstallSkillFromHub, updateSkillsFromHub } from '@/hermes'
+import { queryClient } from '@/lib/query-client'
+import { upsertDesktopActionTask } from '@/store/activity'
+import { $activeGatewayProfile, normalizeProfileKey } from '@/store/profile'
+
+const POLL_MS = 1200
+
+// Shared with hub.tsx's sources useQuery so a finished action refreshes the
+// installed map.
+export const HUB_SOURCES_KEY = ['skill-hub-sources'] as const
+// The Capabilities Skills-list query key (see app/skills/index.tsx) — kept in
+// sync here so a hub (un)install updates the Skills tab, not just the hub.
+const SKILLS_LIST_KEY = ['skills-list'] as const
+// Non-identifier key for the fleet-wide "Update installed" action.
+export const UPDATE_ALL_KEY = '__update_all__'
+
+export type HubActionKind = 'install' | 'uninstall' | 'update'
+
+export interface HubAction {
+  kind: HubActionKind
+  running: boolean
+  lines: string[]
+}
+
+// Per-item action status, keyed by skill identifier (or UPDATE_ALL_KEY). Each
+// row drives its own button off ITS entry — one install never touches another.
+export const $hubActions = map<Record<string, HubAction | undefined>>({})
+
+// Optimistic installed overrides so a row flips to its resolved state the instant
+// its own action finishes, instead of waiting on (and racing) the sources
+// refetch. install/update → true, uninstall → false; sources reconciles after.
+export const $hubInstalledOverride = map<Record<string, boolean | undefined>>({})
+
+// The key whose log the bottom pane currently tails (the latest-started action).
+export const $hubActiveLog = atom<null | string>(null)
+
+// Hub action state is per-profile: a profile switch must drop every in-flight
+// entry, optimistic override, and active log so profile A's install/uninstall
+// state can never render (or be polled) in profile B. Cleared at the source so
+// it holds regardless of whether the Hub view is mounted. The epoch bumps on
+// every switch; a runHubAction() started before the switch captures it and bails
+// before any store write once it no longer matches (so an A action finishing
+// after the clear can't repopulate B).
+let _hubProfile: null | string = null
+let _hubEpoch = 0
+
+$activeGatewayProfile.subscribe(value => {
+  const key = normalizeProfileKey(value)
+
+  if (_hubProfile !== null && _hubProfile !== key) {
+    _hubEpoch += 1
+    $hubActions.set({})
+    $hubInstalledOverride.set({})
+    $hubActiveLog.set(null)
+  }
+
+  _hubProfile = key
+})
+
+// One self-contained task: spawn → tail its own action log into the store →
+// mark resolved. Concurrency-safe: state is per-key, so parallel installs never
+// stomp each other, and the sources query is invalidated once at the end.
+async function runHubAction(key: string, kind: HubActionKind, spawn: () => Promise<{ name: string }>): Promise<void> {
+  const epoch = _hubEpoch
+  const switched = () => _hubEpoch !== epoch
+
+  $hubActions.setKey(key, { kind, running: true, lines: [] })
+  $hubActiveLog.set(key)
+
+  try {
+    const started = await spawn()
+    let exitCode: number | null = null
+
+    for (;;) {
+      const status = await getActionStatus(started.name, 200)
+
+      // Profile switched mid-flight: the store was cleared for the new profile,
+      // so drop this A-profile result instead of writing it back into B.
+      if (switched()) {
+        return
+      }
+
+      upsertDesktopActionTask(status)
+      $hubActions.setKey(key, { kind, running: status.running, lines: status.lines })
+
+      if (!status.running) {
+        exitCode = status.exit_code
+
+        break
+      }
+
+      await new Promise(resolve => setTimeout(resolve, POLL_MS))
+    }
+
+    // Only flip the row on a clean exit — a failed install/uninstall must not
+    // render as installed/removed.
+    if (key !== UPDATE_ALL_KEY && exitCode === 0) {
+      $hubInstalledOverride.setKey(key, kind !== 'uninstall')
+    }
+
+    // Refresh the hub's installed map AND the Capabilities Skills list — a hub
+    // (un)install adds/removes a skill, so its count/rows must update too.
+    void queryClient.invalidateQueries({ queryKey: HUB_SOURCES_KEY })
+    void queryClient.invalidateQueries({ queryKey: SKILLS_LIST_KEY })
+  } catch (err) {
+    // A profile switch points the next poll at the new backend, which 404s the
+    // old action name — that's an abandonment, not a failure, so swallow it
+    // instead of letting the caller toast a phantom error. Real (same-profile)
+    // failures still propagate.
+    if (switched()) {
+      return
+    }
+
+    throw err
+  } finally {
+    // Skip the running=false write after a switch — it would re-add the key the
+    // profile-switch clear just dropped.
+    const current = $hubActions.get()[key]
+
+    if (current && !switched()) {
+      $hubActions.setKey(key, { ...current, running: false })
+    }
+  }
+}
+
+export function installHubSkill(identifier: string): Promise<void> {
+  return runHubAction(identifier, 'install', () => installSkillFromHub(identifier))
+}
+
+export function uninstallHubSkill(identifier: string, name: string): Promise<void> {
+  return runHubAction(identifier, 'uninstall', () => uninstallSkillFromHub(name))
+}
+
+export function updateHubSkills(): Promise<void> {
+  return runHubAction(UPDATE_ALL_KEY, 'update', () => updateSkillsFromHub())
+}
+
+export function closeHubLog(): void {
+  $hubActiveLog.set(null)
+}
diff --git a/apps/desktop/src/store/notifications.ts b/apps/desktop/src/store/notifications.ts
index 38f880c29..82a67e973 100644
--- a/apps/desktop/src/store/notifications.ts
+++ b/apps/desktop/src/store/notifications.ts
@@ -9,6 +9,8 @@ export interface NotificationAction {
   onClick: () => void
 }
 
+export type NotificationPlacement = 'default' | 'bottom-right'
+
 export interface AppNotification {
   id: string
   kind: NotificationKind
@@ -20,6 +22,7 @@ export interface AppNotification {
   action?: NotificationAction
   onDismiss?: () => void
   createdAt: number
+  placement?: NotificationPlacement
 }
 
 interface NotificationInput {
@@ -32,6 +35,7 @@ interface NotificationInput {
   action?: NotificationAction
   onDismiss?: () => void
   durationMs?: number
+  placement?: NotificationPlacement
 }
 
 let notificationCounter = 0
@@ -47,6 +51,21 @@ function defaultDuration(kind: NotificationKind) {
   return 5_000
 }
 
+// Only interruptions worth a top-center toast: errors, warnings, and anything
+// with an action button the user needs to notice and click (restart gateway,
+// update available, sign-in prompts). Everything else — the bulk of routine
+// "saved"/"enabled"/"archived" confirmations across settings, MCP, cron,
+// profiles, messaging — is ambient feedback and defaults to a quiet
+// bottom-right toast instead. Callers can still force `placement: 'default'`
+// for a specific case.
+function defaultPlacement(kind: NotificationKind, action?: NotificationAction): NotificationPlacement {
+  if (kind === 'error' || kind === 'warning' || action) {
+    return 'default'
+  }
+
+  return 'bottom-right'
+}
+
 function cleanErrorText(value: string) {
   return value.replace(/^Error:\s*/, '').trim()
 }
@@ -116,7 +135,8 @@ export function notify(input: NotificationInput): string {
     detail: input.detail,
     action: input.action,
     onDismiss: input.onDismiss,
-    createdAt: Date.now()
+    createdAt: Date.now(),
+    placement: input.placement ?? defaultPlacement(kind, input.action)
   }
 
   window.clearTimeout(timers.get(id))
diff --git a/apps/desktop/src/store/pet-gallery.ts b/apps/desktop/src/store/pet-gallery.ts
index 1be1f2209..40cb420e9 100644
--- a/apps/desktop/src/store/pet-gallery.ts
+++ b/apps/desktop/src/store/pet-gallery.ts
@@ -1,5 +1,6 @@
 import { atom } from 'nanostores'
 
+import { normalize } from '@/lib/text'
 import { $petInfo, type PetInfo, petProfile, setPetInfo } from '@/store/pet'
 
 /**
@@ -218,7 +219,7 @@ export function rankedGalleryPets(gallery: PetGallery | null, query = ''): Galle
     return []
   }
 
-  const needle = query.trim().toLowerCase()
+  const needle = normalize(query)
 
   // User-generated pets first, then the active pet, then installed, then curated.
   // Guard every term with a boolean — local-only pets omit curated/generated, and
diff --git a/apps/desktop/src/store/pet-generate.ts b/apps/desktop/src/store/pet-generate.ts
index 021a6cef6..e829e68c0 100644
--- a/apps/desktop/src/store/pet-generate.ts
+++ b/apps/desktop/src/store/pet-generate.ts
@@ -1,6 +1,7 @@
 import { atom } from 'nanostores'
 
 import { persistBoolean, persistString, storedBoolean, storedString } from '@/lib/storage'
+import { capitalize } from '@/lib/text'
 import { $gateway } from '@/store/gateway'
 import { dispatchNativeNotification } from '@/store/native-notifications'
 import { notify } from '@/store/notifications'
@@ -67,11 +68,7 @@ export function cleanPetName(prompt: string): string {
   const meaningful = words.filter(w => !NAME_STOPWORDS.has(w.toLowerCase()))
   const picked = (meaningful.length ? meaningful : words).slice(0, 3)
 
-  const name = picked
-    .map(w => w.charAt(0).toUpperCase() + w.slice(1))
-    .join(' ')
-    .slice(0, 28)
-    .trim()
+  const name = picked.map(capitalize).join(' ').slice(0, 28).trim()
 
   return name || 'Pet'
 }
diff --git a/apps/desktop/src/store/preview.ts b/apps/desktop/src/store/preview.ts
index 7726242a6..c0533e719 100644
--- a/apps/desktop/src/store/preview.ts
+++ b/apps/desktop/src/store/preview.ts
@@ -1,6 +1,7 @@
 import { atom, computed } from 'nanostores'
 
 import { persistentAtom } from '@/lib/persisted'
+import { normalize } from '@/lib/text'
 
 import {
   $rightRailActiveTabId,
@@ -539,7 +540,7 @@ export function completePreviewServerRestart(taskId: string, text: string) {
   $previewServerRestart.set({
     ...current,
     message: text,
-    status: text.trim().toLowerCase().startsWith('error:') ? 'error' : 'complete'
+    status: normalize(text).startsWith('error:') ? 'error' : 'complete'
   })
 }
 
diff --git a/apps/desktop/src/store/projects.ts b/apps/desktop/src/store/projects.ts
index bb551f824..869ca2cad 100644
--- a/apps/desktop/src/store/projects.ts
+++ b/apps/desktop/src/store/projects.ts
@@ -2,14 +2,14 @@ import { atom } from 'nanostores'
 
 import { liveSessionProjectId, type SidebarProjectTree } from '@/app/chat/sidebar/projects/workspace-groups'
 import type { HermesGitBranch } from '@/global'
+import { translateNow } from '@/i18n'
 import { desktopDefaultCwd, selectDesktopPaths, writeDesktopFileText } from '@/lib/desktop-fs'
 import { desktopGit } from '@/lib/desktop-git'
 import { isMissingRpcMethod } from '@/lib/gateway-rpc'
 import { persistentAtom } from '@/lib/persisted'
-import { translateNow } from '@/i18n'
 import { activeGateway, ensureActiveGatewayOpen } from '@/store/gateway'
-import { notify } from '@/store/notifications'
 import { setSidebarAgentsGrouped } from '@/store/layout'
+import { notify } from '@/store/notifications'
 import { requestFreshSession } from '@/store/profile'
 import { $selectedStoredSessionId, $sessions, workspaceCwdForNewSession } from '@/store/session'
 import type { ProjectInfo, ProjectsPayload } from '@/types/hermes'
diff --git a/apps/desktop/src/store/starmap.ts b/apps/desktop/src/store/starmap.ts
index 7e5544a8e..b43a52bad 100644
--- a/apps/desktop/src/store/starmap.ts
+++ b/apps/desktop/src/store/starmap.ts
@@ -38,6 +38,25 @@ export async function loadStarmapGraph(force = false): Promise<void> {
   return inflight
 }
 
+/** Drop one node from the cached graph immediately; return rollback. */
+export function evictStarmapNode(id: string): () => void {
+  const prev = $starmapGraph.get()
+
+  if (!prev) {
+    return () => {}
+  }
+
+  const next: StarmapGraph = {
+    ...prev,
+    nodes: prev.nodes.filter(node => node.id !== id),
+    edges: prev.edges.filter(edge => edge.source !== id && edge.target !== id)
+  }
+
+  $starmapGraph.set(next)
+
+  return () => $starmapGraph.set(prev)
+}
+
 /** Drop the cache so the next open refetches against the now-active profile. */
 export function resetStarmapGraph(): void {
   inflight = null
diff --git a/apps/desktop/src/store/subagents.ts b/apps/desktop/src/store/subagents.ts
index c4695db3b..e54f3fc16 100644
--- a/apps/desktop/src/store/subagents.ts
+++ b/apps/desktop/src/store/subagents.ts
@@ -1,5 +1,7 @@
 import { atom } from 'nanostores'
 
+import { capitalize } from '@/lib/text'
+
 export type SubagentStatus = 'completed' | 'failed' | 'interrupted' | 'queued' | 'running'
 export type SubagentStreamKind = 'progress' | 'summary' | 'thinking' | 'tool'
 
@@ -66,12 +68,7 @@ const compact = (text: string, max = PREVIEW_MAX) => {
   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
+const toolLabel = (name: string) => name.split('_').filter(Boolean).map(capitalize).join(' ') || name
 
 const formatTool = (name: string, preview = '') => {
   const snippet = compact(preview, TOOL_PREVIEW_MAX)
diff --git a/apps/desktop/src/store/updates.ts b/apps/desktop/src/store/updates.ts
index f9e76333c..bb5a68284 100644
--- a/apps/desktop/src/store/updates.ts
+++ b/apps/desktop/src/store/updates.ts
@@ -399,6 +399,10 @@ export async function applyUpdates(opts: DesktopUpdateApplyOptions = {}): Promis
           id: UPDATE_TOAST_ID,
           kind: 'success',
           message: translateNow('updates.manualPickedUp'),
+          // No action button here, but it's still update-lifecycle news — keep
+          // it with the other update toasts instead of the ambient bottom-right
+          // stack.
+          placement: 'default',
           title: translateNow('updates.allSetTitle')
         })
       } else {
diff --git a/apps/desktop/src/styles.css b/apps/desktop/src/styles.css
index 3c090e674..e5477bb63 100644
--- a/apps/desktop/src/styles.css
+++ b/apps/desktop/src/styles.css
@@ -556,6 +556,21 @@
   }
 }
 
+/* Interactive list-row hover — the sessions-list interaction, shared by every
+   row list (sessions, capabilities, messaging, file trees, timeline): the
+   highlight lands instantly on hover-in and fades out over 100ms on leave. */
+@utility row-hover {
+  cursor: pointer;
+  transition:
+    color 100ms ease-out,
+    background-color 100ms ease-out;
+
+  &:hover {
+    background-color: var(--ui-row-hover-background);
+    transition: none;
+  }
+}
+
 @keyframes arc-border {
   0% {
     background-position: 15% 15%;
diff --git a/apps/desktop/src/types/hermes.ts b/apps/desktop/src/types/hermes.ts
index e360668c1..63ac7f9de 100644
--- a/apps/desktop/src/types/hermes.ts
+++ b/apps/desktop/src/types/hermes.ts
@@ -509,9 +509,17 @@ export interface AnalyticsResponse {
     summary: AnalyticsSkillsSummary
     top_skills: AnalyticsSkillEntry[]
   }
+  /** Per-tool-name call counts. Absent on older backends. */
+  tools?: AnalyticsToolEntry[]
   totals: AnalyticsTotals
 }
 
+export interface AnalyticsToolEntry {
+  count: number
+  percentage: number
+  tool: string
+}
+
 export interface AnalyticsSkillEntry {
   last_used_at: null | number
   manage_count: number
@@ -640,6 +648,10 @@ export interface SkillInfo {
   description: string
   enabled: boolean
   name: string
+  /** Total observed activity (use + view + patch). Absent on older backends. */
+  usage?: number
+  /** 'agent' = learned/local (editable), 'bundled' = ships with Hermes, 'hub' = installed. */
+  provenance?: 'agent' | 'bundled' | 'hub'
 }
 
 export interface ToolsetInfo {
@@ -894,6 +906,9 @@ export interface SkillHubSource {
   label: string
   available?: boolean
   rate_limited?: boolean
+  // False when the centralized index already covers this source, so the UI's
+  // per-source search fan-out skips it (avoids redundant external API calls).
+  searchable?: boolean
 }
 
 /** A searchable/installable hub skill from `GET /api/skills/hub/search`. */
diff --git a/hermes_cli/logs.py b/hermes_cli/logs.py
index 220051f73..b27c5fa4c 100644
--- a/hermes_cli/logs.py
+++ b/hermes_cli/logs.py
@@ -35,6 +35,9 @@ LOG_FILES = {
     "gateway": "gateway.log",
     "gui": "gui.log",
     "desktop": "desktop.log",
+    # Every stdio MCP subprocess's stderr (tools/mcp_tool.py redirects it
+    # here, with per-server session markers) — the "MCP output channel".
+    "mcp": "mcp-stderr.log",
 }
 
 # Log line timestamp regex — matches "2026-04-05 22:35:00,123" or
diff --git a/hermes_cli/mcp_config.py b/hermes_cli/mcp_config.py
index 56e98b722..29f6499c7 100644
--- a/hermes_cli/mcp_config.py
+++ b/hermes_cli/mcp_config.py
@@ -26,7 +26,7 @@ from hermes_cli.config import (
 from hermes_cli.colors import Colors, color
 from hermes_constants import display_hermes_home
 from hermes_cli.mcp_security import validate_mcp_server_entry
-from tools.mcp_tool import _ENV_VAR_PATTERN
+from tools.mcp_tool import _ENV_VAR_PATTERN, _env_ref_name
 
 logger = logging.getLogger(__name__)
 
@@ -117,6 +117,39 @@ def _remove_mcp_server(name: str) -> bool:
     return True
 
 
+def _replace_mcp_servers(servers: Dict[str, dict]) -> Tuple[bool, List[str]]:
+    """Replace the WHOLE ``mcp_servers`` map in config.yaml.
+
+    Unlike ``_save_mcp_server`` (per-key upsert), this sets the entire map so
+    the GUI's mcp.json editor can delete servers, drop an ``enabled: false``
+    flag (re-enable), or remove nested fields and have those *removals* land on
+    disk.  A plain ``/api/config`` deep-merge can only add/override keys, never
+    delete them — which is why edits appeared to succeed but the old entry
+    survived (see MCP tab persistence bug).
+
+    Every entry is validated up front; on any suspicious command/args the whole
+    save is rejected (returns ``(False, issues)``) so a bad paste can't be
+    partially applied.  An empty map removes the key entirely.
+    """
+    issues: List[str] = []
+    for name, cfg in servers.items():
+        if not isinstance(cfg, dict):
+            issues.append(f"Server '{name}': expected an object")
+            continue
+        issues.extend(validate_mcp_server_entry(name, cfg))
+
+    if issues:
+        return False, issues
+
+    config = load_config()
+    if servers:
+        config["mcp_servers"] = dict(servers)
+    else:
+        config.pop("mcp_servers", None)
+    save_config(config)
+    return True, []
+
+
 def _env_key_for_server(name: str) -> str:
     """Convert server name to an env-var key like ``MCP_MYSERVER_API_KEY``."""
     return f"MCP_{name.upper().replace('-', '_')}_API_KEY"
@@ -214,12 +247,16 @@ def _resolve_mcp_server_config(config: dict) -> dict:
 
 
 def _probe_single_server(
-    name: str, config: dict, connect_timeout: float = 30
+    name: str, config: dict, connect_timeout: float = 30, *, details: Optional[dict] = None
 ) -> List[Tuple[str, str]]:
     """Temporarily connect to one MCP server, list its tools, disconnect.
 
     Returns list of ``(tool_name, description)`` tuples.
     Raises on connection failure.
+
+    ``details``: optional dict the probe fills with extra capability counts
+    (``prompts``, ``resources``) — an out-param so the return shape stays
+    stable for existing CLI callers.
     """
     issues = validate_mcp_server_entry(name, config)
     if issues:
@@ -249,6 +286,19 @@ def _probe_single_server(
                 if len(desc) > 80:
                     desc = desc[:77] + "..."
                 tools_found.append((t.name, desc))
+            if details is not None:
+                # Capability probes are best-effort: servers without the
+                # capability raise, which just means "0".
+                try:
+                    result = await server.session.list_prompts()
+                    details["prompts"] = len(result.prompts)
+                except Exception:
+                    pass
+                try:
+                    result = await server.session.list_resources()
+                    details["resources"] = len(result.resources)
+                except Exception:
+                    pass
         finally:
             await server.shutdown()
 
@@ -632,8 +682,8 @@ def cmd_mcp_test(args):
     elif headers:
         for k, v in headers.items():
             if isinstance(v, str) and ("key" in k.lower() or "auth" in k.lower()):
-                # Mask the value
-                resolved = _ENV_VAR_PATTERN.sub(lambda m: os.getenv(m.group(1), ""), v)
+                # Mask the value (accepts ${VAR} and Cursor-style ${env:VAR})
+                resolved = _ENV_VAR_PATTERN.sub(lambda m: os.getenv(_env_ref_name(m.group(1)), ""), v)
                 if len(resolved) > 8:
                     masked = resolved[:4] + "***" + resolved[-4:]
                 else:
diff --git a/hermes_cli/web_server.py b/hermes_cli/web_server.py
index 4231c8395..c3af49f25 100644
--- a/hermes_cli/web_server.py
+++ b/hermes_cli/web_server.py
@@ -19,6 +19,7 @@ import concurrent.futures
 import functools
 from dataclasses import dataclass
 from datetime import datetime, timezone
+import hashlib
 import hmac
 import importlib.util
 import json
@@ -8829,6 +8830,12 @@ class MCPServerCreate(BaseModel):
     profile: Optional[str] = None
 
 
+class MCPServersReplace(BaseModel):
+    # Whole-map replace (name → raw server config) for the GUI mcp.json editor.
+    servers: Dict[str, Dict[str, Any]] = {}
+    profile: Optional[str] = None
+
+
 def _redact_mcp_env(env: Dict[str, Any]) -> Dict[str, str]:
     """Mask secret-shaped MCP env values for read responses."""
     out: Dict[str, str] = {}
@@ -8914,6 +8921,25 @@ async def add_mcp_server(body: MCPServerCreate, profile: Optional[str] = None):
     return _mcp_server_summary(name, server_config)
 
 
+@app.put("/api/mcp/servers")
+async def replace_mcp_servers(body: MCPServersReplace, profile: Optional[str] = None):
+    """Replace the entire ``mcp_servers`` map (the GUI mcp.json editor's save).
+
+    The generic ``/api/config`` endpoint deep-merges maps, so it can never
+    delete a server key, drop an ``enabled: false`` flag, or remove a nested
+    field — edits looked saved but the stale entry survived on disk.  This
+    endpoint sets the whole map so removals actually persist.  Storage stays
+    the config.yaml ``mcp_servers`` key the CLI/TUI already read.
+    """
+    from hermes_cli.mcp_config import _replace_mcp_servers
+
+    with _profile_scope(body.profile or profile):
+        ok, issues = _replace_mcp_servers(body.servers)
+    if not ok:
+        raise HTTPException(status_code=400, detail="; ".join(issues))
+    return {"ok": True}
+
+
 @app.delete("/api/mcp/servers/{name}")
 async def remove_mcp_server(name: str, profile: Optional[str] = None):
     from hermes_cli.mcp_config import _remove_mcp_server
@@ -8928,43 +8954,166 @@ async def remove_mcp_server(name: str, profile: Optional[str] = None):
 @app.post("/api/mcp/servers/{name}/test")
 async def test_mcp_server(name: str, profile: Optional[str] = None):
     """Connect to the server, list its tools, disconnect.  Returns tool list."""
-    from hermes_cli.mcp_config import _get_mcp_servers, _probe_single_server
+    from hermes_cli.mcp_config import (
+        _get_mcp_servers,
+        _oauth_tokens_present,
+        _probe_single_server,
+    )
 
     with _profile_scope(profile):
         servers = _get_mcp_servers()
     if name not in servers:
         raise HTTPException(status_code=404, detail=f"Server '{name}' not found")
 
+    details: Dict[str, Any] = {}
+    # An `auth: oauth` server that serves tools/list anonymously would probe OK
+    # with no token — a false green. Require a token on disk for it, matching the
+    # /auth verification (some providers don't enforce auth on tools/list).
+    needs_oauth_token = servers[name].get("auth") == "oauth"
+
     def _probe_scoped():
-        # Re-enter the scope INSIDE the worker thread so call-time
-        # resolution during the probe — env-placeholder expansion in
-        # _resolve_mcp_server_config reading the profile's .env — sees the
-        # selected profile, matching the config the server was saved into.
-        # (asyncio.to_thread copies contextvars, but entering explicitly
-        # keeps the lock-protected SKILLS_DIR swap balanced per-thread.)
-        # The probe's dedicated MCP event-loop thread is covered too:
-        # _run_on_mcp_loop wraps scheduled coroutines with the caller's
-        # HERMES_HOME override (see mcp_tool._wrap_with_home_override), so
-        # OAuth token stores resolve against the selected profile as well.
-        with _profile_scope(profile):
-            return _probe_single_server(name, servers[name])
+        # Home-only scope (contextvar), NOT _profile_scope. A probe blocks for
+        # as long as the server takes to spawn/connect — a stdio `npx` cold
+        # start is many seconds — and _profile_scope holds a process-global
+        # skills lock for its ENTIRE body. Holding that across the probe
+        # serialized every other endpoint (config/skills/toolsets all take the
+        # same lock), so a slow server made unrelated requests time out at 15s.
+        # The probe touches no skills globals; it only needs the HERMES_HOME
+        # override for .env interpolation + OAuth token resolution, which the
+        # contextvar provides (copied into this to_thread worker; and
+        # _run_on_mcp_loop re-wraps it onto the MCP event-loop thread).
+        with _config_profile_scope(profile):
+            tools = _probe_single_server(name, servers[name], details=details)
+            token_present = _oauth_tokens_present(name) if needs_oauth_token else True
+            return tools, token_present
 
     try:
         # Probe blocks on a dedicated MCP event loop — run in a thread so the
         # FastAPI event loop is never blocked.
-        tools = await asyncio.to_thread(_probe_scoped)
+        tools, token_present = await asyncio.to_thread(_probe_scoped)
     except Exception as exc:
         return {
             "ok": False,
             "error": str(exc),
             "tools": [],
         }
+    if not token_present:
+        return {
+            "ok": False,
+            "error": "OAuth authentication required — no token found.",
+            "tools": [],
+        }
     return {
         "ok": True,
         "tools": [{"name": t, "description": d} for t, d in tools],
+        "prompts": details.get("prompts", 0),
+        "resources": details.get("resources", 0),
     }
 
 
+@app.post("/api/mcp/servers/{name}/auth")
+async def auth_mcp_server(name: str, profile: Optional[str] = None):
+    """Run the OAuth flow for an HTTP MCP server (opens the system browser).
+
+    Mirrors ``hermes mcp login``: wipe cached OAuth state so the probe forces
+    a fresh browser flow, connect, then verify a token actually landed on disk
+    (some providers serve tools/list unauthenticated — see
+    ``_reauth_oauth_server``).  Blocks until the browser flow completes, so it
+    runs in a worker thread.  ``auth: oauth`` is persisted only on success.
+    """
+    from hermes_cli.mcp_config import (
+        _get_mcp_servers,
+        _oauth_tokens_present,
+        _probe_single_server,
+        _save_mcp_server,
+    )
+
+    with _profile_scope(profile):
+        servers = _get_mcp_servers()
+    if name not in servers:
+        raise HTTPException(status_code=404, detail=f"Server '{name}' not found")
+
+    cfg = dict(servers[name])
+    if not cfg.get("url"):
+        raise HTTPException(
+            status_code=400,
+            detail="stdio servers authenticate via env keys, not OAuth",
+        )
+    # A server carrying `headers` uses API-key/bearer auth; a 401 there is a bad
+    # key, not an OAuth prompt. Refuse rather than rewrite it to `auth: oauth`
+    # and corrupt a working header-auth config. (Explicit `auth: oauth` is fine.)
+    if cfg.get("headers") and cfg.get("auth") != "oauth":
+        raise HTTPException(
+            status_code=400,
+            detail="This server uses header/API-key auth, not OAuth — check its key.",
+        )
+    cfg["auth"] = "oauth"
+
+    def _run():
+        from tools.mcp_oauth import HermesTokenStorage, force_interactive_oauth
+
+        # Home-only scope, not _profile_scope: this blocks on the browser flow
+        # for up to minutes; holding the shared skills lock that whole time
+        # would freeze every other endpoint. Config writes here (_save_mcp_server)
+        # resolve HERMES_HOME via the contextvar override, which is all they need.
+        with _config_profile_scope(profile), force_interactive_oauth():
+            storage = HermesTokenStorage(name)
+            # Snapshot before clearing: a re-auth wipes cached state to force a
+            # fresh consent, but if the flow fails we must NOT leave the user
+            # worse off than before — restore the working token on any failure.
+            backup = storage.snapshot()
+            try:
+                from tools.mcp_oauth_manager import get_manager
+
+                get_manager().remove(name)
+            except Exception:
+                pass  # No cached state to clear — fine.
+            try:
+                # The default 30s connect timeout would kill the flow while the
+                # user is still on the consent screen — give the browser
+                # round-trip the full callback window (300s in mcp_oauth) plus
+                # headroom so the connect wrapper can't pre-empt it.
+                tools = _probe_single_server(name, cfg, connect_timeout=315)
+            except Exception:
+                storage.restore(backup)
+                raise
+            if not _oauth_tokens_present(name):
+                storage.restore(backup)
+                return {
+                    "ok": False,
+                    "error": (
+                        "The server responded, but no OAuth token was obtained — "
+                        "this provider may require a manually-registered OAuth "
+                        "client (see `hermes mcp login`)."
+                    ),
+                    "tools": [],
+                }
+            _save_mcp_server(name, cfg)
+            return {
+                "ok": True,
+                "tools": [{"name": t, "description": d} for t, d in tools],
+            }
+
+    try:
+        return await asyncio.to_thread(_run)
+    except Exception as exc:
+        msg = str(exc)
+        # Providers that gate RFC 7591 registration to pre-approved clients
+        # (Figma's MCP catalog, etc.) 403 the register call before any
+        # authorization URL exists — surface what's actually happening
+        # instead of a bare "403 Forbidden".
+        lowered = msg.lower()
+        if "403" in msg and ("regist" in lowered or "forbidden" in lowered):
+            msg = (
+                f"'{name}' only allows pre-approved OAuth clients — it rejected "
+                "client registration (403), so no browser flow can start. "
+                "Options: add a pre-registered client to this server's entry "
+                "(oauth: {client_id: ..., client_secret: ...}), or use the "
+                "provider's stdio / API-key server instead."
+            )
+        return {"ok": False, "error": msg, "tools": []}
+
+
 class MCPEnabledToggle(BaseModel):
     enabled: bool
     profile: Optional[str] = None
@@ -9106,16 +9255,20 @@ async def install_mcp_catalog_entry(body: MCPCatalogInstall, profile: Optional[s
     # action path so the request returns immediately and the UI can tail logs.
     # The -p subprocess rebinds HERMES_HOME-derived paths in the child.
     if entry.install is not None:
+        # Unique per-entry action name: a shared "mcp-install" would let a
+        # re-click (or a second entry) overwrite the tracked process/log while
+        # the first clone is still running.
+        action = _mcp_install_action_name(name)
         try:
             proc = _spawn_hermes_action(
                 _profile_cli_args(effective_profile) + ["mcp", "install", name],
-                "mcp-install",
+                action,
             )
         except HTTPException:
             raise
         except Exception as exc:
             raise HTTPException(status_code=500, detail=f"Install failed: {exc}")
-        return {"ok": True, "name": name, "background": True, "action": "mcp-install"}
+        return {"ok": True, "name": name, "background": True, "action": action}
 
     # No git step — install synchronously via the catalog API. install_entry
     # routes through load_config/save_config + save_env_value, all call-time
@@ -9137,8 +9290,17 @@ async def install_mcp_catalog_entry(body: MCPCatalogInstall, profile: Optional[s
     return {"ok": True, "name": name, "background": False}
 
 
-# Register the mcp-install action log so /api/actions/mcp-install/status works.
-_ACTION_LOG_FILES.setdefault("mcp-install", "action-mcp-install.log")
+def _mcp_install_action_name(name: str) -> str:
+    """Unique per-entry mcp-install action name (+ registered log file), so a
+    re-click or a second catalog install doesn't overwrite the first's tracked
+    process/log while its git clone is still running."""
+    slug = re.sub(r"[^a-z0-9]+", "-", name.lower()).strip("-")[:48] or "server"
+    digest = hashlib.sha1(name.encode()).hexdigest()[:8]
+    action = f"mcp-install-{slug}-{digest}"
+    _ACTION_LOG_FILES.setdefault(action, f"action-{action}.log")
+    return action
+
+
 _ACTION_LOG_FILES.setdefault("computer-use-grant", "action-computer-use-grant.log")
 
 
@@ -10084,23 +10246,39 @@ def _profile_cli_args(profile: Optional[str]) -> List[str]:
     return ["-p", profiles_mod.normalize_profile_name(requested)]
 
 
+def _hub_action_name(verb: str, key: str) -> str:
+    """Unique per-skill hub action name (+ registered log file).
+
+    ``_spawn_hermes_action`` tracks one process/log per name, so a shared
+    "skills-install"/"skills-uninstall" would make concurrent row-level actions
+    overwrite each other's status/log while the UI polls per identifier. Slug
+    (readable) + hash (collision-proof) keys each action to its own row.
+    """
+    slug = re.sub(r"[^a-z0-9]+", "-", key.lower()).strip("-")[:48] or "skill"
+    digest = hashlib.sha1(key.encode()).hexdigest()[:8]
+    name = f"skills-{verb}-{slug}-{digest}"
+    _ACTION_LOG_FILES.setdefault(name, f"action-{name}.log")
+    return name
+
+
 @app.post("/api/skills/hub/install")
 async def install_skill_hub(body: SkillInstallRequest, profile: Optional[str] = None):
     identifier = (body.identifier or "").strip()
     if not identifier:
         raise HTTPException(status_code=400, detail="identifier is required")
+    name = _hub_action_name("install", identifier)
     try:
         proc = _spawn_hermes_action(
             _profile_cli_args(body.profile or profile)
             + ["skills", "install", identifier, "--yes"],
-            "skills-install",
+            name,
         )
     except HTTPException:
         raise
     except Exception as exc:
         _log.exception("Failed to spawn skills install")
         raise HTTPException(status_code=500, detail=f"Failed to install skill: {exc}")
-    return {"ok": True, "pid": proc.pid, "name": "skills-install"}
+    return {"ok": True, "pid": proc.pid, "name": name}
 
 
 class SkillUninstallRequest(BaseModel):
@@ -10113,17 +10291,18 @@ async def uninstall_skill_hub(body: SkillUninstallRequest, profile: Optional[str
     name = (body.name or "").strip()
     if not name:
         raise HTTPException(status_code=400, detail="name is required")
+    action = _hub_action_name("uninstall", name)
     try:
         proc = _spawn_hermes_action(
             _profile_cli_args(body.profile or profile) + ["skills", "uninstall", name, "--yes"],
-            "skills-uninstall",
+            action,
         )
     except HTTPException:
         raise
     except Exception as exc:
         _log.exception("Failed to spawn skills uninstall")
         raise HTTPException(status_code=500, detail=f"Failed to uninstall skill: {exc}")
-    return {"ok": True, "pid": proc.pid, "name": "skills-uninstall"}
+    return {"ok": True, "pid": proc.pid, "name": action}
 
 
 class SkillsUpdateRequest(BaseModel):
@@ -10220,7 +10399,8 @@ async def list_skills_hub_sources(profile: Optional[str] = None):
     def _run():
         from tools.skills_hub import create_source_router
 
-        sources = create_source_router()
+        with _config_profile_scope(profile):
+            sources = create_source_router()
         out = []
         index_available = False
         featured = []
@@ -10251,6 +10431,17 @@ async def list_skills_hub_sources(profile: Optional[str] = None):
                     except Exception:
                         featured = []
             out.append(entry)
+        # Tell the UI which sources are worth searching individually (for its
+        # progressive per-source fan-out). Mirror parallel_search_sources: when
+        # the centralized index is available it already subsumes the external
+        # API sources, so they're redundant — skipping them avoids ~70 GitHub
+        # calls per keystroke. Keep this set in sync with that function's
+        # ``_api_source_ids``.
+        _api_source_ids = frozenset(
+            {"github", "skills-sh", "clawhub", "claude-marketplace", "lobehub", "well-known"}
+        )
+        for entry in out:
+            entry["searchable"] = not (index_available and entry["id"] in _api_source_ids)
         return {
             "sources": out,
             "index_available": index_available,
@@ -10285,7 +10476,8 @@ async def search_skills_hub(
     def _run():
         from tools.skills_hub import create_source_router, parallel_search_sources
 
-        sources = create_source_router()
+        with _config_profile_scope(profile):
+            sources = create_source_router()
         capped = min(max(limit, 1), 50)
         all_results, source_counts, timed_out = parallel_search_sources(
             sources, query=query, source_filter=source or "all", overall_timeout=30
@@ -10318,13 +10510,16 @@ async def search_skills_hub(
 
 
 @app.get("/api/skills/hub/preview")
-async def preview_skill_hub(identifier: str = ""):
+async def preview_skill_hub(identifier: str = "", profile: Optional[str] = None):
     """Fetch a hub skill's SKILL.md content + metadata for in-dashboard reading.
 
     Resolves the identifier across configured sources (same path the CLI
     installer uses), then returns the rendered SKILL.md text and the file
     manifest WITHOUT installing anything.  This is the 'read the actual skill
     before installing' affordance the Browse-hub tab was missing.
+
+    Scoped to ``profile`` so a non-default profile with different hub taps
+    resolves against ITS source router, not the default profile's.
     """
     ident = (identifier or "").strip()
     if not ident:
@@ -10334,8 +10529,9 @@ async def preview_skill_hub(identifier: str = ""):
         from hermes_cli.skills_hub import _resolve_source_meta_and_bundle
         from tools.skills_hub import create_source_router
 
-        sources = create_source_router()
-        meta, bundle, _src = _resolve_source_meta_and_bundle(ident, sources)
+        with _config_profile_scope(profile):
+            sources = create_source_router()
+            meta, bundle, _src = _resolve_source_meta_and_bundle(ident, sources)
         if not bundle and not meta:
             return None
 
@@ -10379,7 +10575,7 @@ async def preview_skill_hub(identifier: str = ""):
 
 
 @app.get("/api/skills/hub/scan")
-async def scan_skill_hub(identifier: str = ""):
+async def scan_skill_hub(identifier: str = "", profile: Optional[str] = None):
     """Run the install-time security scan on a hub skill WITHOUT installing it.
 
     Fetches the bundle, quarantines it, and runs the same `scan_skill` /
@@ -10387,6 +10583,9 @@ async def scan_skill_hub(identifier: str = ""):
     quarantine.  Returns the verdict, per-finding detail, trust tier, and the
     install-policy decision so the dashboard can show a visual safety result
     on demand (the 'scan' button the Browse-hub tab was missing).
+
+    Scoped to ``profile`` so the bundle resolves against that profile's hub
+    source router, matching where an install would pull it from.
     """
     ident = (identifier or "").strip()
     if not ident:
@@ -10399,8 +10598,9 @@ async def scan_skill_hub(identifier: str = ""):
         from tools.skills_hub import create_source_router, quarantine_bundle
         from tools.skills_guard import scan_skill, should_allow_install
 
-        sources = create_source_router()
-        meta, bundle, _src = _resolve_source_meta_and_bundle(ident, sources)
+        with _config_profile_scope(profile):
+            sources = create_source_router()
+            meta, bundle, _src = _resolve_source_meta_and_bundle(ident, sources)
         if not bundle:
             return None
 
@@ -10842,7 +11042,7 @@ async def create_profile_endpoint(body: ProfileCreate):
         try:
             proc = _spawn_hermes_action(
                 ["-p", body.name, "skills", "install", ident, "--yes"],
-                "skills-install",
+                _hub_action_name("install", ident),
             )
             hub_installs.append({"identifier": ident, "pid": proc.pid})
         except Exception:
@@ -11209,12 +11409,31 @@ class SkillToggle(BaseModel):
 async def get_skills(profile: Optional[str] = None):
     from tools.skills_tool import _find_all_skills
     from hermes_cli.skills_config import get_disabled_skills
+    from tools.skill_usage import (
+        _read_bundled_manifest_names,
+        _read_hub_installed_names,
+        activity_count,
+        load_usage,
+    )
     with _profile_scope(profile):
         config = load_config()
         disabled = get_disabled_skills(config)
         skills = _find_all_skills(skip_disabled=True)
+        usage = load_usage()
+        # Set-based provenance (same classification as skill_usage.provenance,
+        # without a per-skill manifest read): hub > bundled > agent, where
+        # "agent" covers agent-authored AND local hand-made skills — the ones
+        # the user may edit/delete from the UI.
+        bundled_names = _read_bundled_manifest_names()
+        hub_names = _read_hub_installed_names()
     for s in skills:
         s["enabled"] = s["name"] not in disabled
+        s["usage"] = activity_count(usage.get(s["name"], {}))
+        s["provenance"] = (
+            "hub" if s["name"] in hub_names
+            else "bundled" if s["name"] in bundled_names
+            else "agent"
+        )
     return skills
 
 
@@ -11932,6 +12151,9 @@ async def get_usage_analytics(days: int = 30, profile: Optional[str] = None):
             "totals": totals,
             "period_days": days,
             "skills": skills,
+            # Per-tool-name call counts (already computed by InsightsEngine);
+            # the desktop Capabilities page aggregates these per toolset.
+            "tools": insights_report.get("tools", []),
         }
     finally:
         db.close()
diff --git a/tests/hermes_cli/test_mcp_config.py b/tests/hermes_cli/test_mcp_config.py
index d052499bf..3986fe712 100644
--- a/tests/hermes_cli/test_mcp_config.py
+++ b/tests/hermes_cli/test_mcp_config.py
@@ -490,6 +490,27 @@ class TestEnvVarInterpolation:
         assert _interpolate_env_vars(True) is True
         assert _interpolate_env_vars(None) is None
 
+    def test_interpolate_cursor_env_prefix(self, monkeypatch):
+        """Cursor-style ${env:VAR} resolves the same secret as ${VAR}."""
+        monkeypatch.setenv("MY_KEY", "secret123")
+        from tools.mcp_tool import _interpolate_env_vars
+
+        assert _interpolate_env_vars("Bearer ${env:MY_KEY}") == "Bearer secret123"
+
+    def test_interpolate_cursor_env_prefix_missing(self, monkeypatch):
+        """An unset ${env:VAR} keeps its literal placeholder, like ${VAR}."""
+        monkeypatch.delenv("MISSING_VAR", raising=False)
+        from tools.mcp_tool import _interpolate_env_vars
+
+        assert _interpolate_env_vars("Bearer ${env:MISSING_VAR}") == "Bearer ${env:MISSING_VAR}"
+
+    def test_env_ref_name_strips_prefix(self):
+        from tools.mcp_tool import _env_ref_name
+
+        assert _env_ref_name("env:API_KEY") == "API_KEY"
+        assert _env_ref_name("API_KEY") == "API_KEY"
+        assert _env_ref_name(" env:API_KEY ") == "API_KEY"
+
 
 # ---------------------------------------------------------------------------
 # Tests: probe-path env resolution (#37792)
diff --git a/tests/hermes_cli/test_web_server.py b/tests/hermes_cli/test_web_server.py
index cbd714bd9..7797be631 100644
--- a/tests/hermes_cli/test_web_server.py
+++ b/tests/hermes_cli/test_web_server.py
@@ -3551,7 +3551,7 @@ class TestNewEndpoints:
         assert spawned == [
             (
                 ["-p", "builder", "skills", "install", "someuser/some-skill", "--yes"],
-                "skills-install",
+                web_server._hub_action_name("install", "someuser/some-skill"),
             )
         ]
 
@@ -3800,12 +3800,16 @@ class TestNewEndpoints:
                 "description": "active",
                 "category": "demo",
                 "enabled": True,
+                "usage": 0,
+                "provenance": "agent",
             },
             {
                 "name": "disabled-skill",
                 "description": "disabled",
                 "category": "demo",
                 "enabled": False,
+                "usage": 0,
+                "provenance": "agent",
             },
         ]
 
diff --git a/tests/hermes_cli/test_web_server_profile_unification.py b/tests/hermes_cli/test_web_server_profile_unification.py
index 40dde33ae..a7fc21459 100644
--- a/tests/hermes_cli/test_web_server_profile_unification.py
+++ b/tests/hermes_cli/test_web_server_profile_unification.py
@@ -188,7 +188,7 @@ class TestProfileScopedMcp:
         )
         seen = {}
 
-        def fake_probe(name, config, connect_timeout=30):
+        def fake_probe(name, config, connect_timeout=30, details=None):
             seen["home"] = str(get_hermes_home())
             return [("tool-a", "desc")]
 
@@ -200,6 +200,39 @@ class TestProfileScopedMcp:
         assert resp.json()["ok"] is True
         assert seen["home"] == str(isolated_profiles["worker_beta"])
 
+    def test_mcp_test_oauth_server_without_token_is_not_ok(
+        self, client, isolated_profiles, monkeypatch
+    ):
+        """An `auth: oauth` server that serves tools/list anonymously must not
+        false-green: a successful probe with no token on disk reports needs-auth."""
+        import hermes_cli.mcp_config as mcp_config
+
+        (isolated_profiles["worker_beta"] / "config.yaml").write_text(
+            "mcp_servers:\n  oauth-srv:\n    url: http://x/sse\n    auth: oauth\n",
+            encoding="utf-8",
+        )
+        monkeypatch.setattr(
+            mcp_config,
+            "_probe_single_server",
+            lambda name, config, connect_timeout=30, details=None: [("tool-a", "desc")],
+        )
+        monkeypatch.setattr(mcp_config, "_oauth_tokens_present", lambda name: False)
+
+        resp = client.post(
+            "/api/mcp/servers/oauth-srv/test", params={"profile": "worker_beta"}
+        )
+        assert resp.status_code == 200
+        body = resp.json()
+        assert body["ok"] is False
+        assert "oauth" in body["error"].lower()
+
+        # With a token present, the same probe is genuinely authenticated.
+        monkeypatch.setattr(mcp_config, "_oauth_tokens_present", lambda name: True)
+        resp = client.post(
+            "/api/mcp/servers/oauth-srv/test", params={"profile": "worker_beta"}
+        )
+        assert resp.json()["ok"] is True
+
     def test_mcp_remove_scoped(self, client, isolated_profiles):
         (isolated_profiles["worker_beta"] / "config.yaml").write_text(
             "mcp_servers:\n  srv2:\n    url: http://x/sse\n", encoding="utf-8"
diff --git a/tests/hermes_cli/test_web_server_skills_profiles.py b/tests/hermes_cli/test_web_server_skills_profiles.py
index 76325d628..df62dd833 100644
--- a/tests/hermes_cli/test_web_server_skills_profiles.py
+++ b/tests/hermes_cli/test_web_server_skills_profiles.py
@@ -180,7 +180,7 @@ class TestProfileScopedHubActions:
         assert calls == [
             (
                 ["-p", "worker_alpha", "skills", "install", "official/demo", "--yes"],
-                "skills-install",
+                web_server._hub_action_name("install", "official/demo"),
             )
         ]
 
diff --git a/tools/mcp_oauth.py b/tools/mcp_oauth.py
index db70cd4b9..80bf30b09 100644
--- a/tools/mcp_oauth.py
+++ b/tools/mcp_oauth.py
@@ -104,6 +104,15 @@ _oauth_interactive_enabled: "contextvars.ContextVar[bool]" = contextvars.Context
     "_oauth_interactive_enabled", default=True
 )
 
+# Forces _is_interactive() past the stdin-TTY check for flows driven from a
+# GUI (dashboard/desktop REST): the browser + localhost callback server do all
+# the work there, and the stdin paste fallback degrades harmlessly (EOF is
+# swallowed by _paste_callback_reader). Suppression still wins — background
+# discovery must never start a browser flow.
+_oauth_interactive_forced: "contextvars.ContextVar[bool]" = contextvars.ContextVar(
+    "_oauth_interactive_forced", default=False
+)
+
 
 # Skip tokens accepted at the paste prompt — exit OAuth without auth.
 _SKIP_TOKENS = frozenset({"skip", "cancel", "s", "n", "no", "q", "quit"})
@@ -150,12 +159,30 @@ def _is_interactive() -> bool:
     """Return True if we can reasonably expect to interact with a user."""
     if not _oauth_interactive_enabled.get():
         return False
+    if _oauth_interactive_forced.get():
+        return True
     try:
         return sys.stdin.isatty()
     except (AttributeError, ValueError):
         return False
 
 
+@contextmanager
+def force_interactive_oauth():
+    """Treat the current execution context as interactive despite no TTY.
+
+    For GUI-driven auth (dashboard/desktop REST endpoint): the user IS present
+    — just not on stdin. Opens the browser + localhost callback flow that the
+    TTY heuristic would otherwise refuse. Same ContextVar propagation story as
+    suppress_interactive_oauth() (#35927).
+    """
+    token = _oauth_interactive_forced.set(True)
+    try:
+        yield
+    finally:
+        _oauth_interactive_forced.reset(token)
+
+
 @contextmanager
 def suppress_interactive_oauth():
     """Disable stdin-based OAuth prompts for the current execution context.
@@ -372,6 +399,41 @@ class HermesTokenStorage:
         for p in (self._tokens_path(), self._client_info_path(), self._meta_path()):
             p.unlink(missing_ok=True)
 
+    def snapshot(self) -> dict[str, bytes]:
+        """Capture on-disk OAuth state so a failed re-auth can restore it.
+
+        Maps filename -> bytes for whichever of the three state files exist.
+        Feed back to ``restore()`` to undo an intervening ``remove()`` when a
+        re-authentication attempt fails, so a still-valid token isn't destroyed.
+        """
+        snap: dict[str, bytes] = {}
+        for p in (self._tokens_path(), self._client_info_path(), self._meta_path()):
+            try:
+                snap[p.name] = p.read_bytes()
+            except OSError:
+                pass
+        return snap
+
+    def restore(self, snapshot: dict[str, bytes]) -> None:
+        """Revert to a ``snapshot()`` capture (dropping any newer partial state)."""
+        self.remove()
+        if not snapshot:
+            return
+        token_dir = _get_token_dir()
+        token_dir.mkdir(parents=True, exist_ok=True)
+        for fname, data in snapshot.items():
+            path = token_dir / fname
+            try:
+                fd = os.open(
+                    str(path),
+                    os.O_WRONLY | os.O_CREAT | os.O_TRUNC,
+                    stat.S_IRUSR | stat.S_IWUSR,
+                )
+                with os.fdopen(fd, "wb") as fh:
+                    fh.write(data)
+            except OSError as exc:
+                logger.warning("Failed to restore OAuth state %s: %s", fname, exc)
+
     def poison_client_registration(self) -> bool:
         """Discard a dead dynamically-registered client so it gets re-created.
 
diff --git a/tools/mcp_tool.py b/tools/mcp_tool.py
index 5622d68be..56dd228ca 100644
--- a/tools/mcp_tool.py
+++ b/tools/mcp_tool.py
@@ -359,6 +359,19 @@ _CREDENTIAL_PATTERN = re.compile(
 _ENV_VAR_PATTERN = re.compile(r"\$\{([^}]+)\}")
 
 
+def _env_ref_name(ref: str) -> str:
+    """Normalize a ``${...}`` reference body into an env-var name.
+
+    Accepts Cursor-style ``${env:VAR}`` in addition to plain ``${VAR}`` by
+    stripping a leading ``env:`` prefix. The result is the bare variable name
+    to look up in the secret scope / ``os.environ``.
+    """
+    ref = ref.strip()
+    if ref.startswith("env:"):
+        ref = ref[len("env:"):].strip()
+    return ref
+
+
 # ---------------------------------------------------------------------------
 # Security helpers
 # ---------------------------------------------------------------------------
@@ -3207,17 +3220,20 @@ def _interrupted_call_result() -> str:
 def _interpolate_env_vars(value):
     """Recursively resolve ``${VAR}`` placeholders.
 
-    Resolves from the active profile's secret scope when multiplexing is on
-    (so an MCP server config's ``${API_KEY}`` picks up the routed profile's
-    value, not the process-global ``os.environ`` which may hold another
-    profile's), falling back to ``os.environ`` otherwise. Unset vars keep the
-    literal ``${VAR}`` placeholder, as before.
+    Both ``${VAR}`` and Cursor-style ``${env:VAR}`` are accepted — the
+    ``env:`` prefix is stripped so a doc copied from a Cursor / Claude MCP
+    config resolves the same secret. Resolves from the active profile's secret
+    scope when multiplexing is on (so an MCP server config's ``${API_KEY}``
+    picks up the routed profile's value, not the process-global ``os.environ``
+    which may hold another profile's), falling back to ``os.environ``
+    otherwise. Unset vars keep the literal placeholder, as before.
     """
     from agent.secret_scope import get_secret as _get_secret
 
     if isinstance(value, str):
         def _replace(m):
-            return _get_secret(m.group(1), m.group(0)) or m.group(0)
+            name = _env_ref_name(m.group(1))
+            return _get_secret(name, m.group(0)) or m.group(0)
         return _ENV_VAR_PATTERN.sub(_replace, value)
     if isinstance(value, dict):
         return {k: _interpolate_env_vars(v) for k, v in value.items()}