diff --git a/docs/design/zen-style-reference.md b/docs/design/zen-style-reference.md
new file mode 100644
index 0000000..06bf53e
--- /dev/null
+++ b/docs/design/zen-style-reference.md
@@ -0,0 +1,181 @@
+# Zen visual rules for Alto
+
+Research reference, 2026-10-28. Zen source is pinned to [7133db8][zen-revision]; Alto's starting point is checkpoint 3740b84 on jm/vertical-tabs. This document proposes subsequent design passes. It does not change the running interface.
+
+Zen extends Firefox, so its appearance comes from inherited controls, Zen overrides, platform rules, and preferences. The values below are representative source values, not a universal specification supplied by Zen. “Alto proposal” identifies our interpretation and proposed adaptation.
+
+## Design direction
+
+My interpretation of Zen's implementation is that a visibly colored window frame can coexist with restrained controls. Most controls share an ink color and acquire a light surface on interaction. Selection, primary actions, and floating panels receive progressively stronger treatment. Typography and alignment carry much of the hierarchy.
+
+For Alto, retain the approved accent glass, rounded composer, rounded tabs, and shared horizontal/vertical tab styling. Extend the control rules component by component.
+
+## Color and material
+
+**Zen implementation.** The theme derives related surface, border, and foreground colors from its primary accent. Dialog and address-field surfaces receive little color. [Theme colors][zen-colors] Toolbar hover and press use approximately 7% and 10% contrasting ink. These percentages belong to toolbar controls; other button contexts differ. [Toolbar states][zen-toolbar-states]
+
+**Alto proposal.** Separate decorative color from actionable color. A bright workspace hue can remain noticeable in the glass while an action uses a darker or lighter version of that hue for readable text.
+
+| Role | Alto rule |
+| --- | --- |
+| Frame | Keep the current accent wash over native material. Derive the opaque fallback from the same hue and surface family. |
+| Content | Keep a stable reading surface related to the frame's palette. |
+| Raised | Use for the composer and floating panels. A selected tab can use a translucent version appropriate to the frame. |
+| Recessed | Use for user bubbles and embedded regions that need separation without another shadow. |
+| Interaction | Define hover, press, selected, and open fills for each surface context. Reuse those roles across components. |
+| Ink | Use primary, supporting, and disabled levels with consistent meanings. Enabled controls on glass need sufficient contrast against varying backdrops. |
+| Action | Derive a readable action color from the accent. Do not reuse the raw decorative tint indiscriminately. |
+| Status | Preserve distinct error, warning, success, and activity meanings independently of the workspace hue. |
+
+Paint the window tint once. Repeated opaque fills or blur layers inside tabs and toolbars would obscure the material we just established. Menu and dialog readability should come from their own surface, rather than increasingly darkening the entire window.
+
+## Fonts and hierarchy
+
+**Zen implementation.** macOS chrome uses SF Pro with system fallbacks; Windows uses Segoe UI. [Platform fonts][zen-fonts] The packaged Junicode serif is used for large branding titles. [Brand typography][zen-branding] Ordinary buttons use weight 500, with 600 on prominent accent actions. [Button typography][zen-buttons]
+
+**Alto proposal.** Use the existing native UI font throughout navigation, toolbars, forms, and dialogs. Preserve the conversation's reading sizes and code font. Reserve a display serif, if ever adopted, for a deliberate branding or welcome screen.
+
+The following is an Alto scale to evaluate, not a font scale extracted from Zen:
+
+| Role | Starting treatment |
+| --- | --- |
+| Metadata and keyboard hints | 11–12px, regular, supporting ink |
+| Tabs, menu items, compact controls | 12–13px, regular; medium for selected items or action labels |
+| Conversation body | Retain the current reading size and line height |
+| Composer | Retain its current typography and shape |
+| Section headings | 14–16px, medium or semibold, with spacing that establishes the section |
+
+Use 400, 500, and 600 as the main weight steps. Avoid making every navigation label semibold. Establish hierarchy through size, spacing, and selection before adding more weight or reducing opacity.
+
+## Buttons
+
+**Zen implementation.** Zen distinguishes faint secondary fills, transparent ghost actions, tonal dialog primaries, and prominent accent actions. Large accent buttons constrain accent lightness in OKLCH, a color space that exposes lightness separately from hue. Generic press feedback scales to 0.98; some toolbar icons use 0.95. These are different component treatments. [Button roles][zen-buttons], [toolbar overrides][zen-toolbar]
+
+**Alto proposal.**
+
+| Role | Appearance and use |
+| --- | --- |
+| Primary | Filled, readable action color; one visually dominant action within a local task, such as Send or an approval decision. |
+| Secondary | Faint neutral fill, medium text, restrained hover and press. Useful for adjacent alternatives. |
+| Ghost | Transparent at rest; quiet interaction fill. Use for routine toolbar, copy, close, and overflow actions. |
+| Toggle or open trigger | Persistent selected fill while enabled or while its popover remains open. Its state must remain visible after the pointer leaves. |
+| Destructive | Semantic danger ink or fill according to consequence. Keep the same geometry and type as neighboring controls. |
+
+Keep Alto's pill geometry for short buttons. A useful starting density is 32px compact targets and approximately 34–36px regular buttons, with shared horizontal padding and icon gaps. These dimensions are proposals for Alto, not Zen-wide defaults.
+
+Every button should have an explicit state contract:
+
+| State | Rule |
+| --- | --- |
+| Rest | Clear label or icon; hierarchy visible without hover |
+| Hover | Immediate fill and readable ink, with stable geometry |
+| Press | Stronger fill; optional restrained scale feedback |
+| Keyboard focus | Visible outline independent of hover and selection |
+| Selected or open | Persistent state fill |
+| Disabled | Visibly unavailable; no hover or press feedback |
+| Busy | Stable width and label alignment; reserved space for activity feedback |
+
+## Tabs, groups, and navigation rows
+
+**Zen implementation.** Sidebar tab backgrounds use a 14px radius in their context, with 2px block margins. [Vertical tabs][zen-tabs] Secondary row actions appear on hover. [Tab actions][zen-tab-actions] Selection uses a mostly neutral translucent plate and a small shadow. [Selected surface][zen-selection]
+
+**Alto proposal.** Keep the approved rounded tabs and shared appearance code for both orientations. Use regular weight for ordinary tabs and medium for the selected tab. Selection should be persistent and stronger than hover; group labels should establish membership without becoming another set of competing filled buttons.
+
+Reveal secondary actions on keyboard focus as well as hover. Reserve their space so titles and counts do not move when actions appear. Keep active, running, unread, and grouped states distinguishable: they communicate different things.
+
+## Icons
+
+**Zen implementation.** Toolbar glyphs are generally 16px, with a 17px macOS override. A common toolbar rule derives icon fill from 70% current ink. [Icon sizing][zen-icons], [toolbar overrides][zen-toolbar]
+
+**Alto proposal.** Retain one coherent glyph family. Normalize optical size, stroke weight, baseline, and icon-to-label spacing. Use inherited control ink so icons and labels respond together. Keep a comfortable target around a small glyph; increasing the glyph is not the only way to make the control easier to hit.
+
+Avoid applying opacity to an entire control when only the icon needs optical adjustment: that also weakens text, focus rings, and state fills.
+
+## Corners, spacing, and alignment
+
+**Zen implementation.** Corners vary by role: common toolbar overrides use 8px, menu rows 5px, sidebar tab backgrounds 14px, and dialogs a larger radius. Native outer corners have platform overrides. Inner corners are derived from outer geometry and separation. [Toolbar][zen-toolbar], [menus][zen-menus], [native radius][zen-native-radius], [nested radius][zen-nested-radius] The default content separation is 8px. [Spacing preference][zen-spacing]
+
+**Alto proposal.** Preserve the rounded shape the user selected, including the composer and tabs. Adopt the relationship between containers and inset controls: inner rounding should fit the available bounds and inset. Small controls naturally become pills; larger surfaces retain visible rounded corners.
+
+Use a small shared spacing scale, initially 2, 4, 8, 12, 16, and 24px, for internal gaps and gutters. This is an Alto proposal; Zen does not use a strict version of that scale everywhere. Reuse existing content gutters and title alignment. Align icon centers, text baselines, and trailing actions within each row family.
+
+## Fields, search, and toggles
+
+**Zen implementation.** The address field uses a quiet enclosing surface, stable internal padding, and contextual actions. [Omnibox][zen-fields] Toggle fills reuse button tokens, with an accent-derived on state. [Toggle patch][zen-toggles]
+
+**Alto proposal.** Let the field container own its background, rounding, and focus treatment. Inner text inputs should not add another rounded border. Apply the same rule to search, rename fields, model pickers, and settings controls.
+
+Keep the composer's existing shape and editing behavior. Use the accent action role for checked or enabled controls; use the shared neutral control treatment when off. Labels and help text should follow the same typography rules as buttons and menus.
+
+## Menus, popovers, tooltips, and dialogs
+
+**Zen implementation.** Menu geometry includes 8px vertical and 14px horizontal row padding, 2px by 4px row margins, and a reserved icon column. macOS panel corners are 10px, or 12px under its Tahoe condition. [Menu geometry][zen-menus] Dialogs add a fine edge and a soft shadow, with larger corners. [Dialog surface][zen-dialogs]
+
+**Alto proposal.** Build one floating-panel family, with menu rows that share button hover, focus, disabled, and selected treatments. Align labels, icons, checkmarks, submenus, and keyboard hints into stable columns. Keep that alignment for items without icons.
+
+Use supporting ink for shortcuts and descriptions. Separate groups with spacing and a subtle divider. Tooltips should use the same surface and caption typography at a smaller density. Dialogs can have more elevation and padding than anchored menus while retaining the same palette and action hierarchy.
+
+## Elevation and edges
+
+**Alto proposal from Zen's selected-tab and dialog treatments.** Use elevation where it explains a relationship: a selected tab, an anchored popup, a modal, or the main pane above the glass. Ordinary buttons and every message do not need their own shadows.
+
+Keep the existing light pane shadow. Use one edge treatment per boundary, avoiding stacked outlines, borders, and shadows that recreate the stray pixel line. In dark mode a restrained highlight edge can clarify a floating surface without a heavy black shadow.
+
+## Motion and responsiveness
+
+**Zen implementation.** Common controls use roughly 100–200ms transitions; contextual address-field actions fade over 150ms. Dialog entry uses 300ms with a 10px translation. Reduced-motion handling exists in several components but is not uniform across every rule. [Toolbar motion][zen-toolbar], [field disclosure][zen-fields], [dialog timing][zen-dialogs], [dialog keyframes][zen-motion]
+
+**Alto proposal.** Preserve immediate tab hover painting, which addressed the sluggish pointer feedback. Add movement only where it clarifies an action: a restrained press, panel appearance, or group expansion. Avoid animating every fill while the pointer crosses a long list.
+
+Use short opacity or transform transitions for optional polish, keep layout stable, and apply reduced-motion behavior consistently. Disclosure must work for keyboard users too.
+
+## Applying the rules to Alto-specific content
+
+Zen's browser chrome does not prescribe an Alto conversation design. The following are adaptations:
+
+- Conversation cards, approval requests, and tool results should reuse the content, raised, recessed, border, and status roles.
+- Code blocks, diffs, terminals, and tables should retain appropriate text density and semantic coloring. Their controls can share the common button language.
+- Badges should use quiet surfaces unless they convey actionable status. A workspace accent should not overwrite error or approval meaning.
+- Empty states and onboarding can use more expressive typography. Ordinary conversation and navigation should remain consistent.
+- Loading indicators should occupy stable space and use the same supporting ink or status roles as nearby content.
+
+Preserve visible keyboard focus even where individual Zen overrides suppress it. Test legibility over both light and dark backdrops, along with the opaque material fallback.
+
+## Suggested adoption order
+
+1. **Buttons, typography, and icons.** Normalize roles and states across pane toolbars, tab tools, composer actions, approval actions, and settings. Keep both tab orientations on shared rules.
+2. **Fields and floating panels.** Unify search, pickers, menus, tooltips, and dialogs around the same surfaces, gutters, and state contract.
+3. **Spacing and component geometry.** Align row families, action slots, nested corners, and panel insets while preserving the approved rounded composer and tabs.
+4. **Optional motion and content details.** Add restrained feedback, then harmonize badges, tool cards, tables, and empty states.
+
+Each pass should be reviewed across light and dark themes, several accent hues, horizontal and vertical tabs, and split panes. Interaction changes should preserve keyboard operation, immediate hover response, and active composer state.
+
+Steps 1–3 now use shared appearance and geometry roles. Compact rows are 32px,
+two-line choices are 52px, icon/action slots are 24px, and panel/dialog insets are
+12px/24px. Both tab orientations reserve trailing actions without shifting their
+titles. Settings, search, and pickers fit the available pane and scroll in short
+windows. The approved rounded tabs, composer, and accent glass remain intact.
+Step 4 has a small initial pass: shared neutral card and attachment-badge
+surfaces, rounded table wrappers, and readable empty-state copy. Regular buttons
+have a 100ms press response when reduced motion is off. Further motion and
+content changes remain optional.
+
+[zen-revision]: https://github.com/zen-browser/desktop/tree/7133db8aee16c3cdf042307e9e11071359d92851
+[zen-colors]: https://github.com/zen-browser/desktop/blob/7133db8aee16c3cdf042307e9e11071359d92851/src/zen/common/styles/zen-theme.css#L22-L121
+[zen-toolbar-states]: https://github.com/zen-browser/desktop/blob/7133db8aee16c3cdf042307e9e11071359d92851/src/zen/common/styles/zen-theme.css#L167-L188
+[zen-fonts]: https://github.com/zen-browser/desktop/blob/7133db8aee16c3cdf042307e9e11071359d92851/src/zen/common/styles/zen-theme.css#L291-L306
+[zen-branding]: https://github.com/zen-browser/desktop/blob/7133db8aee16c3cdf042307e9e11071359d92851/src/zen/common/styles/zen-branding.css#L7-L29
+[zen-buttons]: https://github.com/zen-browser/desktop/blob/7133db8aee16c3cdf042307e9e11071359d92851/src/zen/common/styles/zen-buttons.css#L13-L153
+[zen-toolbar]: https://github.com/zen-browser/desktop/blob/7133db8aee16c3cdf042307e9e11071359d92851/src/zen/common/styles/zen-single-components.css#L185-L215
+[zen-tabs]: https://github.com/zen-browser/desktop/blob/7133db8aee16c3cdf042307e9e11071359d92851/src/zen/tabs/zen-tabs/vertical-tabs.css#L259-L394
+[zen-tab-actions]: https://github.com/zen-browser/desktop/blob/7133db8aee16c3cdf042307e9e11071359d92851/src/zen/tabs/zen-tabs/vertical-tabs.css#L712-L733
+[zen-selection]: https://github.com/zen-browser/desktop/blob/7133db8aee16c3cdf042307e9e11071359d92851/src/zen/spaces/zen-workspaces.css#L394-L399
+[zen-icons]: https://github.com/zen-browser/desktop/blob/7133db8aee16c3cdf042307e9e11071359d92851/src/zen/common/styles/zen-theme.css#L159-L175
+[zen-native-radius]: https://github.com/zen-browser/desktop/blob/7133db8aee16c3cdf042307e9e11071359d92851/src/zen/common/zenThemeModifier.js#L112-L144
+[zen-nested-radius]: https://github.com/zen-browser/desktop/blob/7133db8aee16c3cdf042307e9e11071359d92851/src/zen/common/styles/zen-theme.css#L282-L288
+[zen-spacing]: https://github.com/zen-browser/desktop/blob/7133db8aee16c3cdf042307e9e11071359d92851/prefs/zen/theme.yaml#L5-L9
+[zen-fields]: https://github.com/zen-browser/desktop/blob/7133db8aee16c3cdf042307e9e11071359d92851/src/zen/common/styles/zen-omnibox.css#L19-L172
+[zen-toggles]: https://github.com/zen-browser/desktop/blob/7133db8aee16c3cdf042307e9e11071359d92851/src/toolkit/content/widgets/moz-toggle/moz-toggle-tokens-css.patch#L6-L14
+[zen-menus]: https://github.com/zen-browser/desktop/blob/7133db8aee16c3cdf042307e9e11071359d92851/src/zen/common/styles/zen-popup.css#L10-L78
+[zen-dialogs]: https://github.com/zen-browser/desktop/blob/7133db8aee16c3cdf042307e9e11071359d92851/src/zen/common/styles/zen-panels/dialog.css#L6-L32
+[zen-motion]: https://github.com/zen-browser/desktop/blob/7133db8aee16c3cdf042307e9e11071359d92851/src/zen/common/styles/zen-animations.css#L92-L135
diff --git a/docs/plugin-authoring.md b/docs/plugin-authoring.md
index 62f803f..4d88126 100644
--- a/docs/plugin-authoring.md
+++ b/docs/plugin-authoring.md
@@ -136,6 +136,55 @@ export default client
 
 Both registrations are effects owned by the browser fiber. Cordis removes the renderer, listeners returned from the plugin, and its `<style>` element before a replacement activates. Keep raw browser APIs such as observers and global listeners inside an owned effect or a React effect with cleanup. Browser modules may import React and Cordis; Node built-ins and filesystem/process work belong in the server half.
 
+## Shared interface appearance
+
+Built-in controls import `uiStyles` from `program/plugins/ui/appearance.ts`.
+Use its `button`, `iconButton`, `row`, `field`, `input`, `segment`, `dialog`,
+`panel`, `tooltip`, `title`, `description`, and `key` classes for their visual
+roles. The `interface-appearance` fiber registers the corresponding tokens and
+styles directly under the interface, independently of the workspace. This scope
+also covers portals mounted on `document.body`. The class catalog imports no CSS,
+so editing shared appearance does not replace feature components or their drafts.
+
+Features own positioning, bounds, row grids, wrapping, and specialized content.
+Shared roles own neutral colors, typography, rounding, shadows, focus, interaction
+states, and default control geometry. Add layout classes alongside the role instead of
+repainting it. A decorated search container uses `field`; its borderless inner
+control uses `input`. Use `panel` for a flyout and `dialog` for a modal, even when
+both have an accessible `role="dialog"`. Native menu/listbox states also share the
+row treatment. Keep `aria-selected`, `aria-checked`, `aria-pressed`, and disabled
+states accurate so keyboard and pointer interactions agree.
+
+When a specialized control needs custom CSS, consume the `--ui-*` roles from
+`ui/appearance-tokens.css`: surface/inset, text/strong/secondary, border/divider,
+field fill/border/radius, control fill/radius, hover/pressed/selected, action/on-action,
+danger, and focus. Existing primitive `--alto-button-*` hooks remain supported
+for geometry and deliberate visual exceptions. Literal accent swatches, status
+indicators, source syntax, terminal colors, diagrams, and embedded browser content
+retain their own palettes. Window glass and Composer geometry have independent
+owners and should not change as a side effect of control styling.
+
+`ui/geometry.css` supplies common target sizes, row padding, and menu insets.
+Consume its geometry tokens for feature layouts: `--ui-panel-inset` (12px),
+`--ui-dialog-inset` (24px), compact `--ui-row-min-height` (32px), and
+`--ui-choice-row-min-height` (52px) for two-line choices. A feature row sets
+`--ui-row-min-height: var(--ui-choice-row-min-height)` when it needs that density;
+this preserves its target size independently of stylesheet registration order.
+Use the shared row padding/gap and field/control padding roles rather than
+nearby literal values. A 12px inset accommodates a 12px inner corner within the
+24px outer surface. Keep tab and Composer pills as their established shape
+families, and allow wrapping or scrolling when the available pane width shrinks.
+
+Pierre renders React review annotations into document slots. Their shared
+appearance belongs in `ui/review-annotations.css`; the viewer's `unsafeCSS`
+stylesheet reaches its code shadow root and cannot paint those slotted controls.
+
+`tests/interface-appearance-browser.test.ts` exercises real Settings, Cmd+K,
+menus, and Composer under both themes, alternate accents, reversed stylesheet
+registration, and style replacement. It varies shared role values to catch
+feature overrides and verifies query, selection, and draft retention. Run it
+alongside the affected feature checks when adding a surface or changing a role.
+
 Fenced Markdown renderers use the same lifetime. Register a catch-all code renderer without `languages`, or a specialized renderer with normalized language names. Specialized renderers fall through to the next matching renderer when they unload or do not recognize the current fence:
 
 ```tsx
diff --git a/package-lock.json b/package-lock.json
index af150b4..ef3e16d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "alto",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "alto",
-      "version": "0.1.2",
+      "version": "0.1.3",
       "dependencies": {
         "@agentclientprotocol/sdk": "^1.4.0",
         "@modelcontextprotocol/sdk": "^1.30.0",
diff --git a/package.json b/package.json
index ab58835..bea46a8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "alto",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "private": true,
   "type": "module",
   "main": "dist/node/desktop/main.js",
diff --git a/program/cordis.json b/program/cordis.json
index 999ac04..a1fefb5 100644
--- a/program/cordis.json
+++ b/program/cordis.json
@@ -409,6 +409,14 @@
             }
           ]
         },
+        {
+          "id": "interface-appearance",
+          "name": "Interface Appearance",
+          "description": "Shares typography, control states, fields, and floating surfaces across the application.",
+          "client": "plugins/interface-appearance.client.ts",
+          "enabled": true,
+          "config": {}
+        },
         {
           "id": "search",
           "name": "Quick Search",
@@ -649,6 +657,41 @@
               "enabled": true,
               "config": {}
             },
+            {
+              "id": "workspace-tabs-appearance",
+              "name": "Workspace Appearance",
+              "description": "Shares surface colors, typography, and alignment across workspace chrome and content.",
+              "client": "plugins/workspace-tabs-appearance.client.ts",
+              "enabled": true,
+              "config": {}
+            },
+            {
+              "id": "workspace-material",
+              "name": "macOS Window Material",
+              "description": "Applies native translucency consistently to workspace chrome while keeping content opaque.",
+              "module": "plugins/workspace-material.ts",
+              "client": "plugins/workspace-material.client.ts",
+              "enabled": true,
+              "config": {}
+            },
+            {
+              "id": "vertical-tabs",
+              "name": "Vertical Tabs",
+              "description": "Adds a resizable side tab column that can collapse to icons, and switches between it and the top tabs.",
+              "client": "plugins/vertical-tabs.client.tsx",
+              "enabled": false,
+              "config": {},
+              "children": [
+                {
+                  "id": "hotkeys-vertical-tabs",
+                  "name": "Vertical Tabs Shortcuts",
+                  "description": "Switches tab orientation with Command-Shift-B and collapses the side tab column with Command-B.",
+                  "client": "plugins/hotkeys-vertical-tabs.client.ts",
+                  "enabled": true,
+                  "config": {}
+                }
+              ]
+            },
             {
               "id": "seal",
               "name": "Seal",
diff --git a/program/plugins/agent-switcher.client.tsx b/program/plugins/agent-switcher.client.tsx
index db0a026..54a1d1b 100644
--- a/program/plugins/agent-switcher.client.tsx
+++ b/program/plugins/agent-switcher.client.tsx
@@ -11,6 +11,7 @@ import {
   type ReactNode,
 } from 'react'
 import { createPortal } from 'react-dom'
+import { uiStyles } from './ui/appearance.js'
 import { clientStyles, type BrowserPlugin, type ClientUiService } from '../../src/client/plugin-api.js'
 import { errorMessage } from '../../src/shared/protocol.js'
 import { AGENT_SWITCHER_ACTION, AGENT_SWITCHER_OVERLAY, AGENT_SWITCHER_TOGGLE } from './agent-switcher-api.js'
@@ -164,15 +165,16 @@ export function AgentSwitcherDialog({ session, ui }: { session: ClientSessionSer
     <ConversationPaneOverlay className={`${clientStyles.overlayLayer} agent-switcher-layer`} onMouseDown={close}>
       <section
         id="agent-switcher-dialog"
-        className={`${clientStyles.floatingPanel} agent-switcher-panel`}
+        className={`${clientStyles.floatingPanel} ${uiStyles.dialog} agent-switcher-panel`}
         role="dialog"
         aria-modal="true"
         aria-label="Agent, model, and reasoning"
         onMouseDown={(event) => event.stopPropagation()}
       >
-        <div className="agent-switcher-search">
+        <div className={`${uiStyles.field} agent-switcher-search`}>
           <Search size={17} aria-hidden="true" />
           <input
+            className={uiStyles.input}
             ref={input}
             value={query}
             aria-label="Search agents and models"
@@ -202,7 +204,7 @@ export function AgentSwitcherDialog({ session, ui }: { session: ClientSessionSer
                   else optionRefs.current.delete(option.key)
                 }}
                 id={optionDomId(option.key)}
-                className={`agent-switcher-option${active ? ' is-active' : ''}${option.current ? ' is-current' : ''}`}
+                className={`${uiStyles.row} agent-switcher-option${active ? ' is-active' : ''}${option.current ? ' is-current' : ''}`}
                 type="button"
                 role="option"
                 aria-selected={active}
@@ -215,8 +217,8 @@ export function AgentSwitcherDialog({ session, ui }: { session: ClientSessionSer
                 key={option.key}
               >
                 <span className="agent-switcher-option-copy">
-                  <strong>{option.modelLabel}</strong>
-                  <span>{option.providerLabel} · {option.providerLocation}</span>
+                  <strong className={uiStyles.title}>{option.modelLabel}</strong>
+                  <span className={uiStyles.description}>{option.providerLabel} · {option.providerLocation}</span>
                 </span>
                 <span className="agent-switcher-option-meta">
                   {option.disabledReason
@@ -236,7 +238,7 @@ export function AgentSwitcherDialog({ session, ui }: { session: ClientSessionSer
               <div className="agent-switcher-efforts" role="group" aria-label="Reasoning effort">
                 {selected.efforts.map((choice) => (
                   <button
-                    className="agent-switcher-effort"
+                    className={`${uiStyles.segment} agent-switcher-effort`}
                     type="button"
                     aria-pressed={choice.value === effort}
                     title={choice.description}
diff --git a/program/plugins/agent-switcher.css b/program/plugins/agent-switcher.css
index ef7bb4d..ef68747 100644
--- a/program/plugins/agent-switcher.css
+++ b/program/plugins/agent-switcher.css
@@ -1,93 +1,73 @@
 .agent-switcher-layer {
   z-index: 125;
-  padding: var(--space-4);
-  background: color-mix(in srgb, var(--canvas) 18%, transparent);
+  padding: var(--ui-dialog-inset);
 }
 
 .agent-switcher-panel {
-  --alto-floating-panel-background: var(--side-panel-background, var(--floating-panel));
-  --alto-floating-panel-backdrop: blur(26px) saturate(112%);
-  --alto-floating-panel-border: var(--border-soft);
   width: min(620px, 100%);
-  max-height: min(620px, calc(100dvh - 32px));
+  max-height: min(620px, calc(100dvh - 2 * var(--ui-dialog-inset)));
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  font: var(--weight-regular) var(--type-body) / var(--line-body) var(--sans);
 }
 
 .agent-switcher-search {
-  min-height: 54px;
+  min-height: calc(var(--ui-field-min-height) + 2 * var(--ui-control-gap));
+  flex: 0 0 auto;
   display: grid;
-  grid-template-columns: 18px minmax(0, 1fr) minmax(0, auto) 28px;
+  grid-template-columns: var(--ui-icon-slot) minmax(0, 1fr) minmax(0, auto) max-content;
   align-items: center;
-  gap: 9px;
-  padding: 0 12px 0 16px;
-  color: var(--muted);
-  box-shadow: inset 0 -1px 0 var(--border-soft);
+  gap: var(--ui-row-gap);
+  margin: var(--ui-panel-inset) var(--ui-panel-inset) 0;
+  padding: 0 var(--ui-field-inline-padding);
 }
+.agent-switcher-search > svg { justify-self: center; }
 
 .agent-switcher-search input {
   min-width: 0;
-  height: 42px;
+  height: var(--ui-field-min-height);
   padding: 0;
-  color: var(--text);
-  border: 0;
-  outline: 0;
-  background: transparent;
-  font: var(--weight-regular) 14px/1.5 var(--sans);
 }
 
-.agent-switcher-search input::placeholder { color: var(--composer-placeholder-ink, var(--dim)); }
-
 .agent-switcher-current-summary {
   min-width: 0;
   max-width: 190px;
   overflow: hidden;
-  color: var(--text-strong);
-  font: var(--weight-medium) var(--type-label) / var(--line-control) var(--sans);
+  color: var(--ui-text-strong);
+  font-weight: var(--ui-weight);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.agent-switcher-current-summary span { color: var(--muted); font-weight: var(--weight-regular); }
+.agent-switcher-current-summary span { color: var(--ui-text-secondary); font-weight: var(--weight-regular); }
 
 .agent-switcher-results {
-  min-height: 160px;
+  min-height: min(calc(3 * var(--ui-choice-row-min-height)), 25dvh);
   flex: 1 1 auto;
   overflow-y: auto;
-  padding: 7px;
+  padding: var(--ui-panel-inset);
   overscroll-behavior: contain;
-  scrollbar-color: color-mix(in srgb, var(--muted) 22%, transparent) transparent;
+  scrollbar-color: color-mix(in srgb, var(--ui-text-secondary) 22%, transparent) transparent;
   scrollbar-width: thin;
 }
 
 .agent-switcher-option {
+  --ui-row-min-height: var(--ui-choice-row-min-height);
   width: 100%;
-  min-height: 48px;
+  min-height: var(--ui-row-min-height);
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-columns: minmax(0, 1fr) minmax(var(--ui-icon-slot), auto);
   align-items: center;
-  gap: 12px;
-  padding: 7px 11px;
-  color: var(--text);
-  border: 0;
-  border-radius: var(--radius-row);
-  background: transparent;
+  gap: var(--ui-row-gap);
+  padding: var(--ui-row-block-padding) var(--ui-row-inline-padding);
   text-align: left;
   cursor: pointer;
 }
 
-.agent-switcher-option:hover { background: var(--floating-row-hover, var(--accent-soft)); }
-.agent-switcher-option.is-active { background: var(--floating-row-selected, var(--accent-soft)); }
-.agent-switcher-option:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: -1px; }
-.agent-switcher-option:disabled { opacity: 0.48; cursor: not-allowed; }
-.agent-switcher-option:disabled:hover { background: transparent; }
-
 .agent-switcher-option-copy {
   min-width: 0;
   display: grid;
-  gap: 2px;
+  gap: calc(var(--ui-control-gap) / 4);
 }
 
 .agent-switcher-option-copy strong,
@@ -97,19 +77,14 @@
   white-space: nowrap;
 }
 
-.agent-switcher-option-copy strong {
-  color: var(--text-strong);
-  font: var(--weight-medium) 13.5px/1.35 var(--sans);
-}
-
-.agent-switcher-option-copy span { color: var(--muted); font-size: 11.5px; }
-
 .agent-switcher-option-meta {
+  min-width: var(--ui-icon-slot);
   display: inline-flex;
   align-items: center;
-  gap: 4px;
-  color: var(--muted);
-  font-size: 11px;
+  justify-content: flex-end;
+  gap: calc(var(--ui-control-gap) / 2);
+  color: var(--ui-text-secondary);
+  font-size: var(--ui-size);
   white-space: nowrap;
 }
 
@@ -117,70 +92,53 @@
 
 .agent-switcher-footer {
   display: grid;
-  gap: 10px;
-  padding: 12px 14px 14px;
-  border-top: 1px solid var(--border-soft);
+  flex: 0 0 auto;
+  gap: var(--ui-control-gap);
+  padding: var(--ui-panel-inset);
+  border-top: 1px solid var(--ui-border);
 }
 
 .agent-switcher-reasoning {
   display: flex;
   min-width: 0;
   align-items: center;
-  gap: 10px;
+  gap: var(--ui-control-gap);
 }
 
 .agent-switcher-footer-label {
   flex: 0 0 auto;
-  color: var(--muted);
-  font: var(--weight-medium) var(--type-label) / var(--line-control) var(--sans);
+  color: var(--ui-text-secondary);
+  font-weight: var(--ui-weight);
 }
 
 .agent-switcher-efforts {
   min-width: 0;
   display: flex;
   flex-wrap: wrap;
-  gap: 5px;
+  gap: var(--ui-control-gap);
 }
 
 .agent-switcher-effort {
-  min-height: 27px;
-  padding: 3px 9px;
-  color: var(--muted);
-  border: 1px solid var(--border-soft);
-  border-radius: 999px;
-  background: transparent;
-  font: var(--weight-medium) 11.5px/1.3 var(--sans);
+  min-height: var(--ui-row-min-height);
+  padding: var(--ui-row-block-padding) var(--ui-control-inline-padding);
   cursor: pointer;
 }
-
-.agent-switcher-effort:hover { color: var(--text-strong); border-color: var(--border-strong); }
-.agent-switcher-effort[aria-pressed="true"] {
-  color: var(--accent);
-  border-color: color-mix(in srgb, var(--accent) 46%, var(--border));
-  background: var(--accent-soft);
-}
-
-.agent-switcher-effort:focus-visible {
-  outline: 2px solid var(--accent-focus);
-  outline-offset: 1px;
-}
-
-.agent-switcher-no-effort { color: var(--muted); font-size: 11.5px; }
+.agent-switcher-no-effort { color: var(--ui-text-secondary); font-size: var(--ui-size); }
 
 .agent-switcher-actions {
   display: flex;
   min-width: 0;
   align-items: center;
   justify-content: flex-end;
-  gap: 7px;
+  gap: var(--ui-control-gap);
 }
 
 .agent-switcher-note {
   min-width: 0;
   margin-right: auto;
   overflow: hidden;
-  color: var(--muted);
-  font-size: 11.5px;
+  color: var(--ui-text-secondary);
+  font-size: var(--ui-size);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -188,23 +146,23 @@
 .agent-switcher-error {
   margin: 0;
   color: var(--danger);
-  font-size: 11.5px;
+  font-size: var(--ui-size);
 }
 
 .agent-switcher-empty {
   margin: 0;
-  padding: 34px 16px;
-  color: var(--muted);
-  font-size: 12px;
+  padding: var(--ui-dialog-inset) var(--ui-panel-inset);
+  color: var(--ui-text-secondary);
+  font-size: var(--ui-size);
   text-align: center;
 }
 
 @media (max-width: 620px) {
-  .agent-switcher-layer { padding: 10px; }
-  .agent-switcher-panel { max-height: calc(100dvh - 20px); }
-  .agent-switcher-search { grid-template-columns: 18px minmax(0, 1fr) 28px; }
+  .agent-switcher-layer { padding: var(--ui-panel-inset); }
+  .agent-switcher-panel { max-height: calc(100dvh - 2 * var(--ui-panel-inset)); }
+  .agent-switcher-search { grid-template-columns: var(--ui-icon-slot) minmax(0, 1fr) max-content; }
   .agent-switcher-current-summary { display: none; }
-  .agent-switcher-reasoning { align-items: flex-start; flex-direction: column; gap: 6px; }
+  .agent-switcher-reasoning { align-items: flex-start; flex-direction: column; gap: var(--ui-control-gap); }
   .agent-switcher-actions { flex-wrap: wrap; }
   .agent-switcher-note { flex-basis: 100%; white-space: normal; }
 }
diff --git a/program/plugins/browser-workspace.css b/program/plugins/browser-workspace.css
index 3c68c9a..6590796 100644
--- a/program/plugins/browser-workspace.css
+++ b/program/plugins/browser-workspace.css
@@ -19,26 +19,27 @@
   height: var(--control-default);
   flex: 1 1 auto;
   padding: 0 12px;
-  color: var(--text);
-  border: 1px solid color-mix(in srgb, var(--border) 64%, transparent);
-  border-radius: var(--radius-pill);
+  color: var(--ui-text);
+  border: 1px solid var(--ui-field-border);
+  border-radius: var(--ui-field-radius);
   outline: none;
-  background: color-mix(in srgb, var(--panel-solid) 72%, var(--canvas));
+  background: var(--ui-field-fill);
   box-shadow: none;
   font: inherit;
   font-size: calc((var(--type-body) + var(--type-label)) / 2);
 }
 
 .browser-workspace-toolbar > input:hover {
-  border-color: color-mix(in srgb, var(--border) 70%, transparent);
+  border-color: var(--ui-field-border);
 }
 
 .browser-workspace-toolbar > input:focus {
-  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 7%, transparent);
+  border-color: var(--ui-focus);
+  outline: 2px solid var(--ui-focus);
+  outline-offset: -2px;
 }
 
-.browser-workspace-toolbar > input[aria-invalid='true'] { border-color: color-mix(in srgb, #d74a5d 52%, var(--border)); }
+.browser-workspace-toolbar > input[aria-invalid='true'] { border-color: var(--ui-danger); }
 
 .browser-workspace-toolbar .is-loading { animation: browser-loading 900ms linear infinite; }
 
@@ -73,14 +74,14 @@
   place-content: center;
   justify-items: center;
   gap: 10px;
-  color: var(--muted);
+  color: var(--ui-text-secondary);
   border: 0;
-  background: #f7f8fa;
+  background: var(--canvas);
   font: inherit;
-  font-size: 12px;
+  font-size: var(--ui-size);
 }
 
-.browser-workspace-empty svg { color: color-mix(in srgb, var(--accent) 58%, var(--muted)); stroke-width: 1.4; }
+.browser-workspace-empty svg { color: color-mix(in srgb, var(--accent) 58%, var(--ui-text-secondary)); stroke-width: 1.4; }
 
 .browser-workspace-unavailable {
   width: 100%;
@@ -90,13 +91,13 @@
   justify-items: center;
   gap: 7px;
   padding: 24px;
-  color: var(--muted);
-  background: #f7f8fa;
-  font-size: 11.5px;
+  color: var(--ui-text-secondary);
+  background: var(--canvas);
+  font-size: var(--ui-size);
   text-align: center;
 }
 
-.browser-workspace-unavailable strong { color: var(--text-strong); font-size: 13px; }
+.browser-workspace-unavailable strong { color: var(--ui-text-strong); font-size: var(--ui-size); }
 .browser-workspace-unavailable a { margin-top: 4px; color: var(--accent); }
 
 @keyframes browser-loading { to { transform: rotate(360deg); } }
diff --git a/program/plugins/chat-history.css b/program/plugins/chat-history.css
index 6daf48b..3a0d7a5 100644
--- a/program/plugins/chat-history.css
+++ b/program/plugins/chat-history.css
@@ -27,14 +27,15 @@
   min-height: var(--control-button);
   gap: var(--space-2);
   padding: var(--space-1) var(--space-3);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-row);
-  background: var(--surface-panel);
-  color: var(--text-secondary);
+  border: 1px solid var(--ui-field-border);
+  border-radius: var(--ui-field-radius);
+  background: var(--ui-field-fill);
+  color: var(--ui-text-secondary);
 }
 .chat-history-search:focus-within {
-  border-color: var(--accent-focus);
-  outline: 2px solid var(--accent-ring);
+  border-color: var(--ui-focus);
+  outline: 2px solid var(--ui-focus);
+  outline-offset: -2px;
 }
 .chat-history-search > svg { flex-shrink: 0; }
 .chat-history-search input {
@@ -45,11 +46,11 @@
   border: 0;
   outline: 0;
   background: transparent;
-  color: var(--text);
+  color: var(--ui-text);
   font-size: var(--type-body);
   line-height: var(--line-body);
 }
-.chat-history-search input::placeholder { color: var(--text-secondary); }
+.chat-history-search input::placeholder { color: var(--ui-text-secondary); }
 .chat-history-search input::-webkit-search-cancel-button { display: none; }
 .chat-history-search .alto-icon-button {
   --alto-icon-button-size: var(--control-icon);
@@ -63,7 +64,7 @@
   scrollbar-gutter: stable;
 }
 .chat-history-scroll:focus-visible {
-  outline: 1px solid var(--accent-focus);
+  outline: 1px solid var(--ui-focus);
   outline-offset: -1px;
 }
 .chat-history-content {
@@ -78,7 +79,7 @@
   flex-wrap: wrap;
   gap: var(--space-2);
   padding: 0 var(--space-3) var(--space-4);
-  color: var(--text-secondary);
+  color: var(--ui-text-secondary);
   font-size: var(--type-label);
 }
 .chat-history-day { margin-bottom: var(--space-5); }
@@ -88,7 +89,7 @@
   font-size: var(--type-label);
   font-weight: var(--weight-medium);
   line-height: var(--line-body);
-  color: var(--text);
+  color: var(--ui-text);
 }
 .chat-history-day ul { margin: 0; padding: 0; list-style: none; }
 .chat-history-row {
@@ -101,18 +102,19 @@
   gap: var(--space-3);
   padding: var(--space-2) var(--space-3);
   border: 0;
-  border-radius: var(--radius-row);
+  border-radius: var(--ui-row-radius);
   background: transparent;
   box-shadow: none;
-  color: var(--text);
+  color: var(--ui-text);
   text-align: left;
-  font-family: var(--sans);
+  font-family: var(--ui-font);
   font-size: var(--type-body);
   font-weight: var(--weight-regular);
   line-height: var(--line-body);
 }
-.chat-history-row:is(:hover, :active) { background: var(--surface-hover); }
-.chat-history-row:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: -2px; }
+.chat-history-row:hover { background: var(--ui-hover); }
+.chat-history-row:active { background: var(--ui-pressed); }
+.chat-history-row:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: -2px; }
 .chat-history-row-content { min-width: 0; flex: 1; }
 .chat-history-row-title { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
 .chat-history-row-tab {
@@ -120,7 +122,7 @@
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  color: var(--text-secondary);
+  color: var(--ui-text-secondary);
   font-size: var(--type-label);
 }
 .chat-history-row-snippet {
@@ -129,7 +131,7 @@
   -webkit-line-clamp: 2;
   overflow: hidden;
   overflow-wrap: anywhere;
-  color: var(--text-secondary);
+  color: var(--ui-text-secondary);
   font-size: var(--type-label);
   margin: var(--space-1) 0;
 }
@@ -149,7 +151,7 @@
   align-items: baseline;
   gap: var(--space-2);
   font-size: var(--type-label);
-  color: var(--text-secondary);
+  color: var(--ui-text-secondary);
 }
 .chat-history-row-detail > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
 .chat-history-row-end {
@@ -157,7 +159,7 @@
   align-items: center;
   gap: var(--space-2);
   flex-shrink: 0;
-  color: var(--text-secondary);
+  color: var(--ui-text-secondary);
   font-size: var(--type-label);
   font-variant-numeric: tabular-nums;
 }
@@ -167,7 +169,7 @@
   align-items: center;
   gap: var(--space-2);
   padding: var(--space-4) var(--space-3);
-  color: var(--text-secondary);
+  color: var(--ui-text-secondary);
   font-size: var(--type-label);
   text-align: center;
 }
diff --git a/program/plugins/diff-review-comments.tsx b/program/plugins/diff-review-comments.tsx
index 5bdedaf..fa0d4ad 100644
--- a/program/plugins/diff-review-comments.tsx
+++ b/program/plugins/diff-review-comments.tsx
@@ -16,6 +16,7 @@ import type {
   ClientUiService,
 } from '../../src/client/plugin-api.js'
 import type { DiffReviewDocument } from './diff-viewer-api.js'
+import { uiStyles } from './ui/appearance.js'
 import type {
   ClientWorkspaceLayoutService,
   WorkspacePaneTarget,
@@ -180,7 +181,7 @@ export function ReviewAnnotation({
     <article className="diff-review-comment">
       <div>
         <span>{lineLabel(comment)}</span>
-        <button type="button" aria-label="Remove review comment" title="Remove" onClick={() => remove(comment.id)}>
+        <button className={`${uiStyles.iconButton} danger`} type="button" aria-label="Remove review comment" title="Remove" onClick={() => remove(comment.id)}>
           <Trash2 size={13} strokeWidth={1.7} />
         </button>
       </div>
@@ -215,12 +216,13 @@ export function ReviewCommentComposer({
     }
   }
   return (
-    <section className="diff-review-draft">
+    <section className={`${uiStyles.panel} diff-review-draft`}>
       <div className="diff-review-draft-heading">
         <span>{draft.path}</span>
         <span>{lineLabel(range)}</span>
       </div>
       <textarea
+        className={uiStyles.field}
         ref={input}
         value={body}
         rows={3}
@@ -230,8 +232,8 @@ export function ReviewCommentComposer({
         onKeyDown={keyDown}
       />
       <div className="diff-review-draft-actions">
-        <button type="button" onClick={cancel}>Cancel</button>
-        <button className="primary" type="button" disabled={!body.trim()} onClick={() => add(body)}>Add comment</button>
+        <button className={uiStyles.button} type="button" onClick={cancel}>Cancel</button>
+        <button className={`${uiStyles.button} primary`} type="button" disabled={!body.trim()} onClick={() => add(body)}>Add comment</button>
       </div>
     </section>
   )
diff --git a/program/plugins/diff-viewer.client.tsx b/program/plugins/diff-viewer.client.tsx
index e059bff..8a8a0e7 100644
--- a/program/plugins/diff-viewer.client.tsx
+++ b/program/plugins/diff-viewer.client.tsx
@@ -1,4 +1,5 @@
 import { paneToolbarStyles } from './pane-toolbar.js'
+import { uiStyles } from './ui/appearance.js'
 import {
   ChevronDown,
   FileDiff,
@@ -404,6 +405,7 @@ function DiffViewerPane({
           title={commitsLoading ? 'Loading recent commits…' : 'Choose working tree or commit'}
         >
           <select
+            className={uiStyles.field}
             value={commitRef ?? ''}
             aria-label="Choose diff revision"
             onChange={(event) => setCommitRef(event.target.value || undefined)}
@@ -520,7 +522,7 @@ function DiffViewerPane({
             <span>{comments.length} comment{comments.length === 1 ? '' : 's'}</span>
             {sendProblem && <span className="diff-viewer-send-error">{sendProblem}</span>}
           </div>
-          <button type="button" disabled={sending} onClick={() => void send()}>
+          <button className={`${uiStyles.button} primary`} type="button" disabled={sending} onClick={() => void send()}>
             <Send size={13} strokeWidth={1.8} />
             <span>{sending ? 'Sending…' : 'Send to chat'}</span>
           </button>
@@ -659,7 +661,7 @@ function DiffReviewOverlayDialog({
     >
       <section
         ref={panel}
-        className={`${clientStyles.floatingPanel} diff-review-overlay-panel`}
+        className={`${clientStyles.floatingPanel} ${uiStyles.dialog} diff-review-overlay-panel`}
         role="dialog"
         aria-label="Review changes"
         tabIndex={-1}
diff --git a/program/plugins/diff-viewer.css b/program/plugins/diff-viewer.css
index 62b8723..595795b 100644
--- a/program/plugins/diff-viewer.css
+++ b/program/plugins/diff-viewer.css
@@ -11,12 +11,6 @@
 }
 
 .diff-review-overlay-panel {
-  --alto-floating-panel-border: color-mix(in srgb, var(--border-strong) 64%, transparent);
-  --alto-floating-panel-radius: var(--radius-panel);
-  --alto-floating-panel-background: color-mix(in srgb, var(--floating-panel) 98%, var(--canvas));
-  --alto-floating-panel-shadow:
-    var(--floating-panel-shadow),
-    0 32px 90px color-mix(in srgb, var(--bg) 24%, transparent);
   width: min(90%, 1280px);
   height: min(90%, 900px);
   min-width: min(680px, 100%);
@@ -67,9 +61,7 @@
 }
 
 .diff-viewer-body > .file-tree {
-  background: color-mix(in srgb, var(--panel-soft) 76%, transparent);
-  -webkit-backdrop-filter: blur(12px) saturate(108%);
-  backdrop-filter: blur(12px) saturate(108%);
+  background: var(--ui-surface-inset);
 }
 
 .diff-viewer-code {
@@ -117,8 +109,8 @@
   justify-content: center;
   gap: 8px;
   padding: 28px;
-  color: var(--text-muted);
-  font-size: 13px;
+  color: var(--ui-text-secondary);
+  font-size: var(--ui-size);
   text-align: center;
 }
 
@@ -135,10 +127,6 @@
   max-width: 660px;
   margin: 0 auto;
   padding: 11px;
-  border: 1px solid var(--border);
-  border-radius: 13px;
-  background: var(--panel-solid);
-  box-shadow: var(--shadow-panel);
 }
 
 .diff-review-draft-heading {
@@ -146,8 +134,8 @@
   justify-content: space-between;
   gap: 16px;
   margin: 0 1px 8px;
-  color: var(--text-muted);
-  font-size: 10.5px;
+  color: var(--ui-text-secondary);
+  font-size: var(--type-supporting);
 }
 .diff-review-draft-heading span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .diff-review-draft-heading span:last-child { flex: 0 0 auto; }
@@ -158,16 +146,9 @@
   min-height: 68px;
   resize: vertical;
   padding: 8px 9px;
-  border: 1px solid var(--border-soft);
-  border-radius: 9px;
-  outline: none;
-  color: var(--text);
-  background: var(--canvas);
-  font: inherit;
-  font-size: 12.5px;
-  line-height: 1.45;
+  font-size: var(--type-body);
+  line-height: var(--line-body);
 }
-.diff-review-draft textarea:focus { border-color: color-mix(in srgb, var(--purple, #7c3aed) 42%, var(--border)); }
 
 .diff-review-draft-actions {
   display: flex;
@@ -177,25 +158,11 @@
 }
 .diff-review-draft-actions button,
 .diff-viewer-footer button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
   gap: 6px;
+  height: auto;
+  min-height: var(--control-compact);
   padding: 5px 10px;
-  border: 1px solid var(--border-soft);
-  border-radius: 8px;
-  color: var(--text);
-  background: var(--panel-soft);
-  font-size: 11.5px;
-}
-.diff-review-draft-actions button.primary,
-.diff-viewer-footer button {
-  border-color: transparent;
-  color: white;
-  background: var(--purple, #7c3aed);
 }
-.diff-review-draft-actions button:disabled,
-.diff-viewer-footer button:disabled { opacity: .45; }
 
 .diff-viewer-footer {
   display: flex;
@@ -204,16 +171,16 @@
   justify-content: space-between;
   gap: 12px;
   padding: 0 10px 0 14px;
-  border-top: 1px solid var(--border-soft);
-  background: var(--panel-soft);
+  border-top: 1px solid var(--ui-divider);
+  background: var(--ui-surface-inset);
 }
 .diff-viewer-footer > div {
   display: flex;
   min-width: 0;
   align-items: center;
   gap: 7px;
-  color: var(--text-muted);
-  font-size: 11.5px;
+  color: var(--ui-text-secondary);
+  font-size: var(--ui-size);
 }
 .diff-viewer-send-error { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
diff --git a/program/plugins/editor-pane.css b/program/plugins/editor-pane.css
index b66dd45..2bec613 100644
--- a/program/plugins/editor-pane.css
+++ b/program/plugins/editor-pane.css
@@ -11,7 +11,7 @@
   justify-content: center;
   gap: var(--space-3);
   padding: var(--space-4);
-  color: var(--muted);
+  color: var(--ui-text-secondary);
   font-size: var(--type-label);
   text-align: center;
   overflow-wrap: anywhere;
@@ -20,7 +20,7 @@
 .editor-pane-header {
   gap: var(--space-2);
   padding-left: var(--space-3);
-  color: var(--muted);
+  color: var(--ui-text-secondary);
   font-size: var(--type-label);
 }
 
@@ -47,7 +47,7 @@
   gap: var(--space-2);
   padding: var(--space-2) var(--space-3);
   font-size: var(--type-label);
-  color: var(--muted);
+  color: var(--ui-text-secondary);
   overflow-wrap: anywhere;
 }
 
diff --git a/program/plugins/file-tree.css b/program/plugins/file-tree.css
index 558d36d..cfa02b2 100644
--- a/program/plugins/file-tree.css
+++ b/program/plugins/file-tree.css
@@ -3,9 +3,10 @@
   flex: 0 0 clamp(170px, 20%, 238px);
   min-width: 0;
   flex-direction: column;
-  border-right: 1px solid var(--border-soft);
-  color: var(--text-muted);
-  background: color-mix(in srgb, var(--panel-soft) 54%, var(--canvas));
+  border-right: 1px solid var(--ui-divider);
+  color: var(--ui-text-secondary);
+  font-family: var(--ui-font);
+  background: var(--ui-surface-inset);
 }
 
 .file-tree-search {
@@ -15,23 +16,23 @@
   gap: 6px;
   margin: 6px 7px 4px;
   padding: 0 8px;
-  border: 1px solid transparent;
-  border-radius: 8px;
-  color: var(--text-faint);
-  background: color-mix(in srgb, var(--panel-solid) 58%, transparent);
+  border: 1px solid var(--ui-field-border);
+  border-radius: var(--ui-field-radius);
+  color: var(--ui-text-secondary);
+  background: var(--ui-field-fill);
 }
-.file-tree-search:focus-within { border-color: color-mix(in srgb, var(--accent) 28%, var(--border-soft)); }
+.file-tree-search:focus-within { outline: 2px solid var(--ui-focus); outline-offset: -2px; }
 .file-tree-search input {
   min-width: 0;
   flex: 1 1 auto;
   border: 0;
   outline: 0;
-  color: var(--text);
+  color: var(--ui-text);
   background: transparent;
   font: inherit;
-  font-size: 11px;
+  font-size: var(--type-supporting);
 }
-.file-tree-search input::placeholder { color: var(--text-faint); }
+.file-tree-search input::placeholder { color: var(--ui-text-secondary); }
 
 .file-tree-rows {
   min-height: 0;
@@ -50,21 +51,23 @@
   padding: 0 7px 0 calc(7px + var(--file-tree-depth) * 12px);
   overflow: hidden;
   border: 0;
-  border-radius: 6px;
+  border-radius: var(--ui-row-radius);
   color: inherit;
   background: transparent;
   font: inherit;
-  font-size: 11.5px;
+  font-size: var(--ui-size);
   text-align: left;
 }
-.file-tree-row:hover { color: var(--text); background: color-mix(in srgb, var(--panel-solid) 72%, transparent); }
-.file-tree-row.is-active { color: var(--text); background: color-mix(in srgb, var(--accent) 10%, var(--panel-solid)); }
+.file-tree-row:hover { color: var(--ui-text); background: var(--ui-hover); }
+.file-tree-row.is-active { color: var(--ui-text); background: var(--ui-selected); }
+.file-tree-row:active { background: var(--ui-pressed); }
+.file-tree-row:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: -2px; }
 .file-tree-row > svg:first-child { flex: 0 0 auto; transition: transform 120ms ease; }
 .file-tree-row > svg:first-child.is-open { transform: rotate(90deg); }
 .file-tree-row > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.file-tree-kind { display: grid; flex: 0 0 14px; place-items: center; color: var(--text-faint); }
+.file-tree-kind { display: grid; flex: 0 0 14px; place-items: center; color: var(--ui-text-secondary); }
 .file-tree-indent { flex: 0 0 11px; }
-.file-tree-state { padding: 18px 8px; color: var(--text-faint); font-size: 11px; text-align: center; }
+.file-tree-state { padding: 18px 8px; color: var(--ui-text-secondary); font-size: var(--type-supporting); text-align: center; }
 
 @container conversation-column (max-width: 680px) {
   .file-tree { flex-basis: 164px; }
diff --git a/program/plugins/git-pane-status.client.tsx b/program/plugins/git-pane-status.client.tsx
index ea52b25..69d9166 100644
--- a/program/plugins/git-pane-status.client.tsx
+++ b/program/plugins/git-pane-status.client.tsx
@@ -1,3 +1,4 @@
+import { uiStyles } from './ui/appearance.js'
 import {
   ChevronRight,
   CircleCheck,
@@ -248,7 +249,7 @@ function GitPanePopover({
   }, [anchor, close])
 
   return createPortal(
-    <div className="git-pane-popover" style={{ left, top, width, maxHeight: Math.max(100, window.innerHeight - top - 8) }} ref={root}
+    <div className={`${uiStyles.panel} git-pane-popover`} style={{ left, top, width, maxHeight: Math.max(100, window.innerHeight - top - 8) }} ref={root}
       id={id} role="dialog" aria-label={requests ? 'Pull request details' : 'Git status'}
       onPointerEnter={hold} onPointerLeave={leave} onFocusCapture={hold}
       onBlurCapture={(event) => { if (!event.currentTarget.contains(event.relatedTarget)) leave?.() }}>
diff --git a/program/plugins/git-support.css b/program/plugins/git-support.css
index 3d6390c..dd8fa02 100644
--- a/program/plugins/git-support.css
+++ b/program/plugins/git-support.css
@@ -4,7 +4,7 @@
   gap: var(--space-1);
   margin-top: var(--space-1);
   padding: var(--space-2);
-  color: var(--text-secondary);
+  color: var(--ui-text-secondary);
   border-top: 1px solid var(--border-soft);
 }
 
@@ -25,7 +25,7 @@
 }
 
 .git-thread-menu-details svg {
-  color: var(--muted);
+  color: var(--ui-text-secondary);
   stroke-width: 1.5;
 }
 
@@ -48,18 +48,18 @@
   align-items: center;
   gap: 4px;
   padding: 0 7px;
-  color: var(--muted);
+  color: var(--ui-text-secondary);
   border: 0;
-  border-radius: var(--radius-xs, 6px);
+  border-radius: var(--ui-control-radius);
   background: transparent;
   cursor: pointer;
-  font: 500 10.5px/1 var(--sans);
+  font: var(--ui-weight) var(--ui-size)/var(--ui-line) var(--ui-font);
   white-space: nowrap;
 }
 .git-pane-button:hover,
 .git-pane-button[aria-expanded='true'] {
-  color: var(--text);
-  background: color-mix(in srgb, var(--panel-soft) 64%, transparent);
+  color: var(--ui-text);
+  background: var(--ui-hover);
 }
 .git-pane-button.is-passing svg { color: var(--success); }
 .git-pane-button.is-pending svg { color: var(--accent); }
@@ -76,15 +76,15 @@
   position: fixed;
   z-index: 520;
   box-sizing: border-box;
-  color: var(--text);
-  border: 1px solid var(--border-soft);
-  background: var(--panel-solid);
-  box-shadow: var(--shadow-popover);
+  color: var(--ui-text);
+  border: 1px solid var(--ui-border);
+  background: var(--ui-surface);
+  box-shadow: var(--ui-panel-shadow);
   width: 320px;
   max-height: min(430px, calc(100vh - 20px));
   padding: 8px;
   overflow: auto;
-  border-radius: var(--radius-md, 18px);
+  border-radius: var(--ui-panel-radius);
 }
 .git-pane-popover > header {
   display: flex;
@@ -92,20 +92,20 @@
   justify-content: space-between;
   padding: 3px 5px 8px;
 }
-.git-pane-popover > header strong { color: var(--text-strong); font-size: 11.5px; font-weight: 590; }
+.git-pane-popover > header strong { color: var(--ui-text-strong); font-size: var(--type-supporting); font-weight: var(--ui-weight); }
 .git-pane-popover > header button {
   width: 24px;
   height: 24px;
   display: grid;
   padding: 0;
   place-items: center;
-  color: var(--muted);
+  color: var(--ui-text-secondary);
   border: 0;
-  border-radius: 999px;
+  border-radius: var(--ui-control-radius);
   background: transparent;
   cursor: pointer;
 }
-.git-pane-popover > header button:hover { color: var(--text); background: var(--panel-soft); }
+.git-pane-popover > header button:hover { color: var(--ui-text); background: var(--ui-hover); }
 .git-pane-summary,
 .git-pane-files {
   display: grid;
@@ -121,17 +121,17 @@
   align-items: center;
   gap: 7px;
   padding: 5px 6px;
-  color: var(--muted);
-  border-radius: var(--radius-sm, 12px);
-  font-size: 10.5px;
+  color: var(--ui-text-secondary);
+  border-radius: var(--ui-row-radius);
+  font-size: var(--type-supporting);
   text-decoration: none;
 }
-.git-pane-summary > a:hover { color: var(--accent); background: var(--panel-soft); }
+.git-pane-summary > a:hover { color: var(--accent); background: var(--ui-hover); }
 .git-pane-summary span,
 .git-pane-files > div > span { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .git-pane-summary small,
-.git-pane-files code { flex: 0 0 auto; color: var(--muted-soft); font-size: 9px; }
-.git-pane-summary svg { flex: 0 0 auto; color: var(--muted-soft); stroke-width: 1.5; }
+.git-pane-files code { flex: 0 0 auto; color: var(--ui-text-secondary); font-size: var(--type-supporting); }
+.git-pane-summary svg { flex: 0 0 auto; color: var(--ui-text-secondary); stroke-width: 1.5; }
 .git-pane-summary .is-passing { color: var(--success); }
 .git-pane-summary .is-pending { color: var(--accent); }
 .git-pane-summary .is-failing { color: var(--danger); }
@@ -142,26 +142,26 @@
   justify-content: space-between;
   margin: 0;
   padding: 2px 6px 3px;
-  color: var(--muted-soft);
-  font-size: 9px;
-  font-weight: 560;
+  color: var(--ui-text-secondary);
+  font-size: var(--type-supporting);
+  font-weight: var(--ui-weight);
   text-transform: uppercase;
   letter-spacing: .035em;
 }
 .git-pane-files h4 span { font-variant-numeric: tabular-nums; }
-.git-pane-files > small { padding: 2px 6px; color: var(--muted-soft); font-size: 9px; }
-.git-pane-clean { padding: 9px 6px 5px; color: var(--muted-soft); border-top: 1px solid var(--border-soft); font-size: 10px; }
+.git-pane-files > small { padding: 2px 6px; color: var(--ui-text-secondary); font-size: var(--type-supporting); }
+.git-pane-clean { padding: 9px 6px 5px; color: var(--ui-text-secondary); border-top: 1px solid var(--border-soft); font-size: var(--type-supporting); }
 
 [data-theme='dark'] .git-pane-popover {
-  background: var(--panel-solid);
-  box-shadow: var(--shadow-popover);
+  background: var(--ui-surface);
+  box-shadow: var(--ui-panel-shadow);
 }
 
 .git-pane-button:focus-visible,
 .git-pane-popover a:focus-visible,
 .git-pane-popover summary:focus-visible,
 .git-pane-popover button:focus-visible {
-  outline: 2px solid var(--accent-focus);
+  outline: 2px solid var(--ui-focus);
   outline-offset: 0;
 }
 .git-pane-pr { flex: none; }
@@ -171,50 +171,50 @@
   align-items: center;
   gap: var(--space-2);
   padding: var(--space-1) var(--space-2) var(--space-2);
-  color: var(--muted);
+  color: var(--ui-text-secondary);
   font-size: var(--type-label);
 }
 .git-pane-stack-base span { min-width: 0; flex: 1; overflow-wrap: anywhere; }
-.git-pane-stack-base small { color: var(--muted-soft); }
+.git-pane-stack-base small { color: var(--ui-text-secondary); }
 .git-pane-pr-section { min-width: 0; padding: var(--space-2) 0; border-top: 1px solid var(--border-soft); }
 .git-pane-pr-row {
   display: flex;
   align-items: flex-start;
   gap: var(--space-2);
   padding: var(--space-1) var(--space-2);
-  color: var(--text);
+  color: var(--ui-text);
   border-radius: var(--radius-sm);
   text-decoration: none;
   font-size: var(--type-supporting);
 }
-.git-pane-pr-row:hover { background: var(--surface-hover); }
-.git-pane-pr-row > svg { flex: none; margin-top: var(--space-1); color: var(--muted); }
+.git-pane-pr-row:hover { background: var(--ui-hover); }
+.git-pane-pr-row > svg { flex: none; margin-top: var(--space-1); color: var(--ui-text-secondary); }
 .git-pane-pr-row > span { min-width: 0; display: grid; gap: var(--space-1); }
-.git-pane-pr-row strong { display: flex; align-items: center; gap: var(--space-2); color: var(--text-strong); font-weight: var(--weight-medium); }
-.git-pane-pr-row strong small { color: var(--muted); font-size: var(--type-label); font-weight: var(--weight-regular); text-transform: capitalize; }
+.git-pane-pr-row strong { display: flex; align-items: center; gap: var(--space-2); color: var(--ui-text-strong); font-weight: var(--weight-medium); }
+.git-pane-pr-row strong small { color: var(--ui-text-secondary); font-size: var(--type-label); font-weight: var(--weight-regular); text-transform: capitalize; }
 .git-pane-pr-row span > span { overflow-wrap: anywhere; }
 .git-pane-check-summary {
   display: flex;
   align-items: center;
   gap: var(--space-2);
   padding: var(--space-2);
-  color: var(--muted);
+  color: var(--ui-text-secondary);
   font-size: var(--type-label);
 }
 .git-pane-passing-checks > summary { border-radius: var(--radius-sm); cursor: pointer; list-style: none; }
 .git-pane-passing-checks > summary::-webkit-details-marker { display: none; }
-.git-pane-passing-checks > summary:hover { background: var(--surface-hover); }
+.git-pane-passing-checks > summary:hover { background: var(--ui-hover); }
 .git-pane-check-chevron { flex: none; margin-left: auto; }
 .git-pane-passing-checks[open] > summary .git-pane-check-chevron { transform: rotate(90deg); }
 .git-pane-popover .is-passing { color: var(--success); }
 .git-pane-popover .is-failing { color: var(--danger); }
 .git-pane-popover .is-pending { color: var(--accent); }
-.git-pane-popover .is-unknown { color: var(--muted-soft); }
+.git-pane-popover .is-unknown { color: var(--ui-text-secondary); }
 .git-pane-check-list { display: grid; gap: var(--space-1); margin: 0; padding: 0 var(--space-2); list-style: none; }
 .git-pane-check-list li { display: grid; grid-template-columns: var(--control-icon) minmax(0, 1fr) auto; align-items: center; gap: var(--space-1); font-size: var(--type-label); }
 .git-pane-check-list a,
-.git-pane-check-list span { min-width: 0; overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
+.git-pane-check-list span { min-width: 0; overflow: hidden; color: var(--ui-text); text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
 .git-pane-check-list a:hover { color: var(--accent); }
-.git-pane-check-list small { max-width: calc(var(--control-button) * 3); overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: inherit; }
+.git-pane-check-list small { max-width: calc(var(--control-button) * 3); overflow: hidden; color: var(--ui-text-secondary); text-overflow: ellipsis; white-space: nowrap; font-size: inherit; }
 .git-pane-more-checks { display: block; padding: var(--space-2); color: var(--accent); font-size: var(--type-label); text-decoration: none; }
-.git-pane-stack-more { margin: 0; padding: var(--space-2); color: var(--muted); font-size: var(--type-label); }
+.git-pane-stack-more { margin: 0; padding: var(--space-2); color: var(--ui-text-secondary); font-size: var(--type-label); }
diff --git a/program/plugins/harpoon.client.tsx b/program/plugins/harpoon.client.tsx
index 3bde3a6..abd24e4 100644
--- a/program/plugins/harpoon.client.tsx
+++ b/program/plugins/harpoon.client.tsx
@@ -40,6 +40,7 @@ import {
   threadWorkStatus,
 } from './thread-status-api.js'
 import { ConversationPaneOverlay } from './ui/conversation-overlay.js'
+import { uiStyles } from './ui/appearance.js'
 import { useStoreSelector } from './ui/store-selector.js'
 import { ThreadStatusIndicator } from './ui/thread-status.js'
 import styles from './harpoon.css'
@@ -464,12 +465,12 @@ function HarpoonSlotCard({
         onClick={() => service.openSlot(slot.index)}
         title={slot.thread?.title}
       >
-        <kbd>{slot.index + 1}</kbd>
+        <kbd className={uiStyles.key}>{slot.index + 1}</kbd>
         <span className="harpoon-slot-title">{slot.thread?.title ?? (slot.threadId ? 'Unavailable' : 'Empty')}</span>
         <ThreadStatusIndicator status={status} />
       </button>
       {slot.threadId && (
-        <button className="harpoon-remove" type="button" aria-label={`Remove slot ${slot.index + 1}`} onClick={() => service.removeSlot(slot.index)}>
+        <button className={`${uiStyles.iconButton} harpoon-remove`} type="button" aria-label={`Remove slot ${slot.index + 1}`} onClick={() => service.removeSlot(slot.index)}>
           <PinOff size={14} />
         </button>
       )}
@@ -513,7 +514,7 @@ function HarpoonCandidateList({
           return (
             <button
               id={`harpoon-candidate-${thread.id}`}
-              className={selected ? 'selected' : ''}
+              className={`${uiStyles.row}${selected ? ' selected' : ''}`}
               type="button"
               role="option"
               aria-selected={selected}
@@ -526,8 +527,8 @@ function HarpoonCandidateList({
                 {slot ?? <Circle size={8} />}
               </span>
               <span className="harpoon-candidate-copy">
-                <strong>{thread.title}</strong>
-                <small>{workspaceName(thread, projects)}</small>
+                <strong className={uiStyles.title}>{thread.title}</strong>
+                <small className={uiStyles.description}>{workspaceName(thread, projects)}</small>
               </span>
               <span className="harpoon-candidate-status">
                 <ThreadStatusIndicator status={threadWorkStatus(statusState, thread.id)} />
@@ -575,12 +576,12 @@ function HarpoonPreview({
         {thread.preview || 'This chat does not have a text preview yet.'}
       </div>
       <div className="harpoon-preview-actions">
-        <button type="button" onClick={() => service.toggleSelected()}>
+        <button className={uiStyles.button} type="button" aria-pressed={Boolean(pinned)} onClick={() => service.toggleSelected()}>
           {pinned ? <PinOff size={14} /> : <Pin size={14} />}
           {pinned ? 'Unpin' : 'Pin'}
-          <kbd>P</kbd>
+          <kbd className={uiStyles.key}>P</kbd>
         </button>
-        <button className="primary" type="button" onClick={() => service.openSelected()}>
+        <button className={`${uiStyles.button} primary`} type="button" onClick={() => service.openSelected()}>
           Open
           <ArrowUpRight size={14} />
         </button>
@@ -664,7 +665,7 @@ function HarpoonDialog({
 
   return (
     <ConversationPaneOverlay className={`${clientStyles.overlayLayer} harpoon-backdrop`} onMouseDown={close}>
-      <section ref={dialogRef} className={`${clientStyles.floatingPanel} harpoon-dialog`} role="dialog" aria-modal="true" aria-label="Harpoon" tabIndex={-1} onMouseDown={(event) => event.stopPropagation()}>
+      <section ref={dialogRef} className={`${clientStyles.floatingPanel} ${uiStyles.dialog} harpoon-dialog`} role="dialog" aria-modal="true" aria-label="Harpoon" tabIndex={-1} onMouseDown={(event) => event.stopPropagation()}>
         <header className="harpoon-dialog-header">
           <span className="harpoon-dialog-title">
             <Anchor size={16} />
@@ -674,11 +675,11 @@ function HarpoonDialog({
         </header>
         <HarpoonPanel state={state} projects={projects} service={service} statusState={statusState} />
         <footer className="harpoon-footer">
-          <span><kbd>↑</kbd><kbd>↓</kbd><kbd>J</kbd><kbd>K</kbd> Move</span>
-          <span><kbd>P</kbd> Pin</span>
-          <span><kbd>1–9</kbd> Assign</span>
-          <span><kbd>↵</kbd> Open</span>
-          <span><kbd>Esc</kbd> Close</span>
+          <span><kbd className={uiStyles.key}>↑</kbd><kbd className={uiStyles.key}>↓</kbd><kbd className={uiStyles.key}>J</kbd><kbd className={uiStyles.key}>K</kbd> Move</span>
+          <span><kbd className={uiStyles.key}>P</kbd> Pin</span>
+          <span><kbd className={uiStyles.key}>1–9</kbd> Assign</span>
+          <span><kbd className={uiStyles.key}>↵</kbd> Open</span>
+          <span><kbd className={uiStyles.key}>Esc</kbd> Close</span>
         </footer>
       </section>
     </ConversationPaneOverlay>
diff --git a/program/plugins/harpoon.css b/program/plugins/harpoon.css
index 76256ca..adc71af 100644
--- a/program/plugins/harpoon.css
+++ b/program/plugins/harpoon.css
@@ -5,50 +5,46 @@
 
 .harpoon-dialog {
   width: min(780px, 100%);
-  height: min(540px, calc(100dvh - 48px));
+  height: min(540px, calc(100dvh - 2 * var(--ui-dialog-inset)));
   display: flex;
   overflow: hidden;
   flex-direction: column;
   outline: 0;
 }
 
-.harpoon-dialog button { font: inherit; }
-
 .harpoon-dialog-header {
-  min-height: 54px;
+  min-height: var(--ui-choice-row-min-height);
   display: flex;
   flex: 0 0 auto;
   align-items: center;
   justify-content: space-between;
-  gap: 12px;
-  padding: 8px 11px 8px 16px;
-  border-bottom: 1px solid var(--pane-divider);
+  gap: var(--ui-control-gap);
+  padding: var(--ui-row-block-padding) var(--ui-dialog-inset);
+  border-bottom: 1px solid var(--ui-divider);
 }
 
 .harpoon-dialog-title {
   display: flex;
   align-items: center;
-  gap: 8px;
-  color: var(--text-strong);
+  gap: var(--ui-control-gap);
+  color: var(--ui-text-strong);
 }
 
-.harpoon-dialog-title > svg { color: var(--muted); }
+.harpoon-dialog-title > svg { color: var(--ui-text-secondary); }
 
 .harpoon-dialog-title > span {
   display: grid;
-  gap: 1px;
+  gap: calc(var(--ui-control-gap) / 4);
 }
 
-.harpoon-dialog-title strong { font-size: 12.5px; font-weight: 570; letter-spacing: -0.01em; }
-.harpoon-dialog-title small { color: var(--muted); font-size: 9.5px; font-weight: 430; }
+.harpoon-dialog-title strong { font-size: var(--ui-size); font-weight: var(--ui-weight); }
+.harpoon-dialog-title small { color: var(--ui-text-secondary); font-size: var(--type-supporting); font-weight: var(--weight-regular); }
 
 .harpoon-close {
-  --alto-icon-button-size: 30px;
-  --alto-icon-button-radius: 10px;
+  --alto-icon-button-size: var(--ui-field-min-height);
+  --alto-icon-button-radius: var(--ui-control-radius);
 }
 
-.harpoon-close:hover { color: var(--accent); background: var(--accent-soft); }
-
 .harpoon-panel-body {
   min-height: 0;
   display: grid;
@@ -62,36 +58,39 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  border-right: 1px solid var(--pane-divider);
-  background: color-mix(in srgb, var(--panel-soft) 32%, transparent);
+  border-right: 1px solid var(--ui-divider);
+  background: var(--ui-surface-inset);
 }
 
 .harpoon-browser > header {
-  min-height: 36px;
+  min-height: var(--ui-row-min-height);
   display: flex;
   flex: 0 0 auto;
   align-items: center;
   justify-content: space-between;
-  padding: 0 11px 0 13px;
-  color: var(--muted);
-  border-bottom: 1px solid color-mix(in srgb, var(--pane-divider) 72%, transparent);
+  padding: 0 var(--ui-panel-inset);
+  color: var(--ui-text-secondary);
+  border-bottom: 1px solid var(--ui-divider);
 }
 
 .harpoon-browser h2,
 .harpoon-slots-heading h3 {
   margin: 0;
-  color: var(--muted);
-  font-size: 10px;
-  font-weight: 540;
-  letter-spacing: 0.01em;
+  color: var(--ui-text-secondary);
+  font-size: var(--ui-size);
+  font-weight: var(--ui-weight);
+  letter-spacing: normal;
 }
 
 .harpoon-browser > header > span {
-  min-width: 20px;
-  padding: 2px 6px;
-  border-radius: 999px;
-  background: rgba(89, 94, 115, 0.07);
-  font-size: 9px;
+  min-width: var(--ui-icon-slot);
+  min-height: var(--ui-icon-slot);
+  display: grid;
+  place-items: center;
+  padding: 0 var(--ui-row-block-padding);
+  border-radius: var(--ui-control-radius);
+  background: var(--ui-control-fill);
+  font-size: var(--type-supporting);
   text-align: center;
 }
 
@@ -99,42 +98,35 @@
   min-height: 0;
   display: grid;
   align-content: start;
-  gap: 1px;
+  gap: calc(var(--ui-control-gap) / 4);
   overflow-y: auto;
-  padding: 6px;
+  padding: var(--ui-panel-inset);
   scrollbar-width: thin;
-  scrollbar-color: var(--border) transparent;
+  scrollbar-color: var(--ui-border) transparent;
 }
 
 .harpoon-candidates > button {
+  --ui-row-min-height: var(--ui-choice-row-min-height);
   min-width: 0;
-  min-height: 42px;
+  min-height: var(--ui-row-min-height);
   display: grid;
-  grid-template-columns: 22px minmax(0, 1fr) auto;
+  grid-template-columns: var(--ui-icon-slot) minmax(0, 1fr) minmax(var(--ui-icon-slot), auto);
   align-items: center;
-  gap: 6px;
-  padding: 4px 8px 4px 7px;
-  color: var(--text);
-  border: 0;
-  border-radius: 9px;
-  outline: 0;
-  background: transparent;
+  gap: var(--ui-row-gap);
+  padding: var(--ui-row-block-padding) var(--ui-row-inline-padding);
   text-align: left;
   cursor: default;
 }
 
-.harpoon-candidates > button:hover { background: var(--floating-row-hover, rgba(79, 85, 105, 0.055)); }
-.harpoon-candidates > button.selected { background: var(--floating-row-selected, var(--accent-soft)); }
-
 .harpoon-candidate-mark {
-  width: 20px;
-  height: 20px;
+  width: var(--ui-icon-slot);
+  height: var(--ui-icon-slot);
   display: grid;
   place-items: center;
-  color: var(--dim);
-  border-radius: 7px;
-  font-size: 9.5px;
-  font-weight: 620;
+  color: var(--ui-text-secondary);
+  border-radius: var(--ui-row-radius);
+  font-size: var(--type-supporting);
+  font-weight: var(--ui-weight);
 }
 
 .harpoon-candidate-mark.pinned {
@@ -145,7 +137,7 @@
 .harpoon-candidate-copy {
   min-width: 0;
   display: grid;
-  gap: 2px;
+  gap: calc(var(--ui-control-gap) / 4);
 }
 
 .harpoon-candidate-copy strong,
@@ -155,15 +147,13 @@
   white-space: nowrap;
 }
 
-.harpoon-candidate-copy strong { color: inherit; font-size: 11.5px; font-weight: 520; }
-.harpoon-candidate-copy small { color: var(--muted); font-size: 9.5px; font-weight: 430; }
-.harpoon-candidate-status { min-width: 16px; display: inline-flex; align-items: center; justify-content: flex-end; gap: 3px; }
+.harpoon-candidate-status { min-width: var(--ui-icon-slot); display: inline-flex; align-items: center; justify-content: flex-end; gap: calc(var(--ui-control-gap) / 2); }
 .harpoon-current-mark { color: var(--accent); }
 
 .harpoon-empty {
-  margin: 24px 12px;
-  color: var(--muted);
-  font-size: 10.5px;
+  margin: var(--ui-dialog-inset) var(--ui-panel-inset);
+  color: var(--ui-text-secondary);
+  font-size: var(--ui-size);
   text-align: center;
 }
 
@@ -172,73 +162,74 @@
   display: flex;
   flex-direction: column;
   overflow-y: auto;
-  padding: 18px 20px 17px;
+  padding: var(--ui-dialog-inset);
   scrollbar-width: thin;
-  scrollbar-color: var(--border) transparent;
+  scrollbar-color: var(--ui-border) transparent;
 }
 
 .harpoon-preview-empty {
   align-items: center;
   justify-content: center;
-  color: var(--muted);
-  font-size: 11px;
+  color: var(--ui-text-secondary);
+  font-size: var(--ui-size);
 }
 
 .harpoon-preview-header {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  gap: 14px;
+  gap: var(--ui-control-gap);
 }
+.harpoon-preview-header > div { min-width: 0; }
 
 .harpoon-preview-location {
   display: inline-flex;
   align-items: center;
-  gap: 5px;
-  color: var(--muted);
-  font-size: 9.5px;
-  font-weight: 490;
+  gap: calc(var(--ui-control-gap) / 2);
+  color: var(--ui-text-secondary);
+  font-size: var(--type-supporting);
+  font-weight: var(--weight-regular);
 }
 
 .harpoon-preview-header h2 {
-  margin: 6px 0 4px;
-  color: var(--text-strong);
-  font-size: 16.5px;
-  font-weight: 570;
-  line-height: 1.23;
-  letter-spacing: -0.015em;
+  margin: var(--ui-row-block-padding) 0 calc(var(--ui-control-gap) / 2);
+  color: var(--ui-text-strong);
+  font-size: var(--type-topbar-title);
+  font-weight: var(--ui-weight);
+  line-height: var(--ui-line);
+  letter-spacing: normal;
 }
 
-.harpoon-preview-header h2 { display: flex; align-items: center; gap: 7px; }
+.harpoon-preview-header h2 { display: flex; align-items: center; gap: var(--ui-row-gap); }
 .harpoon-preview-header h2 > span { min-width: 0; }
 
-.harpoon-preview-header time { color: var(--dim); font-size: 9.5px; }
+.harpoon-preview-header time { color: var(--ui-text-secondary); font-size: var(--type-supporting); }
 
 .harpoon-pinned-badge {
   display: inline-flex;
   flex: 0 0 auto;
   align-items: center;
-  gap: 5px;
-  padding: 4px 8px;
+  gap: calc(var(--ui-control-gap) / 2);
+  padding: calc(var(--ui-control-gap) / 2) var(--ui-control-gap);
   color: var(--accent);
-  border-radius: 999px;
+  border-radius: var(--ui-control-radius);
   background: var(--accent-soft);
-  font-size: 9px;
-  font-weight: 560;
+  font-size: var(--type-supporting);
+  font-weight: var(--ui-weight);
 }
 
 .harpoon-preview-copy {
   min-height: 128px;
   max-height: 174px;
-  margin-top: 16px;
-  padding: 13px 14px;
+  margin-top: var(--ui-panel-inset);
+  padding: var(--ui-panel-inset);
   overflow: auto;
-  color: color-mix(in srgb, var(--text) 93%, var(--muted));
-  border: 1px solid var(--border-soft);
-  border-radius: 13px;
-  background: rgba(255, 255, 255, 0.34);
-  font-size: 12px;
-  line-height: 1.58;
+  color: var(--ui-text);
+  border: 1px solid var(--ui-divider);
+  border-radius: var(--ui-row-radius);
+  background: var(--ui-surface-inset);
+  font-size: var(--ui-size);
+  line-height: var(--line-body);
   white-space: pre-wrap;
 }
 
@@ -246,71 +237,58 @@
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  gap: 8px;
-  margin-top: 9px;
+  gap: var(--ui-control-gap);
+  margin-top: var(--ui-control-gap);
 }
 
 .harpoon-preview-actions button {
-  height: 30px;
+  --alto-button-height: var(--ui-field-min-height);
+  height: var(--alto-button-height);
+  min-height: var(--alto-button-height);
   display: inline-flex;
   align-items: center;
-  gap: 6px;
-  padding: 0 10px;
-  color: var(--text);
-  border: 1px solid transparent;
-  border-radius: 9px;
-  background: var(--floating-row-hover, rgba(79, 85, 105, 0.055));
-  font-size: 10.5px;
+  gap: var(--ui-control-gap);
+  padding: 0 var(--ui-control-inline-padding);
   cursor: pointer;
 }
 
-.harpoon-preview-actions button:hover { color: var(--accent); background: var(--accent-soft); }
-
-.harpoon-preview-actions button.primary {
-  color: white;
-  border-color: transparent;
-  background: var(--accent);
-}
-
-.harpoon-preview-actions button.primary:hover { background: var(--accent); }
+.harpoon-preview-actions button[aria-pressed='true']:not(:disabled) { color: var(--ui-text-strong); background: var(--ui-selected); }
+.harpoon-preview-actions button[aria-pressed='true']:active:not(:disabled) { background: var(--ui-pressed); }
 
 .harpoon-preview-actions kbd {
-  min-width: 17px;
-  color: var(--muted);
-  border-color: transparent;
-  background: rgba(86, 91, 112, 0.07);
-  box-shadow: none;
+  min-width: var(--ui-icon-slot);
 }
 
 .harpoon-slots-heading {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 10px;
-  margin: 15px 1px 7px;
+  gap: var(--ui-control-gap);
+  margin: var(--ui-dialog-inset) 0 var(--ui-control-gap);
 }
 
-.harpoon-slots-heading span { color: var(--dim); font-size: 9px; }
+.harpoon-slots-heading span { color: var(--ui-text-secondary); font-size: var(--type-supporting); }
 
 .harpoon-slots {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 5px;
+  gap: var(--ui-control-gap);
 }
 
 .harpoon-slot-card {
   min-width: 0;
-  height: 36px;
+  height: var(--ui-row-min-height);
   display: flex;
   align-items: center;
   overflow: hidden;
-  border: 1px solid var(--border-soft);
-  border-radius: 9px;
-  background: rgba(255, 255, 255, 0.3);
+  border: 1px solid var(--ui-divider);
+  border-radius: var(--ui-row-radius);
+  background: var(--ui-surface-inset);
 }
 
-.harpoon-slot-card:hover { background: var(--floating-row-hover, rgba(79, 85, 105, 0.055)); }
-.harpoon-slot-card.active { border-color: color-mix(in srgb, var(--accent) 26%, var(--border)); background: var(--accent-soft); }
+.harpoon-slot-card:not(.empty):hover { background: var(--ui-hover); }
+.harpoon-slot-card.active { border-color: var(--ui-border); background: var(--ui-selected); }
+.harpoon-slot-card:has(> button:first-child:active:not(:disabled)) { background: var(--ui-pressed); }
 
 .harpoon-slot-card > button:first-child {
   min-width: 0;
@@ -318,89 +296,78 @@
   display: flex;
   flex: 1 1 auto;
   align-items: center;
-  gap: 7px;
-  padding: 0 4px 0 7px;
-  color: var(--text);
+  gap: var(--ui-row-gap);
+  padding: 0 0 0 var(--ui-row-inline-padding);
+  color: var(--ui-text);
   border: 0;
   background: transparent;
+  font: var(--weight-regular) var(--ui-size) / var(--ui-line) var(--ui-font);
   text-align: left;
 }
 
 .harpoon-slot-card > button:first-child:not(:disabled) { cursor: pointer; }
-.harpoon-slot-card.empty > button:first-child { color: var(--dim); }
+.harpoon-slot-card > button:first-child:disabled { opacity: .48; cursor: not-allowed; }
+.harpoon-slot-card > button:first-child:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: -2px; }
+.harpoon-slot-card.empty > button:first-child { color: var(--ui-text-secondary); }
 
 .harpoon-slot-card > button:first-child > .harpoon-slot-title {
   min-width: 0;
   flex: 1 1 auto;
   overflow: hidden;
-  font-size: 9.5px;
-  font-weight: 480;
+  font-size: var(--ui-size);
+  font-weight: var(--ui-weight);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .harpoon-dialog kbd {
-  min-width: 19px;
+  min-width: var(--ui-icon-slot);
   display: inline-grid;
   place-items: center;
-  padding: 2px 4px;
-  color: var(--text);
-  border: 1px solid var(--border-soft);
-  border-radius: 6px;
-  background: color-mix(in srgb, var(--panel-soft) 72%, transparent);
-  box-shadow: none;
-  font: 9px/1.2 var(--sans);
+  padding: calc(var(--ui-control-gap) / 4) calc(var(--ui-control-gap) / 2);
 }
 
 .harpoon-remove {
-  width: 27px;
-  height: 27px;
+  --alto-icon-button-size: var(--ui-icon-slot);
+  width: var(--ui-icon-slot);
+  height: var(--ui-icon-slot);
   display: grid;
   flex: 0 0 auto;
   place-items: center;
-  margin-right: 4px;
+  margin-right: calc(var(--ui-control-gap) / 2);
   padding: 0;
-  color: var(--dim);
-  border: 0;
-  border-radius: 7px;
-  background: transparent;
   cursor: pointer;
 }
 
-.harpoon-remove:hover { color: var(--accent); background: var(--accent-soft); }
-
 .harpoon-footer {
-  min-height: 34px;
+  min-height: var(--ui-row-min-height);
   display: flex;
   flex: 0 0 auto;
   align-items: center;
   justify-content: center;
-  gap: 15px;
-  padding: 0 16px;
-  color: var(--muted);
-  border-top: 1px solid var(--pane-divider);
-  font-size: 9.5px;
+  gap: var(--ui-control-gap);
+  padding: var(--ui-row-block-padding) var(--ui-dialog-inset);
+  color: var(--ui-text-secondary);
+  border-top: 1px solid var(--ui-divider);
+  font-size: var(--type-supporting);
 }
 
-.harpoon-footer span { display: inline-flex; align-items: center; gap: 4px; }
+.harpoon-footer span { display: inline-flex; align-items: center; gap: calc(var(--ui-control-gap) / 2); }
 
 @media (max-width: 760px) {
-  .harpoon-backdrop { padding: 12px; }
-  .harpoon-dialog { width: 100%; height: min(540px, calc(100dvh - 24px)); border-radius: 17px; }
+  .harpoon-backdrop { padding: var(--ui-panel-inset); }
+  .harpoon-dialog { width: 100%; height: min(540px, calc(100dvh - 2 * var(--ui-panel-inset))); }
 }
 
 @container harpoon-overlay (max-width: 560px) {
-  .harpoon-dialog { height: calc(100dvh - 24px); border-radius: 16px; }
-  .harpoon-panel-body { grid-template-columns: 1fr; grid-template-rows: minmax(180px, 0.72fr) minmax(310px, 1.28fr); }
-  .harpoon-browser { border-right: 0; border-bottom: 1px solid var(--pane-divider); }
-  .harpoon-preview { padding: 18px; }
-  .harpoon-preview-copy { min-height: 100px; margin-top: 13px; }
-  .harpoon-footer { gap: 10px; }
+  .harpoon-dialog { height: calc(100dvh - 2 * var(--ui-panel-inset)); }
+  .harpoon-panel-body { grid-template-columns: 1fr; grid-template-rows: minmax(0, 0.72fr) minmax(0, 1.28fr); }
+  .harpoon-browser { border-right: 0; border-bottom: 1px solid var(--ui-divider); }
+  .harpoon-preview-copy { min-height: 100px; }
   .harpoon-footer span:nth-child(3) { display: none; }
 }
 
-@media (max-width: 520px) {
+@container harpoon-overlay (max-width: 520px) {
   .harpoon-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   .harpoon-footer span:nth-child(-n + 3) { display: none; }
-  .harpoon-preview-header h2 { font-size: 16px; }
 }
diff --git a/program/plugins/hotkeys-vertical-tabs.client.ts b/program/plugins/hotkeys-vertical-tabs.client.ts
new file mode 100644
index 0000000..c17f5b3
--- /dev/null
+++ b/program/plugins/hotkeys-vertical-tabs.client.ts
@@ -0,0 +1,32 @@
+import type { Plugin } from 'cordis'
+import './vertical-tabs-api.js'
+
+const hotkeysVerticalTabs: Plugin = (ctx) => {
+  ctx.clientHotkeys.registerAction(ctx, {
+    id: 'panel.vertical-tabs.toggle',
+    label: 'Toggle vertical tabs',
+    detail: 'Collapse the side tab column to icons, or expand it again.',
+    category: 'Panels',
+    binding: { kind: 'global', key: 'b', meta: true },
+    enabled: () => ctx.clientVerticalTabs.snapshot().orientation === 'vertical',
+    run: () => ctx.clientVerticalTabs.toggleCollapsed(),
+  })
+
+  ctx.clientHotkeys.registerAction(ctx, {
+    id: 'workspace.tabs.orientation.toggle',
+    label: 'Switch tab orientation',
+    detail: 'Move workspace tabs between the top bar and the side column.',
+    category: 'Workspace',
+    binding: {
+      kind: 'leader',
+      prefix: [{ key: 'w', label: 'Workspaces' }],
+      key: 'v',
+    },
+    aliases: [{ kind: 'global', key: 'b', meta: true, shift: true }],
+    run: () => ctx.clientVerticalTabs.toggleOrientation(),
+  })
+}
+
+hotkeysVerticalTabs.inject = ['clientHotkeys', 'clientVerticalTabs']
+
+export default hotkeysVerticalTabs
diff --git a/program/plugins/hotkeys.css b/program/plugins/hotkeys.css
index 55f06bb..38a01c3 100644
--- a/program/plugins/hotkeys.css
+++ b/program/plugins/hotkeys.css
@@ -5,13 +5,11 @@
   min-height: 22px;
   place-items: center;
   padding: 3px 7px;
-  color: color-mix(in srgb, var(--muted) 92%, var(--text));
-  border: 1px solid var(--floating-panel-border);
-  border-radius: var(--radius-xs, 6px);
-  background: color-mix(in srgb, var(--panel) 90%, transparent);
-  box-shadow: var(--shadow-soft);
-  -webkit-backdrop-filter: blur(16px) saturate(112%);
-  backdrop-filter: blur(16px) saturate(112%);
+  color: var(--ui-text-secondary);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-row-radius);
+  background: var(--ui-surface);
+  box-shadow: var(--ui-panel-shadow);
   pointer-events: none;
   opacity: 0;
   animation: button-hotkey-hint-in 120ms 280ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
@@ -33,8 +31,8 @@
   border: 0;
   background: transparent;
   box-shadow: none;
-  font: 550 10px/1.2 var(--sans);
-  letter-spacing: 0.015em;
+  font: var(--weight-regular) var(--type-supporting) / var(--ui-line) var(--ui-font);
+  letter-spacing: normal;
   white-space: nowrap;
 }
 
@@ -51,11 +49,11 @@
 }
 
 .leader-hud {
-  --alto-floating-panel-background: var(--floating-panel);
-  --alto-floating-panel-border: var(--floating-panel-border);
-  --alto-floating-panel-shadow: var(--floating-panel-shadow);
-  --alto-floating-panel-radius: var(--radius-md, 18px);
-  --alto-floating-panel-backdrop: blur(20px) saturate(120%);
+  --alto-floating-panel-background: var(--ui-surface);
+  --alto-floating-panel-border: var(--ui-border);
+  --alto-floating-panel-shadow: var(--ui-panel-shadow);
+  --alto-floating-panel-radius: var(--ui-panel-radius);
+  --alto-floating-panel-backdrop: none;
   position: fixed;
   z-index: 79;
   right: 18px;
@@ -66,7 +64,8 @@
   display: grid;
   grid-template-rows: auto minmax(0, 1fr) auto;
   overflow: hidden;
-  color: var(--muted);
+  color: var(--ui-text-secondary);
+  font: var(--weight-regular) var(--ui-size) / var(--ui-line) var(--ui-font);
 }
 
 .leader-hud-header {
@@ -76,13 +75,13 @@
   justify-content: space-between;
   gap: 16px;
   padding: 9px 13px;
-  border-bottom: 1px solid var(--border-soft);
+  border-bottom: 1px solid var(--ui-divider);
 }
 
 .leader-hud-header small {
   overflow: hidden;
-  color: var(--dim);
-  font-size: 10px;
+  color: var(--ui-text-secondary);
+  font-size: var(--ui-size);
   white-space: nowrap;
   text-overflow: ellipsis;
 }
@@ -96,8 +95,8 @@
 }
 
 .leader-hud-trail > span > i {
-  color: var(--dim);
-  font: 12px/1 var(--sans);
+  color: var(--ui-text-secondary);
+  font: var(--ui-size) / 1 var(--ui-font);
   font-style: normal;
 }
 
@@ -110,7 +109,7 @@
   padding: 10px 11px;
   overflow-y: auto;
   scrollbar-width: thin;
-  scrollbar-color: var(--border) transparent;
+  scrollbar-color: var(--ui-border) transparent;
 }
 
 .leader-hud-action {
@@ -121,21 +120,21 @@
   align-items: center;
   gap: 8px;
   padding: 5px 7px;
-  border-radius: var(--radius-sm, 12px);
-  font-size: 11px;
+  border-radius: var(--ui-row-radius);
+  font-size: var(--ui-size);
 }
 
 .leader-hud-action > span {
   min-width: 0;
   overflow: hidden;
-  color: var(--text);
+  color: var(--ui-text);
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 
 .leader-hud-action.is-group { background: color-mix(in srgb, var(--accent-soft) 44%, transparent); }
-.leader-hud-action.is-group > span { color: var(--text-strong); font-weight: 550; }
-.leader-hud-action > i { color: var(--dim); font-size: 13px; font-style: normal; }
+.leader-hud-action.is-group > span { color: var(--ui-text-strong); font-weight: var(--ui-weight); }
+.leader-hud-action > i { color: var(--ui-text-secondary); font-size: var(--ui-size); font-style: normal; }
 
 .leader-hud-footer {
   min-height: 36px;
@@ -143,8 +142,8 @@
   align-items: center;
   gap: 6px;
   padding: 7px 13px;
-  border-top: 1px solid var(--border-soft);
-  font-size: 9.5px;
+  border-top: 1px solid var(--ui-divider);
+  font-size: var(--ui-size);
 }
 
 .leader-hud kbd,
@@ -153,12 +152,12 @@
   display: inline-grid;
   place-items: center;
   padding: 2px 5px;
-  color: var(--text);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  background: var(--panel-solid);
-  box-shadow: 0 1px 0 rgba(41, 44, 58, 0.08);
-  font: 10px/1.25 var(--sans);
+  color: var(--ui-text-secondary);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--radius-dense);
+  background: var(--ui-control-fill);
+  box-shadow: none;
+  font: var(--weight-regular) var(--type-supporting) / var(--ui-line) var(--ui-font);
 }
 
 .hotkeys-backdrop {
@@ -172,7 +171,7 @@
   place-items: center;
   padding: 24px;
   overflow: hidden;
-  background: rgba(42, 45, 60, 0.18);
+  background: var(--ui-scrim);
   -webkit-backdrop-filter: blur(5px);
   backdrop-filter: blur(5px);
 }
@@ -183,16 +182,17 @@
   display: flex;
   overflow: hidden;
   flex-direction: column;
-  color: var(--text);
-  border: 1px solid var(--floating-panel-border);
-  border-radius: var(--radius-lg, 24px);
-  background: var(--floating-panel);
-  box-shadow: var(--floating-panel-shadow);
+  color: var(--ui-text);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-dialog-radius);
+  background: var(--ui-surface);
+  box-shadow: var(--ui-dialog-shadow);
+  font: var(--weight-regular) var(--ui-size) / var(--ui-line) var(--ui-font);
 }
 
 .hotkeys-dialog button,
 .hotkeys-dialog select {
-  font: inherit;
+  font: var(--ui-weight) var(--ui-size) / var(--ui-line) var(--ui-font);
 }
 
 .hotkeys-dialog-header {
@@ -202,21 +202,21 @@
   justify-content: space-between;
   gap: 12px;
   padding: 9px 12px 9px 18px;
-  border-bottom: 1px solid var(--border-soft);
+  border-bottom: 1px solid var(--ui-divider);
 }
 
 .hotkeys-dialog-title {
   display: flex;
   align-items: center;
   gap: 8px;
-  color: var(--text-strong);
+  color: var(--ui-text-strong);
 }
 
-.hotkeys-dialog-title svg { color: var(--accent); }
-.hotkeys-dialog-title strong { font-size: 13px; font-weight: 620; }
+.hotkeys-dialog-title svg { color: var(--ui-action); }
+.hotkeys-dialog-title strong { font-size: var(--ui-size); font-weight: var(--ui-weight); }
 
 .hotkeys-close {
-  color: var(--muted);
+  color: var(--ui-text-secondary);
   border: 0;
   background: transparent;
   cursor: pointer;
@@ -229,32 +229,34 @@
   place-items: center;
   justify-self: end;
   padding: 0;
-  border-radius: 999px;
+  border-radius: var(--ui-control-radius);
 }
 
-.hotkeys-close:hover { color: var(--text); background: var(--panel-soft); }
+.hotkeys-close:hover:not(:disabled) { color: var(--ui-text-strong); background: var(--ui-hover); }
+.hotkeys-close:active:not(:disabled) { background: var(--ui-pressed); }
+.hotkeys-close:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
 
 .hotkeys-panel-body {
   min-height: 0;
   overflow-y: auto;
   padding: 19px;
   scrollbar-width: thin;
-  scrollbar-color: var(--border) transparent;
+  scrollbar-color: var(--ui-border) transparent;
 }
 
 .hotkeys-panel-body h2 {
   margin: 0 0 8px;
-  color: var(--muted);
-  font-size: 10.5px;
-  font-weight: 560;
-  letter-spacing: 0.01em;
+  color: var(--ui-text-secondary);
+  font-size: var(--ui-size);
+  font-weight: var(--ui-weight);
+  letter-spacing: normal;
 }
 
 .shortcut-list {
   overflow: hidden;
-  border: 1px solid var(--border-soft);
-  border-radius: var(--radius-sm, 12px);
-  background: color-mix(in srgb, var(--panel-solid) 72%, transparent);
+  border: 1px solid var(--ui-divider);
+  border-radius: var(--ui-row-radius);
+  background: var(--ui-surface-inset);
 }
 
 .shortcuts-panel { display: grid; gap: 20px; }
@@ -268,9 +270,9 @@
 
 .hotkey-leader-setting {
   padding: 13px 14px;
-  border: 1px solid var(--border-soft);
-  border-radius: var(--radius-sm, 12px);
-  background: color-mix(in srgb, var(--panel-solid) 72%, transparent);
+  border: 1px solid var(--ui-divider);
+  border-radius: var(--ui-row-radius);
+  background: var(--ui-surface-inset);
 }
 
 .hotkey-leader-setting > span,
@@ -282,27 +284,28 @@
 }
 
 .hotkey-leader-setting strong,
-.shortcut-copy strong { color: var(--text-strong); font-size: 11.5px; font-weight: 580; }
+.shortcut-copy strong { color: var(--ui-text-strong); font-size: var(--ui-size); font-weight: var(--ui-weight); }
 .hotkey-leader-setting small,
-.shortcut-copy small { color: var(--muted); font-size: 9.75px; }
+.shortcut-copy small { color: var(--ui-text-secondary); font-size: var(--ui-size); }
 
 .hotkey-leader-setting select {
   min-width: 105px;
   padding: 6px 26px 6px 9px;
-  color: var(--text);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm, 12px);
+  color: var(--ui-text);
+  border: 1px solid var(--ui-field-border);
+  border-radius: var(--ui-field-radius);
   outline: 0;
-  background-color: var(--panel-solid);
-  font-size: 11px;
+  background-color: var(--ui-field-fill);
+  font-size: var(--ui-size);
 }
+.hotkey-leader-setting select:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
 
 .shortcut-group h2 { padding-left: 2px; }
-.shortcut-row { min-height: 48px; padding: 8px 10px 8px 13px; border-bottom: 1px solid var(--border-soft); }
+.shortcut-row { min-height: 48px; padding: 8px 10px 8px 13px; border-bottom: 1px solid var(--ui-divider); }
 .shortcut-row:last-child { border-bottom: 0; }
-.shortcut-row.recording { background: var(--accent-soft); }
+.shortcut-row.recording { background: var(--ui-selected); }
 .shortcut-binding { display: flex; flex: 0 0 104px; justify-content: flex-end; gap: 4px; }
-.hotkey-unassigned { color: var(--dim); font-size: 10px; }
+.hotkey-unassigned { color: var(--ui-text-secondary); font-size: var(--ui-size); }
 
 .shortcut-row > button,
 .hotkeys-reset {
@@ -310,21 +313,25 @@
   align-items: center;
   justify-content: center;
   gap: 5px;
-  color: var(--muted);
-  border: 1px solid var(--border-soft);
-  border-radius: 999px;
-  background: var(--panel-solid);
+  color: var(--ui-text-secondary);
+  border: 1px solid transparent;
+  border-radius: var(--ui-control-radius);
+  background: var(--ui-control-fill);
+  font: var(--ui-weight) var(--ui-size) / var(--ui-line) var(--ui-font);
   cursor: pointer;
 }
 
-.shortcut-row > button { width: 76px; padding: 6px 7px; font-size: 10px; }
-.shortcut-row > button:hover,
-.hotkeys-reset:hover { color: var(--accent); border-color: var(--accent-border); }
+.shortcut-row > button { width: 76px; padding: 6px 7px; }
+.shortcut-row > button:hover:not(:disabled),
+.hotkeys-reset:hover:not(:disabled) { color: var(--ui-text-strong); background: var(--ui-hover); }
+.shortcut-row > button:active:not(:disabled),
+.hotkeys-reset:active:not(:disabled) { background: var(--ui-pressed); }
+.shortcut-row > button:focus-visible,
+.hotkeys-reset:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
 
 .hotkeys-reset {
   justify-self: start;
   padding: 7px 10px;
-  font-size: 10.5px;
 }
 
 .hotkeys-footer {
@@ -334,9 +341,9 @@
   justify-content: space-between;
   gap: 16px;
   padding: 0 16px;
-  color: var(--muted);
-  border-top: 1px solid var(--border-soft);
-  font-size: 9.5px;
+  color: var(--ui-text-secondary);
+  border-top: 1px solid var(--ui-divider);
+  font-size: var(--ui-size);
 }
 
 .hotkeys-footer span { display: inline-flex; align-items: center; gap: 5px; }
@@ -351,7 +358,7 @@
   }
   .leader-hud-grid { grid-template-columns: minmax(0, 1fr); }
   .hotkeys-backdrop { padding: 12px; }
-  .hotkeys-dialog { width: 100%; max-height: calc(100dvh - 24px); border-radius: var(--radius-lg, 24px); }
+  .hotkeys-dialog { width: 100%; max-height: calc(100dvh - 24px); }
   .shortcut-copy small { display: none; }
   .shortcut-binding { flex-basis: 78px; }
 }
diff --git a/program/plugins/interface-appearance.client.ts b/program/plugins/interface-appearance.client.ts
new file mode 100644
index 0000000..4d8c7bf
--- /dev/null
+++ b/program/plugins/interface-appearance.client.ts
@@ -0,0 +1,20 @@
+import type { BrowserPlugin } from '../../src/client/plugin-api.js'
+import tokens from './ui/appearance-tokens.css'
+import controls from './ui/controls.css'
+import surfaces from './ui/surfaces.css'
+import reviewAnnotations from './ui/review-annotations.css'
+import geometry from './ui/geometry.css'
+import focus from './ui/focus.css'
+
+const interfaceAppearance: BrowserPlugin = (ctx) => {
+  ctx.clientUi.registerStyle(ctx, 'interface-appearance-tokens', String(tokens))
+  ctx.clientUi.registerStyle(ctx, 'interface-controls', String(controls))
+  ctx.clientUi.registerStyle(ctx, 'interface-surfaces', String(surfaces))
+  ctx.clientUi.registerStyle(ctx, 'interface-review-annotations', String(reviewAnnotations))
+  ctx.clientUi.registerStyle(ctx, 'interface-geometry', String(geometry))
+  ctx.clientUi.registerStyle(ctx, 'interface-focus', String(focus))
+}
+
+interfaceAppearance.inject = ['clientUi']
+
+export default interfaceAppearance
diff --git a/program/plugins/markdown-link.tsx b/program/plugins/markdown-link.tsx
index 5cb8912..253e96b 100644
--- a/program/plugins/markdown-link.tsx
+++ b/program/plugins/markdown-link.tsx
@@ -1,6 +1,7 @@
 import { useId, useLayoutEffect, useRef, useState, type AnchorHTMLAttributes, type ReactNode } from 'react'
 import { createPortal } from 'react-dom'
 import { clientStyles } from '../../src/client/plugin-api.js'
+import { uiStyles } from './ui/appearance.js'
 
 export function MarkdownLink({
   preview,
@@ -77,7 +78,7 @@ export function MarkdownLink({
       {children}
     </a>
     {open && preview && anchorRef.current && createPortal(
-      <div ref={previewRef} id={previewId} role="tooltip" className={`${clientStyles.floatingPanel} markdown-link-preview`}>
+      <div ref={previewRef} id={previewId} role="tooltip" className={`${clientStyles.floatingPanel} ${uiStyles.tooltip} markdown-link-preview`}>
         {preview}
       </div>,
       anchorRef.current.ownerDocument.body,
diff --git a/program/plugins/markdown-selection-menu.tsx b/program/plugins/markdown-selection-menu.tsx
index bb2e349..a286165 100644
--- a/program/plugins/markdown-selection-menu.tsx
+++ b/program/plugins/markdown-selection-menu.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useLayoutEffect, useRef, useState, type ReactNode, type RefObject } from 'react'
 import { clientStyles } from '../../src/client/plugin-api.js'
+import { uiStyles } from './ui/appearance.js'
 import { selectedMarkdown, type MarkdownSelection } from './markdown-selection.js'
 
 export function MarkdownSelectionMenu({ rootRef, paneRef, scrollRef, enabled, onAdd, onEdit }: {
@@ -102,7 +103,7 @@ export function MarkdownSelectionMenu({ rootRef, paneRef, scrollRef, enabled, on
     action(current)
   }
   if (!enabled || !selection) return null
-  return <div ref={menuRef} role="toolbar" aria-label="Selected text" className={`${clientStyles.floatingPanel} markdown-selection-menu`}
+  return <div ref={menuRef} role="toolbar" aria-label="Selected text" className={`${clientStyles.floatingPanel} ${uiStyles.panel} markdown-selection-menu`}
     onPointerDown={event => event.preventDefault()} onMouseDown={event => event.preventDefault()}>
     <button type="button" className={clientStyles.button} onClick={() => act(onAdd)}>Add to chat</button>
     <button type="button" className={clientStyles.button} onClick={() => act(onEdit)}>Edit</button>
diff --git a/program/plugins/markdown-viewer.css b/program/plugins/markdown-viewer.css
index 5495ec6..6fda76f 100644
--- a/program/plugins/markdown-viewer.css
+++ b/program/plugins/markdown-viewer.css
@@ -176,15 +176,14 @@
 }
 
 .markdown-selection-menu {
-  --alto-floating-panel-radius: var(--radius-pill);
   --alto-button-height: var(--control-compact);
   --alto-button-padding: var(--space-1) var(--space-3);
-  --alto-button-radius: var(--radius-pill);
-  --alto-button-font-size: var(--type-label);
+  --alto-button-radius: var(--ui-control-radius);
+  --alto-button-font-size: var(--ui-size);
   --alto-button-border: transparent;
   --alto-button-border-hover: transparent;
   --alto-button-background: transparent;
-  --alto-button-background-hover: var(--floating-row-hover);
+  --alto-button-background-hover: var(--ui-hover);
   --alto-button-shadow: none;
   --alto-button-shadow-hover: none;
   position: absolute;
@@ -200,11 +199,6 @@
 
 .markdown-selection-menu .alto-button {
   corner-shape: var(--corner-shape-pill, round);
-  line-height: var(--line-control);
+  line-height: var(--ui-line);
   white-space: nowrap;
 }
-
-.markdown-selection-menu .alto-button:focus-visible {
-  outline: thin solid var(--accent-focus);
-  outline-offset: 0;
-}
diff --git a/program/plugins/markdown.css b/program/plugins/markdown.css
index a5692d2..62a4c56 100644
--- a/program/plugins/markdown.css
+++ b/program/plugins/markdown.css
@@ -4,7 +4,6 @@
 }
 
 .markdown-link-preview {
-  --alto-floating-panel-radius: var(--radius-pill);
   --markdown-link-preview-max-width: 440px;
   position: fixed;
   z-index: 100;
@@ -12,8 +11,6 @@
   max-width: min(var(--markdown-link-preview-max-width), calc(100vw - 2 * var(--space-4)));
   padding: calc(var(--space-1) * 1.5) var(--space-3);
   overflow: hidden;
-  color: var(--text-strong);
-  font: var(--type-supporting)/1.35 var(--sans);
   letter-spacing: 0;
   visibility: hidden;
   pointer-events: none;
diff --git a/program/plugins/mermaid.client.tsx b/program/plugins/mermaid.client.tsx
index 4d6e0c7..2d5076e 100644
--- a/program/plugins/mermaid.client.tsx
+++ b/program/plugins/mermaid.client.tsx
@@ -11,6 +11,7 @@ import {
 } from 'react'
 import { createPortal } from 'react-dom'
 import { clientStyles, type ClientOverlays } from '../../src/client/plugin-api.js'
+import { uiStyles } from './ui/appearance.js'
 import type { Mermaid, MermaidConfig, RenderResult } from 'mermaid'
 import type { Plugin } from 'cordis'
 import type { MarkdownCodeBlockProps } from './markdown-api.js'
@@ -183,7 +184,7 @@ function ExpandedDiagram({ render, id, overlays, close }: {
     <div className={`${clientStyles.overlayLayer} cordis-mermaid-overlay`} onPointerDown={(event) => {
       if (event.target === event.currentTarget) close()
     }}>
-      <section ref={dialog} className={`${clientStyles.floatingPanel} cordis-mermaid-expanded`}
+      <section ref={dialog} className={`${clientStyles.floatingPanel} ${uiStyles.dialog} cordis-mermaid-expanded`}
         role="dialog" aria-modal="true" aria-label="Expanded Mermaid diagram" data-native-overlay={id}
         onKeyDown={(event) => {
           if (event.key === 'Escape') {
@@ -305,12 +306,13 @@ export function MermaidDiagram({
       <figcaption>
         {config.showLabel !== false ? <span>Diagram</span> : <span />}
         <div className="cordis-mermaid-actions">
-          <button type="button" title="Expand diagram" aria-label="Expand diagram" disabled={!render.svg}
+          <button className={uiStyles.iconButton} type="button" title="Expand diagram" aria-label="Expand diagram" disabled={!render.svg}
             onClick={() => setExpandedHeight(stageRef.current?.getBoundingClientRect().height ?? 0)}>
             <Maximize2 size={14} />
           </button>
           {config.showCopyButton !== false && (
             <button
+              className={uiStyles.iconButton}
               type="button"
               title={copied ? 'Copied' : 'Copy diagram source'}
               aria-label={copied ? 'Copied' : 'Copy diagram source'}
diff --git a/program/plugins/mermaid.css b/program/plugins/mermaid.css
index 8a8c831..ad4e1a8 100644
--- a/program/plugins/mermaid.css
+++ b/program/plugins/mermaid.css
@@ -19,29 +19,15 @@
 }
 
 .cordis-mermaid figcaption button {
+  --alto-icon-button-size: 26px;
   width: 26px;
   height: 26px;
   display: grid;
   place-items: center;
   padding: 0;
-  color: var(--muted);
-  border: 0;
-  border-radius: 7px;
-  outline: 0;
-  background: transparent;
   cursor: pointer;
 }
 
-.cordis-mermaid figcaption button:hover,
-.cordis-mermaid figcaption button:focus-visible {
-  color: var(--text);
-  background: color-mix(in srgb, white 62%, transparent);
-}
-
-.cordis-mermaid figcaption button:focus-visible {
-  box-shadow: 0 0 0 3px var(--accent-ring);
-}
-
 .cordis-mermaid-stage {
   min-height: 116px;
   max-height: var(--mermaid-max-height);
@@ -118,7 +104,7 @@
 .cordis-mermaid-overlay {
   z-index: 140;
   padding: var(--space-3);
-  background: color-mix(in srgb, var(--canvas) 35%, transparent);
+  background: var(--ui-scrim);
 }
 
 .cordis-mermaid-expanded {
@@ -130,7 +116,6 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  --alto-floating-panel-background: var(--panel-solid);
 }
 
 .cordis-mermaid-expanded-header {
@@ -141,8 +126,8 @@
   gap: var(--space-2);
   flex: none;
   padding: var(--space-2) var(--space-3);
-  border-bottom: 1px solid var(--border-soft);
-  font: var(--weight-medium) var(--type-label) / var(--line-control) var(--sans);
+  border-bottom: 1px solid var(--ui-divider);
+  font: var(--ui-weight) var(--ui-size) / var(--ui-line) var(--ui-font);
 }
 
 .cordis-mermaid-expanded-controls {
@@ -156,7 +141,7 @@
   min-width: 5ch;
   text-align: center;
   font-variant-numeric: tabular-nums;
-  color: var(--muted);
+  color: var(--ui-text-secondary);
 }
 
 .cordis-mermaid-expanded-controls .cordis-mermaid-fit {
@@ -171,11 +156,12 @@
   overscroll-behavior: contain;
   /* Match the renderer’s light diagram palette in either application theme. */
   color-scheme: light;
+  --ui-focus: CanvasText;
   background: Canvas;
 }
 
 .cordis-mermaid-expanded-viewport:focus-visible {
-  outline: 2px solid var(--accent);
+  outline: 2px solid var(--ui-focus);
   outline-offset: -2px;
 }
 
diff --git a/program/plugins/open-in-ide.client.tsx b/program/plugins/open-in-ide.client.tsx
index 4858b4b..9955eaa 100644
--- a/program/plugins/open-in-ide.client.tsx
+++ b/program/plugins/open-in-ide.client.tsx
@@ -7,6 +7,7 @@ import type { ClientEditorService } from './editor-pane-api.js'
 import type { ClientWorkContextsService } from './work-contexts-client-api.js'
 import { IDE_OPTIONS, OPEN_IN_IDE, isIdeId, type IdeId } from './open-in-ide-api.js'
 import { SettingsRow } from './ui/settings.js'
+import { uiStyles } from './ui/appearance.js'
 import styles from './open-in-ide.css'
 
 const STORAGE_KEY = 'alto.open-in-ide'
@@ -116,7 +117,7 @@ export function OpenInIdeButton({ session, host, contexts, preference, destinati
       <SquareCode size={14} strokeWidth={1.7} />
       <span>Editor</span>
     </button>
-    {error && <div className={`${clientStyles.floatingPanel} open-in-ide-error`} role="alert">
+    {error && <div className={`${clientStyles.floatingPanel} ${uiStyles.panel} open-in-ide-error`} role="alert">
       <span>{error}</span>
       <button type="button" className={clientStyles.iconButton} aria-label="Dismiss IDE error" onClick={() => setError(undefined)}><X size={14} /></button>
     </div>}
diff --git a/program/plugins/open-in-ide.css b/program/plugins/open-in-ide.css
index 8957d89..b4f9ba4 100644
--- a/program/plugins/open-in-ide.css
+++ b/program/plugins/open-in-ide.css
@@ -15,7 +15,6 @@
   gap: var(--space-2);
   width: min(var(--overview-group-width), 65cqw);
   padding: var(--space-3);
-  font-size: var(--type-label);
 }
 
 .open-in-ide-error > span { flex: 1; min-width: 0; }
diff --git a/program/plugins/orchestrator-progress.client.tsx b/program/plugins/orchestrator-progress.client.tsx
index 429c89b..aa2a26e 100644
--- a/program/plugins/orchestrator-progress.client.tsx
+++ b/program/plugins/orchestrator-progress.client.tsx
@@ -1,6 +1,7 @@
 import { ChevronRight, ChevronUp, X } from 'lucide-react'
 import { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore, type ReactNode } from 'react'
 import { clientStyles, type ClientHostService, type ClientUiService } from '../../src/client/plugin-api.js'
+import { uiStyles } from './ui/appearance.js'
 import type { ClientSessionService } from './session-api.js'
 import type { TurnProgressAccessoryProps } from './turn-progress-api.js'
 import { taskActive, taskStatusLabel, type AgentTask } from './orchestrator-api.js'
@@ -138,13 +139,13 @@ function ChatSubagentProgress({ host, ui, controller, render, threadId }: Omit<S
       <SubagentDots tasks={active} />
       <ChevronUp className="turn-subagents-chevron" size={12} aria-hidden="true" />
     </button>,
-    details: open ? <div ref={popover} id={id} className={clientStyles.floatingPanel + ' turn-subagents-popover'} role="dialog" aria-modal={false} aria-label="Subagents in this chat">
+    details: open ? <div ref={popover} id={id} className={`${clientStyles.floatingPanel} ${uiStyles.panel} turn-subagents-popover`} role="dialog" aria-modal={false} aria-label="Subagents in this chat">
       <header><span>Subagents{active.length > 0 && <span className="turn-subagents-count">{active.length}</span>}</span>
         <button className={clientStyles.iconButton} aria-label="Close subagents" type="button" onClick={dismiss}><X size={14} /></button>
       </header>
       {!connected && <p className="turn-subagents-notice" role="status">Reconnecting…</p>}
       <div className="turn-subagents-list">
-        {displayed.map((task) => <button key={task.id} type="button" className={clientStyles.button + ' turn-subagent-row'} title={'View ' + task.title + ' history'} aria-label={task.title + ', ' + taskStatusLabel[task.status] + '. View history'} disabled={!connected} onClick={() => inspect(task)}>
+        {displayed.map((task) => <button key={task.id} type="button" className={`${uiStyles.row} turn-subagent-row`} title={'View ' + task.title + ' history'} aria-label={task.title + ', ' + taskStatusLabel[task.status] + '. View history'} disabled={!connected} onClick={() => inspect(task)}>
           <span className={'turn-subagent-dot is-' + task.status} aria-hidden="true" />
           <span className="turn-subagent-name">{task.title}</span>
           <span className="turn-subagent-status">{taskStatusLabel[task.status]}</span>
diff --git a/program/plugins/orchestrator-progress.css b/program/plugins/orchestrator-progress.css
index 9dad201..7bb1a58 100644
--- a/program/plugins/orchestrator-progress.css
+++ b/program/plugins/orchestrator-progress.css
@@ -2,19 +2,22 @@
   min-height: var(--control-compact); flex: 0 0 auto;
   display: inline-flex; align-items: center; gap: var(--space-2);
   padding: 0 var(--space-2); margin-inline: calc(-1 * var(--space-1));
-  border: 0; border-radius: var(--radius-pill);
-  background: transparent; color: var(--muted); font: inherit;
+  border: 0; border-radius: var(--ui-control-radius);
+  background: transparent; color: var(--ui-text-secondary);
+  font: var(--ui-weight) var(--ui-size) / var(--ui-line) var(--ui-font);
 }
-.turn-progress-pill .turn-subagents-trigger:hover,
-.turn-progress-pill .turn-subagents-trigger[aria-expanded="true"] { background: var(--panel-soft); color: var(--text); }
-.turn-subagents-trigger:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: -2px; }
+.turn-progress-pill .turn-subagents-trigger:hover:not(:disabled) { background: var(--ui-hover); color: var(--ui-text-strong); }
+.turn-progress-pill .turn-subagents-trigger[aria-expanded="true"]:not(:disabled) { background: var(--ui-selected); color: var(--ui-text-strong); }
+.turn-progress-pill .turn-subagents-trigger:active:not(:disabled),
+.turn-progress-pill .turn-subagents-trigger[aria-expanded="true"]:active:not(:disabled) { background: var(--ui-pressed); }
+.turn-subagents-trigger:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: -2px; }
 .turn-subagents-dots { display: inline-flex; align-items: center; gap: var(--space-1); }
-.turn-subagent-dot { display: block; flex: 0 0 auto; width: var(--space-2); height: var(--space-2); border-radius: var(--radius-pill); background: var(--muted); }
+.turn-subagent-dot { display: block; flex: 0 0 auto; width: var(--space-2); height: var(--space-2); border-radius: var(--radius-pill); background: var(--ui-text-secondary); }
 .turn-subagent-dot.is-working, .turn-subagent-dot.is-starting { background: var(--accent); animation: subagent-dot-pulse 2.4s ease-in-out infinite; }
 .turn-subagent-dot.is-waiting { background: var(--yellow); }
 .turn-subagent-dot.is-failed { background: var(--red); }
 .turn-subagent-dot.is-done { background: var(--green); }
-.turn-subagents-overflow { color: var(--text-secondary); font-size: var(--type-supporting); }
+.turn-subagents-overflow { color: var(--ui-text-secondary); font-size: var(--type-supporting); }
 .turn-subagents-chevron { flex-shrink: 0; }
 .turn-subagents-trigger[aria-expanded="true"] .turn-subagents-chevron { transform: rotate(180deg); }
 .turn-subagents-popover {
@@ -22,23 +25,21 @@
   width: min(calc(var(--control-button) * 9), calc(100vw - var(--space-3) * 2));
   max-height: min(var(--subagents-max-height, 50dvh), calc(var(--control-button) * 9));
   display: flex; flex-direction: column; overflow: hidden;
-  padding: var(--space-2); color: var(--text); font: var(--weight-regular) var(--type-body) var(--sans);
+  padding: var(--space-2);
   transform: translateX(calc(-50% + var(--subagents-shift, 0px)));
 }
-.turn-subagents-popover header { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; padding: 0 var(--space-2) var(--space-1); color: var(--text-secondary); font-size: var(--type-label); }
+.turn-subagents-popover header { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; padding: 0 var(--space-2) var(--space-1); color: var(--ui-text-secondary); font-size: var(--ui-size); }
 .turn-subagents-popover header .alto-icon-button { --alto-icon-button-size: var(--control-compact); }
 .turn-subagents-count { margin-left: var(--space-2); font-variant-numeric: tabular-nums; }
 .turn-subagents-list { min-height: 0; overflow: auto; overscroll-behavior: contain; }
 .turn-subagents-popover .turn-subagent-row {
   width: 100%; min-height: var(--control-button); display: flex; align-items: center; gap: var(--space-2);
-  padding: var(--space-2); border: 0; border-radius: var(--radius-row);
-  background: transparent; color: var(--text); font: inherit; text-align: left;
+  padding: var(--space-2); text-align: left;
 }
-.turn-subagents-popover .turn-subagent-row:hover { background: var(--floating-row-hover); }
 .turn-subagent-name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.turn-subagent-status { color: var(--text-secondary); font-size: var(--type-label); white-space: nowrap; }
-.turn-subagent-row svg { color: var(--muted); flex: 0 0 auto; }
-.turn-subagents-notice { margin: var(--space-2); color: var(--text-secondary); font-size: var(--type-label); }
+.turn-subagent-status { color: var(--ui-text-secondary); font-size: var(--ui-size); white-space: nowrap; }
+.turn-subagent-row svg { color: var(--ui-text-secondary); flex: 0 0 auto; }
+.turn-subagents-notice { margin: var(--space-2); color: var(--ui-text-secondary); font-size: var(--ui-size); }
 
 /* The three affordances share a pill, but only one owns its popup at a time. */
 .turn-progress-control:has(.turn-subagents-trigger:is(:hover, :focus-visible, [aria-expanded="true"])) .turn-progress-details,
diff --git a/program/plugins/orchestrator.css b/program/plugins/orchestrator.css
index 10bdf63..db71ce7 100644
--- a/program/plugins/orchestrator.css
+++ b/program/plugins/orchestrator.css
@@ -1,8 +1,8 @@
 :root { --agents-panel-width: calc(var(--control-button) * 12); }
 [data-ui-contribution="orchestrator-toggle"] { display: contents; }
 [data-ui-contribution="orchestrator-toggle"] > .ui-nodes { display: none; }
-.agents-toggle { color: var(--muted); position: relative; }
-.agents-toggle[aria-expanded="true"] { background: var(--panel-soft); }
+.agents-toggle { color: var(--ui-text-secondary); position: relative; }
+.agents-toggle[aria-expanded="true"] { background: var(--ui-selected); }
 .agents-toggle:has(.agents-toggle-count) {
   display: inline-flex;
   align-items: center;
@@ -13,8 +13,8 @@
   padding-inline: var(--space-2);
 }
 .agents-toggle-count {
-  color: var(--muted);
-  font-family: var(--sans);
+  color: var(--ui-text-secondary);
+  font-family: var(--ui-font);
   font-size: var(--type-supporting);
   font-weight: var(--weight-regular);
   line-height: var(--line-body);
@@ -22,76 +22,79 @@
   pointer-events: none;
 }
 .agents-panel {
-  --alto-floating-panel-background: var(--side-panel-background, var(--sidebar-material));
-  --alto-floating-panel-backdrop: var(--side-panel-backdrop, blur(26px) saturate(112%));
-  --alto-floating-panel-shadow: var(--shadow-panel);
-  --alto-floating-panel-radius: var(--radius-panel);
+  --alto-floating-panel-background: var(--ui-surface);
+  --alto-floating-panel-border: var(--ui-border);
+  --alto-floating-panel-backdrop: none;
+  --alto-floating-panel-shadow: var(--ui-panel-shadow);
+  --alto-floating-panel-radius: var(--ui-panel-radius);
   position: fixed; z-index: 70;
   top: calc(var(--agents-controls-bottom, calc(var(--control-topbar) + var(--control-pane-header))) + var(--space-2)); right: var(--space-3);
   width: calc(var(--control-button) * 12); max-width: calc(100vw - var(--space-3) * 2);
   max-height: calc(100dvh - var(--agents-controls-bottom, calc(var(--control-topbar) + var(--control-pane-header))) - var(--space-2) - var(--space-3));
   display: flex; flex-direction: column; min-height: 0; overflow: hidden;
-  font-family: var(--sans); font-size: var(--type-body); font-weight: var(--weight-regular); color: var(--text);
+  font-family: var(--ui-font); font-size: var(--ui-size); font-weight: var(--weight-regular); color: var(--ui-text);
   opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(calc(100% + var(--space-3)));
   transition: opacity 100ms ease-in 120ms, transform 230ms cubic-bezier(0.4, 0, 0.6, 1), visibility 0s linear 230ms;
 }
 .agents-panel.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity 190ms ease-out, transform 240ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s; }
 .agents-header { flex-shrink: 0; justify-content: space-between; padding: var(--space-3) var(--space-3) var(--space-2) var(--space-4); }
-.agents-heading { display: flex; align-items: baseline; gap: var(--space-2); font-weight: var(--weight-medium); }
-.agents-heading > span { font-weight: var(--weight-regular); color: var(--text-secondary); font-size: var(--type-label); }
+.agents-heading { display: flex; align-items: baseline; gap: var(--space-2); font-weight: var(--ui-weight); }
+.agents-heading > span { font-weight: var(--weight-regular); color: var(--ui-text-secondary); font-size: var(--ui-size); }
 .agents-scope { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); padding: 0 var(--space-3) var(--space-2); }
-.agents-panel .alto-button { min-height: var(--control-compact); padding: var(--space-1) var(--space-2); font: var(--weight-regular) var(--type-label) var(--sans); color: var(--text-secondary); background: transparent; border-color: transparent; }
-.agents-panel .alto-button:hover, .agents-panel .alto-button[aria-pressed="true"] { color: var(--text); background: var(--panel-soft); }
+.agents-panel .alto-button { --alto-button-background: transparent; min-height: var(--control-compact); padding: var(--space-1) var(--space-2); }
+.agents-panel .alto-button[aria-pressed="true"]:not(:disabled) { color: var(--ui-text-strong); background: var(--ui-selected); }
+.agents-panel .alto-button[aria-pressed="true"]:active:not(:disabled) { background: var(--ui-pressed); }
 .agents-stop-all { margin-left: auto; }
 .agents-scroll { flex: 0 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0 var(--space-3) var(--space-3); }
 .agents-group + .agents-group { margin-top: var(--space-4); }
-.agents-group h3 { margin: var(--space-2) var(--space-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--type-label); font-weight: var(--weight-regular); color: var(--text-secondary); }
-.agent-task { border-radius: var(--radius-row); }
+.agents-group h3 { margin: var(--space-2) var(--space-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--ui-size); font-weight: var(--weight-regular); color: var(--ui-text-secondary); }
+.agent-task { border-radius: var(--ui-row-radius); }
 .agent-task + .agent-task { margin-top: var(--space-1); }
-.agent-task[open] { background: var(--panel-soft); }
-.agent-task-summary { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-button); padding: var(--space-2); border-radius: var(--radius-row); list-style: none; cursor: pointer; }
+.agent-task[open] { background: var(--ui-selected); }
+.agent-task-summary { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-button); padding: var(--space-2); border-radius: var(--ui-row-radius); list-style: none; cursor: pointer; }
 .agent-task-summary::-webkit-details-marker { display: none; }
-.agent-task-summary:hover { background: var(--floating-row-hover); }
-.agent-task-summary:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: -2px; }
-.agent-task-title { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--type-body); }
-.agent-task-state { font-size: var(--type-label); color: var(--text-secondary); white-space: nowrap; }
-.agent-task-status, .agent-task-chevron { flex-shrink: 0; color: var(--muted); }
+.agent-task-summary:hover { background: var(--ui-hover); }
+.agent-task-summary:active { background: var(--ui-pressed); }
+.agent-task-summary:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: -2px; }
+.agent-task-title { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--ui-size); }
+.agent-task-state { font-size: var(--ui-size); color: var(--ui-text-secondary); white-space: nowrap; }
+.agent-task-status, .agent-task-chevron { flex-shrink: 0; color: var(--ui-text-secondary); }
 .agent-task-status.is-working, .agent-task-status.is-starting { color: var(--accent); }
 .agent-task-status.is-done { color: var(--green); }
 .agent-task-status.is-failed { color: var(--red); }
 .agent-task-status.is-waiting, .agent-task-status.is-unknown { color: var(--yellow); }
 .agent-task-chevron { transition: transform 120ms ease-out; }
 .agent-task[open] .agent-task-chevron { transform: rotate(180deg); }
-.agent-task-details { padding: 0 var(--space-3) var(--space-3); font-size: var(--type-label); line-height: var(--line-body); overflow-wrap: anywhere; }
+.agent-task-details { padding: 0 var(--space-3) var(--space-3); font-size: var(--ui-size); line-height: var(--line-body); overflow-wrap: anywhere; }
 .agent-task-details p { margin: var(--space-2) 0; }
-.agent-task-activity, .agent-task-meta { color: var(--text-secondary); }
+.agent-task-activity, .agent-task-meta { color: var(--ui-text-secondary); }
 .agent-task-error { color: var(--red); }
 .agent-task-assignment, .agent-task-result { white-space: pre-wrap; }
-.agent-task-result { margin-top: var(--space-3); max-height: calc(var(--control-button) * 8); overflow: auto; overscroll-behavior: contain; padding: var(--space-2); border-radius: var(--radius-row); background: var(--canvas); }
-.agent-task-paths { display: flex; flex-direction: column; color: var(--text-secondary); font-family: var(--mono); font-size: var(--type-supporting); }
+.agent-task-result { margin-top: var(--space-3); max-height: calc(var(--control-button) * 8); overflow: auto; overscroll-behavior: contain; padding: var(--space-2); border-radius: var(--ui-row-radius); background: var(--ui-surface-inset); }
+.agent-task-paths { display: flex; flex-direction: column; color: var(--ui-text-secondary); font-family: var(--mono); font-size: var(--type-supporting); }
 .agent-task-paths > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .agent-task-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
 .agent-task-actions .alto-button { display: inline-flex; align-items: center; gap: var(--space-1); }
-.agents-empty { display: flex; flex-direction: column; align-items: center; padding: var(--space-5) var(--space-3); color: var(--text-secondary); text-align: center; line-height: var(--line-body); }
-.agents-empty p { margin: var(--space-3) 0 var(--space-1); color: var(--text); }
+.agents-empty { display: flex; flex-direction: column; align-items: center; padding: var(--space-5) var(--space-3); color: var(--ui-text-secondary); text-align: center; line-height: var(--line-body); }
+.agents-empty p { margin: var(--space-3) 0 var(--space-1); color: var(--ui-text); }
 .agents-empty .alto-button { margin-top: var(--space-3); }
-.agents-notice { margin: var(--space-2) var(--space-4); font-size: var(--type-label); color: var(--text-secondary); }
+.agents-notice { margin: var(--space-2) var(--space-4); font-size: var(--ui-size); color: var(--ui-text-secondary); }
 @media (prefers-reduced-motion: reduce) { .agents-panel, .agent-task-chevron { transition: none; } }
 
 
 .agent-conversation-heading { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-1) var(--space-3); }
 .agent-conversation-heading > div { min-width: 0; }
-.agent-conversation-heading h3, .agent-conversation-heading p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; font-size: var(--type-label); font-weight: var(--weight-regular); }
-.agent-conversation-heading p { margin-top: var(--space-1); color: var(--text-secondary); }
+.agent-conversation-heading h3, .agent-conversation-heading p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; font-size: var(--ui-size); font-weight: var(--weight-regular); }
+.agent-conversation-heading p { margin-top: var(--space-1); color: var(--ui-text-secondary); }
 .agent-conversation-messages { min-width: 0; overflow-wrap: anywhere; }
-.agent-history-message { padding: var(--space-3); border-radius: var(--radius-row); }
+.agent-history-message { padding: var(--space-3); border-radius: var(--ui-row-radius); }
 .agent-history-message + .agent-history-message { margin-top: var(--space-2); }
-.agent-history-message.is-user { background: var(--panel-soft); }
-.agent-history-role { display: block; margin-bottom: var(--space-2); color: var(--text-secondary); font-size: var(--type-supporting); }
-.agent-history-message .activity-markdown { font-size: var(--type-body); line-height: var(--line-body); }
-.agent-history-message img { max-width: 100%; border-radius: var(--radius-row); }
+.agent-history-message.is-user { background: var(--ui-surface-inset); }
+.agent-history-role { display: block; margin-bottom: var(--space-2); color: var(--ui-text-secondary); font-size: var(--type-supporting); }
+.agent-history-message .activity-markdown { font-size: var(--ui-size); line-height: var(--line-body); }
+.agent-history-message img { max-width: 100%; border-radius: var(--ui-row-radius); }
 .agent-history-message pre { max-width: 100%; overflow: auto; }
-.agent-history-traces { margin: var(--space-2) 0; color: var(--text-secondary); font-size: var(--type-label); }
+.agent-history-traces { margin: var(--space-2) 0; color: var(--ui-text-secondary); font-size: var(--ui-size); }
 .agent-history-traces summary { cursor: pointer; padding: var(--space-1) 0; }
 .agent-history-trace-group > summary { display: flex; align-items: center; gap: var(--space-1); min-width: 0; list-style: none; }
 .agent-history-trace-group > summary::-webkit-details-marker { display: none; }
@@ -99,9 +102,9 @@
 .agent-history-trace-group[open] > summary::before { content: '▾'; }
 .agent-history-trace-group > summary > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .agent-history-trace-items { padding-left: var(--space-3); }
-.agent-history-traces p { white-space: pre-wrap; font-family: var(--sans); }
+.agent-history-traces p { white-space: pre-wrap; font-family: var(--ui-font); }
 .agent-history-traces pre { font-family: var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
-.agent-history-attachment { display: block; color: var(--text-secondary); font-size: var(--type-label); }
+.agent-history-attachment { display: block; color: var(--ui-text-secondary); font-size: var(--ui-size); }
 
 .agents-scroll:has(> .agent-conversation) { display: flex; overflow: hidden; }
 .agent-conversation { display: flex; flex-direction: column; min-width: 0; min-height: 0; width: 100%; }
diff --git a/program/plugins/pull-requests.client.tsx b/program/plugins/pull-requests.client.tsx
index 2317dac..4a999ba 100644
--- a/program/plugins/pull-requests.client.tsx
+++ b/program/plugins/pull-requests.client.tsx
@@ -1,3 +1,4 @@
+import { uiStyles } from './ui/appearance.js'
 import { ArrowUpRight, Check, CircleAlert, Clock3, GitPullRequest, RefreshCw, Search, Settings2, X } from 'lucide-react'
 import { memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore, type KeyboardEvent, type ReactNode } from 'react'
 import { createPortal } from 'react-dom'
@@ -180,13 +181,13 @@ function useToggleMount(ui: ClientUiService): HTMLElement | null {
   const revision = useSyncExternalStore(ui.subscribe, ui.snapshot)
   const [mount, setMount] = useState<HTMLElement | null>(null)
   useLayoutEffect(() => {
-    const sync = (): boolean => {
+    const sync = (): void => {
       const target = document.querySelector<HTMLElement>(TOGGLE_MOUNT)
       setMount((current) => current === target ? current : target)
-      return target !== null
     }
-    if (sync()) return
-    const observer = new MutationObserver(() => { if (sync()) observer.disconnect() })
+    sync()
+    // Keep observing: the toolbar can move, for example into a side tab rail.
+    const observer = new MutationObserver(sync)
     observer.observe(document.querySelector('.shell-kernel') ?? document.body, { childList: true, subtree: true })
     return () => observer.disconnect()
   }, [revision])
@@ -220,7 +221,7 @@ export function PullRequestsChrome({ host, ui }: { host: ClientHostService; ui:
     <>
       {mount && createPortal(<button ref={buttonRef} className={`${clientStyles.iconButton} icon-button shell-control pr-dashboard-toggle${open ? ' active' : ''}`} type="button" data-hotkey-action={PR_TOGGLE_ACTION} aria-label="Pull requests" title="Pull requests" aria-haspopup="dialog" aria-controls="pull-requests-panel" aria-expanded={open} onClick={() => ui.overlays.toggle(PR_PANEL)}><GitPullRequest size={15} /></button>, mount)}
       {createPortal(
-        <aside id="pull-requests-panel" ref={panelRef} className={`${clientStyles.floatingPanel} pr-dashboard-flyout${open ? ' is-open' : ''}`} role="dialog" aria-label="My pull requests" aria-modal="false" aria-hidden={!open} inert={!open}>
+        <aside id="pull-requests-panel" ref={panelRef} className={`${clientStyles.floatingPanel} ${uiStyles.panel} pr-dashboard-flyout${open ? ' is-open' : ''}`} role="dialog" aria-label="My pull requests" aria-modal="false" aria-hidden={!open} inert={!open}>
           <PullRequestsList host={host} visible={open} close={close} />
         </aside>, document.querySelector('.shell-kernel') ?? document.body,
       )}
diff --git a/program/plugins/pull-requests.css b/program/plugins/pull-requests.css
index 199e53f..4da696f 100644
--- a/program/plugins/pull-requests.css
+++ b/program/plugins/pull-requests.css
@@ -1,12 +1,14 @@
 [data-ui-contribution="pull-requests-toggle"] { display: contents; }
 [data-ui-contribution="pull-requests-toggle"] > .ui-nodes { display: none; }
-.pr-dashboard-toggle { color: var(--muted); }
-.pr-dashboard-toggle[aria-expanded="true"] { color: var(--muted); background: var(--panel-soft); }
+.pr-dashboard-toggle { color: var(--ui-text-secondary); }
+.pr-dashboard-toggle[aria-expanded="true"] { color: var(--ui-text-strong); background: var(--ui-selected); }
 
 .pr-dashboard-flyout {
-  --alto-floating-panel-background: var(--sidebar-material);
-  --alto-floating-panel-shadow: var(--shadow-panel);
-  --alto-floating-panel-radius: var(--radius-panel);
+  --alto-floating-panel-background: var(--ui-surface);
+  --alto-floating-panel-border: var(--ui-border);
+  --alto-floating-panel-backdrop: none;
+  --alto-floating-panel-shadow: var(--ui-panel-shadow);
+  --alto-floating-panel-radius: var(--ui-panel-radius);
   position: fixed;
   z-index: 70;
   top: calc(var(--control-topbar) + var(--space-2));
@@ -26,57 +28,71 @@
   transition: transform 160ms ease-out, opacity 140ms ease-out, visibility 0s linear 160ms;
 }
 .pr-dashboard-flyout.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0); transition-delay: 0s; }
-.pr-dashboard { display: flex; flex: 0 1 auto; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; container-type: inline-size; font-family: var(--sans); }
+/* When a side tab rail hosts the toolbar, open beside its footer instead. */
+html[data-workspace-tools='rail'] .pr-dashboard-flyout {
+  top: auto;
+  right: auto;
+  bottom: var(--space-3);
+  left: calc(var(--workspace-tools-rail-end) + var(--space-2));
+  max-height: min(calc(100dvh - var(--space-5)), calc(var(--control-button) * 21));
+  max-width: calc(100vw - var(--workspace-tools-rail-end) - var(--space-5));
+  transform: translateX(calc(-1 * var(--space-3)));
+}
+html[data-workspace-tools='rail'] .pr-dashboard-flyout.is-open { transform: translateX(0); }
+.pr-dashboard { display: flex; flex: 0 1 auto; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; container-type: inline-size; color: var(--ui-text); font-family: var(--ui-font); font-size: var(--ui-size); }
 .pr-dashboard-header { flex-shrink: 0; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) var(--space-3) var(--space-2) var(--space-4); }
-.pr-dashboard-heading { display: flex; min-width: 0; align-items: center; gap: var(--space-2); white-space: nowrap; color: var(--text); font-size: var(--type-body); font-weight: var(--weight-medium); }
-.pr-dashboard-total { color: var(--text-secondary); font: var(--weight-regular) var(--type-label) var(--sans); font-variant-numeric: tabular-nums; }
-.pr-dashboard-filter-summary { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1); border: 0; border-radius: var(--radius-dense); background: transparent; cursor: pointer; }
-.pr-dashboard-filter-summary > span { color: var(--muted); }
-.pr-dashboard-filter-summary:hover { background: var(--panel-soft); }
+.pr-dashboard-heading { display: flex; min-width: 0; align-items: center; gap: var(--space-2); white-space: nowrap; color: var(--ui-text); font-size: var(--ui-size); font-weight: var(--ui-weight); }
+.pr-dashboard-total { color: var(--ui-text-secondary); font: var(--weight-regular) var(--ui-size) var(--ui-font); font-variant-numeric: tabular-nums; }
+.pr-dashboard-filter-summary { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1); color: var(--ui-text); border: 0; border-radius: var(--ui-control-radius); background: transparent; font: inherit; cursor: pointer; }
+.pr-dashboard-filter-summary > span { color: var(--ui-text-secondary); }
+.pr-dashboard-filter-summary:hover { background: var(--ui-hover); }
+.pr-dashboard-filter-summary:active { background: var(--ui-pressed); }
 .pr-dashboard-buckets { display: flex; flex-shrink: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; gap: var(--space-1); padding: var(--space-1) var(--space-3) var(--space-3); }
-.pr-dashboard-bucket { display: inline-flex; flex: 1 0 auto; justify-content: center; white-space: nowrap; align-items: center; gap: var(--space-1); height: var(--control-compact); padding: 0 var(--space-1); border: 0; border-radius: var(--radius-pill); color: var(--text-secondary); background: transparent; font: var(--weight-regular) var(--type-label) var(--sans); cursor: pointer; }
-.pr-dashboard-bucket > span:last-child { color: var(--muted); font-variant-numeric: tabular-nums; }
-.pr-dashboard-bucket:hover { background: var(--floating-row-hover); }
-.pr-dashboard-bucket[aria-pressed="true"] { color: var(--text); background: var(--panel-soft); }
-.pr-dashboard-search { display: flex; flex-shrink: 0; align-items: center; min-width: 0; gap: var(--space-2); margin: var(--space-1) var(--space-3) var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-row); color: var(--muted); background: var(--panel-soft); }
-.pr-dashboard-search:focus-within { outline: 1px solid var(--border); outline-offset: -1px; }
-.pr-dashboard-search input { min-width: 0; width: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: var(--weight-regular) var(--type-label) var(--sans); }
-.pr-dashboard-search input::placeholder, .pr-dashboard-search kbd { color: var(--text-secondary); }
+.pr-dashboard-bucket { display: inline-flex; flex: 1 0 auto; justify-content: center; white-space: nowrap; align-items: center; gap: var(--space-1); height: var(--control-compact); padding: 0 var(--space-1); border: 0; border-radius: var(--ui-control-radius); color: var(--ui-text-secondary); background: transparent; font: var(--ui-weight) var(--ui-size) / var(--ui-line) var(--ui-font); cursor: pointer; }
+.pr-dashboard-bucket > span:last-child { color: var(--ui-text-secondary); font-variant-numeric: tabular-nums; }
+.pr-dashboard-bucket:hover:not(:disabled) { background: var(--ui-hover); }
+.pr-dashboard-bucket[aria-pressed="true"]:not(:disabled) { color: var(--ui-text-strong); background: var(--ui-selected); }
+.pr-dashboard-bucket:active:not(:disabled), .pr-dashboard-bucket[aria-pressed="true"]:active:not(:disabled) { background: var(--ui-pressed); }
+.pr-dashboard-search { display: flex; flex-shrink: 0; align-items: center; min-width: 0; gap: var(--space-2); margin: var(--space-1) var(--space-3) var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--ui-field-radius); outline: 1px solid var(--ui-field-border); outline-offset: -1px; color: var(--ui-text-secondary); background: var(--ui-field-fill); }
+.pr-dashboard-search:focus-within { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
+.pr-dashboard-search input { min-width: 0; width: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ui-text); font: var(--weight-regular) var(--ui-size) / var(--ui-line) var(--ui-font); }
+.pr-dashboard-search input::placeholder, .pr-dashboard-search kbd { color: var(--ui-text-secondary); }
 .pr-dashboard-search kbd { font: var(--type-supporting) var(--mono); }
 .pr-dashboard-search > svg { flex-shrink: 0; }
 .pr-dashboard-scroll { display: flex; flex-direction: column; gap: calc(var(--space-1) * 1.5); flex: 0 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0 var(--space-3) var(--space-3); }
-.pr-dashboard-row { display: flex; flex: 0 0 auto; flex-direction: column; gap: var(--space-1); min-width: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-row); background: color-mix(in srgb, var(--panel-soft) 55%, transparent); color: var(--text); text-decoration: none; }
-.pr-dashboard-row:hover { background: var(--floating-row-hover); }
-.pr-dashboard-row-meta { display: flex; align-items: center; min-width: 0; gap: var(--space-2); color: var(--text-secondary); font-size: var(--type-label); line-height: var(--line-body); }
+.pr-dashboard-row { display: flex; flex: 0 0 auto; flex-direction: column; gap: var(--space-1); min-width: 0; padding: var(--space-2) var(--space-3); border-radius: var(--ui-row-radius); background: transparent; color: var(--ui-text); text-decoration: none; }
+.pr-dashboard-row:hover { background: var(--ui-hover); }
+.pr-dashboard-row:active { background: var(--ui-pressed); }
+.pr-dashboard-row-meta { display: flex; align-items: center; min-width: 0; gap: var(--space-2); color: var(--ui-text-secondary); font-size: var(--ui-size); line-height: var(--line-body); }
 .pr-dashboard-repository { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.pr-dashboard-repository > span { color: var(--muted); }
-.pr-dashboard-row-meta > time { flex-shrink: 0; font-size: var(--type-supporting); color: var(--text-secondary); }
-.pr-dashboard-row-link { flex-shrink: 0; color: var(--muted); }
-.pr-dashboard-row:hover .pr-dashboard-row-link { color: var(--text); }
-.pr-dashboard-pr-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; font-size: var(--type-body); font-weight: var(--weight-regular); line-height: var(--line-body); }
-.pr-dashboard-row-status { display: flex; align-items: center; gap: var(--space-2); color: var(--text-secondary); font-size: var(--type-label); line-height: var(--line-body); }
+.pr-dashboard-repository > span { color: var(--ui-text-secondary); }
+.pr-dashboard-row-meta > time { flex-shrink: 0; font-size: var(--type-supporting); color: var(--ui-text-secondary); }
+.pr-dashboard-row-link { flex-shrink: 0; color: var(--ui-text-secondary); }
+.pr-dashboard-row:hover .pr-dashboard-row-link { color: var(--ui-text); }
+.pr-dashboard-pr-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; font-size: var(--ui-size); font-weight: var(--weight-regular); line-height: var(--line-body); }
+.pr-dashboard-row-status { display: flex; align-items: center; gap: var(--space-2); color: var(--ui-text-secondary); font-size: var(--ui-size); line-height: var(--line-body); }
 .pr-dashboard-row-status > svg { flex-shrink: 0; }
 .pr-dashboard-row-status.is-ready > svg { color: var(--green); }
 .pr-dashboard-row-status.is-attention > svg { color: var(--red); }
 .pr-dashboard-row-status.is-stale > svg { color: var(--yellow); }
-.pr-dashboard-row:focus-visible, .pr-dashboard-bucket:focus-visible, .pr-dashboard-filter-summary:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: -2px; }
-.pr-dashboard-notice, .pr-dashboard-empty { margin: var(--space-3); color: var(--text-secondary); font-size: var(--type-label); line-height: var(--line-body); }
+.pr-dashboard-row:focus-visible, .pr-dashboard-bucket:focus-visible, .pr-dashboard-filter-summary:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: -2px; }
+.pr-dashboard-notice, .pr-dashboard-empty { margin: var(--space-3); color: var(--ui-text-secondary); font-size: var(--ui-size); line-height: var(--line-body); }
 .pr-dashboard-empty { padding: var(--space-4) 0; text-align: center; }
-.pr-dashboard-notice { flex-shrink: 0; padding: var(--space-2); border-radius: var(--radius-row); background: var(--panel-soft); }
+.pr-dashboard-notice { flex-shrink: 0; padding: var(--space-2); border-radius: var(--ui-row-radius); background: var(--ui-surface-inset); }
 
-.pr-dashboard-settings { flex: 0 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0 var(--space-4) var(--space-4); color: var(--text); font-size: var(--type-label); }
+.pr-dashboard-settings { flex: 0 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0 var(--space-4) var(--space-4); color: var(--ui-text); font-size: var(--ui-size); }
 .pr-dashboard-settings-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
-.pr-dashboard-settings h3, .pr-dashboard-settings h4 { margin: 0; color: var(--text); font-size: var(--type-label); font-weight: var(--weight-medium); }
+.pr-dashboard-settings h3, .pr-dashboard-settings h4 { margin: 0; color: var(--ui-text); font-size: var(--ui-size); font-weight: var(--ui-weight); }
 .pr-dashboard-settings h4 { margin-top: var(--space-5); }
-.pr-dashboard-settings .alto-button { min-height: var(--control-compact); padding: var(--space-1) var(--space-3); font: var(--weight-regular) var(--type-label) var(--sans); }
+.pr-dashboard-settings .alto-button { min-height: var(--control-compact); padding: var(--space-1) var(--space-3); }
 .pr-dashboard-age { display: flex; align-items: center; gap: var(--space-2); }
-.pr-dashboard-age input { width: calc(var(--control-compact) * 2.5); min-width: 0; height: var(--control-compact); padding: 0 var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-dense); background: var(--panel-soft); color: var(--text); font: inherit; }
-.pr-dashboard-age input:focus-visible, .pr-dashboard-repo-option input:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: 2px; }
-.pr-dashboard-settings-help { margin: var(--space-2) 0 var(--space-3); color: var(--text-secondary); font-size: var(--type-label); line-height: var(--line-body); }
+.pr-dashboard-age input { width: calc(var(--control-compact) * 2.5); min-width: 0; height: var(--control-compact); padding: 0 var(--space-2); border: 1px solid var(--ui-field-border); border-radius: var(--ui-field-radius); background: var(--ui-field-fill); color: var(--ui-text); font: inherit; }
+.pr-dashboard-age input:focus-visible, .pr-dashboard-repo-option input:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
+.pr-dashboard-settings-help { margin: var(--space-2) 0 var(--space-3); color: var(--ui-text-secondary); font-size: var(--ui-size); line-height: var(--line-body); }
 .pr-dashboard-repo-search { margin-inline: 0; }
-.pr-dashboard-repo-option { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-compact); padding: var(--space-1) var(--space-2); border-radius: var(--radius-row); cursor: pointer; }
-.pr-dashboard-repo-option:hover { background: var(--floating-row-hover); }
-.pr-dashboard-repo-option input { flex-shrink: 0; margin: 0; accent-color: var(--accent); }
+.pr-dashboard-repo-option { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-compact); padding: var(--space-1) var(--space-2); border-radius: var(--ui-row-radius); cursor: pointer; }
+.pr-dashboard-repo-option:hover { background: var(--ui-hover); }
+.pr-dashboard-repo-option input { flex-shrink: 0; margin: 0; accent-color: var(--ui-action); }
 .pr-dashboard-repo-option span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .pr-dashboard-reset { margin-top: var(--space-4); }
 
diff --git a/program/plugins/recent-chats.css b/program/plugins/recent-chats.css
index 6330f25..d015da8 100644
--- a/program/plugins/recent-chats.css
+++ b/program/plugins/recent-chats.css
@@ -1,26 +1,27 @@
 .recent-chat-switcher-layer {
   z-index: 84;
+  padding: var(--ui-dialog-inset);
 }
 
 .recent-chat-switcher {
-  --alto-floating-panel-border: rgba(255, 255, 255, 0.72);
-  --alto-floating-panel-radius: var(--radius-md, 18px);
-  --alto-floating-panel-background: rgba(246, 247, 250, 0.95);
-  --alto-floating-panel-shadow: 0 22px 54px rgba(30, 33, 47, 0.2), 0 3px 10px rgba(30, 33, 47, 0.07);
+  --alto-floating-panel-border: var(--ui-border);
+  --alto-floating-panel-radius: var(--ui-panel-radius);
+  --alto-floating-panel-background: var(--ui-surface);
+  --alto-floating-panel-shadow: var(--ui-panel-shadow);
   box-sizing: border-box;
   width: min(520px, 100%);
-  max-height: min(456px, calc(100dvh - 40px));
+  max-height: min(456px, calc(100dvh - 2 * var(--ui-dialog-inset)));
   display: flex;
   flex-direction: column;
-  padding: 13px 6px 8px;
+  padding: var(--ui-panel-inset);
   overflow: hidden;
 }
 
 .recent-chat-switcher header {
-  padding: 0 9px 7px;
-  color: var(--muted);
-  font-size: 10.5px;
-  font-weight: 470;
+  padding: var(--ui-row-block-padding) var(--ui-row-inline-padding);
+  color: var(--ui-text-secondary);
+  font-size: var(--type-supporting);
+  font-weight: var(--ui-weight);
   letter-spacing: 0.005em;
 }
 
@@ -36,36 +37,37 @@
 
 .recent-chat-switcher-list button {
   min-width: 0;
-  height: 31px;
+  min-height: var(--ui-row-min-height);
   display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(0, 112px);
+  grid-template-columns: var(--ui-icon-slot) minmax(0, 1fr) minmax(0, 112px);
   align-items: center;
-  padding: 0 10px;
-  color: var(--text);
+  gap: var(--ui-row-gap);
+  padding: var(--ui-row-block-padding) var(--ui-row-inline-padding);
+  color: var(--ui-text);
   border: 0;
-  border-radius: var(--radius-sm, 12px);
+  border-radius: var(--ui-row-radius);
   outline: 0;
   background: transparent;
-  font: 12px/1.2 var(--sans);
+  font: var(--weight-regular) var(--ui-size)/var(--ui-line) var(--ui-font);
   text-align: left;
   cursor: default;
 }
 
-.recent-chat-switcher-list button.has-status {
-  grid-template-columns: 18px minmax(0, 1fr) minmax(0, 112px);
-}
-
 .recent-chat-switcher-list button.selected {
-  color: var(--text-strong);
-  background: rgba(86, 91, 113, 0.09);
+  color: var(--ui-text-strong);
+  background: var(--ui-selected);
 }
 
 .recent-chat-leading {
-  width: 18px;
-  height: 18px;
+  width: var(--ui-icon-slot);
+  height: 100%;
+  min-height: 0;
+  grid-column: 1;
+  grid-row: 1;
   display: grid;
   place-items: center;
 }
+.recent-chat-title { min-width: 0; grid-column: 2; grid-row: 1; }
 
 .recent-chat-switcher-list button .recent-chat-title,
 .recent-chat-switcher-list button small {
@@ -75,24 +77,23 @@
 }
 
 .recent-chat-switcher-list button small {
-  color: var(--dim);
-  font-size: 10.5px;
+  grid-column: 3;
+  grid-row: 1;
+  color: var(--ui-text-secondary);
+  font-size: var(--type-supporting);
   text-align: right;
 }
 
 @media (max-width: 560px) {
+  .recent-chat-switcher-layer { padding: var(--ui-panel-inset); }
   .recent-chat-switcher {
     width: 100%;
-    max-height: calc(100dvh - 40px);
-    border-radius: var(--radius-md, 18px);
+    max-height: calc(100dvh - 2 * var(--ui-panel-inset));
+    border-radius: var(--ui-panel-radius);
   }
 
   .recent-chat-switcher-list button {
-    grid-template-columns: minmax(0, 1fr);
-  }
-
-  .recent-chat-switcher-list button.has-status {
-    grid-template-columns: 18px minmax(0, 1fr);
+    grid-template-columns: var(--ui-icon-slot) minmax(0, 1fr);
   }
 
   .recent-chat-switcher-list button small { display: none; }
diff --git a/program/plugins/scheduled.client.tsx b/program/plugins/scheduled.client.tsx
index 20a85cf..46836d8 100644
--- a/program/plugins/scheduled.client.tsx
+++ b/program/plugins/scheduled.client.tsx
@@ -26,6 +26,7 @@ import type { JsonValue, LocalProject, ThreadSummary } from '../../src/shared/pr
 import type { WorkContextSnapshot } from './work-contexts-api.js'
 import type { ClientSidebarService } from './sidebar-api.js'
 import type { ClientSessionService, ClientSessionSnapshot } from './session-api.js'
+import { uiStyles } from './ui/appearance.js'
 import {
   LOCAL_SCHEDULED_TARGET,
   SCHEDULED_IMPORT,
@@ -353,7 +354,7 @@ function TaskList({
 }): ReactNode {
   return (
     <aside className="scheduled-list">
-      <button className="scheduled-new" type="button" onClick={onNew}>
+      <button className={`${uiStyles.button} ghost scheduled-new`} type="button" onClick={onNew}>
         <Plus size={15} />
         New task
       </button>
@@ -367,14 +368,15 @@ function TaskList({
         )}
         {tasks.map((task) => (
           <button
-            className={`scheduled-list-item${selectedId === task.id ? ' is-selected' : ''}`}
+            className={`${uiStyles.row} scheduled-list-item${selectedId === task.id ? ' is-selected' : ''}`}
             type="button"
+            aria-pressed={selectedId === task.id}
             key={task.id}
             onClick={() => onSelect(task)}
           >
             <span className="scheduled-list-title">
               <TargetIcon target={targetDescriptor(targets, task.target)} />
-              <strong>{task.name}</strong>
+              <strong className={uiStyles.title}>{task.name}</strong>
               <i data-status={task.enabled ? 'enabled' : 'paused'} />
             </span>
             <span>{scheduleLabel(task)}</span>
@@ -443,6 +445,7 @@ function TaskEditor({
         <label className="scheduled-field">
           <span>Name</span>
           <input
+            className={uiStyles.field}
             autoFocus
             value={draft.name}
             placeholder="Review open pull requests"
@@ -453,6 +456,7 @@ function TaskEditor({
         <label className="scheduled-field">
           <span>Instructions</span>
           <textarea
+            className={uiStyles.field}
             value={draft.prompt}
             placeholder="Tell Codex what to do each time this task runs…"
             onChange={(event) => setDraft((current) => ({ ...current, prompt: event.target.value }))}
@@ -463,6 +467,7 @@ function TaskEditor({
           <label className="scheduled-field scheduled-field-wide">
             <span>Workspace</span>
             <select
+              className={uiStyles.field}
               value={draft.projectId}
               onChange={(event) => setDraft((current) => ({ ...current, projectId: event.target.value }))}
             >
@@ -476,6 +481,7 @@ function TaskEditor({
           <label className="scheduled-field">
             <span>Run on</span>
             <select
+              className={uiStyles.field}
               value={draft.target}
               onChange={(event) => setDraft((current) => {
                 const target = event.target.value
@@ -511,6 +517,7 @@ function TaskEditor({
           <label className="scheduled-field">
             <span>Repeats</span>
             <select
+              className={uiStyles.field}
               value={draft.preset}
               onChange={(event) => setDraft((current) => ({
                 ...current,
@@ -528,6 +535,7 @@ function TaskEditor({
             <label className="scheduled-field">
               <span>Time</span>
               <input
+                className={uiStyles.field}
                 type="time"
                 value={draft.time}
                 onChange={(event) => setDraft((current) => ({ ...current, time: event.target.value }))}
@@ -539,6 +547,7 @@ function TaskEditor({
             <label className="scheduled-field">
               <span>Day</span>
               <select
+                className={uiStyles.field}
                 value={draft.weekday}
                 onChange={(event) => setDraft((current) => ({ ...current, weekday: event.target.value }))}
               >
@@ -551,7 +560,7 @@ function TaskEditor({
             <label className="scheduled-field scheduled-field-wide">
               <span>Cron expression</span>
               <input
-                className="scheduled-mono"
+                className={`${uiStyles.field} scheduled-mono`}
                 value={draft.cron}
                 placeholder="0 9 * * 1-5"
                 onChange={(event) => setDraft((current) => ({ ...current, cron: event.target.value }))}
@@ -562,6 +571,7 @@ function TaskEditor({
           <label className="scheduled-field">
             <span>Timezone</span>
             <select
+              className={uiStyles.field}
               value={draft.timezone}
               onChange={(event) => setDraft((current) => ({
                 ...current,
@@ -578,6 +588,7 @@ function TaskEditor({
             <label className="scheduled-field">
               <span>Access</span>
               <select
+                className={uiStyles.field}
                 value={draft.permissionMode}
                 onChange={(event) => setDraft((current) => ({
                   ...current,
@@ -648,7 +659,7 @@ function TaskEditor({
               </button>
               <button
                 type="button"
-                className={`${clientStyles.button} ghost scheduled-delete`}
+                className={`${clientStyles.button} ghost danger scheduled-delete`}
                 aria-label="Delete task"
                 disabled={busy}
                 onClick={onRemove}
@@ -833,7 +844,7 @@ function ScheduledDialog({
   return (
     <div className={`${clientStyles.overlayLayer} scheduled-backdrop`} onMouseDown={onClose}>
       <section
-        className={`${clientStyles.floatingPanel} scheduled-dialog`}
+        className={`${clientStyles.floatingPanel} ${uiStyles.dialog} scheduled-dialog`}
         role="dialog"
         aria-modal="true"
         aria-label="Scheduled tasks"
diff --git a/program/plugins/scheduled.css b/program/plugins/scheduled.css
index 0375d33..f322b0d 100644
--- a/program/plugins/scheduled.css
+++ b/program/plugins/scheduled.css
@@ -6,8 +6,8 @@
   border-radius: 999px;
   background: color-mix(in srgb, var(--success) 16%, transparent);
   color: var(--success);
-  font-size: 10px;
-  font-weight: 700;
+  font-size: var(--type-supporting);
+  font-weight: var(--ui-weight);
   line-height: 18px;
   text-align: center;
 }
@@ -19,7 +19,7 @@
   display: grid;
   place-items: center;
   padding: 28px;
-  background: color-mix(in srgb, #202231 28%, transparent);
+  background: var(--ui-scrim);
   backdrop-filter: blur(3px);
 }
 
@@ -30,11 +30,6 @@
   height: min(700px, calc(100vh - 56px));
   min-height: 520px;
   overflow: hidden;
-  border: 1px solid var(--border);
-  border-radius: 18px;
-  background: var(--panel-solid, var(--panel));
-  box-shadow: 0 24px 80px rgb(18 20 32 / 24%);
-  color: var(--text);
 }
 
 .scheduled-header {
@@ -43,7 +38,7 @@
   justify-content: space-between;
   min-height: 60px;
   padding: 0 18px 0 20px;
-  border-bottom: 1px solid var(--border-soft);
+  border-bottom: 1px solid var(--ui-divider);
 }
 
 .scheduled-header > div,
@@ -62,14 +57,14 @@
 
 .scheduled-header h2 {
   margin: 0;
-  color: var(--text-strong);
-  font-size: 16px;
-  font-weight: 650;
+  color: var(--ui-text-strong);
+  font-size: var(--ui-size);
+  font-weight: var(--ui-weight);
 }
 
 .scheduled-header > div > span {
-  color: var(--muted);
-  font-size: 12px;
+  color: var(--ui-text-secondary);
+  font-size: var(--type-supporting);
 }
 
 .scheduled-header-actions {
@@ -81,16 +76,18 @@
   align-items: center;
   gap: 5px;
   padding: 6px 8px;
-  border-radius: 7px;
-  color: var(--muted);
-  font-size: 11px;
+  border-radius: var(--ui-control-radius);
+  color: var(--ui-text-secondary);
+  font-size: var(--ui-size);
   text-decoration: none;
 }
 
 .scheduled-header-actions a:hover {
-  background: color-mix(in srgb, var(--text) 7%, transparent);
-  color: var(--text-strong);
+  background: var(--ui-hover);
+  color: var(--ui-text-strong);
 }
+.scheduled-header-actions a:active { background: var(--ui-pressed); }
+.scheduled-header-actions a:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
 
 .scheduled-body {
   display: grid;
@@ -104,8 +101,8 @@
   min-width: 0;
   flex-direction: column;
   padding: 12px;
-  border-right: 1px solid var(--border-soft);
-  background: color-mix(in srgb, var(--canvas) 58%, var(--panel));
+  border-right: 1px solid var(--ui-divider);
+  background: var(--ui-surface-inset);
 }
 
 .scheduled-new {
@@ -115,20 +112,9 @@
   gap: 6px;
   width: 100%;
   min-height: 34px;
-  border: 1px dashed color-mix(in srgb, var(--accent) 35%, var(--border));
-  border-radius: 9px;
-  background: color-mix(in srgb, var(--accent) 5%, transparent);
-  color: var(--accent);
-  font: inherit;
-  font-size: 12px;
-  font-weight: 600;
   cursor: pointer;
 }
 
-.scheduled-new:hover {
-  background: color-mix(in srgb, var(--accent) 10%, transparent);
-}
-
 .scheduled-list-scroll {
   min-height: 0;
   margin-top: 10px;
@@ -141,18 +127,18 @@
   flex-direction: column;
   gap: 7px;
   padding: 56px 18px;
-  color: var(--muted);
+  color: var(--ui-text-secondary);
   text-align: center;
 }
 
 .scheduled-empty strong {
-  color: var(--text-strong);
-  font-size: 12px;
+  color: var(--ui-text-strong);
+  font-size: var(--ui-size);
 }
 
 .scheduled-empty span {
-  font-size: 11px;
-  line-height: 1.45;
+  font-size: var(--type-supporting);
+  line-height: var(--line-body);
 }
 
 .scheduled-list-item {
@@ -163,28 +149,16 @@
   gap: 4px;
   margin-bottom: 4px;
   padding: 10px;
-  border: 0;
-  border-radius: 9px;
-  background: transparent;
-  color: var(--muted);
-  font: inherit;
   text-align: left;
   cursor: pointer;
 }
 
-.scheduled-list-item:hover {
-  background: color-mix(in srgb, var(--text) 5%, transparent);
-}
-
-.scheduled-list-item.is-selected {
-  background: color-mix(in srgb, var(--accent) 10%, transparent);
-}
-
 .scheduled-list-item > span,
 .scheduled-list-item > small {
   max-width: 100%;
   overflow: hidden;
-  font-size: 11px;
+  color: var(--ui-text-secondary);
+  font-size: var(--type-supporting);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -192,15 +166,13 @@
 .scheduled-list-title {
   width: 100%;
   gap: 6px;
-  color: var(--text-strong);
+  color: var(--ui-text-strong);
 }
 
 .scheduled-list-title strong {
   min-width: 0;
   flex: 1;
   overflow: hidden;
-  font-size: 12px;
-  font-weight: 600;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -209,7 +181,7 @@
   width: 7px;
   height: 7px;
   border-radius: 50%;
-  background: var(--muted);
+  background: var(--ui-text-secondary);
 }
 
 .scheduled-list-title i[data-status='enabled'] {
@@ -254,9 +226,9 @@
 }
 
 .scheduled-field > span {
-  color: var(--text-strong);
-  font-size: 11px;
-  font-weight: 600;
+  color: var(--ui-text-strong);
+  font-size: var(--ui-size);
+  font-weight: var(--ui-weight);
 }
 
 .scheduled-field input,
@@ -265,13 +237,6 @@
   width: 100%;
   min-width: 0;
   box-sizing: border-box;
-  border: 1px solid var(--border);
-  border-radius: 9px;
-  outline: none;
-  background: color-mix(in srgb, var(--canvas) 44%, var(--panel));
-  color: var(--text-strong);
-  font: inherit;
-  font-size: 12px;
 }
 
 .scheduled-field input,
@@ -287,13 +252,6 @@
   resize: vertical;
 }
 
-.scheduled-field input:focus,
-.scheduled-field select:focus,
-.scheduled-field textarea:focus {
-  border-color: color-mix(in srgb, var(--accent) 65%, var(--border));
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent);
-}
-
 /* Selects share the Settings chevron: muted, 14px, inset from the edge. */
 .scheduled-field:has(> select) {
   position: relative;
@@ -316,18 +274,18 @@
   width: calc(var(--space-3) + var(--space-1) / 2);
   height: calc(var(--space-3) + var(--space-1) / 2);
   content: '';
-  background: var(--muted);
+  background: var(--ui-text-secondary);
   pointer-events: none;
   -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
   mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
 }
 
 .scheduled-field:has(> select):focus-within::after {
-  background: var(--text);
+  background: var(--ui-text);
 }
 
 .scheduled-field input:disabled {
-  color: var(--muted);
+  color: var(--ui-text-secondary);
   cursor: not-allowed;
 }
 
@@ -355,11 +313,11 @@
   gap: 8px;
   margin-top: 18px;
   padding: 10px 11px;
-  border-radius: 9px;
-  background: color-mix(in srgb, var(--accent) 6%, transparent);
-  color: var(--muted);
-  font-size: 11px;
-  line-height: 1.45;
+  border-radius: var(--ui-row-radius);
+  background: var(--ui-surface-inset);
+  color: var(--ui-text-secondary);
+  font-size: var(--type-supporting);
+  line-height: var(--line-body);
 }
 
 .scheduled-note svg {
@@ -372,8 +330,8 @@
 .scheduled-problem {
   margin-top: 12px;
   padding: 9px 11px;
-  border-radius: 8px;
-  font-size: 11px;
+  border-radius: var(--ui-row-radius);
+  font-size: var(--type-supporting);
 }
 
 .scheduled-run-status {
@@ -381,7 +339,7 @@
   flex-direction: column;
   gap: 3px;
   background: color-mix(in srgb, var(--success) 9%, transparent);
-  color: var(--muted);
+  color: var(--ui-text-secondary);
 }
 
 .scheduled-run-status strong {
@@ -421,7 +379,7 @@
   gap: 12px;
   min-height: 62px;
   padding: 10px 24px;
-  border-top: 1px solid var(--border-soft);
+  border-top: 1px solid var(--ui-divider);
   flex-wrap: wrap;
 }
 
@@ -439,8 +397,7 @@
 }
 
 .scheduled-delete {
-  padding: 0 8px !important;
-  color: var(--danger) !important;
+  --alto-button-padding: 0 var(--space-2);
 }
 
 @media (max-width: 760px) {
@@ -481,7 +438,7 @@
   .scheduled-list {
     max-height: calc(var(--control-default) * 6 + var(--space-1));
     border-right: 0;
-    border-bottom: 1px solid var(--border-soft);
+    border-bottom: 1px solid var(--ui-divider);
   }
 
   .scheduled-editor-scroll {
diff --git a/program/plugins/search.client.tsx b/program/plugins/search.client.tsx
index c3f108a..a2de420 100644
--- a/program/plugins/search.client.tsx
+++ b/program/plugins/search.client.tsx
@@ -32,6 +32,7 @@ import {
   threadWorkStatus,
 } from './thread-status-api.js'
 import { ConversationPaneOverlay } from './ui/conversation-overlay.js'
+import { uiStyles } from './ui/appearance.js'
 import { useStoreSelector } from './ui/store-selector.js'
 import { ThreadStatusIndicator } from './ui/thread-status.js'
 import styles from './search.css'
@@ -199,15 +200,16 @@ function SearchPalette({
   return (
     <ConversationPaneOverlay className={`${clientStyles.overlayLayer} search-backdrop`} onMouseDown={onClose}>
       <section
-        className={`${clientStyles.floatingPanel} search-palette`}
+        className={`${clientStyles.floatingPanel} ${uiStyles.dialog} search-palette`}
         role="dialog"
         aria-modal="true"
         aria-label={label}
         onMouseDown={(event) => event.stopPropagation()}
       >
-        <div className="search-palette-input">
+        <div className={`${uiStyles.field} search-palette-input`}>
           <Search size={18} aria-hidden="true" />
           <input
+            className={uiStyles.input}
             ref={inputRef}
             value={query}
             aria-label={label}
@@ -220,7 +222,7 @@ function SearchPalette({
           {results.map((item, index) => (
             <button
               ref={(node) => { resultRefs.current[index] = node }}
-              className={`search-result ${index === activeIndex ? 'active' : ''}`}
+              className={`${uiStyles.row} search-result ${index === activeIndex ? 'active' : ''}`}
               type="button"
               role="option"
               aria-selected={index === activeIndex}
@@ -230,8 +232,8 @@ function SearchPalette({
               key={item.id}
             >
               <span className="search-result-copy">
-                <strong>{item.label}</strong>
-                {item.preview ?? (item.detail && <span>{item.detail}</span>)}
+                <strong className={uiStyles.title}>{item.label}</strong>
+                {(item.preview || item.detail) && <span className={uiStyles.description}>{item.preview ?? item.detail}</span>}
               </span>
               <span className="search-result-meta">
                 <ThreadStatusIndicator status={item.status} />
diff --git a/program/plugins/search.css b/program/plugins/search.css
index f1f6d35..2953366 100644
--- a/program/plugins/search.css
+++ b/program/plugins/search.css
@@ -3,52 +3,46 @@
 }
 
 .search-palette {
-  --alto-floating-panel-background: var(--composer-surface);
-  --alto-floating-panel-border: var(--border);
-  --alto-floating-panel-radius: var(--radius-composer-card);
-  --alto-floating-panel-shadow: var(--shadow-chat);
-  --alto-floating-panel-backdrop: none;
   width: min(620px, 100%);
-  max-height: min(560px, calc(100dvh - 48px));
+  max-height: min(560px, calc(100dvh - 2 * var(--ui-dialog-inset)));
   display: flex;
   flex-direction: column;
   overflow: hidden;
 }
 
 .search-palette-input {
-  min-height: 58px;
+  min-height: calc(var(--ui-field-min-height) + 2 * var(--ui-control-gap));
+  flex: 0 0 auto;
   display: grid;
-  grid-template-columns: 18px minmax(0, 1fr);
+  grid-template-columns: var(--ui-icon-slot) minmax(0, 1fr);
   align-items: center;
-  gap: 12px;
-  padding: 0 18px;
-  color: var(--muted);
-  border-bottom: 1px solid color-mix(in srgb, var(--border) 58%, transparent);
+  gap: var(--ui-row-gap);
+  margin: var(--ui-panel-inset) var(--ui-panel-inset) 0;
+  padding: 0 var(--ui-field-inline-padding);
 }
+.search-palette-input > svg { justify-self: center; }
 
 .search-palette-input input {
   min-width: 0;
   height: 100%;
   padding: 0;
-  color: var(--text);
-  border: 0;
-  outline: 0;
-  background: transparent;
-  font: 400 15px/1.5 var(--sans);
-  letter-spacing: normal;
 }
 
-.search-palette-input input::placeholder {
-  color: var(--composer-placeholder-ink);
+/* The active palette and text caret identify the focused search field. Keep
+   its edge neutral; result rows retain their keyboard focus treatment. */
+.search-palette-input:focus-within {
+  border-color: var(--ui-field-border);
+  outline: none;
+  box-shadow: none;
 }
 
 .search-results {
   flex: 1 1 auto;
   min-height: 0;
   overflow-y: auto;
-  padding: 8px;
+  padding: var(--ui-panel-inset);
   overscroll-behavior: contain;
-  scrollbar-color: color-mix(in srgb, var(--muted) 22%, transparent) transparent;
+  scrollbar-color: color-mix(in srgb, var(--ui-text-secondary) 22%, transparent) transparent;
   scrollbar-width: thin;
 }
 
@@ -58,49 +52,37 @@
 
 .search-results::-webkit-scrollbar-thumb {
   border: 2px solid transparent;
-  border-radius: var(--radius-dense);
-  background: color-mix(in srgb, var(--muted) 22%, transparent);
+  border-radius: var(--ui-row-radius);
+  background: color-mix(in srgb, var(--ui-text-secondary) 22%, transparent);
   background-clip: padding-box;
 }
 
 .search-results::-webkit-scrollbar-thumb:hover {
-  background: color-mix(in srgb, var(--muted) 40%, transparent);
+  background: color-mix(in srgb, var(--ui-text-secondary) 40%, transparent);
   background-clip: padding-box;
 }
 
 .search-result {
+  --ui-row-min-height: var(--ui-choice-row-min-height);
   width: 100%;
-  min-height: 52px;
+  min-height: var(--ui-row-min-height);
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-columns: minmax(0, 1fr) calc(2 * var(--ui-icon-slot));
   align-items: center;
-  gap: 10px;
-  padding: 7px 11px;
-  color: var(--text);
-  border: 0;
-  border-radius: var(--radius-result-row);
-  outline: 0;
-  background: transparent;
+  gap: var(--ui-row-gap);
+  padding: var(--ui-row-block-padding) var(--ui-row-inline-padding);
   text-align: left;
   cursor: default;
-  transition: color 120ms ease, background 120ms ease;
 }
 
-.search-result:hover { background: var(--floating-row-hover, rgba(79, 85, 105, 0.055)); }
-.search-result.active { background: var(--floating-row-selected, var(--accent-soft)); }
-.search-result:focus-visible { box-shadow: 0 0 0 3px var(--accent-ring); }
-.search-result:disabled { opacity: 0.45; cursor: not-allowed; }
-
-.search-result-copy { min-width: 0; display: grid; gap: 2px; }
+.search-result-copy { min-width: 0; display: grid; gap: calc(var(--ui-control-gap) / 4); }
 .search-result-copy strong,
 .search-result-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.search-result-copy strong { color: var(--text-strong); font-size: 13.5px; font-weight: 560; }
-.search-result-copy span { color: var(--muted); font-size: 11.5px; }
-.search-result-meta { min-width: 18px; display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; }
-.search-result-check { color: var(--accent); }
-.search-empty { padding: 30px 16px; color: var(--muted); font-size: 12px; text-align: center; }
+.search-result-meta { min-width: calc(2 * var(--ui-icon-slot)); display: inline-flex; align-items: center; justify-content: flex-end; gap: calc(var(--ui-control-gap) / 2); }
+.search-result-check { color: var(--ui-action); }
+.search-empty { padding: var(--ui-dialog-inset) var(--ui-panel-inset); color: var(--ui-text-secondary); font-size: var(--ui-size); text-align: center; }
 
 @media (max-width: 480px) {
-  .search-backdrop { padding: 12px; }
-  .search-palette { max-height: calc(100dvh - 24px); --alto-floating-panel-radius: var(--radius-dialog); }
+  .search-backdrop { padding: var(--ui-panel-inset); }
+  .search-palette { max-height: calc(100dvh - 2 * var(--ui-panel-inset)); }
 }
diff --git a/program/plugins/sidebar.css b/program/plugins/sidebar.css
index ad15721..fc2a3f8 100644
--- a/program/plugins/sidebar.css
+++ b/program/plugins/sidebar.css
@@ -1,6 +1,6 @@
 /* Sidebar structure stays local to the sidebar fiber so it hot-reloads atomically. */
 [data-shell-node="conversation-history"] {
-  --sidebar-inactive-text: color-mix(in srgb, var(--text) 55%, var(--muted));
+  --sidebar-inactive-text: var(--ui-text-secondary);
   position: absolute;
   z-index: 60;
   top: calc(var(--control-topbar) + var(--space-2));
@@ -13,12 +13,13 @@
   margin: 0;
   flex: none;
   overflow: hidden;
-  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
-  border-radius: var(--radius-panel);
-  background: var(--side-panel-background, var(--sidebar-material));
-  box-shadow: var(--shadow-panel);
-  -webkit-backdrop-filter: var(--side-panel-backdrop, blur(26px) saturate(112%));
-  backdrop-filter: var(--side-panel-backdrop, blur(26px) saturate(112%));
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-panel-radius);
+  background: var(--ui-surface);
+  box-shadow: var(--ui-panel-shadow);
+  color: var(--ui-text);
+  font-family: var(--ui-font);
+  font-size: var(--ui-size);
   opacity: 0;
   pointer-events: none;
   visibility: hidden;
@@ -46,13 +47,13 @@ html[data-sidebar-mode='pinned'] [data-shell-node="conversation-history"] {
 }
 
 html[data-sidebar-mode='floating'] [data-shell-node="conversation-history"] {
-  box-shadow: var(--shadow-popover);
+  box-shadow: var(--ui-panel-shadow);
 }
 
 [data-shell-node="conversation-history"]:hover,
 html.is-resizing-sidebar [data-shell-node="conversation-history"] {
-  border-color: var(--border);
-  box-shadow: var(--shadow-panel);
+  border-color: var(--ui-border);
+  box-shadow: var(--ui-panel-shadow);
 }
 
 .sidebar-edge-zone {
@@ -84,7 +85,8 @@ html[data-sidebar-mode='pinned'] .sidebar-edge-zone {
 }
 
 .sidebar-resize-handle:focus-visible {
-  outline: 0;
+  outline: 2px solid var(--ui-focus);
+  outline-offset: -2px;
 }
 
 html.is-resizing-sidebar,
@@ -109,10 +111,10 @@ html[data-desktop-platform="darwin"] [data-shell-node="conversation-history"] >
   justify-content: flex-start;
   gap: var(--space-2);
   padding: var(--space-1) var(--space-3);
-  color: var(--text);
-  border-radius: var(--radius-row);
-  font-size: var(--type-body);
-  font-weight: var(--weight-regular);
+  color: var(--ui-text);
+  border-radius: var(--ui-row-radius);
+  font-size: var(--ui-size);
+  font-weight: var(--ui-weight);
   letter-spacing: normal;
 }
 
@@ -125,13 +127,13 @@ html[data-desktop-platform="darwin"] [data-shell-node="conversation-history"] >
   width: 16px;
   height: 16px;
   flex: 0 0 auto;
-  color: var(--muted);
+  color: var(--ui-text-secondary);
   stroke-width: 1.35;
 }
 
 .shell-sidebar-action:hover:not(:disabled) {
-  color: var(--text);
-  background: var(--surface-hover);
+  color: var(--ui-text);
+  background: var(--ui-hover);
 }
 
 .conversation-history {
@@ -142,8 +144,8 @@ html[data-desktop-platform="darwin"] [data-shell-node="conversation-history"] >
   min-height: var(--control-default);
   gap: var(--space-1);
   padding: var(--space-1) var(--space-3);
-  color: var(--text);
-  font-size: var(--type-body);
+  color: var(--ui-text);
+  font-size: var(--ui-size);
   font-weight: var(--weight-regular);
 }
 
@@ -159,20 +161,20 @@ html[data-desktop-platform="darwin"] [data-shell-node="conversation-history"] >
   width: var(--control-compact);
   height: var(--control-compact);
   flex: 0 0 var(--control-compact);
-  color: var(--muted);
-  border-radius: var(--radius-pill);
+  color: var(--ui-text-secondary);
+  border-radius: var(--ui-control-radius);
 }
 
 .history-header > button:hover:not(:disabled),
 .history-header > button:focus-visible {
-  color: var(--text);
-  background: var(--surface-hover);
+  color: var(--ui-text);
+  background: var(--ui-hover);
 }
 
 .history-list {
   padding-top: var(--space-1);
   scrollbar-width: thin;
-  scrollbar-color: color-mix(in srgb, var(--muted) 24%, transparent) transparent;
+  scrollbar-color: color-mix(in srgb, var(--ui-text-secondary) 24%, transparent) transparent;
 }
 
 .history-list::-webkit-scrollbar {
@@ -181,7 +183,7 @@ html[data-desktop-platform="darwin"] [data-shell-node="conversation-history"] >
 
 .history-list::-webkit-scrollbar-thumb {
   border: 2px solid transparent;
-  background: color-mix(in srgb, var(--muted) 24%, transparent);
+  background: color-mix(in srgb, var(--ui-text-secondary) 24%, transparent);
   background-clip: padding-box;
 }
 
@@ -194,9 +196,9 @@ html[data-desktop-platform="darwin"] [data-shell-node="conversation-history"] >
   gap: var(--space-2);
   min-height: var(--control-default);
   padding: var(--space-1) var(--space-3);
-  color: var(--text-secondary);
-  border-radius: var(--radius-row);
-  font-size: var(--type-body);
+  color: var(--ui-text-secondary);
+  border-radius: var(--ui-row-radius);
+  font-size: var(--ui-size);
   font-weight: var(--weight-regular);
   letter-spacing: normal;
 }
@@ -204,7 +206,7 @@ html[data-desktop-platform="darwin"] [data-shell-node="conversation-history"] >
 .history-workspace-heading > svg:not(.lucide-loader-circle) {
   width: 16px;
   height: 16px;
-  color: var(--muted);
+  color: var(--ui-text-secondary);
   stroke-width: 1.35;
 }
 
@@ -214,8 +216,8 @@ html[data-desktop-platform="darwin"] [data-shell-node="conversation-history"] >
 }
 
 .history-workspace-heading:hover {
-  color: var(--text);
-  background: var(--surface-hover);
+  color: var(--ui-text);
+  background: var(--ui-hover);
 }
 
 .history-workspace-new-thread {
@@ -239,23 +241,32 @@ html[data-desktop-platform="darwin"] [data-shell-node="conversation-history"] >
 .history-entry {
   min-height: var(--control-compact);
   padding: var(--space-1) var(--space-3);
-  color: var(--text-secondary);
-  border-radius: var(--radius-row);
-  font-size: var(--type-body);
+  color: var(--ui-text-secondary);
+  border-radius: var(--ui-row-radius);
+  font-size: var(--ui-size);
   font-weight: var(--weight-regular);
   letter-spacing: normal;
   line-height: var(--line-control);
 }
 
 .history-entry:hover:not(:disabled) {
-  color: var(--text);
-  background: var(--surface-hover);
+  color: var(--ui-text);
+  background: var(--ui-hover);
 }
 
 .history-entry.active {
-  color: var(--text);
-  background: color-mix(in srgb, var(--text) 3%, transparent);
-}
+  color: var(--ui-text-strong);
+  background: var(--ui-selected);
+}
+.history-entry.active:hover:not(:disabled),
+.history-workspace-heading.active { color: var(--ui-text-strong); background: var(--ui-selected); }
+.history-entry:active:not(:disabled),
+.history-entry.active:active:not(:disabled),
+.history-workspace-heading:active:not(:disabled),
+.history-show-more:active:not(:disabled) { background: var(--ui-pressed); }
+.history-entry:focus-visible,
+.history-workspace-heading:focus-visible,
+.history-show-more:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: -2px; }
 
 .history-entry.is-renaming {
   grid-template-columns: minmax(0, 1fr);
@@ -268,17 +279,18 @@ html[data-desktop-platform="darwin"] [data-shell-node="conversation-history"] >
   width: 100%;
   min-width: 0;
   padding: 2px var(--space-1);
-  color: var(--text-strong);
-  border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--border));
-  border-radius: var(--radius-dense);
+  color: var(--ui-text-strong);
+  border: 1px solid var(--ui-field-border);
+  border-radius: var(--ui-field-radius);
   outline: none;
-  background: color-mix(in srgb, var(--panel) 90%, white);
+  background: var(--ui-field-fill);
   font: inherit;
 }
 
 .history-entry-name-input:focus {
-  border-color: var(--accent);
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 10%, transparent);
+  border-color: var(--ui-focus);
+  outline: 2px solid var(--ui-focus);
+  outline-offset: 2px;
 }
 
 .history-entry-rename-error {
@@ -297,19 +309,19 @@ html[data-desktop-platform="darwin"] [data-shell-node="conversation-history"] >
 .history-show-more {
   min-height: var(--control-compact);
   padding: var(--space-1) var(--space-3);
-  border-radius: var(--radius-row);
-  font-size: var(--type-body);
+  border-radius: var(--ui-row-radius);
+  font-size: var(--ui-size);
   font-weight: var(--weight-regular);
 }
 
 .history-show-more:hover {
-  color: var(--text);
-  background: var(--surface-hover);
+  color: var(--ui-text);
+  background: var(--ui-hover);
 }
 
 .history-empty {
   padding: var(--space-3) var(--space-4);
-  font-size: var(--type-label);
+  font-size: var(--ui-size);
 }
 
 .history-entry-row {
@@ -336,7 +348,7 @@ html[data-desktop-platform="darwin"] [data-shell-node="conversation-history"] >
 }
 
 .history-entry .thread-status-indicator.running {
-  color: var(--muted);
+  color: var(--ui-text-secondary);
 }
 
 .history-entry-more {
@@ -348,16 +360,16 @@ html[data-desktop-platform="darwin"] [data-shell-node="conversation-history"] >
   display: grid;
   padding: 0;
   place-items: center;
-  color: var(--muted);
+  color: var(--ui-text-secondary);
   border: 0;
-  border-radius: var(--radius-pill);
+  border-radius: var(--ui-control-radius);
   outline: 0;
   background: transparent;
   opacity: 0;
   pointer-events: none;
   cursor: pointer;
   transform: translateY(-50%);
-  transition: color 120ms ease, background 120ms ease, opacity 120ms ease;
+  transition: opacity 120ms ease;
 }
 
 .history-entry-row:hover > .history-entry-more,
@@ -367,12 +379,14 @@ html[data-desktop-platform="darwin"] [data-shell-node="conversation-history"] >
   pointer-events: auto;
 }
 
-.history-entry-more:hover,
-.history-entry-more:focus-visible,
-.history-entry-more[aria-expanded='true'] {
-  color: var(--text);
-  background: var(--surface-hover);
+.history-entry-more:hover:not(:disabled) {
+  color: var(--ui-text-strong);
+  background: var(--ui-hover);
 }
+.history-entry-more[aria-expanded='true']:not(:disabled) { color: var(--ui-text-strong); background: var(--ui-selected); }
+.history-entry-more:active:not(:disabled),
+.history-entry-more[aria-expanded='true']:active:not(:disabled) { background: var(--ui-pressed); }
+.history-entry-more:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: -2px; }
 
 .history-entry-menu {
   position: fixed;
@@ -381,13 +395,12 @@ html[data-desktop-platform="darwin"] [data-shell-node="conversation-history"] >
   display: grid;
   gap: var(--space-1);
   padding: var(--space-2);
-  color: var(--text);
-  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
-  border-radius: var(--radius-panel);
-  background: color-mix(in srgb, var(--surface-floating) 92%, transparent);
-  box-shadow: var(--shadow-popover);
-  -webkit-backdrop-filter: blur(22px) saturate(110%);
-  backdrop-filter: blur(22px) saturate(110%);
+  color: var(--ui-text);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-panel-radius);
+  background: var(--ui-surface);
+  box-shadow: var(--ui-panel-shadow);
+  font: var(--ui-weight) var(--ui-size) / var(--ui-line) var(--ui-font);
 }
 
 .history-entry-menu > button {
@@ -396,26 +409,28 @@ html[data-desktop-platform="darwin"] [data-shell-node="conversation-history"] >
   align-items: center;
   gap: var(--space-2);
   padding: var(--space-1) var(--space-2);
-  color: var(--text-secondary);
+  color: var(--ui-text-secondary);
   border: 0;
-  border-radius: var(--radius-row);
+  border-radius: var(--ui-row-radius);
   outline: 0;
   background: transparent;
   cursor: pointer;
-  font-size: var(--type-body);
-  font-weight: var(--weight-regular);
+  font-size: var(--ui-size);
+  font-weight: var(--ui-weight);
   text-align: left;
 }
 
-.history-entry-menu > button:hover,
-.history-entry-menu > button:focus-visible {
-  color: var(--text);
-  background: var(--surface-hover);
+.history-entry-menu > button:hover:not(:disabled) {
+  color: var(--ui-text-strong);
+  background: var(--ui-hover);
 }
+.history-entry-menu > button:active:not(:disabled) { background: var(--ui-pressed); }
+.history-entry-menu > button:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: -2px; }
+.history-entry-menu > button:disabled { opacity: .48; cursor: not-allowed; }
 
 .history-entry-menu > button svg {
   flex: 0 0 auto;
-  color: var(--muted);
+  color: var(--ui-text-secondary);
 }
 
 .history-entry-menu-details {
@@ -427,11 +442,7 @@ html[data-desktop-platform="darwin"] [data-shell-node="conversation-history"] >
 }
 
 html[data-alto-theme='dark'] [data-shell-node="conversation-history"] {
-  --sidebar-inactive-text: var(--muted);
-}
-
-html[data-alto-theme='dark'] .history-entry.active {
-  background: color-mix(in srgb, var(--text) 7%, transparent);
+  --sidebar-inactive-text: var(--ui-text-secondary);
 }
 
 @media (hover: none) {
@@ -467,7 +478,7 @@ html[data-alto-theme='dark'] .history-entry.active {
   }
 
   html[data-sidebar-mode='pinned'] [data-shell-node="conversation-history"] {
-    box-shadow: var(--shadow-popover);
+    box-shadow: var(--ui-panel-shadow);
   }
 }
 
diff --git a/program/plugins/source-review.css b/program/plugins/source-review.css
index 8a4d6f6..e85c71b 100644
--- a/program/plugins/source-review.css
+++ b/program/plugins/source-review.css
@@ -20,10 +20,29 @@
 .source-review-comment > p { flex: 1 1 auto; min-width: 0; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
 .source-review-comment-state { display: grid; flex: none; place-items: center; width: var(--control-icon); height: var(--control-icon); border-radius: var(--radius-pill); color: var(--accent); background: var(--accent-soft); }
 .source-review-comment-actions { display: flex; flex: none; align-items: center; gap: var(--space-1); }
-.source-review-comment-actions button { display: grid; place-items: center; width: var(--control-icon); height: var(--control-icon); padding: 0; border: 0; border-radius: var(--radius-pill); color: var(--text-muted); background: transparent; font: inherit; cursor: pointer; }
-.source-review-comment-actions button:hover { color: var(--text); background: var(--surface-hover); }
-.source-review-comment-actions button:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: 2px; }
-.source-review-comment-actions .source-review-comment-send { color: var(--accent); background: var(--accent-soft); }
+.source-review-comment-actions button {
+  display: grid;
+  place-items: center;
+  width: var(--control-icon);
+  height: var(--control-icon);
+  padding: 0;
+  border: 0;
+  border-radius: var(--ui-control-radius);
+  color: var(--ui-text-secondary);
+  background: transparent;
+  font-family: var(--ui-font);
+  font-size: var(--ui-size);
+  font-weight: var(--ui-weight);
+  line-height: var(--ui-line);
+  cursor: pointer;
+}
+.source-review-comment-actions button:hover:not(:disabled) { color: var(--ui-text); background: var(--ui-hover); }
+.source-review-comment-actions button:active:not(:disabled) { background: var(--ui-pressed); }
+.source-review-comment-actions button:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
+.source-review-comment-actions .source-review-comment-send { color: var(--ui-on-action); background: var(--ui-action); }
+.source-review-comment-actions .source-review-comment-send:hover:not(:disabled) { color: var(--ui-on-action); background: var(--ui-action-hover); }
+.source-review-comment-actions .source-review-comment-send:active:not(:disabled) { color: var(--ui-on-action); background: var(--ui-action-pressed); }
+.source-review-comment-actions button:disabled { opacity: .48; cursor: not-allowed; }
 .source-review-comment-remove { opacity: 0; }
 .source-review-comment:hover .source-review-comment-remove,
 .source-review-comment:focus-within .source-review-comment-remove { opacity: 1; }
@@ -47,24 +66,31 @@
   min-width: 0;
   padding: 0 var(--space-2);
   border: 0;
-  border-radius: var(--radius-pill);
-  color: var(--text-muted);
+  border-radius: var(--ui-control-radius);
+  color: var(--ui-text);
   background: transparent;
-  font: inherit;
+  font-family: var(--ui-font);
+  font-size: var(--ui-size);
+  font-weight: var(--ui-weight);
+  line-height: var(--ui-line);
   cursor: pointer;
 }
-.source-review-modes button[aria-pressed="true"] { color: var(--composer-action-ink); background: var(--composer-action-fill); }
 .source-review-modes button:hover:not(:disabled),
-.source-review-destination select:hover:not(:disabled) { color: var(--text); background: var(--surface-hover); }
+.source-review-destination select:hover:not(:disabled) { color: var(--ui-text); background: var(--ui-hover); }
+.source-review-modes button[aria-pressed="true"],
+.source-review-modes button[aria-pressed="true"]:hover:not(:disabled) { color: var(--ui-text-strong); background: var(--ui-selected); }
+.source-review-modes button:active:not(:disabled),
+.source-review-modes button[aria-pressed="true"]:active:not(:disabled),
+.source-review-destination select:active:not(:disabled) { background: var(--ui-pressed); }
 .source-review-modes button:focus-visible,
 .source-review-destination select:focus-visible,
-.source-edit-actions button:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: 2px; }
+.source-edit-actions button:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
 .source-review-modes button:disabled,
 .source-review-destination select:disabled { cursor: default; opacity: .6; }
 
 .source-review-destination { position: relative; flex: 0 1 auto; min-width: 0; max-width: 16em; }
-.source-review-destination select { display: block; max-width: 100%; padding-right: var(--space-5); appearance: none; text-overflow: ellipsis; }
-.source-review-destination > svg { position: absolute; top: 50%; right: var(--space-2); transform: translateY(-50%); pointer-events: none; color: var(--text-muted); }
+.source-review-destination select { display: block; max-width: 100%; padding-right: var(--space-5); appearance: none; text-overflow: ellipsis; border: 1px solid var(--ui-field-border); border-radius: var(--ui-field-radius); background: var(--ui-field-fill); }
+.source-review-destination > svg { position: absolute; top: 50%; right: var(--space-2); transform: translateY(-50%); pointer-events: none; color: var(--ui-text-secondary); }
 .source-review-problem { margin: var(--space-2) 0 0; color: var(--danger); font-family: var(--composer-font); font-size: var(--type-label); line-height: var(--line-body); white-space: pre-wrap; overflow-wrap: anywhere; }
 
 .source-edit-annotation {
@@ -82,11 +108,13 @@
 .source-edit-request { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-3); }
 .source-edit-request > p { flex: 1 1 14em; min-width: 0; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
 .source-edit-actions { display: flex; flex: 0 1 auto; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-left: auto; font-size: var(--type-label); }
-.source-edit-actions button { height: var(--control-compact); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-pill); font: inherit; font-weight: var(--weight-medium); cursor: pointer; }
-.source-edit-reject { color: var(--text-muted); background: transparent; }
-.source-edit-reject:hover:not(:disabled) { color: var(--text); background: var(--surface-hover); }
-.source-edit-accept { color: var(--composer-action-ink, var(--text-strong)); background: var(--composer-action-fill, var(--accent-soft)); }
-.source-edit-accept:hover:not(:disabled) { background: var(--composer-action-hover-fill, var(--accent-border)); }
+.source-edit-actions button { height: var(--control-compact); padding: 0 var(--space-3); border: 0; border-radius: var(--ui-control-radius); font-family: var(--ui-font); font-size: var(--ui-size); font-weight: var(--ui-weight); line-height: var(--ui-line); cursor: pointer; }
+.source-edit-reject { color: var(--ui-text); background: transparent; }
+.source-edit-reject:hover:not(:disabled) { color: var(--ui-text); background: var(--ui-hover); }
+.source-edit-reject:active:not(:disabled) { background: var(--ui-pressed); }
+.source-edit-accept { color: var(--ui-on-action); background: var(--ui-action); }
+.source-edit-accept:hover:not(:disabled) { background: var(--ui-action-hover); }
+.source-edit-accept:active:not(:disabled) { background: var(--ui-action-pressed); }
 .source-edit-actions button:disabled { opacity: .4; cursor: default; }
 .source-edit-status { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--text-muted); }
 .source-edit-annotation > .source-review-problem { margin: 0; padding: 0 var(--space-3) var(--space-3); }
diff --git a/program/plugins/source-viewer.css b/program/plugins/source-viewer.css
index aacae3a..2ea3618 100644
--- a/program/plugins/source-viewer.css
+++ b/program/plugins/source-viewer.css
@@ -67,9 +67,9 @@
   left: 16px;
   max-width: 660px;
   margin: 0 auto;
-  border: 1px solid var(--border);
-  background: var(--panel-solid);
-  box-shadow: var(--shadow-panel);
+  border: 1px solid var(--ui-border);
+  background: var(--ui-surface);
+  box-shadow: var(--ui-panel-shadow);
 }
 
 .source-viewer-command {
@@ -78,10 +78,12 @@
   align-items: center;
   gap: 7px;
   padding: 7px 10px;
-  border-radius: 10px;
-  color: var(--text-muted);
+  border-radius: var(--ui-field-radius);
+  color: var(--ui-text-secondary);
 }
 
+.source-viewer-command:focus-within { outline: 2px solid var(--ui-focus); outline-offset: -2px; }
+
 .source-vim-status {
   display: flex;
   flex: 0 0 var(--control-compact);
@@ -108,18 +110,18 @@
   overflow: auto;
   margin: 0 auto;
   padding: var(--space-4);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-row);
-  color: var(--text);
-  background: var(--panel-solid);
-  box-shadow: var(--shadow-panel);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-dialog-radius);
+  color: var(--ui-text);
+  background: var(--ui-surface);
+  box-shadow: var(--ui-dialog-shadow);
   font-size: var(--type-label);
   line-height: 1.6;
   outline: none;
 }
 .source-vim-help header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
-.source-vim-help strong { color: var(--text-strong); font-size: var(--type-body); font-weight: var(--weight-semibold); }
-.source-vim-help p { margin: calc(var(--space-1) / 2) 0 0; color: var(--text-muted); }
+.source-vim-help strong { color: var(--ui-text-strong); font-size: var(--type-body); font-weight: var(--weight-semibold); }
+.source-vim-help p { margin: calc(var(--space-1) / 2) 0 0; color: var(--ui-text-secondary); }
 .source-vim-help button {
   display: grid;
   flex: none;
@@ -128,26 +130,26 @@
   height: var(--control-icon);
   padding: 0;
   border: 0;
-  border-radius: var(--radius-dense);
-  color: var(--text-muted);
+  border-radius: var(--ui-control-radius);
+  color: var(--ui-text-secondary);
   background: transparent;
 }
-.source-vim-help button:hover { background: var(--panel-soft); color: var(--text); }
-.source-vim-help button:focus-visible { outline: 2px solid var(--accent); }
+.source-vim-help button:hover { background: var(--ui-hover); color: var(--ui-text); }
+.source-vim-help button:focus-visible { outline: 2px solid var(--ui-focus); }
 .source-vim-help dl { display: grid; grid-template-columns: minmax(7em, auto) 1fr; column-gap: var(--space-4); row-gap: var(--space-2); margin: var(--space-4) 0; }
-.source-vim-help dt { color: var(--text-muted); }
+.source-vim-help dt { color: var(--ui-text-secondary); }
 .source-vim-help dd { margin: 0; min-width: 0; }
-.source-vim-help kbd { color: var(--text-strong); font-family: var(--mono); font-size: var(--type-supporting); }
+.source-vim-help kbd { color: var(--ui-text-strong); font-family: var(--mono); font-size: var(--type-supporting); }
 .source-vim-help .source-vim-help-note { border-top: 1px solid var(--border-soft); padding-top: var(--space-3); font-size: var(--type-supporting); }
 .source-viewer-command input {
   flex: 1 1 auto;
   min-width: 0;
   border: 0;
   outline: 0;
-  color: var(--text);
+  color: var(--ui-text);
   background: transparent;
   font: inherit;
-  font-size: 12.5px;
+  font-size: var(--ui-size);
 }
 
 .composer.source-review-draft {
diff --git a/program/plugins/steer.css b/program/plugins/steer.css
index add275d..37cf0f7 100644
--- a/program/plugins/steer.css
+++ b/program/plugins/steer.css
@@ -5,13 +5,13 @@
   overflow-y: auto;
   margin: 0 max(24px, calc((100% - 860px) / 2)) 4px;
   padding: 8px 10px;
-  border: 1px solid color-mix(in srgb, var(--border) 62%, transparent);
-  border-radius: var(--radius-lg, 24px);
-  background: color-mix(in srgb, var(--panel-solid) 56%, transparent);
-  box-shadow: 0 8px 28px rgba(35, 38, 52, 0.055);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-panel-radius);
+  background: var(--ui-surface);
+  box-shadow: var(--ui-panel-shadow);
   scrollbar-width: none;
-  -webkit-backdrop-filter: blur(22px) saturate(112%);
-  backdrop-filter: blur(22px) saturate(112%);
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
   transition: transform 180ms ease;
 }
 
@@ -31,13 +31,13 @@
   align-items: center;
   gap: 7px;
   padding: 2px 3px;
-  color: var(--text);
-  border-radius: 12px;
+  color: var(--ui-text);
+  border-radius: var(--ui-row-radius);
   cursor: grab;
-  transition: opacity 120ms ease, background 120ms ease, transform 120ms ease;
+  transition: opacity 120ms ease, transform 120ms ease;
 }
 
-.steer-row:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
+.steer-row:hover { background: var(--ui-hover); }
 .steer-row:active { cursor: grabbing; }
 .steer-row.is-dragging { opacity: 0.42; transform: scale(0.995); }
 .steer-row.is-editing { align-items: start; cursor: default; padding-block: 6px; }
@@ -47,7 +47,7 @@
   align-items: center;
   justify-content: flex-end;
   gap: 1px;
-  color: var(--dim);
+  color: var(--ui-text-secondary);
 }
 
 .steer-drag svg:first-child { opacity: 0; transition: opacity 120ms ease; }
@@ -56,8 +56,8 @@
 .steer-message {
   min-width: 0;
   overflow: hidden;
-  color: var(--text-strong);
-  font-size: 14px;
+  color: var(--ui-text-strong);
+  font-size: var(--type-body);
   line-height: 1.4;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -67,8 +67,8 @@
   display: inline-flex;
   align-items: center;
   gap: 3px;
-  color: var(--muted);
-  font-size: 11px;
+  color: var(--ui-text-secondary);
+  font-size: var(--type-supporting);
 }
 
 .steer-edit-button,
@@ -79,11 +79,11 @@
   align-items: center;
   justify-content: center;
   padding: 0;
-  color: var(--muted);
+  color: var(--ui-text-secondary);
   border: 0;
-  border-radius: 999px;
+  border-radius: var(--ui-control-radius);
   background: transparent;
-  font: 500 13px/1 var(--sans);
+  font: var(--ui-weight) var(--ui-size)/var(--ui-line) var(--ui-font);
   cursor: pointer;
 }
 
@@ -91,8 +91,8 @@
 .steer-remove { width: 30px; }
 .steer-now { gap: 6px; padding-inline: 8px; }
 .steer-edit-button:hover:not(:disabled),
-.steer-now:hover:not(:disabled) { color: var(--accent); background: var(--accent-soft); }
-.steer-remove:hover:not(:disabled) { color: var(--red); background: color-mix(in srgb, var(--red) 7%, transparent); }
+.steer-now:hover:not(:disabled) { color: var(--ui-text); background: var(--ui-hover); }
+.steer-remove:hover:not(:disabled) { color: var(--ui-danger); background: color-mix(in srgb, var(--ui-danger) 9%, transparent); }
 .steer-edit-button:disabled,
 .steer-now:disabled,
 .steer-remove:disabled { opacity: 0.42; cursor: default; }
@@ -112,17 +112,17 @@
   max-height: 150px;
   resize: vertical;
   padding: 9px 10px;
-  color: var(--text-strong);
-  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border));
-  border-radius: var(--radius-sm, 12px);
+  color: var(--ui-text-strong);
+  border: 1px solid var(--ui-field-border);
+  border-radius: var(--ui-field-radius);
   outline: none;
-  background: color-mix(in srgb, var(--panel) 94%, white);
-  font: 400 14px/1.45 var(--sans);
+  background: var(--ui-field-fill);
+  font: var(--weight-regular) var(--type-body)/var(--line-body) var(--ui-font);
 }
 
 .steer-editor:focus {
-  border-color: color-mix(in srgb, var(--accent) 62%, var(--border));
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 10%, transparent);
+  outline: 2px solid var(--ui-focus);
+  outline-offset: -2px;
 }
 
 .steer-edit-actions {
@@ -134,8 +134,8 @@
 
 .steer-edit-actions > span {
   margin-right: auto;
-  color: var(--dim);
-  font-size: 10.5px;
+  color: var(--ui-text-secondary);
+  font-size: var(--type-supporting);
 }
 
 .steer-edit-actions button {
@@ -145,28 +145,30 @@
   justify-content: center;
   gap: 5px;
   padding: 0 8px;
-  color: var(--muted);
+  color: var(--ui-text-secondary);
   border: 0;
-  border-radius: 999px;
+  border-radius: var(--ui-control-radius);
   background: transparent;
-  font: 500 12px/1 var(--sans);
+  font: var(--ui-weight) var(--ui-size)/var(--ui-line) var(--ui-font);
   cursor: pointer;
 }
 
-.steer-edit-actions button:last-child {
-  color: var(--accent);
-  background: var(--accent-soft);
-}
+.steer-edit-actions button:hover:not(:disabled) { color: var(--ui-text); background: var(--ui-hover); }
+.steer-edit-actions button:last-child { color: var(--ui-on-action); background: var(--ui-action); }
+.steer-edit-actions button:last-child:hover:not(:disabled) { background: var(--ui-action-hover); }
+:is(.steer-edit-button, .steer-now, .steer-remove, .steer-edit-actions button):active:not(:disabled) { background: var(--ui-pressed); }
+.steer-edit-actions button:last-child:active:not(:disabled) { background: var(--ui-action-pressed); }
+:is(.steer-edit-button, .steer-now, .steer-remove, .steer-edit-actions button):focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
 
 .steer-edit-actions button:disabled { opacity: 0.5; cursor: default; }
-.steer-edit-error { color: var(--red); font-size: 10.5px; }
+.steer-edit-error { color: var(--ui-danger); font-size: var(--type-supporting); }
 
 .steer-error {
   grid-column: 2 / -1;
   overflow: hidden;
   padding: 0 8px 5px 0;
-  color: var(--red);
-  font-size: 10.5px;
+  color: var(--ui-danger);
+  font-size: var(--type-supporting);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
diff --git a/program/plugins/theme.css b/program/plugins/theme.css
index 2e6c990..83533f0 100644
--- a/program/plugins/theme.css
+++ b/program/plugins/theme.css
@@ -44,14 +44,6 @@ html[data-alto-theme='dark'] {
   --header-cluster: rgba(36, 39, 48, 0.84);
   --header-cluster-border: rgba(255, 255, 255, 0.07);
   --header-cluster-shadow: 0 1px 2px rgba(0, 0, 0, 0.16), 0 7px 20px rgba(0, 0, 0, 0.14);
-  --floating-panel: rgba(38, 41, 51, 0.96);
-  --floating-panel-border: rgba(255, 255, 255, 0.09);
-  --floating-panel-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 18px 48px rgba(0, 0, 0, 0.32);
-  --floating-row-hover: rgba(255, 255, 255, 0.055);
-  --button-background: rgba(42, 45, 55, 0.72);
-  --button-background-hover: rgba(42, 45, 55, 0.9);
-  --button-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
-  --button-shadow-hover: 0 2px 7px rgba(0, 0, 0, 0.2);
   --code-block-background: #262931;
   --code-block-border: rgba(223, 227, 239, 0.09);
   --code-block-text: #d2d6e2;
@@ -99,7 +91,7 @@ html[data-alto-theme='dark'] .ghostty-terminal-surface {
   background: var(--bg);
 }
 
-html[data-alto-theme='dark'] .shell-kernel main {
+html[data-alto-theme='dark'] .shell-kernel main:not(.program-modal-content) {
   background:
     radial-gradient(circle at 51% -18%, rgba(76, 66, 112, 0.16), transparent 40%),
     linear-gradient(135deg, #1f2229 0%, #1c1f26 54%, #191c22 100%);
@@ -120,116 +112,68 @@ html[data-alto-theme='dark'] .composer-inline-code-block {
   background: rgba(42, 45, 55, 0.78);
 }
 
-html[data-alto-theme='dark'] :is(
-  .composer-workspace-picker,
-  .composer-permission-picker,
-  .composer-model-picker,
-  .skill-picker,
-  .workspace-thread-picker,
-  .workspace-project-picker
-) {
-  border-color: var(--border);
-  background: rgba(39, 42, 52, 0.98);
-  box-shadow: 0 20px 52px rgba(0, 0, 0, 0.3), 0 2px 7px rgba(0, 0, 0, 0.18);
-}
-
-html[data-alto-theme='dark'] :is(
-  .composer-workspace-picker,
-  .composer-permission-picker,
-  .composer-model-picker,
-  .skill-picker
-) button:hover {
-  background: var(--accent-soft);
-}
-
-html[data-alto-theme='dark'] .program-modal {
-  border-color: var(--border);
-  background: #1d2027;
-  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.46), 0 2px 8px rgba(0, 0, 0, 0.24);
-}
-
-html[data-alto-theme='dark'] .program-modal-sidebar {
-  border-color: var(--border-soft);
-  background: rgba(24, 27, 34, 0.9);
-}
-
-html[data-alto-theme='dark'] .program-modal-content { background: #21242c; }
-html[data-alto-theme='dark'] .program-modal-search,
-html[data-alto-theme='dark'] .settings-card {
-  border-color: var(--border);
-  background: rgba(42, 45, 55, 0.72);
-  box-shadow: inset 0 1px rgba(255, 255, 255, 0.035);
-}
-
-html[data-alto-theme='dark'] .settings-row select {
-  color: var(--text);
-  border-color: var(--border);
-  background: rgba(26, 29, 37, 0.72);
-}
-
 html[data-alto-theme='dark'] .browser-workspace-pane,
 html[data-alto-theme='dark'] .browser-workspace-empty,
 html[data-alto-theme='dark'] .browser-workspace-unavailable {
   background: var(--canvas);
 }
 
-html[data-alto-theme='dark'] .browser-workspace-toolbar > input {
-  color: var(--text);
-  background: var(--panel-solid);
-}
-
 .theme-settings-card { overflow: visible; }
 
 .theme-mode-picker {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: 3px;
-  padding: 3px;
-  border: 1px solid var(--border-soft);
-  border-radius: 10px;
-  background: color-mix(in srgb, var(--panel-soft) 72%, transparent);
+  gap: var(--space-1);
+  padding: var(--space-1);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-control-radius);
+  background: var(--ui-surface-inset);
 }
 
 .theme-mode-picker button {
-  min-width: 78px;
-  height: 30px;
+  min-width: 0;
+  min-height: var(--ui-row-min-height);
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 6px;
-  padding: 0 9px;
-  color: var(--muted);
+  gap: var(--ui-control-gap);
+  padding: var(--ui-row-block-padding) var(--ui-control-inline-padding);
+  color: var(--ui-text);
   border: 0;
-  border-radius: 7px;
+  border-radius: var(--ui-control-radius);
   background: transparent;
-  font: 500 11.5px/1 var(--sans);
+  font: var(--ui-weight) var(--ui-size)/var(--ui-line) var(--ui-font);
   cursor: pointer;
 }
 
-.theme-mode-picker button:hover { color: var(--text); }
+.theme-mode-picker button:where(:hover:not(:disabled)) { color: var(--ui-text);   background: var(--ui-hover);
+}
 .theme-mode-picker button.active {
-  color: var(--text-strong);
-  background: var(--panel-solid);
-  box-shadow: 0 1px 3px rgba(28, 32, 44, 0.1);
+  color: var(--ui-text-strong);
+  background: var(--ui-selected);
+  box-shadow: none;
 }
 
 .theme-accent-control {
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  gap: var(--space-2);
+  gap: var(--ui-control-gap);
   flex-wrap: wrap;
 }
 
 .theme-accent-presets {
+  min-width: 0;
   display: flex;
   align-items: center;
-  gap: 5px;
+  flex-wrap: wrap;
+  gap: var(--ui-control-gap);
 }
 
 .theme-accent-preset {
-  width: 22px;
-  height: 22px;
+  width: var(--ui-icon-slot);
+  height: var(--ui-icon-slot);
+  flex: 0 0 var(--ui-icon-slot);
   padding: 0;
   border: 1px solid color-mix(in srgb, var(--text-strong) 12%, transparent);
   border-radius: 999px;
@@ -259,13 +203,14 @@ html[data-alto-theme='dark'] .browser-workspace-toolbar > input {
 
 .theme-color-picker {
   position: relative;
-  height: 34px;
+  min-height: var(--ui-field-min-height);
   display: flex;
+  flex: 0 0 auto;
   align-items: center;
-  gap: 8px;
-  padding: 4px 9px 4px 5px;
+  gap: var(--ui-control-gap);
+  padding: 0 var(--ui-field-inline-padding) 0 var(--space-1);
   border: 1px solid var(--border-soft);
-  border-radius: 10px;
+  border-radius: var(--ui-field-radius);
   background: color-mix(in srgb, var(--panel-solid) 72%, transparent);
   cursor: pointer;
 }
@@ -279,13 +224,14 @@ html[data-alto-theme='dark'] .browser-workspace-toolbar > input {
 }
 
 .theme-color-swatch {
-  width: 24px;
-  height: 24px;
+  width: var(--ui-icon-slot);
+  height: var(--ui-icon-slot);
+  flex: 0 0 var(--ui-icon-slot);
   display: grid;
   place-items: center;
   color: white;
   border: 1px solid color-mix(in srgb, white 28%, transparent);
-  border-radius: 7px;
+  border-radius: max(0px, calc(var(--ui-field-radius) - var(--space-1)));
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
 }
 
@@ -297,31 +243,39 @@ html[data-alto-theme='dark'] .browser-workspace-toolbar > input {
 .theme-reset-action {
   display: flex;
   align-items: center;
-  gap: var(--space-1);
-  color: var(--text-secondary);
-  font-size: var(--type-label);
+  gap: var(--ui-control-gap);
+  color: var(--ui-text-secondary);
+  font-size: var(--ui-size);
 }
 
-@container program-overlay (max-width: 680px) {
+@container settings-content (max-width: 520px) {
   .theme-mode-picker { width: 100%; }
-  .theme-mode-picker button { min-width: 0; }
   .theme-accent-control { justify-content: flex-start; }
 }
 
 
 .theme-palette-control {
+  min-width: 0;
+  max-width: 100%;
   display: flex;
   align-items: center;
-  gap: var(--space-2);
+  gap: var(--ui-control-gap);
+}
+
+.theme-palette-control select {
+  width: 150px;
+  min-width: 0;
+  flex: 0 1 auto;
 }
 
 .theme-palette-preview {
-  width: var(--control-default);
-  height: var(--control-default);
+  width: var(--ui-field-min-height);
+  height: var(--ui-field-min-height);
+  flex: 0 0 var(--ui-field-min-height);
   display: flex;
   overflow: hidden;
   border: 1px solid var(--border-soft);
-  border-radius: var(--radius-dense);
+  border-radius: var(--ui-field-radius);
 }
 
 .theme-palette-preview i {
@@ -462,11 +416,6 @@ html[data-alto-theme-plugin='active'][data-alto-chrome-theme] {
   --text-strong: var(--alto-chrome-strong);
   --header-cluster: color-mix(in srgb, var(--alto-chrome-panel) 80%, transparent);
   --header-cluster-border: color-mix(in srgb, var(--alto-chrome-strong) 8%, transparent);
-  --floating-panel: color-mix(in srgb, var(--alto-chrome-panel) 96%, transparent);
-  --floating-panel-border: color-mix(in srgb, var(--alto-chrome-strong) 9%, transparent);
-  --floating-row-hover: color-mix(in srgb, var(--alto-chrome-text) 6%, transparent);
-  --button-background: color-mix(in srgb, var(--alto-chrome-panel) 72%, transparent);
-  --button-background-hover: color-mix(in srgb, var(--alto-chrome-panel) 92%, transparent);
 }
 
 html[data-alto-theme-plugin='active'][data-alto-chrome-theme] .shell-kernel {
@@ -662,3 +611,6 @@ html[data-alto-code-theme][data-alto-theme] {
   --diffs-token-deleted: var(--code-block-diff-deleted);
   --diffs-token-changed: var(--code-block-property);
 }
+
+.theme-mode-picker button:active:not(:disabled) { background: var(--ui-pressed); }
+.theme-mode-picker button:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: -2px; }
diff --git a/program/plugins/todo.css b/program/plugins/todo.css
index d3f45ad..92f73c0 100644
--- a/program/plugins/todo.css
+++ b/program/plugins/todo.css
@@ -1,92 +1,102 @@
 .todo-header-button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--space-2); height: var(--control-button); padding: 0 var(--space-2); -webkit-app-region: no-drag; }
-.todo-header-button[aria-pressed=true] { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-border); }
-.todo-pane { flex: 1; min-width: 0; min-height: 0; background: var(--canvas); }
+.todo-header-button[aria-pressed=true]:not(:disabled) { color: var(--ui-text-strong); background: var(--ui-selected); border-color: transparent; }
+.todo-header-button[aria-pressed=true]:active:not(:disabled) { background: var(--ui-pressed); }
+.todo-pane { flex: 1; min-width: 0; min-height: 0; background: var(--ui-surface-inset); color: var(--ui-text); font-family: var(--ui-font); font-size: var(--ui-size); }
 .todo-scroll { flex: 1; min-width: 0; min-height: 0; overflow: auto; }
 .todo-content { width: min(100%, calc(var(--composer-content-width) + var(--space-5) * 2)); margin: 0 auto; padding: calc(var(--space-5) * 1.5) clamp(var(--space-4), 4vw, calc(var(--space-5) * 1.5)) calc(var(--space-5) * 2); }
-.todo-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-soft); }
+.todo-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid var(--ui-divider); }
 .todo-title { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
 .todo-title > svg { color: var(--accent); flex-shrink: 0; }
-.todo-heading h1 { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin: 0; color: var(--text-strong); font-size: var(--type-page-headline); font-weight: var(--weight-semibold); line-height: var(--line-control); }
+.todo-heading h1 { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin: 0; color: var(--ui-text-strong); font-size: var(--type-page-headline); font-weight: var(--weight-semibold); line-height: var(--line-control); }
 .todo-heading h1:focus { outline: none; }
-.todo-heading h1 span { color: var(--muted); font-size: var(--type-label); font-weight: var(--weight-regular); white-space: nowrap; }
+.todo-heading h1 span { color: var(--ui-text-secondary); font-size: var(--ui-size); font-weight: var(--weight-regular); white-space: nowrap; }
 .todo-project { margin-bottom: var(--space-4); min-width: 0; }
 .todo-project-heading { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-button); margin-bottom: var(--space-1); }
-.todo-project-heading h2 { flex: 1; min-width: 0; margin: 0; font-size: var(--type-label); font-weight: var(--weight-semibold); }
-.todo-project-toggle { display: flex; align-items: center; gap: var(--space-2); max-width: 100%; min-height: var(--control-default); padding: 0 var(--space-1); color: var(--text-strong); border: 0; border-radius: var(--radius-dense); background: transparent; text-align: left; font: inherit; cursor: pointer; }
-.todo-project-toggle > svg { flex-shrink: 0; color: var(--muted); }
-.todo-project-toggle:hover { background: var(--surface-hover); }
+.todo-project-heading h2 { flex: 1; min-width: 0; margin: 0; font-size: var(--ui-size); font-weight: var(--weight-semibold); }
+.todo-project-toggle { display: flex; align-items: center; gap: var(--space-2); max-width: 100%; min-height: var(--control-default); padding: 0 var(--space-1); color: var(--ui-text-strong); border: 0; border-radius: var(--ui-control-radius); background: transparent; text-align: left; font: inherit; cursor: pointer; }
+.todo-project-toggle > svg { flex-shrink: 0; color: var(--ui-text-secondary); }
+.todo-project-toggle:hover { background: var(--ui-hover); }
 .todo-project-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.todo-count { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: calc(var(--control-icon) - var(--space-1)); padding: calc(var(--space-1) / 2) calc(var(--space-3) / 2); border-radius: var(--radius-dense); background: var(--panel-soft); color: var(--muted); font-size: var(--type-supporting); font-weight: var(--weight-medium); line-height: var(--line-control); font-variant-numeric: tabular-nums; }
+.todo-count { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: calc(var(--control-icon) - var(--space-1)); padding: calc(var(--space-1) / 2) calc(var(--space-3) / 2); border-radius: var(--ui-control-radius); background: var(--ui-surface-inset); color: var(--ui-text-secondary); font-size: var(--type-supporting); font-weight: var(--ui-weight); line-height: var(--line-control); font-variant-numeric: tabular-nums; }
 .todo-project-add { --alto-icon-button-size: var(--control-compact); }
 .todo-project-body { min-width: 0; }
 .todo-items, .todo-chats { list-style: none; margin: 0; padding: 0; }
-.todo-items { overflow: hidden; border: 1px solid var(--border-soft); border-radius: var(--radius-row); background: var(--panel-solid); }
+.todo-items { overflow: hidden; border: 1px solid var(--ui-divider); border-radius: var(--ui-row-radius); background: var(--ui-surface); }
 .todo-items:empty { display: none; }
 .todo-item { padding: var(--space-2) var(--space-3); transition: background .12s; }
-.todo-item + .todo-item { border-top: 1px solid var(--border-soft); }
-.todo-item:hover { background: var(--surface-hover); }
+.todo-item + .todo-item { border-top: 1px solid var(--ui-divider); }
+.todo-item:hover { background: var(--ui-hover); }
 .todo-item-line { display: flex; min-width: 0; min-height: var(--control-default); align-items: center; gap: var(--space-2); }
 .todo-checkbox { display: grid; place-items: center; width: var(--control-icon); height: var(--control-icon); flex-shrink: 0; cursor: pointer; }
-.todo-checkbox input { appearance: none; grid-area: 1 / 1; margin: 0; width: calc(var(--space-2) * 2); height: calc(var(--space-2) * 2); border: 1px solid var(--border-strong); border-radius: calc(var(--radius-dense) - var(--space-1) / 2); background: var(--panel-solid); cursor: pointer; transition: border-color .12s, background .12s; }
-.todo-checkbox:hover input { border-color: var(--accent); }
-.todo-checkbox input:checked { background: var(--accent); border-color: var(--accent); }
-.todo-checkbox > svg { grid-area: 1 / 1; opacity: 0; pointer-events: none; color: var(--accent-text); stroke-width: 2.5; }
+.todo-checkbox input { appearance: none; grid-area: 1 / 1; margin: 0; width: calc(var(--space-2) * 2); height: calc(var(--space-2) * 2); border: 1px solid var(--ui-field-border); border-radius: calc(var(--radius-dense) - var(--space-1) / 2); background: var(--ui-surface); cursor: pointer; transition: border-color .12s, background .12s; }
+.todo-checkbox:hover input:not(:disabled) { border-color: var(--ui-action); }
+.todo-checkbox input:checked { background: var(--ui-action); border-color: var(--ui-action); }
+.todo-checkbox > svg { grid-area: 1 / 1; opacity: 0; pointer-events: none; color: var(--ui-on-action); stroke-width: 2.5; }
 .todo-checkbox input:checked + svg { opacity: 1; }
 .todo-checkbox input:disabled { opacity: .5; cursor: default; }
-.todo-edit-name { display: block; min-width: 0; padding: var(--space-1) 0; color: inherit; background: transparent; border: 0; border-radius: var(--radius-dense); text-align: left; font: inherit; overflow-wrap: anywhere; cursor: text; }
+.todo-edit-name { display: block; min-width: 0; padding: var(--space-1) 0; color: inherit; background: transparent; border: 0; border-radius: var(--ui-control-radius); text-align: left; font: inherit; overflow-wrap: anywhere; cursor: text; }
 .todo-edit-name:hover { color: var(--accent); }
-.todo-item-text { flex: 1; color: var(--text-strong); font-size: var(--type-body); font-weight: var(--weight-medium); line-height: var(--line-body); }
-.todo-item.is-done .todo-item-text { text-decoration: line-through; color: var(--muted); font-weight: var(--weight-regular); }
-.todo-inline-input { min-width: 0; width: 100%; border: 1px solid var(--accent-border); border-radius: var(--radius-dense); padding: var(--space-1); color: var(--text-strong); background: var(--panel-solid); font: inherit; }
+.todo-item-text { flex: 1; color: var(--ui-text-strong); font-size: var(--ui-size); font-weight: var(--ui-weight); line-height: var(--line-body); }
+.todo-item.is-done .todo-item-text { text-decoration: line-through; color: var(--ui-text-secondary); font-weight: var(--weight-regular); }
+.todo-inline-input { min-width: 0; width: 100%; border: 1px solid var(--ui-field-border); border-radius: var(--ui-field-radius); padding: var(--space-1); color: var(--ui-text-strong); background: var(--ui-field-fill); font: inherit; }
 .todo-row-action { --alto-icon-button-size: var(--control-compact); flex-shrink: 0; opacity: 0; transition: opacity .12s; }
 .todo-item:hover > .todo-item-line > .todo-row-action, .todo-item:focus-within > .todo-item-line > .todo-row-action, .todo-chat:hover > .todo-row-action, .todo-chat:focus-within > .todo-row-action, .todo-row-action[aria-expanded=true], .todo-row-action:focus-visible { opacity: 1; }
-.todo-chats { margin: 0 0 var(--space-1) calc(var(--control-icon) / 2); padding-left: calc(var(--control-icon) / 2 + var(--space-2)); border-left: 1px solid var(--border); }
+.todo-chats { margin: 0 0 var(--space-1) calc(var(--control-icon) / 2); padding-left: calc(var(--control-icon) / 2 + var(--space-2)); border-left: 1px solid var(--ui-border); }
 .todo-project-body > .todo-chats { margin-left: var(--space-3); }
 .todo-chat { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); min-width: 0; min-height: var(--control-compact); }
-.todo-chat-link { min-width: 0; flex: 1; display: flex; gap: var(--space-2); align-items: center; color: var(--muted); background: transparent; border: 0; border-radius: var(--radius-dense); padding: var(--space-1) 0; text-align: left; font-size: var(--type-label); cursor: pointer; }
+.todo-chat-link { min-width: 0; flex: 1; display: flex; gap: var(--space-2); align-items: center; color: var(--ui-text-secondary); background: transparent; border: 0; border-radius: var(--ui-control-radius); padding: var(--space-1) 0; text-align: left; font-size: var(--ui-size); cursor: pointer; }
 .todo-chat-link svg { flex-shrink: 0; }
 .todo-chat-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .todo-chat-link svg:last-child { opacity: 0; }
 .todo-chat-link:hover, .todo-chat-link:focus-visible { color: var(--accent); }
 .todo-chat-link:hover svg:last-child, .todo-chat-link:focus-visible svg:last-child { opacity: 1; }
-.todo-chat-rename { display: flex; align-items: center; flex: 1; min-width: 0; gap: var(--space-2); color: var(--muted); }
+.todo-chat-rename { display: flex; align-items: center; flex: 1; min-width: 0; gap: var(--space-2); color: var(--ui-text-secondary); }
 .todo-chat-rename > svg, .todo-chat-rename > button { flex-shrink: 0; }
-.todo-chat-rename input { flex: 1; font-size: var(--type-label); }
+.todo-chat-rename input { flex: 1; font-size: var(--ui-size); }
 .todo-chat > .todo-error { flex-basis: 100%; margin: var(--space-1) 0; }
-.todo-add-item { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-button); margin-top: var(--space-1); padding: 0 calc(var(--space-3) + var(--space-1)); border: 1px solid transparent; border-radius: var(--radius-dense); color: var(--muted); }
+.todo-add-item { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-button); margin-top: var(--space-1); padding: 0 calc(var(--space-3) + var(--space-1)); border: 1px solid transparent; border-radius: var(--ui-control-radius); color: var(--ui-text-secondary); }
 .todo-add-item > svg { flex-shrink: 0; }
-.todo-add-item input { flex: 1; min-width: 0; padding: var(--space-2) 0; color: var(--text); background: transparent; border: 0; outline: none; font-size: var(--type-label); }
-.todo-add-item input::placeholder { color: var(--muted); }
-.todo-add-item:focus-within { border-color: var(--accent-border); background: var(--panel-solid); color: var(--accent); }
-.todo-add-item:hover:not(:focus-within) { background: var(--surface-hover); }
-.todo-other-projects { padding-top: var(--space-3); margin-top: var(--space-2); border-top: 1px solid var(--border-soft); }
-.todo-other-toggle { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-button); padding: 0 var(--space-1); margin-bottom: var(--space-1); color: var(--muted); border: 0; border-radius: var(--radius-dense); background: transparent; font-size: var(--type-label); cursor: pointer; }
-.todo-other-toggle:hover { color: var(--text-strong); }
+.todo-add-item input { flex: 1; min-width: 0; padding: var(--space-2) 0; color: var(--ui-text); background: transparent; border: 0; outline: none; font-size: var(--ui-size); }
+.todo-add-item input::placeholder { color: var(--ui-text-secondary); }
+.todo-add-item:focus-within { border-color: var(--ui-focus); background: var(--ui-field-fill); color: var(--ui-text-strong); outline: 2px solid var(--ui-focus); outline-offset: 2px; }
+.todo-add-item:hover:not(:focus-within) { background: var(--ui-hover); }
+.todo-other-projects { padding-top: var(--space-3); margin-top: var(--space-2); border-top: 1px solid var(--ui-divider); }
+.todo-other-toggle { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-button); padding: 0 var(--space-1); margin-bottom: var(--space-1); color: var(--ui-text-secondary); border: 0; border-radius: var(--ui-control-radius); background: transparent; font-size: var(--ui-size); cursor: pointer; }
+.todo-other-toggle:hover { color: var(--ui-text-strong); }
 .todo-other-projects .todo-project { margin-bottom: var(--space-1); }
 .todo-other-projects .todo-project-heading { margin-bottom: 0; }
-.todo-other-projects .todo-project-name { color: var(--text); font-weight: var(--weight-regular); }
-.todo-search { min-width: 0; flex: 1; padding: var(--space-2) var(--space-3); color: var(--text); background: var(--panel-soft); border: 1px solid var(--border-soft); border-radius: var(--radius-dense); font-size: var(--type-body); }
-.todo-row-options { display: flex; flex-wrap: wrap; align-items: center; flex-basis: 100%; gap: var(--space-2); padding: var(--space-1) 0; color: var(--muted); font-size: var(--type-label); }
-.todo-row-options button { display: inline-flex; align-items: center; gap: var(--space-1); border: 0; padding: var(--space-1) var(--space-2); border-radius: var(--radius-dense); background: var(--panel-soft); color: var(--text); font-size: var(--type-label); cursor: pointer; }
-.todo-row-options button:hover { background: var(--accent-soft); color: var(--accent); }
-.todo-error { color: var(--danger); font-size: var(--type-label); overflow-wrap: anywhere; }
-.todo-pane button:focus-visible, .todo-checkbox input:focus-visible, .todo-inline-input:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: 2px; }
-.todo-modal-layer { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: var(--space-4); background: color-mix(in srgb, var(--text-strong) 30%, transparent); }
-.todo-move-dialog { width: min(calc(var(--overview-group-width) + var(--overview-stat-width)), 100%); min-width: 0; max-height: calc(100dvh - calc(var(--space-4) * 2)); display: flex; flex-direction: column; padding: var(--space-4); box-sizing: border-box; }
+.todo-other-projects .todo-project-name { color: var(--ui-text); font-weight: var(--weight-regular); }
+.todo-search { min-width: 0; flex: 1; padding: var(--space-2) var(--space-3); color: var(--ui-text); background: var(--ui-field-fill); border: 1px solid var(--ui-field-border); border-radius: var(--ui-field-radius); font: inherit; }
+.todo-search:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
+.todo-row-options { display: flex; flex-wrap: wrap; align-items: center; flex-basis: 100%; gap: var(--space-2); padding: var(--space-1) 0; color: var(--ui-text-secondary); font-size: var(--ui-size); }
+.todo-row-options button { display: inline-flex; align-items: center; gap: var(--space-1); border: 0; padding: var(--space-1) var(--space-2); border-radius: var(--ui-control-radius); background: var(--ui-control-fill); color: var(--ui-text); font: var(--ui-weight) var(--ui-size) / var(--ui-line) var(--ui-font); cursor: pointer; }
+.todo-row-options button:hover:not(:disabled) { background: var(--ui-hover); color: var(--ui-text-strong); }
+.todo-row-options button:active:not(:disabled) { background: var(--ui-pressed); }
+.todo-row-options button:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
+.todo-error { color: var(--danger); font-size: var(--ui-size); overflow-wrap: anywhere; }
+.todo-pane button:focus-visible, .todo-checkbox input:focus-visible, .todo-inline-input:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
+.todo-modal-layer { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: var(--space-4); background: var(--ui-scrim); }
+.todo-move-dialog { --alto-floating-panel-background: var(--ui-surface); --alto-floating-panel-border: var(--ui-border); --alto-floating-panel-radius: var(--ui-dialog-radius); --alto-floating-panel-shadow: var(--ui-dialog-shadow); --alto-floating-panel-backdrop: none; width: min(calc(var(--overview-group-width) + var(--overview-stat-width)), 100%); min-width: 0; max-height: calc(100dvh - calc(var(--space-4) * 2)); display: flex; flex-direction: column; padding: var(--space-4); box-sizing: border-box; color: var(--ui-text); font: var(--weight-regular) var(--ui-size) / var(--ui-line) var(--ui-font); }
 .todo-move-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
-.todo-move-heading h2 { margin: 0; font-size: var(--type-topbar-title); color: var(--text-strong); }
-.todo-move-description { color: var(--muted); font-size: var(--type-label); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: calc(var(--space-3) / 2) 0 var(--space-4); }
+.todo-move-heading h2 { margin: 0; font-size: var(--type-topbar-title); color: var(--ui-text-strong); }
+.todo-move-description { color: var(--ui-text-secondary); font-size: var(--ui-size); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: calc(var(--space-3) / 2) 0 var(--space-4); }
 .todo-search { width: 100%; box-sizing: border-box; flex: 0 0 auto; }
 .todo-destinations { min-height: 0; max-height: 40vh; overflow-y: auto; margin: var(--space-3) calc(var(--space-1) * -1); padding: 0 var(--space-1); }
 .todo-destination-project { margin: 0 0 var(--space-2); }
-.todo-destination-project button { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-width: 0; padding: var(--space-2) var(--space-2); background: transparent; color: var(--text); border: 0; border-radius: var(--radius-xs); text-align: left; font-size: var(--type-body); }
+.todo-destination-project button { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-width: 0; padding: var(--space-2) var(--space-2); background: transparent; color: var(--ui-text); border: 0; border-radius: var(--ui-row-radius); text-align: left; font: var(--ui-weight) var(--ui-size) / var(--ui-line) var(--ui-font); }
 .todo-destination-project button span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .todo-destination-project > button:first-child { font-weight: var(--weight-semibold); }
-.todo-destination-project .todo-destination-item { padding-left: var(--space-5); color: var(--muted); }
-.todo-destination-project button:hover { background: var(--surface-hover); }
-.todo-destination-project button[aria-pressed=true] { background: var(--accent-soft); color: var(--accent); }
+.todo-destination-project .todo-destination-item { padding-left: var(--space-5); color: var(--ui-text-secondary); }
+.todo-destination-project button:hover:not(:disabled) { background: var(--ui-hover); }
+.todo-destination-project button[aria-pressed=true]:not(:disabled) { background: var(--ui-selected); color: var(--ui-text-strong); }
+.todo-destination-project button:active:not(:disabled), .todo-destination-project button[aria-pressed=true]:active:not(:disabled) { background: var(--ui-pressed); }
+.todo-destination-project button:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: -2px; }
+.todo-destination-project button:disabled { opacity: .48; cursor: not-allowed; }
 .todo-move-dialog footer { display: flex; justify-content: flex-end; gap: var(--space-2); }
-.todo-primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
+.todo-primary { --alto-button-color: var(--ui-on-action); --alto-button-background: var(--ui-action); --alto-button-background-hover: var(--ui-action-hover); }
+.todo-move-dialog .todo-primary { color: var(--ui-on-action); background: var(--ui-action); border-color: transparent; }
+.todo-move-dialog .todo-primary:hover:not(:disabled) { background: var(--ui-action-hover); }
+.todo-move-dialog .todo-primary:active:not(:disabled) { background: var(--ui-action-pressed); }
 @media (max-width: 480px) {
   .todo-content { padding: var(--space-5) var(--space-3); }
   .todo-heading { margin-bottom: var(--space-4); }
diff --git a/program/plugins/ui-surfaces.client.tsx b/program/plugins/ui-surfaces.client.tsx
index b5c531a..60192f8 100644
--- a/program/plugins/ui-surfaces.client.tsx
+++ b/program/plugins/ui-surfaces.client.tsx
@@ -77,6 +77,7 @@ import {
 } from './ui/inspectors.js'
 import { PluginsPanel } from './ui/plugins.js'
 import { ProjectSettings } from './ui/project-settings.js'
+import { uiStyles } from './ui/appearance.js'
 import { SettingsRadioMark, SettingsRow, SettingsSwitch } from './ui/settings.js'
 import { currentSessionModelSummary, ModelDefaultsSettings } from './ui/model-defaults.js'
 import defaultStyles from './ui/default.css'
@@ -162,7 +163,7 @@ function ModalNavButton({
   onClick: () => void
 }): ReactNode {
   return (
-    <button className={`program-modal-nav-item ${active ? 'active' : ''}`} type="button" onClick={onClick}>
+    <button className={`${uiStyles.row} program-modal-nav-item ${active ? 'active' : ''}`} type="button" aria-current={active ? 'page' : undefined} onClick={onClick}>
       {icon}
       <span>{label}</span>
     </button>
@@ -250,12 +251,12 @@ function SettingsWorkspace({
 
   return (
     <ConversationPaneOverlay className="program-modal-backdrop" onMouseDown={close}>
-      <section className="program-modal" role="dialog" aria-modal="true" aria-label="Settings" onMouseDown={(event) => event.stopPropagation()}>
+      <section className={`${uiStyles.dialog} program-modal`} role="dialog" aria-modal="true" aria-label="Settings" onMouseDown={(event) => event.stopPropagation()}>
         <aside className="program-modal-sidebar">
           <div className="program-modal-sidebar-title">Settings</div>
-          <label className="program-modal-search">
+          <label className={`${uiStyles.field} program-modal-search`}>
             <Search size={14} />
-            <input value={query} placeholder="Search settings…" onChange={(event) => setQuery(event.target.value)} />
+            <input className={uiStyles.input} value={query} placeholder="Search settings…" onChange={(event) => setQuery(event.target.value)} />
           </label>
           <div className="program-modal-nav-group">
             <span>Personal</span>
@@ -294,7 +295,7 @@ function SettingsWorkspace({
         <main className="program-modal-content">
           <header className="program-modal-titlebar">
             <h1>{sectionTitle}</h1>
-            <button className="icon-button compact" type="button" aria-label="Close settings" onClick={close}><X size={15} /></button>
+            <button className={`${uiStyles.iconButton} icon-button compact`} type="button" aria-label="Close settings" onClick={close}><X size={15} /></button>
           </header>
 
           {section === 'general' && (
diff --git a/program/plugins/ui/appearance-tokens.css b/program/plugins/ui/appearance-tokens.css
new file mode 100644
index 0000000..37ce3ac
--- /dev/null
+++ b/program/plugins/ui/appearance-tokens.css
@@ -0,0 +1,80 @@
+/* App-wide roles inherit the selected palette, including body-mounted portals.
+   The window's decorative accent and native material remain independent. */
+:root {
+  --ui-font: var(--composer-font);
+  --sans: var(--ui-font);
+  --display: var(--sans);
+  --ui-size: var(--type-label);
+  --ui-weight: var(--weight-medium);
+  --ui-line: var(--line-control);
+  --ui-text: var(--text);
+  --ui-text-strong: var(--text-strong);
+  --ui-text-secondary: color-mix(in srgb, var(--text) 80%, var(--muted));
+  --ui-surface: var(--panel-solid);
+  --ui-surface-inset: var(--canvas);
+  --ui-border: var(--border);
+  --ui-divider: var(--border-soft);
+  --ui-control-fill: color-mix(in srgb, currentColor 6%, transparent);
+  --ui-hover: color-mix(in srgb, currentColor 9%, transparent);
+  --ui-pressed: color-mix(in srgb, currentColor 14%, transparent);
+  --ui-selected: color-mix(in srgb, currentColor 12%, transparent);
+  --ui-control-radius: var(--radius-pill);
+  --ui-row-radius: var(--radius-row);
+  --ui-field-radius: var(--radius-row);
+  --ui-field-fill: color-mix(in srgb, var(--text) 4%, transparent);
+  --ui-field-border: var(--border);
+  /* A 12px inset fits a 12px inner curve inside a 24px panel. Keep
+     compact targets, two-line choices, and dialog gutters as distinct roles. */
+  --ui-panel-inset: var(--space-3);
+  --ui-dialog-inset: calc(2 * var(--space-3));
+  --ui-row-min-height: var(--control-default);
+  --ui-row-block-padding: calc(var(--space-3) / 2);
+  --ui-row-inline-padding: var(--space-3);
+  --ui-row-gap: var(--space-2);
+  --ui-choice-row-min-height: calc(var(--control-default) + var(--space-3) + var(--space-2));
+  --ui-field-min-height: var(--control-default);
+  --ui-field-inline-padding: var(--space-3);
+  --ui-control-gap: var(--space-2);
+  --ui-control-inline-padding: var(--space-3);
+  --ui-icon-slot: var(--control-icon);
+  --ui-panel-radius: var(--radius-dialog);
+  --ui-panel-shadow: var(--shadow-popover);
+  --ui-dialog-radius: var(--radius-dialog);
+  --ui-dialog-shadow: var(--shadow-modal);
+  --ui-scrim: color-mix(in srgb, var(--bg) 24%, transparent);
+  --ui-action: light-dark(
+    oklch(from var(--accent) clamp(0.35, l, 0.52) c h),
+    oklch(from var(--accent) clamp(0.72, l, 0.84) c h));
+  --ui-on-action: light-dark(white, color-mix(in srgb, black 94%, var(--accent)));
+  --ui-action-hover: color-mix(in srgb, var(--ui-action) 92%, light-dark(black, white));
+  --ui-action-pressed: color-mix(in srgb, var(--ui-action) 84%, light-dark(black, white));
+  --ui-danger: light-dark(
+    oklch(from var(--danger) clamp(0.35, l, 0.52) c h),
+    oklch(from var(--danger) clamp(0.72, l, 0.84) c h));
+  /* Focus belongs to the control's edge, independently of the accent action. */
+  --ui-focus: color-mix(in srgb, var(--ui-text-strong) 72%, var(--ui-surface));
+  --ui-switch-off: color-mix(in srgb, var(--text) 22%, transparent);
+  --ui-switch-on: var(--ui-action);
+  --ui-switch-thumb: var(--ui-surface);
+  --button-font-size: var(--ui-size);
+  --button-font-weight: var(--ui-weight);
+  /* Existing primitives resolve through the same roles during migration. */
+  --button-background: var(--ui-control-fill);
+  --button-background-hover: var(--ui-hover);
+  --button-radius: var(--ui-control-radius);
+  --button-shadow: none;
+  --button-shadow-hover: none;
+  --surface-hover: var(--ui-hover);
+  --surface-selected: var(--ui-selected);
+  --floating-row-hover: var(--ui-hover);
+  --floating-row-selected: var(--ui-selected);
+  --floating-panel: var(--ui-surface);
+  --floating-panel-border: var(--ui-border);
+  --floating-panel-radius: var(--ui-panel-radius);
+  --floating-panel-shadow: var(--ui-panel-shadow);
+  --accent-focus: var(--ui-focus);
+  --accent-ring: color-mix(in srgb, var(--ui-focus) 20%, transparent);
+  --composer-focus-shadow: 0 0 0 1px var(--ui-focus);
+  --icon-button-radius: var(--ui-control-radius);
+  --toolbar-icon-button-radius: var(--ui-control-radius);
+}
diff --git a/program/plugins/ui/appearance.ts b/program/plugins/ui/appearance.ts
new file mode 100644
index 0000000..6f8c9ac
--- /dev/null
+++ b/program/plugins/ui/appearance.ts
@@ -0,0 +1,17 @@
+import { clientStyles } from '../../../src/client/plugin-api.js'
+
+/** Visual roles shared by built-in surfaces. Features retain their own layout. */
+export const uiStyles = {
+  button: clientStyles.button,
+  iconButton: clientStyles.iconButton,
+  dialog: 'alto-dialog',
+  panel: 'alto-popup-panel',
+  row: 'alto-choice-row',
+  field: 'alto-field',
+  input: 'alto-input',
+  title: 'alto-control-title',
+  description: 'alto-control-description',
+  segment: 'alto-segment',
+  tooltip: 'alto-tooltip',
+  key: 'alto-keycap',
+} as const
diff --git a/program/plugins/ui/controls.css b/program/plugins/ui/controls.css
new file mode 100644
index 0000000..0e783ac
--- /dev/null
+++ b/program/plugins/ui/controls.css
@@ -0,0 +1,187 @@
+/* Public primitives own paint and type; features retain target sizes and layout.
+   A native button still gets shared type and keyboard focus before opting in. */
+:where(button) {
+  font-family: var(--ui-font);
+  font-size: var(--ui-size);
+  font-weight: var(--ui-weight);
+  line-height: var(--ui-line);
+}
+
+:where(button:focus-visible) {
+  outline: 2px solid var(--ui-focus);
+  outline-offset: 2px;
+}
+
+:is(.alto-button, .button) {
+  color: var(--alto-button-color, var(--ui-text));
+  border-color: var(--alto-button-border, transparent);
+  border-radius: var(--alto-button-radius, var(--ui-control-radius));
+  background: var(--alto-button-background, var(--ui-control-fill));
+  box-shadow: var(--alto-button-shadow, none);
+  font-family: var(--ui-font);
+  font-size: var(--alto-button-font-size, var(--ui-size));
+  font-weight: var(--alto-button-font-weight, var(--ui-weight));
+  line-height: var(--ui-line);
+  transition: none;
+}
+
+:is(.alto-button, .button):hover:not(:disabled) {
+  border-color: var(--alto-button-border-hover, transparent);
+  background: var(--alto-button-background-hover, var(--ui-hover));
+  box-shadow: var(--alto-button-shadow-hover, none);
+}
+
+:is(.alto-button, .button):active:not(:disabled) {
+  background: var(--ui-pressed);
+  transform: none;
+}
+
+:is(.alto-button, .button).ghost {
+  border-color: transparent;
+  background: transparent;
+  box-shadow: none;
+}
+
+:is(.alto-button, .button).ghost:hover:not(:disabled) {
+  background: var(--alto-button-background-hover, var(--ui-hover));
+}
+
+:is(.alto-button, .button).ghost:active:not(:disabled) { background: var(--ui-pressed); }
+
+:is(.alto-button, .button).primary,
+.composer .send-button:not(.stop):not(:disabled) {
+  color: var(--ui-on-action);
+  border-color: transparent;
+  background: var(--ui-action);
+  box-shadow: none;
+}
+
+:is(.alto-button, .button).primary:hover:not(:disabled),
+.composer .send-button:not(.stop):not(:disabled):hover {
+  color: var(--ui-on-action);
+  border-color: transparent;
+  background: var(--ui-action-hover);
+  box-shadow: none;
+  filter: none;
+}
+
+:is(.alto-button, .button).primary:active:not(:disabled),
+.composer .send-button:not(.stop):not(:disabled):active { background: var(--ui-action-pressed); }
+
+:is(.alto-button, .button).danger { color: var(--ui-danger); }
+:is(.alto-button, .button).danger:hover:not(:disabled) { background: color-mix(in srgb, var(--ui-danger) 9%, transparent); }
+:is(.alto-button, .button).danger:active:not(:disabled) { background: color-mix(in srgb, var(--ui-danger) 14%, transparent); }
+
+:where(.alto-button, .button, .alto-icon-button, .icon-button) {
+  --icon-scale: 1;
+  --icon-opacity: 1;
+}
+
+:is(.alto-icon-button, .icon-button) {
+  color: var(--alto-button-color, var(--ui-text));
+  border-radius: var(--alto-icon-button-radius, var(--ui-control-radius));
+  transition: none;
+}
+
+:is(.alto-icon-button, .icon-button):hover:not(:disabled) {
+  color: var(--alto-button-color, var(--ui-text));
+  background: var(--alto-button-background-hover, var(--ui-hover));
+}
+
+:is(.alto-icon-button, .icon-button):is([aria-pressed='true'], [aria-haspopup][aria-expanded='true']):not(:disabled),
+:where(.alto-toolbar, .alto-pane-toolbar) .alto-icon-button[aria-pressed='true']:not(:disabled) {
+  color: var(--alto-button-color, var(--ui-text));
+  background: var(--ui-selected);
+}
+
+:is(.alto-icon-button, .icon-button):active:not(:disabled),
+:is(.alto-icon-button, .icon-button):is([aria-pressed='true'], [aria-haspopup][aria-expanded='true']):active:not(:disabled) {
+  background: var(--ui-pressed);
+}
+
+:is(.alto-icon-button, .icon-button).danger { color: var(--ui-danger); }
+:is(.alto-icon-button, .icon-button).danger:hover:not(:disabled) { color: var(--ui-danger); background: color-mix(in srgb, var(--ui-danger) 9%, transparent); }
+:is(.alto-icon-button, .icon-button).danger:active:not(:disabled) { background: color-mix(in srgb, var(--ui-danger) 14%, transparent); }
+
+/* Composer's existing controls use the same roles without replacing the editor
+   owner or changing its surface, shape, or target heights. */
+.composer {
+  --composer-action-ink: var(--ui-text);
+  --composer-action-fill: var(--ui-control-fill);
+  --composer-action-hover-fill: var(--ui-hover);
+}
+
+.composer :is(.composer-attach, button.composer-workspace-trigger, .composer-permission-trigger, .composer-model-trigger) {
+  --icon-scale: 1;
+  --icon-opacity: 1;
+  color: var(--ui-text);
+  border-radius: var(--ui-control-radius);
+  background: transparent;
+  font-family: var(--ui-font);
+  font-weight: var(--ui-weight);
+  transition: none;
+}
+
+.composer :is(.composer-attach, button.composer-workspace-trigger, .composer-permission-trigger, .composer-model-trigger):hover:not(:disabled) {
+  color: var(--ui-text);
+  background: var(--ui-hover);
+}
+
+.composer :is(button.composer-workspace-trigger, .composer-permission-trigger, .composer-model-trigger)[aria-expanded='true']:not(:disabled) {
+  background: var(--ui-selected);
+}
+
+.composer .composer-permission-trigger.mode-auto,
+.composer .composer-permission-trigger.mode-auto:is(:hover, :active, :focus-visible):not(:disabled) { color: var(--ui-action); }
+
+.composer :is(.composer-attach, button.composer-workspace-trigger, .composer-permission-trigger, .composer-model-trigger):active:not(:disabled),
+.send-button.stop:active:not(:disabled) { background: var(--ui-pressed); }
+
+/* Structured toolbar modes predate the shared segment class. */
+.alto-toolbar-modes > button {
+  color: var(--ui-text);
+  border-radius: var(--ui-control-radius);
+  font-family: var(--ui-font);
+  font-size: var(--ui-size);
+  font-weight: var(--ui-weight);
+  transition: none;
+}
+
+.alto-toolbar-modes > button:hover:not(:disabled) { color: var(--ui-text); background: var(--ui-hover); }
+
+.alto-toolbar-modes > button.is-active,
+.alto-toolbar-modes > button:first-child.is-active,
+.alto-toolbar-modes > button.is-active:hover:not(:disabled) {
+  color: var(--ui-text-strong);
+  background: var(--ui-selected);
+}
+
+.alto-toolbar-modes > button:active:not(:disabled),
+.alto-toolbar-modes > button.is-active:active:not(:disabled) { background: var(--ui-pressed); }
+
+:is(.alto-button, .button, .alto-icon-button, .icon-button, .alto-toolbar-modes > button):focus-visible,
+.composer :is(.composer-attach, button.composer-workspace-trigger, .composer-permission-trigger, .composer-model-trigger, .send-button):focus-visible {
+  outline: 2px solid var(--ui-focus);
+  outline-offset: 2px;
+  box-shadow: none;
+}
+
+/* Restore disabled controls after legacy hover selectors. */
+:is(.alto-icon-button, .icon-button):disabled,
+.composer :is(.composer-attach, button.composer-workspace-trigger, .composer-permission-trigger, .composer-model-trigger):disabled {
+  color: var(--alto-button-color, var(--ui-text));
+  background: transparent;
+}
+
+.send-button:disabled { color: var(--ui-text); background: var(--ui-control-fill); }
+
+/* A small press response leaves hover painting and navigation rows immediate. */
+@media (prefers-reduced-motion: no-preference) {
+  :is(.alto-button, .button) { transition: transform 100ms ease-out; }
+  :is(.alto-button, .button):active:not(:disabled) { transform: scale(0.98); }
+}
+
+@media (forced-colors: active) {
+  :is(.alto-button, .button, .alto-icon-button, .icon-button):focus-visible,
+  .composer button:focus-visible { outline-color: Highlight; }
+}
diff --git a/program/plugins/ui/default.css b/program/plugins/ui/default.css
index 940d432..d228dff 100644
--- a/program/plugins/ui/default.css
+++ b/program/plugins/ui/default.css
@@ -502,35 +502,35 @@ button { color: inherit; }
   height: 34px;
   min-width: 0;
   padding: 0 10px;
-  color: var(--text);
-  border: 1px solid var(--border);
-  border-radius: 9px;
+  color: var(--ui-text);
+  border: 1px solid var(--ui-field-border);
+  border-radius: var(--ui-field-radius);
   outline: none;
-  background: rgba(255, 255, 255, 0.72);
-  box-shadow: inset 0 1px rgba(255, 255, 255, 0.8);
+  background: var(--ui-field-fill);
+  box-shadow: none;
   font-size: 12px;
 }
 
 .question input:focus,
 .question select:focus {
-  border-color: var(--accent-focus);
-  box-shadow: 0 0 0 3px var(--accent-ring);
-}
+  border-color: var(--ui-focus);
+  box-shadow: none;
+  outline: 2px solid var(--ui-focus); outline-offset: -2px; }
 
 .project-settings {
   display: grid;
-  gap: 7px;
-  margin-bottom: 2px;
-  padding-bottom: 10px;
+  gap: var(--ui-row-gap);
+  margin-bottom: 0;
+  padding-bottom: var(--ui-panel-inset);
   border-bottom: 1px solid var(--border-soft);
 }
 
 .project-settings > header,
 .project-settings-form > header {
-  min-height: 25px;
+  min-height: var(--ui-row-min-height);
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--ui-row-gap);
 }
 
 .project-settings > header > span {
@@ -542,46 +542,37 @@ button { color: inherit; }
 .project-settings > header > button,
 .project-settings-form > header > button,
 .project-settings-edit {
-  width: 25px;
-  height: 25px;
+  --alto-icon-button-size: var(--ui-icon-slot);
+  width: var(--ui-icon-slot);
+  height: var(--ui-icon-slot);
   display: grid;
   place-items: center;
   margin-left: auto;
   padding: 0;
-  color: var(--muted);
-  border: 0;
-  border-radius: 8px;
-  background: transparent;
   cursor: pointer;
 }
-
-.project-settings > header > button:hover,
-.project-settings-form > header > button:hover,
-.project-settings-edit:hover { color: var(--accent); background: var(--accent-soft); }
 .project-settings button:disabled { opacity: 0.45; cursor: not-allowed; }
-.project-settings-list { display: grid; gap: 2px; }
+.project-settings-list { display: grid; gap: var(--space-1); }
 
 .project-settings-row {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) 28px;
+  grid-template-columns: minmax(0, 1fr) var(--ui-row-min-height);
   align-items: center;
-  border-radius: 10px;
+  border-radius: var(--ui-row-radius);
 }
 .project-settings-row.managed { grid-template-columns: minmax(0, 1fr); }
-.project-settings-row:hover { background: var(--panel-soft); }
-.project-settings-row.active { background: var(--accent-soft); }
+.project-settings-row:hover { background: var(--ui-hover); }
+.project-settings-row.active { background: var(--ui-selected); }
 
 .project-settings-select {
+  --ui-row-min-height: var(--ui-choice-row-min-height);
   min-width: 0;
-  min-height: 39px;
   display: grid;
-  grid-template-columns: 17px minmax(0, 1fr);
+  grid-template-columns: var(--ui-icon-slot) minmax(0, 1fr);
   align-items: center;
-  gap: 8px;
-  padding: 5px 7px;
-  color: var(--muted);
+  color: var(--ui-text);
   border: 0;
-  border-radius: 10px;
+  border-radius: var(--ui-row-radius);
   background: transparent;
   text-align: left;
   cursor: pointer;
@@ -594,58 +585,51 @@ button { color: inherit; }
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.project-settings-select strong { color: var(--text-strong); font-size: 12.5px; font-weight: 580; }
-.project-settings-select small { margin-top: 2px; color: var(--text); font-size: 11.5px; }
-.project-settings-edit { margin: 0 3px 0 0; }
+.project-settings-select strong { color: var(--ui-text-strong); font-size: var(--ui-size); font-weight: var(--ui-weight); }
+.project-settings-select small { margin-top: var(--space-1); color: var(--ui-text-secondary); font-size: var(--type-supporting); }
+.project-settings-edit { justify-self: center; margin: 0; }
 
 .project-settings-form {
   display: grid;
-  gap: 8px;
-  margin-top: 3px;
-  padding: 9px;
-  border: 1px solid var(--border-soft);
-  border-radius: 11px;
-  background: var(--panel-solid);
-}
-.project-settings-form > header strong { color: var(--text-strong); font-size: 12.5px; font-weight: 600; }
-.project-settings-form label { display: grid; gap: 4px; color: var(--text); font-size: 12px; }
-.project-settings-form label > span { display: flex; justify-content: space-between; }
-.project-settings-form label small { color: var(--text); font-size: 11.5px; }
+  gap: var(--ui-panel-inset);
+  margin-top: 0;
+  padding: var(--ui-panel-inset);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-panel-radius);
+  background: var(--ui-surface-inset);
+}
+.project-settings-form > header strong { color: var(--ui-text-strong); font-size: var(--ui-size); font-weight: var(--ui-weight); }
+.project-settings-form label { min-width: 0; display: grid; gap: var(--space-1); color: var(--ui-text); font-size: var(--ui-size); }
+.project-settings-form label > span { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--ui-row-gap); }
+.project-settings-form label small { color: var(--ui-text-secondary); font-size: var(--type-supporting); }
 .project-settings-form input,
 .project-settings-form textarea {
   width: 100%;
   min-width: 0;
-  padding: 7px 9px;
-  color: var(--text-strong);
-  border: 1px solid var(--border-strong);
-  border-radius: 8px;
+  padding: var(--ui-row-block-padding) var(--ui-field-inline-padding);
+  color: var(--ui-text);
+  border: 1px solid var(--ui-field-border);
+  border-radius: var(--ui-field-radius);
   outline: 0;
-  background: var(--canvas);
+  background: var(--ui-field-fill);
   font-size: 12.5px;
   line-height: 1.4;
   resize: vertical;
 }
-.project-settings-form :is(input, textarea)::placeholder { color: var(--text); }
-.project-settings-form input { height: 32px; }
+.project-settings-form :is(input, textarea)::placeholder { color: var(--ui-text-secondary); }
+.project-settings-form input { height: auto; }
 .project-settings-form input:focus,
-.project-settings-form textarea:focus { border-color: var(--accent-focus); box-shadow: 0 0 0 3px var(--accent-ring); }
+.project-settings-form textarea:focus { border-color: var(--ui-focus); box-shadow: none; outline: 2px solid var(--ui-focus); outline-offset: -2px; }
 .project-settings-error { color: var(--red); font-size: 10.5px; line-height: 1.4; }
-.project-settings-form footer { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
-.project-settings-form footer > button {
-  min-height: 29px;
-  display: inline-flex;
+.project-settings-form footer {
+  --alto-button-height: var(--ui-field-min-height);
+  display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  gap: 5px;
-  padding: 0 10px;
-  border: 0;
-  border-radius: 8px;
-  font-size: 11px;
-  cursor: pointer;
+  justify-content: flex-end;
+  gap: var(--ui-control-gap);
 }
-.project-settings-remove { margin-right: auto; color: color-mix(in srgb, var(--red) 70%, var(--text-strong)); background: transparent; }
-.project-settings-remove:hover { background: rgba(207, 102, 113, 0.08); }
-.project-settings-save { color: var(--accent-text); background: var(--accent); }
-.project-settings-save:hover { filter: brightness(0.96); }
+.project-settings-remove { margin-right: auto; }
 
 .workspace-creator-backdrop {
   position: fixed;
@@ -655,136 +639,117 @@ button { color: inherit; }
   left: 0;
   width: 100vw;
   display: grid;
-  place-items: start center;
-  padding: min(14dvh, 116px) 16px 16px;
+  place-items: center;
+  padding: var(--ui-dialog-inset);
   overflow: hidden;
-  background: rgba(50, 53, 67, 0.11);
-  -webkit-backdrop-filter: blur(4px);
-  backdrop-filter: blur(4px);
+  background: var(--ui-scrim);
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
 }
 
 .workspace-creator {
   width: min(430px, 100%);
-  max-height: calc(100dvh - 32px);
+  max-height: calc(100dvh - (2 * var(--ui-dialog-inset)));
+  display: flex;
+  flex-direction: column;
   overflow: hidden;
-  border: 1px solid var(--border);
-  border-radius: 17px;
-  background: var(--floating-panel);
-  box-shadow: var(--floating-panel-shadow);
   animation: workspace-creator-in 150ms ease-out;
 }
 
 .workspace-creator > header {
   display: grid;
-  grid-template-columns: 34px minmax(0, 1fr) 28px;
+  flex: 0 0 auto;
+  grid-template-columns: var(--ui-field-min-height) minmax(0, 1fr) var(--ui-icon-slot);
   align-items: center;
-  gap: 10px;
-  padding: 16px 16px 13px;
-  border-bottom: 1px solid var(--border-soft);
+  gap: var(--ui-panel-inset);
+  padding: var(--ui-dialog-inset);
+  border-bottom: 1px solid var(--ui-divider);
 }
 
 .workspace-creator-icon {
-  width: 34px;
-  height: 34px;
+  width: var(--ui-field-min-height);
+  height: var(--ui-field-min-height);
   display: grid;
   place-items: center;
   color: var(--accent);
   border: 1px solid var(--accent-border);
-  border-radius: 10px;
+  border-radius: var(--ui-row-radius);
   background: var(--accent-soft);
 }
 
 .workspace-creator > header strong {
   display: block;
-  color: var(--text-strong);
+  color: var(--ui-text-strong);
   font-size: 14px;
-  font-weight: 620;
+  font-weight: var(--ui-weight);
   line-height: 1.25;
 }
 
 .workspace-creator > header p {
-  margin: 2px 0 0;
-  color: var(--text);
-  font-size: 11.5px;
+  margin: var(--space-1) 0 0;
+  color: var(--ui-text-secondary);
+  font-size: var(--type-supporting);
   line-height: 1.35;
 }
 
 .workspace-creator > header > button {
-  width: 28px;
-  height: 28px;
+  --alto-icon-button-size: var(--ui-icon-slot);
+  width: var(--ui-icon-slot);
+  height: var(--ui-icon-slot);
   display: grid;
   place-items: center;
   padding: 0;
-  color: var(--muted);
-  border: 0;
-  border-radius: 8px;
-  background: transparent;
   cursor: pointer;
 }
 
-.workspace-creator > header > button:hover:not(:disabled) {
-  color: var(--text-strong);
-  background: var(--panel-soft);
-}
-
 .workspace-creator-form {
   display: grid;
-  gap: 11px;
-  max-height: calc(100dvh - 132px);
+  min-height: 0;
+  gap: var(--ui-panel-inset);
   overflow-y: auto;
-  padding: 15px 16px 16px;
+  padding: var(--ui-dialog-inset);
 }
 
 .workspace-creator-form label {
+  min-width: 0;
   display: grid;
-  gap: 5px;
-  color: var(--text);
-  font-size: 12px;
-  font-weight: 520;
+  gap: var(--space-1);
+  color: var(--ui-text);
+  font-size: var(--ui-size);
+  font-weight: var(--ui-weight);
 }
 
-.workspace-creator-form label > span { display: flex; justify-content: space-between; }
-.workspace-creator-form label small { color: var(--text); font-size: 11.5px; font-weight: 450; }
+.workspace-creator-form label > span { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--ui-row-gap); }
+.workspace-creator-form label small { color: var(--ui-text-secondary); font-size: var(--type-supporting); font-weight: var(--weight-regular); }
 .workspace-creator-form input,
 .workspace-creator-form textarea {
   width: 100%;
   min-width: 0;
-  padding: 8px 10px;
-  color: var(--text-strong);
-  border: 1px solid var(--border-strong);
-  border-radius: 9px;
+  padding: var(--ui-row-block-padding) var(--ui-field-inline-padding);
+  color: var(--ui-text);
+  border: 1px solid var(--ui-field-border);
+  border-radius: var(--ui-field-radius);
   outline: 0;
-  background: var(--canvas);
+  background: var(--ui-field-fill);
   font-size: 12.5px;
   line-height: 1.45;
   resize: vertical;
 }
-.workspace-creator-form :is(input, textarea)::placeholder { color: var(--text); }
-.workspace-creator-form input { height: 35px; }
+.workspace-creator-form :is(input, textarea)::placeholder { color: var(--ui-text-secondary); }
+.workspace-creator-form input { height: auto; }
 .workspace-creator-form input:focus,
 .workspace-creator-form textarea:focus {
-  border-color: var(--accent-focus);
-  box-shadow: 0 0 0 3px var(--accent-ring);
-}
+  border-color: var(--ui-focus);
+  box-shadow: none;
+  outline: 2px solid var(--ui-focus); outline-offset: -2px; }
 
-.workspace-creator-note { margin: -2px 0 0; color: var(--text); font-size: 11.5px; }
-.workspace-creator-form footer { display: flex; justify-content: flex-end; gap: 7px; margin-top: 2px; }
-.workspace-creator-form footer button {
-  min-height: 31px;
-  padding: 0 12px;
-  color: var(--text-strong);
-  border: 1px solid var(--border);
-  border-radius: 9px;
-  background: var(--panel-solid);
-  font-size: 12px;
-  font-weight: 550;
-  cursor: pointer;
-}
-.workspace-creator-form footer button:hover:not(:disabled) { background: var(--panel-soft); }
-.workspace-creator-form footer button.primary {
-  color: var(--accent-text);
-  border-color: var(--accent);
-  background: var(--accent);
+.workspace-creator-note { margin: 0; color: var(--ui-text-secondary); font-size: var(--type-supporting); }
+.workspace-creator-form footer {
+  --alto-button-height: var(--ui-field-min-height);
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: var(--ui-control-gap);
 }
 .workspace-creator-form button:disabled { opacity: 0.48; cursor: not-allowed; }
 
@@ -2003,14 +1968,14 @@ pre.activity-content {
   min-width: 0;
   max-width: 100%;
   padding: var(--space-2);
-  color: var(--text);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-row);
-  background: var(--panel-solid);
-}
-.approval-body :is(input, textarea)::placeholder { color: var(--text); opacity: 1; }
-.approval-body select option { color: var(--text); background: var(--panel-solid); }
-.approval-body :is(input, textarea, select):focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
+  color: var(--ui-text);
+  border: 1px solid var(--ui-field-border);
+  border-radius: var(--ui-field-radius);
+  background: var(--ui-field-fill);
+}
+.approval-body :is(input, textarea)::placeholder { color: var(--ui-text-secondary); opacity: 1; }
+.approval-body select option { color: var(--ui-text); background: var(--ui-surface); }
+.approval-body :is(input, textarea, select):focus-visible { outline: 2px solid var(--ui-focus); outline-offset: -2px; }
 .approval-body :is(input, textarea, select):disabled { cursor: not-allowed; opacity: .65; }
 .approval-body .button {
   --alto-button-height: var(--control-compact);
@@ -2050,11 +2015,11 @@ details pre {
 .generic-response textarea {
   min-height: 80px;
   padding: 8px;
-  color: var(--text);
-  border: 1px solid var(--border);
-  border-radius: 9px;
+  color: var(--ui-text);
+  border: 1px solid var(--ui-field-border);
+  border-radius: var(--ui-field-radius);
   outline: none;
-  background: var(--panel-solid);
+  background: var(--ui-field-fill);
   font: 11px var(--mono);
 }
 
@@ -2361,13 +2326,13 @@ button.composer-workspace-trigger:focus-visible { color: var(--text); background
   width: 270px;
   overflow: hidden;
   padding: 7px;
-  color: var(--text);
-  border: 1px solid color-mix(in srgb, var(--border) 78%, white);
-  border-radius: var(--radius-md, 18px);
-  background: rgba(247, 248, 251, 0.97);
-  box-shadow: 0 20px 52px rgba(33, 36, 49, 0.14), 0 2px 7px rgba(33, 36, 49, 0.055);
-  -webkit-backdrop-filter: blur(28px) saturate(118%);
-  backdrop-filter: blur(28px) saturate(118%);
+  color: var(--ui-text);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-panel-radius);
+  background: var(--ui-surface);
+  box-shadow: var(--ui-panel-shadow);
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
 }
 
 .composer-workspace-picker > button {
@@ -2378,23 +2343,24 @@ button.composer-workspace-trigger:focus-visible { color: var(--text); background
   align-items: center;
   gap: 8px;
   padding: 6px 9px;
-  color: var(--text);
+  color: var(--ui-text);
   border: 0;
-  border-radius: var(--radius-sm, 12px);
+  border-radius: var(--ui-row-radius);
   background: transparent;
   font: 500 12.5px/1.2 var(--sans);
   text-align: left;
   cursor: pointer;
+  transition: none;
 }
 
-.composer-workspace-picker > button:hover { background: color-mix(in srgb, var(--accent) 8%, white); }
+.composer-workspace-picker > button:hover { background: var(--ui-hover); }
 .composer-workspace-picker > button:disabled { opacity: 0.5; cursor: default; }
 .composer-workspace-picker > button:disabled:hover { background: transparent; }
-.composer-workspace-picker > button > svg:first-child { color: var(--muted); }
-.composer-workspace-picker > button > svg:last-child { color: var(--accent); }
+.composer-workspace-picker > button > svg:first-child { color: var(--ui-text-secondary); }
+.composer-workspace-picker > button > svg:last-child { color: var(--ui-action); }
 .composer-workspace-picker > button > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
-.composer-workspace-empty { padding: 10px 9px; color: var(--dim); font-size: 11.5px; }
+.composer-workspace-empty { padding: 10px 9px; color: var(--ui-text-secondary); font-size: var(--type-supporting); }
 
 .composer-permission-trigger {
   height: 30px;
@@ -2425,13 +2391,13 @@ button.composer-workspace-trigger:focus-visible { color: var(--text); background
   width: 310px;
   overflow: hidden;
   padding: 7px;
-  color: var(--text);
-  border: 1px solid color-mix(in srgb, var(--border) 78%, white);
-  border-radius: var(--radius-md, 18px);
-  background: rgba(247, 248, 251, 0.97);
-  box-shadow: 0 20px 52px rgba(33, 36, 49, 0.14), 0 2px 7px rgba(33, 36, 49, 0.055);
-  -webkit-backdrop-filter: blur(28px) saturate(118%);
-  backdrop-filter: blur(28px) saturate(118%);
+  color: var(--ui-text);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-panel-radius);
+  background: var(--ui-surface);
+  box-shadow: var(--ui-panel-shadow);
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
 }
 
 .composer-permission-picker > button {
@@ -2442,20 +2408,21 @@ button.composer-workspace-trigger:focus-visible { color: var(--text); background
   align-items: center;
   gap: 9px;
   padding: 7px 9px;
-  color: var(--text);
+  color: var(--ui-text);
   border: 0;
-  border-radius: var(--radius-sm, 12px);
+  border-radius: var(--ui-row-radius);
   background: transparent;
   text-align: left;
   cursor: pointer;
+  transition: none;
 }
-.composer-permission-picker > button:hover { background: color-mix(in srgb, var(--accent) 8%, white); }
-.permission-option-icon { display: grid; place-items: center; color: var(--muted); }
-.composer-permission-picker .mode-auto .permission-option-icon { color: var(--accent); }
-.composer-permission-picker > button > svg { color: var(--accent); }
+.composer-permission-picker > button:hover { background: var(--ui-hover); }
+.permission-option-icon { display: grid; place-items: center; color: var(--ui-text-secondary); }
+.composer-permission-picker .mode-auto .permission-option-icon { color: var(--ui-action); }
+.composer-permission-picker > button > svg { color: var(--ui-action); }
 .permission-option-copy { min-width: 0; display: grid; gap: 3px; }
-.permission-option-copy strong { color: var(--text-strong); font-size: 12.5px; font-weight: 600; }
-.permission-option-copy small { overflow: hidden; color: var(--muted); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
+.permission-option-copy strong { color: var(--ui-text-strong); font-size: var(--ui-size); font-weight: var(--ui-weight); }
+.permission-option-copy small { overflow: hidden; color: var(--ui-text-secondary); font-size: var(--type-supporting); text-overflow: ellipsis; white-space: nowrap; }
 
 .composer-images {
   display: flex;
@@ -2573,12 +2540,13 @@ button.composer-workspace-trigger:focus-visible { color: var(--text); background
   overflow: auto;
   scrollbar-width: none;
   padding: 6px;
-  border: 1px solid color-mix(in srgb, var(--border) 78%, white);
-  border-radius: var(--radius-md, 18px);
-  background: rgba(247, 248, 251, 0.96);
-  box-shadow: 0 20px 52px rgba(33, 36, 49, 0.13), 0 2px 7px rgba(33, 36, 49, 0.055);
-  -webkit-backdrop-filter: blur(28px) saturate(118%);
-  backdrop-filter: blur(28px) saturate(118%);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-panel-radius);
+  background: var(--ui-surface);
+  box-shadow: var(--ui-panel-shadow);
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+  color: var(--ui-text);
 }
 
 .skill-picker::-webkit-scrollbar { display: none; }
@@ -2591,21 +2559,21 @@ button.composer-workspace-trigger:focus-visible { color: var(--text); background
   gap: 14px;
   min-height: 42px;
   padding: 8px 11px;
-  color: var(--muted);
+  color: var(--ui-text);
   border: 0;
-  border-radius: var(--radius-sm, 12px);
+  border-radius: var(--ui-row-radius);
   background: transparent;
   text-align: left;
   cursor: pointer;
-  transition: color 0.12s, background 0.12s;
+  transition: none;
 }
 
 .skill-picker button.active,
-.skill-picker button:hover { color: var(--text); background: color-mix(in srgb, var(--accent) 9%, white); }
-.skill-picker button > span:last-child { overflow: hidden; font-size: 11.5px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
-.skill-picker-name { overflow: hidden; color: var(--text-strong); font-size: 12.5px; font-weight: 600; letter-spacing: -0.01em; text-overflow: ellipsis; white-space: nowrap; }
-.skill-picker button.active .skill-picker-name { color: var(--accent); }
-.skill-picker-empty { padding: 14px 12px; color: var(--dim); font-size: 12px; text-align: center; }
+.skill-picker button:hover { color: var(--ui-text); background: var(--ui-hover); }
+.skill-picker button > span:last-child { overflow: hidden; font-size: var(--type-supporting); line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
+.skill-picker-name { overflow: hidden; color: var(--ui-text-strong); font-size: var(--ui-size); font-weight: var(--ui-weight); letter-spacing: -0.01em; text-overflow: ellipsis; white-space: nowrap; }
+.skill-picker button.active .skill-picker-name { color: var(--ui-text-strong); }
+.skill-picker-empty { padding: 14px 12px; color: var(--ui-text-secondary); font-size: var(--ui-size); text-align: center; }
 
 .composer-model-control,
 .composer-controls {
@@ -2646,13 +2614,13 @@ button.composer-workspace-trigger:focus-visible { color: var(--text); background
   width: min(300px, calc(100cqw - 2 * var(--composer-content-gutter)));
   overflow: hidden;
   padding: 7px;
-  color: var(--text);
-  border: 1px solid color-mix(in srgb, var(--border) 78%, white);
-  border-radius: var(--radius-md, 18px);
-  background: rgba(247, 248, 251, 0.97);
-  box-shadow: 0 20px 52px rgba(33, 36, 49, 0.14), 0 2px 7px rgba(33, 36, 49, 0.055);
-  -webkit-backdrop-filter: blur(28px) saturate(118%);
-  backdrop-filter: blur(28px) saturate(118%);
+  color: var(--ui-text);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-panel-radius);
+  background: var(--ui-surface);
+  box-shadow: var(--ui-panel-shadow);
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
 }
 
 .composer-picker-row {
@@ -2663,20 +2631,21 @@ button.composer-workspace-trigger:focus-visible { color: var(--text); background
   align-items: center;
   gap: 9px;
   padding: 7px 10px;
-  color: var(--text-strong);
+  color: var(--ui-text);
   border: 0;
-  border-radius: var(--radius-sm, 12px);
+  border-radius: var(--ui-row-radius);
   background: transparent;
   text-align: left;
   cursor: pointer;
+  transition: none;
 }
 
-.composer-picker-row:hover { background: color-mix(in srgb, var(--accent) 8%, white); }
-.composer-picker-row > span:nth-child(2) { min-width: 0; overflow: hidden; color: var(--muted); text-align: right; text-overflow: ellipsis; white-space: nowrap; }
-.composer-picker-row > svg { color: var(--dim); }
+.composer-picker-row:hover { background: var(--ui-hover); }
+.composer-picker-row > span:nth-child(2) { min-width: 0; overflow: hidden; color: var(--ui-text-secondary); text-align: right; text-overflow: ellipsis; white-space: nowrap; }
+.composer-picker-row > svg { color: var(--ui-text-secondary); }
 .composer-picker-row:disabled { opacity: 0.42; cursor: default; }
-.composer-picker-row.reset { grid-template-columns: minmax(0, 1fr) 16px; color: var(--muted); }
-.composer-picker-separator { height: 1px; margin: 5px 9px; background: var(--border-soft); }
+.composer-picker-row.reset { grid-template-columns: minmax(0, 1fr) 16px; color: var(--ui-text-secondary); }
+.composer-picker-separator { height: 1px; margin: 5px 9px; background: var(--ui-divider); }
 
 .composer-picker-header {
   position: relative;
@@ -2684,10 +2653,10 @@ button.composer-workspace-trigger:focus-visible { color: var(--text); background
   display: grid;
   place-items: center;
   padding: 0 40px;
-  color: var(--text-strong);
+  color: var(--ui-text-strong);
 }
 
-.composer-picker-header strong { font-size: 12.5px; font-weight: 620; }
+.composer-picker-header strong { font-size: var(--ui-size); font-weight: var(--ui-weight); }
 .composer-picker-header button {
   position: absolute;
   left: 3px;
@@ -2696,13 +2665,13 @@ button.composer-workspace-trigger:focus-visible { color: var(--text); background
   display: grid;
   place-items: center;
   padding: 0;
-  color: var(--muted);
+  color: var(--ui-text);
   border: 0;
-  border-radius: 999px;
+  border-radius: var(--ui-control-radius);
   background: transparent;
   cursor: pointer;
 }
-.composer-picker-header button:hover { color: var(--text); background: var(--panel-soft); }
+.composer-picker-header button:hover { color: var(--text); background: var(--ui-hover); }
 
 .composer-picker-options {
   max-height: min(300px, 40vh);
@@ -2718,15 +2687,16 @@ button.composer-workspace-trigger:focus-visible { color: var(--text); background
   align-items: center;
   gap: 8px;
   padding: 7px 10px;
-  color: var(--text);
+  color: var(--ui-text);
   border: 0;
-  border-radius: var(--radius-sm, 12px);
+  border-radius: var(--ui-row-radius);
   background: transparent;
   text-align: left;
   cursor: pointer;
+  transition: none;
 }
-.composer-picker-options > button:hover { background: color-mix(in srgb, var(--accent) 8%, white); }
-.composer-picker-options > button > svg { color: var(--accent); }
+.composer-picker-options > button:hover { background: var(--ui-hover); }
+.composer-picker-options > button > svg { color: var(--ui-action); }
 
 .send-button {
   position: absolute;
@@ -2843,15 +2813,15 @@ button.composer-workspace-trigger:focus-visible { color: var(--text); background
   height: 34px;
   min-width: 0;
   padding: 0 9px;
-  color: var(--text-strong);
-  border: 1px solid var(--border);
-  border-radius: 9px;
+  color: var(--ui-text);
+  border: 1px solid var(--ui-field-border);
+  border-radius: var(--ui-field-radius);
   outline: none;
-  background: rgba(255, 255, 255, 0.78);
+  background: var(--ui-field-fill);
   font-size: 12px;
 }
 
-.ui-input input:focus { border-color: var(--accent-focus); box-shadow: 0 0 0 3px var(--accent-ring); }
+.ui-input input:focus { border-color: var(--ui-focus); box-shadow: none; outline: 2px solid var(--ui-focus); outline-offset: -2px; }
 .ui-action { min-height: 31px; padding: 5px 9px; font-size: 11px; }
 .shell-slot-inline .ui-action {
   min-width: 28px;
@@ -2887,29 +2857,29 @@ button.composer-workspace-trigger:focus-visible { color: var(--text); background
   align-items: center;
   gap: var(--space-2);
   padding: 0 var(--space-3);
-  color: var(--text-supporting);
-  border: 1px solid var(--border-soft);
-  border-radius: var(--radius-row);
-  background: color-mix(in srgb, var(--panel-solid) 72%, transparent);
+  color: var(--ui-text-secondary);
+  border: 1px solid var(--ui-field-border);
+  border-radius: var(--ui-field-radius);
+  background: var(--ui-field-fill);
 }
 
 .plugins-search:focus-within {
-  border-color: var(--accent-focus);
-  box-shadow: 0 0 0 2px var(--accent-ring);
-}
+  border-color: var(--ui-focus);
+  box-shadow: none;
+  outline: 2px solid var(--ui-focus); outline-offset: -2px; }
 
 .plugins-search input {
   width: 100%;
   min-width: 0;
   padding: 0;
-  color: var(--text);
+  color: var(--ui-text);
   border: 0;
   outline: 0;
   background: transparent;
-  font-size: var(--type-label);
+  font-size: var(--ui-size);
 }
 
-.plugins-search input::placeholder { color: var(--text-supporting); }
+.plugins-search input::placeholder { color: var(--ui-text-secondary); }
 
 .plugin-category-filters {
   display: flex;
@@ -2925,34 +2895,36 @@ button.composer-workspace-trigger:focus-visible { color: var(--text); background
   height: var(--control-compact);
   flex: 0 0 auto;
   padding: 0 var(--space-3);
-  color: var(--text-secondary);
+  color: var(--ui-text);
   border: 0;
-  border-radius: var(--radius-pill);
+  border-radius: var(--ui-control-radius);
   background: transparent;
-  font-size: var(--type-supporting);
+  font-size: var(--ui-size);
   cursor: pointer;
+  font-family: var(--ui-font);
+  font-weight: var(--ui-weight);
 }
 
-.plugin-category-filters button:hover { color: var(--text); background: var(--surface-hover); }
-.plugin-category-filters button.is-selected { color: var(--text); background: var(--panel-soft); }
+.plugin-category-filters button:where(:hover:not(:disabled)) { color: var(--ui-text); background: var(--ui-hover); }
+.plugin-category-filters button.is-selected { color: var(--ui-text-strong); background: var(--ui-selected); }
 
 .plugin-list { display: grid; gap: var(--space-2); }
 .plugin-tree-node { position: relative; min-width: 0; }
 
 .plugin-list > .plugin-tree-node {
   overflow: hidden;
-  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
-  border-radius: var(--radius-row);
-  background: color-mix(in srgb, var(--panel-solid) 72%, transparent);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-panel-radius);
+  background: var(--ui-surface);
 }
 
 .plugin-row {
   display: grid;
-  grid-template-columns: 24px minmax(0, 1fr) 32px;
+  grid-template-columns: var(--ui-icon-slot) minmax(0, 1fr) var(--ui-field-min-height);
   align-items: center;
-  gap: var(--space-2);
-  min-height: 52px;
-  padding: var(--space-1) var(--space-2);
+  gap: var(--ui-row-gap);
+  min-height: var(--ui-choice-row-min-height);
+  padding: var(--ui-row-gap) var(--ui-row-inline-padding);
 }
 
 .plugin-row:hover { background: var(--surface-hover); }
@@ -2960,8 +2932,8 @@ button.composer-workspace-trigger:focus-visible { color: var(--text); background
 
 .plugin-disclosure,
 .plugin-disclosure-spacer {
-  width: 24px;
-  height: 24px;
+  width: var(--ui-icon-slot);
+  height: var(--ui-icon-slot);
 }
 
 .plugin-disclosure {
@@ -3015,12 +2987,12 @@ button.composer-workspace-trigger:focus-visible { color: var(--text); background
 .plugin-state-failed { color: var(--red); }
 
 .plugin-children {
-  margin: 0 var(--space-2) var(--space-2) 20px;
-  padding-left: var(--space-2);
+  margin: 0 var(--ui-panel-inset) var(--ui-panel-inset) var(--ui-icon-slot);
+  padding-left: var(--ui-panel-inset);
   border-left: 1px solid color-mix(in srgb, var(--border-soft) 76%, transparent);
 }
 
-.plugin-children .plugin-row { min-height: 48px; }
+.plugin-children .plugin-row { min-height: var(--ui-choice-row-min-height); }
 
 .plugin-switch {
   position: relative;
@@ -3030,7 +3002,7 @@ button.composer-workspace-trigger:focus-visible { color: var(--text); background
   border: 0;
   border-radius: var(--radius-pill);
   outline: 0;
-  background: #d7d9df;
+  background: var(--ui-switch-off);
   cursor: pointer;
   transition: background 160ms ease;
 }
@@ -3042,14 +3014,14 @@ button.composer-workspace-trigger:focus-visible { color: var(--text); background
   width: 14px;
   height: 14px;
   border-radius: 50%;
-  background: white;
-  box-shadow: 0 1px 3px rgba(35, 38, 51, 0.24);
+  background: var(--ui-switch-thumb);
+  box-shadow: none;
   transition: transform 160ms ease;
 }
 
-.plugin-switch.on { background: var(--accent); }
+.plugin-switch.on { background: var(--ui-switch-on); }
 .plugin-switch.on > span { transform: translateX(12px); }
-.plugin-switch:focus-visible { box-shadow: 0 0 0 3px var(--accent-ring); }
+.plugin-switch:focus-visible { box-shadow: 0 0 0 2px var(--ui-focus); }
 .plugin-switch:disabled { opacity: 0.5; cursor: wait; }
 
 .plugin-section-label {
@@ -3060,7 +3032,7 @@ button.composer-workspace-trigger:focus-visible { color: var(--text); background
 }
 
 .plugins-empty {
-  padding: var(--space-4);
+  padding: var(--ui-dialog-inset);
   color: var(--settings-helper-text);
   font-size: var(--type-supporting);
   text-align: center;
@@ -3099,9 +3071,9 @@ button.composer-workspace-trigger:focus-visible { color: var(--text); background
   width: 100vw;
   display: grid;
   place-items: center;
-  padding: var(--space-4);
+  padding: var(--ui-dialog-inset);
   overflow: hidden;
-  background: color-mix(in srgb, var(--bg) 24%, transparent);
+  background: var(--ui-scrim);
   -webkit-backdrop-filter: none;
   backdrop-filter: none;
   animation: program-modal-fade 150ms ease-out;
@@ -3109,136 +3081,132 @@ button.composer-workspace-trigger:focus-visible { color: var(--text); background
 }
 
 .program-modal {
-  width: min(960px, calc(100vw - (2 * var(--space-4))));
-  height: min(680px, calc(100dvh - (2 * var(--space-4))));
-  min-height: min(520px, calc(100dvh - (2 * var(--space-4))));
+  width: min(960px, 100%);
+  height: min(680px, calc(100dvh - (2 * var(--ui-dialog-inset))));
+  min-height: min(520px, calc(100dvh - (2 * var(--ui-dialog-inset))));
   display: grid;
   grid-template-columns: 210px minmax(0, 1fr);
   overflow: hidden;
-  color: var(--text);
-  border: 1px solid var(--border-soft);
-  border-radius: var(--radius-panel);
-  background: var(--panel-solid);
-  box-shadow: var(--shadow-modal);
   animation: program-modal-enter 170ms cubic-bezier(0.2, 0.72, 0.2, 1);
 }
 
 .program-modal-sidebar {
   min-width: 0;
-  padding: var(--space-4) var(--space-3);
-  border-right: 1px solid var(--border-soft);
-  background: color-mix(in srgb, var(--panel-soft) 68%, var(--panel-solid));
+  min-height: 0;
+  overflow-y: auto;
+  padding: var(--ui-dialog-inset) var(--ui-panel-inset);
+  border-right: 1px solid var(--ui-border);
+  background: var(--ui-surface-inset);
 }
 
 .program-modal-sidebar-title {
-  padding: 0 var(--space-2) var(--space-3);
-  color: var(--text-strong);
+  padding: 0 var(--ui-row-inline-padding) var(--ui-panel-inset);
+  color: var(--ui-text-strong);
   font-size: var(--type-body);
   font-weight: var(--weight-medium);
 }
 
 .program-modal-nav-item {
   width: 100%;
-  min-height: 30px;
   display: flex;
   align-items: center;
-  gap: var(--space-2);
-  padding: var(--space-1) var(--space-2);
-  color: var(--text-secondary);
+  color: var(--ui-text);
   border: 0;
-  border-radius: var(--radius-row);
+  border-radius: var(--ui-row-radius);
   background: transparent;
   text-align: left;
   cursor: pointer;
 }
 
-.program-modal-nav-item:hover { color: var(--text); background: var(--surface-hover); }
-.program-modal-nav-item.active { color: var(--text); background: var(--panel-soft); }
+.program-modal-nav-item:hover { color: var(--ui-text); background: var(--ui-hover); }
+.program-modal-nav-item.active { color: var(--ui-text-strong); background: var(--ui-selected); }
 
 .program-modal-search {
-  height: var(--control-default);
+  min-height: var(--ui-field-min-height);
   display: flex;
   align-items: center;
-  gap: 7px;
-  margin: 0 0 var(--space-4);
-  padding: 0 var(--space-2);
-  color: var(--text-supporting);
-  border: 1px solid var(--border-soft);
-  border-radius: var(--radius-row);
-  background: color-mix(in srgb, var(--panel-solid) 78%, transparent);
-}
-
-.program-modal-search:focus-within { border-color: var(--accent-focus); box-shadow: 0 0 0 2px var(--accent-ring); }
-.program-modal-search input { width: 100%; min-width: 0; padding: 0; color: var(--text); border: 0; outline: 0; background: transparent; font-size: var(--type-label); }
-.program-modal-search input::placeholder { color: var(--text-supporting); }
-
-.program-modal-nav-group { display: grid; gap: 2px; }
-.program-modal-nav-group + .program-modal-nav-group { margin-top: var(--space-4); }
-.program-modal-nav-group > span { padding: 0 var(--space-2) var(--space-1); color: var(--text-supporting); font-size: var(--type-supporting); font-weight: var(--weight-medium); }
+  gap: var(--ui-row-gap);
+  margin: 0 0 var(--ui-panel-inset);
+  padding: var(--ui-row-block-padding) var(--ui-field-inline-padding);
+  color: var(--ui-text-secondary);
+  border: 1px solid var(--ui-field-border);
+  border-radius: var(--ui-field-radius);
+  background: var(--ui-field-fill);
+}
+
+.program-modal-search:focus-within { border-color: var(--ui-focus); box-shadow: inset 0 0 0 2px var(--ui-focus); }
+.program-modal-search input { width: 100%; min-width: 0; padding: 0; color: var(--ui-text); border: 0; outline: 0; background: transparent; font-size: var(--ui-size); }
+.program-modal-search input::placeholder { color: var(--ui-text-secondary); }
+
+.program-modal-nav-group { display: grid; gap: var(--space-1); }
+.program-modal-nav-group + .program-modal-nav-group { margin-top: var(--ui-panel-inset); }
+.program-modal-nav-group > span { padding: 0 var(--ui-row-inline-padding) var(--space-1); color: var(--ui-text-secondary); font-size: var(--type-supporting); font-weight: var(--weight-medium); }
 .program-modal-nav-item { font-size: var(--type-label); }
 
 .program-modal-content {
-  --settings-helper-text: color-mix(in srgb, var(--text) 70%, var(--muted));
+  --settings-helper-text: var(--ui-text-secondary);
   min-width: 0;
   min-height: 0;
   overflow-y: auto;
-  padding: 28px 32px 36px;
-  background: var(--canvas);
+  padding: var(--ui-dialog-inset);
+  background: var(--ui-surface);
 }
 
+.program-modal .program-modal-content { container: settings-content / inline-size; }
+
 .program-modal-titlebar {
   width: 100%;
-  min-height: var(--control-default);
+  min-height: var(--ui-field-min-height);
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   justify-content: space-between;
-  gap: var(--space-4);
-  margin: 0 0 var(--space-4);
+  gap: var(--ui-panel-inset);
+  margin: 0 0 var(--ui-dialog-inset);
 }
 
-.program-modal-titlebar h1 { margin: 0; color: var(--text-strong); font: var(--weight-medium) 20px/1.3 var(--display); letter-spacing: normal; }
+.program-modal-titlebar h1 { margin: 0; color: var(--ui-text-strong); font: var(--weight-medium) 20px/1.3 var(--display); letter-spacing: normal; }
 .program-modal-titlebar p { margin: var(--space-1) 0 0; color: var(--settings-helper-text); font-size: var(--type-supporting); }
 .program-modal-titlebar > .icon-button { flex: 0 0 auto; }
 
 .settings-page,
 .plugins-workspace { width: 100%; margin: 0; }
-.settings-page { display: grid; gap: 24px; }
-.settings-section { display: grid; gap: 10px; }
-.settings-section > h2 { margin: 0; color: var(--text); font-size: var(--type-label); font-weight: var(--weight-medium); }
+.settings-page { display: grid; gap: var(--ui-dialog-inset); }
+.settings-section { display: grid; gap: var(--ui-panel-inset); }
+.settings-section > h2 { margin: 0; color: var(--ui-text-strong); font-size: var(--type-label); font-weight: var(--weight-medium); }
 
 .settings-card {
   overflow: hidden;
-  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
-  border-radius: var(--radius-row);
-  background: color-mix(in srgb, var(--panel-solid) 72%, transparent);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-panel-radius);
+  background: var(--ui-surface);
 }
 
 .settings-row {
   width: 100%;
-  min-height: 56px;
+  min-height: var(--ui-choice-row-min-height);
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 20px;
-  padding: 10px 14px;
-  color: var(--text);
+  gap: var(--ui-panel-inset);
+  padding: var(--ui-row-gap) var(--ui-row-inline-padding);
+  color: var(--ui-text);
   border: 0;
-  border-bottom: 1px solid color-mix(in srgb, var(--border-soft) 72%, transparent);
+  border-bottom: 1px solid var(--ui-divider);
   background: transparent;
   text-align: left;
 }
 
 .settings-row:last-child { border-bottom: 0; }
 .settings-row.is-interactive { cursor: pointer; }
-.settings-row.is-interactive:hover { background: var(--surface-hover); }
+.settings-row.is-interactive:where(:hover:not(:disabled)) { background: var(--ui-hover); }
 .settings-row:disabled { opacity: 0.55; cursor: not-allowed; }
 
-.settings-row-copy { min-width: 0; display: grid; gap: 3px; }
-.settings-row-copy strong { color: var(--text); font-size: var(--type-label); font-weight: var(--weight-medium); }
-.settings-row-copy small { color: var(--settings-helper-text); font-size: var(--type-supporting); line-height: 1.4; }
-.settings-row-control { min-width: 0; display: flex; flex: 0 0 auto; align-items: center; color: var(--text-secondary); font-size: var(--type-label); }
-.settings-row-control > span:not(.settings-switch, .settings-radio-mark) { color: var(--text-secondary); }
-.settings-row-control code { max-width: 300px; overflow: hidden; color: var(--text-secondary); font: var(--type-supporting) var(--mono); text-overflow: ellipsis; white-space: nowrap; }
+.settings-row-copy { min-width: 0; display: grid; flex: 1 1 auto; gap: var(--space-1); overflow-wrap: anywhere; }
+.settings-row-copy strong { color: var(--ui-text-strong); font-size: var(--type-label); font-weight: var(--weight-medium); }
+.settings-row-copy small { color: var(--ui-text-secondary); font-size: var(--type-supporting); line-height: 1.4; }
+.settings-row-control { min-width: 0; max-width: 60%; display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: var(--ui-control-gap); color: var(--ui-text-secondary); font-size: var(--type-label); }
+.settings-row-control > span:not(.settings-switch, .settings-radio-mark) { color: var(--ui-text-secondary); }
+.settings-row-control code { max-width: 300px; overflow: hidden; color: var(--ui-text-secondary); font: var(--type-supporting) var(--mono); text-overflow: ellipsis; white-space: nowrap; }
 
 .settings-switch {
   position: relative;
@@ -3246,7 +3214,7 @@ button.composer-workspace-trigger:focus-visible { color: var(--text); background
   height: 18px;
   flex: 0 0 auto;
   border-radius: 999px;
-  background: #d7dae2;
+  background: var(--ui-switch-off);
   transition: background 150ms ease;
 }
 
@@ -3257,12 +3225,12 @@ button.composer-workspace-trigger:focus-visible { color: var(--text); background
   width: 14px;
   height: 14px;
   border-radius: 50%;
-  background: white;
-  box-shadow: 0 1px 3px rgba(35, 38, 51, 0.22);
+  background: var(--ui-switch-thumb);
+  box-shadow: none;
   transition: transform 150ms ease;
 }
 
-.settings-switch.on { background: var(--accent); }
+.settings-switch.on { background: var(--ui-switch-on); }
 .settings-switch.on i { transform: translateX(13px); }
 
 .settings-radio-mark {
@@ -3272,32 +3240,33 @@ button.composer-workspace-trigger:focus-visible { color: var(--text); background
   flex: 0 0 18px;
   place-items: center;
   color: transparent;
-  border: 1px solid var(--border-strong);
+  border: 1px solid var(--ui-border);
   border-radius: var(--radius-pill);
   background: transparent;
 }
 
 .settings-radio-mark.is-selected {
-  color: var(--accent-text);
-  border-color: var(--accent);
-  background: var(--accent);
+  color: var(--ui-on-action);
+  border-color: var(--ui-action);
+  background: var(--ui-action);
 }
 
 .settings-row select {
-  min-width: 150px;
-  height: 32px;
-  padding: 0 28px 0 10px;
-  color: var(--text);
-  border: 1px solid rgba(70, 77, 99, 0.12);
-  border-radius: 9px;
+  min-width: min(150px, 100%);
+  max-width: 100%;
+  min-height: var(--ui-field-min-height);
+  padding: var(--ui-row-block-padding) calc(var(--ui-field-inline-padding) + var(--ui-icon-slot)) var(--ui-row-block-padding) var(--ui-field-inline-padding);
+  color: var(--ui-text);
+  border: 1px solid var(--ui-field-border);
+  border-radius: var(--ui-field-radius);
   outline: 0;
-  background: rgba(255, 255, 255, 0.66);
-  font-size: 11.5px;
+  background: var(--ui-field-fill);
+  font-size: var(--ui-size);
 }
 
-.settings-project-card { padding: 10px; }
+.settings-project-card { padding: var(--ui-panel-inset); }
 .settings-project-card .project-settings { padding: 0; border: 0; }
-.settings-project-card .project-settings-row { min-height: 44px; }
+.settings-project-card .project-settings-row { min-height: var(--ui-choice-row-min-height); }
 .settings-project-card .project-settings-select strong { font-size: 12.5px; }
 
 
@@ -3308,16 +3277,18 @@ button.composer-workspace-trigger:focus-visible { color: var(--text); background
   .program-modal {
     min-height: 0;
     grid-template-columns: 190px minmax(0, 1fr);
-    border-radius: var(--radius-row);
   }
-  .program-modal-content { padding: 24px 22px 30px; }
-  .program-modal-titlebar { margin-bottom: var(--space-4); }
-  .settings-row { gap: var(--space-3); padding-inline: var(--space-3); }
+}
+
+@container settings-content (max-width: 520px) {
+  .settings-row:not(.is-interactive) { flex-direction: column; align-items: stretch; gap: var(--ui-row-gap); }
+  .settings-row:not(.is-interactive) .settings-row-control { width: 100%; max-width: 100%; justify-content: flex-start; flex-wrap: wrap; }
+  .settings-row-control code { max-width: 100%; }
 }
 
 @container program-overlay (max-width: 480px) {
   .program-modal { display: block; overflow-y: auto; }
-  .program-modal-sidebar { border-right: 0; border-bottom: 1px solid var(--border-soft); }
+  .program-modal-sidebar { overflow: visible; border-right: 0; border-bottom: 1px solid var(--ui-divider); }
   .program-modal-content { overflow: visible; }
 }
 
@@ -3379,17 +3350,13 @@ button.composer-workspace-trigger:focus-visible { color: var(--text); background
 }
 
 @media (max-width: 760px) {
-  .program-modal-backdrop { padding: 8px; }
+  .program-modal-backdrop { padding: var(--ui-panel-inset); }
   .program-modal {
     width: 100%;
-    height: calc(100dvh - 16px);
+    height: calc(100dvh - (2 * var(--ui-panel-inset)));
     min-height: 0;
     grid-template-columns: 190px minmax(0, 1fr);
-    border-radius: var(--radius-row);
   }
-  .program-modal-content { padding: 24px 22px 30px; }
-  .program-modal-titlebar { margin-bottom: var(--space-4); }
-  .settings-row { gap: var(--space-3); padding-inline: var(--space-3); }
   .shell-responsive-stack { flex-direction: column; }
   .shell-responsive-stack > .shell-box { width: 100%; }
   .shell-responsive-stack > [role="aside"] {
@@ -3419,7 +3386,7 @@ button.composer-workspace-trigger:focus-visible { color: var(--text); background
 
 @media (max-width: 480px) {
   .program-modal { display: block; overflow-y: auto; }
-  .program-modal-sidebar { border-right: 0; border-bottom: 1px solid var(--border-soft); }
+  .program-modal-sidebar { overflow: visible; border-right: 0; border-bottom: 1px solid var(--ui-divider); }
   .program-modal-content { overflow: visible; }
   .conversation-feed { padding-top: 18px; }
   .activity-user { margin-left: 7%; }
@@ -3530,8 +3497,7 @@ samp,
 }
 
 .starter-grid button,
-.ui-contribution,
-.settings-card {
+.ui-contribution {
   border-color: var(--border);
   border-radius: var(--radius-md, 18px);
   background: var(--panel-solid);
@@ -3593,74 +3559,6 @@ samp,
   font-weight: 400;
 }
 
-:is(
-  .composer-workspace-picker,
-  .composer-permission-picker,
-  .composer-model-picker,
-  .skill-picker,
-  .workspace-thread-picker,
-  .workspace-project-picker
-) {
-  border-color: var(--border);
-  border-radius: var(--radius-md, 18px);
-  background: var(--panel-solid);
-  box-shadow: var(--shadow-popover);
-  -webkit-backdrop-filter: none;
-  backdrop-filter: none;
-}
-
-:is(
-  .composer-workspace-picker,
-  .composer-permission-picker,
-  .composer-model-picker,
-  .skill-picker
-) button:hover {
-  background: var(--panel-soft);
-}
-
-.program-modal-backdrop {
-  background: rgba(47, 50, 64, 0.2);
-  -webkit-backdrop-filter: none;
-  backdrop-filter: none;
-}
-
-.program-modal {
-  border-color: var(--border);
-  border-radius: var(--radius-lg, 24px);
-  background: var(--panel-solid);
-  box-shadow: var(--shadow-modal);
-}
-
-.program-modal-sidebar {
-  border-color: var(--border);
-  background: var(--canvas);
-}
-
-.program-modal-content {
-  background: var(--panel-solid);
-}
-
-.program-modal-back,
-.program-modal-nav-item,
-.program-modal-search,
-.settings-select-row select {
-  border-radius: var(--radius-sm, 12px);
-}
-
-.program-modal-nav-item.active,
-.program-modal-back:hover,
-.program-modal-nav-item:hover,
-.settings-choice-row:hover {
-  background: var(--panel-soft);
-}
-
-.program-modal-search,
-.settings-select-row select {
-  border-color: var(--border);
-  background: var(--panel-solid);
-  box-shadow: none;
-}
-
 html[data-alto-theme='dark'] .activity-user,
 html[data-alto-theme='dark'] .activity-reasoning,
 html[data-alto-theme='dark'] .activity-command,
@@ -3673,12 +3571,6 @@ html[data-alto-theme='dark'] .activity-user {
   background: #272a33;
 }
 
-html[data-alto-theme='dark'] .program-modal-backdrop {
-  background: rgba(47, 50, 64, 0.2);
-  -webkit-backdrop-filter: none;
-  backdrop-filter: none;
-}
-
 @container conversation-column (max-width: 360px) {
   .composer { border-radius: var(--radius-composer, 40px); }
 }
@@ -3697,3 +3589,16 @@ html[data-alto-theme='dark'] .program-modal-backdrop {
   .composer-context-controls { left: 43px; }
   .composer-workspace-trigger > span { display: none; }
 }
+
+/* Legacy structured controls share the field and choice roles without changing
+   their DOM or the geometry of settings rows and prompt forms. */
+.settings-row:focus-visible,
+.settings-row select:focus-visible,
+.generic-response textarea:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: -2px; }
+.settings-row[aria-checked='true'],
+.settings-row[aria-pressed='true'] { background: var(--ui-selected); }
+.settings-row.is-interactive:active:not(:disabled) { background: var(--ui-pressed); }
+.skill-picker button.active { color: var(--ui-text-strong); background: var(--ui-selected); }
+
+.plugin-category-filters button:active:not(:disabled) { background: var(--ui-pressed); }
+.plugin-category-filters button:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: -2px; }
diff --git a/program/plugins/ui/focus.css b/program/plugins/ui/focus.css
new file mode 100644
index 0000000..23703b6
--- /dev/null
+++ b/program/plugins/ui/focus.css
@@ -0,0 +1,86 @@
+/* Fields strengthen their existing edge once. Buttons and navigation retain a
+   separate keyboard outline; selection and semantic accents stay independent. */
+:root :is(
+  .alto-field,
+  .program-modal-search,
+  .plugins-search,
+  .chat-history-search,
+  .file-tree-search,
+  .todo-add-item,
+  .workspace-tab-name-input,
+  .workspace-pane-title-input,
+  .history-entry-name-input,
+  .todo-inline-input,
+  .todo-search,
+  .steer-editor,
+  .settings-row select,
+  .hotkey-leader-setting select,
+  .alto-toolbar-picker > select,
+  .browser-workspace-toolbar > input,
+  .work-target-create-branch input,
+  .input-question-custom input,
+  .project-settings-form :is(input, textarea),
+  .workspace-creator-form :is(input, textarea),
+  .generic-response textarea,
+  .ui-input input,
+  .approval-body :is(input:not([type='checkbox'], [type='radio']), select, textarea),
+  .question :is(input:not([type='checkbox'], [type='radio']), select)
+):not(.search-palette-input):is(:focus, :focus-within):not(:disabled) {
+  border-color: var(--ui-focus);
+  outline: none;
+  box-shadow: none;
+
+  @media (forced-colors: active) {
+    border-color: Highlight;
+    outline: 2px solid Highlight;
+    outline-offset: 2px;
+  }
+}
+
+/* These fields use an outline as their edge, or live on an elevated panel. */
+:root .pr-dashboard-search:focus-within {
+  outline: 1px solid var(--ui-focus);
+  outline-offset: -1px;
+  box-shadow: none;
+}
+:root .source-viewer-command:focus-within {
+  border-color: var(--ui-focus);
+  outline: none;
+}
+
+/* Keep validation visible while replacing the old accent rename glows. */
+:root :is(.workspace-tab-name-input, .workspace-pane-title-input) {
+  border-color: var(--ui-field-border);
+}
+:root :is(.workspace-tab-name-input, .workspace-pane-title-input, .browser-workspace-toolbar > input)[aria-invalid='true'] {
+  --ui-focus: var(--ui-danger);
+  border-color: var(--ui-danger);
+}
+
+/* Older plain controls also use the shared keyboard focus role. */
+:root :is(.pane-tab-select, .pane-tab-close, .pane-tab-new):focus-visible {
+  outline: 2px solid var(--ui-focus);
+  outline-offset: -2px;
+  box-shadow: none;
+}
+:root :is(.cordis-code-block figcaption button, .conversation-jump-latest):focus-visible {
+  outline: 2px solid var(--ui-focus);
+  outline-offset: 2px;
+  box-shadow: none;
+}
+
+/* The Composer keeps its distinctive accent glow; other fields use neutral edges. */
+:root .composer {
+  --composer-focus-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 11%, transparent), 0 0 20px color-mix(in srgb, var(--accent) 14%, transparent);
+}
+
+@media (forced-colors: active) {
+  :root { --ui-focus: Highlight; }
+  :root :is(.pane-tab-select, .pane-tab-close, .pane-tab-new, .cordis-code-block figcaption button, .conversation-jump-latest):focus-visible {
+    outline-color: Highlight;
+  }
+  :root .composer:focus-within {
+    outline: 2px solid Highlight;
+    outline-offset: 2px;
+  }
+}
diff --git a/program/plugins/ui/geometry.css b/program/plugins/ui/geometry.css
new file mode 100644
index 0000000..223e878
--- /dev/null
+++ b/program/plugins/ui/geometry.css
@@ -0,0 +1,67 @@
+/* Shared geometry follows the same visual roles as color and state. Feature
+   grids, bounds, wrapping, and explicit primitive geometry hooks stay local. */
+:is(.alto-button, .button) {
+  min-height: var(--alto-button-height, var(--control-button));
+  gap: var(--alto-button-gap, var(--ui-control-gap));
+  padding: var(--alto-button-padding, var(--ui-row-block-padding) var(--ui-control-inline-padding));
+}
+
+.alto-choice-row {
+  min-width: 0;
+  min-height: var(--ui-row-min-height);
+  gap: var(--ui-row-gap);
+  padding: var(--ui-row-block-padding) var(--ui-row-inline-padding);
+}
+
+:is(input, select, textarea).alto-field {
+  min-width: 0;
+  min-height: var(--ui-field-min-height);
+  padding-inline: var(--ui-field-inline-padding);
+}
+
+/* Menus are inset lists. Composed dialogs/flyouts own their header/body insets;
+   a nested listbox must not acquire another enclosing panel's padding. */
+:root [role='menu'],
+:root .skill-picker[role='listbox'] {
+  padding: var(--ui-panel-inset);
+}
+
+:root .composer-model-picker .composer-picker-row,
+:root :is([role='menu'], [role='listbox']) :is(
+  [role='menuitem'], [role='menuitemradio'], [role='menuitemcheckbox'], [role='option']
+) {
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: var(--ui-row-min-height);
+  gap: var(--ui-row-gap);
+  padding: var(--ui-row-block-padding) var(--ui-row-inline-padding);
+}
+
+/* Legacy Composer pickers share the menu geometry without replacing their
+   editor owner. Only choices with descriptions use the two-line row height. */
+.composer-permission-picker > button:has(.permission-option-copy small) {
+  --ui-row-min-height: var(--ui-choice-row-min-height);
+}
+:root :is(.composer-workspace-picker, .composer-permission-picker) > button {
+  grid-template-columns: var(--ui-icon-slot) minmax(0, 1fr) var(--ui-icon-slot);
+}
+:root .composer-picker-options > button {
+  grid-template-columns: minmax(0, 1fr) var(--ui-icon-slot);
+}
+:root .composer-picker-row:not(.reset) {
+  grid-template-columns: max-content minmax(0, 1fr) var(--ui-icon-slot);
+}
+:root .composer-picker-row.reset {
+  grid-template-columns: minmax(0, 1fr) var(--ui-icon-slot);
+}
+:root :is(.composer-workspace-picker, .composer-permission-picker, .composer-picker-options) > button > svg {
+  justify-self: center;
+}
+
+/* A row's preferred width must not become a fixed height when Settings stacks
+   its labels and controls in a narrow pane. */
+@container settings-content (max-width: 520px) {
+  .settings-row:not(.is-interactive) > :is(.settings-row-copy, .settings-row-control) {
+    flex-basis: auto;
+  }
+}
diff --git a/program/plugins/ui/model-defaults.css b/program/plugins/ui/model-defaults.css
index bf84bcb..b91f6a1 100644
--- a/program/plugins/ui/model-defaults.css
+++ b/program/plugins/ui/model-defaults.css
@@ -49,12 +49,12 @@
   right: var(--space-2);
   transform: translateY(-50%);
   flex: 0 0 auto;
-  color: var(--text-muted);
+  color: var(--ui-text-secondary);
   pointer-events: none;
 }
 
 .model-defaults-settings .model-defaults-select:focus-within > svg {
-  color: var(--text);
+  color: var(--ui-text);
 }
 
 .model-defaults-settings .model-defaults-select select:disabled + svg {
@@ -64,16 +64,16 @@
 .model-defaults-settings .model-defaults-load {
   min-height: var(--control-default);
   padding: var(--space-1) var(--space-3);
-  color: var(--text);
+  color: var(--ui-text);
   border: 1px solid var(--border-soft);
-  border-radius: var(--radius-row);
-  background: var(--panel-solid);
+  border-radius: var(--ui-row-radius);
+  background: var(--ui-surface);
   font-size: var(--type-supporting);
   cursor: pointer;
 }
 
 .model-defaults-settings .model-defaults-load:hover {
-  background: var(--surface-hover);
+  background: var(--ui-hover);
 }
 
 .model-defaults-settings button:disabled {
diff --git a/program/plugins/ui/project-settings.tsx b/program/plugins/ui/project-settings.tsx
index b49d33c..a0fab2d 100644
--- a/program/plugins/ui/project-settings.tsx
+++ b/program/plugins/ui/project-settings.tsx
@@ -16,6 +16,7 @@ import type {
   LocalProjectInput,
 } from '../../../src/shared/protocol.js'
 import { ConversationPaneOverlay } from './conversation-overlay.js'
+import { uiStyles } from './appearance.js'
 
 interface ProjectDraft {
   id?: string
@@ -67,6 +68,7 @@ function ProjectFields({
       <label>
         <span>Primary folder</span>
         <input
+          className={uiStyles.field}
           value={draft.primaryRoot}
           autoFocus={focusPrimary}
           required
@@ -80,6 +82,7 @@ function ProjectFields({
       <label>
         <span>Name <small>optional</small></span>
         <input
+          className={uiStyles.field}
           value={draft.name}
           placeholder={folderName(draft.primaryRoot) || 'Workspace name'}
           onChange={(event) => onChange({
@@ -91,6 +94,7 @@ function ProjectFields({
       <label>
         <span>Attached folders <small>one per line</small></span>
         <textarea
+          className={uiStyles.field}
           value={draft.additionalRoots}
           rows={2}
           placeholder="/path/to/related-repository"
@@ -159,6 +163,7 @@ export function ProjectSettings({
       <header>
         <span>Folders</span>
         <button
+          className={uiStyles.iconButton}
           type="button"
           aria-label="Add workspace"
           title="Add workspace"
@@ -183,7 +188,7 @@ export function ProjectSettings({
             key={project.id}
           >
             <button
-              className="project-settings-select"
+              className={`${uiStyles.row} project-settings-select`}
               type="button"
               disabled={disabled}
               title={project.primaryRoot}
@@ -197,7 +202,7 @@ export function ProjectSettings({
             </button>
             {!project.source && (
               <button
-                className="project-settings-edit"
+                className={`${uiStyles.iconButton} project-settings-edit`}
                 type="button"
                 aria-label={`Edit ${project.name}`}
                 title={`Edit ${project.name}`}
@@ -218,7 +223,7 @@ export function ProjectSettings({
         <form className="project-settings-form" onSubmit={(event) => void submit(event)}>
           <header>
             <strong>{draft.id ? 'Edit workspace' : 'New workspace'}</strong>
-            <button type="button" aria-label="Cancel" onClick={() => setDraft(undefined)}>
+            <button className={uiStyles.iconButton} type="button" aria-label="Cancel" onClick={() => setDraft(undefined)}>
               <X size={13} />
             </button>
           </header>
@@ -230,12 +235,12 @@ export function ProjectSettings({
           {problem && <div className="project-settings-error" role="alert">{problem}</div>}
           <footer>
             {draft.id && (
-              <button className="project-settings-remove" type="button" disabled={busy} onClick={() => void remove()}>
+              <button className={`${uiStyles.button} ghost danger project-settings-remove`} type="button" disabled={busy} onClick={() => void remove()}>
                 <Trash2 size={13} />
                 Remove
               </button>
             )}
-            <button className="project-settings-save" type="submit" disabled={busy}>Save</button>
+            <button className={`${uiStyles.button} primary project-settings-save`} type="submit" disabled={busy}>Save</button>
           </footer>
         </form>
       )}
@@ -283,7 +288,7 @@ export function NewWorkspaceDialog({
       }}
     >
       <section
-        className="workspace-creator"
+        className={`${uiStyles.dialog} workspace-creator`}
         role="dialog"
         aria-modal="true"
         aria-labelledby="workspace-creator-title"
@@ -295,7 +300,7 @@ export function NewWorkspaceDialog({
             <strong id="workspace-creator-title">New workspace</strong>
             <p id="workspace-creator-description">Group chats around one or more local folders.</p>
           </div>
-          <button type="button" aria-label="Close" disabled={busy} onClick={onClose}>
+          <button className={uiStyles.iconButton} type="button" aria-label="Close" disabled={busy} onClick={onClose}>
             <X size={14} />
           </button>
         </header>
@@ -303,8 +308,8 @@ export function NewWorkspaceDialog({
           <ProjectFields draft={draft} focusPrimary onChange={setDraft} />
           {problem && <div className="project-settings-error" role="alert">{problem}</div>}
           <footer>
-            <button type="button" disabled={busy} onClick={onClose}>Cancel</button>
-            <button className="primary" type="submit" disabled={busy || disabled}>
+            <button className={uiStyles.button} type="button" disabled={busy} onClick={onClose}>Cancel</button>
+            <button className={`${uiStyles.button} primary`} type="submit" disabled={busy || disabled}>
               {busy ? 'Creating…' : 'Create workspace'}
             </button>
           </footer>
diff --git a/program/plugins/ui/review-annotations.css b/program/plugins/ui/review-annotations.css
new file mode 100644
index 0000000..aa48ff7
--- /dev/null
+++ b/program/plugins/ui/review-annotations.css
@@ -0,0 +1,33 @@
+/* Pierre renders React annotations into light-DOM slots. Their UI must share
+   the document's appearance owner; unsafeCSS only styles the code shadow root. */
+.diff-review-comment {
+  margin: var(--space-2) var(--space-3);
+  padding: var(--space-2) var(--space-3);
+  color: var(--ui-text);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-row-radius);
+  background: var(--ui-surface);
+  font-family: var(--ui-font);
+  font-size: var(--ui-size);
+  line-height: var(--line-body);
+}
+
+.diff-review-comment > div {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+  color: var(--ui-text-secondary);
+  font-size: var(--type-supporting);
+}
+
+.diff-review-comment .alto-icon-button {
+  --alto-icon-button-size: var(--control-icon);
+  flex: none;
+}
+
+.diff-review-comment p {
+  margin: var(--space-1) 0 0;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
diff --git a/program/plugins/ui/surfaces.css b/program/plugins/ui/surfaces.css
new file mode 100644
index 0000000..a4aa63b
--- /dev/null
+++ b/program/plugins/ui/surfaces.css
@@ -0,0 +1,285 @@
+/* These roles own paint and type. Features own bounds, layout, and content.
+   Explicit roles keep inline cards and native content outside popup styling. */
+:root :is(.alto-popup-panel, .alto-dialog, .alto-tooltip, [role='menu'], [role='dialog'], [role='tooltip']) {
+  --alto-floating-panel-background: var(--ui-surface);
+  --alto-floating-panel-border: var(--ui-border);
+  --alto-floating-panel-radius: var(--ui-panel-radius);
+  --alto-floating-panel-shadow: var(--ui-panel-shadow);
+  --alto-floating-panel-backdrop: none;
+  color: var(--ui-text);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-panel-radius);
+  background: var(--ui-surface);
+  box-shadow: var(--ui-panel-shadow);
+  font-family: var(--ui-font);
+  font-size: var(--ui-size);
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
+
+:root :is(.alto-dialog, [role='dialog']:where(:not(.alto-popup-panel, .alto-tooltip, [aria-modal='false']))) {
+  --alto-floating-panel-radius: var(--ui-dialog-radius);
+  --alto-floating-panel-shadow: var(--ui-dialog-shadow);
+  border-radius: var(--ui-dialog-radius);
+  box-shadow: var(--ui-dialog-shadow);
+}
+
+:root :is(.alto-tooltip, [role='tooltip']) {
+  --alto-floating-panel-radius: var(--ui-row-radius);
+  border-radius: var(--ui-row-radius);
+  font-size: var(--type-supporting);
+}
+
+.alto-choice-row {
+  --icon-opacity: 1;
+  --icon-scale: 1;
+  color: var(--ui-text);
+  border: 0;
+  border-radius: var(--ui-row-radius);
+  background: transparent;
+  font-family: var(--ui-font);
+  font-size: var(--ui-size);
+  font-weight: var(--weight-regular);
+  line-height: var(--ui-line);
+  text-align: start;
+  transition: none;
+}
+
+.alto-choice-row:where(:hover:not(:disabled):not([aria-disabled='true'])) {
+  background: var(--ui-hover);
+}
+
+.alto-choice-row:where([aria-selected='true'], [aria-checked='true'], [aria-current='page'], .is-active, .active, .is-selected) {
+  color: var(--ui-text-strong);
+  background: var(--ui-selected);
+}
+
+.alto-choice-row:where(:active:not(:disabled):not([aria-disabled='true'])) {
+  background: var(--ui-pressed);
+}
+
+.alto-choice-row:where(:focus-visible) {
+  outline: 2px solid var(--ui-focus);
+  outline-offset: -2px;
+}
+
+.alto-choice-row:where(:disabled, [aria-disabled='true']) {
+  opacity: 0.48;
+  cursor: not-allowed;
+}
+
+.alto-control-title,
+:root [data-native-overlay='workspace-pane-kind'] :is(.workspace-pane-kind-header, .workspace-pane-kind-options) strong {
+  color: var(--ui-text-strong);
+  font-size: var(--ui-size);
+  font-weight: var(--ui-weight);
+}
+
+.alto-control-description,
+:root [data-native-overlay='workspace-pane-kind'] :is(.workspace-pane-kind-header small, .workspace-pane-kind-footer) {
+  color: var(--ui-text-secondary);
+  font-size: var(--type-supporting);
+  font-weight: var(--weight-regular);
+  line-height: var(--line-body);
+}
+
+/* A decorated field can be an input/select itself or an enclosing search row.
+   The inner input remains transparent so the field paints exactly once. */
+.alto-field {
+  color: var(--ui-text);
+  border: 1px solid var(--ui-field-border);
+  border-radius: var(--ui-field-radius);
+  background: var(--ui-field-fill);
+  box-shadow: none;
+  font-family: var(--ui-font);
+  font-size: var(--ui-size);
+}
+
+.alto-field:where(:is(:focus-visible, :focus-within):not(:disabled)) {
+  outline: 2px solid var(--ui-focus);
+  outline-offset: -2px;
+}
+
+.alto-input {
+  min-width: 0;
+  color: var(--ui-text);
+  border: 0;
+  border-radius: 0;
+  outline: 0;
+  background: transparent;
+  box-shadow: none;
+  font-family: var(--ui-font);
+  font-size: var(--type-body);
+  line-height: var(--line-body);
+}
+
+:is(.alto-field, .alto-input)::placeholder {
+  color: var(--ui-text-secondary);
+  opacity: 1;
+}
+
+:is(.alto-field, .alto-input):where(:disabled) {
+  opacity: 0.48;
+  cursor: not-allowed;
+}
+
+/* Keep native select behavior while sharing a quiet, inset chevron across
+   Settings, palette controls, and the older model-picker wrapper. */
+:root :is(.settings-row-control, .theme-palette-control, .model-defaults-select):has(> select:not([multiple]):not([size])) {
+  position: relative;
+
+  & > select {
+    -webkit-appearance: none;
+    appearance: none;
+    padding-inline: calc(var(--ui-field-inline-padding) + var(--space-1)) calc(var(--ui-field-inline-padding) + var(--ui-icon-slot));
+    background-image: none;
+    cursor: pointer;
+  }
+
+  &.settings-row-control > select { width: 100%; }
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    inset-inline-end: var(--ui-field-inline-padding);
+    width: var(--ui-icon-slot);
+    height: var(--ui-icon-slot);
+    transform: translateY(-50%);
+    background-color: var(--ui-text-secondary);
+    mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'm6%209%206%206%206-6'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.7'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E") center / calc(2 * var(--space-2)) no-repeat;
+    pointer-events: none;
+  }
+
+  &.model-defaults-select > svg { display: none; }
+  &:focus-within::after { background-color: var(--ui-text); }
+  &:has(> select:disabled)::after { opacity: 0.48; }
+
+  @media (forced-colors: active) {
+    & > select { -webkit-appearance: auto; appearance: auto; }
+    &::after { content: none; }
+  }
+}
+
+.alto-segment {
+  color: var(--ui-text);
+  border: 0;
+  border-radius: var(--ui-control-radius);
+  background: transparent;
+  font-family: var(--ui-font);
+  font-size: var(--ui-size);
+  font-weight: var(--ui-weight);
+  transition: none;
+}
+
+.alto-segment:where(:hover:not(:disabled)) { background: var(--ui-hover); }
+.alto-segment:where([aria-pressed='true'], [aria-selected='true'], .active, .is-selected) { color: var(--ui-text-strong); background: var(--ui-selected); }
+.alto-segment:where(:active:not(:disabled)) { background: var(--ui-pressed); }
+.alto-segment:where(:focus-visible) { outline: 2px solid var(--ui-focus); outline-offset: -2px; }
+.alto-segment:where(:disabled) { opacity: 0.48; cursor: not-allowed; }
+
+.alto-keycap,
+:root [data-native-overlay='workspace-pane-kind'] kbd {
+  color: var(--ui-text-secondary);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--radius-dense);
+  background: var(--ui-control-fill);
+  font-family: var(--ui-font);
+  font-size: var(--type-supporting);
+  font-weight: var(--weight-regular);
+  box-shadow: none;
+}
+
+/* Content keeps its reading density and semantic colors. Only neutral frames
+   and compact badges share the same palette and corner families as controls. */
+:root :is(.approval-card, .file-change-card) {
+  color: var(--ui-text);
+  border-color: var(--ui-divider);
+  background: var(--ui-surface);
+  box-shadow: none;
+}
+
+:root :is(.ui-metric, .ui-list-item) {
+  border-color: var(--ui-divider);
+  border-radius: var(--ui-row-radius);
+  background: var(--ui-surface-inset);
+}
+
+:root .activity-attachments > span {
+  color: var(--ui-text);
+  border-color: var(--ui-divider);
+  border-radius: var(--ui-control-radius);
+  background: var(--ui-control-fill);
+}
+
+:root .activity-markdown .markdown-table-shell {
+  border-radius: var(--ui-row-radius);
+}
+
+:root :is(.ui-empty, .history-empty) { color: var(--ui-text-secondary); }
+:root .ui-empty {
+  border-color: var(--ui-divider);
+  border-radius: var(--ui-row-radius);
+}
+
+/* Accessible legacy menus use the same row states without coupling the
+   appearance owner to feature selectors or restarting their pane owners.
+   Paint only: each feature retains its row grid, padding, and target size. */
+:root :is([role='menu'], [role='listbox']) :is(
+  [role='menuitem'], [role='menuitemradio'], [role='menuitemcheckbox'], [role='option']
+),
+:root [data-native-overlay='workspace-pane-kind'] .workspace-pane-kind-options > button {
+  --ui-row-background: transparent;
+  --icon-opacity: 1;
+  --icon-scale: 1;
+  color: var(--ui-row-ink, var(--ui-text));
+  border: 0;
+  border-radius: var(--ui-row-radius);
+  background: var(--ui-row-background);
+  font-family: var(--ui-font);
+  font-size: var(--ui-size);
+  transition: none;
+
+  &:where(:hover:not(:disabled):not([aria-disabled='true'])) {
+    background: var(--ui-hover);
+  }
+
+  &:where([aria-selected='true'], [aria-checked='true'], [aria-current='page']) {
+    --ui-row-background: var(--ui-selected);
+    color: var(--ui-row-ink, var(--ui-text-strong));
+    background: var(--ui-row-background);
+  }
+
+  &:where(:active:not(:disabled):not([aria-disabled='true'])) {
+    background: var(--ui-pressed);
+  }
+
+  &:where(:focus-visible) {
+    outline: 2px solid var(--ui-focus);
+    outline-offset: -2px;
+    box-shadow: none;
+  }
+
+  &:where(:disabled, [aria-disabled='true']) {
+    background: var(--ui-row-background);
+    opacity: 0.48;
+    cursor: not-allowed;
+  }
+
+  &:where(.danger, .is-danger, .is-destructive, [data-variant='danger']) {
+    color: var(--ui-danger);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where(.alto-popup-panel, .alto-dialog, .alto-tooltip, .alto-choice-row, .alto-segment) {
+    animation: none;
+    transition: none;
+  }
+}
+
+@media (forced-colors: active) {
+  :where(.alto-choice-row, .alto-segment, .alto-field):is(:focus-visible, :focus-within) {
+    outline-color: Highlight;
+  }
+}
diff --git a/program/plugins/ui/user-input.css b/program/plugins/ui/user-input.css
index f35520b..35dcb01 100644
--- a/program/plugins/ui/user-input.css
+++ b/program/plugins/ui/user-input.css
@@ -1,11 +1,11 @@
 .input-request {
-  --alto-floating-panel-background: var(--panel);
-  --alto-floating-panel-border: var(--border-soft);
+  --alto-floating-panel-background: var(--ui-surface);
+  --alto-floating-panel-border: var(--ui-divider);
   --alto-floating-panel-backdrop: none;
   --alto-floating-panel-shadow: none;
   display: grid;
   min-width: 0;
-  color: var(--text);
+  color: var(--ui-text);
   gap: var(--space-3);
   margin: var(--space-3) 0;
   padding: var(--space-3);
@@ -19,7 +19,7 @@
 
 .input-request-heading,
 .input-question-header {
-  color: var(--text);
+  color: var(--ui-text);
   font-size: var(--type-label);
   font-weight: var(--weight-regular);
 }
@@ -27,7 +27,7 @@
 .input-question { min-width: 0; margin: 0; padding: 0; border: 0; }
 .input-question legend { width: 100%; padding: 0; margin-bottom: var(--space-2); }
 .input-question-header { display: block; margin-bottom: var(--space-1); }
-.input-question-title { display: block; color: var(--text); overflow-wrap: anywhere; }
+.input-question-title { display: block; color: var(--ui-text); overflow-wrap: anywhere; }
 .input-question-options { display: grid; gap: var(--space-1); }
 
 .input-question-option {
@@ -39,14 +39,14 @@
   min-height: var(--control-default);
   padding: var(--space-1) var(--space-2);
   border: 1px solid transparent;
-  border-radius: var(--radius-row);
-  background: var(--surface-hover);
+  border-radius: var(--ui-row-radius);
+  background: var(--ui-control-fill);
   cursor: pointer;
 }
 
-.input-question-option:hover { background: var(--panel-soft); }
-.input-question-option:has(input:checked) { background: var(--accent-soft); border-color: var(--accent-border); }
-.input-question-option:has(input:focus-visible) { outline: 2px solid var(--text); outline-offset: 1px; }
+.input-question-option:hover { background: var(--ui-hover); }
+.input-question-option:has(input:checked) { background: var(--ui-selected); border-color: transparent; }
+.input-question-option:has(input:focus-visible) { outline: 2px solid var(--ui-focus); outline-offset: 1px; }
 .input-question-option:has(input:disabled) { cursor: default; }
 
 .input-question-option > input {
@@ -64,29 +64,30 @@
   width: 1.25em;
   height: 1.25em;
   margin-top: .125em;
-  border: 1px solid var(--muted);
+  border: 1px solid var(--ui-text-secondary);
   border-radius: var(--radius-pill);
-  color: var(--text);
+  color: var(--ui-text);
 }
-.input-question-option:has(input:checked) .input-question-indicator { color: var(--accent-text); background: var(--accent); border-color: var(--accent); }
+.input-question-option:has(input:checked) .input-question-indicator { color: var(--ui-on-action); background: var(--ui-action); border-color: var(--ui-action); }
 .input-question-option-copy { display: grid; gap: var(--space-1); min-width: 0; overflow-wrap: anywhere; }
-.input-question-description { color: var(--text); font-size: var(--type-label); }
+.input-question-description { color: var(--ui-text-secondary); font-size: var(--type-label); }
 
 .input-question-custom { display: grid; gap: var(--space-1); margin-top: var(--space-2); font-size: var(--type-label); }
 .input-question-custom input {
+  font-family: var(--ui-font);
   box-sizing: border-box;
   width: 100%;
   min-width: 0;
   min-height: var(--control-default);
   padding: var(--space-1) var(--space-2);
-  color: var(--text);
+  color: var(--ui-text);
   font-size: var(--type-body);
-  background: var(--panel-solid);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-row);
+  background: var(--ui-field-fill);
+  border: 1px solid var(--ui-field-border);
+  border-radius: var(--ui-field-radius);
 }
-.input-question-custom input::placeholder { color: var(--text); opacity: 1; }
-.input-question-custom input:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }
+.input-question-custom input::placeholder { color: var(--ui-text-secondary); opacity: 1; }
+.input-question-custom input:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 1px; }
 .input-request-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; }
 .input-request-actions > button {
   max-width: 100%;
@@ -105,7 +106,7 @@
   align-items: flex-start;
   gap: var(--space-2);
   margin-top: var(--space-2);
-  color: var(--text);
+  color: var(--ui-text);
   overflow-wrap: anywhere;
   white-space: pre-wrap;
 }
@@ -128,14 +129,14 @@
   gap: var(--space-1) var(--space-2);
   padding: var(--space-2) var(--space-4);
   margin: 0;
-  color: var(--text);
-  background: var(--panel);
-  border-radius: var(--radius-row);
+  color: var(--ui-text);
+  background: var(--ui-surface);
+  border-radius: var(--ui-row-radius);
   font-size: var(--type-label);
   line-height: var(--line-body);
 }
 .composer-question-reply-label { display: flex; min-width: 0; gap: var(--space-2); }
-.composer-question-reply-label > span:first-child { color: var(--muted); flex: none; }
+.composer-question-reply-label > span:first-child { color: var(--ui-text-secondary); flex: none; }
 .composer-question-reply-label > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .composer-question-reply > button { --alto-icon-button-size: var(--control-compact); }
 .composer-question-reply > .input-request-error { grid-column: 1 / -1; }
diff --git a/program/plugins/vertical-tabs-api.ts b/program/plugins/vertical-tabs-api.ts
new file mode 100644
index 0000000..60bc929
--- /dev/null
+++ b/program/plugins/vertical-tabs-api.ts
@@ -0,0 +1,24 @@
+import type { WorkspaceTabOrientation } from './workspace-layout-api.js'
+
+export interface VerticalTabPreferences {
+  /** Horizontal shows the compositor's top tabs; vertical moves them into the side rail. */
+  orientation: WorkspaceTabOrientation
+  width: number
+  collapsed: boolean
+}
+
+export interface ClientVerticalTabsService {
+  subscribe(listener: () => void): () => void
+  snapshot(): VerticalTabPreferences
+  setOrientation(orientation: WorkspaceTabOrientation): void
+  toggleOrientation(): void
+  setWidth(width: number): void
+  setCollapsed(collapsed: boolean): void
+  toggleCollapsed(): void
+}
+
+declare module 'cordis' {
+  interface Context {
+    clientVerticalTabs: ClientVerticalTabsService
+  }
+}
diff --git a/program/plugins/vertical-tabs.client.tsx b/program/plugins/vertical-tabs.client.tsx
new file mode 100644
index 0000000..8dded74
--- /dev/null
+++ b/program/plugins/vertical-tabs.client.tsx
@@ -0,0 +1,244 @@
+import { PanelLeftClose, PanelLeftOpen } from 'lucide-react'
+import { useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore, type KeyboardEvent, type PointerEvent, type ReactNode } from 'react'
+import { clientStyles, type BrowserPlugin } from '../../src/client/plugin-api.js'
+import type { ClientVerticalTabsService, VerticalTabPreferences } from './vertical-tabs-api.js'
+import {
+  WORKSPACE_TOOLS_RAIL_ATTRIBUTE,
+  type WorkspaceTabAddonRegistration,
+  type WorkspaceTabOrientation,
+  type WorkspaceTabRailProps,
+} from './workspace-layout-api.js'
+import styles from './vertical-tabs.css'
+
+const STORAGE_KEY = 'codex-cordis.vertical-tabs'
+const DEFAULT_WIDTH = 232
+const MIN_WIDTH = 168
+const MAX_WIDTH = 400
+/** Below this workspace width the rail shows only tab icons. */
+const COMPACT_WORKSPACE_WIDTH = 720
+
+export function clampRailWidth(width: number): number {
+  return Math.round(Math.min(MAX_WIDTH, Math.max(MIN_WIDTH, width)))
+}
+
+export function parseVerticalTabPreferences(value: unknown): VerticalTabPreferences {
+  const record = value && typeof value === 'object' ? value as Record<string, unknown> : {}
+  return {
+    // Enabling the plugin opts into the side rail, so vertical is the default.
+    orientation: record.orientation === 'horizontal' ? 'horizontal' : 'vertical',
+    width: typeof record.width === 'number' && Number.isFinite(record.width) ? clampRailWidth(record.width) : DEFAULT_WIDTH,
+    collapsed: record.collapsed === true,
+  }
+}
+
+function readPreferences(): VerticalTabPreferences {
+  try {
+    return parseVerticalTabPreferences(JSON.parse(window.localStorage.getItem(STORAGE_KEY) ?? 'null'))
+  } catch {
+    return parseVerticalTabPreferences(undefined)
+  }
+}
+
+function writePreferences(preferences: VerticalTabPreferences): void {
+  try {
+    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(preferences))
+  } catch {
+    // Storage can be unavailable; the rail still works for this session.
+  }
+}
+
+/** Keeps the rail's width and collapsed state outside React so shortcuts can change them. */
+export class VerticalTabsController implements ClientVerticalTabsService {
+  private state = readPreferences()
+  private readonly listeners = new Set<() => void>()
+  private persistence = true
+
+  subscribe = (listener: () => void): (() => void) => {
+    this.listeners.add(listener)
+    return () => this.listeners.delete(listener)
+  }
+
+  snapshot = (): VerticalTabPreferences => this.state
+
+  setOrientation(orientation: WorkspaceTabOrientation): void {
+    this.update({ orientation })
+  }
+
+  toggleOrientation(): void {
+    this.update({ orientation: this.state.orientation === 'vertical' ? 'horizontal' : 'vertical' })
+  }
+
+  setWidth(width: number): void {
+    this.update({ width: clampRailWidth(width) })
+  }
+
+  setCollapsed(collapsed: boolean): void {
+    this.update({ collapsed })
+  }
+
+  toggleCollapsed(): void {
+    this.update({ collapsed: !this.state.collapsed })
+  }
+
+  /** Save once a drag finishes rather than on every pointer move. */
+  holdPersistence(hold: boolean): void {
+    this.persistence = !hold
+    if (!hold) writePreferences(this.state)
+  }
+
+  private update(patch: Partial<VerticalTabPreferences>): void {
+    const next = { ...this.state, ...patch }
+    if (next.orientation === this.state.orientation && next.width === this.state.width && next.collapsed === this.state.collapsed) return
+    this.state = next
+    if (this.persistence) writePreferences(next)
+    for (const listener of this.listeners) listener()
+  }
+}
+
+function VerticalTabRail({ strip, navigation, tools, controller }: WorkspaceTabRailProps & { controller: VerticalTabsController }): ReactNode {
+  const rail = useRef<HTMLElement>(null)
+  const preferences = useSyncExternalStore(controller.subscribe, controller.snapshot)
+  const [compact, setCompact] = useState(false)
+  const [resizing, setResizing] = useState(false)
+
+  // Follow the workspace's own width so a pinned sidebar or split window also compacts the rail.
+  useLayoutEffect(() => {
+    const container = rail.current?.parentElement
+    if (!container) return
+    const measure = (): void => setCompact(container.getBoundingClientRect().width < COMPACT_WORKSPACE_WIDTH)
+    measure()
+    const observer = new ResizeObserver(measure)
+    observer.observe(container)
+    return () => observer.disconnect()
+  }, [])
+
+  // The width changes continuously while dragging, so it is a custom property rather than a class.
+  useLayoutEffect(() => {
+    rail.current?.style.setProperty('--vertical-tab-rail-width', preferences.width + 'px')
+  }, [preferences.width])
+
+  // Tool flyouts open beside the rail while it hosts the top bar's tools.
+  useEffect(() => {
+    const element = rail.current
+    if (!element) return
+    const root = document.documentElement
+    root.setAttribute(WORKSPACE_TOOLS_RAIL_ATTRIBUTE, 'rail')
+    const measure = (): void => root.style.setProperty('--workspace-tools-rail-end', Math.round(element.getBoundingClientRect().right) + 'px')
+    measure()
+    const observer = new ResizeObserver(measure)
+    observer.observe(element)
+    window.addEventListener('resize', measure)
+    return () => {
+      observer.disconnect()
+      window.removeEventListener('resize', measure)
+      root.removeAttribute(WORKSPACE_TOOLS_RAIL_ATTRIBUTE)
+      root.style.removeProperty('--workspace-tools-rail-end')
+    }
+  }, [])
+
+  const collapsed = compact || preferences.collapsed
+  const beginResize = (event: PointerEvent<HTMLDivElement>): void => {
+    if (event.button !== 0) return
+    event.preventDefault()
+    const handle = event.currentTarget
+    const left = rail.current?.getBoundingClientRect().left ?? 0
+    handle.setPointerCapture(event.pointerId)
+    setResizing(true)
+    controller.holdPersistence(true)
+    const move = (moveEvent: globalThis.PointerEvent): void => controller.setWidth(moveEvent.clientX - left)
+    const end = (): void => {
+      setResizing(false)
+      controller.holdPersistence(false)
+      handle.removeEventListener('pointermove', move)
+      handle.removeEventListener('pointerup', end)
+      handle.removeEventListener('pointercancel', end)
+    }
+    handle.addEventListener('pointermove', move)
+    handle.addEventListener('pointerup', end)
+    handle.addEventListener('pointercancel', end)
+  }
+  const resizeWithKeys = (event: KeyboardEvent<HTMLDivElement>): void => {
+    const step = event.shiftKey ? 48 : 16
+    const width = event.key === 'ArrowLeft' ? preferences.width - step
+      : event.key === 'ArrowRight' ? preferences.width + step
+      : event.key === 'Home' ? MIN_WIDTH
+      : event.key === 'End' ? MAX_WIDTH
+      : undefined
+    if (width === undefined) return
+    event.preventDefault()
+    controller.setWidth(width)
+  }
+
+  return (
+    <aside
+      ref={rail}
+      className={'vertical-tab-rail' + (collapsed ? ' is-collapsed' : '') + (resizing ? ' is-resizing' : '')}
+      aria-label="Tabs"
+    >
+      <div className="vertical-tab-rail-header">{navigation}</div>
+      {strip}
+      <div className="vertical-tab-rail-footer">
+        {tools}
+        {!compact && (
+          <button
+            type="button"
+            className={clientStyles.iconButton + ' vertical-tab-rail-toggle'}
+            data-hotkey-action="panel.vertical-tabs.toggle"
+            aria-expanded={!collapsed}
+            aria-label={collapsed ? 'Expand tabs' : 'Collapse tabs'}
+            title={collapsed ? 'Expand tabs' : 'Collapse tabs'}
+            onClick={() => controller.toggleCollapsed()}
+          >
+            {collapsed ? <PanelLeftOpen size={15} strokeWidth={1.7} /> : <PanelLeftClose size={15} strokeWidth={1.7} />}
+          </button>
+        )}
+      </div>
+      {!collapsed && (
+        <div
+          className="vertical-tab-rail-resize"
+          role="separator"
+          aria-orientation="vertical"
+          aria-label="Resize tabs"
+          aria-valuemin={MIN_WIDTH}
+          aria-valuemax={MAX_WIDTH}
+          aria-valuenow={preferences.width}
+          tabIndex={0}
+          onPointerDown={beginResize}
+          onDoubleClick={() => controller.setWidth(DEFAULT_WIDTH)}
+          onKeyDown={resizeWithKeys}
+        />
+      )}
+    </aside>
+  )
+}
+
+const verticalTabs: BrowserPlugin = (ctx) => {
+  const controller = new VerticalTabsController()
+  ctx.provide('clientVerticalTabs', controller)
+  const Rail = (props: WorkspaceTabRailProps): ReactNode => <VerticalTabRail {...props} controller={controller} />
+  // The rail is registered only while vertical; the compositor restores the top
+  // bar when it is removed, and panes stay mounted either way.
+  ctx.effect(() => {
+    let registration: WorkspaceTabAddonRegistration | undefined
+    const sync = (): void => {
+      const vertical = controller.snapshot().orientation === 'vertical'
+      if (vertical && !registration) {
+        registration = ctx.clientWorkspaceLayout.registerTabRail(ctx, { id: 'vertical-tabs', renderer: Rail })
+      } else if (!vertical && registration) {
+        void registration.dispose()
+        registration = undefined
+      }
+    }
+    sync()
+    const unsubscribe = controller.subscribe(sync)
+    return () => {
+      unsubscribe()
+      void registration?.dispose()
+    }
+  }, 'vertical-tabs.orientation')
+  ctx.clientUi.registerStyle(ctx, 'vertical-tabs', String(styles))
+}
+
+verticalTabs.inject = ['clientWorkspaceLayout', 'clientUi']
+verticalTabs.provide = 'clientVerticalTabs'
+export default verticalTabs
diff --git a/program/plugins/vertical-tabs.css b/program/plugins/vertical-tabs.css
new file mode 100644
index 0000000..322c683
--- /dev/null
+++ b/program/plugins/vertical-tabs.css
@@ -0,0 +1,261 @@
+/* Tabs on the side: a column of full-width rows beside the content sheet,
+   with an icon-only mode that keeps every tab one click away. */
+.vertical-tab-rail {
+  --vertical-tab-rail-width: 232px;
+  --vertical-tab-titlebar-height: var(--workspace-title-band-height);
+  /* Clears the native window buttons drawn at the top-left on macOS. */
+  --vertical-tab-window-controls: 76px;
+  /* Where the first control starts beside those buttons, matching the top bar. */
+  --vertical-tab-window-controls-inset: 96px;
+  /* The buttons sit 14px down and are 14px tall, so their center is 1px below the band's. */
+  --vertical-tab-window-controls-drop: 2px;
+  --vertical-tab-height: var(--control-default);
+  --vertical-tab-collapsed-width: 48px;
+  position: relative;
+  min-width: 0;
+  min-height: 0;
+  width: var(--vertical-tab-rail-width);
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: column;
+  background: var(--workspace-chrome);
+  transition: width 180ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.vertical-tab-rail.is-collapsed { width: var(--vertical-tab-collapsed-width); }
+.vertical-tab-rail.is-resizing { transition: none; user-select: none; }
+
+/* Renaming needs room for the input, so a collapsed rail widens until it finishes. */
+.vertical-tab-rail.is-collapsed:has(.workspace-tab.is-renaming) { width: var(--vertical-tab-rail-width); }
+
+/* The rail's top row replaces the top bar: it is the window drag region,
+   leaves room for the macOS window buttons, and holds back and forward. */
+.vertical-tab-rail-header {
+  min-height: var(--vertical-tab-titlebar-height);
+  display: flex;
+  flex: 0 0 auto;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-1);
+  padding-inline: var(--space-2);
+  -webkit-app-region: drag;
+}
+
+html[data-desktop-platform='darwin'] .vertical-tab-rail-header {
+  padding-block-start: var(--vertical-tab-window-controls-drop);
+  padding-inline-start: var(--vertical-tab-window-controls-inset);
+}
+
+.vertical-tab-rail-header > .workspace-shell-contribution { display: flex; align-items: center; }
+
+.vertical-tab-rail.is-collapsed .vertical-tab-rail-header,
+html[data-desktop-platform='darwin'] .vertical-tab-rail.is-collapsed .vertical-tab-rail-header {
+  justify-content: center;
+  padding-inline: 0;
+}
+
+.vertical-tab-rail.is-collapsed .workspace-history-controls {
+  flex-wrap: wrap;
+  justify-content: center;
+  margin: 0;
+}
+
+/* Collapsed on macOS, the window buttons get their own row and set the rail's width. */
+html[data-desktop-platform='darwin'] .vertical-tab-rail.is-collapsed { width: var(--vertical-tab-window-controls); }
+html[data-desktop-platform='darwin'] .vertical-tab-rail.is-collapsed .vertical-tab-rail-header {
+  padding-block-start: var(--vertical-tab-titlebar-height);
+}
+
+/* The top bar's tools sit beneath the tabs, ending with the collapse control. */
+.vertical-tab-rail-footer {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: var(--space-1);
+  padding: var(--space-2);
+}
+
+.vertical-tab-rail-footer > .workspace-tabbar-tools {
+  min-width: 0;
+  flex: 1 1 auto;
+  flex-wrap: wrap;
+  gap: var(--space-1);
+}
+
+.vertical-tab-rail-toggle {
+  flex: 0 0 auto;
+  margin-inline-start: auto;
+  color: var(--muted);
+  -webkit-app-region: no-drag;
+}
+
+.vertical-tab-rail.is-collapsed .vertical-tab-rail-footer,
+.vertical-tab-rail.is-collapsed .vertical-tab-rail-footer .workspace-tabbar-tools,
+.vertical-tab-rail.is-collapsed .vertical-tab-rail-footer .workspace-shell-contribution {
+  flex-direction: column;
+  align-items: center;
+}
+
+.vertical-tab-rail.is-collapsed .vertical-tab-rail-footer { padding-inline: 0; }
+.vertical-tab-rail.is-collapsed .vertical-tab-rail-toggle { margin-inline-start: 0; }
+.vertical-tab-rail.is-collapsed .workspace-tabbar-tools button > span { display: none; }
+.vertical-tab-rail.is-collapsed .workspace-tabbar-tools .alto-button { padding-inline: var(--space-2); }
+
+.vertical-tab-rail .workspace-tabs {
+  min-height: 0;
+  flex: 1 1 auto;
+  flex-direction: column;
+  align-items: stretch;
+  --workspace-tab-group-gap: calc(var(--space-1) / 2);
+  gap: var(--workspace-tab-group-gap);
+  padding: var(--space-1) var(--space-2) var(--space-4);
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior-x: auto;
+  overscroll-behavior-y: contain;
+  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--space-4)), transparent);
+  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--space-4)), transparent);
+  -webkit-app-region: no-drag;
+}
+
+.vertical-tab-rail.is-collapsed .workspace-tabs { padding-inline: var(--space-1); }
+
+.vertical-tab-rail .workspace-tab {
+  width: 100%;
+  min-width: 0;
+  max-width: none;
+  height: auto;
+  min-height: 0;
+  flex: 0 0 var(--vertical-tab-height);
+  gap: var(--space-2);
+  padding-inline: var(--space-2) 0;
+}
+
+.vertical-tab-rail .workspace-tab > .workspace-tab-title {
+  min-width: 0;
+  flex: 1 1 auto;
+  padding: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.vertical-tab-rail .workspace-tab-name-input { margin-inline: 0 var(--space-1); }
+
+.workspace-tab-icon {
+  display: grid;
+  flex: 0 0 16px;
+  place-items: center;
+  color: var(--muted);
+  font-style: normal;
+}
+
+/* Chat tabs show only their titles; collapsed, the title's first letter stands in. */
+.workspace-tab-monogram {
+  font-size: var(--type-label);
+  font-weight: var(--weight-medium);
+  line-height: 1;
+}
+.vertical-tab-rail:not(.is-collapsed) .workspace-tab:not(.is-renaming) > .workspace-tab-monogram,
+.vertical-tab-rail .workspace-tab.is-renaming > .workspace-tab-monogram { display: none; }
+
+.vertical-tab-rail .workspace-tab-thread-status {
+  display: grid;
+  flex: 0 0 auto;
+  place-items: center;
+}
+
+/* Group labels read as section headings for the tabs beneath them. */
+.vertical-tab-rail .workspace-tab-group-label {
+  font-size: var(--type-label);
+}
+
+.vertical-tab-rail .workspace-tab-group-label > span:first-child {
+  min-width: 0;
+  flex: 1 1 auto;
+  padding: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.vertical-tab-rail .workspace-tab-group-label .workspace-tab-group-count { margin-inline-start: 0; }
+
+/* The new-chat control becomes a labeled row at the end of the list. */
+.vertical-tab-rail .workspace-tab-add-control { width: 100%; }
+.vertical-tab-rail .workspace-tab-add {
+  width: 100%;
+  height: var(--vertical-tab-height);
+  display: flex;
+  justify-content: flex-start;
+  gap: var(--space-2);
+  padding-inline: var(--space-2);
+  border-radius: var(--radius-sm, 12px);
+  font: inherit;
+  font-size: var(--type-label);
+}
+.vertical-tab-rail .workspace-tab-add::after { content: 'New chat'; }
+
+/* Icon-only rail: titles, counts, and close buttons give way to centered icons. */
+.vertical-tab-rail.is-collapsed .workspace-tab,
+.vertical-tab-rail.is-collapsed .workspace-tab-add {
+  justify-content: center;
+  padding-inline: 0;
+}
+.vertical-tab-rail.is-collapsed .workspace-tab:not(.is-renaming) > .workspace-tab-title,
+.vertical-tab-rail.is-collapsed .workspace-tab:not(.is-renaming) > .workspace-tab-close,
+.vertical-tab-rail.is-collapsed .workspace-tab-group-label > span,
+.vertical-tab-rail.is-collapsed .workspace-tab-ungroup-target,
+.vertical-tab-rail.is-collapsed .workspace-tab-add::after { display: none; }
+
+.vertical-tab-rail.is-collapsed .workspace-tab:not(.is-renaming) > .workspace-tab-thread-status {
+  position: absolute;
+  inset-block-start: 2px;
+  inset-inline-end: 2px;
+}
+
+.vertical-tab-rail.is-collapsed .workspace-tabs { --workspace-tab-group-line-inset: var(--space-1); }
+.vertical-tab-rail.is-collapsed .workspace-tabs .workspace-tab-group-member { padding-inline-start: 0; }
+
+/* A collapsed group label shrinks to a short colored bar. */
+.vertical-tab-rail.is-collapsed .workspace-tab-group-label {
+  flex-basis: 14px;
+}
+.vertical-tab-rail.is-collapsed .workspace-tab-group-label::after {
+  content: '';
+  inline-size: 20px;
+  block-size: 4px;
+  border-radius: var(--radius-pill);
+  background: var(--tab-group-color, var(--accent));
+}
+
+.vertical-tab-rail-resize {
+  position: absolute;
+  z-index: 3;
+  inset-block: 0;
+  inset-inline-end: -3px;
+  inline-size: 6px;
+  cursor: col-resize;
+  -webkit-app-region: no-drag;
+}
+
+.vertical-tab-rail-resize:hover,
+.vertical-tab-rail-resize:focus-visible,
+.vertical-tab-rail.is-resizing .vertical-tab-rail-resize {
+  outline: none;
+  background: linear-gradient(to right, transparent 2px, color-mix(in srgb, var(--accent) 42%, transparent) 2px 4px, transparent 4px);
+}
+
+.vertical-tab-rail-resize:focus-visible {
+  background: linear-gradient(to right, transparent 2px, var(--workspace-tab-focus, var(--accent)) 2px 4px, transparent 4px);
+}
+
+/* A pinned conversation sidebar overlays the workspace's leading edge. */
+@media (min-width: 761px) {
+  html[data-sidebar-mode='pinned'] .workspace-body[data-tab-orientation='vertical'] {
+    padding-left: calc(var(--sidebar-pane-width) + (2 * var(--space-3)));
+  }
+  html[data-sidebar-mode='pinned'] .workspace-body[data-tab-orientation='vertical'] > .workspace-views { padding-inline-start: 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .vertical-tab-rail { transition: none; }
+}
diff --git a/program/plugins/work-targets.css b/program/plugins/work-targets.css
index d2dc06a..c63dc22 100644
--- a/program/plugins/work-targets.css
+++ b/program/plugins/work-targets.css
@@ -11,22 +11,25 @@
   align-items: center;
   gap: 5px;
   padding: 0 7px;
-  color: var(--muted);
+  color: var(--ui-text-secondary);
   border: 0;
-  border-radius: var(--radius-xs, 6px);
+  border-radius: var(--ui-control-radius);
   background: transparent;
   cursor: pointer;
-  font-family: inherit;
-  font-size: 10.5px;
-  font-weight: 500;
+  font-family: var(--ui-font);
+  font-size: var(--ui-size);
+  font-weight: var(--ui-weight);
   line-height: 1;
   white-space: nowrap;
 }
-.work-target-button:not(:disabled):not(.is-unavailable):hover,
-.work-target-button[aria-expanded='true'] {
-  color: var(--text);
-  background: color-mix(in srgb, var(--panel-soft) 64%, transparent);
+.work-target-button:not(:disabled):not(.is-unavailable):hover {
+  color: var(--ui-text-strong);
+  background: var(--ui-hover);
 }
+.work-target-button[aria-expanded='true']:not(:disabled) { color: var(--ui-text-strong); background: var(--ui-selected); }
+.work-target-button:active:not(:disabled):not(.is-unavailable),
+.work-target-button[aria-expanded='true']:active:not(:disabled) { background: var(--ui-pressed); }
+.work-target-button:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
 .work-target-button.is-danger { color: var(--danger); }
 .work-target-button svg { flex: 0 0 auto; stroke-width: 1.65; }
 .work-target-branch {
@@ -39,7 +42,7 @@
 }
 .work-target-branch { display: block; flex: 0 1 auto; }
 .work-target-branch-button { flex: 0 1 auto; }
-.work-target-button:disabled { cursor: default; }
+.work-target-button:disabled { opacity: .48; cursor: not-allowed; }
 .work-target-location { flex: 0 0 auto; text-decoration: none; }
 .work-target-location.is-unavailable { cursor: default; }
 .work-target-location > span { overflow: hidden; text-overflow: ellipsis; }
@@ -53,15 +56,15 @@
   gap: var(--space-2);
   width: min(var(--overview-group-width), 65cqw);
   padding: var(--space-3);
-  color: var(--text);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  background: var(--panel-solid);
-  box-shadow: var(--shadow-popover);
+  color: var(--ui-text);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-panel-radius);
+  background: var(--ui-surface);
+  box-shadow: var(--ui-panel-shadow);
   font-size: var(--type-supporting);
 }
 .work-target-location-error > span { flex: 1; min-width: 0; }
-.work-target-location-error > button { display: grid; padding: 0; color: var(--muted); border: 0; background: transparent; cursor: pointer; }
+.work-target-location-error > button { display: grid; padding: 0; color: var(--ui-text-secondary); border: 0; background: transparent; cursor: pointer; }
 
 
 .work-target-popover {
@@ -72,16 +75,17 @@
   max-height: min(430px, calc(100vh - 20px));
   padding: 8px;
   overflow: auto;
-  color: var(--text);
-  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
-  border-radius: var(--radius-md, 18px);
-  background: var(--panel-solid);
-  box-shadow: var(--shadow-popover);
+  color: var(--ui-text);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-panel-radius);
+  background: var(--ui-surface);
+  box-shadow: var(--ui-panel-shadow);
+  font: var(--weight-regular) var(--ui-size) / var(--ui-line) var(--ui-font);
 }
 .work-target-popover > header { padding: 3px 5px 8px; }
-.work-target-popover > header strong { color: var(--text-strong); font-size: 11.5px; font-weight: 590; }
+.work-target-popover > header strong { color: var(--ui-text-strong); font-weight: var(--ui-weight); }
 .work-target-checkouts,
-.work-target-actions { display: grid; gap: 2px; padding: 5px 0; border-top: 1px solid var(--border-soft); }
+.work-target-actions { display: grid; gap: 2px; padding: 5px 0; border-top: 1px solid var(--ui-divider); }
 .work-target-actions { padding: 7px 0 5px; }
 
 .work-target-option {
@@ -93,32 +97,32 @@
   padding: 6px;
   color: inherit;
   border: 0;
-  border-radius: var(--radius-sm, 12px);
+  border-radius: var(--ui-row-radius);
   outline: none;
   background: transparent;
   cursor: pointer;
   font-family: inherit;
   text-align: left;
 }
-.work-target-option:hover,
-.work-target-option:focus-visible { background: color-mix(in srgb, var(--panel-soft) 66%, transparent); }
-.work-target-option.is-selected { background: color-mix(in srgb, var(--accent-soft) 32%, var(--panel-soft)); }
+.work-target-option:hover:not(:disabled) { background: var(--ui-hover); }
+.work-target-option.is-selected:not(:disabled) { color: var(--ui-text-strong); background: var(--ui-selected); }
+.work-target-option:active:not(:disabled), .work-target-option.is-selected:active:not(:disabled) { background: var(--ui-pressed); }
 .work-target-option:disabled { cursor: default; opacity: .55; }
 .work-target-option > span:nth-child(2) { min-width: 0; flex: 1 1 auto; }
 .work-target-option strong,
 .work-target-option small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.work-target-option strong { color: var(--text); font-size: 10.5px; font-weight: 550; }
-.work-target-option small { margin-top: 2px; color: var(--muted-soft); font-size: 9px; font-weight: 450; }
-.work-target-option > svg { flex: 0 0 auto; color: var(--accent); stroke-width: 1.7; }
+.work-target-option strong { color: var(--ui-text-strong); font-size: var(--ui-size); font-weight: var(--ui-weight); }
+.work-target-option small { margin-top: 2px; color: var(--ui-text-secondary); font-size: var(--type-supporting); font-weight: var(--weight-regular); }
+.work-target-option > svg { flex: 0 0 auto; color: var(--ui-action); stroke-width: 1.7; }
 .work-target-icon {
   display: grid;
   width: 23px;
   height: 23px;
   flex: 0 0 auto;
   place-items: center;
-  color: var(--muted);
-  border-radius: var(--radius-xs, 6px);
-  background: color-mix(in srgb, var(--panel-soft) 70%, transparent);
+  color: var(--ui-text-secondary);
+  border-radius: var(--ui-row-radius);
+  background: var(--ui-surface-inset);
 }
 .work-target-icon > svg { stroke-width: 1.65; }
 .work-target-icon.is-progress { color: var(--accent); }
@@ -126,29 +130,30 @@
 .work-target-icon.is-warning { color: var(--warning); }
 .work-target-icon.is-danger { color: var(--danger); }
 
-.work-target-actions-title { padding: 0 6px 3px; overflow: hidden; color: var(--muted-soft); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
-.work-target-actions-title strong { color: var(--muted); font-weight: 570; }
-.work-target-create-branch { padding-top: 4px; border-top: 1px solid var(--border-soft); }
+.work-target-actions-title { padding: 0 6px 3px; overflow: hidden; color: var(--ui-text-secondary); font-size: var(--type-supporting); text-overflow: ellipsis; white-space: nowrap; }
+.work-target-actions-title strong { color: var(--ui-text-secondary); font-weight: var(--ui-weight); }
+.work-target-create-branch { padding-top: 4px; border-top: 1px solid var(--ui-divider); }
 .work-target-create-branch form { display: grid; gap: 5px; padding: 4px 6px 5px; }
-.work-target-create-branch form > span { color: var(--muted-soft); font-size: 9px; }
+.work-target-create-branch form > span { color: var(--ui-text-secondary); font-size: var(--type-supporting); }
 .work-target-create-branch input {
   width: 100%;
   height: 28px;
   box-sizing: border-box;
   padding: 0 8px;
-  color: var(--text);
-  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
-  border-radius: var(--radius-sm, 12px);
+  color: var(--ui-text);
+  border: 1px solid var(--ui-field-border);
+  border-radius: var(--ui-field-radius);
   outline: none;
-  background: color-mix(in srgb, var(--panel-soft) 54%, transparent);
-  font-family: inherit;
-  font-size: 10.5px;
-  font-weight: 500;
+  background: var(--ui-field-fill);
+  font-family: var(--ui-font);
+  font-size: var(--ui-size);
+  font-weight: var(--weight-regular);
   line-height: 1;
 }
 .work-target-create-branch input:focus {
-  border-color: color-mix(in srgb, var(--accent) 36%, var(--border));
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-soft) 30%, transparent);
+  border-color: var(--ui-focus);
+  outline: 2px solid var(--ui-focus);
+  outline-offset: 2px;
 }
 .work-target-branch-destinations { display: grid; gap: 2px; margin: 2px 0; }
 .work-target-branch-destinations > button {
@@ -158,29 +163,29 @@
   align-items: center;
   gap: 8px;
   padding: 6px 7px;
-  color: var(--muted);
+  color: var(--ui-text-secondary);
   border: 1px solid transparent;
-  border-radius: var(--radius-sm, 12px);
+  border-radius: var(--ui-row-radius);
   outline: none;
   background: transparent;
   cursor: pointer;
   font-family: inherit;
   text-align: left;
 }
-.work-target-branch-destinations > button:hover,
-.work-target-branch-destinations > button:focus-visible { background: color-mix(in srgb, var(--panel-soft) 66%, transparent); }
-.work-target-branch-destinations > button.is-selected {
-  color: var(--text);
-  border-color: color-mix(in srgb, var(--accent) 14%, var(--border-soft));
-  background: color-mix(in srgb, var(--accent-soft) 30%, var(--panel-soft));
+.work-target-branch-destinations > button:hover:not(:disabled) { background: var(--ui-hover); }
+.work-target-branch-destinations > button.is-selected:not(:disabled) {
+  color: var(--ui-text-strong);
+  background: var(--ui-selected);
 }
-.work-target-branch-destinations > button > svg { flex: 0 0 auto; color: var(--muted); stroke-width: 1.65; }
-.work-target-branch-destinations > button.is-selected > svg { color: var(--accent); }
+.work-target-branch-destinations > button:active:not(:disabled),
+.work-target-branch-destinations > button.is-selected:active:not(:disabled) { background: var(--ui-pressed); }
+.work-target-branch-destinations > button > svg { flex: 0 0 auto; color: var(--ui-text-secondary); stroke-width: 1.65; }
+.work-target-branch-destinations > button.is-selected > svg { color: var(--ui-action); }
 .work-target-branch-destinations > button > span { min-width: 0; flex: 1 1 auto; }
 .work-target-branch-destinations strong,
 .work-target-branch-destinations small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.work-target-branch-destinations strong { font-size: 10px; font-weight: 550; }
-.work-target-branch-destinations small { margin-top: 1px; color: var(--muted-soft); font-size: 8.5px; }
+.work-target-branch-destinations strong { font-size: var(--ui-size); font-weight: var(--ui-weight); }
+.work-target-branch-destinations small { margin-top: 1px; color: var(--ui-text-secondary); font-size: var(--type-supporting); }
 .work-target-branch-actions { display: flex; justify-content: flex-end; gap: 5px; }
 .work-target-branch-actions > button {
   display: inline-flex;
@@ -188,22 +193,28 @@
   align-items: center;
   gap: 4px;
   padding: 0 8px;
-  color: var(--muted);
+  color: var(--ui-text-secondary);
   border: 0;
-  border-radius: 999px;
-  background: transparent;
+  border-radius: var(--ui-control-radius);
+  background: var(--ui-control-fill);
   cursor: pointer;
-  font-family: inherit;
-  font-size: 9.5px;
-  font-weight: 520;
+  font-family: var(--ui-font);
+  font-size: var(--ui-size);
+  font-weight: var(--ui-weight);
   line-height: 1;
 }
 .work-target-branch-actions > button:last-child {
-  color: color-mix(in srgb, var(--accent) 78%, var(--text));
-  background: color-mix(in srgb, var(--accent-soft) 40%, var(--panel-soft));
+  color: var(--ui-on-action);
+  background: var(--ui-action);
 }
-.work-target-feedback { margin: 0 0 5px; padding: 7px 6px; border-radius: var(--radius-sm, 12px); background: color-mix(in srgb, var(--panel-soft) 72%, transparent); font-size: 9.5px; }
-.work-target-feedback.is-error { color: #b83c4b; }
+.work-target-branch-actions > button:hover:not(:disabled) { background: var(--ui-hover); }
+.work-target-branch-actions > button:active:not(:disabled) { background: var(--ui-pressed); }
+.work-target-branch-actions > button:last-child:hover:not(:disabled) { background: var(--ui-action-hover); }
+.work-target-branch-actions > button:last-child:active:not(:disabled) { background: var(--ui-action-pressed); }
+.work-target-popover button:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: -2px; }
+.work-target-popover button:disabled { opacity: .48; cursor: not-allowed; }
+.work-target-feedback { margin: 0 0 5px; padding: 7px 6px; border-radius: var(--ui-row-radius); background: var(--ui-surface-inset); font-size: var(--type-supporting); }
+.work-target-feedback.is-error { color: var(--danger); }
 .is-spinning { animation: work-target-spin 1.35s linear infinite; }
 @keyframes work-target-spin { to { transform: rotate(360deg); } }
 
diff --git a/program/plugins/workspace-appearance.css b/program/plugins/workspace-appearance.css
new file mode 100644
index 0000000..59f878b
--- /dev/null
+++ b/program/plugins/workspace-appearance.css
@@ -0,0 +1,152 @@
+/* One surface family and reading grid connect the window chrome to its
+   content. The active theme supplies the colors; native material can vary. */
+.workspace-layout-root {
+  --workspace-surface-sheet: var(--canvas);
+  --workspace-chrome-neutral: color-mix(in srgb, var(--workspace-surface-sheet) 97%, black);
+  --workspace-surface-chrome: color-mix(in srgb, var(--accent) 22%, var(--workspace-chrome-neutral));
+  --workspace-chrome-ink: color-mix(in srgb, var(--text-strong) 75%, light-dark(black, white));
+  --workspace-surface-raised: var(--panel-solid);
+  --workspace-surface-recessed: var(--panel-soft);
+  --workspace-control-hover: color-mix(in srgb, var(--panel-solid) 16%, transparent);
+  --workspace-control-selected: color-mix(in srgb, var(--panel-solid) 38%, transparent);
+  --workspace-control-pressed: color-mix(in srgb, var(--panel-solid) 55%, transparent);
+  --workspace-chrome: var(--workspace-surface-chrome);
+  /* A visible accent wash gives the chrome its color while native material
+     remains the larger part of the translucent surface. */
+  --workspace-material-tint: color-mix(in srgb,
+    color-mix(in srgb, var(--accent) 60%, var(--workspace-surface-raised)) 20%, transparent);
+  --workspace-column-width: var(--composer-content-width);
+  --workspace-column-gutter: var(--composer-content-gutter);
+  --workspace-column-inset: max(var(--workspace-column-gutter), calc((100% - var(--workspace-column-width)) / 2));
+  --conversation-reading-width: var(--workspace-column-width);
+  --composer-surface: var(--workspace-surface-raised);
+  --workspace-radius: var(--radius-composer);
+  --workspace-sheet-radius: var(--workspace-radius);
+  --sans: var(--composer-font);
+  --display: var(--sans);
+  font-family: var(--sans);
+}
+
+/* Preserve the dark chrome's depth while sharing its accent-colored fallback. */
+html[data-alto-theme='dark'] .workspace-layout-root {
+  --workspace-chrome-neutral: color-mix(in srgb, var(--workspace-surface-sheet) 55%, var(--bg));
+  --workspace-chrome: var(--workspace-surface-chrome);
+}
+
+.workspace-layout-root .activity-user:not(.activity-source-edit) {
+  border-radius: var(--workspace-radius);
+  corner-shape: round;
+  padding-block: var(--space-4);
+  padding-inline: max(var(--ui-dialog-inset), calc(var(--workspace-radius) / 2));
+  background: var(--workspace-surface-recessed);
+}
+
+/* Typed panes retain the toolbar insets that belong to their own content. */
+.workspace-layout-root .workspace-chat-pane:not(.workspace-typed-pane) > .workspace-pane-header {
+  padding-inline-start: var(--workspace-column-inset);
+}
+
+.workspace-layout-root .workspace-chat-pane .conversation-feed,
+.workspace-layout-root .workspace-pane-conversation:has(> .scrollback-minimap) > .conversation-stage > .conversation-feed {
+  padding-inline: var(--workspace-column-inset);
+}
+
+/* Keep scrollback in the shared column's gutter instead of shifting the
+   transcript away from its title and composer in narrow split panes. */
+.workspace-layout-root .workspace-pane-conversation > .scrollback-minimap {
+  max-width: calc(var(--workspace-column-inset) - var(--space-2));
+}
+
+.workspace-layout-root .workspace-pane-conversation :is(.scrollback-track, .scrollback-tick),
+.workspace-layout-root .workspace-pane-conversation .scrollback-tick::after {
+  max-width: 100%;
+}
+
+.workspace-layout-root .workspace-pane-title { color: var(--text); }
+
+/* Pane tools and both tab orientations share the same quiet feedback. */
+.workspace-layout-root :is(.workspace-pane-header, .alto-pane-header) :is(.alto-icon-button, .icon-button, .alto-button, .button):not(.primary, .danger) {
+  --alto-button-background-hover: var(--workspace-control-hover);
+  --ui-hover: var(--workspace-control-hover);
+  --ui-selected: var(--workspace-control-selected);
+  --ui-pressed: var(--workspace-control-pressed);
+}
+
+.workspace-layout-root :is(.workspace-pane-actions button, .pane-tab-close, .pane-tab-new, .canvas-dock-button):not(.primary, .danger):hover:not(:disabled) {
+  color: var(--ui-text);
+  background: var(--workspace-control-hover);
+}
+.workspace-layout-root .workspace-pane-actions button[aria-pressed='true']:not(:disabled) {
+  background: var(--workspace-control-selected);
+}
+.workspace-layout-root :is(.workspace-pane-actions button, .pane-tab-close, .pane-tab-new, .canvas-dock-button):not(.primary, .danger):active:not(:disabled) {
+  background: var(--workspace-control-pressed);
+}
+
+/* Top pane controls sit on the same colored glass as the navigation.
+   Lower split headers retain the ink of their own content surface. */
+.workspace-body[data-tab-orientation='vertical'] :is(
+  .workspace-pane-header,
+  .alto-pane-header
+):not(.workspace-split-vertical:not(.is-fullscreen-second) > .workspace-split-second *) {
+  --text: var(--workspace-chrome-ink);
+  --text-strong: var(--workspace-chrome-ink);
+  --muted: var(--workspace-chrome-ink);
+  --dim: var(--workspace-chrome-ink);
+  --text-muted: var(--workspace-chrome-ink);
+  --text-secondary: var(--workspace-chrome-ink);
+  --text-supporting: var(--workspace-chrome-ink);
+  --alto-button-color: var(--workspace-chrome-ink);
+  --accent-focus: var(--workspace-chrome-ink);
+  --ui-text: var(--workspace-chrome-ink);
+  --ui-text-strong: var(--workspace-chrome-ink);
+  --ui-text-secondary: var(--workspace-chrome-ink);
+  --ui-focus: var(--workspace-chrome-ink);
+  --icon-opacity: 1;
+  color: var(--workspace-chrome-ink);
+}
+
+.workspace-body[data-tab-orientation='vertical'] :is(
+  .workspace-pane-header,
+  .alto-pane-header
+):not(.workspace-split-vertical:not(.is-fullscreen-second) > .workspace-split-second *) :is(button, a):is(:hover, :focus-visible, [aria-pressed='true']) {
+  color: var(--workspace-chrome-ink);
+}
+
+.workspace-body[data-tab-orientation='vertical'] :is(
+  .workspace-pane-header,
+  .alto-pane-header
+):not(.workspace-split-vertical:not(.is-fullscreen-second) > .workspace-split-second *) :is(button, a):focus-visible {
+  outline-color: var(--workspace-chrome-ink);
+}
+
+/* The composer's existing round geometry guides surfaces and controls.
+   Short tabs and buttons naturally clamp this radius into pill shapes. */
+.workspace-layout-root :is(.workspace-tabbar, .vertical-tab-rail) :is(
+  .workspace-tab,
+  .workspace-tab-close,
+  .workspace-tab-add,
+  .vertical-tab-rail-toggle,
+  .workspace-tabbar-tools button,
+  .workspace-history-controls > button
+) {
+  border-radius: var(--workspace-radius);
+  corner-shape: round;
+}
+
+:is(.workspace-tabbar, .vertical-tab-rail) .workspace-tabs-with-groups {
+  --workspace-tab-group-radius: calc(var(--workspace-radius) + var(--workspace-tab-group-inset));
+}
+
+/* Tasks joins the neighboring toolbar icons and keeps its accessible name.
+   Other labels, including the Agents count, keep their own presentation. */
+:is(.workspace-tabbar, .vertical-tab-rail) .workspace-tabbar-tools .todo-header-button {
+  --alto-button-height: var(--control-default);
+  width: var(--control-default);
+  height: var(--control-default);
+  display: grid;
+  padding: 0;
+  place-items: center;
+}
+
+:is(.workspace-tabbar, .vertical-tab-rail) .workspace-tabbar-tools .todo-header-button > span { display: none; }
diff --git a/program/plugins/workspace-layout-api.ts b/program/plugins/workspace-layout-api.ts
index c308109..e517c7f 100644
--- a/program/plugins/workspace-layout-api.ts
+++ b/program/plugins/workspace-layout-api.ts
@@ -63,7 +63,11 @@ export interface WorkspaceTabPresentation {
   onKeyDown?(event: KeyboardEvent<HTMLElement>): void
 }
 
+export type WorkspaceTabOrientation = 'horizontal' | 'vertical'
+
 export interface WorkspaceTabStripProps {
+  /** Vertical while a registered tab rail hosts the strip; omitted means horizontal. */
+  orientation?: WorkspaceTabOrientation
   layout: WorkspaceLayoutState
   change: Dispatch<SetStateAction<WorkspaceLayoutState>>
   rootRef: RefObject<HTMLDivElement | null>
@@ -82,6 +86,32 @@ export interface WorkspaceTabStrip {
   shortcutTargets?(layout: WorkspaceLayoutState): readonly WorkspaceView[]
 }
 
+export interface WorkspaceTabRailProps {
+  /** The active tab strip, rendered vertically with its new-tab control. */
+  strip: ReactNode
+  /** Back and forward controls followed by header-left contributions. */
+  navigation: ReactNode
+  /** Header-right contributions and header-end surfaces from the top bar. */
+  tools: ReactNode
+  layout: WorkspaceLayoutState
+}
+
+/**
+ * Set on the document element while a rail hosts the top bar's tools, with
+ * `--workspace-tools-rail-end` giving the rail's trailing edge. Tool flyouts
+ * use it to open beside the rail instead of beneath the top bar.
+ */
+export const WORKSPACE_TOOLS_RAIL_ATTRIBUTE = 'data-workspace-tools'
+
+export interface WorkspaceTabRail {
+  id: string
+  /**
+   * Frames the strip in a column beside the workspace views. The top bar is
+   * omitted while a rail is registered, so the rail must render navigation and tools.
+   */
+  renderer: ComponentType<WorkspaceTabRailProps>
+}
+
 export interface WorkspacePaneTarget {
   workspaceId: string
   paneId: string
@@ -213,6 +243,9 @@ export interface ClientWorkspaceLayoutService {
   registerTabAction(owner: import('cordis').Context, action: WorkspaceTabAction): WorkspaceTabAddonRegistration
   /** Replaces only the tab bar contents; pane trees keep their existing owners and keys. */
   registerTabStrip(owner: import('cordis').Context, strip: WorkspaceTabStrip): WorkspaceTabAddonRegistration
+  tabRail(): WorkspaceTabRail | undefined
+  /** Moves the tab strip into a side rail; pane trees stay mounted when it is added or removed. */
+  registerTabRail(owner: import('cordis').Context, rail: WorkspaceTabRail): WorkspaceTabAddonRegistration
   registerPaneAddon(
     owner: import('cordis').Context,
     addon: WorkspacePaneAddon,
diff --git a/program/plugins/workspace-layout.client.tsx b/program/plugins/workspace-layout.client.tsx
index 3d31efe..eddcd39 100644
--- a/program/plugins/workspace-layout.client.tsx
+++ b/program/plugins/workspace-layout.client.tsx
@@ -8,6 +8,7 @@ import {
   Maximize2,
   MessageSquarePlus,
   Minimize2,
+  PanelsTopLeft,
   Pencil,
   Plus,
   Rows2,
@@ -76,6 +77,7 @@ import type {
   WorkspaceTabAddon,
   WorkspaceTabAction,
   WorkspaceTabTarget,
+  WorkspaceTabRail,
   WorkspaceTabStrip,
   WorkspaceTabStripProps,
 } from './workspace-layout-api.js'
@@ -257,6 +259,7 @@ export class WorkspaceLayoutRegistry implements ClientWorkspaceLayoutService {
   private readonly pageEntries = new Map<string, WorkspacePage>()
   private activePageId: string | undefined
   private tabStripEntry: WorkspaceTabStrip | undefined
+  private tabRailEntry: WorkspaceTabRail | undefined
   private readonly listeners = new Set<() => void>()
   private controller: WorkspaceLayoutController | undefined
   private tabTargets: readonly WorkspaceTabTarget[] = []
@@ -481,6 +484,10 @@ export class WorkspaceLayoutRegistry implements ClientWorkspaceLayoutService {
     return this.tabStripEntry
   }
 
+  tabRail(): WorkspaceTabRail | undefined {
+    return this.tabRailEntry
+  }
+
   pages(): readonly WorkspacePage[] {
     return [...this.pageEntries.values()]
   }
@@ -537,6 +544,19 @@ export class WorkspaceLayoutRegistry implements ClientWorkspaceLayoutService {
     return { dispose: async () => dispose() }
   }
 
+  registerTabRail(owner: Context, rail: WorkspaceTabRail) {
+    const dispose = owner.effect(() => {
+      if (this.tabRailEntry) throw new Error(`workspace tab rail "${this.tabRailEntry.id}" is already registered`)
+      this.tabRailEntry = rail
+      this.emit()
+      return () => {
+        if (this.tabRailEntry === rail) this.tabRailEntry = undefined
+        this.emit()
+      }
+    }, `clientWorkspaceLayout.registerTabRail(${JSON.stringify(rail.id)})`)
+    return { dispose: async () => dispose() }
+  }
+
   registerPaneAddon(owner: Context, addon: WorkspacePaneAddon) {
     const dispose = owner.effect(() => {
       if (this.addonEntries.has(addon.id)) throw new Error(`workspace pane add-on "${addon.id}" is already registered`)
@@ -603,6 +623,7 @@ export class WorkspaceLayoutRegistry implements ClientWorkspaceLayoutService {
     this.tabActionEntries.clear()
     this.tabNameSources.clear()
     this.tabStripEntry = undefined
+    this.tabRailEntry = undefined
     this.paneKindEntries.clear()
     this.pageEntries.clear()
     this.activePageId = undefined
@@ -2036,9 +2057,23 @@ export function dockWorkspaceTab(
   })
 }
 
-function DefaultWorkspaceTabStrip({ layout, change, renderTab, beginDrag, children, tabActions = [], overlays, rootRef }: WorkspaceTabStripProps): ReactNode {
+/** Vertical tabs lead with the focused pane's kind, much as browser tabs show a favicon. */
+export function WorkspaceTabIcon({ view, kinds }: { view: WorkspaceView; kinds: readonly WorkspacePaneKind[] }): ReactNode {
+  const kind = workspacePane(view.root, view.focusedPaneId)?.kind ?? 'chat'
+  // Chats are the usual tab, so only other pane kinds carry an icon. A chat
+  // keeps its title's first letter for rails that show icons alone.
+  if (kind === 'chat') {
+    return <i className="workspace-tab-icon workspace-tab-monogram" aria-hidden="true" title={view.name}>
+      {Array.from(view.name.trim())[0]?.toLocaleUpperCase() ?? ''}
+    </i>
+  }
+  const Icon = kinds.find((entry) => entry.id === kind)?.icon ?? PanelsTopLeft
+  return <i className="workspace-tab-icon" aria-hidden="true" title={view.name}><Icon size={14} strokeWidth={1.7} /></i>
+}
+
+function DefaultWorkspaceTabStrip({ orientation = 'horizontal', layout, change, renderTab, beginDrag, children, tabActions = [], overlays, rootRef }: WorkspaceTabStripProps): ReactNode {
   const [menu, setMenu] = useState<{ view: WorkspaceView; x: number; y: number; trigger: HTMLElement }>()
-  return <div className="workspace-tabs" role="tablist" aria-label="Workspaces"
+  return <div className="workspace-tabs" role="tablist" aria-label="Workspaces" aria-orientation={orientation}
     onDragOver={(event) => {
       if (!event.dataTransfer.types.includes('application/x-alto-workspace-tab')) return
       event.preventDefault()
@@ -2050,7 +2085,9 @@ function DefaultWorkspaceTabStrip({ layout, change, renderTab, beginDrag, childr
       event.preventDefault()
       const target = (event.target as Element).closest<HTMLElement>('[data-workspace-tab]')
       const bounds = target?.getBoundingClientRect()
-      const after = bounds && event.clientX >= bounds.left + bounds.width / 2
+      const after = bounds && (orientation === 'vertical'
+        ? event.clientY >= bounds.top + bounds.height / 2
+        : event.clientX >= bounds.left + bounds.width / 2)
       change((current) => {
         const source = current.views.find((view) => view.id === sourceId)
         if (!source || source.id === target?.dataset.workspaceTab) return current
@@ -2179,6 +2216,7 @@ function WorkspaceLayout({
   const paneKinds = registry.paneKinds()
   const tabAddons = registry.tabAddons()
   const TabStrip = registry.tabStrip()?.renderer ?? DefaultWorkspaceTabStrip
+  const TabRail = registry.tabRail()?.renderer
 
   useLayoutEffect(() => {
     if (!renamingViewId) return
@@ -2980,6 +3018,193 @@ function WorkspaceLayout({
           </div>
         ))
     : null
+  const tabStrip = (
+    <TabStrip orientation={TabRail ? 'vertical' : 'horizontal'} layout={layout} change={setLayout} rootRef={workspaceRootRef} tabActions={registry.tabActions()} overlays={ui.overlays}
+      beginDrag={(id) => { draggingViewId.current = id; showTabDropTarget(undefined) }}
+      renderTab={(view, index, presentation = {}) => {
+      const renaming = renamingViewId === view.id
+      const active = !activePage && view.id === layout.activeViewId
+      const threadIds = workspaceViewThreadIds(view)
+      return (
+        <div
+          className={`workspace-tab${active ? ' is-active' : ''}${renaming ? ' is-renaming' : ''}${presentation.className ? ' ' + presentation.className : ''}`}
+          role="tab"
+          data-workspace-tab={view.id}
+          inert={presentation.inert}
+          data-group-color={presentation.color}
+          data-tab-drop={presentation.dropIndicator}
+          onContextMenu={presentation.onContextMenu}
+          data-hotkey-action={index >= 0 && index < 9 ? `workspace.tab.select.${index + 1}` : undefined}
+          tabIndex={view.id === layout.activeViewId ? 0 : -1}
+          aria-label={view.name}
+          aria-selected={active}
+          draggable={!renaming}
+          key={view.id}
+          onAuxClick={(event) => {
+            if (event.button === 1) closeView(view.id)
+          }}
+          onClick={() => {
+            if (renaming) return
+            registry.showPage()
+            setLayout((current) => activateWorkspaceTab(current, view.id))
+          }}
+          onDoubleClick={(event) => {
+            event.stopPropagation()
+            beginRename(view)
+          }}
+          onKeyDown={(event) => {
+            presentation.onKeyDown?.(event)
+            if (event.defaultPrevented) return
+            if (event.key === 'F2') {
+              event.preventDefault()
+              beginRename(view)
+              return
+            }
+            if (event.key !== 'Enter' && event.key !== ' ') return
+            event.preventDefault()
+            registry.showPage()
+            setLayout((current) => activateWorkspaceTab(current, view.id))
+          }}
+          onDragStart={(event) => {
+            draggingViewId.current = view.id
+            showTabDropTarget(undefined)
+            event.dataTransfer.effectAllowed = 'move'
+            event.dataTransfer.setData('application/x-alto-workspace-tab', view.id)
+            event.dataTransfer.setData('text/plain', view.id)
+          }}
+          onDragEnd={() => {
+            draggingViewId.current = undefined
+            showTabDropTarget(undefined)
+          }}
+        >
+          {TabRail && <WorkspaceTabIcon view={view} kinds={paneKinds} />}
+          {renaming ? (
+            <>
+            <input
+              ref={renameInput}
+              className="workspace-tab-name-input"
+              value={renamingViewName}
+              readOnly={renameSaving}
+              aria-busy={renameSaving}
+              aria-invalid={Boolean(renameError)}
+              title={renameError || undefined}
+              aria-label={`Rename ${view.name}`}
+              onChange={(event) => setRenamingViewName(event.target.value)}
+              onPointerDown={(event) => event.stopPropagation()}
+              onClick={(event) => event.stopPropagation()}
+              onDoubleClick={(event) => event.stopPropagation()}
+              onBlur={() => void finishRename(true)}
+              onKeyDown={(event) => {
+                event.stopPropagation()
+                if (event.key === 'Enter') {
+                  event.preventDefault()
+                  void finishRename(true)
+                } else if (event.key === 'Escape') {
+                  event.preventDefault()
+                  void finishRename(false)
+                }
+              }}
+            />
+            {renameError && <span className="workspace-tab-rename-error" role="alert" aria-label={renameError} title={renameError}>!</span>}
+            </>
+          ) : (
+            <span className="workspace-tab-title" title="Double-click to rename">{view.name}</span>
+          )}
+          {!renaming && tabAddons.map((addon) => {
+            const Addon = addon.renderer
+            return (
+              <Addon
+                workspaceId={view.id}
+                active={active}
+                threadIds={threadIds}
+                key={addon.id}
+              />
+            )
+          })}
+          {layout.views.length > 1 && (
+            <button
+              className="workspace-tab-close"
+              type="button"
+              data-hotkey-action="workspace.tab.close"
+              aria-label={`Close ${view.name}`}
+              onPointerDown={(event) => event.stopPropagation()}
+              onClick={(event) => {
+                event.stopPropagation()
+                closeView(view.id)
+              }}
+            >
+              <X size={11} />
+            </button>
+          )}
+        </div>
+      )
+    }}>
+      <div className="workspace-tab-add-control" ref={workspacePickerRef}>
+        <button
+          className="workspace-tab-add"
+          type="button"
+          data-hotkey-action="workspace.tab.new"
+          title="New chat"
+          aria-label="New chat with no workspace"
+          aria-haspopup="menu"
+          aria-expanded={workspacePickerOpen}
+          onClick={() => addView()}
+          onContextMenu={(event) => {
+            event.preventDefault()
+            setWorkspacePickerOpen(true)
+          }}
+          onKeyDown={(event) => {
+            if (event.key !== 'ArrowDown') return
+            event.preventDefault()
+            setWorkspacePickerOpen(true)
+          }}
+        >
+          <Plus size={14} />
+        </button>
+      </div>
+    </TabStrip>
+  )
+  const navigation = (
+    <>
+      <nav className="workspace-history-controls" aria-label="Chat navigation">
+        <button
+          type="button"
+          title="Back"
+          aria-label="Go back to the previous chat"
+          disabled={!canNavigateHistory(-1)}
+          onClick={() => navigateHistory(-1)}
+        >
+          <ArrowLeft size={14} strokeWidth={1.7} />
+        </button>
+        <button
+          type="button"
+          title="Forward"
+          aria-label="Go forward to the next chat"
+          disabled={!canNavigateHistory(1)}
+          onClick={() => navigateHistory(1)}
+        >
+          <ArrowRight size={14} strokeWidth={1.7} />
+        </button>
+      </nav>
+      {renderContributions('header-left')}
+    </>
+  )
+  const tools = (
+    <div className="workspace-tabbar-tools">
+      {renderContributions('header-right')}
+      {Plugins && <Plugins surface={pluginsSurface} />}
+      {Settings && <Settings surface={settingsSurface} />}
+      <div className="workspace-tabbar-tools" data-ui-slot="header-end">
+        {(globalState.ui?.surfaces ?? [])
+          .filter((surface) => surface.data?.slot === 'header-end')
+          .sort((a, b) => Number(a.data?.order ?? 0) - Number(b.data?.order ?? 0))
+          .map((surface) => {
+            const Renderer = ui.renderer(surface)
+            return Renderer ? <Renderer key={surface.id} surface={surface} /> : null
+          })}
+      </div>
+    </div>
+  )
   const historyMouseButton = (event: ReactMouseEvent<HTMLDivElement>): void => {
     const direction = event.button === 3 ? -1 : event.button === 4 ? 1 : undefined
     if (!direction) return
@@ -3042,188 +3267,16 @@ function WorkspaceLayout({
           return view ? focusViewPane(view, paneId) : false
         }}
       />
-      <header className="workspace-tabbar">
-        <div className="workspace-tabbar-leading">
-          <nav className="workspace-history-controls" aria-label="Chat navigation">
-            <button
-              type="button"
-              title="Back"
-              aria-label="Go back to the previous chat"
-              disabled={!canNavigateHistory(-1)}
-              onClick={() => navigateHistory(-1)}
-            >
-              <ArrowLeft size={14} strokeWidth={1.7} />
-            </button>
-            <button
-              type="button"
-              title="Forward"
-              aria-label="Go forward to the next chat"
-              disabled={!canNavigateHistory(1)}
-              onClick={() => navigateHistory(1)}
-            >
-              <ArrowRight size={14} strokeWidth={1.7} />
-            </button>
-          </nav>
-          {renderContributions('header-left')}
-          <TabStrip layout={layout} change={setLayout} rootRef={workspaceRootRef} tabActions={registry.tabActions()} overlays={ui.overlays}
-            beginDrag={(id) => { draggingViewId.current = id; showTabDropTarget(undefined) }}
-            renderTab={(view, index, presentation = {}) => {
-            const renaming = renamingViewId === view.id
-            const active = !activePage && view.id === layout.activeViewId
-            const threadIds = workspaceViewThreadIds(view)
-            return (
-              <div
-                className={`workspace-tab${active ? ' is-active' : ''}${renaming ? ' is-renaming' : ''}${presentation.className ? ' ' + presentation.className : ''}`}
-                role="tab"
-                data-workspace-tab={view.id}
-                inert={presentation.inert}
-                data-group-color={presentation.color}
-                data-tab-drop={presentation.dropIndicator}
-                onContextMenu={presentation.onContextMenu}
-                data-hotkey-action={index >= 0 && index < 9 ? `workspace.tab.select.${index + 1}` : undefined}
-                tabIndex={view.id === layout.activeViewId ? 0 : -1}
-                aria-label={view.name}
-                aria-selected={active}
-                draggable={!renaming}
-                key={view.id}
-                onAuxClick={(event) => {
-                  if (event.button === 1) closeView(view.id)
-                }}
-                onClick={() => {
-                  if (renaming) return
-                  registry.showPage()
-                  setLayout((current) => activateWorkspaceTab(current, view.id))
-                }}
-                onDoubleClick={(event) => {
-                  event.stopPropagation()
-                  beginRename(view)
-                }}
-                onKeyDown={(event) => {
-                  presentation.onKeyDown?.(event)
-                  if (event.defaultPrevented) return
-                  if (event.key === 'F2') {
-                    event.preventDefault()
-                    beginRename(view)
-                    return
-                  }
-                  if (event.key !== 'Enter' && event.key !== ' ') return
-                  event.preventDefault()
-                  registry.showPage()
-                  setLayout((current) => activateWorkspaceTab(current, view.id))
-                }}
-                onDragStart={(event) => {
-                  draggingViewId.current = view.id
-                  showTabDropTarget(undefined)
-                  event.dataTransfer.effectAllowed = 'move'
-                  event.dataTransfer.setData('application/x-alto-workspace-tab', view.id)
-                  event.dataTransfer.setData('text/plain', view.id)
-                }}
-                onDragEnd={() => {
-                  draggingViewId.current = undefined
-                  showTabDropTarget(undefined)
-                }}
-              >
-                {renaming ? (
-                  <>
-                  <input
-                    ref={renameInput}
-                    className="workspace-tab-name-input"
-                    value={renamingViewName}
-                    readOnly={renameSaving}
-                    aria-busy={renameSaving}
-                    aria-invalid={Boolean(renameError)}
-                    title={renameError || undefined}
-                    aria-label={`Rename ${view.name}`}
-                    onChange={(event) => setRenamingViewName(event.target.value)}
-                    onPointerDown={(event) => event.stopPropagation()}
-                    onClick={(event) => event.stopPropagation()}
-                    onDoubleClick={(event) => event.stopPropagation()}
-                    onBlur={() => void finishRename(true)}
-                    onKeyDown={(event) => {
-                      event.stopPropagation()
-                      if (event.key === 'Enter') {
-                        event.preventDefault()
-                        void finishRename(true)
-                      } else if (event.key === 'Escape') {
-                        event.preventDefault()
-                        void finishRename(false)
-                      }
-                    }}
-                  />
-                  {renameError && <span className="workspace-tab-rename-error" role="alert" aria-label={renameError} title={renameError}>!</span>}
-                  </>
-                ) : (
-                  <span title="Double-click to rename">{view.name}</span>
-                )}
-                {!renaming && tabAddons.map((addon) => {
-                  const Addon = addon.renderer
-                  return (
-                    <Addon
-                      workspaceId={view.id}
-                      active={active}
-                      threadIds={threadIds}
-                      key={addon.id}
-                    />
-                  )
-                })}
-                {layout.views.length > 1 && (
-                  <button
-                    className="workspace-tab-close"
-                    type="button"
-                    data-hotkey-action="workspace.tab.close"
-                    aria-label={`Close ${view.name}`}
-                    onPointerDown={(event) => event.stopPropagation()}
-                    onClick={(event) => {
-                      event.stopPropagation()
-                      closeView(view.id)
-                    }}
-                  >
-                    <X size={11} />
-                  </button>
-                )}
-              </div>
-            )
-          }}>
-            <div className="workspace-tab-add-control" ref={workspacePickerRef}>
-              <button
-                className="workspace-tab-add"
-                type="button"
-                data-hotkey-action="workspace.tab.new"
-                title="New chat"
-                aria-label="New chat with no workspace"
-                aria-haspopup="menu"
-                aria-expanded={workspacePickerOpen}
-                onClick={() => addView()}
-                onContextMenu={(event) => {
-                  event.preventDefault()
-                  setWorkspacePickerOpen(true)
-                }}
-                onKeyDown={(event) => {
-                  if (event.key !== 'ArrowDown') return
-                  event.preventDefault()
-                  setWorkspacePickerOpen(true)
-                }}
-              >
-                <Plus size={14} />
-              </button>
-            </div>
-          </TabStrip>
-        </div>
-        <div className="workspace-tabbar-tools">
-          {renderContributions('header-right')}
-          {Plugins && <Plugins surface={pluginsSurface} />}
-          {Settings && <Settings surface={settingsSurface} />}
-          <div className="workspace-tabbar-tools" data-ui-slot="header-end">
-            {(globalState.ui?.surfaces ?? [])
-              .filter((surface) => surface.data?.slot === 'header-end')
-              .sort((a, b) => Number(a.data?.order ?? 0) - Number(b.data?.order ?? 0))
-              .map((surface) => {
-                const Renderer = ui.renderer(surface)
-                return Renderer ? <Renderer key={surface.id} surface={surface} /> : null
-              })}
+      {/* A tab rail replaces the whole top bar and hosts its navigation and tools. */}
+      {!TabRail && (
+        <header className="workspace-tabbar">
+          <div className="workspace-tabbar-leading">
+            {navigation}
+            {tabStrip}
           </div>
-        </div>
-      </header>
+          {tools}
+        </header>
+      )}
       {workspacePickerOpen && (
         <div ref={workspacePickerMenuRef} className="workspace-project-picker" role="menu" aria-label="Choose tab workspace">
           {newTabOptions.map((option) => (
@@ -3250,37 +3303,41 @@ function WorkspaceLayout({
         />
       )}
       {renderContributions('main')}
-      <div
-        className="workspace-views"
-        onDragOver={dragWorkspaceTabOverPane}
-        onDragLeave={(event) => {
-          const next = event.relatedTarget
-          if (!(next instanceof Node) || !event.currentTarget.contains(next)) {
-            showTabDropTarget(undefined)
-          }
-        }}
-        onDrop={dropWorkspaceTabIntoPane}
-      >
-        {pages.map((page) => {
-          const Page = page.renderer
-          const visible = page.id === activePage?.id
-          return <div className="workspace-view" role="region" aria-label={page.label} hidden={!visible} key={'page:' + page.id}><Page visible={visible} /></div>
-        })}
-        {/* Hidden workspaces stay mounted: their chat sessions and native panes own live state. */}
-        {layout.views.map((view) => {
-          const visible = !activePage && view.id === layout.activeViewId
-          return (
-            <div
-              className="workspace-view"
-              role="tabpanel"
-              aria-hidden={!visible}
-              hidden={!visible}
-              key={view.id}
-            >
-              <LayoutTree workspaceId={view.id} node={view.root} actions={actionsFor(view)} />
-            </div>
-          )
-        })}
+      {/* The views keep one position whether or not a rail is present, so panes never remount. */}
+      <div className="workspace-body" data-tab-orientation={TabRail ? 'vertical' : 'horizontal'}>
+        {TabRail && <TabRail strip={tabStrip} navigation={navigation} tools={tools} layout={layout} />}
+        <div
+          className="workspace-views"
+          onDragOver={dragWorkspaceTabOverPane}
+          onDragLeave={(event) => {
+            const next = event.relatedTarget
+            if (!(next instanceof Node) || !event.currentTarget.contains(next)) {
+              showTabDropTarget(undefined)
+            }
+          }}
+          onDrop={dropWorkspaceTabIntoPane}
+        >
+          {pages.map((page) => {
+            const Page = page.renderer
+            const visible = page.id === activePage?.id
+            return <div className="workspace-view" role="region" aria-label={page.label} hidden={!visible} key={'page:' + page.id}><Page visible={visible} /></div>
+          })}
+          {/* Hidden workspaces stay mounted: their chat sessions and native panes own live state. */}
+          {layout.views.map((view) => {
+            const visible = !activePage && view.id === layout.activeViewId
+            return (
+              <div
+                className="workspace-view"
+                role="tabpanel"
+                aria-hidden={!visible}
+                hidden={!visible}
+                key={view.id}
+              >
+                <LayoutTree workspaceId={view.id} node={view.root} actions={actionsFor(view)} />
+              </div>
+            )
+          })}
+        </div>
       </div>
     </div>
   )
diff --git a/program/plugins/workspace-layout.css b/program/plugins/workspace-layout.css
index 2d11cb0..13de526 100644
--- a/program/plugins/workspace-layout.css
+++ b/program/plugins/workspace-layout.css
@@ -3,8 +3,13 @@
    internals that paint var(--canvas) need no changes. */
 .workspace-layout-root {
   --workspace-pane-header-height: 35px;
-  --workspace-chrome: var(--canvas);
+  /* Height of the window's title band when a tab rail replaces the top bar. */
+  --workspace-title-band-height: calc(var(--control-default) + var(--space-2));
+  --workspace-sheet-radius: var(--radius-md, 18px);
+  /* The tab bar or rail, the title band, and gutters: a step darker than the sheet. */
+  --workspace-chrome: color-mix(in srgb, var(--canvas) 97%, black);
   --workspace-sheet-border: var(--border);
+  --workspace-sheet-edge: 1px;
   position: relative;
   z-index: 2;
   min-width: 0;
@@ -290,6 +295,83 @@ html[data-desktop-platform="darwin"] .workspace-tabbar {
 .workspace-tabbar-tools { flex: 0 0 auto; }
 .workspace-tabbar-tools .shell-control { box-shadow: none; }
 
+html[data-alto-theme='dark'] .workspace-layout-root {
+  --workspace-chrome: color-mix(in srgb, var(--canvas) 55%, var(--bg));
+}
+
+/* A registered tab rail sits before the views in this row. */
+.workspace-body {
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex: 1 1 0;
+  overflow: hidden;
+}
+
+/* A tab rail replaces the top bar, so the top row of pane title bars becomes
+   the window's title band: every pane kind's bar takes the band height and the
+   chrome color, and the content sheet begins beneath it, curving down beside
+   the rail. Pane kinds join by using .alto-pane-header for their top bar. */
+.workspace-body[data-tab-orientation='vertical'] {
+  --workspace-pane-header-height: var(--workspace-title-band-height);
+}
+.workspace-body[data-tab-orientation='vertical'] :is(
+  .workspace-chat-pane:not(.workspace-typed-pane) > .workspace-pane-header,
+  .alto-pane-header,
+  .workspace-typed-pane:not(:has(.alto-pane-header)) > .workspace-pane-header
+):not(.workspace-split-vertical > .workspace-split-second *) {
+  border-bottom-color: transparent;
+  background: var(--workspace-chrome);
+}
+/* A pane kind without its own top bar gets a band from its pane controls. */
+.workspace-body[data-tab-orientation='vertical'] .workspace-typed-pane:not(:has(.alto-pane-header)) > .workspace-pane-header {
+  position: relative;
+  top: auto;
+  right: auto;
+  width: auto;
+  flex: 0 0 var(--workspace-pane-header-height);
+  padding-inline-start: var(--pane-chrome-gutter);
+  pointer-events: auto;
+}
+.workspace-body[data-tab-orientation='vertical'] .workspace-typed-pane:not(:has(.alto-pane-header)) > .workspace-pane-header .workspace-typed-pane-title { display: flex; }
+.workspace-body[data-tab-orientation='vertical'] > .workspace-views > .workspace-view {
+  position: relative;
+  border-top: 0;
+}
+/* The sheet edge occupies the band's last row rather than the content's first.
+   Native surfaces such as terminals cover the content box, so a line drawn
+   there would be hidden beneath them. */
+.workspace-body[data-tab-orientation='vertical'] > .workspace-views > .workspace-view::before,
+.workspace-body[data-tab-orientation='vertical'] > .workspace-views > .workspace-view::after {
+  position: absolute;
+  top: calc(var(--workspace-pane-header-height) - var(--workspace-sheet-edge));
+  left: 0;
+  content: '';
+  pointer-events: none;
+}
+.workspace-body[data-tab-orientation='vertical'] > .workspace-views > .workspace-view::before {
+  z-index: 20;
+  right: 0;
+  bottom: 0;
+  border-top: var(--workspace-sheet-edge) solid var(--workspace-sheet-border);
+  border-left: var(--workspace-sheet-edge) solid var(--workspace-sheet-border);
+  border-top-left-radius: var(--workspace-sheet-radius);
+}
+/* Fills the outside of the sheet's rounded corner with the chrome color. */
+.workspace-body[data-tab-orientation='vertical'] > .workspace-views > .workspace-view::after {
+  z-index: 19;
+  width: var(--workspace-sheet-radius);
+  height: var(--workspace-sheet-radius);
+  background: radial-gradient(circle at 100% 100%, transparent calc(var(--workspace-sheet-radius) - 0.5px), var(--workspace-chrome) var(--workspace-sheet-radius));
+}
+/* Pages draw their own layout from the top edge, so they keep a straight divider. */
+.workspace-body[data-tab-orientation='vertical'] > .workspace-views > .workspace-view[role='region']::before {
+  top: 0;
+  border-top: 0;
+  border-top-left-radius: 0;
+}
+.workspace-body[data-tab-orientation='vertical'] > .workspace-views > .workspace-view[role='region']::after { display: none; }
+
 .workspace-views,
 .workspace-view,
 .workspace-split,
diff --git a/program/plugins/workspace-material.client.ts b/program/plugins/workspace-material.client.ts
new file mode 100644
index 0000000..0f061d4
--- /dev/null
+++ b/program/plugins/workspace-material.client.ts
@@ -0,0 +1,10 @@
+import type { BrowserPlugin } from '../../src/client/plugin-api.js'
+import styles from './workspace-material.css'
+
+const workspaceMaterial: BrowserPlugin = (ctx) => {
+  ctx.clientUi.registerStyle(ctx, 'workspace-material', String(styles))
+}
+
+workspaceMaterial.inject = ['clientUi']
+
+export default workspaceMaterial
diff --git a/program/plugins/workspace-material.css b/program/plugins/workspace-material.css
new file mode 100644
index 0000000..211dce1
--- /dev/null
+++ b/program/plugins/workspace-material.css
@@ -0,0 +1,84 @@
+/* macOS supplies the material underneath the web view. Paint a light tint
+   once, then let every chrome surface expose that layer without multiplying
+   its opacity. The content sheet remains solid below the shared title band. */
+@media (prefers-reduced-transparency: no-preference) {
+  html[data-desktop-platform='darwin']:has(.workspace-layout-root > .workspace-body) {
+    background: transparent;
+  }
+
+  html[data-desktop-platform='darwin']:has(.workspace-layout-root > .workspace-body) :is(
+    body,
+    #root,
+    .shell-kernel,
+    [data-shell-node='workspace'],
+    [data-shell-node='workspace-layout-main']
+  ) {
+    background: transparent;
+  }
+
+  html[data-desktop-platform='darwin'] .workspace-layout-root {
+    /* The rounded fill defines the edge; an overlaid hairline would be
+       antialiased again by the corner cutout. */
+    --workspace-sheet-edge: 0px;
+    --workspace-sheet-shadow: 0 1px 8px rgb(0 0 0 / 8%), 0 0 2px rgb(0 0 0 / 4%);
+    background: var(--workspace-material-tint, color-mix(in srgb, var(--panel-solid) 16%, transparent));
+  }
+
+  html[data-desktop-platform='darwin'] :is(.workspace-tabbar, .vertical-tab-rail) {
+    background: transparent;
+  }
+
+  html[data-desktop-platform='darwin'] .workspace-body[data-tab-orientation='vertical'] :is(
+    .workspace-chat-pane:not(.workspace-typed-pane) > .workspace-pane-header,
+    .alto-pane-header,
+    .workspace-typed-pane:not(:has(.alto-pane-header)) > .workspace-pane-header
+  ):not(.workspace-split-vertical:not(.is-fullscreen-second) > .workspace-split-second *) {
+    border-bottom-color: transparent;
+    background: transparent;
+  }
+
+  /* Cast the sheet's shadow from outside its mask, so only the rounded
+     content edge casts onto the glass, leaving title text and controls crisp. */
+  html[data-desktop-platform='darwin'] .workspace-body[data-tab-orientation='vertical'] > .workspace-views:has(> .workspace-view[role='tabpanel']:not([hidden])) {
+    position: relative;
+    z-index: 0;
+    overflow: visible;
+  }
+
+  html[data-desktop-platform='darwin'] .workspace-body[data-tab-orientation='vertical'] > .workspace-views:has(> .workspace-view[role='tabpanel']:not([hidden]))::before {
+    position: absolute;
+    z-index: -1;
+    inset: calc(var(--workspace-pane-header-height) - var(--workspace-sheet-edge)) 0 0;
+    content: '';
+    border-top-left-radius: var(--workspace-sheet-radius);
+    box-shadow: var(--workspace-sheet-shadow);
+    pointer-events: none;
+  }
+
+  html[data-desktop-platform='darwin'] .workspace-body[data-tab-orientation='vertical'] > .workspace-views > .workspace-view[role='tabpanel'] {
+    background: linear-gradient(to bottom, transparent var(--workspace-pane-header-height), var(--workspace-surface-sheet, var(--canvas)) var(--workspace-pane-header-height));
+    /* Cut out the actual sheet corner; translucent paint cannot cover an
+       opaque content pixel and reveal the native material underneath it. */
+    mask-image: linear-gradient(#000, #000), radial-gradient(circle at 100% 100%, transparent calc(var(--workspace-sheet-radius) - 0.5px), #000 var(--workspace-sheet-radius));
+    mask-size: 100% 100%, var(--workspace-sheet-radius) var(--workspace-sheet-radius);
+    mask-position: 0 0, 0 calc(var(--workspace-pane-header-height) - var(--workspace-sheet-edge));
+    mask-repeat: no-repeat;
+    mask-composite: exclude;
+  }
+
+  html[data-desktop-platform='darwin'] .workspace-body[data-tab-orientation='vertical'] :is(
+    .workspace-chat-pane,
+    .workspace-typed-pane-content > .alto-pane
+  ) {
+    background: linear-gradient(to bottom, transparent var(--workspace-pane-header-height), var(--workspace-pane-background, var(--workspace-surface-sheet, var(--canvas))) var(--workspace-pane-header-height));
+  }
+
+  html[data-desktop-platform='darwin'] .workspace-body[data-tab-orientation='vertical'] > .workspace-views > .workspace-view[role='tabpanel']::after {
+    content: none;
+  }
+
+  /* Preserve the body fills that the dark palette gives these pane kinds. */
+  html[data-desktop-platform='darwin'][data-alto-theme='dark'] :is(.canvas-pane, .markdown-viewer-pane, .diff-viewer-pane, .ghostty-workspace-pane) {
+    --workspace-pane-background: var(--bg);
+  }
+}
diff --git a/program/plugins/workspace-material.ts b/program/plugins/workspace-material.ts
new file mode 100644
index 0000000..16441fc
--- /dev/null
+++ b/program/plugins/workspace-material.ts
@@ -0,0 +1,57 @@
+import { createRequire } from 'node:module'
+import type { BrowserWindow } from 'electron'
+import type { HarnessPlugin } from '../../src/server/plugin-api.js'
+
+const workspaceMaterial: HarnessPlugin = (ctx) => {
+  if (process.platform !== 'darwin' || process.type !== 'browser') return
+  const { app, BrowserWindow } = createRequire(import.meta.url)('electron') as typeof import('electron')
+
+  ctx.effect(() => {
+    let active = true
+    const windows = new Map<BrowserWindow, () => void>()
+    const attach = (target: BrowserWindow): void => {
+      if (!active || target.isDestroyed() || windows.has(target)
+        || target.getParentWindow() || target.getTitle() !== app.getName()) return
+
+      const original = target.setVibrancy
+      const setVibrancy: BrowserWindow['setVibrancy'] = (type, options) => {
+        if (target.isDestroyed()) return
+        // The desktop host refreshes its backing surface with under-window.
+        // Keep those refreshes while using Zen's HUD material for this fiber.
+        original.call(target, active && type === 'under-window' ? 'hud' : type, options)
+      }
+      const closed = (): void => { windows.delete(target) }
+      windows.set(target, () => {
+        target.off('closed', closed)
+        if (target.isDestroyed() || target.setVibrancy !== setVibrancy) return
+        target.setVibrancy = original
+        target.setVibrancy('under-window')
+      })
+      target.once('closed', closed)
+      target.setVibrancy = setVibrancy
+      target.setVibrancy('hud')
+    }
+    // Electron emits this before constructor options, including title, settle.
+    const created = (_event: Electron.Event, target: BrowserWindow): void => {
+      queueMicrotask(() => attach(target))
+    }
+    const dispose = (): void => {
+      if (!active) return
+      active = false
+      app.off('browser-window-created', created)
+      for (const restore of windows.values()) restore()
+      windows.clear()
+    }
+
+    app.on('browser-window-created', created)
+    try {
+      for (const target of BrowserWindow.getAllWindows()) attach(target)
+    } catch (error) {
+      dispose()
+      throw error
+    }
+    return dispose
+  }, 'workspaceMaterial.native')
+}
+
+export default workspaceMaterial
diff --git a/program/plugins/workspace-tab-groups.client.tsx b/program/plugins/workspace-tab-groups.client.tsx
index 8cb5a67..fd49dd0 100644
--- a/program/plugins/workspace-tab-groups.client.tsx
+++ b/program/plugins/workspace-tab-groups.client.tsx
@@ -44,17 +44,17 @@ interface DropPreview extends WorkspaceTabDestination {
   edge: 'before' | 'after' | 'inside'
 }
 
-function dropPreview(layout: WorkspaceLayoutState, source: WorkspaceTabDrag, strip: HTMLElement, target: EventTarget, x: number): DropPreview {
+function dropPreview(layout: WorkspaceLayoutState, source: WorkspaceTabDrag, strip: HTMLElement, target: EventTarget, point: number, vertical: boolean): DropPreview {
   const elements = [...strip.querySelectorAll<HTMLElement>('[data-workspace-tab]:not([inert]), [data-workspace-group]')]
   const hit = (target as Element).closest<HTMLElement>('[data-workspace-tab]:not([inert]), [data-workspace-group]')
-    ?? elements.find((element) => element.getBoundingClientRect().left > x)
+    ?? elements.find((element) => (vertical ? element.getBoundingClientRect().top : element.getBoundingClientRect().left) > point)
   if (!hit) return { targetKind: 'end', edge: 'after' }
   const groupId = hit.dataset.workspaceGroup
   const tab = layout.views.find((view) => view.id === hit.dataset.workspaceTab)
   const members = groupId ? layout.views.filter((view) => view.groupId === groupId) : tab ? [tab] : []
   if (!members.length) return { targetKind: 'end', edge: 'after' }
   const bounds = hit.getBoundingClientRect()
-  const fraction = (x - bounds.left) / bounds.width
+  const fraction = vertical ? (point - bounds.top) / bounds.height : (point - bounds.left) / bounds.width
   if (source.kind === 'tab' && groupId && fraction >= 0.2) {
     const next = layout.views[layout.views.indexOf(members.at(-1)!) + 1]
     return { targetKind: 'group', targetId: groupId, edge: 'inside', groupId, ...(next ? { beforeId: next.id } : {}) }
@@ -77,7 +77,7 @@ function dropPreview(layout: WorkspaceLayoutState, source: WorkspaceTabDrag, str
   }
 }
 
-export function WorkspaceTabGroups({ layout, change, rootRef, ui, beginDrag, renderTab, children, tabActions = [] }: WorkspaceTabStripProps & { ui: ClientUiService }): ReactNode {
+export function WorkspaceTabGroups({ orientation = 'horizontal', layout, change, rootRef, ui, beginDrag, renderTab, children, tabActions = [] }: WorkspaceTabStripProps & { ui: ClientUiService }): ReactNode {
   const [menu, setMenu] = useState<GroupMenu>()
   const [name, setName] = useState('')
   const panel = useRef<HTMLDivElement>(null)
@@ -113,11 +113,15 @@ export function WorkspaceTabGroups({ layout, change, rootRef, ui, beginDrag, ren
     if (!source) return
     event.preventDefault()
     event.dataTransfer.dropEffect = 'move'
-    const next = dropPreview(layout, source, event.currentTarget, event.target, event.clientX)
+    const vertical = orientation === 'vertical'
+    const next = dropPreview(layout, source, event.currentTarget, event.target, vertical ? event.clientY : event.clientX, vertical)
     setPreview((current) => current?.targetKind === next.targetKind && current?.targetId === next.targetId
       && current?.edge === next.edge && current?.beforeId === next.beforeId && current?.groupId === next.groupId ? current : next)
     const bounds = event.currentTarget.getBoundingClientRect()
-    if (event.clientX < bounds.left + 24) event.currentTarget.scrollLeft -= 20
+    if (vertical) {
+      if (event.clientY < bounds.top + 24) event.currentTarget.scrollTop -= 20
+      else if (event.clientY > bounds.bottom - 24) event.currentTarget.scrollTop += 20
+    } else if (event.clientX < bounds.left + 24) event.currentTarget.scrollLeft -= 20
     else if (event.clientX > bounds.right - 24) event.currentTarget.scrollLeft += 20
   }
   const menuTab = menu?.kind === 'tab' ? layout.views.find((view) => view.id === menu.id) : undefined
@@ -202,7 +206,7 @@ export function WorkspaceTabGroups({ layout, change, rootRef, ui, beginDrag, ren
 
   const shortcuts = tabGroupShortcutTargets(layout)
   const seen = new Set<string>()
-  return <div className="workspace-tabs workspace-tabs-with-groups" role="tablist" aria-label="Workspaces"
+  return <div className="workspace-tabs workspace-tabs-with-groups" role="tablist" aria-label="Workspaces" aria-orientation={orientation}
     onDragStartCapture={(event) => {
       const source = (event.target as Element).closest<HTMLElement>('[data-workspace-tab]:not([inert]), [data-workspace-group]')
       if (!source) return
@@ -226,7 +230,8 @@ export function WorkspaceTabGroups({ layout, change, rootRef, ui, beginDrag, ren
       const source = drag.current
       if (!source) return
       event.preventDefault()
-      const destination = dropPreview(layout, source, event.currentTarget, event.target, event.clientX)
+      const vertical = orientation === 'vertical'
+      const destination = dropPreview(layout, source, event.currentTarget, event.target, vertical ? event.clientY : event.clientX, vertical)
       change((current) => dropWorkspaceTabs(current, source, destination))
       clearDrag()
     }}>
diff --git a/program/plugins/workspace-tab-groups.css b/program/plugins/workspace-tab-groups.css
index 0a9fa31..8ba0c23 100644
--- a/program/plugins/workspace-tab-groups.css
+++ b/program/plugins/workspace-tab-groups.css
@@ -131,10 +131,58 @@ html[data-alto-theme='dark'] [data-group-color] {
   transition-delay: 0s, 0s, 0s, 0s, 0s, 0s, 0s, var(--workspace-tab-group-duration);
 }
 
+/* Vertical strips stack members under their label and mark them with a
+   colored line instead of a frame. Collapsing animates height rather than width. */
+.workspace-tabs-with-groups[aria-orientation='vertical'] .workspace-tab-group-label,
+.workspace-tabs-with-groups[aria-orientation='vertical'] .workspace-tab-group-member,
+.workspace-tabs-with-groups[aria-orientation='vertical'] .workspace-tab-group-label[aria-expanded='true'] + .workspace-tab-group-member {
+  margin-inline: 0;
+}
+.workspace-tabs-with-groups[aria-orientation='vertical'] .workspace-tab-group-label { color: var(--text); }
+.workspace-tabs-with-groups[aria-orientation='vertical'] .workspace-tab-group-label::before { display: none; }
+/* The line sits under the label's first letter, and member titles start a
+   step further in, so the group reads as one indented column. */
+.workspace-tabs-with-groups[aria-orientation='vertical'] .workspace-tab-group-member {
+  padding-inline-start: var(--space-4);
+  transition: flex-basis var(--workspace-tab-group-duration) var(--workspace-tab-group-easing),
+    margin-block var(--workspace-tab-group-duration) var(--workspace-tab-group-easing),
+    opacity 180ms ease, visibility 0s;
+}
+.workspace-tabs-with-groups[aria-orientation='vertical'] .workspace-tab-group-member::before,
+.workspace-tabs-with-groups[aria-orientation='vertical'] .workspace-tab-group-label[aria-expanded='true'] + .workspace-tab-group-member::before,
+.workspace-tabs-with-groups[aria-orientation='vertical'] .workspace-tab-group-member.is-group-end::before {
+  /* Offsets start inside the tab's 1px border, so reach past it to meet the next slice. */
+  inset-block: calc(-1px - 0.5 * var(--workspace-tab-group-gap));
+  inset-inline: var(--workspace-tab-group-line-inset, var(--space-2)) auto;
+  inline-size: 2px;
+  border: 0;
+  border-radius: 0;
+  background: var(--tab-group-color);
+}
+.workspace-tabs-with-groups[aria-orientation='vertical'] .workspace-tab-group-member.is-group-end::before {
+  inset-block-end: var(--space-1);
+  border-end-start-radius: var(--radius-pill);
+  border-end-end-radius: var(--radius-pill);
+}
+/* The line starts clear of the label's rounded corner, matching its end. */
+.workspace-tabs-with-groups[aria-orientation='vertical'] .workspace-tab-group-label[aria-expanded='true'] + .workspace-tab-group-member::before {
+  inset-block-start: var(--space-1);
+  border-start-start-radius: var(--radius-pill);
+  border-start-end-radius: var(--radius-pill);
+}
+.workspace-tabs-with-groups[aria-orientation='vertical'] .workspace-tab-group-member.is-group-collapsed {
+  flex-basis: 0px;
+  border-block-width: 0;
+  margin-inline: 0;
+  margin-block-end: calc(-1 * var(--workspace-tab-group-gap));
+  transition-delay: 0s, 0s, 0s, var(--workspace-tab-group-duration);
+}
+
 @media (prefers-reduced-motion: reduce) {
   .workspace-tab-group-label,
   .workspace-tab-group-label::before,
   .workspace-tab-group-member,
+  .workspace-tabs-with-groups[aria-orientation='vertical'] .workspace-tab-group-member,
   .workspace-tab-group-count,
   .workspace-tab-group-toggle > svg { transition: none; }
 }
@@ -150,6 +198,15 @@ html[data-alto-theme='dark'] [data-group-color] {
 }
 .workspace-tabs [data-tab-drop='before']::after { inset-inline-start: 0; }
 .workspace-tabs [data-tab-drop='after']::after { inset-inline-end: 0; }
+.workspace-tabs[aria-orientation='vertical'] [data-tab-drop='before']::after,
+.workspace-tabs[aria-orientation='vertical'] [data-tab-drop='after']::after {
+  inset-block: auto;
+  inset-inline: var(--space-1);
+  inline-size: auto;
+  block-size: calc(var(--space-1) / 2);
+}
+.workspace-tabs[aria-orientation='vertical'] [data-tab-drop='before']::after { inset-block-start: 0; }
+.workspace-tabs[aria-orientation='vertical'] [data-tab-drop='after']::after { inset-block-end: 0; }
 .workspace-tabs [data-tab-drop='inside'] { outline: 2px solid var(--tab-group-color, var(--accent)); outline-offset: -2px; }
 .workspace-tab-ungroup-target {
   flex: 0 0 auto;
@@ -166,65 +223,79 @@ html[data-alto-theme='dark'] [data-group-color] {
 }
 
 .workspace-tab-group-menu {
+  --alto-floating-panel-background: var(--ui-surface);
+  --alto-floating-panel-border: var(--ui-border);
+  --alto-floating-panel-radius: var(--ui-panel-radius);
+  --alto-floating-panel-shadow: var(--ui-panel-shadow);
+  --alto-floating-panel-backdrop: none;
   position: absolute;
   z-index: 75;
   inline-size: min(18rem, calc(100% - var(--space-4)));
   max-height: calc(100% - var(--space-4));
-  padding: var(--space-2);
+  padding: var(--ui-panel-inset);
   overflow: auto;
   -webkit-app-region: no-drag;
+  color: var(--ui-text);
+  font: var(--ui-weight) var(--ui-size) / var(--ui-line) var(--ui-font);
 }
 .workspace-tab-group-menu-title {
-  padding: var(--space-1) var(--space-2);
+  padding: var(--ui-row-block-padding) var(--ui-row-inline-padding);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: var(--muted);
-  font-size: var(--type-label);
+  color: var(--ui-text-secondary);
+  font-size: var(--ui-size);
 }
 .workspace-tab-group-menu > button {
-  display: flex;
+  display: grid;
+  grid-template-columns: var(--ui-icon-slot) minmax(0, 1fr) var(--ui-icon-slot);
   align-items: center;
-  gap: var(--space-2);
+  gap: var(--ui-row-gap);
   width: 100%;
   min-width: 0;
-  padding: var(--space-2);
+  min-height: var(--ui-row-min-height);
+  padding: var(--ui-row-block-padding) var(--ui-row-inline-padding);
   border: 0;
-  border-radius: var(--radius-row);
+  border-radius: var(--ui-row-radius);
   background: transparent;
-  color: var(--text);
+  color: var(--ui-text);
   font: inherit;
-  font-size: var(--type-label);
+  font-size: var(--ui-size);
   text-align: left;
 }
-.workspace-tab-group-menu > button > span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.workspace-tab-group-menu > button > svg { flex: 0 0 auto; }
-.workspace-tab-group-menu > button:hover,
-.workspace-tab-group-menu > button:focus-visible { background: var(--panel-soft); }
+.workspace-tab-group-menu > button > span { min-width: 0; grid-column: 2; grid-row: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.workspace-tab-group-menu > button > :is(svg, .workspace-tab-group-dot) { grid-column: 1; grid-row: 1; justify-self: center; }
+.workspace-tab-group-menu > button > svg:last-child:not(:first-child) { grid-column: 3; }
+.workspace-tab-group-menu > button:hover:not(:disabled) { background: var(--ui-hover); }
+.workspace-tab-group-menu > button:active:not(:disabled) { background: var(--ui-pressed); }
+.workspace-tab-group-menu > button:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: -2px; }
+.workspace-tab-group-menu > button:disabled { opacity: .48; cursor: not-allowed; }
 .workspace-tab-group-dot { display: block; width: var(--space-2); height: var(--space-2); flex: 0 0 auto; border-radius: 50%; background: var(--tab-group-color); }
-.workspace-tab-group-name { display: grid; gap: var(--space-1); padding: var(--space-1) var(--space-2); color: var(--muted); font-size: var(--type-label); }
+.workspace-tab-group-name { display: grid; gap: var(--ui-control-gap); padding: var(--ui-row-block-padding) var(--ui-row-inline-padding); color: var(--ui-text-secondary); font-size: var(--ui-size); }
 .workspace-tab-group-name > input {
   min-width: 0;
   width: 100%;
-  padding: var(--space-2);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-row);
-  color: var(--text-strong);
-  background: var(--canvas);
+  min-height: var(--ui-field-min-height);
+  box-sizing: border-box;
+  padding: var(--ui-row-block-padding) var(--ui-field-inline-padding);
+  border: 1px solid var(--ui-field-border);
+  border-radius: var(--ui-field-radius);
+  color: var(--ui-text-strong);
+  background: var(--ui-field-fill);
   font: inherit;
 }
-.workspace-tab-group-name > input:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: 1px; }
-.workspace-tab-group-colors { display: flex; gap: var(--space-2); padding: var(--space-2); }
+.workspace-tab-group-name > input:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 1px; }
+.workspace-tab-group-colors { display: flex; flex-wrap: wrap; gap: var(--ui-control-gap); padding: var(--ui-row-block-padding) var(--ui-row-inline-padding); }
 .workspace-tab-group-colors > button {
   display: grid;
   place-items: center;
-  width: var(--control-icon);
-  height: var(--control-icon);
+  width: var(--ui-icon-slot);
+  height: var(--ui-icon-slot);
   padding: 0;
   border: 2px solid transparent;
   border-radius: 50%;
-  color: var(--text-strong);
-  background: color-mix(in srgb, var(--tab-group-color) 40%, var(--canvas));
+  color: var(--ui-text-strong);
+  background: color-mix(in srgb, var(--tab-group-color) 40%, var(--ui-surface-inset));
 }
 .workspace-tab-group-colors > button[aria-pressed='true'] { border-color: var(--tab-group-color); }
-.workspace-tab-group-colors > button:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
+.workspace-tab-group-colors > button:focus-visible { outline: 2px solid var(--ui-text); outline-offset: 2px; }
diff --git a/program/plugins/workspace-tab-switcher.client.tsx b/program/plugins/workspace-tab-switcher.client.tsx
index 163d364..6055ba0 100644
--- a/program/plugins/workspace-tab-switcher.client.tsx
+++ b/program/plugins/workspace-tab-switcher.client.tsx
@@ -4,6 +4,7 @@ import { clientStyles, type BrowserPlugin } from '../../src/client/plugin-api.js
 import type {} from './hotkeys-api.js'
 import { OptionalThreadStatusService, aggregateThreadWorkStatus, type ClientThreadStatusService } from './thread-status-api.js'
 import { ThreadStatusIndicator } from './ui/thread-status.js'
+import { uiStyles } from './ui/appearance.js'
 import { TAB_SWITCHER_ID, WorkspaceTabSwitcher, releasesTabSwitcher, type TabSwitcherSnapshot } from './workspace-tab-switcher.js'
 import styles from './workspace-tab-switcher.css'
 
@@ -30,11 +31,11 @@ export function TabSwitcherPopup({ controller, state, threadStatus }: {
   }, [state.selectedId])
 
   return <div className={clientStyles.overlayLayer + ' workspace-tab-switcher-layer'} onPointerDown={() => controller.cancel()}>
-    <section className={clientStyles.floatingPanel + ' workspace-tab-switcher'} role="dialog" aria-modal="true" aria-label="Recent tabs" data-native-overlay={TAB_SWITCHER_ID} onPointerDown={(event) => event.stopPropagation()}>
+    <section className={`${clientStyles.floatingPanel} ${uiStyles.dialog} workspace-tab-switcher`} role="dialog" aria-modal="true" aria-label="Recent tabs" data-native-overlay={TAB_SWITCHER_ID} onPointerDown={(event) => event.stopPropagation()}>
       <div ref={list} className="workspace-tab-switcher-list" role="listbox" tabIndex={0} aria-label="Workspace tabs, most recent first" aria-activedescendant={'recent-tab-' + state.selectedId}>
-        {state.tabs.map((tab) => <button key={tab.id} id={'recent-tab-' + tab.id} type="button" role="option" tabIndex={-1} className={tab.active ? 'is-current' : undefined} aria-current={tab.active ? 'page' : undefined} aria-selected={tab.id === state.selectedId} title={tab.title} onClick={() => controller.commit(tab.id)}>
+        {state.tabs.map((tab) => <button key={tab.id} id={'recent-tab-' + tab.id} type="button" role="option" tabIndex={-1} className={`${uiStyles.row}${tab.active ? ' is-current' : ''}`} aria-current={tab.active ? 'page' : undefined} aria-selected={tab.id === state.selectedId} title={tab.title} onClick={() => controller.commit(tab.id)}>
           <span className="workspace-tab-switcher-status"><ThreadStatusIndicator status={aggregateThreadWorkStatus(status, tab.threadIds)} /></span>
-          <span className="workspace-tab-switcher-title">{tab.title}</span>
+          <span className={`${uiStyles.title} workspace-tab-switcher-title`}>{tab.title}</span>
         </button>)}
       </div>
     </section>
diff --git a/program/plugins/workspace-tab-switcher.css b/program/plugins/workspace-tab-switcher.css
index 988f34d..91b70d5 100644
--- a/program/plugins/workspace-tab-switcher.css
+++ b/program/plugins/workspace-tab-switcher.css
@@ -1,48 +1,40 @@
 .workspace-tab-switcher-layer {
   z-index: 120;
-  padding: var(--space-4);
+  padding: var(--ui-dialog-inset);
 }
 .workspace-tab-switcher {
-  --alto-floating-panel-background: var(--side-panel-background, var(--sidebar-material));
-  --alto-floating-panel-backdrop: var(--side-panel-backdrop, blur(26px) saturate(112%));
-  --alto-floating-panel-border: var(--border-soft);
   width: min(100%, calc(var(--control-button) * 10));
   max-height: min(70dvh, calc(var(--control-button) * 14));
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  padding: var(--space-2);
-  font: var(--weight-regular) var(--type-body) / var(--line-body) var(--sans);
+  padding: var(--ui-panel-inset);
 }
 .workspace-tab-switcher-list {
   min-height: 0;
   overflow-y: auto;
-  padding: var(--space-1);
+  padding: 0;
   overscroll-behavior: contain;
   outline: none;
 }
+.workspace-tab-switcher-list:focus-visible {
+  outline: 2px solid var(--ui-focus);
+  outline-offset: -2px;
+  border-radius: var(--ui-row-radius);
+}
 .workspace-tab-switcher-list button {
   display: flex;
   align-items: center;
   width: 100%;
-  min-height: var(--control-default);
-  gap: var(--space-2);
-  padding: var(--space-1) var(--space-3);
-  border: 0;
-  border-radius: var(--radius-row);
-  background: transparent;
-  color: var(--text);
-  font: var(--weight-regular) var(--type-label) / var(--line-control) var(--sans);
+  min-height: var(--ui-row-min-height);
+  gap: var(--ui-row-gap);
+  padding: var(--ui-row-block-padding) var(--ui-row-inline-padding);
   text-align: left;
   cursor: pointer;
 }
-.workspace-tab-switcher-list button:hover { background: var(--floating-row-hover); }
-.workspace-tab-switcher-list button.is-current {
-  background: var(--floating-row-hover);
-  box-shadow: none;
-}
-.workspace-tab-switcher-list button[aria-selected='true'] {
-  background: color-mix(in srgb, var(--text) 14%, transparent);
+/* The open tab is context; aria-selected marks the keyboard destination. */
+.workspace-tab-switcher-list button[aria-current='page']:not([aria-selected='true']) {
+  background: var(--ui-hover);
 }
 .workspace-tab-switcher-title { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.workspace-tab-switcher-status { flex: 0 0 var(--space-4); display: grid; place-items: center; }
+.workspace-tab-switcher-status { flex: 0 0 var(--ui-icon-slot); display: grid; place-items: center; }
diff --git a/program/plugins/workspace-tabs-appearance.client.ts b/program/plugins/workspace-tabs-appearance.client.ts
new file mode 100644
index 0000000..9619b7c
--- /dev/null
+++ b/program/plugins/workspace-tabs-appearance.client.ts
@@ -0,0 +1,12 @@
+import type { BrowserPlugin } from '../../src/client/plugin-api.js'
+import workspaceStyles from './workspace-appearance.css'
+import styles from './workspace-tabs-appearance.css'
+
+const workspaceTabsAppearance: BrowserPlugin = (ctx) => {
+  ctx.clientUi.registerStyle(ctx, 'workspace-appearance', String(workspaceStyles))
+  ctx.clientUi.registerStyle(ctx, 'workspace-tabs-appearance', String(styles))
+}
+
+workspaceTabsAppearance.inject = ['clientUi']
+
+export default workspaceTabsAppearance
diff --git a/program/plugins/workspace-tabs-appearance.css b/program/plugins/workspace-tabs-appearance.css
new file mode 100644
index 0000000..0702cb0
--- /dev/null
+++ b/program/plugins/workspace-tabs-appearance.css
@@ -0,0 +1,232 @@
+/* Top tabs and the side rail share geometry, palette, and interaction states.
+   Their composition and the native window material are owned separately. */
+:is(.workspace-tabbar, .vertical-tab-rail) {
+  --workspace-tab-row-height: var(--ui-row-min-height);
+  --workspace-tab-action-size: var(--ui-icon-slot);
+  --workspace-tab-action-inset: calc((var(--workspace-tab-row-height) - var(--workspace-tab-action-size)) / 2);
+  --workspace-tab-trailing-inset: calc(2 * var(--workspace-tab-action-size) + var(--workspace-tab-action-inset));
+  --workspace-tab-ink: var(--workspace-chrome-ink);
+  --workspace-tab-secondary: var(--workspace-tab-ink);
+  --workspace-tab-hover: var(--workspace-control-hover);
+  --workspace-tab-selected: var(--workspace-control-selected);
+  --workspace-tab-pressed: var(--workspace-control-pressed);
+  --workspace-tab-focus: var(--workspace-tab-ink);
+  /* Enabled navigation needs readable ink on glass, including its icons,
+     counts, and running indicators. Semantic accent colors stay independent. */
+  --muted: var(--workspace-tab-secondary);
+  --dim: var(--workspace-tab-secondary);
+  --text-muted: var(--workspace-tab-secondary);
+  --text-secondary: var(--workspace-tab-secondary);
+  --icon-opacity: 1;
+  --alto-button-color: var(--workspace-tab-secondary);
+  --alto-button-background: transparent;
+  --alto-button-background-hover: var(--workspace-tab-hover);
+  --alto-button-border: transparent;
+  --alto-button-border-hover: transparent;
+  --alto-button-shadow: none;
+  --alto-button-shadow-hover: none;
+  --ui-text: var(--workspace-tab-ink);
+  --ui-text-strong: var(--workspace-tab-ink);
+  --ui-text-secondary: var(--workspace-tab-ink);
+  --ui-focus: var(--workspace-tab-focus);
+}
+
+/* The native title bands keep their existing heights and window-button inset.
+   Inner rows use the same rhythm in either tab orientation. */
+.workspace-tabbar {
+  gap: var(--ui-row-gap);
+  padding-inline: var(--ui-panel-inset);
+}
+:is(.workspace-tabbar, .vertical-tab-rail) :is(.workspace-tabbar-leading, .workspace-tabbar-tools) {
+  gap: var(--ui-control-gap);
+}
+:is(.workspace-tabbar, .vertical-tab-rail) .workspace-tabbar-tools > .workspace-shell-contribution {
+  gap: var(--ui-control-gap);
+}
+:is(.workspace-tabbar, .vertical-tab-rail) .workspace-history-controls {
+  gap: var(--ui-control-gap);
+  margin-inline-end: 0;
+}
+:is(.workspace-tabbar, .vertical-tab-rail) .workspace-history-controls > button {
+  width: var(--workspace-tab-action-size);
+  height: var(--workspace-tab-action-size);
+  flex-basis: var(--workspace-tab-action-size);
+}
+.vertical-tab-rail.is-collapsed .workspace-history-controls { max-width: 100%; }
+.vertical-tab-rail .vertical-tab-rail-header { padding-inline-end: var(--ui-panel-inset); }
+html:not([data-desktop-platform='darwin']) .vertical-tab-rail:not(.is-collapsed) .vertical-tab-rail-header {
+  padding-inline-start: var(--ui-panel-inset);
+}
+.vertical-tab-rail .vertical-tab-rail-footer {
+  gap: var(--ui-control-gap);
+  padding: var(--ui-panel-inset);
+}
+.vertical-tab-rail .vertical-tab-rail-footer > .workspace-tabbar-tools { gap: var(--ui-control-gap); }
+
+:is(.workspace-tabbar, .vertical-tab-rail) .workspace-tabs[aria-orientation] {
+  --workspace-tab-group-gap: calc(var(--ui-row-gap) / 2);
+  gap: var(--workspace-tab-group-gap);
+}
+.vertical-tab-rail:not(.is-collapsed) .workspace-tabs {
+  --workspace-tab-group-line-inset: var(--ui-row-inline-padding);
+  padding-inline: var(--ui-panel-inset);
+}
+
+/* Status/count and close/chevron each get a slot even while their contents are
+   absent or hidden. Titles therefore stay put as work or hover state changes. */
+:is(.workspace-tabbar, .vertical-tab-rail:not(.is-collapsed)) .workspace-tab:not(.is-group-collapsed) {
+  min-height: var(--workspace-tab-row-height);
+  height: var(--workspace-tab-row-height);
+  gap: var(--ui-row-gap);
+  padding-inline: var(--ui-row-inline-padding) var(--workspace-tab-trailing-inset);
+}
+.workspace-tabbar .workspace-tab:not(.is-group-collapsed) {
+  min-width: calc(var(--ui-row-inline-padding) + var(--workspace-tab-trailing-inset) + 4ch + var(--space-1) / 2);
+}
+.workspace-tabbar .workspace-tab { height: var(--workspace-tab-row-height); }
+:is(.workspace-tabbar, .vertical-tab-rail) .workspace-tab > .workspace-tab-title,
+:is(.workspace-tabbar, .vertical-tab-rail) .workspace-tab-group-label > span:first-child {
+  min-width: 0;
+  flex: 1 1 auto;
+  padding: 0;
+}
+:is(.workspace-tabbar, .vertical-tab-rail) .workspace-tab > .workspace-tab-icon {
+  width: var(--workspace-tab-action-size);
+  height: var(--workspace-tab-action-size);
+  flex-basis: var(--workspace-tab-action-size);
+}
+:is(.workspace-tabbar, .vertical-tab-rail:not(.is-collapsed)) .workspace-tab > :is(
+  .workspace-tab-close, .workspace-tab-thread-status, .workspace-tab-group-count, .workspace-tab-group-toggle
+) {
+  position: absolute;
+  inset-block: 0;
+  width: var(--workspace-tab-action-size);
+  height: var(--workspace-tab-action-size);
+  margin: auto 0;
+  display: grid;
+  place-items: center;
+}
+:is(.workspace-tabbar, .vertical-tab-rail:not(.is-collapsed)) .workspace-tab > :is(.workspace-tab-close, .workspace-tab-group-toggle) {
+  inset-inline-end: var(--workspace-tab-action-inset);
+}
+:is(.workspace-tabbar, .vertical-tab-rail:not(.is-collapsed)) .workspace-tab > :is(.workspace-tab-thread-status, .workspace-tab-group-count) {
+  inset-inline-end: calc(var(--workspace-tab-action-size) + var(--workspace-tab-action-inset));
+}
+.vertical-tab-rail:not(.is-collapsed) .workspace-tabs-with-groups[aria-orientation='vertical'] .workspace-tab-group-member:not(.is-group-collapsed) {
+  padding-inline-start: calc(var(--ui-row-inline-padding) + var(--space-1) / 2 + var(--ui-row-gap));
+}
+
+.workspace-tabbar .workspace-tab-add {
+  width: var(--workspace-tab-row-height);
+  height: var(--workspace-tab-row-height);
+  flex-basis: var(--workspace-tab-row-height);
+}
+/* A separate, compact action reads differently from a full-width chat row. */
+.vertical-tab-rail:not(.is-collapsed) .workspace-tab-add-control {
+  margin-block-start: var(--ui-row-gap);
+}
+.vertical-tab-rail:not(.is-collapsed) .workspace-tab-add {
+  width: fit-content;
+  max-width: 100%;
+  height: var(--workspace-tab-row-height);
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) var(--workspace-tab-action-size);
+  align-items: center;
+  justify-items: start;
+  justify-content: normal;
+  gap: var(--ui-row-gap);
+  padding-inline: var(--ui-row-inline-padding);
+  text-align: start;
+}
+.vertical-tab-rail:not(.is-collapsed) .workspace-tab-add > svg {
+  grid-area: 1 / 2;
+  justify-self: center;
+}
+.vertical-tab-rail:not(.is-collapsed) .workspace-tab-add::after { grid-area: 1 / 1; }
+:is(.workspace-tabbar, .vertical-tab-rail) .workspace-tabbar-tools :is(.alto-icon-button, .icon-button) {
+  --alto-icon-button-size: var(--workspace-tab-row-height);
+  --toolbar-icon-button-size: var(--workspace-tab-row-height);
+}
+
+:is(.workspace-tabbar, .vertical-tab-rail) .workspace-tab {
+  color: var(--workspace-tab-ink);
+  font-weight: var(--weight-regular);
+}
+
+/* Group lines mark membership without adding another filled surface. */
+:is(.workspace-tabbar, .vertical-tab-rail) .workspace-tabs [data-group-color] {
+  --tab-group-fill: transparent;
+}
+:is(.workspace-tabbar, .vertical-tab-rail) .workspace-tabs .workspace-tab.workspace-tab-group-label[aria-expanded] {
+  color: var(--workspace-tab-ink);
+  font-weight: var(--weight-medium);
+}
+:is(.workspace-tabbar, .vertical-tab-rail) .workspace-tabs .workspace-tab:hover:not([data-tab-drop]) {
+  color: var(--workspace-tab-ink);
+  background: var(--workspace-tab-hover);
+}
+:is(.workspace-tabbar, .vertical-tab-rail) .workspace-tabs .workspace-tab.workspace-tab-group-label:hover:not([data-tab-drop]) {
+  background: var(--workspace-tab-hover);
+}
+:is(.workspace-tabbar, .vertical-tab-rail) .workspace-tabs .workspace-tab.is-active:not([data-tab-drop]),
+:is(.workspace-tabbar, .vertical-tab-rail) .workspace-tabs .workspace-tab.workspace-tab-group-label.is-active:not([data-tab-drop]) {
+  color: var(--text-strong);
+  border-color: transparent;
+  background: var(--workspace-tab-selected);
+  font-weight: var(--weight-medium);
+}
+:is(.workspace-tabbar, .vertical-tab-rail) .workspace-tabs .workspace-tab.is-active:hover:not([data-tab-drop]) {
+  background: var(--workspace-tab-selected);
+}
+:is(.workspace-tabbar, .vertical-tab-rail) .workspace-tab.is-active > .workspace-tab-icon,
+:is(.workspace-tabbar, .vertical-tab-rail) .workspace-tab:hover > .workspace-tab-icon { color: inherit; }
+
+:is(.workspace-tabbar, .vertical-tab-rail) .workspace-tab-group-label:is(.is-active, :active, :focus-visible) .workspace-tab-group-count {
+  color: inherit;
+}
+
+:is(.workspace-tabbar, .vertical-tab-rail) .workspace-tabbar-tools button { color: var(--workspace-tab-secondary); }
+
+:is(.workspace-tabbar, .vertical-tab-rail) :is(
+  .workspace-history-controls > button,
+  .workspace-tab-close,
+  .workspace-tab-add,
+  .vertical-tab-rail-toggle,
+  .workspace-tabbar-tools button
+):hover:not(:disabled) {
+  color: var(--workspace-tab-ink);
+  background: var(--workspace-tab-hover);
+}
+:is(.workspace-tabbar, .vertical-tab-rail) .workspace-tabbar-tools :is(
+  button[aria-pressed='true'],
+  button[aria-haspopup][aria-expanded='true']
+) {
+  color: var(--workspace-tab-focus);
+  background: var(--workspace-tab-selected);
+}
+:is(.workspace-tabbar, .vertical-tab-rail) .workspace-tabs .workspace-tab:focus-visible:not([data-tab-drop]),
+:is(.workspace-tabbar, .vertical-tab-rail) .workspace-tabs .workspace-tab.workspace-tab-group-label:focus-visible:not([data-tab-drop]),
+:is(.workspace-tabbar, .vertical-tab-rail) :is(.workspace-tab, .workspace-tab-close, .workspace-tab-add, .vertical-tab-rail-toggle, .workspace-tabbar-tools button, .workspace-history-controls > button):focus-visible:not([data-tab-drop]) {
+  color: var(--text-strong);
+  outline: 2px solid var(--workspace-tab-focus);
+  outline-offset: -2px;
+  background: var(--workspace-tab-selected);
+}
+
+:is(.workspace-tabbar, .vertical-tab-rail) .workspace-tabs .workspace-tab:active:not([data-tab-drop]),
+:is(.workspace-tabbar, .vertical-tab-rail) .workspace-tabs .workspace-tab.is-active:active:not([data-tab-drop]),
+:is(.workspace-tabbar, .vertical-tab-rail) .workspace-tabs .workspace-tab.workspace-tab-group-label:active:not([data-tab-drop]),
+:is(.workspace-tabbar, .vertical-tab-rail) :is(.workspace-tab-close, .workspace-tab-add, .vertical-tab-rail-toggle, .workspace-tabbar-tools button, .workspace-history-controls > button):active:not(:disabled) {
+  color: var(--text-strong);
+  background: var(--workspace-tab-pressed);
+}
+/* Pointer feedback is immediate; group labels and members retain their
+   geometry transitions, as do the chevrons and counts inside group labels. */
+:is(.workspace-tabbar, .vertical-tab-rail) .workspace-tab:not(.workspace-tab-group-member):not(.workspace-tab-group-label) { transition: none; }
+:is(.workspace-tabbar, .vertical-tab-rail) .workspace-tab-group-label {
+  transition: margin-inline-start var(--workspace-tab-group-duration) var(--workspace-tab-group-easing);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :is(.workspace-tabbar, .vertical-tab-rail) .workspace-tab-group-label { transition: none; }
+}
diff --git a/scripts/design-system-audit-baseline.json b/scripts/design-system-audit-baseline.json
index 0c2df14..a25fa43 100644
--- a/scripts/design-system-audit-baseline.json
+++ b/scripts/design-system-audit-baseline.json
@@ -1,45 +1,45 @@
 {
   "version": 1,
   "files": {
-    "program/plugins/agent-switcher.css": {"rawFontSize": 6, "rawRadius": 1, "rawSpacing": 16, "rawGeometry": 9, "rawShadow": 1},
-    "program/plugins/browser-workspace.css": {"rawFontSize": 4, "rawSpacing": 7, "rawGeometry": 1, "rawColor": 3, "rawShadow": 1},
+    "program/plugins/agent-switcher.css": {"rawGeometry": 3},
+    "program/plugins/browser-workspace.css": {"rawFontSize": 1, "rawSpacing": 7, "rawGeometry": 1},
     "program/plugins/canvas.css": {"rawFontSize": 2, "rawFontWeight": 1, "rawSpacing": 3, "rawGeometry": 1},
     "program/plugins/code-blocks.css": {"rawFontSize": 1, "rawRadius": 1, "rawSpacing": 3, "rawGeometry": 3, "rawColor": 23, "rawShadow": 1},
     "program/plugins/code-tour.css": {"rawFontSize": 5, "rawFontWeight": 2, "rawRadius": 2, "rawSpacing": 10, "rawGeometry": 2, "rawShadow": 1, "negativeTracking": 2},
     "program/plugins/diff-viewer.client.tsx": {"rawFontSize": 2, "rawRadius": 2, "rawSpacing": 4, "rawGeometry": 2},
-    "program/plugins/diff-viewer.css": {"rawFontSize": 6, "rawRadius": 3, "rawSpacing": 24, "rawGeometry": 6, "rawColor": 2},
+    "program/plugins/diff-viewer.css": {"rawFontSize": 1, "rawSpacing": 24, "rawGeometry": 6},
     "program/plugins/file-tree.client.tsx": {"inlineStyle": 1},
-    "program/plugins/file-tree.css": {"rawFontSize": 3, "rawRadius": 2, "rawSpacing": 7, "rawGeometry": 1},
+    "program/plugins/file-tree.css": {"rawSpacing": 7, "rawGeometry": 1},
     "program/plugins/ghostty-terminal.css": {"rawFontSize": 2, "rawSpacing": 2, "rawGeometry": 1, "rawColor": 4},
     "program/plugins/git-pane-status.client.tsx": {"inlineStyle": 1},
-    "program/plugins/git-support.css": {"rawFontSize": 6, "rawFontWeight": 2, "rawRadius": 1, "rawSpacing": 13, "rawGeometry": 6},
-    "program/plugins/harpoon.css": {"rawFontSize": 19, "rawFontWeight": 10, "rawRadius": 11, "rawSpacing": 40, "rawGeometry": 21, "rawColor": 7, "negativeTracking": 2},
+    "program/plugins/git-support.css": {"rawSpacing": 13, "rawGeometry": 6},
+    "program/plugins/harpoon.css": {"rawGeometry": 6},
     "program/plugins/hotkeys.client.tsx": {"inlineStyle": 1},
-    "program/plugins/hotkeys.css": {"rawFontSize": 13, "rawFontWeight": 4, "rawRadius": 3, "rawSpacing": 38, "rawGeometry": 23, "rawColor": 1, "rawShadow": 1},
+    "program/plugins/hotkeys.css": {"rawSpacing": 38, "rawGeometry": 23},
     "program/plugins/markdown-viewer.css": {"rawFontSize": 3, "rawFontWeight": 2, "rawRadius": 1, "rawSpacing": 10, "rawGeometry": 2, "rawShadow": 1},
     "program/plugins/math.css": {"rawFontSize": 3},
     "program/plugins/mermaid.client.tsx": {"rawColor": 1},
-    "program/plugins/mermaid.css": {"rawRadius": 3, "rawSpacing": 7, "rawGeometry": 6, "rawShadow": 1},
+    "program/plugins/mermaid.css": {"rawRadius": 2, "rawSpacing": 7, "rawGeometry": 6},
     "program/plugins/pane-tabs.client.tsx": {"inlineStyle": 1},
     "program/plugins/pane-tabs.css": {"rawFontSize": 1, "rawFontWeight": 2, "rawRadius": 1, "rawSpacing": 11, "rawGeometry": 8, "rawShadow": 1, "negativeTracking": 2},
     "program/plugins/pdf-viewer.css": {"rawFontSize": 4, "rawFontWeight": 1, "rawRadius": 1, "rawSpacing": 5, "rawGeometry": 2, "rawColor": 4},
-    "program/plugins/recent-chats.css": {"rawFontSize": 2, "rawFontWeight": 1, "rawSpacing": 3, "rawGeometry": 6, "rawColor": 2},
-    "program/plugins/scheduled.css": {"rawFontSize": 13, "rawFontWeight": 5, "rawRadius": 8, "rawSpacing": 39, "rawGeometry": 15, "rawColor": 1, "rawShadow": 2},
+    "program/plugins/recent-chats.css": {"rawGeometry": 2},
+    "program/plugins/scheduled.css": {"rawRadius": 1, "rawSpacing": 38, "rawGeometry": 15},
     "program/plugins/scrollback.client.tsx": {"inlineStyle": 3},
     "program/plugins/scrollback.css": {"rawFontSize": 2, "rawFontWeight": 1, "rawRadius": 2, "rawSpacing": 16, "rawGeometry": 14, "rawShadow": 1},
-    "program/plugins/search.css": {"rawFontSize": 3, "rawFontWeight": 1, "rawSpacing": 9, "rawGeometry": 7, "rawColor": 1, "rawShadow": 1},
-    "program/plugins/sidebar.css": {"rawSpacing": 2, "rawGeometry": 8, "rawShadow": 1},
+    "program/plugins/search.css": {"rawGeometry": 3},
+    "program/plugins/sidebar.css": {"rawSpacing": 2, "rawGeometry": 8},
     "program/plugins/source-viewer.client.tsx": {"rawRadius": 1, "rawSpacing": 1},
-    "program/plugins/source-viewer.css": {"rawFontSize": 3, "rawRadius": 1, "rawSpacing": 9, "rawGeometry": 1},
-    "program/plugins/steer.css": {"rawFontSize": 5, "rawRadius": 3, "rawSpacing": 17, "rawGeometry": 7, "rawShadow": 2},
+    "program/plugins/source-viewer.css": {"rawFontSize": 2, "rawSpacing": 9, "rawGeometry": 1},
+    "program/plugins/steer.css": {"rawSpacing": 17, "rawGeometry": 7},
     "program/plugins/theme.client.tsx": {"inlineStyle": 1},
     "program/plugins/thread-status.css": {"rawGeometry": 6},
     "program/plugins/turn-progress.css": {"rawFontSize": 3, "rawFontWeight": 1, "rawRadius": 1, "rawSpacing": 10, "rawGeometry": 10, "rawShadow": 2},
     "program/plugins/ui/composer.tsx": {"inlineStyle": 1},
-    "program/plugins/ui/default.css": {"rawFontSize": 79, "rawFontWeight": 39, "rawRadius": 63, "rawSpacing": 313, "rawGeometry": 160, "rawColor": 81, "rawShadow": 28, "negativeTracking": 8},
+    "program/plugins/ui/default.css": {"rawFontSize": 60, "rawFontWeight": 30, "rawRadius": 47, "rawSpacing": 270, "rawGeometry": 137, "rawColor": 68, "rawShadow": 16, "negativeTracking": 8},
     "program/plugins/ui/markdown.tsx": {"inlineStyle": 2},
     "program/plugins/work-targets.client.tsx": {"inlineStyle": 1},
-    "program/plugins/work-targets.css": {"rawFontSize": 11, "rawFontWeight": 8, "rawRadius": 1, "rawSpacing": 26, "rawGeometry": 9, "rawColor": 1, "rawShadow": 1},
+    "program/plugins/work-targets.css": {"rawSpacing": 26, "rawGeometry": 9},
     "program/plugins/workspace-layout.client.tsx": {"inlineStyle": 1},
     "program/plugins/workspace-layout.css": {"rawFontSize": 12, "rawFontWeight": 6, "rawRadius": 2, "rawSpacing": 44, "rawGeometry": 35, "rawColor": 2, "rawShadow": 10, "negativeTracking": 1}
   }
diff --git a/tests/client-styles.test.ts b/tests/client-styles.test.ts
index 5359b7a..2e3d17a 100644
--- a/tests/client-styles.test.ts
+++ b/tests/client-styles.test.ts
@@ -321,14 +321,14 @@ describe('client style contract', () => {
     expect(client).toContain('session.newThread(null)')
   })
 
-  it('uses translucent blurred materials for floating conversation controls', async () => {
+  it('shares floating roles while preserving translucent reading controls', async () => {
     const [defaultUiCss, steerCss] = await Promise.all([
       readFile(defaultUiCssUrl, 'utf8'),
       readFile(steerCssUrl, 'utf8'),
     ])
 
     expect(defaultUiCss).toMatch(/\.conversation-jump-latest\s*{[^}]*background: color-mix\(in srgb, var\(--panel-solid\) 52%, transparent\);[^}]*backdrop-filter: blur\(22px\)/s)
-    expect(steerCss).toMatch(/\.steer-queue\s*{[^}]*background: color-mix\(in srgb, var\(--panel-solid\) 56%, transparent\);[^}]*backdrop-filter: blur\(22px\)/s)
+    expect(steerCss).toMatch(/\.steer-queue\s*{[^}]*background: var\(--ui-surface\);[^}]*box-shadow: var\(--ui-panel-shadow\);[^}]*backdrop-filter: none;/s)
   })
 
   it('uses a quiet file-diff icon for turn review without splitting the summary pill', async () => {
@@ -415,7 +415,7 @@ describe('client style contract', () => {
     expect(workspaceLayoutCss).toMatch(/\.workspace-tabbar\s*{[^}]*background: color-mix\(in srgb, var\(--pane-tabbar-background, var\(--canvas\)\) 90%, transparent\);[^}]*backdrop-filter: blur\(14px\)/s)
     expect(paneTabsCss).toMatch(/\.pane-tab-drag-preview\s*{[^}]*background: color-mix\(in srgb, var\(--panel\) 88%, transparent\);[^}]*backdrop-filter: blur\(16px\)/s)
     expect(markdownLink).toContain('clientStyles.floatingPanel')
-    expect(diffViewerCss).toMatch(/\.diff-viewer-body > \.file-tree\s*{[^}]*background: color-mix\(in srgb, var\(--panel-soft\) 76%, transparent\);[^}]*backdrop-filter: blur\(12px\)/s)
+    expect(diffViewerCss).toMatch(/\.diff-viewer-body > \.file-tree\s*{[^}]*background: var\(--ui-surface-inset\);/s)
     expect(diffViewerClient).toMatch(/\[data-diffs-header\]\[data-sticky\]\s*{[^}]*background-color: color-mix\(in srgb, var\(--diffs-bg\) 88%, transparent\);[^}]*backdrop-filter: blur\(14px\)/s)
   })
 
@@ -586,8 +586,8 @@ describe('client style contract', () => {
     expect(sidebarCss).toMatch(/\.shell-sidebar-action\s*\{[^}]*width: 100%;[^}]*justify-content: flex-start;/s)
     expect(sidebarCss).not.toContain('.button.shell-sidebar-action')
     expect(defaultUiCss).not.toContain('.button.shell-sidebar-action')
-    expect(sidebarCss).toContain('--sidebar-inactive-text: color-mix(in srgb, var(--text) 55%, var(--muted));')
+    expect(sidebarCss).toContain('--sidebar-inactive-text: var(--ui-text-secondary);')
     expect(sidebarCss).toContain('.history-workspace-heading:not(.active),\n.history-entry:not(.active)')
-    expect(sidebarCss).toMatch(/html\[data-alto-theme='dark'\] \[data-shell-node="conversation-history"\]\s*{[^}]*--sidebar-inactive-text: var\(--muted\);/s)
+    expect(sidebarCss).toMatch(/html\[data-alto-theme='dark'\] \[data-shell-node="conversation-history"\]\s*{[^}]*--sidebar-inactive-text: var\(--ui-text-secondary\);/s)
   })
 })
diff --git a/tests/fixtures/chat-history.cjs b/tests/fixtures/chat-history.cjs
index 0f4391e..1621bf3 100644
--- a/tests/fixtures/chat-history.cjs
+++ b/tests/fixtures/chat-history.cjs
@@ -46,7 +46,7 @@ async function check() {
     loader: { '.css': 'text' }, define: { 'process.env.NODE_ENV': '"production"' },
   })
   const css = (await Promise.all([
-    'src/client/pane-toolbar.css', 'src/client/styles.css', 'program/plugins/theme.css', 'program/plugins/thread-status.css',
+    'src/client/pane-toolbar.css', 'src/client/styles.css', 'program/plugins/ui/appearance-tokens.css', 'program/plugins/ui/controls.css', 'program/plugins/ui/surfaces.css', 'program/plugins/theme.css', 'program/plugins/thread-status.css',
   ].map(file => fs.readFile(file, 'utf8')))).join('\n').replace(/@import[^;]+;/g, '')
   const server = http.createServer(async (request, response) => {
     if (request.url?.startsWith('/fonts/')) {
diff --git a/tests/fixtures/git-pane-context.cjs b/tests/fixtures/git-pane-context.cjs
index 91d2b79..460ce18 100644
--- a/tests/fixtures/git-pane-context.cjs
+++ b/tests/fixtures/git-pane-context.cjs
@@ -175,7 +175,7 @@ async function check() {
     } }] : [],
   })
   const css = (await Promise.all([
-    'src/client/styles.css', 'program/plugins/ui/default.css', 'program/plugins/theme.css',
+    'src/client/styles.css', 'program/plugins/ui/appearance-tokens.css', 'program/plugins/ui/controls.css', 'program/plugins/ui/surfaces.css', 'program/plugins/ui/default.css', 'program/plugins/theme.css',
     'program/plugins/workspace-layout.css', 'program/plugins/git-support.css',
   ].map(read))).join('\n').replace(/@import[^;]+;/g, '')
   const server = http.createServer((_request, response) => response.end('<!doctype html><meta charset="utf-8"><style>' + css + `
diff --git a/tests/fixtures/interface-appearance.cjs b/tests/fixtures/interface-appearance.cjs
new file mode 100644
index 0000000..a23d0cc
--- /dev/null
+++ b/tests/fixtures/interface-appearance.cjs
@@ -0,0 +1,509 @@
+const { app, BrowserWindow } = require('./background-electron.cjs')
+const { build } = require('esbuild')
+const assert = require('node:assert/strict')
+const fs = require('node:fs/promises')
+const http = require('node:http')
+const path = require('node:path')
+
+async function check() {
+  await app.whenReady()
+  const bundle = await build({
+    stdin: { resolveDir: process.cwd(), sourcefile: 'interface-appearance-check.tsx', loader: 'tsx', contents: `
+      import React,{useState,useSyncExternalStore} from 'react';
+      import {createRoot} from 'react-dom/client';
+      import {flushSync} from 'react-dom';
+      import appearancePlugin from './program/plugins/interface-appearance.client';
+      import workspaceAppearancePlugin from './program/plugins/workspace-tabs-appearance.client';
+      import surfacesPlugin from './program/plugins/ui-surfaces.client';
+      import themePlugin from './program/plugins/theme.client';
+      import searchPlugin from './program/plugins/search.client';
+      import {WorkspaceTabActionMenu} from './program/plugins/workspace-tab-menu.client';
+      import {NewWorkspaceDialog} from './program/plugins/ui/project-settings';
+      import {Composer} from './program/plugins/ui/composer';
+      import {uiStyles} from './program/plugins/ui/appearance';
+
+      const owner=()=>{let cleanups=[];return {
+        effect(fn){const cleanup=fn();if(typeof cleanup==='function')cleanups.push(cleanup);return cleanup},
+        dispose(){const pending=cleanups;cleanups=[];for(const cleanup of pending.reverse())cleanup()}
+      }};
+      const featureOwner=owner(),workspaceOwner=owner(),styles=new Map(),surfaces=new Map(),roots=new Map(),pages=[];
+      const uiListeners=new Set();let uiRevision=0;
+      const changed=()=>{uiRevision++;for(const listener of uiListeners)listener()};
+      const sessionListeners=new Set(),overlayListeners=new Set();let overlay;
+      const overlays={subscribe:fn=>{overlayListeners.add(fn);return()=>overlayListeners.delete(fn)},snapshot:()=>overlay,
+        open:id=>{overlay=id;for(const fn of overlayListeners)fn()},
+        close:id=>{if(overlay===id){overlay=undefined;for(const fn of overlayListeners)fn()}},
+        toggle:id=>overlay===id?overlays.close(id):overlays.open(id)};
+      const threads=Array.from({length:20},(_,index)=>({id:'thread-'+index,title:'Conversation '+String(index).padStart(2,'0'),preview:'A saved reply',cwd:'/repo',createdAt:1,updatedAt:100-index}));
+      let state={connected:true,threadId:'thread-0',session:{workspace:'/repo',permissionMode:'full'},projects:[],threads:[],skills:[],
+        turn:{tag:'idle'},activities:[],history:{tag:'ready',entries:[]},
+        harness:{extensions:{},server:{projectRoot:'/repo'},codex:{status:'ready',models:[]},program:{plugins:[],tools:[]},ui:{surfaces:[],contributions:[],regions:[]}}};
+      const session={snapshot:()=>state,subscribe:fn=>{sessionListeners.add(fn);return()=>sessionListeners.delete(fn)},
+        setPermissionMode:permissionMode=>{state={...state,session:{...state.session,permissionMode}};for(const fn of sessionListeners)fn()},
+        selectProject:()=>{},saveProject:async()=>{},removeProject:async()=>{}};
+      const selectedThreads=[];
+      const layout={snapshot:()=>0,subscribe:()=>()=>{},tabs:()=>threads.map((thread,index)=>({id:'tab-'+index,title:thread.title,active:index===0,threadIds:[thread.id],threads:[thread]})),
+        paneTargets:()=>[],focusThread:id=>{selectedThreads.push(id);return true},newTab:()=>{throw Error('Search should reuse its existing conversation')}};
+      const host={snapshot:()=>({connectionEpoch:1}),subscribe:()=>()=>{},command:async()=>{},call:async(method,payload)=>method==='search.preview'?{preview:'Saved reply for '+payload.threadId}:undefined};
+      const browserProgram={diagnostics:[]};
+      const ui={subscribe:listener=>{uiListeners.add(listener);return()=>uiListeners.delete(listener)},snapshot:()=>uiRevision,overlays,settingsPages:()=>pages,
+        registerStyle:(scope,id,css)=>scope.effect(()=>{if(styles.has(id))throw Error('Duplicate style '+id);const style=document.createElement('style');style.dataset.pluginStyle=id;style.textContent=css;styles.set(id,style);document.head.append(style);changed();return()=>{styles.delete(id);style.remove();changed()}}),
+        registerSurface:(scope,id,component)=>scope.effect(()=>{surfaces.set(id,component);changed();return()=>{surfaces.delete(id);changed()}}),
+        registerRoot:(scope,id,component)=>scope.effect(()=>{roots.set(id,component);changed();return()=>{roots.delete(id);changed()}}),
+        registerSettingsPage:(scope,page)=>scope.effect(()=>{pages.push(page);changed();return()=>{pages.splice(pages.indexOf(page),1);changed()}}),
+        registerComponent:()=>{},registerContributionRenderer:()=>{}};
+      const services={clientUi:ui,clientSession:session,clientHost:host,clientMarkdown:{},clientWorkspaceLayout:layout,
+        clientProgram:{subscribe:()=>()=>{},snapshot:()=>browserProgram},get:()=>undefined,on:()=>()=>{}};
+      const apply=(plugin,scope,config)=>{const dispose=plugin(Object.assign(scope,services),config);if(typeof dispose==='function')scope.effect(()=>dispose)};
+      let appearanceOwner;
+      window.installAppearance=()=>flushSync(()=>{if(appearanceOwner)throw Error('Appearance already installed');appearanceOwner=owner();apply(appearancePlugin,appearanceOwner)});
+      window.disableAppearance=()=>flushSync(()=>{appearanceOwner?.dispose();appearanceOwner=undefined});
+      // Install global roles first, as a feature's later style registration must
+      // not silently bypass them. Reinstallation below covers the reverse order.
+      installAppearance();apply(surfacesPlugin,featureOwner);apply(themePlugin,featureOwner,{defaultMode:'light'});apply(searchPlugin,featureOwner);apply(workspaceAppearancePlugin,workspaceOwner);
+      const menuRoot={current:document.getElementById('menu-host')};
+      const closeMenu=()=>overlays.close('menu');
+      function Menu(){const active=useSyncExternalStore(overlays.subscribe,overlays.snapshot);return active==='menu'?<WorkspaceTabActionMenu
+        view={{id:'tab-0',name:'Conversation 00',workspace:'/repo',root:{type:'pane',id:'pane-0',workspace:'/repo'}}}
+        x={36} y={76} trigger={document.getElementById('menu-trigger')} rootRef={menuRoot} close={closeMenu}
+        actions={[{id:'rename',label:'Rename tab',available:()=>true,run:()=>{}},{id:'close',label:'Close tab',available:()=>true,run:()=>{}}]}/>:null}
+      function Draft(){const [draft,setDraft]=useState('Keep this conversation draft.');return <Composer value={draft} onChange={setDraft} images={[]} attachments={[]} skills={[]} models={[]}
+        permissionMode="full" workspaceLabel="/repo" workspaceOptions={[]} capabilities={[]} placeholder="Message" focusHeight={156} maxHeight={180} autoFocus={false}
+        disabled={false} readOnly={false} sending={false} activeTurn={false} onImagesChange={()=>{}} onAttachmentsChange={()=>{}} onAttachFile={async()=>{}}
+        onModelChange={()=>{}} onEffortChange={()=>{}} onPermissionModeChange={()=>{}} onWorkspaceChange={()=>{}} onSubmit={()=>{}} onInterrupt={()=>{}}/>}
+      function Creator(){const active=useSyncExternalStore(overlays.subscribe,overlays.snapshot);return active==='creator'?<NewWorkspaceDialog disabled={false} onClose={()=>overlays.close('creator')} onCreate={async()=>{}}/>:null}
+      function App(){useSyncExternalStore(ui.subscribe,ui.snapshot);const Settings=surfaces.get('default-settings'),Search=roots.get('default-search');return <><div data-shell-node="workspace" className="fixture-workspace"><main className="workspace-layout-root">
+        <div className="fixture-content"><button id="menu-trigger" className={uiStyles.button} onClick={()=>overlays.open('menu')}>Tab options</button></div><Draft/>
+        </main></div><Settings surface={{id:'settings',kind:'settings'}}/><Search/><Menu/><Creator/></>}
+      const root=createRoot(document.getElementById('root'));
+      flushSync(()=>root.render(<App/>));
+      window.frame=()=>new Promise(resolve=>requestAnimationFrame(()=>requestAnimationFrame(resolve)));
+      window.openSettings=()=>flushSync(()=>overlays.open('settings'));
+      window.openCreator=()=>flushSync(()=>overlays.open('creator'));
+      window.setWorkspaceInset=value=>{document.querySelector('.fixture-workspace').style.paddingLeft=value+'px'};
+      window.cmdK=()=>flushSync(()=>window.dispatchEvent(new KeyboardEvent('keydown',{key:'k',metaKey:true,bubbles:true,cancelable:true})));
+      window.key=(selector,key)=>flushSync(()=>document.querySelector(selector).dispatchEvent(new KeyboardEvent('keydown',{key,bubbles:true,cancelable:true})));
+      window.click=selector=>flushSync(()=>document.querySelector(selector).click());
+      window.input=(selector,value)=>flushSync(()=>{const element=document.querySelector(selector);Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,'value').set.call(element,value);element.dispatchEvent(new Event('input',{bubbles:true}))});
+      window.nav=label=>flushSync(()=>[...document.querySelectorAll('.program-modal-nav-item')].find(element=>element.textContent===label).click());
+      window.setTheme=(mode,accent)=>{document.documentElement.dataset.altoTheme=mode;document.documentElement.style.setProperty('--alto-theme-accent',accent)};
+      window.disableWorkspaceAppearance=()=>flushSync(()=>workspaceOwner.dispose());
+      window.styleIds=()=>[...styles.keys()];
+      window.searchState=()=>({query:document.querySelector('.search-palette input')?.value,selected:[...document.querySelectorAll('.search-result')].findIndex(element=>element.getAttribute('aria-selected')==='true'),overlay,selectedThreads});
+      window.remember=(selector,name)=>{const element=document.querySelector(selector);element.focus();element.setSelectionRange?.(3,8);window[name]={element,value:element.value,text:element.textContent,start:element.selectionStart,end:element.selectionEnd};return true};
+      window.preserved=(selector,name)=>{const saved=window[name],element=document.querySelector(selector);return saved.element===element&&element.isConnected&&element.value===saved.value&&element.textContent===saved.text&&element.selectionStart===saved.start&&element.selectionEnd===saved.end};
+      window.samples=selectors=>{
+        const canvas=document.createElement('canvas'),context=canvas.getContext('2d');canvas.width=canvas.height=1;
+        const rgba=color=>{context.clearRect(0,0,1,1);context.fillStyle=color;context.fillRect(0,0,1,1);const value=[...context.getImageData(0,0,1,1).data];value[3]/=255;return value};
+        const over=(a,b)=>a.slice(0,3).map((value,index)=>value*a[3]+b[index]*(1-a[3])).concat(1);
+        const luminance=color=>color.slice(0,3).map(value=>{value/=255;return value<=.04045?value/12.92:((value+.055)/1.055)**2.4}).reduce((sum,value,index)=>sum+value*[.2126,.7152,.0722][index],0);
+        const contrast=(a,b)=>{const x=luminance(a),y=luminance(b);return(Math.max(x,y)+.05)/(Math.min(x,y)+.05)};
+        return Object.fromEntries(selectors.map(selector=>{const element=document.querySelector(selector);if(!element)throw Error('Missing '+selector);const style=getComputedStyle(element),chain=[];
+          for(let node=element;node;node=node.parentElement)chain.unshift(getComputedStyle(node));
+          const background=chain.reduce((result,current)=>over(rgba(current.backgroundColor),result),[255,255,255,1]);
+          const foreground=rgba(style.color);foreground[3]*=chain.reduce((result,current)=>result*Number(current.opacity),1);
+          const outside=(parseFloat(style.outlineOffset)>=0?chain.slice(0,-1):chain).reduce((result,current)=>over(rgba(current.backgroundColor),result),[255,255,255,1]);
+          const box=element.getBoundingClientRect();return[selector,{color:rgba(style.color),fill:rgba(style.backgroundColor),border:rgba(style.borderTopColor),outline:rgba(style.outlineColor),
+            radius:style.borderTopLeftRadius,shadow:style.boxShadow,font:style.fontFamily,size:style.fontSize,weight:style.fontWeight,opacity:style.opacity,
+            contrast:contrast(over(foreground,background),background),borderWidth:parseFloat(style.borderTopWidth),borderContrast:contrast(over(rgba(style.borderTopColor),outside),outside),outlineWidth:parseFloat(style.outlineWidth),outlineStyle:style.outlineStyle,outlineContrast:contrast(over(rgba(style.outlineColor),outside),outside),
+            x:box.x,right:box.right,width:box.width,backgroundImage:style.backgroundImage}]}));
+      };
+      window.bounds=selector=>{const box=document.querySelector(selector).getBoundingClientRect(),workspace=document.querySelector('.fixture-workspace>main').getBoundingClientRect();return{left:box.left,right:box.right,top:box.top,bottom:box.bottom,width:innerWidth,height:innerHeight,scroll:document.documentElement.scrollWidth,workspaceLeft:workspace.left,workspaceRight:workspace.right,workspaceWidth:workspace.width}};
+      window.geometry=selector=>{const element=document.querySelector(selector),style=getComputedStyle(element);return{padding:[style.paddingTop,style.paddingRight,style.paddingBottom,style.paddingLeft],gap:style.columnGap,minHeight:style.minHeight,height:element.getBoundingClientRect().height,direction:style.flexDirection}};
+      window.settingsRowBounds=()=>[...document.querySelectorAll('.settings-row')].map(row=>{const copy=row.querySelector('.settings-row-copy'),control=row.querySelector('.settings-row-control'),style=getComputedStyle(row);return{label:copy.querySelector('strong').textContent,row:row.getBoundingClientRect().toJSON(),inset:[parseFloat(style.paddingLeft),parseFloat(style.paddingRight)],copy:copy.getBoundingClientRect().toJSON(),control:control.getBoundingClientRect().toJSON(),fields:[...control.querySelectorAll('select,textarea,input:not([type=color]),.theme-mode-picker,.theme-palette-control,.theme-accent-control,.theme-accent-presets,.theme-color-picker')].map(field=>({name:field.className||field.tagName,box:field.getBoundingClientRect().toJSON()})),direction:style.flexDirection,interactive:row.classList.contains('is-interactive'),copyWidth:copy.clientWidth,copyScroll:copy.scrollWidth}});
+      window.reach=(selector,scroll=true)=>{const element=document.querySelector(selector);if(scroll){element.scrollIntoView({block:'end',inline:'nearest'});for(let parent=element.parentElement;parent;parent=parent.parentElement)if(/auto|scroll/.test(getComputedStyle(parent).overflowY))parent.scrollTop=parent.scrollHeight;}const box=element.getBoundingClientRect(),clips=[];
+        for(let parent=element.parentElement;parent;parent=parent.parentElement){const style=getComputedStyle(parent);if(/auto|scroll|hidden|clip/.test(style.overflowY)){const clip=parent.getBoundingClientRect();clips.push({top:clip.top,bottom:clip.bottom,scroll:parent.scrollTop,max:parent.scrollHeight-parent.clientHeight})}}
+        return{top:box.top,bottom:box.bottom,height:innerHeight,clips};};
+      window.searchClearance=()=>{const panel=document.querySelector('.search-palette').getBoundingClientRect(),field=document.querySelector('.search-palette-input').getBoundingClientRect();return{left:field.left-panel.left,right:panel.right-field.right,top:field.top-panel.top}};
+      window.settingsCopyBounds=()=>[...document.querySelectorAll('.theme-settings-card .settings-row')].map(row=>{const copy=row.querySelector('.settings-row-copy');return{label:copy.querySelector('strong').textContent,width:copy.clientWidth,scroll:copy.scrollWidth}});
+      window.teardown=()=>{flushSync(()=>root.unmount());disableAppearance();workspaceOwner.dispose();featureOwner.dispose()};
+    ` },
+    bundle: true, write: false, platform: 'browser', format: 'iife', jsx: 'automatic',
+    loader: { '.css': 'text' }, define: { 'process.env.NODE_ENV': '"production"' },
+  })
+  const css = (await Promise.all(['src/client/styles.css', 'src/client/pane-toolbar.css', 'program/plugins/workspace-layout.css'].map(file => fs.readFile(file, 'utf8')))).join('\n').replace(/@import[^;]+;/g, '')
+  const server = http.createServer((_request, response) => response.end('<!doctype html><style>' + css + '\n#root{height:100vh}.fixture-workspace{display:flex;flex:1;width:100%;height:100%;min-width:0}.fixture-workspace>main{display:flex;flex-direction:column;width:100%;padding:20px;gap:20px}.fixture-content{flex:1;min-height:0}#menu-host{position:fixed;inset:0;pointer-events:none}#menu-host>*{pointer-events:auto}</style><div id="root" class="shell-kernel"></div><div id="menu-host"></div>'))
+  await new Promise(resolve => server.listen(0, '127.0.0.1', resolve))
+  const win = new BrowserWindow({ show: false, width: 1100, height: 800, webPreferences: { offscreen: true, sandbox: true, contextIsolation: true, backgroundThrottling: false } })
+  const run = code => win.webContents.executeJavaScript(code)
+  const settle = () => run('frame()')
+  const sample = selectors => run(`samples(${JSON.stringify(selectors)})`)
+  let documentNode
+  const force = async (selector, states) => {
+    if (!documentNode) documentNode = (await win.webContents.debugger.sendCommand('DOM.getDocument')).root.nodeId
+    const { nodeId } = await win.webContents.debugger.sendCommand('DOM.querySelector', { nodeId: documentNode, selector })
+    assert.ok(nodeId, 'Missing control: ' + selector)
+    await win.webContents.debugger.sendCommand('CSS.forcePseudoState', { nodeId, forcedPseudoClasses: states })
+  }
+  const sentinel = {
+    '--ui-surface': '#eef2f6', '--ui-surface-inset': '#dde7ec', '--ui-border': '#203f59',
+    '--ui-text': '#203040', '--ui-text-strong': '#102030', '--ui-text-secondary': '#405060',
+    '--ui-control-fill': '#e1e8f1',
+    '--ui-hover': '#d1dbe8', '--ui-pressed': '#c4d2e4', '--ui-selected': '#bdcde2',
+    '--ui-field-fill': '#e6ebf2', '--ui-field-border': '#4f6580', '--ui-focus': '#8a276c',
+    '--ui-action': '#364e78', '--ui-on-action': '#ffffff', '--ui-action-hover': '#2b4167', '--ui-action-pressed': '#1e304d',
+    '--ui-panel-radius': '17px', '--ui-dialog-radius': '23px', '--ui-row-radius': '7px', '--ui-field-radius': '11px',
+    '--ui-control-radius': '19px', '--ui-font': 'monospace', '--ui-size': '14px', '--ui-weight': '600',
+    '--ui-panel-shadow': 'rgb(10, 20, 30) 0px 4px 9px 0px', '--ui-dialog-shadow': 'rgb(30, 20, 10) 0px 7px 11px 0px',
+  }
+  const setSentinels = enabled => run(`for(const [token,value] of Object.entries(${JSON.stringify(sentinel)})){${enabled ? 'document.documentElement.style.setProperty(token,value)' : 'document.documentElement.style.removeProperty(token)'}}`)
+  const geometrySentinel = {
+    '--ui-panel-inset': '16px', '--ui-dialog-inset': '28px', '--ui-row-min-height': '38px',
+    '--ui-row-block-padding': '9px', '--ui-row-inline-padding': '20px', '--ui-row-gap': '11px',
+    '--ui-choice-row-min-height': '60px', '--ui-field-min-height': '40px', '--ui-field-inline-padding': '18px',
+    '--ui-control-gap': '10px', '--ui-control-inline-padding': '22px', '--ui-icon-slot': '26px',
+  }
+  const setGeometrySentinels = enabled => run(`for(const [token,value] of Object.entries(${JSON.stringify(geometrySentinel)})){${enabled ? 'document.documentElement.style.setProperty(token,value)' : 'document.documentElement.style.removeProperty(token)'}}`)
+  const assertGeometry = async (selector, expected) => {
+    const actual = await run(`geometry(${JSON.stringify(selector)})`)
+    for (const [property, value] of Object.entries(expected)) assert.deepEqual(actual[property], value, `${selector} ${property} follows shared geometry`)
+  }
+  const settleGeometry = async () => {
+    await settle()
+    await run('Promise.all(document.getAnimations().filter(animation=>Number.isFinite(animation.effect?.getComputedTiming().iterations)).map(animation=>animation.finished.catch(()=>{})))')
+    await settle()
+  }
+  const expectedColor = token => sentinel[token].slice(1).match(/../g).map(value => parseInt(value, 16)).concat(1)
+  const assertRole = async (selector, property, token) => {
+    const measured = (await sample([selector]))[selector][property]
+    assert.deepEqual(measured, token.startsWith('--ui-') && sentinel[token].startsWith('#') ? expectedColor(token) : sentinel[token], `${selector} ${property} consumes ${token}`)
+  }
+  const assertPortal = selector => run(`!document.querySelector(${JSON.stringify(selector)}).closest('.workspace-layout-root')`)
+  const assertFits = async selector => {
+    const bounds = await run(`bounds(${JSON.stringify(selector)})`)
+    assert.ok(bounds.left >= 0 && bounds.right <= bounds.width && bounds.scroll <= bounds.width, selector + ': ' + JSON.stringify(bounds))
+  }
+  const assertDialogFits = async selector => {
+    const bounds = await run(`bounds(${JSON.stringify(selector)})`)
+    assert.ok(bounds.left >= bounds.workspaceLeft - 1 && bounds.right <= bounds.workspaceRight + 1 && bounds.top >= -1 && bounds.bottom <= bounds.height + 1 && bounds.scroll <= bounds.width + 1,
+      selector + ' stays inside the available workspace and viewport: ' + JSON.stringify(bounds))
+  }
+  const assertFieldsFit = async (panelSelector, fieldSelector) => {
+    const fields = await run(`(()=>{const panel=document.querySelector(${JSON.stringify(panelSelector)}).getBoundingClientRect();return[...document.querySelectorAll(${JSON.stringify(fieldSelector)})].map(field=>({field:field.getBoundingClientRect().toJSON(),panel:panel.toJSON()}))})()`)
+    assert.ok(fields.length, fieldSelector + ' renders actual fields')
+    for (const { field, panel } of fields) assert.ok(field.width > 0 && field.left >= panel.left && field.right <= panel.right + 1, fieldSelector + ' fits its enclosing dialog: ' + JSON.stringify({ field, panel }))
+  }
+  const assertSettingsClearance = async stacked => {
+    const container = await run(`(()=>{const element=document.querySelector('.program-modal-content'),style=getComputedStyle(element);return{name:style.containerName,type:style.containerType,width:element.clientWidth-parseFloat(style.paddingLeft)-parseFloat(style.paddingRight)}})()`)
+    for (const row of await run('settingsRowBounds()')) {
+      assert.ok(row.copyScroll <= row.copyWidth + 1, 'Settings supporting copy fits: ' + JSON.stringify(row))
+      assert.ok(row.copy.right <= row.control.left + 1 || row.copy.bottom <= row.control.top + 1, 'Settings copy and control do not overlap: ' + JSON.stringify(row))
+      assert.ok(row.control.left >= row.row.left + row.inset[0] - 1 && row.control.right <= row.row.right - row.inset[1] + 1, 'Settings control stays inside the row insets: ' + JSON.stringify(row))
+      for (const field of row.fields) assert.ok(field.box.left >= row.control.left - 1 && field.box.right <= row.control.right + 1, 'Settings palette/field stays inside its control: ' + JSON.stringify({ label: row.label, control: row.control, field }))
+      if (stacked && !row.interactive) assert.equal(row.direction, 'column', row.label + ' stacks at the actual content width: ' + JSON.stringify(container))
+    }
+  }
+  const assertReachable = async selector => {
+    await run(`reach(${JSON.stringify(selector)})`)
+    await settle()
+    const reached = await run(`reach(${JSON.stringify(selector)},false)`)
+    assert.ok(reached.top >= -1 && reached.bottom <= reached.height + 1 && reached.clips.every(clip => reached.top >= clip.top - 1 && reached.bottom <= clip.bottom + 1),
+      selector + ' is reachable by scrolling: ' + JSON.stringify(reached))
+    return reached
+  }
+  const artifact = async name => {
+    if (!process.env.ALTO_INTERFACE_APPEARANCE_ARTIFACT_DIR) return
+    await fs.mkdir(process.env.ALTO_INTERFACE_APPEARANCE_ARTIFACT_DIR, { recursive: true })
+    await fs.writeFile(path.join(process.env.ALTO_INTERFACE_APPEARANCE_ARTIFACT_DIR, name + '.png'), (await win.webContents.capturePage()).toPNG())
+  }
+  const contrast = async (selectors, minimum, context) => {
+    await run('Promise.all(document.getAnimations().filter(animation=>Number.isFinite(animation.effect?.getComputedTiming().iterations)).map(animation=>animation.finished.catch(()=>{})))')
+    for (const [selector, measured] of Object.entries(await sample(selectors))) {
+      assert.equal(measured.backgroundImage, 'none', context + ': flat roles make the contrast sample complete')
+      assert.ok(measured.contrast >= minimum, JSON.stringify({ context, selector, minimum, ...measured }))
+    }
+  }
+  try {
+    await win.loadURL(`http://127.0.0.1:${server.address().port}`)
+    await run(bundle.outputFiles[0].text)
+    await settle()
+    win.webContents.debugger.attach('1.3')
+    await win.webContents.debugger.sendCommand('DOM.enable')
+    await win.webContents.debugger.sendCommand('CSS.enable')
+    await win.webContents.debugger.sendCommand('Emulation.setFocusEmulationEnabled', { enabled: true })
+    await run(`remember('[data-cordis-composer-editor]','originalEditor')`)
+    await setSentinels(true)
+    for (const [property, token] of [['color', '--ui-text'], ['fill', '--ui-control-fill'], ['radius', '--ui-control-radius'], ['font', '--ui-font'], ['size', '--ui-size'], ['weight', '--ui-weight']]) await assertRole('#menu-trigger', property, token)
+    for (const [states, token] of [[['hover'], '--ui-hover'], [['hover', 'active'], '--ui-pressed']]) {
+      await force('#menu-trigger', states)
+      await assertRole('#menu-trigger', 'fill', token)
+    }
+    await force('#menu-trigger', ['focus', 'focus-visible'])
+    await assertRole('#menu-trigger', 'outline', '--ui-focus')
+    await force('#menu-trigger', [])
+
+    await run('cmdK()')
+    await settle()
+    assert.ok(await assertPortal('.search-palette'), 'Cmd+K is a real portal outside workspace appearance scope')
+    for (const [property, token] of [['fill', '--ui-surface'], ['border', '--ui-border'], ['radius', '--ui-dialog-radius'], ['shadow', '--ui-dialog-shadow'], ['font', '--ui-font']]) await assertRole('.search-palette', property, token)
+    for (const [property, token] of [['fill', '--ui-field-fill'], ['border', '--ui-field-border'], ['radius', '--ui-field-radius']]) await assertRole('.search-palette-input', property, token)
+    await assertRole('.search-palette input', 'color', '--ui-text')
+    await assertRole('.search-result strong', 'color', '--ui-text-strong')
+    await assertRole('.search-result strong', 'size', '--ui-size')
+    await assertRole('.search-result strong', 'weight', '--ui-weight')
+    await assertRole('.search-result-copy>span', 'color', '--ui-text-secondary')
+    await assertRole('.search-result.active', 'fill', '--ui-selected')
+    for (const [states, token] of [[['hover'], '--ui-hover'], [['hover', 'active'], '--ui-pressed']]) {
+      await force('.search-result:nth-child(2)', states)
+      await assertRole('.search-result:nth-child(2)', 'fill', token)
+    }
+    await force('.search-result:nth-child(2)', [])
+    assert.equal(await run(`document.activeElement===document.querySelector('.search-palette input')`), true, 'Cmd+K focuses its input for immediate typing')
+    assert.equal((await sample(['.search-palette-input']))['.search-palette-input'].outlineStyle, 'none', 'The focused Search input keeps its neutral field border')
+    await run(`input('.search-palette input','Conversation');key('.search-palette input','ArrowDown');remember('.search-palette input','originalSearch')`)
+    const searchBefore = await run('searchState()')
+    await run('disableWorkspaceAppearance()')
+    await assertRole('.search-palette', 'fill', '--ui-surface')
+    for (let cycle = 0; cycle < 2; cycle++) {
+      await run('disableAppearance()')
+      assert.equal((await run('styleIds()')).filter(id => id.startsWith('interface-')).length, 0, 'Disposal removes only the owner styles')
+      assert.ok(await run(`preserved('.search-palette input','originalSearch') && preserved('[data-cordis-composer-editor]','originalEditor')`), 'Disposal preserves query, caret, and Composer draft nodes')
+      await run('installAppearance()')
+      await assertRole('.search-palette', 'fill', '--ui-surface')
+      assert.ok(await run(`preserved('.search-palette input','originalSearch') && preserved('[data-cordis-composer-editor]','originalEditor')`), 'Reapplication preserves query, caret, and Composer draft nodes')
+      assert.deepEqual(await run('searchState()'), searchBefore, 'Reapplication does not reset keyboard selection')
+    }
+    for (let i = 0; i < 14; i++) await run(`key('.search-palette input','ArrowDown')`)
+    assert.ok(await run(`(()=>{const list=document.querySelector('.search-results'),row=list.querySelector('[aria-selected="true"]'),a=list.getBoundingClientRect(),b=row.getBoundingClientRect();return list.scrollTop>0&&b.top>=a.top&&b.bottom<=a.bottom})()`), 'Keyboard navigation scrolls the selected result into view')
+    await run(`key('.search-palette input','Escape')`)
+    assert.equal(await run('searchState().overlay'), undefined)
+
+    await run('openSettings()')
+    await settle()
+    assert.ok(await assertPortal('.program-modal'), 'Settings is a real portal outside workspace appearance scope')
+    for (const [property, token] of [['fill', '--ui-surface'], ['border', '--ui-border'], ['radius', '--ui-dialog-radius'], ['shadow', '--ui-dialog-shadow'], ['font', '--ui-font']]) await assertRole('.program-modal', property, token)
+    await assertRole('.program-modal-sidebar', 'fill', '--ui-surface-inset')
+    await assertRole('.program-modal-search', 'fill', '--ui-field-fill')
+    await assertRole('.program-modal-search input', 'color', '--ui-text')
+    await assertRole('.program-modal-nav-item.active', 'fill', '--ui-selected')
+    await assertRole('.settings-row-copy strong', 'color', '--ui-text-strong')
+    await assertRole('.settings-row-copy small', 'color', '--ui-text-secondary')
+    await force('.settings-row.is-interactive:first-child', ['hover'])
+    await assertRole('.settings-row.is-interactive:first-child', 'fill', '--ui-hover')
+    await force('.settings-row.is-interactive:first-child', ['hover', 'active'])
+    await assertRole('.settings-row.is-interactive:first-child', 'fill', '--ui-pressed')
+    await force('.settings-row.is-interactive:first-child', [])
+    await run(`click('.settings-row[role="radio"]')`)
+    assert.equal(await run(`document.querySelector('.settings-row[role="radio"]').getAttribute('aria-checked')`), 'true', 'Permission rows remain interactive')
+    await assertRole('.settings-row[role="radio"]', 'fill', '--ui-selected')
+    await force('.settings-row[role="radio"]', ['hover'])
+    await assertRole('.settings-row[role="radio"]', 'fill', '--ui-selected')
+    await force('.settings-row[role="radio"]', ['hover', 'active'])
+    await assertRole('.settings-row[role="radio"]', 'fill', '--ui-pressed')
+    await force('.settings-row[role="radio"]', [])
+    await run(`input('.program-modal-search input','workspaces');remember('.program-modal-search input','originalSettings');disableAppearance();installAppearance()`)
+    assert.ok(await run(`preserved('.program-modal-search input','originalSettings')`), 'Open Settings retains query, caret, and node across appearance replacement')
+    await run(`input('.program-modal-search input','');nav('Workspaces');click('button[aria-label="Add workspace"]')`)
+    await assertRole('.project-settings-form input', 'fill', '--ui-field-fill')
+    await assertRole('.project-settings-form input', 'border', '--ui-focus')
+    await run('document.activeElement.blur()')
+    await assertRole('.project-settings-form input', 'border', '--ui-field-border')
+    await assertRole('.project-settings-save', 'color', '--ui-on-action')
+    for (const [states, token] of [[[], '--ui-action'], [['hover'], '--ui-action-hover'], [['hover', 'active'], '--ui-action-pressed']]) {
+      await force('.project-settings-save', states)
+      await assertRole('.project-settings-save', 'fill', token)
+    }
+    await force('.project-settings-save', [])
+    await run(`input('.project-settings-form input','/keep/my/new-workspace');remember('.project-settings-form input','originalProject');disableAppearance();installAppearance()`)
+    assert.ok(await run(`preserved('.project-settings-form input','originalProject')`), 'An unsaved workspace draft survives appearance replacement')
+
+    await setSentinels(false)
+    for (const mode of ['light', 'dark']) {
+      for (const accent of ['#7c3aed', '#16a34a', '#fff8d6']) {
+        await run(`setTheme(${JSON.stringify(mode)},${JSON.stringify(accent)})`)
+        for (const state of [[], ['hover'], ['hover', 'active']]) {
+          await force('.project-settings-save', state)
+          await contrast(['.project-settings-save', '.project-settings-form input', '.program-modal-nav-item.active'], 4.5, mode + ' Settings ' + accent + ' ' + state.join('/'))
+        }
+        await force('.project-settings-save', [])
+        for (const selector of ['.project-settings-save', '.project-settings-form input', '.program-modal-nav-item.active']) {
+          await force(selector, ['focus', 'focus-visible'])
+          await run(`document.querySelector(${JSON.stringify(selector)}).focus({preventScroll:true})`)
+          const measured = (await sample([selector]))[selector]
+          if(selector==='.project-settings-form input'){
+            assert.ok(measured.borderWidth===1 && measured.borderContrast>=3 && measured.outlineStyle==='none' && measured.shadow==='none', JSON.stringify({ mode, accent, selector, ...measured }))
+          }else{
+            assert.ok(measured.outlineStyle !== 'none' && measured.outlineWidth >= 2 && measured.outlineContrast >= 3, JSON.stringify({ mode, accent, selector, ...measured }))
+          }
+          await run('document.activeElement.blur()')
+          await force(selector, [])
+        }
+      }
+      await run(`nav('Appearance')`)
+      await contrast(['.settings-row-copy strong', '.settings-row-copy small', 'select[aria-label="Chrome palette"]', '.theme-mode-picker button.active'], 4.5, mode + ' real Appearance settings')
+      for (const width of [1100, 390]) {
+        win.setContentSize(width, 800)
+        await settle()
+        await assertFits('.program-modal')
+        await assertSettingsClearance(width <= 480)
+        if (width <= 480) {
+          for (const copy of await run('settingsCopyBounds()')) assert.ok(copy.scroll <= copy.width + 1, mode + ': supporting Settings copy stays clear of its control ' + JSON.stringify(copy))
+        }
+        if (process.env.ALTO_INTERFACE_APPEARANCE_ARTIFACT_DIR) {
+          await fs.mkdir(process.env.ALTO_INTERFACE_APPEARANCE_ARTIFACT_DIR, { recursive: true })
+          await fs.writeFile(path.join(process.env.ALTO_INTERFACE_APPEARANCE_ARTIFACT_DIR, `settings-${mode}-${width}.png`), (await win.webContents.capturePage()).toPNG())
+        }
+      }
+      win.setContentSize(1100, 800)
+      await run(`nav('Workspaces');click('button[aria-label="Add workspace"]')`)
+    }
+    await run(`key('.program-modal-search input','Escape')`)
+    assert.equal(await run('searchState().overlay'), undefined, 'Settings Escape remains functional')
+
+    await setSentinels(true)
+    await run(`click('#menu-trigger')`)
+    await settle()
+    assert.ok(await assertPortal('.workspace-tab-action-menu'), 'The common menu is also outside workspace appearance scope')
+    for (const [property, token] of [['fill', '--ui-surface'], ['border', '--ui-border'], ['radius', '--ui-panel-radius'], ['shadow', '--ui-panel-shadow']]) await assertRole('.workspace-tab-action-menu', property, token)
+    await assertRole('.workspace-tab-action-menu button', 'color', '--ui-text')
+    await assertRole('.workspace-tab-action-menu button', 'radius', '--ui-row-radius')
+    for (const [states, token] of [[['hover'], '--ui-hover'], [['hover', 'active'], '--ui-pressed']]) {
+      await force('.workspace-tab-action-menu button', states)
+      await assertRole('.workspace-tab-action-menu button', 'fill', token)
+    }
+    await force('.workspace-tab-action-menu button', [])
+    await run(`key('.workspace-tab-action-menu button','ArrowDown')`)
+    assert.equal(await run('document.activeElement.textContent'), 'Close tab', 'Common menu keyboard navigation remains functional')
+    await run(`key('.workspace-tab-action-menu button','Escape')`)
+    assert.equal(await run('document.activeElement.id'), 'menu-trigger', 'Common menu Escape returns focus to its trigger')
+    await setSentinels(false)
+
+    for (const mode of ['light', 'dark']) {
+      await run(`setTheme(${JSON.stringify(mode)},'#fff8d6');cmdK()`)
+      await settle()
+      for (const states of [[], ['hover'], ['hover', 'active']]) {
+        await force('.search-result.active', states)
+        await contrast(['.search-result strong', '.search-result-copy>span', '.search-palette input'], 4.5, mode + ' search with pale accent ' + states.join('/'))
+        await contrast(['.search-result-check'], 3, mode + ' current conversation indicator with pale accent ' + states.join('/'))
+      }
+      await force('.search-result.active', [])
+      await force('.search-result.active', ['focus', 'focus-visible'])
+      await run(`document.querySelector('.search-result.active').focus({preventScroll:true})`)
+      const row = (await sample(['.search-result.active']))['.search-result.active']
+      assert.ok(row.outlineStyle !== 'none' && row.outlineWidth >= 2 && row.outlineContrast >= 3, JSON.stringify({ mode, row }))
+      await force('.search-result.active', [])
+      await run(`document.querySelector('.search-palette input').focus({preventScroll:true})`)
+      assert.equal((await sample(['.search-palette-input']))['.search-palette-input'].outlineStyle, 'none', 'Search does not draw an accent outline around the typing field')
+      for (const width of [1100, 390]) {
+        win.setContentSize(width, 800)
+        await settle()
+        await assertFits('.search-palette')
+        const clearance = await run('searchClearance()')
+        assert.ok(Object.values(clearance).every(value => value >= 4), mode + ': Search field stays clear of the dialog clip ' + JSON.stringify(clearance))
+        if (process.env.ALTO_INTERFACE_APPEARANCE_ARTIFACT_DIR) {
+          await fs.writeFile(path.join(process.env.ALTO_INTERFACE_APPEARANCE_ARTIFACT_DIR, `search-${mode}-${width}.png`), (await win.webContents.capturePage()).toPNG())
+        }
+      }
+      await run(`key('.search-palette input','Escape')`)
+    }
+
+    // Distinct sentinels expose feature overrides that would otherwise look
+    // correct only while the shared defaults happen to have the same values.
+    win.setContentSize(1100, 800)
+    await setGeometrySentinels(true)
+    await assertGeometry('#menu-trigger', { gap: '10px', padding: ['9px', '22px', '9px', '22px'] })
+    await run(`click('#menu-trigger')`)
+    await settleGeometry()
+    await assertGeometry('.workspace-tab-action-menu', { padding: ['16px', '16px', '16px', '16px'] })
+    await assertGeometry('.workspace-tab-action-menu button', { minHeight: '38px', gap: '11px', padding: ['9px', '20px', '9px', '20px'] })
+    await run('disableAppearance();installAppearance()')
+    await assertGeometry('.workspace-tab-action-menu button', { minHeight: '38px', padding: ['9px', '20px', '9px', '20px'] })
+    await run(`key('.workspace-tab-action-menu button','Escape');openSettings()`)
+    await settleGeometry()
+    await assertGeometry('.program-modal-backdrop', { padding: ['28px', '28px', '28px', '28px'] })
+    await assertGeometry('.program-modal-content', { padding: ['28px', '28px', '28px', '28px'] })
+    await assertGeometry('.settings-row', { minHeight: '60px', padding: ['11px', '20px', '11px', '20px'] })
+    await run(`nav('Workspaces');click('button[aria-label="Add workspace"]')`)
+    await settleGeometry()
+    await assertGeometry('.project-settings-form', { padding: ['16px', '16px', '16px', '16px'], gap: '16px' })
+    await assertGeometry('.project-settings-form input', { minHeight: '40px', height: 40, padding: ['9px', '18px', '9px', '18px'] })
+    await run(`key('.program-modal-search input','Escape');cmdK()`)
+    await settleGeometry()
+    await assertGeometry('.search-results', { padding: ['16px', '16px', '16px', '16px'] })
+    await assertGeometry('.search-result', { minHeight: '60px', gap: '11px', padding: ['9px', '20px', '9px', '20px'] })
+    await setGeometrySentinels(false)
+    await assertGeometry('.search-result', { minHeight: '52px' })
+    assert.equal((await sample(['.search-palette-input']))['.search-palette-input'].outlineStyle, 'none', 'Geometry reapplication does not add a purple Cmd+K field outline')
+    await run(`key('.search-palette input','Escape')`)
+
+    // Simulate a sidebar/split pane while retaining the wide browser viewport.
+    await run(`setWorkspaceInset(440);openSettings();nav('Appearance')`)
+    await settleGeometry()
+    assert.equal((await run(`bounds('.program-modal')`)).workspaceWidth, 660)
+    await assertDialogFits('.program-modal')
+    await assertFieldsFit('.program-modal', '.program-modal-search,.settings-row select,.theme-mode-picker')
+    await assertSettingsClearance(true)
+    await artifact('settings-constrained-660')
+    await run(`nav('Workspaces');click('button[aria-label="Add workspace"]')`)
+    await settleGeometry()
+    await assertFieldsFit('.program-modal', '.project-settings-form input,.project-settings-form textarea')
+    await assertReachable('.project-settings-save')
+    await run(`key('.program-modal-search input','Escape');cmdK()`)
+    await settleGeometry()
+    await assertDialogFits('.search-palette')
+    await assertFieldsFit('.search-palette', '.search-palette-input')
+    await assertReachable('.search-result:last-child')
+    await artifact('search-constrained-660')
+    await run(`key('.search-palette input','Escape');setWorkspaceInset(0)`)
+
+    for (const [width, height] of [[900, 480], [390, 480]]) {
+      win.setContentSize(width, height)
+      await run(`openSettings();nav('Appearance')`)
+      await settleGeometry()
+      await assertDialogFits('.program-modal')
+      await assertFieldsFit('.program-modal', '.program-modal-search,.settings-row select,.theme-mode-picker')
+      await assertSettingsClearance(width < 480)
+      await assertReachable('.theme-settings-card .settings-row:last-child')
+      await artifact(`settings-short-${width}x${height}`)
+      await run(`nav('Workspaces');click('button[aria-label="Add workspace"]')`)
+      await settleGeometry()
+      await assertFieldsFit('.program-modal', '.project-settings-form input,.project-settings-form textarea')
+      const save = await assertReachable('.project-settings-save')
+      assert.ok(save.clips.some(clip => clip.max > 0 && clip.scroll > 0), 'The short Settings form can scroll to its Save action')
+      await run(`key('.program-modal-search input','Escape');cmdK()`)
+      await settleGeometry()
+      await assertDialogFits('.search-palette')
+      await assertReachable('.search-result:last-child')
+      assert.equal((await sample(['.search-palette-input']))['.search-palette-input'].outlineStyle, 'none')
+      await artifact(`search-short-${width}x${height}`)
+      await run(`key('.search-palette input','Escape')`)
+    }
+    for (const [width, height] of [[900, 480], [390, 320]]) {
+      win.setContentSize(width, height)
+      await run('openCreator()')
+      await settleGeometry()
+      await assertDialogFits('.workspace-creator')
+      await assertFieldsFit('.workspace-creator', '.workspace-creator-form input,.workspace-creator-form textarea')
+      const create = await assertReachable('.workspace-creator-form button[type="submit"]')
+      if (height < 400) assert.ok(create.clips.some(clip => clip.max > 0 && clip.scroll > 0), 'The short creator scrolls its form while retaining its header')
+      await artifact(`creator-short-${width}x${height}`)
+      await run(`click('.workspace-creator>header>button')`)
+    }
+    win.setContentSize(1100, 800)
+    await settle()
+    await run(`click('.composer-permission-trigger')`)
+    await settleGeometry()
+    await assertGeometry('.composer-permission-picker', { padding: ['12px', '12px', '12px', '12px'] })
+    const permissionRows = await run(`(()=>{window.originalPermissionPicker=document.querySelector('.composer-permission-picker');return[...originalPermissionPicker.querySelectorAll('button:has(.permission-option-copy small)')].map(row=>({height:getComputedStyle(row).minHeight,columns:getComputedStyle(row).gridTemplateColumns.split(' ')}))})()`)
+    assert.ok(permissionRows.length >= 2, 'The real Composer permission menu contains description choices')
+    for (const row of permissionRows) {
+      assert.equal(row.height, '52px', 'Permission descriptions retain two-line choice density')
+      assert.equal(row.columns[0], '24px', 'Permission icon column shares the icon slot')
+      assert.equal(row.columns.at(-1), '24px', 'Permission check column shares the icon slot')
+    }
+    await run('disableAppearance();installAppearance()')
+    assert.ok(await run(`originalPermissionPicker===document.querySelector('.composer-permission-picker')&&preserved('[data-cordis-composer-editor]','originalEditor')`), 'Geometry replacement preserves the open permission picker and Composer draft nodes')
+    await assertGeometry('.composer-permission-picker>button', { minHeight: '52px', padding: ['6px', '12px', '6px', '12px'] })
+    await run(`key('.composer-permission-trigger','Escape')`)
+    assert.ok(await run(`preserved('[data-cordis-composer-editor]','originalEditor')`), 'Every appearance/state update preserves the original Composer draft node')
+    await run('teardown()')
+    assert.deepEqual(await run('styleIds()'), [], 'All fixture-owned styles clean up')
+    console.log('Interface appearance browser checks passed')
+  } finally {
+    if (win.webContents.debugger.isAttached()) win.webContents.debugger.detach()
+    win.destroy()
+    await new Promise(resolve => server.close(resolve))
+  }
+}
+
+check().then(() => app.quit()).catch(error => { console.error(error); app.exit(1) })
diff --git a/tests/fixtures/markdown-link-preview.cjs b/tests/fixtures/markdown-link-preview.cjs
index 5c73618..a36a8a6 100644
--- a/tests/fixtures/markdown-link-preview.cjs
+++ b/tests/fixtures/markdown-link-preview.cjs
@@ -26,7 +26,7 @@ async function check() {
     define: { 'process.env.NODE_ENV': '"production"' },
   })
   const css = (await Promise.all([
-    'src/client/styles.css', 'program/plugins/ui/default.css', 'program/plugins/markdown.css',
+    'src/client/styles.css', 'program/plugins/ui/appearance-tokens.css', 'program/plugins/ui/controls.css', 'program/plugins/ui/surfaces.css', 'program/plugins/ui/default.css', 'program/plugins/markdown.css',
     'program/plugins/markdown-viewer.css', 'program/plugins/theme.css',
   ].map(file => fs.readFile(file, 'utf8')))).join('\n').replace(/@import[^;]+;/g, '')
   const server = http.createServer((_request, response) => {
diff --git a/tests/fixtures/markdown-selection.cjs b/tests/fixtures/markdown-selection.cjs
index 17021ec..dc3f6fb 100644
--- a/tests/fixtures/markdown-selection.cjs
+++ b/tests/fixtures/markdown-selection.cjs
@@ -71,7 +71,7 @@ async function check() {
     ` },
     bundle: true, write: false, platform: 'browser', format: 'iife', jsx: 'automatic', loader: { '.css': 'text' }, define: { 'process.env.NODE_ENV': '"production"' },
   })
-  const css = (await Promise.all(['src/client/styles.css', 'src/client/pane-toolbar.css', 'program/plugins/ui/default.css', 'program/plugins/theme.css'].map(file => fs.readFile(file, 'utf8')))).join('\n').replace(/@import[^;]+;/g, '')
+  const css = (await Promise.all(['src/client/styles.css', 'program/plugins/ui/appearance-tokens.css', 'program/plugins/ui/controls.css', 'program/plugins/ui/surfaces.css', 'src/client/pane-toolbar.css', 'program/plugins/ui/default.css', 'program/plugins/theme.css'].map(file => fs.readFile(file, 'utf8')))).join('\n').replace(/@import[^;]+;/g, '')
   const server = http.createServer(async (request, response) => {
     if (request.url?.startsWith('/fonts/')) {
       try { response.end(await fs.readFile(path.join('public/fonts', path.basename(decodeURIComponent(request.url))))); return }
diff --git a/tests/fixtures/mermaid-expand.cjs b/tests/fixtures/mermaid-expand.cjs
index 450d8c9..48cfcaa 100644
--- a/tests/fixtures/mermaid-expand.cjs
+++ b/tests/fixtures/mermaid-expand.cjs
@@ -19,7 +19,7 @@ async function check(){
     window.close=()=>document.querySelector('[aria-label="Close expanded diagram"]').click();
     window.teardown=()=>flushSync(()=>root.unmount());render(${JSON.stringify(source)});
   `},bundle:true,write:false,platform:'browser',format:'iife',jsx:'automatic',loader:{'.css':'text'},define:{'process.env.NODE_ENV':'"production"'}})
-  const css=(await Promise.all(['src/client/styles.css','program/plugins/theme.css','program/plugins/ui/default.css'].map(f=>fs.readFile(f,'utf8')))).join('\n').replace(/@import[^;]+;/g,'')
+  const css=(await Promise.all(['src/client/styles.css', 'program/plugins/ui/appearance-tokens.css', 'program/plugins/ui/controls.css', 'program/plugins/ui/surfaces.css','program/plugins/theme.css','program/plugins/ui/default.css'].map(f=>fs.readFile(f,'utf8')))).join('\n').replace(/@import[^;]+;/g,'')
   const win=new BrowserWindow({show:false,width:1100,height:760,webPreferences:{offscreen:true,sandbox:true,contextIsolation:true,backgroundThrottling:false}})
   const run=code=>win.webContents.executeJavaScript(code)
   const frames=()=>run('frame()')
diff --git a/tests/fixtures/orchestrator.cjs b/tests/fixtures/orchestrator.cjs
index 5642270..1a12cd8 100644
--- a/tests/fixtures/orchestrator.cjs
+++ b/tests/fixtures/orchestrator.cjs
@@ -56,7 +56,7 @@ async function check() {
     loader: { '.css': 'text' }, define: { 'process.env.NODE_ENV': '"production"' },
   })
   const css = (await Promise.all([
-    'src/client/pane-toolbar.css', 'src/client/styles.css', 'program/plugins/theme.css', 'program/plugins/ui/default.css', 'program/plugins/orchestrator.css',
+    'src/client/pane-toolbar.css', 'src/client/styles.css', 'program/plugins/ui/appearance-tokens.css', 'program/plugins/ui/controls.css', 'program/plugins/ui/surfaces.css', 'program/plugins/theme.css', 'program/plugins/ui/default.css', 'program/plugins/orchestrator.css',
   ].map(file => fs.readFile(file, 'utf8')))).join('\n').replace(/@import[^;]+;/g, '')
   const server = http.createServer((_request, response) => response.end(`<!doctype html><style>${css}
     body{margin:0}.shell-kernel{display:flex;flex-direction:column;height:100vh}
diff --git a/tests/fixtures/queued-messages.cjs b/tests/fixtures/queued-messages.cjs
index c31d1e4..6cbddb6 100644
--- a/tests/fixtures/queued-messages.cjs
+++ b/tests/fixtures/queued-messages.cjs
@@ -78,7 +78,7 @@ async function check() {
     loader: { '.css': 'text' }, define: { 'process.env.NODE_ENV': '"production"' },
   })
   const css = (await Promise.all([
-    'src/client/styles.css', 'program/plugins/ui/default.css', 'program/plugins/theme.css', 'program/plugins/steer.css',
+    'src/client/styles.css', 'program/plugins/ui/appearance-tokens.css', 'program/plugins/ui/controls.css', 'program/plugins/ui/surfaces.css', 'program/plugins/ui/default.css', 'program/plugins/theme.css', 'program/plugins/steer.css',
   ].map(file => fs.readFile(file, 'utf8')))).join('\n').replace(/@import[^;]+;/g, '')
   const server = http.createServer((_request, response) => {
     response.end('<!doctype html><html data-alto-theme="light"><style>' + css + '</style><body style="margin:0"><main id="root" style="padding:16px;min-width:0"></main></body></html>')
diff --git a/tests/fixtures/request-card-styling.cjs b/tests/fixtures/request-card-styling.cjs
index cf62b43..bbba257 100644
--- a/tests/fixtures/request-card-styling.cjs
+++ b/tests/fixtures/request-card-styling.cjs
@@ -51,7 +51,7 @@ async function check() {
     ` }, bundle: true, write: false, platform: 'browser', format: 'iife', jsx: 'automatic',
     loader: { '.css': 'text' }, define: { 'process.env.NODE_ENV': '"production"' },
   })
-  const css = (await Promise.all(['src/client/styles.css', 'program/plugins/ui/default.css', 'program/plugins/theme.css', 'program/plugins/ui/user-input.css'].map(file => fs.readFile(file, 'utf8')))).join('\n').replace(/@import[^;]+;/g, '')
+  const css = (await Promise.all(['src/client/styles.css', 'program/plugins/ui/appearance-tokens.css', 'program/plugins/ui/controls.css', 'program/plugins/ui/surfaces.css', 'program/plugins/ui/default.css', 'program/plugins/theme.css', 'program/plugins/ui/user-input.css'].map(file => fs.readFile(file, 'utf8')))).join('\n').replace(/@import[^;]+;/g, '')
   const server = http.createServer((_request, response) => response.end('<!doctype html><style>' + css + 'body{background:var(--canvas);overflow:auto}main{max-width:768px;margin:auto;padding:18px}</style><main><div id="root"></div></main>'))
   await new Promise(resolve => server.listen(0, '127.0.0.1', resolve))
   const win = new BrowserWindow({ show: false, width: 1000, height: 1000, webPreferences: { offscreen: true, sandbox: true, contextIsolation: true, backgroundThrottling: false } })
diff --git a/tests/fixtures/search.cjs b/tests/fixtures/search.cjs
index 013f323..3c2bc85 100644
--- a/tests/fixtures/search.cjs
+++ b/tests/fixtures/search.cjs
@@ -45,7 +45,7 @@ async function check() {
       window.teardown=()=>{flushSync(()=>root.unmount());for(const cleanup of effects.reverse())cleanup?.()};
     ` }, bundle:true,write:false,platform:'browser',format:'iife',jsx:'automatic',loader:{'.css':'text'},define:{'process.env.NODE_ENV':'"production"'},
   })
-  const css=(await Promise.all(['src/client/styles.css','src/client/pane-toolbar.css','program/plugins/ui/default.css'].map(file=>fs.readFile(file,'utf8')))).join('\n').replace(/@import[^;]+;/g,'')
+  const css=(await Promise.all(['src/client/styles.css', 'program/plugins/ui/appearance-tokens.css', 'program/plugins/ui/controls.css', 'program/plugins/ui/surfaces.css','src/client/pane-toolbar.css','program/plugins/ui/default.css'].map(file=>fs.readFile(file,'utf8')))).join('\n').replace(/@import[^;]+;/g,'')
   const server=http.createServer((_request,response)=>response.end('<!doctype html><style>'+css+'#root{height:100vh}</style><div id="root"></div>'))
   await new Promise(resolve=>server.listen(0,'127.0.0.1',resolve))
   const win=new BrowserWindow({show:false,width:1100,height:760,webPreferences:{offscreen:true,sandbox:true,contextIsolation:true,backgroundThrottling:false}})
diff --git a/tests/fixtures/source-review.cjs b/tests/fixtures/source-review.cjs
index fa56f2f..4a34622 100644
--- a/tests/fixtures/source-review.cjs
+++ b/tests/fixtures/source-review.cjs
@@ -127,6 +127,7 @@ async function check() {
   })
   const css = (await Promise.all([
     'src/client/styles.css', 'src/client/pane-toolbar.css', 'program/plugins/ui/default.css', 'program/plugins/theme.css',
+    'program/plugins/ui/appearance-tokens.css', 'program/plugins/ui/controls.css', 'program/plugins/ui/surfaces.css',
   ].map(file => fs.readFile(file, 'utf8')))).join('\n').replace(/@import[^;]+;/g, '')
   const server = http.createServer(async (request, response) => {
     if (request.url?.startsWith('/fonts/')) {
diff --git a/tests/fixtures/todo.cjs b/tests/fixtures/todo.cjs
index 29bcd29..36c206e 100644
--- a/tests/fixtures/todo.cjs
+++ b/tests/fixtures/todo.cjs
@@ -82,7 +82,7 @@ async function check() {
     bundle: true, write: false, platform: 'browser', format: 'iife', jsx: 'automatic',
     loader: { '.css': 'text' }, define: { 'process.env.NODE_ENV': '"production"' },
   })
-  const css = (await Promise.all(['src/client/styles.css','program/plugins/ui/default.css','program/plugins/theme.css'].map(file=>fs.readFile(file,'utf8')))).join('\n').replace(/@import[^;]+;/g,'')
+  const css = (await Promise.all(['src/client/styles.css', 'program/plugins/ui/appearance-tokens.css', 'program/plugins/ui/controls.css', 'program/plugins/ui/surfaces.css','program/plugins/ui/default.css','program/plugins/theme.css'].map(file=>fs.readFile(file,'utf8')))).join('\n').replace(/@import[^;]+;/g,'')
   const server=http.createServer((request,response)=>response.end('<!doctype html><style>'+css+'\n#root{height:100vh}</style><div id="root"></div>'))
   await new Promise(resolve=>server.listen(0,'127.0.0.1',resolve))
   const win=new BrowserWindow({show:false,width:1200,height:760,webPreferences:{offscreen:true,sandbox:true,contextIsolation:true,backgroundThrottling:false}})
diff --git a/tests/fixtures/user-input.cjs b/tests/fixtures/user-input.cjs
index 1d10f57..c5ebf14 100644
--- a/tests/fixtures/user-input.cjs
+++ b/tests/fixtures/user-input.cjs
@@ -149,7 +149,7 @@ async function check() {
     loader: { '.css': 'text' }, define: { 'process.env.NODE_ENV': '"production"' },
   })
   const css = (await Promise.all([
-    'src/client/styles.css', 'program/plugins/ui/default.css', 'program/plugins/theme.css', 'program/plugins/ui/user-input.css',
+    'src/client/styles.css', 'program/plugins/ui/appearance-tokens.css', 'program/plugins/ui/controls.css', 'program/plugins/ui/surfaces.css', 'program/plugins/ui/default.css', 'program/plugins/theme.css', 'program/plugins/ui/user-input.css',
   ].map(file => fs.readFile(file, 'utf8')))).join('\n').replace(/@import[^;]+;/g, '')
   const server = http.createServer((request, response) => {
     if (request.url === '/fonts/Inter[opsz,wght].ttf') {
diff --git a/tests/fixtures/vertical-tabs.cjs b/tests/fixtures/vertical-tabs.cjs
new file mode 100644
index 0000000..efea4e0
--- /dev/null
+++ b/tests/fixtures/vertical-tabs.cjs
@@ -0,0 +1,980 @@
+const { app, BrowserWindow } = require('./background-electron.cjs')
+const { build } = require('esbuild')
+const assert = require('node:assert/strict')
+const fs = require('node:fs/promises')
+const http = require('node:http')
+const path = require('node:path')
+
+async function check() {
+  await app.whenReady()
+  const bundle = await build({
+    stdin: { resolveDir: process.cwd(), sourcefile: 'vertical-tabs-check.tsx', loader: 'tsx', contents: `
+      import React,{useEffect} from 'react';
+      import {createRoot} from 'react-dom/client';
+      import {flushSync} from 'react-dom';
+      import {CheckSquare,Network,SquareTerminal,X} from 'lucide-react';
+      import {Composer} from './program/plugins/ui/composer';
+      import plugin from './program/plugins/workspace-layout.client';
+      import groupsPlugin from './program/plugins/workspace-tab-groups.client';
+      import verticalTabsPlugin from './program/plugins/vertical-tabs.client';
+      import workspaceMaterialPlugin from './program/plugins/workspace-material.client';
+      import workspaceTabsAppearancePlugin from './program/plugins/workspace-tabs-appearance.client';
+      import interfaceAppearancePlugin from './program/plugins/interface-appearance.client';
+      import verticalHotkeysPlugin from './program/plugins/hotkeys-vertical-tabs.client';
+      import {HotkeysService} from './program/plugins/hotkeys.client';
+      import {parseWorkspaceLayout} from './program/plugins/workspace-layout-state';
+      let saved={version:2,activeViewId:'a',views:['Alto','Incident review with a long name','Design','Review','Shell'].map((name,i)=>{
+        const id=String.fromCharCode(97+i);return {id,name,workspace:'/repo',focusedPaneId:'pane-'+id,root:{type:'pane',id:'pane-'+id,workspace:'/repo',kind:id==='e'?'terminal':'test'}};
+      })};
+      localStorage.setItem('codex-cordis.workspace-layout',JSON.stringify(saved));
+      localStorage.removeItem('codex-cordis.vertical-tabs');
+      const state={connected:true,session:{workspace:'/repo',permissionMode:'full'},projects:[],threads:[],skills:[],turn:{tag:'idle'},activities:[],history:{tag:'ready',entries:[]},harness:{codex:{status:'ready',models:[]},ui:{surfaces:[],contributions:[{id:'test-tool',slot:'header-right'}],regions:[]}}};
+      const host={subscribe:()=>()=>{},snapshot:()=>({connectionEpoch:1}),call:async(method,payload)=>{
+        if(method.endsWith('.read'))return structuredClone(saved);
+        if(method.endsWith('.write')){saved=parseWorkspaceLayout(payload);return null;}
+      }};
+      let Surface,registry,root;
+      const session={snapshot:()=>state,subscribe:()=>()=>{}};
+      const Placeholder=()=>null;
+      const Tool=()=><><button type="button" className="alto-icon-button icon-button shell-control agents-toggle test-tool" aria-label="Agents"><Network size={15}/><span className="agents-toggle-count">2</span></button>
+        <button type="button" className="alto-button todo-header-button" aria-label="Tasks" title="Tasks"><CheckSquare size={16}/><span>Tasks</span></button></>;
+      const ui={subscribe:()=>()=>{},snapshot:()=>0,component:()=>Placeholder,renderer:()=>undefined,contributionRenderer:()=>Tool,
+        overlays:{open:()=>{},close:()=>{}},
+        registerSurface:(_owner,_id,component)=>{Surface=component},
+        registerStyle:(owner,id,css)=>{owner.effect(()=>{const el=document.createElement('style');el.dataset.pluginStyle=id;el.textContent=css;document.head.append(el);return ()=>el.remove()})}};
+      const ctx={provide:(name,value)=>{if(name==='clientVerticalTabs')registry.verticalTabs=value;else registry=value},clientUi:ui,clientHost:host,clientSession:session,
+        clientSessionRouter:{setActive:()=>{},clearActive:()=>{}},clientSessionFactory:{create:()=>{throw new Error('Unexpected chat creation')}}};
+      plugin({...ctx,effect:fn=>fn()});
+      const fiber=install=>{let effects=[];return {
+        enable:()=>flushSync(()=>install({...ctx,clientWorkspaceLayout:registry,effect:fn=>{const cleanup=fn();effects.push(cleanup);return cleanup}})),
+        disable:()=>flushSync(()=>{for(const cleanup of effects.reverse())cleanup();effects=[]}),
+      }};
+      const hotkeys=new HotkeysService(ui,{leader:'Alt'});
+      const controls=fiber(interfaceAppearancePlugin),appearance=fiber(workspaceTabsAppearancePlugin),material=fiber(workspaceMaterialPlugin),groups=fiber(groupsPlugin),vertical=fiber(ctx=>{verticalTabsPlugin(ctx);
+        verticalHotkeysPlugin({...ctx,clientVerticalTabs:registry.verticalTabs,clientHotkeys:{registerAction:(owner,action)=>hotkeys.registerAction(owner,action)}})});
+      window.enableGroups=groups.enable;window.disableGroups=groups.disable;
+      window.enableVertical=vertical.enable;window.disableVertical=vertical.disable;
+      window.enableMaterial=material.enable;window.disableMaterial=material.disable;
+      window.enableAppearance=appearance.enable;window.disableAppearance=appearance.disable;
+      controls.enable();appearance.enable();
+      material.enable();
+      groups.enable();
+      window.mounts=0;
+      const Pane=({pane})=>{useEffect(()=>{window.mounts++},[]);const body=<div className="test-pane"><p>Conversation in {pane.id}</p><textarea id={'draft-'+pane.id} defaultValue={'Draft for '+pane.id}/></div>;
+        // Terminal-like panes draw their own top bar with the shared pane header, as the real terminal does.
+        return pane.kind==='terminal'?<div className="alto-pane ghostty-workspace-pane test-terminal"><div className="alto-pane-header workspace-local-tabbar"><div className="pane-tabs"><div className="pane-tab active"><button type="button" className="pane-tab-select"><span>Terminal</span></button><button type="button" className="pane-tab-close fixture-local-close" aria-label="Close terminal tab"><X size={12}/></button></div></div><button type="button" className="icon-button fixture-legacy-header" aria-label="Terminal options"><Network size={14}/></button></div>{body}</div>:body};
+      registry.registerPaneKind({effect:fn=>fn()},{id:'test',label:'Test pane',renderer:Pane});
+      registry.registerPaneKind({effect:fn=>fn()},{id:'terminal',label:'Terminal',icon:SquareTerminal,renderer:Pane});
+      window.boot=()=>{root=createRoot(document.getElementById('workspace-mount'));flushSync(()=>root.render(<Surface surface={{id:'workspace-layout',kind:'workspace-layout'}}/>))};
+      window.reload=()=>{flushSync(()=>root.unmount());window.boot()};
+      const rect=selector=>{const el=document.querySelector(selector);if(!el)return undefined;const r=el.getBoundingClientRect();return {left:r.left,right:r.right,top:r.top,bottom:r.bottom,width:r.width,height:r.height}};
+      window.inspect=()=>({saved:structuredClone(saved),mounts:window.mounts,
+        headerStrip:!!document.querySelector('.workspace-tabbar .workspace-tabs'),
+        railStrip:document.querySelector('.vertical-tab-rail .workspace-tabs')?.getAttribute('aria-orientation'),
+        rail:rect('.vertical-tab-rail'),tool:rect('.test-tool'),footer:rect('.vertical-tab-rail-footer'),
+        toolHost:document.querySelector('.test-tool')?.closest('.vertical-tab-rail-footer, .workspace-tabbar')?.className,
+        toolsAttribute:document.documentElement.getAttribute('data-workspace-tools'),
+        railEnd:document.documentElement.style.getPropertyValue('--workspace-tools-rail-end'),
+        toggleInFooter:!!document.querySelector('.vertical-tab-rail-footer .vertical-tab-rail-toggle'),views:rect('.workspace-views'),bar:rect('.workspace-tabbar'),
+        collapsed:document.querySelector('.vertical-tab-rail')?.classList.contains('is-collapsed'),
+        toggle:!!document.querySelector('.vertical-tab-rail-toggle'),
+        tabs:[...document.querySelectorAll('[data-workspace-tab]')].map(el=>{const r=el.getBoundingClientRect(),title=el.querySelector('.workspace-tab-title');
+          return {id:el.dataset.workspaceTab,top:r.top,left:r.left,width:r.width,height:r.height,icon:!!el.querySelector('.workspace-tab-icon svg'),
+            iconClass:el.querySelector('.workspace-tab-icon svg')?.getAttribute('class'),titleVisible:!!title&&title.getBoundingClientRect().width>0}}),
+        activePanel:document.querySelector('.workspace-view:not([hidden]) textarea')?.id,
+        stored:JSON.parse(localStorage.getItem('codex-cordis.vertical-tabs')??'null'),
+        scroll:document.documentElement.scrollWidth});
+      window.tabGeometry=()=>{
+        const box=element=>{if(!element)return undefined;const r=element.getBoundingClientRect();return {left:r.left,right:r.right,top:r.top,bottom:r.bottom,width:r.width,height:r.height,center:r.top+r.height/2}};
+        const strip=document.querySelector('.workspace-tabs'),rail=document.querySelector('.vertical-tab-rail');
+        return {orientation:strip.getAttribute('aria-orientation'),collapsed:!!rail?.classList.contains('is-collapsed'),gap:parseFloat(getComputedStyle(strip).gap),
+          rows:[...strip.querySelectorAll('.workspace-tab')].map(row=>({id:row.dataset.workspaceTab,box:box(row),title:box(row.querySelector('.workspace-tab-title,:scope>span:first-child')),icon:box(row.querySelector('.workspace-tab-icon')),
+            close:box(row.querySelector('.workspace-tab-close')),status:box(row.querySelector('.workspace-tab-thread-status')),count:box(row.querySelector('.workspace-tab-group-count')),toggle:box(row.querySelector('.workspace-tab-group-toggle'))})),
+          history:[...document.querySelectorAll('.workspace-history-controls>button')].map(box),tools:[...document.querySelectorAll('.workspace-tabbar-tools button')].map(box),add:box(document.querySelector('.workspace-tab-add'))};
+      };
+      window.click=selector=>flushSync(()=>document.querySelector(selector).click());
+      window.context=selector=>flushSync(()=>{const el=document.querySelector(selector),b=el.getBoundingClientRect();el.dispatchEvent(new MouseEvent('contextmenu',{bubbles:true,cancelable:true,clientX:b.left+8,clientY:b.bottom}))});
+      window.clickText=text=>flushSync(()=>{const el=[...document.querySelectorAll('.workspace-tab-group-menu button')].find(el=>el.textContent.trim()===text);if(!el)throw new Error('Missing button '+text);el.click()});
+      window.key=key=>flushSync(()=>document.activeElement.dispatchEvent(new KeyboardEvent('keydown',{key,bubbles:true,cancelable:true})));
+      let transfer,dragged;
+      const dragEvent=(kind,target,fraction)=>{const to=document.querySelector(target),b=to.getBoundingClientRect();to.dispatchEvent(new DragEvent(kind,{dataTransfer:transfer,bubbles:true,cancelable:true,clientX:b.left+b.width/2,clientY:b.top+b.height*fraction}))};
+      window.drop=(source,target,fraction)=>{
+        flushSync(()=>{dragged=document.querySelector(source);transfer=new DataTransfer();dragged.dispatchEvent(new DragEvent('dragstart',{dataTransfer:transfer,bubbles:true,cancelable:true}))});
+        flushSync(()=>dragEvent('dragover',target,fraction));
+        flushSync(()=>dragEvent('drop',target,fraction));
+        flushSync(()=>dragged.dispatchEvent(new DragEvent('dragend',{dataTransfer:transfer,bubbles:true,cancelable:true})));
+      };
+      window.resize=(dx)=>{const handle=document.querySelector('.vertical-tab-rail-resize'),b=handle.getBoundingClientRect(),x=b.left+b.width/2,y=b.top+40;
+        flushSync(()=>handle.dispatchEvent(new PointerEvent('pointerdown',{bubbles:true,cancelable:true,button:0,pointerId:1,clientX:x,clientY:y})));
+        flushSync(()=>handle.dispatchEvent(new PointerEvent('pointermove',{bubbles:true,pointerId:1,clientX:x+dx,clientY:y})));
+        flushSync(()=>handle.dispatchEvent(new PointerEvent('pointerup',{bubbles:true,pointerId:1,clientX:x+dx,clientY:y})));
+      };
+      window.split=(direction,kind)=>flushSync(()=>registry.splitFocused(direction,kind));
+      window.closePane=()=>flushSync(()=>registry.closeFocusedPane());
+      window.bars=()=>{const view=document.querySelector('.workspace-view:not([hidden])');return [...view.querySelectorAll('.workspace-chat-pane')].map(pane=>{const bar=pane.querySelector('.alto-pane-header')??pane.querySelector(':scope > .workspace-pane-header'),r=bar.getBoundingClientRect(),style=getComputedStyle(bar);
+        return {kind:pane.className,top:r.top,bottom:r.bottom,left:Math.round(r.left),color:style.backgroundColor,border:style.borderBottomColor,borderWidth:style.borderBottomWidth,height:style.height,minHeight:style.minHeight}})};
+      window.commandB=(shift=false)=>flushSync(()=>document.body.dispatchEvent(new KeyboardEvent('keydown',{key:shift?'B':'b',code:'KeyB',metaKey:true,shiftKey:shift,bubbles:true,cancelable:true})));
+      // Reuse the mounted workspace and its real Composer, with representative
+      // transcript markup. The original typed renderer and draft remain mounted.
+      let previews;
+      window.mountPreview=(all=false)=>{
+        const panes=[...document.querySelectorAll('.workspace-view:not([hidden]) .workspace-chat-pane')].filter(pane=>pane.dataset.workspacePaneKind!=='terminal');
+        previews=(all?panes:panes.slice(0,1)).map(pane=>{const content=pane.querySelector('.workspace-typed-pane-content'),title=pane.querySelector('.workspace-pane-title');
+        const mount=document.createElement('div'),heading=document.createElement('div');mount.style.display='contents';heading.className='workspace-pane-title-control';
+        heading.innerHTML='<button type="button" class="workspace-pane-title"><span class="workspace-pane-title-text">A quieter workspace</span></button>';
+        const preview={pane,content,title,heading,mount,classes:pane.className,root:createRoot(mount)};
+        content.style.display='none';title.replaceWith(heading);pane.classList.remove('workspace-typed-pane');if(!all)pane.classList.add('is-focused');pane.append(mount);
+        flushSync(()=>preview.root.render(<>
+          <div className="workspace-pane-conversation"><div className="conversation-stage"><div className="conversation-feed"><div className="conversation-feed-content">
+            <article className="activity-card activity-user"><div className="activity-content activity-markdown"><p>Bring the tabs, conversation, and composer into the same visual family.</p></div></article>
+            <article className="activity-card activity-agent"><div className="activity-content activity-markdown"><p>The navigation now shares its type and surface palette with the conversation. The title follows the reading column, while the tools keep a compact, consistent shape.</p><p>Both tab orientations preserve the same selection, hover, and keyboard focus states.</p></div></article>
+          </div></div></div><aside className="scrollback-minimap is-visible" aria-label="Conversation scrollback" style={{top:20,height:160}}><nav className="scrollback-track"><button type="button" className="scrollback-tick" aria-label="Jump to prompt 1" style={{'--scrollback-tick-width':'20px'}}/></nav></aside></div>
+          <div className="workspace-pane-composer"><Composer value="Keep the conversation easy to read." images={[]} attachments={[]} skills={[]} models={[]}
+            permissionMode="full" workspaceLabel="/repo" workspaceOptions={[]} capabilities={[]} placeholder="Let's build" focusHeight={156} maxHeight={180} autoFocus={false}
+            disabled={false} readOnly={false} sending={false} activeTurn={false}
+            onChange={value=>window.previewDraft=value} onImagesChange={()=>{}} onAttachmentsChange={()=>{}} onAttachFile={async()=>{}}
+            onModelChange={()=>{}} onEffortChange={()=>{}} onPermissionModeChange={()=>{}}
+            onWorkspaceChange={()=>{}} onSubmit={()=>{}} onInterrupt={()=>{}}/></div>
+        </>));return preview;});
+      };
+      window.unmountPreview=()=>{for(const preview of previews){flushSync(()=>preview.root.unmount());preview.mount.remove();preview.heading.replaceWith(preview.title);preview.content.style.removeProperty('display');preview.pane.className=preview.classes;}previews=undefined};
+      window.paneAlignments=()=>[...document.querySelectorAll('.workspace-view:not([hidden]) .workspace-chat-pane:not(.workspace-typed-pane)')].map(pane=>{
+        const box=selector=>{const element=selector?pane.querySelector(selector):pane,r=element.getBoundingClientRect();return {left:r.left,right:r.right,top:r.top,bottom:r.bottom,width:r.width,height:r.height}};
+        const style=getComputedStyle(pane),tick=pane.querySelector('.scrollback-tick'),tickStyle=getComputedStyle(tick),fill=getComputedStyle(tick,'::after'),fillLeft=tick.getBoundingClientRect().left+parseFloat(tickStyle.borderLeftWidth)+parseFloat(tickStyle.paddingLeft);
+        return {id:pane.dataset.workspacePaneId,pane:box(),title:box('.workspace-pane-title-text'),feed:box('.conversation-feed-content'),composer:box('.composer'),
+          column:parseFloat(style.getPropertyValue('--workspace-column-width')),gutter:parseFloat(style.getPropertyValue('--workspace-column-gutter')),
+          minimap:{display:getComputedStyle(pane.querySelector('.scrollback-minimap')).display,box:box('.scrollback-minimap'),track:box('.scrollback-track'),tick:box('.scrollback-tick'),fill:{left:fillLeft,right:fillLeft+parseFloat(fill.width)}}};
+      });
+      window.teardown=()=>{hotkeys.dispose();flushSync(()=>root.unmount());controls.disable()};
+      window.boot();
+    ` },
+    bundle: true, write: false, platform: 'browser', format: 'iife', jsx: 'automatic',
+    loader: { '.css': 'text' }, define: { 'process.env.NODE_ENV': '"production"' },
+  })
+  const css = (await Promise.all(['src/client/styles.css', 'program/plugins/ui/default.css', 'program/plugins/theme.css', 'program/plugins/todo.css', 'program/plugins/orchestrator.css', 'program/plugins/pane-tabs.css', 'program/plugins/scrollback.css'].map(file => fs.readFile(file, 'utf8')))).join('\n').replace(/@import[^;]+;/g, '')
+  const server = http.createServer((request, response) => {
+    response.end('<!doctype html><style>' + css + '\n#root{height:100vh}#workspace-mount{display:flex;min-width:0;min-height:0;flex:1 1 0}.test-pane{padding:24px;width:100%}.test-pane textarea{width:100%;min-height:100px}.test-terminal{flex:1 1 0}</style><div id="root"><div class="shell-kernel"><div data-shell-node="workspace" class="shell-box shell-direction-row shell-grow shell-surface-canvas"><main data-shell-node="workspace-layout-main" class="shell-box shell-direction-column shell-grow shell-surface-canvas"><div id="workspace-mount"></div></main></div></div></div>')
+  })
+  await new Promise(resolve => server.listen(0, '127.0.0.1', resolve))
+  const window = new BrowserWindow({ show: false, width: 1200, height: 760, webPreferences: { offscreen: true, sandbox: true, contextIsolation: true, backgroundThrottling: false } })
+  const run = code => window.webContents.executeJavaScript(code)
+  const settle = () => run('new Promise(resolve=>requestAnimationFrame(()=>requestAnimationFrame(resolve)))')
+  const finishMotion = async () => {
+    await run("document.querySelectorAll('.vertical-tab-rail, .workspace-tabs, .pane-tabs').forEach(el=>el.getAnimations({subtree:true}).forEach(animation=>animation.finish()))")
+    await settle()
+  }
+  const capture = async name => {
+    if (!process.env.ALTO_VERTICAL_TABS_ARTIFACT_DIR) return
+    await fs.mkdir(process.env.ALTO_VERTICAL_TABS_ARTIFACT_DIR, { recursive: true })
+    await fs.writeFile(path.join(process.env.ALTO_VERTICAL_TABS_ARTIFACT_DIR, name + '.png'), (await window.webContents.capturePage()).toPNG())
+  }
+  const assertTabGeometry = async label => {
+    const measured = await run('tabGeometry()')
+    for (const row of measured.rows.filter(row => row.box.width > 1 && row.box.height > 1)) {
+      assert.equal(row.box.height, 32, label + ': tab rows share the compact row height')
+      if (measured.collapsed) continue
+      for (const action of [row.close, row.status, row.toggle].filter(Boolean)) {
+        assert.deepEqual([action.width, action.height, action.center], [24, 24, row.box.center], label + ': action slots remain centered and fixed')
+      }
+      const firstAction = row.status?.left ?? (row.count?.width ? row.count.left : undefined) ?? row.close?.left ?? row.toggle?.left
+      if (row.title && firstAction !== undefined) assert.ok(row.title.right <= firstAction + .01, label + ': title stays clear of its action slots ' + JSON.stringify(row))
+    }
+    for (const control of measured.history) assert.deepEqual([control.width, control.height], [24, 24], label + ': history uses the icon slot size')
+    for (const control of measured.tools) assert.equal(control.height, 32, label + ': rail/top tools share one target height')
+    assert.equal(measured.gap, 4, label + ': both orientations share the tab gap')
+    if (process.env.ALTO_TAB_GEOMETRY_REPORT) console.log(label + ': ' + JSON.stringify(measured))
+    return measured
+  }
+  const assertStableTabStatus = async label => {
+    const before = await assertTabGeometry(label)
+    await run("window.geometryStatus=document.createElement('span');geometryStatus.className='workspace-tab-thread-status';geometryStatus.textContent='●';document.querySelector('[data-workspace-tab=a]').append(geometryStatus)")
+    const after = await assertTabGeometry(label + ' with status')
+    const original = before.rows.find(row => row.id === 'a'), changed = after.rows.find(row => row.id === 'a')
+    assert.deepEqual(changed.title, original.title, label + ': a status update does not move or shrink the tab title')
+    assert.deepEqual(changed.close, original.close, label + ': a status update does not move the close action')
+    await run('geometryStatus.remove()')
+  }
+  const tabListStart = () => run(`(() => {
+    const strip=document.querySelector('.workspace-tabs'),rail=document.querySelector('.vertical-tab-rail'),style=getComputedStyle(strip),bounds=strip.getBoundingClientRect();
+    const first=strip.querySelector('.workspace-tab:not(.is-group-collapsed)').getBoundingClientRect();
+    if(!rail)return {orientation:'horizontal',margin:parseFloat(style.marginTop),padding:parseFloat(style.paddingTop)};
+    const footer=rail.querySelector('.vertical-tab-rail-footer'),tools=footer.getBoundingClientRect();
+    return {orientation:'vertical',collapsed:rail.classList.contains('is-collapsed'),top:bounds.top,bottom:bounds.bottom,first:first.top,margin:parseFloat(style.marginTop),padding:parseFloat(style.paddingTop),
+      headerBottom:rail.querySelector('.vertical-tab-rail-header').getBoundingClientRect().bottom,
+      footerTop:tools.top,footerBottom:tools.bottom,railBottom:rail.getBoundingClientRect().bottom,footerAfterStrip:strip.nextElementSibling===footer,
+      controlsFit:[...footer.querySelectorAll('button')].every(button=>{const r=button.getBoundingClientRect();return r.left>=tools.left&&r.right<=tools.right&&r.top>=tools.top&&r.bottom<=tools.bottom})};
+  })()`)
+  const assertTabListStart = async label => {
+    const measured=await tabListStart()
+    if(measured.orientation==='horizontal'){
+      assert.deepEqual([measured.margin,measured.padding],[0,4],label+': horizontal lists keep their existing inset')
+    }else{
+      if(!measured.collapsed)assert.equal(measured.headerBottom,40,label+': the native title band stays fixed')
+      assert.deepEqual([measured.margin,measured.padding,measured.top,measured.first],[0,4,measured.headerBottom,measured.headerBottom+4],label+': tabs follow the title band without reserving curve space')
+      assert.deepEqual([measured.bottom,measured.footerBottom],[measured.footerTop,measured.railBottom],label+': tools sit at the rail bottom outside the scroller')
+      assert.equal(measured.footerAfterStrip,true,label+': keyboard order follows the visible tab list and footer')
+      assert.equal(measured.controlsFit,true,label+': toolbar controls stay inside the rail')
+    }
+    return measured
+  }
+  const assertScrollableTabList = async (label,artifact) => {
+    const before=await assertTabListStart(label)
+    const footer=await run('inspect().footer')
+    await run(`(() => {
+      const strip=document.querySelector('.workspace-tabs'),source=strip.querySelector('.workspace-tab:not(.workspace-tab-group-label)'),rows=document.createDocumentFragment();
+      for(let i=0;i<24;i++){const row=source.cloneNode(true);row.dataset.workspaceTab='overflow-'+i;row.dataset.fixtureOverflow='';row.querySelector('.workspace-tab-title').textContent='Overflow tab '+(i+1);rows.append(row)}
+      strip.insertBefore(rows,strip.querySelector('.workspace-tab-add-control'));strip.scrollTop=72;
+    })()`)
+    await settle()
+    const scrolled=await run(`(() => {
+      const strip=document.querySelector('.workspace-tabs'),bounds=strip.getBoundingClientRect(),x=bounds.left+bounds.width/2;
+      return {top:bounds.top,scroll:strip.scrollTop,overflow:strip.scrollHeight>strip.clientHeight,first:strip.querySelector('.workspace-tab').getBoundingClientRect().top,
+        above:!!document.elementFromPoint(x,bounds.top-1)?.closest('.workspace-tabs'),inside:!!document.elementFromPoint(x,bounds.top+8)?.closest('.workspace-tab')};
+    })()`)
+    assert.equal(scrolled.overflow,true,label+': a long list overflows')
+    assert.ok(scrolled.scroll>0&&scrolled.first<before.top,label+': rows move inside the scroller')
+    assert.deepEqual([scrolled.top,scrolled.above,scrolled.inside],[before.top,false,true],label+': scrolling stays clipped inside the tab viewport')
+    assert.deepEqual(await run('inspect().footer'),footer,label+': list overflow does not move footer controls')
+    if(artifact)await capture(artifact)
+    await run("document.querySelectorAll('[data-fixture-overflow]').forEach(row=>row.remove());document.querySelector('.workspace-tabs').scrollTop=0")
+    await settle()
+    assert.deepEqual(await tabListStart(),before,label+': removing overflow restores the original list geometry')
+  }
+  const material = () => run(`(() => {
+    // Canvas normalizes both rgb() and color(srgb ...) computed colors.
+    const canvas = document.createElement('canvas');
+    canvas.width = canvas.height = 1;
+    const context = canvas.getContext('2d', { willReadFrequently: true });
+    const sample = element => {
+      if (!element) return undefined;
+      const style = getComputedStyle(element);
+      context.clearRect(0, 0, 1, 1);
+      context.fillStyle = style.backgroundColor;
+      context.fillRect(0, 0, 1, 1);
+      const rgba = [...context.getImageData(0, 0, 1, 1).data];
+      return { color: style.backgroundColor, rgba, alpha: rgba[3] / 255, image: style.backgroundImage, mask: style.maskComposite };
+    };
+    const selectors = ['html', 'body', '#root', '.shell-kernel', '[data-shell-node="workspace"]', '[data-shell-node="workspace-layout-main"]'];
+    const view = document.querySelector('.workspace-view:not([hidden])');
+    return {
+      ancestors: Object.fromEntries(selectors.map(selector => [selector, sample(document.querySelector(selector))])),
+      root: sample(document.querySelector('.workspace-layout-root')),
+      rail: sample(document.querySelector('.vertical-tab-rail')),
+      bar: sample(document.querySelector('.workspace-tabbar')),
+      sheet: sample(view),
+      panes: [...view.querySelectorAll('.workspace-chat-pane, .alto-pane')].map(sample),
+      cornerOverlay: getComputedStyle(view, '::after').content,
+    };
+  })()`)
+  const assertOpaqueContent = (measured, label) => {
+    assert.equal(measured.sheet.alpha, 1, label + ': content sheet stays opaque');
+    assert.ok(measured.panes.length > 0, label + ': pane backgrounds are present');
+    for (const pane of measured.panes) assert.equal(pane.alpha, 1, label + ': content panes stay opaque');
+  }
+  const assertNativeMaterial = (measured, label) => {
+    for (const [selector, surface] of Object.entries(measured.ancestors)) {
+      assert.equal(surface.alpha, 0, label + ': transparent ' + selector + ' ' + JSON.stringify(surface));
+      assert.equal(surface.image, 'none', label + ': no opaque background image on ' + selector);
+    }
+    assert.ok(measured.root.alpha > 0 && measured.root.alpha < 1, label + ': one translucent chrome layer');
+    assert.equal((measured.rail ?? measured.bar).alpha, 0, label + ': chrome reveals the shared material');
+    if (measured.rail) {
+      assert.equal(measured.sheet.alpha, 0, label + ': clear title band');
+      assert.match(measured.sheet.image, /linear-gradient/, label + ': content fill starts below the title band');
+      assert.match(measured.sheet.mask, /exclude/, label + ': real rounded sheet cutout');
+      assert.equal(measured.cornerOverlay, 'none', label + ': no corner painted over opaque content');
+      for (const pane of measured.panes) {
+        assert.equal(pane.alpha, 0, label + ': clear pane title band');
+        assert.match(pane.image, /linear-gradient/, label + ': pane body retains its own fill');
+      }
+    } else assertOpaqueContent(measured, label);
+  }
+  const assertOpaqueChrome = (measured, label) => {
+    for (const selector of ['html', '[data-shell-node="workspace-layout-main"]']) {
+      const surface = measured.ancestors[selector];
+      // Dark main paints an opaque gradient instead of a background color.
+      assert.ok(surface.alpha === 1 || surface.image !== 'none', label + ': shell background restored on ' + selector);
+    }
+    assert.equal(measured.root.alpha, 1, label + ': opaque workspace chrome');
+    if (measured.rail) assert.equal(measured.rail.alpha, 1, label + ': opaque rail');
+    else assert.ok(measured.bar.alpha > 0, label + ': horizontal chrome restored');
+    assertOpaqueContent(measured, label);
+  }
+  const assertMaterialPixels = async label => {
+    const points = await run(`(() => {
+      const view = document.querySelector('.workspace-view:not([hidden])'), bounds = view.getBoundingClientRect();
+      const band = parseFloat(getComputedStyle(view.querySelector('.workspace-pane-header')).minHeight);
+      const radius = parseFloat(getComputedStyle(view).getPropertyValue('--workspace-sheet-radius'));
+      const rail = document.querySelector('.vertical-tab-rail').getBoundingClientRect();
+      const context = document.createElement('canvas').getContext('2d');
+      const expected = (element, paneColor = true) => {
+        const style = getComputedStyle(element);
+        context.fillStyle = (paneColor && style.getPropertyValue('--workspace-pane-background')) || style.getPropertyValue('--canvas');
+        context.fillRect(0, 0, 1, 1);
+        const [r,g,b,a] = context.getImageData(0, 0, 1, 1).data;
+        return [b,g,r,a];
+      };
+      return { gutter: [2, 2], rail: [rail.left + 2, 2], corner: [bounds.left + 1, bounds.top + band + 1], panes: [...view.querySelectorAll('.workspace-chat-pane')].flatMap(pane => {
+        const rect = pane.getBoundingClientRect();
+        if (!rect.width || !rect.height) return [];
+        const owner = pane.querySelector('.alto-pane') ?? pane;
+        return [{ header: [rect.left + 2, rect.top + 2], top: rect.top, body: [rect.left + 3, rect.top + band + radius + 4], expected: expected(owner), headerCanvas: expected(pane, false) }];
+      }) };
+    })()`)
+    const shot = await window.webContents.capturePage(), size = shot.getSize(), bitmap = shot.toBitmap()
+    const pixel = ([x, y]) => [...bitmap.subarray((Math.floor(y) * size.width + Math.floor(x)) * 4, (Math.floor(y) * size.width + Math.floor(x)) * 4 + 4)]
+    const chrome = pixel(points.rail)
+    assert.deepEqual(pixel(points.gutter), chrome, label + ': gutters expose the shared material')
+    // The sheet casts a faint black shadow onto the material at its corner.
+    // It must still expose the glass rather than an opaque corner fill.
+    const corner = pixel(points.corner)
+    assert.equal(corner[3], chrome[3], label + ': rounded corner keeps the material alpha')
+    for (let channel = 0; channel < 3; channel++) {
+      assert.ok(corner[channel] <= chrome[channel] && corner[channel] >= chrome[channel] * .88,
+        label + ': rounded corner exposes the material beneath a faint shadow ' + JSON.stringify({ corner, chrome }))
+    }
+    for (const pane of points.panes) {
+      assert.deepEqual(pixel(pane.header), pane.top === 0 ? chrome : pane.headerCanvas, label + ': title band and lower split header colors')
+      assert.deepEqual(pixel(pane.body), pane.expected, label + ': opaque content body ' + JSON.stringify(pane))
+    }
+  }
+  const readTabsContrast = (theme, orientation) => {
+    // Place representative desktop colors beneath the entire painted DOM
+    // chain, including the root tint. Native material can vary beyond these inputs.
+    const backdrop = theme === 'light' ? [184, 184, 189, 1] : [69, 71, 76, 1]
+    return run(`(() => {
+      const host=document.querySelector(${JSON.stringify(orientation === 'vertical' ? '.vertical-tab-rail' : '.workspace-tabbar')}),ctx=document.createElement('canvas').getContext('2d');
+      const rgba=value=>{ctx.clearRect(0,0,1,1);ctx.fillStyle=value;ctx.fillRect(0,0,1,1);const c=[...ctx.getImageData(0,0,1,1).data];c[3]/=255;return c};
+      const over=(a,b)=>a.slice(0,3).map((v,i)=>v*a[3]+b[i]*(1-a[3])).concat(1);
+      const luminance=c=>c.slice(0,3).map(v=>{v/=255;return v<=.04045?v/12.92:((v+.055)/1.055)**2.4}).reduce((sum,v,i)=>sum+v*[.2126,.7152,.0722][i],0);
+      const contrast=(a,b)=>{const x=luminance(a),y=luminance(b);return (Math.max(x,y)+.05)/(Math.min(x,y)+.05)};
+      const inspect=selector=>{
+        const element=typeof selector==='string'?host.querySelector(selector):selector;if(!element)return undefined;
+        const style=getComputedStyle(element),chain=[];
+        for(let node=element;node;node=node.parentElement)chain.unshift(getComputedStyle(node));
+        const background=chain.reduce((bg,s)=>over(rgba(s.backgroundColor),bg),${JSON.stringify(backdrop)});
+        const opacity=chain.reduce((a,s)=>a*Number(s.opacity),1),foreground=rgba(style.color);foreground[3]*=opacity;
+        const r=element.getBoundingClientRect();
+        return {ratio:contrast(over(foreground,background),background),background,fill:rgba(style.backgroundColor),color:rgba(style.color),opacity,weight:Number(style.fontWeight),outline:parseFloat(style.outlineWidth),outlineColor:rgba(style.outlineColor),outlineRatio:contrast(over(rgba(style.outlineColor),background),background),focus:element.matches(':focus-visible'),transition:style.transitionProperty,rect:{x:r.x,y:r.y,width:r.width,height:r.height}};
+      };
+      const probe=document.createElement('i');document.querySelector('.workspace-layout-root').append(probe);
+      const body=Object.fromEntries(['text','text-strong','muted'].map(name=>{probe.style.color='var(--'+name+')';return [name,rgba(getComputedStyle(probe).color)]}));probe.remove();
+      const headers=[...document.querySelectorAll('.workspace-view:not([hidden]) :is(.workspace-pane-header,.alto-pane-header)')].map(header=>{
+        const title=header.querySelector('.workspace-pane-title-text,.workspace-typed-pane-title strong,.pane-tab-select span');
+        return {chrome:${JSON.stringify(orientation === 'vertical')}&&!header.closest('.workspace-split-vertical:not(.is-fullscreen-second) > .workspace-split-second'),
+          title:inspect(title),action:inspect(header.querySelector('.workspace-pane-actions button svg')),legacy:inspect(header.querySelector('.fixture-legacy-header')),close:inspect(header.querySelector('.fixture-local-close')),
+          expectedTitle:body[title?.matches('strong,.pane-tab-select span')?'text-strong':'text'],expectedAction:body.muted,expectedLegacy:body.text};
+      });
+      return {normal:inspect('.workspace-tab:not(.is-active):not(.workspace-tab-group-label) .workspace-tab-title'),selected:inspect('.workspace-tab.is-active .workspace-tab-title'),row:inspect('.workspace-tab:not(.is-active):not(.workspace-tab-group-label)'),activeRow:inspect('.workspace-tab.is-active'),group:inspect('.workspace-tab-group-label > span:first-child'),groupRow:inspect('.workspace-tab-group-label'),icon:inspect(${JSON.stringify(orientation === 'vertical' ? '.workspace-tab-icon svg' : '.workspace-tab-add svg')}),tool:inspect('.test-tool'),disabled:inspect('.workspace-history-controls > button:disabled'),status:inspect('.contrast-status'),green:rgba(getComputedStyle(host).getPropertyValue('--green')),headers};
+    })()`)
+  }
+  const assertReadableTabs = (measured, label) => {
+    for (const name of ['normal', 'selected', 'group', 'tool']) assert.ok(measured[name].ratio >= 4.5, label + ': readable ' + name + ' ' + measured[name].ratio)
+    assert.ok(measured.icon.ratio >= 3, label + ': readable navigation icon')
+    for (const header of measured.headers) {
+      for (const [name, minimum] of [['title', 4.5], ['action', 3], ['legacy', 3], ['close', 3]]) {
+        const sample = header[name]
+        if (!sample) continue
+        const expected = header.chrome ? measured.normal.color : header[name === 'title' ? 'expectedTitle' : name === 'legacy' ? 'expectedLegacy' : 'expectedAction']
+        assert.deepEqual(sample.color, expected, label + ': ' + name + ' follows its chrome or content ink')
+        if (header.chrome && sample.rect.height) assert.ok(sample.ratio >= minimum, label + ': readable header ' + name + ' ' + sample.ratio)
+      }
+    }
+  }
+  const assertHeaderControls = async theme => {
+    const tool=(await readTabsContrast(theme,'vertical')).tool.rect
+    await window.webContents.debugger.sendCommand('Input.dispatchMouseEvent', { type: 'mouseMoved', x: tool.x + tool.width / 2, y: tool.y + tool.height / 2 })
+    await settle()
+    const hoverFill=(await readTabsContrast(theme,'vertical')).tool.fill
+    const read = async () => {
+      const measured = await readTabsContrast(theme, 'vertical')
+      return { ink: measured.normal.color, header: measured.headers.find(header => header.legacy) }
+    }
+    for (const [name, className] of [['legacy', 'fixture-legacy-header'], ['close', 'fixture-local-close']]) {
+      const { header } = await read(), rect = header[name].rect
+      await window.webContents.debugger.sendCommand('Input.dispatchMouseEvent', { type: 'mouseMoved', x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 })
+      await settle()
+      const hovered = await read()
+      assert.deepEqual(hovered.header[name].color, hovered.ink, name + ': legacy header hover keeps readable chrome ink')
+      assert.deepEqual(hovered.header[name].fill, hoverFill, name + ': pane controls share the sidebar hover fill')
+      await window.webContents.debugger.sendCommand('Input.dispatchKeyEvent', { type: 'keyDown', key: 'Tab', code: 'Tab', windowsVirtualKeyCode: 9 })
+      await window.webContents.debugger.sendCommand('Input.dispatchKeyEvent', { type: 'keyUp', key: 'Tab', code: 'Tab', windowsVirtualKeyCode: 9 })
+      await run(`document.querySelector('.workspace-view:not([hidden]) .${className}').focus({preventScroll:true})`)
+      const focused = await read()
+      assert.deepEqual(focused.header[name].color, focused.ink, name + ': legacy header focus keeps chrome ink')
+      assert.ok(focused.header[name].focus && focused.header[name].outline >= 2 && focused.header[name].outlineRatio >= 3, name + ': header keyboard focus contrasts against its fill')
+      await run('document.activeElement.blur()')
+    }
+    await window.webContents.debugger.sendCommand('Input.dispatchMouseEvent', { type: 'mouseMoved', x: 1100, y: 700 })
+  }
+  const assertTabsContrast = async (theme, orientation, suffix = '') => {
+    const prefix = 'contrast-' + theme + '-' + orientation + suffix
+    const read = () => readTabsContrast(theme, orientation)
+    const mouse = (type, rect, extra = {}) => window.webContents.debugger.sendCommand('Input.dispatchMouseEvent', {
+      type, x: rect.x + Math.min(24, rect.width / 2), y: rect.y + rect.height / 2, ...extra,
+    })
+    await run("window.contrastStatus=document.createElement('i');contrastStatus.className='workspace-tab-thread-status contrast-status';contrastStatus.style.color='var(--green)';contrastStatus.textContent='●';document.querySelector('.workspace-tab:not(.is-active):not(.workspace-tab-group-label)').append(contrastStatus)")
+    window.setBackgroundColor(theme === 'light' ? '#aaabb1' : '#22242a')
+    await mouse('mouseMoved', { x: 1100, y: 700, width: 0, height: 0 })
+    await settle()
+    const normal = await read()
+    assertReadableTabs(normal, theme)
+    assert.ok(normal.disabled.opacity < .5, theme + ': disabled navigation remains dim')
+    assert.ok(normal.selected.weight > normal.normal.weight, theme + ': selection has stronger text')
+    assert.deepEqual(normal.status.color, normal.green, theme + ': semantic status color is preserved')
+    assert.doesNotMatch(normal.row.transition, /(^|,\s*)(all|color|background[^,]*|border-color)(,|$)/, 'Hover paint changes immediately')
+    await capture(prefix + '-rest')
+    await mouse('mouseMoved', normal.row.rect)
+    await settle()
+    const hovered = await read()
+    assert.notDeepEqual(hovered.row.background, normal.row.background, theme + ': hover is visible')
+    assert.notDeepEqual(hovered.row.background, hovered.activeRow.background, theme + ': hover differs from selection')
+    assert.ok(hovered.normal.ratio >= 4.5, theme + ': readable hovered title')
+    const colors = { ink: normal.normal.color, secondary: normal.tool.color, groupInk: normal.group.color, normal: normal.row.background, group: normal.groupRow.background, selected: normal.activeRow.background, hover: hovered.row.background, pressed: {} }
+    await capture(prefix + '-hover')
+    for (const target of ['row', 'activeRow']) {
+      await mouse('mouseMoved', normal[target].rect)
+      const before = await read()
+      await mouse('mousePressed', normal[target].rect, { button: 'left', buttons: 1, clickCount: 1 })
+      const pressed = await read()
+      assert.notDeepEqual(pressed[target].background, before[target].background, theme + ': pressed ' + target + ' differs from hover')
+      colors.pressed[target] = pressed[target].background
+      await mouse('mouseReleased', { x: 1100, y: 700, width: 0, height: 0 }, { button: 'left', buttons: 0, clickCount: 1 })
+    }
+    await window.webContents.debugger.sendCommand('Input.dispatchKeyEvent', { type: 'keyDown', key: 'Tab', code: 'Tab', windowsVirtualKeyCode: 9 })
+    await window.webContents.debugger.sendCommand('Input.dispatchKeyEvent', { type: 'keyUp', key: 'Tab', code: 'Tab', windowsVirtualKeyCode: 9 })
+    await run("document.querySelector('.workspace-tab.is-active').focus({preventScroll:true})")
+    const focused = await read()
+    assert.ok(focused.activeRow.focus && focused.activeRow.outline >= 2, theme + ': keyboard focus has a visible outline')
+    assert.ok(focused.activeRow.outlineRatio >= 3, theme + ': focus outline contrasts against its fill')
+    assert.deepEqual(focused.row.rect, normal.row.rect, theme + ': states preserve row geometry')
+    colors.focus = focused.activeRow.background
+    colors.outline = focused.activeRow.outlineColor
+    await capture(prefix + '-focus')
+    await run("window.contrastGroup=document.querySelector('.workspace-tab-group-label');contrastGroup.classList.add('is-active');contrastGroup.focus({preventScroll:true})")
+    const selectedGroup = await read()
+    await run("contrastGroup.dataset.tabDrop='inside'")
+    const drop = await read()
+    assert.notDeepEqual(drop.groupRow.background, selectedGroup.groupRow.background, theme + ': drop feedback takes priority over selected focus')
+    assert.notDeepEqual(drop.groupRow.background, normal.groupRow.background, theme + ': drop feedback differs from an ordinary group heading')
+    colors.drop = drop.groupRow.background
+    await capture(prefix + '-group-drop')
+    await run("document.activeElement.blur();contrastStatus.remove();contrastGroup.classList.remove('is-active');delete contrastGroup.dataset.tabDrop")
+    return colors
+  }
+  const assertCoherence = async label => {
+    const measured = await run(`(() => {
+      const pane=document.querySelector('.workspace-view:not([hidden]) .workspace-chat-pane:not(.workspace-typed-pane)'),style=getComputedStyle(pane),ctx=document.createElement('canvas').getContext('2d');
+      const box=element=>{const r=element.getBoundingClientRect();return {left:r.left,right:r.right,width:r.width,height:r.height}};
+      const color=value=>{ctx.clearRect(0,0,1,1);ctx.fillStyle=value;ctx.fillRect(0,0,1,1);return [...ctx.getImageData(0,0,1,1).data]};
+      const role=name=>{const probe=document.createElement('i');probe.style.backgroundColor='var('+name+')';pane.append(probe);const result=color(getComputedStyle(probe).backgroundColor);probe.remove();return result};
+      const composer=pane.querySelector('.composer'),bubble=pane.querySelector('.activity-user'),tasks=document.querySelector('.todo-header-button'),agents=document.querySelector('.agents-toggle-count');
+      const tab=document.querySelector('.workspace-tab:not(.workspace-tab-group-label)'),group=document.querySelector('.workspace-tab-group-label'),feed=pane.querySelector('.conversation-feed-content'),view=pane.closest('.workspace-view');
+      const controls=[tab,group,tasks,document.querySelector('.test-tool'),document.querySelector('.workspace-tab-add'),document.querySelector('.workspace-history-controls > button')];
+      return {pane:box(pane),title:box(pane.querySelector('.workspace-pane-title-text')),feed:box(feed),composer:box(composer),tasks:box(tasks),
+        width:parseFloat(style.getPropertyValue('--workspace-column-width')),gutter:parseFloat(style.getPropertyValue('--workspace-column-gutter')),
+        fonts:[tab,pane.querySelector('.workspace-pane-title'),pane.querySelector('.activity-agent .activity-content'),pane.querySelector('[data-cordis-composer-editor]')].map(el=>getComputedStyle(el).fontFamily),
+        fills:{bubble:color(getComputedStyle(bubble).backgroundColor),composer:color(getComputedStyle(composer).backgroundColor),sheet:role('--workspace-surface-sheet'),recessed:role('--workspace-surface-recessed'),raised:role('--workspace-surface-raised')},chrome:role('--workspace-surface-chrome'),
+        radii:[composer,bubble,...controls].map(el=>getComputedStyle(el).borderRadius),radius:style.getPropertyValue('--workspace-radius').trim(),composerRadius:style.getPropertyValue('--radius-composer').trim(),originalRadius:getComputedStyle(document.documentElement).getPropertyValue('--radius-composer').trim(),
+        roundSupported:CSS.supports('corner-shape','round'),corners:[composer,bubble,...controls].map(el=>getComputedStyle(el).getPropertyValue('corner-shape')),
+        controls:controls.map(box),groupFrame:parseFloat(getComputedStyle(group,'::before').borderTopLeftRadius),groupInset:parseFloat(getComputedStyle(group).getPropertyValue('--workspace-tab-group-inset')),
+        sheetRadius:getComputedStyle(view).getPropertyValue('--workspace-sheet-radius').trim(),sheetEdgeRadius:getComputedStyle(view,'::before').borderTopLeftRadius,vertical:!!document.querySelector('.vertical-tab-rail'),
+        tasksNamed:tasks.getAttribute('aria-label'),tasksLabel:getComputedStyle(tasks.querySelector('span')).display,agentsVisible:agents.getBoundingClientRect().width>0,
+        collapsed:!!document.querySelector('.vertical-tab-rail.is-collapsed'),scroll:document.documentElement.scrollWidth,viewport:innerWidth};
+    })()`)
+    const near = (actual, expected, description) => assert.ok(Math.abs(actual - expected) <= 1, label + ': ' + description + ' ' + JSON.stringify(measured))
+    const column = Math.min(measured.width, measured.pane.width - 2 * measured.gutter)
+    near(measured.composer.width, column, 'composer fits the pane reading column')
+    near(measured.feed.width, column, 'transcript uses the same reading column')
+    near(measured.title.left, measured.composer.left, 'pane title aligns with the reading column')
+    near(measured.feed.left, measured.composer.left, 'transcript and composer align')
+    assert.ok(measured.fonts.every(font => font === measured.fonts[0]), label + ': navigation, title, transcript, and real editor share one font family ' + JSON.stringify(measured.fonts))
+    assert.deepEqual(measured.fills.bubble, measured.fills.recessed, label + ': message uses the recessed surface')
+    assert.deepEqual(measured.fills.composer, measured.fills.raised, label + ': real composer uses the raised surface')
+    assert.notDeepEqual(measured.fills.bubble, measured.fills.composer, label + ': message and composer retain distinct surface roles')
+    assert.equal(measured.originalRadius, '48px', label + ': original composer radius is preserved')
+    assert.equal(measured.composerRadius, measured.originalRadius, label + ': appearance keeps the composer radius')
+    assert.equal(measured.radius, measured.originalRadius, label + ': shared rounding derives from the composer')
+    assert.ok(measured.radii.every(radius => radius === measured.radius), label + ': composer, messages, tabs, group labels, and toolbar controls share the original rounding ' + JSON.stringify(measured.radii))
+    if (measured.roundSupported) assert.ok(measured.corners.every(shape => shape === 'round'), label + ': shared surfaces use round corners')
+    for (const control of measured.controls) assert.ok(parseFloat(measured.radius) >= Math.min(control.width, control.height) / 2, label + ': short controls clamp into circles or pills')
+    assert.equal(measured.groupFrame, parseFloat(measured.radius) + measured.groupInset, label + ': group outline follows the same rounding and inset')
+    assert.equal(measured.sheetRadius, measured.radius, label + ': sheet follows the composer rounding')
+    if (measured.vertical) assert.equal(measured.sheetEdgeRadius, measured.radius, label + ': sheet edge uses the shared radius')
+    assert.deepEqual([measured.tasks.width, measured.tasks.height, measured.tasksNamed, measured.tasksLabel], [32, 32, 'Tasks', 'none'], label + ': Tasks is a named 32px icon control')
+    if (!measured.collapsed) assert.equal(measured.agentsVisible, true, label + ': the Agents count stays visible')
+    assert.ok(measured.scroll <= measured.viewport, label + ': content stays inside the viewport')
+    return measured
+  }
+  const assertPaneAlignments = async (label, count) => {
+    const panes = await run('paneAlignments()')
+    assert.equal(panes.length, count, label + ': every chat pane is measured')
+    for (const measured of panes) {
+      const near = (actual, expected, description) => assert.ok(Math.abs(actual - expected) <= 1,
+        label + ': ' + measured.id + ' ' + description + ' ' + JSON.stringify(measured))
+      const column = Math.min(measured.column, measured.pane.width - 2 * measured.gutter)
+      near(measured.title.left, measured.composer.left, 'title aligns with its own Composer')
+      near(measured.feed.left, measured.composer.left, 'transcript aligns with its own Composer, including scrollback')
+      near(measured.feed.width, column, 'transcript uses the pane reading width')
+      near(measured.composer.width, column, 'Composer uses the pane reading width')
+      assert.ok(measured.title.width > 0 && measured.feed.width > 0, label + ': each pane has visible title and transcript geometry')
+      assert.equal(measured.minimap.display === 'none', measured.pane.width <= 440, label + ': scrollback visibility follows each pane, not the window')
+      if (measured.minimap.display !== 'none') for (const part of ['box', 'track', 'tick', 'fill']) {
+        assert.ok(measured.minimap[part].right <= measured.feed.left + 1, label + ': scrollback ' + part + ' stays before the transcript ' + JSON.stringify(measured))
+      }
+    }
+    if (process.env.ALTO_TAB_GEOMETRY_REPORT) console.log(label + ': ' + JSON.stringify(panes))
+    return panes
+  }
+  try {
+    await window.loadURL(`http://127.0.0.1:${server.address().port}`)
+    await run(bundle.outputFiles[0].text)
+    await settle()
+    let state = await run('inspect()')
+    assert.equal(state.mounts, 5)
+    assert.equal(state.headerStrip, true, 'Tabs start in the top bar')
+    assert.equal(state.railStrip, undefined)
+    assert.match(state.toolHost, /workspace-tabbar/, 'Tools start in the top bar')
+    assert.equal(state.toolsAttribute, null)
+    await assertTabGeometry('Initial horizontal geometry')
+    await assertTabListStart('Initial horizontal list')
+
+    await run("document.getElementById('draft-pane-a').value='Keep this draft';window.originalDraft=document.getElementById('draft-pane-a');enableVertical()")
+    await finishMotion()
+    state = await run('inspect()')
+    assert.equal(state.headerStrip, false, 'The top tabs are removed while the rail is active')
+    assert.equal(state.railStrip, 'vertical')
+    assert.equal(state.mounts, 5, 'Moving tabs to the side does not remount panes')
+    assert.equal(await run("originalDraft===document.getElementById('draft-pane-a') && originalDraft.value==='Keep this draft'"), true)
+    assert.equal(state.rail.width, 232)
+    assert.ok(state.views.left >= state.rail.right - 1, JSON.stringify(state))
+    assert.equal(state.bar, undefined, 'The rail replaces the top bar')
+    assert.equal(state.rail.top, 0)
+    assert.equal(state.rail.height, 760)
+    assert.equal(state.toolHost, 'vertical-tab-rail-footer', 'Top bar tools move into the rail')
+    assert.ok(state.tool.top >= state.footer.top && state.tool.left >= state.rail.left && state.tool.right <= state.rail.right, JSON.stringify(state))
+    assert.equal(state.toggleInFooter, true)
+    assert.equal(state.toolsAttribute, 'rail')
+    assert.equal(state.railEnd, '232px')
+    await assertStableTabStatus('Expanded vertical geometry')
+    await assertScrollableTabList('Expanded opaque tab list')
+    // Every pane kind's top bar joins one title band: same height and color as
+    // the rail's top row, with the sheet edge curving beneath it.
+    const band = selector => run(`(()=>{const view=document.querySelector('.workspace-view:not([hidden])'),bar=view.querySelector('${selector}'),style=getComputedStyle(bar),r=bar.getBoundingClientRect(),edge=getComputedStyle(view,'::before'),rail=document.querySelector('.vertical-tab-rail');
+      return {barTop:r.top,barBottom:r.bottom,barWidth:Math.round(r.width),viewWidth:Math.round(view.getBoundingClientRect().width),barColor:style.backgroundColor,barBorder:style.borderBottomColor,railColor:getComputedStyle(rail).backgroundColor,railHeader:document.querySelector('.vertical-tab-rail-header').getBoundingClientRect().height,
+        sheetColor:getComputedStyle(view).backgroundColor,edgeTop:edge.top,edgeBorderTop:edge.borderTopWidth,edgeRadius:edge.borderTopLeftRadius,edgeLeft:edge.borderLeftWidth}})()`)
+    const assertBand = (measured, label) => {
+      assert.equal(measured.barTop, 0, label)
+      assert.equal(measured.barBottom, measured.railHeader, label + ': aligned with the rail top row')
+      assert.equal(measured.barBottom, 40, label)
+      assert.equal(measured.barColor, measured.railColor, label + ': chrome color')
+      assert.notEqual(measured.sheetColor, measured.railColor, label + ': lighter sheet')
+      // The edge sits in the band's last row, above any native surface in the content box.
+      assert.deepEqual([measured.edgeTop, measured.edgeBorderTop, measured.edgeRadius, measured.edgeLeft], ['39px', '1px', '48px', '1px'], label + ': curved sheet edge')
+    }
+    const headerless = await band('.workspace-typed-pane > .workspace-pane-header')
+    assertBand(headerless, 'Pane kinds without a top bar')
+    assert.equal(headerless.barWidth, headerless.viewWidth, 'Their pane controls widen into a full band')
+    await run("window.chatLike=document.querySelector('.workspace-view:not([hidden]) > .workspace-typed-pane');chatLike.classList.remove('workspace-typed-pane')")
+    assertBand(await band('.workspace-chat-pane > .workspace-pane-header'), 'Chat titles')
+    await run("chatLike.classList.add('workspace-typed-pane')")
+    await run("click('[data-workspace-tab=e]')")
+    await settle()
+    const terminal = await band('.alto-pane-header')
+    assertBand(terminal, 'Terminal-style top bars')
+    assert.equal(terminal.barBorder, 'rgba(0, 0, 0, 0)', 'The sheet edge replaces the top bar border')
+    await capture('vertical-terminal-band-light')
+    for (let index = 1; index < state.tabs.length; index += 1) {
+      assert.ok(state.tabs[index].top >= state.tabs[index - 1].top + state.tabs[index - 1].height, 'Tabs stack vertically')
+      assert.equal(state.tabs[index].left, state.tabs[0].left)
+    }
+    assert.ok(state.tabs.every(tab => tab.icon && tab.titleVisible && tab.height === 32), JSON.stringify(state.tabs))
+    assert.match(state.tabs[4].iconClass, /square-terminal/, 'Tabs show their focused pane kind')
+    assert.ok(state.scroll <= 1200)
+    await capture('vertical-expanded-light')
+
+    await run("click('[data-workspace-tab=c]')")
+    assert.equal((await run('inspect()')).activePanel, 'draft-pane-c')
+    await run("drop('[data-workspace-tab=e]','[data-workspace-tab=b]',0.1)")
+    assert.deepEqual((await run('inspect()')).saved.views.map(view => view.id), ['a','e','b','c','d'], 'Dragging uses the vertical midpoint')
+    await run("drop('[data-workspace-tab=e]','[data-workspace-tab=d]',0.9)")
+    assert.deepEqual((await run('inspect()')).saved.views.map(view => view.id), ['a','b','c','d','e'])
+
+    await run("context('[data-workspace-tab=a]');clickText('Add to new group');key('Escape')")
+    await run("context('[data-workspace-tab=b]');clickText('Group')")
+    await finishMotion()
+    const groupLabel = await run("(()=>{const r=document.querySelector('[data-workspace-group]').getBoundingClientRect(),a=document.querySelector('[data-workspace-tab=a]').getBoundingClientRect();return {labelBottom:r.bottom,memberTop:a.top,labelWidth:r.width}})()")
+    assert.ok(groupLabel.memberTop >= groupLabel.labelBottom, JSON.stringify(groupLabel))
+    // Each member's slice of the group line reaches across the gap to the next.
+    const groupLine = await run(`(()=>{const slice=id=>{const tab=document.querySelector('[data-workspace-tab='+id+']'),r=tab.getBoundingClientRect(),style=getComputedStyle(tab),line=getComputedStyle(tab,'::before');
+      return {top:r.top+parseFloat(style.borderTopWidth)+parseFloat(line.top),bottom:r.bottom-parseFloat(style.borderBottomWidth)-parseFloat(line.bottom)}};return {a:slice('a'),b:slice('b')}})()`)
+    assert.ok(groupLine.a.bottom >= groupLine.b.top, 'Group line is continuous: ' + JSON.stringify(groupLine))
+    // The line sits under the label's first letter, and member content starts a step past it.
+    const groupColumn = await run(`(()=>{const label=document.querySelector('[data-workspace-group] > span:first-child').getBoundingClientRect(),tab=document.querySelector('[data-workspace-tab=a]'),r=tab.getBoundingClientRect(),line=getComputedStyle(tab,'::before'),
+      left=r.left+parseFloat(getComputedStyle(tab).borderLeftWidth)+parseFloat(line.left);return {labelText:label.left,line:left,lineEnd:left+parseFloat(line.width),content:tab.firstElementChild.getBoundingClientRect().left}})()`)
+    assert.equal(groupColumn.line, groupColumn.labelText, 'Group line aligns with the label text: ' + JSON.stringify(groupColumn))
+    assert.equal(groupColumn.content - groupColumn.lineEnd, 8, 'Member content starts a step past the line: ' + JSON.stringify(groupColumn))
+    await assertTabGeometry('Expanded group geometry')
+    await capture('vertical-group-light')
+    await run("click('[data-workspace-group]')")
+    await finishMotion()
+    state = await run('inspect()')
+    assert.deepEqual(state.tabs.filter(tab => tab.id === 'a' || tab.id === 'b').map(tab => tab.height), [0, 0], 'Collapsed groups fold their rows away')
+    await assertTabGeometry('Collapsed group geometry')
+    assert.equal(state.mounts, 5)
+    await run("click('[data-workspace-group]')")
+    await finishMotion()
+
+    await run("resize(80)")
+    await finishMotion()
+    state = await run('inspect()')
+    assert.equal(state.rail.width, 312)
+    assert.equal(state.stored.width, 312)
+    await run("document.querySelector('.vertical-tab-rail-resize').focus();key('Home')")
+    await finishMotion()
+    assert.equal((await run('inspect()')).rail.width, 168)
+    await assertTabListStart('Minimum-width rail tools')
+    await run("document.querySelector('.vertical-tab-rail-resize').dispatchEvent(new MouseEvent('dblclick',{bubbles:true}))")
+    await finishMotion()
+    assert.equal((await run('inspect()')).rail.width, 232)
+
+    await run("click('.vertical-tab-rail-toggle')")
+    await finishMotion()
+    state = await run('inspect()')
+    assert.equal(state.collapsed, true)
+    assert.equal(state.rail.width, 48)
+    assert.equal(state.stored.collapsed, true)
+    assert.ok(state.tabs.every(tab => tab.icon && !tab.titleVisible), JSON.stringify(state.tabs))
+    await assertTabListStart('Collapsed tab list')
+    await capture('vertical-collapsed-light')
+    await run("document.querySelector('[data-workspace-tab=c]').dispatchEvent(new MouseEvent('dblclick',{bubbles:true}))")
+    await finishMotion()
+    assert.equal((await run('inspect()')).rail.width, 232, 'Renaming temporarily widens a collapsed rail')
+    await run("key('Escape')")
+    await finishMotion()
+    assert.equal((await run('inspect()')).rail.width, 48)
+    assert.equal((await run('inspect()')).railEnd, '48px', 'Flyouts follow the collapsed rail edge')
+
+    await run('commandB()')
+    await finishMotion()
+    state = await run('inspect()')
+    assert.equal(state.collapsed, false, 'Command-B expands the rail')
+    assert.equal(state.rail.width, 232)
+    await run('commandB()')
+    await finishMotion()
+    state = await run('inspect()')
+    assert.equal(state.collapsed, true, 'Command-B collapses the rail')
+    assert.equal(state.stored.collapsed, true)
+
+    await run('commandB(true)')
+    await finishMotion()
+    state = await run('inspect()')
+    assert.equal(state.railStrip, undefined, 'Command-Shift-B switches to top tabs')
+    assert.equal(state.headerStrip, true)
+    assert.equal(state.bar.height, 52)
+    await assertStableTabStatus('Restored horizontal geometry')
+    await assertTabListStart('Restored horizontal list')
+    const expandedMembers = await run("[...document.querySelectorAll('.workspace-tab-group-member')].map(row=>row.getBoundingClientRect().width)")
+    await run("click('[data-workspace-group]');document.querySelector('.workspace-tabs').getAnimations({subtree:true}).forEach(animation=>{animation.pause();animation.currentTime=100})")
+    const foldingMembers = await run("[...document.querySelectorAll('.workspace-tab-group-member')].map(row=>({width:row.getBoundingClientRect().width,height:row.getBoundingClientRect().height,inert:row.inert}))")
+    assert.ok(foldingMembers.every((row,index)=>row.width>0&&row.width<expandedMembers[index]&&row.height===32&&row.inert), 'Horizontal members retain their folding motion and leave keyboard navigation immediately: ' + JSON.stringify(foldingMembers))
+    await finishMotion()
+    assert.ok(await run("[...document.querySelectorAll('.workspace-tab-group-member')].every(row=>row.getBoundingClientRect().width===0)"), 'Horizontal groups still fold completely')
+    await assertTabGeometry('Folded horizontal geometry')
+    await run("click('[data-workspace-group]')")
+    await finishMotion()
+    assert.match(state.toolHost, /workspace-tabbar/)
+    assert.equal(state.toolsAttribute, null)
+    assert.equal(state.stored.orientation, 'horizontal')
+    const horizontalChrome = await run("(()=>{const bar=getComputedStyle(document.querySelector('.workspace-tabbar')).backgroundColor,view=getComputedStyle(document.querySelector('.workspace-view:not([hidden])')).backgroundColor;return {bar,view}})()")
+    assert.equal(horizontalChrome.bar, terminal.railColor, 'Top tabs use the same chrome color as the rail')
+    assert.notEqual(horizontalChrome.bar, horizontalChrome.view, 'The top bar is darker than the sheet')
+    await capture('horizontal-chrome-light')
+    assert.equal(await run("originalDraft===document.getElementById('draft-pane-a') && originalDraft.value==='Keep this draft'"), true, 'Switching orientation keeps panes mounted')
+    await run('commandB()')
+    assert.equal((await run('inspect()')).stored.collapsed, true, 'Command-B is inactive with top tabs')
+    await run('commandB(true)')
+    await finishMotion()
+    state = await run('inspect()')
+    assert.equal(state.railStrip, 'vertical', 'Command-Shift-B switches back to the side rail')
+    assert.equal(state.collapsed, true, 'The rail keeps its collapsed state across switches')
+    assert.equal(state.stored.orientation, 'vertical')
+
+    await run("split('horizontal','terminal')")
+    await settle()
+    const splitBars = await run('bars()')
+    assert.equal(splitBars.length, 2)
+    for (const bar of splitBars) {
+      assert.deepEqual([bar.top, bar.bottom, bar.border], [0, 40, 'rgba(0, 0, 0, 0)'], 'Side-by-side title bars share the band: ' + JSON.stringify(splitBars))
+      assert.equal(bar.color, splitBars[0].color)
+    }
+    assert.equal(splitBars[0].color, (await run("getComputedStyle(document.querySelector('.vertical-tab-rail')).backgroundColor")), 'Split title bars use the rail chrome')
+    await capture('vertical-split-light')
+    await run('reload()')
+    await finishMotion()
+    state = await run('inspect()')
+    assert.equal(state.collapsed, true, 'The collapsed preference survives reloads')
+    // Reloading the test root remounts every pane once; later checks count from here.
+    const mounted = state.mounts
+    await run("window.originalDraft=document.getElementById('draft-pane-a');originalDraft.value='Keep this draft'")
+    await run("click('.vertical-tab-rail-toggle')")
+    await finishMotion()
+
+    window.webContents.debugger.attach('1.3')
+    const transparencyPreference = value => window.webContents.debugger.sendCommand('Emulation.setEmulatedMedia', {
+      features: [{ name: 'prefers-reduced-transparency', value }],
+    })
+    const assertAccentChrome = async theme => {
+      const accents = [['violet', '#7c3aed'], ['blue', '#2563eb'], ['warm', '#ea580c'], ['green', '#16a34a'], ['black', '#000000'], ['white', '#ffffff']]
+      const nativeColors = new Set(), opaqueColors = new Set()
+      let content
+      for (const [name, accent] of accents) {
+        await run(`document.documentElement.style.setProperty('--alto-theme-accent',${JSON.stringify(accent)})`)
+        await settle()
+        const appearance = await assertCoherence(theme + ': ' + name + ' accent')
+        if (content) assert.deepEqual(appearance.fills, content, theme + ': changing the accent preserves sheet, message, and composer fills')
+        else content = appearance.fills
+        let nativeColor, stateColors
+        for (const orientation of ['vertical', 'horizontal']) {
+          const label = theme + ': ' + name + ' ' + orientation
+          const glass = await material()
+          assertNativeMaterial(glass, label)
+          assert.ok(Math.abs(glass.root.alpha - .2) < .01, label + ': glass keeps 80% native material visible')
+          assert.equal(glass.root.image, 'none', label + ': accent wash adds no gradient')
+          if (nativeColor) assert.deepEqual(glass.root.rgba, nativeColor, label + ': both orientations share one tinted material')
+          else nativeColor = glass.root.rgba
+          nativeColors.add(JSON.stringify(glass.root.rgba))
+          const states = await assertTabsContrast(theme, orientation, '-' + name)
+          if (stateColors) assert.deepEqual(states, stateColors, label + ': accent shares all states in both orientations')
+          stateColors = states
+          await settle()
+          await capture(`accent-${theme}-${orientation}-${name}`)
+          await transparencyPreference('reduce')
+          const reduced = await material()
+          assertOpaqueChrome(reduced, label + ': reduced transparency')
+          assert.deepEqual(reduced.root.rgba, appearance.chrome, label + ': opaque chrome uses the shared accent surface, including the dark alias')
+          opaqueColors.add(JSON.stringify(reduced.root.rgba))
+          await transparencyPreference('no-preference')
+          await run("document.documentElement.dataset.desktopPlatform='linux'")
+          const nonmac = await material()
+          assertOpaqueChrome(nonmac, label + ': nonmac fallback')
+          assert.deepEqual(nonmac.root.rgba, reduced.root.rgba, label + ': nonmac and reduced-transparency chrome agree')
+          await run("document.documentElement.dataset.desktopPlatform='darwin';commandB(true)")
+          await finishMotion()
+        }
+      }
+      assert.equal(nativeColors.size, accents.length, theme + ': every accent recolors the glass')
+      assert.equal(opaqueColors.size, accents.length, theme + ': every accent recolors opaque chrome')
+      await run("document.documentElement.style.removeProperty('--alto-theme-accent')")
+      await settle()
+    }
+    await transparencyPreference('no-preference')
+    const appearanceByTheme = new Map()
+    for (const theme of ['light', 'dark']) {
+      await run(`Object.assign(document.documentElement.dataset,{altoTheme:'${theme}',desktopPlatform:'darwin',altoThemePlugin:'active',altoChromeTheme:'alto'})`)
+      for (const width of [1200, 600]) {
+        window.setContentSize(width, 760)
+        await settle()
+        await finishMotion()
+        state = await run('inspect()')
+        assert.ok(state.scroll <= width, JSON.stringify({ width, scroll: state.scroll }))
+        assert.equal(state.bar, undefined)
+        assert.equal(state.toolHost, 'vertical-tab-rail-footer')
+        if (width === 600) {
+          assert.equal(state.collapsed, true, 'Narrow workspaces show an icon-only rail')
+          assert.equal(state.toggle, false)
+          assert.equal(state.rail.width, 76, 'The macOS icon rail clears the window buttons')
+          assert.ok(state.tool.left >= state.rail.left && state.tool.right <= state.rail.right, JSON.stringify(state.tool))
+          assert.ok(state.views.width >= 520, JSON.stringify(state.views))
+        } else {
+          assert.equal(state.collapsed, false)
+          // Back and forward sit clear of the window buttons, centered on their row.
+          const arrows = await run("[...document.querySelectorAll('.vertical-tab-rail-header .workspace-history-controls > button')].map(button=>{const r=button.getBoundingClientRect();return {left:r.left,center:r.top+r.height/2}})")
+          assert.equal(arrows[0].left, 96, theme + ': back clears the window buttons ' + JSON.stringify(arrows))
+          assert.deepEqual(arrows.map(arrow => arrow.center), [21, 21], theme + ': arrows align with the window buttons')
+          assert.equal((await run("document.querySelector('.vertical-tab-rail-header').getBoundingClientRect().height")), 40, 'The rail header keeps the band height')
+        }
+        assertNativeMaterial(await material(), theme + ' at ' + width + 'px');
+        await assertTabListStart(theme + ': vertical list at ' + width + 'px')
+        let verticalColors
+        if (width === 1200) {
+          if(theme==='light')await assertScrollableTabList('Expanded native tab list','vertical-scroll-light-1200')
+          await transparencyPreference('reduce')
+          await settle()
+          await assertTabListStart(theme + ': expanded reduced-transparency list')
+          await transparencyPreference('no-preference')
+          await settle()
+          verticalColors = await assertTabsContrast(theme, 'vertical')
+          await assertMaterialPixels(theme + ': side-by-side panes')
+        }
+        await run('commandB(true)')
+        await finishMotion()
+        assertNativeMaterial(await material(), theme + ': horizontal tabs share the material')
+        const horizontalState = await run('inspect()')
+        assert.ok(horizontalState.scroll <= width, theme + ': horizontal tabs stay within ' + width + 'px')
+        assert.ok(horizontalState.tool.right <= width, theme + ': horizontal tools stay visible')
+        if (width === 1200) {
+          const horizontalColors = await assertTabsContrast(theme, 'horizontal')
+          assert.deepEqual(horizontalColors, verticalColors, theme + ': both orientations share all tab colors and state fills')
+          appearanceByTheme.set(theme, horizontalColors)
+          await window.webContents.debugger.sendCommand('Emulation.setEmulatedMedia', { features: [{ name: 'prefers-reduced-transparency', value: 'no-preference' }, { name: 'prefers-reduced-motion', value: 'reduce' }] })
+          assert.equal(await run("getComputedStyle(document.querySelector('.workspace-tab-group-label')).transitionProperty"), 'none', 'Reduced motion disables horizontal group label transitions')
+          await transparencyPreference('no-preference')
+        }
+        await capture(`horizontal-${theme}-${width}`)
+        await run('commandB(true)')
+        await finishMotion()
+        assertNativeMaterial(await material(), theme + ': switching back to vertical')
+        await capture(`vertical-${theme}-${width}`)
+      }
+      await transparencyPreference('reduce')
+      await settle()
+      assert.equal(await run("matchMedia('(prefers-reduced-transparency: reduce)').matches"), true)
+      assertOpaqueChrome(await material(), theme + ': reduced transparency')
+      await transparencyPreference('no-preference')
+      await settle()
+      assertNativeMaterial(await material(), theme + ': restored transparency preference')
+      await run("document.documentElement.dataset.desktopPlatform='linux'")
+      assertOpaqueChrome(await material(), theme + ': nonmac fallback')
+      await run("document.documentElement.dataset.desktopPlatform='darwin'")
+    }
+    window.setContentSize(1200, 760)
+    await settle()
+    await finishMotion()
+
+    // Preview actual editing UI without replacing or remounting any pane renderer.
+    for (const theme of ['light', 'dark']) {
+      window.setBackgroundColor(theme === 'light' ? '#aaabb1' : '#22242a')
+      await run(`document.documentElement.dataset.altoTheme='${theme}';click('[data-workspace-tab=a]');mountPreview()`)
+      await assertAccentChrome(theme)
+      for (const width of [1200, 600]) {
+        window.setContentSize(width, 760)
+        await settle()
+        await finishMotion()
+        for (const orientation of ['vertical', 'horizontal']) {
+          const label = `coherence-${theme}-${orientation}-${width}`
+          await capture(label)
+          await assertCoherence(label)
+          assertReadableTabs(await readTabsContrast(theme, orientation), label)
+          if (theme === 'light' && width === 1200 && orientation === 'vertical') {
+            await run("window.coherenceEditor=document.querySelector('[data-cordis-composer-editor]');coherenceEditor.focus();document.execCommand('insertText',false,' A retained draft.');window.editorSelection={node:getSelection().anchorNode,offset:getSelection().anchorOffset,text:coherenceEditor.textContent};disableAppearance();enableAppearance()")
+            await settle()
+            assert.equal(await run("coherenceEditor===document.querySelector('[data-cordis-composer-editor]') && document.activeElement===coherenceEditor && getSelection().anchorNode===editorSelection.node && getSelection().anchorOffset===editorSelection.offset && coherenceEditor.textContent===editorSelection.text"), true, 'Style changes retain the real editor, focus, draft, and caret')
+            await run('coherenceEditor.blur()')
+          }
+          await run('commandB(true)')
+          await finishMotion()
+        }
+      }
+      await run('unmountPreview()')
+      window.setContentSize(1200, 760)
+      await run("click('[data-workspace-tab=c]');mountPreview()")
+      await settle()
+      await finishMotion()
+      await capture(`coherence-${theme}-vertical-split`)
+      await assertCoherence(theme + ': chat beside a typed terminal pane')
+      await run('unmountPreview()')
+      assert.equal((await run('inspect()')).mounts, mounted, 'Content previews and appearance changes preserve pane mounts')
+      assert.equal(await run("originalDraft===document.getElementById('draft-pane-a') && originalDraft.value==='Keep this draft'"), true, 'The original pane draft remains mounted behind the preview')
+    }
+
+    // The same sheet must work when either a headerless or terminal-style
+    // pane leads it, including a lower split promoted to full screen.
+    for (const tab of ['e', 'a']) {
+      await run(`click('[data-workspace-tab=${tab}]')`)
+      await settle()
+      assertNativeMaterial(await material(), tab + ': full-size pane')
+      await assertMaterialPixels(tab + ': full-size pane')
+      if (tab === 'e') await assertHeaderControls('dark')
+    }
+    await run("click('[data-workspace-tab=c]');window.materialSplit=document.querySelector('.workspace-view:not([hidden]) > .workspace-split');materialSplit.classList.replace('workspace-split-horizontal','workspace-split-vertical')")
+    await settle()
+    await finishMotion()
+    await assertMaterialPixels('Vertical split keeps its lower header opaque')
+    assertReadableTabs(await readTabsContrast('dark', 'vertical'), 'Lower split keeps its content ink')
+    await run("materialSplit.classList.add('is-fullscreen-second')")
+    await settle()
+    await finishMotion()
+    await capture('vertical-native-fullscreen-second')
+    await assertMaterialPixels('A full-screen lower pane joins the title band')
+    assertReadableTabs(await readTabsContrast('dark', 'vertical'), 'Promoted lower header joins the chrome ink')
+    await run("materialSplit.classList.remove('is-fullscreen-second');materialSplit.classList.replace('workspace-split-vertical','workspace-split-horizontal')")
+    await settle()
+    await run("document.documentElement.dataset.sidebarMode='pinned'")
+    await finishMotion()
+    await assertMaterialPixels('Pinned sidebar gutter')
+    await run("delete document.documentElement.dataset.sidebarMode")
+    await finishMotion()
+
+    await run('disableVertical()')
+    await settle()
+    await finishMotion()
+    state = await run('inspect()')
+    assert.equal(state.headerStrip, true, 'Disabling the fiber restores the top tabs')
+    assert.equal(state.railStrip, undefined)
+    assert.equal(state.bar.height, 52, 'Disabling the fiber restores the top bar')
+    assert.match(state.toolHost, /workspace-tabbar/, 'Tools return to the top bar')
+    assert.equal(state.toolsAttribute, null)
+    assert.equal(state.railEnd, '')
+    await run('commandB()')
+    assert.equal((await run('inspect()')).railStrip, undefined, 'Command-B is released with the fiber')
+    assert.equal(state.tabs.some(tab => tab.icon), false)
+    assert.equal(await run("!!document.querySelector('[data-plugin-style=vertical-tabs]')"), false)
+    assert.equal(await run("!!document.querySelector('[data-plugin-style=workspace-tabs-appearance]')"), true, 'Shared appearance outlives the vertical fiber')
+    assertNativeMaterial(await material(), 'Disabling the vertical fiber retains the shared material')
+    assert.deepEqual(await assertTabsContrast('dark', 'horizontal', '-vertical-disabled'), appearanceByTheme.get('dark'), 'Disabling vertical tabs retains the horizontal tab appearance')
+    assert.equal(state.mounts, mounted)
+    assert.equal(await run("originalDraft===document.getElementById('draft-pane-a') && originalDraft.value==='Keep this draft'"), true)
+
+    await run('disableGroups();enableVertical()')
+    await finishMotion()
+    state = await run('inspect()')
+    assert.equal(state.railStrip, 'vertical', 'The default strip also renders vertically')
+    await run("drop('[data-workspace-tab=e]','[data-workspace-tab=a]',0.1)")
+    assert.equal((await run('inspect()')).saved.views[0].id, 'e')
+    assert.equal((await run('inspect()')).mounts, mounted)
+    await run('disableMaterial()')
+    await settle()
+    assertOpaqueChrome(await material(), 'Disabling material restores opaque chrome while vertical tabs stay active')
+    assert.equal(await run("!!document.querySelector('[data-plugin-style=workspace-material]')"), false)
+    assert.equal((await run('inspect()')).mounts, mounted, 'Changing material does not remount panes')
+
+    // Scrollback adds its own high-specificity feed insets. Exercise every chat
+    // in the real split tree, including centered columns and hidden minimaps.
+    await run("enableMaterial();document.documentElement.dataset.altoTheme='light';click('[data-workspace-tab=d]')")
+    for (const shape of ['side-by-side', 'stacked', 'unequal', 'nested']) {
+      await run(`split('${shape === 'stacked' ? 'vertical' : 'horizontal'}','test')`)
+      if (shape === 'unequal') await run("document.querySelector('.workspace-view:not([hidden]) .workspace-split-divider').focus();for(let i=0;i<4;i++)key('ArrowLeft')")
+      if (shape === 'nested') await run("split('vertical','test')")
+      await run('mountPreview(true)')
+      const paneMounts = (await run('inspect()')).mounts
+      for (const width of [2000, 1200, 600]) {
+        window.setContentSize(width, 760)
+        await settle()
+        await finishMotion()
+        for (const orientation of ['vertical', 'horizontal']) {
+          assert.equal(await run("document.querySelector('.workspace-tabs').getAttribute('aria-orientation')"), orientation)
+          const label = `alignment-${shape}-${orientation}-${width}`
+          const panes = await assertPaneAlignments(label, shape === 'nested' ? 3 : 2)
+          if (shape === 'unequal') assert.ok(Math.abs(panes[0].pane.width - panes[1].pane.width) > 20, label + ': the resized panes have different available widths')
+          if (shape === 'nested') assert.ok(panes[1].pane.top < panes[2].pane.top && panes[0].pane.left < panes[1].pane.left, label + ': both rows of the nested branch are present')
+          if ((shape === 'side-by-side' && width === 2000) || (shape === 'nested' && width === 600 && orientation === 'vertical')) await capture(label)
+          await run('commandB(true)')
+          await finishMotion()
+        }
+      }
+      await run('unmountPreview()')
+      assert.equal((await run('inspect()')).mounts, paneMounts, shape + ': alignment checks retain every original pane renderer')
+      await run('closePane()')
+      if (shape === 'nested') await run('closePane()')
+    }
+    assert.equal(await run("originalDraft===document.getElementById('draft-pane-a') && originalDraft.value==='Keep this draft'"), true, 'Split alignment checks retain the original draft')
+    await run('teardown()')
+    console.log('Vertical tab browser checks passed')
+  } finally {
+    if (window.webContents.debugger.isAttached()) window.webContents.debugger.detach()
+    window.destroy()
+    await new Promise(resolve => server.close(resolve))
+  }
+}
+check().then(() => app.quit()).catch(error => { console.error(error); app.exit(1) })
diff --git a/tests/fixtures/viewer-lifetime.cjs b/tests/fixtures/viewer-lifetime.cjs
index 034eea5..5fb2046 100644
--- a/tests/fixtures/viewer-lifetime.cjs
+++ b/tests/fixtures/viewer-lifetime.cjs
@@ -16,10 +16,15 @@ async function check() {
       import sourcePlugin from './program/plugins/source-viewer.client';
       import diffPlugin from './program/plugins/diff-viewer.client';
       import pdfPlugin from './program/plugins/pdf-viewer.client';
+      import appearancePlugin from './program/plugins/interface-appearance.client';
       import {sourceViewerResource} from './program/plugins/source-viewer-api';
       const kinds=new Map(),cleanup=[],root=createRoot(document.getElementById('root'));
       const resources={markdown:'/repo/notes.md',source:sourceViewerResource({path:'/repo/main.ts'}),diff:'review:one',pdf:'/repo/report.pdf'};
       const mounted=new Set(Object.keys(resources));
+      localStorage.setItem('alto.diff-review-comments.v1:review:one',JSON.stringify([{
+        id:'fixture-comment',itemId:'review:one:0:0',path:'main.ts',side:'additions',start:1,end:1,
+        body:'Preserved review comment.',createdAt:'2026-10-28T00:00:00Z',
+      }]));
       let active='home',version=1;
       window.requests=[];window.held=new Set();window.pending=[];window.native=[];
       const response=(method,payload)=>{
@@ -47,7 +52,7 @@ async function check() {
           const record={visible:false,destroyed:false,reloads:0};window.native.push(record);
           return {setVisible:value=>{record.visible=value},setBounds:()=>{},focus:()=>{},destroy:async()=>{record.destroyed=true},perform:async action=>{if(action==='reload')record.reloads++}};
         }}};
-      for(const plugin of [markdownPlugin,sourcePlugin,diffPlugin,pdfPlugin]){const dispose=plugin(ctx);if(dispose)cleanup.push(dispose)}
+      for(const plugin of [appearancePlugin,markdownPlugin,sourcePlugin,diffPlugin,pdfPlugin]){const dispose=plugin(ctx);if(dispose)cleanup.push(dispose)}
       const render=()=>flushSync(()=>root.render(<>
         <nav aria-label="Test workspaces">{['home',...Object.keys(resources)].map(id=><button key={id} onClick={()=>window.switchTo(id)}>{id}</button>)}</nav>
         {active==='home'&&<p>Other workspace</p>}
@@ -139,6 +144,59 @@ async function check() {
     }
     assert.equal(await count('diff-viewer.commits'),2,'Refresh diff should also update the commit choices')
 
+    await run("switchTo('diff')")
+    await until("!!document.querySelector('.diff-review-comment')")
+    // Pierre slots React annotations from the document DOM, so these must use
+    // the app appearance owner rather than the code viewer's shadow CSS.
+    const reviewRoles = {
+      '--ui-surface': '#eef2f6', '--ui-border': '#203f59', '--ui-text': '#203040',
+      '--ui-font': 'monospace', '--ui-size': '14px', '--ui-row-radius': '17px',
+      '--ui-danger': '#96283c', '--ui-focus': '#2b4167',
+    }
+    await run(`for(const [token,value] of Object.entries(${JSON.stringify(reviewRoles)}))document.documentElement.style.setProperty(token,value)`)
+    const annotationAppearance = () => run(`(()=>{
+      const card=document.querySelector('.diff-review-comment'),button=card.querySelector('button');
+      const style=getComputedStyle(card),action=getComputedStyle(button);
+      return {document:card.getRootNode()===document,slot:card.parentElement.slot,body:card.querySelector('p').textContent,
+        surface:style.backgroundColor,border:style.borderColor,text:style.color,font:style.fontFamily,size:style.fontSize,radius:style.borderRadius,
+        danger:button.classList.contains('alto-icon-button')&&button.classList.contains('danger'),
+        actionText:action.color,actionFill:action.backgroundColor,outline:action.outlineColor,outlineWidth:action.outlineWidth};
+    })()`)
+    const annotation = await annotationAppearance()
+    assert.deepEqual({ document: annotation.document, slot: annotation.slot, body: annotation.body }, {
+      document: true, slot: 'annotation-additions-1', body: 'Preserved review comment.',
+    })
+    assert.deepEqual([annotation.surface,annotation.border,annotation.text,annotation.font,annotation.size,annotation.radius],
+      ['rgb(238, 242, 246)','rgb(32, 63, 89)','rgb(32, 48, 64)','monospace','14px','17px'],
+      'Slotted review annotation consumes shared surface, border, text, font, size, and radius roles')
+    assert.equal(annotation.danger,true,'Remove action uses the shared destructive icon primitive')
+    assert.equal(annotation.actionText,'rgb(150, 40, 60)')
+    window.webContents.debugger.attach('1.3')
+    await window.webContents.debugger.sendCommand('DOM.enable')
+    await window.webContents.debugger.sendCommand('CSS.enable')
+    const documentNode = (await window.webContents.debugger.sendCommand('DOM.getDocument')).root.nodeId
+    const { nodeId } = await window.webContents.debugger.sendCommand('DOM.querySelector', { nodeId: documentNode, selector: '.diff-review-comment button' })
+    const forceAction = states => window.webContents.debugger.sendCommand('CSS.forcePseudoState', { nodeId, forcedPseudoClasses: states })
+    await forceAction(['hover'])
+    const hovered = await annotationAppearance()
+    assert.equal(hovered.actionText,annotation.actionText,'Danger ink persists on hover')
+    assert.notEqual(hovered.actionFill,annotation.actionFill,'Shared icon hover is visible')
+    await forceAction(['hover','active'])
+    const pressed = await annotationAppearance()
+    assert.equal(pressed.actionText,annotation.actionText,'Danger ink persists when pressed')
+    assert.notEqual(pressed.actionFill,hovered.actionFill,'Shared icon press is distinct from hover')
+    await forceAction(['focus-visible'])
+    const focused = await annotationAppearance()
+    assert.equal(focused.outline,'rgb(43, 65, 103)','Review action consumes the shared focus role')
+    assert.equal(focused.outlineWidth,'2px')
+    await run("document.querySelector('.diff-review-comment button').disabled=true")
+    await forceAction(['hover','active'])
+    assert.equal((await annotationAppearance()).actionFill,annotation.actionFill,'Disabled review action ignores hover and press')
+    await forceAction([])
+    window.webContents.debugger.detach()
+    await run("document.querySelector('.diff-review-comment button').disabled=false")
+    await run(`for(const token of Object.keys(${JSON.stringify(reviewRoles)}))document.documentElement.style.removeProperty(token)`)
+
     await run("switchTo('markdown');held.add('markdown-viewer.read');changeResource('markdown','/repo/pending.md');switchTo('home')")
     await until("pending.length===1")
     await run("resolveRead('markdown-viewer.read')")
diff --git a/tests/fixtures/workspace-controls.cjs b/tests/fixtures/workspace-controls.cjs
new file mode 100644
index 0000000..732c308
--- /dev/null
+++ b/tests/fixtures/workspace-controls.cjs
@@ -0,0 +1,217 @@
+const { app, BrowserWindow } = require('./background-electron.cjs')
+const { build } = require('esbuild')
+const assert = require('node:assert/strict')
+const fs = require('node:fs/promises')
+const http = require('node:http')
+const path = require('node:path')
+
+async function check() {
+  await app.whenReady()
+  const bundle = await build({
+    stdin: { resolveDir: process.cwd(), sourcefile: 'workspace-controls-check.tsx', loader: 'tsx', contents: `
+      import React,{useState} from 'react';
+      import {createRoot} from 'react-dom/client';
+      import {flushSync} from 'react-dom';
+      import {MoreHorizontal,Pin,Settings,Trash2} from 'lucide-react';
+      import {clientStyles} from './src/client/plugin-api';
+      import appearancePlugin from './program/plugins/interface-appearance.client';
+      import {Composer} from './program/plugins/ui/composer';
+      import {SettingsRow,SettingsSwitch} from './program/plugins/ui/settings';
+      let cleanups=[];
+      const owner={effect:fn=>{const cleanup=fn();if(cleanup)cleanups.push(cleanup)}};
+      window.installAppearance=()=>appearancePlugin({...owner,clientUi:{registerStyle:(owner,id,css)=>owner.effect(()=>{
+        const style=document.createElement('style');style.dataset.pluginStyle=id;style.textContent=css;document.head.append(style);return()=>style.remove();
+      })}});
+      function Preview(){
+        const [pinned,pin]=useState(false),[open,expand]=useState(false),[motion,setMotion]=useState(false),[draft,setDraft]=useState('Keep this draft while the controls change.');
+        return <main className="workspace-layout-root"><div className="workspace-body"><section className="workspace-chat-pane is-focused">
+          <header className={clientStyles.paneHeader+' '+clientStyles.paneToolbar} style={{'--alto-pane-toolbar-end-padding':'var(--space-3)'}}>
+            <div className={clientStyles.toolbarTitle}><span>Workspace controls</span></div>
+            <div className={clientStyles.toolbarActions}>
+              <button id="pin" className={clientStyles.iconButton} aria-label="Pin" aria-pressed={pinned} onClick={()=>pin(!pinned)}><Pin size={16}/></button>
+              <button id="menu" className={clientStyles.iconButton} aria-label="More" aria-haspopup="menu" aria-expanded={open} onClick={()=>expand(!open)}><MoreHorizontal size={16}/></button>
+              <button id="legacy" className="icon-button" aria-label="Settings"><Settings size={16}/></button>
+              <button id="icon-disabled" className={clientStyles.iconButton} aria-label="Unavailable settings" disabled><Settings size={16}/></button>
+            </div>
+          </header>
+          <div className="fixture-content">
+            <h2>Actions</h2><p>Shared controls keep their labels, states, and keyboard focus readable.</p>
+            <div className="fixture-actions">
+              <button id="primary" className={clientStyles.button+' primary'}>Continue</button>
+              <button id="legacy-primary" className="button primary">Approve</button>
+              <button id="secondary" className={clientStyles.button}>Secondary</button>
+              <button id="ghost" className={clientStyles.button+' ghost'}>Cancel</button>
+              <button id="danger" className={clientStyles.button+' ghost danger'}><Trash2 size={14}/>Remove</button>
+              <button id="disabled" className={clientStyles.button+' primary'} disabled>Unavailable</button>
+            </div>
+            <div className={clientStyles.toolbar+' fixture-modes'}><div className={clientStyles.toolbarModes}><button id="mode-selected" className="is-active">Source</button><button>Preview</button></div></div>
+            <section className="project-settings"><form className="project-settings-form" onSubmit={event=>event.preventDefault()}><h3>Project settings</h3><footer>
+              <button id="remove" type="button" className={clientStyles.button+' ghost danger project-settings-remove'}>Remove project</button>
+              <button id="save" className={clientStyles.button+' primary project-settings-save'}>Save</button>
+              <button id="save-disabled" className={clientStyles.button+' primary project-settings-save'} disabled>Saved</button>
+            </footer></form></section>
+            <form className="workspace-creator-form" onSubmit={event=>event.preventDefault()}><h3>New workspace</h3><footer><button id="creator-cancel" className={clientStyles.button+' ghost'} type="button">Cancel</button><button id="creator-primary" className={clientStyles.button+' primary'}>Create workspace</button></footer></form>
+            <SettingsRow label="Reduce motion" description="Use fewer visual effects." role="switch" checked={motion} onClick={()=>setMotion(!motion)}>
+              <SettingsSwitch on={motion}/>
+            </SettingsRow>
+          </div>
+          <div className="workspace-pane-composer"><Composer value={draft} onChange={setDraft} images={[]} attachments={[]} skills={[]} models={[]}
+            permissionMode="full" workspaceLabel="/repo" workspaceOptions={[]} capabilities={[]} placeholder="Let's build" focusHeight={156} maxHeight={180} autoFocus={false}
+            disabled={false} readOnly={false} sending={false} activeTurn={false}
+            onImagesChange={()=>{}} onAttachmentsChange={()=>{}} onAttachFile={async()=>{}}
+            onModelChange={()=>{}} onEffortChange={()=>{}} onPermissionModeChange={()=>{}}
+            onWorkspaceChange={()=>{}} onSubmit={()=>{}} onInterrupt={()=>{}}/></div>
+        </section></div></main>;
+      }
+      const root=createRoot(document.getElementById('root'));flushSync(()=>root.render(<Preview/>));
+      window.click=selector=>flushSync(()=>document.querySelector(selector).click());
+      window.teardown=()=>{flushSync(()=>root.unmount());for(const cleanup of cleanups.reverse())cleanup()};
+      const box=el=>{const r=el.getBoundingClientRect();return {x:r.x,y:r.y,width:r.width,height:r.height,right:r.right,bottom:r.bottom}};
+      window.composerMetrics=()=>{
+        const composer=document.querySelector('.composer'),editor=document.querySelector('[data-cordis-composer-editor]'),cs=getComputedStyle(composer),es=getComputedStyle(editor);
+        return {box:box(composer),radius:cs.borderRadius,padding:cs.padding,editor:{box:box(editor),font:es.fontFamily,size:es.fontSize,weight:es.fontWeight,line:es.lineHeight,tracking:es.letterSpacing,text:editor.textContent},
+          controls:[...composer.querySelectorAll('button')].map(el=>({class:el.className,box:box(el)}))};
+      };
+      window.layout=()=>({width:innerWidth,scroll:document.documentElement.scrollWidth,composer:box(document.querySelector('.composer')),
+        controls:[...document.querySelectorAll('.fixture-actions button,.alto-toolbar-actions button,.alto-toolbar-modes button,.project-settings-form button,.workspace-creator-form button,.settings-row')].map(el=>({id:el.id||el.className,...box(el)})),
+        composerControls:[...document.querySelectorAll('.composer button')].map(box),context:box(document.querySelector('.composer-context-controls')),model:box(document.querySelector('.composer-model-control')),send:box(document.querySelector('.send-button')),
+        row:{radius:getComputedStyle(document.querySelector('.settings-row')).borderRadius,display:getComputedStyle(document.querySelector('.settings-row')).display}});
+      window.samples=selectors=>{
+        const context=document.createElement('canvas').getContext('2d');
+        const rgba=color=>{context.clearRect(0,0,1,1);context.fillStyle=color;context.fillRect(0,0,1,1);const c=[...context.getImageData(0,0,1,1).data];c[3]/=255;return c};
+        const over=(a,b)=>a.slice(0,3).map((v,i)=>v*a[3]+b[i]*(1-a[3])).concat(1);
+        const luminance=c=>c.slice(0,3).map(v=>{v/=255;return v<=.04045?v/12.92:((v+.055)/1.055)**2.4}).reduce((sum,v,i)=>sum+v*[.2126,.7152,.0722][i],0);
+        const contrast=(a,b)=>{const x=luminance(a),y=luminance(b);return (Math.max(x,y)+.05)/(Math.min(x,y)+.05)};
+        return Object.fromEntries(selectors.map(selector=>{
+          const element=document.querySelector(selector),style=getComputedStyle(element),chain=[];
+          for(let node=element;node;node=node.parentElement)chain.unshift(getComputedStyle(node));
+          const background=chain.reduce((bg,s)=>over(rgba(s.backgroundColor),bg),[255,255,255,1]),foreground=rgba(style.color);
+          const outlineBackground=(parseFloat(style.outlineOffset)>=0?chain.slice(0,-1):chain).reduce((bg,s)=>over(rgba(s.backgroundColor),bg),[255,255,255,1]);
+          foreground[3]*=chain.reduce((alpha,s)=>alpha*Number(s.opacity),1);
+          return [selector,{contrast:contrast(over(foreground,background),background),background,color:style.color,fill:style.backgroundColor,border:style.borderColor,
+            outline:style.outlineStyle,outlineWidth:parseFloat(style.outlineWidth),outlineContrast:contrast(over(rgba(style.outlineColor),outlineBackground),outlineBackground),
+            focused:element.matches(':focus-visible'),hovered:element.matches(':hover'),active:element.matches(':active'),opacity:style.opacity,transform:style.transform,filter:style.filter,box:box(element)}];
+        }));
+      };
+    ` },
+    bundle: true, write: false, platform: 'browser', format: 'iife', jsx: 'automatic',
+    loader: { '.css': 'text' }, define: { 'process.env.NODE_ENV': '"production"' },
+  })
+  const css = (await Promise.all(['src/client/styles.css', 'src/client/pane-toolbar.css', 'program/plugins/ui/default.css', 'program/plugins/theme.css', 'program/plugins/workspace-layout.css'].map(file => fs.readFile(file, 'utf8')))).join('\n').replace(/@import[^;]+;/g, '')
+  const server = http.createServer((_request, response) => response.end('<!doctype html><html data-alto-theme="light" data-alto-theme-plugin="active" data-alto-chrome-theme="alto"><style>' + css + '\n#root{height:100vh}.fixture-content{flex:1;min-height:0;overflow:auto;padding:24px}.fixture-actions{display:flex;flex-wrap:wrap;gap:8px}.fixture-content h2{margin:0 0 8px}.fixture-content p{margin:0 0 24px}.fixture-modes{margin-block:12px}.project-settings-form{margin-block:12px}.fixture-content h3{margin:0 0 12px}.project-settings-form footer,.workspace-creator-form footer{flex-wrap:wrap}</style><div id="root" class="shell-kernel"></div></html>'))
+  await new Promise(resolve => server.listen(0, '127.0.0.1', resolve))
+  const win = new BrowserWindow({ show: false, width: 900, height: 800, webPreferences: { offscreen: true, sandbox: true, contextIsolation: true, backgroundThrottling: false } })
+  const run = code => win.webContents.executeJavaScript(code)
+  const settle = () => run('new Promise(resolve=>requestAnimationFrame(()=>requestAnimationFrame(resolve)))')
+  const sample = selectors => run(`samples(${JSON.stringify(selectors)})`)
+  // Rebinding the document between force/clear can leave stale CDP states.
+  let documentNode
+  const nodes = new Map()
+  const force = async (selector, states) => {
+    if (!documentNode) documentNode = (await win.webContents.debugger.sendCommand('DOM.getDocument')).root.nodeId
+    let nodeId = nodes.get(selector)
+    if (!nodeId) {
+      nodeId = (await win.webContents.debugger.sendCommand('DOM.querySelector', { nodeId: documentNode, selector })).nodeId
+      nodes.set(selector, nodeId)
+    }
+    assert.ok(nodeId, 'Missing control: ' + selector)
+    await win.webContents.debugger.sendCommand('CSS.forcePseudoState', { nodeId, forcedPseudoClasses: states })
+  }
+  try {
+    await win.loadURL(`http://127.0.0.1:${server.address().port}`)
+    await run(bundle.outputFiles[0].text)
+    await settle()
+    const original = await run('composerMetrics()'), originalRow = (await run('layout()')).row
+    await run("window.originalEditor=document.querySelector('[data-cordis-composer-editor]');installAppearance()")
+    await settle()
+    // The typography pass intentionally changes action-label widths, while the
+    // editor, outer surface, Send target, and other target heights stay stable.
+    const stableComposer = metrics => ({ ...metrics, controls: metrics.controls.map(control => ({ class: control.class, height: control.box.height, send: control.class.includes('send-button') ? control.box : undefined })) })
+    assert.deepEqual(stableComposer(await run('composerMetrics()')), stableComposer(original), 'Appearance preserves Composer/editor geometry, typography, Send bounds, and control heights')
+    assert.equal(await run("originalEditor===document.querySelector('[data-cordis-composer-editor]')"), true, 'Style installation preserves the draft editor')
+    assert.deepEqual((await run('layout()')).row, originalRow, 'Structured SettingsRow retains its own shape')
+    win.webContents.debugger.attach('1.3')
+    await win.webContents.debugger.sendCommand('DOM.enable')
+    await win.webContents.debugger.sendCommand('CSS.enable')
+    await win.webContents.debugger.sendCommand('Emulation.setFocusEmulationEnabled', { enabled: true })
+    const primary = ['#primary', '#legacy-primary', '#save', '#creator-primary', '.send-button']
+    for (const theme of ['light', 'dark']) {
+      await run(`document.documentElement.dataset.altoTheme=${JSON.stringify(theme)}`)
+      for (const accent of ['#7c3aed', '#16a34a', '#ea580c', '#fff8d6', '#ffffff', '#000000']) {
+        await run(`document.documentElement.style.setProperty('--alto-theme-accent',${JSON.stringify(accent)})`)
+        for (const state of [[], ['hover'], ['hover', 'active']]) {
+          for (const selector of primary) await force(selector, state)
+          const measured = await sample([...primary, '.send-button svg', '#secondary', '#danger', '#remove', '#creator-cancel'])
+          for (const [selector, control] of Object.entries(measured)) {
+            const minimum = selector.includes('send-button') ? 3 : 4.5
+            assert.ok(control.contrast >= minimum, JSON.stringify({ theme, accent, state, selector, ...control }))
+          }
+        }
+        for (const selector of primary) await force(selector, [])
+      }
+      await run("document.documentElement.style.setProperty('--alto-theme-accent','#7c3aed')")
+      for (const selector of ['#disabled', '#icon-disabled', '#save-disabled']) {
+        const before = (await sample([selector]))[selector]
+        await force(selector, ['hover', 'active'])
+        const after = (await sample([selector]))[selector]
+        for (const property of ['color', 'fill', 'border', 'transform', 'filter']) assert.equal(after[property], before[property], theme + ': disabled hover preserves ' + selector + ' ' + property)
+        assert.ok(Number(after.opacity) < 1, theme + ': disabled control stays dim')
+        await force(selector, [])
+      }
+      for (const selector of ['#pin', '#menu']) {
+        const rest = (await sample([selector]))[selector]
+        await run(`click(${JSON.stringify(selector)})`)
+        const selected = (await sample([selector]))[selector]
+        assert.notEqual(selected.fill, rest.fill, theme + ': persistent icon state is visible without hover')
+        await force(selector, ['hover', 'active'])
+        assert.notEqual((await sample([selector]))[selector].fill, selected.fill, theme + ': selected/open icon still gives pressed feedback')
+        await force(selector, [])
+        await win.webContents.debugger.sendCommand('Input.dispatchMouseEvent', { type: 'mouseReleased', button: 'left', buttons: 0, clickCount: 1, x: 1, y: 400 })
+        await win.webContents.debugger.sendCommand('Input.dispatchMouseEvent', { type: 'mouseMoved', x: 1, y: 400 })
+        await settle()
+        const released = (await sample([selector]))[selector]
+        assert.equal(released.fill, selected.fill, theme + ': persistent icon state stays visible ' + JSON.stringify({ selector, released }))
+        await run(`click(${JSON.stringify(selector)})`)
+      }
+      const selectedMode = (await sample(['#mode-selected']))['#mode-selected']
+      await force('#mode-selected', ['hover'])
+      assert.equal((await sample(['#mode-selected']))['#mode-selected'].fill, selectedMode.fill, theme + ': selected mode retains its fill on hover')
+      await force('#mode-selected', ['hover', 'active'])
+      assert.notEqual((await sample(['#mode-selected']))['#mode-selected'].fill, selectedMode.fill, theme + ': selected mode still gives pressed feedback')
+      await force('#mode-selected', [])
+      for (const selector of ['#primary', '#secondary', '#danger', '#save', '#creator-primary', '#creator-cancel', '#pin', '#legacy', '.send-button']) {
+        await force(selector, ['focus', 'focus-visible'])
+        await run(`document.querySelector(${JSON.stringify(selector)}).focus({preventScroll:true})`)
+        const control = (await sample([selector]))[selector]
+        assert.ok(control.focused && control.outline !== 'none' && control.outlineWidth >= 2 && control.outlineContrast >= 3, theme + ': visible keyboard focus ' + JSON.stringify({ selector, ...control }))
+        await run('document.activeElement.blur()')
+        await force(selector, [])
+      }
+      for (const width of [900, 360]) {
+        win.setContentSize(width, 800)
+        await settle()
+        const layout = await run('layout()')
+        assert.ok(layout.scroll <= width, JSON.stringify({ theme, width, layout }))
+        for (const control of [...layout.controls, layout.composer]) assert.ok(control.x >= 0 && control.right <= width, JSON.stringify({ theme, width, control }))
+        for (const control of layout.composerControls) assert.ok(control.x >= layout.composer.x && control.right <= layout.composer.right && control.y >= layout.composer.y && control.bottom <= layout.composer.bottom, JSON.stringify({ theme, width, control, composer: layout.composer }))
+        assert.ok(layout.model.right <= layout.send.x, theme + ': model control stays clear of Send')
+        if (layout.context.y < layout.model.bottom && layout.model.y < layout.context.bottom) assert.ok(layout.context.right <= layout.model.x, theme + ': context and model controls stay separate')
+        await force('#primary', ['hover', 'active'])
+        const pressed = await run('layout()')
+        assert.deepEqual(pressed.controls.filter(control => control.id !== 'primary'), layout.controls.filter(control => control.id !== 'primary'), theme + ': pressing a control does not move its neighbors')
+        await force('#primary', [])
+        if (process.env.ALTO_WORKSPACE_CONTROLS_ARTIFACT_DIR) {
+          await fs.mkdir(process.env.ALTO_WORKSPACE_CONTROLS_ARTIFACT_DIR, { recursive: true })
+          await fs.writeFile(path.join(process.env.ALTO_WORKSPACE_CONTROLS_ARTIFACT_DIR, `controls-${theme}-${width}.png`), (await win.webContents.capturePage()).toPNG())
+        }
+      }
+    }
+    await run('teardown()')
+    console.log('Workspace controls browser checks passed')
+  } finally {
+    if (win.webContents.debugger.isAttached()) win.webContents.debugger.detach()
+    win.destroy()
+    await new Promise(resolve => server.close(resolve))
+  }
+}
+check().then(() => app.quit()).catch(error => { console.error(error); app.exit(1) })
diff --git a/tests/fixtures/workspace-tab-groups.cjs b/tests/fixtures/workspace-tab-groups.cjs
index a4694c5..0c439d6 100644
--- a/tests/fixtures/workspace-tab-groups.cjs
+++ b/tests/fixtures/workspace-tab-groups.cjs
@@ -77,7 +77,7 @@ async function check() {
     bundle: true, write: false, platform: 'browser', format: 'iife', jsx: 'automatic',
     loader: { '.css': 'text' }, define: { 'process.env.NODE_ENV': '"production"' },
   })
-  const css = (await Promise.all(['src/client/styles.css', 'program/plugins/ui/default.css', 'program/plugins/theme.css'].map(file => fs.readFile(file, 'utf8')))).join('\n').replace(/@import[^;]+;/g, '')
+  const css = (await Promise.all(['src/client/styles.css', 'program/plugins/ui/appearance-tokens.css', 'program/plugins/ui/controls.css', 'program/plugins/ui/surfaces.css', 'program/plugins/ui/default.css', 'program/plugins/theme.css'].map(file => fs.readFile(file, 'utf8')))).join('\n').replace(/@import[^;]+;/g, '')
   const server = http.createServer((request, response) => {
     if (request.url.startsWith('/fonts/')) {
       void fs.readFile(path.join('public', decodeURIComponent(request.url))).then(bytes => response.end(bytes)).catch(() => response.end())
diff --git a/tests/fixtures/workspace-tab-switcher.cjs b/tests/fixtures/workspace-tab-switcher.cjs
index 6ca4ed9..d90d4cd 100644
--- a/tests/fixtures/workspace-tab-switcher.cjs
+++ b/tests/fixtures/workspace-tab-switcher.cjs
@@ -35,7 +35,7 @@ async function check() {
     bundle: true, write: false, platform: 'browser', format: 'iife', jsx: 'automatic',
     loader: { '.css': 'text' }, define: { 'process.env.NODE_ENV': '"production"' },
   })
-  const css = (await Promise.all(['src/client/styles.css', 'program/plugins/theme.css', 'program/plugins/thread-status.css'].map(file => fs.readFile(file, 'utf8')))).join('\n').replace(/@import[^;]+;/g, '')
+  const css = (await Promise.all(['src/client/styles.css', 'program/plugins/ui/appearance-tokens.css', 'program/plugins/ui/controls.css', 'program/plugins/ui/surfaces.css', 'program/plugins/theme.css', 'program/plugins/thread-status.css'].map(file => fs.readFile(file, 'utf8')))).join('\n').replace(/@import[^;]+;/g, '')
   const server = http.createServer((_request, response) => response.end('<!doctype html><style>' + css + '</style><body style="background:var(--canvas)"><input id="draft" aria-label="Draft" value="untouched draft"><p>Conversation remains behind the floating switcher.</p><div id="root"></div></body>'))
   await new Promise(resolve => server.listen(0, '127.0.0.1', resolve))
   const window = new BrowserWindow({ show: false, width: 1100, height: 800, webPreferences: { offscreen: true, sandbox: true, contextIsolation: true, backgroundThrottling: false } })
@@ -75,7 +75,7 @@ async function check() {
         assert.equal(metrics.dots, 1)
         assert.equal(metrics.current, true)
         assert.equal(await run("getComputedStyle(document.querySelector('[aria-current=page]')).boxShadow"), 'none')
-        assert.notEqual(metrics.backdrop, 'none')
+        assert.equal(metrics.backdrop, 'none')
         if (process.env.ALTO_SWITCHER_ARTIFACT_DIR) {
           await fs.mkdir(process.env.ALTO_SWITCHER_ARTIFACT_DIR, { recursive: true })
           const screenshot = await window.webContents.capturePage()
diff --git a/tests/hotkeys.test.ts b/tests/hotkeys.test.ts
index 221d758..12b0599 100644
--- a/tests/hotkeys.test.ts
+++ b/tests/hotkeys.test.ts
@@ -32,9 +32,9 @@ describe('hotkeys plugin', () => {
       'utf8',
     )
 
-    expect(css).toMatch(/\.leader-hud\s*\{[^}]*--alto-floating-panel-background:\s*var\(--floating-panel\)/s)
-    expect(css).toMatch(/\.leader-hud\s*\{[^}]*--alto-floating-panel-border:\s*var\(--floating-panel-border\)/s)
-    expect(css).toMatch(/\.leader-hud\s*\{[^}]*--alto-floating-panel-shadow:\s*var\(--floating-panel-shadow\)/s)
+    expect(css).toMatch(/\.leader-hud\s*\{[^}]*--alto-floating-panel-background:\s*var\(--ui-surface\)/s)
+    expect(css).toMatch(/\.leader-hud\s*\{[^}]*--alto-floating-panel-border:\s*var\(--ui-border\)/s)
+    expect(css).toMatch(/\.leader-hud\s*\{[^}]*--alto-floating-panel-shadow:\s*var\(--ui-panel-shadow\)/s)
   })
 
   it('places the leader HUD beside native panes without hiding them', () => {
diff --git a/tests/interface-appearance-browser.test.ts b/tests/interface-appearance-browser.test.ts
new file mode 100644
index 0000000..d4bc389
--- /dev/null
+++ b/tests/interface-appearance-browser.test.ts
@@ -0,0 +1,16 @@
+import { execFile } from 'node:child_process'
+import { createRequire } from 'node:module'
+import path from 'node:path'
+import { promisify } from 'node:util'
+import { expect, it } from 'vitest'
+
+const require = createRequire(import.meta.url)
+
+it.skipIf(process.platform !== 'darwin')('shares appearance roles across real Settings, search, menus, and controls without remounting them', async () => {
+  const env = { ...process.env }
+  delete env.ELECTRON_RUN_AS_NODE
+  const { stdout } = await promisify(execFile)(require('electron') as string, [path.resolve('tests/fixtures/interface-appearance.cjs')], {
+    cwd: process.cwd(), env, timeout: 90_000,
+  })
+  expect(stdout).toContain('Interface appearance browser checks passed')
+}, 95_000)
diff --git a/tests/interface-appearance.test.ts b/tests/interface-appearance.test.ts
new file mode 100644
index 0000000..2b78cbd
--- /dev/null
+++ b/tests/interface-appearance.test.ts
@@ -0,0 +1,21 @@
+import { readFileSync } from 'node:fs'
+import { expect, it } from 'vitest'
+import { entriesOf, parseProgramProfile } from '../src/server/program-profile.js'
+
+it('owns app-wide appearance independently of the replaceable workspace', () => {
+  const profile = parseProgramProfile(readFileSync(new URL('../program/cordis.json', import.meta.url), 'utf8'))
+  const interfaceEntry = profile.plugins.find((entry) => entry.id === 'interface')
+  const appearance = interfaceEntry?.children?.find((entry) => entry.client === 'plugins/interface-appearance.client.ts')
+  expect(appearance).toMatchObject({ enabled: true })
+
+  const withoutWorkspace = {
+    ...profile,
+    plugins: profile.plugins.map((entry) => entry.id === 'interface'
+      ? { ...entry, children: entry.children?.filter((child) => child.id !== 'workspace-layout') ?? [] }
+      : entry),
+  }
+  const remaining = entriesOf(withoutWorkspace).map(({ entry }) => entry)
+  expect(remaining.filter((entry) => entry.client === 'plugins/interface-appearance.client.ts')).toEqual([appearance])
+  expect(remaining.some((entry) => entry.client === 'plugins/ui-surfaces.client.tsx')).toBe(true)
+  expect(remaining.some((entry) => entry.client === 'plugins/search.client.tsx')).toBe(true)
+})
diff --git a/tests/pull-requests.test.ts b/tests/pull-requests.test.ts
index bf71076..99cc723 100644
--- a/tests/pull-requests.test.ts
+++ b/tests/pull-requests.test.ts
@@ -236,16 +236,16 @@ describe('pull request pane presentation', () => {
     expect(client).toContain("event.key !== 'Escape'")
     expect(css).toContain('position: fixed;')
     expect(css).toContain('right: var(--space-3);')
-    expect(css).toContain('.pr-dashboard-toggle[aria-expanded="true"] { color: var(--muted);')
-    expect(css).toContain('.pr-dashboard-toggle { color: var(--muted); }')
+    expect(css).toContain('.pr-dashboard-toggle[aria-expanded="true"] { color: var(--ui-text-strong);')
+    expect(css).toContain('.pr-dashboard-toggle { color: var(--ui-text-secondary); }')
     expect(css).toMatch(/\.pr-dashboard-flyout \{[^}]*height: auto;[^}]*max-height:/)
     expect(css).toMatch(/\.pr-dashboard-scroll \{[^}]*flex: 0 1 auto;[^}]*overflow: auto;/)
     expect(css).toContain('-webkit-line-clamp: 2;')
     expect(css).toMatch(/\.pr-dashboard-row \{[^}]*gap: var\(--space-1\);[^}]*padding: var\(--space-2\) var\(--space-3\);/)
-    expect(css).toContain('--alto-floating-panel-background: var(--sidebar-material);')
+    expect(css).toContain('--alto-floating-panel-background: var(--ui-surface);')
     expect(css).toContain('@media (prefers-reduced-motion: reduce)')
-    expect(css).toContain('font-size: var(--type-body)')
-    expect(css).toContain('border-radius: var(--radius-row)')
+    expect(css).toContain('font-size: var(--ui-size)')
+    expect(css).toContain('border-radius: var(--ui-row-radius)')
     expect(css).toContain('@container (max-width: 340px)')
     expect(css).not.toMatch(/font-size:\s*\d|border-radius:\s*\d|#[\da-f]{3,8}\b/iu)
   })
diff --git a/tests/side-panel-material.test.ts b/tests/side-panel-material.test.ts
index 722eac0..fb73e34 100644
--- a/tests/side-panel-material.test.ts
+++ b/tests/side-panel-material.test.ts
@@ -2,21 +2,26 @@ import { readFile } from 'node:fs/promises'
 import { describe, expect, it } from 'vitest'
 
 describe('side panel material', () => {
-  it('shares translucent fill and blur without changing other floating panels', async () => {
-    const [theme, sidebar, agents, pullRequests] = await Promise.all(
-      ['theme', 'sidebar', 'orchestrator', 'pull-requests'].map((name) =>
+  it('shares panel surface roles while keeping visibility independent of material', async () => {
+    const [theme, sidebar, agents, pullRequests, surfaces] = await Promise.all(
+      ['theme', 'sidebar', 'orchestrator', 'pull-requests', 'ui/surfaces'].map((name) =>
         readFile(new URL(`../program/plugins/${name}.css`, import.meta.url), 'utf8'),
       ),
     )
 
     expect(theme).toContain('--side-panel-background: color-mix(in srgb, var(--sidebar-material) 50%, transparent);')
     expect(theme).toContain('--side-panel-backdrop: blur(32px) saturate(112%);')
-    for (const css of [sidebar, agents]) {
-      expect(css).toContain('var(--side-panel-background, var(--sidebar-material))')
-      expect(css).toContain('var(--side-panel-backdrop, blur(26px) saturate(112%))')
+    expect(sidebar).toContain('background: var(--ui-surface);')
+    for (const css of [agents, pullRequests]) {
+      expect(css).toContain('--alto-floating-panel-background: var(--ui-surface);')
+      expect(css).toContain('--alto-floating-panel-backdrop: none;')
+    }
+    expect(surfaces).toContain('background: var(--ui-surface);')
+    expect(surfaces).toContain('backdrop-filter: none;')
+    for (const css of [sidebar, agents, pullRequests]) {
+      expect(css).not.toContain('--side-panel-')
+      expect(css).toMatch(/opacity:\s*0;[^}]*pointer-events:\s*none;/)
     }
-    expect(pullRequests).toContain('--alto-floating-panel-background: var(--sidebar-material);')
-    expect(pullRequests).not.toContain('--side-panel-')
     expect(sidebar).toMatch(/html\[data-sidebar-mode='pinned'\][\s\S]*?opacity: 1;/)
     expect(agents).toMatch(/\.agents-panel\.is-open\s*\{\s*opacity: 1;/)
   })
diff --git a/tests/vertical-tabs-browser.test.ts b/tests/vertical-tabs-browser.test.ts
new file mode 100644
index 0000000..17c8d76
--- /dev/null
+++ b/tests/vertical-tabs-browser.test.ts
@@ -0,0 +1,45 @@
+import { execFile } from 'node:child_process'
+import { createRequire } from 'node:module'
+import path from 'node:path'
+import { promisify } from 'node:util'
+import { expect, it } from 'vitest'
+import { clampRailWidth, parseVerticalTabPreferences } from '../program/plugins/vertical-tabs.client.js'
+import { createElement } from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { SquareTerminal } from 'lucide-react'
+import { WorkspaceTabIcon } from '../program/plugins/workspace-layout.client.js'
+
+const require = createRequire(import.meta.url)
+
+it('restores bounded vertical tab preferences', () => {
+  expect(parseVerticalTabPreferences(undefined)).toEqual({ orientation: 'vertical', width: 232, collapsed: false })
+  expect(parseVerticalTabPreferences({ orientation: 'horizontal', width: 9000, collapsed: true }))
+    .toEqual({ orientation: 'horizontal', width: 400, collapsed: true })
+  expect(parseVerticalTabPreferences({ orientation: 'diagonal', width: 'wide', collapsed: 'yes' }))
+    .toEqual({ orientation: 'vertical', width: 232, collapsed: false })
+  expect(clampRailWidth(12.4)).toBe(168)
+})
+
+it('marks only non-chat tabs with a pane icon', () => {
+  const view = (kind: string, name = 'alto review') => ({
+    id: 'a', name, workspace: '/repo', focusedPaneId: 'p',
+    root: { type: 'pane' as const, id: 'p', workspace: '/repo', kind },
+  })
+  const kinds = [{ id: 'terminal', label: 'Terminal', icon: SquareTerminal, renderer: () => null }]
+  const chat = renderToStaticMarkup(createElement(WorkspaceTabIcon, { view: view('chat'), kinds }))
+  expect(chat).not.toContain('<svg')
+  expect(chat).toContain('workspace-tab-monogram')
+  expect(chat).toContain('>A</i>')
+  expect(renderToStaticMarkup(createElement(WorkspaceTabIcon, { view: view('chat', ' 🦀 crab'), kinds }))).toContain('>🦀</i>')
+  expect(renderToStaticMarkup(createElement(WorkspaceTabIcon, { view: view('terminal'), kinds }))).toContain('lucide-square-terminal')
+  expect(renderToStaticMarkup(createElement(WorkspaceTabIcon, { view: view('unknown'), kinds }))).toContain('<svg')
+})
+
+it.skipIf(process.platform !== 'darwin')('moves workspace tabs into a side rail without remounting panes', async () => {
+  const env = { ...process.env }
+  delete env.ELECTRON_RUN_AS_NODE
+  const { stdout } = await promisify(execFile)(require('electron') as string, [
+    path.resolve('tests/fixtures/vertical-tabs.cjs'),
+  ], { cwd: process.cwd(), env, timeout: 25_000 })
+  expect(stdout).toContain('Vertical tab browser checks passed')
+}, 30_000)
diff --git a/tests/workspace-controls-browser.test.ts b/tests/workspace-controls-browser.test.ts
new file mode 100644
index 0000000..5c198e1
--- /dev/null
+++ b/tests/workspace-controls-browser.test.ts
@@ -0,0 +1,16 @@
+import { execFile } from 'node:child_process'
+import { createRequire } from 'node:module'
+import path from 'node:path'
+import { promisify } from 'node:util'
+import { expect, it } from 'vitest'
+
+const require = createRequire(import.meta.url)
+
+it.skipIf(process.platform !== 'darwin')('keeps workspace controls readable, stable, and keyboard accessible', async () => {
+  const env = { ...process.env }
+  delete env.ELECTRON_RUN_AS_NODE
+  const { stdout } = await promisify(execFile)(require('electron') as string, [
+    path.resolve('tests/fixtures/workspace-controls.cjs'),
+  ], { cwd: process.cwd(), env, timeout: 20_000 })
+  expect(stdout).toContain('Workspace controls browser checks passed')
+}, 25_000)
diff --git a/tests/workspace-material.test.ts b/tests/workspace-material.test.ts
new file mode 100644
index 0000000..cd7965d
--- /dev/null
+++ b/tests/workspace-material.test.ts
@@ -0,0 +1,178 @@
+import { EventEmitter } from 'node:events'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import type { HarnessContext } from '../src/server/plugin-api.js'
+import workspaceMaterial from '../program/plugins/workspace-material.js'
+
+const { createRequire } = vi.hoisted(() => ({ createRequire: vi.fn() }))
+vi.mock('node:module', () => ({ createRequire }))
+
+class Window extends EventEmitter {
+  destroyed = false
+  title = 'Alto'
+  parent: Window | null = null
+  material: string | null = 'under-window'
+  setVibrancy = vi.fn(function (this: Window, type: string | null, _options?: unknown) {
+    if (this.destroyed) throw new Error('Window is destroyed')
+    this.material = type
+  })
+  isDestroyed(): boolean { return this.destroyed }
+  getTitle(): string { return this.title }
+  getParentWindow(): Window | null { return this.parent }
+  close(): void { this.destroyed = true; this.emit('closed') }
+}
+
+const descriptors = {
+  platform: Object.getOwnPropertyDescriptor(process, 'platform')!,
+  type: Object.getOwnPropertyDescriptor(process, 'type'),
+}
+const app = Object.assign(new EventEmitter(), { getName: () => 'Alto' })
+const getAllWindows = vi.fn<() => Window[]>()
+const requireElectron = vi.fn(() => ({ app, BrowserWindow: { getAllWindows } }))
+const lifetimes: Array<() => void> = []
+
+function install(): () => void {
+  let dispose = () => {}
+  const ctx = { effect: (effect: () => () => void) => { dispose = effect() } }
+  ;(workspaceMaterial as (ctx: HarnessContext) => void)(ctx as unknown as HarnessContext)
+  lifetimes.push(dispose)
+  return dispose
+}
+
+beforeEach(() => {
+  Object.defineProperty(process, 'platform', { configurable: true, value: 'darwin' })
+  Object.defineProperty(process, 'type', { configurable: true, value: 'browser' })
+  createRequire.mockReturnValue(requireElectron)
+  getAllWindows.mockReturnValue([])
+})
+
+afterEach(() => {
+  for (const dispose of lifetimes.splice(0).reverse()) dispose()
+  app.removeAllListeners()
+  vi.clearAllMocks()
+  Object.defineProperty(process, 'platform', descriptors.platform)
+  if (descriptors.type) Object.defineProperty(process, 'type', descriptors.type)
+  else delete (process as unknown as { type?: string }).type
+})
+
+describe('workspace native material lifetime', () => {
+  it('keeps the existing host refreshes on HUD and restores the native method on unload', () => {
+    const target = new Window()
+    const original = target.setVibrancy
+    getAllWindows.mockReturnValue([target])
+    const dispose = install()
+    expect(target.material).toBe('hud')
+
+    // Focus, movement and resizing use this same call in the desktop host.
+    const options = { animationDuration: 100 }
+    target.setVibrancy('under-window', options)
+    expect(original).toHaveBeenLastCalledWith('hud', options)
+    expect(target.material).toBe('hud')
+    target.setVibrancy('sidebar')
+    expect(target.material).toBe('sidebar')
+    target.setVibrancy(null)
+    expect(target.material).toBeNull()
+
+    dispose()
+    expect(target.setVibrancy).toBe(original)
+    expect(target.material).toBe('under-window')
+    expect(app.listenerCount('browser-window-created')).toBe(0)
+    expect(target.listenerCount('closed')).toBe(0)
+    const calls = original.mock.calls.length
+    dispose()
+    expect(original).toHaveBeenCalledTimes(calls)
+  })
+
+  it('covers future Alto windows after construction without touching dialogs or destroyed windows', async () => {
+    const disposed = new Window()
+    disposed.close()
+    const dialog = new Window()
+    dialog.title = 'Settings'
+    const child = new Window()
+    child.parent = new Window()
+    getAllWindows.mockReturnValue([disposed, dialog, child])
+    const dispose = install()
+    for (const target of [disposed, dialog, child]) expect(target.setVibrancy).not.toHaveBeenCalled()
+
+    const target = new Window()
+    target.title = 'Electron'
+    app.emit('browser-window-created', {}, target)
+    target.title = 'Alto'
+    await Promise.resolve()
+    target.setVibrancy('under-window')
+    expect(target.material).toBe('hud')
+    dispose()
+    const later = new Window()
+    app.emit('browser-window-created', {}, later)
+    await Promise.resolve()
+    expect(later.setVibrancy).not.toHaveBeenCalled()
+  })
+
+  it('does not attach a queued future host after its fiber or window has gone away', async () => {
+    const dispose = install()
+    const target = new Window()
+    app.emit('browser-window-created', {}, target)
+    dispose()
+    await Promise.resolve()
+    expect(target.setVibrancy).not.toHaveBeenCalled()
+
+    install()
+    const closed = new Window()
+    app.emit('browser-window-created', {}, closed)
+    closed.close()
+    await Promise.resolve()
+    expect(closed.setVibrancy).not.toHaveBeenCalled()
+  })
+
+  it('leaves a later owner intact and makes its retained wrapper inert after disposal', () => {
+    const target = new Window()
+    const original = target.setVibrancy
+    getAllWindows.mockReturnValue([target])
+    const dispose = install()
+    const ours = target.setVibrancy
+    const later = vi.fn((type: string | null, options?: unknown) => ours(type, options))
+    target.setVibrancy = later as typeof target.setVibrancy
+    dispose()
+    expect(target.setVibrancy).toBe(later)
+    expect(original).not.toHaveBeenCalledWith('under-window')
+    target.setVibrancy('under-window')
+    expect(target.material).toBe('under-window')
+  })
+
+  it('does not let an older fiber override its replacement or keep HUD alive after both unload', () => {
+    const target = new Window()
+    getAllWindows.mockReturnValue([target])
+    const first = install()
+    const second = install()
+    const replacement = target.setVibrancy
+    first()
+    expect(target.setVibrancy).toBe(replacement)
+    target.setVibrancy('under-window')
+    expect(target.material).toBe('hud')
+    second()
+    target.setVibrancy('under-window')
+    expect(target.material).toBe('under-window')
+  })
+
+  it('releases closed hosts and never calls their destroyed native methods', () => {
+    const target = new Window()
+    const original = target.setVibrancy
+    getAllWindows.mockReturnValue([target])
+    const dispose = install()
+    target.close()
+    expect(target.listenerCount('closed')).toBe(0)
+    const calls = original.mock.calls.length
+    expect(() => { target.setVibrancy('under-window'); dispose() }).not.toThrow()
+    expect(original).toHaveBeenCalledTimes(calls)
+  })
+
+  it.each([['darwin', undefined], ['darwin', 'renderer'], ['linux', 'browser'], ['win32', 'browser']])(
+    'does not load Electron in a %s/%s host', (platform, type) => {
+      Object.defineProperty(process, 'platform', { configurable: true, value: platform })
+      Object.defineProperty(process, 'type', { configurable: true, value: type })
+      install()
+      expect(createRequire).not.toHaveBeenCalled()
+      expect(requireElectron).not.toHaveBeenCalled()
+      expect(app.listenerCount('browser-window-created')).toBe(0)
+    },
+  )
+})