diff --git a/desktop/public/fonts/material-symbols-outlined.woff2 b/desktop/public/fonts/material-symbols-outlined.woff2
deleted file mode 100644
index 44cb1e96..00000000
Binary files a/desktop/public/fonts/material-symbols-outlined.woff2 and /dev/null differ
diff --git a/desktop/src/__tests__/agentsSettings.test.tsx b/desktop/src/__tests__/agentsSettings.test.tsx
index 0f652db3..cd43649f 100644
--- a/desktop/src/__tests__/agentsSettings.test.tsx
+++ b/desktop/src/__tests__/agentsSettings.test.tsx
@@ -136,8 +136,10 @@ const MOCK_SKILL_DETAIL = {
   skillRoot: '/tmp/skill-docs',
 }
 
+// By role, not text: the pane's page title is the nav label verbatim, so once
+// the Agents pane is open "Agents" names both the rail entry and the heading.
 function switchToAgentsTab() {
-  fireEvent.click(screen.getByText('Agents'))
+  fireEvent.click(screen.getByRole('button', { name: 'Agents' }))
 }
 
 function switchToSkillsTab() {
@@ -192,7 +194,15 @@ describe('Settings > Agents tab', () => {
 
   it('renders the Agents tab button in sidebar', () => {
     render(<Settings />)
-    expect(screen.getByText('Agents')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Agents' })).toBeInTheDocument()
+  })
+
+  it('titles the pane with the nav label', () => {
+    render(<Settings />)
+    switchToAgentsTab()
+
+    expect(screen.getByRole('heading', { level: 2, name: 'Agents' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Create Agent' })).toBeInTheDocument()
   })
 
   it('shows loading spinner when fetching agents', () => {
@@ -243,12 +253,14 @@ describe('Settings > Agents tab', () => {
     render(<Settings />)
     switchToAgentsTab()
 
-    expect(screen.getByText('Browse installed agents')).toBeInTheDocument()
-    expect(screen.getByText('Agent Browser')).toBeInTheDocument()
-    expect(screen.getAllByText('User').length).toBeGreaterThan(0)
-    expect(screen.getAllByText('Built-in').length).toBeGreaterThan(0)
-    expect(screen.getAllByText('Project').length).toBeGreaterThan(0)
-    expect(screen.getAllByText('Plugin').length).toBeGreaterThan(0)
+    // Summary tiles, then one labelled section per source, in source order.
+    expect(screen.getByText('Total agents')).toBeInTheDocument()
+    expect(screen.getByText('Active agents')).toBeInTheDocument()
+    const sourceHeadings = ['User', 'Project', 'Plugin', 'Built-in']
+      .map((name) => screen.getByRole('heading', { level: 3, name: new RegExp(`^${name}\\s*\\d+$`) }))
+    for (const [index, heading] of sourceHeadings.slice(0, -1).entries()) {
+      expect(heading.compareDocumentPosition(sourceHeadings[index + 1]!) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
+    }
     expect(screen.getByText('code-reviewer')).toBeInTheDocument()
     expect(screen.getByText('Writes technical documentation')).toBeInTheDocument()
     expect(screen.getByText('telegram:pairing')).toBeInTheDocument()
@@ -334,7 +346,9 @@ describe('Settings > Agents tab', () => {
       await Promise.resolve()
     })
 
-    expect(screen.getByText('Installed Plugins')).toBeInTheDocument()
+    // The Plugins pane is titled with its nav label, which the rail entry also
+    // carries — the heading is what proves the pane itself opened.
+    expect(screen.getByRole('heading', { name: 'Plugins' })).toBeInTheDocument()
   })
 })
 
diff --git a/desktop/src/__tests__/diagnosticsSettings.test.tsx b/desktop/src/__tests__/diagnosticsSettings.test.tsx
index 644d81ec..fe6e1440 100644
--- a/desktop/src/__tests__/diagnosticsSettings.test.tsx
+++ b/desktop/src/__tests__/diagnosticsSettings.test.tsx
@@ -279,8 +279,17 @@ describe('Settings > Diagnostics tab', () => {
     expect(screen.getByText('event-1')).toBeInTheDocument()
     expect(screen.getByText(/best-effort/i)).toHaveTextContent(/review.*private metadata/i)
 
-    const eventRow = screen.getByText('cli_start_failed').closest('.grid')
-    expect(eventRow).toHaveClass('grid-cols-1', 'md:grid-cols-[120px_92px_1fr]')
+    // Each event is one list row: type, severity, timestamp, session, summary and
+    // its copyable ID all stay together, so a long summary cannot push the
+    // timestamp onto a different event.
+    const eventRow = screen.getByText('cli_start_failed').closest('[data-testid="diagnostic-event"]') as HTMLElement
+    expect(eventRow).not.toBeNull()
+    expect(within(eventRow).getByText('error')).toBeInTheDocument()
+    expect(within(eventRow).getByText('session-1')).toBeInTheDocument()
+    expect(within(eventRow).getByText('CLI exited during startup with code 1')).toBeInTheDocument()
+    expect(within(eventRow).getByText(new Date('2026-05-02T00:00:00.000Z').toLocaleString())).toBeInTheDocument()
+    expect(within(eventRow).getByRole('button', { name: 'Copy event ID: event-1' })).toBeInTheDocument()
+    expect(screen.getAllByTestId('diagnostic-event')).toHaveLength(100)
   })
 
   it('shows local-index state, counts, storage, update time, and error code without rollout modes', async () => {
@@ -572,7 +581,9 @@ describe('Settings > Diagnostics tab', () => {
     await screen.findByText('Log directory')
 
     expect(diagnosticsTab).toHaveAttribute('aria-current', 'page')
-    expect(diagnosticsTab.querySelector('.material-symbols-outlined')).toHaveAttribute('aria-hidden', 'true')
+    // The nav icon is decorative: whichever icon element the rail renders first
+    // must be hidden so the tab is announced by its label alone.
+    expect(diagnosticsTab.firstElementChild).toHaveAttribute('aria-hidden', 'true')
   })
 
   it('exports a diagnostics bundle from the settings page', async () => {
diff --git a/desktop/src/__tests__/generalSettings.test.tsx b/desktop/src/__tests__/generalSettings.test.tsx
index db7c49ab..a4ea8c69 100644
--- a/desktop/src/__tests__/generalSettings.test.tsx
+++ b/desktop/src/__tests__/generalSettings.test.tsx
@@ -1,5 +1,5 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { act, fireEvent, render, screen, waitFor, within } from '@testing-library/react'
+import { act, cleanup, fireEvent, render, screen, waitFor, within } from '@testing-library/react'
 import '@testing-library/jest-dom'
 
 import { DesktopSettings as Settings } from '../pages/Settings'
@@ -475,16 +475,27 @@ describe('Settings > General tab', () => {
     const activeItem = screen.getByRole('button', { name: 'General' })
     // Selection is a rounded ground inside the rail, not a full-bleed band:
     // the rail is padded, so a square highlight would touch the divider.
-    expect(activeItem.className).toContain('rounded-[var(--radius-md)]')
-    expect(activeItem.className).toContain('bg-[var(--color-surface-hover)]')
+    expect(activeItem.className).toContain('rounded-[var(--radius-sm)]')
+    expect(activeItem.className).toContain('bg-[var(--color-surface-selected)]')
+    expect(activeItem.className).toContain('h-[30px]')
     expect(activeItem).toHaveAttribute('aria-current', 'page')
 
-    const rail = activeItem.parentElement?.parentElement
-    expect(rail?.className).toContain('w-[195px]')
-    expect(rail?.className).toContain('pl-3')
-    expect(rail?.className).toContain('pr-1')
-    expect(activeItem.className).toContain('pl-3')
-    expect(activeItem.className).toContain('pr-2')
+    const rail = screen.getByTestId('settings-navigation')
+    expect(rail).toContainElement(activeItem)
+    expect(rail.className).toContain('w-[216px]')
+    expect(rail.className).toContain('px-2.5')
+    // The rail opens with its own small title, and "About" sits apart below a rule.
+    expect(within(rail).getByText('Settings')).toBeInTheDocument()
+    const about = within(rail).getByRole('button', { name: 'About' })
+    const diagnostics = within(rail).getByRole('button', { name: 'Diagnostics' })
+    expect((diagnostics.compareDocumentPosition(about) & Node.DOCUMENT_POSITION_FOLLOWING) !== 0).toBe(true)
+  })
+
+  it('titles each pane with its rail label', () => {
+    useUIStore.setState({ activeSettingsTab: 'general', pendingSettingsTab: null })
+    render(<Settings />)
+
+    expect(screen.getByRole('heading', { level: 2, name: 'General' })).toBeInTheDocument()
   })
 
   it('marks the pure white appearance theme as selected', () => {
@@ -539,6 +550,21 @@ describe('Settings > General tab', () => {
     expect(screen.getByRole('button', { name: 'Ink Night' })).toHaveAttribute('aria-pressed', 'false')
   })
 
+  it('keeps the theme swatches at preview size on a wide settings frame', () => {
+    // The settings frame is fluid up to 1120px; the swatch grid must not grow
+    // with it, in either picker layout.
+    render(<Settings />)
+    fireEvent.click(screen.getByText('General'))
+    expect(screen.getByRole('button', { name: 'Pure White' }).parentElement).toHaveClass('grid-cols-3', 'max-w-[600px]')
+    cleanup()
+
+    useUIStore.setState({ followSystemTheme: true, lightTheme: 'celadon', darkTheme: 'ink-blue', theme: 'ink-blue', activeSettingsTab: 'general' })
+    render(<Settings />)
+    for (const label of ['Pure White', 'Ink Night']) {
+      expect(screen.getByRole('button', { name: label }).parentElement, label).toHaveClass('grid-cols-4', 'max-w-[600px]')
+    }
+  })
+
   it('hides the light-half hint when not following the system', () => {
     render(<Settings />)
 
@@ -572,41 +598,70 @@ describe('Settings > General tab', () => {
     expect(screen.getByRole('button', { name: 'Pure White' })).toHaveAttribute('aria-pressed', 'false')
   })
 
-  it('keeps UI zoom below system notifications because it is a secondary setting', () => {
+  it('groups General settings into topic sections in a stable order', () => {
     render(<Settings />)
 
     fireEvent.click(screen.getByText('General'))
 
-    const notificationsHeading = screen.getByRole('heading', { name: 'System Notifications' })
-    const uiZoomHeading = screen.getByRole('heading', { name: 'UI Zoom' })
-    const networkHeading = screen.getByRole('heading', { name: 'Network' })
-    const webFetchHeading = screen.getByRole('heading', { name: 'WebFetch Preflight' })
+    // The stand-alone toggles are grouped by topic: what the app looks like
+    // first, then what a new session starts from, then plumbing and data.
+    const order = [
+      'Appearance',
+      'Language',
+      'Chat appearance',
+      'UI Zoom',
+      'Agent preferences',
+      'System Notifications',
+      'Network',
+      'WebSearch',
+      'Agent trace',
+      'Session History',
+      'Data Storage Location',
+    ].map((name) => screen.getByRole('heading', { level: 3, name }))
+    for (const [index, heading] of order.slice(0, -1).entries()) {
+      expect(
+        (heading.compareDocumentPosition(order[index + 1]!) & Node.DOCUMENT_POSITION_FOLLOWING) !== 0,
+        `${order[index + 1]!.textContent} should follow ${heading.textContent}`,
+      ).toBe(true)
+    }
 
-    expect((notificationsHeading.compareDocumentPosition(uiZoomHeading) & Node.DOCUMENT_POSITION_FOLLOWING) !== 0).toBe(true)
-    expect((uiZoomHeading.compareDocumentPosition(networkHeading) & Node.DOCUMENT_POSITION_FOLLOWING) !== 0).toBe(true)
-    expect((networkHeading.compareDocumentPosition(webFetchHeading) & Node.DOCUMENT_POSITION_FOLLOWING) !== 0).toBe(true)
+    // Each Agent switch lives in the shared Agent preferences card rather
+    // than under a heading of its own.
+    const agentSection = screen.getByRole('heading', { name: 'Agent preferences' }).closest('section')!
+    for (const name of [
+      'Enable thinking mode',
+      'Enable Ultracode keyword trigger',
+      'Enable Agent Teams',
+      'Enable Auto-dream',
+    ]) {
+      expect(within(agentSection).getByRole('switch', { name })).toBeInTheDocument()
+    }
+    // WebFetch preflight is a network concern and sits in that card.
+    const networkSection = screen.getByRole('heading', { name: 'Network' }).closest('section')!
+    expect(within(networkSection).getByRole('switch', { name: 'Skip WebFetch domain preflight' })).toBeInTheDocument()
   })
 
   it('lets users choose Ctrl or Command Enter as the chat send shortcut', async () => {
     render(<Settings />)
 
     fireEvent.click(screen.getByText('General'))
-    fireEvent.click(screen.getByRole('button', { name: /Ctrl\/Cmd\+Enter sends/i }))
+    fireEvent.click(screen.getByRole('radio', { name: /Ctrl\/Cmd\+Enter sends/i }))
 
     await waitFor(() => {
       expect(useSettingsStore.getState().setChatSendBehavior).toHaveBeenCalledWith('modifierEnter')
     })
-    expect(screen.getByRole('button', { name: /Ctrl\/Cmd\+Enter sends/i })).toHaveAttribute('aria-pressed', 'true')
+    expect(screen.getByRole('radio', { name: /Ctrl\/Cmd\+Enter sends/i })).toHaveAttribute('aria-checked', 'true')
+    expect(screen.getByRole('radio', { name: /^Enter sends/i })).toHaveAttribute('aria-checked', 'false')
   })
 
   it('saves provider network timeout and manual proxy from General settings', async () => {
     render(<Settings />)
 
     fireEvent.click(screen.getByText('General'))
-    expect(screen.getByRole('button', { name: /Direct connection/i })).toHaveAttribute('aria-pressed', 'true')
-    expect(screen.getByRole('button', { name: /System proxy/i })).toBeInTheDocument()
+    expect(screen.getByRole('radio', { name: /Direct connection/i })).toHaveAttribute('aria-checked', 'true')
+    expect(screen.getByRole('radio', { name: /System proxy/i })).toBeInTheDocument()
 
-    fireEvent.click(screen.getByRole('button', { name: /^Manual proxy/i }))
+    fireEvent.click(screen.getByRole('radio', { name: /^Manual proxy/i }))
     const proxyInput = screen.getByLabelText('Proxy URL')
     const saveButton = screen.getAllByRole('button', { name: 'Save' })[0]!
 
@@ -700,7 +755,7 @@ describe('Settings > General tab', () => {
       expect(input).toHaveValue(365)
 
       const section = screen.getByRole('heading', { name: 'Session History' })
-        .parentElement as HTMLElement
+        .closest('section') as HTMLElement
       const saveButton = within(section).getByRole('button', { name: 'Save' })
       expect(saveButton).toBeDisabled()
 
@@ -758,7 +813,7 @@ describe('Settings > General tab', () => {
       fireEvent.change(input, { target: { value: '0' } })
 
       const section = screen.getByRole('heading', { name: 'Session History' })
-        .parentElement as HTMLElement
+        .closest('section') as HTMLElement
       await act(async () => {
         fireEvent.click(within(section).getByRole('button', { name: 'Save' }))
       })
@@ -792,7 +847,7 @@ describe('Settings > General tab', () => {
       })
 
       const section = screen.getByRole('heading', { name: 'Session History' })
-        .parentElement as HTMLElement
+        .closest('section') as HTMLElement
       await act(async () => {
         fireEvent.click(within(section).getByRole('button', { name: 'Save' }))
       })
@@ -830,7 +885,7 @@ describe('Settings > General tab', () => {
       })
 
       const section = screen.getByRole('heading', { name: 'Session History' })
-        .parentElement as HTMLElement
+        .closest('section') as HTMLElement
       const saveButton = within(section).getByRole('button', { name: 'Save' })
       fireEvent.click(saveButton)
 
@@ -871,7 +926,7 @@ describe('Settings > General tab', () => {
       })
 
       const section = screen.getByRole('heading', { name: 'Session History' })
-        .parentElement as HTMLElement
+        .closest('section') as HTMLElement
       await act(async () => {
         fireEvent.click(within(section).getByRole('button', { name: 'Save' }))
       })
@@ -914,7 +969,7 @@ describe('Settings > General tab', () => {
       })
 
       const section = screen.getByRole('heading', { name: 'Session History' })
-        .parentElement as HTMLElement
+        .closest('section') as HTMLElement
       await act(async () => {
         fireEvent.click(within(section).getByRole('button', { name: 'Save' }))
       })
@@ -1414,7 +1469,7 @@ describe('Settings > General tab', () => {
     expect(useSettingsStore.getState().setAutoDreamEnabled).toHaveBeenCalledWith(false)
   })
 
-  it('keeps General checkbox inputs anchored inside their visible rows', () => {
+  it('renders every General on/off setting as a named switch beside its visible title', () => {
     render(<Settings />)
 
     fireEvent.click(screen.getByText('General'))
@@ -1426,12 +1481,14 @@ describe('Settings > General tab', () => {
       'Enable system notifications',
       'Skip WebFetch domain preflight',
     ]) {
-      const toggle = screen.getByLabelText(label)
-      const row = toggle.closest('label') as HTMLElement | null
-      expect(toggle).toHaveClass('settings-checkbox-input')
-      expect(toggle).not.toHaveClass('sr-only')
+      // One control per setting, announced as a switch under the same words
+      // the row shows — the hand-rolled checkbox rows these replaced each
+      // stretched an invisible input over the whole card.
+      const toggle = screen.getByRole('switch', { name: label })
+      expect(screen.getByLabelText(label)).toBe(toggle)
+      const row = toggle.closest('.min-h-\\[52px\\]') as HTMLElement | null
       expect(row).not.toBeNull()
-      expect(row!).toHaveClass('relative')
+      expect(within(row!).getByText(label)).toBeVisible()
     }
   })
 
@@ -1559,8 +1616,8 @@ describe('Settings > General tab', () => {
     fireEvent.click(screen.getByText('General'))
     expect(screen.queryByRole('region', { name: 'H5 Access' })).not.toBeInTheDocument()
 
-    const generalTab = screen.getByText('General')
-    const h5Tab = screen.getByText('H5 Access')
+    const generalTab = screen.getByRole('button', { name: 'General' })
+    const h5Tab = screen.getByRole('button', { name: 'H5 Access' })
     expect((generalTab.compareDocumentPosition(h5Tab) & Node.DOCUMENT_POSITION_FOLLOWING) !== 0).toBe(true)
     fireEvent.click(h5Tab)
 
@@ -2098,12 +2155,12 @@ describe('Settings > General tab', () => {
 
     fireEvent.click(screen.getByText('General'))
 
-    fireEvent.click(screen.getByRole('button', { name: 'Tavily' }))
+    fireEvent.click(screen.getByRole('radio', { name: 'Tavily' }))
     fireEvent.change(screen.getByLabelText('Tavily API key'), {
       target: { value: 'tvly-test-key' },
     })
     const webSearchSection = screen.getByRole('heading', { name: 'WebSearch' })
-      .parentElement as HTMLElement
+      .closest('section') as HTMLElement
     fireEvent.click(within(webSearchSection).getByRole('button', { name: 'Save' }))
 
     expect(useSettingsStore.getState().setWebSearch).toHaveBeenCalledWith({
@@ -2186,11 +2243,15 @@ describe('Settings > Providers tab', () => {
     render(<Settings />)
 
     const card = screen.getByTestId('provider-provider-1')
-    // 1.5px so the default row reads as chosen at a glance without the heavier
-    // ring the focus border gave it, which collided with the real focus ring.
-    expect(card.className).toContain('border-[1.5px]')
+    // A terracotta-mixed hairline plus a soft brand halo, so the default row
+    // reads as chosen at a glance — not the focus border, which collided with
+    // the real focus ring.
     expect(card.className).toContain('border-[var(--color-primary-fixed-dim)]')
+    expect(card.className).toContain('shadow-[0_0_0_3px_var(--color-brand-soft)]')
     expect(card.className).not.toContain('border-[var(--color-border-focus)]')
+    // Only the default card carries the accent.
+    const other = screen.getByTestId('claude-official-provider')
+    expect(other.className).not.toContain('border-[var(--color-primary-fixed-dim)]')
   })
 
   it('does not query official OAuth status before providers finish loading', () => {
@@ -2301,17 +2362,18 @@ describe('Settings > Providers tab', () => {
   })
 
   it.each([
-    ['zh', '模型配置', '模型管理', '添加模型', '配置名称'],
-    ['zh-TW', '模型設定', '模型管理', '新增模型', '設定名稱'],
-    ['en', 'Model Settings', 'Model Management', 'Add Model', 'Configuration name'],
-    ['jp', 'モデル設定', 'モデル管理', 'モデルを追加', '設定名'],
-    ['kr', '모델 설정', '모델 관리', '모델 추가', '설정 이름'],
-  ] as const)('uses model terminology throughout settings in %s', (locale, menu, title, add, name) => {
+    ['zh', '模型配置', '添加模型', '配置名称'],
+    ['zh-TW', '模型設定', '新增模型', '設定名稱'],
+    ['en', 'Model Settings', 'Add Model', 'Configuration name'],
+    ['jp', 'モデル設定', 'モデルを追加', '設定名'],
+    ['kr', '모델 설정', '모델 추가', '설정 이름'],
+  ] as const)('uses model terminology throughout settings in %s', (locale, menu, add, name) => {
     useSettingsStore.setState({ locale })
     render(<Settings />)
 
     expect(screen.getByRole('button', { name: new RegExp(menu) })).toBeInTheDocument()
-    expect(screen.getByRole('heading', { name: title })).toBeInTheDocument()
+    // The pane is titled with the rail label itself, so the two never disagree.
+    expect(screen.getByRole('heading', { level: 2, name: menu })).toBeInTheDocument()
     fireEvent.click(screen.getByRole('button', { name: new RegExp(add) }))
 
     const dialog = screen.getByRole('dialog')
@@ -3697,10 +3759,10 @@ describe('Settings > About tab', () => {
     render(<Settings />)
 
     fireEvent.click(screen.getByRole('button', { name: /Advanced update proxy/i }))
-    expect(screen.getByRole('button', { name: /System proxy/i })).toHaveAttribute('aria-pressed', 'true')
+    expect(screen.getByRole('radio', { name: /System proxy/i })).toHaveAttribute('aria-checked', 'true')
     expect(screen.getByText('This only affects app update checks and downloads.')).toBeInTheDocument()
 
-    fireEvent.click(screen.getByRole('button', { name: /Manual proxy/i }))
+    fireEvent.click(screen.getByRole('radio', { name: /Manual proxy/i }))
     const proxyInput = screen.getByLabelText('Proxy URL')
     const saveButton = screen.getByRole('button', { name: 'Save' })
 
@@ -3731,9 +3793,9 @@ describe('Settings > About tab', () => {
     render(<Settings />)
 
     fireEvent.click(screen.getByRole('button', { name: /Advanced update proxy/i }))
-    expect(screen.getByRole('button', { name: /Manual proxy/i })).toHaveAttribute('aria-pressed', 'true')
+    expect(screen.getByRole('radio', { name: /Manual proxy/i })).toHaveAttribute('aria-checked', 'true')
 
-    fireEvent.click(screen.getByRole('button', { name: /System proxy/i }))
+    fireEvent.click(screen.getByRole('radio', { name: /System proxy/i }))
     const saveButton = screen.getByRole('button', { name: 'Save' })
 
     await act(async () => {
diff --git a/desktop/src/__tests__/mcpSettings.test.tsx b/desktop/src/__tests__/mcpSettings.test.tsx
index 225de69a..e1c18f3e 100644
--- a/desktop/src/__tests__/mcpSettings.test.tsx
+++ b/desktop/src/__tests__/mcpSettings.test.tsx
@@ -350,6 +350,52 @@ describe('McpSettings', () => {
     expect(screen.getByRole('button', { name: 'Save' })).toBeEnabled()
   })
 
+  it('switches transport from the segmented control on create and locks it while editing', async () => {
+    const server = {
+      name: 'global-user',
+      scope: 'user',
+      transport: 'http',
+      enabled: true,
+      status: 'connected',
+      statusLabel: 'Connected',
+      configLocation: '/tmp/config',
+      summary: 'https://example.com/mcp',
+      canEdit: true,
+      canRemove: true,
+      canReconnect: true,
+      canToggle: true,
+      config: { type: 'http', url: 'https://example.com/mcp', headers: {} },
+    } as const
+    useMcpStore.setState({ servers: [server] })
+
+    await renderLoadedMcpSettings()
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: /add server/i }))
+    })
+
+    const transport = screen.getByRole('radiogroup', { name: 'Transport' })
+    expect(screen.getByRole('radio', { name: 'STDIO' })).toHaveAttribute('aria-checked', 'true')
+    expect(screen.getByLabelText(/Command to launch/)).toBeInTheDocument()
+
+    fireEvent.click(screen.getByRole('radio', { name: 'Streamable HTTP' }))
+    expect(screen.getByRole('radio', { name: 'Streamable HTTP' })).toHaveAttribute('aria-checked', 'true')
+    expect(screen.queryByLabelText(/Command to launch/)).not.toBeInTheDocument()
+    expect(screen.getByLabelText(/^URL/)).toBeInTheDocument()
+    expect(transport).not.toHaveTextContent(/expand_more|check/)
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: /back/i }))
+    })
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: 'Open global-user' }))
+    })
+
+    for (const radio of screen.getAllByRole('radio')) expect(radio).toBeDisabled()
+    expect(screen.getByRole('radio', { name: 'Streamable HTTP' })).toHaveAttribute('aria-checked', 'true')
+    expect(screen.getByText('If you would like to switch MCP server type, uninstall first.')).toBeInTheDocument()
+  })
+
   it('keeps same-name project MCP servers distinct by project path', async () => {
     useMcpStore.setState({
       servers: [
diff --git a/desktop/src/__tests__/pages.test.tsx b/desktop/src/__tests__/pages.test.tsx
index 0a328ca5..31d088f1 100644
--- a/desktop/src/__tests__/pages.test.tsx
+++ b/desktop/src/__tests__/pages.test.tsx
@@ -185,7 +185,8 @@ describe('Content-only pages render without errors', () => {
       await Promise.resolve()
     })
     expect(container.querySelector('[data-composer-editor]')).toBeInTheDocument()
-    expect(container.innerHTML).toContain('New session')
+    // The 「素」 new-session hero asks what to work on (with or without a project).
+    expect(container.innerHTML).toMatch(/What should we work on/)
     expect(container.innerHTML).toContain('Ask anything')
   })
 
@@ -274,8 +275,8 @@ describe('Content-only pages render without errors', () => {
       },
     })
     const { container } = render(<ActiveSession />)
-    // With empty messages, the hero is shown
-    expect(container.innerHTML).toContain('New session')
+    // With empty messages, the new-session hero is shown
+    expect(container.innerHTML).toMatch(/What should we work on/)
     // ChatInput renders the ProseMirror composer
     const composer = container.querySelector('[data-composer-editor]')
     expect(composer).toBeInTheDocument()
@@ -693,7 +694,11 @@ describe('Content-only pages render without errors', () => {
     expect(sendMessage).not.toHaveBeenCalled()
     expect(await screen.findByText('Session inspector')).toBeInTheDocument()
     expect(vi.mocked(sessionsApi.getInspection)).toHaveBeenCalledWith(SESSION_ID, { includeContext: false })
-    expect(container.innerHTML).toContain('bg-[var(--color-inspector-surface)]')
+    // The inspector is a token-colored popover card, not the old hex-tinted sheet.
+    expect(screen.getByText('Session inspector').closest('.absolute')).toHaveClass(
+      'bg-[var(--color-surface-container-lowest)]',
+      'shadow-[var(--shadow-dropdown)]',
+    )
     expect(container.innerHTML).not.toContain('bg-[#fbfaf6]')
     expect(container.innerHTML).not.toContain('bg-[#f4f2ed]')
     expect(container.innerHTML).not.toContain('border-[#d8b3a8]')
@@ -835,7 +840,9 @@ describe('Content-only pages render without errors', () => {
 
     const indicator = await screen.findByLabelText('Context usage loading')
     expect(indicator).toHaveTextContent('--')
-    expect(indicator).toHaveClass('h-8')
+    // Same 28px box as the loaded indicator, so the toolbar does not shift when
+    // the first context reading arrives.
+    expect(indicator).toHaveClass('h-7')
 
     resetPageStores()
   })
@@ -1329,12 +1336,12 @@ describe('AppShell layout renders chrome', () => {
 })
 
 describe('Design system compliance', () => {
-  it('Pages use Material Symbols Outlined icons', () => {
+  it('Pages draw their icons from lucide, never Material Symbols ligatures', () => {
     const pages = [EmptySession]
     for (const Page of pages) {
       const { container, unmount } = render(<Page />)
-      const icons = container.querySelectorAll('.material-symbols-outlined')
-      expect(icons.length).toBeGreaterThan(0)
+      expect(container.querySelectorAll('svg.lucide').length).toBeGreaterThan(0)
+      expect(container.querySelector('.material-symbols-outlined')).toBeNull()
       unmount()
     }
   })
diff --git a/desktop/src/__tests__/pluginsSettings.test.tsx b/desktop/src/__tests__/pluginsSettings.test.tsx
index 8c2cd8e3..828a40c6 100644
--- a/desktop/src/__tests__/pluginsSettings.test.tsx
+++ b/desktop/src/__tests__/pluginsSettings.test.tsx
@@ -243,8 +243,10 @@ describe('Settings > Plugins tab', () => {
     render(<Settings />)
     switchToPluginsTab()
 
-    expect(screen.getByText('Browse installed plugins')).toBeInTheDocument()
-    expect(screen.getByText('Plugin Manager')).toBeInTheDocument()
+    // The settings page head names the page; the list opens on its numbers
+    // instead of repeating a second title block under it.
+    expect(screen.queryByText('Browse installed plugins')).not.toBeInTheDocument()
+    expect(screen.getByText('Total plugins')).toBeInTheDocument()
     expect(screen.getAllByText('Needs attention').length).toBeGreaterThan(0)
     expect(screen.getByText('github')).toBeInTheDocument()
     expect(screen.getByText('Python language tooling')).toBeInTheDocument()
diff --git a/desktop/src/__tests__/skillsSettings.test.tsx b/desktop/src/__tests__/skillsSettings.test.tsx
index 7af302e7..6ee57554 100644
--- a/desktop/src/__tests__/skillsSettings.test.tsx
+++ b/desktop/src/__tests__/skillsSettings.test.tsx
@@ -133,8 +133,10 @@ describe('Settings > Skills tab', () => {
     render(<Settings />)
     switchToSkillsTab()
 
-    expect(screen.getByText('Browse installed skills')).toBeInTheDocument()
-    expect(screen.getByText('Skill Browser')).toBeInTheDocument()
+    // The settings page head names the browser; the list opens on search and
+    // its numbers rather than a second title block.
+    expect(screen.queryByText('Browse installed skills')).not.toBeInTheDocument()
+    expect(screen.getByRole('searchbox', { name: 'Search skills' })).toBeInTheDocument()
     expect(screen.getByText('Total skills')).toBeInTheDocument()
     expect(screen.getByText('Alpha Skill')).toBeInTheDocument()
     expect(screen.getByText('Second skill description')).toBeInTheDocument()
@@ -299,6 +301,8 @@ describe('Settings > Skills tab', () => {
       await Promise.resolve()
     })
 
-    expect(screen.getByText('Installed Plugins')).toBeInTheDocument()
+    // The Plugins pane is titled with its rail label, which the rail entry also
+    // carries — the heading is what proves the pane itself opened.
+    expect(screen.getByRole('heading', { name: 'Plugins' })).toBeInTheDocument()
   })
 })
diff --git a/desktop/src/__tests__/untranslatedText.test.ts b/desktop/src/__tests__/untranslatedText.test.ts
index ba5f8751..96b99694 100644
--- a/desktop/src/__tests__/untranslatedText.test.ts
+++ b/desktop/src/__tests__/untranslatedText.test.ts
@@ -41,7 +41,8 @@ const NON_PROSE_ELEMENTS = new Set(['kbd', 'Keycap', 'code', 'pre', 'style', 'sc
 const LANGUAGE_NEUTRAL: Record<string, string[]> = {
   'components/agentTeams/AgentTeamsCanvas.tsx': ['zZ'], // a sleeping agent's glyph
   'components/agentTeams/AgentTeamsWorkbench.tsx': ['Agent Teams ·'], // product name, kept in every locale
-  'components/chat/MermaidRenderer.tsx': ['Mermaid'], // the diagram language
+  'components/chat/MermaidRenderer.tsx': ['mermaid'], // the diagram language, as a code block labels it
+  'components/chat/ToolCallBlock.tsx': ['bash', 'powershell'], // shell names, as a code block labels them
   'components/layout/H5ConnectionView.tsx': ['https://chat.example.com'], // example URL
   'components/layout/Sidebar.tsx': ['cc-', 'haha', 'GitHub'], // wordmark, brand
   'components/market/FrontmatterPanel.tsx': ['true', 'false'], // YAML values, shown as written
@@ -52,8 +53,8 @@ const LANGUAGE_NEUTRAL: Record<string, string[]> = {
   'components/workspace/WorkspaceDiffSurface.tsx': ['diff --git'], // the git header, read to screen readers
   'features/pets/PetSettings.tsx': ['px', 'moon-cat'], // unit, example ID
   'pages/Connectors.tsx': ['MCP', 'CLI'], // transport names
-  'pages/McpSettings.tsx': ['STDIO'], // transport name
-  'pages/MemorySettings.tsx': ['MARKDOWN'], // file format
+  'components/search/GlobalSearchModal.tsx': ['esc'], // the key, as printed on its keycap
+  'pages/MemorySettings.tsx': ['Markdown'], // file format
   'pages/settings/AboutSettings.tsx': [ // product, repository and author; example proxy
     'Claude Code Haha', 'GitHub', 'NanmiCoder/cc-haha', '程序员阿江-Relakkes', 'http://127.0.0.1:7890',
   ],
diff --git a/desktop/src/components/AGENTS.md b/desktop/src/components/AGENTS.md
index b6232869..aeca706f 100644
--- a/desktop/src/components/AGENTS.md
+++ b/desktop/src/components/AGENTS.md
@@ -154,6 +154,18 @@ style={{ zIndex: 'var(--z-dialog)' }}
 >
 > **`SearchField` 的 `clearLabel`** — 组件内部一度用 `` `Clear ${label}` `` 拼英文，导致任何已经翻译过清除按钮的调用方采用它反而是 i18n 退化。**组件库自己不许拼用户可见的英文。**
 
+### 3.8 「素 Porcelain」视觉约束
+
+2026-10 的全量改版把界面收敛到一套可检查的约束，`src/theme/designSystem.test.ts` 逐条守住（违规会列出 文件:行）：
+
+- **字号只用** 11 / 12 / 13 / 14 / 15 / 18 / 22 / 26（`text-xs`、`text-sm`、`text-lg` 可用；`text-base/xl/2xl…` 与小数字号不可用）。
+- **字重最高 semibold**：Inter 只自托管到 600，`font-bold` 会让浏览器合成糊掉的粗体；`font-mono` 不配 semibold（JetBrains Mono 只有 400）。
+- **中文不用斜体、不用宽字距大写标签**；摘要列表用「、」。
+- **图标只用 lucide**（`strokeWidth={1.75}`）；`IconButton` 的 `icon` 只接受元素，不再接受 Material 字符串。
+- **圆角只用 token**：`--radius-xs` 4 / `sm` 6 / `md` 8 / `lg` 12 / `xl` 16 / `3xl` 20 / `full`。
+- **状态色语义固定**：运行中＝info、等你确认＝warning、完成＝success、失败＝error；陶土色只给品牌、发送键与选中指示。
+- 设置页统一用 `components/settings/SettingsSection.tsx` 的骨架（PageHeader → Section → Group → Row）。
+
 ---
 
 ## 四、桌面端硬约束
diff --git a/desktop/src/components/ErrorBoundary.tsx b/desktop/src/components/ErrorBoundary.tsx
index abec65de..32e82a72 100644
--- a/desktop/src/components/ErrorBoundary.tsx
+++ b/desktop/src/components/ErrorBoundary.tsx
@@ -36,7 +36,7 @@ function ErrorBoundaryFallback() {
   return (
     <div className="h-screen w-screen bg-[var(--color-background)] text-[var(--color-text-primary)] flex items-center justify-center p-6">
       <div className="max-w-md w-full text-center">
-        <div className="text-base font-semibold">{t('errorBoundary.title')}</div>
+        <div className="text-[15px] font-semibold">{t('errorBoundary.title')}</div>
         <div className="mt-2 text-sm text-[var(--color-text-tertiary)]">
           {t('errorBoundary.description')}
         </div>
diff --git a/desktop/src/components/activity/AgentMascot.tsx b/desktop/src/components/activity/AgentMascot.tsx
index d3ac3d99..c660c56f 100644
--- a/desktop/src/components/activity/AgentMascot.tsx
+++ b/desktop/src/components/activity/AgentMascot.tsx
@@ -85,7 +85,8 @@ function ringClassName(tone: AgentMascotSpec['tone']): string {
   if (tone === 'danger') return 'border-[color-mix(in_srgb,var(--color-error)_42%,transparent)]'
   if (tone === 'success') return 'border-[color-mix(in_srgb,var(--color-success)_34%,transparent)]'
   if (tone === 'muted') return 'border-[color-mix(in_srgb,var(--color-text-tertiary)_24%,transparent)]'
-  return 'border-[color-mix(in_srgb,var(--color-brand)_42%,transparent)]'
+  // Running is information, not brand: the app reads blue as "in progress".
+  return 'border-[color-mix(in_srgb,var(--color-info)_42%,transparent)]'
 }
 
 export function AgentMascot({ seed, status }: { seed: string; status: ActivityStatus }) {
@@ -108,7 +109,7 @@ export function AgentMascot({ seed, status }: { seed: string; status: ActivitySt
       {isActive ? (
         <span
           data-testid="agent-mascot-motion-ring"
-          className="absolute -inset-0.5 rounded-[var(--radius-lg)] border border-transparent border-t-[var(--color-brand)] opacity-80 motion-safe:animate-spin motion-reduce:animate-none"
+          className="absolute -inset-0.5 rounded-[var(--radius-lg)] border border-transparent border-t-[var(--color-info)] opacity-80 motion-safe:animate-spin motion-reduce:animate-none"
           aria-hidden="true"
         />
       ) : null}
@@ -116,7 +117,7 @@ export function AgentMascot({ seed, status }: { seed: string; status: ActivitySt
         src={imageSrc}
         alt=""
         draggable={false}
-        className="relative z-[1] h-[34px] w-[34px] max-w-none select-none object-contain"
+        className="relative h-[34px] w-[34px] max-w-none select-none object-contain"
       />
     </span>
   )
diff --git a/desktop/src/components/activity/SessionActivityButton.tsx b/desktop/src/components/activity/SessionActivityButton.tsx
index 7ee2c6ba..bd737e44 100644
--- a/desktop/src/components/activity/SessionActivityButton.tsx
+++ b/desktop/src/components/activity/SessionActivityButton.tsx
@@ -18,17 +18,15 @@ export function SessionActivityButton({
   const toggle = useActivityPanelStore((state) => state.toggle)
   return (
     <IconButton
-      icon={<ListChecks size={17} strokeWidth={1.9} />}
+      icon={<ListChecks size={16} strokeWidth={1.75} />}
       label={resolvedLabel}
       size="md"
-      // The design's active toolbar toggle is a terracotta wash with a
-      // terracotta glyph, which `tone="brand"` + `filled` already are. The
-      // `className` fill this replaces raced the tone's own `bg-[…]`, and which
-      // won came down to stylesheet order.
-      tone={isOpen ? 'brand' : 'muted'}
-      filled={isOpen}
+      // An open panel is a pressed toolbar toggle: the neutral selected fill,
+      // not a terracotta wash — brand is kept for the send key and selection
+      // marks. `pressed` also owns `aria-pressed`.
+      tone="muted"
+      pressed={isOpen}
       aria-expanded={isOpen}
-      aria-pressed={isOpen}
       onClick={() => toggle(sessionId)}
       data-active={isOpen ? 'true' : 'false'}
       data-session-activity-trigger="true"
diff --git a/desktop/src/components/activity/SessionActivityPanel.test.tsx b/desktop/src/components/activity/SessionActivityPanel.test.tsx
index ec84458b..9c45fc99 100644
--- a/desktop/src/components/activity/SessionActivityPanel.test.tsx
+++ b/desktop/src/components/activity/SessionActivityPanel.test.tsx
@@ -137,9 +137,11 @@ describe('SessionActivityPanel', () => {
 
     // 30px matches AgentMascot, so SubAgent and background rows share a text column.
     expect(running?.className).toContain('h-[30px]')
-    expect(running?.className).toContain('bg-[var(--color-brand-soft)]')
+    // Running reads as info, never brand: terracotta is not a status colour.
+    expect(running?.className).toContain('bg-[var(--color-info-container)]')
+    expect(running?.className).not.toContain('brand')
     // Paired tokens, never a raw accent on its own container (AGENTS.md 3.2).
-    expect(running?.className).toContain('text-[var(--color-on-brand-soft)]')
+    expect(running?.className).toContain('text-[var(--color-on-info-container)]')
     expect(failed?.className).toContain('bg-[var(--color-error-container)]')
     expect(failed?.className).toContain('text-[var(--color-on-error-container)]')
   })
@@ -203,7 +205,7 @@ describe('SessionActivityPanel', () => {
     expect(screen.getByLabelText('Task completed')).toBeInTheDocument()
     expect(screen.getByLabelText('Task in progress')).toBeInTheDocument()
     expect(screen.getByLabelText('Task pending')).toBeInTheDocument()
-    // The in-progress marker is the design's terracotta ring — a bordered
+    // The in-progress marker is the design's info-blue ring — a bordered
     // circle, not an icon — so the animation classes sit on the marker itself.
     // It still stops rather than slows under reduced motion, which is why this
     // panel does not use `Spinner`.
diff --git a/desktop/src/components/activity/SessionActivityPanel.tsx b/desktop/src/components/activity/SessionActivityPanel.tsx
index 8287ea41..1443b405 100644
--- a/desktop/src/components/activity/SessionActivityPanel.tsx
+++ b/desktop/src/components/activity/SessionActivityPanel.tsx
@@ -165,9 +165,9 @@ function TaskStatusMarker({ status, t }: { status: ActivityRow['status']; t: Tra
     return (
       <span
         aria-label={t('session.activity.task.completed')}
-        className="inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-[var(--color-success)] text-[var(--color-surface)]"
+        className="inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-[var(--color-success-container)] text-[var(--color-on-success-container)]"
       >
-        <Check size={13} strokeWidth={3} aria-hidden="true" />
+        <Check size={12} strokeWidth={2} aria-hidden="true" />
       </span>
     )
   }
@@ -178,7 +178,7 @@ function TaskStatusMarker({ status, t }: { status: ActivityRow['status']; t: Tra
         aria-label={t('session.activity.status.stopped')}
         className="inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-[var(--color-outline)] text-[var(--color-text-tertiary)]"
       >
-        <X size={12} strokeWidth={2.4} aria-hidden="true" />
+        <X size={12} strokeWidth={2} aria-hidden="true" />
       </span>
     )
   }
@@ -191,7 +191,7 @@ function TaskStatusMarker({ status, t }: { status: ActivityRow['status']; t: Tra
     return (
       <span
         aria-label={t('session.activity.task.inProgress')}
-        className="inline-flex h-5 w-5 shrink-0 rounded-full border-[2.5px] border-[var(--color-primary-fixed-dim)] border-t-[var(--color-brand)] motion-safe:animate-spin motion-reduce:animate-none"
+        className="inline-flex h-5 w-5 shrink-0 rounded-full border-2 border-[var(--color-info-container)] border-t-[var(--color-info)] motion-safe:animate-spin motion-reduce:animate-none"
       />
     )
   }
@@ -199,7 +199,7 @@ function TaskStatusMarker({ status, t }: { status: ActivityRow['status']; t: Tra
   return (
     <span
       aria-label={t('session.activity.task.pending')}
-      className="inline-flex h-5 w-5 shrink-0 rounded-full border-[1.8px] border-[var(--color-outline)]"
+      className="inline-flex h-5 w-5 shrink-0 rounded-full border-[1.5px] border-[var(--color-border-strong)]"
     />
   )
 }
@@ -223,7 +223,7 @@ function getRowIcon(row: ActivityRow) {
 }
 
 function getStatusTone(status: ActivityRow['status']): Tone {
-  if (status === 'running' || status === 'in_progress') return 'brand'
+  if (status === 'running' || status === 'in_progress') return 'info'
   if (status === 'completed' || status === 'idle') return 'success'
   if (status === 'failed' || status === 'error' || status === 'stopped') return 'danger'
   return 'neutral'
@@ -251,7 +251,7 @@ function getTaskProgress(rows: ActivityRow[]): { completed: number; total: numbe
  */
 function getRowIconToneClass(status: ActivityRow['status']): string {
   if (status === 'running' || status === 'in_progress') {
-    return 'bg-[var(--color-brand-soft)] text-[var(--color-on-brand-soft)]'
+    return 'bg-[var(--color-info-container)] text-[var(--color-on-info-container)]'
   }
   if (status === 'completed' || status === 'idle') {
     return 'bg-[var(--color-success-container)] text-[var(--color-on-success-container)]'
@@ -287,7 +287,7 @@ function ActivityRowIcon({
       data-tone-status={status}
       className={`inline-flex h-[30px] w-[30px] shrink-0 items-center justify-center rounded-[var(--radius-md)] ${getRowIconToneClass(status)}`}
     >
-      <Icon size={15} strokeWidth={2} aria-hidden="true" />
+      <Icon size={16} strokeWidth={1.75} aria-hidden="true" />
     </span>
   )
 }
@@ -333,9 +333,9 @@ function BackgroundTaskStopButton({
   return (
     <IconButton
       icon={stopping ? (
-        <LoaderCircle size={14} strokeWidth={2.2} className="motion-safe:animate-spin motion-reduce:animate-none" aria-hidden="true" />
+        <LoaderCircle size={14} strokeWidth={1.75} className="motion-safe:animate-spin motion-reduce:animate-none" aria-hidden="true" />
       ) : (
-        <Square size={12} strokeWidth={2.4} aria-hidden="true" />
+        <Square size={12} strokeWidth={2} aria-hidden="true" />
       )}
       label={label}
       size="md"
@@ -370,7 +370,7 @@ function WorkflowPhaseHeader({
       data-status={status}
       className="flex items-center gap-2 px-2 pb-1 pt-2.5 first:pt-1"
     >
-      <span className="truncate text-[11px] font-semibold uppercase tracking-wide text-[var(--color-text-secondary)]">
+      <span className="truncate text-[12px] font-semibold text-[var(--color-text-tertiary)]">
         {label}
       </span>
       <span className="h-px flex-1 bg-[var(--color-border)]" aria-hidden="true" />
@@ -456,7 +456,7 @@ function ActivityRowView({
         </span>
         {detail ? (
           <span
-            className="mt-px block truncate text-[11.5px] leading-4 text-[var(--color-text-tertiary)]"
+            className="mt-px block truncate text-[12px] leading-4 text-[var(--color-text-tertiary)]"
             title={detail}
           >
             {detail}
@@ -471,12 +471,12 @@ function ActivityRowView({
         />
       )}
       {!isTask && row.openable ? (
-        <ChevronRight size={13} strokeWidth={2.2} className="shrink-0 text-[var(--color-text-tertiary)]" aria-hidden="true" />
+        <ChevronRight size={14} strokeWidth={1.75} className="shrink-0 text-[var(--color-text-tertiary)]" aria-hidden="true" />
       ) : null}
     </>
   )
   const interactiveRowClassName =
-    'flex min-w-0 items-center gap-2.5 rounded-[var(--radius-md)] px-2 py-1.5 text-left transition-[background-color,transform] duration-150 ease-out hover:bg-[var(--color-surface-hover)] active:translate-y-px motion-reduce:active:translate-y-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]'
+    'flex min-w-0 items-center gap-2.5 rounded-[var(--radius-sm)] px-2 py-1.5 text-left transition-[background-color,transform] duration-150 ease-out hover:bg-[var(--color-surface-hover)] active:translate-y-px motion-reduce:active:translate-y-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]'
   const stopButton = row.section === 'backgroundTasks' && onStopBackgroundTask ? (
     <BackgroundTaskStopButton
       row={row}
@@ -539,7 +539,7 @@ function ActivityRowView({
         aria-label={t('session.activity.openBackgroundTask', { name: row.label })}
         aria-expanded={selected}
         onClick={() => onOpenBackgroundTask(row)}
-        className={`${interactiveRowClassName} ${stopButton ? 'flex-1' : 'w-full'} ${selected ? 'bg-[var(--color-surface-container)]' : ''}`}
+        className={`${interactiveRowClassName} ${stopButton ? 'flex-1' : 'w-full'} ${selected ? 'bg-[var(--color-surface-selected)]' : ''}`}
       >
         {content}
       </button>
@@ -556,7 +556,7 @@ function ActivityRowView({
   if (stopButton) {
     return (
       <div className="flex w-full items-center gap-1">
-        <div className="flex min-w-0 flex-1 items-center gap-2.5 rounded-[var(--radius-md)] px-2 py-1.5">
+        <div className="flex min-w-0 flex-1 items-center gap-2.5 rounded-[var(--radius-sm)] px-2 py-1.5">
           {content}
         </div>
         {stopButton}
@@ -565,7 +565,7 @@ function ActivityRowView({
   }
 
   return (
-    <div className="flex items-center gap-2.5 rounded-[var(--radius-md)] px-2 py-1.5">
+    <div className="flex items-center gap-2.5 rounded-[var(--radius-sm)] px-2 py-1.5">
       {content}
     </div>
   )
@@ -601,14 +601,14 @@ function BackgroundTaskDetail({ row }: { row: ActivityRow }) {
   if (details.length === 0) return null
 
   return (
-    <div className="mx-2 mb-1.5 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)] p-3">
-      <div className="mb-2 text-[11px] font-semibold text-[var(--color-text-tertiary)]">
+    <div className="mx-2 mb-1.5 rounded-[var(--radius-md)] bg-[var(--color-surface-container)] p-3">
+      <div className="mb-2 text-[12px] font-semibold text-[var(--color-text-tertiary)]">
         {t('session.activity.details.title')}
       </div>
       <dl className="space-y-2">
         {details.map((detail) => (
           <div key={detail.label} className="min-w-0">
-            <dt className="text-[11px] font-semibold text-[var(--color-text-tertiary)]">
+            <dt className="text-[11px] font-medium text-[var(--color-text-tertiary)]">
               {detail.label}
             </dt>
             <dd className="max-h-28 overflow-auto whitespace-pre-wrap break-words text-[12px] leading-relaxed text-[var(--color-text-secondary)]">
@@ -713,12 +713,12 @@ export function SessionActivityPanel({
       data-placement={placement}
       className={className}
     >
-      <div className="flex items-center gap-2 px-4 pb-2 pt-3.5">
-        <h2 className="min-w-0 flex-1 truncate text-[15px] font-semibold text-[var(--color-text-primary)]">
+      <div className="flex h-12 shrink-0 items-center gap-2 pl-4 pr-3">
+        <h2 className="min-w-0 flex-1 truncate text-[14px] font-semibold text-[var(--color-text-primary)]">
           {t('session.activity.title')}
         </h2>
         <IconButton
-          icon={<X size={14} strokeWidth={2.2} aria-hidden="true" />}
+          icon={<X size={14} strokeWidth={1.75} aria-hidden="true" />}
           label={t('session.activity.close')}
           size="sm"
           tone="muted"
@@ -742,7 +742,7 @@ export function SessionActivityPanel({
             >
               <div className="mb-1.5 flex items-center justify-between gap-2 px-2">
                 <div className="flex min-w-0 items-center gap-2">
-                  <h3 className="text-[12px] font-semibold text-[var(--color-text-secondary)]">
+                  <h3 className="text-[12px] font-semibold text-[var(--color-text-tertiary)]">
                     {sectionTitle}
                   </h3>
                   {section.rows.length > 0 ? (
diff --git a/desktop/src/components/agentTeams/AgentTeamsCanvas.tsx b/desktop/src/components/agentTeams/AgentTeamsCanvas.tsx
index f8174242..5de3f005 100644
--- a/desktop/src/components/agentTeams/AgentTeamsCanvas.tsx
+++ b/desktop/src/components/agentTeams/AgentTeamsCanvas.tsx
@@ -121,8 +121,8 @@ function memberStatusColor(state: MemberWorkState): string {
   return 'var(--color-text-secondary)'
 }
 
-function memberDotColor(state: MemberWorkState, accent: string): string {
-  if (state === 'working') return accent
+function memberDotColor(state: MemberWorkState): string {
+  if (state === 'working') return 'var(--color-info)'
   // The raw warning accent is too light for label text, but reads as a fill.
   if (state === 'retrying') return 'var(--color-warning)'
   return memberStatusColor(state)
@@ -192,8 +192,9 @@ function taskStateColors(state: WorkbenchTaskState, accent: string) {
     return {
       background: 'var(--color-surface-container-lowest)',
       border: accent,
-      pillBackground: 'var(--color-brand-soft)',
-      pillForeground: 'var(--color-brand)',
+      // Running is the app-wide "in progress" tone, never the brand.
+      pillBackground: 'var(--color-info-container)',
+      pillForeground: 'var(--color-on-info-container)',
       title: 'var(--color-text-primary)',
       progress: accent,
     }
@@ -541,7 +542,7 @@ function MemberNode({
       aria-label={memberName(member)}
       aria-pressed={selected}
       onClick={onSelect}
-      className="agent-teams-person absolute z-20 flex w-[176px] cursor-pointer flex-col items-center rounded-[14px] outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-background)]"
+      className="agent-teams-person absolute z-[var(--z-sticky)] flex w-[176px] cursor-pointer flex-col items-center rounded-[var(--radius-lg)] outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-background)]"
       style={{ left: centerX - MEMBER_SLOT_WIDTH / 2, top }}
     >
       <span className="relative block" style={{ width: avatarSize, height: avatarSize }}>
@@ -560,13 +561,13 @@ function MemberNode({
         {hasActiveMessage ? (
           <span
             aria-hidden="true"
-            className="agent-teams-member-ring absolute -inset-[6px] rounded-full border-2 border-[var(--color-brand)]"
+            className="agent-teams-member-ring absolute -inset-[6px] rounded-full border-2 border-[var(--color-info)]"
           />
         ) : null}
         {!isLead && state === 'idle' ? (
           <span
             aria-hidden="true"
-            className="agent-teams-zz absolute -right-1 -top-1 text-[9px] font-extrabold text-[var(--color-text-tertiary)]"
+            className="agent-teams-zz absolute -right-1 -top-1 text-[11px] font-semibold text-[var(--color-text-tertiary)]"
           >
             zZ
           </span>
@@ -574,15 +575,15 @@ function MemberNode({
       </span>
 
       <span
-        className="mt-0.5 flex max-w-[168px] items-center gap-1.5 overflow-hidden rounded-[14px] border bg-[var(--color-surface-container-lowest)] px-2.5 py-1 shadow-[var(--shadow-card)]"
+        className="mt-0.5 flex max-w-[168px] items-center gap-1.5 overflow-hidden rounded-[var(--radius-lg)] border bg-[var(--color-surface-container-lowest)] px-2.5 py-1 shadow-[var(--shadow-card)]"
         style={{ borderColor: selected ? 'var(--color-brand)' : 'var(--color-border)' }}
       >
-        <span className="truncate font-mono text-[10.5px] font-extrabold text-[var(--color-text-primary)]">
+        <span className="truncate font-mono text-[11px] font-medium text-[var(--color-text-primary)]">
           {memberName(member)}
         </span>
         {model ? (
           <span
-            className="max-w-[54px] shrink-0 truncate rounded-full border border-[var(--color-border)] px-1.5 py-px text-[9px] font-extrabold text-[var(--color-text-tertiary)]"
+            className="max-w-[54px] shrink-0 truncate rounded-full border border-[var(--color-border)] px-1.5 py-px text-[11px] font-semibold text-[var(--color-text-tertiary)]"
             title={model.full}
             data-testid={`agent-teams-canvas-member-model-${member.agentId}`}
             data-model-inherited={model.inherited ? 'true' : 'false'}
@@ -591,20 +592,20 @@ function MemberNode({
           </span>
         ) : null}
         {isLead ? (
-          <span className="shrink-0 rounded-full border border-[var(--color-brand)] bg-[var(--color-brand-soft)] px-1.5 py-px text-[9px] font-extrabold text-[var(--color-brand)]">
+          <span className="shrink-0 rounded-full bg-[var(--color-surface-container)] px-1.5 py-px text-[11px] font-medium text-[var(--color-text-secondary)]">
             {t('agentTeams.leader')}
           </span>
         ) : null}
       </span>
 
       <span
-        className="mt-1 flex max-w-[172px] items-center gap-1.5 text-[10.5px] font-semibold"
+        className="mt-1 flex max-w-[172px] items-center gap-1.5 text-[11px] font-semibold"
         style={{ color: isLead ? 'var(--color-text-secondary)' : memberStatusColor(state) }}
       >
         {!isLead ? (
           <span
             className="h-1.5 w-1.5 shrink-0 rounded-full"
-            style={{ backgroundColor: memberDotColor(state, accent) }}
+            style={{ backgroundColor: memberDotColor(state) }}
           />
         ) : null}
         <span
@@ -635,7 +636,7 @@ function MemberNode({
                   data-task-status={task.status}
                   data-task-next={next ? 'true' : undefined}
                   title={task.subject}
-                  className="rounded-full border px-1.5 py-px font-mono text-[9px] font-extrabold"
+                  className="rounded-full border px-1.5 py-px font-mono text-[11px] font-medium"
                   style={memberTaskChipStyle(task, next, accent)}
                 >
                   #{task.id}
@@ -678,7 +679,7 @@ function TaskCard({
 }) {
   const { task, state, depth, x, y } = positioned
   const owner = taskOwnerVisual(task, snapshot, members, depth)
-  const accent = owner?.accent ?? 'var(--color-brand)'
+  const accent = owner?.accent ?? 'var(--color-info)'
   const colors = taskStateColors(state, accent)
   // Still in progress on the list, but its owner stopped, failed or waits to
   // retry: say so instead of animating work nobody is doing.
@@ -708,7 +709,7 @@ function TaskCard({
       onMouseLeave={onHoverEnd}
       onFocus={onFocus}
       onBlur={onBlur}
-      className={`agent-teams-task absolute z-20 flex h-[92px] w-[200px] cursor-pointer flex-col gap-[5px] rounded-[10px] border p-[9px_10px] text-left shadow-none outline-none transition-[opacity,border-color,box-shadow,transform] hover:-translate-y-px hover:border-[var(--color-border-strong)] hover:shadow-[var(--shadow-card)] focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-background)] active:translate-y-0 ${justUnlocked ? 'agent-teams-unlocked' : ''}`}
+      className={`agent-teams-task absolute z-[var(--z-sticky)] flex h-[92px] w-[200px] cursor-pointer flex-col gap-[5px] rounded-[var(--radius-md)] border p-[9px_10px] text-left shadow-none outline-none transition-[opacity,border-color,box-shadow,transform] hover:-translate-y-px hover:border-[var(--color-border-strong)] hover:shadow-[var(--shadow-card)] focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-background)] active:translate-y-0 ${justUnlocked ? 'agent-teams-unlocked' : ''}`}
       style={{
         left: x,
         top: y,
@@ -718,11 +719,11 @@ function TaskCard({
       }}
     >
       <span className="flex items-center justify-between gap-1.5">
-        <span data-task-id={task.id} className="shrink-0 font-mono text-[10px] font-extrabold text-[var(--color-text-tertiary)]">
+        <span data-task-id={task.id} className="shrink-0 font-mono text-[11px] font-medium text-[var(--color-text-tertiary)]">
           #{task.id}
         </span>
         <span
-          className="shrink-0 rounded-full border px-1.5 py-px text-[9.5px] font-extrabold"
+          className="shrink-0 rounded-full border px-1.5 py-px text-[11px] font-semibold"
           style={{
             backgroundColor: justUnlocked ? 'var(--color-success-container)' : stall?.background ?? colors.pillBackground,
             borderColor: justUnlocked ? 'var(--color-success)' : stall?.border ?? colors.border,
@@ -747,10 +748,10 @@ function TaskCard({
         ) : (
           <span aria-hidden="true" className="h-5 w-5 shrink-0" />
         )}
-        <span className="min-w-0 flex-1 truncate font-mono text-[9.5px] font-bold text-[var(--color-text-secondary)]" title={owner?.inferred ? t('agentTeams.task.reconstructedOwner') : undefined}>
+        <span className="min-w-0 flex-1 truncate font-mono text-[11px] font-medium text-[var(--color-text-secondary)]" title={owner?.inferred ? t('agentTeams.task.reconstructedOwner') : undefined}>
           {ownerLabel}
         </span>
-        <span className="shrink-0 whitespace-nowrap font-mono text-[9.5px] text-[var(--color-text-tertiary)]">
+        <span className="shrink-0 whitespace-nowrap font-mono text-[11px] text-[var(--color-text-tertiary)]">
           {dependencies
             ? state === 'blocked'
               ? `${t('agentTeams.task.dependsOn')} ${dependencies}`
@@ -1024,7 +1025,7 @@ export function AgentTeamsCanvas({
                   data-edge-active={focusedChain && related ? 'true' : 'false'}
                   d={dependencyPath(from, to)}
                   fill="none"
-                  stroke={fresh ? 'var(--color-success)' : satisfied ? owner?.accent ?? 'var(--color-brand)' : 'var(--color-border)'}
+                  stroke={fresh ? 'var(--color-success)' : satisfied ? owner?.accent ?? 'var(--color-text-secondary)' : 'var(--color-border)'}
                   strokeWidth={fresh ? 3 : focusedChain && related ? 2.5 : 2}
                   strokeDasharray="7 7"
                   opacity={related ? (satisfied ? 0.95 : 0.8) : 0.2}
@@ -1034,7 +1035,7 @@ export function AgentTeamsCanvas({
                   cx={to.x - 4}
                   cy={to.y + TASK_HEIGHT / 2}
                   r={3.2}
-                  fill={fresh ? 'var(--color-success)' : satisfied ? owner?.accent ?? 'var(--color-brand)' : 'var(--color-border)'}
+                  fill={fresh ? 'var(--color-success)' : satisfied ? owner?.accent ?? 'var(--color-text-secondary)' : 'var(--color-border)'}
                   opacity={related ? 1 : 0.2}
                 />
               </g>
@@ -1075,13 +1076,13 @@ export function AgentTeamsCanvas({
         </svg>
 
         <div
-          className="absolute z-10 whitespace-nowrap text-[10px] font-bold uppercase tracking-[0.12em] text-[var(--color-text-tertiary)]"
+          className="absolute z-[var(--z-raised)] whitespace-nowrap text-[11px] font-semibold text-[var(--color-text-tertiary)]"
           style={{ left: FORMATION_TITLE_X, top: FORMATION_TITLE_Y }}
         >
           {t('agentTeams.canvas.formation')}
         </div>
         <div
-          className="absolute z-10 whitespace-nowrap text-[10px] font-bold uppercase tracking-[0.12em] text-[var(--color-text-tertiary)]"
+          className="absolute z-[var(--z-raised)] whitespace-nowrap text-[11px] font-semibold text-[var(--color-text-tertiary)]"
           style={{ left: FORMATION_TITLE_X, top: TASKS_TITLE_Y }}
         >
           {t('agentTeams.canvas.tasks')}
@@ -1098,13 +1099,13 @@ export function AgentTeamsCanvas({
           return (
             <div
               key={lane.depth}
-              className="absolute z-10 flex items-center justify-between px-3"
+              className="absolute z-[var(--z-raised)] flex items-center justify-between px-3"
               style={{ left: lane.x, top: LANE_TOP + 8, width: lane.width }}
             >
-              <span className="truncate text-[10px] font-extrabold uppercase tracking-[0.1em] text-[var(--color-text-secondary)]">
+              <span className="truncate text-[11px] font-semibold text-[var(--color-text-secondary)]">
                 {title}
               </span>
-              <span className="shrink-0 font-mono text-[10px] font-bold text-[var(--color-text-tertiary)]">
+              <span className="shrink-0 font-mono text-[11px] font-medium text-[var(--color-text-tertiary)]">
                 {completed}/{lane.count}
               </span>
             </div>
@@ -1158,7 +1159,7 @@ export function AgentTeamsCanvas({
             aria-hidden="true"
             data-testid="agent-teams-active-flight"
             data-flight-channel={route.channel}
-            className="agent-teams-flight pointer-events-none absolute z-30 flex items-center gap-1.5 whitespace-nowrap rounded-full border-[1.5px] bg-[var(--color-surface-container-lowest)] px-2 py-1 shadow-[var(--shadow-card)]"
+            className="agent-teams-flight pointer-events-none absolute z-[var(--z-nav)] flex items-center gap-1.5 whitespace-nowrap rounded-full border-[1.5px] bg-[var(--color-surface-container-lowest)] px-2 py-1 shadow-[var(--shadow-card)]"
             style={{
               borderColor: route.color,
               color: route.color,
@@ -1168,13 +1169,13 @@ export function AgentTeamsCanvas({
             } as CSSProperties}
           >
             <span className="h-[7px] w-[7px] rounded-full" style={{ backgroundColor: route.color }} />
-            <span className="font-mono text-[10px] font-extrabold">{route.label}</span>
+            <span className="font-mono text-[11px] font-medium">{route.label}</span>
           </div>
         ))}
 
         <div
           data-testid="agent-teams-legend"
-          className="absolute z-10 flex items-center gap-[22px] whitespace-nowrap text-[10.5px] font-semibold text-[var(--color-text-secondary)]"
+          className="absolute z-[var(--z-raised)] flex items-center gap-[22px] whitespace-nowrap text-[11px] font-semibold text-[var(--color-text-secondary)]"
           style={{ left: 32, top: layout.legendY }}
         >
           <span className="flex items-center gap-1.5">
@@ -1182,7 +1183,7 @@ export function AgentTeamsCanvas({
             {t('agentTeams.legend.unmet')}
           </span>
           <span className="flex items-center gap-1.5">
-            <svg aria-hidden="true" width="26" height="6"><path d="M 0,3 L 26,3" stroke="var(--color-brand)" strokeWidth="2" strokeDasharray="7 7" className="agent-teams-flow" /></svg>
+            <svg aria-hidden="true" width="26" height="6"><path d="M 0,3 L 26,3" stroke="var(--color-text-secondary)" strokeWidth="2" strokeDasharray="7 7" className="agent-teams-flow" /></svg>
             {t('agentTeams.legend.satisfied')}
           </span>
           <span className="flex items-center gap-1.5">
@@ -1194,7 +1195,7 @@ export function AgentTeamsCanvas({
             {t('agentTeams.legend.unlocked')}
           </span>
           <span className="flex items-center gap-1.5">
-            <span aria-hidden="true" className="h-4 w-4 rounded-full border-[1.5px] border-[var(--color-brand)]" />
+            <span aria-hidden="true" className="h-4 w-4 rounded-full border-[1.5px] border-[var(--color-info)]" />
             {t('agentTeams.legend.flight')}
           </span>
         </div>
diff --git a/desktop/src/components/agentTeams/AgentTeamsCommunicationFeed.tsx b/desktop/src/components/agentTeams/AgentTeamsCommunicationFeed.tsx
index af643855..f3fa9590 100644
--- a/desktop/src/components/agentTeams/AgentTeamsCommunicationFeed.tsx
+++ b/desktop/src/components/agentTeams/AgentTeamsCommunicationFeed.tsx
@@ -94,21 +94,21 @@ function categoryLabel(category: FeedCategory, t: TranslationFn): string {
 
 function categoryTagClass(category: FeedCategory): string {
   if (category === 'assignment') {
-    return 'border-[var(--color-primary-fixed-dim)] bg-[var(--color-brand-soft)] text-[var(--color-on-brand-soft)]'
+    return 'border-transparent bg-[var(--color-info-container)] text-[var(--color-on-info-container)]'
   }
   if (category === 'peer') {
     return 'border-[var(--color-memory-border)] bg-[var(--color-tertiary-container)] text-[var(--color-tertiary)]'
   }
   if (category === 'system') {
-    return 'border-[var(--color-success)] bg-[var(--color-success-container)] text-[var(--color-on-success-container)]'
+    return 'border-transparent bg-[var(--color-surface-container)] text-[var(--color-text-secondary)]'
   }
   return 'border-[var(--color-outline)] bg-[var(--color-surface-container-lowest)] text-[var(--color-text-secondary)]'
 }
 
 function categoryAccent(category: FeedCategory): string {
-  if (category === 'assignment') return 'var(--color-brand)'
+  if (category === 'assignment') return 'var(--color-info)'
   if (category === 'peer') return 'var(--color-tertiary)'
-  if (category === 'system') return 'var(--color-success)'
+  if (category === 'system') return 'var(--color-text-tertiary)'
   return 'var(--color-text-secondary)'
 }
 
@@ -223,7 +223,7 @@ export function AgentTeamsCommunicationFeed({
     >
       <div className="shrink-0 border-b border-[var(--color-border)] px-3.5 py-3">
         <div className="flex min-w-0 items-baseline gap-2">
-          <h3 className="text-[15px] font-extrabold tracking-[-0.2px]">
+          <h3 className="text-[15px] font-semibold tracking-[-0.2px]">
             {t('agentTeams.communication.title')}
           </h3>
           <span
@@ -250,7 +250,7 @@ export function AgentTeamsCommunicationFeed({
                 aria-pressed={selected}
                 onClick={() => setFilter(option.key)}
                 className={[
-                  'inline-flex shrink-0 items-center rounded-full border px-2.5 py-1 text-[11px] font-bold outline-none transition-[transform,background-color,border-color,color] duration-200 focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] active:scale-[0.98]',
+                  'inline-flex shrink-0 items-center rounded-full border px-2.5 py-1 text-[11px] font-semibold outline-none transition-[transform,background-color,border-color,color] duration-200 focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] active:scale-[0.98]',
                   selected
                     ? 'border-[var(--color-text-primary)] bg-[var(--color-text-primary)] text-[var(--color-surface)]'
                     : 'border-[var(--color-border)] bg-[var(--color-surface)] text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-hover)]',
@@ -343,34 +343,34 @@ function FeedRow({
             aria-hidden="true"
           />
           <span
-            className="shrink-0 text-[9.5px] font-extrabold uppercase tracking-[0.08em]"
+            className="shrink-0 text-[11px] font-semibold"
             style={{ color: categoryAccent(category) }}
           >
             {categoryLabel(category, t)}
           </span>
           <p
             data-testid={`agent-teams-message-${message.id}-body`}
-            className="min-w-0 flex-1 truncate text-[11.5px] leading-[1.4] text-[var(--color-text-secondary)]"
+            className="min-w-0 flex-1 truncate text-xs leading-[1.4] text-[var(--color-text-secondary)]"
             title={text}
           >
             {text}
           </p>
           {message.taskId ? (
-            <span className="shrink-0 rounded-full bg-[var(--color-surface-container-high)] px-1.5 py-0.5 font-mono text-[9px] text-[var(--color-text-tertiary)]">
+            <span className="shrink-0 rounded-full bg-[var(--color-surface-container-high)] px-1.5 py-0.5 font-mono text-[11px] text-[var(--color-text-tertiary)]">
               #{message.taskId}
             </span>
           ) : null}
           {repeats > 1 ? (
             <span
               data-testid={`agent-teams-message-${message.id}-repeats`}
-              className="shrink-0 rounded-full bg-[var(--color-surface-container-high)] px-1.5 py-0.5 font-mono text-[9px] tabular-nums text-[var(--color-text-tertiary)]"
+              className="shrink-0 rounded-full bg-[var(--color-surface-container-high)] px-1.5 py-0.5 font-mono text-[11px] tabular-nums text-[var(--color-text-tertiary)]"
             >
               ×{repeats}
             </span>
           ) : null}
           <time
             dateTime={message.timestamp}
-            className="shrink-0 font-mono text-[9px] tabular-nums text-[var(--color-text-tertiary)]"
+            className="shrink-0 font-mono text-[11px] tabular-nums text-[var(--color-text-tertiary)]"
           >
             {time}
           </time>
@@ -393,13 +393,13 @@ function FeedRow({
   return (
     <article {...rowProps} className="relative px-3.5 py-3">
       {isLatest ? (
-        <span className="absolute bottom-3 left-0 top-3 w-0.5 rounded-r-full bg-[var(--color-brand)]" aria-hidden="true" />
+        <span className="absolute bottom-3 left-0 top-3 w-0.5 rounded-r-full bg-[var(--color-info)]" aria-hidden="true" />
       ) : null}
 
       <div className="flex min-w-0 items-center gap-2">
         <span
           className={[
-            'inline-flex shrink-0 items-center gap-1.5 rounded-full border px-2 py-0.5 text-[9.5px] font-extrabold uppercase tracking-[0.08em]',
+            'inline-flex shrink-0 items-center gap-1.5 rounded-full border px-2 py-0.5 text-[11px] font-semibold',
             categoryTagClass(category),
           ].join(' ')}
         >
@@ -407,13 +407,13 @@ function FeedRow({
           {categoryLabel(category, t)}
         </span>
         {message.taskId ? (
-          <span className="shrink-0 rounded-full bg-[var(--color-surface-container-high)] px-1.5 py-0.5 font-mono text-[9px] text-[var(--color-text-tertiary)]">
+          <span className="shrink-0 rounded-full bg-[var(--color-surface-container-high)] px-1.5 py-0.5 font-mono text-[11px] text-[var(--color-text-tertiary)]">
             #{message.taskId}
           </span>
         ) : null}
         <time
           dateTime={message.timestamp}
-          className="ml-auto shrink-0 font-mono text-[9px] tabular-nums text-[var(--color-text-tertiary)]"
+          className="ml-auto shrink-0 font-mono text-[11px] tabular-nums text-[var(--color-text-tertiary)]"
         >
           {time}
         </time>
@@ -443,10 +443,10 @@ function FeedRow({
             className="inline-flex min-w-0 flex-1 items-center gap-1.5"
             title={recipient}
           >
-            <span className="inline-flex h-[22px] w-[22px] shrink-0 items-center justify-center rounded-full border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] text-[var(--color-brand)]">
+            <span className="inline-flex h-[22px] w-[22px] shrink-0 items-center justify-center rounded-full border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] text-[var(--color-text-secondary)]">
               <Megaphone size={11} strokeWidth={2} aria-hidden="true" />
             </span>
-            <span className="min-w-0 truncate font-mono text-[10px] font-semibold text-[var(--color-text-secondary)]">
+            <span className="min-w-0 truncate font-mono text-[11px] font-medium text-[var(--color-text-secondary)]">
               {recipient}
             </span>
           </span>
@@ -456,13 +456,13 @@ function FeedRow({
       <div
         data-testid={`agent-teams-message-${message.id}-body`}
         data-collapsed={collapsed ? 'true' : 'false'}
-        className="relative mt-[7px] text-[12.5px] leading-[1.55]"
+        className="relative mt-[7px] text-[13px] leading-[1.55]"
       >
         <div className={collapsed ? 'max-h-[148px] overflow-hidden' : ''}>
           <MarkdownRenderer
             content={text}
             variant="compact"
-            className="prose-p:first:mt-0 prose-p:last:mb-0 prose-p:text-[12.5px] prose-p:leading-[1.55] prose-li:text-[12.5px] prose-li:leading-[1.55] prose-headings:first:mt-0 prose-headings:text-[var(--color-text-primary)] prose-code:text-[11px]"
+            className="prose-p:first:mt-0 prose-p:last:mb-0 prose-p:text-[13px] prose-p:leading-[1.55] prose-li:text-[13px] prose-li:leading-[1.55] prose-headings:first:mt-0 prose-headings:text-[var(--color-text-primary)] prose-code:text-[11px]"
           />
         </div>
         {collapsed ? (
@@ -477,7 +477,7 @@ function FeedRow({
         <button
           type="button"
           onClick={() => setExpanded((current) => !current)}
-          className="relative mt-2 rounded-[var(--radius-sm)] text-[10px] font-semibold text-[var(--color-brand)] outline-none transition-[transform,color] duration-200 hover:underline focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] active:scale-[0.98]"
+          className="relative mt-2 rounded-[var(--radius-sm)] text-[11px] font-medium text-[var(--color-text-accent)] outline-none transition-[transform,color] duration-200 hover:underline focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] active:scale-[0.98]"
         >
           {t(expanded ? 'agentTeams.communication.collapse' : 'agentTeams.communication.expand')}
         </button>
@@ -518,7 +518,7 @@ function ParticipantFigure({
       </span>
       <span
         data-testid={nameTestId}
-        className="min-w-0 truncate font-mono text-[10px] font-bold text-[var(--color-text-secondary)]"
+        className="min-w-0 truncate font-mono text-[11px] font-medium text-[var(--color-text-secondary)]"
       >
         {name}
       </span>
diff --git a/desktop/src/components/agentTeams/AgentTeamsMemberInspector.tsx b/desktop/src/components/agentTeams/AgentTeamsMemberInspector.tsx
index 1a3d4e1d..e3e090ca 100644
--- a/desktop/src/components/agentTeams/AgentTeamsMemberInspector.tsx
+++ b/desktop/src/components/agentTeams/AgentTeamsMemberInspector.tsx
@@ -212,7 +212,7 @@ function stalledTone(state: StalledTaskOwnerState): Tone {
 }
 
 function taskTone(state: WorkbenchTaskState): Tone {
-  if (state === 'running') return 'brand'
+  if (state === 'running') return 'info'
   if (state === 'completed') return 'success'
   if (state === 'open') return 'warning'
   return 'neutral'
@@ -228,7 +228,7 @@ function memberStateLabel(state: MemberWorkState, member: TeamMember, t: Transla
 }
 
 function memberTone(state: MemberWorkState): Tone {
-  if (state === 'working') return 'brand'
+  if (state === 'working') return 'info'
   if (state === 'error') return 'danger'
   if (state === 'retrying') return 'warning'
   if (state === 'exited' || state === 'stopped') return 'neutral'
@@ -441,46 +441,46 @@ export function AgentTeamsMemberInspector({
             />
           </span>
           <div className="min-w-0">
-            <h2 id={headingId} className="truncate font-mono text-[14px] font-extrabold">
+            <h2 id={headingId} className="truncate text-sm font-semibold">
               {name}
             </h2>
-            <p className="truncate text-[10.5px] text-[var(--color-text-secondary)]">
+            <p className="truncate text-[11px] text-[var(--color-text-secondary)]">
               {t('agentTeams.inspector.independentContext', { role: member.role })}
             </p>
           </div>
         </div>
 
-        <dl className="mt-3 grid grid-cols-3 gap-4 text-[11.5px]">
+        <dl className="mt-3 grid grid-cols-3 gap-4 text-xs">
           <div className="min-w-0">
-            <dt className="text-[10px] font-semibold text-[var(--color-text-tertiary)]">
+            <dt className="text-[11px] font-semibold text-[var(--color-text-tertiary)]">
               {t('agentTeams.inspector.current')}
             </dt>
-            <dd className="mt-0.5 flex min-w-0 items-center gap-1.5 font-extrabold">
+            <dd className="mt-0.5 flex min-w-0 items-center gap-1.5 font-semibold">
               <StatusDot tone={memberTone(workState)} pulse={workState === 'working'} />
               <span className="truncate">{currentStatusLabel}</span>
             </dd>
           </div>
           <div>
-            <dt className="text-[10px] font-semibold text-[var(--color-text-tertiary)]">
+            <dt className="text-[11px] font-semibold text-[var(--color-text-tertiary)]">
               {t('agentTeams.inspector.completedTasks')}
             </dt>
-            <dd className="mt-0.5 font-extrabold tabular-nums">{completedTasks}/{taskHistory.length}</dd>
+            <dd className="mt-0.5 font-semibold tabular-nums">{completedTasks}/{taskHistory.length}</dd>
           </div>
           <div>
-            <dt className="text-[10px] font-semibold text-[var(--color-text-tertiary)]">
+            <dt className="text-[11px] font-semibold text-[var(--color-text-tertiary)]">
               {t('agentTeams.inspector.messages')}
             </dt>
-            <dd className="mt-0.5 font-extrabold tabular-nums">{messages.length}</dd>
+            <dd className="mt-0.5 font-semibold tabular-nums">{messages.length}</dd>
           </div>
           {/* Model spans the full width: a model id plus an "inherited from" prefix
               does not fit a third of the drawer, and truncating it would cut the
               model name itself — the one part that matters. */}
           <div className="col-span-3 min-w-0">
-            <dt className="text-[10px] font-semibold text-[var(--color-text-tertiary)]">
+            <dt className="text-[11px] font-semibold text-[var(--color-text-tertiary)]">
               {t('agentTeams.model.label')}
             </dt>
             <dd
-              className="mt-0.5 truncate font-extrabold"
+              className="mt-0.5 truncate font-semibold"
               title={model?.full}
               data-testid="agent-teams-member-model"
               data-model-inherited={model?.inherited ? 'true' : 'false'}
@@ -493,8 +493,8 @@ export function AgentTeamsMemberInspector({
             </dd>
           </div>
           {(member.providerName || member.providerId !== undefined) && <div className="col-span-3 min-w-0">
-            <dt className="text-[10px] font-semibold text-[var(--color-text-tertiary)]">{t('teamPlan.provider')}</dt>
-            <dd className="mt-0.5 truncate font-extrabold" data-testid="agent-teams-member-provider">{member.providerName || member.providerId || t('teamPlan.official')}</dd>
+            <dt className="text-[11px] font-semibold text-[var(--color-text-tertiary)]">{t('teamPlan.provider')}</dt>
+            <dd className="mt-0.5 truncate font-semibold" data-testid="agent-teams-member-provider">{member.providerName || member.providerId || t('teamPlan.official')}</dd>
           </div>}
         </dl>
 
@@ -532,7 +532,7 @@ export function AgentTeamsMemberInspector({
         >
           <h3
             id={`${headingId}-tasks`}
-            className="text-[10px] font-bold uppercase tracking-[0.1em] text-[var(--color-text-tertiary)]"
+            className="text-[11px] font-semibold text-[var(--color-text-tertiary)]"
           >
             {t('agentTeams.inspector.taskHistory')}
             <span className="ml-1 normal-case tracking-normal">
@@ -549,7 +549,7 @@ export function AgentTeamsMemberInspector({
                 if (group === 'upcoming') entries.sort((left, right) => left.task.id.localeCompare(right.task.id, undefined, { numeric: true }))
                 return (
                   <section key={group} data-testid={`agent-teams-member-task-group-${group}`} className="mt-2">
-                    <h4 className="text-[10px] font-semibold text-[var(--color-text-secondary)]">
+                    <h4 className="text-[11px] font-semibold text-[var(--color-text-secondary)]">
                       {t(label)} · {entries.length}
                     </h4>
                     <ol className="mt-0.5">
@@ -569,10 +569,10 @@ export function AgentTeamsMemberInspector({
                             data-task-stalled={stalled}
                             className="flex min-w-0 items-center gap-2 border-b border-[var(--color-border)] py-1.5 last:border-b-0"
                           >
-                            <span className="w-[26px] shrink-0 font-mono text-[10px] font-extrabold text-[var(--color-text-tertiary)]">
+                            <span className="w-[26px] shrink-0 font-mono text-[11px] font-medium text-[var(--color-text-tertiary)]">
                               #{entry.task.id}
                             </span>
-                            <span className="min-w-0 flex-1 truncate text-[11.5px] leading-[1.3]" title={entry.task.subject}>
+                            <span className="min-w-0 flex-1 truncate text-xs leading-[1.3]" title={entry.task.subject}>
                               {entry.task.subject}
                             </span>
                             <Badge
@@ -587,7 +587,7 @@ export function AgentTeamsMemberInspector({
                             </Badge>
                             <time
                               dateTime={entry.startedAt === null ? undefined : new Date(entry.startedAt).toISOString()}
-                              className="w-[82px] shrink-0 truncate text-right font-mono text-[9.5px] tabular-nums text-[var(--color-text-tertiary)]"
+                              className="w-[82px] shrink-0 truncate text-right font-mono text-[11px] tabular-nums text-[var(--color-text-tertiary)]"
                               title={aside}
                             >
                               {aside}
@@ -610,7 +610,7 @@ export function AgentTeamsMemberInspector({
         <section aria-labelledby={`${headingId}-messages`} className="px-3.5 py-3">
           <h3
             id={`${headingId}-messages`}
-            className="text-[10px] font-bold uppercase tracking-[0.1em] text-[var(--color-text-tertiary)]"
+            className="text-[11px] font-semibold text-[var(--color-text-tertiary)]"
           >
             {t('agentTeams.inspector.messages')}
           </h3>
@@ -624,21 +624,21 @@ export function AgentTeamsMemberInspector({
                     data-testid={`agent-teams-member-message-${row.message.id}`}
                     data-message-direction={row.direction}
                     data-message-body={row.body.kind}
-                    className={`mb-2 border-l-2 pb-2 pl-2.5 last:mb-0 ${sent ? 'border-l-[var(--color-brand)]' : 'border-l-[var(--color-tertiary)]'}`}
+                    className={`mb-2 border-l-2 pb-2 pl-2.5 last:mb-0 ${sent ? 'border-l-[var(--color-info)]' : 'border-l-[var(--color-tertiary)]'}`}
                   >
                     <div className="flex min-w-0 items-center gap-1.5">
-                      <span className={`shrink-0 text-[9.5px] font-extrabold ${sent ? 'text-[var(--color-brand)]' : 'text-[var(--color-tertiary)]'}`}>
+                      <span className={`shrink-0 text-[11px] font-semibold ${sent ? 'text-[var(--color-info)]' : 'text-[var(--color-tertiary)]'}`}>
                         {t(sent ? 'agentTeams.inspector.sent' : 'agentTeams.inspector.received')}
                       </span>
                       {sent
                         ? <ArrowRight size={11} aria-hidden="true" className="shrink-0 text-[var(--color-text-tertiary)]" />
                         : <ArrowLeft size={11} aria-hidden="true" className="shrink-0 text-[var(--color-text-tertiary)]" />}
-                      <span className="min-w-0 truncate font-mono text-[10px] text-[var(--color-text-tertiary)]">
+                      <span className="min-w-0 truncate font-mono text-[11px] text-[var(--color-text-tertiary)]">
                         {row.peerName}
                       </span>
                       <time
                         dateTime={row.message.timestamp}
-                        className="ml-auto shrink-0 font-mono text-[10px] tabular-nums text-[var(--color-text-tertiary)]"
+                        className="ml-auto shrink-0 font-mono text-[11px] tabular-nums text-[var(--color-text-tertiary)]"
                       >
                         {formatWorkbenchMessageTime(row.message.timestamp)}
                       </time>
@@ -647,10 +647,10 @@ export function AgentTeamsMemberInspector({
                       <MarkdownRenderer
                         content={row.body.text}
                         variant="compact"
-                        className="mt-1 text-[12.5px] leading-[1.55] text-[var(--color-text-primary)]"
+                        className="mt-1 text-[13px] leading-[1.55] text-[var(--color-text-primary)]"
                       />
                     ) : (
-                      <p className="mt-1 text-[11.5px] leading-[1.5] text-[var(--color-text-secondary)]">
+                      <p className="mt-1 text-xs leading-[1.5] text-[var(--color-text-secondary)]">
                         {protocolNarration(row, snapshot, t)}
                       </p>
                     )}
diff --git a/desktop/src/components/agentTeams/AgentTeamsPlanCard.css b/desktop/src/components/agentTeams/AgentTeamsPlanCard.css
index 5623b8c7..badb0e95 100644
--- a/desktop/src/components/agentTeams/AgentTeamsPlanCard.css
+++ b/desktop/src/components/agentTeams/AgentTeamsPlanCard.css
@@ -20,17 +20,6 @@
   background: var(--color-surface-hover);
 }
 
-.team-plan-chevron {
-  width: 6px;
-  height: 6px;
-  flex-shrink: 0;
-  margin: -3px 2px 0 0;
-  border-right: 1px solid currentColor;
-  border-bottom: 1px solid currentColor;
-  transform: rotate(45deg);
-  opacity: 0.6;
-}
-
 .team-plan-detail,
 .team-plan-batch {
   animation: team-plan-reveal 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
diff --git a/desktop/src/components/agentTeams/AgentTeamsPlanCard.tsx b/desktop/src/components/agentTeams/AgentTeamsPlanCard.tsx
index df961546..816dda36 100644
--- a/desktop/src/components/agentTeams/AgentTeamsPlanCard.tsx
+++ b/desktop/src/components/agentTeams/AgentTeamsPlanCard.tsx
@@ -1,5 +1,7 @@
 import { useEffect, useState } from 'react'
+import { ChevronDown, UsersRound } from 'lucide-react'
 import { ModelSelector } from '@/components/controls/ModelSelector'
+import { Badge, StatusDot, type Tone } from '@/components/ui/Badge'
 import { Button } from '@/components/ui/Button'
 import { Checkbox } from '@/components/ui/Checkbox'
 import { Modal } from '@/components/ui/Modal'
@@ -13,7 +15,7 @@ import { useSessionRuntimeStore } from '@/stores/sessionRuntimeStore'
 import { useProviderStore } from '@/stores/providerStore'
 import type { RuntimeSelection } from '@/types/runtime'
 import { CLAUDE_OFFICIAL_PROVIDER_ID } from '@/constants/openaiOfficialProvider'
-import { isValidTeamMemberName, type TeamPlanRuntime, type TeamPlanMember } from '../../../../src/shared/teamPlan'
+import { isValidTeamMemberName, type TeamPlanRecord, type TeamPlanRuntime, type TeamPlanMember } from '../../../../src/shared/teamPlan'
 
 function selection(runtime: TeamPlanRuntime): RuntimeSelection {
   return {
@@ -28,6 +30,23 @@ function runtimeFor(selection: RuntimeSelection): TeamPlanRuntime {
   return { ...selection, providerId: selection.providerId ?? CLAUDE_OFFICIAL_PROVIDER_ID }
 }
 
+/**
+ * The app-wide status vocabulary: waiting on a person is `warning`, work under
+ * way is `info`, a failed launch is `danger`, and a plan nobody is acting on
+ * any more is `neutral`.
+ */
+const STATE_TONE: Record<TeamPlanRecord['state'], Tone> = {
+  draft: 'info',
+  review_pending: 'warning',
+  launching: 'info',
+  running: 'info',
+  launch_failed: 'danger',
+  cancelled: 'neutral',
+  interrupted: 'neutral',
+}
+
+const CHEVRON = <ChevronDown size={14} strokeWidth={1.75} aria-hidden="true" className="shrink-0 text-[var(--color-text-tertiary)]" />
+
 /** Durable plan review is independent of a running chat turn or permission request. */
 export function AgentTeamsPlanCard({ sessionId }: { sessionId: string }) {
   const t = useTranslation()
@@ -96,14 +115,23 @@ export function AgentTeamsPlanCard({ sessionId }: { sessionId: string }) {
     interrupted: t('teamPlan.state.interrupted'),
   }[plan.state]
 
+  const stateTone = STATE_TONE[plan.state]
+
   return (
-    <section aria-label={t('teamPlan.title')} className="my-4 rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface)] p-5">
-      <div className="flex flex-wrap items-center justify-between gap-4">
+    <section aria-label={t('teamPlan.title')} className="my-4 overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)]">
+      <div className="flex h-[42px] items-center gap-2 border-b border-[var(--color-border)] px-3.5">
+        <UsersRound size={15} strokeWidth={1.75} aria-hidden="true" className="shrink-0 text-[var(--color-text-tertiary)]" />
+        <span className="min-w-0 flex-1 truncate text-[13px] font-semibold text-[var(--color-text-primary)]">{t('teamPlan.title')}</span>
+      </div>
+      <div className="flex flex-wrap items-center justify-between gap-3 px-3.5 py-3">
         <div className="min-w-0">
-          <p className="mb-1 text-xs text-[var(--color-text-secondary)]" role="status">{stateLabel} · {t('teamPlan.memberCount', { count: members.length })}</p>
-          <h3 className="truncate text-base font-semibold tracking-tight text-[var(--color-text-primary)]">{plan.teamName}</h3>
+          <h3 className="truncate text-sm font-medium text-[var(--color-text-primary)]">{plan.teamName}</h3>
+          <p className="mt-1 flex min-w-0 items-center gap-1.5 text-xs text-[var(--color-text-tertiary)]" role="status">
+            <StatusDot tone={stateTone} pulse={stateTone === 'warning'} />
+            <span className="truncate">{stateLabel} · {t('teamPlan.memberCount', { count: members.length })}</span>
+          </p>
         </div>
-        <Button data-testid="team-plan-open" variant="secondary" onClick={openEditor}>{t('teamPlan.open')}</Button>
+        <Button data-testid="team-plan-open" size="base" variant={plan.state === 'review_pending' ? 'primary' : 'secondary'} onClick={openEditor}>{t('teamPlan.open')}</Button>
       </div>
       <Modal open={open} onClose={() => { if (!entry.busy) setOpen(false) }} title={t('teamPlan.title')} width={1080} className="team-plan-dialog" typography="interface" footer={(
         <div className="team-plan-footer flex w-full flex-wrap items-center justify-between gap-3">
@@ -132,7 +160,7 @@ export function AgentTeamsPlanCard({ sessionId }: { sessionId: string }) {
               <p className="text-sm text-[var(--color-text-secondary)]">{t('teamPlan.reviewHint')}</p>
               <p className="mt-2 max-w-[65ch] text-xs leading-relaxed text-[var(--color-text-tertiary)]">{t('teamPlan.description')}</p>
             </div>
-            <span className="rounded-full bg-[var(--color-surface-container)] px-3 py-1 text-xs text-[var(--color-text-secondary)]">{stateLabel}</span>
+            <Badge tone={stateTone} size="sm">{stateLabel}</Badge>
           </div>
           {plan.launch?.error && <p role="alert" className="mb-4 text-sm text-[var(--color-error)]">{plan.launch.error}</p>}
           {entry.error && <p role="alert" className="mb-4 text-sm text-[var(--color-error)]">{entry.error}</p>}
@@ -151,7 +179,7 @@ export function AgentTeamsPlanCard({ sessionId }: { sessionId: string }) {
                 {plan.state === 'review_pending' && <Checkbox size="sm" label={t('teamPlan.selectAll')} labelHidden checked={members.length > 0 && members.every(member => selected.includes(member.id))} indeterminate={selected.length > 0 && !members.every(member => selected.includes(member.id))} disabled={!editable} onChange={event => setSelected(event.target.checked ? members.map(member => member.id) : [])} />}
               </div>
               <nav aria-label={t('teamPlan.roster')} className="grid min-w-0 gap-1.5">
-                {members.map((member, index) => <div key={member.id} className={`team-plan-member flex min-w-0 items-center gap-2 rounded-[var(--radius-lg)] p-2 ${member.id === activeMember?.id ? 'bg-[var(--color-surface-container)]' : ''}`}>
+                {members.map((member, index) => <div key={member.id} className={`team-plan-member flex min-w-0 items-center gap-2 rounded-[var(--radius-md)] p-2 ${member.id === activeMember?.id ? 'bg-[var(--color-surface-selected)]' : ''}`}>
                   {plan.state === 'review_pending' && <Checkbox label={member.name} labelHidden size="sm" disabled={!editable} checked={selected.includes(member.id)} onChange={event => setSelected(ids => event.target.checked ? [...ids, member.id] : ids.filter(id => id !== member.id))} />}
                   <button type="button" aria-label={t('teamPlan.configureMember', { name: member.name })} aria-current={member.id === activeMember?.id ? 'true' : undefined} onClick={() => setActiveMemberId(member.id)} className="flex min-w-0 flex-1 items-start gap-3 rounded-[var(--radius-sm)] py-1 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]">
                     <span aria-hidden="true" className={`mt-0.5 font-mono text-[11px] ${member.id === activeMember?.id ? 'text-[var(--color-brand)]' : 'text-[var(--color-text-tertiary)]'}`}>{String(index + 1).padStart(2, '0')}</span>
@@ -166,7 +194,7 @@ export function AgentTeamsPlanCard({ sessionId }: { sessionId: string }) {
                 <p className="text-xs leading-relaxed text-[var(--color-text-secondary)]">{t('teamPlan.leader')}: {runtimeName(leaderRuntime)}</p>
               </div>
               {plan.state === 'review_pending' && <div className="mt-4 space-y-3">
-                {selected.length > 0 && <div className="team-plan-batch space-y-3 rounded-[var(--radius-lg)] bg-[var(--color-surface-container)] p-3">
+                {selected.length > 0 && <div className="team-plan-batch space-y-3 rounded-[var(--radius-md)] bg-[var(--color-surface-container)] p-3">
                   <p className="text-xs font-medium text-[var(--color-text-primary)]">{t('teamPlan.selectedCount', { count: selected.length })}</p>
                   <ModelSelector appearance="field" fluid ariaLabel={t('teamPlan.batch')} runtimeSelection={selection(members.find(member => selected.includes(member.id))?.runtime ?? leaderRuntime)} onRuntimeSelectionChange={batchRuntime} disabled={!editable} />
                   <Button block size="base" variant="ghost" disabled={!editable} onClick={() => batchRuntime(selection(leaderRuntime))}>{t('teamPlan.followLeader')}</Button>
@@ -179,9 +207,9 @@ export function AgentTeamsPlanCard({ sessionId }: { sessionId: string }) {
                 <div className="mb-6 flex flex-wrap items-start justify-between gap-3">
                   <div>
                     <p className="mb-1 text-xs text-[var(--color-text-tertiary)]">{t('teamPlan.assignment')}</p>
-                    <h3 className="text-xl font-semibold tracking-tight text-[var(--color-text-primary)]">{activeMember.name}</h3>
+                    <h3 className="text-lg font-semibold text-[var(--color-text-primary)]">{activeMember.name}</h3>
                   </div>
-                  <span className="rounded-full border border-[var(--color-border)] px-2.5 py-1 text-[11px] text-[var(--color-text-secondary)]">{t('teamPlan.difficulty')}: {difficultyLabel(activeMember)}</span>
+                  <Badge size="sm">{t('teamPlan.difficulty')}: {difficultyLabel(activeMember)}</Badge>
                 </div>
                 <div className="grid gap-5 sm:grid-cols-[minmax(0,1fr)_minmax(0,1.2fr)]">
                   <div className="min-w-0 space-y-2">
@@ -189,7 +217,7 @@ export function AgentTeamsPlanCard({ sessionId }: { sessionId: string }) {
                     <Dropdown className="w-full" width="100%" maxHeight={280} label={`${activeMember.name} · ${t('teamPlan.agent')}`} value={activeMember.agentType} items={[
                       ...(!agents.some(agent => agent.agentType === activeMember.agentType) ? [{ value: activeMember.agentType, label: activeMember.agentType }] : []),
                       ...agents.map(agent => ({ value: agent.agentType, label: agent.agentType, description: agent.source ? t(`settings.agents.source.${agent.source}` as TranslationKey) : agent.description })),
-                    ]} onChange={agentType => updateMember(activeMember.id, { agentType })} trigger={<Button block variant="secondary" size="lg" aria-label={`${activeMember.name} · ${t('teamPlan.agent')}`} disabled={!editable || agents.length === 0}><span className="flex min-w-0 flex-1 items-center justify-between gap-2"><span className="truncate">{activeMember.agentType}</span><span aria-hidden="true" className="team-plan-chevron" /></span></Button>} />
+                    ]} onChange={agentType => updateMember(activeMember.id, { agentType })} trigger={<Button block variant="secondary" size="lg" aria-label={`${activeMember.name} · ${t('teamPlan.agent')}`} disabled={!editable || agents.length === 0}><span className="flex min-w-0 flex-1 items-center justify-between gap-2"><span className="truncate">{activeMember.agentType}</span>{CHEVRON}</span></Button>} />
                   </div>
                   <div className="min-w-0 space-y-2">
                     <p className="text-xs font-medium text-[var(--color-text-secondary)]">{t('teamPlan.model')}</p>
@@ -222,7 +250,7 @@ export function AgentTeamsPlanCard({ sessionId }: { sessionId: string }) {
                       </div>
                       <div className="min-w-0 space-y-2">
                         <p className="text-[11px] text-[var(--color-text-tertiary)]">{t('teamPlan.owner')}</p>
-                        <Dropdown className="w-full" width="100%" maxHeight={200} placement="top" label={`${task.subject} · ${t('teamPlan.owner')}`} value={owner?.id ?? ''} items={[{ value: '', label: t('teamPlan.unassigned'), disabled: true }, ...members.map(member => ({ value: member.id, label: member.name, description: member.agentType }))]} onChange={ownerId => edit(sessionId, { tasks: tasks.map(row => row.id === task.id ? { ...row, ownerId: ownerId || undefined } : row) })} trigger={<Button block size="base" variant="secondary" aria-label={`${task.subject} · ${t('teamPlan.owner')}`} aria-invalid={!owner || undefined} aria-describedby={!owner ? `team-plan-unassigned-${task.id}` : undefined} disabled={!editable}><span className="flex min-w-0 flex-1 items-center justify-between gap-2"><span className="truncate">{owner?.name ?? t('teamPlan.unassigned')}</span><span aria-hidden="true" className="team-plan-chevron" /></span></Button>} />
+                        <Dropdown className="w-full" width="100%" maxHeight={200} placement="top" label={`${task.subject} · ${t('teamPlan.owner')}`} value={owner?.id ?? ''} items={[{ value: '', label: t('teamPlan.unassigned'), disabled: true }, ...members.map(member => ({ value: member.id, label: member.name, description: member.agentType }))]} onChange={ownerId => edit(sessionId, { tasks: tasks.map(row => row.id === task.id ? { ...row, ownerId: ownerId || undefined } : row) })} trigger={<Button block size="base" variant="secondary" aria-label={`${task.subject} · ${t('teamPlan.owner')}`} aria-invalid={!owner || undefined} aria-describedby={!owner ? `team-plan-unassigned-${task.id}` : undefined} disabled={!editable}><span className="flex min-w-0 flex-1 items-center justify-between gap-2"><span className="truncate">{owner?.name ?? t('teamPlan.unassigned')}</span>{CHEVRON}</span></Button>} />
                         {plan.state === 'review_pending' && !owner && <p id={`team-plan-unassigned-${task.id}`} role="alert" className="text-xs text-[var(--color-error)]">{t('teamPlan.assignRequired')}</p>}
                       </div>
                     </div>
diff --git a/desktop/src/components/agentTeams/AgentTeamsSummary.tsx b/desktop/src/components/agentTeams/AgentTeamsSummary.tsx
index 8be8c423..b64fa446 100644
--- a/desktop/src/components/agentTeams/AgentTeamsSummary.tsx
+++ b/desktop/src/components/agentTeams/AgentTeamsSummary.tsx
@@ -14,11 +14,12 @@ import {
 /** Faces beyond this collapse into a `+N`, so the strip never wraps. */
 const MAX_STACKED_AVATARS = 5
 
+/**
+ * The app-wide status vocabulary: work under way is `info`, done is `success`.
+ * Forming, running and finishing are all a team still at work.
+ */
 function phaseTone(phase: WorkbenchPhase): Tone {
-  if (phase === 'forming') return 'warning'
-  if (phase === 'running') return 'brand'
-  if (phase === 'finishing') return 'info'
-  return 'success'
+  return phase === 'completed' ? 'success' : 'info'
 }
 
 function AvatarStack({
@@ -56,7 +57,7 @@ function AvatarStack({
       ))}
       {overflow > 0 ? (
         <span
-          className="inline-flex items-center justify-center rounded-full bg-[var(--color-surface-container)] font-mono text-[9px] font-extrabold text-[var(--color-text-secondary)] ring-1 ring-[var(--color-surface)]"
+          className="inline-flex items-center justify-center rounded-full bg-[var(--color-surface-container)] text-[11px] font-medium tabular-nums text-[var(--color-text-secondary)] ring-1 ring-[var(--color-surface)]"
           style={{ width: size, height: size, marginLeft: -Math.round(size * 0.32) }}
         >
           +{overflow}
@@ -92,14 +93,14 @@ export function AgentTeamsStrip({
       onClick={onOpen}
       title={snapshot.team.name}
       className={[
-        'mt-2 flex w-full max-w-full items-center gap-2 rounded-[var(--radius-sm)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] px-2.5 py-1.5 text-left transition-colors',
-        'hover:border-[var(--color-border-strong)] hover:bg-[var(--color-surface-hover)]',
+        'mt-2 flex w-full max-w-full items-center gap-2 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] px-2.5 py-1.5 text-left transition-colors',
+        'hover:border-[var(--color-outline)]',
         'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]',
-        compact ? 'text-[11px]' : 'text-[12px]',
+        compact ? 'text-[11px]' : 'text-xs',
       ].join(' ')}
     >
-      <UsersRound size={compact ? 13 : 14} strokeWidth={2.25} aria-hidden="true" className="shrink-0 text-[var(--color-brand)]" />
-      <span className="shrink-0 font-semibold text-[var(--color-text-primary)]">
+      <UsersRound size={compact ? 12 : 14} strokeWidth={1.75} aria-hidden="true" className="shrink-0 text-[var(--color-text-tertiary)]" />
+      <span className="shrink-0 font-medium text-[var(--color-text-primary)]">
         {t('agentTeams.strip.label')}
       </span>
       <AvatarStack members={members} leadAgentId={snapshot.team.leadAgentId} size={compact ? 18 : 20} />
@@ -112,9 +113,9 @@ export function AgentTeamsStrip({
           {t('agentTeams.inline.tasks', { completed: progress.completed, total: progress.total })}
         </span>
       ) : null}
-      <span className="ml-auto flex shrink-0 items-center gap-0.5 font-medium text-[var(--color-brand)]">
+      <span className="ml-auto flex shrink-0 items-center gap-0.5 text-[var(--color-text-secondary)]">
         {t('agentTeams.inline.open')}
-        <ChevronRight size={12} strokeWidth={2.4} aria-hidden="true" />
+        <ChevronRight size={12} strokeWidth={2} aria-hidden="true" />
       </span>
     </button>
   )
@@ -153,26 +154,26 @@ export function AgentTeamsInlineCard({
         data-testid="agent-teams-inline-card"
         onClick={onOpen}
         disabled={!canOpen}
-        className="flex w-full items-center gap-3 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] px-3.5 py-2.5 text-left shadow-[var(--shadow-card)] transition-colors hover:border-[var(--color-border-strong)] hover:bg-[var(--color-surface-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]"
+        className="flex w-full items-center gap-3 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] px-3 py-2.5 text-left transition-colors enabled:hover:border-[var(--color-outline)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]"
       >
         {members.length > 0 ? (
           <AvatarStack members={members} leadAgentId={snapshot?.team.leadAgentId} size={30} />
         ) : (
-          <span className="inline-flex h-[30px] w-[30px] shrink-0 items-center justify-center rounded-full bg-[var(--color-surface-container)] text-[var(--color-brand)] ring-1 ring-[var(--color-border)]">
-            <UsersRound size={16} strokeWidth={2.2} aria-hidden="true" />
+          <span className="inline-flex h-[30px] w-[30px] shrink-0 items-center justify-center rounded-full bg-[var(--color-surface-container)] text-[var(--color-text-secondary)]">
+            <UsersRound size={16} strokeWidth={1.75} aria-hidden="true" />
           </span>
         )}
         <span className="min-w-0 flex-1">
           <span className="flex min-w-0 items-center gap-1.5">
-            <span className="min-w-0 truncate font-mono text-[12px] font-extrabold text-[var(--color-text-primary)]">
+            <span className="min-w-0 truncate text-[13px] font-medium text-[var(--color-text-primary)]">
               {teamName}
             </span>
-            <Badge tone={phaseTone(phase)} size="xs" bordered>
+            <Badge tone={phaseTone(phase)} size="xs">
               {t(`agentTeams.phase.${phase}` as TranslationKey)}
             </Badge>
           </span>
           {snapshot ? (
-            <span className="mt-0.5 flex items-center gap-1.5 text-[11px] text-[var(--color-text-tertiary)]">
+            <span className="mt-0.5 flex items-center gap-1.5 text-xs text-[var(--color-text-tertiary)]">
               <span>{t('agentTeams.inline.created', { count: members.length })}</span>
               {progress.total > 0 ? (
                 <>
@@ -186,9 +187,9 @@ export function AgentTeamsInlineCard({
           ) : null}
         </span>
         {canOpen ? (
-          <span className="flex shrink-0 items-center gap-0.5 text-[11.5px] font-medium text-[var(--color-brand)]">
+          <span className="flex shrink-0 items-center gap-0.5 text-xs text-[var(--color-text-secondary)]">
             {t('agentTeams.inline.open')}
-            <ChevronRight size={13} strokeWidth={2.4} aria-hidden="true" />
+            <ChevronRight size={14} strokeWidth={1.75} aria-hidden="true" />
           </span>
         ) : null}
       </button>
diff --git a/desktop/src/components/agentTeams/AgentTeamsWorkbench.tsx b/desktop/src/components/agentTeams/AgentTeamsWorkbench.tsx
index 649f4ab6..e3f94c94 100644
--- a/desktop/src/components/agentTeams/AgentTeamsWorkbench.tsx
+++ b/desktop/src/components/agentTeams/AgentTeamsWorkbench.tsx
@@ -91,16 +91,16 @@ function stateCounts(snapshot: TeamWorkbenchSnapshot) {
 function TimelineStat({ label, value, tone }: {
   label: string
   value: string | number
-  tone?: 'brand' | 'muted'
+  tone?: 'info' | 'muted'
 }) {
   return (
     <div className="min-w-[52px]">
-      <div className="text-[10px] font-semibold text-[var(--color-text-tertiary)]">{label}</div>
+      <div className="text-[11px] font-semibold text-[var(--color-text-tertiary)]">{label}</div>
       <div
         className={[
-          'whitespace-nowrap font-mono text-[14px] font-extrabold tabular-nums',
-          tone === 'brand'
-            ? 'text-[var(--color-brand)]'
+          'whitespace-nowrap font-mono text-[14px] font-medium tabular-nums',
+          tone === 'info'
+            ? 'text-[var(--color-info)]'
             : tone === 'muted'
               ? 'text-[var(--color-text-tertiary)]'
               : 'text-[var(--color-text-primary)]',
@@ -324,17 +324,17 @@ export function AgentTeamsWorkbench({ sessionId }: { sessionId: string }) {
       <header className="shrink-0 overflow-x-auto border-b border-[var(--color-border)] bg-[var(--color-surface-container-lowest)]">
         <div className="flex min-w-[1180px] items-center gap-5 px-[18px] py-2.5">
           <div className="min-w-[260px]">
-            <div className="text-[10px] font-bold uppercase tracking-[0.12em] text-[var(--color-text-tertiary)]">
+            <div className="text-[11px] font-semibold text-[var(--color-text-tertiary)]">
               Agent Teams · {t('agentTeams.sharedTaskList')}
             </div>
             <div className="mt-0.5 flex min-w-0 items-center gap-2">
               <span
-                className="max-w-[300px] truncate font-mono text-[16px] font-extrabold"
+                className="max-w-[300px] truncate text-[15px] font-semibold"
                 title={snapshot.team.name}
               >
                 {snapshot.team.name}
               </span>
-              <span className="shrink-0 rounded-full border border-[var(--color-primary-fixed-dim)] bg-[var(--color-brand-soft)] px-2 py-0.5 text-[10px] font-bold text-[var(--color-on-brand-soft)]">
+              <span className="shrink-0 rounded-full bg-[var(--color-surface-container)] px-2 py-0.5 text-[11px] font-medium text-[var(--color-text-secondary)]">
                 {t('agentTeams.experimental')}
               </span>
             </div>
@@ -342,10 +342,10 @@ export function AgentTeamsWorkbench({ sessionId }: { sessionId: string }) {
 
           <div className="flex shrink-0 items-center gap-[18px] border-x border-[var(--color-border)] px-[18px]">
             <div className="min-w-[74px]">
-              <div className="text-[10px] font-semibold text-[var(--color-text-tertiary)]">
+              <div className="text-[11px] font-semibold text-[var(--color-text-tertiary)]">
                 {t('agentTeams.stats.phase')}
               </div>
-              <div className="whitespace-nowrap text-[14px] font-extrabold">
+              <div className="whitespace-nowrap text-[14px] font-semibold">
                 {phaseLabel(phase, t)}
               </div>
             </div>
@@ -353,20 +353,20 @@ export function AgentTeamsWorkbench({ sessionId }: { sessionId: string }) {
               label={t('agentTeams.stats.completed')}
               value={`${counts.completed}/${snapshot.tasks.length}`}
             />
-            <TimelineStat label={t('agentTeams.stats.running')} value={counts.running} tone="brand" />
+            <TimelineStat label={t('agentTeams.stats.running')} value={counts.running} tone="info" />
             <TimelineStat label={t('agentTeams.stats.available')} value={counts.open} />
             <TimelineStat label={t('agentTeams.stats.blocked')} value={counts.blocked} tone="muted" />
           </div>
 
           {followingLive ? (
             <div data-testid="agent-teams-live-controls" className="flex min-w-0 flex-1 items-center gap-3.5">
-              <div className="flex shrink-0 items-center gap-2 rounded-full border border-[var(--color-primary-fixed-dim)] bg-[var(--color-brand-soft)] px-3 py-[7px]">
-                <span className="agent-teams-live-dot h-2 w-2 rounded-full bg-[var(--color-brand)]" aria-hidden="true" />
-                <span className="whitespace-nowrap text-[12.5px] font-extrabold text-[var(--color-on-brand-soft)]">
+              <div className="flex shrink-0 items-center gap-1.5 rounded-full bg-[var(--color-info-container)] px-2.5 py-1">
+                <span className="agent-teams-live-dot h-1.5 w-1.5 rounded-full bg-[var(--color-info)]" aria-hidden="true" />
+                <span className="whitespace-nowrap text-xs font-medium text-[var(--color-on-info-container)]">
                   {t('agentTeams.live.following')}
                 </span>
               </div>
-              <span className="min-w-0 flex-1 truncate text-[11.5px] text-[var(--color-text-secondary)]">
+              <span className="min-w-0 flex-1 truncate text-xs text-[var(--color-text-secondary)]">
                 {liveHint}
               </span>
               <Button variant="secondary" size="sm" onClick={enterReplay}>
@@ -382,7 +382,7 @@ export function AgentTeamsWorkbench({ sessionId }: { sessionId: string }) {
           ) : (
             <div data-testid="agent-teams-replay-controls" className="flex min-w-0 flex-1 items-center gap-3.5">
               <Button
-                variant="accent"
+                variant="primary"
                 size="base"
                 className="w-[86px]"
                 icon={playing ? <Pause size={13} aria-hidden="true" /> : <Play size={13} aria-hidden="true" />}
@@ -397,7 +397,7 @@ export function AgentTeamsWorkbench({ sessionId }: { sessionId: string }) {
               <div
                 role="group"
                 aria-label={t('agentTeams.replay.speed')}
-                className="flex shrink-0 overflow-hidden rounded-[var(--radius-md)] border border-[var(--color-outline)]"
+                className="flex shrink-0 overflow-hidden rounded-[var(--radius-md)] border border-[var(--color-border)]"
               >
                 {REPLAY_SPEEDS.map((speed) => {
                   const selected = replaySpeed === speed
@@ -408,9 +408,9 @@ export function AgentTeamsWorkbench({ sessionId }: { sessionId: string }) {
                       aria-pressed={selected}
                       onClick={() => setReplaySpeed(speed)}
                       className={[
-                        'h-7 border-r border-[var(--color-border)] px-2.5 font-mono text-[11px] font-bold outline-none transition-colors last:border-r-0 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-border-focus)]',
+                        'h-7 border-r border-[var(--color-border)] px-2.5 font-mono text-[11px] font-medium outline-none transition-colors last:border-r-0 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-border-focus)]',
                         selected
-                          ? 'bg-[var(--color-brand)] text-[var(--color-on-primary)]'
+                          ? 'bg-[var(--color-surface-selected)] text-[var(--color-text-primary)]'
                           : 'bg-[var(--color-surface-container-lowest)] text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-hover)]',
                       ].join(' ')}
                     >
@@ -420,7 +420,7 @@ export function AgentTeamsWorkbench({ sessionId }: { sessionId: string }) {
                 })}
               </div>
               <div className="min-w-[200px] flex-1">
-                <div className="mb-1 flex justify-between text-[10px] font-semibold text-[var(--color-text-tertiary)]">
+                <div className="mb-1 flex justify-between text-[11px] font-semibold text-[var(--color-text-tertiary)]">
                   <span>{t('agentTeams.replay.timeline')}</span>
                   <span className="font-mono tabular-nums">
                     {formatDuration(cursorTime - startTime)} / {formatDuration(totalElapsed)}
@@ -554,17 +554,17 @@ export function AgentTeamsWorkbench({ sessionId }: { sessionId: string }) {
             <span className="flex h-[30px] w-[30px] items-center justify-center rounded-[var(--radius-md)] border border-[var(--color-outline)] text-[var(--color-text-secondary)]">
               <ChevronLeft size={14} strokeWidth={2.4} aria-hidden="true" />
             </span>
-            <span className="text-[11px] font-extrabold tracking-[0.28em] text-[var(--color-text-secondary)] [writing-mode:vertical-rl]">
+            <span className="text-[11px] font-semibold text-[var(--color-text-secondary)] [writing-mode:vertical-rl]">
               {t('agentTeams.communication.title')}
             </span>
-            <span className="rounded-full bg-[var(--color-brand)] px-1.5 py-0.5 font-mono text-[10px] font-extrabold text-[var(--color-on-primary)]">
+            <span className="rounded-full bg-[var(--color-surface-container)] px-1.5 py-0.5 font-mono text-[11px] tabular-nums text-[var(--color-text-secondary)]">
               {snapshot.messages.length}
             </span>
             <span
               className={[
                 'h-2 w-2 rounded-full',
                 activeMessageId
-                  ? 'agent-teams-live-dot bg-[var(--color-brand)]'
+                  ? 'agent-teams-live-dot bg-[var(--color-info)]'
                   : 'bg-[var(--color-outline)]',
               ].join(' ')}
               aria-hidden="true"
@@ -607,15 +607,15 @@ function TaskDetailPanel({
     <aside
       data-testid="agent-teams-task-detail"
       data-task-id={task.id}
-      className="agent-teams-drawer absolute bottom-4 z-[var(--z-drawer)] w-[360px] rounded-[var(--radius-lg)] border border-[var(--color-outline)] bg-[var(--color-surface-container-lowest)] p-4 shadow-[var(--shadow-overlay)]"
+      className="agent-teams-drawer absolute bottom-4 z-[var(--z-drawer)] w-[360px] rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] p-4 shadow-[var(--shadow-dropdown)]"
       style={{ right: communicationOpen ? 416 : 72 }}
     >
       <div className="flex items-start gap-3">
         <div className="min-w-0 flex-1">
-          <div className="font-mono text-[10px] font-extrabold text-[var(--color-text-tertiary)]">
+          <div className="font-mono text-[11px] font-medium text-[var(--color-text-tertiary)]">
             #{task.id}
           </div>
-          <h3 className="mt-1 text-[13px] font-extrabold leading-snug">{task.subject}</h3>
+          <h3 className="mt-1 text-[13px] font-semibold leading-snug">{task.subject}</h3>
         </div>
         <IconButton
           icon={<X aria-hidden="true" />}
@@ -630,7 +630,7 @@ function TaskDetailPanel({
           {task.description}
         </p>
       ) : null}
-      <div className="mt-3 flex flex-wrap gap-x-4 gap-y-1 border-t border-[var(--color-border)] pt-3 text-[10.5px] text-[var(--color-text-secondary)]">
+      <div className="mt-3 flex flex-wrap gap-x-4 gap-y-1 border-t border-[var(--color-border)] pt-3 text-[11px] text-[var(--color-text-secondary)]">
         <span>{t('agentTeams.task.ownerLabel')}: {ownerMember?.name ?? owner?.identity ?? '—'}</span>
         <span>{t('agentTeams.task.dependsOn')}: {task.blockedBy.map((id) => `#${id}`).join(', ') || '—'}</span>
         <span>{t('agentTeams.task.unblocks')}: {task.blocks.map((id) => `#${id}`).join(', ') || '—'}</span>
diff --git a/desktop/src/components/chat/ActivityGroup.test.tsx b/desktop/src/components/chat/ActivityGroup.test.tsx
index 7e595980..4fa27a0b 100644
--- a/desktop/src/components/chat/ActivityGroup.test.tsx
+++ b/desktop/src/components/chat/ActivityGroup.test.tsx
@@ -1,7 +1,7 @@
 import { beforeEach, describe, expect, it } from 'vitest'
 import { fireEvent, render, screen, within } from '@testing-library/react'
 import { ActivityGroup } from './ActivityGroup'
-import { buildActivitySegments, type ActivityStep } from './activityGroupModel'
+import { buildActivitySegments, formatActivitySummary, type ActivityStep } from './activityGroupModel'
 import { useSettingsStore } from '../../stores/settingsStore'
 import { translate } from '../../i18n'
 import type { UIMessage } from '../../types/chat'
@@ -256,6 +256,79 @@ describe('ActivityGroup', () => {
 
     expect(screen.getByTestId('activity-group').getAttribute('data-running')).toBe('false')
   })
+
+  it('hangs every row of an open run on one timeline rail', () => {
+    const { container } = render(
+      <ActivityGroup
+        steps={[
+          thinkingStep('think-1', 'Check the call sites.', 500),
+          { kind: 'tool', toolCall: readCall },
+          { kind: 'tool', toolCall: bashCall },
+        ]}
+        resultMap={resultsOf([
+          toolResult({ id: 'res-read', toolUseId: 'read-1', timestamp: 1_400 }),
+          toolResult({ id: 'res-bash', toolUseId: 'bash-1', timestamp: 3_000 }),
+        ])}
+        childToolCallsByParent={new Map()}
+        isLive
+      />,
+    )
+
+    const rail = container.querySelector('[data-tool-timeline]')!
+    expect(rail).toBeTruthy()
+    // Each tool is a node on the rail, led by its verb, never its raw name.
+    const rows = rail.querySelectorAll('[data-tool-call-chrome="row"]')
+    expect(rows).toHaveLength(2)
+    expect(rail.querySelectorAll('[data-tool-node]')).toHaveLength(2)
+    expect(rows[0]?.textContent).toContain(t('toolVerb.read'))
+    expect(rows[1]?.textContent).toContain(t('toolVerb.run'))
+    expect(rows[1]?.textContent).not.toContain('Bash')
+  })
+
+  it('marks a call waiting on a permission prompt amber, in its row and in the header', () => {
+    render(
+      <ActivityGroup
+        steps={[
+          { kind: 'tool', toolCall: readCall },
+          { kind: 'tool', toolCall: bashCall },
+        ]}
+        resultMap={resultsOf([toolResult({ id: 'res-read', toolUseId: 'read-1', timestamp: 1_400 })])}
+        childToolCallsByParent={new Map()}
+        awaitingToolUseIds={new Set(['bash-1'])}
+        isLive
+      />,
+    )
+
+    const group = screen.getByTestId('activity-group')
+    expect(group.querySelector('[data-chat-disclosure="true"]')?.textContent).toContain(t('permission.awaitingApproval'))
+    const waiting = group.querySelector('[data-tool-status="waiting"]')
+    expect(waiting?.closest('[data-chat-anchor-id]')?.getAttribute('data-chat-anchor-id')).toBe('use-bash')
+    expect(group.querySelector('[data-tool-status="done"]')?.closest('[data-chat-anchor-id]')?.getAttribute('data-chat-anchor-id')).toBe('use-read')
+  })
+
+  it('shows a resultless call as running only while its run is live', () => {
+    const props = {
+      steps: [
+        { kind: 'tool' as const, toolCall: readCall },
+        { kind: 'tool' as const, toolCall: bashCall },
+      ],
+      resultMap: resultsOf([toolResult({ id: 'res-read', toolUseId: 'read-1', timestamp: 1_400 })]),
+      childToolCallsByParent: new Map(),
+    }
+    const { rerender } = render(<ActivityGroup {...props} isLive />)
+    let group = screen.getByTestId('activity-group')
+    expect(group.querySelector('[data-tool-status="running"]')).toBeTruthy()
+    expect(group.querySelector('[data-chat-disclosure="true"]')?.textContent).toContain(t('agentStatus.running'))
+
+    // A replayed transcript whose last call never got a result is not running —
+    // the process that would have produced it is gone.
+    rerender(<ActivityGroup {...props} isLive={false} />)
+    group = screen.getByTestId('activity-group')
+    expect(group.querySelector('[data-chat-disclosure="true"]')?.textContent).not.toContain(t('agentStatus.running'))
+    fireEvent.click(group.querySelector('[data-chat-disclosure="true"]')!)
+    expect(group.querySelector('[data-tool-status="running"]')).toBeNull()
+    expect(group.querySelector('[data-tool-status="idle"]')).toBeTruthy()
+  })
 })
 
 describe('buildActivitySegments', () => {
@@ -300,7 +373,7 @@ describe('buildActivitySegments', () => {
   it('names a verbless tool rather than hiding it behind a generic count', () => {
     const segments = buildActivitySegments(
       [
-        { kind: 'tool', toolCall: toolCall({ id: 'a', toolUseId: 'a', toolName: 'TaskUpdate' }) },
+        { kind: 'tool', toolCall: toolCall({ id: 'a', toolUseId: 'a', toolName: 'mcp__linear__create_issue' }) },
         { kind: 'tool', toolCall: toolCall({ id: 'b', toolUseId: 'b', toolName: 'SendMessage' }) },
         { kind: 'tool', toolCall: toolCall({ id: 'c', toolUseId: 'c', toolName: 'SendMessage' }) },
       ],
@@ -308,6 +381,41 @@ describe('buildActivitySegments', () => {
     )
 
     // Which tool ran is the point; a single call drops the redundant "(1)".
-    expect(segments.map((segment) => segment.label)).toEqual(['TaskUpdate', 'SendMessage (2)'])
+    expect(segments.map((segment) => segment.label)).toEqual(['mcp__linear__create_issue', 'SendMessage (2)'])
+  })
+
+  it('says what happened to the todo list instead of printing TodoWrite', () => {
+    const segments = buildActivitySegments(
+      [
+        { kind: 'tool', toolCall: toolCall({ id: 'a', toolUseId: 'a', toolName: 'TodoWrite' }) },
+        { kind: 'tool', toolCall: toolCall({ id: 'b', toolUseId: 'b', toolName: 'TodoWrite' }) },
+      ],
+      t,
+    )
+    expect(segments.map((segment) => segment.label)).toEqual([t('toolGroup.updatedTodos')])
+    expect(segments[0]?.label).not.toContain('TodoWrite')
+  })
+
+  it('folds the four task tools into one clause', () => {
+    const segments = buildActivitySegments(
+      ['TaskCreate', 'TaskUpdate', 'TaskList', 'TaskUpdate'].map((toolName, index) => (
+        { kind: 'tool' as const, toolCall: toolCall({ id: `t${index}`, toolUseId: `t${index}`, toolName }) }
+      )),
+      t,
+    )
+    expect(segments.map((segment) => segment.label)).toEqual([t('toolGroup.managedTasks')])
+  })
+
+  it('joins clauses with the locale\'s own list mark', () => {
+    const steps: ActivityStep[] = [
+      { kind: 'tool', toolCall: toolCall({ id: 'a', toolUseId: 'a', toolName: 'Grep' }) },
+      { kind: 'tool', toolCall: toolCall({ id: 'b', toolUseId: 'b', toolName: 'Read' }) },
+      { kind: 'tool', toolCall: toolCall({ id: 'c', toolUseId: 'c', toolName: 'Read' }) },
+    ]
+    const zh = (key: Parameters<typeof translate>[1], params?: Record<string, string | number>) => translate('zh', key, params)
+    const zhSummary = formatActivitySummary(buildActivitySegments(steps, zh), zh)
+    expect(zhSummary).toBe(`${zh('toolGroup.searchedOne')}、${zh('toolGroup.readMany', { count: 2 })}`)
+    expect(zhSummary).not.toContain(',')
+    expect(formatActivitySummary(buildActivitySegments(steps, t), t)).toBe(`${t('toolGroup.searchedOne')}, ${t('toolGroup.readMany', { count: 2 })}`)
   })
 })
diff --git a/desktop/src/components/chat/ActivityGroup.tsx b/desktop/src/components/chat/ActivityGroup.tsx
index bcb2bf5a..9af3dd43 100644
--- a/desktop/src/components/chat/ActivityGroup.tsx
+++ b/desktop/src/components/chat/ActivityGroup.tsx
@@ -1,7 +1,7 @@
-import { memo, useEffect, useMemo, useState } from 'react'
+import { memo, useEffect, useMemo, useState, type ReactNode } from 'react'
 import { getDisclosure, setDisclosure } from '../../lib/disclosureMemory'
 import { toolResultImagesFor, type ToolResultImageExtraction } from '@/lib/toolResultContent'
-import { CircleX } from 'lucide-react'
+import { ChevronRight, CirclePause, CircleX, LoaderCircle } from 'lucide-react'
 import { ToolCallBlock, formatDuration } from './ToolCallBlock'
 import { ThinkingBlock } from './ThinkingBlock'
 import { ToolResultImages } from './ToolResultImages'
@@ -10,6 +10,7 @@ import {
   activityStepToolCalls,
   buildActivitySegments,
   countFailedToolCalls,
+  formatActivitySummary,
   hasUnresolvedToolCalls,
   toolCallDurationMs,
   type ActivityStep,
@@ -41,18 +42,45 @@ type Props = {
    * row is marked while the jump's highlight lasts.
    */
   revealToolUseId?: string
+  /** Calls whose permission prompt is waiting on the user. */
+  awaitingToolUseIds?: ReadonlySet<string>
+}
+
+const MAX_HEADER_ICONS = 3
+
+function isAwaiting(toolCall: ToolCall, awaiting?: ReadonlySet<string>): boolean {
+  if (!awaiting || awaiting.size === 0) return false
+  return awaiting.has(toolCall.toolUseId) ||
+    (toolCall.originalToolUseId !== undefined && awaiting.has(toolCall.originalToolUseId))
+}
+
+/**
+ * The vertical rail of a run: a 1px line through the centres of the rows'
+ * 22px nodes. It runs behind the details too, so an opened diff or terminal
+ * still reads as hanging off its step.
+ */
+export function ToolTimeline({ children, className = '' }: { children: ReactNode; className?: string }) {
+  return (
+    <div data-tool-timeline="" className={`relative ${className}`}>
+      <span
+        aria-hidden="true"
+        className="pointer-events-none absolute bottom-3 left-[10.5px] top-3 w-px bg-[var(--color-outline)]"
+      />
+      {children}
+    </div>
+  )
 }
 
 /**
  * One contiguous run of thinking + tool calls.
  *
  * It plays open while it runs, so the reader can watch the work, then folds
- * itself into a single counted line the moment it finishes: `thought 5 times,
- * read 2 files, ran 1 command`. Standing rows open forever flattened the
- * transcript — machinery took as much room as the sentences it produced, and
- * nothing looked more important than anything else. A counted digest is small
- * enough to skip and specific enough to be worth reading, which a vaguer
- * "ran some commands" never was.
+ * itself into a single counted line the moment it finishes: `思考 2 次、读取
+ * 1 个文件、运行 1 条命令`. Standing rows open forever flattened the transcript —
+ * machinery took as much room as the sentences it produced, and nothing looked
+ * more important than anything else. A counted digest is small enough to skip
+ * and specific enough to be worth reading, which a vaguer "ran some commands"
+ * never was.
  *
  * Clicking pins the reader's choice: from then on that run stays as they left
  * it, instead of snapping shut under them when the next step resolves.
@@ -69,6 +97,7 @@ export const ActivityGroup = memo(function ActivityGroup({
   isLive = false,
   disclosureKey,
   revealToolUseId,
+  awaitingToolUseIds,
 }: Props) {
   const t = useTranslation()
   /** null = follow the run's own state; set = the reader decided. */
@@ -96,6 +125,11 @@ export const ActivityGroup = memo(function ActivityGroup({
     Boolean(isStreaming) ||
     hasActiveThinking ||
     hasUnresolvedToolCalls(toolCalls, resultMap, childToolCallsByParent)
+  // Only a run that is still being written to may claim to be in progress. A
+  // transcript whose last call never got a result (the process died) is
+  // unresolved forever, and a spinner on it would be a lie.
+  const showsProgress = isRunning && (isLive || Boolean(isStreaming) || hasActiveThinking)
+  const awaitingCount = toolCalls.filter((toolCall) => !resultMap.has(toolCall.toolUseId) && isAwaiting(toolCall, awaitingToolUseIds)).length
   // Keyed off "still being written to", never off "a tool is executing right
   // now". The latter flickers: a run of six tools resolves and restarts six
   // times, and folding on each gap made the whole block open and shut under the
@@ -103,6 +137,13 @@ export const ActivityGroup = memo(function ActivityGroup({
   // Open in the same render the request arrives in, so the row is in the DOM
   // for the scroll that follows; the effect above makes it stick.
   const collapsed = revealsHere ? false : (pinnedCollapsed ?? !isLive)
+  const rowProps = {
+    resultMap,
+    childToolCallsByParent,
+    revealToolUseId,
+    awaitingToolUseIds,
+    live: showsProgress,
+  }
 
   const soleToolCall = steps.length === 1 && steps[0]?.kind === 'tool' ? steps[0].toolCall : null
   if (soleToolCall) {
@@ -112,12 +153,9 @@ export const ActivityGroup = memo(function ActivityGroup({
           data-testid="activity-group"
           data-single-step="true"
         >
-          <ActivityToolRow
-            toolCall={soleToolCall}
-            resultMap={resultMap}
-            childToolCallsByParent={childToolCallsByParent}
-            revealToolUseId={revealToolUseId}
-          />
+          <ToolTimeline>
+            <ActivityToolRow toolCall={soleToolCall} {...rowProps} />
+          </ToolTimeline>
         </div>
       </div>
     )
@@ -126,7 +164,12 @@ export const ActivityGroup = memo(function ActivityGroup({
   const segments = buildActivitySegments(steps, t)
   const elapsed = activityDurationMs(steps, resultMap)
   const durationLabel = !isRunning && typeof elapsed === 'number' ? formatDuration(elapsed) : ''
-  const summaryText = segments.map((segment) => segment.label).join(', ')
+  const summaryText = formatActivitySummary(segments, t)
+  // One glyph per kind of work: searching the web and reading a page share the
+  // globe, and two globes side by side read as a rendering glitch.
+  const headerIcons = segments
+    .filter((segment, index) => segments.findIndex((other) => other.icon === segment.icon) === index)
+    .slice(0, MAX_HEADER_ICONS)
 
   return (
     <div>
@@ -134,13 +177,12 @@ export const ActivityGroup = memo(function ActivityGroup({
         data-testid="activity-group"
         data-expanded={collapsed ? 'false' : 'true'}
         data-running={isRunning ? 'true' : 'false'}
-        className="rounded-[var(--radius-md)]"
       >
         {/*
-          Deliberately a whisper: 12px, tertiary, no icons, commas rather than
-          middots. Its whole job is to be skippable — the prose above and below
-          it is the conversation, and anything with weight here competes with
-          that. The counts are what make it worth having at all.
+          One quiet line: the families' glyphs, the counted sentence, then what
+          needs the reader — failures in red, a pending approval in amber, live
+          work in blue — and otherwise the run's duration. The counts are what
+          make it worth having at all.
         */}
         <button
           type="button"
@@ -148,54 +190,82 @@ export const ActivityGroup = memo(function ActivityGroup({
           onClick={() => setPinnedCollapsed(!collapsed)}
           aria-expanded={!collapsed}
           title={summaryText}
-          className="-mx-2 flex w-[calc(100%+1rem)] items-center gap-2 rounded-[var(--radius-md)] px-2 py-1 text-left text-[12px] leading-[1.6] text-[var(--color-text-tertiary)] transition-colors hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-secondary)] focus:outline-none focus-visible:shadow-[var(--shadow-focus-ring)]"
+          className="group/activity flex min-h-[28px] w-full items-center gap-2 rounded-[var(--radius-sm)] text-left text-[13px] focus:outline-none focus-visible:shadow-[var(--shadow-focus-ring)]"
         >
-          <span className="min-w-0 flex-1 truncate">{summaryText}</span>
-          <span className="flex shrink-0 items-center gap-2">
-            {failedCount > 0 && (
-              <span className="flex items-center gap-[5px] whitespace-nowrap font-medium text-[var(--color-error)]">
-                <CircleX size={12} strokeWidth={2} aria-hidden="true" />
-                {t('toolGroup.failedCount', { count: failedCount })}
-              </span>
-            )}
-            {durationLabel && (
-              <span className="whitespace-nowrap font-mono tabular-nums">{durationLabel}</span>
-            )}
-            <span aria-hidden="true" className={`w-3 text-center text-[8px] ${collapsed ? '' : 'rotate-90'}`}>▸</span>
+          <span aria-hidden="true" className="flex shrink-0 items-center gap-0.5 text-[var(--color-text-tertiary)]">
+            {headerIcons.map((segment) => {
+              const Icon = segment.icon
+              return <Icon key={segment.key} size={14} strokeWidth={1.75} />
+            })}
           </span>
+          <span
+            data-activity-summary=""
+            className="min-w-0 flex-1 truncate text-[var(--color-text-secondary)] transition-colors group-hover/activity:text-[var(--color-text-primary)]"
+          >
+            {summaryText}
+          </span>
+          {failedCount > 0 && (
+            <span className="inline-flex shrink-0 items-center gap-1 whitespace-nowrap text-[12px] text-[var(--color-error)]">
+              <CircleX size={12} strokeWidth={2} aria-hidden="true" />
+              {t('toolGroup.failedCount', { count: failedCount })}
+            </span>
+          )}
+          {awaitingCount > 0 ? (
+            <span className="inline-flex shrink-0 items-center gap-1 whitespace-nowrap text-[12px] font-medium text-[var(--color-on-warning-container)]">
+              <CirclePause size={12} strokeWidth={2} aria-hidden="true" />
+              {t('permission.awaitingApproval')}
+            </span>
+          ) : showsProgress ? (
+            <span className="inline-flex shrink-0 items-center gap-1 whitespace-nowrap text-[12px] text-[var(--color-info)]">
+              <LoaderCircle size={12} strokeWidth={2} className="animate-spin" aria-hidden="true" />
+              {t('agentStatus.running')}
+            </span>
+          ) : durationLabel ? (
+            <span className="shrink-0 whitespace-nowrap font-mono text-[11px] tabular-nums text-[var(--color-text-tertiary)]">{durationLabel}</span>
+          ) : null}
+          <ChevronRight
+            size={14}
+            strokeWidth={1.75}
+            aria-hidden="true"
+            className={`shrink-0 text-[var(--color-text-tertiary)] transition-transform duration-150 ${collapsed ? '' : 'rotate-90'}`}
+          />
         </button>
 
         {/* Folding hides the rows, and with them any picture a tool returned.
             Open, each row shows its own, so these exist only while folded. */}
         {collapsed ? <CollapsedRunImages toolCalls={toolCalls} resultMap={resultMap} /> : null}
 
-        {/* Rows hang off the summary that names them, so they take the guide
-            line and its indent. That is also why they can afford it here and not
-            when there is no summary — nothing to hang from, nothing to indent. */}
         {!collapsed && (
-          <div className="ml-[3px] flex flex-col border-l border-[var(--color-border)] pl-3">
+          <ToolTimeline className="mt-0.5">
             {steps.map((step) => step.kind === 'thinking' ? (
-              <ThinkingBlock
+              <TimelineThinking
                 key={step.message.id}
                 content={step.message.content}
                 isActive={step.message.id === activeThinkingId}
               />
             ) : (
-              <ActivityToolRow
-                key={step.toolCall.id}
-                toolCall={step.toolCall}
-                resultMap={resultMap}
-                childToolCallsByParent={childToolCallsByParent}
-                revealToolUseId={revealToolUseId}
-              />
+              <ActivityToolRow key={step.toolCall.id} toolCall={step.toolCall} {...rowProps} />
             ))}
-          </div>
+          </ToolTimeline>
         )}
       </div>
     </div>
   )
 })
 
+/** A thought on the rail: a small hollow stop, its row hung on the text column. */
+function TimelineThinking({ content, isActive }: { content: string; isActive: boolean }) {
+  return (
+    <div className="relative pl-[30px]">
+      <span
+        aria-hidden="true"
+        className="absolute left-[7px] top-[10px] h-2 w-2 rounded-full border border-[var(--color-outline)] bg-[var(--color-surface)]"
+      />
+      <ThinkingBlock content={content} isActive={isActive} />
+    </div>
+  )
+}
+
 type RunImageStrip = ToolResultImageExtraction & {
   id: string
   toolName: string
@@ -255,17 +325,22 @@ function CollapsedRunImages({
   )
 }
 
-/** A tool row plus, indented under it, the rows of anything it dispatched. */
+/** A tool row plus, indented under it on its own rail, the rows of anything it dispatched. */
 function ActivityToolRow({
   toolCall,
   resultMap,
   childToolCallsByParent,
   revealToolUseId,
+  awaitingToolUseIds,
+  live = false,
 }: {
   toolCall: ToolCall
   resultMap: Map<string, ToolResult>
   childToolCallsByParent: Map<string, ToolCall[]>
   revealToolUseId?: string
+  awaitingToolUseIds?: ReadonlySet<string>
+  /** The run is still being written to, so a resultless call is executing. */
+  live?: boolean
 }) {
   const result = resultMap.get(toolCall.toolUseId)
   const childToolCalls = childToolCallsByParent.get(toolCall.toolUseId) ?? []
@@ -283,18 +358,22 @@ function ActivityToolRow({
         durationMs={toolCallDurationMs(toolCall, result)}
         toolUseId={toolCall.parentToolUseId ? undefined : toolCall.toolUseId}
         navigationHighlighted={revealToolUseId !== undefined && toolCall.toolUseId === revealToolUseId}
+        awaitingApproval={!result && isAwaiting(toolCall, awaitingToolUseIds)}
+        running={live && !result && toolCall.status !== 'stopped'}
       />
       {childToolCalls.length > 0 && (
-        <div className="ml-2 border-l border-[var(--color-border)] pl-3">
+        <ToolTimeline className="ml-[30px]">
           {childToolCalls.map((childToolCall) => (
             <ActivityToolRow
               key={childToolCall.id}
               toolCall={childToolCall}
               resultMap={resultMap}
               childToolCallsByParent={childToolCallsByParent}
+              awaitingToolUseIds={awaitingToolUseIds}
+              live={live}
             />
           ))}
-        </div>
+        </ToolTimeline>
       )}
     </div>
   )
diff --git a/desktop/src/components/chat/AskUserQuestion.test.tsx b/desktop/src/components/chat/AskUserQuestion.test.tsx
index eeafb13b..9f0cea0e 100644
--- a/desktop/src/components/chat/AskUserQuestion.test.tsx
+++ b/desktop/src/components/chat/AskUserQuestion.test.tsx
@@ -919,8 +919,7 @@ describe('AskUserQuestion', () => {
       expect((screen.getByPlaceholderText('Type your answer...') as HTMLTextAreaElement).value)
         .toBe('custom q2')
       fireEvent.click(screen.getByRole('button', { name: /Q1$/ }))
-      expect(screen.getByRole('button', { name: /^A1$/ }).getAttribute('class'))
-        .toContain('border-[var(--color-secondary)]')
+      expect(screen.getByRole('button', { name: /^A1$/ }).getAttribute('aria-pressed')).toBe('true')
     })
 
     it('does not resurrect the form once the question was submitted', () => {
diff --git a/desktop/src/components/chat/AskUserQuestion.tsx b/desktop/src/components/chat/AskUserQuestion.tsx
index 810eb5cf..9daae15c 100644
--- a/desktop/src/components/chat/AskUserQuestion.tsx
+++ b/desktop/src/components/chat/AskUserQuestion.tsx
@@ -6,6 +6,8 @@ import {
 } from '../../stores/chatStore'
 import { useTabStore } from '../../stores/tabStore'
 import { useTranslation } from '../../i18n'
+import { ArrowRight, Check, CircleCheck, Info, MessageCircleQuestion, MessagesSquare, Send } from 'lucide-react'
+import { Badge } from '@/components/ui/Badge'
 import { Button } from '@/components/ui/Button'
 import {
   ASK_USER_QUESTION_CLARIFY_WITH_QUESTIONS_PREFIX,
@@ -439,47 +441,40 @@ export function AskUserQuestion({
   const activeAnswered =
     Boolean(freeTexts[safeActiveTab]?.trim()) || (selections[safeActiveTab]?.length ?? 0) > 0
 
+  const statusBadgeKey = automaticallyAnswered
+    ? 'question.autoAnswered'
+    : hasSentAsMessage || expired
+      ? 'question.expiredBadge'
+      : hasRequestedChat
+        ? 'question.chatBadge'
+        : terminalWithoutAnswers ? 'question.completed' : 'question.answered'
+
   return (
-    <div className={`rounded-[var(--radius-lg)] border overflow-hidden ${
-      submitted
-        ? 'border-[var(--color-border)] bg-[var(--color-surface-container-low)] opacity-70'
-        : 'border-[var(--color-secondary)] bg-[var(--color-surface-container-lowest)]'
+    <div className={`overflow-hidden rounded-[var(--radius-lg)] border bg-[var(--color-surface-container-lowest)] ${
+      submitted ? 'border-[var(--color-border)]' : 'border-[var(--color-outline)]'
     }`}>
-      {/* Header */}
-      <div className={`flex items-center gap-3 px-4 py-3 ${
-        submitted
-          ? 'bg-[var(--color-surface-container-low)]'
-          : 'bg-[var(--color-surface-container)]'
-      }`}>
-        <div className="flex items-center justify-center w-8 h-8 rounded-[var(--radius-md)] bg-[var(--color-secondary-container)]">
-          <span className="material-symbols-outlined text-[18px] text-[var(--color-secondary)]">
-            help
+      {/* Header: 42px, the shared card head of the ask / plan cards. */}
+      <div className={`flex h-[42px] items-center gap-2 px-3.5 ${submitted ? '' : 'border-b border-[var(--color-border)]'}`}>
+        <MessageCircleQuestion aria-hidden="true" size={15} strokeWidth={1.75} className="shrink-0 text-[var(--color-text-tertiary)]" />
+        <span className="min-w-0 truncate text-[13px] font-semibold text-[var(--color-text-primary)]">
+          {t('question.needsInput')}
+        </span>
+        {(submitted || expired) && (
+          // handing the question back is not an answer — saying "answered"
+          // there misreports what the user did; and an expired question was
+          // never answered at all, whatever happened to the answers
+          <Badge className="shrink-0">{t(statusBadgeKey)}</Badge>
+        )}
+        {!submitted && questions.length > 1 && (
+          <span className="ml-auto shrink-0 font-mono text-xs tabular-nums text-[var(--color-text-tertiary)]">
+            <span className="font-medium text-[var(--color-text-primary)]">{safeActiveTab + 1}</span> / {questions.length}
           </span>
-        </div>
-        <div className="flex-1 min-w-0">
-          <span className="text-sm font-semibold text-[var(--color-text-primary)]">
-            {t('question.needsInput')}
-          </span>
-          {(submitted || expired) && (
-            <span className="ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider bg-[var(--color-surface-container-high)] text-[var(--color-text-tertiary)]">
-              {/* handing the question back is not an answer — saying "answered"
-                  there misreports what the user did; and an expired question was
-                  never answered at all, whatever happened to the answers */}
-              {t(automaticallyAnswered
-                ? 'question.autoAnswered'
-                : hasSentAsMessage || expired
-                ? 'question.expiredBadge'
-                : hasRequestedChat
-                  ? 'question.chatBadge'
-                  : terminalWithoutAnswers ? 'question.completed' : 'question.answered')}
-            </span>
-          )}
-        </div>
+        )}
       </div>
 
-      {/* Question tabs — horizontal tab bar (only show when multiple questions) */}
-      {questions.length > 1 && (
-        <div className="flex px-4 border-b border-[var(--color-border)] bg-[var(--color-surface-container-low)] overflow-x-auto">
+      {/* Question tabs (only when there are several questions) */}
+      {!submitted && questions.length > 1 && (
+        <div className="flex gap-0.5 overflow-x-auto px-2.5 pt-2">
           {questions.map((q, i) => {
             const isActive = safeActiveTab === i
             const isAnswered = Boolean(freeTexts[i]?.trim()) || (selections[i]?.length ?? 0) > 0
@@ -487,20 +482,19 @@ export function AskUserQuestion({
             return (
               <button
                 key={i}
+                type="button"
                 onClick={() => setActiveTab(i)}
-                className={`relative flex items-center gap-1.5 px-4 py-2.5 text-xs font-medium whitespace-nowrap transition-colors ${
+                aria-current={isActive || undefined}
+                className={`flex h-7 shrink-0 items-center gap-1.5 whitespace-nowrap rounded-[var(--radius-sm)] px-2.5 text-xs transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] ${
                   isActive
-                    ? 'text-[var(--color-secondary)]'
-                    : 'text-[var(--color-text-tertiary)] hover:text-[var(--color-text-secondary)]'
+                    ? 'bg-[var(--color-surface-container)] font-medium text-[var(--color-text-primary)]'
+                    : 'text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)]'
                 }`}
               >
                 {isAnswered && (
-                  <span className="material-symbols-outlined text-[14px] text-[var(--color-success)]">check_circle</span>
+                  <CircleCheck aria-hidden="true" size={12} strokeWidth={2} className="text-[var(--color-success)]" />
                 )}
                 {tabLabel}
-                {isActive && (
-                  <div className="absolute bottom-0 left-2 right-2 h-[2px] bg-[var(--color-secondary)] rounded-t" />
-                )}
               </button>
             )
           })}
@@ -508,81 +502,80 @@ export function AskUserQuestion({
       )}
 
       {/* Active question content */}
-      <div className="px-4 py-3">
-        {/* Nothing is waiting on this question any more. The form below stays
-            usable on purpose — the answers are still worth sending — but which
-            channel they take changes, and that has to be visible. */}
-        {expired && (
-          <div
-            role="status"
-            aria-live="polite"
-            className="mb-3 flex items-start gap-2 text-xs text-[var(--color-text-secondary)]"
-          >
-            <span className="material-symbols-outlined text-[14px] text-[var(--color-text-tertiary)]" aria-hidden="true">
-              info
-            </span>
-            <span>{t('question.expiredNotice')}</span>
-          </div>
-        )}
-        <p className="text-sm font-medium text-[var(--color-text-primary)] mb-3">
-          {activeQuestion.question}
-        </p>
+      {!submitted && (
+        <div className="px-2.5 pt-3">
+          {/* Nothing is waiting on this question any more. The form below stays
+              usable on purpose — the answers are still worth sending — but which
+              channel they take changes, and that has to be visible. */}
+          {expired && (
+            <div
+              role="status"
+              aria-live="polite"
+              className="mx-1 mb-3 flex items-start gap-2 rounded-[var(--radius-md)] bg-[var(--color-surface-container)] px-3 py-2 text-xs text-[var(--color-text-secondary)]"
+            >
+              <Info aria-hidden="true" size={14} strokeWidth={1.75} className="mt-px shrink-0 text-[var(--color-text-tertiary)]" />
+              <span>{t('question.expiredNotice')}</span>
+            </div>
+          )}
+          <p className="mb-2 px-1 text-sm font-medium text-[var(--color-text-primary)]">
+            {activeQuestion.question}
+          </p>
 
-        {/* Option cards */}
-        {activeQuestion.options && activeQuestion.options.length > 0 && (
-          <div className="space-y-2 mb-3">
-            {activeQuestion.options.map((opt, optIndex) => {
-              const isSelected = selections[safeActiveTab]?.includes(opt.label) ?? false
-              const isMultiSelect = activeQuestion.multiSelect === true
-              return (
-                <button
-                  key={optIndex}
-                  onClick={() => handleSelect(safeActiveTab, opt.label)}
-                  disabled={submitted}
-                  className={`w-full text-left px-4 py-3 rounded-[var(--radius-md)] border transition-all duration-150 cursor-pointer ${
-                    isSelected
-                      ? 'border-[var(--color-secondary)] bg-[var(--color-secondary-container)]'
-                      : 'border-[var(--color-border)] bg-[var(--color-surface)] hover:border-[var(--color-outline)] hover:bg-[var(--color-surface-container-low)]'
-                  } ${submitted ? 'cursor-default' : ''}`}
-                >
-                  <div className="flex items-start gap-3">
-                    {/* Selection indicator */}
-                    <div className={`mt-0.5 flex-shrink-0 w-4 h-4 rounded-full border-2 flex items-center justify-center transition-colors ${
+          {/* Option cards: hairline at rest, a 1.5px terracotta edge on the
+              faint brand wash when picked. */}
+          {activeQuestion.options && activeQuestion.options.length > 0 && (
+            <div className="grid gap-1.5">
+              {activeQuestion.options.map((opt, optIndex) => {
+                const isSelected = selections[safeActiveTab]?.includes(opt.label) ?? false
+                const isMultiSelect = activeQuestion.multiSelect === true
+                return (
+                  <button
+                    key={optIndex}
+                    type="button"
+                    onClick={() => handleSelect(safeActiveTab, opt.label)}
+                    disabled={submitted}
+                    aria-pressed={isSelected}
+                    className={`flex w-full cursor-pointer items-start gap-2.5 rounded-[var(--radius-md)] px-3 py-2.5 text-left transition-[background-color,box-shadow] duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] ${
                       isSelected
-                        ? 'border-[var(--color-secondary)] bg-[var(--color-secondary)]'
-                        : 'border-[var(--color-outline)]'
-                    } ${isMultiSelect ? 'rounded-[var(--radius-xs)]' : 'rounded-full'}`}>
-                      {isSelected && (
-                        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
-                          <polyline points="20 6 9 17 4 12" />
-                        </svg>
-                      )}
-                    </div>
-                    <div className="flex-1 min-w-0">
-                      <span className={`text-sm font-medium ${
+                        ? 'bg-[var(--color-brand-soft)] shadow-[inset_0_0_0_1.5px_var(--color-brand)]'
+                        : 'shadow-[inset_0_0_0_1px_var(--color-border)] hover:shadow-[inset_0_0_0_1px_var(--color-outline)]'
+                    }`}
+                  >
+                    {/* Selection indicator: a ring that fills in for single
+                        choice, a checkbox for multi-select. */}
+                    <span
+                      aria-hidden="true"
+                      className={`mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center transition-[background-color,box-shadow] ${
+                        isMultiSelect ? 'rounded-[var(--radius-xs)]' : 'rounded-full'
+                      } ${
                         isSelected
-                          ? 'text-[var(--color-secondary)]'
-                          : 'text-[var(--color-text-primary)]'
-                      }`}>
+                          ? isMultiSelect
+                            ? 'bg-[var(--color-brand)] text-[var(--color-on-primary)]'
+                            : 'shadow-[inset_0_0_0_5px_var(--color-brand)]'
+                          : 'shadow-[inset_0_0_0_1.5px_var(--color-border-strong)]'
+                      }`}
+                    >
+                      {isSelected && isMultiSelect ? <Check size={12} strokeWidth={2.5} /> : null}
+                    </span>
+                    <span className="min-w-0 flex-1">
+                      <span className="block text-[13px] font-medium text-[var(--color-text-primary)]">
                         {opt.label}
                       </span>
                       {opt.description && (
-                        <p className="text-xs text-[var(--color-text-secondary)] mt-0.5">
+                        <span className="mt-0.5 block text-xs text-[var(--color-text-tertiary)]">
                           {opt.description}
-                        </p>
+                        </span>
                       )}
-                    </div>
-                  </div>
-                </button>
-              )
-            })}
-          </div>
-        )}
+                    </span>
+                  </button>
+                )
+              })}
+            </div>
+          )}
 
-        {/* Free text input */}
-        {!submitted && (
-          <div>
-            <label className="text-xs text-[var(--color-text-tertiary)] mb-1.5 block">
+          {/* Free text input: the sunken answer slot. */}
+          <div className="mt-2.5">
+            <label className="mb-1 block px-1 text-xs text-[var(--color-text-tertiary)]">
               {t('question.customResponse')}
             </label>
             <textarea
@@ -600,63 +593,63 @@ export function AskUserQuestion({
               placeholder={t('question.typePlaceholder')}
               rows={3}
               wrap="soft"
-              className="max-h-48 min-h-[84px] w-full resize-y rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] px-3 py-2 text-sm leading-relaxed text-[var(--color-text-primary)] placeholder:text-[var(--color-text-tertiary)] focus:border-[var(--color-border-focus)] focus:outline-none focus:shadow-[var(--shadow-focus-ring)]"
+              className="max-h-48 min-h-[72px] w-full resize-y rounded-[var(--radius-md)] border border-transparent bg-[var(--color-surface-container)] px-3 py-2.5 text-[13px] leading-relaxed text-[var(--color-text-primary)] transition-colors placeholder:text-[var(--color-text-tertiary)] focus:border-[var(--color-outline)] focus:bg-[var(--color-surface-container-lowest)] focus:outline-none"
             />
           </div>
-        )}
+        </div>
+      )}
 
-        {/* Submitted answer display — the chat handoff wins over any terminal
-            result, whose text is the deny payload and not worth showing. */}
-        {submitted && (hasSentAsMessage ? (
-          <div className="flex items-center gap-2 text-xs text-[var(--color-text-secondary)]">
-            <span className="material-symbols-outlined text-[14px] text-[var(--color-secondary)]">send</span>
-            <span>
-              {t('question.sentAsMessagePrefix')}<strong>{answeredText}</strong>
-            </span>
-          </div>
-        ) : hasRequestedChat ? (
-          <div className="flex items-center gap-2 text-xs text-[var(--color-text-secondary)]">
-            <span className="material-symbols-outlined text-[14px] text-[var(--color-secondary)]">forum</span>
-            <span>{t('question.chatRequested')}</span>
-          </div>
-        ) : (
-          <div className="flex items-center gap-2 text-xs text-[var(--color-text-secondary)]">
-            <span className="material-symbols-outlined text-[14px] text-[var(--color-success)]">check_circle</span>
-            <span>
-              {t(terminalWithoutAnswers ? 'question.resultPrefix' : 'question.answeredPrefix')}<strong>{answeredText}</strong>
-            </span>
-          </div>
-        ))}
-      </div>
+      {/* Submitted answer display — the chat handoff wins over any terminal
+          result, whose text is the deny payload and not worth showing. */}
+      {submitted && (
+        <div className="border-t border-[var(--color-border)] px-3.5 py-2.5">
+          <p className="mb-1 truncate text-xs text-[var(--color-text-tertiary)]">{activeQuestion.question}</p>
+          {hasSentAsMessage ? (
+            <div className="flex items-center gap-2 text-[13px] text-[var(--color-text-secondary)]">
+              <Send aria-hidden="true" size={14} strokeWidth={1.75} className="shrink-0 text-[var(--color-text-tertiary)]" />
+              <span>
+                {t('question.sentAsMessagePrefix')}<strong className="font-medium text-[var(--color-text-primary)]">{answeredText}</strong>
+              </span>
+            </div>
+          ) : hasRequestedChat ? (
+            <div className="flex items-center gap-2 text-[13px] text-[var(--color-text-secondary)]">
+              <MessagesSquare aria-hidden="true" size={14} strokeWidth={1.75} className="shrink-0 text-[var(--color-text-tertiary)]" />
+              <span>{t('question.chatRequested')}</span>
+            </div>
+          ) : (
+            <div className="flex items-center gap-2 text-[13px] text-[var(--color-text-secondary)]">
+              <CircleCheck aria-hidden="true" size={14} strokeWidth={1.75} className="shrink-0 text-[var(--color-success)]" />
+              <span>
+                {t(terminalWithoutAnswers ? 'question.resultPrefix' : 'question.answeredPrefix')}<strong className="font-medium text-[var(--color-text-primary)]">{answeredText}</strong>
+              </span>
+            </div>
+          )}
+        </div>
+      )}
 
       {/* Action bar. Wraps rather than overflows: the buttons plus a translated
           label (kr/jp run long) can outgrow a narrow side-by-side pane. Next is
           pushed to the end of the row and wraps alone onto a second line when
           it runs out of room. */}
       {!submitted && (
-        <div className="flex flex-wrap items-center gap-2 px-4 py-3 border-t border-[var(--color-border)] bg-[var(--color-surface-container-low)]">
+        <div className="flex flex-wrap items-center gap-2 px-3.5 pb-3.5 pt-3">
           <Button
             variant="primary"
-            size="sm"
+            size="base"
             // `expired` is the one state where a button may work without a live
             // request: it sends the answers as a message instead of answering.
             disabled={!allAnswered || (!expired && !pendingRequest)}
             onClick={handleSubmit}
-            icon={
-              <span className="material-symbols-outlined text-[14px]">send</span>
-            }
           >
             {t(expired ? 'question.sendAsMessage' : 'question.submit')}
           </Button>
           <Button
-            variant="secondary"
-            size="sm"
+            variant="ghost"
+            size="base"
             disabled={!expired && !pendingRequest}
             onClick={handleChatAboutThis}
             title={t('question.chatAboutThisHint')}
-            icon={
-              <span className="material-symbols-outlined text-[14px]">forum</span>
-            }
+            icon={<MessagesSquare aria-hidden="true" size={14} strokeWidth={1.75} />}
           >
             {t('question.chatAboutThis')}
           </Button>
@@ -665,14 +658,12 @@ export function AskUserQuestion({
               the action that actually ends the exchange. */}
           {questions.length > 1 && safeActiveTab < questions.length - 1 && (
             <Button
-              variant="tonal"
-              size="sm"
+              variant="secondary"
+              size="base"
               className="ml-auto"
               disabled={!activeAnswered}
               onClick={() => setActiveTab(safeActiveTab + 1)}
-              icon={
-                <span className="material-symbols-outlined text-[14px]">arrow_forward</span>
-              }
+              icon={<ArrowRight aria-hidden="true" size={14} strokeWidth={1.75} />}
               iconPosition="end"
             >
               {t('question.next')}
diff --git a/desktop/src/components/chat/AssistantOutputTargetCard.tsx b/desktop/src/components/chat/AssistantOutputTargetCard.tsx
index 12a657cc..a4a68e5f 100644
--- a/desktop/src/components/chat/AssistantOutputTargetCard.tsx
+++ b/desktop/src/components/chat/AssistantOutputTargetCard.tsx
@@ -64,7 +64,7 @@ export function AssistantOutputTargetCard({ target, sessionId, workDir }: Props)
   }, [openWith, sessionId, t, target.href, workDir])
 
   return (
-    <section className="flex items-stretch overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)] shadow-[var(--shadow-card)]">
+    <section className="flex items-stretch overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)]">
       {/* The whole row body is the hit area, not just the trailing icon button:
           the icon is a discoverability affordance. Everything inside is a span
           because a `button` may only contain phrasing content. */}
@@ -72,50 +72,48 @@ export function AssistantOutputTargetCard({ target, sessionId, workDir }: Props)
         type="button"
         onClick={handleOpen}
         aria-label={t('assistantOutputs.openAria', { title: target.title })}
-        className="flex min-w-0 flex-1 cursor-pointer items-start gap-3 px-3 py-2.5 text-left transition-colors hover:bg-[var(--color-surface-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-border-focus)]"
+        className="flex min-w-0 flex-1 cursor-pointer items-center gap-3 px-3 py-2.5 text-left transition-colors hover:bg-[var(--color-surface-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-border-focus)]"
       >
-        <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-[var(--radius-md)] bg-[var(--color-surface)] text-[var(--color-text-secondary)]">
+        <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-[var(--radius-md)] bg-[var(--color-surface-container)] text-[var(--color-text-secondary)]">
           {isLocalhost ? (
-            <Globe size={17} strokeWidth={2.1} aria-hidden="true" />
+            <Globe size={15} strokeWidth={1.75} aria-hidden="true" />
           ) : (
-            <FileTypeIcon path={target.normalizedPath ?? target.href} size={26} />
+            <FileTypeIcon path={target.normalizedPath ?? target.href} size={16} />
           )}
         </span>
 
         <span className="flex min-w-0 flex-1 flex-col">
           <span className="flex min-w-0 items-center gap-2">
-            <span className="truncate text-sm font-semibold text-[var(--color-text-primary)]">
+            <span className="truncate text-[13px] font-medium text-[var(--color-text-primary)]">
               {target.title}
             </span>
-            <Badge bordered className="font-semibold uppercase tracking-[0.08em]">
+            <Badge>
               {badge}
             </Badge>
           </span>
           {showSubtitle && (
-            <span className="mt-1 truncate text-xs text-[var(--color-text-tertiary)]" title={subtitle}>
+            <span className="mt-0.5 truncate font-mono text-[11px] text-[var(--color-text-tertiary)]" title={subtitle}>
               {subtitle}
             </span>
           )}
         </span>
       </button>
 
-      <div className="flex shrink-0 items-center gap-1.5 pr-3">
+      <div className="flex shrink-0 items-center gap-1 pr-2">
         <IconButton
-          icon={<ExternalLink size={14} strokeWidth={2.2} aria-hidden="true" />}
+          icon={<ExternalLink size={14} strokeWidth={1.75} aria-hidden="true" />}
           label={t('assistantOutputs.open')}
-          size="md"
-          tone="secondary"
-          shape="circle"
-          filled
+          size="sm"
+          tone="muted"
           onClick={handleOpen}
         />
         <Button
           variant="secondary"
-          size="base"
+          size="sm"
           aria-label={t('openWith.title')}
           onClick={handleOpenWith}
-          className="shrink-0 rounded-full"
-          icon={<ChevronDown size={13} strokeWidth={2.2} aria-hidden="true" />}
+          className="shrink-0"
+          icon={<ChevronDown size={12} strokeWidth={2} aria-hidden="true" />}
           iconPosition="end"
         >
           {t('openWith.title')}
diff --git a/desktop/src/components/chat/AttachmentGallery.tsx b/desktop/src/components/chat/AttachmentGallery.tsx
index 271cb37c..ea84ec99 100644
--- a/desktop/src/components/chat/AttachmentGallery.tsx
+++ b/desktop/src/components/chat/AttachmentGallery.tsx
@@ -1,6 +1,6 @@
 import { useMemo, useState } from 'react'
 import type { MouseEvent as ReactMouseEvent } from 'react'
-import { ChevronDown, MessageSquare, X } from 'lucide-react'
+import { ChevronDown, Folder, MessageSquare, MousePointerClick, X } from 'lucide-react'
 import { useTranslation, type TranslationKey } from '../../i18n'
 import { attachmentImageSource } from '../../lib/attachmentImages'
 import { getDesktopHost } from '../../lib/desktopHost'
@@ -158,7 +158,7 @@ export function AttachmentGallery({ attachments, variant = 'message', onRemove }
         <div
           data-testid="preview-selection-batch"
           aria-label={t('attachments.selectionBatch', { count: attachments.length })}
-          className="grid w-full max-w-[520px] grid-cols-2 gap-px overflow-hidden rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-border)] shadow-[var(--shadow-card)]"
+          className="grid w-full max-w-[520px] grid-cols-2 gap-px overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-border)]"
         >
           {attachments.map((attachment, index) => {
             const src = attachmentImageSource(attachment)
@@ -201,7 +201,7 @@ export function AttachmentGallery({ attachments, variant = 'message', onRemove }
                   </Badge>
                 </span>
                 <span className="flex min-h-11 min-w-0 items-center gap-2 border-t border-[var(--color-border)] px-2.5 py-1.5">
-                  <span className="shrink-0 font-mono text-[11px] font-semibold text-[var(--color-text-secondary)]">
+                  <span className="shrink-0 font-mono text-[11px] font-medium text-[var(--color-text-secondary)]">
                     {attachment.name}
                   </span>
                   {note && (
@@ -235,7 +235,7 @@ export function AttachmentGallery({ attachments, variant = 'message', onRemove }
                   className={
                     isComposer
                       ? 'overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)]'
-                      : 'overflow-hidden rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)] text-left shadow-[var(--shadow-card)] transition-transform hover:scale-[1.01] motion-reduce:transition-none'
+                      : 'overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)] text-left transition-[border-color] hover:border-[var(--color-outline)] motion-reduce:transition-none'
                   }
                 >
                   <img
@@ -260,7 +260,7 @@ export function AttachmentGallery({ attachments, variant = 'message', onRemove }
                     className="max-w-[min(340px,calc(100vw-3rem))] text-[13px]"
                     content={
                       <>
-                        <span className="block text-[11px] font-medium uppercase tracking-wide opacity-70">
+                        <span className="block text-[11px] font-medium opacity-70">
                           {t('attachments.selectionNoteTitle')}
                         </span>
                         <span className="mt-1 block whitespace-pre-wrap break-words">
@@ -276,14 +276,12 @@ export function AttachmentGallery({ attachments, variant = 'message', onRemove }
                       className={[
                         'inline-flex h-7 max-w-[260px] items-center gap-1.5 rounded-full border',
                         'border-[var(--color-border)] bg-[var(--color-surface-container-low)] px-2.5',
-                        'text-[12px] font-medium leading-none text-[var(--color-text-primary)] shadow-[var(--shadow-card)]',
+                        'text-[12px] font-medium leading-none text-[var(--color-text-primary)]',
                         'transition-colors hover:border-[var(--color-primary-fixed-dim)] hover:bg-[var(--color-surface-container)]',
                         'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2',
                       ].join(' ')}
                     >
-                      <span className="material-symbols-outlined text-[15px] text-[var(--color-text-tertiary)]">
-                        ads_click
-                      </span>
+                      <MousePointerClick size={14} strokeWidth={1.75} aria-hidden="true" className="shrink-0 text-[var(--color-text-tertiary)]" />
                       <span className="min-w-0 truncate">{attachment.name}</span>
                     </span>
                   </Tooltip>
@@ -292,10 +290,10 @@ export function AttachmentGallery({ attachments, variant = 'message', onRemove }
                   <button
                     type="button"
                     onClick={() => onRemove(attachment.id!)}
-                    className="absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-[var(--color-error)] text-[10px] text-[var(--color-on-error)] opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100"
+                    className="absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-[var(--color-error)] text-[var(--color-on-error)] opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100"
                     aria-label={t('attachments.remove', { name: attachment.name })}
                   >
-                    ×
+                    <X size={12} strokeWidth={2} aria-hidden="true" />
                   </button>
                 )}
               </div>
@@ -321,7 +319,7 @@ export function AttachmentGallery({ attachments, variant = 'message', onRemove }
               <div
                 key={attachment.id || `${attachment.name}-${index}`}
                 data-testid="diff-comment-card"
-                className="group/diff-comment flex max-w-[min(420px,100%)] min-w-[240px] items-start gap-2 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)] px-2.5 py-2 text-left shadow-[var(--shadow-card)]"
+                className="group/diff-comment flex max-w-[min(420px,100%)] min-w-[240px] items-start gap-2 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] px-2.5 py-2 text-left"
               >
                 <MessageSquare aria-hidden="true" size={15} className="mt-0.5 shrink-0 text-[var(--color-text-tertiary)]" />
                 <span className="min-w-0 flex-1">
@@ -377,14 +375,14 @@ export function AttachmentGallery({ attachments, variant = 'message', onRemove }
                 style={{ color: fileIconAccent(fileIcon) }}
               >
                 {attachment.isDirectory
-                  ? <span className="material-symbols-outlined text-[19px]">{fileIcon}</span>
+                  ? <Folder size={18} strokeWidth={1.75} aria-hidden="true" />
                   : <FileTypeIcon path={attachment.path || attachment.name} size={20} />}
               </span>
               <span className="min-w-0 flex-1">
-                <span className="block min-w-0 max-w-[260px] truncate text-[13px] font-semibold leading-5 text-[var(--color-text-primary)]">
+                <span className="block min-w-0 max-w-[260px] truncate text-[13px] font-medium leading-5 text-[var(--color-text-primary)]">
                   {attachment.name}{lineLabel}
                 </span>
-                <span className="block truncate text-[10px] font-semibold uppercase leading-3 tracking-[0.08em] text-[var(--color-text-tertiary)]">
+                <span className="block truncate text-[11px] leading-4 text-[var(--color-text-tertiary)]">
                   {typeLabel}
                 </span>
                 {hasQuotePreview && (
@@ -402,7 +400,7 @@ export function AttachmentGallery({ attachments, variant = 'message', onRemove }
               data-file-extension={typeInfo.ext || undefined}
               className={[
                 'group/file inline-flex max-w-full min-w-[220px] items-stretch overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)]',
-                'bg-[var(--color-surface-container-low)] text-[var(--color-text-secondary)] shadow-[var(--shadow-card)]',
+                'bg-[var(--color-surface-container-lowest)] text-[var(--color-text-secondary)]',
                 'transition-colors hover:border-[var(--color-outline)] hover:bg-[var(--color-surface-container)]',
               ].join(' ')}
             >
@@ -433,14 +431,13 @@ export function AttachmentGallery({ attachments, variant = 'message', onRemove }
               data-file-extension={typeInfo.ext || undefined}
               className={[
                 'group/file inline-flex max-w-full min-w-0 items-center gap-2.5 border border-[var(--color-border)]',
-                'rounded-[var(--radius-lg)] bg-[var(--color-surface-container-low)] px-2.5 py-1.5 text-[var(--color-text-secondary)]',
-                'shadow-[var(--shadow-card)]',
+                'rounded-[var(--radius-lg)] bg-[var(--color-surface-container-lowest)] px-2.5 py-1.5 text-[var(--color-text-secondary)]',
               ].join(' ')}
             >
               {fileVisual}
               {onRemove && attachment.id && (
                 <IconButton
-                  icon={<span className="material-symbols-outlined text-[17px]" aria-hidden="true">close</span>}
+                  icon={<X size={14} strokeWidth={1.75} aria-hidden="true" />}
                   label={t('attachments.remove', { name: attachment.name })}
                   size="2xs"
                   tone="muted"
diff --git a/desktop/src/components/chat/ChatInput.test.tsx b/desktop/src/components/chat/ChatInput.test.tsx
index 388ce46d..47034014 100644
--- a/desktop/src/components/chat/ChatInput.test.tsx
+++ b/desktop/src/components/chat/ChatInput.test.tsx
@@ -1134,16 +1134,17 @@ describe('ChatInput file mentions', () => {
     render(<ChatInput variant="hero" />)
 
     const panel = screen.getByTestId('chat-input-panel')
-    // 20px composer corner + the composer step of the shadow scale, the same
-    // shell EmptySession renders (docs/redesign-paper-ink-seal.md §2).
-    expect(panel).toHaveClass('rounded-[var(--radius-2xl)]', 'glass-panel--composer')
+    // The floating card (「素」): `--radius-xl` + the composer step of the
+    // shadow scale, the same shell EmptySession renders.
+    expect(panel).toHaveClass('rounded-[var(--radius-xl)]', 'glass-panel--composer')
     expect(panel).not.toHaveClass('rounded-b-none')
 
     // One pill in the toolbar instead of a three-button bar welded to the
     // panel's bottom edge — which is what used to square off that edge.
     const pill = await screen.findByRole('button', { name: 'Location: repo / main' })
     expect(panel).toContainElement(pill)
-    expect(pill).toHaveClass('h-9')
+    // A 28px toolbar control like its neighbours, not a bordered pill.
+    expect(pill).toHaveClass('h-7')
     expect(screen.queryByText('Select a project...')).not.toBeInTheDocument()
 
     await openLocationMenu()
@@ -1280,7 +1281,9 @@ describe('ChatInput file mentions', () => {
 
     const send = screen.getByRole('button', { name: 'Run' })
     expect(send).toHaveClass('rounded-full', 'h-8', 'w-8')
-    expect(send).toHaveTextContent('arrow_upward')
+    // Terracotta is the send key's alone.
+    expect(send).toHaveClass('bg-[var(--color-brand)]')
+    expect(send.querySelector('[data-icon="send"]')).toBeInTheDocument()
 
     await act(async () => {
       useChatStore.setState({
@@ -1293,7 +1296,11 @@ describe('ChatInput file mentions', () => {
 
     const stop = screen.getByRole('button', { name: 'Stop' })
     expect(stop).toHaveClass('rounded-full', 'h-8', 'w-8')
-    expect(stop).toHaveTextContent('stop')
+    // Mid-turn the same circle turns ink with a filled square — a running turn
+    // must not read as the error-red danger button.
+    expect(stop).toHaveClass('bg-[var(--color-btn-primary-bg)]')
+    expect(stop).not.toHaveClass('bg-[var(--color-error)]')
+    expect(stop.querySelector('[data-icon="stop"]')).toBeInTheDocument()
     expect(stop).not.toBeDisabled()
   })
 
@@ -1465,18 +1472,18 @@ describe('ChatInput file mentions', () => {
     expect(screen.queryByTestId('run-location-outside')).not.toBeInTheDocument()
   })
 
-  // The band cancels the panel's `p-3`, so it has to follow the panel's padding
-  // rather than the control layout. A wide column beside an open panel renders
-  // the wide toolbar inside a `p-3` panel; keying the band on the controls would
-  // have inset the divider by 12px there.
-  it('keeps the toolbar band matched to the panel padding when a wide column sits beside a panel', async () => {
+  // The card has one geometry at every width: the old narrow-layout band
+  // (`-mx-3` cancelling a `p-3` panel) is gone with the divider it drew, so a
+  // wide column beside a panel and a full-width column render the same card.
+  it('keeps one card geometry when a wide column sits beside a panel', async () => {
     stubComposerColumnWidth(580)
 
     render(<ChatInput compact />)
 
     await screen.findByTestId('run-location-readonly')
-    expect(screen.getByTestId('chat-input-panel')).toHaveClass('p-3')
-    expect(screen.getByTestId('chat-input-toolbar')).toHaveClass('-mx-3')
+    expect(screen.getByTestId('chat-input-panel')).toHaveClass('p-2')
+    expect(screen.getByTestId('chat-input-toolbar')).toHaveClass('pt-1.5')
+    expect(screen.getByTestId('chat-input-toolbar').className).not.toMatch(/-m[xy]-\d/)
   })
 
   it('uses the persisted message count to keep reopened sessions in context mode while history loads', async () => {
@@ -2771,7 +2778,7 @@ describe('ChatInput file mentions', () => {
     // to `.glass-panel`'s own `box-shadow` on stylesheet order — so the phone
     // composer silently rendered the floating-overlay shadow instead.
     expect(screen.getByTestId('chat-input-panel')).toHaveClass('glass-panel--composer')
-    expect(screen.getByTestId('chat-input-panel')).toHaveClass('rounded-[var(--radius-2xl)]')
+    expect(screen.getByTestId('chat-input-panel')).toHaveClass('rounded-[var(--radius-xl)]')
     expect(screen.getByTestId('chat-input-panel')).not.toHaveClass('rounded-b-none')
     expect(screen.getByTestId('chat-input-toolbar-leading')).toHaveClass('shrink-0', 'gap-1')
     expect(screen.getByTestId('chat-input-toolbar-trailing')).toHaveClass('min-w-0', 'flex-1', 'justify-end', 'gap-1')
@@ -2797,7 +2804,7 @@ describe('ChatInput file mentions', () => {
     const toolbar = screen.getByTestId('chat-input-toolbar')
 
     expect(toolbar).not.toHaveClass('absolute')
-    expect(toolbar).toHaveClass('mt-3')
+    expect(toolbar).toHaveClass('pt-1.5')
     expect(input).not.toHaveClass('pb-12')
     expect(input).not.toHaveClass('pb-14')
   })
@@ -2807,26 +2814,28 @@ describe('ChatInput file mentions', () => {
   // same place in both. The live one used to weld itself to the panel edge
   // with `-mx-4 -mb-4`, which pulled every control 4px left and stretched the
   // divider across the panel the moment the first message landed.
-  it('keeps the wide composer toolbar inset when a draft turns into a live session', async () => {
+  it('keeps the composer toolbar in place when a draft turns into a live session', async () => {
     const { unmount } = render(<ChatInput variant="hero" />)
 
     const draftToolbar = screen.getByTestId('chat-input-toolbar')
-    expect(draftToolbar).toHaveClass('pt-3')
+    const draftPanel = screen.getByTestId('chat-input-panel')
+    const draftGeometry = { toolbar: draftToolbar.className, panel: draftPanel.className }
     expect(draftToolbar.className).not.toMatch(/-m[xy]-\d/)
     unmount()
 
     const live = render(<ChatInput variant="default" />)
 
-    const liveToolbar = screen.getByTestId('chat-input-toolbar')
-    expect(liveToolbar).toHaveClass('pt-3')
-    expect(liveToolbar.className).not.toMatch(/-m[xy]-\d/)
+    // Same row, same card: nothing shifts when the first message lands.
+    expect(screen.getByTestId('chat-input-toolbar').className).toBe(draftGeometry.toolbar)
+    expect(screen.getByTestId('chat-input-panel').className).toBe(draftGeometry.panel)
     live.unmount()
 
-    // The narrow composer keeps the band: `p-3` leaves too little room to
-    // spend on inset, and it never swaps variants mid-session.
+    // The narrow composer is the same card too; only the shell's outer
+    // padding follows `compact`.
     render(<ChatInput compact />)
 
-    expect(screen.getByTestId('chat-input-toolbar')).toHaveClass('-mx-3')
+    expect(screen.getByTestId('chat-input-toolbar').className).toBe(draftGeometry.toolbar)
+    expect(screen.getByTestId('chat-input-toolbar').className).not.toMatch(/-m[xy]-\d/)
   })
 
   // The hero row is `flex`, and a paragraph holding an unbreakable run (a
diff --git a/desktop/src/components/chat/ChatInput.tsx b/desktop/src/components/chat/ChatInput.tsx
index 0d0c4789..2ac065e7 100644
--- a/desktop/src/components/chat/ChatInput.tsx
+++ b/desktop/src/components/chat/ChatInput.tsx
@@ -5,6 +5,7 @@ import { getSessionReferences } from '@/lib/composerMentions'
 import { normalizeSessionReferences } from '@/lib/sessionReferences'
 import { isComposerReferenceVisible, isComposerSlashCommandVisible } from '@/lib/composerCapabilityVisibility'
 import { useState, useRef, useEffect, useCallback, useMemo, useId } from 'react'
+import { ArrowUp, CornerDownRight, Pencil, Plus, Square, Trash2 } from 'lucide-react'
 import { useDismissable } from '@/hooks/useDismissable'
 import { Button } from '@/components/ui/Button'
 import { IconButton } from '@/components/ui/IconButton'
@@ -335,17 +336,11 @@ export function ChatInput({ variant = 'default', compact = false, sessionId, vis
   const isHeroComposer = variant === 'hero' && !isMemberSession && !compact
   const resolvedWorkDir = activeSession?.workDir || gitInfo?.workDir || undefined
   const showLaunchControls = !isMemberSession && !sideChat && messageCount === 0
-  // Two different questions, and they used to share one answer.
-  //
-  // `useCompactChrome` is about context: the shell's padding, its top divider
-  // and the toolbar's edge-to-edge band belong to the panel-beside-the-composer
-  // and mobile layouts regardless of how much room those layouts got.
-  //
-  // `useCompactControls` is about room, so it asks the column how wide it is.
-  // Until a measurement lands (jsdom, first paint) it defers to the caller's
-  // `compact`, which keeps the pre-measurement frame from flashing the wrong
-  // layout.
-  const useCompactChrome = compact || isMobileComposer
+  // `useCompactControls` is about room, so it asks the column how wide it is —
+  // never "is a side panel open". Until a measurement lands (jsdom, first
+  // paint) it defers to the caller's `compact`, which keeps the
+  // pre-measurement frame from flashing the wrong layout. (The card itself has
+  // one geometry everywhere; only the shell's outer padding follows `compact`.)
   const fitsAtLeast = (minWidth: number) => shellWidth === null ? !compact : shellWidth >= minWidth
   const useCompactControls = isMobileComposer || !fitsAtLeast(TOOLBAR_LOCATION_MIN_WIDTH)
   const activeLaunchWorkDir = showLaunchControls ? (launchWorkDir || resolvedWorkDir || '') : (resolvedWorkDir || '')
@@ -1280,12 +1275,18 @@ export function ChatInput({ variant = 'default', compact = false, sessionId, vis
       ref={shellRef}
       data-testid="chat-input-shell"
       data-session-id={activeTabId ?? undefined}
+      // The docked composer floats over the end of the transcript: no top
+      // divider, and `composer-fade` dissolves the last 28px of the thread into
+      // the page ground above the card instead of cutting it off. The hero
+      // composer sits in open space, so it needs neither.
       className={
         isHeroComposer
           ? `bg-[var(--color-surface)] ${isMobileComposer ? 'px-4 pb-3' : 'px-8 pb-4'}`
-          : compact
-            ? `border-t border-[var(--color-border)] bg-[var(--color-surface)] ${isMobileComposer ? 'px-3 pb-[calc(env(safe-area-inset-bottom)+10px)] pt-2' : 'px-3 py-3'}`
-            : `bg-[var(--color-surface)] ${isMobileComposer ? 'px-3 pb-[calc(env(safe-area-inset-bottom)+10px)] pt-2' : 'px-4 py-4'}`
+          : `composer-fade bg-[var(--color-surface)] ${
+            isMobileComposer
+              ? 'px-3 pb-[calc(env(safe-area-inset-bottom)+10px)] pt-1'
+              : compact ? 'px-4 pb-4 pt-1' : 'px-6 pb-5 pt-1'
+          }`
       }
     >
       <div
@@ -1299,19 +1300,12 @@ export function ChatInput({ variant = 'default', compact = false, sessionId, vis
         <div
           ref={panelRef}
           data-testid="chat-input-panel"
-          // `glass-panel--composer` is the middle step of the shadow scale, the
-          // one the handoff gives the composer; `--radius-2xl` (20px) is the
-          // composer corner. Both match EmptySession's shell so the same
-          // control does not render two different panels.
-          className={isHeroComposer
-            // Always fully rounded now: the launch controls used to be a bar
-            // welded to the panel's bottom edge, which is what squared it off.
-            // They are a single pill today — in the toolbar, or on their own
-            // line below — so nothing butts against the panel any more.
-            ? `glass-panel glass-panel--composer relative flex flex-col gap-3 overflow-visible rounded-[var(--radius-2xl)] p-4 transition-colors ${isDragActive ? 'composer-drop-target-active' : ''}`
-            : compact
-              ? `glass-panel glass-panel--composer relative overflow-visible rounded-[var(--radius-2xl)] p-3 transition-colors ${isDragActive ? 'composer-drop-target-active' : ''}`
-              : `glass-panel glass-panel--composer relative overflow-visible rounded-[var(--radius-2xl)] transition-colors ${isMobileComposer ? 'p-3' : 'p-4'} ${isDragActive ? 'composer-drop-target-active' : ''}`}
+          // The floating card (「素」): `glass-panel--composer` supplies the
+          // opaque lifted fill, the hairline and the composer step of the shadow
+          // scale; `--radius-xl` is the composer corner. One geometry for every
+          // variant — the editor and the toolbar carry their own insets, so a
+          // draft turning into a live session moves nothing.
+          className={`glass-panel glass-panel--composer relative flex flex-col overflow-visible rounded-[var(--radius-xl)] p-2 ${isDragActive ? 'composer-drop-target-active' : ''}`}
           {...dragHandlers}
         >
           {isDragActive && (
@@ -1396,7 +1390,7 @@ export function ChatInput({ variant = 'default', compact = false, sessionId, vis
             // rather than as messages waiting their turn.
             <div
               data-testid="pending-user-message-list"
-              className={`flex flex-col gap-1.5 ${isHeroComposer ? '' : 'mb-2'}`}
+              className="flex flex-col gap-1.5 px-1 pb-1 pt-1"
             >
               {queuedUserMessages.map((message) => {
                 const isEditing = editingQueuedMessageId === message.id
@@ -1405,11 +1399,11 @@ export function ChatInput({ variant = 'default', compact = false, sessionId, vis
                     key={message.id}
                     data-testid="pending-user-message"
                     className={[
-                      'flex min-w-0 items-center gap-2.5 rounded-[var(--radius-lg)] px-3.5 py-2',
+                      'flex min-h-9 min-w-0 items-center gap-2.5 rounded-[var(--radius-md)] py-1 pl-3 pr-1',
                       // `--color-outline` rather than `--color-border`: a dashed
                       // line at the lighter weight all but disappears.
                       'border border-dashed border-[var(--color-outline)]',
-                      'text-[13.5px] text-[var(--color-text-secondary)]',
+                      'text-[13px] text-[var(--color-text-secondary)]',
                     ].join(' ')}
                   >
                     {/* The handoff labels the row in words rather than with a
@@ -1438,11 +1432,11 @@ export function ChatInput({ variant = 'default', compact = false, sessionId, vis
                           autoFocus
                         />
                         <Button
-                          variant="tonal"
+                          variant="primary"
                           size="sm"
                           onClick={saveQueuedMessageEdit}
                           disabled={!editingQueuedMessageText.trim()}
-                          className="shrink-0 font-semibold"
+                          className="shrink-0"
                         >
                           {t('common.save')}
                         </Button>
@@ -1464,26 +1458,26 @@ export function ChatInput({ variant = 'default', compact = false, sessionId, vis
                             while a question is waiting: sending now would race the
                             prompt the model is blocked on. */}
                         <Button
-                          variant="link"
+                          variant="ghost"
                           size="sm"
                           disabled={questionPending}
                           onClick={() => sendQueuedUserMessage(activeTabId, message.id)}
                           aria-label={t('chat.pendingMessageGuideNow')}
                           title={t('chat.pendingMessageGuideNow')}
-                          className="shrink-0 font-semibold"
-                          icon={<span className="material-symbols-outlined text-[15px]" aria-hidden="true">subdirectory_arrow_right</span>}
+                          className="shrink-0"
+                          icon={<CornerDownRight size={14} strokeWidth={1.75} aria-hidden="true" />}
                         >
                           {t('chat.pendingMessageGuide')}
                         </Button>
                         <IconButton
-                          icon="edit"
+                          icon={<Pencil size={14} strokeWidth={1.75} aria-hidden="true" />}
                           label={t('chat.pendingMessageEdit')}
                           size="sm"
                           tone="muted"
                           onClick={() => startEditingQueuedMessage(message.id, message.displayContent)}
                         />
                         <IconButton
-                          icon="delete"
+                          icon={<Trash2 size={14} strokeWidth={1.75} aria-hidden="true" />}
                           label={t('chat.pendingMessageDelete')}
                           size="sm"
                           tone="muted"
@@ -1499,17 +1493,13 @@ export function ChatInput({ variant = 'default', compact = false, sessionId, vis
           )}
 
           {composerAttachments.length > 0 && (
-            isHeroComposer ? (
+            <div className="px-2 pt-2">
               <AttachmentGallery attachments={composerAttachments} variant="composer" onRemove={removeAttachment} />
-            ) : (
-              <div className="px-3 pt-3">
-                <AttachmentGallery attachments={composerAttachments} variant="composer" onRemove={removeAttachment} />
-              </div>
-            )
+            </div>
           )}
 
           {isHeroComposer ? (
-            <div className="flex items-start gap-3">
+            <div className="flex items-start">
               <MentionComposer
                 ref={composerRef}
                 rootRef={composerContainerRef}
@@ -1531,7 +1521,9 @@ export function ChatInput({ variant = 'default', compact = false, sessionId, vis
                 // break-word` does not shrink it. Without this the flex item
                 // refuses to shrink and the whole editor paints past the panel.
                 className="flex-1 min-w-0"
-                editorClassName="chat-reading-text max-h-[200px] overflow-y-auto py-2 leading-relaxed text-[var(--color-text-primary)]"
+                // The new-session card gives the prompt room to start: a taller
+                // resting editor than the docked composer, same type.
+                editorClassName="chat-reading-text min-h-[72px] max-h-[200px] overflow-y-auto px-2.5 pb-1 pt-2 text-[var(--color-text-primary)]"
                 aria={{
                   role: isSlashMenuVisible || isReferenceMenuVisible ? 'combobox' : 'textbox',
                   'aria-autocomplete': isSlashMenuVisible || isReferenceMenuVisible ? 'list' : undefined,
@@ -1560,9 +1552,9 @@ export function ChatInput({ variant = 'default', compact = false, sessionId, vis
               onCompositionEnd={() => { composingRef.current = false; dictation.compositionHandlers.onCompositionEnd() }}
               placeholder={composerPlaceholder}
               disabled={composerDisabled}
-              editorClassName={`chat-reading-text max-h-[200px] overflow-y-auto text-sm leading-relaxed text-[var(--color-text-primary)] ${
-                useCompactChrome ? 'py-1.5' : 'py-2'
-              }`}
+              // Type follows the reader's chat size (`chat-reading-text`); the
+              // insets put the first line 14px/16px in from the card edge.
+              editorClassName="chat-reading-text min-h-[36px] max-h-[200px] overflow-y-auto px-2 pb-1 pt-1.5 text-[var(--color-text-primary)]"
               aria={{
                 role: isSlashMenuVisible || isReferenceMenuVisible ? 'combobox' : 'textbox',
                 'aria-autocomplete': isSlashMenuVisible || isReferenceMenuVisible ? 'list' : undefined,
@@ -1576,30 +1568,20 @@ export function ChatInput({ variant = 'default', compact = false, sessionId, vis
           )}
 
           {/*
-            The wide composer keeps one geometry for the whole session. The
-            draft and the live session used to render two different rows — the
-            draft's divider was inset inside the panel's padding, the live one
-            ran edge to edge over a `-mx-4 -mb-4` band — so the first message
-            shifted every control left by 4px and widened the divider by 34px.
-            The hero spacing wins because EmptySession renders the same row.
-            Its top gap comes from the panel's own `flex-col gap-3`, which the
-            live panel does not have, so that one repeats here as `mt-3`.
-            The narrow layouts keep the band: `p-3` leaves too little room to
-            spend on inset, and they never swap variants mid-session anyway.
-            The band is keyed to the chrome, not to the control layout — its
-            `-mx-3` has to cancel the panel's `p-3` exactly, and the panel is
-            padded by the same chrome rule.
+            One toolbar geometry for every variant. The draft and the live
+            session used to render two different rows (an inset divider versus
+            an edge-to-edge band), so the first message shifted every control.
+            The card has no divider now — the editor's own bottom inset and this
+            row's top inset separate the two — so the narrow layouts no longer
+            need a band of their own either.
           */}
-          <div data-testid="chat-input-toolbar" className={`flex min-w-0 items-center justify-between gap-2 ${
-            isHeroComposer
-              ? 'pt-3'
-              : useCompactChrome
-                ? `mt-2 -mx-3 -mb-3 px-2.5 py-2 ${isMobileComposer ? 'gap-1' : 'gap-2'}`
-                : 'mt-3 pt-3'
-          }`}>
+          <div
+            data-testid="chat-input-toolbar"
+            className={`flex min-w-0 items-center justify-between pt-1.5 ${isMobileComposer ? 'gap-1' : 'gap-2'}`}
+          >
             <div
               data-testid="chat-input-toolbar-leading"
-              className={`flex min-w-0 shrink-0 items-center ${showLocationInToolbar ? 'max-w-[55%]' : ''} ${isMobileComposer ? 'gap-1' : 'gap-2'}`}
+              className={`flex min-w-0 shrink-0 items-center gap-1 ${showLocationInToolbar ? 'max-w-[55%]' : ''}`}
             >
               {!isMemberSession && (
                 <>
@@ -1616,12 +1598,14 @@ export function ChatInput({ variant = 'default', compact = false, sessionId, vis
                       aria-label={t('chat.composerTools')}
                       aria-haspopup="menu"
                       aria-expanded={plusMenuOpen}
-                      // Bordered on desktop so the tools affordance reads as a
-                      // control at rest, not only on hover — it sits next to
-                      // the permission chip, which is bordered too.
-                      className={`inline-flex items-center justify-center rounded-[var(--radius-md)] text-[var(--color-text-secondary)] transition-colors hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] ${isMobileComposer ? 'h-11 w-11' : 'h-8 w-8 border border-[var(--color-border)]'}`}
+                      // A quiet 28px square like every other toolbar control;
+                      // the open state keeps the hover fill so the menu reads as
+                      // anchored to it.
+                      className={`inline-flex items-center justify-center rounded-[var(--radius-sm)] text-[var(--color-text-tertiary)] transition-colors hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] ${
+                        plusMenuOpen ? 'bg-[var(--color-surface-hover)] text-[var(--color-text-primary)]' : ''
+                      } ${isMobileComposer ? 'h-11 w-11' : 'h-7 w-7'}`}
                     >
-                      <span className="material-symbols-outlined text-[18px]">add</span>
+                      <Plus size={isMobileComposer ? 18 : 16} strokeWidth={1.75} aria-hidden="true" />
                     </button>
 
                     {plusMenuOpen && (
@@ -1686,7 +1670,7 @@ export function ChatInput({ variant = 'default', compact = false, sessionId, vis
 
             <div
               data-testid="chat-input-toolbar-trailing"
-              className={`flex min-w-0 flex-1 items-center justify-end ${isMobileComposer ? 'gap-1' : 'gap-2'}`}
+              className="flex min-w-0 flex-1 items-center justify-end gap-1"
             >
               {!isMemberSession && activeTabId && (
                 <ContextUsageIndicator
@@ -1714,19 +1698,17 @@ export function ChatInput({ variant = 'default', compact = false, sessionId, vis
               )}
               <VoiceInputButton dictation={dictation} blocked={composerDisabled} mobile={isMobileComposer} />
               {!isMemberSession && !isActive && (hasRunningSubagents || hasRunningTeam) ? (
+                // Stopping background work while the composer can still send:
+                // the same ink stop circle as a running turn, beside the send key.
                 <Button
-                  variant="danger"
+                  variant="primary"
                   size="base"
                   shape="circle"
                   onClick={() => stopGeneration(activeTabId!)}
                   aria-label={t('common.stop')}
                   title={t('chat.stopTitle')}
                   className={`shrink-0 ${isMobileComposer ? 'h-11 w-11' : ''}`}
-                  icon={(
-                    <span className="material-symbols-outlined text-[18px]">
-                      stop
-                    </span>
-                  )}
+                  icon={<Square size={isMobileComposer ? 12 : 10} strokeWidth={2} fill="currentColor" aria-hidden="true" />}
                 />
               ) : null}
               {/* Same component, shape and icon as EmptySession's send button.
@@ -1741,9 +1723,13 @@ export function ChatInput({ variant = 'default', compact = false, sessionId, vis
                   location chip. The arrow points *up* — into the transcript the
                   message is being sent to — which is also what makes it read as
                   send without a word next to it. Dropping the label is why the
-                  name now lives only in `aria-label`, on both breakpoints. */}
+                  name now lives only in `aria-label`, on both breakpoints.
+
+                  Terracotta (`accent`) is the send key's alone; mid-turn the
+                  same circle turns ink (`primary`) with a filled square, so a
+                  running turn does not read as an error. */}
               <Button
-                variant={!isMemberSession && isActive ? 'danger' : 'accent'}
+                variant={!isMemberSession && isActive ? 'primary' : 'accent'}
                 size="base"
                 shape="circle"
                 onClick={!isMemberSession && isActive ? () => stopGeneration(activeTabId!) : handleSubmit}
@@ -1759,11 +1745,9 @@ export function ChatInput({ variant = 'default', compact = false, sessionId, vis
                 // 44px on touch is the platform minimum for a primary target;
                 // the desktop circle stays at the size's own 32px.
                 className={`shrink-0 ${isMobileComposer ? 'h-11 w-11' : ''}`}
-                icon={(
-                  <span className="material-symbols-outlined text-[18px]">
-                    {!isMemberSession && isActive ? 'stop' : 'arrow_upward'}
-                  </span>
-                )}
+                icon={!isMemberSession && isActive
+                  ? <Square data-icon="stop" size={isMobileComposer ? 12 : 10} strokeWidth={2} fill="currentColor" aria-hidden="true" />
+                  : <ArrowUp data-icon="send" size={isMobileComposer ? 18 : 16} strokeWidth={2} aria-hidden="true" />}
               />
             </div>
           </div>
diff --git a/desktop/src/components/chat/CodeViewer.test.tsx b/desktop/src/components/chat/CodeViewer.test.tsx
index a85666e8..19ca9e02 100644
--- a/desktop/src/components/chat/CodeViewer.test.tsx
+++ b/desktop/src/components/chat/CodeViewer.test.tsx
@@ -19,6 +19,21 @@ describe('CodeViewer', () => {
     expect(screen.getByRole('button', { name: '复制' })).toBeTruthy()
   })
 
+  it('heads the block with one quiet 30px line: language in mono, no uppercase tracking, a labelled ghost copy', () => {
+    const { container } = render(<CodeViewer code={'const a = 1'} language="ts" label="Input" />)
+    const header = container.querySelector('[data-code-viewer-chrome] > div') as HTMLElement
+    expect(header.className).toContain('h-[30px]')
+    expect(container.innerHTML).not.toMatch(/\buppercase\b|tracking-\[/)
+    expect(screen.getByText('ts').className).toContain('font-mono')
+    const copy = screen.getByRole('button', { name: 'Copy' })
+    // The icon is decoration; the word is what the button says.
+    expect(copy.textContent).toBe('Copy')
+    expect(copy.querySelector('svg.lucide-copy')).not.toBeNull()
+    expect(copy.className.split(/\s+/)).not.toContain('border')
+    // The card is a code block, so it takes the 8px block radius.
+    expect((container.firstElementChild as HTMLElement).className).toContain('rounded-[var(--radius-md)]')
+  })
+
   it('counts a single line in the singular', () => {
     render(<CodeViewer code="ls" language="bash" />)
     expect(screen.getByText('1 line')).toBeTruthy()
@@ -35,7 +50,9 @@ describe('CodeViewer', () => {
 
     const contentWrapper = container.querySelector('[data-code-viewer-content]') as HTMLElement | null
     expect(contentWrapper).toBeTruthy()
-    expect(contentWrapper?.style.padding).toBe('0.5rem 12px')
+    // Vertical only: the horizontal gutter is on each line (globals.css), the
+    // same for Prism and Shiki, so a hovered line spans the full width.
+    expect(contentWrapper?.style.padding).toBe('10px 0px 12px')
     expect(contentWrapper?.style.whiteSpace).toBe('pre')
     expect(contentWrapper?.style.wordBreak).toBe('normal')
     expect(contentWrapper?.style.fontSize).toBe('var(--code-viewer-font-size, 13px)')
diff --git a/desktop/src/components/chat/CodeViewer.tsx b/desktop/src/components/chat/CodeViewer.tsx
index 4539a8c2..c17f1a11 100644
--- a/desktop/src/components/chat/CodeViewer.tsx
+++ b/desktop/src/components/chat/CodeViewer.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState, type ComponentType, type CSSProperties } from 'react'
 import { Highlight, type PrismTheme } from 'prism-react-renderer'
+import { Check, Copy } from 'lucide-react'
 import { CopyButton } from '@/components/ui/CopyButton'
 import { useTranslation } from '../../i18n'
 
@@ -27,7 +28,9 @@ const warmPrismTheme: PrismTheme = {
     backgroundColor: 'transparent',
   },
   styles: [
-    { types: ['comment', 'prolog', 'doctype', 'cdata'], style: { color: 'var(--color-code-comment)', fontStyle: 'italic' as const } },
+    // Comments are told apart by colour alone: a slanted comment is often
+    // Chinese, and CJK has no italic — the browser just shears the glyphs.
+    { types: ['comment', 'prolog', 'doctype', 'cdata'], style: { color: 'var(--color-code-comment)' } },
     { types: ['string', 'attr-value', 'template-string'], style: { color: 'var(--color-code-string)' } },
     { types: ['keyword', 'selector', 'important', 'atrule'], style: { color: 'var(--color-code-keyword)' } },
     { types: ['function'], style: { color: 'var(--color-code-function)' } },
@@ -50,7 +53,7 @@ const warmShikiTheme = {
   fg: 'var(--color-code-fg)',
   bg: 'transparent',
   tokenColors: [
-    { scope: ['comment', 'punctuation.definition.comment'], settings: { foreground: 'var(--color-code-comment)', fontStyle: 'italic' } },
+    { scope: ['comment', 'punctuation.definition.comment'], settings: { foreground: 'var(--color-code-comment)' } },
     { scope: ['string', 'string.quoted', 'string.template', 'string.other.link'], settings: { foreground: 'var(--color-code-string)' } },
     { scope: ['string.regexp'], settings: { foreground: 'var(--color-primary-container)' } },
     { scope: ['keyword', 'keyword.control', 'storage', 'storage.type', 'storage.modifier'], settings: { foreground: 'var(--color-code-keyword)' } },
@@ -69,14 +72,14 @@ const warmShikiTheme = {
     { scope: ['meta.decorator', 'punctuation.decorator'], settings: { foreground: 'var(--color-code-type)' } },
     { scope: ['markup.inserted', 'punctuation.definition.inserted'], settings: { foreground: 'var(--color-code-inserted)' } },
     { scope: ['markup.deleted', 'punctuation.definition.deleted'], settings: { foreground: 'var(--color-code-deleted)' } },
-    { scope: ['markup.heading', 'entity.name.section'], settings: { foreground: 'var(--color-code-function)', fontStyle: 'bold' } },
-    { scope: ['markup.bold'], settings: { fontStyle: 'bold' } },
-    { scope: ['markup.italic'], settings: { fontStyle: 'italic' } },
+    // No bold: the mono face ships at 400 only, so "bold" is synthesized smear.
+    { scope: ['markup.heading', 'entity.name.section'], settings: { foreground: 'var(--color-code-function)' } },
   ],
 }
 
-const CODE_AREA_PADDING = '0.5rem 12px'
-const CODE_LINE_HEIGHT = 1.7
+/** Vertical only: the 14px gutter sits on each line (globals.css), so a hovered line is a full-width band. */
+const CODE_AREA_PADDING = '10px 0 12px'
+const CODE_LINE_HEIGHT = 1.65
 
 type ShikiHighlighterProps = {
   language: string
@@ -175,7 +178,7 @@ function PrismCodeContent({
               data-line-number={showLineNumbers ? index + 1 : undefined}
             >
               {showLineNumbers && (
-                <span className="mr-3 inline-block min-w-[2.5ch] select-none text-right text-[var(--color-text-tertiary)]">
+                <span className="mr-3 inline-block min-w-[2.5ch] select-none text-right text-[11px] text-[var(--color-text-tertiary)]">
                   {index + 1}
                 </span>
               )}
@@ -328,32 +331,29 @@ export function CodeViewer({
       className={
         isEmbedded
           ? 'overflow-hidden bg-[var(--color-code-bg)]'
-          : 'overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-code-bg)]'
+          : 'overflow-hidden rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-code-bg)]'
       }
     >
-      {/* Header */}
-      <div className="flex items-center justify-between border-b border-[var(--color-border)] bg-[var(--color-surface-container)] px-3 py-1.5 text-[11px] text-[var(--color-text-tertiary)]">
-        <div className="flex items-center gap-2.5">
+      {/* Header: one quiet 30px line on the code's own ground. */}
+      <div className="flex h-[30px] items-center justify-between gap-2 border-b border-[var(--color-border)] pl-3 pr-1.5 text-[11px] text-[var(--color-text-tertiary)]">
+        <div className="flex min-w-0 items-center gap-1.5">
           {label ? (
             <>
-              <span className="font-semibold uppercase tracking-[0.14em]">{label}</span>
-              <span aria-hidden="true">·</span>
+              <span className="shrink-0 font-medium text-[var(--color-text-secondary)]">{label}</span>
+              <span aria-hidden="true" className="h-[3px] w-[3px] shrink-0 rounded-full bg-[var(--color-text-tertiary)]" />
             </>
           ) : null}
-          <span className={`${label ? 'font-medium' : 'font-semibold'} uppercase tracking-[0.14em]`}>
-            {languageLabel}
-          </span>
-          <span>{lineCountLabel}</span>
+          <span className="truncate font-mono">{languageLabel}</span>
+          <span aria-hidden="true" className="h-[3px] w-[3px] shrink-0 rounded-full bg-[var(--color-text-tertiary)]" />
+          <span className="shrink-0 tabular-nums">{lineCountLabel}</span>
         </div>
         <CopyButton
           text={code}
           label={t('common.copy')}
           copiedLabel={t('common.copied')}
-          className={
-            isEmbedded
-              ? 'rounded-[var(--radius-sm)] px-2 py-1 text-[11px] text-[var(--color-text-tertiary)] transition-colors hover:bg-[var(--color-surface-container-high)] hover:text-[var(--color-text-primary)]'
-              : 'rounded-[var(--radius-sm)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] px-2 py-1 text-[11px] text-[var(--color-text-tertiary)] transition-colors hover:bg-[var(--color-surface-container-high)] hover:text-[var(--color-text-primary)]'
-          }
+          displayLabel={<><Copy size={12} strokeWidth={2} aria-hidden="true" />{t('common.copy')}</>}
+          displayCopiedLabel={<><Check size={12} strokeWidth={2} aria-hidden="true" />{t('common.copied')}</>}
+          className="inline-flex h-[22px] shrink-0 items-center gap-1 rounded-[var(--radius-xs)] px-1.5 text-[11px] text-[var(--color-text-tertiary)] transition-colors hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]"
         />
       </div>
 
@@ -369,8 +369,9 @@ export function CodeViewer({
       {/* Expand/collapse toggle */}
       {showExpandToggle && (
         <button
+          type="button"
           onClick={() => setExpanded((value) => !value)}
-          className="w-full border-t border-[var(--color-border)] bg-[var(--color-surface-container)] py-1.5 text-[10px] font-semibold uppercase tracking-[0.14em] text-[var(--color-text-tertiary)] transition-colors hover:bg-[var(--color-surface-container-high)] hover:text-[var(--color-text-primary)]"
+          className="flex h-[30px] w-full items-center justify-center border-t border-[var(--color-border)] text-[11px] font-medium text-[var(--color-text-tertiary)] transition-colors hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-border-focus)]"
         >
           {expanded
             ? t('codeViewer.collapse')
diff --git a/desktop/src/components/chat/ComposerCapabilityMenu.tsx b/desktop/src/components/chat/ComposerCapabilityMenu.tsx
index 5ff2bc17..354d1d7d 100644
--- a/desktop/src/components/chat/ComposerCapabilityMenu.tsx
+++ b/desktop/src/components/chat/ComposerCapabilityMenu.tsx
@@ -9,6 +9,7 @@ import { ComposerReferenceMenu, type ComposerReferenceMenuHandle } from '@/compo
 import type { NewComposerMention } from '@/lib/composerMentions'
 import type { ComposerReferenceCandidate } from '@/types/composerReference'
 import type { CapabilityAction, CapabilityIcon, CapabilityMenuItem, CapabilityMenuSection } from './capabilityMenuModel'
+import { COMPOSER_KBD } from './composerMenuStyles'
 
 type Props = {
   id: string
@@ -32,11 +33,11 @@ function descendants(items: CapabilityMenuItem[], path: string[] = []): Array<{
 
 function RowIcon({ icon, iconColor }: { icon: CapabilityIcon, iconColor?: string }) {
   if (icon.kind === 'image') {
-    return <img src={publicAssetPath(icon.src)} alt="" className="h-5 w-5 shrink-0 object-contain" />
+    return <img src={publicAssetPath(icon.src)} alt="" className="h-4 w-4 shrink-0 object-contain" />
   }
   if (icon.kind === 'slash') {
     return (
-      <span aria-hidden="true" className="flex h-5 w-5 shrink-0 items-center justify-center text-[15px] font-bold text-[var(--color-text-secondary)]">
+      <span aria-hidden="true" className="flex h-4 w-4 shrink-0 items-center justify-center font-mono text-[13px] text-[var(--color-text-tertiary)]">
         /
       </span>
     )
@@ -45,9 +46,9 @@ function RowIcon({ icon, iconColor }: { icon: CapabilityIcon, iconColor?: string
   return (
     <Icon
       aria-hidden="true"
-      className="h-5 w-5 shrink-0 text-[var(--color-text-secondary)]"
+      className="h-4 w-4 shrink-0 text-[var(--color-text-tertiary)]"
       style={iconColor ? { color: iconColor } : undefined}
-      strokeWidth={1.7}
+      strokeWidth={1.75}
     />
   )
 }
@@ -138,25 +139,25 @@ export function ComposerCapabilityMenu({ id, sections, cwd = '', referencesLoadi
     onMouseEnter={() => setHighlight(index)} onClick={() => activate(item)}
     trailing={item.switch ? <span className="-my-1 shrink-0" onClick={event => event.stopPropagation()}>
       <Switch size="sm" checked={item.switch.checked} disabled={item.switch.disabled} label={t('chat.capabilities.computerUseToggle')} labelHidden onChange={() => item.action && onAction(item.action)} />
-    </span> : item.children ? <ChevronRight aria-hidden="true" className="h-4 w-4 shrink-0 text-[var(--color-text-tertiary)]" /> : item.key === 'slash-commands' ? <kbd>/</kbd> : null}
+    </span> : item.children ? <ChevronRight aria-hidden="true" className="h-3.5 w-3.5 shrink-0 text-[var(--color-text-tertiary)]" /> : item.key === 'slash-commands' ? <kbd className={COMPOSER_KBD}>/</kbd> : null}
   />
   let offset = 0
-  return <div className={`absolute bottom-full left-0 z-[var(--z-dropdown)] mb-2 overflow-hidden rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] shadow-[var(--shadow-overlay)] ${mobile ? 'w-[min(360px,calc(100vw-32px))]' : showReferences ? 'w-[min(480px,calc(100vw-32px))]' : 'w-[min(288px,calc(100vw-32px))]'}`} onMouseDown={event => event.preventDefault()}>
-    <div className="flex items-center gap-2 border-b border-[var(--color-border-separator)] px-3 py-2">
-      {drillParent ? <IconButton icon={<ChevronLeft className="h-4 w-4" />} label={t('chat.capabilities.back')} size="xs" onClick={goBack} /> : null}
-      <Search aria-hidden="true" className="h-4 w-4 shrink-0 text-[var(--color-text-tertiary)]" />
+  return <div className={`absolute bottom-full left-0 z-[var(--z-dropdown)] mb-2 overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] shadow-[var(--shadow-dropdown)] ${mobile ? 'w-[min(360px,calc(100vw-32px))]' : showReferences ? 'w-[min(480px,calc(100vw-32px))]' : 'w-[min(288px,calc(100vw-32px))]'}`} onMouseDown={event => event.preventDefault()}>
+    <div className="flex h-10 items-center gap-2 border-b border-[var(--color-border)] px-3">
+      {drillParent ? <IconButton icon={<ChevronLeft size={14} strokeWidth={1.75} />} label={t('chat.capabilities.back')} size="xs" tone="muted" onClick={goBack} /> : null}
+      <Search aria-hidden="true" size={14} strokeWidth={1.75} className="shrink-0 text-[var(--color-text-tertiary)]" />
       <input autoFocus value={query} onChange={event => { setQuery(event.target.value); setHighlight(0) }} onKeyDown={handleKeyDown} onClick={event => event.currentTarget.focus()}
         placeholder={drillParent?.label ?? t('chat.capabilities.searchPlaceholder')} aria-label={t('chat.capabilities.searchPlaceholder')}
         role="combobox" aria-expanded="true" aria-controls={listId} aria-activedescendant={activeOptionId}
-        className="min-w-0 flex-1 bg-transparent text-sm text-[var(--color-text-primary)] outline-none placeholder:text-[var(--color-text-tertiary)]" />
+        className="min-w-0 flex-1 bg-transparent text-[13px] text-[var(--color-text-primary)] outline-none placeholder:text-[var(--color-text-tertiary)]" />
     </div>
     {showReferences ? <ComposerReferenceMenu key={path.join('/')} ref={referenceRef} id={listId} cwd={cwd} filter={query} embedded browseReferences={browseReferences} references={references} actions={actions}
       referencesLoading={referencesLoading} referencesError={referencesError} onSelect={selectMention} onActiveChange={setReferenceOptionId} /> :
-      <div ref={listRef} id={listId} role="listbox" aria-label={t('chat.composerTools')} className="max-h-[min(360px,50vh)] overflow-y-auto p-1.5">
+      <div ref={listRef} id={listId} role="listbox" aria-label={t('chat.composerTools')} className="max-h-[min(360px,50vh)] overflow-y-auto p-1">
         {drillParent ? items.map(renderRow) : sections.map(section => {
           const start = offset
           offset += section.items.length
-          return <div key={section.id} role="group" aria-label={section.title} className="border-b border-[var(--color-border-separator)] py-1 last:border-b-0">{section.items.map((item, index) => renderRow(item, start + index))}</div>
+          return <div key={section.id} role="group" aria-label={section.title} className="border-b border-[var(--color-border)] py-1 first:pt-0 last:border-b-0 last:pb-0">{section.items.map((item, index) => renderRow(item, start + index))}</div>
         })}
       </div>}
   </div>
diff --git a/desktop/src/components/chat/ComposerDropOverlay.tsx b/desktop/src/components/chat/ComposerDropOverlay.tsx
index 825cb101..46ee82e0 100644
--- a/desktop/src/components/chat/ComposerDropOverlay.tsx
+++ b/desktop/src/components/chat/ComposerDropOverlay.tsx
@@ -1,3 +1,5 @@
+import { Upload } from 'lucide-react'
+
 type ComposerDropOverlayProps = {
   title: string
   description: string
@@ -11,15 +13,15 @@ export function ComposerDropOverlay({ title, description, testId }: ComposerDrop
       // Opaque tokens throughout: `--color-brand/45` and `/88` compile to a
       // color function the Safari 15 WebView drops, which left the drop target
       // with no edge and a fully transparent scrim there.
-      className="composer-drop-overlay pointer-events-none absolute inset-0 z-[var(--z-scrim)] flex items-center justify-center rounded-[inherit] border border-[var(--color-primary-fixed-dim)] bg-[var(--color-surface-glass)] p-4 backdrop-blur-[2px]"
+      className="composer-drop-overlay pointer-events-none absolute inset-0 z-[var(--z-scrim)] flex items-center justify-center rounded-[inherit] border border-dashed border-[var(--color-outline)] bg-[var(--color-surface-glass)] p-4 backdrop-blur-[2px]"
       aria-hidden="true"
     >
-      <div className="flex max-w-[280px] items-center gap-3 rounded-[var(--radius-md)] border border-[var(--color-primary-fixed-dim)] bg-[var(--color-surface-container-low)] px-4 py-3 text-left shadow-[var(--shadow-overlay)]">
-        <span className="material-symbols-outlined flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[var(--color-brand-soft)] text-[20px] text-[var(--color-brand)]">
-          upload_file
+      <div className="flex max-w-[280px] items-center gap-3 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] px-4 py-3 text-left shadow-[var(--shadow-dropdown)]">
+        <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-[var(--radius-md)] bg-[var(--color-surface-container)] text-[var(--color-text-secondary)]">
+          <Upload size={16} strokeWidth={1.75} />
         </span>
         <span className="min-w-0">
-          <span className="block text-sm font-semibold leading-5 text-[var(--color-text-primary)]">{title}</span>
+          <span className="block text-[13px] font-medium leading-5 text-[var(--color-text-primary)]">{title}</span>
           <span className="block text-xs leading-5 text-[var(--color-text-tertiary)]">{description}</span>
         </span>
       </div>
diff --git a/desktop/src/components/chat/ComposerReferenceDetail.tsx b/desktop/src/components/chat/ComposerReferenceDetail.tsx
index 8c928111..75f89184 100644
--- a/desktop/src/components/chat/ComposerReferenceDetail.tsx
+++ b/desktop/src/components/chat/ComposerReferenceDetail.tsx
@@ -1,3 +1,4 @@
+import { Box, Puzzle } from 'lucide-react'
 import { Modal } from '@/components/ui/Modal'
 import { useTranslation } from '@/i18n'
 import { safeMentionIcon, type ComposerMention } from '@/lib/composerMentions'
@@ -5,14 +6,17 @@ import { safeMentionIcon, type ComposerMention } from '@/lib/composerMentions'
 export function ComposerReferenceDetail({ mention, onClose }: { mention: ComposerMention | null, onClose: () => void }) {
   const t = useTranslation()
   const icon = safeMentionIcon(mention?.icon)
+  const KindIcon = mention?.kind === 'plugin' ? Puzzle : Box
   return <Modal open={!!mention} onClose={onClose} title={mention?.label || t('chat.referenceDetails')} width={440}>
     {mention && <div className="space-y-4 pb-1">
-      <div className="flex items-center gap-2 text-xs text-[var(--color-text-secondary)]">
-        {icon ? <img src={`${import.meta.env.BASE_URL}${icon.slice(1)}`} alt="" className="h-6 w-6 object-contain" /> : <span aria-hidden="true" className="material-symbols-outlined text-xl">{mention.kind === 'plugin' ? 'extension' : 'deployed_code'}</span>}
+      <div className="flex items-center gap-2 text-xs text-[var(--color-text-tertiary)]">
+        {icon
+          ? <img src={`${import.meta.env.BASE_URL}${icon.slice(1)}`} alt="" className="h-5 w-5 object-contain" />
+          : <KindIcon aria-hidden="true" size={16} strokeWidth={1.75} />}
         <span>{t(mention.kind === 'plugin' ? 'chat.referencePlugins' : 'chat.referenceSkills')}</span>
       </div>
-      <p className="whitespace-pre-wrap text-sm leading-6 text-[var(--color-text-primary)]">{mention.description || mention.label}</p>
-      {mention.id && <p className="break-words text-xs text-[var(--color-text-tertiary)]">{mention.id}</p>}
+      <p className="whitespace-pre-wrap text-[13px] leading-6 text-[var(--color-text-primary)]">{mention.description || mention.label}</p>
+      {mention.id && <p className="break-words font-mono text-[11px] text-[var(--color-text-tertiary)]">{mention.id}</p>}
     </div>}
   </Modal>
 }
diff --git a/desktop/src/components/chat/ComposerReferenceMenu.tsx b/desktop/src/components/chat/ComposerReferenceMenu.tsx
index 3c49d367..2e9c75e8 100644
--- a/desktop/src/components/chat/ComposerReferenceMenu.tsx
+++ b/desktop/src/components/chat/ComposerReferenceMenu.tsx
@@ -12,6 +12,7 @@ import { safeMentionIcon, type NewComposerMention } from '@/lib/composerMentions
 import { publicAssetPath } from '@/lib/publicAsset'
 import type { ComposerReferenceCandidate } from '@/types/composerReference'
 import { referenceFallbackIcon, skillSourceLabelKey } from './referencePresentation'
+import { COMPOSER_KBD, COMPOSER_MENU_SECTION } from './composerMenuStyles'
 
 type FileEntry = { name: string, path: string, isDirectory: boolean, relativePath?: string }
 type Row = { key: string, label: string, description: string, searchTerms?: string[], contentMatch?: boolean, session?: SessionCandidate, shortId?: string, source?: string, mention?: NewComposerMention, file?: FileEntry, icon?: ReactNode, onSelect?: () => void }
@@ -160,14 +161,14 @@ export const ComposerReferenceMenu = forwardRef<ComposerReferenceMenuHandle, Pro
 
   let offset = 0
   return (
-    <div className={embedded ? 'min-w-0' : `absolute bottom-full left-0 w-full z-[var(--z-dropdown)] mb-2 overflow-hidden rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] shadow-[var(--shadow-overlay)] `} onMouseDown={event => event.preventDefault()}>
-      <div ref={listRef} id={id} role="listbox" aria-label={t('chat.references')} aria-busy={loading || referencesLoading || sessionLoading} className="min-w-0 max-h-[min(320px,45vh)] overflow-y-auto p-1.5">
+    <div className={embedded ? 'min-w-0' : `absolute bottom-full left-0 w-full z-[var(--z-dropdown)] mb-2 overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] shadow-[var(--shadow-dropdown)] `} onMouseDown={event => event.preventDefault()}>
+      <div ref={listRef} id={id} role="listbox" aria-label={t('chat.references')} aria-busy={loading || referencesLoading || sessionLoading} className="min-w-0 max-h-[min(320px,45vh)] overflow-y-auto p-1">
         {visibleGroups.map(group => {
           const start = offset
           offset += group.rows.length
           if (!group.rows.length) return null
           return <div key={group.kind} role="group" aria-label={group.label}>
-            {!isSearching ? <div className="px-3 pb-1 pt-2 text-xs font-medium text-[var(--color-text-tertiary)]">{group.label}</div> : null}
+            {!isSearching ? <div className={COMPOSER_MENU_SECTION}>{group.label}</div> : null}
             {group.rows.map((row, position) => {
               const index = start + position
               const Icon = referenceFallbackIcon(row.file ? (row.file.isDirectory ? 'directory' : 'file') : row.mention?.kind ?? 'skill')
@@ -179,23 +180,23 @@ export const ComposerReferenceMenu = forwardRef<ComposerReferenceMenuHandle, Pro
                   if ((event.target as Element).closest('[data-navigate-directory]')) navigate(row)
                   else select(row)
                 }}
-                icon={row.icon ?? (row.mention?.icon ? <img src={publicAssetPath(row.mention.icon)} alt="" className="h-5 w-5 shrink-0 object-contain" /> : <Icon aria-hidden="true" className="h-5 w-5 shrink-0 text-[var(--color-text-secondary)]" strokeWidth={1.7} />)}
+                icon={row.icon ?? (row.mention?.icon ? <img src={publicAssetPath(row.mention.icon)} alt="" className="h-4 w-4 shrink-0 object-contain" /> : <Icon aria-hidden="true" className="h-4 w-4 shrink-0 text-[var(--color-text-tertiary)]" strokeWidth={1.75} />)}
                 trailing={<>
                   {sourceLabel ? <span className="shrink-0 text-xs text-[var(--color-text-tertiary)]">{t(sourceLabel)}</span> : null}
-                  {row.file?.isDirectory ? <span data-navigate-directory title={t('fileSearch.openFolder')} className="-my-2 -mr-2 flex h-8 w-8 shrink-0 items-center justify-center"><ChevronRight aria-hidden="true" className="h-4 w-4 text-[var(--color-text-tertiary)]" /></span> : null}
+                  {row.file?.isDirectory ? <span data-navigate-directory title={t('fileSearch.openFolder')} className="-my-1.5 -mr-1.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-[var(--radius-sm)] hover:bg-[var(--color-surface-selected)]"><ChevronRight aria-hidden="true" className="h-3.5 w-3.5 text-[var(--color-text-tertiary)]" /></span> : null}
                 </>}
               />
             })}
           </div>
         })}
-        {loading || referencesLoading || sessionLoading ? <div role="status" className="px-3 py-2 text-xs text-[var(--color-text-tertiary)]">{t('fileSearch.searching')}</div> : null}
-        {currentResult?.error ? <div role="alert" className="px-3 py-2 text-xs text-[var(--color-error)]">{t(currentResult.error === 'denied' ? 'fileSearch.accessDenied' : 'fileSearch.loadFailed')}</div> : null}
-        {sessionError ? <div role="alert" className="px-3 py-2 text-xs text-[var(--color-error)]">{t('chat.sessionReferencesLoadFailed')}</div> : null}
-        {referencesError ? <div role="alert" className="px-3 py-2 text-xs text-[var(--color-error)]">{t('chat.referencesLoadFailed')}</div> : null}
-        {!rows.length && !loading && !referencesLoading && !sessionLoading && !sessionError && !currentResult?.error && !referencesError ? <div className="px-3 py-3 text-xs text-[var(--color-text-tertiary)]">{t('chat.referencesEmpty')}</div> : null}
+        {loading || referencesLoading || sessionLoading ? <div role="status" className="px-2 py-2 text-xs text-[var(--color-text-tertiary)]">{t('fileSearch.searching')}</div> : null}
+        {currentResult?.error ? <div role="alert" className="px-2 py-2 text-xs text-[var(--color-error)]">{t(currentResult.error === 'denied' ? 'fileSearch.accessDenied' : 'fileSearch.loadFailed')}</div> : null}
+        {sessionError ? <div role="alert" className="px-2 py-2 text-xs text-[var(--color-error)]">{t('chat.sessionReferencesLoadFailed')}</div> : null}
+        {referencesError ? <div role="alert" className="px-2 py-2 text-xs text-[var(--color-error)]">{t('chat.referencesLoadFailed')}</div> : null}
+        {!rows.length && !loading && !referencesLoading && !sessionLoading && !sessionError && !currentResult?.error && !referencesError ? <div className="px-2 py-3 text-xs text-[var(--color-text-tertiary)]">{t('chat.referencesEmpty')}</div> : null}
       </div>
       {!isSearching && !embedded ? <div className="border-t border-[var(--color-border)] px-3 py-2 text-xs text-[var(--color-text-tertiary)]">{t('chat.referenceSearchHint')}</div> : null}
-      {!compact && !embedded ? <div className="flex items-center gap-2 border-t border-[var(--color-border)] px-4 py-2 text-[10px] text-[var(--color-text-tertiary)]"><kbd>↑↓</kbd><span>{t('fileSearch.navigate')}</span><kbd className="ml-2">Enter / Tab</kbd><span>{t('fileSearch.select')}</span><kbd className="ml-2">→</kbd><span>{t('fileSearch.open')}</span><kbd className="ml-2">Esc</kbd><span>{t('fileSearch.close')}</span></div> : null}
+      {!compact && !embedded ? <div className="flex items-center gap-1.5 border-t border-[var(--color-border)] px-3 py-2 text-[11px] text-[var(--color-text-tertiary)]"><kbd className={COMPOSER_KBD}>↑↓</kbd><span>{t('fileSearch.navigate')}</span><kbd className={`${COMPOSER_KBD} ml-2`}>Enter / Tab</kbd><span>{t('fileSearch.select')}</span><kbd className={`${COMPOSER_KBD} ml-2`}>→</kbd><span>{t('fileSearch.open')}</span><kbd className={`${COMPOSER_KBD} ml-2`}>Esc</kbd><span>{t('fileSearch.close')}</span></div> : null}
     </div>
   )
 })
diff --git a/desktop/src/components/chat/ComposerSuggestionRow.tsx b/desktop/src/components/chat/ComposerSuggestionRow.tsx
index 2b67fe96..cc7adcee 100644
--- a/desktop/src/components/chat/ComposerSuggestionRow.tsx
+++ b/desktop/src/components/chat/ComposerSuggestionRow.tsx
@@ -10,19 +10,23 @@ type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
   selected?: boolean
 }
 
-/** Shared dense row for composer capability and reference suggestions. */
+/**
+ * Shared dense row for composer capability and reference suggestions — the
+ * 「素」 menu item: 32px minimum, the small row corner, 13px label, and the
+ * hover fill doubling as the keyboard highlight.
+ */
 export const ComposerSuggestionRow = forwardRef<HTMLDivElement, Props>(function ComposerSuggestionRow({
   id, label, description, details, icon, trailing, selected = false, className = '', ...rest
 }, ref) {
   return <div ref={ref} id={id} role="option" tabIndex={-1} aria-selected={selected}
     aria-labelledby={`${id}-label`} aria-describedby={description || details ? `${id}-description` : undefined}
-    className={`flex min-w-0 cursor-default items-center gap-3 rounded-[var(--radius-md)] px-3 py-2 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] ${selected ? 'bg-[var(--color-surface-hover)]' : 'hover:bg-[var(--color-surface-hover)]'} ${className}`} {...rest}>
+    className={`flex min-h-8 min-w-0 cursor-default items-center gap-2.5 rounded-[var(--radius-sm)] px-2 py-1.5 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] ${selected ? 'bg-[var(--color-surface-hover)]' : 'hover:bg-[var(--color-surface-hover)]'} ${className}`} {...rest}>
     {icon}
-    {details ? <span className="min-w-0 flex-1 space-y-1">
-      <span id={`${id}-label`} title={label} className="block truncate text-sm font-medium text-[var(--color-text-primary)]">{label}</span>
+    {details ? <span className="min-w-0 flex-1 space-y-0.5">
+      <span id={`${id}-label`} title={label} className="block truncate text-[13px] font-medium text-[var(--color-text-primary)]">{label}</span>
       <span id={`${id}-description`} className="flex min-w-0 items-center gap-2 text-[11px] leading-4 text-[var(--color-text-tertiary)]">{details}</span>
     </span> : <>
-    <span id={`${id}-label`} className={`${description ? 'max-w-[45%] shrink-0' : 'min-w-0 flex-1'} truncate text-sm font-medium text-[var(--color-text-primary)]`}>{label}</span>
+    <span id={`${id}-label`} className={`${description ? 'max-w-[45%] shrink-0' : 'min-w-0 flex-1'} truncate text-[13px] font-medium text-[var(--color-text-primary)]`}>{label}</span>
     {description ? <span id={`${id}-description`} className="min-w-0 flex-1 truncate text-xs text-[var(--color-text-tertiary)]">{description}</span> : null}
     </>}
     {trailing}
diff --git a/desktop/src/components/chat/ContextUsageDetails.tsx b/desktop/src/components/chat/ContextUsageDetails.tsx
index 36f33198..d82ee682 100644
--- a/desktop/src/components/chat/ContextUsageDetails.tsx
+++ b/desktop/src/components/chat/ContextUsageDetails.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react'
 import { ChevronRight } from 'lucide-react'
+import { Badge } from '@/components/ui/Badge'
 import {
   formatCacheHitRate,
   formatCompactTokens,
@@ -85,7 +86,7 @@ function UsageMeter({
       aria-valuemin={0}
       aria-valuemax={100}
       aria-valuenow={Math.round(percent)}
-      className="h-[6px] overflow-hidden rounded-full bg-[var(--color-surface-hover)]"
+      className="h-1.5 overflow-hidden rounded-full bg-[var(--color-surface-container)]"
       data-testid="context-segmented-bar"
     >
       <div
@@ -110,14 +111,14 @@ function SessionStatGrid({
   labels: ContextUsageDetailsProps['labels']
   density: 'compact' | 'comfortable'
 }) {
-  const labelClass = density === 'compact'
-    ? 'text-[12.5px] text-[var(--color-text-tertiary)]'
-    : 'text-xs text-[var(--color-text-tertiary)]'
-  const valueClass = 'mt-[3px] font-mono text-sm text-[var(--color-text-primary)]'
+  const labelClass = 'truncate text-xs text-[var(--color-text-tertiary)]'
+  const valueClass = density === 'compact'
+    ? 'mt-0.5 font-mono text-[13px] tabular-nums text-[var(--color-text-primary)]'
+    : 'mt-0.5 font-mono text-sm tabular-nums text-[var(--color-text-primary)]'
 
   return (
-    <div className="mt-4 grid grid-cols-3 gap-3">
-      <div>
+    <div className="mt-3 grid grid-cols-3 gap-3 border-t border-[var(--color-border)] pt-3">
+      <div className="min-w-0">
         <div className={labelClass}>{labels.sessionSpeed}</div>
         <div className={valueClass} data-testid="session-speed">
           {formatTokensPerSecond(stats.tokensPerSecond ?? 0)}
@@ -126,13 +127,13 @@ function SessionStatGrid({
           )}
         </div>
       </div>
-      <div>
+      <div className="min-w-0">
         <div className={labelClass}>{labels.sessionCacheHit}</div>
         <div className={valueClass} data-testid="session-cache-hit">
           {stats.cacheHitRate === null ? '--' : formatCacheHitRate(stats.cacheHitRate)}
         </div>
       </div>
-      <div>
+      <div className="min-w-0">
         <div className={labelClass}>{labels.sessionCost}</div>
         <div className={`${valueClass} truncate`} data-testid="session-cost" title={stats.costDisplay}>
           {stats.costDisplay}
@@ -154,7 +155,7 @@ function CategoryBars({
   if (categories.length === 0) return null
 
   return (
-    <div className={density === 'compact' ? 'mt-3 flex flex-col gap-3' : 'mt-4 space-y-3'}>
+    <div className={density === 'compact' ? 'mt-2 flex flex-col gap-2.5' : 'mt-3 space-y-3'}>
       {categories.map((category) => {
         const percent = maxTokens > 0
           ? Math.max(0.5, Math.min(100, (category.tokens / maxTokens) * 100))
@@ -162,14 +163,14 @@ function CategoryBars({
         return (
           <div key={category.name}>
             <div className={`flex items-baseline justify-between gap-3 ${density === 'compact' ? '' : 'text-xs'}`}>
-              <span className={`min-w-0 truncate ${density === 'compact' ? 'text-[13.5px] text-[var(--color-text-primary)]' : 'text-[var(--color-text-secondary)]'}`}>
+              <span className={`min-w-0 truncate ${density === 'compact' ? 'text-[13px] text-[var(--color-text-primary)]' : 'text-[var(--color-text-secondary)]'}`}>
                 {category.name}
               </span>
-              <span className={`shrink-0 font-mono ${density === 'compact' ? 'text-[13px] text-[var(--color-text-secondary)]' : 'text-[var(--color-text-tertiary)]'}`}>
+              <span className={`shrink-0 font-mono tabular-nums ${density === 'compact' ? 'text-xs text-[var(--color-text-secondary)]' : 'text-[var(--color-text-tertiary)]'}`}>
                 {formatNumber(category.tokens)}
               </span>
             </div>
-            <div className={`overflow-hidden rounded-full bg-[var(--color-surface-hover)] ${density === 'compact' ? 'mt-[7px] h-[3px]' : 'mt-1.5 h-1.5'}`}>
+            <div className={`mt-1.5 overflow-hidden rounded-full bg-[var(--color-surface-container)] ${density === 'compact' ? 'h-[3px]' : 'h-1.5'}`}>
               <div
                 className="h-full rounded-full"
                 style={{ width: `${percent}%`, backgroundColor: category.color || 'var(--color-brand)' }}
@@ -207,12 +208,11 @@ function ReadyBody({
   return (
     <>
       <div className="mt-3 flex items-baseline justify-between gap-3">
-        <div className="text-[12.5px] text-[var(--color-text-tertiary)]">{labels.remaining}</div>
-        {/* The headline serif carries the one large number on the panel —
-            the same treatment the handoff gives every hero statistic. */}
+        <div className="text-xs text-[var(--color-text-tertiary)]">{labels.remaining}</div>
+        {/* The one large number on the panel: 26 semibold with tabular figures,
+            in the body face — mono never pairs with semibold. */}
         <div
-          className="shrink-0 text-[27px] font-bold leading-none text-[var(--color-text-primary)]"
-          style={{ fontFamily: 'var(--font-headline)' }}
+          className="shrink-0 text-[26px] font-semibold leading-none tabular-nums text-[var(--color-text-primary)]"
           data-testid="context-remaining"
         >
           {remainingLabel}
@@ -225,7 +225,7 @@ function ReadyBody({
 
       {/* This timestamp describes the window composition, so it sits with the used/window figures
           rather than next to the live session totals. */}
-      <div className="mt-2 text-[11px] text-[var(--color-text-tertiary)]">
+      <div className="mt-2 text-xs tabular-nums text-[var(--color-text-tertiary)]">
         {labels.used} {formatNumber(usedTokens)}
         {' · '}
         {labels.window} {maxTokens > 0 ? formatNumber(maxTokens) : '--'}
@@ -242,21 +242,24 @@ function ReadyBody({
       )}
 
       {categories.length > 0 && (
-        <div className="mt-3 border-t border-[var(--color-border)] pt-2.5">
+        <div className="mt-3 border-t border-[var(--color-border)] pt-2">
           <button
             type="button"
             aria-expanded={breakdownOpen}
             onClick={() => setBreakdownOpen((open) => !open)}
             data-testid="context-breakdown-toggle"
-            className="flex w-full items-center justify-between gap-3 rounded-[var(--radius-sm)] text-left text-[12.5px] text-[var(--color-text-secondary)] transition-colors duration-150 hover:text-[var(--color-text-primary)]"
+            className="flex min-h-7 w-full items-center justify-between gap-3 rounded-[var(--radius-sm)] text-left text-xs text-[var(--color-text-secondary)] transition-colors duration-150 hover:text-[var(--color-text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]"
           >
             <span className="flex items-center gap-1.5">
               <ChevronRight
-                className={`h-3.5 w-3.5 transition-transform duration-150 ${breakdownOpen ? 'rotate-90' : ''}`}
+                size={14}
+                strokeWidth={1.75}
+                aria-hidden="true"
+                className={`text-[var(--color-text-tertiary)] transition-transform duration-150 ${breakdownOpen ? 'rotate-90' : ''}`}
               />
               {labels.breakdown}
             </span>
-            <span className="shrink-0 font-mono text-[11px] text-[var(--color-text-tertiary)]">
+            <span className="shrink-0 font-mono text-[11px] tabular-nums text-[var(--color-text-tertiary)]">
               {formatCompactTokens(usedTokens)}
             </span>
           </button>
@@ -305,8 +308,8 @@ export function ContextUsageDetails({
     />
   ) : (
     <div className={variant === 'sheet'
-      ? 'mt-5 rounded-[var(--radius-lg)] bg-[var(--color-surface-container)] p-4 text-sm leading-6 text-[var(--color-text-secondary)]'
-      : 'mt-4 text-sm leading-6 text-[var(--color-text-secondary)]'
+      ? 'mt-4 rounded-[var(--radius-md)] bg-[var(--color-surface-container)] p-4 text-[13px] leading-6 text-[var(--color-text-secondary)]'
+      : 'mt-3 text-[13px] leading-6 text-[var(--color-text-secondary)]'
     }>
       {statusMessage}
     </div>
@@ -317,9 +320,7 @@ export function ContextUsageDetails({
     return (
       <div data-testid="context-usage-details" data-variant="sheet">
         {estimate && status === 'ready' && (
-          <span className="inline-flex rounded-full border border-[var(--color-border)] px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.08em] text-[var(--color-text-tertiary)]">
-            {labels.estimate}
-          </span>
+          <Badge variant="outline">{labels.estimate}</Badge>
         )}
         {body}
       </div>
@@ -330,17 +331,16 @@ export function ContextUsageDetails({
     <div data-testid="context-usage-details" data-variant="popover">
       <div className="flex items-start justify-between gap-3">
         <div className="min-w-0">
-          <div className="text-xs font-semibold tracking-[0.08em] text-[var(--color-text-tertiary)]">
+          <div className="text-xs font-semibold text-[var(--color-text-tertiary)]">
             {labels.title}
           </div>
-          <div className="mt-1 truncate text-base font-bold text-[var(--color-text-primary)]">
+          {/* Model ids are identifiers, so mono — at the regular weight. */}
+          <div className="mt-0.5 truncate font-mono text-[13px] text-[var(--color-text-primary)]">
             {modelLabel}
           </div>
         </div>
         {estimate && status === 'ready' && (
-          <span className="shrink-0 rounded-full border border-[var(--color-border)] px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.08em] text-[var(--color-text-tertiary)]">
-            {labels.estimate}
-          </span>
+          <Badge variant="outline">{labels.estimate}</Badge>
         )}
       </div>
       {body}
diff --git a/desktop/src/components/chat/ContextUsageIndicator.test.tsx b/desktop/src/components/chat/ContextUsageIndicator.test.tsx
index 8be4eacc..6a99699a 100644
--- a/desktop/src/components/chat/ContextUsageIndicator.test.tsx
+++ b/desktop/src/components/chat/ContextUsageIndicator.test.tsx
@@ -1,5 +1,5 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { act, cleanup, fireEvent, render, screen, waitFor, within } from '@testing-library/react'
 import '@testing-library/jest-dom'
 
 const { sessionsApiMock, runtimeMocks } = vi.hoisted(() => ({
@@ -630,13 +630,13 @@ describe('ContextUsageIndicator touch target', () => {
   // `compact` is also true on the desktop composer, which narrows for the right
   // panel rather than for touch — so it cannot be the signal that grows this
   // trigger. On the phone shell it sits between two 44px buttons.
-  it('keeps the desktop trigger at 32px even when the composer is compact', () => {
+  it('keeps the desktop trigger at the 28px toolbar height even when the composer is compact', () => {
     sessionsApiMock.getInspection.mockResolvedValue(baseInspection)
 
     render(<ContextUsageIndicator sessionId="session-1" chatState="idle" messageCount={1} compact />)
 
     const trigger = screen.getByTestId('context-usage-indicator')
-    expect(trigger).toHaveClass('h-8', 'w-8')
+    expect(trigger).toHaveClass('h-7')
     expect(trigger).not.toHaveClass('h-11')
   })
 
@@ -648,7 +648,7 @@ describe('ContextUsageIndicator touch target', () => {
 
     const trigger = screen.getByTestId('context-usage-indicator')
     expect(trigger).toHaveClass('h-11', 'w-11')
-    expect(trigger).not.toHaveClass('h-8')
+    expect(trigger).not.toHaveClass('h-7')
   })
 
   it('leaves the desktop shell alone on a narrow Electron window', () => {
@@ -658,7 +658,7 @@ describe('ContextUsageIndicator touch target', () => {
 
     render(<ContextUsageIndicator sessionId="session-1" chatState="idle" messageCount={1} compact />)
 
-    expect(screen.getByTestId('context-usage-indicator')).toHaveClass('h-8')
+    expect(screen.getByTestId('context-usage-indicator')).toHaveClass('h-7')
   })
 })
 
@@ -702,8 +702,13 @@ describe('ContextUsageIndicator presentation', () => {
       expect(screen.getByTestId('context-usage-indicator')).toHaveTextContent('21%')
     })
     const trigger = screen.getByTestId('context-usage-indicator')
-    expect(trigger).toHaveClass('h-8', 'w-8')
-    expect(trigger.querySelector('.font-mono')).not.toBeInTheDocument()
+    expect(trigger).toHaveClass('h-7')
+    // The desktop toolbar shows the ring and the percentage side by side; the
+    // number is visible text in mono 11, not just the accessible name.
+    const percent = within(trigger).getByText('21%')
+    expect(percent).not.toHaveClass('sr-only')
+    expect(percent).toHaveClass('font-mono', 'text-[11px]')
+    expect(within(trigger).getByTestId('context-usage-ring')).toBeInTheDocument()
     expect(screen.queryByTestId('context-usage-popover')).not.toBeInTheDocument()
 
     fireEvent.click(screen.getByTestId('context-usage-indicator'))
diff --git a/desktop/src/components/chat/ContextUsageIndicator.tsx b/desktop/src/components/chat/ContextUsageIndicator.tsx
index 5b400140..343e18d5 100644
--- a/desktop/src/components/chat/ContextUsageIndicator.tsx
+++ b/desktop/src/components/chat/ContextUsageIndicator.tsx
@@ -98,6 +98,53 @@ function isDocumentVisible() {
   return typeof document === 'undefined' || document.visibilityState !== 'hidden'
 }
 
+/**
+ * The toolbar's context ring: an outline-colored track with an arc drawn to
+ * `percentage`. `null` means no reading yet (track only); `loading` swaps the
+ * arc for a quarter-turn spinner on the same track, so the control keeps its
+ * footprint while the first inspection is in flight.
+ */
+function ContextRing({
+  size,
+  loading,
+  percentage,
+  color,
+}: {
+  size: number
+  loading: boolean
+  percentage: number | null
+  color: string
+}) {
+  const radius = 6.25
+  const circumference = 2 * Math.PI * radius
+  const arc = loading ? 0.25 : percentage === null ? 0 : Math.max(0, Math.min(100, percentage)) / 100
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      aria-hidden="true"
+      data-testid="context-usage-ring"
+      className={`shrink-0 -rotate-90 ${loading ? 'motion-safe:animate-spin' : ''}`}
+    >
+      <circle cx="8" cy="8" r={radius} fill="none" stroke="var(--color-outline)" strokeWidth="2.5" />
+      {arc > 0 && (
+        <circle
+          cx="8"
+          cy="8"
+          r={radius}
+          fill="none"
+          stroke={loading ? 'var(--color-text-tertiary)' : color}
+          strokeWidth="2.5"
+          strokeLinecap="round"
+          strokeDasharray={`${circumference} ${circumference}`}
+          strokeDashoffset={circumference * (1 - arc)}
+        />
+      )}
+    </svg>
+  )
+}
+
 function shouldFetchContext(
   sessionId: string | undefined,
   draft: boolean,
@@ -388,16 +435,13 @@ export function ContextUsageIndicator({
   const percentage = displayContext ? Math.max(0, Math.min(100, displayContext.percentage)) : 0
   const usedTokens = displayContext?.totalTokens ?? 0
   const maxTokens = displayContext?.rawMaxTokens ?? 0
+  // Neutral ink until the window is genuinely tight; only then does the ring
+  // borrow a status color (warning near the limit, error at it).
   const strokeColor = percentage >= 90
     ? 'var(--color-error)'
     : percentage >= 75
       ? 'var(--color-warning)'
-      : 'var(--color-secondary)'
-  const ringStyle = {
-    background: displayContext
-      ? `conic-gradient(${strokeColor} ${percentage * 3.6}deg, var(--color-surface-container-high) 0deg)`
-      : 'var(--color-surface-container-high)',
-  }
+      : 'var(--color-text-tertiary)'
   const displayPercent = displayContext ? formatPercent(percentage) : '--'
   const displayInspectionModel = !context || contextDataSessionIdRef.current === sessionId
     ? inspectionModel
@@ -542,31 +586,27 @@ export function ContextUsageIndicator({
         onClick={handleTriggerClick}
         title={t('contextIndicator.title')}
         data-testid="context-usage-indicator"
-        className={`group grid shrink-0 place-items-center rounded-full bg-transparent text-[var(--color-text-secondary)] transition-[background-color,color] duration-150 ease-out hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface-container-lowest)] ${
-          isMobileBrowser ? 'h-11 w-11' : 'h-8 w-8'
-        } ${detailsOpen ? 'bg-[var(--color-surface-hover)] text-[var(--color-text-primary)]' : ''}`}
+        // Desktop: a 28px toolbar control showing the ring and the percentage
+        // side by side. The phone shell keeps a 44px square touch target and
+        // leaves the number to the accessible name — it sits between two
+        // other 44px buttons and has no width to spare.
+        className={`inline-flex shrink-0 items-center rounded-[var(--radius-sm)] bg-transparent transition-colors duration-150 ease-out hover:bg-[var(--color-surface-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] ${
+          isMobileBrowser ? 'h-11 w-11 justify-center' : 'h-7 gap-1.5 px-1.5'
+        } ${detailsOpen ? 'bg-[var(--color-surface-hover)]' : ''}`}
       >
-        <span className={`relative grid shrink-0 place-items-center rounded-full ${isMobileBrowser ? 'h-[22px] w-[22px]' : 'h-5 w-5'}`}>
-          {loading && !displayContext ? (
-            <span className="absolute inset-[2px] rounded-full border-2 border-[var(--color-text-tertiary)] border-t-transparent motion-safe:animate-spin" />
-          ) : (
-            <span
-              className={`relative grid place-items-center rounded-full ${isMobileBrowser ? 'h-[22px] w-[22px]' : 'h-5 w-5'}`}
-              style={ringStyle}
-            >
-              <span className={`absolute inset-[3.5px] rounded-full transition-colors duration-150 ${
-                detailsOpen
-                  ? 'bg-[var(--color-surface-hover)]'
-                  : 'bg-[var(--color-surface-container-lowest)] group-hover:bg-[var(--color-surface-hover)]'
-              }`} />
-              <span
-                className="relative h-1.5 w-1.5 rounded-full"
-                style={{ backgroundColor: displayContext ? strokeColor : 'var(--color-text-tertiary)' }}
-              />
-            </span>
-          )}
+        <ContextRing
+          size={isMobileBrowser ? 18 : 16}
+          loading={loading && !displayContext}
+          percentage={displayContext ? percentage : null}
+          color={strokeColor}
+        />
+        <span
+          className={isMobileBrowser
+            ? 'sr-only'
+            : 'font-mono text-[11px] tabular-nums text-[var(--color-text-tertiary)]'}
+        >
+          {displayPercent}
         </span>
-        <span className="sr-only">{displayPercent}</span>
       </button>
 
       {!preferSheet && detailsOpen && popoverPosition && createPortal(
@@ -575,7 +615,7 @@ export function ContextUsageIndicator({
           role="dialog"
           aria-label={t('contextIndicator.title')}
           data-testid="context-usage-popover"
-          className="fixed z-[var(--z-popover)] overflow-y-auto rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] px-[22px] py-5 text-left shadow-[var(--shadow-overlay)]"
+          className="fixed z-[var(--z-popover)] overflow-y-auto rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] p-4 text-left shadow-[var(--shadow-dropdown)]"
           style={{
             top: popoverPosition.top,
             bottom: popoverPosition.bottom,
@@ -598,7 +638,7 @@ export function ContextUsageIndicator({
           ariaLabel={t('contextIndicator.title')}
           testId="context-usage-sheet"
           headerExtra={(
-            <div className="truncate text-base font-semibold text-[var(--color-text-primary)]">
+            <div className="truncate font-mono text-[13px] text-[var(--color-text-secondary)]">
               {modelLabel}
             </div>
           )}
diff --git a/desktop/src/components/chat/ConversationNavigator.tsx b/desktop/src/components/chat/ConversationNavigator.tsx
index 6b7f7a8f..8ebccdeb 100644
--- a/desktop/src/components/chat/ConversationNavigator.tsx
+++ b/desktop/src/components/chat/ConversationNavigator.tsx
@@ -236,7 +236,7 @@ export function ConversationNavigator({
           className="fixed z-[var(--z-tooltip)] w-[min(320px,calc(100vw-88px))] -translate-y-1/2 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] px-3.5 py-3 text-left shadow-[var(--shadow-overlay)]"
           style={{ left: previewPosition.left, top: previewPosition.top }}
         >
-          <div className="mb-1.5 text-[11px] font-semibold uppercase tracking-[0.08em] text-[var(--color-text-tertiary)]">
+          <div className="mb-1 text-xs font-semibold tabular-nums text-[var(--color-text-tertiary)]">
             {t('chat.conversationNavigator.turn', {
               current: previewItem.turnNumber,
               total: items.length,
diff --git a/desktop/src/components/chat/CurrentTurnChangeCard.test.tsx b/desktop/src/components/chat/CurrentTurnChangeCard.test.tsx
index f206172d..51cfb560 100644
--- a/desktop/src/components/chat/CurrentTurnChangeCard.test.tsx
+++ b/desktop/src/components/chat/CurrentTurnChangeCard.test.tsx
@@ -279,10 +279,13 @@ describe('CurrentTurnChangeCard – rich file row (icon / name / type)', () => {
 
     expect(screen.getByText('main.ts')).toBeInTheDocument()
     expect(screen.getByText('generated.ts')).toBeInTheDocument()
-    expect(screen.getByText('chat.turnChangesConversationOnlySubtitle')).toBeInTheDocument()
     // An unrestorable checkpoint must not cost the user the conversation
     // rollback too — the dialog is where the remaining action is chosen.
     const undoButton = screen.getByRole('button', { name: 'chat.turnChangesLatestUndoAria' })
+    // The limitation is the undo button's hint (its accessible description),
+    // not a line of grey text under the card.
+    expect(undoButton).toHaveAttribute('title', 'chat.turnChangesConversationOnlySubtitle')
+    expect(screen.queryByText('chat.turnChangesConversationOnlySubtitle')).toBeNull()
     expect(undoButton).toBeEnabled()
     fireEvent.click(undoButton)
     expect(onUndo).toHaveBeenCalledTimes(1)
@@ -332,8 +335,9 @@ describe('CurrentTurnChangeCard – rich file row (icon / name / type)', () => {
 
     expect(screen.queryByText('chat.turnChangesPartialCoverageSubtitle', { exact: false }))
       .toBeNull()
-    expect(screen.getByText('chat.turnChangesLatestSubtitle')).toBeInTheDocument()
-    expect(screen.getByRole('button', { name: 'chat.turnChangesLatestUndoAria' })).toBeEnabled()
+    const undoButton = screen.getByRole('button', { name: 'chat.turnChangesLatestUndoAria' })
+    expect(undoButton).toHaveAttribute('title', 'chat.turnChangesLatestSubtitle')
+    expect(undoButton).toBeEnabled()
   })
 
   it('prefers the conversation-only message over the coverage warning when restore is unavailable', () => {
@@ -341,10 +345,11 @@ describe('CurrentTurnChangeCard – rich file row (icon / name / type)', () => {
 
     // Both conditions hold, but "files cannot be restored at all" is the one
     // that changes what the user can do, so it wins the subtitle.
-    expect(screen.getByText('chat.turnChangesConversationOnlySubtitle')).toBeInTheDocument()
+    const undoButton = screen.getByRole('button', { name: 'chat.turnChangesLatestUndoAria' })
+    expect(undoButton).toHaveAttribute('title', 'chat.turnChangesConversationOnlySubtitle')
     expect(screen.queryByText('chat.turnChangesPartialCoverageSubtitle', { exact: false }))
       .toBeNull()
-    expect(screen.getByRole('button', { name: 'chat.turnChangesLatestUndoAria' })).toBeEnabled()
+    expect(undoButton).toBeEnabled()
   })
 })
 
@@ -513,9 +518,12 @@ describe('CurrentTurnChangeCard – open-with buttons', () => {
   })
 
   it('shows the same destination chevron on every changed-file row', () => {
-    const { container } = renderExpandedCard(['/w/proj/README.md', '/w/proj/src/main.ts'])
+    renderExpandedCard(['/w/proj/README.md', '/w/proj/src/main.ts'])
 
-    expect(container.querySelectorAll('.lucide-chevron-right')).toHaveLength(2)
+    // The card header carries its own disclosure chevron; count the rows'.
+    const rows = screen.getAllByRole('button', { name: /turnChangesOpen(InWorkspace|File)Aria/ })
+    expect(rows).toHaveLength(2)
+    expect(rows.map((row) => row.querySelectorAll('.lucide-chevron-right').length)).toEqual([1, 1])
   })
 
   it('clicking README.md open-with opens menu with workspace preview item', async () => {
@@ -646,7 +654,8 @@ describe('CurrentTurnChangeCard – conversation continuity', () => {
   it('truthfully labels a historical row as opening the current workspace diff', () => {
     renderExpandedCard(['/w/proj/src/main.ts'], false)
 
-    expect(screen.getByText('chat.turnChangesCurrentWorkspaceDiff')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'chat.turnChangesHistoricalUndoAria' }))
+      .toHaveAttribute('title', 'chat.turnChangesCurrentWorkspaceDiff')
   })
 
   it('records a stable opener id and semantic turn key before opening the diff', () => {
diff --git a/desktop/src/components/chat/CurrentTurnChangeCard.tsx b/desktop/src/components/chat/CurrentTurnChangeCard.tsx
index 6e69717c..bab096db 100644
--- a/desktop/src/components/chat/CurrentTurnChangeCard.tsx
+++ b/desktop/src/components/chat/CurrentTurnChangeCard.tsx
@@ -1,9 +1,10 @@
 import { useCallback, useId, useMemo, useState } from 'react'
 import type { MouseEvent as ReactMouseEvent } from 'react'
-import { ChevronDown, ChevronRight, ChevronUp } from 'lucide-react'
+import { ChevronDown, ChevronRight, ChevronUp, Ellipsis, FileDiff, TriangleAlert, Undo2 } from 'lucide-react'
 import type { SessionTurnCheckpoint } from '../../api/sessions'
 import { useTranslation, type TranslationKey } from '../../i18n'
 import { Button } from '@/components/ui/Button'
+import { IconButton } from '@/components/ui/IconButton'
 import { OpenWithMenu } from '@/components/composite/OpenWithMenu'
 import { FileTypeIcon } from '@/components/ui/FileTypeIcon'
 import { describeFileType, isPreviewableChangedFile, type OpenWithItem } from '../../lib/openWithItems'
@@ -167,10 +168,13 @@ export function CurrentTurnChangeCard({
       // Follows the message it belongs to inside the same rail box, so it takes a
       // top margin and no width of its own — `max-w-[900px]` here would have
       // overflowed the column once the rail indented it.
-      className="mt-2 w-full overflow-hidden rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface)] shadow-[var(--shadow-card)]"
+      className="mt-2.5 w-full overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)]"
       aria-label={cardLabel}
     >
-      <div className="flex flex-wrap items-center justify-between gap-2 bg-[var(--color-surface-container-low)] px-3 py-2">
+      {/* One 40px line. The disclosure's hit area is stretched over the whole
+          row (its ::after), so the trailing chevron toggles too; the undo
+          button is lifted above that layer to keep its own click. */}
+      <div className="relative flex h-10 items-center gap-2 pl-3 pr-2">
         <button
           type="button"
           data-chat-disclosure="true"
@@ -182,45 +186,58 @@ export function CurrentTurnChangeCard({
             setOpenWith(null)
             onExpandedChange(!expanded)
           }}
-          className="flex min-h-8 min-w-0 flex-1 basis-40 flex-wrap items-center gap-2 rounded-[var(--radius-md)] text-left text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]"
+          className="flex min-w-0 flex-1 items-center gap-2 text-left text-[13px] focus-visible:outline-none after:absolute after:inset-0 after:rounded-[var(--radius-lg)] focus-visible:after:ring-2 focus-visible:after:ring-inset focus-visible:after:ring-[var(--color-border-focus)]"
         >
-          {expanded ? <ChevronDown size={16} aria-hidden="true" /> : <ChevronRight size={16} aria-hidden="true" />}
-          <span className="font-semibold text-[var(--color-text-primary)]">
+          <FileDiff size={15} strokeWidth={1.75} aria-hidden="true" className="shrink-0 text-[var(--color-text-tertiary)]" />
+          <span className="truncate font-medium text-[var(--color-text-primary)]">
             {t('chat.turnChangesTitle', { count: files.length })}
           </span>
-          <span className="font-mono text-xs font-semibold text-[var(--color-diff-added-text)]">+{checkpoint.code.insertions}</span>
-          <span className="font-mono text-xs font-semibold text-[var(--color-diff-removed-text)]">-{checkpoint.code.deletions}</span>
+          <span className="shrink-0 font-mono text-xs tabular-nums text-[var(--color-diff-added-text)]">+{checkpoint.code.insertions}</span>
+          <span className="shrink-0 font-mono text-xs tabular-nums text-[var(--color-diff-removed-text)]">-{checkpoint.code.deletions}</span>
         </button>
 
         {/* Never disabled: rolling the conversation back is always possible, even
-            when the files are not restorable. The dialog picks what to touch. */}
+            when the files are not restorable. The dialog picks what to touch.
+            What the checkpoint covers is the button's hint rather than a line
+            of grey text under every card; the confirm dialog repeats it. */}
         <Button
-          variant="secondary"
-          size="base"
+          variant="ghost"
+          size="sm"
           loading={isUndoing}
           onClick={onUndo}
           aria-label={undoAria}
-          className="shrink-0"
-          icon={<span className="material-symbols-outlined text-[15px]" aria-hidden="true">undo</span>}
+          title={subtitle}
+          className="relative shrink-0"
+          icon={<Undo2 size={13} strokeWidth={1.75} aria-hidden="true" />}
         >
           {isUndoing ? t('chat.turnChangesUndoing') : undoLabel}
         </Button>
+        <ChevronRight
+          size={14}
+          strokeWidth={1.75}
+          aria-hidden="true"
+          className={`pointer-events-none shrink-0 text-[var(--color-text-tertiary)] transition-transform duration-150 motion-reduce:transition-none ${expanded ? 'rotate-90' : ''}`}
+        />
       </div>
 
-      {(expanded || !restoreAvailable || hasUnverifiedChanges) && (
-        <div className={`border-t border-[var(--color-border)] px-3 py-2 text-xs ${hasUnverifiedChanges ? 'text-[var(--color-warning)]' : 'text-[var(--color-text-tertiary)]'}`}>
-          {subtitle}
+      {/* A partial checkpoint changes what undo will do, so that one stays in
+          view; the routine "what this card compares" notes live in the hint. */}
+      {hasUnverifiedChanges && (
+        <div className="flex items-start gap-2 border-t border-[var(--color-border)] px-3 py-2 text-xs text-[var(--color-text-secondary)]">
+          <TriangleAlert size={13} strokeWidth={1.75} aria-hidden="true" className="mt-0.5 shrink-0 text-[var(--color-warning)]" />
+          <span className="min-w-0">{subtitle}</span>
         </div>
       )}
 
       <div id={filesId} hidden={!expanded}>
-        {expanded && <div className="divide-y divide-[var(--color-border)]">
+        {expanded && <div className="border-t border-[var(--color-border)] py-1">
           {visibleFiles.map((fileEntry) => {
             const fileName = fileEntry.displayPath.split('/').pop() || fileEntry.displayPath
+            const directory = fileEntry.displayPath.slice(0, fileEntry.displayPath.length - fileName.length)
             const typeInfo = describeFileType(fileEntry.displayPath)
             const workspacePreviewable = isWorkspacePreviewableFile(fileEntry.displayPath)
             return (
-              <div key={fileEntry.apiPath} className="flex items-center gap-2">
+              <div key={fileEntry.apiPath} className="flex h-8 items-center gap-0.5 px-1.5">
                 <button
                   type="button"
                   id={`turn-change-opener-${checkpoint.target.targetUserMessageId}-${encodeURIComponent(fileEntry.apiPath)}`}
@@ -233,26 +250,25 @@ export function CurrentTurnChangeCard({
                     { path: fileEntry.displayPath },
                   )}
                   title={fileEntry.displayPath}
-                  className="flex min-h-[52px] min-w-0 flex-1 items-center gap-3 rounded-[var(--radius-md)] px-4 text-left transition-colors hover:bg-[var(--color-surface-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-border-focus)]"
+                  className="flex h-full min-w-0 flex-1 items-center gap-2 rounded-[var(--radius-sm)] px-1.5 text-left transition-colors hover:bg-[var(--color-surface-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-border-focus)]"
                 >
-                  <FileTypeIcon path={fileEntry.displayPath} size={24} />
-                  <span className="min-w-0 flex-1">
-                    <span className="block truncate text-sm font-medium text-[var(--color-text-primary)]">{fileName}</span>
-                    <span className="block truncate text-xs text-[var(--color-text-tertiary)]">{`${t(typeInfo.categoryKey as Parameters<typeof t>[0])} · ${typeInfo.ext}`}</span>
+                  <FileTypeIcon path={fileEntry.displayPath} size={14} />
+                  <span className="min-w-0 flex-1 truncate font-mono text-xs text-[var(--color-text-tertiary)]">
+                    {directory}
+                    <span className="font-medium text-[var(--color-text-primary)]">{fileName}</span>
                   </span>
-                  <ChevronRight size={17} strokeWidth={1.9} aria-hidden="true" className="shrink-0 text-[var(--color-text-tertiary)]" />
+                  <span className="shrink-0 text-[11px] text-[var(--color-text-tertiary)]">
+                    {typeInfo.ext || t(typeInfo.categoryKey as Parameters<typeof t>[0])}
+                  </span>
+                  <ChevronRight size={14} strokeWidth={1.75} aria-hidden="true" className="shrink-0 text-[var(--color-text-tertiary)]" />
                 </button>
-                <Button
-                  variant="secondary"
-                  size="base"
-                  aria-label={t('openWith.title')}
+                <IconButton
+                  icon={<Ellipsis size={14} strokeWidth={1.75} aria-hidden="true" />}
+                  label={t('openWith.title')}
+                  size="xs"
+                  tone="muted"
                   onClick={(event) => handleOpenWith(event, fileEntry)}
-                  className="mr-2 shrink-0"
-                  icon={<ChevronDown size={14} strokeWidth={1.9} aria-hidden="true" />}
-                  iconPosition="end"
-                >
-                  {t('openWith.title')}
-                </Button>
+                />
               </div>
             )
           })}
@@ -264,17 +280,17 @@ export function CurrentTurnChangeCard({
             data-chat-disclosure="true"
             aria-expanded={showAllFiles}
             onClick={() => setShowAllFiles((current) => !current)}
-            className="flex w-full items-center justify-center gap-1 border-t border-[var(--color-border)] px-4 py-2 text-xs text-[var(--color-text-secondary)] transition-colors hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-border-focus)]"
+            className="flex h-8 w-full items-center justify-center gap-1 border-t border-[var(--color-border)] px-4 text-xs text-[var(--color-text-secondary)] transition-colors hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-border-focus)]"
           >
             {showAllFiles ? (
               <>
                 {t('chat.turnChangesShowLess')}
-                <ChevronUp size={14} strokeWidth={1.9} />
+                <ChevronUp size={14} strokeWidth={1.75} />
               </>
             ) : (
               <>
                 {t('chat.turnChangesShowMore', { count: String(files.length - COLLAPSED_COUNT) })}
-                <ChevronDown size={14} strokeWidth={1.9} />
+                <ChevronDown size={14} strokeWidth={1.75} />
               </>
             )}
           </button>
@@ -283,7 +299,7 @@ export function CurrentTurnChangeCard({
       </div>
 
       {error && (
-        <div role="alert" className="border-t border-[var(--color-error)] bg-[var(--color-error-container)] px-4 py-3 text-xs text-[var(--color-on-error-container)]">
+        <div role="alert" className="border-t border-[var(--color-border)] bg-[var(--color-error-container)] px-3 py-2 text-xs text-[var(--color-on-error-container)]">
           {error}
         </div>
       )}
diff --git a/desktop/src/components/chat/DiffViewer.tsx b/desktop/src/components/chat/DiffViewer.tsx
index 36b4c1fc..32916996 100644
--- a/desktop/src/components/chat/DiffViewer.tsx
+++ b/desktop/src/components/chat/DiffViewer.tsx
@@ -1,8 +1,10 @@
 import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer-continued'
 import { Highlight, type PrismTheme } from 'prism-react-renderer'
+import { CircleCheck, Copy, FileCode } from 'lucide-react'
 import { CopyButton } from '@/components/ui/CopyButton'
 import { useTranslation } from '../../i18n'
 import { useUIStore } from '../../stores/uiStore'
+import { countDiffLines } from './toolCallPresentation'
 
 type Props = {
   filePath: string
@@ -29,7 +31,7 @@ const warmSyntaxTheme: PrismTheme = {
     backgroundColor: 'transparent',
   },
   styles: [
-    { types: ['comment', 'prolog', 'doctype', 'cdata'], style: { color: 'var(--color-code-comment)', fontStyle: 'italic' as const } },
+    { types: ['comment', 'prolog', 'doctype', 'cdata'], style: { color: 'var(--color-code-comment)' } },
     { types: ['string', 'attr-value', 'template-string'], style: { color: 'var(--color-code-string)' } },
     { types: ['keyword', 'selector', 'important', 'atrule'], style: { color: 'var(--color-code-keyword)' } },
     { types: ['function'], style: { color: 'var(--color-code-function)' } },
@@ -64,87 +66,113 @@ function highlightSyntax(str: string, language: string) {
   )
 }
 
+/**
+ * Every colour is a theme token, so one palette serves both the library's light
+ * and dark modes; leaving `dark` unset dropped ink themes onto its defaults.
+ */
+const diffPalette = {
+  diffViewerBackground: 'var(--color-surface-container-lowest)',
+  diffViewerColor: 'var(--color-code-fg)',
+  addedBackground: 'var(--color-diff-added-bg)',
+  addedColor: 'var(--color-code-fg)',
+  removedBackground: 'var(--color-diff-removed-bg)',
+  removedColor: 'var(--color-code-fg)',
+  wordAddedBackground: 'var(--color-diff-added-word)',
+  wordRemovedBackground: 'var(--color-diff-removed-word)',
+  addedGutterBackground: 'var(--color-diff-added-bg)',
+  removedGutterBackground: 'var(--color-diff-removed-bg)',
+  gutterBackground: 'var(--color-surface-container-lowest)',
+  gutterBackgroundDark: 'var(--color-surface-container-lowest)',
+  highlightBackground: 'var(--color-diff-highlight-bg)',
+  highlightGutterBackground: 'var(--color-diff-highlight-gutter)',
+  codeFoldGutterBackground: 'var(--color-surface-container)',
+  codeFoldBackground: 'var(--color-surface-container)',
+  emptyLineBackground: 'var(--color-surface-container-lowest)',
+  gutterColor: 'var(--color-text-tertiary)',
+  addedGutterColor: 'var(--color-diff-added-text)',
+  removedGutterColor: 'var(--color-diff-removed-text)',
+  codeFoldContentColor: 'var(--color-text-tertiary)',
+  diffViewerTitleBackground: 'var(--color-diff-title-bg)',
+  diffViewerTitleColor: 'var(--color-diff-title-color)',
+  diffViewerTitleBorderColor: 'var(--color-diff-title-border)',
+}
+
 const diffStyles = {
   variables: {
-    light: {
-      diffViewerBackground: 'var(--color-code-bg)',
-      diffViewerColor: 'var(--color-code-fg)',
-      addedBackground: 'var(--color-diff-added-bg)',
-      addedColor: 'var(--color-code-fg)',
-      removedBackground: 'var(--color-diff-removed-bg)',
-      removedColor: 'var(--color-code-fg)',
-      wordAddedBackground: 'var(--color-diff-added-word)',
-      wordRemovedBackground: 'var(--color-diff-removed-word)',
-      addedGutterBackground: 'var(--color-diff-added-gutter)',
-      removedGutterBackground: 'var(--color-diff-removed-gutter)',
-      gutterBackground: 'var(--color-surface-container-low)',
-      gutterBackgroundDark: 'var(--color-surface-container)',
-      highlightBackground: 'var(--color-diff-highlight-bg)',
-      highlightGutterBackground: 'var(--color-diff-highlight-gutter)',
-      codeFoldGutterBackground: 'var(--color-surface-container-high)',
-      codeFoldBackground: 'var(--color-surface-container-highest)',
-      emptyLineBackground: 'var(--color-surface-container-low)',
-      gutterColor: 'var(--color-text-tertiary)',
-      addedGutterColor: 'var(--color-diff-added-text)',
-      removedGutterColor: 'var(--color-diff-removed-text)',
-      codeFoldContentColor: 'var(--color-text-tertiary)',
-      diffViewerTitleBackground: 'var(--color-diff-title-bg)',
-      diffViewerTitleColor: 'var(--color-diff-title-color)',
-      diffViewerTitleBorderColor: 'var(--color-diff-title-border)',
-    },
+    light: diffPalette,
+    dark: diffPalette,
   },
+  // The library pins the table to 1000px so long lines scroll sideways. In a
+  // conversation that turned every diff into a horizontal scroller; lines wrap
+  // at the column instead, which the content cell already supports.
   diffContainer: {
+    minWidth: 'unset',
     borderRadius: '0',
-    fontSize: '13px',
-    lineHeight: '1.7',
+    fontSize: '12px',
+    lineHeight: '20px',
     fontFamily: 'var(--font-mono)',
+    fontVariantLigatures: 'none',
   },
   line: {
     padding: '0',
   },
   gutter: {
-    padding: '0 10px',
-    minWidth: '44px',
+    padding: '0 8px',
+    minWidth: '36px',
     fontSize: '12px',
+    fontVariantNumeric: 'tabular-nums',
+  },
+  marker: {
+    padding: '0 6px',
   },
   wordDiff: {
-    padding: '1px 2px',
-    borderRadius: '2px',
+    padding: '1px 0',
+    borderRadius: 'var(--radius-xs)',
   },
 }
 
+/**
+ * A file change as a block: a 32px head (path, `+N −N`, copy path) over a
+ * unified diff with old/new line numbers.
+ */
 export function DiffViewer({ filePath, oldString, newString }: Props) {
   const t = useTranslation()
   const theme = useUIStore((state) => state.theme)
   const language = inferLanguage(filePath)
-
-  const oldLines = oldString.split('\n')
-  const newLines = newString.split('\n')
-  const additions = newLines.filter((l, i) => l !== (oldLines[i] ?? null)).length
-  const deletions = oldLines.filter((l, i) => l !== (newLines[i] ?? null)).length
+  const { additions, deletions } = countDiffLines(oldString, newString)
+  // Split so a long absolute path gives way from the left: the directory
+  // truncates, the file name never does.
+  const slash = Math.max(filePath.lastIndexOf('/'), filePath.lastIndexOf('\\'))
+  const directory = slash >= 0 ? filePath.slice(0, slash + 1) : ''
+  const fileName = slash >= 0 ? filePath.slice(slash + 1) : filePath
 
   return (
-    <div className="overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-code-bg)]">
-      {/* Header — mono path on the left, Copy path chip on the right */}
-      <div className="flex items-center gap-2.5 px-3.5 py-2.5">
-        <span className="min-w-0 flex-1 truncate font-mono text-[12.5px] text-[var(--color-text-secondary)]">
-          {filePath}
+    <div
+      data-diff-block=""
+      className="overflow-hidden rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)]"
+    >
+      <div className="flex h-8 items-center gap-2 border-b border-[var(--color-border)] bg-[var(--color-surface-container)] pl-2.5 pr-1.5 text-[12px]">
+        <FileCode size={14} strokeWidth={1.75} aria-hidden="true" className="shrink-0 text-[var(--color-text-tertiary)]" />
+        <span className="flex min-w-0 font-mono text-[12px]" title={filePath}>
+          {directory ? <span className="min-w-0 truncate text-[var(--color-text-tertiary)]">{directory}</span> : null}
+          <span className="shrink-0 text-[var(--color-text-primary)]">{fileName}</span>
         </span>
+        <span className="flex shrink-0 items-center gap-1.5 font-mono tabular-nums">
+          <span className="text-[var(--color-diff-added-text)]">+{additions}</span>
+          <span className="text-[var(--color-diff-removed-text)]">−{deletions}</span>
+        </span>
+        <span className="flex-1" />
         <CopyButton
           text={`--- ${filePath}\n+++ ${filePath}`}
           label={t('chat.copyPath')}
-          className="shrink-0 rounded-[8px] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] px-3 py-1 text-[12.5px] text-[var(--color-text-secondary)] transition-colors hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)]"
+          copiedLabel={t('common.copied')}
+          displayLabel={<><Copy size={12} strokeWidth={2} aria-hidden="true" />{t('chat.copyPath')}</>}
+          displayCopiedLabel={<><CircleCheck size={12} strokeWidth={2} aria-hidden="true" />{t('common.copied')}</>}
+          className="inline-flex h-6 shrink-0 items-center gap-1 rounded-[var(--radius-sm)] px-1.5 text-[11px] text-[var(--color-text-tertiary)] transition-colors hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] focus:outline-none focus-visible:shadow-[var(--shadow-focus-ring)]"
         />
       </div>
 
-      {/* Change counts */}
-      <div className="flex gap-2 px-3.5 pb-2 font-mono text-[12px] font-semibold">
-        <span className="rounded-[var(--radius-sm)] bg-[var(--color-diff-added-gutter)] px-2 py-0.5 text-[var(--color-diff-added-text)]">+{additions}</span>
-        <span className="rounded-[var(--radius-sm)] bg-[var(--color-diff-removed-gutter)] px-2 py-0.5 text-[var(--color-diff-removed-text)]">-{deletions}</span>
-      </div>
-
-      {/* Diff area */}
-      <div className="max-h-[400px] overflow-auto">
+      <div className="max-h-[340px] overflow-auto">
         <ReactDiffViewer
           oldValue={oldString}
           newValue={newString}
@@ -152,6 +180,7 @@ export function DiffViewer({ filePath, oldString, newString }: Props) {
           compareMethod={DiffMethod.WORDS}
           renderContent={(str) => highlightSyntax(str, language)}
           hideLineNumbers={false}
+          hideSummary
           styles={diffStyles}
           useDarkTheme={theme === 'dark'}
         />
diff --git a/desktop/src/components/chat/ImageGalleryModal.tsx b/desktop/src/components/chat/ImageGalleryModal.tsx
index c7cb1679..2f4f332e 100644
--- a/desktop/src/components/chat/ImageGalleryModal.tsx
+++ b/desktop/src/components/chat/ImageGalleryModal.tsx
@@ -1,5 +1,5 @@
 import { useEffect } from 'react'
-import { ExternalLink, X } from 'lucide-react'
+import { ChevronLeft, ChevronRight, ExternalLink, X } from 'lucide-react'
 import { IconButton } from '@/components/ui/IconButton'
 import { Modal } from '@/components/ui/Modal'
 import { ZoomableImage, type ZoomableImageProps } from '@/components/ui/ZoomableImage'
@@ -112,7 +112,7 @@ export function ImageGalleryModal({ open, images, activeIndex, onClose, onSelect
             <>
               <div className="absolute left-3 top-1/2 -translate-y-1/2">
                 <IconButton
-                  icon="chevron_left"
+                  icon={<ChevronLeft size={20} strokeWidth={1.75} aria-hidden="true" />}
                   label={t('attachments.previousImage')}
                   size="xl"
                   tone="secondary"
@@ -124,7 +124,7 @@ export function ImageGalleryModal({ open, images, activeIndex, onClose, onSelect
               </div>
               <div className="absolute right-3 top-1/2 -translate-y-1/2">
                 <IconButton
-                  icon="chevron_right"
+                  icon={<ChevronRight size={20} strokeWidth={1.75} aria-hidden="true" />}
                   label={t('attachments.nextImage')}
                   size="xl"
                   tone="secondary"
diff --git a/desktop/src/components/chat/ImageGenerationBlock.tsx b/desktop/src/components/chat/ImageGenerationBlock.tsx
index 5d8512ba..6f78292a 100644
--- a/desktop/src/components/chat/ImageGenerationBlock.tsx
+++ b/desktop/src/components/chat/ImageGenerationBlock.tsx
@@ -185,7 +185,7 @@ function ImageGenerationCollection({
           data-testid="image-generation-slot"
           data-state="complete"
           onClick={() => setActiveIndex(slot.galleryIndex!)}
-          className="group/image relative aspect-square w-full overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border-separator)] bg-[var(--color-surface-container-low)] text-left shadow-[var(--shadow-card)] transition-[border-color,box-shadow,transform] duration-200 hover:-translate-y-0.5 hover:border-[var(--color-outline)] hover:shadow-[var(--shadow-composer)] active:translate-y-0 active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]"
+          className="group/image relative aspect-square w-full overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border-separator)] bg-[var(--color-surface-container-low)] text-left transition-[border-color,transform] duration-200 hover:border-[var(--color-outline)] active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]"
         >
           <AuthedImage
             src={src}
@@ -220,7 +220,7 @@ function ImageGenerationCollection({
         data-state="error"
         data-error="true"
         title={slot.message}
-        className="flex aspect-square w-full flex-col items-center justify-center gap-2 rounded-[var(--radius-lg)] border border-[var(--color-error)] bg-[var(--color-error-container)] p-3 text-center text-[11px] leading-relaxed text-[var(--color-on-error-container)]"
+        className="flex aspect-square w-full flex-col items-center justify-center gap-2 rounded-[var(--radius-lg)] bg-[var(--color-error-container)] p-3 text-center text-[11px] leading-relaxed text-[var(--color-on-error-container)]"
       >
         <TriangleAlert aria-hidden size={17} strokeWidth={1.75} className="shrink-0" />
         <span className="line-clamp-4">{slot.message}</span>
@@ -255,7 +255,7 @@ function ImageGenerationCollection({
           />
         ) : null}
         {!hasPending && typeof visibleDuration === 'number' ? (
-          <span className="font-mono tabular-nums text-[var(--color-outline)]">
+          <span className="font-mono text-[11px] tabular-nums">
             {formatDuration(visibleDuration)}
           </span>
         ) : null}
diff --git a/desktop/src/components/chat/InlineImageGallery.tsx b/desktop/src/components/chat/InlineImageGallery.tsx
index fe10e359..c8f81bb4 100644
--- a/desktop/src/components/chat/InlineImageGallery.tsx
+++ b/desktop/src/components/chat/InlineImageGallery.tsx
@@ -1,4 +1,5 @@
 import { useMemo, useState } from 'react'
+import { Image as ImageIcon, Maximize2 } from 'lucide-react'
 import { ErrorState } from '@/components/ui/ErrorState'
 import { useTranslation } from '@/i18n'
 import { AuthedImage } from './AuthedImage'
@@ -188,8 +189,8 @@ export function InlineImageGallery({ text, sessionId, workDir, changedFiles, sup
   return (
     <>
       <div className="mt-3 space-y-2">
-        <div className="flex items-center gap-1.5 text-[10px] font-semibold uppercase tracking-wider text-[var(--color-outline)]">
-          <span className="material-symbols-outlined text-[12px]">image</span>
+        <div className="flex items-center gap-1.5 text-xs text-[var(--color-text-tertiary)]">
+          <ImageIcon size={12} strokeWidth={2} aria-hidden="true" />
           {t(visibleImages.length === 1 ? 'chat.imageCountOne' : 'chat.imageCountOther', { count: visibleImages.length })}
         </div>
         <div className={`grid gap-2 ${visibleImages.length === 1 ? 'grid-cols-1' : 'grid-cols-2'}`}>
@@ -216,7 +217,7 @@ export function InlineImageGallery({ text, sessionId, workDir, changedFiles, sup
               key={`${sessionId ?? ''}|${workDir ?? ''}|${img.src}`}
               type="button"
               onClick={() => setActiveIndex(i)}
-              className="group/image relative overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)] text-left shadow-[var(--shadow-card)] transition-[border-color,box-shadow] duration-150 hover:shadow-[var(--shadow-composer)] hover:border-[var(--color-primary-fixed-dim)]"
+              className="group/image relative overflow-hidden rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)] text-left transition-[border-color] duration-150 hover:border-[var(--color-outline)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]"
             >
               <AuthedImage
                 src={img.src}
@@ -230,12 +231,12 @@ export function InlineImageGallery({ text, sessionId, workDir, changedFiles, sup
                 }))}
               />
               <div className="absolute inset-0 flex items-center justify-center bg-black/0 opacity-0 transition-all group-hover/image:bg-black/20 group-hover/image:opacity-100">
-                <span className="material-symbols-outlined rounded-full bg-white/90 p-2 text-[20px] text-[var(--color-text-primary)] shadow-lg">
-                  fullscreen
+                <span className="flex h-9 w-9 items-center justify-center rounded-full bg-[var(--color-surface-container-lowest)] text-[var(--color-text-primary)] shadow-[var(--shadow-dropdown)]">
+                  <Maximize2 size={16} strokeWidth={1.75} aria-hidden="true" />
                 </span>
               </div>
               <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent px-2.5 pb-2 pt-6">
-                <span className="text-[10px] font-medium text-white/90 drop-shadow-sm">
+                <span className="text-[11px] font-medium text-white/90 drop-shadow-sm">
                   {img.name}
                 </span>
               </div>
diff --git a/desktop/src/components/chat/InlineTaskSummary.test.tsx b/desktop/src/components/chat/InlineTaskSummary.test.tsx
new file mode 100644
index 00000000..65080737
--- /dev/null
+++ b/desktop/src/components/chat/InlineTaskSummary.test.tsx
@@ -0,0 +1,37 @@
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { beforeEach, describe, expect, it } from 'vitest'
+import { InlineTaskSummary } from './InlineTaskSummary'
+import { useSettingsStore } from '../../stores/settingsStore'
+
+describe('InlineTaskSummary', () => {
+  beforeEach(() => {
+    useSettingsStore.setState({ locale: 'en' })
+  })
+
+  it('counts finished tasks and marks each status with a lucide icon in its state colour', () => {
+    const { container } = render(
+      <InlineTaskSummary
+        tasks={[
+          { id: '1', subject: 'Write the parser', status: 'completed' },
+          { id: '2', subject: 'Wire the store', status: 'in_progress' },
+          { id: '3', subject: 'Ship it', status: 'pending' },
+        ]}
+      />,
+    )
+
+    expect(screen.getByText('1/3')).toBeInTheDocument()
+    // Material ligature names used to be the icons' text, which find-in-chat
+    // and copy both picked up.
+    expect(container.querySelector('.material-symbols-outlined')).toBeNull()
+    expect(container.textContent).not.toMatch(/check_circle|radio_button_unchecked|task_alt/)
+
+    const row = (subject: string) => screen.getByText(subject).parentElement as HTMLElement
+    expect(row('Write the parser').querySelector('svg.lucide-circle-check')).toHaveStyle({ color: 'var(--color-success)' })
+    // In progress is a running state: info, never the brand accent.
+    expect(row('Wire the store').querySelector('svg.lucide-circle-dot')).toHaveStyle({ color: 'var(--color-info)' })
+    expect(row('Ship it').querySelector('svg.lucide-circle')).toHaveStyle({ color: 'var(--color-text-tertiary)' })
+    expect(screen.getByText('Write the parser')).toHaveClass('line-through')
+    expect(screen.getByText('#2')).toHaveClass('font-mono')
+  })
+})
diff --git a/desktop/src/components/chat/InlineTaskSummary.tsx b/desktop/src/components/chat/InlineTaskSummary.tsx
index fab22245..27486aee 100644
--- a/desktop/src/components/chat/InlineTaskSummary.tsx
+++ b/desktop/src/components/chat/InlineTaskSummary.tsx
@@ -1,16 +1,12 @@
+import { Circle, CircleCheck, CircleDot, ListChecks, type LucideIcon } from 'lucide-react'
 import type { TaskSummaryItem } from '../../types/chat'
 import { useTranslation } from '../../i18n'
 
-const statusIcon: Record<TaskSummaryItem['status'], string> = {
-  pending: 'radio_button_unchecked',
-  in_progress: 'pending',
-  completed: 'check_circle',
-}
-
-const statusColor: Record<TaskSummaryItem['status'], string> = {
-  pending: 'var(--color-text-tertiary)',
-  in_progress: 'var(--color-warning)',
-  completed: 'var(--color-success)',
+/** In progress is a running state, so it takes `info` — never the brand colour. */
+const statusIcon: Record<TaskSummaryItem['status'], { Icon: LucideIcon; color: string }> = {
+  pending: { Icon: Circle, color: 'var(--color-text-tertiary)' },
+  in_progress: { Icon: CircleDot, color: 'var(--color-info)' },
+  completed: { Icon: CircleCheck, color: 'var(--color-success)' },
 }
 
 export function InlineTaskSummary({ tasks }: { tasks: TaskSummaryItem[] }) {
@@ -19,41 +15,37 @@ export function InlineTaskSummary({ tasks }: { tasks: TaskSummaryItem[] }) {
   const total = tasks.length
 
   return (
-    <div className="rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] overflow-hidden">
-      <div className="flex items-center gap-3 px-4 py-2 bg-[var(--color-surface-container)]">
-        <div className="flex items-center justify-center w-5 h-5 rounded-[var(--radius-md)] bg-[var(--color-success-container)]">
-          <span className="material-symbols-outlined text-[13px] text-[var(--color-success)]" style={{ fontVariationSettings: "'FILL' 1" }}>
-            task_alt
-          </span>
-        </div>
-        <span className="text-xs font-semibold text-[var(--color-text-primary)]">
+    <div className="overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)]">
+      <div className="flex h-10 items-center gap-2 border-b border-[var(--color-border)] px-3 text-[13px]">
+        <ListChecks size={15} strokeWidth={1.75} aria-hidden="true" className="shrink-0 text-[var(--color-text-tertiary)]" />
+        <span className="font-medium text-[var(--color-text-primary)]">
           {t('tasks.completed')}
         </span>
-        <span className="text-[10px] text-[var(--color-text-tertiary)] tabular-nums">
+        <span className="font-mono text-[11px] tabular-nums text-[var(--color-text-tertiary)]">
           {completed}/{total}
         </span>
       </div>
-      <div className="px-4 py-2 flex flex-col gap-0.5">
-        {tasks.map((task) => (
-          <div key={task.id} className="flex items-center gap-2 py-1 px-1">
-            <span
-              className="material-symbols-outlined text-[14px] shrink-0"
-              style={{ color: statusColor[task.status], fontVariationSettings: "'FILL' 1" }}
-            >
-              {statusIcon[task.status]}
-            </span>
-            <span className="text-[10px] font-mono text-[var(--color-text-tertiary)]">
-              #{task.id}
-            </span>
-            <span className={`text-xs ${
-              task.status === 'completed'
-                ? 'text-[var(--color-text-tertiary)] line-through'
-                : 'text-[var(--color-text-primary)]'
-            }`}>
-              {task.subject}
-            </span>
-          </div>
-        ))}
+      <div className="flex flex-col py-1">
+        {tasks.map((task) => {
+          const { Icon, color } = statusIcon[task.status]
+          return (
+            <div key={task.id} className="flex min-h-7 items-center gap-2 px-3 py-1">
+              <Icon size={14} strokeWidth={1.75} aria-hidden="true" className="shrink-0" style={{ color }} />
+              <span className="shrink-0 font-mono text-[11px] tabular-nums text-[var(--color-text-tertiary)]">
+                #{task.id}
+              </span>
+              <span className={`min-w-0 text-[13px] ${
+                task.status === 'completed'
+                  ? 'text-[var(--color-text-tertiary)] line-through'
+                  : task.status === 'in_progress'
+                    ? 'font-medium text-[var(--color-text-primary)]'
+                    : 'text-[var(--color-text-primary)]'
+              }`}>
+                {task.subject}
+              </span>
+            </div>
+          )
+        })}
       </div>
     </div>
   )
diff --git a/desktop/src/components/chat/InlineVideoGallery.tsx b/desktop/src/components/chat/InlineVideoGallery.tsx
index 90e3b67e..9d96d4d4 100644
--- a/desktop/src/components/chat/InlineVideoGallery.tsx
+++ b/desktop/src/components/chat/InlineVideoGallery.tsx
@@ -1,4 +1,5 @@
 import { useMemo, useState } from 'react'
+import { Film } from 'lucide-react'
 import { AssistantOutputTargetCard } from '@/components/chat/AssistantOutputTargetCard'
 import { extractAssistantOutputTargets } from '../../lib/assistantOutputTargets'
 import { isAbsoluteLocalPath, localFileUrl, previewFsUrl } from '../../lib/handlePreviewLink'
@@ -140,18 +141,18 @@ function VideoPreview({ video, sessionId, workDir }: { video: GalleryVideo; sess
   }
 
   return (
-    <div className="overflow-hidden rounded-xl border border-[var(--color-border)] bg-[var(--color-surface-container-low)] shadow-sm">
+    <div className="overflow-hidden rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)]">
       <video
         src={video.src}
         controls
         preload="metadata"
         playsInline
-        className="w-full rounded-t-xl bg-black"
+        className="w-full bg-black"
         style={{ maxHeight: 420 }}
         onError={() => setFailed(true)}
       />
-      <div className="flex items-center gap-1.5 px-2.5 py-1.5 text-[10px] font-medium text-[var(--color-text-tertiary)]">
-        <span className="material-symbols-outlined text-[12px]">movie</span>
+      <div className="flex h-[30px] items-center gap-1.5 border-t border-[var(--color-border)] px-3 text-[11px] text-[var(--color-text-tertiary)]">
+        <Film size={12} strokeWidth={2} aria-hidden="true" className="shrink-0" />
         <span className="truncate">{video.name}</span>
       </div>
     </div>
diff --git a/desktop/src/components/chat/LocalSlashCommandPanel.tsx b/desktop/src/components/chat/LocalSlashCommandPanel.tsx
index 74edfac7..0e351415 100644
--- a/desktop/src/components/chat/LocalSlashCommandPanel.tsx
+++ b/desktop/src/components/chat/LocalSlashCommandPanel.tsx
@@ -7,10 +7,14 @@ import {
   type SessionInspectionResponse,
   type SessionUsageSnapshot,
 } from '../../api/sessions'
+import { Info, PowerOff, RefreshCw, Server, X } from 'lucide-react'
 import { Badge } from '@/components/ui/Badge'
+import { Button } from '@/components/ui/Button'
 import { EmptyState } from '@/components/ui/EmptyState'
 import { ErrorState } from '@/components/ui/ErrorState'
+import { IconButton } from '@/components/ui/IconButton'
 import { LoadingState } from '@/components/ui/LoadingState'
+import { SegmentedControl } from '@/components/ui/SegmentedControl'
 import { mcpStatusTone } from '@/lib/mcpStatus'
 import { useTranslation, type TranslationKey } from '../../i18n'
 import { useUIStore } from '../../stores/uiStore'
@@ -105,29 +109,31 @@ function assertSessionInspectionResponse(value: unknown, t: Translate): SessionI
   throw new Error(t('slash.inspector.error.unavailable'))
 }
 
+/** Small section label: 12px semibold tertiary, sentence case. */
 function InspectorSectionTitle({ children, action }: { children: React.ReactNode; action?: React.ReactNode }) {
   return (
-    <div className="mb-3 flex items-center justify-between gap-4">
-      <div className="font-mono text-[12px] font-semibold uppercase tracking-[0.24em] text-[var(--color-inspector-heading)]">{children}</div>
+    <div className="mb-2 flex min-h-6 items-center justify-between gap-4">
+      <div className="text-xs font-semibold text-[var(--color-text-tertiary)]">{children}</div>
       {action}
     </div>
   )
 }
 
+/** Sunken tile inside the panel card: no border, so the card does not nest frames. */
 function MetricCard({ label, value, detail }: { label: string; value: React.ReactNode; detail?: React.ReactNode }) {
   return (
-    <div className="min-h-[82px] rounded-md border border-[var(--color-inspector-border)] bg-[var(--color-inspector-panel)] px-4 py-4 font-mono">
-      <div className="text-[12px] uppercase tracking-[0.2em] text-[var(--color-inspector-heading)]">{label}</div>
-      <div className="mt-3 whitespace-pre-line text-[15px] leading-6 text-[var(--color-inspector-text)]">{value}</div>
-      {detail && <div className="mt-1 text-[13px] leading-5 text-[var(--color-inspector-muted)]">{detail}</div>}
+    <div className="min-h-[72px] rounded-[var(--radius-md)] bg-[var(--color-surface-container)] px-3 py-2.5">
+      <div className="truncate text-xs text-[var(--color-text-tertiary)]">{label}</div>
+      <div className="mt-1 whitespace-pre-line text-[15px] font-medium leading-6 tabular-nums text-[var(--color-text-primary)]">{value}</div>
+      {detail && <div className="mt-0.5 text-xs leading-5 text-[var(--color-text-tertiary)]">{detail}</div>}
     </div>
   )
 }
 
 function InspectorNotice({ children }: { children: React.ReactNode }) {
   return (
-    <div className="flex items-center gap-3 rounded-md border border-[var(--color-inspector-border)] bg-[var(--color-inspector-surface)] px-4 py-3 text-[14px] text-[var(--color-inspector-heading)]">
-      <span className="material-symbols-outlined text-[18px] text-[var(--color-inspector-muted)]">info</span>
+    <div className="flex items-center gap-2 rounded-[var(--radius-md)] bg-[var(--color-surface-container)] px-3 py-2 text-[13px] text-[var(--color-text-secondary)]">
+      <Info size={14} strokeWidth={1.75} aria-hidden="true" className="shrink-0 text-[var(--color-text-tertiary)]" />
       <span>{children}</span>
     </div>
   )
@@ -135,13 +141,13 @@ function InspectorNotice({ children }: { children: React.ReactNode }) {
 
 function KeyValueRows({ rows }: { rows: Array<[string, React.ReactNode]> }) {
   return (
-    <div className="overflow-hidden rounded-md border border-[var(--color-inspector-border)] bg-[var(--color-inspector-surface)] font-mono">
+    <div className="overflow-hidden rounded-[var(--radius-md)] border border-[var(--color-border)]">
       {rows.map(([label, value]) => (
-        <div key={label} className="grid grid-cols-[220px_minmax(0,1fr)] border-t border-[var(--color-inspector-border)] first:border-t-0">
-          <div className="border-r border-[var(--color-inspector-border)] bg-[var(--color-inspector-panel)] px-4 py-3 text-[12px] font-semibold uppercase tracking-[0.24em] text-[var(--color-inspector-heading)]">
+        <div key={label} className="grid grid-cols-[180px_minmax(0,1fr)] border-t border-[var(--color-border)] first:border-t-0">
+          <div className="bg-[var(--color-surface-container)] px-3 py-2 text-xs font-medium text-[var(--color-text-secondary)]">
             {label}
           </div>
-          <div className="min-w-0 break-words px-4 py-3 text-[14px] text-[var(--color-inspector-text)]">{value}</div>
+          <div className="min-w-0 break-words px-3 py-2 text-[13px] text-[var(--color-text-primary)]">{value}</div>
         </div>
       ))}
     </div>
@@ -200,23 +206,23 @@ function UsageTab({
       : t('slash.inspector.usage.source.currentProcess')
 
   return (
-    <div className="space-y-7">
+    <div className="space-y-5">
       {useContextUsageFallback && (
         <InspectorNotice>
           {t('slash.inspector.usage.contextSnapshotNotice')}
         </InspectorNotice>
       )}
       {usage.source === 'transcript' && (
-        <div className="rounded-md border border-[var(--color-inspector-border)] bg-[var(--color-inspector-surface)] px-4 py-3 text-sm text-[var(--color-inspector-muted-strong)]">
+        <div className="rounded-[var(--radius-md)] bg-[var(--color-surface-container)] px-3 py-2 text-[13px] text-[var(--color-text-secondary)]">
           {t('slash.inspector.usage.transcriptNotice')}
         </div>
       )}
       {usage.hasUnknownModelCost && (
-        <div className="rounded-xl border border-[var(--color-inspector-border)] bg-[var(--color-inspector-panel)] px-4 py-3 text-sm text-[var(--color-warning)]">
+        <div className="rounded-[var(--radius-md)] bg-[var(--color-warning-container)] px-3 py-2 text-[13px] text-[var(--color-on-warning-container)]">
           {t('slash.inspector.usage.unknownCost')}
         </div>
       )}
-      <div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
+      <div className="grid grid-cols-2 gap-2 lg:grid-cols-4">
         <MetricCard label={t('slash.inspector.usage.totalCost')} value={useContextUsageFallback ? 'n/a' : usage.costDisplay} />
         <MetricCard label={t('slash.inspector.usage.source')} value={sourceLabel} />
         <MetricCard label={t('slash.inspector.usage.apiDuration')} value={usage.source === 'transcript' || useContextUsageFallback ? '0ms' : formatDuration(usage.totalAPIDuration)} />
@@ -231,37 +237,37 @@ function UsageTab({
         <MetricCard label={t('slash.inspector.usage.webSearch')} value={formatNumber(usage.totalWebSearchRequests)} />
       </div>
       <section>
-        <div className="mb-3 text-[22px] font-semibold text-[var(--color-inspector-text)]">{t('slash.inspector.usage.byModel')}</div>
+        <InspectorSectionTitle>{t('slash.inspector.usage.byModel')}</InspectorSectionTitle>
         {models.length === 0 ? (
           <EmptyState title={t('slash.inspector.usage.noModelTitle')} description={t('slash.inspector.usage.noModelBody')} />
         ) : (
-          <div className="overflow-hidden rounded-md border border-[var(--color-inspector-border)] bg-[var(--color-inspector-surface)] font-mono">
+          <div className="overflow-hidden rounded-[var(--radius-md)] border border-[var(--color-border)]">
             {models.map((model) => (
-              <div key={model.model} className="border-t border-[var(--color-inspector-border)] first:border-t-0">
-                <div className="grid grid-cols-[minmax(0,1fr)_120px] items-center gap-4 border-b border-[var(--color-inspector-border)] px-4 py-3">
+              <div key={model.model} className="border-t border-[var(--color-border)] first:border-t-0">
+                <div className="grid grid-cols-[minmax(0,1fr)_120px] items-center gap-4 border-b border-[var(--color-border)] bg-[var(--color-surface-container)] px-3 py-2">
                   <div className="min-w-0">
-                    <div className="truncate text-[13px] font-semibold text-[var(--color-inspector-text)]">{model.displayName || model.model}</div>
+                    <div className="truncate font-mono text-[13px] text-[var(--color-text-primary)]">{model.displayName || model.model}</div>
                     {(model.contextWindow > 0 || context?.rawMaxTokens) && (
-                      <div className="mt-1 truncate text-[11px] text-[var(--color-inspector-muted)]">
+                      <div className="mt-0.5 truncate text-[11px] tabular-nums text-[var(--color-text-tertiary)]">
                         {t('slash.inspector.status.contextWindow')}: {formatNumber(model.contextWindow || context?.rawMaxTokens)}
                       </div>
                     )}
                   </div>
-                  <div className="text-right text-[12px] font-semibold uppercase tracking-[0.18em] text-[var(--color-inspector-heading)]">{t('slash.inspector.usage.tokens')}</div>
+                  <div className="text-right text-xs font-semibold text-[var(--color-text-tertiary)]">{t('slash.inspector.usage.tokens')}</div>
                 </div>
-                <div className="grid grid-cols-[160px_minmax(0,1fr)_120px] items-center gap-4 border-b border-[var(--color-inspector-border)] px-4 py-3 last:border-b-0">
-                  <div className="text-[12px] uppercase tracking-[0.18em] text-[var(--color-inspector-heading)]">{t('slash.inspector.usage.input')}</div>
-                  <div className="h-1 overflow-hidden rounded-full bg-[var(--color-inspector-chip)]">
-                    <div className="h-full rounded-full bg-[var(--color-inspector-accent)]" style={{ width: '95%' }} />
+                <div className="grid grid-cols-[120px_minmax(0,1fr)_120px] items-center gap-4 border-b border-[var(--color-border)] px-3 py-2 last:border-b-0">
+                  <div className="text-xs text-[var(--color-text-secondary)]">{t('slash.inspector.usage.input')}</div>
+                  <div className="h-1 overflow-hidden rounded-full bg-[var(--color-surface-container)]">
+                    <div className="h-full rounded-full bg-[var(--color-brand)]" style={{ width: '95%' }} />
                   </div>
-                  <div className="text-right text-[13px] text-[var(--color-inspector-text)]">{formatNumber(model.inputTokens)}</div>
+                  <div className="text-right font-mono text-xs tabular-nums text-[var(--color-text-primary)]">{formatNumber(model.inputTokens)}</div>
                 </div>
-                <div className="grid grid-cols-[160px_minmax(0,1fr)_120px] items-center gap-4 px-4 py-3">
-                  <div className="text-[12px] uppercase tracking-[0.18em] text-[var(--color-inspector-heading)]">{t('slash.inspector.usage.output')}</div>
-                  <div className="h-1 overflow-hidden rounded-full bg-[var(--color-inspector-chip)]">
-                    <div className="h-full rounded-full bg-[var(--color-inspector-accent-secondary)]" style={{ width: `${Math.max(4, Math.min(100, (model.outputTokens / Math.max(1, model.inputTokens)) * 100))}%` }} />
+                <div className="grid grid-cols-[120px_minmax(0,1fr)_120px] items-center gap-4 px-3 py-2">
+                  <div className="text-xs text-[var(--color-text-secondary)]">{t('slash.inspector.usage.output')}</div>
+                  <div className="h-1 overflow-hidden rounded-full bg-[var(--color-surface-container)]">
+                    <div className="h-full rounded-full bg-[var(--color-text-tertiary)]" style={{ width: `${Math.max(4, Math.min(100, (model.outputTokens / Math.max(1, model.inputTokens)) * 100))}%` }} />
                   </div>
-                  <div className="text-right text-[13px] text-[var(--color-inspector-text)]">{formatNumber(model.outputTokens)}</div>
+                  <div className="text-right font-mono text-xs tabular-nums text-[var(--color-text-primary)]">{formatNumber(model.outputTokens)}</div>
                 </div>
               </div>
             ))}
@@ -285,8 +291,8 @@ function ContextStackedBar({ categories, rawMaxTokens, t }: { categories: Contex
   if (activeCategories.length === 0) return null
 
   return (
-    <div className="overflow-hidden rounded-full bg-[var(--color-inspector-chip)]">
-      <div className="flex h-2.5 w-full">
+    <div className="overflow-hidden rounded-full bg-[var(--color-surface-container)]">
+      <div className="flex h-2 w-full">
         {activeCategories.map((category) => (
           <div
             key={category.name}
@@ -309,9 +315,9 @@ function CategoryBreakdown({ categories, rawMaxTokens, t }: { categories: Contex
   }
 
   return (
-    <div className="rounded-md border border-[var(--color-inspector-border)] bg-[var(--color-inspector-panel)] px-5 py-5 font-mono">
+    <div className="rounded-[var(--radius-md)] border border-[var(--color-border)] px-4 py-3">
       <InspectorSectionTitle>{t('slash.inspector.context.categoryTitle')}</InspectorSectionTitle>
-      <div className="grid gap-x-10 gap-y-5 sm:grid-cols-2">
+      <div className="grid gap-x-8 gap-y-3 sm:grid-cols-2">
         {visibleCategories.map((category) => {
           const percent = rawMaxTokens > 0 ? (category.tokens / rawMaxTokens) * 100 : 0
           const muted = isCapacityCategory(category)
@@ -320,23 +326,21 @@ function CategoryBreakdown({ categories, rawMaxTokens, t }: { categories: Contex
               key={category.name}
               className="min-w-0"
             >
-              <div className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-3">
-                <div className="flex min-w-0 items-center gap-2">
-                  <span className={`min-w-0 truncate text-[14px] font-semibold ${muted ? 'text-[var(--color-inspector-muted-strong)]' : 'text-[var(--color-inspector-text)]'}`}>
-                    {category.name}
-                  </span>
-                </div>
-                <div className="shrink-0 text-right leading-tight">
-                  <div className="text-sm text-[var(--color-inspector-text)]">{formatNumber(category.tokens)}</div>
-                  <div className="mt-0.5 text-[12px] text-[var(--color-inspector-muted)]">{formatPercent(percent)}</div>
-                </div>
+              <div className="grid grid-cols-[minmax(0,1fr)_auto] items-baseline gap-3">
+                <span className={`min-w-0 truncate text-[13px] ${muted ? 'text-[var(--color-text-tertiary)]' : 'font-medium text-[var(--color-text-primary)]'}`}>
+                  {category.name}
+                </span>
+                <span className="shrink-0 text-right font-mono text-xs tabular-nums text-[var(--color-text-secondary)]">
+                  {formatNumber(category.tokens)}
+                  <span className="ml-1.5 text-[11px] text-[var(--color-text-tertiary)]">{formatPercent(percent)}</span>
+                </span>
               </div>
-              <div className="mt-2 h-1 overflow-hidden rounded-full bg-[var(--color-inspector-chip)]">
+              <div className="mt-1.5 h-1 overflow-hidden rounded-full bg-[var(--color-surface-container)]">
                 <div
-                  className={muted ? 'h-full rounded-full opacity-65' : 'h-full rounded-full'}
+                  className="h-full rounded-full"
                   style={{
                     width: `${Math.min(100, Math.max(0.5, percent))}%`,
-                    backgroundColor: muted ? 'var(--color-inspector-capacity)' : 'var(--color-inspector-accent)',
+                    backgroundColor: muted ? 'var(--color-outline)' : 'var(--color-brand)',
                   }}
                 />
               </div>
@@ -362,53 +366,45 @@ function MemoryFilesBreakdown({ files, t }: { files: ContextMemoryFile[]; t: Tra
     useTabStore.getState().openTab(SETTINGS_TAB_ID, 'Settings', 'settings')
   }
 
+  const openMemoryButton = (path?: string) => (
+    <Button variant="secondary" size="sm" onClick={() => openSettings(path)}>
+      {t('slash.inspector.context.openMemory')}
+    </Button>
+  )
+
   if (files.length === 0) {
     return (
-      <div className="rounded-md border border-[var(--color-inspector-border)] bg-[var(--color-inspector-panel)] px-5 py-5">
-        <div className="flex items-center justify-between gap-3">
-          <InspectorSectionTitle>{t('slash.inspector.context.memoryFiles')}</InspectorSectionTitle>
-          <button
-            type="button"
-            onClick={() => openSettings()}
-            className="rounded-sm border border-[var(--color-inspector-border)] bg-[var(--color-inspector-chip)] px-2.5 py-1 text-xs font-semibold text-[var(--color-inspector-muted-strong)] hover:text-[var(--color-inspector-text)]"
-          >
-            {t('slash.inspector.context.openMemory')}
-          </button>
-        </div>
-        <div className="mt-4 text-sm text-[var(--color-inspector-muted)]">{t('slash.inspector.context.noMemoryFiles')}</div>
+      <div className="rounded-[var(--radius-md)] border border-[var(--color-border)] px-4 py-3">
+        <InspectorSectionTitle action={openMemoryButton()}>
+          {t('slash.inspector.context.memoryFiles')}
+        </InspectorSectionTitle>
+        <div className="text-[13px] text-[var(--color-text-tertiary)]">{t('slash.inspector.context.noMemoryFiles')}</div>
       </div>
     )
   }
 
   return (
-    <div className="rounded-md border border-[var(--color-inspector-border)] bg-[var(--color-inspector-panel)] px-5 py-5">
-      <div className="flex items-center justify-between gap-3">
-        <InspectorSectionTitle>{t('slash.inspector.context.memoryFiles')}</InspectorSectionTitle>
-        <button
-          type="button"
-          onClick={() => openSettings(files[0]?.path)}
-          className="rounded-sm border border-[var(--color-inspector-border)] bg-[var(--color-inspector-chip)] px-2.5 py-1 text-xs font-semibold text-[var(--color-inspector-muted-strong)] hover:text-[var(--color-inspector-text)]"
-        >
-          {t('slash.inspector.context.openMemory')}
-        </button>
-      </div>
-      <div className="mt-4 grid gap-2">
+    <div className="rounded-[var(--radius-md)] border border-[var(--color-border)] px-4 py-3">
+      <InspectorSectionTitle action={openMemoryButton(files[0]?.path)}>
+        {t('slash.inspector.context.memoryFiles')}
+      </InspectorSectionTitle>
+      <div className="grid gap-1.5">
         {files.map((file) => (
           <div
             key={`${file.type}:${file.path}`}
-            className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-3 rounded-md border border-[var(--color-inspector-border)] bg-[var(--color-inspector-surface)] px-3 py-2"
+            className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-3 rounded-[var(--radius-sm)] bg-[var(--color-surface-container)] px-3 py-2"
           >
             <div className="min-w-0">
-              <div className="truncate font-mono text-sm font-semibold text-[var(--color-inspector-text)]" title={file.path}>
+              <div className="truncate font-mono text-[13px] font-medium text-[var(--color-text-primary)]" title={file.path}>
                 {memoryContextFileLabel(file.path)}
               </div>
-              <div className="mt-0.5 truncate font-mono text-[11px] text-[var(--color-inspector-muted)]" title={file.path}>
+              <div className="mt-0.5 truncate font-mono text-[11px] text-[var(--color-text-tertiary)]" title={file.path}>
                 {file.path}
               </div>
             </div>
-            <div className="shrink-0 text-right font-mono">
-              <div className="text-xs font-semibold uppercase tracking-[0.12em] text-[var(--color-inspector-muted-strong)]">{file.type}</div>
-              <div className="mt-0.5 text-[11px] text-[var(--color-inspector-muted)]">{t('common.tokens', { count: formatNumber(file.tokens) })}</div>
+            <div className="shrink-0 text-right">
+              <div className="text-xs text-[var(--color-text-secondary)]">{file.type}</div>
+              <div className="mt-0.5 font-mono text-[11px] tabular-nums text-[var(--color-text-tertiary)]">{t('common.tokens', { count: formatNumber(file.tokens) })}</div>
             </div>
           </div>
         ))}
@@ -419,10 +415,10 @@ function MemoryFilesBreakdown({ files, t }: { files: ContextMemoryFile[]; t: Tra
 
 function ContextStatPill({ label, value, detail }: { label: string; value: string; detail?: string }) {
   return (
-    <div className="min-w-0 font-mono">
-      <div className="truncate text-[12px] font-semibold uppercase tracking-[0.22em] text-[var(--color-inspector-muted)]">{label}</div>
-      <div className="mt-2 truncate text-[16px] font-semibold text-[var(--color-inspector-text)]">{value}</div>
-      {detail && <div className="mt-1 truncate text-[13px] text-[var(--color-inspector-muted)]">{detail}</div>}
+    <div className="min-w-0">
+      <div className="truncate text-xs text-[var(--color-text-tertiary)]">{label}</div>
+      <div className="mt-1 truncate text-[15px] font-semibold tabular-nums text-[var(--color-text-primary)]">{value}</div>
+      {detail && <div className="mt-0.5 truncate text-xs text-[var(--color-text-tertiary)]">{detail}</div>}
     </div>
   )
 }
@@ -436,30 +432,29 @@ function statusDisplayLabel(status: string, t: Translate) {
 
 function InspectorStatusBadge({ status, t }: { status: string; t: Translate }) {
   const normalized = status.toLowerCase()
-  const isConnected = normalized === 'connected'
-  const isFailed = normalized === 'failed'
-  const badgeClass = isConnected
-    ? 'bg-[var(--color-inspector-success-bg)] text-[var(--color-inspector-success)]'
-    : isFailed
-      ? 'bg-[var(--color-inspector-danger-bg)] text-[var(--color-inspector-danger)]'
-      : 'bg-[var(--color-inspector-chip)] text-[var(--color-inspector-muted-strong)]'
-  const dotClass = isConnected ? 'bg-[var(--color-inspector-success)]' : isFailed ? 'bg-[var(--color-inspector-danger)]' : 'bg-[var(--color-inspector-muted)]'
+  const tone = normalized === 'connected' ? 'success' : normalized === 'failed' ? 'danger' : 'neutral'
 
   return (
-    <span className={`inline-flex items-center gap-1.5 rounded-sm px-2.5 py-1 font-mono text-[10px] font-semibold uppercase tracking-[0.08em] ${badgeClass}`}>
-      <span className={`h-1.5 w-1.5 rounded-full ${dotClass}`} />
+    <Badge
+      tone={tone}
+      size="md"
+      icon={<span aria-hidden="true" className="h-1.5 w-1.5 rounded-full bg-current" />}
+    >
       {statusDisplayLabel(status, t)}
-    </span>
+    </Badge>
   )
 }
 
 function McpServerIcon({ status }: { status: string }) {
   const isFailed = status === 'failed'
-  const icon = isFailed ? 'power_off' : 'dns'
+  const Icon = isFailed ? PowerOff : Server
   return (
-    <span className={`material-symbols-outlined text-[20px] ${isFailed ? 'text-[var(--color-inspector-danger)]' : 'text-[var(--color-inspector-success)]'}`}>
-      {icon}
-    </span>
+    <Icon
+      size={16}
+      strokeWidth={1.75}
+      aria-hidden="true"
+      className={`shrink-0 ${isFailed ? 'text-[var(--color-error)]' : 'text-[var(--color-success)]'}`}
+    />
   )
 }
 
@@ -468,31 +463,38 @@ function ContextOverview({ context, categories, t }: { context: SessionContextSn
   const freeTokens = Math.max(0, context.rawMaxTokens - context.totalTokens)
   const freePercent = context.rawMaxTokens > 0 ? (freeTokens / context.rawMaxTokens) * 100 : 0
   return (
-    <div className="rounded-md border border-[var(--color-inspector-border)] bg-[var(--color-inspector-panel)] px-5 py-6">
-      <div className="mb-8 flex items-start justify-between gap-4">
-        <InspectorSectionTitle>{t('slash.inspector.context.windowUsage')}</InspectorSectionTitle>
-        <span className="rounded-sm border border-[var(--color-inspector-border)] bg-[var(--color-inspector-chip)] px-2 py-1 font-mono text-xs text-[var(--color-inspector-muted-strong)]">{context.model}</span>
+    <div className="rounded-[var(--radius-md)] border border-[var(--color-border)] px-4 py-3">
+      <InspectorSectionTitle
+        action={(
+          <span className="max-w-[50%] truncate rounded-[var(--radius-xs)] bg-[var(--color-surface-container)] px-1.5 py-0.5 font-mono text-[11px] text-[var(--color-text-secondary)]">
+            {context.model}
+          </span>
+        )}
+      >
+        {t('slash.inspector.context.windowUsage')}
+      </InspectorSectionTitle>
+      <div className="flex flex-wrap items-baseline gap-x-2 text-[22px] font-semibold tabular-nums text-[var(--color-text-primary)]">
+        <span>
+          {formatNumber(context.totalTokens)}
+          <span className="mx-1 font-normal text-[var(--color-text-tertiary)]">/</span>
+          <span>{formatNumber(context.rawMaxTokens)}</span>
+        </span>
+        <span className="text-[13px] font-normal text-[var(--color-text-tertiary)]">{formatPercent(usedPercent)} {t('slash.inspector.context.used')}</span>
       </div>
-      <div className="font-mono text-[24px] font-semibold text-[var(--color-inspector-text)]">
-        {formatNumber(context.totalTokens)}
-        <span className="mx-1.5 text-[var(--color-inspector-text)]">/</span>
-        <span>{formatNumber(context.rawMaxTokens)}</span>
-        <span className="ml-3 align-middle text-sm font-normal text-[var(--color-inspector-accent-secondary)]">[{formatPercent(usedPercent)} {t('slash.inspector.context.used')}]</span>
-      </div>
-      <div className="mt-7">
+      <div className="mt-3">
         <ContextStackedBar categories={categories} rawMaxTokens={context.rawMaxTokens} t={t} />
       </div>
-      <div className="mt-8 grid grid-cols-2 gap-3 lg:grid-cols-4">
-        <div className="rounded-md border border-[var(--color-inspector-border)] bg-[var(--color-inspector-surface)] px-4 py-3">
+      <div className="mt-4 grid grid-cols-2 gap-2 lg:grid-cols-4">
+        <div className="rounded-[var(--radius-md)] bg-[var(--color-surface-container)] px-3 py-2.5">
           <ContextStatPill label={t('slash.inspector.context.free')} value={formatNumber(freeTokens)} detail={formatPercent(freePercent)} />
         </div>
-        <div className="rounded-md border border-[var(--color-inspector-border)] bg-[var(--color-inspector-surface)] px-4 py-3">
+        <div className="rounded-[var(--radius-md)] bg-[var(--color-surface-container)] px-3 py-2.5">
           <ContextStatPill label={t('slash.inspector.context.messages')} value={formatNumber(context.messageBreakdown?.assistantMessageTokens ?? 0)} detail={t('slash.inspector.context.assistant')} />
         </div>
-        <div className="rounded-md border border-[var(--color-inspector-border)] bg-[var(--color-inspector-surface)] px-4 py-3">
+        <div className="rounded-[var(--radius-md)] bg-[var(--color-surface-container)] px-3 py-2.5">
           <ContextStatPill label={t('slash.inspector.context.toolResults')} value={formatNumber(context.messageBreakdown?.toolResultTokens ?? 0)} />
         </div>
-        <div className="rounded-md border border-[var(--color-inspector-border)] bg-[var(--color-inspector-surface)] px-4 py-3">
+        <div className="rounded-[var(--radius-md)] bg-[var(--color-surface-container)] px-3 py-2.5">
           <ContextStatPill label={t('slash.inspector.context.context')} value={formatPercent(usedPercent)} />
         </div>
       </div>
@@ -519,7 +521,7 @@ function ContextTab({
 
   const categories = Array.isArray(context.categories) ? context.categories : []
   return (
-    <div className="space-y-6">
+    <div className="space-y-3">
       <ContextOverview context={context} categories={categories} t={t} />
       <MemoryFilesBreakdown files={Array.isArray(context.memoryFiles) ? context.memoryFiles : []} t={t} />
       <CategoryBreakdown categories={categories} rawMaxTokens={context.rawMaxTokens} t={t} />
@@ -547,13 +549,13 @@ function StatusTab({
   const connectedMcp = mcpServers.filter((server) => server.status === 'connected').length
   const failedMcp = mcpServers.filter((server) => server.status === 'failed').length
   return (
-    <div className="space-y-8">
-      <div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
+    <div className="space-y-5">
+      <div className="grid grid-cols-2 gap-2 lg:grid-cols-4">
         <MetricCard
           label={t('slash.inspector.status.cliStatus')}
           value={(
             <span className="inline-flex items-center gap-2">
-              <span className={`h-2 w-2 rounded-full ${data.active ? 'bg-[var(--color-inspector-success)]' : 'bg-[var(--color-inspector-danger)]'}`} />
+              <span className={`h-2 w-2 rounded-full ${data.active ? 'bg-[var(--color-success)]' : 'bg-[var(--color-error)]'}`} />
               {data.active ? t('slash.inspector.status.running') : t('slash.inspector.status.notRunning')}
             </span>
           )}
@@ -567,16 +569,16 @@ function StatusTab({
           label={t('slash.inspector.status.mcpConnections')}
           value={(
             <span>
-              <span className="text-[var(--color-inspector-success)]">{formatNumber(connectedMcp)}</span>
-              <span className="mx-5 text-[var(--color-inspector-text)]">/</span>
-              <span className="text-[var(--color-inspector-danger)]">{formatNumber(failedMcp)}</span>
+              <span className="text-[var(--color-success)]">{formatNumber(connectedMcp)}</span>
+              <span className="mx-2 font-normal text-[var(--color-text-tertiary)]">/</span>
+              <span className="text-[var(--color-error)]">{formatNumber(failedMcp)}</span>
             </span>
           )}
           detail={(
             <span>
-              <span className="text-[var(--color-inspector-success)]">{t('slash.inspector.status.connected')}</span>
-              <span className="mx-5 text-[var(--color-inspector-text)]" />
-              <span className="text-[var(--color-inspector-danger)]">{t('slash.inspector.status.failed')}</span>
+              <span>{t('slash.inspector.status.connected')}</span>
+              <span className="mx-1.5" aria-hidden="true">·</span>
+              <span>{t('slash.inspector.status.failed')}</span>
             </span>
           )}
         />
@@ -587,9 +589,9 @@ function StatusTab({
         <KeyValueRows
           rows={[
             [t('slash.inspector.status.version'), data.status.version ?? t('slash.inspector.status.unknown')],
-            [t('slash.inspector.status.sessionId'), <span className="font-mono text-[13px]">{data.status.sessionId}</span>],
-            [t('slash.inspector.status.workingDirectory'), <span className="font-mono text-[13px]">{data.status.cwd ?? data.status.workDir}</span>],
-            [t('slash.inspector.status.permissionMode'), <span className="rounded-sm bg-[var(--color-inspector-chip)] px-1.5 py-1">{data.status.permissionMode}</span>],
+            [t('slash.inspector.status.sessionId'), <span className="font-mono text-xs">{data.status.sessionId}</span>],
+            [t('slash.inspector.status.workingDirectory'), <span className="font-mono text-xs">{data.status.cwd ?? data.status.workDir}</span>],
+            [t('slash.inspector.status.permissionMode'), <span className="rounded-[var(--radius-xs)] bg-[var(--color-surface-container)] px-1.5 py-0.5 font-mono text-xs">{data.status.permissionMode}</span>],
             [t('slash.inspector.status.authToken'), data.status.apiKeySource ?? t('slash.inspector.status.unknown')],
             [t('slash.inspector.status.outputStyle'), data.status.outputStyle ?? t('slash.inspector.status.default')],
           ]}
@@ -598,19 +600,27 @@ function StatusTab({
       {mcpServers.length > 0 && (
         <section>
           <InspectorSectionTitle
-            action={<button type="button" className="font-mono text-[12px] tracking-[0.18em] text-[var(--color-inspector-accent)] hover:text-[var(--color-inspector-accent-hover)]">↻ {t('slash.inspector.status.refresh')}</button>}
+            action={(
+              <Button
+                variant="ghost"
+                size="sm"
+                icon={<RefreshCw size={12} strokeWidth={2} aria-hidden="true" />}
+              >
+                {t('slash.inspector.status.refresh')}
+              </Button>
+            )}
           >
             {t('slash.inspector.status.mcpServers')}
           </InspectorSectionTitle>
-          <div className="grid gap-3 lg:grid-cols-2">
+          <div className="grid gap-2 lg:grid-cols-2">
             {mcpServers.map((server) => (
               <div
                 key={`${server.name}:${server.status}`}
-                className="flex min-h-[48px] items-center justify-between gap-4 rounded-md border border-[var(--color-inspector-border)] bg-[var(--color-inspector-panel)] px-4 py-3 font-mono"
+                className="flex min-h-10 items-center justify-between gap-3 rounded-[var(--radius-md)] border border-[var(--color-border)] px-3 py-2"
               >
-                <div className="flex min-w-0 items-center gap-3">
+                <div className="flex min-w-0 items-center gap-2.5">
                   <McpServerIcon status={server.status} />
-                  <span className="min-w-0 truncate text-[14px] text-[var(--color-inspector-text)]">{server.name}</span>
+                  <span className="min-w-0 truncate text-[13px] text-[var(--color-text-primary)]">{server.name}</span>
                 </div>
                 <InspectorStatusBadge status={server.status} t={t} />
               </div>
@@ -639,37 +649,29 @@ function SessionInspectorShell({
 }) {
   return (
     <div
-      className="absolute bottom-full left-0 right-0 z-[var(--z-dropdown)] mb-4 overflow-hidden rounded-[var(--radius-md)] border border-[var(--color-inspector-border)] bg-[var(--color-inspector-surface)] text-[var(--color-inspector-text)] shadow-[var(--shadow-inspector)]"
+      className="absolute bottom-full left-0 right-0 z-[var(--z-dropdown)] mb-2 overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] text-[var(--color-text-primary)] shadow-[var(--shadow-dropdown)]"
     >
-      <div className="grid min-h-[64px] grid-cols-[1fr_auto_1fr] items-center border-b border-[var(--color-inspector-border)] bg-[var(--color-inspector-surface)] px-6">
-        <div className="font-mono text-[16px] font-semibold uppercase text-[var(--color-inspector-accent)]">{t('slash.inspector.title')}</div>
-        <div className="flex items-center gap-8">
-          {tabs.map((tab) => (
-            <button
-              key={tab.id}
-              type="button"
-              onClick={() => onSelectTab(tab.id)}
-              className={`relative h-10 px-0 font-sans text-sm transition-colors ${
-                selectedTab === tab.id ? 'text-[var(--color-inspector-accent)]' : 'text-[var(--color-inspector-muted-strong)] hover:text-[var(--color-inspector-accent)]'
-              }`}
-            >
-              {tab.label}
-              {selectedTab === tab.id && <span className="absolute bottom-1 left-0 right-0 h-[2px] bg-[var(--color-inspector-accent)]" />}
-            </button>
-          ))}
-        </div>
+      <div className="grid min-h-12 grid-cols-[1fr_auto_1fr] items-center gap-3 border-b border-[var(--color-border)] px-4 py-2">
+        <div className="truncate text-sm font-semibold text-[var(--color-text-primary)]">{t('slash.inspector.title')}</div>
+        <SegmentedControl
+          as="tablist"
+          size="sm"
+          label={t('slash.inspector.title')}
+          items={tabs.map((tab) => ({ value: tab.id, label: tab.label }))}
+          value={selectedTab}
+          onChange={onSelectTab}
+        />
         <div className="flex justify-end">
-          <button
-            type="button"
+          <IconButton
+            icon={<X size={16} strokeWidth={1.75} aria-hidden="true" />}
+            label={t('slash.inspector.close')}
+            size="sm"
+            tone="muted"
             onClick={onClose}
-            aria-label={t('slash.inspector.close')}
-            className="flex h-10 w-10 items-center justify-center text-[var(--color-inspector-accent)] transition-colors hover:text-[var(--color-inspector-accent-hover)]"
-          >
-            <span className="material-symbols-outlined text-[24px]">close</span>
-          </button>
+          />
         </div>
       </div>
-      <div className="max-h-[min(540px,58vh)] overflow-y-auto bg-[var(--color-inspector-surface)] px-6 py-6">{children}</div>
+      <div className="max-h-[min(540px,58vh)] overflow-y-auto p-4">{children}</div>
     </div>
   )
 }
@@ -848,14 +850,14 @@ function McpPanel({ cwd, onClose }: { cwd?: string; onClose: () => void }) {
       ) : servers.length === 0 ? (
         <EmptyState title={t('slash.mcp.emptyTitle')} description={t('slash.mcp.emptyBody')} />
       ) : (
-        <div className="space-y-5">
+        <div className="space-y-4">
           {['user', 'local', 'project'].filter((scope) => grouped.has(scope)).map((scope) => (
             <section key={scope}>
-              <div className="mb-2 flex items-center justify-between">
-                <div className="text-sm font-semibold text-[var(--color-text-primary)]">{scopeLabel(scope, t)}</div>
-                <div className="text-xs text-[var(--color-text-tertiary)]">{grouped.get(scope)?.length ?? 0}</div>
+              <div className="mb-1.5 flex items-center justify-between px-1">
+                <div className="text-xs font-semibold text-[var(--color-text-tertiary)]">{scopeLabel(scope, t)}</div>
+                <div className="font-mono text-[11px] tabular-nums text-[var(--color-text-tertiary)]">{grouped.get(scope)?.length ?? 0}</div>
               </div>
-              <div className="overflow-hidden rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface)]">
+              <div className="overflow-hidden rounded-[var(--radius-md)] border border-[var(--color-border)]">
                 {grouped.get(scope)?.map((server) => (
                   <button
                     type="button"
@@ -866,15 +868,15 @@ function McpPanel({ cwd, onClose }: { cwd?: string; onClose: () => void }) {
                       useTabStore.getState().openTab(SETTINGS_TAB_ID, 'Settings', 'settings')
                       onClose()
                     }}
-                    className="block w-full border-t border-[var(--color-border)] px-4 py-4 text-left first:border-t-0 hover:bg-[var(--color-surface-hover)]"
+                    className="block w-full border-t border-[var(--color-border)] px-3 py-2.5 text-left transition-colors first:border-t-0 hover:bg-[var(--color-surface-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-border-focus)]"
                   >
-                    <div className="flex items-center gap-3">
-                      <div className="text-sm font-semibold text-[var(--color-text-primary)]">{server.name}</div>
-                      <Badge tone={mcpStatusTone(server.status)} size="md" bordered className="font-semibold">
+                    <div className="flex items-center gap-2">
+                      <div className="text-[13px] font-medium text-[var(--color-text-primary)]">{server.name}</div>
+                      <Badge tone={mcpStatusTone(server.status)} size="md">
                         {server.statusLabel}
                       </Badge>
                     </div>
-                    <div className="mt-2 flex flex-wrap items-center gap-2 text-xs text-[var(--color-text-tertiary)]">
+                    <div className="mt-1.5 flex flex-wrap items-center gap-1.5 text-xs text-[var(--color-text-tertiary)]">
                       <Badge size="md">{server.transport}</Badge>
                       {server.projectPath && (
                         <Badge size="md" title={server.projectPath}>
@@ -929,7 +931,7 @@ function SkillsPanel({ cwd, onClose }: { cwd?: string; onClose: () => void }) {
       ) : skills.length === 0 ? (
         <EmptyState title={t('slash.skills.emptyTitle')} description={t('slash.skills.emptyBody')} />
       ) : (
-        <div className="overflow-hidden rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface)]">
+        <div className="overflow-hidden rounded-[var(--radius-md)] border border-[var(--color-border)]">
           {skills.map((skill) => (
             <button
               type="button"
@@ -940,13 +942,13 @@ function SkillsPanel({ cwd, onClose }: { cwd?: string; onClose: () => void }) {
                 useTabStore.getState().openTab(SETTINGS_TAB_ID, 'Settings', 'settings')
                 onClose()
               }}
-              className="block w-full border-t border-[var(--color-border)] px-4 py-4 text-left first:border-t-0 hover:bg-[var(--color-surface-hover)]"
+              className="block w-full border-t border-[var(--color-border)] px-3 py-2.5 text-left transition-colors first:border-t-0 hover:bg-[var(--color-surface-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-border-focus)]"
             >
-              <div className="flex items-center gap-3">
-                <div className="text-sm font-semibold text-[var(--color-text-primary)]">/{skill.name}</div>
+              <div className="flex items-center gap-2">
+                <div className="font-mono text-[13px] text-[var(--color-text-primary)]">/{skill.name}</div>
                 <Badge size="md">{skill.source}</Badge>
               </div>
-              <div className="mt-2 text-xs leading-6 text-[var(--color-text-tertiary)]">{skill.description}</div>
+              <div className="mt-1 text-xs leading-5 text-[var(--color-text-tertiary)]">{skill.description}</div>
             </button>
           ))}
         </div>
@@ -996,9 +998,9 @@ function HelpPanel({
   )
 
   const renderCommand = (command: SlashCommandOption) => (
-    <div key={command.name} className="flex min-w-0 items-start gap-3 border-t border-[var(--color-border)] px-4 py-3 first:border-t-0">
+    <div key={command.name} className="flex min-w-0 items-start gap-3 border-t border-[var(--color-border)] px-3 py-2 first:border-t-0">
       <div className="flex min-w-[120px] max-w-[45%] shrink-0 flex-wrap items-baseline gap-x-1.5 font-mono">
-        <span className="text-sm font-semibold text-[var(--color-text-primary)]">/{command.name}</span>
+        <span className="text-[13px] text-[var(--color-text-primary)]">/{command.name}</span>
         {command.argumentHint ? (
           <span className="text-[11px] leading-5 text-[var(--color-text-tertiary)]">{command.argumentHint}</span>
         ) : null}
@@ -1021,8 +1023,8 @@ function HelpPanel({
           if (entries.length === 0) return null
           return (
             <section key={group.titleKey}>
-              <div className="mb-2 text-sm font-semibold text-[var(--color-text-primary)]">{t(group.titleKey)}</div>
-              <div className="overflow-hidden rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface)]">
+              <div className="mb-1.5 px-1 text-xs font-semibold text-[var(--color-text-tertiary)]">{t(group.titleKey)}</div>
+              <div className="overflow-hidden rounded-[var(--radius-md)] border border-[var(--color-border)]">
                 {entries.map(renderCommand)}
               </div>
             </section>
@@ -1031,8 +1033,8 @@ function HelpPanel({
 
         {otherCommands.length > 0 && (
           <section>
-            <div className="mb-2 text-sm font-semibold text-[var(--color-text-primary)]">{t('slash.help.group.more')}</div>
-            <div className="overflow-hidden rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface)]">
+            <div className="mb-1.5 px-1 text-xs font-semibold text-[var(--color-text-tertiary)]">{t('slash.help.group.more')}</div>
+            <div className="overflow-hidden rounded-[var(--radius-md)] border border-[var(--color-border)]">
               {otherCommands.map(renderCommand)}
             </div>
             {hiddenOtherCommandCount > 0 && (
diff --git a/desktop/src/components/chat/MermaidRenderer.tsx b/desktop/src/components/chat/MermaidRenderer.tsx
index 2a50fc2b..af8c288d 100644
--- a/desktop/src/components/chat/MermaidRenderer.tsx
+++ b/desktop/src/components/chat/MermaidRenderer.tsx
@@ -5,6 +5,7 @@ import { Button } from '@/components/ui/Button'
 import { IconButton } from '@/components/ui/IconButton'
 import { Modal } from '@/components/ui/Modal'
 import { CopyButton } from '@/components/ui/CopyButton'
+import { CircleAlert, LoaderCircle, Maximize2, Minus, Network, Plus } from 'lucide-react'
 import { useUIStore } from '../../stores/uiStore'
 import { useTranslation } from '../../i18n'
 import { isDarkTheme, type ThemeMode } from '../../types/settings'
@@ -20,7 +21,7 @@ type Props = {
  */
 const COPY_CHIP_CLASS = [
   'inline-flex h-6 items-center justify-center gap-1.5 rounded-[var(--radius-md)]',
-  'border border-[var(--color-border)] px-2 text-xs font-medium',
+  'px-2 text-xs font-medium',
   'text-[var(--color-text-secondary)] transition-colors',
   'hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)]',
   'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]',
@@ -659,9 +660,9 @@ export function MermaidRenderer({ code }: Props) {
 
   if (error) {
     return (
-      <div className="my-4 overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-error-soft-hover)]">
-        <div className="flex items-center gap-2 border-b border-[var(--color-error-soft-hover)] bg-[var(--color-error-container)] px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.14em] text-[var(--color-on-error-container)]">
-          <span className="material-symbols-outlined text-[14px]">error</span>
+      <div className="my-4 overflow-hidden rounded-[var(--radius-md)] border border-[var(--color-error-soft-hover)]">
+        <div className="flex h-[30px] items-center gap-1.5 border-b border-[var(--color-error-soft-hover)] bg-[var(--color-error-container)] px-3 text-[11px] font-medium text-[var(--color-on-error-container)]">
+          <CircleAlert size={13} strokeWidth={1.75} aria-hidden="true" />
           {t('mermaid.renderError')}
         </div>
         <div className="bg-[var(--color-error-soft)] px-3 py-2 font-mono text-[11px] text-[var(--color-on-error-container)]">
@@ -673,9 +674,9 @@ export function MermaidRenderer({ code }: Props) {
 
   if (!svg) {
     return (
-      <div className="my-4 flex items-center justify-center rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)] py-8">
-        <div className="flex items-center gap-2 text-[11px] text-[var(--color-text-tertiary)]">
-          <span className="material-symbols-outlined animate-spin text-[16px]">progress_activity</span>
+      <div className="my-4 flex items-center justify-center rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)] py-8">
+        <div className="flex items-center gap-2 text-xs text-[var(--color-text-tertiary)]">
+          <LoaderCircle size={14} strokeWidth={1.75} className="animate-spin" aria-hidden="true" />
           {t('mermaid.rendering')}
         </div>
       </div>
@@ -684,20 +685,19 @@ export function MermaidRenderer({ code }: Props) {
 
   return (
     <>
-      <div className="my-4 overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)]">
-        {/* Header */}
-        <div className="flex items-center justify-between border-b border-[var(--color-border)] bg-[var(--color-surface-container)] px-3 py-1.5 text-[11px] text-[var(--color-text-tertiary)]">
-          <div className="flex items-center gap-2">
-            <span className="material-symbols-outlined text-[14px]">account_tree</span>
-            <span className="font-semibold uppercase tracking-[0.14em]">Mermaid</span>
-          </div>
+      <div className="my-4 overflow-hidden rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-code-bg)]">
+        {/* Header: the same quiet 30px line as a code block. */}
+        <div className="flex h-[30px] items-center justify-between border-b border-[var(--color-border)] pl-3 pr-1 text-[11px] text-[var(--color-text-tertiary)]">
           <div className="flex items-center gap-1.5">
+            <Network size={12} strokeWidth={2} aria-hidden="true" />
+            <span className="font-mono">mermaid</span>
+          </div>
+          <div className="flex items-center gap-0.5">
             <Button
               variant="ghost"
               size="sm"
               onClick={handlePreview}
-              className="border border-[var(--color-border)]"
-              icon={<span className="material-symbols-outlined text-[12px]" aria-hidden="true">fullscreen</span>}
+              icon={<Maximize2 size={12} strokeWidth={2} aria-hidden="true" />}
             >
               {t('mermaid.preview')}
             </Button>
@@ -728,13 +728,13 @@ export function MermaidRenderer({ code }: Props) {
         <div className="space-y-3">
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-2 text-sm font-semibold text-[var(--color-text-primary)]">
-              <span className="material-symbols-outlined text-[18px]">account_tree</span>
+              <Network size={16} strokeWidth={1.75} aria-hidden="true" className="text-[var(--color-text-tertiary)]" />
               {t('mermaid.previewTitle')}
             </div>
             <div className="flex items-center gap-2">
-              <div className="flex items-center gap-1 rounded-lg border border-[var(--color-border)] bg-[var(--color-surface-container-low)] px-1 py-1">
+              <div className="flex items-center gap-1 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)] p-0.5">
                 <IconButton
-                  icon="remove"
+                  icon={<Minus size={16} strokeWidth={1.75} aria-hidden="true" />}
                   label={t('mermaid.zoomOut')}
                   showTooltip={false}
                   size="md"
@@ -745,7 +745,7 @@ export function MermaidRenderer({ code }: Props) {
                   variant="ghost"
                   size="base"
                   onClick={resetZoom}
-                  className="min-w-[68px] font-semibold"
+                  className="min-w-[68px] tabular-nums"
                 >
                   {Math.round(previewZoom * 100)}%
                 </Button>
@@ -754,12 +754,11 @@ export function MermaidRenderer({ code }: Props) {
                   size="base"
                   onClick={fitPreview}
                   aria-label={t('mermaid.fitDiagram')}
-                  className="font-semibold"
                 >
                   {t('mermaid.fit')}
                 </Button>
                 <IconButton
-                  icon="add"
+                  icon={<Plus size={16} strokeWidth={1.75} aria-hidden="true" />}
                   label={t('mermaid.zoomIn')}
                   showTooltip={false}
                   size="md"
@@ -773,7 +772,7 @@ export function MermaidRenderer({ code }: Props) {
           <div
             ref={previewViewportRef}
             data-testid="mermaid-preview-viewport"
-            className="overflow-auto rounded-xl bg-[var(--color-surface-container-lowest)]"
+            className="overflow-auto rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)]"
             style={{
               maxHeight: '75vh',
               cursor: isDraggingPreview ? 'grabbing' : 'grab',
@@ -800,7 +799,7 @@ export function MermaidRenderer({ code }: Props) {
                 </div>
               </div>
             </div>
-          <div className="text-[11px] text-[var(--color-text-tertiary)]">
+          <div className="text-xs text-[var(--color-text-tertiary)]">
             {t('mermaid.previewHint')}
           </div>
         </div>
diff --git a/desktop/src/components/chat/MessageActionBar.tsx b/desktop/src/components/chat/MessageActionBar.tsx
index c6ed951a..a27c077e 100644
--- a/desktop/src/components/chat/MessageActionBar.tsx
+++ b/desktop/src/components/chat/MessageActionBar.tsx
@@ -19,16 +19,19 @@ export type MessageEditAction = {
 
 /**
  * The copy chip and the branch chip sit side by side and must look identical.
- * The branch one is an `IconButton size="sm" tone="muted" shape="circle"`;
- * `CopyButton` is styled by className, so its shell is mirrored here.
+ * The branch one is an `IconButton size="xs" tone="muted"`; `CopyButton` is
+ * styled by className, so its shell is mirrored here.
  */
 const ACTION_CHIP_CLASS = [
-  'inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full',
+  'inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-[var(--radius-sm)]',
   'text-[var(--color-text-tertiary)] transition-colors duration-150 cursor-pointer',
   'hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)]',
   'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]',
 ].join(' ')
 
+const ICON_SIZE = 14
+const ICON_STROKE = 1.75
+
 type Props = {
   copyText?: string
   copyLabel: string
@@ -44,6 +47,13 @@ type Props = {
    * present affordance hard to find.
    */
   alwaysVisible?: boolean
+  /**
+   * `overlay` hangs the bar just under its message, absolutely positioned, so a
+   * hover-only bar never holds the transcript open by its own height. The
+   * caller's shell must be `relative`; the space it lands in is the turn gap
+   * that `.chat-turn-rail--none` already reserves, not something the bar adds.
+   */
+  placement?: 'inline' | 'overlay'
 }
 
 export function MessageActionBar({
@@ -55,6 +65,7 @@ export function MessageActionBar({
   timestamp,
   metadata,
   alwaysVisible = false,
+  placement = 'inline',
 }: Props) {
   const locale = useSettingsStore((state) => state.locale)
   const hasCopy = Boolean(copyText?.trim())
@@ -71,30 +82,35 @@ export function MessageActionBar({
     <div
       data-message-actions
       data-align={align}
-      className={`mt-2 flex h-7 w-full transition-opacity duration-150 ${
+      data-placement={placement}
+      className={[
+        'flex h-6 transition-opacity duration-150',
+        placement === 'overlay'
+          ? `absolute top-full ${align === 'end' ? 'right-0' : 'left-0'}`
+          : 'mt-1.5 w-full',
         alwaysVisible
           ? ''
-          : 'pointer-events-none opacity-0 group-hover:pointer-events-auto group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:opacity-100'
-      } ${align === 'end' ? 'justify-end' : 'justify-start'}`}
+          : 'pointer-events-none opacity-0 group-hover:pointer-events-auto group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:opacity-100',
+        align === 'end' ? 'justify-end' : 'justify-start',
+      ].filter(Boolean).join(' ')}
     >
-      <div className="flex min-h-7 min-w-0 items-center gap-1.5">
+      <div className="flex min-h-6 min-w-0 items-center gap-0.5">
         {hasCopy ? (
           <CopyButton
             text={copyText!}
             label={copyLabel}
-            displayLabel={<Copy size={13} strokeWidth={2.2} aria-hidden="true" />}
-            displayCopiedLabel={<Check size={13} strokeWidth={2.4} aria-hidden="true" />}
+            displayLabel={<Copy size={ICON_SIZE} strokeWidth={ICON_STROKE} aria-hidden="true" />}
+            displayCopiedLabel={<Check size={ICON_SIZE} strokeWidth={ICON_STROKE} aria-hidden="true" />}
             onPointerUp={(event) => event.currentTarget.blur()}
             className={ACTION_CHIP_CLASS}
           />
         ) : null}
         {branchAction ? (
           <IconButton
-            icon={<GitFork size={13} strokeWidth={2.2} aria-hidden="true" />}
+            icon={<GitFork size={ICON_SIZE} strokeWidth={ICON_STROKE} aria-hidden="true" />}
             label={branchAction.label}
-            size="sm"
+            size="xs"
             tone="muted"
-            shape="circle"
             disabled={branchAction.loading}
             onClick={branchAction.onBranch}
             onPointerUp={(event) => event.currentTarget.blur()}
@@ -102,24 +118,23 @@ export function MessageActionBar({
         ) : null}
         {editAction ? (
           <IconButton
-            icon={<Pencil size={13} strokeWidth={2.2} aria-hidden="true" />}
+            icon={<Pencil size={ICON_SIZE} strokeWidth={ICON_STROKE} aria-hidden="true" />}
             label={editAction.label}
-            size="sm"
+            size="xs"
             tone="muted"
-            shape="circle"
             disabled={editAction.disabled}
             onClick={editAction.onEdit}
             onPointerUp={(event) => event.currentTarget.blur()}
           />
         ) : null}
         {metadata ? (
-          <span className={hasCopy || branchAction || editAction ? 'ml-3 min-w-0' : 'min-w-0'}>
+          <span className={hasCopy || branchAction || editAction ? 'ml-2 min-w-0' : 'min-w-0'}>
             {metadata}
           </span>
         ) : null}
         {hoverTimeLabel ? (
           <span
-            className="ml-1 inline-flex items-center text-[11px] font-medium tabular-nums text-[var(--color-text-tertiary)]"
+            className="ml-1.5 inline-flex items-center whitespace-nowrap text-xs tabular-nums text-[var(--color-text-tertiary)]"
             title={exactTimeLabel || hoverTimeLabel}
           >
             {hoverTimeLabel}
diff --git a/desktop/src/components/chat/MessageList.test.tsx b/desktop/src/components/chat/MessageList.test.tsx
index 24b3a051..d4e3d065 100644
--- a/desktop/src/components/chat/MessageList.test.tsx
+++ b/desktop/src/components/chat/MessageList.test.tsx
@@ -2180,22 +2180,27 @@ describe('MessageList nested tool calls', () => {
     }
 
     setChatState('thinking')
-    render(<MessageList />)
+    const { container } = render(<MessageList />)
     fireEvent.click(screen.getByRole('button', { name: /dispatched 4 agents/i }))
 
+    // One pill for the group; each row carries its state on its avatar.
+    const runningRows = () => container.querySelectorAll('[data-agent-call-layout="row"][data-agent-status="running"]')
     expect(screen.queryByText('Starting')).toBeNull()
-    expect(screen.getAllByText('Running')).toHaveLength(5)
+    expect(screen.getAllByText('Running')).toHaveLength(1)
+    expect(runningRows()).toHaveLength(4)
 
     act(() => setChatState('tool_executing'))
     await waitFor(() => {
       expect(screen.queryByText('Starting')).toBeNull()
-      expect(screen.getAllByText('Running')).toHaveLength(5)
+      expect(screen.getAllByText('Running')).toHaveLength(1)
+      expect(runningRows()).toHaveLength(4)
     })
 
     act(() => setChatState('thinking'))
     await waitFor(() => {
       expect(screen.queryByText('Starting')).toBeNull()
-      expect(screen.getAllByText('Running')).toHaveLength(5)
+      expect(screen.getAllByText('Running')).toHaveLength(1)
+      expect(runningRows()).toHaveLength(4)
     })
   })
 
@@ -2588,7 +2593,8 @@ describe('MessageList nested tool calls', () => {
     render(<MessageList sessionId={ACTIVE_TAB} />)
 
     expect(screen.getByText('1 memory reference(s)')).toBeTruthy()
-    expect(screen.getByText('Bash')).toBeTruthy()
+    // Led by its verb; the raw tool name is the row's tooltip.
+    expect(screen.getByText('Run')).toBeTruthy()
     expect(screen.getByText('bun test')).toBeTruthy()
   })
 
@@ -5884,11 +5890,20 @@ describe('MessageList nested tool calls', () => {
     expect(assistantShell?.className).not.toContain('ml-10')
     expect(userActions?.getAttribute('data-align')).toBe('end')
     expect(assistantActions?.getAttribute('data-align')).toBe('start')
-    expect(userActions?.className).toContain('h-7')
-    expect(userActions?.className).toContain('mt-2')
+    // The prompt's bar hangs under the bubble out of flow: hovering never moves
+    // the transcript, and the bar holds no height of its own when hidden.
+    expect(userShell?.className).toContain('relative')
+    expect(userActions?.getAttribute('data-placement')).toBe('overlay')
+    expect(userActions?.className).toContain('absolute')
+    expect(userActions?.className).toContain('top-full')
+    expect(userActions?.className).toContain('right-0')
+    expect(userActions?.className).not.toContain('mt-2')
     expect(userActions?.className).not.toContain('h-0')
-    expect(userActions?.className).not.toContain('group-hover:h-7')
+    expect(userActions?.className).not.toContain('group-hover:h-')
     expect(userActions?.className).not.toContain('invisible')
+    // The closing reply's bar stays in flow: it is always shown.
+    expect(assistantActions?.getAttribute('data-placement')).toBe('inline')
+    expect(assistantActions?.className).not.toContain('absolute')
     expect(userTime.getAttribute('title')).toBe(formatExactMessageTimestamp(userTimestamp, 'en'))
     // The closing reply's bar is not hover-gated: it is rare and deliberate now,
     // so hiding it until hover would only make a present affordance hard to find.
diff --git a/desktop/src/components/chat/MessageList.tsx b/desktop/src/components/chat/MessageList.tsx
index e85858fd..60d74d51 100644
--- a/desktop/src/components/chat/MessageList.tsx
+++ b/desktop/src/components/chat/MessageList.tsx
@@ -429,7 +429,7 @@ function BackgroundTaskEventCard({ message }: { message: BackgroundTaskEvent })
       >
         <span className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center">
           {isRunning ? (
-            <LoaderCircle size={15} strokeWidth={2.25} className="animate-spin text-[var(--color-brand)]" aria-hidden="true" />
+            <LoaderCircle size={15} strokeWidth={1.75} className="animate-spin text-[var(--color-info)]" aria-hidden="true" />
           ) : isFailed ? (
             <XCircle size={15} strokeWidth={2.25} className="text-[var(--color-error)]" aria-hidden="true" />
           ) : isStopped ? (
@@ -1141,7 +1141,7 @@ function TeamCoordinationAudit({ toolCalls }: { toolCalls: ToolCall[] }) {
           const summary = coordinationToolSummary(toolCall)
           return (
             <li key={toolCall.toolUseId} className="flex min-w-0 items-start gap-2">
-              <code className="shrink-0 font-mono text-[10px] font-semibold text-[var(--color-text-tertiary)]">
+              <code className="shrink-0 font-mono text-[11px] text-[var(--color-text-tertiary)]">
                 {toolCall.toolName}
               </code>
               {summary ? <span className="min-w-0 break-words">{summary}</span> : null}
@@ -1512,14 +1512,14 @@ function MemoryEventCard({ message }: { message: MemoryEvent }) {
 
   return (
     <div className="mb-3 flex justify-center px-3">
-      <div className="w-full max-w-2xl rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)] px-3.5 py-3 text-xs shadow-[var(--shadow-card)]">
+      <div className="w-full max-w-2xl rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] px-3.5 py-3 text-xs">
         <div className="flex items-start gap-3">
-          <div className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] text-[var(--color-brand)]">
-            <BookMarked size={15} aria-hidden="true" />
+          <div className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-[var(--radius-md)] bg-[var(--color-surface-container)] text-[var(--color-text-secondary)]">
+            <BookMarked size={15} strokeWidth={1.75} aria-hidden="true" />
           </div>
           <div className="min-w-0 flex-1">
             <div className="flex flex-wrap items-center justify-between gap-2">
-              <div className="font-medium text-[var(--color-text-primary)]">
+              <div className="text-[13px] font-medium text-[var(--color-text-primary)]">
                 {t('chat.memorySavedTitle', { count: message.files.length })}
               </div>
               <Button
@@ -1539,13 +1539,13 @@ function MemoryEventCard({ message }: { message: MemoryEvent }) {
                 <span
                   key={file.path}
                   title={file.path}
-                  className="max-w-full truncate rounded-[var(--radius-sm)] border border-[var(--color-border)] bg-[var(--color-surface)] px-2 py-1 font-mono text-[10px] text-[var(--color-text-secondary)]"
+                  className="max-w-full truncate rounded-[var(--radius-xs)] bg-[var(--color-surface-container)] px-1.5 py-0.5 font-mono text-[11px] text-[var(--color-text-secondary)]"
                 >
                   {memoryFileLabel(file.path)}
                 </span>
               ))}
               {hiddenCount > 0 ? (
-                <span className="rounded-[var(--radius-sm)] border border-[var(--color-border)] bg-[var(--color-surface)] px-2 py-1 font-mono text-[10px] text-[var(--color-text-tertiary)]">
+                <span className="rounded-[var(--radius-xs)] bg-[var(--color-surface-container)] px-1.5 py-0.5 text-[11px] text-[var(--color-text-tertiary)]">
                   {t('chat.memoryMoreFiles', { count: hiddenCount })}
                 </span>
               ) : null}
@@ -1795,7 +1795,7 @@ function collectConversationFindRanges(root: Node, query: string) {
   const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, {
     acceptNode(node) {
       if (!node.nodeValue || !node.nodeValue.trim()) return NodeFilter.FILTER_REJECT
-      if (node.parentElement?.closest('[data-find-bar], script, style, noscript, .material-symbols-outlined')) {
+      if (node.parentElement?.closest('[data-find-bar], script, style, noscript')) {
         return NodeFilter.FILTER_REJECT
       }
       return NodeFilter.FILTER_ACCEPT
@@ -3871,7 +3871,7 @@ export function MessageList({
           )}
 
           {!isLoadingTurnChangeCards && visibleTurnChangeCards.length === 0 && turnChangeLoadError && (
-            <div className="mx-auto mb-5 w-full max-w-[var(--chat-content-max-width)] rounded-[var(--radius-lg)] border border-[var(--color-error)] bg-[var(--color-error-container)] px-4 py-3 text-xs text-[var(--color-on-error-container)]">
+            <div className="mx-auto mb-5 w-full max-w-[var(--chat-content-max-width)] rounded-[var(--radius-md)] bg-[var(--color-error-container)] px-3.5 py-2.5 text-xs text-[var(--color-on-error-container)]">
               {turnChangeLoadError}
             </div>
           )}
@@ -3907,7 +3907,7 @@ export function MessageList({
           aria-label={t('chat.jumpToLatest')}
           // `glass-panel` is unlayered CSS, so it wins over the variant's
           // layered background/border utilities without a tailwind-merge.
-          className="glass-panel absolute bottom-4 right-5 z-20 rounded-full text-[13.5px] font-medium hover:-translate-y-px motion-reduce:hover:translate-y-0"
+          className="glass-panel absolute bottom-4 right-5 z-20 rounded-full text-[13px] font-medium hover:-translate-y-px motion-reduce:hover:translate-y-0"
           icon={<ArrowDown size={15} aria-hidden="true" />}
         >
           {t('chat.jumpToLatest')}
@@ -4115,7 +4115,7 @@ export const MessageBlock = memo(function MessageBlock({
         message.message.trim() !== '' &&
         message.message !== displayMessage
       return (
-        <div className="mb-3 px-4 py-2.5 rounded-[var(--radius-lg)] border border-[var(--color-error)] bg-[var(--color-error-container)] text-sm text-[var(--color-on-error-container)]">
+        <div className="mb-3 rounded-[var(--radius-md)] bg-[var(--color-error-container)] px-3.5 py-2.5 text-[13px] text-[var(--color-on-error-container)]">
           <strong>{t('common.error')}:</strong> {displayMessage}
           {showRawDetail && (
             <div className="mt-1 whitespace-pre-wrap text-xs text-[var(--color-on-error-container)]">
diff --git a/desktop/src/components/chat/MessagePayloadRetention.test.tsx b/desktop/src/components/chat/MessagePayloadRetention.test.tsx
index 2a422746..88b06904 100644
--- a/desktop/src/components/chat/MessagePayloadRetention.test.tsx
+++ b/desktop/src/components/chat/MessagePayloadRetention.test.tsx
@@ -1,7 +1,7 @@
 import '@testing-library/jest-dom'
 import { readFileSync } from 'node:fs'
 import { resolve } from 'node:path'
-import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { act, cleanup, fireEvent, render, screen, waitFor, within } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { AttachmentGallery } from '@/components/chat/AttachmentGallery'
 import { MessageActionBar } from '@/components/chat/MessageActionBar'
@@ -53,8 +53,10 @@ describe('complete message payloads', () => {
     await act(async () => {
       render(<ToolCallBlock toolName="Edit" input={message.input} result={{ content: 'Successfully edited file', isError: false }} defaultExpanded />)
     })
-    expect(screen.getByText('+1')).toBeInTheDocument()
-    expect(screen.getByText('-130')).toBeInTheDocument()
+    // Counted over the whole payload, in the diff block's own head.
+    const diffHead = within(document.querySelector<HTMLElement>('[data-diff-block]')!)
+    expect(diffHead.getByText('+1')).toBeInTheDocument()
+    expect(diffHead.getByText('−130')).toBeInTheDocument()
     expect(screen.getByText('HEAD_SENTINEL')).toBeInTheDocument()
     expect(screen.getAllByText(oldLine)).toHaveLength(128)
     expect(screen.getByText('TAIL_SENTINEL')).toBeInTheDocument()
diff --git a/desktop/src/components/chat/PermissionDialog.tsx b/desktop/src/components/chat/PermissionDialog.tsx
index cbb72a88..8ac50dfd 100644
--- a/desktop/src/components/chat/PermissionDialog.tsx
+++ b/desktop/src/components/chat/PermissionDialog.tsx
@@ -1,4 +1,24 @@
 import { useState } from 'react'
+import {
+  Bot,
+  Box,
+  Check,
+  ChevronDown,
+  ChevronUp,
+  Download,
+  FilePen,
+  FilePlus,
+  FileSearch,
+  FileText,
+  Folder,
+  Globe,
+  ListChecks,
+  NotebookPen,
+  Search,
+  Shield,
+  SquareTerminal,
+  type LucideIcon,
+} from 'lucide-react'
 import { getPendingPermission, useChatStore } from '../../stores/chatStore'
 import { useTabStore } from '../../stores/tabStore'
 import { useSessionRuntimeStore } from '../../stores/sessionRuntimeStore'
@@ -32,23 +52,38 @@ type Props = {
 }
 
 /**
- * Icons for known tool types.
- * Uses Material Symbols Outlined names.
+ * The glyph in the card's icon block, per tool. The block itself is always the
+ * warning pair (`--color-warning-container` / `--color-on-warning-container`):
+ * the card means "waiting for you", whatever the tool. It used to tint the
+ * block by appending an alpha suffix to a `var(...)` string (`${color}18`),
+ * which is not a color at all and rendered no background.
  */
-const TOOL_META: Record<string, { icon: string; label: string; color: string }> = {
-  Bash: { icon: 'terminal', label: 'Bash', color: 'var(--color-warning)' },
-  Edit: { icon: 'edit_note', label: 'Edit File', color: 'var(--color-brand)' },
-  Write: { icon: 'edit_document', label: 'Write File', color: 'var(--color-success)' },
-  Read: { icon: 'description', label: 'Read File', color: 'var(--color-secondary)' },
-  Glob: { icon: 'search', label: 'Glob Search', color: 'var(--color-secondary)' },
-  Grep: { icon: 'find_in_page', label: 'Grep Search', color: 'var(--color-secondary)' },
-  Agent: { icon: 'smart_toy', label: 'Agent', color: 'var(--color-tertiary)' },
-  WebSearch: { icon: 'travel_explore', label: 'Web Search', color: 'var(--color-secondary)' },
-  WebFetch: { icon: 'cloud_download', label: 'Web Fetch', color: 'var(--color-secondary)' },
-  NotebookEdit: { icon: 'note', label: 'Notebook Edit', color: 'var(--color-brand)' },
-  Skill: { icon: 'auto_awesome', label: 'Skill', color: 'var(--color-tertiary)' },
+const TOOL_ICONS: Record<string, LucideIcon> = {
+  Bash: SquareTerminal,
+  Edit: FilePen,
+  Write: FilePlus,
+  Read: FileText,
+  Glob: Search,
+  Grep: FileSearch,
+  Agent: Bot,
+  WebSearch: Globe,
+  WebFetch: Download,
+  NotebookEdit: NotebookPen,
+  Skill: Box,
 }
 
+/** Card shell shared by the permission and plan-approval cards (「素」). */
+const PENDING_CARD =
+  'mb-4 overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-outline)] bg-[var(--color-surface-container-lowest)] shadow-[var(--shadow-raised)]'
+
+/** A request that has been answered collapses to one quiet line. */
+const RESOLVED_ROW =
+  'mb-4 flex min-h-9 min-w-0 items-center gap-2 rounded-[var(--radius-lg)] border border-[var(--color-border)] py-1.5 pl-3 pr-2 text-[13px] text-[var(--color-text-secondary)]'
+
+/** Sunken inset for commands, paths and raw input inside the card. */
+const INSET_BLOCK =
+  'rounded-[var(--radius-md)] bg-[var(--color-surface-container)] px-3 py-2.5 font-mono text-xs leading-[1.6] text-[var(--color-text-primary)]'
+
 /**
  * Extract human-readable detail lines from tool input.
  */
@@ -126,9 +161,9 @@ function renderPermissionPreview(toolName: string, input: unknown) {
 
   if (toolName === 'Bash' && typeof obj.command === 'string') {
     return (
-      <div className="overflow-x-auto rounded-[var(--radius-md)] bg-[var(--color-terminal-bg)] px-3 py-2.5">
-        <pre className="font-mono text-[11px] leading-[1.3] text-[var(--color-terminal-fg)] whitespace-pre-wrap break-words">
-          <span className="text-[var(--color-terminal-accent)] select-none">$ </span>{obj.command}
+      <div className={`overflow-x-auto ${INSET_BLOCK}`}>
+        <pre className="whitespace-pre-wrap break-words font-mono">
+          <span className="select-none text-[var(--color-brand)]">$ </span>{obj.command}
         </pre>
       </div>
     )
@@ -160,7 +195,7 @@ export function PermissionDialog({ sessionId, requestId, toolName, input, descri
     )
   }
 
-  const meta = TOOL_META[toolName] || { icon: 'shield', label: toolName, color: 'var(--color-text-tertiary)' }
+  const ToolIcon = TOOL_ICONS[toolName] ?? Shield
   const details = extractToolDetails(toolName, input, t)
   const rawInput = typeof input === 'string' ? input : JSON.stringify(input, null, 2)
   const preview = renderPermissionPreview(toolName, input)
@@ -168,82 +203,69 @@ export function PermissionDialog({ sessionId, requestId, toolName, input, descri
   const allowRawToggle = !preview
   const permissionContext = (details.primary || description || toolName).slice(0, 160)
 
+  if (!isPending) {
+    return (
+      <div role="group" aria-label={`${title}: ${permissionContext}`} className={RESOLVED_ROW}>
+        <ToolIcon aria-hidden="true" size={14} strokeWidth={1.75} className="shrink-0 text-[var(--color-text-tertiary)]" />
+        <span className="min-w-0 flex-1 truncate">{title}</span>
+        {details.primary ? (
+          <span className="hidden min-w-0 max-w-[45%] truncate font-mono text-xs text-[var(--color-text-tertiary)] sm:block" title={details.primary}>
+            {details.primary}
+          </span>
+        ) : null}
+        <Badge icon={<Check aria-hidden="true" size={12} strokeWidth={2} />}>
+          {t('permission.responded')}
+        </Badge>
+      </div>
+    )
+  }
+
   return (
     <div
       role="group"
       aria-label={`${title}: ${permissionContext}`}
-      className={`mb-4 overflow-hidden rounded-[var(--radius-lg)] border ${
-        isPending
-          ? 'border-[var(--color-warning)] bg-[var(--color-surface-container-lowest)]'
-          : 'border-[var(--color-border)] bg-[var(--color-surface-container-low)] opacity-70'
-      }`}
+      className={PENDING_CARD}
     >
-      {/* Header */}
-      <div className={`flex items-center gap-3 px-4 py-3 ${
-        isPending
-          ? 'bg-[var(--color-surface-container)]'
-          : 'bg-[var(--color-surface-container-low)]'
-      }`}>
-        <div
-          className="flex items-center justify-center w-8 h-8 rounded-[var(--radius-md)]"
-          style={{ backgroundColor: `${meta.color}18` }}
-        >
-          <span
-            aria-hidden="true"
-            className="material-symbols-outlined text-[18px]"
-            style={{ color: meta.color }}
-          >
-            {meta.icon}
-          </span>
+      {/* Header: icon block, title over context, "awaiting" pill. */}
+      <div className="flex items-start gap-3 px-4 pb-3 pt-3.5">
+        <div className="flex h-[30px] w-[30px] shrink-0 items-center justify-center rounded-[var(--radius-md)] bg-[var(--color-warning-container)] text-[var(--color-on-warning-container)]">
+          <ToolIcon aria-hidden="true" size={16} strokeWidth={1.75} />
         </div>
-        <div className="flex-1 min-w-0">
-          <div className="flex items-center gap-2">
-            <span className="text-sm font-semibold text-[var(--color-text-primary)]">
-              {title}
-            </span>
-            {isPending && (
-              <Badge
-                tone="warning"
-                icon={<StatusDot tone="warning" pulse />}
-                className="font-bold uppercase tracking-wider"
-              >
-                {t('permission.awaitingApproval')}
-              </Badge>
-            )}
-            {!isPending && (
-              <span className="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider bg-[var(--color-surface-container-high)] text-[var(--color-text-tertiary)]">
-                {t('permission.responded')}
-              </span>
-            )}
+        <div className="min-w-0 flex-1">
+          <div className="text-sm font-semibold leading-[1.4] text-[var(--color-text-primary)]">
+            {title}
           </div>
           {description && (
-            <p className="mt-0.5 text-xs text-[var(--color-text-secondary)] truncate">{description}</p>
+            <p className="mt-0.5 truncate text-xs text-[var(--color-text-tertiary)]">{description}</p>
           )}
         </div>
+        <Badge
+          tone="warning"
+          icon={<StatusDot tone="warning" pulse />}
+          className="shrink-0"
+        >
+          {t('permission.awaitingApproval')}
+        </Badge>
       </div>
 
       {/* Tool details */}
-      <div className="border-t border-[var(--color-border)] px-4 py-3">
+      <div className="px-4">
         {preview ? (
           <div className="space-y-2">
             {details.primary && toolName !== 'Bash' ? (
-              <div className="flex items-center gap-2 rounded-[var(--radius-md)] bg-[var(--color-surface-container)] px-3 py-2 text-xs font-mono text-[var(--color-text-secondary)]">
-                <span aria-hidden="true" className="material-symbols-outlined text-[14px] text-[var(--color-outline)] flex-shrink-0">
-                  folder_open
-                </span>
+              <div className="flex items-center gap-2 rounded-[var(--radius-md)] bg-[var(--color-surface-container)] px-3 py-2 font-mono text-xs text-[var(--color-text-secondary)]">
+                <Folder aria-hidden="true" size={14} strokeWidth={1.75} className="shrink-0 text-[var(--color-text-tertiary)]" />
                 <span className="truncate">{details.primary}</span>
               </div>
             ) : null}
             {preview}
           </div>
         ) : details.primary ? (
-          <div className="mb-2">
-            <div className="flex items-center gap-2 rounded-[var(--radius-md)] bg-[var(--color-surface-container)] px-3 py-2 text-xs font-mono text-[var(--color-text-secondary)]">
-              <span aria-hidden="true" className="material-symbols-outlined text-[14px] text-[var(--color-outline)] flex-shrink-0">
-                {toolName === 'Glob' || toolName === 'Grep' ? 'search' : 'folder_open'}
-              </span>
-              <span className="truncate">{details.primary}</span>
-            </div>
+          <div className="flex items-center gap-2 rounded-[var(--radius-md)] bg-[var(--color-surface-container)] px-3 py-2 font-mono text-xs text-[var(--color-text-secondary)]">
+            {toolName === 'Glob' || toolName === 'Grep'
+              ? <Search aria-hidden="true" size={14} strokeWidth={1.75} className="shrink-0 text-[var(--color-text-tertiary)]" />
+              : <Folder aria-hidden="true" size={14} strokeWidth={1.75} className="shrink-0 text-[var(--color-text-tertiary)]" />}
+            <span className="truncate">{details.primary}</span>
           </div>
         ) : null}
 
@@ -254,66 +276,53 @@ export function PermissionDialog({ sessionId, requestId, toolName, input, descri
 
         {allowRawToggle && (
           <Button
-            variant="link"
-            size="xs"
+            variant="ghost"
+            size="sm"
             onClick={() => setShowRaw(!showRaw)}
-            className="mt-2"
-            icon={(
-              <span aria-hidden="true" className="material-symbols-outlined text-[14px]">
-                {showRaw ? 'expand_less' : 'expand_more'}
-              </span>
-            )}
+            className="-ml-2 mt-1.5"
+            icon={showRaw
+              ? <ChevronUp aria-hidden="true" size={14} strokeWidth={1.75} />
+              : <ChevronDown aria-hidden="true" size={14} strokeWidth={1.75} />}
           >
             {showRaw ? t('permission.hideDetails') : t('permission.showFullInput')}
           </Button>
         )}
 
         {allowRawToggle && showRaw && (
-          <pre className="mt-2 max-h-[220px] overflow-y-auto overflow-x-auto rounded-[var(--radius-md)] bg-[var(--color-terminal-bg)] px-3 py-2.5 font-mono text-[11px] leading-[1.3] text-[var(--color-terminal-fg)] whitespace-pre-wrap break-words">
+          <pre className={`mt-1.5 max-h-[220px] overflow-auto whitespace-pre-wrap break-words ${INSET_BLOCK}`}>
             {rawInput}
           </pre>
         )}
       </div>
 
-      {/* Action buttons */}
-      {isPending && (
-        <div className="flex items-center gap-2 border-t border-[var(--color-border)] bg-[var(--color-surface-container-low)] px-4 py-3">
-          <Button
-            variant="primary"
-            size="sm"
-            aria-label={`${t('permission.allow')}: ${permissionContext}`}
-            onClick={() => targetSessionId && respondToPermission(targetSessionId, requestId, true)}
-            icon={
-              <span aria-hidden="true" className="material-symbols-outlined text-[14px]">check</span>
-            }
-          >
-            {t('permission.allow')}
-          </Button>
-          <Button
-            variant="ghost"
-            size="sm"
-            aria-label={`${t('permission.allowForSession')}: ${permissionContext}`}
-            onClick={() => targetSessionId && respondToPermission(targetSessionId, requestId, true, { rule: 'always' })}
-            icon={
-              <span aria-hidden="true" className="material-symbols-outlined text-[14px]">verified</span>
-            }
-          >
-            {t('permission.allowForSession')}
-          </Button>
-          <div className="flex-1" />
-          <Button
-            variant="danger"
-            size="sm"
-            aria-label={`${t('permission.deny')}: ${permissionContext}`}
-            onClick={() => targetSessionId && respondToPermission(targetSessionId, requestId, false)}
-            icon={
-              <span aria-hidden="true" className="material-symbols-outlined text-[14px]">close</span>
-            }
-          >
-            {t('permission.deny')}
-          </Button>
-        </div>
-      )}
+      {/* Actions: confirm on the left, the quiet way out on the right. */}
+      <div className="flex flex-wrap items-center gap-2 px-4 pb-3.5 pt-3">
+        <Button
+          variant="primary"
+          size="base"
+          aria-label={`${t('permission.allow')}: ${permissionContext}`}
+          onClick={() => targetSessionId && respondToPermission(targetSessionId, requestId, true)}
+        >
+          {t('permission.allow')}
+        </Button>
+        <Button
+          variant="secondary"
+          size="base"
+          aria-label={`${t('permission.allowForSession')}: ${permissionContext}`}
+          onClick={() => targetSessionId && respondToPermission(targetSessionId, requestId, true, { rule: 'always' })}
+        >
+          {t('permission.allowForSession')}
+        </Button>
+        <div className="flex-1" />
+        <Button
+          variant="ghost"
+          size="base"
+          aria-label={`${t('permission.deny')}: ${permissionContext}`}
+          onClick={() => targetSessionId && respondToPermission(targetSessionId, requestId, false)}
+        >
+          {t('permission.deny')}
+        </Button>
+      </div>
     </div>
   )
 }
@@ -397,47 +406,40 @@ function ExitPlanModePermissionDialog({
     approve({ permissionUpdates: buildPlanApprovalPermissionUpdates(mode, preview.allowedPrompts) })
   }
 
+  if (!isPending) {
+    return (
+      <div className={RESOLVED_ROW}>
+        <ListChecks aria-hidden="true" size={14} strokeWidth={1.75} className="shrink-0 text-[var(--color-text-tertiary)]" />
+        <span className="min-w-0 flex-1 truncate">{t('permission.planReadyTitle')}</span>
+        <Badge icon={<Check aria-hidden="true" size={12} strokeWidth={2} />}>
+          {t('permission.responded')}
+        </Badge>
+      </div>
+    )
+  }
+
   return (
-    <div className={`mb-4 overflow-hidden rounded-[var(--radius-lg)] border ${
-      isPending
-        ? 'border-[var(--color-primary-fixed-dim)] bg-[var(--color-surface-container-lowest)]'
-        : 'border-[var(--color-border)] bg-[var(--color-surface-container-low)] opacity-70'
-    }`}>
-      <div className={`flex items-center gap-3 px-4 py-3 ${
-        isPending
-          ? 'bg-[var(--color-surface-container)]'
-          : 'bg-[var(--color-surface-container-low)]'
-      }`}>
-        <div className="flex h-8 w-8 items-center justify-center rounded-[var(--radius-md)] bg-[var(--color-brand-soft)]">
-          <span className="material-symbols-outlined text-[18px] text-[var(--color-brand)]">architecture</span>
-        </div>
-        <div className="min-w-0 flex-1">
-          <div className="flex items-center gap-2">
-            <span className="text-sm font-semibold text-[var(--color-text-primary)]">
-              {t('permission.planReadyTitle')}
-            </span>
-            {isPending ? (
-              <Badge
-                tone="brand"
-                icon={<StatusDot tone="brand" pulse />}
-                className="font-bold uppercase"
-              >
-                {t('permission.awaitingApproval')}
-              </Badge>
-            ) : (
-              <Badge className="font-bold uppercase">
-                {t('permission.responded')}
-              </Badge>
-            )}
-          </div>
-          {description ? (
-            <p className="mt-0.5 truncate text-xs text-[var(--color-text-secondary)]">{description}</p>
-          ) : null}
-        </div>
+    <div className={PENDING_CARD}>
+      <div className="flex h-[42px] items-center gap-2 border-b border-[var(--color-border)] px-3.5">
+        <ListChecks aria-hidden="true" size={15} strokeWidth={1.75} className="shrink-0 text-[var(--color-text-tertiary)]" />
+        <span className="min-w-0 flex-1 truncate text-[13px] font-semibold text-[var(--color-text-primary)]">
+          {t('permission.planReadyTitle')}
+        </span>
+        <Badge
+          tone="warning"
+          icon={<StatusDot tone="warning" pulse />}
+          className="shrink-0"
+        >
+          {t('permission.awaitingApproval')}
+        </Badge>
       </div>
 
-      <div className="space-y-3 border-t border-[var(--color-border)] px-4 py-3">
+      <div className="space-y-3 px-4 pt-3">
+        {description ? (
+          <p className="truncate text-xs text-[var(--color-text-tertiary)]">{description}</p>
+        ) : null}
         <PlanPreviewCard
+          embedded
           title={t('permission.planPreviewTitle')}
           plan={preview.plan}
           filePath={preview.filePath}
@@ -445,84 +447,69 @@ function ExitPlanModePermissionDialog({
           requestedPermissionsTitle={t('permission.planRequestedPermissions')}
           emptyLabel={t('permission.planEmpty')}
         />
-        {isPending ? (
-          <textarea
-            value={feedback}
-            onChange={(event) => setFeedback(event.target.value)}
-            placeholder={t('permission.planFeedbackPlaceholder')}
-            rows={3}
-            className="min-h-[72px] w-full resize-y rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] px-3 py-2 text-sm text-[var(--color-text-primary)] outline-none transition-colors placeholder:text-[var(--color-text-tertiary)] focus:border-[var(--color-border-focus)] focus:shadow-[var(--shadow-focus-ring)]"
-          />
-        ) : null}
-      </div>
-
-      {isPending ? (
-        <div className="border-t border-[var(--color-border)] bg-[var(--color-surface-container)] px-4 py-3">
-          <div className="flex items-center justify-between gap-3">
-            <span className="shrink-0 text-xs font-medium text-[var(--color-text-secondary)]">
-              {t('permission.planExecutionModel')}
-            </span>
-            <div
-              className={`flex min-w-0 items-center gap-1.5 rounded-[var(--radius-md)] px-2 py-1 ${
-                executionRuntime
-                  ? 'border border-[var(--color-primary-fixed-dim)] bg-[var(--color-brand-soft)]'
-                  : ''
-              }`}
-              data-testid="plan-execution-model"
-            >
-              <ModelSelector
-                compact
-                ariaLabel={t('permission.planExecutionModel')}
-                runtimeSelection={executionRuntime ?? currentRuntime}
-                onRuntimeSelectionChange={handleExecutionRuntimeChange}
-              />
-              {executionRuntime ? (
-                <span className="shrink-0 text-[10px] font-medium text-[var(--color-brand)]">
-                  {t('permission.planExecutionModelPending')}
-                </span>
-              ) : null}
-            </div>
+        <textarea
+          value={feedback}
+          onChange={(event) => setFeedback(event.target.value)}
+          placeholder={t('permission.planFeedbackPlaceholder')}
+          rows={3}
+          className="min-h-[72px] w-full resize-y rounded-[var(--radius-md)] border border-transparent bg-[var(--color-surface-container)] px-3 py-2.5 text-[13px] text-[var(--color-text-primary)] outline-none transition-colors placeholder:text-[var(--color-text-tertiary)] focus:border-[var(--color-outline)] focus:bg-[var(--color-surface-container-lowest)]"
+        />
+        <div className="flex items-center justify-between gap-3">
+          <span className="shrink-0 text-xs text-[var(--color-text-tertiary)]">
+            {t('permission.planExecutionModel')}
+          </span>
+          <div
+            className={`flex min-w-0 items-center gap-1.5 rounded-[var(--radius-sm)] ${
+              executionRuntime ? 'bg-[var(--color-surface-container)] pr-2' : ''
+            }`}
+            data-testid="plan-execution-model"
+          >
+            <ModelSelector
+              compact
+              ariaLabel={t('permission.planExecutionModel')}
+              runtimeSelection={executionRuntime ?? currentRuntime}
+              onRuntimeSelectionChange={handleExecutionRuntimeChange}
+            />
+            {executionRuntime ? (
+              <span className="shrink-0 text-[11px] font-medium text-[var(--color-text-secondary)]">
+                {t('permission.planExecutionModelPending')}
+              </span>
+            ) : null}
           </div>
         </div>
-      ) : null}
+      </div>
 
-      {isPending ? (
-        <div className="flex flex-wrap items-center gap-2 border-t border-[var(--color-border)] bg-[var(--color-surface-container-low)] px-4 py-3">
-          <Button
-            variant="primary"
-            size="base"
-            onClick={() => approve(permissionUpdates.length ? { permissionUpdates } : undefined)}
-            icon={<span aria-hidden="true" className="material-symbols-outlined text-[14px]">check</span>}
-          >
-            {t('permission.planApprove')}
-          </Button>
-          <Button
-            variant="secondary"
-            size="base"
-            onClick={() => approveWithMode('acceptEdits')}
-            icon={<span aria-hidden="true" className="material-symbols-outlined text-[14px]">bolt</span>}
-          >
-            {t('permission.planApproveAcceptEdits')}
-          </Button>
-          <Button
-            variant="danger-outline"
-            size="base"
-            onClick={() => approveWithMode('bypassPermissions')}
-            icon={<span aria-hidden="true" className="material-symbols-outlined text-[14px]">gavel</span>}
-          >
-            {t('permission.planApproveBypass')}
-          </Button>
-          <div className="flex-1" />
-          <Button
-            variant="ghost"
-            size="base"
-            onClick={() => sessionId && respondToPermission(sessionId, requestId, false, trimmedFeedback ? { denyMessage: trimmedFeedback } : undefined)}
-            icon={<span aria-hidden="true" className="material-symbols-outlined text-[14px]">edit_note</span>}
-          >
-            {t('permission.planKeepPlanning')}
-          </Button>
-        </div>
-      ) : null}
+      <div className="flex flex-wrap items-center gap-2 px-4 pb-3.5 pt-3">
+        <Button
+          variant="primary"
+          size="base"
+          onClick={() => approve(permissionUpdates.length ? { permissionUpdates } : undefined)}
+        >
+          {t('permission.planApprove')}
+        </Button>
+        <Button
+          variant="secondary"
+          size="base"
+          onClick={() => approveWithMode('acceptEdits')}
+        >
+          {t('permission.planApproveAcceptEdits')}
+        </Button>
+        <Button
+          variant="danger-ghost"
+          size="base"
+          onClick={() => approveWithMode('bypassPermissions')}
+        >
+          {t('permission.planApproveBypass')}
+        </Button>
+        <div className="flex-1" />
+        <Button
+          variant="ghost"
+          size="base"
+          onClick={() => sessionId && respondToPermission(sessionId, requestId, false, trimmedFeedback ? { denyMessage: trimmedFeedback } : undefined)}
+        >
+          {t('permission.planKeepPlanning')}
+        </Button>
+      </div>
     </div>
   )
 }
diff --git a/desktop/src/components/chat/PlanModePreview.tsx b/desktop/src/components/chat/PlanModePreview.tsx
index 9feeba53..fd84fbc5 100644
--- a/desktop/src/components/chat/PlanModePreview.tsx
+++ b/desktop/src/components/chat/PlanModePreview.tsx
@@ -23,6 +23,8 @@ type Props = {
   allowedPrompts?: AllowedPrompt[]
   requestedPermissionsTitle?: string
   emptyLabel?: string
+  /** Rendered inside a card that already frames it (the approval card). */
+  embedded?: boolean
 }
 
 export function isExitPlanModeTool(toolName: string): boolean {
@@ -40,26 +42,34 @@ export function PlanPreviewCard({
   allowedPrompts = [],
   requestedPermissionsTitle,
   emptyLabel = 'No plan content available.',
+  embedded = false,
 }: Props) {
   const trimmedPlan = plan.trim()
 
+  // `embedded` is the plan inside the approval card, which already supplies
+  // the frame and the header — a second bordered card inside it was the
+  // card-in-card the 「素」 rules rule out. Standalone (a finished plan in the
+  // transcript) it keeps its own card.
   return (
-    <div data-testid="plan-preview-card" className="overflow-hidden rounded-lg border border-[var(--color-border)] bg-[var(--color-surface)]">
-      <div className="flex items-start gap-2 border-b border-[var(--color-border)] bg-[var(--color-surface-container-low)] px-3 py-2.5">
-        <FileText size={15} strokeWidth={2.1} className="mt-0.5 shrink-0 text-[var(--color-brand)]" aria-hidden="true" />
-        <div className="min-w-0 flex-1">
-          <div className="text-[12px] font-semibold text-[var(--color-text-primary)]">
-            {title}
-          </div>
-          {filePath ? (
-            <div className="mt-0.5 truncate font-mono text-[11px] text-[var(--color-text-tertiary)]">
-              {filePath}
-            </div>
-          ) : null}
+    <div
+      data-testid="plan-preview-card"
+      className={embedded
+        ? 'min-w-0'
+        : 'overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)]'}
+    >
+      <div className={`flex min-w-0 items-center gap-2 ${embedded ? 'pb-2' : 'border-b border-[var(--color-border)] px-3.5 py-2.5'}`}>
+        <FileText size={14} strokeWidth={1.75} className="shrink-0 text-[var(--color-text-tertiary)]" aria-hidden="true" />
+        <div className="shrink-0 text-[13px] font-medium text-[var(--color-text-primary)]">
+          {title}
         </div>
+        {filePath ? (
+          <div className="min-w-0 truncate font-mono text-[11px] text-[var(--color-text-tertiary)]" title={filePath}>
+            {filePath}
+          </div>
+        ) : null}
       </div>
 
-      <div className="max-h-[520px] overflow-auto px-3 py-3">
+      <div className={`max-h-[520px] overflow-auto ${embedded ? '' : 'px-3.5 py-3'}`}>
         {trimmedPlan ? (
           <MarkdownRenderer content={trimmedPlan} variant="compact" />
         ) : (
@@ -68,25 +78,25 @@ export function PlanPreviewCard({
       </div>
 
       {allowedPrompts.length > 0 && requestedPermissionsTitle ? (
-        <div className="border-t border-[var(--color-border)] bg-[var(--color-surface-container-low)] px-3 py-2.5">
-          <div className="mb-1.5 flex items-center gap-2 text-[11px] font-semibold uppercase text-[var(--color-outline)]">
-            <ShieldCheck size={13} strokeWidth={2.1} aria-hidden="true" />
+        <div className={embedded ? 'pt-2.5' : 'border-t border-[var(--color-border)] px-3.5 py-2.5'}>
+          <div className="mb-1 flex items-center gap-1.5 text-xs text-[var(--color-text-tertiary)]">
+            <ShieldCheck size={14} strokeWidth={1.75} aria-hidden="true" />
             {requestedPermissionsTitle}
           </div>
-          <div className="space-y-1">
+          <ul className="space-y-0.5 pl-5">
             {allowedPrompts.map((prompt, index) => (
-              <div
+              <li
                 key={`${prompt.tool}-${prompt.prompt}-${index}`}
-                className="rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] px-2.5 py-1.5 text-[11px] text-[var(--color-text-secondary)]"
+                className="text-xs text-[var(--color-text-secondary)]"
               >
-                <span className="font-mono font-semibold text-[var(--color-text-primary)]">
+                <span className="rounded-[var(--radius-xs)] bg-[var(--color-surface-container)] px-1 font-mono text-[11px] text-[var(--color-text-primary)]">
                   {prompt.tool}
                 </span>
                 <span className="text-[var(--color-text-tertiary)]"> · </span>
                 <span>{prompt.prompt}</span>
-              </div>
+              </li>
             ))}
-          </div>
+          </ul>
         </div>
       ) : null}
     </div>
diff --git a/desktop/src/components/chat/ProjectContextChip.tsx b/desktop/src/components/chat/ProjectContextChip.tsx
index ac8cccee..e0feab6b 100644
--- a/desktop/src/components/chat/ProjectContextChip.tsx
+++ b/desktop/src/components/chat/ProjectContextChip.tsx
@@ -1,4 +1,4 @@
-import { GitFork } from 'lucide-react'
+import { Folder, GitBranch, GitFork } from 'lucide-react'
 import { Tooltip } from '@/components/ui/Tooltip'
 import { useTranslation } from '../../i18n'
 import { getFileNameFromPath } from '../../lib/composerAttachments'
@@ -69,39 +69,30 @@ export function ProjectContextChip({
 
   if (!label) return null
 
-  const gitIcon = (
-    <svg
-      width={isToolbar ? 15 : compact ? 15 : 18}
-      height={isToolbar ? 15 : compact ? 15 : 18}
-      viewBox="0 0 16 16"
-      fill="currentColor"
-      aria-hidden="true"
-      className={`shrink-0 ${isToolbar ? 'text-[var(--color-text-tertiary)]' : 'text-[var(--color-text-secondary)]'}`}
-    >
-      <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
-    </svg>
-  )
+  const worktreeBadgeClassName = 'inline-flex h-[18px] shrink-0 cursor-help items-center gap-1 rounded-[var(--radius-xs)] bg-[var(--color-surface-container)] px-1.5 text-[11px] font-medium leading-none text-[var(--color-text-secondary)] outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface)]'
+  const iconClassName = 'shrink-0 text-[var(--color-text-tertiary)]'
 
   if (isToolbar) {
     return (
       <div
         title={isWorktree ? undefined : title}
         data-testid="run-location-readonly"
-        className="inline-flex h-9 min-w-0 max-w-full shrink items-center gap-1.5 text-[13px] font-medium leading-none"
+        // Same frame as the run-location pill it replaces (h-7, px-1.5), minus
+        // the hover fill and chevron: this one is read-only.
+        className="inline-flex h-7 min-w-0 max-w-full shrink items-center gap-1.5 px-1.5 text-xs leading-none text-[var(--color-text-tertiary)]"
       >
-        {showBranch || isWorktree ? gitIcon : (
-          <span aria-hidden="true" className="material-symbols-outlined shrink-0 text-[17px] text-[var(--color-text-tertiary)]">folder</span>
-        )}
-        <span className="min-w-[1.75rem] shrink truncate text-[var(--color-text-primary)]">{label}</span>
+        <Folder size={14} strokeWidth={1.75} aria-hidden="true" className={iconClassName} />
+        <span className="min-w-[1.75rem] shrink truncate">{label}</span>
         {showBranch && (
           <>
-            <span aria-hidden="true" className="shrink-0 text-[var(--color-outline-variant)]">/</span>
+            <span aria-hidden="true" className="shrink-0 text-[var(--color-outline)]">/</span>
+            <GitBranch size={14} strokeWidth={1.75} aria-hidden="true" className={iconClassName} />
             {/* Ellipsis at the start so the branch keeps its tail — see the pill.
                 `shrink-[4]`: the two used to shrink in step, so a narrow column
                 took both down together and left `cc-…/…n` — two truncations,
                 neither readable. The project name is the one that identifies
                 the row, so the branch gives up its width first. */}
-            <span dir="rtl" className="min-w-0 shrink-[4] truncate text-left text-[var(--color-text-secondary)]">
+            <span dir="rtl" className="min-w-0 shrink-[4] truncate text-left">
               <bdi>{branch}</bdi>
             </span>
           </>
@@ -111,9 +102,9 @@ export function ProjectContextChip({
             <span
               data-testid="worktree-details-trigger"
               tabIndex={0}
-              className="inline-flex shrink-0 cursor-help items-center gap-1 rounded-[5px] bg-[var(--color-brand-soft)] px-1.5 py-1 text-[10px] font-bold leading-none text-[var(--color-brand)] outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface)]"
+              className={worktreeBadgeClassName}
             >
-              <GitFork size={11} aria-hidden="true" />
+              <GitFork size={12} strokeWidth={2} aria-hidden="true" />
               {t('repoLaunch.worktreeBadge')}
             </span>
           </Tooltip>
@@ -126,33 +117,29 @@ export function ProjectContextChip({
     <div
       title={isWorktree ? undefined : title}
       data-testid="run-location-outside"
-      className={`inline-flex max-w-full items-center rounded-full border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] text-[var(--color-text-secondary)] ${
-        compact ? 'gap-1.5 px-3 py-1.5 text-xs' : 'gap-2 px-4 py-2 text-sm'
+      className={`inline-flex max-w-full items-center gap-1.5 px-1.5 text-xs leading-none text-[var(--color-text-tertiary)] ${
+        compact ? 'h-7' : 'h-8'
       }`}
     >
-      {showBranch ? gitIcon : (
-        <span className={`material-symbols-outlined text-[var(--color-text-secondary)] ${compact ? 'text-[15px]' : 'text-[18px]'}`}>folder</span>
-      )}
-      <span className="truncate font-medium text-[var(--color-text-primary)]">{label}</span>
+      <Folder size={14} strokeWidth={1.75} aria-hidden="true" className={iconClassName} />
+      <span className="truncate">{label}</span>
       {showBranch ? (
         <>
-          <span className="text-[var(--color-text-tertiary)]">|</span>
+          <span aria-hidden="true" className="shrink-0 text-[var(--color-outline)]">/</span>
+          <GitBranch size={14} strokeWidth={1.75} aria-hidden="true" className={iconClassName} />
           <span className="truncate">{branch}</span>
         </>
       ) : null}
       {isWorktree ? (
-        <>
-          <span className="text-[var(--color-text-tertiary)]">|</span>
-          <Tooltip content={worktreeDetails} placement="top-start">
-            <span
-              data-testid="worktree-details-trigger"
-              tabIndex={0}
-              className="shrink-0 cursor-help rounded-full border border-[var(--color-border)] px-1.5 py-0.5 text-[10px] font-medium uppercase leading-none text-[var(--color-text-tertiary)] outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface)]"
-            >
-              {t('sidebar.worktree')}
-            </span>
-          </Tooltip>
-        </>
+        <Tooltip content={worktreeDetails} placement="top-start">
+          <span
+            data-testid="worktree-details-trigger"
+            tabIndex={0}
+            className={worktreeBadgeClassName}
+          >
+            {t('sidebar.worktree')}
+          </span>
+        </Tooltip>
       ) : null}
     </div>
   )
diff --git a/desktop/src/components/chat/RenderItemBoundary.tsx b/desktop/src/components/chat/RenderItemBoundary.tsx
index 42c8055f..2bc826d1 100644
--- a/desktop/src/components/chat/RenderItemBoundary.tsx
+++ b/desktop/src/components/chat/RenderItemBoundary.tsx
@@ -39,7 +39,7 @@ export class RenderItemBoundary extends React.Component<Props, State> {
     if (!this.state.failed) return this.props.children
 
     return (
-      <div className="mb-3 flex items-center gap-2 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)] px-4 py-2 text-xs text-[var(--color-text-tertiary)]">
+      <div className="mb-3 flex items-center gap-2 rounded-[var(--radius-md)] bg-[var(--color-surface-container)] px-3 py-2 text-xs text-[var(--color-text-tertiary)]">
         <TriangleAlert aria-hidden size={14} strokeWidth={1.75} className="shrink-0" />
         <span>{t('errorBoundary.item')}</span>
       </div>
diff --git a/desktop/src/components/chat/RepositoryLaunchControls.test.tsx b/desktop/src/components/chat/RepositoryLaunchControls.test.tsx
index 66359476..14f8051b 100644
--- a/desktop/src/components/chat/RepositoryLaunchControls.test.tsx
+++ b/desktop/src/components/chat/RepositoryLaunchControls.test.tsx
@@ -427,17 +427,29 @@ describe('RepositoryLaunchControls', () => {
     renderControls({ placement: 'toolbar' })
 
     const pill = await screen.findByRole('button', { name: 'Location: cc-haha / main' })
-    // 36px matches the other controls in the composer's toolbar; the standalone
-    // line uses 40px for touch.
-    expect(pill).toHaveClass('h-9')
+    // 28px matches the other controls in the composer's toolbar; the H5 line
+    // below the composer uses 40px for touch.
+    expect(pill).toHaveClass('h-7')
     expect(pill).not.toHaveClass('h-10')
   })
 
-  it('sizes the pill for touch when it stands on its own line', async () => {
+  it('keeps the pointer-sized pill on its own line in a narrow desktop column', async () => {
     renderControls({ placement: 'outside' })
 
+    const pill = await screen.findByRole('button', { name: 'Location: cc-haha / main' })
+    expect(pill).toHaveClass('h-7')
+    expect(pill).not.toHaveClass('h-10')
+  })
+
+  it('sizes the pill for touch when it stands on its own line in the H5 browser', async () => {
+    viewportMocks.isMobile = true
+    viewportMocks.isTauri = false
+    // A toolbar placement still falls back to the standalone line on H5.
+    renderControls({ placement: 'toolbar' })
+
     const pill = await screen.findByRole('button', { name: 'Location: cc-haha / main' })
     expect(pill).toHaveClass('h-10')
+    expect(pill).not.toHaveClass('h-7')
   })
 
   it('keeps a dirty-branch warning compact and inline in the toolbar', async () => {
diff --git a/desktop/src/components/chat/RepositoryLaunchControls.tsx b/desktop/src/components/chat/RepositoryLaunchControls.tsx
index cb773cde..4de5910d 100644
--- a/desktop/src/components/chat/RepositoryLaunchControls.tsx
+++ b/desktop/src/components/chat/RepositoryLaunchControls.tsx
@@ -6,6 +6,8 @@ import {
   ChevronDown,
   ChevronLeft,
   ChevronRight,
+  Folder,
+  FolderGit2,
   GitBranch,
   GitFork,
   Loader2,
@@ -81,44 +83,27 @@ const BRANCH_CREATE_ERROR_KEYS = {
   REPOSITORY_NO_COMMITS: 'repoLaunch.newBranchErrorNoCommits',
 } as const
 
-const GIT_MARK_PATH = 'M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z'
-
-/**
- * Git mark for a repo, plain folder otherwise. The folder glyph reads smaller
- * than the mark at the same nominal size, hence the separate `folderSize`.
- */
-function RepoIcon({ isGit, size, folderSize = size }: { isGit: boolean; size: number; folderSize?: number }) {
-  if (isGit) {
-    return (
-      <svg width={size} height={size} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" className="shrink-0 text-[var(--color-text-tertiary)]">
-        <path d={GIT_MARK_PATH} />
-      </svg>
-    )
-  }
-  return (
-    <span
-      aria-hidden="true"
-      className="material-symbols-outlined shrink-0 text-[var(--color-text-tertiary)]"
-      style={{ fontSize: folderSize }}
-    >
-      folder
-    </span>
-  )
+/** A folder with the git mark for a repo, a plain folder otherwise. */
+function RepoIcon({ isGit, size }: { isGit: boolean; size: number }) {
+  const Icon = isGit ? FolderGit2 : Folder
+  return <Icon size={size} strokeWidth={1.75} aria-hidden="true" className="shrink-0 text-[var(--color-text-tertiary)]" />
 }
 
 /**
- * Decorative dot for the worktree cards. The cards carry `aria-checked`
- * already, so this is hidden from the accessibility tree rather than announced
- * a second time.
+ * Decorative 16px radio for the worktree cards: a 1.5px ring at rest that fills
+ * to a terracotta dot when picked. The cards carry `aria-checked` already, so
+ * this is hidden from the accessibility tree rather than announced twice.
  */
 function WorktreeRadio({ selected }: { selected: boolean }) {
   return (
     <span
       aria-hidden="true"
-      className="mt-px flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-full border-[1.5px] border-[var(--color-outline)]"
-    >
-      {selected && <span className="h-[9px] w-[9px] rounded-full bg-[var(--color-brand)]" />}
-    </span>
+      className={`mt-0.5 h-4 w-4 shrink-0 rounded-full transition-shadow duration-150 ${
+        selected
+          ? 'shadow-[inset_0_0_0_5px_var(--color-brand)]'
+          : 'shadow-[inset_0_0_0_1.5px_var(--color-outline)]'
+      }`}
+    />
   )
 }
 
@@ -563,43 +548,49 @@ export function RepositoryLaunchControls({
             : t('repoLaunch.localBranch'))
     : t('repoLaunch.noBranch')
 
-  // Outlined pill, per the handoff's launch row: 1px border at rest that firms
-  // up to `--color-outline` on hover. The focus ring uses the opaque focus
-  // token rather than `--color-brand/35`, whose `/N` modifier Safari 15 drops.
+  // A quiet toolbar chip, not an outlined pill: the composer toolbar reads
+  // `folder project / branch` in tertiary text and only fills on hover, the
+  // same as the permission chip and model name beside it. The focus ring uses
+  // the opaque focus token rather than `--color-brand/35`, whose `/N` modifier
+  // Safari 15 drops.
   const pillClassName = [
-    'group inline-flex min-w-0 max-w-full items-center gap-1.5 rounded-[var(--radius-lg)]',
-    'border border-[var(--color-border)] bg-[var(--color-surface)] font-medium leading-none',
-    'text-[var(--color-text-primary)] transition-[background-color,color,border-color] duration-150 ease-out',
-    'hover:border-[var(--color-outline)] hover:bg-[var(--color-surface-hover)]',
+    'group inline-flex min-w-0 max-w-full items-center gap-1.5 rounded-[var(--radius-sm)] px-1.5',
+    'text-xs leading-none text-[var(--color-text-tertiary)]',
+    'transition-[background-color,color] duration-150 ease-out',
+    'hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)]',
     'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]',
     'focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface)]',
     'disabled:cursor-not-allowed disabled:opacity-50',
-    isToolbar ? 'h-9 px-3 text-[13.5px]' : 'h-10 px-3.5 text-[13.5px]',
+    // 28px in the toolbar, matching its other controls; on its own line below
+    // the composer the H5 layout needs a 40px touch target.
+    isToolbar || !isMobileBrowser ? 'h-7' : 'h-10',
   ].join(' ')
 
   const rowClassName = [
-    'flex w-full items-center gap-3 rounded-[var(--radius-lg)] px-3 text-left',
-    'transition-[background-color,border-color] duration-150 ease-out',
+    'flex w-full items-center gap-2.5 rounded-[var(--radius-sm)] px-2 text-left',
+    'transition-[background-color] duration-150 ease-out',
     'hover:bg-[var(--color-surface-hover)]',
-    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-border-focus)]',
-    isMobileBrowser ? 'min-h-[56px] py-3' : 'py-2.5',
+    'focus-visible:outline-none focus-visible:bg-[var(--color-surface-hover)]',
+    isMobileBrowser ? 'min-h-[56px] py-3' : 'min-h-8 py-1.5',
   ].join(' ')
 
   // Both drill-downs head back the same way. The dropdown labels the crumb
   // after the view you are in; the sheet, which has its own title bar, labels
   // it after the view you are going to.
-  const dropdownBackClassName = 'inline-flex items-center gap-1 rounded-[var(--radius-sm)] px-1 py-0.5 text-[10px] font-bold uppercase tracking-widest text-[var(--color-outline)] transition-colors hover:text-[var(--color-text-secondary)]'
-  const sheetBackClassName = 'inline-flex items-center gap-1 self-start rounded-[var(--radius-md)] px-2 py-1 text-[12px] font-semibold text-[var(--color-text-secondary)] transition-colors hover:bg-[var(--color-surface-hover)]'
+  const dropdownBackClassName = 'inline-flex h-7 items-center gap-1 rounded-[var(--radius-sm)] px-1.5 text-xs font-medium text-[var(--color-text-secondary)] transition-colors hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]'
+  const sheetBackClassName = 'inline-flex items-center gap-1 self-start rounded-[var(--radius-sm)] px-2 py-1 text-xs font-medium text-[var(--color-text-secondary)] transition-colors hover:bg-[var(--color-surface-hover)]'
 
   // The two modes are a single choice, so they read as radio cards rather than
-  // a menu list: 1.5px edge that turns terracotta on the selected one.
+  // a menu list: a hairline at rest, a 1.5px terracotta edge on a faint
+  // terracotta wash once picked. Inset shadows rather than borders so the edge
+  // can thicken without nudging the content.
   const worktreeCardClassName = (selected: boolean) => [
-    'flex w-full items-start gap-3 rounded-[var(--radius-lg)] border-[1.5px] px-[15px] py-3 text-left',
-    'transition-[background-color,border-color] duration-150 ease-out',
-    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-border-focus)]',
+    'flex w-full items-start gap-2.5 rounded-[var(--radius-md)] px-3 py-2.5 text-left',
+    'transition-[background-color,box-shadow] duration-150 ease-out',
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]',
     selected
-      ? 'border-[var(--color-primary-fixed-dim)] bg-[var(--color-brand-soft)]'
-      : 'border-[var(--color-border)] bg-[var(--color-surface)] hover:border-[var(--color-outline)] hover:bg-[var(--color-surface-hover)]',
+      ? 'bg-[var(--color-brand-soft)] shadow-[inset_0_0_0_1.5px_var(--color-brand)]'
+      : 'bg-[var(--color-surface-container-lowest)] shadow-[inset_0_0_0_1px_var(--color-border)] hover:shadow-[inset_0_0_0_1px_var(--color-outline)]',
   ].join(' ')
 
   const branchList = (
@@ -607,7 +598,7 @@ export function RepositoryLaunchControls({
       id={listboxId}
       role="listbox"
       aria-label={t('repoLaunch.selectBranch')}
-      className={isMobileBrowser ? 'py-1' : 'max-h-[280px] overflow-y-auto py-1'}
+      className={isMobileBrowser ? 'p-1.5' : 'max-h-[280px] overflow-y-auto'}
     >
       {filteredBranches.length === 0 ? (
         <div className="px-4 py-8 text-center text-xs text-[var(--color-text-tertiary)]">
@@ -625,19 +616,18 @@ export function RepositoryLaunchControls({
             aria-selected={isSelected}
             onMouseEnter={() => setSelectedIndex(index)}
             onClick={() => selectBranch(candidate)}
-            className={`flex w-full items-center gap-3 px-4 text-left transition-[background-color] duration-150 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-border-focus)] ${
-              isMobileBrowser ? 'min-h-[56px] py-3' : 'py-3'
+            className={`flex w-full items-center gap-2.5 rounded-[var(--radius-sm)] px-2 text-left transition-[background-color] duration-150 ease-out focus-visible:outline-none focus-visible:bg-[var(--color-surface-hover)] ${
+              isMobileBrowser ? 'min-h-[56px] py-3' : 'min-h-8 py-1.5'
             } ${
               index === selectedIndex || isSelected ? 'bg-[var(--color-surface-hover)]' : 'hover:bg-[var(--color-surface-hover)]'
             }`}
           >
-            <span className={`h-8 w-1 rounded-full ${isSelected ? 'bg-[var(--color-brand)]' : 'bg-transparent'}`} />
-            <GitBranch size={17} className="shrink-0 text-[var(--color-text-secondary)]" />
+            <GitBranch size={16} strokeWidth={1.75} aria-hidden="true" className="shrink-0 text-[var(--color-text-tertiary)]" />
             <span className="min-w-0 flex-1">
-              <span className="block truncate text-sm font-semibold text-[var(--color-text-primary)]">
+              <span className="block truncate font-mono text-[13px] text-[var(--color-text-primary)]">
                 {candidate.name}
               </span>
-              <span className="block truncate text-[11px] text-[var(--color-text-tertiary)]">
+              <span className="block truncate text-xs text-[var(--color-text-tertiary)]">
                 {candidate.current
                   ? t('repoLaunch.currentBranch')
                   : candidate.checkedOut
@@ -647,7 +637,7 @@ export function RepositoryLaunchControls({
                       : t('repoLaunch.localBranch')}
               </span>
             </span>
-            {isSelected && <Check size={17} className="shrink-0 text-[var(--color-brand)]" />}
+            {isSelected && <Check size={14} strokeWidth={2} aria-hidden="true" className="shrink-0 text-[var(--color-brand)]" />}
           </button>
         )
       })}
@@ -672,8 +662,8 @@ export function RepositoryLaunchControls({
       onClick={openNewBranchView}
       className={rowClassName}
     >
-      <Plus size={17} className="shrink-0 text-[var(--color-text-tertiary)]" />
-      <span className="min-w-0 flex-1 truncate text-[13.5px] font-semibold text-[var(--color-text-primary)]">
+      <Plus size={16} strokeWidth={1.75} aria-hidden="true" className="shrink-0 text-[var(--color-text-tertiary)]" />
+      <span className="min-w-0 flex-1 truncate text-[13px] text-[var(--color-text-primary)]">
         {t('repoLaunch.newBranch')}
       </span>
     </button>
@@ -681,7 +671,7 @@ export function RepositoryLaunchControls({
 
   const newBranchForm = (
     <form
-      className="flex flex-col gap-3 p-3"
+      className="flex flex-col gap-3 p-2"
       onSubmit={(event) => {
         event.preventDefault()
         void createBranch()
@@ -718,9 +708,11 @@ export function RepositoryLaunchControls({
     </form>
   )
 
+  // The menu-search row: a bare field on the menu, set off by the hairline its
+  // host draws under it — not a boxed input inside a box.
   const branchSearch = (
-    <div className="flex items-center gap-2 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)] px-3 py-2">
-      <Search size={15} className="shrink-0 text-[var(--color-text-tertiary)]" />
+    <div className="flex h-8 items-center gap-2 px-2">
+      <Search size={14} strokeWidth={1.75} aria-hidden="true" className="shrink-0 text-[var(--color-text-tertiary)]" />
       <input
         id={searchInputId}
         ref={searchRef}
@@ -730,7 +722,7 @@ export function RepositoryLaunchControls({
         aria-controls={listboxId}
         aria-activedescendant={filteredBranches[selectedIndex] ? `${listboxId}-option-${selectedIndex}` : undefined}
         placeholder={t('repoLaunch.searchBranch')}
-        className="min-w-0 flex-1 bg-transparent text-sm text-[var(--color-text-primary)] outline-none placeholder:text-[var(--color-text-tertiary)]"
+        className="min-w-0 flex-1 bg-transparent text-[13px] text-[var(--color-text-primary)] outline-none placeholder:text-[var(--color-text-tertiary)]"
       />
     </div>
   )
@@ -740,15 +732,15 @@ export function RepositoryLaunchControls({
   // pixels taller the moment the context lands.
   const revealSkeleton = (
     <div aria-hidden="true" className="flex animate-pulse flex-col gap-1">
-      <div className="h-[52px] rounded-[var(--radius-lg)] bg-[var(--color-surface-container-low)]" />
-      <div className="mx-1.5 my-1 h-px bg-[var(--color-border-separator)]" />
-      <div className="h-[74px] rounded-[var(--radius-lg)] bg-[var(--color-surface-container-low)]" />
-      <div className="h-[74px] rounded-[var(--radius-lg)] bg-[var(--color-surface-container-low)]" />
+      <div className="h-11 rounded-[var(--radius-sm)] bg-[var(--color-surface-container)]" />
+      <div className="mx-1 my-1 h-px bg-[var(--color-border-separator)]" />
+      <div className="h-16 rounded-[var(--radius-md)] bg-[var(--color-surface-container)]" />
+      <div className="h-16 rounded-[var(--radius-md)] bg-[var(--color-surface-container)]" />
     </div>
   )
 
   const rootView = (
-    <div role="menu" aria-label={t('repoLaunch.launchLocation')} className="flex flex-col gap-1 p-1.5">
+    <div role="menu" aria-label={t('repoLaunch.launchLocation')} className={`flex flex-col gap-0.5 ${isMobileBrowser ? 'p-1.5' : ''}`}>
       <button
         type="button"
         role="menuitem"
@@ -756,16 +748,16 @@ export function RepositoryLaunchControls({
         title={workDir || undefined}
         className={rowClassName}
       >
-        <RepoIcon isGit={isGitReady} size={18} />
+        <RepoIcon isGit={isGitReady} size={16} />
         <span className="min-w-0 flex-1">
-          <span className="block text-[13px] font-semibold text-[var(--color-text-primary)]">
+          <span className="block text-[13px] font-medium text-[var(--color-text-primary)]">
             {t('dirPicker.directory')}
           </span>
-          <span className="block truncate text-[11px] text-[var(--color-text-tertiary)]">
+          <span className="block truncate text-xs text-[var(--color-text-tertiary)]">
             {workDir ? repoLabel : t('dirPicker.selectProject')}
           </span>
         </span>
-        <ChevronRight size={16} className="shrink-0 text-[var(--color-text-tertiary)]" />
+        <ChevronRight size={14} strokeWidth={1.75} aria-hidden="true" className="shrink-0 text-[var(--color-text-tertiary)]" />
       </button>
 
       {revealAfterPick && revealSkeleton}
@@ -777,22 +769,22 @@ export function RepositoryLaunchControls({
           onClick={() => setView('branch')}
           className={rowClassName}
         >
-          <GitBranch size={18} className="shrink-0 text-[var(--color-text-tertiary)]" />
+          <GitBranch size={16} strokeWidth={1.75} aria-hidden="true" className="shrink-0 text-[var(--color-text-tertiary)]" />
           <span className="min-w-0 flex-1">
-            <span className="block text-[13.5px] font-semibold text-[var(--color-text-primary)]">
+            <span className="block text-[13px] font-medium text-[var(--color-text-primary)]">
               {t('repoLaunch.branch')}
             </span>
-            <span className="block truncate text-[12px] text-[var(--color-text-tertiary)]">
+            <span className="block truncate text-xs text-[var(--color-text-tertiary)]">
               {selectedBranchName ? `${selectedBranchName} · ${branchSubtitle}` : t('repoLaunch.noBranch')}
             </span>
           </span>
-          <ChevronRight size={16} className="shrink-0 text-[var(--color-text-tertiary)]" />
+          <ChevronRight size={14} strokeWidth={1.75} aria-hidden="true" className="shrink-0 text-[var(--color-text-tertiary)]" />
         </button>
       )}
 
       {isGitReady && (
         <>
-          <div className="mx-1.5 my-1 h-px bg-[var(--color-border-separator)]" />
+          <div className="mx-1 my-1 h-px bg-[var(--color-border-separator)]" />
           <button
             type="button"
             role="menuitemradio"
@@ -803,10 +795,10 @@ export function RepositoryLaunchControls({
           >
             <WorktreeRadio selected={!useWorktree} />
             <span className="min-w-0 flex-1">
-              <span id={worktreeCurrentLabelId} className="block text-[14.5px] font-bold text-[var(--color-text-primary)]">
+              <span id={worktreeCurrentLabelId} className="block text-[13px] font-medium text-[var(--color-text-primary)]">
                 {t('repoLaunch.worktreeCurrent')}
               </span>
-              <span className="mt-[3px] block text-[12.5px] leading-[1.6] text-[var(--color-text-secondary)]">
+              <span className="mt-0.5 block text-xs leading-[1.55] text-[var(--color-text-tertiary)]">
                 {t('repoLaunch.worktreeCurrentDesc', { branch: branchLabel })}
               </span>
             </span>
@@ -822,10 +814,10 @@ export function RepositoryLaunchControls({
           >
             <WorktreeRadio selected={useWorktree} />
             <span className="min-w-0 flex-1">
-              <span id={worktreeIsolatedLabelId} className="block text-[14.5px] font-bold text-[var(--color-text-primary)]">
+              <span id={worktreeIsolatedLabelId} className="block text-[13px] font-medium text-[var(--color-text-primary)]">
                 {t('repoLaunch.worktreeIsolated')}
               </span>
-              <span className="mt-[3px] block text-[12.5px] leading-[1.6] text-[var(--color-text-secondary)]">
+              <span className="mt-0.5 block text-xs leading-[1.55] text-[var(--color-text-tertiary)]">
                 {t('repoLaunch.worktreeIsolatedDesc', { branch: branchLabel })}
               </span>
             </span>
@@ -874,7 +866,7 @@ export function RepositoryLaunchControls({
       }}
       className={pillClassName}
     >
-      <RepoIcon isGit={isGitReady} size={15} folderSize={17} />
+      <Folder size={14} strokeWidth={1.75} aria-hidden="true" className="shrink-0" />
 
       <span className="min-w-[1.75rem] shrink truncate">
         {repoLabel || t('dirPicker.selectProject')}
@@ -882,7 +874,8 @@ export function RepositoryLaunchControls({
 
       {selectedBranchName && (
         <>
-          <span aria-hidden="true" className="shrink-0 text-[var(--color-outline-variant)]">/</span>
+          <span aria-hidden="true" className="shrink-0 text-[var(--color-outline)]">/</span>
+          <GitBranch size={14} strokeWidth={1.75} aria-hidden="true" className="shrink-0" />
           {/*
             `dir="rtl"` puts the ellipsis at the *start*, so a truncated branch
             keeps its tail: `…use-native-on-main` rather than `feature/comp…`.
@@ -890,26 +883,26 @@ export function RepositoryLaunchControls({
             prefixes carry no information. `<bdi>` isolates the name so the RTL
             container cannot reorder its own neutral characters (the slashes).
           */}
-          <span dir="rtl" className="min-w-0 shrink truncate text-left text-[var(--color-text-secondary)]">
+          <span dir="rtl" className="min-w-0 shrink truncate text-left">
             <bdi>{selectedBranchName}</bdi>
           </span>
         </>
       )}
 
       {useWorktree && isGitReady && (
-        <span className="inline-flex shrink-0 items-center gap-1 rounded-[var(--radius-sm)] bg-[var(--color-brand-soft)] px-1.5 py-1 text-[10px] font-bold leading-none text-[var(--color-brand)]">
-          <GitFork size={11} aria-hidden="true" />
+        <span className="inline-flex h-[18px] shrink-0 items-center gap-1 rounded-[var(--radius-xs)] bg-[var(--color-surface-container)] px-1.5 text-[11px] font-medium leading-none text-[var(--color-text-secondary)]">
+          <GitFork size={12} strokeWidth={2} aria-hidden="true" />
           {t('repoLaunch.worktreeBadge')}
         </span>
       )}
 
       {loading && workDir
-        ? <Loader2 size={15} className="shrink-0 animate-spin text-[var(--color-text-tertiary)]" />
-        : <ChevronDown size={15} className="shrink-0 text-[var(--color-text-tertiary)]" />}
+        ? <Loader2 size={14} aria-hidden="true" className="shrink-0 animate-spin text-[var(--color-text-tertiary)]" />
+        : <ChevronDown size={14} strokeWidth={1.75} aria-hidden="true" className="shrink-0 text-[var(--color-text-tertiary)]" />}
     </button>
   )
 
-  const menuClassName = 'w-[400px] overflow-hidden rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] shadow-[var(--shadow-overlay)]'
+  const menuClassName = 'w-[400px] overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] p-1 shadow-[var(--shadow-dropdown)]'
   const menuStyle = {
     position: 'fixed' as const,
     left: menuPos?.left,
@@ -934,9 +927,9 @@ export function RepositoryLaunchControls({
               role="status"
               aria-label={warning.message}
               title={warning.message}
-              className="inline-flex h-7 shrink-0 items-center gap-1.5 whitespace-nowrap rounded-[var(--radius-md)] bg-[var(--color-warning-container)] px-2 text-[11px] font-medium text-[var(--color-on-warning-container)]"
+              className="inline-flex h-6 shrink-0 items-center gap-1.5 whitespace-nowrap rounded-[var(--radius-sm)] bg-[var(--color-warning-container)] px-1.5 text-[11px] font-medium text-[var(--color-on-warning-container)]"
             >
-              <AlertCircle size={13} aria-hidden="true" className="shrink-0 text-[var(--color-warning)]" />
+              <AlertCircle size={12} strokeWidth={2} aria-hidden="true" className="shrink-0" />
               <span className="hidden 2xl:inline">{warning.compactLabel}</span>
             </div>
           )}
@@ -944,8 +937,8 @@ export function RepositoryLaunchControls({
       ) : pill}
 
       {message && workDir && (
-        <div className="flex items-center gap-2 px-1 text-[11px] text-[var(--color-text-tertiary)]">
-          <AlertCircle size={13} className="shrink-0" />
+        <div className="flex items-center gap-1.5 px-1.5 text-xs text-[var(--color-text-tertiary)]">
+          <AlertCircle size={12} strokeWidth={2} aria-hidden="true" className="shrink-0" />
           <span>{message === 'missing' ? t('repoLaunch.missingWorkdir') : message}</span>
         </div>
       )}
@@ -954,9 +947,9 @@ export function RepositoryLaunchControls({
         <div
           role="status"
           aria-label={warning.message}
-          className="flex items-center gap-2 px-1 text-[11px] text-[var(--color-warning)]"
+          className="flex items-center gap-1.5 px-1.5 text-xs text-[var(--color-on-warning-container)]"
         >
-          <AlertCircle size={13} aria-hidden="true" className="shrink-0" />
+          <AlertCircle size={12} strokeWidth={2} aria-hidden="true" className="shrink-0 text-[var(--color-warning)]" />
           <span>{warning.message}</span>
         </div>
       )}
@@ -986,7 +979,7 @@ export function RepositoryLaunchControls({
                   onClick={() => setView('root')}
                   className={sheetBackClassName}
                 >
-                  <ChevronLeft size={14} />
+                  <ChevronLeft size={14} strokeWidth={1.75} aria-hidden="true" />
                   {t('repoLaunch.launchLocation')}
                 </button>
                 {branchSearch}
@@ -997,7 +990,7 @@ export function RepositoryLaunchControls({
                 onClick={leaveNewBranchView}
                 className={sheetBackClassName}
               >
-                <ChevronLeft size={14} />
+                <ChevronLeft size={14} strokeWidth={1.75} aria-hidden="true" />
                 {t('repoLaunch.selectBranch')}
               </button>
             ) : view === 'directory' && directoryBackLabel ? (
@@ -1006,7 +999,7 @@ export function RepositoryLaunchControls({
                 onClick={() => setView('root')}
                 className={sheetBackClassName}
               >
-                <ChevronLeft size={14} />
+                <ChevronLeft size={14} strokeWidth={1.75} aria-hidden="true" />
                 {t('repoLaunch.launchLocation')}
               </button>
             ) : undefined}
@@ -1021,31 +1014,31 @@ export function RepositoryLaunchControls({
           <div ref={menuRef} id={menuId} className={menuClassName} style={menuStyle}>
             {view === 'branch' ? (
               <>
-                <div className="border-b border-[var(--color-border)] p-3">
+                <div className="mb-1 border-b border-[var(--color-border)]">
                   <button
                     type="button"
                     onClick={() => setView('root')}
-                    className={`mb-2 ${dropdownBackClassName}`}
+                    className={dropdownBackClassName}
                   >
-                    <ChevronLeft size={13} />
+                    <ChevronLeft size={14} strokeWidth={1.75} aria-hidden="true" />
                     {t('repoLaunch.selectBranch')}
                   </button>
                   {branchSearch}
                 </div>
                 {branchList}
-                <div className="border-t border-[var(--color-border-separator)] p-1.5">
+                <div className="mt-1 border-t border-[var(--color-border-separator)] pt-1">
                   {branchCreateRow}
                 </div>
               </>
             ) : view === 'newBranch' ? (
               <>
-                <div className="border-b border-[var(--color-border)] px-3 py-2.5">
+                <div className="border-b border-[var(--color-border)] pb-1">
                   <button
                     type="button"
                     onClick={leaveNewBranchView}
                     className={dropdownBackClassName}
                   >
-                    <ChevronLeft size={13} />
+                    <ChevronLeft size={14} strokeWidth={1.75} aria-hidden="true" />
                     {t('repoLaunch.newBranchTitle')}
                   </button>
                 </div>
@@ -1054,13 +1047,13 @@ export function RepositoryLaunchControls({
             ) : view === 'directory' ? (
               <>
                 {directoryBackLabel && (
-                  <div className="border-b border-[var(--color-border)] px-3 py-2.5">
+                  <div className="border-b border-[var(--color-border)] pb-1">
                     <button
                       type="button"
                       onClick={() => setView('root')}
                       className={dropdownBackClassName}
                     >
-                      <ChevronLeft size={13} />
+                      <ChevronLeft size={14} strokeWidth={1.75} aria-hidden="true" />
                       {directoryBackLabel}
                     </button>
                   </div>
@@ -1069,7 +1062,7 @@ export function RepositoryLaunchControls({
               </>
             ) : (
               <>
-                <div className="px-4 pb-1 pt-3 text-[10px] font-bold uppercase tracking-widest text-[var(--color-outline)]">
+                <div className="px-2 pb-1 pt-2 text-[11px] font-semibold text-[var(--color-text-tertiary)]">
                   {t('repoLaunch.launchLocation')}
                 </div>
                 {rootView}
diff --git a/desktop/src/components/chat/SessionChatSurface.test.tsx b/desktop/src/components/chat/SessionChatSurface.test.tsx
index 0fb25e4a..9c6a078a 100644
--- a/desktop/src/components/chat/SessionChatSurface.test.tsx
+++ b/desktop/src/components/chat/SessionChatSurface.test.tsx
@@ -32,8 +32,12 @@ describe('SessionChatSurface', () => {
 
     const header = screen.getByTestId('session-header')
     expect(header.firstElementChild).toHaveClass('max-w-[var(--chat-content-max-width)]')
-    expect(within(header).getByRole('heading', { name: 'Child run' })).toHaveClass('truncate')
-    expect(header.querySelectorAll('[aria-hidden="true"]')).toHaveLength(1)
+    expect(within(header).getByRole('heading', { name: 'Child run' })).toHaveClass('truncate', 'text-[15px]', 'font-semibold')
+    const separators = header.querySelectorAll('[aria-hidden="true"]')
+    expect(separators).toHaveLength(1)
+    // A 3px dot, not a typed "·" glyph whose size and baseline follow the font.
+    expect(separators[0]!.textContent).toBe('')
+    expect(separators[0]).toHaveClass('rounded-full')
   })
 
   it('uses the same compact chat column contract when a side panel is present', () => {
diff --git a/desktop/src/components/chat/SessionChatSurface.tsx b/desktop/src/components/chat/SessionChatSurface.tsx
index c2613234..eb3a3d0f 100644
--- a/desktop/src/components/chat/SessionChatSurface.tsx
+++ b/desktop/src/components/chat/SessionChatSurface.tsx
@@ -27,18 +27,18 @@ export function SessionChatHeader({
       data-testid="session-header"
       className={[
         'w-full border-b border-[var(--color-border)]',
-        compact ? 'px-4 py-2.5' : 'px-9 py-3',
+        compact ? 'px-4 py-2.5' : 'px-7 py-3.5',
       ].join(' ')}
     >
       <div className="mx-auto w-full min-w-0 max-w-[var(--chat-content-max-width)]">
-        <div className="flex min-w-0 items-start gap-3">
+        {/* Top-aligned so a goal / team strip below the meta line does not drag
+            the actions down; they are offset to centre on title + meta. */}
+        <div className="flex min-w-0 items-start gap-4">
           {leading}
           <div className="min-w-0 flex-1">
             <div className="flex min-w-0 items-center gap-2">
               <h1
-                className={`min-w-0 truncate font-bold leading-tight tracking-[-0.2px] text-[var(--color-text-primary)] ${
-                  compact ? 'text-[15px]' : 'text-[17px]'
-                }`}
+                className="min-w-0 truncate text-[15px] font-semibold leading-[1.35] tracking-[-0.01em] text-[var(--color-text-primary)]"
                 style={{ fontFamily: 'var(--font-headline)' }}
                 title={title}
               >
@@ -47,10 +47,12 @@ export function SessionChatHeader({
               {titleAddon}
             </div>
             {metadata.length > 0 ? (
-              <div className="mt-1 flex min-w-0 items-center gap-1.5 overflow-hidden whitespace-nowrap text-[11px] text-[var(--color-text-tertiary)]">
+              <div className="mt-[3px] flex min-w-0 items-center gap-2 overflow-hidden whitespace-nowrap text-xs text-[var(--color-text-tertiary)] [&_svg]:shrink-0">
                 {metadata.map((item, index) => (
                   <Fragment key={item.key}>
-                    {index > 0 ? <span aria-hidden="true" className="shrink-0">·</span> : null}
+                    {index > 0 ? (
+                      <span aria-hidden="true" className="h-[3px] w-[3px] shrink-0 rounded-full bg-[var(--color-text-tertiary)]" />
+                    ) : null}
                     {item.content}
                   </Fragment>
                 ))}
@@ -58,7 +60,7 @@ export function SessionChatHeader({
             ) : null}
             {children}
           </div>
-          {actions ? <div className="flex shrink-0 items-center gap-1">{actions}</div> : null}
+          {actions ? <div className="flex shrink-0 items-center gap-2 pt-1">{actions}</div> : null}
         </div>
       </div>
     </div>
diff --git a/desktop/src/components/chat/SlashCommandMenu.tsx b/desktop/src/components/chat/SlashCommandMenu.tsx
index cd4ae129..6374a87b 100644
--- a/desktop/src/components/chat/SlashCommandMenu.tsx
+++ b/desktop/src/components/chat/SlashCommandMenu.tsx
@@ -1,5 +1,6 @@
 import { forwardRef, type MutableRefObject } from 'react'
 import {
+  BookOpen,
   Bot,
   Bug,
   CircleDollarSign,
@@ -15,7 +16,6 @@ import {
   PanelTop,
   Settings,
   ShieldCheck,
-  Sparkles,
   Target,
   Terminal,
   Wrench,
@@ -28,6 +28,10 @@ import type { ComposerReferenceCandidate } from '@/types/composerReference'
 import { safeMentionIcon } from '@/lib/composerMentions'
 import { publicAssetPath } from '@/lib/publicAsset'
 import { referenceFallbackIcon, skillSourceLabelKey } from './referencePresentation'
+import { COMPOSER_KBD, COMPOSER_MENU_SECTION } from './composerMenuStyles'
+
+/** One menu row: icon, then the name over its description (the 「素」 menu item). */
+const ROW = 'flex min-h-8 w-full cursor-default items-center gap-2.5 rounded-[var(--radius-sm)] px-2 py-1.5 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]'
 
 const SYSTEM_SLASH_COMMAND_ICONS: Record<string, LucideIcon> = {
   agent: Bot,
@@ -38,7 +42,7 @@ const SYSTEM_SLASH_COMMAND_ICONS: Record<string, LucideIcon> = {
   cost: CircleDollarSign,
   context: PanelTop,
   plugin: Package,
-  memory: Sparkles,
+  memory: BookOpen,
   doctor: Wrench,
   compact: Zap,
   clear: Eraser,
@@ -109,22 +113,24 @@ export const SlashCommandMenu = forwardRef<HTMLDivElement, SlashCommandMenuProps
           ref={(element) => { itemRefs.current[index] = element }}
           onClick={() => onSelect(command.name)}
           onMouseEnter={() => onHighlight(index)}
-          className={`flex w-full cursor-default items-center gap-3 rounded-[var(--radius-md)] px-3 py-2 text-left transition-colors ${
+          className={`${ROW} ${
             index === selectedIndex
               ? 'bg-[var(--color-surface-hover)]'
               : 'hover:bg-[var(--color-surface-hover)]'
-          } focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]`}
+          }`}
         >
           <Icon
             aria-hidden="true"
-            className="h-5 w-5 shrink-0 text-[var(--color-text-secondary)]"
-            strokeWidth={1.8}
+            className="h-4 w-4 shrink-0 text-[var(--color-text-tertiary)]"
+            strokeWidth={1.75}
           />
-          <span id={`${id}-label-${index}`} className="min-w-0 max-w-[60%] flex-none truncate text-sm font-medium text-[var(--color-text-primary)]">
-            /{command.name}
-          </span>
-          <span id={`${id}-description-${index}`} className="min-w-0 flex-1 truncate text-sm text-[var(--color-text-tertiary)]">
-            {command.description}
+          <span className="grid min-w-0 flex-1 gap-px">
+            <span id={`${id}-label-${index}`} className="truncate text-[13px] font-medium text-[var(--color-text-primary)]">
+              /{command.name}
+            </span>
+            <span id={`${id}-description-${index}`} className="truncate text-xs text-[var(--color-text-tertiary)]">
+              {command.description}
+            </span>
           </span>
           {isSearching && command.argumentHint ? (
             <span className="max-w-[30%] shrink truncate font-mono text-[11px] text-[var(--color-text-tertiary)]" title={command.argumentHint}>
@@ -139,19 +145,19 @@ export const SlashCommandMenu = forwardRef<HTMLDivElement, SlashCommandMenuProps
       <div
         ref={ref}
         onMouseDown={event => event.preventDefault()}
-        className="absolute bottom-full left-0 right-0 z-[var(--z-dropdown)] mb-2 overflow-hidden rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] shadow-[var(--shadow-overlay)]"
+        className="absolute bottom-full left-0 right-0 z-[var(--z-dropdown)] mb-2 overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] shadow-[var(--shadow-dropdown)]"
       >
-        {isSearching ? <div className="px-4 pb-1 pt-3 text-xs font-medium text-[var(--color-text-tertiary)]">
+        {isSearching ? <div className={`${COMPOSER_MENU_SECTION} px-3 pt-2.5`}>
           {t('chat.slashSearchResults')}
         </div> : null}
         <div
           id={id}
           role="listbox"
           aria-label={t('chat.slashCommands')}
-          className="max-h-[min(360px,45vh)] overflow-y-auto p-1.5"
+          className="max-h-[min(360px,45vh)] overflow-y-auto p-1"
         >
           {groups.system.length > 0 ? <div role="group" aria-label={t(isSearching ? 'chat.slashCommands' : 'chat.slashFrequent')}>
-            {!isSearching ? <div className="px-3 pb-1 pt-2 text-xs font-medium text-[var(--color-text-tertiary)]">{t('chat.slashFrequent')}</div> : null}
+            {!isSearching ? <div className={COMPOSER_MENU_SECTION}>{t('chat.slashFrequent')}</div> : null}
             {groups.system.map(renderSystemCommand)}
           </div> : null}
 
@@ -160,7 +166,7 @@ export const SlashCommandMenu = forwardRef<HTMLDivElement, SlashCommandMenuProps
             { kind: 'plugin' as const, items: groups.plugins ?? [], label: t('chat.referencePlugins'), offset: groups.system.length + groups.skills.length },
           ]).map(group => group.items.length > 0 ? (
             <div key={group.kind} role="group" aria-label={group.label}>
-              <div className="px-3 pb-1 pt-2 text-xs font-medium text-[var(--color-text-tertiary)]">{group.label}</div>
+              <div className={COMPOSER_MENU_SECTION}>{group.label}</div>
               {group.items.map((command, position) => {
                 const index = group.offset + position
                 const candidate = references.find(item => item.kind === group.kind && (item.name === command.name || item.id === command.name))
@@ -173,24 +179,26 @@ export const SlashCommandMenu = forwardRef<HTMLDivElement, SlashCommandMenuProps
                   title={[candidate?.displayName || command.name, command.argumentHint, command.description].filter(Boolean).join(' — ')}
                   ref={element => { itemRefs.current[index] = element }}
                   onClick={() => onSelect(command.name)} onMouseEnter={() => onHighlight(index)}
-                  className={`flex w-full cursor-default items-center gap-3 rounded-[var(--radius-md)] px-3 py-2 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] ${index === selectedIndex ? 'bg-[var(--color-surface-hover)]' : 'hover:bg-[var(--color-surface-hover)]'}`}>
-                  {icon ? <img src={publicAssetPath(icon)} alt="" className="h-5 w-5 shrink-0 object-contain" /> : <Icon aria-hidden="true" className="h-5 w-5 shrink-0 text-[var(--color-text-secondary)]" strokeWidth={1.8} />}
-                  <span id={`${id}-label-${index}`} className="min-w-0 max-w-[60%] flex-none truncate text-sm font-medium text-[var(--color-text-primary)]">{candidate?.displayName || command.name}</span>
-                  <span id={`${id}-description-${index}`} className="min-w-0 flex-1 truncate text-sm text-[var(--color-text-tertiary)]">{command.description}</span>
+                  className={`${ROW} ${index === selectedIndex ? 'bg-[var(--color-surface-hover)]' : 'hover:bg-[var(--color-surface-hover)]'}`}>
+                  {icon ? <img src={publicAssetPath(icon)} alt="" className="h-4 w-4 shrink-0 object-contain" /> : <Icon aria-hidden="true" className="h-4 w-4 shrink-0 text-[var(--color-text-tertiary)]" strokeWidth={1.75} />}
+                  <span className="grid min-w-0 flex-1 gap-px">
+                    <span id={`${id}-label-${index}`} className="truncate text-[13px] font-medium text-[var(--color-text-primary)]">{candidate?.displayName || command.name}</span>
+                    <span id={`${id}-description-${index}`} className="truncate text-xs text-[var(--color-text-tertiary)]">{command.description}</span>
+                  </span>
                   {sourceLabel ? <span className="shrink-0 text-xs text-[var(--color-text-tertiary)]">{t(sourceLabel)}</span> : null}
                 </div>
               })}
             </div>
           ) : null)}
         </div>
-        {!isSearching ? <div className="px-4 pb-2 text-xs text-[var(--color-text-tertiary)]">{t('chat.slashSearchHint')}</div> : null}
+        {!isSearching ? <div className="px-3 pb-2 text-xs text-[var(--color-text-tertiary)]">{t('chat.slashSearchHint')}</div> : null}
         {showKeyboardHints ? (
-          <div className="flex items-center gap-1.5 border-t border-[var(--color-border)] px-4 py-2 text-xs text-[var(--color-text-tertiary)]">
-            <kbd className="rounded border border-[var(--color-border)] bg-[var(--color-surface-container-low)] px-1.5 py-0.5 font-mono text-[10px]">↑↓</kbd>
+          <div className="flex items-center gap-1.5 border-t border-[var(--color-border)] px-3 py-2 text-[11px] text-[var(--color-text-tertiary)]">
+            <kbd className={COMPOSER_KBD}>↑↓</kbd>
             <span>{t('chat.navigate')}</span>
-            <kbd className="ml-2 rounded border border-[var(--color-border)] bg-[var(--color-surface-container-low)] px-1.5 py-0.5 font-mono text-[10px]">Enter</kbd>
+            <kbd className={`${COMPOSER_KBD} ml-2`}>Enter</kbd>
             <span>{t('chat.select')}</span>
-            <kbd className="ml-2 rounded border border-[var(--color-border)] bg-[var(--color-surface-container-low)] px-1.5 py-0.5 font-mono text-[10px]">Esc</kbd>
+            <kbd className={`${COMPOSER_KBD} ml-2`}>Esc</kbd>
             <span>{t('chat.dismiss')}</span>
           </div>
         ) : null}
diff --git a/desktop/src/components/chat/SlashCommandPanelShell.tsx b/desktop/src/components/chat/SlashCommandPanelShell.tsx
index c3e31ccf..3f56d44c 100644
--- a/desktop/src/components/chat/SlashCommandPanelShell.tsx
+++ b/desktop/src/components/chat/SlashCommandPanelShell.tsx
@@ -1,7 +1,15 @@
 import type { ReactNode } from 'react'
+import { X } from 'lucide-react'
 import { IconButton } from '@/components/ui/IconButton'
 import { useTranslation } from '../../i18n'
 
+/**
+ * The floating card the local slash commands (/mcp, /skills, /help, /save-workflow)
+ * open above the composer. Same shell as every other composer popover — white,
+ * hairline border, `--radius-lg`, `--shadow-dropdown` — with a header band and a
+ * scrolling body instead of `p-1` menu padding, because it holds content rather
+ * than a list of choices.
+ */
 export function SlashCommandPanelShell({
   title,
   subtitle,
@@ -15,22 +23,21 @@ export function SlashCommandPanelShell({
 }) {
   const t = useTranslation()
   return (
-    <div className="absolute bottom-full left-0 right-0 z-[var(--z-dropdown)] mb-3 overflow-hidden rounded-[var(--radius-2xl)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] shadow-[var(--shadow-overlay)]">
-      <div className="flex items-start justify-between gap-4 border-b border-[var(--color-border)] px-5 py-4">
-        <div>
-          <h3 className="text-lg font-semibold text-[var(--color-text-primary)]">{title}</h3>
-          <p className="mt-1 text-sm text-[var(--color-text-tertiary)]">{subtitle}</p>
+    <div className="absolute bottom-full left-0 right-0 z-[var(--z-dropdown)] mb-2 overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] shadow-[var(--shadow-dropdown)]">
+      <div className="flex items-start justify-between gap-3 border-b border-[var(--color-border)] px-4 py-3">
+        <div className="min-w-0">
+          <h3 className="text-sm font-semibold leading-snug text-[var(--color-text-primary)]">{title}</h3>
+          <p className="mt-0.5 truncate text-xs text-[var(--color-text-tertiary)]">{subtitle}</p>
         </div>
         <IconButton
-          icon="close"
+          icon={<X size={16} strokeWidth={1.75} aria-hidden="true" />}
           label={t('tabs.close')}
-          size="lg"
-          tone="secondary"
-          shape="circle"
+          size="sm"
+          tone="muted"
           onClick={onClose}
         />
       </div>
-      <div className="max-h-[min(620px,72vh)] overflow-y-auto px-5 py-4">{children}</div>
+      <div className="max-h-[min(620px,72vh)] overflow-y-auto p-4">{children}</div>
     </div>
   )
 }
diff --git a/desktop/src/components/chat/StreamingIndicator.test.tsx b/desktop/src/components/chat/StreamingIndicator.test.tsx
index 249178b9..5aab2311 100644
--- a/desktop/src/components/chat/StreamingIndicator.test.tsx
+++ b/desktop/src/components/chat/StreamingIndicator.test.tsx
@@ -1,5 +1,6 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { cleanup, render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
 
 vi.mock('../../api/websocket', () => ({
   wsManager: {
@@ -86,6 +87,31 @@ describe('StreamingIndicator', () => {
     expect(screen.getByText(/↓ 2\.2k tokens/)).toBeTruthy()
   })
 
+  it('draws the live line as a running ring, a sweeping verb and monospaced meta', () => {
+    useChatStore.setState({
+      sessions: {
+        [ACTIVE_TAB]: makeSession({ chatState: 'thinking', elapsedSeconds: 12, streamingResponseChars: 8976 }),
+      },
+    })
+
+    render(<StreamingIndicator />)
+
+    const status = screen.getByTestId('turn-status-indicator')
+    // The spinner a running tool shows, in the running colour — not the
+    // generic "AI" sparkle, which said nothing about the turn's state.
+    const ring = status.querySelector('svg.lucide-loader-circle')
+    expect(ring).toHaveClass('motion-safe:animate-spin', 'text-[var(--color-info)]')
+    expect(status.querySelector('svg.lucide-sparkles')).toBeNull()
+    expect(status.querySelector('svg')?.getAttribute('class')).not.toContain('--color-brand')
+    expect(status.textContent).not.toContain('✦')
+    expect(screen.getByText('Thinking...')).toHaveClass('turn-status-shimmer')
+    // Elapsed time and tokens are numbers that tick: mono, tabular, tertiary.
+    const tokens = screen.getByText(/↓ 2\.2k tokens/)
+    expect(tokens).toHaveClass('font-mono', 'tabular-nums', 'text-[11px]')
+    // The keyframes ship beside the line, not inside the live region.
+    expect(status.querySelector('style')).toBeNull()
+  })
+
   it('hides the token estimate until this turn has streamed output', () => {
     useChatStore.setState({
       sessions: {
diff --git a/desktop/src/components/chat/StreamingIndicator.tsx b/desktop/src/components/chat/StreamingIndicator.tsx
index 54ff5f99..685c6e5f 100644
--- a/desktop/src/components/chat/StreamingIndicator.tsx
+++ b/desktop/src/components/chat/StreamingIndicator.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { RefreshCw } from 'lucide-react'
+import { LoaderCircle, RefreshCw } from 'lucide-react'
 import { Badge } from '@/components/ui/Badge'
 import { useChatStore } from '../../stores/chatStore'
 import { useTabStore } from '../../stores/tabStore'
@@ -96,9 +96,9 @@ export function StreamingIndicator() {
         data-testid="api-retry-indicator"
         role="status"
         aria-live="polite"
-        className="mb-2 flex w-full max-w-[min(720px,100%)] flex-wrap items-center gap-2 rounded-[var(--radius-md)] border border-[var(--color-warning)] bg-[var(--color-warning-container)] px-3 py-2 text-xs text-[var(--color-on-warning-container)] shadow-[var(--shadow-card)]"
+        className="mb-2 flex w-full flex-wrap items-center gap-2 rounded-[var(--radius-md)] bg-[var(--color-warning-container)] px-3 py-2 text-xs text-[var(--color-on-warning-container)]"
       >
-        <RefreshCw size={14} strokeWidth={2.2} className="shrink-0 animate-spin text-[var(--color-warning)]" aria-hidden="true" />
+        <RefreshCw size={14} strokeWidth={1.75} className="shrink-0 animate-spin" aria-hidden="true" />
         <span className="font-medium">{t('chat.retry.title')}</span>
         {/*
           Neutral rather than `tone="warning"`: these chips sit on the warning
@@ -130,17 +130,17 @@ export function StreamingIndicator() {
         data-testid="streaming-fallback-indicator"
         role="status"
         aria-live="polite"
-        className="flex w-fit items-center gap-[9px] py-1 text-[13.5px] text-[var(--color-text-secondary)]"
+        className="flex min-h-7 w-fit max-w-full flex-wrap items-center gap-x-2 text-[13px] text-[var(--color-text-secondary)]"
       >
-        <RefreshCw size={13} strokeWidth={2.2} className="shrink-0 animate-spin text-[var(--color-text-secondary)]" aria-hidden="true" />
+        <RefreshCw size={14} strokeWidth={1.75} className="shrink-0 animate-spin text-[var(--color-text-tertiary)]" aria-hidden="true" />
         <span className="font-medium text-[var(--color-text-primary)]">
           {t('chat.fallback.title')}
         </span>
-        <span className="text-[12.5px] text-[var(--color-text-tertiary)]">
+        <span className="text-xs text-[var(--color-text-tertiary)]">
           {t('chat.fallback.detail')}
         </span>
         {elapsedSeconds > 0 && (
-          <span className="text-[12.5px] text-[var(--color-text-tertiary)]">
+          <span className={STATUS_META_CLASS}>
             {formatDurationSeconds(elapsedSeconds, t)}
           </span>
         )}
@@ -151,28 +151,68 @@ export function StreamingIndicator() {
   const verb = resolveTurnStatusVerb(t, chatState, statusVerb)
 
   return (
-    <div
-      data-testid="turn-status-indicator"
-      role="status"
-      aria-live="polite"
-      // Bare line, not a pill: it now sits at the end of the live turn rail, and
-      // the rail already says "still going". A bordered chip here would read as
-      // a second, competing status object next to the one that is lit.
-      className="flex w-fit items-center gap-[9px] py-1 text-[13.5px] text-[var(--color-text-secondary)]"
-    >
-      <span className="animate-pulse-dot text-[var(--color-brand)]" aria-hidden="true">✦</span>
-      <span className="font-medium text-[var(--color-text-primary)]">{verb}...</span>
-      {elapsedSeconds > 0 && (
-        <span>{formatDurationSeconds(elapsedSeconds, t)}</span>
-      )}
-      {streamingTokens > 0 && (
-        <>
-          <span aria-hidden="true">·</span>
-          <span className="font-mono text-[12.5px]">
-            ↓ {t('common.tokens', { count: formatTokenCount(streamingTokens) })}
-          </span>
-        </>
-      )}
-    </div>
+    <>
+      <style>{TURN_STATUS_STYLES}</style>
+      <div
+        data-testid="turn-status-indicator"
+        role="status"
+        aria-live="polite"
+        // Bare line, not a pill: it sits at the end of the live turn, and a
+        // bordered chip here would read as a second, competing status object.
+        className="flex h-7 w-fit max-w-full items-center gap-2 text-[13px] text-[var(--color-text-secondary)]"
+      >
+        {/* The ring a running tool row spins, in the running colour: the
+            turn is working, and it says so the way the rest of the timeline
+            does rather than with a decorative "AI" glyph. */}
+        <LoaderCircle
+          size={15}
+          strokeWidth={1.75}
+          aria-hidden="true"
+          className="turn-status-spinner shrink-0 text-[var(--color-info)] motion-safe:animate-spin"
+        />
+        <span className="turn-status-shimmer min-w-0 truncate font-medium">{verb}...</span>
+        {elapsedSeconds > 0 && (
+          <span className={STATUS_META_CLASS}>{formatDurationSeconds(elapsedSeconds, t)}</span>
+        )}
+        {streamingTokens > 0 && (
+          <>
+            <span aria-hidden="true" className="h-[3px] w-[3px] shrink-0 rounded-full bg-[var(--color-text-tertiary)]" />
+            <span className={STATUS_META_CLASS}>
+              ↓ {t('common.tokens', { count: formatTokenCount(streamingTokens) })}
+            </span>
+          </>
+        )}
+      </div>
+    </>
   )
 }
+
+/** Elapsed time and token count: small, monospaced, steady-width digits. */
+const STATUS_META_CLASS = 'shrink-0 whitespace-nowrap font-mono text-[11px] tabular-nums text-[var(--color-text-tertiary)]'
+
+/**
+ * The verb reads as live through a light sweeping across it, and the ring
+ * spins; neither moves the layout. Reduced motion keeps both still and leaves
+ * the text in its plain secondary colour.
+ */
+const TURN_STATUS_STYLES = `
+@keyframes turn-status-sweep {
+  from { background-position: 100% 0; }
+  to { background-position: -100% 0; }
+}
+.turn-status-shimmer {
+  background: linear-gradient(90deg, var(--color-text-tertiary) 0%, var(--color-text-tertiary) 40%, var(--color-text-primary) 50%, var(--color-text-tertiary) 60%, var(--color-text-tertiary) 100%);
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  animation: turn-status-sweep 2.2s linear infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  .turn-status-shimmer {
+    animation: none;
+    background: none;
+    color: var(--color-text-secondary);
+  }
+}
+`
diff --git a/desktop/src/components/chat/TerminalChrome.tsx b/desktop/src/components/chat/TerminalChrome.tsx
index 8075ba56..873c2683 100644
--- a/desktop/src/components/chat/TerminalChrome.tsx
+++ b/desktop/src/components/chat/TerminalChrome.tsx
@@ -1,33 +1,35 @@
 import type { ReactNode } from 'react'
+import { SquareTerminal } from 'lucide-react'
 
 type Props = {
-  title?: string
+  /** Mono label at the head's left: the shell the command ran in. */
+  label?: string
+  /** Right side of the head: exit-code pill, duration, copy. */
+  meta?: ReactNode
   children: ReactNode
   className?: string
 }
 
 /**
- * macOS-style terminal window decoration with traffic light buttons.
- * Reusable wrapper for Bash commands, tool results, and code viewers.
+ * The frame a shell call's output sits in: a 32px head and a sunken body.
+ *
+ * Deliberately not a window. The macOS traffic lights it used to wear were
+ * decoration pretending to be controls, and the black slab they sat on was the
+ * loudest thing in a light transcript — a terminal block is a code block that
+ * happens to have run, so it takes the code block's ground in every theme.
  */
-export function TerminalChrome({ title, children, className = '' }: Props) {
+export function TerminalChrome({ label, meta, children, className = '' }: Props) {
   return (
-    <div className={`overflow-hidden rounded-[var(--radius-xl)] border border-[var(--color-terminal-border)] bg-[var(--color-terminal-bg)] ${className}`}>
-      {/* Title bar with traffic lights */}
-      <div className="flex items-center gap-2.5 border-b border-[var(--color-terminal-border)] bg-[var(--color-terminal-header)] px-4 py-[11px]">
-        <div className="flex gap-1.5">
-          <div className="h-2.5 w-2.5 rounded-[var(--radius-full)] bg-[var(--color-terminal-danger)]" />
-          <div className="h-2.5 w-2.5 rounded-[var(--radius-full)] bg-[var(--color-terminal-warning)]" />
-          <div className="h-2.5 w-2.5 rounded-[var(--radius-full)] bg-[var(--color-terminal-accent)]" />
-        </div>
-        {title && (
-          <span className="ml-1.5 truncate font-mono text-[12.5px] font-medium text-[var(--color-terminal-muted)]">
-            {title}
-          </span>
-        )}
+    <div
+      data-terminal-chrome=""
+      className={`overflow-hidden rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-code-bg)] ${className}`}
+    >
+      <div className="flex h-8 items-center gap-2.5 border-b border-[var(--color-border)] bg-[var(--color-surface-container)] pl-2.5 pr-1.5 text-[var(--color-text-tertiary)]">
+        <SquareTerminal size={14} strokeWidth={1.75} aria-hidden="true" className="shrink-0" />
+        <span className="min-w-0 flex-1 truncate font-mono text-[11px]">{label}</span>
+        {meta ? <span className="flex shrink-0 items-center gap-2">{meta}</span> : null}
       </div>
-      {/* Content */}
-      <div className="bg-[var(--color-terminal-bg)] text-[var(--color-terminal-fg)]">
+      <div className="text-[var(--color-code-fg)]">
         {children}
       </div>
     </div>
diff --git a/desktop/src/components/chat/ThinkingBlock.test.tsx b/desktop/src/components/chat/ThinkingBlock.test.tsx
index 1f3d6d46..fc271280 100644
--- a/desktop/src/components/chat/ThinkingBlock.test.tsx
+++ b/desktop/src/components/chat/ThinkingBlock.test.tsx
@@ -69,6 +69,26 @@ describe('ThinkingBlock', () => {
     expect(screen.getByRole('button')).toHaveTextContent('Thought')
   })
 
+  it('draws one upright row whose chevron turns and whose preview yields to the body when open', () => {
+    // CJK has no italic: the old slanted row was the browser shearing glyphs.
+    const { container } = render(<ThinkingBlock content={'Checking the retry path first'} />)
+    const row = screen.getByRole('button')
+    expect(container.querySelector('.italic')).toBeNull()
+    expect(row.textContent).not.toMatch(/[▸▾]/)
+    const chevron = row.querySelector('.lucide-chevron-right')
+    expect(chevron).not.toBeNull()
+    expect(chevron).not.toHaveClass('rotate-90')
+    const preview = screen.getByText('Checking the retry path first')
+    expect(preview).not.toHaveClass('invisible')
+
+    fireEvent.click(row)
+
+    expect(row.querySelector('.lucide-chevron-right')).toHaveClass('rotate-90')
+    // Hidden but kept, so the row does not reflow when it opens.
+    expect(preview).toHaveClass('invisible')
+    expect(container.querySelector('[data-thinking-content="expanded"]')).toHaveClass('border-l')
+  })
+
   it('keeps the expanded state across a virtualized row unmount and remount', () => {
     // Virtualization unmounts rows outside the window. Losing the reader's
     // disclosure choice changes the row height on the way back, which is the
diff --git a/desktop/src/components/chat/ThinkingBlock.tsx b/desktop/src/components/chat/ThinkingBlock.tsx
index e18d2884..5c5bb53d 100644
--- a/desktop/src/components/chat/ThinkingBlock.tsx
+++ b/desktop/src/components/chat/ThinkingBlock.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect, useMemo, useRef } from 'react'
 import { getDisclosure, setDisclosure } from '../../lib/disclosureMemory'
-import { Brain } from 'lucide-react'
+import { Brain, ChevronRight } from 'lucide-react'
 import { useTranslation } from '../../i18n'
 import { MarkdownRenderer } from '../markdown/MarkdownRenderer'
 
@@ -63,33 +63,38 @@ export function ThinkingBlock({
           if (disclosureKey) setDisclosure(disclosureKey, next)
         }}
         aria-expanded={expanded}
-        className="-mx-2 flex w-[calc(100%+1rem)] items-baseline gap-2 rounded-[var(--radius-md)] px-2 py-1 text-left transition-colors hover:bg-[var(--color-surface-hover)] focus:outline-none focus-visible:shadow-[var(--shadow-focus-ring)]"
+        className="-mx-2 flex h-7 w-[calc(100%+1rem)] min-w-0 items-center gap-2 rounded-[var(--radius-sm)] px-2 text-left text-[13px] text-[var(--color-text-tertiary)] transition-colors hover:bg-[var(--color-surface-hover)] focus:outline-none focus-visible:shadow-[var(--shadow-focus-ring)]"
       >
         <Brain
-          size={13}
-          strokeWidth={1.8}
+          size={15}
+          strokeWidth={1.75}
           aria-hidden="true"
-          className="mt-[3px] shrink-0 self-start text-[var(--color-text-tertiary)]"
+          className="shrink-0"
         />
-        <span className="shrink-0 text-[12.5px] italic text-[var(--color-text-tertiary)]">
+        <span className="shrink-0 font-medium text-[var(--color-text-secondary)]">
           {label}
         </span>
         {preview ? (
-          <span className="min-w-0 flex-1 truncate text-[12.5px] italic leading-[1.7] text-[var(--color-text-tertiary)]">
+          // Hidden, not removed, once open: the body below says the same thing
+          // in full, and keeping the box holds the row's chevron in place.
+          <span className={`min-w-0 flex-1 truncate ${expanded ? 'invisible' : ''}`}>
             {preview}
           </span>
         ) : (
           <span className="flex-1" />
         )}
-        <span aria-hidden="true" className="shrink-0 text-[8px] text-[var(--color-text-tertiary)]">
-          {expanded ? '▾' : '▸'}
-        </span>
+        <ChevronRight
+          size={14}
+          strokeWidth={1.75}
+          aria-hidden="true"
+          className={`shrink-0 text-[var(--color-text-tertiary)] transition-transform duration-150 motion-reduce:transition-none ${expanded ? 'rotate-90' : ''}`}
+        />
       </button>
       {expanded && hasDisplayContent && (
         <div
           ref={contentRef}
           data-thinking-content="expanded"
-          className="relative mb-2 mt-1 max-h-[300px] overflow-y-auto rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] px-3 py-2.5 text-[11px] text-[var(--color-text-secondary)]"
+          className="relative mb-1.5 ml-[7px] mt-1 max-h-[300px] overflow-y-auto border-l border-[var(--color-outline)] py-0.5 pl-[15px] text-[var(--color-text-secondary)]"
         >
           <MarkdownRenderer
             content={displayContent}
diff --git a/desktop/src/components/chat/ToolCallBlock.images.test.tsx b/desktop/src/components/chat/ToolCallBlock.images.test.tsx
index 4f22ebda..e71db9b7 100644
--- a/desktop/src/components/chat/ToolCallBlock.images.test.tsx
+++ b/desktop/src/components/chat/ToolCallBlock.images.test.tsx
@@ -151,8 +151,9 @@ describe('ToolCallBlock · images returned by a tool (#1397)', () => {
     const strip = row.querySelector('[data-tool-result-images]')!
     expect(strip).toBeTruthy()
     expect(disclosureOf(container).contains(strip)).toBe(false)
-    // The row has no card padding; the strip lines up with the row's own text.
-    expect(strip.className).toMatch(/\bpl-\[21px\]/)
+    // The row has no card padding; the strip hangs under the text column, past
+    // the 22px node and its gap, where the expanded details also start.
+    expect(strip.className).toMatch(/\bpl-\[30px\]/)
     expect(strip.className).not.toMatch(/\bpx-4\b/)
     expect(screen.getByRole('button', { name: 'Open image 1 of 1' })).toBeInTheDocument()
   })
diff --git a/desktop/src/components/chat/ToolCallBlock.timeline.test.tsx b/desktop/src/components/chat/ToolCallBlock.timeline.test.tsx
new file mode 100644
index 00000000..97a3c99e
--- /dev/null
+++ b/desktop/src/components/chat/ToolCallBlock.timeline.test.tsx
@@ -0,0 +1,147 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+import { fireEvent, render, screen, within } from '@testing-library/react'
+import { ToolCallBlock } from './ToolCallBlock'
+import { useSettingsStore } from '../../stores/settingsStore'
+import { translate } from '../../i18n'
+
+const t = (key: Parameters<typeof translate>[1], params?: Record<string, string | number>) =>
+  translate('en', key, params)
+
+function openRow(container: HTMLElement) {
+  fireEvent.click(container.querySelector('[data-chat-disclosure="true"]')!)
+}
+
+describe('ToolCallBlock · timeline row', () => {
+  beforeEach(() => {
+    useSettingsStore.setState({ locale: 'en' })
+  })
+
+  it('shows an edit as +N −N on the row and the same counts on its diff block', () => {
+    const { container } = render(
+      <ToolCallBlock
+        chrome="row"
+        toolName="Edit"
+        input={{ file_path: '/repo/src/validators.ts', old_string: 'a\nb', new_string: 'a\nB\nc' }}
+        result={{ content: 'The file has been updated.', isError: false }}
+      />,
+    )
+
+    const head = container.querySelector<HTMLElement>('[data-chat-disclosure="true"]')!
+    expect(head.textContent).toContain(t('toolVerb.edit'))
+    expect(head.textContent).toContain('validators.ts')
+    expect(head.textContent).toContain('+2')
+    expect(head.textContent).toContain('−1')
+    expect(head.getAttribute('title')).toBe('Edit · /repo/src/validators.ts')
+
+    openRow(container)
+    const diff = within(container.querySelector<HTMLElement>('[data-diff-block]')!)
+    expect(diff.getByText('+2')).toBeTruthy()
+    expect(diff.getByText('−1')).toBeTruthy()
+    // The directory gives way first; the file name always stays readable.
+    expect(diff.getByText('validators.ts').className).toContain('shrink-0')
+    expect(diff.getByTitle('/repo/src/validators.ts')).toBeTruthy()
+  })
+
+  it('draws a TodoWrite call as its checklist rather than its JSON', () => {
+    const { container } = render(
+      <ToolCallBlock
+        chrome="row"
+        toolName="TodoWrite"
+        input={{
+          todos: [
+            { content: 'Read the form', status: 'completed', activeForm: 'Reading' },
+            { content: 'Extract validators', status: 'in_progress', activeForm: 'Extracting' },
+            { content: 'Add tests', status: 'pending', activeForm: 'Adding' },
+          ],
+        }}
+        result={{ content: 'Todos have been modified successfully.', isError: false }}
+      />,
+    )
+
+    const head = container.querySelector<HTMLElement>('[data-chat-disclosure="true"]')!
+    expect(head.textContent).toContain(t('toolVerb.updateTodos'))
+    expect(head.textContent).not.toContain('TodoWrite')
+    expect(head.textContent).toContain(t('tool.itemCountPlural', { count: 3 }))
+
+    openRow(container)
+    const items = [...container.querySelectorAll('[data-todo-list] li')]
+    expect(items.map((item) => item.getAttribute('data-todo-status'))).toEqual(['completed', 'in_progress', 'pending'])
+    expect(items[0]?.querySelector('span')?.className).toContain('line-through')
+    expect(container.textContent).not.toContain('activeForm')
+    expect(container.textContent).not.toContain('Todos have been modified')
+  })
+
+  it('lays grep hits out as file:line plus code, with the match marked', () => {
+    const { container } = render(
+      <ToolCallBlock
+        chrome="row"
+        toolName="Grep"
+        input={{ pattern: 'EMAIL_RE', output_mode: 'content', '-n': true }}
+        result={{ content: 'src/a.ts:3:const EMAIL_RE = /x/\nsrc/b.ts:9:EMAIL_RE.test(v)', isError: false }}
+      />,
+    )
+
+    const head = container.querySelector<HTMLElement>('[data-chat-disclosure="true"]')!
+    expect(head.textContent).toContain(t('toolVerb.search'))
+    expect(head.textContent).toContain('EMAIL_RE')
+    expect(head.textContent).toContain(`${t('tool.fileCountPlural', { count: 2 })} · ${t('tool.matchCountPlural', { count: 2 })}`)
+
+    openRow(container)
+    const hits = container.querySelector<HTMLElement>('[data-search-result]')!
+    expect(hits.textContent).toContain('src/a.ts:3')
+    expect([...hits.querySelectorAll('mark')].map((mark) => mark.textContent)).toEqual(['EMAIL_RE', 'EMAIL_RE'])
+  })
+
+  it('heads a shell call with its exit code, not window decoration', () => {
+    const { container } = render(
+      <ToolCallBlock
+        chrome="row"
+        toolName="Bash"
+        input={{ command: 'git show HEAD --no-stat', description: 'Show the commit' }}
+        result={{ content: 'fatal: unrecognized argument: --no-stat\nExit code 128', isError: true }}
+        durationMs={420}
+      />,
+    )
+
+    openRow(container)
+    const terminal = container.querySelector<HTMLElement>('[data-terminal-chrome]')!
+    expect(within(terminal).getByText(t('tool.exitCode', { code: 128 }))).toBeTruthy()
+    expect(terminal.querySelector('[data-shell-exit]')?.className).toContain('--color-error-container')
+    expect(terminal.textContent).toContain('420ms')
+    expect(terminal.textContent).toContain('git show HEAD --no-stat')
+    // A light theme gets a sunken code ground, never the old black slab.
+    expect(terminal.className).toContain('bg-[var(--color-code-bg)]')
+    expect(terminal.className).not.toContain('terminal-bg')
+  })
+
+  it('reports a successful command as exit 0', () => {
+    const { container } = render(
+      <ToolCallBlock
+        chrome="row"
+        toolName="Bash"
+        input={{ command: 'ls' }}
+        result={{ content: 'a.txt', isError: false }}
+      />,
+    )
+    openRow(container)
+    expect(screen.getByText(t('tool.exitCode', { code: 0 })).className).toContain('--color-success-container')
+  })
+
+  it('colours the node by state: running blue, waiting amber, failed red', () => {
+    const { container, rerender } = render(
+      <ToolCallBlock chrome="row" toolName="Bash" input={{ command: 'sleep 1' }} running />,
+    )
+    const node = () => container.querySelector<HTMLElement>('[data-tool-node]')!
+    expect(node().getAttribute('data-tool-node')).toBe('running')
+    expect(node().className).toContain('--color-info')
+
+    rerender(<ToolCallBlock chrome="row" toolName="Bash" input={{ command: 'sleep 1' }} awaitingApproval />)
+    expect(node().getAttribute('data-tool-node')).toBe('waiting')
+    expect(node().className).toContain('--color-warning')
+    expect(container.textContent).toContain(t('permission.awaitingApproval'))
+
+    rerender(<ToolCallBlock chrome="row" toolName="Bash" input={{ command: 'sleep 1' }} result={{ content: 'boom', isError: true }} />)
+    expect(node().getAttribute('data-tool-node')).toBe('error')
+    expect(node().className).toContain('--color-error-container')
+  })
+})
diff --git a/desktop/src/components/chat/ToolCallBlock.tsx b/desktop/src/components/chat/ToolCallBlock.tsx
index 5e34db1b..67dc7f04 100644
--- a/desktop/src/components/chat/ToolCallBlock.tsx
+++ b/desktop/src/components/chat/ToolCallBlock.tsx
@@ -1,11 +1,35 @@
 import { SessionToolLinks, SESSION_TOOL_NAMES } from '@/components/chat/SessionToolLinks'
-import { memo, useMemo, useState } from 'react'
+import { memo, useMemo, useState, type ReactNode } from 'react'
 import { getDisclosure, setDisclosure } from '../../lib/disclosureMemory'
-import { CircleStop, CircleX, LoaderCircle } from 'lucide-react'
+import {
+  ChevronRight,
+  Circle,
+  CircleCheck,
+  CircleDot,
+  CirclePause,
+  CircleStop,
+  CircleX,
+  ClipboardList,
+  Copy,
+  LoaderCircle,
+} from 'lucide-react'
 import { activitySegmentIcon } from './activityGroupModel'
 import { CodeViewer } from './CodeViewer'
 import { DiffViewer } from './DiffViewer'
 import { TerminalChrome } from './TerminalChrome'
+import {
+  countDiffLines,
+  countReadLines,
+  formatCountLabel,
+  hasToolVerb,
+  parseSearchResult,
+  parseShellExitCode,
+  parseTodos,
+  toolVerb,
+  type GrepResult,
+  type TodoItem,
+} from './toolCallPresentation'
+import { Badge } from '@/components/ui/Badge'
 import { CopyButton } from '@/components/ui/CopyButton'
 import { toolResultImagesFor } from '@/lib/toolResultContent'
 import { useTranslation } from '../../i18n'
@@ -23,14 +47,23 @@ import {
   isExitPlanModeTool,
 } from './PlanModePreview'
 
+type Translate = (key: TranslationKey, params?: Record<string, string | number>) => string
+
 /**
- * `card` is the standalone bordered block. `row` strips the border, the ink icon
- * square and the bold name so the call reads as one line inside an expanded
- * activity group. Expanded row details stay inline on a nested guide instead of
- * rebuilding the card stack that the activity-group treatment removed (#1177).
+ * `card` is the standalone bordered block. `row` is one node of an activity
+ * run's timeline: a 22px ringed icon on the run's rail, the verb, its target and
+ * a right-aligned result. Expanded row details hang under the text column rather
+ * than rebuilding the card stack the activity-group treatment removed (#1177).
  */
 export type ToolCallChrome = 'card' | 'row'
 
+/**
+ * Where a call stands, as the timeline colours it: running is info blue,
+ * waiting on the user is amber, failed is red. Done and idle stay neutral —
+ * a finished step should not compete with the one still in flight.
+ */
+export type ToolRowStatus = 'idle' | 'running' | 'waiting' | 'done' | 'error' | 'stopped'
+
 type Props = {
   toolName: string
   input: unknown
@@ -49,43 +82,38 @@ type Props = {
   toolUseId?: string
   /** Briefly marks this call as the one a "locate in chat" jump landed on. */
   navigationHighlighted?: boolean
-}
-
-const TOOL_ICONS: Record<string, string> = {
-  ListSessions: 'forum', ReadSession: 'forum', CreateSession: 'add_comment', SendSessionMessage: 'send', WaitSessions: 'hourglass_top',
-  Bash: 'terminal',
-  PowerShell: 'terminal',
-  Read: 'description',
-  Write: 'edit_document',
-  Edit: 'edit_note',
-  Glob: 'search',
-  Grep: 'find_in_page',
-  Agent: 'smart_toy',
-  WebSearch: 'travel_explore',
-  WebFetch: 'cloud_download',
-  NotebookEdit: 'note',
-  Skill: 'auto_awesome',
+  /** A permission prompt for this call is waiting on the user. */
+  awaitingApproval?: boolean
+  /**
+   * The call is executing right now. Owners that know whether the turn is live
+   * pass it; without them only a call whose input is still streaming counts,
+   * so a transcript replayed after a crash never spins forever.
+   */
+  running?: boolean
 }
 
 const WRITER_PREVIEW_MAX_LINES = 120
 const WRITER_PREVIEW_MAX_CHARS = 30000
+const SEARCH_RESULT_MAX_ROWS = 200
 
 /**
- * Shell-style tools whose stdout is echoed back into the terminal card (#1149).
+ * Shell-style tools whose stdout is echoed back into the terminal block (#1149).
  * `PowerShell` mirrors `Bash` on Windows — both carry a `command` input and
  * produce plain-text output, so they share one rendering path.
  */
 const SHELL_TOOL_NAMES = new Set(['Bash', 'PowerShell'])
 
 /**
- * Shell input keys already echoed by the terminal card itself: `command` shows
- * as the `$` line and `description` as the window title. When those are the only
- * keys present the Tool Input JSON block is pure duplication (#1149).
+ * Shell input keys already echoed by the terminal block itself: `command` shows
+ * as the `$` line and `description` names the row. When those are the only keys
+ * present the Tool Input JSON block is pure duplication (#1149).
  */
 const SHELL_ECHOED_INPUT_KEYS = new Set(['command', 'description'])
 
 const SHELL_OUTPUT_COLLAPSED_LINES = 12
 
+const SEARCH_TOOL_NAMES = new Set(['Grep', 'Glob'])
+
 export function isShellTool(toolName: string): boolean {
   return SHELL_TOOL_NAMES.has(toolName)
 }
@@ -141,7 +169,7 @@ type ContentStats = {
   windowed?: boolean
 }
 
-export const ToolCallBlock = memo(function ToolCallBlock({ toolName, input, result, compact = false, chrome = 'card', isPending = false, status, partialInput, defaultExpanded = false, durationMs, disclosureKey, toolUseId, navigationHighlighted = false }: Props) {
+export const ToolCallBlock = memo(function ToolCallBlock({ toolName, input, result, compact = false, chrome = 'card', isPending = false, status, partialInput, defaultExpanded = false, durationMs, disclosureKey, toolUseId, navigationHighlighted = false, awaitingApproval = false, running }: Props) {
   const isRow = chrome === 'row'
   const isExitPlanTool = isExitPlanModeTool(toolName)
   const isEnterPlanTool = isEnterPlanModeTool(toolName)
@@ -154,12 +182,7 @@ export const ToolCallBlock = memo(function ToolCallBlock({ toolName, input, resu
   }
   const t = useTranslation()
   const obj = input && typeof input === 'object' ? (input as Record<string, unknown>) : {}
-  const icon = TOOL_ICONS[toolName] || 'build'
-  const filePath = typeof obj.file_path === 'string' ? obj.file_path : ''
-  const summary = getToolSummary(toolName, obj, t)
-  // Prose reads as prose. Monospace is for the things that are literally code —
-  // a command, a glob, a path — not for a sentence describing one.
-  const summaryIsProse = isProseToolSummary(toolName, obj)
+  const target = getToolTarget(toolName, obj)
   const outputSummary = getToolResultSummary(
     toolName,
     result?.content,
@@ -180,36 +203,63 @@ export const ToolCallBlock = memo(function ToolCallBlock({ toolName, input, resu
   const pendingTitle = pendingSummary
     ? (liveStatsSummary ? `${pendingSummary} · ${liveStatsSummary}` : pendingSummary)
     : undefined
+  const rowStatus: ToolRowStatus = result?.isError
+    ? 'error'
+    : result
+      ? 'done'
+      : stoppedSummary
+        ? 'stopped'
+        : awaitingApproval
+          ? 'waiting'
+          // Input still streaming is live by definition; past that, only an
+          // owner that knows the turn is live may call a resultless step running.
+          : (running || Boolean(pendingSummary))
+            ? 'running'
+            : 'idle'
   // The text extractors below skip image blocks; this is what gives them a thumbnail.
   const toolImages = useMemo(
     () => toolResultImagesFor({ toolName, input, content: result?.content }),
     [input, result?.content, toolName],
   )
+  const durationSummary = typeof durationMs === 'number' && durationMs >= 0 && result
+    ? formatDuration(durationMs)
+    : ''
 
   const preview = useMemo(
-    () => renderPreview(toolName, obj, result, t, isRow),
-    [isRow, obj, result, toolName, t],
+    () => renderPreview(toolName, obj, result, t, durationSummary),
+    [durationSummary, obj, result, toolName, t],
   )
   const details = useMemo(
-    () => renderDetails(toolName, obj, t, isPending ? partialInput : undefined, isRow),
-    [isPending, isRow, obj, partialInput, toolName, t],
+    () => renderDetails(toolName, obj, t, isPending ? partialInput : undefined),
+    [isPending, obj, partialInput, toolName, t],
   )
   const hasResultDetails = Boolean(result && extractTextContent(result.content))
   const hasEditPreview = toolName === 'Edit' && typeof obj.old_string === 'string' && typeof obj.new_string === 'string'
   const hasWritePreview = toolName === 'Write' && typeof obj.content === 'string'
-  // A shell command is itself expandable content: the terminal card echoes the
+  // A shell command is itself expandable content: the terminal block echoes the
   // command plus its output — including the "no output" case, where the result
-  // text is empty and hasResultDetails alone would keep the card sealed shut.
+  // text is empty and hasResultDetails alone would keep the row sealed shut.
   const hasShellCommand = isShellTool(toolName) && typeof obj.command === 'string'
+  const hasTodoList = toolName === 'TodoWrite' && (parseTodos(obj)?.length ?? 0) > 0
   const hasAgentInputDetails = toolName === 'Agent' && (
     typeof obj.description === 'string' ||
     typeof obj.prompt === 'string' ||
     typeof obj.subagent_type === 'string'
   )
-  const expandable = hasEditPreview || hasWritePreview || hasShellCommand || hasResultDetails || hasAgentInputDetails || Boolean(isPending && partialInput)
-  const durationSummary = typeof durationMs === 'number' && durationMs >= 0 && result
-    ? formatDuration(durationMs)
-    : ''
+  const expandable = hasEditPreview || hasWritePreview || hasShellCommand || hasTodoList || hasResultDetails || hasAgentInputDetails || Boolean(isPending && partialInput)
+  // A shell call the model described names itself by that description: it
+  // already leads with the action ("运行 validators 单测"), so a verb in front of
+  // it only stutters, and the pipeline it stands for truncates into noise. The
+  // command moves to the tooltip and the terminal block's `$` line.
+  const shellDescription = isShellTool(toolName) && typeof obj.description === 'string' ? obj.description.trim() : ''
+  const verb = shellDescription || toolVerb(toolName, t)
+  const labelKind: 'verb' | 'toolName' | 'description' = shellDescription
+    ? 'description'
+    : hasToolVerb(toolName) ? 'verb' : 'toolName'
+  // The raw tool name stays one hover away: the row speaks in verbs, but
+  // someone matching a row to a log or a trajectory entry needs the real name.
+  // The overlay covers the running summary too, so its full text rides along.
+  const headTitle = [toolName, target.title, pendingTitle].filter(Boolean).join(' · ')
 
   if (isEnterPlanTool) {
     return (
@@ -246,188 +296,168 @@ export const ToolCallBlock = memo(function ToolCallBlock({ toolName, input, resu
     )
   }
 
+  const meta = (
+    <ToolRowMeta
+      toolName={toolName}
+      input={obj}
+      result={result ?? null}
+      rowStatus={rowStatus}
+      outputSummary={outputSummary}
+      pendingSummary={pendingSummary}
+      stoppedSummary={stoppedSummary}
+      liveStatsSummary={liveStatsSummary}
+    />
+  )
+
+  // The head is a row of siblings, not one big button, so a second action
+  // ("view in trajectory") can sit in it without nesting interactive elements
+  // or being laid over the duration and chevron. The disclosure button stretches
+  // its hit area across the whole head with an `::after` overlay: clicking the
+  // duration or chevron still toggles, and the action — positioned, later in
+  // tree order — paints and hit-tests above it.
+  const head = (
+    <>
+      <button
+        type="button"
+        data-chat-disclosure="true"
+        aria-expanded={expandable ? expanded : undefined}
+        onClick={() => {
+          if (expandable) {
+            setExpanded((value) => !value)
+          }
+        }}
+        title={headTitle}
+        className="flex min-w-0 flex-1 items-center gap-2 self-stretch text-left after:absolute after:inset-0 after:rounded-[var(--radius-sm)] after:content-[''] focus:outline-none focus-visible:after:shadow-[var(--shadow-focus-ring)]"
+      >
+        {isRow ? null : <CardToolIcon toolName={toolName} status={rowStatus} />}
+        <span
+          className={
+            labelKind === 'toolName'
+              ? `${target.text ? 'max-w-[40%] shrink-0' : 'min-w-0'} truncate font-mono text-[12px] font-medium text-[var(--color-text-primary)]`
+              : labelKind === 'description'
+                ? 'min-w-0 truncate text-[13px] font-medium text-[var(--color-text-primary)]'
+                : 'shrink-0 text-[13px] font-medium text-[var(--color-text-primary)]'
+          }
+        >
+          {verb}
+        </span>
+        {target.text ? (
+          <span
+            className={`min-w-0 truncate ${
+              target.mono
+                ? 'font-mono text-[12px] text-[var(--color-text-secondary)]'
+                : 'text-[13px] text-[var(--color-text-secondary)]'
+            }`}
+          >
+            {target.text}
+          </span>
+        ) : null}
+        <span className="min-w-3 flex-1" />
+        {meta}
+      </button>
+      {toolUseId ? (
+        // Its own slot left of the duration: the space is always held (no
+        // jump on hover) and nothing is drawn over the duration or chevron.
+        // `relative` lifts it above the disclosure's stretched overlay.
+        <ViewInTrajectoryButton
+          toolUseId={toolUseId}
+          className="relative -my-1 shrink-0 opacity-0 transition-opacity focus-visible:opacity-100 group-hover/toolhead:opacity-100"
+        />
+      ) : null}
+      <span className="w-[38px] shrink-0 text-right font-mono text-[11px] tabular-nums text-[var(--color-text-tertiary)]">
+        {durationSummary}
+      </span>
+      {expandable ? (
+        <ChevronRight
+          size={14}
+          strokeWidth={1.75}
+          aria-hidden="true"
+          className={`shrink-0 text-[var(--color-text-tertiary)] transition-transform duration-150 ${expanded ? 'rotate-90' : ''}`}
+        />
+      ) : (
+        <span aria-hidden="true" className="w-3.5 shrink-0" />
+      )}
+    </>
+  )
+
+  const imageStrip = toolImages.images.length > 0 || toolImages.dropped > 0 ? (
+    <ToolResultImages
+      images={toolImages.images}
+      omitted={toolImages.dropped}
+      originalPath={toolImages.originalPath}
+      toolName={toolName}
+      // Row: under the text column, where the expanded details also start.
+      className={isRow ? 'pb-1.5 pl-[30px] pt-0.5' : 'px-3 pb-3'}
+    />
+  ) : null
+
+  if (isRow) {
+    return (
+      <div
+        data-tool-call-chrome="row"
+        data-tool-use-id={toolUseId}
+        data-tool-status={rowStatus}
+        className={`rounded-[var(--radius-sm)]${navigationHighlighted ? ' chat-tool-navigation-target' : ''}`}
+      >
+        <div className="flex min-h-[30px] items-center gap-1">
+          <ToolNode toolName={toolName} status={rowStatus} />
+          <div
+            className={`group/toolhead relative flex min-w-0 flex-1 items-center gap-2 self-stretch rounded-[var(--radius-sm)] pl-1 pr-1 transition-colors ${
+              expandable ? 'hover:bg-[var(--color-surface-hover)]' : ''
+            }`}
+          >
+            {head}
+          </div>
+        </div>
+
+        {SESSION_TOOL_NAMES.has(toolName) ? (
+          <div className="pl-[30px]"><SessionToolLinks input={input} result={result?.content} /></div>
+        ) : null}
+
+        {/* Outside the disclosure on purpose: a picture the tool returned is the
+            answer, not a detail to open a panel for. */}
+        {imageStrip}
+
+        {expandable && expanded && (
+          <div
+            data-tool-call-details="inline"
+            data-tool-output-error={result?.isError ? 'true' : undefined}
+            className="space-y-2 pb-2.5 pl-[30px] pt-1"
+          >
+            {preview}
+            {details}
+          </div>
+        )}
+      </div>
+    )
+  }
+
   return (
     <div
-      data-tool-call-chrome={chrome}
+      data-tool-call-chrome="card"
       data-tool-use-id={toolUseId}
-      className={`${
-        isRow
-          ? 'rounded-[var(--radius-md)]'
-          : `overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] ${
-            compact ? 'mb-0' : 'mb-2'
-          }`
+      data-tool-status={rowStatus}
+      className={`overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] ${
+        compact ? 'mb-0' : 'mb-2'
       }${navigationHighlighted ? ' chat-tool-navigation-target' : ''}`}
     >
-      {/*
-        The header is a row of siblings, not one big button, so a second action
-        ("view in trajectory") can sit in it without nesting interactive
-        elements or being laid over the duration and chevron. The disclosure
-        button stretches its hit area across the whole header with an `::after`
-        overlay: clicking the duration or chevron still toggles, and the action
-        — positioned, later in tree order — paints and hit-tests above it.
-      */}
       <div
-        className={`group/toolhead relative flex items-center transition-colors hover:bg-[var(--color-surface-hover)] ${
-          isRow
-            // The negative margin lets the hover highlight breathe past the
-            // timeline rule without the row itself being inset from it.
-            ? '-mx-2 w-[calc(100%+1rem)] gap-2 rounded-[var(--radius-md)] px-2 py-1'
-            : compact ? 'w-full gap-[11px] px-3.5 py-2.5' : 'w-full gap-3 px-4 py-3'
-        }`}
+        className={`group/toolhead relative flex w-full items-center gap-2 px-3 transition-colors ${
+          compact ? 'min-h-9' : 'min-h-10'
+        } ${expandable ? 'hover:bg-[var(--color-surface-hover)]' : ''}`}
       >
-        <button
-          type="button"
-          data-chat-disclosure="true"
-          aria-expanded={expandable ? expanded : undefined}
-          onClick={() => {
-            if (expandable) {
-              setExpanded((value) => !value)
-            }
-          }}
-          // The overlay covers the status text too, so its own tooltip cannot
-          // show; the running summary is the one that truncates, so carry it here.
-          title={pendingTitle}
-          className={`flex min-w-0 flex-1 items-center self-stretch text-left after:absolute after:inset-0 after:content-[''] focus:outline-none focus-visible:after:shadow-[var(--shadow-focus-ring)] ${
-            isRow
-              ? 'gap-2 after:rounded-[var(--radius-md)]'
-              : compact ? 'gap-[11px]' : 'gap-3'
-          }`}
-        >
-          {isRow ? (
-            /* Rows had no icon at all, so every step began with a bare word and
-               the eye had nothing to run down. A leading glyph gives the run a
-               left edge, separates one tool family from the next at a glance, and
-               marks the whole line as machinery rather than speech. */
-            <RowToolIcon toolName={toolName} active={Boolean(pendingSummary)} />
-          ) : compact ? (
-            <span className="material-symbols-outlined shrink-0 text-[16px] text-[var(--color-text-secondary)]">{icon}</span>
-          ) : (
-            /* The ink square is the design's tool badge: solid `--t1` with the page
-               ground as its glyph color, which is exactly the primary-button pair. */
-            <span className="flex h-[30px] w-[30px] shrink-0 items-center justify-center rounded-[8px] bg-[var(--color-btn-primary-bg)] text-[var(--color-btn-primary-fg)]">
-              <span className="material-symbols-outlined text-[16px]">{icon}</span>
-            </span>
-          )}
-          <span className={
-            isRow
-              // The running step is the one the reader is waiting on, so it is the
-              // one that gets colour. Finished steps stay grey and the eye lands on
-              // where the run actually is without a separate progress strip.
-              //
-              // Grey even when finished, and a step below the prose it sits among:
-              // the layers have to be separable at a glance, or a run of machinery
-              // reads as loudly as the sentence that concludes it.
-              ? `shrink-0 text-[12.5px] font-medium ${
-                  pendingSummary ? 'text-[var(--color-brand)]' : 'text-[var(--color-text-tertiary)]'
-                }`
-              : `shrink-0 font-bold text-[var(--color-text-primary)] ${compact ? 'text-[13px]' : 'text-[14px]'}`
-          }>
-            {toolName}
-          </span>
-          {filePath ? (
-            <span className={`min-w-0 flex-1 truncate font-mono ${isRow ? 'text-[12px] text-[var(--color-text-tertiary)]' : compact ? 'text-[12.5px] text-[var(--color-text-secondary)]' : 'text-[13px] text-[var(--color-text-secondary)]'}`}>
-              {filePath.split('/').pop()}
-            </span>
-          ) : summary ? (
-            <span className={`min-w-0 flex-1 truncate ${summaryIsProse ? '' : 'font-mono'} ${isRow ? 'text-[12px] text-[var(--color-text-tertiary)]' : compact ? 'text-[12.5px] text-[var(--color-text-secondary)]' : 'text-[13px] text-[var(--color-text-secondary)]'}`}>
-              {summary}
-            </span>
-          ) : (
-            <span className="flex-1" />
-          )}
-          {pendingSummary ? (
-            <span
-              className="inline-flex min-w-0 max-w-[58%] shrink-0 items-center gap-1 text-[12.5px] text-[var(--color-text-tertiary)]"
-            >
-              <LoaderCircle size={13} strokeWidth={2.4} className="animate-spin" aria-hidden="true" />
-              <span className="truncate">{pendingSummary}</span>
-              {liveStatsSummary ? (
-                <>
-                  <span className="shrink-0">·</span>
-                  <span className="shrink-0 font-mono tabular-nums">
-                    {liveStatsSummary}
-                  </span>
-                </>
-              ) : null}
-            </span>
-          ) : stoppedSummary ? (
-            <span className="inline-flex shrink-0 items-center gap-1 text-[12.5px] text-[var(--color-text-tertiary)]">
-              <CircleStop size={13} strokeWidth={2.25} aria-hidden="true" />
-              {stoppedSummary}
-            </span>
-          ) : result && outputSummary ? (
-            <span
-              className={`inline-flex min-w-0 shrink items-center gap-1.5 text-[12.5px] ${
-                result.isError
-                  ? 'font-medium text-[var(--color-error)]'
-                  : 'text-[var(--color-text-tertiary)]'
-              }`}
-            >
-              {result.isError && <CircleX size={13} strokeWidth={2} className="shrink-0" aria-hidden="true" />}
-              <span className="min-w-0 truncate">{outputSummary}</span>
-            </span>
-          ) : liveStatsSummary ? (
-            <span className="shrink-0 font-mono text-[12.5px] tabular-nums text-[var(--color-text-tertiary)]">
-              {liveStatsSummary}
-            </span>
-          ) : null}
-        </button>
-        {toolUseId ? (
-          // Its own slot left of the duration: the space is always held (no
-          // jump on hover) and nothing is drawn over the duration or chevron.
-          // `relative` lifts it above the disclosure's stretched overlay; the
-          // negative margin keeps a 24px target from growing a 20px row.
-          <ViewInTrajectoryButton
-            toolUseId={toolUseId}
-            className="relative -my-1 shrink-0 opacity-0 transition-opacity focus-visible:opacity-100 group-hover/toolhead:opacity-100"
-          />
-        ) : null}
-        {durationSummary && (
-          <span className={`shrink-0 font-mono text-[12px] tabular-nums ${
-            result?.isError ? 'font-medium text-[var(--color-error)]' : 'text-[var(--color-text-tertiary)]'
-          }`}>
-            {durationSummary}
-          </span>
-        )}
-        {expandable && (
-          <span className={`shrink-0 leading-none text-[var(--color-text-tertiary)] ${isRow ? 'text-[8px]' : 'text-[11px]'}`} aria-hidden="true">
-            {isRow ? (expanded ? '▾' : '▸') : (expanded ? '▴' : '▾')}
-          </span>
-        )}
+        {head}
       </div>
 
       {SESSION_TOOL_NAMES.has(toolName) ? <SessionToolLinks input={input} result={result?.content} /> : null}
 
-      {/* Outside the disclosure on purpose: a picture the tool returned is the
-          answer, not a detail to open a panel for. */}
-      {toolImages.images.length > 0 || toolImages.dropped > 0 ? (
-        <ToolResultImages
-          images={toolImages.images}
-          omitted={toolImages.dropped}
-          originalPath={toolImages.originalPath}
-          toolName={toolName}
-          // Row: line up with the tool name (icon + gap), where the expanded rail's content also starts.
-          className={isRow ? 'pb-1.5 pl-[21px] pt-0.5' : compact ? 'px-3.5 pb-2.5' : 'px-4 pb-3'}
-        />
-      ) : null}
+      {imageStrip}
 
       {expandable && expanded && (
         <div
-          data-tool-call-details={isRow ? 'inline' : 'panel'}
+          data-tool-call-details="panel"
           data-tool-output-error={result?.isError ? 'true' : undefined}
-          className={
-            isRow
-              ? `mb-2 ml-2 mt-1 space-y-2.5 border-l py-1 pl-3 ${
-                result?.isError
-                  ? 'border-[var(--color-error-soft-hover)]'
-                  : 'border-[var(--color-border)]'
-              }`
-              : `space-y-2.5 border-t px-4 py-3.5 ${
-                result?.isError
-                  ? 'border-[var(--color-error-soft-hover)] bg-[var(--color-error-soft)]'
-                  : 'border-[var(--color-border)]'
-              }`
-          }
+          className="space-y-2.5 border-t border-[var(--color-border)] px-3 py-3"
         >
           {preview}
           {details}
@@ -437,6 +467,197 @@ export const ToolCallBlock = memo(function ToolCallBlock({ toolName, input, resu
   )
 })
 
+/** The row's node on the run's rail. */
+function ToolNode({ toolName, status }: { toolName: string; status: ToolRowStatus }) {
+  const Icon = status === 'running' ? LoaderCircle : activitySegmentIcon(toolName)
+  return (
+    <span
+      aria-hidden="true"
+      data-tool-node={status}
+      className={`relative flex h-[22px] w-[22px] shrink-0 items-center justify-center rounded-full border ${NODE_TONE[status]}`}
+    >
+      <Icon size={12} strokeWidth={2} className={status === 'running' ? 'animate-spin' : undefined} />
+    </span>
+  )
+}
+
+const NODE_TONE: Record<ToolRowStatus, string> = {
+  idle: 'border-[var(--color-outline)] bg-[var(--color-surface)] text-[var(--color-text-tertiary)]',
+  done: 'border-[var(--color-outline)] bg-[var(--color-surface)] text-[var(--color-text-tertiary)]',
+  stopped: 'border-[var(--color-outline)] bg-[var(--color-surface)] text-[var(--color-text-tertiary)]',
+  running: 'border-[var(--color-info)] bg-[var(--color-info-container)] text-[var(--color-on-info-container)]',
+  waiting: 'border-[var(--color-warning)] bg-[var(--color-warning-container)] text-[var(--color-on-warning-container)]',
+  error: 'border-[var(--color-error-soft-hover)] bg-[var(--color-error-container)] text-[var(--color-on-error-container)]',
+}
+
+/** A standalone card leads with a plain glyph; the node belongs to the rail. */
+function CardToolIcon({ toolName, status }: { toolName: string; status: ToolRowStatus }) {
+  const Icon = status === 'running' ? LoaderCircle : activitySegmentIcon(toolName)
+  const tone = status === 'error'
+    ? 'text-[var(--color-error)]'
+    : status === 'running'
+      ? 'text-[var(--color-info)]'
+      : status === 'waiting'
+        ? 'text-[var(--color-warning)]'
+        : 'text-[var(--color-text-tertiary)]'
+  return (
+    <Icon
+      size={14}
+      strokeWidth={1.75}
+      aria-hidden="true"
+      className={`shrink-0 ${tone} ${status === 'running' ? 'animate-spin' : ''}`}
+    />
+  )
+}
+
+/**
+ * The right-hand result of a row: what the call produced, in the fewest words
+ * that still say it — `+18 −5`, `26 lines`, `3 files · 6 matches`. Failures
+ * lead with their first line instead, in red, because that line is usually the
+ * whole story.
+ */
+function ToolRowMeta({
+  toolName,
+  input,
+  result,
+  rowStatus,
+  outputSummary,
+  pendingSummary,
+  stoppedSummary,
+  liveStatsSummary,
+}: {
+  toolName: string
+  input: Record<string, unknown>
+  result: { content: unknown; isError: boolean } | null
+  rowStatus: ToolRowStatus
+  outputSummary: string
+  pendingSummary: string
+  stoppedSummary: string
+  liveStatsSummary: string
+}) {
+  const t = useTranslation()
+
+  if (pendingSummary) {
+    return (
+      <span className="inline-flex min-w-0 max-w-[58%] shrink-0 items-center gap-1 text-[12px] text-[var(--color-info)]">
+        <span className="truncate">{pendingSummary}</span>
+        {liveStatsSummary ? (
+          <>
+            <span className="shrink-0">·</span>
+            <span className="shrink-0 font-mono tabular-nums">{liveStatsSummary}</span>
+          </>
+        ) : null}
+      </span>
+    )
+  }
+
+  if (stoppedSummary) {
+    return (
+      <span className="inline-flex shrink-0 items-center gap-1 text-[12px] text-[var(--color-text-tertiary)]">
+        <CircleStop size={12} strokeWidth={2} aria-hidden="true" />
+        {stoppedSummary}
+      </span>
+    )
+  }
+
+  if (rowStatus === 'waiting') {
+    return (
+      <span className="inline-flex shrink-0 items-center gap-1 text-[12px] font-medium text-[var(--color-on-warning-container)]">
+        <CirclePause size={12} strokeWidth={2} aria-hidden="true" />
+        {t('permission.awaitingApproval')}
+      </span>
+    )
+  }
+
+  if (!result) {
+    return liveStatsSummary ? (
+      <span className="shrink-0 font-mono text-[11px] tabular-nums text-[var(--color-text-tertiary)]">
+        {liveStatsSummary}
+      </span>
+    ) : null
+  }
+
+  if (result.isError) {
+    return outputSummary ? (
+      <span className="inline-flex min-w-0 shrink items-center gap-1 text-[12px] text-[var(--color-error)]">
+        <CircleX size={12} strokeWidth={2} className="shrink-0" aria-hidden="true" />
+        <span className="min-w-0 truncate">{outputSummary}</span>
+      </span>
+    ) : null
+  }
+
+  const resultMeta = getResultMeta(toolName, input, result.content, t)
+  if (resultMeta) return resultMeta
+  return outputSummary ? (
+    <span className="min-w-0 shrink truncate text-[12px] text-[var(--color-text-tertiary)]">
+      {outputSummary}
+    </span>
+  ) : null
+}
+
+/** Tool-specific result digests; null falls back to the generic one-liner. */
+function getResultMeta(
+  toolName: string,
+  input: Record<string, unknown>,
+  content: unknown,
+  t: Translate,
+): ReactNode | null {
+  if ((toolName === 'Edit' && typeof input.old_string === 'string' && typeof input.new_string === 'string') ||
+    (toolName === 'Write' && typeof input.content === 'string')) {
+    const counts = toolName === 'Edit'
+      ? countDiffLines(input.old_string as string, input.new_string as string)
+      : countDiffLines('', input.content as string)
+    return <DiffCounts additions={counts.additions} deletions={toolName === 'Edit' ? counts.deletions : null} />
+  }
+
+  const text = extractTextContent(content) ?? ''
+
+  if (toolName === 'Read' && text) {
+    // A one-line file says more as itself than as "1 line", so it keeps the
+    // generic one-liner that shows the result without expanding.
+    const lines = countReadLines(text)
+    return lines > 1 ? <MetaText>{formatLineCount(lines, t)}</MetaText> : null
+  }
+
+  if (SEARCH_TOOL_NAMES.has(toolName) && text) {
+    const parsed = parseSearchResult(text)
+    if (!parsed) return null
+    return <MetaText>{formatSearchSummary(parsed, t)}</MetaText>
+  }
+
+  if (toolName === 'TodoWrite') {
+    const todos = parseTodos(input)
+    if (!todos || todos.length === 0) return null
+    return <MetaText>{formatCountLabel(todos.length, 'tool.itemCountSingular', 'tool.itemCountPlural', t)}</MetaText>
+  }
+
+  return null
+}
+
+function MetaText({ children }: { children: ReactNode }) {
+  return (
+    <span className="min-w-0 shrink truncate text-[12px] tabular-nums text-[var(--color-text-tertiary)]">
+      {children}
+    </span>
+  )
+}
+
+export function DiffCounts({ additions, deletions }: { additions: number; deletions: number | null }) {
+  return (
+    <span className="inline-flex shrink-0 items-center gap-1.5 font-mono text-[12px] tabular-nums">
+      <span className="text-[var(--color-diff-added-text)]">+{additions}</span>
+      {deletions === null ? null : <span className="text-[var(--color-diff-removed-text)]">−{deletions}</span>}
+    </span>
+  )
+}
+
+function formatSearchSummary(parsed: GrepResult, t: Translate): string {
+  const files = formatCountLabel(parsed.fileCount, 'tool.fileCountSingular', 'tool.fileCountPlural', t)
+  if (parsed.matchCount === undefined) return files
+  const matches = formatCountLabel(parsed.matchCount, 'tool.matchCountSingular', 'tool.matchCountPlural', t)
+  return `${files} · ${matches}`
+}
+
 function EnterPlanModeToolCallBlock({
   result,
   compact,
@@ -450,22 +671,22 @@ function EnterPlanModeToolCallBlock({
   const errorText = result?.isError ? extractTextContent(result.content) : null
 
   return (
-    <div className={`overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-primary-fixed-dim)] bg-[var(--color-surface-container-lowest)] ${
+    <div className={`overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] ${
       compact ? 'mb-0' : 'mb-2'
     }`}>
-      <div className="flex w-full items-center gap-2 px-3 py-2 text-left">
-        <span className="material-symbols-outlined text-[14px] text-[var(--color-brand)]">architecture</span>
-        <span className="min-w-0 flex-1 truncate text-[12px] font-semibold text-[var(--color-text-primary)]">
+      <div className="flex min-h-9 w-full items-center gap-2 px-3 text-left">
+        <ClipboardList size={14} strokeWidth={1.75} aria-hidden="true" className="shrink-0 text-[var(--color-text-tertiary)]" />
+        <span className="min-w-0 flex-1 truncate text-[13px] font-medium text-[var(--color-text-primary)]">
           {t('settings.permissions.plan')}
         </span>
         {isPending ? (
-          <span className="inline-flex shrink-0 items-center gap-1 text-[10px] text-[var(--color-outline)]">
-            <LoaderCircle size={12} strokeWidth={2.4} className="animate-spin" aria-hidden="true" />
+          <span className="inline-flex shrink-0 items-center gap-1 text-[12px] text-[var(--color-info)]">
+            <LoaderCircle size={12} strokeWidth={2} className="animate-spin" aria-hidden="true" />
             {t('tool.preparingTool')}
           </span>
         ) : null}
         {result?.isError ? (
-          <span className="material-symbols-outlined shrink-0 text-[14px] text-[var(--color-error)]">error</span>
+          <CircleX size={14} strokeWidth={1.75} aria-hidden="true" className="shrink-0 text-[var(--color-error)]" />
         ) : null}
       </div>
 
@@ -509,16 +730,17 @@ function PlanToolCallBlock({
   const hasRawResult = Boolean(result && extractTextContent(result.content))
 
   return (
-    <div className={`overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-primary-fixed-dim)] bg-[var(--color-surface-container-lowest)] ${
+    <div className={`overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] ${
       compact ? 'mb-0' : 'mb-2'
     }`}>
       <button
         type="button"
         onClick={onToggle}
-        className="flex w-full items-center gap-2 px-3 py-2 text-left transition-colors hover:bg-[var(--color-surface-hover)]"
+        aria-expanded={expanded}
+        className="flex min-h-10 w-full items-center gap-2 px-3 text-left transition-colors hover:bg-[var(--color-surface-hover)] focus:outline-none focus-visible:shadow-[var(--shadow-focus-ring)]"
       >
-        <span className="material-symbols-outlined text-[14px] text-[var(--color-brand)]">architecture</span>
-        <span className="min-w-0 flex-1 truncate text-[12px] font-semibold text-[var(--color-text-primary)]">
+        <ClipboardList size={14} strokeWidth={1.75} aria-hidden="true" className="shrink-0 text-[var(--color-text-tertiary)]" />
+        <span className="min-w-0 flex-1 truncate text-[13px] font-medium text-[var(--color-text-primary)]">
           {title}
         </span>
         {preview.filePath ? (
@@ -527,14 +749,17 @@ function PlanToolCallBlock({
           </span>
         ) : null}
         {isPending ? (
-          <span className="inline-flex shrink-0 items-center gap-1 text-[10px] text-[var(--color-outline)]">
-            <LoaderCircle size={12} strokeWidth={2.4} className="animate-spin" aria-hidden="true" />
+          <span className="inline-flex shrink-0 items-center gap-1 text-[12px] text-[var(--color-info)]">
+            <LoaderCircle size={12} strokeWidth={2} className="animate-spin" aria-hidden="true" />
             {t('tool.preparingTool')}
           </span>
         ) : null}
-        <span className="material-symbols-outlined text-[14px] text-[var(--color-outline)]">
-          {expanded ? 'expand_less' : 'expand_more'}
-        </span>
+        <ChevronRight
+          size={14}
+          strokeWidth={1.75}
+          aria-hidden="true"
+          className={`shrink-0 text-[var(--color-text-tertiary)] transition-transform duration-150 ${expanded ? 'rotate-90' : ''}`}
+        />
       </button>
 
       {expanded ? (
@@ -558,22 +783,53 @@ function PlanToolCallBlock({
   )
 }
 
+/** The small "copy" action every detail block carries in its head. */
+function DetailCopyButton({ text, t }: { text: string; t?: Translate }) {
+  const label = t?.('common.copy') ?? 'Copy'
+  return (
+    <CopyButton
+      text={text}
+      label={label}
+      copiedLabel={t?.('common.copied') ?? 'Copied'}
+      displayLabel={<><Copy size={12} strokeWidth={2} aria-hidden="true" />{label}</>}
+      displayCopiedLabel={<><CircleCheck size={12} strokeWidth={2} aria-hidden="true" />{t?.('common.copied') ?? 'Copied'}</>}
+      className="inline-flex h-6 shrink-0 items-center gap-1 rounded-[var(--radius-sm)] px-1.5 text-[11px] text-[var(--color-text-tertiary)] transition-colors hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] focus:outline-none focus-visible:shadow-[var(--shadow-focus-ring)]"
+    />
+  )
+}
+
+/** Shared 30px head for the inline output / input / writer blocks. */
+function DetailHead({ label, children, tone = 'neutral' }: { label: ReactNode; children?: ReactNode; tone?: 'neutral' | 'error' }) {
+  return (
+    <div
+      className={`flex h-[30px] items-center justify-between gap-2 border-b pl-3 pr-1.5 text-[12px] ${
+        tone === 'error'
+          ? 'border-[var(--color-error-soft-hover)] text-[var(--color-on-error-container)]'
+          : 'border-[var(--color-border)] text-[var(--color-text-tertiary)]'
+      }`}
+    >
+      <span className="min-w-0 truncate">{label}</span>
+      {children}
+    </div>
+  )
+}
+
 function renderPreview(
   toolName: string,
   obj: Record<string, unknown>,
   result?: { content: unknown; isError: boolean } | null,
-  t?: (key: TranslationKey, params?: Record<string, string | number>) => string,
-  embedded = false,
+  t?: Translate,
+  durationSummary = '',
 ) {
   const filePath = typeof obj.file_path === 'string' ? obj.file_path : 'file'
-  // Must match the terminal-card condition below exactly. When they diverged, a
+  // Must match the terminal-block condition below exactly. When they diverged, a
   // shell call whose input lacked `command` suppressed the generic result box
   // without rendering a replacement, blanking the panel (e.g. an
   // InputValidationError whose error body then vanished).
   const shellCommand = isShellTool(toolName) && typeof obj.command === 'string' ? obj.command : null
   const echoesInTerminal = shellCommand !== null
   const resultText = getVisibleResultText(toolName, result, echoesInTerminal)
-  const resultOutput = result && resultText ? renderResultOutput(result, resultText, t, embedded) : null
+  const resultOutput = result && resultText ? renderResultOutput(result, resultText, t) : null
 
   if (toolName === 'Edit' && typeof obj.old_string === 'string' && typeof obj.new_string === 'string') {
     return (
@@ -594,32 +850,46 @@ function renderPreview(
   }
 
   if (shellCommand !== null) {
-    // #1149: echo the command's output back into the terminal card. Both the
+    // #1149: echo the command's output back into the terminal block. Both the
     // success and error bodies render here, so getVisibleResultText suppresses
     // the generic result box for shell tools to avoid a second copy.
     return (
-      <TerminalChrome title={typeof obj.description === 'string' ? obj.description : filePath}>
-        <div className="px-3 py-2.5 font-mono text-[11px] leading-[1.3] text-[var(--color-terminal-fg)]">
-          <span className="text-[var(--color-terminal-accent)]">$</span> {shellCommand}
-        </div>
-        {result ? (
-          <ShellOutput
-            content={result.content}
-            isError={result.isError}
-            toolName={toolName}
-          />
-        ) : null}
-      </TerminalChrome>
+      <ShellTerminal
+        toolName={toolName}
+        command={shellCommand}
+        result={result ?? null}
+        durationSummary={durationSummary}
+      />
     )
   }
 
-  if (toolName === 'Read') {
-    return resultOutput
+  if (toolName === 'TodoWrite') {
+    const todos = parseTodos(obj)
+    if (todos && todos.length > 0) {
+      // The list is the call; its "todos updated" acknowledgement says nothing.
+      return (
+        <>
+          <TodoListView todos={todos} />
+          {result?.isError ? resultOutput : null}
+        </>
+      )
+    }
   }
 
-  if (resultOutput) return resultOutput
+  if (SEARCH_TOOL_NAMES.has(toolName) && result && !result.isError) {
+    const parsed = parseSearchResult(extractTextContent(result.content) ?? '')
+    if (parsed && parsed.rows.length > 0) {
+      return (
+        <SearchResultView
+          result={parsed}
+          pattern={toolName === 'Grep' && typeof obj.pattern === 'string' ? obj.pattern : ''}
+          caseInsensitive={obj['-i'] === true}
+        />
+      )
+    }
+  }
 
-  return null
+  return resultOutput
 }
 
 function getVisibleResultText(
@@ -631,9 +901,9 @@ function getVisibleResultText(
   const text = extractTextContent(result.content)
   if (!text) return null
 
-  // Shell output owns its own renderer inside TerminalChrome (both success and
-  // error), so the generic result box must stay out of the way — but only when
-  // that renderer will actually run.
+  // Shell output owns its own renderer inside the terminal block (both success
+  // and error), so the generic result box must stay out of the way — but only
+  // when that renderer will actually run.
   if (echoesInTerminal) return null
   if (result.isError) return text
   // Read/Edit/Write stay suppressed: Edit/Write results are a single
@@ -644,7 +914,8 @@ function getVisibleResultText(
 }
 
 /**
- * Terminal-style output body: plain text in one text node, in a `<pre>`.
+ * A shell call as a terminal block: the command on a `$` line and its output
+ * under it, in one plain `<pre>`.
  *
  * Shell output has no language to highlight, so it does not go through
  * CodeViewer. Note this is NOT a saving relative to the old behaviour —
@@ -654,72 +925,215 @@ function getVisibleResultText(
  * that it used to be there. For reference, CodeViewer does mount both Prism and
  * Shiki over the same text, so that move would cost two tokenizer passes.
  */
-function ShellOutput({ content, isError, toolName }: { content: unknown; isError: boolean; toolName: string }) {
+function ShellTerminal({
+  toolName,
+  command,
+  result,
+  durationSummary,
+}: {
+  toolName: string
+  command: string
+  result: { content: unknown; isError: boolean } | null
+  durationSummary: string
+}) {
   const [expanded, setExpanded] = useState(false)
   const t = useTranslation()
-  const resolved = useMemo(() => resolveShellOutputKind(content, toolName), [content, toolName])
+  const isError = Boolean(result?.isError)
+  const resolved = useMemo(
+    () => (result ? resolveShellOutputKind(result.content, toolName) : null),
+    [result, toolName],
+  )
   // Errors are never windowed. #625 deliberately made full tool error output
   // visible; putting failures behind a 12-line window would quietly undo that.
   // Successes get the window because they are the bulk of the transcript.
   const output = useMemo(
-    () => prepareShellOutput(resolved.kind === 'text' ? resolved.text : '', expanded || isError),
+    () => prepareShellOutput(resolved?.kind === 'text' ? resolved.text : '', expanded || isError),
     [resolved, expanded, isError],
   )
   const showToggle = output.collapsible && !isError
-
-  // Content we cannot render as terminal text: say nothing rather than assert
-  // something false about the command.
-  if (resolved.kind === 'opaque') return null
-
-  if (!output.visible) {
-    return (
-      <div className="border-t border-[var(--color-terminal-border)] px-3 py-2.5 font-mono text-[11px] italic text-[var(--color-terminal-muted)]">
-        {t('tool.noOutput')}
-      </div>
-    )
-  }
+  const exitCode = result ? parseShellExitCode(extractTextContent(result.content) ?? '', isError) : null
 
   return (
-    <div className="border-t border-[var(--color-terminal-border)]">
-      {/* Commands that emit image paths (screenshots, plots) still get a gallery,
-          as the generic result box used to provide on the error path. */}
-      <InlineImageGallery text={output.full} />
-      <div className="flex items-center justify-between px-3 py-1.5">
-        <span className="font-mono text-[10px] uppercase tracking-[0.18em] text-[var(--color-terminal-muted)]">
-          {isError ? t('tool.errorOutput') : t('tool.toolOutput')}
-        </span>
-        <CopyButton
-          text={output.full}
-          label={t('common.copy')}
-          copiedLabel={t('common.copied')}
-          className="rounded-[var(--radius-sm)] px-2 py-0.5 text-[11px] text-[var(--color-terminal-muted)] transition-colors hover:text-[var(--color-terminal-fg)]"
-        />
+    <TerminalChrome
+      label={toolName === 'PowerShell' ? 'powershell' : 'bash'}
+      meta={(
+        <>
+          {result ? (
+            <Badge
+              tone={isError ? 'danger' : 'success'}
+              data-shell-exit={exitCode ?? 'error'}
+            >
+              {exitCode === null ? t('agentStatus.failed') : t('tool.exitCode', { code: exitCode })}
+            </Badge>
+          ) : null}
+          {durationSummary ? (
+            <span className="font-mono text-[11px] tabular-nums text-[var(--color-text-tertiary)]">{durationSummary}</span>
+          ) : null}
+          <DetailCopyButton text={output.full || command} t={t} />
+        </>
+      )}
+    >
+      <div className="px-3.5 pb-3 pt-2.5 font-mono text-[12px] leading-[1.65]">
+        <div className="whitespace-pre-wrap break-words text-[var(--color-code-fg)]">
+          <span aria-hidden="true" className="mr-2 select-none text-[var(--color-brand)]">$</span>
+          {command}
+        </div>
+        {/* Content we cannot render as terminal text: say nothing rather than
+            assert something false about the command. */}
+        {!resolved || resolved.kind === 'opaque' ? null : output.visible ? (
+          <>
+            {/* Commands that emit image paths (screenshots, plots) still get a
+                gallery, as the generic result box used to provide. */}
+            <InlineImageGallery text={output.full} />
+            <pre
+              data-shell-output=""
+              tabIndex={0}
+              className={`mt-1.5 max-h-[420px] overflow-auto whitespace-pre-wrap break-words font-mono text-[12px] leading-[1.65] focus:outline-none focus-visible:shadow-[var(--shadow-focus-ring)] ${
+                isError ? 'text-[var(--color-error)]' : 'text-[var(--color-code-fg)]'
+              }`}
+            >
+              {output.visible}
+            </pre>
+          </>
+        ) : (
+          <div className="mt-1.5 font-sans text-[12px] text-[var(--color-text-tertiary)]">
+            {t('tool.noOutput')}
+          </div>
+        )}
       </div>
-      <pre
-        data-shell-output=""
-        tabIndex={0}
-        className={`max-h-[420px] overflow-auto whitespace-pre-wrap break-words px-3 pb-2.5 font-mono text-[11.5px] leading-[1.45] ${
-          isError ? 'text-[var(--color-terminal-danger)]' : 'text-[var(--color-terminal-fg)]'
-        }`}
-      >
-        {output.visible}
-      </pre>
       {showToggle ? (
         <button
           type="button"
           aria-expanded={expanded}
           onClick={() => setExpanded((value) => !value)}
-          className="w-full border-t border-[var(--color-terminal-border)] py-1.5 font-mono text-[10px] uppercase tracking-[0.14em] text-[var(--color-terminal-muted)] transition-colors hover:text-[var(--color-terminal-fg)]"
+          className="flex h-7 w-full items-center justify-center border-t border-[var(--color-border)] text-[12px] text-[var(--color-text-tertiary)] transition-colors hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] focus:outline-none focus-visible:shadow-[var(--shadow-focus-ring)]"
         >
           {expanded
             ? t('tool.showLess')
             : t('tool.showMoreLines', { count: output.hiddenLines })}
         </button>
       ) : null}
+    </TerminalChrome>
+  )
+}
+
+/** Grep / Glob hits as `file:line  code`, the matched text marked. */
+function SearchResultView({
+  result,
+  pattern,
+  caseInsensitive,
+}: {
+  result: GrepResult
+  pattern: string
+  caseInsensitive: boolean
+}) {
+  const matcher = useMemo(() => buildSearchMatcher(pattern, caseInsensitive), [caseInsensitive, pattern])
+  const rows = result.rows.slice(0, SEARCH_RESULT_MAX_ROWS)
+  const hidden = result.rows.length - rows.length
+
+  return (
+    <div
+      data-search-result=""
+      className="max-h-[340px] divide-y divide-[var(--color-border)] overflow-auto rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] font-mono text-[12px] leading-[1.6]"
+    >
+      {rows.map((row, index) => (
+        <div key={`${row.file}:${row.line ?? ''}:${index}`} className="flex gap-3.5 px-2.5 py-1">
+          {row.code === undefined ? (
+            <span className="min-w-0 truncate text-[var(--color-text-secondary)]" title={row.file}>{row.file}</span>
+          ) : (
+            <>
+              <span className="w-[236px] max-w-[42%] shrink-0 truncate text-[var(--color-text-tertiary)]" title={`${row.file}:${row.line}`}>
+                {row.file}:{row.line}
+              </span>
+              <span className="min-w-0 truncate whitespace-pre text-[var(--color-text-primary)]">
+                {highlightMatches(row.code, matcher)}
+              </span>
+            </>
+          )}
+        </div>
+      ))}
+      {hidden > 0 ? (
+        <div className="px-2.5 py-1 text-[var(--color-text-tertiary)]">+{hidden}</div>
+      ) : null}
     </div>
   )
 }
 
+function buildSearchMatcher(pattern: string, caseInsensitive: boolean): RegExp | null {
+  if (!pattern) return null
+  try {
+    return new RegExp(pattern, caseInsensitive ? 'gi' : 'g')
+  } catch {
+    // ripgrep syntax JavaScript cannot parse: show the rows unmarked.
+    return null
+  }
+}
+
+function highlightMatches(code: string, matcher: RegExp | null): ReactNode {
+  if (!matcher) return code
+  const parts: ReactNode[] = []
+  let last = 0
+  for (const match of code.matchAll(matcher)) {
+    const start = match.index ?? 0
+    if (!match[0]) continue
+    if (start > last) parts.push(code.slice(last, start))
+    parts.push(
+      <mark
+        key={start}
+        className="rounded-[var(--radius-xs)] bg-[var(--color-search-highlight)] text-[var(--color-on-search-highlight)]"
+      >
+        {match[0]}
+      </mark>,
+    )
+    last = start + match[0].length
+  }
+  if (parts.length === 0) return code
+  if (last < code.length) parts.push(code.slice(last))
+  return parts
+}
+
+/** A TodoWrite call drawn as the checklist it wrote. */
+function TodoListView({ todos }: { todos: TodoItem[] }) {
+  return (
+    <ul data-todo-list="" className="grid gap-0.5 py-0.5">
+      {todos.map((todo, index) => {
+        const Icon = todo.status === 'completed' ? CircleCheck : todo.status === 'in_progress' ? CircleDot : Circle
+        return (
+          <li
+            key={`${index}:${todo.content}`}
+            data-todo-status={todo.status}
+            className="flex min-h-[26px] items-center gap-2 text-[13px]"
+          >
+            <Icon
+              size={14}
+              strokeWidth={1.75}
+              aria-hidden="true"
+              className={`shrink-0 ${
+                todo.status === 'completed'
+                  ? 'text-[var(--color-success)]'
+                  : todo.status === 'in_progress'
+                    ? 'text-[var(--color-info)]'
+                    : 'text-[var(--color-text-tertiary)]'
+              }`}
+            />
+            <span
+              className={
+                todo.status === 'completed'
+                  ? 'text-[var(--color-text-tertiary)] line-through decoration-[var(--color-text-tertiary)]'
+                  : todo.status === 'in_progress'
+                    ? 'font-medium text-[var(--color-text-primary)]'
+                    : 'text-[var(--color-text-secondary)]'
+              }
+            >
+              {todo.content}
+            </span>
+          </li>
+        )
+      })}
+    </ul>
+  )
+}
+
 export type PreparedShellOutput = {
   visible: string
   full: string
@@ -843,70 +1257,52 @@ export function formatDuration(durationMs: number): string {
   return `${Math.floor(totalMinutes / 60)}h${totalMinutes % 60}m`
 }
 
+/**
+ * Input and output blocks share one shape in both chromes — a bordered,
+ * `--radius-md` code block — so a row and a card show the same detail the same
+ * way. The block wraps CodeViewer's borderless `embedded` chrome rather than its
+ * card chrome: one edge, one head, one copy action per block (#1177).
+ */
+function DetailBlock({ children }: { children: ReactNode }) {
+  return (
+    <div
+      data-tool-detail-surface="block"
+      className="overflow-hidden rounded-[var(--radius-md)] border border-[var(--color-border)]"
+    >
+      {children}
+    </div>
+  )
+}
+
 function renderResultOutput(
   result: { content: unknown; isError: boolean },
   text: string,
-  t?: (key: TranslationKey, params?: Record<string, string | number>) => string,
-  embedded = false,
+  t?: Translate,
 ) {
   const label = result.isError
     ? t?.('tool.errorOutput') ?? 'Error Output'
     : t?.('tool.toolOutput') ?? 'Tool Output'
 
-  if (embedded) {
-    return (
-      <>
-        <InlineImageGallery text={text} />
-        {result.isError ? (
-          <div data-tool-detail-surface="embedded" className="overflow-hidden bg-[var(--color-error-soft)]">
-            <div className="flex items-center justify-between border-b border-[var(--color-error-soft-hover)] px-3 py-2 text-[10px] uppercase tracking-[0.18em] text-[var(--color-error)]">
-              <span>{label}</span>
-              <CopyButton
-                text={text}
-                label={t?.('common.copy')}
-                copiedLabel={t?.('common.copied')}
-                className="rounded-[var(--radius-sm)] px-2 py-1 text-[11px] normal-case tracking-normal text-[var(--color-error)] transition-colors hover:bg-[var(--color-error-soft-hover)]"
-              />
-            </div>
-            <pre className="max-h-[420px] overflow-auto whitespace-pre-wrap break-words px-3 py-2 font-mono text-[12px] leading-[1.45] text-[var(--color-error)]">
-              {text}
-            </pre>
-          </div>
-        ) : (
-          <CodeViewer code={text} language="plaintext" maxLines={18} chrome="embedded" label={label} />
-        )}
-      </>
-    )
-  }
-
   return (
     <>
       <InlineImageGallery text={text} />
-      <div
-        data-tool-detail-surface="card"
-        className={`overflow-hidden rounded-[var(--radius-lg)] border ${
-          result.isError
-            ? 'border-[var(--color-error)] bg-[var(--color-error-container)]'
-            : 'border-[var(--color-border)] bg-[var(--color-surface)]'
-        }`}
-      >
-        <div className="flex items-center justify-between border-b border-[var(--color-border)] px-3 py-2 text-[10px] uppercase tracking-[0.18em] text-[var(--color-outline)]">
-          <span>{label}</span>
-          <CopyButton
-            text={text}
-            label={t?.('common.copy')}
-            copiedLabel={t?.('common.copied')}
-            className="rounded-[var(--radius-sm)] border border-[var(--color-border)] px-2 py-1 text-[11px] normal-case tracking-normal text-[var(--color-text-tertiary)] transition-colors hover:text-[var(--color-text-primary)]"
-          />
-        </div>
-        {result.isError ? (
-          <pre className="max-h-[420px] overflow-auto whitespace-pre-wrap break-words bg-[var(--color-code-bg)] px-3 py-2 font-mono text-[12px] leading-[1.45] text-[var(--color-error)]">
+      {result.isError ? (
+        <div
+          data-tool-detail-surface="error"
+          className="overflow-hidden rounded-[var(--radius-md)] bg-[var(--color-error-container)]"
+        >
+          <DetailHead label={label} tone="error">
+            <DetailCopyButton text={text} t={t} />
+          </DetailHead>
+          <pre className="max-h-[420px] overflow-auto whitespace-pre-wrap break-words px-3 py-2 font-mono text-[12px] leading-[1.6] text-[var(--color-on-error-container)]">
             {text}
           </pre>
-        ) : (
-          <CodeViewer code={text} language="plaintext" maxLines={18} />
-        )}
-      </div>
+        </div>
+      ) : (
+        <DetailBlock>
+          <CodeViewer code={text} language="plaintext" maxLines={18} chrome="embedded" label={label} />
+        </DetailBlock>
+      )}
     </>
   )
 }
@@ -914,26 +1310,30 @@ function renderResultOutput(
 function renderDetails(
   toolName: string,
   obj: Record<string, unknown>,
-  t?: (key: TranslationKey, params?: Record<string, string | number>) => string,
+  t?: Translate,
   partialInput?: string,
-  embedded = false,
 ) {
   if (partialInput) {
     if (toolName === 'Write') {
       const writerContent = extractPartialJsonStringField(partialInput, 'content')
       if (writerContent !== null) {
-        return renderWriterPreview(writerContent, t, embedded)
+        return renderWriterPreview(writerContent, t)
       }
     }
-    return renderPartialInput(partialInput, t, embedded)
+    return renderPartialInput(partialInput, t)
   }
 
   if (toolName === 'Edit' || toolName === 'Write') {
     return null
   }
 
-  // #1149: the terminal card already shows `command` as the `$` line and
-  // `description` as its title, so this block must never repeat them. Showing
+  // The checklist above already is the input.
+  if (toolName === 'TodoWrite' && (parseTodos(obj)?.length ?? 0) > 0) {
+    return null
+  }
+
+  // #1149: the terminal block already shows `command` as the `$` line and the
+  // row carries `description`, so this block must never repeat them. Showing
   // the *remaining* keys keeps timeout / run_in_background visible without
   // re-printing the command — an all-or-nothing suppression put the command
   // back on screen for the ~20% of real calls that carry a `timeout`.
@@ -944,23 +1344,10 @@ function renderDetails(
 
   const text = JSON.stringify(displayed, null, 2)
   const label = t?.('tool.toolInput') ?? 'Tool Input'
-  if (embedded) {
-    return <CodeViewer code={text} language="json" maxLines={18} chrome="embedded" label={label} />
-  }
-
   return (
-    <div data-tool-detail-surface="card" className="overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface)]">
-      <div className="flex items-center justify-between border-b border-[var(--color-border)] px-3 py-2 text-[10px] uppercase tracking-[0.18em] text-[var(--color-outline)]">
-        <span>{label}</span>
-        <CopyButton
-          text={text}
-          label={t?.('common.copy')}
-          copiedLabel={t?.('common.copied')}
-          className="rounded-[var(--radius-sm)] border border-[var(--color-border)] px-2 py-1 text-[11px] normal-case tracking-normal text-[var(--color-text-tertiary)] transition-colors hover:text-[var(--color-text-primary)]"
-        />
-      </div>
-      <CodeViewer code={text} language="json" maxLines={18} />
-    </div>
+    <DetailBlock>
+      <CodeViewer code={text} language="json" maxLines={18} chrome="embedded" label={label} />
+    </DetailBlock>
   )
 }
 
@@ -1122,8 +1509,7 @@ function formatCount(count: number): string {
 
 function renderWriterPreview(
   content: string,
-  t?: (key: TranslationKey, params?: Record<string, string | number>) => string,
-  embedded = false,
+  t?: Translate,
 ) {
   const contentStats = countContentStats(content)
   const lines = content.length === 0 ? [] : content.split('\n')
@@ -1148,20 +1534,15 @@ function renderWriterPreview(
 
   return (
     <div
-      data-tool-detail-surface={embedded ? 'embedded' : 'card'}
-      className={
-        embedded
-          ? 'overflow-hidden bg-[var(--color-surface)]'
-          : 'overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface)]'
-      }
+      data-tool-detail-surface="block"
+      className="overflow-hidden rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-code-bg)]"
     >
-      <div className="flex items-center justify-between border-b border-[var(--color-border)] px-3 py-2 text-[10px] uppercase tracking-[0.18em] text-[var(--color-outline)]">
-        <span>{t?.('tool.writerPreview') ?? 'Writer'}</span>
-        <span className="font-mono normal-case tracking-normal tabular-nums">
-          {statsSummary}
-        </span>
+      <div className="bg-[var(--color-surface-container)]">
+        <DetailHead label={t?.('tool.writerPreview') ?? 'Writer'}>
+          <span className="shrink-0 pr-1.5 font-mono text-[11px] tabular-nums">{statsSummary}</span>
+        </DetailHead>
       </div>
-      <pre className="max-h-[420px] overflow-auto whitespace-pre-wrap break-words bg-[var(--color-code-bg)] px-3 py-2 font-mono text-[12px] leading-[1.45] text-[var(--color-code-fg)]">
+      <pre className="max-h-[420px] overflow-auto whitespace-pre-wrap break-words px-3 py-2 font-mono text-[12px] leading-[1.6] text-[var(--color-code-fg)]">
         {visibleContent}
       </pre>
     </div>
@@ -1170,14 +1551,13 @@ function renderWriterPreview(
 
 function renderPartialInput(
   partialInput: string,
-  t?: (key: TranslationKey, params?: Record<string, string | number>) => string,
-  embedded = false,
+  t?: Translate,
 ) {
   const formattedInput = formatPartialJsonInput(partialInput)
   const label = t?.('tool.partialInput') ?? 'Partial input'
 
-  if (embedded) {
-    return (
+  return (
+    <DetailBlock>
       <CodeViewer
         code={formattedInput}
         language="json"
@@ -1186,16 +1566,7 @@ function renderPartialInput(
         chrome="embedded"
         label={label}
       />
-    )
-  }
-
-  return (
-    <div data-tool-detail-surface="card" className="overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface)]">
-      <div className="border-b border-[var(--color-border)] px-3 py-2 text-[10px] uppercase tracking-[0.18em] text-[var(--color-outline)]">
-        {label}
-      </div>
-      <CodeViewer code={formattedInput} language="json" maxLines={8} wrapLongLines />
-    </div>
+    </DetailBlock>
   )
 }
 
@@ -1340,73 +1711,61 @@ function stripAnsi(value: string): string {
     .replace(/\x1B\[[0-9;?]*[ -/]*[@-~]/g, '')
 }
 
-function RowToolIcon({ toolName, active }: { toolName: string; active: boolean }) {
-  const Icon = activitySegmentIcon(toolName)
-  return (
-    <Icon
-      size={13}
-      strokeWidth={1.8}
-      aria-hidden="true"
-      className={`mt-[3px] shrink-0 self-start ${
-        active ? 'text-[var(--color-brand)]' : 'text-[var(--color-text-tertiary)]'
-      }`}
-    />
-  )
+type ToolTarget = {
+  text: string
+  /** Code-shaped (a path, command, pattern, URL) rather than a sentence. */
+  mono: boolean
+  /** The untruncated form for the row's tooltip. */
+  title?: string
 }
 
-/** Whether the row's summary is a sentence rather than something code-shaped. */
-function isProseToolSummary(toolName: string, obj: Record<string, unknown>): boolean {
-  switch (toolName) {
-    case 'CreateSession':
-    case 'SendSessionMessage':
-      return true
-    case 'Bash':
-    case 'PowerShell':
-    case 'Agent':
-      return typeof obj.description === 'string' && obj.description.trim().length > 0
-    case 'Read':
-    case 'Write':
-    case 'Edit':
-      return true
-    default:
-      return false
-  }
-}
+/**
+ * What the row's verb acts on. Monospace is for the things that are literally
+ * code — a command, a glob, a path — not for a sentence describing one, and
+ * never for Chinese, where it opens typewriter gaps between characters.
+ */
+function getToolTarget(toolName: string, obj: Record<string, unknown>): ToolTarget {
+  const str = (value: unknown) => (typeof value === 'string' ? value.trim() : '')
+  const prose = (text: string): ToolTarget => ({ text, mono: false, title: text || undefined })
+  const code = (text: string, title = text): ToolTarget => ({ text, mono: true, title: title || undefined })
+
+  const filePath = str(obj.file_path) || (toolName === 'NotebookEdit' ? str(obj.notebook_path) : '')
+  if (filePath) return code(filePath.split(/[/\\]/).pop() || filePath, filePath)
 
-function getToolSummary(toolName: string, obj: Record<string, unknown>, t?: (key: TranslationKey, params?: Record<string, string | number>) => string): string {
   switch (toolName) {
-    case 'ListSessions': return typeof obj.query === 'string' ? obj.query : ''
-    case 'CreateSession': return String(obj.title ?? obj.prompt ?? '')
-    case 'ReadSession': return String(obj.sessionId ?? '')
-    case 'SendSessionMessage': return String(obj.content ?? '')
-    case 'WaitSessions': return Array.isArray(obj.sessionIds) ? obj.sessionIds.join(', ') : ''
+    case 'ListSessions': return prose(str(obj.query))
+    case 'CreateSession': return prose(String(obj.title ?? obj.prompt ?? ''))
+    case 'ReadSession': return code(String(obj.sessionId ?? ''))
+    case 'SendSessionMessage': return prose(String(obj.content ?? ''))
+    case 'WaitSessions': return code(Array.isArray(obj.sessionIds) ? obj.sessionIds.join(', ') : '')
     case 'Bash':
-    case 'PowerShell':
-      // The model sends a short description of what the command is for, in the
-      // conversation's language ("查看最近 commit 的改动文件"). Prefer it: a row
-      // saying that is readable at a glance, where the raw command it stands for
-      // is a pipeline that truncates into noise. The command itself is still one
-      // click away in the expanded row.
-      if (typeof obj.description === 'string' && obj.description.trim()) return obj.description
-      return typeof obj.command === 'string' ? obj.command : ''
-    case 'Read':
-      return t?.('tool.readFileContents') ?? 'Read file contents'
-    case 'Write':
-      return typeof obj.content === 'string'
-        ? (t?.('tool.linesCreated', { count: obj.content.split('\n').length }) ?? `${obj.content.split('\n').length} lines created`)
-        : (t?.('tool.createFile') ?? 'Create file')
-    case 'Edit':
-      return typeof obj.old_string === 'string' && typeof obj.new_string === 'string'
-        ? changedLineSummary(obj.old_string, obj.new_string, t)
-        : (t?.('tool.updateFileContents') ?? 'Update file contents')
-    case 'Glob':
-      return typeof obj.pattern === 'string' ? obj.pattern : ''
+    case 'PowerShell': {
+      // With a description the row is named by it (see ToolCallBlock), so the
+      // command only rides in the tooltip; without one, the command is the target.
+      const command = str(obj.command)
+      return str(obj.description) ? { text: '', mono: true, title: command || undefined } : code(command)
+    }
     case 'Grep':
-      return typeof obj.pattern === 'string' ? obj.pattern : ''
+    case 'Glob':
+      return code(str(obj.pattern))
+    case 'WebSearch':
+    case 'ToolSearch':
+      return prose(str(obj.query))
+    case 'WebFetch':
+      return code(str(obj.url))
     case 'Agent':
-      return typeof obj.description === 'string' ? obj.description : ''
+      return prose(str(obj.description))
+    case 'Skill':
+      return code(str(obj.skill))
+    case 'TaskCreate':
+      return prose(str(obj.subject))
+    case 'TaskUpdate':
+    case 'TaskGet': {
+      const subject = str(obj.subject)
+      return subject ? prose(subject) : code(str(obj.taskId) ? `#${str(obj.taskId)}` : '')
+    }
     default:
-      return ''
+      return { text: '', mono: false }
   }
 }
 
@@ -1423,18 +1782,3 @@ function extractTextContent(content: unknown): string | null {
   }
   return null
 }
-
-function changedLineSummary(oldString: string, newString: string, t?: (key: TranslationKey, params?: Record<string, string | number>) => string): string {
-  const oldLines = oldString.split('\n')
-  const newLines = newString.split('\n')
-  let changed = 0
-  const max = Math.max(oldLines.length, newLines.length)
-
-  for (let index = 0; index < max; index += 1) {
-    if ((oldLines[index] ?? '') !== (newLines[index] ?? '')) {
-      changed += 1
-    }
-  }
-
-  return t?.('tool.linesChanged', { count: changed }) ?? `${changed} lines changed`
-}
diff --git a/desktop/src/components/chat/ToolCallGroup.tsx b/desktop/src/components/chat/ToolCallGroup.tsx
index 18f84812..19bdcb31 100644
--- a/desktop/src/components/chat/ToolCallGroup.tsx
+++ b/desktop/src/components/chat/ToolCallGroup.tsx
@@ -1,7 +1,17 @@
 import { memo, useCallback, useMemo, useState } from 'react'
-import { BookMarked, ChevronDown, ChevronRight, CircleCheck, Settings } from 'lucide-react'
-import { ToolCallBlock, type ToolCallChrome } from './ToolCallBlock'
-import { ActivityGroup } from './ActivityGroup'
+import {
+  BookMarked,
+  Bot,
+  Check,
+  ChevronDown,
+  ChevronRight,
+  CircleStop,
+  CircleX,
+  LoaderCircle,
+  Settings,
+} from 'lucide-react'
+import { ToolCallBlock, formatDuration, type ToolCallChrome } from './ToolCallBlock'
+import { ActivityGroup, ToolTimeline } from './ActivityGroup'
 import { ThinkingBlock } from './ThinkingBlock'
 import {
   activityStepToolCalls,
@@ -12,6 +22,7 @@ import {
 import { ImageGenerationGroup, type ImageGenerationItem } from './ImageGenerationBlock'
 import { isImageGenerationToolName } from './imageGenerationTools'
 import { useAgentRunActivity } from './useAgentRunActivity'
+import { toolVerb } from './toolCallPresentation'
 import { MarkdownRenderer } from '../markdown/MarkdownRenderer'
 import { Badge, type Tone } from '@/components/ui/Badge'
 import { Button } from '@/components/ui/Button'
@@ -20,6 +31,7 @@ import { Modal } from '@/components/ui/Modal'
 import { useTranslation } from '../../i18n'
 import type { TranslationKey } from '../../i18n'
 import { SETTINGS_TAB_ID, useTabStore } from '../../stores/tabStore'
+import { listPendingPermissions, useChatStore } from '../../stores/chatStore'
 import { useUIStore } from '../../stores/uiStore'
 import type { AgentTaskNotification, BackgroundAgentTask, UIMessage } from '../../types/chat'
 import { AGENT_LIFECYCLE_TYPES } from '../../types/team'
@@ -212,6 +224,7 @@ function ToolCallGroupContent({
   disclosureKey,
   revealToolUseId,
 }: ContentProps) {
+  const awaitingToolUseIds = useAwaitingToolUseIds(sessionId)
   const toolCalls = activityStepToolCalls(steps)
   const hasImageGeneration = toolCalls.some((toolCall) => isImageGenerationToolName(toolCall.toolName))
   const hasNonImageSteps = steps.some(
@@ -324,10 +337,32 @@ function ToolCallGroupContent({
       isLive={isLive}
       disclosureKey={disclosureKey}
       revealToolUseId={revealToolUseId}
+      awaitingToolUseIds={awaitingToolUseIds}
     />
   )
 }
 
+const NO_AWAITING_TOOL_USE_IDS: ReadonlySet<string> = new Set()
+
+/**
+ * Calls of this session whose permission prompt is waiting on the user, so the
+ * run can mark them amber. Selected as a joined string so a group re-renders
+ * only when that set actually changes, not on every streamed token.
+ */
+function useAwaitingToolUseIds(sessionId?: string | null): ReadonlySet<string> {
+  const key = useChatStore((state) => {
+    if (!sessionId) return ''
+    const session = state.sessions[sessionId]
+    if (!session) return ''
+    return listPendingPermissions(session)
+      .map((permission) => permission.toolUseId ?? '')
+      .filter(Boolean)
+      .sort()
+      .join('\n')
+  })
+  return useMemo(() => (key ? new Set(key.split('\n')) : NO_AWAITING_TOOL_USE_IDS), [key])
+}
+
 function MemoryToolActivityGroup({
   activity,
   toolCalls,
@@ -361,20 +396,21 @@ function MemoryToolActivityGroup({
           data-chat-disclosure="true"
           aria-expanded={expanded}
           onClick={toggleExpanded}
-          className="flex w-full items-center gap-2 px-3 py-2 text-left transition-colors hover:bg-[var(--color-surface-hover)]"
+          className="flex min-h-10 w-full items-center gap-2 px-3 text-left transition-colors hover:bg-[var(--color-surface-hover)] focus:outline-none focus-visible:shadow-[var(--shadow-focus-ring)]"
         >
-          {expanded ? (
-            <ChevronDown size={15} className="shrink-0 text-[var(--color-text-tertiary)]" aria-hidden="true" />
-          ) : (
-            <ChevronRight size={15} className="shrink-0 text-[var(--color-text-tertiary)]" aria-hidden="true" />
-          )}
-          <BookMarked size={15} className="shrink-0 text-[var(--color-memory-accent)]" aria-hidden="true" />
+          <BookMarked size={15} strokeWidth={1.75} className="shrink-0 text-[var(--color-memory-accent)]" aria-hidden="true" />
           <span className="min-w-0 flex-1 truncate text-[13px] font-medium text-[var(--color-text-primary)]">
             {t(titleKey, { count: activity.files.length })}
           </span>
           {isStreaming ? (
             <span className="h-1.5 w-1.5 rounded-full bg-[var(--color-memory-accent)] animate-pulse-dot" />
           ) : null}
+          <ChevronRight
+            size={14}
+            strokeWidth={1.75}
+            aria-hidden="true"
+            className={`shrink-0 text-[var(--color-text-tertiary)] transition-transform duration-150 ${expanded ? 'rotate-90' : ''}`}
+          />
         </button>
 
         {expanded ? (
@@ -386,10 +422,10 @@ function MemoryToolActivityGroup({
                   type="button"
                   title={file.path}
                   onClick={() => openMemorySettings(file.path)}
-                  className="group flex w-full items-start gap-2 rounded-[var(--radius-md)] px-2 py-1.5 text-left transition-colors hover:bg-[var(--color-surface-hover)] focus:outline-none focus-visible:shadow-[var(--shadow-focus-ring)]"
+                  className="group flex w-full items-start gap-2 rounded-[var(--radius-sm)] px-2 py-1.5 text-left transition-colors hover:bg-[var(--color-surface-hover)] focus:outline-none focus-visible:shadow-[var(--shadow-focus-ring)]"
                 >
                   <span className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-[var(--radius-sm)] border border-[var(--color-memory-border)] bg-[var(--color-memory-icon-bg)] text-[var(--color-text-tertiary)] group-hover:text-[var(--color-memory-accent)]">
-                    <Settings size={12} aria-hidden="true" />
+                    <Settings size={12} strokeWidth={2} aria-hidden="true" />
                   </span>
                   <span className="min-w-0 flex-1">
                     <span className="flex min-w-0 flex-wrap items-baseline gap-x-2 gap-y-0.5">
@@ -418,19 +454,20 @@ function MemoryToolActivityGroup({
             </div>
 
             <Button
-              variant="ghost"
+              variant="secondary"
               size="sm"
               onClick={() => setDetailsExpanded((value) => !value)}
-              className="mt-2 border border-[var(--color-border)]"
+              aria-expanded={detailsExpanded}
+              className="mt-2"
               icon={detailsExpanded
-                ? <ChevronDown size={13} aria-hidden="true" />
-                : <ChevronRight size={13} aria-hidden="true" />}
+                ? <ChevronDown size={14} strokeWidth={1.75} aria-hidden="true" />
+                : <ChevronRight size={14} strokeWidth={1.75} aria-hidden="true" />}
             >
               {t('chat.memoryTechnicalDetails')}
             </Button>
 
             {detailsExpanded ? (
-              <div className="mt-2 space-y-1">
+              <ToolTimeline className="mt-2">
                 {toolCalls.map((toolCall) => (
                   <ToolCallTree
                     key={toolCall.id}
@@ -438,9 +475,10 @@ function MemoryToolActivityGroup({
                     resultMap={resultMap}
                     childToolCallsByParent={childToolCallsByParent}
                     compact
+                    chrome="row"
                   />
                 ))}
-              </div>
+              </ToolTimeline>
             ) : null}
           </div>
         ) : null}
@@ -471,10 +509,15 @@ function AgentToolGroup({
       taskStatus: agentTaskNotifications[toolCall.toolUseId]?.status ?? agentTaskStatuses?.[toolCall.toolUseId],
     }),
   )
-  const isAnyRunning = statuses.some((status) => status === 'running' || status === 'starting')
-  const errorPresent = statuses.some((status) => status === 'failed')
-  const allComplete = statuses.every((status) => status === 'done')
-  const anyStopped = statuses.some((status) => status === 'stopped')
+  const groupStatus: AgentStatus = statuses.some((status) => status === 'running' || status === 'starting')
+    ? 'running'
+    : statuses.some((status) => status === 'failed')
+      ? 'failed'
+      : statuses.every((status) => status === 'done')
+        ? 'done'
+        : statuses.some((status) => status === 'stopped')
+          ? 'stopped'
+          : 'starting'
 
   return (
     <div className="overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)]">
@@ -483,57 +526,68 @@ function AgentToolGroup({
         data-chat-disclosure="true"
         aria-expanded={expanded}
         onClick={toggleExpanded}
-        className="flex w-full items-center gap-3 px-4 py-3 text-left transition-colors hover:bg-[var(--color-surface-hover)]"
+        className="flex min-h-10 w-full items-center gap-2 px-3 text-left transition-colors hover:bg-[var(--color-surface-hover)] focus:outline-none focus-visible:shadow-[var(--shadow-focus-ring)]"
       >
-        <span className="shrink-0 text-[11px] leading-none text-[var(--color-text-tertiary)]" aria-hidden="true">
-          {expanded ? '▾' : '▸'}
-        </span>
-        <span className="flex-1 truncate text-[14px] font-semibold text-[var(--color-text-primary)]">
+        <Bot size={15} strokeWidth={1.75} aria-hidden="true" className="shrink-0 text-[var(--color-text-tertiary)]" />
+        <span className="min-w-0 flex-1 truncate text-[13px] font-medium text-[var(--color-text-primary)]">
           {toolCalls.length === 1 ? t('toolGroup.agentOne') : t('toolGroup.agentMany', { count: toolCalls.length })}
         </span>
-        {isAnyRunning && (
-          <Badge tone="warning" className="font-semibold">
-            {t('agentStatus.running')}
-          </Badge>
-        )}
-        {!isAnyRunning && errorPresent && (
-          <span className="material-symbols-outlined shrink-0 text-[17px] text-[var(--color-error)]">error</span>
-        )}
-        {!isAnyRunning && !errorPresent && allComplete && (
-          <CircleCheck size={19} strokeWidth={1.6} className="shrink-0 text-[var(--color-success)]" aria-hidden="true" />
-        )}
-        {!isAnyRunning && !errorPresent && !allComplete && !anyStopped && (
-          <span className="material-symbols-outlined shrink-0 text-[17px] text-[var(--color-text-tertiary)]">pending</span>
-        )}
-        {!isAnyRunning && !errorPresent && !allComplete && anyStopped && (
-          <span className="material-symbols-outlined shrink-0 text-[17px] text-[var(--color-text-tertiary)]">stop_circle</span>
-        )}
+        <AgentStatusBadge status={groupStatus} t={t} />
+        <ChevronRight
+          size={14}
+          strokeWidth={1.75}
+          aria-hidden="true"
+          className={`shrink-0 text-[var(--color-text-tertiary)] transition-transform duration-150 ${expanded ? 'rotate-90' : ''}`}
+        />
       </button>
 
       {expanded && (
-        <div className="px-3.5 pb-2.5 pt-0.5">
-          <div className="ml-1.5 flex flex-col border-l border-[var(--color-border)] pl-4">
-            {toolCalls.map((toolCall) => (
-              <AgentCallCard
-                key={toolCall.id}
-                sessionId={sessionId}
-                onOpenAgentRun={onOpenAgentRun}
-                resolveAgentActivityTarget={resolveAgentActivityTarget}
-                toolCall={toolCall}
-                resultMap={resultMap}
-                childToolCallsByParent={childToolCallsByParent}
-                agentTaskNotification={agentTaskNotifications[toolCall.toolUseId]}
-                agentTaskStatus={agentTaskStatuses?.[toolCall.toolUseId]}
-                showOpenRun={showOpenRun}
-              />
-            ))}
-          </div>
+        <div className="divide-y divide-[var(--color-border)] border-t border-[var(--color-border)]">
+          {toolCalls.map((toolCall) => (
+            <AgentCallCard
+              key={toolCall.id}
+              sessionId={sessionId}
+              onOpenAgentRun={onOpenAgentRun}
+              resolveAgentActivityTarget={resolveAgentActivityTarget}
+              toolCall={toolCall}
+              resultMap={resultMap}
+              childToolCallsByParent={childToolCallsByParent}
+              agentTaskNotification={agentTaskNotifications[toolCall.toolUseId]}
+              agentTaskStatus={agentTaskStatuses?.[toolCall.toolUseId]}
+              showOpenRun={showOpenRun}
+            />
+          ))}
         </div>
       )}
     </div>
   )
 }
 
+/**
+ * The run's state as one pill: in progress is info blue, done green, failed
+ * red. Stopped and not-yet-started stay neutral — neither needs the reader.
+ */
+function AgentStatusBadge({
+  status,
+  t,
+}: {
+  status: AgentStatus
+  t: (key: TranslationKey, params?: Record<string, string | number>) => string
+}) {
+  const icon = status === 'running' || status === 'starting'
+    ? <LoaderCircle size={11} strokeWidth={2} className="animate-spin" aria-hidden="true" />
+    : status === 'done'
+      ? <Check size={11} strokeWidth={2} aria-hidden="true" />
+      : status === 'failed'
+        ? <CircleX size={11} strokeWidth={2} aria-hidden="true" />
+        : <CircleStop size={11} strokeWidth={2} aria-hidden="true" />
+  return (
+    <Badge tone={getAgentStatusTone(status)} icon={icon} data-agent-status={status}>
+      {getAgentStatusLabel(status, t)}
+    </Badge>
+  )
+}
+
 function AgentCallCard({
   sessionId,
   onOpenAgentRun,
@@ -592,7 +646,6 @@ function AgentCallCard({
     childCount: childToolCalls.length || (lazyActivity?.toolCalls.length ?? 0),
     taskStatus: agentTaskNotification?.status ?? agentTaskStatus,
   })
-  const statusTone = getAgentStatusTone(status)
   const statusLabel = getAgentStatusLabel(status, t)
   const taskSummary = agentTaskNotification?.summary?.trim() || ''
   const taskResult = agentTaskNotification?.result?.trim() || ''
@@ -614,51 +667,80 @@ function AgentCallCard({
   const openRunTitle = description.trim() || 'Agent'
   const canOpenRun = showOpenRun && !!sessionId && !!toolCall.toolUseId
 
+  const subagentType = typeof input.subagent_type === 'string' && input.subagent_type.trim()
+    ? input.subagent_type.trim()
+    : 'Agent'
+  const usage = agentTaskNotification?.usage
+  const toolUseCount = usage?.toolUses ?? (childToolCalls.length || undefined)
+  const elapsedMs = usage?.durationMs ?? (result && !isLaunchResult ? toolCallDurationMs(toolCall, result) : undefined)
+  const stats = [
+    typeof toolUseCount === 'number' ? t('agentStatus.toolUses', { count: toolUseCount }) : '',
+    typeof elapsedMs === 'number' ? formatDuration(elapsedMs) : '',
+  ].filter(Boolean).join(' · ')
+  const AvatarIcon = status === 'running' || status === 'starting' ? LoaderCircle : Bot
+
   return (
-    <div data-agent-call-layout="row">
-      <div className="-mx-2 flex w-[calc(100%+1rem)] items-center gap-3 rounded-[var(--radius-md)] px-2 py-1.5 text-left transition-colors hover:bg-[var(--color-surface-hover)]">
-        <span className="material-symbols-outlined text-[18px] text-[var(--color-outline)]">smart_toy</span>
+    <div data-agent-call-layout="row" data-agent-status={status}>
+      <div className="flex items-center gap-3 px-3 py-2.5">
+        {/* The avatar carries the row's state — blue while it works, green when
+            done, red on failure — so a group of five does not stack five pills
+            under the header's own. Its name is the state, for screen readers. */}
+        <span
+          role="img"
+          aria-label={statusLabel}
+          className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-[var(--radius-md)] ${AGENT_AVATAR_TONE[status]}`}
+        >
+          <AvatarIcon
+            size={16}
+            strokeWidth={1.75}
+            aria-hidden="true"
+            className={status === 'running' || status === 'starting' ? 'animate-spin' : undefined}
+          />
+        </span>
         <div className="min-w-0 flex-1">
-          <div className="flex items-center gap-2">
-            <span className="text-[13px] font-semibold text-[var(--color-text-primary)]">{t('subagentRun.agent')}</span>
-            {description && (
-              <span className="truncate text-[12px] text-[var(--color-text-secondary)]">
-                {description}
-              </span>
-            )}
+          <div className="flex min-w-0 items-baseline gap-2">
+            <span className="min-w-0 truncate text-[13px] font-medium text-[var(--color-text-primary)]">
+              {description || t('agentStatus.resultTitle')}
+            </span>
+            <span className="shrink-0 font-mono text-[11px] text-[var(--color-text-tertiary)]">{subagentType}</span>
           </div>
           {!expanded && outputSummary && (
-            <div className="mt-1 line-clamp-2 text-[11px] text-[var(--color-text-tertiary)]">
+            <div className="mt-0.5 truncate text-[12px] text-[var(--color-text-tertiary)]" title={outputSummary}>
               {outputSummary}
             </div>
           )}
           {!expanded && !outputSummary && recentToolCalls.length > 0 && (
-            <div className="mt-1 space-y-1">
+            <div className="mt-0.5 space-y-0.5">
               {recentToolCalls.map((recentToolCall) => (
                 <div
                   key={recentToolCall.id}
-                  className="truncate text-[11px] text-[var(--color-text-tertiary)]"
+                  className="truncate text-[12px] text-[var(--color-text-tertiary)]"
                 >
-                  {formatRecentToolUseSummary(recentToolCall, resultMap)}
+                  {formatRecentToolUseSummary(recentToolCall, resultMap, t)}
                 </div>
               ))}
             </div>
           )}
           {!expanded && !outputSummary && !recentToolCalls.length && errorText && (
-            <div className="mt-1 truncate text-[11px] text-[var(--color-error)]">
+            <div className="mt-0.5 truncate text-[12px] text-[var(--color-error)]">
               {errorText}
             </div>
           )}
         </div>
+        {stats ? (
+          <span className="hidden shrink-0 font-mono text-[11px] tabular-nums text-[var(--color-text-tertiary)] sm:inline">
+            {stats}
+          </span>
+        ) : null}
         {outputSummary && (
           <Button
-            variant="ghost"
+            variant="secondary"
             size="sm"
             onClick={(event) => {
               event.stopPropagation()
               setPreviewOpen(true)
             }}
-            className="shrink-0 border border-[var(--color-border)]"
+            className="shrink-0"
           >
             {t('agentStatus.viewResult')}
           </Button>
@@ -680,38 +762,38 @@ function AgentCallCard({
               }
               useTabStore.getState().openSubagentTab(sessionId, toolCall.toolUseId, openRunTitle)
             }}
-            className="shrink-0 border border-[var(--color-border)]"
+            className="shrink-0"
           >
             {t('toolGroup.openRun')}
           </Button>
         )}
-        <Badge tone={statusTone} className="font-semibold">
-          {statusLabel}
-        </Badge>
         <IconButton
           size="sm"
-          shape="circle"
           tone="muted"
           onClick={() => setExpanded((value) => !value)}
           label={t(expanded ? 'toolGroup.collapseAgent' : 'toolGroup.expandAgent')}
           showTooltip={false}
+          aria-expanded={expanded}
           icon={(
-            <span className="material-symbols-outlined text-[16px]" aria-hidden="true">
-              {expanded ? 'expand_less' : 'expand_more'}
-            </span>
+            <ChevronDown
+              size={14}
+              strokeWidth={1.75}
+              aria-hidden="true"
+              className={`transition-transform duration-150 ${expanded ? 'rotate-180' : ''}`}
+            />
           )}
         />
       </div>
 
       {expanded && (
-        <div className="mb-2 ml-2 mt-1 border-l border-[var(--color-border)] py-1 pl-3">
+        <div className="pb-2.5 pl-[52px] pr-3">
           {errorText && (
-            <div className="mb-2 bg-[var(--color-error-soft)] px-3 py-2 text-[11px] text-[var(--color-error)]">
+            <div className="mb-2 rounded-[var(--radius-md)] bg-[var(--color-error-container)] px-3 py-2 text-[12px] text-[var(--color-on-error-container)]">
               {errorText}
             </div>
           )}
           {childToolCalls.length > 0 ? (
-            <div className="space-y-0.5">
+            <ToolTimeline>
               {childToolCalls.map((childToolCall) => (
                 <ToolCallTree
                   key={childToolCall.id}
@@ -722,18 +804,18 @@ function AgentCallCard({
                   chrome="row"
                 />
               ))}
-            </div>
+            </ToolTimeline>
           ) : showActivityLoading ? (
             <div
               data-testid="agent-call-activity-loading"
-              className="px-2 py-1 text-[11px] text-[var(--color-text-tertiary)]"
+              className="py-1 text-[12px] text-[var(--color-text-tertiary)]"
             >
               {t('agentActivity.loading')}
             </div>
           ) : activityState.status === 'error' ? (
             <div
               data-testid="agent-call-activity-error"
-              className="flex items-center gap-2 px-2 py-1 text-[11px] text-[var(--color-text-tertiary)]"
+              className="flex items-center gap-2 py-1 text-[12px] text-[var(--color-text-tertiary)]"
             >
               <span>{t('agentActivity.failed')}</span>
               <Button variant="ghost" size="sm" onClick={retryActivity}>
@@ -741,29 +823,31 @@ function AgentCallCard({
               </Button>
             </div>
           ) : lazyActivity && lazyActivity.toolCalls.length > 0 ? (
-            <div className="space-y-0.5" data-testid="agent-call-activity">
-              {lazyActivity.toolCalls.map((childToolCall) => (
-                <ToolCallTree
-                  key={childToolCall.id}
-                  toolCall={childToolCall}
-                  resultMap={lazyActivity.resultMap}
-                  childToolCallsByParent={lazyActivity.childToolCallsByParent}
-                  compact
-                  chrome="row"
-                />
-              ))}
+            <div data-testid="agent-call-activity">
+              <ToolTimeline>
+                {lazyActivity.toolCalls.map((childToolCall) => (
+                  <ToolCallTree
+                    key={childToolCall.id}
+                    toolCall={childToolCall}
+                    resultMap={lazyActivity.resultMap}
+                    childToolCallsByParent={lazyActivity.childToolCallsByParent}
+                    compact
+                    chrome="row"
+                  />
+                ))}
+              </ToolTimeline>
               {lazyActivity.truncated && (
-                <div className="px-2 py-1 text-[11px] text-[var(--color-text-tertiary)]">
+                <div className="py-1 pl-[30px] text-[12px] text-[var(--color-text-tertiary)]">
                   {t('agentActivity.truncated')}
                 </div>
               )}
             </div>
           ) : outputSummary ? (
-            <div className="px-2 py-1 text-[11px] text-[var(--color-text-tertiary)]">
+            <div className="py-1 text-[12px] text-[var(--color-text-tertiary)]">
               {t('agentStatus.noActivity')}
             </div>
           ) : (
-            <div className="px-2 py-1 text-[11px] text-[var(--color-text-tertiary)]">
+            <div className="py-1 text-[12px] text-[var(--color-text-tertiary)]">
               {status === 'starting' ? t('agentStatus.starting') : t('agentStatus.noActivity')}
             </div>
           )}
@@ -783,6 +867,14 @@ function AgentCallCard({
   )
 }
 
+const AGENT_AVATAR_TONE: Record<AgentStatus, string> = {
+  starting: 'bg-[var(--color-info-container)] text-[var(--color-on-info-container)]',
+  running: 'bg-[var(--color-info-container)] text-[var(--color-on-info-container)]',
+  done: 'bg-[var(--color-success-container)] text-[var(--color-on-success-container)]',
+  failed: 'bg-[var(--color-error-container)] text-[var(--color-on-error-container)]',
+  stopped: 'bg-[var(--color-surface-container)] text-[var(--color-text-secondary)]',
+}
+
 function ToolCallTree({
   toolCall,
   resultMap,
@@ -814,28 +906,33 @@ function ToolCallTree({
         durationMs={toolCallDurationMs(toolCall, result)}
         toolUseId={toolCall.parentToolUseId ? undefined : toolCall.toolUseId}
       />
-      {childToolCalls.length > 0 && (
-        <div className={
-          isRow
-            ? 'ml-2 border-l border-[var(--color-border)] pl-3'
-            : compact
-              ? 'ml-4 border-l border-[var(--color-border)] pl-3'
-              : 'mb-2 ml-16 border-l border-[var(--color-border)] pl-3'
-        }>
-          <div className={isRow ? 'space-y-0.5' : 'space-y-1'}>
-            {childToolCalls.map((childToolCall) => (
-              <ToolCallTree
-                key={childToolCall.id}
-                toolCall={childToolCall}
-                resultMap={resultMap}
-                childToolCallsByParent={childToolCallsByParent}
-                compact
-                chrome={chrome}
-              />
-            ))}
-          </div>
+      {childToolCalls.length > 0 && (isRow ? (
+        <ToolTimeline className="ml-[30px]">
+          {childToolCalls.map((childToolCall) => (
+            <ToolCallTree
+              key={childToolCall.id}
+              toolCall={childToolCall}
+              resultMap={resultMap}
+              childToolCallsByParent={childToolCallsByParent}
+              compact
+              chrome={chrome}
+            />
+          ))}
+        </ToolTimeline>
+      ) : (
+        <div className={`${compact ? 'ml-4' : 'mb-2 ml-6'} space-y-1 border-l border-[var(--color-border)] pl-3`}>
+          {childToolCalls.map((childToolCall) => (
+            <ToolCallTree
+              key={childToolCall.id}
+              toolCall={childToolCall}
+              resultMap={resultMap}
+              childToolCallsByParent={childToolCallsByParent}
+              compact
+              chrome={chrome}
+            />
+          ))}
         </div>
-      )}
+      ))}
     </div>
   )
 }
@@ -996,38 +1093,52 @@ function getAgentStatusTone(status: AgentStatus): Tone {
     case 'done':
       return 'success'
     case 'running':
-      return 'warning'
-    case 'stopped':
     case 'starting':
+      return 'info'
+    case 'stopped':
     default:
       return 'neutral'
   }
 }
 
+/**
+ * One line per recent child call under a collapsed agent row: verb, target and
+ * state, in the interface language — `读取 · example.ts · 完成`.
+ */
 function formatRecentToolUseSummary(
   toolCall: ToolCall,
   resultMap: Map<string, ToolResult>,
+  t: (key: TranslationKey, params?: Record<string, string | number>) => string,
 ): string {
   const input = toolCall.input && typeof toolCall.input === 'object'
     ? toolCall.input as Record<string, unknown>
     : {}
   const result = resultMap.get(toolCall.toolUseId)
-  const suffix = result?.isError ? ' • failed' : result ? ' • done' : ' • running'
+  const state = t(result?.isError ? 'agentStatus.failed' : result ? 'agentStatus.done' : 'agentStatus.running')
+  const str = (value: unknown) => (typeof value === 'string' ? value : '')
 
+  let target = ''
   switch (toolCall.toolName) {
     case 'Bash':
-      return `Bash · ${typeof input.command === 'string' ? input.command : ''}${suffix}`
+    case 'PowerShell':
+      target = str(input.command)
+      break
     case 'Read':
-      return `Read · ${typeof input.file_path === 'string' ? input.file_path.split('/').pop() : 'file'}${suffix}`
+    case 'Edit':
+    case 'Write':
+      target = str(input.file_path).split(/[/\\]/).pop() || ''
+      break
     case 'Glob':
-      return `Glob · ${typeof input.pattern === 'string' ? input.pattern : ''}${suffix}`
     case 'Grep':
-      return `Grep · ${typeof input.pattern === 'string' ? input.pattern : ''}${suffix}`
+      target = str(input.pattern)
+      break
     case 'Agent':
-      return `Agent · ${typeof input.description === 'string' ? input.description : ''}${suffix}`
+      target = str(input.description)
+      break
     default:
-      return `${toolCall.toolName}${suffix}`
+      break
   }
+  return [toolVerb(toolCall.toolName, t), target, state].filter(Boolean).join(' · ')
 }
 
 function getAgentErrorSummary(content: unknown): string {
diff --git a/desktop/src/components/chat/ToolResultBlock.tsx b/desktop/src/components/chat/ToolResultBlock.tsx
index 30197dc7..1d1244ee 100644
--- a/desktop/src/components/chat/ToolResultBlock.tsx
+++ b/desktop/src/components/chat/ToolResultBlock.tsx
@@ -1,5 +1,7 @@
 import { CodeViewer } from './CodeViewer'
 import { memo, useMemo, useState } from 'react'
+import { CircleAlert, CircleCheck } from 'lucide-react'
+import { Badge } from '@/components/ui/Badge'
 import { useTranslation } from '../../i18n'
 import { getDisclosure, setDisclosure } from '../../lib/disclosureMemory'
 import { extractToolResultImages } from '../../lib/toolResultContent'
@@ -35,11 +37,7 @@ export const ToolResultBlock = memo(function ToolResultBlock({ content, isError,
   const hasImages = toolImages.images.length > 0 || toolImages.dropped > 0
 
   return (
-    <div className={`overflow-hidden rounded-[var(--radius-lg)] border ${
-      isError
-        ? 'border-[var(--color-error)]'
-        : 'border-[var(--color-border)]'
-    }`}>
+    <div className="overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)]">
       {/* Status header */}
       <button
         type="button"
@@ -48,25 +46,19 @@ export const ToolResultBlock = memo(function ToolResultBlock({ content, isError,
         setLocalExpanded(next)
         if (disclosureKey) setDisclosure(disclosureKey, next)
       }}
-        className={`flex w-full items-center justify-between px-3 py-2 text-left text-[10px] font-bold uppercase tracking-wider ${
-        isError
-          ? 'bg-[var(--color-error-container)] text-[var(--color-on-error-container)]'
-          : 'bg-[var(--color-surface-container-high)] text-[var(--color-text-tertiary)]'
-      }`}
+        className="flex min-h-9 w-full items-center gap-2 px-3 text-left text-[13px] transition-colors hover:bg-[var(--color-surface-hover)] focus:outline-none focus-visible:shadow-[var(--shadow-focus-ring)]"
       >
-        <span className="flex items-center gap-1.5">
-          <span className="material-symbols-outlined text-[12px]">
-            {isError ? 'error' : 'check_circle'}
-          </span>
+        {isError ? (
+          <CircleAlert size={14} strokeWidth={1.75} aria-hidden="true" className="shrink-0 text-[var(--color-error)]" />
+        ) : (
+          <CircleCheck size={14} strokeWidth={1.75} aria-hidden="true" className="shrink-0 text-[var(--color-text-tertiary)]" />
+        )}
+        <span className="min-w-0 flex-1 truncate font-medium text-[var(--color-text-primary)]">
           {toolName ? t('tool.result', { toolName }) : t('tool.resultGeneric')}
         </span>
-        <span className={`px-2 py-0.5 rounded-full text-[9px] ${
-          isError
-            ? 'bg-[var(--color-error-container)] text-[var(--color-on-error-container)]'
-            : 'bg-[var(--color-diff-added-bg)] text-[var(--color-diff-added-text)]'
-        }`}>
+        <Badge tone={isError ? 'danger' : 'success'}>
           {isError ? t('tool.error') : t('tool.success')}
-        </span>
+        </Badge>
       </button>
 
       {/* Pictures the tool returned as image blocks */}
@@ -85,7 +77,7 @@ export const ToolResultBlock = memo(function ToolResultBlock({ content, isError,
       {/* Content. A result that is only pictures has no text to preview. */}
       {!text && hasImages ? null : expanded ? (
         isError ? (
-          <div className="bg-[var(--color-error-container)] px-3 py-2.5 font-mono text-[11px] leading-[1.5] whitespace-pre-wrap break-words text-[var(--color-on-error-container)]">
+          <div className="whitespace-pre-wrap break-words border-t border-[var(--color-border)] bg-[var(--color-error-container)] px-3 py-2.5 font-mono text-[12px] leading-[1.6] text-[var(--color-on-error-container)]">
             {text}
           </div>
         ) : (
@@ -96,7 +88,7 @@ export const ToolResultBlock = memo(function ToolResultBlock({ content, isError,
           />
         )
       ) : (
-        <div className="bg-[var(--color-surface-container-lowest)] px-3 py-2 font-mono text-[10px] leading-[1.35] text-[var(--color-text-tertiary)]">
+        <div className="border-t border-[var(--color-border)] bg-[var(--color-surface-container)] px-3 py-2 font-mono text-[12px] leading-[1.5] text-[var(--color-text-tertiary)]">
           {preview}
           {hasMore ? '…' : ''}
         </div>
@@ -109,7 +101,8 @@ export const ToolResultBlock = memo(function ToolResultBlock({ content, isError,
             setLocalExpanded(next)
             if (disclosureKey) setDisclosure(disclosureKey, next)
           }}
-          className="w-full py-1 text-[10px] font-medium text-[var(--color-text-accent)] hover:underline bg-[var(--color-surface-container-low)] border-t border-[var(--color-border)]"
+          type="button"
+          className="flex h-7 w-full items-center justify-center border-t border-[var(--color-border)] text-[12px] text-[var(--color-text-tertiary)] transition-colors hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] focus:outline-none focus-visible:shadow-[var(--shadow-focus-ring)]"
         >
           {expanded ? t('tool.showLess') : t('tool.showMore', { count: text.length - 200 })}
         </button>
diff --git a/desktop/src/components/chat/TurnCompletionStamp.tsx b/desktop/src/components/chat/TurnCompletionStamp.tsx
index 6a666497..7f28b5cd 100644
--- a/desktop/src/components/chat/TurnCompletionStamp.tsx
+++ b/desktop/src/components/chat/TurnCompletionStamp.tsx
@@ -25,14 +25,14 @@ export function TurnCompletionStamp({ completion }: Props) {
   return (
     <span
       data-turn-completion
-      className="inline-flex min-w-0 items-center gap-2 whitespace-nowrap text-[11px] font-medium tabular-nums text-[var(--color-text-tertiary)]"
+      className="inline-flex min-w-0 items-center gap-1.5 whitespace-nowrap text-xs tabular-nums text-[var(--color-text-tertiary)]"
     >
       <span title={formatExactMessageTimestamp(completion.completedAt, locale) || clockLabel}>
         {clockLabel}
       </span>
       {duration ? (
         <>
-          <span aria-hidden="true">·</span>
+          <span aria-hidden="true" className="h-[3px] w-[3px] shrink-0 rounded-full bg-[var(--color-text-tertiary)]" />
           <span data-turn-completion-duration>{t('chat.turnDuration', { duration })}</span>
         </>
       ) : null}
diff --git a/desktop/src/components/chat/UserMessage.test.tsx b/desktop/src/components/chat/UserMessage.test.tsx
index 818b05a6..c276912a 100644
--- a/desktop/src/components/chat/UserMessage.test.tsx
+++ b/desktop/src/components/chat/UserMessage.test.tsx
@@ -45,6 +45,10 @@ describe('UserMessage', () => {
     expect(actions?.className).toContain('opacity-0')
     expect(actions?.className).toContain('group-hover:opacity-100')
     expect(actions?.className).toContain('group-focus-within:opacity-100')
+    // Hung under the bubble, out of flow: revealing it never shifts the transcript.
+    expect(actions?.getAttribute('data-placement')).toBe('overlay')
+    expect(actions?.className).toContain('absolute')
+    expect(actions?.parentElement?.className).toContain('relative')
     expect(container.querySelectorAll('[data-message-actions]')).toHaveLength(1)
     expect(screen.getByRole('button', { name: 'Fork' }).closest('[data-message-actions]')).toBe(actions)
     expect(button.textContent).toBe('')
diff --git a/desktop/src/components/chat/UserMessage.tsx b/desktop/src/components/chat/UserMessage.tsx
index fd118ab4..84ad14ad 100644
--- a/desktop/src/components/chat/UserMessage.tsx
+++ b/desktop/src/components/chat/UserMessage.tsx
@@ -111,9 +111,9 @@ export const UserMessage = memo(function UserMessage({
         <div
           data-message-shell="teammate"
           data-teammate-from={teammateFrom}
-          className="group flex min-w-0 max-w-[82%] flex-col items-start sm:max-w-[78%] lg:max-w-[680px]"
+          className="group relative flex min-w-0 max-w-[82%] flex-col items-start lg:max-w-[680px]"
         >
-          <div className="mb-1 flex min-w-0 items-center gap-2 px-0.5 text-[11px] text-[var(--color-text-tertiary)]">
+          <div className="mb-1.5 flex min-w-0 items-center gap-2 px-0.5 text-xs text-[var(--color-text-tertiary)]">
             {teammateAvatarSrc ? (
               <span
                 data-testid="teammate-message-avatar"
@@ -133,9 +133,9 @@ export const UserMessage = memo(function UserMessage({
                 />
               </span>
             ) : (
-              <UsersRound size={12} strokeWidth={2.2} aria-hidden="true" className="shrink-0 text-[var(--color-brand)]" />
+              <UsersRound size={12} strokeWidth={2} aria-hidden="true" className="shrink-0 text-[var(--color-text-tertiary)]" />
             )}
-            <span className="min-w-0 truncate font-mono font-bold text-[var(--color-text-secondary)]">
+            <span className="min-w-0 truncate font-mono font-medium text-[var(--color-text-secondary)]">
               {teammateFrom}
             </span>
             <span className="shrink-0">{t('chat.teammateMessage')}</span>
@@ -148,13 +148,13 @@ export const UserMessage = memo(function UserMessage({
             {hasText && (
               <div
                 data-message-body="teammate"
-                className="min-w-0 max-w-full rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container)] px-[16px] py-[12px] chat-reading-text leading-relaxed text-[var(--color-text-primary)]"
+                className="min-w-0 max-w-full rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] px-3.5 py-2.5 chat-reading-text text-[var(--color-text-primary)]"
                 style={{ overflowWrap: 'anywhere', wordBreak: 'break-word' }}
               >
                 <MarkdownRenderer
                   content={content}
                   onLinkClick={sessionId ? handleLinkClick : undefined}
-                  className="chat-reading-markdown [&>:first-child]:mt-0 [&>:last-child]:mb-0 [&_h1]:text-lg [&_h2]:text-base [&_h3]:text-sm [&_h4]:text-sm"
+                  className="chat-reading-markdown [&>:first-child]:mt-0 [&>:last-child]:mb-0"
                 />
               </div>
             )}
@@ -165,6 +165,7 @@ export const UserMessage = memo(function UserMessage({
               copyText={content}
               copyLabel={t('chat.copyPrompt')}
               align="start"
+              placement="overlay"
               timestamp={timestamp}
             />
           )}
@@ -179,7 +180,7 @@ export const UserMessage = memo(function UserMessage({
         <div
           data-message-shell="user"
           data-editing="true"
-          className="flex w-full min-w-0 max-w-[82%] flex-col items-stretch sm:max-w-[78%] lg:max-w-[640px]"
+          className="flex w-full min-w-0 max-w-[82%] flex-col items-stretch lg:max-w-[640px]"
         >
           <UserMessageEditor
             initialDraft={editAction.getDraft()}
@@ -198,7 +199,7 @@ export const UserMessage = memo(function UserMessage({
     <div className="flex justify-end">
       <div
         data-message-shell="user"
-        className="group flex min-w-0 max-w-[82%] flex-col items-end sm:max-w-[78%] lg:max-w-[640px]"
+        className="group relative flex min-w-0 max-w-[82%] flex-col items-end lg:max-w-[640px]"
       >
         <div className="flex max-w-full flex-col items-end gap-2">
           {collaboration ? <div className="px-0.5 text-[11px] text-[var(--color-text-tertiary)]">
@@ -214,7 +215,7 @@ export const UserMessage = memo(function UserMessage({
           {hasText && (
             <div
               data-message-body="user"
-              className="min-w-0 max-w-full rounded-[var(--radius-lg)] bg-[var(--color-surface-user-msg)] px-[18px] py-[13px] chat-reading-text leading-relaxed text-[var(--color-text-primary)] whitespace-pre-wrap break-words"
+              className="min-w-0 max-w-full rounded-[var(--radius-lg)] bg-[var(--color-surface-user-msg)] px-3.5 py-2.5 chat-reading-text text-[var(--color-text-primary)] whitespace-pre-wrap break-words"
               style={{
                 overflowWrap: 'anywhere',
                 wordBreak: 'break-word',
@@ -232,6 +233,7 @@ export const UserMessage = memo(function UserMessage({
             branchAction={branchAction}
             editAction={actionBarEditAction}
             align="end"
+            placement="overlay"
             timestamp={timestamp}
           />
         )}
diff --git a/desktop/src/components/chat/UserMessageEditor.tsx b/desktop/src/components/chat/UserMessageEditor.tsx
index dee7b101..4b347ca7 100644
--- a/desktop/src/components/chat/UserMessageEditor.tsx
+++ b/desktop/src/components/chat/UserMessageEditor.tsx
@@ -70,7 +70,7 @@ export function UserMessageEditor({
   return (
     <div
       data-testid="user-message-editor"
-      className="flex w-full flex-col gap-2 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface)] p-2.5"
+      className="flex w-full flex-col gap-2 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] p-2.5"
     >
       {draft.attachments.length > 0 ? (
         <AttachmentGallery
diff --git a/desktop/src/components/chat/WorkflowSavePanel.tsx b/desktop/src/components/chat/WorkflowSavePanel.tsx
index 66c8a581..38a1c61f 100644
--- a/desktop/src/components/chat/WorkflowSavePanel.tsx
+++ b/desktop/src/components/chat/WorkflowSavePanel.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useState } from 'react'
+import { Network } from 'lucide-react'
 import { workflowsApi } from '../../api/workflows'
 import { useTranslation } from '../../i18n'
 import { runsForSession, useWorkflowStore } from '../../stores/workflowStore'
@@ -139,7 +140,7 @@ export function WorkflowSavePanel({
     >
       {completedRuns.length === 0 ? (
         <EmptyState
-          icon={<span className="material-symbols-outlined">account_tree</span>}
+          icon={<Network size={20} strokeWidth={1.75} aria-hidden="true" />}
           description={t('slash.saveWorkflow.noCompletedRun')}
         />
       ) : (
@@ -191,12 +192,12 @@ export function WorkflowSavePanel({
                 ]}
               />
               {error && (
-                <p role="alert" className="text-sm text-[var(--color-error)]">
+                <p role="alert" className="text-[13px] text-[var(--color-error)]">
                   {t('slash.saveWorkflow.error', { detail: error })}
                 </p>
               )}
               {savedName && (
-                <p role="status" className="text-sm text-[var(--color-success)]">
+                <p role="status" className="text-[13px] text-[var(--color-success)]">
                   {t('slash.saveWorkflow.success', { name: savedName })}
                 </p>
               )}
diff --git a/desktop/src/components/chat/WorkspaceChangesFallback.tsx b/desktop/src/components/chat/WorkspaceChangesFallback.tsx
index 00d61d23..d7827f89 100644
--- a/desktop/src/components/chat/WorkspaceChangesFallback.tsx
+++ b/desktop/src/components/chat/WorkspaceChangesFallback.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { ChevronRight } from 'lucide-react'
+import { ChevronRight, FileDiff } from 'lucide-react'
 import type { WorkspaceChangedFile } from '@/api/sessions'
 import { Button } from '@/components/ui/Button'
 import { FileTypeIcon } from '@/components/ui/FileTypeIcon'
@@ -23,15 +23,16 @@ export function WorkspaceChangesFallback({ sessionId, files }: WorkspaceChangesF
   return (
     <section
       aria-label={t('chat.workspaceChangesFallbackLabel')}
-      className="mx-auto mb-5 mt-2 w-full max-w-[var(--chat-content-max-width)] overflow-hidden rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface)] shadow-[var(--shadow-card)]"
+      className="mx-auto mb-5 mt-2.5 w-full max-w-[var(--chat-content-max-width)] overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)]"
     >
-      <div className="space-y-1 bg-[var(--color-surface-container-low)] px-3 py-2">
-        <h3 className="text-sm font-semibold text-[var(--color-text-primary)]">
+      <div className="space-y-0.5 px-3 py-2.5">
+        <h3 className="flex items-center gap-2 text-[13px] font-medium text-[var(--color-text-primary)]">
+          <FileDiff size={15} strokeWidth={1.75} aria-hidden="true" className="shrink-0 text-[var(--color-text-tertiary)]" />
           {files === null
             ? t('chat.workspaceChangesFallbackLabel')
             : t('chat.workspaceChangesFallbackTitle', { count: files.length })}
         </h3>
-        <p role={files === null ? 'alert' : undefined} className="text-xs leading-5 text-[var(--color-text-secondary)]">
+        <p role={files === null ? 'alert' : undefined} className="pl-[23px] text-xs leading-5 text-[var(--color-text-tertiary)]">
           {t(files === null ? 'chat.workspaceChangesFallbackUnavailable' : 'chat.workspaceChangesFallbackExplanation')}
         </p>
       </div>
@@ -43,7 +44,7 @@ export function WorkspaceChangesFallback({ sessionId, files }: WorkspaceChangesF
       ) : null}
 
       {visibleFiles?.length ? (
-        <ul className="divide-y divide-[var(--color-border)] border-t border-[var(--color-border)]">
+        <ul className="border-t border-[var(--color-border)] px-1.5 py-1">
           {visibleFiles.map((file) => (
             <li key={file.path}>
               <button
@@ -51,11 +52,11 @@ export function WorkspaceChangesFallback({ sessionId, files }: WorkspaceChangesF
                 aria-label={t('chat.workspaceChangesFallbackOpenFile', { path: file.path })}
                 title={file.path}
                 onClick={() => workspaceOpen.file(sessionId, file.path)}
-                className="flex min-h-[44px] w-full min-w-0 items-center gap-3 rounded-[var(--radius-md)] px-3 text-left transition-colors hover:bg-[var(--color-surface-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-border-focus)]"
+                className="flex h-8 w-full min-w-0 items-center gap-2 rounded-[var(--radius-sm)] px-1.5 text-left transition-colors hover:bg-[var(--color-surface-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-border-focus)]"
               >
-                <FileTypeIcon path={file.path} size={20} />
-                <span className="min-w-0 flex-1 truncate text-sm text-[var(--color-text-primary)]">{file.path}</span>
-                <ChevronRight size={16} aria-hidden="true" className="shrink-0 text-[var(--color-text-tertiary)]" />
+                <FileTypeIcon path={file.path} size={14} />
+                <span className="min-w-0 flex-1 truncate font-mono text-xs text-[var(--color-text-primary)]">{file.path}</span>
+                <ChevronRight size={14} strokeWidth={1.75} aria-hidden="true" className="shrink-0 text-[var(--color-text-tertiary)]" />
               </button>
             </li>
           ))}
@@ -63,7 +64,7 @@ export function WorkspaceChangesFallback({ sessionId, files }: WorkspaceChangesF
       ) : null}
 
       {files && files.length > COLLAPSED_COUNT ? (
-        <div className="border-t border-[var(--color-border)] px-3 py-2">
+        <div className="border-t border-[var(--color-border)] px-1.5 py-1">
           <Button
             variant="ghost"
             size="sm"
diff --git a/desktop/src/components/chat/activityGroupModel.ts b/desktop/src/components/chat/activityGroupModel.ts
index a57ad5a5..3fc43ef7 100644
--- a/desktop/src/components/chat/activityGroupModel.ts
+++ b/desktop/src/components/chat/activityGroupModel.ts
@@ -1,13 +1,15 @@
 import {
   Bot,
+  Box,
   Brain,
   FilePen,
   FilePlus,
   FileText,
   Globe,
   ListTodo,
+  MessageSquare,
   Search,
-  Terminal,
+  SquareTerminal,
   Wrench,
   type LucideIcon,
 } from 'lucide-react'
@@ -31,6 +33,7 @@ export type ActivityStep =
   | { kind: 'tool'; toolCall: ToolCall }
 
 export const THINKING_SEGMENT_KEY = '__thinking__'
+const TASKS_FAMILY_KEY = '__tasks__'
 
 export type ActivitySegment = {
   key: string
@@ -63,11 +66,27 @@ const TOOL_VERBS: Record<string, (count: number, t: Translate) => string> = {
   Agent: (n, t) => n === 1 ? t('toolGroup.agentOne') : t('toolGroup.agentMany', { count: n }),
   WebSearch: (_n, t) => t('toolGroup.searchedWeb'),
   WebFetch: (n, t) => n === 1 ? t('toolGroup.fetchedOne') : t('toolGroup.fetchedMany', { count: n }),
+  // A todo list is one artifact however many times it is rewritten, so the
+  // summary says what happened to it rather than counting the rewrites.
+  TodoWrite: (_n, t) => t('toolGroup.updatedTodos'),
+  [TASKS_FAMILY_KEY]: (_n, t) => t('toolGroup.managedTasks'),
+}
+
+/**
+ * Tools that share one clause in the summary. The task tools are four names for
+ * one activity — "TaskCreate, TaskUpdate (3), TaskList" read as an inventory of
+ * internals where "managed tasks" says what the reader needs.
+ */
+const TOOL_FAMILIES: Record<string, string> = {
+  TaskCreate: TASKS_FAMILY_KEY,
+  TaskUpdate: TASKS_FAMILY_KEY,
+  TaskList: TASKS_FAMILY_KEY,
+  TaskGet: TASKS_FAMILY_KEY,
 }
 
 const TOOL_SEGMENT_ICONS: Record<string, LucideIcon> = {
-  Bash: Terminal,
-  PowerShell: Terminal,
+  Bash: SquareTerminal,
+  PowerShell: SquareTerminal,
   Read: FileText,
   Write: FilePlus,
   Edit: FilePen,
@@ -75,12 +94,22 @@ const TOOL_SEGMENT_ICONS: Record<string, LucideIcon> = {
   NotebookEdit: FilePen,
   Glob: Search,
   Grep: Search,
+  ToolSearch: Search,
   Agent: Bot,
   WebSearch: Globe,
   WebFetch: Globe,
+  TodoWrite: ListTodo,
   TaskCreate: ListTodo,
   TaskUpdate: ListTodo,
   TaskList: ListTodo,
+  TaskGet: ListTodo,
+  [TASKS_FAMILY_KEY]: ListTodo,
+  Skill: Box,
+  ListSessions: MessageSquare,
+  ReadSession: MessageSquare,
+  CreateSession: MessageSquare,
+  SendSessionMessage: MessageSquare,
+  WaitSessions: MessageSquare,
 }
 
 export function activitySegmentIcon(toolName: string): LucideIcon {
@@ -98,7 +127,9 @@ export function buildActivitySegments(steps: ActivityStep[], t: Translate): Acti
   const editedFilePaths = new Set<string>()
 
   for (const step of steps) {
-    const key = step.kind === 'thinking' ? THINKING_SEGMENT_KEY : step.toolCall.toolName
+    const key = step.kind === 'thinking'
+      ? THINKING_SEGMENT_KEY
+      : TOOL_FAMILIES[step.toolCall.toolName] ?? step.toolCall.toolName
     if (!counts.has(key)) order.push(key)
 
     // The Edit label counts files, not operations. Agents commonly refine one
@@ -149,6 +180,15 @@ export function buildActivitySegments(steps: ActivityStep[], t: Translate): Acti
   })
 }
 
+/**
+ * The header sentence. The separator is the locale's own list mark — `、` in
+ * Chinese and Japanese, a comma elsewhere — because a Latin comma between
+ * Chinese clauses reads as a typo.
+ */
+export function formatActivitySummary(segments: ActivitySegment[], t: Translate): string {
+  return segments.map((segment) => segment.label).join(t('toolGroup.separator'))
+}
+
 export function toolCallHasError(
   toolCall: ToolCall,
   resultMap: Map<string, ToolResult>,
diff --git a/desktop/src/components/chat/capabilityMenuModel.ts b/desktop/src/components/chat/capabilityMenuModel.ts
index 4bd7dc52..cafda6a7 100644
--- a/desktop/src/components/chat/capabilityMenuModel.ts
+++ b/desktop/src/components/chat/capabilityMenuModel.ts
@@ -6,7 +6,7 @@ import {
   Paperclip,
   Plug,
   Settings2,
-  Sparkles,
+  UserPlus,
   Users,
   Workflow,
   type LucideIcon,
@@ -180,7 +180,7 @@ export function buildCapabilitySections(input: CapabilityMenuInput): CapabilityM
     key: 'teams:create',
     label: t('chat.capabilities.teamCreate'),
     description: t('chat.capabilities.teamCreateDescription'),
-    icon: { kind: 'lucide', icon: Sparkles },
+    icon: { kind: 'lucide', icon: UserPlus },
     action: { type: 'insertPromptSeed', text: input.teamCreatePrompt },
   }]
   for (const team of input.teams) {
diff --git a/desktop/src/components/chat/chatBlocks.test.tsx b/desktop/src/components/chat/chatBlocks.test.tsx
index bd79bd9e..67ed078c 100644
--- a/desktop/src/components/chat/chatBlocks.test.tsx
+++ b/desktop/src/components/chat/chatBlocks.test.tsx
@@ -420,7 +420,10 @@ describe('chat blocks', () => {
       />,
     )
 
-    expect(container.textContent).toContain('Bash')
+    // A described command is named by its description; the raw tool name and
+    // the command stay in the tooltip.
+    expect(container.textContent).toContain('List files')
+    expect(screen.getByRole('button').getAttribute('title')).toBe('Bash · ls -la')
     expect(container.textContent).not.toContain('file-a')
 
     fireEvent.click(screen.getByRole('button'))
@@ -714,7 +717,8 @@ describe('chat blocks', () => {
       />,
     )
 
-    expect(container.textContent).toContain('Write')
+    expect(container.textContent).toContain('Create')
+    expect(screen.getByRole('button').getAttribute('title')).toContain('Write')
     expect(container.textContent).toContain('ai-code-novel.md')
     expect(container.textContent).toContain('Generating content')
   })
@@ -840,8 +844,9 @@ describe('chat blocks', () => {
       />,
     )
 
-    expect(container.textContent).toContain('Bash')
+    expect(container.textContent).toContain('Show full diff of latest commit')
     expect(container.textContent).toContain('fatal: unrecognized argument: --no-stat')
+    expect(container.querySelector('[data-tool-status]')?.getAttribute('data-tool-status')).toBe('error')
   })
 
   it('shows full bash error output when the tool block is expanded', () => {
@@ -864,7 +869,9 @@ describe('chat blocks', () => {
 
     fireEvent.click(screen.getByRole('button'))
 
-    expect(container.textContent).toContain('Error Output')
+    // A failed command reads as failed in the terminal head — no exit code is
+    // recoverable from this payload, so the pill says so instead of guessing 1.
+    expect(container.querySelector('[data-shell-exit]')?.textContent).toBe('Failed')
     expect(container.textContent).toContain('detail line 8')
     expect(container.textContent).toContain('final remediation hint')
   })
diff --git a/desktop/src/components/chat/composerEditor.ts b/desktop/src/components/chat/composerEditor.ts
index e98a6069..5b275d43 100644
--- a/desktop/src/components/chat/composerEditor.ts
+++ b/desktop/src/components/chat/composerEditor.ts
@@ -13,6 +13,43 @@ import { findMentionRanges, mentionToken, tokenOccurrences, safeMentionIcon } fr
 
 export const AT_MENTION_NODE = 'atMention'
 
+const SVG_NS = 'http://www.w3.org/2000/svg'
+
+/**
+ * Path data of the lucide glyphs the mention pill shows (MessageSquare, Puzzle,
+ * Box, Folder, File). The pill is a ProseMirror node rendered through `toDOM`,
+ * not React, so the icon is emitted as a plain SVG with the same 24px grid and
+ * stroke the rest of the composer's lucide icons use.
+ */
+const MENTION_ICON_PATHS: Record<'session' | 'plugin' | 'skill' | 'directory' | 'file', string[]> = {
+  session: ['M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'],
+  plugin: ['M15.39 4.39a1 1 0 0 0 1.68-.474 2.5 2.5 0 1 1 3.014 3.015 1 1 0 0 0-.474 1.68l1.683 1.682a2.414 2.414 0 0 1 0 3.414L19.61 15.39a1 1 0 0 1-1.68-.474 2.5 2.5 0 1 0-3.014 3.015 1 1 0 0 1 .474 1.68l-1.683 1.682a2.414 2.414 0 0 1-3.414 0L8.61 19.61a1 1 0 0 0-1.68.474 2.5 2.5 0 1 1-3.014-3.015 1 1 0 0 0 .474-1.68l-1.683-1.682a2.414 2.414 0 0 1 0-3.414L4.39 8.61a1 1 0 0 1 1.68.474 2.5 2.5 0 1 0 3.014-3.015 1 1 0 0 1-.474-1.68l1.683-1.682a2.414 2.414 0 0 1 3.414 0z'],
+  skill: ['M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z', 'm3.3 7 8.7 5 8.7-5', 'M12 22V12'],
+  directory: ['M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'],
+  file: ['M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z', 'M14 2v4a2 2 0 0 0 2 2h4'],
+}
+
+function mentionIconSpec(glyph: keyof typeof MENTION_ICON_PATHS): DOMOutputSpec {
+  return [
+    `${SVG_NS} svg`,
+    {
+      class: 'composer-mention-icon',
+      'data-mention-glyph': glyph,
+      viewBox: '0 0 24 24',
+      width: '14',
+      height: '14',
+      fill: 'none',
+      stroke: 'currentColor',
+      'stroke-width': '1.75',
+      'stroke-linecap': 'round',
+      'stroke-linejoin': 'round',
+      'aria-hidden': 'true',
+      focusable: 'false',
+    },
+    ...MENTION_ICON_PATHS[glyph].map((d): DOMOutputSpec => [`${SVG_NS} path`, { d }]),
+  ]
+}
+
 export const composerSchema = new Schema({
   nodes: {
     doc: { content: 'block+' },
@@ -55,15 +92,15 @@ export const composerSchema = new Schema({
         }
         const symbol: DOMOutputSpec = icon
           ? ['img', { class: 'composer-mention-brand-icon', src: `${import.meta.env.BASE_URL}${icon.slice(1)}`, alt: '', draggable: 'false' }]
-          : ['span', { class: 'material-symbols-outlined composer-mention-icon', 'aria-hidden': 'true' }, kind === 'session' ? 'chat' : kind === 'plugin' ? 'extension' : kind === 'skill' ? 'deployed_code' : node.attrs.isDirectory ? 'folder' : 'draft']
+          : mentionIconSpec(kind ?? (node.attrs.isDirectory ? 'directory' : 'file'))
         return ['span', attrs, symbol, `@${node.attrs.label as string}`]
       },
       parseDOM: [
         {
           tag: 'span.composer-mention',
           getAttrs: (dom) => ({
-            // The ligature icon text pollutes textContent, so the label
-            // travels in its own attribute.
+            // The pill's text is decorated (the leading `@`, the icon), so
+            // the label travels in its own attribute.
             label: dom.getAttribute('data-mention-label') ?? '',
             path: dom.getAttribute('data-mention-path') ?? '',
             isDirectory: dom.classList.contains('composer-mention--directory'),
diff --git a/desktop/src/components/chat/composerMenuStyles.ts b/desktop/src/components/chat/composerMenuStyles.ts
new file mode 100644
index 00000000..6e9cad53
--- /dev/null
+++ b/desktop/src/components/chat/composerMenuStyles.ts
@@ -0,0 +1,32 @@
+/**
+ * Class recipes shared by the composer's popovers (model, effort, permission
+ * mode, the + menu, slash commands, @ references) — the 「素」 menu pattern in
+ * one place, so the six surfaces cannot drift into six slightly different
+ * menus again.
+ */
+
+/** White sheet, hairline, card corner, dropdown shadow, 4px inset. */
+export const COMPOSER_POPOVER =
+  'rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] p-1 shadow-[var(--shadow-dropdown)]'
+
+/** A menu row: 32px minimum, the row corner, 13px. Hover doubles as highlight. */
+export const COMPOSER_MENU_ITEM =
+  'flex min-h-8 w-full items-center gap-2.5 rounded-[var(--radius-sm)] px-2 py-1.5 text-left text-[13px] text-[var(--color-text-primary)] transition-colors hover:bg-[var(--color-surface-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]'
+
+/** The selected/highlighted row keeps the hover fill at rest. */
+export const COMPOSER_MENU_ITEM_ACTIVE = 'bg-[var(--color-surface-hover)]'
+
+/** Group heading: 11px semibold tertiary, sentence case. */
+export const COMPOSER_MENU_SECTION =
+  'px-2 pb-1 pt-2 text-[11px] font-semibold text-[var(--color-text-tertiary)]'
+
+/** Hairline between groups inside a menu. */
+export const COMPOSER_MENU_SEPARATOR = 'mx-1 my-1 h-px bg-[var(--color-border)]'
+
+/** Keyboard hint chip: mono 11px, 18px tall, chip corner, white ground. */
+export const COMPOSER_KBD =
+  'inline-flex h-[18px] min-w-[18px] shrink-0 items-center justify-center rounded-[var(--radius-xs)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] px-1 font-mono text-[11px] text-[var(--color-text-tertiary)]'
+
+/** A 28px toolbar control in the composer's bottom row. */
+export const COMPOSER_TOOLBAR_CONTROL =
+  'inline-flex h-7 items-center gap-1.5 rounded-[var(--radius-sm)] px-2 text-xs text-[var(--color-text-secondary)] transition-colors hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] disabled:cursor-not-allowed disabled:opacity-50'
diff --git a/desktop/src/components/chat/composerOverlayParity.test.ts b/desktop/src/components/chat/composerOverlayParity.test.ts
index 4714c317..d046b95d 100644
--- a/desktop/src/components/chat/composerOverlayParity.test.ts
+++ b/desktop/src/components/chat/composerOverlayParity.test.ts
@@ -11,11 +11,13 @@ import { describe, expect, it } from 'vitest'
  * shipped at `--radius-lg` in one and `--radius-xl` in the other, and only a
  * walkthrough that opened both in the same session caught it.
  *
- * The panels above the composer row that the handoff specced directly (the
- * context, effort, branch and worktree popovers) all sit at the card step, so
- * that is the corner the whole composer stack is held to here.
+ * Every popover above the composer row (「素」: model, effort, permission
+ * mode, the + menu, slash commands, references, context) is a menu sheet at
+ * the card corner, `--radius-lg`; only the composer card itself is `xl`. The
+ * shared recipe lives in `composerMenuStyles.ts`, so a component may either
+ * use `COMPOSER_POPOVER` or spell the panel inline — both are held here.
  */
-const OVERLAY_RADIUS = 'rounded-[var(--radius-xl)]'
+const OVERLAY_RADIUS = 'rounded-[var(--radius-lg)]'
 
 function source(relativePath: string): string {
   return readFileSync(fileURLToPath(new URL(relativePath, import.meta.url)), 'utf8')
@@ -29,6 +31,7 @@ const COMPOSERS = {
   ComposerCapabilityMenu: source('./ComposerCapabilityMenu.tsx'),
 }
 const SLASH_COMMAND_MENU = source('./SlashCommandMenu.tsx')
+const MENU_STYLES = source('./composerMenuStyles.ts')
 
 /** Every className string that also carries a floating-panel background. */
 function overlayPanelClassNames(code: string): string[] {
@@ -50,7 +53,8 @@ describe('composer overlay chrome', () => {
         return
       }
 
-      expect(panels.length).toBeGreaterThan(0)
+      const sharedRecipeUses = (code.match(/\bCOMPOSER_POPOVER\b/g) ?? []).length
+      expect(panels.length + sharedRecipeUses).toBeGreaterThan(0)
       for (const panel of panels) {
         expect(panel, `${name} renders a panel at a corner other than ${OVERLAY_RADIUS}`)
           .toContain(OVERLAY_RADIUS)
@@ -58,6 +62,13 @@ describe('composer overlay chrome', () => {
     })
   }
 
+  it('holds the shared popover recipe to the same corner, edge and fill', () => {
+    const recipe = /export const COMPOSER_POPOVER =\s*'([^']+)'/.exec(MENU_STYLES)?.[1] ?? ''
+    for (const token of [OVERLAY_RADIUS, 'border-[var(--color-border)]', 'bg-[var(--color-surface-container-lowest)]', 'shadow-[var(--shadow-dropdown)]']) {
+      expect(recipe).toContain(token)
+    }
+  })
+
   it('renders the same slash menu and capability menu in both composers', () => {
     for (const [name, code] of Object.entries({
       ChatInput: COMPOSERS.ChatInput,
diff --git a/desktop/src/components/chat/toolCallPresentation.test.ts b/desktop/src/components/chat/toolCallPresentation.test.ts
new file mode 100644
index 00000000..c03b74f8
--- /dev/null
+++ b/desktop/src/components/chat/toolCallPresentation.test.ts
@@ -0,0 +1,115 @@
+import { describe, expect, it } from 'vitest'
+import { translate } from '../../i18n'
+import {
+  countDiffLines,
+  countReadLines,
+  hasToolVerb,
+  parseSearchResult,
+  parseShellExitCode,
+  parseTodos,
+  toolVerb,
+} from './toolCallPresentation'
+
+const zh = (key: Parameters<typeof translate>[1], params?: Record<string, string | number>) => translate('zh', key, params)
+
+describe('toolVerb', () => {
+  it('leads a row with a verb, never the raw tool name', () => {
+    expect(toolVerb('Grep', zh)).toBe('搜索')
+    expect(toolVerb('Read', zh)).toBe('读取')
+    expect(toolVerb('Bash', zh)).toBe('运行')
+    expect(toolVerb('TodoWrite', zh)).toBe('更新任务清单')
+    expect(toolVerb('TodoWrite', zh)).not.toContain('TodoWrite')
+  })
+
+  it('keeps an unknown tool its own name, since that is all that says what it is', () => {
+    expect(hasToolVerb('mcp__linear__create_issue')).toBe(false)
+    expect(toolVerb('mcp__linear__create_issue', zh)).toBe('mcp__linear__create_issue')
+  })
+})
+
+describe('countDiffLines', () => {
+  it('does not count a deletion for a brand-new file', () => {
+    // Write diffs against ''. Splitting '' yields [''], which used to report a
+    // phantom "−1" on every new file.
+    expect(countDiffLines('', 'a\nb\nc')).toEqual({ additions: 3, deletions: 0 })
+  })
+
+  it('counts changed lines on both sides', () => {
+    expect(countDiffLines('a\nb\nc', 'a\nB\nc\nd')).toEqual({ additions: 2, deletions: 1 })
+  })
+})
+
+describe('parseSearchResult', () => {
+  it('reads content-mode grep lines into file:line rows', () => {
+    const parsed = parseSearchResult('src/a.ts:12:const x = 1\nsrc/a.ts:30:x += 1\nsrc/b.ts:4:return x')
+    expect(parsed).toEqual({
+      fileCount: 2,
+      matchCount: 3,
+      rows: [
+        { file: 'src/a.ts', line: 12, code: 'const x = 1' },
+        { file: 'src/a.ts', line: 30, code: 'x += 1' },
+        { file: 'src/b.ts', line: 4, code: 'return x' },
+      ],
+    })
+  })
+
+  it('skips the separators between context groups', () => {
+    expect(parseSearchResult('a.ts:1:one\n--\nb.ts:9:two')?.matchCount).toBe(2)
+  })
+
+  it('reads a files-with-matches list under its banner', () => {
+    const parsed = parseSearchResult('Found 2 files\n/repo/src/a.ts\n/repo/src/b.ts')
+    expect(parsed?.fileCount).toBe(2)
+    expect(parsed?.matchCount).toBeUndefined()
+    expect(parsed?.rows.map((row) => row.file)).toEqual(['/repo/src/a.ts', '/repo/src/b.ts'])
+  })
+
+  it('reports an empty search as zero files', () => {
+    expect(parseSearchResult('No files found')).toEqual({ rows: [], fileCount: 0 })
+  })
+
+  it('gives up on text it does not recognise, so the raw output still shows', () => {
+    expect(parseSearchResult('error: regex parse error:\n    (unclosed')).toBeNull()
+  })
+})
+
+describe('parseShellExitCode', () => {
+  it('reads the code the CLI reports for a failed command', () => {
+    expect(parseShellExitCode('fatal: bad revision\nExit code 128', true)).toBe(128)
+  })
+
+  it('treats a successful result as exit 0', () => {
+    expect(parseShellExitCode('ok', false)).toBe(0)
+  })
+
+  it('does not invent a code for a failure that carries none', () => {
+    expect(parseShellExitCode('InputValidationError', true)).toBeNull()
+  })
+})
+
+describe('parseTodos', () => {
+  it('keeps each item and its state, defaulting unknown states to pending', () => {
+    expect(parseTodos({
+      todos: [
+        { content: 'Read the form', status: 'completed' },
+        { content: 'Extract validators', status: 'in_progress' },
+        { content: 'Add tests', status: 'whatever' },
+        { content: '', status: 'pending' },
+      ],
+    })).toEqual([
+      { content: 'Read the form', status: 'completed' },
+      { content: 'Extract validators', status: 'in_progress' },
+      { content: 'Add tests', status: 'pending' },
+    ])
+  })
+
+  it('returns null when the input carries no list', () => {
+    expect(parseTodos({})).toBeNull()
+  })
+})
+
+describe('countReadLines', () => {
+  it('ignores the reminders appended to a Read result', () => {
+    expect(countReadLines('1\tconst a = 1\n2\tconst b = 2\n<system-reminder>\nnote\n</system-reminder>\n')).toBe(2)
+  })
+})
diff --git a/desktop/src/components/chat/toolCallPresentation.ts b/desktop/src/components/chat/toolCallPresentation.ts
new file mode 100644
index 00000000..9eb21b38
--- /dev/null
+++ b/desktop/src/components/chat/toolCallPresentation.ts
@@ -0,0 +1,152 @@
+import type { TranslationKey } from '../../i18n'
+
+type Translate = (key: TranslationKey, params?: Record<string, string | number>) => string
+
+/**
+ * The verb a timeline row leads with. A row reads "读取 MessageList.tsx", not
+ * "Read MessageList.tsx": the raw tool name is an implementation detail the
+ * reader should not have to decode (`TodoWrite` least of all), so it moves to
+ * the row's tooltip and the trajectory view. Tools with no verb here keep their
+ * own name — an MCP tool's name is the only thing that says what it is.
+ */
+const TOOL_VERB_KEYS: Record<string, TranslationKey> = {
+  Grep: 'toolVerb.search',
+  Glob: 'toolVerb.search',
+  ToolSearch: 'toolVerb.search',
+  Read: 'toolVerb.read',
+  Edit: 'toolVerb.edit',
+  MultiEdit: 'toolVerb.edit',
+  NotebookEdit: 'toolVerb.edit',
+  Write: 'toolVerb.create',
+  Bash: 'toolVerb.run',
+  PowerShell: 'toolVerb.run',
+  TodoWrite: 'toolVerb.updateTodos',
+  TaskCreate: 'toolVerb.createTask',
+  TaskUpdate: 'toolVerb.updateTask',
+  TaskList: 'toolVerb.viewTasks',
+  TaskGet: 'toolVerb.viewTasks',
+  WebSearch: 'toolVerb.searchWeb',
+  WebFetch: 'toolVerb.fetchWeb',
+  Agent: 'toolVerb.agent',
+  Skill: 'toolVerb.skill',
+}
+
+export function toolVerb(toolName: string, t: Translate): string {
+  const key = TOOL_VERB_KEYS[toolName]
+  return key ? t(key) : toolName
+}
+
+/** Whether the row shows a translated verb rather than the tool's own name. */
+export function hasToolVerb(toolName: string): boolean {
+  return toolName in TOOL_VERB_KEYS
+}
+
+export type DiffLineCounts = { additions: number; deletions: number }
+
+/**
+ * Line-level change counts for an Edit/Write preview. Deliberately the same
+ * positional comparison the diff header has always used, so the `+N −N` on the
+ * row and the one on the diff block it opens can never disagree.
+ */
+export function countDiffLines(oldString: string, newString: string): DiffLineCounts {
+  const oldLines = oldString.length === 0 ? [] : oldString.split('\n')
+  const newLines = newString.split('\n')
+  return {
+    additions: newLines.filter((line, index) => line !== (oldLines[index] ?? null)).length,
+    deletions: oldLines.filter((line, index) => line !== (newLines[index] ?? null)).length,
+  }
+}
+
+export type GrepRow = { file: string; line?: number; code?: string }
+
+export type GrepResult = {
+  rows: GrepRow[]
+  fileCount: number
+  matchCount?: number
+}
+
+const GREP_CONTENT_LINE = /^(.+?):(\d+)[:-](.*)$/
+const FOUND_FILES_LINE = /^Found (\d+) files?\b/i
+const NO_MATCHES_LINE = /^No (?:files|matches) found\b/i
+
+/**
+ * Read a Grep/Glob result into rows the timeline can lay out as `file:line`
+ * plus code. Recognises the three shapes the CLI produces — content lines
+ * (`path:12:code`), a file list under a `Found N files` banner, and a bare path
+ * list from Glob. Anything else returns null and falls back to the plain output
+ * block, so an unexpected format still shows the model's exact text.
+ */
+export function parseSearchResult(text: string): GrepResult | null {
+  const lines = text.replace(/\r\n/g, '\n').split('\n').map((line) => line.trimEnd()).filter(Boolean)
+  if (lines.length === 0) return null
+  if (lines.length === 1 && NO_MATCHES_LINE.test(lines[0]!)) return { rows: [], fileCount: 0 }
+
+  // `--` separates context groups in `-C` output; it is not a row.
+  const contentLines = lines.filter((line) => line !== '--')
+  const contentRows: GrepRow[] = []
+  for (const line of contentLines) {
+    const match = GREP_CONTENT_LINE.exec(line)
+    if (!match) break
+    contentRows.push({ file: match[1]!, line: Number(match[2]), code: match[3] ?? '' })
+  }
+  if (contentRows.length > 0 && contentRows.length === contentLines.length) {
+    return {
+      rows: contentRows,
+      fileCount: new Set(contentRows.map((row) => row.file)).size,
+      matchCount: contentRows.length,
+    }
+  }
+
+  const banner = FOUND_FILES_LINE.exec(lines[0]!)
+  const pathLines = banner ? lines.slice(1) : lines
+  if (pathLines.length > 0 && pathLines.every(looksLikePath)) {
+    return {
+      rows: pathLines.map((file) => ({ file })),
+      fileCount: banner ? Number(banner[1]) : pathLines.length,
+    }
+  }
+  return null
+}
+
+function looksLikePath(line: string): boolean {
+  return !/\s{2,}/.test(line) && /[/\\.]/.test(line) && !line.startsWith('(')
+}
+
+/** `Exit code 2` heads a failed shell result; a success carries no code at all. */
+export function parseShellExitCode(text: string, isError: boolean): number | null {
+  const match = /(?:^|\n)Exit code (\d+)\b/.exec(text)
+  if (match) return Number(match[1])
+  return isError ? null : 0
+}
+
+export type TodoItem = { content: string; status: 'pending' | 'in_progress' | 'completed' }
+
+export function parseTodos(input: Record<string, unknown>): TodoItem[] | null {
+  if (!Array.isArray(input.todos)) return null
+  const todos: TodoItem[] = []
+  for (const entry of input.todos) {
+    if (!entry || typeof entry !== 'object') continue
+    const record = entry as Record<string, unknown>
+    const content = typeof record.content === 'string' ? record.content : ''
+    if (!content) continue
+    const status = record.status === 'completed' || record.status === 'in_progress' ? record.status : 'pending'
+    todos.push({ content, status })
+  }
+  return todos
+}
+
+/** Line count of a Read result, ignoring the reminders the CLI appends. */
+export function countReadLines(text: string): number {
+  const body = text.replace(/<system-reminder>[\s\S]*?<\/system-reminder>/g, '').trimEnd()
+  if (!body) return 0
+  return body.split('\n').length
+}
+
+export function formatCountLabel(
+  count: number,
+  singular: TranslationKey,
+  plural: TranslationKey,
+  t: Translate,
+): string {
+  return t(count === 1 ? singular : plural, { count: new Intl.NumberFormat().format(count) })
+}
diff --git a/desktop/src/components/composite/DirectoryPicker.test.tsx b/desktop/src/components/composite/DirectoryPicker.test.tsx
index 09906052..e1a780e8 100644
--- a/desktop/src/components/composite/DirectoryPicker.test.tsx
+++ b/desktop/src/components/composite/DirectoryPicker.test.tsx
@@ -144,10 +144,9 @@ describe('DirectoryPicker', () => {
 
     const trigger = screen.getByRole('button')
     expect(trigger).toHaveTextContent('project')
-    // The workbar trigger shares the launch row's outlined-pill recipe (see
-    // RepositoryLaunchControls.workbarButtonClassName): the directory, branch
-    // and worktree chips sit on one row and must read as one family.
-    expect(trigger.className).toContain('rounded-[var(--radius-lg)]')
+    // The workbar trigger is a form field in ProjectEditorModal, where it stands
+    // in for a secondary button: the same h-9 hairline-bordered 8px block.
+    expect(trigger.className).toContain('rounded-[var(--radius-md)]')
     expect(trigger.className).toContain('border-[var(--color-border)]')
     expect(trigger.className).not.toContain('rounded-full')
   })
diff --git a/desktop/src/components/composite/DirectoryPicker.tsx b/desktop/src/components/composite/DirectoryPicker.tsx
index 42418b57..30f55e96 100644
--- a/desktop/src/components/composite/DirectoryPicker.tsx
+++ b/desktop/src/components/composite/DirectoryPicker.tsx
@@ -1,5 +1,17 @@
 import { useState, useEffect, useId, useMemo, useRef, useCallback } from 'react'
 import { createPortal } from 'react-dom'
+import {
+  ArrowUp,
+  Check,
+  ChevronDown,
+  ChevronLeft,
+  Folder,
+  FolderGit2,
+  FolderOpen,
+  FolderPlus,
+  Plus,
+  Search,
+} from 'lucide-react'
 import { useDismissable } from '@/hooks/useDismissable'
 import { sessionsApi, type RecentProject } from '../../api/sessions'
 import { filesystemApi } from '../../api/filesystem'
@@ -81,22 +93,21 @@ function RecentProjectItem({
       aria-selected={isSelected}
       onMouseEnter={onHover}
       onClick={() => onSelect(project.realPath)}
-      className={`flex w-full items-center gap-3 px-4 text-left transition-colors hover:bg-[var(--color-surface-hover)] ${
-        touch ? 'min-h-[72px] py-3.5' : 'py-3'
+      // Selected and keyboard-highlighted share the hover fill; the terracotta
+      // check on the right is what marks the current project.
+      className={`flex w-full items-center gap-2.5 rounded-[var(--radius-sm)] px-2 text-left transition-colors hover:bg-[var(--color-surface-hover)] ${
+        touch ? 'min-h-[56px] py-2.5' : 'min-h-8 py-1.5'
       } ${
-        isSelected ? 'bg-[var(--color-surface-selected)]' : highlighted ? 'bg-[var(--color-surface-hover)]' : ''
+        isSelected || highlighted ? 'bg-[var(--color-surface-hover)]' : ''
       }`}
     >
       {project.isGit ? (
-        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--color-text-secondary)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="w-5 flex-shrink-0">
-          <circle cx="18" cy="18" r="3" /><circle cx="6" cy="6" r="3" />
-          <path d="M13 6h3a2 2 0 0 1 2 2v7" /><line x1="6" y1="9" x2="6" y2="21" />
-        </svg>
+        <FolderGit2 size={16} strokeWidth={1.75} aria-hidden="true" className="shrink-0 text-[var(--color-text-tertiary)]" />
       ) : (
-        <span className="material-symbols-outlined w-5 flex-shrink-0 text-center text-[20px] text-[var(--color-text-secondary)]">folder</span>
+        <Folder size={16} strokeWidth={1.75} aria-hidden="true" className="shrink-0 text-[var(--color-text-tertiary)]" />
       )}
       <div className="min-w-0 flex-1">
-        <div className="truncate text-sm font-semibold text-[var(--color-text-primary)]">
+        <div className="truncate text-[13px] font-medium text-[var(--color-text-primary)]">
           {label}
         </div>
         <div className="truncate font-mono text-[11px] text-[var(--color-text-tertiary)]">
@@ -104,9 +115,7 @@ function RecentProjectItem({
         </div>
       </div>
       {isSelected && (
-        <span className="material-symbols-outlined flex-shrink-0 text-[18px] text-[var(--color-brand)]" style={{ fontVariationSettings: "'FILL' 1" }}>
-          check
-        </span>
+        <Check size={14} strokeWidth={2} aria-hidden="true" className="shrink-0 text-[var(--color-brand)]" />
       )}
     </button>
   )
@@ -301,34 +310,43 @@ export function RecentProjectsPanel({
     }
   }
 
+  const actionRowClassName = `flex w-full items-center gap-2.5 rounded-[var(--radius-sm)] px-2 text-left transition-colors hover:bg-[var(--color-surface-hover)] focus-visible:bg-[var(--color-surface-hover)] focus-visible:outline-none ${
+    touch ? 'min-h-11 py-2' : 'min-h-8 py-1.5'
+  }`
+
   if (mode === 'browse') {
     return (
       <>
-        <div className="flex flex-wrap items-center gap-1 border-b border-[var(--color-border)] px-3 py-2">
-          <Button variant="link" size="xs" className="mr-2" onClick={() => setMode('recent')}>
-            {'← ' + t('dirPicker.recent')}
-          </Button>
-          <button onClick={() => loadBrowseDir('/')} className="text-[10px] text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)]">/</button>
+        <div className={`flex flex-wrap items-center gap-1 border-b border-[var(--color-border)] pb-1 ${touch ? 'px-3 pt-1' : 'px-1'}`}>
+          <button
+            type="button"
+            onClick={() => setMode('recent')}
+            className="mr-1 inline-flex h-7 items-center gap-1 rounded-[var(--radius-sm)] px-1.5 text-xs font-medium text-[var(--color-text-secondary)] transition-colors hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]"
+          >
+            <ChevronLeft size={14} strokeWidth={1.75} aria-hidden="true" />
+            {t('dirPicker.recent')}
+          </button>
+          <button onClick={() => loadBrowseDir('/')} className="font-mono text-[11px] text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)]">/</button>
           {browsePath.split('/').filter(Boolean).map((seg, i, arr) => (
             <span key={i} className="flex items-center gap-1">
-              <span className="text-[10px] text-[var(--color-text-tertiary)]">/</span>
+              <span className="font-mono text-[11px] text-[var(--color-text-tertiary)]">/</span>
               <button
                 onClick={() => loadBrowseDir('/' + arr.slice(0, i + 1).join('/'))}
-                className="text-[10px] text-[var(--color-text-accent)] hover:underline"
+                className="font-mono text-[11px] text-[var(--color-text-accent)] hover:underline"
               >{seg}</button>
             </span>
           ))}
         </div>
 
-        <div className={`${touch ? '' : 'max-h-[240px]'} overflow-y-auto`}>
+        <div className={`${touch ? 'px-1.5' : 'max-h-[240px]'} overflow-y-auto py-1`}>
           {loading ? (
             <LoadingState label={t('common.loading')} variant="block" size="sm" />
           ) : (
             <>
               {browseParent && browseParent !== browsePath && (
-                <button onClick={() => loadBrowseDir(browseParent)} className="flex w-full items-center gap-2 px-3 py-2 text-left hover:bg-[var(--color-surface-hover)]">
-                  <span className="material-symbols-outlined text-[16px] text-[var(--color-text-tertiary)]">arrow_upward</span>
-                  <span className="text-xs text-[var(--color-text-secondary)]">..</span>
+                <button onClick={() => loadBrowseDir(browseParent)} className="flex min-h-[30px] w-full items-center gap-2 rounded-[var(--radius-sm)] px-2 text-left transition-colors hover:bg-[var(--color-surface-hover)]">
+                  <ArrowUp size={14} strokeWidth={1.75} aria-hidden="true" className="shrink-0 text-[var(--color-text-tertiary)]" />
+                  <span className="text-[13px] text-[var(--color-text-secondary)]">..</span>
                 </button>
               )}
               {browseEntries.length === 0 ? (
@@ -336,15 +354,15 @@ export function RecentProjectsPanel({
               ) : browseEntries.map((entry) => (
                 <div
                   key={entry.path}
-                  className="flex w-full items-center gap-2 px-3 py-2 hover:bg-[var(--color-surface-hover)]"
+                  className="flex min-h-[30px] w-full items-center gap-2 rounded-[var(--radius-sm)] px-2 transition-colors hover:bg-[var(--color-surface-hover)]"
                 >
                   <button
                     type="button"
                     onClick={() => loadBrowseDir(entry.path)}
                     className="flex min-w-0 flex-1 items-center gap-2 text-left"
                   >
-                    <span className="material-symbols-outlined text-[16px] text-[var(--color-text-tertiary)]">folder</span>
-                    <span className="min-w-0 flex-1 truncate text-xs text-[var(--color-text-primary)]">{entry.name}</span>
+                    <Folder size={14} strokeWidth={1.75} aria-hidden="true" className="shrink-0 text-[var(--color-text-tertiary)]" />
+                    <span className="min-w-0 flex-1 truncate text-[13px] text-[var(--color-text-primary)]">{entry.name}</span>
                   </button>
                   <Button variant="link" size="xs" onClick={() => handleSelect(entry.path)}>
                     {t('common.select')}
@@ -355,9 +373,9 @@ export function RecentProjectsPanel({
           )}
         </div>
 
-        <div className="flex items-center justify-between border-t border-[var(--color-border)] px-3 py-2">
-          <span className="truncate font-mono text-[10px] text-[var(--color-text-tertiary)]">{browsePath}</span>
-          <Button size="base" onClick={() => handleSelect(browsePath)}>
+        <div className={`flex items-center justify-between gap-3 border-t border-[var(--color-border)] pt-1 ${touch ? 'px-3 pb-2' : 'px-1'}`}>
+          <span className="min-w-0 truncate font-mono text-[11px] text-[var(--color-text-tertiary)]">{browsePath}</span>
+          <Button size="sm" className="shrink-0" onClick={() => handleSelect(browsePath)}>
             {t('dirPicker.useThisFolder')}
           </Button>
         </div>
@@ -368,13 +386,15 @@ export function RecentProjectsPanel({
   return (
     <>
       {showRecentHeading && (
-        <div className="px-4 py-2 text-[10px] font-bold uppercase tracking-widest text-[var(--color-outline)]">
+        <div className="px-2 pb-1 pt-2 text-[11px] font-semibold text-[var(--color-text-tertiary)]">
           {t('dirPicker.recent')}
         </div>
       )}
-      <div className="px-3 pb-2">
-        <div className="flex items-center gap-2 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)] px-3 py-2">
-          <span aria-hidden="true" className="material-symbols-outlined shrink-0 text-[16px] text-[var(--color-text-tertiary)]">search</span>
+      {/* The menu-search row: a bare field over a hairline, not a boxed input
+          inside a box. */}
+      <div className={`mb-1 border-b border-[var(--color-border)] ${touch ? 'px-3' : ''}`}>
+        <div className="flex h-8 items-center gap-2 px-2">
+          <Search size={14} strokeWidth={1.75} aria-hidden="true" className="shrink-0 text-[var(--color-text-tertiary)]" />
           <input
             id={searchInputId}
             ref={searchRef}
@@ -386,7 +406,7 @@ export function RecentProjectsPanel({
             placeholder={t('dirPicker.searchProjects')}
             autoComplete="off"
             spellCheck={false}
-            className="min-w-0 flex-1 bg-transparent text-sm text-[var(--color-text-primary)] outline-none placeholder:text-[var(--color-text-tertiary)]"
+            className="min-w-0 flex-1 bg-transparent text-[13px] text-[var(--color-text-primary)] outline-none placeholder:text-[var(--color-text-tertiary)]"
           />
         </div>
       </div>
@@ -394,7 +414,7 @@ export function RecentProjectsPanel({
         id={listboxId}
         role="listbox"
         aria-label={t('dirPicker.selectProject')}
-        className={`${touch ? '' : 'max-h-[300px]'} overflow-y-auto`}
+        className={`${touch ? 'px-1.5' : 'max-h-[300px]'} overflow-y-auto`}
       >
         {loading ? (
           <LoadingState label={t('common.loading')} variant="block" size="sm" />
@@ -420,23 +440,23 @@ export function RecentProjectsPanel({
       </div>
       {/* Action rows stay out of the listbox: an `option` role would announce
           them as projects. */}
-      <div className="border-t border-[var(--color-border)]">
+      <div className={`mt-1 border-t border-[var(--color-border)] pt-1 ${touch ? 'px-1.5 pb-1.5' : ''}`}>
         {onCreateProject && (
           <button
             type="button"
             onClick={onCreateProject}
-            className="flex w-full items-center gap-3 px-4 py-3 text-left transition-colors hover:bg-[var(--color-surface-hover)]"
+            className={actionRowClassName}
           >
-            <span className="material-symbols-outlined text-[20px] text-[var(--color-text-tertiary)]">add</span>
-            <span className="text-sm text-[var(--color-text-secondary)]">{t('sidebar.newProject')}</span>
+            <Plus size={16} strokeWidth={1.75} aria-hidden="true" className="shrink-0 text-[var(--color-text-tertiary)]" />
+            <span className="text-[13px] text-[var(--color-text-primary)]">{t('sidebar.newProject')}</span>
           </button>
         )}
         <button
           onClick={handleChooseFolder}
-          className="flex w-full items-center gap-3 px-4 py-3 text-left transition-colors hover:bg-[var(--color-surface-hover)]"
+          className={actionRowClassName}
         >
-          <span className="material-symbols-outlined text-[20px] text-[var(--color-text-tertiary)]">create_new_folder</span>
-          <span className="text-sm text-[var(--color-text-secondary)]">{t('dirPicker.chooseFolder')}</span>
+          <FolderPlus size={16} strokeWidth={1.75} aria-hidden="true" className="shrink-0 text-[var(--color-text-tertiary)]" />
+          <span className="text-[13px] text-[var(--color-text-primary)]">{t('dirPicker.chooseFolder')}</span>
         </button>
       </div>
     </>
@@ -510,18 +530,22 @@ export function DirectoryPicker({ value, onChange, variant = 'chip', isGitProjec
   const isWorkbar = variant === 'workbar'
   const selectedLabel = selectedDisplayName || selectedProject?.repoName || selectedProject?.projectName || projectNameFromPath(value)
   const showGitIcon = selectedProject?.isGit || isGitProject
+  // The workbar trigger is a form field (ProjectEditorModal's folder row), so it
+  // takes the geometry of the secondary button it alternates with there: h-9,
+  // 8px corner, a hairline that firms up on hover.
+  const workbarTriggerClassName = (isMobileBrowser ? 'min-h-11 ' : '') + 'group inline-flex h-9 min-w-0 items-center gap-2 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] px-3 text-sm font-medium leading-none text-[var(--color-text-primary)] transition-[background-color,color,border-color] duration-150 ease-out hover:border-[var(--color-outline)] hover:bg-[var(--color-surface-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface)] disabled:cursor-not-allowed disabled:opacity-50'
   const triggerClassName = isWorkbar
-    ? 'max-w-full ' + (isMobileBrowser ? 'min-h-11 ' : '') + 'group inline-flex h-9 min-w-0 items-center gap-2 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface)] px-3.5 text-[13.5px] font-medium leading-none text-[var(--color-text-primary)] transition-[background-color,color,border-color] duration-150 ease-out hover:border-[var(--color-outline)] hover:bg-[var(--color-surface-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface)] disabled:cursor-not-allowed disabled:opacity-50'
-    : 'flex items-center gap-2 px-3 py-1.5 bg-[var(--color-surface-container-low)] hover:bg-[var(--color-surface-hover)] rounded-full text-xs transition-colors border border-[var(--color-border)]'
+    ? 'max-w-full ' + workbarTriggerClassName
+    : 'inline-flex h-7 max-w-full items-center gap-1.5 rounded-[var(--radius-sm)] border border-[var(--color-border)] bg-[var(--color-surface)] px-2 text-xs text-[var(--color-text-secondary)] transition-colors hover:border-[var(--color-outline)] hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]'
   const emptyTriggerClassName = isWorkbar
-    ? (isMobileBrowser ? 'min-h-11 ' : '') + 'group inline-flex h-9 min-w-0 items-center gap-2 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface)] px-3.5 text-[13.5px] font-medium leading-none text-[var(--color-text-primary)] transition-[background-color,color,border-color] duration-150 ease-out hover:border-[var(--color-outline)] hover:bg-[var(--color-surface-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface)] disabled:cursor-not-allowed disabled:opacity-50'
-    : 'flex items-center gap-2 text-xs text-[var(--color-text-tertiary)] hover:text-[var(--color-text-secondary)] transition-colors'
+    ? workbarTriggerClassName
+    : 'inline-flex h-7 items-center gap-1.5 rounded-[var(--radius-sm)] px-1.5 text-xs text-[var(--color-text-tertiary)] transition-colors hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]'
 
   const containerClassName = isWorkbar
     ? `relative min-w-0 ${isMobileBrowser ? 'flex-1' : 'max-w-[320px] shrink'}`
     : 'relative'
 
-  const dropdownClassName = 'overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] shadow-[var(--shadow-dropdown)]'
+  const dropdownClassName = 'overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] p-1 shadow-[var(--shadow-dropdown)]'
   const dropdownStyle = {
     position: 'fixed' as const,
     left: dropdownPos?.left,
@@ -555,16 +579,14 @@ export function DirectoryPicker({ value, onChange, variant = 'chip', isGitProjec
           title={value}
         >
           {showGitIcon ? (
-            <svg width="15" height="15" viewBox="0 0 16 16" fill="currentColor" className="shrink-0 text-[var(--color-text-secondary)]">
-              <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
-            </svg>
+            <FolderGit2 size={isWorkbar ? 16 : 14} strokeWidth={1.75} aria-hidden="true" className="shrink-0 text-[var(--color-text-tertiary)]" />
           ) : (
-            <span aria-hidden="true" className={`material-symbols-outlined shrink-0 ${isWorkbar ? 'text-[17px]' : 'text-[14px]'} text-[var(--color-text-secondary)]`}>folder</span>
+            <Folder size={isWorkbar ? 16 : 14} strokeWidth={1.75} aria-hidden="true" className="shrink-0 text-[var(--color-text-tertiary)]" />
           )}
           <span className="min-w-0 flex-1 truncate text-[var(--color-text-primary)]">
             {selectedLabel}
           </span>
-          <span className={`${isWorkbar ? 'text-[15px]' : 'text-[12px]'} material-symbols-outlined shrink-0 text-[var(--color-text-tertiary)]`}>expand_more</span>
+          <ChevronDown size={isWorkbar ? 16 : 14} strokeWidth={1.75} aria-hidden="true" className="shrink-0 text-[var(--color-text-tertiary)]" />
         </button>
       ) : (
         <button
@@ -573,7 +595,7 @@ export function DirectoryPicker({ value, onChange, variant = 'chip', isGitProjec
           className={emptyTriggerClassName}
           title={t('dirPicker.selectProject')}
         >
-          <span aria-hidden="true" className={`material-symbols-outlined shrink-0 ${isWorkbar ? 'text-[17px]' : 'text-[14px]'}`}>folder_open</span>
+          <FolderOpen size={isWorkbar ? 16 : 14} strokeWidth={1.75} aria-hidden="true" className="shrink-0" />
           <span className="min-w-0 truncate">{t('dirPicker.selectProject')}</span>
         </button>
       )}
diff --git a/desktop/src/components/composite/OpenWithMenu.tsx b/desktop/src/components/composite/OpenWithMenu.tsx
index 3c41234d..6b76a6b2 100644
--- a/desktop/src/components/composite/OpenWithMenu.tsx
+++ b/desktop/src/components/composite/OpenWithMenu.tsx
@@ -17,11 +17,11 @@ type Props = {
 }
 
 function ItemIcon({ item }: { item: OpenWithItem }) {
-  if (item.target) return <TargetIcon target={item.target} size={20} />
-  if (item.icon === 'in-app-browser') return <Globe size={18} strokeWidth={1.9} />
-  if (item.icon === 'preview') return <FileText size={18} strokeWidth={1.9} />
-  if (item.icon === 'copy') return <Copy size={18} strokeWidth={1.9} />
-  return <ExternalLink size={18} strokeWidth={1.9} />
+  if (item.target) return <TargetIcon target={item.target} size={16} />
+  if (item.icon === 'in-app-browser') return <Globe size={16} strokeWidth={1.75} />
+  if (item.icon === 'preview') return <FileText size={16} strokeWidth={1.75} />
+  if (item.icon === 'copy') return <Copy size={16} strokeWidth={1.75} />
+  return <ExternalLink size={16} strokeWidth={1.75} />
 }
 
 export function OpenWithMenu({ items, anchor, onClose, triggerEl }: Props) {
@@ -61,21 +61,21 @@ export function OpenWithMenu({ items, anchor, onClose, triggerEl }: Props) {
     <div
       ref={ref}
       role="menu"
-      className="min-w-[min(220px,calc(100vw-16px))] max-w-[min(300px,calc(100vw-16px))] overflow-y-auto overscroll-contain rounded-[12px] border border-[var(--color-border)] bg-[var(--color-surface)] py-1 shadow-[var(--shadow-dropdown)]"
+      className="min-w-[min(220px,calc(100vw-16px))] max-w-[min(300px,calc(100vw-16px))] overflow-y-auto overscroll-contain rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] p-1 shadow-[var(--shadow-dropdown)]"
       style={{ ...positionStyle, zIndex: 'var(--z-dropdown)' }}
     >
       {items.map((item) => (
         <Fragment key={item.id}>
           {item.separatorBefore && (
-            <div className="my-1 border-t border-[var(--color-border)]" role="separator" />
+            <div className="mx-1 my-1 border-t border-[var(--color-border)]" role="separator" />
           )}
           <button
             type="button"
             role="menuitem"
             onClick={() => { item.onSelect(); onClose() }}
-            className="flex w-full items-center gap-3 px-3 py-2.5 text-left text-sm font-medium text-[var(--color-text-primary)] transition-colors hover:bg-[var(--color-surface-hover)]"
+            className="flex min-h-8 w-full items-center gap-2.5 rounded-[var(--radius-sm)] px-2 py-1.5 text-left text-[13px] text-[var(--color-text-primary)] transition-colors hover:bg-[var(--color-surface-hover)] focus-visible:bg-[var(--color-surface-hover)] focus-visible:outline-none"
           >
-            <span className="flex h-6 w-6 items-center justify-center text-[var(--color-text-secondary)]"><ItemIcon item={item} /></span>
+            <span className="flex h-4 w-4 shrink-0 items-center justify-center text-[var(--color-text-tertiary)]"><ItemIcon item={item} /></span>
             <span className="min-w-0 truncate">{item.label}</span>
           </button>
         </Fragment>
diff --git a/desktop/src/components/composite/TargetIcon.tsx b/desktop/src/components/composite/TargetIcon.tsx
index d44f1ad5..245d2077 100644
--- a/desktop/src/components/composite/TargetIcon.tsx
+++ b/desktop/src/components/composite/TargetIcon.tsx
@@ -3,13 +3,13 @@ import { AppWindow, Code2, ExternalLink, FolderOpen } from 'lucide-react'
 import { apiGetBlob } from '../../api/client'
 import type { OpenTarget } from '../../stores/openTargetStore'
 
-export function getFallbackIcon(kind: OpenTarget['kind'], size = 17) {
+export function getFallbackIcon(kind: OpenTarget['kind'], size = 16) {
   if (kind === 'file_manager') {
-    return <FolderOpen size={size} strokeWidth={1.9} />
+    return <FolderOpen size={size} strokeWidth={1.75} />
   }
-  if (kind === 'application') return <AppWindow size={size} strokeWidth={1.9} />
-  if (kind === 'system_default') return <ExternalLink size={size} strokeWidth={1.9} />
-  return <Code2 size={size} strokeWidth={1.9} />
+  if (kind === 'application') return <AppWindow size={size} strokeWidth={1.75} />
+  if (kind === 'system_default') return <ExternalLink size={size} strokeWidth={1.75} />
+  return <Code2 size={size} strokeWidth={1.75} />
 }
 
 /**
@@ -87,5 +87,5 @@ export function TargetIcon({ target, size = 18 }: { target: OpenTarget; size?: n
     )
   }
 
-  return getFallbackIcon(target.kind, Math.max(16, size - 1))
+  return getFallbackIcon(target.kind, Math.min(18, Math.max(14, size)))
 }
diff --git a/desktop/src/components/computer-use/ComputerUseEnableDialog.tsx b/desktop/src/components/computer-use/ComputerUseEnableDialog.tsx
index 4c2b693f..421381d4 100644
--- a/desktop/src/components/computer-use/ComputerUseEnableDialog.tsx
+++ b/desktop/src/components/computer-use/ComputerUseEnableDialog.tsx
@@ -1,3 +1,4 @@
+import { TriangleAlert } from 'lucide-react'
 import { useTranslation } from '@/i18n'
 import { ActionDialog } from '@/components/ui/ActionDialog'
 
@@ -26,10 +27,10 @@ export function ComputerUseEnableDialog({
       width={500}
       loading={loading}
       body={(
-        <div className="space-y-4 text-sm leading-6 text-[var(--color-text-secondary)]">
-          <div className="flex items-start gap-3 rounded-[var(--radius-lg)] border border-[var(--color-warning)] bg-[var(--color-warning-container)] px-3 py-3 text-[var(--color-on-warning-container)]">
-            <span className="material-symbols-outlined mt-0.5 text-[20px] text-[var(--color-warning)]">warning</span>
-            <p className="font-semibold">{t('settings.computerUse.enableRiskSummary')}</p>
+        <div className="space-y-4 text-[13px] leading-[1.6] text-[var(--color-text-secondary)]">
+          <div className="flex items-start gap-2.5 rounded-[var(--radius-md)] bg-[var(--color-warning-container)] px-3 py-2.5 text-[var(--color-on-warning-container)]">
+            <TriangleAlert size={16} strokeWidth={1.75} aria-hidden="true" className="mt-0.5 shrink-0 text-[var(--color-warning)]" />
+            <p className="font-medium">{t('settings.computerUse.enableRiskSummary')}</p>
           </div>
           <ul className="list-disc space-y-1.5 pl-5">
             <li>{t('settings.computerUse.enableRiskScreen')}</li>
@@ -38,7 +39,7 @@ export function ComputerUseEnableDialog({
             <li>{t('settings.computerUse.enableRiskStop')}</li>
           </ul>
           {platform === 'darwin' && (
-            <p className="rounded-[var(--radius-lg)] bg-[var(--color-surface-container-low)] px-3 py-2 text-xs text-[var(--color-text-tertiary)]">
+            <p className="rounded-[var(--radius-md)] bg-[var(--color-surface-container)] px-3 py-2 text-xs leading-[1.5] text-[var(--color-text-tertiary)]">
               {t('settings.computerUse.enableRiskMacos')}
             </p>
           )}
diff --git a/desktop/src/components/connectors/ConnectorRow.test.tsx b/desktop/src/components/connectors/ConnectorRow.test.tsx
index 2d9aceaf..a216187b 100644
--- a/desktop/src/components/connectors/ConnectorRow.test.tsx
+++ b/desktop/src/components/connectors/ConnectorRow.test.tsx
@@ -23,6 +23,13 @@ it('omits the badge container when no type label is needed', () => {
   expect(container.querySelector('span.border')).toBeNull()
   expect(screen.getByRole('button', { name: 'Service' })).toBeInTheDocument()
 })
+it('shows the status as a toned badge and hovers by deepening the edge, not lifting', () => {
+  const { container } = render(<ConnectorRow id="test" name="Service" description="Search documents" status="Ready" statusTone="success" actionLabel="Details" added onDetails={vi.fn()} onAction={vi.fn()} />)
+  expect(screen.getByText('Ready').className).toContain('bg-[var(--color-success-container)]')
+  const card = container.querySelector('article')!
+  expect(card.className).toContain('hover:border-[var(--color-outline)]')
+  expect(card.className).not.toMatch(/translate-y|hover:shadow/)
+})
 it('renders an explicit management action while preserving access to details', () => {
   const details = vi.fn()
   const remove = vi.fn()
diff --git a/desktop/src/components/connectors/ConnectorRow.tsx b/desktop/src/components/connectors/ConnectorRow.tsx
index fa33bc40..be9ea30f 100644
--- a/desktop/src/components/connectors/ConnectorRow.tsx
+++ b/desktop/src/components/connectors/ConnectorRow.tsx
@@ -1,30 +1,35 @@
 import { useState, type ReactNode } from 'react'
+import { ChevronRight, Plus } from 'lucide-react'
+import { Badge, type Tone } from '@/components/ui/Badge'
 import { IconButton } from '@/components/ui/IconButton'
 
-export function ConnectorRow({ id, name, description, kind, status, actionLabel, added, onDetails, onAction, action }: {
+export function ConnectorRow({ id, name, description, kind, status, statusTone = 'neutral', actionLabel, added, onDetails, onAction, action }: {
   action?: ReactNode
   id: string
   name: string
   description: string
   kind?: string
   status?: string
+  /** The app-wide status vocabulary: working = info, needs you = warning, usable = success. */
+  statusTone?: Tone
   actionLabel: string
   added: boolean
   onDetails: () => void
   onAction: () => void
 }) {
   const [failedIcon, setFailedIcon] = useState(false)
-  return <article className="flex min-h-24 items-center gap-3 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface)] px-4 py-3 transition-colors hover:bg-[var(--color-surface-hover)]">
+  // White card on a hairline; hover only deepens the edge — no lift.
+  return <article className="flex min-h-[104px] items-start gap-3 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] p-4 transition-colors duration-150 hover:border-[var(--color-outline)]">
     <button type="button" aria-label={name} onClick={onDetails} className="flex min-w-0 flex-1 items-start gap-3 rounded-[var(--radius-sm)] text-left outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]">
-      <span aria-hidden="true" className="flex h-10 w-10 shrink-0 items-center justify-center text-lg font-medium text-[var(--color-text-secondary)]">
-        {failedIcon ? name.slice(0, 1) : <img src={`${import.meta.env.BASE_URL}connectors/${id}.svg`} alt="" className="h-10 w-10 object-contain" onError={() => setFailedIcon(true)} />}
+      <span aria-hidden="true" className="flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-[var(--radius-md)] text-[15px] font-medium text-[var(--color-text-secondary)]">
+        {failedIcon ? <span className="flex h-full w-full items-center justify-center bg-[var(--color-surface-container)]">{name.slice(0, 1)}</span> : <img src={`${import.meta.env.BASE_URL}connectors/${id}.svg`} alt="" className="h-10 w-10 object-contain" onError={() => setFailedIcon(true)} />}
       </span>
       <span className="min-w-0 flex-1">
-        <span className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1"><span className="truncate text-sm font-semibold text-[var(--color-text-primary)]">{name}</span>{kind && <span className="rounded-[var(--radius-sm)] border border-[var(--color-border)] px-1 text-[10px] leading-4 text-[var(--color-text-tertiary)]">{kind}</span>}</span>
-        <span className="mt-1 block line-clamp-2 text-xs leading-5 text-[var(--color-text-secondary)]">{description}</span>
-        {status && <span className="mt-1 block text-[10px] leading-4 text-[var(--color-text-tertiary)]">{status}</span>}
+        <span className="flex min-w-0 items-center gap-2"><span className="truncate text-sm font-semibold text-[var(--color-text-primary)]">{name}</span>{kind && <Badge variant="outline" size="xs">{kind}</Badge>}</span>
+        <span className="mt-1 block line-clamp-2 text-xs leading-[18px] text-[var(--color-text-secondary)]">{description}</span>
+        {status && <Badge tone={statusTone} size="xs" className="mt-2">{status}</Badge>}
       </span>
     </button>
-    {action ?? <IconButton label={actionLabel} size="md" shape="circle" tone="secondary" bordered onClick={onAction} icon={<svg aria-hidden="true" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">{added ? <path d="m7 5 5 5-5 5" /> : <path d="M10 4v12M4 10h12" />}</svg>} />}
+    {action ?? <IconButton label={actionLabel} size="md" tone="secondary" bordered onClick={onAction} icon={added ? <ChevronRight size={16} strokeWidth={1.75} aria-hidden="true" /> : <Plus size={16} strokeWidth={1.75} aria-hidden="true" />} />}
   </article>
 }
diff --git a/desktop/src/components/controls/AutoModeOptInDialog.tsx b/desktop/src/components/controls/AutoModeOptInDialog.tsx
index 5b2a34ce..db7e1b7a 100644
--- a/desktop/src/components/controls/AutoModeOptInDialog.tsx
+++ b/desktop/src/components/controls/AutoModeOptInDialog.tsx
@@ -1,3 +1,4 @@
+import { TriangleAlert } from 'lucide-react'
 import { useTranslation } from '../../i18n'
 import { ActionDialog } from '@/components/ui/ActionDialog'
 
@@ -24,10 +25,10 @@ export function AutoModeOptInDialog({ open, loading = false, onClose, onConfirm
               border) and `--color-on-warning-container` is the only readable
               foreground on the container fill. The `/N` alpha this replaced is
               also dropped outright by the Safari 15 WebView. */}
-          <div className="flex items-start gap-3 rounded-[var(--radius-lg)] border border-[var(--color-warning)] bg-[var(--color-warning-container)] px-3 py-3">
-            <span className="material-symbols-outlined mt-0.5 text-[20px] text-[var(--color-warning)]">warning</span>
-            <div className="space-y-2 text-sm leading-6 text-[var(--color-on-warning-container)]">
-              <p className="font-semibold">{t('permMode.enableAutoBody')}</p>
+          <div className="flex items-start gap-3 rounded-[var(--radius-md)] bg-[var(--color-warning-container)] px-3 py-3">
+            <TriangleAlert aria-hidden="true" size={16} strokeWidth={1.75} className="mt-0.5 shrink-0 text-[var(--color-warning)]" />
+            <div className="space-y-2 text-[13px] leading-6 text-[var(--color-on-warning-container)]">
+              <p className="font-medium">{t('permMode.enableAutoBody')}</p>
               <p>{t('permMode.enableAutoDetail')}</p>
             </div>
           </div>
diff --git a/desktop/src/components/controls/ModelSelector.test.tsx b/desktop/src/components/controls/ModelSelector.test.tsx
index 73a16ca0..6544c606 100644
--- a/desktop/src/components/controls/ModelSelector.test.tsx
+++ b/desktop/src/components/controls/ModelSelector.test.tsx
@@ -729,7 +729,10 @@ describe('ModelSelector', () => {
       .getAllByRole('button', { name: /deepseek-v4-pro/i })
       .find((button) => button.textContent?.includes('Sonnet Model'))
     expect(configuredOption).toBeDefined()
-    expect(configuredOption?.className).toContain('border-[var(--color-model-option-selected-border)]')
+    // 「素」 menu selection: the hover fill at rest plus the terracotta check.
+    expect(configuredOption).toHaveAttribute('aria-current', 'true')
+    expect(configuredOption?.className).toContain('bg-[var(--color-surface-hover)]')
+    expect(configuredOption?.querySelector('svg.lucide-check')).toHaveClass('text-[var(--color-brand)]')
   })
 
   it('closes the focus ring on both halves of the segmented control', () => {
@@ -757,8 +760,8 @@ describe('ModelSelector', () => {
     // The ring traces `border-radius`. Each half is rounded on one side only,
     // so without this the focused half drew a box that was round down one edge
     // and square down the other.
-    expect(modelHalf).toHaveClass('rounded-l-[var(--radius-md)]', 'focus-visible:rounded-[var(--radius-md)]')
-    expect(effortHalf).toHaveClass('rounded-r-[var(--radius-md)]', 'focus-visible:rounded-[var(--radius-md)]')
+    expect(modelHalf).toHaveClass('rounded-l-[var(--radius-sm)]', 'focus-visible:rounded-[var(--radius-sm)]')
+    expect(effortHalf).toHaveClass('rounded-r-[var(--radius-sm)]', 'focus-visible:rounded-[var(--radius-sm)]')
   })
 
   // On the phone composer this control sits between two 44px buttons and opens
diff --git a/desktop/src/components/controls/ModelSelector.tsx b/desktop/src/components/controls/ModelSelector.tsx
index 610e29b3..6e6e4f33 100644
--- a/desktop/src/components/controls/ModelSelector.tsx
+++ b/desktop/src/components/controls/ModelSelector.tsx
@@ -1,6 +1,12 @@
 import { MODEL_SLOTS, type ModelSlot } from '@/lib/providerModelContext'
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
+import { ArrowRight, Check, ChevronDown } from 'lucide-react'
+import {
+  COMPOSER_MENU_ITEM,
+  COMPOSER_MENU_ITEM_ACTIVE,
+  COMPOSER_MENU_SECTION,
+} from '@/components/chat/composerMenuStyles'
 import {
   BUNDLED_PROVIDER_PRESETS,
   getBundledPresetReasoningProviderKind,
@@ -515,6 +521,7 @@ export const ModelSelector = forwardRef<ModelSelectorHandle, Props>(function Mod
   const runtimeEffortOptions = supportedRuntimeEfforts === undefined
     ? EFFORT_OPTIONS.filter((option) => option.value !== 'xhigh')
     : EFFORT_OPTIONS.filter((option) => supportedRuntimeEfforts.includes(option.value))
+  const showEffortPill = canEditRuntimeEffort && !!selectedRuntimeEffort && runtimeEffortOptions.length > 0
 
   const navigateToProviderSettings = useCallback(() => {
     setOpen(false)
@@ -640,39 +647,39 @@ export const ModelSelector = forwardRef<ModelSelectorHandle, Props>(function Mod
           through it (and above the panel edge). As a sibling above the
           scrollport, the list is hard-clipped below the header instead. */}
       {!isMobileBrowser && (
-        <div className="flex-none border-b border-[var(--color-border)] px-3.5 pb-2 pt-3">
-          <div className="mb-2 px-1 text-[10px] font-bold uppercase tracking-widest text-[var(--color-text-tertiary)]">
+        <div className="flex-none border-b border-[var(--color-border)] px-1 pb-1.5">
+          <div className={COMPOSER_MENU_SECTION}>
             {t('model.configuration')}
           </div>
           {searchField}
         </div>
       )}
-      <div className={`overflow-y-auto ${isMobileBrowser ? 'p-1' : 'min-h-0 flex-1 p-1.5'}`}>
+      <div className={`overflow-y-auto ${isMobileBrowser ? 'p-1' : 'min-h-0 flex-1 p-1'}`}>
         {!hasMatchingModels && (
           <div
             role="status"
-            className={`flex items-center justify-center px-4 text-center text-sm text-[var(--color-text-tertiary)] ${isMobileBrowser ? 'min-h-28' : 'min-h-24'}`}
+            className={`flex items-center justify-center px-4 text-center text-[13px] text-[var(--color-text-tertiary)] ${isMobileBrowser ? 'min-h-28' : 'min-h-24'}`}
           >
             {t('model.noMatches')}
           </div>
         )}
 
         {isRuntimeScoped ? (
-          <div className="space-y-3">
+          <div className="space-y-1">
             {filteredProviderChoices.map((choice) => (
-              <div key={choice.providerId ?? 'official'} className="space-y-1.5">
-                <div className="flex items-center justify-between gap-2 px-3 pt-1">
-                  <span className="truncate text-xs font-semibold text-[var(--color-text-tertiary)]">
+              <div key={choice.providerId ?? 'official'}>
+                <div className={`flex items-center justify-between gap-2 ${COMPOSER_MENU_SECTION}`}>
+                  <span className="truncate">
                     {choice.providerName}
                   </span>
                   {choice.isDefault && (
-                    <span className="flex-shrink-0 text-[10px] font-medium text-[var(--color-text-tertiary)]">
+                    <span className="flex-shrink-0 font-normal">
                       {t('settings.providers.default')}
                     </span>
                   )}
                 </div>
 
-                <div className="space-y-1">
+                <div className="space-y-px">
                   {choice.models.map((model) => {
                     const isSelected =
                       activeRuntimeSelection?.providerId === choice.providerId &&
@@ -722,33 +729,25 @@ export const ModelSelector = forwardRef<ModelSelectorHandle, Props>(function Mod
                             ...(nextEffort ? { effortLevel: nextEffort } : {}),
                           })
                         }}
-                        className={`
-                          w-full rounded-[var(--radius-md)] border px-3 text-left transition-colors
-                          ${isMobileBrowser ? 'min-h-[56px] py-3' : 'py-2'}
-                          ${isSelected
-                            ? 'border-[var(--color-model-option-selected-border)] bg-[var(--color-model-option-selected-bg)]'
-                            : 'border-transparent hover:bg-[var(--color-surface-hover)]'
-                          }
-                        `}
+                        aria-current={isSelected || undefined}
+                        className={`${COMPOSER_MENU_ITEM} ${isMobileBrowser ? 'min-h-[56px] py-3' : ''} ${isSelected ? COMPOSER_MENU_ITEM_ACTIVE : ''}`}
                       >
-                        <div className="flex items-center gap-3">
-                          <div className="min-w-0 flex-1">
-                            {/* Model ids are identifiers, so they sit in the
-                                mono face alongside paths and token counts. */}
-                            <div className="truncate font-mono text-[13px] font-medium text-[var(--color-text-primary)]">
-                              {model.name}
-                            </div>
-                            {model.description && (
-                              <div className="mt-0.5 truncate pr-[6px] text-[11px] text-[var(--color-text-tertiary)]">
-                                {model.description}
-                              </div>
-                            )}
+                        <div className="grid min-w-0 flex-1 gap-px">
+                          {/* Model ids are identifiers, so they sit in the
+                              mono face alongside paths and token counts. */}
+                          <div className="truncate font-mono text-[13px] text-[var(--color-text-primary)]">
+                            {model.name}
                           </div>
-
-                          {isSelected && (
-                            <span className="material-symbols-outlined flex-shrink-0 text-[16px] text-[var(--color-brand)]">check</span>
+                          {model.description && (
+                            <div className="truncate pr-[6px] text-xs text-[var(--color-text-tertiary)]">
+                              {model.description}
+                            </div>
                           )}
                         </div>
+
+                        {isSelected && (
+                          <Check aria-hidden="true" size={14} strokeWidth={2} className="flex-shrink-0 text-[var(--color-brand)]" />
+                        )}
                       </button>
                     )
                   })}
@@ -757,7 +756,7 @@ export const ModelSelector = forwardRef<ModelSelectorHandle, Props>(function Mod
             ))}
           </div>
         ) : (
-          <div className="space-y-1">
+          <div className="space-y-px">
             {filteredAvailableModels.map((model) => {
               const isSelected = model.id === selectedModel?.id
               return (
@@ -771,29 +770,21 @@ export const ModelSelector = forwardRef<ModelSelectorHandle, Props>(function Mod
                     }
                     setOpen(false)
                   }}
-                  className={`
-                    w-full rounded-[var(--radius-md)] px-3 text-left transition-colors
-                    ${isMobileBrowser ? 'min-h-[56px] py-3' : 'py-2'}
-                    ${isSelected
-                      ? 'border border-[var(--color-model-option-selected-border)] bg-[var(--color-model-option-selected-bg)]'
-                      : 'hover:bg-[var(--color-surface-hover)]'
-                    }
-                  `}
+                  aria-current={isSelected || undefined}
+                  className={`${COMPOSER_MENU_ITEM} ${isMobileBrowser ? 'min-h-[56px] py-3' : ''} ${isSelected ? COMPOSER_MENU_ITEM_ACTIVE : ''}`}
                 >
-                  <div className="flex items-center gap-3">
-                    <div className="min-w-0 flex-1">
-                      <div className="truncate font-mono text-[13px] font-medium text-[var(--color-text-primary)]">{model.name}</div>
-                      {model.description && (
-                        <div className="mt-0.5 truncate text-[11px] text-[var(--color-text-tertiary)]">
-                          {model.description}
-                        </div>
-                      )}
-                    </div>
-
-                    {isSelected && (
-                      <span className="material-symbols-outlined flex-shrink-0 text-[16px] text-[var(--color-brand)]">check</span>
+                  <div className="grid min-w-0 flex-1 gap-px">
+                    <div className="truncate font-mono text-[13px] text-[var(--color-text-primary)]">{model.name}</div>
+                    {model.description && (
+                      <div className="truncate text-xs text-[var(--color-text-tertiary)]">
+                        {model.description}
+                      </div>
                     )}
                   </div>
+
+                  {isSelected && (
+                    <Check aria-hidden="true" size={14} strokeWidth={2} className="flex-shrink-0 text-[var(--color-brand)]" />
+                  )}
                 </button>
               )
             })}
@@ -823,7 +814,7 @@ export const ModelSelector = forwardRef<ModelSelectorHandle, Props>(function Mod
       <div
         ref={dropdownRef}
         data-testid="model-selector-dropdown"
-        className="fixed z-[var(--z-dropdown)] flex flex-col overflow-hidden rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] shadow-[var(--shadow-overlay)]"
+        className="fixed z-[var(--z-dropdown)] flex flex-col overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] shadow-[var(--shadow-dropdown)]"
         style={{
           top: dropdownPosition.top,
           bottom: dropdownPosition.bottom,
@@ -852,10 +843,10 @@ export const ModelSelector = forwardRef<ModelSelectorHandle, Props>(function Mod
           desktop composer, which narrows for the right panel, not for touch. */}
       <div
         ref={ref}
-        className={`flex min-w-0 items-stretch rounded-[var(--radius-md)] transition-colors ${
+        className={`flex min-w-0 items-stretch transition-colors ${
           appearance === 'field'
-            ? 'h-10 w-full border border-[var(--color-border)] bg-[var(--color-surface)] hover:border-[var(--color-border-focus)] hover:bg-[var(--color-surface-container-low)]'
-            : 'hover:bg-[var(--color-surface-hover)]'
+            ? 'h-10 w-full rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] hover:border-[var(--color-outline)]'
+            : `h-7 rounded-[var(--radius-sm)] hover:bg-[var(--color-surface-hover)] ${open || effortOpen ? 'bg-[var(--color-surface-hover)]' : ''}`
         } ${isMobileBrowser ? 'min-h-11' : ''} ${fluid ? 'w-full' : ''} ${disabled ? 'opacity-50' : ''}`}
       >
         <button
@@ -875,13 +866,13 @@ export const ModelSelector = forwardRef<ModelSelectorHandle, Props>(function Mod
           // focused. The ring traces `border-radius`, so on the half-rounded
           // halves of this segmented control it otherwise drew a box that was
           // rounded down one side and square down the other.
-          className={`flex min-w-0 items-center gap-2 text-xs font-medium text-[var(--color-text-secondary)] outline-none transition-colors focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] disabled:cursor-not-allowed ${
+          className={`flex min-w-0 items-center gap-1.5 text-xs text-[var(--color-text-secondary)] outline-none transition-colors focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] disabled:cursor-not-allowed ${
             appearance === 'field'
               ? 'h-full w-full rounded-[var(--radius-md)] px-3 text-left'
-              : `rounded-l-[var(--radius-md)] focus-visible:rounded-[var(--radius-md)] ${fluid ? 'flex-1' : ''} ${compact ? 'max-w-[112px] py-1.5 pl-2.5 pr-1' : 'max-w-[220px] py-1.5 pl-2.5 pr-1'}`
+              : `rounded-l-[var(--radius-sm)] focus-visible:rounded-[var(--radius-sm)] pl-2 ${fluid ? 'flex-1' : ''} ${compact ? 'max-w-[112px]' : 'max-w-[220px]'} ${showEffortPill ? 'pr-1' : 'rounded-r-[var(--radius-sm)] pr-1.5'}`
           }`}
         >
-          <span className={`${appearance === 'field' ? 'text-sm font-normal' : compact ? 'text-xs font-medium' : 'text-[13px] font-medium'} min-w-0 flex-1 truncate text-[var(--color-text-primary)]`}>
+          <span className={`${appearance === 'field' ? 'text-[13px]' : 'text-xs'} min-w-0 flex-1 truncate text-[var(--color-text-primary)]`}>
             {buttonModelLabel}
           </span>
           {!canEditRuntimeEffort && !compact && buttonProviderLabel && (
@@ -889,12 +880,12 @@ export const ModelSelector = forwardRef<ModelSelectorHandle, Props>(function Mod
               {buttonProviderLabel}
             </span>
           )}
-          <span className={`material-symbols-outlined flex-shrink-0 text-[var(--color-text-tertiary)] ${appearance === 'field' ? 'text-[16px]' : 'text-[12px]'}`}>
-            {needsProviderConfiguration ? 'arrow_forward' : 'expand_more'}
-          </span>
+          {needsProviderConfiguration
+            ? <ArrowRight aria-hidden="true" size={appearance === 'field' ? 16 : 12} strokeWidth={2} className="flex-shrink-0 text-[var(--color-text-tertiary)]" />
+            : !showEffortPill && <ChevronDown aria-hidden="true" size={appearance === 'field' ? 16 : 12} strokeWidth={2} className="flex-shrink-0 text-[var(--color-text-tertiary)]" />}
         </button>
 
-        {canEditRuntimeEffort && selectedRuntimeEffort && runtimeEffortOptions.length > 0 && (
+        {showEffortPill && selectedRuntimeEffort && (
           <button
             ref={effortButtonRef}
             type="button"
@@ -906,9 +897,14 @@ export const ModelSelector = forwardRef<ModelSelectorHandle, Props>(function Mod
               setOpen(false)
               setEffortOpen(!effortOpen)
             }}
-            className={`shrink-0 rounded-r-[var(--radius-md)] pr-2.5 text-[var(--color-text-secondary)] outline-none transition-colors hover:text-[var(--color-text-primary)] focus-visible:rounded-[var(--radius-md)] focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] disabled:cursor-not-allowed ${compact ? 'pl-1 text-[10px]' : 'pl-1.5 text-[12px]'}`}
+            // The effort rides on the model name as a small sunken pill; the
+            // chevron moves here so the pair reads "model · effort ⌄".
+            className={`flex shrink-0 items-center gap-1 rounded-r-[var(--radius-sm)] pl-0.5 pr-1.5 text-[var(--color-text-tertiary)] outline-none transition-colors hover:text-[var(--color-text-primary)] focus-visible:rounded-[var(--radius-sm)] focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] disabled:cursor-not-allowed`}
           >
-            {effortLabels[selectedRuntimeEffort]}
+            <span className="inline-flex h-[18px] items-center rounded-full bg-[var(--color-surface-container)] px-1.5 text-[11px]">
+              {effortLabels[selectedRuntimeEffort]}
+            </span>
+            <ChevronDown aria-hidden="true" size={12} strokeWidth={2} className="flex-shrink-0" />
           </button>
         )}
       </div>
diff --git a/desktop/src/components/controls/PermissionModeSelector.test.tsx b/desktop/src/components/controls/PermissionModeSelector.test.tsx
index 6f236ed8..967aadf4 100644
--- a/desktop/src/components/controls/PermissionModeSelector.test.tsx
+++ b/desktop/src/components/controls/PermissionModeSelector.test.tsx
@@ -465,20 +465,20 @@ describe('PermissionModeSelector', () => {
 
     fireEvent.click(screen.getByRole('button', { name: 'Ask permissions' }))
     const autoItem = screen.getByRole('menuitem', { name: /Auto mode/ })
-    expect(autoItem.querySelector('.material-symbols-outlined')).toHaveTextContent('autoplay')
-    expect(autoItem.querySelector('.material-symbols-outlined')).not.toHaveTextContent('auto_awesome')
+    expect(autoItem.querySelector('svg.lucide-circle-play')).toBeInTheDocument()
+    expect(autoItem.querySelector('svg.lucide-sparkles')).not.toBeInTheDocument()
 
     // The full trigger states the mode as a risk-coloured dot, not the glyph —
     // the glyph identifies the mode in the menu, the colour ranks it on the
     // toolbar. The compact trigger has no label, so it keeps the glyph.
     rerender(<PermissionModeSelector value="auto" onChange={vi.fn()} />)
     const trigger = screen.getByRole('button', { name: 'Auto mode' })
-    expect(trigger).not.toHaveTextContent('autoplay')
+    expect(trigger.querySelector('svg.lucide-circle-play')).not.toBeInTheDocument()
     expect(trigger.querySelector('[data-testid="permission-mode-dot"]')).toBeInTheDocument()
 
     rerender(<PermissionModeSelector value="auto" onChange={vi.fn()} compact />)
-    expect(screen.getByRole('button', { name: 'Auto mode' }))
-      .toHaveTextContent('autoplay')
+    expect(screen.getByRole('button', { name: 'Auto mode' }).querySelector('svg.lucide-circle-play'))
+      .toBeInTheDocument()
   })
 
   it('ranks permission modes by risk on the toolbar trigger', () => {
@@ -489,7 +489,8 @@ describe('PermissionModeSelector', () => {
         .querySelector('[data-testid="permission-mode-dot"]')
         ?.className ?? ''
 
-    expect(dotClass()).toContain('--color-text-tertiary')
+    // Every write still asks first: the safe (green) end of the scale.
+    expect(dotClass()).toContain('--color-success')
 
     rerender(<PermissionModeSelector value="acceptEdits" onChange={vi.fn()} />)
     expect(dotClass()).toContain('--color-warning')
@@ -499,40 +500,47 @@ describe('PermissionModeSelector', () => {
     expect(dotClass()).toContain('--color-error')
   })
 
-  it('renders the visually larger Auto glyph at a reduced size', () => {
+  it('draws every menu glyph and the compact trigger glyph on the same 16px/14px lucide grid', () => {
     const { rerender } = render(
       <PermissionModeSelector value="default" onChange={vi.fn()} />,
     )
 
     fireEvent.click(screen.getByRole('button', { name: 'Ask permissions' }))
-    const autoIcon = screen
-      .getByRole('menuitem', { name: /Auto mode/ })
-      .querySelector('.material-symbols-outlined')
-    expect(autoIcon).toHaveClass('text-[18px]')
+    for (const item of screen.getAllByRole('menuitem')) {
+      expect(item.querySelector('[data-mode-icon] svg')).toHaveAttribute('width', '16')
+    }
 
-    rerender(<PermissionModeSelector value="auto" onChange={vi.fn()} />)
-    const triggerIcon = screen
-      .getByRole('button', { name: 'Auto mode' })
-      .querySelector('.material-symbols-outlined')
-    expect(triggerIcon).toHaveClass('text-[12px]')
+    rerender(<PermissionModeSelector value="auto" onChange={vi.fn()} compact />)
+    expect(screen.getByRole('button', { name: 'Auto mode' }).querySelector('svg'))
+      .toHaveAttribute('width', '14')
   })
 
-  it('keeps every row on one text column despite the reduced Auto glyph', () => {
+  it('keeps every row on one text column whatever the glyph', () => {
     render(<PermissionModeSelector value="default" onChange={vi.fn()} />)
 
     fireEvent.click(screen.getByRole('button', { name: 'Ask permissions' }))
     const icons = screen
       .getAllByRole('menuitem')
-      .map((item) => item.querySelector('.material-symbols-outlined'))
+      .map((item) => item.querySelector('[data-mode-icon]'))
 
     expect(icons).toHaveLength(5)
-    // The box, not the glyph, sets where the title starts. Without it the
-    // 18px Auto glyph pulled its own title 2px left of the other four.
+    // The box, not the glyph, sets where the title starts.
     for (const icon of icons) {
-      expect(icon).toHaveClass('w-5', 'shrink-0', 'text-center')
+      expect(icon).toHaveClass('w-5', 'shrink-0', 'justify-center')
     }
   })
 
+  it('marks the current mode with the terracotta check, not a filled row', () => {
+    render(<PermissionModeSelector value="default" onChange={vi.fn()} />)
+
+    fireEvent.click(screen.getByRole('button', { name: 'Ask permissions' }))
+    const current = screen.getByRole('menuitem', { name: /Ask permissions/ })
+    expect(current.querySelector('svg.lucide-check')).toHaveClass('text-[var(--color-brand)]')
+    expect(current).toHaveClass('bg-[var(--color-surface-hover)]')
+    expect(screen.getByRole('menuitem', { name: /Auto accept edits/ }).querySelector('svg.lucide-check'))
+      .not.toBeInTheDocument()
+  })
+
   it('does not change mode when first-use Auto confirmation is cancelled', () => {
     const onChange = vi.fn()
     useSettingsStore.setState({ autoModeOptInAccepted: false } as never)
diff --git a/desktop/src/components/controls/PermissionModeSelector.tsx b/desktop/src/components/controls/PermissionModeSelector.tsx
index 028f177c..8a953bb3 100644
--- a/desktop/src/components/controls/PermissionModeSelector.tsx
+++ b/desktop/src/components/controls/PermissionModeSelector.tsx
@@ -1,6 +1,7 @@
 import { useSideChatStore } from '@/stores/sideChatStore'
 import { useState, useRef, useEffect, useCallback, useId } from 'react'
 import DOMPurify from 'dompurify'
+import { Check, ChevronDown, CirclePlay, DraftingCompass, Folder, Gavel, ShieldCheck, Zap, type LucideIcon } from 'lucide-react'
 import { useDismissable } from '@/hooks/useDismissable'
 import { useSettingsStore } from '../../stores/settingsStore'
 import { useChatStore } from '../../stores/chatStore'
@@ -15,6 +16,12 @@ import { Badge, StatusDot, type Tone } from '@/components/ui/Badge'
 import { MobileBottomSheet } from '@/components/ui/MobileBottomSheet'
 import { ActionDialog } from '@/components/ui/ActionDialog'
 import { AutoModeOptInDialog } from './AutoModeOptInDialog'
+import {
+  COMPOSER_MENU_ITEM,
+  COMPOSER_MENU_ITEM_ACTIVE,
+  COMPOSER_MENU_SECTION,
+  COMPOSER_POPOVER,
+} from '@/components/chat/composerMenuStyles'
 
 /**
  * The trigger states the mode as a risk-coloured dot rather than repeating the
@@ -22,22 +29,30 @@ import { AutoModeOptInDialog } from './AutoModeOptInDialog'
  * without me" at a glance, and a colour answers that faster than a symbol. The
  * per-mode glyphs stay in the menu, where there is room to tell them apart.
  */
+// Green when every write still asks first, amber once some run unattended,
+// red when nothing asks at all. Brand is not a risk level: terracotta is kept
+// for the brand, the send key and selection.
 const MODE_DOT_TONE: Record<PermissionMode, Tone> = {
-  plan: 'neutral',
-  default: 'neutral',
+  plan: 'success',
+  default: 'success',
   acceptEdits: 'warning',
-  auto: 'brand',
+  auto: 'warning',
   bypassPermissions: 'danger',
   dontAsk: 'danger',
 }
 
-const MODE_ICONS: Record<PermissionMode, string> = {
-  default: 'verified_user',
-  acceptEdits: 'bolt',
-  auto: 'autoplay',
-  plan: 'architecture',
-  bypassPermissions: 'gavel',
-  dontAsk: 'gavel',
+const MODE_ICONS: Record<PermissionMode, LucideIcon> = {
+  default: ShieldCheck,
+  acceptEdits: Zap,
+  auto: CirclePlay,
+  plan: DraftingCompass,
+  bypassPermissions: Gavel,
+  dontAsk: Gavel,
+}
+
+function ItemIcon({ mode }: { mode: PermissionMode }) {
+  const Icon = MODE_ICONS[mode]
+  return <Icon aria-hidden="true" size={16} strokeWidth={1.75} />
 }
 
 type Props = {
@@ -86,7 +101,6 @@ export function PermissionModeSelector({ sessionId, workDir: workDirProp, compac
     value: PermissionMode
     label: string
     description: string
-    icon: string
     color?: string
     /** Display-only flag on the row; carries no behaviour. */
     badge?: { tone: 'warning' | 'danger'; label: string }
@@ -95,34 +109,27 @@ export function PermissionModeSelector({ sessionId, workDir: workDirProp, compac
       value: 'default',
       label: t('permMode.askPermissions'),
       description: t('permMode.askPermDesc'),
-      icon: 'verified_user',
     },
     {
       value: 'acceptEdits',
       label: t('permMode.autoAccept'),
       description: t('permMode.autoAcceptDesc'),
-      icon: 'bolt',
     },
     {
       value: 'auto',
       label: t('permMode.autoMode'),
       description: t('permMode.autoModeDesc'),
-      icon: 'autoplay',
-      color: 'text-[var(--color-brand)]',
       badge: { tone: 'warning', label: t('permMode.badge.optIn') },
     },
     {
       value: 'plan',
       label: t('permMode.planMode'),
       description: t('permMode.planModeDesc'),
-      icon: 'architecture',
-      color: 'text-[var(--color-text-tertiary)]',
     },
     {
       value: 'bypassPermissions',
       label: t('permMode.bypass'),
       description: t('permMode.bypassDesc'),
-      icon: 'gavel',
       color: 'text-[var(--color-error)]',
       badge: { tone: 'danger', label: t('permMode.badge.risky') },
     },
@@ -144,11 +151,15 @@ export function PermissionModeSelector({ sessionId, workDir: workDirProp, compac
     ? value
     : livePermissionMode || (activeSession?.permissionMode as PermissionMode | undefined) || sideChat?.permissionMode || storeMode
   const workDir = workDirProp || activeSession?.workDir || sideChat?.workDir || '~'
+  // A quiet 28px chip on the composer row (risk dot + label + chevron); the
+  // compact desktop form keeps only the mode glyph, and the phone form grows
+  // to the 44px touch target.
   const compactButtonClass = compact
     ? isMobile
-      ? 'h-11 w-11 justify-center rounded-[var(--radius-md)] p-0 border border-[var(--color-border)] bg-[var(--color-surface)]'
-      : 'h-8 w-8 justify-center rounded-full p-0 bg-[var(--color-surface-container-low)]'
-    : 'h-8 gap-2 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] px-3 text-[13px]'
+      ? 'h-11 w-11 justify-center rounded-[var(--radius-md)] p-0'
+      : 'h-7 w-7 justify-center rounded-[var(--radius-sm)] p-0'
+    : 'h-7 gap-1.5 rounded-[var(--radius-sm)] px-2 text-xs'
+  const TriggerIcon = MODE_ICONS[currentMode]
   const menuPlacementClass = menuPlacement === 'bottom'
     ? 'top-full mt-2'
     : 'bottom-full mb-2'
@@ -226,22 +237,19 @@ export function PermissionModeSelector({ sessionId, workDir: workDirProp, compac
             setOpen(false)
             interactionTabIdRef.current = null
           }}
-          className={`
-            flex w-full items-start gap-3 rounded-[var(--radius-md)] px-3 py-2.5 text-left transition-colors
-            hover:bg-[var(--color-surface-hover)]
-            focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-border-focus)]
-            ${item.value === currentMode ? 'bg-[var(--color-surface-selected)]' : ''}
-          `}
+          className={`${COMPOSER_MENU_ITEM} items-start ${item.value === currentMode ? COMPOSER_MENU_ITEM_ACTIVE : ''}`}
         >
-          {/* Fixed 20px box: the Auto glyph is drawn 2px smaller to match the
-              others optically, and without a box that difference shifted its
-              whole title/description column 2px left of the other four rows. */}
-          <span className={`material-symbols-outlined mt-0.5 w-5 shrink-0 text-center ${item.value === 'auto' ? 'text-[18px]' : 'text-[20px]'} ${item.color || 'text-[var(--color-text-secondary)]'}`}>
-            {item.icon}
+          {/* Fixed 20px box so every title starts on the same column whatever
+              the glyph's own width. */}
+          <span
+            data-mode-icon={item.value}
+            className={`mt-px flex w-5 shrink-0 justify-center ${item.color || 'text-[var(--color-text-tertiary)]'}`}
+          >
+            <ItemIcon mode={item.value} />
           </span>
-          <div className="min-w-0 flex-1">
+          <div className="grid min-w-0 flex-1 gap-px">
             <div className="flex items-center gap-2">
-              <span className="text-sm font-semibold text-[var(--color-text-primary)]">{item.label}</span>
+              <span className="text-[13px] font-medium text-[var(--color-text-primary)]">{item.label}</span>
               {item.badge && (
                 // `pill={false}` gives the handoff's 6px corner; the pill shape
                 // is reserved for status chips elsewhere.
@@ -250,12 +258,10 @@ export function PermissionModeSelector({ sessionId, workDir: workDirProp, compac
                 </Badge>
               )}
             </div>
-            <div className="mt-0.5 text-[12.5px] leading-snug text-[var(--color-text-tertiary)]">{item.description}</div>
+            <div className="text-xs leading-snug text-[var(--color-text-tertiary)]">{item.description}</div>
           </div>
           {item.value === currentMode && (
-            <span className="material-symbols-outlined mt-0.5 text-[16px] text-[var(--color-brand)]" style={{ fontVariationSettings: "'FILL' 1" }}>
-              check_circle
-            </span>
+            <Check aria-hidden="true" size={14} strokeWidth={2} className="mt-0.5 shrink-0 text-[var(--color-brand)]" />
           )}
         </button>
       ))}
@@ -285,21 +291,21 @@ export function PermissionModeSelector({ sessionId, workDir: workDirProp, compac
         // `shrink-0` / `whitespace-nowrap`: it shares the composer toolbar with
         // the run-location pill, whose branch name can be arbitrarily long.
         // Without these the label wrapped to two lines and grew the whole row.
-        className={`flex shrink-0 items-center whitespace-nowrap font-medium text-[var(--color-text-primary)] transition-[background-color,color,border-color] duration-150 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface)] ${
-          isTurnActive ? 'opacity-50 cursor-not-allowed' : 'hover:border-[var(--color-outline)] hover:bg-[var(--color-surface-hover)]'
+        className={`flex shrink-0 items-center whitespace-nowrap text-[var(--color-text-secondary)] transition-colors duration-150 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] ${
+          isTurnActive
+            ? 'opacity-50 cursor-not-allowed'
+            : `hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] ${open ? 'bg-[var(--color-surface-hover)] text-[var(--color-text-primary)]' : ''}`
         } ${compactButtonClass}`}
       >
         {compact ? (
-          <span className={`material-symbols-outlined text-[var(--color-text-secondary)] ${currentMode === 'auto' ? 'text-[12px]' : 'text-[14px]'}`}>
-            {MODE_ICONS[currentMode]}
-          </span>
+          <TriggerIcon data-mode-icon={currentMode} aria-hidden="true" size={isMobile ? 18 : 14} strokeWidth={1.75} />
         ) : (
           <StatusDot tone={MODE_DOT_TONE[currentMode]} data-testid="permission-mode-dot" />
         )}
         {!compact && (
           <>
             <span>{MODE_LABELS[currentMode]}</span>
-            <span className="material-symbols-outlined text-[12px] text-[var(--color-text-tertiary)]">expand_more</span>
+            <ChevronDown aria-hidden="true" size={12} strokeWidth={2} className="text-[var(--color-text-tertiary)]" />
           </>
         )}
       </button>
@@ -319,8 +325,8 @@ export function PermissionModeSelector({ sessionId, workDir: workDirProp, compac
             </div>
           </MobileBottomSheet>
         ) : (
-          <div id={menuId} ref={menuRef} role="menu" className={`absolute left-0 ${menuPlacementClass} z-[var(--z-dropdown)] w-[360px] rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] p-1.5 shadow-[var(--shadow-overlay)]`}>
-            <div className="px-3 pb-1 pt-2 text-[10px] font-bold uppercase tracking-widest text-[var(--color-text-tertiary)]">
+          <div id={menuId} ref={menuRef} role="menu" className={`absolute left-0 ${menuPlacementClass} z-[var(--z-dropdown)] w-[340px] ${COMPOSER_POPOVER}`}>
+            <div className={COMPOSER_MENU_SECTION}>
               {t('permMode.executionPermissions')}
             </div>
             {permissionItems}
@@ -345,21 +351,21 @@ export function PermissionModeSelector({ sessionId, workDir: workDirProp, compac
               className="text-xs leading-relaxed text-[var(--color-text-secondary)]"
               dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(t('permMode.enableBypassBody')) }}
             />
-            <div className="flex items-center gap-2 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface-container)] px-3 py-2" title={workDir}>
-              <span className="material-symbols-outlined shrink-0 text-[16px] text-[var(--color-text-tertiary)]">folder</span>
+            <div className="flex items-center gap-2 rounded-[var(--radius-md)] bg-[var(--color-surface-container)] px-3 py-2" title={workDir}>
+              <Folder aria-hidden="true" size={14} strokeWidth={1.75} className="shrink-0 text-[var(--color-text-tertiary)]" />
               <code className="truncate font-mono text-xs text-[var(--color-text-primary)]">{workDir}</code>
             </div>
             <ul className="space-y-1.5 text-xs text-[var(--color-text-secondary)]">
               <li className="flex items-start gap-2">
-                <span className="material-symbols-outlined mt-0.5 text-[14px] text-[var(--color-error)]">check</span>
+                <Check aria-hidden="true" size={14} strokeWidth={2} className="mt-0.5 shrink-0 text-[var(--color-error)]" />
                 {t('permMode.permReadWrite')}
               </li>
               <li className="flex items-start gap-2">
-                <span className="material-symbols-outlined mt-0.5 text-[14px] text-[var(--color-error)]">check</span>
+                <Check aria-hidden="true" size={14} strokeWidth={2} className="mt-0.5 shrink-0 text-[var(--color-error)]" />
                 {t('permMode.permShell')}
               </li>
               <li className="flex items-start gap-2">
-                <span className="material-symbols-outlined mt-0.5 text-[14px] text-[var(--color-error)]">check</span>
+                <Check aria-hidden="true" size={14} strokeWidth={2} className="mt-0.5 shrink-0 text-[var(--color-error)]" />
                 {t('permMode.permPackages')}
               </li>
             </ul>
diff --git a/desktop/src/components/controls/ReasoningEffortPopover.test.tsx b/desktop/src/components/controls/ReasoningEffortPopover.test.tsx
index 8fd3846b..5ae548f4 100644
--- a/desktop/src/components/controls/ReasoningEffortPopover.test.tsx
+++ b/desktop/src/components/controls/ReasoningEffortPopover.test.tsx
@@ -45,39 +45,39 @@ function renderPopover(overrides: Partial<React.ComponentProps<typeof ReasoningE
 }
 
 describe('ReasoningEffortPopover', () => {
-  // Sizes come from §3 of docs/redesign-paper-ink-seal.md: a 300px panel with
-  // 19/22px padding, the serif level name over a 14px-tall track, and a 24px
-  // knob. They replace the earlier 240px panel and 24px track.
-  it('keeps the effort visual compact without non-functional icon controls', () => {
+  // 「素」: the effort control is a five-way segmented track inside a menu
+  // sheet (white, hairline, `--radius-lg`, dropdown shadow), headed by the
+  // section label — the old serif level name over a slider knob is gone.
+  it('renders the effort as a segmented track inside the shared menu sheet', () => {
     renderPopover()
 
     const popover = screen.getByTestId('reasoning-effort-popover')
-    expect(popover).toHaveStyle({ width: '300px' })
-    expect(popover).toHaveClass('px-[22px]', 'pb-[19px]', 'pt-[19px]')
+    expect(popover).toHaveStyle({ width: '320px' })
+    expect(popover).toHaveClass('rounded-[var(--radius-lg)]', 'border-[var(--color-border)]', 'shadow-[var(--shadow-dropdown)]', 'p-1')
     expect(popover.querySelectorAll('svg')).toHaveLength(0)
-    expect(screen.getByTestId('reasoning-effort-header')).toHaveClass('mb-[15px]', 'justify-between')
-    expect(screen.getByTestId('reasoning-effort-label')).toHaveClass('text-[19px]')
-    expect(screen.getByTestId('reasoning-effort-label')).toHaveStyle({ fontFamily: 'var(--font-headline)' })
-    expect(screen.getByTestId('reasoning-effort-context-label')).toHaveClass('text-[12.5px]')
     expect(screen.getByTestId('reasoning-effort-context-label')).toHaveTextContent('推理强度')
-    expect(screen.getByRole('slider', { name: '推理强度' })).toHaveClass('h-[26px]')
-    expect(screen.getByTestId('reasoning-effort-track')).toHaveClass('h-[14px]')
-    expect(screen.getByTestId('reasoning-effort-thumb')).toHaveClass('h-6', 'w-6')
+    expect(screen.getByTestId('reasoning-effort-header')).toHaveClass('text-[11px]', 'font-semibold')
+    const slider = screen.getByRole('slider', { name: '推理强度' })
+    expect(slider).toHaveClass('h-[30px]', 'bg-[var(--color-surface-container)]')
+    expect(slider).toHaveStyle({ gridTemplateColumns: 'repeat(5, minmax(0, 1fr))' })
+    expect(screen.getAllByTestId('reasoning-effort-stop').map((stop) => stop.textContent))
+      .toEqual(['低', '中', '高', '极高', '最大'])
   })
 
-  it('paints the knob and stops from tokens so they survive the ink themes', () => {
+  it('lifts only the selected segment, from tokens that survive the ink themes', () => {
     renderPopover()
 
-    // `bg-white` on the knob and `white/45` on the stops were invisible on the
-    // paper themes and dropped outright by the Safari 15 WebView, which cannot
-    // parse the `/N` alpha modifier.
-    expect(screen.getByTestId('reasoning-effort-thumb')).toHaveClass('bg-[var(--color-surface)]')
-    // On dark and ink-blue `--color-surface` is the same value as the panel
-    // behind it, so the fill alone left the knob with no edge to read against.
-    expect(screen.getByTestId('reasoning-effort-thumb')).toHaveClass('border', 'border-[var(--color-outline)]')
-    for (const stop of screen.getAllByTestId('reasoning-effort-stop')) {
+    const stops = screen.getAllByTestId('reasoning-effort-stop')
+    const selected = stops.filter((stop) => stop.hasAttribute('data-selected'))
+    expect(selected).toHaveLength(1)
+    expect(selected[0]).toHaveTextContent('极高')
+    // The lifted segment of SegmentedControl, not a terracotta fill: brand is
+    // reserved for the send key and selection checks.
+    expect(selected[0]).toHaveClass('bg-[var(--color-surface-container-lowest)]', 'shadow-[var(--shadow-segment)]')
+    for (const stop of stops) {
       expect(stop.className).not.toMatch(/white/)
       expect(stop.className).not.toMatch(/\/\d+/)
+      expect(stop.className).not.toContain('--color-brand')
     }
   })
 
@@ -91,9 +91,8 @@ describe('ReasoningEffortPopover', () => {
     expect(slider).toHaveAttribute('aria-valuetext', '极高')
     expect(screen.getAllByTestId('reasoning-effort-stop')).toHaveLength(5)
     expect(screen.getByText('极高')).toBeInTheDocument()
-    expect(screen.getByTestId('reasoning-effort-fill')).toHaveClass('bg-[var(--color-brand)]')
-    // `--color-border-focus` is the app-wide focus token (terracotta in all six
-    // palettes); the raw brand color here predated it.
+    // `--color-border-focus` is the app-wide focus token; the raw brand color
+    // here predated it.
     expect(slider).toHaveClass('focus-visible:ring-[var(--color-border-focus)]')
   })
 
diff --git a/desktop/src/components/controls/ReasoningEffortPopover.tsx b/desktop/src/components/controls/ReasoningEffortPopover.tsx
index ad1b2f3a..c1c2f1b8 100644
--- a/desktop/src/components/controls/ReasoningEffortPopover.tsx
+++ b/desktop/src/components/controls/ReasoningEffortPopover.tsx
@@ -4,6 +4,7 @@ import { createPortal } from 'react-dom'
 import { useDismissable } from '@/hooks/useDismissable'
 import { useTranslation } from '../../i18n'
 import type { ReasoningEffortLevel } from '../../types/settings'
+import { COMPOSER_MENU_SECTION, COMPOSER_POPOVER } from '@/components/chat/composerMenuStyles'
 
 type Props = {
   open: boolean
@@ -22,9 +23,9 @@ type PopoverPosition = {
   width: number
 }
 
-const POPOVER_WIDTH = 300
+const POPOVER_WIDTH = 320
 const VIEWPORT_MARGIN = 16
-const POPOVER_GAP = 10
+const POPOVER_GAP = 8
 
 export function ReasoningEffortPopover({
   open,
@@ -46,7 +47,6 @@ export function ReasoningEffortPopover({
   const [position, setPosition] = useState<PopoverPosition | null>(null)
   const selectedIndex = Math.max(0, options.indexOf(value))
   const maxIndex = Math.max(0, options.length - 1)
-  const fillPercent = maxIndex === 0 ? 0 : (selectedIndex / maxIndex) * 100
 
   useLayoutEffect(() => {
     if (!open) {
@@ -113,28 +113,17 @@ export function ReasoningEffortPopover({
     <div
       ref={popoverRef}
       data-testid="reasoning-effort-popover"
-      className="fixed z-[var(--z-popover)] rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] px-[22px] pb-[19px] pt-[19px] shadow-[var(--shadow-overlay)]"
+      className={`fixed z-[var(--z-popover)] ${COMPOSER_POPOVER}`}
       style={{ bottom: position.bottom, left: position.left, width: position.width }}
     >
-      <div
-        data-testid="reasoning-effort-header"
-        className="mb-[15px] flex items-baseline justify-between gap-3"
-      >
-        <div
-          data-testid="reasoning-effort-label"
-          className="text-[19px] font-bold leading-none text-[var(--color-text-primary)]"
-          style={{ fontFamily: 'var(--font-headline)' }}
-        >
-          {labels[value]}
-        </div>
-        <div
-          data-testid="reasoning-effort-context-label"
-          className="text-[12.5px] text-[var(--color-text-tertiary)]"
-        >
-          {label}
-        </div>
+      <div data-testid="reasoning-effort-header" className={COMPOSER_MENU_SECTION}>
+        <span data-testid="reasoning-effort-context-label">{label}</span>
       </div>
 
+      {/* A five-way segmented control that keeps the slider semantics: one
+          tab stop, arrow keys step, Home/End jump, and a press or drag picks
+          the nearest segment. The segments are its visual, so they are not
+          separate controls. */}
       <div
         ref={sliderRef}
         role="slider"
@@ -144,7 +133,8 @@ export function ReasoningEffortPopover({
         aria-valuemax={maxIndex}
         aria-valuenow={selectedIndex}
         aria-valuetext={labels[value]}
-        className="group relative flex h-[26px] touch-none cursor-pointer items-center outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-4 focus-visible:ring-offset-[var(--color-surface-container-lowest)]"
+        className="mx-1 mb-1 mt-0.5 grid h-[30px] touch-none cursor-pointer gap-0.5 rounded-[var(--radius-sm)] bg-[var(--color-surface-container)] p-0.5 outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]"
+        style={{ gridTemplateColumns: `repeat(${options.length}, minmax(0, 1fr))` }}
         onClick={(event) => selectFromClientX(event.clientX)}
         onPointerDown={(event) => {
           draggingRef.current = true
@@ -187,40 +177,27 @@ export function ReasoningEffortPopover({
           }
         }}
       >
-        <div
-          data-testid="reasoning-effort-track"
-          className="absolute inset-x-0 h-[14px] overflow-hidden rounded-full bg-[var(--color-surface-hover)]"
-        >
-          <div
-            data-testid="reasoning-effort-fill"
-            className="h-full rounded-full bg-[var(--color-brand)] transition-[width] duration-[180ms] motion-reduce:transition-none"
-            style={{ width: `${fillPercent}%` }}
-          />
-        </div>
-
-        <div className="absolute inset-x-0 flex items-center justify-between px-[11px]">
-          {options.map((option, index) => (
+        {options.map((option, index) => {
+          const selected = index === selectedIndex
+          return (
             <span
               key={option}
               data-testid="reasoning-effort-stop"
-              // Foreground token rather than `white/45`: the `/N` modifier
-              // compiles to a color function Safari 15's WebView drops, and the
-              // unfilled half of the track is a light surface under every
-              // palette, where white dots are invisible.
-              className={`h-[7px] w-[7px] rounded-full ${index <= selectedIndex ? 'bg-[var(--color-on-primary)]' : 'bg-[var(--color-outline)]'}`}
-            />
-          ))}
-        </div>
-
-        <div
-          aria-hidden="true"
-          data-testid="reasoning-effort-thumb"
-          // The hairline is what makes the knob readable on the ink themes,
-          // where `--color-surface` resolves to the same value as the popover
-          // it sits on and `--shadow-card` has nothing lighter to cast against.
-          className="absolute top-1/2 h-6 w-6 -translate-x-1/2 -translate-y-1/2 rounded-full border border-[var(--color-outline)] bg-[var(--color-surface)] shadow-[var(--shadow-card)] transition-[left] duration-[180ms] motion-reduce:transition-none"
-          style={{ left: `${fillPercent}%` }}
-        />
+              data-selected={selected || undefined}
+              title={labels[option]}
+              // The lifted segment of `SegmentedControl`: the selected step sits
+              // on the popover's own white with the segment shadow; the rest are
+              // tertiary type on the sunken track.
+              className={`flex min-w-0 items-center justify-center truncate rounded-[var(--radius-xs)] px-1 text-xs transition-colors ${
+                selected
+                  ? 'bg-[var(--color-surface-container-lowest)] font-medium text-[var(--color-text-primary)] shadow-[var(--shadow-segment)]'
+                  : 'text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)]'
+              }`}
+            >
+              {labels[option]}
+            </span>
+          )
+        })}
       </div>
     </div>,
     document.body,
diff --git a/desktop/src/components/doctor/DoctorPanel.tsx b/desktop/src/components/doctor/DoctorPanel.tsx
index 1cd059f7..e4319b63 100644
--- a/desktop/src/components/doctor/DoctorPanel.tsx
+++ b/desktop/src/components/doctor/DoctorPanel.tsx
@@ -117,13 +117,10 @@ export function DoctorPanel({ compact = false }: DoctorPanelProps) {
   const healthyCount = report?.items.filter((item) => item.status === 'ok').length ?? 0
 
   return (
-    <Card as="section" radius="md" padding={compact ? 'sm' : 'md'}>
+    <Card as="section" radius="lg" surface="lowest" padding={compact ? 'sm' : 'md'}>
       <div className={`flex ${compact ? 'flex-col gap-3' : 'items-start justify-between gap-4'}`}>
         <div className="min-w-0">
-          <div
-            className="text-[14.5px] font-semibold text-[var(--color-text-primary)]"
-            style={{ fontFamily: 'var(--font-headline)' }}
-          >
+          <div className="text-[13px] font-semibold text-[var(--color-text-primary)]">
             {t('settings.diagnostics.doctorTitle')}
           </div>
           <p className="mt-1 text-xs text-[var(--color-text-tertiary)]">
@@ -138,7 +135,7 @@ export function DoctorPanel({ compact = false }: DoctorPanelProps) {
             size="sm"
             onClick={handleRunDoctor}
             loading={runningRequestId !== null}
-            icon={<Stethoscope className="h-4 w-4" aria-hidden="true" />}
+            icon={<Stethoscope size={14} strokeWidth={1.75} aria-hidden="true" />}
           >
             {t('settings.diagnostics.runDoctor')}
           </Button>
@@ -147,14 +144,14 @@ export function DoctorPanel({ compact = false }: DoctorPanelProps) {
             size="sm"
             onClick={() => setResetConfirmOpen(true)}
             loading={resettingRequestId !== null}
-            icon={<RotateCcw className="h-4 w-4" aria-hidden="true" />}
+            icon={<RotateCcw size={14} strokeWidth={1.75} aria-hidden="true" />}
           >
             {t('settings.diagnostics.resetSafeUiState')}
           </Button>
         </div>
       </div>
 
-      <div className="mt-2 text-[11px] leading-relaxed text-[var(--color-text-tertiary)]">
+      <div className="mt-3 text-xs leading-[1.5] text-[var(--color-text-tertiary)]">
         {t('settings.diagnostics.doctorSafeKeys')}
       </div>
       <div className="mt-2 text-xs text-[var(--color-text-secondary)]">
@@ -165,7 +162,7 @@ export function DoctorPanel({ compact = false }: DoctorPanelProps) {
 
       {report ? (
         <div className="mt-3 space-y-2">
-          <Card radius="md" surface="none" padding="sm" className="bg-[var(--color-surface-container)] text-xs text-[var(--color-text-secondary)]">
+          <Card radius="md" surface="container" border="none" padding="sm" className="text-xs text-[var(--color-text-secondary)]">
             {t('settings.diagnostics.doctorSummary', {
               healthy: String(healthyCount),
               neutral: String(report.summary.neutralCount),
@@ -186,7 +183,7 @@ export function DoctorPanel({ compact = false }: DoctorPanelProps) {
       ) : null}
 
       {resetResult ? (
-        <Card radius="md" surface="none" padding="sm" className="mt-2 bg-[var(--color-surface-container)] text-xs text-[var(--color-text-secondary)]">
+        <Card radius="md" surface="container" border="none" padding="sm" className="mt-2 text-xs text-[var(--color-text-secondary)]">
           <div>{t('settings.diagnostics.doctorRemovedKeys')}: {formatKeys(resetResult.removedKeys, t('settings.diagnostics.doctorNoKeys'))}</div>
           <div className="mt-1">{t('settings.diagnostics.doctorFailedKeys')}: {formatKeys(resetResult.failedKeys, t('settings.diagnostics.doctorNoKeys'))}</div>
         </Card>
@@ -214,7 +211,7 @@ function DoctorFinding({ item }: { item: DoctorReportItem }) {
   return (
     <Card radius="md" surface="none" padding="sm" className="text-xs">
       <div className="flex flex-wrap items-center justify-between gap-2">
-        <span className="font-mono text-[var(--color-text-secondary)] break-all">{item.path}</span>
+        <span className="break-all font-mono text-[var(--color-text-primary)]">{item.path}</span>
         <Badge tone="warning" size="sm">{getStatusLabel(t, item.status)}</Badge>
       </div>
       {item.error ? <div className="mt-1 text-[var(--color-text-tertiary)] break-words">{item.error}</div> : null}
diff --git a/desktop/src/components/layout/AppShell.tsx b/desktop/src/components/layout/AppShell.tsx
index f37bd506..142d347f 100644
--- a/desktop/src/components/layout/AppShell.tsx
+++ b/desktop/src/components/layout/AppShell.tsx
@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useRef, useState, type HTMLAttributes } from 'react'
+import { Menu, X } from 'lucide-react'
 import { Sidebar } from './Sidebar'
 import { ContentRouter } from './ContentRouter'
 import { ToastContainer } from '@/components/layout/Toast'
@@ -273,7 +274,7 @@ export function AppShell() {
 
   if (!ready) {
     return (
-      <div className="app-shell-viewport flex items-center justify-center bg-[var(--color-surface)] text-[var(--color-text-secondary)]">
+      <div className="app-shell-viewport flex items-center justify-center bg-[var(--color-surface)] text-[13px] text-[var(--color-text-tertiary)]">
         {t('app.launching')}
       </div>
     )
@@ -333,7 +334,9 @@ export function AppShell() {
             <span className="relative inline-flex shrink-0">
               <IconButton
                 data-testid="mobile-sidebar-toggle"
-                icon={effectiveSidebarOpen ? 'close' : 'menu'}
+                icon={effectiveSidebarOpen
+                  ? <X size={20} strokeWidth={1.75} aria-hidden="true" />
+                  : <Menu size={20} strokeWidth={1.75} aria-hidden="true" />}
                 label={effectiveSidebarOpen ? t('sidebar.collapse') : t('sidebar.expand')}
                 onClick={toggleEffectiveSidebar}
                 size="2xl"
@@ -345,16 +348,16 @@ export function AppShell() {
               <MobileAttentionDot activeSessionId={activeTabId} />
             </span>
             {activeTab?.type === 'settings' ? (
-              <h1 className="min-w-0 flex-1 truncate text-[15px] font-bold leading-tight text-[var(--color-text-primary)]">{t('sidebar.settings')}</h1>
+              <h1 className="min-w-0 flex-1 truncate text-[15px] font-semibold leading-tight text-[var(--color-text-primary)]">{t('sidebar.settings')}</h1>
             ) : isActiveChatTab ? (
               <div className="min-w-0 flex-1">
-                <h1 className="truncate text-[15px] font-bold leading-tight text-[var(--color-text-primary)]">
+                <h1 className="truncate text-[15px] font-semibold leading-tight text-[var(--color-text-primary)]">
                   {mobileSessionTitle}
                 </h1>
-                <div className="mt-0.5 flex min-w-0 items-center gap-1.5 overflow-hidden whitespace-nowrap text-[10px] font-medium text-[var(--color-text-tertiary)]">
+                <div className="mt-0.5 flex min-w-0 items-center gap-1.5 overflow-hidden whitespace-nowrap text-[11px] text-[var(--color-text-tertiary)]">
                   {activeTab?.status === 'running' ? (
                     <span className="flex shrink-0 items-center gap-1 text-[var(--color-text-secondary)]">
-                      <StatusDot tone="success" pulse />
+                      <StatusDot tone="info" pulse />
                       {t('session.active')}
                     </span>
                   ) : null}
diff --git a/desktop/src/components/layout/H5ConnectionView.tsx b/desktop/src/components/layout/H5ConnectionView.tsx
index de5bc24e..ab0edba9 100644
--- a/desktop/src/components/layout/H5ConnectionView.tsx
+++ b/desktop/src/components/layout/H5ConnectionView.tsx
@@ -48,20 +48,17 @@ export function H5ConnectionView({
       <Card
         as="section"
         radius="xl"
-        surface="low"
+        surface="lowest"
         padding="lg"
         shadow="card"
         className="w-full max-w-md"
       >
         <div className="mb-5 flex flex-col items-center gap-3 text-center">
           <BrandSeal size="lg" />
-          <h1
-            className="text-[21px] font-semibold tracking-tight text-[var(--color-text-primary)]"
-            style={{ fontFamily: 'var(--font-headline)' }}
-          >
+          <h1 className="mt-1 text-[22px] font-semibold tracking-tight text-[var(--color-text-primary)]">
             {t('h5Connect.title')}
           </h1>
-          <p className="text-sm leading-6 text-[var(--color-text-secondary)]">
+          <p className="text-[13px] leading-6 text-[var(--color-text-tertiary)]">
             {t('h5Connect.subtitle')}
           </p>
         </div>
@@ -88,7 +85,7 @@ export function H5ConnectionView({
           {error ? (
             <div
               role="alert"
-              className="rounded-[var(--radius-md)] border border-[var(--color-error)] bg-[var(--color-error-container)] px-3 py-2 text-sm text-[var(--color-on-error-container)]"
+              className="rounded-[var(--radius-md)] bg-[var(--color-error-container)] px-3 py-2 text-[13px] text-[var(--color-on-error-container)]"
             >
               {error}
             </div>
diff --git a/desktop/src/components/layout/NewSessionStarter.test.tsx b/desktop/src/components/layout/NewSessionStarter.test.tsx
new file mode 100644
index 00000000..1bd95ea3
--- /dev/null
+++ b/desktop/src/components/layout/NewSessionStarter.test.tsx
@@ -0,0 +1,122 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, fireEvent, render, screen, within } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { NewSessionStarter, pickRecentSessions } from './NewSessionStarter'
+import { useChatStore } from '../../stores/chatStore'
+import { useSessionStore } from '../../stores/sessionStore'
+import { useSettingsStore } from '../../stores/settingsStore'
+import type { SessionListItem } from '../../types/session'
+
+const NOW = Date.now()
+
+function session(
+  id: string,
+  overrides: Partial<SessionListItem> & { minutesAgo?: number } = {},
+): SessionListItem {
+  const { minutesAgo = 10, ...rest } = overrides
+  const at = new Date(NOW - minutesAgo * 60_000).toISOString()
+  return {
+    id,
+    title: id,
+    createdAt: at,
+    modifiedAt: at,
+    messageCount: 3,
+    projectPath: '/workspace/alpha',
+    projectRoot: '/workspace/alpha',
+    workDir: '/workspace/alpha',
+    workDirExists: true,
+    ...rest,
+  }
+}
+
+describe('pickRecentSessions', () => {
+  it('keeps the project’s threads with content, newest first, three at most', () => {
+    const picked = pickRecentSessions([
+      session('a', { minutesAgo: 30 }),
+      session('b', { minutesAgo: 5 }),
+      session('c', { minutesAgo: 60 }),
+      session('d', { minutesAgo: 1 }),
+      session('blank', { minutesAgo: 0, messageCount: 0 }),
+      session('other', { minutesAgo: 0, projectRoot: '/workspace/beta', workDir: '/workspace/beta' }),
+    ], '/workspace/alpha', null)
+
+    expect(picked.map((item) => item.id)).toEqual(['d', 'b', 'a'])
+  })
+
+  it('leaves out the draft on screen', () => {
+    const picked = pickRecentSessions([session('draft', { minutesAgo: 0 }), session('kept')], '/workspace/alpha', 'draft')
+
+    expect(picked.map((item) => item.id)).toEqual(['kept'])
+  })
+
+  it('matches a temp-dir project whichever /private spelling either side uses', () => {
+    const picked = pickRecentSessions([
+      session('tmp', { projectRoot: '/private/var/folders/x/T/proj', workDir: '/var/folders/x/T/proj' }),
+    ], '/var/folders/x/T/proj', null)
+
+    expect(picked.map((item) => item.id)).toEqual(['tmp'])
+  })
+
+  it('lists recent threads from any project when no project is chosen yet', () => {
+    const picked = pickRecentSessions([
+      session('a', { minutesAgo: 2 }),
+      session('b', { minutesAgo: 1, projectRoot: '/workspace/beta', workDir: '/workspace/beta' }),
+    ], null, null)
+
+    expect(picked.map((item) => item.id)).toEqual(['b', 'a'])
+  })
+})
+
+describe('NewSessionStarter', () => {
+  const openHistoricalSession = vi.fn()
+  const connectToSession = vi.fn()
+
+  beforeEach(() => {
+    useSettingsStore.setState({ locale: 'en' })
+    useSessionStore.setState({
+      sessions: [session('Fix login', { minutesAgo: 3 }), session('Write docs', { minutesAgo: 90 })],
+      openHistoricalSession,
+    } as Partial<ReturnType<typeof useSessionStore.getState>>)
+    useChatStore.setState({ connectToSession } as Partial<ReturnType<typeof useChatStore.getState>>)
+  })
+
+  afterEach(() => {
+    cleanup()
+    vi.clearAllMocks()
+  })
+
+  it('hands a starter’s words to the caller, which owns the draft', () => {
+    const onSuggestion = vi.fn()
+    render(<NewSessionStarter projectPath="/workspace/alpha" onSuggestion={onSuggestion} />)
+
+    const group = screen.getByRole('group', { name: 'Suggestions' })
+    const chips = within(group).getAllByRole('button')
+    expect(chips.map((chip) => chip.textContent)).toEqual([
+      'Explain how this repo is structured',
+      'Fix the failing tests',
+      'Review my uncommitted changes',
+      'Build a new feature',
+    ])
+
+    fireEvent.click(chips[2]!)
+    expect(onSuggestion).toHaveBeenCalledWith('Review my uncommitted changes')
+  })
+
+  it('reopens a recent thread the way the sidebar does', () => {
+    render(<NewSessionStarter projectPath="/workspace/alpha" projectLabel="alpha" onSuggestion={vi.fn()} />)
+
+    const recent = screen.getByRole('region', { name: 'Recent sessions' })
+    expect(within(recent).getByText('alpha')).toBeInTheDocument()
+
+    fireEvent.click(within(recent).getByRole('button', { name: /Fix login/ }))
+    expect(openHistoricalSession).toHaveBeenCalledWith(expect.objectContaining({ id: 'Fix login' }))
+    expect(connectToSession).toHaveBeenCalledWith('Fix login')
+  })
+
+  it('shows no recent section when the project has nothing to return to', () => {
+    render(<NewSessionStarter projectPath="/workspace/empty" onSuggestion={vi.fn()} />)
+
+    expect(screen.queryByRole('region')).not.toBeInTheDocument()
+    expect(screen.getByRole('group', { name: 'Suggestions' })).toBeInTheDocument()
+  })
+})
diff --git a/desktop/src/components/layout/NewSessionStarter.tsx b/desktop/src/components/layout/NewSessionStarter.tsx
new file mode 100644
index 00000000..61b576d1
--- /dev/null
+++ b/desktop/src/components/layout/NewSessionStarter.tsx
@@ -0,0 +1,154 @@
+import { useId, useMemo } from 'react'
+import { CircleX, Eye, Hammer, MessageSquare, SearchCode, type LucideIcon } from 'lucide-react'
+import { Button } from '@/components/ui/Button'
+import { useTranslation, type TranslationKey } from '../../i18n'
+import { useChatStore } from '../../stores/chatStore'
+import { useSessionStore } from '../../stores/sessionStore'
+import type { SessionListItem } from '../../types/session'
+import { getSessionProjectKey, isSameOrChildPath } from './sidebarTaskGroups'
+
+const RECENT_LIMIT = 3
+
+/** Explicit keys, so a literal-only i18n scan sees every one of them. */
+const SUGGESTIONS: ReadonlyArray<{ id: string; icon: LucideIcon; key: TranslationKey }> = [
+  { id: 'explain-repo', icon: SearchCode, key: 'empty.suggestion.explainRepo' },
+  { id: 'fix-tests', icon: CircleX, key: 'empty.suggestion.fixTests' },
+  { id: 'review-changes', icon: Eye, key: 'empty.suggestion.reviewChanges' },
+  { id: 'new-feature', icon: Hammer, key: 'empty.suggestion.newFeature' },
+]
+
+type Translate = ReturnType<typeof useTranslation>
+
+export type NewSessionStarterProps = {
+  /**
+   * The project the new session will run in — a project root or work dir.
+   * Recent sessions are drawn from it; null lists recent sessions anywhere.
+   */
+  projectPath: string | null | undefined
+  /** Shown beside the recent-sessions heading. */
+  projectLabel?: string | null
+  /** The draft session on screen, which must not list itself as "recent". */
+  excludeSessionId?: string | null
+  /** Puts a suggestion's text into the composer; the caller owns the draft. */
+  onSuggestion: (text: string) => void
+}
+
+/**
+ * What sits under the composer on a blank session (「素」, su-12): a row of
+ * starter prompts and the last few sessions in the same project, so picking
+ * up yesterday's thread is one click from the place a new one starts.
+ */
+export function NewSessionStarter({
+  projectPath,
+  projectLabel,
+  excludeSessionId,
+  onSuggestion,
+}: NewSessionStarterProps) {
+  const t = useTranslation()
+  const sessions = useSessionStore((s) => s.sessions)
+  const recentTitleId = useId()
+
+  const recent = useMemo(
+    () => pickRecentSessions(sessions, projectPath ?? null, excludeSessionId ?? null),
+    [excludeSessionId, projectPath, sessions],
+  )
+
+  const openSession = (session: SessionListItem) => {
+    useSessionStore.getState().openHistoricalSession(session)
+    useChatStore.getState().connectToSession(session.id)
+  }
+
+  return (
+    <div data-testid="new-session-starter" className="flex w-full flex-col items-center">
+      <div
+        role="group"
+        aria-label={t('empty.suggestions')}
+        className="flex flex-wrap justify-center gap-2"
+      >
+        {SUGGESTIONS.map(({ id, icon: Icon, key }) => (
+          <Button
+            key={id}
+            variant="secondary"
+            size="base"
+            icon={<Icon size={14} strokeWidth={1.75} className="text-[var(--color-text-tertiary)]" aria-hidden="true" />}
+            onClick={() => onSuggestion(t(key))}
+          >
+            {t(key)}
+          </Button>
+        ))}
+      </div>
+
+      {recent.length > 0 && (
+        <section
+          aria-labelledby={recentTitleId}
+          className="mt-12 w-full max-w-[720px]"
+        >
+          <h2 className="flex items-baseline gap-2 px-2.5 pb-1.5 text-[12px] font-semibold text-[var(--color-text-secondary)]">
+            <span id={recentTitleId}>{t('empty.recentTitle')}</span>
+            {projectLabel ? (
+              <span className="min-w-0 truncate font-normal text-[var(--color-text-tertiary)]">{projectLabel}</span>
+            ) : null}
+          </h2>
+          <ul>
+            {recent.map((session) => (
+              <li key={session.id}>
+                <button
+                  type="button"
+                  onClick={() => openSession(session)}
+                  title={session.title || t('session.untitled')}
+                  className="flex h-9 w-full items-center gap-2.5 rounded-[var(--radius-sm)] px-2.5 text-left text-[13px] text-[var(--color-text-secondary)] transition-colors hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]"
+                >
+                  <MessageSquare size={14} strokeWidth={1.75} className="shrink-0 text-[var(--color-text-tertiary)]" aria-hidden="true" />
+                  <span className="min-w-0 flex-1 truncate">{session.title || t('session.untitled')}</span>
+                  <span className="shrink-0 text-[12px] tabular-nums text-[var(--color-text-tertiary)]">
+                    {formatRelativeTime(session.modifiedAt, t)}
+                  </span>
+                </button>
+              </li>
+            ))}
+          </ul>
+        </section>
+      )}
+    </div>
+  )
+}
+
+/**
+ * Sessions that belong to `projectPath` — by project key, or by a work dir
+ * inside it — newest first. Empty sessions (no messages) are left out: they
+ * are other blank drafts, not threads worth returning to.
+ */
+export function pickRecentSessions(
+  sessions: SessionListItem[],
+  projectPath: string | null,
+  excludeSessionId: string | null,
+  limit = RECENT_LIMIT,
+): SessionListItem[] {
+  const target = projectPath?.trim() ? projectPath : null
+  // Equality through `isSameOrChildPath` both ways, so the macOS `/private`
+  // spelling of a temp path still matches the one the shell used.
+  const samePlace = (a: string, b: string) => isSameOrChildPath(a, b) && isSameOrChildPath(b, a)
+  const inProject = (session: SessionListItem) => {
+    if (!target) return true
+    if (samePlace(getSessionProjectKey(session), target)) return true
+    return session.workDir ? samePlace(session.workDir, target) : false
+  }
+  return sessions
+    .filter((session) => session.id !== excludeSessionId && session.messageCount > 0 && inProject(session))
+    .sort((a, b) => (a.modifiedAt < b.modifiedAt ? 1 : a.modifiedAt > b.modifiedAt ? -1 : 0))
+    .slice(0, limit)
+}
+
+function formatRelativeTime(dateStr: string, t: Translate): string {
+  const date = new Date(dateStr)
+  const timestamp = date.getTime()
+  if (!Number.isFinite(timestamp)) return ''
+  const min = Math.floor((Date.now() - timestamp) / 60000)
+  if (min < 1) return t('session.timeJustNow')
+  if (min < 60) return t('session.timeMinutes', { n: min })
+  const hr = Math.floor(min / 60)
+  if (hr < 24) return t('session.timeHours', { n: hr })
+  const day = Math.floor(hr / 24)
+  if (day < 30) return t('session.timeDays', { n: day })
+  return new Intl.DateTimeFormat(undefined, { month: 'numeric', day: 'numeric' }).format(date)
+}
diff --git a/desktop/src/components/layout/OpenProjectMenu.tsx b/desktop/src/components/layout/OpenProjectMenu.tsx
index 9c18c05e..25915406 100644
--- a/desktop/src/components/layout/OpenProjectMenu.tsx
+++ b/desktop/src/components/layout/OpenProjectMenu.tsx
@@ -78,21 +78,21 @@ export function OpenProjectMenu({ path }: Props) {
           }
           void handleOpenTarget(primaryTarget.id)
         }}
-        className={`inline-flex h-8 items-center justify-center gap-1 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] text-[var(--color-text-tertiary)] transition-[background-color,color,border-color,box-shadow] duration-150 ease-out hover:border-[var(--color-outline)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface)] ${
+        className={`inline-flex h-7 items-center justify-center gap-1 rounded-[var(--radius-sm)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] text-[var(--color-text-tertiary)] transition-[background-color,color,border-color,box-shadow] duration-150 ease-out hover:border-[var(--color-outline)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface)] ${
           hasMenu
-            ? 'min-w-[2.75rem] px-2 hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)]'
-            : 'w-8 hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)]'
+            ? 'min-w-[2.75rem] px-1.5 hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)]'
+            : 'w-7 hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)]'
         }`}
       >
         <TargetIcon target={primaryTarget} />
-        {hasMenu && <ChevronDown size={14} strokeWidth={1.9} />}
+        {hasMenu && <ChevronDown size={12} strokeWidth={2} aria-hidden="true" />}
       </button>
 
       {open && hasMenu && rect ? createPortal(
         <div
           ref={menuRef}
           role="menu"
-          className="glass-panel fixed z-[var(--z-dropdown)] min-w-[220px] overflow-hidden rounded-[var(--radius-lg)] py-1"
+          className="fixed z-[var(--z-dropdown)] min-w-[220px] overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] p-1 shadow-[var(--shadow-dropdown)]"
           style={{ top: rect.bottom + 6, right: Math.max(12, window.innerWidth - rect.right) }}
         >
           {targets.map((target) => (
@@ -101,10 +101,10 @@ export function OpenProjectMenu({ path }: Props) {
               type="button"
               role="menuitem"
               onClick={() => void handleOpenTarget(target.id)}
-              className="flex w-full items-center gap-3 px-3 py-2.5 text-left text-sm font-medium text-[var(--color-text-primary)] transition-colors hover:bg-[var(--color-surface-hover)] focus-visible:outline-none focus-visible:bg-[var(--color-surface-hover)]"
+              className="flex h-9 w-full items-center gap-2.5 rounded-[var(--radius-sm)] px-2 text-left text-[13px] text-[var(--color-text-primary)] transition-colors hover:bg-[var(--color-surface-hover)] focus-visible:outline-none focus-visible:bg-[var(--color-surface-hover)]"
             >
-              <span className="flex h-7 w-7 items-center justify-center text-[var(--color-text-secondary)]">
-                <TargetIcon target={target} size={24} />
+              <span className="flex h-6 w-6 items-center justify-center text-[var(--color-text-secondary)]">
+                <TargetIcon target={target} size={20} />
               </span>
               <span className="min-w-0 truncate">{target.label}</span>
             </button>
diff --git a/desktop/src/components/layout/ProjectEditorModal.tsx b/desktop/src/components/layout/ProjectEditorModal.tsx
index ef4eebc7..f89c70d7 100644
--- a/desktop/src/components/layout/ProjectEditorModal.tsx
+++ b/desktop/src/components/layout/ProjectEditorModal.tsx
@@ -207,7 +207,7 @@ export function ProjectEditorModal(props: ProjectEditorModalProps) {
       <fieldset disabled={busy} className="m-0 min-w-0 border-0 p-0">
         <div className="flex flex-col gap-5">
           {displayedError && (
-            <p role="alert" className="rounded-[var(--radius-md)] border border-[var(--color-error)] bg-[var(--color-error-container)] px-3 py-2 text-sm text-[var(--color-on-error-container)]">
+            <p role="alert" className="rounded-[var(--radius-md)] bg-[var(--color-error-container)] px-3 py-2 text-[13px] text-[var(--color-on-error-container)]">
               {displayedError}
             </p>
           )}
@@ -234,7 +234,7 @@ export function ProjectEditorModal(props: ProjectEditorModalProps) {
               aria-describedby={showValidation && sourceFolderError ? 'project-editor-source-folder-error' : undefined}
               className="flex flex-col gap-1.5"
             >
-              <span id="project-editor-source-folder" className="text-sm font-medium text-[var(--color-text-primary)]">
+              <span id="project-editor-source-folder" className="text-[13px] font-medium text-[var(--color-text-primary)]">
                 {t('sidebar.projectEditor.sourceFolder')}
                 <span className="ml-0.5 text-[var(--color-error)]">*</span>
               </span>
@@ -247,7 +247,7 @@ export function ProjectEditorModal(props: ProjectEditorModalProps) {
                   aria-label={t('dirPicker.chooseProjectFolder')}
                   className="min-w-0 self-start max-w-full"
                 >
-                  <FolderOpen size={16} className="shrink-0" aria-hidden="true" />
+                  <FolderOpen size={14} strokeWidth={1.75} className="shrink-0" aria-hidden="true" />
                   <span className="truncate">{sourceFolder || t('dirPicker.chooseProjectFolder')}</span>
                 </Button>
               ) : (
@@ -271,11 +271,11 @@ export function ProjectEditorModal(props: ProjectEditorModalProps) {
           )}
 
           {mode === 'edit' && (
-            <div className="flex flex-col gap-3 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)] px-4 py-3">
+            <div className="flex flex-col gap-3 rounded-[var(--radius-md)] bg-[var(--color-surface-container)] px-4 py-3">
               {props.onRestoreFolderName && (
                 <div className="flex flex-wrap items-center justify-between gap-2">
                   <div>
-                    <p className="text-sm font-medium text-[var(--color-text-primary)]">
+                    <p className="text-[13px] font-medium text-[var(--color-text-primary)]">
                       {t('sidebar.projectEditor.restoreFolderName')}
                     </p>
                     <p className="mt-0.5 text-xs text-[var(--color-text-tertiary)]">
diff --git a/desktop/src/components/layout/SessionAttentionMark.test.tsx b/desktop/src/components/layout/SessionAttentionMark.test.tsx
index a70d0ddc..9f554a8b 100644
--- a/desktop/src/components/layout/SessionAttentionMark.test.tsx
+++ b/desktop/src/components/layout/SessionAttentionMark.test.tsx
@@ -24,27 +24,26 @@ describe('SessionAttentionMark', () => {
     expect(screen.queryByRole('status')).not.toBeInTheDocument()
   })
 
-  it('hides the ligature text so a screen reader does not say "warning" beside the label', () => {
+  it('hides the glyph so a screen reader hears only the label', () => {
     const { container } = render(<SessionAttentionMark label="Waiting for your approval" />)
 
-    const glyph = container.querySelector('.material-symbols-outlined')
-    expect(glyph).toHaveTextContent('warning')
+    const glyph = container.querySelector('svg')
     expect(glyph).toHaveAttribute('aria-hidden', 'true')
+    // The whole name comes from the label; nothing inside adds words to it.
+    expect(screen.getByRole('img')).toHaveTextContent('')
   })
 
-  it('draws a filled glyph', () => {
+  it('draws a ringed exclamation mark rather than another dot', () => {
     const { container } = render(<SessionAttentionMark label="Waiting" />)
 
-    // Outlined at 14px the exclamation mark is a hairline; filled it is a shape.
-    expect(container.querySelector('.material-symbols-outlined')).toHaveStyle({
-      fontVariationSettings: "'FILL' 1",
-    })
+    // Running is a dot; waiting must differ by outline, not only by colour.
+    expect(container.querySelector('svg.lucide-circle-alert')).toBeInTheDocument()
   })
 
   it('pulses three times and then holds still instead of blinking for hours', () => {
     const { container } = render(<SessionAttentionMark label="Waiting" />)
 
-    const glyph = container.querySelector<HTMLElement>('.material-symbols-outlined')
+    const glyph = container.querySelector<SVGElement>('svg')
     expect(glyph).toHaveClass('animate-pulse-dot')
     // Inline, so it overrides the `infinite` the class carries.
     expect(glyph?.style.animationIterationCount).toBe('3')
diff --git a/desktop/src/components/layout/SessionAttentionMark.tsx b/desktop/src/components/layout/SessionAttentionMark.tsx
index 47dc8ba4..3afccf32 100644
--- a/desktop/src/components/layout/SessionAttentionMark.tsx
+++ b/desktop/src/components/layout/SessionAttentionMark.tsx
@@ -1,14 +1,15 @@
+import { CircleAlert } from 'lucide-react'
+
 /**
  * "This session is waiting for you". The tab strip and both sidebar views draw
  * it through this one component, so `sessionNeedsAttention` keeping them in step
  * in state is matched by them staying in step in pixels.
  *
  * A glyph, not a coloured dot. A session parked on a permission card is still
- * running as far as `chatState` goes, and the running marker is a dot; warning
- * and brand are within 1.4–1.7:1 of each other in most themes, so a dot against
- * a dot leaves colour alone to tell "working" from "needs you", which is no
- * answer for anyone who cannot rely on it. The filled triangle has a different
- * outline from every dot in the app.
+ * running as far as `chatState` goes, and the running marker is a dot; a dot
+ * against a dot leaves colour alone to tell "working" from "needs you", which
+ * is no answer for anyone who cannot rely on it. The ringed exclamation mark
+ * has a different outline from every dot in the app.
  *
  * It pulses three times on arrival and then holds still. This state can sit
  * for hours, and `pulse-dot` dips to 0.3 opacity — a thin glyph would spend half
@@ -18,15 +19,14 @@
  *
  * `role="img"`, not `status`: a live region announces changes to its content,
  * and an empty span's aria-label is not one, so `status` promised an
- * announcement nothing delivers. The inner ligature text is hidden for the same
- * reason — left in, a screen reader would say "warning" next to the label.
+ * announcement nothing delivers. The svg inside is hidden for the same reason.
  *
  * The colour is `--color-on-warning-container`, the darker of the two warning
- * tokens, not `--color-warning`. This is a bare graphic with no text beside it
- * to fall back on, so it has to clear 3:1 on every ground it can sit on, and
- * `--color-warning` does not: it is 2.92:1 on warm-classic's hovered sidebar
- * row. The two are the same colour in the ink themes, where nothing changes.
- * `contrast.test.ts` measures all four grounds in all six themes.
+ * tokens, not `--color-warning`. This is a bare graphic that has to clear 3:1 on
+ * every ground it can sit on, and `--color-warning` does not: it is 2.92:1 on
+ * warm-classic's hovered sidebar row. The two are the same colour in the ink
+ * themes, where nothing changes. `contrast.test.ts` measures all four grounds
+ * in all six themes.
  */
 export function SessionAttentionMark({ label }: { label: string }) {
   return (
@@ -34,15 +34,17 @@ export function SessionAttentionMark({ label }: { label: string }) {
       role="img"
       aria-label={label}
       title={label}
-      className="inline-flex text-[var(--color-on-warning-container)]"
+      className="inline-flex shrink-0 text-[var(--color-on-warning-container)]"
     >
-      <span
+      <CircleAlert
         aria-hidden="true"
-        className="material-symbols-outlined animate-pulse-dot text-[14px] leading-none"
-        style={{ fontVariationSettings: "'FILL' 1", animationIterationCount: 3 }}
-      >
-        warning
-      </span>
+        size={14}
+        // 2 rather than the product's 1.75: this glyph carries the state on
+        // its own, and at 14px the thinner ring breaks up mid-pulse.
+        strokeWidth={2}
+        className="animate-pulse-dot"
+        style={{ animationIterationCount: 3 }}
+      />
     </span>
   )
 }
diff --git a/desktop/src/components/layout/Sidebar.test.tsx b/desktop/src/components/layout/Sidebar.test.tsx
index 16178368..eedc38e9 100644
--- a/desktop/src/components/layout/Sidebar.test.tsx
+++ b/desktop/src/components/layout/Sidebar.test.tsx
@@ -139,6 +139,7 @@ vi.mock('../../i18n', () => ({
       'sidebar.collapse': 'Collapse sidebar',
       'sidebar.expand': 'Expand sidebar',
       'session.lastUpdated': 'last updated {time}',
+      'sidebar.sessionStatus.attention': 'Needs you',
       'session.timeJustNow': 'just now',
       'session.timeMinutes': '{n}m ago',
       'session.timeHours': '{n}h ago',
@@ -569,7 +570,10 @@ describe('Sidebar', () => {
     expect(screen.getByText('beta')).toBeInTheDocument()
     expect(screen.getByRole('button', { name: /Alpha newest/ })).toBeInTheDocument()
     expect(screen.queryByRole('button', { name: /Alpha hidden/ })).not.toBeInTheDocument()
-    expect(screen.getByTestId('sidebar-project-session-list-workspace-alpha').parentElement).toHaveClass('pl-5')
+    // Rows span the full width (so the selected card does) and carry the
+    // indent themselves: `pl-8` lands the title on the project name's line.
+    expect(screen.getByRole('button', { name: /Alpha newest/ })).toHaveClass('pl-8')
+    expect(screen.getByTestId('sidebar-project-count-workspace-alpha')).toHaveTextContent('11')
     expect(screen.getByRole('button', { name: 'Collapse alpha' })).toHaveAttribute('data-state', 'open')
     expect(screen.getByTestId('sidebar-project-icon-workspace-alpha')).toHaveAttribute('data-icon-state', 'open')
 
@@ -843,7 +847,7 @@ describe('Sidebar', () => {
     const expandButton = screen.getByRole('button', { name: 'Expand display' })
     expect(expandButton).toHaveAttribute('aria-expanded', 'false')
     expect(expandButton.parentElement).toHaveClass('justify-start')
-    expect(expandButton).toHaveClass('text-[var(--color-text-tertiary)]', 'opacity-75')
+    expect(expandButton).toHaveClass('text-[var(--color-text-tertiary)]', 'pl-8')
 
     fireEvent.click(expandButton)
 
@@ -2163,8 +2167,17 @@ describe('Sidebar', () => {
     fireEvent.click(screen.getByRole('button', { name: 'Batch manage' }))
     fireEvent.click(screen.getByRole('button', { name: /First Session/ }))
 
-    expect(screen.getByRole('button', { name: /First Session/ }).parentElement).toHaveClass('mb-0.5')
+    expect(screen.getByRole('button', { name: /First Session/ }).parentElement).toHaveClass('mb-px')
     expect(screen.getByRole('button', { name: /First Session/ })).toHaveClass('sidebar-session-row--selected')
+    // Both the batch selection and the open session are the white card lifted
+    // off the sidebar ground: paper fill, hairline ring, raised shadow step.
+    for (const name of [/First Session/, /Second Session/]) {
+      expect(screen.getByRole('button', { name })).toHaveClass(
+        'bg-[var(--color-sidebar-item-active)]',
+        'shadow-[0_0_0_1px_var(--color-border),var(--shadow-raised)]',
+      )
+    }
+    expect(screen.getByRole('button', { name: /Third Session/ })).not.toHaveClass('bg-[var(--color-sidebar-item-active)]')
     expect(screen.getByRole('button', { name: /Second Session/ })).toHaveClass('sidebar-session-row--active')
     expect(screen.getByRole('button', { name: /Third Session/ })).toHaveClass('sidebar-session-row--idle')
   })
@@ -2232,6 +2245,70 @@ describe('Sidebar', () => {
     expect(screen.getByTestId('sidebar-settings-dock')).toHaveClass('absolute', 'bottom-0')
   })
 
+  // 「素」: refresh and batch-manage are list maintenance, not peers of search.
+  // They moved from beside the search box into the projects header, where the
+  // other list actions already sit, and must stay reachable there.
+  it('keeps refresh and batch-manage in the projects header instead of beside search', () => {
+    useSessionStore.setState({
+      sessions: [makeSession('alpha-1', 'Alpha one', '/workspace/alpha', '2026-05-15T10:00:00.000Z')],
+    })
+    render(<Sidebar />)
+
+    const header = screen.getByTestId('sidebar-projects-header')
+    const search = screen.getByTestId('sidebar-search-controls-section')
+    for (const name of ['Refresh sessions', 'Batch manage', 'Project menu']) {
+      expect(within(header).getByRole('button', { name })).toBeInTheDocument()
+      expect(within(search).queryByRole('button', { name })).not.toBeInTheDocument()
+    }
+
+    // Still a working toggle from its new home, and held in sight while on.
+    fireEvent.click(within(header).getByRole('button', { name: 'Batch manage' }))
+    const exit = within(header).getByRole('button', { name: 'Cancel batch mode' })
+    expect(exit).toHaveAttribute('aria-pressed', 'true')
+    expect(exit.parentElement).toHaveClass('opacity-100')
+  })
+
+  it('keeps the refresh control reachable while the first load is still in flight', async () => {
+    useSessionStore.setState({ sessions: [], isLoading: true })
+    render(<Sidebar />)
+    await waitFor(() => expect(fetchSessions).toHaveBeenCalledTimes(1))
+
+    const refresh = within(screen.getByTestId('sidebar-projects-header')).getByRole('button', { name: 'Refresh sessions' })
+    expect(refresh.querySelector('svg')).toHaveClass('animate-spin')
+    fireEvent.click(refresh)
+    await waitFor(() => expect(fetchSessions).toHaveBeenCalledTimes(2))
+  })
+
+  it('swaps the relative time for a short waiting label on a session that needs the user', () => {
+    useSessionStore.setState({
+      sessions: [makeSession('waiting', 'Waiting row', '/workspace/alpha', new Date(Date.now() - 20 * 60_000).toISOString())],
+    })
+    useChatStore.setState({
+      sessions: { waiting: makeChatSessionState({ chatState: 'tool_executing', ...openRequest }) },
+    } as Partial<ReturnType<typeof useChatStore.getState>>)
+    render(<Sidebar />)
+
+    const row = screen.getByRole('button', { name: /Waiting row/ })
+    expect(within(row).getByLabelText('Waiting for your approval')).toBeInTheDocument()
+    expect(within(row).getByText('Needs you')).toHaveAttribute('aria-hidden', 'true')
+    expect(within(row).queryByText('20m ago')).not.toBeInTheDocument()
+  })
+
+  it('draws the worktree branch only on sessions that really run in their own checkout', () => {
+    const at = new Date(Date.now() - 5 * 60_000).toISOString()
+    useSessionStore.setState({
+      sessions: [
+        // git spells the root through /private, the shell does not: same place.
+        { ...makeSession('tmp', 'Temp project', '/private/var/folders/x/T/proj', at), workDir: '/var/folders/x/T/proj' },
+        { ...makeSession('wt', 'Worktree run', '/workspace/alpha', at), workDir: '/workspace/alpha/.claude/worktrees/feature' },
+      ],
+    })
+    render(<Sidebar />)
+
+    expect(within(screen.getByRole('button', { name: /Temp project/ })).queryByText('worktree')).not.toBeInTheDocument()
+    expect(within(screen.getByRole('button', { name: /Worktree run/ })).getByText('worktree')).toHaveClass('sr-only')
+  })
+
   it('keeps mobile navigation focused on chat sessions', async () => {
     const onRequestClose = vi.fn()
     createSession.mockResolvedValue('session-mobile-new')
diff --git a/desktop/src/components/layout/Sidebar.tsx b/desktop/src/components/layout/Sidebar.tsx
index 1fc31088..f366a08d 100644
--- a/desktop/src/components/layout/Sidebar.tsx
+++ b/desktop/src/components/layout/Sidebar.tsx
@@ -1,5 +1,5 @@
 import { forwardRef, useEffect, useLayoutEffect, useState, useCallback, useMemo, useRef } from 'react'
-import { Bell, Check, ChevronDown, Clock, Folder, FolderOpen, FolderPlus, GitBranch, MoreHorizontal, Pin, PinOff, RefreshCw, RotateCcw, SquarePen, X } from 'lucide-react'
+import { Bell, CalendarClock, Check, ChevronRight, Clock, Ellipsis, Folder, FolderOpen, FolderPlus, GitBranch, ListChecks, Pin, PinOff, Plus, RefreshCw, RotateCcw, Search, Settings, SquarePen, Store, X } from 'lucide-react'
 import { releaseWorkspaceSession } from '../../lib/workspace/releaseSession'
 import { useSessionStore } from '../../stores/sessionStore'
 import { useUIStore } from '../../stores/uiStore'
@@ -45,11 +45,18 @@ import { getDesktopHost } from '../../lib/desktopHost'
 import { hasRunningBackgroundTasks } from '../../lib/backgroundTasks'
 import { collectAttentionIds } from '../../lib/sessionAttention'
 import { getSessionWorkspaceState, getSessionSeedWorkDir } from '../../lib/sessionWorkspace'
+import { detectPlatform } from '../../lib/workspace/shortcuts'
 import { SessionAttentionMark } from './SessionAttentionMark'
 
 const desktopHost = getDesktopHost()
 const isDesktopRuntime = desktopHost.isDesktop
 const isWindows = typeof navigator !== 'undefined' && /Win/.test(navigator.platform)
+const MOD_KEY = detectPlatform() === 'mac' ? '⌘' : 'Ctrl+'
+/** 「素」 kbd: mono 11, 18px tall, `--radius-xs`, hairline, paper fill, tertiary ink. */
+const KBD_CLASS = 'pointer-events-none inline-flex h-[18px] min-w-[18px] shrink-0 items-center justify-center rounded-[var(--radius-xs)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] px-1 font-mono text-[11px] leading-none text-[var(--color-text-tertiary)]'
+/** The selected row is a white card lifted off the sidebar ground. */
+const SIDEBAR_ROW_RAISED = 'bg-[var(--color-sidebar-item-active)] text-[var(--color-text-primary)] shadow-[0_0_0_1px_var(--color-border),var(--shadow-raised)]'
+const ICON_STROKE = 1.75
 const SESSION_LIST_AUTO_REFRESH_MS = 30_000
 const SESSION_LIST_BUILDING_REFRESH_MS = 1_500
 const SESSION_LIST_FOCUS_REFRESH_MIN_MS = 5_000
@@ -324,6 +331,22 @@ export function Sidebar({
     [pendingBatchDeleteSessionIds, sessionsById],
   )
   const expanded = isMobile ? true : sidebarOpen
+  // Only the packaged app has a version worth showing; the browser host
+  // answers with a placeholder.
+  const [appVersion, setAppVersion] = useState<string | null>(null)
+  useEffect(() => {
+    if (!isDesktopRuntime) return
+    let cancelled = false
+    Promise.resolve()
+      .then(() => desktopHost.app.getVersion())
+      .then((version) => {
+        if (!cancelled && typeof version === 'string' && version.trim()) setAppVersion(version.trim())
+      })
+      .catch(() => {})
+    return () => {
+      cancelled = true
+    }
+  }, [])
   const closeMobileDrawer = useCallback(() => {
     if (isMobile) onRequestClose?.()
   }, [isMobile, onRequestClose])
@@ -936,32 +959,30 @@ export function Sidebar({
       <div
         data-testid="sidebar-title-region"
         data-desktop-drag-region
-        className={`px-3 pb-2 ${isDesktopRuntime && !isWindows ? 'pt-[44px]' : 'pt-3'}`}
+        className={`px-2 pb-2 ${isDesktopRuntime && !isWindows ? 'pt-[44px]' : 'pt-3'}`}
       >
-        <div className={`flex ${expanded ? 'items-center justify-between gap-3' : 'flex-col items-center gap-2'}`}>
+        <div className={`flex ${expanded ? 'items-center justify-between gap-2' : 'flex-col items-center gap-2'}`}>
           {/* The mark only stands in for the wordmark on the rail. Expanded,
               the name says it better and the icon beside it is just clutter;
               collapsed, the copy is width-clamped to zero and the header would
               otherwise be empty. `sm` is the cleanest cut of the mark — two C's
               and the seal bar, no cursor or sparkles to turn to mush at 24px. */}
-          {/* Expanded, `pl-3` lands the wordmark on the same 24px line as the
-              nav icons, the search glyph and the settings gear below it —
-              the section's own `px-3` alone left it sticking out on its own.
+          {/* Expanded, `pl-2` lands the wordmark on the same 16px line as the
+              nav icons, the search glyph and the settings gear below it.
               Collapsed, the mark is centered on the rail instead. */}
-          <div className={`flex min-w-0 items-center ${expanded ? 'gap-2.5 pl-3' : 'justify-center'}`}>
+          <div className={`flex min-w-0 items-center ${expanded ? 'gap-2 pl-2' : 'justify-center'}`}>
             {!expanded ? <BrandSeal size="sm" /> : null}
             {/* One form, at every width. The header used to carry "Claude Code
                 Haha" and swap to this below ~230px of title region, which meant
                 the app answered to two names depending on how the sidebar was
                 dragged. It goes by the short one. */}
             <span
-              className={`sidebar-copy ${expanded ? 'sidebar-copy--visible' : 'sidebar-copy--hidden'} text-base font-bold tracking-tight text-[var(--color-text-primary)]`}
-              style={{ fontFamily: 'var(--font-headline)' }}
+              className={`sidebar-copy ${expanded ? 'sidebar-copy--visible' : 'sidebar-copy--hidden'} text-[15px] font-semibold leading-5 tracking-tight text-[var(--color-text-primary)]`}
             >
               cc-<span className="text-[var(--color-brand)]">haha</span>
             </span>
           </div>
-          <div className={`flex items-center ${expanded ? 'gap-1.5' : 'flex-col gap-2'}`}>
+          <div className={`flex items-center ${expanded ? 'gap-0.5' : 'flex-col gap-2'}`}>
             {/* 折叠态下整个会话列表都不渲染，露一个切不动视图的铃铛只会让人点空。
                 跟 GitHub 链接同一套处理：宽度夹到零、退出 tab 顺序，并且 `aria-hidden`
                 ——`sidebar-copy--hidden` 只是 `max-width:0; opacity:0`，元素仍留在
@@ -971,12 +992,11 @@ export function Sidebar({
               aria-hidden={!expanded}
             >
               <IconButton
-                icon={<Bell className="h-[17px] w-[17px]" strokeWidth={1.9} aria-hidden="true" />}
+                icon={<Bell size={16} strokeWidth={ICON_STROKE} aria-hidden="true" />}
                 label={t('sidebar.taskView')}
                 onClick={toggleTaskView}
-                size={isMobile ? '2xl' : 'md'}
-                tone={isTaskView ? 'brand' : 'muted'}
-                filled={isTaskView}
+                size={isMobile ? '2xl' : 'sm'}
+                tone="muted"
                 pressed={isTaskView}
                 surface="sidebar"
                 tabIndex={expanded ? undefined : -1}
@@ -987,7 +1007,7 @@ export function Sidebar({
               href="https://github.com/NanmiCoder/cc-haha"
               target="_blank"
               rel="noopener noreferrer"
-              className={`sidebar-copy ${expanded ? 'sidebar-copy--visible' : 'sidebar-copy--hidden'} inline-flex items-center justify-center rounded-[var(--radius-sm)] p-1 text-[var(--color-text-tertiary)] transition-colors hover:text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)]`}
+              className={`sidebar-copy ${expanded ? 'sidebar-copy--visible' : 'sidebar-copy--hidden'} inline-flex h-7 w-7 items-center justify-center rounded-[var(--radius-sm)] text-[var(--color-text-tertiary)] transition-colors hover:bg-[var(--color-sidebar-item-hover)] hover:text-[var(--color-text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]`}
               title="GitHub"
               tabIndex={expanded ? undefined : -1}
               aria-hidden={!expanded}
@@ -998,18 +1018,18 @@ export function Sidebar({
               <button
                 type="button"
                 onClick={closeMobileDrawer}
-                className="sidebar-toggle-button flex h-11 w-11 items-center justify-center rounded-[var(--radius-lg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface-sidebar)]"
+                className="sidebar-toggle-button flex h-11 w-11 items-center justify-center rounded-[var(--radius-md)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface-sidebar)]"
                 aria-label={t('sidebar.collapse')}
                 title={t('sidebar.collapse')}
               >
-                <span className="material-symbols-outlined text-[20px]">close</span>
+                <X size={18} strokeWidth={ICON_STROKE} aria-hidden="true" />
               </button>
             ) : (
               <button
                 type="button"
                 onClick={toggleSidebar}
                 data-testid={expanded ? 'sidebar-collapse-button' : 'sidebar-expand-button'}
-                className={`sidebar-toggle-button ${expanded ? 'sidebar-toggle-button--open h-8 w-8' : 'sidebar-toggle-button--collapsed h-8 w-8'} flex items-center justify-center rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface-sidebar)]`}
+                className={`sidebar-toggle-button ${expanded ? 'sidebar-toggle-button--open h-7 w-7' : 'sidebar-toggle-button--collapsed h-8 w-8'} flex items-center justify-center rounded-[var(--radius-sm)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface-sidebar)]`}
                 aria-label={expanded ? t('sidebar.collapse') : t('sidebar.expand')}
                 title={expanded ? t('sidebar.collapse') : t('sidebar.expand')}
               >
@@ -1020,7 +1040,7 @@ export function Sidebar({
         </div>
       </div>
 
-      <div className={`px-3 pb-3 flex flex-col ${expanded ? 'gap-0.5' : 'items-center gap-2'}`}>
+      <div className={`px-2 pb-1 flex flex-col ${expanded ? 'gap-px' : 'items-center gap-2'}`}>
         <NavItem
           active={false}
           collapsed={!expanded}
@@ -1033,7 +1053,8 @@ export function Sidebar({
               : null
             void createSessionForWorkDir(getSessionSeedWorkDir(currentSession))
           }}
-          icon={<PlusIcon />}
+          icon={<Plus size={16} strokeWidth={ICON_STROKE} aria-hidden="true" />}
+          shortcut={`${MOD_KEY}N`}
         >
           {t('sidebar.newSession')}
         </NavItem>
@@ -1047,7 +1068,7 @@ export function Sidebar({
               useTabStore.getState().openTab(SCHEDULED_TAB_ID, t('sidebar.scheduled'), 'scheduled')
               closeMobileDrawer()
             }}
-            icon={<ClockIcon />}
+            icon={<CalendarClock size={16} strokeWidth={ICON_STROKE} aria-hidden="true" />}
           >
             {t('sidebar.scheduled')}
           </NavItem>
@@ -1062,7 +1083,7 @@ export function Sidebar({
               useTabStore.getState().openTab(MARKET_TAB_ID, t('sidebar.extensions'), 'market')
               closeMobileDrawer()
             }}
-            icon={<StorefrontIcon />}
+            icon={<Store size={16} strokeWidth={ICON_STROKE} aria-hidden="true" />}
           >
             {t('sidebar.extensions')}
           </NavItem>
@@ -1074,45 +1095,20 @@ export function Sidebar({
         <>
           <div
             data-testid="sidebar-search-controls-section"
-            className="sidebar-section sidebar-section--visible relative z-20 flex-none px-3 pb-2"
+            className="sidebar-section sidebar-section--visible relative z-20 flex-none px-2 pb-1 pt-3"
             style={{ overflow: 'visible' }}
           >
-            <div className="flex items-center gap-1.5">
-              <button
-                type="button"
-                onClick={() => openModal('globalSearch')}
-                className={`flex min-w-0 flex-1 items-center gap-2 rounded-[var(--radius-md)] border border-[var(--color-sidebar-search-border)] bg-[var(--color-sidebar-search-bg)] pl-3 pr-2 text-left text-[13px] text-[var(--color-text-tertiary)] transition-colors hover:bg-[var(--color-sidebar-item-hover)] focus-visible:border-[var(--color-border-focus)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface-sidebar)] ${isMobile ? 'h-11' : 'h-9'}`}
-                aria-label={t('search.global.trigger')}
-                title={t('search.global.trigger')}
-              >
-                <span className="pointer-events-none flex shrink-0 items-center text-[var(--color-text-tertiary)]">
-                  <SearchIcon />
-                </span>
-                <span className="min-w-0 flex-1 truncate pl-2">{t('search.global.trigger')}</span>
-                <kbd className="pointer-events-none shrink-0 rounded border border-[var(--color-border)] bg-[var(--color-surface-container-low)] px-1 font-mono text-[10px] leading-tight text-[var(--color-text-tertiary)]">⌘K</kbd>
-              </button>
-              <IconButton
-                icon={<RefreshCw className={`h-4 w-4 ${showRefreshLoading ? 'animate-spin' : ''}`} strokeWidth={1.9} aria-hidden="true" />}
-                label={t('sidebar.refreshSessions')}
-                onClick={() => void refreshSessionsNow()}
-                size={isMobile ? '2xl' : 'lg'}
-                tone="secondary"
-                surface="sidebar"
-                className="border border-[var(--color-sidebar-search-border)] bg-[var(--color-sidebar-search-bg)]"
-              />
-              <IconButton
-                icon={isBatchMode ? 'close' : 'delete_sweep'}
-                label={isBatchMode ? t('sidebar.batchExit') : t('sidebar.batchManage')}
-                onClick={isBatchMode ? handleExitBatchMode : enterBatchMode}
-                size={isMobile ? '2xl' : 'lg'}
-                tone={isBatchMode ? 'brand' : 'secondary'}
-                surface="sidebar"
-                aria-pressed={isBatchMode}
-                className={isBatchMode
-                  ? 'border border-[var(--color-brand)] bg-[var(--color-sidebar-item-active)]'
-                  : 'border border-[var(--color-sidebar-search-border)] bg-[var(--color-sidebar-search-bg)]'}
-              />
-            </div>
+            <button
+              type="button"
+              onClick={() => openModal('globalSearch')}
+              className={`flex w-full min-w-0 items-center gap-2 rounded-[var(--radius-sm)] border border-[var(--color-sidebar-search-border)] bg-[var(--color-sidebar-search-bg)] pl-2 pr-1.5 text-left text-[13px] text-[var(--color-text-tertiary)] transition-colors hover:border-[var(--color-outline)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface-sidebar)] ${isMobile ? 'h-11' : 'h-[30px]'}`}
+              aria-label={t('search.global.trigger')}
+              title={t('search.global.trigger')}
+            >
+              <Search size={14} strokeWidth={ICON_STROKE} className="pointer-events-none shrink-0" aria-hidden="true" />
+              <span className="min-w-0 flex-1 truncate">{t('search.global.trigger')}</span>
+              {!isMobile && <kbd className={KBD_CLASS}>{MOD_KEY}K</kbd>}
+            </button>
           </div>
 
           <div
@@ -1120,16 +1116,16 @@ export function Sidebar({
             className="sidebar-section sidebar-section--visible flex flex-1 min-h-0 flex-col"
           >
             {isBatchMode && (
-              <div className="mx-3 mb-2 rounded-[8px] border border-[var(--color-border)] bg-[var(--color-surface)] px-2.5 py-2 shadow-sm">
-                <div className="flex items-center justify-between gap-2">
-                  <span className="min-w-0 text-xs font-medium text-[var(--color-text-primary)]">
+              <div className="mx-2 mb-1 mt-2 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] p-2">
+                <div className="flex items-center justify-between gap-2 pl-1">
+                  <span className="min-w-0 text-[12px] font-medium tabular-nums text-[var(--color-text-primary)]">
                     {t('sidebar.batchSelectedCount', { count: selectedCount })}
                   </span>
                   <IconButton
-                    icon={<span className="material-symbols-outlined text-[17px]" aria-hidden="true">close</span>}
+                    icon={<X size={14} strokeWidth={ICON_STROKE} aria-hidden="true" />}
                     label={t('sidebar.batchExit')}
                     onClick={handleExitBatchMode}
-                    size="sm"
+                    size="xs"
                     tone="muted"
                   />
                 </div>
@@ -1165,28 +1161,39 @@ export function Sidebar({
               ref={sessionScrollAreaRef}
               onScroll={(event) => notifyProjectHistoryAtSidebarBottom(event.currentTarget)}
               data-testid="sidebar-session-scroll-area"
-              className="sidebar-scroll-area min-h-0 flex-1 overflow-y-auto px-3 pb-20"
+              className="sidebar-scroll-area group/sidebar-list min-h-0 flex-1 overflow-y-auto px-2 pb-20 pt-2"
             >
+              {/* Refresh and batch-manage used to sit beside the search box as
+                  two full-size bordered buttons, which made them read as peers
+                  of search. They are list maintenance, so they live with the
+                  list: in this section header, revealed on hover like its other
+                  actions and always shown in the touch drawer. The header stays
+                  rendered while the first load is in flight, so a stuck load can
+                  still be retried by hand. */}
+              <ProjectHeaderActions
+                title={isTaskView ? t('sidebar.tasks') : t('sidebar.projects')}
+                menuLabel={t('sidebar.projectMenu')}
+                createLabel={t('sidebar.newProject')}
+                refreshLabel={t('sidebar.refreshSessions')}
+                refreshing={showRefreshLoading}
+                onRefresh={() => void refreshSessionsNow()}
+                batchLabel={isBatchMode ? t('sidebar.batchExit') : t('sidebar.batchManage')}
+                batchActive={isBatchMode}
+                onToggleBatch={isBatchMode ? handleExitBatchMode : enterBatchMode}
+                onOpenMenu={(event) => openProjectHeaderMenu(event, 'main')}
+                onOpenCreate={(event) => openProjectHeaderMenu(event, 'create')}
+                actionsRef={projectHeaderActionsRef}
+                isMobile={isMobile}
+              />
               {showInitialLoading ? (
-                <div className="px-3 py-4 text-center text-xs text-[var(--color-text-tertiary)]">
+                <div className="px-2 py-4 text-center text-[12px] text-[var(--color-text-tertiary)]">
                   {t('common.loading')}
                 </div>
               ) : filteredSessions.length === 0 && (
-                <div className="px-3 py-2">
+                <div className="px-2 py-2">
                   <EmptyState variant="inline" title={t('sidebar.noSessions')} />
                 </div>
               )}
-              {!showInitialLoading && (
-                <ProjectHeaderActions
-                  title={isTaskView ? t('sidebar.tasks') : t('sidebar.projects')}
-                  menuLabel={t('sidebar.projectMenu')}
-                  createLabel={t('sidebar.newProject')}
-                  onOpenMenu={(event) => openProjectHeaderMenu(event, 'main')}
-                  onOpenCreate={(event) => openProjectHeaderMenu(event, 'create')}
-                  actionsRef={projectHeaderActionsRef}
-                  isMobile={isMobile}
-                />
-              )}
               {isTaskView ? (
                 <SidebarTaskList
                   groups={taskGroups}
@@ -1237,12 +1244,12 @@ export function Sidebar({
                         setProjectDropTarget((current) => current?.key === project.key ? null : current)
                       }
                     }}
-                    className={`group/project relative mb-3.5 transition-opacity ${isProjectDragging ? 'opacity-50' : ''}`}
+                    className={`group/project relative mb-2.5 transition-opacity ${isProjectDragging ? 'opacity-50' : ''}`}
                   >
                     {dropBefore && (
                       <div className="pointer-events-none absolute -top-1 left-1 right-1 z-10 h-0.5 rounded-full bg-[var(--color-brand)]" />
                     )}
-                    <div className="flex items-center gap-1">
+                    <div className="flex items-center gap-0.5">
                       <button
                         type="button"
                         draggable={!isBatchMode}
@@ -1250,35 +1257,39 @@ export function Sidebar({
                         onDragEnd={clearProjectDragState}
                         onClick={() => toggleProjectCollapsed(project.key)}
                         data-state={projectCollapsed ? 'closed' : 'open'}
-                        className={`flex min-w-0 flex-1 cursor-grab items-center gap-2 rounded-[var(--radius-md)] px-1.5 text-left transition-[background,color] active:cursor-grabbing hover:bg-[var(--color-sidebar-item-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] ${isMobile ? 'min-h-11 py-2.5' : 'py-2'}`}
+                        className={`flex min-w-0 flex-1 cursor-grab items-center gap-2 rounded-[var(--radius-sm)] px-2 text-left transition-colors active:cursor-grabbing hover:bg-[var(--color-sidebar-item-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] ${isMobile ? 'min-h-11' : 'h-7'}`}
                         aria-expanded={!projectCollapsed}
                         aria-label={t(projectCollapsed ? 'sidebar.expandProject' : 'sidebar.collapseProject', { project: project.title })}
                         title={project.subtitle || project.title}
                       >
+                        {/* Open and closed differ by glyph, not by ink: every
+                            project header reads at the same weight. */}
                         <span
                           data-testid={`sidebar-project-icon-${domSafeProjectKey(project.key)}`}
                           data-icon-state={projectCollapsed ? 'closed' : 'open'}
-                          className={`flex h-5 w-5 flex-shrink-0 items-center justify-center transition-colors ${
-                            projectCollapsed
-                              ? 'text-[var(--color-text-secondary)]'
-                              : 'text-[var(--color-text-primary)]'
-                          }`}
+                          className="flex h-4 w-4 flex-shrink-0 items-center justify-center text-[var(--color-text-tertiary)]"
                         >
                           {projectCollapsed ? (
-                            <Folder className="h-[18px] w-[18px]" strokeWidth={1.9} aria-hidden="true" />
+                            <Folder size={16} strokeWidth={ICON_STROKE} aria-hidden="true" />
                           ) : (
-                            <FolderOpen className="h-[18px] w-[18px]" strokeWidth={1.9} aria-hidden="true" />
+                            <FolderOpen size={16} strokeWidth={ICON_STROKE} aria-hidden="true" />
                           )}
                         </span>
-                        <span className={`min-w-0 flex-1 truncate text-[13px] font-semibold leading-5 transition-colors ${
-                          projectCollapsed
-                            ? 'text-[var(--color-text-secondary)]'
-                            : 'text-[var(--color-text-primary)]'
-                        }`}>
+                        <span className="min-w-0 flex-1 truncate text-[12px] font-semibold text-[var(--color-text-secondary)]">
                           {project.title}
                         </span>
                         {isProjectPinned && (
-                          <Pin className="h-3.5 w-3.5 flex-shrink-0 text-[var(--color-text-tertiary)]" strokeWidth={1.8} aria-hidden="true" />
+                          <Pin size={12} strokeWidth={2} className="flex-shrink-0 text-[var(--color-text-tertiary)]" aria-hidden="true" />
+                        )}
+                        {!isBatchMode && (
+                          <span
+                            data-testid={`sidebar-project-count-${domSafeProjectKey(project.key)}`}
+                            className={`flex-shrink-0 text-[11px] font-medium tabular-nums text-[var(--color-text-tertiary)] ${
+                              isMobile ? '' : 'group-hover/project:hidden group-focus-within/project:hidden'
+                            }`}
+                          >
+                            {projectSessionTotal ?? project.sessions.length}
+                          </span>
                         )}
                       </button>
                       <div className="flex flex-shrink-0 items-center gap-1">
@@ -1286,10 +1297,10 @@ export function Sidebar({
                           <button
                             type="button"
                             onClick={() => toggleGroupSelection(groupIds)}
-                            className={`rounded-[var(--radius-sm)] px-1.5 py-1 text-[11px] font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] ${
+                            className={`h-6 rounded-[var(--radius-sm)] px-1.5 text-[11px] font-medium transition-colors hover:bg-[var(--color-sidebar-item-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] ${
                               groupSelectedCount > 0
-                                ? 'text-[var(--color-brand)] hover:bg-[var(--color-brand-soft)]'
-                                : 'text-[var(--color-text-tertiary)] hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-secondary)]'
+                                ? 'text-[var(--color-text-primary)]'
+                                : 'text-[var(--color-text-tertiary)] hover:text-[var(--color-text-secondary)]'
                             }`}
                             aria-label={t('sidebar.batchSelectGroup', { group: project.title })}
                           >
@@ -1299,17 +1310,20 @@ export function Sidebar({
                           </button>
                         )}
                         {!isBatchMode && (
-                          // Desktop reveals these on row hover. The touch drawer
-                          // has neither hover nor a way to focus through
-                          // `pointer-events: none`, so there they stay put — two
-                          // 44px targets with enough gap not to catch each other.
+                          // Desktop reveals these on row hover, in place of the
+                          // session count. At rest they take no width (clipped,
+                          // still focusable), so the title keeps the whole row.
+                          // The touch drawer has neither hover nor a way to focus
+                          // through `pointer-events: none`, so there they stay
+                          // put — two 44px targets with enough gap not to catch
+                          // each other.
                           <div className={`flex items-center transition-opacity duration-150 ${
                             isMobile
                               ? 'gap-1.5 opacity-100'
-                              : 'pointer-events-none gap-0.5 opacity-0 group-hover/project:pointer-events-auto group-hover/project:opacity-100 group-focus-within/project:pointer-events-auto group-focus-within/project:opacity-100'
+                              : 'pointer-events-none max-w-0 gap-0.5 overflow-hidden opacity-0 group-hover/project:pointer-events-auto group-hover/project:max-w-none group-hover/project:overflow-visible group-hover/project:opacity-100 group-focus-within/project:pointer-events-auto group-focus-within/project:max-w-none group-focus-within/project:overflow-visible group-focus-within/project:opacity-100'
                           }`}>
                             <IconButton
-                              icon={<MoreHorizontal className="h-[17px] w-[17px]" strokeWidth={2} aria-hidden="true" />}
+                              icon={<Ellipsis size={16} strokeWidth={ICON_STROKE} aria-hidden="true" />}
                               label={t('sidebar.projectActions', { project: project.title })}
                               onClick={(event) => {
                                 event.stopPropagation()
@@ -1321,7 +1335,7 @@ export function Sidebar({
                               surface="sidebar"
                             />
                             <IconButton
-                              icon={<SquarePen className="h-[16px] w-[16px]" strokeWidth={2} aria-hidden="true" />}
+                              icon={<SquarePen size={14} strokeWidth={ICON_STROKE} aria-hidden="true" />}
                               label={t('sidebar.newSessionInProject', { project: project.title })}
                               onClick={(event) => {
                                 event.stopPropagation()
@@ -1336,7 +1350,7 @@ export function Sidebar({
                       </div>
                     </div>
                     {!projectCollapsed && (
-                      <div className="mt-0.5 pl-5">
+                      <div className="mt-px">
                         <ProjectSessionList
                           projectKey={project.key}
                           outerScrollRef={sessionScrollAreaRef}
@@ -1356,7 +1370,7 @@ export function Sidebar({
                             <div
                               key={session.id}
                               data-sidebar-session-id={session.id}
-                              className="relative mb-0.5 last:mb-0"
+                              className="relative mb-px last:mb-0"
                             >
                               {renamingId === session.id ? (
                                 <input
@@ -1368,31 +1382,34 @@ export function Sidebar({
                                     if (e.key === 'Enter') handleFinishRename()
                                     if (e.key === 'Escape') cancelRename()
                                   }}
-                                  className="w-full rounded-[var(--radius-md)] border border-[var(--color-border-focus)] bg-[var(--color-surface)] px-3 py-2 text-sm text-[var(--color-text-primary)] outline-none"
+                                  className={`w-full rounded-[var(--radius-sm)] border border-[var(--color-border-focus)] bg-[var(--color-surface)] pl-[31px] pr-2 text-[13px] text-[var(--color-text-primary)] outline-none ${isMobile ? 'h-11' : 'h-[30px]'}`}
                                 />
                               ) : (
                                 <button
                                   onClick={(event) => handleSessionRowClick(event, session)}
                                   onContextMenu={(e) => handleContextMenu(e, session.id)}
+                                  // `pl-8` puts the title on the project name's
+                                  // line (8px inset + 16px folder + 8px gap), while
+                                  // the row's own fill still spans the full width.
                                   className={`
-                                    group/session w-full rounded-[var(--radius-md)] px-2 ${isMobile ? 'py-3' : 'py-1.5'} text-left text-[13px] transition-[background,filter,color,box-shadow] duration-200
+                                    group/session flex w-full items-center rounded-[var(--radius-sm)] pl-8 pr-2 ${isMobile ? 'min-h-11' : 'h-[30px]'} text-left text-[13px] transition-[background,color,box-shadow] duration-150
                                     focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--color-surface-sidebar)]
                                     ${selectedSessionIds.has(session.id)
-                                      ? 'sidebar-session-row--selected bg-[var(--color-sidebar-item-active)] text-[var(--color-text-primary)] shadow-[var(--shadow-card)]'
+                                      ? `sidebar-session-row--selected ${SIDEBAR_ROW_RAISED} font-medium`
                                       : session.id === activeTabId
-                                      // The handoff marks the open session as a card lifted off the
-                                      // sidebar ground: page-white fill plus the resting shadow step.
-                                      ? 'sidebar-session-row--active bg-[var(--color-sidebar-item-active)] text-[var(--color-text-primary)] shadow-[var(--shadow-card)]'
+                                      // The open session is a white card lifted off the
+                                      // sidebar ground: page fill, hairline, raised step.
+                                      ? `sidebar-session-row--active ${SIDEBAR_ROW_RAISED} font-medium`
                                       : 'sidebar-session-row--idle text-[var(--color-text-secondary)] hover:bg-[var(--color-sidebar-item-hover)] hover:text-[var(--color-text-primary)]'
                                     }
                                   `}
                                   aria-pressed={isBatchMode ? selectedSessionIds.has(session.id) : undefined}
                                   title={session.title || t('tabs.untitled')}
                                 >
-                                  <span className="flex min-w-0 items-center gap-1.5">
+                                  <span className="flex min-w-0 flex-1 items-center gap-1.5">
                                     {isBatchMode ? (
                                       <span
-                                        className={`flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-[5px] border transition-colors ${
+                                        className={`flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-[var(--radius-xs)] border transition-colors ${
                                           selectedSessionIds.has(session.id)
                                             ? 'border-[var(--color-brand)] bg-[var(--color-brand)] text-[var(--color-on-primary)]'
                                             // Hairline `--color-border` only reaches 1.2:1 here; a control
@@ -1402,14 +1419,14 @@ export function Sidebar({
                                         aria-hidden="true"
                                       >
                                         {selectedSessionIds.has(session.id) && (
-                                          <span className="material-symbols-outlined text-[12px]">check</span>
+                                          <Check size={12} strokeWidth={2} aria-hidden="true" />
                                         )}
                                       </span>
                                     ) : null}
-                                    <span className="min-w-0 flex-1 truncate font-medium tracking-normal">{session.title || t('tabs.untitled')}</span>
+                                    <span className="min-w-0 flex-1 truncate">{session.title || t('tabs.untitled')}</span>
                                     {getSessionWorkspaceState(session) === 'missing' && (
                                       <span
-                                        className="flex-shrink-0 text-[10px] text-[var(--color-warning)]"
+                                        className="flex-shrink-0 text-[11px] text-[var(--color-warning)]"
                                         title={session.workDir ?? ''}
                                       >
                                         {t('sidebar.missingDir')}
@@ -1429,11 +1446,11 @@ export function Sidebar({
                           ))}
                         </ProjectSessionList>
                         {showSessionFoldControl && (
-                          <div className="mt-2 flex justify-start px-2.5">
+                          <div className="mt-px flex justify-start">
                             <button
                               type="button"
                               onClick={() => toggleProjectSessionExpansion(project.key)}
-                              className={`inline-flex items-center justify-start text-[13px] font-semibold text-[var(--color-text-tertiary)] opacity-75 transition-[color,opacity] hover:text-[var(--color-text-secondary)] hover:opacity-100 focus-visible:rounded-[var(--radius-sm)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] ${isMobile ? 'min-h-11 py-2' : 'py-1'}`}
+                              className={`inline-flex items-center justify-start rounded-[var(--radius-sm)] pl-8 pr-2 text-[12px] text-[var(--color-text-tertiary)] transition-colors hover:text-[var(--color-text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] ${isMobile ? 'min-h-11' : 'h-7'}`}
                               aria-expanded={sessionsExpanded}
                             >
                               {sessionsExpanded
@@ -1460,8 +1477,9 @@ export function Sidebar({
       {(
         <div
           data-testid="sidebar-settings-dock"
-          className={`sidebar-settings-dock absolute bottom-0 left-0 right-0 border-t border-[var(--color-border)] p-3 ${expanded ? '' : 'flex justify-center'}`}
+          className={`sidebar-settings-dock absolute bottom-0 left-0 right-0 flex items-center border-t border-[var(--color-border)] p-2 ${expanded ? 'gap-1' : 'justify-center'}`}
         >
+          <div className={expanded ? 'flex min-w-0 flex-1' : 'flex'}>
           <NavItem
             active={activeTabId === SETTINGS_TAB_ID}
             collapsed={!expanded}
@@ -1471,17 +1489,26 @@ export function Sidebar({
               useTabStore.getState().openTab(SETTINGS_TAB_ID, t('sidebar.settings'), 'settings')
               closeMobileDrawer()
             }}
-            icon={<span className="material-symbols-outlined text-[18px]">settings</span>}
+            icon={<Settings size={16} strokeWidth={ICON_STROKE} aria-hidden="true" />}
           >
             {t('sidebar.settings')}
           </NavItem>
+          </div>
+          {expanded && appVersion ? (
+            <span
+              data-testid="sidebar-app-version"
+              className="shrink-0 px-2 font-mono text-[11px] tabular-nums text-[var(--color-text-tertiary)]"
+            >
+              v{appVersion}
+            </span>
+          ) : null}
         </div>
       )}
 
       {contextMenu && (
         <div
           ref={sessionContextMenuRef}
-          className="fixed z-[var(--z-dropdown)] min-w-[180px] overflow-hidden rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] py-2 shadow-[var(--shadow-dropdown)]"
+          className="fixed z-[var(--z-dropdown)] min-w-[180px] overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] p-1 shadow-[var(--shadow-dropdown)]"
           style={{ left: contextMenu.x, top: contextMenu.y }}
         >
           <button
@@ -1489,13 +1516,13 @@ export function Sidebar({
               const session = sessions.find((s) => s.id === contextMenu.id)
               handleStartRename(contextMenu.id, session?.title || '')
             }}
-            className="w-full px-4 py-2 text-left text-[13px] text-[var(--color-text-primary)] transition-colors hover:bg-[var(--color-surface-hover)]"
+            className="flex h-8 w-full items-center rounded-[var(--radius-sm)] px-2.5 text-left text-[13px] text-[var(--color-text-primary)] transition-colors hover:bg-[var(--color-surface-hover)]"
           >
             {t('common.rename')}
           </button>
           <button
             onClick={() => handleDelete(contextMenu.id)}
-            className="w-full px-4 py-2 text-left text-[13px] text-[var(--color-error)] transition-colors hover:bg-[var(--color-error-container)]"
+            className="flex h-8 w-full items-center rounded-[var(--radius-sm)] px-2.5 text-left text-[13px] text-[var(--color-error)] transition-colors hover:bg-[var(--color-error-container)]"
           >
             {t('common.delete')}
           </button>
@@ -1511,32 +1538,32 @@ export function Sidebar({
           <div
             ref={projectContextMenuRef}
             role="menu"
-            className="fixed z-[var(--z-dropdown)] min-w-[230px] overflow-hidden rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] py-2 shadow-[var(--shadow-dropdown)]"
+            className="fixed z-[var(--z-dropdown)] min-w-[230px] overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] p-1 shadow-[var(--shadow-dropdown)]"
             style={positionProjectMenu(projectContextMenu.x, projectContextMenu.y)}
             onClick={(event) => event.stopPropagation()}
           >
             {project.key !== 'unknown' && project.workDir && (
               <ProjectMenuItem
-                icon={<SquarePen size={18} aria-hidden="true" />}
+                icon={<SquarePen size={16} strokeWidth={ICON_STROKE} aria-hidden="true" />}
                 onClick={() => openProjectEditor(project)}
               >
                 {t('sidebar.projectEditor.editTitle')}
               </ProjectMenuItem>
             )}
             <ProjectMenuItem
-              icon={pinned ? <PinOff size={18} aria-hidden="true" /> : <Pin size={18} aria-hidden="true" />}
+              icon={pinned ? <PinOff size={16} strokeWidth={ICON_STROKE} aria-hidden="true" /> : <Pin size={16} strokeWidth={ICON_STROKE} aria-hidden="true" />}
               onClick={() => togglePinnedProject(project.key)}
             >
               {t(pinned ? 'sidebar.unpinProject' : 'sidebar.pinProject')}
             </ProjectMenuItem>
             <ProjectMenuItem
-              icon={<FolderOpen size={18} aria-hidden="true" />}
+              icon={<FolderOpen size={16} strokeWidth={ICON_STROKE} aria-hidden="true" />}
               onClick={() => void openProjectInFileManager(project)}
             >
               {t(openInFileManagerKey(fileManagerPlatform))}
             </ProjectMenuItem>
             <ProjectMenuItem
-              icon={hidden ? <RotateCcw size={18} aria-hidden="true" /> : <X size={18} aria-hidden="true" />}
+              icon={hidden ? <RotateCcw size={16} strokeWidth={ICON_STROKE} aria-hidden="true" /> : <X size={16} strokeWidth={ICON_STROKE} aria-hidden="true" />}
               onClick={() => toggleHiddenProject(project)}
               danger={!hidden}
             >
@@ -1651,7 +1678,7 @@ export function Sidebar({
               <div className="mb-1.5 text-xs font-medium text-[var(--color-text-primary)]">
                 {t('sidebar.batchDeleteConfirmBody')}
               </div>
-              <ul className="max-h-40 space-y-1 overflow-y-auto rounded-[8px] border border-[var(--color-border)] bg-[var(--color-surface-container-low)] p-2">
+              <ul className="max-h-40 space-y-1 overflow-y-auto rounded-[var(--radius-md)] bg-[var(--color-surface-container)] p-2">
                 {pendingBatchDeleteSessions.slice(0, 5).map((session) => (
                   <li key={session.id} className="truncate text-xs text-[var(--color-text-secondary)]">
                     {session.title || t('tabs.untitled')}
@@ -1766,6 +1793,12 @@ function ProjectHeaderActions({
   title,
   menuLabel,
   createLabel,
+  refreshLabel,
+  refreshing,
+  onRefresh,
+  batchLabel,
+  batchActive,
+  onToggleBatch,
   onOpenMenu,
   onOpenCreate,
   actionsRef,
@@ -1774,44 +1807,72 @@ function ProjectHeaderActions({
   title: string
   menuLabel: string
   createLabel: string
+  refreshLabel: string
+  refreshing: boolean
+  onRefresh: () => void
+  batchLabel: string
+  batchActive: boolean
+  onToggleBatch: () => void
   onOpenMenu: (event: React.MouseEvent) => void
   onOpenCreate: (event: React.MouseEvent) => void
   /** Handed to `useDismissable` as the trigger, so opening does not self-close. */
   actionsRef: React.RefObject<HTMLDivElement>
   isMobile?: boolean
 }) {
+  const size = isMobile ? '2xl' : 'xs'
   return (
     <div
       data-testid="sidebar-projects-header"
-      className="group/sidebar-projects flex items-center justify-between px-1.5 pb-2 pt-1"
+      className={`group/sidebar-projects flex items-center justify-between pl-2 pr-0.5 ${isMobile ? 'pb-1' : 'h-7'}`}
     >
-      <div className="text-[12px] font-semibold tracking-normal text-[var(--color-text-primary)]">
+      <div className="text-[12px] font-semibold text-[var(--color-text-tertiary)]">
         {title}
       </div>
-      {/* Hover-revealed on desktop. A touch drawer has no hover, and these kept
-          `pointer-events`, so on the phone they were invisible but still
+      {/* Hover-revealed on desktop — anywhere over the list, not only this
+          row — and held open while batch mode is on, so the pressed toggle
+          that ends it stays in sight. A touch drawer has no hover, and these
+          kept `pointer-events`, so on the phone they were invisible but still
           tappable — a blind target. */}
       <div
         ref={actionsRef}
         className={`flex items-center transition-opacity focus-within:opacity-100 ${
           isMobile
             ? 'gap-1.5 opacity-100'
-            : 'gap-1 opacity-0 group-hover/sidebar-projects:opacity-100'
+            : `gap-0.5 ${batchActive ? 'opacity-100' : 'opacity-0'} group-hover/sidebar-projects:opacity-100 group-hover/sidebar-list:opacity-100`
         }`}
       >
         <IconButton
-          icon={<MoreHorizontal className="h-[18px] w-[18px]" strokeWidth={2} aria-hidden="true" />}
-          label={menuLabel}
-          onClick={onOpenMenu}
-          size={isMobile ? '2xl' : 'md'}
+          icon={<RefreshCw size={14} strokeWidth={ICON_STROKE} className={refreshing ? 'animate-spin' : undefined} aria-hidden="true" />}
+          label={refreshLabel}
+          onClick={onRefresh}
+          size={size}
           tone="muted"
           surface="sidebar"
         />
         <IconButton
-          icon={<FolderPlus className="h-[18px] w-[18px]" strokeWidth={1.9} aria-hidden="true" />}
+          icon={batchActive
+            ? <X size={14} strokeWidth={ICON_STROKE} aria-hidden="true" />
+            : <ListChecks size={14} strokeWidth={ICON_STROKE} aria-hidden="true" />}
+          label={batchLabel}
+          onClick={onToggleBatch}
+          size={size}
+          tone="muted"
+          surface="sidebar"
+          pressed={batchActive}
+        />
+        <IconButton
+          icon={<Ellipsis size={14} strokeWidth={ICON_STROKE} aria-hidden="true" />}
+          label={menuLabel}
+          onClick={onOpenMenu}
+          size={size}
+          tone="muted"
+          surface="sidebar"
+        />
+        <IconButton
+          icon={<FolderPlus size={14} strokeWidth={ICON_STROKE} aria-hidden="true" />}
           label={createLabel}
           onClick={onOpenCreate}
-          size={isMobile ? '2xl' : 'md'}
+          size={size}
           tone="muted"
           surface="sidebar"
         />
@@ -1855,16 +1916,16 @@ const ProjectHeaderMenu = forwardRef<HTMLDivElement, {
   t,
 }, ref) {
   const width = type === 'sort' ? 230 : type === 'create' ? 250 : 270
-  const style: React.CSSProperties = { left: x, top: y, width, boxShadow: 'var(--shadow-dropdown)' }
-  const className = 'fixed z-[var(--z-dropdown)] overflow-hidden rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] py-2 shadow-[var(--shadow-dropdown)]'
+  const style: React.CSSProperties = { left: x, top: y, width }
+  const className = 'fixed z-[var(--z-dropdown)] overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] p-1 shadow-[var(--shadow-dropdown)]'
 
   if (type === 'create') {
     return (
       <div ref={ref} role="menu" className={className} style={style} onClick={(event) => event.stopPropagation()}>
-        <HeaderMenuItem icon={<SquarePen size={18} aria-hidden="true" />} onClick={onCreateBlank}>
+        <HeaderMenuItem icon={<SquarePen size={16} strokeWidth={ICON_STROKE} aria-hidden="true" />} onClick={onCreateBlank}>
           {t('sidebar.newBlankSession')}
         </HeaderMenuItem>
-        <HeaderMenuItem icon={<FolderOpen size={18} aria-hidden="true" />} onClick={onUseExistingFolder}>
+        <HeaderMenuItem icon={<FolderOpen size={16} strokeWidth={ICON_STROKE} aria-hidden="true" />} onClick={onUseExistingFolder}>
           {t('sidebar.useExistingFolder')}
         </HeaderMenuItem>
       </div>
@@ -1874,13 +1935,13 @@ const ProjectHeaderMenu = forwardRef<HTMLDivElement, {
   if (type === 'organize') {
     return (
       <div ref={ref} role="menu" className={className} style={style} onClick={(event) => event.stopPropagation()}>
-        <HeaderMenuItem icon={<Folder size={18} aria-hidden="true" />} checked={organization === 'project'} onClick={() => onSetOrganization('project')}>
+        <HeaderMenuItem icon={<Folder size={16} strokeWidth={ICON_STROKE} aria-hidden="true" />} checked={organization === 'project'} onClick={() => onSetOrganization('project')}>
           {t('sidebar.organizeByProject')}
         </HeaderMenuItem>
-        <HeaderMenuItem icon={<FolderOpen size={18} aria-hidden="true" />} checked={organization === 'recentProject'} onClick={() => onSetOrganization('recentProject')}>
+        <HeaderMenuItem icon={<FolderOpen size={16} strokeWidth={ICON_STROKE} aria-hidden="true" />} checked={organization === 'recentProject'} onClick={() => onSetOrganization('recentProject')}>
           {t('sidebar.organizeByRecentProject')}
         </HeaderMenuItem>
-        <HeaderMenuItem icon={<Clock size={18} aria-hidden="true" />} checked={organization === 'time'} onClick={() => onSetOrganization('time')}>
+        <HeaderMenuItem icon={<Clock size={16} strokeWidth={ICON_STROKE} aria-hidden="true" />} checked={organization === 'time'} onClick={() => onSetOrganization('time')}>
           {t('sidebar.organizeByTime')}
         </HeaderMenuItem>
       </div>
@@ -1890,10 +1951,10 @@ const ProjectHeaderMenu = forwardRef<HTMLDivElement, {
   if (type === 'sort') {
     return (
       <div ref={ref} role="menu" className={className} style={style} onClick={(event) => event.stopPropagation()}>
-        <HeaderMenuItem icon={<Clock size={18} aria-hidden="true" />} checked={sortBy === 'createdAt'} onClick={() => onSetSortBy('createdAt')}>
+        <HeaderMenuItem icon={<Clock size={16} strokeWidth={ICON_STROKE} aria-hidden="true" />} checked={sortBy === 'createdAt'} onClick={() => onSetSortBy('createdAt')}>
           {t('sidebar.sortByCreatedAt')}
         </HeaderMenuItem>
-        <HeaderMenuItem icon={<RefreshCw size={18} aria-hidden="true" />} checked={sortBy === 'updatedAt'} onClick={() => onSetSortBy('updatedAt')}>
+        <HeaderMenuItem icon={<RefreshCw size={16} strokeWidth={ICON_STROKE} aria-hidden="true" />} checked={sortBy === 'updatedAt'} onClick={() => onSetSortBy('updatedAt')}>
           {t('sidebar.sortByUpdatedAt')}
         </HeaderMenuItem>
       </div>
@@ -1903,7 +1964,7 @@ const ProjectHeaderMenu = forwardRef<HTMLDivElement, {
   return (
     <div ref={ref} role="menu" className={className} style={style} onClick={(event) => event.stopPropagation()}>
       <HeaderMenuItem
-        icon={<Folder size={18} aria-hidden="true" />}
+        icon={<Folder size={16} strokeWidth={ICON_STROKE} aria-hidden="true" />}
         trailing
         onMouseEnter={(event) => onOpenSubmenu(event, 'organize')}
         onClick={(event) => onOpenSubmenu(event, 'organize')}
@@ -1911,7 +1972,7 @@ const ProjectHeaderMenu = forwardRef<HTMLDivElement, {
         {t('sidebar.organizeSidebar')}
       </HeaderMenuItem>
       <HeaderMenuItem
-        icon={<Clock size={18} aria-hidden="true" />}
+        icon={<Clock size={16} strokeWidth={ICON_STROKE} aria-hidden="true" />}
         trailing
         onMouseEnter={(event) => onOpenSubmenu(event, 'sort')}
         onClick={(event) => onOpenSubmenu(event, 'sort')}
@@ -1920,7 +1981,7 @@ const ProjectHeaderMenu = forwardRef<HTMLDivElement, {
       </HeaderMenuItem>
       {hiddenProjectCount > 0 && (
         <HeaderMenuItem
-          icon={<RotateCcw size={18} aria-hidden="true" />}
+          icon={<RotateCcw size={16} strokeWidth={ICON_STROKE} aria-hidden="true" />}
           onClick={onRestoreHiddenProjects}
         >
           {t('sidebar.restoreHiddenProjects', { count: hiddenProjectCount })}
@@ -1951,15 +2012,15 @@ function HeaderMenuItem({
       role="menuitem"
       onClick={onClick}
       onMouseEnter={onMouseEnter}
-      className="flex w-full items-center gap-3 px-4 py-2.5 text-left text-sm font-semibold text-[var(--color-text-primary)] transition-colors hover:bg-[var(--color-surface-hover)] focus-visible:outline-none focus-visible:bg-[var(--color-surface-hover)]"
+      className={`flex h-8 w-full items-center gap-2.5 rounded-[var(--radius-sm)] px-2.5 text-left text-[13px] text-[var(--color-text-primary)] transition-colors hover:bg-[var(--color-surface-hover)] focus-visible:outline-none focus-visible:bg-[var(--color-surface-hover)] ${checked ? 'bg-[var(--color-surface-hover)]' : ''}`}
     >
-      <span className="flex h-5 w-5 shrink-0 items-center justify-center text-[var(--color-text-secondary)]">
+      <span className="flex h-4 w-4 shrink-0 items-center justify-center text-[var(--color-text-tertiary)]">
         {icon}
       </span>
       <span className="min-w-0 flex-1 truncate">{children}</span>
-      {checked && <Check className="h-[17px] w-[17px] text-[var(--color-text-secondary)]" strokeWidth={2} aria-hidden="true" />}
+      {checked && <Check size={14} strokeWidth={2} className="shrink-0 text-[var(--color-brand)]" aria-hidden="true" />}
       {trailing && !checked && (
-        <ChevronDown className="-rotate-90 h-[17px] w-[17px] text-[var(--color-text-tertiary)]" strokeWidth={2} aria-hidden="true" />
+        <ChevronRight size={14} strokeWidth={ICON_STROKE} className="shrink-0 text-[var(--color-text-tertiary)]" aria-hidden="true" />
       )}
     </button>
   )
@@ -2309,13 +2370,13 @@ function ProjectMenuItem({
       role="menuitem"
       disabled={disabled}
       onClick={disabled ? undefined : onClick}
-      className={`flex w-full items-center gap-3 px-4 py-2.5 text-left text-sm font-semibold transition-colors focus-visible:outline-none focus-visible:bg-[var(--color-surface-hover)] disabled:cursor-default disabled:opacity-45 ${
+      className={`flex h-8 w-full items-center gap-2.5 rounded-[var(--radius-sm)] px-2.5 text-left text-[13px] transition-colors focus-visible:outline-none focus-visible:bg-[var(--color-surface-hover)] disabled:cursor-default disabled:opacity-45 ${
         danger
           ? 'text-[var(--color-error)] enabled:hover:bg-[var(--color-error-container)]'
           : 'text-[var(--color-text-primary)] enabled:hover:bg-[var(--color-surface-hover)]'
       }`}
     >
-      <span className="flex h-5 w-5 shrink-0 items-center justify-center text-current">
+      <span className={`flex h-4 w-4 shrink-0 items-center justify-center ${danger ? 'text-current' : 'text-[var(--color-text-tertiary)]'}`}>
         {icon}
       </span>
       <span className="min-w-0 truncate">{children}</span>
@@ -2341,38 +2402,43 @@ function SessionRowMeta({
 
   return (
     <span
-      className="ml-auto flex h-5 flex-shrink-0 items-center justify-end gap-1.5 whitespace-nowrap text-[10px] font-medium tabular-nums text-[var(--color-text-tertiary)]"
+      className="ml-auto flex h-5 flex-shrink-0 items-center justify-end gap-1 whitespace-nowrap text-[11px] font-normal tabular-nums text-[var(--color-text-tertiary)]"
       title={updatedLabel}
     >
       {/* 等人比在跑更要紧：停在卡片上的会话按 chatState 也算「在跑」，但转圈会
-          让人以为可以不管它。 */}
-      {needsAttention && (
-        <span className="inline-flex h-4 w-4 flex-shrink-0 items-center justify-center">
+          让人以为可以不管它。等你确认时，状态文字顶替相对时间。 */}
+      {needsAttention ? (
+        <span className="flex min-w-0 items-center gap-1 font-medium text-[var(--color-on-warning-container)]">
           <SessionAttentionMark label={t('sidebar.sessionNeedsAttention')} />
+          {/* The mark already names the state; the words are for the eye. */}
+          <span aria-hidden="true" className="max-w-[88px] truncate">{t('sidebar.sessionStatus.attention')}</span>
         </span>
+      ) : (
+        <>
+          {isRunning && (
+            <span
+              className="inline-flex h-4 w-4 flex-shrink-0 items-center justify-center text-[var(--color-info)]"
+              aria-label={t('sidebar.sessionRunning')}
+              title={t('sidebar.sessionRunning')}
+            >
+              {/* The wrapper already carries the name, so the spinner stays silent. */}
+              <Spinner size={12} />
+            </span>
+          )}
+          {/* Only a session that really runs in its own worktree gets the
+              branch glyph; an ordinary session in its project needs no badge. */}
+          {isWorktree && (
+            <span
+              className="inline-flex h-4 w-4 flex-shrink-0 items-center justify-center"
+              title={t('sidebar.worktree')}
+            >
+              <GitBranch size={12} strokeWidth={2} aria-hidden="true" />
+              <span className="sr-only">{t('sidebar.worktree')}</span>
+            </span>
+          )}
+          <span className="flex-shrink-0">{relativeTime}</span>
+        </>
       )}
-      {isRunning && !needsAttention && (
-        <span
-          className="inline-flex h-4 w-4 flex-shrink-0 items-center justify-center text-[var(--color-success)]"
-          aria-label={t('sidebar.sessionRunning')}
-          title={t('sidebar.sessionRunning')}
-        >
-          {/* The wrapper already carries the name, so the spinner stays silent. */}
-          <Spinner size={14} />
-        </span>
-      )}
-      {isWorktree && (
-        <span
-          className="inline-flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-[5px] text-[var(--color-text-tertiary)]"
-          title={t('sidebar.worktree')}
-        >
-          <GitBranch className="h-3.5 w-3.5" strokeWidth={2} aria-hidden="true" />
-          <span className="sr-only">{t('sidebar.worktree')}</span>
-        </span>
-      )}
-      <span className="inline-flex min-w-[42px] flex-shrink-0 items-center justify-end">
-        <span>{relativeTime}</span>
-      </span>
     </span>
   )
 }
@@ -2384,6 +2450,7 @@ function NavItem({
   touchFriendly,
   onClick,
   icon,
+  shortcut,
   children,
 }: {
   active: boolean
@@ -2392,6 +2459,8 @@ function NavItem({
   touchFriendly?: boolean
   onClick: () => void
   icon: React.ReactNode
+  /** Shown as a kbd on hover; desktop only. */
+  shortcut?: string
   children: React.ReactNode
 }) {
   return (
@@ -2400,21 +2469,26 @@ function NavItem({
       aria-label={label}
       title={collapsed ? label : undefined}
       className={`
-        flex items-center transition-colors duration-200
+        group/nav flex items-center text-[13px] transition-colors duration-150
         focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface-sidebar)]
-        ${collapsed ? 'h-10 w-10 justify-center rounded-[var(--radius-md)] px-0 py-0' : `w-full gap-2.5 rounded-[var(--radius-md)] px-3 ${touchFriendly ? 'py-3' : 'py-2.5'} text-[14.5px]`}
+        ${collapsed ? 'h-9 w-9 justify-center rounded-[var(--radius-md)] px-0 py-0' : `w-full min-w-0 gap-2.5 rounded-[var(--radius-sm)] px-2 ${touchFriendly ? 'min-h-11' : 'h-[30px]'}`}
         ${active
-          ? 'bg-[var(--color-sidebar-item-active)] font-medium text-[var(--color-text-primary)]'
+          ? `${SIDEBAR_ROW_RAISED} font-medium`
           : 'text-[var(--color-text-secondary)] hover:bg-[var(--color-sidebar-item-hover)] hover:text-[var(--color-text-primary)]'
         }
       `}
     >
-      <span className="flex h-5 w-5 flex-shrink-0 items-center justify-center">
+      {/* Selected nav gets the brand on its glyph — the one place the
+          sidebar uses terracotta as a selection mark. */}
+      <span className={`flex h-4 w-4 flex-shrink-0 items-center justify-center ${active ? 'text-[var(--color-brand)]' : 'text-[var(--color-text-tertiary)]'}`}>
         {icon}
       </span>
-      <span className={`sidebar-copy ${collapsed ? 'sidebar-copy--hidden' : 'sidebar-copy--visible'}`}>
+      <span className={`sidebar-copy min-w-0 flex-1 text-left ${collapsed ? 'sidebar-copy--hidden' : 'sidebar-copy--visible'}`}>
         {children}
       </span>
+      {shortcut && !collapsed && !touchFriendly ? (
+        <kbd className={`${KBD_CLASS} opacity-0 transition-opacity group-hover/nav:opacity-100 group-focus-visible/nav:opacity-100`}>{shortcut}</kbd>
+      ) : null}
     </button>
   )
 }
@@ -2440,50 +2514,12 @@ function formatRelativeTime(
 
 function GitHubIcon() {
   return (
-    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
       <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z" />
     </svg>
   )
 }
 
-function PlusIcon() {
-  return (
-    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-      <line x1="12" y1="5" x2="12" y2="19" />
-      <line x1="5" y1="12" x2="19" y2="12" />
-    </svg>
-  )
-}
-
-function ClockIcon() {
-  return (
-    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-      <circle cx="12" cy="12" r="10" />
-      <polyline points="12 6 12 12 16 14" />
-    </svg>
-  )
-}
-
-function StorefrontIcon() {
-  return (
-    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-      <path d="M3 9l1.5-5h15L21 9" />
-      <path d="M4 9v11h16V9" />
-      <path d="M4 9c0 1.5 1.3 2.5 2.8 2.5S9.7 10.5 9.7 9c0 1.5 1.3 2.5 2.8 2.5s2.8-1 2.8-2.5c0 1.5 1.3 2.5 2.8 2.5S21 10.5 21 9" />
-      <path d="M9 20v-6h6v6" />
-    </svg>
-  )
-}
-
-function SearchIcon() {
-  return (
-    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-      <circle cx="11" cy="11" r="7" />
-      <line x1="21" y1="21" x2="16.65" y2="16.65" />
-    </svg>
-  )
-}
-
 function SidebarToggleIcon({ collapsed }: { collapsed: boolean }) {
   return (
     <svg
diff --git a/desktop/src/components/layout/SidebarTaskList.tsx b/desktop/src/components/layout/SidebarTaskList.tsx
index 6e52bc24..d5b1f986 100644
--- a/desktop/src/components/layout/SidebarTaskList.tsx
+++ b/desktop/src/components/layout/SidebarTaskList.tsx
@@ -1,4 +1,4 @@
-import { Folder, GitBranch } from 'lucide-react'
+import { Check, Folder, GitBranch } from 'lucide-react'
 import { Spinner } from '@/components/ui/Spinner'
 import type { TranslationKey } from '../../i18n'
 import type { SessionListItem } from '../../types/session'
@@ -68,7 +68,7 @@ export function SidebarTaskList({
         >
           {/* `--color-text-tertiary` 在四个纸系主题下压到 4.31:1，够不上本项目
               4.5 的线。它在别处标的是相对时间那类装饰，这里却是分段本身。 */}
-          <div className="px-1.5 pb-1 pt-1 text-[11px] font-semibold tracking-normal text-[var(--color-text-secondary)]">
+          <div className="flex h-7 items-center px-2 text-[12px] font-semibold text-[var(--color-text-secondary)]">
             {t(GROUP_TITLE_KEYS[group.id])}
           </div>
           <div>
@@ -76,7 +76,7 @@ export function SidebarTaskList({
               <div
                 key={session.id}
                 data-sidebar-session-id={session.id}
-                className="relative mb-0.5 last:mb-0"
+                className="relative mb-px last:mb-0"
               >
                 {renamingId === session.id ? (
                   <input
@@ -88,7 +88,7 @@ export function SidebarTaskList({
                       if (event.key === 'Enter') onFinishRename()
                       if (event.key === 'Escape') onCancelRename()
                     }}
-                    className="w-full rounded-[var(--radius-md)] border border-[var(--color-border-focus)] bg-[var(--color-surface)] px-3 py-2 text-sm text-[var(--color-text-primary)] outline-none"
+                    className="h-[30px] w-full rounded-[var(--radius-sm)] border border-[var(--color-border-focus)] bg-[var(--color-surface)] px-2 text-[13px] text-[var(--color-text-primary)] outline-none"
                   />
                 ) : (
                   <SidebarTaskRow
@@ -148,12 +148,12 @@ function SidebarTaskRow({
       onClick={(event) => onClick(event, session)}
       onContextMenu={(event) => onContextMenu(event, session.id)}
       className={`
-        group/session w-full rounded-[var(--radius-md)] px-2 ${isMobile ? 'py-2.5' : 'py-1.5'} text-left transition-[background,filter,color,box-shadow] duration-200
+        group/session w-full rounded-[var(--radius-sm)] px-2 ${isMobile ? 'py-2.5' : 'py-1.5'} text-left transition-[background,color,box-shadow] duration-150
         focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--color-surface-sidebar)]
         ${isSelected
-          ? 'sidebar-session-row--selected bg-[var(--color-sidebar-item-active)] text-[var(--color-text-primary)] shadow-[var(--shadow-card)]'
+          ? 'sidebar-session-row--selected bg-[var(--color-sidebar-item-active)] text-[var(--color-text-primary)] shadow-[0_0_0_1px_var(--color-border),var(--shadow-raised)]'
           : isActive
-          ? 'sidebar-session-row--active bg-[var(--color-sidebar-item-active)] text-[var(--color-text-primary)] shadow-[var(--shadow-card)]'
+          ? 'sidebar-session-row--active bg-[var(--color-sidebar-item-active)] text-[var(--color-text-primary)] shadow-[0_0_0_1px_var(--color-border),var(--shadow-raised)]'
           : 'sidebar-session-row--idle text-[var(--color-text-secondary)] hover:bg-[var(--color-sidebar-item-hover)] hover:text-[var(--color-text-primary)]'
         }
       `}
@@ -163,17 +163,17 @@ function SidebarTaskRow({
       <span className="flex min-w-0 items-center gap-1.5">
         {isBatchMode ? (
           <span
-            className={`flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-[5px] border transition-colors ${
+            className={`flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-[var(--radius-xs)] border transition-colors ${
               isSelected
                 ? 'border-[var(--color-brand)] bg-[var(--color-brand)] text-[var(--color-on-primary)]'
                 : 'border-[var(--color-border-strong)] bg-[var(--color-surface)]'
             }`}
             aria-hidden="true"
           >
-            {isSelected && <span className="material-symbols-outlined text-[12px]">check</span>}
+            {isSelected && <Check size={12} strokeWidth={2} aria-hidden="true" />}
           </span>
         ) : null}
-        <span className="min-w-0 flex-1 truncate text-[13px] font-medium tracking-normal">{title}</span>
+        <span className={`min-w-0 flex-1 truncate text-[13px] ${isActive || isSelected ? 'font-medium' : ''}`}>{title}</span>
         <span className="ml-auto flex h-4 flex-shrink-0 items-center justify-end">
           {needsAttention ? (
             <span className="inline-flex h-4 w-4 items-center justify-center">
@@ -182,12 +182,12 @@ function SidebarTaskRow({
             </span>
           ) : isRunning ? (
             <span
-              className="inline-flex h-4 w-4 items-center justify-center text-[var(--color-success)]"
+              className="inline-flex h-4 w-4 items-center justify-center text-[var(--color-info)]"
               aria-label={t('sidebar.sessionRunning')}
               title={t('sidebar.sessionRunning')}
             >
               {/* 外层已经带名字了，spinner 本身保持静默。 */}
-              <Spinner size={14} />
+              <Spinner size={12} />
             </span>
           ) : null}
         </span>
@@ -196,9 +196,9 @@ function SidebarTaskRow({
           装饰文字，所以用能过 4.5 的 secondary，层级交给字号和字重。 */}
       <span className="mt-0.5 flex min-w-0 items-center gap-1 pl-0.5 text-[11px] text-[var(--color-text-secondary)]">
         {isWorktree ? (
-          <GitBranch className="h-3 w-3 flex-shrink-0" strokeWidth={2} aria-hidden="true" />
+          <GitBranch size={12} strokeWidth={2} className="flex-shrink-0" aria-hidden="true" />
         ) : (
-          <Folder className="h-3 w-3 flex-shrink-0" strokeWidth={2} aria-hidden="true" />
+          <Folder size={12} strokeWidth={2} className="flex-shrink-0" aria-hidden="true" />
         )}
         <span className="min-w-0 truncate">{workspaceLabel}</span>
         {isWorktree && <span className="sr-only">{t('sidebar.worktree')}</span>}
diff --git a/desktop/src/components/layout/StartupErrorView.tsx b/desktop/src/components/layout/StartupErrorView.tsx
index c473ee55..19bc5d2d 100644
--- a/desktop/src/components/layout/StartupErrorView.tsx
+++ b/desktop/src/components/layout/StartupErrorView.tsx
@@ -49,39 +49,36 @@ export function StartupErrorView({ error }: StartupErrorViewProps) {
       <Card
         as="section"
         radius="xl"
-        surface="low"
+        surface="lowest"
         padding="lg"
         shadow="card"
         className="w-full max-w-3xl"
       >
         <div className="flex flex-col gap-4">
           <div>
-            <h1
-              className="text-[21px] font-semibold tracking-tight text-[var(--color-text-primary)]"
-              style={{ fontFamily: 'var(--font-headline)' }}
-            >
+            <h1 className="text-[22px] font-semibold tracking-tight text-[var(--color-text-primary)]">
               {t('app.serverFailed')}
             </h1>
-            <p className="mt-2 text-sm leading-6 text-[var(--color-text-secondary)]">
+            <p className="mt-1.5 text-[13px] leading-6 text-[var(--color-text-tertiary)]">
               {t('app.serverFailedHint')}
             </p>
           </div>
 
-          <Card radius="lg" surface="none" className="bg-[var(--color-code-bg)]">
-            <div className="text-[11px] font-semibold uppercase tracking-[0.12em] text-[var(--color-text-tertiary)]">
+          <Card radius="md" surface="none" padding="sm" className="bg-[var(--color-code-bg)]">
+            <div className="text-[12px] font-semibold text-[var(--color-text-tertiary)]">
               {t('app.startupError')}
             </div>
-            <pre className="mt-2 max-h-28 overflow-auto whitespace-pre-wrap break-words font-mono text-[13px] leading-[1.7] text-[var(--color-error)]">
+            <pre className="mt-1.5 max-h-28 overflow-auto whitespace-pre-wrap break-words font-mono text-[12px] leading-[1.65] text-[var(--color-error)]">
               {message}
             </pre>
           </Card>
 
           {logs ? (
-            <Card radius="lg" surface="none" className="bg-[var(--color-code-bg)]">
-              <div className="text-[11px] font-semibold uppercase tracking-[0.12em] text-[var(--color-text-tertiary)]">
+            <Card radius="md" surface="none" padding="sm" className="bg-[var(--color-code-bg)]">
+              <div className="text-[12px] font-semibold text-[var(--color-text-tertiary)]">
                 {t('app.serverLogs')}
               </div>
-              <pre className="mt-2 max-h-64 overflow-auto whitespace-pre-wrap break-words font-mono text-[13px] leading-[1.7] text-[var(--color-text-secondary)]">
+              <pre className="mt-1.5 max-h-64 overflow-auto whitespace-pre-wrap break-words font-mono text-[12px] leading-[1.65] text-[var(--color-text-secondary)]">
                 {logs}
               </pre>
             </Card>
@@ -92,7 +89,7 @@ export function StartupErrorView({ error }: StartupErrorViewProps) {
               type="button"
               variant="secondary"
               size="sm"
-              icon={<Copy className="h-4 w-4" aria-hidden="true" />}
+              icon={<Copy size={14} strokeWidth={1.75} aria-hidden="true" />}
               onClick={handleCopy}
             >
               {copied ? t('app.copiedDiagnostics') : t('app.copyDiagnostics')}
@@ -101,7 +98,7 @@ export function StartupErrorView({ error }: StartupErrorViewProps) {
               type="button"
               variant="ghost"
               size="sm"
-              icon={<RefreshCw className="h-4 w-4" aria-hidden="true" />}
+              icon={<RefreshCw size={14} strokeWidth={1.75} aria-hidden="true" />}
               onClick={() => window.location.reload()}
             >
               {t('common.retry')}
diff --git a/desktop/src/components/layout/TabAttentionJump.test.tsx b/desktop/src/components/layout/TabAttentionJump.test.tsx
index 474eea71..d0411539 100644
--- a/desktop/src/components/layout/TabAttentionJump.test.tsx
+++ b/desktop/src/components/layout/TabAttentionJump.test.tsx
@@ -25,7 +25,7 @@ describe('TabAttentionJump', () => {
   ])('shows %i as %s so the pill never outgrows the toolbar', (count, shown) => {
     render(<TabAttentionJump count={count} label="Jump" onJump={vi.fn()} />)
 
-    expect(screen.getByTestId('tab-attention-jump')).toHaveTextContent(new RegExp(`^warning${shown.replace('+', '\\+')}$`))
+    expect(screen.getByTestId('tab-attention-jump')).toHaveTextContent(new RegExp(`^${shown.replace('+', '\\+')}$`))
   })
 
   it('jumps when pressed', () => {
@@ -43,10 +43,10 @@ describe('TabAttentionJump', () => {
     expect(screen.getByRole('button')).toHaveAttribute('title', 'Jump to the next waiting session')
   })
 
-  it('hides the glyph text from a screen reader', () => {
+  it('hides the glyph from a screen reader', () => {
     const { container } = render(<TabAttentionJump count={2} label="Jump" onJump={vi.fn()} />)
 
-    expect(container.querySelector('.material-symbols-outlined')).toHaveAttribute('aria-hidden', 'true')
+    expect(container.querySelector('svg')).toHaveAttribute('aria-hidden', 'true')
   })
 
   it('does not submit a surrounding form', () => {
diff --git a/desktop/src/components/layout/TabAttentionJump.tsx b/desktop/src/components/layout/TabAttentionJump.tsx
index a019002d..913353ca 100644
--- a/desktop/src/components/layout/TabAttentionJump.tsx
+++ b/desktop/src/components/layout/TabAttentionJump.tsx
@@ -1,3 +1,4 @@
+import { CircleAlert } from 'lucide-react'
 import { Badge } from '@/components/ui/Badge'
 
 /**
@@ -38,15 +39,7 @@ export function TabAttentionJump({
         size="sm"
         bordered
         className="tabular-nums"
-        icon={(
-          <span
-            aria-hidden="true"
-            className="material-symbols-outlined text-[13px] leading-none"
-            style={{ fontVariationSettings: "'FILL' 1" }}
-          >
-            warning
-          </span>
-        )}
+        icon={<CircleAlert aria-hidden="true" size={12} strokeWidth={2} />}
       >
         {count > 9 ? '9+' : count}
       </Badge>
diff --git a/desktop/src/components/layout/TabBar.test.tsx b/desktop/src/components/layout/TabBar.test.tsx
index 761f30df..3abd6211 100644
--- a/desktop/src/components/layout/TabBar.test.tsx
+++ b/desktop/src/components/layout/TabBar.test.tsx
@@ -6,6 +6,7 @@ import type { BackgroundAgentTask, ChatState, ServerMessage, UIMessage } from '.
 import type { TeamWorkbenchSessionTimeline, TeamWorkbenchTask, TeamWorkbenchTimeline } from '../../types/team'
 import type { WorkflowRun } from '../../types/workflow'
 import { browserHost } from '../../lib/desktopHost/browserHost'
+import { tabChipClass } from '@/components/ui/tabChip'
 
 type ToolUseMessage = Extract<UIMessage, { type: 'tool_use' }>
 
@@ -953,7 +954,7 @@ describe('TabBar', () => {
     expect(screen.queryByText('设置')).not.toBeInTheDocument()
   })
 
-  it('matches only the settings tab to the settings rail width', async () => {
+  it('gives the settings tab the same chip width as every other tab', async () => {
     const { TabBar } = await import('./TabBar')
     const { SETTINGS_TAB_ID, useTabStore } = await import('../../stores/tabStore')
 
@@ -972,11 +973,13 @@ describe('TabBar', () => {
     const settingsTab = screen.getByText('Localized Settings').closest('.tab-strip-item')
     const chatTab = screen.getByText('Chat').closest('.tab-strip-item')
 
-    expect(settingsTab?.className).toContain('min-w-[195px]')
-    expect(settingsTab?.className).toContain('max-w-[195px]')
-    expect(chatTab?.className).toContain('min-w-[140px]')
-    expect(chatTab?.className).toContain('max-w-[200px]')
-    expect(chatTab?.className).not.toContain('min-w-[195px]')
+    // The settings tab used to be pinned to 195px to line up with the old
+    // settings rail; that rail is gone, and one strip has one tab width.
+    for (const tab of [settingsTab, chatTab]) {
+      expect(tab?.className).toContain('min-w-[112px]')
+      expect(tab?.className).toContain('max-w-[200px]')
+      expect(tab?.className).not.toContain('195px')
+    }
   })
 
   it('shows current-session CLI tasks without a numeric activity badge', async () => {
@@ -1156,10 +1159,12 @@ describe('TabBar', () => {
     // which is most of the strip, so the row filled up with identical bubbles
     // that said nothing the titles did not. The glyph now carries exactly one
     // message: "this tab is not a conversation".
-    expect(screen.getByText('Idle Session').previousElementSibling?.textContent).toBe('')
-    expect(screen.getByText('Terminal').previousElementSibling?.textContent).toBe('terminal')
-    expect(screen.getByText('Extension Market').previousElementSibling?.textContent).toBe('storefront')
-    expect(screen.queryByText('chat_bubble')).not.toBeInTheDocument()
+    const glyphOf = (title: string) => screen.getByText(title).previousElementSibling
+    expect(glyphOf('Idle Session')?.querySelector('svg')).toBeNull()
+    expect(glyphOf('Terminal')?.querySelector('[data-tab-type-icon="terminal"]')).toHaveClass('lucide-square-terminal')
+    expect(glyphOf('Extension Market')?.querySelector('[data-tab-type-icon="market"]')).toHaveClass('lucide-store')
+    // Glyphs are svg now; no icon-font ligature text leaks into the title row.
+    expect(glyphOf('Terminal')?.textContent).toBe('')
   })
 
   it('keeps the title still when a chat tab starts running', async () => {
@@ -1243,7 +1248,9 @@ describe('TabBar', () => {
     const hitRegion = screen.getByTestId('tab-bar-hit-region')
     expect(hitRegion).toHaveStyle({ width: '282px' })
     expect(strip).not.toContainElement(hitRegion)
-    expect(hitRegion).toHaveClass('pointer-events-none', 'top-[6px]')
+    // The no-drag rectangle covers the 28px chips only (12px above and below
+    // in the 52px strip), so the space around them still drags the window.
+    expect(hitRegion).toHaveClass('pointer-events-none', 'top-[12px]', 'bottom-[12px]')
     viewport = 200
     fireStripResize()
     expect(hitRegion).toHaveStyle({ width: '200px' })
@@ -1290,7 +1297,7 @@ describe('TabBar', () => {
     })
 
     const rightButton = await waitFor(() => {
-      const button = screen.getByText('chevron_right').closest('button')
+      const button = screen.getByRole('button', { name: 'Scroll tabs right' })
       expect(button).toBeInTheDocument()
       return button as HTMLButtonElement
     })
@@ -1419,7 +1426,7 @@ describe('TabBar', () => {
       stubRect(activeTab, 640, 896)
 
       const leftChevron = await waitFor(() => {
-        const button = screen.getByText('chevron_left').closest('button')
+        const button = screen.getByRole('button', { name: 'Scroll tabs left' })
         expect(button).toBeInTheDocument()
         return button as HTMLButtonElement
       })
@@ -1440,7 +1447,7 @@ describe('TabBar', () => {
       stubRect(activeTab, 640, 896)
 
       const leftChevron = await waitFor(() => {
-        const button = screen.getByText('chevron_left').closest('button')
+        const button = screen.getByRole('button', { name: 'Scroll tabs left' })
         expect(button).toBeInTheDocument()
         return button as HTMLButtonElement
       })
@@ -1512,10 +1519,10 @@ describe('TabBar', () => {
 
     await waitFor(() => {
       expect(screen.getByTestId('window-controls')).toBeInTheDocument()
-      expect(screen.getByText('chevron_right').closest('button')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'Scroll tabs right' })).toBeInTheDocument()
     })
 
-    const rightButton = screen.getByText('chevron_right').closest('button')
+    const rightButton = screen.getByRole('button', { name: 'Scroll tabs right' })
     expect(rightButton?.nextElementSibling).toBe(screen.getByTestId('window-controls'))
   })
 
@@ -1596,15 +1603,13 @@ describe('TabBar', () => {
     expect(tabBar).toHaveClass('min-h-[52px]')
     expect(screen.getByTestId('tab-bar-drag-gutter')).toHaveClass('min-h-[52px]')
 
-    // The tab is 6px shorter and the scroll region pays for it: 46 + 6 = 52.
-    // Those 6px are what makes the top corners read as rounded instead of as
-    // corners clipped by the window frame, so the two numbers are a pair — the
-    // tab cannot be shortened without the padding growing to match, or the
-    // strip stops being 52px tall.
-    expect(scrollRegion).toHaveClass('pt-[6px]')
-    expect(tab).toHaveClass('min-h-[46px]')
-    // The giveback stays inside the drag region: it belongs to the scroll
-    // region, which carries the attribute, not to the tab, which must not.
+    // The tab is a 28px chip centred in the 52px strip, the same chip the
+    // workspace's resource tabs use.
+    expect(scrollRegion).toHaveClass('items-center')
+    expect(scrollRegion.className).not.toMatch(/\bpt-/)
+    expect(tab).toHaveClass('h-7')
+    // The space around the chips stays inside the drag region: it belongs to
+    // the scroll region, which carries the attribute, not to the tab.
     expect(scrollRegion).toHaveAttribute('data-desktop-drag-region')
     expect(tab).not.toHaveAttribute('data-desktop-drag-region')
   })
@@ -1683,18 +1688,17 @@ describe('TabBar', () => {
     const gutter = screen.getByTestId('tab-bar-drag-gutter')
 
     // Closed, the trough runs to the window edge and the gutter disappears
-    // into it. Painting the frame unconditionally would paste a white block
-    // over the end of the strip instead.
-    expect(frame).not.toHaveClass('bg-[var(--color-surface)]')
+    // into it; the frame paints nothing of its own.
+    expect(frame.className).not.toMatch(/\bbg-\[/)
 
-    // Open, everything above the panel is one ground. The gutter is a
-    // transparent sibling of the header, so whichever element paints paper has
-    // to contain it — otherwise the trough shows through the strip and the
-    // window's top-right corner carries a grey notch beside the panel.
+    // Open, everything above the panel is one ground — the trough the
+    // workspace's resource tabs sit in, not paper. The gutter is a transparent
+    // sibling of the header, so the element that paints has to contain it.
     await act(async () => {
       useWorkspaceStore.getState().toggleWorkspace(sessionId)
     })
-    expect(frame).toHaveClass('bg-[var(--color-surface)]')
+    expect(frame).toHaveClass('bg-[var(--color-surface-sidebar)]')
+    expect(frame).not.toHaveClass('bg-[var(--color-surface)]')
     expect(frame).toContainElement(gutter)
   })
 
@@ -1732,7 +1736,7 @@ describe('TabBar', () => {
     expect(header).toHaveAttribute('data-desktop-drag-region')
   })
 
-  it('lifts the active tab onto the paper ground without turning it into a pill', async () => {
+  it('uses the shared tab chip, with selection strictly stronger than hover', async () => {
     const { TabBar } = await import('./TabBar')
     const { useTabStore } = await import('../../stores/tabStore')
     const { useChatStore } = await import('../../stores/chatStore')
@@ -1756,62 +1760,34 @@ describe('TabBar', () => {
     const active = screen.getByText('Active One').closest('.tab-bar-interactive')
     const inactive = screen.getByText('Inactive One').closest('.tab-bar-interactive')
 
-    // The fill is the point, and it is not a pill. #1123 landed because the
-    // strip, the active tab and the content below it were all
-    // `--color-surface`: three planes, one colour, nothing but a 3px rule to
-    // separate them. The strip now sits on the sidebar's ground and the active
-    // tab is filled with paper, so it reads as a sheet lifted off the desk and
-    // continuous with the view it opens onto.
+    // One chip for both strips: the session tabs carry exactly the classes the
+    // workspace's resource tabs do.
+    expect(active?.className).toContain(tabChipClass(true))
+    expect(inactive?.className).toContain(tabChipClass(false))
+
+    // #1123 landed because the strip, the active tab and the content were all
+    // `--color-surface`. The strip stays on the sidebar's ground and only the
+    // active chip is filled with paper at rest.
     expect(active?.className).toContain('bg-[var(--color-surface)]')
-    expect(active?.className).not.toContain('bg-transparent')
-    expect(inactive?.className).toContain('bg-transparent')
+    expect(inactive?.className).not.toMatch(/(?:^|\s)bg-/)
 
-    // The outline is load-bearing, not decoration. Keeping the trough on the
-    // sidebar's exact ground is what stops the titlebar reading as a separate
-    // band, and it costs this: paper against that trough is 1.05–1.10:1 in all
-    // six themes, so without an outline there is no visible edge and therefore
-    // no visible corner. `--color-border` cannot stand in — it is calibrated
-    // against paper and lands at 1.12:1 on the trough. See the tab-strip block
-    // in contrast.test.ts for the measured floors.
-    expect(active?.className).toContain('border-[var(--color-tab-edge)]')
-    expect(active?.className).not.toContain('border-[var(--color-border)]')
-    // Same box on both, so switching tabs does not shift the title by the 2px
-    // the border occupies.
-    expect(inactive?.className).toContain('border-transparent')
-    expect(inactive?.className).toContain('border-b-0')
+    // Paper against the trough is 1.05–1.10:1, so the active chip needs the
+    // `--color-tab-edge` ring to have a shape; `--color-border` lands at
+    // 1.12:1 there and cannot draw it (see contrast.test.ts).
+    expect(active?.className).toContain('0_0_0_1px_var(--color-tab-edge)')
+    expect(active?.className).not.toContain('var(--color-border)')
 
-    // What stays banned is still the *shape*. Only the top two corners round
-    // and the bottom border is gone, so the tab's lower edge runs straight
-    // into the view it opens onto; a pill is a fully rounded block floating
-    // clear of both the strip and the content. Guard the properties that would
-    // turn one into the other. (`(?:^|\s)` so the drag-over indicator's
-    // `before:rounded-full` is not mistaken for the tab's own radius.)
-    expect(active?.className).toContain('rounded-t-[8px]')
-    expect(active?.className).toContain('border-b-0')
-    expect(active?.className).not.toMatch(/(?:^|\s)rounded-(?!t-)/)
-    expect(active?.className).not.toMatch(/\bshadow-\[0/)
-    expect(active?.className).not.toMatch(/\bm[xlr]?-/)
-
-    // Selection no longer needs the terracotta rule, and the rule had become
-    // the enemy: a 3px line across the bottom is exactly the cut that the
-    // rounded shape exists to avoid. Weight plus the outline carry it now.
-    expect(active?.className).not.toContain('inset_0_-3px')
-    expect(inactive?.className).not.toContain('inset_0_-3px')
-
-    // Hover shares paper with the active tab instead of using
-    // `--color-surface-hover`. That token is tuned for hovering *on* paper, so
-    // on the ink themes it sits brighter than paper (dark #2B271F vs #201D17)
-    // and a hovered tab would outshine the selected one. Selection stays
-    // strictly stronger because only it adds the full edge and the weight.
+    // Hover rises to paper with the faint ring and never uses
+    // `--color-surface-hover`, which is brighter than paper on the ink themes
+    // and would make a hovered tab outshine the selected one.
     expect(inactive?.className).toContain('hover:bg-[var(--color-surface)]')
-    expect(inactive?.className).not.toContain('hover:bg-[var(--color-surface-hover)]')
-
-    // Three legible tiers, and the middle one needs its own outline for the
-    // same reason the selected tab does: a hover fill at 1.05–1.10:1 against
-    // the trough has no discernible shape. The hairline, not the full edge —
-    // hover must stay strictly weaker than selection.
-    expect(inactive?.className).toContain('hover:border-[var(--color-tab-separator)]')
+    expect(inactive?.className).toContain('hover:shadow-[0_0_0_1px_var(--color-tab-separator)]')
+    expect(inactive?.className).not.toContain('surface-hover')
     expect(active?.className).not.toContain('--color-tab-separator')
+
+    // Rings are shadows, not borders, so selecting a tab never moves its title.
+    expect(active?.className).not.toMatch(/(?:^|\s)border(?:-|\s|$)/)
+    expect(inactive?.className).not.toMatch(/(?:^|\s)border(?:-|\s|$)/)
   })
 
   it('keeps the strip on the frame ground so the active tab can lift off it', async () => {
@@ -1849,13 +1825,12 @@ describe('TabBar', () => {
     // of the window instead of the same surface the sidebar is already on.
     expect(strip.className).not.toMatch(/bg-\[var\(--color-(?!surface-sidebar)/)
 
-    // No rule under the strip. The selected tab's bottom edge has to run
-    // straight into the content it opens onto, and a border spanning the whole
-    // strip cuts through exactly that edge.
+    // No rule under the strip: like the workspace's resource strip, it is
+    // separated from the content by its ground alone.
     expect(strip.className).not.toMatch(/\bborder-b\b/)
   })
 
-  it('marks tabs so the CSS sibling rules can place the hairline between them', async () => {
+  it('marks every tab with its selection state', async () => {
     const { TabBar } = await import('./TabBar')
     const { useTabStore } = await import('../../stores/tabStore')
     const { useChatStore } = await import('../../stores/chatStore')
@@ -1879,12 +1854,8 @@ describe('TabBar', () => {
     const active = screen.getByText('Active One').closest('.tab-bar-interactive')
     const inactive = screen.getByText('Inactive One').closest('.tab-bar-interactive')
 
-    // The hairline that keeps a row of same-length titles from smearing into
-    // one block lives in globals.css, because it belongs to the *gap* and has
-    // to disappear when either side of that gap is filled — only sibling
-    // combinators can say "the tab after the selected one". jsdom does not
-    // apply the stylesheet, so what is checkable here is the hook it selects
-    // on: drop either and the rules silently match nothing.
+    // Chips are separated by spacing, not by the old hairline. `tab-strip-item`
+    // stays as the hook drag measurement and these tests locate tabs by.
     expect(active).toHaveClass('tab-strip-item')
     expect(inactive).toHaveClass('tab-strip-item')
     expect(active).toHaveAttribute('data-active', 'true')
@@ -1913,7 +1884,7 @@ describe('TabBar', () => {
 
     const tab = screen.getByText('Short').closest('.tab-bar-interactive') as HTMLElement
 
-    expect(tab.className).toContain('min-w-[140px]')
+    expect(tab.className).toContain('min-w-[112px]')
     expect(tab.className).toContain('max-w-[200px]')
     // The inline `width`/`maxWidth` pair is what pinned every tab to 180px and
     // left short titles trailing dead space. Only `transform` belongs inline
diff --git a/desktop/src/components/layout/TabBar.tsx b/desktop/src/components/layout/TabBar.tsx
index 468a5086..9b3b2b83 100644
--- a/desktop/src/components/layout/TabBar.tsx
+++ b/desktop/src/components/layout/TabBar.tsx
@@ -23,6 +23,7 @@ import { useCLITaskStore } from '../../stores/cliTaskStore'
 import { teamTaskWindowsForSnapshot, useTeamStore } from '../../stores/teamStore'
 import { StatusDot } from '@/components/ui/Badge'
 import { IconButton } from '@/components/ui/IconButton'
+import { tabChipClass, tabChipLabelClass } from '@/components/ui/tabChip'
 import { useDismissable } from '@/hooks/useDismissable'
 import { useTranslation } from '../../i18n'
 import { getDesktopHost } from '../../lib/desktopHost'
@@ -32,7 +33,7 @@ import { SessionAttentionMark } from './SessionAttentionMark'
 import { TabAttentionJump } from './TabAttentionJump'
 import { WindowControls, showWindowControls } from './WindowControls'
 import { OpenProjectMenu } from './OpenProjectMenu'
-import { SquareTerminal } from 'lucide-react'
+import { AppWindow, Bot, CalendarClock, ChevronLeft, ChevronRight, Link, Network, PanelRight, Settings, SquareTerminal, Store, X, type LucideIcon } from 'lucide-react'
 import { WorkspaceLayoutControls } from './WorkspaceLayoutControls'
 import { useWorkspaceHeaderHost } from './WorkspaceHeaderContext'
 import { ActionDialog } from '@/components/ui/ActionDialog'
@@ -83,18 +84,21 @@ function clippedSide(
 // conversation". Chat tabs deliberately have none — a bubble on every tab in a
 // strip that is mostly chats is pure noise, and the slot it occupied is worth
 // more as title.
-const TAB_TYPE_ICON: Partial<Record<TabType, string>> = {
-  settings: 'settings',
-  scheduled: 'schedule',
-  market: 'storefront',
-  connectors: 'link',
-  terminal: 'terminal',
-  workbench: 'view_sidebar',
-  subagent: 'smart_toy',
-  team: 'account_tree',
-  'team-member': 'smart_toy',
+//
+// The sidebar draws the same sections with the same glyphs (settings,
+// scheduled, market), so a tab and the nav item that opened it read as one.
+const TAB_TYPE_ICON: Partial<Record<TabType, LucideIcon>> = {
+  settings: Settings,
+  scheduled: CalendarClock,
+  market: Store,
+  connectors: Link,
+  terminal: SquareTerminal,
+  workbench: PanelRight,
+  subagent: Bot,
+  team: Network,
+  'team-member': Bot,
 }
-const TAB_TYPE_ICON_FALLBACK = 'tab'
+const TAB_TYPE_ICON_FALLBACK: LucideIcon = AppWindow
 const desktopHost = getDesktopHost()
 const isDesktopRuntime = desktopHost.isDesktop
 const EMPTY_DISMISSED_BACKGROUND_TASK_KEYS: readonly string[] = []
@@ -633,8 +637,8 @@ export function TabBar() {
   ) : null
 
   const rightScrollControl = canScrollRight && (
-        <button type="button" onClick={() => scroll('right')} aria-label={t('tabs.scrollRight')} aria-describedby={attentionOffscreen.right ? `${attentionHintId}-right` : undefined} title={attentionOffscreen.right ? t('sidebar.sessionNeedsAttention') : undefined} className="relative flex h-[52px] w-7 flex-shrink-0 items-center justify-center text-[var(--color-text-tertiary)] transition-colors hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-border-focus)]">
-          <span className="material-symbols-outlined text-[16px]">chevron_right</span>
+        <button type="button" onClick={() => scroll('right')} aria-label={t('tabs.scrollRight')} aria-describedby={attentionOffscreen.right ? `${attentionHintId}-right` : undefined} title={attentionOffscreen.right ? t('sidebar.sessionNeedsAttention') : undefined} className="relative flex h-[52px] w-7 flex-shrink-0 items-center justify-center text-[var(--color-text-tertiary)] transition-colors hover:bg-[var(--color-sidebar-item-hover)] hover:text-[var(--color-text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-border-focus)]">
+          <ChevronRight size={16} strokeWidth={1.75} aria-hidden="true" />
           {attentionHint('right')}
         </button>
       )
@@ -664,8 +668,8 @@ export function TabBar() {
 
       <div data-testid="workspace-session-header" className={hasWorkspaceHeader ? 'flex min-w-0 flex-1 overflow-hidden' : 'contents'}>
       {canScrollLeft && (
-        <button type="button" onClick={() => scroll('left')} aria-label={t('tabs.scrollLeft')} aria-describedby={attentionOffscreen.left ? `${attentionHintId}-left` : undefined} title={attentionOffscreen.left ? t('sidebar.sessionNeedsAttention') : undefined} className="relative flex h-[52px] w-7 flex-shrink-0 items-center justify-center text-[var(--color-text-tertiary)] transition-colors hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-border-focus)]">
-          <span className="material-symbols-outlined text-[16px]">chevron_left</span>
+        <button type="button" onClick={() => scroll('left')} aria-label={t('tabs.scrollLeft')} aria-describedby={attentionOffscreen.left ? `${attentionHintId}-left` : undefined} title={attentionOffscreen.left ? t('sidebar.sessionNeedsAttention') : undefined} className="relative flex h-[52px] w-7 flex-shrink-0 items-center justify-center text-[var(--color-text-tertiary)] transition-colors hover:bg-[var(--color-sidebar-item-hover)] hover:text-[var(--color-text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-border-focus)]">
+          <ChevronLeft size={16} strokeWidth={1.75} aria-hidden="true" />
           {attentionHint('left')}
         </button>
       )}
@@ -676,12 +680,11 @@ export function TabBar() {
         data-testid="tab-bar-scroll-region"
         data-desktop-drag-region={isDesktopRuntime ? true : undefined}
         /*
-          `pt-[6px]` is the shoulder: 52px strip minus 6px leaves the 46px tab,
-          and those 6px are what makes the rounded top read as rounded rather
-          than as a corner clipped by the window frame. The strip, not the tab,
-          owns the giveback, so it stays inside the window drag region.
+          The 28px chips sit centred in the 52px strip, as the workspace's
+          resource tabs do. The space around them stays inside the scroll
+          region, which carries the window drag region; the chips do not.
         */
-        className="tab-strip-scroll flex-1 flex items-stretch gap-[2px] overflow-x-hidden pt-[6px]"
+        className="tab-strip-scroll flex flex-1 items-center gap-0.5 overflow-x-hidden px-1"
         onDragOver={(e) => e.preventDefault()}
       >
         {tabs.map((tab, index) => {
@@ -717,7 +720,7 @@ export function TabBar() {
         <div
           data-testid="tab-bar-hit-region"
           aria-hidden="true"
-          className="tab-strip-hit-region pointer-events-none absolute bottom-0 left-0 top-[6px]"
+          className="tab-strip-hit-region pointer-events-none absolute bottom-[12px] left-0 top-[12px]"
           style={{ width: tabHitWidth }}
         />
       )}
@@ -735,17 +738,18 @@ export function TabBar() {
         which left the toolbar looking welded to the last tab.
       */}
       {/*
-        The frame owns the paper, not the header inside it. The drag gutter —
+        The frame owns the ground, not the header inside it. The drag gutter —
         and, on Windows, the window controls — are the header's siblings in
-        here, and they are transparent: while the workspace is closed that is
-        invisible, because the whole strip is the sidebar's ground. Next to an
-        open panel it showed as a 16px strip of trough welded to the window's
-        top-right corner. One ground for everything above the panel.
+        here, and they are transparent, so whichever element paints has to
+        contain them. With the panel open the workspace's own tab strip sits in
+        this frame, and in 「素」 that strip is a trough like the session tabs:
+        the sidebar's ground, with the active resource tab as the paper sheet
+        that runs into the panel below. One ground for everything above it.
       */}
       <div
         data-testid="workspace-header-frame"
         style={hasWorkspaceHeader ? { width: workspaceHeader.width, maxWidth: '100%' } : undefined}
-        className={`flex min-w-0 shrink-0 items-stretch ${hasWorkspaceHeader ? 'bg-[var(--color-surface)]' : ''}`}
+        className={`flex min-w-0 shrink-0 items-stretch ${hasWorkspaceHeader ? 'bg-[var(--color-surface-sidebar)]' : ''}`}
       >
       <div
         data-testid="workspace-window-header"
@@ -791,10 +795,10 @@ export function TabBar() {
           />
         ) : (
           <IconButton
-            icon={<SquareTerminal size={17} strokeWidth={1.9} />}
+            icon={<SquareTerminal size={16} strokeWidth={1.75} aria-hidden="true" />}
             label={t('tabs.openTerminal')}
             onClick={() => useTabStore.getState().openTerminalTab()}
-            size="md"
+            size="sm"
             tone="muted"
           />
         )}
@@ -817,37 +821,37 @@ export function TabBar() {
       {contextMenu && (
         <div
           ref={contextMenuRef}
-          className="fixed z-[var(--z-dropdown)] min-w-[180px] overflow-hidden rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] py-2 shadow-[var(--shadow-dropdown)]"
+          className="fixed z-[var(--z-dropdown)] min-w-[180px] overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] p-1 shadow-[var(--shadow-dropdown)]"
           style={{ left: contextMenu.x, top: contextMenu.y }}
         >
           <button
             onClick={() => { handleClose(contextMenu.sessionId); setContextMenu(null) }}
-            className="w-full px-4 py-2 text-left text-[13px] text-[var(--color-text-primary)] transition-colors hover:bg-[var(--color-surface-hover)]"
+            className="flex h-8 w-full items-center rounded-[var(--radius-sm)] px-2.5 text-left text-[13px] text-[var(--color-text-primary)] transition-colors hover:bg-[var(--color-surface-hover)]"
           >
             {t('tabs.close')}
           </button>
           <button
             onClick={() => handleCloseOthers(contextMenu.sessionId)}
-            className="w-full px-4 py-2 text-left text-[13px] text-[var(--color-text-primary)] transition-colors hover:bg-[var(--color-surface-hover)]"
+            className="flex h-8 w-full items-center rounded-[var(--radius-sm)] px-2.5 text-left text-[13px] text-[var(--color-text-primary)] transition-colors hover:bg-[var(--color-surface-hover)]"
           >
             {t('tabs.closeOthers')}
           </button>
           <button
             onClick={() => handleCloseLeft(contextMenu.sessionId)}
-            className="w-full px-4 py-2 text-left text-[13px] text-[var(--color-text-primary)] transition-colors hover:bg-[var(--color-surface-hover)]"
+            className="flex h-8 w-full items-center rounded-[var(--radius-sm)] px-2.5 text-left text-[13px] text-[var(--color-text-primary)] transition-colors hover:bg-[var(--color-surface-hover)]"
           >
             {t('tabs.closeLeft')}
           </button>
           <button
             onClick={() => handleCloseRight(contextMenu.sessionId)}
-            className="w-full px-4 py-2 text-left text-[13px] text-[var(--color-text-primary)] transition-colors hover:bg-[var(--color-surface-hover)]"
+            className="flex h-8 w-full items-center rounded-[var(--radius-sm)] px-2.5 text-left text-[13px] text-[var(--color-text-primary)] transition-colors hover:bg-[var(--color-surface-hover)]"
           >
             {t('tabs.closeRight')}
           </button>
-          <div className="my-1.5 border-t border-[var(--color-border)]" />
+          <div className="mx-1 my-1 border-t border-[var(--color-border)]" />
           <button
             onClick={handleCloseAll}
-            className="w-full px-4 py-2 text-left text-[13px] text-[var(--color-text-primary)] transition-colors hover:bg-[var(--color-surface-hover)]"
+            className="flex h-8 w-full items-center rounded-[var(--radius-sm)] px-2.5 text-left text-[13px] text-[var(--color-text-primary)] transition-colors hover:bg-[var(--color-surface-hover)]"
           >
             {t('tabs.closeAll')}
           </button>
@@ -923,15 +927,12 @@ const TabItem = forwardRef<HTMLDivElement, {
     ? (needsAttention
       ? <SessionAttentionMark label={attentionLabel} />
       : isRunning
-        ? <StatusDot tone="brand" pulse label={runningLabel} />
+        // Running is `info` everywhere in the app; the brand never marks a state.
+        ? <StatusDot tone="info" pulse label={runningLabel} />
         : tab.status === 'error'
           ? <StatusDot tone="danger" />
           : null)
-    : (
-      <span className="material-symbols-outlined text-[14px] leading-none text-[var(--color-text-tertiary)]">
-        {TAB_TYPE_ICON[tab.type] ?? TAB_TYPE_ICON_FALLBACK}
-      </span>
-    )
+    : <TabTypeIcon type={tab.type} />
 
   return (
     <div
@@ -942,39 +943,13 @@ const TabItem = forwardRef<HTMLDivElement, {
       onClick={onClick}
       onMouseDown={onMouseDown}
       onContextMenu={onContextMenu}
+      // The same chip as the workspace's resource tabs (`ui/tabChip`): one tab
+      // style for both strips. The tiers and why hover shares paper with the
+      // active tab are documented there.
       className={`
-        tab-bar-interactive tab-strip-item group relative flex min-h-[46px] flex-shrink-0 items-center rounded-t-[8px] border border-b-0 px-3
-        ${tab.type === 'settings' ? 'min-w-[195px] max-w-[195px]' : 'min-w-[140px] max-w-[200px]'}
-        ${isDragging ? 'z-[var(--z-sticky)] cursor-grabbing' : 'cursor-grab'}
-        transition-[background-color,border-color,box-shadow,opacity,transform] duration-150 ease-out
-        ${isActive || isDragging
-          // A document tab, still not a pill: the bottom edge stays square and
-          // borderless so paper runs unbroken from the tab into the view below.
-          // What a pill would add — a full radius, a drop shadow, and clearance
-          // from the content — stays banned; only the top two corners round.
-          //
-          // The border is load-bearing, not decoration. The strip is the
-          // sidebar's own ground, which puts this fill at 1.05–1.10:1 against
-          // it in all six themes: without an outline the corners are invisible
-          // and there is nothing to see. `--color-border` cannot stand in — it
-          // is calibrated against paper and lands at 1.12:1 on the trough.
-          ? 'border-[var(--color-tab-edge)] bg-[var(--color-surface)]'
-          // Hover rises toward paper, it does not fall away from it. The
-          // obvious `--color-surface-hover` is wrong here: it is tuned for
-          // hovering *on* paper, so on the two ink themes it lands brighter
-          // than paper itself (dark #2B271F vs #201D17) and a hovered tab
-          // outshines the selected one. Sharing paper with the active tab and
-          // letting the outline plus the label weight carry selection makes
-          // the active state strictly stronger in all six themes.
-          //
-          // It gets the weaker of the two outlines rather than none: the same
-          // 1.05–1.10:1 that hides the selected tab's corners hides a hovered
-          // tab's too, so without it hover is a fill with no discernible
-          // shape. Three legible tiers — no outline, hairline, full edge.
-          : 'border-transparent bg-transparent hover:border-[var(--color-tab-separator)] hover:bg-[var(--color-surface)]'
-        }
-        ${isDragging ? 'opacity-95 shadow-[var(--shadow-overlay)]' : ''}
-        ${isDragOver ? 'before:absolute before:left-0 before:top-[4px] before:bottom-[4px] before:w-[3px] before:bg-[var(--color-brand)] before:rounded-full' : ''}
+        ${tabChipClass(isActive || isDragging)} tab-strip-item
+        ${isDragging ? 'z-[var(--z-sticky)] cursor-grabbing opacity-95' : 'cursor-grab'}
+        ${isDragOver ? 'before:absolute before:-left-[3px] before:top-[4px] before:bottom-[4px] before:w-[2px] before:bg-[var(--color-brand)] before:rounded-full' : ''}
       `}
       style={{
         transform: isDragging ? `translateX(${dragOffsetX}px) scale(1.02)` : undefined,
@@ -996,7 +971,7 @@ const TabItem = forwardRef<HTMLDivElement, {
         {leadingGlyph}
       </span>
 
-      <span className={`min-w-0 flex-1 truncate text-xs ${isActive ? 'text-[var(--color-text-primary)] font-medium' : 'text-[var(--color-text-secondary)]'}`}>
+      <span className={tabChipLabelClass(isActive)}>
         {displayTitle}
       </span>
 
@@ -1005,13 +980,15 @@ const TabItem = forwardRef<HTMLDivElement, {
         `transition-colors`, which does not cover opacity, and a competing
         `transition-[…]` in `className` would resolve by stylesheet order.
       */}
-      <span className="-mr-1 ml-1.5 flex-shrink-0 opacity-0 transition-opacity duration-150 group-hover:opacity-100 focus-within:opacity-100">
+      {/* The active tab keeps its close button in sight, as Chrome does; the
+          rest reveal it on hover so an idle row stays all title. */}
+      <span className={`ml-1.5 flex-shrink-0 transition-opacity duration-150 group-hover:opacity-100 focus-within:opacity-100 ${isActive ? 'opacity-100' : 'opacity-0'}`}>
         <IconButton
-          icon="close"
+          icon={<X size={12} strokeWidth={2} aria-hidden="true" />}
           label={closeLabel}
           onMouseDown={(e) => { e.stopPropagation() }}
           onClick={(e) => { e.stopPropagation(); onClose() }}
-          size="xs"
+          size="2xs"
           tone="muted"
           showTooltip={false}
         />
@@ -1020,3 +997,16 @@ const TabItem = forwardRef<HTMLDivElement, {
   )
 })
 TabItem.displayName = 'TabItem'
+
+function TabTypeIcon({ type }: { type: TabType }) {
+  const Icon = TAB_TYPE_ICON[type] ?? TAB_TYPE_ICON_FALLBACK
+  return (
+    <Icon
+      size={14}
+      strokeWidth={1.75}
+      aria-hidden="true"
+      data-tab-type-icon={type}
+      className="text-[var(--color-text-tertiary)]"
+    />
+  )
+}
diff --git a/desktop/src/components/layout/Toast.test.tsx b/desktop/src/components/layout/Toast.test.tsx
index f93d19a1..4c6b4892 100644
--- a/desktop/src/components/layout/Toast.test.tsx
+++ b/desktop/src/components/layout/Toast.test.tsx
@@ -43,4 +43,23 @@ describe('ToastContainer accessibility', () => {
     expect(screen.getByText('Save failed').closest('[role]')).toHaveAttribute('role', 'alert')
     expect(screen.getAllByRole('button', { name: '关闭通知' })).toHaveLength(2)
   })
+
+  // The tone is carried by a leading glyph, not by colour alone on a rule:
+  // each state has its own outline, in its own status colour.
+  it.each([
+    ['success', 'lucide-circle-check', 'var(--color-success)'],
+    ['error', 'lucide-circle-x', 'var(--color-error)'],
+    ['warning', 'lucide-circle-alert', 'var(--color-warning)'],
+    ['info', 'lucide-info', 'var(--color-info)'],
+  ] as const)('marks a %s toast with its own glyph', (type, glyph, color) => {
+    useUIStore.setState({ toasts: [{ id: type, type, message: `${type} message` }] })
+
+    render(<ToastContainer />)
+
+    const toast = screen.getByText(`${type} message`).closest('[role]') as HTMLElement
+    const icon = toast.querySelector(`svg.${glyph}`)
+    expect(icon).toHaveAttribute('aria-hidden', 'true')
+    expect(icon?.getAttribute('class')).toContain(color)
+    expect(toast.className).not.toMatch(/border-l-/)
+  })
 })
diff --git a/desktop/src/components/layout/Toast.tsx b/desktop/src/components/layout/Toast.tsx
index 92d9394a..39ed3019 100644
--- a/desktop/src/components/layout/Toast.tsx
+++ b/desktop/src/components/layout/Toast.tsx
@@ -1,43 +1,41 @@
+import { CircleAlert, CircleCheck, CircleX, Info, X, type LucideIcon } from 'lucide-react'
 import { IconButton } from '@/components/ui/IconButton'
 import { useUIStore, type Toast as ToastType } from '../../stores/uiStore'
 import { useTranslation } from '../../i18n'
 
-// The tone lives in a 3px left rule rather than a tinted body: on the paper
-// themes a filled banner would fight the surrounding surface layering.
-const typeStyles: Record<ToastType['type'], string> = {
-  success: 'border-l-[3px] border-l-[var(--color-success)]',
-  error: 'border-l-[3px] border-l-[var(--color-error)]',
-  warning: 'border-l-[3px] border-l-[var(--color-warning)]',
-  info: 'border-l-[3px] border-l-[var(--color-info)]',
+// The tone lives in the leading glyph rather than a tinted body or a coloured
+// rule: on paper a filled banner fights the surrounding surface layering, and
+// the glyph is what carries the state in every other 「素」 surface.
+const TONE: Record<ToastType['type'], { icon: LucideIcon; color: string }> = {
+  success: { icon: CircleCheck, color: 'text-[var(--color-success)]' },
+  error: { icon: CircleX, color: 'text-[var(--color-error)]' },
+  warning: { icon: CircleAlert, color: 'text-[var(--color-warning)]' },
+  info: { icon: Info, color: 'text-[var(--color-info)]' },
 }
 
 function ToastItem({ toast }: { toast: ToastType }) {
   const t = useTranslation()
   const removeToast = useUIStore((s) => s.removeToast)
   const isUrgent = toast.type === 'warning' || toast.type === 'error'
+  const { icon: Icon, color } = TONE[toast.type]
 
   return (
     <div
       role={isUrgent ? 'alert' : 'status'}
       aria-live={isUrgent ? 'assertive' : 'polite'}
       aria-atomic="true"
-      className={`
-        rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface)]
-        px-4 py-3 text-[13.5px] text-[var(--color-text-primary)] shadow-[var(--shadow-overlay)]
-        ${typeStyles[toast.type]}
-        animate-overlay-in-right
-      `}
+      data-tone={toast.type}
+      className="animate-overlay-in-right flex items-start gap-2.5 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] py-2.5 pl-3 pr-2 text-[13px] text-[var(--color-text-primary)] shadow-[var(--shadow-dropdown)]"
     >
-      <div className="flex items-center justify-between gap-2.5">
-        <span className="min-w-0 flex-1 leading-[1.5]">{toast.message}</span>
-        <IconButton
-          icon="close"
-          label={t('common.dismissNotification')}
-          onClick={() => removeToast(toast.id)}
-          size="xs"
-          tone="muted"
-        />
-      </div>
+      <Icon size={16} strokeWidth={1.75} className={`mt-0.5 shrink-0 ${color}`} aria-hidden="true" />
+      <span className="min-w-0 flex-1 leading-5">{toast.message}</span>
+      <IconButton
+        icon={<X size={14} strokeWidth={1.75} aria-hidden="true" />}
+        label={t('common.dismissNotification')}
+        onClick={() => removeToast(toast.id)}
+        size="xs"
+        tone="muted"
+      />
     </div>
   )
 }
@@ -48,7 +46,7 @@ export function ToastContainer() {
   if (toasts.length === 0) return null
 
   return (
-    <div className="fixed bottom-4 right-4 z-[var(--z-toast)] flex flex-col gap-2 max-w-sm">
+    <div className="fixed bottom-4 right-4 z-[var(--z-toast)] flex max-w-sm flex-col gap-2">
       {toasts.map((toast) => (
         <ToastItem key={toast.id} toast={toast} />
       ))}
diff --git a/desktop/src/components/layout/UpdateChecker.tsx b/desktop/src/components/layout/UpdateChecker.tsx
index f8bf2c28..9254dfdf 100644
--- a/desktop/src/components/layout/UpdateChecker.tsx
+++ b/desktop/src/components/layout/UpdateChecker.tsx
@@ -30,16 +30,16 @@ export function UpdateChecker() {
 
   return (
     <div className="fixed bottom-4 left-1/2 z-[var(--z-toast)] w-[min(360px,calc(100vw-2rem))] -translate-x-1/2">
-      <div className="rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface)] p-4 shadow-[var(--shadow-overlay)]">
+      <div className="rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] p-4 shadow-[var(--shadow-dropdown)]">
         <p className="text-[14px] font-semibold text-[var(--color-text-primary)]">
           {t('update.readyTitle')}
         </p>
-        <p className="mt-1 text-[12.5px] leading-5 text-[var(--color-text-secondary)]">
+        <p className="mt-1 text-[12px] leading-5 text-[var(--color-text-secondary)]">
           {statusText}
         </p>
 
         {releaseNotes && (
-          <div className="mt-2.5 max-h-28 overflow-y-auto rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)] px-3 py-2">
+          <div className="mt-2.5 max-h-28 overflow-y-auto rounded-[var(--radius-md)] bg-[var(--color-surface-container)] px-3 py-2">
             <MarkdownRenderer
               content={releaseNotes}
               className="text-xs leading-5 text-[var(--color-text-secondary)] [&_h1]:mb-2 [&_h1]:text-sm [&_h1]:font-semibold [&_h2]:mb-1.5 [&_h2]:text-xs [&_h2]:font-semibold [&_p]:my-1.5 [&_p]:text-xs [&_p]:leading-5 [&_ul]:my-1.5 [&_ol]:my-1.5"
@@ -48,7 +48,7 @@ export function UpdateChecker() {
         )}
 
         {error && (
-          <p className="mt-2 text-[12.5px] text-[var(--color-error)]" role="alert">
+          <p className="mt-2 text-[12px] text-[var(--color-error)]" role="alert">
             {t('update.failed', { error })}
           </p>
         )}
diff --git a/desktop/src/components/layout/WorkspaceLayoutControls.tsx b/desktop/src/components/layout/WorkspaceLayoutControls.tsx
index c7f0b45c..d847d6c8 100644
--- a/desktop/src/components/layout/WorkspaceLayoutControls.tsx
+++ b/desktop/src/components/layout/WorkspaceLayoutControls.tsx
@@ -28,7 +28,9 @@ export function WorkspaceLayoutControls({
   const hint = (label: string, shortcut: string | null) => (
     <span className="flex items-center gap-2 whitespace-nowrap font-medium">
       {label}
-      <kbd className="rounded-full bg-[var(--color-surface-container)] px-1.5 font-sans font-normal">{shortcut}</kbd>
+      {shortcut ? (
+        <kbd className="inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-[var(--radius-xs)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] px-1 font-mono text-[11px] font-normal leading-none text-[var(--color-text-tertiary)]">{shortcut}</kbd>
+      ) : null}
     </span>
   )
 
@@ -36,10 +38,10 @@ export function WorkspaceLayoutControls({
     <>
       {isVisible && <IconButton
         icon={isFull
-          ? <Minimize2 size={17} strokeWidth={1.9} />
-          : <Maximize2 size={17} strokeWidth={1.9} />}
+          ? <Minimize2 size={16} strokeWidth={1.75} aria-hidden="true" />
+          : <Maximize2 size={16} strokeWidth={1.75} aria-hidden="true" />}
         label={t(isFull ? 'workspace.controls.restore' : 'workspace.controls.expand')}
-        size="md"
+        size="sm"
         tone="muted"
         pressed={isFull}
         data-testid="workspace-toggle-fullscreen"
@@ -47,10 +49,10 @@ export function WorkspaceLayoutControls({
       />}
       <Tooltip placement="bottom-end" appearance="surface" content={hint(t('workspace.controls.toggleBottom'), formatWorkspaceShortcut('toggle-bottom-panel', platform))}>
       <IconButton
-        icon={<PanelBottom size={17} strokeWidth={1.9} />}
+        icon={<PanelBottom size={16} strokeWidth={1.75} aria-hidden="true" />}
         label={t('workspace.controls.toggleBottom')}
         showTooltip={false}
-        size="md"
+        size="sm"
         tone="muted"
         pressed={bottomOpen}
         data-testid="workspace-toggle-bottom"
@@ -61,10 +63,10 @@ export function WorkspaceLayoutControls({
       </Tooltip>
       <Tooltip placement="bottom-end" appearance="surface" content={hint(t('workspace.controls.toggleSide'), formatWorkspaceShortcut('toggle-workspace', platform))}>
       <IconButton
-        icon={<PanelRight size={17} strokeWidth={1.9} />}
+        icon={<PanelRight size={16} strokeWidth={1.75} aria-hidden="true" />}
         label={t(isVisible ? 'tabs.hideWorkspace' : 'tabs.showWorkspace')}
         showTooltip={false}
-        size="md"
+        size="sm"
         tone="muted"
         pressed={isVisible}
         data-testid="workspace-toggle-side"
diff --git a/desktop/src/components/layout/sidebarTaskGroups.test.ts b/desktop/src/components/layout/sidebarTaskGroups.test.ts
index 624c1471..1dee4730 100644
--- a/desktop/src/components/layout/sidebarTaskGroups.test.ts
+++ b/desktop/src/components/layout/sidebarTaskGroups.test.ts
@@ -212,4 +212,23 @@ describe('isWorktreeSession', () => {
       workDir: '/Users/dev/work/alpha-experiment',
     }))).toBe(true)
   })
+
+  // git resolves the root through the macOS `/var` → `/private/var` symlink
+  // while the work dir keeps the shell's spelling. Without folding the alias,
+  // every session under a temp dir wore the worktree branch glyph.
+  it.each([
+    ['/private/var/folders/x/T/proj', '/var/folders/x/T/proj'],
+    ['/var/folders/x/T/proj', '/private/var/folders/x/T/proj/src'],
+    ['/private/tmp/proj', '/tmp/proj'],
+  ])('does not flag a work dir that is the root %s spelled through /private', (projectRoot, workDir) => {
+    expect(isWorktreeSession(makeSession({ id: 'a', projectRoot, workDir }))).toBe(false)
+  })
+
+  it('still flags a sibling checkout behind the /private alias', () => {
+    expect(isWorktreeSession(makeSession({
+      id: 'a',
+      projectRoot: '/private/var/folders/x/T/proj',
+      workDir: '/var/folders/x/T/proj-feature',
+    }))).toBe(true)
+  })
 })
diff --git a/desktop/src/components/layout/sidebarTaskGroups.ts b/desktop/src/components/layout/sidebarTaskGroups.ts
index 067f5ef3..78dce436 100644
--- a/desktop/src/components/layout/sidebarTaskGroups.ts
+++ b/desktop/src/components/layout/sidebarTaskGroups.ts
@@ -44,9 +44,20 @@ export function normalizePathForCompare(pathLike: string): string {
   return pathLike.replace(/\\/g, '/').replace(/\/+$/, '')
 }
 
+/**
+ * macOS exposes `/var`, `/tmp` and `/etc` through symlinks into `/private`, and
+ * the two halves of a session can disagree about which spelling they carry:
+ * the project root is resolved through git (real path), the work dir is kept
+ * as the user's shell typed it. Treat the two spellings as one place, or every
+ * session under a temp directory reads as a separate worktree.
+ */
+function stripPrivateAlias(pathLike: string): string {
+  return pathLike.replace(/^\/private(?=\/(?:var|tmp|etc)(?:\/|$))/, '')
+}
+
 export function isSameOrChildPath(childPath: string, parentPath: string): boolean {
-  const child = normalizePathForCompare(childPath)
-  const parent = normalizePathForCompare(parentPath)
+  const child = stripPrivateAlias(normalizePathForCompare(childPath))
+  const parent = stripPrivateAlias(normalizePathForCompare(parentPath))
   return child === parent || child.startsWith(`${parent}/`)
 }
 
diff --git a/desktop/src/components/markdown/MarkdownRenderer.test.tsx b/desktop/src/components/markdown/MarkdownRenderer.test.tsx
index 9f94a281..8dd39689 100644
--- a/desktop/src/components/markdown/MarkdownRenderer.test.tsx
+++ b/desktop/src/components/markdown/MarkdownRenderer.test.tsx
@@ -100,7 +100,12 @@ describe('MarkdownRenderer', () => {
     const root = container.firstChild as HTMLDivElement
     expect(root).toBeInTheDocument()
     expect(root.className).toContain('prose-code:text-[var(--color-code-fg)]')
-    expect(root.className).toContain('prose-code:bg-[var(--color-code-bg)]')
+    // A sunken chip, not a bordered box: regular weight, the shared
+    // `surface-container` fill, the smallest radius and no outline.
+    expect(root.className).toContain('prose-code:bg-[var(--color-surface-container)]')
+    expect(root.className).toContain('prose-code:font-normal')
+    expect(root.className).toContain('prose-code:rounded-[var(--radius-xs)]')
+    expect(root.className).not.toContain('prose-code:border')
     expect(root.className).not.toContain('prose-code:text-[var(--color-primary-fixed)]')
     expect(screen.getByText('claude-sonnet-4-6')).toBeInTheDocument()
   })
diff --git a/desktop/src/components/markdown/MarkdownRenderer.tsx b/desktop/src/components/markdown/MarkdownRenderer.tsx
index fe3d7172..f5445810 100644
--- a/desktop/src/components/markdown/MarkdownRenderer.tsx
+++ b/desktop/src/components/markdown/MarkdownRenderer.tsx
@@ -1,5 +1,6 @@
 import { memo, useMemo, useCallback } from 'react'
 import type { MouseEvent as ReactMouseEvent } from 'react'
+import { LoaderCircle } from 'lucide-react'
 import DOMPurify from 'dompurify'
 import katex from 'katex'
 import 'katex/dist/katex.min.css'
@@ -127,10 +128,10 @@ function MermaidStreamingPlaceholder() {
   return (
     <div
       data-testid="mermaid-streaming-placeholder"
-      className="my-4 flex items-center justify-center rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)] py-8"
+      className="my-4 flex items-center justify-center rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)] py-8"
     >
-      <div className="flex items-center gap-2 text-[11px] text-[var(--color-text-tertiary)]">
-        <span className="material-symbols-outlined animate-spin text-[16px]">progress_activity</span>
+      <div className="flex items-center gap-2 text-xs text-[var(--color-text-tertiary)]">
+        <LoaderCircle size={14} strokeWidth={1.75} className="animate-spin" aria-hidden="true" />
         {t('chat.generatingDiagram')}
       </div>
     </div>
@@ -572,7 +573,7 @@ const BASE_PROSE_CLASSES = `markdown-prose prose prose-sm min-w-0 max-w-none bre
   prose-headings:text-[var(--color-text-primary)] prose-headings:font-semibold prose-headings:font-[var(--font-headline)]
   prose-p:my-2 prose-p:leading-relaxed
   prose-p:break-words prose-p:[overflow-wrap:anywhere]
-  prose-code:text-[13px] prose-code:text-[var(--color-code-fg)] prose-code:font-mono prose-code:bg-[var(--color-code-bg)] prose-code:border prose-code:border-[var(--color-border)] prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded-[var(--radius-sm)] prose-code:before:hidden prose-code:after:hidden
+  prose-code:text-[13px] prose-code:text-[var(--color-code-fg)] prose-code:font-mono prose-code:font-normal prose-code:bg-[var(--color-surface-container)] prose-code:px-[5px] prose-code:py-px prose-code:rounded-[var(--radius-xs)] prose-code:before:hidden prose-code:after:hidden
   prose-pre:!bg-transparent prose-pre:!p-0 prose-pre:!shadow-none
   prose-a:text-[var(--color-text-accent)] prose-a:[overflow-wrap:anywhere]
   prose-a:underline prose-a:decoration-[1px] prose-a:underline-offset-[3px] prose-a:decoration-[var(--color-text-accent)] prose-a:hover:decoration-[2px]
@@ -581,26 +582,26 @@ const BASE_PROSE_CLASSES = `markdown-prose prose prose-sm min-w-0 max-w-none bre
   prose-strong:text-[var(--color-text-primary)]
   prose-ul:my-2 prose-ol:my-2 prose-ul:pl-5 prose-ol:pl-5 prose-ul:list-outside prose-ol:list-outside
   prose-li:my-0.5
-  prose-table:my-0 prose-table:w-full prose-table:table-auto prose-table:text-sm
-  prose-th:bg-[var(--color-surface-info)] prose-th:px-3 prose-th:py-2 prose-th:text-left prose-th:whitespace-normal prose-th:break-words prose-th:align-top prose-th:border-b prose-th:border-[var(--color-border)]
-  prose-td:px-3 prose-td:py-2 prose-td:border-b prose-td:border-[var(--color-border)] prose-td:whitespace-normal prose-td:break-words prose-td:align-top prose-td:bg-[var(--color-surface)]
+  prose-table:my-0 prose-table:w-full prose-table:table-auto prose-table:text-[13px]
+  prose-th:bg-[var(--color-surface-container)] prose-th:px-3 prose-th:py-2 prose-th:text-left prose-th:text-xs prose-th:font-semibold prose-th:text-[var(--color-text-secondary)] prose-th:whitespace-normal prose-th:break-words prose-th:align-top prose-th:border-b prose-th:border-[var(--color-border)]
+  prose-td:px-3 prose-td:py-2 prose-td:border-b prose-td:border-[var(--color-border)] prose-td:whitespace-normal prose-td:break-words prose-td:align-top
   [&_.katex]:[white-space:nowrap] [&_.katex]:[overflow-wrap:normal] [&_.katex]:[word-break:normal]
   [&_.md-math-inline]:inline-flex [&_.md-math-inline]:max-w-full [&_.md-math-inline]:overflow-x-auto [&_.md-math-inline]:[vertical-align:-0.08em] [&_.md-math-inline_.katex]:text-[1.02em]
   [&_.md-math-display]:my-5 [&_.md-math-display]:flex [&_.md-math-display]:max-w-full [&_.md-math-display]:justify-center [&_.md-math-display]:overflow-x-auto [&_.md-math-display]:px-1 [&_.md-math-display]:py-2 [&_.md-math-display]:[scrollbar-width:thin]
   [&_.md-math-display_.katex-display]:m-0 [&_.md-math-display_.katex]:text-[1.14em] [&_.md-math-display_.katex-html]:min-w-max
-  [&_.md-table-wrap]:my-5 [&_.md-table-wrap]:overflow-x-auto [&_.md-table-wrap]:rounded-[var(--radius-lg)] [&_.md-table-wrap]:border [&_.md-table-wrap]:border-[var(--color-border)] [&_.md-table-wrap]:bg-[var(--color-surface-container-lowest)]`
+  [&_.md-table-wrap]:my-4 [&_.md-table-wrap]:overflow-x-auto [&_.md-table-wrap]:rounded-[var(--radius-md)] [&_.md-table-wrap]:border [&_.md-table-wrap]:border-[var(--color-border)] [&_.md-table-wrap]:bg-[var(--color-surface-container-lowest)]`
 
 const DOCUMENT_PROSE_CLASSES = `
   prose-p:text-[15px] prose-p:leading-7
   prose-headings:scroll-mt-6 prose-headings:tracking-[-0.01em]
-  prose-h1:mb-4 prose-h1:text-2xl prose-h1:font-semibold prose-h1:leading-tight
-  prose-h2:mt-8 prose-h2:mb-3 prose-h2:border-b prose-h2:border-[var(--color-border)] prose-h2:pb-2 prose-h2:text-xl prose-h2:font-semibold
-  prose-h3:mt-6 prose-h3:mb-2 prose-h3:text-base prose-h3:font-semibold
+  prose-h1:mb-4 prose-h1:text-[22px] prose-h1:font-semibold prose-h1:leading-tight
+  prose-h2:mt-8 prose-h2:mb-3 prose-h2:border-b prose-h2:border-[var(--color-border)] prose-h2:pb-2 prose-h2:text-lg prose-h2:font-semibold
+  prose-h3:mt-6 prose-h3:mb-2 prose-h3:text-[15px] prose-h3:font-semibold
   prose-h4:mt-5 prose-h4:mb-2 prose-h4:text-sm prose-h4:font-semibold
-  prose-blockquote:my-4 prose-blockquote:rounded-r-[var(--radius-md)] prose-blockquote:border-l-4 prose-blockquote:border-[var(--color-primary-fixed-dim)] prose-blockquote:bg-[var(--color-surface-container-low)] prose-blockquote:px-4 prose-blockquote:py-2 prose-blockquote:italic
+  prose-blockquote:my-4 prose-blockquote:border-l-2 prose-blockquote:border-[var(--color-outline)] prose-blockquote:pl-4 prose-blockquote:font-normal prose-blockquote:not-italic prose-blockquote:text-[var(--color-text-secondary)]
   prose-hr:my-6 prose-hr:border-[var(--color-border)]
-  prose-img:rounded-[var(--radius-lg)] prose-img:border prose-img:border-[var(--color-border)]
-  prose-kbd:rounded-[var(--radius-sm)] prose-kbd:border prose-kbd:border-[var(--color-border)] prose-kbd:bg-[var(--color-surface-container-lowest)] prose-kbd:px-1.5 prose-kbd:py-0.5 prose-kbd:font-mono prose-kbd:text-[12px] prose-kbd:font-normal prose-kbd:text-[var(--color-text-secondary)] prose-kbd:shadow-none
+  prose-img:rounded-[var(--radius-md)] prose-img:border prose-img:border-[var(--color-border)]
+  prose-kbd:rounded-[var(--radius-xs)] prose-kbd:border prose-kbd:border-[var(--color-border)] prose-kbd:bg-[var(--color-surface-container-lowest)] prose-kbd:px-1 prose-kbd:py-0 prose-kbd:font-mono prose-kbd:text-[11px] prose-kbd:font-normal prose-kbd:text-[var(--color-text-tertiary)] prose-kbd:shadow-none
   prose-ul:pl-5 prose-ul:[&>li]:marker:text-[var(--color-text-tertiary)]
   prose-ol:pl-5 prose-ol:[&>li]:marker:text-[var(--color-text-tertiary)]
   prose-li:my-1.5
@@ -610,8 +611,8 @@ const DOCUMENT_PROSE_CLASSES = `
 const COMPACT_PROSE_CLASSES = `
   prose-p:my-1 prose-p:text-xs prose-p:leading-5 prose-p:text-[var(--color-text-secondary)]
   prose-headings:mt-2 prose-headings:mb-1 prose-headings:leading-snug
-  prose-h1:text-base prose-h2:text-sm prose-h3:text-xs prose-h4:text-xs
-  prose-blockquote:my-2 prose-blockquote:border-l-2 prose-blockquote:border-[var(--color-primary-fixed-dim)] prose-blockquote:pl-3 prose-blockquote:text-[var(--color-text-secondary)]
+  prose-h1:text-[15px] prose-h2:text-sm prose-h3:text-xs prose-h4:text-xs
+  prose-blockquote:my-2 prose-blockquote:border-l-2 prose-blockquote:border-[var(--color-outline)] prose-blockquote:pl-3 prose-blockquote:font-normal prose-blockquote:not-italic prose-blockquote:text-[var(--color-text-secondary)]
   prose-code:text-[12px]
   prose-ul:my-1 prose-ol:my-1 prose-ul:pl-4 prose-ol:pl-4
   prose-li:my-0.5 prose-li:text-xs prose-li:leading-5 prose-li:text-[var(--color-text-secondary)]
diff --git a/desktop/src/components/market/CapabilityPanel.tsx b/desktop/src/components/market/CapabilityPanel.tsx
index 33cf2248..10031a19 100644
--- a/desktop/src/components/market/CapabilityPanel.tsx
+++ b/desktop/src/components/market/CapabilityPanel.tsx
@@ -67,48 +67,51 @@ export function CapabilityPanel({
   if (capabilities.length === 0) return null
 
   return (
+    // A white card with a hairline, like every other group on the page; the
+    // caution is carried by the header icon and the per-row level badges, not
+    // by painting the whole block amber.
     <section
       aria-labelledby="market-capabilities-title"
       data-testid="market-capability-panel"
-      className="flex-shrink-0 rounded-[var(--radius-xl)] border border-[var(--color-warning)] bg-[var(--color-warning-container)] px-5 py-[18px]"
+      className="flex-shrink-0 overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)]"
     >
-      <header className="flex flex-wrap items-center justify-between gap-x-4 gap-y-2">
+      <header className="flex min-h-10 items-center gap-2 border-b border-[var(--color-border)] py-1 pl-4 pr-2">
+        <TriangleAlert className="flex-shrink-0 text-[var(--color-warning)]" size={15} strokeWidth={1.75} aria-hidden="true" />
         <h2
           id="market-capabilities-title"
-          className="flex items-center gap-2 text-[15px] font-semibold text-[var(--color-on-warning-container)]"
+          className="min-w-0 flex-1 text-[13px] font-medium text-[var(--color-text-primary)]"
         >
-          <TriangleAlert className="h-[17px] w-[17px] flex-shrink-0" strokeWidth={1.8} aria-hidden="true" />
           {t('market.cap.title')}
         </h2>
         {onViewReport && (
-          <Button variant="link" size="sm" data-testid="market-capability-view-report" onClick={onViewReport}>
+          <Button variant="ghost" size="sm" data-testid="market-capability-view-report" onClick={onViewReport}>
             {t('market.cap.viewReport')}
           </Button>
         )}
       </header>
-      <ul className="mt-3.5 grid gap-2.5 grid-cols-[repeat(auto-fill,minmax(200px,1fr))]">
+      <ul className="divide-y divide-[var(--color-border)]">
         {capabilities.map((capability) => {
           const text = capabilityText(t, capability)
           return (
             <li
               key={capability.kind}
               data-testid={`market-capability-${capability.kind}`}
-              className="flex min-w-0 flex-col gap-1.5 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface)] px-3.5 py-3"
+              className="flex min-w-0 items-start gap-3 px-4 py-2.5"
             >
-              <span className="flex items-center justify-between gap-2">
-                <strong className="text-[13.5px] font-semibold text-[var(--color-text-primary)]">{text.title}</strong>
-                <Badge tone={CAPABILITY_LEVEL_TONES[capability.level]} size="xs" pill={false}>
-                  {t(`market.cap.level.${capability.level}`)}
-                </Badge>
-              </span>
-              <span className="break-words font-mono text-xs leading-5 text-[var(--color-text-secondary)]">
-                {text.detail}
+              <span className="flex min-w-0 flex-1 flex-col gap-0.5">
+                <span className="text-[13px] font-medium text-[var(--color-text-primary)]">{text.title}</span>
+                <span className="break-words font-mono text-xs leading-5 text-[var(--color-text-secondary)]">
+                  {text.detail}
+                </span>
               </span>
+              <Badge tone={CAPABILITY_LEVEL_TONES[capability.level]} size="xs" className="mt-0.5">
+                {t(`market.cap.level.${capability.level}`)}
+              </Badge>
             </li>
           )
         })}
       </ul>
-      <p className="mt-3 text-xs leading-5 text-[var(--color-on-warning-container)]">{t('market.cap.note')}</p>
+      <p className="border-t border-[var(--color-border)] px-4 py-2.5 text-xs leading-5 text-[var(--color-text-tertiary)]">{t('market.cap.note')}</p>
     </section>
   )
 }
diff --git a/desktop/src/components/market/ChangelogPanel.tsx b/desktop/src/components/market/ChangelogPanel.tsx
index 6f7158b5..f7ba1238 100644
--- a/desktop/src/components/market/ChangelogPanel.tsx
+++ b/desktop/src/components/market/ChangelogPanel.tsx
@@ -26,41 +26,43 @@ export function ChangelogPanel({
 
   return (
     <Card
-      radius="xl"
-      surface="base"
+      radius="lg"
+      surface="lowest"
       padding="none"
-      className="px-6 py-5 sm:px-[30px]"
+      className="overflow-hidden"
       data-testid="market-changelog-panel"
     >
-      <h2 className="text-[15px] font-semibold text-[var(--color-text-primary)]">{t('market.detail.changelog')}</h2>
-      {changelog ? (
-        <article className="mt-3.5">
-          <header className="flex flex-wrap items-center gap-2.5">
-            {releaseVersion && (
-              <Badge variant="outline" size="sm" pill={false} mono>
-                {releaseVersion.startsWith('v') ? releaseVersion : `v${releaseVersion}`}
-              </Badge>
-            )}
-            {published && <span className="font-mono text-xs text-[var(--color-text-tertiary)]">{published}</span>}
-          </header>
-          <p className="mt-2.5 whitespace-pre-wrap break-words text-sm leading-[1.7] text-[var(--color-text-secondary)]">
-            {changelog.text}
-          </p>
-        </article>
-      ) : (
-        <p className="mt-3 text-sm text-[var(--color-text-tertiary)]">{t('market.detail.noChangelog')}</p>
-      )}
-      {href && (
-        <a
-          href={href}
-          target="_blank"
-          rel="noreferrer noopener"
-          className="mt-4 inline-flex w-fit items-center gap-1 rounded-[var(--radius-sm)] text-[13px] font-medium text-[var(--color-brand)] underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]"
-        >
-          {t('market.detail.sourcePage')}
-          <ExternalLink className="h-3 w-3" strokeWidth={1.8} aria-hidden="true" />
-        </a>
-      )}
+      <h2 className="flex h-10 items-center border-b border-[var(--color-border)] px-4 text-[13px] font-medium text-[var(--color-text-primary)]">{t('market.detail.changelog')}</h2>
+      <div className="px-4 py-3">
+        {changelog ? (
+          <article>
+            <header className="flex flex-wrap items-center gap-2">
+              {releaseVersion && (
+                <Badge variant="outline" size="xs" mono>
+                  {releaseVersion.startsWith('v') ? releaseVersion : `v${releaseVersion}`}
+                </Badge>
+              )}
+              {published && <span className="font-mono text-[11px] tabular-nums text-[var(--color-text-tertiary)]">{published}</span>}
+            </header>
+            <p className="mt-2 whitespace-pre-wrap break-words text-[13px] leading-[1.7] text-[var(--color-text-secondary)]">
+              {changelog.text}
+            </p>
+          </article>
+        ) : (
+          <p className="text-[13px] text-[var(--color-text-tertiary)]">{t('market.detail.noChangelog')}</p>
+        )}
+        {href && (
+          <a
+            href={href}
+            target="_blank"
+            rel="noreferrer noopener"
+            className="mt-3 inline-flex w-fit items-center gap-1 rounded-[var(--radius-xs)] text-xs text-[var(--color-text-accent)] underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]"
+          >
+            {t('market.detail.sourcePage')}
+            <ExternalLink size={12} strokeWidth={1.75} aria-hidden="true" />
+          </a>
+        )}
+      </div>
     </Card>
   )
 }
diff --git a/desktop/src/components/market/FilePreview.tsx b/desktop/src/components/market/FilePreview.tsx
index 8f03f1ff..5d566c45 100644
--- a/desktop/src/components/market/FilePreview.tsx
+++ b/desktop/src/components/market/FilePreview.tsx
@@ -141,10 +141,10 @@ export function FilePreview({
 
   return (
     <div
-      className="grid min-h-0 min-w-0 flex-1 gap-5 lg:h-full lg:grid-cols-[minmax(0,320px)_minmax(0,1fr)]"
+      className="grid min-h-0 min-w-0 flex-1 gap-4 @3xl:h-full @3xl:grid-cols-[minmax(0,260px)_minmax(0,1fr)]"
       data-testid="market-file-preview"
     >
-      <div className="flex max-h-[40vh] min-h-0 flex-col gap-0.5 overflow-y-auto rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface)] p-2 lg:max-h-none">
+      <div className="flex max-h-[40vh] min-h-0 flex-col gap-px overflow-y-auto rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] p-1 @3xl:max-h-none">
         {files.map((file) => {
           const active = file.path === activePath
           const Icon = LANG_ICONS[file.language] ?? File
@@ -154,18 +154,23 @@ export function FilePreview({
               type="button"
               data-testid={`market-file-item-${file.path}`}
               onClick={() => void open(file.path)}
-              className={`flex items-center gap-2.5 rounded-[var(--radius-lg)] px-3 py-2.5 text-left transition-colors focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus-ring)] ${
+              className={`flex items-center gap-2.5 rounded-[var(--radius-sm)] px-2.5 py-1.5 text-left transition-colors focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus-ring)] ${
+                // The list's selected row: the neutral selected fill, with the
+                // brand reserved for the selected item's icon.
                 active
-                  ? // The darkened pair, not `--color-brand`: raw terracotta on
-                    // its own soft fill misses AA under the two ink themes.
-                    'bg-[var(--color-brand-soft)] text-[var(--color-on-brand-soft)]'
-                  : 'text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-hover)]'
+                  ? 'bg-[var(--color-surface-selected)] text-[var(--color-text-primary)]'
+                  : 'text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)]'
               }`}
             >
-              <Icon className="h-[15px] w-[15px] flex-shrink-0" strokeWidth={1.5} aria-hidden="true" />
+              <Icon
+                className={`flex-shrink-0 ${active ? 'text-[var(--color-brand)]' : 'text-[var(--color-text-tertiary)]'}`}
+                size={14}
+                strokeWidth={1.75}
+                aria-hidden="true"
+              />
               <span className="min-w-0 flex-1">
-                <span className="block truncate text-[13.5px] font-medium">{file.path}</span>
-                <span className={`mt-px block text-[11.5px] ${active ? 'opacity-80' : 'text-[var(--color-text-tertiary)]'}`}>
+                <span className="block truncate text-[13px] font-medium">{file.path}</span>
+                <span className="block font-mono text-[11px] text-[var(--color-text-tertiary)]">
                   {file.language} · {formatSize(file.size)}
                 </span>
               </span>
@@ -174,23 +179,23 @@ export function FilePreview({
         })}
       </div>
 
-      <div className="flex min-h-0 min-w-0 flex-col overflow-hidden rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface)]">
+      <div className="flex min-h-0 min-w-0 flex-col overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)]">
         {activeFile && (
-          <div className="flex flex-shrink-0 flex-wrap items-center gap-x-2.5 gap-y-1 border-b border-[var(--color-border)] bg-[var(--color-surface-container-low)] px-[18px] py-3 text-xs text-[var(--color-text-tertiary)]">
-            <span className="font-mono text-[13.5px] font-semibold text-[var(--color-text-primary)]">{activeFile.path}</span>
+          <div className="flex min-h-10 flex-shrink-0 flex-wrap items-center gap-x-2 gap-y-1 border-b border-[var(--color-border)] px-4 py-2 text-xs text-[var(--color-text-tertiary)]">
+            <span className="font-mono text-xs text-[var(--color-text-primary)]">{activeFile.path}</span>
             <span>{activeFile.language}</span>
             <span>·</span>
             <span>{formatSize(activeFile.size)}</span>
             {state.kind === 'loaded' && state.file.truncated && (
               <span className="inline-flex items-center gap-1 text-[var(--color-warning)]">
-                <Scissors className="h-3 w-3" strokeWidth={1.6} aria-hidden="true" />
+                <Scissors size={12} strokeWidth={1.75} aria-hidden="true" />
                 {t('market.file.truncated')}
               </span>
             )}
           </div>
         )}
 
-        <div className="min-h-0 flex-1 overflow-y-auto px-[26px] py-[22px] max-lg:max-h-[70vh]">
+        <div className="min-h-0 flex-1 overflow-y-auto px-6 py-5 @max-3xl:max-h-[70vh]">
           {state.kind === 'loading' && (
             <div className="flex justify-center py-10" data-testid="market-file-loading">
               <Spinner size={20} tone="brand" label={t('common.loading')} />
@@ -198,14 +203,14 @@ export function FilePreview({
           )}
           {state.kind === 'error' && (
             <div className="flex flex-col items-center gap-2 py-8 text-center" data-testid="market-file-error">
-              <CircleAlert className="h-7 w-7 text-[var(--color-error)]" strokeWidth={1.6} aria-hidden="true" />
-              <p className="text-sm text-[var(--color-text-primary)]">{t('market.file.loadError')}</p>
+              <CircleAlert className="text-[var(--color-error)]" size={20} strokeWidth={1.75} aria-hidden="true" />
+              <p className="text-[13px] font-medium text-[var(--color-text-primary)]">{t('market.file.loadError')}</p>
               <p className="max-w-md break-words text-xs text-[var(--color-text-tertiary)]">{state.message}</p>
               <Button
                 variant="secondary"
                 size="base"
                 className="mt-1"
-                icon={<RefreshCw className="h-3.5 w-3.5" strokeWidth={2} aria-hidden="true" />}
+                icon={<RefreshCw size={14} strokeWidth={1.75} aria-hidden="true" />}
                 onClick={() => activePath && void open(activePath)}
               >
                 {t('market.retry')}
@@ -213,7 +218,7 @@ export function FilePreview({
             </div>
           )}
           {state.kind === 'idle' && (
-            <p className="py-10 text-center text-sm text-[var(--color-text-tertiary)]">{t('market.file.empty')}</p>
+            <p className="py-10 text-center text-[13px] text-[var(--color-text-tertiary)]">{t('market.file.empty')}</p>
           )}
           {state.kind === 'loaded' &&
             (state.file.language === 'markdown' ? (
diff --git a/desktop/src/components/market/FilterBar.tsx b/desktop/src/components/market/FilterBar.tsx
index d5e95020..6a2806eb 100644
--- a/desktop/src/components/market/FilterBar.tsx
+++ b/desktop/src/components/market/FilterBar.tsx
@@ -29,18 +29,18 @@ const FilterTrigger = forwardRef<HTMLButtonElement, FilterTriggerProps>(function
     <button
       ref={ref}
       type="button"
-      className={`inline-flex min-h-11 items-center gap-2 rounded-[var(--radius-lg)] border px-4 text-sm transition-[background-color,color,border-color,box-shadow,transform] duration-150 ease-out focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus-ring)] active:scale-[0.98] motion-reduce:transition-none ${
+      className={`inline-flex h-8 items-center gap-1.5 rounded-[var(--radius-md)] border px-2.5 text-[13px] transition-[background-color,color,border-color,box-shadow] duration-150 ease-out focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus-ring)] motion-reduce:transition-none ${
+        // A narrowed filter reads as "selected", in the neutral selected fill:
+        // the brand wash it used to carry is kept for brand and send only.
         active
-          ? // Foreground is the darkened pair; raw terracotta on its own soft
-            // fill only reaches 4.3:1 under the two ink themes.
-            'border-[var(--color-primary-fixed-dim)] bg-[var(--color-brand-soft)] text-[var(--color-on-brand-soft)]'
+          ? 'border-[var(--color-outline)] bg-[var(--color-surface-selected)] text-[var(--color-text-primary)]'
           : 'border-[var(--color-border)] bg-[var(--color-surface)] text-[var(--color-text-primary)] hover:border-[var(--color-outline)] hover:bg-[var(--color-surface-hover)]'
       }`}
       {...props}
     >
-      <span className={active ? 'text-[var(--color-on-brand-soft)]' : 'text-[var(--color-text-secondary)]'}>{label}</span>
-      <span className="font-semibold">{value}</span>
-      <ChevronDown className="h-3.5 w-3.5 text-[var(--color-text-tertiary)]" strokeWidth={1.8} aria-hidden="true" />
+      <span className="text-[var(--color-text-tertiary)]">{label}</span>
+      <span className="font-medium">{value}</span>
+      <ChevronDown className="text-[var(--color-text-tertiary)]" size={14} strokeWidth={1.75} aria-hidden="true" />
     </button>
   )
 })
diff --git a/desktop/src/components/market/FrontmatterPanel.tsx b/desktop/src/components/market/FrontmatterPanel.tsx
index cbd483d2..ad9f73f1 100644
--- a/desktop/src/components/market/FrontmatterPanel.tsx
+++ b/desktop/src/components/market/FrontmatterPanel.tsx
@@ -13,7 +13,7 @@ const COLLAPSIBLE_THRESHOLD = 8
 
 function Chip({ children }: { children: React.ReactNode }) {
   return (
-    <span className="inline-flex max-w-full items-center rounded-[var(--radius-sm)] bg-[var(--color-surface-container-high)] px-2 py-0.5 text-[11px] leading-5 text-[var(--color-text-secondary)] break-words">
+    <span className="inline-flex max-w-full items-center rounded-[var(--radius-xs)] bg-[var(--color-surface-container)] px-1.5 text-[11px] leading-5 text-[var(--color-text-secondary)] break-words">
       {children}
     </span>
   )
@@ -33,10 +33,10 @@ function ValueCell({ value }: { value: FrontmatterValue }) {
   if (typeof value === 'boolean') {
     return (
       <span
-        className={`inline-flex items-center gap-1 rounded-[var(--radius-sm)] px-2 py-0.5 text-[11px] leading-5 ${
+        className={`inline-flex items-center gap-1 rounded-[var(--radius-xs)] px-1.5 font-mono text-[11px] leading-5 ${
           value
             ? 'bg-[var(--color-success-container)] text-[var(--color-on-success-container)]'
-            : 'bg-[var(--color-surface-container-high)] text-[var(--color-text-tertiary)]'
+            : 'bg-[var(--color-surface-container)] text-[var(--color-text-secondary)]'
         }`}
       >
         {value ? 'true' : 'false'}
@@ -46,7 +46,7 @@ function ValueCell({ value }: { value: FrontmatterValue }) {
 
   if (typeof value === 'string' && value.includes('\n')) {
     return (
-      <pre className="max-h-56 overflow-auto whitespace-pre-wrap break-words rounded-[var(--radius-lg)] bg-[var(--color-code-bg)] px-3 py-2 font-mono text-[11.5px] leading-5 text-[var(--color-text-secondary)]">
+      <pre className="max-h-56 overflow-auto whitespace-pre-wrap break-words rounded-[var(--radius-md)] bg-[var(--color-code-bg)] px-3 py-2 font-mono text-xs leading-5 text-[var(--color-text-secondary)]">
         {value}
       </pre>
     )
@@ -63,10 +63,10 @@ function CollapseToggle({ open, onToggle }: { open: boolean; onToggle: () => voi
       data-testid="skill-frontmatter-toggle"
       aria-expanded={open}
       onClick={onToggle}
-      className="-mr-1 inline-flex min-h-6 items-center gap-1 rounded-[var(--radius-sm)] px-1.5 text-[11px] font-normal normal-case tracking-normal text-[var(--color-text-secondary)] transition-colors hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus-ring)]"
+      className="-mr-1 inline-flex min-h-6 items-center gap-1 rounded-[var(--radius-sm)] px-1.5 text-xs font-normal text-[var(--color-text-secondary)] transition-colors hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus-ring)]"
     >
       {open ? t('market.detail.metadataCollapse') : t('market.detail.metadataExpand')}
-      <ChevronDown className={`h-3.5 w-3.5 transition-transform ${open ? 'rotate-180' : ''}`} strokeWidth={2} aria-hidden="true" />
+      <ChevronDown className={`transition-transform ${open ? 'rotate-180' : ''}`} size={14} strokeWidth={1.75} aria-hidden="true" />
     </button>
   )
 }
@@ -86,12 +86,12 @@ function SidebarRows({ entries }: { entries: FrontmatterEntry[] }) {
           <div
             key={entry.key}
             data-testid={`skill-frontmatter-row-${entry.key}`}
-            className={`min-w-0 border-b border-[var(--color-border)] px-[18px] py-2.5 last:border-b-0 ${
+            className={`min-w-0 border-b border-[var(--color-border)] px-4 py-2 last:border-b-0 ${
               stacked ? 'flex flex-col gap-1.5' : 'flex items-start justify-between gap-4'
             }`}
           >
             <dt
-              className="min-w-0 font-mono text-[10.5px] leading-5 text-[var(--color-text-tertiary)] [overflow-wrap:anywhere]"
+              className="min-w-0 font-mono text-[11px] leading-5 text-[var(--color-text-tertiary)] [overflow-wrap:anywhere]"
               title={entry.key}
             >
               {entry.key}
@@ -124,10 +124,10 @@ function GridRows({ entries }: { entries: FrontmatterEntry[] }) {
           data-testid={`skill-frontmatter-row-${entry.key}`}
           className={`flex min-w-0 flex-col gap-1 ${entry.block ? 'col-span-full' : ''}`}
         >
-          <dt className="truncate font-mono text-[10.5px] leading-4 text-[var(--color-text-tertiary)]" title={entry.key}>
+          <dt className="truncate font-mono text-[11px] leading-4 text-[var(--color-text-tertiary)]" title={entry.key}>
             {entry.key}
           </dt>
-          <dd className="min-w-0 text-[12.5px] leading-5 text-[var(--color-text-primary)]">
+          <dd className="min-w-0 text-[13px] leading-5 text-[var(--color-text-primary)]">
             <ValueCell value={entry.value} />
           </dd>
         </div>
@@ -172,8 +172,8 @@ export function FrontmatterPanel({
       <section data-testid="skill-frontmatter-panel" className={className}>
         {/* Sticky: the rail scrolls on its own, and a bare list of `slug` /
             `xiaping_*` rows is meaningless without the heading in view. */}
-        <div className="sticky top-0 z-10 flex items-center gap-2 border-b border-[var(--color-border)] bg-[var(--color-surface-container)] px-[18px] py-2">
-          <h3 className="flex-1 text-[10px] font-semibold uppercase tracking-[0.08em] text-[var(--color-text-tertiary)]">
+        <div className="sticky top-0 z-[var(--z-raised)] flex items-center gap-2 border-b border-[var(--color-border)] bg-[var(--color-surface-container)] px-4 py-1.5">
+          <h3 className="flex-1 text-xs font-semibold text-[var(--color-text-tertiary)]">
             {t('market.detail.metadata')}
           </h3>
           {toggle}
@@ -191,10 +191,10 @@ export function FrontmatterPanel({
       className={`border-b border-[var(--color-border)] ${className ?? ''}`}
     >
       <div className="flex items-center gap-2 py-2">
-        <h3 className="flex-1 text-[10px] font-semibold uppercase tracking-[0.08em] text-[var(--color-text-tertiary)]">
+        <h3 className="flex-1 text-xs font-semibold text-[var(--color-text-tertiary)]">
           {t('market.detail.metadata')}
         </h3>
-        <span className="text-[11px] tabular-nums text-[var(--color-text-tertiary)]">{entries.length}</span>
+        <span className="font-mono text-[11px] tabular-nums text-[var(--color-text-tertiary)]">{entries.length}</span>
         {toggle}
       </div>
       {open && <GridRows entries={entries} />}
diff --git a/desktop/src/components/market/InstallConfirmDialog.tsx b/desktop/src/components/market/InstallConfirmDialog.tsx
index 65c5cb94..b6f65daa 100644
--- a/desktop/src/components/market/InstallConfirmDialog.tsx
+++ b/desktop/src/components/market/InstallConfirmDialog.tsx
@@ -64,11 +64,11 @@ export function InstallConfirmDialog({
   return (
     <Modal open={open} onClose={installing ? () => {} : onClose} title={t('market.installConfirm.title')} width={480}>
       <div className="flex flex-col gap-4" data-testid="market-install-confirm">
-        <p className="text-sm text-[var(--color-text-primary)]">
+        <p className="text-[13px] leading-5 text-[var(--color-text-primary)]">
           {t('market.installConfirm.message', { name: skill.name, source: t(`market.source.${skill.source}`) })}
         </p>
 
-        <div className="flex flex-col gap-2 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)] px-3.5 py-3 text-xs">
+        <div className="flex flex-col gap-2 rounded-[var(--radius-md)] bg-[var(--color-surface-container)] px-3 py-2.5 text-xs">
           <div className="flex items-center justify-between gap-2">
             <span className="text-[var(--color-text-tertiary)]">{t('market.filter.source')}</span>
             <span className="font-medium text-[var(--color-text-primary)]">{t(`market.source.${skill.source}`)}</span>
@@ -76,7 +76,7 @@ export function InstallConfirmDialog({
           {skill.version && (
             <div className="flex items-center justify-between gap-2">
               <span className="text-[var(--color-text-tertiary)]">{t('market.detail.version')}</span>
-              <span className="font-medium text-[var(--color-text-primary)]">v{skill.version}</span>
+              <span className="font-mono text-[var(--color-text-primary)]">v{skill.version}</span>
             </div>
           )}
           <div className="flex items-center justify-between gap-2">
@@ -95,15 +95,15 @@ export function InstallConfirmDialog({
             `--color-on-<tone>-container` foreground. The `/40` modifiers this
             carried compile to a color function Safari 15 WebViews drop. */}
         <div
-          className={`flex items-start gap-2 rounded-[var(--radius-lg)] px-3.5 py-2.5 text-xs leading-5 ${
+          className={`flex items-start gap-2 rounded-[var(--radius-md)] px-3 py-2 text-xs leading-5 ${
             skill.securityStatus === 'flagged'
-              ? 'border border-[var(--color-error)] bg-[var(--color-error-container)] text-[var(--color-on-error-container)]'
+              ? 'bg-[var(--color-error-container)] text-[var(--color-on-error-container)]'
               : risky
-                ? 'border border-[var(--color-warning)] bg-[var(--color-warning-container)] text-[var(--color-on-warning-container)]'
-                : 'border border-[var(--color-success)] bg-[var(--color-success-container)] text-[var(--color-on-success-container)]'
+                ? 'bg-[var(--color-warning-container)] text-[var(--color-on-warning-container)]'
+                : 'bg-[var(--color-success-container)] text-[var(--color-on-success-container)]'
           }`}
         >
-          <RiskIcon className="mt-0.5 h-4 w-4 flex-shrink-0" strokeWidth={1.6} aria-hidden="true" />
+          <RiskIcon className="mt-0.5 flex-shrink-0" size={14} strokeWidth={1.75} aria-hidden="true" />
           <span>{t(RISK_KEYS[skill.securityStatus])}</span>
         </div>
 
@@ -112,18 +112,18 @@ export function InstallConfirmDialog({
             <h3 className="text-[13px] font-semibold text-[var(--color-text-primary)]">
               {t('market.installConfirm.willGet')}
             </h3>
-            <ul className="mt-2 divide-y divide-[var(--color-border-separator)] rounded-[var(--radius-lg)] border border-[var(--color-border)]">
+            <ul className="mt-2 divide-y divide-[var(--color-border)] rounded-[var(--radius-md)] border border-[var(--color-border)]">
               {capabilities.map((capability) => {
                 const text = capabilityText(t, capability)
                 return (
-                  <li key={capability.kind} className="flex items-center gap-3 px-3.5 py-2.5">
+                  <li key={capability.kind} className="flex items-center gap-3 px-3 py-2">
                     <span className="flex min-w-0 flex-1 flex-col gap-0.5">
                       <span className="text-[13px] text-[var(--color-text-primary)]">{text.title}</span>
                       <span className="truncate font-mono text-[11px] text-[var(--color-text-tertiary)]" title={text.detail}>
                         {text.detail}
                       </span>
                     </span>
-                    <Badge tone={CAPABILITY_LEVEL_TONES[capability.level]} size="xs" pill={false}>
+                    <Badge tone={CAPABILITY_LEVEL_TONES[capability.level]} size="xs">
                       {t(`market.cap.level.${capability.level}`)}
                     </Badge>
                   </li>
@@ -133,7 +133,7 @@ export function InstallConfirmDialog({
           </section>
         )}
 
-        <p className="text-[11px] leading-5 text-[var(--color-text-tertiary)]">{t('market.installConfirm.effectNote')}</p>
+        <p className="text-xs leading-5 text-[var(--color-text-tertiary)]">{t('market.installConfirm.effectNote')}</p>
 
         {risky && (
           <Checkbox
@@ -146,14 +146,14 @@ export function InstallConfirmDialog({
         )}
 
         <div className="flex items-center justify-end gap-2 pt-1">
-          <Button variant="secondary" disabled={installing} onClick={onClose}>
+          <Button variant="secondary" size="base" disabled={installing} onClick={onClose}>
             {t('market.installConfirm.cancel')}
           </Button>
-          {/* `primary` is the app's brand CTA (a brand gradient rather than the
-              flat brand fill this used); the flagged path keeps its solid red
-              through `danger`, which is exactly what the old class produced. */}
+          {/* `primary` is the ink confirm; the flagged path keeps its solid
+              red through `danger`. */}
           <Button
             variant={skill.securityStatus === 'flagged' ? 'danger' : 'primary'}
+            size="base"
             data-testid="market-install-confirm-button"
             loading={installing}
             disabled={!armed}
diff --git a/desktop/src/components/market/InstallStateBadge.tsx b/desktop/src/components/market/InstallStateBadge.tsx
index f9648acb..6e6e5560 100644
--- a/desktop/src/components/market/InstallStateBadge.tsx
+++ b/desktop/src/components/market/InstallStateBadge.tsx
@@ -7,15 +7,12 @@ import type { InstallState } from '../../types/market'
  * Only the status-to-tone map is left; the shell it used to carry was
  * character-identical to `SecurityBadge`'s.
  *
- * `installable` maps to `brand` rather than a neutral fill. This file
- * previously spelled out brand text on `--color-surface-container-low` because
- * brand-on-`--color-primary-fixed` measures 1.3:1 in the dark theme; the
- * library's `brand` tone pairs brand text with `--color-brand-soft`, which
- * `contrast.test.ts` holds at AA in all three themes.
+ * `installable` is neutral: it is an absence of state, not a state, and the
+ * brand color is reserved for the brand, the send key and selection.
  */
 const TONES: Record<InstallState, Tone> = {
   installed: 'success',
-  installable: 'brand',
+  installable: 'neutral',
   'not-installable': 'danger',
 }
 
@@ -38,11 +35,9 @@ export function InstallStateBadge({ state, className = '' }: { state: InstallSta
     <Badge
       data-testid={`install-badge-${state}`}
       tone={TONES[state]}
-      size="md"
-      pill={false}
-      bordered
+      size="sm"
       className={className}
-      icon={<Icon className="h-3.5 w-3.5" strokeWidth={2} aria-hidden="true" />}
+      icon={<Icon size={12} strokeWidth={2} aria-hidden="true" />}
     >
       {t(LABEL_KEYS[state])}
     </Badge>
diff --git a/desktop/src/components/market/MarketDisclaimer.tsx b/desktop/src/components/market/MarketDisclaimer.tsx
index 5fd4ee45..77cc3ca4 100644
--- a/desktop/src/components/market/MarketDisclaimer.tsx
+++ b/desktop/src/components/market/MarketDisclaimer.tsx
@@ -28,20 +28,20 @@ export function MarketDisclaimer() {
     <div
       role="note"
       data-testid="market-disclaimer"
-      className="flex items-start gap-3 rounded-[var(--radius-lg)] border border-[var(--color-primary-fixed-dim)] bg-[var(--color-brand-soft)] px-[18px] py-3.5"
+      className="flex items-start gap-2 rounded-[var(--radius-md)] bg-[var(--color-warning-container)] py-2 pl-3 pr-1.5 text-[var(--color-on-warning-container)]"
     >
-      <ShieldAlert className="mt-0.5 h-[17px] w-[17px] flex-shrink-0 text-[var(--color-brand)]" strokeWidth={1.5} aria-hidden="true" />
-      {/* Foreground is the darkened pair, never `--color-brand`: terracotta on
-          its own soft fill measures 4.3:1 under the two ink themes. */}
-      <p className="min-w-0 flex-1 text-[13px] leading-[1.7] text-[var(--color-on-brand-soft)] sm:text-sm">
-        <span className="font-semibold">{t('market.disclaimer.title')}</span>{' '}
+      {/* A caution, so the shared "needs your attention" tone rather than the
+          brand wash: terracotta marks the brand and selection, never a state. */}
+      <ShieldAlert className="mt-[3px] flex-shrink-0" size={14} strokeWidth={1.75} aria-hidden="true" />
+      <p className="min-w-0 flex-1 text-[13px] leading-5">
+        <span className="font-medium">{t('market.disclaimer.title')}</span>{' '}
         {t('market.disclaimer.body')}
       </p>
       <IconButton
-        icon={<X className="h-4 w-4" strokeWidth={2} aria-hidden="true" />}
+        icon={<X size={14} strokeWidth={1.75} aria-hidden="true" />}
         label={t('market.disclaimer.dismiss')}
         tone="muted"
-        className="-mr-1"
+        size="xs"
         onClick={() => {
           setDismissed(true)
           try {
diff --git a/desktop/src/components/market/MarketHome.tsx b/desktop/src/components/market/MarketHome.tsx
index bf9d7456..4d4904c3 100644
--- a/desktop/src/components/market/MarketHome.tsx
+++ b/desktop/src/components/market/MarketHome.tsx
@@ -1,12 +1,14 @@
 import { forwardRef, useCallback, useEffect, useRef, useState, type KeyboardEvent, type ReactNode } from 'react'
-import { ArrowUpRight, CloudOff, PackageSearch, RefreshCw, Search, Sparkles, Store, X } from 'lucide-react'
+import { ArrowUpRight, CloudOff, PackageSearch, RefreshCw, Store } from 'lucide-react'
 import { useTranslation } from '../../i18n'
+import { cx } from '@/lib/cx'
 import { Badge } from '@/components/ui/Badge'
 import { Button } from '@/components/ui/Button'
 import { EmptyState } from '@/components/ui/EmptyState'
 import { ErrorState } from '@/components/ui/ErrorState'
-import { IconButton } from '@/components/ui/IconButton'
+import { SearchField } from '@/components/ui/SearchField'
 import { SkeletonCards } from '@/components/ui/Skeleton'
+import { EXTENSION_PAGE_COLUMN } from './pageLayout'
 import { marketOwnerOf, useMarketStore } from '../../stores/marketStore'
 import { SETTINGS_TAB_ID, useTabStore } from '../../stores/tabStore'
 import { useUIStore } from '../../stores/uiStore'
@@ -145,101 +147,68 @@ export function MarketHome({ onRequestInstall, featured }: { onRequestInstall: (
       data-testid="market-scroll"
       className="flex min-h-0 flex-1 flex-col overflow-y-auto bg-[var(--color-surface)]"
     >
-      {/* One page surface from the title to the last card, like the plugins tab
-          and the skill detail. The controls and the cards are told apart by
-          spacing and the cards' own border, not by a band of a second color. */}
-      <div className="mx-auto flex w-full max-w-[1280px] flex-1 flex-col px-6 pb-10 pt-6 lg:px-10">
-        <div className="flex flex-col gap-4">
-          <header className="flex flex-wrap items-start gap-x-3.5 gap-y-3">
-            <span className="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-[var(--radius-lg)] bg-[var(--color-btn-primary-bg)] text-[var(--color-btn-primary-fg)]">
-              <Store className="h-[22px] w-[22px]" strokeWidth={1.6} aria-hidden="true" />
-            </span>
-            <div className="min-w-0 flex-1">
-              <h1
-                style={{ fontFamily: 'var(--font-headline)' }}
-                className="text-[26px] font-bold leading-[34px] tracking-[-0.012em] text-[var(--color-text-primary)]"
-              >
-                {t('market.title')}
-              </h1>
-              <p className="mt-1 max-w-[62ch] text-sm leading-[21px] text-[var(--color-text-secondary)]">
-                {t('market.subtitle')}
-              </p>
-            </div>
-            <Button
-              variant="secondary"
+      {/* One page surface from the search row to the last card, like the
+          plugins tab and the skill detail. The page head (title, description,
+          tabs) belongs to the extensions frame above; this view only names
+          itself for the document outline. */}
+      <div className={cx(EXTENSION_PAGE_COLUMN, 'flex flex-1 flex-col pb-10 pt-5')}>
+        <h2 className="sr-only">{t('market.title')}</h2>
+        <div className="flex flex-col gap-3">
+          <MarketDisclaimer />
+
+          <div className="flex flex-wrap items-center gap-2">
+            <SearchField
+              data-testid="market-search-input"
               size="md"
+              value={draft}
+              onChange={(value) => {
+                setDraft(value)
+                if (!composingRef.current) setQuery(value)
+              }}
+              onCompositionStart={() => {
+                composingRef.current = true
+              }}
+              onCompositionEnd={(event) => {
+                composingRef.current = false
+                setQuery(event.currentTarget.value)
+              }}
+              onKeyDown={handleSearchKeyDown}
+              enterKeyHint="search"
+              placeholder={searchLabel}
+              label={searchLabel}
+              clearLabel={t('market.clearSearch')}
+              // The clear button empties the box through `onChange`, which
+              // holds the query back mid-composition; commit it here instead.
+              onClear={() => {
+                if (!composingRef.current) return
+                composingRef.current = false
+                setQuery('')
+              }}
+              containerClassName="min-w-[240px] flex-1"
+            />
+            <FilterBar />
+            <Button
+              variant="ghost"
+              size="base"
               data-testid="market-installed-entry"
               title={t('market.installedSkillsHint')}
               onClick={openInstalledSkills}
-              className="gap-2 pr-3"
-              icon={
-                <Sparkles className="h-4 w-4 text-[var(--color-brand)]" strokeWidth={1.6} aria-hidden="true" />
-              }
+              icon={<ArrowUpRight size={14} strokeWidth={1.75} aria-hidden="true" />}
+              iconPosition="end"
             >
               {t('market.installedSkills')}
-              <ArrowUpRight
-                className="h-3.5 w-3.5 text-[var(--color-text-tertiary)]"
-                strokeWidth={1.8}
-                aria-hidden="true"
-              />
             </Button>
-          </header>
-
-          <MarketDisclaimer />
+          </div>
 
           {/* Live results have no catalog categories to pick from. */}
           {catalog && <CategoryBar categories={categories} value={category} onChange={setCategory} />}
-
-          <div className="flex flex-wrap items-center gap-3">
-            {/* Kept hand-rolled rather than moved onto `SearchField`: the command
-                bar is a 44px field on the `--radius-lg` step, and the shared
-                component tops out at h-10 / `--radius-md`. Overriding both from a
-                className is the class fight components/AGENTS.md §3.6 warns about. */}
-            <div className="flex min-h-11 min-w-[240px] flex-1 items-center gap-2.5 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface)] px-4 transition-colors focus-within:border-[var(--color-border-focus)] focus-within:shadow-[var(--shadow-focus-ring)]">
-              <Search className="h-[15px] w-[15px] flex-shrink-0 text-[var(--color-text-tertiary)]" strokeWidth={1.6} aria-hidden="true" />
-              <input
-                data-testid="market-search-input"
-                value={draft}
-                onChange={(event) => {
-                  setDraft(event.target.value)
-                  if (!composingRef.current) setQuery(event.target.value)
-                }}
-                onCompositionStart={() => {
-                  composingRef.current = true
-                }}
-                onCompositionEnd={(event) => {
-                  composingRef.current = false
-                  setQuery(event.currentTarget.value)
-                }}
-                onKeyDown={handleSearchKeyDown}
-                enterKeyHint="search"
-                placeholder={searchLabel}
-                aria-label={searchLabel}
-                className="min-w-0 flex-1 bg-transparent text-[14.5px] text-[var(--color-text-primary)] outline-none placeholder:text-[var(--color-text-tertiary)]"
-              />
-              {draft && (
-                <IconButton
-                  icon={<X className="h-3.5 w-3.5" strokeWidth={2} aria-hidden="true" />}
-                  label={t('market.clearSearch')}
-                  size="sm"
-                  tone="muted"
-                  onClick={() => {
-                    composingRef.current = false
-                    setDraft('')
-                    setQuery('')
-                  }}
-                />
-              )}
-            </div>
-            <FilterBar />
-          </div>
         </div>
 
-        <div className="mt-7 flex min-h-8 flex-wrap items-center justify-between gap-x-3 gap-y-2">
+        <div className="mt-5 flex min-h-6 flex-wrap items-center justify-between gap-x-3 gap-y-2">
           <p
             data-testid="market-result-summary"
             aria-live="polite"
-            className="flex flex-wrap items-baseline gap-x-2.5 gap-y-1 text-sm font-semibold tabular-nums text-[var(--color-text-primary)]"
+            className="flex flex-wrap items-baseline gap-x-2 gap-y-1 text-[13px] font-semibold tabular-nums text-[var(--color-text-primary)]"
           >
             {/* No count while the first page is in flight: "0 results" would be a claim. */}
             {!isLoading && !error && (
@@ -269,7 +238,7 @@ export function MarketHome({ onRequestInstall, featured }: { onRequestInstall: (
         {hasQuery && (
           <p
             data-testid="market-scope-hint"
-            className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-[13px] text-[var(--color-text-secondary)]"
+            className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-[var(--color-text-tertiary)]"
           >
             <span>{catalog ? t('market.scope.catalogHint') : t('market.scope.marketHint')}</span>
             <Button
@@ -306,15 +275,18 @@ export function MarketHome({ onRequestInstall, featured }: { onRequestInstall: (
           <div
             role="alert"
             data-testid="market-error"
-            className="mt-4 flex flex-col items-center gap-3 rounded-[var(--radius-xl)] border border-dashed border-[var(--color-error-soft-hover)] bg-[var(--color-error-soft)] px-6 py-14 text-center"
+            className="mt-4 flex flex-col items-center gap-2 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] px-6 py-12 text-center"
           >
-            <CloudOff className="h-8 w-8 text-[var(--color-error)]" strokeWidth={1.7} aria-hidden="true" />
-            <p className="text-sm font-medium text-[var(--color-text-primary)]">{t('market.error.list')}</p>
+            <span className="mb-1 flex h-10 w-10 items-center justify-center rounded-[var(--radius-md)] bg-[var(--color-error-container)] text-[var(--color-on-error-container)]">
+              <CloudOff size={20} strokeWidth={1.75} aria-hidden="true" />
+            </span>
+            <p className="text-sm font-semibold text-[var(--color-text-primary)]">{t('market.error.list')}</p>
             <p className="max-w-md break-words text-xs text-[var(--color-text-tertiary)]">{error}</p>
             <Button
               variant="secondary"
-              className="mt-1"
-              icon={<RefreshCw className="h-3.5 w-3.5" strokeWidth={2} aria-hidden="true" />}
+              size="base"
+              className="mt-2"
+              icon={<RefreshCw size={14} strokeWidth={1.75} aria-hidden="true" />}
               onClick={() => void fetchList({ reset: true })}
             >
               {t('market.retry')}
@@ -328,8 +300,8 @@ export function MarketHome({ onRequestInstall, featured }: { onRequestInstall: (
               size="lg"
               icon={
                 hasQuery || hasActiveFilters
-                  ? <PackageSearch size={24} strokeWidth={1.6} />
-                  : <Store size={24} strokeWidth={1.6} />
+                  ? <PackageSearch size={20} strokeWidth={1.75} />
+                  : <Store size={20} strokeWidth={1.75} />
               }
               title={hasQuery || hasActiveFilters ? t('market.emptySearch') : t('market.empty')}
               description={hasQuery || hasActiveFilters ? t('market.emptySearchHint') : t('market.emptyHint')}
@@ -389,10 +361,10 @@ export function MarketHome({ onRequestInstall, featured }: { onRequestInstall: (
                 )}
 
                 {!canAutoLoad && !isLoadingMore && !loadMoreError && (
-                  <div className="flex justify-center pt-7">
+                  <div className="flex justify-center pt-6">
                     <Button
                       variant="secondary"
-                      size="lg"
+                      size="base"
                       data-testid="market-load-more"
                       onClick={() => void loadMore()}
                     >
diff --git a/desktop/src/components/market/MarketSkillDetail.tsx b/desktop/src/components/market/MarketSkillDetail.tsx
index b5db9097..2b398019 100644
--- a/desktop/src/components/market/MarketSkillDetail.tsx
+++ b/desktop/src/components/market/MarketSkillDetail.tsx
@@ -11,6 +11,7 @@ import {
   Trash2,
 } from 'lucide-react'
 import { useTranslation } from '../../i18n'
+import { cx } from '@/lib/cx'
 import { Badge, StatusDot } from '@/components/ui/Badge'
 import { Button } from '@/components/ui/Button'
 import { Card } from '@/components/ui/Card'
@@ -24,6 +25,7 @@ import { resolveCategory, skillSummary, useMarketLocale, visibleTags } from './c
 import { formatCount, formatIsoDate, safeUrl } from './marketFormat'
 import { SecurityBadge } from './SecurityBadge'
 import { SecurityReportPanel } from './SecurityReportPanel'
+import { EXTENSION_PAGE_COLUMN } from './pageLayout'
 import {
   SkillDetailView,
   type SkillDetailMetaItem,
@@ -86,7 +88,7 @@ export function MarketSkillDetail({
     if (detail.requiresApiKey) {
       items.push({
         label: t('market.detail.requiresApiKey'),
-        value: <KeyRound className="ml-auto h-4 w-4 text-[var(--color-warning)]" strokeWidth={2} aria-hidden="true" />,
+        value: <KeyRound className="ml-auto text-[var(--color-warning)]" size={14} strokeWidth={1.75} aria-hidden="true" />,
       })
     }
     return items
@@ -97,31 +99,32 @@ export function MarketSkillDetail({
   if (isDetailLoading) {
     return (
       <div className="flex min-h-0 flex-1 flex-col overflow-y-auto bg-[var(--color-surface)]" data-testid="market-detail-loading">
-        <div className="mx-auto w-full max-w-[1280px] px-6 py-6 lg:px-11">
+        <div className={cx(EXTENSION_PAGE_COLUMN, 'pb-6 pt-5')}>
           <Button
             variant="ghost"
-            size="base"
-            icon={<ArrowLeft className="h-4 w-4" strokeWidth={1.6} aria-hidden="true" />}
+            size="sm"
+            className="-ml-2"
+            icon={<ArrowLeft size={14} strokeWidth={1.75} aria-hidden="true" />}
             onClick={backToList}
           >
             {t('market.detail.back')}
           </Button>
-          <SkeletonGroup label={t('market.loading')} className="mt-[18px]">
-            <div className="flex items-start gap-6 pb-6">
-              <Skeleton shape="block" width="72px" height="72px" radius="lg" tone="strong" className="flex-shrink-0" />
+          <SkeletonGroup label={t('market.loading')} className="mt-4">
+            <div className="flex items-start gap-4 pb-5">
+              <Skeleton shape="block" width="56px" height="56px" radius="lg" tone="strong" className="flex-shrink-0" />
               <div className="min-w-0 flex-1 pt-1">
                 <Skeleton height="2rem" tone="strong" className="w-64 max-w-full" />
                 <Skeleton height="0.75rem" className="mt-3 w-48" />
                 <Skeleton height="0.75rem" className="mt-4 w-[min(100%,36rem)]" />
               </div>
             </div>
-            <div className="h-[74px] rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)]" />
-            <div className="mt-6 grid gap-6 lg:grid-cols-[minmax(0,1fr)_300px] lg:gap-9">
+            <div className="h-[74px] rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)]" />
+            <div className="mt-5 grid gap-5 lg:grid-cols-[minmax(0,1fr)_280px] lg:gap-8">
               <div>
                 <Skeleton height="2.75rem" className="w-72" />
-                <div className="mt-[22px] h-72 rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)]" />
+                <div className="mt-5 h-72 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)]" />
               </div>
-              <div className="order-first h-72 rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)] lg:order-none" />
+              <div className="order-first h-72 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)] lg:order-none" />
             </div>
           </SkeletonGroup>
         </div>
@@ -132,18 +135,21 @@ export function MarketSkillDetail({
   if (detailError || !detail) {
     return (
       <div className="flex flex-1 flex-col items-center justify-center gap-3 px-6 py-20 text-center" data-testid="market-detail-error">
-        <CircleAlert className="h-9 w-9 text-[var(--color-error)]" strokeWidth={1.7} aria-hidden="true" />
-        <p className="text-sm font-medium text-[var(--color-text-primary)]">{t('market.detail.loadError')}</p>
+        <span className="flex h-10 w-10 items-center justify-center rounded-[var(--radius-md)] bg-[var(--color-error-container)] text-[var(--color-on-error-container)]">
+          <CircleAlert size={20} strokeWidth={1.75} aria-hidden="true" />
+        </span>
+        <p className="text-sm font-semibold text-[var(--color-text-primary)]">{t('market.detail.loadError')}</p>
         {detailError && <p className="max-w-md break-words text-xs text-[var(--color-text-tertiary)]">{detailError}</p>}
         <div className="mt-1 flex items-center gap-2">
           <Button
             variant="secondary"
-            icon={<RefreshCw className="h-3.5 w-3.5" strokeWidth={2} aria-hidden="true" />}
+            size="base"
+            icon={<RefreshCw size={14} strokeWidth={1.75} aria-hidden="true" />}
             onClick={() => void refreshDetail(selectedId)}
           >
             {t('market.retry')}
           </Button>
-          <Button variant="ghost" onClick={backToList}>
+          <Button variant="ghost" size="base" onClick={backToList}>
             {t('market.detail.back')}
           </Button>
         </div>
@@ -246,19 +252,19 @@ export function MarketSkillDetail({
           target="_blank"
           rel="noreferrer noopener"
           data-testid="market-source-page-link"
-          className="inline-flex items-center gap-1.5 rounded-[var(--radius-sm)] px-1 text-sm font-medium text-[var(--color-text-secondary)] underline-offset-2 transition-colors hover:text-[var(--color-text-primary)] hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]"
+          className="inline-flex h-8 items-center gap-1 rounded-[var(--radius-md)] px-2 text-[13px] font-medium text-[var(--color-text-secondary)] underline-offset-2 transition-colors hover:text-[var(--color-text-primary)] hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]"
         >
           {t('market.detail.sourcePage')}
-          <ExternalLink className="h-3.5 w-3.5" strokeWidth={1.8} aria-hidden="true" />
+          <ExternalLink size={14} strokeWidth={1.75} aria-hidden="true" />
         </a>
       )}
       {detail.installState === 'installable' && (
         <Button
-          size="lg"
+          size="base"
           data-testid="market-install-button"
           data-market-skill-action-id={detail.id}
           loading={installing}
-          icon={<Download className="h-4 w-4" strokeWidth={2} aria-hidden="true" />}
+          icon={<Download size={14} strokeWidth={1.75} aria-hidden="true" />}
           onClick={() => onRequestInstall(detail.id, selectedOwner ?? undefined)}
         >
           {installing ? t('market.install.installing') : t('market.install.action')}
@@ -267,11 +273,11 @@ export function MarketSkillDetail({
       {detail.installState === 'installed' && (
         <Button
           variant="danger-outline"
-          size="lg"
+          size="base"
           data-testid="market-uninstall-button"
           data-market-skill-action-id={detail.id}
           loading={installing}
-          icon={<Trash2 className="h-4 w-4" strokeWidth={2} aria-hidden="true" />}
+          icon={<Trash2 size={14} strokeWidth={1.75} aria-hidden="true" />}
           onClick={() => onRequestUninstall(detail.id)}
         >
           {installing ? t('market.uninstall.uninstalling') : t('market.uninstall.action')}
@@ -283,16 +289,16 @@ export function MarketSkillDetail({
   const banner = (
     <>
       {mirrorSource && (
-        <p className="mt-3 text-[11px] text-[var(--color-text-tertiary)]">
+        <p className="mt-3 text-xs text-[var(--color-text-tertiary)]">
           {t('market.detail.mirror', { source: t(`market.source.${mirrorSource as 'clawhub' | 'skillhub'}`) })}
         </p>
       )}
       {installError && installError.id === detail.id && (
         <div
           data-testid="market-install-error"
-          className="mt-4 flex items-start gap-2 rounded-[var(--radius-lg)] border border-[var(--color-error)] bg-[var(--color-error-container)] px-3.5 py-2.5 text-sm text-[var(--color-on-error-container)]"
+          className="mt-4 flex items-start gap-2 rounded-[var(--radius-md)] bg-[var(--color-error-container)] px-3 py-2 text-[13px] text-[var(--color-on-error-container)]"
         >
-          <CircleAlert className="mt-0.5 h-4 w-4 flex-shrink-0" strokeWidth={1.6} aria-hidden="true" />
+          <CircleAlert className="mt-[3px] flex-shrink-0" size={14} strokeWidth={1.75} aria-hidden="true" />
           <span className="break-words">
             {installError.kind === 'generic'
               ? t('market.installError.generic', { message: installError.message })
@@ -304,12 +310,12 @@ export function MarketSkillDetail({
   )
 
   const sideCards = triggers.length > 0 && (
-    <Card radius="xl" surface="base" padding="none" className="px-[18px] py-4" data-testid="market-detail-triggers">
-      <h2 className="text-sm font-semibold text-[var(--color-text-primary)]">{t('market.detail.whenToUse')}</h2>
+    <Card radius="lg" surface="lowest" padding="none" className="px-4 py-3.5" data-testid="market-detail-triggers">
+      <h2 className="text-[13px] font-semibold text-[var(--color-text-primary)]">{t('market.detail.whenToUse')}</h2>
       <ol className="mt-3 flex flex-col gap-2.5">
         {triggers.map((trigger, index) => (
-          <li key={trigger} className="flex items-start gap-2.5 text-[13px] leading-5 text-[var(--color-text-secondary)]">
-            <Badge size="xs" pill={false} mono className="mt-px">
+          <li key={trigger} className="flex items-start gap-2 text-[13px] leading-5 text-[var(--color-text-secondary)]">
+            <Badge size="xs" mono className="mt-0.5">
               {index + 1}
             </Badge>
             <span className="min-w-0 break-words">{trigger}</span>
diff --git a/desktop/src/components/market/SecurityBadge.tsx b/desktop/src/components/market/SecurityBadge.tsx
index fceaa6ed..28ca76d8 100644
--- a/desktop/src/components/market/SecurityBadge.tsx
+++ b/desktop/src/components/market/SecurityBadge.tsx
@@ -49,11 +49,9 @@ export function SecurityBadge({
       data-testid={`security-badge-${status}`}
       title={t(`market.securityHint.${status}`)}
       tone={TONES[status]}
-      size={short ? 'sm' : 'md'}
-      pill={false}
-      bordered={!short}
+      size={short ? 'xs' : 'sm'}
       className={className}
-      icon={<Icon className={short ? 'h-3 w-3' : 'h-3.5 w-3.5'} strokeWidth={2} aria-hidden="true" />}
+      icon={<Icon size={12} strokeWidth={2} aria-hidden="true" />}
     >
       {short ? t(`market.securityShort.${status}`) : t(`market.security.${status}`)}
     </Badge>
diff --git a/desktop/src/components/market/SecurityReportPanel.tsx b/desktop/src/components/market/SecurityReportPanel.tsx
index 8ff2dabd..ac7cd2f6 100644
--- a/desktop/src/components/market/SecurityReportPanel.tsx
+++ b/desktop/src/components/market/SecurityReportPanel.tsx
@@ -37,32 +37,32 @@ export function SecurityReportPanel({
         <div
           role="note"
           data-testid="market-security-note"
-          className="flex items-start gap-2.5 rounded-[var(--radius-lg)] border border-[var(--color-info)] bg-[var(--color-info-container)] px-4 py-3 text-[13px] leading-5 text-[var(--color-on-info-container)]"
+          className="flex items-start gap-2 rounded-[var(--radius-md)] bg-[var(--color-info-container)] px-3 py-2 text-[13px] leading-5 text-[var(--color-on-info-container)]"
         >
-          <Info className="mt-0.5 h-4 w-4 flex-shrink-0" strokeWidth={1.8} aria-hidden="true" />
+          <Info className="mt-[3px] flex-shrink-0" size={14} strokeWidth={1.75} aria-hidden="true" />
           <p className="min-w-0 break-words">
-            <span className="font-semibold">{t('market.detail.securityNote')}</span>
+            <span className="font-medium">{t('market.detail.securityNote')}</span>
             {' · '}
             {securityNote}
           </p>
         </div>
       )}
 
-      <Card radius="xl" surface="base" padding="none" className="px-6 py-5 sm:px-[30px]">
-        <h2 className="text-[15px] font-semibold text-[var(--color-text-primary)]">{t('market.detail.scanReports')}</h2>
+      <Card radius="lg" surface="lowest" padding="none" className="overflow-hidden">
+        <h2 className="flex h-10 items-center border-b border-[var(--color-border)] px-4 text-[13px] font-medium text-[var(--color-text-primary)]">{t('market.detail.scanReports')}</h2>
         {reports.length > 0 ? (
-          <ul className="mt-2 divide-y divide-[var(--color-border-separator)]">
+          <ul className="divide-y divide-[var(--color-border)]">
             {reports.map((report) => {
               const url = safeUrl(report.reportUrl)
               return (
                 <li
                   key={`${report.vendor}:${report.status}`}
                   data-testid="market-security-report"
-                  className="flex flex-col gap-1.5 py-3.5"
+                  className="flex flex-col gap-1 px-4 py-3"
                 >
                   <div className="flex flex-wrap items-center justify-between gap-2">
-                    <span className="text-sm font-semibold text-[var(--color-text-primary)]">{report.vendor}</span>
-                    <Badge tone={CLEAN_STATUS.test(report.status) ? 'success' : 'warning'} size="sm" pill={false} wrap>
+                    <span className="font-mono text-xs text-[var(--color-text-primary)]">{report.vendor}</span>
+                    <Badge tone={CLEAN_STATUS.test(report.status) ? 'success' : 'warning'} size="xs" wrap>
                       {report.statusText}
                     </Badge>
                   </div>
@@ -76,10 +76,10 @@ export function SecurityReportPanel({
                       href={url}
                       target="_blank"
                       rel="noreferrer noopener"
-                      className="inline-flex w-fit items-center gap-1 rounded-[var(--radius-sm)] text-[13px] font-medium text-[var(--color-brand)] underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]"
+                      className="inline-flex w-fit items-center gap-1 rounded-[var(--radius-xs)] text-xs text-[var(--color-text-accent)] underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]"
                     >
                       {t('market.detail.viewReport')}
-                      <ExternalLink className="h-3 w-3" strokeWidth={1.8} aria-hidden="true" />
+                      <ExternalLink size={12} strokeWidth={1.75} aria-hidden="true" />
                     </a>
                   )}
                 </li>
@@ -87,9 +87,9 @@ export function SecurityReportPanel({
             })}
           </ul>
         ) : (
-          <p className="mt-3 text-sm text-[var(--color-text-tertiary)]">{t('market.detail.noReports')}</p>
+          <p className="px-4 py-3 text-[13px] text-[var(--color-text-tertiary)]">{t('market.detail.noReports')}</p>
         )}
-        <p className="mt-3 border-t border-[var(--color-border-separator)] pt-3 text-xs leading-5 text-[var(--color-text-tertiary)]">
+        <p className="border-t border-[var(--color-border)] px-4 py-2.5 text-xs leading-5 text-[var(--color-text-tertiary)]">
           {t('market.detail.scanDisclaimer')}
         </p>
       </Card>
diff --git a/desktop/src/components/market/SkillAvatar.tsx b/desktop/src/components/market/SkillAvatar.tsx
index ead37937..8a5a1ea1 100644
--- a/desktop/src/components/market/SkillAvatar.tsx
+++ b/desktop/src/components/market/SkillAvatar.tsx
@@ -1,23 +1,5 @@
 import type { NormalizedSkill } from '../../types/market'
 
-const AVATAR_GRADIENTS = [
-  ['#9A5942', '#6F3827'],
-  ['#4F746D', '#31564F'],
-  ['#6C7651', '#465334'],
-  ['#6A687C', '#464558'],
-  ['#8A633D', '#634421'],
-  ['#647183', '#404C5C'],
-] as const
-
-/** Deterministic palette index so every skill keeps a stable, restrained identity color. */
-function hashIndex(input: string): number {
-  let hash = 0
-  for (let i = 0; i < input.length; i++) {
-    hash = (hash * 31 + input.charCodeAt(i)) | 0
-  }
-  return Math.abs(hash) % AVATAR_GRADIENTS.length
-}
-
 /** First visible character of the name, uppercased (handles CJK and multi-byte chars). */
 function initialOf(name: string): string {
   const first = Array.from(name.trim())[0]
@@ -25,9 +7,24 @@ function initialOf(name: string): string {
 }
 
 /**
- * Skill icon with a deterministic letter-avatar fallback. The palette stays
- * deliberately muted so a catalog of community skills still reads as one
- * product rather than a wall of unrelated app icons.
+ * Up to 48px is a list tile and takes the control corner; anything larger is a
+ * page-head mark and takes the card corner. The letter follows the same split.
+ */
+function tileClasses(size: number) {
+  return size > 48
+    ? 'rounded-[var(--radius-lg)] text-[22px]'
+    : size >= 40
+      ? 'rounded-[var(--radius-md)] text-[15px]'
+      : 'rounded-[var(--radius-sm)] text-[13px]'
+}
+
+/**
+ * Skill icon with a letter fallback.
+ *
+ * The fallback used to be one of six hand-mixed gradients picked by a hash of
+ * the name, in raw hex that ignored the theme. It is now the sunken tile every
+ * other icon slot uses, with the initial in secondary ink: a catalog of
+ * community skills reads as one product, and the tile follows all three themes.
  */
 export function SkillAvatar({
   skill,
@@ -38,9 +35,7 @@ export function SkillAvatar({
   size?: number
   className?: string
 }) {
-  // The handoff draws the tile at 46px/r12 in the grid and 92px/r22 in the
-  // detail header — one ratio, not one fixed corner.
-  const radius = Math.round(size * 0.24)
+  const tile = tileClasses(size)
 
   if (skill.iconUrl) {
     return (
@@ -48,25 +43,17 @@ export function SkillAvatar({
         src={skill.iconUrl}
         alt=""
         loading="lazy"
-        style={{ width: size, height: size, borderRadius: radius }}
-        className={`flex-shrink-0 border border-[var(--color-border)] bg-[var(--color-surface-container)] object-cover shadow-[var(--shadow-card)] ${className}`}
+        style={{ width: size, height: size }}
+        className={`flex-shrink-0 border border-[var(--color-border)] bg-[var(--color-surface-container)] object-cover ${tile} ${className}`}
       />
     )
   }
-  const [from, to] = AVATAR_GRADIENTS[hashIndex(skill.name)]!
   return (
     <span
       aria-hidden
       data-testid="skill-avatar-fallback"
-      style={{
-        width: size,
-        height: size,
-        borderRadius: radius,
-        fontSize: Math.round(size * 0.38),
-        background: `linear-gradient(145deg, ${from}, ${to})`,
-        boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.18), var(--shadow-card)',
-      }}
-      className={`inline-flex flex-shrink-0 select-none items-center justify-center font-bold tracking-[-0.04em] text-white ${className}`}
+      style={{ width: size, height: size }}
+      className={`inline-flex flex-shrink-0 select-none items-center justify-center bg-[var(--color-surface-container)] font-semibold text-[var(--color-text-secondary)] ${tile} ${className}`}
     >
       {initialOf(skill.name)}
     </span>
diff --git a/desktop/src/components/market/SkillCard.test.tsx b/desktop/src/components/market/SkillCard.test.tsx
index 65665e42..05095d13 100644
--- a/desktop/src/components/market/SkillCard.test.tsx
+++ b/desktop/src/components/market/SkillCard.test.tsx
@@ -100,17 +100,15 @@ describe('SkillCard', () => {
     expect(screen.queryByTestId('install-badge-installable')).not.toBeInTheDocument()
   })
 
-  it('renders a deterministic letter avatar when iconUrl is missing', () => {
+  it('renders a letter avatar on the themed sunken tile when iconUrl is missing', () => {
     render(<SkillCard skill={makeSkill()} onOpen={vi.fn()} />)
 
     const avatar = screen.getByTestId('skill-avatar-fallback')
     expect(avatar).toHaveTextContent('D')
-    const background = avatar.style.background
-
-    // Same name → same identity color on re-render.
-    render(<SkillCard skill={makeSkill({ id: 'clawhub:demo-2' })} onOpen={vi.fn()} />)
-    const second = screen.getAllByTestId('skill-avatar-fallback')[1]!
-    expect(second.style.background).toBe(background)
+    // The ground comes from a theme token, not an inline hex gradient that
+    // looked the same in all three themes.
+    expect(avatar.style.background).toBe('')
+    expect(avatar.className).toContain('bg-[var(--color-surface-container)]')
   })
 
   it('renders the icon image when iconUrl is provided', () => {
diff --git a/desktop/src/components/market/SkillCard.tsx b/desktop/src/components/market/SkillCard.tsx
index 47d31775..e533260d 100644
--- a/desktop/src/components/market/SkillCard.tsx
+++ b/desktop/src/components/market/SkillCard.tsx
@@ -26,6 +26,9 @@ const MAX_VISIBLE_TAGS = 3
  * link. The content above it is `pointer-events-none`, and the install button
  * opts back in — drop either half and the card stops opening or the button
  * stops installing.
+ *
+ * Hover deepens the hairline and nothing else: the old lift-and-shadow made a
+ * grid of 24 cards jump under the pointer while the reader was scanning it.
  */
 export function SkillCard({
   skill,
@@ -49,30 +52,28 @@ export function SkillCard({
   return (
     <Card
       as="article"
-      radius="xl"
-      surface="base"
+      radius="lg"
+      surface="lowest"
       padding="none"
-      interactive
-      lift
-      className="group relative isolate flex min-h-[208px] min-w-0 flex-col gap-3 px-[18px] pb-4 pt-[18px]"
+      className="group relative isolate flex min-h-[200px] min-w-0 flex-col p-4 transition-colors duration-150 hover:border-[var(--color-outline)]"
     >
       <button
         type="button"
         aria-label={skill.name}
         data-market-skill-open-id={skill.id}
         onClick={() => onOpen(skill.id)}
-        className="absolute inset-0 z-0 rounded-[var(--radius-xl)] focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus-ring)]"
+        className="absolute inset-0 z-0 rounded-[var(--radius-lg)] focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus-ring)]"
       />
 
       <div className="pointer-events-none relative z-10 flex min-w-0 items-center gap-3">
-        <SkillAvatar skill={skill} size={44} />
+        <SkillAvatar skill={skill} size={40} />
         <div className="min-w-0 flex-1">
           <div className="flex min-w-0 items-center gap-2">
-            <h3 className="min-w-0 truncate text-[15px] font-semibold leading-[22px] text-[var(--color-text-primary)]">
+            <h3 className="min-w-0 truncate text-sm font-semibold leading-5 text-[var(--color-text-primary)]">
               {skill.name}
             </h3>
             {skill.version && (
-              <Badge variant="outline" size="xs" pill={false} mono>
+              <Badge variant="outline" size="xs" mono>
                 v{skill.version}
               </Badge>
             )}
@@ -89,41 +90,41 @@ export function SkillCard({
         </div>
       </div>
 
-      <p className="pointer-events-none relative z-10 line-clamp-2 min-h-[42px] break-words text-[13px] leading-[21px] text-[var(--color-text-secondary)]">
+      <p className="pointer-events-none relative z-10 mt-3 line-clamp-2 min-h-9 break-words text-xs leading-[18px] text-[var(--color-text-secondary)]">
         {summary || t('market.detail.noDescription')}
       </p>
 
       <div
         data-testid="market-card-chips"
-        className="pointer-events-none relative z-10 flex max-h-6 min-w-0 flex-wrap items-center gap-1.5 overflow-hidden"
+        className="pointer-events-none relative z-10 mt-3 flex max-h-5 min-w-0 flex-wrap items-center gap-1.5 overflow-hidden"
       >
         <SecurityBadge status={skill.securityStatus} short />
         {skill.featured && (
-          <Badge tone="info" size="sm" pill={false} data-testid="market-card-featured">
+          <Badge tone="info" size="xs" data-testid="market-card-featured">
             {t('market.featured')}
           </Badge>
         )}
         {tags.slice(0, MAX_VISIBLE_TAGS).map((tag) => (
-          <Badge key={tag} size="sm" pill={false}>
+          <Badge key={tag} size="xs">
             {tag}
           </Badge>
         ))}
         {extraTags > 0 && (
-          <Badge size="sm" pill={false}>
+          <Badge size="xs">
             {t('market.card.moreTags', { count: String(extraTags) })}
           </Badge>
         )}
       </div>
 
-      <footer className="pointer-events-none relative z-10 mt-auto flex min-h-11 items-center justify-between gap-2.5 border-t border-[var(--color-border-separator)] pt-3">
-        <div className="flex min-w-0 items-center gap-3.5 font-mono text-xs tabular-nums text-[var(--color-text-secondary)]">
-          <span className="inline-flex items-center gap-1.5" title={t('market.detail.downloads')}>
-            <Download className="h-3 w-3" strokeWidth={1.6} aria-hidden="true" />
+      <footer className="pointer-events-none relative z-10 mt-auto flex min-h-8 items-center justify-between gap-2.5 pt-3">
+        <div className="flex min-w-0 items-center gap-3 font-mono text-[11px] tabular-nums text-[var(--color-text-tertiary)]">
+          <span className="inline-flex items-center gap-1" title={t('market.detail.downloads')}>
+            <Download size={12} strokeWidth={1.75} aria-hidden="true" />
             {formatCount(skill.stats.downloads)}
           </span>
           {typeof skill.stats.stars === 'number' && skill.stats.stars > 0 && (
-            <span className="inline-flex items-center gap-1.5" title={t('market.detail.stars')}>
-              <Star className="h-3 w-3" strokeWidth={1.6} aria-hidden="true" />
+            <span className="inline-flex items-center gap-1" title={t('market.detail.stars')}>
+              <Star size={12} strokeWidth={1.75} aria-hidden="true" />
               {formatCount(skill.stats.stars)}
             </span>
           )}
@@ -132,12 +133,12 @@ export function SkillCard({
           // The footer is `pointer-events-none` for the stretched open button
           // underneath, so the install button opts back in and sits above it.
           <Button
-            variant="primary"
-            size="base"
+            variant="secondary"
+            size="sm"
             className="pointer-events-auto relative z-20 flex-shrink-0"
             loading={installing}
             data-market-skill-action-id={skill.id}
-            icon={<Download className="h-3.5 w-3.5" strokeWidth={1.8} aria-hidden="true" />}
+            icon={<Download size={12} strokeWidth={1.75} aria-hidden="true" />}
             onClick={() => onInstall?.(skill.id)}
           >
             {installing ? t('market.install.installing') : t('market.install.action')}
diff --git a/desktop/src/components/market/SkillDetailView.test.tsx b/desktop/src/components/market/SkillDetailView.test.tsx
index 43a6c1fe..997dca12 100644
--- a/desktop/src/components/market/SkillDetailView.test.tsx
+++ b/desktop/src/components/market/SkillDetailView.test.tsx
@@ -338,4 +338,23 @@ describe('SkillDetailView market extensions', () => {
     expect(within(sidebar).getByTestId('side-card')).toBeInTheDocument()
     expect(within(sidebar).getByRole('heading', { name: 'Info' })).toBeInTheDocument()
   })
+
+  it('splits into document and rail by its own width, not the window', () => {
+    // The same view fills the extensions page and sits in the 700px settings
+    // pane; a viewport breakpoint put a 280px rail beside the document there.
+    renderView()
+    const view = screen.getByTestId('skill-detail-view')
+    expect(view.className).toContain('@container')
+    const columns = screen.getByTestId('skill-detail-sidebar').parentElement!
+    expect(columns.className).toContain('@4xl:grid-cols-[minmax(0,1fr)_280px]')
+    expect(columns.className).not.toMatch(/(^|\s)lg:grid-cols/)
+  })
+
+  it('lets a host that already lays out a page column skip the view\'s own', () => {
+    const { unmount } = renderView()
+    expect(screen.getByTestId('skill-detail-view').firstElementChild!.className).toContain('max-w-[1200px]')
+    unmount()
+    renderView({ framed: true })
+    expect(screen.getByTestId('skill-detail-view').firstElementChild!.className).not.toContain('max-w-')
+  })
 })
diff --git a/desktop/src/components/market/SkillDetailView.tsx b/desktop/src/components/market/SkillDetailView.tsx
index faa3d148..606ee379 100644
--- a/desktop/src/components/market/SkillDetailView.tsx
+++ b/desktop/src/components/market/SkillDetailView.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
-import { ArrowLeft, CircleSlash2, FileText, Folder, type LucideIcon } from 'lucide-react'
+import { ArrowLeft, CircleSlash2, ExternalLink, FileText, Folder, type LucideIcon } from 'lucide-react'
 import { useTranslation } from '../../i18n'
+import { cx } from '@/lib/cx'
 import { Badge } from '@/components/ui/Badge'
 import { Button } from '@/components/ui/Button'
 import { Card } from '@/components/ui/Card'
@@ -16,6 +17,7 @@ import { FilePreview, type PreviewFile, type PreviewFileContent } from './FilePr
 import { FrontmatterPanel } from './FrontmatterPanel'
 import { MarkdownRenderer } from '../markdown/MarkdownRenderer'
 import { SkillAvatar } from './SkillAvatar'
+import { EXTENSION_PAGE_COLUMN } from './pageLayout'
 import { splitFrontmatter, type SkillFrontmatter } from '../../lib/skillFrontmatter'
 
 export type SkillDetailMetaItem = {
@@ -62,6 +64,11 @@ export type SkillDetailViewProps = {
   loadFile: (path: string) => Promise<PreviewFileContent>
   onBack: () => void
   backLabel: string
+  /**
+   * The host already lays out a page column (the settings pane). Without this
+   * the view centres and pads itself, as it does when it is the whole page.
+   */
+  framed?: boolean
 
   // Everything below is optional and only the market detail passes it. The
   // installed-skill page renders exactly as it did before these existed.
@@ -96,6 +103,11 @@ export type SkillDetailViewProps = {
  * Shared, data-source-agnostic skill detail layout. Both the online market
  * detail and the locally-installed skill detail render through this view so
  * the reading experience stays identical.
+ *
+ * The two-column layout follows the width of the view itself (a container
+ * query), not the window: the same view renders as the whole extensions page
+ * and inside the 700px settings column, where a 280px rail beside the
+ * document left the document a third of the pane.
  */
 export function SkillDetailView(props: SkillDetailViewProps) {
   const t = useTranslation()
@@ -128,74 +140,68 @@ export function SkillDetailView(props: SkillDetailViewProps) {
       key: 'files',
       label: t('market.detail.files'),
       icon: Folder,
-      badge: <Badge pill={false} size="sm" className="leading-5">{props.files.length}</Badge>,
+      badge: <Badge size="xs" mono>{props.files.length}</Badge>,
     },
     ...extraTabs.map((extra) => ({ key: extra.key, label: extra.label, icon: extra.icon ?? FileText, badge: extra.badge })),
   ]
 
   return (
     <div
-      className="min-h-0 flex-1 overflow-y-auto bg-[var(--color-surface)]"
+      className="@container min-h-0 flex-1 overflow-y-auto bg-[var(--color-surface)]"
       data-testid="skill-detail-view"
     >
       {/*
-        `lg:h-full` (not `min-h-full`) on purpose: a flex column sized by
+        `@4xl:h-full` (not `min-h-full`) on purpose: a flex column sized by
         min-height stays `height: auto`, so `flex-1`'s `flex-basis: 0%` cannot
         resolve and the panel below falls back to content height — which is what
         left the bottom of the page empty. A definite height makes the tab panel
         claim the leftover space. Narrow layouts keep the page scrolling.
       */}
-      <div className="mx-auto flex w-full max-w-[1280px] flex-col px-6 pb-12 pt-6 lg:h-full lg:px-11">
-        {/* `size="base"` is h-8, matching the `min-h-8` this button carried
-            before it became a component. */}
+      <div className={cx(props.framed ? 'w-full' : EXTENSION_PAGE_COLUMN, 'flex flex-col pb-12 @4xl:h-full', props.framed ? 'pt-0' : 'pt-5')}>
         <Button
           variant="ghost"
-          size="base"
-          className="w-fit"
-          icon={<ArrowLeft className="h-4 w-4" strokeWidth={1.6} aria-hidden="true" />}
+          size="sm"
+          className="-ml-2 w-fit"
+          icon={<ArrowLeft size={14} strokeWidth={1.75} aria-hidden="true" />}
           onClick={props.onBack}
         >
           {props.backLabel}
         </Button>
 
-        <header className="mt-[18px] flex-shrink-0">
-          <div className="flex min-w-0 flex-wrap items-start gap-5 sm:flex-nowrap sm:gap-6">
-            <SkillAvatar skill={{ name: props.name, iconUrl: props.iconUrl }} size={props.metaLine ? 72 : 92} />
+        <header className="mt-4 flex-shrink-0">
+          <div className="flex min-w-0 flex-wrap items-start gap-4 sm:flex-nowrap">
+            <SkillAvatar skill={{ name: props.name, iconUrl: props.iconUrl }} size={56} />
             <div className="min-w-0 flex-1">
-              {!props.metaLine && (
-                <div className="font-mono text-xs font-semibold uppercase tracking-[0.12em] text-[var(--color-text-tertiary)]">
-                  {props.sourceLabel}
-                </div>
-              )}
-              <div className="mt-1 flex min-w-0 flex-wrap items-center gap-x-2.5 gap-y-1">
+              <div className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1">
                 <h1
                   ref={headingRef}
                   tabIndex={-1}
-                  style={{ fontFamily: 'var(--font-headline)' }}
-                  className="min-w-0 break-words text-[26px] font-bold leading-tight tracking-[-0.012em] text-[var(--color-text-primary)] outline-none sm:text-[30px]"
+                  className="min-w-0 break-words text-[22px] font-semibold leading-[30px] text-[var(--color-text-primary)] outline-none"
                 >
                   {props.name}
                 </h1>
                 {props.version && (
-                  <Badge variant="outline" size="sm" pill={false} mono data-testid="skill-detail-version">
+                  <Badge variant="outline" size="xs" mono data-testid="skill-detail-version">
                     v{props.version}
                   </Badge>
                 )}
               </div>
-              {props.metaLine && (
+              {props.metaLine ? (
                 <p
                   data-testid="skill-detail-meta-line"
-                  className="mt-2 flex flex-wrap items-center gap-x-2 gap-y-1 text-[13px] text-[var(--color-text-tertiary)]"
+                  className="mt-1 flex flex-wrap items-center gap-x-1.5 gap-y-1 text-xs text-[var(--color-text-tertiary)]"
                 >
                   {props.metaLine}
                 </p>
+              ) : (
+                <p className="mt-1 text-xs text-[var(--color-text-tertiary)]">{props.sourceLabel}</p>
               )}
               {props.summary && (
-                <p className="mt-3 max-w-3xl break-words text-[15px] leading-relaxed text-[var(--color-text-secondary)]">
+                <p className="mt-2 max-w-[72ch] break-words text-[13px] leading-[1.6] text-[var(--color-text-secondary)]">
                   {props.summary}
                 </p>
               )}
-              <div className="mt-3 flex flex-wrap items-center gap-2">
+              <div className="mt-3 flex flex-wrap items-center gap-1.5">
                 {props.chips ?? (
                   <>
                     {props.securityStatus && <SecurityBadge status={props.securityStatus} />}
@@ -205,7 +211,7 @@ export function SkillDetailView(props: SkillDetailViewProps) {
               </div>
             </div>
             {heroActions && props.actions && (
-              <div data-testid="skill-detail-hero-actions" className="flex flex-shrink-0 flex-wrap items-center gap-2.5">
+              <div data-testid="skill-detail-hero-actions" className="flex flex-shrink-0 flex-wrap items-center gap-2">
                 {props.actions}
               </div>
             )}
@@ -214,34 +220,33 @@ export function SkillDetailView(props: SkillDetailViewProps) {
           {props.installState === 'not-installable' && props.notInstallableReason && (
             <div
               data-testid="market-not-installable-reason"
-              className="mt-5 flex items-start gap-2 rounded-[var(--radius-lg)] border border-[var(--color-error)] bg-[var(--color-error-container)] px-3.5 py-2.5 text-sm text-[var(--color-on-error-container)]"
+              className="mt-4 flex items-start gap-2 rounded-[var(--radius-md)] bg-[var(--color-error-container)] px-3 py-2 text-[13px] text-[var(--color-on-error-container)]"
             >
-              <CircleSlash2 className="mt-0.5 h-4 w-4 flex-shrink-0" strokeWidth={1.6} aria-hidden="true" />
+              <CircleSlash2 className="mt-[3px] flex-shrink-0" size={14} strokeWidth={1.75} aria-hidden="true" />
               <span>{t(`market.reason.${props.notInstallableReason}`)}</span>
             </div>
           )}
 
           {props.securityReports && props.securityReports.length > 0 && (
             <div
-              className="mt-6 flex flex-wrap items-center gap-x-3 gap-y-2 border-y border-[var(--color-border)] px-0.5 py-3.5 text-sm"
+              className="mt-4 flex flex-wrap items-center gap-x-4 gap-y-2 text-[13px]"
               data-testid="market-security-reports"
             >
-              <span className="text-[var(--color-text-tertiary)]">{t('market.detail.securityReport')}</span>
+              <span className="text-xs text-[var(--color-text-tertiary)]">{t('market.detail.securityReport')}</span>
               {props.securityReports.map((report) => (
-                <span key={report.vendor} className="inline-flex flex-wrap items-center gap-x-3 gap-y-1.5">
-                  <strong className="font-mono text-[13.5px] font-semibold text-[var(--color-text-primary)]">
-                    {report.vendor}
-                  </strong>
+                <span key={report.vendor} className="inline-flex flex-wrap items-center gap-x-2 gap-y-1">
+                  <span className="font-mono text-xs text-[var(--color-text-primary)]">{report.vendor}</span>
                   <span className="text-[var(--color-text-secondary)]">{report.statusText}</span>
                   {report.reportUrl && (
                     <a
                       href={report.reportUrl}
                       target="_blank"
                       rel="noreferrer"
-                      className="inline-flex items-center rounded-[var(--radius-sm)] bg-[var(--color-brand-soft)] px-3 py-1 text-[13px] font-semibold text-[var(--color-on-brand-soft)] transition-colors hover:bg-[var(--color-brand-soft-hover)] focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus-ring)]"
+                      className="inline-flex items-center gap-1 rounded-[var(--radius-xs)] text-xs text-[var(--color-text-accent)] underline-offset-2 hover:underline focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus-ring)]"
                       onClick={(e) => e.stopPropagation()}
                     >
                       {t('market.detail.viewReport')}
+                      <ExternalLink size={12} strokeWidth={1.75} aria-hidden="true" />
                     </a>
                   )}
                 </span>
@@ -250,16 +255,17 @@ export function SkillDetailView(props: SkillDetailViewProps) {
           )}
 
           {props.stats && props.stats.length > 0 && (
-            // Hairline grid: the 1px gap shows the separator colour through,
-            // so the dividers stay right however many cells wrap per row.
             <dl
               data-testid="skill-detail-stats"
-              className="mt-6 grid grid-cols-[repeat(auto-fit,minmax(140px,1fr))] gap-px overflow-hidden rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-border-separator)]"
+              className="mt-5 grid grid-cols-[repeat(auto-fit,minmax(140px,1fr))] gap-3"
             >
               {props.stats.map((stat) => (
-                <div key={stat.label} className="min-w-0 bg-[var(--color-surface)] px-[18px] py-3.5">
+                <div
+                  key={stat.label}
+                  className="min-w-0 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] px-4 py-3"
+                >
                   <dt className="text-xs text-[var(--color-text-tertiary)]">{stat.label}</dt>
-                  <dd className="mt-1 truncate font-mono text-xl font-semibold tabular-nums text-[var(--color-text-primary)]">
+                  <dd className="mt-1 truncate text-[22px] font-semibold leading-7 tabular-nums text-[var(--color-text-primary)]">
                     {stat.value}
                   </dd>
                 </div>
@@ -271,15 +277,16 @@ export function SkillDetailView(props: SkillDetailViewProps) {
         </header>
 
         <div
-          className={`mt-6 grid gap-6 lg:min-h-0 lg:flex-1 lg:items-stretch lg:gap-9 ${
-            showAside ? 'lg:grid-cols-[minmax(0,1fr)_300px]' : ''
-          }`}
+          className={cx(
+            'mt-5 grid gap-5 @4xl:min-h-0 @4xl:flex-1 @4xl:items-stretch @4xl:gap-8',
+            showAside && '@4xl:grid-cols-[minmax(0,1fr)_280px]',
+          )}
         >
-          <main className="flex min-w-0 flex-col lg:min-h-0">
+          <main className="flex min-w-0 flex-col @4xl:min-h-0">
             <div
               role="tablist"
               aria-label={props.name}
-              className="flex flex-shrink-0 flex-wrap items-center gap-x-[26px] border-b border-[var(--color-border)]"
+              className="flex flex-shrink-0 flex-wrap items-center gap-x-5 border-b border-[var(--color-border)]"
             >
               {tabs.map((entry) => {
                 const active = tab === entry.key
@@ -294,13 +301,13 @@ export function SkillDetailView(props: SkillDetailViewProps) {
                     aria-controls={`skill-detail-${entry.key}-panel`}
                     data-testid={`skill-detail-tab-${entry.key}`}
                     onClick={() => setTab(entry.key)}
-                    className={`relative -mb-px inline-flex min-h-11 items-center gap-2 border-b-[3px] px-1 text-[15px] font-semibold transition-colors focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus-ring)] ${
+                    className={`relative -mb-px inline-flex h-10 items-center gap-1.5 border-b-2 text-[13px] font-medium transition-colors focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus-ring)] ${
                       active
                         ? 'border-[var(--color-brand)] text-[var(--color-text-primary)]'
-                        : 'border-transparent text-[var(--color-text-tertiary)] hover:text-[var(--color-text-secondary)]'
+                        : 'border-transparent text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]'
                     }`}
                   >
-                    <Icon className="h-[15px] w-[15px]" strokeWidth={1.5} aria-hidden="true" />
+                    <Icon size={14} strokeWidth={1.75} aria-hidden="true" />
                     {entry.label}
                     {entry.badge}
                   </button>
@@ -309,19 +316,19 @@ export function SkillDetailView(props: SkillDetailViewProps) {
             </div>
 
             {tab === 'overview' && (
-              <div className="mt-[22px] flex flex-col gap-4 lg:min-h-0 lg:flex-1">
+              <div className="mt-5 flex flex-col gap-4 @4xl:min-h-0 @4xl:flex-1">
                 {props.overviewLead}
                 <section
                   id="skill-detail-overview-panel"
                   role="tabpanel"
                   aria-labelledby="skill-detail-tab-overview-trigger"
-                  className="rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface)] px-6 py-7 sm:px-[34px] sm:py-[30px] lg:min-h-0 lg:flex-1 lg:overflow-y-auto"
+                  className="rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] px-6 py-6 sm:px-8 @4xl:min-h-0 @4xl:flex-1 @4xl:overflow-y-auto"
                   data-testid="skill-detail-overview"
                 >
                   {props.docHeader && (
                     <header
                       data-testid="skill-detail-doc-header"
-                      className="mb-6 flex flex-wrap items-center justify-between gap-2 border-b border-[var(--color-border-separator)] pb-3 text-xs text-[var(--color-text-tertiary)]"
+                      className="mb-5 flex flex-wrap items-center justify-between gap-2 border-b border-[var(--color-border)] pb-3 text-xs text-[var(--color-text-tertiary)]"
                     >
                       {props.docHeader}
                     </header>
@@ -329,7 +336,7 @@ export function SkillDetailView(props: SkillDetailViewProps) {
                   {overview.body.trim() ? (
                     <MarkdownRenderer content={overview.body} variant="document" className="mx-auto max-w-[72ch]" />
                   ) : (
-                    <p className="py-6 text-center text-sm text-[var(--color-text-tertiary)]">{t('market.detail.noDescription')}</p>
+                    <p className="py-6 text-center text-[13px] text-[var(--color-text-tertiary)]">{t('market.detail.noDescription')}</p>
                   )}
                 </section>
               </div>
@@ -340,7 +347,7 @@ export function SkillDetailView(props: SkillDetailViewProps) {
                 id="skill-detail-files-panel"
                 role="tabpanel"
                 aria-labelledby="skill-detail-tab-files-trigger"
-                className="mt-[22px] flex min-h-[22rem] flex-col lg:min-h-0 lg:flex-1"
+                className="mt-5 flex min-h-[22rem] flex-col @4xl:min-h-0 @4xl:flex-1"
                 data-testid="skill-detail-files"
               >
                 <FilePreview files={props.files} loadFile={props.loadFile} />
@@ -352,7 +359,7 @@ export function SkillDetailView(props: SkillDetailViewProps) {
                 id={`skill-detail-${activeExtra.key}-panel`}
                 role="tabpanel"
                 aria-labelledby={`skill-detail-tab-${activeExtra.key}-trigger`}
-                className="mt-[22px] flex flex-col gap-4"
+                className="mt-5 flex flex-col gap-4"
                 data-testid={`skill-detail-${activeExtra.key}`}
               >
                 {activeExtra.content}
@@ -363,29 +370,29 @@ export function SkillDetailView(props: SkillDetailViewProps) {
           {showAside && (
             <aside
               data-testid="skill-detail-sidebar"
-              className="order-first flex min-w-0 flex-col gap-4 lg:order-none lg:max-h-full lg:self-start lg:overflow-y-auto"
+              className="order-first flex min-w-0 flex-col gap-4 @4xl:order-none @4xl:max-h-full @4xl:self-start @4xl:overflow-y-auto"
             >
               {props.sideCards}
-              <Card radius="xl" surface="base" padding="none" className="overflow-hidden">
+              <Card radius="lg" surface="lowest" padding="none" className="overflow-hidden">
                 {props.metaTitle && (
-                  <h2 className="px-[18px] pt-4 text-sm font-semibold text-[var(--color-text-primary)]">
+                  <h2 className="px-4 pt-3.5 text-[13px] font-semibold text-[var(--color-text-primary)]">
                     {props.metaTitle}
                   </h2>
                 )}
                 {sidebarActions && (
-                  <div className="px-[18px] pt-[18px] [&>button]:w-full [&>button]:justify-center">
+                  <div className="px-4 pt-4 [&>button]:w-full [&>button]:justify-center">
                     {sidebarActions}
                   </div>
                 )}
                 {props.meta.length > 0 && (
-                  <dl className="px-[18px]">
+                  <dl className="px-4 pt-1">
                     {props.meta.map((item) => (
                       <div
                         key={item.label}
-                        className="flex min-w-0 items-baseline justify-between gap-4 border-b border-[var(--color-border)] py-[13px] last:border-b-0"
+                        className="flex min-w-0 items-baseline justify-between gap-4 border-b border-[var(--color-border)] py-2.5 last:border-b-0"
                       >
-                        <dt className="text-sm leading-5 text-[var(--color-text-secondary)]">{item.label}</dt>
-                        <dd className="max-w-[62%] break-words text-right text-[14.5px] font-bold leading-5 text-[var(--color-text-primary)]">
+                        <dt className="text-xs text-[var(--color-text-tertiary)]">{item.label}</dt>
+                        <dd className="max-w-[62%] break-words text-right text-[13px] font-medium text-[var(--color-text-primary)]">
                           {item.value}
                         </dd>
                       </div>
diff --git a/desktop/src/components/market/SourceStatusBar.tsx b/desktop/src/components/market/SourceStatusBar.tsx
index b27e8994..cc34c5c0 100644
--- a/desktop/src/components/market/SourceStatusBar.tsx
+++ b/desktop/src/components/market/SourceStatusBar.tsx
@@ -29,7 +29,7 @@ export function SourceStatusBar({
   const t = useTranslation()
   return (
     <div
-      className={`flex flex-wrap items-center gap-x-[18px] gap-y-1.5 ${className}`}
+      className={`flex flex-wrap items-center gap-x-4 gap-y-1.5 ${className}`}
       data-testid="market-source-status"
     >
       {MARKET_SOURCES.map((source) => {
@@ -44,10 +44,10 @@ export function SourceStatusBar({
             key={source}
             data-testid={`market-source-status-${source}`}
             title={info.error || undefined}
-            className="inline-flex items-center gap-[7px] text-[13.5px] text-[var(--color-text-secondary)]"
+            className="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)]"
           >
-            <StatusDot tone={DOT_TONES[info.status]} size="md" />
-            <span className="font-semibold text-[var(--color-text-primary)]">{t(`market.source.${source}`)}</span>
+            <StatusDot tone={DOT_TONES[info.status]} size="sm" />
+            <span className="font-medium text-[var(--color-text-primary)]">{t(`market.source.${source}`)}</span>
             <span className="text-[var(--color-text-tertiary)]">{statusLabel}</span>
           </span>
         )
diff --git a/desktop/src/components/market/pageLayout.ts b/desktop/src/components/market/pageLayout.ts
new file mode 100644
index 00000000..8fcddb55
--- /dev/null
+++ b/desktop/src/components/market/pageLayout.ts
@@ -0,0 +1,15 @@
+/**
+ * The one page column the extensions surfaces share: the page head, the plugin
+ * catalog, the skill market and both detail pages. Kept in one place so the
+ * head's title, the search row under it and the first card all start on the
+ * same edge — when each page carried its own `max-w-*`/`px-*` pair, switching
+ * tabs nudged the content sideways.
+ */
+export const EXTENSION_PAGE_COLUMN = 'mx-auto w-full max-w-[1200px] px-6 lg:px-10'
+
+/**
+ * Two to three cards a row inside that column. The floor matches the market
+ * grid's `CATALOG_COLUMN_FLOOR`, so the plugin and skill tabs break to the same
+ * column count at the same width.
+ */
+export const EXTENSION_CARD_GRID = 'grid gap-4 grid-cols-[repeat(auto-fill,minmax(min(100%,340px),1fr))]'
diff --git a/desktop/src/components/market/useMarketGridFill.test.tsx b/desktop/src/components/market/useMarketGridFill.test.tsx
index 696d08b3..c35ceab0 100644
--- a/desktop/src/components/market/useMarketGridFill.test.tsx
+++ b/desktop/src/components/market/useMarketGridFill.test.tsx
@@ -110,7 +110,7 @@ describe('useMarketGridFill', () => {
     stubGridBox({ top: 0, width: 1200 })
 
     render(<Probe />)
-    // (800 - 24) / 250 rounds up to 4 rows across 3 columns.
+    // (800 - 24) / 216 rounds up to 4 rows across 3 columns.
     expect(screen.getByTestId('count')).toHaveTextContent('12')
 
     act(() => {
@@ -119,7 +119,7 @@ describe('useMarketGridFill', () => {
       window.dispatchEvent(new Event('resize'))
     })
 
-    // (1100 - 24) / 250 rounds up to 5 rows, now across 2 columns.
+    // (1100 - 24) / 216 rounds up to 5 rows, now across 2 columns.
     expect(screen.getByTestId('columns')).toHaveTextContent('2')
     expect(screen.getByTestId('count')).toHaveTextContent('10')
   })
diff --git a/desktop/src/components/market/useMarketGridFill.ts b/desktop/src/components/market/useMarketGridFill.ts
index 65479768..a2df428a 100644
--- a/desktop/src/components/market/useMarketGridFill.ts
+++ b/desktop/src/components/market/useMarketGridFill.ts
@@ -16,9 +16,10 @@ import { useCallback, useEffect, useRef, useState } from 'react'
  * just stops matching what replaces it.
  */
 export const CATALOG_COLUMN_FLOOR = 340
-export const CATALOG_GAP = 18
-/** `SkillCard`'s `min-h-[208px]`. */
-export const CATALOG_CARD_MIN_HEIGHT = 208
+/** `EXTENSION_CARD_GRID`'s `gap-4`, so both tabs space their cards alike. */
+export const CATALOG_GAP = 16
+/** `SkillCard`'s `min-h-[200px]`. */
+export const CATALOG_CARD_MIN_HEIGHT = 200
 
 /**
  * `min(100%, …)` rather than the floor verbatim: the same bundle serves the
diff --git a/desktop/src/components/plugins/PluginDetail.tsx b/desktop/src/components/plugins/PluginDetail.tsx
index ab828749..2e50a9b4 100644
--- a/desktop/src/components/plugins/PluginDetail.tsx
+++ b/desktop/src/components/plugins/PluginDetail.tsx
@@ -1,4 +1,15 @@
 import { useMemo, useState, type ReactNode } from 'react'
+import {
+  ArrowLeft,
+  Bot,
+  Box,
+  ChevronRight,
+  Network,
+  SquareTerminal,
+  Webhook,
+  Zap,
+  type LucideIcon,
+} from 'lucide-react'
 import { usePluginStore } from '../../stores/pluginStore'
 import { useSessionStore } from '../../stores/sessionStore'
 import { useTranslation } from '../../i18n'
@@ -189,43 +200,51 @@ export function PluginDetail() {
   }
 
   return (
-    <div className="flex flex-col gap-4 min-w-0">
+    <div className="flex min-w-0 flex-col gap-6">
       <div>
         <Button
           variant="ghost"
-          size="base"
-          icon={<span className="material-symbols-outlined text-[16px]">arrow_back</span>}
+          size="sm"
+          className="-ml-2"
+          icon={<ArrowLeft size={14} strokeWidth={1.75} aria-hidden="true" />}
           onClick={clearSelection}
         >
           {t('settings.plugins.back')}
         </Button>
       </div>
 
-      <section className="rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)] shadow-[var(--shadow-card)] overflow-hidden">
-        <div className="grid gap-4 px-5 py-5 lg:grid-cols-[minmax(0,1.5fr)_minmax(280px,0.9fr)] lg:items-start">
-          <div className="min-w-0">
-            <div className="text-[11px] font-semibold uppercase tracking-[0.2em] text-[var(--color-text-tertiary)] mb-2">
-              {t('settings.plugins.entryEyebrow')}
-            </div>
-            <div className="flex flex-wrap items-center gap-2 mb-2">
-              <h3
-                className="text-[24px] font-semibold leading-tight text-[var(--color-text-primary)] break-all"
-                style={{ fontFamily: 'var(--font-headline)' }}
-              >
-                {selectedPlugin.name}
-              </h3>
-              <StatusPill enabled={selectedPlugin.enabled} hasErrors={selectedPlugin.hasErrors} />
-              <MetaPill>{t(`settings.plugins.scope.${selectedPlugin.scope}`)}</MetaPill>
-              <MetaPill>{selectedPlugin.marketplace}</MetaPill>
-              {selectedPlugin.version && <MetaPill>v{selectedPlugin.version}</MetaPill>}
-            </div>
-            <p className="max-w-4xl text-sm leading-6 text-[var(--color-text-secondary)]">
-              {selectedPlugin.description || t('settings.plugins.noDescription')}
-            </p>
-            <div className="mt-3 flex flex-wrap gap-x-4 gap-y-2 text-xs text-[var(--color-text-tertiary)]">
-              {selectedPlugin.authorName && (
+      {/* Page head: name and state, one line of facts, then the actions. */}
+      <header className="-mt-3 flex min-w-0 flex-col gap-3">
+        <div>
+          <p className="text-xs text-[var(--color-text-tertiary)]">{t('settings.plugins.entryEyebrow')}</p>
+          <div className="mt-1 flex flex-wrap items-center gap-2">
+            <h2 className="break-all text-[22px] font-semibold leading-[30px] text-[var(--color-text-primary)]">
+              {selectedPlugin.name}
+            </h2>
+            <StatusPill enabled={selectedPlugin.enabled} hasErrors={selectedPlugin.hasErrors} />
+          </div>
+          <p className="mt-1.5 max-w-[72ch] text-[13px] leading-5 text-[var(--color-text-secondary)]">
+            {selectedPlugin.description || t('settings.plugins.noDescription')}
+          </p>
+          <div className="mt-2 flex flex-wrap items-center gap-x-1.5 gap-y-1 text-xs text-[var(--color-text-tertiary)]">
+            <span>{t(`settings.plugins.scope.${selectedPlugin.scope}`)}</span>
+            <span aria-hidden="true">·</span>
+            <span>{selectedPlugin.marketplace}</span>
+            {selectedPlugin.version && (
+              <>
+                <span aria-hidden="true">·</span>
+                <span className="font-mono text-[11px]">v{selectedPlugin.version}</span>
+              </>
+            )}
+            {selectedPlugin.authorName && (
+              <>
+                <span aria-hidden="true">·</span>
                 <span>{t('settings.plugins.author', { value: selectedPlugin.authorName })}</span>
-              )}
+              </>
+            )}
+          </div>
+          {(selectedPlugin.projectPath || selectedPlugin.installPath) && (
+            <div className="mt-1 flex flex-col gap-0.5 break-all font-mono text-[11px] leading-5 text-[var(--color-text-tertiary)]">
               {selectedPlugin.projectPath && (
                 <span>{t('settings.plugins.projectPath', { value: selectedPlugin.projectPath })}</span>
               )}
@@ -233,40 +252,15 @@ export function PluginDetail() {
                 <span>{t('settings.plugins.installPath', { value: selectedPlugin.installPath })}</span>
               )}
             </div>
-          </div>
-
-          <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-2">
-            <DetailStat
-              label={t('settings.plugins.summary.skills')}
-              value={String(selectedPlugin.componentCounts.skills)}
-              icon="auto_awesome"
-            />
-            <DetailStat
-              label={t('settings.plugins.summary.agents')}
-              value={String(selectedPlugin.componentCounts.agents)}
-              icon="smart_toy"
-            />
-            <DetailStat
-              label={t('settings.plugins.summary.mcp')}
-              value={String(selectedPlugin.componentCounts.mcpServers)}
-              icon="hub"
-            />
-            <DetailStat
-              label={t('settings.plugins.summary.hooks')}
-              value={String(selectedPlugin.componentCounts.hooks)}
-              icon="bolt"
-            />
-          </div>
+          )}
         </div>
-      </section>
 
-      <section className="rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface)] shadow-[var(--shadow-card)] px-5 py-4">
         <div className="flex flex-wrap gap-2">
           {canMutate && (
             selectedPlugin.enabled ? (
               <Button
                 variant="secondary"
-                size="sm"
+                size="base"
                 loading={isApplying && actionKey === 'disable'}
                 onClick={() => void runAction('disable', () => disablePlugin(selectedPlugin.id, selectedPlugin.scope, currentWorkDir, activeSessionId || undefined))}
               >
@@ -274,7 +268,7 @@ export function PluginDetail() {
               </Button>
             ) : (
               <Button
-                size="sm"
+                size="base"
                 loading={isApplying && actionKey === 'enable'}
                 onClick={() => void runAction('enable', () => enablePlugin(selectedPlugin.id, selectedPlugin.scope, currentWorkDir, activeSessionId || undefined))}
               >
@@ -286,7 +280,7 @@ export function PluginDetail() {
           {canMutate && (
             <Button
               variant="secondary"
-              size="sm"
+              size="base"
               loading={isApplying && actionKey === 'update'}
               onClick={() => void runAction('update', () => updatePlugin(selectedPlugin.id, selectedPlugin.scope, currentWorkDir, activeSessionId || undefined))}
             >
@@ -296,7 +290,7 @@ export function PluginDetail() {
 
           <Button
             variant="secondary"
-            size="sm"
+            size="base"
             loading={isApplying && actionKey === 'reload'}
             onClick={() => void handleReload()}
           >
@@ -305,8 +299,8 @@ export function PluginDetail() {
 
           {canMutate && (
             <Button
-              variant="danger"
-              size="sm"
+              variant="danger-ghost"
+              size="base"
               loading={isApplying && actionKey === 'uninstall'}
               onClick={() => {
                 setShowUninstallDialog(true)
@@ -317,18 +311,40 @@ export function PluginDetail() {
           )}
         </div>
 
-        {!canMutate && (
-          <p className="mt-3 text-xs text-[var(--color-text-tertiary)]">
-            {selectedPlugin.scope === 'managed'
-              ? t('settings.plugins.managedHint')
-              : t('settings.plugins.builtinHint')}
-          </p>
-        )}
+        <div className="flex flex-col gap-1 text-xs text-[var(--color-text-tertiary)]">
+          {!canMutate && (
+            <p>
+              {selectedPlugin.scope === 'managed'
+                ? t('settings.plugins.managedHint')
+                : t('settings.plugins.builtinHint')}
+            </p>
+          )}
+          <p>{t('settings.plugins.applyHint')}</p>
+        </div>
+      </header>
 
-        <p className="mt-3 text-xs text-[var(--color-text-tertiary)]">
-          {t('settings.plugins.applyHint')}
-        </p>
-      </section>
+      <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
+        <DetailStat
+          label={t('settings.plugins.summary.skills')}
+          value={String(selectedPlugin.componentCounts.skills)}
+          icon={Box}
+        />
+        <DetailStat
+          label={t('settings.plugins.summary.agents')}
+          value={String(selectedPlugin.componentCounts.agents)}
+          icon={Bot}
+        />
+        <DetailStat
+          label={t('settings.plugins.summary.mcp')}
+          value={String(selectedPlugin.componentCounts.mcpServers)}
+          icon={Network}
+        />
+        <DetailStat
+          label={t('settings.plugins.summary.hooks')}
+          value={String(selectedPlugin.componentCounts.hooks)}
+          icon={Zap}
+        />
+      </div>
 
       {/* The heading tag and the leading icon are the cost of adopting
           `ErrorState`; `role="alert"` and three fewer alpha fills are what it
@@ -340,11 +356,11 @@ export function PluginDetail() {
           size="lg"
           title={t('settings.plugins.errorsTitle')}
           detail={
-            <span className="mt-1 flex flex-col gap-2">
+            <span className="mt-1 flex flex-col gap-1.5">
               {selectedPlugin.errors.map((error) => (
                 <span
                   key={error}
-                  className="rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface)] px-3 py-3 text-sm text-[var(--color-text-secondary)]"
+                  className="rounded-[var(--radius-md)] bg-[var(--color-surface-container-lowest)] px-3 py-2 text-[13px] text-[var(--color-text-secondary)]"
                 >
                   {error}
                 </span>
@@ -354,153 +370,131 @@ export function PluginDetail() {
         />
       )}
 
-      <section className="rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface)] shadow-[var(--shadow-card)] overflow-hidden">
-        <div className="px-5 py-4 border-b border-[var(--color-border)] bg-[var(--color-surface-container-low)]">
-          <h4
-            className="text-[16.5px] font-semibold leading-tight text-[var(--color-text-primary)]"
-            style={{ fontFamily: 'var(--font-headline)' }}
-          >
+      <section className="flex min-w-0 flex-col gap-4">
+        <div className="px-0.5">
+          <h3 className="text-[13px] font-semibold text-[var(--color-text-secondary)]">
             {t('settings.plugins.capabilitiesTitle')}
-          </h4>
-          <p className="text-xs text-[var(--color-text-tertiary)] mt-1">
+          </h3>
+          <p className="mt-0.5 text-xs text-[var(--color-text-tertiary)]">
             {t('settings.plugins.capabilitiesHint')}
           </p>
         </div>
-        <div className="flex flex-col gap-4 p-4">
-          <CapabilityPreviewSection
-            title={t('settings.plugins.capabilityLabel.skills')}
-            count={selectedPlugin.skillEntries.length}
-            emptyLabel={t('settings.plugins.capabilityEmpty')}
-            hint={!canNavigateSharedCapabilities ? t('settings.plugins.sharedNavigationDisabled') : undefined}
-          >
-            {selectedPlugin.skillEntries.length > 0 ? (
-              <div className="grid gap-3 xl:grid-cols-2">
-                {selectedPlugin.skillEntries.map((skill) => (
-                  <SkillPreviewCard
-                    key={skill.name}
-                    name={skill.displayName || skill.name}
-                    rawName={skill.displayName ? skill.name : undefined}
-                    description={skill.description}
-                    version={skill.version}
-                    onClick={() => void handleOpenSkill(skill.name)}
-                    disabled={!canNavigateSharedCapabilities}
-                  />
-                ))}
-              </div>
-            ) : null}
-          </CapabilityPreviewSection>
 
-          <CapabilityPreviewSection
-            title={t('settings.plugins.capabilityLabel.mcpServers')}
-            count={selectedPlugin.mcpServerEntries.length}
-            emptyLabel={t('settings.plugins.capabilityEmpty')}
-            hint={!canNavigateSharedCapabilities ? t('settings.plugins.sharedNavigationDisabled') : undefined}
-          >
-            {selectedPlugin.mcpServerEntries.length > 0 ? (
-              <div className="grid gap-3 xl:grid-cols-2">
-                {selectedPlugin.mcpServerEntries.map((server) => (
-                  <McpPreviewCard
-                    key={server.name}
-                    name={server.displayName || server.name}
-                    transport={server.transport}
-                    summary={server.summary}
-                    onClick={() => void handleOpenMcpServer(server.name)}
-                    disabled={!canNavigateSharedCapabilities}
-                  />
-                ))}
-              </div>
-            ) : null}
-          </CapabilityPreviewSection>
+        <CapabilityPreviewSection
+          title={t('settings.plugins.capabilityLabel.skills')}
+          icon={Box}
+          count={selectedPlugin.skillEntries.length}
+          emptyLabel={t('settings.plugins.capabilityEmpty')}
+          hint={!canNavigateSharedCapabilities ? t('settings.plugins.sharedNavigationDisabled') : undefined}
+        >
+          {selectedPlugin.skillEntries.map((skill) => (
+            <SkillPreviewCard
+              key={skill.name}
+              name={skill.displayName || skill.name}
+              rawName={skill.displayName ? skill.name : undefined}
+              description={skill.description}
+              version={skill.version}
+              onClick={() => void handleOpenSkill(skill.name)}
+              disabled={!canNavigateSharedCapabilities}
+            />
+          ))}
+        </CapabilityPreviewSection>
 
-          <CapabilityPreviewSection
-            title={t('settings.plugins.capabilityLabel.commands')}
-            count={selectedPlugin.commandEntries.length}
-            emptyLabel={t('settings.plugins.capabilityEmpty')}
-          >
-            {selectedPlugin.commandEntries.length > 0 ? (
-              <div className="grid gap-3 xl:grid-cols-2">
-                {selectedPlugin.commandEntries.map((command) => (
-                  <CommandPreviewCard
-                    key={command.name}
-                    name={command.name}
-                    description={command.description}
-                  />
-                ))}
-              </div>
-            ) : null}
-          </CapabilityPreviewSection>
+        <CapabilityPreviewSection
+          title={t('settings.plugins.capabilityLabel.mcpServers')}
+          icon={Network}
+          count={selectedPlugin.mcpServerEntries.length}
+          emptyLabel={t('settings.plugins.capabilityEmpty')}
+          hint={!canNavigateSharedCapabilities ? t('settings.plugins.sharedNavigationDisabled') : undefined}
+        >
+          {selectedPlugin.mcpServerEntries.map((server) => (
+            <McpPreviewCard
+              key={server.name}
+              name={server.displayName || server.name}
+              transport={server.transport}
+              summary={server.summary}
+              onClick={() => void handleOpenMcpServer(server.name)}
+              disabled={!canNavigateSharedCapabilities}
+            />
+          ))}
+        </CapabilityPreviewSection>
 
-          <CapabilityPreviewSection
-            title={t('settings.plugins.capabilityLabel.agents')}
-            count={selectedPlugin.agentEntries.length}
-            emptyLabel={t('settings.plugins.capabilityEmpty')}
-            hint={!canNavigateSharedCapabilities ? t('settings.plugins.sharedNavigationDisabled') : undefined}
-          >
-            {selectedPlugin.agentEntries.length > 0 ? (
-              <div className="grid gap-3 xl:grid-cols-2">
-                {selectedPlugin.agentEntries.map((agent) => (
-                  <AgentPreviewCard
-                    key={agent.name}
-                    name={agent.displayName || agent.name}
-                    description={agent.description}
-                    onClick={() => void handleOpenAgent(agent.name)}
-                    disabled={!canNavigateSharedCapabilities}
-                  />
-                ))}
-              </div>
-            ) : null}
-          </CapabilityPreviewSection>
+        <CapabilityPreviewSection
+          title={t('settings.plugins.capabilityLabel.commands')}
+          icon={SquareTerminal}
+          count={selectedPlugin.commandEntries.length}
+          emptyLabel={t('settings.plugins.capabilityEmpty')}
+        >
+          {selectedPlugin.commandEntries.map((command) => (
+            <CommandPreviewCard
+              key={command.name}
+              name={command.name}
+              description={command.description}
+            />
+          ))}
+        </CapabilityPreviewSection>
 
-          <CapabilityPreviewSection
-            title={t('settings.plugins.capabilityLabel.hooks')}
-            count={selectedPlugin.hookEntries.length}
-            emptyLabel={t('settings.plugins.capabilityEmpty')}
-          >
-            {selectedPlugin.hookEntries.length > 0 ? (
-              <div className="grid gap-3 xl:grid-cols-2">
-                {selectedPlugin.hookEntries.map((hook, index) => (
-                  <HookPreviewCard
-                    key={`${hook.event}:${hook.matcher || 'all'}:${index}`}
-                    event={hook.event}
-                    matcher={hook.matcher}
-                    actions={hook.actions}
-                  />
-                ))}
-              </div>
-            ) : null}
-          </CapabilityPreviewSection>
+        <CapabilityPreviewSection
+          title={t('settings.plugins.capabilityLabel.agents')}
+          icon={Bot}
+          count={selectedPlugin.agentEntries.length}
+          emptyLabel={t('settings.plugins.capabilityEmpty')}
+          hint={!canNavigateSharedCapabilities ? t('settings.plugins.sharedNavigationDisabled') : undefined}
+        >
+          {selectedPlugin.agentEntries.map((agent) => (
+            <AgentPreviewCard
+              key={agent.name}
+              name={agent.displayName || agent.name}
+              description={agent.description}
+              onClick={() => void handleOpenAgent(agent.name)}
+              disabled={!canNavigateSharedCapabilities}
+            />
+          ))}
+        </CapabilityPreviewSection>
 
-          <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
-            {otherCapabilityItems.map(({ key, items }) => (
-              <div
-                key={key}
-                className="rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)] px-4 py-3"
-              >
-                <div className="flex items-center justify-between gap-2 mb-2">
-                  <div className="text-sm font-semibold text-[var(--color-text-primary)]">
-                    {t(`settings.plugins.capabilityLabel.${key}`)}
-                  </div>
-                  <span className="text-[11px] text-[var(--color-text-tertiary)]">
-                    {items.length}
-                  </span>
+        <CapabilityPreviewSection
+          title={t('settings.plugins.capabilityLabel.hooks')}
+          icon={Webhook}
+          count={selectedPlugin.hookEntries.length}
+          emptyLabel={t('settings.plugins.capabilityEmpty')}
+        >
+          {selectedPlugin.hookEntries.map((hook, index) => (
+            <HookPreviewCard
+              key={`${hook.event}:${hook.matcher || 'all'}:${index}`}
+              event={hook.event}
+              matcher={hook.matcher}
+              actions={hook.actions}
+            />
+          ))}
+        </CapabilityPreviewSection>
+
+        {otherCapabilityItems.map(({ key, items }) => (
+          <Card key={key} radius="lg" surface="lowest" padding="none" className="overflow-hidden">
+            <div className="flex h-10 items-center justify-between gap-2 border-b border-[var(--color-border)] px-4">
+              <div className="text-[13px] font-medium text-[var(--color-text-primary)]">
+                {t(`settings.plugins.capabilityLabel.${key}`)}
+              </div>
+              <span className="font-mono text-[11px] tabular-nums text-[var(--color-text-tertiary)]">
+                {items.length}
+              </span>
+            </div>
+            <div className="px-4 py-3">
+              {items.length > 0 ? (
+                <div className="flex flex-wrap gap-1.5">
+                  {items.map((item) => (
+                    <Badge key={item} size="sm" wrap mono>
+                      {item}
+                    </Badge>
+                  ))}
                 </div>
-                {items.length > 0 ? (
-                  <div className="flex flex-wrap gap-2">
-                    {items.map((item) => (
-                      <Badge key={item} size="md" bordered wrap mono>
-                        {item}
-                      </Badge>
-                    ))}
-                  </div>
-                ) : (
-                  <div className="text-xs text-[var(--color-text-tertiary)]">
-                    {t('settings.plugins.capabilityEmpty')}
-                  </div>
-                )}
-              </div>
-            ))}
-          </div>
-        </div>
+              ) : (
+                <div className="text-xs text-[var(--color-text-tertiary)]">
+                  {t('settings.plugins.capabilityEmpty')}
+                </div>
+              )}
+            </div>
+          </Card>
+        ))}
       </section>
 
       <ConfirmDialog
@@ -524,39 +518,59 @@ export function PluginDetail() {
   )
 }
 
+/**
+ * One capability kind: a white card with a 40px header and its entries as
+ * rows under hairlines. The entries used to be bordered cards inside a
+ * bordered, tinted section inside the page card — three nested frames.
+ */
 function CapabilityPreviewSection({
   title,
+  icon: Icon,
   count,
   children,
   emptyLabel,
   hint,
 }: {
   title: string
+  icon: LucideIcon
   count: number
   children: ReactNode
   emptyLabel: string
   hint?: string
 }) {
   return (
-    <section className="rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)] overflow-hidden">
-      <div className="flex items-center justify-between gap-3 border-b border-[var(--color-border)] px-4 py-3">
-        <div
-          className="text-[14.5px] font-semibold text-[var(--color-text-primary)]"
-          style={{ fontFamily: 'var(--font-headline)' }}
-        >
+    <Card as="section" radius="lg" surface="lowest" padding="none" className="overflow-hidden">
+      <div className="flex h-10 items-center gap-2 border-b border-[var(--color-border)] px-4">
+        <Icon className="flex-shrink-0 text-[var(--color-text-tertiary)]" size={15} strokeWidth={1.75} aria-hidden="true" />
+        <div className="min-w-0 flex-1 text-[13px] font-medium text-[var(--color-text-primary)]">
           {title}
         </div>
         <div className="font-mono text-[11px] tabular-nums text-[var(--color-text-tertiary)]">{count}</div>
       </div>
-      <div className="p-4">
-        {hint && count > 0 && (
-          <div className="mb-3 text-xs text-[var(--color-text-tertiary)]">{hint}</div>
-        )}
-        {count > 0 ? children : (
-          <div className="text-xs text-[var(--color-text-tertiary)]">{emptyLabel}</div>
-        )}
-      </div>
-    </section>
+      {hint && count > 0 && (
+        <div className="border-b border-[var(--color-border)] px-4 py-2 text-xs text-[var(--color-text-tertiary)]">{hint}</div>
+      )}
+      {count > 0 ? (
+        <div className="divide-y divide-[var(--color-border)]">{children}</div>
+      ) : (
+        <div className="px-4 py-3 text-xs text-[var(--color-text-tertiary)]">{emptyLabel}</div>
+      )}
+    </Card>
+  )
+}
+
+/** A clickable entry row: hover fill, chevron, disabled when navigation is off. */
+const ENTRY_BUTTON =
+  'group flex w-full items-start justify-between gap-3 px-4 py-3 text-left transition-colors duration-150 hover:bg-[var(--color-surface-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-border-focus)] disabled:cursor-default disabled:opacity-60 disabled:hover:bg-transparent'
+
+function EntryChevron() {
+  return (
+    <ChevronRight
+      className="mt-0.5 flex-shrink-0 text-[var(--color-text-tertiary)] opacity-60 transition-opacity group-hover:opacity-100"
+      size={14}
+      strokeWidth={1.75}
+      aria-hidden="true"
+    />
   )
 }
 
@@ -579,24 +593,17 @@ function SkillPreviewCard({
   const slashName = rawName || name
 
   return (
-    <button
-      type="button"
-      onClick={onClick}
-      disabled={disabled}
-      className="group rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface)] px-4 py-3 text-left transition-colors hover:border-[var(--color-border-focus)] hover:bg-[var(--color-surface-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] disabled:cursor-default disabled:opacity-70 disabled:hover:border-[var(--color-border)] disabled:hover:bg-[var(--color-surface)]"
-    >
-      <div className="flex items-center justify-between gap-3">
-        <div className="flex items-center gap-2 flex-wrap min-w-0">
-          <span className="text-sm font-semibold text-[var(--color-text-primary)] break-all">{name}</span>
+    <button type="button" onClick={onClick} disabled={disabled} className={ENTRY_BUTTON}>
+      <div className="min-w-0">
+        <div className="flex min-w-0 flex-wrap items-center gap-1.5">
+          <span className="break-all text-[13px] font-medium text-[var(--color-text-primary)]">{name}</span>
           {version && <Badge mono>v{version}</Badge>}
           <Badge variant="outline">{t('settings.skills.slashCommand')}</Badge>
         </div>
-        <span className="material-symbols-outlined text-[18px] text-[var(--color-text-tertiary)] transition-transform group-hover:translate-x-0.5">
-          chevron_right
-        </span>
+        <div className="mt-0.5 break-all font-mono text-[11px] text-[var(--color-text-tertiary)]">/{slashName}</div>
+        <div className="mt-1 break-words text-xs leading-5 text-[var(--color-text-secondary)]">{description}</div>
       </div>
-      <div className="mt-1 text-[11px] text-[var(--color-text-tertiary)] break-all">/{slashName}</div>
-      <div className="mt-2 text-xs leading-5 text-[var(--color-text-secondary)] break-words">{description}</div>
+      <EntryChevron />
     </button>
   )
 }
@@ -609,9 +616,9 @@ function CommandPreviewCard({
   description: string
 }) {
   return (
-    <div className="rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface)] px-4 py-3">
-      <div className="text-sm font-semibold text-[var(--color-text-primary)] break-all">/{name}</div>
-      <div className="mt-2 text-xs leading-5 text-[var(--color-text-secondary)] break-words">{description}</div>
+    <div className="px-4 py-3">
+      <div className="break-all font-mono text-xs text-[var(--color-text-primary)]">/{name}</div>
+      <div className="mt-1 break-words text-xs leading-5 text-[var(--color-text-secondary)]">{description}</div>
     </div>
   )
 }
@@ -628,21 +635,12 @@ function AgentPreviewCard({
   disabled?: boolean
 }) {
   return (
-    <button
-      type="button"
-      onClick={onClick}
-      disabled={disabled}
-      className="group rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface)] px-4 py-3 text-left transition-colors hover:border-[var(--color-border-focus)] hover:bg-[var(--color-surface-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] disabled:cursor-default disabled:opacity-70 disabled:hover:border-[var(--color-border)] disabled:hover:bg-[var(--color-surface)]"
-    >
-      <div className="flex items-start justify-between gap-3">
-        <div className="min-w-0">
-          <div className="text-sm font-semibold text-[var(--color-text-primary)] break-all">{name}</div>
-          <div className="mt-2 text-xs leading-5 text-[var(--color-text-secondary)] break-words">{description}</div>
-        </div>
-        <span className="material-symbols-outlined text-[18px] text-[var(--color-text-tertiary)] transition-transform group-hover:translate-x-0.5">
-          chevron_right
-        </span>
+    <button type="button" onClick={onClick} disabled={disabled} className={ENTRY_BUTTON}>
+      <div className="min-w-0">
+        <div className="break-all text-[13px] font-medium text-[var(--color-text-primary)]">{name}</div>
+        <div className="mt-1 break-words text-xs leading-5 text-[var(--color-text-secondary)]">{description}</div>
       </div>
+      <EntryChevron />
     </button>
   )
 }
@@ -661,24 +659,15 @@ function McpPreviewCard({
   disabled?: boolean
 }) {
   return (
-    <button
-      type="button"
-      onClick={onClick}
-      disabled={disabled}
-      className="group rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface)] px-4 py-3 text-left transition-colors hover:border-[var(--color-border-focus)] hover:bg-[var(--color-surface-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] disabled:cursor-default disabled:opacity-70 disabled:hover:border-[var(--color-border)] disabled:hover:bg-[var(--color-surface)]"
-    >
-      <div className="flex items-start justify-between gap-3">
-        <div className="min-w-0">
-          <div className="flex items-center gap-2 flex-wrap">
-            <span className="text-sm font-semibold text-[var(--color-text-primary)] break-all">{name}</span>
-            <Badge className="uppercase tracking-[0.12em]">{transport}</Badge>
-          </div>
-          <div className="mt-2 text-xs leading-5 text-[var(--color-text-secondary)] break-all">{summary}</div>
+    <button type="button" onClick={onClick} disabled={disabled} className={ENTRY_BUTTON}>
+      <div className="min-w-0">
+        <div className="flex flex-wrap items-center gap-1.5">
+          <span className="break-all text-[13px] font-medium text-[var(--color-text-primary)]">{name}</span>
+          <Badge mono>{transport}</Badge>
         </div>
-        <span className="material-symbols-outlined text-[18px] text-[var(--color-text-tertiary)] transition-transform group-hover:translate-x-0.5">
-          chevron_right
-        </span>
+        <div className="mt-1 break-all font-mono text-[11px] leading-5 text-[var(--color-text-secondary)]">{summary}</div>
       </div>
+      <EntryChevron />
     </button>
   )
 }
@@ -693,17 +682,17 @@ function HookPreviewCard({
   actions: string[]
 }) {
   return (
-    <div className="rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface)] px-4 py-3">
-      <div className="flex items-center gap-2 flex-wrap">
-        <span className="text-sm font-semibold text-[var(--color-text-primary)] break-all">{event}</span>
+    <div className="px-4 py-3">
+      <div className="flex flex-wrap items-center gap-1.5">
+        <span className="break-all text-[13px] font-medium text-[var(--color-text-primary)]">{event}</span>
         {/* `wrap` is what unblocked these two: a hook matcher is a regex and an
             action is a shell command, and a nowrap badge pushed both off the
             card. */}
         {matcher && <Badge wrap mono>{matcher}</Badge>}
       </div>
-      <div className="mt-2 flex flex-wrap gap-2">
+      <div className="mt-2 flex flex-wrap gap-1.5">
         {actions.map((action) => (
-          <Badge key={action} size="md" bordered wrap mono>
+          <Badge key={action} size="sm" pill={false} wrap mono>
             {action}
           </Badge>
         ))}
@@ -712,33 +701,23 @@ function HookPreviewCard({
   )
 }
 
-function MetaPill({ children }: { children: ReactNode }) {
-  return (
-    <Badge bordered className="uppercase tracking-[0.12em]">
-      {children}
-    </Badge>
-  )
-}
-
+/** Label above, figure below: the figure is what the eye lands on. */
 function DetailStat({
   label,
   value,
-  icon,
+  icon: Icon,
 }: {
   label: string
   value: string
-  icon: string
+  icon: LucideIcon
 }) {
   return (
-    <Card radius="lg" padding="sm">
-      <div className="flex items-center gap-2 text-[11px] uppercase tracking-[0.16em] text-[var(--color-text-tertiary)]">
-        <span className="material-symbols-outlined text-[14px]">{icon}</span>
-        <span>{label}</span>
+    <Card radius="lg" surface="lowest" padding="none" className="min-w-0 px-4 py-3">
+      <div className="flex items-center gap-1.5 text-xs text-[var(--color-text-tertiary)]">
+        <Icon className="flex-shrink-0" size={14} strokeWidth={1.75} aria-hidden="true" />
+        <span className="truncate">{label}</span>
       </div>
-      <div
-        className="mt-2 text-[21px] font-semibold leading-none text-[var(--color-text-primary)] break-all"
-        style={{ fontFamily: 'var(--font-headline)' }}
-      >
+      <div className="mt-1 break-all text-[22px] font-semibold leading-7 tabular-nums text-[var(--color-text-primary)]">
         {value}
       </div>
     </Card>
diff --git a/desktop/src/components/plugins/PluginList.tsx b/desktop/src/components/plugins/PluginList.tsx
index 919dd345..b14e9953 100644
--- a/desktop/src/components/plugins/PluginList.tsx
+++ b/desktop/src/components/plugins/PluginList.tsx
@@ -1,8 +1,22 @@
 import { useEffect, useMemo, useState } from 'react'
+import {
+  ChevronRight,
+  CircleCheck,
+  ListChecks,
+  Puzzle,
+  RefreshCw,
+  RotateCw,
+  Store,
+  ToggleLeft,
+  ToggleRight,
+  TriangleAlert,
+  type LucideIcon,
+} from 'lucide-react'
 import { usePluginStore, type PluginActionTarget } from '../../stores/pluginStore'
 import { useSessionStore } from '../../stores/sessionStore'
 import { useTranslation } from '../../i18n'
 import { useUIStore } from '../../stores/uiStore'
+import { cx } from '@/lib/cx'
 import { Badge } from '@/components/ui/Badge'
 import { Button } from '@/components/ui/Button'
 import { Card } from '@/components/ui/Card'
@@ -179,7 +193,7 @@ export function PluginList() {
   if (plugins.length === 0) {
     return (
       <EmptyState
-        icon={<span className="material-symbols-outlined text-[20px]">extension</span>}
+        icon={<Puzzle size={20} strokeWidth={1.75} aria-hidden="true" />}
         title={t('settings.plugins.empty')}
         description={t('settings.plugins.emptyHint')}
         action={{ label: t('settings.plugins.refresh'), onClick: () => void fetchPlugins(currentWorkDir) }}
@@ -188,168 +202,100 @@ export function PluginList() {
   }
 
   return (
-    <div className="flex flex-col gap-6 min-w-0">
-      <section className="rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)] shadow-[var(--shadow-card)] overflow-hidden">
-        <div className="flex flex-col gap-4 px-5 py-5 min-w-0">
-          <div className="flex flex-col gap-4 min-w-0 xl:flex-row xl:items-start xl:justify-between">
-            <div className="min-w-0 max-w-4xl">
-              <div className="text-[11px] font-semibold uppercase tracking-[0.2em] text-[var(--color-text-tertiary)] mb-2">
-                {t('settings.plugins.browserEyebrow')}
-              </div>
-              <div className="flex items-center gap-3 mb-2">
-                <span className="material-symbols-outlined text-[22px] text-[var(--color-brand)]">
-                  extension
-                </span>
-                <h3
-                  className="text-[21px] font-semibold leading-tight text-[var(--color-text-primary)]"
-                  style={{ fontFamily: 'var(--font-headline)' }}
-                >
-                  {t('settings.plugins.browserTitle')}
-                </h3>
-              </div>
-              <p className="text-sm leading-6 text-[var(--color-text-secondary)]">
-                {t('settings.plugins.browserDescription')}
-              </p>
-            </div>
-
-            <div className="flex flex-wrap gap-2 xl:justify-end">
-              {/* `size="sm"` plus `min-h-9` was two heights fighting; `md` is
-                  h-9 outright. The material icon also moves into `icon`, so
-                  `loading` swaps it for the spinner instead of rendering both. */}
-              <Button
-                variant="secondary"
-                size="md"
-                className="flex-1 sm:flex-none"
-                icon={<span className="material-symbols-outlined text-[16px]" aria-hidden="true">refresh</span>}
-                onClick={() => void fetchPlugins(currentWorkDir)}
-              >
-                {t('settings.plugins.refresh')}
-              </Button>
-              <Button
-                size="md"
-                className="flex-1 sm:flex-none"
-                icon={<span className="material-symbols-outlined text-[16px]" aria-hidden="true">sync</span>}
-                onClick={handleReload}
-                loading={isApplying}
-              >
-                {t('settings.plugins.apply')}
-              </Button>
-            </div>
-          </div>
-
-          <div className="grid min-w-0 grid-cols-2 gap-2 md:grid-cols-4">
-            <SummaryCard
-              label={t('settings.plugins.summary.total')}
-              value={String(summary?.total ?? plugins.length)}
-              icon="extension"
-            />
-            <SummaryCard
-              label={t('settings.plugins.summary.enabled')}
-              value={String(summary?.enabled ?? plugins.filter((plugin) => plugin.enabled).length)}
-              icon="check_circle"
-            />
-            <SummaryCard
-              label={t('settings.plugins.summary.attention')}
-              value={String(grouped.attention.length)}
-              icon="warning"
-            />
-            <SummaryCard
-              label={t('settings.plugins.summary.marketplaces')}
-              value={String(summary?.marketplaceCount ?? marketplaces.length)}
-              icon="storefront"
-            />
-          </div>
-
-          {lastReloadSummary && (
-            <p className="text-xs text-[var(--color-text-tertiary)]">
-              {t('settings.plugins.lastReload', {
-                enabled: String(lastReloadSummary.enabled),
-                skills: String(lastReloadSummary.skills),
-                errors: String(lastReloadSummary.errors),
-              })}
-            </p>
-          )}
+    <div className="flex min-w-0 flex-col gap-6">
+      {/* The page head above already names this page, so the list opens on
+          its numbers and the two runtime actions rather than a second title. */}
+      <div className="flex flex-col gap-3">
+        <div className="grid min-w-0 grid-cols-2 gap-3 md:grid-cols-4">
+          <SummaryCard
+            label={t('settings.plugins.summary.total')}
+            value={String(summary?.total ?? plugins.length)}
+            icon={Puzzle}
+          />
+          <SummaryCard
+            label={t('settings.plugins.summary.enabled')}
+            value={String(summary?.enabled ?? plugins.filter((plugin) => plugin.enabled).length)}
+            icon={CircleCheck}
+          />
+          <SummaryCard
+            label={t('settings.plugins.summary.attention')}
+            value={String(grouped.attention.length)}
+            icon={TriangleAlert}
+          />
+          <SummaryCard
+            label={t('settings.plugins.summary.marketplaces')}
+            value={String(summary?.marketplaceCount ?? marketplaces.length)}
+            icon={Store}
+          />
         </div>
 
-        <div className="flex flex-col gap-3 border-t border-[var(--color-border)] px-5 py-3 sm:flex-row sm:items-center sm:justify-between">
-          <div className="flex min-w-0 items-center gap-2 text-xs text-[var(--color-text-secondary)]">
-            <span className="material-symbols-outlined text-[16px] text-[var(--color-text-tertiary)]">
-              checklist
-            </span>
-            <span className="font-medium text-[var(--color-text-primary)]">
-              {t('settings.plugins.selectionCount', { count: String(selectedPlugins.length) })}
-            </span>
-            {selectedPlugins.length > 0 && (
-              <Button variant="ghost" size="sm" onClick={clearSelection}>
-                {t('settings.plugins.clearSelection')}
-              </Button>
-            )}
-          </div>
-          <div className="flex flex-wrap gap-2 sm:justify-end">
-            <Button
-              size="base"
-              icon={<span className="material-symbols-outlined text-[16px]" aria-hidden="true">toggle_on</span>}
-              disabled={enableCandidates.length === 0 || isApplying}
-              onClick={() => setConfirmBatchAction('enable')}
-            >
-              {t('settings.plugins.enableSelected')}
-            </Button>
+        <div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-2">
+          <p className="min-w-0 flex-1 text-xs text-[var(--color-text-tertiary)]">
+            {lastReloadSummary && t('settings.plugins.lastReload', {
+              enabled: String(lastReloadSummary.enabled),
+              skills: String(lastReloadSummary.skills),
+              errors: String(lastReloadSummary.errors),
+            })}
+          </p>
+          <div className="flex flex-wrap gap-2">
             <Button
               variant="secondary"
               size="base"
-              icon={<span className="material-symbols-outlined text-[16px]" aria-hidden="true">toggle_off</span>}
-              disabled={disableCandidates.length === 0 || isApplying}
-              onClick={() => setConfirmBatchAction('disable')}
+              icon={<RefreshCw size={14} strokeWidth={1.75} aria-hidden="true" />}
+              onClick={() => void fetchPlugins(currentWorkDir)}
             >
-              {t('settings.plugins.disableSelected')}
+              {t('settings.plugins.refresh')}
+            </Button>
+            <Button
+              size="base"
+              icon={<RotateCw size={14} strokeWidth={1.75} aria-hidden="true" />}
+              onClick={handleReload}
+              loading={isApplying}
+            >
+              {t('settings.plugins.apply')}
             </Button>
           </div>
         </div>
-      </section>
+      </div>
 
-      {marketplaces.length > 0 && (
-        <section className="rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface)] shadow-[var(--shadow-card)] overflow-hidden">
-          <div className="px-5 py-4 border-b border-[var(--color-border)] bg-[var(--color-surface-container-low)]">
-            <h4
-              className="text-[16.5px] font-semibold leading-tight text-[var(--color-text-primary)]"
-              style={{ fontFamily: 'var(--font-headline)' }}
-            >
-              {t('settings.plugins.marketplacesTitle')}
-            </h4>
-            <p className="text-xs text-[var(--color-text-tertiary)] mt-1">
-              {t('settings.plugins.marketplacesHint')}
-            </p>
-          </div>
-          <div className="grid gap-3 p-4 md:grid-cols-2 xl:grid-cols-3">
-            {marketplaces.map((marketplace) => (
-              <div
-                key={marketplace.name}
-                className="rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)] px-4 py-3"
-              >
-                <div className="flex items-center gap-2">
-                  <span className="text-sm font-semibold text-[var(--color-text-primary)]">
-                    {marketplace.name}
-                  </span>
-                  <Badge tone={marketplace.autoUpdate ? 'success' : 'neutral'}>
-                    {marketplace.autoUpdate
-                      ? t('settings.plugins.marketplaceAutoUpdateOn')
-                      : t('settings.plugins.marketplaceAutoUpdateOff')}
-                  </Badge>
-                </div>
-                <div className="mt-2 text-xs leading-5 text-[var(--color-text-secondary)] break-words">
-                  {marketplace.source}
-                </div>
-                <div className="mt-3 flex flex-wrap gap-x-3 gap-y-1 text-[11px] text-[var(--color-text-tertiary)]">
-                  <span>{t('settings.plugins.marketplaceInstalledCount', { count: String(marketplace.installedCount) })}</span>
-                  {marketplace.lastUpdated && (
-                    <span>{t('settings.plugins.marketplaceUpdatedAt', { value: new Date(marketplace.lastUpdated).toLocaleString() })}</span>
-                  )}
-                </div>
-              </div>
-            ))}
-          </div>
-        </section>
-      )}
+      {/* Batch selection: one quiet bar, filled only while something is picked. */}
+      <div
+        className={cx(
+          'flex flex-col gap-2 rounded-[var(--radius-lg)] border border-[var(--color-border)] px-4 py-2.5 sm:flex-row sm:items-center sm:justify-between',
+          selectedPlugins.length > 0 ? 'bg-[var(--color-surface-selected)]' : 'bg-[var(--color-surface-container-lowest)]',
+        )}
+      >
+        <div className="flex min-w-0 items-center gap-2 text-[13px] text-[var(--color-text-secondary)]">
+          <ListChecks className="flex-shrink-0 text-[var(--color-text-tertiary)]" size={14} strokeWidth={1.75} aria-hidden="true" />
+          <span className="font-medium text-[var(--color-text-primary)]">
+            {t('settings.plugins.selectionCount', { count: String(selectedPlugins.length) })}
+          </span>
+          {selectedPlugins.length > 0 && (
+            <Button variant="ghost" size="sm" onClick={clearSelection}>
+              {t('settings.plugins.clearSelection')}
+            </Button>
+          )}
+        </div>
+        <div className="flex flex-wrap gap-2 sm:justify-end">
+          <Button
+            size="sm"
+            icon={<ToggleRight size={14} strokeWidth={1.75} aria-hidden="true" />}
+            disabled={enableCandidates.length === 0 || isApplying}
+            onClick={() => setConfirmBatchAction('enable')}
+          >
+            {t('settings.plugins.enableSelected')}
+          </Button>
+          <Button
+            variant="secondary"
+            size="sm"
+            icon={<ToggleLeft size={14} strokeWidth={1.75} aria-hidden="true" />}
+            disabled={disableCandidates.length === 0 || isApplying}
+            onClick={() => setConfirmBatchAction('disable')}
+          >
+            {t('settings.plugins.disableSelected')}
+          </Button>
+        </div>
+      </div>
 
       {renderGroup('attention', grouped.attention, {
         fetchPluginDetail,
@@ -373,6 +319,45 @@ export function PluginList() {
         onToggleSelection: togglePluginSelection,
       })}
 
+      {marketplaces.length > 0 && (
+        <section className="min-w-0">
+          <GroupHeading title={t('settings.plugins.marketplacesTitle')} hint={t('settings.plugins.marketplacesHint')} />
+          <Card radius="lg" surface="lowest" padding="none" className="divide-y divide-[var(--color-border)] overflow-hidden">
+            {marketplaces.map((marketplace) => (
+              <div key={marketplace.name} className="flex min-w-0 items-start gap-3 px-4 py-3">
+                <span className="mt-0.5 flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-[var(--radius-md)] bg-[var(--color-surface-container)] text-[var(--color-text-tertiary)]">
+                  <Store size={14} strokeWidth={1.75} aria-hidden="true" />
+                </span>
+                <div className="min-w-0 flex-1">
+                  <div className="flex flex-wrap items-center gap-2">
+                    <span className="text-[13px] font-medium text-[var(--color-text-primary)]">
+                      {marketplace.name}
+                    </span>
+                    <Badge tone={marketplace.autoUpdate ? 'success' : 'neutral'}>
+                      {marketplace.autoUpdate
+                        ? t('settings.plugins.marketplaceAutoUpdateOn')
+                        : t('settings.plugins.marketplaceAutoUpdateOff')}
+                    </Badge>
+                  </div>
+                  <div className="mt-0.5 break-words font-mono text-[11px] leading-5 text-[var(--color-text-secondary)]">
+                    {marketplace.source}
+                  </div>
+                  <div className="mt-0.5 flex flex-wrap gap-x-1.5 gap-y-1 text-xs text-[var(--color-text-tertiary)]">
+                    <span>{t('settings.plugins.marketplaceInstalledCount', { count: String(marketplace.installedCount) })}</span>
+                    {marketplace.lastUpdated && (
+                      <>
+                        <span aria-hidden="true">·</span>
+                        <span>{t('settings.plugins.marketplaceUpdatedAt', { value: new Date(marketplace.lastUpdated).toLocaleString() })}</span>
+                      </>
+                    )}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </Card>
+        </section>
+      )}
+
       <ConfirmDialog
         open={confirmBatchAction !== null}
         onClose={() => setConfirmBatchAction(null)}
@@ -400,6 +385,21 @@ type RenderGroupOptions = {
   onToggleSelection: (pluginId: string, selected: boolean) => void
 }
 
+/** 13 semibold secondary over the card it names, with an optional 12px hint. */
+function GroupHeading({ title, hint, count }: { title: string; hint?: string; count?: number }) {
+  return (
+    <div className="mb-2 px-0.5">
+      <div className="flex items-center gap-2">
+        <h4 className="text-[13px] font-semibold text-[var(--color-text-secondary)]">{title}</h4>
+        {count !== undefined && (
+          <span className="font-mono text-[11px] tabular-nums text-[var(--color-text-tertiary)]">{count}</span>
+        )}
+      </div>
+      {hint && <p className="mt-0.5 text-xs text-[var(--color-text-tertiary)]">{hint}</p>}
+    </div>
+  )
+}
+
 function renderGroup(
   bucket: PluginBucket,
   items: PluginSummary[],
@@ -421,67 +421,64 @@ function renderGroup(
         : 'settings.plugins.group.disabled'
 
   return (
-    <section
-      key={bucket}
-      className="rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface)] shadow-[var(--shadow-card)] overflow-hidden"
-    >
-      <div className="flex items-start justify-between gap-3 px-5 py-4 border-b border-[var(--color-border)] bg-[var(--color-surface-container-low)]">
-        <div className="min-w-0">
-          <h4
-            className="text-[16.5px] font-semibold leading-tight text-[var(--color-text-primary)]"
-            style={{ fontFamily: 'var(--font-headline)' }}
-          >
-            {t(titleKey)}
-          </h4>
-          <p className="text-xs leading-5 text-[var(--color-text-tertiary)] mt-1">
-            {t('settings.plugins.groupHint', { count: String(items.length) })}
-          </p>
-        </div>
-        <span className="font-mono text-xs tabular-nums text-[var(--color-text-tertiary)]">{items.length}</span>
-      </div>
-      <div className="flex flex-col p-2">
-        {items.map((plugin) => (
-          <div
-            key={plugin.id}
-            className={`group rounded-[var(--radius-lg)] border px-3 py-3 transition-[background-color,border-color] duration-150 ease-out hover:border-[var(--color-border-focus)] hover:bg-[var(--color-surface-hover)] ${
-              selectedPluginIds.has(plugin.id)
-                ? 'border-[var(--color-primary-fixed-dim)] bg-[var(--color-surface-selected)]'
-                : 'border-transparent'
-            }`}
-          >
-            <div className="flex items-start gap-3">
+    <section key={bucket} className="min-w-0">
+      <GroupHeading
+        title={t(titleKey)}
+        hint={t('settings.plugins.groupHint', { count: String(items.length) })}
+        count={items.length}
+      />
+      <Card radius="lg" surface="lowest" padding="none" className="divide-y divide-[var(--color-border)] overflow-hidden">
+        {items.map((plugin) => {
+          const selected = selectedPluginIds.has(plugin.id)
+          return (
+            <div
+              key={plugin.id}
+              className={cx(
+                'group flex items-start gap-3 px-4 py-3 transition-colors duration-150',
+                selected ? 'bg-[var(--color-surface-selected)]' : 'hover:bg-[var(--color-surface-hover)]',
+              )}
+            >
               {canMutatePlugin(plugin) ? (
                 <Checkbox
                   label={t('settings.plugins.selectPlugin', { name: plugin.name })}
                   labelHidden
-                  checked={selectedPluginIds.has(plugin.id)}
+                  checked={selected}
                   onChange={(event) => onToggleSelection(plugin.id, event.currentTarget.checked)}
-                  containerClassName="h-6 w-6 shrink-0"
+                  containerClassName="mt-1 h-5 w-5 shrink-0"
                 />
               ) : (
-                <span className="mt-0.5 h-6 w-6 shrink-0" aria-hidden="true" />
+                <span className="mt-1 h-5 w-5 shrink-0" aria-hidden="true" />
               )}
               <button
                 type="button"
                 onClick={() => void fetchPluginDetail(plugin.id, cwd)}
-                className="flex min-w-0 flex-1 items-start gap-3 rounded-[var(--radius-lg)] text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface)]"
+                className="flex min-w-0 flex-1 items-start gap-3 rounded-[var(--radius-sm)] text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface)]"
               >
-                <span className="mt-0.5 material-symbols-outlined text-[18px] text-[var(--color-text-tertiary)]">
-                  {plugin.hasErrors ? 'warning' : plugin.enabled ? 'extension' : 'extension_off'}
+                <span
+                  className={cx(
+                    'flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-[var(--radius-md)]',
+                    plugin.hasErrors
+                      ? 'bg-[var(--color-error-container)] text-[var(--color-on-error-container)]'
+                      : 'bg-[var(--color-surface-container)] text-[var(--color-text-tertiary)]',
+                  )}
+                >
+                  {plugin.hasErrors
+                    ? <TriangleAlert size={14} strokeWidth={1.75} aria-hidden="true" />
+                    : <Puzzle size={14} strokeWidth={1.75} aria-hidden="true" />}
                 </span>
-                <div className="flex-1 min-w-0">
-                  <div className="flex items-center gap-2 flex-wrap">
-                    <span className="text-sm font-semibold text-[var(--color-text-primary)] break-all">
+                <div className="min-w-0 flex-1">
+                  <div className="flex flex-wrap items-center gap-1.5">
+                    <span className="break-all text-[13px] font-medium text-[var(--color-text-primary)]">
                       {plugin.name}
                     </span>
                     <StatusPill plugin={plugin} />
                     <ScopePill scope={plugin.scope} />
                     {plugin.version && <Badge mono>v{plugin.version}</Badge>}
                   </div>
-                  <p className="mt-1 text-xs leading-5 text-[var(--color-text-secondary)] break-words">
+                  <p className="mt-0.5 break-words text-xs leading-5 text-[var(--color-text-secondary)]">
                     {plugin.description || t('settings.plugins.noDescription')}
                   </p>
-                  <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-[11px] text-[var(--color-text-tertiary)]">
+                  <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-[var(--color-text-tertiary)]">
                     <span>{plugin.marketplace}</span>
                     {plugin.componentCounts.skills > 0 && (
                       <span>{t('settings.plugins.capability.skills', { count: String(plugin.componentCounts.skills) })}</span>
@@ -499,14 +496,17 @@ function renderGroup(
                     )}
                   </div>
                 </div>
-                <span className="material-symbols-outlined text-[18px] text-[var(--color-text-tertiary)] opacity-60 transition-transform group-hover:translate-x-0.5 group-hover:opacity-100">
-                  chevron_right
-                </span>
+                <ChevronRight
+                  className="mt-1.5 flex-shrink-0 text-[var(--color-text-tertiary)] opacity-60 transition-opacity group-hover:opacity-100"
+                  size={14}
+                  strokeWidth={1.75}
+                  aria-hidden="true"
+                />
               </button>
             </div>
-          </div>
-        ))}
-      </div>
+          )
+        })}
+      </Card>
     </section>
   )
 }
@@ -519,27 +519,23 @@ function formatPluginNames(plugins: PluginSummary[]) {
   return plugins.map((plugin) => plugin.name).join(', ')
 }
 
+/** Label above, figure below: the figure is what the eye lands on. */
 function SummaryCard({
   label,
   value,
-  icon,
+  icon: Icon,
 }: {
   label: string
   value: string
-  icon: string
+  icon: LucideIcon
 }) {
   return (
-    <Card radius="lg" padding="sm" className="min-w-0">
-      <div className="flex min-w-0 items-center gap-1.5 text-[11px] uppercase tracking-[0.08em] text-[var(--color-text-tertiary)]">
-        <span className="material-symbols-outlined text-[14px] flex-shrink-0">{icon}</span>
-        <span className="min-w-0 truncate text-[10px] leading-4">
-          {label}
-        </span>
+    <Card radius="lg" surface="lowest" padding="none" className="min-w-0 px-4 py-3">
+      <div className="flex min-w-0 items-center gap-1.5 text-xs text-[var(--color-text-tertiary)]">
+        <Icon className="flex-shrink-0" size={14} strokeWidth={1.75} aria-hidden="true" />
+        <span className="min-w-0 truncate">{label}</span>
       </div>
-      <div
-        className="mt-1.5 truncate text-[21px] font-semibold leading-none text-[var(--color-text-primary)]"
-        style={{ fontFamily: 'var(--font-headline)' }}
-      >
+      <div className="mt-1 truncate text-[22px] font-semibold leading-7 tabular-nums text-[var(--color-text-primary)]">
         {value}
       </div>
     </Card>
diff --git a/desktop/src/components/search/FindInPageModal.tsx b/desktop/src/components/search/FindInPageModal.tsx
index 3ed1e2bb..bbade89d 100644
--- a/desktop/src/components/search/FindInPageModal.tsx
+++ b/desktop/src/components/search/FindInPageModal.tsx
@@ -21,7 +21,7 @@ const MAX_FIND_MATCHES = 1_000
 const RESULTS_HL = 'cc-find-results'
 const ACTIVE_HL = 'cc-find-active'
 // Subtrees never searched: sidebar, tab bar, this find bar, non-content tags.
-const SKIP_CLOSEST = '.sidebar-panel, [data-testid="tab-bar"], [data-find-bar], script, style, noscript, .material-symbols-outlined'
+const SKIP_CLOSEST = '.sidebar-panel, [data-testid="tab-bar"], [data-find-bar], script, style, noscript'
 const CONVERSATION_AUXILIARY_CANDIDATES = [
   '[data-testid="workbench-panel"]',
   '[data-testid="session-activity-panel"]',
@@ -211,11 +211,11 @@ export function FindInPageModal({ open, onClose }: Props) {
         ::highlight(${ACTIVE_HL}) { background-color: var(--color-search-highlight-active); color: var(--color-on-search-highlight-active); }
       `}</style>
       <div
-        className="glass-panel animate-overlay-in-top flex items-center gap-1 rounded-[var(--radius-lg)] px-2 py-1.5"
+        className="animate-overlay-in-top flex h-10 items-center gap-1 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] pl-2.5 pr-1.5 shadow-[var(--shadow-dropdown)]"
         role="dialog"
         aria-label={t('search.findInPage.title')}
       >
-        <Search className="h-4 w-4 shrink-0 text-[var(--color-text-tertiary)]" aria-hidden="true" />
+        <Search size={14} strokeWidth={1.75} className="shrink-0 text-[var(--color-text-tertiary)]" aria-hidden="true" />
         <input
           ref={inputRef}
           type="text"
@@ -223,13 +223,13 @@ export function FindInPageModal({ open, onClose }: Props) {
           onChange={(e) => setQuery(e.target.value)}
           onKeyDown={onKeyDown}
           placeholder={t('search.findInPage.placeholder')}
-          className="w-52 bg-transparent text-[13.5px] text-[var(--color-text-primary)] outline-none placeholder:text-[var(--color-text-tertiary)]"
+          className="w-52 bg-transparent text-[13px] text-[var(--color-text-primary)] outline-none placeholder:text-[var(--color-text-tertiary)]"
         />
-        <span className="min-w-[48px] shrink-0 px-1 text-center font-mono text-[12px] tabular-nums text-[var(--color-text-tertiary)]">
+        <span className="min-w-[48px] shrink-0 px-1 text-center font-mono text-[11px] tabular-nums text-[var(--color-text-tertiary)]">
           {count > 0 ? `${activeIndex + 1} / ${count}` : (debouncedQuery.trim() ? '0' : '')}
         </span>
         <IconButton
-          icon={<ChevronUp className="h-4 w-4" aria-hidden="true" />}
+          icon={<ChevronUp size={14} strokeWidth={1.75} aria-hidden="true" />}
           label={t('search.findInPage.previousMatch')}
           size="xs"
           tone="secondary"
@@ -237,7 +237,7 @@ export function FindInPageModal({ open, onClose }: Props) {
           onClick={() => step(false)}
         />
         <IconButton
-          icon={<ChevronDown className="h-4 w-4" aria-hidden="true" />}
+          icon={<ChevronDown size={14} strokeWidth={1.75} aria-hidden="true" />}
           label={t('search.findInPage.nextMatch')}
           size="xs"
           tone="secondary"
@@ -245,7 +245,7 @@ export function FindInPageModal({ open, onClose }: Props) {
           onClick={() => step(true)}
         />
         <IconButton
-          icon={<X className="h-4 w-4" aria-hidden="true" />}
+          icon={<X size={14} strokeWidth={1.75} aria-hidden="true" />}
           label={t('search.findInPage.close')}
           size="xs"
           tone="secondary"
diff --git a/desktop/src/components/search/GlobalSearchModal.tsx b/desktop/src/components/search/GlobalSearchModal.tsx
index fec66dc6..e4b46906 100644
--- a/desktop/src/components/search/GlobalSearchModal.tsx
+++ b/desktop/src/components/search/GlobalSearchModal.tsx
@@ -1,12 +1,11 @@
 import { useState, useEffect, useRef, useMemo, type ReactNode } from 'react'
 import { createPortal } from 'react-dom'
-import { Search, X } from 'lucide-react'
+import { MessageSquare, Search } from 'lucide-react'
 import { useTranslation, type TranslationKey } from '../../i18n'
 import { useSessionStore } from '../../stores/sessionStore'
 import { useTabStore } from '../../stores/tabStore'
 import { searchApi, type SessionSearchResult, type SessionMatch, type SessionMatchRole } from '../../api/search'
 import { Badge } from '@/components/ui/Badge'
-import { IconButton } from '@/components/ui/IconButton'
 import { Spinner } from '@/components/ui/Spinner'
 
 const DEBOUNCE_MS = 250
@@ -216,19 +215,21 @@ export function GlobalSearchModal({ open, onClose }: Props) {
   return createPortal(
     <div className="fixed inset-0 z-[var(--z-dialog)] flex items-start justify-center pt-[12vh]">
       <div
-        className="absolute inset-0 bg-[var(--color-modal-scrim)] backdrop-blur-[2px] transition-opacity duration-200"
+        className="absolute inset-0 bg-[var(--color-modal-scrim)] transition-opacity duration-200"
         onClick={onClose}
       />
 
+      {/* The command palette (「素」): a paper sheet with a 52px query row,
+          sectioned 36px rows, and the key legend as its footer. */}
       <div
-        className="animate-overlay-in relative z-10 flex max-h-[70vh] w-[640px] max-w-[calc(100vw-48px)] flex-col overflow-hidden rounded-[var(--radius-2xl)] border border-[var(--color-border)] bg-[var(--color-surface)] shadow-[var(--shadow-overlay)]"
+        className="animate-overlay-in relative z-10 flex max-h-[70vh] w-[620px] max-w-[calc(100vw-48px)] flex-col overflow-hidden rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] shadow-[var(--shadow-dropdown)]"
         role="dialog"
         aria-modal="true"
         aria-label={t('search.global.placeholder')}
       >
         {/* Search input */}
-        <div className="flex items-center gap-3 border-b border-[var(--color-border)] px-[22px] py-[18px]">
-          <Search className="h-[17px] w-[17px] shrink-0 text-[var(--color-text-tertiary)]" aria-hidden="true" />
+        <div className="flex h-[52px] shrink-0 items-center gap-2.5 border-b border-[var(--color-border)] px-3.5">
+          <Search size={18} strokeWidth={1.75} className="shrink-0 text-[var(--color-text-tertiary)]" aria-hidden="true" />
           <input
             ref={inputRef}
             type="text"
@@ -239,28 +240,27 @@ export function GlobalSearchModal({ open, onClose }: Props) {
             onKeyDown={handleKeyDown}
             placeholder={t('search.global.placeholder')}
             aria-label={t('search.global.placeholder')}
-            className="min-w-0 flex-1 bg-transparent text-[16px] text-[var(--color-text-primary)] outline-none placeholder:text-[var(--color-text-tertiary)]"
+            className="min-w-0 flex-1 bg-transparent text-[15px] text-[var(--color-text-primary)] outline-none placeholder:text-[var(--color-text-tertiary)]"
           />
-          {loading && <Spinner size={16} className="text-[var(--color-text-tertiary)]" />}
-          <IconButton
-            icon={<X className="h-4 w-4" aria-hidden="true" />}
-            label={t('search.global.close')}
-            size="sm"
-            shape="circle"
-            tone="secondary"
+          {loading && <Spinner size={14} className="text-[var(--color-text-tertiary)]" />}
+          {/* Esc closes from the keyboard; this is the same exit for the
+              pointer, drawn as the key it stands for. */}
+          <button
+            type="button"
             onClick={onClose}
-          />
+            aria-label={t('search.global.close')}
+            title={t('search.global.close')}
+            className={`${KEYCAP_CLASS} cursor-pointer transition-colors hover:border-[var(--color-outline)] hover:text-[var(--color-text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]`}
+          >
+            esc
+          </button>
         </div>
 
         {/* Results */}
-        <div ref={listRef} className="min-h-0 flex-1 overflow-y-auto px-2 py-2.5" role="listbox">
+        <div ref={listRef} className="min-h-0 flex-1 overflow-y-auto pb-1.5" role="listbox">
           {!isSearching ? (
             <>
-              {rows.length > 0 && (
-                <div className="px-4 py-1.5 text-[12px] text-[var(--color-text-tertiary)]">
-                  {t('search.global.recentTitle')}
-                </div>
-              )}
+              {rows.length > 0 && <SectionTitle>{t('search.global.recentTitle')}</SectionTitle>}
               {rows.map((row, i) => (
                 <ResultRow
                   key={row.sessionId}
@@ -287,6 +287,7 @@ export function GlobalSearchModal({ open, onClose }: Props) {
             </div>
           ) : (
             <>
+              <div className="h-1.5" aria-hidden="true" />
               {rows.map((row, i) => (
                 <ResultRow
                   key={row.sessionId}
@@ -308,19 +309,14 @@ export function GlobalSearchModal({ open, onClose }: Props) {
         </div>
 
         {/* Footer hints */}
-        <div className="flex items-center gap-3.5 border-t border-[var(--color-border)] px-[22px] py-3 text-[12px] text-[var(--color-text-tertiary)]">
-          <span className="flex items-center gap-1.5">
-            <Keycap>↑↓</Keycap>
-            {t('fileSearch.navigate')}
-          </span>
-          <span className="flex items-center gap-1.5">
-            <Keycap>Enter</Keycap>
-            {t('fileSearch.select')}
-          </span>
-          <span className="flex items-center gap-1.5">
-            <Keycap>Esc</Keycap>
-            {t('fileSearch.close')}
-          </span>
+        <div className="flex shrink-0 items-center gap-1 border-t border-[var(--color-border)] px-3.5 py-2.5 text-[11px] text-[var(--color-text-tertiary)]">
+          <Keycap>↑</Keycap>
+          <Keycap>↓</Keycap>
+          <span className="ml-0.5 mr-2.5">{t('fileSearch.navigate')}</span>
+          <Keycap>↵</Keycap>
+          <span className="ml-0.5 mr-2.5">{t('fileSearch.select')}</span>
+          <Keycap>esc</Keycap>
+          <span className="ml-0.5">{t('fileSearch.close')}</span>
         </div>
       </div>
     </div>,
@@ -328,11 +324,18 @@ export function GlobalSearchModal({ open, onClose }: Props) {
   )
 }
 
+/** 「素」 kbd: mono 11, 18px tall, `--radius-xs`, hairline, paper fill, tertiary ink. */
+const KEYCAP_CLASS = 'inline-flex h-[18px] min-w-[18px] shrink-0 items-center justify-center rounded-[var(--radius-xs)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] px-1 font-mono text-[11px] leading-none text-[var(--color-text-tertiary)]'
+
 function Keycap({ children }: { children: ReactNode }) {
+  return <kbd className={KEYCAP_CLASS}>{children}</kbd>
+}
+
+function SectionTitle({ children }: { children: ReactNode }) {
   return (
-    <kbd className="rounded-[var(--radius-sm)] border border-[var(--color-border)] bg-[var(--color-surface-container)] px-1.5 py-px font-mono text-[11px] font-medium text-[var(--color-text-secondary)]">
+    <div className="px-4 pb-1 pt-2.5 text-[11px] font-semibold text-[var(--color-text-tertiary)]">
       {children}
-    </kbd>
+    </div>
   )
 }
 
@@ -346,6 +349,9 @@ type RowProps = {
 }
 
 function ResultRow({ row, index, active, onActivate, onOpen, t }: RowProps) {
+  const project = projectLabel(row)
+  const time = formatRelativeTime(row.modifiedAt, t)
+  const meta = [project, time].filter(Boolean).join(' · ')
   return (
     <button
       type="button"
@@ -354,35 +360,37 @@ function ResultRow({ row, index, active, onActivate, onOpen, t }: RowProps) {
       aria-selected={active}
       onMouseEnter={() => onActivate(index)}
       onClick={() => onOpen(row)}
-      className={`flex w-full flex-col gap-0.5 rounded-[var(--radius-md)] px-4 py-2.5 text-left transition-colors hover:bg-[var(--color-surface-hover)] focus-visible:outline-none ${
-        active ? 'bg-[var(--color-surface-hover)]' : ''
+      className={`mx-1.5 flex w-[calc(100%-12px)] flex-col rounded-[var(--radius-md)] px-2.5 text-left transition-colors focus-visible:outline-none ${
+        active ? 'bg-[var(--color-surface-selected)]' : 'hover:bg-[var(--color-surface-hover)]'
       }`}
     >
-      <div className="flex items-center gap-2">
-        <span className="min-w-0 flex-1 truncate text-[14.5px] font-medium text-[var(--color-text-primary)]">
+      <div className="flex h-9 w-full min-w-0 items-center gap-2.5">
+        <MessageSquare size={14} strokeWidth={1.75} className="shrink-0 text-[var(--color-text-tertiary)]" aria-hidden="true" />
+        <span className="min-w-0 flex-1 truncate text-[13px] text-[var(--color-text-primary)]">
           {row.title}
         </span>
-        <span className="shrink-0 text-[12px] tabular-nums text-[var(--color-text-tertiary)]">
-          {formatRelativeTime(row.modifiedAt, t)}
-        </span>
-      </div>
-      <div className="flex items-center gap-1.5 text-[12.5px] text-[var(--color-text-tertiary)]">
-        <span className="min-w-0 truncate">{projectLabel(row)}</span>
         {row.matchCount > 0 && (
-          <>
-            <span aria-hidden="true">·</span>
-            <span className="shrink-0">{t('search.global.matchCount', { count: row.matchCount })}</span>
-          </>
-        )}
-      </div>
-      {row.matches.slice(0, MATCH_PREVIEW_PER_SESSION).map((m, j) => (
-        <div key={`${m.lineNumber}-${j}`} className="mt-0.5 flex items-start gap-2">
-          <RoleBadge role={m.role} t={t} />
-          <span className="min-w-0 flex-1 truncate text-[12px] text-[var(--color-text-secondary)]">
-            {renderHighlighted(m.snippet, m.highlights)}
+          <span className="shrink-0 text-[12px] tabular-nums text-[var(--color-text-tertiary)]">
+            {t('search.global.matchCount', { count: row.matchCount })}
           </span>
+        )}
+        <span className="max-w-[45%] shrink-0 truncate text-[12px] tabular-nums text-[var(--color-text-tertiary)]">
+          {meta}
+        </span>
+        {active && <Keycap>↵</Keycap>}
+      </div>
+      {row.matches.length > 0 && (
+        <div className="-mt-1 flex w-full flex-col gap-1 pb-2 pl-6">
+          {row.matches.slice(0, MATCH_PREVIEW_PER_SESSION).map((m, j) => (
+            <div key={`${m.lineNumber}-${j}`} className="flex min-w-0 items-center gap-2">
+              <RoleBadge role={m.role} t={t} />
+              <span className="min-w-0 flex-1 truncate text-[12px] text-[var(--color-text-secondary)]">
+                {renderHighlighted(m.snippet, m.highlights)}
+              </span>
+            </div>
+          ))}
         </div>
-      ))}
+      )}
     </button>
   )
 }
@@ -395,8 +403,9 @@ function RoleBadge({
   t: (key: TranslationKey, params?: Record<string, string | number>) => string
 }) {
   const isUser = role === 'user'
+  // A speaker label, not a state: neutral either way, the words tell them apart.
   return (
-    <Badge tone={isUser ? 'brand' : 'neutral'} pill={false} className="mt-px leading-none">
+    <Badge tone="neutral" size="xs" pill={false} className="shrink-0 leading-none">
       {isUser ? t('search.global.roleUser') : t('search.global.roleAssistant')}
     </Badge>
   )
@@ -417,7 +426,7 @@ function renderHighlighted(
     parts.push(
       <mark
         key={`${start}-${end}`}
-        className="rounded-[var(--radius-sm)] bg-[var(--color-brand-soft)] px-0.5 text-[var(--color-on-brand-soft)]"
+        className="rounded-[var(--radius-xs)] bg-[var(--color-search-highlight)] px-px text-[var(--color-on-search-highlight)]"
       >
         {snippet.slice(start, end)}
       </mark>,
diff --git a/desktop/src/components/settings/AgentManager.tsx b/desktop/src/components/settings/AgentManager.tsx
index 00dc7600..906b5bf4 100644
--- a/desktop/src/components/settings/AgentManager.tsx
+++ b/desktop/src/components/settings/AgentManager.tsx
@@ -5,12 +5,9 @@ import {
   Box,
   Boxes,
   Bolt,
-  Braces,
   Check,
   CircleAlert,
   Folder,
-  Hammer,
-  Layers,
   LockKeyhole,
   Pencil,
   Plus,
@@ -19,7 +16,6 @@ import {
   Terminal,
   Trash2,
   User,
-  Wrench,
 } from 'lucide-react'
 import { useTranslation } from '../../i18n'
 import type { TranslationKey } from '../../i18n'
@@ -44,22 +40,39 @@ import { ErrorState } from '@/components/ui/ErrorState'
 import { LoadingState } from '@/components/ui/LoadingState'
 import { DirectoryPicker } from '@/components/composite/DirectoryPicker'
 import { IconButton } from '@/components/ui/IconButton'
-import { Input } from '@/components/ui/Input'
+import { FIELD_BASE_CLASSES, Input, fieldStateClasses } from '@/components/ui/Input'
 import { Modal } from '@/components/ui/Modal'
 import { SearchField } from '@/components/ui/SearchField'
 import { SelectField } from '@/components/ui/SelectField'
-import { SettingsPageHeader } from '@/components/settings/SettingsSection'
+import {
+  SettingsGroup,
+  SettingsPageHeader,
+  SettingsRow,
+  SettingsSection,
+  SettingsStat,
+} from '@/components/settings/SettingsSection'
 import { ModelSelector } from '@/components/controls/ModelSelector'
+import { cx } from '@/lib/cx'
 
+/**
+ * The colour names an agent file may declare (`color: blue`), rendered as
+ * theme tokens so the bot glyph follows the active palette instead of sitting
+ * on the same Tailwind-500 hex under all six themes.
+ *
+ * The hue names have no status meaning, so they borrow the terminal's ANSI
+ * ramp — the one themed set of plain hues — rather than the status pairs. The
+ * two hues it lacks fall back to the nearest themed accents: orange to the
+ * warning amber, cyan to the teal tertiary.
+ */
 const AGENT_COLORS: Record<string, string> = {
-  red: '#ef4444',
-  orange: '#f97316',
-  yellow: '#eab308',
-  green: '#22c55e',
-  blue: '#3b82f6',
-  purple: '#a855f7',
-  pink: '#ec4899',
-  cyan: '#06b6d4',
+  red: 'var(--color-terminal-ansi-red)',
+  orange: 'var(--color-warning)',
+  yellow: 'var(--color-terminal-ansi-yellow)',
+  green: 'var(--color-terminal-ansi-green)',
+  blue: 'var(--color-terminal-ansi-blue)',
+  purple: 'var(--color-terminal-ansi-magenta)',
+  pink: 'var(--color-terminal-ansi-bright-magenta)',
+  cyan: 'var(--color-tertiary)',
 }
 
 const AGENT_SOURCE_ORDER: AgentSource[] = [
@@ -168,21 +181,19 @@ export function AgentManager() {
     <div className="w-full min-w-0">
       {mutationWarning && (
         <div
-          className="mb-4 flex flex-wrap items-center justify-between gap-3 rounded-[var(--radius-xl)] border border-[var(--color-warning)] bg-[var(--color-warning-container)] px-4 py-3"
+          className="mb-5 flex flex-wrap items-center justify-between gap-3 rounded-[var(--radius-lg)] bg-[var(--color-warning-container)] px-4 py-2.5"
           role="status"
         >
           <div className="flex min-w-0 items-start gap-2">
-            <CircleAlert size={17} className="mt-0.5 shrink-0 text-[var(--color-warning)]" />
-            <div className="min-w-0">
-              <p className="text-sm font-medium text-[var(--color-text-primary)]">
-                {t('settings.agents.refreshWarning')}
-              </p>
-            </div>
+            <CircleAlert size={16} strokeWidth={1.75} aria-hidden="true" className="mt-0.5 shrink-0 text-[var(--color-on-warning-container)]" />
+            <p className="min-w-0 text-[13px] font-medium leading-5 text-[var(--color-on-warning-container)]">
+              {t('settings.agents.refreshWarning')}
+            </p>
           </div>
           <Button
             variant="secondary"
-            size="sm"
-            icon={<RefreshCw size={14} />}
+            size="base"
+            icon={<RefreshCw size={14} strokeWidth={1.75} />}
             onClick={() => void retryMutationRefresh(
               agentContextPath,
               contextSessionId,
@@ -203,137 +214,123 @@ export function AgentManager() {
       ) : (
         <>
           <SettingsPageHeader
-            title={t('settings.agents.title')}
+            title={t('settings.tab.agents')}
             description={t('settings.agents.description')}
             action={(
-              <Button icon={<Plus size={16} />} onClick={() => setFormState({ mode: 'create' })}>
+              <Button
+                variant="primary"
+                size="base"
+                icon={<Plus size={14} strokeWidth={1.75} />}
+                onClick={() => setFormState({ mode: 'create' })}
+              >
                 {t('settings.agents.create')}
               </Button>
             )}
           />
 
           {isLoading && allAgents.length === 0 ? (
-            <LoadingState label={t('common.loading')} labelHidden size="md" />
-          ) : error ? (
-            <ErrorState
-              title={t('settings.agents.loadError')}
-              onRetry={() => void fetchAgents(agentContextPath)}
-              retryLabel={t('common.retry')}
-              size="lg"
-            />
-          ) : allAgents.length === 0 ? (
-            <EmptyState
-              icon={<Bot size={20} />}
-              title={t('settings.agents.empty')}
-              description={t('settings.agents.emptyHint')}
-              size="md"
-            />
-          ) : (
-            <div className="flex min-w-0 flex-col gap-6">
-              <section className="overflow-hidden rounded-[var(--radius-2xl)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)]">
-                <div className="grid min-w-0 gap-4 px-5 py-5 xl:grid-cols-[minmax(0,1.15fr)_minmax(400px,1fr)] xl:items-end">
-                  <div className="min-w-0">
-                    <div className="mb-2 text-[11px] font-semibold uppercase tracking-[0.2em] text-[var(--color-text-tertiary)]">
-                      {t('settings.agents.browserEyebrow')}
-                    </div>
-                    <div className="mb-2 flex items-center gap-3">
-                      <Bot size={22} className="text-[var(--color-brand)]" />
-                      <h3 className="text-lg font-semibold text-[var(--color-text-primary)]" style={{ fontFamily: 'var(--font-headline)' }}>
-                        {t('settings.agents.browserTitle')}
-                      </h3>
-                    </div>
-                  </div>
-                  {/* Column count follows the track width, not the viewport: `sm:grid-cols-3`
-                      kept forcing three columns into a 320px column and clipped the CJK labels. */}
-                  <div className="grid min-w-0 grid-cols-[repeat(auto-fit,minmax(116px,1fr))] gap-3">
-                    <SummaryCard label={t('settings.agents.summary.totalAgents')} value={String(allAgents.length)} icon={<Bot size={14} />} />
-                    <SummaryCard label={t('settings.agents.summary.activeAgents')} value={String(activeAgents.length)} icon={<Bolt size={14} />} />
-                    <SummaryCard label={t('settings.agents.summary.sources')} value={String(sourceCount)} icon={<Layers size={14} />} />
-                  </div>
-                </div>
-              </section>
-
-              <div className={`grid gap-4 ${sourceCount >= 2 ? 'xl:grid-cols-2' : ''}`}>
-                {AGENT_SOURCE_ORDER.map((source) => {
-                  const group = groupedAgents[source]
-                  if (!group?.length) return null
-                  const sourceLabel = t(`settings.agents.source.${source}`)
-                  return (
-                    <section key={source} className="min-w-0 overflow-hidden rounded-[var(--radius-2xl)] border border-[var(--color-border)] bg-[var(--color-surface)]">
-                      <div className="border-b border-[var(--color-border)] bg-[var(--color-surface-container-low)] px-5 py-4">
-                        <div className="mb-1 flex flex-wrap items-center gap-2">
-                          <span className={`inline-flex h-7 w-7 items-center justify-center rounded-full ${getAgentSourceAccentClass(source)}`}>
-                            {getAgentSourceIcon(source)}
-                          </span>
-                          <h4 className="text-sm font-semibold text-[var(--color-text-primary)]">{sourceLabel}</h4>
-                          <span className="text-xs text-[var(--color-text-tertiary)]">{group.length}</span>
-                        </div>
-                        <p className="text-xs leading-5 text-[var(--color-text-tertiary)]">
-                          {t('settings.agents.groupHint', { source: sourceLabel, count: String(group.length) })}
-                        </p>
-                      </div>
-                      <div className="flex flex-col p-2">
-                        {group.map((agent, index) => (
-                          // A row is a div, not a button: the actions on the
-                          // right have to be siblings of the primary control,
-                          // never nested inside it.
-                          <div
-                            key={`${agent.source}-${agent.agentType}-${agent.target ?? agent.baseDir ?? index}`}
-                            className="group flex items-start gap-1 rounded-[var(--radius-xl)] border border-transparent px-3 py-3 transition-all hover:border-[var(--color-border-focus)] hover:bg-[var(--color-surface-hover)]"
-                          >
-                            <button
-                              type="button"
-                              onClick={() => selectAgent(agent, 'agents')}
-                              className="min-w-0 flex-1 rounded-[var(--radius-lg)] text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-brand)]"
-                            >
-                            <div className="flex items-start gap-3">
-                              <Bot size={18} className="mt-0.5 shrink-0" style={{ color: getAgentDotColor(agent.color) }} />
-                              <div className="min-w-0 flex-1">
-                                <div className="flex flex-wrap items-center gap-2">
-                                  <span className="break-all font-mono text-[13px] font-semibold text-[var(--color-text-primary)]">{agent.agentType}</span>
-                                  {agent.modelDisplay && <MetaPill>{agent.modelDisplay}</MetaPill>}
-                                  {agent.effort !== undefined && <MetaPill>{agent.effort}</MetaPill>}
-                                  <MetaPill>{sourceLabel}</MetaPill>
-                                  <Badge
-                                    tone={agent.isActive ? 'success' : 'neutral'}
-                                    size="md"
-                                    bordered
-                                    className="uppercase tracking-[0.12em]"
-                                  >
-                                    {agent.isActive ? t('settings.agents.status.active') : t('settings.agents.status.available')}
-                                  </Badge>
-                                  {agent.overriddenBy && (
-                                    <MetaPill>{t('settings.agents.overriddenBy', { source: t(`settings.agents.source.${agent.overriddenBy}`) })}</MetaPill>
-                                  )}
-                                </div>
-                                <div className="mt-1 break-words text-xs leading-5 text-[var(--color-text-secondary)] [&_.prose]:text-xs [&_.prose]:leading-5 [&_.prose]:text-[var(--color-text-secondary)]">
-                                  <MarkdownRenderer content={agent.description || t('settings.agents.noDescription')} />
-                                </div>
-                                <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-[11px] text-[var(--color-text-tertiary)]">
-                                  <span>{agent.tools === undefined
-                                    ? t('settings.agents.noTools')
-                                    : agent.tools.length === 0
-                                      ? t('settings.agents.disabledTools')
-                                      : t('settings.agents.toolCount', { count: String(agent.tools.length) })}</span>
-                                  {(agent.target || agent.baseDir) && <span className="break-all font-mono">{agent.target || agent.baseDir}</span>}
-                                </div>
-                              </div>
-                            </div>
-                            </button>
-                            <AgentRowActions
-                              agent={agent}
-                              onEdit={() => setFormState({ mode: 'edit', agent })}
-                              onDelete={() => setDeleteTarget(agent)}
-                              onOverride={() => setOverrideTarget(agent)}
-                            />
-                          </div>
-                        ))}
-                      </div>
-                    </section>
-                  )
-                })}
-              </div>
+            <div className="mt-7">
+              <LoadingState label={t('common.loading')} labelHidden size="md" />
             </div>
+          ) : error ? (
+            <div className="mt-7">
+              <ErrorState
+                title={t('settings.agents.loadError')}
+                onRetry={() => void fetchAgents(agentContextPath)}
+                retryLabel={t('common.retry')}
+                size="lg"
+              />
+            </div>
+          ) : allAgents.length === 0 ? (
+            <div className="mt-7">
+              <EmptyState
+                icon={<Bot size={20} strokeWidth={1.75} />}
+                title={t('settings.agents.empty')}
+                description={t('settings.agents.emptyHint')}
+                size="md"
+              />
+            </div>
+          ) : (
+            <>
+              <div className="mt-6 grid min-w-0 grid-cols-3 gap-3">
+                <SettingsStat label={t('settings.agents.summary.totalAgents')} value={String(allAgents.length)} />
+                <SettingsStat label={t('settings.agents.summary.activeAgents')} value={String(activeAgents.length)} />
+                <SettingsStat label={t('settings.agents.summary.sources')} value={String(sourceCount)} />
+              </div>
+
+              {AGENT_SOURCE_ORDER.map((source) => {
+                const group = groupedAgents[source]
+                if (!group?.length) return null
+                const sourceLabel = t(`settings.agents.source.${source}`)
+                return (
+                  <SettingsSection
+                    key={source}
+                    title={(
+                      <span className="inline-flex items-center gap-1.5">
+                        <span aria-hidden="true" className="text-[var(--color-text-tertiary)]">{getAgentSourceIcon(source)}</span>
+                        <span>{sourceLabel}</span>
+                        <span className="font-normal tabular-nums text-[var(--color-text-tertiary)]">{group.length}</span>
+                      </span>
+                    )}
+                  >
+                    <SettingsGroup>
+                      {group.map((agent, index) => (
+                        // A row is a div, not a button: the actions on the
+                        // right have to be siblings of the primary control,
+                        // never nested inside it.
+                        <div
+                          key={`${agent.source}-${agent.agentType}-${agent.target ?? agent.baseDir ?? index}`}
+                          className="group flex min-h-[52px] items-start gap-2 px-4 py-3 transition-colors duration-150 first:rounded-t-[var(--radius-lg)] last:rounded-b-[var(--radius-lg)] hover:bg-[var(--color-surface-hover)]"
+                        >
+                          <button
+                            type="button"
+                            onClick={() => selectAgent(agent, 'agents')}
+                            className="flex min-w-0 flex-1 items-start gap-3 rounded-[var(--radius-sm)] text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]"
+                          >
+                            <span
+                              aria-hidden="true"
+                              className="flex h-7 w-7 shrink-0 items-center justify-center rounded-[var(--radius-md)] bg-[var(--color-surface-container)]"
+                            >
+                              <Bot size={16} strokeWidth={1.75} style={{ color: getAgentDotColor(agent.color) }} />
+                            </span>
+                            <span className="block min-w-0 flex-1">
+                              <span className="flex flex-wrap items-center gap-1.5">
+                                <span className="break-all font-mono text-[13px] font-medium text-[var(--color-text-primary)]">{agent.agentType}</span>
+                                {agent.modelDisplay && <MetaPill mono>{agent.modelDisplay}</MetaPill>}
+                                {agent.effort !== undefined && <MetaPill>{agent.effort}</MetaPill>}
+                                <Badge tone={agent.isActive ? 'success' : 'neutral'}>
+                                  {agent.isActive ? t('settings.agents.status.active') : t('settings.agents.status.available')}
+                                </Badge>
+                                {agent.overriddenBy && (
+                                  <MetaPill>{t('settings.agents.overriddenBy', { source: t(`settings.agents.source.${agent.overriddenBy}`) })}</MetaPill>
+                                )}
+                              </span>
+                              <span className="mt-1 block break-words text-xs leading-[1.5] text-[var(--color-text-secondary)] [&_.prose]:text-xs [&_.prose]:leading-[1.5] [&_.prose]:text-[var(--color-text-secondary)]">
+                                <MarkdownRenderer content={agent.description || t('settings.agents.noDescription')} />
+                              </span>
+                              <span className="mt-1.5 flex flex-wrap items-center gap-x-3 gap-y-1 text-[11px] text-[var(--color-text-tertiary)]">
+                                <span>{agent.tools === undefined
+                                  ? t('settings.agents.noTools')
+                                  : agent.tools.length === 0
+                                    ? t('settings.agents.disabledTools')
+                                    : t('settings.agents.toolCount', { count: String(agent.tools.length) })}</span>
+                                {(agent.target || agent.baseDir) && <span className="break-all font-mono">{agent.target || agent.baseDir}</span>}
+                              </span>
+                            </span>
+                          </button>
+                          <AgentRowActions
+                            agent={agent}
+                            onEdit={() => setFormState({ mode: 'edit', agent })}
+                            onDelete={() => setDeleteTarget(agent)}
+                            onOverride={() => setOverrideTarget(agent)}
+                          />
+                        </div>
+                      ))}
+                    </SettingsGroup>
+                  </SettingsSection>
+                )
+              })}
+            </>
           )}
         </>
       )}
@@ -384,101 +381,121 @@ function AgentDetailView({
   const editable = isEditableAgent(agent)
   const inherited = t('settings.agents.detail.inherit')
 
+  const toolSummary = agent.tools === undefined
+    ? t('settings.agents.noTools')
+    : agent.tools.length === 0
+      ? t('settings.agents.disabledTools')
+      : t('settings.agents.toolCount', { count: String(agent.tools.length) })
+
   return (
-    <div className="flex h-full min-w-0 flex-col gap-4">
+    <div className="min-w-0">
       <div className="flex flex-wrap items-center justify-between gap-3">
-        <Button variant="ghost" size="sm" icon={<ArrowLeft size={16} />} onClick={onBack}>
+        <Button variant="ghost" size="base" className="-ml-3" icon={<ArrowLeft size={14} strokeWidth={1.75} />} onClick={onBack}>
           {t('settings.agents.backToList')}
         </Button>
         {editable ? (
           <div className="flex items-center gap-2">
-            <Button variant="secondary" size="sm" icon={<Pencil size={14} />} onClick={onEdit}>
+            <Button variant="secondary" size="base" icon={<Pencil size={14} strokeWidth={1.75} />} onClick={onEdit}>
               {t('settings.agents.edit')}
             </Button>
-            <Button variant="danger" size="sm" icon={<Trash2 size={14} />} onClick={onDelete}>
+            <Button variant="danger-ghost" size="base" icon={<Trash2 size={14} strokeWidth={1.75} />} onClick={onDelete}>
               {t('settings.agents.delete')}
             </Button>
           </div>
         ) : (
           <div className="flex items-center gap-2">
             {agent.overridable && (
-              <Button variant="secondary" size="sm" icon={<Bolt size={14} />} onClick={onOverride}>
+              <Button variant="secondary" size="base" icon={<Bolt size={14} strokeWidth={1.75} />} onClick={onOverride}>
                 {t('settings.agents.override')}
               </Button>
             )}
             {/* Kept alongside the button: the prompt and tools really are fixed,
                 and only the model and effort are not. */}
-            <MetaPill><LockKeyhole size={11} /> {t('settings.agents.readOnly')}</MetaPill>
+            <Badge tone="neutral" icon={<LockKeyhole size={11} strokeWidth={2} aria-hidden="true" />}>
+              {t('settings.agents.readOnly')}
+            </Badge>
           </div>
         )}
       </div>
 
-      <section className="overflow-hidden rounded-[var(--radius-2xl)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)]">
-        <div className="grid gap-4 px-5 py-5 lg:grid-cols-[minmax(0,1.4fr)_minmax(340px,1fr)] lg:items-start">
-          <div className="min-w-0">
-            <div className="mb-2 text-[11px] font-semibold uppercase tracking-[0.2em] text-[var(--color-text-tertiary)]">{t('settings.agents.entryEyebrow')}</div>
-            <div className="mb-2 flex flex-wrap items-center gap-2">
-              <span className="h-3 w-3 shrink-0 rounded-full" style={{ backgroundColor: getAgentDotColor(agent.color) }} />
-              <h3 className="break-all text-[22px] font-semibold leading-tight text-[var(--color-text-primary)]" style={{ fontFamily: 'var(--font-headline)' }}>{agent.agentType}</h3>
-              <MetaPill>{sourceLabel}</MetaPill>
-              <MetaPill>{agent.isActive ? t('settings.agents.status.active') : t('settings.agents.status.available')}</MetaPill>
-              {agent.overriddenBy && (
-                <MetaPill>{t('settings.agents.overriddenByShort', { source: t(`settings.agents.source.${agent.overriddenBy}`) })}</MetaPill>
-              )}
-            </div>
-            <div className="max-w-4xl text-sm leading-6 text-[var(--color-text-secondary)]">
-              <MarkdownRenderer content={agent.description || t('settings.agents.noDescription')} />
-            </div>
-          </div>
-          <div className="grid grid-cols-2 gap-3">
-            <DetailStat label={t('settings.agents.detail.configuredModel')} value={agent.model || inherited} icon={<Braces size={14} />} />
-            <DetailStat label={t('settings.agents.detail.configuredEffort')} value={agent.effort === undefined ? inherited : String(agent.effort)} icon={<Hammer size={14} />} />
-            <DetailStat
-              label={t('settings.agents.summary.tools')}
-              value={agent.tools === undefined
-                ? t('settings.agents.noTools')
-                : agent.tools.length === 0
-                  ? t('settings.agents.disabledTools')
-                  : t('settings.agents.toolCount', { count: String(agent.tools.length) })}
-              icon={<Wrench size={14} />}
-            />
-            <p className="col-span-2 text-xs leading-5 text-[var(--color-text-tertiary)]">
-              {t('settings.agents.detail.effortHint')}
-            </p>
-          </div>
+      {/* The agent's own page header: same 22px title as every settings pane. */}
+      <header className="mt-5">
+        <div className="flex min-w-0 items-center gap-2.5">
+          <span
+            aria-hidden="true"
+            className="h-2.5 w-2.5 shrink-0 rounded-full"
+            style={{ backgroundColor: getAgentDotColor(agent.color) }}
+          />
+          <h2 className="min-w-0 break-all text-[22px] font-semibold leading-tight tracking-[-0.015em] text-[var(--color-text-primary)]">
+            {agent.agentType}
+          </h2>
         </div>
-      </section>
+        <div className="mt-2 flex flex-wrap items-center gap-1.5">
+          <MetaPill>{sourceLabel}</MetaPill>
+          <Badge tone={agent.isActive ? 'success' : 'neutral'}>
+            {agent.isActive ? t('settings.agents.status.active') : t('settings.agents.status.available')}
+          </Badge>
+          {agent.overriddenBy && (
+            <MetaPill>{t('settings.agents.overriddenByShort', { source: t(`settings.agents.source.${agent.overriddenBy}`) })}</MetaPill>
+          )}
+        </div>
+        <div className="mt-2 text-[13px] leading-5 text-[var(--color-text-tertiary)] [&_.prose]:text-[13px] [&_.prose]:leading-5 [&_.prose]:text-[var(--color-text-tertiary)]">
+          <MarkdownRenderer content={agent.description || t('settings.agents.noDescription')} />
+        </div>
+      </header>
 
-      {agent.tools && agent.tools.length > 0 && (
-        <section className="rounded-[var(--radius-2xl)] border border-[var(--color-border)] bg-[var(--color-surface)] px-5 py-4">
-          <div className="mb-3 flex items-center gap-2">
-            <Wrench size={18} className="text-[var(--color-text-tertiary)]" />
-            <h4 className="text-sm font-semibold text-[var(--color-text-primary)]">{t('settings.agents.tools')}</h4>
-          </div>
-          <div className="flex flex-wrap gap-2">{agent.tools.map((tool) => <MetaPill key={tool}>{tool}</MetaPill>)}</div>
-        </section>
-      )}
-
-      <section className="flex min-h-0 min-w-0 flex-1 overflow-hidden rounded-[var(--radius-2xl)] border border-[var(--color-border)] bg-[var(--color-surface)]">
-        <div className="flex min-w-0 flex-1 flex-col overflow-hidden">
-          <div className="flex flex-wrap items-center justify-between gap-2 border-b border-[var(--color-border)] bg-[var(--color-surface-container-low)] px-4 py-3">
-            <div className="min-w-0">
-              <div className="break-all font-mono text-xs text-[var(--color-text-secondary)]">{agent.target || agent.baseDir || sourceLabel}</div>
-              <div className="mt-1 text-[11px] text-[var(--color-text-tertiary)]">{t('settings.agents.promptHint')}</div>
-            </div>
-            <MetaPill>{t('settings.agents.systemPrompt')}</MetaPill>
-          </div>
-          <div className="min-h-0 flex-1 overflow-y-auto bg-[var(--color-surface-container-lowest)]">
-            {agent.systemPrompt ? (
-              <div className="px-6 py-5 lg:px-8">
-                <MarkdownRenderer content={agent.systemPrompt} variant="document" className="mx-auto max-w-[72ch]" />
+      <SettingsSection title={t('settings.agents.entryEyebrow')}>
+        <SettingsGroup>
+          <SettingsRow title={t('settings.agents.detail.configuredModel')} layout="inline">
+            <span className="break-all font-mono text-xs text-[var(--color-text-secondary)]">{agent.model || inherited}</span>
+          </SettingsRow>
+          <SettingsRow
+            title={t('settings.agents.detail.configuredEffort')}
+            description={t('settings.agents.detail.effortHint')}
+            layout="inline"
+          >
+            <span className="font-mono text-xs text-[var(--color-text-secondary)]">
+              {agent.effort === undefined ? inherited : String(agent.effort)}
+            </span>
+          </SettingsRow>
+          <SettingsRow
+            title={t('settings.agents.summary.tools')}
+            layout="inline"
+            footer={agent.tools && agent.tools.length > 0 ? (
+              <div role="list" aria-label={t('settings.agents.tools')} className="flex flex-wrap gap-1.5">
+                {agent.tools.map((tool) => (
+                  <span
+                    key={tool}
+                    role="listitem"
+                    className="inline-flex h-6 items-center rounded-[var(--radius-xs)] bg-[var(--color-surface-container)] px-2 font-mono text-[11px] text-[var(--color-text-secondary)]"
+                  >
+                    {tool}
+                  </span>
+                ))}
               </div>
-            ) : (
-              <div className="px-6 py-10 text-center text-sm text-[var(--color-text-tertiary)]">{t('settings.agents.noSystemPrompt')}</div>
-            )}
+            ) : undefined}
+          >
+            <span className="text-xs text-[var(--color-text-secondary)]">{toolSummary}</span>
+          </SettingsRow>
+        </SettingsGroup>
+      </SettingsSection>
+
+      <SettingsSection title={t('settings.agents.systemPrompt')} description={t('settings.agents.promptHint')}>
+        <div className="min-w-0 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)]">
+          <div className="flex min-h-9 items-center border-b border-[var(--color-border)] px-4 py-2">
+            <span className="min-w-0 break-all font-mono text-[11px] text-[var(--color-text-tertiary)]">
+              {agent.target || agent.baseDir || sourceLabel}
+            </span>
           </div>
+          {agent.systemPrompt ? (
+            <div className="px-6 py-5">
+              <MarkdownRenderer content={agent.systemPrompt} variant="document" className="mx-auto max-w-[72ch]" />
+            </div>
+          ) : (
+            <div className="px-6 py-10 text-center text-[13px] text-[var(--color-text-tertiary)]">{t('settings.agents.noSystemPrompt')}</div>
+          )}
         </div>
-      </section>
+      </SettingsSection>
     </div>
   )
 }
@@ -615,8 +632,8 @@ function AgentFormModal({
         <Field label={t('settings.agents.form.scope')} error={fieldErrors.scope} required>
           <div className="grid grid-cols-2 gap-2" role="group" aria-label={t('settings.agents.form.scope')}>
             {([
-              { value: 'user' as const, label: t('settings.agents.form.scopeUser'), icon: <User size={16} /> },
-              { value: 'project' as const, label: t('settings.agents.form.scopeProject'), icon: <Folder size={16} /> },
+              { value: 'user' as const, label: t('settings.agents.form.scopeUser'), icon: <User size={16} strokeWidth={1.75} /> },
+              { value: 'project' as const, label: t('settings.agents.form.scopeProject'), icon: <Folder size={16} strokeWidth={1.75} /> },
             ]).map((option) => {
               const selected = scope === option.value
               return (
@@ -626,27 +643,38 @@ function AgentFormModal({
                   aria-pressed={selected}
                   disabled={mode === 'edit'}
                   onClick={() => setScope(option.value)}
-                  className={`flex min-h-16 items-center gap-3 rounded-[var(--radius-lg)] border px-4 py-3 text-left transition-colors disabled:cursor-not-allowed disabled:opacity-60 ${
+                  // The option-card selection of the spec: terracotta outline
+                  // over the faintest terracotta wash, never a filled block.
+                  className={cx(
+                    'flex h-12 items-center gap-2.5 rounded-[var(--radius-md)] border px-3 text-left transition-colors',
+                    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]',
+                    'disabled:cursor-not-allowed disabled:opacity-60',
                     selected
-                      ? 'border-[var(--color-border-focus)] bg-[var(--color-surface-selected)] text-[var(--color-text-primary)]'
-                      : 'border-[var(--color-border)] bg-[var(--color-surface)] text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-hover)]'
-                  }`}
+                      ? 'border-[var(--color-brand)] bg-[var(--color-brand-soft)] text-[var(--color-text-primary)]'
+                      : 'border-[var(--color-border)] bg-[var(--color-surface)] text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-hover)]',
+                  )}
                 >
-                  <span className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-full ${
-                    selected ? 'bg-[var(--color-primary-fixed)] text-[var(--color-brand)]' : 'bg-[var(--color-surface-container-high)]'
-                  }`}>
+                  <span
+                    aria-hidden="true"
+                    className={cx(
+                      'flex h-7 w-7 shrink-0 items-center justify-center rounded-[var(--radius-sm)]',
+                      selected
+                        ? 'bg-[var(--color-surface-container-lowest)] text-[var(--color-brand)]'
+                        : 'bg-[var(--color-surface-container)] text-[var(--color-text-tertiary)]',
+                    )}
+                  >
                     {option.icon}
                   </span>
-                  <span className="text-sm font-semibold">{option.label}</span>
+                  <span className="text-[13px] font-medium">{option.label}</span>
                 </button>
               )
             })}
           </div>
           {scope === 'project' && (
-            <div className="mt-2 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)] px-4 py-3">
+            <div className="mt-2 rounded-[var(--radius-md)] bg-[var(--color-surface-container)] px-3 py-2.5">
               <div className="flex flex-wrap items-center justify-between gap-3">
                 <div className="min-w-0">
-                  <p className="text-sm font-medium text-[var(--color-text-primary)]">
+                  <p className="break-all text-[13px] text-[var(--color-text-secondary)]">
                     {projectPath
                       ? t('settings.agents.form.projectTarget', { path: projectPath })
                       : t('settings.agents.form.projectUnavailable')}
@@ -689,7 +717,11 @@ function AgentFormModal({
             rows={7}
             placeholder={t('settings.agents.form.systemPromptPlaceholder')}
             onChange={(event) => setSystemPrompt(event.target.value)}
-            className={`${textAreaClassName} ${fieldErrors.systemPrompt ? 'border-[var(--color-error)]' : ''}`}
+            className={cx(
+              FIELD_BASE_CLASSES,
+              'min-h-32 resize-y px-2.5 py-2 text-[13px] leading-6',
+              fieldStateClasses(Boolean(fieldErrors.systemPrompt)),
+            )}
           />
         </Field>
 
@@ -815,17 +847,19 @@ function ToolPicker({
   }
 
   return (
-    <div className="rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)] p-3">
+    // A sunken well with no border of its own: the tool cards inside carry the
+    // only hairline, so the dialog never stacks border inside border.
+    <div className="rounded-[var(--radius-lg)] bg-[var(--color-surface-container)] p-3">
       <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
         <div>
-          <p className="text-sm font-semibold text-[var(--color-text-primary)]">
+          <p className="text-[13px] font-medium text-[var(--color-text-primary)]">
             {t('settings.agents.form.builtInTools')}
           </p>
           <p className="mt-0.5 text-xs text-[var(--color-text-tertiary)]">
             {t('settings.agents.form.builtInToolsHint')}
           </p>
         </div>
-        <Badge tone="brand" size="md">
+        <Badge tone="neutral" className="tabular-nums">
           {t('settings.agents.form.toolsSelectedCount', { count: selectedTools.length })}
         </Badge>
       </div>
@@ -846,7 +880,7 @@ function ToolPicker({
           <div className="max-h-64 space-y-3 overflow-y-auto pr-1">
             {groupedTools.map(({ category, tools }) => (
               <section key={category} aria-label={t(`settings.agents.form.toolCategory.${category}`)}>
-                <h4 className="mb-1.5 text-[11px] font-semibold uppercase tracking-wider text-[var(--color-text-tertiary)]">
+                <h4 className="mb-1.5 text-xs font-semibold text-[var(--color-text-tertiary)]">
                   {t(`settings.agents.form.toolCategory.${category}`)}
                 </h4>
                 <div className="grid gap-2 sm:grid-cols-2">
@@ -861,21 +895,27 @@ function ToolPicker({
                         aria-checked={selected}
                         aria-label={`${tool} — ${description}`}
                         onClick={() => toggleTool(tool)}
-                        className={`flex min-h-14 items-start gap-2.5 rounded-[var(--radius-md)] border px-3 py-2.5 text-left transition-colors ${
+                        className={cx(
+                          'flex min-h-14 items-start gap-2.5 rounded-[var(--radius-md)] border px-3 py-2.5 text-left transition-colors',
+                          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]',
                           selected
-                            ? 'border-[var(--color-border-focus)] bg-[var(--color-surface-selected)]'
-                            : 'border-[var(--color-border)] bg-[var(--color-surface)] hover:bg-[var(--color-surface-hover)]'
-                        }`}
+                            ? 'border-[var(--color-brand)] bg-[var(--color-brand-soft)]'
+                            : 'border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] hover:bg-[var(--color-surface-hover)]',
+                        )}
                       >
-                        <span className={`mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded border ${
-                          selected
-                            ? 'border-[var(--color-brand)] bg-[var(--color-brand)] text-white'
-                            : 'border-[var(--color-outline)] bg-[var(--color-surface)]'
-                        }`}>
-                          {selected && <Check size={12} strokeWidth={3} />}
+                        <span
+                          aria-hidden="true"
+                          className={cx(
+                            'mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-[var(--radius-xs)] border',
+                            selected
+                              ? 'border-[var(--color-brand)] bg-[var(--color-brand)] text-[var(--color-on-primary)]'
+                              : 'border-[var(--color-border-strong)] bg-[var(--color-surface-container-lowest)]',
+                          )}
+                        >
+                          {selected && <Check size={12} strokeWidth={2.5} />}
                         </span>
                         <span className="min-w-0">
-                          <span className="block font-mono text-xs font-semibold text-[var(--color-text-primary)]">{tool}</span>
+                          <span className="block font-mono text-xs font-medium text-[var(--color-text-primary)]">{tool}</span>
                           <span className="mt-0.5 block text-[11px] leading-4 text-[var(--color-text-tertiary)]">{description}</span>
                         </span>
                       </button>
@@ -895,7 +935,7 @@ function ToolPicker({
         <EmptyState description={t('settings.agents.form.toolsUnavailable')} variant="dashed" size="sm" />
       )}
 
-      <div className="mt-3 border-t border-[var(--color-border)] pt-3">
+      <div className="mt-3 border-t border-[var(--color-border-separator)] pt-3">
         <Input
           label={t('settings.agents.form.toolsCustomLabel')}
           value={customTools}
@@ -1070,7 +1110,7 @@ function BuiltInAgentOverrideModal({
     >
       <div className="space-y-4">
         <div className="flex flex-wrap items-center gap-2">
-          <span className="break-all font-mono text-sm font-semibold text-[var(--color-text-primary)]">
+          <span className="break-all font-mono text-[13px] font-medium text-[var(--color-text-primary)]">
             {agent.agentType}
           </span>
           <MetaPill>{t('settings.agents.source.built-in')}</MetaPill>
@@ -1080,14 +1120,14 @@ function BuiltInAgentOverrideModal({
         {agent.overriddenBy && (
           // Editing a built-in that a same-named user agent shadows would look
           // like it worked and change nothing at spawn time.
-          <p role="status" className="rounded-[var(--radius-lg)] bg-[var(--color-warning-container)] px-3 py-2 text-xs leading-5 text-[var(--color-text-primary)]">
+          <p role="status" className="rounded-[var(--radius-md)] bg-[var(--color-warning-container)] px-3 py-2 text-xs leading-5 text-[var(--color-on-warning-container)]">
             {t('settings.agents.overrideShadowed', {
               source: t(`settings.agents.source.${agent.overriddenBy}`),
             })}
           </p>
         )}
         {isManaged && (
-          <p role="status" className="rounded-[var(--radius-lg)] bg-[var(--color-surface-container-low)] px-3 py-2 text-xs leading-5 text-[var(--color-text-secondary)]">
+          <p role="status" className="rounded-[var(--radius-md)] bg-[var(--color-surface-container)] px-3 py-2 text-xs leading-5 text-[var(--color-text-secondary)]">
             {t('settings.agents.overrideManaged', {
               source: t(`settings.agents.source.${overrideSource}`),
             })}
@@ -1129,7 +1169,7 @@ function BuiltInAgentOverrideModal({
         <p className="text-xs leading-5 text-[var(--color-text-tertiary)]">
           {t('settings.agents.overrideScopeHint')}
         </p>
-        {submitError && <p role="alert" className="text-sm text-[var(--color-error)]">{submitError}</p>}
+        {submitError && <p role="alert" className="text-[13px] text-[var(--color-error)]">{submitError}</p>}
       </div>
     </Modal>
   )
@@ -1173,7 +1213,7 @@ function AgentRowActions({
           <IconButton
             size="sm"
             tone="muted"
-            icon={<Pencil size={14} />}
+            icon={<Pencil size={14} strokeWidth={1.75} />}
             label={t('settings.agents.rowEdit', { name: agent.agentType })}
             onClick={onEdit}
           />
@@ -1182,7 +1222,7 @@ function AgentRowActions({
             tone="muted"
             // A delete icon that sits red at rest reads as an error state.
             hoverTone="danger"
-            icon={<Trash2 size={14} />}
+            icon={<Trash2 size={14} strokeWidth={1.75} />}
             label={t('settings.agents.rowDelete', { name: agent.agentType })}
             onClick={onDelete}
           />
@@ -1193,7 +1233,7 @@ function AgentRowActions({
         <IconButton
           size="sm"
           tone="muted"
-          icon={<Bolt size={14} />}
+          icon={<Bolt size={14} strokeWidth={1.75} />}
           label={t('settings.agents.rowOverride', { name: agent.agentType })}
           onClick={onOverride}
         />
@@ -1245,8 +1285,9 @@ function getAgentDotColor(color?: string) {
   return color && AGENT_COLORS[color] ? AGENT_COLORS[color] : 'var(--color-text-tertiary)'
 }
 
+/** The 14px glyph beside a source section's label. */
 function getAgentSourceIcon(source: AgentSource) {
-  const iconProps = { size: 16 }
+  const iconProps = { size: 14, strokeWidth: 1.75 }
   switch (source) {
     case 'userSettings': return <User {...iconProps} />
     case 'projectSettings': return <Folder {...iconProps} />
@@ -1258,18 +1299,6 @@ function getAgentSourceIcon(source: AgentSource) {
   }
 }
 
-function getAgentSourceAccentClass(source: AgentSource) {
-  switch (source) {
-    case 'userSettings': return 'bg-[var(--color-primary-fixed)] text-[var(--color-brand)]'
-    case 'projectSettings': return 'bg-[var(--color-success-container)] text-[var(--color-success)]'
-    case 'localSettings': return 'bg-[var(--color-info-container)] text-[var(--color-info)]'
-    case 'policySettings': return 'bg-[var(--color-warning-container)] text-[var(--color-on-warning-container)]'
-    case 'plugin': return 'bg-[var(--color-warning-container)] text-[var(--color-on-warning-container)]'
-    case 'flagSettings': return 'bg-[var(--color-error-container)] text-[var(--color-on-error-container)]'
-    case 'built-in': return 'bg-[var(--color-surface-container-high)] text-[var(--color-text-tertiary)]'
-  }
-}
-
 function AgentModelSelector({
   label,
   value,
@@ -1384,38 +1413,13 @@ function Field({ label, error, required, children }: { label: string; error?: st
 }
 
 /**
- * The agent metadata chip.
- *
- * `bordered` is what makes this expressible as a `Badge`: these pills carry
- * both a fill and a hairline border, and they sit on three different
- * backgrounds (`--color-surface` cards, `--color-surface-container-low`
- * headers, and the bare page). A plain `outline` badge would collapse into the
- * card on the first of those.
+ * The agent metadata chip: an 11px neutral pill in sentence case. `mono` is for
+ * model ids, which are identifiers rather than words.
  */
-function MetaPill({ children }: { children: ReactNode }) {
+function MetaPill({ children, mono = false }: { children: ReactNode; mono?: boolean }) {
   return (
-    <Badge tone="neutral" size="md" bordered className="uppercase tracking-[0.12em]">
+    <Badge tone="neutral" mono={mono}>
       {children}
     </Badge>
   )
 }
-
-function SummaryCard({ label, value, icon, className = '' }: { label: string; value: string; icon: ReactNode; className?: string }) {
-  return (
-    <div className={`min-w-0 rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface)] px-3 py-3 ${className}`}>
-      <div className="flex min-w-0 items-center gap-1.5 text-[11px] uppercase tracking-[0.12em] text-[var(--color-text-tertiary)]">{icon}<span className="truncate">{label}</span></div>
-      <div className="mt-2 truncate text-lg font-semibold text-[var(--color-text-primary)]">{value}</div>
-    </div>
-  )
-}
-
-function DetailStat({ label, value, icon }: { label: string; value: string; icon: ReactNode }) {
-  return (
-    <div className="rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface)] px-3 py-3">
-      <div className="flex items-center gap-2 text-[11px] uppercase tracking-[0.16em] text-[var(--color-text-tertiary)]">{icon}<span>{label}</span></div>
-      <div className="mt-2 break-all text-base font-semibold text-[var(--color-text-primary)]">{value}</div>
-    </div>
-  )
-}
-
-const textAreaClassName = 'min-h-32 resize-y rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] px-3 py-2 text-sm text-[var(--color-text-primary)] outline-none placeholder:text-[var(--color-text-tertiary)] focus:border-[var(--color-border-focus)] focus:shadow-[var(--shadow-focus-ring)]'
diff --git a/desktop/src/components/settings/CcSwitchImportModal.tsx b/desktop/src/components/settings/CcSwitchImportModal.tsx
index 6505c7f5..9bdf7d44 100644
--- a/desktop/src/components/settings/CcSwitchImportModal.tsx
+++ b/desktop/src/components/settings/CcSwitchImportModal.tsx
@@ -1,6 +1,7 @@
 // desktop/src/components/settings/CcSwitchImportModal.tsx
 
 import { useCallback, useEffect, useMemo, useState } from 'react'
+import { FolderX, Inbox } from 'lucide-react'
 import { Badge } from '@/components/ui/Badge'
 import { Button } from '@/components/ui/Button'
 import { Checkbox } from '@/components/ui/Checkbox'
@@ -175,7 +176,7 @@ export function CcSwitchImportModal({ open, onClose }: CcSwitchImportModalProps)
         <div className="flex flex-col items-center gap-2">
           <EmptyState
             className="w-full"
-            icon={<span className="material-symbols-outlined text-[20px]">folder_off</span>}
+            icon={<FolderX size={20} strokeWidth={1.75} aria-hidden="true" />}
             title={t('settings.providers.ccSwitch.unavailableTitle')}
             description={t(UNAVAILABLE_KEYS[scan.reason ?? 'not-found'])}
             action={{ label: t('common.retry'), onClick: () => void runScan() }}
@@ -190,7 +191,7 @@ export function CcSwitchImportModal({ open, onClose }: CcSwitchImportModalProps)
         <div className="flex flex-col items-center gap-2">
           <EmptyState
             className="w-full"
-            icon={<span className="material-symbols-outlined text-[20px]">inbox</span>}
+            icon={<Inbox size={20} strokeWidth={1.75} aria-hidden="true" />}
             title={t('settings.providers.ccSwitch.emptyTitle')}
             description={t('settings.providers.ccSwitch.emptyDesc')}
             action={{ label: t('common.retry'), onClick: () => void runScan() }}
@@ -202,7 +203,7 @@ export function CcSwitchImportModal({ open, onClose }: CcSwitchImportModalProps)
 
     return (
       <div className="flex flex-col gap-3">
-        <p className="text-xs leading-5 text-[var(--color-text-secondary)]">
+        <p className="text-[13px] leading-5 text-[var(--color-text-secondary)]">
           {t('settings.providers.ccSwitch.description')}
         </p>
 
@@ -223,13 +224,13 @@ export function CcSwitchImportModal({ open, onClose }: CcSwitchImportModalProps)
           </div>
         </div>
 
-        <ul className="flex flex-col gap-1.5">
+        <ul className="divide-y divide-[var(--color-border)] rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)]">
           {candidates.map((candidate) => (
             <li
               key={candidate.sourceId}
               data-testid={`cc-switch-candidate-${candidate.sourceId}`}
               className={cx(
-                'rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface)] px-3 py-2.5',
+                'px-3.5 py-3',
                 !candidate.importable && 'opacity-60',
               )}
             >
diff --git a/desktop/src/components/settings/ChatGPTOfficialLogin.tsx b/desktop/src/components/settings/ChatGPTOfficialLogin.tsx
index 23441a17..43e43148 100644
--- a/desktop/src/components/settings/ChatGPTOfficialLogin.tsx
+++ b/desktop/src/components/settings/ChatGPTOfficialLogin.tsx
@@ -1,7 +1,7 @@
 // desktop/src/components/settings/ChatGPTOfficialLogin.tsx
 
 import { useEffect, useState } from 'react'
-import { Copy, LogIn, LogOut } from 'lucide-react'
+import { CircleCheck, Copy, LogIn, LogOut } from 'lucide-react'
 import { Button } from '@/components/ui/Button'
 import { useHahaOpenAIOAuthStore } from '../../stores/hahaOpenAIOAuthStore'
 import { useTranslation } from '../../i18n'
@@ -100,8 +100,9 @@ export function ChatGPTOfficialLogin() {
   if (status.loggedIn) {
     const accountLabel = status.email || status.accountId || t('settings.chatgptOfficialLogin.accountUnknown')
     return (
-      <div data-testid="chatgpt-official-login" className="flex items-center gap-3 text-sm">
-        <span className="text-[var(--color-success)]">
+      <div data-testid="chatgpt-official-login" className="flex flex-wrap items-center gap-3 text-[13px]">
+        <span className="inline-flex min-w-0 items-center gap-1.5 text-[var(--color-success)]">
+          <CircleCheck size={14} strokeWidth={1.75} aria-hidden="true" className="shrink-0" />
           {t('settings.chatgptOfficialLogin.loggedInPrefix')} {accountLabel}
         </span>
         <Button
@@ -121,13 +122,14 @@ export function ChatGPTOfficialLogin() {
 
   return (
     <div data-testid="chatgpt-official-login" className="flex flex-col gap-2">
-      <div className="text-sm text-[var(--color-text-secondary)]">
+      <div className="text-[13px] leading-5 text-[var(--color-text-secondary)]">
         {t('settings.chatgptOfficialLogin.intro')}
       </div>
       <Button
+        size="base"
         onClick={handleLogin}
         disabled={isLoading}
-        icon={<LogIn className="h-4 w-4" aria-hidden="true" />}
+        icon={<LogIn size={14} strokeWidth={1.75} aria-hidden="true" />}
         className="self-start"
       >
         {isLoading
diff --git a/desktop/src/components/settings/ClaudeOfficialLogin.tsx b/desktop/src/components/settings/ClaudeOfficialLogin.tsx
index 2981d724..15a1d238 100644
--- a/desktop/src/components/settings/ClaudeOfficialLogin.tsx
+++ b/desktop/src/components/settings/ClaudeOfficialLogin.tsx
@@ -5,6 +5,7 @@
 // 到 haha server 后,store 的 polling 自动刷新 UI 展示"已登录"。
 
 import { useEffect } from 'react'
+import { CircleCheck } from 'lucide-react'
 import { Button } from '@/components/ui/Button'
 import { useHahaOAuthStore } from '../../stores/hahaOAuthStore'
 import { useTranslation } from '../../i18n'
@@ -65,9 +66,10 @@ export function ClaudeOfficialLogin() {
       ? status.subscriptionType.toUpperCase()
       : t('settings.claudeOfficialLogin.subTypeUnknown')
     return (
-      <div className="flex items-center gap-3 text-sm">
-        <span className="text-[var(--color-success)]">
-          ✓ {t('settings.claudeOfficialLogin.loggedInPrefix')} {subTypeLabel})
+      <div className="flex flex-wrap items-center gap-3 text-[13px]">
+        <span className="inline-flex items-center gap-1.5 text-[var(--color-success)]">
+          <CircleCheck size={14} strokeWidth={1.75} aria-hidden="true" />
+          {t('settings.claudeOfficialLogin.loggedInPrefix')} {subTypeLabel})
         </span>
         <Button variant="secondary" size="sm" onClick={logout} disabled={isLoading}>
           {isLoading
@@ -80,10 +82,10 @@ export function ClaudeOfficialLogin() {
 
   return (
     <div className="flex flex-col gap-2">
-      <div className="text-sm text-[var(--color-text-secondary)]">
+      <div className="text-[13px] leading-5 text-[var(--color-text-secondary)]">
         {t('settings.claudeOfficialLogin.intro')}
       </div>
-      <Button onClick={handleLogin} disabled={isLoading} className="self-start">
+      <Button size="base" onClick={handleLogin} disabled={isLoading} className="self-start">
         {isLoading
           ? t('settings.claudeOfficialLogin.loginStarting')
           : t('settings.claudeOfficialLogin.loginButton')}
diff --git a/desktop/src/components/settings/GrokOfficialLogin.tsx b/desktop/src/components/settings/GrokOfficialLogin.tsx
index c31ea3ad..491b3e4e 100644
--- a/desktop/src/components/settings/GrokOfficialLogin.tsx
+++ b/desktop/src/components/settings/GrokOfficialLogin.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { Copy, LogIn, LogOut } from 'lucide-react'
+import { CircleCheck, Copy, LogIn, LogOut } from 'lucide-react'
 import { Button } from '@/components/ui/Button'
 import { useHahaGrokOAuthStore } from '../../stores/hahaGrokOAuthStore'
 import { useTranslation } from '../../i18n'
@@ -93,8 +93,9 @@ export function GrokOfficialLogin() {
 
   if (status.loggedIn) {
     return (
-      <div data-testid="grok-official-login" className="flex items-center gap-3 text-sm">
-        <span className="text-[var(--color-success)]">
+      <div data-testid="grok-official-login" className="flex flex-wrap items-center gap-3 text-[13px]">
+        <span className="inline-flex min-w-0 items-center gap-1.5 text-[var(--color-success)]">
+          <CircleCheck size={14} strokeWidth={1.75} aria-hidden="true" className="shrink-0" />
           {t('settings.grokOfficialLogin.loggedInPrefix')} {status.email || t('settings.grokOfficialLogin.accountUnknown')}
         </span>
         <Button
@@ -112,11 +113,12 @@ export function GrokOfficialLogin() {
 
   return (
     <div data-testid="grok-official-login" className="flex flex-col gap-2">
-      <div className="text-sm text-[var(--color-text-secondary)]">{t('settings.grokOfficialLogin.intro')}</div>
+      <div className="text-[13px] leading-5 text-[var(--color-text-secondary)]">{t('settings.grokOfficialLogin.intro')}</div>
       <Button
+        size="base"
         onClick={handleLogin}
         disabled={isLoading}
-        icon={<LogIn className="h-4 w-4" aria-hidden="true" />}
+        icon={<LogIn size={14} strokeWidth={1.75} aria-hidden="true" />}
         className="self-start"
       >
         {isLoading ? t('settings.grokOfficialLogin.loginStarting') : t('settings.grokOfficialLogin.loginButton')}
diff --git a/desktop/src/components/settings/ModelIdCombobox.tsx b/desktop/src/components/settings/ModelIdCombobox.tsx
index e88a368c..c7dd33db 100644
--- a/desktop/src/components/settings/ModelIdCombobox.tsx
+++ b/desktop/src/components/settings/ModelIdCombobox.tsx
@@ -7,6 +7,7 @@ import {
   useState,
   type KeyboardEvent,
 } from 'react'
+import { Check, ChevronDown } from 'lucide-react'
 
 import { IconButton } from '@/components/ui/IconButton'
 import { FIELD_BASE_CLASSES, FIELD_SIZE_CLASSES, fieldStateClasses } from '@/components/ui/Input'
@@ -172,7 +173,7 @@ export function ModelIdCombobox({
         if (!(nextFocus instanceof Node) || !event.currentTarget.contains(nextFocus)) close()
       }}
     >
-      <label htmlFor={inputId} className="text-sm font-medium text-[var(--color-text-primary)]">
+      <label htmlFor={inputId} className="text-[13px] font-medium text-[var(--color-text-primary)]">
         {label}
         {required && <span className="ml-0.5 text-[var(--color-error)]">*</span>}
       </label>
@@ -217,15 +218,12 @@ export function ModelIdCombobox({
         {hasModels && (
           <IconButton
             icon={(
-              <span
+              <ChevronDown
+                size={16}
+                strokeWidth={1.75}
                 aria-hidden="true"
-                className={cx(
-                  'material-symbols-outlined text-[18px] transition-transform duration-150',
-                  open && 'rotate-180',
-                )}
-              >
-                expand_more
-              </span>
+                className={cx('transition-transform duration-150', open && 'rotate-180')}
+              />
             )}
             label={pickerLabel}
             showTooltip={false}
@@ -254,7 +252,7 @@ export function ModelIdCombobox({
             id={listId}
             role="listbox"
             aria-label={pickerLabel}
-            className="max-h-64 overflow-y-auto p-1.5"
+            className="max-h-64 overflow-y-auto p-1"
           >
             {visibleGroups.length === 0 ? (
               <div
@@ -268,7 +266,7 @@ export function ModelIdCombobox({
             ) : visibleGroups.map((group) => (
               <div key={group.group} role="group" aria-label={group.group}>
                 {visibleGroups.length > 1 && (
-                  <div className="px-2.5 pb-1 pt-2 text-[10px] font-semibold uppercase tracking-[0.08em] text-[var(--color-text-tertiary)] first:pt-1">
+                  <div className="px-2.5 pb-1 pt-2 text-[11px] font-semibold text-[var(--color-text-tertiary)] first:pt-1">
                     {group.group}
                   </div>
                 )}
@@ -292,7 +290,7 @@ export function ModelIdCombobox({
                         onMouseEnter={() => setActiveIndex(index)}
                         onClick={() => selectModel(model.id)}
                         className={cx(
-                          'flex min-h-9 w-full items-center gap-2 rounded-[var(--radius-sm)] px-2.5 py-1.5 text-left text-sm outline-none transition-colors duration-150',
+                          'flex min-h-8 w-full items-center gap-2 rounded-[var(--radius-sm)] px-2.5 py-1.5 text-left text-[13px] outline-none transition-colors duration-150',
                           active
                             ? 'bg-[var(--color-surface-hover)] text-[var(--color-text-primary)]'
                             : selected
@@ -300,11 +298,9 @@ export function ModelIdCombobox({
                               : 'text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)]',
                         )}
                       >
-                        <span className="min-w-0 flex-1 truncate font-mono text-[13px]">{model.id}</span>
+                        <span className="min-w-0 flex-1 truncate font-mono text-xs">{model.id}</span>
                         {selected && (
-                          <span aria-hidden="true" className="material-symbols-outlined flex-none text-[16px] text-[var(--color-brand)]">
-                            check
-                          </span>
+                          <Check size={14} strokeWidth={2} aria-hidden="true" className="flex-none text-[var(--color-brand)]" />
                         )}
                       </button>
                     )
diff --git a/desktop/src/components/settings/OfficialProviderModelSettings.tsx b/desktop/src/components/settings/OfficialProviderModelSettings.tsx
index 8b3f2c8e..bec79a3e 100644
--- a/desktop/src/components/settings/OfficialProviderModelSettings.tsx
+++ b/desktop/src/components/settings/OfficialProviderModelSettings.tsx
@@ -102,12 +102,12 @@ export function OfficialProviderModelSettings({ providerId }: OfficialProviderMo
   }
 
   return (
-    <section className="mt-3 border-t border-[var(--color-border-separator)] pt-3" aria-labelledby={`${providerId}-models-title`}>
+    <section className="mt-3 border-t border-[var(--color-border)] pt-3" aria-labelledby={`${providerId}-models-title`}>
       <div className="mb-3">
-        <h4 id={`${providerId}-models-title`} className="text-sm font-semibold text-[var(--color-text-primary)]">
+        <h4 id={`${providerId}-models-title`} className="text-[13px] font-semibold text-[var(--color-text-secondary)]">
           {t('settings.providers.officialModelsTitle')}
         </h4>
-        <p className="mt-1 text-xs text-[var(--color-text-tertiary)]">
+        <p className="mt-0.5 text-xs leading-[1.5] text-[var(--color-text-tertiary)]">
           {t('settings.providers.officialModelsDesc')}
         </p>
       </div>
@@ -143,7 +143,7 @@ export function OfficialProviderModelSettings({ providerId }: OfficialProviderMo
 
           <div className="flex items-center gap-3">
             <Button
-              size="sm"
+              size="base"
               onClick={handleSave}
               loading={isSaving}
               disabled={!models.main.trim()}
diff --git a/desktop/src/components/settings/ProviderImageGenerationFields.tsx b/desktop/src/components/settings/ProviderImageGenerationFields.tsx
index 52e53a6e..54ba8c7a 100644
--- a/desktop/src/components/settings/ProviderImageGenerationFields.tsx
+++ b/desktop/src/components/settings/ProviderImageGenerationFields.tsx
@@ -1,5 +1,5 @@
 import { Input } from '@/components/ui/Input'
-import { Switch } from '@/components/ui/Switch'
+import { SettingsBlock, SettingsGroup, SettingsSwitchRow } from '@/components/settings/SettingsSection'
 import { useTranslation } from '@/i18n'
 
 export type ImageGenerationFormValue = {
@@ -21,19 +21,16 @@ export function ProviderImageGenerationFields({ value, onChange }: Props) {
   }
 
   return (
-    <div className="overflow-hidden rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)]">
-      <div className="px-3 py-3">
-        <Switch
-          checked={value.enabled}
-          onChange={(enabled) => update({ enabled })}
-          label={t('settings.providers.imageGenerationEnabled')}
-          description={t('settings.providers.imageGenerationEnabledDesc')}
-          size="sm"
-        />
-      </div>
+    <SettingsGroup>
+      <SettingsSwitchRow
+        title={t('settings.providers.imageGenerationEnabled')}
+        description={t('settings.providers.imageGenerationEnabledDesc')}
+        checked={value.enabled}
+        onChange={(enabled) => update({ enabled })}
+      />
 
       {value.enabled ? (
-        <div className="grid gap-3 border-t border-[var(--color-border)] px-3 py-3 sm:grid-cols-2">
+        <SettingsBlock className="grid gap-3 sm:grid-cols-2">
           <Input
             label={t('settings.providers.imageGenerationModel')}
             required
@@ -62,8 +59,8 @@ export function ProviderImageGenerationFields({ value, onChange }: Props) {
             hint={t('settings.providers.imageGenerationApiKeyHint')}
             className="font-mono text-[13px]"
           />
-        </div>
+        </SettingsBlock>
       ) : null}
-    </div>
+    </SettingsGroup>
   )
 }
diff --git a/desktop/src/components/settings/ProviderRequestCompatibilityFields.tsx b/desktop/src/components/settings/ProviderRequestCompatibilityFields.tsx
index 7150eb41..9a80720f 100644
--- a/desktop/src/components/settings/ProviderRequestCompatibilityFields.tsx
+++ b/desktop/src/components/settings/ProviderRequestCompatibilityFields.tsx
@@ -32,7 +32,7 @@ export function ProviderRequestCompatibilityFields({ value, apiFormat, onChange
     onChange({ ...value, options })
   }
   return (
-    <section className="space-y-3 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)] p-3">
+    <section className="space-y-3 rounded-[var(--radius-lg)] border border-[var(--color-border)] p-4">
       <Input
         label={t('settings.providers.compatibilityBudget')}
         value={value.maxOutputTokens}
diff --git a/desktop/src/components/settings/SettingsSection.test.tsx b/desktop/src/components/settings/SettingsSection.test.tsx
index e5f5f2f0..8d14ceb8 100644
--- a/desktop/src/components/settings/SettingsSection.test.tsx
+++ b/desktop/src/components/settings/SettingsSection.test.tsx
@@ -3,10 +3,14 @@ import '@testing-library/jest-dom'
 import { describe, expect, it, vi } from 'vitest'
 
 import {
+  SettingsBlock,
+  SettingsGroup,
   SettingsPageHeader,
   SettingsPill,
+  SettingsRow,
   SettingsSection,
   SettingsStat,
+  SettingsSwitchRow,
 } from './SettingsSection'
 
 describe('SettingsPageHeader', () => {
@@ -16,11 +20,11 @@ describe('SettingsPageHeader', () => {
     expect(screen.getByText('Pick a default')).toBeInTheDocument()
   })
 
-  it('sets the serif family on the title', () => {
+  it('is the pane-level h2 at the 22px page-title size', () => {
     render(<SettingsPageHeader title="Providers" />)
-    expect(screen.getByRole('heading', { name: 'Providers' })).toHaveStyle({
-      fontFamily: 'var(--font-headline)',
-    })
+    const heading = screen.getByRole('heading', { level: 2, name: 'Providers' })
+    expect(heading.className).toContain('text-[22px]')
+    expect(heading.className).toContain('font-semibold')
   })
 
   it('omits the description line when none is given', () => {
@@ -49,6 +53,75 @@ describe('SettingsSection', () => {
     const { container } = render(<SettingsSection title="Appearance">x</SettingsSection>)
     expect(container.firstElementChild?.tagName).toBe('SECTION')
   })
+
+  it('labels the section with an h3 under the pane title', () => {
+    render(<SettingsSection title="Appearance">x</SettingsSection>)
+    expect(screen.getByRole('heading', { level: 3, name: 'Appearance' })).toBeInTheDocument()
+  })
+})
+
+describe('SettingsGroup / SettingsRow', () => {
+  it('puts rows in one bordered card with a hairline between each', () => {
+    render(
+      <SettingsGroup aria-label="Rows">
+        <SettingsRow title="First">a</SettingsRow>
+        <SettingsRow title="Second">b</SettingsRow>
+      </SettingsGroup>,
+    )
+    const group = screen.getByLabelText('Rows')
+    expect(group.className).toContain('rounded-[var(--radius-lg)]')
+    expect(group.className).toContain('border')
+    expect(group.className).toContain('divide-y')
+    // Not overflow-hidden: rows host Dropdowns whose menus would be clipped.
+    expect(group.className).not.toContain('overflow-hidden')
+  })
+
+  it('shows the title, the description and the control of a row', () => {
+    render(
+      <SettingsRow title="Language" description="Pick one">
+        <button type="button">Choose</button>
+      </SettingsRow>,
+    )
+    expect(screen.getByText('Language')).toBeInTheDocument()
+    expect(screen.getByText('Pick one')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Choose' })).toBeInTheDocument()
+  })
+
+  it('labels a bare input through htmlFor', () => {
+    render(
+      <SettingsRow title="Proxy URL" htmlFor="proxy">
+        <input id="proxy" />
+      </SettingsRow>,
+    )
+    expect(screen.getByLabelText('Proxy URL')).toHaveAttribute('id', 'proxy')
+  })
+
+  it('renders the footer below the row', () => {
+    render(<SettingsRow title="Retention" footer={<p>Failed</p>}>x</SettingsRow>)
+    expect(screen.getByText('Failed')).toBeInTheDocument()
+  })
+
+  it('wraps free-form content in a padded block', () => {
+    render(<SettingsBlock>free</SettingsBlock>)
+    expect(screen.getByText('free').className).toContain('px-4')
+  })
+})
+
+describe('SettingsSwitchRow', () => {
+  it('names the switch with the visible title and reports changes', () => {
+    const onChange = vi.fn()
+    render(<SettingsSwitchRow title="Enable thinking" description="New sessions" checked={false} onChange={onChange} />)
+    const toggle = screen.getByRole('switch', { name: 'Enable thinking' })
+    expect(toggle).not.toBeChecked()
+    expect(screen.getByText('Enable thinking')).toBeVisible()
+    fireEvent.click(toggle)
+    expect(onChange).toHaveBeenCalledWith(true)
+  })
+
+  it('can be disabled', () => {
+    render(<SettingsSwitchRow title="Enable" checked onChange={() => {}} disabled />)
+    expect(screen.getByRole('switch', { name: 'Enable' })).toBeDisabled()
+  })
 })
 
 describe('SettingsPill', () => {
@@ -97,9 +170,10 @@ describe('SettingsPill', () => {
 })
 
 describe('SettingsStat', () => {
-  it('renders the value in the serif face and keeps the label readable', () => {
+  it('renders the value as a tabular 22px figure and keeps the label readable', () => {
     render(<SettingsStat label="Sessions" value="128" />)
-    expect(screen.getByText('128')).toHaveStyle({ fontFamily: 'var(--font-headline)' })
+    expect(screen.getByText('128').className).toContain('tabular-nums')
+    expect(screen.getByText('128').className).toContain('text-[22px]')
     expect(screen.getByText('Sessions')).toBeInTheDocument()
   })
 
diff --git a/desktop/src/components/settings/SettingsSection.tsx b/desktop/src/components/settings/SettingsSection.tsx
index d662cb05..4a93c0f6 100644
--- a/desktop/src/components/settings/SettingsSection.tsx
+++ b/desktop/src/components/settings/SettingsSection.tsx
@@ -1,70 +1,82 @@
-import type { ButtonHTMLAttributes, ReactNode } from 'react'
+import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react'
 
+import { Switch } from '@/components/ui/Switch'
 import { cx } from '@/lib/cx'
 
+/**
+ * The settings page skeleton (「素 Porcelain」).
+ *
+ * Every settings pane is built from the same five pieces, so all of them read
+ * as one page rather than sixteen hand-laid ones:
+ *
+ *   <SettingsPageHeader title=… description=… action=… />   22px title + 13px line
+ *   <SettingsSection title=…>                                13px semibold label
+ *     <SettingsGroup>                                        white card, hairline rows
+ *       <SettingsRow title=… description=…>{control}</SettingsRow>
+ *       <SettingsSwitchRow title=… checked=… onChange=… />
+ *       <SettingsBlock>{free-form content}</SettingsBlock>
+ *     </SettingsGroup>
+ *   </SettingsSection>
+ *
+ * The page frame itself — fluid up to `max-w-[1120px]`, centred, 40px gutters, 36px top —
+ * is owned by the scroll container in `pages/Settings.tsx`, so a pane never
+ * sets its own width. Panes rendered outside that shell (the touch H5 settings)
+ * get their padding from their own host.
+ */
+
 export type SettingsPageHeaderProps = {
   title: ReactNode
   description?: ReactNode
-  /** Right-aligned slot, normally the section's primary ink button. */
+  /** Right-aligned slot, normally the pane's primary ink button. */
   action?: ReactNode
+  /** Id for the `<h2>`, when a surrounding region is labelled by it. */
+  titleId?: string
   className?: string
 }
 
 /**
- * The page-level header of a settings pane: serif title, secondary line, and an
- * optional primary action pinned right.
- *
- * Kept here rather than in `ui/` because the serif size and the 24px gap under
- * it are settings-suite decisions, not a generic heading primitive — the market
- * and schedule pages use a larger 26–28px title with different chrome.
+ * The pane's title row. The title is the nav label verbatim, so the rail and
+ * the page never name the same place twice in two different words.
  */
-export function SettingsPageHeader({ title, description, action, className }: SettingsPageHeaderProps) {
+export function SettingsPageHeader({ title, description, action, titleId, className }: SettingsPageHeaderProps) {
   return (
-    <div className={cx('mb-6 flex items-start justify-between gap-4', className)}>
-      <div className="min-w-0">
-        <h2
-          className="text-[24px] font-semibold leading-tight text-[var(--color-text-primary)]"
-          style={{ fontFamily: 'var(--font-headline)' }}
-        >
+    <header className={cx('flex flex-wrap items-end gap-x-4 gap-y-3', className)}>
+      <div className="min-w-0 flex-1">
+        <h2 id={titleId} className="text-[22px] font-semibold leading-tight tracking-[-0.015em] text-[var(--color-text-primary)]">
           {title}
         </h2>
         {description ? (
-          <p className="mt-1.5 text-[13.5px] leading-6 text-[var(--color-text-secondary)]">{description}</p>
+          <p className="mt-1.5 max-w-[72ch] text-[13px] leading-5 text-[var(--color-text-tertiary)]">{description}</p>
         ) : null}
       </div>
-      {action ? <div className="flex shrink-0 items-center gap-2">{action}</div> : null}
-    </div>
+      {action ? <div className="flex shrink-0 flex-wrap items-center gap-2">{action}</div> : null}
+    </header>
   )
 }
 
 export type SettingsSectionProps = {
   title: ReactNode
+  /** Optional 12px line under the label, for sections whose rows need context. */
   description?: ReactNode
+  /** Right-aligned slot beside the label, e.g. a small "Reset" button. */
   action?: ReactNode
   className?: string
   children?: ReactNode
 }
 
 /**
- * One labelled block inside a settings pane.
- *
- * Replaces the `<h2 class="text-base font-semibold"> + <p class="text-sm"> +
- * bare div` triple that was copy-pasted 19 times in `Settings.tsx` alone, each
- * copy free to drift in its own margin and text size.
+ * One labelled block of a pane: a 13px semibold secondary label sitting on top
+ * of (normally) one `SettingsGroup`. Sections are spaced 28px apart and from
+ * the page header.
  */
 export function SettingsSection({ title, description, action, className, children }: SettingsSectionProps) {
   return (
-    <section className={cx('mb-8', className)}>
-      <div className="mb-3 flex items-start justify-between gap-3">
+    <section className={cx('mt-7', className)}>
+      <div className="mb-2 flex items-end justify-between gap-3 px-0.5">
         <div className="min-w-0">
-          <h2
-            className="text-[16.5px] font-semibold leading-tight text-[var(--color-text-primary)]"
-            style={{ fontFamily: 'var(--font-headline)' }}
-          >
-            {title}
-          </h2>
+          <h3 className="text-[13px] font-semibold leading-5 text-[var(--color-text-secondary)]">{title}</h3>
           {description ? (
-            <p className="mt-1 text-[13px] leading-5 text-[var(--color-text-tertiary)]">{description}</p>
+            <p className="mt-0.5 text-xs leading-[1.5] text-[var(--color-text-tertiary)]">{description}</p>
           ) : null}
         </div>
         {action ? <div className="flex shrink-0 items-center gap-2">{action}</div> : null}
@@ -74,16 +86,162 @@ export function SettingsSection({ title, description, action, className, childre
   )
 }
 
+export type SettingsGroupProps = {
+  className?: string
+  children?: ReactNode
+} & Pick<HTMLAttributes<HTMLDivElement>, 'id' | 'role' | 'aria-label' | 'aria-labelledby'>
+
+/**
+ * The white card that holds a section's rows, with a hairline between each.
+ *
+ * Deliberately not `overflow-hidden`: rows host `Dropdown`s, whose menus are
+ * absolutely positioned inside the row and would be clipped by the card.
+ * Rows paint no background of their own, so the corners stay clean without it.
+ */
+export function SettingsGroup({ className, children, ...rest }: SettingsGroupProps) {
+  return (
+    <div
+      {...rest}
+      className={cx(
+        'rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)]',
+        'divide-y divide-[var(--color-border)]',
+        className,
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+export type SettingsRowProps = {
+  title: ReactNode
+  description?: ReactNode
+  /** The control, pinned right. */
+  children?: ReactNode
+  /** Content under the title/control line, full row width (inline errors, expanded fields). */
+  footer?: ReactNode
+  /**
+   * `inline` keeps the control beside the text at every width; `stack` puts
+   * the control under the text (wide controls such as a full-width picker).
+   * `responsive` (default) stacks only on narrow panes.
+   */
+  layout?: 'inline' | 'stack' | 'responsive'
+  /** Renders the title as a `<label htmlFor>` for a single bare input control. */
+  htmlFor?: string
+  titleId?: string
+  descriptionId?: string
+  className?: string
+  'data-testid'?: string
+}
+
+const ROW_LAYOUT = {
+  inline: 'flex-row items-center',
+  stack: 'flex-col items-stretch',
+  responsive: 'flex-col items-stretch sm:flex-row sm:items-center',
+} as const
+
+const CONTROL_LAYOUT = {
+  inline: 'shrink-0',
+  stack: 'w-full',
+  responsive: 'w-full sm:w-auto sm:shrink-0',
+} as const
+
+/**
+ * One setting: 13px medium title and 12px tertiary description on the left,
+ * the control on the right, at least 52px tall.
+ */
+export function SettingsRow({
+  title,
+  description,
+  children,
+  footer,
+  layout = 'responsive',
+  htmlFor,
+  titleId,
+  descriptionId,
+  className,
+  'data-testid': testId,
+}: SettingsRowProps) {
+  const TitleTag = htmlFor ? 'label' : 'div'
+  return (
+    <div data-testid={testId} className={cx('min-h-[52px] px-4 py-3', className)}>
+      <div className={cx('flex gap-x-6 gap-y-2.5', ROW_LAYOUT[layout])}>
+        <div className="min-w-0 flex-1">
+          <TitleTag
+            id={titleId}
+            htmlFor={htmlFor}
+            className="block text-[13px] font-medium leading-5 text-[var(--color-text-primary)]"
+          >
+            {title}
+          </TitleTag>
+          {description ? (
+            // Capped so a description stays a readable line on the wide frame.
+            <div id={descriptionId} className="mt-0.5 max-w-[68ch] text-xs leading-[1.5] text-[var(--color-text-tertiary)]">
+              {description}
+            </div>
+          ) : null}
+        </div>
+        {children ? (
+          <div className={cx('flex min-w-0 flex-wrap items-center gap-2', CONTROL_LAYOUT[layout])}>{children}</div>
+        ) : null}
+      </div>
+      {footer ? <div className="mt-3">{footer}</div> : null}
+    </div>
+  )
+}
+
+export type SettingsSwitchRowProps = {
+  /** Visible title; also the switch's accessible name. */
+  title: string
+  description?: ReactNode
+  checked: boolean
+  onChange: (checked: boolean) => void
+  disabled?: boolean
+  footer?: ReactNode
+  className?: string
+  'data-testid'?: string
+}
+
+/**
+ * A row whose control is a `Switch`. The switch is named by the title, so a
+ * screen reader hears the same words a sighted user reads.
+ */
+export function SettingsSwitchRow({
+  title,
+  description,
+  checked,
+  onChange,
+  disabled,
+  footer,
+  className,
+  'data-testid': testId,
+}: SettingsSwitchRowProps) {
+  return (
+    <SettingsRow
+      title={title}
+      description={description}
+      footer={footer}
+      layout="inline"
+      className={className}
+      data-testid={testId}
+    >
+      <Switch checked={checked} onChange={onChange} disabled={disabled} label={title} labelHidden />
+    </SettingsRow>
+  )
+}
+
+/** A padded free-form cell inside a `SettingsGroup`, for content that is not a title/control row. */
+export function SettingsBlock({ className, children }: { className?: string; children?: ReactNode }) {
+  return <div className={cx('px-4 py-3', className)}>{children}</div>
+}
+
 export type SettingsPillProps = {
   selected: boolean
   /**
-   * Which selected look to wear.
-   *
-   * `ink` is the solid ink fill the handoff specifies for the theme and
-   * language rows — a choice that takes effect immediately and applies to the
-   * whole app. `terracotta` is the softer accent outline used where the pill
-   * only pre-fills a form (provider presets), so it does not compete with the
-   * modal's real primary button.
+   * Which selected look to wear. `ink` is the solid primary fill for a choice
+   * that applies immediately; `terracotta` is the soft selection outline used
+   * where the pill only pre-fills a form (provider presets), so it does not
+   * compete with the dialog's real primary button.
    */
   tone?: 'ink' | 'terracotta'
   onClick: () => void
@@ -92,12 +250,12 @@ export type SettingsPillProps = {
 } & Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'title' | 'disabled'>
 
 const PILL_SELECTED = {
-  ink: 'bg-[var(--color-btn-primary-bg)] text-[var(--color-btn-primary-fg)] border-transparent shadow-[var(--shadow-button-primary)]',
+  ink: 'bg-[var(--color-btn-primary-bg)] text-[var(--color-btn-primary-fg)] border-transparent',
   terracotta:
     'bg-[var(--color-brand-soft)] text-[var(--color-on-brand-soft)] border-[var(--color-primary-fixed-dim)]',
 } as const
 
-/** A `rounded-full` single-choice chip. */
+/** A `rounded-full` single-choice chip, for option sets that wrap onto several lines. */
 export function SettingsPill({
   selected,
   tone = 'ink',
@@ -113,13 +271,13 @@ export function SettingsPill({
       onClick={onClick}
       aria-pressed={selected}
       className={cx(
-        'inline-flex items-center justify-center gap-1.5 rounded-full border px-3.5 py-1.5 text-[12.5px] font-medium',
-        'transition-[background-color,color,border-color,box-shadow,transform] duration-150 ease-out',
+        'inline-flex h-7 items-center justify-center gap-1.5 rounded-full border px-3 text-xs font-medium',
+        'transition-[background-color,color,border-color] duration-150 ease-out',
         'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]',
-        'focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface)]',
+        'disabled:cursor-not-allowed disabled:opacity-50',
         selected
           ? PILL_SELECTED[tone]
-          : 'border-[var(--color-border)] text-[var(--color-text-secondary)] hover:border-[var(--color-outline)] hover:bg-[var(--color-surface-hover)]',
+          : 'border-[var(--color-border)] text-[var(--color-text-secondary)] hover:border-[var(--color-outline)] hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)]',
         className,
       )}
     >
@@ -135,18 +293,20 @@ export type SettingsStatProps = {
   className?: string
 }
 
-/** A stat tile: serif number over a small tertiary label. */
+/** A KPI tile: 12px label over a 22px tabular number. */
 export function SettingsStat({ label, value, hint, className }: SettingsStatProps) {
   return (
-    <div className={cx('min-w-0', className)}>
-      <div
-        className="text-[25px] font-semibold leading-none text-[var(--color-text-primary)]"
-        style={{ fontFamily: 'var(--font-headline)' }}
-      >
+    <div
+      className={cx(
+        'grid min-w-0 gap-1 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] px-4 py-3.5',
+        className,
+      )}
+    >
+      <div className="truncate text-xs text-[var(--color-text-tertiary)]">{label}</div>
+      <div className="text-[22px] font-semibold leading-tight tracking-[-0.02em] tabular-nums text-[var(--color-text-primary)]">
         {value}
       </div>
-      <div className="mt-2 truncate text-[12px] text-[var(--color-text-tertiary)]">{label}</div>
-      {hint ? <div className="mt-0.5 truncate text-[11px] text-[var(--color-text-tertiary)]">{hint}</div> : null}
+      {hint ? <div className="truncate text-xs text-[var(--color-text-tertiary)]">{hint}</div> : null}
     </div>
   )
 }
diff --git a/desktop/src/components/skills/SkillDetail.tsx b/desktop/src/components/skills/SkillDetail.tsx
index 6004aecb..d6ed38e9 100644
--- a/desktop/src/components/skills/SkillDetail.tsx
+++ b/desktop/src/components/skills/SkillDetail.tsx
@@ -120,10 +120,10 @@ export function SkillDetail({ embedded = false }: { embedded?: boolean }) {
   const actions = marketMeta ? (
     <Button
       variant="danger-outline"
-      size="lg"
+      size="base"
       data-testid="local-skill-uninstall-button"
       loading={uninstalling}
-      icon={<Trash2 className="h-4 w-4" strokeWidth={1.5} aria-hidden="true" />}
+      icon={<Trash2 size={14} strokeWidth={1.75} aria-hidden="true" />}
       onClick={() => setConfirmUninstall(true)}
     >
       {uninstalling ? t('market.uninstall.uninstalling') : t('market.uninstall.action')}
@@ -132,12 +132,13 @@ export function SkillDetail({ embedded = false }: { embedded?: boolean }) {
 
   return (
     <>
-      {embedded && !marketMeta && (
-        <p className="mb-4 text-sm leading-6 text-[var(--color-text-secondary)]">
-          {t('extensions.managedSkillHint')}
-        </p>
-      )}
       <SkillDetailView
+        framed={!embedded}
+        banner={embedded && !marketMeta ? (
+          <p className="mt-4 text-xs leading-5 text-[var(--color-text-tertiary)]">
+            {t('extensions.managedSkillHint')}
+          </p>
+        ) : undefined}
         name={skillMeta.displayName || skillMeta.name}
         version={skillMeta.version}
         sourceLabel={t(`settings.skills.source.${skillMeta.source}`)}
diff --git a/desktop/src/components/skills/SkillList.test.tsx b/desktop/src/components/skills/SkillList.test.tsx
index cf16a8d6..38bb3105 100644
--- a/desktop/src/components/skills/SkillList.test.tsx
+++ b/desktop/src/components/skills/SkillList.test.tsx
@@ -79,8 +79,10 @@ describe('SkillList', () => {
 
     render(<SkillList />)
 
-    expect(screen.getByText('Browse installed skills')).toBeInTheDocument()
-    expect(screen.getByText('Skill Browser')).toBeInTheDocument()
+    // The host page head names the browser; the list opens on search and its
+    // numbers rather than a second title block.
+    expect(screen.queryByText('Browse installed skills')).not.toBeInTheDocument()
+    expect(screen.getByRole('searchbox', { name: 'Search skills' })).toBeInTheDocument()
     expect(screen.getByText('Total skills')).toBeInTheDocument()
     expect(screen.getByText('Alpha Skill')).toBeInTheDocument()
     expect(screen.getByText('Second skill description')).toBeInTheDocument()
diff --git a/desktop/src/components/skills/SkillList.tsx b/desktop/src/components/skills/SkillList.tsx
index 5a6c0faf..548b0dea 100644
--- a/desktop/src/components/skills/SkillList.tsx
+++ b/desktop/src/components/skills/SkillList.tsx
@@ -1,27 +1,25 @@
 import { useEffect, useMemo, useState } from 'react'
 import {
+  Box,
   ChevronRight,
   FileStack,
   Folder,
   Layers,
   Package,
   Puzzle,
-  Search,
   SearchX,
   Share2,
-  Sparkles,
   User,
-  X,
   type LucideIcon,
 } from 'lucide-react'
 import { useSkillStore } from '../../stores/skillStore'
 import { useSessionStore } from '../../stores/sessionStore'
 import { useTranslation } from '../../i18n'
+import { cx } from '@/lib/cx'
 import { Badge } from '@/components/ui/Badge'
 import { Card } from '@/components/ui/Card'
 import { EmptyState } from '@/components/ui/EmptyState'
 import { ErrorState } from '@/components/ui/ErrorState'
-import { IconButton } from '@/components/ui/IconButton'
 import { LoadingState } from '@/components/ui/LoadingState'
 import { SearchField } from '@/components/ui/SearchField'
 import type { SkillMeta, SkillSource } from '../../types/skill'
@@ -36,19 +34,19 @@ const SOURCE_ICONS: Record<SkillSource, LucideIcon> = {
   bundled: Package,
 }
 
-/** Fill plus its AA-checked foreground — never the accent on its own tint. */
-const SOURCE_ACCENT_CLASSES: Record<SkillSource, string> = {
-  user: 'bg-[var(--color-brand-soft)] text-[var(--color-on-brand-soft)]',
-  project: 'bg-[var(--color-success-container)] text-[var(--color-on-success-container)]',
-  plugin: 'bg-[var(--color-warning-container)] text-[var(--color-on-warning-container)]',
-  mcp: 'bg-[var(--color-info-container)] text-[var(--color-on-info-container)]',
-  bundled: 'bg-[var(--color-surface-container-high)] text-[var(--color-text-tertiary)]',
-}
-
 function estimateTokens(contentLength: number) {
   return Math.ceil(contentLength / 4)
 }
 
+/**
+ * The installed-skill browser.
+ *
+ * It renders under a page head that already names it (the settings pane or the
+ * extensions frame), so it opens on the search box rather than a title of its
+ * own. Sources are grouped cards of rows with hairlines between them; the
+ * source icons share one neutral tile — the four tinted chips they had were
+ * status colors standing in for categories that have no state.
+ */
 export function SkillList({ compact = false }: { compact?: boolean }) {
   const { skills, isLoading, error, fetchSkills, fetchSkillDetail } =
     useSkillStore()
@@ -116,7 +114,7 @@ export function SkillList({ compact = false }: { compact?: boolean }) {
   if (skills.length === 0) {
     return (
       <EmptyState
-        icon={<Sparkles size={20} strokeWidth={1.6} aria-hidden="true" />}
+        icon={<Box size={20} strokeWidth={1.75} aria-hidden="true" />}
         title={t('settings.skills.empty')}
         description={t('settings.skills.emptyHint')}
       />
@@ -124,8 +122,8 @@ export function SkillList({ compact = false }: { compact?: boolean }) {
   }
 
   return (
-    <div className="flex min-w-0 flex-col gap-6">
-      {compact ? (
+    <div className="flex min-w-0 flex-col gap-5">
+      <div className="flex flex-col gap-1.5">
         <SearchField
           label={t('settings.skills.searchLabel')}
           placeholder={t('settings.skills.searchPlaceholder')}
@@ -134,96 +132,50 @@ export function SkillList({ compact = false }: { compact?: boolean }) {
           onClear={() => setSearchQuery('')}
           clearLabel={t('settings.skills.clearSearch')}
         />
-      ) : (
-      <Card radius="xl" surface="low" padding="none" className="overflow-hidden">
-        <div className="grid min-w-0 gap-5 px-5 py-5 xl:grid-cols-[minmax(0,1.15fr)_minmax(400px,1fr)] xl:items-end">
-          <div className="min-w-0">
-            <div className="mb-2 text-[11px] font-semibold uppercase tracking-[0.2em] text-[var(--color-text-tertiary)]">
-              {t('settings.skills.browserEyebrow')}
-            </div>
-            <div className="mb-2 flex items-center gap-2.5">
-              <Sparkles className="h-[22px] w-[22px] text-[var(--color-brand)]" strokeWidth={1.5} aria-hidden="true" />
-              <h3
-                style={{ fontFamily: 'var(--font-headline)' }}
-                className="text-[21px] font-bold tracking-[-0.01em] text-[var(--color-text-primary)]"
-              >
-                {t('settings.skills.browserTitle')}
-              </h3>
-            </div>
-            <p className="max-w-3xl text-sm leading-6 text-[var(--color-text-secondary)]">
-              {t('settings.skills.browserDescription')}
-            </p>
-            <div className="mt-4 max-w-2xl">
-              <label className="sr-only" htmlFor="settings-skill-search">
-                {t('settings.skills.searchLabel')}
-              </label>
-              <div className="flex min-h-11 items-center gap-2.5 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface)] px-3.5 transition-colors focus-within:border-[var(--color-border-focus)] focus-within:shadow-[var(--shadow-focus-ring)]">
-                <Search className="h-[15px] w-[15px] flex-shrink-0 text-[var(--color-text-tertiary)]" strokeWidth={1.6} aria-hidden="true" />
-                <input
-                  id="settings-skill-search"
-                  value={searchQuery}
-                  onChange={(event) => setSearchQuery(event.target.value)}
-                  placeholder={t('settings.skills.searchPlaceholder')}
-                  className="min-w-0 flex-1 bg-transparent text-sm text-[var(--color-text-primary)] outline-none placeholder:text-[var(--color-text-tertiary)]"
-                />
-                {searchQuery && (
-                  <IconButton
-                    icon={<X className="h-3.5 w-3.5" strokeWidth={2} aria-hidden="true" />}
-                    label={t('settings.skills.clearSearch')}
-                    size="sm"
-                    shape="circle"
-                    tone="muted"
-                    onClick={() => setSearchQuery('')}
-                  />
-                )}
-              </div>
-              {normalizedSearchQuery && (
-                <p className="mt-2 text-[11px] text-[var(--color-text-tertiary)]">
-                  {t('settings.skills.searchResultCount', {
-                    count: String(filteredSkills.length),
-                    total: String(skills.length),
-                  })}
-                </p>
-              )}
-            </div>
-          </div>
+        {normalizedSearchQuery && (
+          <p className="text-xs text-[var(--color-text-tertiary)]">
+            {t('settings.skills.searchResultCount', {
+              count: String(filteredSkills.length),
+              total: String(skills.length),
+            })}
+          </p>
+        )}
+      </div>
 
-          {/* Column count follows the track width, not the viewport: `sm:grid-cols-3` kept
-              forcing three columns into a 320px sidebar column and clipped the CJK labels. */}
-          <div className="grid min-w-0 grid-cols-[repeat(auto-fit,minmax(116px,1fr))] gap-3">
-            <SummaryCard
-              label={t('settings.skills.summary.totalSkills')}
-              value={String(filteredSkills.length)}
-              icon={Sparkles}
-            />
-            <SummaryCard
-              label={t('settings.skills.summary.sources')}
-              value={String(
-                SOURCE_ORDER.filter((source) => (grouped[source] ?? []).length > 0)
-                  .length,
-              )}
-              icon={Layers}
-            />
-            <SummaryCard
-              label={t('settings.skills.summary.tokens')}
-              value={t('settings.skills.tokenEstimateShort', { count: String(totalTokens) })}
-              icon={FileStack}
-            />
-          </div>
+      {!compact && (
+        // Column count follows the track width, not the viewport: three fixed
+        // columns clipped the CJK labels in a narrow settings pane.
+        <div className="grid min-w-0 grid-cols-[repeat(auto-fit,minmax(140px,1fr))] gap-3">
+          <SummaryCard
+            label={t('settings.skills.summary.totalSkills')}
+            value={String(filteredSkills.length)}
+            icon={Box}
+          />
+          <SummaryCard
+            label={t('settings.skills.summary.sources')}
+            value={String(visibleGroupCount)}
+            icon={Layers}
+          />
+          <SummaryCard
+            label={t('settings.skills.summary.tokens')}
+            value={t('settings.skills.tokenEstimateShort', { count: String(totalTokens) })}
+            icon={FileStack}
+          />
         </div>
-      </Card>
       )}
 
       {filteredSkills.length === 0 && (
         <EmptyState
-          icon={<SearchX size={20} strokeWidth={1.6} aria-hidden="true" />}
+          icon={<SearchX size={20} strokeWidth={1.75} aria-hidden="true" />}
           title={t('settings.skills.noSearchResults')}
           description={t('settings.skills.noSearchResultsHint')}
           action={{ label: t('settings.skills.clearSearch'), onClick: () => setSearchQuery('') }}
         />
       )}
 
-      <div className={`grid gap-4 ${visibleGroupCount >= 2 ? 'xl:grid-cols-2' : ''}`}>
+      {/* Two columns only where the list owns a wide page; the settings pane
+          is one fixed column whatever the window width. */}
+      <div className={cx('grid gap-5', compact && visibleGroupCount >= 2 && 'xl:grid-cols-2 xl:items-start')}>
         {SOURCE_ORDER.map((source) => {
           const group = grouped[source]
           if (!group?.length) return null
@@ -236,40 +188,29 @@ export function SkillList({ compact = false }: { compact?: boolean }) {
           )
 
           return (
-            <Card
-              key={source}
-              as="section"
-              radius="xl"
-              surface="base"
-              padding="none"
-              className="min-w-0 overflow-hidden"
-            >
-              <div className="flex items-start justify-between gap-3 border-b border-[var(--color-border)] bg-[var(--color-surface-container-low)] px-5 py-4">
-                <div className="min-w-0">
-                  <div className="mb-1 flex items-center gap-2">
-                    <span className={`inline-flex h-7 w-7 items-center justify-center rounded-full ${SOURCE_ACCENT_CLASSES[source]}`}>
-                      <SourceIcon className="h-4 w-4" strokeWidth={1.6} aria-hidden="true" />
-                    </span>
-                    <h4 className="text-sm font-semibold text-[var(--color-text-primary)]">
-                      {sourceLabel}
-                    </h4>
-                    <span className="font-mono text-xs text-[var(--color-text-tertiary)]">
-                      {group.length}
-                    </span>
-                  </div>
-                  <p className="text-xs leading-5 text-[var(--color-text-tertiary)]">
-                    {t('settings.skills.groupHint', {
-                      source: sourceLabel,
-                      count: String(group.length),
-                    })}
-                  </p>
-                </div>
-                <div className="whitespace-nowrap font-mono text-[11px] text-[var(--color-text-tertiary)]">
+            <section key={source} className="min-w-0">
+              <div
+                className="mb-2 flex items-center gap-2 px-0.5"
+                title={t('settings.skills.groupHint', { source: sourceLabel, count: String(group.length) })}
+              >
+                <SourceIcon className="flex-shrink-0 text-[var(--color-text-tertiary)]" size={14} strokeWidth={1.75} aria-hidden="true" />
+                <h4 className="text-[13px] font-semibold text-[var(--color-text-secondary)]">
+                  {sourceLabel}
+                </h4>
+                <span className="font-mono text-[11px] tabular-nums text-[var(--color-text-tertiary)]">
+                  {group.length}
+                </span>
+                <span className="ml-auto whitespace-nowrap font-mono text-[11px] tabular-nums text-[var(--color-text-tertiary)]">
                   {t('settings.skills.tokenEstimateShort', { count: String(sourceTokenCount) })}
-                </div>
+                </span>
               </div>
 
-              <div className="flex flex-col p-2">
+              <Card
+                radius="lg"
+                surface="lowest"
+                padding="none"
+                className="divide-y divide-[var(--color-border)] overflow-hidden"
+              >
                 {group.map((skill) => (
                   <button
                     key={`${skill.source}-${skill.name}`}
@@ -278,55 +219,58 @@ export function SkillList({ compact = false }: { compact?: boolean }) {
                       fetchSkillDetail(skill.source, skill.name, currentWorkDir, 'skills')
                     }
                     disabled={!skill.hasDirectory}
-                    className="group rounded-[var(--radius-lg)] border border-transparent px-3 py-3 text-left transition-[background-color,border-color,box-shadow] duration-150 ease-out hover:border-[var(--color-border-focus)] hover:bg-[var(--color-surface-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface)] disabled:cursor-default disabled:opacity-60 disabled:hover:border-transparent disabled:hover:bg-transparent"
+                    className="group flex w-full items-start gap-3 px-4 py-3 text-left transition-colors duration-150 hover:bg-[var(--color-surface-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-border-focus)] disabled:cursor-default disabled:opacity-60 disabled:hover:bg-transparent"
                   >
-                    <div className="flex items-start gap-3">
-                      <Sparkles className="mt-0.5 h-[18px] w-[18px] flex-shrink-0 text-[var(--color-text-tertiary)]" strokeWidth={1.5} aria-hidden="true" />
-                      <div className="min-w-0 flex-1">
-                        <div className="flex flex-wrap items-center gap-2">
-                          <span className="break-all text-sm font-semibold text-[var(--color-text-primary)]">
-                            {skill.displayName || skill.name}
-                          </span>
-                          {skill.version && <Badge mono>v{skill.version}</Badge>}
-                          {skill.userInvocable && (
-                            <Badge variant="outline">{t('settings.skills.slashCommand')}</Badge>
-                          )}
-                          {/* Only flagged for `.agents`: `.claude` is the norm and
-                              badging it would be noise on every existing skill. */}
-                          {skill.rootFlavor === 'agents' && (
-                            // The badge covers both scopes, and they are not
-                            // equally trusted: a project one ships with the
-                            // repository rather than being installed by the
-                            // user — hence two hint strings.
-                            <Badge
-                              mono
-                              title={t(skill.source === 'project'
-                                ? 'settings.skills.agentsDirProjectHint'
-                                : 'settings.skills.agentsDirHint')}
-                            >
-                              {t('settings.skills.agentsDirBadge')}
-                            </Badge>
-                          )}
-                        </div>
-                        <p className="mt-1 break-words text-xs leading-5 text-[var(--color-text-secondary)]">
-                          {skill.description}
-                        </p>
-                        <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-[11px] text-[var(--color-text-tertiary)]">
-                          <span>{sourceLabel}</span>
-                          <span className="font-mono">{t('settings.skills.tokenEstimateShort', { count: String(estimateTokens(skill.contentLength)) })}</span>
-                          <span>{skill.hasDirectory ? t('settings.skills.ready') : t('settings.skills.unavailable')}</span>
-                        </div>
+                    <span className="mt-0.5 flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-[var(--radius-md)] bg-[var(--color-surface-container)] text-[var(--color-text-tertiary)]">
+                      <Box size={14} strokeWidth={1.75} aria-hidden="true" />
+                    </span>
+                    <div className="min-w-0 flex-1">
+                      <div className="flex flex-wrap items-center gap-1.5">
+                        <span className="break-all text-[13px] font-medium text-[var(--color-text-primary)]">
+                          {skill.displayName || skill.name}
+                        </span>
+                        {skill.version && <Badge mono>v{skill.version}</Badge>}
+                        {skill.userInvocable && (
+                          <Badge variant="outline">{t('settings.skills.slashCommand')}</Badge>
+                        )}
+                        {/* Only flagged for `.agents`: `.claude` is the norm and
+                            badging it would be noise on every existing skill. */}
+                        {skill.rootFlavor === 'agents' && (
+                          // The badge covers both scopes, and they are not
+                          // equally trusted: a project one ships with the
+                          // repository rather than being installed by the
+                          // user — hence two hint strings.
+                          <Badge
+                            mono
+                            title={t(skill.source === 'project'
+                              ? 'settings.skills.agentsDirProjectHint'
+                              : 'settings.skills.agentsDirHint')}
+                          >
+                            {t('settings.skills.agentsDirBadge')}
+                          </Badge>
+                        )}
+                      </div>
+                      <p className="mt-0.5 break-words text-xs leading-5 text-[var(--color-text-secondary)]">
+                        {skill.description}
+                      </p>
+                      <div className="mt-1 flex flex-wrap items-center gap-x-1.5 gap-y-1 text-xs text-[var(--color-text-tertiary)]">
+                        <span>{sourceLabel}</span>
+                        <span aria-hidden="true">·</span>
+                        <span className="font-mono text-[11px] tabular-nums">{t('settings.skills.tokenEstimateShort', { count: String(estimateTokens(skill.contentLength)) })}</span>
+                        <span aria-hidden="true">·</span>
+                        <span>{skill.hasDirectory ? t('settings.skills.ready') : t('settings.skills.unavailable')}</span>
                       </div>
-                      <ChevronRight
-                        className="h-[18px] w-[18px] flex-shrink-0 text-[var(--color-text-tertiary)] opacity-60 transition-transform duration-150 group-hover:translate-x-0.5 group-hover:opacity-100 motion-reduce:transition-none motion-reduce:group-hover:translate-x-0"
-                        strokeWidth={1.6}
-                        aria-hidden="true"
-                      />
                     </div>
+                    <ChevronRight
+                      className="mt-1.5 flex-shrink-0 text-[var(--color-text-tertiary)] opacity-60 transition-opacity duration-150 group-hover:opacity-100 motion-reduce:transition-none"
+                      size={14}
+                      strokeWidth={1.75}
+                      aria-hidden="true"
+                    />
                   </button>
                 ))}
-              </div>
-            </Card>
+              </Card>
+            </section>
           )
         })}
       </div>
@@ -334,28 +278,23 @@ export function SkillList({ compact = false }: { compact?: boolean }) {
   )
 }
 
+/** Label above, figure below: the figure is what the eye lands on. */
 function SummaryCard({
   label,
   value,
   icon: Icon,
-  className = '',
 }: {
   label: string
   value: string
   icon: LucideIcon
-  className?: string
 }) {
   return (
-    <Card radius="lg" padding="sm" className={`min-w-0 ${className}`}>
-      <div className="flex min-w-0 items-center gap-1.5 text-[11px] uppercase tracking-[0.12em] text-[var(--color-text-tertiary)]">
-        <Icon className="h-3.5 w-3.5 flex-shrink-0" strokeWidth={1.6} aria-hidden="true" />
+    <Card radius="lg" surface="lowest" padding="none" className="min-w-0 px-4 py-3">
+      <div className="flex min-w-0 items-center gap-1.5 text-xs text-[var(--color-text-tertiary)]">
+        <Icon className="flex-shrink-0" size={14} strokeWidth={1.75} aria-hidden="true" />
         <span className="truncate">{label}</span>
       </div>
-      {/* Statistic, so it takes the serif face the handoff pins on big numbers. */}
-      <div
-        style={{ fontFamily: 'var(--font-headline)' }}
-        className="mt-2 truncate text-[21px] font-bold text-[var(--color-text-primary)]"
-      >
+      <div className="mt-1 truncate text-[22px] font-semibold leading-7 tabular-nums text-[var(--color-text-primary)]">
         {value}
       </div>
     </Card>
diff --git a/desktop/src/components/tasks/DayOfWeekPicker.tsx b/desktop/src/components/tasks/DayOfWeekPicker.tsx
index 114aa2fa..f70f7640 100644
--- a/desktop/src/components/tasks/DayOfWeekPicker.tsx
+++ b/desktop/src/components/tasks/DayOfWeekPicker.tsx
@@ -47,11 +47,12 @@ export function DayOfWeekPicker({ selected, onChange }: Props) {
               focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]
               focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface)]
               ${isActive
-                // The handoff's active chip: terracotta wash, its paired ink,
-                // and the accent border. `--color-brand` as the text would be
-                // 4.3:1 on this fill under the two ink palettes.
-                ? 'border-[var(--color-primary-fixed-dim)] bg-[var(--color-brand-soft)] text-[var(--color-on-brand-soft)]'
-                : 'border-[var(--color-border)] bg-[var(--color-surface)] text-[var(--color-text-tertiary)] hover:border-[var(--color-outline)] hover:bg-[var(--color-surface-hover)]'
+                // The ink fill of `SegmentedControl`'s picked chip, so "on"
+                // reads the same here as in every other chip row. The old
+                // terracotta wash made a selected weekday look like the brand
+                // action.
+                ? 'border-[var(--color-btn-primary-bg)] bg-[var(--color-btn-primary-bg)] text-[var(--color-btn-primary-fg)]'
+                : 'border-[var(--color-border)] bg-[var(--color-surface)] text-[var(--color-text-secondary)] hover:border-[var(--color-outline)] hover:text-[var(--color-text-primary)]'
               }
             `}
           >
diff --git a/desktop/src/components/tasks/NewTaskModal.tsx b/desktop/src/components/tasks/NewTaskModal.tsx
index c8d84f57..d5a7b3e1 100644
--- a/desktop/src/components/tasks/NewTaskModal.tsx
+++ b/desktop/src/components/tasks/NewTaskModal.tsx
@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react'
+import { Clock, Info, TriangleAlert } from 'lucide-react'
 import { useTaskStore } from '../../stores/taskStore'
 import { useSessionStore } from '../../stores/sessionStore'
 import { useAdapterStore } from '../../stores/adapterStore'
@@ -6,7 +7,7 @@ import { Modal } from '@/components/ui/Modal'
 import { Badge } from '@/components/ui/Badge'
 import { Card } from '@/components/ui/Card'
 import { Checkbox } from '@/components/ui/Checkbox'
-import { Input } from '@/components/ui/Input'
+import { FIELD_BASE_CLASSES, FIELD_SIZE_CLASSES, Input, fieldStateClasses } from '@/components/ui/Input'
 import { SelectField } from '@/components/ui/SelectField'
 import { Button } from '@/components/ui/Button'
 import { PromptEditor } from './PromptEditor'
@@ -171,27 +172,26 @@ export function NewTaskModal({ open, onClose, editTask }: Props) {
       width={760}
       title={isEdit ? t('tasks.editTitle') : t('newTask.title')}
       footer={
-        <div className="flex w-full flex-wrap items-center gap-2.5 border-t border-[var(--color-border)] pt-4">
+        <div className="flex w-full flex-wrap items-center gap-2 border-t border-[var(--color-border)] pt-4">
           {/* The human-readable schedule reads as the sentence the buttons are
               about to commit to, so it sits with them rather than in the body. */}
-          <span aria-hidden="true" className="material-symbols-outlined shrink-0 text-[16px] text-[var(--color-text-secondary)]">schedule</span>
-          <span className="min-w-0 text-[13.5px] text-[var(--color-text-secondary)]">{cronPreview}</span>
-          <div className="ml-auto flex shrink-0 gap-2.5">
-            <Button variant="secondary" onClick={onClose}>{t('common.cancel')}</Button>
-            <Button onClick={handleSubmit} disabled={!canSubmit} loading={isSubmitting}>
+          <Clock size={14} strokeWidth={1.75} aria-hidden="true" className="shrink-0 text-[var(--color-text-tertiary)]" />
+          <span className="min-w-0 text-[13px] text-[var(--color-text-secondary)]">{cronPreview}</span>
+          <div className="ml-auto flex shrink-0 gap-2">
+            <Button variant="secondary" size="base" onClick={onClose}>{t('common.cancel')}</Button>
+            <Button size="base" onClick={handleSubmit} disabled={!canSubmit} loading={isSubmitting}>
               {isEdit ? t('tasks.saveChanges') : t('newTask.create')}
             </Button>
           </div>
         </div>
       }
     >
-      {/* Info banner */}
-      <Card radius="md" surface="low" padding="none" className="mb-5 flex items-center gap-2.5 px-[15px] py-[11px]">
-        <span aria-hidden="true" className="material-symbols-outlined shrink-0 text-[16px] text-[var(--color-text-secondary)]">info</span>
-        <span className="text-[13.5px] text-[var(--color-text-secondary)]">
-          {t('newTask.localWarning')}
-        </span>
-      </Card>
+      {/* Info banner — the same light info strip the page uses for its
+          desktop-online notice. */}
+      <div className="mb-5 flex items-center gap-2 rounded-[var(--radius-md)] bg-[var(--color-info-container)] px-3 py-2 text-[13px] leading-[1.5] text-[var(--color-on-info-container)]">
+        <Info size={14} strokeWidth={1.75} aria-hidden="true" className="shrink-0" />
+        <span>{t('newTask.localWarning')}</span>
+      </div>
 
       <div className="flex flex-col gap-4">
         <Input
@@ -251,7 +251,9 @@ export function NewTaskModal({ open, onClose, editTask }: Props) {
               aria-label={t('newTask.time')}
               value={time}
               onChange={(e) => setTime(e.target.value)}
-              className="h-10 w-40 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] px-3 font-mono text-sm tabular-nums text-[var(--color-text-primary)] outline-none transition-colors focus:border-[var(--color-border-focus)]"
+              // The shared field classes, so this sits flush with the
+              // `SelectField` beside it in height, corner and focus ring.
+              className={`${FIELD_BASE_CLASSES} ${FIELD_SIZE_CLASSES.lg} ${fieldStateClasses(false)} w-40 font-mono tabular-nums`}
             />
           )}
         </div>
@@ -327,7 +329,7 @@ export function NewTaskModal({ open, onClose, editTask }: Props) {
             19 across the app that varied in size, accent token and how the
             label was associated; `Checkbox` also carries the disabled styling
             the channel rows were spelling out by hand. */}
-        <Card radius="lg" padding="none" className="flex flex-col gap-3 px-[18px] py-[15px]">
+        <Card radius="lg" surface="lowest" padding="none" className="flex flex-col gap-3 px-4 py-3.5">
           <Checkbox
             label={t('newTask.notifyOnComplete')}
             description={t('newTask.notifyHint')}
@@ -390,10 +392,9 @@ export function NewTaskModal({ open, onClose, editTask }: Props) {
                   tone="warning"
                   size="sm"
                   wrap
-                  bordered
                   pill={false}
                   role="alert"
-                  icon={<span aria-hidden="true" className="material-symbols-outlined text-[13px]">warning</span>}
+                  icon={<TriangleAlert size={12} strokeWidth={2} aria-hidden="true" className="shrink-0" />}
                 >
                   {t('newTask.noChannelSelected')}
                 </Badge>
diff --git a/desktop/src/components/tasks/PromptEditor.tsx b/desktop/src/components/tasks/PromptEditor.tsx
index 76821e0b..386e4bfb 100644
--- a/desktop/src/components/tasks/PromptEditor.tsx
+++ b/desktop/src/components/tasks/PromptEditor.tsx
@@ -1,3 +1,4 @@
+import { Gavel, TriangleAlert } from 'lucide-react'
 import { ModelSelector } from '../controls/ModelSelector'
 import { DirectoryPicker } from '@/components/composite/DirectoryPicker'
 import { useTranslation } from '../../i18n'
@@ -42,19 +43,19 @@ export function PromptEditor({
         onChange={(e) => onChange(e.target.value)}
         placeholder={placeholder}
         rows={4}
-        className="w-full resize-y bg-transparent px-4 py-3.5 text-sm leading-[1.8] text-[var(--color-text-primary)] outline-none placeholder:text-[var(--color-text-tertiary)]"
+        className="w-full resize-y bg-transparent px-4 py-3 text-sm leading-[1.7] text-[var(--color-text-primary)] outline-none placeholder:text-[var(--color-text-tertiary)]"
         style={{ minHeight: 120 }}
       />
 
       {/* Bottom toolbar. The rule was `--color-border` at `/40`, which Safari 15
           WebView drops entirely — the toolbar then floated with no seam. */}
-      <div className="flex flex-col gap-2 rounded-b-[var(--radius-xl)] border-t border-[var(--color-border)] bg-[var(--color-surface-container-low)] px-3 py-2.5">
+      <div className="flex flex-col gap-2 rounded-b-[var(--radius-xl)] border-t border-[var(--color-border)] bg-[var(--color-surface-sidebar)] px-3 py-2.5">
         {/* Row 1: Permission + Model selectors */}
         <div className="flex items-center justify-between">
           <Badge
             tone="danger"
             size="md"
-            icon={<span aria-hidden="true" className="material-symbols-outlined text-[14px]">gavel</span>}
+            icon={<Gavel size={12} strokeWidth={2} aria-hidden="true" />}
           >
             {t('newTask.fullPermissions')}
           </Badge>
@@ -73,10 +74,10 @@ export function PromptEditor({
         </div>
 
         {/* `wrap` matters here: the sentence ends in an absolute folder path,
-            which a default badge would push onto one unbreakable line. The
-            fill also moves off `bg-[var(--color-error)]/8` — Safari 15 WebView
-            drops that color function, so the strip had no background there. */}
-        <Badge tone="danger" size="sm" wrap bordered pill={false} className="w-full" icon={<span aria-hidden="true" className="material-symbols-outlined text-[13px]">warning</span>}>
+            which a default badge would push onto one unbreakable line. Fill
+            only, no border: a tinted strip with an edge as well is the
+            "fill + border" double the spec rules out for inset blocks. */}
+        <Badge tone="danger" size="sm" wrap pill={false} className="w-full" icon={<TriangleAlert size={12} strokeWidth={2} aria-hidden="true" className="shrink-0" />}>
           {t('promptEditor.bypassWarning')}{folderPath ? ` ${t('promptEditor.within')} ${folderPath}` : ` ${t('promptEditor.selectFolder')}`}.
         </Badge>
       </div>
diff --git a/desktop/src/components/tasks/TaskEmptyState.tsx b/desktop/src/components/tasks/TaskEmptyState.tsx
index 3b80cbff..5d07024d 100644
--- a/desktop/src/components/tasks/TaskEmptyState.tsx
+++ b/desktop/src/components/tasks/TaskEmptyState.tsx
@@ -1,3 +1,5 @@
+import { CalendarClock } from 'lucide-react'
+import { Card } from '@/components/ui/Card'
 import { EmptyState } from '@/components/ui/EmptyState'
 import { useTranslation } from '../../i18n'
 
@@ -6,26 +8,23 @@ type Props = {
 }
 
 /**
- * The clock now sits in the shared 48px bordered icon box instead of a 64px
- * tinted circle, and the description drops from `text-sm` to the shared
- * `text-xs` — the deliberate cost of having one empty state instead of 24.
- * In exchange the title is a real heading, which it was not before.
+ * The empty list sits in the same white, hairline-bordered card the filled
+ * list uses, so creating the first task does not move the page's frame. The
+ * action is `secondary`: the page head already carries the primary one, and
+ * two ink blocks on one screen compete for the same click.
  */
 export function TaskEmptyState({ onCreateTask }: Props) {
   const t = useTranslation()
   return (
-    <EmptyState
-      variant="plain"
-      size="lg"
-      icon={
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-          <circle cx="12" cy="12" r="10" />
-          <polyline points="12 6 12 12 16 14" />
-        </svg>
-      }
-      title={t('tasks.emptyTitle')}
-      description={t('tasks.emptyDesc')}
-      action={{ label: t('tasks.newTask'), onClick: onCreateTask, variant: 'primary' }}
-    />
+    <Card radius="lg" surface="lowest" padding="none">
+      <EmptyState
+        variant="plain"
+        size="md"
+        icon={<CalendarClock size={20} strokeWidth={1.75} aria-hidden="true" />}
+        title={t('tasks.emptyTitle')}
+        description={t('tasks.emptyDesc')}
+        action={{ label: t('tasks.newTask'), onClick: onCreateTask, variant: 'secondary' }}
+      />
+    </Card>
   )
 }
diff --git a/desktop/src/components/tasks/TaskList.tsx b/desktop/src/components/tasks/TaskList.tsx
index b4a03bc0..69956b0d 100644
--- a/desktop/src/components/tasks/TaskList.tsx
+++ b/desktop/src/components/tasks/TaskList.tsx
@@ -16,7 +16,7 @@ export function TaskList({ tasks }: Props) {
   return (
     <div>
       {/* Stats */}
-      <div className="grid grid-cols-3 gap-3.5">
+      <div className="grid grid-cols-3 gap-3">
         <StatCard label={t('tasks.totalTasks')} value={String(tasks.length)} />
         <StatCard label={t('tasks.active')} value={String(enabledCount)} />
         <StatCard label={t('tasks.disabled')} value={String(tasks.length - enabledCount)} />
@@ -33,9 +33,10 @@ export function TaskList({ tasks }: Props) {
           last row's tail keeps the row hover fill and the open runs drawer
           inside the card's edge without a clipping context. */}
       <Card
-        radius="xl"
+        radius="lg"
+        surface="lowest"
         padding="none"
-        className="mt-[22px] divide-y divide-[var(--color-border-separator)] [&>*:first-child>*:first-child]:rounded-t-[var(--radius-xl)] [&>*:last-child>*:last-child]:rounded-b-[var(--radius-xl)]"
+        className="mt-4 divide-y divide-[var(--color-border)] [&>*:first-child>*:first-child]:rounded-t-[var(--radius-lg)] [&>*:last-child>*:last-child]:rounded-b-[var(--radius-lg)]"
       >
         {tasks.map((task) => (
           <TaskRow
@@ -50,21 +51,14 @@ export function TaskList({ tasks }: Props) {
   )
 }
 
-/**
- * `surface="none"` rather than one of `Card`'s named layers: the handoff puts
- * these on `--color-surface-container`, which the component has no name for,
- * and an empty surface class cannot fight the one passed below it.
- */
+/** Label above, figure below: the figure is what the eye lands on. */
 function StatCard({ label, value }: { label: string; value: string }) {
   return (
-    <Card radius="xl" surface="none" padding="none" className="bg-[var(--color-surface-container)] px-[22px] py-[18px]">
-      <div
-        className="text-[26px] font-bold leading-none text-[var(--color-text-primary)]"
-        style={{ fontFamily: 'var(--font-headline)' }}
-      >
+    <Card radius="lg" surface="lowest" padding="none" className="flex flex-col gap-1 px-4 py-3.5">
+      <div className="text-xs text-[var(--color-text-tertiary)]">{label}</div>
+      <div className="text-[22px] font-semibold leading-[1.2] tabular-nums text-[var(--color-text-primary)]">
         {value}
       </div>
-      <div className="mt-1.5 text-xs text-[var(--color-text-tertiary)]">{label}</div>
     </Card>
   )
 }
diff --git a/desktop/src/components/tasks/TaskRow.tsx b/desktop/src/components/tasks/TaskRow.tsx
index cd60bca1..787137e7 100644
--- a/desktop/src/components/tasks/TaskRow.tsx
+++ b/desktop/src/components/tasks/TaskRow.tsx
@@ -1,4 +1,5 @@
-import { useCallback, useState, useRef } from 'react'
+import { Fragment, useCallback, useState, useRef } from 'react'
+import { CirclePause, CirclePlay, Clock, Ellipsis, LoaderCircle, Pencil, Play, ScrollText, Trash2 } from 'lucide-react'
 import type { CronTask } from '../../types/task'
 import { useTaskStore } from '../../stores/taskStore'
 import { useTranslation } from '../../i18n'
@@ -66,49 +67,61 @@ export function TaskRow({ task, showLogs, onToggleLogs }: Props) {
     deleteTask(task.id)
   }
 
-  const menuItem = 'flex items-center gap-2.5 w-full px-3 py-2 text-[13px] text-left rounded-[var(--radius-md)] transition-colors'
+  const menuItem = 'flex h-8 w-full items-center gap-2 rounded-[var(--radius-sm)] px-2.5 text-left text-[13px] transition-colors'
 
   // One meta line rather than three stacked fragments, per the handoff: the
   // row is scanned for its name and its schedule, and the rest reads as a
-  // single caption.
-  const meta = [
-    `${t('tasks.createdAt')}${new Date(task.createdAt).toLocaleDateString()}`,
-    task.lastFiredAt ? `${t('tasks.lastRunAt')}${new Date(task.lastFiredAt).toLocaleDateString()}` : null,
-    task.description || null,
-  ].filter(Boolean).join(' · ')
+  // single caption. Dates sit in tabular mono so they line up down the list;
+  // the labels and the free-text description stay in the UI face.
+  const meta: Array<{ key: string; label?: string; value: string; mono: boolean }> = [
+    { key: 'created', label: t('tasks.createdAt'), value: new Date(task.createdAt).toLocaleDateString(), mono: true },
+    ...(task.lastFiredAt
+      ? [{ key: 'last', label: t('tasks.lastRunAt'), value: new Date(task.lastFiredAt).toLocaleDateString(), mono: true }]
+      : []),
+    ...(task.description ? [{ key: 'desc', value: task.description, mono: false }] : []),
+  ]
 
   return (
     <div>
-      <div className="group flex items-center gap-3 px-5 py-4 transition-colors hover:bg-[var(--color-surface-hover)]">
+      <div className="group flex items-center gap-3 px-4 py-3 transition-colors hover:bg-[var(--color-surface-hover)]">
         {/* Left: status + info */}
         <StatusDot
           tone={task.enabled ? 'success' : 'neutral'}
-          size="lg"
+          size="md"
           label={task.enabled ? t('tasks.active') : t('tasks.disabled')}
         />
         <div className="min-w-0 flex-1">
-          <div className="truncate text-[15px] font-bold text-[var(--color-text-primary)]">{task.name}</div>
-          <div className="mt-[3px] truncate text-[12.5px] text-[var(--color-text-tertiary)]">{meta}</div>
+          <div className="truncate text-sm font-medium text-[var(--color-text-primary)]">{task.name}</div>
+          <div className="mt-0.5 truncate text-xs text-[var(--color-text-tertiary)]">
+            {meta.map((part, index) => (
+              <Fragment key={part.key}>
+                {index > 0 && ' · '}
+                {part.label}
+                {part.mono
+                  ? <span className="font-mono text-[11px] tabular-nums">{part.value}</span>
+                  : part.value}
+              </Fragment>
+            ))}
+          </div>
         </div>
 
-        {/* Right: cron + actions */}
-        <Badge mono size="sm" pill={false} title={task.cron}>
+        {/* Right: schedule + actions. The schedule is a sentence, not code, so
+            it is not set in mono; the raw cron stays on hover. */}
+        <Badge title={task.cron} icon={<Clock size={11} strokeWidth={2} aria-hidden="true" />}>
           {describeCron(task.cron, t)}
         </Badge>
 
-        <div className="flex shrink-0 items-center gap-1">
+        <div className="flex shrink-0 items-center gap-0.5">
           {/* Run Now */}
           <div className="relative" ref={confirmAction === 'run' ? confirmRef : undefined}>
             <IconButton
-              icon={
-                <span className={`material-symbols-outlined text-[18px] ${isRunning ? 'animate-spin' : ''}`}>
-                  {isRunning ? 'sync' : 'play_arrow'}
-                </span>
-              }
+              icon={isRunning
+                ? <LoaderCircle size={16} strokeWidth={1.75} aria-hidden="true" className="animate-spin text-[var(--color-info)]" />
+                : <Play size={16} strokeWidth={1.75} aria-hidden="true" />}
               label={t('tasks.runNow')}
               showTooltip={task.enabled}
-              tone={task.enabled ? 'brand' : 'muted'}
-              bordered
+              size="sm"
+              tone="secondary"
               disabled={isRunning || !task.enabled}
               onClick={() => setConfirmAction(confirmAction === 'run' ? null : 'run')}
             />
@@ -124,15 +137,15 @@ export function TaskRow({ task, showLogs, onToggleLogs }: Props) {
           </div>
 
           {/* View Logs — `pressed` carries both the resting fill and the
-              `aria-pressed` state the hand-rolled className could not. It also
-              supplies its own foreground, so the tone stays `muted` in both
-              states: two `text-[…]` values would be resolved by stylesheet
-              order rather than by which one we meant. */}
+              `aria-pressed` state the hand-rolled className could not. The
+              tone is the same quiet `secondary` as its neighbours in both
+              states; no className color override, since two `text-[…]` values
+              would be resolved by stylesheet order. */}
           <IconButton
-            icon={<span className="material-symbols-outlined text-[18px]">receipt_long</span>}
+            icon={<ScrollText size={16} strokeWidth={1.75} aria-hidden="true" />}
             label={t('tasks.viewLogs')}
-            tone="muted"
-            bordered
+            size="sm"
+            tone="secondary"
             pressed={showLogs}
             onClick={onToggleLogs}
           />
@@ -140,9 +153,10 @@ export function TaskRow({ task, showLogs, onToggleLogs }: Props) {
           {/* More menu */}
           <div className="relative" ref={menuRef}>
             <IconButton
-              icon={<span className="material-symbols-outlined text-[18px]">more_vert</span>}
+              icon={<Ellipsis size={16} strokeWidth={1.75} aria-hidden="true" />}
               label={t('tasks.moreActions')}
-              tone="muted"
+              size="sm"
+              tone="secondary"
               aria-haspopup="menu"
               aria-expanded={showMenu}
               onClick={() => { setShowMenu(!showMenu); setConfirmAction(null) }}
@@ -155,7 +169,7 @@ export function TaskRow({ task, showLogs, onToggleLogs }: Props) {
                   onClick={() => { setShowMenu(false); setShowEdit(true) }}
                   className={`${menuItem} text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)]`}
                 >
-                  <span aria-hidden="true" className="material-symbols-outlined text-[16px] text-[var(--color-text-secondary)]">edit</span>
+                  <Pencil size={14} strokeWidth={1.75} aria-hidden="true" className="text-[var(--color-text-tertiary)]" />
                   {t('tasks.edit')}
                 </button>
 
@@ -164,13 +178,13 @@ export function TaskRow({ task, showLogs, onToggleLogs }: Props) {
                   onClick={() => setConfirmAction('toggle')}
                   className={`${menuItem} text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)]`}
                 >
-                  <span aria-hidden="true" className="material-symbols-outlined text-[16px] text-[var(--color-text-secondary)]">
-                    {task.enabled ? 'pause_circle' : 'play_circle'}
-                  </span>
+                  {task.enabled
+                    ? <CirclePause size={14} strokeWidth={1.75} aria-hidden="true" className="text-[var(--color-text-tertiary)]" />
+                    : <CirclePlay size={14} strokeWidth={1.75} aria-hidden="true" className="text-[var(--color-text-tertiary)]" />}
                   {task.enabled ? t('common.disable') : t('common.enable')}
                 </button>
 
-                <div className="my-1 h-px bg-[var(--color-border-separator)]" />
+                <div className="mx-1 my-1 h-px bg-[var(--color-border)]" />
 
                 {/* Delete — the hover fill was `--color-error-container` at `/18`
                     alpha, which Safari 15 WebView drops; `-soft` is the opaque
@@ -179,7 +193,7 @@ export function TaskRow({ task, showLogs, onToggleLogs }: Props) {
                   onClick={() => setConfirmAction('delete')}
                   className={`${menuItem} text-[var(--color-error)] hover:bg-[var(--color-error-soft)]`}
                 >
-                  <span aria-hidden="true" className="material-symbols-outlined text-[16px]">delete</span>
+                  <Trash2 size={14} strokeWidth={1.75} aria-hidden="true" />
                   {t('common.delete')}
                 </button>
               </div>
diff --git a/desktop/src/components/tasks/TaskRunsPanel.tsx b/desktop/src/components/tasks/TaskRunsPanel.tsx
index 12a5c745..7ac81992 100644
--- a/desktop/src/components/tasks/TaskRunsPanel.tsx
+++ b/desktop/src/components/tasks/TaskRunsPanel.tsx
@@ -1,4 +1,5 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState, type ReactNode } from 'react'
+import { ArrowUpRight, CircleAlert, CircleCheck, LoaderCircle, TimerOff, X } from 'lucide-react'
 import { useTaskStore } from '../../stores/taskStore'
 import { useChatStore } from '../../stores/chatStore'
 import { useTabStore } from '../../stores/tabStore'
@@ -6,6 +7,7 @@ import { useTranslation } from '../../i18n'
 import { parseRunOutput } from '../../lib/parseRunOutput'
 import type { TaskRun } from '../../types/task'
 import { MarkdownRenderer } from '../markdown/MarkdownRenderer'
+import { Badge, type Tone } from '@/components/ui/Badge'
 import { Button } from '@/components/ui/Button'
 import { Card } from '@/components/ui/Card'
 import { EmptyState } from '@/components/ui/EmptyState'
@@ -23,7 +25,7 @@ function RunOutput({ run }: { run: TaskRun }) {
     return (
       <ErrorState
         size="sm"
-        className="mt-3"
+        className="mt-2.5"
         title={t('common.error')}
         detail={
           <span className="block max-h-40 overflow-y-auto whitespace-pre-wrap break-words">{run.error}</span>
@@ -36,17 +38,17 @@ function RunOutput({ run }: { run: TaskRun }) {
 
   if (!text) {
     return (
-      <Card radius="lg" padding="none" className="mt-3 px-[18px] py-3 text-xs italic text-[var(--color-text-tertiary)]">
+      <Card radius="lg" surface="lowest" padding="none" className="mt-2.5 px-4 py-3 text-xs text-[var(--color-text-tertiary)]">
         {run.sessionId ? t('tasks.outputHintSession') : t('tasks.noOutputText')}
       </Card>
     )
   }
 
-  // The handoff's "summary card": a bordered sheet on the page ground rather
-  // than a tinted inset, so the commit hashes inside it read as badges against
-  // a surface instead of two greys stacked on each other.
+  // The handoff's "summary card": a white bordered sheet on the drawer's
+  // sunken ground rather than a second tinted inset, so the commit hashes
+  // inside it read as chips against a surface instead of two greys stacked.
   return (
-    <Card radius="lg" padding="none" className="mt-3 max-h-48 overflow-y-auto px-[22px] py-[18px]">
+    <Card radius="lg" surface="lowest" padding="none" className="mt-2.5 max-h-48 overflow-y-auto px-4 py-3">
       <MarkdownRenderer
         content={text}
         variant="compact"
@@ -62,11 +64,15 @@ type Props = {
   refreshKey?: number
 }
 
-const STATUS_CONFIG: Record<string, { icon: string; color: string }> = {
-  running:   { icon: 'sync',         color: 'var(--color-warning)' },
-  completed: { icon: 'check_circle', color: 'var(--color-success)' },
-  failed:    { icon: 'error',        color: 'var(--color-error)' },
-  timeout:   { icon: 'timer_off',    color: 'var(--color-error)' },
+// The app-wide status vocabulary: in progress = info, done = success, failed
+// (including a timeout) = error. Running used to borrow the warning amber,
+// which elsewhere means "waiting for you".
+const ICON_PROPS = { size: 12, strokeWidth: 2, 'aria-hidden': true } as const
+const STATUS_CONFIG: Record<string, { icon: ReactNode; tone: Tone }> = {
+  running:   { icon: <LoaderCircle {...ICON_PROPS} className="animate-spin" />, tone: 'info' },
+  completed: { icon: <CircleCheck {...ICON_PROPS} />, tone: 'success' },
+  failed:    { icon: <CircleAlert {...ICON_PROPS} />, tone: 'danger' },
+  timeout:   { icon: <TimerOff {...ICON_PROPS} />, tone: 'danger' },
 }
 
 export function TaskRunsPanel({ taskId, onClose, refreshKey }: Props) {
@@ -243,12 +249,12 @@ export function TaskRunsPanel({ taskId, onClose, refreshKey }: Props) {
   return (
     // A drawer under its row, not a card inside it: the border-top continues
     // the list's own separator and the fill is the next surface layer down.
-    <div className="border-t border-[var(--color-border-separator)] bg-[var(--color-surface-container-low)]">
+    <div className="border-t border-[var(--color-border)] bg-[var(--color-surface-sidebar)]">
       {/* Header */}
-      <div className="flex items-center justify-between px-5 pb-1.5 pt-3.5">
-        <span className="text-[14.5px] font-bold text-[var(--color-text-primary)]">{t('tasks.logsTitle')}</span>
+      <div className="flex items-center justify-between px-4 pb-1 pt-2.5">
+        <span className="text-[13px] font-semibold text-[var(--color-text-secondary)]">{t('tasks.logsTitle')}</span>
         <IconButton
-          icon={<span className="material-symbols-outlined text-[16px]">close</span>}
+          icon={<X size={14} strokeWidth={1.75} aria-hidden="true" />}
           label={t('tasks.close')}
           size="xs"
           tone="muted"
@@ -257,7 +263,7 @@ export function TaskRunsPanel({ taskId, onClose, refreshKey }: Props) {
       </div>
 
       {/* Content */}
-      <div className="max-h-64 overflow-y-auto px-5 pb-4">
+      <div className="max-h-64 overflow-y-auto px-4 pb-3">
         {loading ? (
           // Same 16px brand spinner in the same `py-6` box; the label goes from
           // an `aria-label` on the SVG to an `aria-live` region, so the wait is
@@ -266,46 +272,37 @@ export function TaskRunsPanel({ taskId, onClose, refreshKey }: Props) {
         ) : runs.length === 0 ? (
           <EmptyState variant="plain" size="sm" description={t('tasks.noLogs')} />
         ) : (
-          <div className="divide-y divide-[var(--color-border-separator)]">
+          <div className="divide-y divide-[var(--color-border)]">
             {runs.map((run) => {
               const cfg = STATUS_CONFIG[run.status] || STATUS_CONFIG.failed!
               const isExpanded = expandedId === run.id
               return (
-                <div key={run.id} className="py-2.5">
-                  <div className="flex items-center gap-[11px]">
-                    {/* Status icon */}
-                    <span
-                      aria-hidden="true"
-                      className={`material-symbols-outlined shrink-0 text-[17px] ${run.status === 'running' ? 'animate-spin' : ''}`}
-                      style={{ color: cfg.color, fontVariationSettings: "'FILL' 1" }}
-                    >
-                      {cfg.icon}
-                    </span>
-
-                    {/* Status text */}
-                    <span className="text-[13.5px] font-bold" style={{ color: cfg.color }}>
+                <div key={run.id} className="py-2">
+                  <div className="flex min-h-7 items-center gap-2.5">
+                    {/* Status */}
+                    <Badge tone={cfg.tone} icon={cfg.icon}>
                       {t(`tasks.runStatus.${run.status}` as any)} {/* dynamic key */}
-                    </span>
+                    </Badge>
 
                     {/* Time — mono, so timestamps line up down the column */}
-                    <span className="font-mono text-[13px] tabular-nums text-[var(--color-text-secondary)]">
+                    <span className="font-mono text-xs tabular-nums text-[var(--color-text-secondary)]">
                       {new Date(run.startedAt).toLocaleString()}
                     </span>
 
                     {/* Duration */}
                     {run.durationMs != null && (
-                      <span className="text-[13px] text-[var(--color-text-tertiary)]">
+                      <span className="font-mono text-[11px] tabular-nums text-[var(--color-text-tertiary)]">
                         {t('tasks.duration', { s: Math.round(run.durationMs / 1000) })}
                       </span>
                     )}
 
-                    <div className="ml-auto flex items-center gap-2">
+                    <div className="ml-auto flex items-center gap-1">
                       {/* Open session — only after run completes (session is empty while running) */}
                       {run.sessionId && run.status !== 'running' && (
                         <Button
-                          variant="link"
+                          variant="ghost"
                           size="sm"
-                          icon={<span aria-hidden="true" className="material-symbols-outlined text-[13px]">north_east</span>}
+                          icon={<ArrowUpRight size={12} strokeWidth={2} aria-hidden="true" />}
                           iconPosition="end"
                           onClick={() => openSession(run.sessionId!, run.taskName)}
                         >
@@ -331,13 +328,13 @@ export function TaskRunsPanel({ taskId, onClose, refreshKey }: Props) {
                   {isExpanded && (run.output || run.error) ? (
                     <RunOutput run={run} />
                   ) : isExpanded && detailState?.runId === run.id && detailState.status === 'loading' ? (
-                    <Card radius="lg" padding="none" className="mt-3 px-[18px] py-3 text-xs text-[var(--color-text-tertiary)]">
+                    <Card radius="lg" surface="lowest" padding="none" className="mt-2.5 px-4 py-3 text-xs text-[var(--color-text-tertiary)]">
                       {t('common.loading')}
                     </Card>
                   ) : isExpanded && detailState?.runId === run.id && detailState.status === 'error' ? (
                     <ErrorState
                       size="sm"
-                      className="mt-3"
+                      className="mt-2.5"
                       title={t('common.error')}
                       onRetry={() => { void loadDetail(run) }}
                       retryLabel={t('common.retry')}
diff --git a/desktop/src/components/trajectory/TrajectoryDetailPanel.tsx b/desktop/src/components/trajectory/TrajectoryDetailPanel.tsx
index 2e1921d7..7d154dbb 100644
--- a/desktop/src/components/trajectory/TrajectoryDetailPanel.tsx
+++ b/desktop/src/components/trajectory/TrajectoryDetailPanel.tsx
@@ -104,14 +104,14 @@ export function TrajectoryDetailPanel({
       {!drawer && <ResizeHandle width={Math.min(width, maxWidth)} maxWidth={maxWidth} onWidthChange={onWidthChange} />}
       <header className="flex shrink-0 items-center gap-2 px-4 pt-3">
         {drawer && (
-          <IconButton icon={<ArrowLeft size={14} />} label={t('trajectory.detail.back')} size="sm" onClick={onClose} />
+          <IconButton icon={<ArrowLeft size={14} strokeWidth={1.75} />} label={t('trajectory.detail.back')} size="sm" tone="muted" onClick={onClose} />
         )}
         <Badge tone={row.isError ? 'danger' : KIND_TONES[row.kind]} variant={KIND_VARIANTS[row.kind]} size="xs" pill={false}>{t(KIND_LABEL_KEYS[row.kind])}</Badge>
-        <span className="min-w-0 truncate text-[12.5px] text-[var(--color-text-secondary)]">
+        <span className="min-w-0 truncate text-[13px] text-[var(--color-text-secondary)]">
           {row.snapshot ? kindLabel : subtitle}
           {row.snapshot && subtitle ? ` · ${subtitle}` : ''}
         </span>
-        {!drawer && <IconButton icon={<X size={14} />} label={t('common.close')} size="sm" className="ml-auto" onClick={onClose} />}
+        {!drawer && <IconButton icon={<X size={14} strokeWidth={1.75} />} label={t('common.close')} size="sm" tone="muted" className="ml-auto" onClick={onClose} />}
       </header>
       <div className="shrink-0 px-4 pt-2">
         <SegmentedControl
@@ -252,7 +252,7 @@ function RowDetail({
                 key={use.id}
                 type="button"
                 onClick={() => onSelectRow(`t:${use.id}`)}
-                className="rounded-full border border-[var(--color-border)] px-2.5 py-0.5 font-mono text-[11.5px] text-[var(--color-text-secondary)] hover:border-[var(--color-outline)] hover:text-[var(--color-text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]"
+                className="rounded-[var(--radius-xs)] bg-[var(--color-surface-container)] px-2 py-0.5 font-mono text-[12px] text-[var(--color-text-secondary)] transition-colors hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]"
               >
                 {use.name}
               </button>
@@ -294,7 +294,7 @@ function Overview({
     items.push({
       label: t('trajectory.detail.status'),
       value: row.isError
-        ? <span className="inline-flex items-center gap-1 text-[var(--color-error)]"><CircleX size={13} aria-hidden />{t('trajectory.status.error')}</span>
+        ? <span className="inline-flex items-center gap-1 text-[var(--color-error)]"><CircleX size={14} strokeWidth={1.75} aria-hidden />{t('trajectory.status.error')}</span>
         : toolHasResult(row)
           ? t('trajectory.status.done')
           : t(running ? 'trajectory.tool.running' : 'trajectory.tool.noResult'),
@@ -328,7 +328,7 @@ function Overview({
     items.push({
       label: t('trajectory.detail.issuedBy'),
       value: (
-        <button type="button" className="rounded-[var(--radius-sm)] text-[var(--color-brand)] hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]" onClick={() => onSelectRow(row.parentId!)}>
+        <button type="button" className="rounded-[var(--radius-xs)] text-[var(--color-text-accent)] hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]" onClick={() => onSelectRow(row.parentId!)}>
           {t('trajectory.kind.assistant')}
         </button>
       ),
@@ -347,12 +347,12 @@ function Overview({
       {(onLocateInChat || row.agentId) && (
         <div className="flex flex-wrap gap-2">
           {onLocateInChat && (row.kind === 'user' || row.kind === 'assistant' || row.kind === 'tool') && (
-            <Button size="sm" variant="secondary" icon={<LocateFixed size={13} />} onClick={() => onLocateInChat(row)}>
+            <Button size="sm" variant="secondary" icon={<LocateFixed size={14} strokeWidth={1.75} />} onClick={() => onLocateInChat(row)}>
               {t('trajectory.detail.locateInChat')}
             </Button>
           )}
           {row.agentId && (
-            <Button size="sm" variant="secondary" icon={<Bot size={13} />} onClick={() => onOpenAgent(row.agentId!, agentLabelFromInput(row.inputPreview, row.agentId!))}>
+            <Button size="sm" variant="secondary" icon={<Bot size={14} strokeWidth={1.75} />} onClick={() => onOpenAgent(row.agentId!, agentLabelFromInput(row.inputPreview, row.agentId!))}>
               {t('trajectory.subagent.view')}
             </Button>
           )}
diff --git a/desktop/src/components/trajectory/TrajectoryLinkContext.test.tsx b/desktop/src/components/trajectory/TrajectoryLinkContext.test.tsx
index c1c40669..2b4d57b9 100644
--- a/desktop/src/components/trajectory/TrajectoryLinkContext.test.tsx
+++ b/desktop/src/components/trajectory/TrajectoryLinkContext.test.tsx
@@ -28,7 +28,9 @@ describe('view in trajectory', () => {
 
   it('does not toggle the tool card when the action is clicked', () => {
     renderTool('toolu_1', true)
-    const header = screen.getByRole('button', { name: /Bash/ })
+    // The row is named by its verb ("Run ls"); the raw tool name is its tooltip.
+    const header = screen.getByRole('button', { name: /^Run\b/ })
+    expect(header).toHaveAttribute('title', expect.stringContaining('Bash'))
     const before = header.getAttribute('aria-expanded')
     fireEvent.click(screen.getByRole('button', { name: 'View in trajectory' }))
     expect(header.getAttribute('aria-expanded')).toBe(before)
diff --git a/desktop/src/components/trajectory/TrajectoryLinkContext.tsx b/desktop/src/components/trajectory/TrajectoryLinkContext.tsx
index 1d657dd8..4592eabf 100644
--- a/desktop/src/components/trajectory/TrajectoryLinkContext.tsx
+++ b/desktop/src/components/trajectory/TrajectoryLinkContext.tsx
@@ -19,7 +19,7 @@ export function ViewInTrajectoryButton({ toolUseId, className }: { toolUseId: st
   if (!link || toolUseId.includes('/')) return null
   return (
     <IconButton
-      icon={<ListTree size={13} />}
+      icon={<ListTree size={14} strokeWidth={1.75} />}
       label={t('trajectory.viewInTrajectory')}
       size="xs"
       tone="muted"
diff --git a/desktop/src/components/trajectory/TrajectoryMinimap.tsx b/desktop/src/components/trajectory/TrajectoryMinimap.tsx
index 3161e4e5..080d27c0 100644
--- a/desktop/src/components/trajectory/TrajectoryMinimap.tsx
+++ b/desktop/src/components/trajectory/TrajectoryMinimap.tsx
@@ -57,7 +57,7 @@ export const TrajectoryMinimap = memo(function TrajectoryMinimap({ model, viewpo
 
   return (
     <div className="flex shrink-0 gap-2 border-b border-[var(--color-border)] px-3 py-1.5" data-testid="trajectory-minimap">
-      <div className="flex w-9 shrink-0 flex-col text-right text-[10px] leading-[14px] text-[var(--color-text-tertiary)]" aria-hidden>
+      <div className="flex w-9 shrink-0 flex-col text-right text-[11px] leading-[14px] text-[var(--color-text-tertiary)]" aria-hidden>
         {lanes.map(({ lane, label }) => <span key={lane}>{label}</span>)}
       </div>
       <div
@@ -93,7 +93,7 @@ export const TrajectoryMinimap = memo(function TrajectoryMinimap({ model, viewpo
             data-row-id={run.rowId}
             data-kind={run.kind}
             className={cx(
-              'trajectory-minimap-span absolute rounded-[1px]',
+              'trajectory-minimap-span absolute',
               run.error ? 'bg-[var(--color-error)]' : KIND_FILL_CLASSES[run.kind],
               run.match && 'ring-1 ring-[var(--color-text-primary)]',
               run.selected && 'ring-2 ring-[var(--color-text-primary)]',
@@ -119,7 +119,7 @@ export const TrajectoryMinimap = memo(function TrajectoryMinimap({ model, viewpo
         {hover && hoverRow && (
           <div
             role="tooltip"
-            className="pointer-events-none absolute top-full z-[var(--z-tooltip)] mt-1 max-w-[320px] -translate-x-1/2 truncate rounded-[var(--radius-sm)] border border-[var(--color-border)] bg-[var(--color-surface)] px-2 py-1 text-[11px] text-[var(--color-text-primary)] shadow-[var(--shadow-dropdown)]"
+            className="pointer-events-none absolute top-full z-[var(--z-tooltip)] mt-1 max-w-[320px] -translate-x-1/2 truncate rounded-[var(--radius-sm)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] px-2 py-1 text-[12px] text-[var(--color-text-primary)] shadow-[var(--shadow-dropdown)]"
             style={{ left: hover.left }}
           >
             <span className="text-[var(--color-text-tertiary)]">{t(KIND_LABEL_KEYS[hoverRow.kind])} · </span>
diff --git a/desktop/src/components/trajectory/TrajectoryTable.tsx b/desktop/src/components/trajectory/TrajectoryTable.tsx
index b372911c..5d1671cb 100644
--- a/desktop/src/components/trajectory/TrajectoryTable.tsx
+++ b/desktop/src/components/trajectory/TrajectoryTable.tsx
@@ -139,12 +139,12 @@ export function TrajectoryTable({
           <button
             type="button"
             onClick={() => onToggleTurn(item.turn)}
-            className="flex h-full w-full items-center gap-2 pl-[120px] pr-3 text-left text-xs text-[var(--color-text-tertiary)] hover:bg-[var(--color-surface-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-border-focus)]"
+            className="flex h-full w-full items-center gap-2 pl-[120px] pr-3 text-left text-[12px] text-[var(--color-text-tertiary)] hover:bg-[var(--color-surface-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-border-focus)]"
           >
             <span>{t('trajectory.table.folded', { count: item.hiddenRows })}</span>
             {item.toolCount > 0 && <span>· {t('trajectory.table.toolCount', { count: item.toolCount })}</span>}
             {item.errors > 0 && <span className="text-[var(--color-error)]">· {t('trajectory.table.errorCount', { count: item.errors })}</span>}
-            {item.durationMs > 0 && <span>· {formatDurationMs(item.durationMs)}</span>}
+            {item.durationMs > 0 && <span className="font-mono text-[11px] tabular-nums">· {formatDurationMs(item.durationMs)}</span>}
           </button>
         )}
       </div>,
@@ -205,9 +205,9 @@ const TrajectoryRowView = memo(function TrajectoryRowView({ item, selected, coll
             onClick={() => onToggleTurn(row.turn!)}
             aria-expanded={!collapsed}
             aria-label={t(collapsed ? 'trajectory.table.expandTurn' : 'trajectory.table.collapseTurn', { turn: turnLabel(row.turn, t) })}
-            className="flex items-center gap-0.5 rounded-[var(--radius-sm)] px-1 text-[10.5px] font-medium text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]"
+            className="flex items-center gap-0.5 rounded-[var(--radius-xs)] px-1 text-[11px] font-medium text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]"
           >
-            {collapsed ? <ChevronRight size={10} aria-hidden /> : <ChevronDown size={10} aria-hidden />}
+            {collapsed ? <ChevronRight size={12} strokeWidth={2} aria-hidden /> : <ChevronDown size={12} strokeWidth={2} aria-hidden />}
             <span className="whitespace-nowrap">{turnLabel(row.turn, t)}</span>
           </button>
         )}
@@ -224,7 +224,7 @@ const TrajectoryRowView = memo(function TrajectoryRowView({ item, selected, coll
         <Badge tone={row.isError ? 'danger' : KIND_TONES[row.kind]} variant={KIND_VARIANTS[row.kind]} size="xs" pill={false} className="min-w-11 justify-center">
           {t(KIND_LABEL_KEYS[row.kind])}
         </Badge>
-        {row.isError && <CircleX size={13} aria-label={t('trajectory.status.error')} className="shrink-0 text-[var(--color-error)]" />}
+        {row.isError && <CircleX size={14} strokeWidth={1.75} aria-label={t('trajectory.status.error')} className="shrink-0 text-[var(--color-error)]" />}
         <div className="flex min-w-0 flex-1 items-center gap-2 overflow-hidden whitespace-nowrap">
           <RowContent row={row} hiddenTools={hiddenTools} terms={terms} running={running} />
         </div>
@@ -266,7 +266,7 @@ function Highlight({ text, terms }: { text: string; terms: readonly string[] })
   marks.forEach(([from, to], index) => {
     if (from < cursor) return
     if (from > cursor) parts.push(text.slice(cursor, from))
-    parts.push(<mark key={index} className="rounded-[2px] bg-[var(--color-warning-container)] text-[var(--color-on-warning-container)]">{text.slice(from, to)}</mark>)
+    parts.push(<mark key={index} className="rounded-[var(--radius-xs)] bg-[var(--color-search-highlight)] text-[var(--color-on-search-highlight)]">{text.slice(from, to)}</mark>)
     cursor = to
   })
   parts.push(text.slice(cursor))
@@ -320,7 +320,7 @@ function RowContent({ row, hiddenTools, terms, running }: {
             ? <span className="min-w-0 truncate text-[var(--color-text-primary)]"><Highlight text={row.preview} terms={terms} /></span>
             : <span className={muted}>{t(row.hasThinking && !row.toolOnly ? 'trajectory.assistant.thinkingOnly' : 'trajectory.assistant.toolOnly')}</span>}
           {hiddenTools && (
-            <span className="flex min-w-0 shrink items-center gap-1.5 truncate font-mono text-[11.5px] text-[var(--color-text-secondary)]">
+            <span className="flex min-w-0 shrink items-center gap-1.5 truncate font-mono text-[12px] text-[var(--color-text-secondary)]">
               {hiddenTools.names.slice(0, 4).map(([name, count]) => (
                 <span key={name} className="shrink-0">{count > 1 ? `${name} ×${count}` : name}</span>
               ))}
diff --git a/desktop/src/components/trajectory/TrajectoryToolbar.tsx b/desktop/src/components/trajectory/TrajectoryToolbar.tsx
index 4be74e67..83fc75cd 100644
--- a/desktop/src/components/trajectory/TrajectoryToolbar.tsx
+++ b/desktop/src/components/trajectory/TrajectoryToolbar.tsx
@@ -34,9 +34,11 @@ function ToggleButton({ pressed, onClick, icon, children, title }: { pressed: bo
       onClick={onClick}
       title={title}
       className={cx(
-        'inline-flex h-7 shrink-0 items-center gap-1.5 rounded-[var(--radius-md)] px-2 text-xs transition-colors active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]',
+        'inline-flex h-7 shrink-0 items-center gap-1.5 rounded-[var(--radius-sm)] px-2 text-[12px] transition-colors active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]',
+        // A pressed toggle is the neutral selected fill; terracotta is kept for
+        // the brand and selection marks, not on/off state.
         pressed
-          ? 'bg-[var(--color-brand-soft)] text-[var(--color-on-brand-soft)]'
+          ? 'bg-[var(--color-surface-selected)] font-medium text-[var(--color-text-primary)]'
           : 'text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)]',
       )}
     >
@@ -80,19 +82,19 @@ export function TrajectoryToolbar({
       <ToggleButton
         pressed={durationMode}
         onClick={() => onDurationModeChange(!durationMode)}
-        icon={<Clock size={13} aria-hidden />}
+        icon={<Clock size={14} strokeWidth={1.75} aria-hidden />}
         title={t('trajectory.toolbar.durationHint')}
       >
         {t('trajectory.toolbar.duration')}
       </ToggleButton>
-      <ToggleButton pressed={turnsCollapsed} onClick={() => onTurnsCollapsedChange(!turnsCollapsed)} icon={<ListCollapse size={13} aria-hidden />}>
+      <ToggleButton pressed={turnsCollapsed} onClick={() => onTurnsCollapsedChange(!turnsCollapsed)} icon={<ListCollapse size={14} strokeWidth={1.75} aria-hidden />}>
         {t('trajectory.toolbar.collapseTurns')}
       </ToggleButton>
-      <ToggleButton pressed={toolsHidden} onClick={() => onToolsHiddenChange(!toolsHidden)} icon={<Wrench size={13} aria-hidden />}>
+      <ToggleButton pressed={toolsHidden} onClick={() => onToolsHiddenChange(!toolsHidden)} icon={<Wrench size={14} strokeWidth={1.75} aria-hidden />}>
         {t('trajectory.toolbar.hideTools')}
       </ToggleButton>
       {agentLabel && (
-        <nav aria-label={t('trajectory.subagent.breadcrumb')} className="ml-2 flex min-w-0 items-center gap-1 text-xs">
+        <nav aria-label={t('trajectory.subagent.breadcrumb')} className="ml-2 flex min-w-0 items-center gap-1 text-[12px]">
           <button
             type="button"
             onClick={onExitAgent}
@@ -100,13 +102,13 @@ export function TrajectoryToolbar({
           >
             {t('trajectory.subagent.main')}
           </button>
-          <ChevronRight size={12} aria-hidden className="shrink-0 text-[var(--color-text-tertiary)]" />
+          <ChevronRight size={12} strokeWidth={2} aria-hidden className="shrink-0 text-[var(--color-text-tertiary)]" />
           <span className="truncate font-medium text-[var(--color-text-primary)]">{agentLabel}</span>
         </nav>
       )}
       <div className="ml-auto flex min-w-0 items-center gap-3">
         <span
-          className="hidden min-w-0 truncate text-[11px] tabular-nums text-[var(--color-text-tertiary)] lg:inline"
+          className="hidden min-w-0 truncate text-[12px] tabular-nums text-[var(--color-text-tertiary)] lg:inline"
           data-testid="trajectory-totals"
           title={t('trajectory.toolbar.totalsHint')}
         >
diff --git a/desktop/src/components/trajectory/TrajectoryView.tsx b/desktop/src/components/trajectory/TrajectoryView.tsx
index 2d6043c0..3aff9e34 100644
--- a/desktop/src/components/trajectory/TrajectoryView.tsx
+++ b/desktop/src/components/trajectory/TrajectoryView.tsx
@@ -328,7 +328,7 @@ export default function TrajectoryView({ sessionId, visible, running, activityKe
             type="button"
             disabled={state.loadingOlder}
             onClick={() => void handleLoadOlder()}
-            className="rounded-[var(--radius-sm)] px-2 text-xs text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] disabled:opacity-60"
+            className="rounded-[var(--radius-sm)] px-2 text-[12px] text-[var(--color-text-tertiary)] hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] disabled:opacity-60"
           >
             {state.loadingOlder ? t('common.loading') : t(terms.length ? 'trajectory.table.searchLoaded' : 'trajectory.table.loadOlder')}
           </button>
@@ -372,14 +372,14 @@ export default function TrajectoryView({ sessionId, visible, running, activityKe
       />
       {ordered.length > 0 && <TrajectoryMinimap model={minimap} viewport={viewport} rowsById={rowsById} onSelect={reveal} />}
       {currentTurn !== null && currentStats && !terms.length && (
-        <div className="flex h-7 shrink-0 items-center gap-2 border-b border-[var(--color-border)] bg-[var(--color-surface-container-low)] px-3 text-[11px] text-[var(--color-text-secondary)]" data-testid="trajectory-turn-bar">
+        <div className="flex h-7 shrink-0 items-center gap-2 border-b border-[var(--color-border)] bg-[var(--color-surface-container-low)] px-3 text-[12px] tabular-nums text-[var(--color-text-tertiary)]" data-testid="trajectory-turn-bar">
           <button
             type="button"
             onClick={() => handleToggleTurn(currentTurn)}
             aria-expanded={!collapsedTurns.has(currentTurn)}
             className="inline-flex items-center gap-1 rounded-[var(--radius-sm)] px-1 font-medium text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]"
           >
-            {collapsedTurns.has(currentTurn) ? <ChevronRight size={12} aria-hidden /> : <ChevronDown size={12} aria-hidden />}
+            {collapsedTurns.has(currentTurn) ? <ChevronRight size={12} strokeWidth={2} aria-hidden /> : <ChevronDown size={12} strokeWidth={2} aria-hidden />}
             {turnLabel(currentTurn, t)}
           </button>
           <span>{t('trajectory.table.toolCount', { count: currentStats.tools })}</span>
diff --git a/desktop/src/components/trajectory/TrajectoryViewSwitch.tsx b/desktop/src/components/trajectory/TrajectoryViewSwitch.tsx
index 1bf69dd6..1b3e283e 100644
--- a/desktop/src/components/trajectory/TrajectoryViewSwitch.tsx
+++ b/desktop/src/components/trajectory/TrajectoryViewSwitch.tsx
@@ -17,8 +17,8 @@ export function TrajectoryViewSwitch({ sessionId }: { sessionId: string }) {
       value={mode}
       onChange={(next) => setMode(sessionId, next)}
       items={[
-        { value: 'chat', label: t('trajectory.switch.chat'), icon: <MessagesSquare size={13} aria-hidden /> },
-        { value: 'trajectory', label: t('trajectory.switch.trajectory'), icon: <ListTree size={13} aria-hidden /> },
+        { value: 'chat', label: t('trajectory.switch.chat'), icon: <MessagesSquare size={14} strokeWidth={1.75} aria-hidden /> },
+        { value: 'trajectory', label: t('trajectory.switch.trajectory'), icon: <ListTree size={14} strokeWidth={1.75} aria-hidden /> },
       ]}
     />
   )
diff --git a/desktop/src/components/trajectory/detail/DetailBlocks.tsx b/desktop/src/components/trajectory/detail/DetailBlocks.tsx
index 3dbc2751..8ca1914b 100644
--- a/desktop/src/components/trajectory/detail/DetailBlocks.tsx
+++ b/desktop/src/components/trajectory/detail/DetailBlocks.tsx
@@ -8,13 +8,13 @@ import { formatTraceJson } from '../../../lib/trace/formatters'
 /** Past this size, syntax highlighting and markdown parsing cost more than they help. */
 const RICH_RENDER_LIMIT = 120_000
 
-const COPY_CLASS = 'shrink-0 whitespace-nowrap rounded-[var(--radius-sm)] border border-[var(--color-border)] px-2 py-0.5 text-[11px] text-[var(--color-text-tertiary)] transition-colors hover:text-[var(--color-text-primary)]'
+const COPY_CLASS = 'inline-flex h-[22px] shrink-0 items-center gap-1 whitespace-nowrap rounded-[var(--radius-xs)] px-1.5 text-[11px] text-[var(--color-text-tertiary)] transition-colors hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)]'
 
 export function DetailSection({ title, actions, children }: { title: string; actions?: ReactNode; children: ReactNode }) {
   return (
     <section className="flex flex-col gap-1.5">
       <div className="flex items-center justify-between gap-2">
-        <h3 className="text-[11px] font-semibold uppercase tracking-[0.08em] text-[var(--color-text-tertiary)]">{title}</h3>
+        <h3 className="text-[12px] font-semibold text-[var(--color-text-tertiary)]">{title}</h3>
         {actions}
       </div>
       {children}
@@ -30,7 +30,7 @@ export function CopyAction({ text }: { text: string }) {
 /** Grows with its text; the detail panel is the one scroll container. */
 export function PlainText({ text }: { text: string }) {
   return (
-    <pre className={`whitespace-pre-wrap break-words rounded-[var(--radius-md)] bg-[var(--color-surface-container-low)] px-3 py-2 font-mono text-[12px] leading-[1.65] text-[var(--color-text-secondary)]`}>
+    <pre className="whitespace-pre-wrap break-words rounded-[var(--radius-md)] bg-[var(--color-surface-container)] px-3 py-2 font-mono text-[12px] leading-[1.65] text-[var(--color-text-secondary)]">
       {text}
     </pre>
   )
@@ -52,7 +52,7 @@ export type MetaItem = { label: string; value: ReactNode }
 
 export function MetaList({ items }: { items: readonly MetaItem[] }) {
   return (
-    <dl className="grid grid-cols-[auto_minmax(0,1fr)] gap-x-5 gap-y-1.5 text-[12.5px]">
+    <dl className="grid grid-cols-[auto_minmax(0,1fr)] gap-x-5 gap-y-1.5 text-[13px]">
       {items.map((item) => (
         <div key={item.label} className="contents">
           <dt className="text-[var(--color-text-tertiary)]">{item.label}</dt>
diff --git a/desktop/src/components/trajectory/detail/MessageBlocks.tsx b/desktop/src/components/trajectory/detail/MessageBlocks.tsx
index 1c65f1ed..5f74ca5e 100644
--- a/desktop/src/components/trajectory/detail/MessageBlocks.tsx
+++ b/desktop/src/components/trajectory/detail/MessageBlocks.tsx
@@ -10,32 +10,29 @@ import { CodeViewer } from '../../chat/CodeViewer'
 const LONG_TEXT_CHARS = 2000
 
 /**
- * Card per role: a 4px spine in the role's color, a tinted fill and matching
- * ink. The fills are opaque `-soft` / `-container` tokens rather than the `/8`
- * alpha modifiers they replaced — those compile to a color function Safari 15's
- * WebView drops entirely, which left the cards unfilled on iOS H5.
- *
- * Each edge is colored on its own property instead of `border-[…]` plus a
- * `border-l-[…]` override: those two write `border-color` and
- * `border-left-color`, and which wins depends on their order in the generated
- * stylesheet, not on the order they appear here.
+ * One block per role, told apart by ground rather than colour: what was sent
+ * in (user / tool results) is sunken, the model's reply is a hairline frame,
+ * and the harness-authored system message takes the heavier outline. Status
+ * colours stay out of it — amber means "needs you" and terracotta is the brand,
+ * neither of which a message role is. Each block is either filled or framed,
+ * never both, so nothing reads as a card inside a card.
  */
 const ROLE_STYLES: Record<NormalizedMessage['role'], { badge: string; container: string }> = {
   user: {
     badge: 'text-[var(--color-text-secondary)]',
-    container: 'border-y-[var(--color-border)] border-r-[var(--color-border)] border-l-[var(--color-outline)] bg-[var(--color-surface-container-low)]',
+    container: 'bg-[var(--color-surface-container)]',
   },
   assistant: {
-    badge: 'text-[var(--color-on-brand-soft)]',
-    container: 'border-y-[var(--color-primary-fixed-dim)] border-r-[var(--color-primary-fixed-dim)] border-l-[var(--color-brand)] bg-[var(--color-brand-soft)]',
+    badge: 'text-[var(--color-text-primary)]',
+    container: 'border border-[var(--color-border)]',
   },
   system: {
-    badge: 'text-[var(--color-on-warning-container)]',
-    container: 'border-y-[var(--color-warning)] border-r-[var(--color-warning)] border-l-[var(--color-warning)] bg-[var(--color-warning-container)]',
+    badge: 'text-[var(--color-text-tertiary)]',
+    container: 'border border-[var(--color-outline)]',
   },
   tool: {
     badge: 'text-[var(--color-text-tertiary)]',
-    container: 'border-y-[var(--color-border)] border-r-[var(--color-border)] border-l-[var(--color-outline)] bg-[var(--color-surface-container)]',
+    container: 'bg-[var(--color-surface-container)]',
   },
 }
 
@@ -43,13 +40,13 @@ export function MessageBlocks({ message }: { message: NormalizedMessage }) {
   const styles = ROLE_STYLES[message.role]
   return (
     <div
-      className={`trace-message-cv rounded-[var(--radius-lg)] border-y border-r border-l-4 px-4 py-3 ${styles.container}`}
+      className={`trace-message-cv rounded-[var(--radius-md)] px-3.5 py-3 ${styles.container}`}
       data-testid={`trace-message-${message.role}`}
     >
-      <div className={`font-mono text-[11px] font-semibold uppercase tracking-[0.14em] ${styles.badge}`}>
+      <div className={`font-mono text-[11px] font-medium ${styles.badge}`}>
         {message.role}
       </div>
-      <div className="mt-2.5 flex flex-col gap-2.5">
+      <div className="mt-2 flex flex-col gap-2.5">
         {message.content.map((block, index) => (
           <BlockView key={index} block={block} />
         ))}
@@ -83,13 +80,13 @@ function TextBlock({ text }: { text: string }) {
   }
   return (
     <div className="relative">
-      <pre className="whitespace-pre-wrap break-words rounded-[var(--radius-md)] bg-[var(--color-surface)] px-3 py-2 font-mono text-[12px] leading-[1.7] text-[var(--color-text-secondary)]">
+      <pre className="whitespace-pre-wrap break-words rounded-[var(--radius-md)] bg-[var(--color-code-bg)] px-3 py-2 font-mono text-[12px] leading-[1.7] text-[var(--color-text-secondary)]">
         {text}
       </pre>
       <CopyButton
         text={text}
         copiedLabel={t('common.copied')}
-        className="absolute right-2 top-2 rounded-[var(--radius-sm)] border border-[var(--color-border)] bg-[var(--color-surface)] px-2 py-0.5 text-[11px] text-[var(--color-text-tertiary)] transition-colors hover:text-[var(--color-text-primary)]"
+        className="absolute right-2 top-2 inline-flex h-[22px] items-center gap-1 rounded-[var(--radius-xs)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] px-1.5 text-[11px] text-[var(--color-text-tertiary)] transition-colors hover:text-[var(--color-text-primary)]"
       />
     </div>
   )
@@ -104,12 +101,12 @@ function ThinkingBlock({ thinking }: { thinking: string }) {
         type="button"
         onClick={() => setOpen((value) => !value)}
         aria-expanded={open}
-        className="inline-flex items-center gap-1.5 rounded-[var(--radius-sm)] border border-[var(--color-border)] bg-[var(--color-surface)] px-2.5 py-1 text-[12px] text-[var(--color-text-secondary)] transition-colors hover:text-[var(--color-text-primary)]"
+        className="inline-flex h-7 items-center gap-1.5 rounded-[var(--radius-sm)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] px-2.5 text-[12px] text-[var(--color-text-secondary)] transition-colors hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)]"
       >
         {t('trace.detail.thinking')} · {t('trace.detail.chars', { count: thinking.length })}
       </button>
       {open ? (
-        <pre className="mt-2 whitespace-pre-wrap break-words text-[12.5px] italic leading-[1.7] text-[var(--color-text-tertiary)]">
+        <pre className="ml-[7px] mt-2 whitespace-pre-wrap break-words border-l border-[var(--color-outline)] pl-3.5 text-[13px] leading-[1.7] text-[var(--color-text-secondary)]">
           {thinking}
         </pre>
       ) : null}
@@ -120,10 +117,10 @@ function ThinkingBlock({ thinking }: { thinking: string }) {
 function ToolUseBlock({ id, name, input }: { id?: string; name: string; input: unknown }) {
   return (
     <div className="min-w-0">
-      <div className="flex min-w-0 items-center gap-2 text-[13px] font-bold text-[var(--color-text-primary)]">
-        <Wrench size={14} strokeWidth={1.8} className="shrink-0 text-[var(--color-brand)]" />
+      <div className="flex min-w-0 items-center gap-2 text-[13px] font-medium text-[var(--color-text-primary)]">
+        <Wrench size={14} strokeWidth={1.75} className="shrink-0 text-[var(--color-text-tertiary)]" />
         <span className="truncate">{name}</span>
-        {id ? <span className="truncate font-mono text-[11.5px] font-normal text-[var(--color-text-tertiary)]">{id}</span> : null}
+        {id ? <span className="truncate font-mono text-[11px] font-normal text-[var(--color-text-tertiary)]">{id}</span> : null}
       </div>
       <div className="mt-2">
         <CodeViewer code={safeJson(input)} language="json" maxLines={24} showLineNumbers wrapLongLines unboundedHeight />
@@ -137,12 +134,12 @@ function ToolResultBlock({ toolUseId, content, isError }: { toolUseId?: string;
   const text = extractPlainText(content)
   return (
     <div className={`min-w-0 ${isError ? 'rounded-[var(--radius-md)] border border-[var(--color-error)] p-2' : ''}`}>
-      <div className="flex min-w-0 items-center gap-2 text-[13px] font-bold text-[var(--color-text-primary)]">
+      <div className="flex min-w-0 items-center gap-2 text-[13px] font-medium text-[var(--color-text-primary)]">
         <span className={isError ? 'text-[var(--color-error)]' : ''}>
           {isError ? t('trace.toolError') : t('trace.toolResult')}
         </span>
         {toolUseId ? (
-          <span className="truncate font-mono text-[11.5px] font-normal text-[var(--color-text-tertiary)]">{toolUseId}</span>
+          <span className="truncate font-mono text-[11px] font-normal text-[var(--color-text-tertiary)]">{toolUseId}</span>
         ) : null}
       </div>
       <div className="mt-2">
@@ -157,7 +154,7 @@ function ToolResultBlock({ toolUseId, content, isError }: { toolUseId?: string;
 function TextResult({ text }: { text: string }) {
   if (!text.trim()) return null
   return (
-    <pre className="whitespace-pre-wrap break-words rounded-[var(--radius-md)] bg-[var(--color-surface)] px-3 py-2 font-mono text-[12px] leading-[1.7] text-[var(--color-text-secondary)]">
+    <pre className="whitespace-pre-wrap break-words rounded-[var(--radius-md)] bg-[var(--color-code-bg)] px-3 py-2 font-mono text-[12px] leading-[1.7] text-[var(--color-text-secondary)]">
       {text}
     </pre>
   )
diff --git a/desktop/src/components/trajectory/detail/RawRequestDetail.tsx b/desktop/src/components/trajectory/detail/RawRequestDetail.tsx
index b746ca97..17e94e98 100644
--- a/desktop/src/components/trajectory/detail/RawRequestDetail.tsx
+++ b/desktop/src/components/trajectory/detail/RawRequestDetail.tsx
@@ -154,11 +154,11 @@ export function RawRequestDetail({
             <CopyButton
               text={parsed.request.system}
               copiedLabel={t('common.copied')}
-              className="rounded-[var(--radius-sm)] border border-[var(--color-border)] px-2 py-0.5 text-[11px] text-[var(--color-text-tertiary)] transition-colors hover:text-[var(--color-text-primary)]"
+              className="inline-flex h-[22px] items-center gap-1 rounded-[var(--radius-xs)] px-1.5 text-[11px] text-[var(--color-text-tertiary)] transition-colors hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)]"
             />
           }
         >
-          <pre className="whitespace-pre-wrap break-words text-[12.5px] leading-[1.7] text-[var(--color-text-secondary)]">
+          <pre className="whitespace-pre-wrap break-words text-[13px] leading-[1.7] text-[var(--color-text-secondary)]">
             {parsed.request.system}
           </pre>
         </Section>
@@ -172,7 +172,7 @@ export function RawRequestDetail({
 
       {paramEntries.length > 0 ? (
         <Section sectionKey="llm.parameters" title={t('trace.section.parameters')} badge={paramEntries.length}>
-          <dl className="grid grid-cols-[auto_minmax(0,1fr)] gap-x-4 gap-y-1.5 text-[12.5px]">
+          <dl className="grid grid-cols-[auto_minmax(0,1fr)] gap-x-4 gap-y-1.5 text-[12px]">
             {paramEntries.map(([key, value]) => (
               <ParamRow key={key} name={key} value={value} />
             ))}
@@ -209,11 +209,11 @@ function ResponseContent({
     const aborted = isAbortedTraceCall(call)
     return (
       <div
-        className="rounded-[var(--radius-lg)] border border-l-4 border-[var(--color-error)] bg-[var(--color-error-container)] px-4 py-3"
+        className="rounded-[var(--radius-md)] bg-[var(--color-error-container)] px-4 py-3"
         data-testid="trace-call-error"
       >
         <div className="flex min-w-0 items-center gap-2">
-          <div className="text-[13px] font-bold text-[var(--color-error)]">{call.error.name}</div>
+          <div className="text-[13px] font-semibold text-[var(--color-on-error-container)]">{call.error.name}</div>
           {aborted ? (
             <Badge tone="danger" size="xs" pill={false} bordered data-testid="trace-call-aborted-badge">
               {t('trace.status.aborted')}
@@ -228,10 +228,10 @@ function ResponseContent({
         ) : null}
         {call.error.stack ? (
           <details className="mt-2">
-            <summary className="cursor-pointer font-mono text-[11px] uppercase tracking-[0.12em] text-[var(--color-text-tertiary)]">
+            <summary className="cursor-pointer font-mono text-[11px] text-[var(--color-on-error-container)]">
               {t('trace.detail.stack')}
             </summary>
-            <pre className="mt-1.5 max-h-[240px] overflow-y-auto whitespace-pre-wrap break-words font-mono text-[11px] leading-[1.6] text-[var(--color-text-tertiary)]">
+            <pre className="mt-1.5 max-h-[240px] overflow-y-auto whitespace-pre-wrap break-words font-mono text-[11px] leading-[1.6] text-[var(--color-on-error-container)]">
               {call.error.stack}
             </pre>
           </details>
@@ -241,7 +241,7 @@ function ResponseContent({
   }
   if (pending) {
     return (
-      <div className="flex items-center gap-2 rounded-[var(--radius-lg)] border border-dashed border-[var(--color-border)] px-4 py-3.5 text-[13px] text-[var(--color-text-tertiary)]">
+      <div className="flex items-center gap-2 rounded-[var(--radius-md)] bg-[var(--color-surface-container)] px-4 py-3 text-[13px] text-[var(--color-text-tertiary)]">
         <Spinner size={14} />
         {t('trace.detail.streaming')}
       </div>
@@ -288,7 +288,7 @@ function MessageList({ messages }: { messages: NormalizedMessage[] }) {
       <button
         type="button"
         onClick={() => setShowAll(true)}
-        className="rounded-[var(--radius-md)] border border-dashed border-[var(--color-border)] px-3 py-2 text-[12.5px] text-[var(--color-text-tertiary)] transition-colors hover:text-[var(--color-text-primary)] active:scale-[0.98]"
+        className="rounded-[var(--radius-md)] border border-dashed border-[var(--color-border)] px-3 py-2 text-[12px] text-[var(--color-text-tertiary)] transition-colors hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] active:scale-[0.98]"
       >
         {t('trace.detail.earlierMessages', { count: hiddenCount })}
       </button>
@@ -324,20 +324,20 @@ function ContextInjectionList({ injections }: { injections: LocatedInjection[] }
               type="button"
               onClick={() => setExpanded((current) => (current === key ? null : key))}
               aria-expanded={open}
-              className="flex w-full min-w-0 items-center gap-2 px-2.5 py-1.5 text-left transition-colors hover:bg-[var(--color-surface-container)]"
+              className="flex min-h-[30px] w-full min-w-0 items-center gap-2 rounded-[var(--radius-md)] px-2.5 py-1 text-left transition-colors hover:bg-[var(--color-surface-hover)]"
             >
-              <span className="shrink-0 rounded-full bg-[var(--color-surface-container)] px-2 py-0.5 text-[11px] text-[var(--color-text-tertiary)]">
+              <span className="shrink-0 rounded-[var(--radius-xs)] bg-[var(--color-surface-container)] px-1.5 py-0.5 text-[11px] text-[var(--color-text-tertiary)]">
                 {t(CONTEXT_KIND_LABEL[injection.kind])}
               </span>
-              <span className="min-w-0 flex-1 truncate text-[12.5px] text-[var(--color-text-primary)]">
+              <span className="min-w-0 flex-1 truncate text-[13px] text-[var(--color-text-primary)]">
                 {injection.label}
               </span>
-              <span className="shrink-0 font-mono text-[11px] text-[var(--color-text-tertiary)]">
+              <span className="shrink-0 font-mono text-[11px] tabular-nums text-[var(--color-text-tertiary)]">
                 {t('trace.detail.chars', { count: injection.text.length })}
               </span>
             </button>
             {open ? (
-              <pre className="whitespace-pre-wrap break-words border-t border-[var(--color-border)] px-2.5 py-2 text-[12.5px] leading-[1.7] text-[var(--color-text-secondary)]">
+              <pre className="whitespace-pre-wrap break-words border-t border-[var(--color-border)] px-2.5 py-2 text-[13px] leading-[1.7] text-[var(--color-text-secondary)]">
                 {injection.text}
               </pre>
             ) : null}
@@ -361,10 +361,10 @@ function ToolDefinitions({ tools }: { tools: Array<{ name: string; description?:
             onClick={() => setExpanded((current) => current === tool.name ? null : tool.name)}
             aria-pressed={expanded === tool.name}
             {...(tool.description ? { title: tool.description } : {})}
-            className={`rounded-full border px-2.5 py-0.5 font-mono text-[11.5px] transition-colors ${
+            className={`rounded-[var(--radius-xs)] border px-2 py-0.5 font-mono text-[12px] transition-colors ${
               expanded === tool.name
-                ? 'border-[var(--color-primary-fixed-dim)] bg-[var(--color-brand-soft)] text-[var(--color-on-brand-soft)]'
-                : 'border-[var(--color-border)] text-[var(--color-text-secondary)] hover:border-[var(--color-outline)] hover:text-[var(--color-text-primary)]'
+                ? 'border-[var(--color-outline)] bg-[var(--color-surface-selected)] text-[var(--color-text-primary)]'
+                : 'border-[var(--color-border)] text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)]'
             }`}
           >
             {tool.name}
@@ -374,7 +374,7 @@ function ToolDefinitions({ tools }: { tools: Array<{ name: string; description?:
       {active ? (
         <div className="mt-2.5">
           {active.description ? (
-            <p className="mb-2 text-[12.5px] leading-[1.6] text-[var(--color-text-secondary)]">{active.description}</p>
+            <p className="mb-2 text-[13px] leading-[1.6] text-[var(--color-text-secondary)]">{active.description}</p>
           ) : null}
           <CodeViewer code={formatTraceJson(active.schema ?? null)} language="json" maxLines={24} showLineNumbers wrapLongLines unboundedHeight />
         </div>
@@ -425,8 +425,8 @@ function RawBody({ title, body, maxLines }: { title: string; body: TraceBodySnap
   return (
     <div>
       <div className="mb-1.5 flex items-center justify-between gap-2">
-        <span className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-[var(--color-text-tertiary)]">{title}</span>
-        <span className="font-mono text-[11px] text-[var(--color-text-tertiary)]">
+        <span className="text-[12px] font-semibold text-[var(--color-text-tertiary)]">{title}</span>
+        <span className="font-mono text-[11px] tabular-nums text-[var(--color-text-tertiary)]">
           {formatBytes(body.bytes)}{body.truncated ? ` · ${t('trace.truncatedShort')}` : ''}
         </span>
       </div>
@@ -442,7 +442,7 @@ function RawBody({ title, body, maxLines }: { title: string; body: TraceBodySnap
 function RawHeaders({ title, headers }: { title: string; headers: Record<string, string> }) {
   return (
     <div>
-      <div className="mb-1.5 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-[var(--color-text-tertiary)]">{title}</div>
+      <div className="mb-1.5 text-[12px] font-semibold text-[var(--color-text-tertiary)]">{title}</div>
       <CodeViewer code={formatTraceJson(headers)} language="json" maxLines={20} showLineNumbers wrapLongLines unboundedHeight />
     </div>
   )
@@ -450,7 +450,7 @@ function RawHeaders({ title, headers }: { title: string; headers: Record<string,
 
 function NoticeBar({ text }: { text: string }) {
   return (
-    <div className="mb-3 rounded-[var(--radius-md)] border border-[var(--color-warning)] bg-[var(--color-warning-container)] px-3.5 py-2 text-[12.5px] text-[var(--color-on-warning-container)]">
+    <div className="mb-3 rounded-[var(--radius-md)] bg-[var(--color-warning-container)] px-3.5 py-2 text-[12px] text-[var(--color-on-warning-container)]">
       {text}
     </div>
   )
diff --git a/desktop/src/components/trajectory/detail/RequestSummary.tsx b/desktop/src/components/trajectory/detail/RequestSummary.tsx
index 39098414..86f5bc71 100644
--- a/desktop/src/components/trajectory/detail/RequestSummary.tsx
+++ b/desktop/src/components/trajectory/detail/RequestSummary.tsx
@@ -23,7 +23,7 @@ export function RequestSummary({ call, response }: { call: TraceCallRecord; resp
       value: (
         <span className="flex items-start gap-2">
           <span className={mono} data-testid="trajectory-request-endpoint">
-            {summary.method ? <span className="mr-1.5 font-semibold">{summary.method}</span> : null}
+            {summary.method ? <span className="mr-1.5 font-medium">{summary.method}</span> : null}
             {summary.url}
           </span>
           <CopyAction text={summary.url} />
diff --git a/desktop/src/components/trajectory/detail/Section.tsx b/desktop/src/components/trajectory/detail/Section.tsx
index 730af984..66220314 100644
--- a/desktop/src/components/trajectory/detail/Section.tsx
+++ b/desktop/src/components/trajectory/detail/Section.tsx
@@ -59,7 +59,7 @@ export function Section({
 
   return (
     <section className="border-t border-[var(--color-border)] first:border-t-0">
-      <div className="flex items-center gap-2 px-6 pb-2 pt-4">
+      <div className="flex min-h-[40px] items-center gap-2 pb-1 pt-2">
         <button
           type="button"
           onClick={toggle}
@@ -67,11 +67,11 @@ export function Section({
           className="flex min-w-0 flex-1 items-center gap-2 text-left transition-colors"
         >
           <ChevronRight
-            size={13}
-            strokeWidth={2}
+            size={14}
+            strokeWidth={1.75}
             className={`shrink-0 text-[var(--color-text-tertiary)] transition-transform ${open ? 'rotate-90' : ''}`}
           />
-          <span className="truncate text-[14px] font-bold text-[var(--color-text-primary)]">
+          <span className="truncate text-[13px] font-semibold text-[var(--color-text-primary)]">
             {title}
           </span>
           {badge !== undefined ? (
@@ -82,7 +82,7 @@ export function Section({
         </button>
         {actions ? <div className="flex shrink-0 items-center gap-1">{actions}</div> : null}
       </div>
-      {open ? <div className="px-6 pb-5">{children}</div> : null}
+      {open ? <div className="pb-4">{children}</div> : null}
     </section>
   )
 }
diff --git a/desktop/src/components/trajectory/detail/SnapshotDetail.tsx b/desktop/src/components/trajectory/detail/SnapshotDetail.tsx
index 345e3e55..da4639d1 100644
--- a/desktop/src/components/trajectory/detail/SnapshotDetail.tsx
+++ b/desktop/src/components/trajectory/detail/SnapshotDetail.tsx
@@ -100,7 +100,7 @@ export function SnapshotDetail({ sessionId, snapshot, tab }: { sessionId: string
 function TruncatedNotice() {
   const t = useTranslation()
   return (
-    <div className="rounded-[var(--radius-md)] border border-[var(--color-warning)] bg-[var(--color-warning-container)] px-3 py-1.5 text-[12px] text-[var(--color-on-warning-container)]">
+    <div className="rounded-[var(--radius-md)] bg-[var(--color-warning-container)] px-3 py-1.5 text-[12px] text-[var(--color-on-warning-container)]">
       {t('trajectory.detail.truncated')}
     </div>
   )
@@ -121,7 +121,7 @@ function ToolCatalog({ tools, truncated }: { tools: ToolCatalogEntry[]; truncate
                 type="button"
                 aria-expanded={expanded}
                 onClick={() => setOpen(expanded ? null : tool.name)}
-                className="flex w-full min-w-0 items-baseline gap-2 px-3 py-1.5 text-left hover:bg-[var(--color-surface-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-border-focus)]"
+                className="flex min-h-[30px] w-full min-w-0 items-center gap-2 px-3 py-1 text-left hover:bg-[var(--color-surface-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-border-focus)]"
               >
                 <span className="shrink-0 font-mono text-[12px] font-medium text-[var(--color-text-primary)]">{tool.name}</span>
                 <span className="min-w-0 truncate text-[12px] text-[var(--color-text-tertiary)]">{tool.description?.split('\n')[0]}</span>
@@ -144,8 +144,8 @@ function ToolCatalogDiff({ before, after }: { before: ToolCatalogEntry[]; after:
   const t = useTranslation()
   const diff = useMemo(() => diffToolCatalogs(before, after), [after, before])
   const groups = [
-    { key: 'added', label: t('trajectory.detail.toolsAdded'), names: diff.added, tone: 'text-[var(--color-success)]' },
-    { key: 'removed', label: t('trajectory.detail.toolsRemoved'), names: diff.removed, tone: 'text-[var(--color-error)]' },
+    { key: 'added', label: t('trajectory.detail.toolsAdded'), names: diff.added, tone: 'text-[var(--color-diff-added-text)]' },
+    { key: 'removed', label: t('trajectory.detail.toolsRemoved'), names: diff.removed, tone: 'text-[var(--color-diff-removed-text)]' },
     { key: 'changed', label: t('trajectory.detail.toolsChanged'), names: diff.changed, tone: 'text-[var(--color-text-primary)]' },
   ].filter((group) => group.names.length)
   return (
@@ -199,10 +199,10 @@ function TextDiff({ before, after }: { before: string; after: string }) {
           data-diff={line.type}
           className={cx(
             'whitespace-pre-wrap break-words px-3',
-            line.type === 'add' && 'bg-[var(--color-success-container)] text-[var(--color-on-success-container)]',
-            line.type === 'remove' && 'bg-[var(--color-error-container)] text-[var(--color-on-error-container)]',
+            line.type === 'add' && 'bg-[var(--color-diff-added-bg)] text-[var(--color-diff-added-text)]',
+            line.type === 'remove' && 'bg-[var(--color-diff-removed-bg)] text-[var(--color-diff-removed-text)]',
             line.type === 'same' && 'text-[var(--color-text-secondary)]',
-            line.type === 'gap' && 'bg-[var(--color-surface-container-low)] py-0.5 text-center text-[11px] text-[var(--color-text-tertiary)]',
+            line.type === 'gap' && 'bg-[var(--color-surface-container)] py-0.5 text-center font-sans text-[11px] text-[var(--color-text-tertiary)]',
           )}
         >
           {line.type === 'add' ? '+ ' : line.type === 'remove' ? '- ' : line.type === 'same' ? '  ' : ''}
diff --git a/desktop/src/components/trajectory/trajectoryLabels.ts b/desktop/src/components/trajectory/trajectoryLabels.ts
index b1098531..8912b741 100644
--- a/desktop/src/components/trajectory/trajectoryLabels.ts
+++ b/desktop/src/components/trajectory/trajectoryLabels.ts
@@ -14,29 +14,33 @@ export const KIND_LABEL_KEYS: Record<TrajectoryRowKind, TranslationKey> = {
 }
 
 /**
- * The prompt is the anchor of every turn, so it takes the accent; responses
- * are the most numerous rows and stay neutral. `info` is avoided: in the paper
- * themes it is the same terracotta as `brand`.
+ * The prompt is the anchor of every turn, so it is the one kind with a colour —
+ * the same blue as links. Everything else stays neutral: success / warning are
+ * status colours app-wide (done / needs you), so a green context row or an amber
+ * tool row read as states they are not, and terracotta is reserved for the brand
+ * and selection marks. Errors are the only other colour in the table.
  */
 export const KIND_TONES: Record<TrajectoryRowKind, Tone> = {
   system: 'neutral',
-  user: 'brand',
-  context: 'success',
+  user: 'info',
+  context: 'neutral',
   assistant: 'neutral',
-  tool: 'warning',
+  tool: 'neutral',
   compact: 'neutral',
 }
 
 /**
  * Minimap span fill per kind — the same hue as the kind's badge, so a color
- * means one thing everywhere in the view. Failures are drawn separately.
+ * means one thing everywhere in the view. Lanes already separate input, model
+ * and tools, so within a lane a grey step is enough; the prompt keeps its blue
+ * and failures are drawn separately in error red.
  */
 export const KIND_FILL_CLASSES: Record<TrajectoryRowKind, string> = {
   system: 'bg-[var(--color-text-tertiary)]',
-  user: 'bg-[var(--color-brand)]',
-  context: 'bg-[var(--color-success)]',
+  user: 'bg-[var(--color-info)]',
+  context: 'bg-[var(--color-border-strong)]',
   assistant: 'bg-[var(--color-text-secondary)]',
-  tool: 'bg-[var(--color-warning)]',
+  tool: 'bg-[var(--color-text-tertiary)]',
   compact: 'bg-[var(--color-text-tertiary)]',
 }
 
diff --git a/desktop/src/components/ui/Badge.tsx b/desktop/src/components/ui/Badge.tsx
index 04e6ed8c..5545f519 100644
--- a/desktop/src/components/ui/Badge.tsx
+++ b/desktop/src/components/ui/Badge.tsx
@@ -70,7 +70,7 @@ const OUTLINE_CLASSES: Record<Tone, string> = {
 }
 
 const SIZE_CLASSES = {
-  xs: 'px-2 py-0.5 text-[10px] gap-1',
+  xs: 'px-1.5 py-0.5 text-[11px] gap-1',
   sm: 'px-2 py-0.5 text-xs gap-1',
   md: 'px-2.5 py-1 text-[11px] gap-1.5',
 } as const
diff --git a/desktop/src/components/ui/Button.tsx b/desktop/src/components/ui/Button.tsx
index 2e901835..91035e48 100644
--- a/desktop/src/components/ui/Button.tsx
+++ b/desktop/src/components/ui/Button.tsx
@@ -86,18 +86,19 @@ const DISABLED_FILL =
 const DISABLED_FADE = 'disabled:opacity-50'
 
 const VARIANT_CLASSES: Record<ButtonVariant, string> = {
-  // Solid ink that turns terracotta on hover — the handoff's primary action.
-  // It is deliberately not the brand color at rest: on a page where terracotta
-  // marks the accent everywhere, an ink block is what reads as "the button".
+  // Solid ink, and still ink on hover (a lighter one). It is deliberately not
+  // the brand color: terracotta is reserved for the brand, the send key and
+  // selection, so an ink block is what reads as "the button". The old hover
+  // lift and terracotta flip made every confirm look like a marketing CTA.
   primary:
-    `bg-[var(--color-btn-primary-bg)] text-[var(--color-btn-primary-fg)] shadow-[var(--shadow-button-primary)] hover:bg-[var(--color-brand)] hover:-translate-y-px active:translate-y-0 active:scale-[0.97] ${DISABLED_FILL}`,
+    `bg-[var(--color-btn-primary-bg)] text-[var(--color-btn-primary-fg)] shadow-[var(--shadow-button-primary)] hover:bg-[var(--color-btn-primary-hover)] active:scale-[0.98] ${DISABLED_FILL}`,
   // Terracotta at rest. `primary`'s ink block is right where a button sits among
   // other buttons; `accent` is for the one control on a surface that has no
   // competition and has to be found instantly — the composer's send key. Using
   // it anywhere terracotta already marks something else is what `primary`
   // exists to avoid.
   accent:
-    `bg-[var(--color-brand)] text-[var(--color-on-primary)] shadow-[var(--shadow-button-primary)] hover:bg-[var(--color-brand-hover)] hover:-translate-y-px active:translate-y-0 active:scale-[0.97] ${DISABLED_FILL}`,
+    `bg-[var(--color-brand)] text-[var(--color-on-primary)] shadow-[var(--shadow-button-primary)] hover:bg-[var(--color-brand-hover)] active:scale-[0.98] ${DISABLED_FILL}`,
   secondary:
     `bg-[var(--color-surface)] text-[var(--color-text-primary)] border border-[var(--color-border)] hover:border-[var(--color-outline)] hover:bg-[var(--color-surface-hover)] active:scale-[0.98] ${DISABLED_FILL}`,
   tonal:
@@ -111,9 +112,9 @@ const VARIANT_CLASSES: Record<ButtonVariant, string> = {
   danger:
     // Foreground from a token, not `white`: dark's --color-error is a light red
     // that white text is unreadable on.
-    `bg-[var(--color-error)] text-[var(--color-on-error)] hover:brightness-110 hover:-translate-y-px active:translate-y-0 active:scale-[0.97] ${DISABLED_FILL}`,
+    `bg-[var(--color-error)] text-[var(--color-on-error)] hover:brightness-110 active:scale-[0.98] ${DISABLED_FILL}`,
   inverse:
-    `bg-[var(--color-inverse-surface)] text-[var(--color-inverse-on-surface)] hover:bg-[var(--color-brand)] hover:-translate-y-px active:translate-y-0 active:scale-[0.97] ${DISABLED_FILL}`,
+    `bg-[var(--color-inverse-surface)] text-[var(--color-inverse-on-surface)] hover:bg-[var(--color-btn-primary-hover)] active:scale-[0.98] ${DISABLED_FILL}`,
   'danger-outline':
     `bg-transparent text-[var(--color-error)] border border-[var(--color-error)] hover:bg-[var(--color-error-soft)] active:scale-[0.98] ${DISABLED_FADE}`,
   'danger-ghost':
@@ -134,7 +135,7 @@ const VARIANT_CLASSES: Record<ButtonVariant, string> = {
 const SIZE_CLASSES: Record<ButtonSize, string> = {
   xs: 'h-5 text-[11px] gap-1',
   sm: 'h-6 text-xs gap-1.5',
-  base: 'h-8 text-xs gap-1.5',
+  base: 'h-8 text-[13px] gap-1.5',
   md: 'h-9 text-sm gap-1.5',
   lg: 'h-10 text-sm gap-2',
 }
diff --git a/desktop/src/components/ui/Dropdown.tsx b/desktop/src/components/ui/Dropdown.tsx
index 60528dd7..281efd7c 100644
--- a/desktop/src/components/ui/Dropdown.tsx
+++ b/desktop/src/components/ui/Dropdown.tsx
@@ -11,6 +11,8 @@ import {
   type ReactNode,
 } from 'react'
 
+import { Check } from 'lucide-react'
+
 import { useDismissable } from '@/hooks/useDismissable'
 import { cx } from '@/lib/cx'
 
@@ -230,9 +232,9 @@ export function Dropdown<T extends string>({
           tabIndex={-1}
           onKeyDown={handleListKeyDown}
           className={cx(
-            // 17px — overlays are cards, not card innards. One value here
-            // settles the corner for every Dropdown menu in the app.
-            'absolute z-[var(--z-dropdown)] rounded-[var(--radius-xl)]',
+            // Menus are cards (12px) with padded rows; one value here settles
+            // the corner for every Dropdown menu in the app.
+            'absolute z-[var(--z-dropdown)] rounded-[var(--radius-lg)] p-1',
             'bg-[var(--color-surface-container-lowest)] border border-[var(--color-border)]',
             'shadow-[var(--shadow-dropdown)] focus:outline-none',
             maxHeight ? 'overflow-y-auto' : 'overflow-hidden',
@@ -255,11 +257,9 @@ export function Dropdown<T extends string>({
               }}
               onMouseEnter={() => setActiveIndex(index)}
               className={cx(
-                'flex w-full items-center gap-3 px-3 py-2.5 text-left transition-colors',
+                'flex w-full items-center gap-2.5 rounded-[var(--radius-sm)] px-2.5 py-2 text-left transition-colors',
                 item.disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer',
-                index === activeIndex && !item.disabled && 'bg-[var(--color-surface-hover)]',
-                item.value === value && 'bg-[var(--color-model-option-selected-bg)]',
-                index > 0 && 'border-t border-[var(--color-border-separator)]',
+                (index === activeIndex || item.value === value) && !item.disabled && 'bg-[var(--color-surface-hover)]',
               )}
             >
               {item.icon && (
@@ -268,19 +268,13 @@ export function Dropdown<T extends string>({
                 </span>
               )}
               <div className="min-w-0 flex-1">
-                <div className="text-sm font-medium text-[var(--color-text-primary)]">{item.label}</div>
+                <div className="text-[13px] font-medium text-[var(--color-text-primary)]">{item.label}</div>
                 {item.description && (
-                  <div className="mt-0.5 text-xs text-[var(--color-text-secondary)]">{item.description}</div>
+                  <div className="mt-0.5 text-xs text-[var(--color-text-tertiary)]">{item.description}</div>
                 )}
               </div>
               {item.value === value && (
-                <span
-                  aria-hidden="true"
-                  className="material-symbols-outlined flex-shrink-0 text-[16px] text-[var(--color-brand)]"
-                  style={{ fontVariationSettings: "'FILL' 1" }}
-                >
-                  check_circle
-                </span>
+                <Check size={15} strokeWidth={2} aria-hidden="true" className="flex-shrink-0 text-[var(--color-brand)]" />
               )}
             </div>
           ))}
diff --git a/desktop/src/components/ui/EmptyState.tsx b/desktop/src/components/ui/EmptyState.tsx
index 4003178b..d6fca300 100644
--- a/desktop/src/components/ui/EmptyState.tsx
+++ b/desktop/src/components/ui/EmptyState.tsx
@@ -34,15 +34,15 @@ const SIZE_CLASSES: Record<StateSize, string> = {
 }
 
 const ICON_BOX: Record<StateSize, string> = {
-  sm: 'h-8 w-8 text-[16px]',
-  md: 'h-10 w-10 text-[20px]',
-  lg: 'h-12 w-12 text-[24px]',
+  sm: 'h-8 w-8',
+  md: 'h-10 w-10',
+  lg: 'h-12 w-12',
 }
 
 const TITLE_SIZE: Record<StateSize, string> = {
   sm: 'text-xs',
   md: 'text-sm',
-  lg: 'text-base',
+  lg: 'text-[15px]',
 }
 
 /**
diff --git a/desktop/src/components/ui/IconButton.test.tsx b/desktop/src/components/ui/IconButton.test.tsx
index 0f4602af..e5f5bf04 100644
--- a/desktop/src/components/ui/IconButton.test.tsx
+++ b/desktop/src/components/ui/IconButton.test.tsx
@@ -47,11 +47,9 @@ describe('IconButton', () => {
     expect(container.firstElementChild?.className).toContain('focus-visible:ring-2')
   })
 
-  it('renders a string icon as a material symbol hidden from assistive tech', () => {
-    const { container } = render(<IconButton icon="settings" label="Settings" />)
-    const glyph = container.querySelector('.material-symbols-outlined')
-    expect(glyph).toHaveTextContent('settings')
-    expect(glyph).toHaveAttribute('aria-hidden', 'true')
+  it('renders the icon element it is given and names the button from label', () => {
+    render(<IconButton icon={<svg data-testid="glyph" aria-hidden="true" />} label="Settings" />)
+    expect(screen.getByRole('button', { name: 'Settings' })).toContainElement(screen.getByTestId('glyph'))
   })
 
   it('shows a spinner and disables itself while loading', () => {
diff --git a/desktop/src/components/ui/IconButton.tsx b/desktop/src/components/ui/IconButton.tsx
index 92160b4e..b602ac87 100644
--- a/desktop/src/components/ui/IconButton.tsx
+++ b/desktop/src/components/ui/IconButton.tsx
@@ -1,4 +1,4 @@
-import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react'
+import { forwardRef, type ButtonHTMLAttributes, type ReactElement } from 'react'
 
 import { cx } from '@/lib/cx'
 import { Spinner } from './Spinner'
@@ -11,8 +11,12 @@ export type IconButtonSurface = 'default' | 'sidebar' | 'terminal' | 'media'
 
 export type IconButtonProps =
   Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'aria-label' | 'title'> & {
-    /** A lucide component, a material-symbols name, or any node. */
-    icon: ReactNode | string
+    /**
+     * A lucide icon element. Strings are rejected at the type level: this prop
+     * used to accept a Material Symbols ligature name, and a string slipping
+     * through now would render as raw text ("chevron_left") instead of a glyph.
+     */
+    icon: ReactElement
     /**
      * Required. An icon-only control has no visible text, so without this it is
      * unreachable by screen readers and unlabeled in the accessibility tree.
@@ -295,15 +299,7 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(functio
       )}
       {...props}
     >
-      {loading
-        ? <Spinner size={iconSize} />
-        : typeof icon === 'string'
-          ? (
-            <span className="material-symbols-outlined" style={{ fontSize: iconSize }} aria-hidden="true">
-              {icon}
-            </span>
-          )
-          : icon}
+      {loading ? <Spinner size={iconSize} /> : icon}
     </button>
   )
 })
diff --git a/desktop/src/components/ui/MobileBottomSheet.tsx b/desktop/src/components/ui/MobileBottomSheet.tsx
index 3c19cdac..82c46d97 100644
--- a/desktop/src/components/ui/MobileBottomSheet.tsx
+++ b/desktop/src/components/ui/MobileBottomSheet.tsx
@@ -1,5 +1,6 @@
 import { useEffect, type ReactNode, type Ref } from 'react'
 import { createPortal } from 'react-dom'
+import { X } from 'lucide-react'
 
 type Props = {
   open: boolean
@@ -46,7 +47,7 @@ export function MobileBottomSheet({
   if (!open) return null
 
   return createPortal(
-    <div className="fixed inset-0 z-[var(--z-sheet)] bg-black/25" onClick={onClose}>
+    <div className="fixed inset-0 z-[var(--z-sheet)] bg-[var(--color-overlay-scrim)]" onClick={onClose}>
       <div
         ref={panelRef}
         id={id}
@@ -54,12 +55,12 @@ export function MobileBottomSheet({
         aria-modal={role === 'dialog' ? true : undefined}
         aria-label={ariaLabel ?? (typeof title === 'string' ? title : undefined)}
         data-testid={testId}
-        className={`absolute inset-x-0 bottom-0 flex max-h-[min(78dvh,640px)] min-h-0 flex-col overflow-hidden rounded-t-2xl border-x-0 border-y border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] shadow-[0_-18px_48px_rgba(54,35,28,0.22)] ${panelClassName}`}
+        className={`absolute inset-x-0 bottom-0 flex max-h-[min(78dvh,640px)] min-h-0 flex-col overflow-hidden rounded-t-[var(--radius-xl)] border-x-0 border-y border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] shadow-[var(--shadow-overlay)] ${panelClassName}`}
         onClick={(event) => event.stopPropagation()}
       >
         <div className="shrink-0 border-b border-[var(--color-border)] px-4 py-3">
           <div className="flex min-h-10 items-center justify-between gap-3">
-            <div className="min-w-0 text-[11px] font-bold uppercase tracking-widest text-[var(--color-outline)]">
+            <div className="min-w-0 text-[13px] font-semibold text-[var(--color-text-primary)]">
               {title}
             </div>
             <button
@@ -68,7 +69,7 @@ export function MobileBottomSheet({
               onClick={onClose}
               className="grid h-10 w-10 shrink-0 place-items-center rounded-full text-[var(--color-text-secondary)] transition-colors hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]"
             >
-              <span className="material-symbols-outlined text-[20px]">close</span>
+              <X size={18} strokeWidth={1.75} aria-hidden="true" />
             </button>
           </div>
           {headerExtra && (
diff --git a/desktop/src/components/ui/Modal.tsx b/desktop/src/components/ui/Modal.tsx
index 7f0ced0c..d07f1dc4 100644
--- a/desktop/src/components/ui/Modal.tsx
+++ b/desktop/src/components/ui/Modal.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useRef, type ReactNode } from 'react'
 import { createPortal } from 'react-dom'
+import { X } from 'lucide-react'
 
 const FOCUSABLE_SELECTOR = [
   'a[href]',
@@ -112,9 +113,9 @@ export function Modal({
         {title && variant === 'dialog' && (
           <div className="flex items-start justify-between gap-4 px-6 pt-6 pb-0">
             <h2
-              // 22px serif — dialog titles are headings, and headings carry the
-              // 「墨」 identity (handoff §7, every modal comp).
-              className="text-[22px] font-bold tracking-tight text-[var(--color-text-primary)]"
+              // 18px semibold: a dialog title names the task, it is not a page
+              // headline. The old 22px bold out-shouted the dialog's own content.
+              className="text-[18px] font-semibold leading-7 text-[var(--color-text-primary)]"
               style={{ fontFamily: typography === 'interface' ? 'inherit' : 'var(--font-headline)' }}
             >
               {title}
@@ -123,9 +124,9 @@ export function Modal({
               type="button"
               onClick={onClose}
               aria-label="Close dialog"
-              className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-[var(--color-text-secondary)] transition-colors hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)]"
+              className="-mr-1 flex h-8 w-8 shrink-0 items-center justify-center rounded-[var(--radius-md)] text-[var(--color-text-tertiary)] transition-colors hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)]"
             >
-              <span className="material-symbols-outlined text-[18px]">close</span>
+              <X size={16} strokeWidth={1.75} aria-hidden="true" />
             </button>
           </div>
         )}
diff --git a/desktop/src/components/ui/SegmentedControl.tsx b/desktop/src/components/ui/SegmentedControl.tsx
index 28f54a1f..600cb749 100644
--- a/desktop/src/components/ui/SegmentedControl.tsx
+++ b/desktop/src/components/ui/SegmentedControl.tsx
@@ -110,7 +110,7 @@ export function SegmentedControl<T extends string>({
         isChip ? 'flex flex-wrap items-center gap-1.5' : 'inline-flex items-center',
         appearance === 'underline'
           ? 'gap-1 border-b border-[var(--color-border)]'
-          : !isChip && 'gap-0.5 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface-container)] p-0.5',
+          : !isChip && 'gap-0.5 rounded-[var(--radius-md)] bg-[var(--color-surface-container-high)] p-0.5',
         layout === 'fill' && 'flex w-full',
         !isChip && SIZE_CLASSES[size],
         className,
@@ -155,11 +155,12 @@ export function SegmentedControl<T extends string>({
                 )
                 : cx(
                   'rounded-[var(--radius-sm)]',
+                  // `solid` and `raised` now share the lifted segment: a
+                  // terracotta-filled segment competed with the send key for
+                  // "the one brand-colored thing on screen".
                   selected
-                    ? appearance === 'raised'
-                      ? 'bg-[var(--color-surface)] text-[var(--color-text-primary)] shadow-[var(--shadow-dropdown)]'
-                      : 'bg-[var(--color-brand)] text-[var(--color-on-primary)]'
-                    : 'text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)]',
+                    ? 'bg-[var(--color-surface)] text-[var(--color-text-primary)] shadow-[var(--shadow-segment)]'
+                    : 'text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]',
                 ),
             )}
           >
diff --git a/desktop/src/components/ui/Switch.test.tsx b/desktop/src/components/ui/Switch.test.tsx
index cb145de5..e29b45fa 100644
--- a/desktop/src/components/ui/Switch.test.tsx
+++ b/desktop/src/components/ui/Switch.test.tsx
@@ -56,7 +56,11 @@ describe('Switch', () => {
     const { container: small } = render(<Switch checked onChange={() => {}} label="A" size="sm" />)
     const { container: medium } = render(<Switch checked onChange={() => {}} label="B" size="md" />)
 
-    expect(small.querySelector('.h-5.w-9')).toBeInTheDocument()
-    expect(medium.querySelector('.h-6.w-11')).toBeInTheDocument()
+    // 「素」 sizes: 28×16 and 32×18, each thumb travelling exactly
+    // track width − thumb − both 2px insets, so it lands flush on the right.
+    expect(small.querySelector('.h-4.w-7')).toBeInTheDocument()
+    expect(small.querySelector('.h-3.w-3.peer-checked\\:translate-x-\\[14px\\]')).toBeInTheDocument()
+    expect(medium.querySelector('.h-\\[18px\\].w-8')).toBeInTheDocument()
+    expect(medium.querySelector('.h-3\\.5.w-3\\.5.peer-checked\\:translate-x-\\[16px\\]')).toBeInTheDocument()
   })
 })
diff --git a/desktop/src/components/ui/Switch.tsx b/desktop/src/components/ui/Switch.tsx
index 0bce43d3..5ceee119 100644
--- a/desktop/src/components/ui/Switch.tsx
+++ b/desktop/src/components/ui/Switch.tsx
@@ -19,18 +19,18 @@ export type SwitchProps = {
 }
 
 const TRACK_SIZE = {
-  sm: 'h-5 w-9',
-  md: 'h-6 w-11',
+  sm: 'h-4 w-7',
+  md: 'h-[18px] w-8',
 } as const
 
 const THUMB_SIZE = {
-  sm: 'h-3.5 w-3.5',
-  md: 'h-4 w-4',
+  sm: 'h-3 w-3',
+  md: 'h-3.5 w-3.5',
 } as const
 
 const THUMB_OFFSET = {
-  sm: 'translate-x-0.5 peer-checked:translate-x-[18px]',
-  md: 'translate-x-1 peer-checked:translate-x-[22px]',
+  sm: 'translate-x-0.5 peer-checked:translate-x-[14px]',
+  md: 'translate-x-0.5 peer-checked:translate-x-[16px]',
 } as const
 
 /**
@@ -93,7 +93,7 @@ export function Switch({
         />
         <span
           aria-hidden="true"
-          className="absolute inset-0 rounded-full bg-[var(--color-border)] transition-colors peer-checked:bg-[var(--color-switch-checked-bg)] peer-focus-visible:ring-2 peer-focus-visible:ring-[var(--color-border-focus)]"
+          className="absolute inset-0 rounded-full bg-[var(--color-outline)] transition-colors peer-checked:bg-[var(--color-switch-checked-bg)] peer-focus-visible:ring-2 peer-focus-visible:ring-[var(--color-border-focus)]"
         />
         <span
           aria-hidden="true"
diff --git a/desktop/src/components/ui/tabChip.test.ts b/desktop/src/components/ui/tabChip.test.ts
new file mode 100644
index 00000000..66f367d4
--- /dev/null
+++ b/desktop/src/components/ui/tabChip.test.ts
@@ -0,0 +1,33 @@
+import { describe, expect, it } from 'vitest'
+
+import { TAB_CHIP_ACTIVE, TAB_CHIP_IDLE, tabChipClass, tabChipLabelClass } from './tabChip'
+
+describe('tab chip', () => {
+  it('lifts the active tab with the full edge ring and a shadow', () => {
+    expect(TAB_CHIP_ACTIVE).toContain('bg-[var(--color-surface)]')
+    expect(TAB_CHIP_ACTIVE).toContain('0_0_0_1px_var(--color-tab-edge)')
+    expect(TAB_CHIP_ACTIVE).toContain('var(--shadow-raised)')
+  })
+
+  it('keeps hover strictly weaker than selection on every theme', () => {
+    // Hover shares paper with the active tab and only the faint ring; it never
+    // uses surface-hover, which is brighter than paper on the ink themes.
+    expect(TAB_CHIP_IDLE).toContain('hover:bg-[var(--color-surface)]')
+    expect(TAB_CHIP_IDLE).toContain('hover:shadow-[0_0_0_1px_var(--color-tab-separator)]')
+    expect(TAB_CHIP_IDLE).not.toContain('surface-hover')
+    expect(TAB_CHIP_IDLE).not.toContain('--color-tab-edge')
+    expect(TAB_CHIP_IDLE).not.toMatch(/(?:^|\s)bg-/)
+  })
+
+  it('draws rings as shadows so changing tier never moves the label', () => {
+    expect(tabChipClass(true)).not.toMatch(/(?:^|\s)border(?:-|\s|$)/)
+    expect(tabChipClass(false)).not.toMatch(/(?:^|\s)border(?:-|\s|$)/)
+    expect(tabChipClass(true)).toContain('h-7')
+    expect(tabChipClass(false)).toContain('h-7')
+  })
+
+  it('gives only the active title the medium weight', () => {
+    expect(tabChipLabelClass(true)).toContain('font-medium')
+    expect(tabChipLabelClass(false)).not.toContain('font-medium')
+  })
+})
diff --git a/desktop/src/components/ui/tabChip.ts b/desktop/src/components/ui/tabChip.ts
new file mode 100644
index 00000000..b9819108
--- /dev/null
+++ b/desktop/src/components/ui/tabChip.ts
@@ -0,0 +1,41 @@
+/**
+ * One tab style for every tab strip in the app: the session tabs above the chat
+ * and the resource tabs above the workspace panel. Both strips sit on the
+ * sidebar's ground (the "trough"), and a tab is a 28px chip on it.
+ *
+ * Three tiers, each strictly stronger than the one before:
+ *
+ * - idle: no fill, tertiary label.
+ * - hover: a paper fill with the faint `--color-tab-separator` ring. Not
+ *   `--color-surface-hover`: that token is tuned for hovering *on* paper, and on
+ *   the two ink themes it is brighter than paper (dark #2B271F vs #201D17), so a
+ *   hovered tab would outshine the selected one. The ring is needed because
+ *   paper against the trough is only 1.05–1.10:1 — a fill alone has no shape.
+ * - active: the same paper fill with the full `--color-tab-edge` ring, a hair
+ *   of shadow and the medium label weight. `--color-border` cannot draw that
+ *   edge: it is calibrated against paper and lands at 1.12:1 on the trough
+ *   (see the tab-strip block in theme/contrast.test.ts).
+ *
+ * The rings are box-shadows rather than borders, so switching tiers never
+ * moves the label.
+ */
+export const TAB_CHIP_BASE =
+  'tab-bar-interactive group relative flex h-7 shrink-0 items-center rounded-[var(--radius-sm)] pl-2.5 pr-1 transition-[background-color,box-shadow,color] duration-150 ease-out'
+
+export const TAB_CHIP_ACTIVE =
+  'bg-[var(--color-surface)] text-[var(--color-text-primary)] shadow-[0_0_0_1px_var(--color-tab-edge),var(--shadow-raised)]'
+
+export const TAB_CHIP_IDLE =
+  'text-[var(--color-text-tertiary)] hover:bg-[var(--color-surface)] hover:text-[var(--color-text-primary)] hover:shadow-[0_0_0_1px_var(--color-tab-separator)]'
+
+/** The tab's own min/max width, shared so both strips truncate titles alike. */
+export const TAB_CHIP_WIDTH = 'min-w-[112px] max-w-[200px]'
+
+export function tabChipClass(active: boolean): string {
+  return `${TAB_CHIP_BASE} ${TAB_CHIP_WIDTH} ${active ? TAB_CHIP_ACTIVE : TAB_CHIP_IDLE}`
+}
+
+/** 12px title; only the active tab takes the medium weight. */
+export function tabChipLabelClass(active: boolean): string {
+  return `min-w-0 flex-1 truncate text-[12px] ${active ? 'font-medium' : ''}`
+}
diff --git a/desktop/src/components/workbench/WorkspaceAddMenu.tsx b/desktop/src/components/workbench/WorkspaceAddMenu.tsx
index 2252ecb2..63f03ef3 100644
--- a/desktop/src/components/workbench/WorkspaceAddMenu.tsx
+++ b/desktop/src/components/workbench/WorkspaceAddMenu.tsx
@@ -55,7 +55,7 @@ export function WorkspaceAddMenu({
       data-placement={position.placement}
       onKeyDown={onKeyDown}
       style={position.style}
-      className="z-[var(--z-dropdown)] w-[280px] max-w-[calc(100vw-12px)] overflow-y-auto rounded-[16px] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] p-1 shadow-[var(--shadow-card)]"
+      className="z-[var(--z-dropdown)] w-[260px] max-w-[calc(100vw-12px)] overflow-y-auto rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] p-1 shadow-[var(--shadow-dropdown)]"
     >
       <WorkspaceLauncher variant="menu" dock={dock} onSelect={onSelect} reviewUnavailableReason={reviewUnavailableReason} />
     </div>,
diff --git a/desktop/src/components/workbench/WorkspaceBrowserAddressBar.tsx b/desktop/src/components/workbench/WorkspaceBrowserAddressBar.tsx
index dad3ddf1..10bc2da9 100644
--- a/desktop/src/components/workbench/WorkspaceBrowserAddressBar.tsx
+++ b/desktop/src/components/workbench/WorkspaceBrowserAddressBar.tsx
@@ -1,5 +1,5 @@
 import { forwardRef, useEffect, useId, useImperativeHandle, useMemo, useRef, useState } from 'react'
-import { ExternalLink, Globe, Search } from 'lucide-react'
+import { ExternalLink, Globe, Lock, Search } from 'lucide-react'
 import { IconButton } from '@/components/ui/IconButton'
 import { useDismissable } from '@/hooks/useDismissable'
 import { useTranslation } from '@/i18n'
@@ -21,7 +21,7 @@ type WorkspaceBrowserAddressBarProps = {
 
 const SUGGESTION_LIMIT = 6
 
-/** A page address is viewed centered and edited as an omnibox, with local visit suggestions. */
+/** A page address sits in a sunken field behind a lock or globe and is edited as an omnibox, with local visit suggestions. */
 export const WorkspaceBrowserAddressBar = forwardRef<HTMLInputElement, WorkspaceBrowserAddressBarProps>(function WorkspaceBrowserAddressBar({
   currentAddress, active, disabled, blank, visits, resolveAddress, onNavigate, onOpenExternal,
 }, forwardedRef) {
@@ -91,7 +91,7 @@ export const WorkspaceBrowserAddressBar = forwardRef<HTMLInputElement, Workspace
   return (
     <form
       ref={formRef}
-      className={`group/address relative flex h-8 min-w-0 flex-1 items-center rounded-[var(--radius-md)] ${editing ? 'bg-[var(--color-surface-hover)] ring-1 ring-inset ring-[var(--color-border)]' : 'hover:bg-[var(--color-surface-hover)]'}`}
+      className={`group/address relative mx-1 flex h-7 min-w-0 flex-1 items-center rounded-[var(--radius-sm)] pl-2.5 transition-colors ${editing ? 'bg-[var(--color-surface-container-lowest)] ring-1 ring-inset ring-[var(--color-outline)]' : 'bg-[var(--color-surface-container)] hover:bg-[var(--color-surface-hover)]'}`}
       onBlur={(event) => {
         if (!event.currentTarget.contains(event.relatedTarget as Node | null)) finishEditing()
       }}
@@ -100,6 +100,10 @@ export const WorkspaceBrowserAddressBar = forwardRef<HTMLInputElement, Workspace
         submit(open && selectedIndex >= 0 ? suggestions[selectedIndex]!.input : draft)
       }}
     >
+      {/* Only a committed https page earns the lock; anything else is a globe. */}
+      {!editing && currentAddress.startsWith('https:')
+        ? <Lock size={12} strokeWidth={2} aria-hidden="true" className="shrink-0 text-[var(--color-text-tertiary)]" />
+        : <Globe size={12} strokeWidth={2} aria-hidden="true" className="shrink-0 text-[var(--color-text-tertiary)]" />}
       <input
         ref={inputRef}
         value={draft}
@@ -145,13 +149,13 @@ export const WorkspaceBrowserAddressBar = forwardRef<HTMLInputElement, Workspace
         aria-label={t('workspace.browser.address')}
         placeholder={t('workspace.browser.addressPlaceholder')}
         data-testid="workspace-browser-address"
-        className={`h-8 min-w-0 flex-1 rounded-[var(--radius-md)] bg-transparent px-3 text-[13px] text-[var(--color-text-primary)] outline-none placeholder:text-[var(--color-text-tertiary)] focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-[var(--color-border-focus)] ${editing ? 'text-left' : 'text-center'}`}
+        className={`h-7 min-w-0 flex-1 bg-transparent pl-1.5 pr-2 text-[12px] outline-none placeholder:text-[var(--color-text-tertiary)] ${editing ? 'text-[var(--color-text-primary)]' : 'text-[var(--color-text-secondary)]'}`}
       />
       <span className="opacity-0 transition-opacity group-hover/address:opacity-100 group-focus-within/address:opacity-100">
         <IconButton
-          icon={<ExternalLink size={16} strokeWidth={1.75} />}
+          icon={<ExternalLink size={14} strokeWidth={1.75} />}
           label={t('workspace.browser.openExternal')}
-          size="md"
+          size="xs"
           tone="muted"
           disabled={!(editing ? resolveAddress(draft) : currentAddress)}
           onPointerDown={(event) => event.preventDefault()}
@@ -205,16 +209,16 @@ function AddressSuggestions({ id, items, query, selectedIndex, onHighlight, onSe
           onPointerDown={(event) => event.preventDefault()}
           onPointerMove={() => onHighlight(index)}
           onClick={() => onSelect(item.input)}
-          className={`flex h-11 cursor-pointer items-center gap-3 rounded-[var(--radius-md)] px-3 text-[13px] ${selectedIndex === index ? 'bg-[var(--color-surface-hover)]' : ''}`}
+          className={`flex h-8 cursor-pointer items-center gap-2.5 rounded-[var(--radius-sm)] px-2 text-[13px] ${selectedIndex === index ? 'bg-[var(--color-surface-hover)]' : ''}`}
         >
           {item.action === 'search'
-            ? <Search size={16} aria-hidden="true" className="shrink-0 text-[var(--color-text-secondary)]" />
-            : <Globe size={16} aria-hidden="true" className="shrink-0 text-[var(--color-text-secondary)]" />}
+            ? <Search size={14} strokeWidth={1.75} aria-hidden="true" className="shrink-0 text-[var(--color-text-tertiary)]" />
+            : <Globe size={14} strokeWidth={1.75} aria-hidden="true" className="shrink-0 text-[var(--color-text-tertiary)]" />}
           <span className="min-w-0 flex-1 truncate text-[var(--color-text-primary)]">
             <HighlightedText text={item.title} query={query} />
             {item.url ? <span className="text-[var(--color-text-tertiary)]"> — <HighlightedText text={item.url} query={query} /></span> : null}
           </span>
-          {item.action ? <span className="shrink-0 text-[var(--color-text-tertiary)]">{t(item.action === 'search' ? 'workspace.browser.searchWeb' : 'workspace.browser.visitAddress')}</span> : null}
+          {item.action ? <span className="shrink-0 text-[12px] text-[var(--color-text-tertiary)]">{t(item.action === 'search' ? 'workspace.browser.searchWeb' : 'workspace.browser.visitAddress')}</span> : null}
         </div>
       ))}
     </div>
@@ -224,5 +228,5 @@ function AddressSuggestions({ id, items, query, selectedIndex, onHighlight, onSe
 function HighlightedText({ text, query }: { text: string; query: string }) {
   const start = query ? text.toLocaleLowerCase().indexOf(query.toLocaleLowerCase()) : -1
   if (start < 0) return text
-  return <>{text.slice(0, start)}<strong className="font-semibold">{text.slice(start, start + query.length)}</strong>{text.slice(start + query.length)}</>
+  return <>{text.slice(0, start)}<strong className="font-medium text-[var(--color-text-primary)]">{text.slice(start, start + query.length)}</strong>{text.slice(start + query.length)}</>
 }
diff --git a/desktop/src/components/workbench/WorkspaceBrowserSelectionBar.tsx b/desktop/src/components/workbench/WorkspaceBrowserSelectionBar.tsx
index e773857e..d9bc64ee 100644
--- a/desktop/src/components/workbench/WorkspaceBrowserSelectionBar.tsx
+++ b/desktop/src/components/workbench/WorkspaceBrowserSelectionBar.tsx
@@ -10,11 +10,11 @@ export function WorkspaceBrowserSelectionBar({ sessionId, browserTabId }: { sess
   const draft = usePreviewSelectionStore(state => state.bySession[browserTabId])
   if (!draft?.items.length) return null
   return (
-    <div role="region" aria-label={t('browser.selection.draftCount', { count: draft.items.length })} aria-live="polite" className="flex shrink-0 items-center gap-2 border-t border-[var(--color-border)] bg-[var(--color-surface)] px-3 py-2">
+    <div role="region" aria-label={t('browser.selection.draftCount', { count: draft.items.length })} aria-live="polite" className="flex h-10 shrink-0 items-center gap-1.5 border-t border-[var(--color-border)] bg-[var(--color-surface)] pl-3 pr-2">
       <span className="min-w-0 flex-1 truncate text-xs text-[var(--color-text-primary)]">{t('browser.selection.draftCount', { count: draft.items.length })}</span>
-      <IconButton icon={<Undo2 size={14} />} label={t('browser.selection.undo')} size="xs" onClick={() => { void undoBrowserSelection(browserTabId) }} />
-      <IconButton icon={<Trash2 size={14} />} label={t('browser.selection.clear')} size="xs" onClick={() => { void discardBrowserSelections(browserTabId) }} />
-      <Button size="sm" icon={<Send size={13} />} onClick={() => { void sendBrowserSelections(sessionId, browserTabId) }}>{t('browser.selection.sendBatch', { count: draft.items.length })}</Button>
+      <IconButton icon={<Undo2 size={14} strokeWidth={1.75} />} label={t('browser.selection.undo')} size="xs" onClick={() => { void undoBrowserSelection(browserTabId) }} />
+      <IconButton icon={<Trash2 size={14} strokeWidth={1.75} />} label={t('browser.selection.clear')} size="xs" onClick={() => { void discardBrowserSelections(browserTabId) }} />
+      <Button size="sm" icon={<Send size={12} strokeWidth={2} />} onClick={() => { void sendBrowserSelections(sessionId, browserTabId) }}>{t('browser.selection.sendBatch', { count: draft.items.length })}</Button>
     </div>
   )
 }
diff --git a/desktop/src/components/workbench/WorkspaceBrowserTab.test.tsx b/desktop/src/components/workbench/WorkspaceBrowserTab.test.tsx
index 1ee42bc9..1450c50f 100644
--- a/desktop/src/components/workbench/WorkspaceBrowserTab.test.tsx
+++ b/desktop/src/components/workbench/WorkspaceBrowserTab.test.tsx
@@ -1100,7 +1100,7 @@ describe('browser address suggestions', () => {
 it('keeps the browser toolbar aligned with file content and ignores page-only menu actions in a blank tab', async () => {
   const tab = openBrowserTab(null)
   await renderReady(<WorkspaceBrowserTab sessionId={SESSION} tab={tab} active />)
-  expect(screen.getByTestId('workspace-browser-toolbar')).toHaveClass('h-[52px]')
+  expect(screen.getByTestId('workspace-browser-toolbar')).toHaveClass('h-10')
   act(() => screen.getByTestId('workspace-browser-menu-trigger').focus())
   host.message.mockClear()
   for (const action of ['find', 'print', 'capture', 'pickElement'] as const) await openMenuItem(action)
diff --git a/desktop/src/components/workbench/WorkspaceBrowserTab.tsx b/desktop/src/components/workbench/WorkspaceBrowserTab.tsx
index 7c9accd4..d44a953c 100644
--- a/desktop/src/components/workbench/WorkspaceBrowserTab.tsx
+++ b/desktop/src/components/workbench/WorkspaceBrowserTab.tsx
@@ -2,14 +2,15 @@ import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } fr
 import {
   ArrowLeft,
   ArrowRight,
+  Ellipsis,
   ExternalLink,
   Globe,
-  MessageSquarePlus,
-  MoreVertical,
-  RotateCw,
+  MousePointer2,
+  RefreshCw,
   Search,
   X,
 } from 'lucide-react'
+import { Button } from '@/components/ui/Button'
 import { IconButton } from '@/components/ui/IconButton'
 import { Spinner } from '@/components/ui/Spinner'
 import { ConfirmDialog } from '@/components/ui/ConfirmDialog'
@@ -410,21 +411,25 @@ export function WorkspaceBrowserTab({ sessionId, tab, active }: WorkspaceBrowser
         data-testid="workspace-browser-unavailable"
         className="flex min-h-0 flex-1 flex-col items-center justify-center gap-2 px-8 text-center"
       >
+        <span aria-hidden="true" className="mb-1 flex h-9 w-9 items-center justify-center rounded-[var(--radius-md)] bg-[var(--color-surface-container)] text-[var(--color-text-tertiary)]">
+          <Globe size={16} strokeWidth={1.75} />
+        </span>
         <p className="text-[13px] font-medium text-[var(--color-text-primary)]">
           {t('workspace.browser.unavailableTitle')}
         </p>
-        <p className="max-w-[360px] text-[12px] leading-relaxed text-[var(--color-text-secondary)]">
+        <p className="max-w-[360px] text-[12px] leading-[1.6] text-[var(--color-text-tertiary)]">
           {t('workspace.browser.unavailableBody')}
         </p>
         {tab.url ? (
-          <button
-            type="button"
+          <Button
+            variant="secondary"
+            size="sm"
+            className="mt-1"
+            icon={<ExternalLink size={14} strokeWidth={1.75} aria-hidden="true" />}
             onClick={() => { void getDesktopHost().shell.open(tab.url!) }}
-            className="mt-1 inline-flex items-center gap-1.5 rounded-[var(--radius-md)] border border-[var(--color-border)] px-3 py-1.5 text-[12px] text-[var(--color-text-primary)] transition-colors hover:bg-[var(--color-surface-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]"
           >
-            <ExternalLink size={13} aria-hidden="true" />
             {t('workspace.browser.openExternal')}
-          </button>
+          </Button>
         ) : null}
       </div>
     )
@@ -434,28 +439,28 @@ export function WorkspaceBrowserTab({ sessionId, tab, active }: WorkspaceBrowser
     <div ref={browserRootRef} className="relative flex min-h-0 flex-1 flex-col">
       <div
         data-testid="workspace-browser-toolbar"
-        className="flex h-[52px] shrink-0 items-center gap-1 border-b border-[var(--color-border)] bg-[var(--color-surface)] px-2.5"
+        className="flex h-10 shrink-0 items-center gap-0.5 border-b border-[var(--color-border)] bg-[var(--color-surface)] px-2"
       >
         <IconButton
-          icon={<ArrowLeft size={15} strokeWidth={1.9} />}
+          icon={<ArrowLeft size={16} strokeWidth={1.75} />}
           label={t('workspace.browser.back')}
-          size="md"
+          size="sm"
           tone="muted"
           disabled={!ready || !page?.canGoBack}
           onClick={() => requestNavigation(() => runNavigationCommand(() => workspaceBrowserHost.goBack(browserTabId)))}
         />
         <IconButton
-          icon={<ArrowRight size={15} strokeWidth={1.9} />}
+          icon={<ArrowRight size={16} strokeWidth={1.75} />}
           label={t('workspace.browser.forward')}
-          size="md"
+          size="sm"
           tone="muted"
           disabled={!ready || !page?.canGoForward}
           onClick={() => requestNavigation(() => runNavigationCommand(() => workspaceBrowserHost.goForward(browserTabId)))}
         />
         <IconButton
-          icon={loading ? <Spinner size={15} /> : <RotateCw size={15} strokeWidth={1.9} />}
+          icon={loading ? <Spinner size={14} /> : <RefreshCw size={14} strokeWidth={1.75} />}
           label={t(loading ? 'workspace.browser.stop' : 'workspace.browser.reload')}
-          size="md"
+          size="sm"
           tone="muted"
           aria-busy={loading}
           disabled={!ready}
@@ -479,7 +484,7 @@ export function WorkspaceBrowserTab({ sessionId, tab, active }: WorkspaceBrowser
           onOpenExternal={(url) => { void getDesktopHost().shell.open(url) }}
         />
         <IconButton
-          icon={<MessageSquarePlus size={16} strokeWidth={1.75} />}
+          icon={<MousePointer2 size={16} strokeWidth={1.75} />}
           label={t(annotationActive ? 'workspace.browser.annotationActive' : 'workspace.browser.pickElement')}
           pressed={annotationActive}
           onKeyDown={(event) => {
@@ -489,7 +494,7 @@ export function WorkspaceBrowserTab({ sessionId, tab, active }: WorkspaceBrowser
               runCommand(() => workspaceBrowserHost.message(browserTabId, { v: 1, type: 'exit-picker' }))
             }
           }}
-          size="md"
+          size="sm"
           tone="muted"
           disabled={!ready || !tab.url || !!tab.loadError}
           data-testid="workspace-browser-annotate"
@@ -497,9 +502,9 @@ export function WorkspaceBrowserTab({ sessionId, tab, active }: WorkspaceBrowser
         />
         <IconButton
           ref={menuTriggerRef}
-          icon={<MoreVertical size={15} strokeWidth={1.9} />}
+          icon={<Ellipsis size={16} strokeWidth={1.75} />}
           label={t('workspace.browser.menu')}
-          size="md"
+          size="sm"
           tone="muted"
           pressed={menuOpen}
           aria-haspopup="menu"
@@ -518,9 +523,9 @@ export function WorkspaceBrowserTab({ sessionId, tab, active }: WorkspaceBrowser
       {findOpen ? (
         <div
           data-testid="workspace-browser-find"
-          className="flex h-9 shrink-0 items-center gap-1.5 border-b border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] px-2"
+          className="flex h-9 shrink-0 items-center gap-2 border-b border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] pl-3 pr-2"
         >
-          <Search size={13} aria-hidden="true" className="shrink-0 text-[var(--color-text-tertiary)]" />
+          <Search size={14} strokeWidth={1.75} aria-hidden="true" className="shrink-0 text-[var(--color-text-tertiary)]" />
           <input
             autoFocus
             value={findText}
@@ -552,9 +557,9 @@ export function WorkspaceBrowserTab({ sessionId, tab, active }: WorkspaceBrowser
               : ''}
           </span>
           <IconButton
-            icon={<X size={13} />}
+            icon={<X size={14} strokeWidth={1.75} />}
             label={t('workspace.browser.findClose')}
-            size="2xs"
+            size="xs"
             tone="muted"
             onClick={() => {
               setFindOpen(false)
@@ -567,12 +572,14 @@ export function WorkspaceBrowserTab({ sessionId, tab, active }: WorkspaceBrowser
       <div className="relative min-h-0 flex-1 overflow-hidden" data-testid="workspace-browser-stage">
         <div ref={stageRef} data-testid="workspace-browser-placeholder" className="absolute inset-0" />
         {!tab.url && !tab.loadError ? (
-          <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-3 text-center">
-            <Globe size={32} strokeWidth={1.75} aria-hidden="true" className="mb-2 text-[var(--color-text-tertiary)]" />
-            <p className="text-[16px] font-medium text-[var(--color-text-primary)]">
+          <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-2 px-8 text-center">
+            <span aria-hidden="true" className="mb-1 flex h-10 w-10 items-center justify-center rounded-[var(--radius-md)] bg-[var(--color-surface-container)] text-[var(--color-text-tertiary)]">
+              <Globe size={20} strokeWidth={1.75} />
+            </span>
+            <p className="text-[15px] font-medium text-[var(--color-text-primary)]">
               {t('workspace.browser.emptyTitle')}
             </p>
-            <p className="text-[14px] text-[var(--color-text-secondary)]">
+            <p className="max-w-[360px] text-[13px] text-[var(--color-text-tertiary)]">
               {t('workspace.browser.emptyBody')}
             </p>
           </div>
@@ -583,23 +590,28 @@ export function WorkspaceBrowserTab({ sessionId, tab, active }: WorkspaceBrowser
             data-testid="workspace-browser-error"
             className="absolute inset-0 flex flex-col items-center justify-center gap-2 bg-[var(--color-surface)] px-8 text-center"
           >
+            <span aria-hidden="true" className="mb-1 flex h-9 w-9 items-center justify-center rounded-[var(--radius-md)] bg-[var(--color-error-container)] text-[var(--color-on-error-container)]">
+              <Globe size={16} strokeWidth={1.75} />
+            </span>
             <p className="text-[13px] font-medium text-[var(--color-text-primary)]">
               {t('workspace.browser.loadFailed', { url: tab.url ?? '' })}
             </p>
-            <p className="max-w-[420px] text-[12px] text-[var(--color-text-secondary)]">
+            <p className="max-w-[420px] break-words font-mono text-[12px] text-[var(--color-text-tertiary)]">
               {tab.loadError}
             </p>
-            <button
-              type="button"
+            <Button
+              variant="secondary"
+              size="sm"
+              className="mt-1"
+              icon={<RefreshCw size={14} strokeWidth={1.75} aria-hidden="true" />}
               onClick={() => {
                 useWorkspaceStore.getState().updateBrowserTab(sessionId, browserTabId, { loadError: null })
                 if (ready) runNavigationCommand(() => workspaceBrowserHost.reload(browserTabId, { ignoreCache: true }))
                 else setCreateAttempt((attempt) => attempt + 1)
               }}
-              className="mt-1 rounded-[var(--radius-md)] border border-[var(--color-border)] px-3 py-1.5 text-[12px] text-[var(--color-text-primary)] transition-colors hover:bg-[var(--color-surface-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]"
             >
               {t('workspace.browser.retry')}
-            </button>
+            </Button>
           </div>
         ) : null}
       </div>
@@ -624,21 +636,21 @@ export function WorkspaceBrowserTab({ sessionId, tab, active }: WorkspaceBrowser
         <div
           ref={panelRef}
           data-testid={`workspace-browser-panel-${panel}`}
-          className="absolute inset-x-0 bottom-0 top-[52px] z-[var(--z-raised)] flex flex-col border-t border-[var(--color-border)] bg-[var(--color-surface)]"
+          className="absolute inset-x-0 bottom-0 top-10 z-[var(--z-raised)] flex flex-col border-t border-[var(--color-border)] bg-[var(--color-surface)]"
         >
-          <div className="flex h-9 shrink-0 items-center justify-between border-b border-[var(--color-border)] px-3">
-            <span className="text-[12px] font-medium text-[var(--color-text-primary)]">
+          <div className="flex h-10 shrink-0 items-center justify-between border-b border-[var(--color-border)] pl-3 pr-2">
+            <span className="text-[13px] font-semibold text-[var(--color-text-primary)]">
               {t(panel === 'downloads' ? 'workspace.browser.downloads' : 'workspace.browser.history')}
             </span>
             <IconButton
-              icon={<X size={13} />}
+              icon={<X size={14} strokeWidth={1.75} />}
               label={t('workspace.browser.closeOverlay')}
-              size="2xs"
+              size="xs"
               tone="muted"
               onClick={() => setPanel(null)}
             />
           </div>
-          <div className="min-h-0 flex-1 overflow-y-auto px-1.5 py-1.5">
+          <div className="min-h-0 flex-1 overflow-y-auto p-1.5">
             {panel === 'downloads' ? (
               downloads.length === 0 ? (
                 <p className="px-2 py-3 text-[12px] text-[var(--color-text-tertiary)]">
@@ -649,9 +661,9 @@ export function WorkspaceBrowserTab({ sessionId, tab, active }: WorkspaceBrowser
                   {downloads.map((item) => (
                     <li
                       key={item.id}
-                      className="flex items-center gap-2 rounded-[var(--radius-sm)] px-2 py-1.5"
+                      className="flex min-h-[30px] items-center gap-2 rounded-[var(--radius-sm)] px-2 py-1"
                     >
-                      <span className="min-w-0 flex-1 truncate text-[12px] text-[var(--color-text-primary)]">
+                      <span className="min-w-0 flex-1 truncate text-[13px] text-[var(--color-text-primary)]">
                         {item.filename}
                       </span>
                       <span className="shrink-0 font-mono text-[11px] tabular-nums text-[var(--color-text-tertiary)]">
@@ -661,9 +673,9 @@ export function WorkspaceBrowserTab({ sessionId, tab, active }: WorkspaceBrowser
                       </span>
                       {item.state === 'completed' && item.savePath ? (
                         <IconButton
-                          icon={<ExternalLink size={13} />}
+                          icon={<ExternalLink size={14} strokeWidth={1.75} />}
                           label={t('workspace.browser.revealDownload')}
-                          size="2xs"
+                          size="xs"
                           tone="muted"
                           onClick={() => { void getDesktopHost().shell.openPath(item.savePath!) }}
                         />
@@ -688,7 +700,7 @@ export function WorkspaceBrowserTab({ sessionId, tab, active }: WorkspaceBrowser
                       }}
                       className="flex w-full flex-col items-start gap-0.5 rounded-[var(--radius-sm)] px-2 py-1.5 text-left transition-colors hover:bg-[var(--color-surface-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]"
                     >
-                      <span className="w-full truncate text-[12px] text-[var(--color-text-primary)]">
+                      <span className="w-full truncate text-[13px] text-[var(--color-text-primary)]">
                         {visit.title || visit.url}
                       </span>
                       <span className="w-full truncate font-mono text-[11px] text-[var(--color-text-tertiary)]">
diff --git a/desktop/src/components/workbench/WorkspaceFileIcon.tsx b/desktop/src/components/workbench/WorkspaceFileIcon.tsx
index 6480cecf..504ff115 100644
--- a/desktop/src/components/workbench/WorkspaceFileIcon.tsx
+++ b/desktop/src/components/workbench/WorkspaceFileIcon.tsx
@@ -43,9 +43,9 @@ export function WorkspaceFileIcon({ path, size = 14, className = '' }: Workspace
           : type === 'video' ? FileVideo
             : type === 'spreadsheet' ? FileSpreadsheet
               : type === 'code' || type === 'web' ? FileCode2 : FileText
-  const color = type === 'json' ? 'var(--color-brand)'
+  const color = type === 'json' ? 'var(--color-warning)'
     : type === 'image' ? 'var(--color-info)'
       : type === 'pdf' ? 'var(--color-error)'
         : type === 'spreadsheet' ? 'var(--color-success)' : 'var(--color-text-tertiary)'
-  return <Icon aria-hidden="true" data-file-type={type} size={size} strokeWidth={1.7} className={`shrink-0 ${className}`} style={{ color }} />
+  return <Icon aria-hidden="true" data-file-type={type} size={size} strokeWidth={1.75} className={`shrink-0 ${className}`} style={{ color }} />
 }
diff --git a/desktop/src/components/workbench/WorkspaceFileTab.test.tsx b/desktop/src/components/workbench/WorkspaceFileTab.test.tsx
index 3ecf91a7..a12b7ff9 100644
--- a/desktop/src/components/workbench/WorkspaceFileTab.test.tsx
+++ b/desktop/src/components/workbench/WorkspaceFileTab.test.tsx
@@ -707,10 +707,10 @@ describe('open with', () => {
 
 describe('toolbar density', () => {
   it('matches the shared workbench bar height', () => {
-    // Same height as the resource tab strip and review toolbar; switching
-    // resources must not move the content boundary.
+    // Same 40px as the dock tab strip, review toolbar and browser bar;
+    // switching resources must not move the content boundary.
     renderTab('src/a.ts')
-    expect(screen.getByTestId('workspace-file-header').className).toContain('h-[52px]')
+    expect(screen.getByTestId('workspace-file-header').className).toContain('h-10')
   })
 
   it('opens with the displayed application from the primary half without opening the dropdown', () => {
diff --git a/desktop/src/components/workbench/WorkspaceFileTab.tsx b/desktop/src/components/workbench/WorkspaceFileTab.tsx
index 4cf00f56..7edece3c 100644
--- a/desktop/src/components/workbench/WorkspaceFileTab.tsx
+++ b/desktop/src/components/workbench/WorkspaceFileTab.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from 'react'
-import { ChevronDown, ChevronRight, ExternalLink, FolderClosed, FolderOpen, PanelLeftClose, PanelLeftOpen } from 'lucide-react'
+import { Binary, ChevronDown, ChevronRight, CircleAlert, Database, ExternalLink, FolderClosed, FolderOpen, PanelLeftClose, PanelLeftOpen, SearchX } from 'lucide-react'
 import { IconButton } from '@/components/ui/IconButton'
 import { TargetIcon } from '@/components/composite/TargetIcon'
 import { useWorkspaceFileOpenTargets } from '@/components/workspace/workspaceFileOpenTargets'
@@ -197,11 +197,11 @@ export function WorkspaceFileTab({ sessionId, tab }: WorkspaceFileTabProps) {
     <div className="relative flex min-h-0 flex-1 flex-col">
       <div
         data-testid="workspace-file-header"
-        className="flex h-[52px] shrink-0 items-center gap-2 border-b border-[var(--color-border)] px-3"
+        className="flex h-10 shrink-0 items-center gap-1 border-b border-[var(--color-border)] pl-3 pr-2"
       >
         <nav
           aria-label={t('workspace.files.breadcrumb')}
-          className="flex min-w-0 flex-1 items-center gap-1 overflow-hidden text-[14px] text-[var(--color-text-tertiary)]"
+          className="flex min-w-0 flex-1 items-center gap-1 overflow-hidden text-[12px] text-[var(--color-text-tertiary)]"
         >
           {breadcrumbSegments.length === 0 ? (
             <span className="truncate">/</span>
@@ -209,10 +209,10 @@ export function WorkspaceFileTab({ sessionId, tab }: WorkspaceFileTabProps) {
             breadcrumbSegments.map((segment, index) => (
               <span key={`${segment}-${index}`} className="flex min-w-0 items-center gap-0.5">
                 {index > 0 ? (
-                  <ChevronRight size={13} aria-hidden="true" className="shrink-0 opacity-60" />
+                  <ChevronRight size={12} strokeWidth={2} aria-hidden="true" className="shrink-0 text-[var(--color-text-tertiary)] opacity-70" />
                 ) : null}
                 <span
-                  className={`truncate ${index === breadcrumbSegments.length - 1 ? 'text-[var(--color-text-primary)]' : ''}`}
+                  className={`truncate ${index === breadcrumbSegments.length - 1 ? 'font-medium text-[var(--color-text-primary)]' : ''}`}
                 >
                   {segment}
                 </span>
@@ -223,8 +223,8 @@ export function WorkspaceFileTab({ sessionId, tab }: WorkspaceFileTabProps) {
         {previewVisible ? <IconButton
           ref={treeToggleRef}
           icon={treeOpen
-            ? <FolderOpen size={18} strokeWidth={1.8} />
-            : <FolderClosed size={18} strokeWidth={1.8} />}
+            ? <FolderOpen size={14} strokeWidth={1.75} />
+            : <FolderClosed size={14} strokeWidth={1.75} />}
           label={t('workspace.files.toggleTree')}
           size="sm"
           tone="muted"
@@ -235,7 +235,7 @@ export function WorkspaceFileTab({ sessionId, tab }: WorkspaceFileTabProps) {
         {path ? (
           <>
             <IconButton
-              icon={previewVisible ? <PanelLeftClose size={18} /> : <PanelLeftOpen size={18} />}
+              icon={previewVisible ? <PanelLeftClose size={14} strokeWidth={1.75} /> : <PanelLeftOpen size={14} strokeWidth={1.75} />}
               label={t(previewVisible ? 'workspace.files.hidePreview' : 'workspace.files.showPreview')}
               size="sm"
               tone="muted"
@@ -245,16 +245,16 @@ export function WorkspaceFileTab({ sessionId, tab }: WorkspaceFileTabProps) {
                 if (previewVisible) setTreeOpen(true)
               }}
             />
-            <span className="relative flex h-8 shrink-0 items-stretch rounded-[var(--radius-md)] border border-[var(--color-border)]">
+            <span className="relative ml-1 flex h-7 shrink-0 items-stretch rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)]">
               <button
                 type="button"
                 data-testid="workspace-file-open-primary"
                 disabled={!fileOpen.primaryTarget}
                 aria-label={fileOpen.primaryTarget ? t('openWith.openInTarget', { target: fileOpen.primaryTarget.label }) : t('workspace.files.openWith')}
                 onClick={() => { if (fileOpen.primaryTarget) fileOpen.openTarget(fileOpen.primaryTarget) }}
-                className="flex min-w-0 items-center gap-2 rounded-l-[var(--radius-md)] px-2 text-[14px] text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] disabled:opacity-50"
+                className="flex min-w-0 items-center gap-1.5 rounded-l-[var(--radius-md)] pl-2 pr-2.5 text-[12px] text-[var(--color-text-primary)] transition-colors hover:bg-[var(--color-surface-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] disabled:opacity-50"
               >
-                <span aria-hidden="true">{fileOpen.primaryTarget ? <TargetIcon target={fileOpen.primaryTarget} size={16} /> : <ExternalLink size={16} />}</span>
+                <span aria-hidden="true" className="flex">{fileOpen.primaryTarget ? <TargetIcon target={fileOpen.primaryTarget} size={14} /> : <ExternalLink size={14} strokeWidth={1.75} />}</span>
                 {t('workspace.files.openWith')}
               </button>
               <button
@@ -266,9 +266,9 @@ export function WorkspaceFileTab({ sessionId, tab }: WorkspaceFileTabProps) {
                 aria-controls={openWithOpen ? openWithMenuId : undefined}
                 onClick={() => setOpenWithOpen((open) => !open)}
                 aria-label={t('workspace.files.openWith')}
-                className="flex w-7 items-center justify-center rounded-r-[var(--radius-md)] border-l border-[var(--color-border)] text-[var(--color-text-secondary)] transition-colors hover:bg-[var(--color-surface-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]"
+                className="flex w-6 items-center justify-center rounded-r-[var(--radius-md)] border-l border-[var(--color-border)] text-[var(--color-text-tertiary)] transition-colors hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]"
               >
-                <ChevronDown size={14} aria-hidden="true" />
+                <ChevronDown size={12} strokeWidth={2} aria-hidden="true" />
               </button>
               {openWithOpen ? (
                 <div
@@ -277,7 +277,7 @@ export function WorkspaceFileTab({ sessionId, tab }: WorkspaceFileTabProps) {
                   role="menu"
                   aria-label={t('workspace.files.openWith')}
                   onKeyDown={handleOpenWithKeyDown}
-                  className="absolute right-0 top-[34px] z-[var(--z-dropdown)] max-h-[65vh] w-[204px] max-w-[calc(100vw-24px)] overflow-y-auto rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] p-1.5 shadow-[var(--shadow-dropdown)]"
+                  className="absolute right-0 top-[30px] z-[var(--z-dropdown)] max-h-[65vh] w-[220px] max-w-[calc(100vw-24px)] overflow-y-auto rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] p-1 shadow-[var(--shadow-dropdown)]"
                 >
                   <WorkspaceFileOpenWith
                     absolutePath={absolutePath}
@@ -308,15 +308,15 @@ export function WorkspaceFileTab({ sessionId, tab }: WorkspaceFileTabProps) {
           })
         }}>
           {!entry || entry.state === 'loading' ? (
-            <PanelMessage icon="hourglass_empty" message={t('workspace.previewState.loading')} />
+            <PanelMessage busy message={t('workspace.previewState.loading')} />
           ) : entry.state === 'missing' ? (
-            <PanelMessage icon="search_off" message={t('workspace.previewState.missing')} />
+            <PanelMessage icon={SearchX} message={t('workspace.previewState.missing')} />
           ) : entry.state === 'too_large' ? (
-            <PanelMessage icon="database" message={t('workspace.previewState.tooLarge')} action={systemAction} />
+            <PanelMessage icon={Database} message={t('workspace.previewState.tooLarge')} action={systemAction} />
           ) : entry.state === 'binary' ? (
-            <PanelMessage icon="data_object" message={t('workspace.previewState.binary')} action={systemAction} />
+            <PanelMessage icon={Binary} message={t('workspace.previewState.binary')} action={systemAction} />
           ) : entry.state === 'error' ? (
-            <PanelMessage icon="error" tone="error" message={entry.error || t('workspace.loadError')} action={systemAction} />
+            <PanelMessage icon={CircleAlert} tone="error" message={entry.error || t('workspace.loadError')} action={systemAction} />
           ) : entry.previewType === 'image' ? (
             <ImagePreview
               sessionId={sessionId}
@@ -356,7 +356,7 @@ export function WorkspaceFileTab({ sessionId, tab }: WorkspaceFileTabProps) {
           {entry?.refreshError ? (
             <p
               role="status"
-              className="shrink-0 border-t border-[var(--color-border)] px-3 py-1.5 text-[11px] text-[var(--color-text-tertiary)]"
+              className="shrink-0 border-t border-[var(--color-border)] px-3 py-1.5 text-[12px] text-[var(--color-text-tertiary)]"
             >
               {t('workspace.files.refreshFailed', { reason: entry.refreshError })}
             </p>
diff --git a/desktop/src/components/workbench/WorkspaceFileTreePane.test.tsx b/desktop/src/components/workbench/WorkspaceFileTreePane.test.tsx
index 1fc09558..0cbabb11 100644
--- a/desktop/src/components/workbench/WorkspaceFileTreePane.test.tsx
+++ b/desktop/src/components/workbench/WorkspaceFileTreePane.test.tsx
@@ -234,7 +234,7 @@ describe('WorkspaceFileTreePane', () => {
     fireEvent.click(screen.getByTestId('workspace-tree-row-src'))
     const file = await screen.findByTestId('workspace-tree-row-src/adapters.ts')
     expect(file).toHaveAccessibleName('adapters.ts')
-    expect(file).toHaveClass('h-[34px]', 'text-[14px]')
+    expect(file).toHaveClass('h-7', 'text-[13px]')
     expect(file.querySelector('[data-file-type="ts"]')).not.toBeNull()
     expect(file.querySelector('[data-workspace-tree-guide]')).toHaveAttribute('aria-hidden', 'true')
     expect(screen.getByTestId('workspace-tree-row-README.md').querySelector('[data-file-type="markdown"]')).not.toBeNull()
@@ -450,9 +450,9 @@ describe('keyboard', () => {
 })
 
 describe('filter field', () => {
-  it('matches the reference 32px filter height and 14px type using the existing medium field', async () => {
+  it('uses the compact 28px filter field with 12px type', async () => {
     await renderPane()
-    expect(screen.getByRole('searchbox')).toHaveClass('h-8', 'text-sm')
+    expect(screen.getByRole('searchbox')).toHaveClass('h-7', 'text-xs')
   })
 
   it('offers the clear button the hand-rolled input never had', async () => {
diff --git a/desktop/src/components/workbench/WorkspaceFileTreePane.tsx b/desktop/src/components/workbench/WorkspaceFileTreePane.tsx
index 4d7198bd..17e1a73a 100644
--- a/desktop/src/components/workbench/WorkspaceFileTreePane.tsx
+++ b/desktop/src/components/workbench/WorkspaceFileTreePane.tsx
@@ -269,7 +269,7 @@ export function WorkspaceFileTreePane({
       data-testid="workspace-file-tree"
       className="flex h-full min-h-0 w-full flex-col border-l border-[var(--color-border)] bg-[var(--color-surface)]"
     >
-      <div className="shrink-0 px-2 pb-1 pt-2">
+      <div className="shrink-0 px-2 pb-2 pt-2.5">
         <SearchField
           ref={inputRef}
           data-workspace-autofocus={autoFocus && treeView.open ? '' : undefined}
@@ -281,7 +281,7 @@ export function WorkspaceFileTreePane({
           }}
           value={filter}
           onChange={setFilter}
-          size="md"
+          size="sm"
           label={t('workspace.files.filter')}
           placeholder={t('workspace.files.filter')}
           clearLabel={t('workspace.clearFilter')}
@@ -289,9 +289,9 @@ export function WorkspaceFileTreePane({
         />
       </div>
 
-      {searchError ? <p role="alert" className="px-2 text-xs text-[var(--color-error)]">{searchError}</p> : null}
-      {searching ? <p role="status" className="px-2 text-xs text-[var(--color-text-tertiary)]">{t('workspace.searching')}</p> : null}
-      {search?.truncated ? <p role="status" className="px-2 text-xs text-[var(--color-text-tertiary)]">{t('workspace.searchResultsTruncated', { count: search.entries.length })}</p> : null}
+      {searchError ? <p role="alert" className="px-3 pb-1 text-xs text-[var(--color-error)]">{searchError}</p> : null}
+      {searching ? <p role="status" className="px-3 pb-1 text-xs text-[var(--color-text-tertiary)]">{t('workspace.searching')}</p> : null}
+      {search?.truncated ? <p role="status" className="px-3 pb-1 text-xs text-[var(--color-text-tertiary)]">{t('workspace.searchResultsTruncated', { count: search.entries.length })}</p> : null}
       {treeFailures.length > 0 ? (
         <div className="max-h-[40%] shrink-0 overflow-y-auto px-2 py-1">
           {treeFailures.map((failure) => {
@@ -308,7 +308,7 @@ export function WorkspaceFileTreePane({
           })}
         </div>
       ) : null}
-      <div ref={scrollRef} onScroll={(event) => setTreeView(sessionId, { scrollTop: event.currentTarget.scrollTop })} className="min-h-0 flex-1 overflow-auto px-1 pb-2" role="tree" aria-label={t('workspace.files.tree')}>
+      <div ref={scrollRef} onScroll={(event) => setTreeView(sessionId, { scrollTop: event.currentTarget.scrollTop })} className="min-h-0 flex-1 overflow-auto px-2 pb-2" role="tree" aria-label={t('workspace.files.tree')}>
         {rootLoading && rows.length === 0 ? (
           <div className="flex items-center justify-center py-6">
             <Spinner size={16} label={t('common.loading')} />
@@ -355,9 +355,9 @@ export function WorkspaceFileTreePane({
                 }}
                 style={{ paddingLeft: 6 + row.depth * 16 }}
                 className={[
-                  'relative flex h-[34px] cursor-default items-center gap-1.5 rounded-[var(--radius-sm)] pr-2 text-[14px] outline-none transition-colors focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-border-focus)]',
+                  'relative flex h-7 cursor-default items-center gap-1.5 rounded-[var(--radius-sm)] pr-2 text-[13px] outline-none transition-colors focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-border-focus)]',
                   isSelected
-                    ? 'bg-[var(--color-surface-selected)] text-[var(--color-text-primary)]'
+                    ? 'bg-[var(--color-surface-selected)] font-medium text-[var(--color-text-primary)]'
                     : 'text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-hover)]',
                 ].join(' ')}
               >
@@ -367,8 +367,8 @@ export function WorkspaceFileTreePane({
                 <span className="flex h-3.5 w-3.5 shrink-0 items-center justify-center text-[var(--color-text-tertiary)]">
                   {row.isDirectory
                     ? row.expanded
-                      ? <ChevronDown size={14} strokeWidth={1.9} aria-hidden="true" />
-                      : <ChevronRight size={14} strokeWidth={1.9} aria-hidden="true" />
+                      ? <ChevronDown size={14} strokeWidth={1.75} aria-hidden="true" />
+                      : <ChevronRight size={14} strokeWidth={1.75} aria-hidden="true" />
                     : <WorkspaceFileIcon path={row.path} />}
                 </span>
                 <span className="min-w-0 flex-1 truncate" title={row.path}>
diff --git a/desktop/src/components/workbench/WorkspaceLauncher.tsx b/desktop/src/components/workbench/WorkspaceLauncher.tsx
index d4ccbc6e..c6cd2954 100644
--- a/desktop/src/components/workbench/WorkspaceLauncher.tsx
+++ b/desktop/src/components/workbench/WorkspaceLauncher.tsx
@@ -60,7 +60,7 @@ export function WorkspaceLauncher({
       data-testid={menu ? 'workspace-add-menu-items' : 'workspace-launcher'}
       className={menu ? '' : `flex min-h-0 flex-1 items-start justify-center overflow-y-auto ${compact ? 'px-4 py-2' : 'px-6 py-10'}`}
     >
-      <ul className={menu ? 'space-y-0.5' : 'my-auto w-full max-w-[640px] space-y-0.5'} role={menu ? 'presentation' : undefined} aria-label={menu ? undefined : t('workspace.launcher.label')}>
+      <ul className={menu ? 'space-y-px' : 'my-auto w-full max-w-[420px] space-y-px'} role={menu ? 'presentation' : undefined} aria-label={menu ? undefined : t('workspace.launcher.label')}>
         {ENTRIES.filter(entry => dock !== 'bottom' || entry.kind !== 'side-chat').map(({ kind, labelKey, shortcut, Icon }) => {
           const disabledReason = kind === 'review' ? reviewUnavailableReason ?? null : null
           // The hint advertises the app command; a pointer choice uses this dock.
@@ -75,23 +75,23 @@ export function WorkspaceLauncher({
                 disabled={disabledReason !== null}
                 title={disabledReason ?? undefined}
                 onClick={() => onSelect(kind)}
-                className={`group flex w-full items-center rounded-[var(--radius-md)] text-left transition-colors hover:bg-[var(--color-surface-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent ${menu ? 'min-h-9 gap-2.5 px-2 py-1.5' : compact ? 'min-h-9 gap-3 px-3 py-2' : 'min-h-[52px] gap-3 px-3 py-3'}`}
+                className={`group flex w-full items-center gap-2.5 rounded-[var(--radius-sm)] px-2 text-left text-[13px] transition-colors hover:bg-[var(--color-surface-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-border-focus)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent ${menu || compact ? 'h-8' : 'h-9'}`}
               >
                 <Icon
-                  size={18}
-                  strokeWidth={1.9}
+                  size={16}
+                  strokeWidth={1.75}
                   aria-hidden="true"
-                  className="shrink-0 text-[var(--color-text-tertiary)]"
+                  className="shrink-0 text-[var(--color-text-tertiary)] group-hover:text-[var(--color-text-secondary)]"
                 />
-                <span className="min-w-0 flex-1 truncate text-[14px] text-[var(--color-text-primary)]">
+                <span className="min-w-0 flex-1 truncate text-[var(--color-text-primary)]">
                   {t(labelKey)}
                 </span>
                 {disabledReason ? (
-                  <span className="max-w-[60%] shrink-0 truncate text-[11px] text-[var(--color-text-tertiary)]">
+                  <span className="max-w-[60%] shrink-0 truncate text-[12px] text-[var(--color-text-tertiary)]">
                     {disabledReason}
                   </span>
                 ) : hint ? (
-                  <kbd className={`shrink-0 text-[var(--color-text-tertiary)] ${menu ? 'text-[12px]' : 'rounded-[var(--radius-sm)] bg-[var(--color-surface-container)] px-1.5 py-0.5 font-mono text-[11px]'}`}>
+                  <kbd className="inline-flex h-[18px] shrink-0 items-center rounded-[var(--radius-xs)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] px-1 font-mono text-[11px] leading-none text-[var(--color-text-tertiary)]">
                     {hint}
                   </kbd>
                 ) : null}
diff --git a/desktop/src/components/workbench/WorkspaceReviewTab.test.tsx b/desktop/src/components/workbench/WorkspaceReviewTab.test.tsx
index 3e8c0754..4696c48e 100644
--- a/desktop/src/components/workbench/WorkspaceReviewTab.test.tsx
+++ b/desktop/src/components/workbench/WorkspaceReviewTab.test.tsx
@@ -907,13 +907,56 @@ it('routes a review comment to its task with comparison, line and side identity'
 it('switches between unified and split diff without rereading or changing the snapshot', async () => {
   reviewApi.getStatus.mockResolvedValue(status({ files: [file(MODIFIED)] }))
   await renderReview()
-  fireEvent.click(screen.getByRole('button', { name: 'Split diff' }))
+  fireEvent.click(screen.getByRole('radio', { name: 'Split diff' }))
   expect(screen.getByTestId(`diff-surface-${MODIFIED}`)).toHaveAttribute('data-mode', 'split')
-  fireEvent.click(screen.getByRole('button', { name: 'Unified diff' }))
+  fireEvent.click(screen.getByRole('radio', { name: 'Unified diff' }))
   expect(screen.getByTestId(`diff-surface-${MODIFIED}`)).toHaveAttribute('data-mode', 'unified')
+  expect(screen.getByRole('radio', { name: 'Unified diff' })).toHaveAttribute('aria-checked', 'true')
+  expect(screen.getByRole('radiogroup', { name: 'Diff layout' })).toBeInTheDocument()
   expect(reviewApi.getStatus).toHaveBeenCalledTimes(1)
 })
 
+describe('change summary marks', () => {
+  it('counts the changed files next to the totals', async () => {
+    await renderReview()
+    expect(await screen.findByTestId('workspace-review-file-count')).toHaveTextContent('3 files')
+  })
+
+  it('letters each changed file by what Git did to it', async () => {
+    reviewApi.getStatus.mockResolvedValue(status({
+      files: [
+        file(MODIFIED),
+        file(STAGED_FILE, { staged: true, unstaged: false }),
+        file(UNTRACKED, { status: 'untracked' }),
+        file('src/added.ts', { status: 'added', staged: true, unstaged: false }),
+        file('src/gone.ts', { status: 'deleted' }),
+      ],
+    }))
+    await renderReview()
+
+    const letter = (path: string) => screen.getByTestId(`workspace-review-status-${path}`)
+    expect(await screen.findByTestId(`workspace-review-status-${MODIFIED}`)).toHaveTextContent('M')
+    expect(letter(STAGED_FILE)).toHaveTextContent('S')
+    expect(letter(UNTRACKED)).toHaveTextContent('U')
+    expect(letter('src/added.ts')).toHaveTextContent('A')
+    expect(letter('src/gone.ts')).toHaveTextContent('D')
+    // Additions read green and edits amber, whatever the theme.
+    expect(letter('src/added.ts').className).toContain('text-[var(--color-success)]')
+    expect(letter(MODIFIED).className).toContain('text-[var(--color-warning)]')
+    expect(letter('src/gone.ts').className).toContain('text-[var(--color-error)]')
+  })
+
+  it('badges an untracked file and a newly added one on their cards', async () => {
+    reviewApi.getStatus.mockResolvedValue(status({
+      files: [file(UNTRACKED, { status: 'untracked' }), file('src/added.ts', { status: 'added', staged: true, unstaged: false })],
+    }))
+    await renderReview()
+
+    expect(within(await screen.findByTestId(`workspace-review-section-${UNTRACKED}`)).getByText('Untracked')).toBeInTheDocument()
+    expect(within(screen.getByTestId('workspace-review-section-src/added.ts')).getByText('New file')).toBeInTheDocument()
+  })
+})
+
 describe('review content parity', () => {
   it('reopens a viewed file when a newer snapshot invalidates its viewed mark', async () => {
     reviewApi.getStatus.mockResolvedValue(status({ files: [file(MODIFIED)] }))
diff --git a/desktop/src/components/workbench/WorkspaceReviewTab.tsx b/desktop/src/components/workbench/WorkspaceReviewTab.tsx
index 7e0eee58..323fd9fb 100644
--- a/desktop/src/components/workbench/WorkspaceReviewTab.tsx
+++ b/desktop/src/components/workbench/WorkspaceReviewTab.tsx
@@ -4,20 +4,26 @@ import {
   ChevronRight,
   Circle,
   Check,
+  CircleAlert,
+  CircleCheck,
   Copy,
   Eye,
   ExternalLink,
   FolderClosed,
   FolderOpen,
+  FolderX,
   Columns2,
+  History,
   List,
+  ListFilter,
   Plus,
   RefreshCw,
   Undo2,
   WrapText,
 } from 'lucide-react'
-import { Button } from '@/components/ui/Button'
+import { Badge } from '@/components/ui/Badge'
 import { IconButton } from '@/components/ui/IconButton'
+import { SegmentedControl } from '@/components/ui/SegmentedControl'
 import { CopyButton } from '@/components/ui/CopyButton'
 import { ConfirmDialog } from '@/components/ui/ConfirmDialog'
 import { ActionDialog } from '@/components/ui/ActionDialog'
@@ -33,7 +39,6 @@ import type { WorkspaceDiffMode } from '@/components/workspace/workspaceDiffLayo
 import { WorkspaceDiffSurface } from '../workspace/WorkspaceDiffSurface'
 import { PanelMessage } from '../workspace/surfaces/PanelMessage'
 import { WorkspaceTreeSidebar } from '@/components/workbench/WorkspaceTreeSidebar'
-import { WorkspaceFileIcon } from '@/components/workbench/WorkspaceFileIcon'
 import { parseWorkspaceDiff } from '@/components/workspace/workspaceDiffModel'
 import { splitReviewHunks } from '@/lib/workspace/reviewHunks'
 import { workspaceOpen } from '@/lib/workspace/openTarget'
@@ -49,6 +54,11 @@ import {
 } from '../../lib/workspace/types'
 import type { ReviewFile } from '../../api/review'
 
+const REVIEW_MENU_ITEM = 'flex h-8 w-full items-center gap-2 rounded-[var(--radius-sm)] px-2 text-left text-[13px] text-[var(--color-text-primary)] outline-none transition-colors hover:bg-[var(--color-surface-hover)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-border-focus)]'
+
+/** A labelled action inside the floating bulk-action pill. */
+const REVIEW_PILL_BUTTON = 'inline-flex h-7 shrink-0 items-center gap-1.5 rounded-full px-3 text-[12px] text-[var(--color-text-secondary)] transition-colors hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent'
+
 const SOURCE_OPTIONS: readonly WorkspaceReviewSource[] = [
   { kind: 'unstaged' },
   { kind: 'staged' },
@@ -136,6 +146,25 @@ function buildChangeRows(files: readonly ReviewFile[], collapsed: ReadonlySet<st
   return rows
 }
 
+/**
+ * The one-letter Git status shown in the change tree, coloured by what it
+ * means for the reader: green adds, amber edits, red removals.
+ */
+function changeLetter(file: ReviewFile, untracked: boolean): { letter: string; tone: string } {
+  if (untracked) return { letter: 'U', tone: 'text-[var(--color-success)]' }
+  switch (file.status) {
+    case 'added':
+    case 'copied':
+      return { letter: 'A', tone: 'text-[var(--color-success)]' }
+    case 'deleted':
+      return { letter: 'D', tone: 'text-[var(--color-error)]' }
+    case 'renamed':
+      return { letter: 'R', tone: 'text-[var(--color-info)]' }
+    default:
+      return { letter: file.staged && !file.unstaged ? 'S' : 'M', tone: 'text-[var(--color-warning)]' }
+  }
+}
+
 /** Split a path so the ellipsis can eat the front and leave the filename whole. */
 function splitForStartTruncation(value: string): { head: string; tail: string } {
   const cut = value.lastIndexOf('/')
@@ -406,7 +435,7 @@ export function WorkspaceReviewTab({
     <div className="relative flex min-h-0 min-w-0 flex-1 flex-col">
       <div
         data-testid="workspace-review-toolbar"
-        className="flex h-10 shrink-0 items-center gap-2 border-b border-[var(--color-border)] px-2"
+        className="flex h-10 shrink-0 items-center gap-2 border-b border-[var(--color-border)] pl-3 pr-2"
       >
         <span className="relative shrink-0">
           <button
@@ -422,13 +451,13 @@ export function WorkspaceReviewTab({
             aria-haspopup="menu"
             aria-expanded={sourceMenuOpen}
             onClick={() => setSourceMenuOpen((open) => !open)}
-            className="flex h-7 items-center gap-1 rounded-[var(--radius-sm)] px-1.5 text-[12px] font-medium text-[var(--color-text-primary)] transition-colors hover:bg-[var(--color-surface-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]"
+            className="flex h-7 items-center gap-1.5 rounded-[var(--radius-sm)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] pl-2.5 pr-2 text-[12px] text-[var(--color-text-primary)] transition-colors hover:border-[var(--color-outline)] hover:bg-[var(--color-surface-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]"
           >
             <span id={`${fieldIds}-source-label`} className="sr-only">
               {t('workspace.review.sourceLabel')}
             </span>
             <span id={`${fieldIds}-source-value`}>{sourceLabel(source)}</span>
-            <ChevronDown size={11} aria-hidden="true" />
+            <ChevronDown size={12} strokeWidth={2} aria-hidden="true" className="text-[var(--color-text-tertiary)]" />
           </button>
           {sourceMenuOpen ? (
             <div
@@ -436,31 +465,36 @@ export function WorkspaceReviewTab({
               role="menu"
               aria-label={t('workspace.review.sourceLabel')}
               onKeyDown={handleSourceMenuKeyDown}
-              className="absolute left-0 top-8 z-[var(--z-dropdown)] min-w-[200px] overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] py-1 shadow-[var(--shadow-dropdown)]"
+              className="absolute left-0 top-8 z-[var(--z-dropdown)] min-w-[200px] overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] p-1 shadow-[var(--shadow-dropdown)]"
             >
-              {sourceOptions.map((option) => (
-                <button
-                  key={`${option.kind}-${'baseRef' in option ? option.baseRef : ''}`}
-                  type="button"
-                  role="menuitem"
-                  onClick={() => {
-                    setSourceMenuOpen(false)
-                    useWorkspaceStore.getState().setReviewSource(sessionId, tab.id, option)
-                  }}
-                  className="w-full px-3.5 py-1.5 text-left text-[12px] text-[var(--color-text-primary)] outline-none transition-colors hover:bg-[var(--color-surface-hover)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-border-focus)]"
-                >
-                  {sourceLabel(option)}
-                </button>
-              ))}
+              {sourceOptions.map((option) => {
+                const current = reviewSourceKey(option) === reviewSourceKey(source)
+                return (
+                  <button
+                    key={`${option.kind}-${'baseRef' in option ? option.baseRef : ''}`}
+                    type="button"
+                    role="menuitem"
+                    onClick={() => {
+                      setSourceMenuOpen(false)
+                      useWorkspaceStore.getState().setReviewSource(sessionId, tab.id, option)
+                    }}
+                    className={`${REVIEW_MENU_ITEM} ${current ? 'bg-[var(--color-surface-hover)]' : ''}`}
+                  >
+                    <span className="min-w-0 flex-1 truncate">{sourceLabel(option)}</span>
+                    {current ? <Check size={14} strokeWidth={2} aria-hidden="true" className="shrink-0 text-[var(--color-brand)]" /> : null}
+                  </button>
+                )
+              })}
+              <div role="separator" className="-mx-1 my-1 border-t border-[var(--color-border)]" />
               {(['branch', 'commit'] as const).map(kind => (
                 <button
                   key={kind}
                   type="button"
                   role="menuitem"
                   onClick={() => editRef(kind)}
-                  className="w-full px-3.5 py-1.5 text-left text-[12px] text-[var(--color-text-primary)] outline-none transition-colors hover:bg-[var(--color-surface-hover)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-border-focus)]"
+                  className={REVIEW_MENU_ITEM}
                 >
-                  {t(kind === 'branch' ? 'workspace.review.compareBranch' : 'workspace.review.viewCommit')}
+                  <span className="min-w-0 flex-1 truncate">{t(kind === 'branch' ? 'workspace.review.compareBranch' : 'workspace.review.viewCommit')}</span>
                 </button>
               ))}
             </div>
@@ -498,10 +532,15 @@ export function WorkspaceReviewTab({
         />
 
         {totals ? (
-          <span className="shrink-0 font-mono text-[12px] tabular-nums">
-            <span className="text-[var(--color-success)]">+{totals.additions}</span>
-            {' '}
-            <span className="text-[var(--color-error)]">-{totals.deletions}</span>
+          <span className="flex shrink-0 items-center gap-2 text-[12px]">
+            <span className="font-mono tabular-nums">
+              <span className="text-[var(--color-diff-added-text)]">+{totals.additions}</span>
+              {' '}
+              <span className="text-[var(--color-diff-removed-text)]">-{totals.deletions}</span>
+            </span>
+            <span data-testid="workspace-review-file-count" className="text-[var(--color-text-tertiary)]">
+              {t('workspace.review.fileCount', { count: totals.files })}
+            </span>
           </span>
         ) : null}
         {entry.status?.source.resolvedBase ? (
@@ -512,13 +551,21 @@ export function WorkspaceReviewTab({
           </span>
         ) : null}
 
-        <span className="ml-auto flex shrink-0 items-center gap-0.5">
-          <IconButton icon={<List size={14} strokeWidth={1.9} />} label={t('workspace.review.unified')} pressed={diffMode === 'unified'} size="sm" tone="muted" onClick={() => setDiffMode('unified')} />
-          <IconButton icon={<Columns2 size={14} strokeWidth={1.9} />} label={t('workspace.review.split')} pressed={diffMode === 'split'} size="sm" tone="muted" onClick={() => setDiffMode('split')} />
-          <IconButton icon={<WrapText size={14} strokeWidth={1.9} />} label={t(wrapLines ? 'workspace.review.disableWrap' : 'workspace.review.enableWrap')} pressed={wrapLines} size="sm" tone="muted" onClick={() => setWrapLines(wrap => !wrap)} />
-          <IconButton icon={treeOpen ? <FolderOpen size={14} strokeWidth={1.9} /> : <FolderClosed size={14} strokeWidth={1.9} />} label={t('workspace.files.toggleTree')} size="sm" tone="muted" pressed={treeOpen} onClick={() => setTreeOpen(open => !open)} />
+        <span className="ml-auto flex shrink-0 items-center gap-1">
+          <SegmentedControl<WorkspaceDiffMode>
+            size="sm"
+            label={t('workspace.review.diffLayout')}
+            value={diffMode}
+            onChange={setDiffMode}
+            items={[
+              { value: 'unified', title: t('workspace.review.unified'), icon: <List size={14} strokeWidth={1.75} aria-hidden="true" />, label: <span className="sr-only">{t('workspace.review.unified')}</span> },
+              { value: 'split', title: t('workspace.review.split'), icon: <Columns2 size={14} strokeWidth={1.75} aria-hidden="true" />, label: <span className="sr-only">{t('workspace.review.split')}</span> },
+            ]}
+          />
+          <IconButton icon={<WrapText size={14} strokeWidth={1.75} />} label={t(wrapLines ? 'workspace.review.disableWrap' : 'workspace.review.enableWrap')} pressed={wrapLines} size="sm" tone="muted" onClick={() => setWrapLines(wrap => !wrap)} />
+          <IconButton icon={treeOpen ? <FolderOpen size={14} strokeWidth={1.75} /> : <FolderClosed size={14} strokeWidth={1.75} />} label={t('workspace.files.toggleTree')} size="sm" tone="muted" pressed={treeOpen} onClick={() => setTreeOpen(open => !open)} />
           <IconButton
-            icon={<RefreshCw size={14} strokeWidth={1.9} />}
+            icon={<RefreshCw size={14} strokeWidth={1.75} />}
             label={t('workspace.review.refresh')}
             size="sm"
             tone="muted"
@@ -534,7 +581,7 @@ export function WorkspaceReviewTab({
             <p
               role="alert"
               data-testid="workspace-review-stale"
-              className="shrink-0 border-b border-[var(--color-border)] bg-[var(--color-warning-container)] px-3 py-1.5 text-[11px] text-[var(--color-on-warning-container)]"
+              className="shrink-0 border-b border-[var(--color-border)] bg-[var(--color-warning-container)] px-3 py-1.5 text-[12px] text-[var(--color-on-warning-container)]"
             >
               {t('workspace.review.stale')}
             </p>
@@ -542,7 +589,7 @@ export function WorkspaceReviewTab({
           {operationError ? (
             <p
               role="alert"
-              className="shrink-0 border-b border-[var(--color-border)] bg-[var(--color-error-container)] px-3 py-1.5 text-[11px] text-[var(--color-on-error-container)]"
+              className="shrink-0 border-b border-[var(--color-border)] bg-[var(--color-error-container)] px-3 py-1.5 text-[12px] text-[var(--color-on-error-container)]"
             >
               {operationError}
             </p>
@@ -550,7 +597,7 @@ export function WorkspaceReviewTab({
           {entry.lastDeletedPaths.length > 0 ? (
             <p
               role="status"
-              className="shrink-0 border-b border-[var(--color-border)] bg-[var(--color-warning-container)] px-3 py-1.5 text-[11px] text-[var(--color-on-warning-container)]"
+              className="shrink-0 border-b border-[var(--color-border)] bg-[var(--color-warning-container)] px-3 py-1.5 text-[12px] text-[var(--color-on-warning-container)]"
             >
               {t('workspace.review.revertDeleted', {
                 count: entry.lastDeletedPaths.length,
@@ -559,26 +606,28 @@ export function WorkspaceReviewTab({
             </p>
           ) : null}
           {entry.lastBackupDir ? (
-            <p className="shrink-0 border-b border-[var(--color-border)] px-3 py-1.5 text-[11px] text-[var(--color-text-tertiary)]">
+            <p className="shrink-0 border-b border-[var(--color-border)] px-3 py-1.5 text-[12px] text-[var(--color-text-tertiary)]">
               {t('workspace.review.backupSaved', { path: entry.lastBackupDir })}
             </p>
           ) : null}
 
-          <div className="min-h-0 flex-1 overflow-y-auto pb-20">
+          {/* The cards scroll vertically here; each card's diff scrolls sideways
+              on its own so a long line never pushes the card frames apart. */}
+          <div className="flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto overflow-x-hidden p-3 pb-20">
             {entry.loading && !entry.status ? (
               <div className="flex items-center justify-center py-8">
                 <Spinner size={18} label={t('common.loading')} />
               </div>
             ) : entry.status?.state === 'not_git_repo' ? (
-              <PanelMessage icon="folder_off" message={t('workspace.review.notGitRepo')} />
+              <PanelMessage icon={FolderX} message={t('workspace.review.notGitRepo')} />
             ) : entry.status?.state === 'missing_workdir' ? (
-              <PanelMessage icon="folder_off" tone="error" message={t('workspace.review.missingWorkdir')} />
+              <PanelMessage icon={FolderX} tone="error" message={t('workspace.review.missingWorkdir')} />
             ) : entry.status?.state === 'no_head' ? (
-              <PanelMessage icon="history" message={t('workspace.review.noHead')} />
+              <PanelMessage icon={History} message={t('workspace.review.noHead')} />
             ) : entry.error ? (
-              <PanelMessage icon="error" tone="error" message={source.kind === 'turn' ? t('workspace.review.historyUnavailable') : entry.error} />
+              <PanelMessage icon={CircleAlert} tone="error" message={source.kind === 'turn' ? t('workspace.review.historyUnavailable') : entry.error} />
             ) : visibleFiles.length === 0 ? (
-              <PanelMessage icon="check_circle" message={t('workspace.review.empty')} />
+              <PanelMessage icon={CircleCheck} message={t('workspace.review.empty')} />
             ) : (
               visibleFiles.map((file) => (
                 <ReviewFileSection
@@ -634,42 +683,47 @@ export function WorkspaceReviewTab({
           {writable && files.length > 0 ? (
             <div
               data-testid="workspace-review-bulk-bar"
-              className="absolute bottom-5 left-1/2 z-[var(--z-sticky)] flex max-w-[calc(100%-16px)] -translate-x-1/2 items-center gap-1 rounded-full border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] p-1 shadow-[var(--shadow-card)]"
+              className="absolute bottom-4 left-1/2 z-[var(--z-sticky)] flex max-w-[calc(100%-16px)] -translate-x-1/2 items-center rounded-full border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] p-[3px] shadow-[var(--shadow-dropdown)]"
             >
-              {source.kind !== 'staged' ? <Button
-                variant="ghost"
-                size="base"
-                icon={<Undo2 size={13} strokeWidth={1.9} />}
-                data-testid="workspace-review-revert-all"
-                disabled={entry.stale || entry.loading}
-                onClick={() => setPendingRevert(
-                  // Untracked files are deliberately excluded: a bulk discard
-                  // must not delete files Git has never seen.
-                  files.filter((file) => !untracked.has(file.path)).map((file) => file.path),
-                )}
-              >
-                {t('workspace.review.revertAll')}
-              </Button> : null}
-              <Button
-                variant="ghost"
-                size="base"
-                icon={<Plus size={13} strokeWidth={1.9} />}
+              {source.kind !== 'staged' ? <>
+                <button
+                  type="button"
+                  data-testid="workspace-review-revert-all"
+                  disabled={entry.stale || entry.loading}
+                  onClick={() => setPendingRevert(
+                    // Untracked files are deliberately excluded: a bulk discard
+                    // must not delete files Git has never seen.
+                    files.filter((file) => !untracked.has(file.path)).map((file) => file.path),
+                  )}
+                  className={REVIEW_PILL_BUTTON}
+                >
+                  <Undo2 size={14} strokeWidth={1.75} aria-hidden="true" />
+                  {t('workspace.review.revertAll')}
+                </button>
+                <span aria-hidden="true" className="h-3.5 w-px shrink-0 bg-[var(--color-border)]" />
+              </> : null}
+              <button
+                type="button"
                 data-testid={source.kind === 'staged' ? 'workspace-review-unstage-all' : 'workspace-review-stage-all'}
                 disabled={entry.stale || entry.loading}
                 onClick={() => { void runWrite(source.kind === 'staged' ? 'unstage' : 'stage', files.map((file) => file.path)) }}
+                className={REVIEW_PILL_BUTTON}
               >
+                <Plus size={14} strokeWidth={1.75} aria-hidden="true" />
                 {t(source.kind === 'staged' ? 'workspace.review.unstageAll' : 'workspace.review.stageAll')}
-              </Button>
+              </button>
             </div>
           ) : null}
         </div>
 
         <WorkspaceTreeSidebar open={treeOpen} onOpenChange={setTreeOpen}>
-          <div className="shrink-0 px-2 py-2">
+          <div className="flex min-h-0 flex-1 flex-col border-l border-[var(--color-border)]">
+          <div className="shrink-0 px-2 pb-2 pt-2.5">
             <SearchField
               value={filter}
               onChange={setFilter}
               size="sm"
+              icon={<ListFilter size={14} strokeWidth={1.75} aria-hidden="true" />}
               label={t('workspace.review.filterFiles')}
               placeholder={t('workspace.review.filterFiles')}
               clearLabel={t('workspace.clearFilter')}
@@ -677,7 +731,7 @@ export function WorkspaceReviewTab({
             />
           </div>
           <div
-            className="min-h-0 flex-1 overflow-auto px-1 pb-2"
+            className="min-h-0 flex-1 overflow-auto px-2 pb-2"
             role="tree"
             aria-label={t('workspace.review.changeTree')}
           >
@@ -706,36 +760,44 @@ export function WorkspaceReviewTab({
                     else selectFile(row.path)
                   }}
                   onKeyDown={(event) => handleTreeKeyDown(event, row)}
-                  style={{ paddingLeft: 6 + row.depth * 16 }}
+                  style={{ paddingLeft: 2 + row.depth * 16 }}
                   className={[
-                    'flex h-7 cursor-default items-center gap-1.5 rounded-[var(--radius-sm)] pr-1.5 text-left text-[13px] outline-none transition-colors focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-border-focus)]',
+                    'flex h-[26px] cursor-default items-center gap-1.5 rounded-[var(--radius-xs)] pr-1.5 text-left text-[12px] outline-none transition-colors focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-border-focus)]',
                     selected
-                      ? 'bg-[var(--color-surface-selected)] text-[var(--color-text-primary)]'
+                      ? 'bg-[var(--color-surface-selected)] font-medium text-[var(--color-text-primary)]'
                       : 'text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-hover)]',
                   ].join(' ')}
                 >
-                  <span className="flex h-3.5 w-3.5 shrink-0 items-center justify-center text-[var(--color-text-tertiary)]">
-                    {row.isDirectory
-                      ? row.expanded
-                        ? <ChevronDown size={14} strokeWidth={1.9} aria-hidden="true" />
-                        : <ChevronRight size={14} strokeWidth={1.9} aria-hidden="true" />
-                      : <WorkspaceFileIcon path={row.path} size={14} />}
-                  </span>
+                  {row.isDirectory ? (
+                    <>
+                      <span className="flex h-3.5 w-3.5 shrink-0 items-center justify-center text-[var(--color-text-tertiary)]">
+                        {row.expanded
+                          ? <ChevronDown size={12} strokeWidth={2} aria-hidden="true" />
+                          : <ChevronRight size={12} strokeWidth={2} aria-hidden="true" />}
+                      </span>
+                      {row.expanded
+                        ? <FolderOpen size={14} strokeWidth={1.75} aria-hidden="true" className="shrink-0 text-[var(--color-text-tertiary)]" />
+                        : <FolderClosed size={14} strokeWidth={1.75} aria-hidden="true" className="shrink-0 text-[var(--color-text-tertiary)]" />}
+                    </>
+                  ) : row.file ? (() => {
+                    const { letter, tone } = changeLetter(row.file, untracked.has(row.file.path))
+                    return (
+                      <span data-testid={`workspace-review-status-${row.path}`} className={`flex w-3.5 shrink-0 justify-center font-mono text-[11px] font-medium ${tone}`}>
+                        {letter}
+                      </span>
+                    )
+                  })() : null}
                   <span className="min-w-0 flex-1 truncate" title={row.path}>
                     {row.name}
                   </span>
                   {row.file?.conflicted ? (
                     <Circle size={8} aria-hidden="true" className="shrink-0 fill-[var(--color-error)] text-[var(--color-error)]" />
                   ) : null}
-                  {row.file ? (
-                    <span className="shrink-0 font-mono text-[10px] text-[var(--color-text-tertiary)]">
-                      {untracked.has(row.file.path) ? 'U' : row.file.staged ? 'S' : 'M'}
-                    </span>
-                  ) : null}
                 </div>
               )
             })}
           </div>
+          </div>
         </WorkspaceTreeSidebar>
       </div>
 
@@ -863,13 +925,23 @@ function ReviewFileSection({
         registerSection(node)
       }}
       data-testid={`workspace-review-section-${file.path}`}
-      className="border-b border-[var(--color-border)]"
+      // `overflow-clip`, not `overflow-hidden`: the rounded frame must clip its
+      // corners without becoming the scroll box its sticky header pins against.
+      className="shrink-0 overflow-clip rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)]"
     >
-      <header className="sticky top-0 z-[var(--z-sticky)] flex h-8 items-center gap-2 bg-[var(--color-surface)] px-2">
-        <WorkspaceFileIcon path={file.path} size={14} />
+      <header className={`sticky top-0 z-[var(--z-sticky)] flex h-9 items-center gap-2 bg-[var(--color-surface-container)] pl-1.5 pr-1.5 ${open ? 'border-b border-[var(--color-border)]' : ''}`}>
+        <IconButton
+          icon={open ? <ChevronDown size={14} strokeWidth={1.75} /> : <ChevronRight size={14} strokeWidth={1.75} />}
+          label={t(open ? 'workspace.review.collapseFile' : 'workspace.review.expandFile')}
+          aria-expanded={open}
+          aria-controls={contentId}
+          size="xs"
+          tone="muted"
+          onClick={onToggleOpen}
+        />
         <span
           data-testid={`workspace-review-path-${file.path}`}
-          className="flex min-w-0 flex-1 items-center text-[12px] text-[var(--color-text-primary)]"
+          className="flex min-w-0 flex-1 items-center font-mono text-[12px] text-[var(--color-text-primary)]"
           title={display}
         >
           {head ? (
@@ -894,94 +966,88 @@ function ReviewFileSection({
               <span dir="ltr">{head}</span>
             </span>
           ) : null}
-          <span data-testid={`workspace-review-path-tail-${file.path}`} className="shrink-0">
+          <span data-testid={`workspace-review-path-tail-${file.path}`} className="shrink-0 font-medium">
             {head ? `/${tail}` : tail}
           </span>
         </span>
+        {untracked ? (
+          <Badge tone="success" size="sm" className="shrink-0">{t('workspace.review.untracked')}</Badge>
+        ) : file.status === 'added' ? (
+          <Badge tone="success" size="sm" className="shrink-0">{t('workspace.review.newFile')}</Badge>
+        ) : null}
         {file.statsTruncated ? (
-          <span className="shrink-0 text-[10px] text-[var(--color-text-tertiary)]">
+          <span className="shrink-0 text-[11px] text-[var(--color-text-tertiary)]">
             {t('workspace.review.statsTruncated')}
           </span>
         ) : (
-          <span className="shrink-0 font-mono text-[10px] tabular-nums">
-            <span className="text-[var(--color-success)]">+{file.additions}</span>
+          <span className="shrink-0 font-mono text-[12px] tabular-nums">
+            <span className="text-[var(--color-diff-added-text)]">+{file.additions}</span>
             {' '}
-            <span className="text-[var(--color-error)]">-{file.deletions}</span>
+            <span className="text-[var(--color-diff-removed-text)]">-{file.deletions}</span>
           </span>
         )}
-        {untracked ? (
-          <span className="shrink-0 text-[10px] text-[var(--color-text-tertiary)]">
-            {t('workspace.review.untracked')}
-          </span>
-        ) : null}
-        <CopyButton
-          text={file.path}
-          label={t('openWith.copyPath')}
-          copiedLabel={t('common.copied')}
-          displayLabel={<Copy size={12} aria-hidden="true" />}
-          displayCopiedLabel={<Check size={12} aria-hidden="true" />}
-          className="inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-[var(--radius-sm)] text-[var(--color-text-tertiary)] hover:bg-[var(--color-surface-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]"
-        />
-        <IconButton
-          icon={open ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
-          label={t(open ? 'workspace.review.collapseFile' : 'workspace.review.expandFile')}
-          aria-expanded={open}
-          aria-controls={contentId}
-          size="2xs"
-          tone="muted"
-          onClick={onToggleOpen}
-        />
-        <IconButton
-          icon={<ExternalLink size={12} strokeWidth={1.9} />}
-          label={t('workspace.review.openFile')}
-          size="2xs"
-          tone="muted"
-          disabled={file.status === 'deleted'}
-          onClick={() => onOpenFile(firstChangeLine)}
-        />
-        <IconButton
-          icon={<Eye size={12} strokeWidth={1.9} />}
-          label={t(viewed ? 'workspace.review.viewed' : 'workspace.review.markViewed')}
-          size="2xs"
-          tone="muted"
-          pressed={viewed}
-          onClick={onToggleViewed}
-        />
-        {writable ? (
-          <>
-            {source.kind !== 'staged' ? <IconButton
-              icon={<Undo2 size={12} strokeWidth={1.9} />}
-              label={t('workspace.review.revert')}
-              size="2xs"
-              tone="muted"
-              hoverTone="danger"
-              onClick={onRevert}
-            /> : null}
-            <IconButton
-              icon={<Plus size={12} strokeWidth={1.9} />}
-              label={t(unstage ? 'workspace.review.unstage' : 'workspace.review.stage')}
-              size="2xs"
-              tone="muted"
-              onClick={unstage ? onUnstage : onStage}
-            />
-          </>
-        ) : null}
+        {/* The actions never shrink: the path gives up its head first. */}
+        <span className="ml-auto flex shrink-0 items-center">
+          <CopyButton
+            text={file.path}
+            label={t('openWith.copyPath')}
+            copiedLabel={t('common.copied')}
+            displayLabel={<Copy size={14} strokeWidth={1.75} aria-hidden="true" />}
+            displayCopiedLabel={<Check size={14} strokeWidth={1.75} aria-hidden="true" />}
+            className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-[var(--radius-sm)] text-[var(--color-text-tertiary)] transition-colors hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]"
+          />
+          <IconButton
+            icon={<ExternalLink size={14} strokeWidth={1.75} />}
+            label={t('workspace.review.openFile')}
+            size="xs"
+            tone="muted"
+            disabled={file.status === 'deleted'}
+            onClick={() => onOpenFile(firstChangeLine)}
+          />
+          <IconButton
+            icon={<Eye size={14} strokeWidth={1.75} />}
+            label={t(viewed ? 'workspace.review.viewed' : 'workspace.review.markViewed')}
+            size="xs"
+            tone="muted"
+            pressed={viewed}
+            onClick={onToggleViewed}
+          />
+          {writable ? (
+            <>
+              {source.kind !== 'staged' ? <IconButton
+                icon={<Undo2 size={14} strokeWidth={1.75} />}
+                label={t('workspace.review.revert')}
+                size="xs"
+                tone="muted"
+                hoverTone="danger"
+                onClick={onRevert}
+              /> : null}
+              <IconButton
+                icon={<Plus size={14} strokeWidth={1.75} />}
+                label={t(unstage ? 'workspace.review.unstage' : 'workspace.review.stage')}
+                size="xs"
+                tone="muted"
+                onClick={unstage ? onUnstage : onStage}
+              />
+            </>
+          ) : null}
+        </span>
       </header>
 
       {open ? <div id={contentId}>{file.conflicted ? (
-        <p className="px-3 py-2 text-[11px] text-[var(--color-text-tertiary)]">
+        <p className="px-3 py-2.5 text-[12px] text-[var(--color-text-tertiary)]">
           {t('workspace.review.conflicted')}
         </p>
       ) : file.binary ? (
-        <p className="px-3 py-2 text-[11px] text-[var(--color-text-tertiary)]">
+        <p className="px-3 py-2.5 text-[12px] text-[var(--color-text-tertiary)]">
           {t('workspace.review.binary')}
         </p>
       ) : diffTruncated ? (
-        <p className="px-3 py-2 text-[11px] text-[var(--color-text-tertiary)]">
+        <p className="px-3 py-2.5 text-[12px] text-[var(--color-text-tertiary)]">
           {t('workspace.review.diffTruncated', { size: formatBytes(diffBytes ?? 0) })}
         </p>
       ) : diffUnavailable ? (
-        <p role="alert" className="px-3 py-2 text-[11px] text-[var(--color-text-tertiary)]">{t('workspace.review.historyUnavailable')}</p>
+        <p role="alert" className="px-3 py-2.5 text-[12px] text-[var(--color-text-tertiary)]">{t('workspace.review.historyUnavailable')}</p>
       ) : diffLoading ? (
         <div className="flex items-center justify-center py-4">
           <Spinner size={14} label={t('common.loading')} />
@@ -1005,7 +1071,9 @@ function ReviewFileSection({
           value={diff}
           path={file.path}
           hideSingleFileHeader
-          className="bg-[var(--color-code-bg)]"
+          // Sideways only: the gutter buttons' enlarged hit areas poke a few px
+          // below the last row and must not grow a vertical scrollbar.
+          className="overflow-x-auto overflow-y-hidden bg-[var(--color-surface)]"
         />
       ) : null}</div> : null}
     </section>
diff --git a/desktop/src/components/workbench/WorkspaceTabStrip.tsx b/desktop/src/components/workbench/WorkspaceTabStrip.tsx
index e8057e46..7105d635 100644
--- a/desktop/src/components/workbench/WorkspaceTabStrip.tsx
+++ b/desktop/src/components/workbench/WorkspaceTabStrip.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'
-import { MessageCircle, FolderClosed, Globe, MoreHorizontal, Plus, SquareTerminal, SquareSplitVertical } from 'lucide-react'
+import { MessageCircle, FolderClosed, Globe, Ellipsis, Plus, SquareTerminal, SquareSplitVertical, X } from 'lucide-react'
 import { IconButton } from '@/components/ui/IconButton'
+import { tabChipClass, tabChipLabelClass } from '@/components/ui/tabChip'
 import { useDismissable } from '@/hooks/useDismissable'
 import { useAnchoredPosition } from '@/hooks/useAnchoredPosition'
 import { getTerminalRuntime, subscribeTerminalRuntime } from '@/lib/terminalRuntime'
@@ -211,15 +212,15 @@ export function WorkspaceTabStrip({
     <div
       data-testid={`workspace-tab-strip-${dock}`}
       data-desktop-drag-region={placement === 'window' ? true : undefined}
-      className={`flex min-w-0 shrink-0 items-stretch gap-1 bg-[var(--color-surface)] pl-2 pr-1 ${placement === 'window' ? 'h-[52px] flex-1' : 'h-10 border-b border-[var(--color-border)]'}`}
+      className={`flex min-w-0 shrink-0 items-center gap-1 pl-2 pr-1 ${placement === 'window' ? 'h-[52px] flex-1' : 'h-10 border-b border-[var(--color-border)] bg-[var(--color-surface-sidebar)]'}`}
     >
-      <div className="flex min-w-0 flex-1 items-stretch gap-1">
+      <div className="flex min-w-0 flex-1 items-center gap-1">
         <div
           ref={tabListRef}
           role="tablist"
           aria-label={t('workspace.tabStrip')}
           aria-orientation="horizontal"
-          className="flex min-w-0 items-stretch gap-0.5 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+          className="flex min-w-0 items-center gap-0.5 overflow-x-auto px-0.5 py-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
           onPointerMove={handlePointerMove}
           onPointerUp={endDrag}
           onPointerLeave={endDrag}
@@ -253,12 +254,8 @@ export function WorkspaceTabStrip({
                 onPointerDown={(event) => handlePointerDown(event, tab, index)}
                 onDoubleClick={() => onPin(tab.id)}
                 onContextMenu={(event) => openMenuAt(event, tab.id)}
-                className={[
-                  `tab-bar-interactive group ${placement === 'window' ? 'my-2.5' : 'my-1'} flex min-w-[112px] max-w-[200px] cursor-default items-center gap-0.5 rounded-[var(--radius-md)] pl-2 pr-1 transition-colors`,
-                  isActive
-                    ? 'bg-[var(--color-surface-selected)] text-[var(--color-text-primary)]'
-                    : 'text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-hover)]',
-                ].join(' ')}
+                // The same chip as the session tabs above the chat (`ui/tabChip`).
+                className={`${tabChipClass(isActive)} cursor-default gap-0.5`}
               >
                 <button
                   ref={(node) => { tabButtonRefs.current.set(tab.id, node) }}
@@ -314,21 +311,22 @@ export function WorkspaceTabStrip({
                   className="flex h-7 min-w-0 flex-1 cursor-default items-center gap-1.5 rounded-[var(--radius-sm)] text-left outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-border-focus)]"
                 >
                   {tab.kind === 'file' && tab.path ? <WorkspaceFileIcon path={tab.path} /> : (
-                    <Icon size={14} strokeWidth={1.9} aria-hidden="true" className="shrink-0" />
+                    <Icon size={14} strokeWidth={1.75} aria-hidden="true" className="shrink-0" />
                   )}
                   {/*
-                    A preview tab is italic and nothing else. A dedicated badge or a
-                    dotted border would make the replaceable state louder than the
-                    file name, and the state only matters at the moment the next
-                    single click replaces it.
+                    A preview tab is quieter and nothing else: it never takes the
+                    active weight. A badge or a dotted border would make the
+                    replaceable state louder than the file name, and the state only
+                    matters at the moment the next single click replaces it.
+                    (Italics were the old signal; CJK titles have no italic face.)
                   */}
-                  <span className={`min-w-0 flex-1 truncate text-[13px] ${tab.preview ? 'italic' : ''}`}>
+                  <span className={tabChipLabelClass(isActive && !tab.preview)}>
                     {title}
                   </span>
                 </button>
                 <span className={`shrink-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100 ${isActive ? 'opacity-100' : 'opacity-0'}`}>
                   <IconButton
-                    icon="close"
+                    icon={<X size={12} strokeWidth={2} />}
                     label={t('workspace.tabClose', { title })}
                     size="2xs"
                     tone="muted"
@@ -351,7 +349,7 @@ export function WorkspaceTabStrip({
 
         <span className="tab-bar-interactive flex shrink-0 items-center">
           <IconButton
-            icon={<Plus size={15} strokeWidth={2} />}
+            icon={<Plus size={16} strokeWidth={1.75} />}
             label={t('workspace.tabAdd')}
             size="sm"
             tone="muted"
@@ -374,7 +372,7 @@ export function WorkspaceTabStrip({
       {activeTerminalTab ? (
         <span className="tab-bar-interactive flex shrink-0 items-center">
           <IconButton
-            icon={<MoreHorizontal size={16} />}
+            icon={<Ellipsis size={16} strokeWidth={1.75} />}
             label={t('workspace.tabMenu')}
             size="sm"
             tone="muted"
@@ -396,7 +394,7 @@ export function WorkspaceTabStrip({
           aria-label={t('workspace.tabMenu')}
           data-testid="workspace-tab-menu"
           onKeyDown={handleMenuKeyDown}
-          className="fixed z-[var(--z-dropdown)] min-w-[190px] overflow-y-auto rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] py-1.5 shadow-[var(--shadow-dropdown)]"
+          className="fixed z-[var(--z-dropdown)] min-w-[190px] overflow-y-auto rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] p-1 shadow-[var(--shadow-dropdown)]"
           style={menuPosition.style}
         >
           {menuRuntime ? <>
@@ -410,13 +408,13 @@ export function WorkspaceTabStrip({
               disabled={!menuRuntime.restart || menuRuntime.status === 'starting' || menuRuntime.status === 'unavailable'}
               onSelect={() => { menuRuntime.restart?.(); closeMenu() }}
             />
-            <div className="my-1 border-t border-[var(--color-border)]" />
+            <div className="-mx-1 my-1 border-t border-[var(--color-border)]" />
           </> : null}
           <WorkspaceTabMenuItem label={t('workspace.tabCloseCurrent')} onSelect={() => { onClose(menu.tabId); closeMenu() }} />
           <WorkspaceTabMenuItem label={t('workspace.tabCloseOthers')} disabled={!canCloseOthers} onSelect={() => { onCloseScope(menu.tabId, 'others'); closeMenu() }} />
           <WorkspaceTabMenuItem label={t('workspace.tabCloseRight')} disabled={!canCloseRight} onSelect={() => { onCloseScope(menu.tabId, 'right'); closeMenu() }} />
           <WorkspaceTabMenuItem label={t('workspace.tabCloseAll')} onSelect={() => { onCloseScope(menu.tabId, 'all'); closeMenu() }} />
-          <div className="my-1 border-t border-[var(--color-border)]" />
+          <div className="-mx-1 my-1 border-t border-[var(--color-border)]" />
           <WorkspaceTabMenuItem
             label={t('workspace.tabReopenClosed')}
             disabled={!canReopenClosed}
@@ -452,7 +450,7 @@ function WorkspaceTabMenuItem({
       role="menuitem"
       disabled={disabled}
       onClick={onSelect}
-      className="w-full px-3.5 py-1.5 text-left text-[12px] text-[var(--color-text-primary)] outline-none transition-colors hover:bg-[var(--color-surface-hover)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-border-focus)] disabled:cursor-not-allowed disabled:text-[var(--color-text-tertiary)] disabled:hover:bg-transparent"
+      className="flex h-8 w-full items-center rounded-[var(--radius-sm)] px-2 text-left text-[13px] text-[var(--color-text-primary)] outline-none transition-colors hover:bg-[var(--color-surface-hover)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-border-focus)] disabled:cursor-not-allowed disabled:text-[var(--color-text-tertiary)] disabled:hover:bg-transparent"
     >
       {label}
     </button>
diff --git a/desktop/src/components/workbench/WorkspaceTerminalTab.tsx b/desktop/src/components/workbench/WorkspaceTerminalTab.tsx
index 22667917..356ca7a3 100644
--- a/desktop/src/components/workbench/WorkspaceTerminalTab.tsx
+++ b/desktop/src/components/workbench/WorkspaceTerminalTab.tsx
@@ -50,7 +50,7 @@ export function WorkspaceTerminalTab({ sessionId, tab, active }: WorkspaceTermin
         <p
           role="status"
           data-testid={`workspace-terminal-exited-${tab.ordinal}`}
-          className="shrink-0 border-b border-[var(--color-border)] bg-[var(--color-surface-container)] px-3 py-1.5 text-[11px] text-[var(--color-text-secondary)]"
+          className="shrink-0 border-b border-[var(--color-border)] bg-[var(--color-surface-container)] px-3 py-1.5 text-[12px] text-[var(--color-text-secondary)]"
         >
           {t('workspace.terminal.exited')} {t('workspace.terminal.restart')}
         </p>
diff --git a/desktop/src/components/workbench/WorkspaceTreeSidebar.test.tsx b/desktop/src/components/workbench/WorkspaceTreeSidebar.test.tsx
index c5269e28..56e3d97a 100644
--- a/desktop/src/components/workbench/WorkspaceTreeSidebar.test.tsx
+++ b/desktop/src/components/workbench/WorkspaceTreeSidebar.test.tsx
@@ -50,11 +50,11 @@ describe('WorkspaceTreeSidebar', () => {
     render(<Fixture />)
     const handle = screen.getByRole('separator')
     fireEvent.keyDown(handle, { key: 'ArrowLeft' })
-    expect(handle).toHaveAttribute('aria-valuenow', '320')
+    expect(handle).toHaveAttribute('aria-valuenow', '280')
     fireEvent.keyDown(handle, { key: 'ArrowRight' })
-    expect(handle).toHaveAttribute('aria-valuenow', '300')
+    expect(handle).toHaveAttribute('aria-valuenow', '260')
     fireEvent.keyDown(handle, { key: 'ArrowLeft' })
     fireEvent.doubleClick(handle)
-    expect(handle).toHaveAttribute('aria-valuenow', '300')
+    expect(handle).toHaveAttribute('aria-valuenow', '260')
   })
 })
diff --git a/desktop/src/components/workbench/WorkspaceTreeSidebar.tsx b/desktop/src/components/workbench/WorkspaceTreeSidebar.tsx
index 08660434..387624b3 100644
--- a/desktop/src/components/workbench/WorkspaceTreeSidebar.tsx
+++ b/desktop/src/components/workbench/WorkspaceTreeSidebar.tsx
@@ -14,7 +14,7 @@ export function WorkspaceTreeSidebar({ open, onOpenChange, children, collapseOnN
   const t = useTranslation()
   const ref = useRef<HTMLDivElement>(null)
   const [narrow, setNarrow] = useState(false)
-  const [width, setWidth] = useState(300)
+  const [width, setWidth] = useState(260)
   const drag = useRef<{ x: number, width: number } | null>(null)
 
   useEffect(() => {
@@ -66,7 +66,7 @@ export function WorkspaceTreeSidebar({ open, onOpenChange, children, collapseOnN
       }}
     >
       {overlay ? <div className="flex shrink-0 justify-end border-b border-[var(--color-border)] px-2 py-1">
-        <IconButton icon={<X size={14} />} size="xs" tone="muted" label={t('common.close')} data-testid="workspace-tree-overlay-close" onClick={() => onOpenChange(false)} />
+        <IconButton icon={<X size={14} strokeWidth={1.75} />} size="xs" tone="muted" label={t('common.close')} data-testid="workspace-tree-overlay-close" onClick={() => onOpenChange(false)} />
       </div> : null}
         {!fullWidth ? <div
           role="separator"
@@ -86,7 +86,7 @@ export function WorkspaceTreeSidebar({ open, onOpenChange, children, collapseOnN
             event.preventDefault()
             setWidth((current) => Math.max(180, Math.min(480, current + (event.key === 'ArrowLeft' ? 20 : -20))))
           }}
-          onDoubleClick={() => setWidth(300)}
+          onDoubleClick={() => setWidth(260)}
           className="absolute inset-y-0 -left-1 w-2 cursor-col-resize outline-none focus-visible:bg-[var(--color-border-focus)]"
         /> : null}
         {children}
diff --git a/desktop/src/components/workspace/WorkspaceDiffSurface.test.tsx b/desktop/src/components/workspace/WorkspaceDiffSurface.test.tsx
index e2f4d699..21a6bbee 100644
--- a/desktop/src/components/workspace/WorkspaceDiffSurface.test.tsx
+++ b/desktop/src/components/workspace/WorkspaceDiffSurface.test.tsx
@@ -106,7 +106,7 @@ describe('WorkspaceDiffSurface', () => {
     expect(document.querySelector('[data-row-text="const b = 2"]')).not.toBeInTheDocument()
   })
 
-  it('uses the Codex-style compact number gutter without a dedicated comment column', () => {
+  it('numbers unified rows with old and new columns and no dedicated comment column', () => {
     render(<WorkspaceDiffSurface value={diff} path="src/a.ts" />)
 
     const code = screen.getByTestId('workspace-code')
@@ -114,7 +114,7 @@ describe('WorkspaceDiffSurface', () => {
     const gutter = row?.querySelector<HTMLElement>('[data-diff-number-gutter]')
     const commentButton = screen.getByRole('button', { name: 'Comment on src/a.ts new line 11' })
 
-    expect(code.style.getPropertyValue('--workspace-diff-gutter-width')).toBe('6ch')
+    expect(code.style.getPropertyValue('--workspace-diff-gutter-width')).toBe('10ch')
     expect(row).toHaveStyle({
       gridTemplateColumns: 'var(--workspace-diff-gutter-width) minmax(max-content, 1fr)',
     })
@@ -122,10 +122,16 @@ describe('WorkspaceDiffSurface', () => {
     expect(gutter).toContainElement(commentButton)
     expect(gutter?.querySelector('[data-diff-gutter-utility-slot]')).toContainElement(commentButton)
     expect(gutter?.className).toContain('bg-[var(--color-diff-added-bg)]')
-    expect(getCodeRow('const a = 1').closest('[data-diff-row-id]')?.querySelector('[data-diff-number-gutter]')?.className).toContain('bg-[var(--color-code-bg)]')
+    expect(getCodeRow('const a = 1').closest('[data-diff-row-id]')?.querySelector('[data-diff-number-gutter]')?.className).toContain('bg-[var(--color-surface)]')
     expect(commentButton.className).toContain('h-5')
     expect(commentButton.className).toContain('w-5')
-    expect(row?.querySelectorAll('[data-diff-line-number]')).toHaveLength(1)
+    // An added line has no old coordinate: the old column is present but empty.
+    expect(row?.querySelectorAll('[data-diff-line-number]')).toHaveLength(2)
+    expect(row?.querySelector('[data-diff-line-number="old"]')).toHaveTextContent('')
+    expect(row?.querySelector('[data-diff-line-number="new"]')).toHaveTextContent('11')
+    const context = getCodeRow('const a = 1').closest('[data-diff-row-id]')
+    expect(context?.querySelector('[data-diff-line-number="old"]')).toHaveTextContent('10')
+    expect(context?.querySelector('[data-diff-line-number="new"]')).toHaveTextContent('10')
     expect(row?.className).toContain('min-h-5')
   })
 
@@ -189,7 +195,7 @@ describe('WorkspaceDiffSurface', () => {
     })
     expect(firstRow?.className).toContain('bg-[var(--color-info-container)]')
     expect(firstRow?.className).not.toContain('bg-[var(--color-diff-added-bg)]')
-    expect(screen.getByTestId('workspace-code').className).toContain('text-[13px]')
+    expect(screen.getByTestId('workspace-code').className).toContain('text-[12px]')
     const editor = screen.getByRole('textbox', { name: 'Review comment' })
     const editorContainer = editor.closest('[data-diff-editor]')
     expect(editorContainer?.className).toContain('max-w-3xl')
diff --git a/desktop/src/components/workspace/WorkspaceDiffSurface.tsx b/desktop/src/components/workspace/WorkspaceDiffSurface.tsx
index a0698ae9..04c7f5e2 100644
--- a/desktop/src/components/workspace/WorkspaceDiffSurface.tsx
+++ b/desktop/src/components/workspace/WorkspaceDiffSurface.tsx
@@ -39,7 +39,7 @@ export const workspacePrismTheme: PrismTheme = {
     backgroundColor: 'transparent',
   },
   styles: [
-    { types: ['comment', 'prolog', 'doctype', 'cdata'], style: { color: 'var(--color-code-comment)', fontStyle: 'italic' } },
+    { types: ['comment', 'prolog', 'doctype', 'cdata'], style: { color: 'var(--color-code-comment)' } },
     { types: ['string', 'attr-value', 'template-string'], style: { color: 'var(--color-code-string)' } },
     { types: ['keyword', 'selector', 'important', 'atrule'], style: { color: 'var(--color-code-keyword)' } },
     { types: ['function'], style: { color: 'var(--color-code-function)' } },
@@ -109,12 +109,16 @@ export const InlineHighlightedCode = memo(function InlineHighlightedCode({
   )
 })
 
+/**
+ * The theme's italic bit is dropped on purpose: comments are often CJK, which
+ * has no italic face and renders as a synthetic slant. Bold maps to the
+ * heaviest weight the monospace face is paired with (500).
+ */
 function tokenStyle(token: WorkspaceDiffHighlightToken): CSSProperties {
   const fontStyle = token.fontStyle ?? 0
   return {
     color: token.color,
-    fontStyle: fontStyle & 1 ? 'italic' : undefined,
-    fontWeight: fontStyle & 2 ? 700 : undefined,
+    fontWeight: fontStyle & 2 ? 500 : undefined,
     textDecoration: [
       fontStyle & 4 ? 'underline' : '',
       fontStyle & 8 ? 'line-through' : '',
@@ -228,7 +232,7 @@ function gutterTone(row: WorkspaceDiffRow, selected: boolean) {
   if (row.kind === 'addition') return 'bg-[var(--color-diff-added-bg)]'
   if (row.kind === 'deletion') return 'bg-[var(--color-diff-removed-bg)]'
   if (row.kind === 'hunk') return 'bg-[var(--color-diff-highlight-bg)]'
-  return 'bg-[var(--color-code-bg)] group-hover:bg-[var(--color-surface-hover)]'
+  return 'bg-[var(--color-surface)] group-hover:bg-[var(--color-surface-hover)]'
 }
 
 function prefixTone(row: WorkspaceDiffRow) {
@@ -238,8 +242,8 @@ function prefixTone(row: WorkspaceDiffRow) {
 }
 
 function codeTone(row: WorkspaceDiffRow) {
-  if (row.kind === 'metadata') return 'font-semibold text-[var(--color-text-secondary)]'
-  if (row.kind === 'hunk') return 'font-semibold text-[var(--color-warning)]'
+  if (row.kind === 'metadata') return 'font-medium text-[var(--color-text-secondary)]'
+  if (row.kind === 'hunk') return 'text-[var(--color-text-tertiary)]'
   return ''
 }
 
@@ -252,7 +256,7 @@ function isStructuralMetadata(row: WorkspaceDiffRow, compact = false) {
 export function WorkspaceDiffSurface({
   value,
   path,
-  className = 'min-h-0 flex-1 overflow-auto bg-[var(--color-code-bg)]',
+  className = 'min-h-0 flex-1 overflow-auto bg-[var(--color-surface)]',
   lineLimit = WORKSPACE_PREVIEW_LINE_LIMIT,
   hideSingleFileHeader = false,
   mode = 'unified',
@@ -272,8 +276,13 @@ export function WorkspaceDiffSurface({
     ), 3),
     [rows],
   )
+  // Unified rows carry both coordinates, old then new, like `git diff` itself;
+  // a split side only ever has one.
+  const twoNumberColumns = mode === 'unified'
   const codeStyle = {
-    '--workspace-diff-gutter-width': `${lineNumberCharacters + 3}ch`,
+    '--workspace-diff-gutter-width': twoNumberColumns
+      ? `${lineNumberCharacters * 2 + 4}ch`
+      : `${lineNumberCharacters + 3}ch`,
   } as CSSProperties
   const showFileHeaders = !hideSingleFileHeader || files.length > 1
   const displayItemIds = useMemo(
@@ -555,7 +564,7 @@ export function WorkspaceDiffSurface({
   const renderEditor = () => review.selection && (
     <div
       data-diff-editor=""
-      className="sticky z-[var(--z-raised)] my-1.5 min-w-[280px] max-w-3xl overflow-hidden rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)] shadow-[var(--shadow-card)]"
+      className="sticky z-[var(--z-raised)] my-1.5 min-w-[280px] max-w-3xl overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] shadow-[var(--shadow-card)]"
       style={{
         left: 'var(--workspace-diff-gutter-width)',
         width: 'min(48rem, calc(100cqi - var(--workspace-diff-gutter-width) - 0.75rem))',
@@ -563,15 +572,15 @@ export function WorkspaceDiffSurface({
     >
       <div className="flex min-h-10 items-center gap-2 px-3 pt-2.5">
         <span className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-[var(--radius-sm)] bg-[var(--color-surface-container)] text-[var(--color-text-secondary)]">
-          <MessageSquare aria-hidden="true" size={14} />
+          <MessageSquare aria-hidden="true" size={14} strokeWidth={1.75} />
         </span>
-        <div className="text-[12px] font-semibold text-[var(--color-text-primary)]">{t('workspace.localComment')}</div>
-        <div className="ml-auto text-[11px] text-[var(--color-text-tertiary)]">
+        <div className="font-body text-[13px] font-medium text-[var(--color-text-primary)]">{t('workspace.localComment')}</div>
+        <div className="ml-auto font-mono text-[11px] tabular-nums text-[var(--color-text-tertiary)]">
           {sideLabel(review.selection.side)} L{review.selection.lineStart}{review.selection.lineEnd === review.selection.lineStart ? '' : `-L${review.selection.lineEnd}`}
         </div>
       </div>
       {status && (
-        <div role="status" aria-live="polite" className="px-3 pt-1.5 text-[11px] text-[var(--color-warning)]">
+        <div role="status" aria-live="polite" className="px-3 pt-1.5 font-body text-[12px] text-[var(--color-on-warning-container)]">
           {t(`workspace.diffReview.${status}`)}
         </div>
       )}
@@ -583,7 +592,7 @@ export function WorkspaceDiffSurface({
         onChange={(event) => setReview((current) => ({ ...current, draft: event.target.value }))}
         onKeyDown={handleEditorKeyDown}
         rows={2}
-        className="block min-h-0 w-full resize-y bg-transparent px-3 py-2 font-[var(--font-body)] text-[13px] leading-5 text-[var(--color-text-primary)] outline-none placeholder:text-[var(--color-text-tertiary)]"
+        className="block min-h-0 w-full resize-y bg-transparent px-3 py-2 font-body text-[13px] leading-5 text-[var(--color-text-primary)] outline-none placeholder:text-[var(--color-text-tertiary)]"
       />
       <div className="flex items-center justify-end gap-2 px-2 pb-2">
         <Button variant="ghost" size="base" onClick={closeEditor}>
@@ -598,9 +607,9 @@ export function WorkspaceDiffSurface({
           aria-label={t('workspace.diffReview.submitAria')}
           disabled={!review.draft.trim()}
           onClick={submitComment}
-          className="inline-flex h-8 min-w-8 items-center justify-center gap-1.5 rounded-[var(--radius-md)] bg-[var(--color-info)] px-3 text-[12px] font-medium text-[var(--color-surface)] transition-[opacity,transform] duration-150 ease-out hover:opacity-90 active:scale-[0.98] motion-reduce:transition-none motion-reduce:active:scale-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface-container-low)] disabled:cursor-not-allowed disabled:opacity-35"
+          className="inline-flex h-8 min-w-8 items-center justify-center gap-1.5 rounded-[var(--radius-md)] bg-[var(--color-info)] px-3 font-body text-[13px] font-medium text-[var(--color-surface)] transition-[opacity,transform] duration-150 ease-out hover:opacity-90 active:scale-[0.98] motion-reduce:transition-none motion-reduce:active:scale-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface-container-low)] disabled:cursor-not-allowed disabled:opacity-35"
         >
-          <CornerDownLeft aria-hidden="true" size={14} />
+          <CornerDownLeft aria-hidden="true" size={14} strokeWidth={1.75} />
           <span>{t('workspace.diffReview.submit')}</span>
         </button>
       </div>
@@ -616,7 +625,7 @@ export function WorkspaceDiffSurface({
           data-highlight-engine={highlightResult.engine}
           role="grid"
           aria-label={t('workspace.diffGridLabel', { path })}
-          className="m-0 min-w-full font-mono text-[13px] leading-5 text-[var(--color-code-fg)]"
+          className="m-0 min-w-full font-mono text-[12px] leading-5 text-[var(--color-code-fg)]"
           style={codeStyle}
         >
           {files.map((file) => {
@@ -637,18 +646,18 @@ export function WorkspaceDiffSurface({
                 {headerVisible && (
                   <div
                     data-testid="workspace-diff-file-header"
-                    className="sticky top-0 z-[var(--z-raised)] flex h-10 items-center gap-2 border-b border-[var(--color-border)] bg-[var(--color-surface-glass)] px-4 text-[12px] backdrop-blur"
+                    className="sticky top-0 z-[var(--z-raised)] flex h-9 items-center gap-2 border-b border-[var(--color-border)] bg-[var(--color-surface-container)] px-3 text-[12px]"
                   >
-                    <FileCode2 aria-hidden="true" size={15} className="shrink-0 text-[var(--color-text-tertiary)]" />
+                    <FileCode2 aria-hidden="true" size={14} strokeWidth={1.75} className="shrink-0 text-[var(--color-text-tertiary)]" />
                     <span className="min-w-0 truncate">
                       {displayDirectory && (
                         <span className="text-[var(--color-text-tertiary)]">{displayDirectory}</span>
                       )}
-                      <span className="font-semibold text-[var(--color-text-primary)]">{displayName}</span>
+                      <span className="font-medium text-[var(--color-text-primary)]">{displayName}</span>
                     </span>
-                    <span className="ml-auto shrink-0 font-mono text-[11px] tabular-nums">
-                      <span className="text-[var(--color-success)]">+{fileAdditions}</span>
-                      <span className="ml-1.5 text-[var(--color-error)]">-{fileDeletions}</span>
+                    <span className="ml-auto shrink-0 tabular-nums">
+                      <span className="text-[var(--color-diff-added-text)]">+{fileAdditions}</span>
+                      <span className="ml-1.5 text-[var(--color-diff-removed-text)]">-{fileDeletions}</span>
                     </span>
                     <span className="sr-only">diff --git {oldPath} {newPath}</span>
                   </div>
@@ -665,7 +674,7 @@ export function WorkspaceDiffSurface({
                       key={row.id}
                       role="row"
                       data-diff-hunk-separator={row.hunkId}
-                      className="group/hunk flex min-h-6 min-w-0 items-center gap-2 border-y border-[var(--color-border)] bg-[var(--color-code-bg)] px-3 text-[11px] text-[var(--color-text-tertiary)]"
+                      className="group/hunk flex min-h-6 min-w-0 items-center gap-2 border-y border-[var(--color-border)] bg-[var(--color-surface-container)] px-3 text-[11px] text-[var(--color-text-tertiary)]"
                       style={mode === 'split' ? { gridColumn: '1 / -1', gridRow: row.displayRow! + (editorRow && row.displayRow! > editorRow ? 1 : 0) } : undefined}
                     >
                       <span className="min-w-0 truncate">{coordinates ? `${range(coordinates[1]!, coordinates[2])} → ${range(coordinates[3]!, coordinates[4])}${coordinates[5] ?? ''}` : row.text}</span>
@@ -708,7 +717,7 @@ export function WorkspaceDiffSurface({
                       >
                         <span
                           data-diff-number-gutter=""
-                          className={`sticky left-0 z-[1] flex min-h-full select-none ${wrapLines ? 'items-start' : 'items-center'} justify-end pl-[2ch] pr-[1ch] text-right text-[11px] text-[var(--color-text-tertiary)] ${gutterTone(row, selected)}`}
+                          className={`sticky left-0 z-[1] flex min-h-full select-none ${wrapLines ? 'items-start' : 'items-center'} justify-end ${twoNumberColumns ? 'gap-[1ch] pl-[1ch]' : 'pl-[2ch]'} pr-[1ch] text-right tabular-nums text-[var(--color-text-tertiary)] ${gutterTone(row, selected)}`}
                         >
                           {selected && (
                             <span
@@ -719,11 +728,18 @@ export function WorkspaceDiffSurface({
                               }`}
                             />
                           )}
+                          {twoNumberColumns ? (
+                            <span data-diff-line-number="old" className="shrink-0" style={{ width: `${lineNumberCharacters}ch` }}>
+                              {row.oldLine ?? ''}
+                            </span>
+                          ) : null}
+                          {/* The comment control lands on the last column, so only it fades. */}
                           <span
-                            data-diff-line-number=""
-                            className={`transition-opacity duration-100 group-hover:opacity-0 group-focus-within:opacity-0 ${selectionFocus ? 'opacity-0' : ''}`}
+                            data-diff-line-number={twoNumberColumns ? 'new' : ''}
+                            className={`shrink-0 transition-opacity duration-100 group-hover:opacity-0 group-focus-within:opacity-0 ${selectionFocus ? 'opacity-0' : ''}`}
+                            style={twoNumberColumns ? { width: `${lineNumberCharacters}ch` } : undefined}
                           >
-                            {line ?? ''}
+                            {(twoNumberColumns ? row.newLine : line) ?? ''}
                           </span>
                           {row.selectable && row.side && line !== null && (
                             <span
@@ -751,7 +767,7 @@ export function WorkspaceDiffSurface({
                                   selectionFocus ? 'bg-[var(--color-info)] text-[var(--color-surface)] opacity-100' : 'text-[var(--color-text-tertiary)] opacity-0 group-hover:opacity-100 focus:opacity-100'
                                 }`}
                               >
-                                {selected ? <MessageSquare aria-hidden="true" size={12} /> : <Plus aria-hidden="true" size={13} />}
+                                {selected ? <MessageSquare aria-hidden="true" size={12} strokeWidth={2} /> : <Plus aria-hidden="true" size={12} strokeWidth={2} />}
                               </button>
                             </span>
                           )}
@@ -788,14 +804,14 @@ export function WorkspaceDiffSurface({
 
         {status && !review.selection && (
           <div className="sticky bottom-0 border-t border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] px-3 py-2">
-            <div role="status" aria-live="polite" className="text-[11px] text-[var(--color-warning)]">
+            <div role="status" aria-live="polite" className="font-body text-[12px] text-[var(--color-on-warning-container)]">
               {t(`workspace.diffReview.${status}`)}
             </div>
           </div>
         )}
 
         {displayItemIds.length > lineLimit && (
-          <div className="sticky bottom-0 flex items-center gap-3 border-t border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] px-3 py-2 text-xs text-[var(--color-text-tertiary)]">
+          <div className="sticky bottom-0 flex items-center gap-3 border-t border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] px-3 py-2 font-body text-xs text-[var(--color-text-tertiary)]">
             <span>
               {showAllRows
                 ? t('workspace.previewAllLines', { total: displayItemIds.length })
diff --git a/desktop/src/components/workspace/WorkspaceFileOpenWith.test.tsx b/desktop/src/components/workspace/WorkspaceFileOpenWith.test.tsx
index c966e8f8..439b0b2c 100644
--- a/desktop/src/components/workspace/WorkspaceFileOpenWith.test.tsx
+++ b/desktop/src/components/workspace/WorkspaceFileOpenWith.test.tsx
@@ -111,7 +111,7 @@ describe('WorkspaceFileOpenWith', () => {
     const { getAllByRole, getByRole, queryByText } = render(<WorkspaceFileOpenWith absolutePath="/fixture/app.ts" targets={targets} onRefresh={vi.fn()} />)
     const items = getAllByRole('menuitem')
     expect(items.slice(0, 9).map((item) => item.textContent)).toEqual(targets.slice(0, 9).map((target) => target.label))
-    expect(items[0]).toHaveClass('h-9', 'text-[15px]')
+    expect(items[0]).toHaveClass('h-8', 'text-[13px]')
     expect(items[8]?.nextElementSibling).toBe(getByRole('separator'))
     expect(items[9]?.previousElementSibling).toBe(getByRole('separator'))
     expect(items.at(-1)).toHaveTextContent('workspace.refresh')
diff --git a/desktop/src/components/workspace/WorkspaceFileOpenWith.tsx b/desktop/src/components/workspace/WorkspaceFileOpenWith.tsx
index e8c54ba1..a6078abc 100644
--- a/desktop/src/components/workspace/WorkspaceFileOpenWith.tsx
+++ b/desktop/src/components/workspace/WorkspaceFileOpenWith.tsx
@@ -40,7 +40,7 @@ export function WorkspaceFileOpenWith({ absolutePath, sessionId, workspacePath,
     void useOpenTargetStore.getState().openTarget(target.id, absolutePath).catch(() => reportOpenFailure(absolutePath))
     onAfterSelect?.()
   }
-  const itemClass = 'flex h-9 w-full items-center gap-2.5 rounded-[var(--radius-sm)] px-2 text-left text-[15px] text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)] focus-visible:outline-none focus-visible:bg-[var(--color-surface-hover)]'
+  const itemClass = 'flex h-8 w-full items-center gap-2.5 rounded-[var(--radius-sm)] px-2 text-left text-[13px] text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)] focus-visible:outline-none focus-visible:bg-[var(--color-surface-hover)]'
   const failure = error ?? discovery.error
   return (
     <>
@@ -52,7 +52,7 @@ export function WorkspaceFileOpenWith({ absolutePath, sessionId, workspacePath,
           <span className="truncate">{target.kind === 'system_default' ? t('openWith.systemDefault') : target.label}</span>
         </button>
       ))}
-      {applications.length > 0 && (folders.length > 0 || usefulActions.length > 0 || onRefresh) ? <div className="mx-2 my-1 border-t border-[var(--color-border)]" role="separator" /> : null}
+      {applications.length > 0 && (folders.length > 0 || usefulActions.length > 0 || onRefresh) ? <div className="-mx-1 my-1 border-t border-[var(--color-border)]" role="separator" /> : null}
       {folders.map((target) => <button key={target.id} type="button" role="menuitem" onClick={() => selectTarget(target)} className={itemClass}>{t('workspace.files.openContainingFolder')}</button>)}
       {usefulActions.map((item) => <button key={item.id} type="button" role="menuitem" onClick={() => { if (item.id === 'preview' && onPreview) onPreview(); else item.onSelect(); onAfterSelect?.() }} className={itemClass}><span className="truncate">{item.label}</span></button>)}
       {onRefresh ? <button type="button" role="menuitem" className={itemClass} onClick={() => { onRefresh(); onAfterSelect?.() }}>{t('workspace.refresh')}</button> : null}
diff --git a/desktop/src/components/workspace/surfaces/CodeSurface.test.tsx b/desktop/src/components/workspace/surfaces/CodeSurface.test.tsx
index ab82608c..8dafa83d 100644
--- a/desktop/src/components/workspace/surfaces/CodeSurface.test.tsx
+++ b/desktop/src/components/workspace/surfaces/CodeSurface.test.tsx
@@ -96,13 +96,13 @@ describe('CodeSurface', () => {
     expect(screen.getByTestId('workspace-code').textContent).toContain('const c = 3')
   })
 
-  it('keeps the screenshot code rhythm and centers revealed lines using its measured 26px rows', () => {
-    const restore = stubSurfaceLayout(26)
+  it('keeps the 13/22 code rhythm and centers revealed lines using its measured 22px rows', () => {
+    const restore = stubSurfaceLayout(22)
     try {
       renderSurface({ value: makeFile(12), reveal: { line: 10, nonce: 9 } })
       const code = screen.getByTestId('workspace-code')
-      expect(code.closest('pre')).toHaveClass('text-[15px]', 'leading-[26px]')
-      expect(code.closest('[data-workspace-scroll-surface]')!.scrollTop).toBe(223)
+      expect(code.closest('pre')).toHaveClass('text-[13px]', 'leading-[22px]')
+      expect(code.closest('[data-workspace-scroll-surface]')!.scrollTop).toBe(181)
     } finally {
       restore()
     }
@@ -265,7 +265,7 @@ describe('CodeSurface', () => {
     expect(onAddLineComment).toHaveBeenCalledWith(2, 2, 'rename this', 'const b = 2')
   })
 
-  it('renders shiki tokens with their colour and font style once highlighting resolves', async () => {
+  it('renders shiki tokens with their colour and weight, never a synthetic italic', async () => {
     highlightWorkspaceCodeMock.mockResolvedValue({
       engine: 'shiki',
       tokensByLine: [[{ content: 'const a = 1', color: '#ff0000', fontStyle: 3 }]],
@@ -286,17 +286,21 @@ describe('CodeSurface', () => {
       expect(screen.getByTestId('workspace-code')).toHaveAttribute('data-highlight-engine', 'shiki')
     })
     const token = screen.getByTestId('workspace-code').querySelector('[data-workspace-token]')
-    expect(token).toHaveStyle({ color: '#ff0000', fontStyle: 'italic', fontWeight: '700' })
+    expect(token).toHaveStyle({ color: '#ff0000', fontWeight: '500' })
+    expect((token as HTMLElement).style.fontStyle).toBe('')
   })
 })
 
 describe('workspaceCodeTokenStyle', () => {
-  it('maps the shiki font-style bitmask onto CSS', () => {
+  it('maps the shiki font-style bitmask onto CSS without italics', () => {
     expect(workspaceCodeTokenStyle({ content: 'a', color: '#111' }))
-      .toEqual({ color: '#111', fontStyle: undefined, fontWeight: undefined })
-    expect(workspaceCodeTokenStyle({ content: 'a', color: '#111', fontStyle: 1 }).fontStyle).toBe('italic')
-    expect(workspaceCodeTokenStyle({ content: 'a', color: '#111', fontStyle: 2 }).fontWeight).toBe(700)
+      .toEqual({ color: '#111', fontWeight: undefined })
+    // CJK comments have no italic face; the italic bit is dropped on purpose.
+    expect(workspaceCodeTokenStyle({ content: 'a', color: '#111', fontStyle: 1 }))
+      .toEqual({ color: '#111', fontWeight: undefined })
+    // Monospace tops out at medium.
+    expect(workspaceCodeTokenStyle({ content: 'a', color: '#111', fontStyle: 2 }).fontWeight).toBe(500)
     expect(workspaceCodeTokenStyle({ content: 'a', color: '#111', fontStyle: 4 }))
-      .toEqual({ color: '#111', fontStyle: undefined, fontWeight: undefined })
+      .toEqual({ color: '#111', fontWeight: undefined })
   })
 })
diff --git a/desktop/src/components/workspace/surfaces/CodeSurface.tsx b/desktop/src/components/workspace/surfaces/CodeSurface.tsx
index 376f3aa1..d1f44428 100644
--- a/desktop/src/components/workspace/surfaces/CodeSurface.tsx
+++ b/desktop/src/components/workspace/surfaces/CodeSurface.tsx
@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useRef, useState, type CSSProperties, type MouseEvent } from 'react'
 import { Highlight } from 'prism-react-renderer'
+import { MessageSquare } from 'lucide-react'
 import { Button } from '@/components/ui/Button'
 import { useTranslation } from '@/i18n'
 import { clearWindowSelection, useSelectionPopoverDismiss } from '@/hooks/useSelectionPopoverDismiss'
@@ -17,12 +18,16 @@ import {
   type WorkspaceTextSelection,
 } from './textSelection'
 
+/**
+ * Shiki's font-style bitmask, minus italics: comments are frequently CJK, which
+ * has no italic face. Bold maps to 500, the heaviest weight the monospace face
+ * is paired with.
+ */
 export function workspaceCodeTokenStyle(token: WorkspaceDiffHighlightToken): CSSProperties {
   const fontStyle = token.fontStyle ?? 0
   return {
     color: token.color,
-    fontStyle: fontStyle & 1 ? 'italic' : undefined,
-    fontWeight: fontStyle & 2 ? 700 : undefined,
+    fontWeight: fontStyle & 2 ? 500 : undefined,
   }
 }
 
@@ -164,13 +169,13 @@ export function CodeSurface({
     if (!commentLineStart || commentLineEnd !== lineNumber) return null
 
     return (
-      <div className="grid grid-cols-[32px_minmax(0,720px)] gap-3 bg-[var(--color-brand-soft)] px-3 py-2">
+      <div className="grid grid-cols-[32px_minmax(0,720px)] gap-4 bg-[var(--color-info-container)] px-3 py-2 font-body">
         <span aria-hidden="true" />
-        <div className="rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] shadow-[var(--shadow-card)]">
-          <div className="flex items-center gap-2 border-b border-[var(--color-border)] px-3 py-2">
-            <span className="material-symbols-outlined text-[15px] text-[var(--color-text-tertiary)]">chat_bubble</span>
-            <span className="text-[12px] font-semibold text-[var(--color-text-primary)]">{t('workspace.localComment')}</span>
-            <span className="ml-auto text-[11px] text-[var(--color-text-tertiary)]">
+        <div className="rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] shadow-[var(--shadow-card)]">
+          <div className="flex h-10 items-center gap-2 border-b border-[var(--color-border)] px-3">
+            <MessageSquare size={14} strokeWidth={1.75} aria-hidden="true" className="shrink-0 text-[var(--color-text-tertiary)]" />
+            <span className="text-[13px] font-medium text-[var(--color-text-primary)]">{t('workspace.localComment')}</span>
+            <span className="ml-auto text-[12px] text-[var(--color-text-tertiary)]">
               {commentLineStart === commentLineEnd
                 ? t('workspace.commentLineTarget', { line: commentLineStart })
                 : t('workspace.commentLineRangeTarget', { start: commentLineStart, end: commentLineEnd })}
@@ -220,12 +225,12 @@ export function CodeSurface({
     // A comment selection is something the user just did by hand, so it outranks
     // the reveal mark left over from the reference they clicked to get here.
     if (isCommentLineSelected(lineNumber)) {
-      return 'group grid grid-cols-[32px_minmax(0,1fr)] gap-3 px-3 bg-[var(--color-info-container)]'
+      return 'group grid grid-cols-[32px_minmax(0,1fr)] gap-4 px-3 bg-[var(--color-info-container)]'
     }
     if (revealLine === lineNumber) {
-      return 'group grid grid-cols-[32px_minmax(0,1fr)] gap-3 px-3 bg-[var(--color-brand-soft)] shadow-[inset_2px_0_0_var(--color-brand)]'
+      return 'group grid grid-cols-[32px_minmax(0,1fr)] gap-4 px-3 bg-[var(--color-brand-soft)] shadow-[inset_2px_0_0_var(--color-brand)]'
     }
-    return 'group grid grid-cols-[32px_minmax(0,1fr)] gap-3 px-3 hover:bg-[var(--color-surface-hover)]'
+    return 'group grid grid-cols-[32px_minmax(0,1fr)] gap-4 px-3 hover:bg-[var(--color-surface-hover)]'
   }
 
   const renderLineNumberButton = (lineNumber: number) => {
@@ -242,10 +247,10 @@ export function CodeSurface({
             : { anchorLine: lineNumber, focusLine: lineNumber })
           if (!extendRange) setCommentDraft('')
         }}
-        className={`select-none text-right text-[13px] transition-colors focus-visible:outline-none ${
+        className={`select-none text-right text-[13px] tabular-nums transition-colors focus-visible:outline-none ${
           selected
-            ? 'font-semibold text-[var(--color-info)]'
-            : 'text-[var(--color-text-tertiary)] hover:text-[var(--color-brand)] focus-visible:text-[var(--color-brand)]'
+            ? 'font-medium text-[var(--color-info)]'
+            : 'text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)] focus-visible:text-[var(--color-text-primary)]'
         }`}
       >
         {lineNumber}
@@ -257,7 +262,7 @@ export function CodeSurface({
     <div
       ref={surfaceRef}
       data-workspace-scroll-surface=""
-      className="min-h-0 flex-1 overflow-auto bg-[var(--color-code-bg)]"
+      className="min-h-0 flex-1 overflow-auto bg-[var(--color-surface)]"
       onMouseUp={handleSelectionMouseUp}
       onKeyDown={(event) => {
         if (event.key === 'Escape') setSelectionMenu(null)
@@ -268,7 +273,7 @@ export function CodeSurface({
           <pre
             data-workspace-code=""
             data-testid="workspace-code"
-            className="m-0 font-mono text-[15px] leading-[26px]"
+            className="m-0 font-mono text-[13px] leading-[22px]"
             style={{ color: 'var(--color-code-fg)', background: 'transparent' }}
           >
             {visibleLines.map((line, index) => {
@@ -292,7 +297,7 @@ export function CodeSurface({
             data-workspace-code=""
             data-testid="workspace-code"
             data-highlight-engine="shiki"
-            className="m-0 font-mono text-[15px] leading-[26px]"
+            className="m-0 font-mono text-[13px] leading-[22px]"
             style={{ color: 'var(--color-code-fg)', background: 'transparent' }}
           >
             {shikiTokensByLine.map((line, index) => {
@@ -332,7 +337,7 @@ export function CodeSurface({
                 data-workspace-code=""
                 data-testid="workspace-code"
                 data-highlight-engine="prism"
-                className="m-0 font-mono text-[15px] leading-[26px]"
+                className="m-0 font-mono text-[13px] leading-[22px]"
                 style={{ color: 'var(--color-code-fg)', background: 'transparent' }}
               >
                 {tokens.map((line, index) => {
diff --git a/desktop/src/components/workspace/surfaces/FloatingSelectionMenu.tsx b/desktop/src/components/workspace/surfaces/FloatingSelectionMenu.tsx
index a597508d..e01d8c6b 100644
--- a/desktop/src/components/workspace/surfaces/FloatingSelectionMenu.tsx
+++ b/desktop/src/components/workspace/surfaces/FloatingSelectionMenu.tsx
@@ -22,10 +22,10 @@ export function FloatingSelectionMenu({
         if (event.button === 0 && !event.ctrlKey) event.preventDefault()
       }}
       onClick={onAdd}
-      className="glass-panel fixed z-[var(--z-popover)] inline-flex h-11 items-center gap-2 rounded-full px-5 text-[15px] font-semibold text-[var(--color-text-primary)] transition-colors hover:bg-[var(--color-surface-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]"
+      className="fixed z-[var(--z-popover)] inline-flex h-8 items-center gap-1.5 rounded-full border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] px-3 text-[13px] font-medium text-[var(--color-text-primary)] shadow-[var(--shadow-dropdown)] transition-colors hover:bg-[var(--color-surface-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]"
       style={{ left: selection.x, top: selection.y }}
     >
-      <MessageCircle size={21} strokeWidth={2.15} className="shrink-0 text-[var(--color-text-primary)]" aria-hidden="true" />
+      <MessageCircle size={14} strokeWidth={1.75} className="shrink-0 text-[var(--color-text-secondary)]" aria-hidden="true" />
       <span>{t('workspace.addSelectionToChat')}</span>
     </button>
   )
diff --git a/desktop/src/components/workspace/surfaces/ImagePreview.tsx b/desktop/src/components/workspace/surfaces/ImagePreview.tsx
index 08f1ea04..c33124d5 100644
--- a/desktop/src/components/workspace/surfaces/ImagePreview.tsx
+++ b/desktop/src/components/workspace/surfaces/ImagePreview.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { ExternalLink } from 'lucide-react'
+import { ExternalLink, ImageOff } from 'lucide-react'
 import { IconButton } from '@/components/ui/IconButton'
 import { ZoomableImage, type ImageZoom } from '@/components/ui/ZoomableImage'
 import { useTranslation } from '@/i18n'
@@ -41,7 +41,7 @@ export function ImagePreview({
   if (!dataUrl || failedUrl === dataUrl) {
     return (
       <PanelMessage
-        icon="image_not_supported"
+        icon={ImageOff}
         message={(!dataUrl && error) || t('workspace.imagePreviewUnavailable')}
         action={absolutePath ? <OpenInSystemButton absolutePath={absolutePath} /> : undefined}
       />
@@ -70,9 +70,9 @@ export function ImagePreview({
       }}
       actions={absolutePath ? (
         <IconButton
-          icon={<ExternalLink size={16} strokeWidth={1.9} />}
+          icon={<ExternalLink size={14} strokeWidth={1.75} />}
           label={t('workspace.openInSystemApp')}
-          size="md"
+          size="sm"
           tone="secondary"
           onClick={() => {
             void openLocalFileWithSystem(absolutePath).catch(() => reportOpenFailure(absolutePath))
diff --git a/desktop/src/components/workspace/surfaces/MarkdownSurface.tsx b/desktop/src/components/workspace/surfaces/MarkdownSurface.tsx
index f67c1751..42d378cd 100644
--- a/desktop/src/components/workspace/surfaces/MarkdownSurface.tsx
+++ b/desktop/src/components/workspace/surfaces/MarkdownSurface.tsx
@@ -94,7 +94,7 @@ export function MarkdownSurface({
           content={value}
           variant="document"
           resolveImageSrc={resolveImageSrc}
-          className="workspace-markdown-preview prose-p:text-[14px] prose-p:leading-7 prose-h1:text-[24px] prose-h2:text-[18px] prose-h3:text-[15px] prose-code:text-[12px] prose-pre:my-4"
+          className="workspace-markdown-preview prose-p:text-[14px] prose-p:leading-7 prose-h1:text-[22px] prose-h2:text-[18px] prose-h3:text-[15px] prose-code:text-[12px] prose-pre:my-4"
         />
       </div>
       <FloatingSelectionMenu selection={selectionMenu} onAdd={addCurrentSelectionToChat} popoverRef={selectionMenuRef} />
diff --git a/desktop/src/components/workspace/surfaces/OpenInSystemButton.tsx b/desktop/src/components/workspace/surfaces/OpenInSystemButton.tsx
index b4b3e88e..8cddcf64 100644
--- a/desktop/src/components/workspace/surfaces/OpenInSystemButton.tsx
+++ b/desktop/src/components/workspace/surfaces/OpenInSystemButton.tsx
@@ -16,7 +16,7 @@ export function OpenInSystemButton({ absolutePath }: { absolutePath: string }) {
     <Button
       variant="secondary"
       size="sm"
-      icon={<ExternalLink size={14} strokeWidth={1.9} aria-hidden="true" />}
+      icon={<ExternalLink size={14} strokeWidth={1.75} aria-hidden="true" />}
       onClick={() => {
         void openLocalFileWithSystem(absolutePath).catch(() => reportOpenFailure(absolutePath))
       }}
diff --git a/desktop/src/components/workspace/surfaces/PanelMessage.test.tsx b/desktop/src/components/workspace/surfaces/PanelMessage.test.tsx
index 7367f351..b9dcbff6 100644
--- a/desktop/src/components/workspace/surfaces/PanelMessage.test.tsx
+++ b/desktop/src/components/workspace/surfaces/PanelMessage.test.tsx
@@ -1,17 +1,18 @@
 import '@testing-library/jest-dom/vitest'
 import { render, screen } from '@testing-library/react'
 import { describe, expect, it } from 'vitest'
+import { CircleAlert, Database, FolderOpen, FolderX } from 'lucide-react'
 import { PanelMessage } from './PanelMessage'
 
 describe('PanelMessage', () => {
   it('announces an informational message as a status region', () => {
-    render(<PanelMessage icon="folder_open" message="No files" />)
+    render(<PanelMessage icon={FolderOpen} message="No files" />)
 
     expect(screen.getByRole('status')).toHaveTextContent('No files')
   })
 
   it('announces an error message as an alert', () => {
-    render(<PanelMessage icon="error" tone="error" message="Load failed" />)
+    render(<PanelMessage icon={CircleAlert} tone="error" message="Load failed" />)
 
     const alert = screen.getByRole('alert')
     expect(alert).toHaveTextContent('Load failed')
@@ -21,22 +22,23 @@ describe('PanelMessage', () => {
   it('drops the live region when the caller opts out of announcing', () => {
     // Search-in-progress rows re-render on every keystroke; announcing each one
     // would make the screen reader talk over the user's typing.
-    render(<PanelMessage announce={false} icon="progress_activity" message="Searching" />)
+    render(<PanelMessage announce={false} busy message="Searching" />)
 
     expect(screen.queryByRole('status')).not.toBeInTheDocument()
     expect(screen.getByText('Searching')).toBeInTheDocument()
   })
 
-  it('spins only the progress icon', () => {
-    const { container: progress } = render(<PanelMessage icon="progress_activity" message="Loading" />)
-    const { container: idle } = render(<PanelMessage icon="folder_off" message="Missing" />)
+  it('spins only while busy', () => {
+    const { container: progress } = render(<PanelMessage busy message="Loading" />)
+    const { container: idle } = render(<PanelMessage icon={FolderX} message="Missing" />)
 
-    expect(progress.querySelector('.material-symbols-outlined')?.className).toContain('animate-spin')
-    expect(idle.querySelector('.material-symbols-outlined')?.className).not.toContain('animate-spin')
+    expect(progress.querySelector('svg')?.getAttribute('class')).toContain('animate-spin')
+    expect(idle.querySelector('svg')).not.toBeNull()
+    expect(idle.querySelector('svg')?.getAttribute('class')).not.toContain('animate-spin')
   })
 
   it('tightens padding in compact mode', () => {
-    const { container } = render(<PanelMessage compact icon="error" message="Nested" />)
+    const { container } = render(<PanelMessage compact icon={CircleAlert} message="Nested" />)
 
     expect(container.firstElementChild?.className).toContain('py-2')
     expect(container.firstElementChild?.className).not.toContain('py-8')
@@ -46,7 +48,7 @@ describe('PanelMessage', () => {
     it('renders the action next to the message, not inside the live region', () => {
       // A screen reader should announce "File is too large", not "File is too large
       // Open in system app" as one sentence — the button is reached by tabbing.
-      render(<PanelMessage icon="database" message="File is too large" action={<button type="button">Open in system app</button>} />)
+      render(<PanelMessage icon={Database} message="File is too large" action={<button type="button">Open in system app</button>} />)
 
       const status = screen.getByRole('status')
       expect(status).toHaveTextContent('File is too large')
@@ -55,7 +57,7 @@ describe('PanelMessage', () => {
     })
 
     it('leaves the markup of a message without an action exactly as it was', () => {
-      const { container } = render(<PanelMessage icon="error" message="Plain" />)
+      const { container } = render(<PanelMessage icon={CircleAlert} message="Plain" />)
 
       // The message row is the root: existing callers and layouts depend on it.
       expect(container.firstElementChild).toHaveAttribute('role', 'status')
@@ -63,7 +65,7 @@ describe('PanelMessage', () => {
     })
 
     it('trades the bottom padding for the action so the pair keeps one rhythm', () => {
-      const { container } = render(<PanelMessage icon="error" message="Failed" action={<button type="button">Retry</button>} />)
+      const { container } = render(<PanelMessage icon={CircleAlert} message="Failed" action={<button type="button">Retry</button>} />)
 
       const row = container.querySelector('[role="status"]')
       expect(row?.className).toContain('pb-3')
diff --git a/desktop/src/components/workspace/surfaces/PanelMessage.tsx b/desktop/src/components/workspace/surfaces/PanelMessage.tsx
index 467691d6..dbca835d 100644
--- a/desktop/src/components/workspace/surfaces/PanelMessage.tsx
+++ b/desktop/src/components/workspace/surfaces/PanelMessage.tsx
@@ -1,14 +1,20 @@
 import type { ReactNode } from 'react'
+import type { LucideIcon } from 'lucide-react'
+import { Spinner } from '@/components/ui/Spinner'
 
 export function PanelMessage({
-  icon,
+  icon: Icon,
+  busy = false,
   message,
   tone = 'muted',
   compact = false,
   announce = true,
   action,
 }: {
-  icon: string
+  /** A lucide icon for the state. Ignored while `busy`, which shows a spinner. */
+  icon?: LucideIcon
+  /** The state is work in progress (loading, searching): spin instead of an icon. */
+  busy?: boolean
   message: string
   tone?: 'muted' | 'error'
   compact?: boolean
@@ -20,30 +26,60 @@ export function PanelMessage({
    */
   action?: ReactNode
 }) {
-  const toneClass =
-    tone === 'error'
-      ? 'text-[var(--color-error)]'
-      : 'text-[var(--color-text-tertiary)]'
+  const role = announce ? tone === 'error' ? 'alert' : 'status' : undefined
+  const glyph = busy
+    ? <Spinner size={compact ? 12 : 16} />
+    : Icon ? <Icon size={compact ? 14 : 16} strokeWidth={1.75} aria-hidden="true" className="shrink-0" /> : null
 
-  const messageRow = (
+  // Inside a list or a card: one quiet line, no icon tile.
+  if (compact) {
+    const row = (
+      <div
+        className={`flex items-center gap-2 px-4 ${action ? 'pt-2 pb-1' : 'py-2'} text-[12px] ${tone === 'error' ? 'text-[var(--color-error)]' : 'text-[var(--color-text-tertiary)]'}`}
+        role={role}
+      >
+        {glyph}
+        <span className="min-w-0 leading-[1.5]">{message}</span>
+      </div>
+    )
+    if (!action) return row
+    return (
+      <div>
+        {row}
+        {/* Indented to the message text: 16px padding + 14px icon + 8px gap. */}
+        <div className="flex flex-wrap items-center gap-2 pb-2 pl-[38px] pr-4">{action}</div>
+      </div>
+    )
+  }
+
+  // A whole panel in one state: centred, an icon tile over the sentence.
+  const messageBlock = (
     <div
-      className={`flex items-center gap-2 px-4 ${compact ? (action ? 'pt-2 pb-1 text-[11px]' : 'py-2 text-[11px]') : (action ? 'pt-8 pb-3 text-xs' : 'py-8 text-xs')} ${toneClass}`}
-      role={announce ? tone === 'error' ? 'alert' : 'status' : undefined}
+      className={`flex flex-col items-center gap-3 px-6 text-center ${action ? 'pt-8 pb-3' : 'py-8'} ${tone === 'error' ? 'text-[var(--color-error)]' : 'text-[var(--color-text-secondary)]'}`}
+      role={role}
     >
-      <span className={`material-symbols-outlined shrink-0 text-[16px] ${icon === 'progress_activity' ? 'animate-spin' : ''}`}>
-        {icon}
+      {glyph ? (
+        <span
+          aria-hidden="true"
+          className={`flex h-9 w-9 items-center justify-center rounded-[var(--radius-md)] ${tone === 'error'
+            ? 'bg-[var(--color-error-container)] text-[var(--color-on-error-container)]'
+            : 'bg-[var(--color-surface-container)] text-[var(--color-text-tertiary)]'}`}
+        >
+          {glyph}
+        </span>
+      ) : null}
+      <span className="max-w-[420px] text-[13px] leading-[1.6]">
+        {message}
       </span>
-      <span className="min-w-0 leading-relaxed">{message}</span>
     </div>
   )
 
-  if (!action) return messageRow
+  if (!action) return messageBlock
 
   return (
     <div>
-      {messageRow}
-      {/* Indented to the message text: 16px padding + 16px icon + 8px gap. */}
-      <div className={`flex flex-wrap items-center gap-2 pl-10 pr-4 ${compact ? 'pb-2' : 'pb-8'}`}>{action}</div>
+      {messageBlock}
+      <div className="flex flex-wrap items-center justify-center gap-2 px-6 pb-8">{action}</div>
     </div>
   )
 }
diff --git a/desktop/src/components/workspace/surfaces/document/DocumentFailure.tsx b/desktop/src/components/workspace/surfaces/document/DocumentFailure.tsx
index 93460b7a..f5f67cc2 100644
--- a/desktop/src/components/workspace/surfaces/document/DocumentFailure.tsx
+++ b/desktop/src/components/workspace/surfaces/document/DocumentFailure.tsx
@@ -1,3 +1,4 @@
+import { CircleAlert } from 'lucide-react'
 import type { ReactNode } from 'react'
 import { Button } from '@/components/ui/Button'
 import { useTranslation } from '@/i18n'
@@ -27,7 +28,7 @@ export function DocumentFailure({
   const canOpenInSystem = isRootedLocalPath(absolutePath)
   return (
     <PanelMessage
-      icon="error"
+      icon={CircleAlert}
       tone="error"
       message={message}
       action={onRetry || extraActions || canOpenInSystem ? (
diff --git a/desktop/src/components/workspace/surfaces/document/DocumentSurface.tsx b/desktop/src/components/workspace/surfaces/document/DocumentSurface.tsx
index 634a8305..8545737a 100644
--- a/desktop/src/components/workspace/surfaces/document/DocumentSurface.tsx
+++ b/desktop/src/components/workspace/surfaces/document/DocumentSurface.tsx
@@ -1,3 +1,4 @@
+import { FileQuestion } from 'lucide-react'
 import { Suspense } from 'react'
 import type { WorkspaceDocumentPreviewType } from '@/api/sessions'
 import { useWorkspaceDocumentBlob } from '@/hooks/useWorkspaceDocumentBlob'
@@ -72,7 +73,7 @@ export function DocumentSurface({
   if (!Viewer) {
     return (
       <PanelMessage
-        icon="draft"
+        icon={FileQuestion}
         message={t('workspace.document.unsupported')}
         action={canOpenInSystem ? <OpenInSystemButton absolutePath={absolutePath} /> : undefined}
       />
@@ -90,7 +91,7 @@ export function DocumentSurface({
         />
       )
     }
-    return <PanelMessage icon="progress_activity" message={t('workspace.document.loading')} />
+    return <PanelMessage busy message={t('workspace.document.loading')} />
   }
 
   return (
@@ -105,7 +106,7 @@ export function DocumentSurface({
           />
         }
       >
-        <Suspense fallback={<PanelMessage icon="progress_activity" message={t('workspace.document.loading')} />}>
+        <Suspense fallback={<PanelMessage busy message={t('workspace.document.loading')} />}>
           <Viewer
             path={path}
             absolutePath={absolutePath}
diff --git a/desktop/src/components/workspace/surfaces/document/DocumentToolbar.tsx b/desktop/src/components/workspace/surfaces/document/DocumentToolbar.tsx
index 0f7dca5d..d55cc398 100644
--- a/desktop/src/components/workspace/surfaces/document/DocumentToolbar.tsx
+++ b/desktop/src/components/workspace/surfaces/document/DocumentToolbar.tsx
@@ -34,7 +34,7 @@ export function DocumentToolbar({
 
   return (
     <div className="shrink-0 border-b border-[var(--color-border)] bg-[var(--color-surface)]">
-      <div className="flex h-11 items-center gap-2 px-3">
+      <div className="flex h-10 items-center gap-2 pl-3 pr-2">
         <div className="flex min-w-0 flex-1 items-center gap-2">{leading}</div>
         {zoom ? (
           <ZoomControls
@@ -51,9 +51,9 @@ export function DocumentToolbar({
         ) : null}
         {canOpenInSystem ? (
           <IconButton
-            icon={<ExternalLink size={16} strokeWidth={1.9} />}
+            icon={<ExternalLink size={14} strokeWidth={1.75} />}
             label={t('workspace.openInSystemApp')}
-            size="md"
+            size="sm"
             tone="secondary"
             onClick={() => {
               void openLocalFileWithSystem(absolutePath).catch(() => reportOpenFailure(absolutePath))
@@ -62,7 +62,7 @@ export function DocumentToolbar({
         ) : null}
       </div>
       {note ? (
-        <p title={note} className="truncate px-3 pb-1.5 text-[11px] text-[var(--color-text-tertiary)]">
+        <p title={note} className="truncate px-3 pb-1.5 text-[12px] text-[var(--color-text-tertiary)]">
           {note}
         </p>
       ) : null}
diff --git a/desktop/src/components/workspace/surfaces/document/DocxSurface.tsx b/desktop/src/components/workspace/surfaces/document/DocxSurface.tsx
index a7ccf1f7..b1e1942f 100644
--- a/desktop/src/components/workspace/surfaces/document/DocxSurface.tsx
+++ b/desktop/src/components/workspace/surfaces/document/DocxSurface.tsx
@@ -281,12 +281,12 @@ export default function DocxSurface({
               onRetry={error.kind === 'unavailable' ? retry : undefined}
             />
           ) : (
-            <PanelMessage icon="progress_activity" message={t('workspace.document.loading')} />
+            <PanelMessage busy message={t('workspace.document.loading')} />
           )}
         </div>
       )}
       {current && error ? (
-        <p role="status" className="shrink-0 border-t border-[var(--color-border)] px-3 py-1.5 text-[11px] text-[var(--color-text-tertiary)]">
+        <p role="status" className="shrink-0 border-t border-[var(--color-border)] px-3 py-1.5 text-[12px] text-[var(--color-text-tertiary)]">
           {t('workspace.files.refreshFailed', { reason: failureMessage(error, t) })}
         </p>
       ) : null}
diff --git a/desktop/src/components/workspace/surfaces/document/PdfSurface.tsx b/desktop/src/components/workspace/surfaces/document/PdfSurface.tsx
index ddf1afc2..21e58bc6 100644
--- a/desktop/src/components/workspace/surfaces/document/PdfSurface.tsx
+++ b/desktop/src/components/workspace/surfaces/document/PdfSurface.tsx
@@ -55,7 +55,7 @@ export default function PdfSurface({
       />
     )
   }
-  return <PanelMessage icon="progress_activity" message={t('workspace.document.loading')} />
+  return <PanelMessage busy message={t('workspace.document.loading')} />
 }
 
 function failureMessage(error: PdfError, t: ReturnType<typeof useTranslation>): string {
@@ -75,7 +75,7 @@ function OpenInBrowserButton({ blob }: { blob: Blob }) {
     <Button
       variant="secondary"
       size="sm"
-      icon={<ExternalLink size={14} strokeWidth={1.9} aria-hidden="true" />}
+      icon={<ExternalLink size={14} strokeWidth={1.75} aria-hidden="true" />}
       onClick={() => {
         const url = URL.createObjectURL(blob)
         window.open(url, '_blank', 'noopener')
diff --git a/desktop/src/components/workspace/surfaces/document/PdfViewer.tsx b/desktop/src/components/workspace/surfaces/document/PdfViewer.tsx
index ac2621aa..5594254c 100644
--- a/desktop/src/components/workspace/surfaces/document/PdfViewer.tsx
+++ b/desktop/src/components/workspace/surfaces/document/PdfViewer.tsx
@@ -315,7 +315,7 @@ export function PdfViewer({
         ) : null}
       </div>
       {refreshError ? (
-        <p role="status" className="shrink-0 border-t border-[var(--color-border)] px-3 py-1.5 text-[11px] text-[var(--color-text-tertiary)]">
+        <p role="status" className="shrink-0 border-t border-[var(--color-border)] px-3 py-1.5 text-[12px] text-[var(--color-text-tertiary)]">
           {t('workspace.files.refreshFailed', { reason: refreshReason(refreshError, t) })}
         </p>
       ) : null}
diff --git a/desktop/src/components/workspace/surfaces/document/SheetGrid.tsx b/desktop/src/components/workspace/surfaces/document/SheetGrid.tsx
index 83d9ed4c..3c0a5f2f 100644
--- a/desktop/src/components/workspace/surfaces/document/SheetGrid.tsx
+++ b/desktop/src/components/workspace/surfaces/document/SheetGrid.tsx
@@ -175,7 +175,7 @@ export function SheetGrid({
         {cells}
       </div>
       {rows < grid.rows || grid.truncatedRows || grid.truncatedColumns ? (
-        <div className="sticky left-0 flex flex-wrap items-center gap-3 px-3 py-2 text-[11px] text-[var(--color-text-tertiary)]">
+        <div className="sticky left-0 flex flex-wrap items-center gap-3 px-3 py-2 text-[12px] text-[var(--color-text-tertiary)]">
           {rows < grid.rows ? (
             <Button variant="secondary" size="sm" onClick={() => setLimit((current) => current + chunk)}>
               {t('workspace.sheet.showMoreRows')}
diff --git a/desktop/src/components/workspace/surfaces/document/SpreadsheetSurface.tsx b/desktop/src/components/workspace/surfaces/document/SpreadsheetSurface.tsx
index 456cfc68..19c176d5 100644
--- a/desktop/src/components/workspace/surfaces/document/SpreadsheetSurface.tsx
+++ b/desktop/src/components/workspace/surfaces/document/SpreadsheetSurface.tsx
@@ -1,3 +1,4 @@
+import { Table } from 'lucide-react'
 import { useCallback, useLayoutEffect, useRef, type ReactNode } from 'react'
 import { SegmentedControl } from '@/components/ui/SegmentedControl'
 import { useElementSize } from '@/hooks/useElementSize'
@@ -112,14 +113,14 @@ export default function SpreadsheetSurface({
           onRetry={error.kind === 'unavailable' ? retry : undefined}
         />
       )
-      : <PanelMessage icon="progress_activity" message={t('workspace.document.loading')} />
+      : <PanelMessage busy message={t('workspace.document.loading')} />
   } else if (!selected) {
-    cover = <PanelMessage icon="table_chart" message={t('workspace.sheet.empty')} />
+    cover = <PanelMessage icon={Table} message={t('workspace.sheet.empty')} />
   } else if (!onScreen) {
     if (gridError) cover = <DocumentFailure message={failureMessage(gridError, t)} absolutePath={absolutePath} />
-    else if (grid === null) cover = <PanelMessage icon="progress_activity" message={t('workspace.document.loading')} />
+    else if (grid === null) cover = <PanelMessage busy message={t('workspace.document.loading')} />
   } else if (grid && (grid.rows === 0 || grid.columns === 0)) {
-    cover = <PanelMessage icon="table_chart" message={t('workspace.sheet.empty')} />
+    cover = <PanelMessage icon={Table} message={t('workspace.sheet.empty')} />
   }
 
   // A newer version that would not open, or would not read, leaves the last good one up.
@@ -171,7 +172,7 @@ export default function SpreadsheetSurface({
         {cover ? <div className="absolute inset-0 bg-[var(--color-surface)]">{cover}</div> : null}
       </div>
       {refreshFailure ? (
-        <p role="status" className="shrink-0 border-t border-[var(--color-border)] px-3 py-1.5 text-[11px] text-[var(--color-text-tertiary)]">
+        <p role="status" className="shrink-0 border-t border-[var(--color-border)] px-3 py-1.5 text-[12px] text-[var(--color-text-tertiary)]">
           {t('workspace.files.refreshFailed', { reason: failureMessage(refreshFailure, t) })}
         </p>
       ) : null}
diff --git a/desktop/src/components/workspace/surfaces/textSelection.test.ts b/desktop/src/components/workspace/surfaces/textSelection.test.ts
index 0c64276f..bba5e7a0 100644
--- a/desktop/src/components/workspace/surfaces/textSelection.test.ts
+++ b/desktop/src/components/workspace/surfaces/textSelection.test.ts
@@ -97,9 +97,9 @@ describe('getSelectionPosition', () => {
       { focusNode: null, focusOffset: 0 } as unknown as Selection,
     )
 
-    // Centred on the selection (180) minus half the 158px menu, one menu height
+    // Centred on the selection (180) minus half the 140px menu, one 32px menu height
     // plus the 10px offset above the selection top.
-    expect(position).toEqual({ x: 101, y: 46 })
+    expect(position).toEqual({ x: 110, y: 58 })
   })
 
   it('keeps the menu inside the viewport when the selection hugs the left edge', () => {
diff --git a/desktop/src/components/workspace/surfaces/textSelection.ts b/desktop/src/components/workspace/surfaces/textSelection.ts
index a3a4cc57..0306c615 100644
--- a/desktop/src/components/workspace/surfaces/textSelection.ts
+++ b/desktop/src/components/workspace/surfaces/textSelection.ts
@@ -1,8 +1,8 @@
 import { getSelectionPopoverPosition } from '@/hooks/useSelectionPopoverDismiss'
 
 const SELECTION_MENU_OFFSET = 10
-const SELECTION_MENU_WIDTH = 158
-const SELECTION_MENU_HEIGHT = 44
+const SELECTION_MENU_WIDTH = 140
+const SELECTION_MENU_HEIGHT = 32
 
 export type WorkspaceTextSelection = {
   text: string
diff --git a/desktop/src/components/workspace/workspaceDiffHighlighter.ts b/desktop/src/components/workspace/workspaceDiffHighlighter.ts
index e6eaed31..8b1182f3 100644
--- a/desktop/src/components/workspace/workspaceDiffHighlighter.ts
+++ b/desktop/src/components/workspace/workspaceDiffHighlighter.ts
@@ -221,7 +221,6 @@ const workspaceDiffShikiTheme: ThemeRegistration = {
       },
     },
     { scope: ['markup.bold'], settings: { fontStyle: 'bold' } },
-    { scope: ['markup.italic'], settings: { fontStyle: 'italic' } },
   ],
 }
 
@@ -232,7 +231,7 @@ const workspaceCodeShikiTheme: ThemeRegistration = {
   bg: 'transparent',
   settings: [
     { settings: { foreground: 'var(--color-code-fg)', background: 'transparent' } },
-    { scope: ['comment', 'punctuation.definition.comment'], settings: { foreground: 'var(--color-code-comment)', fontStyle: 'italic' } },
+    { scope: ['comment', 'punctuation.definition.comment'], settings: { foreground: 'var(--color-code-comment)' } },
     { scope: ['string', 'string.quoted', 'string.template', 'string.other.link'], settings: { foreground: 'var(--color-code-string)' } },
     { scope: ['string.regexp'], settings: { foreground: 'var(--color-primary-container)' } },
     { scope: ['keyword', 'keyword.control', 'storage', 'storage.type', 'storage.modifier'], settings: { foreground: 'var(--color-code-keyword)' } },
diff --git a/desktop/src/dev/ComponentGallery.tsx b/desktop/src/dev/ComponentGallery.tsx
index 9575f5a4..a8a234b2 100644
--- a/desktop/src/dev/ComponentGallery.tsx
+++ b/desktop/src/dev/ComponentGallery.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react'
+import { Check, Ellipsis, Filter, Folder, RefreshCw, Settings, SlidersHorizontal, Trash2, X } from 'lucide-react'
 
 import { AgentTeamsPlanCard } from '@/components/agentTeams/AgentTeamsPlanCard'
 import { installTeamPlanGalleryFixture, TEAM_PLAN_GALLERY_SESSION } from './teamPlanGalleryFixture'
@@ -366,7 +367,7 @@ function Section({ title, note, children }: { title: string; note?: string; chil
   return (
     <section className="flex flex-col gap-3 border-b border-[var(--color-border)] py-6">
       <div>
-        <h2 className="text-base font-semibold text-[var(--color-text-primary)]">{title}</h2>
+        <h2 className="text-[15px] font-semibold text-[var(--color-text-primary)]">{title}</h2>
         {note && <p className="mt-0.5 text-xs text-[var(--color-text-tertiary)]">{note}</p>}
       </div>
       {children}
@@ -408,14 +409,14 @@ function SessionSurfacePreview({ kind }: { kind: 'main' | 'agent' }) {
             { key: 'project', content: <span>claude-code-haha</span> },
             { key: 'scope', content: <span>{isAgent ? 'commit-analysis / teams-analyst' : 'main'}</span> },
           ]}
-          actions={<IconButton icon="refresh" label={`Refresh ${kind} session`} size="sm" />}
+          actions={<IconButton icon={<RefreshCw size={14} strokeWidth={1.75} />} label={`Refresh ${kind} session`} size="sm" />}
         />
         <div className="min-h-0 flex-1 overflow-hidden px-8 py-6">
           <div className="mx-auto max-w-[900px] space-y-4">
-            <div className="max-w-[72%] rounded-[var(--radius-lg)] bg-[var(--color-surface-container)] p-4 text-sm">
+            <div className="ml-auto w-fit max-w-[82%] rounded-[var(--radius-lg)] bg-[var(--color-surface-user-msg)] px-3.5 py-2.5 text-[15px] text-[var(--color-text-primary)]">
               {isAgent ? 'Review the assigned module and report findings.' : 'Coordinate the task and keep Agent Teams in its workbench.'}
             </div>
-            <div className="ml-auto max-w-[72%] rounded-[var(--radius-lg)] bg-[var(--color-primary-container)] p-4 text-sm text-[var(--color-on-primary-container)]">
+            <div className="text-[15px] leading-[1.7] text-[var(--color-text-primary)]">
               {isAgent ? 'I am using the same session surface as the main chat.' : 'The main session keeps only its own activity.'}
             </div>
           </div>
@@ -495,7 +496,7 @@ export function ComponentGallery() {
     <div className="min-h-screen bg-[var(--color-background)] px-8 py-6 text-[var(--color-text-primary)]">
       <header className="sticky top-0 z-[var(--z-sticky)] -mx-8 mb-2 border-b border-[var(--color-border)] bg-[var(--color-background)] px-8 py-4">
         <div className="flex items-center justify-between gap-4">
-          <h1 className="text-lg font-bold">components/ui gallery</h1>
+          <h1 className="text-lg font-semibold">components/ui gallery</h1>
           <SegmentedControl
             items={THEMES.map((value) => ({ value, label: value }))}
             value={theme}
@@ -558,22 +559,22 @@ export function ComponentGallery() {
             <div key={tone} className="flex flex-wrap items-center gap-2">
               <code className="w-32 shrink-0 text-xs text-[var(--color-text-tertiary)]">{tone}</code>
               {ICON_SIZES.map((size) => (
-                <IconButton key={size} icon="settings" label={`Settings ${size}`} tone={tone} size={size} />
+                <IconButton key={size} icon={<Settings size={16} strokeWidth={1.75} />} label={`Settings ${size}`} tone={tone} size={size} />
               ))}
-              <IconButton icon="close" label="Filled" tone={tone} filled />
-              <IconButton icon="tune" label="Bordered" tone={tone} bordered />
-              <IconButton icon="refresh" label="Circle" tone={tone} shape="circle" />
-              <IconButton icon="sync" label="Loading" tone={tone} loading />
+              <IconButton icon={<X size={16} strokeWidth={1.75} />} label="Filled" tone={tone} filled />
+              <IconButton icon={<SlidersHorizontal size={16} strokeWidth={1.75} />} label="Bordered" tone={tone} bordered />
+              <IconButton icon={<RefreshCw size={16} strokeWidth={1.75} />} label="Circle" tone={tone} shape="circle" />
+              <IconButton icon={<RefreshCw size={16} strokeWidth={1.75} />} label="Loading" tone={tone} loading />
             </div>
           ))}
           <div className="flex flex-wrap items-center gap-2 border-t border-[var(--color-border)] pt-2">
             <code className="w-32 shrink-0 text-xs text-[var(--color-text-tertiary)]">states</code>
-            <IconButton icon="delete" label="Danger on hover only" tone="muted" hoverTone="danger" />
-            <IconButton icon="filter_alt" label="Pressed off" pressed={false} />
-            <IconButton icon="filter_alt" label="Pressed on" pressed />
-            <IconButton icon="close" label="Solid danger" tone="danger" solid size="2xs" shape="circle" />
-            <IconButton icon="check" label="Solid brand" tone="brand" solid />
-            <IconButton icon="more_horiz" label="Solid default" solid />
+            <IconButton icon={<Trash2 size={16} strokeWidth={1.75} />} label="Danger on hover only" tone="muted" hoverTone="danger" />
+            <IconButton icon={<Filter size={16} strokeWidth={1.75} />} label="Pressed off" pressed={false} />
+            <IconButton icon={<Filter size={16} strokeWidth={1.75} />} label="Pressed on" pressed />
+            <IconButton icon={<X size={12} strokeWidth={2} />} label="Solid danger" tone="danger" solid size="2xs" shape="circle" />
+            <IconButton icon={<Check size={16} strokeWidth={1.75} />} label="Solid brand" tone="brand" solid />
+            <IconButton icon={<Ellipsis size={16} strokeWidth={1.75} />} label="Solid default" solid />
           </div>
           {/* `solid` has to stay legible over arbitrary content — this strip
               stands in for a user-supplied image behind a remove badge. */}
@@ -582,8 +583,8 @@ export function ComponentGallery() {
             style={{ backgroundImage: 'linear-gradient(45deg, #8b5cf6, #ec4899, #f59e0b)' }}
           >
             <code className="w-32 shrink-0 text-xs text-white">solid over image</code>
-            <IconButton icon="close" label="Remove" tone="danger" solid size="2xs" shape="circle" />
-            <IconButton icon="close" label="Remove tinted" tone="danger" filled size="2xs" shape="circle" />
+            <IconButton icon={<X size={12} strokeWidth={2} />} label="Remove" tone="danger" solid size="2xs" shape="circle" />
+            <IconButton icon={<X size={12} strokeWidth={2} />} label="Remove tinted" tone="danger" filled size="2xs" shape="circle" />
           </div>
           <div
             className="flex flex-wrap items-center gap-2 rounded-[var(--radius-md)] bg-[var(--color-surface-sidebar)] p-2"
@@ -592,7 +593,7 @@ export function ComponentGallery() {
             {/* The sidebar hover token differs from surface-hover in all three
                 themes; hover these against the sidebar fill to check it. */}
             {ICON_TONES.map((tone) => (
-              <IconButton key={tone} icon="folder" label={`Sidebar ${tone}`} tone={tone} surface="sidebar" />
+              <IconButton key={tone} icon={<Folder size={16} strokeWidth={1.75} />} label={`Sidebar ${tone}`} tone={tone} surface="sidebar" />
             ))}
           </div>
         </div>
diff --git a/desktop/src/features/pets/PetApp.tsx b/desktop/src/features/pets/PetApp.tsx
index e381f11e..89b1cadf 100644
--- a/desktop/src/features/pets/PetApp.tsx
+++ b/desktop/src/features/pets/PetApp.tsx
@@ -705,7 +705,7 @@ export function PetApp() {
                 void persistPreferences({ showTaskPanel: false })
               }}
             >
-              <ChevronDown size={16} aria-hidden="true" />
+              <ChevronDown size={16} strokeWidth={1.75} aria-hidden="true" />
             </button>
           </section>
         )}
diff --git a/desktop/src/features/pets/PetSettings.tsx b/desktop/src/features/pets/PetSettings.tsx
index 49aa77f8..dcbdbe0d 100644
--- a/desktop/src/features/pets/PetSettings.tsx
+++ b/desktop/src/features/pets/PetSettings.tsx
@@ -7,9 +7,9 @@ import {
   FolderOpen,
   Grid3X3,
   ImageIcon,
+  Palette,
   Plus,
   RefreshCw,
-  Sparkles,
 } from 'lucide-react'
 import {
   desktopUiPreferencesApi,
@@ -20,12 +20,17 @@ import actionSheetGuideZh from '../../assets/pets/action-sheet-guide.zh.png'
 import { useSettingsStore } from '../../stores/settingsStore'
 import { Badge } from '@/components/ui/Badge'
 import { Button } from '@/components/ui/Button'
-import { Card } from '@/components/ui/Card'
 import { EmptyState } from '@/components/ui/EmptyState'
 import { ErrorState } from '@/components/ui/ErrorState'
 import { LoadingState } from '@/components/ui/LoadingState'
-import { Switch } from '@/components/ui/Switch'
 import { Modal } from '@/components/ui/Modal'
+import {
+  SettingsGroup,
+  SettingsPageHeader,
+  SettingsRow,
+  SettingsSection,
+  SettingsSwitchRow,
+} from '@/components/settings/SettingsSection'
 import { useTranslation, type TranslationKey } from '../../i18n'
 import { getDesktopHost } from '../../lib/desktopHost'
 import { BUILTIN_PETS } from './builtinPets'
@@ -346,32 +351,33 @@ export function PetSettings() {
   const pets: readonly PetDescriptor[] = [...BUILTIN_PETS, ...customPets]
 
   return (
-    <div className="mx-auto w-full max-w-4xl space-y-6 pb-8">
-      <header>
-        <h1 className="text-[24px] font-semibold leading-tight text-[var(--color-text-primary)]" style={{ fontFamily: 'var(--font-headline)' }}>{t('settings.pets.title')}</h1>
-        <p className="mt-1.5 text-[13.5px] leading-6 text-[var(--color-text-secondary)]">{t('settings.pets.subtitle')}</p>
-      </header>
+    <div className="w-full min-w-0">
+      <SettingsPageHeader title={t('settings.pets.title')} description={t('settings.pets.subtitle')} />
 
       {loading ? (
-        <LoadingState label={t('settings.pets.loading')} variant="dashed" size="md" />
+        <div className="mt-7">
+          <LoadingState label={t('settings.pets.loading')} variant="dashed" size="md" />
+        </div>
       ) : loadError || !preferences ? (
-        <ErrorState
-          title={t('settings.pets.loadError')}
-          onRetry={() => void load()}
-          retryLabel={t('settings.pets.retry')}
-          size="md"
-        />
+        <div className="mt-7">
+          <ErrorState
+            title={t('settings.pets.loadError')}
+            onRetry={() => void load()}
+            retryLabel={t('settings.pets.retry')}
+            size="md"
+          />
+        </div>
       ) : (
         <>
-          <Card as="section" radius="lg" padding="lg">
-            <ToggleRow
-              label={t('settings.pets.enableTitle')}
+          <SettingsGroup className="mt-7">
+            <SettingsSwitchRow
+              title={t('settings.pets.enableTitle')}
               description={t('settings.pets.enableDescription')}
               checked={preferences.enabled}
               disabled={!desktopAvailable}
               onChange={(checked) => void updatePreferences({ enabled: checked }, true)}
             />
-          </Card>
+          </SettingsGroup>
 
           <PetCatalog
             title={t('settings.pets.builtInTitle')}
@@ -382,14 +388,14 @@ export function PetSettings() {
             onSelect={(id) => void updatePreferences({ selectedPetId: id }, preferences.enabled && desktopAvailable)}
           />
 
-          <section className="space-y-3">
-            <div className="flex items-center justify-between gap-3">
-              <h2 className="text-base font-semibold text-[var(--color-text-primary)]" style={{ fontFamily: 'var(--font-headline)' }}>{t('settings.pets.customTitle')}</h2>
-              <div className="flex items-center gap-2">
+          <SettingsSection
+            title={t('settings.pets.customTitle')}
+            action={(
+              <>
                 <Button
                   variant="secondary"
                   size="sm"
-                  icon={<Plus size={14} aria-hidden="true" />}
+                  icon={<Plus size={14} strokeWidth={1.75} aria-hidden="true" />}
                   disabled={!desktopAvailable}
                   onClick={() => {
                     setCreateError(null)
@@ -403,13 +409,14 @@ export function PetSettings() {
                 <Button
                   variant="ghost"
                   size="sm"
-                  icon={<RefreshCw size={14} aria-hidden="true" />}
+                  icon={<RefreshCw size={14} strokeWidth={1.75} aria-hidden="true" />}
                   onClick={() => void load()}
                 >
                   {t('settings.pets.refresh')}
                 </Button>
-              </div>
-            </div>
+              </>
+            )}
+          >
             {customPets.length > 0 ? (
               <PetCatalog
                 pets={customPets}
@@ -422,71 +429,72 @@ export function PetSettings() {
               <EmptyState description={t('settings.pets.customEmpty')} variant="dashed" size="md" />
             )}
             {invalidPetCount > 0 && (
-              <p role="status" className="text-xs text-[var(--color-warning)]">
+              <p role="status" className="mt-2 text-xs text-[var(--color-on-warning-container)]">
                 {t('settings.pets.invalidCustom', { count: invalidPetCount })}
               </p>
             )}
-          </section>
+          </SettingsSection>
 
-          <Card as="section" radius="lg" padding="lg" className="space-y-4">
-            <h2 className="text-base font-semibold text-[var(--color-text-primary)]" style={{ fontFamily: 'var(--font-headline)' }}>{t('settings.pets.appearanceTitle')}</h2>
-            <label className="block">
-              <span className="flex items-center justify-between gap-3 text-sm font-medium text-[var(--color-text-primary)]">
-                <span>{t('settings.pets.size')}</span>
-                <output htmlFor="pet-size">{preferences.size}px</output>
-              </span>
-              <span className="mt-0.5 block text-xs text-[var(--color-text-secondary)]">{t('settings.pets.sizeDescription')}</span>
-              <input
-                id="pet-size"
-                aria-label={t('settings.pets.size')}
-                className="mt-3 w-full accent-[var(--color-brand)]"
-                type="range"
-                min={PET_SIZE_MIN}
-                max={PET_SIZE_MAX}
-                step={8}
-                value={preferences.size}
-                onChange={(event) => void updatePreferences({ size: Number(event.target.value) })}
-              />
-            </label>
-            <div className="border-t border-[var(--color-border-separator)] pt-4">
-              <ToggleRow
-                label={t('settings.pets.motion')}
+          <SettingsSection title={t('settings.pets.appearanceTitle')}>
+            <SettingsGroup>
+              <SettingsRow
+                title={t('settings.pets.size')}
+                description={t('settings.pets.sizeDescription')}
+                htmlFor="pet-size"
+                layout="inline"
+                footer={(
+                  <input
+                    id="pet-size"
+                    aria-label={t('settings.pets.size')}
+                    className="w-full accent-[var(--color-brand)]"
+                    type="range"
+                    min={PET_SIZE_MIN}
+                    max={PET_SIZE_MAX}
+                    step={8}
+                    value={preferences.size}
+                    onChange={(event) => void updatePreferences({ size: Number(event.target.value) })}
+                  />
+                )}
+              >
+                <output htmlFor="pet-size" className="font-mono text-xs tabular-nums text-[var(--color-text-secondary)]">
+                  {preferences.size}px
+                </output>
+              </SettingsRow>
+              <SettingsSwitchRow
+                title={t('settings.pets.motion')}
                 description={t('settings.pets.motionDescription')}
                 checked={preferences.motionEnabled}
                 onChange={(checked) => void updatePreferences({ motionEnabled: checked })}
               />
-            </div>
-            <div className="border-t border-[var(--color-border-separator)] pt-4">
-              <ToggleRow
-                label={t('settings.pets.showTaskPanel')}
+              <SettingsSwitchRow
+                title={t('settings.pets.showTaskPanel')}
                 description={t('settings.pets.showTaskPanelDescription')}
                 checked={preferences.showTaskPanel}
                 onChange={(checked) => void updatePreferences({ showTaskPanel: checked })}
               />
-            </div>
-          </Card>
+            </SettingsGroup>
+          </SettingsSection>
 
-          <Card as="section" radius="lg" padding="lg" className="flex items-center justify-between gap-5">
-            <div className="min-w-0">
-              <h2 className="text-sm font-medium text-[var(--color-text-primary)]" style={{ fontFamily: 'var(--font-headline)' }}>{t('settings.pets.folderTitle')}</h2>
-              <p className="mt-1 break-all font-mono text-xs text-[var(--color-text-secondary)]">
-                {t('settings.pets.folderDescription')}
-              </p>
-            </div>
-            <Button
-              variant="secondary"
-              size="sm"
-              icon={<FolderOpen size={15} aria-hidden="true" />}
-              disabled={!desktopAvailable}
-              onClick={() => void handleOpenFolder()}
+          <SettingsGroup className="mt-7">
+            <SettingsRow
+              title={t('settings.pets.folderTitle')}
+              description={<span className="break-all">{t('settings.pets.folderDescription')}</span>}
             >
-              {t('settings.pets.openFolder')}
-            </Button>
-          </Card>
+              <Button
+                variant="secondary"
+                size="sm"
+                icon={<FolderOpen size={14} strokeWidth={1.75} aria-hidden="true" />}
+                disabled={!desktopAvailable}
+                onClick={() => void handleOpenFolder()}
+              >
+                {t('settings.pets.openFolder')}
+              </Button>
+            </SettingsRow>
+          </SettingsGroup>
         </>
       )}
 
-      {saveError && <p role="alert" className="text-sm text-[var(--color-error)]">{saveError}</p>}
+      {saveError && <p role="alert" className="mt-4 text-[13px] text-[var(--color-error)]">{saveError}</p>}
 
       <Modal
         open={createOpen}
@@ -520,11 +528,11 @@ export function PetSettings() {
       >
         {createMethod === null ? (
           <div className="space-y-3">
-            <p className="text-sm leading-6 text-[var(--color-text-secondary)]">
+            <p className="text-[13px] leading-5 text-[var(--color-text-secondary)]">
               {t('settings.pets.createMethodIntro')}
             </p>
             <CreationMethodCard
-              icon={<ImageIcon size={20} aria-hidden="true" />}
+              icon={<ImageIcon size={18} strokeWidth={1.75} aria-hidden="true" />}
               title={t('settings.pets.createImageTitle')}
               description={t('settings.pets.createImageDescription')}
               detail={t('settings.pets.createImageDetail')}
@@ -532,7 +540,7 @@ export function PetSettings() {
               onClick={() => selectCreateMethod('image')}
             />
             <CreationMethodCard
-              icon={<Sparkles size={20} aria-hidden="true" />}
+              icon={<Palette size={18} strokeWidth={1.75} aria-hidden="true" />}
               title={t('settings.pets.createAiTitle')}
               description={t('settings.pets.createAiDescription')}
               detail={t('settings.pets.createAiDetail')}
@@ -540,7 +548,7 @@ export function PetSettings() {
               onClick={() => selectCreateMethod('guided')}
             />
             <CreationMethodCard
-              icon={<Grid3X3 size={20} aria-hidden="true" />}
+              icon={<Grid3X3 size={18} strokeWidth={1.75} aria-hidden="true" />}
               title={t('settings.pets.createAtlasTitle')}
               description={t('settings.pets.createAtlasDescription')}
               detail={t('settings.pets.createAtlasDetail')}
@@ -552,7 +560,7 @@ export function PetSettings() {
             <Button
               variant="link"
               size="sm"
-              icon={<ArrowLeft size={15} aria-hidden="true" />}
+              icon={<ArrowLeft size={14} strokeWidth={1.75} aria-hidden="true" />}
               onClick={() => {
                 setCreateMethod(null)
                 setCreateError(null)
@@ -562,7 +570,7 @@ export function PetSettings() {
               {t('settings.pets.createBack')}
             </Button>
 
-            <p className="text-sm leading-6 text-[var(--color-text-secondary)]">
+            <p className="text-[13px] leading-5 text-[var(--color-text-secondary)]">
               {t('settings.pets.guide.intro')}
             </p>
 
@@ -570,8 +578,10 @@ export function PetSettings() {
               <p className="text-xs leading-5 text-[var(--color-text-secondary)]">
                 {t('settings.pets.guide.step1Body')}
               </p>
-              <div className="mt-2 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)]">
-                <pre className="max-h-56 overflow-y-auto whitespace-pre-wrap px-3 py-2.5 text-[11.5px] leading-5 text-[var(--color-text-primary)]" style={{ fontFamily: 'var(--font-mono, ui-monospace, monospace)' }}>
+              <div className="mt-2 rounded-[var(--radius-md)] bg-[var(--color-surface-container)]">
+                {/* Body face, not mono: the prompt is prose (Chinese in zh), and
+                    CJK set in a monospace face picks up typewriter gaps. */}
+                <pre className="max-h-56 overflow-y-auto whitespace-pre-wrap px-3 py-2.5 text-xs leading-5 text-[var(--color-text-primary)]" style={{ fontFamily: 'var(--font-body)' }}>
                   {t('settings.pets.guide.prompt')}
                 </pre>
               </div>
@@ -580,8 +590,8 @@ export function PetSettings() {
                   size="sm"
                   variant="secondary"
                   icon={promptCopied
-                    ? <Check size={14} aria-hidden="true" />
-                    : <Copy size={14} aria-hidden="true" />}
+                    ? <Check size={14} strokeWidth={1.75} aria-hidden="true" />
+                    : <Copy size={14} strokeWidth={1.75} aria-hidden="true" />}
                   onClick={() => void handleCopyPrompt()}
                 >
                   {promptCopied
@@ -589,7 +599,7 @@ export function PetSettings() {
                     : t('settings.pets.guide.promptCopy')}
                 </Button>
               </div>
-              <p className="mt-2 text-[11px] leading-4 text-[var(--color-text-tertiary)]">
+              <p className="mt-2 text-xs leading-4 text-[var(--color-text-tertiary)]">
                 {t('settings.pets.guide.step1Tools')}
               </p>
             </GuideStep>
@@ -605,14 +615,14 @@ export function PetSettings() {
                   'settings.pets.guide.check3',
                 ] as const).map((key) => (
                   <li key={key} className="flex items-start gap-1.5 text-xs leading-5 text-[var(--color-text-secondary)]">
-                    <Check size={13} className="mt-0.5 flex-none text-[var(--color-brand)]" aria-hidden="true" />
+                    <Check size={14} strokeWidth={1.75} className="mt-0.5 flex-none text-[var(--color-success)]" aria-hidden="true" />
                     <span>{t(key)}</span>
                   </li>
                 ))}
               </ul>
               <button
                 type="button"
-                className="mt-2.5 block w-full overflow-hidden rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)]"
+                className="mt-2.5 block w-full overflow-hidden rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]"
                 onClick={() => setGuideExpanded((current) => !current)}
                 aria-label={t('settings.pets.guide.templateAlt')}
               >
@@ -626,12 +636,12 @@ export function PetSettings() {
                 <Button
                   size="sm"
                   variant="secondary"
-                  icon={<Download size={14} aria-hidden="true" />}
+                  icon={<Download size={14} strokeWidth={1.75} aria-hidden="true" />}
                   onClick={() => void handleSaveGuide()}
                 >
                   {t('settings.pets.guide.saveTemplate')}
                 </Button>
-                <span className="text-[11px] leading-4 text-[var(--color-text-tertiary)]">
+                <span className="text-xs leading-4 text-[var(--color-text-tertiary)]">
                   {guideExpanded
                     ? t('settings.pets.guide.templateCollapse')
                     : t('settings.pets.guide.templateExpand')}
@@ -650,7 +660,7 @@ export function PetSettings() {
             <Button
               variant="link"
               size="sm"
-              icon={<ArrowLeft size={15} aria-hidden="true" />}
+              icon={<ArrowLeft size={14} strokeWidth={1.75} aria-hidden="true" />}
               disabled={createBusy}
               onClick={() => {
                 if (createMethod === 'guided') {
@@ -666,51 +676,51 @@ export function PetSettings() {
                 ? t('settings.pets.guide.backToSteps')
                 : t('settings.pets.createBack')}
             </Button>
-            <div className="rounded-[var(--radius-lg)] bg-[var(--color-surface-hover)] px-3.5 py-3">
-              <h3 className="text-sm font-semibold text-[var(--color-text-primary)]" style={{ fontFamily: 'var(--font-headline)' }}>
+            <div className="rounded-[var(--radius-md)] bg-[var(--color-surface-container)] px-3.5 py-3">
+              <h3 className="text-[13px] font-semibold text-[var(--color-text-primary)]">
                 {createMethod === 'image' ? t('settings.pets.createImageTitle')
                   : createMethod === 'guided' ? t('settings.pets.createAiTitle')
                     : t('settings.pets.createAtlasTitle')}
               </h3>
-              <p className="mt-1 text-xs leading-5 text-[var(--color-text-secondary)]">
+              <p className="mt-1 text-xs leading-5 text-[var(--color-text-tertiary)]">
                 {createMethod === 'image'
                   ? t('settings.pets.createImageHint')
                   : t('settings.pets.createAtlasHint')}
               </p>
             </div>
-            <label className="block space-y-1.5 text-sm text-[var(--color-text-primary)]">
+            <label className="block space-y-1.5 text-[13px] text-[var(--color-text-primary)]">
               <span className="font-medium">{t('settings.pets.createId')}</span>
               <input
-                className="w-full rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface)] px-3 py-2 outline-none focus:border-[var(--color-border-focus)]"
+                className="w-full rounded-[var(--radius-md)] border border-[var(--color-outline)] bg-[var(--color-surface-container-lowest)] px-3 py-2 text-[13px] outline-none placeholder:text-[var(--color-text-tertiary)] focus:border-[var(--color-border-focus)]"
                 aria-label={t('settings.pets.createId')}
                 value={createForm.slug}
                 maxLength={73}
                 placeholder="moon-cat"
                 onChange={(event) => setCreateForm((current) => ({ ...current, slug: event.target.value }))}
               />
-              <span className="block text-xs text-[var(--color-text-secondary)]">{t('settings.pets.createIdHint')}</span>
+              <span className="block text-xs text-[var(--color-text-tertiary)]">{t('settings.pets.createIdHint')}</span>
             </label>
-            <label className="block space-y-1.5 text-sm text-[var(--color-text-primary)]">
+            <label className="block space-y-1.5 text-[13px] text-[var(--color-text-primary)]">
               <span className="font-medium">{t('settings.pets.createName')}</span>
               <input
-                className="w-full rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface)] px-3 py-2 outline-none focus:border-[var(--color-border-focus)]"
+                className="w-full rounded-[var(--radius-md)] border border-[var(--color-outline)] bg-[var(--color-surface-container-lowest)] px-3 py-2 text-[13px] outline-none placeholder:text-[var(--color-text-tertiary)] focus:border-[var(--color-border-focus)]"
                 aria-label={t('settings.pets.createName')}
                 value={createForm.displayName}
                 maxLength={80}
                 onChange={(event) => setCreateForm((current) => ({ ...current, displayName: event.target.value }))}
               />
             </label>
-            <label className="block space-y-1.5 text-sm text-[var(--color-text-primary)]">
+            <label className="block space-y-1.5 text-[13px] text-[var(--color-text-primary)]">
               <span className="font-medium">{t('settings.pets.createDescription')}</span>
               <textarea
-                className="min-h-24 w-full resize-y rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface)] px-3 py-2 outline-none focus:border-[var(--color-border-focus)]"
+                className="min-h-24 w-full resize-y rounded-[var(--radius-md)] border border-[var(--color-outline)] bg-[var(--color-surface-container-lowest)] px-3 py-2 text-[13px] outline-none placeholder:text-[var(--color-text-tertiary)] focus:border-[var(--color-border-focus)]"
                 aria-label={t('settings.pets.createDescription')}
                 value={createForm.description}
                 maxLength={500}
                 onChange={(event) => setCreateForm((current) => ({ ...current, description: event.target.value }))}
               />
             </label>
-            {createError && <p role="alert" className="text-sm text-[var(--color-error)]">{createError}</p>}
+            {createError && <p role="alert" className="text-[13px] text-[var(--color-error)]">{createError}</p>}
           </div>
         )}
       </Modal>
@@ -728,15 +738,12 @@ function GuideStep({
   children: ReactNode
 }) {
   return (
-    <section className="rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface)] p-3.5">
+    <section className="rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] p-3.5">
       <div className="flex items-center gap-2">
-        <span className="flex h-5 w-5 flex-none items-center justify-center rounded-full bg-[var(--color-brand)] text-[11px] font-semibold text-[var(--color-on-primary)]">
+        <span className="flex h-5 w-5 flex-none items-center justify-center rounded-full bg-[var(--color-surface-container)] text-[11px] font-medium tabular-nums text-[var(--color-text-secondary)]">
           {index}
         </span>
-        <h4
-          className="text-sm font-semibold text-[var(--color-text-primary)]"
-          style={{ fontFamily: 'var(--font-headline)' }}
-        >
+        <h4 className="text-[13px] font-semibold text-[var(--color-text-primary)]">
           {title}
         </h4>
       </div>
@@ -765,20 +772,20 @@ function CreationMethodCard({
   return (
     <button
       type="button"
-      className="group flex w-full items-start gap-3 rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface)] p-4 text-left transition-[border-color,background-color,transform] enabled:hover:-translate-y-0.5 enabled:hover:border-[var(--color-primary-fixed-dim)] enabled:hover:bg-[var(--color-surface-hover)] motion-reduce:transition-none motion-reduce:enabled:hover:translate-y-0 enabled:active:translate-y-0 disabled:cursor-not-allowed disabled:opacity-55"
+      className="group flex w-full items-start gap-3 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] p-4 text-left transition-[border-color,background-color] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] enabled:hover:border-[var(--color-outline)] enabled:hover:bg-[var(--color-surface-hover)] motion-reduce:transition-none disabled:cursor-not-allowed disabled:opacity-55"
       disabled={disabled}
       onClick={onClick}
     >
-      <span className="flex h-9 w-9 flex-none items-center justify-center rounded-[var(--radius-md)] bg-[var(--color-brand-soft)] text-[var(--color-brand)]">
+      <span className="flex h-8 w-8 flex-none items-center justify-center rounded-[var(--radius-md)] bg-[var(--color-surface-container)] text-[var(--color-text-secondary)]">
         {icon}
       </span>
       <span className="min-w-0 flex-1">
         <span className="flex flex-wrap items-center gap-2">
-          <span className="text-sm font-semibold text-[var(--color-text-primary)]">{title}</span>
-          {badge && <Badge tone="brand" size="sm">{badge}</Badge>}
+          <span className="text-[13px] font-medium text-[var(--color-text-primary)]">{title}</span>
+          {badge && <Badge tone="neutral" size="sm">{badge}</Badge>}
         </span>
         <span className="mt-1 block text-xs leading-5 text-[var(--color-text-secondary)]">{description}</span>
-        <span className="mt-1 block text-[11px] leading-4 text-[var(--color-text-tertiary)]">{detail}</span>
+        <span className="mt-0.5 block text-xs leading-4 text-[var(--color-text-tertiary)]">{detail}</span>
       </span>
     </button>
   )
@@ -800,76 +807,52 @@ function PetCatalog({
   onSelect: (id: string) => void
 }) {
   const t = useTranslation()
-  return (
-    <section className="space-y-3">
-      {title && <h2 className="text-base font-semibold text-[var(--color-text-primary)]" style={{ fontFamily: 'var(--font-headline)' }}>{title}</h2>}
-      <div className="grid grid-cols-1 gap-3 lg:grid-cols-2">
-        {pets.map((pet) => {
-          const selected = pet.id === selectedPetId
-          return (
-            <article
-              key={pet.id}
-              className={`flex items-center gap-4 rounded-[var(--radius-xl)] p-4 transition-[background-color,border-color] duration-150 ease-out ${
-                selected
-                  ? 'border-[1.5px] border-[var(--color-primary-fixed-dim)] bg-[var(--color-surface-hover)]'
-                  : 'border border-[var(--color-border)] bg-[var(--color-surface)]'
-              }`}
+  const grid = (
+    <div className="grid grid-cols-1 gap-3 lg:grid-cols-2">
+      {pets.map((pet) => {
+        const selected = pet.id === selectedPetId
+        return (
+          <article
+            key={pet.id}
+            className={`flex items-center gap-3 rounded-[var(--radius-lg)] p-3 transition-[background-color,border-color] duration-150 ease-out ${
+              selected
+                ? 'border-[1.5px] border-[var(--color-primary-fixed-dim)] bg-[var(--color-surface-hover)]'
+                : 'border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)]'
+            }`}
+          >
+            <PetPreview pet={pet} />
+            <div className="min-w-0 flex-1">
+              <h3 className="text-[13px] font-medium text-[var(--color-text-primary)]">{pet.displayName}</h3>
+              <p className="mt-0.5 text-xs leading-[1.5] text-[var(--color-text-tertiary)]">
+                {pet.source === 'builtin' ? t(pet.descriptionKey) : pet.description}
+              </p>
+            </div>
+            <Button
+              variant={selected ? 'ghost' : 'secondary'}
+              size="sm"
+              disabled={selected}
+              aria-pressed={selected}
+              onClick={() => onSelect(pet.id)}
             >
-              <PetPreview pet={pet} />
-              <div className="min-w-0 flex-1">
-                <h3 className="text-sm font-semibold text-[var(--color-text-primary)]" style={{ fontFamily: 'var(--font-headline)' }}>{pet.displayName}</h3>
-                <p className="mt-1 text-xs leading-5 text-[var(--color-text-secondary)]">
-                  {pet.source === 'builtin' ? t(pet.descriptionKey) : pet.description}
-                </p>
-              </div>
-              <Button
-                variant={selected ? 'ghost' : 'secondary'}
-                size="sm"
-                disabled={selected}
-                aria-pressed={selected}
-                onClick={() => onSelect(pet.id)}
-              >
-                {selected ? selectedLabel : selectLabel}
-              </Button>
-            </article>
-          )
-        })}
-      </div>
-    </section>
+              {selected ? selectedLabel : selectLabel}
+            </Button>
+          </article>
+        )
+      })}
+    </div>
   )
+  return title ? <SettingsSection title={title}>{grid}</SettingsSection> : grid
 }
 
 function PetPreview({ pet }: { pet: PetDescriptor }) {
   return (
     <div
-      className="flex h-16 w-16 flex-none items-center justify-center rounded-[var(--radius-2xl)]"
+      className="flex h-16 w-16 flex-none items-center justify-center rounded-[var(--radius-md)] bg-[var(--color-surface-container)]"
+      // A built-in pet keeps its own faint tint: the accent is part of the
+      // pet's identity data, not a chrome color.
       style={{ backgroundColor: pet.source === 'builtin' ? `${pet.accent}18` : undefined }}
     >
       <PetRenderer pet={pet} state="idle" size={54} motionEnabled={false} />
     </div>
   )
 }
-
-function ToggleRow({
-  label,
-  description,
-  checked,
-  disabled = false,
-  onChange,
-}: {
-  label: string
-  description: string
-  checked: boolean
-  disabled?: boolean
-  onChange: (checked: boolean) => void
-}) {
-  return (
-    <Switch
-      label={label}
-      description={description}
-      checked={checked}
-      disabled={disabled}
-      onChange={onChange}
-    />
-  )
-}
diff --git a/desktop/src/features/voiceInput/VoiceInputButton.tsx b/desktop/src/features/voiceInput/VoiceInputButton.tsx
index 9e23fd19..fe88643b 100644
--- a/desktop/src/features/voiceInput/VoiceInputButton.tsx
+++ b/desktop/src/features/voiceInput/VoiceInputButton.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
+import { Mic, Square, X } from 'lucide-react'
 import { Button } from '@/components/ui/Button'
 import { IconButton } from '@/components/ui/IconButton'
 import { useTranslation } from '@/i18n'
@@ -112,7 +113,9 @@ export function VoiceInputButton({ dictation, blocked = false, mobile = false }:
           />
         )}
         <IconButton
-          icon={recording ? 'stop' : 'mic'}
+          icon={recording
+            ? <Square size={mobile ? 18 : 14} strokeWidth={1.75} fill="currentColor" aria-hidden="true" />
+            : <Mic size={mobile ? 20 : 16} strokeWidth={1.75} aria-hidden="true" />}
           label={label}
           size={size}
           tone={recording ? 'danger' : 'secondary'}
@@ -150,7 +153,7 @@ export function VoiceInputButton({ dictation, blocked = false, mobile = false }:
             onClick={dictation.dismissIssue}
             className="shrink-0 rounded-[var(--radius-sm)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]"
           >
-            <span className="material-symbols-outlined text-[14px]" aria-hidden="true">close</span>
+            <X size={14} strokeWidth={1.75} aria-hidden="true" />
           </button>
         </div>
       )}
diff --git a/desktop/src/i18n/locales/en.ts b/desktop/src/i18n/locales/en.ts
index 2a8f2339..cce5ee46 100644
--- a/desktop/src/i18n/locales/en.ts
+++ b/desktop/src/i18n/locales/en.ts
@@ -676,6 +676,7 @@ export const en = {
   'sidebar.worktree': 'worktree',
   'sidebar.sessionRunning': 'Session running',
   'sidebar.sessionNeedsAttention': 'Waiting for your approval',
+  'sidebar.sessionStatus.attention': 'Needs you',
   'sidebar.taskView': 'Task view',
   'sidebar.tasks': 'Tasks',
   'sidebar.taskGroup.running': 'In progress',
@@ -859,6 +860,9 @@ export const en = {
   'workspace.terminal.restart': 'Restart terminal',
   'workspace.terminal.exited': 'This terminal has exited.',
   'workspace.review.sourceLabel': 'Comparison',
+  'workspace.review.fileCount': '{count} files',
+  'workspace.review.diffLayout': 'Diff layout',
+  'workspace.review.newFile': 'New file',
   'workspace.review.sourceUnstaged': 'Unstaged',
   'workspace.review.sourceStaged': 'Staged',
   'workspace.review.sourceUncommitted': 'All uncommitted',
@@ -989,6 +993,7 @@ export const en = {
   'settings.tab.permissions': 'Permissions',
   'settings.tab.activity': 'Token usage',
   'settings.tab.general': 'General',
+  'settings.general.pageDescription': 'Appearance, language, and the defaults Agent sessions start with.',
   'settings.tab.h5Access': 'H5 Access',
   'settings.tab.terminal': 'Terminal',
   'settings.tab.skills': 'Skills',
@@ -2570,6 +2575,15 @@ Row 9, all 8 cells: continuing from straight down, turning left through lower-le
   // ─── Empty Session ──────────────────────────────────────
   'empty.title': 'New session',
   'empty.subtitle': 'Start a fresh coding session. Claude is ready to help you build, debug, and architect your project.',
+  'empty.heroTitle': 'What should we work on in {project} today?',
+  'empty.heroTitleNoProject': 'What should we work on today?',
+  'empty.heroSubtitle': 'Claude can read your project, edit code and run commands.',
+  'empty.suggestions': 'Suggestions',
+  'empty.suggestion.explainRepo': 'Explain how this repo is structured',
+  'empty.suggestion.fixTests': 'Fix the failing tests',
+  'empty.suggestion.reviewChanges': 'Review my uncommitted changes',
+  'empty.suggestion.newFeature': 'Build a new feature',
+  'empty.recentTitle': 'Recent sessions',
   'empty.placeholder': 'Ask anything...',
   'empty.addFiles': 'Add files or photos',
   'empty.slashCommands': 'Slash commands',
@@ -3060,6 +3074,30 @@ Row 9, all 8 cells: continuing from straight down, turning left through lower-le
   'toolGroup.searchedWeb': 'searched the web',
   'toolGroup.fetchedOne': 'fetched a page',
   'toolGroup.fetchedMany': 'fetched {count} pages',
+  'toolGroup.separator': ', ',
+  'toolGroup.updatedTodos': 'updated the todo list',
+  'toolGroup.managedTasks': 'managed tasks',
+  'toolVerb.search': 'Search',
+  'toolVerb.read': 'Read',
+  'toolVerb.edit': 'Edit',
+  'toolVerb.create': 'Create',
+  'toolVerb.run': 'Run',
+  'toolVerb.updateTodos': 'Update todos',
+  'toolVerb.createTask': 'Create task',
+  'toolVerb.updateTask': 'Update task',
+  'toolVerb.viewTasks': 'View tasks',
+  'toolVerb.searchWeb': 'Search web',
+  'toolVerb.fetchWeb': 'Fetch page',
+  'toolVerb.agent': 'Dispatch agent',
+  'toolVerb.skill': 'Use skill',
+  'tool.exitCode': 'Exit {code}',
+  'tool.fileCountSingular': '{count} file',
+  'tool.fileCountPlural': '{count} files',
+  'tool.matchCountSingular': '{count} match',
+  'tool.matchCountPlural': '{count} matches',
+  'tool.itemCountSingular': '{count} item',
+  'tool.itemCountPlural': '{count} items',
+  'agentStatus.toolUses': '{count} tool calls',
 
   // ─── Tasks ──────────────────────────────────────
   'tasks.completed': 'Tasks completed',
diff --git a/desktop/src/i18n/locales/jp.ts b/desktop/src/i18n/locales/jp.ts
index 4922b208..e444ec7e 100644
--- a/desktop/src/i18n/locales/jp.ts
+++ b/desktop/src/i18n/locales/jp.ts
@@ -677,6 +677,7 @@ export const jp: Record<TranslationKey, string> = {
   'sidebar.worktree': 'worktree',
   'sidebar.sessionRunning': 'セッション実行中',
   'sidebar.sessionNeedsAttention': '承認待ち',
+  'sidebar.sessionStatus.attention': '確認待ち',
   'sidebar.taskView': 'タスクビュー',
   'sidebar.tasks': 'タスク',
   'sidebar.taskGroup.running': '実行中',
@@ -860,6 +861,9 @@ export const jp: Record<TranslationKey, string> = {
   'workspace.terminal.restart': 'ターミナルを再起動',
   'workspace.terminal.exited': 'このターミナルは終了しました。',
   'workspace.review.sourceLabel': '比較対象',
+  'workspace.review.fileCount': '{count} ファイル',
+  'workspace.review.diffLayout': 'Diff レイアウト',
+  'workspace.review.newFile': '新規ファイル',
   'workspace.review.sourceUnstaged': '未ステージ',
   'workspace.review.sourceStaged': 'ステージ済み',
   'workspace.review.sourceUncommitted': '未コミットすべて',
@@ -990,6 +994,7 @@ export const jp: Record<TranslationKey, string> = {
   'settings.tab.permissions': '権限',
   'settings.tab.activity': 'トークン使用量',
   'settings.tab.general': '一般',
+  'settings.general.pageDescription': '外観、言語、Agent の既定の動作。',
   'settings.tab.h5Access': 'H5 アクセス',
   'settings.tab.terminal': 'ターミナル',
   'settings.tab.skills': 'スキル',
@@ -2571,6 +2576,15 @@ export const jp: Record<TranslationKey, string> = {
   // ─── Empty Session ──────────────────────────────────────
   'empty.title': '新しいセッション',
   'empty.subtitle': '新しいコーディングセッションを開始します。Claude は、プロジェクトの構築、デバッグ、設計をお手伝いする準備ができています。',
+  'empty.heroTitle': '今日は {project} で何をしますか？',
+  'empty.heroTitleNoProject': '今日は何をしますか？',
+  'empty.heroSubtitle': 'Claude はプロジェクトを読み、コードを編集し、コマンドを実行できます。',
+  'empty.suggestions': 'おすすめ',
+  'empty.suggestion.explainRepo': 'このリポジトリの構成を説明して',
+  'empty.suggestion.fixTests': '失敗しているテストを直して',
+  'empty.suggestion.reviewChanges': '未コミットの変更をレビューして',
+  'empty.suggestion.newFeature': '新しい機能を作って',
+  'empty.recentTitle': '最近のセッション',
   'empty.placeholder': '何でも質問してください...',
   'empty.addFiles': 'ファイルまたは写真を追加',
   'empty.slashCommands': 'スラッシュコマンド',
@@ -3061,6 +3075,30 @@ export const jp: Record<TranslationKey, string> = {
   'toolGroup.searchedWeb': 'ウェブを検索しました',
   'toolGroup.fetchedOne': 'ページを 1 件取得しました',
   'toolGroup.fetchedMany': '{count} 件のページを取得しました',
+  'toolGroup.separator': '、',
+  'toolGroup.updatedTodos': 'タスクリストを更新',
+  'toolGroup.managedTasks': 'タスクを管理',
+  'toolVerb.search': '検索',
+  'toolVerb.read': '読み取り',
+  'toolVerb.edit': '編集',
+  'toolVerb.create': '作成',
+  'toolVerb.run': '実行',
+  'toolVerb.updateTodos': 'タスクリストを更新',
+  'toolVerb.createTask': 'タスクを作成',
+  'toolVerb.updateTask': 'タスクを更新',
+  'toolVerb.viewTasks': 'タスクを確認',
+  'toolVerb.searchWeb': 'ウェブ検索',
+  'toolVerb.fetchWeb': 'ページを取得',
+  'toolVerb.agent': 'サブエージェントを起動',
+  'toolVerb.skill': 'スキルを使用',
+  'tool.exitCode': '終了コード {code}',
+  'tool.fileCountSingular': '{count} ファイル',
+  'tool.fileCountPlural': '{count} ファイル',
+  'tool.matchCountSingular': '{count} 件',
+  'tool.matchCountPlural': '{count} 件',
+  'tool.itemCountSingular': '{count} 件',
+  'tool.itemCountPlural': '{count} 件',
+  'agentStatus.toolUses': '{count} 回呼び出し',
 
   // ─── Tasks ──────────────────────────────────────
   'tasks.completed': '完了したタスク',
diff --git a/desktop/src/i18n/locales/kr.ts b/desktop/src/i18n/locales/kr.ts
index f07a4236..6af10a63 100644
--- a/desktop/src/i18n/locales/kr.ts
+++ b/desktop/src/i18n/locales/kr.ts
@@ -679,6 +679,7 @@ export const kr: Record<TranslationKey, string> = {
   'sidebar.worktree': 'worktree',
   'sidebar.sessionRunning': '세션 실행 중',
   'sidebar.sessionNeedsAttention': '승인 대기 중',
+  'sidebar.sessionStatus.attention': '확인 필요',
   'sidebar.taskView': '작업 보기',
   'sidebar.tasks': '작업',
   'sidebar.taskGroup.running': '진행 중',
@@ -862,6 +863,9 @@ export const kr: Record<TranslationKey, string> = {
   'workspace.terminal.restart': '터미널 다시 시작',
   'workspace.terminal.exited': '이 터미널은 종료되었습니다.',
   'workspace.review.sourceLabel': '비교 범위',
+  'workspace.review.fileCount': '{count}개 파일',
+  'workspace.review.diffLayout': 'Diff 레이아웃',
+  'workspace.review.newFile': '새 파일',
   'workspace.review.sourceUnstaged': '스테이지 안 됨',
   'workspace.review.sourceStaged': '스테이지됨',
   'workspace.review.sourceUncommitted': '커밋되지 않은 전체',
@@ -992,6 +996,7 @@ export const kr: Record<TranslationKey, string> = {
   'settings.tab.permissions': '권한',
   'settings.tab.activity': '토큰 사용량',
   'settings.tab.general': '일반',
+  'settings.general.pageDescription': '모양, 언어, 그리고 Agent의 기본 동작.',
   'settings.tab.h5Access': 'H5 액세스',
   'settings.tab.terminal': '터미널',
   'settings.tab.skills': '스킬',
@@ -2573,6 +2578,15 @@ export const kr: Record<TranslationKey, string> = {
   // ─── Empty Session ──────────────────────────────────────
   'empty.title': '새 세션',
   'empty.subtitle': '새 코딩 세션을 시작합니다. Claude가 프로젝트를 구축하고 디버깅하며 설계하도록 도울 준비가 되어 있습니다.',
+  'empty.heroTitle': '오늘 {project}에서 무엇을 할까요?',
+  'empty.heroTitleNoProject': '오늘은 무엇을 할까요?',
+  'empty.heroSubtitle': 'Claude는 프로젝트를 읽고 코드를 수정하며 명령을 실행할 수 있습니다.',
+  'empty.suggestions': '추천',
+  'empty.suggestion.explainRepo': '이 저장소의 구조를 설명해 줘',
+  'empty.suggestion.fixTests': '실패하는 테스트를 고쳐 줘',
+  'empty.suggestion.reviewChanges': '커밋하지 않은 변경 사항을 검토해 줘',
+  'empty.suggestion.newFeature': '새 기능을 만들어 줘',
+  'empty.recentTitle': '최근 세션',
   'empty.placeholder': '무엇이든 물어보세요...',
   'empty.addFiles': '파일 또는 사진 추가',
   'empty.slashCommands': '슬래시 명령',
@@ -3063,6 +3077,30 @@ export const kr: Record<TranslationKey, string> = {
   'toolGroup.searchedWeb': '웹을 검색했습니다',
   'toolGroup.fetchedOne': '페이지 1개를 가져왔습니다',
   'toolGroup.fetchedMany': '페이지 {count}개를 가져왔습니다',
+  'toolGroup.separator': ', ',
+  'toolGroup.updatedTodos': '할 일 목록 업데이트',
+  'toolGroup.managedTasks': '작업 관리',
+  'toolVerb.search': '검색',
+  'toolVerb.read': '읽기',
+  'toolVerb.edit': '편집',
+  'toolVerb.create': '생성',
+  'toolVerb.run': '실행',
+  'toolVerb.updateTodos': '할 일 목록 업데이트',
+  'toolVerb.createTask': '작업 생성',
+  'toolVerb.updateTask': '작업 업데이트',
+  'toolVerb.viewTasks': '작업 보기',
+  'toolVerb.searchWeb': '웹 검색',
+  'toolVerb.fetchWeb': '웹 페이지 읽기',
+  'toolVerb.agent': '하위 에이전트 실행',
+  'toolVerb.skill': '스킬 사용',
+  'tool.exitCode': '종료 코드 {code}',
+  'tool.fileCountSingular': '파일 {count}개',
+  'tool.fileCountPlural': '파일 {count}개',
+  'tool.matchCountSingular': '{count}곳',
+  'tool.matchCountPlural': '{count}곳',
+  'tool.itemCountSingular': '{count}개 항목',
+  'tool.itemCountPlural': '{count}개 항목',
+  'agentStatus.toolUses': '호출 {count}회',
 
   // ─── Tasks ──────────────────────────────────────
   'tasks.completed': '완료된 작업',
diff --git a/desktop/src/i18n/locales/zh-TW.ts b/desktop/src/i18n/locales/zh-TW.ts
index 10af309a..7693a807 100644
--- a/desktop/src/i18n/locales/zh-TW.ts
+++ b/desktop/src/i18n/locales/zh-TW.ts
@@ -677,6 +677,7 @@ export const zh: Record<TranslationKey, string> = {
   'sidebar.worktree': 'worktree',
   'sidebar.sessionRunning': '會話執行中',
   'sidebar.sessionNeedsAttention': '等待你確認',
+  'sidebar.sessionStatus.attention': '等你確認',
   'sidebar.taskView': '任務檢視',
   'sidebar.tasks': '任務',
   'sidebar.taskGroup.running': '進行中',
@@ -860,6 +861,9 @@ export const zh: Record<TranslationKey, string> = {
   'workspace.terminal.restart': '重新啟動終端機',
   'workspace.terminal.exited': '此終端機已結束。',
   'workspace.review.sourceLabel': '比較範圍',
+  'workspace.review.fileCount': '{count} 個檔案',
+  'workspace.review.diffLayout': 'Diff 版面',
+  'workspace.review.newFile': '新檔案',
   'workspace.review.sourceUnstaged': '未暫存',
   'workspace.review.sourceStaged': '已暫存',
   'workspace.review.sourceUncommitted': '全部未提交',
@@ -990,6 +994,7 @@ export const zh: Record<TranslationKey, string> = {
   'settings.tab.permissions': '許可權',
   'settings.tab.activity': 'Token 用量',
   'settings.tab.general': '通用',
+  'settings.general.pageDescription': '外觀、語言與 Agent 的預設行為。',
   'settings.tab.h5Access': 'H5 訪問',
   'settings.tab.terminal': '終端',
   'settings.tab.skills': '技能',
@@ -2570,6 +2575,15 @@ export const zh: Record<TranslationKey, string> = {
   // ─── Empty Session ──────────────────────────────────────
   'empty.title': '新建會話',
   'empty.subtitle': '開始一個新的編碼會話。Claude 已準備好幫你構建、除錯和設計你的專案。',
+  'empty.heroTitle': '今天想在 {project} 裡做點什麼？',
+  'empty.heroTitleNoProject': '今天想做點什麼？',
+  'empty.heroSubtitle': 'Claude 可以讀取專案、修改程式碼並執行命令。',
+  'empty.suggestions': '快捷建議',
+  'empty.suggestion.explainRepo': '解釋這個倉庫的結構',
+  'empty.suggestion.fixTests': '修復失敗的測試',
+  'empty.suggestion.reviewChanges': '審查未提交的改動',
+  'empty.suggestion.newFeature': '寫一個新功能',
+  'empty.recentTitle': '最近會話',
   'empty.placeholder': '隨便問點什麼...',
   'empty.addFiles': '新增檔案或圖片',
   'empty.slashCommands': '斜槓命令',
@@ -3025,19 +3039,19 @@ export const zh: Record<TranslationKey, string> = {
   'tool.noOutput': '無輸出',
 
   // ─── Tool Group Verbs ──────────────────────────────────────
-  'toolGroup.readOne': '讀取了 1 個檔案',
-  'toolGroup.readMany': '讀取了 {count} 個檔案',
-  'toolGroup.createdOne': '建立了一個檔案',
-  'toolGroup.createdMany': '建立了 {count} 個檔案',
-  'toolGroup.editedOne': '編輯了一個檔案',
-  'toolGroup.editedMany': '編輯了 {count} 個檔案',
-  'toolGroup.ranOne': '執行了一條命令',
-  'toolGroup.ranMany': '執行了 {count} 條命令',
+  'toolGroup.readOne': '讀取 1 個檔案',
+  'toolGroup.readMany': '讀取 {count} 個檔案',
+  'toolGroup.createdOne': '新增 1 個檔案',
+  'toolGroup.createdMany': '新增 {count} 個檔案',
+  'toolGroup.editedOne': '編輯 1 個檔案',
+  'toolGroup.editedMany': '編輯 {count} 個檔案',
+  'toolGroup.ranOne': '執行 1 條命令',
+  'toolGroup.ranMany': '執行 {count} 條命令',
   'toolGroup.foundFiles': '查詢到檔案',
-  'toolGroup.searchedOne': '搜尋了程式碼',
-  'toolGroup.searchedMany': '搜尋了 {count} 個模式',
-  'toolGroup.agentOne': '派遣了一個代理',
-  'toolGroup.agentMany': '派遣了 {count} 個代理',
+  'toolGroup.searchedOne': '搜尋 1 次',
+  'toolGroup.searchedMany': '搜尋 {count} 次',
+  'toolGroup.agentOne': '派遣了 1 個子代理',
+  'toolGroup.agentMany': '派遣了 {count} 個子代理',
   'toolGroup.thought': '思考',
   'toolGroup.thoughtMany': '思考 {count} 次',
   'toolGroup.failedCount': '{count} 項失敗',
@@ -3057,9 +3071,33 @@ export const zh: Record<TranslationKey, string> = {
   'agentActivity.failed': '無法載入該子代理的工具活動。',
   'agentActivity.retry': '重試',
   'agentActivity.truncated': '僅顯示該執行的開始與結尾，開啟執行可查看完整軌跡。',
-  'toolGroup.searchedWeb': '搜尋了網頁',
-  'toolGroup.fetchedOne': '獲取了一個頁面',
-  'toolGroup.fetchedMany': '獲取了 {count} 個頁面',
+  'toolGroup.searchedWeb': '搜尋網頁',
+  'toolGroup.fetchedOne': '讀取 1 個網頁',
+  'toolGroup.fetchedMany': '讀取 {count} 個網頁',
+  'toolGroup.separator': '、',
+  'toolGroup.updatedTodos': '更新任務清單',
+  'toolGroup.managedTasks': '管理任務',
+  'toolVerb.search': '搜尋',
+  'toolVerb.read': '讀取',
+  'toolVerb.edit': '編輯',
+  'toolVerb.create': '新增',
+  'toolVerb.run': '執行',
+  'toolVerb.updateTodos': '更新任務清單',
+  'toolVerb.createTask': '建立任務',
+  'toolVerb.updateTask': '更新任務',
+  'toolVerb.viewTasks': '查看任務',
+  'toolVerb.searchWeb': '搜尋網頁',
+  'toolVerb.fetchWeb': '讀取網頁',
+  'toolVerb.agent': '派遣子代理',
+  'toolVerb.skill': '使用技能',
+  'tool.exitCode': '結束碼 {code}',
+  'tool.fileCountSingular': '{count} 個檔案',
+  'tool.fileCountPlural': '{count} 個檔案',
+  'tool.matchCountSingular': '{count} 處',
+  'tool.matchCountPlural': '{count} 處',
+  'tool.itemCountSingular': '{count} 項',
+  'tool.itemCountPlural': '{count} 項',
+  'agentStatus.toolUses': '{count} 次呼叫',
 
   // ─── Tasks ──────────────────────────────────────
   'tasks.completed': '已完成的任務',
diff --git a/desktop/src/i18n/locales/zh.ts b/desktop/src/i18n/locales/zh.ts
index 7e626b9e..6273d584 100644
--- a/desktop/src/i18n/locales/zh.ts
+++ b/desktop/src/i18n/locales/zh.ts
@@ -676,6 +676,7 @@ export const zh: Record<TranslationKey, string> = {
   'sidebar.worktree': 'worktree',
   'sidebar.sessionRunning': '会话运行中',
   'sidebar.sessionNeedsAttention': '等待你确认',
+  'sidebar.sessionStatus.attention': '等你确认',
   'sidebar.taskView': '任务视图',
   'sidebar.tasks': '任务',
   'sidebar.taskGroup.running': '进行中',
@@ -859,6 +860,9 @@ export const zh: Record<TranslationKey, string> = {
   'workspace.terminal.restart': '重新启动终端',
   'workspace.terminal.exited': '该终端已退出。',
   'workspace.review.sourceLabel': '比较范围',
+  'workspace.review.fileCount': '{count} 个文件',
+  'workspace.review.diffLayout': 'Diff 布局',
+  'workspace.review.newFile': '新文件',
   'workspace.review.sourceUnstaged': '未暂存',
   'workspace.review.sourceStaged': '已暂存',
   'workspace.review.sourceUncommitted': '全部未提交',
@@ -989,6 +993,7 @@ export const zh: Record<TranslationKey, string> = {
   'settings.tab.permissions': '权限',
   'settings.tab.activity': 'Token 用量',
   'settings.tab.general': '通用',
+  'settings.general.pageDescription': '外观、语言和 Agent 的默认行为。',
   'settings.tab.h5Access': 'H5 访问',
   'settings.tab.terminal': '终端',
   'settings.tab.skills': '技能',
@@ -2569,6 +2574,15 @@ export const zh: Record<TranslationKey, string> = {
   // ─── Empty Session ──────────────────────────────────────
   'empty.title': '新建会话',
   'empty.subtitle': '开始一个新的编码会话。Claude 已准备好帮你构建、调试和设计你的项目。',
+  'empty.heroTitle': '今天想在 {project} 里做点什么？',
+  'empty.heroTitleNoProject': '今天想做点什么？',
+  'empty.heroSubtitle': 'Claude 可以读取项目、修改代码并运行命令。',
+  'empty.suggestions': '快捷建议',
+  'empty.suggestion.explainRepo': '解释这个仓库的结构',
+  'empty.suggestion.fixTests': '修复失败的测试',
+  'empty.suggestion.reviewChanges': '审查未提交的改动',
+  'empty.suggestion.newFeature': '写一个新功能',
+  'empty.recentTitle': '最近会话',
   'empty.placeholder': '随便问点什么...',
   'empty.addFiles': '添加文件或图片',
   'empty.slashCommands': '斜杠命令',
@@ -3024,19 +3038,19 @@ export const zh: Record<TranslationKey, string> = {
   'tool.noOutput': '无输出',
 
   // ─── Tool Group Verbs ──────────────────────────────────────
-  'toolGroup.readOne': '读取了 1 个文件',
-  'toolGroup.readMany': '读取了 {count} 个文件',
-  'toolGroup.createdOne': '创建了一个文件',
-  'toolGroup.createdMany': '创建了 {count} 个文件',
-  'toolGroup.editedOne': '编辑了一个文件',
-  'toolGroup.editedMany': '编辑了 {count} 个文件',
-  'toolGroup.ranOne': '执行了一条命令',
-  'toolGroup.ranMany': '执行了 {count} 条命令',
+  'toolGroup.readOne': '读取 1 个文件',
+  'toolGroup.readMany': '读取 {count} 个文件',
+  'toolGroup.createdOne': '新建 1 个文件',
+  'toolGroup.createdMany': '新建 {count} 个文件',
+  'toolGroup.editedOne': '编辑 1 个文件',
+  'toolGroup.editedMany': '编辑 {count} 个文件',
+  'toolGroup.ranOne': '运行 1 条命令',
+  'toolGroup.ranMany': '运行 {count} 条命令',
   'toolGroup.foundFiles': '查找到文件',
-  'toolGroup.searchedOne': '搜索了代码',
-  'toolGroup.searchedMany': '搜索了 {count} 个模式',
-  'toolGroup.agentOne': '派遣了一个代理',
-  'toolGroup.agentMany': '派遣了 {count} 个代理',
+  'toolGroup.searchedOne': '搜索 1 次',
+  'toolGroup.searchedMany': '搜索 {count} 次',
+  'toolGroup.agentOne': '派遣了 1 个子代理',
+  'toolGroup.agentMany': '派遣了 {count} 个子代理',
   'toolGroup.thought': '思考',
   'toolGroup.thoughtMany': '思考 {count} 次',
   'toolGroup.failedCount': '{count} 项失败',
@@ -3056,9 +3070,33 @@ export const zh: Record<TranslationKey, string> = {
   'agentActivity.failed': '无法加载该子代理的工具活动。',
   'agentActivity.retry': '重试',
   'agentActivity.truncated': '仅显示该运行的开始与结尾，打开运行可查看完整轨迹。',
-  'toolGroup.searchedWeb': '搜索了网页',
-  'toolGroup.fetchedOne': '获取了一个页面',
-  'toolGroup.fetchedMany': '获取了 {count} 个页面',
+  'toolGroup.searchedWeb': '搜索网页',
+  'toolGroup.fetchedOne': '读取 1 个网页',
+  'toolGroup.fetchedMany': '读取 {count} 个网页',
+  'toolGroup.separator': '、',
+  'toolGroup.updatedTodos': '更新任务清单',
+  'toolGroup.managedTasks': '管理任务',
+  'toolVerb.search': '搜索',
+  'toolVerb.read': '读取',
+  'toolVerb.edit': '编辑',
+  'toolVerb.create': '新建',
+  'toolVerb.run': '运行',
+  'toolVerb.updateTodos': '更新任务清单',
+  'toolVerb.createTask': '创建任务',
+  'toolVerb.updateTask': '更新任务',
+  'toolVerb.viewTasks': '查看任务',
+  'toolVerb.searchWeb': '搜索网页',
+  'toolVerb.fetchWeb': '读取网页',
+  'toolVerb.agent': '派遣子代理',
+  'toolVerb.skill': '使用技能',
+  'tool.exitCode': '退出码 {code}',
+  'tool.fileCountSingular': '{count} 个文件',
+  'tool.fileCountPlural': '{count} 个文件',
+  'tool.matchCountSingular': '{count} 处',
+  'tool.matchCountPlural': '{count} 处',
+  'tool.itemCountSingular': '{count} 项',
+  'tool.itemCountPlural': '{count} 项',
+  'agentStatus.toolUses': '{count} 次调用',
 
   // ─── Tasks ──────────────────────────────────────
   'tasks.completed': '已完成的任务',
diff --git a/desktop/src/lib/chatAppearance.test.ts b/desktop/src/lib/chatAppearance.test.ts
index 1f586fba..816ae3da 100644
--- a/desktop/src/lib/chatAppearance.test.ts
+++ b/desktop/src/lib/chatAppearance.test.ts
@@ -21,6 +21,19 @@ describe('chat appearance preferences', () => {
     expect(font).not.toContain('SimSun')
   })
 
+  it('defaults to 15px text on the 800px standard measure without rewriting saved values', () => {
+    expect(DEFAULT_CHAT_APPEARANCE).toEqual({ font: 'system', fontSize: 15, width: 'standard' })
+    expect(normalizeChatAppearance({}).fontSize).toBe(15)
+    expect(getChatAppearanceStyle(DEFAULT_CHAT_APPEARANCE)).toMatchObject({
+      '--chat-font-size': '15px', '--chat-content-max-width': '800px',
+    })
+    // A v1 record saved under the old default keeps its explicit size; only the
+    // `standard` width it names now resolves to the new measure.
+    localStorage.setItem(CHAT_APPEARANCE_STORAGE_KEY, JSON.stringify({ version: 1, font: 'system', fontSize: 14, width: 'standard' }))
+    expect(migrateChatAppearance(localStorage)).toBe(false)
+    expect(readChatAppearance()).toEqual({ font: 'system', fontSize: 14, width: 'standard' })
+  })
+
   it('round trips preferences while preserving unknown fields', () => {
     localStorage.setItem(CHAT_APPEARANCE_STORAGE_KEY, JSON.stringify({ version: 1, extra: 'keep' }))
     persistChatAppearance({ font: 'serif', fontSize: 18, width: 'full' })
diff --git a/desktop/src/lib/chatAppearance.ts b/desktop/src/lib/chatAppearance.ts
index 46404751..836c24f1 100644
--- a/desktop/src/lib/chatAppearance.ts
+++ b/desktop/src/lib/chatAppearance.ts
@@ -7,7 +7,13 @@ export type ChatAppearance = {
   width: 'standard' | 'wide' | 'full'
 }
 
-export const DEFAULT_CHAT_APPEARANCE: ChatAppearance = { font: 'system', fontSize: 14, width: 'standard' }
+/**
+ * Porcelain reading defaults: 15px conversation text on an 800px measure.
+ * Only defaults changed — the stored shape is the same v1 record, so a value a
+ * user already saved (including the old 14px default written by the migration)
+ * is kept as theirs.
+ */
+export const DEFAULT_CHAT_APPEARANCE: ChatAppearance = { font: 'system', fontSize: 15, width: 'standard' }
 export type AppearanceStorage = Pick<Storage, 'getItem' | 'setItem'>
 
 const FONT_STACKS: Record<ChatAppearance['font'], string> = {
@@ -16,7 +22,7 @@ const FONT_STACKS: Record<ChatAppearance['font'], string> = {
   serif: 'Georgia, "Songti SC", "Source Han Serif SC", "Noto Serif CJK SC", SimSun, serif',
   mono: '"JetBrains Mono", ui-monospace, Menlo, Consolas, "PingFang SC", "Microsoft YaHei", monospace',
 }
-const WIDTHS = { standard: '900px', wide: '1200px', full: '100%' }
+const WIDTHS = { standard: '800px', wide: '1200px', full: '100%' }
 
 function isRecord(value: unknown): value is Record<string, unknown> {
   return value !== null && typeof value === 'object' && !Array.isArray(value)
@@ -27,7 +33,7 @@ export function normalizeChatAppearance(value: unknown): ChatAppearance {
   return {
     font: record.font === 'sans' || record.font === 'serif' || record.font === 'mono' ? record.font : 'system',
     fontSize: typeof record.fontSize === 'number' && Number.isFinite(record.fontSize)
-      ? Math.round(Math.min(24, Math.max(12, record.fontSize))) : 14,
+      ? Math.round(Math.min(24, Math.max(12, record.fontSize))) : DEFAULT_CHAT_APPEARANCE.fontSize,
     width: record.width === 'wide' || record.width === 'full' ? record.width : 'standard',
   }
 }
diff --git a/desktop/src/pages/ActiveSession.test.tsx b/desktop/src/pages/ActiveSession.test.tsx
index d2842791..6f342c3e 100644
--- a/desktop/src/pages/ActiveSession.test.tsx
+++ b/desktop/src/pages/ActiveSession.test.tsx
@@ -526,6 +526,64 @@ describe('ActiveSession task polling', () => {
     expect(screen.getByTestId('chat-input')).toHaveAttribute('data-variant', 'default')
   })
 
+  it('turns a blank session into the new-session page: project question, starters and recent threads', () => {
+    const sessionId = 'blank-new-session'
+    const base = Date.now()
+    const listItem = (id: string, title: string, messageCount: number, minutesAgo: number, workDir = '/workspace/project') => ({
+      id,
+      title,
+      createdAt: new Date(base - minutesAgo * 60_000).toISOString(),
+      modifiedAt: new Date(base - minutesAgo * 60_000).toISOString(),
+      messageCount,
+      projectPath: workDir,
+      workDir,
+      workDirExists: true,
+    })
+    useSessionStore.setState({
+      sessions: [
+        listItem(sessionId, 'New Session', 0, 0),
+        listItem('older', 'Older thread', 4, 120),
+        listItem('newer', 'Newer thread', 2, 5),
+        listItem('elsewhere', 'Other project thread', 3, 1, '/workspace/other'),
+      ],
+      activeSessionId: sessionId,
+      isLoading: false,
+      error: null,
+    })
+    useTabStore.setState({
+      tabs: [{ sessionId, title: 'New Session', type: 'session', status: 'idle' }],
+      activeTabId: sessionId,
+    })
+    useChatStore.setState({
+      sessions: {
+        [sessionId]: {
+          ...useChatStore.getState().getSession(sessionId),
+          connectionState: 'connected',
+          historyStatus: 'ready',
+        },
+      },
+    })
+
+    render(<ActiveSession />)
+
+    const hero = screen.getByTestId('empty-session-hero')
+    expect(within(hero).getByRole('heading', { level: 1 })).toHaveTextContent('project')
+    // Only this project's threads with something in them, newest first; the
+    // blank session itself is not "recent".
+    const starter = screen.getByTestId('new-session-starter')
+    const recentTitles = within(starter).getAllByRole('listitem').map((item) => item.textContent ?? '')
+    expect(recentTitles).toHaveLength(2)
+    expect(recentTitles[0]).toContain('Newer thread')
+    expect(recentTitles[1]).toContain('Older thread')
+
+    // A starter chip goes through the composer's insertion queue, so it lands
+    // at the cursor without wiping attachments a replace would clear.
+    const chips = within(within(starter).getByRole('group')).getAllByRole('button')
+    expect(chips).toHaveLength(4)
+    fireEvent.click(chips[1]!)
+    expect(useChatStore.getState().sessions[sessionId]?.composerInsertion?.text).toBe(chips[1]!.textContent)
+  })
+
   it('labels result usage that includes cache tokens without implying the Trace input/output total', async () => {
     const sessionId = 'deepseek-cache-token-session'
 
@@ -2199,7 +2257,14 @@ describe('ActiveSession task polling', () => {
     const resizeHandle = screen.getByTestId('workspace-resize-handle')
 
     const workbenchPanel = screen.getByTestId('workbench-panel')
-    expect(workbenchPanel.style.maxWidth).toBe('70%')
+    // A bare 70% cap ignored the chat column's 400px floor plus the 1px
+    // handle: at 1160px of row a persisted 860px panel was clamped to 812px and
+    // ran 53px past the window edge. Both bounds now deduct that 401px.
+    expect(workbenchPanel.style.maxWidth).toBe('')
+    expect(workbenchPanel).toHaveClass('max-w-[min(70%,calc(100%_-_401px))]')
+    expect(workbenchPanel).toHaveClass('min-w-[min(420px,54%,calc(100%_-_401px))]')
+    expect(resizeHandle).toHaveClass('w-px')
+    expect(chatColumn).toHaveClass('min-w-[400px]')
 
     expect(within(contentRow).getByTestId('message-list')).toBeInTheDocument()
     expect(within(contentRow).getByTestId('message-list')).toHaveAttribute('data-compact', 'true')
@@ -2703,7 +2768,27 @@ describe('ActiveSession header', () => {
     expect(within(titleRow).queryByText('2 messages')).not.toBeInTheDocument()
     expect(within(meta).getByText('2 messages')).toBeInTheDocument()
     expect(within(meta).getByText('15k API tokens')).toBeInTheDocument()
-    expect(header).toHaveClass('py-3')
+    expect(header).toHaveClass('py-3.5')
+  })
+
+  it('leads the metadata with where the session runs: project folder, then branch', async () => {
+    const sessionId = 'header-place-session'
+    mountSessionWithLongTitle(sessionId)
+
+    render(<ActiveSession />)
+
+    const project = screen.getByTestId('session-header-project')
+    expect(project).toHaveTextContent('project')
+    expect(project.querySelector('svg.lucide-folder')).toHaveAttribute('aria-hidden', 'true')
+    // The branch arrives with the git info request.
+    const branch = await screen.findByTestId('session-header-branch')
+    expect(branch).toHaveTextContent('main')
+    expect(branch.querySelector('svg.lucide-git-branch')).toHaveAttribute('aria-hidden', 'true')
+
+    const metaRow = project.parentElement as HTMLElement
+    const order = [...metaRow.children].map((child) => child.getAttribute('data-testid'))
+    expect(order.indexOf('session-header-project')).toBe(0)
+    expect(order.indexOf('session-header-branch')).toBeGreaterThan(0)
   })
 
   it('keeps the separators between metadata items, never in front of them', () => {
@@ -2715,10 +2800,13 @@ describe('ActiveSession header', () => {
     const heading = within(screen.getByTestId('session-header')).getByRole('heading', { level: 1 })
     const meta = (heading.parentElement as HTMLElement).nextElementSibling as HTMLElement
 
-    // 空闲会话只有三项元数据（tokens / 更新时间 / 消息数），之间两个「·」，开头不该有。
-    // 分隔符是纯装饰，读屏时不该被念出来。
-    expect(meta.textContent?.trimStart().startsWith('·')).toBe(false)
-    expect(meta.querySelectorAll('[aria-hidden="true"]')).toHaveLength(2)
+    // 分隔符（3px 圆点）只出现在两项之间，开头不该有；它是纯装饰，读屏时不该被念出来。
+    // 图标也带 aria-hidden，所以这里只数元数据行的直接子元素。
+    const children = [...meta.children]
+    const separators = children.filter((child) => child.getAttribute('aria-hidden') === 'true')
+    expect(children[0]?.getAttribute('aria-hidden')).not.toBe('true')
+    expect(separators.length).toBeGreaterThan(0)
+    expect(separators).toHaveLength(children.length - separators.length - 1)
   })
 })
 
diff --git a/desktop/src/pages/ActiveSession.tsx b/desktop/src/pages/ActiveSession.tsx
index 79966c12..a2fd9c36 100644
--- a/desktop/src/pages/ActiveSession.tsx
+++ b/desktop/src/pages/ActiveSession.tsx
@@ -1,7 +1,7 @@
 import { AgentTeamsPlanCard } from '@/components/agentTeams/AgentTeamsPlanCard'
 import { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import type { RefObject } from 'react'
-import { ArrowLeft, GitFork, Target, MessageCircleQuestion } from 'lucide-react'
+import { ArrowLeft, Folder, GitBranch, GitFork, History, Target, MessageCircleQuestion, TriangleAlert } from 'lucide-react'
 import { IconButton } from '@/components/ui/IconButton'
 import { openSideChat } from '@/lib/workspace/openSideChat'
 import {
@@ -28,6 +28,9 @@ import { useTranslation } from '../i18n'
 import { LoadingState } from '@/components/ui/LoadingState'
 import { Tooltip } from '@/components/ui/Tooltip'
 import { BrandSeal } from '@/components/composite/BrandSeal'
+import { NewSessionStarter } from '@/components/layout/NewSessionStarter'
+import { getSessionProjectKey, getSessionWorkspaceLabel } from '@/components/layout/sidebarTaskGroups'
+import { resolveProjectDisplayName } from '../stores/projectDisplayNameStore'
 import { MessageList } from '../components/chat/MessageList'
 import { ChatInput } from '../components/chat/ChatInput'
 import { TrajectoryViewSwitch } from '../components/trajectory/TrajectoryViewSwitch'
@@ -173,6 +176,17 @@ function getRenderedWorkspacePanelWidth(panelRef: RefObject<HTMLElement>, fallba
     : fallbackWidth
 }
 
+/**
+ * Bounds of the split workspace panel. It may take up to 70% of the row, but
+ * never the room the chat column needs: `SessionChatSurface` pins the compact
+ * column at `min-w-[400px]` and the resize handle below is 1px, so a persisted
+ * width past `100% - 401px` (860px in a 1160px row) pushed the panel's right
+ * edge — the review toolbar, the file tree — out of the window. The minimum
+ * yields to the same bound, since `min-width` beats `max-width` and would
+ * otherwise reintroduce the overflow in a narrow window.
+ */
+const WORKSPACE_SPLIT_PANEL_BOUNDS = 'max-w-[min(70%,calc(100%_-_401px))] min-w-[min(420px,54%,calc(100%_-_401px))]'
+
 function WorkspaceResizeHandle({ panelRef }: { panelRef: RefObject<HTMLElement> }) {
   const t = useTranslation()
   const width = useWorkspaceStore((state) => state.sideWidth)
@@ -442,9 +456,11 @@ export function ActiveSession({ sessionId, active = true }: { sessionId?: string
 
     let cancelled = false
     setSessionGitInfo((current) => current?.sessionId === activeTabId ? null : current)
+    // Kept for every session, not only worktree ones: the header names the
+    // branch too. The worktree indicator reads `worktree.enabled` itself.
     void sessionsApi.getGitInfo(activeTabId)
       .then((info) => {
-        if (!cancelled && info.worktree?.enabled) {
+        if (!cancelled) {
           setSessionGitInfo({ sessionId: activeTabId, info })
         }
       })
@@ -469,9 +485,7 @@ export function ActiveSession({ sessionId, active = true }: { sessionId?: string
       void sessionsApi.getGitInfo(activeTabId)
         .then((info) => {
           if (cancelled) return
-          setSessionGitInfo(info.worktree?.enabled
-            ? { sessionId: activeTabId, info }
-            : null)
+          setSessionGitInfo({ sessionId: activeTabId, info })
         })
         .catch(() => {
           // Keep the last useful snapshot when supplementary Git metadata cannot refresh.
@@ -542,6 +556,10 @@ export function ActiveSession({ sessionId, active = true }: { sessionId?: string
     !isPreparingTurn &&
     (session?.messageCount ?? 0) === 0
   const compactEmptyHero = isEmpty && showTerminalPanel
+  // The project the blank session will work in, by the name the sidebar shows.
+  const emptyHeroProject = isEmpty && session && (session.projectRoot || session.workDir)
+    ? getSessionWorkspaceLabel(session, resolveProjectDisplayName) || null
+    : null
   const isHistoryLoading =
     (session?.messageCount ?? 0) > 0 &&
     messages.length === 0 &&
@@ -708,13 +726,52 @@ export function ActiveSession({ sessionId, active = true }: { sessionId?: string
     !isMobileLayout &&
     isSessionTabState(activeTabId, activeTabType)
   const isActivityRailOpen = showActivityRail && isActivityPanelOpen
+  // Suggestions and recent sessions need the open column under a hero
+  // composer; squeezed by a side panel, the terminal or a phone, they go.
+  const showNewSessionStarter = isEmpty && !showRightPanel && !compactEmptyHero && !isMobileLayout
+  // Where the session runs, first: the project by the name the sidebar shows,
+  // then the branch git reports for it (「素」 su-01: folder · branch · …).
+  const headerProjectLabel = session && (session.projectRoot || session.workDir)
+    ? getSessionWorkspaceLabel(session, resolveProjectDisplayName)
+    : null
+  const headerBranch = currentGitInfo?.branch || null
   const headerMetadataCandidates: Array<SessionHeaderMetaItem | null> = [
+    headerProjectLabel
+      ? {
+          key: 'project',
+          content: (
+            <span
+              data-testid="session-header-project"
+              className="flex max-w-[160px] shrink-0 items-center gap-1"
+              title={session?.workDir ?? undefined}
+            >
+              <Folder size={12} strokeWidth={2} className="shrink-0" aria-hidden="true" />
+              <span className="min-w-0 truncate">{headerProjectLabel}</span>
+            </span>
+          ),
+        }
+      : null,
+    headerBranch
+      ? {
+          key: 'branch',
+          content: (
+            <span
+              data-testid="session-header-branch"
+              className="flex max-w-[160px] shrink-0 items-center gap-1"
+              title={headerBranch}
+            >
+              <GitBranch size={12} strokeWidth={2} className="shrink-0" aria-hidden="true" />
+              <span className="min-w-0 truncate">{headerBranch}</span>
+            </span>
+          ),
+        }
+      : null,
     isActive
       ? {
           key: 'active',
           content: (
             <span className="flex shrink-0 items-center gap-1.5 text-[var(--color-text-secondary)]">
-              <span className="h-1.5 w-1.5 rounded-full bg-[var(--color-success)] animate-pulse-dot" />
+              <span className="h-1.5 w-1.5 rounded-full bg-[var(--color-info)] animate-pulse-dot" />
               {t('session.active')}
             </span>
           ),
@@ -731,9 +788,9 @@ export function ActiveSession({ sessionId, active = true }: { sessionId?: string
               <span
                 data-testid="session-worktree-indicator"
                 tabIndex={0}
-                className="flex min-w-0 max-w-[260px] shrink cursor-help items-center gap-1 rounded-[4px] text-[var(--color-text-secondary)] outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-[var(--color-border-focus)]"
+                className="flex min-w-0 max-w-[260px] shrink cursor-help items-center gap-1 rounded-[var(--radius-xs)] text-[var(--color-text-secondary)] outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-[var(--color-border-focus)]"
               >
-                <GitFork size={11} className="shrink-0 text-[var(--color-brand)]" aria-hidden="true" />
+                <GitFork size={12} strokeWidth={2} className="shrink-0 text-[var(--color-text-tertiary)]" aria-hidden="true" />
                 <span className="shrink-0 capitalize">{t('sidebar.worktree')}:</span>
                 <span className="min-w-0 truncate font-medium">{worktreeName}</span>
               </span>
@@ -809,15 +866,15 @@ export function ActiveSession({ sessionId, active = true }: { sessionId?: string
             ref={workbenchPanelRef}
             data-testid="workbench-panel"
             data-workspace-layout={isWorkspaceFull ? 'full' : workspaceLayout}
-            className="flex h-full min-w-0 flex-col bg-[var(--color-surface)]"
+            className={`flex h-full flex-col bg-[var(--color-surface)] ${isWorkspaceFull ? 'min-w-0' : WORKSPACE_SPLIT_PANEL_BOUNDS}`}
             style={isWorkspaceFull
               ? { flex: '1 1 auto' }
-              : { width: rightPanelWidth, flex: '0 0 auto', maxWidth: '70%', minWidth: 'min(420px, 54%)' }}
+              : { width: rightPanelWidth, flex: '0 0 auto' }}
           >
             {isMobileLayout && sideChatOpen && <div className="flex shrink-0 items-center border-b border-[var(--color-border)] px-2 py-1">
-              <IconButton icon={<ArrowLeft size={18} />} label={t('tabs.hideWorkspace')} size="2xl"
+              <IconButton icon={<ArrowLeft size={18} strokeWidth={1.75} aria-hidden="true" />} label={t('tabs.hideWorkspace')} size="2xl"
                 onClick={() => useWorkspaceStore.getState().setLayout(activeTabId, 'hidden')} />
-              <span className="text-sm text-[var(--color-text-secondary)]">{t('sideChat.title')}</span>
+              <span className="text-[13px] text-[var(--color-text-secondary)]">{t('sideChat.title')}</span>
             </div>}
             {/*
               ContentRouter keeps this page mounted under settings/market with
@@ -837,31 +894,34 @@ export function ActiveSession({ sessionId, active = true }: { sessionId?: string
     >
           {(isEmpty || isMobileLayout) && (
             <div className="flex justify-end px-4 py-2">
-              <IconButton icon={<MessageCircleQuestion size={18} />} label={t('sideChat.title')}
+              <IconButton icon={<MessageCircleQuestion size={16} strokeWidth={1.75} aria-hidden="true" />} label={t('sideChat.title')} size="sm"
                 pressed={sideChatOpen} onClick={() => void openSideChat(activeTabId)} />
             </div>
           )}
           {isEmpty ? (
+            // The new-session page (「素」, su-12): mark, question, one line of
+            // context, then the composer and the starter row below it. The hero
+            // bottom-aligns and the starter top-aligns, so the composer between
+            // them lands just above the middle of the column — without moving
+            // it out of its slot, where a remount would drop the draft.
             <div
               data-testid="empty-session-hero"
               className={[
-                'brand-seal-glow flex min-h-0 flex-1 flex-col items-center justify-center overflow-hidden px-8 pt-8',
-                compactEmptyHero ? 'pb-6' : 'pb-32',
+                'flex min-h-0 flex-1 flex-col items-center justify-end overflow-hidden px-8',
+                compactEmptyHero ? 'pb-6 pt-6' : 'pb-7 pt-8',
               ].join(' ')}
             >
-              <div className="flex max-w-[420px] flex-col items-center gap-[13px] text-center">
-                <BrandSeal size={compactEmptyHero ? 'lg' : 'xl'} />
+              <div className="flex max-w-[600px] flex-col items-center gap-2.5 text-center">
+                <BrandSeal size={compactEmptyHero ? 'md' : 'lg'} />
                 <h1
-                  className={`text-2xl font-semibold tracking-tight text-[var(--color-text-primary)]`}
-                  style={{ fontFamily: 'var(--font-headline)' }}
+                  className={`mt-2 font-semibold leading-[1.3] tracking-tight text-[var(--color-text-primary)] ${compactEmptyHero ? 'text-[22px]' : 'text-[26px]'}`}
                 >
-                  {t('empty.title')}
+                  {emptyHeroProject
+                    ? t('empty.heroTitle', { project: emptyHeroProject })
+                    : t('empty.heroTitleNoProject')}
                 </h1>
-                <p
-                  className={`mx-auto -mt-1 text-[var(--color-text-secondary)] ${compactEmptyHero ? 'max-w-[280px] text-sm leading-6' : 'text-[15px] leading-[1.7]'}`}
-                  style={{ fontFamily: 'var(--font-body)' }}
-                >
-                  {t('empty.subtitle')}
+                <p className="text-[14px] text-[var(--color-text-tertiary)]">
+                  {t('empty.heroSubtitle')}
                 </p>
               </div>
             </div>
@@ -874,19 +934,19 @@ export function ActiveSession({ sessionId, active = true }: { sessionId?: string
                   metadata={headerMetadata}
                   actions={<>
                     {activeTabId && <TrajectoryViewSwitch sessionId={activeTabId} />}
-                    <IconButton icon={<MessageCircleQuestion size={18} />} label={t('sideChat.title')}
+                    <IconButton icon={<MessageCircleQuestion size={16} strokeWidth={1.75} aria-hidden="true" />} label={t('sideChat.title')} size="sm"
                       pressed={sideChatOpen} onClick={() => void openSideChat(activeTabId)} />
                   </>}
                 >
                   {session && getSessionWorkspaceState(session) !== 'available' && (
-                    <div className={`mt-2 inline-flex max-w-full items-center gap-2 rounded-[var(--radius-md)] border px-3 py-1.5 text-[11px] ${
+                    <div className={`mt-2 inline-flex max-w-full items-center gap-2 rounded-[var(--radius-md)] px-3 py-1.5 text-[12px] ${
                       getSessionWorkspaceState(session) === 'worktree_removed'
-                        ? 'border-[var(--color-border)] bg-[var(--color-surface-container)] text-[var(--color-text-secondary)]'
-                        : 'border-[var(--color-error)] bg-[var(--color-error-container)] text-[var(--color-on-error-container)]'
+                        ? 'bg-[var(--color-surface-container)] text-[var(--color-text-secondary)]'
+                        : 'bg-[var(--color-error-container)] text-[var(--color-on-error-container)]'
                     }`}>
-                      <span className="material-symbols-outlined text-[14px]">
-                        {getSessionWorkspaceState(session) === 'worktree_removed' ? 'history' : 'warning'}
-                      </span>
+                      {getSessionWorkspaceState(session) === 'worktree_removed'
+                        ? <History size={14} strokeWidth={1.75} className="shrink-0" aria-hidden="true" />
+                        : <TriangleAlert size={14} strokeWidth={1.75} className="shrink-0" aria-hidden="true" />}
                       <span className="truncate">
                         {getSessionWorkspaceState(session) === 'worktree_removed'
                           ? t('session.worktreeRemoved', { dir: session.projectRoot || '' })
@@ -969,6 +1029,17 @@ export function ActiveSession({ sessionId, active = true }: { sessionId?: string
             compact={showRightPanel || showTrajectory}
           />
 
+          {showNewSessionStarter && activeTabId ? (
+            <div className="flex min-h-0 flex-[1.3] flex-col items-center overflow-y-auto px-8 pb-8 pt-1">
+              <NewSessionStarter
+                projectPath={session ? getSessionProjectKey(session) : null}
+                projectLabel={emptyHeroProject}
+                excludeSessionId={activeTabId}
+                onSuggestion={(text) => useChatStore.getState().queueComposerInsertion(activeTabId, { text })}
+              />
+            </div>
+          ) : null}
+
           {hasBottomTerminals && activeTabId ? (
             <div
               data-testid="session-terminal-panel"
diff --git a/desktop/src/pages/ActivitySettings.test.tsx b/desktop/src/pages/ActivitySettings.test.tsx
index 68553fd2..e3cb31d6 100644
--- a/desktop/src/pages/ActivitySettings.test.tsx
+++ b/desktop/src/pages/ActivitySettings.test.tsx
@@ -1,5 +1,5 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { act, fireEvent, render, screen } from '@testing-library/react'
+import { act, fireEvent, render, screen, within } from '@testing-library/react'
 import '@testing-library/jest-dom'
 
 import { ActivitySettings } from './ActivitySettings'
@@ -239,6 +239,8 @@ describe('ActivitySettings', () => {
     expect(screen.queryByText('Read')).not.toBeInTheDocument()
     expect(screen.getAllByText('May').length).toBeGreaterThan(0)
     expect(screen.queryByText('5月')).not.toBeInTheDocument()
+    // May 2026 starts in the final column, too late to fit its name.
+    expect(screen.getByTestId('activity-month-labels').lastElementChild).toHaveTextContent('Apr')
 
     const todayCell = screen.getByRole('gridcell', {
       name: /May 9, 2026: 4 sessions · 128K Tokens/i,
@@ -281,35 +283,135 @@ describe('ActivitySettings', () => {
     expect(editButton.closest('div')).toHaveClass('group/activity-profile')
   })
 
-  it('uses a compact summary strip instead of the loose card layout', async () => {
+  it('lays the summary out as KPI tiles whose column count comes from the container, not the viewport', async () => {
     render(<ActivitySettings />)
 
     await flushActivityLoad()
 
     const summaryPanel = screen.getByText('Total tokens').closest('section')
     expect(summaryPanel).toHaveClass('activity-summary-panel')
-    expect(summaryPanel).toHaveClass('max-w-[900px]')
+    expect(within(summaryPanel as HTMLElement).getByText('2.9M')).toBeInTheDocument()
 
+    // Breakpoints live in container queries (globals.css), so the settings rail
+    // width cannot push the tiles into a cramped row.
     const summaryGrid = summaryPanel?.querySelector('.activity-summary-grid')
     expect(summaryGrid).not.toHaveClass('sm:grid-cols-2')
     expect(summaryGrid).not.toHaveClass('lg:grid-cols-5')
     expect(summaryGrid).not.toHaveClass('xl:grid-cols-5')
 
+    // The headline tile is the one that spans two columns; the label sits above the number.
     const primaryMetric = screen.getByText('Total tokens').closest('.activity-summary-metric')
     expect(primaryMetric).toHaveClass('activity-summary-metric-primary')
     expect(primaryMetric).not.toHaveClass('sm:col-span-2')
-    expect(primaryMetric).not.toHaveClass('lg:col-span-1')
-    expect(primaryMetric).toHaveClass('text-center')
+    expect(primaryMetric?.firstElementChild).toHaveTextContent('Total tokens')
+    expect(screen.getByText('Peak tokens').closest('.activity-summary-metric')).not.toHaveClass('activity-summary-metric-primary')
 
-    // Two lines, not one truncated line: at a fifth of the strip a duration like
+    // Two lines, not one truncated line: at a third of the row a duration like
     // "436 小时 26 分钟" rendered as "436 小…". Clamping still caps the growth, so
-    // the strip stays compact.
+    // the tiles stay compact.
     const longestTaskValue = screen.getByText('0m')
     expect(longestTaskValue).toHaveClass('activity-summary-value')
     expect(longestTaskValue).toHaveClass('line-clamp-2')
+    expect(longestTaskValue).toHaveClass('tabular-nums')
     expect(longestTaskValue).not.toHaveClass('break-words')
   })
 
+  it('places heatmap month labels by week without collisions or overhang', async () => {
+    // The 52-week window then opens on Sunday 2024-01-28: January's last four
+    // days sit in column 0 and February starts in column 1.
+    vi.setSystemTime(new Date('2025-01-20T12:00:00'))
+    render(<ActivitySettings />)
+
+    await flushActivityLoad()
+
+    const labels = Array.from(screen.getByTestId('activity-month-labels').children) as HTMLElement[]
+    const texts = labels.map((label) => label.textContent)
+    // January's 4-day tail would have collided with February, so it is dropped.
+    expect(texts[0]).toBe('Feb')
+    expect(texts).toHaveLength(12)
+    expect(texts[texts.length - 1]).toBe('Jan')
+
+    const lefts = labels.map((label) => Number.parseFloat(label.style.left))
+    // February sits in column 1, so its offset is exactly one cell plus gap.
+    const cellPitch = lefts[0]!
+    expect(cellPitch).toBeGreaterThan(0)
+    for (let index = 1; index < lefts.length; index += 1) {
+      expect(lefts[index]! - lefts[index - 1]!).toBeGreaterThanOrEqual(cellPitch * 3)
+    }
+    // No label starts in the last two columns, where it would overhang the grid.
+    expect(Math.max(...lefts)).toBeLessThanOrEqual(cellPitch * 49)
+  })
+
+  it('charts the trailing 14 days ending today and highlights only today', async () => {
+    render(<ActivitySettings />)
+
+    await flushActivityLoad()
+
+    const chart = screen.getByRole('list', { name: 'Token usage by day' })
+    const bars = within(chart).getAllByRole('listitem')
+    expect(bars).toHaveLength(14)
+    expect(bars[0]).toHaveTextContent('Apr 26, 2026: 0 Tokens')
+    expect(bars[11]).toHaveTextContent('May 7, 2026: 64K Tokens')
+    expect(bars[13]).toHaveTextContent('May 9, 2026: 128K Tokens')
+    expect(within(chart).queryByText(/May 10, 2026/)).not.toBeInTheDocument()
+
+    const barFill = (bar: HTMLElement) => bar.firstElementChild as HTMLElement
+    // Heights are relative to the window's own peak, so today's 128K fills the
+    // chart and the 64K day sits at half height.
+    expect(barFill(bars[13]!).style.height).toBe('100%')
+    expect(barFill(bars[11]!).style.height).toBe('50%')
+    expect(barFill(bars[0]!).style.height).toBe('0%')
+    expect(barFill(bars[13]!).className).toContain('--color-brand')
+    expect(barFill(bars[11]!).className).not.toContain('--color-brand')
+  })
+
+  it('breaks tokens and cost down per model, marking unpriced models instead of showing $0', async () => {
+    getStatsMock.mockResolvedValueOnce({
+      ...activityResponse,
+      modelUsage: {
+        'claude-sonnet': {
+          inputTokens: 1_900_000,
+          outputTokens: 700_000,
+          cacheReadInputTokens: 230_000,
+          cacheCreationInputTokens: 34_000,
+          costUSD: 12.5,
+        },
+        'glm-4.6': {
+          inputTokens: 40_000,
+          outputTokens: 2_000,
+          costUSD: 0,
+        },
+      },
+      unpricedModels: ['glm-4.6'],
+    })
+    render(<ActivitySettings />)
+
+    await flushActivityLoad()
+
+    const table = screen.getByRole('table')
+    const rows = within(table).getAllByRole('row')
+    expect(rows).toHaveLength(3)
+    expect(within(rows[0]!).getAllByRole('columnheader').map((cell) => cell.textContent)).toEqual([
+      'Model',
+      'New tokens',
+      'Cache hits',
+      'Estimated cost',
+    ])
+    // Sorted by total tokens, largest first.
+    expect(within(rows[1]!).getAllByRole('cell').map((cell) => cell.textContent)).toEqual([
+      'claude-sonnet',
+      '2.6M',
+      '230K',
+      '$12.50',
+    ])
+    expect(within(rows[2]!).getAllByRole('cell').map((cell) => cell.textContent)).toEqual([
+      'glm-4.6',
+      '42K',
+      '0',
+      '—',
+    ])
+  })
+
   it('supports localized heatmap mode switches and persisted display name edits', async () => {
     useSettingsStore.setState({ locale: 'zh' })
     render(<ActivitySettings />)
@@ -317,10 +419,15 @@ describe('ActivitySettings', () => {
     await flushActivityLoad()
 
     expect(screen.getByText('Token 活动')).toBeInTheDocument()
-    fireEvent.click(screen.getByRole('button', { name: '每周' }))
-    expect(screen.getByRole('button', { name: '每周' })).toHaveAttribute('aria-pressed', 'true')
-    fireEvent.click(screen.getByRole('button', { name: '累计' }))
-    expect(screen.getByRole('button', { name: '累计' })).toHaveAttribute('aria-pressed', 'true')
+    const modeGroup = screen.getByRole('radiogroup', { name: 'Token 活动' })
+    expect(within(modeGroup).getByRole('radio', { name: '每日' })).toHaveAttribute('aria-checked', 'true')
+    fireEvent.click(within(modeGroup).getByRole('radio', { name: '每周' }))
+    expect(within(modeGroup).getByRole('radio', { name: '每周' })).toHaveAttribute('aria-checked', 'true')
+    expect(within(modeGroup).getByRole('radio', { name: '每日' })).toHaveAttribute('aria-checked', 'false')
+    // Weekly mode relabels the cells as week ranges.
+    expect(screen.getAllByRole('gridcell', { name: /^2026年5月3日 - 2026年5月9日:/ }).length).toBeGreaterThan(0)
+    fireEvent.click(within(modeGroup).getByRole('radio', { name: '累计' }))
+    expect(within(modeGroup).getByRole('radio', { name: '累计' })).toHaveAttribute('aria-checked', 'true')
 
     fireEvent.click(screen.getByRole('button', { name: '编辑个人资料' }))
     const input = screen.getByLabelText('显示名称')
@@ -335,10 +442,11 @@ describe('ActivitySettings', () => {
       displayName,
       subtitle: 'relakkes.dev',
     })
+    // A long display name wraps inside the profile card instead of being cut off.
     const heading = screen.getByRole('heading', { name: displayName })
     expect(heading).toHaveClass('break-words')
     expect(heading).not.toHaveClass('truncate')
-    expect(heading.parentElement).toHaveClass('w-full')
+    expect(heading.parentElement).toHaveClass('min-w-0')
     expect(screen.getByRole('link', { name: 'relakkes.dev' })).toHaveAttribute('href', 'https://relakkes.dev')
   })
 
diff --git a/desktop/src/pages/ActivitySettings.tsx b/desktop/src/pages/ActivitySettings.tsx
index bc1d0422..731c8131 100644
--- a/desktop/src/pages/ActivitySettings.tsx
+++ b/desktop/src/pages/ActivitySettings.tsx
@@ -1,13 +1,20 @@
 import { useEffect, useMemo, useRef, useState, type ChangeEvent } from 'react'
+import { Box, ChartNoAxesColumn, CircleAlert, Pencil, Puzzle, Upload } from 'lucide-react'
 import { activityStatsApi, type ActivityStatsResponse, type DailyActivity } from '../api/activityStats'
 import {
   desktopUiPreferencesApi,
   getProfileAvatarUrl,
   type DesktopProfilePreferences,
 } from '../api/desktopUiPreferences'
+import { SettingsPageHeader, SettingsSection } from '@/components/settings/SettingsSection'
 import { Button } from '@/components/ui/Button'
 import { Card } from '@/components/ui/Card'
+import { EmptyState } from '@/components/ui/EmptyState'
+import { IconButton } from '@/components/ui/IconButton'
+import { Input } from '@/components/ui/Input'
 import { Modal } from '@/components/ui/Modal'
+import { SegmentedControl } from '@/components/ui/SegmentedControl'
+import { cx } from '@/lib/cx'
 import { type Locale, useTranslation } from '../i18n'
 import { useSettingsStore } from '../stores/settingsStore'
 import { publicAssetPath } from '../lib/publicAsset'
@@ -46,6 +53,9 @@ type PluginRankItem = {
 type HeatmapMode = 'daily' | 'weekly' | 'cumulative'
 
 const WEEK_COUNT = 52
+const CHART_DAY_COUNT = 14
+/** Columns a month name needs ("Sep", "10月") before the next label may start. */
+const MONTH_LABEL_MIN_WEEKS = 3
 const WEEKDAY_LABEL_KEYS = [
   'settings.activity.weekday.mon',
   'settings.activity.weekday.wed',
@@ -110,6 +120,13 @@ function formatDateLabel(dateKey: string, locale: Locale) {
   })
 }
 
+function formatShortDate(dateKey: string, locale: Locale) {
+  return parseLocalDate(dateKey).toLocaleDateString(DATE_LOCALES[locale], {
+    month: 'numeric',
+    day: 'numeric',
+  })
+}
+
 function formatTokens(tokens: number) {
   if (tokens >= 1_000_000_000) return `${(tokens / 1_000_000_000).toFixed(tokens >= 10_000_000_000 ? 0 : 1)}B`
   if (tokens >= 1_000_000) return `${(tokens / 1_000_000).toFixed(tokens >= 10_000_000 ? 0 : 1)}M`
@@ -283,6 +300,32 @@ function getDailyTokenMap(stats: ActivityStatsResponse | null) {
   return map
 }
 
+/** The trailing window the daily bar chart covers, ending today. */
+function buildRecentDailyTokens(stats: ActivityStatsResponse | null, dayCount: number) {
+  const today = new Date()
+  today.setHours(0, 0, 0, 0)
+  const tokenMap = getDailyTokenMap(stats)
+  return Array.from({ length: dayCount }, (_, index) => {
+    const date = localDateKey(addDays(today, index - (dayCount - 1)))
+    return { date, tokens: tokenMap.get(date) ?? 0 }
+  })
+}
+
+function buildModelRows(stats: ActivityStatsResponse | null) {
+  const unpriced = new Set(stats?.unpricedModels ?? [])
+  return Object.entries(stats?.modelUsage ?? {})
+    .map(([model, usage]) => ({
+      model,
+      fresh: getFreshTokenTotal(usage),
+      cached: usage.cacheReadInputTokens ?? 0,
+      total: getModelTokenTotal(usage),
+      costUSD: usage.costUSD ?? 0,
+      unpriced: unpriced.has(model),
+    }))
+    .filter((row) => row.total > 0)
+    .sort((a, b) => b.total - a.total || a.model.localeCompare(b.model))
+}
+
 function getHeatLevel(day: DailyActivity | undefined, tokens: number, maxScore: number) {
   const sessionCount = day?.sessionCount ?? 0
   if (sessionCount === 0 && tokens === 0) return 0
@@ -420,10 +463,16 @@ function buildMonthLabels(days: HeatmapDay[], locale: Locale) {
   const lastDate = parseLocalDate(lastDay.date)
   let previousMonth = -1
 
-  for (let week = 0; week < WEEK_COUNT; week += 1) {
+  // A month that starts in the last two columns has no room for its name; it
+  // would overhang the grid's right edge (GitHub drops it for the same reason).
+  for (let week = 0; week < WEEK_COUNT - (MONTH_LABEL_MIN_WEEKS - 1); week += 1) {
     const weekDate = addDays(firstDate, week * 7)
     if (weekDate > lastDate) break
     if (weekDate.getMonth() !== previousMonth) {
+      // The window can open on the tail of a month: its label would collide
+      // with the next one, so the full month keeps the space.
+      const previous = labels[labels.length - 1]
+      if (previous && week - previous.week < MONTH_LABEL_MIN_WEEKS) labels.pop()
       labels.push({
         week,
         label: weekDate.toLocaleDateString(DATE_LOCALES[locale], { month: 'short' }),
@@ -616,6 +665,8 @@ export function ActivitySettings() {
   }, [stats])
   const unpricedModelCount = stats?.unpricedModels?.length ?? 0
   const topPluginItems = useMemo(() => buildPluginAndSkillRankItems(stats), [stats])
+  const recentDays = useMemo(() => buildRecentDailyTokens(stats, CHART_DAY_COUNT), [stats])
+  const modelRows = useMemo(() => buildModelRows(stats), [stats])
   const metrics: SummaryMetric[] = [
     {
       label: t('settings.activity.totalTokens'),
@@ -770,10 +821,21 @@ export function ActivitySettings() {
     }
   }
 
+  const recentPeakTokens = Math.max(...recentDays.map((day) => day.tokens), 0)
+  const recentFirstDay = recentDays[0]
+  const recentLastDay = recentDays[recentDays.length - 1]
+
   return (
-    <div className="mx-auto w-full max-w-[1060px] min-w-0 pb-12">
-      <section className="relative flex min-h-[176px] flex-col items-center justify-start pt-4 text-center">
-        <div className="relative h-16 w-16 overflow-hidden rounded-full border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] shadow-[var(--shadow-card)]">
+    <div className="w-full min-w-0">
+      <SettingsPageHeader
+        title={t('settings.activity.title')}
+        description={t('settings.activity.subtitleLoading')}
+      />
+
+      {/* The identity this page is screenshotted under. The edit control stays
+          invisible until hover or keyboard focus so it never lands in a shot. */}
+      <div className="group/activity-profile mt-6 flex items-center gap-3.5 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] px-4 py-3.5">
+        <div className="relative h-11 w-11 shrink-0 overflow-hidden rounded-full border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)]">
           <img
             src={avatarSrc}
             alt={t('settings.activity.avatarAlt', { name: profile.displayName })}
@@ -784,100 +846,188 @@ export function ActivitySettings() {
             }}
           />
         </div>
-        <div className="group/activity-profile mt-4 flex w-full max-w-[756px] items-start justify-center gap-2">
-          <h1 className="min-w-0 max-w-[720px] whitespace-normal break-words text-[26px] font-semibold text-[var(--color-text-primary)] sm:text-[31px]" style={{ fontFamily: 'var(--font-headline)' }}>{profile.displayName}</h1>
-          <button
-            type="button"
-            aria-label={t('settings.activity.editProfile')}
-            title={t('settings.activity.editProfile')}
-            className="mt-1 inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-[var(--radius-md)] text-[var(--color-text-tertiary)] opacity-0 transition-[background-color,color,opacity,transform] group-hover/activity-profile:opacity-100 hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--color-brand)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface)] focus-visible:opacity-100 active:translate-y-[1px] disabled:pointer-events-none disabled:opacity-0"
-            onClick={() => {
-              setIsEditingProfile(true)
-              setDraftDisplayName(profile.displayName)
-              setDraftSubtitle(profile.subtitle)
-            }}
-            disabled={isProfileLoading}
-          >
-            <span className="material-symbols-outlined text-[16px]" aria-hidden="true">edit</span>
-          </button>
+        <div className="min-w-0 flex-1">
+          <h3 className="min-w-0 whitespace-normal break-words text-[15px] font-semibold leading-snug text-[var(--color-text-primary)]">
+            {profile.displayName}
+          </h3>
+          {profileSubtitleHref ? (
+            <a
+              href={profileSubtitleHref}
+              target="_blank"
+              rel="noreferrer"
+              className="mt-0.5 block max-w-full truncate text-xs text-[var(--color-text-tertiary)] transition-colors hover:text-[var(--color-text-accent)]"
+            >
+              {profile.subtitle}
+            </a>
+          ) : (
+            <div className="mt-0.5 max-w-full truncate text-xs text-[var(--color-text-tertiary)]">{profile.subtitle}</div>
+          )}
+          {profileStatus && <div className="mt-1 text-xs text-[var(--color-success)]">{profileStatus}</div>}
+          {profileError && !isEditingProfile && <div className="mt-1 text-xs text-[var(--color-error)]">{profileError}</div>}
         </div>
-        {profileSubtitleHref ? (
-          <a
-            href={profileSubtitleHref}
-            target="_blank"
-            rel="noreferrer"
-            className="mt-2 inline-flex max-w-full items-center justify-center gap-2 truncate text-base text-[var(--color-text-tertiary)] transition-colors hover:text-[var(--color-text-primary)]"
-          >
-            <span>{profile.subtitle}</span>
-          </a>
-        ) : (
-          <div className="mt-2 max-w-full truncate text-base text-[var(--color-text-tertiary)]">{profile.subtitle}</div>
-        )}
-        {profileStatus && <div className="mt-3 text-xs text-[var(--color-success)]">{profileStatus}</div>}
-        {profileError && !isEditingProfile && <div className="mt-3 text-xs text-[var(--color-error)]">{profileError}</div>}
-      </section>
+        <IconButton
+          icon={<Pencil size={14} strokeWidth={1.75} aria-hidden="true" />}
+          label={t('settings.activity.editProfile')}
+          size="sm"
+          tone="muted"
+          disabledStyle="hide"
+          className="opacity-0 group-hover/activity-profile:opacity-100 focus-visible:opacity-100"
+          onClick={() => {
+            setIsEditingProfile(true)
+            setDraftDisplayName(profile.displayName)
+            setDraftSubtitle(profile.subtitle)
+          }}
+          disabled={isProfileLoading}
+        />
+      </div>
 
-      <section className="activity-summary-panel mx-auto mt-7 w-full min-w-0 max-w-[900px]">
-        {isLoading ? (
-          <div className="activity-summary-grid grid gap-3">
-            {Array.from({ length: 5 }).map((_, index) => (
-              <Card
-                key={index}
-                radius="xl"
-                surface="lowest"
-                padding="none"
-                shadow="card"
-                className={`activity-summary-metric min-h-[92px] animate-pulse px-4 py-4 ${
-                  index === 0 ? 'activity-summary-metric-primary' : ''
-                }`}
-              >
-                <div className="mx-auto h-6 w-16 rounded-[var(--radius-sm)] bg-[var(--color-surface-container)]" />
-                <div className="mx-auto mt-2.5 h-3 w-20 rounded-[var(--radius-sm)] bg-[var(--color-surface-container)]" />
-                <div className="mx-auto mt-2 h-2.5 w-14 rounded-[var(--radius-sm)] bg-[var(--color-surface-container)]" />
-              </Card>
-            ))}
-          </div>
-        ) : (
-          <div className="activity-summary-grid grid gap-3">
-            {metrics.map((metric, index) => {
-              const isPrimary = index === 0
-              return (
+      <section className="activity-summary-panel mt-3 w-full min-w-0">
+        <div className="activity-summary-grid grid gap-3">
+          {isLoading
+            ? Array.from({ length: 5 }).map((_, index) => (
                 <Card
-                  key={metric.label}
-                  radius="xl"
+                  key={index}
+                  surface="lowest"
+                  padding="none"
+                  aria-hidden="true"
+                  className={cx(
+                    'activity-summary-metric grid min-h-[92px] animate-pulse content-start gap-2 px-4 py-3.5',
+                    index === 0 && 'activity-summary-metric-primary',
+                  )}
+                >
+                  <div className="h-3 w-16 rounded-[var(--radius-xs)] bg-[var(--color-surface-container)]" />
+                  <div className="h-6 w-20 rounded-[var(--radius-xs)] bg-[var(--color-surface-container)]" />
+                  <div className="h-3 w-12 rounded-[var(--radius-xs)] bg-[var(--color-surface-container)]" />
+                </Card>
+              ))
+            : metrics.map((metric, index) => (
+                <Card
+                  key={metric.label}
                   surface="lowest"
                   padding="none"
-                  lift
                   // `backwards` holds the entry frame through `animationDelay` so the stagger still
                   // reads, without a standalone `opacity-0`: that pairing is what made these cards
                   // invisible once the keyframes they named were dropped from globals.css.
-                  className={`activity-summary-metric min-w-0 px-4 py-4 text-center [animation:screen-pop_420ms_cubic-bezier(0.16,1,0.3,1)_backwards] motion-reduce:animate-none ${
-                    isPrimary ? 'activity-summary-metric-primary' : ''
-                  }`}
+                  className={cx(
+                    'activity-summary-metric grid min-w-0 content-start gap-1 px-4 py-3.5',
+                    '[animation:screen-pop_420ms_cubic-bezier(0.16,1,0.3,1)_backwards] motion-reduce:animate-none',
+                    index === 0 && 'activity-summary-metric-primary',
+                  )}
                   style={{ animationDelay: `${index * 45}ms` }}
                 >
-                  <div className="flex min-h-[68px] flex-col items-center justify-center gap-2">
-                    <div
-                      // Two lines rather than one truncated one: durations like "436 小时 26 分钟"
-                      // do not fit a fifth of the row and were rendering as "436 小…".
-                      className={`activity-summary-value max-w-full min-w-0 line-clamp-2 font-semibold leading-[1.15] text-[var(--color-text-primary)] tabular-nums ${
-                        isPrimary ? 'text-[25px]' : 'text-[24px]'
-                      }`}
-                      style={{ fontFamily: 'var(--font-headline)' }}
-                    >
-                      {metric.value}
-                    </div>
-                    <div className="min-w-0 truncate text-[12px] font-medium leading-tight text-[var(--color-text-tertiary)]">
-                      {metric.label}
-                    </div>
-                    {metric.detail && <div className="max-w-full truncate text-[11px] leading-tight text-[var(--color-text-tertiary)]">{metric.detail}</div>}
+                  <div className="min-w-0 truncate text-xs text-[var(--color-text-tertiary)]">{metric.label}</div>
+                  <div
+                    // Two lines rather than one truncated one: durations like "436 小时 26 分钟"
+                    // do not fit a third of the row and were rendering as "436 小…".
+                    className="activity-summary-value line-clamp-2 min-w-0 max-w-full text-[22px] font-semibold leading-tight tabular-nums text-[var(--color-text-primary)]"
+                  >
+                    {metric.value}
                   </div>
+                  {metric.detail && (
+                    <div className="min-w-0 truncate text-xs text-[var(--color-text-tertiary)]">{metric.detail}</div>
+                  )}
                 </Card>
+              ))}
+        </div>
+      </section>
+
+      {!isLoading && !error && hasUsage && recentFirstDay && recentLastDay && (
+        <Card surface="lowest" padding="none" className="mt-3 px-4 pb-2.5 pt-4">
+          <div className="mb-1 flex items-baseline justify-between gap-3">
+            <span className="min-w-0 truncate text-xs text-[var(--color-text-secondary)]">
+              {t('settings.activity.heatmapLabel')}
+            </span>
+            <span className="shrink-0 font-mono text-[11px] tabular-nums text-[var(--color-text-tertiary)]">
+              {formatShortDate(recentFirstDay.date, locale)} – {formatShortDate(recentLastDay.date, locale)}
+            </span>
+          </div>
+          <ol
+            aria-label={t('settings.activity.heatmapLabel')}
+            className="flex h-[150px] items-end gap-2 pt-5"
+            style={{
+              backgroundImage: 'repeating-linear-gradient(to top, var(--color-border) 0 1px, transparent 1px 43px)',
+            }}
+          >
+            {recentDays.map((day, index) => {
+              const isLast = index === recentDays.length - 1
+              const isPeak = day.tokens > 0 && day.tokens === recentPeakTokens
+              const height = recentPeakTokens > 0 ? (day.tokens / recentPeakTokens) * 100 : 0
+              const dateLabel = formatDateLabel(day.date, locale)
+              return (
+                <li
+                  key={day.date}
+                  className="group/activity-bar relative flex h-full min-w-0 flex-1 items-end"
+                  title={`${dateLabel} · ${formatTokens(day.tokens)} ${t('settings.activity.tokens')}`}
+                >
+                  <span
+                    aria-hidden="true"
+                    className={cx(
+                      'w-full rounded-t-[var(--radius-xs)] transition-colors',
+                      isLast
+                        ? 'bg-[var(--color-brand)]'
+                        : 'bg-[var(--color-outline)] group-hover/activity-bar:bg-[var(--color-text-tertiary)]',
+                    )}
+                    // Today keeps a 2px stub even before its first reply, so the
+                    // highlighted "now" end of the window never disappears.
+                    style={{ height: `${height}%`, minHeight: isLast ? 2 : undefined }}
+                  />
+                  {day.tokens > 0 && (
+                    <span
+                      aria-hidden="true"
+                      className={cx(
+                        'pointer-events-none absolute left-1/2 -translate-x-1/2 whitespace-nowrap font-mono text-[11px] tabular-nums text-[var(--color-text-tertiary)]',
+                        isLast || isPeak ? 'opacity-100' : 'opacity-0 group-hover/activity-bar:opacity-100',
+                      )}
+                      style={{ bottom: `calc(${height}% + 4px)` }}
+                    >
+                      {formatTokens(day.tokens)}
+                    </span>
+                  )}
+                  <span className="sr-only">{`${dateLabel}: ${formatTokens(day.tokens)} ${t('settings.activity.tokens')}`}</span>
+                </li>
               )
             })}
+          </ol>
+          <div aria-hidden="true" className="mt-1.5 flex gap-2">
+            {recentDays.map((day, index) => (
+              <span
+                key={day.date}
+                className="min-w-0 flex-1 whitespace-nowrap text-center font-mono text-[11px] tabular-nums text-[var(--color-text-tertiary)]"
+              >
+                {(recentDays.length - 1 - index) % 3 === 0 ? formatShortDate(day.date, locale) : ''}
+              </span>
+            ))}
           </div>
-        )}
-      </section>
+        </Card>
+      )}
+
+      {!isLoading && !error && hasUsage && modelRows.length > 0 && (
+        <Card surface="lowest" padding="none" role="table" className="mt-3 overflow-hidden">
+          <div
+            role="row"
+            className="grid grid-cols-[minmax(0,1.6fr)_minmax(0,0.8fr)_minmax(0,0.8fr)_minmax(0,0.8fr)] gap-3 bg-[var(--color-surface-container)] px-4 py-2.5 text-xs font-semibold text-[var(--color-text-tertiary)]"
+          >
+            <span role="columnheader" className="min-w-0 truncate">{t('settings.agents.model')}</span>
+            <span role="columnheader" className="min-w-0 truncate text-right">{t('settings.activity.freshTokens')}</span>
+            <span role="columnheader" className="min-w-0 truncate text-right">{t('settings.activity.cachedTokens')}</span>
+            <span role="columnheader" className="min-w-0 truncate text-right">{t('settings.activity.estimatedCost')}</span>
+          </div>
+          {modelRows.map((row) => (
+            <div
+              key={row.model}
+              role="row"
+              className="grid grid-cols-[minmax(0,1.6fr)_minmax(0,0.8fr)_minmax(0,0.8fr)_minmax(0,0.8fr)] items-center gap-3 border-t border-[var(--color-border)] px-4 py-2.5 text-[13px] tabular-nums text-[var(--color-text-primary)]"
+            >
+              <span role="cell" className="min-w-0 truncate font-mono text-xs" title={row.model}>{row.model}</span>
+              <span role="cell" className="min-w-0 truncate text-right">{formatTokens(row.fresh)}</span>
+              <span role="cell" className="min-w-0 truncate text-right">{formatTokens(row.cached)}</span>
+              <span role="cell" className="min-w-0 truncate text-right">
+                {row.unpriced ? <span className="text-[var(--color-text-tertiary)]">—</span> : formatCostUSD(row.costUSD, locale)}
+              </span>
+            </div>
+          ))}
+        </Card>
+      )}
 
       <Modal
         open={isEditingProfile}
@@ -898,29 +1048,17 @@ export function ActivitySettings() {
         <p className="text-xs text-[var(--color-text-tertiary)]">{t('settings.activity.displayNameHelper')}</p>
 
         <div className="mt-5 grid gap-4">
-          <div className="grid gap-2">
-            <label htmlFor="activity-profile-display-name" className="text-xs font-medium text-[var(--color-text-secondary)]">
-              {t('settings.activity.displayName')}
-            </label>
-            <input
-              id="activity-profile-display-name"
-              value={draftDisplayName}
-              onChange={(event) => setDraftDisplayName(event.target.value)}
-              className="h-10 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] px-3 text-sm text-[var(--color-text-primary)] outline-none transition-colors focus:border-[var(--color-border-focus)]"
-            />
-          </div>
+          <Input
+            label={t('settings.activity.displayName')}
+            value={draftDisplayName}
+            onChange={(event) => setDraftDisplayName(event.target.value)}
+          />
 
-          <div className="grid gap-2">
-            <label htmlFor="activity-profile-subtitle" className="text-xs font-medium text-[var(--color-text-secondary)]">
-              {t('settings.activity.subtitle')}
-            </label>
-            <input
-              id="activity-profile-subtitle"
-              value={draftSubtitle}
-              onChange={(event) => setDraftSubtitle(event.target.value)}
-              className="h-10 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] px-3 text-sm text-[var(--color-text-primary)] outline-none transition-colors focus:border-[var(--color-border-focus)]"
-            />
-          </div>
+          <Input
+            label={t('settings.activity.subtitle')}
+            value={draftSubtitle}
+            onChange={(event) => setDraftSubtitle(event.target.value)}
+          />
 
           <div className="grid gap-2">
             <div className="text-xs font-medium text-[var(--color-text-secondary)]">{t('settings.activity.avatar')}</div>
@@ -937,7 +1075,7 @@ export function ActivitySettings() {
                 variant="secondary"
                 size="base"
                 onClick={() => avatarInputRef.current?.click()}
-                icon={<span className="material-symbols-outlined text-[15px]" aria-hidden="true">upload</span>}
+                icon={<Upload size={14} strokeWidth={1.75} aria-hidden="true" />}
               >
                 {t('settings.activity.changeAvatar')}
               </Button>
@@ -950,77 +1088,74 @@ export function ActivitySettings() {
           </div>
         </div>
 
-        {profileError && <div className="mt-4 rounded-[var(--radius-md)] border border-[var(--color-error)] bg-[var(--color-error-container)] px-3 py-2 text-xs text-[var(--color-on-error-container)]">{profileError}</div>}
+        {profileError && (
+          <div className="mt-4 flex items-start gap-2 rounded-[var(--radius-md)] bg-[var(--color-error-container)] px-3 py-2 text-xs text-[var(--color-on-error-container)]">
+            <CircleAlert size={14} strokeWidth={1.75} aria-hidden="true" className="mt-px shrink-0" />
+            <span className="min-w-0">{profileError}</span>
+          </div>
+        )}
       </Modal>
 
-      <div className="mt-10">
-        <div className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-          <div>
-            <h2 className="text-xl font-semibold text-[var(--color-text-primary)]" style={{ fontFamily: 'var(--font-headline)' }}>{t('settings.activity.tokenActivity')}</h2>
-          </div>
-          <div className="inline-flex w-fit items-center gap-7">
-            {modeOptions.map((option) => (
-              <button
-                key={option.mode}
-                type="button"
-                aria-pressed={heatmapMode === option.mode}
-                title={option.help}
-                className={`text-lg font-semibold transition-[color,transform] active:translate-y-[1px] ${
-                  heatmapMode === option.mode
-                    ? 'text-[var(--color-text-primary)]'
-                    : 'text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)]'
-                }`}
-                onClick={() => setHeatmapMode(option.mode)}
-              >
-                {option.label}
-              </button>
-            ))}
-          </div>
-        </div>
-
+      <SettingsSection
+        title={t('settings.activity.tokenActivity')}
+        action={
+          <SegmentedControl
+            size="sm"
+            label={t('settings.activity.tokenActivity')}
+            value={heatmapMode}
+            onChange={setHeatmapMode}
+            items={modeOptions.map((option) => ({ value: option.mode, label: option.label, title: option.help }))}
+          />
+        }
+      >
         {isLoading ? (
-          <div className="min-h-[190px] space-y-3">
-            <div className="h-4 w-1/4 animate-pulse rounded bg-[var(--color-surface-container)]" />
-            <div className="grid grid-flow-col gap-[3px]">
-              {Array.from({ length: 52 }).map((_, col) => (
+          <Card surface="lowest" padding="none" aria-hidden="true" className="min-h-[190px] px-4 py-4">
+            <div className="h-3 w-1/4 animate-pulse rounded-[var(--radius-xs)] bg-[var(--color-surface-container)]" />
+            <div className="mt-3 grid grid-flow-col justify-start gap-[3px]">
+              {Array.from({ length: WEEK_COUNT }).map((_, col) => (
                 <div key={col} className="grid grid-rows-7 gap-[3px]">
                   {Array.from({ length: 7 }).map((__, row) => (
-                    <div key={row} className="h-2.5 w-2.5 animate-pulse rounded-[3px] bg-[var(--color-surface-container)]" />
+                    <div key={row} className="activity-heat-swatch h-2.5 w-2.5 animate-pulse bg-[var(--color-surface-container)]" />
                   ))}
                 </div>
               ))}
             </div>
-          </div>
+          </Card>
         ) : error ? (
-          <div className="rounded-[var(--radius-md)] border border-[var(--color-error)] bg-[var(--color-error-container)] px-4 py-3 text-sm text-[var(--color-on-error-container)]">
-            {error}
+          <div
+            role="alert"
+            className="flex items-start gap-2 rounded-[var(--radius-md)] bg-[var(--color-error-container)] px-3 py-2 text-xs text-[var(--color-on-error-container)]"
+          >
+            <CircleAlert size={14} strokeWidth={1.75} aria-hidden="true" className="mt-px shrink-0" />
+            <span className="min-w-0 break-words">{error}</span>
           </div>
         ) : !hasUsage ? (
-          <div className="flex min-h-[190px] items-center justify-center">
-            <div className="max-w-sm text-center">
-              <div className="mx-auto flex h-11 w-11 items-center justify-center rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] text-[var(--color-text-tertiary)]">
-                <span className="material-symbols-outlined text-[20px]" aria-hidden="true">monitoring</span>
-              </div>
-              <div className="mt-3 text-sm font-medium text-[var(--color-text-primary)]">{t('settings.activity.emptyTitle')}</div>
-              <p className="mt-1 text-sm leading-5 text-[var(--color-text-tertiary)]">{t('settings.activity.emptyBody')}</p>
-            </div>
-          </div>
+          <EmptyState
+            size="md"
+            icon={<ChartNoAxesColumn size={18} strokeWidth={1.75} />}
+            title={t('settings.activity.emptyTitle')}
+            description={t('settings.activity.emptyBody')}
+          />
         ) : (
-          <>
-            <div ref={heatmapMeasureRef} className="min-w-0 pb-2">
+          <Card surface="lowest" padding="none" className="px-4 pb-3.5 pt-4">
+            <div ref={heatmapMeasureRef} className="min-w-0">
               <div className="relative" style={{ width: heatmapWidth, maxWidth: '100%' }}>
+                {/* Absolutely placed by week: grid auto-placement pushed a label
+                    whose 4-column span ran past the last week onto a second row,
+                    and wrapped "10月" into two lines. */}
                 <div
-                  className="mb-3 grid h-5 text-[11px] leading-none text-[var(--color-text-tertiary)]"
-                  style={{
-                    marginLeft: HEAT_LABEL_WIDTH,
-                    gridTemplateColumns: `repeat(${WEEK_COUNT}, ${heatCellSize}px)`,
-                    columnGap: HEAT_CELL_GAP,
-                  }}
+                  data-testid="activity-month-labels"
+                  className="relative mb-3 h-5 text-[11px] leading-none text-[var(--color-text-tertiary)]"
+                  style={{ marginLeft: HEAT_LABEL_WIDTH }}
                 >
                   {monthLabels.map((month) => (
-                    <div key={`${month.week}-${month.label}`} style={{ gridColumn: `${month.week + 1} / span 4` }}>
+                    <span
+                      key={`${month.week}-${month.label}`}
+                      className="absolute top-0 whitespace-nowrap"
+                      style={{ left: month.week * (heatCellSize + HEAT_CELL_GAP) }}
+                    >
                       {month.label}
-                    </div>
+                    </span>
                   ))}
                 </div>
 
@@ -1058,11 +1193,12 @@ export function ActivitySettings() {
                           role="gridcell"
                           aria-label={`${cellTitle}: ${cellDetail}`}
                           aria-describedby={activeTooltipDate === day.date ? tooltipId : undefined}
-                          className={`activity-heat-cell rounded-[3px] border focus:outline-none focus:ring-2 focus:ring-[var(--color-brand)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface)] ${
+                          className={cx(
+                            'activity-heat-cell border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--color-surface-container-lowest)]',
                             isSelected
                               ? 'is-active border-[var(--color-activity-cell-border-active)]'
-                              : 'border-[var(--color-activity-cell-border)] hover:border-[var(--color-activity-cell-border-hover)]'
-                          }`}
+                              : 'border-[var(--color-activity-cell-border)] hover:border-[var(--color-activity-cell-border-hover)]',
+                          )}
                           style={{
                             width: heatCellSize,
                             height: heatCellSize,
@@ -1081,11 +1217,11 @@ export function ActivitySettings() {
                   <div
                     id={`activity-day-tooltip-${tooltipDay.date}`}
                     role="tooltip"
-                    className="pointer-events-none absolute z-20 min-w-[172px] rounded-[var(--radius-md)] border border-[var(--color-activity-tooltip-border)] bg-[var(--color-activity-tooltip-surface)] px-3 py-2 text-xs shadow-xl"
+                    className="pointer-events-none absolute z-[var(--z-tooltip)] min-w-[172px] rounded-[var(--radius-md)] border border-[var(--color-activity-tooltip-border)] bg-[var(--color-activity-tooltip-surface)] px-2.5 py-1.5 text-xs shadow-[var(--shadow-dropdown)]"
                     style={tooltipStyle}
                   >
                     <div className="font-medium text-[var(--color-activity-tooltip-text)]">{getHeatmapCellTitle(tooltipDay, locale, t)}</div>
-                    <div className="mt-1 text-[var(--color-activity-tooltip-muted)]">
+                    <div className="mt-0.5 tabular-nums text-[var(--color-activity-tooltip-muted)]">
                       {getHeatmapCellDetail(tooltipDay, t)}
                     </div>
                   </div>
@@ -1093,62 +1229,65 @@ export function ActivitySettings() {
               </div>
             </div>
 
-            <div className="mt-3 flex items-center justify-end gap-2 text-xs text-[var(--color-text-tertiary)] xl:mt-4">
-              <span>{t('settings.activity.less')}</span>
+            <div className="mt-3 flex items-center justify-end gap-1.5 text-[11px] text-[var(--color-text-tertiary)]">
+              <span className="mr-0.5">{t('settings.activity.less')}</span>
               {HEAT_COLORS.map((color) => (
                 <span
                   key={color}
                   aria-hidden="true"
-                  className="rounded-[3px] border border-[var(--color-activity-cell-border)]"
+                  className="activity-heat-swatch border border-[var(--color-activity-cell-border)]"
                   style={{ width: heatCellSize, height: heatCellSize, backgroundColor: color }}
                 />
               ))}
-              <span>{t('settings.activity.more')}</span>
+              <span className="ml-0.5">{t('settings.activity.more')}</span>
             </div>
-          </>
+          </Card>
         )}
-      </div>
+      </SettingsSection>
 
       {!isLoading && !error && hasUsage && (
-        <div className={`mt-12 grid gap-10 ${
-          topPluginItems.length > 0 ? 'lg:grid-cols-[minmax(0,0.9fr)_minmax(0,1fr)]' : 'lg:max-w-[520px]'
-        }`}>
-          <section className="min-w-0">
-            <h2 className="text-lg font-semibold text-[var(--color-text-primary)]" style={{ fontFamily: 'var(--font-headline)' }}>{t('settings.activity.activityInsights')}</h2>
-            <dl className="mt-5 grid gap-3">
-              {insightMetrics.map((metric) => (
-                <div key={metric.label} className="grid grid-cols-[minmax(0,1fr)_auto] items-baseline gap-5">
-                  <dt className="min-w-0 truncate text-sm font-medium text-[var(--color-text-tertiary)]">{metric.label}</dt>
-                  <dd className="min-w-0 text-right text-sm font-semibold text-[var(--color-text-primary)]">
-                    <span className="tabular-nums">{metric.value}</span>
-                    {metric.detail && (
-                      <span className="ml-2 text-xs font-medium text-[var(--color-text-tertiary)]">{metric.detail}</span>
-                    )}
-                  </dd>
-                </div>
-              ))}
-            </dl>
-          </section>
-
-          {topPluginItems.length > 0 && (
-            <section className="min-w-0">
-              <h2 className="text-lg font-semibold text-[var(--color-text-primary)]" style={{ fontFamily: 'var(--font-headline)' }}>{t('settings.activity.mostUsedPluginsAndSkills')}</h2>
-              <div className="mt-5 grid gap-3">
-                {topPluginItems.map((item) => (
-                  <div key={item.id} className="grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-3">
-                    <span className="flex h-7 w-7 items-center justify-center rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] text-[var(--color-text-tertiary)]">
-                      <span className="material-symbols-outlined text-[16px]" aria-hidden="true">
-                        {item.kind === 'skill' ? 'extension' : 'hub'}
-                      </span>
-                    </span>
-                    <span className="min-w-0 truncate text-sm font-medium text-[var(--color-text-primary)]">{item.label}</span>
-                    <span className="text-sm text-[var(--color-text-tertiary)] tabular-nums">{formatRunCount(item.count, t)}</span>
+        <>
+          <SettingsSection title={t('settings.activity.activityInsights')}>
+            <Card surface="lowest" padding="none" className="overflow-hidden">
+              <dl className="divide-y divide-[var(--color-border)]">
+                {insightMetrics.map((metric) => (
+                  <div key={metric.label} className="flex min-h-[44px] items-center justify-between gap-6 px-4 py-2.5">
+                    <dt className="min-w-0 truncate text-[13px] text-[var(--color-text-secondary)]">{metric.label}</dt>
+                    <dd className="flex min-w-0 items-baseline justify-end gap-2 text-right">
+                      {metric.detail && (
+                        <span className="min-w-0 truncate text-xs text-[var(--color-text-tertiary)]">{metric.detail}</span>
+                      )}
+                      <span className="shrink-0 text-[13px] font-medium tabular-nums text-[var(--color-text-primary)]">{metric.value}</span>
+                    </dd>
                   </div>
                 ))}
-              </div>
-            </section>
+              </dl>
+            </Card>
+          </SettingsSection>
+
+          {topPluginItems.length > 0 && (
+            <SettingsSection title={t('settings.activity.mostUsedPluginsAndSkills')}>
+              <Card surface="lowest" padding="none" className="overflow-hidden">
+                <ul className="divide-y divide-[var(--color-border)]">
+                  {topPluginItems.map((item) => (
+                    <li key={item.id} className="flex min-h-[44px] items-center gap-3 px-4 py-2">
+                      <span
+                        aria-hidden="true"
+                        className="flex h-7 w-7 shrink-0 items-center justify-center rounded-[var(--radius-md)] bg-[var(--color-surface-container)] text-[var(--color-text-tertiary)]"
+                      >
+                        {item.kind === 'skill'
+                          ? <Box size={14} strokeWidth={1.75} />
+                          : <Puzzle size={14} strokeWidth={1.75} />}
+                      </span>
+                      <span className="min-w-0 flex-1 truncate font-mono text-xs text-[var(--color-text-primary)]">{item.label}</span>
+                      <span className="shrink-0 text-xs tabular-nums text-[var(--color-text-tertiary)]">{formatRunCount(item.count, t)}</span>
+                    </li>
+                  ))}
+                </ul>
+              </Card>
+            </SettingsSection>
           )}
-        </div>
+        </>
       )}
     </div>
   )
diff --git a/desktop/src/pages/AdapterSettings.test.tsx b/desktop/src/pages/AdapterSettings.test.tsx
index 21a6790d..eb9d8da5 100644
--- a/desktop/src/pages/AdapterSettings.test.tsx
+++ b/desktop/src/pages/AdapterSettings.test.tsx
@@ -333,6 +333,33 @@ describe('AdapterSettings config saving', () => {
       },
     })
   })
+
+  // The streaming-card option moved from a bare native checkbox to the shared
+  // Switch; the toggle must still land in the saved Feishu patch both ways.
+  it('round-trips the Feishu streaming card switch into the saved patch', async () => {
+    const updateConfig = vi.fn(async (_patch: Partial<AdapterFileConfig>) => {})
+    renderAdapterSettings({ feishu: { appId: 'cli_x', appSecret: 'secret', streamingCard: false } }, { updateConfig })
+
+    fireEvent.click(screen.getByRole('tab', { name: 'Feishu' }))
+    const toggle = screen.getByRole('switch', { name: 'Streaming Card Mode' })
+    expect(toggle).not.toBeChecked()
+    fireEvent.click(toggle)
+    expect(toggle).toBeChecked()
+    fireEvent.click(screen.getByRole('button', { name: 'Save' }))
+
+    await waitFor(() => {
+      expect(updateConfig).toHaveBeenCalledTimes(1)
+    })
+    expect(updateConfig.mock.calls[0]![0].feishu).toMatchObject({ streamingCard: true })
+
+    fireEvent.click(toggle)
+    expect(toggle).not.toBeChecked()
+    fireEvent.click(screen.getByRole('button', { name: /^Save/ }))
+    await waitFor(() => {
+      expect(updateConfig).toHaveBeenCalledTimes(2)
+    })
+    expect(updateConfig.mock.calls[1]![0].feishu).toMatchObject({ streamingCard: false })
+  })
 })
 
 describe('AdapterSettings account unbind confirmation', () => {
diff --git a/desktop/src/pages/AdapterSettings.tsx b/desktop/src/pages/AdapterSettings.tsx
index 2053fae9..7bcb2f33 100644
--- a/desktop/src/pages/AdapterSettings.tsx
+++ b/desktop/src/pages/AdapterSettings.tsx
@@ -1,11 +1,23 @@
-import { useState, useEffect, useCallback, useRef } from 'react'
+import { useState, useEffect, useCallback, useRef, type ReactNode } from 'react'
+import { Bot, ChevronRight, CircleAlert, CircleCheck, ExternalLink, QrCode, TriangleAlert } from 'lucide-react'
 import { useAdapterStore } from '../stores/adapterStore'
 import { useTranslation } from '../i18n'
+import { cx } from '@/lib/cx'
 import { Input } from '@/components/ui/Input'
 import { Button } from '@/components/ui/Button'
+import { Badge, StatusDot, type Tone } from '@/components/ui/Badge'
+import { SegmentedControl } from '@/components/ui/SegmentedControl'
 import { LoadingState } from '@/components/ui/LoadingState'
 import { DirectoryPicker } from '@/components/composite/DirectoryPicker'
 import { ConfirmDialog } from '@/components/ui/ConfirmDialog'
+import {
+  SettingsBlock,
+  SettingsGroup,
+  SettingsPageHeader,
+  SettingsRow,
+  SettingsSection,
+  SettingsSwitchRow,
+} from '@/components/settings/SettingsSection'
 import QRCode from 'qrcode'
 
 type ImTab = 'telegram' | 'feishu' | 'wechat' | 'dingtalk' | 'whatsapp' | 'wecom' | 'qq' | 'slack'
@@ -22,6 +34,23 @@ type AdapterUnbindTarget =
 const FEISHU_CREATE_BOT_URL = 'https://open.feishu.cn/page/openclaw?form=multiAgent'
 const IM_CONFIG_DOCS_URL = 'https://cchaha.ai/im/'
 
+// Section heads inside the IM card use the settings-row type: 13 medium title
+// over a 12 tertiary line, matching `SettingsRow`.
+const ROW_TITLE = 'text-[13px] font-medium leading-5 text-[var(--color-text-primary)]'
+const ROW_DESC = 'mt-0.5 text-xs leading-[1.5] text-[var(--color-text-tertiary)]'
+const STATUS_TEXT = 'text-[13px] text-[var(--color-text-secondary)]'
+const URL_LINK = 'block truncate font-mono text-[11px] text-[var(--color-text-accent)] hover:underline'
+// QR codes keep a white field in every theme: scanners need the contrast.
+const QR_IMAGE =
+  'h-40 w-40 shrink-0 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-white object-contain p-2'
+// An external link dressed as `Button variant="secondary" size="sm"`.
+const LINK_BUTTON = [
+  'inline-flex h-6 shrink-0 items-center justify-center gap-1.5 self-start rounded-[var(--radius-md)] px-2',
+  'border border-[var(--color-border)] bg-[var(--color-surface)] text-xs font-medium text-[var(--color-text-primary)]',
+  'transition-[background-color,border-color] duration-150 hover:border-[var(--color-outline)] hover:bg-[var(--color-surface-hover)]',
+  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface)]',
+].join(' ')
+
 const IM_TABS: readonly ImTab[] = [
   'telegram',
   'feishu',
@@ -880,106 +909,115 @@ export function AdapterSettings() {
 
   if (isLoading) {
     return (
-      <div className="flex items-center justify-center py-12">
-        <LoadingState label={t('common.loading')} variant="inline" size="md" />
+      <div className="min-w-0">
+        <div className="flex items-center justify-center py-12">
+          <LoadingState label={t('common.loading')} variant="inline" size="md" />
+        </div>
       </div>
     )
   }
 
+  const wechatTone: Tone = config.wechat?.accountId ? 'success' : isWechatBinding ? 'info' : 'neutral'
+  const whatsappTone: Tone = config.whatsapp?.accountJid ? 'success' : isWhatsAppBinding ? 'info' : 'neutral'
+  const dingtalkTone: Tone = dtAuthStatus === 'error'
+    ? 'danger'
+    : dtAuthStatus === 'waiting'
+      ? 'info'
+      : dtAuthStatus === 'bound' || config.dingtalk?.clientId
+        ? 'success'
+        : 'neutral'
+
   return (
-    <div className="max-w-2xl space-y-8">
+    <div className="min-w-0">
       {/* Page header. The pane opened straight onto its description, the only
           one of the sixteen sections without a title. */}
-      <div>
-        <h2
-          className="mb-1.5 text-[24px] font-semibold leading-tight text-[var(--color-text-primary)]"
-          style={{ fontFamily: 'var(--font-headline)' }}
-        >
-          {t('settings.tab.adapters')}
-        </h2>
-        <p className="text-[13.5px] leading-6 text-[var(--color-text-secondary)]">
-          {t('settings.adapters.description')}{' '}
-          <a
-            href={IM_CONFIG_DOCS_URL}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="inline-flex items-center gap-1 font-medium text-[var(--color-brand)] transition-colors hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-brand)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-background)]"
-          >
-            {t('settings.adapters.configurationDocs')}
-            <span className="material-symbols-outlined text-[14px]" aria-hidden="true">open_in_new</span>
-          </a>
-          {t('settings.adapters.descriptionAfterDocs')}
-        </p>
-      </div>
+      <SettingsPageHeader
+        title={t('settings.tab.adapters')}
+        description={(
+          <>
+            {t('settings.adapters.description')}{' '}
+            <a
+              href={IM_CONFIG_DOCS_URL}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-0.5 rounded-[var(--radius-xs)] text-[var(--color-text-accent)] transition-colors hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface)]"
+            >
+              {t('settings.adapters.configurationDocs')}
+              <ExternalLink size={12} strokeWidth={2} aria-hidden="true" />
+            </a>
+            {t('settings.adapters.descriptionAfterDocs')}
+          </>
+        )}
+      />
 
       {/* Pairing */}
-      <section className="rounded-[var(--radius-xl)] border border-[var(--color-border)] overflow-hidden">
-        <div className="flex items-center gap-2 px-4 py-3 bg-[var(--color-surface-hover)] border-b border-[var(--color-border)]">
-          <span className="material-symbols-outlined text-[18px] text-[var(--color-text-secondary)]">link</span>
-          <span className="text-sm font-semibold text-[var(--color-text-primary)]">{t('settings.adapters.pairing')}</span>
-        </div>
-        <div className="p-4 space-y-4">
-          <p className="text-sm text-[var(--color-text-secondary)]">{t('settings.adapters.pairingDesc')}</p>
-
-          {/* Generate code */}
-          <div className="flex items-center gap-3">
-            <Button onClick={handleGenerateCode} loading={isGenerating}>
-              {pairingCode || isPairingActive ? t('settings.adapters.regenerateCode') : t('settings.adapters.generateCode')}
-            </Button>
-            {pairingCode && (
-              <div className="flex items-center gap-2">
-                <span className="font-mono text-2xl font-bold tracking-[0.3em] text-[var(--color-brand)]">
-                  {pairingCode}
-                </span>
-                <span className="text-xs text-[var(--color-text-tertiary)]">
-                  {t('settings.adapters.codeExpiresIn')} 60 {t('settings.adapters.minutes')}
-                </span>
-              </div>
-            )}
+      <section className="mt-7">
+        <SettingsGroup>
+          <SettingsRow
+            title={t('settings.adapters.pairing')}
+            description={t('settings.adapters.pairingDesc')}
+            layout="inline"
+          >
             {!pairingCode && isPairingActive && (
-              <span className="text-xs text-[var(--color-text-tertiary)]">
+              <span className="text-xs tabular-nums text-[var(--color-text-tertiary)]">
                 {t('settings.adapters.codeExpiresIn')} {minutesLeft} {t('settings.adapters.minutes')}
               </span>
             )}
-          </div>
+            <Button variant="secondary" size="sm" onClick={handleGenerateCode} loading={isGenerating}>
+              {pairingCode || isPairingActive ? t('settings.adapters.regenerateCode') : t('settings.adapters.generateCode')}
+            </Button>
+          </SettingsRow>
+
           {pairingCode && (
-            <p className="text-xs text-[var(--color-text-tertiary)]">{t('settings.adapters.pairingCodeHint')}</p>
+            <SettingsBlock>
+              <div className="flex flex-wrap items-baseline gap-x-3 gap-y-1 rounded-[var(--radius-md)] bg-[var(--color-surface-container)] px-3 py-2.5">
+                <span className="font-mono text-[22px] font-medium leading-none tabular-nums text-[var(--color-text-primary)]">
+                  {pairingCode}
+                </span>
+                <span className="text-xs tabular-nums text-[var(--color-text-tertiary)]">
+                  {t('settings.adapters.codeExpiresIn')} 60 {t('settings.adapters.minutes')}
+                </span>
+              </div>
+              <p className="mt-2 text-xs leading-[1.5] text-[var(--color-text-tertiary)]">{t('settings.adapters.pairingCodeHint')}</p>
+            </SettingsBlock>
           )}
 
           {/* Paired users list */}
-          <div>
-            <h4 className="text-sm font-medium text-[var(--color-text-primary)] mb-2">{t('settings.adapters.pairedUsers')}</h4>
+          <SettingsBlock>
+            <div className="flex items-center gap-1.5">
+              <h4 className="text-xs font-semibold text-[var(--color-text-tertiary)]">{t('settings.adapters.pairedUsers')}</h4>
+              {allPairedUsers.length > 0 && (
+                <span className="font-mono text-[11px] tabular-nums text-[var(--color-text-tertiary)]">{allPairedUsers.length}</span>
+              )}
+            </div>
             {allPairedUsers.length === 0 ? (
-              <p className="text-sm text-[var(--color-text-tertiary)]">{t('settings.adapters.noPairedUsers')}</p>
+              <p className="mt-1 text-xs text-[var(--color-text-tertiary)]">{t('settings.adapters.noPairedUsers')}</p>
             ) : (
-              <div className="space-y-2">
+              <ul className="-mx-2 mt-1.5 grid gap-0.5">
                 {allPairedUsers.map((user) => (
-                  <div
+                  <li
                     key={`${user.platform}-${user.userId}`}
-                    className="flex items-center justify-between px-3 py-2 rounded-[var(--radius-lg)] bg-[var(--color-surface-hover)]"
+                    className="flex min-h-[36px] items-center gap-2 rounded-[var(--radius-sm)] px-2 py-1 transition-colors hover:bg-[var(--color-surface-hover)]"
                   >
-                    <div className="flex items-center gap-2">
-                      <span className="text-xs px-1.5 py-0.5 rounded bg-[var(--color-surface)] text-[var(--color-text-secondary)]">
-                        {t(`settings.adapters.platform.${user.platform}`)}
-                      </span>
-                      <span className="text-sm text-[var(--color-text-primary)]">{user.displayName}</span>
-                      <span className="text-xs text-[var(--color-text-tertiary)]">
-                        {new Date(user.pairedAt).toLocaleDateString()}
-                      </span>
-                    </div>
+                    <Badge size="xs">{t(`settings.adapters.platform.${user.platform}`)}</Badge>
+                    <span className="min-w-0 truncate text-[13px] text-[var(--color-text-primary)]">{user.displayName}</span>
+                    <span className="shrink-0 text-xs tabular-nums text-[var(--color-text-tertiary)]">
+                      {new Date(user.pairedAt).toLocaleDateString()}
+                    </span>
                     <Button
-                      variant="danger-outline"
+                      variant="danger-ghost"
                       size="sm"
+                      className="ml-auto"
                       onClick={() => handleUnbind(user.platform, user.userId)}
                     >
                       {t('settings.adapters.unbind')}
                     </Button>
-                  </div>
+                  </li>
                 ))}
-              </div>
+              </ul>
             )}
-          </div>
-        </div>
+          </SettingsBlock>
+        </SettingsGroup>
       </section>
 
       {/* Server URL —— 之前是个手填字段，但桌面端启动 adapter sidecar
@@ -988,120 +1026,121 @@ export function AdapterSettings() {
           运行时完全不会被读到。用户也根本不知道该填什么端口（每次启动随机）。
           Standalone 模式（直接 bun run adapters/...）保留 file 字段兜底就够了。 */}
 
-      {/* Default Project */}
-      <div className="flex flex-col gap-1">
-        <label className="text-sm font-medium text-[var(--color-text-primary)]">
-          {t('settings.adapters.defaultProject')}
-        </label>
-        <div className="flex items-center gap-2">
-          <DirectoryPicker value={defaultProjectDir} onChange={setDefaultProjectDir} />
-          {defaultProjectDir && (
-            <Button variant="ghost" size="sm" onClick={() => setDefaultProjectDir('')}>
-              {t('settings.adapters.clearDefaultProject')}
-            </Button>
-          )}
-        </div>
-        <p className="text-xs text-[var(--color-text-tertiary)]">
-          {t('settings.adapters.defaultProjectHint')}
-        </p>
-      </div>
+      <section className="mt-7">
+        <SettingsGroup>
+          {/* Default Project */}
+          <SettingsRow
+            title={t('settings.adapters.defaultProject')}
+            description={t('settings.adapters.defaultProjectHint')}
+            layout="inline"
+          >
+            {defaultProjectDir && (
+              <Button variant="ghost" size="sm" onClick={() => setDefaultProjectDir('')}>
+                {t('settings.adapters.clearDefaultProject')}
+              </Button>
+            )}
+            <DirectoryPicker value={defaultProjectDir} onChange={setDefaultProjectDir} />
+          </SettingsRow>
 
-      {/* Allowed project roots —— 这是 IM 通道真正的边界。刻意和「默认项目」分开：
-          「默认项目」只决定新会话开在哪，一度被当成唯一允许的根目录，导致 /projects
-          只剩下那一个项目（#1191）。留空 = 主目录，足以覆盖绝大多数用法。 */}
-      <div className="flex flex-col gap-1">
-        <label className="text-sm font-medium text-[var(--color-text-primary)]">
-          {t('settings.adapters.allowedRoots')}
-        </label>
-        {allowedProjectRoots.length > 0 ? (
-          <ul className="flex flex-col gap-1">
-            {allowedProjectRoots.map((root) => (
-              <li
-                key={root}
-                className="flex items-center justify-between gap-2 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)] px-3 py-1.5"
-              >
-                <span className="truncate text-xs text-[var(--color-text-secondary)]" title={root}>{root}</span>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  aria-label={t('settings.adapters.removeAllowedRoot')}
-                  onClick={() => setAllowedProjectRoots((prev) => prev.filter((item) => item !== root))}
-                >
-                  {t('settings.adapters.removeAllowedRoot')}
-                </Button>
-              </li>
-            ))}
-          </ul>
-        ) : (
-          <p className="text-xs text-[var(--color-text-secondary)]">
-            {t('settings.adapters.allowedRootsDefault')}
-          </p>
-        )}
-        <div className="flex items-center gap-2">
-          <DirectoryPicker
-            value=""
-            onChange={(dir) => {
-              if (!dir) return
-              setAllowedProjectRoots((prev) => (prev.includes(dir) ? prev : [...prev, dir]))
-            }}
-          />
-        </div>
-        <p className="text-xs text-[var(--color-text-tertiary)]">
-          {t('settings.adapters.allowedRootsHint')}
-        </p>
-        {/* A platform-level list replaces the global one, and the docs teach
-            hand-editing adapters.json — so say it, rather than letting a save
-            here look like it applied everywhere. */}
-        {platformsWithOwnRoots.length > 0 && (
-          <p className="text-xs text-[var(--color-text-tertiary)]">
-            {t('settings.adapters.allowedRootsOverridden', {
-              platforms: platformsWithOwnRoots.join(', '),
-            })}
-          </p>
-        )}
-      </div>
+          {/* Allowed project roots —— 这是 IM 通道真正的边界。刻意和「默认项目」分开：
+              「默认项目」只决定新会话开在哪，一度被当成唯一允许的根目录，导致 /projects
+              只剩下那一个项目（#1191）。留空 = 主目录，足以覆盖绝大多数用法。 */}
+          <SettingsRow
+            title={t('settings.adapters.allowedRoots')}
+            description={t('settings.adapters.allowedRootsHint')}
+            layout="inline"
+            footer={(
+              <>
+                {allowedProjectRoots.length > 0 ? (
+                  <ul className="grid gap-1">
+                    {allowedProjectRoots.map((root) => (
+                      <li
+                        key={root}
+                        className="flex items-center justify-between gap-2 rounded-[var(--radius-md)] bg-[var(--color-surface-container)] py-1 pl-3 pr-1"
+                      >
+                        <span className="truncate font-mono text-[11px] text-[var(--color-text-secondary)]" title={root}>{root}</span>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          aria-label={t('settings.adapters.removeAllowedRoot')}
+                          onClick={() => setAllowedProjectRoots((prev) => prev.filter((item) => item !== root))}
+                        >
+                          {t('settings.adapters.removeAllowedRoot')}
+                        </Button>
+                      </li>
+                    ))}
+                  </ul>
+                ) : (
+                  <p className="text-xs leading-[1.5] text-[var(--color-text-secondary)]">
+                    {t('settings.adapters.allowedRootsDefault')}
+                  </p>
+                )}
+                {/* A platform-level list replaces the global one, and the docs teach
+                    hand-editing adapters.json — so say it, rather than letting a save
+                    here look like it applied everywhere. */}
+                {platformsWithOwnRoots.length > 0 && (
+                  <StatusBanner tone="warning" className="mt-2.5">
+                    {t('settings.adapters.allowedRootsOverridden', {
+                      platforms: platformsWithOwnRoots.join(', '),
+                    })}
+                  </StatusBanner>
+                )}
+              </>
+            )}
+          >
+            <DirectoryPicker
+              value=""
+              onChange={(dir) => {
+                if (!dir) return
+                setAllowedProjectRoots((prev) => (prev.includes(dir) ? prev : [...prev, dir]))
+              }}
+            />
+          </SettingsRow>
+        </SettingsGroup>
+      </section>
 
       {/* IM Adapter Tabs */}
-      <section className="rounded-[var(--radius-xl)] border border-[var(--color-border)] overflow-hidden">
-        <div role="tablist" aria-label={t('settings.adapters.imTabs')} className="flex flex-wrap items-stretch border-b border-[var(--color-border)] bg-[var(--color-surface-hover)]">
-          {IM_TABS.map((tab) => (
-            <ImTabButton
-              key={tab}
-              label={t(`settings.adapters.${tab}` as const)}
-              active={activeIm === tab}
-              onClick={() => setActiveIm(tab)}
+      <SettingsSection title={t('settings.adapters.imTabs')}>
+        <SettingsGroup>
+          <div className="px-3 py-2.5">
+            <SegmentedControl
+              as="tablist"
+              label={t('settings.adapters.imTabs')}
+              items={IM_TABS.map((tab) => ({ value: tab, label: t(`settings.adapters.${tab}` as const) }))}
+              value={activeIm}
+              onChange={setActiveIm}
+              size="sm"
+              layout="fill"
             />
-          ))}
-        </div>
+          </div>
 
-        {activeIm === 'feishu' && (
-          <div className="p-4 space-y-4">
-            {/* Scan-to-create is the primary path: the confirmation page
-                pre-fills the exact scopes and events this adapter calls, and
-                the credentials never pass through the user's clipboard. */}
-            <QrBindPanel
-              title={t('settings.adapters.feishuQrTitle')}
-              description={t('settings.adapters.feishuQrDesc')}
-              bindLabel={hasSavedFeishuCredentials
-                ? t('settings.adapters.feishuRebind')
-                : t('settings.adapters.feishuStartAuth')}
-              unbindLabel={t('settings.adapters.feishuUnbindApp')}
-              qrAlt={t('settings.adapters.feishuQrAlt')}
-              waitingLabel={t('settings.adapters.feishuWaiting')}
-              binding={feishuBinding}
-              isBound={hasSavedFeishuCredentials}
-              isUnbinding={isUnbindingFeishuApp}
-              onUnbind={() => setPendingAdapterUnbind('feishuApp')}
-            />
-            {!hasSavedFeishuCredentials && (
-              <div className="rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface)] p-4">
-                <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+          {activeIm === 'feishu' && (
+            <>
+              {/* Scan-to-create is the primary path: the confirmation page
+                  pre-fills the exact scopes and events this adapter calls, and
+                  the credentials never pass through the user's clipboard. */}
+              <QrBindPanel
+                title={t('settings.adapters.feishuQrTitle')}
+                description={t('settings.adapters.feishuQrDesc')}
+                bindLabel={hasSavedFeishuCredentials
+                  ? t('settings.adapters.feishuRebind')
+                  : t('settings.adapters.feishuStartAuth')}
+                unbindLabel={t('settings.adapters.feishuUnbindApp')}
+                qrAlt={t('settings.adapters.feishuQrAlt')}
+                waitingLabel={t('settings.adapters.feishuWaiting')}
+                binding={feishuBinding}
+                isBound={hasSavedFeishuCredentials}
+                isUnbinding={isUnbindingFeishuApp}
+                onUnbind={() => setPendingAdapterUnbind('feishuApp')}
+              />
+              {!hasSavedFeishuCredentials && (
+                <div className="flex flex-col gap-3 px-4 py-3.5 sm:flex-row sm:items-start sm:justify-between">
                   <div className="flex min-w-0 gap-3">
-                    <span className="material-symbols-outlined mt-0.5 text-[20px] text-[var(--color-brand)]">smart_toy</span>
+                    <Bot size={16} strokeWidth={1.75} aria-hidden="true" className="mt-0.5 shrink-0 text-[var(--color-text-tertiary)]" />
                     <div className="min-w-0">
-                      <h4 className="text-sm font-semibold text-[var(--color-text-primary)]">{t('settings.adapters.feishuCreateBotTitle')}</h4>
-                      <p className="mt-1 text-xs leading-5 text-[var(--color-text-tertiary)]">{t('settings.adapters.feishuCreateBotDesc')}</p>
-                      <ol className="mt-2 space-y-1 text-xs leading-5 text-[var(--color-text-secondary)]">
+                      <h4 className={ROW_TITLE}>{t('settings.adapters.feishuCreateBotTitle')}</h4>
+                      <p className={ROW_DESC}>{t('settings.adapters.feishuCreateBotDesc')}</p>
+                      <ol className="mt-2 space-y-1 text-xs leading-[1.5] text-[var(--color-text-secondary)]">
                         <li>1. {t('settings.adapters.feishuCreateBotStepCreate')}</li>
                         <li>2. {t('settings.adapters.feishuCreateBotStepFill')}</li>
                       </ol>
@@ -1111,450 +1150,433 @@ export function AdapterSettings() {
                     href={FEISHU_CREATE_BOT_URL}
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="inline-flex h-9 shrink-0 items-center justify-center gap-1.5 rounded-[var(--radius-md)] bg-[image:var(--gradient-btn-primary)] px-3 text-xs font-medium text-[var(--color-btn-primary-fg)] shadow-[var(--shadow-button-primary)] transition-colors hover:bg-[image:var(--gradient-btn-primary-hover)] hover:brightness-105 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-brand)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface)]"
+                    className={LINK_BUTTON}
                   >
                     {t('settings.adapters.feishuCreateBotAction')}
-                    <span className="material-symbols-outlined text-[14px]">open_in_new</span>
+                    <ExternalLink size={12} strokeWidth={2} aria-hidden="true" />
                   </a>
                 </div>
-              </div>
-            )}
-            <div className="grid grid-cols-2 gap-4">
-              <Input
-                label={t('settings.adapters.appId')}
-                value={fsAppId}
-                onChange={(e) => setFsAppId(e.target.value)}
-                placeholder={t('settings.adapters.appIdPlaceholder')}
-              />
-              <Input
-                label={t('settings.adapters.appSecret')}
-                type="password"
-                value={fsAppSecret}
-                onChange={(e) => setFsAppSecret(e.target.value)}
-                placeholder={t('settings.adapters.appSecretPlaceholder')}
-              />
-            </div>
-            <div className="grid grid-cols-2 gap-4">
-              <Input
-                label={t('settings.adapters.encryptKey')}
-                type="password"
-                value={fsEncryptKey}
-                onChange={(e) => setFsEncryptKey(e.target.value)}
-                placeholder={t('settings.adapters.encryptKeyPlaceholder')}
-              />
-              <Input
-                label={t('settings.adapters.verificationToken')}
-                type="password"
-                value={fsVerificationToken}
-                onChange={(e) => setFsVerificationToken(e.target.value)}
-                placeholder={t('settings.adapters.verificationTokenPlaceholder')}
-              />
-            </div>
-            <div className="flex flex-col gap-1">
-              <Input
-                label={t('settings.adapters.allowedUsers')}
-                value={fsAllowedUsers}
-                onChange={(e) => setFsAllowedUsers(e.target.value)}
-                placeholder={t('settings.adapters.fsAllowedUsersPlaceholder')}
-              />
-              <p className="text-xs text-[var(--color-text-tertiary)]">{t('settings.adapters.allowedUsersHint')}</p>
-            </div>
-            <label className="flex items-center gap-3 cursor-pointer">
-              <input
-                type="checkbox"
-                checked={fsStreamingCard}
-                onChange={(e) => setFsStreamingCard(e.target.checked)}
-                className="w-4 h-4 rounded border-[var(--color-border)] accent-[var(--color-brand)]"
-              />
-              <div>
-                <span className="text-sm text-[var(--color-text-primary)]">{t('settings.adapters.streamingCard')}</span>
-                <p className="text-xs text-[var(--color-text-tertiary)]">{t('settings.adapters.streamingCardDesc')}</p>
-              </div>
-            </label>
-          </div>
-        )}
-
-        {activeIm === 'wechat' && (
-          <div className="p-4 space-y-4">
-            <div className="rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface)] p-4 space-y-3">
-              <div className="flex items-center justify-between gap-4">
-                <div>
-                  <div className="text-sm font-medium text-[var(--color-text-primary)]">
-                    {config.wechat?.accountId ? t('settings.adapters.wechatConnected') : t('settings.adapters.wechatNotConnected')}
-                  </div>
-                  <p className="text-xs text-[var(--color-text-tertiary)]">
-                    {t('settings.adapters.wechatQrHint')}
-                  </p>
-                </div>
-                <div className="flex items-center gap-2 shrink-0">
-                  <Button onClick={handleWechatBind} loading={isWechatBinding && !wechatQrUrl} size="sm">
-                    {config.wechat?.accountId ? t('settings.adapters.wechatRebind') : t('settings.adapters.wechatBind')}
-                  </Button>
-                  {config.wechat?.accountId && (
-                    <Button onClick={() => setPendingAdapterUnbind('wechatAccount')} loading={isUnbindingWechatAccount} size="sm" variant="danger">
-                      {t('settings.adapters.wechatUnbindAccount')}
-                    </Button>
-                  )}
-                </div>
-              </div>
-
-              {wechatQrUrl && (
-                <div className="flex items-start gap-4">
-                  <img
-                    src={wechatQrUrl}
-                    alt={t('settings.adapters.wechatQrAlt')}
-                    className="h-40 w-40 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-white object-contain p-2"
+              )}
+              <div className="grid gap-4 p-4">
+                <div className="grid grid-cols-2 gap-4">
+                  <Input
+                    label={t('settings.adapters.appId')}
+                    value={fsAppId}
+                    onChange={(e) => setFsAppId(e.target.value)}
+                    placeholder={t('settings.adapters.appIdPlaceholder')}
+                  />
+                  <Input
+                    label={t('settings.adapters.appSecret')}
+                    type="password"
+                    value={fsAppSecret}
+                    onChange={(e) => setFsAppSecret(e.target.value)}
+                    placeholder={t('settings.adapters.appSecretPlaceholder')}
                   />
-                  <div className="pt-2 text-sm text-[var(--color-text-secondary)]">
-                    {wechatStatus || t('settings.adapters.wechatWaiting')}
-                  </div>
                 </div>
-              )}
-
-              {!wechatQrUrl && wechatStatus && (
-                <p className="text-sm text-[var(--color-text-secondary)]">{wechatStatus}</p>
-              )}
-            </div>
-
-            <div className="flex flex-col gap-1">
-              <Input
-                label={t('settings.adapters.allowedUsers')}
-                value={wcAllowedUsers}
-                onChange={(e) => setWcAllowedUsers(e.target.value)}
-                placeholder={t('settings.adapters.wcAllowedUsersPlaceholder')}
+                <div className="grid grid-cols-2 gap-4">
+                  <Input
+                    label={t('settings.adapters.encryptKey')}
+                    type="password"
+                    value={fsEncryptKey}
+                    onChange={(e) => setFsEncryptKey(e.target.value)}
+                    placeholder={t('settings.adapters.encryptKeyPlaceholder')}
+                  />
+                  <Input
+                    label={t('settings.adapters.verificationToken')}
+                    type="password"
+                    value={fsVerificationToken}
+                    onChange={(e) => setFsVerificationToken(e.target.value)}
+                    placeholder={t('settings.adapters.verificationTokenPlaceholder')}
+                  />
+                </div>
+                <Input
+                  label={t('settings.adapters.allowedUsers')}
+                  value={fsAllowedUsers}
+                  onChange={(e) => setFsAllowedUsers(e.target.value)}
+                  placeholder={t('settings.adapters.fsAllowedUsersPlaceholder')}
+                  hint={t('settings.adapters.allowedUsersHint')}
+                />
+              </div>
+              <SettingsSwitchRow
+                title={t('settings.adapters.streamingCard')}
+                description={t('settings.adapters.streamingCardDesc')}
+                checked={fsStreamingCard}
+                onChange={setFsStreamingCard}
               />
-              <p className="text-xs text-[var(--color-text-tertiary)]">{t('settings.adapters.wechatAllowedUsersHint')}</p>
-            </div>
-          </div>
-        )}
+            </>
+          )}
 
-        {activeIm === 'dingtalk' && (
-          <div className="p-4 space-y-4">
-            <div className="rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface)] p-4 space-y-3">
-              <div className="flex items-start justify-between gap-4">
-                <div>
-                  <h4 className="text-sm font-semibold text-[var(--color-text-primary)]">{t('settings.adapters.dingtalkQrTitle')}</h4>
-                  <p className="mt-1 text-xs text-[var(--color-text-tertiary)]">{t('settings.adapters.dingtalkQrDesc')}</p>
-                </div>
-                <div className="flex items-center gap-2 shrink-0">
-                  <Button onClick={handleStartDingtalkAuth} loading={isStartingDtAuth} size="sm">
-                    {t('settings.adapters.dingtalkStartAuth')}
-                  </Button>
-                  {(config.dingtalk?.clientId || dtClientId) && (
-                    <Button onClick={() => setPendingAdapterUnbind('dingtalkBot')} loading={isUnbindingDtBot} size="sm" variant="danger">
-                      {t('settings.adapters.dingtalkUnbindBot')}
-                    </Button>
+          {activeIm === 'wechat' && (
+            <>
+              <div className="px-4 py-3.5">
+                <PanelHead
+                  tone={wechatTone}
+                  title={config.wechat?.accountId ? t('settings.adapters.wechatConnected') : t('settings.adapters.wechatNotConnected')}
+                  description={t('settings.adapters.wechatQrHint')}
+                  actions={(
+                    <>
+                      <Button
+                        variant="secondary"
+                        size="sm"
+                        icon={<QrCode size={14} strokeWidth={1.75} aria-hidden="true" />}
+                        onClick={handleWechatBind}
+                        loading={isWechatBinding && !wechatQrUrl}
+                      >
+                        {config.wechat?.accountId ? t('settings.adapters.wechatRebind') : t('settings.adapters.wechatBind')}
+                      </Button>
+                      {config.wechat?.accountId && (
+                        <Button variant="danger-ghost" size="sm" onClick={() => setPendingAdapterUnbind('wechatAccount')} loading={isUnbindingWechatAccount}>
+                          {t('settings.adapters.wechatUnbindAccount')}
+                        </Button>
+                      )}
+                    </>
                   )}
-                </div>
+                />
+
+                {wechatQrUrl && (
+                  <QrArea src={wechatQrUrl} alt={t('settings.adapters.wechatQrAlt')}>
+                    <p className={STATUS_TEXT}>{wechatStatus || t('settings.adapters.wechatWaiting')}</p>
+                  </QrArea>
+                )}
+
+                {!wechatQrUrl && wechatStatus && (
+                  <p className={`mt-2 pl-5 ${STATUS_TEXT}`}>{wechatStatus}</p>
+                )}
               </div>
 
-              {dtRegistration && (
-                <div className="flex flex-wrap items-center gap-4">
-                  {dtRegistration.qrDataUrl ? (
-                    <img
-                      src={dtRegistration.qrDataUrl}
-                      alt={t('settings.adapters.dingtalkQrAlt')}
-                      className="h-40 w-40 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-white object-contain p-2"
-                    />
-                  ) : null}
-                  <div className="min-w-0 flex-1 space-y-2">
-                    <p className="text-sm text-[var(--color-text-primary)]">{t('settings.adapters.dingtalkWaiting')}</p>
+              <div className="p-4">
+                <Input
+                  label={t('settings.adapters.allowedUsers')}
+                  value={wcAllowedUsers}
+                  onChange={(e) => setWcAllowedUsers(e.target.value)}
+                  placeholder={t('settings.adapters.wcAllowedUsersPlaceholder')}
+                  hint={t('settings.adapters.wechatAllowedUsersHint')}
+                />
+              </div>
+            </>
+          )}
+
+          {activeIm === 'dingtalk' && (
+            <>
+              <div className="px-4 py-3.5">
+                <PanelHead
+                  tone={dingtalkTone}
+                  title={t('settings.adapters.dingtalkQrTitle')}
+                  description={t('settings.adapters.dingtalkQrDesc')}
+                  actions={(
+                    <>
+                      <Button
+                        variant="secondary"
+                        size="sm"
+                        icon={<QrCode size={14} strokeWidth={1.75} aria-hidden="true" />}
+                        onClick={handleStartDingtalkAuth}
+                        loading={isStartingDtAuth}
+                      >
+                        {t('settings.adapters.dingtalkStartAuth')}
+                      </Button>
+                      {(config.dingtalk?.clientId || dtClientId) && (
+                        <Button variant="danger-ghost" size="sm" onClick={() => setPendingAdapterUnbind('dingtalkBot')} loading={isUnbindingDtBot}>
+                          {t('settings.adapters.dingtalkUnbindBot')}
+                        </Button>
+                      )}
+                    </>
+                  )}
+                />
+
+                {dtRegistration && (
+                  <QrArea src={dtRegistration.qrDataUrl} alt={t('settings.adapters.dingtalkQrAlt')}>
+                    <p className={STATUS_TEXT}>{t('settings.adapters.dingtalkWaiting')}</p>
                     <a
                       href={dtRegistration.verificationUriComplete}
                       target="_blank"
                       rel="noreferrer"
-                      className="block truncate text-xs text-[var(--color-brand)] hover:underline"
+                      className={URL_LINK}
                     >
                       {dtRegistration.verificationUriComplete}
                     </a>
-                  </div>
+                  </QrArea>
+                )}
+
+                {dtAuthStatus === 'bound' && (
+                  <StatusBanner tone="success" className="ml-5 mt-3">{t('settings.adapters.dingtalkBound')}</StatusBanner>
+                )}
+                {dtAuthStatus === 'error' && (
+                  <StatusBanner tone="error" className="ml-5 mt-3">{dtAuthError}</StatusBanner>
+                )}
+              </div>
+
+              <div className="grid gap-4 p-4">
+                <div className="grid grid-cols-2 gap-4">
+                  <Input
+                    label={t('settings.adapters.dingtalkClientId')}
+                    value={dtClientId}
+                    onChange={(e) => setDtClientId(e.target.value)}
+                    placeholder={t('settings.adapters.dingtalkClientIdPlaceholder')}
+                  />
+                  <Input
+                    label={t('settings.adapters.dingtalkClientSecret')}
+                    type="password"
+                    value={dtClientSecret}
+                    onChange={(e) => setDtClientSecret(e.target.value)}
+                    placeholder={t('settings.adapters.dingtalkClientSecretPlaceholder')}
+                  />
                 </div>
-              )}
+                <Input
+                  label={t('settings.adapters.dingtalkEndpoint')}
+                  value={dtEndpoint}
+                  onChange={(e) => setDtEndpoint(e.target.value)}
+                  placeholder={t('settings.adapters.dingtalkEndpointPlaceholder')}
+                />
+                <Input
+                  label={t('settings.adapters.dingtalkPermissionCardTemplateId')}
+                  value={dtPermissionCardTemplateId}
+                  onChange={(e) => setDtPermissionCardTemplateId(e.target.value)}
+                  placeholder={t('settings.adapters.dingtalkPermissionCardTemplateIdPlaceholder')}
+                  hint={t('settings.adapters.dingtalkPermissionCardTemplateIdHint')}
+                />
+                <Input
+                  label={t('settings.adapters.allowedUsers')}
+                  value={dtAllowedUsers}
+                  onChange={(e) => setDtAllowedUsers(e.target.value)}
+                  placeholder={t('settings.adapters.dtAllowedUsersPlaceholder')}
+                  hint={t('settings.adapters.allowedUsersHint')}
+                />
+              </div>
+            </>
+          )}
 
-              {dtAuthStatus === 'bound' && (
-                <p className="text-sm text-[var(--color-success)]">{t('settings.adapters.dingtalkBound')}</p>
-              )}
-              {dtAuthStatus === 'error' && (
-                <p className="text-sm text-[var(--color-error)]">{dtAuthError}</p>
-              )}
-            </div>
-
-            <div className="grid grid-cols-2 gap-4">
+          {activeIm === 'telegram' && (
+            <div className="grid gap-4 p-4">
               <Input
-                label={t('settings.adapters.dingtalkClientId')}
-                value={dtClientId}
-                onChange={(e) => setDtClientId(e.target.value)}
-                placeholder={t('settings.adapters.dingtalkClientIdPlaceholder')}
-              />
-              <Input
-                label={t('settings.adapters.dingtalkClientSecret')}
+                label={t('settings.adapters.botToken')}
                 type="password"
-                value={dtClientSecret}
-                onChange={(e) => setDtClientSecret(e.target.value)}
-                placeholder={t('settings.adapters.dingtalkClientSecretPlaceholder')}
+                value={tgBotToken}
+                onChange={(e) => setTgBotToken(e.target.value)}
+                placeholder={t('settings.adapters.botTokenPlaceholder')}
               />
-            </div>
-            <Input
-              label={t('settings.adapters.dingtalkEndpoint')}
-              value={dtEndpoint}
-              onChange={(e) => setDtEndpoint(e.target.value)}
-              placeholder={t('settings.adapters.dingtalkEndpointPlaceholder')}
-            />
-            <div className="flex flex-col gap-1">
-              <Input
-                label={t('settings.adapters.dingtalkPermissionCardTemplateId')}
-                value={dtPermissionCardTemplateId}
-                onChange={(e) => setDtPermissionCardTemplateId(e.target.value)}
-                placeholder={t('settings.adapters.dingtalkPermissionCardTemplateIdPlaceholder')}
-              />
-              <p className="text-xs text-[var(--color-text-tertiary)]">{t('settings.adapters.dingtalkPermissionCardTemplateIdHint')}</p>
-            </div>
-            <div className="flex flex-col gap-1">
-              <Input
-                label={t('settings.adapters.allowedUsers')}
-                value={dtAllowedUsers}
-                onChange={(e) => setDtAllowedUsers(e.target.value)}
-                placeholder={t('settings.adapters.dtAllowedUsersPlaceholder')}
-              />
-              <p className="text-xs text-[var(--color-text-tertiary)]">{t('settings.adapters.allowedUsersHint')}</p>
-            </div>
-          </div>
-        )}
-
-        {activeIm === 'telegram' && (
-          <div className="p-4 space-y-4">
-            <Input
-              label={t('settings.adapters.botToken')}
-              type="password"
-              value={tgBotToken}
-              onChange={(e) => setTgBotToken(e.target.value)}
-              placeholder={t('settings.adapters.botTokenPlaceholder')}
-            />
-            <div className="flex flex-col gap-1">
               <Input
                 label={t('settings.adapters.allowedUsers')}
                 value={tgAllowedUsers}
                 onChange={(e) => setTgAllowedUsers(e.target.value)}
                 placeholder={t('settings.adapters.tgAllowedUsersPlaceholder')}
+                hint={t('settings.adapters.allowedUsersHint')}
               />
-              <p className="text-xs text-[var(--color-text-tertiary)]">{t('settings.adapters.allowedUsersHint')}</p>
             </div>
-          </div>
-        )}
+          )}
 
-        {activeIm === 'whatsapp' && (
-          <div className="p-4 space-y-4">
-            <div className="rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface)] p-4 space-y-3">
-              <div className="flex items-center justify-between gap-4">
-                <div>
-                  <div className="text-sm font-medium text-[var(--color-text-primary)]">
-                    {config.whatsapp?.accountJid ? t('settings.adapters.whatsappConnected') : t('settings.adapters.whatsappNotConnected')}
-                  </div>
-                  <p className="text-xs text-[var(--color-text-tertiary)]">
-                    {t('settings.adapters.whatsappQrHint')}
-                  </p>
-                </div>
-                <div className="flex items-center gap-2 shrink-0">
-                  <Button onClick={handleWhatsAppBind} loading={isWhatsAppBinding && !whatsappQrUrl} size="sm">
-                    {config.whatsapp?.accountJid ? t('settings.adapters.whatsappRebind') : t('settings.adapters.whatsappBind')}
-                  </Button>
-                  {config.whatsapp?.accountJid && (
-                    <Button onClick={() => setPendingAdapterUnbind('whatsappAccount')} loading={isUnbindingWhatsAppAccount} size="sm" variant="danger">
-                      {t('settings.adapters.whatsappUnbindAccount')}
-                    </Button>
+          {activeIm === 'whatsapp' && (
+            <>
+              <div className="px-4 py-3.5">
+                <PanelHead
+                  tone={whatsappTone}
+                  title={config.whatsapp?.accountJid ? t('settings.adapters.whatsappConnected') : t('settings.adapters.whatsappNotConnected')}
+                  description={t('settings.adapters.whatsappQrHint')}
+                  detail={config.whatsapp?.accountJid
+                    ? <p className="mt-1 truncate font-mono text-[11px] text-[var(--color-text-tertiary)]">{config.whatsapp.accountJid}</p>
+                    : null}
+                  actions={(
+                    <>
+                      <Button
+                        variant="secondary"
+                        size="sm"
+                        icon={<QrCode size={14} strokeWidth={1.75} aria-hidden="true" />}
+                        onClick={handleWhatsAppBind}
+                        loading={isWhatsAppBinding && !whatsappQrUrl}
+                      >
+                        {config.whatsapp?.accountJid ? t('settings.adapters.whatsappRebind') : t('settings.adapters.whatsappBind')}
+                      </Button>
+                      {config.whatsapp?.accountJid && (
+                        <Button variant="danger-ghost" size="sm" onClick={() => setPendingAdapterUnbind('whatsappAccount')} loading={isUnbindingWhatsAppAccount}>
+                          {t('settings.adapters.whatsappUnbindAccount')}
+                        </Button>
+                      )}
+                    </>
                   )}
-                </div>
+                />
+
+                {whatsappQrUrl && (
+                  <QrArea src={whatsappQrUrl} alt={t('settings.adapters.whatsappQrAlt')}>
+                    <p className={STATUS_TEXT}>{whatsappStatus || t('settings.adapters.whatsappWaiting')}</p>
+                  </QrArea>
+                )}
+
+                {!whatsappQrUrl && whatsappStatus && (
+                  <p className={`mt-2 pl-5 ${STATUS_TEXT}`}>{whatsappStatus}</p>
+                )}
               </div>
 
-              {config.whatsapp?.accountJid && (
-                <p className="text-xs text-[var(--color-text-tertiary)]">{config.whatsapp.accountJid}</p>
-              )}
+              <div className="p-4">
+                <Input
+                  label={t('settings.adapters.allowedUsers')}
+                  value={waAllowedUsers}
+                  onChange={(e) => setWaAllowedUsers(e.target.value)}
+                  placeholder={t('settings.adapters.waAllowedUsersPlaceholder')}
+                  hint={t('settings.adapters.whatsappAllowedUsersHint')}
+                />
+              </div>
+            </>
+          )}
 
-              {whatsappQrUrl && (
-                <div className="flex items-start gap-4">
-                  <img
-                    src={whatsappQrUrl}
-                    alt={t('settings.adapters.whatsappQrAlt')}
-                    className="h-40 w-40 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-white object-contain p-2"
+          {activeIm === 'wecom' && (
+            <>
+              <QrBindPanel
+                title={t('settings.adapters.wecomQrTitle')}
+                description={t('settings.adapters.wecomQrDesc')}
+                bindLabel={config.wecom?.botId
+                  ? t('settings.adapters.wecomRebind')
+                  : t('settings.adapters.wecomBind')}
+                unbindLabel={t('settings.adapters.wecomUnbindBot')}
+                qrAlt={t('settings.adapters.wecomQrAlt')}
+                waitingLabel={t('settings.adapters.wecomWaiting')}
+                binding={wecomBinding}
+                isBound={Boolean(config.wecom?.botId)}
+                boundDetail={config.wecom?.botId}
+                isUnbinding={isUnbindingWecomBot}
+                onUnbind={() => setPendingAdapterUnbind('wecomBot')}
+              />
+
+              <div className="p-4">
+                <Input
+                  label={t('settings.adapters.allowedUsers')}
+                  value={wecomAllowedUsers}
+                  onChange={(e) => setWecomAllowedUsers(e.target.value)}
+                  placeholder={t('settings.adapters.wecomAllowedUsersPlaceholder')}
+                  hint={t('settings.adapters.wecomAllowedUsersHint')}
+                />
+              </div>
+            </>
+          )}
+
+          {activeIm === 'qq' && (
+            <>
+              <QrBindPanel
+                title={t('settings.adapters.qqQrTitle')}
+                description={t('settings.adapters.qqQrDesc')}
+                bindLabel={config.qq?.appId
+                  ? t('settings.adapters.qqRebind')
+                  : t('settings.adapters.qqBind')}
+                unbindLabel={t('settings.adapters.qqUnbindBot')}
+                qrAlt={t('settings.adapters.qqQrAlt')}
+                waitingLabel={t('settings.adapters.qqWaiting')}
+                binding={qqBinding}
+                isBound={Boolean(config.qq?.appId)}
+                boundDetail={config.qq?.appId}
+                isUnbinding={isUnbindingQqBot}
+                onUnbind={() => setPendingAdapterUnbind('qqBot')}
+              />
+
+              <div className="p-4">
+                <Input
+                  label={t('settings.adapters.allowedUsers')}
+                  value={qqAllowedUsers}
+                  onChange={(e) => setQqAllowedUsers(e.target.value)}
+                  placeholder={t('settings.adapters.qqAllowedUsersPlaceholder')}
+                  hint={t('settings.adapters.qqAllowedUsersHint')}
+                />
+              </div>
+            </>
+          )}
+
+          {activeIm === 'slack' && (
+            <>
+              {/* Slack has no scan flow. The manifest is the closest equivalent:
+                  one link that opens the create-app dialog fully configured. */}
+              <div className="px-4 py-3.5">
+                <PanelHead
+                  title={t('settings.adapters.slackCreateAppTitle')}
+                  description={t('settings.adapters.slackCreateAppDesc')}
+                  detail={(
+                    <ol className="mt-2 space-y-1 text-xs leading-[1.5] text-[var(--color-text-secondary)]">
+                      <li>1. {t('settings.adapters.slackStepCreate')}</li>
+                      <li>2. {t('settings.adapters.slackStepInstall')}</li>
+                      <li>3. {t('settings.adapters.slackStepTokens')}</li>
+                    </ol>
+                  )}
+                  actions={(slackManifest || config.slack?.botToken || slackBotToken) ? (
+                    <>
+                      {slackManifest && (
+                        <a
+                          href={slackManifest.createAppUrl}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className={LINK_BUTTON}
+                        >
+                          {t('settings.adapters.slackCreateAppAction')}
+                          <ExternalLink size={12} strokeWidth={2} aria-hidden="true" />
+                        </a>
+                      )}
+                      {(config.slack?.botToken || slackBotToken) && (
+                        <Button variant="danger-ghost" size="sm" onClick={() => setPendingAdapterUnbind('slackApp')} loading={isUnbindingSlackApp}>
+                          {t('settings.adapters.slackUnbindApp')}
+                        </Button>
+                      )}
+                    </>
+                  ) : null}
+                />
+
+                {slackManifest && (
+                  <details className="group mt-3 text-xs text-[var(--color-text-secondary)]">
+                    <summary className="inline-flex cursor-pointer select-none list-none items-center gap-1 rounded-[var(--radius-sm)] transition-colors hover:text-[var(--color-text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] [&::-webkit-details-marker]:hidden">
+                      <ChevronRight size={14} strokeWidth={1.75} aria-hidden="true" className="transition-transform group-open:rotate-90" />
+                      {t('settings.adapters.slackManifestToggle')}
+                    </summary>
+                    <pre className="mt-2 max-h-56 overflow-auto rounded-[var(--radius-md)] bg-[var(--color-surface-container)] p-3 font-mono text-[11px] leading-5 text-[var(--color-text-secondary)]">
+                      {slackManifest.manifest}
+                    </pre>
+                  </details>
+                )}
+                {slackManifestError && (
+                  <StatusBanner tone="error" className="mt-3">{slackManifestError}</StatusBanner>
+                )}
+                {slackStatus && (
+                  <p className={`mt-2 ${STATUS_TEXT}`}>{slackStatus}</p>
+                )}
+              </div>
+
+              <div className="grid gap-4 p-4">
+                <div className="grid grid-cols-2 gap-4">
+                  <Input
+                    label={t('settings.adapters.slackBotToken')}
+                    type="password"
+                    value={slackBotToken}
+                    onChange={(e) => setSlackBotToken(e.target.value)}
+                    placeholder={t('settings.adapters.slackBotTokenPlaceholder')}
+                  />
+                  <Input
+                    label={t('settings.adapters.slackAppToken')}
+                    type="password"
+                    value={slackAppToken}
+                    onChange={(e) => setSlackAppToken(e.target.value)}
+                    placeholder={t('settings.adapters.slackAppTokenPlaceholder')}
                   />
-                  <div className="pt-2 text-sm text-[var(--color-text-secondary)]">
-                    {whatsappStatus || t('settings.adapters.whatsappWaiting')}
-                  </div>
-                </div>
-              )}
-
-              {!whatsappQrUrl && whatsappStatus && (
-                <p className="text-sm text-[var(--color-text-secondary)]">{whatsappStatus}</p>
-              )}
-            </div>
-
-            <div className="flex flex-col gap-1">
-              <Input
-                label={t('settings.adapters.allowedUsers')}
-                value={waAllowedUsers}
-                onChange={(e) => setWaAllowedUsers(e.target.value)}
-                placeholder={t('settings.adapters.waAllowedUsersPlaceholder')}
-              />
-              <p className="text-xs text-[var(--color-text-tertiary)]">{t('settings.adapters.whatsappAllowedUsersHint')}</p>
-            </div>
-          </div>
-        )}
-
-        {activeIm === 'wecom' && (
-          <div className="p-4 space-y-4">
-            <QrBindPanel
-              title={t('settings.adapters.wecomQrTitle')}
-              description={t('settings.adapters.wecomQrDesc')}
-              bindLabel={config.wecom?.botId
-                ? t('settings.adapters.wecomRebind')
-                : t('settings.adapters.wecomBind')}
-              unbindLabel={t('settings.adapters.wecomUnbindBot')}
-              qrAlt={t('settings.adapters.wecomQrAlt')}
-              waitingLabel={t('settings.adapters.wecomWaiting')}
-              binding={wecomBinding}
-              isBound={Boolean(config.wecom?.botId)}
-              boundDetail={config.wecom?.botId}
-              isUnbinding={isUnbindingWecomBot}
-              onUnbind={() => setPendingAdapterUnbind('wecomBot')}
-            />
-
-            <div className="flex flex-col gap-1">
-              <Input
-                label={t('settings.adapters.allowedUsers')}
-                value={wecomAllowedUsers}
-                onChange={(e) => setWecomAllowedUsers(e.target.value)}
-                placeholder={t('settings.adapters.wecomAllowedUsersPlaceholder')}
-              />
-              <p className="text-xs text-[var(--color-text-tertiary)]">{t('settings.adapters.wecomAllowedUsersHint')}</p>
-            </div>
-          </div>
-        )}
-
-        {activeIm === 'qq' && (
-          <div className="p-4 space-y-4">
-            <QrBindPanel
-              title={t('settings.adapters.qqQrTitle')}
-              description={t('settings.adapters.qqQrDesc')}
-              bindLabel={config.qq?.appId
-                ? t('settings.adapters.qqRebind')
-                : t('settings.adapters.qqBind')}
-              unbindLabel={t('settings.adapters.qqUnbindBot')}
-              qrAlt={t('settings.adapters.qqQrAlt')}
-              waitingLabel={t('settings.adapters.qqWaiting')}
-              binding={qqBinding}
-              isBound={Boolean(config.qq?.appId)}
-              boundDetail={config.qq?.appId}
-              isUnbinding={isUnbindingQqBot}
-              onUnbind={() => setPendingAdapterUnbind('qqBot')}
-            />
-
-            <div className="flex flex-col gap-1">
-              <Input
-                label={t('settings.adapters.allowedUsers')}
-                value={qqAllowedUsers}
-                onChange={(e) => setQqAllowedUsers(e.target.value)}
-                placeholder={t('settings.adapters.qqAllowedUsersPlaceholder')}
-              />
-              <p className="text-xs text-[var(--color-text-tertiary)]">{t('settings.adapters.qqAllowedUsersHint')}</p>
-            </div>
-          </div>
-        )}
-
-        {activeIm === 'slack' && (
-          <div className="p-4 space-y-4">
-            {/* Slack has no scan flow. The manifest is the closest equivalent:
-                one link that opens the create-app dialog fully configured. */}
-            <div className="rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface)] p-4 space-y-3">
-              <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-                <div className="min-w-0">
-                  <h4 className="text-sm font-semibold text-[var(--color-text-primary)]">{t('settings.adapters.slackCreateAppTitle')}</h4>
-                  <p className="mt-1 text-xs leading-5 text-[var(--color-text-tertiary)]">{t('settings.adapters.slackCreateAppDesc')}</p>
-                  <ol className="mt-2 space-y-1 text-xs leading-5 text-[var(--color-text-secondary)]">
-                    <li>1. {t('settings.adapters.slackStepCreate')}</li>
-                    <li>2. {t('settings.adapters.slackStepInstall')}</li>
-                    <li>3. {t('settings.adapters.slackStepTokens')}</li>
-                  </ol>
-                </div>
-                <div className="flex items-center gap-2 shrink-0">
-                  {slackManifest && (
-                    <a
-                      href={slackManifest.createAppUrl}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="inline-flex h-9 shrink-0 items-center justify-center gap-1.5 rounded-[var(--radius-md)] bg-[image:var(--gradient-btn-primary)] px-3 text-xs font-medium text-[var(--color-btn-primary-fg)] shadow-[var(--shadow-button-primary)] transition-colors hover:bg-[image:var(--gradient-btn-primary-hover)] hover:brightness-105 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-brand)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface)]"
-                    >
-                      {t('settings.adapters.slackCreateAppAction')}
-                      <span className="material-symbols-outlined text-[14px]">open_in_new</span>
-                    </a>
-                  )}
-                  {(config.slack?.botToken || slackBotToken) && (
-                    <Button onClick={() => setPendingAdapterUnbind('slackApp')} loading={isUnbindingSlackApp} size="sm" variant="danger">
-                      {t('settings.adapters.slackUnbindApp')}
-                    </Button>
-                  )}
                 </div>
+                <Input
+                  label={t('settings.adapters.allowedUsers')}
+                  value={slackAllowedUsers}
+                  onChange={(e) => setSlackAllowedUsers(e.target.value)}
+                  placeholder={t('settings.adapters.slackAllowedUsersPlaceholder')}
+                  hint={t('settings.adapters.allowedUsersHint')}
+                />
               </div>
-
-              {slackManifest && (
-                <details className="text-xs text-[var(--color-text-secondary)]">
-                  <summary className="cursor-pointer select-none">{t('settings.adapters.slackManifestToggle')}</summary>
-                  <pre className="mt-2 max-h-56 overflow-auto rounded-[var(--radius-md)] bg-[var(--color-surface-container-low)] p-3 text-[11px] leading-5">
-                    {slackManifest.manifest}
-                  </pre>
-                </details>
-              )}
-              {slackManifestError && (
-                <p className="text-xs text-[var(--color-error)]">{slackManifestError}</p>
-              )}
-              {slackStatus && (
-                <p className="text-sm text-[var(--color-text-secondary)]">{slackStatus}</p>
-              )}
-            </div>
-
-            <div className="grid grid-cols-2 gap-4">
-              <Input
-                label={t('settings.adapters.slackBotToken')}
-                type="password"
-                value={slackBotToken}
-                onChange={(e) => setSlackBotToken(e.target.value)}
-                placeholder={t('settings.adapters.slackBotTokenPlaceholder')}
-              />
-              <Input
-                label={t('settings.adapters.slackAppToken')}
-                type="password"
-                value={slackAppToken}
-                onChange={(e) => setSlackAppToken(e.target.value)}
-                placeholder={t('settings.adapters.slackAppTokenPlaceholder')}
-              />
-            </div>
-
-            <div className="flex flex-col gap-1">
-              <Input
-                label={t('settings.adapters.allowedUsers')}
-                value={slackAllowedUsers}
-                onChange={(e) => setSlackAllowedUsers(e.target.value)}
-                placeholder={t('settings.adapters.slackAllowedUsersPlaceholder')}
-              />
-              <p className="text-xs text-[var(--color-text-tertiary)]">{t('settings.adapters.allowedUsersHint')}</p>
-            </div>
-          </div>
-        )}
-      </section>
+            </>
+          )}
+        </SettingsGroup>
+      </SettingsSection>
 
       {/* Save */}
-      <div className="flex items-center gap-3">
-        <Button onClick={handleSave} loading={isSaving}>
+      <div className="mt-7 flex items-center gap-3">
+        <Button variant="primary" size="base" onClick={handleSave} loading={isSaving}>
           {saveStatus === 'saved' ? t('settings.adapters.saved') : t('settings.adapters.save')}
         </Button>
         {saveStatus === 'saved' && (
-          <span className="text-sm text-[var(--color-success)]">
-            <span className="material-symbols-outlined text-[16px] align-middle mr-1">check_circle</span>
+          <span className="inline-flex items-center gap-1.5 text-xs text-[var(--color-success)]">
+            <CircleCheck size={14} strokeWidth={1.75} aria-hidden="true" />
             {t('settings.adapters.saved')}
           </span>
         )}
         {saveStatus === 'error' && (
-          <span className="text-sm text-[var(--color-error)]">
-            <span className="material-symbols-outlined text-[16px] align-middle mr-1">error</span>
+          <span className="inline-flex min-w-0 items-center gap-1.5 text-xs text-[var(--color-error)]">
+            <CircleAlert size={14} strokeWidth={1.75} aria-hidden="true" className="shrink-0" />
             {saveError}
           </span>
         )}
@@ -1593,7 +1615,71 @@ export function AdapterSettings() {
 }
 
 /**
- * The scan-to-bind card shared by Feishu, WeCom and QQ.
+ * The head line of a binding section inside the IM card: status dot, title,
+ * description, and the section's actions pinned right.
+ */
+function PanelHead({
+  tone,
+  title,
+  description,
+  detail,
+  actions,
+}: {
+  tone?: Tone
+  title: string
+  description: string
+  detail?: ReactNode
+  actions?: ReactNode
+}) {
+  return (
+    <div className="flex items-start gap-3">
+      {tone && <StatusDot tone={tone} size="md" className="mt-1.5" />}
+      <div className="min-w-0 flex-1">
+        <h4 className={ROW_TITLE}>{title}</h4>
+        <p className={ROW_DESC}>{description}</p>
+        {detail}
+      </div>
+      {actions && <div className="flex shrink-0 items-center gap-2">{actions}</div>}
+    </div>
+  )
+}
+
+/** A live QR code and the status lines beside it, indented under the head's text. */
+function QrArea({ src, alt, children }: { src?: string | null; alt: string; children: ReactNode }) {
+  return (
+    <div className="mt-3 flex flex-wrap items-start gap-4 pl-5">
+      {src && <img src={src} alt={alt} className={QR_IMAGE} />}
+      <div className="min-w-0 flex-1 space-y-1.5 pt-1">{children}</div>
+    </div>
+  )
+}
+
+const BANNER_TONE = {
+  success: 'bg-[var(--color-success-container)] text-[var(--color-on-success-container)]',
+  warning: 'bg-[var(--color-warning-container)] text-[var(--color-on-warning-container)]',
+  error: 'bg-[var(--color-error-container)] text-[var(--color-on-error-container)]',
+} as const
+
+function StatusBanner({
+  tone,
+  className,
+  children,
+}: {
+  tone: keyof typeof BANNER_TONE
+  className?: string
+  children: ReactNode
+}) {
+  const Icon = tone === 'success' ? CircleCheck : tone === 'error' ? CircleAlert : TriangleAlert
+  return (
+    <div className={cx('flex items-start gap-2 rounded-[var(--radius-md)] px-3 py-2 text-xs leading-[1.5]', BANNER_TONE[tone], className)}>
+      <Icon size={14} strokeWidth={1.75} aria-hidden="true" className="mt-px shrink-0" />
+      <span className="min-w-0 break-words">{children}</span>
+    </div>
+  )
+}
+
+/**
+ * The scan-to-bind section shared by Feishu, WeCom and QQ.
  *
  * All three show the same four things — a title, a bind button, the QR image
  * while an attempt is live, and the current status line — so the panel is one
@@ -1628,61 +1714,54 @@ function QrBindPanel({
   // panel keys off the live attempt rather than the picture: the button stops
   // spinning once the code exists, and the raw URL is offered as a fallback.
   const attemptActive = Boolean(binding.sessionKey)
+  const tone: Tone = attemptActive ? 'info' : isBound ? 'success' : 'neutral'
   return (
-    <div className="rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface)] p-4 space-y-3">
-      <div className="flex items-start justify-between gap-4">
-        <div className="min-w-0">
-          <h4 className="text-sm font-semibold text-[var(--color-text-primary)]">{title}</h4>
-          <p className="mt-1 text-xs text-[var(--color-text-tertiary)]">{description}</p>
-          {isBound && boundDetail && (
-            <p className="mt-1 truncate text-xs text-[var(--color-text-tertiary)]">{boundDetail}</p>
-          )}
-        </div>
-        <div className="flex items-center gap-2 shrink-0">
-          <Button
-            onClick={() => void binding.begin()}
-            loading={binding.isBinding && !attemptActive}
-            size="sm"
-          >
-            {bindLabel}
-          </Button>
-          {isBound && (
-            <Button onClick={onUnbind} loading={isUnbinding} size="sm" variant="danger">
-              {unbindLabel}
+    <div className="px-4 py-3.5">
+      <PanelHead
+        tone={tone}
+        title={title}
+        description={description}
+        detail={isBound && boundDetail
+          ? <p className="mt-1 truncate font-mono text-[11px] text-[var(--color-text-tertiary)]">{boundDetail}</p>
+          : null}
+        actions={(
+          <>
+            <Button
+              variant="secondary"
+              size="sm"
+              icon={<QrCode size={14} strokeWidth={1.75} aria-hidden="true" />}
+              onClick={() => void binding.begin()}
+              loading={binding.isBinding && !attemptActive}
+            >
+              {bindLabel}
             </Button>
-          )}
-        </div>
-      </div>
+            {isBound && (
+              <Button variant="danger-ghost" size="sm" onClick={onUnbind} loading={isUnbinding}>
+                {unbindLabel}
+              </Button>
+            )}
+          </>
+        )}
+      />
 
       {attemptActive && (
-        <div className="flex flex-wrap items-start gap-4">
-          {binding.qrDataUrl && (
-            <img
-              src={binding.qrDataUrl}
-              alt={qrAlt}
-              className="h-40 w-40 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-white object-contain p-2"
-            />
+        <QrArea src={binding.qrDataUrl} alt={qrAlt}>
+          <p className={STATUS_TEXT}>{binding.status || waitingLabel}</p>
+          {binding.verificationUrl && (
+            <a
+              href={binding.verificationUrl}
+              target="_blank"
+              rel="noreferrer"
+              className={URL_LINK}
+            >
+              {binding.verificationUrl}
+            </a>
           )}
-          <div className="min-w-0 flex-1 space-y-2 pt-2">
-            <p className="text-sm text-[var(--color-text-secondary)]">
-              {binding.status || waitingLabel}
-            </p>
-            {binding.verificationUrl && (
-              <a
-                href={binding.verificationUrl}
-                target="_blank"
-                rel="noreferrer"
-                className="block truncate text-xs text-[var(--color-brand)] hover:underline"
-              >
-                {binding.verificationUrl}
-              </a>
-            )}
-          </div>
-        </div>
+        </QrArea>
       )}
 
       {!attemptActive && binding.status && (
-        <p className="text-sm text-[var(--color-text-secondary)]">{binding.status}</p>
+        <p className={`mt-2 pl-5 ${STATUS_TEXT}`}>{binding.status}</p>
       )}
     </div>
   )
@@ -1695,29 +1774,3 @@ function splitAllowedUsers(value: string): string[] {
     .map((entry) => entry.trim())
     .filter(Boolean)
 }
-
-function ImTabButton({
-  label,
-  active,
-  onClick,
-}: {
-  label: string
-  active: boolean
-  onClick: () => void
-}) {
-  return (
-    <button
-      type="button"
-      role="tab"
-      aria-selected={active}
-      onClick={onClick}
-      className={`relative px-4 py-2.5 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-brand)] focus-visible:ring-inset ${
-        active
-          ? 'text-[var(--color-text-primary)] font-semibold after:absolute after:left-3 after:right-3 after:bottom-0 after:h-[2px] after:bg-[var(--color-brand)]'
-          : 'text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]'
-      }`}
-    >
-      {label}
-    </button>
-  )
-}
diff --git a/desktop/src/pages/ComputerUseSettings.test.tsx b/desktop/src/pages/ComputerUseSettings.test.tsx
index 6e268d7d..773c522a 100644
--- a/desktop/src/pages/ComputerUseSettings.test.tsx
+++ b/desktop/src/pages/ComputerUseSettings.test.tsx
@@ -441,6 +441,19 @@ describe('ComputerUseSettings', () => {
       expect(screen.getByRole('switch', { name: 'Enabled' })).toBeInTheDocument()
     })
 
+    it('states each OS permission with a semantic badge instead of fixed glow colors', async () => {
+      computerUseApiMock.getStatus.mockResolvedValue(nativeStatus)
+
+      const { container } = render(<ComputerUseSettings />)
+
+      await screen.findByRole('heading', { name: 'Computer Control' })
+      // accessibility: false → needs attention (warning); screenRecording: true → granted (success).
+      expect(screen.getByText('Needs authorization').className).toContain('--color-warning-container')
+      expect(screen.getByText('Granted').className).toContain('--color-success-container')
+      // The old dots carried stock emerald/amber rgba() halos that ignore [data-theme].
+      expect(container.innerHTML).not.toMatch(/rgba\(/)
+    })
+
     it('shows a permission probe failure instead of permanent checking labels', async () => {
       computerUseApiMock.getStatus.mockResolvedValue({
         ...nativeStatus,
diff --git a/desktop/src/pages/ComputerUseSettings.tsx b/desktop/src/pages/ComputerUseSettings.tsx
index 97f477ab..09bfbfb3 100644
--- a/desktop/src/pages/ComputerUseSettings.tsx
+++ b/desktop/src/pages/ComputerUseSettings.tsx
@@ -1,9 +1,32 @@
-import { useState, useEffect, useCallback, useRef } from 'react'
+import { useState, useEffect, useCallback, useRef, type ReactNode } from 'react'
+import {
+  CircleAlert,
+  CircleCheck,
+  CircleHelp,
+  CircleX,
+  Download,
+  ExternalLink,
+  FolderOpen,
+  RefreshCw,
+  RotateCcw,
+  Save,
+  ShieldCheck,
+  TriangleAlert,
+} from 'lucide-react'
 import { computerUseApi, type ComputerUseStatus, type SetupResult } from '../api/computerUse'
 import { useTranslation } from '../i18n'
 import { ComputerUseEnableDialog } from '@/components/computer-use/ComputerUseEnableDialog'
+import {
+  SettingsBlock,
+  SettingsGroup,
+  SettingsPageHeader,
+  SettingsRow,
+  SettingsSection,
+} from '@/components/settings/SettingsSection'
+import { Badge, StatusDot, type Tone } from '@/components/ui/Badge'
 import { Button } from '@/components/ui/Button'
 import { ErrorState } from '@/components/ui/ErrorState'
+import { Input } from '@/components/ui/Input'
 import { LoadingState } from '@/components/ui/LoadingState'
 import { Switch } from '@/components/ui/Switch'
 import { getDesktopHost } from '../lib/desktopHost'
@@ -14,24 +37,56 @@ const PYTHON_DOWNLOAD_URLS: Record<string, string> = {
   win32: 'https://www.python.org/downloads/windows/',
 }
 
+// Settings.tsx owns the page frame (width, gutters); a pane is just a column.
+const PAGE_CLASS = 'min-w-0'
+// The status rows carry a leading icon/dot, which `SettingsRow` has no slot
+// for, so they reuse its title/description type directly.
+const ROW_TITLE_CLASS = 'text-[13px] font-medium leading-5 text-[var(--color-text-primary)]'
+const ROW_DESC_CLASS = 'mt-0.5 text-xs leading-[1.5] text-[var(--color-text-tertiary)]'
+
+type NoticeTone = 'error' | 'warning' | 'success'
+
+const NOTICE_CLASSES: Record<NoticeTone, string> = {
+  error: 'bg-[var(--color-error-container)] text-[var(--color-on-error-container)]',
+  warning: 'bg-[var(--color-warning-container)] text-[var(--color-on-warning-container)]',
+  success: 'bg-[var(--color-success-container)] text-[var(--color-on-success-container)]',
+}
+
+const NOTICE_ICONS: Record<NoticeTone, typeof CircleAlert> = {
+  error: CircleAlert,
+  warning: TriangleAlert,
+  success: CircleCheck,
+}
+
+/** A tinted status banner: semantic container fill, no border, 14px icon. */
+function Notice({ tone, children }: { tone: NoticeTone; children: ReactNode }) {
+  const Icon = NOTICE_ICONS[tone]
+  return (
+    <div className={`flex items-start gap-2 rounded-[var(--radius-md)] px-3 py-2 text-xs leading-[1.5] ${NOTICE_CLASSES[tone]}`}>
+      <Icon size={14} strokeWidth={1.75} aria-hidden="true" className="mt-px shrink-0" />
+      <div className="min-w-0 flex-1">{children}</div>
+    </div>
+  )
+}
+
 function StatusIcon({ ok }: { ok: boolean | null }) {
   if (ok === null) {
-    return <span className="material-symbols-outlined text-[18px] text-[var(--color-text-tertiary)]">help</span>
+    return <CircleHelp size={16} strokeWidth={1.75} aria-hidden="true" className="shrink-0 text-[var(--color-text-tertiary)]" />
   }
   return ok ? (
-    <span className="material-symbols-outlined text-[18px] text-[var(--color-success)]" style={{ fontVariationSettings: "'FILL' 1" }}>check_circle</span>
+    <CircleCheck size={16} strokeWidth={1.75} aria-hidden="true" className="shrink-0 text-[var(--color-success)]" />
   ) : (
-    <span className="material-symbols-outlined text-[18px] text-[var(--color-error)]" style={{ fontVariationSettings: "'FILL' 1" }}>cancel</span>
+    <CircleX size={16} strokeWidth={1.75} aria-hidden="true" className="shrink-0 text-[var(--color-error)]" />
   )
 }
 
 function StatusRow({ label, ok, detail }: { label: string; ok: boolean | null; detail: string }) {
   return (
-    <div className="flex items-center gap-3 py-2.5 px-4 rounded-[var(--radius-lg)] bg-[var(--color-surface-container-low)]">
+    <div className="flex min-h-[52px] items-center gap-3 px-4 py-3">
       <StatusIcon ok={ok} />
-      <div className="flex-1 min-w-0">
-        <span className="text-sm font-medium text-[var(--color-text-primary)]">{label}</span>
-        <span className="ml-2 text-xs text-[var(--color-text-tertiary)]">{detail}</span>
+      <div className="min-w-0 flex-1">
+        <div className={ROW_TITLE_CLASS}>{label}</div>
+        <div className={`${ROW_DESC_CLASS} break-all`}>{detail}</div>
       </div>
     </div>
   )
@@ -280,7 +335,7 @@ export function ComputerUseSettings() {
   // page replaced the entire tree.
   if (status === null) {
     return (
-      <div className="max-w-2xl">
+      <div className={PAGE_CLASS}>
         {checkState === 'error' ? (
           <ErrorState
             size="lg"
@@ -300,7 +355,7 @@ export function ComputerUseSettings() {
   // rendering as enabled when the capability probe wins the race.
   if (configState === 'loading') {
     return (
-      <div className="max-w-2xl">
+      <div className={PAGE_CLASS}>
         <LoadingState size="md" label={t('common.loading')} />
       </div>
     )
@@ -308,7 +363,7 @@ export function ComputerUseSettings() {
 
   if (configState === 'error') {
     return (
-      <div className="max-w-2xl">
+      <div className={PAGE_CLASS}>
         <ErrorState
           size="lg"
           title={t('settings.computerUse.configLoadFailed')}
@@ -323,16 +378,13 @@ export function ComputerUseSettings() {
     const macosVersionProblem = status.platform === 'darwin'
     const versionDetectionFailed = status.cuHelper.reason === 'system_version_unknown'
     return (
-      <div className="max-w-2xl space-y-5">
-        <div>
-          <h2 className="text-[24px] font-semibold leading-tight text-[var(--color-text-primary)]" style={{ fontFamily: 'var(--font-headline)' }}>
-            {t('settings.computerUse.controlTitle')}
-          </h2>
-          <p className="mt-1.5 text-[13.5px] leading-6 text-[var(--color-text-secondary)]">
-            {t('settings.computerUse.controlSubtitle')}
-          </p>
-        </div>
+      <div className={PAGE_CLASS}>
+        <SettingsPageHeader
+          title={t('settings.computerUse.controlTitle')}
+          description={t('settings.computerUse.controlSubtitle')}
+        />
         <ErrorState
+          className="mt-6"
           size="lg"
           title={versionDetectionFailed
             ? t('settings.computerUse.macosDetectionFailedTitle')
@@ -377,7 +429,7 @@ export function ComputerUseSettings() {
   // the native page instead of resurrecting the retired macOS setup screen.
   if (status.engine !== 'windows-compat') {
     return (
-      <div className="max-w-2xl space-y-5">
+      <div className={PAGE_CLASS}>
         <ErrorState
           size="lg"
           title={t('settings.computerUse.nativeUnavailableTitle')}
@@ -392,232 +444,221 @@ export function ComputerUseSettings() {
 
   return (
     <>
-      <div className="max-w-2xl space-y-6">
-      {/* Title */}
-      <div>
-        <div className="flex items-center justify-between gap-4">
-          <h2 className="text-[24px] font-semibold leading-tight text-[var(--color-text-primary)]" style={{ fontFamily: 'var(--font-headline)' }}>
-            {t('settings.computerUse.title')}
-          </h2>
-          <Switch
-            checked={computerUseEnabled}
-            onChange={requestComputerUseEnabled}
-            label={t('settings.computerUse.enabledToggle')}
-            size="sm"
-          />
-        </div>
-        <p className="mt-1.5 text-[13.5px] leading-6 text-[var(--color-text-secondary)]">
-          {t('settings.computerUse.description')}
-        </p>
-      </div>
-
-      {configError && (
-        <div className="px-4 py-3 rounded-[var(--radius-lg)] border border-[var(--color-error)] bg-[var(--color-error-container)] text-sm text-[var(--color-on-error-container)]">
-          {configError}
-        </div>
-      )}
-
-      {!computerUseEnabled && (
-        <div className="px-4 py-3 rounded-[var(--radius-lg)] border border-[var(--color-warning)] bg-[var(--color-warning-container)] text-sm text-[var(--color-on-warning-container)]">
-          {t('settings.computerUse.disabledHint')}
-        </div>
-      )}
-
-      {checkState === 'loading' ? (
-        <LoadingState size="md" label={t('common.loading')} />
-      ) : checkState === 'error' ? (
-        <ErrorState
-          size="lg"
-          title={t('settings.computerUse.statusCheckFailed')}
-          retryLabel={t('common.retry')}
-          onRetry={fetchStatus}
+      <div className={PAGE_CLASS}>
+        <SettingsPageHeader
+          title={t('settings.computerUse.title')}
+          description={t('settings.computerUse.description')}
+          action={(
+            <Switch
+              checked={computerUseEnabled}
+              onChange={requestComputerUseEnabled}
+              label={t('settings.computerUse.enabledToggle')}
+            />
+          )}
         />
-      ) : status ? (
-        <>
-          {!status.supported && (
-            <div className="px-4 py-3 rounded-[var(--radius-lg)] border border-[var(--color-warning)] bg-[var(--color-warning-container)] text-sm text-[var(--color-on-warning-container)]">
-              {t('settings.computerUse.notSupported')}
-            </div>
+
+        <div className="mt-6 space-y-4">
+          {configError && <Notice tone="error">{configError}</Notice>}
+
+          {!computerUseEnabled && (
+            <Notice tone="warning">{t('settings.computerUse.disabledHint')}</Notice>
           )}
 
-          {/* Status checks */}
-          <div className="space-y-2">
-            <StatusRow
-              label={t('settings.computerUse.python')}
-              ok={status.python.installed}
-              detail={pythonDetail}
+          {checkState === 'loading' ? (
+            <LoadingState size="md" label={t('common.loading')} />
+          ) : checkState === 'error' ? (
+            <ErrorState
+              size="lg"
+              title={t('settings.computerUse.statusCheckFailed')}
+              retryLabel={t('common.retry')}
+              onRetry={fetchStatus}
             />
-            <StatusRow
-              label={t('settings.computerUse.venv')}
-              ok={status.venv.created}
-              detail={status.venv.created ? `${t('settings.computerUse.venvReady')} — ${status.venv.path}` : t('settings.computerUse.venvNotReady')}
-            />
-            <StatusRow
-              label={t('settings.computerUse.deps')}
-              ok={status.dependencies.installed}
-              detail={status.dependencies.installed ? t('settings.computerUse.depsReady') : t('settings.computerUse.depsNotReady')}
-            />
-          </div>
+          ) : status ? (
+            <>
+              {!status.supported && (
+                <Notice tone="warning">{t('settings.computerUse.notSupported')}</Notice>
+              )}
 
-          <div className="space-y-2 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)] p-4">
-            <label htmlFor="computer-use-python-path" className="block text-sm font-medium text-[var(--color-text-primary)]">
-              {t('settings.computerUse.pythonPathLabel')}
-            </label>
-            <div className="flex flex-wrap gap-2">
-              <input
-                id="computer-use-python-path"
-                type="text"
-                value={pythonPathDraft}
-                onChange={e => {
-                  setPythonPathDraft(e.target.value)
-                  setPythonPathMessage(null)
-                }}
-                placeholder={t('settings.computerUse.pythonPathPlaceholder')}
-                className="min-w-[220px] flex-1 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container)] px-3 py-2 font-mono text-xs text-[var(--color-text-primary)] placeholder:text-[var(--color-text-tertiary)] focus:border-[var(--color-brand)] focus:outline-none"
-              />
-              <Button
-                variant="secondary"
-                size="base"
-                onClick={choosePythonPath}
-                disabled={pythonPathSaving}
-                icon={<span className="material-symbols-outlined text-[16px]">folder_open</span>}
-              >
-                {t('settings.computerUse.pythonPathBrowse')}
-              </Button>
-              <Button
-                variant="primary"
-                size="base"
-                onClick={() => savePythonPath()}
-                disabled={!pythonPathDirty}
-                loading={pythonPathSaving}
-                icon={<span className="material-symbols-outlined text-[16px]">save</span>}
-              >
-                {t('settings.computerUse.pythonPathSave')}
-              </Button>
-              {pythonPathSaved && (
+              {/* Status checks */}
+              <SettingsGroup>
+                <StatusRow
+                  label={t('settings.computerUse.python')}
+                  ok={status.python.installed}
+                  detail={pythonDetail}
+                />
+                <StatusRow
+                  label={t('settings.computerUse.venv')}
+                  ok={status.venv.created}
+                  detail={status.venv.created ? `${t('settings.computerUse.venvReady')} — ${status.venv.path}` : t('settings.computerUse.venvNotReady')}
+                />
+                <StatusRow
+                  label={t('settings.computerUse.deps')}
+                  ok={status.dependencies.installed}
+                  detail={status.dependencies.installed ? t('settings.computerUse.depsReady') : t('settings.computerUse.depsNotReady')}
+                />
+              </SettingsGroup>
+
+              <SettingsGroup>
+                <SettingsRow
+                  title={t('settings.computerUse.pythonPathLabel')}
+                  description={pythonPathMessage ?? t('settings.computerUse.pythonPathHint')}
+                  htmlFor="computer-use-python-path"
+                  layout="stack"
+                >
+                  <Input
+                    id="computer-use-python-path"
+                    type="text"
+                    size="md"
+                    containerClassName="min-w-[220px] flex-1"
+                    className="font-mono"
+                    value={pythonPathDraft}
+                    onChange={e => {
+                      setPythonPathDraft(e.target.value)
+                      setPythonPathMessage(null)
+                    }}
+                    placeholder={t('settings.computerUse.pythonPathPlaceholder')}
+                  />
+                  <Button
+                    variant="secondary"
+                    size="base"
+                    onClick={choosePythonPath}
+                    disabled={pythonPathSaving}
+                    icon={<FolderOpen size={14} strokeWidth={1.75} aria-hidden="true" />}
+                  >
+                    {t('settings.computerUse.pythonPathBrowse')}
+                  </Button>
+                  <Button
+                    variant="primary"
+                    size="base"
+                    onClick={() => savePythonPath()}
+                    disabled={!pythonPathDirty}
+                    loading={pythonPathSaving}
+                    icon={<Save size={14} strokeWidth={1.75} aria-hidden="true" />}
+                  >
+                    {t('settings.computerUse.pythonPathSave')}
+                  </Button>
+                  {pythonPathSaved && (
+                    <Button
+                      variant="secondary"
+                      size="base"
+                      onClick={() => savePythonPath('')}
+                      disabled={pythonPathSaving}
+                      icon={<RotateCcw size={14} strokeWidth={1.75} aria-hidden="true" />}
+                    >
+                      {t('settings.computerUse.pythonPathAuto')}
+                    </Button>
+                  )}
+                </SettingsRow>
+              </SettingsGroup>
+
+              {/* macOS Permissions — only shown on macOS (darwin) */}
+              {envReady && status.platform === 'darwin' && (
+                <>
+                  <SettingsGroup>
+                    <StatusRow
+                      label={t('settings.computerUse.accessibility')}
+                      ok={status.permissions.accessibility}
+                      detail={
+                        status.permissions.accessibility === null ? t('settings.computerUse.permUnknown')
+                          : status.permissions.accessibility ? t('settings.computerUse.permGranted')
+                            : t('settings.computerUse.permDenied')
+                      }
+                    />
+                    <StatusRow
+                      label={t('settings.computerUse.screenRecording')}
+                      ok={screenRecordingReady}
+                      detail={
+                        status.permissions.screenRecording === true ? t('settings.computerUse.permGranted')
+                          : status.permissions.screenRecording === false ? t('settings.computerUse.permDenied')
+                            : t('settings.computerUse.permScreenRecordingUnknownSoft')
+                      }
+                    />
+                  </SettingsGroup>
+                  {(accessibilityNeedsAttention || screenRecordingNeedsAttention) && (
+                    <Notice tone="warning">
+                      <p>{t('settings.computerUse.permRestartHint')}</p>
+                      <div className="mt-2 flex flex-wrap gap-2">
+                        {accessibilityNeedsAttention && (
+                          <Button
+                            variant="secondary"
+                            size="sm"
+                            onClick={() => openSystemSettings('Privacy_Accessibility')}
+                            icon={<ExternalLink size={14} strokeWidth={1.75} aria-hidden="true" />}
+                          >
+                            {t('settings.computerUse.openAccessibility')}
+                          </Button>
+                        )}
+                        {screenRecordingNeedsAttention && (
+                          <Button
+                            variant="secondary"
+                            size="sm"
+                            onClick={() => openSystemSettings('Privacy_ScreenCapture')}
+                            icon={<ExternalLink size={14} strokeWidth={1.75} aria-hidden="true" />}
+                          >
+                            {t('settings.computerUse.openScreenRecording')}
+                          </Button>
+                        )}
+                      </div>
+                    </Notice>
+                  )}
+                </>
+              )}
+
+              {allReady && (status.platform !== 'darwin' || (status.permissions.accessibility && screenRecordingReady)) && (
+                <Notice tone="success">{t('settings.computerUse.allReady')}</Notice>
+              )}
+
+              {setupResult && (
+                <Notice tone={setupResult.success ? 'success' : 'error'}>
+                  <div className="font-medium">
+                    {setupResult.success ? t('settings.computerUse.setupSuccess') : t('settings.computerUse.setupFail')}
+                  </div>
+                  <div className="mt-1.5 space-y-1">
+                    {setupResult.steps.map((step, i) => (
+                      <div key={i} className="flex items-center gap-2">
+                        <StatusIcon ok={step.ok} />
+                        <span className="min-w-0 break-words">{step.message}</span>
+                      </div>
+                    ))}
+                  </div>
+                </Notice>
+              )}
+
+              {/* Action buttons */}
+              <div className="flex flex-wrap gap-2">
+                {!status.python.installed && (
+                  <Button
+                    variant="primary"
+                    size="base"
+                    onClick={() => openExternalUrl(pythonDownloadUrl)}
+                    icon={<ExternalLink size={14} strokeWidth={1.75} aria-hidden="true" />}
+                  >
+                    {t('settings.computerUse.downloadPython')}
+                  </Button>
+                )}
+                {!envReady && status.python.installed && (
+                  <Button
+                    variant="primary"
+                    size="base"
+                    onClick={handleSetup}
+                    loading={setupRunning}
+                    icon={<Download size={14} strokeWidth={1.75} aria-hidden="true" />}
+                  >
+                    {setupRunning ? t('settings.computerUse.setupRunning') : t('settings.computerUse.setupBtn')}
+                  </Button>
+                )}
                 <Button
                   variant="secondary"
                   size="base"
-                  onClick={() => savePythonPath('')}
-                  disabled={pythonPathSaving}
-                  icon={<span className="material-symbols-outlined text-[16px]">restart_alt</span>}
+                  onClick={fetchStatus}
+                  icon={<RefreshCw size={14} strokeWidth={1.75} aria-hidden="true" />}
                 >
-                  {t('settings.computerUse.pythonPathAuto')}
+                  {t('settings.computerUse.recheckBtn')}
                 </Button>
-              )}
-            </div>
-            <p className="text-xs text-[var(--color-text-tertiary)]">
-              {pythonPathMessage ?? t('settings.computerUse.pythonPathHint')}
-            </p>
-          </div>
-
-          {/* macOS Permissions — only shown on macOS (darwin) */}
-          {envReady && status.platform === 'darwin' && (
-            <>
-              <StatusRow
-                label={t('settings.computerUse.accessibility')}
-                ok={status.permissions.accessibility}
-                detail={
-                  status.permissions.accessibility === null ? t('settings.computerUse.permUnknown')
-                    : status.permissions.accessibility ? t('settings.computerUse.permGranted')
-                      : t('settings.computerUse.permDenied')
-                }
-              />
-              <StatusRow
-                label={t('settings.computerUse.screenRecording')}
-                ok={screenRecordingReady}
-                detail={
-                  status.permissions.screenRecording === true ? t('settings.computerUse.permGranted')
-                    : status.permissions.screenRecording === false ? t('settings.computerUse.permDenied')
-                      : t('settings.computerUse.permScreenRecordingUnknownSoft')
-                }
-              />
-              {(accessibilityNeedsAttention || screenRecordingNeedsAttention) && (
-                <div className="flex flex-col gap-2 px-4 py-3 rounded-[var(--radius-lg)] border border-[var(--color-warning)] bg-[var(--color-warning-container)]">
-                  <p className="text-xs text-[var(--color-on-warning-container)]">{t('settings.computerUse.permRestartHint')}</p>
-                  <div className="flex gap-2">
-                    {accessibilityNeedsAttention && (
-                      <Button
-                        variant="secondary"
-                        size="base"
-                        onClick={() => openSystemSettings('Privacy_Accessibility')}
-                        icon={<span className="material-symbols-outlined text-[14px]">open_in_new</span>}
-                      >
-                        {t('settings.computerUse.openAccessibility')}
-                      </Button>
-                    )}
-                    {screenRecordingNeedsAttention && (
-                      <Button
-                        variant="secondary"
-                        size="base"
-                        onClick={() => openSystemSettings('Privacy_ScreenCapture')}
-                        icon={<span className="material-symbols-outlined text-[14px]">open_in_new</span>}
-                      >
-                        {t('settings.computerUse.openScreenRecording')}
-                      </Button>
-                    )}
-                  </div>
-                </div>
-              )}
-            </>
-          )}
-
-          {allReady && (status.platform !== 'darwin' || (status.permissions.accessibility && screenRecordingReady)) && (
-            <div className="px-4 py-3 rounded-[var(--radius-lg)] border border-[var(--color-success)] bg-[var(--color-success-container)] text-sm text-[var(--color-on-success-container)] flex items-center gap-2">
-              <span className="material-symbols-outlined text-[18px]" style={{ fontVariationSettings: "'FILL' 1" }}>verified</span>
-              {t('settings.computerUse.allReady')}
-            </div>
-          )}
-
-          {setupResult && (
-            <div className={`rounded-[var(--radius-lg)] border p-4 space-y-2 ${setupResult.success ? 'border-[var(--color-success)] bg-[var(--color-success-container)]' : 'border-[var(--color-error)] bg-[var(--color-error-container)]'}`}>
-              <div className={`text-sm font-medium ${setupResult.success ? 'text-[var(--color-on-success-container)]' : 'text-[var(--color-on-error-container)]'}`}>
-                {setupResult.success ? t('settings.computerUse.setupSuccess') : t('settings.computerUse.setupFail')}
               </div>
-              {setupResult.steps.map((step, i) => (
-                <div key={i} className="flex items-center gap-2 text-xs text-[var(--color-text-secondary)]">
-                  <StatusIcon ok={step.ok} />
-                  <span>{step.message}</span>
-                </div>
-              ))}
-            </div>
-          )}
-
-          {/* Action buttons */}
-          <div className="flex gap-3">
-            {!status.python.installed && (
-              <Button
-                variant="primary"
-                size="lg"
-                onClick={() => openExternalUrl(pythonDownloadUrl)}
-                icon={<span className="material-symbols-outlined text-[18px]">open_in_new</span>}
-              >
-                {t('settings.computerUse.downloadPython')}
-              </Button>
-            )}
-            {!envReady && status.python.installed && (
-              <Button
-                variant="primary"
-                size="lg"
-                onClick={handleSetup}
-                loading={setupRunning}
-                icon={<span className="material-symbols-outlined text-[18px]">download</span>}
-              >
-                {setupRunning ? t('settings.computerUse.setupRunning') : t('settings.computerUse.setupBtn')}
-              </Button>
-            )}
-            <Button
-              variant="secondary"
-              size="lg"
-              onClick={fetchStatus}
-              icon={<span className="material-symbols-outlined text-[18px]">refresh</span>}
-            >
-              {t('settings.computerUse.recheckBtn')}
-            </Button>
-          </div>
-
-        </>
-      ) : null}
+            </>
+          ) : null}
+        </div>
       </div>
       {enableDialog}
     </>
@@ -630,9 +671,11 @@ export function ComputerUseSettings() {
 
 type Translate = ReturnType<typeof useTranslation>
 
-/** macOS OS-permission status row (辅助功能 / 屏幕录制): a refined row with a
- *  status dot (granted=emerald, needed=amber, checking=neutral) + label + state,
- *  built to live inside a divide-y group rather than as a standalone boxy card. */
+/** macOS OS-permission status row (辅助功能 / 屏幕录制): a status dot
+ *  (granted=success, needed=warning, failed=danger, checking=info) + label +
+ *  state badge, built to live inside a divide-y group card. Colors ride the
+ *  semantic token pairs so they follow [data-theme] (stock emerald/amber shades
+ *  are fixed colors — see paletteEscapes.test.ts). */
 function PermissionStatusRow({
   t,
   label,
@@ -653,34 +696,20 @@ function PermissionStatusRow({
     : needed
       ? t('settings.computerUse.permNeeded')
       : t('settings.computerUse.permChecking')
-  const dotClass = failed
-    ? 'bg-[var(--color-error)]'
+  const tone: Tone = failed
+    ? 'danger'
     : granted
-    ? 'bg-[var(--color-success)]'
+    ? 'success'
     : needed
-      ? 'bg-[var(--color-warning)]'
-      : 'bg-[var(--color-text-tertiary)]'
-  // Status colors ride the semantic tokens so they follow [data-theme]
-  // (stock emerald/amber shades are fixed colors — see paletteEscapes.test.ts).
-  const detailClass = failed
-    ? 'text-[var(--color-error)]'
-    : granted
-    ? 'text-[var(--color-success)]'
-    : needed
-      ? 'text-[var(--color-warning)]'
-      : 'text-[var(--color-text-tertiary)]'
+      ? 'warning'
+      : 'info'
   return (
-    <div className="flex items-center gap-3 py-2.5">
-      <span className="relative flex h-2 w-2 flex-shrink-0 items-center justify-center" aria-hidden>
-        <span className={`h-2 w-2 rounded-full ${dotClass} ${granted ? 'shadow-[0_0_0_3px_rgba(16,185,129,0.15)]' : needed ? 'shadow-[0_0_0_3px_rgba(245,158,11,0.15)]' : ''}`} />
-        {needed && (
-          <span className="absolute h-2 w-2 animate-ping rounded-full bg-[var(--color-warning)] opacity-60" />
-        )}
-      </span>
-      <span className="flex-1 min-w-0 text-sm font-medium text-[var(--color-text-primary)]">
+    <div className="flex min-h-[52px] items-center gap-3 px-4 py-3">
+      <StatusDot tone={tone} size="md" pulse={needed} />
+      <span className={`min-w-0 flex-1 ${ROW_TITLE_CLASS}`}>
         {label}
       </span>
-      <span className={`text-xs font-medium ${detailClass}`}>{detail}</span>
+      <Badge tone={tone} size="xs">{detail}</Badge>
     </div>
   )
 }
@@ -712,35 +741,31 @@ function NativeComputerUse({
   const screenRecording = status.permissions.screenRecording
   const permissionProbeFailed = Boolean(status.permissions.error)
   const header = (
-    <div className="flex items-start justify-between gap-6">
-      <div className="min-w-0">
-        <h2 className="text-lg font-semibold tracking-tight text-[var(--color-text-primary)]">
-          {t('settings.computerUse.controlTitle')}
-        </h2>
-        <p className="mt-1.5 text-sm leading-relaxed text-[var(--color-text-secondary)]">
-          {t('settings.computerUse.controlSubtitle')}
-        </p>
-      </div>
-      <Switch
-        checked={enabled}
-        onChange={onToggleEnabled}
-        label={t('settings.computerUse.enabledToggle')}
-        size="sm"
-      />
-    </div>
+    <SettingsPageHeader
+      title={t('settings.computerUse.controlTitle')}
+      description={t('settings.computerUse.controlSubtitle')}
+      action={(
+        <Switch
+          checked={enabled}
+          onChange={onToggleEnabled}
+          label={t('settings.computerUse.enabledToggle')}
+        />
+      )}
+    />
   )
   const configErrorNotice = configError ? (
-    <div className="px-4 py-3 rounded-[var(--radius-lg)] border border-[var(--color-error)] bg-[var(--color-error-container)] text-sm text-[var(--color-on-error-container)]">
-      {configError}
+    <div className="mt-6">
+      <Notice tone="error">{configError}</Notice>
     </div>
   ) : null
 
   if (statusError) {
     return (
-      <div className="max-w-2xl space-y-5">
+      <div className={PAGE_CLASS}>
         {header}
         {configErrorNotice}
         <ErrorState
+          className="mt-6"
           size="lg"
           title={t('settings.computerUse.statusCheckFailed')}
           retryLabel={t('common.retry')}
@@ -753,10 +778,11 @@ function NativeComputerUse({
 
   if (!status.cuHelper.available) {
     return (
-      <div className="max-w-2xl space-y-5">
+      <div className={PAGE_CLASS}>
         {header}
         {configErrorNotice}
         <ErrorState
+          className="mt-6"
           size="lg"
           title={t('settings.computerUse.nativeUnavailableTitle')}
           detail={t('settings.computerUse.nativeUnavailableDetail')}
@@ -769,72 +795,60 @@ function NativeComputerUse({
   }
 
   return (
-    <div className="max-w-2xl space-y-10">
+    <div className={PAGE_CLASS}>
       {header}
       {configErrorNotice}
 
       {/* ─── 控制 (Control) ─── */}
-      <section className="space-y-3">
-        <h3 className="text-[11px] font-semibold uppercase tracking-[0.08em] text-[var(--color-text-tertiary)]">
-          {t('settings.computerUse.sectionControl')}
-        </h3>
-
-        {/* One elevated surface for the OS permissions required by the master
+      <SettingsSection title={t('settings.computerUse.sectionControl')}>
+        {/* One group card for the OS permissions required by the master
             toggle in the page header. */}
-        <div className="overflow-hidden rounded-xl border border-[var(--color-border)] bg-[var(--color-surface-container-low)] shadow-[0_1px_2px_rgba(0,0,0,0.03)]">
-          {/* OS-permission group */}
-          <div className="px-4 py-4">
-            <div className="text-sm font-semibold text-[var(--color-text-primary)]">
-              {t('settings.computerUse.osPermTitle')}
-            </div>
-            <p className="mt-1 text-xs leading-relaxed text-[var(--color-text-tertiary)]">
-              {t('settings.computerUse.osPermHint')}
-            </p>
-            <div className="mt-2 divide-y divide-[var(--color-border)]">
-              <PermissionStatusRow
-                t={t}
-                label={t('settings.computerUse.accessibility')}
-                state={accessibility}
-                failed={permissionProbeFailed}
-              />
-              <PermissionStatusRow
-                t={t}
-                label={t('settings.computerUse.screenRecording')}
-                state={screenRecording}
-                failed={permissionProbeFailed}
-              />
-            </div>
-            <div className="mt-3 flex flex-wrap items-center gap-2">
-              <button
+        <SettingsGroup>
+          <SettingsRow
+            title={t('settings.computerUse.osPermTitle')}
+            description={t('settings.computerUse.osPermHint')}
+          />
+          <PermissionStatusRow
+            t={t}
+            label={t('settings.computerUse.accessibility')}
+            state={accessibility}
+            failed={permissionProbeFailed}
+          />
+          <PermissionStatusRow
+            t={t}
+            label={t('settings.computerUse.screenRecording')}
+            state={screenRecording}
+            failed={permissionProbeFailed}
+          />
+          <SettingsBlock>
+            <div className="flex flex-wrap items-center gap-2">
+              <Button
+                variant="secondary"
+                size="base"
                 onClick={onOpenCard}
-                disabled={cardOpening}
-                className="flex items-center gap-1.5 rounded-lg border border-[var(--color-border)] bg-[var(--color-surface-container)] px-3 py-1.5 text-xs font-medium text-[var(--color-text-accent)] transition hover:bg-[var(--color-surface-hover)] active:scale-[0.98] disabled:opacity-50 disabled:active:scale-100"
+                loading={cardOpening}
+                icon={<ShieldCheck size={14} strokeWidth={1.75} aria-hidden="true" />}
               >
-                <span className="material-symbols-outlined text-[16px]">
-                  {cardOpening ? 'hourglass_empty' : 'shield_person'}
-                </span>
                 {cardOpening ? t('settings.computerUse.openingCard') : t('settings.computerUse.openCard')}
-              </button>
-              <button
+              </Button>
+              <Button
+                variant="ghost"
+                size="base"
                 onClick={onRecheck}
-                className="flex items-center gap-1.5 rounded-lg border border-[var(--color-border)] px-3 py-1.5 text-xs font-medium text-[var(--color-text-secondary)] transition hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] active:scale-[0.98]"
+                icon={<RefreshCw size={14} strokeWidth={1.75} aria-hidden="true" />}
               >
-                <span className="material-symbols-outlined text-[16px]">refresh</span>
                 {t('settings.computerUse.recheckBtn')}
-              </button>
+              </Button>
             </div>
             {cardError && (
               <p className="mt-2 flex items-center gap-1.5 text-xs text-[var(--color-error)]">
-                <span className="material-symbols-outlined text-[14px]" style={{ fontVariationSettings: "'FILL' 1" }}>
-                  error
-                </span>
+                <CircleAlert size={14} strokeWidth={1.75} aria-hidden="true" className="shrink-0" />
                 {cardError}
               </p>
             )}
-          </div>
-        </div>
-      </section>
-
+          </SettingsBlock>
+        </SettingsGroup>
+      </SettingsSection>
     </div>
   )
 }
diff --git a/desktop/src/pages/Connectors.test.tsx b/desktop/src/pages/Connectors.test.tsx
index c92cbdbc..bae508b3 100644
--- a/desktop/src/pages/Connectors.test.tsx
+++ b/desktop/src/pages/Connectors.test.tsx
@@ -403,3 +403,21 @@ it('distinguishes a management search miss from having no installed packages', (
   expect(screen.getByText('connectors.emptySearch')).toBeInTheDocument()
   expect(screen.queryByText('connectors.emptyAdded')).not.toBeInTheDocument()
 })
+
+it('colors each card status with the shared status vocabulary, never the brand', () => {
+  // Usable = success, needs the user = warning, broken = danger, working = info.
+  const cases: Array<[Partial<ConnectorDto>, string]> = [
+    [{ status: 'ready', connection: 'connected' }, 'success'],
+    [{ status: 'needs-auth' }, 'warning'],
+    [{ status: 'error' }, 'error'],
+    [{ status: 'authorizing', operation: { id: 'op', kind: 'authenticate', phase: 'waiting', startedAt: '' } }, 'info'],
+  ]
+  for (const [patch, tone] of cases) {
+    useConnectorStore.setState({ items: [{ ...item, ...patch } as ConnectorDto] })
+    const view = render(<Connectors />)
+    const status = screen.getByText(`connectors.status.${patch.status}`)
+    expect(status.className).toContain(`bg-[var(--color-${tone}-container)]`)
+    expect(status.className).not.toContain('brand')
+    view.unmount()
+  }
+})
diff --git a/desktop/src/pages/Connectors.tsx b/desktop/src/pages/Connectors.tsx
index b8b275c5..7b8936ba 100644
--- a/desktop/src/pages/Connectors.tsx
+++ b/desktop/src/pages/Connectors.tsx
@@ -6,7 +6,9 @@ import { Checkbox } from '@/components/ui/Checkbox'
 import { SlidersHorizontal } from 'lucide-react'
 import { useDismissable } from '@/hooks/useDismissable'
 import { Button } from '@/components/ui/Button'
-import { Badge } from '@/components/ui/Badge'
+import { Badge, type Tone } from '@/components/ui/Badge'
+import { cx } from '@/lib/cx'
+import { EXTENSION_CARD_GRID, EXTENSION_PAGE_COLUMN } from '@/components/market/pageLayout'
 import { Modal } from '@/components/ui/Modal'
 import { ConfirmDialog } from '@/components/ui/ConfirmDialog'
 import { Input } from '@/components/ui/Input'
@@ -91,6 +93,16 @@ export function Connectors({ mode = 'plugins', embedded = false, externalQuery,
   const statusLabel = (item: ConnectorDto) => isTool(item) && ['ready', 'configured', 'needs-auth', 'not-installed'].includes(item.status)
     ? t(item.enabled && (item.status === 'ready' || item.status === 'configured') ? 'connectors.skillsLoaded' : 'connectors.skillsPending')
     : item.transport === 'mcp' && item.status === 'needs-auth' ? t('connectors.needsService') : t(`connectors.status.${item.status}`)
+  // One status vocabulary app-wide: working = info, needs you = warning,
+  // usable = success, broken = danger.
+  const statusTone = (item: ConnectorDto): Tone => {
+    if (!item.supported) return 'neutral'
+    if (item.operation) return 'info'
+    if (item.status === 'error') return 'danger'
+    if (item.status === 'ready' || item.status === 'configured') return isTool(item) && !item.enabled ? 'warning' : 'success'
+    if (item.status === 'needs-auth' || (isTool(item) && item.status === 'not-installed')) return 'warning'
+    return 'neutral'
+  }
   const phaseLabel = (phase: string) => t(PHASE_KEYS[phase] || 'connectors.waiting')
   const detail = items.find(item => item.id === selected)
   const detailCapabilities = (detail?.capabilities || []).filter(capability => capability !== detail?.description)
@@ -169,19 +181,18 @@ export function Connectors({ mode = 'plugins', embedded = false, externalQuery,
       && (category === 'all' || (item.category || 'office') === category)
   })
   return <section className={`${embedded ? '' : 'h-full overflow-y-auto'} bg-[var(--color-surface)] text-[var(--color-text-primary)]`}>
-    <div className={embedded ? 'py-4' : 'mx-auto max-w-7xl px-5 py-6 lg:px-8'}>
+    <div className={embedded ? 'py-4' : cx(EXTENSION_PAGE_COLUMN, 'pb-10 pt-5')}>
       <h1 className="sr-only">{t(mode === 'skills' ? 'extensions.skills' : 'extensions.plugins')}</h1>
-      <header className={embedded ? '' : 'mb-5'}>
-        {embedded && <h2 className="mb-3 text-sm font-semibold">{t('extensions.featuredSkills')}</h2>}
+      <header className={embedded ? '' : 'mb-4'}>
+        {embedded && <h2 className="mb-3 text-[13px] font-semibold text-[var(--color-text-secondary)]">{t('extensions.featuredSkills')}</h2>}
         {!embedded && <>
-          <div className="flex items-center gap-3">
+          <div className="flex items-center gap-2">
             <SearchField size="md" value={query} onChange={setQuery} label={t(mode === 'skills' ? 'extensions.searchSkills' : 'extensions.searchPlugins')} placeholder={t(mode === 'skills' ? 'extensions.searchSkills' : 'extensions.searchPlugins')} clearLabel={t('connectors.clear')} containerClassName="min-w-0 flex-1" />
             {!management && <div ref={filterRef} className="relative shrink-0">
-              <Button ref={filterButtonRef} size="sm" variant="secondary" aria-expanded={filtersOpen} aria-controls={filterPanelId} onClick={() => setFiltersOpen(value => !value)}>
-                <SlidersHorizontal aria-hidden="true" className="h-4 w-4" />
-                {t('extensions.filter')}{activeFilters.length > 0 && <span className="tabular-nums">{activeFilters.length}</span>}
+              <Button ref={filterButtonRef} size="base" variant="secondary" icon={<SlidersHorizontal aria-hidden="true" size={14} strokeWidth={1.75} />} aria-expanded={filtersOpen} aria-controls={filterPanelId} onClick={() => setFiltersOpen(value => !value)}>
+                {t('extensions.filter')}{activeFilters.length > 0 && <span className="font-mono text-[11px] tabular-nums text-[var(--color-text-tertiary)]">{activeFilters.length}</span>}
               </Button>
-              {filtersOpen && <div id={filterPanelId} role="region" aria-label={t('extensions.filter')} className="absolute right-0 top-full z-[var(--z-dropdown)] mt-2 w-64 max-w-[calc(100vw-40px)] space-y-4 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface)] p-4 shadow-[var(--shadow-overlay)]">
+              {filtersOpen && <div id={filterPanelId} role="region" aria-label={t('extensions.filter')} className="absolute right-0 top-full z-[var(--z-dropdown)] mt-1.5 w-64 max-w-[calc(100vw-40px)] space-y-4 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] p-4 shadow-[var(--shadow-dropdown)]">
                 <Checkbox label={t('connectors.added')} checked={filter === 'added'} onChange={event => setFilter(event.target.checked ? 'added' : 'all')} />
                 {mode === 'plugins' && <SelectField size="md" label={t('connectors.region')} value={region} onChange={setRegion} options={[{ value: 'all', label: t('connectors.region.all') }, { value: 'china', label: t('connectors.region.china') }, { value: 'global', label: t('connectors.region.global') }]} />}
                 <SelectField size="md" label={t('extensions.categories')} value={category} onChange={setCategory} options={[{ value: 'all', label: t('connectors.all') }, ...availableCategories.map(value => ({ value, label: t(`connectors.category.${value}`) }))]} />
@@ -189,34 +200,34 @@ export function Connectors({ mode = 'plugins', embedded = false, externalQuery,
               </div>}
             </div>}
           </div>
-          {!management && activeFilters.length > 0 && <p className="mt-2 text-xs text-[var(--color-text-secondary)]">{activeFilters.join(' · ')}</p>}
+          {!management && activeFilters.length > 0 && <p className="mt-2 text-xs text-[var(--color-text-tertiary)]">{activeFilters.join(' · ')}</p>}
         </>}
       </header>
       {(error || localError) && (!detail || confirmation) && <div id="connector-error" className="mb-4"><ErrorState size="sm" title={t('connectors.loadFailed')} detail={localError || error} onRetry={() => { setLocalError(null); void refresh() }} retryLabel={t('connectors.retry')} /></div>}
-      {loading ? <div role="status" aria-label={t('connectors.loading')} className="grid grid-cols-1 gap-3 lg:grid-cols-2">{Array.from({ length: 8 }, (_, index) => <div key={index} className="flex h-28 items-center gap-3 rounded-[var(--radius-lg)] border border-[var(--color-border)] px-4"><Skeleton shape="block" width="40px" height="40px" /><div className="flex-1 space-y-2"><Skeleton width="40%" /><Skeleton /><Skeleton width="72%" /></div></div>)}</div>
-        : visible.length ? <div className="grid grid-cols-1 gap-3 lg:grid-cols-2">{visible.map(item => <ConnectorRow key={item.id} id={item.id} name={name(item)} description={nativeText(item, 'description')} kind={isTool(item) && mode !== 'skills' ? t('connectors.toolKind') : undefined} status={!item.supported ? t('connectors.unsupported') : item.installed || item.operation || item.status === 'error' ? statusLabel(item) : undefined} added={item.installed || !!item.operation || management} actionLabel={t('connectors.details')} action={management && item.installed && !item.operation ? <Button size="sm" variant="secondary" disabled={pending[item.id]} onClick={() => requestAction(item, 'remove')}>{t('market.uninstall.action')}</Button> : undefined} onDetails={() => showDetail(item)} onAction={() => showDetail(item)} />)}</div>
+      {loading ? <div role="status" aria-label={t('connectors.loading')} className={EXTENSION_CARD_GRID}>{Array.from({ length: 8 }, (_, index) => <div key={index} className="flex min-h-[104px] items-start gap-3 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] p-4"><Skeleton shape="block" width="40px" height="40px" /><div className="flex-1 space-y-2 pt-1"><Skeleton width="40%" /><Skeleton /><Skeleton width="72%" /></div></div>)}</div>
+        : visible.length ? <div className={EXTENSION_CARD_GRID}>{visible.map(item => <ConnectorRow key={item.id} id={item.id} name={name(item)} description={nativeText(item, 'description')} kind={isTool(item) && mode !== 'skills' ? t('connectors.toolKind') : undefined} status={!item.supported ? t('connectors.unsupported') : item.installed || item.operation || item.status === 'error' ? statusLabel(item) : undefined} statusTone={statusTone(item)} added={item.installed || !!item.operation || management} actionLabel={t('connectors.details')} action={management && item.installed && !item.operation ? <Button size="sm" variant="secondary" disabled={pending[item.id]} onClick={() => requestAction(item, 'remove')}>{t('market.uninstall.action')}</Button> : undefined} onDetails={() => showDetail(item)} onAction={() => showDetail(item)} />)}</div>
           : <EmptyState variant="plain" size="md" title={t('extensions.empty')} description={t(management ? (externalQuery ?? query).trim() ? 'connectors.emptySearch' : 'connectors.emptyAdded' : filter === 'added' ? 'connectors.emptyAdded' : 'connectors.emptySearch')} action={embedded || management ? undefined : { label: t('connectors.resetFilters'), variant: 'secondary', onClick: () => { setFilter('all'); setCategory('all'); setRegion('all'); setQuery('') } }} />}
     </div>
     <Modal open={!!detail && !confirmation} onClose={closeDetail} title={detail ? name(detail) : ''} width={600} footer={detail ? actions(detail) : undefined}>
-      {detail && <div className="space-y-4 text-xs leading-5">
-        <p className="text-sm text-[var(--color-text-secondary)]">{nativeText(detail, 'description')}</p>
-        <div className="flex items-center gap-2"><Badge tone="neutral">{statusLabel(detail)}</Badge><span className="text-[var(--color-text-tertiary)]">{isTool(detail) ? t(mode === 'skills' ? 'extensions.skills' : 'connectors.toolKind') : detail.transport === 'mcp' ? 'MCP' : 'CLI'}</span></div>
-        <p className="text-[var(--color-text-secondary)]">{nativeText(detail, 'requirements')}</p>
+      {detail && <div className="space-y-4 text-[13px] leading-5">
+        <p className="text-[var(--color-text-secondary)]">{nativeText(detail, 'description')}</p>
+        <div className="flex items-center gap-2"><Badge tone={statusTone(detail)}>{statusLabel(detail)}</Badge><span className="text-xs text-[var(--color-text-tertiary)]">{isTool(detail) ? t(mode === 'skills' ? 'extensions.skills' : 'connectors.toolKind') : detail.transport === 'mcp' ? 'MCP' : 'CLI'}</span></div>
+        <p className="text-xs text-[var(--color-text-tertiary)]">{nativeText(detail, 'requirements')}</p>
         {(error || localError) && <div id="connector-error"><ErrorState size="sm" title={t('connectors.loadFailed')} detail={localError || error} /></div>}
-        {!isTool(detail) && !!detail.setupFields?.length && <div className="space-y-3 rounded-[var(--radius-lg)] border border-[var(--color-border)] p-3">
-          <p className="font-medium">{t('connectors.configuration')}</p>
-          <p className="text-[var(--color-text-tertiary)]">{t('connectors.configurationHint')}</p>
+        {!isTool(detail) && !!detail.setupFields?.length && <div className="space-y-3 rounded-[var(--radius-md)] border border-[var(--color-border)] p-3">
+          <div><p className="font-medium">{t('connectors.configuration')}</p>
+          <p className="mt-0.5 text-xs text-[var(--color-text-tertiary)]">{t('connectors.configurationHint')}</p></div>
           {detail.setupFields.map(field => <Input key={field.key} size="md" label={field.label} type={field.secret ? 'password' : 'text'} autoComplete="off" spellCheck={false} placeholder={field.placeholder} value={configuration[field.key] || ''} error={invalidFields.includes(field.key) ? t('connectors.fieldRequired') : undefined} onChange={event => { setConfiguration(state => ({ ...state, [field.key]: event.target.value })); setInvalidFields(state => state.filter(key => key !== field.key)) }} />)}
         </div>}
         {!!detailCapabilities.length && <div><h3 className="mb-1 font-medium">{t('connectors.capabilities')}</h3><p className="text-[var(--color-text-secondary)]">{detailCapabilities.join(' · ')}</p></div>}
-        <dl className="grid grid-cols-[auto_1fr] gap-x-5 gap-y-2 border-y border-[var(--color-border)] py-3 [&>dt]:text-[var(--color-text-tertiary)] [&>dd]:min-w-0 [&>dd]:break-words">
+        <dl className="grid grid-cols-[auto_1fr] items-baseline gap-x-5 gap-y-2 border-y border-[var(--color-border)] py-3 [&>dt]:text-xs [&>dt]:text-[var(--color-text-tertiary)] [&>dd]:min-w-0 [&>dd]:break-words">
           {!isTool(detail) && <><dt>{t('connectors.account')}</dt><dd>{detail.accountLabel || t(detail.connection === 'connected' ? 'connectors.currentAccount' : 'connectors.noAccount')}</dd></>}
           <dt>{t('connectors.platforms')}</dt><dd>{detail.platforms.map(platform => PLATFORM_LABELS[platform] || platform).join(', ')}</dd>
           <dt>{t('connectors.source')}</dt><dd>{detail.transport === 'mcp' ? t('connectors.officialMcp') : detail.packageName}<Button size="xs" variant="ghost" onClick={() => void openUrl(detail.homepage)}>{t('connectors.homepage')}</Button></dd>
           <dt>{t('connectors.version')}</dt><dd>{detail.installedVersion || detail.version}{detail.updateAvailable && <p>{t('connectors.updateAvailable')}: {detail.version}</p>}</dd>
           <dt>{t('connectors.skills')}</dt><dd>{name(detail)} · {detail.pluginId}</dd>
         </dl>
-        <p className="text-[var(--color-text-tertiary)]">{t(isTool(detail) ? 'connectors.skillsRuntimeInfo' : detail.credentialMode === 'shared' ? 'connectors.shared' : 'connectors.isolated')}</p>
+        <p className="text-xs text-[var(--color-text-tertiary)]">{t(isTool(detail) ? 'connectors.skillsRuntimeInfo' : detail.credentialMode === 'shared' ? 'connectors.shared' : 'connectors.isolated')}</p>
         {!isTool(detail) && detail.status === 'configured' && <p>{t('connectors.localVerification')}</p>}
         <div><h3 className="mb-1 font-medium">{t('connectors.example')}</h3><p className="text-[var(--color-text-secondary)]">{nativeText(detail, 'example')}</p></div>
         {detail.error && <ErrorState size="sm" title={detail.failedPhase ? `${t('connectors.phase.failed')}: ${phaseLabel(detail.failedPhase)}` : t('connectors.status.error')} detail={detail.error} />}
diff --git a/desktop/src/pages/DiagnosticsSettings.tsx b/desktop/src/pages/DiagnosticsSettings.tsx
index ae51c4c7..e588a103 100644
--- a/desktop/src/pages/DiagnosticsSettings.tsx
+++ b/desktop/src/pages/DiagnosticsSettings.tsx
@@ -1,12 +1,36 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
+import {
+  Archive,
+  ChevronRight,
+  CircleCheck,
+  ClipboardList,
+  Copy,
+  Database,
+  FolderOpen,
+  HeartPulse,
+  Info,
+  RefreshCw,
+  Trash2,
+  TriangleAlert,
+} from 'lucide-react'
 import {
   diagnosticsApi,
   type DiagnosticEvent,
+  type DiagnosticSeverity,
   type DiagnosticsStatus,
   type LocalIndexState,
   type LocalIndexStatus,
 } from '../api/diagnostics'
+import { Badge, StatusDot, type Tone } from '@/components/ui/Badge'
 import { Button } from '@/components/ui/Button'
+import { EmptyState } from '@/components/ui/EmptyState'
+import {
+  SettingsBlock,
+  SettingsGroup,
+  SettingsPageHeader,
+  SettingsRow,
+  SettingsSection,
+} from '@/components/settings/SettingsSection'
 import { copyTextToClipboard } from '@/lib/clipboard'
 import { useTranslation } from '../i18n'
 import { formatBytes } from '../lib/formatBytes'
@@ -227,39 +251,50 @@ export function DiagnosticsSettings() {
   }
 
   return (
-    <div className="max-w-4xl">
-      <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4 mb-5">
-        <div>
-          <h2 className="text-[24px] font-semibold leading-tight text-[var(--color-text-primary)]" style={{ fontFamily: 'var(--font-headline)' }}>{t('settings.diagnostics.title')}</h2>
-          <p className="mt-1.5 text-[13.5px] leading-6 text-[var(--color-text-secondary)]">{t('settings.diagnostics.description')}</p>
-        </div>
-        <Button variant="secondary" size="sm" onClick={load} loading={isLoading} disabled={isRebuildingIndex}>
-          <span className="material-symbols-outlined text-[16px]" aria-hidden="true">refresh</span>
-          {t('settings.diagnostics.refresh')}
-        </Button>
-      </div>
+    <div className="min-w-0">
+      <SettingsPageHeader
+        title={t('settings.diagnostics.title')}
+        description={t('settings.diagnostics.description')}
+        action={(
+          <Button
+            variant="secondary"
+            size="base"
+            onClick={load}
+            loading={isLoading}
+            disabled={isRebuildingIndex}
+            icon={<RefreshCw size={14} strokeWidth={1.75} aria-hidden="true" />}
+          >
+            {t('settings.diagnostics.refresh')}
+          </Button>
+        )}
+      />
 
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-3 mb-5">
-        <Metric label={t('settings.diagnostics.totalSize')} value={status ? formatBytes(status.totalBytes) : '-'} />
-        <Metric label={t('settings.diagnostics.completeEvents')} value={status ? t('settings.diagnostics.completeEventsValue', { count: status.eventCount }) : '-'} />
-        <Metric label={t('settings.diagnostics.visibleEvents')} value={t('settings.diagnostics.visibleEventsValue', { count: events.length })} />
-        <Metric label={t('settings.diagnostics.recentErrors')} value={status ? String(status.recentErrorCount) : '-'} />
-        <Metric label={t('settings.diagnostics.retention')} value={status ? t('settings.diagnostics.retentionValue', { days: String(status.retentionDays), size: formatBytes(status.maxBytes) }) : '-'} />
-      </div>
+      {/* One stat card rather than five `SettingsStat` tiles: three of these
+          values are phrases ("600 complete events", "7 days / 50 MB") that do
+          not fit a 22px KPI number in a fifth of the pane. */}
+      <SettingsGroup className="mt-6">
+        <SettingsBlock>
+          <dl className="grid grid-cols-[repeat(auto-fill,minmax(104px,1fr))] gap-x-4 gap-y-3 py-0.5">
+            <Metric label={t('settings.diagnostics.totalSize')} value={status ? formatBytes(status.totalBytes) : '-'} />
+            <Metric label={t('settings.diagnostics.completeEvents')} value={status ? t('settings.diagnostics.completeEventsValue', { count: status.eventCount }) : '-'} />
+            <Metric label={t('settings.diagnostics.visibleEvents')} value={t('settings.diagnostics.visibleEventsValue', { count: events.length })} />
+            <Metric label={t('settings.diagnostics.recentErrors')} value={status ? String(status.recentErrorCount) : '-'} />
+            <Metric label={t('settings.diagnostics.retention')} value={status ? t('settings.diagnostics.retentionValue', { days: String(status.retentionDays), size: formatBytes(status.maxBytes) }) : '-'} />
+          </dl>
+        </SettingsBlock>
+      </SettingsGroup>
 
       {status && status.corruptLineCount > 0 ? (
-        <div role="alert" className="mb-5 rounded-[var(--radius-lg)] border border-[var(--color-warning)] bg-[var(--color-warning-container)] px-3 py-2 text-xs text-[var(--color-on-warning-container)]">
+        <WarningBanner>
           {t('settings.diagnostics.corruptLinesWarning', {
             count: status.corruptLineCount,
             physical: status.physicalLineCount,
           })}
-        </div>
+        </WarningBanner>
       ) : null}
 
       {status?.storageLimitExceeded ? (
-        <div role="alert" className="mb-5 rounded-[var(--radius-lg)] border border-[var(--color-warning)] bg-[var(--color-warning-container)] px-3 py-2 text-xs text-[var(--color-on-warning-container)]">
-          {t('settings.diagnostics.storageLimitExceededWarning')}
-        </div>
+        <WarningBanner>{t('settings.diagnostics.storageLimitExceededWarning')}</WarningBanner>
       ) : null}
 
       <LocalIndexPanel
@@ -270,59 +305,86 @@ export function DiagnosticsSettings() {
         onRebuild={() => setRebuildConfirmOpen(true)}
       />
 
-      <div className="mb-5">
+      <div className="mt-7">
         <DoctorPanel />
       </div>
 
-      <div className="border border-[var(--color-border)] rounded-[var(--radius-lg)] mb-5">
-        <div className="px-4 py-3 border-b border-[var(--color-border)] flex items-center justify-between gap-3">
-          <div>
-            <div className="text-sm font-medium text-[var(--color-text-primary)]">{t('settings.diagnostics.logDirectory')}</div>
-            <div className="text-xs text-[var(--color-text-tertiary)] font-mono break-all mt-0.5">{status?.logDir ?? '-'}</div>
-          </div>
-          <Button variant="secondary" size="sm" onClick={handleOpenDir}>
-            <span className="material-symbols-outlined text-[16px]" aria-hidden="true">folder_open</span>
+      <SettingsGroup className="mt-7">
+        <SettingsRow
+          title={t('settings.diagnostics.logDirectory')}
+          description={<span className="break-all font-mono text-[11px]">{status?.logDir ?? '-'}</span>}
+          layout="inline"
+        >
+          <Button
+            variant="secondary"
+            size="sm"
+            onClick={handleOpenDir}
+            icon={<FolderOpen size={14} strokeWidth={1.75} aria-hidden="true" />}
+          >
             {t('settings.diagnostics.openDirectory')}
           </Button>
-        </div>
-        <div className="px-4 py-3 flex flex-wrap items-center gap-2">
-          <Button size="sm" onClick={handleExport} loading={isExporting}>
-            <span className="material-symbols-outlined text-[16px]" aria-hidden="true">archive</span>
-            {t('settings.diagnostics.exportBundle')}
-          </Button>
-          <Button variant="secondary" size="sm" onClick={handleCopySummary}>
-            <span className="material-symbols-outlined text-[16px]" aria-hidden="true">content_copy</span>
-            {t('settings.diagnostics.copySummary')}
-          </Button>
-          <Button variant="secondary" size="sm" onClick={handleCopyIssueReport} loading={isCopyingIssueReport}>
-            <span className="material-symbols-outlined text-[16px]" aria-hidden="true">assignment</span>
-            {t('settings.diagnostics.copyIssueReport')}
-          </Button>
-          <Button variant="danger" size="sm" onClick={() => setClearConfirmOpen(true)} loading={isClearing}>
-            <span className="material-symbols-outlined text-[16px]" aria-hidden="true">delete</span>
-            {t('settings.diagnostics.clearLogs')}
-          </Button>
-          {lastExportPath && (
-            <span className="w-full text-xs text-[var(--color-text-tertiary)] font-mono break-all">
-              {lastExportPath}
-            </span>
-          )}
-        </div>
-      </div>
-
-      <div className="mb-3">
-        <h3 className="text-sm font-semibold text-[var(--color-text-primary)]" style={{ fontFamily: 'var(--font-headline)' }}>{t('settings.diagnostics.recentEvents')}</h3>
-        <p className="text-xs text-[var(--color-text-tertiary)] mt-0.5">{t('settings.diagnostics.privacyNote')}</p>
-      </div>
-
-      <div className="border border-[var(--color-border)] rounded-[var(--radius-lg)] overflow-hidden">
-        {events.length === 0 ? (
-          <div className="px-4 py-8 text-sm text-[var(--color-text-tertiary)] text-center">
-            {isLoading ? t('common.loading') : t('settings.diagnostics.noEvents')}
+        </SettingsRow>
+        <SettingsBlock>
+          <div className="flex flex-wrap items-center gap-2">
+            <Button
+              variant="primary"
+              size="sm"
+              onClick={handleExport}
+              loading={isExporting}
+              icon={<Archive size={14} strokeWidth={1.75} aria-hidden="true" />}
+            >
+              {t('settings.diagnostics.exportBundle')}
+            </Button>
+            <Button
+              variant="secondary"
+              size="sm"
+              onClick={handleCopySummary}
+              icon={<Copy size={14} strokeWidth={1.75} aria-hidden="true" />}
+            >
+              {t('settings.diagnostics.copySummary')}
+            </Button>
+            <Button
+              variant="secondary"
+              size="sm"
+              onClick={handleCopyIssueReport}
+              loading={isCopyingIssueReport}
+              icon={<ClipboardList size={14} strokeWidth={1.75} aria-hidden="true" />}
+            >
+              {t('settings.diagnostics.copyIssueReport')}
+            </Button>
+            <Button
+              variant="danger-ghost"
+              size="sm"
+              className="ml-auto"
+              onClick={() => setClearConfirmOpen(true)}
+              loading={isClearing}
+              icon={<Trash2 size={14} strokeWidth={1.75} aria-hidden="true" />}
+            >
+              {t('settings.diagnostics.clearLogs')}
+            </Button>
           </div>
-        ) : (
-          <div className="divide-y divide-[var(--color-border)]">
-            {events.map((event) => (
+          {lastExportPath && (
+            <div className="mt-2 break-all font-mono text-[11px] text-[var(--color-text-tertiary)]">
+              {lastExportPath}
+            </div>
+          )}
+        </SettingsBlock>
+      </SettingsGroup>
+
+      <SettingsSection
+        title={t('settings.diagnostics.recentEvents')}
+        description={t('settings.diagnostics.privacyNote')}
+      >
+        <SettingsGroup>
+          {events.length === 0 ? (
+            <EmptyState
+              variant="plain"
+              size="sm"
+              icon={<HeartPulse size={18} strokeWidth={1.75} />}
+              description={isLoading ? t('common.loading') : t('settings.diagnostics.noEvents')}
+            />
+          ) : (
+            events.map((event) => (
               <EventRow
                 key={event.id}
                 event={event}
@@ -333,10 +395,10 @@ export function DiagnosticsSettings() {
                 eventIdCopyFailedLabel={t('settings.diagnostics.eventIdCopyFailed')}
                 addToast={addToast}
               />
-            ))}
-          </div>
-        )}
-      </div>
+            ))
+          )}
+        </SettingsGroup>
+      </SettingsSection>
 
       <ConfirmDialog
         open={rebuildConfirmOpen}
@@ -369,6 +431,25 @@ export function DiagnosticsSettings() {
   )
 }
 
+function WarningBanner({ children }: { children: ReactNode }) {
+  return (
+    <div
+      role="alert"
+      className="mt-3 flex items-start gap-2 rounded-[var(--radius-md)] bg-[var(--color-warning-container)] px-3 py-2 text-xs leading-[1.5] text-[var(--color-on-warning-container)]"
+    >
+      <TriangleAlert size={14} strokeWidth={1.75} className="mt-px shrink-0" aria-hidden="true" />
+      <span className="min-w-0">{children}</span>
+    </div>
+  )
+}
+
+const LOCAL_INDEX_STATE_TONE: Record<LocalIndexState, Tone> = {
+  off: 'neutral',
+  building: 'info',
+  ready: 'success',
+  degraded: 'warning',
+}
+
 function LocalIndexPanel({
   status,
   unavailable,
@@ -391,17 +472,13 @@ function LocalIndexPanel({
       : null
 
   return (
-    <section
-      role="region"
-      aria-labelledby={titleId}
-      className="mb-5 rounded-[var(--radius-lg)] border border-[var(--color-border)]"
-    >
-      <div className="flex flex-col gap-3 border-b border-[var(--color-border)] px-4 py-3 sm:flex-row sm:items-start sm:justify-between">
-        <div>
-          <h3 id={titleId} className="text-sm font-medium text-[var(--color-text-primary)]" style={{ fontFamily: 'var(--font-headline)' }}>
+    <section role="region" aria-labelledby={titleId} className="mt-7">
+      <div className="mb-2 flex items-end justify-between gap-3 px-0.5">
+        <div className="min-w-0">
+          <h3 id={titleId} className="text-[13px] font-semibold leading-5 text-[var(--color-text-secondary)]">
             {t('settings.diagnostics.localIndex.title')}
           </h3>
-          <p className="mt-0.5 text-xs text-[var(--color-text-tertiary)]">
+          <p className="mt-0.5 text-xs leading-[1.5] text-[var(--color-text-tertiary)]">
             {t('settings.diagnostics.localIndex.description')}
           </p>
         </div>
@@ -411,57 +488,75 @@ function LocalIndexPanel({
           onClick={onRebuild}
           loading={rebuilding}
           disabled={unavailable}
+          icon={<Database size={14} strokeWidth={1.75} aria-hidden="true" />}
         >
-          <span className="material-symbols-outlined text-[16px]" aria-hidden="true">database</span>
           {t('settings.diagnostics.localIndex.rebuild')}
         </Button>
       </div>
 
-      {status ? (
-        <div className="grid grid-cols-2 gap-x-4 gap-y-3 px-4 py-3 sm:grid-cols-4">
-          <IndexMetric label={t('settings.diagnostics.localIndex.state')} value={localIndexStateLabel(status.state, t)} />
-          <IndexMetric
-            label={t('settings.diagnostics.localIndex.indexed')}
-            value={`${status.indexed} / ${status.discovered}`}
-          />
-          <IndexMetric label={t('settings.diagnostics.localIndex.degradedSources')} value={String(status.degradedSources)} />
-          <IndexMetric label={t('settings.diagnostics.localIndex.databaseSize')} value={formatBytes(status.databaseBytes)} />
-          <IndexMetric label={t('settings.diagnostics.localIndex.walSize')} value={formatBytes(status.walBytes)} />
-          <IndexMetric
-            label={t('settings.diagnostics.localIndex.lastUpdated')}
-            value={status.lastUpdatedAt ? new Date(status.lastUpdatedAt).toLocaleString() : t('settings.diagnostics.localIndex.never')}
-          />
-          <IndexMetric
-            label={t('settings.diagnostics.localIndex.errorCode')}
-            value={status.lastErrorCode ?? t('settings.diagnostics.localIndex.none')}
-            mono={Boolean(status.lastErrorCode)}
-          />
-        </div>
-      ) : (
-        <div className="px-4 py-4 text-xs text-[var(--color-text-tertiary)]">
-          {unavailable ? t('settings.diagnostics.localIndex.unavailable') : t('common.loading')}
-        </div>
-      )}
+      <SettingsGroup>
+        {status ? (
+          <SettingsBlock>
+            <div className="grid grid-cols-[repeat(auto-fill,minmax(128px,1fr))] gap-x-4 gap-y-3 py-0.5">
+              <IndexMetric
+                label={t('settings.diagnostics.localIndex.state')}
+                value={(
+                  <span className="inline-flex items-center gap-1.5">
+                    <StatusDot tone={LOCAL_INDEX_STATE_TONE[status.state]} size="md" />
+                    <span>{localIndexStateLabel(status.state, t)}</span>
+                  </span>
+                )}
+              />
+              <IndexMetric
+                label={t('settings.diagnostics.localIndex.indexed')}
+                value={`${status.indexed} / ${status.discovered}`}
+              />
+              <IndexMetric label={t('settings.diagnostics.localIndex.degradedSources')} value={String(status.degradedSources)} />
+              <IndexMetric label={t('settings.diagnostics.localIndex.databaseSize')} value={formatBytes(status.databaseBytes)} />
+              <IndexMetric label={t('settings.diagnostics.localIndex.walSize')} value={formatBytes(status.walBytes)} />
+              <IndexMetric
+                label={t('settings.diagnostics.localIndex.lastUpdated')}
+                value={status.lastUpdatedAt ? new Date(status.lastUpdatedAt).toLocaleString() : t('settings.diagnostics.localIndex.never')}
+              />
+              <IndexMetric
+                label={t('settings.diagnostics.localIndex.errorCode')}
+                value={status.lastErrorCode ?? t('settings.diagnostics.localIndex.none')}
+                mono={Boolean(status.lastErrorCode)}
+              />
+            </div>
+          </SettingsBlock>
+        ) : (
+          <SettingsBlock className="text-xs text-[var(--color-text-tertiary)]">
+            {unavailable ? t('settings.diagnostics.localIndex.unavailable') : t('common.loading')}
+          </SettingsBlock>
+        )}
 
-      {stateMessage ? (
-        <div role="status" className="border-t border-[var(--color-border)] px-4 py-2 text-xs text-[var(--color-text-tertiary)]">
-          {stateMessage}
-        </div>
-      ) : null}
-      {rebuildSucceeded ? (
-        <div role="status" className="border-t border-[var(--color-border)] px-4 py-2 text-xs text-[var(--color-success)]">
-          {t('settings.diagnostics.localIndex.rebuildSucceeded')}
-        </div>
-      ) : null}
+        {stateMessage ? (
+          <div role="status" className="flex items-start gap-2 px-4 py-2.5 text-xs leading-[1.5] text-[var(--color-text-tertiary)]">
+            <Info size={14} strokeWidth={1.75} className="mt-px shrink-0" aria-hidden="true" />
+            <span className="min-w-0">{stateMessage}</span>
+          </div>
+        ) : null}
+        {rebuildSucceeded ? (
+          <div role="status" className="flex items-start gap-2 px-4 py-2.5 text-xs leading-[1.5] text-[var(--color-success)]">
+            <CircleCheck size={14} strokeWidth={1.75} className="mt-px shrink-0" aria-hidden="true" />
+            <span className="min-w-0">{t('settings.diagnostics.localIndex.rebuildSucceeded')}</span>
+          </div>
+        ) : null}
+      </SettingsGroup>
     </section>
   )
 }
 
-function IndexMetric({ label, value, mono = false }: { label: string; value: string; mono?: boolean }) {
+function IndexMetric({ label, value, mono = false }: { label: string; value: ReactNode; mono?: boolean }) {
   return (
     <div className="min-w-0">
-      <div className="text-[11px] text-[var(--color-text-tertiary)]">{label}</div>
-      <div className={`mt-0.5 break-words text-xs font-medium text-[var(--color-text-primary)]${mono ? ' font-mono' : ''}`}>
+      <div className="text-xs text-[var(--color-text-tertiary)]">{label}</div>
+      <div
+        className={`mt-0.5 break-words font-medium tabular-nums text-[var(--color-text-primary)] ${
+          mono ? 'font-mono text-xs' : 'text-[13px]'
+        }`}
+      >
         {value}
       </div>
     </div>
@@ -476,13 +571,20 @@ function localIndexStateLabel(state: LocalIndexState, t: Translation): string {
 
 function Metric({ label, value }: { label: string; value: string }) {
   return (
-    <div className="border border-[var(--color-border)] rounded-[var(--radius-lg)] px-3 py-2">
-      <div className="text-xs text-[var(--color-text-tertiary)]">{label}</div>
-      <div className="text-sm font-semibold text-[var(--color-text-primary)] mt-1">{value}</div>
+    <div className="min-w-0">
+      <dt className="truncate text-xs text-[var(--color-text-tertiary)]">{label}</dt>
+      <dd className="mt-0.5 break-words text-sm font-semibold leading-snug tabular-nums text-[var(--color-text-primary)]">{value}</dd>
     </div>
   )
 }
 
+const SEVERITY_TONE: Record<DiagnosticSeverity, Tone> = {
+  error: 'danger',
+  warn: 'warning',
+  info: 'neutral',
+  debug: 'neutral',
+}
+
 function EventRow({
   event,
   detailsLabel,
@@ -500,49 +602,48 @@ function EventRow({
   eventIdCopyFailedLabel: string
   addToast: ReturnType<typeof useUIStore.getState>['addToast']
 }) {
-  const severityClass =
-    event.severity === 'error'
-      ? 'text-[var(--color-error)]'
-      : event.severity === 'warn'
-        ? 'text-[var(--color-warning)]'
-        : 'text-[var(--color-text-tertiary)]'
+  const tone = SEVERITY_TONE[event.severity] ?? 'neutral'
   const detailsText = formatDetails(event.details)
 
   return (
-    <div className="px-4 py-3 grid grid-cols-1 md:grid-cols-[120px_92px_1fr] gap-3 items-start">
-      <div className="text-xs text-[var(--color-text-tertiary)] font-mono">
-        {new Date(event.timestamp).toLocaleString()}
-      </div>
-      <div className={`text-xs font-semibold uppercase ${severityClass}`}>{event.severity}</div>
-      <div className="min-w-0">
-        <div className="flex items-center gap-2 min-w-0">
-          <span className="text-sm font-medium text-[var(--color-text-primary)] truncate">{event.type}</span>
-          {event.sessionId && (
-            <span className="text-[11px] text-[var(--color-text-tertiary)] font-mono truncate">{event.sessionId}</span>
-          )}
+    <div data-testid="diagnostic-event" className="flex items-start gap-3 px-4 py-3">
+      <StatusDot tone={tone} size="md" className="mt-[7px]" />
+      <div className="min-w-0 flex-1">
+        <div className="flex min-w-0 items-center gap-2">
+          <span className="truncate text-[13px] font-medium text-[var(--color-text-primary)]">{event.type}</span>
+          <Badge tone={tone} size="xs">{event.severity}</Badge>
+          <span className="ml-auto shrink-0 font-mono text-[11px] tabular-nums text-[var(--color-text-tertiary)]">
+            {new Date(event.timestamp).toLocaleString()}
+          </span>
+        </div>
+        {event.sessionId && (
+          <div className="mt-0.5 truncate font-mono text-[11px] text-[var(--color-text-tertiary)]">{event.sessionId}</div>
+        )}
+        <div className="mt-1 break-words text-xs leading-[1.5] text-[var(--color-text-secondary)]">{event.summary}</div>
+        <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1">
+          <Button
+            variant="ghost"
+            size="xs"
+            className="-ml-1.5 max-w-full"
+            aria-label={`${copyEventIdLabel}: ${event.id}`}
+            onClick={async () => {
+              const copied = await copyTextToClipboard(event.id)
+              addToast({ type: copied ? 'success' : 'error', message: copied ? eventIdCopiedLabel : eventIdCopyFailedLabel })
+            }}
+            icon={<Copy size={12} strokeWidth={2} aria-hidden="true" />}
+            iconPosition="end"
+          >
+            <span>{eventIdLabel}:</span>
+            <span className="truncate font-mono">{event.id}</span>
+          </Button>
         </div>
-        <div className="text-xs text-[var(--color-text-secondary)] mt-1 break-words">{event.summary}</div>
-        <Button
-          variant="ghost"
-          size="xs"
-          className="mt-1 max-w-full"
-          aria-label={`${copyEventIdLabel}: ${event.id}`}
-          onClick={async () => {
-            const copied = await copyTextToClipboard(event.id)
-            addToast({ type: copied ? 'success' : 'error', message: copied ? eventIdCopiedLabel : eventIdCopyFailedLabel })
-          }}
-          icon={<span className="material-symbols-outlined text-[13px]" aria-hidden="true">content_copy</span>}
-          iconPosition="end"
-        >
-          <span>{eventIdLabel}:</span>
-          <span className="font-mono truncate">{event.id}</span>
-        </Button>
         {detailsText && (
-          <details className="mt-2">
-            <summary className="cursor-pointer text-xs text-[var(--color-text-tertiary)] select-none">
+          <details className="group mt-1">
+            <summary className="inline-flex cursor-pointer select-none list-none items-center gap-1 text-xs text-[var(--color-text-tertiary)] hover:text-[var(--color-text-secondary)] [&::-webkit-details-marker]:hidden">
+              <ChevronRight size={12} strokeWidth={2} className="transition-transform group-open:rotate-90" aria-hidden="true" />
               {detailsLabel}
             </summary>
-            <pre className="mt-2 max-h-64 overflow-auto whitespace-pre-wrap break-words rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface-container)] p-2 text-[11px] leading-relaxed text-[var(--color-text-secondary)]">
+            <pre className="mt-1.5 max-h-64 overflow-auto whitespace-pre-wrap break-words rounded-[var(--radius-md)] bg-[var(--color-surface-container)] p-3 font-mono text-[11px] leading-[1.6] text-[var(--color-text-secondary)]">
               {detailsText}
             </pre>
           </details>
diff --git a/desktop/src/pages/EmptySession.test.tsx b/desktop/src/pages/EmptySession.test.tsx
index f4ae7845..b893bf33 100644
--- a/desktop/src/pages/EmptySession.test.tsx
+++ b/desktop/src/pages/EmptySession.test.tsx
@@ -356,6 +356,27 @@ describe('EmptySession', () => {
     useWorkflowStore.setState(initialWorkflowState, true)
   })
 
+  it('drops a starter into the draft and keeps what was already typed', async () => {
+    render(<EmptySession />)
+
+    const starters = screen.getByRole('group', { name: 'Suggestions' })
+    fireEvent.click(within(starters).getByRole('button', { name: 'Fix the failing tests' }))
+    await waitFor(() => expect(getComposerText()).toBe('Fix the failing tests'))
+
+    // A second pick appends on a new line rather than replacing the draft.
+    fireEvent.click(within(starters).getByRole('button', { name: 'Build a new feature' }))
+    await waitFor(() => expect(getComposerText()).toBe('Fix the failing tests\nBuild a new feature'))
+  })
+
+  it('keeps the starter row off the phone layout, where the composer docks to the bottom', () => {
+    mocks.isMobile = true
+
+    render(<EmptySession />)
+
+    expect(screen.queryByTestId('new-session-starter')).not.toBeInTheDocument()
+    expect(screen.getByTestId('empty-session-composer-shell')).toHaveClass('absolute', 'bottom-0')
+  })
+
   it('uses compact composer controls on phone-sized H5 browsers', async () => {
     mocks.isMobile = true
 
@@ -367,7 +388,7 @@ describe('EmptySession', () => {
     expect(screen.getByTestId('model-selector')).toHaveAttribute('data-compact', 'true')
     expect(screen.getByRole('button', { name: 'Run' })).toHaveClass('h-11', 'w-11')
     expect(screen.getByTestId('empty-session-composer-shell')).toHaveClass('px-3')
-    expect(screen.getByTestId('empty-session-composer-panel')).toHaveClass('rounded-[var(--radius-2xl)]')
+    expect(screen.getByTestId('empty-session-composer-panel')).toHaveClass('rounded-[var(--radius-xl)]')
   })
 
   it.each(['@', '/', '/empty', '+'] as const)('hides withdrawn bundled capabilities in %s while keeping personal skills and other plugins', async (entry) => {
@@ -753,17 +774,17 @@ describe('EmptySession', () => {
     render(<EmptySession />)
 
     const panel = screen.getByTestId('empty-session-composer-panel')
-    // 20px corner and the middle shadow step — the composer's own place on the
-    // handoff's scale. The repository controls live inside this panel, so it
+    // 16px corner and the composer shadow step — the same floating card as
+    // ChatInput's. The repository controls live inside this panel, so it
     // must stay a single rounded block rather than a split top/bottom pair.
-    expect(panel).toHaveClass('rounded-[var(--radius-2xl)]', 'p-0', 'glass-panel--composer')
+    expect(panel).toHaveClass('rounded-[var(--radius-xl)]', 'p-2', 'glass-panel--composer')
     expect(panel).not.toHaveClass('rounded-b-none')
 
     await pickProject()
 
     const pill = await screen.findByRole('button', { name: 'Location: project / main' })
     expect(panel).toContainElement(pill)
-    expect(pill).toHaveClass('h-9')
+    expect(pill).toHaveClass('h-7')
 
     // Same toolbar row as Run — that row is the whole point of the change.
     const toolbarRow = pill.closest('.justify-between')
diff --git a/desktop/src/pages/EmptySession.tsx b/desktop/src/pages/EmptySession.tsx
index b0d96062..bde3fee6 100644
--- a/desktop/src/pages/EmptySession.tsx
+++ b/desktop/src/pages/EmptySession.tsx
@@ -1,9 +1,12 @@
 import { isComposerReferenceVisible, isComposerSlashCommandVisible } from '@/lib/composerCapabilityVisibility'
 import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react'
 import { useDismissable } from '@/hooks/useDismissable'
+import { ArrowUp, Plus } from 'lucide-react'
 import { BrandSeal } from '@/components/composite/BrandSeal'
+import { NewSessionStarter } from '@/components/layout/NewSessionStarter'
+import { projectTitle } from '@/components/layout/sidebarTaskGroups'
+import { resolveProjectDisplayName } from '../stores/projectDisplayNameStore'
 import { Button } from '@/components/ui/Button'
-import { IconButton } from '@/components/ui/IconButton'
 import { ApiError } from '../api/client'
 import { agentsApi } from '../api/agents'
 import { providersApi } from '../api/providers'
@@ -732,49 +735,61 @@ export function EmptySession() {
     },
   })
 
+  const heroProject = workDir ? (resolveProjectDisplayName(workDir) ?? projectTitle(workDir)) : null
+  // Same merge as the "+" menu's prompt seeds: a draft already typed is kept.
+  const insertSuggestion = (text: string) => {
+    const next = input.trim() ? `${input}\n${text}` : text
+    setInput(next)
+    requestAnimationFrame(() => {
+      composerRef.current?.focus()
+      composerRef.current?.setSelectionOffsets(next.length)
+    })
+  }
+
   return (
+    // The new-session page (「素」, su-12). On desktop the composer sits in the
+    // flow between the hero (bottom-aligned) and the starter row (top-aligned),
+    // which puts it just above the middle of the page. On a phone it stays
+    // docked to the bottom edge, above the keyboard.
     <div className="relative flex flex-1 flex-col overflow-hidden bg-[var(--color-surface)]">
-      <div className={`brand-seal-glow flex flex-1 flex-col items-center justify-center ${
-        isMobileComposer ? 'px-6 pb-[230px] pt-10' : 'p-8 pb-32'
+      <div className={`flex flex-col items-center text-center ${
+        isMobileComposer
+          ? 'flex-1 justify-center px-6 pb-[230px] pt-10'
+          : 'min-h-0 flex-1 justify-end overflow-hidden px-8 pb-7 pt-8'
       }`}>
-        <div className={`flex flex-col items-center text-center ${
-          isMobileComposer ? 'max-w-[300px] gap-3' : 'max-w-[420px] gap-[13px]'
-        }`}>
-          <BrandSeal size={isMobileComposer ? 'lg' : 'xl'} />
+        <div className={`flex flex-col items-center gap-2.5 ${isMobileComposer ? 'max-w-[300px]' : 'max-w-[600px]'}`}>
+          <BrandSeal size={isMobileComposer ? 'md' : 'lg'} />
           <h1
-            className={`font-bold tracking-tight text-[var(--color-text-primary)] ${
-              isMobileComposer ? 'text-2xl' : 'text-[27px]'
+            className={`mt-2 font-semibold leading-[1.3] tracking-tight text-[var(--color-text-primary)] ${
+              isMobileComposer ? 'text-[22px]' : 'text-[26px]'
             }`}
-            style={{ fontFamily: 'var(--font-headline)' }}
           >
-            {t('empty.title')}
+            {heroProject
+              ? t('empty.heroTitle', { project: heroProject })
+              : t('empty.heroTitleNoProject')}
           </h1>
-          <p
-            className={`mx-auto -mt-1 text-[var(--color-text-secondary)] ${
-              isMobileComposer ? 'max-w-[280px] text-sm leading-6' : 'text-[15px] leading-[1.7]'
-            }`}
-            style={{ fontFamily: 'var(--font-body)' }}
-          >
-            {t('empty.subtitle')}
+          <p className="text-[14px] leading-6 text-[var(--color-text-tertiary)]">
+            {t('empty.heroSubtitle')}
           </p>
         </div>
       </div>
 
       <div
         data-testid="empty-session-composer-shell"
-        className={`absolute left-0 right-0 z-[var(--z-nav)] flex justify-center ${
+        className={`flex justify-center ${
         isMobileComposer
-          ? 'bottom-0 px-3 pb-[calc(env(safe-area-inset-bottom)+10px)]'
-          : 'bottom-4 px-8'
+          ? 'absolute bottom-0 left-0 right-0 z-[var(--z-nav)] px-3 pb-[calc(env(safe-area-inset-bottom)+10px)]'
+          : 'relative z-[var(--z-raised)] shrink-0 px-8'
       }`}
       >
         <div className={`flex w-full flex-col ${isMobileComposer ? 'max-w-none' : 'max-w-3xl'}`}>
           <div
             ref={panelRef}
             data-testid="empty-session-composer-panel"
-            className={`glass-panel glass-panel--composer relative flex flex-col gap-3 overflow-visible rounded-[var(--radius-2xl)] ${
-              isMobileComposer ? 'p-3' : 'p-0'
-            } ${isDragActive ? 'composer-drop-target-active' : ''}`}
+            // Kept identical to ChatInput's floating card: `--radius-xl`, the
+            // composer shadow step from `glass-panel--composer`, and an 8px
+            // inset that the editor and toolbar pad themselves within.
+            className={`glass-panel glass-panel--composer relative flex flex-col overflow-visible rounded-[var(--radius-xl)] p-2 ${isDragActive ? 'composer-drop-target-active' : ''}`}
             {...dragHandlers}
           >
             {isDragActive && (
@@ -785,7 +800,7 @@ export function EmptySession() {
               />
             )}
 
-            <div className={isMobileComposer ? 'contents' : 'flex flex-col gap-3 p-4'}>
+            <div className="contents">
               {fileSearchOpen && (
                 <ComposerReferenceMenu
                   ref={fileSearchRef}
@@ -854,10 +869,12 @@ export function EmptySession() {
               )}
 
               {attachments.length > 0 && (
-                <AttachmentGallery attachments={attachments} variant="composer" onRemove={removeAttachment} />
+                <div className="px-2 pt-2">
+                  <AttachmentGallery attachments={attachments} variant="composer" onRemove={removeAttachment} />
+                </div>
               )}
 
-              <div className="flex items-start gap-3">
+              <div className="flex items-start">
                 <MentionComposer
                   ref={composerRef}
                   rootRef={composerContainerRef}
@@ -873,8 +890,8 @@ export function EmptySession() {
                   // `min-w-0`: see ChatInput — an unbreakable long run (URL,
                   // hash) otherwise grows this flex item past the panel.
                   className="flex-1 min-w-0"
-                  editorClassName={`overflow-y-auto leading-relaxed text-[var(--color-text-primary)] ${
-                    isMobileComposer ? 'max-h-[132px] min-h-[72px] py-1.5 text-base' : 'max-h-[200px] py-2'
+                  editorClassName={`chat-reading-text min-h-[72px] overflow-y-auto px-2.5 pb-1 pt-2 text-[var(--color-text-primary)] ${
+                    isMobileComposer ? 'max-h-[132px]' : 'max-h-[200px]'
                   }`}
                   aria={{
                     role: isSlashMenuVisible || fileSearchOpen ? 'combobox' : 'textbox',
@@ -888,22 +905,27 @@ export function EmptySession() {
                 />
               </div>
 
-              <div className={`border-t border-[var(--color-border-separator)] pt-3 ${
-                isMobileComposer ? 'flex flex-wrap items-center gap-2' : 'flex items-center justify-between'
+              {/* No divider: the editor's bottom inset and this row's top inset
+                  separate the two, exactly as in ChatInput. */}
+              <div className={`flex min-w-0 items-center justify-between pt-1.5 ${
+                isMobileComposer ? 'flex-wrap gap-1' : 'gap-2'
               }`}>
-                <div className="flex min-w-0 shrink items-center gap-2">
+                <div className="flex min-w-0 shrink items-center gap-1">
                   <div ref={plusMenuRef} className="relative shrink-0">
-                    <IconButton
-                      icon="add"
-                      label={t('chat.composerTools')}
-                      showTooltip={false}
-                      tone="secondary"
-                      size={isMobileComposer ? 'xl' : 'md'}
-                      className={isMobileComposer ? 'h-11 w-11' : undefined}
+                    {/* Hand-rolled like ChatInput's: a quiet 28px square on
+                        desktop, the 44px touch minimum on a phone. */}
+                    <button
+                      type="button"
+                      onClick={() => setPlusMenuOpen((prev) => !prev)}
+                      aria-label={t('chat.composerTools')}
                       aria-haspopup="menu"
                       aria-expanded={plusMenuOpen}
-                      onClick={() => setPlusMenuOpen((prev) => !prev)}
-                    />
+                      className={`inline-flex items-center justify-center rounded-[var(--radius-sm)] text-[var(--color-text-tertiary)] transition-colors hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] ${
+                        plusMenuOpen ? 'bg-[var(--color-surface-hover)] text-[var(--color-text-primary)]' : ''
+                      } ${isMobileComposer ? 'h-11 w-11' : 'h-7 w-7'}`}
+                    >
+                      <Plus size={isMobileComposer ? 18 : 16} strokeWidth={1.75} aria-hidden="true" />
+                    </button>
 
                     {plusMenuOpen && (
                       <ComposerCapabilityMenu
@@ -951,7 +973,7 @@ export function EmptySession() {
                   )}
                 </div>
 
-                <div className={`${isMobileComposer ? 'flex min-w-0 flex-1 items-center justify-end gap-2' : 'flex shrink-0 items-center gap-3'}`}>
+                <div className={`${isMobileComposer ? 'flex min-w-0 flex-1 items-center justify-end gap-1' : 'flex shrink-0 items-center gap-1'}`}>
                   <ContextUsageIndicator
                     chatState="idle"
                     messageCount={0}
@@ -966,7 +988,7 @@ export function EmptySession() {
                       component, shape, size and icon. See the note there for
                       why the label went away. */}
                   <Button
-                    variant="primary"
+                    variant="accent"
                     size="base"
                     shape="circle"
                     onClick={handleSubmit}
@@ -974,7 +996,7 @@ export function EmptySession() {
                     aria-label={t('common.run')}
                     title={t('common.run')}
                     className={`shrink-0 ${isMobileComposer ? 'h-11 w-11' : ''}`}
-                    icon={<span className="material-symbols-outlined text-[18px]">arrow_upward</span>}
+                    icon={<ArrowUp data-icon="send" size={isMobileComposer ? 18 : 16} strokeWidth={2} aria-hidden="true" />}
                   />
                 </div>
               </div>
@@ -997,6 +1019,16 @@ export function EmptySession() {
         </div>
       </div>
 
+      {!isMobileComposer && (
+        <div className="flex min-h-0 flex-[1.3] flex-col items-center overflow-y-auto px-8 pb-8 pt-4">
+          <NewSessionStarter
+            projectPath={workDir || null}
+            projectLabel={heroProject}
+            onSuggestion={insertSuggestion}
+          />
+        </div>
+      )}
+
       <ComposerReferenceDetail mention={referenceDetail} onClose={() => setReferenceDetail(null)} />
       <input ref={fileInputRef} type="file" multiple className="hidden" onChange={handleFileSelect} />
     </div>
diff --git a/desktop/src/pages/ExtensionMarket.tsx b/desktop/src/pages/ExtensionMarket.tsx
index 8f3db3ea..7f10f70d 100644
--- a/desktop/src/pages/ExtensionMarket.tsx
+++ b/desktop/src/pages/ExtensionMarket.tsx
@@ -1,8 +1,10 @@
 import { useState } from 'react'
 import { ArrowLeft, PackageCheck } from 'lucide-react'
 import { useTranslation } from '@/i18n'
+import { cx } from '@/lib/cx'
 import { Button } from '@/components/ui/Button'
 import { SegmentedControl } from '@/components/ui/SegmentedControl'
+import { EXTENSION_PAGE_COLUMN } from '@/components/market/pageLayout'
 import { Connectors } from '@/pages/Connectors'
 import { Market } from '@/pages/Market'
 import { InstalledSkills } from '@/pages/InstalledSkills'
@@ -12,14 +14,24 @@ export function ExtensionMarket() {
   const [section, setSection] = useState<'plugins' | 'skills'>('plugins')
   const [managing, setManaging] = useState(false)
   const myLabel = t(section === 'plugins' ? 'extensions.myPlugins' : 'extensions.mySkills')
+  const description = section === 'plugins'
+    ? t('extensions.pluginsSubtitle')
+    : t(managing ? 'settings.skills.description' : 'market.subtitle')
   return <section className="flex h-full min-h-0 flex-col bg-[var(--color-surface)]">
-    <header className="flex flex-wrap items-center gap-x-6 gap-y-2 border-b border-[var(--color-border)] px-6 py-3">
-      <h1 className="text-lg font-semibold text-[var(--color-text-primary)]">{managing ? myLabel : t('sidebar.extensions')}</h1>
-      <SegmentedControl label={t('extensions.sections')} appearance="underline" value={section} onChange={setSection} items={[{ value: 'plugins', label: t('extensions.plugins') }, { value: 'skills', label: t('extensions.skills') }]} />
-      <div className="ml-auto">
-        <Button size="base" variant="secondary" icon={managing ? <ArrowLeft size={15} aria-hidden="true" /> : <PackageCheck size={15} aria-hidden="true" />} onClick={() => setManaging(value => !value)}>
-          {managing ? t('extensions.browse') : myLabel}
-        </Button>
+    {/* The only page head on this surface: the market and the installed lists
+        below render straight into the column, without a title of their own. */}
+    <header className="shrink-0 border-b border-[var(--color-border)]">
+      <div className={cx(EXTENSION_PAGE_COLUMN, 'flex flex-wrap items-end gap-x-6 gap-y-3 pb-4 pt-7')}>
+        <div className="min-w-0 flex-1">
+          <h1 className="text-[22px] font-semibold leading-[30px] text-[var(--color-text-primary)]">{managing ? myLabel : t('sidebar.extensions')}</h1>
+          <p className="mt-1.5 text-[13px] leading-5 text-[var(--color-text-tertiary)]">{description}</p>
+        </div>
+        <div className="flex shrink-0 items-center gap-2">
+          <SegmentedControl label={t('extensions.sections')} value={section} onChange={setSection} items={[{ value: 'plugins', label: t('extensions.plugins') }, { value: 'skills', label: t('extensions.skills') }]} />
+          <Button size="base" variant="secondary" icon={managing ? <ArrowLeft size={14} strokeWidth={1.75} aria-hidden="true" /> : <PackageCheck size={14} strokeWidth={1.75} aria-hidden="true" />} onClick={() => setManaging(value => !value)}>
+            {managing ? t('extensions.browse') : myLabel}
+          </Button>
+        </div>
       </div>
     </header>
     <div className="flex min-h-0 flex-1 flex-col">
@@ -27,7 +39,7 @@ export function ExtensionMarket() {
           file and installer stay in src/services/connectors, so restoring the
           previous featured row is a change to the skills branch below. */}
       {managing
-        ? section === 'plugins' ? <Connectors key="installed" management /> : <div className="h-full overflow-y-auto"><div className="mx-auto max-w-7xl px-5 py-6 lg:px-8"><InstalledSkills /></div></div>
+        ? section === 'plugins' ? <Connectors key="installed" management /> : <InstalledSkills />
         : section === 'plugins' ? <Connectors key="catalog" mode="plugins" /> : <Market />}
     </div>
   </section>
diff --git a/desktop/src/pages/InstalledSkills.tsx b/desktop/src/pages/InstalledSkills.tsx
index 0452a5ba..5f9435aa 100644
--- a/desktop/src/pages/InstalledSkills.tsx
+++ b/desktop/src/pages/InstalledSkills.tsx
@@ -1,4 +1,6 @@
 import { useEffect } from 'react'
+import { cx } from '@/lib/cx'
+import { EXTENSION_PAGE_COLUMN } from '@/components/market/pageLayout'
 import { SkillList } from '@/components/skills/SkillList'
 import { SkillDetail } from '@/components/skills/SkillDetail'
 import { useSkillStore } from '@/stores/skillStore'
@@ -22,5 +24,9 @@ export function InstalledSkills() {
   }, [clearSelection, currentWorkDir])
 
   const showingDetail = selectedSkillContext === currentWorkDir && (selectedSkill || isDetailLoading)
-  return showingDetail ? <SkillDetail embedded /> : <SkillList compact />
+  // The detail page scrolls and pads itself; the list borrows the extensions
+  // page column so its search box starts on the page head's edge.
+  return showingDetail
+    ? <SkillDetail embedded />
+    : <div className="min-h-0 flex-1 overflow-y-auto"><div className={cx(EXTENSION_PAGE_COLUMN, 'pb-10 pt-5')}><SkillList compact /></div></div>
 }
diff --git a/desktop/src/pages/McpSettings.tsx b/desktop/src/pages/McpSettings.tsx
index da7cefe7..09e2d361 100644
--- a/desktop/src/pages/McpSettings.tsx
+++ b/desktop/src/pages/McpSettings.tsx
@@ -1,6 +1,8 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
+import { ArrowLeft, Plus, RefreshCw, Server, Settings, Trash2 } from 'lucide-react'
 import { Button } from '@/components/ui/Button'
-import { Badge } from '@/components/ui/Badge'
+import { Badge, StatusDot, type Tone } from '@/components/ui/Badge'
+import { SegmentedControl } from '@/components/ui/SegmentedControl'
 import { Switch } from '@/components/ui/Switch'
 import { LoadingState } from '@/components/ui/LoadingState'
 import { EmptyState } from '@/components/ui/EmptyState'
@@ -9,9 +11,17 @@ import { IconButton } from '@/components/ui/IconButton'
 import { mcpStatusTone } from '@/lib/mcpStatus'
 import { getMcpServerIdentityKey } from '@/lib/mcpIdentity'
 import { DirectoryPicker } from '@/components/composite/DirectoryPicker'
-import { SettingsPageHeader } from '@/components/settings/SettingsSection'
+import {
+  SettingsBlock,
+  SettingsGroup,
+  SettingsPageHeader,
+  SettingsRow,
+  SettingsSection,
+  SettingsStat,
+} from '@/components/settings/SettingsSection'
 import { Input } from '@/components/ui/Input'
 import { ConfirmDialog } from '@/components/ui/ConfirmDialog'
+import { cx } from '@/lib/cx'
 import { useTranslation } from '../i18n'
 import { useUIStore } from '../stores/uiStore'
 import { useMcpStore } from '../stores/mcpStore'
@@ -74,6 +84,11 @@ const MCP_GROUP_ORDER: McpGroupKey[] = [
 ]
 
 const WRITABLE_SCOPES: McpWritableScope[] = ['local', 'project', 'user']
+const TRANSPORTS: TransportKind[] = ['stdio', 'http', 'sse']
+
+/** The settings frame (`pages/Settings.tsx`) owns width and gutters; a pane never sets its own. */
+const PAGE_CLASS = 'w-full min-w-0'
+const ICON_PROPS = { size: 14, strokeWidth: 1.75, 'aria-hidden': true } as const
 
 const SENSITIVE_MCP_FIELD = /(?:api[_-]?key|auth[_-]?token|authorization|bearer|token|secret|password|credential)/i
 const SENSITIVE_CLI_FLAG = /^--(?:api-key|api_key|auth-token|auth_token|authorization|bearer|token|secret|password|credential)$/i
@@ -312,15 +327,56 @@ function statusLabel(server: McpServerRecord, t: ReturnType<typeof useTranslatio
     : t('settings.mcp.status.configured')
 }
 
+function statusTone(server: McpServerRecord): Tone {
+  return isActiveInCurrentContext(server) ? mcpStatusTone(server.status) : 'neutral'
+}
+
+/** The dot leading a server row. A check in flight is "in progress", which reads as info. */
+function statusDotTone(server: McpServerRecord): Tone {
+  if (isActiveInCurrentContext(server) && server.status === 'checking') return 'info'
+  return statusTone(server)
+}
+
 function StatusBadge({ server, t }: { server: McpServerRecord; t: ReturnType<typeof useTranslation> }) {
-  const activeInCurrentContext = isActiveInCurrentContext(server)
   return (
-    <Badge tone={activeInCurrentContext ? mcpStatusTone(server.status) : 'neutral'} size="md" bordered className="font-semibold">
+    <Badge tone={statusTone(server)} size="xs">
       {statusLabel(server, t)}
     </Badge>
   )
 }
 
+/** Badge plus the one-line reason, shown under a sub-view's title. */
+function StatusLine({ server, t }: { server: McpServerRecord; t: ReturnType<typeof useTranslation> }) {
+  const active = isActiveInCurrentContext(server)
+  return (
+    <span className="mt-2.5 flex flex-wrap items-center gap-2">
+      <StatusBadge server={server} t={t} />
+      {active && server.statusDetail && (
+        <span className="text-xs text-[var(--color-text-tertiary)]">{server.statusDetail}</span>
+      )}
+      {!active && (
+        <span className="text-xs text-[var(--color-text-tertiary)]">
+          {t('settings.mcp.status.configuredElsewhere')}
+        </span>
+      )}
+    </span>
+  )
+}
+
+function BackButton({ label, onClick }: { label: string; onClick: () => void }) {
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      className="-ml-2 mb-3"
+      onClick={onClick}
+      icon={<ArrowLeft {...ICON_PROPS} />}
+    >
+      {label}
+    </Button>
+  )
+}
+
 function ArraySection({
   title,
   rows,
@@ -345,58 +401,50 @@ function ArraySection({
   displayValue?: (row: KeyValueRow | StringRow, index: number) => string
 }) {
   return (
-    <section className="rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface)] p-5">
-      <div className="text-sm font-semibold text-[var(--color-text-primary)] mb-4">{title}</div>
-      <div className="space-y-3">
-        {rows.map((row, index) => (
-          <div key={row.id} className={`grid gap-3 ${singleValue ? 'grid-cols-[minmax(0,1fr)_32px]' : 'grid-cols-[minmax(0,1fr)_minmax(0,1fr)_32px]'}`}>
-            {!singleValue && 'key' in row && (
-              <Input
-                value={row.key}
-                onChange={(event) => onChange(row.id, 'key', event.target.value)}
-                placeholder={keyPlaceholder}
-              />
-            )}
-            <Input
-              value={displayValue ? displayValue(row, index) : row.value}
-              onChange={(event) => onChange(row.id, 'value', event.target.value)}
-              placeholder={valuePlaceholder}
-            />
-            <IconButton
-              icon="delete"
-              label={addLabel}
-              showTooltip={false}
-              size="md"
-              tone="muted"
-              className="mt-1 h-10"
-              onClick={() => onRemove(row.id)}
-            />
+    <SettingsSection title={title}>
+      <SettingsGroup>
+        <SettingsBlock className="py-3.5">
+          <div className="space-y-2">
+            {rows.map((row, index) => (
+              <div key={row.id} className={`grid gap-2 ${singleValue ? 'grid-cols-[minmax(0,1fr)_32px]' : 'grid-cols-[minmax(0,1fr)_minmax(0,1fr)_32px]'}`}>
+                {!singleValue && 'key' in row && (
+                  <Input
+                    size="md"
+                    value={row.key}
+                    onChange={(event) => onChange(row.id, 'key', event.target.value)}
+                    placeholder={keyPlaceholder}
+                  />
+                )}
+                <Input
+                  size="md"
+                  value={displayValue ? displayValue(row, index) : row.value}
+                  onChange={(event) => onChange(row.id, 'value', event.target.value)}
+                  placeholder={valuePlaceholder}
+                />
+                <IconButton
+                  icon={<Trash2 {...ICON_PROPS} />}
+                  label={addLabel}
+                  showTooltip={false}
+                  size="md"
+                  tone="muted"
+                  hoverTone="danger"
+                  onClick={() => onRemove(row.id)}
+                />
+              </div>
+            ))}
           </div>
-        ))}
-        <Button
-          variant="secondary"
-          size="lg"
-          block
-          className="h-12"
-          onClick={onAdd}
-          icon={<span className="material-symbols-outlined text-[18px]">add</span>}
-        >
-          {addLabel}
-        </Button>
-      </div>
-    </section>
-  )
-}
-
-function StatCard({ label, value, icon }: { label: string; value: number; icon: string }) {
-  return (
-    <div className="rounded-[var(--radius-2xl)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)] px-5 py-4">
-      <div className="flex items-center gap-2 text-[var(--color-text-tertiary)] mb-2">
-        <span className="material-symbols-outlined text-[18px]">{icon}</span>
-        <span className="text-xs uppercase tracking-[0.18em] font-semibold">{label}</span>
-      </div>
-      <div className="text-3xl font-semibold text-[var(--color-text-primary)]">{value}</div>
-    </div>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="-ml-1.5 mt-2"
+            onClick={onAdd}
+            icon={<Plus {...ICON_PROPS} />}
+          >
+            {addLabel}
+          </Button>
+        </SettingsBlock>
+      </SettingsGroup>
+    </SettingsSection>
   )
 }
 
@@ -413,57 +461,70 @@ function ServerRow({
   onToggle: () => void
   t: ReturnType<typeof useTranslation>
 }) {
+  const active = isActiveInCurrentContext(server)
   return (
-    <div className="grid grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-4 px-6 py-5 border-t border-[var(--color-border)] first:border-t-0">
-      <div className="min-w-0">
-        <div className="flex items-center gap-3 mb-2 min-w-0">
-          <div className="text-[1.05rem] font-semibold text-[var(--color-text-primary)] truncate">{server.name}</div>
+    <div className="flex items-start gap-3 px-4 py-3.5">
+      <StatusDot
+        tone={statusDotTone(server)}
+        size="md"
+        pulse={active && server.status === 'checking'}
+        className="mt-[7px]"
+      />
+      <div className="min-w-0 flex-1">
+        <div className="flex min-w-0 items-center gap-2">
+          <span className="truncate text-sm font-semibold text-[var(--color-text-primary)]">{server.name}</span>
           <StatusBadge server={server} t={t} />
         </div>
-        <div className="flex flex-wrap items-center gap-2 text-xs text-[var(--color-text-tertiary)]">
-          <span className="rounded-full bg-[var(--color-surface-hover)] px-2 py-1 font-medium text-[var(--color-text-secondary)]">
-            {transportLabel(server.transport, t)}
-          </span>
-          <span className="rounded-full bg-[var(--color-surface-hover)] px-2 py-1 font-medium text-[var(--color-text-secondary)]">
-            {scopeLabel(server, t)}
-          </span>
+        <div className="mt-0.5 flex min-w-0 items-center gap-1.5 text-xs text-[var(--color-text-tertiary)]">
+          <span className="shrink-0">{transportLabel(server.transport, t)}</span>
+          <span aria-hidden="true" className="shrink-0">·</span>
+          <span className="shrink-0">{scopeLabel(server, t)}</span>
           {serverHasProjectContext(server) && (
-            <span
-              className="max-w-full truncate rounded-full bg-[var(--color-surface-hover)] px-2 py-1 font-mono text-[11px] text-[var(--color-text-tertiary)]"
-              title={server.projectPath}
-            >
-              {server.projectPath}
-            </span>
+            <>
+              <span aria-hidden="true" className="shrink-0">·</span>
+              <span className="min-w-0 truncate font-mono text-[11px]" title={server.projectPath}>
+                {server.projectPath}
+              </span>
+            </>
           )}
-          <span className="truncate">{redactSensitiveText(server.summary)}</span>
         </div>
-        {!isActiveInCurrentContext(server) && (
-          <div className="mt-2 text-xs text-[var(--color-text-tertiary)]">
+        <div className="mt-1 truncate font-mono text-[11px] text-[var(--color-text-tertiary)]">
+          {redactSensitiveText(server.summary)}
+        </div>
+        {!active && (
+          <div className="mt-1.5 text-xs leading-[1.5] text-[var(--color-text-tertiary)]">
             {t('settings.mcp.status.configuredElsewhere')}
           </div>
         )}
-        {isActiveInCurrentContext(server) && server.statusDetail && (
-          <div className="mt-2 text-xs text-[var(--color-text-tertiary)] truncate">{server.statusDetail}</div>
+        {active && server.statusDetail && (
+          <div
+            className={cx(
+              'mt-1.5 truncate text-xs',
+              server.status === 'failed' ? 'text-[var(--color-error)]' : 'text-[var(--color-text-tertiary)]',
+            )}
+          >
+            {server.statusDetail}
+          </div>
         )}
       </div>
 
-      <IconButton
-        icon="settings"
-        label={t('settings.mcp.openServer', { name: server.name })}
-        showTooltip={false}
-        size="xl"
-        shape="circle"
-        tone="secondary"
-        onClick={onOpen}
-      />
-
-      <Switch
-        label={server.name}
-        labelHidden
-        checked={server.enabled}
-        disabled={isBusy || !server.canToggle}
-        onChange={onToggle}
-      />
+      <div className="flex shrink-0 items-center gap-2 self-center">
+        <IconButton
+          icon={<Settings {...ICON_PROPS} />}
+          label={t('settings.mcp.openServer', { name: server.name })}
+          showTooltip={false}
+          size="sm"
+          tone="muted"
+          onClick={onOpen}
+        />
+        <Switch
+          label={server.name}
+          labelHidden
+          checked={server.enabled}
+          disabled={isBusy || !server.canToggle}
+          onChange={onToggle}
+        />
+      </div>
     </div>
   )
 }
@@ -786,58 +847,48 @@ export function McpSettings() {
     const server = view.server
     return (
       <>
-        <div className="max-w-5xl min-w-0">
-          <Button
-            variant="ghost"
-            size="md"
-            className="mb-5"
+        <div className={PAGE_CLASS}>
+          <BackButton
+            label={t('settings.mcp.form.back')}
             onClick={() => {
               setView({ type: 'list' })
               selectServer(null)
             }}
-            icon={<span className="material-symbols-outlined text-[18px]">arrow_back</span>}
-          >
-            {t('settings.mcp.form.back')}
-          </Button>
+          />
 
-          <div className="flex items-start justify-between gap-4 mb-8">
-            <div>
-              <h2 className="text-[32px] font-semibold leading-tight text-[var(--color-text-primary)]" style={{ fontFamily: 'var(--font-headline)' }}>{server.name}</h2>
-              <p className="mt-3 text-base text-[var(--color-text-secondary)]">{redactSensitiveText(server.summary)}</p>
-              <div className="mt-4 flex flex-wrap items-center gap-3">
-                <StatusBadge server={server} t={t} />
-                {isActiveInCurrentContext(server) && server.statusDetail && (
-                  <span className="text-sm text-[var(--color-text-tertiary)]">{server.statusDetail}</span>
-                )}
-                {!isActiveInCurrentContext(server) && (
-                  <span className="text-sm text-[var(--color-text-tertiary)]">
-                    {t('settings.mcp.status.configuredElsewhere')}
-                  </span>
-                )}
-              </div>
-            </div>
-            {server.canReconnect && (
-              <Button variant="secondary" onClick={() => handleReconnect(server)} loading={busyServerKey === getMcpServerIdentityKey(server)}>
-                <span className="material-symbols-outlined text-[16px]">sync</span>
+          <SettingsPageHeader
+            title={server.name}
+            description={(
+              <>
+                <span className="block break-all font-mono text-xs">{redactSensitiveText(server.summary)}</span>
+                <StatusLine server={server} t={t} />
+              </>
+            )}
+            action={server.canReconnect ? (
+              <Button
+                variant="secondary"
+                size="base"
+                onClick={() => handleReconnect(server)}
+                loading={busyServerKey === getMcpServerIdentityKey(server)}
+                icon={<RefreshCw {...ICON_PROPS} />}
+              >
                 {t('settings.mcp.form.reconnect')}
               </Button>
-            )}
-          </div>
+            ) : undefined}
+          />
 
-          <section className="rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface)] p-6">
-            <div className="grid gap-4 md:grid-cols-2">
-              <InfoPair label={t('settings.mcp.form.transport')} value={transportLabel(server.transport, t)} />
-              <InfoPair label={t('settings.mcp.form.scope')} value={scopeLabel(server, t)} />
-              <InfoPair label={t('settings.mcp.form.status')} value={statusLabel(server, t)} />
-              <InfoPair label={t('settings.mcp.form.location')} value={server.configLocation} />
-            </div>
-            <div className="mt-5">
-              <div className="text-sm font-semibold text-[var(--color-text-primary)] mb-2">{t('settings.mcp.form.rawConfig')}</div>
-              <pre className="overflow-x-auto rounded-[var(--radius-lg)] bg-[var(--color-surface-hover)] p-4 text-xs text-[var(--color-text-secondary)]">
-                {JSON.stringify(redactMcpDisplayValue(server.config), null, 2)}
-              </pre>
-            </div>
-          </section>
+          <SettingsGroup className="mt-6">
+            <InfoRow label={t('settings.mcp.form.transport')} value={transportLabel(server.transport, t)} />
+            <InfoRow label={t('settings.mcp.form.scope')} value={scopeLabel(server, t)} />
+            <InfoRow label={t('settings.mcp.form.status')} value={statusLabel(server, t)} />
+            <InfoRow label={t('settings.mcp.form.location')} value={server.configLocation} mono />
+          </SettingsGroup>
+
+          <SettingsSection title={t('settings.mcp.form.rawConfig')}>
+            <pre className="overflow-x-auto rounded-[var(--radius-md)] bg-[var(--color-surface-container)] p-3 font-mono text-xs leading-[1.6] text-[var(--color-text-secondary)]">
+              {JSON.stringify(redactMcpDisplayValue(server.config), null, 2)}
+            </pre>
+          </SettingsSection>
         </div>
         {deleteModal}
       </>
@@ -867,166 +918,144 @@ export function McpSettings() {
 
     return (
       <>
-        <div className="max-w-5xl min-w-0">
-          <Button
-            variant="ghost"
-            size="md"
-            className="mb-5"
+        <div className={PAGE_CLASS}>
+          <BackButton
+            label={t('settings.mcp.form.back')}
             onClick={() => {
               setView({ type: 'list' })
               selectServer(null)
             }}
-            icon={<span className="material-symbols-outlined text-[18px]">arrow_back</span>}
-          >
-            {t('settings.mcp.form.back')}
-          </Button>
+          />
 
-          <div className="flex items-start justify-between gap-4 mb-8">
-            <div>
-              <h2 className="text-[32px] font-semibold leading-tight text-[var(--color-text-primary)]" style={{ fontFamily: 'var(--font-headline)' }}>
-                {editing ? t('settings.mcp.form.editTitle', { name: targetServer!.name }) : t('settings.mcp.form.createTitle')}
-              </h2>
-              <p className="mt-3 text-base text-[var(--color-text-secondary)]">
+          <SettingsPageHeader
+            title={editing ? t('settings.mcp.form.editTitle', { name: targetServer!.name }) : t('settings.mcp.form.createTitle')}
+            description={(
+              <>
                 {editing ? t('settings.mcp.form.editHint') : t('settings.mcp.form.createHint')}
-              </p>
-              {editing && targetServer && (
-                <div className="mt-4 flex flex-wrap items-center gap-3">
-                  <StatusBadge server={targetServer} t={t} />
-                  {isActiveInCurrentContext(targetServer) && targetServer.statusDetail && (
-                    <span className="text-sm text-[var(--color-text-tertiary)]">{targetServer.statusDetail}</span>
-                  )}
-                  {!isActiveInCurrentContext(targetServer) && (
-                    <span className="text-sm text-[var(--color-text-tertiary)]">
-                      {t('settings.mcp.status.configuredElsewhere')}
-                    </span>
-                  )}
-                </div>
-              )}
-            </div>
-
-            <div className="flex items-center gap-3">
-              {editing && targetServer?.canReconnect && (
-                <Button variant="secondary" onClick={() => handleReconnect(targetServer)} loading={busyServerKey === getMcpServerIdentityKey(targetServer)}>
-                  <span className="material-symbols-outlined text-[16px]">sync</span>
-                  {t('settings.mcp.form.reconnect')}
-                </Button>
-              )}
-              {editing && targetServer?.canRemove && (
-                <Button
-                  variant="ghost"
-                  className="text-[var(--color-error)] hover:text-[var(--color-error)] hover:bg-[var(--color-error-soft)]"
-                  onClick={() => handleDelete(targetServer)}
-                  loading={isDeleting}
-                >
-                  <span className="material-symbols-outlined text-[16px]">delete</span>
-                  {t('settings.mcp.form.uninstall')}
-                </Button>
-              )}
-            </div>
-          </div>
-
-          <div className="space-y-4">
-          <section className="rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface)] p-5">
-            <Input
-              label={t('settings.mcp.form.name')}
-              value={draft.name}
-              onChange={(event) => setDraftField('name', event.target.value)}
-              placeholder={t('settings.mcp.form.namePlaceholder')}
-              disabled={editing}
-              required
-            />
-          </section>
-
-          <section className="rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface)] p-5">
-            <div className="text-sm font-semibold text-[var(--color-text-primary)] mb-2">
-              {t('settings.mcp.form.scope')}
-            </div>
-            <div className="grid gap-2 md:grid-cols-3">
-              {WRITABLE_SCOPES.map((scope) => {
-                const active = draft.scope === scope
-                return (
-                  <button
-                    key={scope}
-                    type="button"
-                    onClick={() => setDraftField('scope', scope)}
-                    className={`rounded-[var(--radius-md)] border p-3 text-left transition-colors ${
-                      active
-                        ? 'border-[var(--color-border-focus)] bg-[var(--color-surface-selected)] text-[var(--color-text-primary)]'
-                        : 'border-[var(--color-border)] bg-[var(--color-surface)] text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-hover)]'
-                    }`}
+                {editing && targetServer && <StatusLine server={targetServer} t={t} />}
+              </>
+            )}
+            action={editing && targetServer && (targetServer.canReconnect || targetServer.canRemove) ? (
+              <>
+                {targetServer.canReconnect && (
+                  <Button
+                    variant="secondary"
+                    size="base"
+                    onClick={() => handleReconnect(targetServer)}
+                    loading={busyServerKey === getMcpServerIdentityKey(targetServer)}
+                    icon={<RefreshCw {...ICON_PROPS} />}
                   >
-                    <span className="block text-sm font-semibold">{t(`settings.mcp.scope.${scope}`)}</span>
-                    <span className="mt-1 block text-xs leading-5 text-[var(--color-text-tertiary)]">
-                      {t(`settings.mcp.scopeDesc.${scope}`)}
-                    </span>
-                  </button>
-                )
-              })}
-            </div>
-          </section>
+                    {t('settings.mcp.form.reconnect')}
+                  </Button>
+                )}
+                {targetServer.canRemove && (
+                  <Button
+                    variant="danger-ghost"
+                    size="base"
+                    onClick={() => handleDelete(targetServer)}
+                    loading={isDeleting}
+                    icon={<Trash2 {...ICON_PROPS} />}
+                  >
+                    {t('settings.mcp.form.uninstall')}
+                  </Button>
+                )}
+              </>
+            ) : undefined}
+          />
 
-          <section className="rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface)] p-5">
-            <div className="mb-3 flex flex-wrap items-center justify-between gap-3">
-              <div>
-                <div className="text-sm font-semibold text-[var(--color-text-primary)]">
-                  {needsProjectTarget ? t('settings.mcp.targetProject.title') : t('settings.mcp.targetProject.globalTitle')}
-                </div>
-                <p className="mt-1 text-xs leading-5 text-[var(--color-text-tertiary)]">
-                  {targetProjectHint}
-                </p>
+          <SettingsGroup className="mt-6">
+            <SettingsBlock className="py-3.5">
+              <Input
+                size="md"
+                label={t('settings.mcp.form.name')}
+                value={draft.name}
+                onChange={(event) => setDraftField('name', event.target.value)}
+                placeholder={t('settings.mcp.form.namePlaceholder')}
+                disabled={editing}
+                required
+              />
+            </SettingsBlock>
+
+            <SettingsBlock className="py-3.5">
+              <div className="text-[13px] font-medium leading-5 text-[var(--color-text-primary)]">
+                {t('settings.mcp.form.scope')}
               </div>
+              <div className="mt-2 grid gap-2 md:grid-cols-3">
+                {WRITABLE_SCOPES.map((scope) => {
+                  const active = draft.scope === scope
+                  return (
+                    <button
+                      key={scope}
+                      type="button"
+                      aria-pressed={active}
+                      onClick={() => setDraftField('scope', scope)}
+                      className={cx(
+                        'flex flex-col justify-start rounded-[var(--radius-md)] border px-3 py-2.5 text-left transition-colors duration-150',
+                        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]',
+                        active
+                          ? 'border-[var(--color-brand)] bg-[var(--color-brand-soft)]'
+                          : 'border-[var(--color-border)] hover:bg-[var(--color-surface-hover)]',
+                      )}
+                    >
+                      <span className="block text-[13px] font-medium text-[var(--color-text-primary)]">
+                        {t(`settings.mcp.scope.${scope}`)}
+                      </span>
+                      <span className="mt-0.5 block text-xs leading-[1.5] text-[var(--color-text-tertiary)]">
+                        {t(`settings.mcp.scopeDesc.${scope}`)}
+                      </span>
+                    </button>
+                  )
+                })}
+              </div>
+            </SettingsBlock>
+
+            <SettingsRow
+              title={needsProjectTarget ? t('settings.mcp.targetProject.title') : t('settings.mcp.targetProject.globalTitle')}
+              description={targetProjectHint}
+            >
               {needsProjectTarget && (
                 <DirectoryPicker
                   value={draft.projectPath}
                   onChange={(path) => setDraftField('projectPath', path)}
                 />
               )}
-            </div>
-          </section>
+            </SettingsRow>
 
-          <section className="rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface)] overflow-hidden">
-            <div className="grid grid-cols-3">
-              {(['stdio', 'http', 'sse'] as TransportKind[]).map((transport) => {
-                const active = draft.transport === transport
-                return (
-                  <button
-                    key={transport}
-                    type="button"
-                    disabled={transportLocked}
-                    onClick={() => setDraftField('transport', transport)}
-                    className={`h-14 text-sm font-semibold transition-colors ${
-                      active
-                        ? 'bg-[var(--color-surface-selected)] text-[var(--color-text-primary)]'
-                        : 'bg-[var(--color-surface)] text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-hover)]'
-                    } ${transportLocked ? 'cursor-not-allowed opacity-70' : ''}`}
-                  >
-                    {transport === 'stdio' ? 'STDIO' : transportLabel(transport, t)}
-                  </button>
-                )
-              })}
-            </div>
-          </section>
-
-          {editing && (
-            <div className="text-sm text-[var(--color-text-tertiary)]">
-              {t('settings.mcp.form.transportLocked')}
-            </div>
-          )}
+            <SettingsRow
+              title={t('settings.mcp.form.transport')}
+              description={editing ? t('settings.mcp.form.transportLocked') : undefined}
+            >
+              <SegmentedControl<TransportKind>
+                label={t('settings.mcp.form.transport')}
+                size="sm"
+                value={draft.transport}
+                onChange={(transport) => setDraftField('transport', transport)}
+                items={TRANSPORTS.map((transport) => ({
+                  value: transport,
+                  label: transportLabel(transport, t),
+                  disabled: transportLocked,
+                }))}
+              />
+            </SettingsRow>
+          </SettingsGroup>
 
           {draft.transport === 'stdio' ? (
             <>
-              <section className="rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface)] p-5">
-                <Input
-                  label={t('settings.mcp.form.command')}
-                  value={draft.command}
-                  onChange={(event) => setDraftField('command', event.target.value)}
-                  placeholder={t('settings.mcp.form.commandPlaceholder')}
-                  required
-                />
-                <p className="mt-2 text-xs leading-5 text-[var(--color-text-tertiary)]">
-                  {t('settings.mcp.form.commandHostHint')}
-                </p>
-              </section>
+              <SettingsGroup className="mt-7">
+                <SettingsBlock className="py-3.5">
+                  <Input
+                    size="md"
+                    label={t('settings.mcp.form.command')}
+                    value={draft.command}
+                    onChange={(event) => setDraftField('command', event.target.value)}
+                    placeholder={t('settings.mcp.form.commandPlaceholder')}
+                    required
+                  />
+                  <p className="mt-2 text-xs leading-[1.5] text-[var(--color-text-tertiary)]">
+                    {t('settings.mcp.form.commandHostHint')}
+                  </p>
+                </SettingsBlock>
+              </SettingsGroup>
 
               <ArraySection
                 title={t('settings.mcp.form.arguments')}
@@ -1054,15 +1083,18 @@ export function McpSettings() {
             </>
           ) : (
             <>
-              <section className="rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface)] p-5">
-                <Input
-                  label={draft.transport === 'http' ? t('settings.mcp.form.url') : t('settings.mcp.form.sseUrl')}
-                  value={draft.url}
-                  onChange={(event) => setDraftField('url', event.target.value)}
-                  placeholder={t('settings.mcp.form.urlPlaceholder')}
-                  required
-                />
-              </section>
+              <SettingsGroup className="mt-7">
+                <SettingsBlock className="py-3.5">
+                  <Input
+                    size="md"
+                    label={draft.transport === 'http' ? t('settings.mcp.form.url') : t('settings.mcp.form.sseUrl')}
+                    value={draft.url}
+                    onChange={(event) => setDraftField('url', event.target.value)}
+                    placeholder={t('settings.mcp.form.urlPlaceholder')}
+                    required
+                  />
+                </SettingsBlock>
+              </SettingsGroup>
 
               <ArraySection
                 title={t('settings.mcp.form.headers')}
@@ -1076,66 +1108,73 @@ export function McpSettings() {
                 addLabel={t('settings.mcp.form.addHeader')}
               />
 
-              <section className="rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface)] p-5">
-                <div className="grid gap-4 md:grid-cols-2">
-                  <Input
-                    label={t('settings.mcp.form.oauthClientId')}
-                    value={draft.oauthClientId}
-                    onChange={(event) => setDraftField('oauthClientId', event.target.value)}
-                    placeholder={t('settings.mcp.form.oauthClientIdPlaceholder')}
-                  />
-                  <Input
-                    label={t('settings.mcp.form.oauthCallbackPort')}
-                    value={draft.oauthCallbackPort}
-                    onChange={(event) => setDraftField('oauthCallbackPort', event.target.value)}
-                    placeholder={t('settings.mcp.form.oauthCallbackPortPlaceholder')}
-                  />
-                </div>
-                <div className="mt-4">
+              <SettingsGroup className="mt-7">
+                <SettingsBlock className="space-y-4 py-3.5">
+                  <div className="grid gap-4 md:grid-cols-2">
+                    <Input
+                      size="md"
+                      label={t('settings.mcp.form.oauthClientId')}
+                      value={draft.oauthClientId}
+                      onChange={(event) => setDraftField('oauthClientId', event.target.value)}
+                      placeholder={t('settings.mcp.form.oauthClientIdPlaceholder')}
+                    />
+                    <Input
+                      size="md"
+                      label={t('settings.mcp.form.oauthCallbackPort')}
+                      value={draft.oauthCallbackPort}
+                      onChange={(event) => setDraftField('oauthCallbackPort', event.target.value)}
+                      placeholder={t('settings.mcp.form.oauthCallbackPortPlaceholder')}
+                    />
+                  </div>
                   <Input
+                    size="md"
                     label={t('settings.mcp.form.headersHelper')}
                     value={draft.headersHelper}
                     onChange={(event) => setDraftField('headersHelper', event.target.value)}
                     placeholder={t('settings.mcp.form.headersHelperPlaceholder')}
                   />
-                </div>
-              </section>
+                </SettingsBlock>
+              </SettingsGroup>
             </>
           )}
 
-          <div className="flex justify-end pt-2">
-            <Button onClick={handleSave} disabled={!isDraftValid(draft) || isBusy} loading={isSaving}>
+          <div className="mt-7 flex justify-end">
+            <Button
+              variant="primary"
+              size="base"
+              onClick={handleSave}
+              disabled={!isDraftValid(draft) || isBusy}
+              loading={isSaving}
+            >
               {t('settings.mcp.form.save')}
             </Button>
           </div>
         </div>
-        </div>
         {deleteModal}
       </>
     )
   }
 
   return (
-    <div className="max-w-5xl min-w-0">
+    <div className={PAGE_CLASS}>
       <SettingsPageHeader
         title={t('settings.mcp.title')}
         description={t('settings.mcp.description')}
         action={(
-          <Button size="base" onClick={beginCreate}>
-            <span className="material-symbols-outlined text-[16px]">add</span>
+          <Button variant="primary" size="base" onClick={beginCreate} icon={<Plus {...ICON_PROPS} />}>
             {t('settings.mcp.addServer')}
           </Button>
         )}
       />
 
       {showListLoading ? (
-        <LoadingState label={t('common.loading')} variant="dashed" size="lg" />
+        <LoadingState label={t('common.loading')} variant="dashed" size="lg" className="mt-6" />
       ) : (
         <>
-          <div className="grid gap-4 md:grid-cols-3 mb-8">
-            <StatCard label={t('settings.mcp.stats.total')} value={stats.total} icon="dns" />
-            <StatCard label={t('settings.mcp.stats.connected')} value={stats.connected} icon="check_circle" />
-            <StatCard label={t('settings.mcp.stats.attention')} value={stats.attention} icon="error" />
+          <div className="mt-6 grid grid-cols-3 gap-3">
+            <SettingsStat label={t('settings.mcp.stats.total')} value={stats.total} />
+            <SettingsStat label={t('settings.mcp.stats.connected')} value={stats.connected} />
+            <SettingsStat label={t('settings.mcp.stats.attention')} value={stats.attention} />
           </div>
 
           {error ? (
@@ -1144,44 +1183,48 @@ export function McpSettings() {
               title={error}
               retryLabel={t('common.retry')}
               onRetry={() => void fetchServersForKnownProjects(currentWorkDir)}
+              className="mt-7"
             />
           ) : servers.length === 0 ? (
             <EmptyState
               size="md"
-              icon={<span className="material-symbols-outlined text-[20px]" aria-hidden="true">dns</span>}
+              icon={<Server size={18} strokeWidth={1.75} aria-hidden />}
               title={t('settings.mcp.empty')}
               description={t('settings.mcp.emptyHint')}
+              className="mt-7"
             />
           ) : (
-            <div className="flex flex-col gap-6">
-              {MCP_GROUP_ORDER.map((group) => {
-                const groupServers = groupedServers[group]
-                if (!groupServers?.length) return null
+            MCP_GROUP_ORDER.map((group) => {
+              const groupServers = groupedServers[group]
+              if (!groupServers?.length) return null
 
-                return (
-                  <section key={group}>
-                    <div className="flex items-center justify-between mb-3">
-                      <div className="text-[1.35rem] font-semibold text-[var(--color-text-primary)]">
-                        {group === 'plugin' ? t('settings.mcp.scope.plugin') : t(`settings.mcp.scope.${group}`)}
-                      </div>
-                      <div className="text-sm text-[var(--color-text-tertiary)]">{groupServers.length}</div>
-                    </div>
-                    <div className="rounded-[28px] border border-[var(--color-border)] bg-[var(--color-surface)] overflow-hidden">
-                      {groupServers.map((server) => (
-                        <ServerRow
-                          key={getMcpServerIdentityKey(server)}
-                          server={server}
-                          isBusy={busyServerKey === getMcpServerIdentityKey(server)}
-                          onOpen={() => beginEdit(server)}
-                          onToggle={() => void handleToggle(server)}
-                          t={t}
-                        />
-                      ))}
-                    </div>
-                  </section>
-                )
-              })}
-            </div>
+              return (
+                <SettingsSection
+                  key={group}
+                  title={(
+                    <>
+                      {group === 'plugin' ? t('settings.mcp.scope.plugin') : t(`settings.mcp.scope.${group}`)}
+                      <span className="ml-1.5 font-mono text-[11px] font-normal tabular-nums text-[var(--color-text-tertiary)]">
+                        {groupServers.length}
+                      </span>
+                    </>
+                  )}
+                >
+                  <SettingsGroup>
+                    {groupServers.map((server) => (
+                      <ServerRow
+                        key={getMcpServerIdentityKey(server)}
+                        server={server}
+                        isBusy={busyServerKey === getMcpServerIdentityKey(server)}
+                        onOpen={() => beginEdit(server)}
+                        onToggle={() => void handleToggle(server)}
+                        t={t}
+                      />
+                    ))}
+                  </SettingsGroup>
+                </SettingsSection>
+              )
+            })
           )}
         </>
       )}
@@ -1190,11 +1233,18 @@ export function McpSettings() {
   )
 }
 
-function InfoPair({ label, value }: { label: string; value: string }) {
+function InfoRow({ label, value, mono = false }: { label: string; value: string; mono?: boolean }) {
   return (
-    <div className="rounded-[var(--radius-lg)] bg-[var(--color-surface-hover)] px-4 py-3">
-      <div className="text-xs uppercase tracking-[0.16em] font-semibold text-[var(--color-text-tertiary)] mb-2">{label}</div>
-      <div className="text-sm text-[var(--color-text-primary)] break-all">{value}</div>
+    <div className="flex min-h-[52px] items-center gap-6 px-4 py-3">
+      <div className="w-32 shrink-0 text-[13px] font-medium text-[var(--color-text-primary)]">{label}</div>
+      <div
+        className={cx(
+          'min-w-0 flex-1 break-all text-right',
+          mono ? 'font-mono text-xs text-[var(--color-text-secondary)]' : 'text-[13px] text-[var(--color-text-secondary)]',
+        )}
+      >
+        {value}
+      </div>
     </div>
   )
 }
diff --git a/desktop/src/pages/MemorySettings.tsx b/desktop/src/pages/MemorySettings.tsx
index 8bcaf14b..bd3e97e4 100644
--- a/desktop/src/pages/MemorySettings.tsx
+++ b/desktop/src/pages/MemorySettings.tsx
@@ -1,9 +1,10 @@
 import { useEffect, useMemo, useState } from 'react'
-import type { ReactNode } from 'react'
-import { BookOpenText, ChevronDown, ChevronRight, Database, FileText, Folder, FolderGit2, PencilLine, RefreshCw, RotateCcw, Save, Search, X } from 'lucide-react'
+import { ChevronDown, ChevronRight, CircleAlert, FileText, Folder, FolderGit2, PencilLine, RefreshCw, RotateCcw, Save, Search } from 'lucide-react'
+import { Badge } from '@/components/ui/Badge'
 import { Button } from '@/components/ui/Button'
 import { EmptyState } from '@/components/ui/EmptyState'
-import { IconButton } from '@/components/ui/IconButton'
+import { SearchField } from '@/components/ui/SearchField'
+import { SettingsPageHeader } from '@/components/settings/SettingsSection'
 import { MarkdownRenderer } from '../components/markdown/MarkdownRenderer'
 import { useTranslation } from '../i18n'
 import { formatBytes } from '../lib/formatBytes'
@@ -219,134 +220,128 @@ export function MemorySettings() {
   }
 
   return (
-    <div className="flex h-full min-h-[640px] flex-col overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)]">
-      <header className="grid min-h-[58px] border-b border-[var(--color-border)] bg-[var(--color-surface-container-low)] lg:grid-cols-[280px_minmax(0,1fr)]">
-        <div className="flex min-w-0 items-center gap-3 border-b border-[var(--color-border)] px-4 py-3 lg:border-b-0 lg:border-r">
-          <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] text-[var(--color-brand)]">
-            <BookOpenText size={16} aria-hidden="true" />
-          </span>
-          <div className="min-w-0">
-            <h2 className="truncate text-base font-semibold text-[var(--color-text-primary)]" style={{ fontFamily: 'var(--font-headline)' }}>
-              {t('settings.memory.title')}
-            </h2>
-            <p className="truncate text-xs text-[var(--color-text-tertiary)]">
-              {t('settings.memory.projects')}
-            </p>
-          </div>
-        </div>
-        <div className="flex min-w-0 flex-wrap items-center justify-between gap-3 px-4 py-3">
-          <Breadcrumb
-            project={selectedProject}
-            filePath={selectedFile?.path}
-            fallbackProject={activeCwd ? projectDisplayName(activeCwd) : '~/.claude/projects'}
-            fallbackFile={t('settings.memory.noFileSelected')}
-          />
-          <div className="flex shrink-0 flex-wrap gap-2">
-            <Button
-              type="button"
-              variant="secondary"
-              size="sm"
-              onClick={handleRefresh}
-              loading={isLoadingProjects || isLoadingFiles}
-              icon={<RefreshCw size={15} aria-hidden="true" />}
-            >
-              {t('settings.memory.refresh')}
-            </Button>
-          </div>
-        </div>
-      </header>
+    <div className="min-w-0">
+      <SettingsPageHeader
+        title={t('settings.memory.title')}
+        description={t('settings.memory.description')}
+        action={(
+          <Button
+            type="button"
+            variant="secondary"
+            size="base"
+            onClick={handleRefresh}
+            loading={isLoadingProjects || isLoadingFiles}
+            icon={<RefreshCw size={14} strokeWidth={1.75} aria-hidden="true" />}
+          >
+            {t('settings.memory.refresh')}
+          </Button>
+        )}
+      />
 
       {error && (
-        <div className="m-3 rounded-[var(--radius-md)] border border-[var(--color-error)] bg-[var(--color-error-container)] px-3 py-2 text-sm text-[var(--color-on-error-container)]">
-          {error}
+        <div className="mt-6 flex items-start gap-2 rounded-[var(--radius-md)] bg-[var(--color-error-container)] px-3 py-2 text-xs leading-[1.5] text-[var(--color-on-error-container)]">
+          <CircleAlert size={14} strokeWidth={1.75} className="mt-px shrink-0" aria-hidden="true" />
+          <span className="min-w-0 break-words">{error}</span>
         </div>
       )}
 
-      <div className="grid min-h-0 flex-1 lg:grid-cols-[280px_minmax(0,1fr)]">
-        <aside className="min-h-0 overflow-hidden border-b border-[var(--color-border)] lg:border-b-0 lg:border-r">
-          <section className="flex h-full min-h-0 flex-col bg-[var(--color-surface-container-lowest)]">
-            <PanelHeader
-              icon={<Database size={15} aria-hidden="true" />}
-              title={t('settings.memory.resourceManager')}
-              meta={isLoadingProjects ? t('common.loading') : undefined}
+      <div className="mt-6 grid h-[calc(100vh_-_260px)] min-h-[520px] grid-rows-[minmax(0,240px)_minmax(0,1fr)] overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] sm:grid-cols-[216px_minmax(0,1fr)] sm:grid-rows-1">
+        <aside className="flex min-h-0 flex-col border-b border-[var(--color-border)] bg-[var(--color-surface-sidebar)] sm:border-b-0 sm:border-r">
+          <div className="flex h-10 shrink-0 items-center justify-between gap-2 px-3">
+            <h3 className="truncate text-xs font-semibold text-[var(--color-text-tertiary)]">
+              {t('settings.memory.resourceManager')}
+            </h3>
+            {isLoadingProjects ? (
+              <span className="shrink-0 text-[11px] text-[var(--color-text-tertiary)]">{t('common.loading')}</span>
+            ) : null}
+          </div>
+          <div className="shrink-0 px-2 pb-2">
+            <SearchField
+              value={resourceQuery}
+              onChange={setResourceQuery}
+              label={t('settings.memory.resourceSearchPlaceholder')}
+              placeholder={t('settings.memory.resourceSearchPlaceholder')}
+              clearLabel={t('settings.memory.clearSearch')}
+              size="sm"
             />
-            <div className="px-3 py-3">
-              <SearchField
-                value={resourceQuery}
-                onChange={setResourceQuery}
-                placeholder={t('settings.memory.resourceSearchPlaceholder')}
-                ariaLabel={t('settings.memory.resourceSearchPlaceholder')}
-                clearLabel={t('settings.memory.clearSearch')}
-              />
-            </div>
-            <div className="min-h-0 flex-1 overflow-y-auto px-2 pb-2">
-              {projects.length === 0 && !isLoadingProjects ? (
-                <EmptyState icon={<FolderGit2 size={18} />} description={t('settings.memory.emptyProjects')} variant="plain" size="sm" />
-              ) : filteredProjects.length === 0 ? (
-                <EmptyState icon={<Search size={18} />} description={t('settings.memory.noProjectMatches')} variant="plain" size="sm" />
-              ) : (
-                <div className="py-1">
-                  {filteredProjects.map((project) => {
-                    const isExpanded = project.id === expandedProjectId
-                    const isSelected = project.id === selectedProjectId
-                    const visibleFileTree = isSelected ? fileTree : []
-                    return (
-                      <ProjectTreeRow
-                        key={project.id}
-                        project={project}
-                        expanded={isExpanded}
-                        active={isSelected}
-                        loading={isSelected && isLoadingFiles}
-                        fileTree={visibleFileTree}
-                        activePath={selectedFile?.path ?? null}
-                        collapsedFolders={collapsedFolders}
-                        forceExpanded={forceExpandFiles}
-                        onToggle={() => handleProjectToggle(project.id)}
-                        onToggleFolder={toggleFolder}
-                        onFileSelect={handleFileOpen}
-                        emptyText={t('settings.memory.emptyFiles')}
-                      />
-                    )
-                  })}
-                </div>
-              )}
-            </div>
-          </section>
+          </div>
+          <div className="min-h-0 flex-1 overflow-y-auto px-2 pb-2">
+            {projects.length === 0 && !isLoadingProjects ? (
+              <EmptyState icon={<FolderGit2 size={18} strokeWidth={1.75} />} description={t('settings.memory.emptyProjects')} variant="plain" size="sm" />
+            ) : filteredProjects.length === 0 ? (
+              <EmptyState icon={<Search size={18} strokeWidth={1.75} />} description={t('settings.memory.noProjectMatches')} variant="plain" size="sm" />
+            ) : (
+              <div className="flex flex-col gap-px">
+                {filteredProjects.map((project) => {
+                  const isExpanded = project.id === expandedProjectId
+                  const isSelected = project.id === selectedProjectId
+                  const visibleFileTree = isSelected ? fileTree : []
+                  return (
+                    <ProjectTreeRow
+                      key={project.id}
+                      project={project}
+                      expanded={isExpanded}
+                      active={isSelected}
+                      loading={isSelected && isLoadingFiles}
+                      fileTree={visibleFileTree}
+                      activePath={selectedFile?.path ?? null}
+                      collapsedFolders={collapsedFolders}
+                      forceExpanded={forceExpandFiles}
+                      onToggle={() => handleProjectToggle(project.id)}
+                      onToggleFolder={toggleFolder}
+                      onFileSelect={handleFileOpen}
+                      emptyText={t('settings.memory.emptyFiles')}
+                    />
+                  )
+                })}
+              </div>
+            )}
+          </div>
         </aside>
 
-        <section className="flex min-h-0 flex-col overflow-hidden bg-[var(--color-surface-container-lowest)]">
-          <div className="grid gap-3 border-b border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] px-4 py-3 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center">
-            <div className="min-w-0">
-              <div className="flex flex-wrap items-center gap-2">
-                <h3 className="truncate text-sm font-semibold text-[var(--color-text-primary)]" style={{ fontFamily: 'var(--font-headline)' }}>
+        <section className="flex min-h-0 flex-col overflow-hidden">
+          <div className="flex min-h-[52px] shrink-0 items-start gap-3 border-b border-[var(--color-border)] px-4 py-2.5">
+            <div className="min-w-0 flex-1">
+              <div className="flex min-w-0 items-center gap-2">
+                <h3 className="truncate text-sm font-semibold text-[var(--color-text-primary)]">
                   {selectedFile?.path ? fileNameFromPath(selectedFile.path) : t('settings.memory.noFileSelected')}
                 </h3>
-                {isDirty && <Badge>{t('settings.memory.unsaved')}</Badge>}
-                {lastSavedAt && !isDirty && <Badge>{t('settings.memory.saved')}</Badge>}
+                {isDirty && <Badge tone="warning">{t('settings.memory.unsaved')}</Badge>}
+                {lastSavedAt && !isDirty && <Badge tone="success">{t('settings.memory.saved')}</Badge>}
               </div>
-              <p className="mt-1 truncate text-xs text-[var(--color-text-tertiary)]">
-                {selectedProject?.memoryDir ?? t('settings.memory.selectProject')}
-              </p>
-            </div>
-            <div className="flex shrink-0 items-center gap-2 text-xs text-[var(--color-text-tertiary)]">
-              {selectedFile ? (
-                <>
-                  <span>{formatBytes(selectedFile.bytes)}</span>
-                  {selectedFile.updatedAt ? <span>{formatDate(selectedFile.updatedAt)}</span> : null}
-                </>
-              ) : null}
+              {selectedProject?.memoryDir ? (
+                <p className="mt-0.5 truncate font-mono text-[11px] text-[var(--color-text-tertiary)]" title={selectedProject.memoryDir}>
+                  {selectedProject.memoryDir}
+                </p>
+              ) : (
+                <p className="mt-0.5 truncate text-xs text-[var(--color-text-tertiary)]">
+                  {t('settings.memory.selectProject')}
+                </p>
+              )}
             </div>
+            {selectedFile ? (
+              <div className="mt-0.5 flex shrink-0 items-center gap-1.5 font-mono text-[11px] tabular-nums text-[var(--color-text-tertiary)]">
+                <span>{formatBytes(selectedFile.bytes)}</span>
+                {selectedFile.updatedAt ? (
+                  <>
+                    <span aria-hidden="true" className="h-[3px] w-[3px] rounded-full bg-[var(--color-text-tertiary)]" />
+                    <span>{formatDate(selectedFile.updatedAt)}</span>
+                  </>
+                ) : null}
+              </div>
+            ) : null}
           </div>
 
           {selectedFile ? (
             isEditing ? (
               <div className="flex min-h-0 flex-1 flex-col">
-                <div className="flex h-10 shrink-0 items-center justify-between border-b border-[var(--color-border)] bg-[var(--color-surface-container-low)] px-3 text-xs font-medium uppercase tracking-normal text-[var(--color-text-tertiary)]">
-                  <div className="flex min-w-0 items-center gap-2">
-                    <span>{t('settings.memory.editor')}</span>
-                    <span>MARKDOWN</span>
+                <div className="flex h-10 shrink-0 items-center justify-between gap-2 border-b border-[var(--color-border)] bg-[var(--color-surface-sidebar)] pl-4 pr-2 text-xs text-[var(--color-text-tertiary)]">
+                  <div className="flex min-w-0 items-center gap-1.5">
+                    <span className="font-medium text-[var(--color-text-secondary)]">{t('settings.memory.editor')}</span>
+                    <span aria-hidden="true" className="h-[3px] w-[3px] rounded-full bg-[var(--color-text-tertiary)]" />
+                    <span>Markdown</span>
                   </div>
-                  <div className="flex shrink-0 items-center gap-2 normal-case">
+                  <div className="flex shrink-0 items-center gap-1">
                     <Button
                       type="button"
                       variant="ghost"
@@ -362,17 +357,18 @@ export function MemorySettings() {
                       size="sm"
                       disabled={!isDirty || isSaving}
                       onClick={() => selectedFile && updateDraft(selectedFile.content)}
-                      icon={<RotateCcw size={14} aria-hidden="true" />}
+                      icon={<RotateCcw size={14} strokeWidth={1.75} aria-hidden="true" />}
                     >
                       {t('settings.memory.revert')}
                     </Button>
                     <Button
                       type="button"
+                      variant="primary"
                       size="sm"
                       disabled={isSaving}
                       loading={isSaving}
                       onClick={() => void handleSave()}
-                      icon={<Save size={14} aria-hidden="true" />}
+                      icon={<Save size={14} strokeWidth={1.75} aria-hidden="true" />}
                     >
                       {t('common.save')}
                     </Button>
@@ -383,14 +379,15 @@ export function MemorySettings() {
                   value={draftContent}
                   onChange={(event) => updateDraft(event.target.value)}
                   spellCheck={false}
-                  className="min-h-0 flex-1 w-full resize-none overflow-auto bg-transparent p-5 font-mono text-[13px] leading-6 text-[var(--color-text-primary)] outline-none placeholder:text-[var(--color-text-tertiary)]"
+                  className="min-h-0 flex-1 w-full resize-none overflow-auto bg-transparent px-5 py-4 font-mono text-[13px] leading-6 text-[var(--color-text-primary)] outline-none placeholder:text-[var(--color-text-tertiary)]"
                 />
               </div>
             ) : (
               <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
-                <div className="flex h-10 shrink-0 items-center justify-between border-b border-[var(--color-border)] bg-[var(--color-surface-container-low)] px-3 text-xs font-medium uppercase tracking-normal text-[var(--color-text-tertiary)]">
-                  <div className="flex min-w-0 items-center gap-2">
-                    <span>{t('settings.memory.preview')}</span>
+                <div className="flex h-10 shrink-0 items-center justify-between gap-2 border-b border-[var(--color-border)] bg-[var(--color-surface-sidebar)] pl-4 pr-2 text-xs text-[var(--color-text-tertiary)]">
+                  <div className="flex min-w-0 items-center gap-1.5">
+                    <span className="font-medium text-[var(--color-text-secondary)]">{t('settings.memory.preview')}</span>
+                    <span aria-hidden="true" className="h-[3px] w-[3px] rounded-full bg-[var(--color-text-tertiary)]" />
                     <span>{t('settings.memory.rendered')}</span>
                   </div>
                   <Button
@@ -400,10 +397,12 @@ export function MemorySettings() {
                     aria-label={t('settings.memory.edit')}
                     title={t('settings.memory.edit')}
                     onClick={() => setIsEditing(true)}
-                    icon={<PencilLine size={14} aria-hidden="true" />}
-                  />
+                    icon={<PencilLine size={14} strokeWidth={1.75} aria-hidden="true" />}
+                  >
+                    {t('settings.memory.edit')}
+                  </Button>
                 </div>
-                <div className="min-h-0 flex-1 overflow-y-auto p-6">
+                <div className="min-h-0 flex-1 overflow-y-auto px-6 py-5">
                   <MarkdownRenderer
                     content={previewContent || ' '}
                     variant="document"
@@ -414,7 +413,7 @@ export function MemorySettings() {
             )
           ) : (
             <div className="flex min-h-0 flex-1 items-center justify-center p-8">
-              <EmptyState icon={<FileText size={20} />} description={isLoadingFile ? t('common.loading') : t('settings.memory.selectFile')} variant="plain" size="sm" />
+              <EmptyState icon={<FileText size={18} strokeWidth={1.75} />} description={isLoadingFile ? t('common.loading') : t('settings.memory.selectFile')} variant="plain" size="sm" />
             </div>
           )}
         </section>
@@ -423,90 +422,12 @@ export function MemorySettings() {
   )
 }
 
-function Breadcrumb({
-  project,
-  filePath,
-  fallbackProject,
-  fallbackFile,
-}: {
-  project: MemoryProject | null
-  filePath?: string
-  fallbackProject: string
-  fallbackFile: string
-}) {
-  const t = useTranslation()
-  const projectLabel = project ? projectDisplayName(project.label) : fallbackProject
-  const parts = filePath ? [projectLabel, ...filePath.split('/').filter(Boolean)] : [projectLabel, fallbackFile]
-  return (
-    <nav aria-label={t('settings.memory.filePath')} className="flex min-w-0 items-center gap-1 text-sm text-[var(--color-text-tertiary)]">
-      {parts.map((part, index) => {
-        const isLast = index === parts.length - 1
-        return (
-          <span key={`${part}-${index}`} className="flex min-w-0 items-center gap-1">
-            {index > 0 ? <ChevronRight size={14} className="shrink-0" aria-hidden="true" /> : null}
-            <span className={`truncate ${isLast ? 'font-semibold text-[var(--color-text-primary)]' : ''}`}>
-              {part}
-            </span>
-          </span>
-        )
-      })}
-    </nav>
-  )
-}
-
-function SearchField({
-  value,
-  onChange,
-  placeholder,
-  ariaLabel,
-  clearLabel,
-}: {
-  value: string
-  onChange: (value: string) => void
-  placeholder: string
-  ariaLabel: string
-  clearLabel: string
-}) {
-  return (
-    <div className="relative">
-      <Search
-        size={15}
-        className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-[var(--color-text-tertiary)]"
-        aria-hidden="true"
-      />
-      <input
-        aria-label={ariaLabel}
-        value={value}
-        onChange={(event) => onChange(event.target.value)}
-        placeholder={placeholder}
-        className="h-10 w-full rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] pl-9 pr-9 text-sm text-[var(--color-text-primary)] outline-none transition-colors duration-150 placeholder:text-[var(--color-text-tertiary)] focus:border-[var(--color-border-focus)] focus:shadow-[var(--shadow-focus-ring)]"
-      />
-      {value ? (
-        <IconButton
-          icon={<X size={14} aria-hidden="true" />}
-          label={clearLabel}
-          showTooltip={false}
-          size="sm"
-          tone="muted"
-          onClick={() => onChange('')}
-          className="absolute right-2 top-1/2 -translate-y-1/2"
-        />
-      ) : null}
-    </div>
-  )
-}
-
-function PanelHeader({ icon, title, meta }: { icon?: ReactNode; title: string; meta?: string }) {
-  return (
-    <div className="flex h-11 items-center justify-between border-b border-[var(--color-border)] px-3">
-      <h3 className="flex min-w-0 items-center gap-2 text-sm font-semibold text-[var(--color-text-primary)]" style={{ fontFamily: 'var(--font-headline)' }}>
-        {icon ? <span className="text-[var(--color-text-tertiary)]">{icon}</span> : null}
-        <span className="truncate">{title}</span>
-      </h3>
-      {meta ? <span className="text-xs text-[var(--color-text-tertiary)]">{meta}</span> : null}
-    </div>
-  )
-}
+const TREE_ROW_BASE =
+  'flex h-7 w-full items-center gap-1.5 rounded-[var(--radius-sm)] pr-2 text-left text-[13px] transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]'
+const TREE_ROW_IDLE =
+  'text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)]'
+const TREE_ROW_ACTIVE =
+  'bg-[var(--color-surface-selected)] font-medium text-[var(--color-text-primary)]'
 
 function ProjectTreeRow({
   project,
@@ -538,7 +459,7 @@ function ProjectTreeRow({
   const t = useTranslation()
   const display = projectDisplayName(project.label)
   return (
-    <div className="mb-1">
+    <div>
       <button
         type="button"
         data-testid="memory-project-row"
@@ -546,21 +467,22 @@ function ProjectTreeRow({
         title={project.label}
         aria-expanded={expanded}
         aria-label={t('settings.memory.toggleFolder', { name: display })}
-        className={`group flex min-h-9 w-full items-center gap-2 rounded-[var(--radius-md)] px-2.5 py-1.5 text-left transition-colors focus:outline-none focus-visible:shadow-[var(--shadow-focus-ring)] ${
-          active
-            ? 'bg-[var(--color-memory-surface)] text-[var(--color-text-primary)] ring-1 ring-inset ring-[var(--color-memory-border)]'
-            : 'text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)]'
-        }`}
+        className={`${TREE_ROW_BASE} pl-2 ${active ? TREE_ROW_ACTIVE : TREE_ROW_IDLE}`}
       >
-        <Folder size={15} className="shrink-0 text-[var(--color-brand)]" aria-hidden="true" />
-        <span className="min-w-0 flex-1 truncate text-sm font-medium">{display}</span>
+        <Folder
+          size={14}
+          strokeWidth={1.75}
+          className={`shrink-0 ${active ? 'text-[var(--color-brand)]' : 'text-[var(--color-text-tertiary)]'}`}
+          aria-hidden="true"
+        />
+        <span className="min-w-0 flex-1 truncate">{display}</span>
         {!project.exists ? (
-          <span className="shrink-0 text-xs text-[var(--color-text-tertiary)]">{t('settings.memory.missing')}</span>
+          <span className="shrink-0 text-[11px] font-normal text-[var(--color-text-tertiary)]">{t('settings.memory.missing')}</span>
         ) : null}
       </button>
 
       {expanded ? (
-        <div className="ml-[18px] mt-1.5 border-l border-[var(--color-border)] pl-2.5">
+        <div className="my-0.5 ml-[15px] flex flex-col gap-px border-l border-[var(--color-border)] pl-1.5">
           {loading ? (
             <div className="px-2 py-1.5 text-xs text-[var(--color-text-tertiary)]">{t('common.loading')}</div>
           ) : fileTree.length === 0 ? (
@@ -600,15 +522,16 @@ function FileRow({
     <button
       type="button"
       onClick={onSelect}
-      style={{ paddingLeft: `${4 + Math.max(depth - 1, 0) * 16}px` }}
-      className={`mb-1 flex min-h-8 w-full items-center gap-1.5 rounded-[var(--radius-md)] border py-1 pr-2 text-left transition-colors focus:outline-none focus-visible:shadow-[var(--shadow-focus-ring)] ${
-        active
-          ? 'border-[var(--color-memory-border)] bg-[var(--color-memory-surface)] text-[var(--color-text-primary)]'
-          : 'border-transparent text-[var(--color-text-secondary)] hover:border-[var(--color-border)] hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)]'
-      }`}
+      style={{ paddingLeft: `${6 + Math.max(depth - 1, 0) * 14}px` }}
+      className={`${TREE_ROW_BASE} ${active ? TREE_ROW_ACTIVE : TREE_ROW_IDLE}`}
     >
-      <FileText size={14} className="shrink-0 text-[var(--color-text-tertiary)]" aria-hidden="true" />
-      <span className="min-w-0 flex-1 truncate text-sm">{file.title}</span>
+      <FileText
+        size={14}
+        strokeWidth={1.75}
+        className={`shrink-0 ${active ? 'text-[var(--color-brand)]' : 'text-[var(--color-text-tertiary)]'}`}
+        aria-hidden="true"
+      />
+      <span className="min-w-0 flex-1 truncate">{file.title}</span>
     </button>
   )
 }
@@ -650,15 +573,17 @@ function MemoryTreeRow({
         onClick={() => onToggleFolder(node.path)}
         aria-expanded={!isCollapsed}
         aria-label={t('settings.memory.toggleFolder', { name: node.name })}
-        className="mb-1 flex min-h-8 w-full items-center gap-1.5 rounded-[var(--radius-md)] border border-transparent py-1 pr-2 text-left text-sm text-[var(--color-text-secondary)] transition-colors hover:border-[var(--color-border)] hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] focus:outline-none focus-visible:shadow-[var(--shadow-focus-ring)]"
-        style={{ paddingLeft: `${4 + Math.max(depth - 1, 0) * 16}px` }}
+        className={`${TREE_ROW_BASE} ${TREE_ROW_IDLE}`}
+        style={{ paddingLeft: `${2 + Math.max(depth - 1, 0) * 14}px` }}
       >
-        {isCollapsed ? <ChevronRight size={14} aria-hidden="true" /> : <ChevronDown size={14} aria-hidden="true" />}
-        <Folder size={14} className="shrink-0 text-[var(--color-brand)]" aria-hidden="true" />
-        <span className="min-w-0 flex-1 truncate font-medium">{node.name}</span>
+        {isCollapsed
+          ? <ChevronRight size={12} strokeWidth={2} className="shrink-0 text-[var(--color-text-tertiary)]" aria-hidden="true" />
+          : <ChevronDown size={12} strokeWidth={2} className="shrink-0 text-[var(--color-text-tertiary)]" aria-hidden="true" />}
+        <Folder size={14} strokeWidth={1.75} className="shrink-0 text-[var(--color-text-tertiary)]" aria-hidden="true" />
+        <span className="min-w-0 flex-1 truncate">{node.name}</span>
       </button>
       {!isCollapsed ? (
-        <div className="ml-[18px] mt-1 border-l border-[var(--color-border)] pl-2.5">
+        <div className="my-0.5 ml-[15px] flex flex-col gap-px border-l border-[var(--color-border)] pl-1.5">
           {node.children.map((child) => (
             <MemoryTreeRow
               key={child.id}
@@ -677,14 +602,6 @@ function MemoryTreeRow({
   )
 }
 
-function Badge({ children }: { children: string }) {
-  return (
-    <span className="shrink-0 rounded-[var(--radius-sm)] border border-[var(--color-border)] bg-[var(--color-surface)] px-1.5 py-0.5 text-[11px] font-medium text-[var(--color-text-secondary)]">
-      {children}
-    </span>
-  )
-}
-
 function normalizeSearch(value: string): string {
   return value.toLowerCase().replace(/\\/g, '/').replace(/\/+/g, '/').trim()
 }
diff --git a/desktop/src/pages/RemoteAccess.tsx b/desktop/src/pages/RemoteAccess.tsx
index cb1e81c2..8abb49bc 100644
--- a/desktop/src/pages/RemoteAccess.tsx
+++ b/desktop/src/pages/RemoteAccess.tsx
@@ -1,8 +1,10 @@
 import { useEffect, useLayoutEffect, useRef, useState, type ReactNode } from 'react'
 import { remoteAccessApi } from '@/api/publicAccess'
 import { ApiError } from '@/api/client'
+import { BrandSeal } from '@/components/composite/BrandSeal'
 import { Button } from '@/components/ui/Button'
 import { Input } from '@/components/ui/Input'
+import { Spinner } from '@/components/ui/Spinner'
 import { useTranslation } from '@/i18n'
 
 export function RemoteAccessGate({ children }: { children: ReactNode }) {
@@ -101,12 +103,30 @@ export function RemoteAccessGate({ children }: { children: ReactNode }) {
     }
   }
   if (state === 'ready') return children
-  return <main className="min-h-screen bg-[var(--color-surface)] p-6 text-[var(--color-text-primary)]">
-    <div className="mx-auto max-w-md space-y-4 py-12">
-      <h1 className="text-2xl font-semibold">{t('publicAccess.title')}</h1>
-      <p id="remote-access-status" role={state === 'error' ? 'alert' : 'status'}>{state === 'pair' ? t('publicAccess.phoneIntro') : state === 'pending' ? t('publicAccess.phonePending') : state === 'error' ? t('publicAccess.phoneError') : state === 'unpaired' ? t('publicAccess.phoneUnpaired') : t('common.loading')}</p>
-      {state === 'pair' && <><Input aria-describedby="remote-access-status" aria-label={t('publicAccess.deviceName')} placeholder={t('publicAccess.deviceName')} value={name} maxLength={80} onChange={(e) => setName(e.target.value)} /><Button disabled={!name.trim()} onClick={() => void pair()}>{t('publicAccess.requestPair')}</Button></>}
-      {state === 'error' && <Button onClick={() => void retry()}>{t('common.retry')}</Button>}
+  const waiting = state === 'loading' || state === 'pending'
+  return <main className="flex min-h-screen items-center justify-center bg-[var(--color-surface)] px-4 py-10 text-[var(--color-text-primary)]">
+    <div className="w-full max-w-[400px] rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] px-6 pb-6 pt-7 shadow-[var(--shadow-card)]">
+      <div className="flex flex-col items-center text-center">
+        <BrandSeal size="lg" />
+        <h1 className="mt-4 text-[18px] font-semibold leading-snug">{t('publicAccess.title')}</h1>
+        <div className="mt-2 flex w-full items-start justify-center gap-2">
+          {waiting && <Spinner size={14} className="mt-[3px] shrink-0 text-[var(--color-text-tertiary)]" />}
+          <p
+            id="remote-access-status"
+            role={state === 'error' ? 'alert' : 'status'}
+            className={state === 'error'
+              ? 'w-full rounded-[var(--radius-md)] bg-[var(--color-error-container)] px-3 py-2 text-left text-xs leading-[1.6] text-[var(--color-on-error-container)]'
+              : 'text-[13px] leading-[1.6] text-[var(--color-text-secondary)]'}
+          >
+            {state === 'pair' ? t('publicAccess.phoneIntro') : state === 'pending' ? t('publicAccess.phonePending') : state === 'error' ? t('publicAccess.phoneError') : state === 'unpaired' ? t('publicAccess.phoneUnpaired') : t('common.loading')}
+          </p>
+        </div>
+      </div>
+      {state === 'pair' && <div className="mt-5 grid gap-3">
+        <Input size="lg" aria-describedby="remote-access-status" aria-label={t('publicAccess.deviceName')} placeholder={t('publicAccess.deviceName')} value={name} maxLength={80} onChange={(e) => setName(e.target.value)} />
+        <Button variant="primary" size="lg" block disabled={!name.trim()} onClick={() => void pair()}>{t('publicAccess.requestPair')}</Button>
+      </div>}
+      {state === 'error' && <Button variant="secondary" size="lg" block className="mt-4" onClick={() => void retry()}>{t('common.retry')}</Button>}
     </div>
   </main>
 }
diff --git a/desktop/src/pages/ScheduledTasks.tsx b/desktop/src/pages/ScheduledTasks.tsx
index 78bbd8df..fd836aa8 100644
--- a/desktop/src/pages/ScheduledTasks.tsx
+++ b/desktop/src/pages/ScheduledTasks.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react'
+import { Info } from 'lucide-react'
 import { useTaskStore } from '../stores/taskStore'
 import { useUIStore } from '../stores/uiStore'
 import { useTranslation } from '../i18n'
@@ -20,24 +21,22 @@ export function ScheduledTasks() {
   }, [fetchTasks])
 
   return (
-    <div className="flex-1 overflow-y-auto">
-      <div className="animate-screen-pop mx-auto max-w-[1180px] px-11 pb-12 pt-8">
-        {/* Header */}
-        <div className="flex items-start justify-between gap-4">
-          <div className="min-w-0">
-            <h1
-              className="text-[28px] font-bold tracking-tight text-[var(--color-text-primary)]"
-              style={{ fontFamily: 'var(--font-headline)' }}
-            >
+    <div className="flex-1 overflow-y-auto bg-[var(--color-surface)]">
+      <div className="mx-auto max-w-[960px] px-10 pb-16 pt-9">
+        {/* Page head: 22 semibold title, 13 tertiary description, the one
+            primary action on the right — the same head every list page uses. */}
+        <header className="flex items-end gap-4">
+          <div className="min-w-0 flex-1">
+            <h1 className="text-[22px] font-semibold leading-[1.3] text-[var(--color-text-primary)]">
               {t('scheduledPage.title')}
             </h1>
-            <p className="mt-[7px] text-[14.5px] leading-[1.6] text-[var(--color-text-secondary)]">
+            <p className="mt-1.5 text-[13px] leading-[1.6] text-[var(--color-text-tertiary)]">
               {(() => {
                 const parts = t('scheduledPage.subtitle').split('{code}')
                 return (
                   <>
                     {parts[0]}
-                    <code className="rounded-[var(--radius-sm)] bg-[var(--color-surface-container)] px-2 py-0.5 font-mono text-[12.5px] font-medium">
+                    <code className="rounded-[var(--radius-xs)] bg-[var(--color-surface-container)] px-1.5 py-px font-mono text-[12px] text-[var(--color-text-primary)]">
                       /schedule
                     </code>
                     {parts[1]}
@@ -46,25 +45,22 @@ export function ScheduledTasks() {
               })()}
             </p>
           </div>
-          <Button size="lg" className="shrink-0" onClick={() => openModal('new-task')}>{t('tasks.newTask')}</Button>
-        </div>
+          {/* The label carries its own "+", so no icon beside it. */}
+          <Button size="base" className="shrink-0" onClick={() => openModal('new-task')}>{t('tasks.newTask')}</Button>
+        </header>
 
-        {/* Desktop-online notice. Terracotta rather than the previous
-            `--color-warning` wash: this is a standing condition, not a fault.
-            The old fill was `/8` and `/15` alpha, which Safari 15 WebView drops
-            outright — on the desktop shell the strip had no ground at all. */}
-        <div className="mt-[22px] flex items-center gap-3 rounded-[var(--radius-xl)] border border-[var(--color-primary-fixed-dim)] bg-[var(--color-brand-soft)] px-[18px] py-[13px]">
-          <span aria-hidden="true" className="material-symbols-outlined shrink-0 text-[18px] text-[var(--color-on-brand-soft)]">schedule</span>
-          <span className="text-[13.5px] leading-[1.5] text-[var(--color-on-brand-soft)]">
-            {t('scheduledPage.desktopNotice')}
-          </span>
+        {/* Desktop-online notice: a standing condition, not a fault, so it is
+            the light info strip rather than a warning or the brand wash. */}
+        <div className="mt-5 flex items-center gap-2 rounded-[var(--radius-md)] bg-[var(--color-info-container)] px-3 py-2 text-[13px] leading-[1.5] text-[var(--color-on-info-container)]">
+          <Info size={14} strokeWidth={1.75} aria-hidden="true" className="shrink-0" />
+          <span>{t('scheduledPage.desktopNotice')}</span>
         </div>
 
         {/* Content */}
-        <div className="mt-[18px]">
+        <div className="mt-5">
           {!initialized && isLoading ? (
             <div className="flex items-center justify-center py-16">
-              <Spinner size={24} tone="brand" label={t('common.loading')} />
+              <Spinner size={20} tone="brand" label={t('common.loading')} />
             </div>
           ) : error && tasks.length === 0 ? (
             // Without this the store's error falls through to the empty state,
diff --git a/desktop/src/pages/Settings.tsx b/desktop/src/pages/Settings.tsx
index 68492a7c..005bb9c0 100644
--- a/desktop/src/pages/Settings.tsx
+++ b/desktop/src/pages/Settings.tsx
@@ -1,7 +1,26 @@
 import { H5Settings } from './settings/H5Settings'
 import { getDesktopHost } from '@/lib/desktopHost'
 import { useEffect, useRef } from 'react'
-import { useTranslation } from '../i18n'
+import {
+  BookOpen,
+  Bot,
+  Box,
+  ChartNoAxesColumn,
+  HeartPulse,
+  Info,
+  MessageSquare,
+  Mic,
+  MousePointer2,
+  PawPrint,
+  Plug,
+  Puzzle,
+  QrCode,
+  Server,
+  SlidersHorizontal,
+  SquareTerminal,
+  type LucideIcon,
+} from 'lucide-react'
+import { useTranslation, type TranslationKey } from '../i18n'
 import { SettingsPageHeader } from '@/components/settings/SettingsSection'
 import { AdapterSettings } from './AdapterSettings'
 import { useSkillStore } from '../stores/skillStore'
@@ -17,7 +36,7 @@ import { DiagnosticsSettings } from './DiagnosticsSettings'
 import { ActivitySettings } from './ActivitySettings'
 import { MemorySettings } from './MemorySettings'
 import { PetSettings } from '../features/pets/PetSettings'
-import { useUIStore } from '../stores/uiStore'
+import { useUIStore, type SettingsTab } from '../stores/uiStore'
 import { AgentManager } from '../components/settings/AgentManager'
 import { H5AccessSettings } from './settings/H5AccessSettings'
 import { GeneralSettings } from './settings/GeneralSettings'
@@ -29,6 +48,29 @@ export function Settings() {
   return getDesktopHost().isDesktop ? <DesktopSettings /> : <H5Settings />
 }
 
+type SettingsNavEntry = { tab: SettingsTab; icon: LucideIcon; label: TranslationKey }
+
+const SETTINGS_NAV: SettingsNavEntry[] = [
+  { tab: 'providers', icon: Server, label: 'settings.tab.providers' },
+  { tab: 'general', icon: SlidersHorizontal, label: 'settings.tab.general' },
+  { tab: 'voice', icon: Mic, label: 'settings.tab.voice' },
+  { tab: 'h5Access', icon: QrCode, label: 'settings.tab.h5Access' },
+  { tab: 'adapters', icon: MessageSquare, label: 'settings.tab.adapters' },
+  { tab: 'terminal', icon: SquareTerminal, label: 'settings.tab.terminal' },
+  { tab: 'mcp', icon: Plug, label: 'settings.tab.mcp' },
+  { tab: 'agents', icon: Bot, label: 'settings.tab.agents' },
+  { tab: 'skills', icon: Box, label: 'settings.tab.skills' },
+  { tab: 'memory', icon: BookOpen, label: 'settings.tab.memory' },
+  { tab: 'plugins', icon: Puzzle, label: 'settings.tab.plugins' },
+  { tab: 'pets', icon: PawPrint, label: 'settings.tab.pets' },
+  { tab: 'computerUse', icon: MousePointer2, label: 'settings.tab.computerUse' },
+  { tab: 'activity', icon: ChartNoAxesColumn, label: 'settings.tab.activity' },
+  { tab: 'diagnostics', icon: HeartPulse, label: 'settings.tab.diagnostics' },
+]
+
+/** Set apart below a rule, the way the reference rail ends. */
+const SETTINGS_NAV_ABOUT: SettingsNavEntry = { tab: 'about', icon: Info, label: 'settings.tab.about' }
+
 export function DesktopSettings() {
   const activeTab = useUIStore((s) => s.activeSettingsTab)
   const setActiveTab = useUIStore((s) => s.setActiveSettingsTab)
@@ -41,77 +83,64 @@ export function DesktopSettings() {
     useUIStore.getState().setPendingSettingsTab(null)
   }, [pendingSettingsTab, setActiveTab])
 
+  const navItem = ({ tab, icon, label }: SettingsNavEntry) => (
+    <TabButton key={tab} icon={icon} label={t(label)} active={activeTab === tab} onClick={() => setActiveTab(tab)} />
+  )
+
   return (
     <div className="flex-1 flex flex-col overflow-hidden bg-[var(--color-surface)]">
       <div className="flex-1 flex overflow-hidden">
-        {/* Tab navigation */}
-        {/* The rail keeps the Settings tab's 195px width for a same-width paper
-            handoff when that tab sits at the leading edge of the strip. It does
-            *not* chase the tab's live horizontal offset: the rail is page chrome,
-            not a geometric extension of a scrollable tab chip, so following
-            reorder/scroll lefts shoved the whole navigation mid-panel. Its
-            tighter trailing gutter keeps the Japanese "コンピューター操作"
-            clear at this width without moving the row contents left.
-
-            Paper, separated by the rule, the way every other secondary panel
-            in the app is (the workbench, the diff split). It used to be
-            `--color-surface-container-low`, which is the same value the tab
-            strip's trough resolves to — so the Settings tab, the one tab whose
-            content this rail *is*, was the only selected tab in the app whose
-            paper fill met a different colour at its bottom edge. It read as a
-            white card stranded on a grey panel. Nothing else changed to fix
-            it: the tab is right, this was the odd one out. */}
-        <div
+        {/* The rail sits on the page's own paper, separated by the rule, the
+            way every other secondary panel in the app is (the workbench, the
+            diff split). The Settings tab is filled with paper so its bottom
+            edge runs unbroken into the view it opens onto; a grey rail here
+            made it the one tab whose paper met a different colour. */}
+        <nav
           data-testid="settings-navigation"
-          className="w-[195px] flex-shrink-0 flex flex-col overflow-y-auto border-r border-[var(--color-border)] bg-[var(--color-surface)] py-4 pl-3 pr-1"
+          aria-label={t('settings.title')}
+          className="w-[216px] flex-shrink-0 flex flex-col overflow-y-auto border-r border-[var(--color-border)] bg-[var(--color-surface)] px-2.5 py-[18px]"
         >
-          <div className="flex-1 flex flex-col gap-0.5">
-            <TabButton icon="dns" label={t('settings.tab.providers')} active={activeTab === 'providers'} onClick={() => setActiveTab('providers')} />
-            <TabButton icon="tune" label={t('settings.tab.general')} active={activeTab === 'general'} onClick={() => setActiveTab('general')} />
-            <TabButton icon="mic" label={t('settings.tab.voice')} active={activeTab === 'voice'} onClick={() => setActiveTab('voice')} />
-            <TabButton icon="qr_code_2" label={t('settings.tab.h5Access')} active={activeTab === 'h5Access'} onClick={() => setActiveTab('h5Access')} />
-            <TabButton icon="chat" label={t('settings.tab.adapters')} active={activeTab === 'adapters'} onClick={() => setActiveTab('adapters')} />
-            <TabButton icon="terminal" label={t('settings.tab.terminal')} active={activeTab === 'terminal'} onClick={() => setActiveTab('terminal')} />
-            <TabButton icon="dns" label={t('settings.tab.mcp')} active={activeTab === 'mcp'} onClick={() => setActiveTab('mcp')} />
-            <TabButton icon="smart_toy" label={t('settings.tab.agents')} active={activeTab === 'agents'} onClick={() => setActiveTab('agents')} />
-            <TabButton icon="auto_awesome" label={t('settings.tab.skills')} active={activeTab === 'skills'} onClick={() => setActiveTab('skills')} />
-            <TabButton icon="history_edu" label={t('settings.tab.memory')} active={activeTab === 'memory'} onClick={() => setActiveTab('memory')} />
-            <TabButton icon="extension" label={t('settings.tab.plugins')} active={activeTab === 'plugins'} onClick={() => setActiveTab('plugins')} />
-            <TabButton icon="pets" label={t('settings.tab.pets')} active={activeTab === 'pets'} onClick={() => setActiveTab('pets')} />
-            <TabButton icon="mouse" label={t('settings.tab.computerUse')} active={activeTab === 'computerUse'} onClick={() => setActiveTab('computerUse')} />
-            <TabButton icon="monitoring" label={t('settings.tab.activity')} active={activeTab === 'activity'} onClick={() => setActiveTab('activity')} />
-            <TabButton icon="monitor_heart" label={t('settings.tab.diagnostics')} active={activeTab === 'diagnostics'} onClick={() => setActiveTab('diagnostics')} />
+          <div className="px-2.5 pb-2 text-xs font-semibold text-[var(--color-text-tertiary)]">{t('settings.title')}</div>
+          <div className="flex flex-col gap-px">
+            {SETTINGS_NAV.map(navItem)}
           </div>
-          <div className="mt-2 border-t border-[var(--color-border-separator)] pt-2">
-            <TabButton icon="info" label={t('settings.tab.about')} active={activeTab === 'about'} onClick={() => setActiveTab('about')} />
-          </div>
-        </div>
+          <div aria-hidden="true" className="mx-2.5 my-2 h-px shrink-0 bg-[var(--color-border)]" />
+          {navItem(SETTINGS_NAV_ABOUT)}
+        </nav>
 
-        {/* Tab content */}
-        <div className="flex-1 overflow-y-auto px-9 py-8">
-          {activeTab === 'providers' && <ProviderSettings />}
-          {activeTab === 'activity' && <ActivitySettings />}
-          {activeTab === 'general' && <GeneralSettings />}
-          {activeTab === 'voice' && <VoiceInputSettings />}
-          {activeTab === 'h5Access' && <H5AccessSettings />}
-          {activeTab === 'adapters' && <AdapterSettings />}
-          {activeTab === 'terminal' && <TerminalSettings showPreferences />}
-          {activeTab === 'mcp' && <McpSettings />}
-          {activeTab === 'agents' && <AgentManager />}
-          {activeTab === 'skills' && <SkillSettings />}
-          {activeTab === 'memory' && <MemorySettings />}
-          {activeTab === 'plugins' && <PluginSettings />}
-          {activeTab === 'pets' && <PetSettings />}
-          {activeTab === 'computerUse' && <ComputerUseSettings />}
-          {activeTab === 'diagnostics' && <DiagnosticsSettings />}
-          {activeTab === 'about' && <AboutSettings />}
+        {/* The page frame every pane shares — one width, one set of gutters —
+            so a pane never sets its own max-width. It is fluid up to 1120px:
+            at the common 1440px window it fills the column, and on a large
+            display it stops before rows stretch past reading distance. The old
+            700px cap left explorer-style panes (memory, skills) cramped in the
+            middle of an empty page. One width for every pane, so switching
+            panes never moves the header. */}
+        <div className="flex-1 min-w-0 overflow-y-auto [scrollbar-gutter:stable]">
+          <div data-testid="settings-page-frame" className="mx-auto w-full max-w-[1120px] px-10 pt-9 pb-[72px]">
+            {activeTab === 'providers' && <ProviderSettings />}
+            {activeTab === 'activity' && <ActivitySettings />}
+            {activeTab === 'general' && <GeneralSettings />}
+            {activeTab === 'voice' && <VoiceInputSettings />}
+            {activeTab === 'h5Access' && <H5AccessSettings />}
+            {activeTab === 'adapters' && <AdapterSettings />}
+            {activeTab === 'terminal' && <TerminalSettings showPreferences />}
+            {activeTab === 'mcp' && <McpSettings />}
+            {activeTab === 'agents' && <AgentManager />}
+            {activeTab === 'skills' && <SkillSettings />}
+            {activeTab === 'memory' && <MemorySettings />}
+            {activeTab === 'plugins' && <PluginSettings />}
+            {activeTab === 'pets' && <PetSettings />}
+            {activeTab === 'computerUse' && <ComputerUseSettings />}
+            {activeTab === 'diagnostics' && <DiagnosticsSettings />}
+            {activeTab === 'about' && <AboutSettings />}
+          </div>
         </div>
       </div>
     </div>
   )
 }
 
-function TabButton({ icon, label, active, onClick }: { icon: string; label: string; active: boolean; onClick: () => void }) {
+function TabButton({ icon: Icon, label, active, onClick }: { icon: LucideIcon; label: string; active: boolean; onClick: () => void }) {
   const ref = useRef<HTMLButtonElement>(null)
 
   // The rail is taller than its viewport, and Settings remounts whenever the
@@ -126,22 +155,21 @@ function TabButton({ icon, label, active, onClick }: { icon: string; label: stri
   return (
     <button
       ref={ref}
+      type="button"
       onClick={onClick}
       aria-current={active ? 'page' : undefined}
-      // `ring-offset` has to name the rail's own fill — it is painted, not
-      // transparent, so it tracks whatever the rail is.
-      className={`w-full flex items-center gap-2.5 rounded-[var(--radius-md)] py-2 pl-3 pr-2 text-[13.5px] text-left transition-[background-color,color] duration-150 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface)] ${
+      className={`flex h-[30px] w-full shrink-0 items-center gap-2.5 rounded-[var(--radius-sm)] px-2.5 text-left text-[13px] transition-[background-color,color] duration-150 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] ${
         active
-          ? 'bg-[var(--color-surface-hover)] text-[var(--color-text-primary)] font-medium'
+          ? 'bg-[var(--color-surface-selected)] font-medium text-[var(--color-text-primary)]'
           : 'text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)]'
       }`}
     >
-      <span
-        className={`material-symbols-outlined text-[18px] ${active ? 'text-[var(--color-brand)]' : 'text-[var(--color-text-tertiary)]'}`}
+      <Icon
+        size={15}
+        strokeWidth={1.75}
         aria-hidden="true"
-      >
-        {icon}
-      </span>
+        className={`shrink-0 ${active ? 'text-[var(--color-brand)]' : 'text-[var(--color-text-tertiary)]'}`}
+      />
       <span className="min-w-0 truncate">{label}</span>
     </button>
   )
@@ -164,8 +192,9 @@ function SkillSettings() {
   return (
     <div className="w-full min-w-0">
       <SettingsPageHeader
-        title={t('settings.skills.title')}
+        title={t('settings.tab.skills')}
         description={t('settings.skills.description')}
+        className="mb-5"
       />
       <SkillList />
     </div>
@@ -187,8 +216,9 @@ function PluginSettings() {
   return (
     <div className="w-full min-w-0">
       <SettingsPageHeader
-        title={t('settings.plugins.title')}
+        title={t('settings.tab.plugins')}
         description={t('settings.plugins.description')}
+        className="mb-5"
       />
       <PluginList />
     </div>
diff --git a/desktop/src/pages/SettingsNavigation.test.tsx b/desktop/src/pages/SettingsNavigation.test.tsx
index 20e8fb88..e0bfdb1a 100644
--- a/desktop/src/pages/SettingsNavigation.test.tsx
+++ b/desktop/src/pages/SettingsNavigation.test.tsx
@@ -75,7 +75,7 @@ describe('Settings section navigation', () => {
     render(<Settings />)
 
     const rail = screen.getByRole('button', { name: 'Model Settings' })
-      .closest('div[class*="w-[195px]"]')
+      .closest('[data-testid="settings-navigation"]')
 
     // This rail is what sits directly under the Settings tab, and the tab is
     // filled with paper precisely so its bottom edge runs unbroken into the
@@ -94,4 +94,20 @@ describe('Settings section navigation', () => {
     // to shove this rail mid-panel whenever the tab was not leading.
     expect((rail as HTMLElement).style.marginLeft).toBe('')
   })
+
+  it('gives every pane the same wide, fluid page frame', () => {
+    render(<Settings />)
+
+    const frameFor = () => screen.getByTestId('settings-page-frame')
+    // The old 700px cap left explorer-style panes (memory, skills) squeezed
+    // into the middle of an empty page. The frame now fills the column up to
+    // 1120px and is the only place a pane's width is set.
+    expect(frameFor()).toHaveClass('w-full', 'max-w-[1120px]')
+    expect(frameFor().className).not.toContain('max-w-[700px]')
+
+    // Switching panes must not move the header, so the frame is shared.
+    const providersClass = frameFor().className
+    fireEvent.click(screen.getByRole('button', { name: 'Diagnostics' }))
+    expect(frameFor().className).toBe(providersClass)
+  })
 })
diff --git a/desktop/src/pages/SubagentRunPage.test.tsx b/desktop/src/pages/SubagentRunPage.test.tsx
index c2ec198a..a09203cb 100644
--- a/desktop/src/pages/SubagentRunPage.test.tsx
+++ b/desktop/src/pages/SubagentRunPage.test.tsx
@@ -2222,7 +2222,7 @@ describe('SubagentRunPage', () => {
     // A running run plays open, so its rows are already there — no need to
     // unfold the summary first, and clicking it here would fold them away.
     expect(await screen.findByTestId('activity-group')).toHaveAttribute('data-expanded', 'true')
-    fireEvent.click(screen.getByRole('button', { name: /Bash.*pwd/i }))
+    fireEvent.click(screen.getByRole('button', { name: /Run.*pwd/i }))
     expect(document.querySelector('[data-shell-output]')).toHaveTextContent('/workspace')
 
     await waitFor(() => expect(subagentsApi.getRunByTool).toHaveBeenCalledTimes(2), { timeout: 2500 })
diff --git a/desktop/src/pages/SubagentRunPage.tsx b/desktop/src/pages/SubagentRunPage.tsx
index efe13a13..2421d385 100644
--- a/desktop/src/pages/SubagentRunPage.tsx
+++ b/desktop/src/pages/SubagentRunPage.tsx
@@ -775,10 +775,10 @@ function AgentSessionView({
         leading={(
           <Button
             variant="ghost"
-            size="base"
+            size="sm"
             onClick={onBack}
-            icon={<ArrowLeft size={15} strokeWidth={2} aria-hidden="true" />}
-            className="shrink-0"
+            icon={<ArrowLeft size={14} strokeWidth={1.75} aria-hidden="true" />}
+            className="mt-px shrink-0"
           >
             {backLabel}
           </Button>
@@ -804,10 +804,10 @@ function AgentSessionView({
           <>
             {hasVisibleActivity ? <SessionActivityButton sessionId={sessionId} /> : null}
             <IconButton
-              icon={<RefreshCw size={15} strokeWidth={2.2} aria-hidden="true" className={loading ? 'animate-spin' : undefined} />}
+              icon={<RefreshCw size={16} strokeWidth={1.75} aria-hidden="true" className={loading ? 'animate-spin' : undefined} />}
               label={refreshLabel}
               showTooltip={false}
-              size="md"
+              size="sm"
               tone="muted"
               onClick={onRefresh}
               disabled={loading}
@@ -820,7 +820,7 @@ function AgentSessionView({
         }]}
       >
         {details ? (
-          <p className="mt-1 flex min-w-0 flex-wrap gap-x-2 text-[11px] text-[var(--color-text-tertiary)]">
+          <p className="mt-1 flex min-w-0 flex-wrap gap-x-2 text-xs text-[var(--color-text-tertiary)]">
             {details}
           </p>
         ) : null}
@@ -830,7 +830,7 @@ function AgentSessionView({
         <div role="status" className="flex flex-1 items-center justify-center text-sm text-[var(--color-text-tertiary)]">{loadingLabel}</div>
       ) : null}
       {error ? (
-        <div role="alert" className="mx-5 mt-4 rounded-[var(--radius-md)] border border-[var(--color-error)] bg-[var(--color-error-container)] px-3 py-2 text-sm text-[var(--color-on-error-container)]">
+        <div role="alert" className="mx-auto mt-4 w-[calc(100%-40px)] max-w-[var(--chat-content-max-width)] rounded-[var(--radius-md)] bg-[var(--color-error-container)] px-3 py-2 text-[13px] text-[var(--color-on-error-container)]">
           {error}
         </div>
       ) : null}
@@ -848,7 +848,7 @@ function AgentSessionView({
       {ready && !canSendMessage ? (
         <p
           data-testid={readOnlyTestId}
-          className="shrink-0 border-t border-[var(--color-border)] px-5 py-3 text-center text-[11.5px] text-[var(--color-text-tertiary)]"
+          className="shrink-0 border-t border-[var(--color-border)] px-5 py-3 text-center text-xs text-[var(--color-text-tertiary)]"
         >
           {readOnlyLabel}
         </p>
@@ -884,7 +884,8 @@ function StatusBadge({ status, t }: { status: SubagentRunStatus; t: TranslationF
 function statusTone(status: SubagentRunStatus): BadgeTone {
   if (status === 'completed') return 'success'
   if (status === 'failed' || status === 'stopped') return 'danger'
-  if (status === 'running') return 'brand'
+  // Running is a state, and states are never the brand colour (spec §1).
+  if (status === 'running') return 'info'
   return 'neutral'
 }
 
diff --git a/desktop/src/pages/TerminalSettings.test.tsx b/desktop/src/pages/TerminalSettings.test.tsx
index 1d1382e7..66208316 100644
--- a/desktop/src/pages/TerminalSettings.test.tsx
+++ b/desktop/src/pages/TerminalSettings.test.tsx
@@ -242,7 +242,7 @@ describe('TerminalSettings', () => {
     expect(toolbar.className).toContain('bg-[var(--color-terminal-header)]')
     const panel = toolbar.parentElement
     expect(panel?.className).toContain('bg-[var(--color-terminal-bg)]')
-    expect(panel?.className).toContain('rounded-[var(--radius-xl)]')
+    expect(panel?.className).toContain('rounded-[var(--radius-lg)]')
     expect(panel).toContainElement(screen.getByTestId('settings-terminal-frame'))
   })
 
@@ -272,6 +272,26 @@ describe('TerminalSettings', () => {
     expect(screen.getByText('Running')).toBeInTheDocument()
   })
 
+  it('names the settings page once, in its page header rather than the terminal toolbar', async () => {
+    terminalMocks.available = true
+
+    render(<TerminalSettings showPreferences />)
+
+    await waitFor(() => expect(terminalMocks.spawn).toHaveBeenCalled())
+    // One "Terminal" heading: the page header's. The toolbar keeps the cwd and
+    // status, and the setup guidance moves from the info tooltip to the
+    // page description.
+    expect(screen.getByRole('heading', { name: 'Terminal' })).toBeInTheDocument()
+    const toolbar = screen.getByTestId('settings-terminal-toolbar')
+    expect(toolbar.querySelector('h2')).toBeNull()
+    expect(toolbar).toHaveTextContent('/Users/test')
+    expect(screen.getByText(/plugin, skill, and MCP setup/)).toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'Terminal setup help' })).not.toBeInTheDocument()
+    // A bordered panel, without the old lifted shadow.
+    expect(toolbar.parentElement?.className).toContain('border')
+    expect(toolbar.parentElement?.className).not.toContain('shadow-')
+  })
+
   it('drops the ink chrome when there is no session to frame', () => {
     render(<TerminalSettings />)
 
@@ -590,7 +610,7 @@ describe('TerminalSettings', () => {
     render(<TerminalSettings showPreferences />)
 
     await screen.findByPlaceholderText('Bash Path')
-    fireEvent.click(screen.getByText('folder_open').closest('button')!)
+    fireEvent.click(screen.getByRole('button', { name: 'Browse for a Bash executable' }))
 
     expect(await screen.findByDisplayValue('C:\\Program Files\\Git\\bin\\bash.exe')).toBeInTheDocument()
     expect(open).toHaveBeenCalledWith({
diff --git a/desktop/src/pages/TerminalSettings.tsx b/desktop/src/pages/TerminalSettings.tsx
index 4cd7b3dc..00a2e126 100644
--- a/desktop/src/pages/TerminalSettings.tsx
+++ b/desktop/src/pages/TerminalSettings.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useId, useMemo, useRef, useState, type KeyboardEvent, type WheelEvent } from 'react'
-import { Info } from 'lucide-react'
+import { ChevronDown, CircleAlert, Eraser, ExternalLink, FolderOpen, Info, Monitor, Plus, RotateCcw, SquareTerminal, X } from 'lucide-react'
 import { useTranslation, type TranslationKey } from '../i18n'
 import { terminalApi } from '../api/terminal'
 import { useSettingsStore } from '../stores/settingsStore'
@@ -11,6 +11,13 @@ import { Button } from '@/components/ui/Button'
 import { IconButton, type IconButtonSurface } from '@/components/ui/IconButton'
 import { EmptyState } from '@/components/ui/EmptyState'
 import { StatusDot, type Tone } from '@/components/ui/Badge'
+import {
+  SettingsBlock,
+  SettingsGroup,
+  SettingsPageHeader,
+  SettingsRow,
+  SettingsSection,
+} from '@/components/settings/SettingsSection'
 import type { DesktopTerminalStartupShell } from '../types/settings'
 import { getDesktopHost } from '../lib/desktopHost'
 import {
@@ -496,10 +503,14 @@ export function TerminalSettings({
     }
   }
 
-  // The ink panel is only drawn when there is a session behind it; the page
-  // tokens are inverted against the terminal ground, so anything sitting on it
-  // has to switch together.
+  // The terminal panel is only drawn when there is a session behind it; the
+  // terminal palette follows its own tokens, so anything sitting on it has to
+  // switch together.
   const hasTerminalPanel = status !== 'unavailable'
+  // The Settings → Terminal page. The same component also backs the workspace
+  // terminal tab (`workspace`) and the docked bottom panel (`docked`), which own
+  // their own chrome, so the page header and width only apply here.
+  const settingsPage = showPreferences && !workspace && !docked
   const terminalHeaderTitleClass = hasTerminalPanel
     ? 'text-[var(--color-terminal-fg)]'
     : 'text-[var(--color-text-primary)]'
@@ -507,38 +518,46 @@ export function TerminalSettings({
     ? 'text-[var(--color-terminal-muted)]'
     : 'text-[var(--color-text-tertiary)]'
   const terminalHeaderSurface: IconButtonSurface = hasTerminalPanel ? 'terminal' : 'default'
+  const actionIconSize = docked ? 14 : 16
+  const selectedShell = shellItems.find((item) => item.value === startupShell)
 
   return (
-    <div className={`flex h-full flex-col overflow-hidden ${
+    <div className={
       docked
-        ? 'min-h-0 bg-[var(--color-surface-container-lowest)]'
+        ? 'flex h-full min-h-0 flex-col overflow-hidden bg-[var(--color-surface-container-lowest)]'
         : workspace
-          ? 'min-h-0 bg-[var(--color-surface)] px-5 py-4'
-          : 'min-h-[min(720px,calc(100vh-8rem))]'
-    }`}>
+          ? 'flex h-full min-h-0 flex-col overflow-hidden bg-[var(--color-surface)] px-5 py-4'
+          : settingsPage
+            // Settings.tsx owns the page frame (width, gutters); this is just the column.
+            ? 'flex min-w-0 flex-col'
+            : 'flex h-full min-h-[min(720px,calc(100vh-8rem))] flex-col overflow-hidden'
+    }>
+      {settingsPage && (
+        <SettingsPageHeader
+          title={t('settings.terminal.title')}
+          description={t('settings.terminal.description')}
+        />
+      )}
+
       {error && (
-        <div className="mb-3 rounded-[var(--radius-md)] border border-[var(--color-error)] bg-[var(--color-error-container)] px-3 py-2 text-sm text-[var(--color-on-error-container)]">
-          {error}
+        <div className={`${settingsPage ? 'mt-6' : 'mb-3'} flex items-start gap-2 rounded-[var(--radius-md)] bg-[var(--color-error-container)] px-3 py-2 text-xs leading-[1.5] text-[var(--color-on-error-container)]`}>
+          <CircleAlert size={14} strokeWidth={1.75} aria-hidden="true" className="mt-px shrink-0" />
+          <span className="min-w-0 break-words">{error}</span>
         </div>
       )}
 
       {showPreferences && isWindows && (
         <>
-          <div className="mb-4 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)] p-4">
-            <div className="flex flex-col gap-3">
-              <div>
-                <h3 className="text-sm font-semibold text-[var(--color-text-primary)]" style={{ fontFamily: 'var(--font-headline)' }}>
-                  {t('settings.terminal.preferencesTitle')}
-                </h3>
-                <p className="mt-1 text-sm text-[var(--color-text-secondary)]">
-                  {t('settings.terminal.preferencesBody')}
-                </p>
-              </div>
-
-              <div className="flex flex-col gap-2">
-                <span className="text-sm font-medium text-[var(--color-text-primary)]">
-                  {t('settings.terminal.startupShell')}
-                </span>
+          <SettingsSection
+            title={t('settings.terminal.preferencesTitle')}
+            description={t('settings.terminal.preferencesBody')}
+          >
+            <SettingsGroup>
+              <SettingsRow
+                title={t('settings.terminal.startupShell')}
+                description={selectedShell?.description}
+                layout="inline"
+              >
                 <Dropdown<DesktopTerminalStartupShell>
                   items={shellItems}
                   value={startupShell}
@@ -547,113 +566,117 @@ export function TerminalSettings({
                     setPreferencesError(null)
                     setPreferencesSaved(false)
                   }}
-                  width="100%"
+                  width={300}
+                  align="right"
                   trigger={
                     // `flex-1` on the label, not `justify-between`: Button pins
                     // `justify-center`, and a className override of it would win
                     // or lose on stylesheet order rather than on class order.
-                    <Button variant="secondary" size="lg" block>
+                    <Button variant="secondary" size="base" className="w-[220px]">
                       <span className="flex-1 truncate text-left font-normal text-[var(--color-text-primary)]">
-                        {shellItems.find((item) => item.value === startupShell)?.label ?? startupShell}
+                        {selectedShell?.label ?? startupShell}
                       </span>
-                      <span className="material-symbols-outlined text-[18px] text-[var(--color-text-tertiary)]">expand_more</span>
+                      <ChevronDown size={14} strokeWidth={1.75} aria-hidden="true" className="shrink-0 text-[var(--color-text-tertiary)]" />
                     </Button>
                   }
                 />
-              </div>
+              </SettingsRow>
 
               {startupShell === 'custom' && (
-                <Input
-                  label={t('settings.terminal.customPath')}
-                  placeholder={t('settings.terminal.customPathPlaceholder')}
-                  value={customShellPath}
-                  onChange={(event) => {
-                    setCustomShellPath(event.target.value)
-                    setPreferencesError(null)
-                    setPreferencesSaved(false)
-                  }}
-                  error={preferencesError ?? undefined}
-                />
+                <SettingsBlock>
+                  <Input
+                    label={t('settings.terminal.customPath')}
+                    placeholder={t('settings.terminal.customPathPlaceholder')}
+                    value={customShellPath}
+                    size="md"
+                    className="font-mono"
+                    onChange={(event) => {
+                      setCustomShellPath(event.target.value)
+                      setPreferencesError(null)
+                      setPreferencesSaved(false)
+                    }}
+                    error={preferencesError ?? undefined}
+                  />
+                </SettingsBlock>
               )}
 
-              {preferencesError && startupShell !== 'custom' && (
-                <p className="text-xs text-[var(--color-error)]">{preferencesError}</p>
-              )}
-
-              <div className="flex flex-wrap items-center gap-3">
+              <SettingsBlock className="flex min-h-[52px] flex-wrap items-center justify-end gap-3">
+                {preferencesError && startupShell !== 'custom' && (
+                  <p className="mr-auto text-xs text-[var(--color-error)]">{preferencesError}</p>
+                )}
+                {preferencesSaved && (
+                  <span className="text-xs text-[var(--color-text-tertiary)]">
+                    {t('settings.terminal.saveShellSuccess')}
+                  </span>
+                )}
                 <Button
                   type="button"
-                  size="sm"
+                  size="base"
                   loading={preferencesSaving}
                   onClick={() => void savePreferences()}
                 >
                   {t('settings.terminal.saveShell')}
                 </Button>
-                {preferencesSaved && (
-                  <span className="text-xs text-[var(--color-text-secondary)]">
-                    {t('settings.terminal.saveShellSuccess')}
-                  </span>
-                )}
-              </div>
-            </div>
-          </div>
+              </SettingsBlock>
+            </SettingsGroup>
+          </SettingsSection>
           <BashPathSettings isTauri={terminalApi.isAvailable()} />
         </>
       )}
 
-      {/* The workspace already owns a tab strip; only standalone terminals need window chrome. */}
+      {/* The workspace already owns a tab strip; only standalone terminals need a frame. */}
       <div
         className={[
-          'flex min-h-0 flex-1 flex-col overflow-hidden',
-          docked ? '' : `rounded-[var(--radius-xl)] border ${hasTerminalPanel ? 'border-[var(--color-terminal-border)] shadow-[var(--shadow-card)]' : 'border-[var(--color-border)]'}`,
+          'flex flex-col overflow-hidden',
+          settingsPage ? 'mt-7 h-[min(560px,calc(100vh-14rem))] min-h-[320px]' : 'min-h-0 flex-1',
+          docked ? '' : `rounded-[var(--radius-lg)] border ${hasTerminalPanel ? 'border-[var(--color-terminal-border)]' : 'border-[var(--color-border)]'}`,
           hasTerminalPanel ? 'bg-[var(--color-terminal-bg)]' : 'bg-[var(--color-surface-container-lowest)]',
         ].join(' ')}
       >
         {!compactHeader && <div
           data-testid="settings-terminal-toolbar"
-          className={`flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1.5 border-b px-3.5 ${
-            docked ? 'min-h-9 py-1.5' : 'min-h-11 py-2'
+          className={`flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1.5 border-b px-3 py-1.5 ${
+            docked ? 'min-h-9' : 'min-h-10'
           } ${
             hasTerminalPanel
               ? 'border-[var(--color-terminal-border)] bg-[var(--color-terminal-header)]'
               : 'border-[var(--color-border)] bg-[var(--color-surface-container-low)]'
           }`}
         >
-          <div className="flex min-w-0 flex-1 items-center gap-2.5">
-            {!docked && <span className="flex shrink-0 items-center gap-1.5" aria-hidden="true">
-              <span className="h-2.5 w-2.5 rounded-full bg-[var(--color-terminal-danger)]" />
-              <span className="h-2.5 w-2.5 rounded-full bg-[var(--color-terminal-warning)]" />
-              <span className="h-2.5 w-2.5 rounded-full bg-[var(--color-terminal-accent)]" />
-            </span>}
-            {!docked && <h2
-              className={`${docked ? 'text-[12.5px]' : 'text-[13px]'} shrink-0 font-semibold ${terminalHeaderTitleClass}`}
-              style={{ fontFamily: 'var(--font-headline)' }}
-            >
+          <div className="flex min-w-0 flex-1 items-center gap-2">
+            {!docked && (
+              <SquareTerminal size={14} strokeWidth={1.75} aria-hidden="true" className={`shrink-0 ${terminalHeaderMetaClass}`} />
+            )}
+            {/* The settings page names the terminal in its page header already. */}
+            {!docked && !settingsPage && <h2 className={`shrink-0 text-[13px] font-medium ${terminalHeaderTitleClass}`}>
               {t('settings.terminal.title')}
             </h2>}
             {shellInfo && (
-              <div className={`flex min-w-0 items-center gap-1.5 font-mono text-[11.5px] ${terminalHeaderMetaClass}`}>
+              <div className={`flex min-w-0 items-center gap-1.5 font-mono text-[11px] ${terminalHeaderMetaClass}`}>
                 <span className="min-w-0 truncate">{shellInfo.cwd}</span>
                 <span className="shrink-0">·</span>
                 <span className="shrink-0">{shellInfo.shell}</span>
               </div>
             )}
-            <span className={`inline-flex shrink-0 items-center gap-1.5 text-[11.5px] ${terminalHeaderMetaClass}`}>
+            <span className={`inline-flex shrink-0 items-center gap-1.5 text-xs ${terminalHeaderMetaClass}`}>
               <StatusDot tone={STATUS_TONE[status]} pulse={status === 'running'} />
               {t(STATUS_LABEL_KEYS[status])}
             </span>
             {/* Info lives on the left: its tooltip is anchored to the icon's
                 left edge and opens down-right, so from here it always lands
-                inside the panel instead of being clipped by the right edge. */}
-            <span className="inline-flex shrink-0 items-center pl-1">
-              <TerminalHelpHint compact={docked} surface={terminalHeaderSurface} />
-            </span>
+                inside the panel instead of being clipped by the right edge.
+                The settings page shows the same guidance as its description. */}
+            {!settingsPage && (
+              <span className="inline-flex shrink-0 items-center">
+                <TerminalHelpHint compact={docked} surface={terminalHeaderSurface} />
+              </span>
+            )}
           </div>
 
           <div className="flex shrink-0 items-center gap-0.5">
             {onOpenInTab && (
               <IconButton
-                icon="open_in_new"
+                icon={<ExternalLink size={actionIconSize} strokeWidth={1.75} aria-hidden="true" />}
                 label={t('terminal.openInTab')}
                 size={docked ? 'sm' : 'md'}
                 tone="muted"
@@ -663,7 +686,7 @@ export function TerminalSettings({
             )}
             {onNewTerminal && (
               <IconButton
-                icon="add"
+                icon={<Plus size={actionIconSize} strokeWidth={1.75} aria-hidden="true" />}
                 label={t('terminal.newTab')}
                 size={docked ? 'sm' : 'md'}
                 tone="muted"
@@ -672,7 +695,7 @@ export function TerminalSettings({
               />
             )}
             <IconButton
-              icon="mop"
+              icon={<Eraser size={actionIconSize} strokeWidth={1.75} aria-hidden="true" />}
               label={t('settings.terminal.clear')}
               size={docked ? 'sm' : 'md'}
               tone="muted"
@@ -681,7 +704,7 @@ export function TerminalSettings({
               onClick={clearTerminal}
             />
             <IconButton
-              icon="restart_alt"
+              icon={<RotateCcw size={actionIconSize} strokeWidth={1.75} aria-hidden="true" />}
               label={t('settings.terminal.restart')}
               size={docked ? 'sm' : 'md'}
               tone="muted"
@@ -691,7 +714,7 @@ export function TerminalSettings({
             />
             {onClose && (
               <IconButton
-                icon="close"
+                icon={<X size={actionIconSize} strokeWidth={1.75} aria-hidden="true" />}
                 label={t('terminal.closePanel')}
                 showTooltip={false}
                 size={docked ? 'sm' : 'md'}
@@ -713,7 +736,8 @@ export function TerminalSettings({
           <EmptyState
             className="flex-1"
             size="md"
-            icon={<span className="material-symbols-outlined text-[20px]" aria-hidden="true">desktop_windows</span>}
+            variant="plain"
+            icon={<Monitor size={18} strokeWidth={1.75} aria-hidden="true" />}
             title={t('settings.terminal.unavailableTitle')}
             description={t('settings.terminal.unavailableBody')}
           />
@@ -824,7 +848,7 @@ function TerminalHelpHint({
           A native `title` would duplicate it and, per the a11y baseline, tooltips
           are wired with aria-describedby rather than becoming the accessible name. */}
       <IconButton
-        icon={<Info className={compact ? 'h-3.5 w-3.5' : 'h-4 w-4'} aria-hidden="true" strokeWidth={2.2} />}
+        icon={<Info size={compact ? 12 : 14} aria-hidden="true" strokeWidth={compact ? 2 : 1.75} />}
         label={t('settings.terminal.infoLabel')}
         showTooltip={false}
         size={compact ? 'xs' : 'sm'}
@@ -841,7 +865,7 @@ function TerminalHelpHint({
       <span
         id={tooltipId}
         role="tooltip"
-        className={`${open ? 'visible opacity-100' : 'invisible opacity-0'} absolute left-0 top-full z-30 mt-2 w-[min(340px,calc(100vw-3rem))] rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface-container-high)] px-3 py-2 text-left text-xs leading-5 text-[var(--color-text-secondary)] shadow-[var(--shadow-dropdown)] transition-opacity group-hover:visible group-hover:opacity-100 group-focus-within:visible group-focus-within:opacity-100`}
+        className={`${open ? 'visible opacity-100' : 'invisible opacity-0'} absolute left-0 top-full z-[var(--z-tooltip)] mt-2 w-[min(340px,calc(100vw-3rem))] rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] px-3 py-2 text-left text-xs leading-5 text-[var(--color-text-secondary)] shadow-[var(--shadow-dropdown)] transition-opacity group-hover:visible group-hover:opacity-100 group-focus-within:visible group-focus-within:opacity-100`}
       >
         {t('settings.terminal.description')}
       </span>
@@ -852,7 +876,7 @@ function TerminalHelpHint({
 const STATUS_TONE: Record<TerminalStatus, Tone> = {
   running: 'success',
   error: 'danger',
-  starting: 'warning',
+  starting: 'info',
   idle: 'neutral',
   exited: 'neutral',
   unavailable: 'neutral',
@@ -928,48 +952,51 @@ function BashPathSettings({ isTauri }: { isTauri: boolean }) {
   if (!isTauri) return null
 
   return (
-    <div className="mb-3 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)] px-4 py-3">
-      <label className="mb-1.5 block text-sm font-medium text-[var(--color-text-primary)]">
-        {t('settings.terminal.bashPathLabel')}
-      </label>
-      <p className="mb-2 text-xs text-[var(--color-text-tertiary)]">
-        {t('settings.terminal.bashPathDescription')}
-      </p>
-      <div className="flex gap-2">
-        <input
-          type="text"
-          value={bashPath || ''}
-          onChange={(e) => { setBashPath(e.target.value); setInvalid(false); setSaved(false) }}
-          placeholder={t('settings.terminal.bashPathLabel')}
-          className="flex-1 rounded-[var(--radius-sm)] border border-[var(--color-border)] bg-[var(--color-surface)] px-3 py-1.5 text-sm font-mono text-[var(--color-text-primary)] outline-none placeholder:text-[var(--color-text-tertiary)] focus:border-[var(--color-border-focus)]"
-        />
-        <IconButton
-          icon="folder_open"
-          label={t('settings.terminal.bashPathBrowse')}
-          showTooltip={false}
-          size="md"
-          tone="secondary"
-          bordered
-          className="w-10"
-          onClick={handleBrowse}
-        />
-        <Button variant="primary" size="base" onClick={handleSave} disabled={saving}>
-          {saved ? t('settings.terminal.bashPathSaved') : t('settings.terminal.bashPathSave')}
-        </Button>
-        <Button
-          variant="secondary"
-          size="base"
-          onClick={handleReset}
-          disabled={saving || bashPath === null}
-        >
-          {t('settings.terminal.bashPathReset')}
-        </Button>
-      </div>
-      {invalid && (
-        <p className="mt-1.5 text-xs text-[var(--color-error)]">
-          {t('settings.terminal.bashPathInvalid')}
-        </p>
-      )}
-    </div>
+    <SettingsSection
+      title={t('settings.terminal.bashPathLabel')}
+      description={t('settings.terminal.bashPathDescription')}
+    >
+      <SettingsGroup>
+        <SettingsBlock>
+          <div className="flex flex-wrap items-center gap-2">
+            <Input
+              type="text"
+              size="md"
+              containerClassName="min-w-[200px] flex-1"
+              className="font-mono"
+              aria-label={t('settings.terminal.bashPathLabel')}
+              value={bashPath || ''}
+              onChange={(e) => { setBashPath(e.target.value); setInvalid(false); setSaved(false) }}
+              placeholder={t('settings.terminal.bashPathLabel')}
+            />
+            <IconButton
+              icon={<FolderOpen size={16} strokeWidth={1.75} aria-hidden="true" />}
+              label={t('settings.terminal.bashPathBrowse')}
+              showTooltip={false}
+              size="md"
+              tone="secondary"
+              bordered
+              onClick={handleBrowse}
+            />
+            <Button variant="primary" size="base" onClick={handleSave} disabled={saving}>
+              {saved ? t('settings.terminal.bashPathSaved') : t('settings.terminal.bashPathSave')}
+            </Button>
+            <Button
+              variant="secondary"
+              size="base"
+              onClick={handleReset}
+              disabled={saving || bashPath === null}
+            >
+              {t('settings.terminal.bashPathReset')}
+            </Button>
+          </div>
+          {invalid && (
+            <p className="mt-2 text-xs text-[var(--color-error)]">
+              {t('settings.terminal.bashPathInvalid')}
+            </p>
+          )}
+        </SettingsBlock>
+      </SettingsGroup>
+    </SettingsSection>
   )
 }
diff --git a/desktop/src/pages/settings/AboutSettings.tsx b/desktop/src/pages/settings/AboutSettings.tsx
index 67c9b204..6dcc88b3 100644
--- a/desktop/src/pages/settings/AboutSettings.tsx
+++ b/desktop/src/pages/settings/AboutSettings.tsx
@@ -1,9 +1,18 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, type ReactNode } from 'react'
+import { ChevronDown, ChevronUp, ExternalLink, MessageSquareWarning, QrCode } from 'lucide-react'
 import { useSettingsStore } from '../../stores/settingsStore'
 import { useTranslation } from '../../i18n'
 import { Input } from '@/components/ui/Input'
 import { Button } from '@/components/ui/Button'
-import { Card } from '@/components/ui/Card'
+import { Badge } from '@/components/ui/Badge'
+import { SegmentedControl } from '@/components/ui/SegmentedControl'
+import {
+  SettingsBlock,
+  SettingsGroup,
+  SettingsPageHeader,
+  SettingsRow,
+  SettingsSection,
+} from '@/components/settings/SettingsSection'
 import type { UpdateProxyMode } from '../../types/settings'
 import { MarkdownRenderer } from '../../components/markdown/MarkdownRenderer'
 import { useUpdateStore } from '../../stores/updateStore'
@@ -153,43 +162,62 @@ export function AboutSettings() {
     return t('update.idle')
   })()
 
+  const selectedUpdateProxyMode = updateProxyModes.find((mode) => mode.value === updateProxyDraft.mode)
+
   return (
-    <div className="w-full min-w-0 max-w-2xl mx-auto flex flex-col items-center py-6">
-      {/* Logo + App Name + Version */}
-      <BrandSeal size="xl" className="mb-4" />
-      <h1 className="text-xl font-bold text-[var(--color-text-primary)]" style={{ fontFamily: 'var(--font-headline)' }}>Claude Code Haha</h1>
-      {version && (
-        <div className="mt-1 flex items-center gap-2 text-xs text-[var(--color-text-tertiary)]">
-          <span>{t('settings.about.version')} {version}</span>
-          <span className="text-[var(--color-border)]">·</span>
-          <Button variant="link" size="xs" onClick={() => openUrl(GITHUB_RELEASES)}>
-            {t('settings.about.changelog')}
-          </Button>
-        </div>
-      )}
+    <div className="w-full min-w-0">
+      <SettingsPageHeader title={t('settings.tab.about')} />
 
-      {/* GitHub Repo */}
-      <div className="mt-6 w-full">
-        <button
+      <SettingsGroup className="mt-7">
+        {/* Product identity */}
+        <SettingsBlock className="flex items-center gap-4 py-4">
+          <BrandSeal size="lg" />
+          <div className="min-w-0 flex-1">
+            <div className="text-[15px] font-semibold text-[var(--color-text-primary)]">Claude Code Haha</div>
+            {version && (
+              <div className="mt-0.5 flex items-center gap-2 text-xs text-[var(--color-text-tertiary)]">
+                <span>{t('settings.about.version')} {version}</span>
+                <span aria-hidden="true">·</span>
+                <button
+                  type="button"
+                  onClick={() => openUrl(GITHUB_RELEASES)}
+                  className="font-medium text-[var(--color-text-accent)] hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]"
+                >
+                  {t('settings.about.changelog')}
+                </button>
+              </div>
+            )}
+          </div>
+        </SettingsBlock>
+        <LinkRow
+          icon={<img src={publicAssetPath('icons/github.svg')} alt="GitHub" className="h-4 w-4 opacity-70" />}
+          title="NanmiCoder/cc-haha"
+          description={t('settings.about.starHint')}
           onClick={() => openUrl(GITHUB_REPO)}
-          className="w-full flex items-center gap-3 px-4 py-3 rounded-[var(--radius-xl)] border border-[var(--color-border)] hover:bg-[var(--color-surface-hover)] transition-colors cursor-pointer"
-        >
-          <img src={publicAssetPath('icons/github.svg')} alt="GitHub" className="w-5 h-5 opacity-70" />
-          <div className="flex-1 text-left">
-            <div className="text-sm font-medium text-[var(--color-text-primary)]">NanmiCoder/cc-haha</div>
-            <div className="text-xs text-[var(--color-text-tertiary)]">{t('settings.about.starHint')}</div>
-          </div>
-        </button>
-      </div>
+          external
+        />
+        <LinkRow
+          icon={<MessageSquareWarning size={16} strokeWidth={1.75} aria-hidden="true" />}
+          title={t('settings.about.feedback')}
+          description={t('settings.about.feedbackDesc')}
+          onClick={() => openUrl(GITHUB_ISSUES)}
+          external
+        />
+        {/* The QR is the same image README.md embeds under "User Group". A dialog
+            keeps it on screen; expanding inline pushed it below the fold. */}
+        <LinkRow
+          icon={<QrCode size={16} strokeWidth={1.75} aria-hidden="true" />}
+          title={t('settings.about.community')}
+          description={t('settings.about.communityDesc')}
+          onClick={() => setCommunityOpen(true)}
+          aria-haspopup="dialog"
+        />
+      </SettingsGroup>
 
-      <Card radius="xl" surface="low" padding="none" className="mt-4 w-full p-4">
-        <div className="flex items-start justify-between gap-3">
-          <div>
-            <div className="text-sm font-medium text-[var(--color-text-primary)]">{t('settings.about.updates')}</div>
-            <div className="text-xs text-[var(--color-text-tertiary)] mt-1">
-              {t('settings.about.updatesDesc')}
-            </div>
-          </div>
+      <SettingsSection
+        title={t('settings.about.updates')}
+        description={t('settings.about.updatesDesc')}
+        action={(
           <Button
             size="sm"
             variant="secondary"
@@ -198,161 +226,35 @@ export function AboutSettings() {
           >
             {t('update.checkNow')}
           </Button>
-        </div>
-
-        <div className="mt-4 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface)] px-3 py-3">
-          <div className="flex items-center justify-between gap-3">
-            <div>
-              <div className="text-xs uppercase tracking-[0.14em] text-[var(--color-text-tertiary)]">
-                {t('settings.about.version')}
-              </div>
-              <div className="text-sm font-medium text-[var(--color-text-primary)] mt-1">
-                {version || t('update.currentVersionUnknown')}
-              </div>
-            </div>
-
-            {availableVersion && (
-              <div className="text-right">
-                <div className="text-xs uppercase tracking-[0.14em] text-[var(--color-text-tertiary)]">
-                  {t('update.availableLabel')}
-                </div>
-                <div className="text-sm font-medium text-[var(--color-text-primary)] mt-1">
-                  {availableVersion}
-                </div>
-              </div>
-            )}
-          </div>
-
-          <p className={`mt-3 text-sm ${error ? 'text-[var(--color-error)]' : 'text-[var(--color-text-secondary)]'}`}>
-            {updateDescription}
-          </p>
-
-          {checkedAtText && (
-            <p className="mt-1 text-xs text-[var(--color-text-tertiary)]">
-              {t('update.checkedAt', { time: checkedAtText })}
-            </p>
-          )}
-
-          <div className="mt-3 border-t border-[var(--color-border-separator)] pt-3">
-            <button
-              type="button"
-              onClick={() => setShowUpdateProxyAdvanced((value) => !value)}
-              className="flex w-full items-center justify-between gap-3 rounded-[var(--radius-md)] text-left text-xs font-medium text-[var(--color-text-secondary)] transition-colors hover:text-[var(--color-text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]"
-              aria-expanded={showUpdateProxyAdvanced}
-            >
-              <span>{t('update.proxyAdvanced')}</span>
-              <span className="material-symbols-outlined text-[18px]">
-                {showUpdateProxyAdvanced ? 'expand_less' : 'expand_more'}
+        )}
+      >
+        <SettingsGroup>
+          <SettingsRow
+            title={(
+              <span className="inline-flex flex-wrap items-center gap-2">
+                <span>{t('settings.about.version')}</span>
+                <span className="font-mono text-xs font-normal text-[var(--color-text-secondary)]">
+                  {version || t('update.currentVersionUnknown')}
+                </span>
+                {availableVersion && (
+                  <Badge tone="info" size="sm">
+                    {t('update.availableLabel')} {availableVersion}
+                  </Badge>
+                )}
               </span>
-            </button>
-
-            {showUpdateProxyAdvanced && (
-              <div className="mt-3 space-y-3">
-                <div className="grid grid-cols-2 gap-2">
-                  {updateProxyModes.map((mode) => (
-                    <button
-                      key={mode.value}
-                      type="button"
-                      onClick={() => {
-                        setUpdateProxyDraft((current) => ({ ...current, mode: mode.value }))
-                        setUpdateProxySaveError(null)
-                      }}
-                      aria-pressed={updateProxyDraft.mode === mode.value}
-                      className={`rounded-[var(--radius-lg)] border px-3 py-2 text-left transition-colors ${
-                        updateProxyDraft.mode === mode.value
-                          ? 'border-[var(--color-brand)] bg-[var(--color-surface-selected)] text-[var(--color-text-primary)]'
-                          : 'border-[var(--color-border)] text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-hover)]'
-                      }`}
-                    >
-                      <div className="text-xs font-semibold">{mode.label}</div>
-                      <div className="mt-1 text-[11px] leading-4 text-[var(--color-text-tertiary)]">
-                        {mode.description}
-                      </div>
-                    </button>
-                  ))}
-                </div>
-
-                {updateProxyDraft.mode === 'manual' && (
-                  <div>
-                    <Input
-                      id="update-proxy-url"
-                      label={t('update.proxyUrl')}
-                      value={updateProxyDraft.url}
-                      placeholder="http://127.0.0.1:7890"
-                      autoComplete="off"
-                      onChange={(event) => {
-                        setUpdateProxyDraft((current) => ({ ...current, url: event.target.value }))
-                        setUpdateProxySaveError(null)
-                      }}
-                    />
-                    <p className={`mt-1 text-[11px] leading-4 ${manualProxyError ? 'text-[var(--color-error)]' : 'text-[var(--color-text-tertiary)]'}`}>
-                      {manualProxyError ?? t('update.proxyUrlHint')}
-                    </p>
-                  </div>
-                )}
-
-                <div className="flex items-center justify-between gap-3">
-                  <p className="min-w-0 text-[11px] leading-4 text-[var(--color-text-tertiary)]">
-                    {t('update.proxyScopeHint')}
-                  </p>
-                  <Button
-                    size="sm"
-                    variant="secondary"
-                    className="min-w-[72px] px-4 whitespace-nowrap"
-                    disabled={!updateProxyDirty || !!manualProxyError || isSavingUpdateProxy}
-                    loading={isSavingUpdateProxy}
-                    onClick={() => void saveUpdateProxy()}
-                  >
-                    {t('update.proxySave')}
-                  </Button>
-                </div>
-
-                {updateProxySaveError && (
-                  <p className="text-[11px] leading-4 text-[var(--color-error)]">
-                    {updateProxySaveError}
-                  </p>
-                )}
-              </div>
             )}
-          </div>
-
-          {(updateStatus === 'downloading' || updateStatus === 'restarting') && (
-            <div className="mt-3">
-              <div className="h-1.5 bg-[var(--color-surface-container-low)] rounded-full overflow-hidden">
-                {hasKnownProgress || updateStatus === 'restarting' ? (
-                  <div
-                    className="h-full bg-[var(--color-text-accent)] transition-all duration-300"
-                    style={{ width: `${Math.min(progressPercent, 100)}%` }}
-                  />
-                ) : (
-                  <div className="h-full w-1/3 rounded-full bg-[var(--color-text-accent)] animate-pulse" />
+            description={(
+              <>
+                <span className={`block ${error ? 'text-[var(--color-error)]' : ''}`}>{updateDescription}</span>
+                {checkedAtText && (
+                  <span className="mt-0.5 block">{t('update.checkedAt', { time: checkedAtText })}</span>
                 )}
-              </div>
-              {!hasKnownProgress && updateStatus === 'downloading' && downloadedBytes > 0 && (
-                <p className="mt-1 text-xs text-[var(--color-text-tertiary)]">
-                  {downloadedText}
-                </p>
-              )}
-            </div>
-          )}
-
-          {releaseNotes && availableVersion && (
-            <div className="mt-3 rounded-[var(--radius-lg)] bg-[var(--color-surface-container-low)] px-3 py-3">
-              <div className="text-[11px] uppercase tracking-[0.14em] text-[var(--color-text-tertiary)]">
-                {t('update.releaseNotes')}
-              </div>
-              <MarkdownRenderer
-                content={releaseNotes}
-                variant="document"
-                className="mt-2 text-[13px] leading-6 text-[var(--color-text-secondary)] [&_h1]:text-lg [&_h2]:text-base [&_h3]:text-sm [&_p]:text-[13px] [&_p]:leading-6"
-              />
-            </div>
-          )}
-
-          {availableVersion && (
-            <div className="mt-3 flex justify-end">
+              </>
+            )}
+          >
+            {availableVersion && (
               <Button
-                size="sm"
+                size="base"
                 onClick={() => void installUpdate()}
                 loading={updateStatus === 'downloading' || updateStatus === 'installing' || updateStatus === 'restarting'}
                 disabled={updateStatus === 'checking' || updateStatus === 'downloading'}
@@ -365,74 +267,147 @@ export function AboutSettings() {
                       ? t('update.restarting')
                       : t('update.now')}
               </Button>
-            </div>
+            )}
+          </SettingsRow>
+
+          {(updateStatus === 'downloading' || updateStatus === 'restarting') && (
+            <SettingsBlock>
+              <div className="h-1.5 overflow-hidden rounded-full bg-[var(--color-surface-container-high)]">
+                {hasKnownProgress || updateStatus === 'restarting' ? (
+                  <div
+                    className="h-full bg-[var(--color-info)] transition-all duration-300"
+                    style={{ width: `${Math.min(progressPercent, 100)}%` }}
+                  />
+                ) : (
+                  <div className="h-full w-1/3 animate-pulse rounded-full bg-[var(--color-info)]" />
+                )}
+              </div>
+              {!hasKnownProgress && updateStatus === 'downloading' && downloadedBytes > 0 && (
+                <p className="mt-1 font-mono text-[11px] tabular-nums text-[var(--color-text-tertiary)]">
+                  {downloadedText}
+                </p>
+              )}
+            </SettingsBlock>
           )}
-        </div>
-      </Card>
 
-      {/* Divider */}
-      <div className="w-full border-t border-[var(--color-border-separator)] my-6" />
+          {releaseNotes && availableVersion && (
+            <SettingsBlock>
+              <div className="text-xs font-semibold text-[var(--color-text-tertiary)]">
+                {t('update.releaseNotes')}
+              </div>
+              <div className="mt-2 rounded-[var(--radius-md)] bg-[var(--color-surface-container)] px-3 py-2">
+                <MarkdownRenderer
+                  content={releaseNotes}
+                  variant="document"
+                  className="text-[13px] leading-6 text-[var(--color-text-secondary)] [&_h1]:text-[15px] [&_h2]:text-sm [&_h3]:text-[13px] [&_p]:text-[13px] [&_p]:leading-6"
+                />
+              </div>
+            </SettingsBlock>
+          )}
 
-      {/* Author */}
-      <div className="w-full">
-        <h3 className="text-xs font-medium text-[var(--color-text-tertiary)] uppercase tracking-wider mb-3">{t('settings.about.author')}</h3>
-        <button
-          onClick={() => openUrl(AUTHOR_GITHUB)}
-          className="w-full flex items-center gap-3 px-4 py-2.5 rounded-[var(--radius-lg)] hover:bg-[var(--color-surface-hover)] transition-colors cursor-pointer"
-        >
-          <img src={publicAssetPath('icons/github.svg')} alt="GitHub" className="w-4 h-4 opacity-60" />
-          <span className="text-sm text-[var(--color-text-primary)]">程序员阿江-Relakkes</span>
-          <span className="text-xs text-[var(--color-text-tertiary)] ml-auto">GitHub</span>
-        </button>
-      </div>
-
-      {/* Social Media */}
-      <div className="w-full mt-4">
-        <h3 className="text-xs font-medium text-[var(--color-text-tertiary)] uppercase tracking-wider mb-3">{t('settings.about.socialMedia')}</h3>
-        <div className="flex flex-col gap-0.5">
-          {SOCIAL_LINKS.map((link) => (
+          <div>
             <button
-              key={link.name}
-              onClick={() => openUrl(link.url)}
-              className="w-full flex items-center gap-3 px-4 py-2.5 rounded-[var(--radius-lg)] hover:bg-[var(--color-surface-hover)] transition-colors cursor-pointer"
+              type="button"
+              onClick={() => setShowUpdateProxyAdvanced((value) => !value)}
+              className="flex min-h-[44px] w-full items-center justify-between gap-3 px-4 py-2.5 text-left text-[13px] font-medium text-[var(--color-text-secondary)] transition-colors hover:text-[var(--color-text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-border-focus)]"
+              aria-expanded={showUpdateProxyAdvanced}
             >
-              <img src={publicAssetPath(link.icon)} alt={link.name} className="w-4 h-4 opacity-60" />
-              <span className="text-sm text-[var(--color-text-primary)]">{link.label}</span>
-              <span className="text-xs text-[var(--color-text-tertiary)] ml-auto">{link.name}</span>
+              <span>{t('update.proxyAdvanced')}</span>
+              {showUpdateProxyAdvanced
+                ? <ChevronUp size={14} strokeWidth={1.75} aria-hidden="true" className="text-[var(--color-text-tertiary)]" />
+                : <ChevronDown size={14} strokeWidth={1.75} aria-hidden="true" className="text-[var(--color-text-tertiary)]" />}
             </button>
+
+            {showUpdateProxyAdvanced && (
+              <div className="space-y-3 px-4 pb-4">
+                <SegmentedControl<UpdateProxyMode>
+                  label={t('update.proxyAdvanced')}
+                  layout="fill"
+                  size="sm"
+                  value={updateProxyDraft.mode}
+                  onChange={(mode) => {
+                    setUpdateProxyDraft((current) => ({ ...current, mode }))
+                    setUpdateProxySaveError(null)
+                  }}
+                  items={updateProxyModes.map(({ value, label }) => ({ value, label }))}
+                />
+                {selectedUpdateProxyMode && (
+                  <p className="text-xs leading-[1.5] text-[var(--color-text-tertiary)]">{selectedUpdateProxyMode.description}</p>
+                )}
+
+                {updateProxyDraft.mode === 'manual' && (
+                  <div>
+                    <Input
+                      id="update-proxy-url"
+                      label={t('update.proxyUrl')}
+                      size="md"
+                      className="font-mono text-xs"
+                      value={updateProxyDraft.url}
+                      placeholder="http://127.0.0.1:7890"
+                      autoComplete="off"
+                      aria-invalid={manualProxyError ? true : undefined}
+                      onChange={(event) => {
+                        setUpdateProxyDraft((current) => ({ ...current, url: event.target.value }))
+                        setUpdateProxySaveError(null)
+                      }}
+                    />
+                    <p className={`mt-1 text-xs leading-[1.5] ${manualProxyError ? 'text-[var(--color-error)]' : 'text-[var(--color-text-tertiary)]'}`}>
+                      {manualProxyError ?? t('update.proxyUrlHint')}
+                    </p>
+                  </div>
+                )}
+
+                <div className="flex items-center justify-between gap-3">
+                  <p className="min-w-0 text-xs leading-[1.5] text-[var(--color-text-tertiary)]">
+                    {t('update.proxyScopeHint')}
+                  </p>
+                  <Button
+                    size="base"
+                    variant="secondary"
+                    className="shrink-0 whitespace-nowrap"
+                    disabled={!updateProxyDirty || !!manualProxyError || isSavingUpdateProxy}
+                    loading={isSavingUpdateProxy}
+                    onClick={() => void saveUpdateProxy()}
+                  >
+                    {t('update.proxySave')}
+                  </Button>
+                </div>
+
+                {updateProxySaveError && (
+                  <p className="text-xs leading-[1.5] text-[var(--color-error)]">
+                    {updateProxySaveError}
+                  </p>
+                )}
+              </div>
+            )}
+          </div>
+        </SettingsGroup>
+      </SettingsSection>
+
+      <SettingsSection title={t('settings.about.author')}>
+        <SettingsGroup>
+          <LinkRow
+            icon={<img src={publicAssetPath('icons/github.svg')} alt="GitHub" className="h-4 w-4 opacity-60" />}
+            title="程序员阿江-Relakkes"
+            meta="GitHub"
+            onClick={() => openUrl(AUTHOR_GITHUB)}
+          />
+        </SettingsGroup>
+      </SettingsSection>
+
+      <SettingsSection title={t('settings.about.socialMedia')}>
+        <SettingsGroup>
+          {SOCIAL_LINKS.map((link) => (
+            <LinkRow
+              key={link.name}
+              icon={<img src={publicAssetPath(link.icon)} alt={link.name} className="h-4 w-4 opacity-60" />}
+              title={link.label}
+              meta={link.name}
+              onClick={() => openUrl(link.url)}
+            />
           ))}
-        </div>
-      </div>
-
-      <div className="mt-6 w-full">
-        <button
-          onClick={() => openUrl(GITHUB_ISSUES)}
-          className="w-full flex items-center gap-3 px-4 py-3 rounded-[var(--radius-xl)] border border-[var(--color-border)] hover:bg-[var(--color-surface-hover)] transition-colors cursor-pointer"
-        >
-          <span className="material-symbols-outlined text-[20px] text-[var(--color-text-tertiary)]">feedback</span>
-          <div className="flex-1 text-left">
-            <div className="text-sm font-medium text-[var(--color-text-primary)]">{t('settings.about.feedback')}</div>
-            <div className="text-xs text-[var(--color-text-tertiary)]">{t('settings.about.feedbackDesc')}</div>
-          </div>
-        </button>
-      </div>
-
-      {/* The QR is the same image README.md embeds under "User Group". A dialog
-          keeps it on screen; expanding inline pushed it below the fold. */}
-      <div className="mt-3 w-full">
-        <button
-          type="button"
-          onClick={() => setCommunityOpen(true)}
-          aria-haspopup="dialog"
-          className="w-full flex items-center gap-3 px-4 py-3 rounded-[var(--radius-xl)] border border-[var(--color-border)] hover:bg-[var(--color-surface-hover)] transition-colors cursor-pointer"
-        >
-          <span className="material-symbols-outlined text-[20px] text-[var(--color-text-tertiary)]">qr_code_2</span>
-          <div className="flex-1 text-left">
-            <div className="text-sm font-medium text-[var(--color-text-primary)]">{t('settings.about.community')}</div>
-            <div className="text-xs text-[var(--color-text-tertiary)]">{t('settings.about.communityDesc')}</div>
-          </div>
-        </button>
-      </div>
+        </SettingsGroup>
+      </SettingsSection>
 
       <Modal
         open={communityOpen}
@@ -454,3 +429,35 @@ export function AboutSettings() {
     </div>
   )
 }
+
+/**
+ * A whole-row link inside a settings group. The hover fill follows the card's
+ * rounded corners on the first and last row, since the group itself does not
+ * clip (it hosts dropdowns elsewhere).
+ */
+function LinkRow({ icon, title, description, meta, external = false, onClick, ...rest }: {
+  icon: ReactNode
+  title: string
+  description?: string
+  meta?: string
+  external?: boolean
+  onClick: () => void
+  'aria-haspopup'?: 'dialog'
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      {...rest}
+      className="flex min-h-[52px] w-full cursor-pointer items-center gap-3 px-4 py-3 text-left transition-colors first:rounded-t-[calc(var(--radius-lg)-1px)] last:rounded-b-[calc(var(--radius-lg)-1px)] hover:bg-[var(--color-surface-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-border-focus)]"
+    >
+      <span className="flex w-4 shrink-0 justify-center text-[var(--color-text-tertiary)]">{icon}</span>
+      <span className="min-w-0 flex-1">
+        <span className="block text-[13px] font-medium text-[var(--color-text-primary)]">{title}</span>
+        {description && <span className="mt-0.5 block text-xs leading-[1.5] text-[var(--color-text-tertiary)]">{description}</span>}
+      </span>
+      {meta && <span className="shrink-0 text-xs text-[var(--color-text-tertiary)]">{meta}</span>}
+      {external && <ExternalLink size={14} strokeWidth={1.75} aria-hidden="true" className="shrink-0 text-[var(--color-text-tertiary)]" />}
+    </button>
+  )
+}
diff --git a/desktop/src/pages/settings/ChatAppearanceSettings.test.tsx b/desktop/src/pages/settings/ChatAppearanceSettings.test.tsx
index cfcefa17..526b7782 100644
--- a/desktop/src/pages/settings/ChatAppearanceSettings.test.tsx
+++ b/desktop/src/pages/settings/ChatAppearanceSettings.test.tsx
@@ -1,4 +1,4 @@
-import { cleanup, fireEvent, render, screen } from '@testing-library/react'
+import { cleanup, fireEvent, render, screen, within } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import { afterEach, beforeEach, describe, expect, it } from 'vitest'
 import { useSettingsStore } from '@/stores/settingsStore'
@@ -31,9 +31,9 @@ describe('Chat appearance settings', () => {
     expect(preview.querySelector('table')).toBeInTheDocument()
     expect(preview.querySelector('code')).toHaveTextContent('const answer = 42')
 
-    fireEvent.change(screen.getByRole('combobox', { name: 'Chat font' }), { target: { value: 'serif' } })
+    fireEvent.click(within(screen.getByRole('radiogroup', { name: 'Chat font' })).getByRole('radio', { name: 'Serif' }))
     fireEvent.change(screen.getByRole('slider', { name: 'Chat font size' }), { target: { value: '24' } })
-    fireEvent.change(screen.getByRole('combobox', { name: 'Conversation width' }), { target: { value: 'full' } })
+    fireEvent.click(within(screen.getByRole('radiogroup', { name: 'Conversation width' })).getByRole('radio', { name: 'Fill available space' }))
 
     expect(useChatAppearanceStore.getState().appearance).toEqual({ font: 'serif', fontSize: 24, width: 'full' })
     expect(preview.style.getPropertyValue('--chat-font-family')).toContain('Songti SC')
@@ -52,10 +52,10 @@ describe('Chat appearance settings', () => {
 
     fireEvent.click(screen.getByRole('button', { name: 'Reset chat appearance' }))
 
-    expect(screen.getByRole('combobox', { name: 'Chat font' })).toHaveValue('system')
-    expect(screen.getByRole('slider')).toHaveValue('14')
-    expect(screen.getByRole('combobox', { name: 'Conversation width' })).toHaveValue('standard')
-    expect(screen.getByRole('region').style.getPropertyValue('--chat-font-size')).toBe('14px')
+    expect(within(screen.getByRole('radiogroup', { name: 'Chat font' })).getByRole('radio', { name: 'System default' })).toHaveAttribute('aria-checked', 'true')
+    expect(screen.getByRole('slider')).toHaveValue('15')
+    expect(within(screen.getByRole('radiogroup', { name: 'Conversation width' })).getByRole('radio', { name: 'Standard' })).toHaveAttribute('aria-checked', 'true')
+    expect(screen.getByRole('region').style.getPropertyValue('--chat-font-size')).toBe('15px')
     expect(JSON.parse(localStorage.getItem(CHAT_APPEARANCE_STORAGE_KEY)!)).toMatchObject(DEFAULT_CHAT_APPEARANCE)
   })
 })
diff --git a/desktop/src/pages/settings/ChatAppearanceSettings.tsx b/desktop/src/pages/settings/ChatAppearanceSettings.tsx
index ba6c46f0..b2305bd5 100644
--- a/desktop/src/pages/settings/ChatAppearanceSettings.tsx
+++ b/desktop/src/pages/settings/ChatAppearanceSettings.tsx
@@ -1,11 +1,15 @@
 import { useId } from 'react'
 import { Button } from '@/components/ui/Button'
-import { Card } from '@/components/ui/Card'
-import { SelectField } from '@/components/ui/SelectField'
-import { SettingsSection } from '@/components/settings/SettingsSection'
+import { SegmentedControl } from '@/components/ui/SegmentedControl'
+import {
+  SettingsBlock,
+  SettingsGroup,
+  SettingsRow,
+  SettingsSection,
+} from '@/components/settings/SettingsSection'
 import { MarkdownRenderer } from '@/components/markdown/MarkdownRenderer'
 import { useTranslation } from '@/i18n'
-import { getChatAppearanceStyle } from '@/lib/chatAppearance'
+import { getChatAppearanceStyle, type ChatAppearance } from '@/lib/chatAppearance'
 import { useChatAppearanceStore } from '@/stores/chatAppearanceStore'
 
 export function ChatAppearanceSettings() {
@@ -16,69 +20,72 @@ export function ChatAppearanceSettings() {
 
   return (
     <SettingsSection
-      className="mt-8"
       title={t('settings.chatAppearance.title')}
       description={t('settings.chatAppearance.description')}
       action={(
-        <Button size="sm" variant="secondary" onClick={resetAppearance}>
+        <Button size="sm" variant="ghost" onClick={resetAppearance}>
           {t('settings.chatAppearance.reset')}
         </Button>
       )}
     >
-      <Card radius="xl" surface="low" padding="none" className="space-y-4 p-4">
-        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-          <SelectField
+      <SettingsGroup>
+        <SettingsRow title={t('settings.chatAppearance.font')}>
+          <SegmentedControl<ChatAppearance['font']>
             label={t('settings.chatAppearance.font')}
+            size="sm"
             value={appearance.font}
             onChange={(font) => setAppearance({ font })}
-            options={[
+            items={[
               { value: 'system', label: t('settings.chatAppearance.fontSystem') },
               { value: 'sans', label: t('settings.chatAppearance.fontSans') },
               { value: 'serif', label: t('settings.chatAppearance.fontSerif') },
               { value: 'mono', label: t('settings.chatAppearance.fontMono') },
             ]}
           />
-          <SelectField
+        </SettingsRow>
+        <SettingsRow title={t('settings.chatAppearance.fontSize')} htmlFor={sizeId} description={t('settings.chatAppearance.hint')}>
+          <div className="flex items-center gap-2.5">
+            <input
+              id={sizeId}
+              type="range"
+              min={12}
+              max={24}
+              step={1}
+              value={appearance.fontSize}
+              aria-valuetext={`${appearance.fontSize}px`}
+              onChange={(event) => setAppearance({ fontSize: Number(event.currentTarget.value) })}
+              className="w-[150px] cursor-pointer rounded-[var(--radius-sm)] accent-[var(--color-brand)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[var(--color-border-focus)]"
+            />
+            <output htmlFor={sizeId} className="w-[38px] font-mono text-xs tabular-nums text-[var(--color-text-secondary)]">
+              {appearance.fontSize}px
+            </output>
+          </div>
+        </SettingsRow>
+        <SettingsRow title={t('settings.chatAppearance.width')}>
+          <SegmentedControl<ChatAppearance['width']>
             label={t('settings.chatAppearance.width')}
+            size="sm"
             value={appearance.width}
             onChange={(width) => setAppearance({ width })}
-            options={[
+            items={[
               { value: 'standard', label: t('settings.chatAppearance.widthStandard') },
               { value: 'wide', label: t('settings.chatAppearance.widthWide') },
               { value: 'full', label: t('settings.chatAppearance.widthFull') },
             ]}
           />
-        </div>
-        <div>
-          <div className="mb-2 flex items-center justify-between gap-3 text-sm text-[var(--color-text-primary)]">
-            <label htmlFor={sizeId}>{t('settings.chatAppearance.fontSize')}</label>
-            <output htmlFor={sizeId}>{appearance.fontSize}px</output>
-          </div>
-          <input
-            id={sizeId}
-            type="range"
-            min={12}
-            max={24}
-            step={1}
-            value={appearance.fontSize}
-            aria-valuetext={`${appearance.fontSize}px`}
-            onChange={(event) => setAppearance({ fontSize: Number(event.currentTarget.value) })}
-            className="w-full rounded-[var(--radius-sm)] accent-[var(--color-brand)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[var(--color-border-focus)]"
-          />
-        </div>
-        <p className="text-xs leading-5 text-[var(--color-text-tertiary)]">{t('settings.chatAppearance.hint')}</p>
-        <div>
-          <p id={previewId} className="mb-2 text-xs font-medium text-[var(--color-text-secondary)]">{t('settings.chatAppearance.preview')}</p>
+        </SettingsRow>
+        <SettingsBlock>
+          <p id={previewId} className="mb-2 text-xs font-medium text-[var(--color-text-tertiary)]">{t('settings.chatAppearance.preview')}</p>
           <div
             role="region"
             aria-labelledby={previewId}
-            className="min-w-0 overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface)] p-4"
+            className="min-w-0 overflow-hidden rounded-[var(--radius-md)] bg-[var(--color-surface-container)] px-4 py-3"
             style={getChatAppearanceStyle(appearance)}
           >
             <MarkdownRenderer className="chat-reading-markdown" content={t('settings.chatAppearance.previewMarkdown')} />
           </div>
-        </div>
-      </Card>
+        </SettingsBlock>
+      </SettingsGroup>
     </SettingsSection>
   )
 }
diff --git a/desktop/src/pages/settings/DataMigrationSettings.tsx b/desktop/src/pages/settings/DataMigrationSettings.tsx
index 1ea1e8e7..207bae33 100644
--- a/desktop/src/pages/settings/DataMigrationSettings.tsx
+++ b/desktop/src/pages/settings/DataMigrationSettings.tsx
@@ -183,38 +183,44 @@ export function DataMigrationSettings({ environmentControlled, disabled = false,
   )
   const progress = status && status.totalBytes > 0 ? status.bytes / status.totalBytes * 100 : 0
 
+  // Rendered as one row of the storage section's settings group, so it carries
+  // the row padding itself rather than a divider of its own.
   return (
-    <div className="mt-4 border-t border-[var(--color-border-separator)] pt-4">
-      <div className="text-sm font-semibold text-[var(--color-text-primary)]">{t('settings.general.migration.title')}</div>
-      <p className="mt-1 text-xs leading-5 text-[var(--color-text-tertiary)]">{t('settings.general.migration.description')}</p>
-      <Button
-        type="button"
-        size="sm"
-        variant="secondary"
-        className="mt-3"
-        disabled={environmentControlled || disabled || busy || !!preview}
-        loading={preparing}
-        onClick={() => void chooseTarget()}
-      >
-        <FolderInput size={14} aria-hidden="true" />
-        {t('settings.general.migration.choose')}
-      </Button>
+    <div className="px-4 py-3">
+      <div className="flex flex-col gap-x-6 gap-y-2.5 sm:flex-row sm:items-center">
+        <div className="min-w-0 flex-1">
+          <div className="text-[13px] font-medium leading-5 text-[var(--color-text-primary)]">{t('settings.general.migration.title')}</div>
+          <p className="mt-0.5 text-xs leading-[1.5] text-[var(--color-text-tertiary)]">{t('settings.general.migration.description')}</p>
+        </div>
+        <Button
+          type="button"
+          size="base"
+          variant="secondary"
+          className="shrink-0 self-start sm:self-auto"
+          disabled={environmentControlled || disabled || busy || !!preview}
+          loading={preparing}
+          icon={<FolderInput size={14} strokeWidth={1.75} aria-hidden="true" />}
+          onClick={() => void chooseTarget()}
+        >
+          {t('settings.general.migration.choose')}
+        </Button>
+      </div>
       {environmentControlled && (
-        <p className="mt-2 text-xs leading-5 text-[var(--color-text-tertiary)]">{t('settings.general.migration.environment')}</p>
+        <p className="mt-2 text-xs leading-[1.5] text-[var(--color-text-tertiary)]">{t('settings.general.migration.environment')}</p>
       )}
       {error && !active && <p className="mt-2 text-xs text-[var(--color-error)]" role="alert">{error}</p>}
       {status && !active && (
-        <div className="mt-3 space-y-3 rounded-[var(--radius-lg)] bg-[var(--color-surface)] p-3" role="status">
-          <p className="text-sm font-medium text-[var(--color-text-primary)]">{t(STAGE_LABELS[status.stage])}</p>
+        <div className="mt-3 space-y-3 rounded-[var(--radius-md)] bg-[var(--color-surface-container)] p-3" role="status">
+          <p className="text-[13px] font-medium text-[var(--color-text-primary)]">{t(STAGE_LABELS[status.stage])}</p>
           {status.error && <p className="text-xs text-[var(--color-error)]" role="alert">{status.error}</p>}
           {directories(status.sourceDir, status.targetDir)}
           {status.stage === 'completed' && (
             <>
-              <p className="text-xs leading-5 text-[var(--color-text-secondary)]">{t('settings.general.migration.retained')}</p>
-              <p className="text-xs leading-5 text-[var(--color-text-tertiary)]">{t('settings.general.migration.cli')}</p>
+              <p className="text-xs leading-[1.5] text-[var(--color-text-secondary)]">{t('settings.general.migration.retained')}</p>
+              <p className="text-xs leading-[1.5] text-[var(--color-text-tertiary)]">{t('settings.general.migration.cli')}</p>
               <div className="flex flex-wrap gap-2">
-                <Button size="sm" variant="secondary" onClick={() => void openPath(status.sourceDir)}>{t('settings.general.migration.openSource')}</Button>
-                <Button size="sm" variant="secondary" onClick={() => void openPath(status.targetDir)}>{t('settings.general.migration.openTarget')}</Button>
+                <Button size="base" variant="secondary" onClick={() => void openPath(status.sourceDir)}>{t('settings.general.migration.openSource')}</Button>
+                <Button size="base" variant="secondary" onClick={() => void openPath(status.targetDir)}>{t('settings.general.migration.openTarget')}</Button>
               </div>
             </>
           )}
@@ -230,7 +236,7 @@ export function DataMigrationSettings({ environmentControlled, disabled = false,
         confirmVariant="primary"
         loading={starting}
         body={preview && (
-          <div className="space-y-3 text-sm leading-6 text-[var(--color-text-secondary)]">
+          <div className="space-y-3 text-[13px] leading-6 text-[var(--color-text-secondary)]">
             {directories(preview.sourceDir, preview.targetDir)}
             <p>{t('settings.general.migration.preview', { files: preview.files, size: formatBytes(preview.bytes) })}</p>
             {preview.activeTasks > 0 && <p>{t('settings.general.migration.activeTasks', { count: preview.activeTasks })}</p>}
@@ -252,7 +258,7 @@ export function DataMigrationSettings({ environmentControlled, disabled = false,
         )}
       >
         {status && (
-          <div className="space-y-3 text-sm text-[var(--color-text-secondary)]" aria-live="polite">
+          <div className="space-y-3 text-[13px] text-[var(--color-text-secondary)]" aria-live="polite">
             <p>{cancelling ? t('settings.general.migration.cancelling') : t(STAGE_LABELS[status.stage])}</p>
             <Progress
               label={t(STAGE_LABELS[status.stage])}
diff --git a/desktop/src/pages/settings/GeneralSettings.tsx b/desktop/src/pages/settings/GeneralSettings.tsx
index 9599c62c..c06b39a7 100644
--- a/desktop/src/pages/settings/GeneralSettings.tsx
+++ b/desktop/src/pages/settings/GeneralSettings.tsx
@@ -1,5 +1,5 @@
-import { useState, useEffect, useMemo, useRef, type CSSProperties } from 'react'
-import { RotateCw } from 'lucide-react'
+import { forwardRef, useState, useEffect, useMemo, useRef, type CSSProperties, type ReactNode } from 'react'
+import { AppWindow, Brain, ChevronDown, FolderInput, RotateCw } from 'lucide-react'
 import {
   useSettingsStore,
   UI_ZOOM_DEFAULT,
@@ -14,11 +14,19 @@ import { settingsApi } from '../../api/settings'
 import { useTranslation, type TranslationKey } from '../../i18n'
 import { ConfirmDialog } from '@/components/ui/ConfirmDialog'
 import { Input } from '@/components/ui/Input'
-import { Button } from '@/components/ui/Button'
-import { Card } from '@/components/ui/Card'
-import { SettingsPill, SettingsSection } from '@/components/settings/SettingsSection'
+import { Button, type ButtonProps } from '@/components/ui/Button'
+import { Badge } from '@/components/ui/Badge'
+import { cx } from '@/lib/cx'
+import {
+  SettingsBlock,
+  SettingsGroup,
+  SettingsPageHeader,
+  SettingsRow,
+  SettingsSection,
+  SettingsSwitchRow,
+} from '@/components/settings/SettingsSection'
 import { Dropdown } from '@/components/ui/Dropdown'
-import { Switch } from '@/components/ui/Switch'
+import { SegmentedControl } from '@/components/ui/SegmentedControl'
 import { SelectField } from '@/components/ui/SelectField'
 import { PermissionModeSelector } from '../../components/controls/PermissionModeSelector'
 import { ReasoningEffortPopover } from '../../components/controls/ReasoningEffortPopover'
@@ -31,7 +39,7 @@ import { useOpenTargetStore } from '../../stores/openTargetStore'
 import { isDesktopRuntime } from '../../lib/desktopRuntime'
 import { getDesktopHost } from '../../lib/desktopHost'
 import { getDesktopNotificationPermission, notifyDesktop, getDesktopNotificationPlatform, openDesktopNotificationSettings, requestDesktopNotificationPermission, type DesktopNotificationPermission } from '../../lib/desktopNotifications'
-import { SETTINGS_CHECKBOX_INPUT_CLASS, SettingsCheckboxMark, isValidHttpProxyUrl } from '../settings/shared'
+import { isValidHttpProxyUrl } from '../settings/shared'
 import { isTouchH5Document } from '../../lib/touchH5'
 import { MODEL_REASONING_EFFORTS } from '../../../../src/shared/modelReasoning'
 import { AUTO_QUESTION_TIMEOUT_OPTIONS } from '../../../../src/shared/autoQuestionSettings'
@@ -44,8 +52,13 @@ import { DataMigrationSettings } from './DataMigrationSettings'
  *
  * Moved verbatim out of `Settings.tsx`. It carries the four output-style label
  * helpers and the network-timeout bounds because nothing else in that file used
- * them; the checkbox mark and the proxy-URL validator stayed behind in `./shared`,
- * which is what more than one panel reaches for.
+ * them; the proxy-URL validator stayed behind in `./shared`, which is what more
+ * than one panel reaches for.
+ *
+ * Laid out on the settings skeleton (`SettingsSection` → `SettingsGroup` →
+ * rows): the toggles that used to stand alone are grouped by topic — theme,
+ * language, chat appearance, zoom, Agent preferences, notifications, network,
+ * WebSearch, trace, retention, storage — in that order.
  */
 
 const NETWORK_TIMEOUT_MIN_SECONDS = 30
@@ -702,328 +715,251 @@ export function GeneralSettings() {
     setUiZoom(nextZoom)
   }
 
-  const uiZoomSection = (
-    <div className="mt-8">
-      <div className="mb-3 flex items-end justify-between gap-3">
-        <div className="min-w-0">
-          <h2 className="text-[16.5px] font-semibold leading-tight text-[var(--color-text-primary)] mb-1" style={{ fontFamily: 'var(--font-headline)' }}>{t('settings.general.uiZoom')}</h2>
-          <p className="text-sm text-[var(--color-text-tertiary)]">{t('settings.general.uiZoomDescription')}</p>
-          <div className="mt-2 flex flex-wrap items-center gap-x-2 gap-y-1 text-[11px] text-[var(--color-text-tertiary)]">
-            <span>{t('settings.general.uiZoomShortcutHint')}</span>
-            <span className="inline-flex items-center gap-1">
-              <span className="font-medium text-[var(--color-text-secondary)]">{t('settings.general.uiZoomShortcutMac')}</span>
-              <kbd className="settings-zoom-kbd">⌘</kbd>
-              <kbd className="settings-zoom-kbd">+</kbd>
-              <span>/</span>
-              <kbd className="settings-zoom-kbd">⌘</kbd>
-              <kbd className="settings-zoom-kbd">-</kbd>
-              <span>/</span>
-              <kbd className="settings-zoom-kbd">⌘</kbd>
-              <kbd className="settings-zoom-kbd">0</kbd>
-            </span>
-            <span className="inline-flex items-center gap-1">
-              <span className="font-medium text-[var(--color-text-secondary)]">{t('settings.general.uiZoomShortcutWindows')}</span>
-              <kbd className="settings-zoom-kbd">Ctrl</kbd>
-              <kbd className="settings-zoom-kbd">+</kbd>
-              <span>/</span>
-              <kbd className="settings-zoom-kbd">Ctrl</kbd>
-              <kbd className="settings-zoom-kbd">-</kbd>
-              <span>/</span>
-              <kbd className="settings-zoom-kbd">Ctrl</kbd>
-              <kbd className="settings-zoom-kbd">0</kbd>
-            </span>
-            <span>{t('settings.general.uiZoomShortcutResetHint')}</span>
-          </div>
-        </div>
-        <div className="flex flex-shrink-0 items-center gap-2">
-          <span className="min-w-[48px] rounded-[var(--radius-md)] bg-[var(--color-surface-container-low)] px-2 py-1 text-center text-sm font-medium text-[var(--color-text-secondary)]">
-            {uiZoomPercent}%
-          </span>
-          <Button
-            variant="secondary"
-            size="base"
-            aria-label={t('settings.general.uiZoomReset')}
-            title={t('settings.general.uiZoomReset')}
-            onClick={() => {
-              setIsUiZoomDragging(false)
-              setUiZoomDraft(UI_ZOOM_DEFAULT)
-              setUiZoom(UI_ZOOM_DEFAULT)
-            }}
-            icon={<RotateCw className="h-3.5 w-3.5" aria-hidden="true" />}
-          >
-            100%
-          </Button>
-        </div>
-      </div>
-      <div
-        className={`settings-zoom-control flex items-center gap-3 ${isUiZoomDragging ? 'is-dragging' : ''}`}
-        style={{ '--settings-zoom-range-progress': uiZoomRangeProgress } as CSSProperties}
-      >
-        <span className="w-9 text-right text-xs text-[var(--color-text-tertiary)]">{Math.round(UI_ZOOM_MIN * 100)}%</span>
-        <div className="settings-zoom-range-wrap flex-1">
-          <div className="settings-zoom-preview" aria-hidden="true">
-            {uiZoomPercent}%
-          </div>
-          <input
-            type="range"
-            aria-label={t('settings.general.uiZoom')}
-            min={UI_ZOOM_MIN}
-            max={UI_ZOOM_MAX}
-            step={UI_ZOOM_STEP}
-            value={uiZoomDraft}
-            onPointerDown={() => {
-              setUiZoomDraggingState(true)
-            }}
-            onPointerUp={(e) => commitUiZoom(e.currentTarget.valueAsNumber)}
-            onPointerCancel={() => {
-              setUiZoomDraggingState(false)
-              setUiZoomDraft(uiZoom)
-            }}
-            onChange={(e) => {
-              const nextZoom = Number.isFinite(e.currentTarget.valueAsNumber)
-                ? e.currentTarget.valueAsNumber
-                : UI_ZOOM_DEFAULT
-              setUiZoomDraft(nextZoom)
-              if (!isUiZoomDraggingRef.current) {
-                setUiZoom(nextZoom)
-              }
-            }}
-            onBlur={(e) => {
-              if (uiZoomDraft !== uiZoom) {
-                commitUiZoom(e.currentTarget.valueAsNumber)
-              } else {
-                setUiZoomDraggingState(false)
-              }
-            }}
-            className="settings-zoom-range w-full"
-          />
-        </div>
-        <span className="w-9 text-xs text-[var(--color-text-tertiary)]">{Math.round(UI_ZOOM_MAX * 100)}%</span>
-      </div>
+  const uiZoomShortcuts = (
+    <div className="flex flex-wrap items-center gap-x-2 gap-y-1 text-xs leading-[1.5] text-[var(--color-text-tertiary)]">
+      <span>{t('settings.general.uiZoomShortcutHint')}</span>
+      <span className="inline-flex items-center gap-1">
+        <span className="text-[var(--color-text-secondary)]">{t('settings.general.uiZoomShortcutMac')}</span>
+        <kbd className="settings-zoom-kbd">⌘</kbd>
+        <kbd className="settings-zoom-kbd">+</kbd>
+        <span>/</span>
+        <kbd className="settings-zoom-kbd">⌘</kbd>
+        <kbd className="settings-zoom-kbd">-</kbd>
+        <span>/</span>
+        <kbd className="settings-zoom-kbd">⌘</kbd>
+        <kbd className="settings-zoom-kbd">0</kbd>
+      </span>
+      <span className="inline-flex items-center gap-1">
+        <span className="text-[var(--color-text-secondary)]">{t('settings.general.uiZoomShortcutWindows')}</span>
+        <kbd className="settings-zoom-kbd">Ctrl</kbd>
+        <kbd className="settings-zoom-kbd">+</kbd>
+        <span>/</span>
+        <kbd className="settings-zoom-kbd">Ctrl</kbd>
+        <kbd className="settings-zoom-kbd">-</kbd>
+        <span>/</span>
+        <kbd className="settings-zoom-kbd">Ctrl</kbd>
+        <kbd className="settings-zoom-kbd">0</kbd>
+      </span>
+      <span>{t('settings.general.uiZoomShortcutResetHint')}</span>
     </div>
   )
 
+  const uiZoomSection = (
+    <SettingsSection title={t('settings.general.uiZoom')} description={t('settings.general.uiZoomDescription')}>
+      <SettingsGroup>
+        <SettingsBlock className="space-y-3">
+          <div
+            className={`settings-zoom-control flex items-center gap-3 ${isUiZoomDragging ? 'is-dragging' : ''}`}
+            style={{ '--settings-zoom-range-progress': uiZoomRangeProgress } as CSSProperties}
+          >
+            <div className="settings-zoom-range-wrap min-w-0 flex-1">
+              <div className="settings-zoom-preview" aria-hidden="true">
+                {uiZoomPercent}%
+              </div>
+              <input
+                type="range"
+                aria-label={t('settings.general.uiZoom')}
+                min={UI_ZOOM_MIN}
+                max={UI_ZOOM_MAX}
+                step={UI_ZOOM_STEP}
+                value={uiZoomDraft}
+                onPointerDown={() => {
+                  setUiZoomDraggingState(true)
+                }}
+                onPointerUp={(e) => commitUiZoom(e.currentTarget.valueAsNumber)}
+                onPointerCancel={() => {
+                  setUiZoomDraggingState(false)
+                  setUiZoomDraft(uiZoom)
+                }}
+                onChange={(e) => {
+                  const nextZoom = Number.isFinite(e.currentTarget.valueAsNumber)
+                    ? e.currentTarget.valueAsNumber
+                    : UI_ZOOM_DEFAULT
+                  setUiZoomDraft(nextZoom)
+                  if (!isUiZoomDraggingRef.current) {
+                    setUiZoom(nextZoom)
+                  }
+                }}
+                onBlur={(e) => {
+                  if (uiZoomDraft !== uiZoom) {
+                    commitUiZoom(e.currentTarget.valueAsNumber)
+                  } else {
+                    setUiZoomDraggingState(false)
+                  }
+                }}
+                className="settings-zoom-range w-full"
+              />
+            </div>
+            <span className="w-11 shrink-0 text-right font-mono text-xs tabular-nums text-[var(--color-text-secondary)]">
+              {uiZoomPercent}%
+            </span>
+            <Button
+              variant="secondary"
+              size="sm"
+              className="shrink-0"
+              aria-label={t('settings.general.uiZoomReset')}
+              title={t('settings.general.uiZoomReset')}
+              onClick={() => {
+                setIsUiZoomDragging(false)
+                setUiZoomDraft(UI_ZOOM_DEFAULT)
+                setUiZoom(UI_ZOOM_DEFAULT)
+              }}
+              icon={<RotateCw size={12} strokeWidth={2} aria-hidden="true" />}
+            >
+              100%
+            </Button>
+          </div>
+          {uiZoomShortcuts}
+        </SettingsBlock>
+      </SettingsGroup>
+    </SettingsSection>
+  )
+
+  const selectedProxyMode = NETWORK_PROXY_MODES.find((mode) => mode.value === networkDraft.proxy.mode)
+  const selectedSendBehavior = CHAT_SEND_BEHAVIORS.find((option) => option.value === chatSendBehavior)
+  const fieldInvalidClass = 'aria-[invalid=true]:border-[var(--color-error)]'
+
   return (
-    <div className="max-w-xl">
+    <div className="w-full min-w-0">
+      <SettingsPageHeader title={t('settings.tab.general')} description={t('settings.general.pageDescription')} />
+
       {proxyManagedSettingsWarning && (
         <div
           role="alert"
-          className="mb-5 rounded-[var(--radius-lg)] border border-[var(--color-warning)] bg-[var(--color-warning-container)] px-3 py-2 text-xs leading-5 text-[var(--color-on-warning-container)]"
+          className="mt-5 rounded-[var(--radius-lg)] bg-[var(--color-warning-container)] px-4 py-3 text-xs leading-[1.5] text-[var(--color-on-warning-container)]"
         >
           {t('settings.general.proxyManagedSettingsWarning')}
         </div>
       )}
-      {/* No page header here on purpose: the only title it could carry is the nav
-          label verbatim, with no description to add. The pane opens on its first
-          section instead. */}
-      {/* Appearance selector */}
-      <SettingsSection
-        title={t('settings.general.appearanceTitle')}
-        description={t('settings.general.appearanceDescription')}
-      >
-        <div className="mb-4 rounded-xl border border-[var(--color-border)] bg-[var(--color-surface-container-low)] px-4 py-3">
-          <Switch
+
+      {/* Theme. The six palettes stay, drawn as cards; following the system
+          splits them into the ground each OS mode returns to. */}
+      <SettingsSection title={t('settings.general.appearanceTitle')} description={t('settings.general.appearanceDescription')}>
+        <SettingsGroup>
+          <SettingsBlock className="px-4 py-4">
+            {followSystemTheme ? (
+              <div className="flex flex-col gap-4">
+                <div>
+                  <p className="mb-2 text-xs text-[var(--color-text-tertiary)]">
+                    {t('settings.general.appearance.lightThemeLabel')}
+                  </p>
+                  <div className={`grid grid-cols-4 gap-3 ${THEME_GRID_WIDTH}`}>
+                    {LIGHT_THEMES.map(({ value, label }) => (
+                      <ThemeCard
+                        key={value}
+                        theme={value}
+                        label={label}
+                        selected={lightTheme === value}
+                        onSelect={() => void setTheme(value)}
+                      />
+                    ))}
+                  </div>
+                </div>
+                <div>
+                  <p className="mb-2 text-xs text-[var(--color-text-tertiary)]">
+                    {t('settings.general.appearance.darkThemeLabel')}
+                  </p>
+                  <div className={`grid grid-cols-4 gap-3 ${THEME_GRID_WIDTH}`}>
+                    {DARK_THEMES.map(({ value, label }) => (
+                      <ThemeCard
+                        key={value}
+                        theme={value}
+                        label={label}
+                        selected={darkTheme === value}
+                        onSelect={() => void setTheme(value)}
+                      />
+                    ))}
+                  </div>
+                </div>
+              </div>
+            ) : (
+              <div className={`grid grid-cols-3 gap-3.5 ${THEME_GRID_WIDTH}`}>
+                {THEMES.map(({ value, label }) => (
+                  <ThemeCard
+                    key={value}
+                    theme={value}
+                    label={label}
+                    selected={theme === value}
+                    onSelect={() => void setTheme(value)}
+                  />
+                ))}
+              </div>
+            )}
+          </SettingsBlock>
+          <SettingsSwitchRow
+            title={t('settings.general.appearance.followSystem')}
+            description={t('settings.general.appearance.followSystemHint')}
             checked={followSystemTheme}
             onChange={setFollowSystemTheme}
-            label={t('settings.general.appearance.followSystem')}
-            description={t('settings.general.appearance.followSystemHint')}
           />
-        </div>
-        {followSystemTheme ? (
-          // The OS decides which ground; what is left to choose is the palette
-          // on each one, so the picker splits into the two grounds.
-          <div className="flex flex-col gap-4">
-            <div>
-              <p className="mb-2 text-[12.5px] text-[var(--color-text-tertiary)]">
-                {t('settings.general.appearance.lightThemeLabel')}
-              </p>
-              <div className="flex flex-wrap gap-2">
-                {LIGHT_THEMES.map(({ value, label }) => (
-                  <SettingsPill
-                    key={value}
-                    selected={lightTheme === value}
-                    onClick={() => void setTheme(value)}
-                  >
-                    {label}
-                  </SettingsPill>
-                ))}
-              </div>
-            </div>
-            <div>
-              <p className="mb-2 text-[12.5px] text-[var(--color-text-tertiary)]">
-                {t('settings.general.appearance.darkThemeLabel')}
-              </p>
-              <div className="flex flex-wrap gap-2">
-                {DARK_THEMES.map(({ value, label }) => (
-                  <SettingsPill
-                    key={value}
-                    selected={darkTheme === value}
-                    onClick={() => void setTheme(value)}
-                  >
-                    {label}
-                  </SettingsPill>
-                ))}
-              </div>
-            </div>
-          </div>
-        ) : (
-          <div className="flex flex-wrap gap-2">
-            {THEMES.map(({ value, label }) => (
-              <SettingsPill
-                key={value}
-                selected={theme === value}
-                onClick={() => void setTheme(value)}
-              >
-                {label}
-              </SettingsPill>
-            ))}
-          </div>
-        )}
+        </SettingsGroup>
       </SettingsSection>
 
-      {/* Language selector */}
-      <SettingsSection
-        title={t('settings.general.languageTitle')}
-        description={t('settings.general.languageDescription')}
-      >
-        <div className="flex flex-wrap gap-2">
-          {LANGUAGES.map(({ value, label }) => (
-            <SettingsPill
-              key={value}
-              selected={locale === value}
-              onClick={() => setLocale(value)}
-            >
-              {label}
-            </SettingsPill>
-          ))}
-        </div>
+      <SettingsSection title={t('settings.general.languageTitle')}>
+        <SettingsGroup>
+          <SettingsRow title={t('settings.general.languageTitle')} description={t('settings.general.languageDescription')}>
+            <SegmentedControl<Locale>
+              label={t('settings.general.languageTitle')}
+              size="sm"
+              value={locale}
+              onChange={setLocale}
+              items={LANGUAGES}
+            />
+          </SettingsRow>
+          <SettingsRow title={t('settings.general.responseLangTitle')} description={t('settings.general.responseLangDescription')}>
+            <Dropdown<string>
+              items={RESPONSE_LANGUAGES}
+              value={responseLanguage}
+              onChange={(value) => void setResponseLanguage(value)}
+              width={280}
+              maxHeight={320}
+              align="right"
+              trigger={
+                <PickerButton aria-label={t('settings.general.responseLangTitle')}>
+                  {selectedResponseLanguageLabel}
+                </PickerButton>
+              }
+            />
+          </SettingsRow>
+        </SettingsGroup>
       </SettingsSection>
 
-      {/* Response Language */}
-      <h2
-        className="text-[16.5px] font-semibold leading-tight text-[var(--color-text-primary)] mb-1"
-        style={{ fontFamily: 'var(--font-headline)' }}
-      >
-        {t('settings.general.responseLangTitle')}
-      </h2>
-      <p className="text-[13px] leading-5 text-[var(--color-text-tertiary)] mb-3">{t('settings.general.responseLangDescription')}</p>
-      <Dropdown<string>
-        items={RESPONSE_LANGUAGES}
-        value={responseLanguage}
-        onChange={(value) => void setResponseLanguage(value)}
-        width="100%"
-        maxHeight={320}
-        className="mb-8 block w-full"
-        trigger={
-          <Button
-            variant="secondary"
-            size="md"
-            block
-            className="h-10 gap-3"
-            aria-label={t('settings.general.responseLangTitle')}
+      <ChatAppearanceSettings />
+
+      {uiZoomSection}
+
+      {/* Everything a new session starts from, in one card. */}
+      <SettingsSection title={t('h5Settings.agentPreferences')}>
+        <SettingsGroup>
+          <SettingsRow
+            title={t('settings.general.chatSendBehaviorTitle')}
+            description={selectedSendBehavior?.description ?? t('settings.general.chatSendBehaviorDescription')}
+          >
+            <SegmentedControl<ChatSendBehavior>
+              label={t('settings.general.chatSendBehaviorTitle')}
+              size="sm"
+              value={chatSendBehavior}
+              onChange={(value) => void setChatSendBehavior(value)}
+              items={CHAT_SEND_BEHAVIORS.map(({ value, label }) => ({ value, label }))}
+            />
+          </SettingsRow>
+          <SettingsRow
+            title={t('settings.general.defaultPermissionTitle')}
+            description={t('settings.general.defaultPermissionHint')}
           >
-            <span className="min-w-0 flex-1 truncate text-left">{selectedResponseLanguageLabel}</span>
-            <span className="material-symbols-outlined flex-shrink-0 text-[18px] text-[var(--color-text-secondary)]">expand_more</span>
-          </Button>
-        }
-      />
-
-      {/* Output style */}
-      <h2 className="text-[16.5px] font-semibold leading-tight text-[var(--color-text-primary)] mb-1" style={{ fontFamily: 'var(--font-headline)' }}>{t('settings.general.outputStyleTitle')}</h2>
-      <p className="text-sm text-[var(--color-text-tertiary)] mb-3">{t('settings.general.outputStyleDescription')}</p>
-      <Card radius="xl" surface="low" padding="none" className="mb-8 px-4 py-4">
-        <Dropdown<string>
-          items={outputStyleItems}
-          value={outputStyle}
-          onChange={(value) => void handleOutputStyleChange(value)}
-          width="100%"
-          maxHeight={360}
-          className="block w-full"
-          trigger={
-            <Button
-              variant="secondary"
-              size="md"
-              block
-              className="h-auto min-h-10 gap-3 py-2"
-              aria-label={t('settings.general.outputStyleSelectLabel')}
-              disabled={outputStylesLoading}
-              icon={<span className="material-symbols-outlined flex-shrink-0 text-[18px] text-[var(--color-text-secondary)]">format_paint</span>}
-            >
-              <span className="min-w-0 flex-1 text-left">
-                <span className="block truncate font-medium">
-                  {outputStylesLoading
-                    ? t('settings.general.outputStyleLoading')
-                    : selectedOutputStyleLabel}
-                </span>
-                {selectedOutputStyleDescription && (
-                  <span className="mt-0.5 block truncate text-xs text-[var(--color-text-tertiary)]">
-                    {selectedOutputStyleDescription}
-                  </span>
-                )}
-              </span>
-              <span className="material-symbols-outlined flex-shrink-0 text-[18px] text-[var(--color-text-secondary)]">expand_more</span>
-            </Button>
-          }
-        />
-        <div className="mt-3 flex flex-wrap items-center gap-2 text-xs text-[var(--color-text-tertiary)]">
-          <span className="inline-flex items-center rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] px-2 py-1 font-medium text-[var(--color-text-secondary)]">
-            {outputStyleScopeLabel}
-          </span>
-          {selectedOutputStyle && (
-            <span className="inline-flex items-center rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] px-2 py-1">
-              {getOutputStyleSourceLabel(selectedOutputStyle.source, t)}
-            </span>
-          )}
-          <span className="min-w-0 flex-1 leading-5">{outputStyleScopeHint}</span>
-        </div>
-        <p className="mt-2 text-xs leading-5 text-[var(--color-text-tertiary)]">
-          {t('settings.general.outputStyleRestartHint')}
-        </p>
-        {outputStyleError && (
-          <p className="mt-2 text-xs leading-5 text-[var(--color-error)]">
-            {outputStyleError}
-          </p>
-        )}
-      </Card>
-
-      <div className="mt-8">
-        <h2 className="text-[16.5px] font-semibold leading-tight text-[var(--color-text-primary)] mb-1" style={{ fontFamily: 'var(--font-headline)' }}>{t('settings.general.defaultPermissionTitle')}</h2>
-        <p className="text-sm text-[var(--color-text-tertiary)] mb-3">{t('settings.general.defaultPermissionDescription')}</p>
-        <Card radius="xl" surface="low" padding="none" className="px-4 py-4">
-          <div className="flex flex-wrap items-center justify-between gap-3">
-            <div className="min-w-0">
-              <div className="text-sm font-medium text-[var(--color-text-primary)]">
-                {t('settings.general.defaultPermissionLabel')}
-              </div>
-              <div className="mt-1 text-xs leading-5 text-[var(--color-text-tertiary)]">
-                {t('settings.general.defaultPermissionHint')}
-              </div>
-            </div>
             <PermissionModeSelector
               value={permissionMode}
               onChange={(mode) => void setPermissionMode(mode)}
               workDir={t('settings.general.defaultPermissionScope')}
               menuPlacement="bottom"
             />
-          </div>
-        </Card>
-      </div>
-
-      <div className="mt-8">
-        <h2 className="text-[16.5px] font-semibold leading-tight text-[var(--color-text-primary)] mb-1" style={{ fontFamily: 'var(--font-headline)' }}>{t('settings.general.effortTitle')}</h2>
-        <p className="text-sm text-[var(--color-text-tertiary)] mb-3">{t('settings.general.effortDescription')}</p>
-        <Card radius="xl" surface="low" padding="none" className="px-4 py-4">
-          <div className="flex flex-wrap items-center justify-between gap-3">
-            <div className="min-w-0 flex-1">
-              <div className="text-sm font-medium text-[var(--color-text-primary)]">
-                {t('settings.general.effortDefaultLabel')}
-              </div>
-              <div className="mt-1 text-xs leading-5 text-[var(--color-text-tertiary)]">
-                {currentModel
-                  ? t('settings.general.effortModelHint', { model: currentModel.name || currentModel.id })
-                  : t('settings.general.effortNoModelHint')}
-              </div>
-            </div>
+          </SettingsRow>
+          <SettingsRow
+            title={t('settings.general.effortDefaultLabel')}
+            description={currentModel
+              ? t('settings.general.effortModelHint', { model: currentModel.name || currentModel.id })
+              : t('settings.general.effortNoModelHint')}
+          >
             <Button
               ref={effortButtonRef}
               variant="secondary"
@@ -1034,137 +970,130 @@ export function GeneralSettings() {
                 : t('settings.general.effortUnavailable')}
               aria-expanded={selectedEffort ? effortOpen : undefined}
               onClick={() => setEffortOpen((open) => !open)}
-              icon={(
-                <span className="material-symbols-outlined text-[16px]" aria-hidden="true">
-                  neurology
-                </span>
-              )}
+              icon={<Brain size={14} strokeWidth={1.75} aria-hidden="true" />}
               iconPosition="start"
             >
               {selectedEffort ? effortLabels[selectedEffort] : t('settings.general.effortUnavailable')}
-              <span className="material-symbols-outlined text-[14px]" aria-hidden="true">
-                expand_more
-              </span>
+              <ChevronDown size={14} strokeWidth={1.75} aria-hidden="true" className="text-[var(--color-text-tertiary)]" />
             </Button>
-          </div>
-        </Card>
-        {selectedEffort && (
-          <ReasoningEffortPopover
-            open={effortOpen}
-            anchorRef={effortButtonRef}
-            options={effortOptions}
-            value={selectedEffort}
-            labels={effortLabels}
-            ariaLabel={t('settings.general.effortDefaultLabel')}
-            onChange={(level) => void setEffort(level)}
-            onClose={() => setEffortOpen(false)}
-          />
-        )}
-      </div>
-
-      <div className="mt-8">
-        <h2 className="text-[16.5px] font-semibold leading-tight text-[var(--color-text-primary)] mb-1" style={{ fontFamily: 'var(--font-headline)' }}>{t('settings.general.thinkingTitle')}</h2>
-        <p className="text-sm text-[var(--color-text-tertiary)] mb-3">{t('settings.general.thinkingDescription')}</p>
-        <label className="relative flex items-start gap-3 rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)] px-4 py-3 cursor-pointer hover:border-[var(--color-border-focus)] transition-colors">
-          <input
-            type="checkbox"
-            aria-label={t('settings.general.thinkingEnabled')}
+            {selectedEffort && (
+              <ReasoningEffortPopover
+                open={effortOpen}
+                anchorRef={effortButtonRef}
+                options={effortOptions}
+                value={selectedEffort}
+                labels={effortLabels}
+                ariaLabel={t('settings.general.effortDefaultLabel')}
+                onChange={(level) => void setEffort(level)}
+                onClose={() => setEffortOpen(false)}
+              />
+            )}
+          </SettingsRow>
+          <SettingsSwitchRow
+            title={t('settings.general.thinkingEnabled')}
+            description={t('settings.general.thinkingDescription')}
             checked={thinkingEnabled}
-            onChange={(e) => void setThinkingEnabled(e.target.checked)}
-            className={SETTINGS_CHECKBOX_INPUT_CLASS}
+            onChange={(enabled) => void setThinkingEnabled(enabled)}
           />
-          <SettingsCheckboxMark checked={thinkingEnabled} />
-          <div className="min-w-0">
-            <div className="text-sm font-medium text-[var(--color-text-primary)]">
-              {t('settings.general.thinkingEnabled')}
-            </div>
-            <div className="text-xs text-[var(--color-text-tertiary)] mt-1 leading-5">
-              {t('settings.general.thinkingHint')}
-            </div>
-          </div>
-        </label>
-      </div>
-
-      {/*
-        Only the editors we detect, never every installed application: the menu
-        offers one editor slot, and this chooses which. Hidden entirely when none
-        are installed — there is nothing to pick between.
-      */}
-      {detectedEditors.length > 0 && (
-        <SettingsSection
-          className="mt-8"
-          title={t('settings.general.defaultEditorTitle')}
-          description={t('settings.general.defaultEditorDescription')}
-        >
-          <div className="flex flex-wrap gap-2">
-            <SettingsPill
-              selected={editorTargetId === null}
-              onClick={() => setEditorTargetId(null)}
+          <SettingsRow
+            title={t('settings.general.outputStyleTitle')}
+            description={selectedOutputStyleDescription || t('settings.general.outputStyleDescription')}
+            footer={(
+              <div className="space-y-1.5 text-xs leading-[1.5] text-[var(--color-text-tertiary)]">
+                <div className="flex flex-wrap items-center gap-1.5">
+                  <Badge size="sm">{outputStyleScopeLabel}</Badge>
+                  {selectedOutputStyle && (
+                    <Badge size="sm">{getOutputStyleSourceLabel(selectedOutputStyle.source, t)}</Badge>
+                  )}
+                  <span className="min-w-0">{outputStyleScopeHint}</span>
+                </div>
+                <p>{t('settings.general.outputStyleRestartHint')}</p>
+                {outputStyleError && <p className="text-[var(--color-error)]">{outputStyleError}</p>}
+              </div>
+            )}
+          >
+            <Dropdown<string>
+              items={outputStyleItems}
+              value={outputStyle}
+              onChange={(value) => void handleOutputStyleChange(value)}
+              width={360}
+              maxHeight={360}
+              align="right"
+              trigger={
+                <PickerButton
+                  aria-label={t('settings.general.outputStyleSelectLabel')}
+                  disabled={outputStylesLoading}
+                >
+                  {outputStylesLoading
+                    ? t('settings.general.outputStyleLoading')
+                    : selectedOutputStyleLabel}
+                </PickerButton>
+              }
+            />
+          </SettingsRow>
+          {/*
+            Only the editors we detect, never every installed application: the menu
+            offers one editor slot, and this chooses which. Hidden entirely when none
+            are installed — there is nothing to pick between.
+          */}
+          {detectedEditors.length > 0 && (
+            <SettingsRow
+              title={t('settings.general.defaultEditorTitle')}
+              description={t('settings.general.defaultEditorDescription')}
             >
-              {t('settings.general.defaultEditorAuto')}
-            </SettingsPill>
-            {detectedEditors.map((target) => (
-              <SettingsPill
-                key={target.id}
-                selected={editorTargetId === target.id}
-                onClick={() => setEditorTargetId(target.id)}
-              >
-                {target.label}
-              </SettingsPill>
-            ))}
-          </div>
-        </SettingsSection>
-      )}
-
-      <SettingsSection
-        className="mt-8"
-        title={t('settings.general.workflowKeywordTitle')}
-        description={t('settings.general.workflowKeywordDescription')}
-      >
-        <div className="rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)] px-4 py-3">
-          <Switch
+              <Dropdown<string>
+                items={[
+                  { value: '', label: t('settings.general.defaultEditorAuto') },
+                  ...detectedEditors.map((target) => ({ value: target.id, label: target.label })),
+                ]}
+                value={editorTargetId ?? ''}
+                onChange={(value) => setEditorTargetId(value || null)}
+                width={240}
+                maxHeight={320}
+                align="right"
+                label={t('settings.general.defaultEditorTitle')}
+                trigger={
+                  <PickerButton aria-label={t('settings.general.defaultEditorTitle')}>
+                    {detectedEditors.find((target) => target.id === editorTargetId)?.label
+                      ?? t('settings.general.defaultEditorAuto')}
+                  </PickerButton>
+                }
+              />
+            </SettingsRow>
+          )}
+          <SettingsSwitchRow
+            title={t('settings.general.workflowKeywordEnabled')}
+            description={t('settings.general.workflowKeywordDescription')}
             checked={workflowKeywordTriggerEnabled}
             onChange={(enabled) => void setWorkflowKeywordTriggerEnabled(enabled)}
-            label={t('settings.general.workflowKeywordEnabled')}
-            description={t('settings.general.workflowKeywordHint')}
           />
-        </div>
-      </SettingsSection>
-
-      <SettingsSection
-        className="mt-8"
-        title={t('settings.general.agentTeamsTitle')}
-        description={t('settings.general.agentTeamsDescription')}
-      >
-        <div className="rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)] px-4 py-3">
-          <Switch
+          <SettingsSwitchRow
+            title={t('settings.general.agentTeamsEnabled')}
+            description={(
+              <>
+                <span>{t('settings.general.agentTeamsDescription')}</span>{' '}
+                <span>{t('settings.general.agentTeamsHint')}</span>
+              </>
+            )}
             checked={agentTeamsEnabled}
             onChange={(enabled) => void handleAgentTeamsChange(enabled)}
             disabled={agentTeamsSaving}
-            label={t('settings.general.agentTeamsEnabled')}
-            description={t('settings.general.agentTeamsHint')}
           />
-        </div>
-      </SettingsSection>
-
-      <SettingsSection
-        className="mt-8"
-        title={t('settings.general.autoQuestionTitle')}
-        description={t('settings.general.autoQuestionDescription')}
-      >
-        <div className="rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)] px-4 py-3">
-          <Switch
+          <SettingsSwitchRow
+            title={t('settings.general.autoQuestionEnabled')}
+            description={t('settings.general.autoQuestionHint')}
             checked={autoQuestion.enabled}
             onChange={(enabled) => void setAutoQuestion({ ...autoQuestion, enabled }).catch(() => {
               addToast({ type: 'error', message: t('settings.general.autoQuestionSaveFailed') })
             })}
-            label={t('settings.general.autoQuestionEnabled')}
-            description={t('settings.general.autoQuestionHint')}
           />
           {autoQuestion.enabled && (
-            <div className="mt-4">
+            <SettingsRow title={t('settings.general.autoQuestionTimeout')} layout="inline">
               <SelectField
                 label={t('settings.general.autoQuestionTimeout')}
+                labelHidden
+                size="md"
+                className="w-auto min-w-[120px]"
                 value={String(autoQuestion.timeoutMinutes)}
                 options={AUTO_QUESTION_TIMEOUT_OPTIONS.map((minutes) => ({
                   value: String(minutes),
@@ -1177,98 +1106,39 @@ export function GeneralSettings() {
                   addToast({ type: 'error', message: t('settings.general.autoQuestionSaveFailed') })
                 })}
               />
-            </div>
+            </SettingsRow>
           )}
-        </div>
+          <SettingsSwitchRow
+            title={t('settings.general.autoDreamEnabled')}
+            description={autoDreamEnabled
+              ? t('settings.general.autoDreamHintOn')
+              : t('settings.general.autoDreamHintOff')}
+            checked={autoDreamEnabled}
+            onChange={handleAutoDreamToggle}
+          />
+        </SettingsGroup>
       </SettingsSection>
 
-      <div>
-        <h2 className="text-[16.5px] font-semibold leading-tight text-[var(--color-text-primary)] mb-1" style={{ fontFamily: 'var(--font-headline)' }}>{t('settings.general.autoDreamTitle')}</h2>
-        <p className="text-sm text-[var(--color-text-tertiary)] mb-3">{t('settings.general.autoDreamDescription')}</p>
-        <label className="relative flex items-start gap-3 rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)] px-4 py-3 cursor-pointer hover:border-[var(--color-border-focus)] transition-colors">
-          <input
-            type="checkbox"
-            aria-label={t('settings.general.autoDreamEnabled')}
-            checked={autoDreamEnabled}
-            onChange={(e) => handleAutoDreamToggle(e.target.checked)}
-            className={SETTINGS_CHECKBOX_INPUT_CLASS}
+      <SettingsSection title={t('settings.general.notificationsTitle')} description={t('settings.general.notificationsDescription')}>
+        <SettingsGroup>
+          <SettingsSwitchRow
+            title={t('settings.general.notificationsEnabled')}
+            description={desktopNotificationsEnabled
+              ? t('settings.general.notificationsHintOn')
+              : t('settings.general.notificationsHintOff')}
+            checked={desktopNotificationsEnabled}
+            onChange={(enabled) => void handleDesktopNotificationsToggle(enabled)}
           />
-          <SettingsCheckboxMark checked={autoDreamEnabled} />
-          <div className="min-w-0">
-            <div className="text-sm font-medium text-[var(--color-text-primary)]">
-              {t('settings.general.autoDreamEnabled')}
-            </div>
-            <div className="text-xs text-[var(--color-text-tertiary)] mt-1 leading-5">
-              {autoDreamEnabled
-                ? t('settings.general.autoDreamHintOn')
-                : t('settings.general.autoDreamHintOff')}
-            </div>
-          </div>
-        </label>
-      </div>
-
-      <div className="mt-8">
-        <h2 className="text-[16.5px] font-semibold leading-tight text-[var(--color-text-primary)] mb-1" style={{ fontFamily: 'var(--font-headline)' }}>{t('settings.general.traceTitle')}</h2>
-        <p className="text-sm text-[var(--color-text-tertiary)] mb-3">{t('settings.general.traceDescription')}</p>
-        <label className="relative flex items-start gap-3 rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)] px-4 py-3 cursor-pointer hover:border-[var(--color-border-focus)] transition-colors">
-          <input
-            type="checkbox"
-            aria-label={t('settings.general.traceEnabled')}
-            checked={traceCapture.enabled}
-            onChange={(e) => void setTraceCaptureEnabled(e.target.checked)}
-            className={SETTINGS_CHECKBOX_INPUT_CLASS}
-          />
-          <SettingsCheckboxMark checked={traceCapture.enabled} />
-          <div className="min-w-0 flex-1">
-            <div className="text-sm font-medium text-[var(--color-text-primary)]">
-              {t('settings.general.traceEnabled')}
-            </div>
-            <div className="text-xs text-[var(--color-text-tertiary)] mt-1 leading-5">
-              {traceCapture.enabled ? t('settings.general.traceHintOn') : t('settings.general.traceHintOff')}
-            </div>
-            {traceCapture.storageDir && (
-              <div className="mt-2 truncate rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] px-2 py-1 font-mono text-[11px] text-[var(--color-text-secondary)]">
-                {traceCapture.storageDir}
-              </div>
-            )}
-          </div>
-        </label>
-      </div>
-
-      <div className="mt-8">
-        <h2 className="text-[16.5px] font-semibold leading-tight text-[var(--color-text-primary)] mb-1" style={{ fontFamily: 'var(--font-headline)' }}>{t('settings.general.notificationsTitle')}</h2>
-        <p className="text-sm text-[var(--color-text-tertiary)] mb-3">{t('settings.general.notificationsDescription')}</p>
-        <Card radius="xl" surface="low" padding="none" className="px-4 py-3">
-          <label className="relative flex items-start gap-3 cursor-pointer">
-            <input
-              type="checkbox"
-              aria-label={t('settings.general.notificationsEnabled')}
-              checked={desktopNotificationsEnabled}
-              onChange={(e) => void handleDesktopNotificationsToggle(e.target.checked)}
-              className={SETTINGS_CHECKBOX_INPUT_CLASS}
-            />
-            <SettingsCheckboxMark checked={desktopNotificationsEnabled} />
-            <div className="min-w-0 flex-1">
-              <div className="text-sm font-medium text-[var(--color-text-primary)]">
-                {t('settings.general.notificationsEnabled')}
-              </div>
-              <div className="text-xs text-[var(--color-text-tertiary)] mt-1 leading-5">
-                {desktopNotificationsEnabled
-                  ? t('settings.general.notificationsHintOn')
-                  : t('settings.general.notificationsHintOff')}
-              </div>
-            </div>
-          </label>
           {desktopNotificationsEnabled && (
-            <div className="mt-3 flex items-center justify-between gap-3 border-t border-[var(--color-border-separator)] pt-3">
-              <div className="min-w-0 text-xs text-[var(--color-text-tertiary)]">
-                {t('settings.general.notificationsStatus')}: {notificationStatusLabel[notificationPermission]}
-              </div>
+            <SettingsRow
+              layout="inline"
+              title={<>{t('settings.general.notificationsStatus')}: {notificationStatusLabel[notificationPermission]}</>}
+            >
               {notificationPermission !== 'granted' && notificationPermission !== 'unsupported' && (
                 <Button
-                  size="sm"
+                  size="base"
                   variant="secondary"
-                  className="px-3 whitespace-nowrap"
+                  className="whitespace-nowrap"
                   disabled={notificationActionRunning}
                   onClick={() => void handleNotificationPermissionAction()}
                 >
@@ -1277,79 +1147,50 @@ export function GeneralSettings() {
                     : t('settings.general.notificationsAuthorize')}
                 </Button>
               )}
-            </div>
+            </SettingsRow>
           )}
-        </Card>
-      </div>
+        </SettingsGroup>
+      </SettingsSection>
 
-      <div className="mt-8">
-        <h2 className="text-[16.5px] font-semibold leading-tight text-[var(--color-text-primary)] mb-1" style={{ fontFamily: 'var(--font-headline)' }}>{t('settings.general.chatSendBehaviorTitle')}</h2>
-        <p className="text-sm text-[var(--color-text-tertiary)] mb-3">{t('settings.general.chatSendBehaviorDescription')}</p>
-        <Card radius="xl" surface="low" padding="none" className="grid grid-cols-2 gap-2 p-2">
-          {CHAT_SEND_BEHAVIORS.map((option) => (
-            <button
-              key={option.value}
-              type="button"
-              onClick={() => void setChatSendBehavior(option.value)}
-              aria-pressed={chatSendBehavior === option.value}
-              className={`rounded-[var(--radius-lg)] border px-3 py-2 text-left transition-colors ${
-                chatSendBehavior === option.value
-                  ? 'border-[var(--color-brand)] bg-[var(--color-surface-selected)] text-[var(--color-text-primary)]'
-                  : 'border-[var(--color-border)] text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-hover)]'
-              }`}
-            >
-              <div className="text-xs font-semibold">{option.label}</div>
-              <div className="mt-1 text-[11px] leading-4 text-[var(--color-text-tertiary)]">
-                {option.description}
-              </div>
-            </button>
-          ))}
-        </Card>
-      </div>
-
-      {uiZoomSection}
-
-      <ChatAppearanceSettings />
-
-      <div className="mt-8">
-        <h2 className="text-[16.5px] font-semibold leading-tight text-[var(--color-text-primary)] mb-1" style={{ fontFamily: 'var(--font-headline)' }}>{t('settings.general.networkTitle')}</h2>
-        <p className="text-sm text-[var(--color-text-tertiary)] mb-3">{t('settings.general.networkDescription')}</p>
-        <Card radius="xl" surface="low" padding="none" className="px-4 py-4">
-          <div className="grid grid-cols-2 gap-2">
-            {NETWORK_PROXY_MODES.map((mode) => (
-              <button
-                key={mode.value}
-                type="button"
-                onClick={() => {
-                  setNetworkDraft((current) => ({
-                    ...current,
-                    proxy: { ...current.proxy, mode: mode.value },
-                  }))
-                  setNetworkSaveError(null)
-                }}
-                aria-pressed={networkDraft.proxy.mode === mode.value}
-                className={`rounded-[var(--radius-lg)] border px-3 py-2 text-left transition-colors ${
-                  networkDraft.proxy.mode === mode.value
-                    ? 'border-[var(--color-brand)] bg-[var(--color-surface-selected)] text-[var(--color-text-primary)]'
-                    : 'border-[var(--color-border)] text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-hover)]'
-                }`}
-              >
-                <div className="text-xs font-semibold">{mode.label}</div>
-                <div className="mt-1 text-[11px] leading-4 text-[var(--color-text-tertiary)]">
-                  {mode.description}
-                </div>
-              </button>
-            ))}
-          </div>
+      <SettingsSection title={t('settings.general.networkTitle')} description={t('settings.general.networkDescription')}>
+        <SettingsGroup>
+          <SettingsBlock>
+            <SegmentedControl<NetworkProxyMode>
+              label={t('settings.general.networkTitle')}
+              layout="fill"
+              size="sm"
+              value={networkDraft.proxy.mode}
+              onChange={(mode) => {
+                setNetworkDraft((current) => ({
+                  ...current,
+                  proxy: { ...current.proxy, mode },
+                }))
+                setNetworkSaveError(null)
+              }}
+              items={NETWORK_PROXY_MODES.map(({ value, label }) => ({ value, label }))}
+            />
+            {selectedProxyMode && (
+              <p className="mt-2 text-xs leading-[1.5] text-[var(--color-text-tertiary)]">{selectedProxyMode.description}</p>
+            )}
+          </SettingsBlock>
 
           {networkDraft.proxy.mode === 'manual' && (
-            <div className="mt-4">
+            <SettingsRow
+              title={t('settings.general.networkProxyUrl')}
+              htmlFor="network-proxy-url"
+              description={networkProxyError
+                ? <span className="text-[var(--color-error)]">{networkProxyError}</span>
+                : t('settings.general.networkProxyUrlHint')}
+            >
               <Input
                 id="network-proxy-url"
-                label={t('settings.general.networkProxyUrl')}
+                size="md"
+                containerClassName="w-full sm:w-[260px]"
+                className={`font-mono text-xs ${fieldInvalidClass}`}
                 value={networkDraft.proxy.url}
                 placeholder="http://127.0.0.1:7890"
                 autoComplete="off"
+                aria-invalid={networkProxyError ? true : undefined}
                 onChange={(event) => {
                   setNetworkDraft((current) => ({
                     ...current,
@@ -1358,157 +1199,129 @@ export function GeneralSettings() {
                   setNetworkSaveError(null)
                 }}
               />
-              <p className={`mt-1 text-[11px] leading-4 ${networkProxyError ? 'text-[var(--color-error)]' : 'text-[var(--color-text-tertiary)]'}`}>
-                {networkProxyError ?? t('settings.general.networkProxyUrlHint')}
-              </p>
-            </div>
+            </SettingsRow>
           )}
 
-          <div className="mt-4">
-            <div className="mb-2 flex items-center justify-between gap-3">
-              <label htmlFor="network-timeout-seconds" className="text-sm font-medium text-[var(--color-text-primary)]">
-                {t('settings.general.networkTimeout')}
-              </label>
-              <span className="rounded-[var(--radius-md)] bg-[var(--color-surface)] px-2 py-1 text-xs font-medium text-[var(--color-text-secondary)]">
-                {t('settings.general.networkTimeoutValue', { seconds: String(timeoutSeconds) })}
-              </span>
-            </div>
-            <div className="flex items-center gap-2">
-              <Button
-                type="button"
-                size="sm"
-                variant="secondary"
-                className="h-10 w-10 px-0"
-                aria-label={t('settings.general.networkTimeoutDecrease')}
-                onClick={() => setNetworkTimeoutSeconds((parsedNetworkTimeoutSeconds ?? timeoutSeconds) - NETWORK_TIMEOUT_STEP_SECONDS)}
-              >
-                -30
-              </Button>
-              <div className="relative min-w-0 flex-1">
-                <input
-                  id="network-timeout-seconds"
-                  type="number"
-                  min={NETWORK_TIMEOUT_MIN_SECONDS}
-                  max={NETWORK_TIMEOUT_MAX_SECONDS}
-                  step={1}
-                  inputMode="numeric"
-                  value={networkTimeoutInput}
-                  aria-invalid={networkTimeoutError ? true : undefined}
-                  aria-describedby="network-timeout-help"
-                  onChange={(event) => {
-                    const nextValue = event.currentTarget.value
-                    if (!/^\d*$/.test(nextValue)) return
-                    setNetworkTimeoutInput(nextValue)
-                    const seconds = Number(nextValue)
-                    if (nextValue.length > 0 && seconds >= NETWORK_TIMEOUT_MIN_SECONDS && seconds <= NETWORK_TIMEOUT_MAX_SECONDS) {
-                      setNetworkDraft((current) => ({
-                        ...current,
-                        aiRequestTimeoutMs: seconds * 1000,
-                      }))
-                    }
-                    setNetworkSaveError(null)
-                  }}
-                  className={`h-10 w-full rounded-[var(--radius-md)] border bg-[var(--color-surface)] px-3 pr-12 text-sm text-[var(--color-text-primary)] outline-none transition-colors duration-150 placeholder:text-[var(--color-text-tertiary)] ${
-                    networkTimeoutError
-                      ? 'border-[var(--color-error)] focus:shadow-[var(--shadow-error-ring)]'
-                      : 'border-[var(--color-border)] focus:border-[var(--color-border-focus)] focus:shadow-[var(--shadow-focus-ring)]'
-                  }`}
-                />
-                <span className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-xs text-[var(--color-text-tertiary)]">
-                  {t('settings.general.networkTimeoutUnit')}
-                </span>
-              </div>
-              <Button
-                type="button"
-                size="sm"
-                variant="secondary"
-                className="h-10 w-10 px-0"
-                aria-label={t('settings.general.networkTimeoutIncrease')}
-                onClick={() => setNetworkTimeoutSeconds((parsedNetworkTimeoutSeconds ?? timeoutSeconds) + NETWORK_TIMEOUT_STEP_SECONDS)}
-              >
-                +30
-              </Button>
-            </div>
-            <p
-              id="network-timeout-help"
-              className={`mt-2 text-xs leading-5 ${networkTimeoutError ? 'text-[var(--color-error)]' : 'text-[var(--color-text-tertiary)]'}`}
-            >
-              {networkTimeoutError ?? t('settings.general.networkTimeoutHint')}
-            </p>
-          </div>
-
-          <div className="mt-4 flex items-center justify-between gap-3">
-            <p className="min-w-0 text-[11px] leading-4 text-[var(--color-text-tertiary)]">
-              {t('settings.general.networkScopeHint')}
-            </p>
+          <SettingsRow
+            title={t('settings.general.networkTimeout')}
+            htmlFor="network-timeout-seconds"
+            descriptionId="network-timeout-help"
+            description={networkTimeoutError
+              ? <span className="text-[var(--color-error)]">{networkTimeoutError}</span>
+              : t('settings.general.networkTimeoutHint')}
+          >
             <Button
-              size="sm"
+              type="button"
+              size="base"
               variant="secondary"
-              className="min-w-[72px] px-4 whitespace-nowrap"
+              className="px-2.5 font-mono tabular-nums"
+              aria-label={t('settings.general.networkTimeoutDecrease')}
+              onClick={() => setNetworkTimeoutSeconds((parsedNetworkTimeoutSeconds ?? timeoutSeconds) - NETWORK_TIMEOUT_STEP_SECONDS)}
+            >
+              -30
+            </Button>
+            <NumberField
+              id="network-timeout-seconds"
+              unit={t('settings.general.networkTimeoutUnit')}
+              min={NETWORK_TIMEOUT_MIN_SECONDS}
+              max={NETWORK_TIMEOUT_MAX_SECONDS}
+              value={networkTimeoutInput}
+              invalid={!!networkTimeoutError}
+              describedBy="network-timeout-help"
+              onChange={(nextValue) => {
+                if (!/^\d*$/.test(nextValue)) return
+                setNetworkTimeoutInput(nextValue)
+                const seconds = Number(nextValue)
+                if (nextValue.length > 0 && seconds >= NETWORK_TIMEOUT_MIN_SECONDS && seconds <= NETWORK_TIMEOUT_MAX_SECONDS) {
+                  setNetworkDraft((current) => ({
+                    ...current,
+                    aiRequestTimeoutMs: seconds * 1000,
+                  }))
+                }
+                setNetworkSaveError(null)
+              }}
+            />
+            <Button
+              type="button"
+              size="base"
+              variant="secondary"
+              className="px-2.5 font-mono tabular-nums"
+              aria-label={t('settings.general.networkTimeoutIncrease')}
+              onClick={() => setNetworkTimeoutSeconds((parsedNetworkTimeoutSeconds ?? timeoutSeconds) + NETWORK_TIMEOUT_STEP_SECONDS)}
+            >
+              +30
+            </Button>
+          </SettingsRow>
+
+          <SettingsBlock className="flex items-center justify-between gap-4">
+            <div className="min-w-0 text-xs leading-[1.5]">
+              <p className="text-[var(--color-text-tertiary)]">{t('settings.general.networkScopeHint')}</p>
+              {networkSaveError && (
+                <p className="mt-1 text-[var(--color-error)]">{networkSaveError}</p>
+              )}
+            </div>
+            <Button
+              size="base"
+              variant="secondary"
+              className="shrink-0 whitespace-nowrap"
               disabled={!networkDirty || !!networkProxyError || !!networkTimeoutError || isSavingNetwork}
               loading={isSavingNetwork}
               onClick={() => void saveNetworkSettings()}
             >
               {t('settings.general.networkSave')}
             </Button>
-          </div>
+          </SettingsBlock>
 
-          {networkSaveError && (
-            <p className="mt-2 text-[11px] leading-4 text-[var(--color-error)]">
-              {networkSaveError}
-            </p>
-          )}
-        </Card>
-      </div>
-
-      <div className="mt-8">
-        <h2 className="text-[16.5px] font-semibold leading-tight text-[var(--color-text-primary)] mb-1" style={{ fontFamily: 'var(--font-headline)' }}>{t('settings.general.webFetchPreflightTitle')}</h2>
-        <p className="text-sm text-[var(--color-text-tertiary)] mb-3">{t('settings.general.webFetchPreflightDescription')}</p>
-        <label className="relative flex items-start gap-3 rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)] px-4 py-3 cursor-pointer hover:border-[var(--color-border-focus)] transition-colors">
-          <input
-            type="checkbox"
-            aria-label={t('settings.general.webFetchPreflightEnabled')}
+          <SettingsSwitchRow
+            title={t('settings.general.webFetchPreflightEnabled')}
+            description={(
+              <>
+                <span>{t('settings.general.webFetchPreflightDescription')}</span>{' '}
+                <span>{t('settings.general.webFetchPreflightHint')}</span>
+              </>
+            )}
             checked={skipWebFetchPreflight}
-            onChange={(e) => void setSkipWebFetchPreflight(e.target.checked)}
-            className={SETTINGS_CHECKBOX_INPUT_CLASS}
+            onChange={(enabled) => void setSkipWebFetchPreflight(enabled)}
           />
-          <SettingsCheckboxMark checked={skipWebFetchPreflight} />
-          <div className="min-w-0">
-            <div className="text-sm font-medium text-[var(--color-text-primary)]">
-              {t('settings.general.webFetchPreflightEnabled')}
-            </div>
-            <div className="text-xs text-[var(--color-text-tertiary)] mt-1 leading-5">
-              {t('settings.general.webFetchPreflightHint')}
-            </div>
-          </div>
-        </label>
-      </div>
+        </SettingsGroup>
+      </SettingsSection>
 
-      <div className="mt-8">
-        <h2 className="text-[16.5px] font-semibold leading-tight text-[var(--color-text-primary)] mb-1" style={{ fontFamily: 'var(--font-headline)' }}>{t('settings.general.webSearchTitle')}</h2>
-        <p className="text-sm text-[var(--color-text-tertiary)] mb-3">{t('settings.general.webSearchDescription')}</p>
-        <Card radius="xl" surface="low" padding="none" className="px-4 py-4">
-          <div className="grid grid-cols-5 gap-1.5 mb-4">
-            {WEB_SEARCH_MODES.map(({ value, label }) => (
-              <button
-                key={value}
-                onClick={() => setWebSearchDraft({ ...webSearchDraft, mode: value })}
-                className={`h-9 px-2 text-xs font-semibold rounded-[var(--radius-lg)] border transition-all truncate ${
-                  (webSearchDraft.mode ?? 'auto') === value
-                    ? 'bg-[var(--color-brand)] text-[var(--color-on-primary)] border-[var(--color-brand)]'
-                    : 'border-[var(--color-border)] text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-hover)]'
-                }`}
-                title={label}
-              >
-                {label}
-              </button>
-            ))}
-          </div>
-          <div className="grid grid-cols-1 gap-3">
+      <SettingsSection title={t('settings.general.webSearchTitle')} description={t('settings.general.webSearchDescription')}>
+        <SettingsGroup>
+          <SettingsBlock>
+            <SegmentedControl<WebSearchMode>
+              label={t('settings.general.webSearchTitle')}
+              layout="fill"
+              size="sm"
+              value={webSearchDraft.mode ?? 'auto'}
+              onChange={(mode) => setWebSearchDraft({ ...webSearchDraft, mode })}
+              items={WEB_SEARCH_MODES.map(({ value, label }) => ({ value, label, title: label }))}
+            />
+            <p className="mt-2 text-xs leading-[1.5] text-[var(--color-text-tertiary)]">{t('settings.general.webSearchHint')}</p>
+          </SettingsBlock>
+          <SettingsRow
+            title={t('settings.general.webSearchTavilyKey')}
+            htmlFor="web-search-tavily-key"
+            description={(
+              <>
+                {t('settings.general.webSearchTavilyFreeHint')}{' '}
+                <a
+                  href="https://app.tavily.com/home"
+                  target="_blank"
+                  rel="noreferrer"
+                  aria-label={t('settings.general.webSearchTavilyApiKeyLink')}
+                  className="whitespace-nowrap text-[var(--color-text-accent)] hover:underline"
+                >
+                  {t('settings.general.webSearchGetApiKey')}
+                </a>
+              </>
+            )}
+          >
             <Input
               id="web-search-tavily-key"
               type="password"
-              label={t('settings.general.webSearchTavilyKey')}
+              size="md"
+              containerClassName="w-full sm:w-[260px]"
               value={webSearchDraft.tavilyApiKey ?? ''}
               placeholder="tvly-..."
               autoComplete="off"
@@ -1519,22 +1332,30 @@ export function GeneralSettings() {
                 })
               }
             />
-            <div className="-mt-1 flex items-center justify-between gap-3 text-xs text-[var(--color-text-tertiary)]">
-              <span>{t('settings.general.webSearchTavilyFreeHint')}</span>
-              <a
-                href="https://app.tavily.com/home"
-                target="_blank"
-                rel="noreferrer"
-                aria-label={t('settings.general.webSearchTavilyApiKeyLink')}
-                className="font-medium text-[var(--color-brand)] hover:underline whitespace-nowrap"
-              >
-                {t('settings.general.webSearchGetApiKey')}
-              </a>
-            </div>
+          </SettingsRow>
+          <SettingsRow
+            title={t('settings.general.webSearchBraveKey')}
+            htmlFor="web-search-brave-key"
+            description={(
+              <>
+                {t('settings.general.webSearchBraveFreeHint')}{' '}
+                <a
+                  href="https://api-dashboard.search.brave.com/app/keys"
+                  target="_blank"
+                  rel="noreferrer"
+                  aria-label={t('settings.general.webSearchBraveApiKeyLink')}
+                  className="whitespace-nowrap text-[var(--color-text-accent)] hover:underline"
+                >
+                  {t('settings.general.webSearchGetApiKey')}
+                </a>
+              </>
+            )}
+          >
             <Input
               id="web-search-brave-key"
               type="password"
-              label={t('settings.general.webSearchBraveKey')}
+              size="md"
+              containerClassName="w-full sm:w-[260px]"
               value={webSearchDraft.braveApiKey ?? ''}
               placeholder={t('settings.general.webSearchBravePlaceholder')}
               autoComplete="off"
@@ -1545,37 +1366,36 @@ export function GeneralSettings() {
                 })
               }
             />
-            <div className="-mt-1 flex items-center justify-between gap-3 text-xs text-[var(--color-text-tertiary)]">
-              <span>{t('settings.general.webSearchBraveFreeHint')}</span>
-              <a
-                href="https://api-dashboard.search.brave.com/app/keys"
-                target="_blank"
-                rel="noreferrer"
-                aria-label={t('settings.general.webSearchBraveApiKeyLink')}
-                className="font-medium text-[var(--color-brand)] hover:underline whitespace-nowrap"
-              >
-                {t('settings.general.webSearchGetApiKey')}
-              </a>
-            </div>
-          </div>
-          <div className="mt-4 flex flex-col gap-3">
-            <p className="text-xs text-[var(--color-text-tertiary)] leading-5">
-              {t('settings.general.webSearchHint')}
-            </p>
-            <div className="flex justify-end">
-              <Button
-                size="sm"
-                variant="secondary"
-                className="min-w-[72px] px-4 whitespace-nowrap"
-                disabled={!webSearchDirty}
-                onClick={() => void setWebSearch(webSearchDraft)}
-              >
-                {t('settings.general.webSearchSave')}
-              </Button>
-            </div>
-          </div>
-        </Card>
-      </div>
+          </SettingsRow>
+          <SettingsBlock className="flex justify-end">
+            <Button
+              size="base"
+              variant="secondary"
+              className="whitespace-nowrap"
+              disabled={!webSearchDirty}
+              onClick={() => void setWebSearch(webSearchDraft)}
+            >
+              {t('settings.general.webSearchSave')}
+            </Button>
+          </SettingsBlock>
+        </SettingsGroup>
+      </SettingsSection>
+
+      <SettingsSection title={t('settings.general.traceTitle')} description={t('settings.general.traceDescription')}>
+        <SettingsGroup>
+          <SettingsSwitchRow
+            title={t('settings.general.traceEnabled')}
+            description={traceCapture.enabled ? t('settings.general.traceHintOn') : t('settings.general.traceHintOff')}
+            checked={traceCapture.enabled}
+            onChange={(enabled) => void setTraceCaptureEnabled(enabled)}
+            footer={traceCapture.storageDir ? (
+              <div className="truncate rounded-[var(--radius-sm)] bg-[var(--color-surface-container)] px-2 py-1 font-mono text-[11px] text-[var(--color-text-secondary)]">
+                {traceCapture.storageDir}
+              </div>
+            ) : undefined}
+          />
+        </SettingsGroup>
+      </SettingsSection>
 
       {/*
         Retention changes delete transcripts irreversibly and the server only
@@ -1583,202 +1403,167 @@ export function GeneralSettings() {
         would only ever see a 403 here.
       */}
       {!isTouchH5Document() && (
-      <div className="mt-8 border-t border-[var(--color-border)] pt-8">
-        <h2 className="text-[16.5px] font-semibold leading-tight text-[var(--color-text-primary)] mb-1" style={{ fontFamily: 'var(--font-headline)' }}>{t('settings.general.sessionRetentionTitle')}</h2>
-        <p className="text-sm text-[var(--color-text-tertiary)] mb-3">{t('settings.general.sessionRetentionDescription')}</p>
-
-        <Card radius="xl" surface="low" padding="none" className="px-4 py-4">
-          <div className="mb-2 flex items-center justify-between gap-3">
-            <label htmlFor="session-retention-days" className="text-sm font-medium text-[var(--color-text-primary)]">
-              {t('settings.general.sessionRetentionLabel')}
-            </label>
-            <span className="rounded-[var(--radius-md)] bg-[var(--color-surface)] px-2 py-1 text-xs font-medium text-[var(--color-text-secondary)]">
-              {effectiveRetentionDays === 0
-                ? t('settings.general.sessionRetentionCurrentOff')
-                : t('settings.general.sessionRetentionCurrent', { days: String(effectiveRetentionDays) })}
-            </span>
-          </div>
-          <div className="flex items-center gap-2">
-            <div className="relative min-w-0 flex-1">
-              <input
+        <SettingsSection title={t('settings.general.sessionRetentionTitle')} description={t('settings.general.sessionRetentionDescription')}>
+          <SettingsGroup>
+            <SettingsRow
+              title={t('settings.general.sessionRetentionLabel')}
+              htmlFor="session-retention-days"
+              descriptionId="session-retention-help"
+              description={(
+                <>
+                  <span className="text-[var(--color-text-secondary)]">
+                    {effectiveRetentionDays === 0
+                      ? t('settings.general.sessionRetentionCurrentOff')
+                      : t('settings.general.sessionRetentionCurrent', { days: String(effectiveRetentionDays) })}
+                  </span>
+                  {' · '}
+                  {retentionInputError
+                    ? <span className="text-[var(--color-error)]">{retentionInputError}</span>
+                    : <span>{t('settings.general.sessionRetentionHint')}</span>}
+                </>
+              )}
+              footer={retentionSaveError ? (
+                <p className="text-xs text-[var(--color-error)]">{retentionSaveError}</p>
+              ) : undefined}
+            >
+              <NumberField
                 id="session-retention-days"
-                type="number"
+                unit={t('settings.general.sessionRetentionUnit')}
                 min={0}
                 max={MAX_CLEANUP_PERIOD_DAYS}
-                step={1}
-                inputMode="numeric"
                 value={retentionInput}
-                aria-invalid={retentionInputError ? true : undefined}
-                aria-describedby="session-retention-help"
-                onChange={(event) => {
-                  const nextValue = event.currentTarget.value
+                invalid={!!retentionInputError}
+                describedBy="session-retention-help"
+                onChange={(nextValue) => {
                   if (!/^\d*$/.test(nextValue)) return
                   setRetentionInput(nextValue)
                   setRetentionSaveError(null)
                 }}
-                className={`h-10 w-full rounded-[var(--radius-md)] border bg-[var(--color-surface)] px-3 pr-14 text-sm text-[var(--color-text-primary)] outline-none transition-colors duration-150 placeholder:text-[var(--color-text-tertiary)] ${
-                  retentionInputError
-                    ? 'border-[var(--color-error)] focus:shadow-[var(--shadow-error-ring)]'
-                    : 'border-[var(--color-border)] focus:border-[var(--color-border-focus)] focus:shadow-[var(--shadow-focus-ring)]'
-                }`}
               />
-              <span className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-xs text-[var(--color-text-tertiary)]">
-                {t('settings.general.sessionRetentionUnit')}
-              </span>
-            </div>
-            <Button
-              size="sm"
-              variant="secondary"
-              className="min-w-[72px] px-4 whitespace-nowrap"
-              disabled={
-                !retentionDirty ||
-                !!retentionInputError ||
-                retentionActionRunning ||
-                retentionPreviewLoading
-              }
-              loading={retentionPreviewLoading || retentionActionRunning}
-              onClick={() => void openRetentionConfirm()}
-            >
-              {t('settings.general.sessionRetentionSave')}
-            </Button>
-          </div>
-          <p
-            id="session-retention-help"
-            className={`mt-2 text-xs leading-5 ${retentionInputError ? 'text-[var(--color-error)]' : 'text-[var(--color-text-tertiary)]'}`}
-          >
-            {retentionInputError ?? t('settings.general.sessionRetentionHint')}
-          </p>
-          {retentionSaveError && (
-            <p className="mt-2 text-[11px] leading-4 text-[var(--color-error)]">{retentionSaveError}</p>
-          )}
-        </Card>
-      </div>
+              <Button
+                size="base"
+                variant="secondary"
+                className="whitespace-nowrap"
+                disabled={
+                  !retentionDirty ||
+                  !!retentionInputError ||
+                  retentionActionRunning ||
+                  retentionPreviewLoading
+                }
+                loading={retentionPreviewLoading || retentionActionRunning}
+                onClick={() => void openRetentionConfirm()}
+              >
+                {t('settings.general.sessionRetentionSave')}
+              </Button>
+            </SettingsRow>
+          </SettingsGroup>
+        </SettingsSection>
       )}
 
       {isDesktopRuntime() && (
-        <div className="mt-8 border-t border-[var(--color-border)] pt-8">
-          <h2 className="text-[16.5px] font-semibold leading-tight text-[var(--color-text-primary)] mb-1" style={{ fontFamily: 'var(--font-headline)' }}>{t('settings.general.storageTitle')}</h2>
-          <p className="text-sm text-[var(--color-text-tertiary)] mb-3">{t('settings.general.storageDescription')}</p>
+        <SettingsSection title={t('settings.general.storageTitle')} description={t('settings.general.storageDescription')}>
+          <SettingsGroup>
+            <button
+              type="button"
+              disabled={migrationRunning}
+              onClick={() => {
+                if (isEnvironmentConfigDir) {
+                  setModeError(t('settings.general.storageEnvironmentSwitchBlocked'))
+                  return
+                }
+                if (appMode.mode !== 'default') {
+                  openModeSwitchConfirm('default')
+                }
+              }}
+              aria-pressed={appMode.mode === 'default' && !isEnvironmentConfigDir}
+              className="group flex w-full items-start gap-3 px-4 py-3 text-left disabled:cursor-not-allowed disabled:opacity-60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-border-focus)]"
+            >
+              <StorageOptionText
+                selected={appMode.mode === 'default' && !isEnvironmentConfigDir}
+                icon={<AppWindow size={16} strokeWidth={1.75} aria-hidden="true" />}
+                title={t('settings.general.storageSystemTitle')}
+                description={t('settings.general.storageSystemDescription')}
+              />
+            </button>
 
-          <Card radius="xl" surface="low" padding="none" className="px-4 py-4">
-            <div className="flex flex-col gap-3">
-              <button
-                type="button"
-                disabled={migrationRunning}
-                onClick={() => {
-                  if (isEnvironmentConfigDir) {
-                    setModeError(t('settings.general.storageEnvironmentSwitchBlocked'))
-                    return
-                  }
-                  if (appMode.mode !== 'default') {
-                    openModeSwitchConfirm('default')
-                  }
-                }}
-                aria-pressed={appMode.mode === 'default' && !isEnvironmentConfigDir}
-                className={`flex items-start gap-3 rounded-[var(--radius-lg)] border px-3 py-3 text-left transition-all ${
-                  appMode.mode === 'default' && !isEnvironmentConfigDir
-                    ? 'border-[var(--color-brand)] bg-[var(--color-surface)] shadow-[var(--shadow-focus-ring)]'
-                    : 'border-[var(--color-border)] bg-[var(--color-surface)] hover:border-[var(--color-border-focus)]'
-                }`}
-              >
-                <span className="material-symbols-outlined mt-0.5 text-[20px] text-[var(--color-text-secondary)]">settings_applications</span>
-                <span className="min-w-0 flex-1">
-                  <span className="block text-sm font-semibold text-[var(--color-text-primary)]">{t('settings.general.storageSystemTitle')}</span>
-                  <span className="mt-1 block text-xs leading-5 text-[var(--color-text-tertiary)]">{t('settings.general.storageSystemDescription')}</span>
-                </span>
-              </button>
-
-              <div
-                className={`rounded-[var(--radius-lg)] border px-3 py-3 transition-all ${
-                  appMode.mode === 'portable' && !isEnvironmentConfigDir
-                    ? 'border-[var(--color-brand)] bg-[var(--color-surface)] shadow-[var(--shadow-focus-ring)]'
-                    : 'border-[var(--color-border)] bg-[var(--color-surface)]'
-                }`}
-              >
-                <div className="mb-3 flex items-start gap-3">
-                  <span className="material-symbols-outlined mt-0.5 text-[20px] text-[var(--color-text-secondary)]">drive_file_move</span>
-                  <div className="min-w-0 flex-1">
-                    <div className="text-sm font-semibold text-[var(--color-text-primary)]">{t('settings.general.storagePortableTitle')}</div>
-                    <div className="mt-1 text-xs leading-5 text-[var(--color-text-tertiary)]">{t('settings.general.storagePortableDescription')}</div>
-                  </div>
-                </div>
-
-                <div className="flex items-end gap-2">
-                  <div className="min-w-0 flex-1">
-                    <Input
-                      id="portable-data-dir"
-                      label={t('settings.general.storagePortableDirLabel')}
-                      value={portableDirDraft}
-                      placeholder={t('settings.general.storagePortableDirPlaceholder')}
-                      onChange={(event) => {
-                        setPortableDirDraft(event.target.value)
-                        setModeError(null)
-                      }}
-                      className="w-full font-mono text-xs"
-                      disabled={migrationRunning}
-                    />
-                  </div>
-                  <Button
-                    type="button"
-                    variant="secondary"
-                    className="h-10 flex-shrink-0 px-3 whitespace-nowrap"
-                    onClick={() => void openPortableDirPicker()}
-                    disabled={migrationRunning}
-                  >
-                    {t('settings.general.storageChooseDir')}
-                  </Button>
-                </div>
-
-                <div className="mt-3 flex justify-end">
-                  <Button
-                    type="button"
-                    size="sm"
-                    variant="secondary"
-                    disabled={modeActionRunning || migrationRunning || (appMode.mode === 'portable' && portableDirDraft.trim() === (appMode.portableDir ?? ''))}
-                    onClick={() => openModeSwitchConfirm('portable')}
-                  >
-                    {t('settings.general.storageApplyPortable')}
-                  </Button>
-                </div>
+            <div className="px-4 py-3">
+              <div className="flex items-start gap-3">
+                <StorageOptionText
+                  selected={appMode.mode === 'portable' && !isEnvironmentConfigDir}
+                  icon={<FolderInput size={16} strokeWidth={1.75} aria-hidden="true" />}
+                  title={t('settings.general.storagePortableTitle')}
+                  description={t('settings.general.storagePortableDescription')}
+                />
+              </div>
+              <div className="mt-3 flex items-end gap-2 pl-7">
+                <Input
+                  id="portable-data-dir"
+                  label={t('settings.general.storagePortableDirLabel')}
+                  size="md"
+                  containerClassName="min-w-0 flex-1"
+                  value={portableDirDraft}
+                  placeholder={t('settings.general.storagePortableDirPlaceholder')}
+                  onChange={(event) => {
+                    setPortableDirDraft(event.target.value)
+                    setModeError(null)
+                  }}
+                  className="font-mono text-xs"
+                  disabled={migrationRunning}
+                />
+                <Button
+                  type="button"
+                  size="base"
+                  variant="secondary"
+                  className="shrink-0 whitespace-nowrap"
+                  onClick={() => void openPortableDirPicker()}
+                  disabled={migrationRunning}
+                >
+                  {t('settings.general.storageChooseDir')}
+                </Button>
+              </div>
+              <div className="mt-3 flex justify-end">
+                <Button
+                  type="button"
+                  size="base"
+                  variant="secondary"
+                  disabled={modeActionRunning || migrationRunning || (appMode.mode === 'portable' && portableDirDraft.trim() === (appMode.portableDir ?? ''))}
+                  onClick={() => openModeSwitchConfirm('portable')}
+                >
+                  {t('settings.general.storageApplyPortable')}
+                </Button>
               </div>
             </div>
 
-            {activeConfigDir && (
-              <div className="mt-3 rounded-[var(--radius-lg)] border border-[var(--color-border-separator)] bg-[var(--color-surface)] px-3 py-2">
-                <div className="text-[11px] font-medium uppercase tracking-wide text-[var(--color-text-tertiary)]">{t('settings.general.storageActiveDir')}</div>
-                <div className="mt-1 break-all font-mono text-xs text-[var(--color-text-secondary)]">{activeConfigDir}</div>
-              </div>
-            )}
-
-            {isEnvironmentConfigDir && (
-              <div className="mt-3 rounded-[var(--radius-lg)] border border-[var(--color-warning)] bg-[var(--color-warning-container)] px-3 py-2 text-xs leading-5 text-[var(--color-on-warning-container)]">
-                {t('settings.general.storageEnvironmentHint')}
-              </div>
-            )}
-
-            {appModeRequiresRestart && (
-              <div className="mt-3 rounded-[var(--radius-lg)] border border-[var(--color-warning)] bg-[var(--color-warning-container)] px-3 py-2 text-xs leading-5 text-[var(--color-on-warning-container)]">
-                {t('settings.general.storageRestartHint')}
-              </div>
-            )}
-
-            <div className="mt-3 text-xs leading-5 text-[var(--color-text-tertiary)]">
-              {t('settings.general.storageMoveHint')}
-            </div>
+            <SettingsBlock className="space-y-3">
+              {activeConfigDir && (
+                <div>
+                  <div className="text-xs text-[var(--color-text-tertiary)]">{t('settings.general.storageActiveDir')}</div>
+                  <div className="mt-1 break-all rounded-[var(--radius-sm)] bg-[var(--color-surface-container)] px-2 py-1 font-mono text-xs text-[var(--color-text-secondary)]">
+                    {activeConfigDir}
+                  </div>
+                </div>
+              )}
+              {isEnvironmentConfigDir && (
+                <StorageNotice>{t('settings.general.storageEnvironmentHint')}</StorageNotice>
+              )}
+              {appModeRequiresRestart && (
+                <StorageNotice>{t('settings.general.storageRestartHint')}</StorageNotice>
+              )}
+              <p className="text-xs leading-[1.5] text-[var(--color-text-tertiary)]">
+                {t('settings.general.storageMoveHint')}
+              </p>
+              {modeError && (
+                <p className="text-xs text-[var(--color-error)]">{modeError}</p>
+              )}
+            </SettingsBlock>
 
             <DataMigrationSettings
               environmentControlled={isEnvironmentConfigDir}
               disabled={modeActionRunning || appModeRequiresRestart}
               onBusyChange={setMigrationRunning}
             />
-
-            {modeError && (
-              <div className="mt-3 text-xs text-[var(--color-error)]">
-                {modeError}
-              </div>
-            )}
-          </Card>
-        </div>
+          </SettingsGroup>
+        </SettingsSection>
       )}
 
       {/* Confirm dialog for mode switch */}
@@ -1788,14 +1573,14 @@ export function GeneralSettings() {
         onConfirm={() => void confirmModeSwitch()}
         title={t('settings.general.modeSwitchTitle')}
         body={(
-          <div className="space-y-3 text-sm leading-6 text-[var(--color-text-secondary)]">
+          <div className="space-y-3 text-[13px] leading-6 text-[var(--color-text-secondary)]">
             <p>
               {pendingMode === 'portable'
                 ? t('settings.general.storageSwitchPortableBody')
                 : t('settings.general.storageSwitchDefaultBody')}
             </p>
             {pendingMode === 'portable' && pendingPortableDir && (
-              <div className="rounded-[var(--radius-lg)] bg-[var(--color-surface-container-low)] px-3 py-2 font-mono text-xs break-all text-[var(--color-text-secondary)]">
+              <div className="break-all rounded-[var(--radius-md)] bg-[var(--color-surface-container)] px-3 py-2 font-mono text-xs text-[var(--color-text-secondary)]">
                 {pendingPortableDir}
               </div>
             )}
@@ -1831,7 +1616,7 @@ export function GeneralSettings() {
         onConfirm={() => void confirmRetentionChange()}
         title={t('settings.general.sessionRetentionConfirmTitle')}
         body={(
-          <div className="space-y-2 text-sm leading-6">
+          <div className="space-y-2 text-[13px] leading-6">
             <p>
               {retentionPendingDays === 0
                 ? t('settings.general.sessionRetentionConfirmDisable')
@@ -1860,6 +1645,168 @@ export function GeneralSettings() {
   )
 }
 
+/**
+ * The secondary button a `Dropdown` opens from: current value, then a chevron.
+ * Forwards its ref and props because `Dropdown` clones its trigger to attach both.
+ */
+const PickerButton = forwardRef<HTMLButtonElement, ButtonProps & { children: ReactNode }>(
+  function PickerButton({ children, className, ...props }, ref) {
+    return (
+      <Button
+        ref={ref}
+        variant="secondary"
+        size="base"
+        className={cx('max-w-[240px] gap-2', className)}
+        {...props}
+      >
+        <span className="min-w-0 truncate">{children}</span>
+        <ChevronDown size={14} strokeWidth={1.75} aria-hidden="true" className="shrink-0 text-[var(--color-text-tertiary)]" />
+      </Button>
+    )
+  },
+)
+
+/**
+ * The swatches are previews, not content, so they keep the size they were drawn
+ * at (about 190px across three columns) however wide the settings frame grows,
+ * rather than swelling into 330px posters on a large display. The grid sits at
+ * the start of its block, the way the rows' labels do.
+ */
+const THEME_GRID_WIDTH = 'max-w-[600px]'
+
+/**
+ * A palette card. The miniature is painted from the palette's own source
+ * variables: `data-theme` re-declares the `--cc-*` ramp on the swatch, so it
+ * shows the real colours of that theme without copying a single value here.
+ * The selection ring and frame use the app's current tokens, which the swatch
+ * inherits because the semantic layer resolves them on the root.
+ */
+function ThemeCard({ theme, label, selected, onSelect }: {
+  theme: ThemeMode
+  label: string
+  selected: boolean
+  onSelect: () => void
+}) {
+  return (
+    <button
+      type="button"
+      aria-pressed={selected}
+      onClick={onSelect}
+      className="group grid min-w-0 justify-items-center gap-2 rounded-[var(--radius-md)] text-xs focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface-container-lowest)]"
+    >
+      <span
+        aria-hidden="true"
+        data-theme={theme}
+        className={cx(
+          'grid aspect-[16/10] w-full grid-cols-[28%_1fr] overflow-hidden rounded-[var(--radius-md)] transition-shadow duration-150',
+          selected
+            ? 'shadow-[0_0_0_2px_var(--color-brand)]'
+            : 'shadow-[inset_0_0_0_1px_var(--color-outline)] group-hover:shadow-[inset_0_0_0_1px_var(--color-border-strong)]',
+        )}
+      >
+        <span className="flex flex-col gap-1 bg-[var(--cc-s0)] px-[16%] pt-[26%]">
+          <span className="h-[3px] rounded-full bg-[var(--cc-bd2)]" />
+          <span className="h-[3px] w-2/3 rounded-full bg-[var(--cc-bd)]" />
+          <span className="h-[3px] w-3/4 rounded-full bg-[var(--cc-bd)]" />
+        </span>
+        <span className="flex flex-col gap-1.5 bg-[var(--cc-bg)] px-[14%] pb-[12%] pt-[20%]">
+          <span className="h-[3px] w-3/5 rounded-full bg-[var(--cc-t3)]" />
+          <span className="h-[3px] rounded-full bg-[var(--cc-bd2)]" />
+          <span className="h-[3px] w-4/5 rounded-full bg-[var(--cc-bd2)]" />
+          <span className="mt-auto h-2 w-2 self-end rounded-full bg-[var(--cc-ac)]" />
+        </span>
+      </span>
+      <span
+        className={cx(
+          'max-w-full truncate',
+          selected
+            ? 'font-medium text-[var(--color-text-primary)]'
+            : 'text-[var(--color-text-secondary)] group-hover:text-[var(--color-text-primary)]',
+        )}
+      >
+        {label}
+      </span>
+    </button>
+  )
+}
+
+/** Radio mark + icon + title/description for one data-storage choice. */
+function StorageOptionText({ selected, icon, title, description }: {
+  selected: boolean
+  icon: ReactNode
+  title: string
+  description: string
+}) {
+  return (
+    <>
+      <span
+        aria-hidden="true"
+        className={cx(
+          'mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full border',
+          selected
+            ? 'border-[1.5px] border-[var(--color-brand)]'
+            : 'border-[var(--color-border-strong)] group-hover:border-[var(--color-text-secondary)]',
+        )}
+      >
+        {selected && <span className="h-2 w-2 rounded-full bg-[var(--color-brand)]" />}
+      </span>
+      <span className="min-w-0 flex-1">
+        <span className="flex items-center gap-1.5 text-[13px] font-medium leading-5 text-[var(--color-text-primary)]">
+          <span className="text-[var(--color-text-tertiary)]">{icon}</span>
+          {title}
+        </span>
+        <span className="mt-0.5 block text-xs leading-[1.5] text-[var(--color-text-tertiary)]">{description}</span>
+      </span>
+    </>
+  )
+}
+
+function StorageNotice({ children }: { children: ReactNode }) {
+  return (
+    <div className="rounded-[var(--radius-md)] bg-[var(--color-warning-container)] px-3 py-2 text-xs leading-[1.5] text-[var(--color-on-warning-container)]">
+      {children}
+    </div>
+  )
+}
+
+/**
+ * A short whole-number field with its unit inside the box. Built on `Input`;
+ * the invalid border comes from `aria-invalid` because the error text lives in
+ * the row's description line, not under the field.
+ */
+function NumberField({ id, unit, min, max, value, invalid, describedBy, onChange }: {
+  id: string
+  unit: string
+  min: number
+  max: number
+  value: string
+  invalid: boolean
+  describedBy: string
+  onChange: (value: string) => void
+}) {
+  return (
+    <div className="relative w-[120px]">
+      <Input
+        id={id}
+        type="number"
+        size="md"
+        min={min}
+        max={max}
+        step={1}
+        inputMode="numeric"
+        value={value}
+        aria-invalid={invalid ? true : undefined}
+        aria-describedby={describedBy}
+        onChange={(event) => onChange(event.currentTarget.value)}
+        className="pr-9 tabular-nums aria-[invalid=true]:border-[var(--color-error)]"
+      />
+      <span className="pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-xs text-[var(--color-text-tertiary)]">
+        {unit}
+      </span>
+    </div>
+  )
+}
+
 function getBuiltInOutputStyleTranslationKeys(style: {
   value: string
   source: OutputStyleSource
diff --git a/desktop/src/pages/settings/H5AccessSettings.tsx b/desktop/src/pages/settings/H5AccessSettings.tsx
index 9bebb9e0..1c6932ea 100644
--- a/desktop/src/pages/settings/H5AccessSettings.tsx
+++ b/desktop/src/pages/settings/H5AccessSettings.tsx
@@ -8,7 +8,14 @@ import { ConfirmDialog } from '@/components/ui/ConfirmDialog'
 import { Input } from '@/components/ui/Input'
 import { Button } from '@/components/ui/Button'
 import { Badge } from '@/components/ui/Badge'
-import { Card } from '@/components/ui/Card'
+import { Switch } from '@/components/ui/Switch'
+import {
+  SettingsBlock,
+  SettingsGroup,
+  SettingsPageHeader,
+  SettingsRow,
+  SettingsSection,
+} from '@/components/settings/SettingsSection'
 import { useUIStore } from '../../stores/uiStore'
 import { isBrowserSafePort } from '../../lib/browserSafePort'
 import { copyTextToClipboard } from '@/lib/clipboard'
@@ -264,303 +271,293 @@ export function H5AccessSettings() {
   }
 
   return (
-    <div className="max-w-3xl">
+    <div className="w-full min-w-0">
       <section aria-labelledby="h5-access-title" role="region">
-        <div className="mb-6 flex items-start gap-3">
-          <div className="mt-1 flex h-10 w-10 shrink-0 items-center justify-center rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)] text-[var(--color-brand)]">
-            <QrCode className="h-5 w-5" aria-hidden="true" />
-          </div>
-          <div className="min-w-0">
-            <h2
-              id="h5-access-title"
-              className="text-[24px] font-semibold leading-tight text-[var(--color-text-primary)]"
-             style={{ fontFamily: 'var(--font-headline)' }}>
-              {t('settings.general.h5AccessTitle')}
-            </h2>
-            <p className="mt-1.5 text-[13.5px] leading-6 text-[var(--color-text-secondary)]">
-              {t('settings.general.h5AccessDescription')}
-            </p>
-          </div>
-        </div>
+        <SettingsPageHeader
+          titleId="h5-access-title"
+          title={t('settings.tab.h5Access')}
+          description={t('settings.general.h5AccessDescription')}
+        />
 
-        <Card radius="xl" surface="low" padding="none" className="px-4 py-4">
-          <div className="flex items-start justify-between gap-4">
-            <label className="flex min-w-0 items-start gap-3">
-              <input
-                type="checkbox"
-                className="mt-1 h-4 w-4 rounded-[var(--radius-sm)] border-[var(--color-border)] accent-[var(--color-brand)]"
-                checked={h5Access.enabled}
-                disabled={h5ActionRunning}
-                aria-label={t('settings.general.h5AccessEnabled')}
-                onChange={(event) => {
-                  if (event.target.checked) {
-                    setH5EnableConfirmOpen(true)
-                  } else {
-                    void handleH5Disable()
-                  }
-                }}
-              />
-              <span className="min-w-0">
-                <span className="block text-sm font-medium text-[var(--color-text-primary)]">
-                  {t('settings.general.h5AccessEnabled')}
-                </span>
-                <span className="mt-1 block text-xs leading-5 text-[var(--color-text-tertiary)]">
-                  {t('settings.general.h5AccessEnabledHint')}
-                </span>
-              </span>
-            </label>
-            <Badge tone={h5Access.enabled ? 'success' : 'neutral'} size="sm" bordered={!h5Access.enabled}>
+        <SettingsGroup className="mt-7">
+          <SettingsRow
+            layout="inline"
+            title={t('settings.general.h5AccessEnabled')}
+            description={t('settings.general.h5AccessEnabledHint')}
+          >
+            <Badge tone={h5Access.enabled ? 'success' : 'neutral'} size="sm">
               {h5Access.enabled ? t('settings.general.h5AccessStatusEnabled') : t('settings.general.h5AccessDisabledValue')}
             </Badge>
-          </div>
+            <Switch
+              label={t('settings.general.h5AccessEnabled')}
+              labelHidden
+              checked={h5Access.enabled}
+              disabled={h5ActionRunning}
+              onChange={(checked) => {
+                if (checked) {
+                  setH5EnableConfirmOpen(true)
+                } else {
+                  void handleH5Disable()
+                }
+              }}
+            />
+          </SettingsRow>
 
           {h5AccessDiagnostics?.storedHostStaleness === 'unreachable' && h5AccessDiagnostics.storedPublicBaseUrl ? (
-            <div
-              data-testid="h5-access-stale-host-banner"
-              className="mt-4 rounded-[var(--radius-lg)] border border-[var(--color-warning)] bg-[var(--color-warning-container)] px-3 py-3 text-xs leading-5 text-[var(--color-on-warning-container)]"
-            >
-              <div className="font-semibold">
-                {t('settings.general.h5AccessStaleHostTitle')}
-              </div>
-              <div className="mt-1 text-[var(--color-text-secondary)]">
-                {h5AccessDiagnostics.suggestedHost
-                  ? t('settings.general.h5AccessStaleHostBody', {
-                      storedHost: extractHostnameFromUrl(h5AccessDiagnostics.storedPublicBaseUrl) ?? h5AccessDiagnostics.storedPublicBaseUrl,
-                    })
-                  : t('settings.general.h5AccessStaleHostNoSuggestion', {
-                      storedHost: extractHostnameFromUrl(h5AccessDiagnostics.storedPublicBaseUrl) ?? h5AccessDiagnostics.storedPublicBaseUrl,
-                    })}
-              </div>
-              {h5AccessDiagnostics.suggestedHost && (
-                <div className="mt-2">
-                  <Button
-                    size="sm"
-                    variant="primary"
-                    loading={h5ActionRunning}
-                    onClick={() => void handleH5SwitchToSuggestedHost()}
-                    data-testid="h5-access-stale-host-apply"
-                  >
-                    {t('settings.general.h5AccessStaleHostApply', {
-                      suggestedHost: h5AccessDiagnostics.suggestedHost,
-                    })}
-                  </Button>
+            <SettingsBlock>
+              <div
+                data-testid="h5-access-stale-host-banner"
+                className="rounded-[var(--radius-md)] bg-[var(--color-warning-container)] px-3 py-3 text-xs leading-[1.5] text-[var(--color-on-warning-container)]"
+              >
+                <div className="font-semibold">
+                  {t('settings.general.h5AccessStaleHostTitle')}
                 </div>
-              )}
-            </div>
+                <div className="mt-1">
+                  {h5AccessDiagnostics.suggestedHost
+                    ? t('settings.general.h5AccessStaleHostBody', {
+                        storedHost: extractHostnameFromUrl(h5AccessDiagnostics.storedPublicBaseUrl) ?? h5AccessDiagnostics.storedPublicBaseUrl,
+                      })
+                    : t('settings.general.h5AccessStaleHostNoSuggestion', {
+                        storedHost: extractHostnameFromUrl(h5AccessDiagnostics.storedPublicBaseUrl) ?? h5AccessDiagnostics.storedPublicBaseUrl,
+                      })}
+                </div>
+                {h5AccessDiagnostics.suggestedHost && (
+                  <div className="mt-2">
+                    <Button
+                      size="sm"
+                      variant="primary"
+                      loading={h5ActionRunning}
+                      onClick={() => void handleH5SwitchToSuggestedHost()}
+                      data-testid="h5-access-stale-host-apply"
+                    >
+                      {t('settings.general.h5AccessStaleHostApply', {
+                        suggestedHost: h5AccessDiagnostics.suggestedHost,
+                      })}
+                    </Button>
+                  </div>
+                )}
+              </div>
+            </SettingsBlock>
           ) : null}
 
           {h5AccessDiagnostics?.storedHostStaleness === 'proxy' ? (
-            <div
-              data-testid="h5-access-proxy-note"
-              className="mt-4 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] px-3 py-2 text-xs leading-5 text-[var(--color-text-tertiary)]"
-            >
-              {t('settings.general.h5AccessProxyNote')}
-            </div>
+            <SettingsBlock>
+              <p
+                data-testid="h5-access-proxy-note"
+                className="text-xs leading-[1.5] text-[var(--color-text-tertiary)]"
+              >
+                {t('settings.general.h5AccessProxyNote')}
+              </p>
+            </SettingsBlock>
           ) : null}
+        </SettingsGroup>
 
-          <div className="mt-4 grid grid-cols-1 gap-3">
-            <div className="grid grid-cols-1 gap-3 sm:grid-cols-[minmax(0,1fr)_9rem_9rem]">
+        <SettingsSection title={t('settings.general.h5AccessUrl')} description={t('settings.general.h5AccessOpenHint')}>
+          <SettingsGroup>
+            <SettingsRow title={t('settings.general.h5AccessPublicHost')} htmlFor="h5-access-public-url">
               <Input
                 id="h5-access-public-url"
-                label={t('settings.general.h5AccessPublicHost')}
+                size="md"
+                containerClassName="w-full sm:w-[260px]"
+                className="font-mono text-xs"
                 value={h5PublicBaseUrlDraft}
                 placeholder={t('settings.general.h5AccessPublicHostPlaceholder')}
                 onChange={(event) => setH5PublicBaseUrlDraft(event.target.value)}
               />
+            </SettingsRow>
+            <SettingsRow
+              title={t('settings.general.h5AccessFixedPort')}
+              htmlFor="h5-access-fixed-port"
+              description={t('settings.general.h5AccessFixedPortHint')}
+            >
               <Input
                 id="h5-access-fixed-port"
-                label={t('settings.general.h5AccessFixedPort')}
+                size="md"
+                containerClassName="w-full sm:w-[140px]"
+                className="font-mono text-xs tabular-nums"
                 value={h5FixedPortDraft}
                 placeholder={t('settings.general.h5AccessFixedPortPlaceholder')}
                 inputMode="numeric"
                 error={h5FixedPortInvalid ? t('settings.general.h5AccessFixedPortInvalid') : undefined}
                 onChange={(event) => setH5FixedPortDraft(event.target.value)}
               />
+            </SettingsRow>
+            <SettingsRow title={t('settings.general.h5AccessCurrentPort')} htmlFor="h5-access-current-port">
               <Input
                 id="h5-access-current-port"
-                label={t('settings.general.h5AccessCurrentPort')}
+                size="md"
+                containerClassName="w-full sm:w-[140px]"
                 value={h5ActivePort ?? t('settings.general.h5AccessCurrentPortUnknown')}
                 readOnly
-                className="text-[var(--color-text-tertiary)]"
+                className="font-mono text-xs tabular-nums text-[var(--color-text-tertiary)]"
               />
-            </div>
-            <div className="grid grid-cols-1 gap-3 sm:grid-cols-[9rem_minmax(0,1fr)] sm:items-start">
+            </SettingsRow>
+            <SettingsRow
+              title={t('settings.general.h5AccessDisconnectGrace')}
+              htmlFor="h5-access-disconnect-grace"
+              description={t('settings.general.h5AccessDisconnectGraceHint')}
+            >
               <Input
                 id="h5-access-disconnect-grace"
-                label={t('settings.general.h5AccessDisconnectGrace')}
+                size="md"
+                containerClassName="w-full sm:w-[140px]"
+                className="font-mono text-xs tabular-nums"
                 value={h5GraceDraft}
                 placeholder={t('settings.general.h5AccessDisconnectGracePlaceholder')}
                 inputMode="numeric"
                 error={h5GraceInvalid ? t('settings.general.h5AccessDisconnectGraceInvalid') : undefined}
                 onChange={(event) => setH5GraceDraft(event.target.value)}
               />
-              <p className="text-xs leading-5 text-[var(--color-text-tertiary)] sm:pt-7">
-                {t('settings.general.h5AccessDisconnectGraceHint')}
-              </p>
-            </div>
-            <div className="flex items-center justify-between gap-3">
-              <p className="text-xs text-[var(--color-text-tertiary)]">
-                {t('settings.general.h5AccessOpenHint')}
-                {' '}
-                {t('settings.general.h5AccessFixedPortHint')}
-              </p>
+            </SettingsRow>
+            {h5FixedPortPendingRestart && (
+              <SettingsBlock>
+                <div
+                  data-testid="h5-access-fixed-port-restart-note"
+                  className="rounded-[var(--radius-md)] bg-[var(--color-warning-container)] px-3 py-2 text-xs leading-[1.5] text-[var(--color-on-warning-container)]"
+                >
+                  {t('settings.general.h5AccessFixedPortRestartNote', {
+                    fixedPort: String(h5Access.fixedPort),
+                    activePort: h5ActivePort ?? '',
+                  })}
+                </div>
+              </SettingsBlock>
+            )}
+            {h5AccessUrl && (
+              <SettingsBlock>
+                <div className="flex items-center gap-2">
+                  <div className="min-w-0 flex-1 break-all rounded-[var(--radius-md)] bg-[var(--color-surface-container)] px-3 py-2 font-mono text-xs leading-5 text-[var(--color-text-primary)]">
+                    {h5AccessUrl}
+                  </div>
+                  <Button
+                    size="base"
+                    variant="secondary"
+                    className="shrink-0"
+                    icon={<Copy size={14} strokeWidth={1.75} aria-hidden="true" />}
+                    aria-label={t('settings.general.h5AccessCopyUrl')}
+                    onClick={() => void handleH5UrlCopy()}
+                  >
+                    {t('settings.general.h5AccessCopy')}
+                  </Button>
+                </div>
+              </SettingsBlock>
+            )}
+            <SettingsBlock className="flex justify-end">
               <Button
-                size="sm"
+                size="base"
                 variant="secondary"
-                className="shrink-0 whitespace-nowrap"
+                className="whitespace-nowrap"
                 onClick={() => void handleH5SettingsSave()}
                 disabled={!h5AccessDirty || h5FixedPortInvalid || h5GraceInvalid || h5ActionRunning}
                 aria-label={t('settings.general.h5AccessSave')}
               >
                 {t('settings.general.h5AccessSave')}
               </Button>
-            </div>
-            {h5FixedPortPendingRestart && (
-              <div
-                data-testid="h5-access-fixed-port-restart-note"
-                className="rounded-[var(--radius-lg)] border border-[var(--color-warning)] bg-[var(--color-warning-container)] px-3 py-2 text-xs leading-5 text-[var(--color-on-warning-container)]"
-              >
-                {t('settings.general.h5AccessFixedPortRestartNote', {
-                  fixedPort: String(h5Access.fixedPort),
-                  activePort: h5ActivePort ?? '',
-                })}
-              </div>
-            )}
-          </div>
+            </SettingsBlock>
+          </SettingsGroup>
+        </SettingsSection>
 
-          {h5AccessUrl && (
-            <div className="mt-4 border-t border-[var(--color-border-separator)] pt-4">
-              <div className="flex items-center gap-2">
-                <div className="flex-1 min-w-0">
-                  <div className="text-xs uppercase tracking-[0.08em] text-[var(--color-text-tertiary)]">
-                    {t('settings.general.h5AccessUrl')}
+        {h5Access.enabled && (
+          <SettingsSection title={t('settings.general.h5AccessQrTitle')}>
+            <SettingsGroup>
+              {h5AccessUrl && (
+                <SettingsBlock className="flex flex-col gap-4 py-4 sm:flex-row">
+                  {/* A white box on purpose, in every theme: scanners need the
+                      contrast, so its placeholder text uses stock neutrals that
+                      stay dark under `data-theme="dark"` too. */}
+                  <div className="flex h-44 w-44 shrink-0 items-center justify-center rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-white p-3">
+                    {h5QrDataUrl ? (
+                      <img
+                        src={h5QrDataUrl}
+                        alt={t('settings.general.h5AccessQrAlt')}
+                        className="h-full w-full"
+                      />
+                    ) : (
+                      <div className="flex flex-col items-center gap-3 px-4 text-center">
+                        <QrCode size={40} strokeWidth={1.5} className="text-neutral-400" aria-hidden="true" />
+                        <p className="text-xs leading-5 text-neutral-500">
+                          {t('settings.general.h5AccessQrEmptyHint')}
+                        </p>
+                      </div>
+                    )}
                   </div>
-                  <div className="mt-1 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-code-bg)] px-3 py-2 font-mono text-[12.5px] leading-5 text-[var(--color-text-primary)] break-all">
-                    {h5AccessUrl}
-                  </div>
-                </div>
-                <Button
-                  size="sm"
-                  variant="secondary"
-                  className="shrink-0"
-                  icon={<Copy className="h-3.5 w-3.5" aria-hidden="true" />}
-                  aria-label={t('settings.general.h5AccessCopyUrl')}
-                  onClick={() => void handleH5UrlCopy()}
-                >
-                  {t('settings.general.h5AccessCopy')}
-                </Button>
-              </div>
-            </div>
-          )}
-
-          {h5Access.enabled && h5AccessUrl && (
-            <div className="mt-4 border-t border-[var(--color-border-separator)] pt-4">
-              <div className="flex flex-col gap-4 sm:flex-row">
-                <div className="flex h-48 w-48 shrink-0 items-center justify-center rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-white p-3">
-                  {h5QrDataUrl ? (
-                    <img
-                      src={h5QrDataUrl}
-                      alt={t('settings.general.h5AccessQrAlt')}
-                      className="h-full w-full"
-                    />
-                  ) : (
-                    <div className="flex flex-col items-center gap-3 px-4 text-center">
-                      {/* Stock neutrals on purpose: the QR box is a hardcoded
-                          `bg-white` (scanners need the contrast), so this text
-                          must stay dark in all three themes. Theme tokens would
-                          go light-on-white under `data-theme="dark"`. */}
-                      <QrCode className="h-12 w-12 text-neutral-400" aria-hidden="true" />
-                      <p className="text-xs leading-5 text-neutral-500">
-                        {t('settings.general.h5AccessQrEmptyHint')}
-                      </p>
+                  <div className="min-w-0 flex-1">
+                    <p className="text-xs leading-[1.5] text-[var(--color-text-tertiary)]">
+                      {h5Token
+                        ? t('settings.general.h5AccessQrHint')
+                        : t('settings.general.h5AccessQrRefreshHint')}
+                    </p>
+                    {h5LaunchUrl && (
+                      <div className="mt-3 break-all rounded-[var(--radius-md)] bg-[var(--color-surface-container)] px-3 py-2 font-mono text-xs leading-5 text-[var(--color-text-primary)]">
+                        {h5LaunchUrl}
+                      </div>
+                    )}
+                    <div className="mt-3 flex flex-wrap gap-2">
+                      <Button
+                        size="base"
+                        variant="secondary"
+                        icon={<Copy size={14} strokeWidth={1.75} aria-hidden="true" />}
+                        disabled={!h5LaunchUrl || !h5Token}
+                        onClick={() => void handleH5LaunchUrlCopy()}
+                      >
+                        {t('settings.general.h5AccessCopyLaunchUrl')}
+                      </Button>
+                      <Button
+                        size="base"
+                        variant={h5Token ? 'secondary' : 'primary'}
+                        icon={<RotateCw size={14} strokeWidth={1.75} aria-hidden="true" />}
+                        loading={h5ActionRunning}
+                        onClick={() => void handleH5Regenerate()}
+                      >
+                        {h5Token ? t('settings.general.h5AccessRegenerate') : t('settings.general.h5AccessGenerateToken')}
+                      </Button>
                     </div>
-                  )}
-                </div>
-                <div className="min-w-0 flex-1">
-                  <div className="text-xs font-medium uppercase text-[var(--color-text-tertiary)]">
-                    {t('settings.general.h5AccessQrTitle')}
                   </div>
-                  <p className="mt-1 text-xs leading-5 text-[var(--color-text-tertiary)]">
-                    {h5Token
-                      ? t('settings.general.h5AccessQrHint')
-                      : t('settings.general.h5AccessQrRefreshHint')}
-                  </p>
-                  {h5LaunchUrl && (
-                    <div className="mt-3 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-code-bg)] px-3 py-2 font-mono text-[12.5px] leading-5 text-[var(--color-text-primary)] break-all">
-                      {h5LaunchUrl}
-                    </div>
-                  )}
-                  <div className="mt-3 flex flex-wrap gap-2">
-                    <Button
-                      size="sm"
-                      variant="secondary"
-                      icon={<Copy className="h-3.5 w-3.5" aria-hidden="true" />}
-                      disabled={!h5LaunchUrl || !h5Token}
-                      onClick={() => void handleH5LaunchUrlCopy()}
-                    >
-                      {t('settings.general.h5AccessCopyLaunchUrl')}
-                    </Button>
-                    <Button
-                      size="sm"
-                      variant={h5Token ? 'secondary' : 'primary'}
-                      icon={<RotateCw className="h-3.5 w-3.5" aria-hidden="true" />}
-                      loading={h5ActionRunning}
-                      onClick={() => void handleH5Regenerate()}
-                    >
-                      {h5Token ? t('settings.general.h5AccessRegenerate') : t('settings.general.h5AccessGenerateToken')}
-                    </Button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          )}
+                </SettingsBlock>
+              )}
 
-          {h5Access.enabled && (
-            <div className="mt-4 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface)] px-3 py-3">
-              <div className="flex items-center justify-between gap-3">
-                <div className="min-w-0">
-                  <div className="text-xs font-medium uppercase text-[var(--color-text-tertiary)]">
-                    {t('settings.general.h5AccessTokenPreview')}
-                  </div>
-                  <div className="mt-1 break-all font-mono text-[12.5px] leading-5 text-[var(--color-text-primary)]">
+              <SettingsRow
+                title={t('settings.general.h5AccessTokenPreview')}
+                description={(
+                  <span className="break-all font-mono text-xs text-[var(--color-text-primary)]">
                     {h5TokenVisible && h5Token
                       ? h5Token
                       : h5Access.tokenPreview || t('settings.general.h5AccessTokenNotAvailable')}
-                  </div>
-                </div>
-                <div className="flex shrink-0 flex-wrap justify-end gap-2">
-                  <Button
-                    size="sm"
-                    variant="secondary"
-                    icon={h5TokenVisible ? <EyeOff className="h-3.5 w-3.5" aria-hidden="true" /> : <Eye className="h-3.5 w-3.5" aria-hidden="true" />}
-                    disabled={!h5Token}
-                    onClick={() => setH5TokenVisible((visible) => !visible)}
-                  >
-                    {h5TokenVisible ? t('settings.general.h5AccessHideToken') : t('settings.general.h5AccessShowToken')}
-                  </Button>
-                  <Button
-                    size="sm"
-                    variant="danger"
-                    icon={<PowerOff className="h-3.5 w-3.5" aria-hidden="true" />}
-                    loading={h5ActionRunning}
-                    onClick={() => void handleH5Disable()}
-                  >
-                    {t('settings.general.h5AccessDisable')}
-                  </Button>
-                </div>
-              </div>
-            </div>
-          )}
+                  </span>
+                )}
+              >
+                <Button
+                  size="base"
+                  variant="secondary"
+                  icon={h5TokenVisible
+                    ? <EyeOff size={14} strokeWidth={1.75} aria-hidden="true" />
+                    : <Eye size={14} strokeWidth={1.75} aria-hidden="true" />}
+                  disabled={!h5Token}
+                  onClick={() => setH5TokenVisible((visible) => !visible)}
+                >
+                  {h5TokenVisible ? t('settings.general.h5AccessHideToken') : t('settings.general.h5AccessShowToken')}
+                </Button>
+                <Button
+                  size="base"
+                  variant="danger-ghost"
+                  icon={<PowerOff size={14} strokeWidth={1.75} aria-hidden="true" />}
+                  loading={h5ActionRunning}
+                  onClick={() => void handleH5Disable()}
+                >
+                  {t('settings.general.h5AccessDisable')}
+                </Button>
+              </SettingsRow>
+            </SettingsGroup>
+          </SettingsSection>
+        )}
 
-          <p className="mt-4 text-xs text-[var(--color-text-tertiary)] leading-5">
-            {t('settings.general.h5AccessSafetyNote')}
+        <p className="mt-3 px-0.5 text-xs leading-[1.5] text-[var(--color-text-tertiary)]">
+          {t('settings.general.h5AccessSafetyNote')}
+        </p>
+        {h5AccessError && (
+          <p className="mt-2 px-0.5 text-xs text-[var(--color-error)]">
+            {h5AccessError}
           </p>
-          {h5AccessError && (
-            <p className="mt-2 text-xs text-[var(--color-error)]">
-              {h5AccessError}
-            </p>
-          )}
-        </Card>
+        )}
       </section>
 
       <PublicAccessSettings />
diff --git a/desktop/src/pages/settings/H5GeneralSettings.tsx b/desktop/src/pages/settings/H5GeneralSettings.tsx
index 4956b360..cd01a8ef 100644
--- a/desktop/src/pages/settings/H5GeneralSettings.tsx
+++ b/desktop/src/pages/settings/H5GeneralSettings.tsx
@@ -4,10 +4,9 @@ import { useSettingsStore } from '@/stores/settingsStore'
 import { useUIStore } from '@/stores/uiStore'
 import { settingsApi } from '@/api/settings'
 import { modelsApi } from '@/api/models'
-import { SettingsSection } from '@/components/settings/SettingsSection'
-import { SelectField } from '@/components/ui/SelectField'
-import { Switch } from '@/components/ui/Switch'
-import type { ThemeMode, UserSettings, EffortLevel } from '@/types/settings'
+import { SettingsGroup, SettingsRow, SettingsSection, SettingsSwitchRow } from '@/components/settings/SettingsSection'
+import { SelectField, type SelectFieldProps } from '@/components/ui/SelectField'
+import type { ChatSendBehavior, ThemeMode, UserSettings, EffortLevel } from '@/types/settings'
 
 export function H5GeneralSettings() {
   const t = useTranslation()
@@ -53,23 +52,30 @@ export function H5GeneralSettings() {
   const styles = [{ value: 'default', label: t('settings.general.outputStyleBuiltin.default.label') },
     { value: 'Explanatory', label: t('settings.general.outputStyleBuiltin.explanatory.label') }, { value: 'Learning', label: t('settings.general.outputStyleBuiltin.learning.label') }]
   if (settings.outputStyle && !styles.some((item) => item.value === settings.outputStyle)) styles.push({ value: settings.outputStyle, label: settings.outputStyle })
-  return <div className="max-w-xl space-y-5">
-    {failed && <p role="alert" className="text-sm text-[var(--color-error)]">{t('publicAccess.genericError')}</p>}
-    <SettingsSection title={t('settings.general.appearanceTitle')} description={t('h5Settings.browserOnly')}>
-      <div className="space-y-4">
-        <SelectField label={t('settings.general.appearanceTitle')} value={theme} options={themes} onChange={(value) => { useUIStore.getState().setFollowSystemTheme(false); void settings.setTheme(value) }} />
-        <SelectField label={t('settings.general.languageTitle')} value={settings.locale} options={languages} onChange={settings.setLocale} />
-      </div>
+  // Native selects on purpose: this pane renders on a phone, where the OS
+  // picker is the usable one. Each sits in a settings row, named by its title.
+  const select = <T extends string>(label: string, field: Omit<SelectFieldProps<T>, 'label' | 'labelHidden' | 'size'>) => (
+    <SettingsRow title={label}>
+      <SelectField<T> {...field} label={label} labelHidden size="md" containerClassName="w-full sm:w-[220px]" />
+    </SettingsRow>
+  )
+  return <div className="w-full min-w-0">
+    {failed && <p role="alert" className="mb-4 text-[13px] text-[var(--color-error)]">{t('publicAccess.genericError')}</p>}
+    <SettingsSection className="mt-0" title={t('settings.general.appearanceTitle')} description={t('h5Settings.browserOnly')}>
+      <SettingsGroup>
+        {select<ThemeMode>(t('settings.general.appearanceTitle'), { value: theme, options: themes, onChange: (value) => { useUIStore.getState().setFollowSystemTheme(false); void settings.setTheme(value) } })}
+        {select<Locale>(t('settings.general.languageTitle'), { value: settings.locale, options: languages, onChange: settings.setLocale })}
+      </SettingsGroup>
     </SettingsSection>
     <SettingsSection title={t('h5Settings.agentPreferences')} description={t('h5Settings.agentPreferencesHint')}>
-      <div className="space-y-5">
-        <SelectField label={t('settings.general.responseLangTitle')} disabled={busy} value={settings.responseLanguage} options={responseLanguages} onChange={(language) => void save({ language })} />
-        <SelectField label={t('settings.general.outputStyleTitle')} disabled={busy} value={settings.outputStyle || 'default'} options={styles} onChange={(outputStyle) => void save({ outputStyle })} />
-        <SelectField label={t('h5Settings.effort')} disabled={busy || !effortOptions.length} value={selectedEffort} options={effortOptions.map((value) => ({ value, label: effortLabels[value] }))} onChange={(value) => void effort(value)} />
-        <SelectField label={t('h5Settings.sendBehavior')} disabled={busy} value={settings.chatSendBehavior} options={[{ value: 'enter', label: t('h5Settings.enter') }, { value: 'modifierEnter', label: t('h5Settings.modifierEnter') }]} onChange={(chatSendBehavior) => void save({ chatSendBehavior })} />
-        <Switch disabled={busy} checked={settings.thinkingEnabled} label={t('settings.general.thinkingEnabled')} description={t('settings.general.thinkingDescription')} onChange={(alwaysThinkingEnabled) => void save({ alwaysThinkingEnabled })} />
-        <Switch disabled={busy} checked={settings.workflowKeywordTriggerEnabled} label={t('settings.general.workflowKeywordEnabled')} description={t('settings.general.workflowKeywordDescription')} onChange={(workflowKeywordTriggerEnabled) => void save({ workflowKeywordTriggerEnabled })} />
-      </div>
+      <SettingsGroup>
+        {select(t('settings.general.responseLangTitle'), { disabled: busy, value: settings.responseLanguage, options: responseLanguages, onChange: (language) => void save({ language }) })}
+        {select(t('settings.general.outputStyleTitle'), { disabled: busy, value: settings.outputStyle || 'default', options: styles, onChange: (outputStyle) => void save({ outputStyle }) })}
+        {select<EffortLevel>(t('h5Settings.effort'), { disabled: busy || !effortOptions.length, value: selectedEffort, options: effortOptions.map((value) => ({ value, label: effortLabels[value] })), onChange: (value) => void effort(value) })}
+        {select<ChatSendBehavior>(t('h5Settings.sendBehavior'), { disabled: busy, value: settings.chatSendBehavior, options: [{ value: 'enter', label: t('h5Settings.enter') }, { value: 'modifierEnter', label: t('h5Settings.modifierEnter') }], onChange: (chatSendBehavior) => void save({ chatSendBehavior }) })}
+        <SettingsSwitchRow disabled={busy} checked={settings.thinkingEnabled} title={t('settings.general.thinkingEnabled')} description={t('settings.general.thinkingDescription')} onChange={(alwaysThinkingEnabled) => void save({ alwaysThinkingEnabled })} />
+        <SettingsSwitchRow disabled={busy} checked={settings.workflowKeywordTriggerEnabled} title={t('settings.general.workflowKeywordEnabled')} description={t('settings.general.workflowKeywordDescription')} onChange={(workflowKeywordTriggerEnabled) => void save({ workflowKeywordTriggerEnabled })} />
+      </SettingsGroup>
     </SettingsSection>
   </div>
 }
diff --git a/desktop/src/pages/settings/ProviderSettings.tsx b/desktop/src/pages/settings/ProviderSettings.tsx
index b2bb720c..a327e9b7 100644
--- a/desktop/src/pages/settings/ProviderSettings.tsx
+++ b/desktop/src/pages/settings/ProviderSettings.tsx
@@ -2,7 +2,33 @@ import { useState, useEffect, useMemo, useRef, useId, type CSSProperties, type R
 import { closestCenter, DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors, type DragEndEvent } from '@dnd-kit/core'
 import { arrayMove, SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
-import { GripVertical, Star } from 'lucide-react'
+import {
+  ArrowLeftRight,
+  ArrowUpRight,
+  ChevronDown,
+  ChevronUp,
+  CircleAlert,
+  CircleCheck,
+  CloudDownload,
+  Download,
+  Eye,
+  EyeOff,
+  Globe,
+  GripVertical,
+  Info,
+  Key,
+  KeyRound,
+  KeySquare,
+  Link,
+  MapPin,
+  MessagesSquare,
+  Network,
+  Plus,
+  Route,
+  Shrink,
+  Star,
+  Wrench,
+} from 'lucide-react'
 import aruhubLogo from '../../../../docs/images/sponsors/aruhub-logo.png'
 import { useSettingsStore } from '../../stores/settingsStore'
 import { useProviderStore } from '../../stores/providerStore'
@@ -10,10 +36,11 @@ import { useUIStore } from '../../stores/uiStore'
 import { useTranslation, type TranslationKey } from '../../i18n'
 import { Modal } from '@/components/ui/Modal'
 import { ConfirmDialog } from '@/components/ui/ConfirmDialog'
-import { Input } from '@/components/ui/Input'
+import { FIELD_BASE_CLASSES, FIELD_SIZE_CLASSES, fieldStateClasses, Input } from '@/components/ui/Input'
 import { Button } from '@/components/ui/Button'
+import { Checkbox } from '@/components/ui/Checkbox'
 import { IconButton } from '@/components/ui/IconButton'
-import { Badge, StatusDot } from '@/components/ui/Badge'
+import { Badge } from '@/components/ui/Badge'
 import { Spinner } from '@/components/ui/Spinner'
 import { SettingsPageHeader, SettingsPill } from '@/components/settings/SettingsSection'
 import { Dropdown } from '@/components/ui/Dropdown'
@@ -38,7 +65,14 @@ import { GROK_OFFICIAL_PROVIDER_ID } from '../../constants/grokOfficialProvider'
 import { ApiError, getBaseUrl } from '../../api/client'
 import { getDesktopHost } from '../../lib/desktopHost'
 import { API_KEY_JSON_PLACEHOLDER, maskSettingsJsonSecrets, restoreSettingsJsonSecrets, stripProviderSettingsJsonEnv } from '../../lib/providerSettingsJson'
-import { SETTINGS_CHECKBOX_INPUT_CLASS, SettingsCheckboxMark } from '../settings/shared'
+import { cx } from '@/lib/cx'
+
+/** Section label inside the provider dialog — the same 13px label as a settings section. */
+const FORM_SECTION_LABEL = 'block text-[13px] font-semibold text-[var(--color-text-secondary)]'
+/** Field label matching `Input`'s own, for the fields that cannot use `Input` directly. */
+const FORM_FIELD_LABEL = 'text-sm font-medium text-[var(--color-text-primary)]'
+/** 11px helper line under a field. */
+const FORM_HINT = 'text-[11px] leading-[1.5] text-[var(--color-text-tertiary)]'
 
 /**
  * The Provider panel and the add/edit provider modal.
@@ -241,10 +275,9 @@ export function ProviderSettings({ browserMode = false }: { browserMode?: boolea
   const isGrokOfficialActive = hasLoadedProviders && activeId === GROK_OFFICIAL_PROVIDER_ID
 
   return (
-    <div className="min-w-0 max-w-2xl">
+    <div className="min-w-0">
       <SettingsPageHeader
-        className={browserMode ? 'flex-col' : undefined}
-        title={t('settings.providers.title')}
+        title={t('settings.tab.providers')}
         description={t('settings.providers.description')}
         action={(
           <>
@@ -252,14 +285,14 @@ export function ProviderSettings({ browserMode = false }: { browserMode?: boolea
               variant="secondary"
               size="base"
               onClick={() => setShowCcSwitchImport(true)}
-              icon={<span className="material-symbols-outlined text-[16px]">download</span>}
+              icon={<Download size={14} strokeWidth={1.75} aria-hidden="true" />}
             >
               {t('settings.providers.ccSwitch.importButton')}
             </Button>}
             <Button
               size="base"
               onClick={() => setShowCreateModal(true)}
-              icon={<span className="material-symbols-outlined text-[16px]">add</span>}
+              icon={<Plus size={14} strokeWidth={1.75} aria-hidden="true" />}
             >
               {t('settings.providers.addProvider')}
             </Button>
@@ -267,7 +300,7 @@ export function ProviderSettings({ browserMode = false }: { browserMode?: boolea
         )}
       />
 
-      {(actionFailed || (browserMode && providerLoadError)) && <p role="alert" className="mb-3 text-sm text-[var(--color-error)]">{t('publicAccess.genericError')}</p>}
+      {(actionFailed || (browserMode && providerLoadError)) && <p role="alert" className="mt-4 text-[13px] text-[var(--color-error)]">{t('publicAccess.genericError')}</p>}
       <DndContext
         sensors={sensors}
         collisionDetection={closestCenter}
@@ -277,7 +310,7 @@ export function ProviderSettings({ browserMode = false }: { browserMode?: boolea
           items={providerItems.map((item) => item.id)}
           strategy={verticalListSortingStrategy}
         >
-          <div className="flex flex-col gap-2">
+          <div className="mt-5 flex flex-col gap-2">
             {providerItems.map((item) => {
               if (item.kind === 'claude-official') {
                 return (
@@ -291,10 +324,10 @@ export function ProviderSettings({ browserMode = false }: { browserMode?: boolea
                     title={t('settings.providers.officialName')}
                     subtitle={t('settings.providers.officialDesc')}
                     badges={isClaudeOfficialActive ? (
-                      <Badge tone="brand" bordered>{t('settings.providers.default')}</Badge>
+                      <Badge tone="brand">{t('settings.providers.default')}</Badge>
                     ) : null}
                     details={!browserMode && isClaudeOfficialActive ? (
-                      <div className="border-t border-[var(--color-border-separator)] px-4 pb-4 pt-3">
+                      <div className="flex flex-col">
                         <ClaudeOfficialLogin />
                         <OfficialProviderModelSettings providerId={CLAUDE_OFFICIAL_PROVIDER_ID} />
                       </div>
@@ -315,10 +348,10 @@ export function ProviderSettings({ browserMode = false }: { browserMode?: boolea
                     title={t('settings.providers.openaiOfficialName')}
                     subtitle={t('settings.providers.openaiOfficialDesc')}
                     badges={isOpenAIOfficialActive ? (
-                      <Badge tone="brand" bordered>{t('settings.providers.default')}</Badge>
+                      <Badge tone="brand">{t('settings.providers.default')}</Badge>
                     ) : null}
                     details={!browserMode && isOpenAIOfficialActive ? (
-                      <div className="border-t border-[var(--color-border-separator)] px-4 pb-4 pt-3">
+                      <div className="flex flex-col">
                         <ChatGPTOfficialLogin />
                         <OfficialProviderModelSettings providerId={OPENAI_OFFICIAL_PROVIDER_ID} />
                       </div>
@@ -339,10 +372,10 @@ export function ProviderSettings({ browserMode = false }: { browserMode?: boolea
                     title={t('settings.providers.grokOfficialName')}
                     subtitle={t('settings.providers.grokOfficialDesc')}
                     badges={isGrokOfficialActive ? (
-                      <Badge tone="brand" bordered>{t('settings.providers.default')}</Badge>
+                      <Badge tone="brand">{t('settings.providers.default')}</Badge>
                     ) : null}
                     details={!browserMode && isGrokOfficialActive ? (
-                      <div className="border-t border-[var(--color-border-separator)] px-4 pb-4 pt-3">
+                      <div className="flex flex-col">
                         <GrokOfficialLogin />
                         <OfficialProviderModelSettings providerId={GROK_OFFICIAL_PROVIDER_ID} />
                       </div>
@@ -358,14 +391,23 @@ export function ProviderSettings({ browserMode = false }: { browserMode?: boolea
 
               return (
                 <SortableProviderCard
-                    browserMode={browserMode}
+                  browserMode={browserMode}
                   key={item.id}
                   item={item}
                   isActive={isActive}
                   dragLabel={t('settings.providers.dragToReorder')}
                   onActivate={!isActive ? () => handleActivate(provider.id) : undefined}
                   title={provider.name}
-                  subtitle={<span className="font-mono text-[11.5px]">{`${provider.baseUrl} · ${provider.models.main}`}</span>}
+                  subtitle={<span className="font-mono text-[11px]">{`${provider.baseUrl} · ${provider.models.main}`}</span>}
+                  modelChips={isActive ? (
+                    <ProviderModelChips
+                      models={provider.models}
+                      labels={MODEL_SLOTS.reduce((labels, slot) => {
+                        labels[slot] = t(MODEL_SLOT_LABEL_KEYS[slot])
+                        return labels
+                      }, {} as Record<ModelSlot, string>)}
+                    />
+                  ) : null}
                   badges={(
                     <>
                       {preset && preset.id !== 'custom' && (
@@ -381,36 +423,23 @@ export function ProviderSettings({ browserMode = false }: { browserMode?: boolea
                         </Badge>
                       )}
                       {isActive && (
-                        <Badge tone="brand" bordered>{t('settings.providers.default')}</Badge>
+                        <Badge tone="brand">{t('settings.providers.default')}</Badge>
                       )}
                     </>
                   )}
                   result={test && !test.loading && test.result ? (
-                    <div className="mt-1 flex flex-col gap-0.5 text-xs">
-                      <span className={test.result.connectivity.success ? 'text-[var(--color-success)]' : 'text-[var(--color-error)]'}>
-                        {test.result.connectivity.success
-                          ? t('settings.providers.connectivityOk', { latency: String(test.result.connectivity.latencyMs) })
-                          : t('settings.providers.connectivityFailed', { error: test.result.connectivity.error || '' })}
-                      </span>
-                      {test.result.proxy && (
-                        <span className={test.result.proxy.success ? 'text-[var(--color-success)]' : 'text-[var(--color-error)]'}>
-                          {test.result.proxy.success
-                            ? t('settings.providers.proxyOk', { latency: String(test.result.proxy.latencyMs) })
-                            : t('settings.providers.proxyFailed', { error: test.result.proxy.error || '' })}
-                        </span>
-                      )}
-                    </div>
+                    <ProviderTestResultLines result={test.result} />
+                  ) : null}
+                  secondaryActions={!isActive ? (
+                    <>
+                      <Button variant="ghost" size="sm" onClick={() => handleActivate(provider.id)}>{t('settings.providers.setDefault')}</Button>
+                      <Button variant="danger-ghost" size="sm" onClick={() => handleDelete(provider)}>{t('common.delete')}</Button>
+                    </>
                   ) : null}
                   actions={(
                     <>
-                      {!isActive && (
-                        <Button variant="ghost" size="sm" onClick={() => handleActivate(provider.id)}>{t('settings.providers.setDefault')}</Button>
-                      )}
                       {!browserMode && <Button variant="ghost" size="sm" onClick={() => handleTest(provider)} loading={test?.loading}>{t('settings.providers.test')}</Button>}
                       <Button variant="ghost" size="sm" onClick={() => setEditingProvider(provider)}>{t('settings.providers.edit')}</Button>
-                      {!isActive && (
-                        <Button variant="ghost" size="sm" onClick={() => handleDelete(provider)} className="text-[var(--color-error)] hover:text-[var(--color-error)]">{t('common.delete')}</Button>
-                      )}
                     </>
                   )}
                 />
@@ -468,11 +497,23 @@ type SortableProviderCardProps = {
   subtitle: ReactNode
   badges?: ReactNode
   result?: ReactNode
+  /** Always-visible actions (Test, Edit). */
   actions?: ReactNode
+  /** Rarely-wanted actions (Set default, Delete), revealed on hover or keyboard focus. */
+  secondaryActions?: ReactNode
+  /** The default provider's model mapping, as a full-width chip row. */
+  modelChips?: ReactNode
   details?: ReactNode
   onActivate?: () => void
 }
 
+/**
+ * Indent of everything under the title line: 6px card padding + 20px grip +
+ * 10px gap + 8px dot + 10px gap, so chips, results and details start in the
+ * name's column.
+ */
+const CARD_TEXT_INDENT = 'pl-12'
+
 function SortableProviderCard({
   browserMode = false,
   item,
@@ -483,6 +524,8 @@ function SortableProviderCard({
   badges,
   result,
   actions,
+  secondaryActions,
+  modelChips,
   details,
   onActivate,
 }: SortableProviderCardProps) {
@@ -497,7 +540,7 @@ function SortableProviderCard({
   const style: CSSProperties = {
     transform: CSS.Transform.toString(transform),
     transition,
-    zIndex: isDragging ? 20 : undefined,
+    zIndex: isDragging ? 'var(--z-raised)' : undefined,
   }
 
   return (
@@ -505,49 +548,147 @@ function SortableProviderCard({
       ref={setNodeRef}
       style={style}
       data-testid={providerItemTestId(item)}
-      className={`group relative flex flex-col rounded-[var(--radius-xl)] transition-[background-color,border-color,box-shadow] duration-150 ease-out ${
+      className={cx(
+        'group relative flex flex-wrap items-start gap-x-2.5 gap-y-2 rounded-[var(--radius-lg)] border bg-[var(--color-surface-container-lowest)] p-[14px] pl-1.5',
+        'transition-[border-color,box-shadow] duration-150 ease-out',
+        // The default provider: a terracotta-mixed hairline plus a soft brand
+        // halo. Not the focus color, which would collide with the real focus ring.
         isActive
-          ? 'border-[1.5px] border-[var(--color-primary-fixed-dim)] bg-[var(--color-surface-container-low)]'
-          : 'border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] hover:border-[var(--color-outline)] hover:bg-[var(--color-surface-hover)]'
-      } ${isDragging ? 'shadow-[var(--shadow-overlay)] opacity-90' : ''}`}
+          ? 'border-[var(--color-primary-fixed-dim)] shadow-[0_0_0_3px_var(--color-brand-soft)]'
+          : 'border-[var(--color-border)] hover:border-[var(--color-outline)]',
+        isDragging && 'opacity-90 shadow-[var(--shadow-dropdown)]',
+      )}
     >
-      <div className={browserMode ? "flex flex-wrap items-center gap-2 px-3.5 py-3" : "flex items-center gap-2 px-3.5 py-3"}>
-        <button
-          type="button"
-          {...attributes}
-          {...listeners}
-          aria-label={dragLabel}
-          title={dragLabel}
-          className="flex h-8 w-8 shrink-0 cursor-grab items-center justify-center rounded-[var(--radius-sm)] text-[var(--color-text-tertiary)] transition-colors hover:bg-[var(--color-surface-container-high)] hover:text-[var(--color-text-secondary)] focus:outline-none focus-visible:shadow-[var(--shadow-focus-ring)] active:cursor-grabbing"
-          style={{ touchAction: 'none' }}
-        >
-          <GripVertical className="h-4 w-4" />
-        </button>
-        <button
-          type="button"
-          onClick={onActivate}
-          aria-disabled={!onActivate}
-          className={`flex min-w-0 flex-1 items-center gap-3 rounded-[var(--radius-sm)] text-left focus:outline-none focus-visible:shadow-[var(--shadow-focus-ring)] ${
-            onActivate ? 'cursor-pointer' : 'cursor-default'
-          }`}
-        >
-          <StatusDot tone={isActive ? 'success' : 'neutral'} size="lg" />
-          <span className="min-w-0 flex-1">
-            <span className="flex min-w-0 items-center gap-2">
-              <span className="truncate text-sm font-semibold text-[var(--color-text-primary)]">{title}</span>
-              {badges}
-            </span>
-            <span className="mt-1 block truncate text-[12px] text-[var(--color-text-tertiary)]">{subtitle}</span>
-            {result}
-          </span>
-        </button>
-        {actions && (
-          <div className={browserMode ? "flex w-full flex-wrap items-center justify-end gap-1 [&_button]:min-h-11" : "flex shrink-0 items-center gap-1 opacity-100 transition-opacity sm:opacity-0 sm:group-focus-within:opacity-100 sm:group-hover:opacity-100"}>
-            {actions}
-          </div>
+      <button
+        type="button"
+        {...attributes}
+        {...listeners}
+        aria-label={dragLabel}
+        title={dragLabel}
+        className={cx(
+          'flex h-5 w-5 shrink-0 cursor-grab items-center justify-center rounded-[var(--radius-xs)] text-[var(--color-text-tertiary)] transition-[opacity,color] duration-150',
+          'hover:text-[var(--color-text-secondary)] focus:outline-none focus-visible:opacity-100 focus-visible:shadow-[var(--shadow-focus-ring)] active:cursor-grabbing',
+          // Touch has no hover, so the handle stays visible on the phone.
+          !browserMode && 'opacity-0 group-hover:opacity-100',
         )}
-      </div>
-      {details}
+        style={{ touchAction: 'none' }}
+      >
+        <GripVertical size={14} strokeWidth={1.75} aria-hidden="true" />
+      </button>
+      <button
+        type="button"
+        onClick={onActivate}
+        aria-disabled={!onActivate}
+        className={cx(
+          'flex min-w-0 flex-1 items-start gap-2.5 rounded-[var(--radius-sm)] text-left focus:outline-none focus-visible:shadow-[var(--shadow-focus-ring)]',
+          onActivate ? 'cursor-pointer' : 'cursor-default',
+        )}
+      >
+        <span
+          aria-hidden="true"
+          className={cx(
+            'mt-[6px] size-2 shrink-0 rounded-full',
+            isActive
+              ? 'bg-[var(--color-success)] shadow-[0_0_0_3px_var(--color-success-container)]'
+              : 'bg-[var(--color-outline)]',
+          )}
+        />
+        <span className="min-w-0 flex-1">
+          <span className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1">
+            <span className="min-w-0 truncate text-sm font-semibold leading-5 text-[var(--color-text-primary)]">{title}</span>
+            {badges}
+          </span>
+          <span className="mt-[3px] block truncate text-xs text-[var(--color-text-tertiary)]">{subtitle}</span>
+        </span>
+      </button>
+      {(actions || secondaryActions) && (
+        <div
+          className={cx(
+            'flex items-center gap-0.5',
+            browserMode ? 'w-full flex-wrap justify-end [&_button]:min-h-11' : 'shrink-0',
+          )}
+        >
+          {secondaryActions && (
+            <span
+              className={cx(
+                'flex items-center gap-0.5',
+                !browserMode && 'opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-focus-within:opacity-100',
+              )}
+            >
+              {secondaryActions}
+            </span>
+          )}
+          {actions}
+        </div>
+      )}
+      {result && <div className={cx('basis-full', CARD_TEXT_INDENT)}>{result}</div>}
+      {modelChips && <div className={cx('basis-full', CARD_TEXT_INDENT)}>{modelChips}</div>}
+      {details && <div className={cx('basis-full pt-1', CARD_TEXT_INDENT)}>{details}</div>}
+    </div>
+  )
+}
+
+/** The default provider's role mappings — main always, the rest only where they differ. */
+function ProviderModelChips({ models, labels }: { models: ModelMapping; labels: Record<ModelSlot, string> }) {
+  const main = models.main.trim()
+  const slots = MODEL_SLOTS.filter((slot) => {
+    const value = models[slot]?.trim()
+    return slot === 'main' ? Boolean(value) : Boolean(value) && value !== main
+  })
+  if (slots.length === 0) return null
+  return (
+    <div className="flex flex-wrap gap-1.5">
+      {slots.map((slot) => (
+        <span
+          key={slot}
+          className="inline-flex h-6 max-w-full items-center gap-1.5 rounded-[var(--radius-sm)] bg-[var(--color-surface-container)] px-2 text-[11px] text-[var(--color-text-tertiary)]"
+        >
+          <span className="shrink-0">{labels[slot]}</span>
+          <span className="min-w-0 truncate font-mono text-[var(--color-text-primary)]">{models[slot]}</span>
+        </span>
+      ))}
+    </div>
+  )
+}
+
+/** The two-step connection test result: direct connectivity, then the proxy pipeline. */
+function ProviderTestResultLines({ result }: { result: ProviderTestResult }) {
+  const t = useTranslation()
+  const lines = [
+    {
+      key: 'connectivity',
+      success: result.connectivity.success,
+      text: result.connectivity.success
+        ? t('settings.providers.connectivityOk', { latency: String(result.connectivity.latencyMs) })
+        : t('settings.providers.connectivityFailed', { error: result.connectivity.error || '' }),
+    },
+    ...(result.proxy
+      ? [{
+          key: 'proxy',
+          success: result.proxy.success,
+          text: result.proxy.success
+            ? t('settings.providers.proxyOk', { latency: String(result.proxy.latencyMs) })
+            : t('settings.providers.proxyFailed', { error: result.proxy.error || '' }),
+        }]
+      : []),
+  ]
+  return (
+    <div className="flex min-w-0 flex-col gap-0.5 break-words text-xs">
+      {lines.map((line) => {
+        const Icon = line.success ? CircleCheck : CircleAlert
+        return (
+          <span
+            key={line.key}
+            className={cx(
+              'inline-flex items-start gap-1',
+              line.success ? 'text-[var(--color-success)]' : 'text-[var(--color-error)]',
+            )}
+          >
+            <Icon size={12} strokeWidth={2} aria-hidden="true" className="mt-[3px] shrink-0" />
+            <span className="min-w-0">{line.text}</span>
+          </span>
+        )
+      })}
     </div>
   )
 }
@@ -1257,11 +1398,11 @@ function ProviderFormModal({ open, onClose, mode, provider, presets, browserMode
         ? t('settings.providers.regionGlobal')
         : endpoint.region,
     description: endpoint.baseUrl,
-    icon: (
-      <span className="material-symbols-outlined text-[17px]">
-        {endpoint.region === 'cn_zh' ? 'location_on' : endpoint.region === 'global_en' ? 'public' : 'link'}
-      </span>
-    ),
+    icon: endpoint.region === 'cn_zh'
+      ? <MapPin size={16} strokeWidth={1.75} aria-hidden="true" />
+      : endpoint.region === 'global_en'
+        ? <Globe size={16} strokeWidth={1.75} aria-hidden="true" />
+        : <Link size={16} strokeWidth={1.75} aria-hidden="true" />,
   }))
   const selectedRegionalEndpointUrl = regionalEndpointItems.find(
     (option) => normalizeProviderBaseUrl(option.value) === normalizedBaseUrl,
@@ -1275,17 +1416,17 @@ function ProviderFormModal({ open, onClose, mode, provider, presets, browserMode
     {
       value: 'anthropic' as const,
       label: t('settings.providers.apiFormatAnthropic'),
-      icon: <span className="material-symbols-outlined text-[17px]">hub</span>,
+      icon: <Network size={16} strokeWidth={1.75} aria-hidden="true" />,
     },
     {
       value: 'openai_chat' as const,
       label: t('settings.providers.apiFormatOpenaiChat'),
-      icon: <span className="material-symbols-outlined text-[17px]">forum</span>,
+      icon: <MessagesSquare size={16} strokeWidth={1.75} aria-hidden="true" />,
     },
     {
       value: 'openai_responses' as const,
       label: t('settings.providers.apiFormatOpenaiResponses'),
-      icon: <span className="material-symbols-outlined text-[17px]">route</span>,
+      icon: <Route size={16} strokeWidth={1.75} aria-hidden="true" />,
     },
   ]
   const selectedApiFormatLabel = apiFormatItems.find((item) => item.value === apiFormat)?.label ?? t('settings.providers.apiFormatAnthropic')
@@ -1294,31 +1435,31 @@ function ProviderFormModal({ open, onClose, mode, provider, presets, browserMode
       value: 'auth_token' as const,
       label: t('settings.providers.authStrategyAuthToken'),
       description: t('settings.providers.authStrategyAuthTokenDesc'),
-      icon: <span className="material-symbols-outlined text-[17px]">key</span>,
+      icon: <KeyRound size={16} strokeWidth={1.75} aria-hidden="true" />,
     },
     {
       value: 'auth_token_empty_api_key' as const,
       label: t('settings.providers.authStrategyAuthTokenEmptyApiKey'),
       description: t('settings.providers.authStrategyAuthTokenEmptyApiKeyDesc'),
-      icon: <span className="material-symbols-outlined text-[17px]">key_off</span>,
+      icon: <KeySquare size={16} strokeWidth={1.75} aria-hidden="true" />,
     },
     {
       value: 'api_key' as const,
       label: t('settings.providers.authStrategyApiKey'),
       description: t('settings.providers.authStrategyApiKeyDesc'),
-      icon: <span className="material-symbols-outlined text-[17px]">vpn_key</span>,
+      icon: <Key size={16} strokeWidth={1.75} aria-hidden="true" />,
     },
     {
       value: 'dual_same_token' as const,
       label: t('settings.providers.authStrategyDualSameToken'),
       description: t('settings.providers.authStrategyDualSameTokenDesc'),
-      icon: <span className="material-symbols-outlined text-[17px]">sync_alt</span>,
+      icon: <ArrowLeftRight size={16} strokeWidth={1.75} aria-hidden="true" />,
     },
     {
       value: 'dual_dummy' as const,
       label: t('settings.providers.authStrategyDualDummy'),
       description: t('settings.providers.authStrategyDualDummyDesc'),
-      icon: <span className="material-symbols-outlined text-[17px]">construction</span>,
+      icon: <Wrench size={16} strokeWidth={1.75} aria-hidden="true" />,
     },
   ] satisfies Array<{ value: ProviderAuthStrategy; label: string; description: string; icon: ReactNode }>
   const selectedAuthStrategyLabel = authStrategyItems.find((item) => item.value === authStrategy)?.label ?? t('settings.providers.authStrategyAuthToken')
@@ -1716,17 +1857,17 @@ function ProviderFormModal({ open, onClose, mode, provider, presets, browserMode
     >
       <div className="flex min-w-0 flex-col gap-4">
         {browserMode && <p className="text-xs leading-5 text-[var(--color-text-secondary)]">{t('h5Settings.providerPrivacy')}</p>}
-        {saveFailed && <p role="alert" className="text-sm text-[var(--color-error)]">{t(credentialRequired ? 'h5Settings.credentialRequired' : 'publicAccess.genericError')}</p>}
+        {saveFailed && <p role="alert" className="text-[13px] text-[var(--color-error)]">{t(credentialRequired ? 'h5Settings.credentialRequired' : 'publicAccess.genericError')}</p>}
         {/* Preset chips */}
         {mode === 'create' && (
           <div>
-            <label className="text-sm font-medium text-[var(--color-text-primary)] mb-2 block">{t('settings.providers.preset')}</label>
+            <span className={cx(FORM_SECTION_LABEL, 'mb-2')}>{t('settings.providers.preset')}</span>
             <div className="flex flex-col gap-2">
-              <div className="flex flex-wrap gap-2">
+              <div className="flex flex-wrap gap-1.5">
                 {regularPresets.map(renderPresetButton)}
               </div>
               {featuredPresets.length > 0 && (
-                <div className="flex flex-wrap gap-2 border-t border-[var(--color-border-separator)] pt-2">
+                <div className="flex flex-wrap gap-1.5 border-t border-[var(--color-border)] pt-2">
                   {featuredPresets.map(renderPresetButton)}
                 </div>
               )}
@@ -1737,8 +1878,8 @@ function ProviderFormModal({ open, onClose, mode, provider, presets, browserMode
         <Input label={t('settings.providers.name')} required value={name} onChange={(e) => setName(e.target.value)} placeholder={t('settings.providers.namePlaceholder')} />
 
         {regionalEndpointItems.length > 1 && (
-          <div>
-            <label className="text-sm font-medium text-[var(--color-text-primary)] mb-1 block">{t('settings.providers.endpointRegion')}</label>
+          <div className="flex flex-col gap-1">
+            <span className={FORM_FIELD_LABEL}>{t('settings.providers.endpointRegion')}</span>
             <Dropdown<string>
               items={regionalEndpointItems}
               value={selectedRegionalEndpointUrl}
@@ -1749,7 +1890,7 @@ function ProviderFormModal({ open, onClose, mode, provider, presets, browserMode
               trigger={
                 <Button variant="secondary" size="md" block className="h-10 gap-3">
                   <span className="min-w-0 flex-1 truncate text-left">{selectedRegionalEndpointLabel}</span>
-                  <span className="material-symbols-outlined flex-shrink-0 text-[18px] text-[var(--color-text-secondary)]">expand_more</span>
+                  <ChevronDown size={16} strokeWidth={1.75} aria-hidden="true" className="shrink-0 text-[var(--color-text-tertiary)]" />
                 </Button>
               }
             />
@@ -1758,13 +1899,13 @@ function ProviderFormModal({ open, onClose, mode, provider, presets, browserMode
 
         <div className="flex flex-col gap-1">
           <div className="flex items-center gap-1">
-            <label htmlFor={baseUrlInputId} className="text-sm font-medium text-[var(--color-text-primary)]">
+            <label htmlFor={baseUrlInputId} className={FORM_FIELD_LABEL}>
               {t('settings.providers.baseUrl')}
               <span className="ml-0.5 text-[var(--color-error)]">*</span>
             </label>
             <Tooltip content={t('settings.providers.baseUrlTooltip')} placement="bottom-start">
               <IconButton
-                icon="info"
+                icon={<Info size={12} strokeWidth={2} aria-hidden="true" />}
                 label={t('settings.providers.baseUrlHelp')}
                 showTooltip={false}
                 size="2xs"
@@ -1777,7 +1918,7 @@ function ProviderFormModal({ open, onClose, mode, provider, presets, browserMode
         </div>
 
         <div className="flex flex-col gap-1">
-          <label htmlFor="provider-api-key" className="text-sm font-medium text-[var(--color-text-primary)]">
+          <label htmlFor="provider-api-key" className={FORM_FIELD_LABEL}>
             {t('settings.providers.apiKey')}
             {mode === 'create' && requiresApiKey && <span className="text-[var(--color-error)] ml-0.5">*</span>}
           </label>
@@ -1790,10 +1931,12 @@ function ProviderFormModal({ open, onClose, mode, provider, presets, browserMode
               value={apiKey}
               onChange={(e) => handleApiKeyChange(e.target.value)}
               placeholder="sk-..."
-              className="h-10 w-full rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] px-3 pr-10 text-sm text-[var(--color-text-primary)] outline-none transition-colors duration-150 placeholder:text-[var(--color-text-tertiary)] focus:border-[var(--color-border-focus)] focus:shadow-[var(--shadow-focus-ring)]"
+              className={cx(FIELD_BASE_CLASSES, FIELD_SIZE_CLASSES.lg, fieldStateClasses(false), 'pr-10')}
             />
             <IconButton
-              icon={showApiKey ? 'visibility_off' : 'visibility'}
+              icon={showApiKey
+                ? <EyeOff size={14} strokeWidth={1.75} aria-hidden="true" />
+                : <Eye size={14} strokeWidth={1.75} aria-hidden="true" />}
               label={t(showApiKey ? 'settings.providers.hideApiKey' : 'settings.providers.showApiKey')}
               showTooltip={false}
               size="sm"
@@ -1810,11 +1953,11 @@ function ProviderFormModal({ open, onClose, mode, provider, presets, browserMode
               <button
                 type="button"
                 onClick={() => openExternalUrl(apiKeyUrl)}
-                className="group inline-flex h-6 w-fit cursor-pointer items-center gap-1 rounded-[var(--radius-sm)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)] px-1.5 text-[11px] font-medium leading-none text-[var(--color-brand)] transition-colors hover:border-[var(--color-border-focus)] hover:bg-[var(--color-surface-hover)] focus:outline-none focus:shadow-[var(--shadow-focus-ring)]"
+                className="group inline-flex h-6 w-fit cursor-pointer items-center gap-1 rounded-[var(--radius-sm)] bg-[var(--color-surface-container)] px-2 text-[11px] font-medium leading-none text-[var(--color-text-accent)] transition-colors hover:bg-[var(--color-surface-hover)] focus:outline-none focus:shadow-[var(--shadow-focus-ring)]"
               >
-                <span className="material-symbols-outlined text-[13px]">key</span>
+                <KeyRound size={12} strokeWidth={2} aria-hidden="true" />
                 {t('settings.providers.getApiKey')}
-                <span className="material-symbols-outlined text-[9px] opacity-60 transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5">arrow_outward</span>
+                <ArrowUpRight size={11} strokeWidth={2} aria-hidden="true" className="opacity-60 transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5" />
               </button>
             )}
             {promoText && (
@@ -1822,10 +1965,10 @@ function ProviderFormModal({ open, onClose, mode, provider, presets, browserMode
                 <button
                   type="button"
                   onClick={() => openExternalUrl(apiKeyUrl)}
-                  className="group inline-flex min-w-0 cursor-pointer items-start gap-1 text-left text-[11px] leading-5 text-[var(--color-text-tertiary)] transition-colors hover:text-[var(--color-brand)] focus:outline-none focus:shadow-[var(--shadow-focus-ring)]"
+                  className="group inline-flex min-w-0 cursor-pointer items-start gap-1 text-left text-[11px] leading-5 text-[var(--color-text-tertiary)] transition-colors hover:text-[var(--color-text-accent)] focus:outline-none focus:shadow-[var(--shadow-focus-ring)]"
                 >
                   <span>{promoText}</span>
-                  <span aria-hidden="true" className="material-symbols-outlined mt-1 shrink-0 text-[10px] opacity-50 transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5">arrow_outward</span>
+                  <ArrowUpRight size={11} strokeWidth={2} aria-hidden="true" className="mt-1 shrink-0 opacity-50 transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5" />
                 </button>
               ) : (
                 <span className="text-[11px] leading-5 text-[var(--color-text-tertiary)]">{promoText}</span>
@@ -1837,22 +1980,22 @@ function ProviderFormModal({ open, onClose, mode, provider, presets, browserMode
         {/* Model Mapping */}
         <div>
           <div className="mb-2 flex items-center justify-between gap-2">
-            <label className="text-sm font-medium text-[var(--color-text-primary)]">{t('settings.providers.modelMapping')}</label>
+            <span className={FORM_SECTION_LABEL}>{t('settings.providers.modelMapping')}</span>
             {!browserMode && <Button
               variant="secondary"
               size="base"
               onClick={handleFetchModels}
               disabled={!canFetchModels}
               loading={isFetchingModels}
-              icon={<span className="material-symbols-outlined text-[15px]">cloud_download</span>}
+              icon={<CloudDownload size={14} strokeWidth={1.75} aria-hidden="true" />}
             >
               {t('settings.providers.fetchModels')}
             </Button>}
           </div>
           {browserMode ? null : !hasModelsApiKey ? (
-            <p className="mb-2 text-[11px] text-[var(--color-text-tertiary)]">{t('settings.providers.fetchModelsApiKeyHint')}</p>
+            <p className={cx(FORM_HINT, 'mb-2')}>{t('settings.providers.fetchModelsApiKeyHint')}</p>
           ) : !hasModelsBaseUrl ? (
-            <p className="mb-2 text-[11px] text-[var(--color-text-tertiary)]">{t('settings.providers.fetchModelsHint')}</p>
+            <p className={cx(FORM_HINT, 'mb-2')}>{t('settings.providers.fetchModelsHint')}</p>
           ) : modelsErrorCode ? (
             <div role="alert" className="mb-2 flex flex-col gap-0.5">
               <p className="text-[11px] text-[var(--color-error)]">{modelsErrorText}</p>
@@ -1863,13 +2006,13 @@ function ProviderFormModal({ open, onClose, mode, provider, presets, browserMode
               )}
             </div>
           ) : fetchedModels && fetchedModels.length === 0 ? (
-            <p className="mb-2 text-[11px] text-[var(--color-text-tertiary)]">{t('settings.providers.fetchModelsEmpty')}</p>
+            <p className={cx(FORM_HINT, 'mb-2')}>{t('settings.providers.fetchModelsEmpty')}</p>
           ) : fetchedModels ? (
             <p className="mb-2 text-[11px] text-[var(--color-text-secondary)]">
               {t('settings.providers.fetchModelsLoaded', { count: fetchedModels.length })}
             </p>
           ) : (
-            <p className="mb-2 text-[11px] text-[var(--color-text-tertiary)]">{t('settings.providers.fetchModelsSupportHint')}</p>
+            <p className={cx(FORM_HINT, 'mb-2')}>{t('settings.providers.fetchModelsSupportHint')}</p>
           )}
           <div className={browserMode ? "grid grid-cols-1 sm:grid-cols-2 gap-2" : "grid grid-cols-2 gap-2"}>
             {MODEL_SLOTS.map((slot) => {
@@ -1900,12 +2043,13 @@ function ProviderFormModal({ open, onClose, mode, provider, presets, browserMode
                   />
                   <Tooltip content={t('settings.providers.model1mSupportTooltip')} placement="bottom-start">
                     <label className="mt-1 inline-flex h-6 w-fit cursor-pointer items-center gap-1.5 rounded-[var(--radius-sm)] px-1 text-xs text-[var(--color-text-secondary)] transition-colors hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)]">
+                      {/* Named per slot rather than by the shared visible "1M" text. */}
                       <input
                         type="checkbox"
                         checked={model1mSupport[slot]}
                         onChange={(e) => handleModel1mSupportChange(slot, e.target.checked)}
                         aria-label={t('settings.providers.model1mSupportAria', { slot })}
-                        className="h-3.5 w-3.5 rounded border-[var(--color-border)] text-[var(--color-brand)] accent-[var(--color-brand)] focus:ring-[var(--color-brand)]"
+                        className="h-3.5 w-3.5 shrink-0 rounded-[var(--radius-xs)] border-[var(--color-border-strong)] accent-[var(--color-brand)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]"
                       />
                       <span>{t('settings.providers.model1mSupportShort')}</span>
                     </label>
@@ -1914,7 +2058,7 @@ function ProviderFormModal({ open, onClose, mode, provider, presets, browserMode
               )
             })}
           </div>
-          <p className="mt-2 text-[11px] leading-5 text-[var(--color-text-tertiary)]">
+          <p className={cx(FORM_HINT, 'mt-2')}>
             {t('settings.providers.model1mSupportHint')}
           </p>
         </div>
@@ -1924,8 +2068,8 @@ function ProviderFormModal({ open, onClose, mode, provider, presets, browserMode
         {/* API Format — a preset only owns this field when it routes per model;
             every other preset starts on its own format but stays switchable. */}
         {!presetDrivesApiFormat ? (
-          <div>
-            <label className="text-sm font-medium text-[var(--color-text-primary)] mb-1 block">{t('settings.providers.apiFormat')}</label>
+          <div className="flex flex-col gap-1">
+            <span className={FORM_FIELD_LABEL}>{t('settings.providers.apiFormat')}</span>
             <Dropdown<ApiFormat>
               items={apiFormatItems}
               value={apiFormat}
@@ -1935,34 +2079,34 @@ function ProviderFormModal({ open, onClose, mode, provider, presets, browserMode
               trigger={
                 <Button variant="secondary" size="md" block className="h-10 gap-3">
                   <span className="min-w-0 flex-1 truncate text-left">{selectedApiFormatLabel}</span>
-                  <span className="material-symbols-outlined flex-shrink-0 text-[18px] text-[var(--color-text-secondary)]">expand_more</span>
+                  <ChevronDown size={16} strokeWidth={1.75} aria-hidden="true" className="shrink-0 text-[var(--color-text-tertiary)]" />
                 </Button>
               }
             />
             {apiFormat !== 'anthropic' && (
-              <p className="text-[11px] text-[var(--color-text-tertiary)] mt-1">{t('settings.providers.proxyHint')}</p>
+              <p className={FORM_HINT}>{t('settings.providers.proxyHint')}</p>
             )}
             {/* The preset's own endpoint is still in the field above; a custom
                 preset brings none, so there is nothing to warn about. */}
             {apiFormat !== selectedPreset.apiFormat && Boolean(selectedPreset.baseUrl) && (
-              <p className="text-[11px] text-[var(--color-text-tertiary)] mt-1">{t('settings.providers.apiFormatOverrideHint')}</p>
+              <p className={FORM_HINT}>{t('settings.providers.apiFormatOverrideHint')}</p>
             )}
           </div>
         ) : (
-          <div>
-            <label className="text-sm font-medium text-[var(--color-text-primary)] mb-1 block">{t('settings.providers.apiFormat')}</label>
-            <div className="text-xs text-[var(--color-text-tertiary)] px-3 py-2 rounded-[var(--radius-md)] bg-[var(--color-surface-container-low)] border border-[var(--color-border)]">
+          <div className="flex flex-col gap-1">
+            <span className={FORM_FIELD_LABEL}>{t('settings.providers.apiFormat')}</span>
+            <div className="rounded-[var(--radius-md)] bg-[var(--color-surface-container)] px-3 py-2 text-xs text-[var(--color-text-secondary)]">
               {selectedApiFormatLabel}
             </div>
-            <p className="text-[11px] text-[var(--color-text-tertiary)] mt-1">{t('settings.providers.apiFormatPerModelHint')}</p>
+            <p className={FORM_HINT}>{t('settings.providers.apiFormatPerModelHint')}</p>
           </div>
         )}
 
         <ProviderRequestCompatibilityFields value={compatibility} apiFormat={apiFormat} onChange={handleCompatibilityChange} />
 
         {apiFormat === 'anthropic' && (
-          <div>
-            <label className="text-sm font-medium text-[var(--color-text-primary)] mb-1 block">{t('settings.providers.authStrategy')}</label>
+          <div className="flex flex-col gap-1">
+            <span className={FORM_FIELD_LABEL}>{t('settings.providers.authStrategy')}</span>
             <Dropdown<ProviderAuthStrategy>
               items={authStrategyItems}
               value={authStrategy}
@@ -1972,7 +2116,7 @@ function ProviderFormModal({ open, onClose, mode, provider, presets, browserMode
               trigger={
                 <Button variant="secondary" size="md" block className="h-auto min-h-10 gap-3 py-2">
                   <span className="min-w-0 flex-1 truncate text-left">{selectedAuthStrategyLabel}</span>
-                  <span className="material-symbols-outlined flex-shrink-0 text-[18px] text-[var(--color-text-secondary)]">expand_more</span>
+                  <ChevronDown size={16} strokeWidth={1.75} aria-hidden="true" className="shrink-0 text-[var(--color-text-tertiary)]" />
                 </Button>
               }
             />
@@ -1986,58 +2130,60 @@ function ProviderFormModal({ open, onClose, mode, provider, presets, browserMode
             { key: 'supportsNestedToolResultMedia' as const, checked: supportsNestedToolResultMedia, disabled: nestedToolResultMediaUnsupported, onChange: handleNestedToolResultMediaToggle, description: nestedToolResultMediaDescription },
           ].map((option) => (
             <div key={option.key} className="inline-flex items-center gap-1">
-              <label className={`relative inline-flex items-center gap-2 py-1 text-xs text-[var(--color-text-primary)] ${option.disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'}`}>
-                <input
-                  type="checkbox"
-                  aria-label={t(`settings.providers.${option.key}`)}
-                  checked={option.checked}
-                  disabled={option.disabled}
-                  onChange={(e) => option.onChange(e.target.checked)}
-                  className={SETTINGS_CHECKBOX_INPUT_CLASS}
-                />
-                <SettingsCheckboxMark checked={option.checked} disabled={option.disabled} />
-                {t(`settings.providers.${option.key}`)}
-              </label>
+              <Checkbox
+                size="sm"
+                label={t(`settings.providers.${option.key}`)}
+                checked={option.checked}
+                disabled={option.disabled}
+                onChange={(e) => option.onChange(e.target.checked)}
+                containerClassName="py-1"
+              />
               <Tooltip content={option.description} placement="top-start" className="[overflow-wrap:anywhere]">
-                <IconButton icon="info" label={t(`settings.providers.${option.key}`)} showTooltip={false} size="2xs" tone="muted" />
+                <IconButton
+                  icon={<Info size={12} strokeWidth={2} aria-hidden="true" />}
+                  label={t(`settings.providers.${option.key}`)}
+                  showTooltip={false}
+                  size="2xs"
+                  tone="muted"
+                />
               </Tooltip>
             </div>
           ))}
         </div>
 
-        <div className="rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface-container-low)]">
+        <div className="overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)]">
           <button
             type="button"
             onClick={() => setShowContextSettings((visible) => !visible)}
-            className="flex w-full items-start gap-3 px-3 py-3 text-left outline-none transition-colors hover:bg-[var(--color-surface-hover)] focus-visible:shadow-[var(--shadow-focus-ring)]"
+            className="flex w-full items-start gap-3 px-4 py-3 text-left outline-none transition-colors hover:bg-[var(--color-surface-hover)] focus-visible:shadow-[var(--shadow-focus-ring)]"
             aria-expanded={shouldShowContextFields}
           >
-            <span className="material-symbols-outlined mt-0.5 text-[18px] text-[var(--color-brand)]">compress</span>
+            <Shrink size={16} strokeWidth={1.75} aria-hidden="true" className="mt-0.5 shrink-0 text-[var(--color-text-tertiary)]" />
             <span className="min-w-0 flex-1">
-              <span className="block text-sm font-medium text-[var(--color-text-primary)]">
+              <span className="block text-[13px] font-medium text-[var(--color-text-primary)]">
                 {t('settings.providers.contextSettingsTitle')}
               </span>
-              <span className="mt-1 block truncate text-xs text-[var(--color-text-secondary)]">
+              <span className="mt-0.5 block truncate text-xs text-[var(--color-text-secondary)]">
                 {contextSummary}
               </span>
-              <span className="mt-1 block text-[11px] leading-5 text-[var(--color-text-tertiary)]">
+              <span className="mt-1 block text-xs leading-[1.5] text-[var(--color-text-tertiary)]">
                 {t('settings.providers.contextSettingsDesc')}
               </span>
             </span>
-            <span className="mt-0.5 inline-flex items-center gap-1 text-xs font-medium text-[var(--color-brand)]">
+            <span className="mt-0.5 inline-flex shrink-0 items-center gap-1 text-xs font-medium text-[var(--color-text-secondary)]">
               {shouldShowContextFields
                 ? t('settings.providers.contextSettingsHide')
                 : t('settings.providers.contextSettingsEdit')}
-              <span className="material-symbols-outlined text-[16px]">
-                {shouldShowContextFields ? 'expand_less' : 'expand_more'}
-              </span>
+              {shouldShowContextFields
+                ? <ChevronUp size={14} strokeWidth={1.75} aria-hidden="true" />
+                : <ChevronDown size={14} strokeWidth={1.75} aria-hidden="true" />}
             </span>
           </button>
 
           {shouldShowContextFields && (
-            <div className="border-t border-[var(--color-border)] px-3 pb-3 pt-3">
+            <div className="border-t border-[var(--color-border)] px-4 pb-4 pt-3">
               <div>
-                <label className="text-sm font-medium text-[var(--color-text-primary)] mb-2 block">{t('settings.providers.modelContextWindows')}</label>
+                <span className={cx(FORM_SECTION_LABEL, 'mb-2')}>{t('settings.providers.modelContextWindows')}</span>
                 <div className={browserMode ? "grid grid-cols-1 sm:grid-cols-2 gap-2" : "grid grid-cols-2 gap-2"}>
                   {MODEL_SLOTS.map((slot) => {
                     const errorKey = getModelContextWindowErrorKey(modelContextInputs[slot])
@@ -2097,30 +2243,19 @@ function ProviderFormModal({ open, onClose, mode, provider, presets, browserMode
 
         {/* Test connection */}
         {!browserMode && <div className="flex items-center gap-3">
-          <Button variant="secondary" size="sm" className="shrink-0 whitespace-nowrap" onClick={handleTest} loading={isTesting} disabled={!baseUrl.trim() || !models.main.trim() || compatibilityInvalid}>
+          <Button variant="secondary" size="base" className="shrink-0 whitespace-nowrap" onClick={handleTest} loading={isTesting} disabled={!baseUrl.trim() || !models.main.trim() || compatibilityInvalid}>
             {t('settings.providers.testConnection')}
           </Button>
           {testResult && (
-            <div className="flex min-w-0 flex-1 flex-col gap-0.5 break-words">
-              <span className={`text-xs ${testResult.connectivity.success ? 'text-[var(--color-success)]' : 'text-[var(--color-error)]'}`}>
-                {testResult.connectivity.success
-                  ? t('settings.providers.connectivityOk', { latency: String(testResult.connectivity.latencyMs) })
-                  : t('settings.providers.connectivityFailed', { error: testResult.connectivity.error || '' })}
-              </span>
-              {testResult.proxy && (
-                <span className={`text-xs ${testResult.proxy.success ? 'text-[var(--color-success)]' : 'text-[var(--color-error)]'}`}>
-                  {testResult.proxy.success
-                    ? t('settings.providers.proxyOk', { latency: String(testResult.proxy.latencyMs) })
-                    : t('settings.providers.proxyFailed', { error: testResult.proxy.error || '' })}
-                </span>
-              )}
+            <div className="min-w-0 flex-1">
+              <ProviderTestResultLines result={testResult} />
             </div>
           )}
         </div>}
 
         {/* Settings JSON stays on the trusted desktop. */}
         {!browserMode && <div>
-          <label className="text-sm font-medium text-[var(--color-text-primary)] mb-2 block">{t('settings.providers.settingsJson')}</label>
+          <span className={cx(FORM_SECTION_LABEL, 'mb-2')}>{t('settings.providers.settingsJson')}</span>
           <textarea
             aria-label={t('settings.providers.settingsJson')}
             value={displayedSettingsJson}
diff --git a/desktop/src/pages/settings/PublicAccessSettings.test.tsx b/desktop/src/pages/settings/PublicAccessSettings.test.tsx
index 7d74c2d4..aca0a30b 100644
--- a/desktop/src/pages/settings/PublicAccessSettings.test.tsx
+++ b/desktop/src/pages/settings/PublicAccessSettings.test.tsx
@@ -43,7 +43,7 @@ it('asks v1 users to confirm model configuration management before enabling agai
   mocks.getStatus.mockResolvedValue({ ...mocks.status, state: 'disabled', hasCredential: true, autoStart: true, consentVersion: 1 })
   render(<PublicAccessSettings />)
   await screen.findByText('Off')
-  expect(screen.getByRole('checkbox')).toBeDisabled()
+  expect(screen.getByRole('switch', { name: 'Restore public access when the desktop starts' })).toBeDisabled()
   fireEvent.click(screen.getByRole('button', { name: 'Enable public access' }))
   const dialog = within(await screen.findByRole('dialog'))
   expect(dialog.getByText(/add, edit, delete and switch model provider configurations and API keys/)).toBeInTheDocument()
diff --git a/desktop/src/pages/settings/PublicAccessSettings.tsx b/desktop/src/pages/settings/PublicAccessSettings.tsx
index 526534b6..5335bf7f 100644
--- a/desktop/src/pages/settings/PublicAccessSettings.tsx
+++ b/desktop/src/pages/settings/PublicAccessSettings.tsx
@@ -5,9 +5,15 @@ import { getDesktopHost } from '@/lib/desktopHost'
 import { PUBLIC_ACCESS_CONSENT_VERSION } from '@/lib/desktopHost/types'
 import { copyTextToClipboard } from '@/lib/clipboard'
 import { Button } from '@/components/ui/Button'
-import { Card } from '@/components/ui/Card'
-import { Checkbox } from '@/components/ui/Checkbox'
+import { StatusDot } from '@/components/ui/Badge'
 import { Input } from '@/components/ui/Input'
+import {
+  SettingsBlock,
+  SettingsGroup,
+  SettingsRow,
+  SettingsSection,
+  SettingsSwitchRow,
+} from '@/components/settings/SettingsSection'
 import { ConfirmDialog } from '@/components/ui/ConfirmDialog'
 import { useTranslation } from '@/i18n'
 
@@ -86,38 +92,103 @@ export function PublicAccessSettings() {
   const errorLabels = {
     auth: t('publicAccess.authError'), quota: t('publicAccess.quotaError'), network: t('publicAccess.networkError'), configuration: t('publicAccess.configurationError'),
   }
-  return <section aria-labelledby="public-access-title" className="mt-8">
-    <h2 id="public-access-title" className="mb-3 text-xl font-semibold">{t('publicAccess.title')}</h2>
-    <Card radius="xl" surface="low" padding="none" className="space-y-4 p-4">
-      <p className="text-sm text-[var(--color-text-secondary)]">{t('publicAccess.intro')}</p>
-      <Button variant="secondary" onClick={() => void run(() => host.shell.open('https://dashboard.ngrok.com/get-started/your-authtoken'))}>{t('publicAccess.account')}</Button>
-      <Input aria-describedby="public-access-error" type="password" autoComplete="off" spellCheck={false} aria-label={t('publicAccess.token')} placeholder={status?.hasCredential ? t('publicAccess.tokenSaved') : t('publicAccess.token')} value={token} onChange={(event) => setToken(event.target.value)} />
-      <p role="status" className="text-sm">{status ? stateLabels[status.state] : t('common.loading')}</p>
-      <div className="flex flex-wrap gap-2">
-        <Button disabled={busy || (!token.trim() && !status?.hasCredential) || status?.state === 'online' || status?.state === 'connecting' || status?.state === 'reconnecting'} onClick={() => { if (status?.consentVersion === PUBLIC_ACCESS_CONSENT_VERSION) void start(); else setConsent(true) }}>{t('publicAccess.enable')}</Button>
-        <Button variant="secondary" disabled={stopping || (busy && status?.state !== 'connecting' && status?.state !== 'reconnecting') || !status || status.state === 'unconfigured' || status.state === 'disabled'} onClick={() => void stop()}>{t('publicAccess.disable')}</Button>
-        {status?.hasCredential && <Button variant="danger" disabled={busy} onClick={() => void run(async () => { await bridge.deleteCredential(); setToken(''); setQr(null); setExpiresAt(null) })}>{t('publicAccess.deleteCredential')}</Button>}
-      </div>
-      <Checkbox label={t('publicAccess.autoStart')} checked={status?.autoStart ?? false} disabled={busy || !status?.hasCredential || status.consentVersion !== PUBLIC_ACCESS_CONSENT_VERSION} onChange={(event) => void run(() => bridge.setAutoStart(event.target.checked))} />
-      <p className="text-xs text-[var(--color-text-tertiary)]">{t('publicAccess.freeNotice')}</p>
-      {(error || status?.error) && <p id="public-access-error" role="alert" className="text-sm text-[var(--color-error)]">{status?.error ? errorLabels[status.error] : t('publicAccess.genericError')}</p>}
-      {status?.state === 'online' && status.publicUrl && <div className="space-y-3 border-t border-[var(--color-border)] pt-4">
-        <p className="break-all font-mono text-sm">{status.publicUrl}/remote</p>
-        <div className="flex flex-wrap gap-2"><Button variant="secondary" disabled={busy} onClick={() => void run(async () => { if (!await copyTextToClipboard(`${status.publicUrl}/remote`)) throw new Error('copy') })}>{t('publicAccess.copy')}</Button>
-          <Button disabled={busy} onClick={() => void run(async () => {
-            const pair = await publicAccessApi.pairing()
-            const url = new URL('/remote', status.publicUrl!)
-            url.hash = new URLSearchParams({ pair: pair.secret }).toString()
-            setQr(await QRCode.toDataURL(url.toString(), { margin: 1, width: 192 }))
-            setExpiresAt(pair.expiresAt)
-          })}>{t('publicAccess.pairPhone')}</Button></div>
-        {qr && <><img src={qr} width={192} height={192} alt={t('publicAccess.qrAlt')} /><p className="text-xs">{t('publicAccess.qrHint')}</p></>}
-      </div>}
-      {server?.pending.map((device) => <div key={device.id} className="flex flex-wrap items-center gap-2"><span className="min-w-0 break-all text-sm">{t('publicAccess.pending')}: {device.name}</span><Button disabled={busy} onClick={() => void run(() => publicAccessApi.approve(device.id))}>{t('publicAccess.approve')}</Button><Button variant="secondary" disabled={busy} onClick={() => void run(() => publicAccessApi.reject(device.id))}>{t('publicAccess.reject')}</Button></div>)}
-      {!!server?.devices.length && <h3 className="text-sm font-medium">{t('publicAccess.devices')}</h3>}
-      {server?.devices.map((device) => <div key={device.id} className="flex items-center justify-between gap-3"><span className="min-w-0 break-all text-sm">{device.name}</span><Button variant="danger" disabled={busy} onClick={() => void run(() => publicAccessApi.revoke(device.id))}>{t('publicAccess.revoke')}</Button></div>)}
-      <details className="text-xs text-[var(--color-text-secondary)]"><summary>{t('publicAccess.privacyTitle')}</summary><p className="mt-2 whitespace-pre-line leading-6">{t('publicAccess.privacy')}</p></details>
-    </Card>
+  const online = status?.state === 'online'
+  return <SettingsSection title={t('publicAccess.title')} description={t('publicAccess.intro')}>
+    <SettingsGroup>
+      <SettingsRow
+        title={t('publicAccess.token')}
+        description={(
+          <button
+            type="button"
+            className="font-medium text-[var(--color-text-accent)] hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)]"
+            onClick={() => void run(() => host.shell.open('https://dashboard.ngrok.com/get-started/your-authtoken'))}
+          >
+            {t('publicAccess.account')}
+          </button>
+        )}
+      >
+        <Input
+          aria-describedby="public-access-error"
+          type="password"
+          autoComplete="off"
+          spellCheck={false}
+          aria-label={t('publicAccess.token')}
+          size="md"
+          containerClassName="w-full sm:w-[240px]"
+          className="font-mono text-xs"
+          placeholder={status?.hasCredential ? t('publicAccess.tokenSaved') : t('publicAccess.token')}
+          value={token}
+          onChange={(event) => setToken(event.target.value)}
+        />
+      </SettingsRow>
+      <SettingsRow
+        title={(
+          <span className="inline-flex items-center gap-2">
+            <StatusDot tone={online ? 'success' : status?.state === 'failed' ? 'danger' : status?.state === 'connecting' || status?.state === 'reconnecting' ? 'info' : 'neutral'} />
+            <span role="status">{status ? stateLabels[status.state] : t('common.loading')}</span>
+          </span>
+        )}
+        description={t('publicAccess.freeNotice')}
+      >
+        <Button size="base" disabled={busy || (!token.trim() && !status?.hasCredential) || status?.state === 'online' || status?.state === 'connecting' || status?.state === 'reconnecting'} onClick={() => { if (status?.consentVersion === PUBLIC_ACCESS_CONSENT_VERSION) void start(); else setConsent(true) }}>{t('publicAccess.enable')}</Button>
+        <Button size="base" variant="secondary" disabled={stopping || (busy && status?.state !== 'connecting' && status?.state !== 'reconnecting') || !status || status.state === 'unconfigured' || status.state === 'disabled'} onClick={() => void stop()}>{t('publicAccess.disable')}</Button>
+        {status?.hasCredential && <Button size="base" variant="danger-ghost" disabled={busy} onClick={() => void run(async () => { await bridge.deleteCredential(); setToken(''); setQr(null); setExpiresAt(null) })}>{t('publicAccess.deleteCredential')}</Button>}
+      </SettingsRow>
+      <SettingsSwitchRow
+        title={t('publicAccess.autoStart')}
+        checked={status?.autoStart ?? false}
+        disabled={busy || !status?.hasCredential || status.consentVersion !== PUBLIC_ACCESS_CONSENT_VERSION}
+        onChange={(checked) => void run(() => bridge.setAutoStart(checked))}
+      />
+      {(error || status?.error) && (
+        <SettingsBlock>
+          <p id="public-access-error" role="alert" className="text-xs text-[var(--color-error)]">{status?.error ? errorLabels[status.error] : t('publicAccess.genericError')}</p>
+        </SettingsBlock>
+      )}
+      {online && status.publicUrl && (
+        <SettingsBlock className="space-y-3">
+          <p className="break-all rounded-[var(--radius-sm)] bg-[var(--color-surface-container)] px-2 py-1 font-mono text-xs text-[var(--color-text-primary)]">{status.publicUrl}/remote</p>
+          <div className="flex flex-wrap gap-2">
+            <Button size="base" variant="secondary" disabled={busy} onClick={() => void run(async () => { if (!await copyTextToClipboard(`${status.publicUrl}/remote`)) throw new Error('copy') })}>{t('publicAccess.copy')}</Button>
+            <Button size="base" disabled={busy} onClick={() => void run(async () => {
+              const pair = await publicAccessApi.pairing()
+              const url = new URL('/remote', status.publicUrl!)
+              url.hash = new URLSearchParams({ pair: pair.secret }).toString()
+              setQr(await QRCode.toDataURL(url.toString(), { margin: 1, width: 192 }))
+              setExpiresAt(pair.expiresAt)
+            })}>{t('publicAccess.pairPhone')}</Button>
+          </div>
+          {qr && (
+            <div className="flex flex-col items-start gap-2">
+              <img src={qr} width={192} height={192} alt={t('publicAccess.qrAlt')} className="rounded-[var(--radius-md)] border border-[var(--color-border)]" />
+              <p className="text-xs text-[var(--color-text-tertiary)]">{t('publicAccess.qrHint')}</p>
+            </div>
+          )}
+        </SettingsBlock>
+      )}
+      {server?.pending.map((device) => (
+        <SettingsRow key={device.id} title={`${t('publicAccess.pending')}: ${device.name}`} layout="inline">
+          <Button size="base" disabled={busy} onClick={() => void run(() => publicAccessApi.approve(device.id))}>{t('publicAccess.approve')}</Button>
+          <Button size="base" variant="secondary" disabled={busy} onClick={() => void run(() => publicAccessApi.reject(device.id))}>{t('publicAccess.reject')}</Button>
+        </SettingsRow>
+      ))}
+      {!!server?.devices.length && (
+        <SettingsBlock className="pb-0">
+          <h4 className="text-xs font-semibold text-[var(--color-text-tertiary)]">{t('publicAccess.devices')}</h4>
+        </SettingsBlock>
+      )}
+      {server?.devices.map((device) => (
+        <SettingsRow key={device.id} title={device.name} layout="inline">
+          <Button size="base" variant="danger-ghost" disabled={busy} onClick={() => void run(() => publicAccessApi.revoke(device.id))}>{t('publicAccess.revoke')}</Button>
+        </SettingsRow>
+      ))}
+      <SettingsBlock>
+        <details className="text-xs text-[var(--color-text-secondary)]">
+          <summary className="cursor-pointer">{t('publicAccess.privacyTitle')}</summary>
+          <p className="mt-2 whitespace-pre-line leading-6 text-[var(--color-text-tertiary)]">{t('publicAccess.privacy')}</p>
+        </details>
+      </SettingsBlock>
+    </SettingsGroup>
     <ConfirmDialog open={consent} onClose={() => { if (!busy) setConsent(false) }} onConfirm={start} title={t('publicAccess.privacyTitle')} body={<p className="whitespace-pre-line">{t('publicAccess.privacy')}</p>} confirmLabel={t('publicAccess.consent')} cancelLabel={t('common.cancel')} loading={busy} />
-  </section>
+  </SettingsSection>
 }
diff --git a/desktop/src/pages/settings/VoiceInputSettings.test.tsx b/desktop/src/pages/settings/VoiceInputSettings.test.tsx
index 527699a1..eef87a40 100644
--- a/desktop/src/pages/settings/VoiceInputSettings.test.tsx
+++ b/desktop/src/pages/settings/VoiceInputSettings.test.tsx
@@ -183,8 +183,8 @@ describe('VoiceInputSettings layout', () => {
   it('keeps three cards under short headings: recognition, microphone, test', async () => {
     await renderPage(makeCatalog(READY))
 
-    expect(screen.getAllByRole('heading', { level: 2 }).map(heading => heading.textContent)).toEqual([
-      'Voice Input',
+    expect(screen.getAllByRole('heading', { level: 2 }).map(heading => heading.textContent)).toEqual(['Voice Input'])
+    expect(screen.getAllByRole('heading', { level: 3 }).map(heading => heading.textContent)).toEqual([
       'Recognition engine',
       'Microphone',
       'Transcription test',
@@ -203,7 +203,7 @@ describe('VoiceInputSettings layout', () => {
     await renderPage(makeCatalog(READY))
     const rows = screen.getByTestId('voice-model-status').parentElement!
     expect(rows.className).toContain('divide-y')
-    expect(rows.className).toContain('--color-border-separator')
+    expect(rows.className).toContain('divide-[var(--color-border)]')
   })
 })
 
diff --git a/desktop/src/pages/settings/VoiceInputSettings.tsx b/desktop/src/pages/settings/VoiceInputSettings.tsx
index 62fa605c..0c5f0d1e 100644
--- a/desktop/src/pages/settings/VoiceInputSettings.tsx
+++ b/desktop/src/pages/settings/VoiceInputSettings.tsx
@@ -9,16 +9,22 @@ import type {
   VoicePreparationStep,
   VoiceProviderStatus,
 } from '@/api/voice'
+import { ChevronDown } from 'lucide-react'
 import { Badge, type Tone } from '@/components/ui/Badge'
 import { Button } from '@/components/ui/Button'
-import { Card } from '@/components/ui/Card'
 import { Dropdown } from '@/components/ui/Dropdown'
 import { ConfirmDialog } from '@/components/ui/ConfirmDialog'
 import { ErrorState } from '@/components/ui/ErrorState'
 import { LoadingState } from '@/components/ui/LoadingState'
 import { Progress } from '@/components/ui/Progress'
-import { Switch } from '@/components/ui/Switch'
-import { SettingsPageHeader, SettingsSection } from '@/components/settings/SettingsSection'
+import {
+  SettingsBlock,
+  SettingsGroup,
+  SettingsPageHeader,
+  SettingsRow,
+  SettingsSection,
+  SettingsSwitchRow,
+} from '@/components/settings/SettingsSection'
 import { useTranslation } from '@/i18n'
 import type { TranslationKey } from '@/i18n/locales/en'
 import { formatBytes } from '@/lib/formatBytes'
@@ -43,7 +49,8 @@ const PHASE_KEYS: Record<VoicePreparationPhase, TranslationKey> = {
 
 const PHASE_TONES: Record<VoicePreparationPhase, Tone> = {
   unprepared: 'neutral',
-  downloading: 'brand',
+  // In progress reads as info app-wide; terracotta is never a status.
+  downloading: 'info',
   verifying: 'info',
   ready: 'success',
   failed: 'danger',
@@ -118,14 +125,14 @@ export function VoiceInputSettings() {
 
   const header = (
     <SettingsPageHeader
-      title={t('voice.settings.title')}
+      title={t('settings.tab.voice')}
       description={t('voice.settings.description')}
     />
   )
 
   if (!catalog) {
     return (
-      <div className="max-w-2xl">
+      <div className="w-full min-w-0 [&>*+*]:mt-7">
         {header}
         {storeError ? (
           <ErrorState
@@ -144,7 +151,7 @@ export function VoiceInputSettings() {
 
   if (!catalog.supported) {
     return (
-      <div className="max-w-2xl">
+      <div className="w-full min-w-0 [&>*+*]:mt-7">
         {header}
         <ErrorState
           size="lg"
@@ -190,30 +197,34 @@ export function VoiceInputSettings() {
     }
   }
 
+  const enableNotice = preferences.enabled && !modelReady && phase !== 'downloading' && phase !== 'verifying'
+
   return (
-    <div className="max-w-2xl">
+    <div className="w-full min-w-0">
       {header}
 
       <SettingsSection title={t('voice.settings.engine.title')} description={t('voice.settings.engine.description')}>
-        <Card radius="xl" surface="low" padding="none" className={CARD_ROWS}>
-          <div className="space-y-2 px-4 py-3">
-            <Switch
-              checked={preferences.enabled}
-              onChange={(enabled) => { void savePreferences({ enabled }) }}
-              label={t('voice.settings.enable.label')}
-              description={t('voice.settings.enable.description')}
-            />
-            {preferences.enabled && !modelReady && phase !== 'downloading' && phase !== 'verifying' ? (
-              <p role="status" className="text-[13px] leading-5 text-[var(--color-warning)]">
-                {t('voice.settings.enable.needModel')}
-              </p>
-            ) : null}
-            {saveFailed ? (
-              <p role="alert" className="text-[13px] leading-5 text-[var(--color-error)]">
-                {t('voice.settings.saveFailed')}
-              </p>
-            ) : null}
-          </div>
+        <SettingsGroup>
+          <SettingsSwitchRow
+            title={t('voice.settings.enable.label')}
+            description={t('voice.settings.enable.description')}
+            checked={preferences.enabled}
+            onChange={(enabled) => { void savePreferences({ enabled }) }}
+            footer={enableNotice || saveFailed ? (
+              <div className="space-y-1 text-xs leading-[1.5]">
+                {enableNotice ? (
+                  <p role="status" className="text-[var(--color-warning)]">
+                    {t('voice.settings.enable.needModel')}
+                  </p>
+                ) : null}
+                {saveFailed ? (
+                  <p role="alert" className="text-[var(--color-error)]">
+                    {t('voice.settings.saveFailed')}
+                  </p>
+                ) : null}
+              </div>
+            ) : undefined}
+          />
 
           {provider ? (
             <>
@@ -244,7 +255,7 @@ export function VoiceInputSettings() {
                       })}{' '}
                       <button
                         type="button"
-                        className="font-medium text-[var(--color-brand)] hover:underline"
+                        className="font-medium text-[var(--color-text-accent)] hover:underline"
                         onClick={() => useUIStore.getState().setActiveSettingsTab('general')}
                       >
                         {t('voice.settings.downloadSource.changeProxy')}
@@ -262,9 +273,9 @@ export function VoiceInputSettings() {
                 </SettingRow>
               ) : null}
               {storeError ? (
-                <div className="px-4 py-3">
+                <SettingsBlock>
                   <ErrorState size="sm" title={t('voice.settings.actionFailed')} detail={storeError} />
-                </div>
+                </SettingsBlock>
               ) : null}
               <SettingRow label={t('voice.settings.language.label')}>
                 <Picker
@@ -276,11 +287,11 @@ export function VoiceInputSettings() {
               </SettingRow>
             </>
           ) : null}
-        </Card>
+        </SettingsGroup>
       </SettingsSection>
 
       <SettingsSection title={t('voice.settings.mic.title')} description={t('voice.settings.mic.description')}>
-        <Card radius="xl" surface="low" padding="none" className={CARD_ROWS}>
+        <SettingsGroup>
           {!captureSupported ? (
             <p className="px-4 py-3 text-[13px] leading-5 text-[var(--color-text-tertiary)]">{t('voice.settings.capture.unsupported')}</p>
           ) : (
@@ -307,7 +318,7 @@ export function VoiceInputSettings() {
               </SettingRow>
               {microphone.savedMissing || microphone.error || microphone.noInputDevices || microphone.needsPermission ? (
                 <div className="flex flex-col gap-2 px-4 py-3 sm:flex-row sm:items-center sm:justify-between sm:gap-6">
-                  <div className="min-w-0 space-y-1 text-[13px] leading-5">
+                  <div className="min-w-0 space-y-1 text-xs leading-[1.5]">
                     {microphone.savedMissing ? (
                       <p role="status" className="text-[var(--color-warning)]">{t('voice.settings.mic.missing')}</p>
                     ) : null}
@@ -336,20 +347,22 @@ export function VoiceInputSettings() {
               ) : null}
             </>
           )}
-        </Card>
+        </SettingsGroup>
       </SettingsSection>
 
       <SettingsSection title={t('voice.settings.test.title')} description={t('voice.settings.test.description')}>
-        <Card radius="xl" surface="low" padding="none" className="p-4">
-          <VoiceTranscriptionTest
-            deviceId={microphone.selectedId || undefined}
-            providerId={provider?.info.id ?? preferences.providerId}
-            language={preferences.language}
-            maxSeconds={Math.max(1, Math.min(TEST_MAX_SECONDS, limits.maxAudioSeconds))}
-            ready={modelReady}
-            captureSupported={captureSupported}
-          />
-        </Card>
+        <SettingsGroup>
+          <SettingsBlock className="p-4">
+            <VoiceTranscriptionTest
+              deviceId={microphone.selectedId || undefined}
+              providerId={provider?.info.id ?? preferences.providerId}
+              language={preferences.language}
+              maxSeconds={Math.max(1, Math.min(TEST_MAX_SECONDS, limits.maxAudioSeconds))}
+              ready={modelReady}
+              captureSupported={captureSupported}
+            />
+          </SettingsBlock>
+        </SettingsGroup>
       </SettingsSection>
 
       <ConfirmDialog
@@ -371,22 +384,16 @@ export function VoiceInputSettings() {
 
 type PickerItem<T extends string> = { value: T; label: string }
 
-const CARD_ROWS = 'divide-y divide-[var(--color-border-separator)]'
-
-/** One "name on the left, control on the right" line; stacks on narrow widths. */
+/**
+ * One "name on the left, picker on the right" row of the shared settings
+ * skeleton; the hint is a `<p>` so its inline "Change proxy" link reads as part
+ * of the sentence.
+ */
 function SettingRow({ label, hint, children }: { label: string; hint?: ReactNode; children: ReactNode }) {
-  const row = (
-    <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-6">
-      <span className="min-w-0 text-sm font-medium text-[var(--color-text-primary)]">{label}</span>
-      <div className="w-full sm:w-64 sm:shrink-0">{children}</div>
-    </div>
-  )
-  if (!hint) return <div className="px-4 py-3">{row}</div>
   return (
-    <div className="space-y-2 px-4 py-3">
-      {row}
-      <p className="text-xs leading-5 text-[var(--color-text-tertiary)]">{hint}</p>
-    </div>
+    <SettingsRow title={label} description={hint ? <p>{hint}</p> : undefined}>
+      <div className="w-full sm:w-[240px]">{children}</div>
+    </SettingsRow>
   )
 }
 
@@ -408,9 +415,9 @@ function Picker<T extends string>({ label, value, items, onChange }: {
       maxHeight={320}
       className="block w-full"
       trigger={
-        <Button variant="secondary" size="md" block className="h-10 gap-3" aria-label={label}>
+        <Button variant="secondary" size="base" block className="gap-2" aria-label={label}>
           <span className="min-w-0 flex-1 truncate text-left">{selected?.label ?? ''}</span>
-          <span className="material-symbols-outlined flex-shrink-0 text-[18px] text-[var(--color-text-secondary)]">expand_more</span>
+          <ChevronDown size={14} strokeWidth={1.75} aria-hidden="true" className="shrink-0 text-[var(--color-text-tertiary)]" />
         </Button>
       }
     />
@@ -458,11 +465,11 @@ function ModelStatus({ provider, pending, onDownload, onCancel, onRemove }: Mode
     <div
       data-testid="voice-model-status"
       data-phase={phase}
-      className="space-y-2 px-4 py-3"
+      className="min-h-[52px] space-y-2 px-4 py-3"
     >
       <div className="flex flex-wrap items-center justify-between gap-x-3 gap-y-2">
         <div className="flex min-w-0 items-center gap-2">
-          <span className="min-w-0 truncate text-sm font-medium text-[var(--color-text-primary)]">{info.name}</span>
+          <span className="min-w-0 truncate text-[13px] font-medium text-[var(--color-text-primary)]">{info.name}</span>
           <Badge tone={PHASE_TONES[phase]} size="sm">{t(PHASE_KEYS[phase])}</Badge>
         </div>
         <div className="flex items-center gap-2">
diff --git a/desktop/src/pages/settings/VoiceTranscriptionTest.tsx b/desktop/src/pages/settings/VoiceTranscriptionTest.tsx
index 2b8f838c..700bc9e0 100644
--- a/desktop/src/pages/settings/VoiceTranscriptionTest.tsx
+++ b/desktop/src/pages/settings/VoiceTranscriptionTest.tsx
@@ -3,7 +3,6 @@ import { Mic, Square } from 'lucide-react'
 import { ApiError } from '@/api/client'
 import { voiceApi, type VoiceLanguage, type VoiceTranscript } from '@/api/voice'
 import { Button } from '@/components/ui/Button'
-import { Card } from '@/components/ui/Card'
 import { useTranslation } from '@/i18n'
 import type { TranslationKey } from '@/i18n/locales/en'
 import { VoiceWave } from '@/features/voiceInput/VoiceWave'
@@ -180,14 +179,14 @@ export function VoiceTranscriptionTest({ deviceId, providerId, language, maxSeco
 
       <div className="flex flex-wrap items-center gap-3">
         {phase === 'recording' ? (
-          <Button variant="danger" size="base" icon={<Square size={14} aria-hidden="true" />} onClick={() => void finish()}>
+          <Button variant="danger" size="base" icon={<Square size={14} strokeWidth={1.75} aria-hidden="true" />} onClick={() => void finish()}>
             {t('voice.settings.test.stop')}
           </Button>
         ) : (
           <Button
             variant="secondary"
             size="base"
-            icon={<Mic size={14} aria-hidden="true" />}
+            icon={<Mic size={14} strokeWidth={1.75} aria-hidden="true" />}
             loading={busy}
             disabled={!canStart || busy}
             onClick={() => void start()}
@@ -205,7 +204,7 @@ export function VoiceTranscriptionTest({ deviceId, providerId, language, maxSeco
             <div role="img" aria-label={t('voice.settings.test.level')} className="min-w-0 flex-1">
               <VoiceWave getLevel={readLevel} active />
             </div>
-            <span className="shrink-0 text-xs tabular-nums text-[var(--color-text-secondary)]">
+            <span className="shrink-0 font-mono text-[11px] tabular-nums text-[var(--color-text-secondary)]">
               <span ref={clockRef} data-testid="voice-clock">0:00</span>
               {` / ${formatClock(maxSeconds)}`}
             </span>
@@ -218,14 +217,14 @@ export function VoiceTranscriptionTest({ deviceId, providerId, language, maxSeco
       ) : null}
 
       {transcript ? (
-        <Card radius="lg" surface="base" padding="md" className="space-y-2" aria-label={t('voice.settings.test.result')}>
-          <p className="text-xs font-medium text-[var(--color-text-secondary)]">{t('voice.settings.test.result')}</p>
+        <div role="group" className="space-y-2 rounded-[var(--radius-md)] bg-[var(--color-surface-container)] px-4 py-3" aria-label={t('voice.settings.test.result')}>
+          <p className="text-xs font-medium text-[var(--color-text-tertiary)]">{t('voice.settings.test.result')}</p>
           {transcript.text.trim() ? (
-            <p data-testid="voice-transcript" className="whitespace-pre-wrap break-words text-sm leading-6 text-[var(--color-text-primary)]">
+            <p data-testid="voice-transcript" className="whitespace-pre-wrap break-words text-[13px] leading-6 text-[var(--color-text-primary)]">
               {transcript.text}
             </p>
           ) : (
-            <p className="text-sm text-[var(--color-text-tertiary)]">{t('voice.composer.error.noSpeech')}</p>
+            <p className="text-[13px] text-[var(--color-text-tertiary)]">{t('voice.composer.error.noSpeech')}</p>
           )}
           <p className="text-xs text-[var(--color-text-tertiary)]">
             {t('voice.settings.test.stats', {
@@ -233,7 +232,7 @@ export function VoiceTranscriptionTest({ deviceId, providerId, language, maxSeco
               inference: transcript.inferenceSeconds.toFixed(2),
             })}
           </p>
-        </Card>
+        </div>
       ) : null}
 
       {playbackUrl ? (
diff --git a/desktop/src/pages/settings/shared.tsx b/desktop/src/pages/settings/shared.tsx
index 8666dc39..ae2c3876 100644
--- a/desktop/src/pages/settings/shared.tsx
+++ b/desktop/src/pages/settings/shared.tsx
@@ -1,33 +1,14 @@
 
 /**
- * The few things every Settings panel needs.
+ * The few things more than one Settings panel needs.
  *
- * Extracted while splitting `Settings.tsx` into one module per panel. These three are
- * the only declarations more than one panel reaches for, so they get their own module
- * rather than staying behind — leaving them in Settings.tsx would make every panel
- * import from the file that imports it, and the resulting cycle is exactly the kind of
- * fragility a split is supposed to remove.
+ * Extracted while splitting `Settings.tsx` into one module per panel, so a
+ * panel never imports from the file that imports it. The hand-rolled checkbox
+ * mark that used to live here is gone: settings toggles are `Switch` rows of
+ * the shared skeleton (`components/settings/SettingsSection`), and dialog
+ * checkboxes use `ui/Checkbox`.
  */
 
-export const SETTINGS_CHECKBOX_INPUT_CLASS = 'settings-checkbox-input peer'
-
-export function SettingsCheckboxMark({ checked, disabled = false }: { checked: boolean; disabled?: boolean }) {
-  return (
-    <span
-      aria-hidden="true"
-      className={`mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-[var(--radius-md)] border transition-all peer-focus-visible:ring-2 peer-focus-visible:ring-[var(--color-border-focus)] ${
-        checked
-          ? 'border-[var(--color-brand)] bg-[var(--color-brand)] text-[var(--color-on-primary)] shadow-[var(--shadow-button-primary)]'
-          : 'border-[var(--color-border-focus)] bg-[var(--color-surface)] text-transparent'
-      } ${disabled ? 'opacity-50' : ''}`}
-    >
-      <span className="material-symbols-outlined text-[16px] leading-none" style={{ fontVariationSettings: "'FILL' 1" }}>
-        check
-      </span>
-    </span>
-  )
-}
-
 export function isValidHttpProxyUrl(value: string) {
   try {
     const url = new URL(value)
diff --git a/desktop/src/theme/designSystem.test.ts b/desktop/src/theme/designSystem.test.ts
new file mode 100644
index 00000000..8b257420
--- /dev/null
+++ b/desktop/src/theme/designSystem.test.ts
@@ -0,0 +1,113 @@
+import { readdirSync, readFileSync, statSync } from 'node:fs'
+import { join, relative } from 'node:path'
+
+import { describe, expect, it } from 'vitest'
+
+/**
+ * The 「素 Porcelain」 system, enforced.
+ *
+ * The UI felt subtly off because nothing constrained it: 36 font sizes
+ * including 12.5 / 13.5 / 11.5px, 41 corner radii, two icon sets with 20 icon
+ * sizes, monospace "bold" that the browser had to fake from a 400-only font,
+ * and Chinese set in italics (CJK has no italic; the browser just slants it).
+ * Each rule below names one of those causes. A violation lists file:line so the
+ * fix is a lookup, not a hunt.
+ */
+
+const SRC_ROOT = join(process.cwd(), 'src')
+
+/**
+ * `preview-agent` is a script injected into third-party pages with its own
+ * shadow-DOM stylesheet; it never sees this design system. `test/` holds
+ * fixtures that generate document content (an italic run inside a .docx),
+ * not interface.
+ */
+const SKIP_DIRS = new Set(['node_modules', 'dist', 'preview-agent', '__tests__', 'test'])
+
+function collect(dir: string, out: string[] = []): string[] {
+  for (const entry of readdirSync(dir)) {
+    if (SKIP_DIRS.has(entry) || entry.startsWith('.')) continue
+    const path = join(dir, entry)
+    if (statSync(path).isDirectory()) collect(path, out)
+    else if (/\.tsx?$/.test(entry) && !/\.test\.tsx?$/.test(entry) && !entry.endsWith('.d.ts')) out.push(path)
+  }
+  return out
+}
+
+const files = collect(SRC_ROOT).map((path) => ({
+  path: relative(SRC_ROOT, path),
+  lines: readFileSync(path, 'utf8').split('\n'),
+}))
+
+/** Lines that are only a comment are prose about the rule, not a use of it. */
+function isComment(line: string) {
+  const t = line.trim()
+  return t.startsWith('//') || t.startsWith('*') || t.startsWith('/*')
+}
+
+function violations(pattern: RegExp, accept?: (match: RegExpMatchArray, line: string) => boolean) {
+  const out: string[] = []
+  for (const file of files) {
+    file.lines.forEach((line, index) => {
+      if (isComment(line)) return
+      for (const match of line.matchAll(pattern)) {
+        if (accept && accept(match, line)) continue
+        out.push(`${file.path}:${index + 1}  ${match[0]}`)
+      }
+    })
+  }
+  return out
+}
+
+/** 11 / 12 / 13 / 14 / 15 / 18 / 22 / 26 — the whole type scale. */
+const TYPE_SCALE = new Set([11, 12, 13, 14, 15, 18, 22, 26])
+
+describe('「素」 design system', () => {
+  it('uses only the type scale for arbitrary font sizes', () => {
+    expect(violations(/\btext-\[(\d+(?:\.\d+)?)px\]/g, (m) => TYPE_SCALE.has(Number(m[1])))).toEqual([])
+  })
+
+  it('uses only the type scale for inline font sizes', () => {
+    expect(violations(/fontSize:\s*['"]?(\d+(?:\.\d+)?)(?:px)?['"]?/g, (m) => TYPE_SCALE.has(Number(m[1])))).toEqual([])
+  })
+
+  it('does not use Tailwind sizes that fall off the scale (base 16, xl 20, 2xl 24, …)', () => {
+    expect(violations(/\btext-(?:base|xl|[2-9]xl)\b/g)).toEqual([])
+  })
+
+  it('tops out at semibold, the heaviest Inter weight shipped', () => {
+    expect(violations(/\bfont-(?:bold|extrabold|black)\b/g)).toEqual([])
+  })
+
+  it('never asks the 400-only monospace face for a synthesized bold', () => {
+    expect(violations(/[^"'`]*\bfont-mono\b[^"'`]*/g, (m) => !/\bfont-semibold\b/.test(m[0]))).toEqual([])
+  })
+
+  it('does not slant text: CJK has no italic, the browser only skews it', () => {
+    expect(violations(/(?<![\w-])italic\b(?!\w)/g, (_m, line) => !/className|cx\(|['"`]/.test(line))).toEqual([])
+  })
+
+  it('draws every icon from lucide, not Material Symbols', () => {
+    expect(violations(/material-symbols/g)).toEqual([])
+  })
+
+  it('names things by what they are, not with the generic "AI" sparkle glyph', () => {
+    // The sparkle said "AI" on the thinking line, skills, memory and new-feature
+    // prompts alike, so it said nothing about any of them. Skills use the box
+    // the @ and / menus use for SKILL.md; a working turn uses the running ring.
+    // BrandSeal draws its own sparkles as part of the logo, not this icon.
+    const sparkleImports = files
+      .filter((file) => /import\s*\{[^}]*\b(?:WandSparkles|Sparkles?)\b[^}]*\}\s*from\s*'lucide-react'/.test(file.lines.join('\n')))
+      .map((file) => file.path)
+    expect(sparkleImports).toEqual([])
+  })
+
+  it('takes corners from the radius tokens, never Tailwind names or raw pixels', () => {
+    expect(violations(/\brounded(?:-[tblrse]{1,2})?-(?:sm|md|lg|xl|2xl|3xl)\b/g)).toEqual([])
+    expect(violations(/\brounded(?:-[tblrse]{1,2})?-\[\d+(?:\.\d+)?px\]/g)).toEqual([])
+  })
+
+  it('keeps small labels in sentence case without wide tracking (it does nothing for Chinese)', () => {
+    expect(violations(/\btracking-(?:wide|wider|widest)\b|\btracking-\[0?\.(?:0[5-9]|[1-9]\d?)em\]/g)).toEqual([])
+  })
+})
diff --git a/desktop/src/theme/globals.css b/desktop/src/theme/globals.css
index b944e2a6..4135a51a 100644
--- a/desktop/src/theme/globals.css
+++ b/desktop/src/theme/globals.css
@@ -94,26 +94,17 @@
   unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 
-/* Material Symbols Outlined – variable weight, use block to avoid showing raw text */
-@font-face {
-  font-family: 'Material Symbols Outlined';
-  font-style: normal;
-  font-weight: 100 700;
-  font-display: block;
-  src: url('../../public/fonts/material-symbols-outlined.woff2') format('woff2');
-}
-
 .code-viewer-area .line,
 .code-viewer-area .token-line {
   display: block;
 }
 
-.code-viewer-area .line {
-  padding: 0 12px;
-}
-
-.code-viewer-area .has-line-numbers .line {
-  padding-left: 12px;
+/* The gutter lives on the line, not the scroller, so the hover band runs edge
+   to edge. Prism (`token-line`) and Shiki (`line`) share it: they used to sit
+   12px and 24px in from the edge depending on which highlighter had loaded. */
+.code-viewer-area .line,
+.code-viewer-area .token-line {
+  padding: 0 14px;
 }
 
 .code-viewer-area .line:hover,
@@ -138,6 +129,13 @@
 .code-viewer-area [data-highlight-engine="shiki"] code {
   display: flex;
   flex-direction: column;
+  /* Inside Markdown prose this <code> also matches the inline-code chip
+     styles (fill, padding, radius). A block is not a chip. */
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  font-weight: 400;
 }
 
 .code-viewer-area [data-highlight-engine="shiki"] .line:empty::before {
@@ -223,54 +221,44 @@
   white-space: nowrap;
 }
 
-.settings-checkbox-input {
-  position: absolute;
-  inset: 0;
-  z-index: 1;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  cursor: pointer;
-  opacity: 0;
-}
-
-.settings-checkbox-input:disabled {
-  cursor: not-allowed;
-}
-
+/* The kbd chip of the 「素」 spec: mono 11px, 18px tall, xs radius, hairline
+   border on white, tertiary text. */
 .settings-zoom-kbd {
   min-width: 18px;
   height: 18px;
-  padding: 0 5px;
+  padding: 0 4px;
   border: 1px solid var(--color-border);
-  border-radius: 5px;
+  border-radius: var(--radius-xs);
   background: var(--color-surface-container-lowest);
-  color: var(--color-text-secondary);
-  font-family: var(--font-label);
-  font-size: 10px;
-  font-weight: 600;
+  color: var(--color-text-tertiary);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 400;
   line-height: 16px;
   text-align: center;
-  box-shadow: inset 0 -1px 0 rgba(var(--cc-t1-rgb), 0.08);
 }
 
+/* The zoom slider: a 4px track filled with the brand up to the thumb, a 14px
+   white thumb, and a value bubble that floats above it only while dragging
+   (it overlaps the row above rather than reserving empty space). */
 .settings-zoom-control {
   --settings-zoom-range-progress: 33.333%;
   --settings-zoom-preview-scale: 0.88;
   --settings-zoom-preview-opacity: 0;
   --settings-zoom-track-empty: var(--color-surface-container-high);
   --settings-zoom-thumb-bg: var(--color-surface-container-lowest);
-  --settings-zoom-thumb-border: var(--color-border);
-  --settings-zoom-thumb-shadow: 0 2px 8px rgba(var(--cc-t1-rgb), 0.16);
-  padding-top: 22px;
+  --settings-zoom-thumb-border: var(--color-outline);
+  --settings-zoom-thumb-shadow: var(--shadow-raised);
 }
 
+/* On the two ink grounds a light thumb on a light track disappears; the brand
+   rim keeps it legible. */
 [data-theme="dark"] .settings-zoom-control,
 [data-theme="ink-blue"] .settings-zoom-control {
   --settings-zoom-track-empty: var(--color-surface-container-highest);
   --settings-zoom-thumb-bg: var(--color-surface-bright);
   --settings-zoom-thumb-border: var(--color-brand);
-  --settings-zoom-thumb-shadow: 0 0 0 3px rgba(var(--cc-ac-rgb), 0.2), 0 10px 24px rgba(0, 0, 0, 0.5);
+  --settings-zoom-thumb-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
 }
 
 .settings-zoom-control.is-dragging {
@@ -284,25 +272,25 @@
 
 .settings-zoom-preview {
   position: absolute;
-  left: clamp(24px, var(--settings-zoom-range-progress), calc(100% - 24px));
+  left: clamp(22px, var(--settings-zoom-range-progress), calc(100% - 22px));
   top: -30px;
   z-index: 1;
-  min-width: 52px;
+  min-width: 44px;
   transform: translateX(-50%) scale(var(--settings-zoom-preview-scale));
   transform-origin: 50% 100%;
-  border: 1px solid var(--color-surface-glass-border);
+  border: 1px solid var(--color-border);
   border-radius: 999px;
-  background: var(--color-surface-glass);
-  padding: 4px 9px;
+  background: var(--color-surface-container-lowest);
+  padding: 2px 8px;
   color: var(--color-text-primary);
-  font-size: 12px;
-  font-weight: 700;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
   line-height: 16px;
   text-align: center;
   opacity: var(--settings-zoom-preview-opacity);
   box-shadow: var(--shadow-dropdown);
-  backdrop-filter: blur(14px) saturate(1.15);
-  -webkit-backdrop-filter: blur(14px) saturate(1.15);
   pointer-events: none;
   transition:
     left 260ms cubic-bezier(0.22, 1, 0.36, 1),
@@ -310,23 +298,10 @@
     transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
 }
 
-.settings-zoom-preview::after {
-  content: "";
-  position: absolute;
-  left: 50%;
-  bottom: -4px;
-  width: 8px;
-  height: 8px;
-  transform: translateX(-50%) rotate(45deg);
-  border-right: 1px solid var(--color-surface-glass-border);
-  border-bottom: 1px solid var(--color-surface-glass-border);
-  background: var(--color-surface-glass);
-}
-
 .settings-zoom-range {
   appearance: none;
   display: block;
-  height: 20px;
+  height: 18px;
   cursor: pointer;
   background: transparent;
   accent-color: var(--color-brand);
@@ -342,9 +317,8 @@
 }
 
 .settings-zoom-range::-webkit-slider-runnable-track {
-  height: 6px;
+  height: 4px;
   border-radius: 999px;
-  border: 1px solid var(--color-border);
   background:
     linear-gradient(
       90deg,
@@ -353,14 +327,14 @@
       var(--settings-zoom-track-empty) var(--settings-zoom-range-progress),
       var(--settings-zoom-track-empty) 100%
     );
-  transition: background 220ms ease, border-color 180ms ease;
+  transition: background 220ms ease;
 }
 
 .settings-zoom-range::-webkit-slider-thumb {
   appearance: none;
-  width: 18px;
-  height: 18px;
-  margin-top: -7px;
+  width: 14px;
+  height: 14px;
+  margin-top: -5px;
   border-radius: 999px;
   border: 1px solid var(--settings-zoom-thumb-border);
   background: var(--settings-zoom-thumb-bg);
@@ -369,37 +343,35 @@
 }
 
 .settings-zoom-range:hover::-webkit-slider-thumb {
-  border-color: var(--color-border-focus);
+  border-color: var(--color-border-strong);
 }
 
 .settings-zoom-control.is-dragging .settings-zoom-range::-webkit-slider-thumb {
-  transform: scale(1.18);
+  transform: scale(1.15);
   border-color: var(--color-brand);
-  box-shadow: var(--shadow-dropdown);
 }
 
 .settings-zoom-range:focus-visible::-webkit-slider-thumb {
   border-color: var(--color-brand);
-  box-shadow: var(--shadow-focus-ring), 0 2px 8px rgba(var(--cc-t1-rgb), 0.16);
+  box-shadow: var(--shadow-focus-ring);
 }
 
 .settings-zoom-range::-moz-range-track {
-  height: 6px;
+  height: 4px;
   border-radius: 999px;
-  border: 1px solid var(--color-border);
   background: var(--settings-zoom-track-empty);
-  transition: background 220ms ease, border-color 180ms ease;
+  transition: background 220ms ease;
 }
 
 .settings-zoom-range::-moz-range-progress {
-  height: 6px;
+  height: 4px;
   border-radius: 999px;
   background: var(--color-brand);
 }
 
 .settings-zoom-range::-moz-range-thumb {
-  width: 18px;
-  height: 18px;
+  width: 14px;
+  height: 14px;
   border-radius: 999px;
   border: 1px solid var(--settings-zoom-thumb-border);
   background: var(--settings-zoom-thumb-bg);
@@ -408,23 +380,24 @@
 }
 
 .settings-zoom-control.is-dragging .settings-zoom-range::-moz-range-thumb {
-  transform: scale(1.18);
+  transform: scale(1.15);
   border-color: var(--color-brand);
-  box-shadow: var(--shadow-dropdown);
 }
 
 .settings-zoom-range:focus-visible::-moz-range-thumb {
   border-color: var(--color-brand);
-  box-shadow: var(--shadow-focus-ring), 0 2px 8px rgba(var(--cc-t1-rgb), 0.16);
+  box-shadow: var(--shadow-focus-ring);
 }
 
+/* Same selectors as the rules above and later in the sheet, so these win on
+   order alone. */
 @media (prefers-reduced-motion: reduce) {
   .settings-zoom-preview,
   .settings-zoom-range::-webkit-slider-runnable-track,
   .settings-zoom-range::-webkit-slider-thumb,
   .settings-zoom-range::-moz-range-track,
   .settings-zoom-range::-moz-range-thumb {
-    transition-duration: 0.01ms !important;
+    transition: none;
   }
 }
 
@@ -682,71 +655,75 @@
    the `:root` semantic layer below re-points every one of them at a
    `--cc-*` source variable, which is what actually varies per theme. */
 @theme {
-  --color-primary: #96442B;
-  --color-primary-container: #7C3620;
-  --color-primary-fixed: #F6ECE5;
-  --color-primary-fixed-dim: #E6CDBF;
+  --color-primary: #A24A2E;
+  --color-primary-container: #8C3F26;
+  --color-primary-fixed: #F6ECE7;
+  --color-primary-fixed-dim: #E8CFC3;
 
-  --color-on-primary: #FBF6EC;
-  --color-on-primary-container: #FBF6EC;
-  --color-on-surface: #1F1C17;
-  --color-on-surface-variant: #5D5850;
+  --color-on-primary: #FFFFFF;
+  --color-on-primary-container: #FFFFFF;
+  --color-on-surface: #1F1E1C;
+  --color-on-surface-variant: #55524D;
 
   --color-surface: #FFFFFF;
   --color-surface-bright: #FFFFFF;
-  --color-surface-dim: #F0EFE9;
-  --color-surface-container: #FAFAF8;
-  --color-surface-container-low: #F6F6F3;
-  --color-surface-container-high: #F0EFE9;
-  --color-surface-container-highest: #EBE9E2;
+  --color-surface-dim: #F1F0EE;
+  --color-surface-container: #F5F5F3;
+  --color-surface-container-low: #F7F7F6;
+  --color-surface-container-high: #F1F0EE;
+  --color-surface-container-highest: #E9E8E5;
   --color-surface-container-lowest: #FFFFFF;
-  --color-surface-variant: #F6F6F3;
+  --color-surface-variant: #F7F7F6;
 
   --color-background: #FFFFFF;
 
-  --color-outline: #D8D5CC;
-  --color-outline-variant: #EBE9E2;
+  --color-outline: #D9D7D3;
+  --color-outline-variant: #E9E8E5;
 
-  --color-secondary: #96442B;
-  --color-secondary-container: #F5ECEA;
+  --color-secondary: #2C66C9;
+  --color-secondary-container: #E9F0FB;
   --color-tertiary: #3B7068;
   --color-tertiary-container: #F1F5F4;
 
-  --color-error: #C74436;
-  --color-on-error: #FBF6EC;
-  --color-error-container: #FAECE8;
-  --color-on-error-container: #BD4133;
+  --color-error: #C42B3C;
+  --color-on-error: #FFFFFF;
+  --color-error-container: #FBE9EC;
+  --color-on-error-container: #B12636;
 
-  --color-inverse-surface: #1F1C17;
+  --color-inverse-surface: #1F1E1C;
   --color-inverse-on-surface: #FFFFFF;
-  --color-inverse-primary: #E6CDBF;
+  --color-inverse-primary: #E8CFC3;
 
-  --color-success: #3E8153;
-  --color-success-container: #E8F2E9;
-  --color-on-success-container: #3A784D;
-  --color-info: #96442B;
-  --color-info-container: #F5ECEA;
-  --color-on-info-container: #96442B;
-  --color-warning: #A8751F;
-  --color-warning-container: #F8F0DC;
-  --color-on-warning-container: #90641B;
+  --color-success: #2E7D4F;
+  --color-success-container: #E7F3EB;
+  --color-on-success-container: #2A7148;
+  --color-info: #2C66C9;
+  --color-info-container: #E9F0FB;
+  --color-on-info-container: #2459B3;
+  --color-warning: #A5650F;
+  --color-warning-container: #FBF0DC;
+  --color-on-warning-container: #8A540C;
 
   /* Software chrome shares one sans-serif family. Keep the editorial serif
      explicit for content that requests it, instead of inheriting it in tools. */
-  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+  /* Latin runs in the self-hosted Inter (400–600); CJK falls through to the
+     platform face. Weights above 600 are not shipped, so the UI tops out at
+     semibold instead of letting the browser synthesize a smeared bold. */
+  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
   --font-headline: var(--font-body);
   --font-serif: 'Noto Serif SC', 'Songti SC', Georgia, serif;
   --font-label: var(--font-body);
-  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
+  --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
 
-  /* Corner scale, from the handoff: 6–7 badges / 9–11 controls /
-     12–14 inner cards / 16–18 cards / 20 composer / 24 modals / 99 pills. */
+  /* Corner scale (「素」): 4 chips / 6 rows and small controls / 8 controls and
+     inner blocks / 12 cards / 16 composer and large panels / 20 dialogs. */
+  --radius-xs: 4px;
   --radius-sm: 6px;
-  --radius-md: 10px;
-  --radius-lg: 13px;
-  --radius-xl: 17px;
-  --radius-2xl: 20px;
-  --radius-3xl: 24px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --radius-2xl: 16px;
+  --radius-3xl: 20px;
   --radius-full: 9999px;
 }
 
@@ -762,57 +739,63 @@
 [data-theme="white"] {
   color-scheme: light;
 
+  /* 「素 Porcelain」(2026-10 visual direction). One warm-neutral ramp that
+     climbs in a single direction — page → sidebar (s0) → card lining (s2) →
+     hover/selected (s1) — and every shadow below uses the same warm hue, so
+     the surfaces no longer mix cool greys with brown shadows. Terracotta is
+     kept for the brand, the send key and selection only; info is a separate
+     blue and error a crimson, so status never reads as brand. */
   --cc-bg: #FFFFFF;
-  --cc-s0: #F7F7F7;
-  --cc-s1: #F0F0F0;
-  --cc-s2: #FAFAFA;
-  --cc-bd: #EBEBEB;
-  --cc-bd2: #D6D6D6;
+  --cc-s0: #F7F7F6;
+  --cc-s1: #F1F0EE;
+  --cc-s2: #F5F5F3;
+  --cc-bd: #E9E8E5;
+  --cc-bd2: #D9D7D3;
   /* Control boundary — clears WCAG 1.4.11's 3:1 on the card lining. */
-  --cc-bd-strong: #8C8C8C;
+  --cc-bd-strong: #8C8984;
   /* Tab strip. Trough stays --cc-s0, so these two carry the shape. */
-  --cc-tab-edge: #DADADA;
-  --cc-tab-sep: #E3E3E3;
-  --cc-t1: #242424;
-  --cc-t2: #575757;
-  --cc-t3: #6E6E6E;
+  --cc-tab-edge: #D7D5D1;
+  --cc-tab-sep: #E6E4E1;
+  --cc-t1: #1F1E1C;
+  --cc-t2: #55524D;
+  --cc-t3: #6F6B65;
 
-  --cc-ac: #96442B;
-  --cc-ac2: #7C3620;
-  --cc-ac-soft: #F6ECE5;
-  --cc-ac-soft-hover: #EFDED4;
-  --cc-ac-border: #E6CDBF;
-  --cc-ac-ink: #96442B;
-  --cc-on-ac: #FBF6EC;
+  --cc-ac: #A24A2E;
+  --cc-ac2: #8C3F26;
+  --cc-ac-soft: #F6ECE7;
+  --cc-ac-soft-hover: #F0DFD6;
+  --cc-ac-border: #E8CFC3;
+  --cc-ac-ink: #93432A;
+  --cc-on-ac: #FFFFFF;
 
-  --cc-ok: #3E8153;
-  --cc-ok-soft: #E8F2E9;
-  --cc-ok-ink: #3A784D;
-  --cc-wn: #A8751F;
-  --cc-wn-soft: #F8F0DC;
-  --cc-wn-ink: #90641B;
-  --cc-er: #C74436;
-  --cc-er-soft: #FAECE8;
-  --cc-er-soft-hover: #F5DBD6;
-  --cc-er-ink: #BD4133;
-  --cc-info: #96442B;
-  --cc-info-soft: #F5ECEA;
-  --cc-info-ink: #96442B;
+  --cc-ok: #2E7D4F;
+  --cc-ok-soft: #E7F3EB;
+  --cc-ok-ink: #2A7148;
+  --cc-wn: #A5650F;
+  --cc-wn-soft: #FBF0DC;
+  --cc-wn-ink: #8A540C;
+  --cc-er: #C42B3C;
+  --cc-er-soft: #FBE9EC;
+  --cc-er-soft-hover: #F6D6DB;
+  --cc-er-ink: #B12636;
+  --cc-info: #2C66C9;
+  --cc-info-soft: #E9F0FB;
+  --cc-info-ink: #2459B3;
 
   --cc-teal: #3B7068;
   --cc-teal-soft: #F1F5F4;
   --cc-teal-border: #C0D1CF;
   --cc-teal-icon: #EBF1F0;
 
-  --cc-diff-add: #E8F3E9;
-  --cc-diff-add-gutter: #D9EBDC;
-  --cc-diff-add-word: #DEEDE0;
-  --cc-diff-del: #FAEEED;
-  --cc-diff-del-gutter: #F6E1DF;
-  --cc-diff-del-word: #F0CECB;
-  --cc-diff-mark: #F4EDE2;
-  --cc-diff-mark-gutter: #ECE1CE;
-  --cc-code: #F8F8F8;
+  --cc-diff-add: #EAF5ED;
+  --cc-diff-add-gutter: #DCEEE2;
+  --cc-diff-add-word: #CFE8D6;
+  --cc-diff-del: #FCEFEE;
+  --cc-diff-del-gutter: #F8E1DE;
+  --cc-diff-del-word: #F2CDC8;
+  --cc-diff-mark: #F7F0E4;
+  --cc-diff-mark-gutter: #EFE3CF;
+  --cc-code: #F7F6F4;
 
   --cc-heat-0: #F0EFE9;
   --cc-heat-1: #E8D6D0;
@@ -820,18 +803,18 @@
   --cc-heat-3: #B8806F;
   --cc-heat-4: #9C4F38;
 
-  --cc-shadow-card: 0 1px 3px rgba(30, 28, 22, 0.04), 0 6px 24px rgba(30, 28, 22, 0.06);
-  --cc-shadow-composer: 0 1px 2px rgba(24, 24, 24, 0.04), 0 4px 16px rgba(24, 24, 24, 0.04);
-  --cc-shadow-overlay: 0 8px 24px rgba(30, 28, 22, 0.10), 0 24px 64px rgba(30, 28, 22, 0.15);
+  --cc-shadow-card: 0 1px 2px rgba(28, 25, 23, 0.05), 0 6px 20px rgba(28, 25, 23, 0.06);
+  --cc-shadow-composer: 0 1px 2px rgba(28, 25, 23, 0.04), 0 8px 28px rgba(28, 25, 23, 0.07);
+  --cc-shadow-overlay: 0 2px 6px rgba(28, 25, 23, 0.05), 0 16px 40px rgba(28, 25, 23, 0.12);
 
   --cc-bg-rgb: 255, 255, 255;
-  --cc-s1-rgb: 240, 240, 240;
-  --cc-t1-rgb: 36, 36, 36;
-  --cc-t2-rgb: 87, 87, 87;
-  --cc-bd2-rgb: 214, 214, 214;
-  --cc-ac-rgb: 150, 68, 43;
-  --cc-er-rgb: 199, 68, 54;
-  --cc-scrim-rgb: 19, 17, 14;
+  --cc-s1-rgb: 241, 240, 238;
+  --cc-t1-rgb: 31, 30, 28;
+  --cc-t2-rgb: 85, 82, 77;
+  --cc-bd2-rgb: 217, 215, 211;
+  --cc-ac-rgb: 162, 74, 46;
+  --cc-er-rgb: 196, 43, 60;
+  --cc-scrim-rgb: 24, 22, 20;
 }
 
 /* 纸墨 paper */
@@ -1261,7 +1244,9 @@
      delineate an interactive control. */
   --color-border-strong: var(--cc-bd-strong);
   --color-border-separator: var(--cc-bd);
-  --color-border-focus: var(--cc-ac);
+  /* Neutral on purpose: a terracotta ring sat one hue step from the error red
+     and read as "this field is invalid". */
+  --color-border-focus: var(--cc-t3);
   /* Tab strip outlines. The strip's trough deliberately stays the sidebar's
      own ground, so the selected tab's fill is only 1.05–1.10:1 against it in
      all six themes — far too little for a rounded corner to be *visible*, and
@@ -1356,11 +1341,13 @@
   --color-switch-thumb: var(--cc-bg);
   --color-btn-primary-bg: var(--cc-t1);
   --color-btn-primary-fg: var(--cc-bg);
+  /* Primary stays ink on hover (a lighter ink), it no longer flips to brand. */
+  --color-btn-primary-hover: rgba(var(--cc-t1-rgb), 0.86);
   /* Flat ink, not a gradient: the handoff's primary action is a solid ink
      block that turns terracotta on hover. Kept as gradient-shaped tokens so
      existing call sites keep resolving. */
   --gradient-btn-primary: linear-gradient(var(--cc-t1), var(--cc-t1));
-  --gradient-btn-primary-hover: linear-gradient(var(--cc-ac), var(--cc-ac));
+  --gradient-btn-primary-hover: linear-gradient(var(--color-btn-primary-hover), var(--color-btn-primary-hover));
 
   /* Sidebar chrome */
   --color-sidebar-filter-bg: var(--cc-bg);
@@ -1427,9 +1414,13 @@
   --shadow-dropdown: var(--cc-shadow-overlay);
   --shadow-inspector: var(--cc-shadow-overlay);
   --shadow-sidebar-filter: none;
-  --shadow-focus-ring: 0 0 0 1px rgba(var(--cc-ac-rgb), 0.24);
+  --shadow-focus-ring: 0 0 0 3px rgba(var(--cc-t1-rgb), 0.10);
   --shadow-error-ring: 0 0 0 1px rgba(var(--cc-er-rgb), 0.26);
-  --shadow-button-primary: 0 2px 10px rgba(var(--cc-t1-rgb), 0.22);
+  --shadow-button-primary: 0 1px 2px rgba(var(--cc-t1-rgb), 0.16);
+  /* A row or chip lifted one hair off its ground (the selected sidebar row). */
+  --shadow-raised: 0 1px 2px rgba(var(--cc-t1-rgb), 0.06);
+  /* The selected segment of a segmented control: lifted one hair off its track. */
+  --shadow-segment: 0 1px 2px rgba(var(--cc-t1-rgb), 0.10), 0 0 0 0.5px rgba(var(--cc-t1-rgb), 0.06);
 
   /* Code + diff */
   --color-code-bg: var(--cc-code);
@@ -1450,29 +1441,29 @@
 
   /* Syntax highlighting. One ramp for the four paper themes; the two ink
      themes override it below. */
-  --color-code-comment: #8A8478;
-  --color-code-string: #437220;
-  --color-code-keyword: #B8533B;
-  --color-code-function: #1D5A8C;
-  --color-code-number: #1B7A6A;
+  --color-code-comment: #8F8A82;
+  --color-code-string: #3F7A2A;
+  --color-code-keyword: #A2442B;
+  --color-code-function: #2A5EA8;
+  --color-code-number: #A2602A;
   --color-code-property: #7A3E20;
-  --color-code-type: #7E5520;
+  --color-code-type: #7A4FB0;
   --color-code-parameter: #5C3D2E;
   --color-code-punctuation: #5C504A;
   --color-code-inserted: var(--cc-ok-ink);
   --color-code-deleted: var(--cc-er-ink);
 
   --color-diff-syntax-foreground: var(--cc-t1);
-  --color-diff-syntax-comment: #8A8478;
-  --color-diff-syntax-string: #437220;
-  --color-diff-syntax-number: #1B7A6A;
-  --color-diff-syntax-regexp: #1D5A8C;
-  --color-diff-syntax-keyword: #B8533B;
+  --color-diff-syntax-comment: #8F8A82;
+  --color-diff-syntax-string: #3F7A2A;
+  --color-diff-syntax-number: #A2602A;
+  --color-diff-syntax-regexp: #2A5EA8;
+  --color-diff-syntax-keyword: #A2442B;
   --color-diff-syntax-variable: #7A3E20;
   --color-diff-syntax-parameter: #5C504A;
   --color-diff-syntax-property: #7A3E20;
-  --color-diff-syntax-function: #1D5A8C;
-  --color-diff-syntax-type: #7E5520;
+  --color-diff-syntax-function: #2A5EA8;
+  --color-diff-syntax-type: #7A4FB0;
   --color-diff-syntax-punctuation: #5C504A;
 
   /* The terminal belongs to the current workspace theme. */
@@ -1535,12 +1526,13 @@
   --color-outline-a92: rgba(var(--cc-bd2-rgb), 0.92);
 
   /* Radii — mirrored from `@theme` so `var(--radius-*)` resolves at runtime */
+  --radius-xs: 4px;
   --radius-sm: 6px;
-  --radius-md: 10px;
-  --radius-lg: 13px;
-  --radius-xl: 17px;
-  --radius-2xl: 20px;
-  --radius-3xl: 24px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --radius-2xl: 16px;
+  --radius-3xl: 20px;
   --radius-full: 9999px;
 }
 
@@ -1582,36 +1574,11 @@
   --color-modal-scrim: rgba(var(--cc-scrim-rgb), 0.66);
   --color-overlay-scrim: rgba(var(--cc-scrim-rgb), 0.56);
   --shadow-button-primary: 0 2px 10px rgba(0, 0, 0, 0.4);
+  --shadow-segment: 0 1px 2px rgba(0, 0, 0, 0.45);
+  --shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.35);
   --color-activity-tooltip-border: rgba(var(--cc-bg-rgb), 0.28);
 }
 
-/* ─── Material Symbols ─────────────────────────────────────────────
-   Inside @layer base ON PURPOSE. Unlayered CSS beats every @layer, and
-   Tailwind v4 puts its utilities in `@layer utilities` — so an unlayered
-   `font-size: 24px` here silently overrode every `text-[14px]` on every
-   hand-written icon span in the app, regardless of source order. In base,
-   the 24px default still applies when no size utility is present, and the
-   utilities win when one is. */
-@layer base {
-  .material-symbols-outlined {
-    font-family: 'Material Symbols Outlined';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    line-height: 1;
-    letter-spacing: normal;
-    text-transform: none;
-    display: inline-block;
-    white-space: nowrap;
-    word-wrap: normal;
-    direction: ltr;
-    -webkit-font-feature-settings: 'liga';
-    -webkit-font-smoothing: antialiased;
-    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
-    vertical-align: middle;
-  }
-}
-
 /* ─── Base styles ──────────────────────────────────────────────── */
 * {
   box-sizing: border-box;
@@ -1628,6 +1595,12 @@ html, body, #root {
   -moz-osx-font-smoothing: grayscale;
 }
 
+/* Code reads as code: JetBrains Mono's ligatures turned `===` into a single
+   glyph inside diffs and inline code. */
+code, kbd, pre, samp, .font-mono {
+  font-variant-ligatures: none;
+}
+
 ::selection {
   background: var(--color-selection-bg);
   color: var(--color-selection-fg);
@@ -1665,41 +1638,16 @@ button, input, textarea, select, a, [role="button"] {
   -webkit-app-region: no-drag;
 }
 
-/* Chrome's hairline between two neighbouring idle tabs — the thing that keeps
-   a row of untitled sessions from reading as one continuous smear.
-   It belongs to the *gap*, not to either tab, so it has to vanish the moment
-   either side of that gap gets a fill: a line running alongside a rounded
-   corner reads as a crack in it. Only sibling combinators can express "the
-   tab after the hovered one", which is why this is here and not in a Tailwind
-   class list. `::after` on purpose — `::before` is taken by the drag-over
-   drop indicator. */
-.tab-strip-item::after {
-  content: '';
-  position: absolute;
-  left: -1px;
-  top: 50%;
-  width: 1px;
-  height: 16px;
-  transform: translateY(-50%);
-  background: var(--color-tab-separator);
-  pointer-events: none;
-}
-.tab-strip-item:first-child::after,
-.tab-strip-item:hover::after,
-.tab-strip-item[data-active='true']::after,
-.tab-strip-item[data-dragging='true']::after,
-.tab-strip-item:hover + .tab-strip-item::after,
-.tab-strip-item[data-active='true'] + .tab-strip-item::after,
-.tab-strip-item[data-dragging='true'] + .tab-strip-item::after {
-  content: none;
-}
-
+/* 「素」 popover shell: a near-opaque white sheet, the same hairline every card
+   uses, and the dropdown step of the shadow scale. The old translucent border
+   (`--color-surface-glass-border`) vanished against white pages, so menus read
+   as floating shadows with no edge. */
 .glass-panel {
   background: var(--color-surface-glass);
-  border: 1px solid var(--color-surface-glass-border);
+  border: 1px solid var(--color-border);
   backdrop-filter: blur(18px);
   -webkit-backdrop-filter: blur(18px);
-  box-shadow: var(--shadow-overlay);
+  box-shadow: var(--shadow-dropdown);
 }
 
 /* The fill above is translucent on the assumption that the blur will scramble
@@ -1713,8 +1661,10 @@ button, input, textarea, select, a, [role="button"] {
   }
 }
 
+/* Focus inside a popover is shown on the focused control itself; ringing the
+   whole sheet as well doubled the indicator. The edge darkens one step instead. */
 .glass-panel:focus-within {
-  box-shadow: var(--shadow-focus-ring), var(--shadow-dropdown);
+  border-color: var(--color-outline);
 }
 
 /* Modals are read-and-fill surfaces, not glances: an 860px provider form that
@@ -1729,17 +1679,43 @@ button, input, textarea, select, a, [role="button"] {
   box-shadow: var(--shadow-overlay);
 }
 
-/* The composer sits closer to the page than a floating overlay does, so it
-   takes the middle step of the shadow scale. Declared as a class rather than a
-   `shadow-[…]` utility because `.glass-panel` also sets `box-shadow`, and which
-   of the two wins would come down to stylesheet order. */
-.glass-panel--composer,
+/* The composer is a floating card (「素」): an opaque lifted sheet — white on
+   the light themes, one step up the ramp on the ink ones — with the card
+   hairline and the composer step of the shadow scale. No blur: it sits over
+   the transcript's fade, not over content that has to stay legible behind it.
+   Declared as a class rather than utilities because `.glass-panel` also sets
+   the fill, border and shadow, and which of two would win would come down to
+   stylesheet order. */
+.glass-panel--composer {
+  background: var(--color-surface-dialog);
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  box-shadow: var(--shadow-composer);
+  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
+}
+
+/* Focus is a darker edge, not a ring: the editor holds focus for the whole
+   time anyone types, and a permanent halo stops meaning anything. */
 .glass-panel--composer:focus-within {
+  border-color: var(--color-outline);
   box-shadow: var(--shadow-composer);
 }
 
-.glass-panel--composer:focus-within {
-  box-shadow: var(--shadow-focus-ring), var(--shadow-composer);
+/* The 28px fade above the docked composer, so the transcript dissolves into
+   the composer's ground instead of being cut by a hard edge. */
+.composer-fade {
+  position: relative;
+}
+
+.composer-fade::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 100%;
+  height: 28px;
+  background: linear-gradient(to bottom, transparent, var(--color-surface));
+  pointer-events: none;
 }
 
 /* Radial wash behind the empty-state seal. */
@@ -1747,9 +1723,10 @@ button, input, textarea, select, a, [role="button"] {
   background: radial-gradient(460px 300px at 50% 44%, var(--color-brand-soft) 0%, transparent 72%);
 }
 
-.composer-drop-target-active {
+.composer-drop-target-active,
+.composer-drop-target-active:focus-within {
   border-color: var(--color-border-focus);
-  box-shadow: var(--shadow-focus-ring), var(--shadow-dropdown);
+  box-shadow: var(--shadow-focus-ring), var(--shadow-composer);
 }
 
 /* ProseMirror composer (MentionComposer). Paragraphs carry the line breaks,
@@ -1770,11 +1747,11 @@ button, input, textarea, select, a, [role="button"] {
 .composer-workflow-keyword {
   color: var(--color-on-brand-soft);
   background: var(--color-brand-soft);
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-xs);
   box-decoration-break: clone;
   -webkit-box-decoration-break: clone;
   padding: 0 2px;
-  font-weight: 600;
+  font-weight: 500;
 }
 
 /* Floated zero-height placeholder: the empty paragraph keeps its own caret,
@@ -1788,19 +1765,25 @@ button, input, textarea, select, a, [role="button"] {
 }
 
 /* Inline @-mention pill (an atom node in the document). */
+/* A chip, not a link: the sunken chip ground and the chip corner, so a mention
+   reads as an inserted token without borrowing the brand color reserved for
+   the send key and selection. */
 .composer-mention {
-  color: var(--color-on-brand-soft);
-  background: var(--color-brand-soft);
-  border-radius: var(--radius-md);
+  color: var(--color-text-primary);
+  background: var(--color-surface-container);
+  border-radius: var(--radius-xs);
   padding: 0 4px;
   margin: 0 1px;
   overflow-wrap: anywhere;
 }
 
 .composer-mention-icon {
-  font-size: 15px;
-  vertical-align: -3px;
-  margin-right: 1px;
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  vertical-align: -2px;
+  margin-right: 2px;
+  color: var(--color-text-tertiary);
 }
 
 .composer-mention--skill,
@@ -2113,38 +2096,68 @@ body.sidebar-resizing * {
    document typography without resizing tool controls or non-chat Markdown. */
 :root {
   --chat-font-family: var(--font-body);
-  --chat-font-size: 14px;
-  --chat-content-max-width: 900px;
+  --chat-font-size: 15px;
+  --chat-content-max-width: 800px;
 }
 
 .chat-reading-text,
 .markdown-prose.chat-reading-markdown {
   font-family: var(--chat-font-family);
   font-size: var(--chat-font-size);
-  line-height: 1.625;
+  line-height: 1.7;
 }
 
+/* Code — inline chips and blocks alike — runs two steps under the prose
+   (13px at the default 15px), so a monospace run never out-shouts the
+   sentence it sits in. */
 .markdown-prose.chat-reading-markdown {
-  --code-viewer-font-size: calc(var(--chat-font-size) * 0.928571);
+  --code-viewer-font-size: calc(var(--chat-font-size) - 2px);
 }
 
-.markdown-prose.chat-reading-markdown :is(p, li, table, blockquote) {
+/* Reasoning is secondary reading: the same family, two steps down. */
+.markdown-prose.chat-reading-markdown.thinking-markdown {
+  font-size: calc(var(--chat-font-size) - 2px);
+  --code-viewer-font-size: calc(var(--chat-font-size) - 3px);
+}
+
+.markdown-prose.chat-reading-markdown :is(p, li, blockquote) {
   font-size: 1em;
-  line-height: 1.625;
+  line-height: 1.7;
+}
+
+/* Tables are reference material, not running text: a denser 13px grid. */
+.markdown-prose.chat-reading-markdown table {
+  font-size: calc(var(--chat-font-size) - 2px);
+  line-height: 1.55;
 }
 
 .markdown-prose.chat-reading-markdown :is(h1, h2, h3, h4, h5, h6) {
   font-family: var(--chat-font-family);
-  line-height: 1.35;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  line-height: 1.4;
 }
 
-.markdown-prose.chat-reading-markdown h1 { font-size: 1.75em; }
-.markdown-prose.chat-reading-markdown h2 { font-size: 1.5em; }
-.markdown-prose.chat-reading-markdown h3 { font-size: 1.25em; }
+/* On the type scale at the default size: 22 / 18 / 18 / 15. */
+.markdown-prose.chat-reading-markdown h1 { font-size: calc(var(--chat-font-size) + 7px); }
+.markdown-prose.chat-reading-markdown :is(h2, h3) { font-size: calc(var(--chat-font-size) + 3px); }
 .markdown-prose.chat-reading-markdown :is(h4, h5, h6) { font-size: 1em; }
+.markdown-prose.chat-reading-markdown :is(h2, h3) {
+  margin-bottom: 8px;
+  /* The document variant underlines h2; in a reply the size step is enough. */
+  border-bottom: 0;
+  padding-bottom: 0;
+}
+.markdown-prose.chat-reading-markdown :is(h2, h3):not(:first-child) {
+  margin-top: 22px;
+}
 .markdown-prose.chat-reading-markdown code {
   font-family: var(--font-mono);
   font-size: var(--code-viewer-font-size);
+  font-weight: 400;
+}
+.markdown-prose.chat-reading-markdown table code {
+  font-size: 12px;
 }
 
 .markdown-prose {
@@ -2171,6 +2184,15 @@ body.sidebar-resizing * {
   border-bottom: 0;
 }
 
+/* A path or identifier in a table cell is one token. Breaking it per letter
+   in a narrow column ("src/lib/v / alidators.ts") made it unreadable; keep it
+   whole and let the wrapper's horizontal scroll absorb the width. */
+.markdown-prose .md-table-wrap :is(td, th) code {
+  white-space: nowrap;
+  overflow-wrap: normal;
+  word-break: normal;
+}
+
 .markdown-prose a code {
   color: inherit;
 }
@@ -2178,11 +2200,14 @@ body.sidebar-resizing * {
 /* Scrollbar */
 ::-webkit-scrollbar { width: 6px; height: 6px; }
 ::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: var(--color-outline); border-radius: 9999px; opacity: 0.3; }
-::-webkit-scrollbar-thumb:hover { opacity: 0.6; }
+/* `opacity` is ignored on scrollbar parts, so the hover step is a darker ink. */
+::-webkit-scrollbar-thumb { background: var(--color-outline); border-radius: 9999px; }
+::-webkit-scrollbar-thumb:hover { background: var(--color-border-strong); }
 
+/* Clears the settings dock (8px inset + 30px row + 8px + hairline) with a
+   row's breathing room, so the last session never sits under it. */
 .sidebar-scroll-area {
-  padding-bottom: 72px;
+  padding-bottom: 60px;
   scrollbar-width: thin;
   scrollbar-color: var(--color-outline-a72) transparent;
 }
@@ -2229,24 +2254,31 @@ body.sidebar-resizing * {
   word-break: keep-all;
 }
 
+/* Five tiles on a 700px page: the headline total takes two columns so the rows
+   read 2+1 / 1+1+1 instead of leaving a hole at the end of the second row. */
 @container (min-width: 360px) {
   .activity-summary-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
-}
-
-@container (min-width: 560px) {
-  .activity-summary-grid {
-    grid-template-columns: repeat(5, minmax(0, 1fr));
-  }
 
   .activity-summary-metric-primary {
-    grid-column: auto;
+    grid-column: span 2;
   }
 }
 
+@container (min-width: 520px) {
+  .activity-summary-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+.activity-heat-swatch {
+  border-radius: calc(var(--radius-xs) / 2);
+}
+
 .activity-heat-cell {
   position: relative;
+  border-radius: calc(var(--radius-xs) / 2);
   transform: translateZ(0);
   transform-origin: center;
   transition:
@@ -2259,7 +2291,7 @@ body.sidebar-resizing * {
 .activity-heat-cell:hover,
 .activity-heat-cell:focus-visible,
 .activity-heat-cell.is-active {
-  z-index: 1;
+  z-index: var(--z-raised);
   transform: translateZ(0) scale(1.16);
   box-shadow: var(--shadow-activity-cell-hover);
   filter: saturate(1.08);
@@ -2267,7 +2299,7 @@ body.sidebar-resizing * {
 
 @media (prefers-reduced-motion: reduce) {
   .activity-heat-cell {
-    transition-duration: 0.01ms !important;
+    transition: none;
   }
 
   .activity-heat-cell:hover,
@@ -2432,6 +2464,11 @@ body.sidebar-resizing * {
    see, so its offsets would run short by one gap per turn. */
 .chat-turn-rail--none {
   padding-top: 24px;
+  /* The prompt's hover actions hang below the bubble (absolutely positioned,
+     24px tall) and must land inside this box: `--cv` rows paint-contain, so
+     anything past the padding edge is clipped. The bar does not add height;
+     it borrows the gap that separates the prompt from its reply. */
+  padding-bottom: 24px;
 }
 
 /* Held, not flashed: a jump usually lands on borderless content (a run's summary
@@ -2714,9 +2751,9 @@ html[data-window-kind='pet'] #root {
   padding: 0 6px;
   background: var(--color-brand);
   box-shadow: 0 5px 14px rgba(13, 31, 48, 0.26);
-  color: white;
+  color: var(--color-on-primary);
   cursor: pointer;
-  font: 650 12px/1 var(--font-body);
+  font: 600 12px/1 var(--font-body);
   pointer-events: auto;
   -webkit-app-region: no-drag;
 }
@@ -2829,7 +2866,7 @@ html[data-window-kind='pet'] #root {
   /* Keep the card, collapse control, and visible mascot as one compact stack. */
   margin-bottom: 12px;
   border: 1px solid rgba(255, 255, 255, 0.76);
-  border-radius: 24px;
+  border-radius: var(--radius-3xl);
   padding: 6px 7px;
   background: rgba(255, 255, 255, 0.8);
   box-shadow:
@@ -2842,7 +2879,7 @@ html[data-window-kind='pet'] #root {
 }
 
 .pet-activity-card[data-expanded='true'] {
-  border-radius: 22px;
+  border-radius: var(--radius-3xl);
   padding-right: 7px;
 }
 
@@ -2906,10 +2943,10 @@ html[data-theme='ink-blue'] .pet-session-list > [role='listitem'] + [role='listi
   align-items: center;
   gap: 12px;
   border: 0;
-  border-radius: 17px;
+  border-radius: var(--radius-xl);
   padding: 7px 10px;
   background: transparent;
-  color: #25222b;
+  color: var(--color-text-primary);
   cursor: pointer;
   text-align: left;
   transition: background 140ms ease, transform 140ms ease;
@@ -2929,22 +2966,22 @@ html[data-theme='ink-blue'] .pet-session-list > [role='listitem'] + [role='listi
 }
 
 .pet-session-indicator.is-waiting {
-  background: #f1ad3b;
+  background: var(--color-warning);
 }
 
 .pet-session-indicator.is-failed {
-  background: #ee5a73;
+  background: var(--color-error);
 }
 
 .pet-session-indicator.is-review {
-  background: #46bf8c;
+  background: var(--color-success);
 }
 
 .pet-session-indicator.is-running {
   width: 12px;
   height: 12px;
-  border: 2px solid var(--color-primary-fixed-dim);
-  border-top-color: var(--color-brand);
+  border: 2px solid var(--color-info-container);
+  border-top-color: var(--color-info);
   background: transparent;
   animation: pet-status-spin 1s linear infinite;
 }
@@ -2959,11 +2996,6 @@ html[data-theme='ink-blue'] .pet-session-list > [role='listitem'] + [role='listi
   outline-offset: -2px;
 }
 
-html[data-theme='dark'] .pet-session-row,
-html[data-theme='ink-blue'] .pet-session-row {
-  color: rgba(255, 255, 255, 0.94);
-}
-
 html[data-theme='dark'] .pet-session-row:hover,
 html[data-theme='ink-blue'] .pet-session-row:hover {
   background: rgba(255, 255, 255, 0.08);
@@ -2985,17 +3017,12 @@ html[data-theme='ink-blue'] .pet-session-row:hover {
 }
 
 .pet-session-title {
-  font: 650 13px/1.25 var(--font-body);
+  font: 500 13px/1.25 var(--font-body);
 }
 
 .pet-session-status {
-  color: rgba(75, 70, 85, 0.66);
-  font: 500 11px/1.25 var(--font-body);
-}
-
-html[data-theme='dark'] .pet-session-status,
-html[data-theme='ink-blue'] .pet-session-status {
-  color: rgba(236, 232, 243, 0.62);
+  color: var(--color-text-tertiary);
+  font: 400 12px/1.25 var(--font-body);
 }
 
 .pet-panel-toggle {
@@ -3031,7 +3058,7 @@ html[data-theme='ink-blue'] .pet-session-status {
 
 .pet-panel-toggle:hover {
   background: rgba(43, 47, 54, 0.88);
-  color: white;
+  color: rgba(255, 255, 255, 1);
 }
 
 .pet-panel-toggle:active {
@@ -3052,15 +3079,14 @@ html[data-theme='ink-blue'] .pet-panel-toggle {
 html[data-theme='dark'] .pet-panel-toggle:hover,
 html[data-theme='ink-blue'] .pet-panel-toggle:hover {
   background: rgba(255, 255, 255, 0.09);
-  color: white;
+  color: rgba(255, 255, 255, 1);
 }
 
 .pet-error-card {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 7px;
-  color: rgba(70, 65, 79, 0.68);
+  gap: 8px;
   font-size: 12px;
 }
 
@@ -3069,11 +3095,11 @@ html[data-theme='ink-blue'] .pet-panel-toggle:hover {
   left: 22px;
   bottom: 14px;
   width: 340px;
-  border: 1px solid rgba(234, 82, 104, 0.24);
-  border-radius: 18px;
-  padding: 18px;
-  background: rgba(255, 244, 246, 0.9);
-  color: #a83f54;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-xl);
+  padding: 16px;
+  background: var(--color-error-container);
+  color: var(--color-on-error-container);
   pointer-events: auto;
 }
 
diff --git a/desktop/src/theme/globals.test.ts b/desktop/src/theme/globals.test.ts
index 0f2f3ae0..b2a205cb 100644
--- a/desktop/src/theme/globals.test.ts
+++ b/desktop/src/theme/globals.test.ts
@@ -185,15 +185,25 @@ describe('desktop theme tokens', () => {
     expect(getThemeBlock(':root')).toContain('--color-switch-checked-bg: var(--color-brand);')
   })
 
-  it('uses container queries for the compact activity summary strip', () => {
+  it('keeps a path in a chat table cell whole instead of breaking it per letter', () => {
+    // In the split workspace the chat column is ~400px; table cells used to wrap
+    // `src/lib/validators.ts` one letter at a time.
+    expect(css).toMatch(/\.md-table-wrap :is\(td, th\) code \{[^}]*white-space: nowrap;[^}]*word-break: normal;/)
+  })
+
+  it('lays the activity summary tiles out by container width, not viewport width', () => {
     const activitySummaryCss = getCssBetween('.activity-summary-panel {', '.activity-heat-cell {')
 
     expect(activitySummaryCss).toContain('container-type: inline-size;')
+    // One column when cramped; on the 700px settings page the five tiles read
+    // 2+1 / 1+1+1 — the headline total spans two of three columns, so the second
+    // row is full instead of ending in a hole.
+    expect(activitySummaryCss).toContain('grid-template-columns: minmax(0, 1fr);')
     expect(activitySummaryCss).toContain('@container (min-width: 360px)')
-    expect(activitySummaryCss).toContain('@container (min-width: 560px)')
-    expect(activitySummaryCss).toContain('grid-template-columns: repeat(5, minmax(0, 1fr));')
-    expect(activitySummaryCss).toContain('grid-column: auto;')
-    expect(activitySummaryCss).not.toContain('grid-column: span 2;')
+    expect(activitySummaryCss).toContain('@container (min-width: 520px)')
+    expect(activitySummaryCss).toContain('grid-template-columns: repeat(3, minmax(0, 1fr));')
+    expect(activitySummaryCss).toContain('grid-column: span 2;')
+    expect(activitySummaryCss).not.toContain('repeat(5, minmax(0, 1fr))')
   })
 
   it('avoids color-mix in the startup-critical UI zoom shell chrome for Safari 15 WebView support', () => {