diff --git a/.github/workflows/pr-build.yml b/.github/workflows/pr-build.yml
index 1ba4651e8..b6425bfae 100644
--- a/.github/workflows/pr-build.yml
+++ b/.github/workflows/pr-build.yml
@@ -192,6 +192,7 @@ jobs:
           packages/ui/src/lib/model-visibility.test.ts
           packages/ui/src/lib/runtime-env.test.ts
           packages/ui/src/lib/server-meta.test.ts
+          packages/ui/src/lib/theme-scheme.test.ts
           packages/ui/src/lib/trailing-resync.test.ts
           packages/ui/src/stores/abort-created-workspace-cleanup.test.ts
           packages/ui/src/stores/app-session-reconciliation.test.ts
@@ -203,12 +204,14 @@ jobs:
           packages/ui/src/stores/client-state-partitions.test.ts
           packages/ui/src/stores/client-state.test.ts
           packages/ui/src/stores/form-settlements.test.ts
+          packages/ui/src/stores/instance-invalidation.test.ts
           packages/ui/src/stores/message-prompt-display.test.ts
           packages/ui/src/stores/message-v2/instance-store.test.ts
           packages/ui/src/stores/message-v2/message-hydration-authority.test.ts
           packages/ui/src/stores/message-v2/message-status.test.ts
           packages/ui/src/stores/message-v2/message-window.test.ts
           packages/ui/src/stores/message-v2/normalizers.test.ts
+          packages/ui/src/stores/plugin-activation.test.ts
           packages/ui/src/stores/shell-store.test.ts
           packages/ui/src/stores/session-generation-recovery.test.ts
           packages/ui/src/stores/session-pagination.test.ts
diff --git a/AGENTS.md b/AGENTS.md
index d9339d064..076d9fb7a 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -7,8 +7,20 @@
 - Prefer smaller, focused style files (≈150 lines or less) over large monoliths. Split by component or feature area if a file grows beyond that size.
 - Co-locate reusable UI patterns (buttons, selectors, dropdowns, etc.) under `src/styles/components/` and avoid redefining the same utility classes elsewhere.
 - Use the shared `.window-*` primitives from `src/styles/components/window.css` for dialog, popover, and floating-window headers, toolbars, bodies, footers, titles, and actions.
+- Keep agent, model, and thinking controls in the composer footer via `PromptContextControls`; adapt that footer with the named `prompt-composer` container rather than viewport-only breakpoints.
+- Session rows keep actions inline until their measured title, badges, and controls no longer fit. Keep responsive action styles in `styles/components/session-row-actions.css`; hidden inline controls remain measurable but inert, and an open overflow menu stays mounted until dismissal.
+- Session hierarchy geometry lives in `styles/components/session-tree.css`; connector axes follow the parent expander at every depth, including selection mode, RTL and touch layouts.
 - Never use rounded corners in UI styling; keep corners square unless the user explicitly requests otherwise for a specific change.
+- Explicit round exceptions: Yolo and MCP switches (shared `styles/components/switches.css` geometry), overlay drawer navigation buttons, and floating message scroll buttons. Other chrome remains square.
+- Tags and numeric/context/token labels also use rounded geometry via `--chip-radius` (`--pill-radius` is an alias). Register badge variants in `styles/components/badges.css`; use `.badge-shape` for utility-styled labels rather than adding a local radius.
+- The message-content popup and Chat settings share `components/transcript-visibility.ts`; tool presentation metadata lives independently of renderers in `components/tool-call/tool-presentation.ts`. Popup styles live in `styles/components/transcript-filters.css`.
+- Session timeline placement spans the transcript and composer via the session-owned mount; keep its rail layout in `styles/messaging/session-timeline-rail.css` and preserve compact-layout hiding.
 - Document any new styling conventions or directory additions in this file so future changes remain consistent.
+- Soft palette families live in `packages/ui/src/lib/soft-color-schemes.ts`, with references in `dev-docs/PALETTE_SOURCES.md`. Keep selection independent of participant identity, and keep transcript/composer surfaces distinct. Run `palette-quality.test.ts` and inspect real rendered captures when changing palette colors or their token mapping.
+- Palette settings follow the resolved appearance in Auto mode. Keep the picker/actions beside the two-row swatch grid, stacking via the `palette-settings` container at narrow widths. Swatch styles live in `styles/components/theme-scheme-swatches.css`.
+- Appearance mode and the saved light/dark selections are independent (`lib/appearance-preferences.ts`). Message/tool cards use the muted surface, inset output and the composer use the base canvas, and preferences use the same secondary surface as the main panels. Use `--surface-hover-overlay` for a subtle local rollover; preserve selected backgrounds beneath that overlay instead of replacing them with a generic panel color.
+- Right-panel base-canvas button rollover overrides live in `styles/panels/control-hover.css`; do not substitute the secondary surface merely to show hover.
+- Project and right-panel tabs share `components/tab-scroll.tsx` and `styles/components/tab-scroll.css`. Keep their native scrollbar above upright content without mirrored transforms, negative border overlaps or permanent compositing hints. Validate shared scrollbar styling and adjoining edges at fractional zoom in the browser and isolated Electron renderer fixtures (`tests/browser/tab-chrome.test.ts`).
 
 ## Coding Principles
 
diff --git a/DESKTOP_V2_COMPARISON.md b/DESKTOP_V2_COMPARISON.md
index 1ee1c1497..f0f73e6f3 100644
--- a/DESKTOP_V2_COMPARISON.md
+++ b/DESKTOP_V2_COMPARISON.md
@@ -4,9 +4,12 @@
 
 This review compares:
 
-- CodeNomad `DEV-v2` at `dea20996` (2026-09-03).
-- Official OpenCode Desktop V2 from `anomalyco/opencode` branch `upstream/beta` at `eb1ac54d73` (2026-08-25).
-- CodeNomad declares `@opencode-ai/client@beta`; UI and server resolve `beta-18999`, while the runtime CLI version is managed independently.
+- CodeNomad `feat/ui-harmonization` after the `733f5bf9` merge of `DEV-v2` (2026-09-04).
+- The initial official OpenCode Desktop V2 baseline at `eb1ac54d73` (2026-08-25), which produced `beta-18230`.
+- The latest published OpenCode V2 beta source at `c9d240704d6eefc88b63a1eca2cb933b3eb70ed3` (2026-09-04), which produced `beta-19059`.
+- The matching `upstream/beta` head, with no later unpublished contract delta at review time.
+
+CodeNomad declares `@opencode-ai/client@beta`; UI and server resolve `beta-19059`. The independently managed runtime used to verify the compatibility fallback still reports `beta-18999`; startup intentionally has no exact client/runtime version gate.
 
 The official reference is `packages/desktop` for the Electron host, `packages/app` for the shared UI, and the V2 client, protocol, schema, server, and core packages for wire behavior. Older `v2`, `opencode-2-0`, and intermediate `desktop-v2-*` branches are historical, not the current Desktop V2 reference.
 
@@ -16,7 +19,7 @@ This is an incremental review. It does not repeat issues already closed by CodeN
 
 CodeNomad implements the important V2 architecture rather than emulating the V1 desktop model. It uses the native client contract, locations, shared service, sessions, messages, Forms, permissions, providers, Shells, worktrees, and event stream. Its multi-window and cross-host restore implementation is broader than the official Electron-only desktop implementation.
 
-The comparison and subsequent beta-contract audit found concrete CodeNomad defects in pagination, navigation, model projection, inbox delivery, follow behavior, background control, location selectors, and proxy route coverage. Those defects are fixed in the commits accompanying this document. The remaining differences are scoped workflow defects, release hardening, or optional Desktop features. None requires restoring V1 code or replacing native V2 cursors.
+The comparison and subsequent beta-contract audit found concrete CodeNomad defects in pagination, navigation, model projection, inbox delivery, follow behavior, background control, location selectors, plugin readiness, event handling, durable metadata, and proxy route coverage. The accompanying changes close the published-contract defects. The remaining differences are release hardening and optional Desktop workflows. None requires restoring V1 code or replacing native V2 cursors.
 
 ## Closed Findings
 
@@ -46,11 +49,43 @@ The comparison and subsequent beta-contract audit found concrete CodeNomad defec
 
 ### Failed plugin inventory
 
-**Previous behavior:** Metadata projection called `startsWith` on every plugin ID. Current OpenCode V2 can report a failed plugin without an ID, which would break metadata refresh after a client upgrade.
+**Previous behavior:** Metadata projection first assumed every plugin had an ID, then accepted every string ID as active. The current contract permits failed plugins both with and without an ID, so a named failure could be displayed with the same healthy indicator as an active plugin.
+
+**Official behavior:** `PluginInfo` has an optional `id` and a required `state` discriminator whose status is `active` or `failed`.
+
+**Resolution:** CodeNomad projects only non-builtin plugins with a string ID and `state.status === "active"`. Failed records remain available in the native inventory but are no longer represented as healthy in the legacy name-only status list.
+
+### Asynchronous plugin activation
+
+**Previous behavior:** Initial agent, provider, model, command, and plugin reads could run while a Location's configured plugins were still installing or activating. CodeNomad could therefore retain a transiently incomplete catalog until another event forced a refresh.
+
+**Official behavior:** `beta-18999` adds `POST /api/plugin/await-activation`; the official ACP client waits on it before caching a Location catalog. OpenCode also replaces `plugin.added` with the settled `plugin.updated` event.
+
+**Resolution:** The proxy exposes only the non-mutating activation wait, catalog and plugin-status reads wait for it, concurrent waits for one client and Location coalesce, and an unsupported lagging runtime falls back to authoritative reads. `plugin.updated` now refreshes agents, providers, commands, and metadata; the obsolete `plugin.added` branch is removed. `plugin.check`, `plugin.update`, and generic plugin RPC remain blocked.
+
+### Active-location MCP and plugin status
+
+**Previous behavior:** Metadata requests and their loaded-state check used the instance root even when the selected session belonged to a worktree with different `.opencode` configuration.
+
+**Official behavior:** Location-scoped status follows the selected session, and request inputs encode native `workspaceID` values as the wire-level `location[workspace]` selector.
+
+**Resolution:** MCP, plugin activation, and plugin inventory reads now use the active `SessionInfo.location`; metadata readiness is keyed by the location returned from MCP; session switches trigger a new status load; and MCP toggles continue to use that same returned location. Replaced clients and superseded locations cannot commit stale metadata.
+
+### Filesystem list ownership
 
-**Official behavior:** `packages/schema/src/plugin.ts` defines active and failed plugin variants, with an optional ID for failures.
+**Previous behavior:** The proxy authorized the native Location for `fs.list` but did not separately authorize its `path` query. The official contract permits an absolute path or traversal to parents and siblings, so a workspace-scoped caller could ask the shared daemon to list an unrelated directory.
 
-**Resolution:** CodeNomad now accepts only string IDs when projecting its current plugin-name list. An ID-less failed record can no longer prevent project, MCP, and plugin metadata from loading.
+**Official behavior:** `fs.list` keeps the requested Location while resolving its optional path independently; returned entry paths remain relative to that Location.
+
+**Resolution:** CodeNomad resolves relative targets against the authorized Location, rejects duplicate path selectors and targets outside owned worktrees, and translates accepted paths into the shared service namespace for WSL. Parent and sibling browsing remains possible only inside owned worktrees.
+
+### Durable session and message additions
+
+**Previous behavior:** The local session adapter reconstructed `SessionInfo` without its durable JSON `metadata`, `session.created` also dropped that metadata, and the local message-info time shape omitted the new `streamed` boundary. A recovered `session.step.streamed` event alone did not mark an idle local session as working.
+
+**Official behavior:** Published V2 sessions carry optional `SessionMetadata`; assistant messages carry `time.streamed`; `session.step.streamed` and `session.message.content.updated` are native durable events reduced by `@opencode-ai/client/solid`.
+
+**Resolution:** REST and event session projections retain metadata, message projection retains streamed time, a streamed step restores working status after an event gap, and focused tests verify authoritative assistant-content replacement through the generated Solid reducer.
 
 ### Deprecated models
 
@@ -95,15 +130,30 @@ The review reconfirmed these areas and found no current incompatibility:
 
 Service stop removal is intentional: CodeNomad does not own the shared daemon. Upstream session sharing is disabled, so its absence is not a parity gap. Upstream's temporary SSE heartbeat change was reverted and requires no CodeNomad change.
 
-## Remaining Correctness Work
+## Latest Published Beta Audit
 
-### Active-location MCP and plugin status
+The official `anomalyco/opencode-beta` repository published 22 beta tags from `beta-18230` through `beta-19059`. Their GitHub release bodies are empty, so there are no prose release notes to review. This audit instead matched every successful publish workflow to its source commit, read the intervening official commits, compared npm artifacts and generated declarations, and checked the official V2 documentation index and relevant API/client pages.
 
-**Priority:** Medium. **Client upgrade required:** No.
+The final refresh is exact:
+
+- `beta-18866` was built from `519cd8c7712fc2ca6d2ca1d356d7f52cbd6d5808`.
+- `beta-18999` was built from `887f319769c55718e3e64f64b32c9aafb13c5d66`.
+- `beta-19059` was built from `c9d240704d6eefc88b63a1eca2cb933b3eb70ed3`.
+- The ranges contain 114 commits from `beta-18866` to `beta-18999`, then 52 commits to `beta-19059`.
+- The Promise client remains at 136 routes instead of 135: the only added route is `POST /api/plugin/await-activation`.
+- The only added exported types are `PluginAwaitActivationInput` and `PluginAwaitActivationOutput`; `PluginAdded` is removed.
+- `V2Event` removes `plugin.added`; `ConfigEntry.autoupdate?: boolean | "notify"` first becomes `update?: "disable" | "notify" | "auto"`, then `beta-19059` removes the `"auto"` value.
+- `beta-19059` adds optional compaction `model` and `providerState`, the command-config `subagent` flag, and guarded Solid event refreshes with `onError`; it adds no route or exported type name.
+
+CodeNomad consumes the activation boundary and current event/state shapes, preserves the new compaction metadata, logs bounded Solid refresh failures, authorizes the independently resolved filesystem-list target, and avoids falsely marking a parent busy when a command may spawn a background subagent. It has no OpenCode update-setting caller to migrate. Runtime-side fixes—plugin activation stability, session-entry readiness, configuration and symlink watching, abandoned-compaction settlement, provider identity/state preservation, Location retry, command-subagent backgrounding, and Windows interruption—are acquired from the independently updated OpenCode runtime rather than duplicated in CodeNomad. Official App/Desktop/TUI-only navigation, styling, terminal-pane, timeline-detail, and plugin-dialog changes were reviewed as product references, not treated as wire requirements.
 
-`packages/ui/src/lib/hooks/use-instance-metadata.ts` currently queries MCP and plugin state with the instance root. The active session may belong to a worktree or nested location with different `.opencode` configuration. Official Desktop derives the status location from the selected session in `packages/app/src/pages/session.tsx` and `status-popover-body.tsx`.
+### Beta 19059 delta
 
-The CodeNomad metadata request and cache authority should be keyed by the active `SessionInfo.location`, and MCP toggles should use that same location. This needs a focused state change rather than a root fallback patch because switching tabs must not display or mutate another location's MCP state.
+The previously failed publish was rerun successfully on 2026-09-04. The OpenAPI remains at 119 paths, 140 operations, and 229 schemas. The generated Promise surface remains at 136 methods. The full declaration delta from `beta-18999` is the optional compaction model/provider state, command-config `subagent` plus deprecated `subtask`, and removal of the `"auto"` update mode; the Solid helper separately adds connection/disposal guards and `onError` for event-triggered reads.
+
+All 52 intervening commits were classified. Core and client correctness fixes flow through the upgraded client or independently updated runtime. The now-published official Desktop session-import action remains an optional CodeNomad product workflow because the ownership-validated native import route already exists without requiring UI parity. At review time `upstream/beta` points to the same source commit, so there is no unpublished head to represent as shipped behavior.
+
+## Remaining Correctness Work
 
 ### Signed desktop releases
 
@@ -121,10 +171,15 @@ Generated types, proxy routes, events, plugin inventory, Forms, sessions, and re
 
 ## Optional Feature Gaps
 
-These are official Desktop capabilities, not migration blockers:
+These are official Desktop or published native V2 capabilities, not migration blockers:
 
-- **Interactive PTY UI:** CodeNomad proxies native PTY lifecycle routes but has no embedded terminal, connect-ticket WebSocket, resize, reconnect, or restore UI. The existing external terminal action and background Shell panel are not equivalent.
-- **Session export:** Official Desktop paginates and exports a complete session. CodeNomad has no export command or allowlisted export route.
+- **Interactive and persistent PTY UI:** CodeNomad proxies standard PTY lifecycle routes but has no embedded terminal, connect-ticket WebSocket, resize, reconnect, or restore UI. Published `experimental.persistentPty.*` session-terminal routes remain blocked because CodeNomad has no corresponding ownership lifecycle. The external terminal action and background Shell panel are not equivalent.
+- **Session transfer UI:** The ownership-validated `session.import` route is allowlisted, but CodeNomad has no import action. Official Desktop now ships an import action and paginates before exporting a complete session; CodeNomad has no export command or allowlisted export route.
+- **Native session analytics:** `session.stats` can provide server-side activity, model, token, and tool aggregates. CodeNomad has per-session usage presentation but no native statistics dashboard or allowlisted stats route.
+- **Plugin package management:** `plugin.check` and `plugin.update` are not exposed. A future inventory UI can add the read-like check, while executable package updates require an explicit trusted confirmation and mutation policy.
+- **Plugin diagnostics and capabilities:** The current status panel projects active non-builtin plugin names. It does not yet expose failed-plugin errors, sources, update state, or `PluginFeatures`; those require a richer typed inventory UI rather than treating failures as healthy names.
+- **Typed plugin RPC:** Generic RPC remains blocked until CodeNomad intentionally installs a reviewed plugin contract and can authorize each method; exposing the wildcard endpoint would bypass the proxy's narrow capability model.
+- **Review-base and non-Git diffs:** Published `vcs.base` plus committed/base diff inputs can support branch review and arbitrary VCS backends. CodeNomad currently keeps its validated Git status, diff, stage, unstage, and commit boundary.
 - **References and MCP resources:** Official prompt suggestions can attach configured references and MCP resources. CodeNomad's picker currently offers agents, files, and commands only.
 
 Implement these when product scope requires them. They should use the existing native V2 APIs; no compatibility abstraction or V1 fallback is needed.
diff --git a/MIGRATION_V2.md b/MIGRATION_V2.md
index 32b187632..92de3942a 100644
--- a/MIGRATION_V2.md
+++ b/MIGRATION_V2.md
@@ -6,7 +6,7 @@ This branch replaces CodeNomad's OpenCode V1 SDK, custom plugin, and per-workspa
 
 The work grew beyond an SDK swap. It also introduces location-based ownership, native Forms and Shell resources, project-wide session pagination, reconnect reconciliation, bounded virtualized timelines, multi-window desktop state, and a content-addressed restore format.
 
-Server and UI declare `@opencode-ai/client@beta`. The latest published beta is always the source of truth. Refreshing that dependency updates `node_modules` and rewrites `package-lock.json`; the lock is only the generated snapshot of the last dependency resolution, never a compatibility authority. Refresh it before migration audits or builds. It does not constrain the independently managed runtime CLI. The tested 2026-09-03 client and runtime snapshot is `beta-18999`.
+Server and UI declare `@opencode-ai/client@beta`. The latest published beta is always the source of truth. Refreshing that dependency updates `node_modules` and rewrites `package-lock.json`; the lock is only the generated snapshot of the last dependency resolution, never a compatibility authority. Refresh it before migration audits or builds. It does not constrain the independently managed runtime CLI. The 2026-09-04 client snapshot is `beta-19059`; the independently managed runtime used for backward-compatibility validation still reports `beta-18999`.
 
 The incremental comparison with official OpenCode Desktop V2, including closed findings and remaining gaps, is recorded in [`DESKTOP_V2_COMPARISON.md`](DESKTOP_V2_COMPARISON.md).
 
@@ -27,14 +27,15 @@ shared daemon is never stopped by this lifecycle.
 
 - Use native locations and `SessionInfo.location` as the authority for workspace, session, file, event, Shell, PTY, and Git worktree ownership.
 - Use native APIs for projects, sessions, messages, prompts, commands, models, agents, providers, MCP, permissions, Forms, files, VCS, instructions, Shells, and PTYs.
-- Use native session lifecycle and output events, including `session.created`, `session.renamed`, `session.moved`, `session.status`, `session.idle`, `session.execution.*`, `session.compaction.*`, `session.text.*`, `session.reasoning.*`, and `session.tool.*`.
+- Use native session lifecycle and output events, including `session.created`, `session.renamed`, `session.moved`, `session.status`, `session.idle`, `session.execution.*`, `session.compaction.*`, `session.step.streamed`, `session.message.content.updated`, `session.text.*`, `session.reasoning.*`, and `session.tool.*`.
 - Use `@opencode-ai/client/solid` `createData` for live message, tool, permission, and Form projection while preserving REST-loaded history and optimistic local sends.
-- Replace the legacy Question request lifecycle with native Forms. Question tool output rendering remains. The proxy still contains inert legacy Question allowlist entries, but `beta-18866` declares no Question client API and its runtime does not serve those routes.
+- Replace the legacy Question request lifecycle with native Forms. Question tool output rendering remains. The proxy still contains inert legacy Question allowlist entries, but `beta-19059` declares no Question client API and its runtime does not serve those routes.
 - Replace shell-mode prompts with native `session.shell`.
 - Replace CodeNomad background processes with native `shell.*` resources. The Status UI lists, displays bounded output for, and removes Shells; create/output/timeout routes remain available through the ownership-checked proxy. Interactive `pty.*` terminals remain separate.
 - Store voice-mode instructions with `session.instructions.entry` and synchronize them before prompts, commands, and session Shell calls.
 - Inherit native durable JSON `SessionMetadata` directly from `SessionInfo`. Do not widen it to arbitrary `unknown` values or maintain a parallel CodeNomad-only metadata contract.
-- Keep the narrow project-local `codenomad.automation` exception on the V2 `setup` and `tool.transform` contract; it remains active under `beta-18999`.
+- Wait for location-scoped plugin activation before retaining agent, provider, model, command, or plugin catalog reads. Treat `plugin.updated` as the settled catalog invalidation; `plugin.added` no longer exists.
+- Keep the narrow project-local `codenomad.automation` exception on the V2 `setup` and `tool.transform` contract; it remains active under `beta-19059`.
 
 ### Beta 18866 Contract Review (Historical)
 
@@ -49,7 +50,36 @@ The `beta-18414` to `beta-18866` review found these additive client surfaces:
 | `vcs.base` and diff base selection | Deferred read-only candidate. | The current Git Changes UI displays working-tree and index changes and does not yet offer base-branch comparison. |
 | `Service.stop({ pty })` handoff/clear behavior | Do not adopt. | CodeNomad does not own or stop the shared OpenCode service. |
 
-The subsequent refresh to `beta-18999` retained these integrations. Both UI and server resolve the same client version, and the independently managed runtime used for the final native validation also reported `beta-18999`.
+### Beta 18999 Contract Review (Historical)
+
+The 21 official beta releases from `beta-18230` through `beta-18999` have empty GitHub release bodies. The 2026-09-04 review therefore matched official publish workflows to source commits, read the intervening repository history, compared npm tarballs and generated Promise declarations, and checked the official V2 docs instead of relying on nonexistent prose release notes.
+
+The final published range from `beta-18866` (`519cd8c7712fc2ca6d2ca1d356d7f52cbd6d5808`) to `beta-18999` (`887f319769c55718e3e64f64b32c9aafb13c5d66`) contains 114 commits. Its complete generated-contract delta is:
+
+| Published change | CodeNomad decision |
+| --- | --- |
+| Add `POST /api/plugin/await-activation` and its input/output types. | Allowlist only this non-mutating plugin route. Coalesce waits by client and Location before catalog and plugin-status reads, with authoritative reads as the fallback for a lagging runtime. |
+| Remove `PluginAdded` and `plugin.added`. | Delete the obsolete invalidation branch. Refresh agents, providers, commands, and metadata from the settled `plugin.updated` event. |
+| Rename `ConfigEntry.autoupdate` to `update: "disable" \| "notify" \| "auto"`. | No migration is required because CodeNomad has no OpenCode `autoupdate` caller or projection. Runtime CLI updates remain independently managed. |
+
+The same audit reconfirmed the cumulative published additions already in use: native `session.messageUpdate`, durable session metadata, `time.streamed`, `session.step.streamed`, `session.message.content.updated`, current plugin state records, and the generated Solid event reducer. Provider/model canonical resolution and materialized skill text remain upstream runtime concerns; CodeNomad sends native IDs and prompt attachments without duplicating that lowering. Plugin package checks/updates, generic RPC, persistent PTYs, VCS review-base reads, and session transfer UI remain explicit product/security decisions rather than accidental omissions.
+
+### Beta 19059 Contract Review
+
+The successful 2026-09-04 publish from `c9d240704d6eefc88b63a1eca2cb933b3eb70ed3` produced `beta-19059`, the 22nd official beta in the reviewed range. Its release body is also empty. The audit therefore reviewed all 52 commits after `beta-18999`, compared both npm tarballs, refreshed the installed declarations and lock, and compared the official V2 OpenAPI and documentation.
+
+No route or schema was added or removed: the OpenAPI remains at 119 paths, 140 operations, and 229 schemas, while the generated Promise client remains at 136 methods. The complete published client delta that affects CodeNomad is:
+
+| Published change | CodeNomad decision |
+| --- | --- |
+| Completed compaction messages and `session.compaction.ended` now carry optional `model` and `providerState`. | Preserve both fields in normalized compaction parts; the upgraded Solid reducer also retains them for live events. |
+| `createData` fences event-driven refreshes while disconnected or disposed and adds an `onError` callback. | Keep the existing connection signal and route refresh failures through the CodeNomad logger. The lifecycle fencing is inherited from the upgraded client. |
+| Command config adds `subagent`; `subtask` remains as a deprecated alias. | `CommandInfo` exposes neither flag, so the runtime remains authoritative. Command submission stays serialized but no longer marks the parent optimistically busy; native events now distinguish current-session execution from a background child. |
+| `ConfigEntry.update` narrows from `"disable" | "notify" | "auto"` to `"disable" | "notify"`. | No migration is required because CodeNomad does not read or write this setting; update checks moved to CLI/TUI clients and the runtime CLI remains independently managed. |
+
+The renewed OpenAPI review also made explicit that `fs.list` accepts absolute paths and `..` traversal relative to a Location. The CodeNomad proxy now resolves that target, rejects duplicate selectors and paths outside owned worktrees, and translates an accepted path for WSL before forwarding it.
+
+Runtime changes in the same release—settling abandoned compactions before resume, retrying failed Location initialization, disabling plugins after transform failures, backgrounding command subagents, restoring Windows terminal interruption, detecting new ecosystem config roots, and live provider/model fixes—are acquired automatically when the independently managed `opencode2` runtime is updated. CodeNomad does not duplicate those internals and does not reject an older healthy runtime at startup. At the time of this audit `upstream/beta` equals the published `beta-19059` source, so there is no later unpublished contract delta.
 
 ## Shared Service Model
 
@@ -202,11 +232,20 @@ At the 2026-09-03 timeline stabilization head (`dea20996`):
 
 - UI TypeScript typecheck passed.
 - All 68 focused timeline, pagination, request-authority, and restore tests passed.
-- The Tauri release build passed against the `beta-18999` lock.
+- The Tauri release build passed against the `beta-18999` lock; `beta-19059` validation is recorded with the final branch checks.
 - Native Developer Mode validation observed in-place capped-window shifts with no remount or empty frame, same-cycle growth compensation, preserved manual escape, and inactive-tab anchor restoration within 0.3125 px.
 
+At the 2026-09-04 `beta-19059` branch gate:
+
+- The installed UI/server Promise client, protocol, schema, npm metadata, 119 paths, 140 operations, 229 schemas, and 136 Promise methods all resolve to `0.0.0-beta-19059`. The 22 beta publications from `beta-18230` through `beta-19059`, the 52 commits after `beta-18999`, generated declarations, OpenAPI snapshot, official repository head, and V2 documentation were reviewed; no later unpublished contract delta existed.
+- UI, Electron, and server TypeScript typechecks passed. The pure UI suite passed 323 tests, the browser-runtime UI suite passed 148, and the server suite passed 373 with the two expected Windows skips.
+- Desktop resource integrity passed 3 tests, the complete Electron native suite passed, and Tauri passed all 139 Rust tests serially. The 14 cross-host election tests also passed eight consecutive Windows runs after replacing the slow WMI process-identity probe with `Get-Process.StartTime` on both hosts.
+- The production UI build and Tauri release/NSIS build passed. The rebuilt release was relaunched without stopping the shared OpenCode daemon.
+- Native Developer Mode validation covered the `system` palette merge reset, the 14-color custom palette, notification anchoring/outside-click/`Escape` focus restoration, active-composer agent/model/thinking shortcuts, and the responsive/touch layout at `320x800`; document width remained 320 px, all five native menus remained available, and both drawers remained reachable.
+- The independent compatibility runtime still reports `beta-18999`. It exercised the intentional authoritative-read fallback without an exact startup gate; updating that globally managed CLI to `beta-19059` remains independent of this client/build gate.
+
 ## Review Notes
 
 - The generated V2 client remains experimental. Review its current documentation, installed declarations, proxy/API parity, runtime health, and `/api/plugin` failures whenever the beta contract changes. The SDK documentation describes an alternative embedded host; CodeNomad uses the network client.
-- V1-style global plugins are outside the CodeNomad client migration. Under the reviewed V2 contract through `beta-18999`, the installed After Effects, Blender, Microsoft 365, Resolve, Unreal, Ponytail, and Gemini Auth integrations require independent migrations to a V2 definition with an `id` and `setup` or `effect`.
-- Upgrade references: [OpenCode releases](https://github.com/anomalyco/opencode/releases), [OpenCode V2 documentation](https://opencode.ai/v2/docs/), `packages/server/node_modules/@opencode-ai/client/dist/promise/`, and `packages/ui/node_modules/@opencode-ai/client/dist/promise/`.
+- V1-style global plugins are outside the CodeNomad client migration. Under the reviewed V2 contract through `beta-19059`, the installed After Effects, Blender, Microsoft 365, Resolve, Unreal, Ponytail, and Gemini Auth integrations require independent migrations to a V2 definition with an `id` and `setup` or `effect`.
+- Upgrade references: [OpenCode beta releases](https://github.com/anomalyco/opencode-beta/releases), [OpenCode V2 documentation](https://opencode.ai/v2/docs/), `packages/server/node_modules/@opencode-ai/client/dist/promise/`, and `packages/ui/node_modules/@opencode-ai/client/dist/promise/`.
diff --git a/dev-docs/PALETTE_REVIEW_2026-09-08.md b/dev-docs/PALETTE_REVIEW_2026-09-08.md
new file mode 100644
index 000000000..44f869f06
--- /dev/null
+++ b/dev-docs/PALETTE_REVIEW_2026-09-08.md
@@ -0,0 +1,246 @@
+# Palette review — 2026-09-08
+
+## Subsequent user-approved refinements
+
+- Both historical appearances are labeled Classic and lead their respective
+  filtered lists. V1 references are `52f0e629^:packages/ui/src/styles/tokens.css`.
+  Light Classic restores its separate near-white tool and blue-gray code
+  surfaces; dark Classic restores its historical participant colors. Saved
+  custom colors remain intact.
+- YOLO now renders with the palette accent; its redundant editor field is
+  hidden, while legacy stored values remain preserved.
+- Shared header shading uses 75% secondary / 25% base, with chrome aliasing
+  that token. The top title/menu bar uses 25% secondary / 75% base.
+- The timeline stops above composer controls. A single horizontal separator
+  closes it; a chrome-colored blank area remains below it. Composer buttons
+  are flat, flush, separated, and no longer expose bottom container padding.
+- Usage chips and context text have 50% opacity. Message headers use the
+  timeline's role icons, replacing visible You and preceding the agent name.
+- Latest verification: 71 palette/appearance tests rerun successfully, UI
+  typecheck and production build passed. Earlier browser counts below predate
+  these refinements and are not a full regression run of this final state.
+
+## Final surface and appearance follow-up
+
+The historical audit and first implementation below are retained as a record.
+The user's subsequent review supersedes the initial surface mapping and picker
+grouping:
+
+- General starts with appearance settings. Auto / Dark / Light is independent
+  of the saved light and dark palettes. Fixed modes filter the flat palette
+  list; Auto offers both editable slots. Classic is labeled simply Classic.
+- Existing selections migrate without writes or recoloring custom data. The
+  inactive palette, named preset identity and colors survive mode changes and
+  reload. Deleting a preset preserves the selected slot's actual colors.
+- Restore Classic's dev mapping: canvas/composer and inset output `#1A1A1A`,
+  panels `#2A2A2A`, assistant/tool cards `#212529`. The initial implementation
+  incorrectly mapped assistant/tool cards to the panel surface and inset output
+  to the muted surface; merely changing palette hex values could not fix that.
+- All families now use those semantic roles consistently. Preferences content
+  and navigation use the same secondary surface as main panels instead of a
+  darker base canvas/chrome mixture. Palette controls reuse the shared control
+  surface.
+- Chat, session rows, right-panel rows/cards/tabs and preferences navigation
+  share a local 4% text-color hover overlay. Selected backgrounds remain below
+  that overlay; focus outlines and disabled semantics are not replaced by hover.
+  Base-canvas toolbar buttons keep their own canvas instead of jumping to the
+  secondary surface on interaction.
+
+Validation includes pure palette/migration tests, mocked queued storage writes,
+the real Solid appearance editor and ToolCall in independent browser fixtures,
+and native screenshots. The new browser suite checks 17 palettes across 12
+hover targets (204 combinations), mode filtering and persistence. The isolated
+native settings check covers 14 cases, including Auto, reload and LTR/RTL.
+The production UI was rebuilt and copied only to the already-running isolated
+Tauri build. No user draft, shared service or other desktop process was stopped.
+
+Final checks: 228 targeted UI tests, 26 browser tests, and the two appearance
+browser tests rerun after the selected-file hover fix all passed. UI typecheck,
+production build and diff check passed. Native Classic/preferences screenshots
+and idle/hover crops are in `%LOCALAPPDATA%/Temp/opencode/pr667-*-native.png`
+and `pr667-native-rollovers.png`; the 17 browser palette captures are in
+`pr667-surfaces/`. The isolated host remains open on Classic.
+
+The merge reconciliation and previously authorized palette/UI work were pushed
+as `f5d28ead` and `306da15b`; the later appearance/surface refinements are
+published together in the follow-up UI commit.
+
+## Scope and evidence
+
+- Compare `feat/ui-harmonization` at `b11e85c0` with fetched `origin/dev` at `e5115fe8`.
+- Review definitions, derived CSS tokens, palette persistence, editor behavior and tests.
+- Read the isolated validation profile without changing its palette or preferences.
+- `D:\zed` is absent on this machine. Zed preferences are in `%APPDATA%/Zed/settings.json` and select **Ayu Light** / **One Dark**. No theme JSON files were found in the local installation or installed extensions.
+- Reference the official Zed theme JSON at commit `6f73c7d0a4aae8e32afb5d01b0fcb89e5e3642ff`, rather than claiming it is the exact installed binary revision.
+- Additional light-theme references are Zed extensions linked from the official extension registry.
+- This is an audit and proposed correction plan: no palette definitions or user settings were changed during the review.
+
+## Findings
+
+### 0. Flattened dark surface hierarchy — high priority
+
+The review must not reduce the dark-theme regression to accent collisions or similarity between palette swatches. Comparing the actual CSS consumers with `origin/dev` confirms a separate rendering regression:
+
+- In `dev`, `--message-assistant-bg` resolves through `--message-tool-bg` (the dark CSS default is `#212529`). The UI branch replaces it with `surfaceBase`, both in static tokens and in generated palette properties.
+- `.message-item-base` and multiple assistant/reasoning/tool surfaces consume `--message-assistant-bg`. The prompt wrapper and input consume `--surface-base`. They now receive exactly the same background, where `dev` distinguished them. This is a direct cause of darker, flattened message surfaces.
+- The user-message background lost its role tint: `mix(userAccent, surfaceSecondary, …)` became plain `surfaceSecondary`.
+- Tool surfaces now use a generated mix of `surfaceMuted` and `surfaceBase`, while sidebar controls moved from `surfaceSecondary` to a blend towards `surfaceBase`. These changes also need comparison on the rendered application, not independent approval based on their formulas.
+- The three declared surface colors of the inherited Basalt, Fjord, Lichen, Velvet and Ember palettes were not changed by this branch. Their appearance nevertheless changed because the mapping of colors to UI regions changed. Unchanged hex values do **not** demonstrate preserved palette behavior.
+
+**Correction priority:** use `dev` as the baseline for the inherited dark palettes and restore readable separation of conversation, composer, panels and nested blocks. Preserve the user's validated geometry and quiet chrome. Zed references should inform the mapping, not justify replacing established dark palettes or making every surface equally dark. Validate both differentiation *within* each palette and differentiation *between* palettes with matching real screenshots before claiming a fix.
+
+### 1. Introduced semantic collisions — high priority
+
+`packages/ui/src/lib/theme-scheme.ts` now assigns the same color to distinct roles:
+
+| Palette | Colliding roles | Value |
+| --- | --- | --- |
+| Fjord | user / primary accent / Yolo | `#67C9BA` |
+| Lichen | user / primary accent / Yolo | `#A9C47F` |
+| Velvet | agent / primary accent / Yolo | `#E5A77D` |
+| Ember | user / primary accent / Yolo | `#D79A66` |
+| Dawn (new) | user / primary accent / Yolo | `#287DB5` |
+| Parchment (new) | user / primary accent / Yolo | `#0B6678` |
+
+Highlight, focus, selected lists and dropdowns are all derived from `accentPrimary`. Therefore these are real semantic collisions, not just similar swatches. The first four exact user/agent collisions were absent in `dev`. Some older palettes already had perceptually close blue or orange role/accent families, so a blind reset to `dev` is insufficient.
+
+**Correction:** reserve distinct user and agent colors independently of interaction, status, compaction and Yolo colors. Check perceptual similarity as well as exact equality; keep text/icons readable on their actual rendered surfaces.
+
+### 2. Zed reference mapping is incomplete
+
+The added palettes reuse Zed surface/text values but do not preserve all of its role separation:
+
+| CodeNomad ID | Closest direct reference | Exact matching examples |
+| --- | --- | --- |
+| porcelain | One Light | editor `#FAFAFA`, panels `#EBEBEC`, text `#242529` |
+| dawn | Ayu Light | editor `#FCFCFC`, panels `#ECECED`, border `#CFD1D2` |
+| parchment | Gruvbox Light | editor `#FBF1C7`, text `#282828`, accent `#0B6678` |
+
+Some source colors were deliberately darkened for contrast, but that adaptation is not identified in the picker. More importantly, Zed models `element.selected` independently from `text.accent`: One Light uses `#CACACA` versus `#5C78E2`; Ayu Light uses `#CFD0D2` versus `#3B9EE5`. CodeNomad instead synthesizes selection from the accent for every palette. Zed also distinguishes window, panel and editor surfaces more explicitly than the shared derived formulas do.
+
+**Correction:** document the source and mapping for each palette, retain the reference surface character, and make selection independent where the reference requires it. Do not undo the validated tab geometry or restore bright tab fills as a workaround.
+
+### 3. Redundant choices, especially Custom
+
+- `dev` has nine catalog entries; the UI branch has twelve. These counts include System and Custom, not just distinct ready-made palettes.
+- Basalt and default Custom share **all ten core colors**; only three of the four semantic fields differ. On `dev`, they were fully identical, so this duplication predates the latest changes.
+- System Dark, Basalt and Fjord have very close large-area surfaces. Porcelain and Dawn have almost identical neutral surface brightness. The quieter tab and message treatment reduces their remaining visible differences further.
+- Custom is unconditionally listed in `BUILT_IN_COLOR_SCHEMES` and the editor options. The inspected profile has default Custom selected with no named presets or overrides: this entry is not evidence of a user-created duplicate.
+
+**Correction:** present System as an automatic mode and customization as an action, not as additional near-duplicate palettes. Preserve named presets and legacy Custom colors when migrating; never delete user data merely because two palettes look similar.
+
+### 4. Classic editor changes can be saved but ignored — high priority
+
+The UI allows built-in overrides and saves them through `saveColorSchemeOverride()`. However, `applyColorScheme()` skips all derived properties whenever `id === "classic"`, including explicit overrides.
+
+Reproduction with the real normalizer/renderer and a mock target: set Classic's `accentPrimary` to `#FF00FF`; the renderer applies **zero properties** and falls back to static CSS. The exact default Classic rendering can remain protected without discarding an explicit saved override.
+
+### 5. Edited System colors can freeze across appearances
+
+System overrides store one color set, while its appearance remains `system`. The renderer prefers saved colors over its light/dark defaults. Supplying System Light colors and then resolving with `systemDark: true` still applies surface `#F7F8FA`.
+
+**Correction:** either maintain separate light/dark selections for automatic mode or save an edited System appearance as a named fixed palette. Do not silently create a mixed light-palette/dark-mode configuration.
+
+### 6. Current tests do not protect visual identity
+
+The 21 existing palette/preset tests pass. They cover schema, contrast and selected token assignments, but not user/agent collisions, catalog duplicates, Classic overrides, or System overrides across appearances. The editor and preset loader now accept syntactically valid colors without contrast validation. Loading should preserve user data; saving can offer non-destructive warnings instead of rejecting or deleting it.
+
+## Proposed light collection
+
+Start with six named, source-backed light palettes, rather than filling the picker with Soft/Medium/Hard variants of one family:
+
+| Reference | Intended character |
+| --- | --- |
+| One Light | neutral white/gray, clear separation between panels and content |
+| Ayu Light | airy near-white, softer blue-gray text |
+| Catppuccin Latte | cool gray/lavender, mauve accent |
+| Solarized Light | ivory paper, blue-gray text |
+| Gruvbox Light | visibly warm ochre paper and stronger text |
+| Everforest Light | muted paper/olive family; choose one variant after contact-sheet comparison |
+
+Existing light IDs should have a deliberate compatibility mapping; additional entries should not overwrite saved colors. This is a proposed collection, not an assertion that all six are already implemented or visually accepted.
+
+## Validation gate for the correction pass
+
+1. Reproduce and test persistence/rendering defects before changing the catalog.
+2. Keep reference metadata and role mapping together; retain necessary licenses/attribution if copying theme data.
+3. Test role separation, contrast on actual surfaces, palette migration and independent light/dark automatic behavior.
+4. Compare every candidate on the same conversation, sidebar, selected row, prompt and Status panel, in both normal and interaction states.
+5. Test render after selection, editing, save, reload and reset. A correct swatch alone is not enough.
+6. Validate in the isolated UI profile only; do not restart existing desktop hosts or the shared OpenCode service.
+
+## Implementation follow-up
+
+The findings above record the pre-change audit. The subsequent correction pass
+is implemented in the UI worktree and included in PR #667's reconciliation:
+
+- Six soft light palettes: Mist, Slate, Clay, Linen, Iris and Sage.
+- Four soft dark palettes: Mist, Slate, Clay and Sage. Their canvases are
+  mid-dark grays rather than the near-black surfaces of the legacy collection.
+- The existing six dark palettes and original Light remain in an explicitly
+  separate **Original palettes** group. Their declared surface values from
+  `dev` are preserved; participant roles and the surface mapping are corrected.
+- Transcript/message surfaces use the panel surface, not the composer canvas;
+  user messages regain a slight identity tint and tools use the third surface.
+- Neutral selection is independent of user/agent identity. The new families
+  share separate, contrast-tested identity colors per appearance.
+- System is a separate automatic-mode button, not another duplicate palette.
+  Editing it creates a named fixed palette; historical embedded System colors
+  are preserved as a fixed customization instead of mixed light/dark rendering.
+- Default-only Custom is represented by Basalt without rewriting its stored
+  data. Named and genuinely edited custom palettes are kept. There is no empty
+  Custom entry in a clean picker; New remains directly available.
+- Classic edits now reach the renderer. Deleting a named preset retains its
+  current colors and the swatches correctly reflect those retained colors.
+- Palette selection awaits persistence, disables competing edits during the
+  write, and reports save failure rather than hiding it behind optimistic state.
+
+### Review iterations and validation
+
+The initial candidate colors were **not** accepted unchanged. The review
+corrected weak muted-text contrast on tool surfaces, near-identical Mist/Slate
+light surfaces, two dark agent/function collisions, and almost identical
+primary/muted text in Linen and several other light palettes.
+
+- **69 targeted tests passed**: palette definitions/rendering/persistence
+  helpers/quality plus transcript visibility, timeline and drawer regressions.
+- UI typecheck and production build passed; `git diff --check` passed.
+- **17 actual native palette selections and screenshots** were taken in the
+  isolated profile, with separate transcript/composer backgrounds verified for
+  every choice. Tool-header hover and composer focus were exercised for each.
+- The same screenshot sets were compared as contact sheets; full-size views
+  were also reviewed. The six new light families must differ on large-area
+  surfaces alone. Legacy palettes may retain close surfaces differentiated by
+  their established accent; they are not advertised as new soft variants.
+- **14 native settings checks passed**: Classic save/reselect/reload/reset,
+  System light/dark changes, named creation/deletion/retained swatches and
+  420/960px LTR/RTL layout.
+- **8 independent Edge layout cases passed** with the compiled stylesheet:
+  fine/coarse pointer × LTR/RTL × 420/960px. Coarse-pointer controls measured
+  at least 40px. WebView2 touch emulation did not expose a coarse pointer, so
+  these touch measurements are not claimed as native touch-device testing.
+- New labels and group names are present in all ten locales.
+
+New palette definitions and attribution are documented in
+[`PALETTE_SOURCES.md`](./PALETTE_SOURCES.md). Test colors and the temporary named
+test preset were not left in the catalog. Only the isolated build's UI assets
+were refreshed; no desktop executable or shared OpenCode service was restarted.
+
+### Local visual evidence
+
+Artifacts under `%LOCALAPPDATA%/Temp/opencode/`:
+
+- `palette-native-review.json`, `palette-review-<id>.png`
+- `palette-sheet-soft-dark.png`, `palette-sheet-legacy-dark.png`, `palette-sheet-light.png`
+- `palette-controls-native.json`, `palette-touch-report.json`
+- `palette-final-tests.log`, `ui-palettes-build.log`
+
+## Source links
+
+- [Zed One](https://github.com/zed-industries/zed/blob/6f73c7d0a4aae8e32afb5d01b0fcb89e5e3642ff/assets/themes/one/one.json)
+- [Zed Ayu](https://github.com/zed-industries/zed/blob/6f73c7d0a4aae8e32afb5d01b0fcb89e5e3642ff/assets/themes/ayu/ayu.json)
+- [Zed Gruvbox](https://github.com/zed-industries/zed/blob/6f73c7d0a4aae8e32afb5d01b0fcb89e5e3642ff/assets/themes/gruvbox/gruvbox.json)
+- [Catppuccin for Zed](https://github.com/catppuccin/zed/blob/main/themes/catppuccin-mauve.json)
+- [Solarized for Zed](https://github.com/harmtemolder/Solarized.zed/blob/main/themes/solarized.json)
+- [Everforest for Zed](https://github.com/albertsko/zed-everforest/blob/main/themes/everforest-regular.json)
+- [Official Zed extension registry](https://github.com/zed-industries/extensions)
diff --git a/dev-docs/PALETTE_SOURCES.md b/dev-docs/PALETTE_SOURCES.md
new file mode 100644
index 000000000..d6db6aa52
--- /dev/null
+++ b/dev-docs/PALETTE_SOURCES.md
@@ -0,0 +1,74 @@
+# Soft palette sources and adaptation
+
+CodeNomad's soft collection uses its own localized names and semantic roles.
+Appearance mode and the two saved palettes are independent. The picker is flat
+and filters by fixed mode; Auto exposes both slots for editing. Classic retains
+the dev canvas/panel/tool relationship, and all families use the muted surface
+for message/tool cards with base-canvas inset output. Earlier review notes that
+mention grouped palettes or panel-colored assistant cards are superseded.
+These are adaptations, not exact editor-theme ports. No Zed syntax definitions,
+theme loader, extension code, or complete theme JSON is shipped.
+
+| CodeNomad family | Light ID | Dark ID | Visual reference |
+| --- | --- | --- | --- |
+| Mist / Brume | `porcelain` | `mist` | Zed One Light / One Dark |
+| Slate / Ardoise | `dawn` | `slate` | Zed Ayu Light / Ayu Mirage |
+| Clay / Argile | `parchment` | `clay` | Zed Gruvbox, soft earth-gray surfaces |
+| Linen / Lin | `linen` | — | Solarized's paper/gray-green relationship |
+| Iris | `iris` | — | Catppuccin Latte's lavender-gray structure |
+| Sage / Sauge | `sage-light` | `sage` | Everforest Soft's gray-green structure |
+
+The first three light IDs stay stable so saved selections and overrides remain
+addressable. Existing Classic, Basalt, Fjord, Lichen, Velvet and Ember retain
+their declared surface colors from `dev`. Their message surfaces are no longer
+collapsed onto the composer background. Participant identity colors are shared
+within each appearance, and selection uses a neutral surface tint rather than
+borrowing a participant color. Custom colors are never silently recolored.
+
+The soft light canvases are darker than the original editor whites. Dark
+canvases use mid-dark grays instead of near-black. Text is adjusted for at least
+4.5:1 on base, panel, tool and user-message surfaces; participant colors are
+checked at full opacity for at least 3:1. Decorative resting icon opacity is
+unchanged and is not claimed to meet that full-opacity contrast threshold.
+
+## Reference revisions
+
+- Zed One, Ayu and Gruvbox: `zed-industries/zed` commit
+  `6f73c7d0a4aae8e32afb5d01b0fcb89e5e3642ff`, under `assets/themes/`.
+- [Catppuccin for Zed](https://github.com/catppuccin/zed), reviewed 2026-09-08.
+- [Everforest for Zed](https://github.com/albertsko/zed-everforest), reviewed 2026-09-08.
+- [Original Solarized](https://github.com/altercation/solarized), MIT licensed.
+  The GPL Zed Solarized extension was inspected as a visual reference only;
+  none of its code, JSON or color values is included in Linen's definition.
+
+## Theme attribution and MIT notices
+
+The following MIT-licensed references informed the adaptation. Copyright
+notices are retained here; the common permission and warranty text below
+applies to each reference independently.
+
+- One: Copyright (c) 2014 GitHub Inc.
+- Ayu: Copyright (c) 2016 Ike Ku
+- Catppuccin: Copyright (c) 2021 Catppuccin
+- Everforest Zed port: Copyright (c) 2025 Albert Skonieczny
+- Solarized: Copyright (c) 2011 Ethan Schoonover
+- Zed's Gruvbox `LICENSE` contains the literal placeholder notice:
+  `Copyright (c) <YEAR> <COPYRIGHT HOLDER>`.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/dev-docs/SAVED_PALETTE_CALIBRATION_2026-09-11.md b/dev-docs/SAVED_PALETTE_CALIBRATION_2026-09-11.md
new file mode 100644
index 000000000..39aaa6887
--- /dev/null
+++ b/dev-docs/SAVED_PALETTE_CALIBRATION_2026-09-11.md
@@ -0,0 +1,66 @@
+# Saved palette calibration — 2026-09-11
+
+The user requested that built-in defaults reproduce their saved palette edits.
+The 14 built-in overrides were read from the active profile before removing the
+unrelated legacy Custom entry and the named “Iris 2” experiment from that profile.
+Iris uses its saved built-in override, not the Iris 2 experiment. Stable palette
+IDs, appearance slots and the other named presets remain supported.
+
+## Changed defaults
+
+| Palette ID | Saved changes |
+| --- | --- |
+| classic | accentPrimary `#4D7AFE` |
+| mist | accentPrimary `#D0ED9C`, statusSuccess `#81C1A8` |
+| slate | textMuted `#9DB5D2` |
+| clay | surfaceSecondary `#41403E`, surfaceMuted `#55524E`, accentPrimary `#87BC5C`, statusSuccess `#B9BF69`, compactionAccent `#AA91FD` |
+| sage | statusSuccess `#81C182` |
+| fjord | statusSuccess `#8FC473` |
+| ember | accentPrimary `#D99254` |
+| porcelain | compactionAccent `#A07AFF` |
+| dawn | accentPrimary `#7F69E2` |
+| parchment | accentPrimary `#A9BA45` |
+| linen | accentPrimary `#9D8325`, statusSuccess `#699245` |
+| iris | accentPrimary `#6B7CFF` |
+| sage-light | accentPrimary `#6C7FCB` |
+| basalt | userAccent `#88EEFB` |
+
+Other saved fields are retained exactly, including the historical `yoloAccent`
+field; rendered YOLO already follows `accentPrimary`.
+
+## Quality baseline
+
+These are exact saved choices, not contrast-corrected approximations. The strict
+`validateColorSchemeColors` helper is unchanged. Its expected exceptions are
+Porcelain, Dawn, Slate, Parchment, Clay, Linen, Iris and Sage Light. Primary text
+still meets 4.5:1 on all message/tool surfaces. The targeted quality checks bound
+Slate secondary text at 3.99:1, Clay secondary text at 4.02:1 and Porcelain's
+compaction accent at 1.72:1; other identity colors retain the 3:1 check. The saved
+Clay/Sage surface distance is 2.24 OKLab units (bounded at 2.2 rather than 2.5).
+
+## Settings layout
+
+Language comes first. A single Auto/Dark/Light control sets appearance; Auto's
+palette picker follows the resolved system appearance and retains both saved
+selections. A dirty draft stays on its original appearance until saved/discarded.
+The palette picker and actions form one column beside a 7-column, two-row swatch
+grid. Color wells are half their former height (1.375rem); labels remain clickable.
+The layout stacks according to available card width rather than window width.
+
+## Validation and gatekeeper review
+
+- UI typecheck and production build passed.
+- 60 palette/theme tests passed. Emphasis exceptions are scoped to exact
+  palette/field/foreground/background tuples; all other emphasis pairs keep 3:1.
+- Both appearance browser tests passed, covering Auto/system changes, persistence
+  and the 17-palette local-hover matrix.
+- All five tab browser tests passed, including isolated Electron native zoom.
+- 24 layout combinations passed: English/French/Hebrew, 320/375/640/1100px,
+  light/dark. Two swatch rows, 22px wells and no horizontal overflow.
+- The active Tauri profile was checked after restart: both unwanted entries are
+  absent, Auto has one mode selector, and the light/dark selections are retained.
+- Gatekeeper round 1 found a test-protection regression: palette-wide contrast
+  exemptions could hide an unrelated status-color regression. Fixed with exact
+  pair exemptions and checks for all eight emphasis fields.
+- Gatekeeper round 2: **PASS, no actionable findings**. Its in-memory mutation of
+  Slate's error color to its base surface now fails the expected 1:1 contrast check.
diff --git a/dev-docs/TAB_CHROME_REVIEW_2026-09-10.md b/dev-docs/TAB_CHROME_REVIEW_2026-09-10.md
new file mode 100644
index 000000000..f035b4b19
--- /dev/null
+++ b/dev-docs/TAB_CHROME_REVIEW_2026-09-10.md
@@ -0,0 +1,68 @@
+# Tab chrome and zoom review — 2026-09-10
+
+## Cause and correction
+
+Project and right-panel tab strips overrode the shared thin scrollbar with
+`scrollbar-width: auto` and forced `scrollbar-color: auto`. Two `scaleY(-1)`
+transforms moved that scrollbar to the top and restored the text orientation.
+Negative margins, extra one-pixel heights and active-tab cover pseudo-elements
+then attempted to reconnect the strip to its panel. These independently rounded
+and composited layers made fractional zoom fragile.
+
+Both strips now use `components/tab-scroll.tsx`. A native scrollbar above the
+upright tab viewport inherits the common scrollbar style. Scroll offsets are
+synchronized in both directions, including negative RTL offsets. ResizeObserver
+updates the scrollbar extent as tabs or the available width change. The viewport
+retains native wheel/touch and focus scrolling; no custom thumb is painted.
+
+Borders no longer overlap with negative margins or extend via an extra
+active-tab pseudo-element. Each adjoining edge has one owner. The strip baseline
+is painted on its container and the active tab covers it in normal layout.
+Permanent `will-change: transform` is removed; actual drag transforms remain.
+
+## Validation
+
+- Real `InstanceTabs`, `InstanceTab`, and `RightPanel` in deterministic browser
+  fixtures; no calls to a user's backend from these fixtures.
+- Edge: 80/90/100/110/125/150% CSS zoom, DPR 1/1.25/1.5/2, LTR and RTL.
+- Electron 39: real isolated BrowserWindow using native
+  `webContents.setZoomFactor`, the same zoom range, LTR/RTL, Classic dark/light.
+- Tauri: separate copy of the existing release executable/resources, a new
+  configuration profile, and the rebuilt UI. Native WebView2 zoom via
+  `plugin:webview|set_webview_zoom`, the same zoom range, LTR/RTL: 12 cases passed.
+  No existing CodeNomad process or shared OpenCode daemon was stopped/restarted.
+- Assert adjoining tab edges, baseline alignment, shared scrollbar style,
+  scroll-range parity, synchronization, no overflow for a short tab list,
+  native wheel and keyboard selection/reveal, and resize behavior.
+- Full browser suite: 29 tests passed before adding the final sidecar,
+  pointer-reorder and touch cases. UI and Electron typechecks and UI build passed.
+- Final focused suite: all 5 tests passed, including sidecar selection, native
+  pointer reordering and touch layout. The matrix includes 48 zoom/DPI/direction
+  cases in Edge and 24 native zoom/palette/direction cases in Electron.
+
+Local screenshots are in `%LOCALAPPDATA%/Temp/opencode/pr667-tab-zoom/`, including
+native Tauri images and `tauri-native-report.json`. Browser/Electron fixtures
+close only their own test windows. The isolated Tauri test host is left open.
+
+Optional Electron run:
+
+```powershell
+$env:CODENOMAD_TEST_ELECTRON = "$PWD/node_modules/electron/dist/electron.exe"
+$env:CODENOMAD_BROWSER_PATH = 'C:/Program Files (x86)/Microsoft/Edge/Application/msedge.exe'
+node --import tsx --test packages/ui/tests/browser/tab-chrome.test.ts
+```
+
+`CODENOMAD_TAB_SCREENSHOTS` optionally saves the capture matrix.
+`CODENOMAD_TEST_TEMP` optionally selects the Electron test-profile parent.
+
+## Follow-up: phantom overflow at fractional zoom
+
+The first implementation copied integer `scrollWidth` into the scrollbar extent.
+At fractional zoom that could make a fitting lane fractionally wider than its
+viewport. A fitting extent now remains `100%` wide with horizontal overflow
+hidden; genuinely overflowing content keeps its computed fractional CSS width.
+The fitting-tab assertion now runs at every zoom/DPI/direction/palette combination
+in Edge and Electron, not just at the end of each series. All five focused tests,
+UI typecheck and production build passed again. The earlier Tauri test host was
+already closed, so its previous native capture matrix does not validate this
+follow-up; no user window was reloaded for that check.
diff --git a/dev-docs/ui-harmonization-demo/01-classic.png b/dev-docs/ui-harmonization-demo/01-classic.png
new file mode 100644
index 000000000..f452385d8
Binary files /dev/null and b/dev-docs/ui-harmonization-demo/01-classic.png differ
diff --git a/dev-docs/ui-harmonization-demo/02-mist.png b/dev-docs/ui-harmonization-demo/02-mist.png
new file mode 100644
index 000000000..537e05ce5
Binary files /dev/null and b/dev-docs/ui-harmonization-demo/02-mist.png differ
diff --git a/dev-docs/ui-harmonization-demo/03-slate.png b/dev-docs/ui-harmonization-demo/03-slate.png
new file mode 100644
index 000000000..26e4bb069
Binary files /dev/null and b/dev-docs/ui-harmonization-demo/03-slate.png differ
diff --git a/dev-docs/ui-harmonization-demo/04-clay.png b/dev-docs/ui-harmonization-demo/04-clay.png
new file mode 100644
index 000000000..e3a4226e4
Binary files /dev/null and b/dev-docs/ui-harmonization-demo/04-clay.png differ
diff --git a/dev-docs/ui-harmonization-demo/05-sage.png b/dev-docs/ui-harmonization-demo/05-sage.png
new file mode 100644
index 000000000..954ce25cc
Binary files /dev/null and b/dev-docs/ui-harmonization-demo/05-sage.png differ
diff --git a/dev-docs/ui-harmonization-demo/06-basalt.png b/dev-docs/ui-harmonization-demo/06-basalt.png
new file mode 100644
index 000000000..fb523ee68
Binary files /dev/null and b/dev-docs/ui-harmonization-demo/06-basalt.png differ
diff --git a/dev-docs/ui-harmonization-demo/07-fjord.png b/dev-docs/ui-harmonization-demo/07-fjord.png
new file mode 100644
index 000000000..d7b2fdb07
Binary files /dev/null and b/dev-docs/ui-harmonization-demo/07-fjord.png differ
diff --git a/dev-docs/ui-harmonization-demo/08-lichen.png b/dev-docs/ui-harmonization-demo/08-lichen.png
new file mode 100644
index 000000000..684d5e298
Binary files /dev/null and b/dev-docs/ui-harmonization-demo/08-lichen.png differ
diff --git a/dev-docs/ui-harmonization-demo/09-velvet.png b/dev-docs/ui-harmonization-demo/09-velvet.png
new file mode 100644
index 000000000..cb810684c
Binary files /dev/null and b/dev-docs/ui-harmonization-demo/09-velvet.png differ
diff --git a/dev-docs/ui-harmonization-demo/10-ember.png b/dev-docs/ui-harmonization-demo/10-ember.png
new file mode 100644
index 000000000..9bd51975a
Binary files /dev/null and b/dev-docs/ui-harmonization-demo/10-ember.png differ
diff --git a/dev-docs/ui-harmonization-demo/11-light.png b/dev-docs/ui-harmonization-demo/11-light.png
new file mode 100644
index 000000000..bf3f770d7
Binary files /dev/null and b/dev-docs/ui-harmonization-demo/11-light.png differ
diff --git a/dev-docs/ui-harmonization-demo/12-porcelain.png b/dev-docs/ui-harmonization-demo/12-porcelain.png
new file mode 100644
index 000000000..264b39d5e
Binary files /dev/null and b/dev-docs/ui-harmonization-demo/12-porcelain.png differ
diff --git a/dev-docs/ui-harmonization-demo/13-dawn.png b/dev-docs/ui-harmonization-demo/13-dawn.png
new file mode 100644
index 000000000..75b9f14be
Binary files /dev/null and b/dev-docs/ui-harmonization-demo/13-dawn.png differ
diff --git a/dev-docs/ui-harmonization-demo/14-parchment.png b/dev-docs/ui-harmonization-demo/14-parchment.png
new file mode 100644
index 000000000..f62f9d5b3
Binary files /dev/null and b/dev-docs/ui-harmonization-demo/14-parchment.png differ
diff --git a/dev-docs/ui-harmonization-demo/15-linen.png b/dev-docs/ui-harmonization-demo/15-linen.png
new file mode 100644
index 000000000..96af739ee
Binary files /dev/null and b/dev-docs/ui-harmonization-demo/15-linen.png differ
diff --git a/dev-docs/ui-harmonization-demo/16-iris.png b/dev-docs/ui-harmonization-demo/16-iris.png
new file mode 100644
index 000000000..563bffec4
Binary files /dev/null and b/dev-docs/ui-harmonization-demo/16-iris.png differ
diff --git a/dev-docs/ui-harmonization-demo/17-sage-light.png b/dev-docs/ui-harmonization-demo/17-sage-light.png
new file mode 100644
index 000000000..59e44ddb6
Binary files /dev/null and b/dev-docs/ui-harmonization-demo/17-sage-light.png differ
diff --git a/dev-docs/ui-harmonization-demo/README.md b/dev-docs/ui-harmonization-demo/README.md
new file mode 100644
index 000000000..e43bc933f
--- /dev/null
+++ b/dev-docs/ui-harmonization-demo/README.md
@@ -0,0 +1,27 @@
+# UI Harmonisation — palette gallery
+
+17 built-in palettes, captured on **12 September 2026** from the native Tauri
+UI Harmonisation build with UI resources at `bfc07ecd`. English interface,
+five projects open; existing conversations retain their original language.
+
+Click a preview for the original **1584 × 1031 PNG**.
+[Offline gallery](index.html) · [Capture metadata](manifest.json)
+
+## Dark
+
+| | | |
+| --- | --- | --- |
+| **Classic**<br>[<img src="01-classic.png" alt="Classic dark" width="240">](01-classic.png) | **Mist**<br>[<img src="02-mist.png" alt="Mist dark" width="240">](02-mist.png) | **Slate**<br>[<img src="03-slate.png" alt="Slate dark" width="240">](03-slate.png) |
+| **Clay**<br>[<img src="04-clay.png" alt="Clay dark" width="240">](04-clay.png) | **Sage**<br>[<img src="05-sage.png" alt="Sage dark" width="240">](05-sage.png) | **Basalt**<br>[<img src="06-basalt.png" alt="Basalt" width="240">](06-basalt.png) |
+| **Fjord**<br>[<img src="07-fjord.png" alt="Fjord" width="240">](07-fjord.png) | **Lichen**<br>[<img src="08-lichen.png" alt="Lichen" width="240">](08-lichen.png) | **Velvet**<br>[<img src="09-velvet.png" alt="Velvet" width="240">](09-velvet.png) |
+| **Ember**<br>[<img src="10-ember.png" alt="Ember" width="240">](10-ember.png) | | |
+
+## Light
+
+| | | |
+| --- | --- | --- |
+| **Classic**<br>[<img src="11-light.png" alt="Classic light" width="240">](11-light.png) | **Mist**<br>[<img src="12-porcelain.png" alt="Mist light" width="240">](12-porcelain.png) | **Slate**<br>[<img src="13-dawn.png" alt="Slate light" width="240">](13-dawn.png) |
+| **Clay**<br>[<img src="14-parchment.png" alt="Clay light" width="240">](14-parchment.png) | **Linen**<br>[<img src="15-linen.png" alt="Linen" width="240">](15-linen.png) | **Iris**<br>[<img src="16-iris.png" alt="Iris" width="240">](16-iris.png) |
+| **Sage**<br>[<img src="17-sage-light.png" alt="Sage light" width="240">](17-sage-light.png) | | |
+
+These are unretouched workspace captures, not additional test results.
diff --git a/dev-docs/ui-harmonization-demo/index.html b/dev-docs/ui-harmonization-demo/index.html
new file mode 100644
index 000000000..103afa343
--- /dev/null
+++ b/dev-docs/ui-harmonization-demo/index.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="en">
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>CodeNomad — palette gallery</title>
+<style>
+* { box-sizing: border-box }
+body { margin: 24px auto; padding: 0 20px; max-width: 1000px; background: #f3f3f0; color: #202329; font: 14px/1.5 system-ui, sans-serif }
+h1 { font-size: 24px; margin-bottom: 8px }
+h2 { font-size: 18px; margin: 24px 0 12px }
+.palettes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px }
+figure { margin: 0; min-width: 0 }
+img { width: 100%; height: auto; display: block; border: 1px solid #c7c9c8 }
+figcaption { margin-top: 4px; font-weight: 600 }
+a { color: inherit }
+a:focus-visible { outline: 3px solid #0080ff; outline-offset: 3px }
+@media (max-width: 700px) { .palettes { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
+@media (max-width: 450px) { .palettes { grid-template-columns: 1fr } }
+</style>
+<header>
+<h1>CodeNomad · UI Harmonisation</h1>
+<p>17 palettes · English interface · five projects · native Tauri · 12 September 2026</p>
+<p>Click a preview for the original 1584 × 1031 image. <a href="README.md">Capture details</a></p>
+</header>
+<main>
+<h2>Dark</h2>
+<div class="palettes">
+<figure><a href="01-classic.png"><img src="01-classic.png" alt="Classic dark" loading="lazy"></a><figcaption>Classic</figcaption></figure>
+<figure><a href="02-mist.png"><img src="02-mist.png" alt="Mist dark" loading="lazy"></a><figcaption>Mist</figcaption></figure>
+<figure><a href="03-slate.png"><img src="03-slate.png" alt="Slate dark" loading="lazy"></a><figcaption>Slate</figcaption></figure>
+<figure><a href="04-clay.png"><img src="04-clay.png" alt="Clay dark" loading="lazy"></a><figcaption>Clay</figcaption></figure>
+<figure><a href="05-sage.png"><img src="05-sage.png" alt="Sage dark" loading="lazy"></a><figcaption>Sage</figcaption></figure>
+<figure><a href="06-basalt.png"><img src="06-basalt.png" alt="Basalt" loading="lazy"></a><figcaption>Basalt</figcaption></figure>
+<figure><a href="07-fjord.png"><img src="07-fjord.png" alt="Fjord" loading="lazy"></a><figcaption>Fjord</figcaption></figure>
+<figure><a href="08-lichen.png"><img src="08-lichen.png" alt="Lichen" loading="lazy"></a><figcaption>Lichen</figcaption></figure>
+<figure><a href="09-velvet.png"><img src="09-velvet.png" alt="Velvet" loading="lazy"></a><figcaption>Velvet</figcaption></figure>
+<figure><a href="10-ember.png"><img src="10-ember.png" alt="Ember" loading="lazy"></a><figcaption>Ember</figcaption></figure>
+</div>
+<h2>Light</h2>
+<div class="palettes">
+<figure><a href="11-light.png"><img src="11-light.png" alt="Classic light" loading="lazy"></a><figcaption>Classic</figcaption></figure>
+<figure><a href="12-porcelain.png"><img src="12-porcelain.png" alt="Mist light" loading="lazy"></a><figcaption>Mist</figcaption></figure>
+<figure><a href="13-dawn.png"><img src="13-dawn.png" alt="Slate light" loading="lazy"></a><figcaption>Slate</figcaption></figure>
+<figure><a href="14-parchment.png"><img src="14-parchment.png" alt="Clay light" loading="lazy"></a><figcaption>Clay</figcaption></figure>
+<figure><a href="15-linen.png"><img src="15-linen.png" alt="Linen" loading="lazy"></a><figcaption>Linen</figcaption></figure>
+<figure><a href="16-iris.png"><img src="16-iris.png" alt="Iris" loading="lazy"></a><figcaption>Iris</figcaption></figure>
+<figure><a href="17-sage-light.png"><img src="17-sage-light.png" alt="Sage light" loading="lazy"></a><figcaption>Sage</figcaption></figure>
+</div>
+</main>
+</html>
diff --git a/dev-docs/ui-harmonization-demo/manifest.json b/dev-docs/ui-harmonization-demo/manifest.json
new file mode 100644
index 000000000..8e2d7d7d3
--- /dev/null
+++ b/dev-docs/ui-harmonization-demo/manifest.json
@@ -0,0 +1,240 @@
+[
+  {
+    "index": 1,
+    "id": "classic",
+    "name": "Classic",
+    "appearance": "dark",
+    "file": "01-classic.png",
+    "window": "workspace",
+    "size": {
+      "width": 1584,
+      "height": 1031
+    },
+    "capturedAt": "2026-09-12T14:04:48.053Z",
+    "sourceCommit": "bfc07ecd89d75bb943590a18869658a574aced70"
+  },
+  {
+    "index": 2,
+    "id": "mist",
+    "name": "Mist",
+    "appearance": "dark",
+    "file": "02-mist.png",
+    "window": "workspace",
+    "size": {
+      "width": 1584,
+      "height": 1031
+    },
+    "capturedAt": "2026-09-12T14:04:45.492Z",
+    "sourceCommit": "bfc07ecd89d75bb943590a18869658a574aced70"
+  },
+  {
+    "index": 3,
+    "id": "slate",
+    "name": "Slate",
+    "appearance": "dark",
+    "file": "03-slate.png",
+    "window": "workspace",
+    "size": {
+      "width": 1584,
+      "height": 1031
+    },
+    "capturedAt": "2026-09-12T14:03:35.135Z",
+    "sourceCommit": "bfc07ecd89d75bb943590a18869658a574aced70"
+  },
+  {
+    "index": 4,
+    "id": "clay",
+    "name": "Clay",
+    "appearance": "dark",
+    "file": "04-clay.png",
+    "window": "workspace",
+    "size": {
+      "width": 1584,
+      "height": 1031
+    },
+    "capturedAt": "2026-09-12T14:04:51.800Z",
+    "sourceCommit": "bfc07ecd89d75bb943590a18869658a574aced70"
+  },
+  {
+    "index": 5,
+    "id": "sage",
+    "name": "Sage",
+    "appearance": "dark",
+    "file": "05-sage.png",
+    "window": "workspace",
+    "size": {
+      "width": 1584,
+      "height": 1031
+    },
+    "capturedAt": "2026-09-12T14:04:56.464Z",
+    "sourceCommit": "bfc07ecd89d75bb943590a18869658a574aced70"
+  },
+  {
+    "index": 6,
+    "id": "basalt",
+    "name": "Basalt",
+    "appearance": "dark",
+    "file": "06-basalt.png",
+    "window": "workspace",
+    "size": {
+      "width": 1584,
+      "height": 1031
+    },
+    "capturedAt": "2026-09-12T14:05:00.371Z",
+    "sourceCommit": "bfc07ecd89d75bb943590a18869658a574aced70"
+  },
+  {
+    "index": 7,
+    "id": "fjord",
+    "name": "Fjord",
+    "appearance": "dark",
+    "file": "07-fjord.png",
+    "window": "workspace",
+    "size": {
+      "width": 1584,
+      "height": 1031
+    },
+    "capturedAt": "2026-09-12T14:10:14.842Z",
+    "sourceCommit": "bfc07ecd89d75bb943590a18869658a574aced70"
+  },
+  {
+    "index": 8,
+    "id": "lichen",
+    "name": "Lichen",
+    "appearance": "dark",
+    "file": "08-lichen.png",
+    "window": "workspace",
+    "size": {
+      "width": 1584,
+      "height": 1031
+    },
+    "capturedAt": "2026-09-12T14:06:05.896Z",
+    "sourceCommit": "bfc07ecd89d75bb943590a18869658a574aced70"
+  },
+  {
+    "index": 9,
+    "id": "velvet",
+    "name": "Velvet",
+    "appearance": "dark",
+    "file": "09-velvet.png",
+    "window": "workspace",
+    "size": {
+      "width": 1584,
+      "height": 1031
+    },
+    "capturedAt": "2026-09-12T14:06:10.799Z",
+    "sourceCommit": "bfc07ecd89d75bb943590a18869658a574aced70"
+  },
+  {
+    "index": 10,
+    "id": "ember",
+    "name": "Ember",
+    "appearance": "dark",
+    "file": "10-ember.png",
+    "window": "workspace",
+    "size": {
+      "width": 1584,
+      "height": 1031
+    },
+    "capturedAt": "2026-09-12T14:06:14.809Z",
+    "sourceCommit": "bfc07ecd89d75bb943590a18869658a574aced70"
+  },
+  {
+    "index": 11,
+    "id": "light",
+    "name": "Classic",
+    "appearance": "light",
+    "file": "11-light.png",
+    "window": "workspace",
+    "size": {
+      "width": 1584,
+      "height": 1031
+    },
+    "capturedAt": "2026-09-12T14:06:18.706Z",
+    "sourceCommit": "bfc07ecd89d75bb943590a18869658a574aced70"
+  },
+  {
+    "index": 12,
+    "id": "porcelain",
+    "name": "Mist",
+    "appearance": "light",
+    "file": "12-porcelain.png",
+    "window": "workspace",
+    "size": {
+      "width": 1584,
+      "height": 1031
+    },
+    "capturedAt": "2026-09-12T14:06:22.840Z",
+    "sourceCommit": "bfc07ecd89d75bb943590a18869658a574aced70"
+  },
+  {
+    "index": 13,
+    "id": "dawn",
+    "name": "Slate",
+    "appearance": "light",
+    "file": "13-dawn.png",
+    "window": "workspace",
+    "size": {
+      "width": 1584,
+      "height": 1031
+    },
+    "capturedAt": "2026-09-12T14:06:26.683Z",
+    "sourceCommit": "bfc07ecd89d75bb943590a18869658a574aced70"
+  },
+  {
+    "index": 14,
+    "id": "parchment",
+    "name": "Clay",
+    "appearance": "light",
+    "file": "14-parchment.png",
+    "window": "workspace",
+    "size": {
+      "width": 1584,
+      "height": 1031
+    },
+    "capturedAt": "2026-09-12T14:09:04.504Z",
+    "sourceCommit": "bfc07ecd89d75bb943590a18869658a574aced70"
+  },
+  {
+    "index": 15,
+    "id": "linen",
+    "name": "Linen",
+    "appearance": "light",
+    "file": "15-linen.png",
+    "window": "workspace",
+    "size": {
+      "width": 1584,
+      "height": 1031
+    },
+    "capturedAt": "2026-09-12T14:10:18.640Z",
+    "sourceCommit": "bfc07ecd89d75bb943590a18869658a574aced70"
+  },
+  {
+    "index": 16,
+    "id": "iris",
+    "name": "Iris",
+    "appearance": "light",
+    "file": "16-iris.png",
+    "window": "workspace",
+    "size": {
+      "width": 1584,
+      "height": 1031
+    },
+    "capturedAt": "2026-09-12T14:10:13.109Z",
+    "sourceCommit": "bfc07ecd89d75bb943590a18869658a574aced70"
+  },
+  {
+    "index": 17,
+    "id": "sage-light",
+    "name": "Sage",
+    "appearance": "light",
+    "file": "17-sage-light.png",
+    "window": "workspace",
+    "size": {
+      "width": 1584,
+      "height": 1031
+    },
+    "capturedAt": "2026-09-12T14:09:16.305Z",
+    "sourceCommit": "bfc07ecd89d75bb943590a18869658a574aced70"
+  }
+]
\ No newline at end of file
diff --git a/packages/electron-app/electron/main/client-state-process-identity.ts b/packages/electron-app/electron/main/client-state-process-identity.ts
index 749bfc57e..752d5cddb 100644
--- a/packages/electron-app/electron/main/client-state-process-identity.ts
+++ b/packages/electron-app/electron/main/client-state-process-identity.ts
@@ -63,7 +63,7 @@ export function getProcessStartIdentity(pid: number): string | undefined {
           "-NoProfile",
           "-NonInteractive",
           "-Command",
-          `(Get-CimInstance Win32_Process -Filter "ProcessId = ${pid}" -ErrorAction Stop).CreationDate.ToUniversalTime().Ticks`,
+          `(Get-Process -Id ${pid} -ErrorAction Stop).StartTime.ToUniversalTime().Ticks`,
         ],
         "win32",
       )
@@ -99,7 +99,7 @@ export async function getProcessStartIdentityAsync(
         "-NoProfile",
         "-NonInteractive",
         "-Command",
-        `(Get-CimInstance Win32_Process -Filter "ProcessId = ${pid}" -ErrorAction Stop).CreationDate.ToUniversalTime().Ticks`,
+        `(Get-Process -Id ${pid} -ErrorAction Stop).StartTime.ToUniversalTime().Ticks`,
       ], "win32", timeoutMs)
     }
   } catch {
diff --git a/packages/electron-app/electron/main/main.ts b/packages/electron-app/electron/main/main.ts
index 278d199fa..4d4953291 100644
--- a/packages/electron-app/electron/main/main.ts
+++ b/packages/electron-app/electron/main/main.ts
@@ -423,7 +423,11 @@ function runPrimary(firstIntent: LaunchIntent) {
     })
   }
 
-  async function openPreferences(request: PreferencesRequest): Promise<void> {
+  async function openPreferences(request: PreferencesRequest, toggle = false): Promise<void> {
+    if (toggle && preferencesWindows.current()) {
+      preferencesWindows.current()?.close()
+      return
+    }
     if (preferencesWindows.reuse(request)) {
       await clientState.setPreferences(request)
       return
diff --git a/packages/electron-app/electron/main/preferences-ipc.test.ts b/packages/electron-app/electron/main/preferences-ipc.test.ts
index 4bd6b9a93..2ef5d80fa 100644
--- a/packages/electron-app/electron/main/preferences-ipc.test.ts
+++ b/packages/electron-app/electron/main/preferences-ipc.test.ts
@@ -30,7 +30,7 @@ function harness() {
       resolveLocal: (sender) => sender === localContents ? { window: localWindow } : undefined,
       resolvePreferences: (sender) => sender === preferencesContents ? preferencesWindow : undefined,
       getAllowedOrigins: () => ["http://localhost:3000"],
-      openPreferences: async (request) => { calls.push(`open:${request.section}:${request.instanceId ?? ""}`) },
+      openPreferences: async (request, toggle) => { calls.push(`open:${request.section}:${request.instanceId ?? ""}:${Boolean(toggle)}`) },
       getRequest: () => ({ section: "speech" }),
       markReady: () => { calls.push("ready") },
       acceptRequest: (_window, request) => { calls.push(`accept:${request.section}`) },
@@ -48,7 +48,7 @@ test("Preferences IPC separates local open authority and controls registered app
     "preferences:open", "preferences:getSection", "preferences:ready", "preferences:acceptRequest", "preferences:resolveTransition", "preferences:minimize", "preferences:toggleMaximize", "preferences:close",
   ])
 
-  assert.deepEqual(await h.handlers.get("preferences:open")!(h.event(h.localContents), "speech", { instanceId: "workspace-1" }), { ok: true })
+  assert.deepEqual(await h.handlers.get("preferences:open")!(h.event(h.localContents), "speech", { instanceId: "workspace-1" }, true), { ok: true })
   await assert.rejects(h.handlers.get("preferences:open")!(h.event(h.preferencesContents), "speech"), /local window/)
   await assert.rejects(h.handlers.get("preferences:open")!(h.event(h.localContents), "workspace"), /Invalid preferences section/)
 
@@ -61,7 +61,7 @@ test("Preferences IPC separates local open authority and controls registered app
   assert.deepEqual(h.handlers.get("preferences:toggleMaximize")!(h.event(h.preferencesContents)), { maximized: true })
   assert.deepEqual(h.handlers.get("preferences:toggleMaximize")!(h.event(h.preferencesContents)), { maximized: false })
   assert.deepEqual(await h.handlers.get("preferences:close")!(h.event(h.preferencesContents)), { ok: true })
-  assert.deepEqual(h.calls, ["open:speech:workspace-1", "ready", "accept:providers", "transition:3:false", "minimize", "local:minimize", "maximize", "unmaximize", "approve", "close"])
+  assert.deepEqual(h.calls, ["open:speech:workspace-1:true", "ready", "accept:providers", "transition:3:false", "minimize", "local:minimize", "maximize", "unmaximize", "approve", "close"])
 })
 
 test("Preferences IPC rejects unregistered, subframe, and cross-origin senders", () => {
diff --git a/packages/electron-app/electron/main/preferences-ipc.ts b/packages/electron-app/electron/main/preferences-ipc.ts
index 7bbefd36e..607acb19e 100644
--- a/packages/electron-app/electron/main/preferences-ipc.ts
+++ b/packages/electron-app/electron/main/preferences-ipc.ts
@@ -10,7 +10,7 @@ interface PreferencesIPCDependencies {
   resolveLocal(sender: IpcMainInvokeEvent["sender"]): { window: BrowserWindow } | undefined
   resolvePreferences(sender: IpcMainInvokeEvent["sender"]): BrowserWindow | undefined
   getAllowedOrigins(window: BrowserWindow): string[]
-  openPreferences(request: PreferencesRequest): Promise<void>
+  openPreferences(request: PreferencesRequest, toggle?: boolean): Promise<void>
   getRequest(window: BrowserWindow): PreferencesRequest | undefined
   markReady(window: BrowserWindow): void
   acceptRequest(window: BrowserWindow, request: PreferencesRequest): void | Promise<void>
@@ -39,9 +39,10 @@ export function setupPreferencesIPC(ipcMain: IPCRegistrar, dependencies: Prefere
     return window
   }
 
-  ipcMain.handle("preferences:open", async (event, section: unknown, context: unknown) => {
+  ipcMain.handle("preferences:open", async (event, section: unknown, context: unknown, toggle: unknown) => {
     local(event)
-    await dependencies.openPreferences(requirePreferencesRequest(section, context))
+    if (typeof toggle !== "undefined" && typeof toggle !== "boolean") throw new Error("Invalid Preferences toggle")
+    await dependencies.openPreferences(requirePreferencesRequest(section, context), toggle === true)
     return { ok: true }
   })
   ipcMain.handle("preferences:getSection", (event) => {
diff --git a/packages/electron-app/electron/preload/index.cjs b/packages/electron-app/electron/preload/index.cjs
index c5c41c9ec..36c7a2ec2 100644
--- a/packages/electron-app/electron/preload/index.cjs
+++ b/packages/electron-app/electron/preload/index.cjs
@@ -59,7 +59,7 @@ const localElectronAPI = {
   setWakeLock: (enabled) => ipcRenderer.invoke("power:setWakeLock", Boolean(enabled)),
   showNotification: (payload) => ipcRenderer.invoke("notifications:show", payload),
   openRemoteWindow: (payload) => ipcRenderer.invoke("remote:openWindow", payload),
-  openPreferences: (section, context) => ipcRenderer.invoke("preferences:open", section, context),
+  openPreferences: (section, context, toggle) => ipcRenderer.invoke("preferences:open", section, context, Boolean(toggle)),
   minimizeWindow: () => ipcRenderer.invoke("preferences:minimize"),
   toggleMaximizeWindow: () => ipcRenderer.invoke("preferences:toggleMaximize"),
   closeWindow: () => ipcRenderer.invoke("preferences:close"),
diff --git a/packages/server/src/opencode/automation-plugin.test.ts b/packages/server/src/opencode/automation-plugin.test.ts
index 495951c96..4cde12c2c 100644
--- a/packages/server/src/opencode/automation-plugin.test.ts
+++ b/packages/server/src/opencode/automation-plugin.test.ts
@@ -6,6 +6,7 @@ import path from "node:path"
 import test from "node:test"
 import {
   AUTOMATION_BRIDGE_PATH,
+  automationBridgeDirectory,
   automationBridgeDirectories,
   createAutomationBridgeRegistration,
   parseDeveloperAction,
@@ -50,6 +51,23 @@ function closeServer(server: http.Server | undefined): Promise<void> {
   return new Promise((resolve) => server?.close(() => resolve()) ?? resolve())
 }
 
+function isolateAutomationBridgeRegistry(root: string): () => void {
+  const previousLocalAppData = process.env.LOCALAPPDATA
+  const previousXdgRuntimeDir = process.env.XDG_RUNTIME_DIR
+  const previousWslDistroName = process.env.WSL_DISTRO_NAME
+  process.env.LOCALAPPDATA = root
+  process.env.XDG_RUNTIME_DIR = root
+  delete process.env.WSL_DISTRO_NAME
+  return () => {
+    if (previousLocalAppData === undefined) delete process.env.LOCALAPPDATA
+    else process.env.LOCALAPPDATA = previousLocalAppData
+    if (previousXdgRuntimeDir === undefined) delete process.env.XDG_RUNTIME_DIR
+    else process.env.XDG_RUNTIME_DIR = previousXdgRuntimeDir
+    if (previousWslDistroName === undefined) delete process.env.WSL_DISTRO_NAME
+    else process.env.WSL_DISTRO_NAME = previousWslDistroName
+  }
+}
+
 test("validates Developer Mode actions", () => {
   assert.deepEqual(parseDeveloperAction({ action: "type", ref: "e4", text: "CodeNomad" }), {
     action: "type",
@@ -100,8 +118,7 @@ test("removes only the generated legacy global plugin shim", async () => {
 
 test("restart waits for a new native generation and returns a fresh inspection", async () => {
   const root = await mkdtemp(path.join(os.tmpdir(), "codenomad-automation-restart-"))
-  const previousLocalAppData = process.env.LOCALAPPDATA
-  process.env.LOCALAPPDATA = root
+  const restoreBridgeRegistry = isolateAutomationBridgeRegistry(root)
   const definitions: ToolDefinition[] = []
   let removeOld: (() => Promise<void>) | undefined
   let removeNew: (() => Promise<void>) | undefined
@@ -162,16 +179,14 @@ test("restart waits for a new native generation and returns a fresh inspection",
     await closeServer(newServer)
     await closeServer(preexistingServer)
     await Promise.all(distractorServers.map(closeServer))
-    if (previousLocalAppData === undefined) delete process.env.LOCALAPPDATA
-    else process.env.LOCALAPPDATA = previousLocalAppData
+    restoreBridgeRegistry()
     await rm(root, { recursive: true, force: true })
   }
 })
 
 test("keeps inspected targets isolated per plugin setup", async () => {
   const root = await mkdtemp(path.join(os.tmpdir(), "codenomad-automation-isolation-"))
-  const previousLocalAppData = process.env.LOCALAPPDATA
-  process.env.LOCALAPPDATA = root
+  const restoreBridgeRegistry = isolateAutomationBridgeRegistry(root)
   let removeBridge: (() => Promise<void>) | undefined
   let server: http.Server | undefined
   try {
@@ -190,16 +205,14 @@ test("keeps inspected targets isolated per plugin setup", async () => {
   } finally {
     await removeBridge?.()
     await closeServer(server)
-    if (previousLocalAppData === undefined) delete process.env.LOCALAPPDATA
-    else process.env.LOCALAPPDATA = previousLocalAppData
+    restoreBridgeRegistry()
     await rm(root, { recursive: true, force: true })
   }
 })
 
 test("pins parallel sessions to their independently inspected bridges", async () => {
   const root = await mkdtemp(path.join(os.tmpdir(), "codenomad-automation-sessions-"))
-  const previousLocalAppData = process.env.LOCALAPPDATA
-  process.env.LOCALAPPDATA = root
+  const restoreBridgeRegistry = isolateAutomationBridgeRegistry(root)
   const removals: Array<() => Promise<void>> = []
   const servers: http.Server[] = []
   try {
@@ -220,20 +233,14 @@ test("pins parallel sessions to their independently inspected bridges", async ()
   } finally {
     await Promise.all(removals.map((remove) => remove()))
     await Promise.all(servers.map(closeServer))
-    if (previousLocalAppData === undefined) delete process.env.LOCALAPPDATA
-    else process.env.LOCALAPPDATA = previousLocalAppData
+    restoreBridgeRegistry()
     await rm(root, { recursive: true, force: true })
   }
 })
 
 test("prunes stale registry pressure before limiting discovery", async () => {
   const root = await mkdtemp(path.join(os.tmpdir(), "codenomad-automation-stale-"))
-  const previousLocalAppData = process.env.LOCALAPPDATA
-  const previousXdgRuntimeDir = process.env.XDG_RUNTIME_DIR
-  const previousWslDistroName = process.env.WSL_DISTRO_NAME
-  process.env.LOCALAPPDATA = root
-  process.env.XDG_RUNTIME_DIR = root
-  delete process.env.WSL_DISTRO_NAME
+  const restoreBridgeRegistry = isolateAutomationBridgeRegistry(root)
   let removeBridge: (() => Promise<void>) | undefined
   let server: http.Server | undefined
   try {
@@ -242,7 +249,7 @@ test("prunes stale registry pressure before limiting discovery", async () => {
       : { result: { target: { id: "live", title: "Live", url: "http://app.test" }, nodes: [], diagnostics: [] } })
     server = bridge.server
     removeBridge = await publishAutomationBridge(createAutomationBridgeRegistration(bridge.url))
-    const directory = automationBridgeDirectories()[0]
+    const directory = automationBridgeDirectory()
     assert.equal(path.dirname(path.dirname(directory)), root)
     const base = Date.now() + 10_000
     for (let index = 0; index < 70; index += 1) {
@@ -262,12 +269,7 @@ test("prunes stale registry pressure before limiting discovery", async () => {
   } finally {
     await removeBridge?.()
     await closeServer(server)
-    if (previousLocalAppData === undefined) delete process.env.LOCALAPPDATA
-    else process.env.LOCALAPPDATA = previousLocalAppData
-    if (previousXdgRuntimeDir === undefined) delete process.env.XDG_RUNTIME_DIR
-    else process.env.XDG_RUNTIME_DIR = previousXdgRuntimeDir
-    if (previousWslDistroName === undefined) delete process.env.WSL_DISTRO_NAME
-    else process.env.WSL_DISTRO_NAME = previousWslDistroName
+    restoreBridgeRegistry()
     await rm(root, { recursive: true, force: true })
   }
 })
diff --git a/packages/server/src/server/__tests__/instance-proxy.test.ts b/packages/server/src/server/__tests__/instance-proxy.test.ts
index 763c47634..563671d1a 100644
--- a/packages/server/src/server/__tests__/instance-proxy.test.ts
+++ b/packages/server/src/server/__tests__/instance-proxy.test.ts
@@ -130,7 +130,7 @@ async function harness(
       return canonical.includes("/worktree") ? "workspace:worktree" : "workspace:root"
     },
     getServicePathForPath: async (_id, candidate) => {
-      assert.ok(pathOwnershipChecks.includes(candidate), "prompt path must be ownership-checked before translation")
+      assert.ok(pathOwnershipChecks.includes(candidate), "path must be ownership-checked before translation")
       servicePathCalls.push(candidate)
       return pathMappings[candidate] ?? candidate
     },
@@ -203,8 +203,13 @@ describe("instance proxy location enforcement", () => {
       method: "GET",
       url: "/workspaces/workspace/instance/api/session?directory=%2Fother",
     })
+    const activationResponse = await app.inject({
+      method: "POST",
+      url: "/workspaces/workspace/instance/api/plugin/await-activation?location%5Bdirectory%5D=%2Fother",
+    })
     assert.equal(bodyResponse.statusCode, 403)
     assert.equal(queryResponse.statusCode, 403)
+    assert.equal(activationResponse.statusCode, 403)
     assert.equal(requestCount(), 0)
     assert.doesNotMatch(bodyResponse.body, /internal-secret/)
   })
@@ -708,6 +713,9 @@ describe("instance proxy location enforcement", () => {
     })).statusCode, 403)
     assert.equal((await app.inject({ method: "GET", url: "/workspaces/workspace/instance/api/permission/saved" })).statusCode, 403)
     assert.equal((await app.inject({ method: "DELETE", url: "/workspaces/workspace/instance/api/permission/saved/global-rule" })).statusCode, 403)
+    for (const route of ["plugin/check", "plugin/update", "rpc/plugin/method"]) {
+      assert.equal((await app.inject({ method: "POST", url: `/workspaces/workspace/instance/api/${route}` })).statusCode, 403)
+    }
     assert.equal(requestCount(), 0)
   })
 
@@ -723,6 +731,7 @@ describe("instance proxy location enforcement", () => {
       ["GET", "/workspaces/workspace/instance/api/reference"],
       ["GET", "/workspaces/workspace/instance/api/mcp/resource"],
       ["GET", "/workspaces/workspace/instance/api/websearch/provider"],
+      ["POST", "/workspaces/workspace/instance/api/plugin/await-activation"],
       ["DELETE", "/workspaces/workspace/instance/api/session/owned/inbox/prompt-1"],
       ["POST", "/workspaces/workspace/instance/api/session/owned/inbox/prompt-1/steer"],
       ["POST", "/workspaces/workspace/instance/api/session/owned/inbox/prompt-1/queue"],
@@ -795,6 +804,59 @@ describe("instance proxy location enforcement", () => {
     assert.equal(requestCount(), 1)
   })
 
+  it("bounds filesystem list targets to owned worktrees before translating them", async () => {
+    const mappings = {
+      "/repo/sibling": "/home/dev/repo/sibling",
+      "/repo/worktree/src": "/home/dev/worktree/src",
+    }
+    const { app, servicePathCalls, requestCount } = await harness(
+      "/repo/worktree",
+      {},
+      {},
+      "/repo",
+      "/repo",
+      mappings,
+    )
+
+    const owned = await app.inject({
+      method: "GET",
+      url: "/workspaces/workspace/instance/api/fs/list?location%5Bdirectory%5D=%2Frepo%2Fworktree&path=src",
+    })
+    assert.equal(owned.statusCode, 200)
+    const upstreamUrl = new URL(JSON.parse(owned.body).url, "http://upstream")
+    assert.equal(upstreamUrl.pathname, "/api/fs/list")
+    assert.equal(upstreamUrl.searchParams.get("location[directory]"), "/repo/worktree")
+    assert.equal(upstreamUrl.searchParams.get("path"), "/home/dev/worktree/src")
+    assert.deepEqual(servicePathCalls, ["/repo/worktree/src"])
+    assert.equal(requestCount(), 1)
+
+    const sibling = await app.inject({
+      method: "GET",
+      url: "/workspaces/workspace/instance/api/fs/list?location%5Bdirectory%5D=%2Frepo%2Fworktree&path=..%2Fsibling",
+    })
+    assert.equal(sibling.statusCode, 200)
+    assert.equal(new URL(JSON.parse(sibling.body).url, "http://upstream").searchParams.get("path"), "/home/dev/repo/sibling")
+
+    for (const pathValue of ["../../../other", "/other"]) {
+      const foreign = await app.inject({
+        method: "GET",
+        url: `/workspaces/workspace/instance/api/fs/list?path=${encodeURIComponent(pathValue)}`,
+      })
+      assert.equal(foreign.statusCode, 403)
+    }
+    const duplicate = await app.inject({
+      method: "GET",
+      url: "/workspaces/workspace/instance/api/fs/list?path=src&path=test",
+    })
+    assert.equal(duplicate.statusCode, 400)
+    const nul = await app.inject({
+      method: "GET",
+      url: "/workspaces/workspace/instance/api/fs/list?path=src%00secret",
+    })
+    assert.equal(nul.statusCode, 400)
+    assert.equal(requestCount(), 2)
+  })
+
   it("defaults and validates only schema-defined imported session locations", async () => {
     const { app, requestCount } = await harness()
     const accepted = await app.inject({
diff --git a/packages/server/src/server/http-server.ts b/packages/server/src/server/http-server.ts
index 7a79f3351..30e8b0b46 100644
--- a/packages/server/src/server/http-server.ts
+++ b/packages/server/src/server/http-server.ts
@@ -763,6 +763,25 @@ async function proxyWorkspaceRequest(args: {
     }
     translatedDirectories.set(directory, translated)
   }
+  const fileListPath = readFileListPath(targetUrl, request.method, requestLocations.directories[0] ?? workspace.path)
+  if (fileListPath.invalid) {
+    reply.code(400).send({ error: "Invalid filesystem path" })
+    return
+  }
+  if (fileListPath.candidate) {
+    if (!(await workspaceManager.ownsPath(workspaceId, fileListPath.candidate))) {
+      reply.code(403).send({ error: "Filesystem path does not belong to workspace" })
+      return
+    }
+    const translated = workspaceManager.getServicePathForPath
+      ? await workspaceManager.getServicePathForPath(workspaceId, fileListPath.candidate)
+      : fileListPath.candidate
+    if (!translated) {
+      reply.code(403).send({ error: "Filesystem path does not belong to workspace" })
+      return
+    }
+    targetUrl.searchParams.set("path", translated)
+  }
   const mutationIdentities = new Set<string>()
   if (request.method !== "GET" && request.method !== "HEAD") {
     for (const directory of requestLocations.directories) {
@@ -1014,6 +1033,30 @@ function readNativeCwd(
   else locations.invalid = true
 }
 
+function readFileListPath(
+  targetUrl: URL,
+  method: string,
+  defaultDirectory: string,
+): { candidate?: string; invalid: boolean } {
+  if (method !== "GET" || targetUrl.pathname.replace(/\/+$/, "") !== "/api/fs/list") {
+    return { invalid: false }
+  }
+  const values = targetUrl.searchParams.getAll("path")
+  if (values.length > 1) return { invalid: true }
+  const requested = values[0]?.trim() || "."
+  if (requested.includes("\0")) return { invalid: true }
+  const windowsBase = /^[A-Za-z]:[\\/]/.test(defaultDirectory) || /^[\\/]{2}[^\\/]/.test(defaultDirectory)
+  if (!windowsBase && path.win32.isAbsolute(requested) && !path.posix.isAbsolute(requested)) {
+    return { candidate: path.win32.normalize(requested), invalid: false }
+  }
+  return {
+    candidate: windowsBase
+      ? path.win32.resolve(defaultDirectory, requested)
+      : path.posix.resolve(defaultDirectory, requested),
+    invalid: false,
+  }
+}
+
 function sanitizeInstanceProxyRequestHeaders(
   headers: Record<string, string | string[] | undefined>,
   authorization: string | undefined,
@@ -1245,6 +1288,7 @@ function isAllowedInstanceApiRoute(method: string, pathname: string): boolean {
   const route = pathname.replace(/\/+$/, "")
   const allowed: Array<[string, RegExp]> = [
     ["GET", /^\/api\/(?:agent|command|config|integration|location|mcp|model|plugin|provider|reference|skill)$/],
+    ["POST", /^\/api\/plugin\/await-activation$/],
     ["GET", /^\/api\/(?:mcp\/resource|websearch\/provider)$/],
     ["GET", /^\/api\/agent\/[^/]+$/],
     ["GET", /^\/api\/model\/default$/],
diff --git a/packages/tauri-app/src-tauri/src/client_state/cross_host.rs b/packages/tauri-app/src-tauri/src/client_state/cross_host.rs
index 749d60960..c68b10ad5 100644
--- a/packages/tauri-app/src-tauri/src/client_state/cross_host.rs
+++ b/packages/tauri-app/src-tauri/src/client_state/cross_host.rs
@@ -924,7 +924,7 @@ fn process_start_identity(pid: u32) -> Option<String> {
             "-NoProfile",
             "-NonInteractive",
             "-Command",
-            &format!("(Get-CimInstance Win32_Process -Filter \"ProcessId = {pid}\" -ErrorAction Stop).CreationDate.ToUniversalTime().Ticks"),
+            &format!("(Get-Process -Id {pid} -ErrorAction Stop).StartTime.ToUniversalTime().Ticks"),
         ],
     )
     .map(|value| format!("win32:{value}"))
diff --git a/packages/tauri-app/src-tauri/src/preferences_window.rs b/packages/tauri-app/src-tauri/src/preferences_window.rs
index 5c9e36738..aff36c1fb 100644
--- a/packages/tauri-app/src-tauri/src/preferences_window.rs
+++ b/packages/tauri-app/src-tauri/src/preferences_window.rs
@@ -209,9 +209,16 @@ pub(crate) async fn open_preferences_window(
     app_state: tauri::State<'_, AppState>,
     preferences: tauri::State<'_, PreferencesWindow>,
     request: PreferencesRequest,
+    toggle: Option<bool>,
 ) -> Result<(), String> {
     crate::require_local_app_window(&window, &app_state)?;
-    open_preferences(&app, &app_state, &preferences, request)
+    open_preferences(
+        &app,
+        &app_state,
+        &preferences,
+        request,
+        toggle.unwrap_or(false),
+    )
 }
 
 fn open_preferences(
@@ -219,6 +226,7 @@ fn open_preferences(
     app_state: &AppState,
     preferences: &PreferencesWindow,
     request: PreferencesRequest,
+    toggle: bool,
 ) -> Result<(), String> {
     let request = validate_request(request)?;
     let _operation = preferences
@@ -226,6 +234,10 @@ fn open_preferences(
         .lock()
         .unwrap_or_else(|error| error.into_inner());
     if let Some(existing) = app.get_webview_window(LABEL) {
+        if toggle {
+            existing.close().map_err(|error| error.to_string())?;
+            return Ok(());
+        }
         app.state::<crate::client_state::ClientState>()
             .set_preferences(Some(request.clone()))?;
         let renderer_ready = preferences
@@ -312,7 +324,7 @@ pub(crate) fn navigate_backend(app: &AppHandle) {
         {
             let app_state = app.state::<AppState>();
             let preferences = app.state::<PreferencesWindow>();
-            if let Err(error) = open_preferences(app, &app_state, &preferences, request) {
+            if let Err(error) = open_preferences(app, &app_state, &preferences, request, false) {
                 eprintln!("[tauri] failed to restore preferences window: {error}");
             }
         }
diff --git a/packages/ui/src/App.tsx b/packages/ui/src/App.tsx
index 0d0b0b888..ebf1032c7 100644
--- a/packages/ui/src/App.tsx
+++ b/packages/ui/src/App.tsx
@@ -699,13 +699,13 @@ const App: Component = () => {
                </div>
 
                <div class={`flex flex-col gap-4 ${launchErrorMessage() ? "flex-1 min-h-0" : ""}`}>
-                 <div class="rounded-lg border border-base bg-surface-secondary p-4 flex-shrink-0">
+                 <div class="border border-base bg-surface-secondary p-4 flex-shrink-0">
                    <p class="text-xs font-medium text-muted uppercase tracking-wide mb-1">{t("app.launchError.binaryPathLabel")}</p>
                    <p class="text-sm font-mono text-primary break-all">{launchErrorPath()}</p>
                  </div>
 
                  <Show when={launchErrorMessage()}>
-                   <div class="rounded-lg border border-base bg-surface-secondary p-4 flex flex-col gap-2 flex-1 min-h-0">
+                   <div class="border border-base bg-surface-secondary p-4 flex flex-col gap-2 flex-1 min-h-0">
                      <p class="text-xs font-medium text-muted uppercase tracking-wide">{t("app.launchError.errorOutputLabel")}</p>
                      <pre class="text-sm font-mono text-primary whitespace-pre-wrap break-words overflow-auto flex-1 min-h-0">{launchErrorMessage()}</pre>
                    </div>
diff --git a/packages/ui/src/components/action-overflow-menu.tsx b/packages/ui/src/components/action-overflow-menu.tsx
index b83af45df..d05bc8ae0 100644
--- a/packages/ui/src/components/action-overflow-menu.tsx
+++ b/packages/ui/src/components/action-overflow-menu.tsx
@@ -18,6 +18,7 @@ interface ActionOverflowMenuProps {
   label: string
   triggerClass?: string
   minItems?: number
+  onOpenChange?: (open: boolean) => void
 }
 
 export default function ActionOverflowMenu(props: ActionOverflowMenuProps) {
@@ -35,7 +36,10 @@ export default function ActionOverflowMenu(props: ActionOverflowMenuProps) {
 
   return (
     <Show when={hasItems()}>
-      <DropdownMenu placement="bottom-end" gutter={4} onOpenChange={(open) => { if (!open) clearHoveredItem() }}>
+      <DropdownMenu placement="bottom-end" gutter={4} onOpenChange={(open) => {
+        if (!open) clearHoveredItem()
+        props.onOpenChange?.(open)
+      }}>
         <DropdownMenu.Trigger
           class={`action-overflow-trigger ${props.triggerClass ?? ""}`.trim()}
           aria-label={props.label}
diff --git a/packages/ui/src/components/agent-selector.tsx b/packages/ui/src/components/agent-selector.tsx
index 78e9c85e5..14b536be3 100644
--- a/packages/ui/src/components/agent-selector.tsx
+++ b/packages/ui/src/components/agent-selector.tsx
@@ -32,6 +32,7 @@ export default function AgentSelector(props: AgentSelectorProps) {
     return getSelectableAgentsForSession(instanceAgents(), props.currentAgent, isChildSession())
   })
   const selectedAgent = createMemo(() => findAgentById(availableAgents(), props.currentAgent))
+  const accessibleLabel = () => t("agentSelector.trigger.primary", { agent: selectedAgent()?.name || t("agentSelector.none") })
   const [isOpen, setIsOpen] = createSignal(false)
   let searchInputRef: HTMLInputElement | undefined
 
@@ -95,7 +96,7 @@ export default function AgentSelector(props: AgentSelectorProps) {
       >
         <Combobox.Control class="relative w-full">
           <Combobox.Input class="sr-only" data-agent-selector aria-label={t("agentSelector.placeholder")} />
-          <Combobox.Trigger class="selector-trigger">
+          <Combobox.Trigger class="selector-trigger" aria-label={accessibleLabel()} title={accessibleLabel()}>
             <div class="flex-1 min-w-0">
               <div class="selector-trigger-label selector-trigger-label--stacked">
                 <span class="selector-trigger-primary selector-trigger-primary--align-left">
diff --git a/packages/ui/src/components/alert-dialog.tsx b/packages/ui/src/components/alert-dialog.tsx
index 20c8b9899..5f3897917 100644
--- a/packages/ui/src/components/alert-dialog.tsx
+++ b/packages/ui/src/components/alert-dialog.tsx
@@ -119,7 +119,7 @@ const AlertDialog: Component = () => {
               <Dialog.Content class="modal-surface fixed left-1/2 top-1/2 z-[1310] w-full max-w-sm -translate-x-1/2 -translate-y-1/2 p-6 border border-base shadow-2xl" tabIndex={-1}>
                    <div class="flex items-start gap-3">
                      <div
-                       class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl border text-base font-semibold"
+                       class="flex h-12 w-12 shrink-0 items-center justify-center border text-base font-semibold"
                        style={{
                          "background-color": accent.badgeBg,
                          "border-color": accent.badgeBorder,
diff --git a/packages/ui/src/components/browser-frame.tsx b/packages/ui/src/components/browser-frame.tsx
index 00e2bd332..417f38f5f 100644
--- a/packages/ui/src/components/browser-frame.tsx
+++ b/packages/ui/src/components/browser-frame.tsx
@@ -332,14 +332,14 @@ export const BrowserFrame: Component<BrowserFrameProps> = (props) => {
           <RefreshCw class="h-4 w-4" />
         </button>
         <Show when={props.lockedBaseLabel}>
-          <div class="shrink-0 rounded-md px-3 py-1.5 text-sm" style={{ background: "var(--surface-secondary)", color: "var(--text-secondary)", border: "1px solid var(--border-base)" }}>
+          <div class="shrink-0 px-3 py-1.5 text-sm" style={{ background: "var(--surface-secondary)", color: "var(--text-secondary)", border: "1px solid var(--border-base)" }}>
             {props.lockedBaseLabel}
           </div>
         </Show>
         <form class="flex min-w-0 flex-1 items-center gap-2" onSubmit={(event) => void handleGo(event)}>
           <input
             type="text"
-            class="min-w-0 flex-1 rounded-md px-3 py-1.5 text-sm outline-none"
+            class="min-w-0 flex-1 px-3 py-1.5 text-sm outline-none"
             style={{ background: "var(--surface-secondary)", color: "var(--text-primary)", border: "1px solid var(--border-base)" }}
             value={pathInput()}
             disabled={navigating()}
@@ -372,7 +372,7 @@ export const BrowserFrame: Component<BrowserFrameProps> = (props) => {
           </button>
           <Show when={viewportMenuOpen()}>
             <div
-              class="absolute right-0 top-full z-20 mt-1 min-w-[13rem] overflow-hidden rounded-md border border-base shadow-xl"
+              class="absolute right-0 top-full z-20 mt-1 min-w-[13rem] overflow-hidden border border-base shadow-xl"
               style={{ background: "var(--surface-base)", color: "var(--text-primary)" }}
               role="menu"
             >
@@ -437,7 +437,7 @@ export const BrowserFrame: Component<BrowserFrameProps> = (props) => {
         <Show when={props.commentMode && highlight()}>
           {(rect) => (
             <div
-              class="pointer-events-none absolute rounded-md"
+              class="pointer-events-none absolute"
               style={{
                 left: `${rect().x}px`,
                 top: `${rect().y}px`,
diff --git a/packages/ui/src/components/context-meter.tsx b/packages/ui/src/components/context-meter.tsx
index dc003a1ca..7817ef1a8 100644
--- a/packages/ui/src/components/context-meter.tsx
+++ b/packages/ui/src/components/context-meter.tsx
@@ -50,7 +50,7 @@ export const ContextMeter: Component<ContextMeterProps> = (props) => {
   }
 
   const containerClass =
-    `context-meter-values inline-flex items-center gap-2 rounded-full border border-base px-2 py-0.5 text-xs text-primary ${props.class ?? ""}`
+    `context-meter-values inline-flex items-center gap-2 border border-base px-2 py-0.5 text-xs text-primary ${props.class ?? ""}`
 
   function polarToCartesian(cx: number, cy: number, r: number, angleDeg: number) {
     const rad = (angleDeg * Math.PI) / 180
@@ -105,7 +105,7 @@ export const ContextMeter: Component<ContextMeterProps> = (props) => {
   const tooltipText = () => `Context Used: ${percentLabel()}`
 
   const valuePill = () => (
-    <div class={containerClass}>
+    <div class={`${containerClass} opacity-50`}>
       <span class={LABEL_CLASS}>{props.usedLabel}</span>
       <span class="font-semibold text-primary tabular-nums">{props.formatTokens(used())}</span>
       <span class="text-muted">/</span>
diff --git a/packages/ui/src/components/environment-variables-editor.tsx b/packages/ui/src/components/environment-variables-editor.tsx
index ef5062b4e..b4dbefcf4 100644
--- a/packages/ui/src/components/environment-variables-editor.tsx
+++ b/packages/ui/src/components/environment-variables-editor.tsx
@@ -84,7 +84,7 @@ const EnvironmentVariablesEditor: Component<EnvironmentVariablesEditorProps> = (
                     type="text"
                     value={key}
                     disabled={props.disabled}
-                    class="flex-1 px-2.5 py-1.5 text-sm bg-surface-secondary border border-base rounded text-muted cursor-not-allowed"
+                    class="flex-1 px-2.5 py-1.5 text-sm bg-surface-secondary border border-base text-muted cursor-not-allowed"
                     placeholder={t("envEditor.fields.name.placeholder")}
                     title={t("envEditor.fields.name.readOnlyTitle")}
                   />
@@ -93,7 +93,7 @@ const EnvironmentVariablesEditor: Component<EnvironmentVariablesEditorProps> = (
                     value={value}
                     disabled={props.disabled}
                     onInput={(e) => handleUpdateVariable(key, e.currentTarget.value)}
-                    class="flex-1 px-2.5 py-1.5 text-sm bg-surface-base border border-base rounded text-primary focus-ring-accent disabled:opacity-50 disabled:cursor-not-allowed"
+                    class="flex-1 px-2.5 py-1.5 text-sm bg-surface-base border border-base text-primary focus-ring-accent disabled:opacity-50 disabled:cursor-not-allowed"
                     placeholder={t("envEditor.fields.value.placeholder")}
                     autocomplete={isSecureEnvVar(key) ? "new-password" : "off"}
                     spellcheck={isSecureEnvVar(key) ? false : undefined}
@@ -103,7 +103,7 @@ const EnvironmentVariablesEditor: Component<EnvironmentVariablesEditorProps> = (
                 <button
                   onClick={() => handleSecureToggle(key)}
                   disabled={props.disabled}
-                  class={`p-1.5 rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed ${
+                  class={`p-1.5 transition-colors disabled:opacity-50 disabled:cursor-not-allowed ${
                     isSecureEnvVar(key)
                       ? "icon-accent-hover text-accent"
                       : "icon-muted icon-accent-hover"
@@ -136,7 +136,7 @@ const EnvironmentVariablesEditor: Component<EnvironmentVariablesEditorProps> = (
             onInput={(e) => setNewKey(e.currentTarget.value)}
             onKeyPress={handleKeyPress}
             disabled={props.disabled}
-            class="flex-1 px-2.5 py-1.5 text-sm bg-surface-base border border-base rounded text-primary focus-ring-accent disabled:opacity-50 disabled:cursor-not-allowed"
+            class="flex-1 px-2.5 py-1.5 text-sm bg-surface-base border border-base text-primary focus-ring-accent disabled:opacity-50 disabled:cursor-not-allowed"
             placeholder={t("envEditor.fields.name.placeholder")}
           />
           <input
@@ -145,7 +145,7 @@ const EnvironmentVariablesEditor: Component<EnvironmentVariablesEditorProps> = (
             onInput={(e) => setNewValue(e.currentTarget.value)}
             onKeyPress={handleKeyPress}
             disabled={props.disabled}
-            class="flex-1 px-2.5 py-1.5 text-sm bg-surface-base border border-base rounded text-primary focus-ring-accent disabled:opacity-50 disabled:cursor-not-allowed"
+            class="flex-1 px-2.5 py-1.5 text-sm bg-surface-base border border-base text-primary focus-ring-accent disabled:opacity-50 disabled:cursor-not-allowed"
             placeholder={t("envEditor.fields.value.placeholder")}
             autocomplete="new-password"
           />
@@ -153,7 +153,7 @@ const EnvironmentVariablesEditor: Component<EnvironmentVariablesEditorProps> = (
         <button
           onClick={() => setNewVarSecure(!newVarSecure())}
           disabled={props.disabled}
-          class={`p-1.5 rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed ${
+          class={`p-1.5 transition-colors disabled:opacity-50 disabled:cursor-not-allowed ${
             newVarSecure()
               ? "icon-accent-hover text-accent"
               : "icon-muted icon-accent-hover"
diff --git a/packages/ui/src/components/folder-selection-view.tsx b/packages/ui/src/components/folder-selection-view.tsx
index c7bf08093..2ac964546 100644
--- a/packages/ui/src/components/folder-selection-view.tsx
+++ b/packages/ui/src/components/folder-selection-view.tsx
@@ -608,7 +608,7 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
               <div class="folder-home-list-column order-1 lg:order-2 flex flex-col gap-4 flex-1 min-h-0">
                 <div class="folder-home-list-panel panel flex flex-col flex-1">
                   <div class="panel-header !gap-0 !p-0">
-                    <div class={`grid ${canUseRemoteServerWindows() ? "grid-cols-2" : "grid-cols-1"} gap-0 overflow-hidden border border-base rounded-t-lg rounded-b-none`}>
+                    <div class={`grid ${canUseRemoteServerWindows() ? "grid-cols-2" : "grid-cols-1"} gap-0 overflow-hidden border border-base`}>
                       <button
                         type="button"
                         class="border-r border-base px-4 py-3 text-left transition-colors"
@@ -741,7 +741,7 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
                                   </button>
                                   <button
                                     onClick={() => removeRemoteServerProfile(server.id)}
-                                    class="p-2 transition-all hover:bg-red-100 dark:hover:bg-red-900/30 opacity-70 hover:opacity-100 rounded"
+                                    class="p-2 transition-all hover:bg-red-100 dark:hover:bg-red-900/30 opacity-70 hover:opacity-100"
                                     title={`${t("folderSelection.servers.remove")}: ${server.name}`}
                                     aria-label={`${t("folderSelection.servers.remove")}: ${server.name}`}
                                   >
@@ -867,7 +867,7 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
                                 <button
                                   onClick={(e) => openProjectRename(folder.path, folder.projectName, e)}
                                   disabled={isLoading()}
-                                  class="folder-home-row-action p-2 transition-all hover:bg-surface-hover opacity-70 hover:opacity-100 rounded"
+                                  class="folder-home-row-action p-2 transition-all hover:bg-surface-hover opacity-70 hover:opacity-100"
                                   title={t("folderSelection.recent.rename")}
                                   onMouseEnter={() => setRecentActionHovered(folder.path, true)}
                                   onMouseLeave={() => setRecentActionHovered(folder.path, false)}
@@ -882,7 +882,7 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
                                     handleRemove(folder.path, e)
                                   }}
                                   disabled={isLoading()}
-                                  class="folder-home-row-action p-2 transition-all hover:bg-red-100 dark:hover:bg-red-900/30 opacity-70 hover:opacity-100 rounded"
+                                  class="folder-home-row-action p-2 transition-all hover:bg-red-100 dark:hover:bg-red-900/30 opacity-70 hover:opacity-100"
                                   title={t("folderSelection.recent.remove")}
                                   onMouseEnter={() => setRecentActionHovered(folder.path, true)}
                                   onMouseLeave={() => setRecentActionHovered(folder.path, false)}
diff --git a/packages/ui/src/components/instance-disconnected-modal.tsx b/packages/ui/src/components/instance-disconnected-modal.tsx
index 297bae6ed..3d8431d23 100644
--- a/packages/ui/src/components/instance-disconnected-modal.tsx
+++ b/packages/ui/src/components/instance-disconnected-modal.tsx
@@ -27,7 +27,7 @@ export default function InstanceDisconnectedModal(props: InstanceDisconnectedMod
               </Dialog.Description>
             </div>
 
-            <div class="rounded-lg border border-base bg-surface-secondary p-4 text-sm text-secondary">
+            <div class="border border-base bg-surface-secondary p-4 text-sm text-secondary">
               <p class="font-medium text-primary">{t("instanceDisconnected.details.title")}</p>
               <p class="mt-2 text-secondary">{reasonLabel()}</p>
               {props.folder && (
diff --git a/packages/ui/src/components/instance-info.tsx b/packages/ui/src/components/instance-info.tsx
index fd8687886..7c314fd6c 100644
--- a/packages/ui/src/components/instance-info.tsx
+++ b/packages/ui/src/components/instance-info.tsx
@@ -85,7 +85,7 @@ const InstanceInfo: Component<InstanceInfoProps> = (props) => {
       <div class="panel-body space-y-3">
         <div>
           <div class="text-xs font-medium text-muted uppercase tracking-wide mb-1">{t("instanceInfo.labels.folder")}</div>
-          <div dir="ltr" class="text-xs text-primary font-mono break-all px-2 py-1.5 rounded border bg-surface-secondary border-base">
+          <div dir="ltr" class="text-xs text-primary font-mono break-all px-2 py-1.5 border bg-surface-secondary border-base">
             {currentInstance().folder}
           </div>
         </div>
@@ -97,7 +97,7 @@ const InstanceInfo: Component<InstanceInfoProps> = (props) => {
                 <div class="text-xs font-medium text-muted uppercase tracking-wide mb-1">
                   {t("instanceInfo.labels.project")}
                 </div>
-                <div dir="ltr" class="text-xs font-mono px-2 py-1.5 rounded border truncate bg-surface-secondary border-base text-primary">
+                <div dir="ltr" class="text-xs font-mono px-2 py-1.5 border truncate bg-surface-secondary border-base text-primary">
                   {project().id}
                 </div>
               </div>
@@ -129,7 +129,7 @@ const InstanceInfo: Component<InstanceInfoProps> = (props) => {
             <div class="text-xs font-medium text-muted uppercase tracking-wide mb-1">
               {t("instanceInfo.labels.opencodeVersion")}
             </div>
-            <div class="text-xs px-2 py-1.5 rounded border bg-surface-secondary border-base text-primary">
+            <div class="text-xs px-2 py-1.5 border bg-surface-secondary border-base text-primary">
               v{binaryVersion()}
             </div>
           </div>
@@ -140,7 +140,7 @@ const InstanceInfo: Component<InstanceInfoProps> = (props) => {
             <div class="text-xs font-medium text-muted uppercase tracking-wide mb-1">
               {t("instanceInfo.labels.binaryPath")}
             </div>
-            <div dir="ltr" class="text-xs font-mono break-all px-2 py-1.5 rounded border bg-surface-secondary border-base text-primary">
+            <div dir="ltr" class="text-xs font-mono break-all px-2 py-1.5 border bg-surface-secondary border-base text-primary">
               {currentInstance().binaryPath}
             </div>
           </div>
@@ -154,7 +154,7 @@ const InstanceInfo: Component<InstanceInfoProps> = (props) => {
             <div class="space-y-1">
               <For each={environmentEntries()}>
                 {([key, value]) => (
-                  <div dir="ltr" class="flex items-center gap-2 px-2 py-1.5 rounded border bg-surface-secondary border-base">
+                  <div dir="ltr" class="flex items-center gap-2 px-2 py-1.5 border bg-surface-secondary border-base">
                     <span class="text-xs font-mono font-medium flex-1 text-primary" title={key}>
                       {key}
                     </span>
diff --git a/packages/ui/src/components/instance-service-status.tsx b/packages/ui/src/components/instance-service-status.tsx
index 8a21526c4..dc62488f3 100644
--- a/packages/ui/src/components/instance-service-status.tsx
+++ b/packages/ui/src/components/instance-service-status.tsx
@@ -132,7 +132,7 @@ const InstanceServiceStatus: Component<InstanceServiceStatusProps> = (props) =>
               }
               const statusDotStyle = () => (isPending() ? { background: "var(--status-warning)" } : undefined)
               return (
-                <div class="px-2 py-1.5 rounded border bg-surface-secondary border-base">
+                <div class="px-2 py-1.5 border bg-surface-secondary border-base">
                   <div class="flex items-center justify-between gap-2">
                     <span class="text-xs text-primary font-medium truncate">{server.name}</span>
                       <div class="flex items-center gap-3 flex-shrink-0">
@@ -195,7 +195,7 @@ const InstanceServiceStatus: Component<InstanceServiceStatusProps> = (props) =>
         <div class="space-y-1.5">
           <For each={plugins()}>
             {(plugin) => (
-              <div class="px-2 py-1.5 rounded border bg-surface-secondary border-base">
+              <div class="px-2 py-1.5 border bg-surface-secondary border-base">
                 <div class="text-xs text-primary font-medium break-words whitespace-normal">{plugin}</div>
               </div>
             )}
diff --git a/packages/ui/src/components/instance-tabs.tsx b/packages/ui/src/components/instance-tabs.tsx
index 02b27f294..eca0e59aa 100644
--- a/packages/ui/src/components/instance-tabs.tsx
+++ b/packages/ui/src/components/instance-tabs.tsx
@@ -9,6 +9,7 @@ import {
   type DragEvent as SolidDndDragEvent,
 } from "@thisbeyond/solid-dnd"
 import InstanceTab from "./instance-tab"
+import TabScroll from "./tab-scroll"
 import KeyboardHint from "./keyboard-hint"
 import ToastHistoryPanel from "./toast-history-panel"
 import { Plus, MonitorUp, Bell, BellOff, Bug, Settings } from "lucide-solid"
@@ -24,7 +25,7 @@ import { isOsNotificationSupportedSync } from "../lib/os-notifications"
 import { canOpenRemoteWindows } from "../lib/runtime-env"
 import { getUnreadToastCountSignal, showToastNotification } from "../lib/notifications"
 import { useConfig } from "../stores/preferences"
-import { openSettings } from "../stores/settings-screen"
+import { openSettings, toggleSettings } from "../stores/settings-screen"
 import type { AppTabRecord } from "../stores/app-tabs"
 
 interface InstanceTabsProps {
@@ -245,8 +246,7 @@ const InstanceTabs: Component<InstanceTabsProps> = (props) => {
     <>
       <div class="tab-bar tab-bar-instance">
         <div class="tab-container">
-          <div class="tab-scroll">
-            <div class="tab-strip">
+          <TabScroll>
               <div class="tab-strip-tabs" role="tablist">
                 <Show
                   when={dragReorderEnabled()}
@@ -281,8 +281,7 @@ const InstanceTabs: Component<InstanceTabsProps> = (props) => {
                   </DragDropProvider>
                 </Show>
               </div>
-            </div>
-          </div>
+          </TabScroll>
           <div class="tab-bar-actions">
             <Show when={props.tabs.length > 1}>
               <div class="tab-shortcuts">
@@ -305,7 +304,7 @@ const InstanceTabs: Component<InstanceTabsProps> = (props) => {
 
             <button
               class="new-tab-button"
-              onClick={() => openSettings("general")}
+              onClick={() => toggleSettings("general")}
               title={t("settings.open.title")}
               aria-label={t("settings.open.ariaLabel")}
             >
diff --git a/packages/ui/src/components/instance/instance-shell2.tsx b/packages/ui/src/components/instance/instance-shell2.tsx
index 9e9e5e553..3ba43fdc6 100644
--- a/packages/ui/src/components/instance/instance-shell2.tsx
+++ b/packages/ui/src/components/instance/instance-shell2.tsx
@@ -34,9 +34,11 @@ import PromptAttachmentsBar from "../prompt-input/PromptAttachmentsBar"
 import { formatTokenTotal } from "../../lib/formatters"
 import ContextMeter from "../context-meter"
 import ActionOverflowMenu, { type ActionOverflowMenuItem } from "../action-overflow-menu"
+import TranscriptFilters from "../transcript-filters"
 import { sseManager } from "../../lib/sse-manager"
 import { getLogger } from "../../lib/logger"
 import PromptInput from "../prompt-input"
+import PromptContextControls from "../prompt-input/PromptContextControls"
 import { useI18n } from "../../lib/i18n"
 import { activeInterruption, getPermissionQueueLength } from "../../stores/instances"
 import { getFormQueue } from "../../stores/forms"
@@ -45,7 +47,7 @@ import { useSessionSidebarRequests } from "./shell/useSessionSidebarRequests"
 import RightPanel from "./shell/right-panel/RightPanel"
 import { useDrawerChrome } from "./shell/useDrawerChrome"
 import { getRetrySeconds, getSessionIdleFadeClass, getSessionRetry, getSessionStatus, shouldShowSessionStatus } from "../../stores/session-status"
-import { Command as CommandIcon, Eye, Maximize2, MessageSquareText, Search, ShieldAlert } from "lucide-solid"
+import { Command as CommandIcon, Globe, Maximize2, Search, ShieldAlert } from "lucide-solid"
 import type { PromptInputApi } from "../prompt-input/types"
 import type { Attachment } from "../../types/attachment"
 import { setAgentModelPreference, useConfig } from "../../stores/preferences"
@@ -59,7 +61,7 @@ import {
   showSessionChat,
   showSessionPreview,
 } from "../../stores/session-previews"
-import { createSession, executeCustomCommand, getDefaultModel, providers, runShellCommand, sendMessage, setActiveParentSession, updateSessionModel } from "../../stores/sessions"
+import { clearActiveParentSession, createSession, executeCustomCommand, getDefaultModel, providers, runShellCommand, sendMessage, setActiveParentSession, updateSessionModel } from "../../stores/sessions"
 import { addAttachment, clearAttachments, getAttachments, removeAttachment } from "../../stores/attachments"
 
 import type { LayoutMode } from "./shell/types"
@@ -472,8 +474,6 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
     return preview?.mode === "preview" ? t("sessionPreview.chat.button") : t("sessionPreview.open.button")
   })
 
-  const PreviewToggleIcon = createMemo(() => activeSessionPreview()?.mode === "preview" ? MessageSquareText : Eye)
-
   const yoloModeEnabled = createMemo(() => {
     const session = activeSessionForInstance()
     if (!session) return false
@@ -589,10 +589,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
         title={previewToggleLabel()}
         size="small"
       >
-        {(() => {
-          const Icon = PreviewToggleIcon()
-          return <Icon class="w-5 h-5" aria-hidden="true" />
-        })()}
+        <Globe class="w-5 h-5" aria-hidden="true" />
       </IconButton>
     </Show>
   )
@@ -626,7 +623,6 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
       onSelect: handleCommandPaletteClick,
     }]
     if (showingInfoView()) return items
-    const PreviewIcon = PreviewToggleIcon()
     items.push(
       {
         key: "search",
@@ -637,9 +633,10 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
       {
         key: runtimeEnv.platform === "mobile" ? "fullscreen" : "preview",
         label: runtimeEnv.platform === "mobile" ? t("instanceShell.fullscreen.enter") : previewToggleLabel(),
+        checked: runtimeEnv.platform === "mobile" ? undefined : activeSessionPreview()?.mode === "preview",
         icon: runtimeEnv.platform === "mobile"
           ? <Maximize2 class="w-4 h-4" aria-hidden="true" />
-          : <PreviewIcon class="w-4 h-4" aria-hidden="true" />,
+          : <Globe class="w-4 h-4" aria-hidden="true" />,
         onSelect: runtimeEnv.platform === "mobile" ? props.onEnterMobileFullscreen : handlePreviewButtonClick,
       },
     )
@@ -649,20 +646,22 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
   const instancePaletteCommands = createMemo(() => props.paletteCommands())
   const paletteOpen = createMemo(() => isCommandPaletteOpen(props.instance.id))
 
-   const keyboardShortcuts = createMemo(() =>
-     [keyboardRegistry.get("session-prev"), keyboardRegistry.get("session-next")].filter(
-       (shortcut): shortcut is KeyboardShortcut => Boolean(shortcut),
-     ),
-   )
-
-   useSessionSidebarRequests({
-     instanceId: () => props.instance.id,
-     sidebarContentEl: leftDrawerContentEl,
-     leftPinned,
-     leftOpen,
-     setLeftOpen,
-     measureDrawerHost,
-   })
+  const keyboardShortcuts = createMemo(() =>
+    [keyboardRegistry.get("session-prev"), keyboardRegistry.get("session-next")].filter(
+      (shortcut): shortcut is KeyboardShortcut => Boolean(shortcut),
+    ),
+  )
+
+  useSessionSidebarRequests({
+    instanceId: () => props.instance.id,
+    activeSessionId: activeSessionIdForInstance,
+    sidebarContentEl: leftDrawerContentEl,
+    selectorContentEl: sessionCenterEl,
+    leftPinned,
+    leftOpen,
+    setLeftOpen,
+    measureDrawerHost,
+  })
 
   const { cachedSessionIds } = useSessionCache({
     instanceId: () => props.instance.id,
@@ -727,19 +726,12 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
             instanceId={props.instance.id}
             threads={sessionThreads}
             activeSessionId={activeSessionIdForInstance}
-            activeSession={activeSessionForInstance}
-            draftAgent={draftAgent}
-            draftModel={draftModel}
             showSearch={showSessionSearch}
             onToggleSearch={() => setShowSessionSearch((current) => !current)}
             keyboardShortcuts={keyboardShortcuts}
             drawerState={leftDrawerState}
-            onSelectSession={handleSessionSelect}
+            onSelectSession={handleSidebarSessionSelect}
             onNewSession={props.onNewSession}
-            onSidebarAgentChange={props.handleSidebarAgentChange}
-            onSidebarModelChange={props.handleSidebarModelChange}
-            onDraftAgentChange={handleDraftAgentChange}
-            onDraftModelChange={handleDraftModelChange}
             onCloseLeftDrawer={closeLeftDrawer}
             setContentEl={setLeftDrawerContentEl}
           />
@@ -762,19 +754,12 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
           instanceId={props.instance.id}
           threads={sessionThreads}
           activeSessionId={activeSessionIdForInstance}
-          activeSession={activeSessionForInstance}
-          draftAgent={draftAgent}
-          draftModel={draftModel}
           showSearch={showSessionSearch}
           onToggleSearch={() => setShowSessionSearch((current) => !current)}
           keyboardShortcuts={keyboardShortcuts}
           drawerState={leftDrawerState}
-          onSelectSession={handleSessionSelect}
+          onSelectSession={handleSidebarSessionSelect}
           onNewSession={props.onNewSession}
-          onSidebarAgentChange={props.handleSidebarAgentChange}
-          onSidebarModelChange={props.handleSidebarModelChange}
-          onDraftAgentChange={handleDraftAgentChange}
-          onDraftModelChange={handleDraftModelChange}
           onCloseLeftDrawer={closeLeftDrawer}
           setContentEl={setLeftDrawerContentEl}
         />
@@ -1012,8 +997,15 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
     const sessionIds = cachedSessionIds()
     if (sessionIds.length > 0) {
       handleSessionSelect(sessionIds[0])
+    } else {
+      clearActiveParentSession(props.instance.id)
     }
   }
+
+  const handleSidebarSessionSelect = (sessionId: string) => {
+    if (sessionId === "info" && showingInfoView()) handleBackToConversation()
+    else handleSessionSelect(sessionId)
+  }
   const sessionLayout = (
     <div
       class="session-shell-panels relative flex flex-1 min-h-0 overflow-x-hidden"
@@ -1032,7 +1024,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
         sx={{ display: "flex", flexDirection: "column", flex: 1, minWidth: 0, minHeight: 0, overflowX: "hidden" }}
       >
         <Show when={!mobileFullscreen()}>
-          <AppBar position="sticky" color="default" elevation={0} class="border-b border-base">
+          <AppBar position="sticky" color="default" elevation={0} sx={{ borderBottom: 0 }}>
             <Toolbar ref={(element) => { sessionToolbarEl = element }} variant="dense" class="panel-header session-toolbar flex items-center gap-2 py-0">
               {renderHeaderLeftSlot()}
 
@@ -1105,6 +1097,9 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
                         <span class="status-text">{t("instanceShell.connection.disconnected")}</span>
                       </span>
                     </Show>
+                    <Show when={!showingInfoView()}>
+                      <div class="panel-header-actions"><TranscriptFilters /></div>
+                    </Show>
                   </div>
                 </div>
               </div>
@@ -1175,6 +1170,16 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
                       onCommand={handleFirstPromptCommand}
                       onRunShell={handleFirstPromptShell}
                       escapeInDebounce={props.escapeInDebounce}
+                      footerControls={
+                        <PromptContextControls
+                          instanceId={props.instance.id}
+                          sessionId={NO_SESSION_DRAFT_SESSION_ID}
+                          currentAgent={draftAgent()}
+                          currentModel={draftModel()}
+                          onAgentChange={handleDraftAgentChange}
+                          onModelChange={handleDraftModelChange}
+                        />
+                      }
                       registerPromptInputApi={registerDraftPromptInputApi}
                     />
                   </div>
@@ -1210,6 +1215,8 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
                             onSidebarToggle={() => setLeftOpen(true)}
                             forceCompactStatusLayout={showEmbeddedSidebarToggle()}
                             isActive={isActive()}
+                            onAgentChange={(agent) => props.handleSidebarAgentChange(sessionId, agent)}
+                            onModelChange={(model) => props.handleSidebarModelChange(sessionId, model)}
                           />
                         </Show>
                       </div>
diff --git a/packages/ui/src/components/instance/shell/SessionSidebar.tsx b/packages/ui/src/components/instance/shell/SessionSidebar.tsx
index 73c7a6bfc..1283e0354 100644
--- a/packages/ui/src/components/instance/shell/SessionSidebar.tsx
+++ b/packages/ui/src/components/instance/shell/SessionSidebar.tsx
@@ -1,20 +1,15 @@
 import { Show, type Accessor, type Component } from "solid-js"
 import type { SessionThread } from "../../../stores/session-state"
-import type { Session } from "../../../types/session"
-import { keyboardRegistry, type KeyboardShortcut } from "../../../lib/keyboard-registry"
+import type { KeyboardShortcut } from "../../../lib/keyboard-registry"
 import type { DrawerViewState } from "./types"
 
 import { PlusSquare, Search } from "lucide-solid"
 import IconButton from "@suid/material/IconButton"
-import MenuOpenIcon from "@suid/icons-material/MenuOpen"
+import ArrowBackIcon from "@suid/icons-material/ArrowBack"
 import InfoOutlinedIcon from "@suid/icons-material/InfoOutlined"
 
 import SessionList from "../../session-list"
 import KeyboardHint from "../../keyboard-hint"
-import WorktreeSelector from "../../worktree-selector"
-import AgentSelector from "../../agent-selector"
-import ModelSelector from "../../model-selector"
-import ThinkingSelector from "../../thinking-selector"
 import { getLogger } from "../../../lib/logger"
 import { shouldMountSessionList } from "../../session-list-visibility"
 
@@ -25,9 +20,6 @@ interface SessionSidebarProps {
   instanceId: string
   threads: Accessor<SessionThread[]>
   activeSessionId: Accessor<string | null>
-  activeSession: Accessor<Session | null>
-  draftAgent?: Accessor<string>
-  draftModel?: Accessor<{ providerId: string; modelId: string }>
 
   showSearch: Accessor<boolean>
   onToggleSearch: () => void
@@ -37,10 +29,6 @@ interface SessionSidebarProps {
 
   onSelectSession: (sessionId: string) => void
   onNewSession: () => Promise<void> | void
-  onSidebarAgentChange: (sessionId: string, agent: string) => Promise<void>
-  onSidebarModelChange: (sessionId: string, model: { providerId: string; modelId: string }) => Promise<void>
-  onDraftAgentChange?: (agent: string) => Promise<void>
-  onDraftModelChange?: (model: { providerId: string; modelId: string }) => Promise<void>
   onCloseLeftDrawer: () => void
 
   setContentEl: (el: HTMLElement | null) => void
@@ -97,7 +85,7 @@ const SessionSidebar: Component<SessionSidebarProps> = (props) => (
               title={props.t("instanceShell.leftDrawer.toggle.close")}
               onClick={props.onCloseLeftDrawer}
             >
-              <MenuOpenIcon fontSize="small" />
+              <ArrowBackIcon fontSize="small" />
             </IconButton>
           </div>
         </div>
@@ -127,85 +115,6 @@ const SessionSidebar: Component<SessionSidebarProps> = (props) => (
           />
         </Show>
 
-        <div class="session-sidebar-separator" />
-        <Show
-          when={props.activeSession()?.id}
-          fallback={
-            <Show when={props.draftAgent && props.draftModel && props.onDraftAgentChange && props.onDraftModelChange}>
-              <div class="session-sidebar-controls px-6 border-t border-base">
-                <div class="session-sidebar-selector-group">
-                  <AgentSelector
-                    instanceId={props.instanceId}
-                    sessionId="__new_session__"
-                    currentAgent={props.draftAgent?.() ?? ""}
-                    onAgentChange={(agent) => props.onDraftAgentChange!(agent)}
-                  />
-
-                  <ModelSelector
-                    instanceId={props.instanceId}
-                    sessionId="__new_session__"
-                    currentModel={props.draftModel?.() ?? { providerId: "", modelId: "" }}
-                    onModelChange={(model) => props.onDraftModelChange!(model)}
-                  />
-
-                  <ThinkingSelector instanceId={props.instanceId} currentModel={props.draftModel?.() ?? { providerId: "", modelId: "" }} />
-                </div>
-
-                <KeyboardHint
-                  class="session-sidebar-selector-hints"
-                  ariaHidden={true}
-                  shortcuts={[
-                    keyboardRegistry.get("open-agent-selector"),
-                    keyboardRegistry.get("focus-model"),
-                    keyboardRegistry.get("focus-variant"),
-                  ].filter((shortcut): shortcut is KeyboardShortcut => Boolean(shortcut))}
-                  separator=" "
-                  showDescription={false}
-                />
-              </div>
-            </Show>
-          }
-        >
-          <div class="session-sidebar-controls px-6 border-t border-base">
-            <div class="session-sidebar-selector-group">
-              <WorktreeSelector instanceId={props.instanceId} sessionId={props.activeSessionId() ?? ""} />
-
-              <AgentSelector
-                instanceId={props.instanceId}
-                sessionId={props.activeSessionId() ?? ""}
-                currentAgent={props.activeSession()?.agent ?? ""}
-                onAgentChange={(agent) => {
-                  const sessionId = props.activeSessionId()
-                  return sessionId ? props.onSidebarAgentChange(sessionId, agent) : Promise.resolve()
-                }}
-              />
-
-              <ModelSelector
-                instanceId={props.instanceId}
-                sessionId={props.activeSessionId() ?? ""}
-                currentModel={props.activeSession()?.model ?? { providerId: "", modelId: "" }}
-                onModelChange={(model) => {
-                  const sessionId = props.activeSessionId()
-                  return sessionId ? props.onSidebarModelChange(sessionId, model) : Promise.resolve()
-                }}
-              />
-
-              <ThinkingSelector instanceId={props.instanceId} currentModel={props.activeSession()?.model ?? { providerId: "", modelId: "" }} />
-            </div>
-
-            <KeyboardHint
-              class="session-sidebar-selector-hints"
-              ariaHidden={true}
-              shortcuts={[
-                keyboardRegistry.get("open-agent-selector"),
-                keyboardRegistry.get("focus-model"),
-                keyboardRegistry.get("focus-variant"),
-              ].filter((shortcut): shortcut is KeyboardShortcut => Boolean(shortcut))}
-              separator=" "
-              showDescription={false}
-            />
-          </div>
-        </Show>
       </div>
     </div>
   )
diff --git a/packages/ui/src/components/instance/shell/right-panel/RightPanel.tsx b/packages/ui/src/components/instance/shell/right-panel/RightPanel.tsx
index 3128069eb..6f0facc87 100644
--- a/packages/ui/src/components/instance/shell/right-panel/RightPanel.tsx
+++ b/packages/ui/src/components/instance/shell/right-panel/RightPanel.tsx
@@ -9,8 +9,9 @@ import {
   type DragEvent as SolidDndDragEvent,
 } from "@thisbeyond/solid-dnd"
 import IconButton from "@suid/material/IconButton"
-import MenuOpenIcon from "@suid/icons-material/MenuOpen"
+import ArrowForwardIcon from "@suid/icons-material/ArrowForward"
 import { Settings2 } from "lucide-solid"
+import TabScroll from "../../../tab-scroll"
 
 import type { Instance } from "../../../../types/instance"
 import type { Session } from "../../../../types/session"
@@ -58,6 +59,7 @@ const SortableRightPanelTab: Component<SortableRightPanelTabProps> = (props) =>
         type="button"
         role="tab"
         id={props.tabId}
+        data-tab-id={props.tab.id}
         class={`right-panel-tab ${props.active ? "right-panel-tab-active" : "right-panel-tab-inactive"}`}
         aria-selected={props.active}
         aria-controls={props.panelId}
@@ -263,7 +265,7 @@ const RightPanel: Component<RightPanelProps> = (props) => {
               title={props.t("instanceShell.rightDrawer.toggle.close")}
               onClick={props.onCloseRightDrawer}
             >
-              <MenuOpenIcon fontSize="small" sx={{ transform: "scaleX(-1)" }} />
+              <ArrowForwardIcon fontSize="small" />
             </IconButton>
             <IconButton
               ref={customizationTriggerRef}
@@ -278,8 +280,7 @@ const RightPanel: Component<RightPanelProps> = (props) => {
               <Settings2 class="h-4 w-4" />
             </IconButton>
           </div>
-          <div class="tab-scroll">
-            <div class="tab-strip">
+          <TabScroll>
               <div class="tab-strip-tabs" role="tablist" aria-label={props.t("instanceShell.rightPanel.tabs.ariaLabel")}>
                 <DragDropProvider collisionDetector={closestCenter} onDragEnd={handleTabDragEnd}>
                   <DragDropSensors>
@@ -303,8 +304,7 @@ const RightPanel: Component<RightPanelProps> = (props) => {
                   </DragDropSensors>
                 </DragDropProvider>
               </div>
-            </div>
-          </div>
+          </TabScroll>
         </div>
       </div>
 
diff --git a/packages/ui/src/components/instance/shell/right-panel/tabs/StatusTab.tsx b/packages/ui/src/components/instance/shell/right-panel/tabs/StatusTab.tsx
index 9be51ec4a..109c1f921 100644
--- a/packages/ui/src/components/instance/shell/right-panel/tabs/StatusTab.tsx
+++ b/packages/ui/src/components/instance/shell/right-panel/tabs/StatusTab.tsx
@@ -109,6 +109,7 @@ const StatusTab: Component<StatusTabProps> = (props) => {
         <p class="min-w-0 text-xs leading-5 text-secondary">{props.t("instanceShell.yoloMode.description")}</p>
         <div class="-mr-2 shrink-0">
           <Switch
+            class="yolo-mode-switch"
             checked={isPermissionAutoAcceptEnabled(props.instanceId, session.id)}
             size="small"
             sx={{
diff --git a/packages/ui/src/components/instance/shell/useDrawerChrome.ts b/packages/ui/src/components/instance/shell/useDrawerChrome.ts
index 22edbf998..300a848a1 100644
--- a/packages/ui/src/components/instance/shell/useDrawerChrome.ts
+++ b/packages/ui/src/components/instance/shell/useDrawerChrome.ts
@@ -8,7 +8,8 @@ import {
   type JSX,
   type Setter,
 } from "solid-js"
-import MenuOpenIcon from "@suid/icons-material/MenuOpen"
+import ArrowForwardIcon from "@suid/icons-material/ArrowForward"
+import ArrowBackIcon from "@suid/icons-material/ArrowBack"
 
 import type { TranslateParams } from "../../../lib/i18n"
 
@@ -118,11 +119,11 @@ export function useDrawerChrome(options: UseDrawerChromeOptions): DrawerChromeAp
   }
 
   const leftAppBarButtonIcon = () => {
-    return createComponent(MenuOpenIcon, { fontSize: "small", sx: { transform: "scaleX(-1)" } })
+    return createComponent(ArrowForwardIcon, { fontSize: "small" })
   }
 
   const rightAppBarButtonIcon = () => {
-    return createComponent(MenuOpenIcon, { fontSize: "small" })
+    return createComponent(ArrowBackIcon, { fontSize: "small" })
   }
 
   const handleLeftAppBarButtonClick = () => {
diff --git a/packages/ui/src/components/instance/shell/useSessionSidebarRequests.ts b/packages/ui/src/components/instance/shell/useSessionSidebarRequests.ts
index 941f5e774..7aaf835fa 100644
--- a/packages/ui/src/components/instance/shell/useSessionSidebarRequests.ts
+++ b/packages/ui/src/components/instance/shell/useSessionSidebarRequests.ts
@@ -12,7 +12,9 @@ interface PendingSidebarAction {
 
 interface UseSessionSidebarRequestsOptions {
   instanceId: Accessor<string>
+  activeSessionId: Accessor<string | null | undefined>
   sidebarContentEl: Accessor<HTMLElement | null>
+  selectorContentEl: Accessor<HTMLElement | null>
   leftPinned: Accessor<boolean>
   leftOpen: Accessor<boolean>
   setLeftOpen: (next: boolean) => void
@@ -36,8 +38,16 @@ export function useSessionSidebarRequests(options: UseSessionSidebarRequestsOpti
     )
   }
 
+  const activeSelectorContentEl = () => {
+    const content = options.selectorContentEl()
+    const sessionId = options.activeSessionId()
+    if (!content || sessionId === "info") return null
+    if (!sessionId) return content
+    return content.querySelector<HTMLElement>('.session-cache-pane[data-session-active="true"]')
+  }
+
   const focusAgentSelectorControl = () => {
-    const input = options.sidebarContentEl()?.querySelector<HTMLInputElement>("[data-agent-selector]")
+    const input = activeSelectorContentEl()?.querySelector<HTMLInputElement>("[data-agent-selector]")
     if (!input) return false
     input.focus()
     setTimeout(() => triggerKeyboardEvent(input, { key: "ArrowDown", code: "ArrowDown", keyCode: 40 }), 10)
@@ -45,7 +55,7 @@ export function useSessionSidebarRequests(options: UseSessionSidebarRequestsOpti
   }
 
   const focusModelSelectorControl = () => {
-    const input = options.sidebarContentEl()?.querySelector<HTMLInputElement>("[data-model-selector]")
+    const input = activeSelectorContentEl()?.querySelector<HTMLInputElement>("[data-model-selector]")
     if (!input) return false
     input.focus()
     setTimeout(() => triggerKeyboardEvent(input, { key: "ArrowDown", code: "ArrowDown", keyCode: 40 }), 10)
@@ -53,7 +63,7 @@ export function useSessionSidebarRequests(options: UseSessionSidebarRequestsOpti
   }
 
   const focusVariantSelectorControl = () => {
-    const input = options.sidebarContentEl()?.querySelector<HTMLInputElement>("[data-thinking-selector]")
+    const input = activeSelectorContentEl()?.querySelector<HTMLInputElement>("[data-thinking-selector]")
     if (!input) return false
     input.focus()
     setTimeout(() => triggerKeyboardEvent(input, { key: "ArrowDown", code: "ArrowDown", keyCode: 40 }), 10)
@@ -64,7 +74,13 @@ export function useSessionSidebarRequests(options: UseSessionSidebarRequestsOpti
     const pending = pendingSidebarAction()
     if (!pending) return
     const action = pending.action
-    const contentReady = Boolean(options.sidebarContentEl())
+    if (action !== "show-session-list" && options.activeSessionId() === "info") {
+      setPendingSidebarAction(null)
+      return
+    }
+    const contentReady = action === "show-session-list"
+      ? Boolean(options.sidebarContentEl())
+      : Boolean(activeSelectorContentEl())
     if (!contentReady) {
       return
     }
@@ -85,7 +101,7 @@ export function useSessionSidebarRequests(options: UseSessionSidebarRequestsOpti
 
   const handleSidebarRequest = (action: SessionSidebarRequestAction) => {
     setPendingSidebarAction({ action, id: sidebarActionId++ })
-    if (!options.leftPinned() && !options.leftOpen()) {
+    if (action === "show-session-list" && !options.leftPinned() && !options.leftOpen()) {
       options.setLeftOpen(true)
       options.measureDrawerHost()
     }
diff --git a/packages/ui/src/components/measured-action-overflow.ts b/packages/ui/src/components/measured-action-overflow.ts
new file mode 100644
index 000000000..e42cbc9d9
--- /dev/null
+++ b/packages/ui/src/components/measured-action-overflow.ts
@@ -0,0 +1,64 @@
+import { onCleanup } from "solid-js"
+
+const px = (value: string) => Number.parseFloat(value) || 0
+
+/** Intrinsic width of the single-line header, ignoring its overflow trigger. */
+function contentWidth(element: Element): number {
+  if (element.matches(".action-overflow-trigger, .message-agent-meta-inline--measure")) return 0
+  const style = getComputedStyle(element)
+  if (style.display === "none") return 0
+  if (element instanceof SVGElement || element.matches(".message-action-button, .tool-call-header-copy")) {
+    return element.getBoundingClientRect().width
+  }
+  const widths: number[] = []
+  for (const child of element.childNodes) {
+    if (child instanceof Element) widths.push(contentWidth(child))
+    else if (child.nodeType === Node.TEXT_NODE && child.textContent?.trim()) {
+      const range = document.createRange()
+      range.selectNode(child)
+      widths.push(range.getBoundingClientRect().width)
+    }
+  }
+  const visible = widths.filter((width) => width > 0)
+  const stacked = style.flexDirection === "column"
+  const content = stacked ? Math.max(0, ...visible) : visible.reduce((a, b) => a + b, 0)
+  return content + (stacked ? 0 : Math.max(0, visible.length - 1) * px(style.columnGap))
+    + px(style.paddingLeft) + px(style.paddingRight) + px(style.borderLeftWidth) + px(style.borderRightWidth)
+}
+
+export function observeActionOverflow(element: HTMLElement) {
+  let frame = 0
+  let disposed = false
+  const measure = () => {
+    frame = 0
+    if (disposed || !element.isConnected || !element.clientWidth) return
+    const menu = element.querySelector<HTMLButtonElement>(".action-overflow-narrow")
+    if (!menu) return
+    // Preserve an open menu during a resize; re-evaluate when it closes.
+    const next = menu.hasAttribute("data-expanded") || contentWidth(element) > element.getBoundingClientRect().width + 0.5
+    if (element.dataset.contentOverflow === String(next)) return
+    const active = document.activeElement
+    const hadActionFocus = active instanceof Element && active.matches(".message-action-button, .tool-call-header-copy") && element.contains(active)
+    element.dataset.contentOverflow = String(next)
+    for (const control of element.querySelectorAll<HTMLElement>(".message-action-group, .tool-call-header-copy:not(.action-overflow-trigger)")) control.inert = next
+    if (hadActionFocus) queueMicrotask(() => {
+      if (disposed) return
+      const target = next ? menu : element.querySelector<HTMLButtonElement>(".message-action-group button:not(:disabled), .tool-call-header-copy:not(.action-overflow-trigger):not(:disabled)")
+      target?.focus({ preventScroll: true })
+    })
+  }
+  const schedule = () => { if (!frame && !disposed) frame = requestAnimationFrame(measure) }
+  const resize = new ResizeObserver(schedule)
+  resize.observe(element)
+  const mutation = new MutationObserver(schedule)
+  mutation.observe(element, { subtree: true, childList: true, characterData: true, attributes: true, attributeFilter: ["data-expanded"] })
+  document.fonts?.addEventListener("loadingdone", schedule)
+  schedule()
+  onCleanup(() => {
+    disposed = true
+    cancelAnimationFrame(frame)
+    resize.disconnect()
+    mutation.disconnect()
+    document.fonts?.removeEventListener("loadingdone", schedule)
+  })
+}
diff --git a/packages/ui/src/components/message-content-icons.ts b/packages/ui/src/components/message-content-icons.ts
new file mode 100644
index 000000000..8236d4807
--- /dev/null
+++ b/packages/ui/src/components/message-content-icons.ts
@@ -0,0 +1,59 @@
+import {
+  BookOpen,
+  Brain,
+  CheckSquare,
+  ClipboardCheck,
+  Coins,
+  FileEdit,
+  Globe,
+  GraduationCap,
+  HelpCircle,
+  LayoutGrid,
+  Link2,
+  LogIn,
+  Paperclip,
+  Pencil,
+  Search,
+  Stethoscope,
+  Terminal,
+  X,
+} from "lucide-solid"
+
+export type MessageContentIcon = typeof Brain
+
+const contentIcons = {
+  thinking: Brain,
+  diagnostics: Stethoscope,
+  inputs: LogIn,
+  usage: Coins,
+  bash: Terminal,
+  read: BookOpen,
+  write: FileEdit,
+  edit: Pencil,
+  patch: Paperclip,
+  apply_patch: Link2,
+  webfetch: Globe,
+  glob: Search,
+  grep: Search,
+  todowrite: ClipboardCheck,
+  task: CheckSquare,
+  skill: GraduationCap,
+  question: HelpCircle,
+  invalid: X,
+  other: LayoutGrid,
+} satisfies Record<string, MessageContentIcon>
+
+const aliases: Record<string, keyof typeof contentIcons> = {
+  "apply-patch": "apply_patch",
+  shell: "bash",
+  terminal: "bash",
+  todo: "todowrite",
+  todo_write: "todowrite",
+  web_fetch: "webfetch",
+}
+
+export function getMessageContentIcon(contentKey?: string | null): MessageContentIcon {
+  const normalized = contentKey?.trim().toLowerCase().replace(/^opencode_/, "") ?? ""
+  const key = aliases[normalized] ?? normalized
+  return contentIcons[key as keyof typeof contentIcons] ?? contentIcons.other
+}
diff --git a/packages/ui/src/components/message-item.tsx b/packages/ui/src/components/message-item.tsx
index 885c0ede6..820ce792c 100644
--- a/packages/ui/src/components/message-item.tsx
+++ b/packages/ui/src/components/message-item.tsx
@@ -1,6 +1,6 @@
 import { For, Show, createEffect, createSignal, onCleanup } from "solid-js"
 import { Portal } from "solid-js/web"
-import { Copy, Eraser, Pencil, Play, Split, Trash2, Undo, Volume2 } from "lucide-solid"
+import { Bot, User, Copy, Eraser, Pencil, Play, Split, Trash2, Undo, Volume2 } from "lucide-solid"
 import type { SessionInboxUser } from "@opencode-ai/client"
 import type { MessageInfo, ClientPart } from "../types/message"
 import { isHiddenSyntheticTextPart, partHasRenderableText } from "../types/message"
@@ -11,6 +11,7 @@ import { useI18n } from "../lib/i18n"
 import { isTauriHost } from "../lib/runtime-env"
 import { useSpeech } from "../lib/hooks/use-speech"
 import ActionOverflowMenu, { type ActionOverflowMenuItem } from "./action-overflow-menu"
+import { observeActionOverflow } from "./measured-action-overflow"
 import { getMessageDurationMs, getMessageStartedAt } from "../lib/message-timing"
 import SpeechActionButton from "./speech-action-button"
 import { getUserMessageMenuState, shouldShowGeneratingPlaceholder } from "../stores/message-v2/message-status"
@@ -546,11 +547,21 @@ export default function MessageItem(props: MessageItemProps) {
       data-assistant-text-block={isAssistantTextBlock() ? "true" : undefined}
     >
       <header class="message-item-header pb-0">
-        <div class="message-item-header-row message-item-header-row--top" ref={(el) => (topRowEl = el)}>
+        <div class="message-item-header-row message-item-header-row--top" ref={(el) => { topRowEl = el; observeActionOverflow(el) }}>
           <div class="message-header-left">
             <div class="message-speaker-primary" ref={(el) => (speakerPrimaryEl = el)}>
               <span class="message-speaker-label" data-role={isUser() ? "user" : "assistant"} title={workedDurationTooltip() || undefined}>
-                {speakerLabel()}
+                <Show when={isUser()} fallback={
+                  <span class="inline-flex items-center gap-1">
+                    <Bot class="w-3.5 h-3.5 shrink-0" aria-hidden="true" />
+                    {speakerLabel()}
+                  </span>
+                }>
+                  <span class="inline-flex items-center gap-1">
+                    <User class="w-3.5 h-3.5 shrink-0" aria-hidden="true" />
+                    {speakerLabel()}
+                  </span>
+                </Show>
               </span>
               <time class="message-timestamp message-timestamp-inline" dateTime={timestampIso()}>{timestamp()}</time>
             </div>
@@ -569,6 +580,10 @@ export default function MessageItem(props: MessageItemProps) {
             </Show>
           </div>
 
+          <Show when={isUser() && userMenuState() === "queue"}>
+            <span class="message-queued-badge">{t("messageItem.status.queued")}</span>
+          </Show>
+
           <div
             class="message-item-actions"
             data-action-overflow={actionMenuItems(true).length >= 2 ? "true" : undefined}
@@ -685,10 +700,6 @@ export default function MessageItem(props: MessageItemProps) {
 
       <div class="pt-0 whitespace-pre-wrap break-words leading-[1.1]" dir="auto">
 
-        <Show when={isUser() && userMenuState() === "queue"}>
-          <div class="message-queued-badge">{t("messageItem.status.queued")}</div>
-        </Show>
-
         <Show when={errorMessage()}>
           <div class="message-error-block" dir="auto">⚠️ {errorMessage()}</div>
         </Show>
@@ -744,7 +755,7 @@ export default function MessageItem(props: MessageItemProps) {
                         />
                       </svg>
                     }>
-                      <img src={attachment.url} alt={name} class="h-5 w-5 rounded object-cover" />
+                      <img src={attachment.url} alt={name} class="h-5 w-5 object-cover" />
                     </Show>
                     <span class="truncate max-w-[180px]">{name}</span>
                     <Show when={!attachment.url?.startsWith("file://")}>
@@ -793,12 +804,6 @@ export default function MessageItem(props: MessageItemProps) {
           }}
         </Show>
 
-        <Show when={isUser() && userMenuState() === "queue"}>
-          <div class="message-sending">
-            <span class="generating-spinner">●</span> {t("messageItem.status.sending")}
-          </div>
-        </Show>
-
         <Show when={props.record.status === "error"}>
           <div class="message-error">⚠ {t("messageItem.status.failedToSend")}</div>
         </Show>
diff --git a/packages/ui/src/components/message-part.tsx b/packages/ui/src/components/message-part.tsx
index 0d9f75229..296d1a780 100644
--- a/packages/ui/src/components/message-part.tsx
+++ b/packages/ui/src/components/message-part.tsx
@@ -127,7 +127,7 @@ export default function MessagePart(props: MessagePartProps) {
 
     return (
       <details
-        class="rounded-md border border-base bg-transparent"
+        class="border border-base bg-transparent"
         onToggle={(event) => {
           const nextOpen = (event.currentTarget as HTMLDetailsElement).open
           if (nextOpen) {
@@ -135,7 +135,7 @@ export default function MessagePart(props: MessagePartProps) {
           }
         }}
       >
-        <summary class="flex items-center justify-between gap-3 cursor-pointer list-none rounded-md bg-surface-secondary px-3 py-1.5 select-none text-xs font-medium text-secondary [&::-webkit-details-marker]:hidden">
+        <summary class="flex items-center justify-between gap-3 cursor-pointer list-none bg-surface-secondary px-3 py-1.5 select-none text-xs font-medium text-secondary [&::-webkit-details-marker]:hidden">
           <span class="min-w-0 flex flex-1 items-center gap-2">
             <span>{t("messagePart.pastedText.summary")}</span>
             <span class="text-[11px] text-secondary/80">{lineCountLabel()}</span>
@@ -146,7 +146,7 @@ export default function MessagePart(props: MessagePartProps) {
             </span>
             <button
               type="button"
-              class="inline-flex h-6 w-6 items-center justify-center rounded text-secondary hover:bg-surface-tertiary"
+              class="inline-flex h-6 w-6 items-center justify-center text-secondary hover:bg-surface-tertiary"
               onClick={(event) => void handleCopy(event)}
               aria-label={t("messagePart.pastedText.copyAriaLabel")}
               title={t("messagePart.pastedText.copyAriaLabel")}
diff --git a/packages/ui/src/components/message-section.tsx b/packages/ui/src/components/message-section.tsx
index 1dd14bc6c..0e04d332b 100644
--- a/packages/ui/src/components/message-section.tsx
+++ b/packages/ui/src/components/message-section.tsx
@@ -1,5 +1,6 @@
-import { Show, batch, createEffect, createMemo, createSignal, onCleanup, on, untrack } from "solid-js"
-import { ArrowUpDown, ChevronDown, ChevronUp, Pause, Search, X } from "lucide-solid"
+import { Show, batch, createEffect, createMemo, createSignal, onCleanup, on, untrack, type JSX } from "solid-js"
+import { ArrowDown, ArrowUp, ChevronDown, ChevronUp, Search, X } from "lucide-solid"
+import { Portal } from "solid-js/web"
 import Kbd from "./kbd"
 import BrandedEmptyState from "./branded-empty-state"
 import LoadErrorState from "./load-error-state"
@@ -39,7 +40,14 @@ const SEARCH_MIN_CHARS = 3
 const OPEN_SESSION_SEARCH_EVENT = "codenomad:open-session-search"
 const log = getLogger("session")
 
+function TimelinePlacement(props: { mount?: HTMLElement; children: JSX.Element }) {
+  return <Show when={props.mount} fallback={props.children}>
+    {(mount) => <Portal mount={mount()}>{props.children}</Portal>}
+  </Show>
+}
+
 export interface MessageSectionProps {
+  timelineMount?: HTMLElement
   instanceId: string
   sessionId: string
   loading?: boolean
@@ -71,7 +79,7 @@ export interface MessageSectionProps {
 }
 
 export default function MessageSection(props: MessageSectionProps) {
-  const { preferences, updatePreferences } = useConfig()
+  const { preferences } = useConfig()
   const { locale, t } = useI18n()
   const usageMetricsVisibility = () =>
     preferences().showUsageMetrics ? preferences().usageMetricsExpansion : "hidden"
@@ -350,14 +358,10 @@ export default function MessageSection(props: MessageSectionProps) {
   const isActive = createMemo(() => props.isActive !== false)
   const [listApi, setListApi] = createSignal<VirtualFollowListApi | null>(null)
   const [listState, setListState] = createSignal<VirtualFollowListState | null>(null)
-  const [scrollControlsOpen, setScrollControlsOpen] = createSignal(false)
-  const [scrollControlsHoverSuppressed, setScrollControlsHoverSuppressed] = createSignal(false)
   const scrollButtonsCount = createMemo(() => listState()?.scrollButtonsCount() ?? 0)
 
   const [streamElement, setStreamElement] = createSignal<HTMLDivElement | undefined>()
   const [streamShellElement, setStreamShellElement] = createSignal<HTMLDivElement | undefined>()
-  let scrollControlsRef: HTMLDivElement | undefined
-
   // Only preferences should force a follow-token re-anchor. Message/session
   // revision churn at the end of a turn (terminal updates, session idle, etc.)
   // should not trigger an immediate scroll-to-bottom.
@@ -505,44 +509,6 @@ export default function MessageSection(props: MessageSectionProps) {
     return streamingAssistantTextMessageId()
   })
 
-  function toggleHoldLongAssistantReplies() {
-    updatePreferences({ holdLongAssistantReplies: !holdLongAssistantRepliesEnabled() })
-  }
-
-  function closeScrollControls() {
-    setScrollControlsOpen(false)
-  }
-
-  function openScrollControlsFromTrigger(event: MouseEvent) {
-    event.preventDefault()
-    event.stopPropagation()
-    if (scrollControlsOpen()) return
-    setScrollControlsHoverSuppressed(false)
-    setScrollControlsOpen(true)
-  }
-
-  function runScrollControlAction(event: PointerEvent, action: () => void) {
-    event.preventDefault()
-    event.stopPropagation()
-    action()
-    setScrollControlsHoverSuppressed(false)
-    closeScrollControls()
-  }
-
-  createEffect(() => {
-    if (!scrollControlsOpen()) return
-    if (typeof document === "undefined") return
-
-    const handlePointerDown = (event: PointerEvent) => {
-      const target = event.target as Node | null
-      if (target && scrollControlsRef?.contains(target)) return
-      closeScrollControls()
-    }
-
-    document.addEventListener("pointerdown", handlePointerDown)
-    onCleanup(() => document.removeEventListener("pointerdown", handlePointerDown))
-  })
-
   function isStreamingAssistantTextMessage(messageId: string | null | undefined) {
     if (!messageId) return false
     const resolvedStore = store()
@@ -1140,7 +1106,7 @@ export default function MessageSection(props: MessageSectionProps) {
       data-stream-active={isActive() ? "true" : "false"}
     >
       <div
-        class={`message-layout${showTimeline() ? " message-layout--with-timeline" : ""}`}
+        class={`message-layout${showTimeline() && !props.timelineMount ? " message-layout--with-timeline" : ""}`}
         data-scroll-buttons={scrollButtonsCount()}
       >
         <VirtualFollowList
@@ -1192,77 +1158,30 @@ export default function MessageSection(props: MessageSectionProps) {
           scrollToBottomAriaLabel={() => t("messageSection.scroll.toLatestAriaLabel")}
           registerApi={registerListApi}
           registerState={(state) => setListState(state)}
-          renderControls={(state, api) => (
-            <div
-              ref={(el) => {
-                scrollControlsRef = el
-              }}
-              class="message-scroll-controls"
-              data-open={scrollControlsOpen() ? "true" : "false"}
-              data-hover-suppressed={scrollControlsHoverSuppressed() ? "true" : "false"}
-              onPointerLeave={(event) => {
-                if (event.pointerType === "mouse") setScrollControlsHoverSuppressed(false)
-              }}
-            >
-              <button
-                type="button"
-                class="message-scroll-button message-scroll-controls-trigger"
-                onClick={openScrollControlsFromTrigger}
-                aria-label={t("messageSection.scroll.showControlsAriaLabel")}
-                title={t("messageSection.scroll.showControlsAriaLabel")}
-              >
-                <ArrowUpDown class="message-scroll-icon w-4 h-4" aria-hidden="true" />
-              </button>
-
-              <div class="message-scroll-controls-expanded">
+          renderControls={(state) => (
+            <div class="message-scroll-controls">
+              <Show when={state.showScrollTopButton()}>
                 <button
                   type="button"
                   class="message-scroll-button"
-                  data-active={holdLongAssistantRepliesEnabled() ? "true" : "false"}
-                  onPointerUp={(event) => runScrollControlAction(event, toggleHoldLongAssistantReplies)}
-                  aria-pressed={holdLongAssistantRepliesEnabled()}
-                  aria-label={
-                    holdLongAssistantRepliesEnabled()
-                      ? t("messageSection.scroll.disableHoldAriaLabel")
-                      : t("messageSection.scroll.enableHoldAriaLabel")
-                  }
-                  title={
-                    holdLongAssistantRepliesEnabled()
-                      ? t("messageSection.scroll.disableHoldAriaLabel")
-                      : t("messageSection.scroll.enableHoldAriaLabel")
-                  }
+                  onClick={() => void pageWindow("oldest", (api) => api.scrollToTop({ immediate: true }))}
+                  aria-label={t("messageSection.scroll.toFirstAriaLabel")}
+                  title={t("messageSection.scroll.toFirstAriaLabel")}
                 >
-                  <Pause class="message-scroll-icon message-scroll-icon--toggle w-4 h-4" aria-hidden="true" />
+                  <ArrowUp class="message-scroll-icon w-4 h-4" aria-hidden="true" />
                 </button>
-                <Show when={state.showScrollTopButton()}>
-                  <button
-                    type="button"
-                    class="message-scroll-button"
-                    onPointerUp={(event) => runScrollControlAction(event, () => {
-                      void pageWindow("oldest", (next) => next.scrollToTop({ immediate: true }))
-                    })}
-                    aria-label={t("messageSection.scroll.toFirstAriaLabel")}
-                  >
-                    <span class="message-scroll-icon" aria-hidden="true">
-                      ↑
-                    </span>
-                  </button>
-                </Show>
-                <Show when={state.showScrollBottomButton()}>
-                  <button
-                    type="button"
-                    class="message-scroll-button"
-                    onPointerUp={(event) => runScrollControlAction(event, () => {
-                      void pageWindow("latest", (next) => next.scrollToBottom({ immediate: true }))
-                    })}
-                    aria-label={t("messageSection.scroll.toLatestAriaLabel")}
-                  >
-                    <span class="message-scroll-icon" aria-hidden="true">
-                      ↓
-                    </span>
-                  </button>
-                </Show>
-              </div>
+              </Show>
+              <Show when={state.showScrollBottomButton()}>
+                <button
+                  type="button"
+                  class="message-scroll-button"
+                  onClick={() => void pageWindow("latest", (api) => api.scrollToBottom({ immediate: true }))}
+                  aria-label={t("messageSection.scroll.toLatestAriaLabel")}
+                  title={t("messageSection.scroll.toLatestAriaLabel")}
+                >
+                  <ArrowDown class="message-scroll-icon w-4 h-4" aria-hidden="true" />
+                </button>
+              </Show>
             </div>
           )}
           renderBeforeItems={() => (
@@ -1492,6 +1411,7 @@ export default function MessageSection(props: MessageSectionProps) {
         />
 
         <Show when={showTimeline()}>
+          <TimelinePlacement mount={props.timelineMount}>
           <div class="message-timeline-sidebar">
             <MessageTimeline
               segments={timelineSegments()}
@@ -1505,6 +1425,7 @@ export default function MessageSection(props: MessageSectionProps) {
               activeSearchSegmentId={activeSearchTimelineSegmentId}
             />
           </div>
+          </TimelinePlacement>
         </Show>
       </div>
     </div>
diff --git a/packages/ui/src/components/message-timeline.tsx b/packages/ui/src/components/message-timeline.tsx
index 19cb8a160..726bdea27 100644
--- a/packages/ui/src/components/message-timeline.tsx
+++ b/packages/ui/src/components/message-timeline.tsx
@@ -1,6 +1,6 @@
 import { Show, createEffect, createMemo, createSignal, onCleanup, on, type Component, type Accessor } from "solid-js"
 import { Virtualizer, type VirtualizerHandle } from "virtua/solid"
-import { Portal } from "solid-js/web"
+import { Dynamic, Portal } from "solid-js/web"
 import MessagePreview from "./message-preview"
 import { messageStoreBus } from "../stores/message-v2/bus"
 import type { ClientPart } from "../types/message"
@@ -8,10 +8,10 @@ import { isHiddenSyntheticTextPart } from "../types/message"
 import type { MessageRecord } from "../stores/message-v2/types"
 import { buildRecordDisplayData } from "../stores/message-v2/record-display-cache"
 import { getPartCharCount } from "../lib/token-utils"
-import { getToolIcon } from "./tool-call/utils"
-import { User as UserIcon, Bot as BotIcon, FoldVertical, ShieldAlert } from "lucide-solid"
+import { User as UserIcon, Bot as BotIcon, FoldVertical } from "lucide-solid"
 import { useI18n } from "../lib/i18n"
 import { getBottomAnchoredViewportOffset } from "./virtual-follow-behavior"
+import { getMessageContentIcon } from "./message-content-icons"
 
 export type TimelineSegmentType = "user" | "assistant" | "tool" | "compaction"
 
@@ -21,7 +21,7 @@ export interface TimelineSegment {
   type: TimelineSegmentType
   label: string
   tooltip: string
-  shortLabel?: string
+  toolName?: string
   variant?: "auto" | "manual"
   toolPartIds?: string[]
   partIds?: string[]
@@ -188,7 +188,6 @@ export function buildTimelineSegments(
       return
     }
     const label = segmentLabel(pending.type)
-    const shortLabel = undefined
     const tooltip = formatTextsTooltip(
       [...pending.texts, ...pending.reasoningTexts],
       pending.type === "user" ? t("messageTimeline.tooltip.userFallback") : t("messageTimeline.tooltip.assistantFallback"),
@@ -200,7 +199,6 @@ export function buildTimelineSegments(
       type: pending.type,
       label,
       tooltip,
-      shortLabel,
       partIds: pending.partIds,
       totalChars: pending.totalChars,
     })
@@ -232,6 +230,7 @@ export function buildTimelineSegments(
     if (part.type === "tool") {
       flushPending()
       const toolPart = part as ToolCallPart
+      const toolName = typeof toolPart.tool === "string" ? toolPart.tool.trim() : ""
       const partId = typeof toolPart.id === "string" ? toolPart.id : ""
       const title = getToolTitle(toolPart, t)
       result.push({
@@ -240,7 +239,7 @@ export function buildTimelineSegments(
         type: "tool",
         label: getToolTypeLabel(toolPart, t) || segmentLabel("tool"),
         tooltip: formatToolTooltip([title], t),
-        shortLabel: getToolIcon(typeof toolPart.tool === "string" ? toolPart.tool : "tool"),
+        toolName,
         toolPartIds: partId ? [partId] : undefined,
         totalChars: getPartCharCount(part),
       })
@@ -590,10 +589,7 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
 
             const shortLabelContent = () => {
               if (segment.type === "tool") {
-                if (hasActivePermission()) {
-                  return <ShieldAlert class="message-timeline-icon" aria-hidden="true" />
-                }
-                return segment.shortLabel ?? getToolIcon("tool")
+                return <Dynamic component={getMessageContentIcon(segment.toolName)} class="message-timeline-icon" aria-hidden="true" />
               }
               if (segment.type === "compaction") {
                 return <FoldVertical class="message-timeline-icon" aria-hidden="true" />
diff --git a/packages/ui/src/components/model-selector.tsx b/packages/ui/src/components/model-selector.tsx
index a8f0279dd..7a2c7d713 100644
--- a/packages/ui/src/components/model-selector.tsx
+++ b/packages/ui/src/components/model-selector.tsx
@@ -403,7 +403,7 @@ export default function ModelSelector(props: ModelSelectorProps) {
         <ComboboxInputValue value={inputValue()} />
         <Combobox.Control class="relative w-full" data-model-selector-control>
           <Combobox.Input class="sr-only" data-model-selector aria-label={currentModelAccessibleLabel()} />
-          <Combobox.Trigger class="selector-trigger" aria-label={currentModelAccessibleLabel()}>
+          <Combobox.Trigger class="selector-trigger" aria-label={currentModelAccessibleLabel()} title={currentModelAccessibleLabel()}>
             <div class="selector-trigger-label selector-trigger-label--stacked flex-1 min-w-0">
               <span class="selector-trigger-primary selector-trigger-primary--align-left">
                 <span class="session-sidebar-selector-prefix">{t("modelSelector.trigger.primary", { model: "" }).trim()}</span>{" "}
diff --git a/packages/ui/src/components/notifications-settings-modal.tsx b/packages/ui/src/components/notifications-settings-modal.tsx
deleted file mode 100644
index 9b73d493b..000000000
--- a/packages/ui/src/components/notifications-settings-modal.tsx
+++ /dev/null
@@ -1,232 +0,0 @@
-import { Dialog } from "@kobalte/core/dialog"
-import { Component, Show, createEffect, createResource } from "solid-js"
-import { showToastNotification } from "../lib/notifications"
-import {
-  getOsNotificationCapability,
-  requestOsNotificationPermission,
-  type OsNotificationPermission,
-} from "../lib/os-notifications"
-import { useConfig } from "../stores/preferences"
-
-interface NotificationsSettingsModalProps {
-  open: boolean
-  onClose: () => void
-}
-
-function formatPermissionLabel(permission: OsNotificationPermission): string {
-  switch (permission) {
-    case "granted":
-      return "Granted"
-    case "denied":
-      return "Denied"
-    case "default":
-      return "Not granted"
-    case "unsupported":
-      return "Unsupported"
-    default:
-      return String(permission)
-  }
-}
-
-const NotificationsSettingsModal: Component<NotificationsSettingsModalProps> = (props) => {
-  const { preferences, updatePreferences } = useConfig()
-
-  const [capability, { refetch }] = createResource(() => getOsNotificationCapability())
-
-  createEffect(() => {
-    if (props.open) {
-      void refetch()
-    }
-  })
-
-  const handleEnableToggle = async (enabled: boolean) => {
-    if (!enabled) {
-      updatePreferences({ osNotificationsEnabled: false })
-      return
-    }
-
-    const cap = capability()
-    if (cap && !cap.supported) {
-      showToastNotification({
-        title: "Notifications",
-        message: cap.info ?? "OS notifications are not supported in this environment.",
-        variant: "warning",
-      })
-      updatePreferences({ osNotificationsEnabled: false })
-      return
-    }
-
-    const permission = await requestOsNotificationPermission()
-    if (permission !== "granted") {
-      showToastNotification({
-        title: "Notifications",
-        message:
-          permission === "denied"
-            ? "Notification permission denied. Enable notifications in your system/browser settings."
-            : "Notification permission not granted.",
-        variant: "warning",
-      })
-      updatePreferences({ osNotificationsEnabled: false })
-      return
-    }
-
-    updatePreferences({ osNotificationsEnabled: true })
-    void refetch()
-  }
-
-  const handleRequestPermission = async () => {
-    const cap = capability()
-    if (cap && !cap.supported) {
-      showToastNotification({
-        title: "Notifications",
-        message: cap.info ?? "Notifications are not supported in this environment.",
-        variant: "warning",
-      })
-      return
-    }
-
-    const permission = await requestOsNotificationPermission()
-    if (permission === "granted") {
-      showToastNotification({
-        title: "Notifications",
-        message: "Permission granted. You can now enable notifications.",
-        variant: "success",
-        duration: 6000,
-      })
-      void refetch()
-      return
-    }
-
-    showToastNotification({
-      title: "Notifications",
-      message:
-        permission === "denied"
-          ? "Permission denied. You may need to enable notifications in your system/browser settings."
-          : "Permission not granted.",
-      variant: "warning",
-    })
-    void refetch()
-  }
-
-  const supported = () => capability()?.supported ?? false
-  const permissionLabel = () => formatPermissionLabel(capability()?.permission ?? "unsupported")
-  const infoMessage = () => capability()?.info
-
-  return (
-    <Dialog open={props.open} onOpenChange={(open) => !open && props.onClose()}>
-      <Dialog.Portal>
-        <Dialog.Overlay class="modal-overlay" />
-        <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
-          <Dialog.Content class="modal-surface w-full max-w-xl max-h-[90vh] flex flex-col overflow-hidden">
-            <header class="window-header">
-              <Dialog.Title class="window-title">Notifications</Dialog.Title>
-            </header>
-
-            <div class="window-body space-y-6">
-              <div class="panel">
-                <div class="panel-header">
-                  <h3 class="panel-title">Session Status Notifications</h3>
-                </div>
-
-                <div class="panel-body space-y-4">
-                  <div class="flex items-center justify-between gap-4">
-                    <div>
-                      <div class="text-sm font-semibold text-primary">Enable</div>
-                      <div class="text-xs text-secondary">Permission: {permissionLabel()}</div>
-                    </div>
-                    <label class="inline-flex items-center gap-2">
-                      <input
-                        type="checkbox"
-                        checked={Boolean(preferences().osNotificationsEnabled)}
-                        disabled={!supported() && capability.state === "ready"}
-                        onChange={(e) => void handleEnableToggle(e.currentTarget.checked)}
-                      />
-                      <span class="text-sm">Enabled</span>
-                    </label>
-                  </div>
-
-                  <Show when={supported() && (capability()?.permission ?? "unsupported") !== "granted"}>
-                    <div class="flex items-center justify-between gap-4">
-                      <div class="text-sm text-primary">Request permission</div>
-                      <button
-                        type="button"
-                        class="selector-button selector-button-secondary w-auto whitespace-nowrap"
-                        onClick={() => void handleRequestPermission()}
-                      >
-                        Request
-                      </button>
-                    </div>
-                  </Show>
-
-                  <div class="flex items-center justify-between gap-4">
-                    <div>
-                      <div class="text-sm font-semibold text-primary">Notify when app is focused</div>
-                    </div>
-                    <label class="inline-flex items-center gap-2">
-                      <input
-                        type="checkbox"
-                        checked={Boolean(preferences().osNotificationsAllowWhenVisible)}
-                        disabled={!preferences().osNotificationsEnabled}
-                        onChange={(e) => updatePreferences({ osNotificationsAllowWhenVisible: e.currentTarget.checked })}
-                      />
-                      <span class="text-sm">Enabled</span>
-                    </label>
-                  </div>
-
-                  <Show when={Boolean(infoMessage())}>
-                    <div class="text-xs text-secondary">{infoMessage()}</div>
-                  </Show>
-
-                  <Show when={!supported() && capability.state === "ready"}>
-                    <div class="text-xs text-secondary">
-                      Notifications are not supported in this environment. The bell icon stays disabled.
-                    </div>
-                  </Show>
-
-                  <div class="border-t pt-4" style={{ "border-color": "var(--border-base)" }}>
-                    <div class="text-sm font-semibold text-primary mb-2">Notify me when</div>
-                    <div class="space-y-3">
-                      <div class="flex items-center justify-between gap-4">
-                        <div class="text-sm text-primary">Session needs input</div>
-                        <label class="inline-flex items-center gap-2">
-                          <input
-                            type="checkbox"
-                            checked={Boolean(preferences().notifyOnNeedsInput)}
-                            disabled={!preferences().osNotificationsEnabled}
-                            onChange={(e) => updatePreferences({ notifyOnNeedsInput: e.currentTarget.checked })}
-                          />
-                          <span class="text-sm">Enabled</span>
-                        </label>
-                      </div>
-
-                      <div class="flex items-center justify-between gap-4">
-                        <div class="text-sm text-primary">Session becomes idle</div>
-                        <label class="inline-flex items-center gap-2">
-                          <input
-                            type="checkbox"
-                            checked={Boolean(preferences().notifyOnIdle)}
-                            disabled={!preferences().osNotificationsEnabled}
-                            onChange={(e) => updatePreferences({ notifyOnIdle: e.currentTarget.checked })}
-                          />
-                          <span class="text-sm">Enabled</span>
-                        </label>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <div class="window-footer">
-              <button type="button" class="selector-button selector-button-secondary" onClick={props.onClose}>
-                Close
-              </button>
-            </div>
-          </Dialog.Content>
-        </div>
-      </Dialog.Portal>
-    </Dialog>
-  )
-}
-
-export default NotificationsSettingsModal
diff --git a/packages/ui/src/components/project-rename-dialog.tsx b/packages/ui/src/components/project-rename-dialog.tsx
index 9212b963c..4df743b3e 100644
--- a/packages/ui/src/components/project-rename-dialog.tsx
+++ b/packages/ui/src/components/project-rename-dialog.tsx
@@ -80,7 +80,7 @@ const ProjectRenameDialog: Component<ProjectRenameDialogProps> = (props) => {
                   value={name()}
                   onInput={(event) => setName(event.currentTarget.value)}
                   placeholder={t("projectRenameDialog.input.placeholder")}
-                  class="w-full px-3 py-2 text-sm bg-surface-base border border-base rounded text-primary focus-ring-accent"
+                  class="w-full px-3 py-2 text-sm bg-surface-base border border-base text-primary focus-ring-accent"
                 />
               </div>
 
diff --git a/packages/ui/src/components/prompt-input.tsx b/packages/ui/src/components/prompt-input.tsx
index f18d13a8a..cf35f8077 100644
--- a/packages/ui/src/components/prompt-input.tsx
+++ b/packages/ui/src/components/prompt-input.tsx
@@ -934,7 +934,7 @@ export default function PromptInput(props: PromptInputProps) {
         data-compact-auto={compactLayoutEnabled() ? "true" : undefined}
         style={
           isDragging()
-            ? "border-color: var(--accent-primary); background-color: rgba(0, 102, 255, 0.05);"
+            ? "border-color: var(--accent-primary); background-color: color-mix(in oklab, var(--accent-primary) 5%, transparent);"
             : ""
         }
         onDragOver={handleDragOver}
@@ -1072,45 +1072,50 @@ export default function PromptInput(props: PromptInputProps) {
           disabled={props.disabled}
           onChange={handleFileInputChange}
         />
-        <div class="prompt-actions-menu">
-          <ActionOverflowMenu
-            items={promptActionMenuItems()}
-            label={t("messageItem.actions.more")}
-            triggerClass="prompt-actions-menu-trigger"
-          />
-        </div>
+        <div class="prompt-input-footer">
+          <div class="prompt-input-footer-context">{props.footerControls}</div>
+          <div class="prompt-input-footer-actions">
+            <div class="prompt-actions-menu">
+              <ActionOverflowMenu
+                items={promptActionMenuItems()}
+                label={t("messageItem.actions.more")}
+                triggerClass="prompt-actions-menu-trigger"
+              />
+            </div>
 
-        <div class="prompt-input-primary-actions">
-          <button
-            type="button"
-            class="stop-button"
-            onClick={handleAbort}
-            disabled={!canStop()}
-            aria-label={t("promptInput.stopSession.ariaLabel")}
-            title={t("promptInput.stopSession.title")}
-          >
-            <svg class="stop-icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-              <rect x="4" y="4" width="12" height="12" rx="2" />
-            </svg>
-          </button>
-          <button
-            type="button"
-            class={`send-button ${mode() === "shell" ? "shell-mode" : ""}`}
-            onClick={() => void handleSend()}
-            disabled={!canSend()}
-            aria-label={t(mode() === "normal" && promptDelivery() === "queue" ? "promptInput.send.queueAriaLabel" : "promptInput.send.ariaLabel")}
-            title={t(mode() === "normal" && promptDelivery() === "queue" ? "promptInput.send.queueAriaLabel" : "promptInput.send.ariaLabel")}
-          >
-            <Show
-              when={mode() === "shell"}
-              fallback={<span class="send-icon">▶</span>}
-            >
-              <svg class="shell-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M5 8l5 4-5 4" />
-                <path stroke-linecap="round" stroke-linejoin="round" d="M13 16h6" />
-              </svg>
-            </Show>
-          </button>
+            <div class="prompt-input-primary-actions">
+              <button
+                type="button"
+                class="stop-button"
+                onClick={handleAbort}
+                disabled={!canStop()}
+                aria-label={t("promptInput.stopSession.ariaLabel")}
+                title={t("promptInput.stopSession.title")}
+              >
+                <svg class="stop-icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                  <rect x="4" y="4" width="12" height="12" />
+                </svg>
+              </button>
+              <button
+                type="button"
+                class={`send-button ${mode() === "shell" ? "shell-mode" : ""}`}
+                onClick={() => void handleSend()}
+                disabled={!canSend()}
+                aria-label={t(mode() === "normal" && promptDelivery() === "queue" ? "promptInput.send.queueAriaLabel" : "promptInput.send.ariaLabel")}
+                title={t(mode() === "normal" && promptDelivery() === "queue" ? "promptInput.send.queueAriaLabel" : "promptInput.send.ariaLabel")}
+              >
+                <Show
+                  when={mode() === "shell"}
+                  fallback={<span class="send-icon">▶</span>}
+                >
+                  <svg class="shell-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 8l5 4-5 4" />
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M13 16h6" />
+                  </svg>
+                </Show>
+              </button>
+            </div>
+          </div>
         </div>
       </div>
 
diff --git a/packages/ui/src/components/prompt-input/PromptContextControls.tsx b/packages/ui/src/components/prompt-input/PromptContextControls.tsx
new file mode 100644
index 000000000..0ec18d7a5
--- /dev/null
+++ b/packages/ui/src/components/prompt-input/PromptContextControls.tsx
@@ -0,0 +1,38 @@
+import { Show, type Component } from "solid-js"
+import AgentSelector from "../agent-selector"
+import ModelSelector from "../model-selector"
+import ThinkingSelector from "../thinking-selector"
+import WorktreeSelector from "../worktree-selector"
+
+interface PromptContextControlsProps {
+  instanceId: string
+  sessionId: string
+  worktreeSessionId?: string
+  currentAgent: string
+  currentModel: { providerId: string; modelId: string }
+  onAgentChange: (agent: string) => Promise<void>
+  onModelChange: (model: { providerId: string; modelId: string }) => Promise<void>
+}
+
+const PromptContextControls: Component<PromptContextControlsProps> = (props) => (
+  <div class="prompt-context-controls" data-has-worktree={props.worktreeSessionId ? "true" : "false"}>
+    <Show when={props.worktreeSessionId}>
+      {(sessionId) => <WorktreeSelector instanceId={props.instanceId} sessionId={sessionId()} />}
+    </Show>
+    <AgentSelector
+      instanceId={props.instanceId}
+      sessionId={props.sessionId}
+      currentAgent={props.currentAgent}
+      onAgentChange={props.onAgentChange}
+    />
+    <ModelSelector
+      instanceId={props.instanceId}
+      sessionId={props.sessionId}
+      currentModel={props.currentModel}
+      onModelChange={props.onModelChange}
+    />
+    <ThinkingSelector instanceId={props.instanceId} currentModel={props.currentModel} />
+  </div>
+)
+
+export default PromptContextControls
diff --git a/packages/ui/src/components/prompt-input/types.ts b/packages/ui/src/components/prompt-input/types.ts
index 83467223a..cfc3ffc9b 100644
--- a/packages/ui/src/components/prompt-input/types.ts
+++ b/packages/ui/src/components/prompt-input/types.ts
@@ -1,4 +1,5 @@
 import type { SessionInboxUserPayload } from "@opencode-ai/client"
+import type { JSX } from "solid-js"
 import type { Attachment } from "../../types/attachment"
 
 export type PromptMode = "normal" | "shell"
@@ -35,5 +36,6 @@ export interface PromptInputProps {
   isSessionBusy?: boolean
   onAbortSession?: () => Promise<void>
   onBackgroundSession?: () => Promise<void>
+  footerControls?: JSX.Element
   registerPromptInputApi?: (api: PromptInputApi) => void | (() => void)
 }
diff --git a/packages/ui/src/components/provider-auth/provider-manager-modal.tsx b/packages/ui/src/components/provider-auth/provider-manager-modal.tsx
index 69668f7da..30f91ef9c 100644
--- a/packages/ui/src/components/provider-auth/provider-manager-modal.tsx
+++ b/packages/ui/src/components/provider-auth/provider-manager-modal.tsx
@@ -20,6 +20,7 @@ import { instances } from "../../stores/instances"
 import { fetchProviders, getActiveCatalogLocation } from "../../stores/sessions"
 import { toRequestLocation } from "../../stores/request-locations"
 import { getRootClient } from "../../stores/opencode-client"
+import { waitForPluginActivation } from "../../stores/plugin-activation"
 import { ProviderAuthForm } from "./provider-auth-form"
 import { buildListedProviders, buildProviderVisibilityModels, type ListedProvider as ProviderOption } from "./provider-options"
 import {
@@ -311,6 +312,7 @@ export const ProviderManagerModal: Component<ProviderManagerModalProps> = (props
     setLoadError(null)
     try {
       const location = { location: requestLocation(catalogLocation) }
+      await waitForPluginActivation(authClient, catalogLocation)
       const [providerResponse, modelResponse, integrationResponse] = await Promise.all([
         authClient.provider.list(location),
         authClient.model.list(location),
diff --git a/packages/ui/src/components/session-list.tsx b/packages/ui/src/components/session-list.tsx
index 89845551d..f47caf820 100644
--- a/packages/ui/src/components/session-list.tsx
+++ b/packages/ui/src/components/session-list.tsx
@@ -1,4 +1,4 @@
-import { Component, Show, createSignal, createMemo, createEffect, JSX, on, onCleanup } from "solid-js"
+import { Component, For, Show, createSignal, createMemo, createEffect, JSX, on, onCleanup } from "solid-js"
 import { Virtualizer, type VirtualizerHandle } from "virtua/solid"
 import type { SessionStatus } from "../types/session"
 import type { SessionThread } from "../stores/session-state"
@@ -7,6 +7,8 @@ import { Bot, User, Copy, Trash2, Pencil, ShieldAlert, ChevronRight, Search, Squ
 import KeyboardHint from "./keyboard-hint"
 import LoadErrorState from "./load-error-state"
 import SessionRenameDialog from "./session-rename-dialog"
+import ActionOverflowMenu, { type ActionOverflowMenuItem } from "./action-overflow-menu"
+import { useSessionRowOverflow } from "./session-row-overflow"
 import { keyboardRegistry } from "../lib/keyboard-registry"
 import { showToastNotification } from "../lib/notifications"
 import { useI18n } from "../lib/i18n"
@@ -75,6 +77,7 @@ const SessionList: Component<SessionListProps> = (props) => {
   const [listViewportAttached, setListViewportAttached] = createSignal(false)
   const [virtualizerHandle, setVirtualizerHandle] = createSignal<VirtualizerHandle>()
   const [focusedSessionId, setFocusedSessionId] = createSignal<string>()
+  const [menuSessionId, setMenuSessionId] = createSignal<string>()
   let attachmentFrame: number | undefined
 
   const setListElement = (element: HTMLDivElement) => {
@@ -231,10 +234,12 @@ const SessionList: Component<SessionListProps> = (props) => {
     return { ids, rowsById, indexById }
   })
   const keptMountedIndexes = createMemo(() => {
-    const sessionId = focusedSessionId()
-    if (!sessionId) return undefined
-    const index = visibleProjection().indexById.get(sessionId)
-    return index === undefined ? undefined : [index]
+    const indexes = new Set<number>()
+    for (const sessionId of [focusedSessionId(), menuSessionId()]) {
+      const index = sessionId ? visibleProjection().indexById.get(sessionId) : undefined
+      if (index !== undefined) indexes.add(index)
+    }
+    return indexes.size ? [...indexes] : undefined
   })
 
   const allMatchingSessionIds = createMemo<string[]>(() => {
@@ -281,9 +286,7 @@ const SessionList: Component<SessionListProps> = (props) => {
     props.onSelect(sessionId)
   }
  
-  const copySessionId = async (event: MouseEvent, sessionId: string) => {
-    event.stopPropagation()
-
+  const copySessionId = async (sessionId: string) => {
     try {
       const success = await copyToClipboard(sessionId)
       if (success) {
@@ -297,8 +300,7 @@ const SessionList: Component<SessionListProps> = (props) => {
     }
   }
  
-  const handleDeleteSession = async (event: MouseEvent, sessionId: string) => {
-    event.stopPropagation()
+  const handleDeleteSession = async (sessionId: string) => {
     if (isSessionDeleting(sessionId)) return
 
     const confirmed = await showConfirmDialog(
@@ -366,8 +368,7 @@ const SessionList: Component<SessionListProps> = (props) => {
 
   const isSessionReloading = (sessionId: string) => reloadingSessionIds().has(sessionId)
 
-  const handleReloadSession = async (event: MouseEvent, sessionId: string) => {
-    event.stopPropagation()
+  const handleReloadSession = async (sessionId: string) => {
     if (isSessionReloading(sessionId)) return
 
     setReloadingSessionIds((prev) => {
@@ -614,73 +615,92 @@ const SessionList: Component<SessionListProps> = (props) => {
 
     const nestedStyle = () => {
       if (!isChild()) return undefined
-      const visualDepth = Math.min(rowProps.depth, 6)
-      const indent = 1.375 + visualDepth * 0.875
       return {
-        "--session-indent": `${indent}rem`,
-        "--session-connector-offset": `${indent - 0.875}rem`,
+        "--session-indent": `calc(var(--session-root-indent) + ${rowProps.depth} * var(--session-tree-step))`,
       }
     }
 
+    const [rowElement, setRowElement] = createSignal<HTMLDivElement>()
+    const actionsOverflow = useSessionRowOverflow(rowElement)
+    const compactActions = () => actionsOverflow() || menuSessionId() === sessionId()
+    const actionItems: ActionOverflowMenuItem[] = [
+      {
+        key: "copy",
+        get label() { return t("sessionList.actions.copyId.title") },
+        get icon() { return <Copy class="w-3.5 h-3.5" /> },
+        onSelect: () => copySessionId(sessionId()),
+      },
+      {
+        key: "reload",
+        get label() { return t("sessionList.actions.reload.title") },
+        get icon() { return <RotateCw class="w-3.5 h-3.5" /> },
+        get disabled() { return isSessionReloading(sessionId()) },
+        onSelect: () => handleReloadSession(sessionId()),
+      },
+      {
+        key: "rename",
+        get label() { return t("sessionList.actions.rename.title") },
+        get icon() { return <Pencil class="w-3.5 h-3.5" /> },
+        onSelect: () => openRenameDialog(sessionId()),
+      },
+      {
+        key: "delete",
+        get label() { return t("sessionList.actions.delete.title") },
+        get icon() { return <Trash2 class="w-3.5 h-3.5" /> },
+        get disabled() { return isSessionDeleting(sessionId()) },
+        onSelect: () => handleDeleteSession(sessionId()),
+      },
+    ]
+
     return (
       <div class={`session-list-item group ${rowProps.isLastRow ? "session-list-item-last" : ""}`}>
-        <button
+        <div
           class={`session-item-base ${isChild() ? "session-item-nested" : ""} ${isChild() && rowProps.isLastChild ? "session-item-child-last" : ""} ${isChild() ? "session-item-border-assistant session-item-kind-assistant" : "session-item-border-user session-item-kind-user"} ${isActive() ? "session-item-active" : "session-item-inactive"}`}
           style={nestedStyle()}
           data-session-id={sessionId()}
-          onClick={() => selectSession(sessionId())}
-          title={title()}
-          role="button"
-          aria-selected={isActive()}
-          aria-expanded={rowProps.hasChildren ? Boolean(rowProps.expanded) : undefined}
+          ref={setRowElement}
+          data-compact-actions={compactActions()}
         >
-          <div class="session-item-row session-item-header">
-            <div class="session-item-title-row">
-              <Show when={props.enableFilterBar}>
-                <input
-                  ref={(el) => {
-                    rowCheckboxEl = el
-                  }}
-                  type="checkbox"
-                  checked={parentGroupState().checked}
-                  onClick={(event) => event.stopPropagation()}
-                  onChange={(event) => {
-                    event.stopPropagation()
-                    setSelectedMany(parentGroupState().ids, event.currentTarget.checked)
-                  }}
-                  aria-label={t("sessionList.selection.checkboxAriaLabel")}
-                />
-              </Show>
-
-              <Show when={isChild()} fallback={<User class="w-4 h-4 flex-shrink-0" />}>
-                <Bot class="w-4 h-4 flex-shrink-0" />
-              </Show>
-              <span class="session-item-title session-item-title--clamp" dir="auto">{title()}</span>
-            </div>
-          </div>
-          <div class="session-item-row session-item-meta">
-            <div class="flex items-center gap-2 min-w-0">
-              <Show
-                when={rowProps.hasChildren}
-                fallback={<span class="session-item-expander session-item-expander--spacer" aria-hidden="true" />}
-              >
-                <span
-                  class={`session-item-expander opacity-80 hover:opacity-100 ${isActive() ? "hover:bg-white/20" : "hover:bg-surface-hover"}`}
-                  onClick={(event) => {
-                    event.stopPropagation()
-                    rowProps.onToggleExpand?.()
-                  }}
-                  role="button"
-                  tabIndex={0}
-                  aria-expanded={Boolean(rowProps.expanded)}
-                  aria-label={
-                    rowProps.expanded ? t("sessionList.expand.collapseAriaLabel") : t("sessionList.expand.expandAriaLabel")
-                  }
-                  title={rowProps.expanded ? t("sessionList.expand.collapseTitle") : t("sessionList.expand.expandTitle")}
-                >
-                  <ChevronRight class="disclosure-chevron w-3.5 h-3.5" />
-                </span>
-              </Show>
+          <Show when={props.enableFilterBar}>
+            <input
+              ref={(el) => {
+                rowCheckboxEl = el
+              }}
+              type="checkbox"
+              checked={parentGroupState().checked}
+              onChange={(event) => setSelectedMany(parentGroupState().ids, event.currentTarget.checked)}
+              aria-label={t("sessionList.selection.checkboxAriaLabel")}
+            />
+          </Show>
+          <Show
+            when={rowProps.hasChildren}
+            fallback={<span class="session-item-expander session-item-expander--spacer" aria-hidden="true" />}
+          >
+            <button
+              type="button"
+              class={`session-item-expander opacity-80 hover:opacity-100 ${isActive() ? "hover:bg-white/20" : "hover:bg-surface-hover"}`}
+              onClick={() => rowProps.onToggleExpand?.()}
+              aria-expanded={Boolean(rowProps.expanded)}
+              aria-label={
+                rowProps.expanded ? t("sessionList.expand.collapseAriaLabel") : t("sessionList.expand.expandAriaLabel")
+              }
+              title={rowProps.expanded ? t("sessionList.expand.collapseTitle") : t("sessionList.expand.expandTitle")}
+            >
+              <ChevronRight class="disclosure-chevron w-3.5 h-3.5" />
+            </button>
+          </Show>
+          <button
+            type="button"
+            class="session-item-select"
+            onClick={() => selectSession(sessionId())}
+            title={title()}
+            aria-current={isActive() ? "true" : undefined}
+          >
+            <Show when={isChild()} fallback={<User class="session-item-kind-icon w-4 h-4 flex-shrink-0" aria-hidden="true" />}>
+              <Bot class="session-item-kind-icon w-4 h-4 flex-shrink-0" aria-hidden="true" />
+            </Show>
+            <span class="session-item-title session-item-title--clamp" dir="auto">{title()}</span>
+            <span class="session-item-badges">
               <Show when={showStatus()}>
                 <span
                   class={`status-indicator session-status session-status-list ${statusClassName()} notranslate`}
@@ -688,7 +708,7 @@ const SessionList: Component<SessionListProps> = (props) => {
                   translate="no"
                 >
                   {needsInput() ? <ShieldAlert class="w-3.5 h-3.5" aria-hidden="true" /> : <span class="status-dot" />}
-                  {statusText()}
+                  <span class="session-item-status-label">{statusText()}</span>
                 </span>
               </Show>
               <Show when={showWorktreeBadge()}>
@@ -697,73 +717,42 @@ const SessionList: Component<SessionListProps> = (props) => {
                   <span class="worktree-indicator-label">{worktreeSlug()}</span>
                 </span>
               </Show>
-            </div>
-            <div class="session-item-actions">
-              <span
-                class={`session-item-close opacity-80 hover:opacity-100 ${isActive() ? "hover:bg-white/20" : "hover:bg-surface-hover"}`}
-                onClick={(event) => copySessionId(event, sessionId())}
-                role="button"
-                tabIndex={0}
-                aria-label={t("sessionList.actions.copyId.ariaLabel")}
-                title={t("sessionList.actions.copyId.title")}
-              >
-                <Copy class="w-3 h-3" />
-              </span>
-              <span
-                class={`session-item-close opacity-80 hover:opacity-100 ${isActive() ? "hover:bg-white/20" : "hover:bg-surface-hover"}`}
-                onClick={(event) => handleReloadSession(event, sessionId())}
-                role="button"
-                tabIndex={0}
-                aria-label={t("sessionList.actions.reload.ariaLabel")}
-                title={t("sessionList.actions.reload.title")}
-              >
-                <Show
-                  when={!isSessionReloading(sessionId())}
-                  fallback={<RotateCw class="w-3 h-3 animate-spin" />}
+            </span>
+          </button>
+          <div class="session-item-actions">
+            <div class="session-item-inline-actions" inert={compactActions()}>
+              <For each={actionItems}>{(item) => (
+                <button
+                  type="button"
+                  class="session-item-close"
+                  title={item.label}
+                  aria-label={item.label}
+                  aria-disabled={item.disabled}
+                  onClick={() => { if (!item.disabled) void item.onSelect() }}
                 >
-                  <RotateCw class="w-3 h-3" />
-                </Show>
-              </span>
-              <span
-                class={`session-item-close opacity-80 hover:opacity-100 ${isActive() ? "hover:bg-white/20" : "hover:bg-surface-hover"}`}
-                onClick={(event) => {
-                  event.stopPropagation()
-                  openRenameDialog(sessionId())
+                  {item.icon}
+                </button>
+              )}</For>
+            </div>
+            <div class="session-item-overflow-actions">
+              <ActionOverflowMenu
+                label={t("messageItem.actions.more")}
+                onOpenChange={(open) => {
+                  setMenuSessionId(open ? sessionId() : undefined)
+                  if (!open && !actionsOverflow()) requestAnimationFrame(() => {
+                    const row = rowElement()
+                    if (!row?.isConnected) return
+                    const active = document.activeElement
+                    if (active === document.body || row.querySelector(".session-item-overflow-actions")?.contains(active)) {
+                      row.querySelector<HTMLButtonElement>(".session-item-inline-actions button")?.focus({ preventScroll: true })
+                    }
+                  })
                 }}
-                role="button"
-                tabIndex={0}
-                aria-label={t("sessionList.actions.rename.ariaLabel")}
-                title={t("sessionList.actions.rename.title")}
-              >
-                <Pencil class="w-3 h-3" />
-              </span>
-              <span
-                class={`session-item-close opacity-80 hover:opacity-100 ${isActive() ? "hover:bg-white/20" : "hover:bg-surface-hover"}`}
-                onClick={(event) => handleDeleteSession(event, sessionId())}
-                role="button"
-                tabIndex={0}
-                aria-label={t("sessionList.actions.delete.ariaLabel")}
-                title={t("sessionList.actions.delete.title")}
-              >
-                <Show
-                  when={!isSessionDeleting(sessionId())}
-                  fallback={
-                    <svg class="animate-spin h-3 w-3" fill="none" viewBox="0 0 24 24">
-                      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
-                      <path
-                        class="opacity-75"
-                        fill="currentColor"
-                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                      />
-                    </svg>
-                  }
-                >
-                  <Trash2 class="w-3 h-3" />
-                </Show>
-              </span>
+                items={actionItems}
+              />
             </div>
           </div>
-        </button>
+        </div>
       </div>
     )
   }
diff --git a/packages/ui/src/components/session-rename-dialog.tsx b/packages/ui/src/components/session-rename-dialog.tsx
index f414f240d..2a8bb13be 100644
--- a/packages/ui/src/components/session-rename-dialog.tsx
+++ b/packages/ui/src/components/session-rename-dialog.tsx
@@ -80,7 +80,7 @@ const SessionRenameDialog: Component<SessionRenameDialogProps> = (props) => {
                   value={title()}
                   onInput={(event) => setTitle(event.currentTarget.value)}
                   placeholder={t("sessionRenameDialog.input.placeholder")}
-                  class="w-full px-3 py-2 text-sm bg-surface-base border border-base rounded text-primary focus-ring-accent"
+                  class="w-full px-3 py-2 text-sm bg-surface-base border border-base text-primary focus-ring-accent"
                 />
               </div>
 
diff --git a/packages/ui/src/components/session-row-overflow.ts b/packages/ui/src/components/session-row-overflow.ts
new file mode 100644
index 000000000..81e1eb068
--- /dev/null
+++ b/packages/ui/src/components/session-row-overflow.ts
@@ -0,0 +1,75 @@
+import { createEffect, createSignal, onCleanup, type Accessor } from "solid-js"
+
+const pixels = (value: string) => Number.parseFloat(value) || 0
+
+function textWidth(element: Element): number {
+  const range = document.createRange()
+  range.selectNodeContents(element)
+  return range.getBoundingClientRect().width
+}
+
+function inlineChrome(element: Element): number {
+  const style = getComputedStyle(element)
+  return pixels(style.paddingLeft) + pixels(style.paddingRight) + pixels(style.borderLeftWidth) + pixels(style.borderRightWidth)
+}
+
+function flexWidth(element: Element, widths: number[]): number {
+  return inlineChrome(element) + widths.reduce((sum, width) => sum + width, 0)
+    + Math.max(0, widths.length - 1) * pixels(getComputedStyle(element).columnGap)
+}
+
+/** Measure the full row content, even while the inline actions are hidden.
+ * Comparing against the same full-action budget in both modes avoids oscillation.
+ */
+export function useSessionRowOverflow(row: Accessor<HTMLElement | undefined>) {
+  const [compact, setCompact] = createSignal(false)
+  createEffect(() => {
+    const element = row()
+    if (!element) return
+    let frame = 0
+    const measure = () => {
+      frame = 0
+      const select = element.querySelector<HTMLElement>(".session-item-select")
+      const inline = element.querySelector<HTMLElement>(".session-item-inline-actions")
+      const actions = element.querySelector<HTMLElement>(".session-item-actions")
+      if (!select || !inline || !actions || !element.getBoundingClientRect().width) return
+      const title = select.querySelector(".session-item-title")!
+      const icon = select.querySelector(".session-item-kind-icon")!
+      const badges = select.querySelector(".session-item-badges")!
+      const badgeWidths = [...badges.children].map((badge) => flexWidth(badge,
+        [...badge.children].map((child) => child.matches(".session-item-status-label, .worktree-indicator-label")
+          ? textWidth(child) : child.getBoundingClientRect().width),
+      ))
+      const widths = [icon.getBoundingClientRect().width, textWidth(title)]
+      if (badgeWidths.length) widths.push(flexWidth(badges, badgeWidths))
+      const required = flexWidth(select, widths) + inline.getBoundingClientRect().width
+      const available = select.getBoundingClientRect().width + actions.getBoundingClientRect().width
+      const next = required > available + 0.5
+      if (next === compact()) return
+      const hadActionFocus = actions.contains(document.activeElement)
+      setCompact(next)
+      if (hadActionFocus) queueMicrotask(() => {
+        if (!element.isConnected) return
+        const selector = next ? ".session-item-overflow-actions button" : ".session-item-inline-actions button:not(:disabled)"
+        element.querySelector<HTMLElement>(selector)?.focus({ preventScroll: true })
+      })
+    }
+    const schedule = () => {
+      if (!frame) frame = requestAnimationFrame(measure)
+    }
+    const resize = new ResizeObserver(schedule)
+    resize.observe(element)
+    for (const target of element.querySelectorAll(".session-item-select, .session-item-inline-actions")) resize.observe(target)
+    const mutation = new MutationObserver(schedule)
+    mutation.observe(element, { childList: true, characterData: true, subtree: true })
+    document.fonts?.addEventListener("loadingdone", schedule)
+    schedule()
+    onCleanup(() => {
+      cancelAnimationFrame(frame)
+      resize.disconnect()
+      mutation.disconnect()
+      document.fonts?.removeEventListener("loadingdone", schedule)
+    })
+  })
+  return compact
+}
diff --git a/packages/ui/src/components/session/context-usage-panel.tsx b/packages/ui/src/components/session/context-usage-panel.tsx
index 68dd5cc4f..458f6951c 100644
--- a/packages/ui/src/components/session/context-usage-panel.tsx
+++ b/packages/ui/src/components/session/context-usage-panel.tsx
@@ -10,7 +10,7 @@ interface ContextUsagePanelProps {
   class?: string
 }
 
-const chipClass = "inline-flex items-center gap-1 rounded-full border border-base px-2 py-0.5 text-xs text-primary"
+const chipClass = "badge-shape inline-flex items-center gap-1 border border-base px-2 py-0.5 text-xs text-primary"
 const chipLabelClass = "uppercase text-[10px] tracking-wide text-muted"
 
 const ContextUsagePanel: Component<ContextUsagePanelProps> = (props) => {
@@ -57,7 +57,7 @@ const ContextUsagePanel: Component<ContextUsagePanelProps> = (props) => {
 
   return (
     <div class={`session-context-panel px-4 py-2 ${props.class ?? ""}`}>
-      <div class="flex flex-wrap items-center gap-2 text-xs text-primary">
+      <div class="flex flex-wrap items-center gap-2 text-xs text-primary opacity-50">
         <div class={chipClass}>
           <span class={chipLabelClass}>{t("contextUsagePanel.labels.input")}</span>
           <span class="font-semibold text-primary">{formatTokenTotal(inputTokens())}</span>
diff --git a/packages/ui/src/components/session/session-view.tsx b/packages/ui/src/components/session/session-view.tsx
index b43dde389..8e67ed3f4 100644
--- a/packages/ui/src/components/session/session-view.tsx
+++ b/packages/ui/src/components/session/session-view.tsx
@@ -7,6 +7,8 @@ import MessageSection from "../message-section"
 import { messageStoreBus } from "../../stores/message-v2/bus"
 import PromptInput from "../prompt-input"
 import PromptAttachmentsBar from "../prompt-input/PromptAttachmentsBar"
+import PromptContextControls from "../prompt-input/PromptContextControls"
+import { observeTimelineRailBoundary } from "./timeline-rail-boundary"
 import { addAttachment, clearAttachments, getAttachments, removeAttachment } from "../../stores/attachments"
 import { instances, waitForInstanceWorkspaceMetadataHydration } from "../../stores/instances"
 import { getMessageNextCursor, hasMoreMessages, isLatestMessageWindow, loadLatestMessageWindow, loadMessages, loadMoreMessages, loadNewerMessageWindow, loadOldestMessageWindow, sendMessage, forkSession, renameSession, isSessionMessagesLoading, getSessionMessagesLoadError, markSessionIdleSeen, ensureSessionAncestorsExpanded, setActiveSessionFromList, runShellCommand, abortSession, backgroundSession } from "../../stores/sessions"
@@ -47,6 +49,8 @@ interface SessionViewProps {
   onSidebarToggle?: () => void
   forceCompactStatusLayout?: boolean
   isActive?: boolean
+  onAgentChange: (agent: string) => Promise<void>
+  onModelChange: (model: { providerId: string; modelId: string }) => Promise<void>
   registerSessionPromptApi?: (sessionId: string, api: PromptInputApi | null) => void
 }
 
@@ -114,6 +118,11 @@ export const SessionView: Component<SessionViewProps> = (props) => {
 
   let scrollToBottomHandle: (() => void) | undefined
   let rootRef: HTMLDivElement | undefined
+  const [timelineMount, setTimelineMount] = createSignal<HTMLDivElement>()
+  createEffect(() => {
+    const rail = timelineMount()
+    if (rail) onCleanup(observeTimelineRailBoundary(rail))
+  })
   const pendingIdleSeenTimers = new Set<string>()
   const [submitBottomPinIntent, setSubmitBottomPinIntent] = createSignal<SessionBottomPinIntent | null>(null)
   let submitBottomPinIntentSequence = 0
@@ -606,6 +615,7 @@ export const SessionView: Component<SessionViewProps> = (props) => {
           when={preview()?.mode === "preview"}
           fallback={
             <MessageSection
+              timelineMount={timelineMount()}
               instanceId={props.instanceId}
               sessionId={props.sessionId}
               loading={messagesLoading()}
@@ -673,8 +683,20 @@ export const SessionView: Component<SessionViewProps> = (props) => {
           disabled={sessionNeedsInput()}
           onAbortSession={handleAbortSession}
           onBackgroundSession={handleBackgroundSession}
+          footerControls={
+            <PromptContextControls
+              instanceId={props.instanceId}
+              sessionId={props.sessionId}
+              worktreeSessionId={props.sessionId}
+              currentAgent={session()?.agent ?? ""}
+              currentModel={session()?.model ?? { providerId: "", modelId: "" }}
+              onAgentChange={props.onAgentChange}
+              onModelChange={props.onModelChange}
+            />
+          }
           registerPromptInputApi={registerPromptInputApi}
         />
+        <div class="session-timeline-slot" ref={setTimelineMount} />
       </div>
     </Show>
   )
diff --git a/packages/ui/src/components/session/timeline-rail-boundary.ts b/packages/ui/src/components/session/timeline-rail-boundary.ts
new file mode 100644
index 000000000..0bd2afc95
--- /dev/null
+++ b/packages/ui/src/components/session/timeline-rail-boundary.ts
@@ -0,0 +1,16 @@
+/** Follow the real composer footer boundary, including wrapped/touch controls. */
+export function observeTimelineRailBoundary(rail: HTMLElement): () => void {
+  const view = rail.parentElement
+  if (!view) return () => {}
+  const footer = view.querySelector<HTMLElement>(".prompt-input-footer")
+  if (!footer) return () => {}
+  const update = () => {
+    const bottom = view.getBoundingClientRect().bottom - footer.getBoundingClientRect().top
+    rail.style.insetBlockEnd = `${Math.max(0, bottom)}px`
+  }
+  const observer = new ResizeObserver(update)
+  observer.observe(view)
+  observer.observe(footer)
+  update()
+  return () => observer.disconnect()
+}
diff --git a/packages/ui/src/components/settings-screen.tsx b/packages/ui/src/components/settings-screen.tsx
index 3dce3f2cd..2d2d6a97d 100644
--- a/packages/ui/src/components/settings-screen.tsx
+++ b/packages/ui/src/components/settings-screen.tsx
@@ -104,6 +104,7 @@ export const SettingsScreen: Component<SettingsScreenProps> = (props) => {
     if (!(await confirmSettingsDiscard())) return
     await props.onSectionChange?.(sectionId)
     setActiveSettingsSection(sectionId)
+    settingsScroll?.scrollTo({ top: 0 })
   }
 
   const handleCloseSettings = async () => {
@@ -117,6 +118,7 @@ export const SettingsScreen: Component<SettingsScreenProps> = (props) => {
     if (phoneQuery()) setWindowPosition({ x: 0, y: 0 })
   })
   let settingsShell: HTMLDivElement | undefined
+  let settingsScroll: HTMLDivElement | undefined
   let dragStart: { x: number; y: number; pointerX: number; pointerY: number; minX: number; maxX: number; minY: number; maxY: number } | undefined
 
   const handleDragStart = (event: PointerEvent) => {
@@ -157,7 +159,7 @@ export const SettingsScreen: Component<SettingsScreenProps> = (props) => {
             <Show when={props.standalone}><h1 class="sr-only">{t("settings.title")}</h1></Show>
 
             <aside class="settings-screen-nav">
-              <div class="settings-screen-compact-bar">
+              <div class="window-toolbar settings-screen-compact-bar">
                 <span class="settings-screen-compact-icon-wrap">
                   <Settings class="settings-screen-nav-icon" />
                 </span>
@@ -207,7 +209,7 @@ export const SettingsScreen: Component<SettingsScreenProps> = (props) => {
                 </div>
                 <Show when={!props.standalone}><button
                   type="button"
-                  class="selector-button selector-button-secondary settings-screen-close settings-screen-compact-close"
+                  class="window-icon-button settings-screen-close settings-screen-compact-close"
                   onClick={() => void handleCloseSettings()}
                   aria-label={t("settings.close")}
                   title={t("settings.close")}
@@ -217,7 +219,7 @@ export const SettingsScreen: Component<SettingsScreenProps> = (props) => {
               </div>
 
               <div
-                class="settings-screen-nav-header settings-screen-drag-handle"
+                class="window-header settings-screen-nav-header settings-screen-drag-handle"
                 onPointerDown={handleDragStart}
                 onPointerMove={handleDragMove}
                 onPointerUp={handleDragEnd}
@@ -228,7 +230,7 @@ export const SettingsScreen: Component<SettingsScreenProps> = (props) => {
                     <Settings class="settings-screen-nav-icon" />
                   </span>
                   <div>
-                    <h2 class="settings-screen-title">{t("settings.title")}</h2>
+                    <h2 class="window-title settings-screen-title">{t("settings.title")}</h2>
                   </div>
                 </div>
               </div>
@@ -279,7 +281,7 @@ export const SettingsScreen: Component<SettingsScreenProps> = (props) => {
                 </button></Show>
               </header>
 
-              <div class="window-body settings-screen-scroll">{renderSection()}</div>
+              <div ref={settingsScroll} class="window-body settings-screen-scroll">{renderSection()}</div>
             </div>
     </>
   )
diff --git a/packages/ui/src/components/settings/advanced-settings-section.tsx b/packages/ui/src/components/settings/advanced-settings-section.tsx
index 1bb63e8f7..df7e19fc7 100644
--- a/packages/ui/src/components/settings/advanced-settings-section.tsx
+++ b/packages/ui/src/components/settings/advanced-settings-section.tsx
@@ -1,6 +1,6 @@
 import { createMemo, type Component } from "solid-js"
 import { useI18n } from "../../lib/i18n"
-import { getBehaviorSettings } from "../../lib/settings/behavior-registry"
+import { getBehaviorSettings, type BehaviorSetting } from "../../lib/settings/behavior-registry"
 import { isNativeApplicationWindow } from "../../lib/runtime-env"
 import { useConfig } from "../../stores/preferences"
 import EnvironmentVariablesEditor from "../environment-variables-editor"
@@ -9,15 +9,23 @@ import { BehaviorSettingRows } from "./behavior-setting-rows"
 export const AdvancedSettingsSection: Component = () => {
   const { t } = useI18n()
   const config = useConfig()
-  const advancedSettings = createMemo(() =>
-    getBehaviorSettings(config).filter(
+  const advancedSettings = createMemo<BehaviorSetting[]>(() => [
+    ...getBehaviorSettings(config).filter(
       (setting) =>
         setting.id === "behavior.autoCleanupBlankSessions" ||
         setting.id === "behavior.keepUnseenSubagentIdleStatus" ||
         (setting.id === "behavior.focusExistingWindowOnSecondLaunch" && isNativeApplicationWindow()) ||
         setting.id === "behavior.providerUsageCreditBalance",
     ),
-  )
+    {
+      kind: "toggle",
+      id: "behavior.holdLongAssistantReplies",
+      titleKey: "settings.behavior.holdLongAssistantReplies.title",
+      subtitleKey: "settings.behavior.holdLongAssistantReplies.subtitle",
+      get: (current) => Boolean(current.holdLongAssistantReplies ?? true),
+      set: (next) => config.updatePreferences({ holdLongAssistantReplies: next }),
+    },
+  ])
 
   return (
     <div class="settings-section-stack">
diff --git a/packages/ui/src/components/settings/chat-settings-section.tsx b/packages/ui/src/components/settings/chat-settings-section.tsx
index 8a9d96101..f50e0dfc2 100644
--- a/packages/ui/src/components/settings/chat-settings-section.tsx
+++ b/packages/ui/src/components/settings/chat-settings-section.tsx
@@ -10,10 +10,10 @@ import {
 } from "../../stores/preferences"
 import {
   buildToolExpansionPresetDefaults,
-  getConfigurableToolEntries,
   OTHER_TOOL_NAME,
   THINKING_EXPANSION_PRESETS,
-} from "../tool-call/tool-registry"
+} from "../tool-call/tool-presentation"
+import { transcriptVisibility, transcriptVisibilityPatch, transcriptVisibilityRows, type TranscriptVisibilityRow as VisibilityRow } from "../transcript-visibility"
 
 const toolExpansionPresetOptions: ToolCallExpansionPreset[] = ["minimal", "balanced", "detailed", "everything"]
 
@@ -60,13 +60,6 @@ const transcriptDetailPresets = {
 
 type SelectOption = { value: VisibilityPreference; label: string }
 
-type VisibilityRow =
-  | { kind: "thinking"; key: "thinking"; label: string }
-  | { kind: "tool"; key: string; label: string }
-  | { kind: "diagnostics"; key: "diagnostics"; label: string }
-  | { kind: "inputs"; key: "inputs"; label: string }
-  | { kind: "usage"; key: "usage"; label: string }
-
 export const ChatSettingsSection: Component = () => {
   const { t } = useI18n()
   const { preferences, updatePreferences } = useConfig()
@@ -77,41 +70,8 @@ export const ChatSettingsSection: Component = () => {
     { value: "expanded", label: t("commands.common.expanded") },
   ])
 
-  const visibilityRows = createMemo<VisibilityRow[]>(() => [
-    { kind: "thinking", key: "thinking", label: t("settings.behavior.expansionDefaults.thinking") },
-    { kind: "diagnostics", key: "diagnostics", label: t("settings.behavior.diagnosticsDefault.title") },
-    { kind: "inputs", key: "inputs", label: t("settings.behavior.toolInputsVisibility.title") },
-    { kind: "usage", key: "usage", label: t("settings.behavior.usageMetrics.title") },
-    ...getConfigurableToolEntries().map((entry) => ({
-      kind: "tool" as const,
-      key: entry.tool,
-      label: entry.labelKey ? t(entry.labelKey) : entry.label,
-    })),
-  ])
-
-  const currentToolMode = (tool: string): VisibilityPreference => {
-    const pref = preferences().toolCallExpansionDefaults
-    const entry = getConfigurableToolEntries().find((item) => item.tool === tool)
-    if (pref.tools[tool]) return pref.tools[tool]
-    if (pref.preset !== "custom" && entry) return entry.expansionPresets[pref.preset]
-    return pref.tools[OTHER_TOOL_NAME] ?? "expanded"
-  }
-
-  const currentThinkingExpansion = () => {
-    const current = preferences()
-    const pref = current.toolCallExpansionDefaults
-    if (pref.thinking) return pref.thinking
-    if (pref.preset !== "custom") return THINKING_EXPANSION_PRESETS[pref.preset]
-    return current.thinkingBlocksExpansion ?? "expanded"
-  }
-
-  const currentThinkingMode = (): VisibilityPreference =>
-    preferences().showThinkingBlocks ? currentThinkingExpansion() : "hidden"
-
-  const currentUsageMode = (): VisibilityPreference => {
-    const current = preferences()
-    return current.showUsageMetrics ? current.usageMetricsExpansion : "hidden"
-  }
+  const visibilityRows = createMemo(() => transcriptVisibilityRows(t))
+  const currentThinkingMode = () => transcriptVisibility(preferences(), { kind: "thinking", key: "thinking", label: "" })
 
   const currentPreset = createMemo(() => {
     const current = preferences()
@@ -128,12 +88,6 @@ export const ChatSettingsSection: Component = () => {
       : "custom"
   })
 
-  const materializeToolModes = () => {
-    const tools: Record<string, VisibilityPreference> = {}
-    for (const entry of getConfigurableToolEntries()) tools[entry.tool] = currentToolMode(entry.tool)
-    return tools
-  }
-
   const applyExpansionPreset = (preset: ToolCallExpansionPreset) => {
     const tools = buildToolExpansionPresetDefaults(preset)
     const thinking = THINKING_EXPANSION_PRESETS[preset]
@@ -146,45 +100,10 @@ export const ChatSettingsSection: Component = () => {
   }
 
   const setVisibilityRowMode = (row: VisibilityRow, mode: VisibilityPreference) => {
-    const current = preferences()
-    if (row.kind === "diagnostics") {
-      updatePreferences({ diagnosticsExpansion: mode })
-      return
-    }
-    if (row.kind === "inputs") {
-      updatePreferences({ toolInputsVisibility: mode })
-      return
-    }
-    if (row.kind === "usage") {
-      updatePreferences({
-        showUsageMetrics: mode !== "hidden",
-        usageMetricsExpansion: mode === "hidden" ? current.usageMetricsExpansion : mode,
-      })
-      return
-    }
-
-    const tools = materializeToolModes()
-    const thinking = row.kind === "thinking" && mode !== "hidden" ? mode : currentThinkingExpansion()
-    if (row.kind === "tool") tools[row.key] = mode
-    updatePreferences({
-      showThinkingBlocks: row.kind === "thinking" ? mode !== "hidden" : current.showThinkingBlocks,
-      toolCallExpansionDefaults: { preset: "custom", thinking, tools },
-      thinkingBlocksExpansion:
-        row.kind === "thinking" && mode !== "hidden" ? mode : current.thinkingBlocksExpansion,
-      toolOutputExpansion:
-        row.kind === "tool" && row.key === OTHER_TOOL_NAME && mode !== "hidden"
-          ? mode
-          : current.toolOutputExpansion,
-    })
+    updatePreferences(transcriptVisibilityPatch(preferences(), row, mode))
   }
 
-  const rowMode = (row: VisibilityRow): VisibilityPreference => {
-    if (row.kind === "thinking") return currentThinkingMode()
-    if (row.kind === "tool") return currentToolMode(row.key)
-    if (row.kind === "diagnostics") return preferences().diagnosticsExpansion
-    if (row.kind === "inputs") return preferences().toolInputsVisibility
-    return currentUsageMode()
-  }
+  const rowMode = (row: VisibilityRow) => transcriptVisibility(preferences(), row)
 
   const selectedVisibilityOption = (mode: VisibilityPreference) =>
     visibilityOptions().find((option) => option.value === mode)
diff --git a/packages/ui/src/components/settings/general-settings-section.tsx b/packages/ui/src/components/settings/general-settings-section.tsx
index fb7f10d65..46cbfafc7 100644
--- a/packages/ui/src/components/settings/general-settings-section.tsx
+++ b/packages/ui/src/components/settings/general-settings-section.tsx
@@ -1,6 +1,6 @@
 import { createMemo, lazy, Show, type Component } from "solid-js"
 import { useI18n } from "../../lib/i18n"
-import { getBehaviorSettings, type BehaviorSetting } from "../../lib/settings/behavior-registry"
+import { getBehaviorSettings } from "../../lib/settings/behavior-registry"
 import { useConfig } from "../../stores/preferences"
 import { LocaleSelector } from "../locale-selector"
 import { BehaviorSettingRows } from "./behavior-setting-rows"
@@ -15,9 +15,8 @@ interface GeneralSettingsSectionProps {
 export const GeneralSettingsSection: Component<GeneralSettingsSectionProps> = (props) => {
   const { t } = useI18n()
   const config = useConfig()
-  const { updatePreferences } = config
-  const generalSettings = createMemo<BehaviorSetting[]>(() => [
-    ...getBehaviorSettings(config).filter(
+  const generalSettings = createMemo(() =>
+    getBehaviorSettings(config).filter(
       (setting) =>
         setting.id === "behavior.keyboardShortcutHints" ||
         setting.id === "behavior.messageTimeline" ||
@@ -26,15 +25,7 @@ export const GeneralSettingsSection: Component<GeneralSettingsSectionProps> = (p
         setting.id === "behavior.followUpBehavior" ||
         setting.id === "behavior.promptSubmitOnEnter",
     ),
-    {
-      kind: "toggle",
-      id: "behavior.holdLongAssistantReplies",
-      titleKey: "settings.behavior.holdLongAssistantReplies.title",
-      subtitleKey: "settings.behavior.holdLongAssistantReplies.subtitle",
-      get: (current) => Boolean(current.holdLongAssistantReplies ?? true),
-      set: (next) => updatePreferences({ holdLongAssistantReplies: next }),
-    },
-  ])
+  )
 
   return (
     <div class="settings-section-stack">
@@ -48,6 +39,7 @@ export const GeneralSettingsSection: Component<GeneralSettingsSectionProps> = (p
         </div>
         <LocaleSelector />
       </div>
+      <ThemeSchemeSettings />
 
       <Show when={props.showStartupState !== false}><StartupStateSettingsCard /></Show>
 
@@ -57,7 +49,6 @@ export const GeneralSettingsSection: Component<GeneralSettingsSectionProps> = (p
         </div>
       </div>
 
-      <ThemeSchemeSettings />
     </div>
   )
 }
diff --git a/packages/ui/src/components/settings/theme-scheme-settings.tsx b/packages/ui/src/components/settings/theme-scheme-settings.tsx
index 46ffe1cd4..a9f33ed5c 100644
--- a/packages/ui/src/components/settings/theme-scheme-settings.tsx
+++ b/packages/ui/src/components/settings/theme-scheme-settings.tsx
@@ -1,17 +1,17 @@
-import { Check } from "lucide-solid"
 import { createEffect, createMemo, createSignal, For, onCleanup, Show, type Component } from "solid-js"
 import { useI18n } from "../../lib/i18n"
 import { useTheme } from "../../lib/theme"
-import { nextColorSchemePresetName } from "../../lib/color-scheme-presets"
-import { showConfirmDialog, showPromptDialog } from "../../stores/alerts"
+import type { AppearanceMode } from "../../lib/appearance-preferences"
+import { isDefaultCustomColors, nextColorSchemePresetName } from "../../lib/color-scheme-presets"
+import { showConfirmDialog } from "../../stores/alerts"
 import { useConfig } from "../../stores/preferences"
 import { registerSettingsDirtyGuard } from "../../stores/settings-dirty-guard"
 import {
   BUILT_IN_COLOR_SCHEMES,
   DEFAULT_CUSTOM_COLORS,
   LIGHT_COLOR_SCHEME_COLORS,
+  isColorSchemeColors,
   normalizeColorScheme,
-  validateColorSchemeColors,
   type ColorSchemeColors,
   type ColorSchemeId,
 } from "../../lib/theme-scheme"
@@ -30,7 +30,6 @@ const COLOR_FIELDS: ReadonlyArray<{ key: keyof ColorSchemeColors; labelKey: stri
   { key: "userAccent", labelKey: "settings.appearance.colorScheme.custom.field.userAccent" },
   { key: "agentAccent", labelKey: "settings.appearance.colorScheme.custom.field.agentAccent" },
   { key: "compactionAccent", labelKey: "settings.appearance.colorScheme.custom.field.compactionAccent" },
-  { key: "yoloAccent", labelKey: "settings.appearance.colorScheme.custom.field.yoloAccent" },
 ]
 
 interface PaletteOption {
@@ -41,42 +40,51 @@ interface PaletteOption {
   description: string
   appearance: "light" | "dark"
   colors: Readonly<ColorSchemeColors>
+  originalColors: Readonly<ColorSchemeColors>
 }
 
 export const ThemeSchemeSettings: Component = () => {
   const { t } = useI18n()
-  const { colorScheme, setColorScheme } = useTheme()
   const config = useConfig()
+  const theme = useTheme()
   const [draftColors, setDraftColors] = createSignal<ColorSchemeColors>({ ...DEFAULT_CUSTOM_COLORS })
   const [appearance, setAppearance] = createSignal<"light" | "dark">("dark")
+  const [filter, setFilter] = createSignal<"light" | "dark">("dark")
+  const colorScheme = () => config.getAppearancePalette(filter())
+  const presetIdForFilter = () => config.getAppearancePresetId(filter())
   const [editingKey, setEditingKey] = createSignal("")
   const [sourceName, setSourceName] = createSignal(t("settings.appearance.colorScheme.option.custom"))
+  const [draftName, setDraftName] = createSignal("")
+  const [creating, setCreating] = createSignal(false)
   const [dirty, setDirty] = createSignal(false)
   const [saving, setSaving] = createSignal(false)
   const [saveFailed, setSaveFailed] = createSignal(false)
 
-  const classicColors = BUILT_IN_COLOR_SCHEMES.find((scheme) => scheme.id === "classic")!.colors!
-  const systemColors = () => typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches
-    ? classicColors
-    : LIGHT_COLOR_SCHEME_COLORS
-
   const options = createMemo<PaletteOption[]>(() => [
-    ...BUILT_IN_COLOR_SCHEMES.map((scheme): PaletteOption => ({
-      key: `builtin:${scheme.id}`,
-      id: scheme.id,
-      name: t(scheme.labelKey),
-      description: t(scheme.descriptionKey),
-      appearance: scheme.id === "system"
-        ? (typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light")
-        : scheme.appearance === "light" ? "light" : "dark",
-      colors: scheme.id === "system"
-        ? systemColors()
-        : scheme.id === "light"
+    ...BUILT_IN_COLOR_SCHEMES.filter((scheme) => scheme.id !== "system" && (scheme.id !== "custom"
+      || !isDefaultCustomColors(config.customColorSchemePreference().colors)
+      || config.customColorSchemePreference().appearance === "light"
+      || (colorScheme().id === "custom" && !presetIdForFilter())
+    )).map((scheme): PaletteOption => {
+      const activeCustom = scheme.id === "custom" && colorScheme().id === "custom" && !presetIdForFilter()
+      const originalColors = scheme.id === "light"
           ? LIGHT_COLOR_SCHEME_COLORS
-          : scheme.id === "custom"
-            ? config.customColorSchemePreference().colors ?? DEFAULT_CUSTOM_COLORS
-            : scheme.colors ?? DEFAULT_CUSTOM_COLORS,
-    })),
+          : scheme.colors ?? DEFAULT_CUSTOM_COLORS
+      const savedColors = scheme.id === "system" ? undefined : scheme.id === "custom"
+        ? (activeCustom ? colorScheme().colors : config.customColorSchemePreference().colors)
+        : config.colorSchemeOverrides()[scheme.id] ?? (colorScheme().id === scheme.id ? colorScheme().colors : undefined)
+      return {
+        key: `builtin:${scheme.id}`,
+        id: scheme.id,
+        name: t(scheme.id === "custom" ? "settings.appearance.palette.saved" : scheme.labelKey),
+        description: t(scheme.descriptionKey),
+        appearance: scheme.id === "custom"
+            ? ((activeCustom ? colorScheme() : config.customColorSchemePreference()).appearance === "light" ? "light" : "dark")
+          : scheme.appearance === "light" ? "light" : "dark",
+        colors: savedColors ?? originalColors,
+        originalColors,
+      }
+    }),
     ...Object.entries(config.colorSchemePresets()).map(([id, preset]): PaletteOption => ({
       key: `preset:${id}`,
       presetId: id,
@@ -84,23 +92,36 @@ export const ThemeSchemeSettings: Component = () => {
       description: t("settings.appearance.colorScheme.description.custom"),
       appearance: preset.appearance,
       colors: preset.colors,
+      originalColors: preset.colors,
     })),
   ])
 
-  const activeKey = createMemo(() => config.activeColorSchemePresetId()
-    ? `preset:${config.activeColorSchemePresetId()}`
+  const activeKey = createMemo(() => presetIdForFilter()
+    ? `preset:${presetIdForFilter()}`
     : `builtin:${colorScheme().id}`)
-  const validDraft = createMemo(() => validateColorSchemeColors(draftColors()))
+  const filteredOptions = createMemo(() => options().filter((option) => option.id !== "system" && option.appearance === filter()))
+  const editingOption = createMemo(() => options().find((option) => option.key === editingKey()))
+  const validDraft = createMemo(() => isColorSchemeColors(draftColors()))
+  const savedBuiltinOverride = createMemo(() => {
+    const option = editingOption()
+    if (!option?.id) return false
+    if (option.id === "custom") return COLOR_FIELDS.some((field) => option.colors[field.key] !== option.originalColors[field.key])
+    return Boolean(config.colorSchemeOverrides()[option.id])
+  })
 
   createEffect(() => {
-    if (dirty()) return
+    if (!config.isLoaded() || dirty() || saving()) return
     const option = options().find((candidate) => candidate.key === activeKey())
     if (!option) return
     setEditingKey(option.key)
     setSourceName(option.name)
     setAppearance(option.appearance)
     setDraftColors({ ...option.colors })
-    setSaveFailed(false)
+  })
+
+  createEffect(() => {
+    const resolved = theme.isDark() ? "dark" : "light"
+    if (!dirty() && !saving()) setFilter(resolved)
   })
 
   const confirmDiscardIfDirty = async () => !dirty() || showConfirmDialog(
@@ -116,23 +137,32 @@ export const ThemeSchemeSettings: Component = () => {
   onCleanup(unregisterDirtyGuard)
 
   const selectOption = async (option: PaletteOption) => {
-    if (editingKey() === option.key || !(await confirmDiscardIfDirty())) return
+    if (saving() || editingKey() === option.key || !(await confirmDiscardIfDirty())) return
+    setSaving(true)
     setDirty(false)
+    setCreating(false)
     setSaveFailed(false)
     setEditingKey(option.key)
     setSourceName(option.name)
     setAppearance(option.appearance)
     setDraftColors({ ...option.colors })
-    if (option.presetId) {
-      void config.selectColorSchemePreset(option.presetId).catch(() => setSaveFailed(true))
-      return
+    try {
+      if (option.presetId) {
+        await config.selectColorSchemePreset(option.presetId)
+      } else {
+        await config.setColorSchemePreference(option.id === "custom"
+          ? normalizeColorScheme({ id: "custom", appearance: option.appearance, colors: option.colors })
+          : normalizeColorScheme(option.id))
+      }
+    } catch {
+      setSaveFailed(true)
+    } finally {
+      setSaving(false)
     }
-    setColorScheme(option.id === "custom"
-      ? normalizeColorScheme({ id: "custom", appearance: option.appearance, colors: option.colors })
-      : normalizeColorScheme(option.id))
   }
 
   const updateColor = async (option: PaletteOption, key: keyof ColorSchemeColors, value: string) => {
+    if (saving()) return false
     if (editingKey() !== option.key && !(await confirmDiscardIfDirty())) return false
     const colors = editingKey() === option.key ? draftColors() : option.colors
     setEditingKey(option.key)
@@ -144,32 +174,59 @@ export const ThemeSchemeSettings: Component = () => {
     return true
   }
 
-  const resetDraft = () => {
-    const option = options().find((candidate) => candidate.key === editingKey())
-    if (option) {
-      setDraftColors({ ...option.colors })
+  const resetBuiltin = async () => {
+    const option = editingOption()
+    if (!option?.id) return
+    setSaving(true)
+    setSaveFailed(false)
+    try {
+      if (option.id === "custom") await config.setColorSchemePreference(normalizeColorScheme({ id: "custom", appearance: option.appearance, colors: option.originalColors }))
+      else await config.resetColorSchemeOverride(option.id)
+      setDraftColors({ ...option.originalColors })
       setAppearance(option.appearance)
+      setDirty(false)
+    } catch {
+      setSaveFailed(true)
+    } finally {
+      setSaving(false)
     }
-    setDirty(false)
+  }
+
+  const startNewPreset = () => {
+    const name = nextColorSchemePresetName(sourceName(), Object.values(config.colorSchemePresets()).map((preset) => preset.name))
+    setDraftName(name)
+    setCreating(true)
+    setDirty(true)
     setSaveFailed(false)
   }
 
   const savePreset = async () => {
     if (!dirty() || !validDraft()) return
-    const defaultName = nextColorSchemePresetName(sourceName(), Object.values(config.colorSchemePresets()).map((preset) => preset.name))
-    const name = await showPromptDialog(t("settings.appearance.colorScheme.description.custom"), {
-      title: t("settings.appearance.colorScheme.title"),
-      inputLabel: t("settings.appearance.colorScheme.title"),
-      inputDefaultValue: defaultName,
-      confirmLabel: t("settings.appearance.colorScheme.custom.save"),
-    })
-    if (!name?.trim()) return
+    const option = editingOption()
+    if (!option) return
+    const presetId = !creating() ? option.presetId : undefined
+    const name = creating()
+      ? draftName().trim()
+      : presetId
+        ? option.name
+        : nextColorSchemePresetName(sourceName(), Object.values(config.colorSchemePresets()).map((preset) => preset.name))
+    if (!name) return
     setSaving(true)
     setSaveFailed(false)
     try {
-      const id = await config.saveColorSchemePreset(name, appearance(), draftColors())
+      if (!creating() && option.id) {
+        if (option.id === "custom") {
+          await config.setColorSchemePreference(normalizeColorScheme({ id: "custom", appearance: option.appearance, colors: draftColors() }))
+        } else {
+          await config.saveColorSchemeOverride(option.id, option.appearance, draftColors())
+        }
+        setDirty(false)
+        return
+      }
+      const id = await config.saveColorSchemePreset(name, appearance(), draftColors(), presetId)
       setEditingKey(`preset:${id}`)
-      setSourceName(name.trim())
+      setSourceName(name)
+      setCreating(false)
       setDirty(false)
     } catch {
       setSaveFailed(true)
@@ -178,6 +235,49 @@ export const ThemeSchemeSettings: Component = () => {
     }
   }
 
+  const deletePreset = async (option: PaletteOption) => {
+    if (!option.presetId) return
+    const confirmed = await showConfirmDialog(t("settings.appearance.colorScheme.custom.deleteConfirm", { name: option.name }), {
+      variant: "warning",
+      confirmLabel: t("settings.appearance.colorScheme.custom.delete"),
+      dismissible: false,
+    })
+    if (!confirmed) return
+    setSaving(true)
+    setSaveFailed(false)
+    try {
+      await config.deleteColorSchemePreset(option.presetId)
+      const fallback = options().find((candidate) => candidate.key === activeKey())
+        ?? options().find((candidate) => candidate.appearance === filter())!
+      setEditingKey(fallback.key)
+      setSourceName(fallback.name)
+      setAppearance(fallback.appearance)
+      setFilter(fallback.appearance)
+      setDraftColors({ ...fallback.colors })
+      setCreating(false)
+      setDirty(false)
+    } catch {
+      setSaveFailed(true)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const changeMode = async (mode: AppearanceMode) => {
+    if (saving() || !(await confirmDiscardIfDirty())) return
+    setSaving(true)
+    setSaveFailed(false)
+    try {
+      await config.setThemePreference(mode)
+      setDirty(false)
+      setCreating(false)
+    } catch {
+      setSaveFailed(true)
+    } finally {
+      setSaving(false)
+    }
+  }
+
   const colorsFor = (option: PaletteOption) => editingKey() === option.key ? draftColors() : option.colors
 
   return (
@@ -188,67 +288,94 @@ export const ThemeSchemeSettings: Component = () => {
       </div>
 
       <div class="theme-scheme-list">
-        <For each={options()}>{(option) => (
-          <div class="theme-scheme-card" data-selected={(dirty() ? editingKey() : activeKey()) === option.key ? "true" : "false"}>
-            <button type="button" class="theme-scheme-select" title={option.description} onClick={() => void selectOption(option)}>
-              <span class="theme-scheme-name">{option.name}</span>
-              <Check class="theme-scheme-check" aria-hidden="true" />
-            </button>
-            <span class="theme-scheme-swatches">
-              <For each={COLOR_FIELDS}>{(field) => {
-                const color = () => colorsFor(option)[field.key]
-                const label = () => t(field.labelKey)
-                return (
-                  <input
-                    type="color"
-                    value={color()}
-                    title={`${label()} · ${color()}`}
-                    aria-label={`${option.name} · ${label()} · ${color()}`}
-                    onInput={(event) => {
-                      const input = event.currentTarget
-                      void updateColor(option, field.key, input.value).then((updated) => {
-                        if (!updated) input.value = color()
-                      })
-                    }}
-                  />
-                )
-              }}</For>
-            </span>
+        <div class="theme-scheme-mode">
+          <span>{t("settings.appearance.palette.mode")}</span>
+          <div class="theme-scheme-appearance-options" role="group" aria-label={t("settings.appearance.palette.mode")}>
+            <For each={["system", "dark", "light"] as const}>{(mode) => (
+              <button type="button" class="theme-scheme-appearance-option" disabled={saving()}
+                data-selected={config.themePreference() === mode ? "true" : "false"}
+                aria-pressed={config.themePreference() === mode}
+                onClick={() => void changeMode(mode)}
+              >{t(mode === "system" ? "settings.appearance.palette.auto" : `settings.appearance.colorScheme.custom.appearance.${mode}`)}</button>
+            )}</For>
           </div>
-        )}</For>
-      </div>
-
-      <div class="theme-scheme-editor">
-        <div class="theme-scheme-appearance-options" aria-label={t("settings.appearance.colorScheme.custom.appearance")}>
-          <For each={["light", "dark"] as const}>{(option) => (
-            <button
-              type="button"
-              class="theme-scheme-appearance-option"
-              data-selected={appearance() === option ? "true" : "false"}
-              aria-pressed={appearance() === option}
-              onClick={() => {
-                setAppearance(option)
-                setDirty(true)
-                setSaveFailed(false)
+        </div>
+        <p class="settings-card-subtitle">{t("settings.appearance.palette.independent")}</p>
+        <div class="theme-scheme-workbench">
+          <div class="theme-scheme-controls">
+            <select
+              class="selector-input theme-scheme-picker"
+              value={editingOption()?.key ?? ""}
+              disabled={saving()}
+              aria-label={t("settings.appearance.colorScheme.title")}
+              onChange={(event) => {
+                const select = event.currentTarget
+                const option = options().find((candidate) => candidate.key === select.value)
+                if (!option) return
+                void selectOption(option).then(() => { select.value = editingKey() })
               }}
             >
-              {t(`settings.appearance.colorScheme.custom.appearance.${option}`)}
-            </button>
-          )}</For>
-        </div>
-        <Show when={dirty() && !validDraft()}>
-          <p class="theme-scheme-warning" role="alert">{t("settings.appearance.colorScheme.custom.warning.contrast")}</p>
-        </Show>
-        <Show when={saveFailed()}>
-          <p class="theme-scheme-warning" role="alert">{t("settings.appearance.colorScheme.custom.saveError")}</p>
-        </Show>
-        <div class="theme-scheme-actions">
-          <button type="button" class="selector-button selector-button-secondary" disabled={!dirty() || saving()} onClick={resetDraft}>
-            {t("settings.appearance.colorScheme.custom.reset")}
-          </button>
-          <button type="button" class="selector-button selector-button-primary" disabled={!dirty() || !validDraft() || saving()} onClick={() => void savePreset()}>
-            {t("settings.appearance.colorScheme.custom.save")}
-          </button>
+              <For each={filteredOptions()}>{(option) => <option value={option.key} selected={editingKey() === option.key}>{option.name}</option>}</For>
+            </select>
+            <Show when={creating()}>
+              <label class="theme-scheme-name-editor">
+                <span>{t("settings.appearance.colorScheme.custom.name")}</span>
+                <input class="selector-input" value={draftName()} maxLength={80} onInput={(event) => setDraftName(event.currentTarget.value)} />
+              </label>
+            </Show>
+            <div class="theme-scheme-actions">
+              <Show when={editingOption()?.presetId}>
+                <button type="button" class="selector-button selector-button-secondary" disabled={creating() || saving()} onClick={() => void deletePreset(editingOption()!)}>
+                  {t("settings.appearance.colorScheme.custom.delete")}
+                </button>
+              </Show>
+              <Show when={savedBuiltinOverride()}>
+                <button type="button" class="selector-button selector-button-secondary" disabled={creating() || saving()} onClick={() => void resetBuiltin()}>
+                  {t("settings.appearance.colorScheme.custom.reset")}
+                </button>
+              </Show>
+              <Show when={!creating()}>
+                <button type="button" class="selector-button selector-button-secondary" disabled={saving()} onClick={startNewPreset}>
+                  {t("settings.appearance.colorScheme.custom.new")}
+                </button>
+              </Show>
+              <Show when={dirty()}>
+                <button type="button" class="selector-button selector-button-primary" disabled={!validDraft() || saving() || (creating() && !draftName().trim())} onClick={() => void savePreset()}>
+                  {t("settings.appearance.colorScheme.custom.save")}
+                </button>
+              </Show>
+            </div>
+            <Show when={saveFailed()}>
+              <p class="theme-scheme-warning" role="alert">{t("settings.appearance.colorScheme.custom.saveError")}</p>
+            </Show>
+          </div>
+          <Show when={editingOption()} keyed>{(option) => (
+            <div class="theme-scheme-card" title={option.description}>
+              <span class="theme-scheme-swatches">
+                <For each={COLOR_FIELDS}>{(field) => {
+                  const color = () => colorsFor(option)[field.key]
+                  const label = () => t(field.labelKey)
+                  return (
+                    <label class="theme-scheme-swatch" title={`${label()} · ${color()}`}>
+                      <input
+                        type="color"
+                        disabled={saving()}
+                        value={color()}
+                        aria-label={`${option.name} · ${label()} · ${color()}`}
+                        onInput={(event) => {
+                          const input = event.currentTarget
+                          void updateColor(option, field.key, input.value).then((updated) => {
+                            if (!updated) input.value = color()
+                          })
+                        }}
+                      />
+                      <span>{label()}</span>
+                    </label>
+                  )
+                }}</For>
+              </span>
+            </div>
+          )}</Show>
         </div>
       </div>
     </div>
diff --git a/packages/ui/src/components/tab-scroll.tsx b/packages/ui/src/components/tab-scroll.tsx
new file mode 100644
index 000000000..b08b03582
--- /dev/null
+++ b/packages/ui/src/components/tab-scroll.tsx
@@ -0,0 +1,42 @@
+import { onCleanup, onMount, type ParentComponent } from "solid-js"
+
+/** Native scrollbar above upright tabs. Both scrollers use the same logical
+ * scrollLeft (including negative RTL offsets); no mirrored compositing layer. */
+const TabScroll: ParentComponent = (props) => {
+  let viewport!: HTMLDivElement
+  let scrollbar!: HTMLDivElement
+  let extent!: HTMLDivElement
+  let content!: HTMLDivElement
+
+  onMount(() => {
+    const measure = () => {
+      // scrollWidth is integer-rounded, while the two boxes can be fractional
+      // at browser zoom. Copying it can manufacture overflow in the top lane.
+      // Keep a fitting extent relative, and preserve subpixels when overflowing.
+      const overflowing = viewport.scrollWidth > viewport.clientWidth
+      extent.style.width = overflowing ? getComputedStyle(content).width : "100%"
+      scrollbar.style.overflowX = overflowing ? "auto" : "hidden"
+      scrollbar.scrollLeft = viewport.scrollLeft
+    }
+    const observer = new ResizeObserver(measure)
+    observer.observe(viewport)
+    observer.observe(content)
+    measure()
+    onCleanup(() => observer.disconnect())
+  })
+
+  return (
+    <div class="tab-scroll-frame">
+      <div class="tab-scrollbar" ref={scrollbar} aria-hidden="true" tabIndex={-1}
+        onScroll={() => { if (viewport.scrollLeft !== scrollbar.scrollLeft) viewport.scrollLeft = scrollbar.scrollLeft }}>
+        <div ref={extent} class="tab-scrollbar-extent" />
+      </div>
+      <div class="tab-scroll" ref={viewport}
+        onScroll={() => { if (scrollbar.scrollLeft !== viewport.scrollLeft) scrollbar.scrollLeft = viewport.scrollLeft }}>
+        <div class="tab-strip" ref={content}>{props.children}</div>
+      </div>
+    </div>
+  )
+}
+
+export default TabScroll
diff --git a/packages/ui/src/components/thinking-selector.tsx b/packages/ui/src/components/thinking-selector.tsx
index 93c7b1c85..ec551481d 100644
--- a/packages/ui/src/components/thinking-selector.tsx
+++ b/packages/ui/src/components/thinking-selector.tsx
@@ -62,6 +62,7 @@ export default function ThinkingSelector(props: ThinkingSelectorProps) {
     const selected = currentValue()?.value
     return selected ?? t("thinkingSelector.variant.default")
   })
+  const accessibleLabel = () => t("thinkingSelector.label", { variant: triggerValue() })
 
   return (
     <div class="sidebar-selector">
@@ -87,8 +88,8 @@ export default function ThinkingSelector(props: ThinkingSelectorProps) {
         )}
       >
         <Combobox.Control class="relative w-full" data-thinking-selector-control>
-          <Combobox.Input class="sr-only" data-thinking-selector />
-          <Combobox.Trigger class="selector-trigger">
+          <Combobox.Input class="sr-only" data-thinking-selector aria-label={accessibleLabel()} />
+          <Combobox.Trigger class="selector-trigger" aria-label={accessibleLabel()} title={accessibleLabel()}>
             <div class="selector-trigger-label selector-trigger-label--stacked flex-1 min-w-0">
               <span class="selector-trigger-primary selector-trigger-primary--align-left">
                 <span class="session-sidebar-selector-prefix">{t("thinkingSelector.label", { variant: "" }).trim()}</span>{" "}
diff --git a/packages/ui/src/components/toast-history-panel.tsx b/packages/ui/src/components/toast-history-panel.tsx
index ddee88950..4763b22e2 100644
--- a/packages/ui/src/components/toast-history-panel.tsx
+++ b/packages/ui/src/components/toast-history-panel.tsx
@@ -10,6 +10,7 @@ import {
   createMemo,
   createSignal,
   onCleanup,
+  onMount,
   type Component,
 } from "solid-js"
 import { X, Bell, Trash2, ExternalLink } from "lucide-solid"
@@ -166,19 +167,8 @@ const ToastHistoryPanel: Component<ToastHistoryPanelProps> = (props) => {
     });
   });
 
-  // Close on ESC
-  createEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === "Escape") {
-        props.onClose();
-      }
-    };
-
-    document.addEventListener("keydown", handleKeyDown);
-    onCleanup(() => {
-      document.removeEventListener("keydown", handleKeyDown);
-    });
-  });
+  let closeButton: HTMLButtonElement | undefined;
+  onMount(() => closeButton?.focus({ preventScroll: true }));
 
   // Handle item click
   const handleItemClick = (item: IToastHistoryItem) => {
@@ -200,6 +190,7 @@ const ToastHistoryPanel: Component<ToastHistoryPanelProps> = (props) => {
 
   // Handle mark all as read
   const handleMarkAllAsRead = () => {
+    if (!hasUnread()) return;
     markAllToastHistoryAsRead();
   };
 
@@ -210,6 +201,12 @@ const ToastHistoryPanel: Component<ToastHistoryPanelProps> = (props) => {
       class="toast-history-panel window-shell flex flex-col overflow-hidden border border-base bg-surface-base"
       role="dialog"
       aria-label={t("toastHistory.title")}
+      onKeyDown={(event) => {
+        if (event.key !== "Escape" || event.defaultPrevented) return;
+        event.preventDefault();
+        event.stopPropagation();
+        props.onClose();
+      }}
     >
         {/* Header */}
         <header class="window-header">
@@ -228,6 +225,7 @@ const ToastHistoryPanel: Component<ToastHistoryPanelProps> = (props) => {
           <button
             type="button"
             class="toast-history-close-btn window-icon-button cursor-pointer"
+            ref={closeButton}
             onClick={props.onClose}
             aria-label={t("toastHistory.close")}
           >
@@ -236,12 +234,13 @@ const ToastHistoryPanel: Component<ToastHistoryPanelProps> = (props) => {
         </header>
 
         <Show when={!isEmpty() || props.onOpenSettings}>
-          <div class="window-toolbar justify-end overflow-x-auto">
+          <div class="window-toolbar toast-history-actions-toolbar">
             <Show when={!isEmpty()}>
               <button
                 type="button"
                 class="toast-history-action-btn window-action cursor-pointer"
                 onClick={handleMarkAllAsRead}
+                aria-disabled={!hasUnread()}
                 title={t("toastHistory.markAllRead")}
               >
                 {t("toastHistory.markAllRead")}
@@ -271,7 +270,7 @@ const ToastHistoryPanel: Component<ToastHistoryPanelProps> = (props) => {
 
         {/* Filter */}
         <Show when={!isEmpty()}>
-          <div class="window-toolbar toast-history-filter-toolbar overflow-x-auto" aria-label={t("toastHistory.filter.label")}>
+          <div class="window-toolbar toast-history-filter-toolbar" role="group" aria-label={t("toastHistory.filter.label")}>
             <For each={FILTER_OPTIONS}>
               {(option) => (
                 <button
@@ -328,7 +327,7 @@ const ToastHistoryPanel: Component<ToastHistoryPanelProps> = (props) => {
                              }}
                              onClick={() => handleItemClick(item)}
                              onKeyDown={(e) => {
-                               if (e.key === "Enter" || e.key === " ") {
+                                if (e.target === e.currentTarget && (e.key === "Enter" || e.key === " ")) {
                                  e.preventDefault();
                                  handleItemClick(item);
                                }
@@ -338,14 +337,17 @@ const ToastHistoryPanel: Component<ToastHistoryPanelProps> = (props) => {
                                class={`w-1.5 h-1.5 flex-shrink-0 mt-[0.3rem] toast-history-indicator ${VARIANT_INDICATOR_CLASS[item.variant]}`}
                               aria-hidden="true"
                             />
-                            <div class="flex-1 min-w-0">
-                               <div class="flex items-center gap-[var(--space-sm)]">
+                             <div class="flex-1 min-w-0 toast-history-item-copy">
+                                <div class="flex items-center gap-[var(--space-sm)]">
+                                  <Show when={!item.read}>
+                                    <span class="toast-history-item-unread-dot w-1.5 h-1.5 flex-shrink-0" aria-hidden="true" />
+                                  </Show>
                                  <Show when={item.title}>
                                    <span class="text-[var(--font-size-xs)] font-medium text-primary">{item.title}</span>
                                  </Show>
-                                 <span class="text-[10px] text-muted flex-shrink-0">{formatTime(item.createdAt)}</span>
+                                 <time class="text-[10px] text-muted flex-shrink-0" dateTime={new Date(item.createdAt).toISOString()}>{formatTime(item.createdAt)}</time>
                                </div>
-                               <p class="text-[11px] text-secondary m-0 line-clamp-2">{item.message}</p>
+                               <p class="text-[var(--font-size-xs)] text-secondary m-0">{item.message}</p>
                               <Show when={item.action}>
                                 <button
                                   type="button"
@@ -364,16 +366,13 @@ const ToastHistoryPanel: Component<ToastHistoryPanelProps> = (props) => {
                             </div>
                             <button
                               type="button"
-                               class="toast-history-item-delete inline-flex items-center justify-center w-5 h-5 border-none bg-transparent text-muted cursor-pointer flex-shrink-0"
+                               class="toast-history-item-delete window-icon-button cursor-pointer"
                               onClick={(e) => handleDelete(e, item.id)}
                               aria-label={t("toastHistory.deleteItem")}
                               title={t("toastHistory.deleteItem")}
                             >
                                <X class="w-3 h-3" aria-hidden="true" />
                             </button>
-                            <Show when={!item.read}>
-                               <span class="toast-history-item-unread-dot absolute top-[var(--space-sm)] right-[var(--space-sm)] w-1.5 h-1.5" aria-hidden="true" />
-                            </Show>
                            </li>
                          </>
                        )}
diff --git a/packages/ui/src/components/tool-call.tsx b/packages/ui/src/components/tool-call.tsx
index 8fb5579c3..ce2487e91 100644
--- a/packages/ui/src/components/tool-call.tsx
+++ b/packages/ui/src/components/tool-call.tsx
@@ -42,6 +42,7 @@ import { getLogger } from "../lib/logger"
 import { useSpeech } from "../lib/hooks/use-speech"
 import { createFollowScroll } from "../lib/follow-scroll"
 import ActionOverflowMenu, { type ActionOverflowMenuItem } from "./action-overflow-menu"
+import { observeActionOverflow } from "./measured-action-overflow"
 import SpeechActionButton from "./speech-action-button"
 
 const log = getLogger("session")
@@ -80,23 +81,29 @@ interface ToolCallProps {
   headerMenuItems?: () => ActionOverflowMenuItem[]
  }
 
-function ToolStatusIndicator(props: { status: Accessor<string> }) {
-  const isVisible = (value: string) => props.status() === value
+function ToolStatusIndicator(props: { status: Accessor<string>; t: ReturnType<typeof useI18n>["t"] }) {
+  const resolvedStatus = () => {
+    const value = props.status()
+    return value === "running" || value === "completed" || value === "error" ? value : "pending"
+  }
+  const isVisible = (value: string) => resolvedStatus() === value
+  const label = () => props.t(`toolCall.status.${resolvedStatus()}`)
 
   return (
-    <span class="tool-call-header-status" aria-hidden="true" data-status={props.status() || "pending"}>
-      <span style={{ display: isVisible("pending") ? "inline-flex" : "none" }}>
+    <span class="tool-call-header-status" role="status" aria-label={label()} data-status={resolvedStatus()}>
+      <span class="tool-call-header-status-icon" aria-hidden="true" style={{ display: isVisible("pending") ? "inline-flex" : "none" }}>
         <Hourglass class="w-4 h-4" />
       </span>
-      <span style={{ display: isVisible("running") ? "inline-flex" : "none" }}>
+      <span class="tool-call-header-status-icon" aria-hidden="true" style={{ display: isVisible("running") ? "inline-flex" : "none" }}>
         <Loader2 class="w-4 h-4 animate-spin" />
       </span>
-      <span style={{ display: isVisible("completed") ? "inline-flex" : "none" }}>
+      <span class="tool-call-header-status-icon" aria-hidden="true" style={{ display: isVisible("completed") ? "inline-flex" : "none" }}>
         <Check class="w-4 h-4" />
       </span>
-      <span style={{ display: isVisible("error") ? "inline-flex" : "none" }}>
+      <span class="tool-call-header-status-icon" aria-hidden="true" style={{ display: isVisible("error") ? "inline-flex" : "none" }}>
         <XCircle class="w-4 h-4" />
       </span>
+      <span class="tool-call-header-status-label">{label()}</span>
     </span>
   )
 }
@@ -936,7 +943,7 @@ export default function ToolCall(props: ToolCallProps) {
         data-part-id={toolCallIdentifier()}
       >
       <Show when={!hasPendingForm()}>
-        <div class="tool-call-header" data-action-overflow={actionMenuItems(true).length >= 2 ? "true" : undefined}>
+        <div class="tool-call-header" ref={observeActionOverflow} data-action-overflow={actionMenuItems(true).length >= 2 ? "true" : undefined}>
         <button
           type="button"
           class="tool-call-header-toggle"
@@ -949,7 +956,7 @@ export default function ToolCall(props: ToolCallProps) {
             <Show when={headerTitleDetail()}>
               {(detail) => <span class="tool-call-summary-title">{detail()}</span>}
             </Show>
-            <ToolStatusIndicator status={status} />
+            <ToolStatusIndicator status={status} t={t} />
           </span>
         </button>
 
diff --git a/packages/ui/src/components/tool-call/renderers/task.tsx b/packages/ui/src/components/tool-call/renderers/task.tsx
index 669c5f604..728088a98 100644
--- a/packages/ui/src/components/tool-call/renderers/task.tsx
+++ b/packages/ui/src/components/tool-call/renderers/task.tsx
@@ -1,10 +1,12 @@
 import { For, Index, Show, createEffect, createMemo, createSignal, untrack } from "solid-js"
+import { Dynamic } from "solid-js/web"
 import type { ToolState } from "../../../types/tool-state"
 import type { ToolRenderer } from "../types"
-import { ensureMarkdownContent, getDefaultToolAction, getToolIcon, getToolName, readToolStatePayload } from "../utils"
+import { ensureMarkdownContent, getDefaultToolAction, getToolName, readToolStatePayload } from "../utils"
 import { messageStoreBus } from "../../../stores/message-v2/bus"
 import { loadMessages } from "../../../stores/session-api"
 import { loading, messagesLoaded } from "../../../stores/session-state"
+import { getMessageContentIcon } from "../../message-content-icons"
 import { getTaskToolSearchText } from "../search-text"
 
 interface TaskSummaryItem {
@@ -437,7 +439,7 @@ export const taskRenderer: ToolRenderer = {
                     <div class="tool-call-task-summary">
                       <For each={legacyItems()}>
                         {(item) => {
-                          const icon = getToolIcon(item.tool)
+                          const icon = getMessageContentIcon(item.tool)
                           const description = describeToolTitle(item)
                           const toolLabel = getToolName(item.tool)
                           const status = normalizeStatus(item.status ?? item.state?.status)
@@ -449,7 +451,9 @@ export const taskRenderer: ToolRenderer = {
                           const statusAttr = status ?? "pending"
                           return (
                             <div class="tool-call-task-item" data-task-id={item.id} data-task-status={statusAttr}>
-                              <span class="tool-call-task-icon">{icon}</span>
+                              <span class="tool-call-task-icon inline-flex flex-shrink-0">
+                                <Dynamic component={icon} class="w-3.5 h-3.5" aria-hidden="true" />
+                              </span>
                               <span class="tool-call-task-label">{toolLabel}</span>
                               <span class="tool-call-task-separator" aria-hidden="true">—</span>
                               <span class="tool-call-task-text">{description}</span>
diff --git a/packages/ui/src/components/tool-call/tool-presentation.ts b/packages/ui/src/components/tool-call/tool-presentation.ts
new file mode 100644
index 000000000..988f6d1f2
--- /dev/null
+++ b/packages/ui/src/components/tool-call/tool-presentation.ts
@@ -0,0 +1,177 @@
+import type {
+  ExpansionPreference,
+  Preferences,
+  ToolCallExpansionPreset,
+  VisibilityPreference,
+} from "../../stores/preferences"
+
+export const OTHER_TOOL_NAME = "other"
+
+export const THINKING_EXPANSION_PRESETS: Record<ToolCallExpansionPreset, ExpansionPreference> = {
+  minimal: "collapsed",
+  balanced: "collapsed",
+  detailed: "expanded",
+  everything: "expanded",
+}
+
+export interface ToolRegistryEntry {
+  tool: string
+  label: string
+  labelKey?: string
+  configurable: boolean
+  expansionPresets: Record<ToolCallExpansionPreset, VisibilityPreference>
+  aliases?: string[]
+}
+
+const expanded = "expanded" satisfies ExpansionPreference
+const collapsed = "collapsed" satisfies ExpansionPreference
+
+function presets(values: Record<ToolCallExpansionPreset, VisibilityPreference>) {
+  return values
+}
+
+export const TOOL_REGISTRY: ToolRegistryEntry[] = [
+  {
+    tool: "bash",
+    label: "bash",
+    configurable: true,
+    expansionPresets: presets({ minimal: collapsed, balanced: expanded, detailed: expanded, everything: expanded }),
+  },
+  {
+    tool: "read",
+    label: "read",
+    configurable: true,
+    expansionPresets: presets({ minimal: collapsed, balanced: collapsed, detailed: collapsed, everything: expanded }),
+  },
+  {
+    tool: "write",
+    label: "write",
+    configurable: true,
+    expansionPresets: presets({ minimal: collapsed, balanced: expanded, detailed: expanded, everything: expanded }),
+  },
+  {
+    tool: "edit",
+    label: "edit",
+    configurable: true,
+    expansionPresets: presets({ minimal: collapsed, balanced: expanded, detailed: expanded, everything: expanded }),
+  },
+  {
+    tool: "patch",
+    label: "patch",
+    configurable: true,
+    expansionPresets: presets({ minimal: collapsed, balanced: expanded, detailed: expanded, everything: expanded }),
+  },
+  {
+    tool: "apply_patch",
+    label: "apply_patch",
+    configurable: true,
+    expansionPresets: presets({ minimal: collapsed, balanced: expanded, detailed: expanded, everything: expanded }),
+  },
+  {
+    tool: "webfetch",
+    label: "webfetch",
+    configurable: true,
+    expansionPresets: presets({ minimal: collapsed, balanced: collapsed, detailed: expanded, everything: expanded }),
+  },
+  {
+    tool: "glob",
+    label: "glob",
+    configurable: true,
+    expansionPresets: presets({ minimal: collapsed, balanced: collapsed, detailed: expanded, everything: expanded }),
+  },
+  {
+    tool: "grep",
+    label: "grep",
+    configurable: true,
+    expansionPresets: presets({ minimal: collapsed, balanced: collapsed, detailed: expanded, everything: expanded }),
+  },
+  {
+    tool: "todowrite",
+    label: "todowrite",
+    configurable: true,
+    expansionPresets: presets({ minimal: expanded, balanced: expanded, detailed: expanded, everything: expanded }),
+  },
+  {
+    tool: "task",
+    label: "task",
+    configurable: true,
+    expansionPresets: presets({ minimal: collapsed, balanced: expanded, detailed: expanded, everything: expanded }),
+  },
+  {
+    tool: "skill",
+    label: "skill",
+    configurable: true,
+    expansionPresets: presets({ minimal: collapsed, balanced: collapsed, detailed: collapsed, everything: expanded }),
+  },
+  {
+    tool: "question",
+    label: "question",
+    configurable: true,
+    expansionPresets: presets({ minimal: collapsed, balanced: expanded, detailed: expanded, everything: expanded }),
+  },
+  {
+    tool: "invalid",
+    label: "invalid",
+    configurable: true,
+    expansionPresets: presets({ minimal: collapsed, balanced: collapsed, detailed: collapsed, everything: expanded }),
+  },
+  {
+    tool: OTHER_TOOL_NAME,
+    label: "Other tools",
+    labelKey: "settings.behavior.expansionDefaults.otherTools",
+    configurable: true,
+    expansionPresets: presets({ minimal: collapsed, balanced: collapsed, detailed: expanded, everything: expanded }),
+  },
+]
+
+const otherToolEntry = TOOL_REGISTRY.find((entry) => entry.tool === OTHER_TOOL_NAME)!
+
+const registryMap = TOOL_REGISTRY.reduce<Record<string, ToolRegistryEntry>>((acc, entry) => {
+  acc[entry.tool] = entry
+  entry.aliases?.forEach((alias) => {
+    acc[alias] = entry
+  })
+  return acc
+}, {})
+
+export function getToolRegistryEntry(toolName: string): ToolRegistryEntry {
+  return registryMap[toolName] ?? otherToolEntry
+}
+
+export function getConfigurableToolEntries(): ToolRegistryEntry[] {
+  return TOOL_REGISTRY.filter((entry) => entry.configurable)
+}
+
+export function buildToolExpansionPresetDefaults(preset: ToolCallExpansionPreset): Record<string, VisibilityPreference> {
+  const defaults: Record<string, VisibilityPreference> = {}
+  for (const entry of getConfigurableToolEntries()) {
+    defaults[entry.tool] = entry.expansionPresets[preset]
+  }
+  return defaults
+}
+
+export function resolveToolVisibility(preferences: Preferences, toolName: string): VisibilityPreference {
+  const entry = getToolRegistryEntry(toolName)
+  const defaults = preferences.toolCallExpansionDefaults
+  const presetMode = defaults.preset === "custom" ? undefined : entry.expansionPresets[defaults.preset]
+  const otherPresetMode = defaults.preset === "custom" ? undefined : otherToolEntry.expansionPresets[defaults.preset]
+  return defaults.tools[entry.tool]
+    ?? presetMode
+    ?? defaults.tools[OTHER_TOOL_NAME]
+    ?? otherPresetMode
+    ?? preferences.toolOutputExpansion
+    ?? "expanded"
+}
+
+export function resolveToolExpansionDefault(preferences: Preferences, toolName: string): boolean {
+  return resolveToolVisibility(preferences, toolName) === "expanded"
+}
+
+export function resolveThinkingExpansionDefault(preferences: Preferences): boolean {
+  const defaults = preferences.toolCallExpansionDefaults
+  const mode = defaults.thinking
+    ?? (defaults.preset === "custom" ? undefined : THINKING_EXPANSION_PRESETS[defaults.preset])
+    ?? preferences.thinkingBlocksExpansion
+    ?? "expanded"
+  return mode === "expanded"
+}
diff --git a/packages/ui/src/components/tool-call/tool-registry.ts b/packages/ui/src/components/tool-call/tool-registry.ts
index 004a6c2ca..1b7981942 100644
--- a/packages/ui/src/components/tool-call/tool-registry.ts
+++ b/packages/ui/src/components/tool-call/tool-registry.ts
@@ -1,10 +1,5 @@
-import type {
-  ExpansionPreference,
-  Preferences,
-  ToolCallExpansionPreset,
-  VisibilityPreference,
-} from "../../stores/preferences"
 import type { ToolRenderer } from "./types"
+import { getToolRegistryEntry } from "./tool-presentation"
 import { applyPatchRenderer } from "./renderers/apply-patch"
 import { bashRenderer } from "./renderers/bash"
 import { defaultRenderer } from "./renderers/default"
@@ -20,193 +15,15 @@ import { todoRenderer } from "./renderers/todo"
 import { webfetchRenderer } from "./renderers/webfetch"
 import { writeRenderer } from "./renderers/write"
 
-export const OTHER_TOOL_NAME = "other"
+export * from "./tool-presentation"
 
-export const THINKING_EXPANSION_PRESETS: Record<ToolCallExpansionPreset, ExpansionPreference> = {
-  minimal: "collapsed",
-  balanced: "collapsed",
-  detailed: "expanded",
-  everything: "expanded",
-}
-
-export interface ToolRegistryEntry {
-  tool: string
-  label: string
-  labelKey?: string
-  renderer: ToolRenderer
-  configurable: boolean
-  expansionPresets: Record<ToolCallExpansionPreset, VisibilityPreference>
-  aliases?: string[]
-}
-
-const expanded = "expanded" satisfies ExpansionPreference
-const collapsed = "collapsed" satisfies ExpansionPreference
-
-function presets(values: Record<ToolCallExpansionPreset, VisibilityPreference>) {
-  return values
-}
-
-export const TOOL_REGISTRY: ToolRegistryEntry[] = [
-  {
-    tool: "bash",
-    label: "bash",
-    renderer: bashRenderer,
-    configurable: true,
-    expansionPresets: presets({ minimal: collapsed, balanced: expanded, detailed: expanded, everything: expanded }),
-  },
-  {
-    tool: "read",
-    label: "read",
-    renderer: readRenderer,
-    configurable: true,
-    expansionPresets: presets({ minimal: collapsed, balanced: collapsed, detailed: collapsed, everything: expanded }),
-  },
-  {
-    tool: "write",
-    label: "write",
-    renderer: writeRenderer,
-    configurable: true,
-    expansionPresets: presets({ minimal: collapsed, balanced: expanded, detailed: expanded, everything: expanded }),
-  },
-  {
-    tool: "edit",
-    label: "edit",
-    renderer: editRenderer,
-    configurable: true,
-    expansionPresets: presets({ minimal: collapsed, balanced: expanded, detailed: expanded, everything: expanded }),
-  },
-  {
-    tool: "patch",
-    label: "patch",
-    renderer: patchRenderer,
-    configurable: true,
-    expansionPresets: presets({ minimal: collapsed, balanced: expanded, detailed: expanded, everything: expanded }),
-  },
-  {
-    tool: "apply_patch",
-    label: "apply_patch",
-    renderer: applyPatchRenderer,
-    configurable: true,
-    expansionPresets: presets({ minimal: collapsed, balanced: expanded, detailed: expanded, everything: expanded }),
-  },
-  {
-    tool: "webfetch",
-    label: "webfetch",
-    renderer: webfetchRenderer,
-    configurable: true,
-    expansionPresets: presets({ minimal: collapsed, balanced: collapsed, detailed: expanded, everything: expanded }),
-  },
-  {
-    tool: "glob",
-    label: "glob",
-    renderer: searchRenderer,
-    configurable: true,
-    expansionPresets: presets({ minimal: collapsed, balanced: collapsed, detailed: expanded, everything: expanded }),
-  },
-  {
-    tool: "grep",
-    label: "grep",
-    renderer: searchRenderer,
-    configurable: true,
-    expansionPresets: presets({ minimal: collapsed, balanced: collapsed, detailed: expanded, everything: expanded }),
-  },
-  {
-    tool: "todowrite",
-    label: "todowrite",
-    renderer: todoRenderer,
-    configurable: true,
-    expansionPresets: presets({ minimal: expanded, balanced: expanded, detailed: expanded, everything: expanded }),
-  },
-  {
-    tool: "task",
-    label: "task",
-    renderer: taskRenderer,
-    configurable: true,
-    expansionPresets: presets({ minimal: collapsed, balanced: expanded, detailed: expanded, everything: expanded }),
-  },
-  {
-    tool: "skill",
-    label: "skill",
-    renderer: skillRenderer,
-    configurable: true,
-    expansionPresets: presets({ minimal: collapsed, balanced: collapsed, detailed: collapsed, everything: expanded }),
-  },
-  {
-    tool: "question",
-    label: "question",
-    renderer: questionRenderer,
-    configurable: true,
-    expansionPresets: presets({ minimal: collapsed, balanced: expanded, detailed: expanded, everything: expanded }),
-  },
-  {
-    tool: "invalid",
-    label: "invalid",
-    renderer: invalidRenderer,
-    configurable: true,
-    expansionPresets: presets({ minimal: collapsed, balanced: collapsed, detailed: collapsed, everything: expanded }),
-  },
-  {
-    tool: OTHER_TOOL_NAME,
-    label: "Other tools",
-    labelKey: "settings.behavior.expansionDefaults.otherTools",
-    renderer: defaultRenderer,
-    configurable: true,
-    expansionPresets: presets({ minimal: collapsed, balanced: collapsed, detailed: expanded, everything: expanded }),
-  },
-]
-
-const otherToolEntry = TOOL_REGISTRY.find((entry) => entry.tool === OTHER_TOOL_NAME)!
-
-const registryMap = TOOL_REGISTRY.reduce<Record<string, ToolRegistryEntry>>((acc, entry) => {
-  acc[entry.tool] = entry
-  entry.aliases?.forEach((alias) => {
-    acc[alias] = entry
-  })
-  return acc
-}, {})
-
-export function getToolRegistryEntry(toolName: string): ToolRegistryEntry {
-  return registryMap[toolName] ?? otherToolEntry
+const renderers: Record<string, ToolRenderer> = {
+  bash: bashRenderer, read: readRenderer, write: writeRenderer, edit: editRenderer,
+  patch: patchRenderer, apply_patch: applyPatchRenderer, webfetch: webfetchRenderer,
+  glob: searchRenderer, grep: searchRenderer, todowrite: todoRenderer, task: taskRenderer,
+  skill: skillRenderer, question: questionRenderer, invalid: invalidRenderer,
 }
 
 export function resolveToolRenderer(toolName: string): ToolRenderer {
-  return getToolRegistryEntry(toolName).renderer
-}
-
-export function getConfigurableToolEntries(): ToolRegistryEntry[] {
-  return TOOL_REGISTRY.filter((entry) => entry.configurable)
-}
-
-export function buildToolExpansionPresetDefaults(preset: ToolCallExpansionPreset): Record<string, VisibilityPreference> {
-  const defaults: Record<string, VisibilityPreference> = {}
-  for (const entry of getConfigurableToolEntries()) {
-    defaults[entry.tool] = entry.expansionPresets[preset]
-  }
-  return defaults
-}
-
-export function resolveToolVisibility(preferences: Preferences, toolName: string): VisibilityPreference {
-  const entry = getToolRegistryEntry(toolName)
-  const defaults = preferences.toolCallExpansionDefaults
-  const presetMode = defaults.preset === "custom" ? undefined : entry.expansionPresets[defaults.preset]
-  const otherPresetMode = defaults.preset === "custom" ? undefined : otherToolEntry.expansionPresets[defaults.preset]
-  return defaults.tools[entry.tool]
-    ?? presetMode
-    ?? defaults.tools[OTHER_TOOL_NAME]
-    ?? otherPresetMode
-    ?? preferences.toolOutputExpansion
-    ?? "expanded"
-}
-
-export function resolveToolExpansionDefault(preferences: Preferences, toolName: string): boolean {
-  return resolveToolVisibility(preferences, toolName) === "expanded"
-}
-
-export function resolveThinkingExpansionDefault(preferences: Preferences): boolean {
-  const defaults = preferences.toolCallExpansionDefaults
-  const mode = defaults.thinking
-    ?? (defaults.preset === "custom" ? undefined : THINKING_EXPANSION_PRESETS[defaults.preset])
-    ?? preferences.thinkingBlocksExpansion
-    ?? "expanded"
-  return mode === "expanded"
+  return renderers[getToolRegistryEntry(toolName).tool] ?? defaultRenderer
 }
diff --git a/packages/ui/src/components/tool-call/utils.ts b/packages/ui/src/components/tool-call/utils.ts
index 29ca0dc3d..3bc17eb5d 100644
--- a/packages/ui/src/components/tool-call/utils.ts
+++ b/packages/ui/src/components/tool-call/utils.ts
@@ -23,39 +23,6 @@ export function isToolStateError(state: ToolState): state is ToolStateError {
   return state.status === "error"
 }
 
-export function getToolIcon(tool: string): string {
-  switch (tool) {
-    case "bash":
-      return "⚡"
-    case "edit":
-      return "✏️"
-    case "read":
-      return "📖"
-    case "write":
-      return "📝"
-    case "glob":
-      return "🔍"
-    case "grep":
-      return "🔎"
-    case "webfetch":
-      return "🌐"
-    case "task":
-      return "🎯"
-    case "todowrite":
-      return "📋"
-    case "question":
-      return "❓"
-    case "list":
-      return "📁"
-    case "patch":
-      return "🔧"
-    case "apply_patch":
-      return "🔧"
-    default:
-      return "🔧"
-  }
-}
-
 export function getToolName(tool: string): string {
   switch (tool) {
     case "bash":
diff --git a/packages/ui/src/components/transcript-filters.tsx b/packages/ui/src/components/transcript-filters.tsx
new file mode 100644
index 000000000..376c925f7
--- /dev/null
+++ b/packages/ui/src/components/transcript-filters.tsx
@@ -0,0 +1,69 @@
+import { Popover } from "@kobalte/core/popover"
+import IconButton from "@suid/material/IconButton"
+import { Dynamic } from "solid-js/web"
+import { For, Show, createMemo, createSignal } from "solid-js"
+import { ChevronDown, ChevronRight, Eye, EyeOff, ListFilter, X } from "lucide-solid"
+import { useI18n } from "../lib/i18n"
+import { showToastNotification } from "../lib/notifications"
+import { useConfig, type VisibilityPreference } from "../stores/preferences"
+import { getMessageContentIcon } from "./message-content-icons"
+import { transcriptVisibility, transcriptVisibilityPatch, transcriptVisibilityRows } from "./transcript-visibility"
+
+export default function TranscriptFilters() {
+  const { t } = useI18n()
+  const { preferences, updatePreferences } = useConfig()
+  const rows = createMemo(() => transcriptVisibilityRows(t))
+  const [saving, setSaving] = createSignal(false)
+  return (
+    <Popover placement="bottom-end" gutter={6}>
+      <Popover.Trigger as={IconButton} size="small" color="inherit" class="transcript-filters-trigger icon-toggle" aria-label={t("transcriptFilters.title")} title={t("transcriptFilters.title")}>
+        <ListFilter class="w-4 h-4" aria-hidden="true" />
+      </Popover.Trigger>
+      <Popover.Portal>
+        <Popover.Content class="window-shell transcript-filters" aria-busy={saving()}>
+          <header class="window-header">
+            <Popover.Title class="window-title">{t("transcriptFilters.title")}</Popover.Title>
+            <Popover.CloseButton class="window-icon-button" aria-label={t("toastHistory.close")}><X class="w-4 h-4" aria-hidden="true" /></Popover.CloseButton>
+          </header>
+          <Popover.Description class="sr-only">{t("transcriptFilters.description")}</Popover.Description>
+          <div class="window-body transcript-filters-list">
+            <For each={rows()}>{(row) => {
+              const mode = () => transcriptVisibility(preferences(), row)
+              let previousVisible: VisibilityPreference = "collapsed"
+              const setMode = async (value: VisibilityPreference) => {
+                if (saving()) return
+                setSaving(true)
+                try {
+                  const saved = await updatePreferences(transcriptVisibilityPatch(preferences(), row, value))
+                  if (!saved) showToastNotification({ message: t("settings.speech.save.error"), variant: "error" })
+                } finally {
+                  setSaving(false)
+                }
+              }
+              const visibilityLabel = () => t(mode() === "hidden" ? "transcriptFilters.show" : "transcriptFilters.hide", { name: row.label })
+              const expansionLabel = () => t(mode() === "expanded" ? "transcriptFilters.collapse" : "transcriptFilters.expand", { name: row.label })
+              return (
+                <div class="transcript-filter-row" role="group" aria-label={row.label}>
+                  <Dynamic component={getMessageContentIcon(row.key)} class="w-4 h-4" aria-hidden="true" />
+                  <span class="transcript-filter-label" title={row.label}>{row.label}</span>
+                  <button type="button" class="window-icon-button" aria-label={visibilityLabel()} title={visibilityLabel()} aria-pressed={mode() !== "hidden"} aria-disabled={saving()}
+                    onClick={() => {
+                      if (saving()) return
+                      if (mode() === "hidden") setMode(previousVisible)
+                      else { previousVisible = mode(); setMode("hidden") }
+                    }}>
+                    <Show when={mode() !== "hidden"} fallback={<EyeOff class="w-4 h-4" aria-hidden="true" />}><Eye class="w-4 h-4" aria-hidden="true" /></Show>
+                  </button>
+                  <button type="button" class="window-icon-button" disabled={mode() === "hidden"} aria-disabled={saving() || mode() === "hidden"} aria-label={expansionLabel()} title={expansionLabel()} aria-pressed={mode() === "expanded"}
+                    onClick={() => setMode(mode() === "expanded" ? "collapsed" : "expanded")}>
+                    <Show when={mode() === "expanded"} fallback={<ChevronRight class="w-4 h-4" aria-hidden="true" />}><ChevronDown class="w-4 h-4" aria-hidden="true" /></Show>
+                  </button>
+                </div>
+              )
+            }}</For>
+          </div>
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover>
+  )
+}
diff --git a/packages/ui/src/components/transcript-visibility.test.ts b/packages/ui/src/components/transcript-visibility.test.ts
new file mode 100644
index 000000000..6e7e9e301
--- /dev/null
+++ b/packages/ui/src/components/transcript-visibility.test.ts
@@ -0,0 +1,61 @@
+import assert from "node:assert/strict"
+import { describe, it } from "node:test"
+import type { Preferences } from "../stores/preferences"
+import { transcriptVisibility, transcriptVisibilityPatch, transcriptVisibilityRows } from "./transcript-visibility"
+
+const current = () => ({
+  showThinkingBlocks: true,
+  thinkingBlocksExpansion: "expanded",
+  toolOutputExpansion: "expanded",
+  diagnosticsExpansion: "collapsed",
+  toolInputsVisibility: "hidden",
+  showUsageMetrics: true,
+  usageMetricsExpansion: "collapsed",
+  toolCallExpansionDefaults: { preset: "balanced", tools: {} },
+} as Preferences)
+const rows = transcriptVisibilityRows((key) => key)
+const row = (key: string) => rows.find((item) => item.key === key)!
+
+describe("shared transcript visibility controls", () => {
+  it("uses dev's order and label keys in both preferences and the popup", () => {
+    assert.deepEqual(rows.slice(0, 4), [
+      { kind: "thinking", key: "thinking", label: "settings.behavior.expansionDefaults.thinking" },
+      { kind: "diagnostics", key: "diagnostics", label: "settings.behavior.diagnosticsDefault.title" },
+      { kind: "inputs", key: "inputs", label: "settings.behavior.toolInputsVisibility.title" },
+      { kind: "usage", key: "usage", label: "settings.behavior.usageMetrics.title" },
+    ])
+    assert.ok(rows.slice(4).every((item) => item.kind === "tool"))
+  })
+  it("preserves every other effective tool setting when customizing one tool", () => {
+    const before = current()
+    const after = { ...before, ...transcriptVisibilityPatch(before, row("read"), "hidden") }
+    assert.equal(after.toolCallExpansionDefaults.preset, "custom")
+    assert.equal(transcriptVisibility(after, row("read")), "hidden")
+    for (const item of rows.filter((item) => item.key !== "read")) {
+      assert.equal(transcriptVisibility(after, item), transcriptVisibility(before, item), item.key)
+    }
+  })
+  it("supports all three tool modes", () => {
+    for (const mode of ["hidden", "collapsed", "expanded"] as const) {
+      const before = current()
+      const after = { ...before, ...transcriptVisibilityPatch(before, row("bash"), mode) }
+      assert.equal(transcriptVisibility(after, row("bash")), mode)
+    }
+  })
+  it("hides thinking without discarding its expansion preference", () => {
+    const before = current()
+    before.toolCallExpansionDefaults.thinking = "expanded"
+    const after = { ...before, ...transcriptVisibilityPatch(before, row("thinking"), "hidden") }
+    assert.equal(transcriptVisibility(after, row("thinking")), "hidden")
+    assert.equal(after.toolCallExpansionDefaults.thinking, "expanded")
+  })
+  it("keeps usage expansion when hiding metrics", () => {
+    assert.deepEqual(transcriptVisibilityPatch(current(), row("usage"), "hidden"), {
+      showUsageMetrics: false, usageMetricsExpansion: "collapsed",
+    })
+  })
+  it("updates diagnostics and inputs independently", () => {
+    assert.deepEqual(transcriptVisibilityPatch(current(), row("diagnostics"), "hidden"), { diagnosticsExpansion: "hidden" })
+    assert.deepEqual(transcriptVisibilityPatch(current(), row("inputs"), "expanded"), { toolInputsVisibility: "expanded" })
+  })
+})
diff --git a/packages/ui/src/components/transcript-visibility.ts b/packages/ui/src/components/transcript-visibility.ts
new file mode 100644
index 000000000..83d51f69c
--- /dev/null
+++ b/packages/ui/src/components/transcript-visibility.ts
@@ -0,0 +1,57 @@
+import type { Preferences, VisibilityPreference } from "../stores/preferences"
+import { getConfigurableToolEntries, OTHER_TOOL_NAME, resolveToolVisibility, THINKING_EXPANSION_PRESETS } from "./tool-call/tool-presentation"
+
+export type TranscriptVisibilityRow =
+  | { kind: "thinking"; key: "thinking"; label: string }
+  | { kind: "tool"; key: string; label: string }
+  | { kind: "diagnostics"; key: "diagnostics"; label: string }
+  | { kind: "inputs"; key: "inputs"; label: string }
+  | { kind: "usage"; key: "usage"; label: string }
+
+export function transcriptVisibilityRows(t: (key: string) => string): TranscriptVisibilityRow[] {
+  return [
+    { kind: "thinking", key: "thinking", label: t("settings.behavior.expansionDefaults.thinking") },
+    { kind: "diagnostics", key: "diagnostics", label: t("settings.behavior.diagnosticsDefault.title") },
+    { kind: "inputs", key: "inputs", label: t("settings.behavior.toolInputsVisibility.title") },
+    { kind: "usage", key: "usage", label: t("settings.behavior.usageMetrics.title") },
+    ...getConfigurableToolEntries().map((entry) => ({
+      kind: "tool" as const, key: entry.tool, label: entry.labelKey ? t(entry.labelKey) : entry.label,
+    })),
+  ]
+}
+
+function thinkingExpansion(current: Preferences) {
+  const defaults = current.toolCallExpansionDefaults
+  return defaults.thinking
+    ?? (defaults.preset === "custom" ? undefined : THINKING_EXPANSION_PRESETS[defaults.preset])
+    ?? current.thinkingBlocksExpansion ?? "expanded"
+}
+
+export function transcriptVisibility(current: Preferences, row: TranscriptVisibilityRow): VisibilityPreference {
+  switch (row.kind) {
+    case "thinking": return current.showThinkingBlocks ? thinkingExpansion(current) : "hidden"
+    case "tool": return resolveToolVisibility(current, row.key)
+    case "diagnostics": return current.diagnosticsExpansion
+    case "inputs": return current.toolInputsVisibility
+    case "usage": return current.showUsageMetrics ? current.usageMetricsExpansion : "hidden"
+  }
+}
+
+export function transcriptVisibilityPatch(current: Preferences, row: TranscriptVisibilityRow, mode: VisibilityPreference): Partial<Preferences> {
+  if (row.kind === "diagnostics") return { diagnosticsExpansion: mode }
+  if (row.kind === "inputs") return { toolInputsVisibility: mode }
+  if (row.kind === "usage") return {
+    showUsageMetrics: mode !== "hidden",
+    usageMetricsExpansion: mode === "hidden" ? current.usageMetricsExpansion : mode,
+  }
+  // Preserve every effective preset value before switching to per-type overrides.
+  const tools = Object.fromEntries(getConfigurableToolEntries().map((entry) => [entry.tool, resolveToolVisibility(current, entry.tool)]))
+  if (row.kind === "tool") tools[row.key] = mode
+  const thinking = row.kind === "thinking" && mode !== "hidden" ? mode : thinkingExpansion(current)
+  return {
+    showThinkingBlocks: row.kind === "thinking" ? mode !== "hidden" : current.showThinkingBlocks,
+    toolCallExpansionDefaults: { preset: "custom", thinking, tools },
+    thinkingBlocksExpansion: row.kind === "thinking" && mode !== "hidden" ? mode : current.thinkingBlocksExpansion,
+    toolOutputExpansion: row.kind === "tool" && row.key === OTHER_TOOL_NAME && mode !== "hidden" ? mode : current.toolOutputExpansion,
+  }
+}
diff --git a/packages/ui/src/components/worktree-selector.tsx b/packages/ui/src/components/worktree-selector.tsx
index 82eed37c7..bcf4a57b1 100644
--- a/packages/ui/src/components/worktree-selector.tsx
+++ b/packages/ui/src/components/worktree-selector.tsx
@@ -508,7 +508,7 @@ export default function WorktreeSelector(props: WorktreeSelectorProps) {
 
               <Show when={deleteTarget()}>
                 {(target) => (
-                  <div class="rounded-lg border border-base bg-surface-secondary px-3 py-2">
+                  <div class="border border-base bg-surface-secondary px-3 py-2">
                     <p class="text-sm text-primary">
                       Worktree <span class="font-semibold font-mono">&quot;{target().slug}&quot;</span>
                     </p>
@@ -571,7 +571,7 @@ export default function WorktreeSelector(props: WorktreeSelectorProps) {
 
               <Show when={displayDeleteError()}>
                 {(message) => (
-                  <div class="rounded-lg border border-danger bg-danger/10 p-3 flex flex-col gap-2">
+                  <div class="border border-danger bg-danger/10 p-3 flex flex-col gap-2">
                     <div class="flex flex-col gap-1">
                       <p class="text-xs font-medium text-danger uppercase tracking-wide">
                         {t("instanceShell.worktree.delete.error.title")}
@@ -593,7 +593,7 @@ export default function WorktreeSelector(props: WorktreeSelectorProps) {
                       </Show>
                     </div>
 
-                    <pre class="max-h-[40vh] overflow-auto whitespace-pre-wrap break-all rounded border border-danger/30 bg-surface-primary px-3 py-2 text-xs text-primary select-text leading-5">{message()}</pre>
+                    <pre class="max-h-[40vh] overflow-auto whitespace-pre-wrap break-all border border-danger/30 bg-surface-primary px-3 py-2 text-xs text-primary select-text leading-5">{message()}</pre>
 
                     <div class="grid grid-cols-2 gap-2">
                       <button
diff --git a/packages/ui/src/lib/appearance-preferences.test.ts b/packages/ui/src/lib/appearance-preferences.test.ts
new file mode 100644
index 000000000..f3c8175cf
--- /dev/null
+++ b/packages/ui/src/lib/appearance-preferences.test.ts
@@ -0,0 +1,48 @@
+import assert from "node:assert/strict"
+import { describe, it } from "node:test"
+import { effectiveAppearance, normalizeAppearancePreferences, selectAppearancePalette } from "./appearance-preferences"
+import { normalizeColorScheme } from "./theme-scheme"
+
+describe("independent appearance preferences", () => {
+  it("migrates a fixed palette without changing colors, mode or preset identity", () => {
+    const legacy = normalizeColorScheme({ id: "custom", appearance: "light", colors: normalizeColorScheme("linen").colors })
+    const pair = normalizeAppearancePreferences(undefined, legacy, "saved-linen")
+    assert.equal(pair.mode, "light")
+    assert.deepEqual(pair.light, { scheme: legacy, presetId: "saved-linen" })
+    assert.equal(pair.dark.scheme.id, "mist")
+  })
+  it("migrates automatic mode with two soft defaults", () => {
+    const pair = normalizeAppearancePreferences(undefined, normalizeColorScheme("system"))
+    assert.equal(pair.mode, "system")
+    assert.equal(pair.light.scheme.id, "porcelain")
+    assert.equal(pair.dark.scheme.id, "mist")
+  })
+  it("selecting the inactive palette preserves mode and the other selection across reload", () => {
+    const before = normalizeAppearancePreferences(undefined, normalizeColorScheme("slate"))
+    const after = selectAppearancePalette(before, normalizeColorScheme("iris"))
+    assert.equal(after.mode, "dark")
+    assert.deepEqual(after.dark, before.dark)
+    assert.equal(after.light.scheme.id, "iris")
+    assert.deepEqual(normalizeAppearancePreferences(JSON.parse(JSON.stringify(after)), normalizeColorScheme("system")), after)
+  })
+  it("changing to automatic mode does not replace either slot", () => {
+    const before = normalizeAppearancePreferences(undefined, normalizeColorScheme("clay"))
+    const after = selectAppearancePalette(before, normalizeColorScheme("system"))
+    assert.equal(after.mode, "system")
+    assert.deepEqual(after.dark, before.dark)
+    assert.deepEqual(after.light, before.light)
+    assert.equal(effectiveAppearance(after.mode, true), "dark")
+    assert.equal(effectiveAppearance(after.mode, false), "light")
+    assert.equal(effectiveAppearance("light", true), "light")
+    assert.equal(effectiveAppearance("dark", false), "dark")
+  })
+  it("rejects wrong-appearance or malformed slots without modifying the source", () => {
+    const input = { mode: "bad", light: { scheme: normalizeColorScheme("clay") }, dark: null }
+    const snapshot = JSON.stringify(input)
+    const pair = normalizeAppearancePreferences(input, normalizeColorScheme("system"))
+    assert.equal(pair.light.scheme.id, "porcelain")
+    assert.equal(pair.dark.scheme.id, "mist")
+    assert.equal(pair.mode, "system")
+    assert.equal(JSON.stringify(input), snapshot)
+  })
+})
diff --git a/packages/ui/src/lib/appearance-preferences.ts b/packages/ui/src/lib/appearance-preferences.ts
new file mode 100644
index 000000000..d0d054923
--- /dev/null
+++ b/packages/ui/src/lib/appearance-preferences.ts
@@ -0,0 +1,46 @@
+import { normalizeColorScheme, type NormalizedColorScheme } from "./theme-scheme"
+
+export type Appearance = "light" | "dark"
+export type AppearanceMode = "system" | Appearance
+export interface AppearancePalette {
+  scheme: NormalizedColorScheme
+  presetId: string | null
+}
+export interface AppearancePreferences {
+  mode: AppearanceMode
+  light: AppearancePalette
+  dark: AppearancePalette
+}
+
+const record = (value: unknown): Record<string, unknown> =>
+  value && typeof value === "object" && !Array.isArray(value) ? value as Record<string, unknown> : {}
+
+/** Migrate without writes: keep the previous fixed selection in its own slot. */
+export function normalizeAppearancePreferences(value: unknown, legacy: NormalizedColorScheme, presetId?: string): AppearancePreferences {
+  const input = record(value)
+  const slot = (appearance: Appearance): AppearancePalette => {
+    const saved = record(input[appearance])
+    const scheme = normalizeColorScheme(saved.scheme)
+    if (scheme.appearance === appearance) {
+      return { scheme, presetId: typeof saved.presetId === "string" ? saved.presetId : null }
+    }
+    return legacy.appearance === appearance
+      ? { scheme: legacy, presetId: presetId ?? null }
+      : { scheme: normalizeColorScheme(appearance === "light" ? "porcelain" : "mist"), presetId: null }
+  }
+  return {
+    mode: input.mode === "light" || input.mode === "dark" || input.mode === "system" ? input.mode : legacy.appearance,
+    light: slot("light"),
+    dark: slot("dark"),
+  }
+}
+
+export function effectiveAppearance(mode: AppearanceMode, systemDark: boolean): Appearance {
+  return mode === "system" ? systemDark ? "dark" : "light" : mode
+}
+
+export function selectAppearancePalette(current: AppearancePreferences, scheme: NormalizedColorScheme, presetId: string | null = null): AppearancePreferences {
+  return scheme.appearance === "system"
+    ? { ...current, mode: "system" }
+    : { ...current, [scheme.appearance]: { scheme, presetId } }
+}
diff --git a/packages/ui/src/lib/classic-dark-surfaces.test.ts b/packages/ui/src/lib/classic-dark-surfaces.test.ts
new file mode 100644
index 000000000..ba5fef460
--- /dev/null
+++ b/packages/ui/src/lib/classic-dark-surfaces.test.ts
@@ -0,0 +1,22 @@
+import assert from "node:assert/strict"
+import { it } from "node:test"
+import { classicDarkSurfaces } from "./classic-dark-surfaces"
+import { normalizeColorScheme } from "./theme-scheme"
+
+it("restores the V1 dark message tint, roles, accent hover and borders", () => {
+  const colors = normalizeColorScheme("classic").colors!
+  assert.equal(colors.userAccent, "#2196F3")
+  assert.equal(colors.agentAccent, "#D97706")
+  assert.equal(colors.compactionAccent, "#C084FC")
+  assert.deepEqual(classicDarkSurfaces(colors), {
+    "--message-user-bg": "#202734", "--accent-hover": "#0066CC",
+    "--message-tool-border": "#ADB5BD", "--border-secondary": "#3A3A3A",
+    "--border-muted": "#3A3A3A", "--border-strong": "#3A3A3A",
+  })
+})
+
+it("does not mask a customized dark palette", () => {
+  const colors = { ...normalizeColorScheme("classic").colors!, userAccent: "#77BBEE", accentPrimary: "#8866AA", borderBase: "#444444" }
+  assert.deepEqual(classicDarkSurfaces(colors), {})
+  assert.deepEqual(normalizeColorScheme({ id: "classic", colors }).colors, colors)
+})
diff --git a/packages/ui/src/lib/classic-dark-surfaces.ts b/packages/ui/src/lib/classic-dark-surfaces.ts
new file mode 100644
index 000000000..1daf26322
--- /dev/null
+++ b/packages/ui/src/lib/classic-dark-surfaces.ts
@@ -0,0 +1,17 @@
+import type { ColorSchemeColors } from "./theme-scheme"
+
+/** Explicit dark mode in CodeNomad V1, tokens.css at 52f0e629^.
+ * Keep the historical defaults without masking saved color edits. */
+export function classicDarkSurfaces(colors: Readonly<ColorSchemeColors>): Record<string, string> {
+  return {
+    ...(colors.userAccent === "#2196F3" && colors.surfaceBase === "#1A1A1A" && colors.surfaceSecondary === "#2A2A2A"
+      ? { "--message-user-bg": "#202734" } : {}),
+    ...(colors.accentPrimary === "#0080FF" ? { "--accent-hover": "#0066CC" } : {}),
+    ...(colors.borderBase === "#3A3A3A" && colors.textMuted === "#999999" ? {
+      "--message-tool-border": "#ADB5BD",
+      "--border-secondary": "#3A3A3A",
+      "--border-muted": "#3A3A3A",
+      "--border-strong": "#3A3A3A",
+    } : {}),
+  }
+}
diff --git a/packages/ui/src/lib/classic-light-surfaces.test.ts b/packages/ui/src/lib/classic-light-surfaces.test.ts
new file mode 100644
index 000000000..a5213ec8f
--- /dev/null
+++ b/packages/ui/src/lib/classic-light-surfaces.test.ts
@@ -0,0 +1,32 @@
+import assert from "node:assert/strict"
+import { it } from "node:test"
+import { classicLightSurfaces } from "./classic-light-surfaces"
+import { BUILT_IN_COLOR_SCHEMES, normalizeColorScheme } from "./theme-scheme"
+
+it("names both historical appearances Classic while preserving stable IDs", () => {
+  const light = BUILT_IN_COLOR_SCHEMES.find(s => s.id === "light")!
+  assert.equal(light.labelKey, BUILT_IN_COLOR_SCHEMES.find(s => s.id === "classic")!.labelKey)
+  assert.equal(light.appearance, "light")
+  assert.equal(normalizeColorScheme("light").id, "light")
+  assert.equal(BUILT_IN_COLOR_SCHEMES.find(s => s.appearance === "light")?.id, "light")
+  assert.equal(BUILT_IN_COLOR_SCHEMES.find(s => s.appearance === "dark")?.id, "classic")
+})
+
+it("restores the V1 light surface relationship without resurrecting harsh rollovers", () => {
+  const colors = normalizeColorScheme("light").colors!
+  assert.equal(colors.surfaceBase, "#FFFFFF")
+  assert.equal(colors.surfaceSecondary, "#F5F5F5")
+  assert.equal(colors.surfaceMuted, "#F8FAFC")
+  assert.equal(colors.borderBase, "#E0E0E0")
+  assert.equal(colors.accentPrimary, "#0066FF")
+  assert.deepEqual(classicLightSurfaces(colors), {
+    "--message-assistant-bg": "#F8F8F8", "--message-tool-bg": "#F8F8F8",
+    "--surface-code": "#F1F5F9", "--text-secondary": "#334155", "--accent-hover": "#0052CC",
+  })
+})
+
+it("does not mask custom light colors or overwrite saved embedded selections", () => {
+  const colors = { ...normalizeColorScheme("light").colors!, surfaceBase: "#EEEEEE", surfaceMuted: "#DDDDDD", textMuted: "#445566", accentPrimary: "#225588" }
+  assert.deepEqual(classicLightSurfaces(colors), {})
+  assert.deepEqual(normalizeColorScheme({ id: "light", colors }).colors, colors)
+})
diff --git a/packages/ui/src/lib/classic-light-surfaces.ts b/packages/ui/src/lib/classic-light-surfaces.ts
new file mode 100644
index 000000000..1664fed01
--- /dev/null
+++ b/packages/ui/src/lib/classic-light-surfaces.ts
@@ -0,0 +1,16 @@
+import type { ColorSchemeColors } from "./theme-scheme"
+
+/** CodeNomad V1: tokens.css at 52f0e629^ (before the native V2 migration).
+ * V1 had separate tool/code/secondary-text tokens. Restore their defaults
+ * without overriding explicitly customized semantic fields. */
+export function classicLightSurfaces(colors: Readonly<ColorSchemeColors>): Record<string, string> {
+  return {
+    ...(colors.surfaceMuted === "#F8FAFC" ? {
+      "--message-assistant-bg": "#F8F8F8",
+      "--message-tool-bg": "#F8F8F8",
+      ...(colors.surfaceBase === "#FFFFFF" ? { "--surface-code": "#F1F5F9" } : {}),
+    } : {}),
+    ...(colors.textMuted === "#475569" ? { "--text-secondary": "#334155" } : {}),
+    ...(colors.accentPrimary === "#0066FF" ? { "--accent-hover": "#0052CC" } : {}),
+  }
+}
diff --git a/packages/ui/src/lib/color-scheme-presets.test.ts b/packages/ui/src/lib/color-scheme-presets.test.ts
index c87341e4a..c76157982 100644
--- a/packages/ui/src/lib/color-scheme-presets.test.ts
+++ b/packages/ui/src/lib/color-scheme-presets.test.ts
@@ -1,15 +1,19 @@
 import assert from "node:assert/strict"
 import { describe, it } from "node:test"
 import { DEFAULT_CUSTOM_COLORS, LIGHT_COLOR_SCHEME_COLORS, validateColorSchemeColors } from "./theme-scheme.ts"
-import { MAX_COLOR_SCHEME_PRESETS, nextColorSchemePresetName, normalizeColorSchemePresets } from "./color-scheme-presets.ts"
+import { MAX_COLOR_SCHEME_PRESETS, nextColorSchemePresetName, normalizeColorSchemeOverrides, normalizeColorSchemePresets } from "./color-scheme-presets.ts"
 
 describe("color scheme presets", () => {
   it("normalizes saved presets and increments derived names", () => {
+    const garish = { ...DEFAULT_CUSTOM_COLORS, surfaceBase: "#FF00FF", surfaceSecondary: "#00FFFF" }
+    assert.equal(validateColorSchemeColors(garish), false)
     assert.deepEqual(normalizeColorSchemePresets({
       valid: { name: " Fjord 2 ", appearance: "dark", colors: DEFAULT_CUSTOM_COLORS },
+      garish: { name: "Debug colors", appearance: "dark", colors: garish },
       invalid: { name: "Broken", appearance: "dark", colors: { surfaceBase: "#fff" } },
     }), {
       valid: { name: "Fjord 2", appearance: "dark", colors: DEFAULT_CUSTOM_COLORS },
+      garish: { name: "Debug colors", appearance: "dark", colors: garish },
     })
     assert.equal(nextColorSchemePresetName("Fjord", ["Fjord 2", "Fjord 3"]), "Fjord 4")
     assert.equal(nextColorSchemePresetName("Fjord 2", ["Fjord 2"]), "Fjord 3")
@@ -20,5 +24,8 @@ describe("color scheme presets", () => {
         { name: `Preset ${index}`, appearance: "dark", colors: DEFAULT_CUSTOM_COLORS },
       ]),
     ))).length, MAX_COLOR_SCHEME_PRESETS)
+    assert.deepEqual(normalizeColorSchemeOverrides({ light: LIGHT_COLOR_SCHEME_COLORS, custom: DEFAULT_CUSTOM_COLORS, nope: DEFAULT_CUSTOM_COLORS }), {
+      light: LIGHT_COLOR_SCHEME_COLORS,
+    })
   })
 })
diff --git a/packages/ui/src/lib/color-scheme-presets.ts b/packages/ui/src/lib/color-scheme-presets.ts
index 4c5361e1d..0f8c87185 100644
--- a/packages/ui/src/lib/color-scheme-presets.ts
+++ b/packages/ui/src/lib/color-scheme-presets.ts
@@ -1,7 +1,9 @@
 import {
+  COLOR_SCHEME_IDS,
+  DEFAULT_CUSTOM_COLORS,
   isColorSchemeColors,
-  validateColorSchemeColors,
   type ColorSchemeColors,
+  type ColorSchemeId,
 } from "./theme-scheme.ts"
 
 export interface UserColorSchemePreset {
@@ -11,8 +13,15 @@ export interface UserColorSchemePreset {
 }
 
 export type UserColorSchemePresets = Record<string, UserColorSchemePreset>
+export type BuiltInColorSchemeOverrides = Partial<Record<Exclude<ColorSchemeId, "custom">, ColorSchemeColors>>
 export const MAX_COLOR_SCHEME_PRESETS = 50
 
+// Do not add an empty customization slot to the catalog. Legacy data is kept
+// intact in storage; a default-only selection is presented as Basalt.
+export function isDefaultCustomColors(colors: Readonly<ColorSchemeColors> | undefined): boolean {
+  return Boolean(colors && Object.entries(DEFAULT_CUSTOM_COLORS).every(([key, value]) => colors[key as keyof ColorSchemeColors] === value))
+}
+
 const isRecord = (value: unknown): value is Record<string, unknown> =>
   typeof value === "object" && value !== null && !Array.isArray(value)
 
@@ -23,12 +32,22 @@ export function normalizeColorSchemePresets(value: unknown): UserColorSchemePres
     if (!id || id.length > 128 || !isRecord(candidate)) continue
     const name = typeof candidate.name === "string" ? candidate.name.trim().slice(0, 80) : ""
     const appearance = candidate.appearance === "light" ? "light" : candidate.appearance === "dark" ? "dark" : undefined
-    if (!name || !appearance || !isColorSchemeColors(candidate.colors) || !validateColorSchemeColors(candidate.colors)) continue
+    if (!name || !appearance || !isColorSchemeColors(candidate.colors)) continue
     presets[id] = { name, appearance, colors: { ...candidate.colors } }
   }
   return presets
 }
 
+export function normalizeColorSchemeOverrides(value: unknown): BuiltInColorSchemeOverrides {
+  if (!isRecord(value)) return {}
+  const overrides: BuiltInColorSchemeOverrides = {}
+  for (const [id, colors] of Object.entries(value)) {
+    if (id === "custom" || !COLOR_SCHEME_IDS.includes(id as ColorSchemeId) || !isColorSchemeColors(colors)) continue
+    overrides[id as Exclude<ColorSchemeId, "custom">] = { ...colors }
+  }
+  return overrides
+}
+
 export function nextColorSchemePresetName(sourceName: string, existingNames: readonly string[]): string {
   const source = sourceName.trim() || "Custom"
   const match = /^(.*?)(?:\s+(\d+))?$/.exec(source)
diff --git a/packages/ui/src/lib/contexts/instance-metadata-context.tsx b/packages/ui/src/lib/contexts/instance-metadata-context.tsx
index d15d0970b..4708d9298 100644
--- a/packages/ui/src/lib/contexts/instance-metadata-context.tsx
+++ b/packages/ui/src/lib/contexts/instance-metadata-context.tsx
@@ -2,6 +2,7 @@ import { Component, JSX, createContext, createEffect, createMemo, createSignal,
 import type { Instance } from "../../types/instance"
 import { instances } from "../../stores/instances"
 import { getInstanceMetadata } from "../../stores/instance-metadata"
+import { getActiveCatalogLocation } from "../../stores/sessions"
 import { loadInstanceMetadata, hasMetadataLoaded } from "../hooks/use-instance-metadata"
 
 interface InstanceMetadataContextValue {
@@ -21,23 +22,29 @@ interface InstanceMetadataProviderProps {
 export const InstanceMetadataProvider: Component<InstanceMetadataProviderProps> = (props) => {
   const resolvedInstance = createMemo(() => instances().get(props.instance.id) ?? props.instance)
   const [isLoading, setIsLoading] = createSignal(true)
+  let metadataLoadId = 0
 
   const ensureMetadata = async (force = false) => {
+    const loadId = ++metadataLoadId
     const current = resolvedInstance()
     if (!current) {
-      setIsLoading(false)
+      if (loadId === metadataLoadId) setIsLoading(false)
       return
     }
 
     const cachedMetadata = getInstanceMetadata(current.id) ?? current.metadata
-    if (!force && hasMetadataLoaded(cachedMetadata)) {
-      setIsLoading(false)
+    const location = getActiveCatalogLocation(current.id)
+    if (!force && hasMetadataLoaded(cachedMetadata, location)) {
+      if (loadId === metadataLoadId) setIsLoading(false)
       return
     }
 
     setIsLoading(true)
-    await loadInstanceMetadata(current, { force })
-    setIsLoading(false)
+    try {
+      await loadInstanceMetadata(current, { force, location })
+    } finally {
+      if (loadId === metadataLoadId) setIsLoading(false)
+    }
   }
 
   createEffect(() => {
@@ -48,7 +55,8 @@ export const InstanceMetadataProvider: Component<InstanceMetadataProviderProps>
     }
 
     const tracked = getInstanceMetadata(current.id) ?? current.metadata
-    if (!tracked || !hasMetadataLoaded(tracked)) {
+    const location = getActiveCatalogLocation(current.id)
+    if (!tracked || !hasMetadataLoaded(tracked, location)) {
       void ensureMetadata()
       return
     }
diff --git a/packages/ui/src/lib/hooks/use-instance-metadata.test.ts b/packages/ui/src/lib/hooks/use-instance-metadata.test.ts
index cf7275ae1..41c95f5ee 100644
--- a/packages/ui/src/lib/hooks/use-instance-metadata.test.ts
+++ b/packages/ui/src/lib/hooks/use-instance-metadata.test.ts
@@ -7,20 +7,55 @@ import { hasMetadataLoaded, loadInstanceMetadata } from "./use-instance-metadata
 describe("instance metadata", () => {
   it("fills VCS from the matching project list entry", async () => {
     const instanceId = "project-vcs"
+    let activationSettled = false
+    const locations: unknown[] = []
+    const responseLocation = {
+      directory: "/repo/worktree",
+      workspaceID: "workspace-1",
+      project: { id: "project-1", directory: "/repo", canonical: "/repo" },
+    }
     const client = {
       project: {
         current: async () => ({ id: "project-1", directory: "/repo", canonical: "/repo" }),
         list: async () => [{ id: "other", canonical: "/other", vcs: "hg" }, { id: "project-1", canonical: "/repo", vcs: "git" }],
       },
-      mcp: { list: async () => ({ location: { directory: "/repo", project: { id: "project-1", directory: "/repo", canonical: "/repo" } }, data: [] }) },
-      plugin: { list: async () => ({ location: { directory: "/repo", project: { id: "project-1", directory: "/repo", canonical: "/repo" } }, data: [{ id: "opencode.plan" }, { id: "ponytail" }, { status: "failed", error: "broken" }] }) },
+      mcp: {
+        list: async (input: unknown) => {
+          locations.push(input)
+          return { location: responseLocation, data: [] }
+        },
+      },
+      plugin: {
+        awaitActivation: async (input: unknown) => {
+          locations.push(input)
+          activationSettled = true
+        },
+        list: async (input: unknown) => {
+          locations.push(input)
+          assert.equal(activationSettled, true)
+          return {
+            location: responseLocation,
+            data: [
+              { id: "opencode.plan", state: { status: "active" } },
+              { id: "ponytail", state: { status: "active" } },
+              { id: "broken", state: { status: "failed", error: "broken" } },
+            ],
+          }
+        },
+      },
     }
 
     try {
-      await loadInstanceMetadata({ id: instanceId, folder: "/repo", client } as any)
+      const location = { directory: "/repo/worktree", workspaceID: "workspace-1" }
+      await loadInstanceMetadata({ id: instanceId, folder: "/repo", client } as any, { location })
       assert.equal(getInstanceMetadata(instanceId)?.project?.vcs, "git")
       assert.deepEqual(getInstanceMetadata(instanceId)?.plugins, ["ponytail"])
-      assert.equal(hasMetadataLoaded(getInstanceMetadata(instanceId)), true)
+      assert.equal(hasMetadataLoaded(getInstanceMetadata(instanceId), location), true)
+      assert.equal(hasMetadataLoaded(getInstanceMetadata(instanceId), { directory: "/repo/worktree" }), true)
+      assert.equal(hasMetadataLoaded(getInstanceMetadata(instanceId), { directory: "/repo" }), false)
+      assert.deepEqual(locations, Array.from({ length: 3 }, () => ({
+        location: { directory: "/repo/worktree", workspace: "workspace-1" },
+      })))
     } finally {
       clearInstanceMetadata(instanceId)
     }
@@ -38,7 +73,10 @@ describe("instance metadata", () => {
         list: async () => { await gate; return [] },
       },
       mcp: { list: async () => { await gate; return { data: [label] } } },
-      plugin: { list: async () => { await gate; return { data: [{ id: label }] } } },
+      plugin: {
+        awaitActivation: async () => { await gate },
+        list: async () => { await gate; return { data: [{ id: label, state: { status: "active" } }] } },
+      },
     })
 
     try {
@@ -55,4 +93,49 @@ describe("instance metadata", () => {
       clearInstanceMetadata(instanceId)
     }
   })
+
+  it("does not treat stale plugin inventory as loaded after a location switch", async () => {
+    const instanceId = "metadata-location-partial-failure"
+    let failPlugins = false
+    const project = { id: "project", directory: "/repo", canonical: "/repo" }
+    const client = {
+      project: {
+        current: async () => project,
+        list: async () => [project],
+      },
+      mcp: {
+        list: async ({ location }: any) => ({
+          location: {
+            directory: location.directory,
+            ...(location.workspace ? { workspaceID: location.workspace } : {}),
+            project,
+          },
+          data: [],
+        }),
+      },
+      plugin: {
+        awaitActivation: async () => undefined,
+        list: async () => {
+          if (failPlugins) throw new Error("plugin inventory unavailable")
+          return { data: [{ id: "root-plugin", state: { status: "active" } }] }
+        },
+      },
+    }
+
+    try {
+      await loadInstanceMetadata({ id: instanceId, folder: "/repo", client } as any)
+      assert.deepEqual(getInstanceMetadata(instanceId)?.plugins, ["root-plugin"])
+
+      failPlugins = true
+      const worktree = { directory: "/repo/worktree", workspaceID: "workspace" }
+      await loadInstanceMetadata({ id: instanceId, folder: "/repo", client } as any, { location: worktree })
+
+      const metadata = getInstanceMetadata(instanceId)
+      assert.equal(metadata?.mcpStatus?.location.directory, worktree.directory)
+      assert.equal(metadata?.plugins, undefined)
+      assert.equal(hasMetadataLoaded(metadata, worktree), false)
+    } finally {
+      clearInstanceMetadata(instanceId)
+    }
+  })
 })
diff --git a/packages/ui/src/lib/hooks/use-instance-metadata.ts b/packages/ui/src/lib/hooks/use-instance-metadata.ts
index 5e4b83935..2fb696b7b 100644
--- a/packages/ui/src/lib/hooks/use-instance-metadata.ts
+++ b/packages/ui/src/lib/hooks/use-instance-metadata.ts
@@ -1,11 +1,15 @@
+import type { LocationRef } from "@opencode-ai/client"
 import type { Instance } from "../../types/instance"
 import { getLogger } from "../../lib/logger"
 import { getInstanceMetadata, getInstanceMetadataGeneration, mergeInstanceMetadata } from "../../stores/instance-metadata"
+import { waitForPluginActivation } from "../../stores/plugin-activation"
+import { toRequestLocation } from "../../stores/request-locations"
 
 const log = getLogger("session")
 const pendingMetadataRequests = new Map<string, {
   client: NonNullable<Instance["client"]>
   generation: number
+  locationKey: string
   promise: Promise<void>
 }>()
 const pendingProjectMetadataRequests = new Map<string, {
@@ -14,35 +18,53 @@ const pendingProjectMetadataRequests = new Map<string, {
   promise: Promise<void>
 }>()
 
-function hasMetadataLoaded(metadata?: Instance["metadata"]): boolean {
+function locationKey(location: LocationRef): string {
+  return `${location.directory}\0${location.workspaceID ?? ""}`
+}
+
+function metadataMatchesLocation(metadata: Instance["metadata"] | undefined, location: LocationRef): boolean {
+  if (!metadata) return false
+  const resolved = metadata.mcpStatus?.location
+  return resolved?.directory === location.directory
+    && (!location.workspaceID || resolved.workspaceID === location.workspaceID)
+}
+
+function hasMetadataLoaded(metadata?: Instance["metadata"], location?: LocationRef): boolean {
   if (!metadata) return false
-  return "project" in metadata && "mcpStatus" in metadata && "plugins" in metadata
+  if (metadata.project === undefined || metadata.mcpStatus === undefined || metadata.plugins === undefined) return false
+  return !location || metadataMatchesLocation(metadata, location)
 }
 
-export function loadInstanceMetadata(instance: Instance, options?: { force?: boolean }): Promise<void> {
+export function loadInstanceMetadata(instance: Instance, options?: { force?: boolean; location?: LocationRef }): Promise<void> {
   const client = instance.client
   if (!client) {
     log.warn("[metadata] Skipping fetch; client missing", { instanceId: instance.id })
     return Promise.resolve()
   }
 
+  const location = options?.location ?? { directory: instance.folder }
+  const currentLocationKey = locationKey(location)
   const currentMetadata = getInstanceMetadata(instance.id) ?? instance.metadata
-  if (!options?.force && hasMetadataLoaded(currentMetadata)) {
+  if (!options?.force && hasMetadataLoaded(currentMetadata, location)) {
     return Promise.resolve()
   }
 
   const generation = getInstanceMetadataGeneration(instance.id)
   const pending = pendingMetadataRequests.get(instance.id)
-  if (pending?.client === client && pending.generation === generation) return pending.promise
-  const request = { client, generation, promise: Promise.resolve() as Promise<void> }
+  if (pending?.client === client
+    && pending.generation === generation
+    && pending.locationKey === currentLocationKey) return pending.promise
+  const request = { client, generation, locationKey: currentLocationKey, promise: Promise.resolve() as Promise<void> }
   request.promise = (async () => {
     try {
-      const location = { directory: instance.folder }
+      const requestLocation = toRequestLocation(location)
+      const pluginRequest = waitForPluginActivation(client, location)
+        .then(() => client.plugin.list({ location: requestLocation }))
       const [projectResult, projectsResult, mcpResult, pluginResult] = await Promise.allSettled([
         loadInstanceProjectMetadata(instance, options),
         client.project.list(),
-        client.mcp.list({ location }),
-        client.plugin.list({ location }),
+        client.mcp.list({ location: requestLocation }),
+        pluginRequest,
       ])
 
       const currentProject = getInstanceMetadata(instance.id)?.project
@@ -50,10 +72,20 @@ export function loadInstanceMetadata(instance: Instance, options?: { force?: boo
         ? projectsResult.value.find((project) => project.id === currentProject.id)
         : undefined
       const plugins = pluginResult.status === "fulfilled"
-        ? pluginResult.value.data.flatMap((plugin) => typeof plugin.id === "string" && !plugin.id.startsWith("opencode.") ? [plugin.id] : [])
+        ? pluginResult.value.data.flatMap((plugin) => {
+            const status = plugin.state?.status ?? (plugin as unknown as { status?: string }).status
+            return status === "active" && typeof plugin.id === "string" && !plugin.id.startsWith("opencode.")
+              ? [plugin.id]
+              : []
+          })
         : undefined
 
-      const updates: Instance["metadata"] = { ...(getInstanceMetadata(instance.id) ?? currentMetadata ?? {}) }
+      const latestMetadata = getInstanceMetadata(instance.id) ?? currentMetadata
+      const updates: Instance["metadata"] = { ...(latestMetadata ?? {}) }
+      if (latestMetadata && !metadataMatchesLocation(latestMetadata, location)) {
+        updates.mcpStatus = undefined
+        updates.plugins = undefined
+      }
 
       if (projectResult.status === "fulfilled" && currentProject && listedProject?.vcs) {
         updates.project = { ...currentProject, vcs: listedProject.vcs }
diff --git a/packages/ui/src/lib/i18n/messages/de/messaging.ts b/packages/ui/src/lib/i18n/messages/de/messaging.ts
index 37ae03f49..b246b2f62 100644
--- a/packages/ui/src/lib/i18n/messages/de/messaging.ts
+++ b/packages/ui/src/lib/i18n/messages/de/messaging.ts
@@ -1,4 +1,10 @@
 export const messagingMessages = {
+  "transcriptFilters.title": "Nachrichteninhalt",
+  "transcriptFilters.description": "Inhalte ein- oder ausblenden und ihre anfängliche Darstellung festlegen. Diese Einstellungen gelten für alle Unterhaltungen.",
+  "transcriptFilters.show": "{name} anzeigen",
+  "transcriptFilters.hide": "{name} ausblenden",
+  "transcriptFilters.expand": "{name} aufklappen",
+  "transcriptFilters.collapse": "{name} zuklappen",
   "messageListHeader.sidebar.openSessionListAriaLabel": "Sitzungsliste öffnen",
   "messageListHeader.metrics.usedLabel": "Benutzt",
   "messageListHeader.metrics.availableLabel": "Verfügbar",
diff --git a/packages/ui/src/lib/i18n/messages/de/settings.ts b/packages/ui/src/lib/i18n/messages/de/settings.ts
index ec6e5d0bb..4f7d76051 100644
--- a/packages/ui/src/lib/i18n/messages/de/settings.ts
+++ b/packages/ui/src/lib/i18n/messages/de/settings.ts
@@ -1,4 +1,22 @@
 export const settingsMessages = {
+  "settings.appearance.palette.mode": "Darstellungsmodus",
+  "settings.appearance.palette.auto": "Auto",
+  "settings.appearance.palette.independent": "Speichere eine Palette pro Erscheinungsbild. Auto folgt dem System und zeigt die passende Palette an.",
+  "settings.appearance.palette.soft": "Sanfte Farbtöne",
+  "settings.appearance.palette.legacy": "Ursprüngliche Paletten",
+  "settings.appearance.palette.mist": "Nebel",
+  "settings.appearance.palette.mist.description": "Sanfte neutrale Grautöne mit kühlem Unterton.",
+  "settings.appearance.palette.slate": "Schiefer",
+  "settings.appearance.palette.slate.description": "Blaugraue Flächen und dezente mineralische Akzente.",
+  "settings.appearance.palette.clay": "Ton",
+  "settings.appearance.palette.clay.description": "Warme erdige Grautöne und gedämpftes Ocker.",
+  "settings.appearance.palette.linen": "Leinen",
+  "settings.appearance.palette.linen.description": "Sanftes Elfenbeinpapier mit graugrünem Text.",
+  "settings.appearance.palette.iris": "Iris",
+  "settings.appearance.palette.iris.description": "Kühle lavendelgraue Flächen ohne grelles Weiß.",
+  "settings.appearance.palette.sage": "Salbei",
+  "settings.appearance.palette.sage.description": "Ruhige graugrüne Flächen mit olivfarbenen Untertönen.",
+  "settings.appearance.palette.saved": "Gespeicherte Anpassung",
   "instanceServiceStatus.sections.lsp": "LSP-Server",
   "instanceServiceStatus.sections.mcp": "MCP-Server",
   "instanceServiceStatus.sections.plugins": "Plugins",
@@ -146,7 +164,10 @@ export const settingsMessages = {
   "settings.appearance.colorScheme.subtitle": "Wählen Sie die Palette für Clients dieses CodeNomad-Servers.",
   "settings.appearance.colorScheme.option.system": "System",
   "settings.appearance.colorScheme.option.light": "Hell",
-  "settings.appearance.colorScheme.option.codeNomadClassic": "CodeNomad Klassisch",
+  "settings.appearance.colorScheme.option.porcelain": "Porzellan",
+  "settings.appearance.colorScheme.option.dawn": "Morgengrauen",
+  "settings.appearance.colorScheme.option.parchment": "Pergament",
+  "settings.appearance.colorScheme.option.codeNomadClassic": "Klassisch",
   "settings.appearance.colorScheme.option.basalt": "Basalt",
   "settings.appearance.colorScheme.option.fjord": "Fjord",
   "settings.appearance.colorScheme.option.lichen": "Flechte",
@@ -155,6 +176,9 @@ export const settingsMessages = {
   "settings.appearance.colorScheme.option.custom": "Benutzerdefiniert",
   "settings.appearance.colorScheme.description.system": "Folgt der Darstellung des Betriebssystems.",
   "settings.appearance.colorScheme.description.light": "Eine helle, neutrale Palette.",
+  "settings.appearance.colorScheme.description.porcelain": "Sanftes neutrales Chrome mit klarer weißer Arbeitsfläche.",
+  "settings.appearance.colorScheme.description.dawn": "Kühle Tageslichtflächen mit klarem blauem Akzent.",
+  "settings.appearance.colorScheme.description.parchment": "Warme Papierflächen mit zurückhaltendem Petrolakzent.",
   "settings.appearance.colorScheme.description.codeNomadClassic": "Die ursprüngliche dunkle CodeNomad-Palette.",
   "settings.appearance.colorScheme.description.basalt": "Neutrales Anthrazit mit kühlem blauem Akzent.",
   "settings.appearance.colorScheme.description.fjord": "Tiefes Blaugrau mit meergrünem Akzent.",
@@ -166,9 +190,9 @@ export const settingsMessages = {
   "settings.appearance.colorScheme.custom.appearance.light": "Hell",
   "settings.appearance.colorScheme.custom.appearance.dark": "Dunkel",
   "settings.appearance.colorScheme.custom.colors": "Farben",
-  "settings.appearance.colorScheme.custom.field.surfaceBase": "Grundfläche",
-  "settings.appearance.colorScheme.custom.field.surfaceSecondary": "Sekundäre Fläche",
-  "settings.appearance.colorScheme.custom.field.surfaceMuted": "Gedämpfte Fläche",
+  "settings.appearance.colorScheme.custom.field.surfaceBase": "Basis",
+  "settings.appearance.colorScheme.custom.field.surfaceSecondary": "Sekundär",
+  "settings.appearance.colorScheme.custom.field.surfaceMuted": "Gedämpft",
   "settings.appearance.colorScheme.custom.field.borderBase": "Rahmen",
   "settings.appearance.colorScheme.custom.field.textPrimary": "Primärtext",
   "settings.appearance.colorScheme.custom.field.textMuted": "Gedämpfter Text",
@@ -183,8 +207,11 @@ export const settingsMessages = {
   "settings.appearance.colorScheme.custom.pickerAriaLabel": "{name} auswählen",
   "settings.appearance.colorScheme.custom.valueAriaLabel": "Hexadezimalwert für {name}",
   "settings.appearance.colorScheme.custom.warning.format": "Verwenden Sie Großbuchstaben im Format #RRGGBB.",
-  "settings.appearance.colorScheme.custom.warning.contrast": "Erhöhen Sie vor dem Speichern den Kontrast.",
   "settings.appearance.colorScheme.custom.reset": "Zurücksetzen",
+  "settings.appearance.colorScheme.custom.new": "Neu",
+  "settings.appearance.colorScheme.custom.name": "Name",
+  "settings.appearance.colorScheme.custom.delete": "Löschen",
+  "settings.appearance.colorScheme.custom.deleteConfirm": "„{name}“ löschen?",
   "settings.appearance.colorScheme.custom.save": "Speichern",
   "settings.appearance.colorScheme.custom.saveError": "Die Farbpalette konnte nicht gespeichert werden.",
   "settings.appearance.startup.title": "Startverhalten",
@@ -524,6 +551,7 @@ export const settingsMessages = {
   "toastHistory.unread": "{count} ungelesen",
   "toastHistory.viewSettings": "Einstellungen",
   "toastHistory.close": "Schließen",
+  "toastHistory.openLinkError": "Link konnte nicht geöffnet werden",
   "toastHistory.deleteItem": "Benachrichtigung löschen",
 
   "settings.section.info.title": "Über",
diff --git a/packages/ui/src/lib/i18n/messages/en/messaging.ts b/packages/ui/src/lib/i18n/messages/en/messaging.ts
index 273ecc3a1..c4fa3cd9f 100644
--- a/packages/ui/src/lib/i18n/messages/en/messaging.ts
+++ b/packages/ui/src/lib/i18n/messages/en/messaging.ts
@@ -1,4 +1,10 @@
 export const messagingMessages = {
+  "transcriptFilters.title": "Message content",
+  "transcriptFilters.description": "Show or hide content, then choose whether it starts expanded. These settings apply to all conversations.",
+  "transcriptFilters.show": "Show {name}",
+  "transcriptFilters.hide": "Hide {name}",
+  "transcriptFilters.expand": "Expand {name}",
+  "transcriptFilters.collapse": "Collapse {name}",
   "messageListHeader.sidebar.openSessionListAriaLabel": "Open session list",
   "messageListHeader.metrics.usedLabel": "Used",
   "messageListHeader.metrics.availableLabel": "Avail",
diff --git a/packages/ui/src/lib/i18n/messages/en/settings.ts b/packages/ui/src/lib/i18n/messages/en/settings.ts
index 5f8000651..486913cc5 100644
--- a/packages/ui/src/lib/i18n/messages/en/settings.ts
+++ b/packages/ui/src/lib/i18n/messages/en/settings.ts
@@ -1,4 +1,22 @@
 export const settingsMessages = {
+  "settings.appearance.palette.mode": "Appearance mode",
+  "settings.appearance.palette.auto": "Auto",
+  "settings.appearance.palette.independent": "Save a palette for each appearance. Auto follows the system and shows the matching palette.",
+  "settings.appearance.palette.soft": "Soft tones",
+  "settings.appearance.palette.legacy": "Original palettes",
+  "settings.appearance.palette.mist": "Mist",
+  "settings.appearance.palette.mist.description": "Soft neutral grays with a cool undertone.",
+  "settings.appearance.palette.slate": "Slate",
+  "settings.appearance.palette.slate.description": "Blue-gray surfaces and restrained mineral accents.",
+  "settings.appearance.palette.clay": "Clay",
+  "settings.appearance.palette.clay.description": "Warm earth grays and muted ochre tones.",
+  "settings.appearance.palette.linen": "Linen",
+  "settings.appearance.palette.linen.description": "Soft ivory paper with gray-green text.",
+  "settings.appearance.palette.iris": "Iris",
+  "settings.appearance.palette.iris.description": "Cool lavender-gray surfaces without bright white.",
+  "settings.appearance.palette.sage": "Sage",
+  "settings.appearance.palette.sage.description": "Quiet gray-green surfaces and olive undertones.",
+  "settings.appearance.palette.saved": "Saved customization",
   "instanceServiceStatus.sections.lsp": "LSP Servers",
   "instanceServiceStatus.sections.mcp": "MCP Servers",
   "instanceServiceStatus.sections.plugins": "Plugins",
@@ -146,7 +164,10 @@ export const settingsMessages = {
   "settings.appearance.colorScheme.subtitle": "Choose the palette used by clients connected to this CodeNomad server.",
   "settings.appearance.colorScheme.option.system": "System",
   "settings.appearance.colorScheme.option.light": "Light",
-  "settings.appearance.colorScheme.option.codeNomadClassic": "CodeNomad Classic",
+  "settings.appearance.colorScheme.option.porcelain": "Porcelain",
+  "settings.appearance.colorScheme.option.dawn": "Dawn",
+  "settings.appearance.colorScheme.option.parchment": "Parchment",
+  "settings.appearance.colorScheme.option.codeNomadClassic": "Classic",
   "settings.appearance.colorScheme.option.basalt": "Basalt",
   "settings.appearance.colorScheme.option.fjord": "Fjord",
   "settings.appearance.colorScheme.option.lichen": "Lichen",
@@ -155,6 +176,9 @@ export const settingsMessages = {
   "settings.appearance.colorScheme.option.custom": "Custom",
   "settings.appearance.colorScheme.description.system": "Follow your operating system appearance.",
   "settings.appearance.colorScheme.description.light": "A bright, neutral palette.",
+  "settings.appearance.colorScheme.description.porcelain": "Soft neutral chrome with a crisp white workspace.",
+  "settings.appearance.colorScheme.description.dawn": "Cool daylight surfaces with a clear blue accent.",
+  "settings.appearance.colorScheme.description.parchment": "Warm paper surfaces with a restrained teal accent.",
   "settings.appearance.colorScheme.description.codeNomadClassic": "The original CodeNomad dark palette.",
   "settings.appearance.colorScheme.description.basalt": "Neutral charcoal with a cool blue accent.",
   "settings.appearance.colorScheme.description.fjord": "Deep blue-gray with a sea-green accent.",
@@ -166,10 +190,10 @@ export const settingsMessages = {
   "settings.appearance.colorScheme.custom.appearance.light": "Light",
   "settings.appearance.colorScheme.custom.appearance.dark": "Dark",
   "settings.appearance.colorScheme.custom.colors": "Colors",
-  "settings.appearance.colorScheme.custom.field.surfaceBase": "Base surface",
-  "settings.appearance.colorScheme.custom.field.surfaceSecondary": "Secondary surface",
-  "settings.appearance.colorScheme.custom.field.surfaceMuted": "Muted surface",
-  "settings.appearance.colorScheme.custom.field.borderBase": "Border",
+  "settings.appearance.colorScheme.custom.field.surfaceBase": "Base",
+  "settings.appearance.colorScheme.custom.field.surfaceSecondary": "Secondary",
+  "settings.appearance.colorScheme.custom.field.surfaceMuted": "Muted",
+  "settings.appearance.colorScheme.custom.field.borderBase": "Borders",
   "settings.appearance.colorScheme.custom.field.textPrimary": "Primary text",
   "settings.appearance.colorScheme.custom.field.textMuted": "Muted text",
   "settings.appearance.colorScheme.custom.field.accentPrimary": "Accent",
@@ -183,8 +207,11 @@ export const settingsMessages = {
   "settings.appearance.colorScheme.custom.pickerAriaLabel": "Choose {name}",
   "settings.appearance.colorScheme.custom.valueAriaLabel": "Hex value for {name}",
   "settings.appearance.colorScheme.custom.warning.format": "Use uppercase colors in #RRGGBB format.",
-  "settings.appearance.colorScheme.custom.warning.contrast": "Increase color contrast before saving.",
   "settings.appearance.colorScheme.custom.reset": "Reset",
+  "settings.appearance.colorScheme.custom.new": "New",
+  "settings.appearance.colorScheme.custom.name": "Name",
+  "settings.appearance.colorScheme.custom.delete": "Delete",
+  "settings.appearance.colorScheme.custom.deleteConfirm": "Delete \"{name}\"?",
   "settings.appearance.colorScheme.custom.save": "Save",
   "settings.appearance.colorScheme.custom.saveError": "Could not save the palette.",
   "settings.appearance.startup.title": "Startup",
@@ -525,6 +552,7 @@ export const settingsMessages = {
   "toastHistory.unread": "{count} unread",
   "toastHistory.viewSettings": "Settings",
   "toastHistory.close": "Close",
+  "toastHistory.openLinkError": "Unable to open link",
   "toastHistory.deleteItem": "Delete notification",
 
   // Info Section
diff --git a/packages/ui/src/lib/i18n/messages/es/messaging.ts b/packages/ui/src/lib/i18n/messages/es/messaging.ts
index 43315d79f..a80919805 100644
--- a/packages/ui/src/lib/i18n/messages/es/messaging.ts
+++ b/packages/ui/src/lib/i18n/messages/es/messaging.ts
@@ -1,4 +1,10 @@
 export const messagingMessages = {
+  "transcriptFilters.title": "Contenido de los mensajes",
+  "transcriptFilters.description": "Muestra u oculta contenido y elige si se inicia expandido. Estos ajustes se aplican a todas las conversaciones.",
+  "transcriptFilters.show": "Mostrar {name}",
+  "transcriptFilters.hide": "Ocultar {name}",
+  "transcriptFilters.expand": "Expandir {name}",
+  "transcriptFilters.collapse": "Contraer {name}",
   "messageListHeader.sidebar.openSessionListAriaLabel": "Abrir lista de sesiones",
   "messageListHeader.metrics.usedLabel": "Usado",
   "messageListHeader.metrics.availableLabel": "Disp.",
diff --git a/packages/ui/src/lib/i18n/messages/es/settings.ts b/packages/ui/src/lib/i18n/messages/es/settings.ts
index 85899d25c..b28f7071f 100644
--- a/packages/ui/src/lib/i18n/messages/es/settings.ts
+++ b/packages/ui/src/lib/i18n/messages/es/settings.ts
@@ -1,4 +1,22 @@
 export const settingsMessages = {
+  "settings.appearance.palette.mode": "Modo de apariencia",
+  "settings.appearance.palette.auto": "Auto",
+  "settings.appearance.palette.independent": "Guarda una paleta para cada apariencia. Auto sigue el sistema y muestra la paleta correspondiente.",
+  "settings.appearance.palette.soft": "Tonos suaves",
+  "settings.appearance.palette.legacy": "Paletas originales",
+  "settings.appearance.palette.mist": "Bruma",
+  "settings.appearance.palette.mist.description": "Grises neutros suaves con matices fríos.",
+  "settings.appearance.palette.slate": "Pizarra",
+  "settings.appearance.palette.slate.description": "Superficies gris azulado y acentos minerales discretos.",
+  "settings.appearance.palette.clay": "Arcilla",
+  "settings.appearance.palette.clay.description": "Grises terrosos cálidos y tonos ocre atenuados.",
+  "settings.appearance.palette.linen": "Lino",
+  "settings.appearance.palette.linen.description": "Papel marfil suave con texto verde grisáceo.",
+  "settings.appearance.palette.iris": "Iris",
+  "settings.appearance.palette.iris.description": "Superficies gris lavanda frías sin blanco brillante.",
+  "settings.appearance.palette.sage": "Salvia",
+  "settings.appearance.palette.sage.description": "Superficies gris verdoso suaves con matices oliva.",
+  "settings.appearance.palette.saved": "Personalización guardada",
   "instanceServiceStatus.sections.lsp": "Servidores LSP",
   "instanceServiceStatus.sections.mcp": "Servidores MCP",
   "instanceServiceStatus.sections.plugins": "Plugins",
@@ -146,7 +164,10 @@ export const settingsMessages = {
   "settings.appearance.colorScheme.subtitle": "Elige la paleta de los clientes conectados a este servidor CodeNomad.",
   "settings.appearance.colorScheme.option.system": "Sistema",
   "settings.appearance.colorScheme.option.light": "Claro",
-  "settings.appearance.colorScheme.option.codeNomadClassic": "CodeNomad Clásico",
+  "settings.appearance.colorScheme.option.porcelain": "Porcelana",
+  "settings.appearance.colorScheme.option.dawn": "Amanecer",
+  "settings.appearance.colorScheme.option.parchment": "Pergamino",
+  "settings.appearance.colorScheme.option.codeNomadClassic": "Clásico",
   "settings.appearance.colorScheme.option.basalt": "Basalto",
   "settings.appearance.colorScheme.option.fjord": "Fiordo",
   "settings.appearance.colorScheme.option.lichen": "Liquen",
@@ -155,6 +176,9 @@ export const settingsMessages = {
   "settings.appearance.colorScheme.option.custom": "Personalizado",
   "settings.appearance.colorScheme.description.system": "Sigue la apariencia del sistema operativo.",
   "settings.appearance.colorScheme.description.light": "Una paleta clara y neutra.",
+  "settings.appearance.colorScheme.description.porcelain": "Un marco neutro y suave con un espacio de trabajo blanco y nítido.",
+  "settings.appearance.colorScheme.description.dawn": "Superficies frías de luz diurna con un acento azul definido.",
+  "settings.appearance.colorScheme.description.parchment": "Superficies cálidas de papel con un discreto acento verde azulado.",
   "settings.appearance.colorScheme.description.codeNomadClassic": "La paleta oscura original de CodeNomad.",
   "settings.appearance.colorScheme.description.basalt": "Gris carbón neutro con un acento azul frío.",
   "settings.appearance.colorScheme.description.fjord": "Azul grisáceo profundo con un acento verde mar.",
@@ -166,10 +190,10 @@ export const settingsMessages = {
   "settings.appearance.colorScheme.custom.appearance.light": "Clara",
   "settings.appearance.colorScheme.custom.appearance.dark": "Oscura",
   "settings.appearance.colorScheme.custom.colors": "Colores",
-  "settings.appearance.colorScheme.custom.field.surfaceBase": "Superficie base",
-  "settings.appearance.colorScheme.custom.field.surfaceSecondary": "Superficie secundaria",
-  "settings.appearance.colorScheme.custom.field.surfaceMuted": "Superficie atenuada",
-  "settings.appearance.colorScheme.custom.field.borderBase": "Borde",
+  "settings.appearance.colorScheme.custom.field.surfaceBase": "Base",
+  "settings.appearance.colorScheme.custom.field.surfaceSecondary": "Secundaria",
+  "settings.appearance.colorScheme.custom.field.surfaceMuted": "Atenuada",
+  "settings.appearance.colorScheme.custom.field.borderBase": "Bordes",
   "settings.appearance.colorScheme.custom.field.textPrimary": "Texto principal",
   "settings.appearance.colorScheme.custom.field.textMuted": "Texto atenuado",
   "settings.appearance.colorScheme.custom.field.accentPrimary": "Acento",
@@ -183,8 +207,11 @@ export const settingsMessages = {
   "settings.appearance.colorScheme.custom.pickerAriaLabel": "Elegir {name}",
   "settings.appearance.colorScheme.custom.valueAriaLabel": "Valor hexadecimal de {name}",
   "settings.appearance.colorScheme.custom.warning.format": "Usa colores en mayúsculas con formato #RRGGBB.",
-  "settings.appearance.colorScheme.custom.warning.contrast": "Aumenta el contraste antes de guardar.",
   "settings.appearance.colorScheme.custom.reset": "Restablecer",
+  "settings.appearance.colorScheme.custom.new": "Nuevo",
+  "settings.appearance.colorScheme.custom.name": "Nombre",
+  "settings.appearance.colorScheme.custom.delete": "Eliminar",
+  "settings.appearance.colorScheme.custom.deleteConfirm": "¿Eliminar «{name}»?",
   "settings.appearance.colorScheme.custom.save": "Guardar",
   "settings.appearance.colorScheme.custom.saveError": "No se pudo guardar la paleta.",
   "settings.appearance.startup.title": "Inicio",
@@ -524,6 +551,7 @@ export const settingsMessages = {
   "toastHistory.unread": "{count} sin leer",
   "toastHistory.viewSettings": "Configuración",
   "toastHistory.close": "Cerrar",
+  "toastHistory.openLinkError": "No se pudo abrir el enlace",
   "toastHistory.deleteItem": "Eliminar notificación",
 
   // Info Section
diff --git a/packages/ui/src/lib/i18n/messages/fr/messaging.ts b/packages/ui/src/lib/i18n/messages/fr/messaging.ts
index ac9793e6d..213cc8e81 100644
--- a/packages/ui/src/lib/i18n/messages/fr/messaging.ts
+++ b/packages/ui/src/lib/i18n/messages/fr/messaging.ts
@@ -1,4 +1,10 @@
 export const messagingMessages = {
+  "transcriptFilters.title": "Contenu des messages",
+  "transcriptFilters.description": "Affichez ou masquez les contenus, puis choisissez leur dépliage initial. Ces réglages s’appliquent à toutes les conversations.",
+  "transcriptFilters.show": "Afficher {name}",
+  "transcriptFilters.hide": "Masquer {name}",
+  "transcriptFilters.expand": "Développer {name}",
+  "transcriptFilters.collapse": "Replier {name}",
   "messageListHeader.sidebar.openSessionListAriaLabel": "Ouvrir la liste des sessions",
   "messageListHeader.metrics.usedLabel": "Utilisé",
   "messageListHeader.metrics.availableLabel": "Dispo",
diff --git a/packages/ui/src/lib/i18n/messages/fr/settings.ts b/packages/ui/src/lib/i18n/messages/fr/settings.ts
index 29385ea63..e772081b9 100644
--- a/packages/ui/src/lib/i18n/messages/fr/settings.ts
+++ b/packages/ui/src/lib/i18n/messages/fr/settings.ts
@@ -1,4 +1,22 @@
 export const settingsMessages = {
+  "settings.appearance.palette.mode": "Mode d’apparence",
+  "settings.appearance.palette.auto": "Auto",
+  "settings.appearance.palette.independent": "Mémorisez une palette par mode d’apparence. Auto suit le système et affiche la palette correspondante.",
+  "settings.appearance.palette.soft": "Tonalités douces",
+  "settings.appearance.palette.legacy": "Palettes historiques",
+  "settings.appearance.palette.mist": "Brume",
+  "settings.appearance.palette.mist.description": "Gris neutres doux aux nuances froides.",
+  "settings.appearance.palette.slate": "Ardoise",
+  "settings.appearance.palette.slate.description": "Surfaces gris bleuté et accents minéraux discrets.",
+  "settings.appearance.palette.clay": "Argile",
+  "settings.appearance.palette.clay.description": "Gris terreux chauds et tonalités ocre atténuées.",
+  "settings.appearance.palette.linen": "Lin",
+  "settings.appearance.palette.linen.description": "Papier ivoire doux et texte gris-vert.",
+  "settings.appearance.palette.iris": "Iris",
+  "settings.appearance.palette.iris.description": "Surfaces gris lavande froides, sans blanc éclatant.",
+  "settings.appearance.palette.sage": "Sauge",
+  "settings.appearance.palette.sage.description": "Surfaces gris-vert douces aux nuances olive.",
+  "settings.appearance.palette.saved": "Personnalisation enregistrée",
   "instanceServiceStatus.sections.lsp": "Serveurs LSP",
   "instanceServiceStatus.sections.mcp": "Serveurs MCP",
   "instanceServiceStatus.sections.plugins": "Plugins",
@@ -146,7 +164,10 @@ export const settingsMessages = {
   "settings.appearance.colorScheme.subtitle": "Choisissez la palette des clients connectés à ce serveur CodeNomad.",
   "settings.appearance.colorScheme.option.system": "Système",
   "settings.appearance.colorScheme.option.light": "Clair",
-  "settings.appearance.colorScheme.option.codeNomadClassic": "CodeNomad Classique",
+  "settings.appearance.colorScheme.option.porcelain": "Porcelaine",
+  "settings.appearance.colorScheme.option.dawn": "Aube",
+  "settings.appearance.colorScheme.option.parchment": "Parchemin",
+  "settings.appearance.colorScheme.option.codeNomadClassic": "Classique",
   "settings.appearance.colorScheme.option.basalt": "Basalte",
   "settings.appearance.colorScheme.option.fjord": "Fjord",
   "settings.appearance.colorScheme.option.lichen": "Lichen",
@@ -155,6 +176,9 @@ export const settingsMessages = {
   "settings.appearance.colorScheme.option.custom": "Personnalisée",
   "settings.appearance.colorScheme.description.system": "Suit l'apparence du système d'exploitation.",
   "settings.appearance.colorScheme.description.light": "Une palette claire et neutre.",
+  "settings.appearance.colorScheme.description.porcelain": "Un chrome neutre et doux autour d’un espace de travail blanc.",
+  "settings.appearance.colorScheme.description.dawn": "Des surfaces de jour froides rehaussées de bleu clair.",
+  "settings.appearance.colorScheme.description.parchment": "Des surfaces papier chaudes avec un accent bleu sarcelle discret.",
   "settings.appearance.colorScheme.description.codeNomadClassic": "La palette sombre d'origine de CodeNomad.",
   "settings.appearance.colorScheme.description.basalt": "Un gris charbon neutre rehaussé de bleu froid.",
   "settings.appearance.colorScheme.description.fjord": "Un bleu-gris profond rehaussé de vert marin.",
@@ -166,10 +190,10 @@ export const settingsMessages = {
   "settings.appearance.colorScheme.custom.appearance.light": "Claire",
   "settings.appearance.colorScheme.custom.appearance.dark": "Sombre",
   "settings.appearance.colorScheme.custom.colors": "Couleurs",
-  "settings.appearance.colorScheme.custom.field.surfaceBase": "Surface de base",
-  "settings.appearance.colorScheme.custom.field.surfaceSecondary": "Surface secondaire",
-  "settings.appearance.colorScheme.custom.field.surfaceMuted": "Surface atténuée",
-  "settings.appearance.colorScheme.custom.field.borderBase": "Bordure",
+  "settings.appearance.colorScheme.custom.field.surfaceBase": "Base",
+  "settings.appearance.colorScheme.custom.field.surfaceSecondary": "Secondaire",
+  "settings.appearance.colorScheme.custom.field.surfaceMuted": "Atténuée",
+  "settings.appearance.colorScheme.custom.field.borderBase": "Bordures",
   "settings.appearance.colorScheme.custom.field.textPrimary": "Texte principal",
   "settings.appearance.colorScheme.custom.field.textMuted": "Texte atténué",
   "settings.appearance.colorScheme.custom.field.accentPrimary": "Accent",
@@ -183,8 +207,11 @@ export const settingsMessages = {
   "settings.appearance.colorScheme.custom.pickerAriaLabel": "Choisir {name}",
   "settings.appearance.colorScheme.custom.valueAriaLabel": "Valeur hexadécimale pour {name}",
   "settings.appearance.colorScheme.custom.warning.format": "Utilisez le format #RRGGBB en majuscules.",
-  "settings.appearance.colorScheme.custom.warning.contrast": "Augmentez le contraste avant d'enregistrer.",
   "settings.appearance.colorScheme.custom.reset": "Réinitialiser",
+  "settings.appearance.colorScheme.custom.new": "Nouveau",
+  "settings.appearance.colorScheme.custom.name": "Nom",
+  "settings.appearance.colorScheme.custom.delete": "Supprimer",
+  "settings.appearance.colorScheme.custom.deleteConfirm": "Supprimer « {name} » ?",
   "settings.appearance.colorScheme.custom.save": "Enregistrer",
   "settings.appearance.colorScheme.custom.saveError": "Impossible d'enregistrer la palette.",
   "settings.appearance.startup.title": "Démarrage",
@@ -524,6 +551,7 @@ export const settingsMessages = {
   "toastHistory.unread": "{count} non lu(s)",
   "toastHistory.viewSettings": "Paramètres",
   "toastHistory.close": "Fermer",
+  "toastHistory.openLinkError": "Impossible d’ouvrir le lien",
   "toastHistory.deleteItem": "Supprimer la notification",
 
   // Info Section
diff --git a/packages/ui/src/lib/i18n/messages/he/messaging.ts b/packages/ui/src/lib/i18n/messages/he/messaging.ts
index 0572b1ec5..591a798d2 100644
--- a/packages/ui/src/lib/i18n/messages/he/messaging.ts
+++ b/packages/ui/src/lib/i18n/messages/he/messaging.ts
@@ -1,4 +1,10 @@
 export const messagingMessages = {
+  "transcriptFilters.title": "תוכן ההודעות",
+  "transcriptFilters.description": "הצגה או הסתרה של תוכן ובחירה אם הוא מורחב בתחילה. ההגדרות חלות על כל השיחות.",
+  "transcriptFilters.show": "הצגת {name}",
+  "transcriptFilters.hide": "הסתרת {name}",
+  "transcriptFilters.expand": "הרחבת {name}",
+  "transcriptFilters.collapse": "כיווץ {name}",
   "messageListHeader.sidebar.openSessionListAriaLabel": "פתח רשימת סשנים",
   "messageListHeader.metrics.usedLabel": "בשימוש",
   "messageListHeader.metrics.availableLabel": "זמין",
diff --git a/packages/ui/src/lib/i18n/messages/he/settings.ts b/packages/ui/src/lib/i18n/messages/he/settings.ts
index af88f6c52..9331c8a1f 100644
--- a/packages/ui/src/lib/i18n/messages/he/settings.ts
+++ b/packages/ui/src/lib/i18n/messages/he/settings.ts
@@ -1,4 +1,22 @@
 export const settingsMessages = {
+  "settings.appearance.palette.mode": "מצב תצוגה",
+  "settings.appearance.palette.auto": "אוטומטי",
+  "settings.appearance.palette.independent": "שמרו ערכת צבעים לכל מצב תצוגה. המצב האוטומטי עוקב אחר המערכת ומציג את הערכה המתאימה.",
+  "settings.appearance.palette.soft": "גוונים רכים",
+  "settings.appearance.palette.legacy": "ערכות צבעים מקוריות",
+  "settings.appearance.palette.mist": "ערפל",
+  "settings.appearance.palette.mist.description": "גווני אפור ניטרליים ורכים עם נגיעות קרירות.",
+  "settings.appearance.palette.slate": "צפחה",
+  "settings.appearance.palette.slate.description": "משטחים אפורים־כחלחלים והדגשות מינרליות עדינות.",
+  "settings.appearance.palette.clay": "חימר",
+  "settings.appearance.palette.clay.description": "גווני אפור אדמתיים וחמים ואוכרה מעודנת.",
+  "settings.appearance.palette.linen": "פשתן",
+  "settings.appearance.palette.linen.description": "נייר שנהב רך עם טקסט אפור־ירוק.",
+  "settings.appearance.palette.iris": "איריס",
+  "settings.appearance.palette.iris.description": "משטחים אפורים בגוון לבנדר קריר, ללא לבן בוהק.",
+  "settings.appearance.palette.sage": "מרווה",
+  "settings.appearance.palette.sage.description": "משטחים אפורים־ירוקים רגועים עם גווני זית.",
+  "settings.appearance.palette.saved": "התאמה אישית שמורה",
   "instanceServiceStatus.sections.lsp": "שרתי LSP",
   "instanceServiceStatus.sections.mcp": "שרתי MCP",
   "instanceServiceStatus.sections.plugins": "תוספים",
@@ -146,7 +164,10 @@ export const settingsMessages = {
   "settings.appearance.colorScheme.subtitle": "בחר את לוח הצבעים ללקוחות המחוברים לשרת CodeNomad הזה.",
   "settings.appearance.colorScheme.option.system": "מערכת",
   "settings.appearance.colorScheme.option.light": "בהיר",
-  "settings.appearance.colorScheme.option.codeNomadClassic": "CodeNomad קלאסי",
+  "settings.appearance.colorScheme.option.porcelain": "פורצלן",
+  "settings.appearance.colorScheme.option.dawn": "שחר",
+  "settings.appearance.colorScheme.option.parchment": "קלף",
+  "settings.appearance.colorScheme.option.codeNomadClassic": "קלאסי",
   "settings.appearance.colorScheme.option.basalt": "בזלת",
   "settings.appearance.colorScheme.option.fjord": "פיורד",
   "settings.appearance.colorScheme.option.lichen": "חזזית",
@@ -155,6 +176,9 @@ export const settingsMessages = {
   "settings.appearance.colorScheme.option.custom": "מותאם אישית",
   "settings.appearance.colorScheme.description.system": "מתאים למראה של מערכת ההפעלה.",
   "settings.appearance.colorScheme.description.light": "לוח צבעים בהיר וניטרלי.",
+  "settings.appearance.colorScheme.description.porcelain": "מעטפת ניטרלית ורכה עם סביבת עבודה לבנה ונקייה.",
+  "settings.appearance.colorScheme.description.dawn": "משטחי אור יום קרירים עם הדגשה כחולה ברורה.",
+  "settings.appearance.colorScheme.description.parchment": "משטחי נייר חמימים עם הדגשת טורקיז מאופקת.",
   "settings.appearance.colorScheme.description.codeNomadClassic": "לוח הצבעים הכהה המקורי של CodeNomad.",
   "settings.appearance.colorScheme.description.basalt": "אפור פחם ניטרלי עם הדגשה כחולה קרירה.",
   "settings.appearance.colorScheme.description.fjord": "כחול-אפור עמוק עם הדגשה ירוקה-ימית.",
@@ -166,10 +190,10 @@ export const settingsMessages = {
   "settings.appearance.colorScheme.custom.appearance.light": "בהיר",
   "settings.appearance.colorScheme.custom.appearance.dark": "כהה",
   "settings.appearance.colorScheme.custom.colors": "צבעים",
-  "settings.appearance.colorScheme.custom.field.surfaceBase": "משטח בסיס",
-  "settings.appearance.colorScheme.custom.field.surfaceSecondary": "משטח משני",
-  "settings.appearance.colorScheme.custom.field.surfaceMuted": "משטח מעומעם",
-  "settings.appearance.colorScheme.custom.field.borderBase": "גבול",
+  "settings.appearance.colorScheme.custom.field.surfaceBase": "בסיס",
+  "settings.appearance.colorScheme.custom.field.surfaceSecondary": "משני",
+  "settings.appearance.colorScheme.custom.field.surfaceMuted": "מעומעם",
+  "settings.appearance.colorScheme.custom.field.borderBase": "גבולות",
   "settings.appearance.colorScheme.custom.field.textPrimary": "טקסט ראשי",
   "settings.appearance.colorScheme.custom.field.textMuted": "טקסט מעומעם",
   "settings.appearance.colorScheme.custom.field.accentPrimary": "הדגשה",
@@ -183,8 +207,11 @@ export const settingsMessages = {
   "settings.appearance.colorScheme.custom.pickerAriaLabel": "בחירת {name}",
   "settings.appearance.colorScheme.custom.valueAriaLabel": "ערך הקסדצימלי עבור {name}",
   "settings.appearance.colorScheme.custom.warning.format": "יש להשתמש באותיות גדולות בתבנית #RRGGBB.",
-  "settings.appearance.colorScheme.custom.warning.contrast": "יש להגדיל את ניגודיות הצבעים לפני השמירה.",
   "settings.appearance.colorScheme.custom.reset": "איפוס",
+  "settings.appearance.colorScheme.custom.new": "חדש",
+  "settings.appearance.colorScheme.custom.name": "שם",
+  "settings.appearance.colorScheme.custom.delete": "מחיקה",
+  "settings.appearance.colorScheme.custom.deleteConfirm": "למחוק את „{name}” ?",
   "settings.appearance.colorScheme.custom.save": "שמירה",
   "settings.appearance.colorScheme.custom.saveError": "לא ניתן לשמור את לוח הצבעים.",
   "settings.appearance.startup.title": "הפעלה",
@@ -524,6 +551,7 @@ export const settingsMessages = {
   "toastHistory.unread": "{count} לא נקראו",
   "toastHistory.viewSettings": "הגדרות",
   "toastHistory.close": "סגור",
+  "toastHistory.openLinkError": "לא ניתן לפתוח את הקישור",
   "toastHistory.deleteItem": "מחק התראה",
 
   // Info Section
diff --git a/packages/ui/src/lib/i18n/messages/ja/messaging.ts b/packages/ui/src/lib/i18n/messages/ja/messaging.ts
index feeb3efbe..d6428fb2c 100644
--- a/packages/ui/src/lib/i18n/messages/ja/messaging.ts
+++ b/packages/ui/src/lib/i18n/messages/ja/messaging.ts
@@ -1,4 +1,10 @@
 export const messagingMessages = {
+  "transcriptFilters.title": "メッセージの内容",
+  "transcriptFilters.description": "内容の表示・非表示と初期の展開状態を選択します。設定はすべての会話に適用されます。",
+  "transcriptFilters.show": "{name}を表示",
+  "transcriptFilters.hide": "{name}を非表示",
+  "transcriptFilters.expand": "{name}を展開",
+  "transcriptFilters.collapse": "{name}を折りたたむ",
   "messageListHeader.sidebar.openSessionListAriaLabel": "セッション一覧を開く",
   "messageListHeader.metrics.usedLabel": "使用",
   "messageListHeader.metrics.availableLabel": "残り",
diff --git a/packages/ui/src/lib/i18n/messages/ja/settings.ts b/packages/ui/src/lib/i18n/messages/ja/settings.ts
index 8df65dd73..fbc03897f 100644
--- a/packages/ui/src/lib/i18n/messages/ja/settings.ts
+++ b/packages/ui/src/lib/i18n/messages/ja/settings.ts
@@ -1,4 +1,22 @@
 export const settingsMessages = {
+  "settings.appearance.palette.mode": "外観モード",
+  "settings.appearance.palette.auto": "自動",
+  "settings.appearance.palette.independent": "外観ごとにパレットを保存します。自動モードではシステムに合わせて対応するパレットを表示します。",
+  "settings.appearance.palette.soft": "柔らかな色調",
+  "settings.appearance.palette.legacy": "従来のパレット",
+  "settings.appearance.palette.mist": "霧",
+  "settings.appearance.palette.mist.description": "冷たい色味を帯びた柔らかなニュートラルグレー。",
+  "settings.appearance.palette.slate": "粘板岩",
+  "settings.appearance.palette.slate.description": "青みがかったグレーの背景と控えめな鉱物色のアクセント。",
+  "settings.appearance.palette.clay": "粘土",
+  "settings.appearance.palette.clay.description": "暖かな土色のグレーと落ち着いた黄土色。",
+  "settings.appearance.palette.linen": "リネン",
+  "settings.appearance.palette.linen.description": "柔らかな象牙色の紙と灰緑色の文字。",
+  "settings.appearance.palette.iris": "アイリス",
+  "settings.appearance.palette.iris.description": "まぶしい白を使わない、涼しげなラベンダーグレーの背景。",
+  "settings.appearance.palette.sage": "セージ",
+  "settings.appearance.palette.sage.description": "オリーブ色を帯びた穏やかな灰緑色の背景。",
+  "settings.appearance.palette.saved": "保存済みのカスタマイズ",
   "instanceServiceStatus.sections.lsp": "LSP サーバー",
   "instanceServiceStatus.sections.mcp": "MCP サーバー",
   "instanceServiceStatus.sections.plugins": "プラグイン",
@@ -146,7 +164,10 @@ export const settingsMessages = {
   "settings.appearance.colorScheme.subtitle": "この CodeNomad サーバーに接続するクライアントの配色を選択します。",
   "settings.appearance.colorScheme.option.system": "システム",
   "settings.appearance.colorScheme.option.light": "ライト",
-  "settings.appearance.colorScheme.option.codeNomadClassic": "CodeNomad クラシック",
+  "settings.appearance.colorScheme.option.porcelain": "ポーセリン",
+  "settings.appearance.colorScheme.option.dawn": "夜明け",
+  "settings.appearance.colorScheme.option.parchment": "パーチメント",
+  "settings.appearance.colorScheme.option.codeNomadClassic": "クラシック",
   "settings.appearance.colorScheme.option.basalt": "バサルト",
   "settings.appearance.colorScheme.option.fjord": "フィヨルド",
   "settings.appearance.colorScheme.option.lichen": "ライケン",
@@ -155,6 +176,9 @@ export const settingsMessages = {
   "settings.appearance.colorScheme.option.custom": "カスタム",
   "settings.appearance.colorScheme.description.system": "OS の表示設定に合わせます。",
   "settings.appearance.colorScheme.description.light": "明るくニュートラルな配色です。",
+  "settings.appearance.colorScheme.description.porcelain": "柔らかなニュートラルカラーの枠と、くっきりした白い作業領域。",
+  "settings.appearance.colorScheme.description.dawn": "涼やかな昼光色の面に、明快な青のアクセント。",
+  "settings.appearance.colorScheme.description.parchment": "温かな紙色の面に、控えめな青緑のアクセント。",
   "settings.appearance.colorScheme.description.codeNomadClassic": "CodeNomad オリジナルのダーク配色です。",
   "settings.appearance.colorScheme.description.basalt": "チャコールに寒色の青を合わせた配色です。",
   "settings.appearance.colorScheme.description.fjord": "深いブルーグレーに青緑を合わせた配色です。",
@@ -166,9 +190,9 @@ export const settingsMessages = {
   "settings.appearance.colorScheme.custom.appearance.light": "ライト",
   "settings.appearance.colorScheme.custom.appearance.dark": "ダーク",
   "settings.appearance.colorScheme.custom.colors": "色",
-  "settings.appearance.colorScheme.custom.field.surfaceBase": "基本サーフェス",
-  "settings.appearance.colorScheme.custom.field.surfaceSecondary": "第2サーフェス",
-  "settings.appearance.colorScheme.custom.field.surfaceMuted": "控えめなサーフェス",
+  "settings.appearance.colorScheme.custom.field.surfaceBase": "ベース",
+  "settings.appearance.colorScheme.custom.field.surfaceSecondary": "セカンダリ",
+  "settings.appearance.colorScheme.custom.field.surfaceMuted": "控えめ",
   "settings.appearance.colorScheme.custom.field.borderBase": "境界線",
   "settings.appearance.colorScheme.custom.field.textPrimary": "メインテキスト",
   "settings.appearance.colorScheme.custom.field.textMuted": "控えめなテキスト",
@@ -183,8 +207,11 @@ export const settingsMessages = {
   "settings.appearance.colorScheme.custom.pickerAriaLabel": "{name}を選択",
   "settings.appearance.colorScheme.custom.valueAriaLabel": "{name}の16進値",
   "settings.appearance.colorScheme.custom.warning.format": "大文字の #RRGGBB 形式で入力してください。",
-  "settings.appearance.colorScheme.custom.warning.contrast": "保存する前に色のコントラストを上げてください。",
   "settings.appearance.colorScheme.custom.reset": "リセット",
+  "settings.appearance.colorScheme.custom.new": "新規",
+  "settings.appearance.colorScheme.custom.name": "名前",
+  "settings.appearance.colorScheme.custom.delete": "削除",
+  "settings.appearance.colorScheme.custom.deleteConfirm": "「{name}」を削除しますか？",
   "settings.appearance.colorScheme.custom.save": "保存",
   "settings.appearance.colorScheme.custom.saveError": "カラーパレットを保存できませんでした。",
   "settings.appearance.startup.title": "起動",
@@ -524,6 +551,7 @@ export const settingsMessages = {
   "toastHistory.unread": "{count}件の未読",
   "toastHistory.viewSettings": "設定",
   "toastHistory.close": "閉じる",
+  "toastHistory.openLinkError": "リンクを開けませんでした",
   "toastHistory.deleteItem": "通知を削除",
 
   // Info Section
diff --git a/packages/ui/src/lib/i18n/messages/ne/messaging.ts b/packages/ui/src/lib/i18n/messages/ne/messaging.ts
index 319145c75..c537ea462 100644
--- a/packages/ui/src/lib/i18n/messages/ne/messaging.ts
+++ b/packages/ui/src/lib/i18n/messages/ne/messaging.ts
@@ -1,4 +1,10 @@
 export const messagingMessages = {
+  "transcriptFilters.title": "सन्देशको सामग्री",
+  "transcriptFilters.description": "सामग्री देखाउने वा लुकाउने र सुरुमा विस्तार गर्ने वा नगर्ने रोज्नुहोस्। यी सेटिङहरू सबै कुराकानीमा लागू हुन्छन्।",
+  "transcriptFilters.show": "{name} देखाउनुहोस्",
+  "transcriptFilters.hide": "{name} लुकाउनुहोस्",
+  "transcriptFilters.expand": "{name} विस्तार गर्नुहोस्",
+  "transcriptFilters.collapse": "{name} खुम्च्याउनुहोस्",
   "messageListHeader.sidebar.openSessionListAriaLabel": "सत्र सूची खोल्नुहोस्",
   "messageListHeader.metrics.usedLabel": "प्रयोग गरिएको",
   "messageListHeader.metrics.availableLabel": "उपलब्ध",
diff --git a/packages/ui/src/lib/i18n/messages/ne/settings.ts b/packages/ui/src/lib/i18n/messages/ne/settings.ts
index d4adfe75c..85c5b4e76 100644
--- a/packages/ui/src/lib/i18n/messages/ne/settings.ts
+++ b/packages/ui/src/lib/i18n/messages/ne/settings.ts
@@ -1,4 +1,22 @@
 export const settingsMessages = {
+  "settings.appearance.palette.mode": "रूप मोड",
+  "settings.appearance.palette.auto": "स्वतः",
+  "settings.appearance.palette.independent": "हरेक देखावटका लागि रङ योजना सुरक्षित गर्नुहोस्। स्वतः मोडले प्रणालीअनुसार सम्बन्धित रङ योजना देखाउँछ।",
+  "settings.appearance.palette.soft": "नरम रङहरू",
+  "settings.appearance.palette.legacy": "मौलिक रङ योजनाहरू",
+  "settings.appearance.palette.mist": "कुहिरो",
+  "settings.appearance.palette.mist.description": "चिसो झल्को भएका नरम तटस्थ खैरा रङहरू।",
+  "settings.appearance.palette.slate": "स्लेट",
+  "settings.appearance.palette.slate.description": "नीलो-खैरा सतहहरू र संयमित खनिज रङका जोडहरू।",
+  "settings.appearance.palette.clay": "माटो",
+  "settings.appearance.palette.clay.description": "न्यानो माटोजस्ता खैरा र मधुर पहेँला रङहरू।",
+  "settings.appearance.palette.linen": "लिनेन",
+  "settings.appearance.palette.linen.description": "नरम हात्तीदाँते कागज र खैरो-हरियो पाठ।",
+  "settings.appearance.palette.iris": "आइरिस",
+  "settings.appearance.palette.iris.description": "चम्किलो सेतोबिनाका चिसा ल्याभेन्डर-खैरा सतहहरू।",
+  "settings.appearance.palette.sage": "सेज",
+  "settings.appearance.palette.sage.description": "जैतुनी झल्को भएका शान्त खैरो-हरिया सतहहरू।",
+  "settings.appearance.palette.saved": "सुरक्षित अनुकूलन",
   "instanceServiceStatus.sections.lsp": "LSP सर्भरहरू",
   "instanceServiceStatus.sections.mcp": "MCP सर्भरहरू",
   "instanceServiceStatus.sections.plugins": "प्लगइनहरू",
@@ -146,7 +164,10 @@ export const settingsMessages = {
   "settings.appearance.colorScheme.subtitle": "यो CodeNomad सर्भरमा जोडिएका क्लाइन्टहरूको रङ प्यालेट छान्नुहोस्।",
   "settings.appearance.colorScheme.option.system": "प्रणाली",
   "settings.appearance.colorScheme.option.light": "उज्यालो",
-  "settings.appearance.colorScheme.option.codeNomadClassic": "CodeNomad क्लासिक",
+  "settings.appearance.colorScheme.option.porcelain": "पोर्सिलेन",
+  "settings.appearance.colorScheme.option.dawn": "प्रभात",
+  "settings.appearance.colorScheme.option.parchment": "पार्चमेन्ट",
+  "settings.appearance.colorScheme.option.codeNomadClassic": "क्लासिक",
   "settings.appearance.colorScheme.option.basalt": "बेसाल्ट",
   "settings.appearance.colorScheme.option.fjord": "फ्योर्ड",
   "settings.appearance.colorScheme.option.lichen": "लाइकेन",
@@ -155,6 +176,9 @@ export const settingsMessages = {
   "settings.appearance.colorScheme.option.custom": "अनुकूलित",
   "settings.appearance.colorScheme.description.system": "अपरेटिङ सिस्टमको रूप पछ्याउँछ।",
   "settings.appearance.colorScheme.description.light": "उज्यालो र तटस्थ प्यालेट।",
+  "settings.appearance.colorScheme.description.porcelain": "सफा सेतो कार्यक्षेत्रसहितको नरम तटस्थ क्रोम।",
+  "settings.appearance.colorScheme.description.dawn": "स्पष्ट नीलो जोडसहितका चिसा दिवा सतहहरू।",
+  "settings.appearance.colorScheme.description.parchment": "संयमित टिल जोडसहितका न्यानो कागजी सतहहरू।",
   "settings.appearance.colorScheme.description.codeNomadClassic": "CodeNomad को मौलिक अँध्यारो प्यालेट।",
   "settings.appearance.colorScheme.description.basalt": "चिसो नीलो जोडसहितको तटस्थ कोइला रङ।",
   "settings.appearance.colorScheme.description.fjord": "समुद्री हरियो जोडसहितको गाढा नीलो-खैरो।",
@@ -166,9 +190,9 @@ export const settingsMessages = {
   "settings.appearance.colorScheme.custom.appearance.light": "उज्यालो",
   "settings.appearance.colorScheme.custom.appearance.dark": "अँध्यारो",
   "settings.appearance.colorScheme.custom.colors": "रङहरू",
-  "settings.appearance.colorScheme.custom.field.surfaceBase": "आधार सतह",
-  "settings.appearance.colorScheme.custom.field.surfaceSecondary": "दोस्रो सतह",
-  "settings.appearance.colorScheme.custom.field.surfaceMuted": "मधुरो सतह",
+  "settings.appearance.colorScheme.custom.field.surfaceBase": "आधार",
+  "settings.appearance.colorScheme.custom.field.surfaceSecondary": "द्वितीयक",
+  "settings.appearance.colorScheme.custom.field.surfaceMuted": "मधुरो",
   "settings.appearance.colorScheme.custom.field.borderBase": "किनारा",
   "settings.appearance.colorScheme.custom.field.textPrimary": "मुख्य पाठ",
   "settings.appearance.colorScheme.custom.field.textMuted": "मधुरो पाठ",
@@ -183,8 +207,11 @@ export const settingsMessages = {
   "settings.appearance.colorScheme.custom.pickerAriaLabel": "{name} छान्नुहोस्",
   "settings.appearance.colorScheme.custom.valueAriaLabel": "{name} को हेक्स मान",
   "settings.appearance.colorScheme.custom.warning.format": "ठूला अक्षरसहित #RRGGBB ढाँचा प्रयोग गर्नुहोस्।",
-  "settings.appearance.colorScheme.custom.warning.contrast": "सुरक्षित गर्नुअघि रङको कन्ट्रास्ट बढाउनुहोस्।",
   "settings.appearance.colorScheme.custom.reset": "रिसेट गर्नुहोस्",
+  "settings.appearance.colorScheme.custom.new": "नयाँ",
+  "settings.appearance.colorScheme.custom.name": "नाम",
+  "settings.appearance.colorScheme.custom.delete": "मेटाउनुहोस्",
+  "settings.appearance.colorScheme.custom.deleteConfirm": "\"{name}\" मेटाउने हो?",
   "settings.appearance.colorScheme.custom.save": "सुरक्षित गर्नुहोस्",
   "settings.appearance.colorScheme.custom.saveError": "रङ प्यालेट सुरक्षित गर्न सकिएन।",
   "settings.appearance.startup.title": "सुरुआत",
@@ -524,6 +551,7 @@ export const settingsMessages = {
   "toastHistory.unread": "{count} नपढिएको",
   "toastHistory.viewSettings": "सेटिङहरू",
   "toastHistory.close": "बन्द गर्नुहोस्",
+  "toastHistory.openLinkError": "लिङ्क खोल्न सकिएन",
   "toastHistory.deleteItem": "सूचना मेटाउनुहोस्",
 
   "settings.section.info.title": "बारेमा",
diff --git a/packages/ui/src/lib/i18n/messages/ru/messaging.ts b/packages/ui/src/lib/i18n/messages/ru/messaging.ts
index 3c8c48a5f..dc2778113 100644
--- a/packages/ui/src/lib/i18n/messages/ru/messaging.ts
+++ b/packages/ui/src/lib/i18n/messages/ru/messaging.ts
@@ -1,4 +1,10 @@
 export const messagingMessages = {
+  "transcriptFilters.title": "Содержимое сообщений",
+  "transcriptFilters.description": "Выберите видимость содержимого и начальное состояние развёртывания. Настройки применяются ко всем беседам.",
+  "transcriptFilters.show": "Показать {name}",
+  "transcriptFilters.hide": "Скрыть {name}",
+  "transcriptFilters.expand": "Развернуть {name}",
+  "transcriptFilters.collapse": "Свернуть {name}",
   "messageListHeader.sidebar.openSessionListAriaLabel": "Открыть список сессий",
   "messageListHeader.metrics.usedLabel": "Использовано",
   "messageListHeader.metrics.availableLabel": "Доступно",
diff --git a/packages/ui/src/lib/i18n/messages/ru/settings.ts b/packages/ui/src/lib/i18n/messages/ru/settings.ts
index 273b99182..70846ee75 100644
--- a/packages/ui/src/lib/i18n/messages/ru/settings.ts
+++ b/packages/ui/src/lib/i18n/messages/ru/settings.ts
@@ -1,4 +1,22 @@
 export const settingsMessages = {
+  "settings.appearance.palette.mode": "Режим оформления",
+  "settings.appearance.palette.auto": "Авто",
+  "settings.appearance.palette.independent": "Сохраните палитру для каждого режима оформления. Авто следует настройкам системы и показывает соответствующую палитру.",
+  "settings.appearance.palette.soft": "Мягкие тона",
+  "settings.appearance.palette.legacy": "Исходные палитры",
+  "settings.appearance.palette.mist": "Туман",
+  "settings.appearance.palette.mist.description": "Мягкие нейтральные серые тона с холодным оттенком.",
+  "settings.appearance.palette.slate": "Сланец",
+  "settings.appearance.palette.slate.description": "Серо-синие поверхности и сдержанные минеральные акценты.",
+  "settings.appearance.palette.clay": "Глина",
+  "settings.appearance.palette.clay.description": "Тёплые землистые серые тона и приглушённая охра.",
+  "settings.appearance.palette.linen": "Лён",
+  "settings.appearance.palette.linen.description": "Мягкая бумага цвета слоновой кости и серо-зелёный текст.",
+  "settings.appearance.palette.iris": "Ирис",
+  "settings.appearance.palette.iris.description": "Холодные лавандово-серые поверхности без яркого белого.",
+  "settings.appearance.palette.sage": "Шалфей",
+  "settings.appearance.palette.sage.description": "Спокойные серо-зелёные поверхности с оливковыми оттенками.",
+  "settings.appearance.palette.saved": "Сохранённая настройка",
   "instanceServiceStatus.sections.lsp": "LSP-серверы",
   "instanceServiceStatus.sections.mcp": "MCP-серверы",
   "instanceServiceStatus.sections.plugins": "Плагины",
@@ -146,7 +164,10 @@ export const settingsMessages = {
   "settings.appearance.colorScheme.subtitle": "Выберите палитру для клиентов этого сервера CodeNomad.",
   "settings.appearance.colorScheme.option.system": "Системная",
   "settings.appearance.colorScheme.option.light": "Светлая",
-  "settings.appearance.colorScheme.option.codeNomadClassic": "CodeNomad Классика",
+  "settings.appearance.colorScheme.option.porcelain": "Фарфор",
+  "settings.appearance.colorScheme.option.dawn": "Рассвет",
+  "settings.appearance.colorScheme.option.parchment": "Пергамент",
+  "settings.appearance.colorScheme.option.codeNomadClassic": "Классика",
   "settings.appearance.colorScheme.option.basalt": "Базальт",
   "settings.appearance.colorScheme.option.fjord": "Фьорд",
   "settings.appearance.colorScheme.option.lichen": "Лишайник",
@@ -155,6 +176,9 @@ export const settingsMessages = {
   "settings.appearance.colorScheme.option.custom": "Своя",
   "settings.appearance.colorScheme.description.system": "Следует оформлению операционной системы.",
   "settings.appearance.colorScheme.description.light": "Светлая нейтральная палитра.",
+  "settings.appearance.colorScheme.description.porcelain": "Мягкое нейтральное обрамление и чистая белая рабочая область.",
+  "settings.appearance.colorScheme.description.dawn": "Прохладные дневные поверхности с ясным синим акцентом.",
+  "settings.appearance.colorScheme.description.parchment": "Тёплые бумажные поверхности со сдержанным бирюзовым акцентом.",
   "settings.appearance.colorScheme.description.codeNomadClassic": "Оригинальная тёмная палитра CodeNomad.",
   "settings.appearance.colorScheme.description.basalt": "Нейтральный угольный цвет с холодным синим акцентом.",
   "settings.appearance.colorScheme.description.fjord": "Глубокий серо-синий цвет с морским зелёным акцентом.",
@@ -166,10 +190,10 @@ export const settingsMessages = {
   "settings.appearance.colorScheme.custom.appearance.light": "Светлая",
   "settings.appearance.colorScheme.custom.appearance.dark": "Тёмная",
   "settings.appearance.colorScheme.custom.colors": "Цвета",
-  "settings.appearance.colorScheme.custom.field.surfaceBase": "Основной фон",
-  "settings.appearance.colorScheme.custom.field.surfaceSecondary": "Вторичный фон",
-  "settings.appearance.colorScheme.custom.field.surfaceMuted": "Приглушённый фон",
-  "settings.appearance.colorScheme.custom.field.borderBase": "Граница",
+  "settings.appearance.colorScheme.custom.field.surfaceBase": "Базовый",
+  "settings.appearance.colorScheme.custom.field.surfaceSecondary": "Вторичный",
+  "settings.appearance.colorScheme.custom.field.surfaceMuted": "Приглушённый",
+  "settings.appearance.colorScheme.custom.field.borderBase": "Границы",
   "settings.appearance.colorScheme.custom.field.textPrimary": "Основной текст",
   "settings.appearance.colorScheme.custom.field.textMuted": "Приглушённый текст",
   "settings.appearance.colorScheme.custom.field.accentPrimary": "Акцент",
@@ -183,8 +207,11 @@ export const settingsMessages = {
   "settings.appearance.colorScheme.custom.pickerAriaLabel": "Выбрать цвет: {name}",
   "settings.appearance.colorScheme.custom.valueAriaLabel": "Шестнадцатеричное значение: {name}",
   "settings.appearance.colorScheme.custom.warning.format": "Используйте формат #RRGGBB с заглавными буквами.",
-  "settings.appearance.colorScheme.custom.warning.contrast": "Увеличьте контраст перед сохранением.",
   "settings.appearance.colorScheme.custom.reset": "Сбросить",
+  "settings.appearance.colorScheme.custom.new": "Новая",
+  "settings.appearance.colorScheme.custom.name": "Название",
+  "settings.appearance.colorScheme.custom.delete": "Удалить",
+  "settings.appearance.colorScheme.custom.deleteConfirm": "Удалить «{name}»?",
   "settings.appearance.colorScheme.custom.save": "Сохранить",
   "settings.appearance.colorScheme.custom.saveError": "Не удалось сохранить палитру.",
   "settings.appearance.startup.title": "Запуск",
@@ -524,6 +551,7 @@ export const settingsMessages = {
   "toastHistory.unread": "{count} непрочитанных",
   "toastHistory.viewSettings": "Настройки",
   "toastHistory.close": "Закрыть",
+  "toastHistory.openLinkError": "Не удалось открыть ссылку",
   "toastHistory.deleteItem": "Удалить уведомление",
 
   // Info Section
diff --git a/packages/ui/src/lib/i18n/messages/tr/messaging.ts b/packages/ui/src/lib/i18n/messages/tr/messaging.ts
index acd8a44f4..71a9d71b2 100644
--- a/packages/ui/src/lib/i18n/messages/tr/messaging.ts
+++ b/packages/ui/src/lib/i18n/messages/tr/messaging.ts
@@ -1,4 +1,10 @@
 export const messagingMessages = {
+  "transcriptFilters.title": "Mesaj içeriği",
+  "transcriptFilters.description": "İçeriği gösterin veya gizleyin ve başlangıçta genişletilip genişletilmeyeceğini seçin. Bu ayarlar tüm konuşmalara uygulanır.",
+  "transcriptFilters.show": "{name} göster",
+  "transcriptFilters.hide": "{name} gizle",
+  "transcriptFilters.expand": "{name} genişlet",
+  "transcriptFilters.collapse": "{name} daralt",
   "messageListHeader.sidebar.openSessionListAriaLabel": "Session listesini aç",
   "messageListHeader.metrics.usedLabel": "Kullanılan",
   "messageListHeader.metrics.availableLabel": "Kalan",
diff --git a/packages/ui/src/lib/i18n/messages/tr/settings.ts b/packages/ui/src/lib/i18n/messages/tr/settings.ts
index aa52127a6..280826be6 100644
--- a/packages/ui/src/lib/i18n/messages/tr/settings.ts
+++ b/packages/ui/src/lib/i18n/messages/tr/settings.ts
@@ -1,4 +1,22 @@
 export const settingsMessages = {
+  "settings.appearance.palette.mode": "Görünüm modu",
+  "settings.appearance.palette.auto": "Otomatik",
+  "settings.appearance.palette.independent": "Her görünüm için bir palet kaydedin. Otomatik mod sistemi izler ve ilgili paleti gösterir.",
+  "settings.appearance.palette.soft": "Yumuşak tonlar",
+  "settings.appearance.palette.legacy": "Özgün paletler",
+  "settings.appearance.palette.mist": "Sis",
+  "settings.appearance.palette.mist.description": "Soğuk alt tonlu yumuşak nötr griler.",
+  "settings.appearance.palette.slate": "Arduvaz",
+  "settings.appearance.palette.slate.description": "Mavi-gri yüzeyler ve ölçülü mineral vurgular.",
+  "settings.appearance.palette.clay": "Kil",
+  "settings.appearance.palette.clay.description": "Sıcak toprak grileri ve yumuşak aşı boyası tonları.",
+  "settings.appearance.palette.linen": "Keten",
+  "settings.appearance.palette.linen.description": "Gri-yeşil metinli yumuşak fildişi kâğıt.",
+  "settings.appearance.palette.iris": "İris",
+  "settings.appearance.palette.iris.description": "Parlak beyaz içermeyen serin lavanta-gri yüzeyler.",
+  "settings.appearance.palette.sage": "Adaçayı",
+  "settings.appearance.palette.sage.description": "Zeytin alt tonlu sakin gri-yeşil yüzeyler.",
+  "settings.appearance.palette.saved": "Kayıtlı özelleştirme",
   "instanceServiceStatus.sections.lsp": "LSP Sunucuları",
   "instanceServiceStatus.sections.mcp": "MCP Sunucuları",
   "instanceServiceStatus.sections.plugins": "Eklentiler",
@@ -138,7 +156,10 @@ export const settingsMessages = {
   "settings.appearance.colorScheme.subtitle": "Bu CodeNomad sunucusuna bağlı istemcilerin paletini seçin.",
   "settings.appearance.colorScheme.option.system": "Sistem",
   "settings.appearance.colorScheme.option.light": "Açık",
-  "settings.appearance.colorScheme.option.codeNomadClassic": "CodeNomad Klasik",
+  "settings.appearance.colorScheme.option.porcelain": "Porselen",
+  "settings.appearance.colorScheme.option.dawn": "Şafak",
+  "settings.appearance.colorScheme.option.parchment": "Parşömen",
+  "settings.appearance.colorScheme.option.codeNomadClassic": "Klasik",
   "settings.appearance.colorScheme.option.basalt": "Bazalt",
   "settings.appearance.colorScheme.option.fjord": "Fiyort",
   "settings.appearance.colorScheme.option.lichen": "Liken",
@@ -147,6 +168,9 @@ export const settingsMessages = {
   "settings.appearance.colorScheme.option.custom": "Özel",
   "settings.appearance.colorScheme.description.system": "İşletim sisteminin görünümünü izler.",
   "settings.appearance.colorScheme.description.light": "Açık ve nötr bir palet.",
+  "settings.appearance.colorScheme.description.porcelain": "Temiz beyaz çalışma alanını çevreleyen yumuşak nötr yüzeyler.",
+  "settings.appearance.colorScheme.description.dawn": "Belirgin mavi vurgulu serin gün ışığı yüzeyleri.",
+  "settings.appearance.colorScheme.description.parchment": "Ölçülü turkuaz vurgulu sıcak kâğıt yüzeyler.",
   "settings.appearance.colorScheme.description.codeNomadClassic": "CodeNomad'in özgün koyu paleti.",
   "settings.appearance.colorScheme.description.basalt": "Soğuk mavi vurgulu nötr kömür grisi.",
   "settings.appearance.colorScheme.description.fjord": "Deniz yeşili vurgulu derin mavi-gri.",
@@ -158,10 +182,10 @@ export const settingsMessages = {
   "settings.appearance.colorScheme.custom.appearance.light": "Açık",
   "settings.appearance.colorScheme.custom.appearance.dark": "Koyu",
   "settings.appearance.colorScheme.custom.colors": "Renkler",
-  "settings.appearance.colorScheme.custom.field.surfaceBase": "Temel yüzey",
-  "settings.appearance.colorScheme.custom.field.surfaceSecondary": "İkincil yüzey",
-  "settings.appearance.colorScheme.custom.field.surfaceMuted": "Soluk yüzey",
-  "settings.appearance.colorScheme.custom.field.borderBase": "Kenarlık",
+  "settings.appearance.colorScheme.custom.field.surfaceBase": "Temel",
+  "settings.appearance.colorScheme.custom.field.surfaceSecondary": "İkincil",
+  "settings.appearance.colorScheme.custom.field.surfaceMuted": "Soluk",
+  "settings.appearance.colorScheme.custom.field.borderBase": "Kenarlıklar",
   "settings.appearance.colorScheme.custom.field.textPrimary": "Ana metin",
   "settings.appearance.colorScheme.custom.field.textMuted": "Soluk metin",
   "settings.appearance.colorScheme.custom.field.accentPrimary": "Vurgu",
@@ -175,8 +199,11 @@ export const settingsMessages = {
   "settings.appearance.colorScheme.custom.pickerAriaLabel": "{name} seç",
   "settings.appearance.colorScheme.custom.valueAriaLabel": "{name} için onaltılık değer",
   "settings.appearance.colorScheme.custom.warning.format": "Büyük harflerle #RRGGBB biçimini kullanın.",
-  "settings.appearance.colorScheme.custom.warning.contrast": "Kaydetmeden önce renk kontrastını artırın.",
   "settings.appearance.colorScheme.custom.reset": "Sıfırla",
+  "settings.appearance.colorScheme.custom.new": "Yeni",
+  "settings.appearance.colorScheme.custom.name": "Ad",
+  "settings.appearance.colorScheme.custom.delete": "Sil",
+  "settings.appearance.colorScheme.custom.deleteConfirm": "\"{name}\" silinsin mi?",
   "settings.appearance.colorScheme.custom.save": "Kaydet",
   "settings.appearance.colorScheme.custom.saveError": "Renk paleti kaydedilemedi.",
   "settings.appearance.startup.title": "Başlangıç",
@@ -502,6 +529,7 @@ export const settingsMessages = {
   "toastHistory.unread": "{count} okunmamış",
   "toastHistory.viewSettings": "Ayarlar",
   "toastHistory.close": "Kapat",
+  "toastHistory.openLinkError": "Bağlantı açılamadı",
   "toastHistory.deleteItem": "Bildirimi sil",
   "settings.section.info.title": "Hakkında",
   "settings.section.info.subtitle": "Sürümü ve çalışma zamanını görüntüleyin, tanılama bilgisi toplayın.",
diff --git a/packages/ui/src/lib/i18n/messages/zh-Hans/messaging.ts b/packages/ui/src/lib/i18n/messages/zh-Hans/messaging.ts
index 0f1f52542..470b72afe 100644
--- a/packages/ui/src/lib/i18n/messages/zh-Hans/messaging.ts
+++ b/packages/ui/src/lib/i18n/messages/zh-Hans/messaging.ts
@@ -1,4 +1,10 @@
 export const messagingMessages = {
+  "transcriptFilters.title": "消息内容",
+  "transcriptFilters.description": "显示或隐藏内容，并选择初始展开状态。这些设置适用于所有对话。",
+  "transcriptFilters.show": "显示{name}",
+  "transcriptFilters.hide": "隐藏{name}",
+  "transcriptFilters.expand": "展开{name}",
+  "transcriptFilters.collapse": "折叠{name}",
   "messageListHeader.sidebar.openSessionListAriaLabel": "打开会话列表",
   "messageListHeader.metrics.usedLabel": "已用",
   "messageListHeader.metrics.availableLabel": "可用",
diff --git a/packages/ui/src/lib/i18n/messages/zh-Hans/settings.ts b/packages/ui/src/lib/i18n/messages/zh-Hans/settings.ts
index 55bf35b28..fae954289 100644
--- a/packages/ui/src/lib/i18n/messages/zh-Hans/settings.ts
+++ b/packages/ui/src/lib/i18n/messages/zh-Hans/settings.ts
@@ -1,4 +1,22 @@
 export const settingsMessages = {
+  "settings.appearance.palette.mode": "外观模式",
+  "settings.appearance.palette.auto": "自动",
+  "settings.appearance.palette.independent": "为每种外观保存配色。自动模式跟随系统并显示相应的配色。",
+  "settings.appearance.palette.soft": "柔和色调",
+  "settings.appearance.palette.legacy": "原有配色",
+  "settings.appearance.palette.mist": "薄雾",
+  "settings.appearance.palette.mist.description": "带冷色调的柔和中性灰。",
+  "settings.appearance.palette.slate": "板岩",
+  "settings.appearance.palette.slate.description": "蓝灰色背景与克制的矿物色点缀。",
+  "settings.appearance.palette.clay": "陶土",
+  "settings.appearance.palette.clay.description": "温暖的大地灰与柔和的赭色调。",
+  "settings.appearance.palette.linen": "亚麻",
+  "settings.appearance.palette.linen.description": "柔和的象牙色纸面与灰绿色文字。",
+  "settings.appearance.palette.iris": "鸢尾",
+  "settings.appearance.palette.iris.description": "不使用亮白色的清冷薰衣草灰背景。",
+  "settings.appearance.palette.sage": "鼠尾草",
+  "settings.appearance.palette.sage.description": "带橄榄色调的宁静灰绿色背景。",
+  "settings.appearance.palette.saved": "已保存的自定义配色",
   "instanceServiceStatus.sections.lsp": "LSP 服务器",
   "instanceServiceStatus.sections.mcp": "MCP 服务器",
   "instanceServiceStatus.sections.plugins": "插件",
@@ -146,7 +164,10 @@ export const settingsMessages = {
   "settings.appearance.colorScheme.subtitle": "选择连接到此 CodeNomad 服务器的客户端所用配色。",
   "settings.appearance.colorScheme.option.system": "系统",
   "settings.appearance.colorScheme.option.light": "浅色",
-  "settings.appearance.colorScheme.option.codeNomadClassic": "CodeNomad 经典",
+  "settings.appearance.colorScheme.option.porcelain": "瓷白",
+  "settings.appearance.colorScheme.option.dawn": "晨曦",
+  "settings.appearance.colorScheme.option.parchment": "羊皮纸",
+  "settings.appearance.colorScheme.option.codeNomadClassic": "经典",
   "settings.appearance.colorScheme.option.basalt": "玄武岩",
   "settings.appearance.colorScheme.option.fjord": "峡湾",
   "settings.appearance.colorScheme.option.lichen": "地衣",
@@ -155,6 +176,9 @@ export const settingsMessages = {
   "settings.appearance.colorScheme.option.custom": "自定义",
   "settings.appearance.colorScheme.description.system": "跟随操作系统外观。",
   "settings.appearance.colorScheme.description.light": "明亮、中性的配色。",
+  "settings.appearance.colorScheme.description.porcelain": "柔和的中性色框架搭配清爽的白色工作区。",
+  "settings.appearance.colorScheme.description.dawn": "冷调日光表面搭配清晰的蓝色强调色。",
+  "settings.appearance.colorScheme.description.parchment": "暖纸色表面搭配克制的青绿色强调色。",
   "settings.appearance.colorScheme.description.codeNomadClassic": "CodeNomad 原版深色配色。",
   "settings.appearance.colorScheme.description.basalt": "中性炭灰搭配冷蓝色强调色。",
   "settings.appearance.colorScheme.description.fjord": "深蓝灰搭配海绿色强调色。",
@@ -166,9 +190,9 @@ export const settingsMessages = {
   "settings.appearance.colorScheme.custom.appearance.light": "浅色",
   "settings.appearance.colorScheme.custom.appearance.dark": "深色",
   "settings.appearance.colorScheme.custom.colors": "颜色",
-  "settings.appearance.colorScheme.custom.field.surfaceBase": "基础表面",
-  "settings.appearance.colorScheme.custom.field.surfaceSecondary": "次级表面",
-  "settings.appearance.colorScheme.custom.field.surfaceMuted": "弱化表面",
+  "settings.appearance.colorScheme.custom.field.surfaceBase": "基础",
+  "settings.appearance.colorScheme.custom.field.surfaceSecondary": "次要",
+  "settings.appearance.colorScheme.custom.field.surfaceMuted": "柔和",
   "settings.appearance.colorScheme.custom.field.borderBase": "边框",
   "settings.appearance.colorScheme.custom.field.textPrimary": "主要文本",
   "settings.appearance.colorScheme.custom.field.textMuted": "弱化文本",
@@ -183,8 +207,11 @@ export const settingsMessages = {
   "settings.appearance.colorScheme.custom.pickerAriaLabel": "选择{name}",
   "settings.appearance.colorScheme.custom.valueAriaLabel": "{name}的十六进制值",
   "settings.appearance.colorScheme.custom.warning.format": "请使用大写的 #RRGGBB 格式。",
-  "settings.appearance.colorScheme.custom.warning.contrast": "请先提高颜色对比度再保存。",
   "settings.appearance.colorScheme.custom.reset": "重置",
+  "settings.appearance.colorScheme.custom.new": "新建",
+  "settings.appearance.colorScheme.custom.name": "名称",
+  "settings.appearance.colorScheme.custom.delete": "删除",
+  "settings.appearance.colorScheme.custom.deleteConfirm": "删除“{name}”？",
   "settings.appearance.colorScheme.custom.save": "保存",
   "settings.appearance.colorScheme.custom.saveError": "无法保存调色板。",
   "settings.appearance.startup.title": "启动",
@@ -524,6 +551,7 @@ export const settingsMessages = {
   "toastHistory.unread": "{count} 条未读",
   "toastHistory.viewSettings": "设置",
   "toastHistory.close": "关闭",
+  "toastHistory.openLinkError": "无法打开链接",
   "toastHistory.deleteItem": "删除通知",
 
   // Info Section
diff --git a/packages/ui/src/lib/native/preferences-window.ts b/packages/ui/src/lib/native/preferences-window.ts
index c29cb7480..f0e1dd84c 100644
--- a/packages/ui/src/lib/native/preferences-window.ts
+++ b/packages/ui/src/lib/native/preferences-window.ts
@@ -44,15 +44,15 @@ export function readPreferencesRequestFromUrl(url: string): NativePreferencesReq
   }
 }
 
-export async function openNativePreferences(request: NativePreferencesRequest): Promise<void> {
+export async function openNativePreferences(request: NativePreferencesRequest, toggle = false): Promise<void> {
   if (runtimeEnv.host === "electron") {
     const open = window.electronAPI?.openPreferences
     if (!open) throw new Error("Native Preferences is unavailable")
-    await open(request.section, { instanceId: request.instanceId, location: request.location })
+    await open(request.section, { instanceId: request.instanceId, location: request.location }, toggle)
     return
   }
   if (runtimeEnv.host === "tauri") {
-    await invoke("open_preferences_window", { request })
+    await invoke("open_preferences_window", { request, toggle })
     return
   }
   throw new Error("Native Preferences is unavailable")
diff --git a/packages/ui/src/lib/notifications.tsx b/packages/ui/src/lib/notifications.tsx
index 45ab07a9b..f906d8b70 100644
--- a/packages/ui/src/lib/notifications.tsx
+++ b/packages/ui/src/lib/notifications.tsx
@@ -1,5 +1,6 @@
 import toast from "solid-toast"
 import { createSignal } from "solid-js"
+import { tGlobal } from "./i18n"
 import { isTauriHost } from "./runtime-env"
 
 export type ToastVariant = "info" | "success" | "warning" | "error"
@@ -293,7 +294,7 @@ async function openExternalUrl(url: string): Promise<void> {
     window.open(url, "_blank", "noopener,noreferrer")
   } catch (error) {
     console.warn("[notifications] unable to open external url", error)
-    toast.error("Unable to open link")
+    toast.error(tGlobal("toastHistory.openLinkError"))
   }
 }
 
@@ -373,13 +374,13 @@ export function showToastNotification(payload: ToastPayload): ToastHandle {
   const id = toast.custom(
     () => (
       <div
-        class={`pointer-events-auto relative w-[320px] max-w-[360px] rounded-lg border px-4 py-3 shadow-xl ${accent.container}`}
+        class={`pointer-events-auto relative w-[320px] max-w-[360px] border px-4 py-3 shadow-xl ${accent.container}`}
       >
         <button
           type="button"
-          class="absolute right-2 top-2 inline-flex h-7 w-7 items-center justify-center rounded-md text-slate-200/80 hover:text-slate-50 hover:bg-white/10"
-          aria-label="Close notification"
-          title="Close"
+          class="absolute right-2 top-2 inline-flex h-7 w-7 items-center justify-center text-slate-200/80 hover:text-slate-50 hover:bg-white/10"
+          aria-label={tGlobal("toastHistory.close")}
+          title={tGlobal("toastHistory.close")}
           onClick={() => toast.dismiss(id)}
         >
           x
diff --git a/packages/ui/src/lib/palette-quality.test.ts b/packages/ui/src/lib/palette-quality.test.ts
new file mode 100644
index 000000000..e03147d21
--- /dev/null
+++ b/packages/ui/src/lib/palette-quality.test.ts
@@ -0,0 +1,163 @@
+import assert from "node:assert/strict"
+import { describe, it } from "node:test"
+import { BUILT_IN_COLOR_SCHEMES, COLOR_SCHEME_IDS, DEFAULT_CUSTOM_COLORS, applyColorScheme, contrastRatio, normalizeColorScheme, type ColorSchemeColors } from "./theme-scheme.ts"
+import { SOFT_COLOR_SCHEMES } from "./soft-color-schemes.ts"
+import { isDefaultCustomColors, normalizeColorSchemePresets } from "./color-scheme-presets.ts"
+
+function render(id: (typeof COLOR_SCHEME_IDS)[number], systemDark = false) {
+  const properties = new Map<string, string>()
+  applyColorScheme(normalizeColorScheme(id), {
+    systemDark,
+    target: {
+      style: { setProperty: (k, v) => { properties.set(k, v) }, removeProperty: (k) => properties.delete(k) },
+      dataset: {}, setAttribute() {}, removeAttribute() {},
+    },
+  })
+  return properties
+}
+
+// OKLab Euclidean distance (scaled to 100). This catches near-identical
+// surfaces even when all hex strings happen to differ. Not a WCAG criterion.
+function lab(hex: string) {
+  const [r, g, b] = [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16) / 255)
+    .map((v) => v <= .04045 ? v / 12.92 : ((v + .055) / 1.055) ** 2.4)
+  const l = Math.cbrt(.4122214708 * r + .5363325363 * g + .0514459929 * b)
+  const m = Math.cbrt(.2119034982 * r + .6806995451 * g + .1073969566 * b)
+  const s = Math.cbrt(.0883024619 * r + .2817188376 * g + .6299787005 * b)
+  return [.2104542553 * l + .793617785 * m - .0040720468 * s,
+    1.9779984951 * l - 2.428592205 * m + .4505937099 * s,
+    .0259040371 * l + .7827717662 * m - .808675766 * s]
+}
+const distance = (a: string, b: string) => Math.hypot(...lab(a).map((v, i) => v - lab(b)[i])) * 100
+const readyMade = BUILT_IN_COLOR_SCHEMES.filter((s) => s.colors && s.id !== "custom")
+
+// Only these exact foreground/background pairs are exempt from the historical
+// 3:1 emphasis check. A new color or surface must meet the original check.
+const savedEmphasisPairs = new Set([
+  "porcelain:compactionAccent:#A07AFF:#CFD1D4",
+  "porcelain:compactionAccent:#A07AFF:#E1E3E5",
+  "dawn:accentPrimary:#7F69E2:#BCD2E5",
+  "parchment:accentPrimary:#A9BA45:#D5C09E",
+  "parchment:accentPrimary:#A9BA45:#E2CEB0",
+  "linen:accentPrimary:#9D8325:#E6E0CE",
+  "linen:statusSuccess:#699245:#E6E0CE",
+  "iris:accentPrimary:#6B7CFF:#E0D4E5",
+  "iris:accentPrimary:#6B7CFF:#EDDFEF",
+  "sage-light:accentPrimary:#6C7FCB:#CBD8C1",
+  "sage-light:accentPrimary:#6C7FCB:#DCE6D2",
+])
+
+describe("palette quality", () => {
+  it("restores Classic's dev surface assignments including inset tool output", () => {
+    const p = render("classic")
+    assert.equal(p.get("--surface-base"), "#1A1A1A")
+    assert.equal(p.get("--surface-secondary"), "#2A2A2A")
+    assert.equal(p.get("--message-assistant-bg"), "#212529")
+    assert.equal(p.get("--message-tool-bg"), "#212529")
+    assert.equal(p.get("--surface-code"), "#1A1A1A")
+  })
+  it("has unique stable IDs, six soft light and four soft dark choices", () => {
+    assert.equal(new Set(COLOR_SCHEME_IDS).size, COLOR_SCHEME_IDS.length)
+    assert.equal(new Set(BUILT_IN_COLOR_SCHEMES.map((s) => s.id)).size, COLOR_SCHEME_IDS.length)
+    assert.equal(SOFT_COLOR_SCHEMES.filter((s) => s.appearance === "light").length, 6)
+    assert.equal(SOFT_COLOR_SCHEMES.filter((s) => s.appearance === "dark").length, 4)
+  })
+
+  for (const scheme of readyMade) {
+    it(`${scheme.id}: readable text and identity on actual message/tool surfaces`, () => {
+      const c = scheme.colors!
+      const p = render(scheme.id)
+      for (const bg of [c.surfaceBase, c.surfaceSecondary, c.surfaceMuted, p.get("--message-user-bg")!, p.get("--message-assistant-bg")!]) {
+        for (const key of ["textPrimary", "textMuted"] as const) {
+          // Saved calibration retains softer secondary text in these two families.
+          // Primary text still meets 4.5 everywhere. See SAVED_PALETTE_CALIBRATION_2026-09-11.md.
+          const minimum = key === "textMuted" && scheme.id === "slate" && c[key] === "#9DB5D2" && bg === "#404E65" ? 3.99
+            : key === "textMuted" && scheme.id === "clay" && c[key] === "#C6B9A5" && bg === "#55524E" ? 4.02 : 4.5
+          assert.ok(contrastRatio(c[key], bg) >= minimum, `${key} on ${bg}: ${contrastRatio(c[key], bg)}`)
+        }
+        for (const key of ["userAccent", "agentAccent", "compactionAccent"] as const) {
+          const minimum = scheme.id === "porcelain" && key === "compactionAccent" && c[key] === "#A07AFF"
+            && ["#CFD1D4", "#E1E3E5", "#BDC1C6", "#D6DCE0"].includes(bg) ? 1.72 : 3
+          assert.ok(contrastRatio(c[key], bg) >= minimum, `${key} on ${bg}`)
+        }
+      }
+      for (const key of ["accentPrimary", "statusSuccess", "statusWarning", "statusError", "userAccent", "agentAccent", "compactionAccent", "yoloAccent"] as const) {
+        for (const bg of [c.surfaceBase, c.surfaceSecondary]) {
+          if (savedEmphasisPairs.has(`${scheme.id}:${key}:${c[key]}:${bg}`)) continue
+          assert.ok(contrastRatio(c[key], bg) >= 3, `${scheme.id}: ${key} on ${bg}: ${contrastRatio(c[key], bg)}`)
+        }
+      }
+      assert.notEqual(p.get("--message-assistant-bg"), p.get("--surface-base"))
+      assert.notEqual(p.get("--message-user-bg"), p.get("--message-assistant-bg"))
+      assert.equal(p.get("--message-tool-bg"), p.get("--message-assistant-bg"))
+      assert.notEqual(p.get("--surface-code"), p.get("--message-tool-bg"))
+      assert.notEqual(p.get("--surface-secondary"), p.get("--message-tool-bg"))
+    })
+    it(`${scheme.id}: keeps distinct participant roles or explicit V1 Classic identity`, () => {
+      const c = scheme.colors!
+      // Classic is the explicitly requested historical exception, not a new
+      // soft family. Its blue user/accent proximity is part of V1's identity.
+      if (scheme.id === "classic") {
+        assert.equal(c.userAccent, "#2196F3")
+        assert.equal(c.agentAccent, "#D97706")
+        return
+      }
+      const otherRoles: (keyof ColorSchemeColors)[] = ["accentPrimary", "statusSuccess", "statusWarning", "statusError", "compactionAccent", "yoloAccent"]
+      assert.ok(distance(c.userAccent, c.agentAccent) >= 12)
+      for (const role of ["userAccent", "agentAccent"] as const) {
+        for (const other of otherRoles) assert.ok(distance(c[role], c[other]) >= 7, `${role}/${other}: ${distance(c[role], c[other])}`)
+      }
+      const p = render(scheme.id)
+      assert.notEqual(p.get("--selection-highlight-bg"), p.get("--session-status-compacting-bg"))
+    })
+  }
+
+  it("does not offer duplicate or near-duplicate ready-made surface families", () => {
+    const keys = ["surfaceBase", "surfaceSecondary", "surfaceMuted"] as const
+    const close: string[] = []
+    for (let i = 0; i < readyMade.length; i++) {
+      const a = readyMade[i]
+      for (const b of readyMade.slice(i + 1).filter((s) => s.appearance === a.appearance)) {
+        const d = keys.reduce((sum, key) => sum + distance(a.colors![key], b.colors![key]), 0) / keys.length
+        // Legacy palettes retain their dev surfaces and can be differentiated
+        // by their established accent. New soft families must stand apart on
+        // large-area surfaces alone, not just on a differently colored button.
+        const bothSoft = SOFT_COLOR_SCHEMES.some((s) => s.id === a.id) && SOFT_COLOR_SCHEMES.some((s) => s.id === b.id)
+        const accentDistance = distance(a.colors!.accentPrimary, b.colors!.accentPrimary)
+        // The saved Clay surfaces are closer to Sage but retain their own accent.
+        const minimum = a.id === "clay" && b.id === "sage" ? 2.2 : 2.5
+        if (d < minimum && (bothSoft || accentDistance < 7)) close.push(`${a.id}/${b.id}: ${d.toFixed(2)}`)
+      }
+    }
+    assert.deepEqual(close, [])
+  })
+
+  it("uses mid-tone soft surfaces without sacrificing readable text", () => {
+    for (const s of SOFT_COLOR_SCHEMES) {
+      const c = s.colors!
+      const lightness = lab(c.surfaceBase)[0]
+      assert.ok(s.appearance === "dark" ? lightness > .28 && lightness < .45 : lightness > .75 && lightness < .94, s.id)
+      assert.ok(distance(c.surfaceBase, c.surfaceSecondary) >= 3, s.id)
+      assert.ok(distance(c.textPrimary, c.textMuted) >= 4, `${s.id}: primary/muted text should not be near-identical`)
+      assert.ok(contrastRatio(c.textPrimary, c.surfaceSecondary) < 12, s.id)
+    }
+  })
+
+  it("keeps System automatic and preserves historical single-appearance edits", () => {
+    assert.notEqual(render("system", true).get("--surface-base"), render("system", false).get("--surface-base"))
+    const colors = SOFT_COLOR_SCHEMES.find((s) => s.id === "linen")!.colors!
+    const legacy = normalizeColorScheme({ id: "system", appearance: "system", colors })
+    assert.equal(legacy.id, "custom")
+    assert.equal(legacy.appearance, "light")
+    assert.deepEqual(legacy.colors, colors)
+  })
+
+  it("hides only the empty Custom slot, not named or edited palettes", () => {
+    assert.equal(isDefaultCustomColors(DEFAULT_CUSTOM_COLORS), true)
+    const colors = { ...DEFAULT_CUSTOM_COLORS, surfaceBase: "#191919" }
+    assert.equal(isDefaultCustomColors(colors), false)
+    const saved = { mine: { name: "My palette", appearance: "dark", colors: DEFAULT_CUSTOM_COLORS } }
+    assert.deepEqual(normalizeColorSchemePresets(saved), saved)
+    assert.deepEqual(normalizeColorScheme({ id: "custom", colors }).colors, colors)
+  })
+})
diff --git a/packages/ui/src/lib/soft-color-schemes.ts b/packages/ui/src/lib/soft-color-schemes.ts
new file mode 100644
index 000000000..84395ef32
--- /dev/null
+++ b/packages/ui/src/lib/soft-color-schemes.ts
@@ -0,0 +1,107 @@
+import type { ColorSchemeColors, ColorSchemeDefinition } from "./theme-scheme"
+
+// Adapted surface families, not complete copies of the editor themes.
+// Reference mapping and licenses: dev-docs/PALETTE_SOURCES.md.
+export const SOFT_COLOR_SCHEME_IDS = [
+  "porcelain", "dawn", "parchment", "linen", "iris", "sage-light",
+  "mist", "slate", "clay", "sage",
+] as const
+
+// Identity colors stay stable across families, independently of selection/status.
+export const DARK_IDENTITY_COLORS = {
+  userAccent: "#79BCE0",
+  agentAccent: "#D89DBD",
+  compactionAccent: "#AC9DDD",
+} as const
+export const LIGHT_IDENTITY_COLORS = {
+  userAccent: "#24688B",
+  agentAccent: "#93466F",
+  compactionAccent: "#67529B",
+} as const
+
+function palette(
+  id: (typeof SOFT_COLOR_SCHEME_IDS)[number],
+  family: string,
+  appearance: "light" | "dark",
+  colors: Omit<ColorSchemeColors, "userAccent" | "agentAccent" | "compactionAccent">
+    & Partial<Pick<ColorSchemeColors, "userAccent" | "agentAccent" | "compactionAccent">>,
+): ColorSchemeDefinition {
+  return {
+    id, appearance, editable: false,
+    labelKey: `settings.appearance.palette.${family}`,
+    descriptionKey: `settings.appearance.palette.${family}.description`,
+    colors: { ...(appearance === "dark" ? DARK_IDENTITY_COLORS : LIGHT_IDENTITY_COLORS), ...colors },
+  }
+}
+
+export const SOFT_COLOR_SCHEMES: readonly ColorSchemeDefinition[] = [
+  // One: softened light canvas / original mid-gray dark surfaces.
+  palette("porcelain", "mist", "light", {
+    surfaceBase: "#CFD1D4", surfaceSecondary: "#E1E3E5", surfaceMuted: "#BDC1C6",
+    borderBase: "#A9AEB6", textPrimary: "#3D4148", textMuted: "#484E58",
+    accentPrimary: "#665BA3", statusSuccess: "#426F49", statusWarning: "#81641D",
+    statusError: "#AC4547", yoloAccent: "#665BA3", compactionAccent: "#A07AFF",
+  }),
+  palette("mist", "mist", "dark", {
+    surfaceBase: "#282C33", surfaceSecondary: "#343A44", surfaceMuted: "#404754",
+    borderBase: "#525B69", textPrimary: "#CED2DA", textMuted: "#ADB5C3",
+    accentPrimary: "#D0ED9C", statusSuccess: "#81C1A8", statusWarning: "#DEC184",
+    statusError: "#E8987D", yoloAccent: "#B8BEAC",
+  }),
+  // Ayu Light / Mirage: cooler, slate-tinted surfaces, not Ayu's near-black.
+  palette("dawn", "slate", "light", {
+    surfaceBase: "#BCD2E5", surfaceSecondary: "#CFE2F1", surfaceMuted: "#A5BFD4",
+    borderBase: "#92AEC4", textPrimary: "#35424D", textMuted: "#3F4D59",
+    accentPrimary: "#7F69E2", statusSuccess: "#4B733C", statusWarning: "#805C20",
+    statusError: "#AB4849", yoloAccent: "#6B609A",
+  }),
+  palette("slate", "slate", "dark", {
+    surfaceBase: "#272F40", surfaceSecondary: "#333E52", surfaceMuted: "#404E65",
+    borderBase: "#53647C", textPrimary: "#C9D1DF", textMuted: "#9DB5D2",
+    accentPrimary: "#C6B58C", statusSuccess: "#A5BD86", statusWarning: "#E0B778",
+    statusError: "#E58D8A", yoloAccent: "#C6B58C",
+  }),
+  // Gruvbox Soft: earth-gray rather than a black canvas or yellow-white paper.
+  palette("parchment", "clay", "light", {
+    surfaceBase: "#D5C09E", surfaceSecondary: "#E2CEB0", surfaceMuted: "#CFB994",
+    borderBase: "#AC906A", textPrimary: "#3D352B", textMuted: "#4D4235",
+    accentPrimary: "#A9BA45", statusSuccess: "#496C42", statusWarning: "#7B551B",
+    statusError: "#A33D36", yoloAccent: "#5F682F",
+  }),
+  palette("clay", "clay", "dark", {
+    surfaceBase: "#32302F", surfaceSecondary: "#41403E", surfaceMuted: "#55524E",
+    borderBase: "#645C50", textPrimary: "#D8CBB3", textMuted: "#C6B9A5",
+    accentPrimary: "#87BC5C", statusSuccess: "#B9BF69", statusWarning: "#D8B574",
+    statusError: "#E39380", yoloAccent: "#B8BA86", compactionAccent: "#AA91FD",
+  }),
+  // Solarized paper, desaturated and darkened slightly to avoid a white canvas.
+  palette("linen", "linen", "light", {
+    surfaceBase: "#E6E0CE", surfaceSecondary: "#F0EAD9", surfaceMuted: "#D8D1BD",
+    borderBase: "#BDB6A2", textPrimary: "#3B494C", textMuted: "#4D5A5C",
+    accentPrimary: "#9D8325", statusSuccess: "#699245", statusWarning: "#835B1E",
+    statusError: "#AF4740", yoloAccent: "#776524",
+  }),
+  // Catppuccin Latte: the lavender-gray structure without the bright accent fill.
+  palette("iris", "iris", "light", {
+    surfaceBase: "#E0D4E5", surfaceSecondary: "#EDDFEF", surfaceMuted: "#CDBCD6",
+    borderBase: "#B39DBF", textPrimary: "#42394F", textMuted: "#534961",
+    accentPrimary: "#6B7CFF", statusSuccess: "#477343", statusWarning: "#825B20",
+    statusError: "#AD424D", yoloAccent: "#776026",
+  }),
+  // Everforest Soft: gray-green rather than a second warm paper palette.
+  palette("sage-light", "sage", "light", {
+    surfaceBase: "#CBD8C1", surfaceSecondary: "#DCE6D2", surfaceMuted: "#B8C8AC",
+    borderBase: "#9BAF8D", textPrimary: "#374532", textMuted: "#44543B",
+    accentPrimary: "#6C7FCB", statusSuccess: "#496E3C", statusWarning: "#80591D",
+    statusError: "#A9453E", yoloAccent: "#756126",
+  }),
+  palette("sage", "sage", "dark", {
+    surfaceBase: "#2D3530", surfaceSecondary: "#39463D", surfaceMuted: "#47564A",
+    borderBase: "#5A6A5C", textPrimary: "#D2D5C2", textMuted: "#C0CAB5",
+    accentPrimary: "#CCC092", statusSuccess: "#81C182", statusWarning: "#DBBC7F",
+    statusError: "#E8987D", yoloAccent: "#CCC092",
+  }),
+]
+
+export const SOFT_SYSTEM_LIGHT = SOFT_COLOR_SCHEMES.find((scheme) => scheme.id === "porcelain")!.colors!
+export const SOFT_SYSTEM_DARK = SOFT_COLOR_SCHEMES.find((scheme) => scheme.id === "mist")!.colors!
diff --git a/packages/ui/src/lib/theme-scheme.test.ts b/packages/ui/src/lib/theme-scheme.test.ts
index a5f414304..bc7b78cd7 100644
--- a/packages/ui/src/lib/theme-scheme.test.ts
+++ b/packages/ui/src/lib/theme-scheme.test.ts
@@ -3,10 +3,14 @@ import { describe, it } from "node:test"
 import {
   BUILT_IN_COLOR_SCHEMES,
   DEFAULT_CUSTOM_COLORS,
+  LIGHT_COLOR_SCHEME_COLORS,
+  SYSTEM_DARK_COLOR_SCHEME_COLORS,
+  SYSTEM_LIGHT_COLOR_SCHEME_COLORS,
   applyColorScheme,
   contrastRatio,
   normalizeColorScheme,
   textOnColor,
+  toColorSchemeMergePatch,
   validateColorSchemeColors,
   type ColorSchemeTarget,
 } from "./theme-scheme.ts"
@@ -57,13 +61,40 @@ describe("normalizeColorScheme", () => {
     assert.equal(normalizeColorScheme({ id: "custom", appearance: "light", colors: DEFAULT_CUSTOM_COLORS }).appearance, "light")
     assert.equal(normalizeColorScheme({ id: "custom", appearance: "system", colors: DEFAULT_CUSTOM_COLORS }).appearance, "dark")
   })
+
+  it("preserves saved colors on an embedded palette", () => {
+    const colors = { ...LIGHT_COLOR_SCHEME_COLORS, surfaceBase: "#FF00FF" }
+    assert.deepEqual(normalizeColorScheme({ id: "light", appearance: "light", colors }), {
+      id: "light",
+      appearance: "light",
+      colors,
+    })
+  })
+})
+
+describe("toColorSchemeMergePatch", () => {
+  it("clears stale colors when returning to the system palette", () => {
+    assert.deepEqual(toColorSchemeMergePatch(normalizeColorScheme("system")), {
+      id: "system",
+      appearance: "system",
+      colors: null,
+    })
+  })
+
+  it("keeps all colors for explicit palettes", () => {
+    const classic = normalizeColorScheme("classic")
+    assert.deepEqual(toColorSchemeMergePatch(classic), classic)
+  })
 })
 
 describe("built-in color schemes", () => {
-  it("keeps every preset within its contrast requirements", () => {
-    for (const scheme of BUILT_IN_COLOR_SCHEMES) {
-      if (scheme.colors) assert.equal(validateColorSchemeColors(scheme.colors), true, scheme.id)
-    }
+  it("bounds contrast exceptions to the explicitly saved palette calibration", () => {
+    // Keep the validator strict; these exact user-selected palettes intentionally
+    // have softer secondary text or brighter accents. Primary text is checked
+    // independently on every rendered surface in palette-quality.test.ts.
+    assert.deepEqual(BUILT_IN_COLOR_SCHEMES.filter((scheme) => scheme.colors && !validateColorSchemeColors(scheme.colors)).map((scheme) => scheme.id), [
+      "porcelain", "dawn", "slate", "parchment", "clay", "linen", "iris", "sage-light",
+    ])
   })
 
   it("uses the specified independent preset accents", () => {
@@ -72,10 +103,22 @@ describe("built-in color schemes", () => {
     assert.equal(accents.fjord, "#67C9BA")
     assert.equal(accents.lichen, "#A9C47F")
     assert.equal(accents.velvet, "#E5A77D")
-    assert.equal(accents.ember, "#D79A66")
+    assert.equal(accents.ember, "#D99254")
   })
 
-  it("preserves the exact CodeNomad Classic dark palette", () => {
+  it("keeps the additional Zed-inspired palettes light", () => {
+    for (const id of ["porcelain", "dawn", "parchment"]) {
+      assert.equal(BUILT_IN_COLOR_SCHEMES.find((scheme) => scheme.id === id)?.appearance, "light")
+    }
+  })
+
+  it("keeps System distinct from CodeNomad Classic", () => {
+    const classic = BUILT_IN_COLOR_SCHEMES.find((scheme) => scheme.id === "classic")?.colors
+    assert.notDeepEqual(SYSTEM_DARK_COLOR_SCHEME_COLORS, classic)
+    assert.notDeepEqual(SYSTEM_LIGHT_COLOR_SCHEME_COLORS, LIGHT_COLOR_SCHEME_COLORS)
+  })
+
+  it("preserves Classic surfaces while separating participant roles", () => {
     assert.deepEqual(BUILT_IN_COLOR_SCHEMES.find((scheme) => scheme.id === "classic")?.colors, {
       surfaceBase: "#1A1A1A",
       surfaceSecondary: "#2A2A2A",
@@ -83,7 +126,7 @@ describe("built-in color schemes", () => {
       borderBase: "#3A3A3A",
       textPrimary: "#CFD4DC",
       textMuted: "#999999",
-      accentPrimary: "#0080FF",
+      accentPrimary: "#4D7AFE",
       statusSuccess: "#4CAF50",
       statusWarning: "#FF9800",
       statusError: "#F44336",
@@ -96,29 +139,32 @@ describe("built-in color schemes", () => {
 })
 
 describe("applyColorScheme", () => {
-  it("clears stale overrides when switching to system or light", () => {
+  it("replaces stale overrides when switching to system or light", () => {
     const root = target()
     applyColorScheme(normalizeColorScheme("fjord"), { target: root.value })
     assert.ok(root.properties.size > 0)
     assert.equal(root.attributes.get("data-theme"), "dark")
 
     applyColorScheme(normalizeColorScheme("system"), { target: root.value, systemDark: true })
-    assert.equal(root.properties.size, 0)
+    assert.equal(root.properties.get("--surface-base"), SYSTEM_DARK_COLOR_SCHEME_COLORS.surfaceBase)
     assert.equal(root.attributes.has("data-theme"), false)
     assert.equal(root.value.dataset.colorScheme, "system")
 
     applyColorScheme(normalizeColorScheme("ember"), { target: root.value })
     applyColorScheme(normalizeColorScheme("light"), { target: root.value })
-    assert.equal(root.properties.size, 0)
+    assert.equal(root.properties.get("--surface-base"), LIGHT_COLOR_SCHEME_COLORS.surfaceBase)
     assert.equal(root.attributes.get("data-theme"), "light")
   })
 
-  it("uses the existing dark CSS tokens for CodeNomad Classic", () => {
+  it("renders Classic defaults and explicit edits through the same token path", () => {
     const root = target()
     applyColorScheme(normalizeColorScheme("fjord"), { target: root.value })
     applyColorScheme(normalizeColorScheme("classic"), { target: root.value })
-    assert.equal(root.properties.size, 0)
+    assert.equal(root.properties.get("--surface-base"), "#1A1A1A")
     assert.equal(root.attributes.get("data-theme"), "dark")
+    const colors = { ...normalizeColorScheme("classic").colors!, accentPrimary: "#FF00FF" }
+    applyColorScheme(normalizeColorScheme({ id: "classic", colors }), { target: root.value })
+    assert.equal(root.properties.get("--accent-primary"), "#FF00FF")
   })
 
   it("resolves system appearance without imposing a data theme", () => {
@@ -139,11 +185,11 @@ describe("applyColorScheme", () => {
     assert.ok(contrastRatio(text ?? "", "#8FA8FF") >= 4.5)
   })
 
-  it("derives legacy blue UI states from the selected accent", () => {
+  it("keeps neutral selection independent of accent-colored actions", () => {
     const root = target()
     applyColorScheme(normalizeColorScheme("fjord"), { target: root.value })
     assert.equal(root.properties.get("--attachment-chip-text"), "#67C9BA")
-    assert.equal(root.properties.get("--dropdown-highlight-bg"), "rgba(103, 201, 186, 0.2)")
+    assert.equal(root.properties.get("--dropdown-highlight-bg"), "rgba(168, 184, 191, 0.2)")
   })
 
   it("applies customizable semantic roles", () => {
@@ -153,7 +199,22 @@ describe("applyColorScheme", () => {
     assert.equal(root.properties.get("--message-user-border"), colors.userAccent)
     assert.equal(root.properties.get("--message-assistant-border"), colors.agentAccent)
     assert.equal(root.properties.get("--session-status-compacting-fg"), colors.compactionAccent)
-    assert.equal(root.properties.get("--session-yolo-accent"), colors.yoloAccent)
+    assert.equal(root.properties.get("--session-yolo-accent"), colors.accentPrimary)
+  })
+
+  it("derives tabs and message surfaces from each palette", () => {
+    for (const id of ["light", "classic", "fjord", "lichen", "velvet", "ember", "porcelain", "dawn", "parchment"] as const) {
+      const root = target()
+      const scheme = normalizeColorScheme(id)
+      applyColorScheme(scheme, { target: root.value })
+      assert.equal(root.properties.get("--tab-active-bg"), scheme.colors?.surfaceBase, id)
+      assert.equal(root.properties.get("--tab-inactive-bg"), scheme.colors?.surfaceSecondary, id)
+      assert.equal(root.properties.get("--message-user-border"), scheme.colors?.userAccent, id)
+      assert.notEqual(root.properties.get("--message-user-bg"), scheme.colors?.surfaceSecondary, id)
+      assert.equal(root.properties.get("--message-assistant-border"), scheme.colors?.agentAccent, id)
+      assert.equal(root.properties.get("--message-assistant-bg"), id === "light" ? "#F8F8F8" : scheme.colors?.surfaceMuted, id)
+      assert.notEqual(root.properties.get("--message-assistant-bg"), root.properties.get("--surface-base"), id)
+    }
   })
 })
 
diff --git a/packages/ui/src/lib/theme-scheme.ts b/packages/ui/src/lib/theme-scheme.ts
index 2fa700f0d..ef1b6ae9a 100644
--- a/packages/ui/src/lib/theme-scheme.ts
+++ b/packages/ui/src/lib/theme-scheme.ts
@@ -1,4 +1,8 @@
-export const COLOR_SCHEME_IDS = ["system", "light", "classic", "basalt", "fjord", "lichen", "velvet", "ember", "custom"] as const
+import { DARK_IDENTITY_COLORS, LIGHT_IDENTITY_COLORS, SOFT_COLOR_SCHEME_IDS, SOFT_COLOR_SCHEMES, SOFT_SYSTEM_DARK, SOFT_SYSTEM_LIGHT } from "./soft-color-schemes.ts"
+import { classicLightSurfaces } from "./classic-light-surfaces"
+import { classicDarkSurfaces } from "./classic-dark-surfaces"
+
+export const COLOR_SCHEME_IDS = ["system", "light", ...SOFT_COLOR_SCHEME_IDS, "classic", "basalt", "fjord", "lichen", "velvet", "ember", "custom"] as const
 
 export type ColorSchemeId = (typeof COLOR_SCHEME_IDS)[number]
 export type ColorSchemeAppearance = "system" | "light" | "dark"
@@ -88,20 +92,21 @@ export const DEFAULT_CUSTOM_COLORS: Readonly<ColorSchemeColors> = {
 export const LIGHT_COLOR_SCHEME_COLORS: Readonly<ColorSchemeColors> = {
   surfaceBase: "#FFFFFF",
   surfaceSecondary: "#F5F5F5",
-  surfaceMuted: "#ECEFF3",
-  borderBase: "#D1D5DB",
+  surfaceMuted: "#F8FAFC",
+  borderBase: "#E0E0E0",
   textPrimary: "#111827",
-  textMuted: "#4B5563",
-  accentPrimary: "#005FCC",
+  textMuted: "#475569",
+  accentPrimary: "#0066FF",
   statusSuccess: "#237A43",
   statusWarning: "#9A6700",
   statusError: "#C62828",
-  userAccent: "#0066CC",
-  agentAccent: "#A44B00",
-  compactionAccent: "#7E22CE",
-  yoloAccent: "#005FCC",
+  ...LIGHT_IDENTITY_COLORS,
+  yoloAccent: "#0066FF",
 }
 
+export const SYSTEM_LIGHT_COLOR_SCHEME_COLORS = SOFT_SYSTEM_LIGHT
+export const SYSTEM_DARK_COLOR_SCHEME_COLORS = SOFT_SYSTEM_DARK
+
 export const BUILT_IN_COLOR_SCHEMES: readonly ColorSchemeDefinition[] = [
   {
     id: "system",
@@ -112,10 +117,11 @@ export const BUILT_IN_COLOR_SCHEMES: readonly ColorSchemeDefinition[] = [
   },
   {
     id: "light",
-    labelKey: "settings.appearance.colorScheme.option.light",
+    labelKey: "settings.appearance.colorScheme.option.codeNomadClassic",
     descriptionKey: "settings.appearance.colorScheme.description.light",
     appearance: "light",
     editable: false,
+    colors: LIGHT_COLOR_SCHEME_COLORS,
   },
   {
     id: "classic",
@@ -130,7 +136,7 @@ export const BUILT_IN_COLOR_SCHEMES: readonly ColorSchemeDefinition[] = [
       borderBase: "#3A3A3A",
       textPrimary: "#CFD4DC",
       textMuted: "#999999",
-      accentPrimary: "#0080FF",
+      accentPrimary: "#4D7AFE",
       statusSuccess: "#4CAF50",
       statusWarning: "#FF9800",
       statusError: "#F44336",
@@ -140,13 +146,18 @@ export const BUILT_IN_COLOR_SCHEMES: readonly ColorSchemeDefinition[] = [
       yoloAccent: "#0080FF",
     },
   },
+  ...SOFT_COLOR_SCHEMES,
   {
     id: "basalt",
     labelKey: "settings.appearance.colorScheme.option.basalt",
     descriptionKey: "settings.appearance.colorScheme.description.basalt",
     appearance: "dark",
     editable: false,
-    colors: DEFAULT_CUSTOM_COLORS,
+    colors: {
+      ...DEFAULT_CUSTOM_COLORS,
+      ...DARK_IDENTITY_COLORS,
+      userAccent: "#88EEFB",
+    },
   },
   {
     id: "fjord",
@@ -162,10 +173,10 @@ export const BUILT_IN_COLOR_SCHEMES: readonly ColorSchemeDefinition[] = [
       textPrimary: "#E7EEF1",
       textMuted: "#A8B8BF",
       accentPrimary: "#67C9BA",
-      statusSuccess: "#72C497",
+      statusSuccess: "#8FC473",
       statusWarning: "#D8B36A",
       statusError: "#E28181",
-      ...DEFAULT_SEMANTIC_COLORS,
+      ...DARK_IDENTITY_COLORS,
       yoloAccent: "#67C9BA",
     },
   },
@@ -186,7 +197,7 @@ export const BUILT_IN_COLOR_SCHEMES: readonly ColorSchemeDefinition[] = [
       statusSuccess: "#77C49A",
       statusWarning: "#D6B36D",
       statusError: "#DF8580",
-      ...DEFAULT_SEMANTIC_COLORS,
+      ...DARK_IDENTITY_COLORS,
       yoloAccent: "#A9C47F",
     },
   },
@@ -207,7 +218,7 @@ export const BUILT_IN_COLOR_SCHEMES: readonly ColorSchemeDefinition[] = [
       statusSuccess: "#78C59A",
       statusWarning: "#DDB46F",
       statusError: "#E28787",
-      ...DEFAULT_SEMANTIC_COLORS,
+      ...DARK_IDENTITY_COLORS,
       yoloAccent: "#E5A77D",
     },
   },
@@ -224,11 +235,11 @@ export const BUILT_IN_COLOR_SCHEMES: readonly ColorSchemeDefinition[] = [
       borderBase: "#493D34",
       textPrimary: "#F1ECE7",
       textMuted: "#BDB1A6",
-      accentPrimary: "#D79A66",
+      accentPrimary: "#D99254",
       statusSuccess: "#78C296",
       statusWarning: "#D8AE62",
       statusError: "#DE817A",
-      ...DEFAULT_SEMANTIC_COLORS,
+      ...DARK_IDENTITY_COLORS,
       yoloAccent: "#D79A66",
     },
   },
@@ -274,7 +285,7 @@ function selectionFor(
   return {
     id,
     appearance,
-    ...(definition.colors ? { colors: copyColors(colors ?? definition.colors) } : {}),
+    ...(colors || definition.colors ? { colors: copyColors(colors ?? definition.colors!) } : {}),
   }
 }
 
@@ -283,7 +294,18 @@ export function normalizeColorScheme(value: unknown, legacyTheme?: unknown): Nor
 
   if (typeof id === "string" && COLOR_SCHEME_IDS.includes(id as ColorSchemeId)) {
     const schemeId = id as ColorSchemeId
-    if (schemeId !== "custom") return selectionFor(schemeId)
+    if (schemeId !== "custom") {
+      const colors = isRecord(value) ? normalizeColors(value.colors) : undefined
+      // Old System edits contain only one appearance. Preserve them as fixed
+      // colors rather than applying a light canvas with dark-mode rendering.
+      if (schemeId === "system" && colors) {
+        const appearance = isRecord(value) && (value.appearance === "light" || value.appearance === "dark")
+          ? value.appearance
+          : luminance(colors.surfaceBase) > 0.4 ? "light" : "dark"
+        return selectionFor("custom", colors, appearance)
+      }
+      return selectionFor(schemeId, colors)
+    }
     const colors = isRecord(value) ? normalizeColors(value.colors) ?? DEFAULT_CUSTOM_COLORS : DEFAULT_CUSTOM_COLORS
     const appearance = isRecord(value) && value.appearance === "light" ? "light" : "dark"
     return selectionFor("custom", colors, appearance)
@@ -294,6 +316,16 @@ export function normalizeColorScheme(value: unknown, legacyTheme?: unknown): Nor
   return selectionFor("system")
 }
 
+export function toColorSchemeMergePatch(preference: NormalizedColorScheme): Omit<NormalizedColorScheme, "colors"> & {
+  colors: ColorSchemeColors | null
+} {
+  const normalized = normalizeColorScheme(preference)
+  return {
+    ...normalized,
+    colors: normalized.colors ? { ...normalized.colors } : null,
+  }
+}
+
 const channel = (color: string, offset: number) => Number.parseInt(color.slice(offset, offset + 2), 16)
 
 const luminance = (color: string) => {
@@ -401,21 +433,37 @@ const APPLIED_PROPERTIES = [
   "--status-error-fg",
   "--message-user-bg",
   "--message-user-border",
+  "--message-assistant-bg",
   "--message-assistant-border",
+  "--message-tool-bg",
+  "--message-tool-border",
   "--session-status-compacting-fg",
   "--session-status-compacting-bg",
   "--session-yolo-accent",
+  "--tab-active-bg",
+  "--tab-active-hover-bg",
+  "--tab-active-text",
+  "--tab-inactive-bg",
+  "--tab-inactive-hover-bg",
+  "--tab-inactive-text",
+  "--tab-rail-bg",
+  "--tab-border",
+  "--new-tab-bg",
+  "--new-tab-hover-bg",
+  "--new-tab-text",
 ] as const
 
 function derivedProperties(colors: ColorSchemeColors, dark: boolean): Record<(typeof APPLIED_PROPERTIES)[number], string> {
   const textOnAccent = textOnColor(colors.accentPrimary)
+  // Selection is a neutral surface state, not a participant's identity color.
+  const selection = colors.textMuted
   return {
     "--surface-base": colors.surfaceBase,
     "--surface-primary": colors.surfaceBase,
     "--surface-secondary": colors.surfaceSecondary,
     "--surface-muted": colors.surfaceMuted,
-    "--surface-code": colors.surfaceMuted,
-    "--surface-hover": mix(colors.textPrimary, colors.surfaceSecondary, dark ? 0.12 : 0.08),
+    "--surface-code": colors.surfaceBase,
+    "--surface-hover": mix(colors.textPrimary, colors.surfaceSecondary, 0.04),
     "--border-base": colors.borderBase,
     "--border-secondary": mix(colors.borderBase, colors.surfaceSecondary, 0.72),
     "--border-muted": mix(colors.borderBase, colors.surfaceSecondary, 0.5),
@@ -430,9 +478,9 @@ function derivedProperties(colors: ColorSchemeColors, dark: boolean): Record<(ty
     "--accent-hover": mix(dark ? "#FFFFFF" : "#000000", colors.accentPrimary, dark ? 0.14 : 0.18),
     "--focus-ring-color": colors.accentPrimary,
     "--focus-ring-offset": colors.surfaceBase,
-    "--list-item-highlight-bg": alpha(colors.accentPrimary, dark ? 0.2 : 0.1),
-    "--list-item-highlight-bg-solid": mix(colors.accentPrimary, colors.surfaceSecondary, dark ? 0.22 : 0.1),
-    "--list-item-highlight-border": alpha(colors.accentPrimary, dark ? 0.4 : 0.25),
+    "--list-item-highlight-bg": alpha(selection, dark ? 0.2 : 0.12),
+    "--list-item-highlight-bg-solid": mix(selection, colors.surfaceSecondary, dark ? 0.22 : 0.12),
+    "--list-item-highlight-border": alpha(selection, dark ? 0.4 : 0.25),
     "--attachment-chip-bg": alpha(colors.accentPrimary, 0.1),
     "--attachment-chip-text": colors.accentPrimary,
     "--attachment-chip-ring": alpha(colors.accentPrimary, dark ? 0.2 : 0.1),
@@ -441,9 +489,9 @@ function derivedProperties(colors: ColorSchemeColors, dark: boolean): Record<(ty
     "--env-vars-bg": alpha(colors.accentPrimary, dark ? 0.2 : 0.1),
     "--env-vars-border": alpha(colors.accentPrimary, dark ? 0.3 : 0.2),
     "--env-vars-text": colors.accentPrimary,
-    "--dropdown-highlight-bg": alpha(colors.accentPrimary, dark ? 0.2 : 0.1),
-    "--selection-highlight-bg": alpha(colors.accentPrimary, dark ? 0.18 : 0.12),
-    "--selection-highlight-strong-bg": alpha(colors.accentPrimary, dark ? 0.28 : 0.18),
+    "--dropdown-highlight-bg": alpha(selection, dark ? 0.2 : 0.12),
+    "--selection-highlight-bg": alpha(selection, dark ? 0.22 : 0.16),
+    "--selection-highlight-strong-bg": alpha(selection, dark ? 0.32 : 0.24),
     "--status-success": colors.statusSuccess,
     "--status-warning": colors.statusWarning,
     "--status-error": colors.statusError,
@@ -458,12 +506,26 @@ function derivedProperties(colors: ColorSchemeColors, dark: boolean): Record<(ty
     "--status-starting-fg": colors.statusWarning,
     "--status-starting-bg": alpha(colors.statusWarning, 0.16),
     "--status-error-fg": colors.statusError,
-    "--message-user-bg": mix(colors.userAccent, colors.surfaceSecondary, dark ? 0.1 : 0.12),
+    "--message-user-bg": mix(colors.userAccent, colors.surfaceSecondary, dark ? 0.05 : 0.06),
     "--message-user-border": colors.userAccent,
+    "--message-assistant-bg": colors.surfaceMuted,
     "--message-assistant-border": colors.agentAccent,
+    "--message-tool-bg": colors.surfaceMuted,
+    "--message-tool-border": mix(colors.textMuted, colors.borderBase, 0.28),
     "--session-status-compacting-fg": colors.compactionAccent,
     "--session-status-compacting-bg": alpha(colors.compactionAccent, dark ? 0.28 : 0.18),
-    "--session-yolo-accent": colors.yoloAccent,
+    "--session-yolo-accent": colors.accentPrimary,
+    "--tab-active-bg": colors.surfaceBase,
+    "--tab-active-hover-bg": mix(colors.textPrimary, colors.surfaceBase, 0.04),
+    "--tab-active-text": colors.textPrimary,
+    "--tab-inactive-bg": colors.surfaceSecondary,
+    "--tab-inactive-hover-bg": mix(colors.textPrimary, colors.surfaceSecondary, 0.04),
+    "--tab-inactive-text": colors.textMuted,
+    "--tab-rail-bg": colors.surfaceSecondary,
+    "--tab-border": colors.borderBase,
+    "--new-tab-bg": colors.surfaceSecondary,
+    "--new-tab-hover-bg": colors.surfaceMuted,
+    "--new-tab-text": colors.textMuted,
   }
 }
 
@@ -481,10 +543,19 @@ export function applyColorScheme(
   if (scheme.appearance === "system") target.removeAttribute("data-theme")
   else target.setAttribute("data-theme", dark ? "dark" : "light")
 
-  if (scheme.colors && scheme.id !== "classic") {
-    for (const [property, value] of Object.entries(derivedProperties(scheme.colors, dark))) {
+  const colors = scheme.id === "system"
+    ? scheme.colors ?? (dark ? SYSTEM_DARK_COLOR_SCHEME_COLORS : SYSTEM_LIGHT_COLOR_SCHEME_COLORS)
+    : scheme.colors
+  if (colors) {
+    for (const [property, value] of Object.entries(derivedProperties(colors, dark))) {
       target.style.setProperty(property, value)
     }
+    if (scheme.id === "light") {
+      for (const [property, value] of Object.entries(classicLightSurfaces(colors))) target.style.setProperty(property, value)
+    }
+    if (scheme.id === "classic") {
+      for (const [property, value] of Object.entries(classicDarkSurfaces(colors))) target.style.setProperty(property, value)
+    }
   }
 
   return dark
diff --git a/packages/ui/src/lib/theme.tsx b/packages/ui/src/lib/theme.tsx
index 38d13a00a..38a5ab255 100644
--- a/packages/ui/src/lib/theme.tsx
+++ b/packages/ui/src/lib/theme.tsx
@@ -1,7 +1,8 @@
-import { createContext, createEffect, createMemo, createSignal, onMount, useContext, type JSX } from "solid-js"
+import { createContext, createEffect, createMemo, createSignal, onCleanup, useContext, type JSX } from "solid-js"
 import { createTheme, ThemeProvider as MuiThemeProvider } from "@suid/material/styles"
 import CssBaseline from "@suid/material/CssBaseline"
 import { useConfig } from "../stores/preferences"
+import { effectiveAppearance } from "./appearance-preferences"
 import {
   applyColorScheme,
   normalizeColorScheme,
@@ -76,20 +77,13 @@ const resolvePaletteColors = (dark: boolean): ResolvedPaletteColors => {
 
 export function ThemeProvider(props: { children: JSX.Element }) {
   const mediaQuery = typeof window !== "undefined" ? window.matchMedia("(prefers-color-scheme: dark)") : null
-  const { colorSchemePreference, setColorSchemePreference } = useConfig()
-  const [selectedColorScheme, setSelectedColorScheme] = createSignal(colorSchemePreference())
+  const config = useConfig()
+  const [systemDark, setSystemDark] = createSignal(mediaQuery?.matches ?? false)
   const [isDark, setIsDarkSignal] = createSignal(true)
   const [themeRevision, setThemeRevision] = createSignal(0)
 
-  const colorScheme = () => selectedColorScheme()
-  const themeMode = (): ThemeMode => colorScheme().appearance
-  let latestWrite: Promise<void> | null = null
-
-  createEffect(() => {
-    const preference = colorSchemePreference()
-    if (latestWrite) return
-    setSelectedColorScheme(preference)
-  })
+  const themeMode = () => config.themePreference()
+  const colorScheme = () => config.getAppearancePalette(effectiveAppearance(themeMode(), systemDark()))
 
   const applyResolvedTheme = () => {
     const dark = applyColorScheme(colorScheme(), { systemDark: mediaQuery?.matches })
@@ -105,40 +99,16 @@ export function ThemeProvider(props: { children: JSX.Element }) {
     applyResolvedTheme()
   })
 
-  onMount(() => {
-    if (!mediaQuery) return
-    const handleSystemThemeChange = () => {
-      applyResolvedTheme()
-    }
-
-    mediaQuery.addEventListener("change", handleSystemThemeChange)
-
-    return () => {
-      mediaQuery.removeEventListener("change", handleSystemThemeChange)
-    }
-  })
+  const handleSystemThemeChange = (event: MediaQueryListEvent) => setSystemDark(event.matches)
+  mediaQuery?.addEventListener("change", handleSystemThemeChange)
+  onCleanup(() => mediaQuery?.removeEventListener("change", handleSystemThemeChange))
 
   const setColorScheme = (scheme: NormalizedColorScheme) => {
-    const normalized = normalizeColorScheme(scheme)
-    setSelectedColorScheme(normalized)
-    const write = setColorSchemePreference(normalized)
-    latestWrite = write
-    void write.then(
-      () => {
-        if (latestWrite !== write) return
-        latestWrite = null
-        setSelectedColorScheme(colorSchemePreference())
-      },
-      () => {
-        if (latestWrite !== write) return
-        latestWrite = null
-        setSelectedColorScheme(colorSchemePreference())
-      },
-    )
+    void config.setColorSchemePreference(normalizeColorScheme(scheme))
   }
 
   const setThemeMode = (mode: ThemeMode) => {
-    setColorScheme(normalizeColorScheme(mode === "dark" ? "classic" : mode))
+    void config.setThemePreference(mode)
   }
 
   const cycleThemeMode = () => {
diff --git a/packages/ui/src/renderer/loading/loading.css b/packages/ui/src/renderer/loading/loading.css
index c26c8ea7d..fed1ce14f 100644
--- a/packages/ui/src/renderer/loading/loading.css
+++ b/packages/ui/src/renderer/loading/loading.css
@@ -61,7 +61,7 @@ button {
   width: 100%;
   max-width: 420px;
   padding: 22px;
-  border-radius: 18px;
+  border-radius: 0;
   background: var(--surface-secondary, #f5f5f5);
   border: 1px solid var(--border-base, #e0e0e0);
   box-shadow: var(--panel-shadow-strong, 0 25px 60px rgba(0, 0, 0, 0.16));
diff --git a/packages/ui/src/stores/appearance-preferences.test.ts b/packages/ui/src/stores/appearance-preferences.test.ts
new file mode 100644
index 000000000..8a566ad6f
--- /dev/null
+++ b/packages/ui/src/stores/appearance-preferences.test.ts
@@ -0,0 +1,77 @@
+import assert from "node:assert/strict"
+import { it } from "node:test"
+import { storage } from "../lib/storage"
+import { normalizeColorScheme } from "../lib/theme-scheme"
+
+function merge(target: Record<string, any>, patch: Record<string, any>): Record<string, any> {
+  const result = structuredClone(target)
+  for (const [key, value] of Object.entries(patch)) {
+    if (value === null) delete result[key]
+    else result[key] = typeof value === "object" && !Array.isArray(value)
+      ? merge(result[key] ?? {}, value) : value
+  }
+  return result
+}
+
+it("persists independent palettes, queued changes, overrides, deletion and failed writes", async () => {
+  const originals = {
+    loadConfigOwner: storage.loadConfigOwner, loadStateOwner: storage.loadStateOwner,
+    patchStateOwner: storage.patchStateOwner, patchConfigOwner: storage.patchConfigOwner,
+  }
+  const legacy = normalizeColorScheme("slate")
+  let state: Record<string, any> = { colorScheme: legacy, theme: "dark", untouched: { value: 123 } }
+  let fail = false
+  storage.loadConfigOwner = async () => ({})
+  storage.loadStateOwner = async () => structuredClone(state)
+  storage.patchConfigOwner = async () => ({})
+  storage.patchStateOwner = async (_owner, patch) => {
+    if (fail) throw new Error("Simulated storage failure")
+    state = merge(state, patch as Record<string, any>)
+    return structuredClone(state)
+  }
+  try {
+    const {
+      deleteColorSchemePreset, getAppearancePalette, getAppearancePresetId,
+      resetColorSchemeOverride, saveColorSchemeOverride, saveColorSchemePreset,
+      setColorSchemePreference, setThemePreference, themePreference, updatePreferences,
+    } = await import("./preferences")
+    await updatePreferences({}) // Load the legacy profile before interaction.
+    assert.equal(themePreference(), "dark")
+    assert.equal(getAppearancePalette("dark").id, "slate")
+    await Promise.all([
+      setColorSchemePreference(normalizeColorScheme("linen")),
+      setColorSchemePreference(normalizeColorScheme("sage")),
+      setThemePreference("system"),
+    ])
+    assert.equal(themePreference(), "system")
+    assert.equal(getAppearancePalette("light").id, "linen")
+    assert.equal(getAppearancePalette("dark").id, "sage")
+    assert.deepEqual(state.untouched, { value: 123 })
+
+    const colors = { ...getAppearancePalette("light").colors!, accentPrimary: "#665544" }
+    await saveColorSchemeOverride("linen", "light", colors)
+    assert.equal(themePreference(), "system")
+    assert.equal(getAppearancePalette("light").colors!.accentPrimary, "#665544")
+    await resetColorSchemeOverride("linen")
+    assert.deepEqual(getAppearancePalette("light"), normalizeColorScheme("linen"))
+
+    const id = await saveColorSchemePreset("Saved light", "light", colors)
+    assert.equal(getAppearancePresetId("light"), id)
+    await setThemePreference("dark")
+    assert.equal(getAppearancePresetId("light"), id)
+    await deleteColorSchemePreset(id)
+    assert.equal(getAppearancePresetId("light"), undefined)
+    assert.deepEqual(getAppearancePalette("light").colors, colors)
+    assert.equal(getAppearancePalette("dark").id, "sage")
+
+    const snapshot = structuredClone(state)
+    fail = true
+    await assert.rejects(setThemePreference("light"), /Simulated/)
+    assert.equal(themePreference(), "dark")
+    assert.deepEqual(state, snapshot)
+    fail = false
+    await setThemePreference("light")
+    assert.equal(themePreference(), "light")
+    assert.deepEqual(getAppearancePalette("light").colors, colors)
+  } finally { Object.assign(storage, originals) }
+})
diff --git a/packages/ui/src/stores/commands.ts b/packages/ui/src/stores/commands.ts
index d96ab5af3..2a61d3e39 100644
--- a/packages/ui/src/stores/commands.ts
+++ b/packages/ui/src/stores/commands.ts
@@ -1,5 +1,6 @@
 import { createSignal } from "solid-js"
 import type { CommandInfo, LocationRef, OpenCodeClient } from "@opencode-ai/client"
+import { waitForPluginActivation } from "./plugin-activation"
 import { toRequestLocation } from "./request-locations"
 
 const [commandMap, setCommandMap] = createSignal<Map<string, CommandInfo[]>>(new Map())
@@ -15,6 +16,7 @@ export async function fetchCommands(
   commandRequestIds.set(instanceId, requestId)
   let commands: CommandInfo[]
   try {
+    await waitForPluginActivation(client, location)
     commands = await client.command.list(location ? { location: toRequestLocation(location) } : undefined).then((result) => result.data)
   } catch {
     return false
diff --git a/packages/ui/src/stores/instance-invalidation.test.ts b/packages/ui/src/stores/instance-invalidation.test.ts
index ea0d820a1..3bb438da6 100644
--- a/packages/ui/src/stores/instance-invalidation.test.ts
+++ b/packages/ui/src/stores/instance-invalidation.test.ts
@@ -7,6 +7,8 @@ describe("instance invalidation targets", () => {
     assert.deepEqual(getInstanceRefreshTargets("agent.updated"), ["agents"])
     assert.deepEqual(getInstanceRefreshTargets("command.updated"), ["commands"])
     assert.deepEqual(getInstanceRefreshTargets("catalog.updated"), ["agents", "providers", "commands"])
+    assert.deepEqual(getInstanceRefreshTargets("plugin.updated"), ["agents", "providers", "commands", "metadata"])
+    assert.deepEqual(getInstanceRefreshTargets("plugin.added"), [])
   })
 
   it("refreshes only state affected by metadata and filesystem events", () => {
diff --git a/packages/ui/src/stores/instance-invalidation.ts b/packages/ui/src/stores/instance-invalidation.ts
index 3f44bf82e..f53453db5 100644
--- a/packages/ui/src/stores/instance-invalidation.ts
+++ b/packages/ui/src/stores/instance-invalidation.ts
@@ -16,8 +16,8 @@ export function getInstanceRefreshTargets(eventType: string): readonly InstanceR
       return ["providers", "metadata"]
     case "config.updated":
       return ["agents", "providers", "commands", "metadata"]
-    case "plugin.added":
     case "plugin.updated":
+      return ["agents", "providers", "commands", "metadata"]
     case "mcp.status.changed":
     case "mcp.resources.changed":
       return ["metadata"]
diff --git a/packages/ui/src/stores/instances.ts b/packages/ui/src/stores/instances.ts
index 183ecbeeb..22d75abb2 100644
--- a/packages/ui/src/stores/instances.ts
+++ b/packages/ui/src/stores/instances.ts
@@ -14,6 +14,7 @@ import {
   fetchAgents,
   fetchProviders,
   getActiveCatalogLocation,
+  refreshSessionCatalog,
   clearInstanceDraftPrompts,
   clearSessionListRequestState,
   clearSessionCatalogState,
@@ -444,8 +445,10 @@ function refreshVolatileInstanceState(
       const location = getActiveCatalogLocation(instanceId)
       if (current.has("agents")) requests.push(fetchAgents(instanceId, location, true))
       if (current.has("providers")) requests.push(fetchProviders(instanceId, location, true))
-      if (current.has("commands")) requests.push(fetchCommands(instanceId, client, getActiveCatalogLocation(instanceId)))
-      if (current.has("metadata")) requests.push(loadInstanceMetadata(instance, { force: true }))
+      if (current.has("commands")) requests.push(fetchCommands(instanceId, client, location))
+      if (current.has("metadata")) {
+        requests.push(loadInstanceMetadata(instance, { force: true, location }))
+      }
       await Promise.all(requests)
     } while (state.pending.size)
   })().finally(() => {
@@ -894,7 +897,9 @@ function startInstanceSessionHydration(instanceId: string, force = false): {
   })
   void worktreeHydration.then(async () => {
     const instance = instances().get(instanceId)
-    if (instance?.client) await loadInstanceMetadata(instance, { force })
+    if (instance?.client) {
+      await loadInstanceMetadata(instance, { force, location: getActiveCatalogLocation(instanceId) })
+    }
   }).catch((error) => log.warn("Failed to load supplemental instance metadata", { instanceId, error }))
   const sessions = workspaceMetadata.then(async () => {
     resetSessionPagination(instanceId)
@@ -920,12 +925,8 @@ async function hydrateInstanceData(instanceId: string, options?: {
       : startInstanceSessionHydration(instanceId, options?.force)
     await hydration.sessions
     await hydration.workspaceMetadata
-    await fetchAgents(instanceId)
-    await fetchProviders(instanceId)
+    await refreshSessionCatalog(instanceId, options?.force)
     await ensureInstanceConfigLoaded(instanceId)
-    const instance = instances().get(instanceId)
-    if (!instance?.client) return
-    await fetchCommands(instanceId, instance.client, getActiveCatalogLocation(instanceId))
     await syncPendingRequests(instanceId)
   } catch (error) {
     log.error("Failed to fetch initial data", error)
diff --git a/packages/ui/src/stores/message-v2/normalizers.test.ts b/packages/ui/src/stores/message-v2/normalizers.test.ts
index ed3de1ffc..0fd30abf9 100644
--- a/packages/ui/src/stores/message-v2/normalizers.test.ts
+++ b/packages/ui/src/stores/message-v2/normalizers.test.ts
@@ -127,6 +127,7 @@ describe("native session message normalization", () => {
     }).message
     const compacted = normalizeSessionMessage("session", {
       id: "compact", type: "compaction", status: "completed", reason: "manual", summary: "summary", recent: "recent",
+      model: { providerID: "anthropic", id: "claude", variant: "high" }, providerState: { cache: "warm" },
       time: { created: 1 },
     }).message
     const running = normalizeSessionMessage("session", {
@@ -141,6 +142,8 @@ describe("native session message normalization", () => {
     assert.equal(shell.status, "complete")
     assert.equal(compacted.status, "complete")
     assert.equal((compacted.parts[0] as any).text, "summary")
+    assert.deepEqual((compacted.parts[0] as any).model, { providerID: "anthropic", id: "claude", variant: "high" })
+    assert.deepEqual((compacted.parts[0] as any).providerState, { cache: "warm" })
     assert.equal(running.status, "sent")
     assert.equal((running.parts[0] as any).text, "partial")
     assert.equal(failed.message.status, "error")
diff --git a/packages/ui/src/stores/message-v2/normalizers.ts b/packages/ui/src/stores/message-v2/normalizers.ts
index eed303b95..10ecd057c 100644
--- a/packages/ui/src/stores/message-v2/normalizers.ts
+++ b/packages/ui/src/stores/message-v2/normalizers.ts
@@ -187,6 +187,9 @@ export function normalizeSessionMessage(sessionId: string, source: SessionMessag
       type: "compaction",
       auto: source.reason === "auto",
       text: "summary" in source ? source.summary : source.error.message,
+      ...(source.status === "completed"
+        ? { model: source.model, providerState: source.providerState }
+        : {}),
       sessionID: sessionId,
       messageID: source.id,
     } as ClientPart]
diff --git a/packages/ui/src/stores/opencode-data.test.ts b/packages/ui/src/stores/opencode-data.test.ts
index 64fe0d473..5f0c1b179 100644
--- a/packages/ui/src/stores/opencode-data.test.ts
+++ b/packages/ui/src/stores/opencode-data.test.ts
@@ -8,6 +8,7 @@ import { applyOpenCodeDataEvent, destroyOpenCodeData, getOpenCodeMessageRevision
 import { emptyLatestWindow } from "./message-v2/message-window.ts"
 import { getRootClient } from "./opencode-client.ts"
 import { sdkManager } from "../lib/sdk-manager.ts"
+import { sseManager } from "../lib/sse-manager.ts"
 
 function deferred<T>() {
   let resolve!: (value: T) => void
@@ -66,6 +67,34 @@ describe("OpenCode data projection", () => {
     }
   })
 
+  it("projects streamed-step timing and authoritative assistant content replacements", () => {
+    const instanceId = "opencode-data-content-update"
+    const sessionId = "session"
+    const base = { sessionID: sessionId, assistantMessageID: "assistant" }
+    const apply = (type: string, data: Record<string, unknown>, created: number) =>
+      applyOpenCodeDataEvent(instanceId, "/work", { id: type, type, created, data } as any)
+
+    try {
+      apply("session.step.started", { ...base, agent: "build", model: { providerID: "provider", id: "model" } }, 1)
+      apply("session.text.started", base, 2)
+      apply("session.text.delta", { ...base, ordinal: 0, delta: "draft" }, 3)
+      apply("session.step.streamed", base, 4)
+      const data = apply("session.message.content.updated", {
+        sessionID: sessionId,
+        messageID: "assistant",
+        content: [{ type: "text", text: "edited" }],
+      }, 5)
+      projectOpenCodeMessages(instanceId, sessionId, data)
+
+      const store = messageStoreBus.getOrCreate(instanceId)
+      assert.equal((store.getMessage("assistant")?.parts["assistant-text-0"]?.data as any)?.text, "edited")
+      assert.equal(store.getMessageInfo("assistant")?.time?.streamed, 4)
+    } finally {
+      destroyOpenCodeData(instanceId)
+      if (messageStoreBus.getInstance(instanceId)) messageStoreBus.unregisterInstance(instanceId)
+    }
+  })
+
   it("merges the first live event into REST-loaded history", () => {
     const instanceId = "opencode-data-rest-history"
     const sessionId = "session"
@@ -922,9 +951,10 @@ describe("OpenCode data projection", () => {
     }
   })
 
-  it("projects a rotation-boundary model selection once without a redundant message fetch", async () => {
+  it("projects a rotation-boundary model selection with exactly one authoritative message fetch", async () => {
     const instanceId = "opencode-data-single-side-effect"
     const sessionId = "session"
+    sseManager.seedStatus(instanceId, "connected")
     const client = getRootClient(instanceId)
     let reads = 0
     let applied = 0
@@ -957,9 +987,10 @@ describe("OpenCode data projection", () => {
       projectOpenCodeMessages(instanceId, sessionId, data)
       await new Promise<void>((resolve) => setImmediate(resolve))
 
-      // beta-19271 projects this self-contained event synchronously; the
-      // obsolete HTTP-fetch expectation predates the client lock refresh.
-      assert.equal(reads, 0)
+      // With a connected transport, beta-19271 inserts the event immediately
+      // and refreshes its authoritative message once. Rotation must not replay
+      // the event and duplicate that SDK-owned refresh.
+      assert.equal(reads, 1)
       assert.equal(applied, 1)
       assert.ok(messageStoreBus.getOrCreate(instanceId).getSessionMessageIds(sessionId).includes("model"))
     } finally {
diff --git a/packages/ui/src/stores/opencode-data.ts b/packages/ui/src/stores/opencode-data.ts
index ea0a0939f..daeb6f82b 100644
--- a/packages/ui/src/stores/opencode-data.ts
+++ b/packages/ui/src/stores/opencode-data.ts
@@ -7,6 +7,9 @@ import { normalizeSessionMessage } from "./message-v2/normalizers"
 import { MESSAGE_WINDOW_PAGE_SIZE } from "./message-v2/message-window"
 import { messageStoreBus } from "./message-v2/bus"
 import { sseManager } from "../lib/sse-manager"
+import { getLogger } from "../lib/logger"
+
+const log = getLogger("session")
 
 type DataEntry = {
   data: Data
@@ -130,6 +133,7 @@ function createDataEntry(instanceId: string, directory: string): DataEntry {
       connection: {
         status: () => sseManager.getStatuses().get(instanceId) === "connected" ? "connected" : "reconnecting",
       },
+      onError: (error) => log.warn("Failed to refresh OpenCode projection", { instanceId, error }),
     })
     const emit = (details: OpenCodeEvent) => {
       for (const listener of listeners) listener({ name: details.type, details })
diff --git a/packages/ui/src/stores/plugin-activation.test.ts b/packages/ui/src/stores/plugin-activation.test.ts
new file mode 100644
index 000000000..97040ae78
--- /dev/null
+++ b/packages/ui/src/stores/plugin-activation.test.ts
@@ -0,0 +1,54 @@
+import assert from "node:assert/strict"
+import { describe, it } from "node:test"
+import { waitForPluginActivation } from "./plugin-activation.ts"
+
+function deferred() {
+  let resolve!: () => void
+  const promise = new Promise<void>((done) => { resolve = done })
+  return { promise, resolve }
+}
+
+describe("plugin activation", () => {
+  it("coalesces concurrent waits for the same client and location", async () => {
+    const gate = deferred()
+    const calls: unknown[] = []
+    const client = {
+      plugin: {
+        awaitActivation: async (input: unknown) => {
+          calls.push(input)
+          await gate.promise
+        },
+      },
+    } as any
+
+    const first = waitForPluginActivation(client, { directory: "/repo", workspaceID: "worktree" })
+    const duplicate = waitForPluginActivation(client, { directory: "/repo", workspaceID: "worktree" })
+    const other = waitForPluginActivation(client, { directory: "/other" })
+    await Promise.resolve()
+
+    assert.equal(first, duplicate)
+    assert.deepEqual(calls, [
+      { location: { directory: "/repo", workspace: "worktree" } },
+      { location: { directory: "/other" } },
+    ])
+
+    gate.resolve()
+    await Promise.all([first, duplicate, other])
+  })
+
+  it("falls back to catalog reads and retries after an unsupported wait route", async () => {
+    let calls = 0
+    const client = {
+      plugin: {
+        awaitActivation: async () => {
+          calls += 1
+          throw new Error("unsupported")
+        },
+      },
+    } as any
+
+    await waitForPluginActivation(client, { directory: "/repo" })
+    await waitForPluginActivation(client, { directory: "/repo" })
+    assert.equal(calls, 2)
+  })
+})
diff --git a/packages/ui/src/stores/plugin-activation.ts b/packages/ui/src/stores/plugin-activation.ts
new file mode 100644
index 000000000..369f9f794
--- /dev/null
+++ b/packages/ui/src/stores/plugin-activation.ts
@@ -0,0 +1,47 @@
+import type { LocationRef, OpenCodeClient } from "@opencode-ai/client"
+import { getLogger } from "../lib/logger"
+import { toRequestLocation } from "./request-locations"
+
+const log = getLogger("api")
+const pendingByClient = new WeakMap<OpenCodeClient, Map<string, Promise<void>>>()
+
+function locationKey(location?: LocationRef): string {
+  return `${location?.directory ?? ""}\0${location?.workspaceID ?? ""}`
+}
+
+/**
+ * Waits for the current plugin generation before reading a location-scoped catalog.
+ * A lagging runtime may not expose the beta route yet, so catalog reads remain the
+ * fallback authority and a later plugin.updated event can reconcile them.
+ */
+export function waitForPluginActivation(client: OpenCodeClient, location?: LocationRef): Promise<void> {
+  const awaitActivation = client.plugin?.awaitActivation
+  if (typeof awaitActivation !== "function") return Promise.resolve()
+
+  const key = locationKey(location)
+  let pending = pendingByClient.get(client)
+  const existing = pending?.get(key)
+  if (existing) return existing
+  if (!pending) {
+    pending = new Map()
+    pendingByClient.set(client, pending)
+  }
+
+  const requests = pending
+  const request = Promise.resolve()
+    .then(() => awaitActivation.call(
+      client.plugin,
+      location ? { location: toRequestLocation(location) } : undefined,
+    ))
+    .catch((error) => {
+      log.warn("Failed to wait for plugin activation; continuing with authoritative catalog reads", {
+        location,
+        error,
+      })
+    })
+    .finally(() => {
+      if (requests.get(key) === request) requests.delete(key)
+    })
+  requests.set(key, request)
+  return request
+}
diff --git a/packages/ui/src/stores/preferences.tsx b/packages/ui/src/stores/preferences.tsx
index 7aadfdce4..95fd01338 100644
--- a/packages/ui/src/stores/preferences.tsx
+++ b/packages/ui/src/stores/preferences.tsx
@@ -10,15 +10,20 @@ import {
 import { getLogger } from "../lib/logger"
 import { loadSpeechCapabilities, resetSpeechCapabilities } from "./speech"
 import { buildSpeechPatch } from "../lib/speech-patch"
+import { normalizeAppearancePreferences, selectAppearancePalette, type Appearance } from "../lib/appearance-preferences"
 import {
+  isColorSchemeColors,
   normalizeColorScheme,
-  validateColorSchemeColors,
+  toColorSchemeMergePatch,
   type ColorSchemeColors,
+  type ColorSchemeId,
   type NormalizedColorScheme,
 } from "../lib/theme-scheme"
 import {
   createColorSchemePresetId,
   MAX_COLOR_SCHEME_PRESETS,
+  normalizeColorSchemeOverrides,
+  isDefaultCustomColors,
   normalizeColorSchemePresets,
   type UserColorSchemePresets,
 } from "../lib/color-scheme-presets"
@@ -165,9 +170,11 @@ interface ServerConfigBucket {
 }
 
 interface UiStateBucket {
+  appearancePreferences?: unknown
   theme?: ThemePreference
   colorScheme?: unknown
   customColorScheme?: unknown
+  colorSchemeOverrides?: unknown
   colorSchemePresets?: unknown
   activeColorSchemePresetId?: string
   recentFolders?: RecentFolder[]
@@ -582,14 +589,25 @@ const [uiStateBucket, setUiStateBucket] = createSignal<UiStateBucket>({})
 const [isLoaded, setIsLoaded] = createSignal(false)
 
 const uiSettings = createMemo<UiSettings>(() => normalizeUiSettings(uiConfigBucket().settings))
-const themePreference = createMemo<ThemePreference>(() => uiStateBucket().theme ?? uiConfigBucket().theme ?? "system")
-const colorSchemePreference = createMemo(() => normalizeColorScheme(uiStateBucket().colorScheme ?? uiConfigBucket().colorScheme, themePreference()))
+const legacyThemePreference = createMemo<ThemePreference>(() => uiStateBucket().theme ?? uiConfigBucket().theme ?? "system")
+const colorSchemeOverrides = createMemo(() => normalizeColorSchemeOverrides(uiStateBucket().colorSchemeOverrides))
+const colorSchemePreference = createMemo(() => {
+  const scheme = normalizeColorScheme(uiStateBucket().colorScheme ?? uiConfigBucket().colorScheme, legacyThemePreference())
+  if (scheme.id === "custom") {
+    return scheme.appearance === "dark" && !uiStateBucket().activeColorSchemePresetId && isDefaultCustomColors(scheme.colors)
+      ? normalizeColorScheme("basalt")
+      : scheme
+  }
+  if (scheme.id === "system") return scheme
+  const colors = colorSchemeOverrides()[scheme.id]
+  return colors ? normalizeColorScheme({ ...scheme, colors }) : scheme
+})
 const customColorSchemePreference = createMemo(() => {
   const state = uiStateBucket()
   const config = uiConfigBucket()
   const custom = state.customColorScheme
     ?? config.customColorScheme
-    ?? (colorSchemePreference().id === "custom" ? state.colorScheme ?? config.colorScheme : undefined)
+    ?? (colorSchemePreference().id === "custom" && !state.activeColorSchemePresetId ? state.colorScheme ?? config.colorScheme : undefined)
   const value = typeof custom === "object" && custom !== null && !Array.isArray(custom)
     ? { ...(custom as Record<string, unknown>), id: "custom" }
     : { id: "custom" }
@@ -600,6 +618,22 @@ const activeColorSchemePresetId = createMemo(() => {
   const id = uiStateBucket().activeColorSchemePresetId
   return typeof id === "string" && colorSchemePresets()[id] ? id : undefined
 })
+const appearancePreferences = createMemo(() => normalizeAppearancePreferences(
+  uiStateBucket().appearancePreferences, colorSchemePreference(), activeColorSchemePresetId(),
+))
+const themePreference = createMemo(() => appearancePreferences().mode)
+function getAppearancePalette(appearance: Appearance): NormalizedColorScheme {
+  const slot = appearancePreferences()[appearance]
+  const preset = slot.presetId ? colorSchemePresets()[slot.presetId] : undefined
+  if (preset?.appearance === appearance) return normalizeColorScheme({ id: "custom", ...preset })
+  const scheme = slot.scheme
+  const colors = scheme.id !== "custom" && scheme.id !== "system" ? colorSchemeOverrides()[scheme.id] : undefined
+  return colors ? normalizeColorScheme({ ...scheme, colors }) : scheme
+}
+function getAppearancePresetId(appearance: Appearance): string | undefined {
+  const id = appearancePreferences()[appearance].presetId
+  return id && colorSchemePresets()[id]?.appearance === appearance ? id : undefined
+}
 const serverSettings = createMemo(() => normalizeServerConfig(serverConfigBucket()))
 const uiState = createMemo(() => normalizeUiState(uiStateBucket()))
 
@@ -733,22 +767,33 @@ async function setProviderModelVisibility(providerId: string, preference: ModelV
   await write
 }
 
-function setThemePreference(preference: ThemePreference): void {
-  void setColorSchemePreference(normalizeColorScheme(preference === "dark" ? "classic" : preference))
+function setThemePreference(preference: ThemePreference): Promise<void> {
+  const write = colorSchemeWriteQueue.then(() => patchStateOwner("ui", {
+    appearancePreferences: { ...appearancePreferences(), mode: preference }, theme: preference,
+  }))
+  colorSchemeWriteQueue = write.then(() => undefined, () => undefined)
+  return write
 }
 
 let colorSchemeWriteQueue = Promise.resolve()
 
+function paletteSelectionPatch(scheme: NormalizedColorScheme, presetId: string | null = null) {
+  return {
+    appearancePreferences: selectAppearancePalette(appearancePreferences(), scheme, presetId),
+    theme: scheme.appearance === "system" ? "system" : themePreference(),
+  }
+}
+
 function setColorSchemePreference(preference: NormalizedColorScheme): Promise<void> {
   const normalized = normalizeColorScheme(preference)
   const legacyTheme: ThemePreference = normalized.appearance === "system" ? "system" : normalized.appearance
   const patch = {
     theme: legacyTheme,
-    colorScheme: normalized,
+    colorScheme: toColorSchemeMergePatch(normalized),
     ...(normalized.id === "custom" ? { customColorScheme: normalized } : {}),
     activeColorSchemePresetId: null,
   }
-  const write = colorSchemeWriteQueue.then(() => patchStateOwner("ui", patch))
+  const write = colorSchemeWriteQueue.then(() => patchStateOwner("ui", { ...patch, ...paletteSelectionPatch(normalized) }))
   colorSchemeWriteQueue = write.then(() => undefined, () => undefined)
   return write.then(() => undefined).catch((error) => {
     log.error("Failed to set color scheme", error)
@@ -761,32 +806,70 @@ function selectColorSchemePreset(id: string): Promise<void> {
   if (!preset) return Promise.resolve()
   const scheme = normalizeColorScheme({ id: "custom", appearance: preset.appearance, colors: preset.colors })
   const write = colorSchemeWriteQueue.then(() => patchStateOwner("ui", {
-    theme: preset.appearance,
     colorScheme: scheme,
-    customColorScheme: scheme,
     activeColorSchemePresetId: id,
+    ...paletteSelectionPatch(scheme, id),
   }))
   colorSchemeWriteQueue = write.then(() => undefined, () => undefined)
   return write.then(() => undefined)
 }
 
-function saveColorSchemePreset(name: string, appearance: "light" | "dark", colors: Readonly<ColorSchemeColors>): Promise<string> {
+function saveColorSchemeOverride(id: Exclude<ColorSchemeId, "custom">, appearance: "light" | "dark", colors: Readonly<ColorSchemeColors>): Promise<void> {
+  if (!isColorSchemeColors(colors)) return Promise.reject(new Error("Invalid color scheme override"))
+  if (id === "system") return setColorSchemePreference(normalizeColorScheme({ id: "custom", appearance, colors }))
+  const scheme = normalizeColorScheme({ id, appearance, colors })
+  const write = colorSchemeWriteQueue.then(() => patchStateOwner("ui", {
+    colorScheme: scheme,
+    colorSchemeOverrides: { [id]: { ...colors } },
+    activeColorSchemePresetId: null,
+    ...paletteSelectionPatch(scheme),
+  }))
+  colorSchemeWriteQueue = write.then(() => undefined, () => undefined)
+  return write.then(() => undefined)
+}
+
+function resetColorSchemeOverride(id: Exclude<ColorSchemeId, "custom">): Promise<void> {
+  const scheme = normalizeColorScheme(id)
+  const write = colorSchemeWriteQueue.then(() => patchStateOwner("ui", {
+    colorScheme: toColorSchemeMergePatch(scheme),
+    colorSchemeOverrides: { [id]: null },
+    activeColorSchemePresetId: null,
+    ...paletteSelectionPatch(scheme),
+  }))
+  colorSchemeWriteQueue = write.then(() => undefined, () => undefined)
+  return write.then(() => undefined)
+}
+
+function saveColorSchemePreset(name: string, appearance: "light" | "dark", colors: Readonly<ColorSchemeColors>, presetId?: string): Promise<string> {
   const trimmedName = name.trim().slice(0, 80)
-  if (!trimmedName || !validateColorSchemeColors(colors)) return Promise.reject(new Error("Invalid color scheme preset"))
-  if (Object.keys(colorSchemePresets()).length >= MAX_COLOR_SCHEME_PRESETS) return Promise.reject(new Error("Color scheme preset limit reached"))
-  const id = createColorSchemePresetId()
+  if (!trimmedName || !isColorSchemeColors(colors)) return Promise.reject(new Error("Invalid color scheme preset"))
+  if (!presetId && Object.keys(colorSchemePresets()).length >= MAX_COLOR_SCHEME_PRESETS) return Promise.reject(new Error("Color scheme preset limit reached"))
+  if (presetId && !colorSchemePresets()[presetId]) return Promise.reject(new Error("Unknown color scheme preset"))
+  const id = presetId ?? createColorSchemePresetId()
   const scheme = normalizeColorScheme({ id: "custom", appearance, colors })
   const write = colorSchemeWriteQueue.then(() => patchStateOwner("ui", {
-    theme: appearance,
     colorScheme: scheme,
-    customColorScheme: scheme,
     colorSchemePresets: { [id]: { name: trimmedName, appearance, colors: { ...colors } } },
     activeColorSchemePresetId: id,
+    ...paletteSelectionPatch(scheme, id),
   }))
   colorSchemeWriteQueue = write.then(() => undefined, () => undefined)
   return write.then(() => id)
 }
 
+function deleteColorSchemePreset(id: string): Promise<void> {
+  if (!colorSchemePresets()[id]) return Promise.resolve()
+  const write = colorSchemeWriteQueue.then(() => patchStateOwner("ui", {
+    colorSchemePresets: { [id]: null },
+    appearancePreferences: Object.fromEntries((["light", "dark"] as const)
+      .filter((appearance) => appearancePreferences()[appearance].presetId === id)
+      .map((appearance) => [appearance, { scheme: getAppearancePalette(appearance), presetId: null }])),
+    ...(activeColorSchemePresetId() === id ? { activeColorSchemePresetId: null } : {}),
+  }))
+  colorSchemeWriteQueue = write.then(() => undefined, () => undefined)
+  return write.then(() => undefined)
+}
+
  async function setListeningMode(mode: ListeningMode): Promise<void> {
    if (serverSettings().listeningMode === mode) return
    await patchConfigOwner("server", { listeningMode: mode })
@@ -1101,13 +1184,19 @@ interface ConfigContextValue {
   providerModelVisibilitySaveFailed: typeof providerModelVisibilitySaveFailed
   themePreference: typeof themePreference
   setThemePreference: typeof setThemePreference
+  getAppearancePalette: typeof getAppearancePalette
+  getAppearancePresetId: typeof getAppearancePresetId
   colorSchemePreference: typeof colorSchemePreference
   customColorSchemePreference: typeof customColorSchemePreference
+  colorSchemeOverrides: typeof colorSchemeOverrides
   colorSchemePresets: typeof colorSchemePresets
   activeColorSchemePresetId: typeof activeColorSchemePresetId
   setColorSchemePreference: typeof setColorSchemePreference
   selectColorSchemePreset: typeof selectColorSchemePreset
+  saveColorSchemeOverride: typeof saveColorSchemeOverride
+  resetColorSchemeOverride: typeof resetColorSchemeOverride
   saveColorSchemePreset: typeof saveColorSchemePreset
+  deleteColorSchemePreset: typeof deleteColorSchemePreset
 
   // server-owned stable config
   serverSettings: typeof serverSettings
@@ -1173,12 +1262,18 @@ const configContextValue: ConfigContextValue = {
   themePreference,
   setThemePreference,
   colorSchemePreference,
+  getAppearancePalette,
+  getAppearancePresetId,
   customColorSchemePreference,
+  colorSchemeOverrides,
   colorSchemePresets,
   activeColorSchemePresetId,
   setColorSchemePreference,
   selectColorSchemePreset,
+  saveColorSchemeOverride,
+  resetColorSchemeOverride,
   saveColorSchemePreset,
+  deleteColorSchemePreset,
   serverSettings,
   setListeningMode,
   updateEnvironmentVariables,
@@ -1272,12 +1367,18 @@ export {
   themePreference,
   setThemePreference,
   colorSchemePreference,
+  getAppearancePalette,
+  getAppearancePresetId,
   customColorSchemePreference,
+  colorSchemeOverrides,
   colorSchemePresets,
   activeColorSchemePresetId,
   setColorSchemePreference,
   selectColorSchemePreset,
+  saveColorSchemeOverride,
+  resetColorSchemeOverride,
   saveColorSchemePreset,
+  deleteColorSchemePreset,
   updatePreferences,
   setProviderModelVisibility,
   getProviderModelVisibilityPreference,
diff --git a/packages/ui/src/stores/session-actions.test.ts b/packages/ui/src/stores/session-actions.test.ts
index 4b7f0dca9..b09cb9ee3 100644
--- a/packages/ui/src/stores/session-actions.test.ts
+++ b/packages/ui/src/stores/session-actions.test.ts
@@ -201,6 +201,8 @@ describe("voice instruction sync", () => {
       text: "",
       delivery: "steer",
     })
+    assert.equal(sessions().get(instanceId)?.get(sessionId)?.generationRecovery, undefined)
+    assert.equal(sessions().get(instanceId)?.get(sessionId)?.status, "idle")
   })
 
   it("removes a stale instruction before a shell command", async () => {
diff --git a/packages/ui/src/stores/session-actions.ts b/packages/ui/src/stores/session-actions.ts
index f0f6b1eed..0c8026b69 100644
--- a/packages/ui/src/stores/session-actions.ts
+++ b/packages/ui/src/stores/session-actions.ts
@@ -42,15 +42,22 @@ function serializeSessionAction<T>(instanceId: string, sessionId: string, action
   return settled
 }
 
-function admitSessionAction<T>(instanceId: string, sessionId: string, action: () => Promise<T>): Promise<T> {
+function admitSessionAction<T>(
+  instanceId: string,
+  sessionId: string,
+  action: () => Promise<T>,
+  options?: { optimisticGeneration?: boolean },
+): Promise<T> {
   return serializeSessionAction(instanceId, sessionId, async () => {
-    const admission = beginSessionGenerationAdmission(instanceId, sessionId)
+    const admission = options?.optimisticGeneration === false
+      ? undefined
+      : beginSessionGenerationAdmission(instanceId, sessionId)
     try {
       const result = await action()
-      admission.complete()
+      admission?.complete()
       return result
     } catch (error) {
-      admission.rollback()
+      admission?.rollback()
       throw error
     }
   })
@@ -408,7 +415,7 @@ async function executeCustomCommand(
     const client = getRootClient(instanceId)
     await syncVoiceModeInstruction(client, instanceId, sessionId)
     await client.session.command({ sessionID: sessionId, command: commandName, text: args, delivery: "steer" })
-  })
+  }, { optimisticGeneration: false })
 }
 
 async function runShellCommand(instanceId: string, sessionId: string, command: string): Promise<void> {
diff --git a/packages/ui/src/stores/session-api.ts b/packages/ui/src/stores/session-api.ts
index 1f9fdf692..96962928a 100644
--- a/packages/ui/src/stores/session-api.ts
+++ b/packages/ui/src/stores/session-api.ts
@@ -83,11 +83,12 @@ import { mergeFetchedSessionRuntimeState, resolveAuthoritativeGenerationRecovery
 import { fetchCommands } from "./commands"
 import { toRequestLocation } from "./request-locations"
 import { getOpenCodeInstanceGeneration, getOpenCodeMessageRevision, getOpenCodeMutationRevision } from "./opencode-data"
+import { waitForPluginActivation } from "./plugin-activation"
 
 const log = getLogger("api")
 const sessionListRequestIds = new Map<string, number>()
 const catalogLocations = new Map<string, string>()
-const catalogRefreshes = new Map<string, { key: string; promise: Promise<void> }>()
+const catalogRefreshes = new Map<string, { key: string; promise: Promise<void>; pending: boolean }>()
 const agentRequestIds = new Map<string, number>()
 const providerRequestIds = new Map<string, number>()
 const agentRefreshes = new Map<string, { promise: Promise<boolean>; pending: boolean; cancelled: boolean }>()
@@ -147,27 +148,40 @@ function catalogLocationKey(location: LocationRef): string {
   return `${location.directory}\0${location.workspaceID ?? ""}`
 }
 
-async function refreshSessionCatalog(instanceId: string): Promise<void> {
+async function refreshSessionCatalog(instanceId: string, force = false): Promise<void> {
   const instance = instances().get(instanceId)
   if (!instance?.client) return
+  const client = instance.client
   const location = getActiveCatalogLocation(instanceId)
   const key = catalogLocationKey(location)
-  if (catalogLocations.get(instanceId) === key) return
+  if (!force && catalogLocations.get(instanceId) === key) return
   const existing = catalogRefreshes.get(instanceId)
-  if (existing?.key === key) return existing.promise
-  const promise = Promise.all([
-    fetchAgents(instanceId, location),
-    fetchProviders(instanceId, location),
-    fetchCommands(instanceId, instance.client, location),
-  ]).then((successes) => {
-    if (successes.every(Boolean) && catalogLocationKey(getActiveCatalogLocation(instanceId)) === key) {
-      catalogLocations.set(instanceId, key)
-    }
-  }).finally(() => {
-    if (catalogRefreshes.get(instanceId)?.promise === promise) catalogRefreshes.delete(instanceId)
+  if (existing?.key === key) {
+    if (force) existing.pending = true
+    return existing.promise
+  }
+  const state = { key, promise: Promise.resolve(), pending: false }
+  state.promise = (async () => {
+    let refresh = force
+    do {
+      state.pending = false
+      const successes = await Promise.all([
+        fetchAgents(instanceId, location, refresh),
+        fetchProviders(instanceId, location, refresh),
+        fetchCommands(instanceId, client, location),
+      ])
+      if (successes.every(Boolean) && catalogLocationKey(getActiveCatalogLocation(instanceId)) === key) {
+        catalogLocations.set(instanceId, key)
+      }
+      refresh = true
+    } while (state.pending
+      && catalogRefreshes.get(instanceId) === state
+      && catalogLocationKey(getActiveCatalogLocation(instanceId)) === key)
+  })().finally(() => {
+    if (catalogRefreshes.get(instanceId) === state) catalogRefreshes.delete(instanceId)
   })
-  catalogRefreshes.set(instanceId, { key, promise })
-  return promise
+  catalogRefreshes.set(instanceId, state)
+  return state.promise
 }
 
 function beginSessionListRequest(instanceId: string): number {
@@ -786,6 +800,7 @@ function toClientSessionV2(instanceId: string, apiSession: SDKSession, existingS
     location: apiSession.location,
     projectID: apiSession.projectID,
     subpath: apiSession.subpath,
+    metadata: apiSession.metadata ?? existingSession?.metadata,
     time: {
       ...apiSession.time,
     },
@@ -1098,6 +1113,7 @@ async function loadAgents(instanceId: string, location: LocationRef): Promise<bo
   try {
     log.info(`[HTTP] GET /agent.list for instance ${instanceId}`)
     const requestLocation = toRequestLocation(location)
+    await waitForPluginActivation(rootClient, location)
     const response = await rootClient.agent.list({ location: requestLocation })
     const agentsById = new Map((response.data ?? []).map((agent) => [agent.id, agent]))
     await Promise.all(["build", "plan"].filter((id) => !agentsById.has(id)).map(async (id) => {
@@ -1172,6 +1188,7 @@ async function loadProviders(instanceId: string, location: LocationRef): Promise
   try {
     log.info(`[HTTP] GET /provider.list for instance ${instanceId}`)
     const request = { location: toRequestLocation(location) }
+    await waitForPluginActivation(rootClient, location)
     const [response, models, defaultModel] = await Promise.all([
       rootClient.provider.list(request),
       rootClient.model.list(request),
diff --git a/packages/ui/src/stores/session-events.ts b/packages/ui/src/stores/session-events.ts
index d43731c86..6d28e9289 100644
--- a/packages/ui/src/stores/session-events.ts
+++ b/packages/ui/src/stores/session-events.ts
@@ -149,6 +149,7 @@ function handleNativeSessionEvent(instanceId: string, event: NativeSessionEvent)
   if (
     event.type === "session.execution.started" ||
     event.type === "session.step.started" ||
+    event.type === "session.step.streamed" ||
     event.type.startsWith("session.text.") ||
     event.type.startsWith("session.reasoning.") ||
     event.type.startsWith("session.tool.")
@@ -463,6 +464,7 @@ function handleSessionUpdate(
       idleSince: null,
       version: info.version || "0",
       projectID: (info as any).projectID ?? "",
+      metadata: info.metadata,
       cost: (info as any).cost ?? 0,
       tokens: (info as any).tokens ?? { input: 0, output: 0, reasoning: 0, cache: { read: 0, write: 0 } },
       location: (info as any).location ?? { directory: instances().get(instanceId)?.folder ?? "" },
@@ -500,6 +502,7 @@ function handleSessionUpdate(
       ...existingSession,
       title: info.title || existingSession.title,
       parentId: info.parentID ?? existingSession.parentId,
+      metadata: info.metadata ?? existingSession.metadata,
       status: existingSession.status ?? "idle",
       retry: existingSession.retry ?? null,
       time: mergedTime,
diff --git a/packages/ui/src/stores/session-generation-recovery.test.ts b/packages/ui/src/stores/session-generation-recovery.test.ts
index ec5e3988e..76aedbb6f 100644
--- a/packages/ui/src/stores/session-generation-recovery.test.ts
+++ b/packages/ui/src/stores/session-generation-recovery.test.ts
@@ -4,12 +4,12 @@ import type { Session } from "../types/session.ts"
 import { getPersistedGenerationRecovery, mergeFetchedSessionRuntimeState, resolveAuthoritativeGenerationRecovery, resolveHydratedGenerationRecovery } from "./session-generation-recovery.ts"
 const session = (state: Partial<Session> = {}): Session => ({
   id: "session", instanceId: "instance", parentId: null, title: "Session", agent: "build",
-  model: { providerId: "provider", modelId: "model" }, version: "1",
+  model: { providerId: "provider", modelId: "model" },
   time: { created: 1, updated: 1 }, status: "idle", ...state,
 } as Session)
 const runtime = (value: Session) => ({
   title: value.title, status: value.status, runtimeStatusKnown: value.runtimeStatusKnown,
-  generationRecovery: value.generationRecovery, token: value.generationAdmissionToken, source: value.metadata?.source, updated: value.time.updated,
+  generationRecovery: value.generationRecovery, token: value.generationAdmissionToken, source: value.version, updated: value.time.updated,
 })
 describe("session generation recovery", () => {
   it("resolves hydrated, authoritative, and persisted recovery states", () => {
@@ -33,8 +33,8 @@ describe("session generation recovery", () => {
   const mergeCases = [
     ["newer SSE state supersedes a stale fetch", {
       captured: session({ title: "Captured", runtimeStatusKnown: false }),
-      fetched: session({ title: "Stale fetch", metadata: { source: "fetch" }, time: { created: 1, updated: 2 }, runtimeStatusKnown: true, generationRecovery: "interrupted" }),
-      latest: session({ title: "New SSE title", metadata: { source: "sse" }, time: { created: 1, updated: 3 }, status: "working", runtimeStatusKnown: true, generationRecovery: null }),
+      fetched: session({ title: "Stale fetch", version: "fetch", time: { created: 1, updated: 2 }, runtimeStatusKnown: true, generationRecovery: "interrupted" }),
+      latest: session({ title: "New SSE title", version: "sse", time: { created: 1, updated: 3 }, status: "working", runtimeStatusKnown: true, generationRecovery: null }),
       expected: { title: "New SSE title", status: "working", runtimeStatusKnown: true, generationRecovery: null, token: undefined, source: "sse", updated: 3 },
     }],
     ["in-flight admission survives a fetch snapshot", {
@@ -46,7 +46,7 @@ describe("session generation recovery", () => {
     ["active fetch wins after a captured admission completes", {
       captured: session({ title: "Captured", runtimeStatusKnown: true, generationRecovery: "interrupted" }),
       fetched: session({ title: "Fetched", status: "working", runtimeStatusKnown: true, generationRecovery: null }),
-      latest: session({ title: "New SSE title", metadata: { source: "sse" }, time: { created: 1, updated: 3 }, runtimeStatusKnown: false, generationRecovery: "pending" }),
+      latest: session({ title: "New SSE title", version: "sse", time: { created: 1, updated: 3 }, runtimeStatusKnown: false, generationRecovery: "pending" }),
       expected: { title: "New SSE title", status: "working", runtimeStatusKnown: true, generationRecovery: null, token: undefined, source: "sse", updated: 3 },
     }],
     ["active authority clears a captured admission token", {
diff --git a/packages/ui/src/stores/session-native-events.test.ts b/packages/ui/src/stores/session-native-events.test.ts
index a402e3bc6..584bd54ef 100644
--- a/packages/ui/src/stores/session-native-events.test.ts
+++ b/packages/ui/src/stores/session-native-events.test.ts
@@ -4,12 +4,55 @@ import { describe, it } from "node:test"
 import { sdkManager } from "../lib/sdk-manager.ts"
 import { addInstance, handleInstanceInvalidation, removeInstance } from "./instances.ts"
 import { messageStoreBus } from "./message-v2/bus.ts"
-import { handleNativeSessionEvent, handleSessionStatus } from "./session-events.ts"
+import { handleNativeSessionEvent, handleSessionStatus, handleSessionUpdate } from "./session-events.ts"
 import { clearInstanceDeletedSessionAuthority, messagesLoaded, sessions, setActiveSession, setMessagesLoaded, setSessions } from "./session-state.ts"
 
 const delay = (duration: number) => new Promise<void>((resolve) => setTimeout(resolve, duration))
 
 describe("native session event reducer", () => {
+  it("preserves durable session metadata and recognizes the streamed step boundary", () => {
+    const instanceId = "native-session-metadata"
+    const sessionId = "session"
+    const client = { session: { active: async () => ({}) } } as any
+    ;(sdkManager as any).clients.set(`${instanceId}:/workspaces/${instanceId}/instance`, client)
+    addInstance({ id: instanceId, folder: "/work", port: 0, pid: 0, proxyPath: "", status: "ready", client })
+
+    try {
+      handleSessionUpdate(instanceId, {
+        id: "created",
+        type: "session.created",
+        created: 1,
+        durable: { aggregateID: sessionId, seq: 1, version: 1 },
+        location: { directory: "/work" },
+        data: {
+          sessionID: sessionId,
+          title: "Session",
+          version: "1",
+          metadata: { client: "codenomad", restore: { window: "primary" } },
+        },
+      } as any)
+      assert.deepEqual(sessions().get(instanceId)?.get(sessionId)?.metadata, {
+        client: "codenomad",
+        restore: { window: "primary" },
+      })
+
+      handleNativeSessionEvent(instanceId, {
+        id: "streamed",
+        type: "session.step.streamed",
+        created: 2,
+        durable: { aggregateID: sessionId, seq: 2, version: 1 },
+        location: { directory: "/work" },
+        data: { sessionID: sessionId, assistantMessageID: "assistant" },
+      } as any)
+      assert.equal(sessions().get(instanceId)?.get(sessionId)?.status, "working")
+    } finally {
+      setSessions((previous) => { const next = new Map(previous); next.delete(instanceId); return next })
+      clearInstanceDeletedSessionAuthority(instanceId)
+      removeInstance(instanceId, { authoritative: false })
+      sdkManager.destroyClientsForInstance(instanceId)
+    }
+  })
+
   it("projects text immediately, coalesces compaction deltas, and keeps terminal state authoritative", async () => {
     const instanceId = "native-compaction-delta"
     const sessionId = "session"
diff --git a/packages/ui/src/stores/session-request-authority.test.ts b/packages/ui/src/stores/session-request-authority.test.ts
index 537137025..82986851f 100644
--- a/packages/ui/src/stores/session-request-authority.test.ts
+++ b/packages/ui/src/stores/session-request-authority.test.ts
@@ -5,7 +5,7 @@ import { sdkManager } from "../lib/sdk-manager.ts"
 import type { Session } from "../types/session.ts"
 import { addInstance, instances, refreshVolatileInstanceState, removeInstance, updateInstance } from "./instances.ts"
 import { messageStoreBus } from "./message-v2/bus.ts"
-import { getCommands } from "./commands.ts"
+import { fetchCommands, getCommands } from "./commands.ts"
 import { beginMessageHistoryTraversal, fetchAgents, fetchProviders, fetchSessions, forkSession, hasMoreMessages, hydrateRestoredSessionChain, invalidateMessageHistoryTraversal, isLatestMessageWindow, loadLatestMessageWindow, loadMessages, loadMoreMessages, loadMoreSessions, loadNewerMessageWindow, loadOldestMessageWindow, removeSessionRuntimeState, searchSessions } from "./session-api.ts"
 import { handleNativeSessionEvent, handleSessionUpdate } from "./session-events.ts"
 import { getInstanceMetadata, setInstanceMetadata } from "./instance-metadata.ts"
@@ -73,6 +73,69 @@ function setup(instanceId: string) {
 }
 
 describe("session request authority", () => {
+  it("waits for plugin activation before loading every location catalog", async () => {
+    const instanceId = "catalog-plugin-activation"
+    const { client, cleanup } = setup(instanceId)
+    const activation = deferred<void>()
+    const calls = { activation: 0, agents: 0, providers: 0, models: 0, defaults: 0, commands: 0 }
+    ;(client as any).plugin = {
+      awaitActivation: async ({ location }: any) => {
+        calls.activation += 1
+        assert.deepEqual(location, { directory: "/work" })
+        await activation.promise
+      },
+    }
+    ;(client as any).agent = {
+      list: async () => {
+        calls.agents += 1
+        return { data: [
+          { id: "build", name: "Build", mode: "primary" },
+          { id: "plan", name: "Plan", mode: "primary" },
+        ] }
+      },
+    }
+    ;(client as any).provider = {
+      list: async () => {
+        calls.providers += 1
+        return { data: [{ id: "provider", name: "Provider" }] }
+      },
+    }
+    ;(client as any).model = {
+      list: async () => {
+        calls.models += 1
+        return { data: [{ id: "model", providerID: "provider", name: "Model", cost: [{}], limit: {}, variants: [] }] }
+      },
+      default: async () => {
+        calls.defaults += 1
+        return { data: null }
+      },
+    }
+    ;(client as any).command = {
+      list: async () => {
+        calls.commands += 1
+        return { data: [] }
+      },
+    }
+
+    try {
+      const location = { directory: "/work" }
+      const requests = [
+        fetchAgents(instanceId, location),
+        fetchProviders(instanceId, location),
+        fetchCommands(instanceId, client, location),
+      ]
+      await Promise.resolve()
+      assert.deepEqual(calls, { activation: 1, agents: 0, providers: 0, models: 0, defaults: 0, commands: 0 })
+
+      activation.resolve()
+      assert.deepEqual(await Promise.all(requests), [true, true, true])
+      assert.deepEqual(calls, { activation: 1, agents: 1, providers: 1, models: 1, defaults: 1, commands: 1 })
+    } finally {
+      activation.resolve()
+      cleanup()
+    }
+  })
+
   it("publishes a locally forked root in the catalog without waiting for SSE or a refresh", async () => {
     const instanceId = "fork-catalog-local"
     const { client, cleanup } = setup(instanceId)
@@ -1296,6 +1359,7 @@ describe("session request authority", () => {
     try {
       const first = fetchProviders(instanceId)
       const second = fetchProviders(instanceId)
+      await Promise.resolve()
       assert.deepEqual(calls, { provider: 1, model: 1, default: 1 })
       response.resolve()
       assert.deepEqual(await Promise.all([first, second]), [true, true])
@@ -1490,6 +1554,7 @@ describe("session request authority", () => {
       const firstRoot = fetchProviders(instanceId, { directory: "/work" })
       const otherLocation = fetchProviders(instanceId, { directory: "/other" })
       const returnedRoot = fetchProviders(instanceId, { directory: "/work" })
+      await Promise.resolve()
       assert.equal(calls, 2)
       other.resolve()
       assert.equal(await otherLocation, false)
diff --git a/packages/ui/src/stores/settings-screen.ts b/packages/ui/src/stores/settings-screen.ts
index ed1230167..c54116480 100644
--- a/packages/ui/src/stores/settings-screen.ts
+++ b/packages/ui/src/stores/settings-screen.ts
@@ -2,6 +2,7 @@ import { createSignal } from "solid-js"
 import { runtimeEnv } from "../lib/runtime-env"
 import { openNativePreferences, type NativePreferencesRequest } from "../lib/native/preferences-window"
 import { getLogger } from "../lib/logger"
+import { confirmSettingsDiscard } from "./settings-dirty-guard"
 
 export type SettingsSectionId =
   | "general"
@@ -20,7 +21,11 @@ const [settingsOpen, setSettingsOpen] = createSignal(false)
 const [activeSettingsSection, setActiveSettingsSection] = createSignal<SettingsSectionId>("general")
 const log = getLogger("actions")
 
-export async function openSettings(section: SettingsSectionId = "general") {
+export async function openSettings(section: SettingsSectionId = "general", toggle = false) {
+  if (toggle && settingsOpen()) {
+    if (await confirmSettingsDiscard()) setSettingsOpen(false)
+    return
+  }
   setActiveSettingsSection(section)
   if ((runtimeEnv.host === "electron" || runtimeEnv.host === "tauri") && runtimeEnv.windowContext === "local") {
     try {
@@ -31,7 +36,7 @@ export async function openSettings(section: SettingsSectionId = "general") {
         const { getActiveCatalogLocation } = await import("./sessions")
         request.location = getActiveCatalogLocation(instanceId)
       }
-      await openNativePreferences(request)
+      await openNativePreferences(request, toggle)
       return
     } catch (error) {
       log.warn("Native Preferences failed; opening settings in this window", error)
@@ -40,6 +45,8 @@ export async function openSettings(section: SettingsSectionId = "general") {
   setSettingsOpen(true)
 }
 
+export const toggleSettings = (section: SettingsSectionId = "general") => openSettings(section, true)
+
 export function closeSettings() {
   setSettingsOpen(false)
 }
diff --git a/packages/ui/src/styles/components/badges.css b/packages/ui/src/styles/components/badges.css
index cf259faa1..6547e4056 100644
--- a/packages/ui/src/styles/components/badges.css
+++ b/packages/ui/src/styles/components/badges.css
@@ -1,12 +1,28 @@
 /* Badge + status utilities */
+/* Shared geometry for tags and numeric labels, including caller-styled chips. */
+:is(.badge-shape,
+    .context-meter-values,
+    .metric-chip,
+    .message-step-usage-chip,
+    .message-queued-badge,
+    .dropdown-badge,
+    .selector-badge,
+    .settings-scope-badge,
+    .permission-center-item-chip,
+    .tool-call-todo-status,
+    .tool-call-todo-tag,
+    .git-change-section-count) {
+  border-radius: var(--chip-radius);
+}
+
 .neutral-badge {
-  @apply inline-flex items-center rounded px-1.5 py-0.5 text-xs font-normal;
+  @apply inline-flex items-center px-1.5 py-0.5 text-xs font-normal;
   background-color: var(--badge-neutral-bg);
   color: var(--badge-neutral-text);
 }
 
 .status-badge {
-  @apply inline-flex items-center gap-1.5 rounded px-2 py-1 text-xs font-medium;
+  @apply inline-flex items-center gap-1.5 px-2 py-1 text-xs font-medium;
 }
 
 .status-badge.ready {
diff --git a/packages/ui/src/styles/components/buttons.css b/packages/ui/src/styles/components/buttons.css
index 6ec9c5eb4..04b74f4a3 100644
--- a/packages/ui/src/styles/components/buttons.css
+++ b/packages/ui/src/styles/components/buttons.css
@@ -1,4 +1,15 @@
 /* Button component styles */
+.MuiTouchRipple-root,
+.MuiTouchRipple-ripple,
+.MuiTouchRipple-child {
+  border-radius: 0 !important;
+}
+
+/* Explicit round exception requested for overlay navigation. */
+.session-header-drawer-toggle .MuiIconButton-root {
+  border-radius: 50% !important;
+}
+
 .button-primary,
 button.button-primary {
   @apply px-3 text-sm;
diff --git a/packages/ui/src/styles/components/dropdown.css b/packages/ui/src/styles/components/dropdown.css
index 2e53a2429..e4c372499 100644
--- a/packages/ui/src/styles/components/dropdown.css
+++ b/packages/ui/src/styles/components/dropdown.css
@@ -1,6 +1,6 @@
 /* Dropdown utilities */
 .dropdown-surface {
-  @apply absolute w-full rounded-md shadow-lg z-50;
+  @apply absolute w-full shadow-lg z-50;
   background-color: var(--surface-base);
   border: 1px solid var(--border-base);
 }
@@ -57,7 +57,7 @@
 }
 
 .dropdown-badge {
-  @apply rounded px-1.5 py-0.5 text-xs font-normal;
+  @apply px-1.5 py-0.5 text-xs font-normal;
   background-color: var(--accent-primary);
   color: var(--text-inverted);
 }
diff --git a/packages/ui/src/styles/components/folder-home.css b/packages/ui/src/styles/components/folder-home.css
index 81b43e21b..1d5a341c1 100644
--- a/packages/ui/src/styles/components/folder-home.css
+++ b/packages/ui/src/styles/components/folder-home.css
@@ -58,7 +58,7 @@
 .folder-home-actions-column .button-primary {
   min-height: 3rem;
   padding: 0.75rem 1.5rem;
-  border-radius: 0.5rem;
+  border-radius: 0;
 }
 
 .folder-home-open-instance-button {
@@ -67,7 +67,7 @@
   align-items: center;
   padding: 0.125rem 0.5rem;
   border: 1px solid var(--border-base);
-  border-radius: 9999px;
+  border-radius: 0;
   background-color: var(--surface-base);
   color: var(--text-secondary);
   font-size: 0.625rem;
diff --git a/packages/ui/src/styles/components/native-titlebar.css b/packages/ui/src/styles/components/native-titlebar.css
index 196542c57..598a8fbab 100644
--- a/packages/ui/src/styles/components/native-titlebar.css
+++ b/packages/ui/src/styles/components/native-titlebar.css
@@ -4,8 +4,8 @@
   flex: 0 0 var(--chrome-height);
   min-width: 0;
   height: var(--chrome-height);
-  border-bottom: 1px solid var(--border-divider);
-  background: var(--surface-chrome);
+  border-bottom: 0;
+  background: var(--surface-shade-strong);
   color: var(--text-secondary);
   user-select: none;
   -webkit-app-region: drag;
@@ -119,3 +119,9 @@
     width: 40px;
   }
 }
+
+@media (max-width: 360px) {
+  .native-titlebar-menu-button {
+    padding-inline: 2px;
+  }
+}
diff --git a/packages/ui/src/styles/components/permission-notification.css b/packages/ui/src/styles/components/permission-notification.css
index 0d990083b..7e72a44e6 100644
--- a/packages/ui/src/styles/components/permission-notification.css
+++ b/packages/ui/src/styles/components/permission-notification.css
@@ -6,7 +6,7 @@
   align-items: center;
   gap: 0.25rem;
   padding: 0.25rem 0.5rem;
-  border-radius: 9999px;
+  border-radius: 0;
   border: 1px solid var(--session-status-permission-fg);
   background-color: var(--session-status-permission-bg);
   color: var(--session-status-permission-fg);
@@ -86,7 +86,7 @@
   min-width: 1.5rem;
   height: 1.5rem;
   padding: 0 0.4rem;
-  border-radius: 9999px;
+  border-radius: 0;
   background: var(--session-status-permission-bg);
   color: var(--session-status-permission-fg);
   border: 1px solid var(--session-status-permission-fg);
@@ -169,7 +169,6 @@
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-semibold);
   padding: 0.1rem 0.4rem;
-  border-radius: 9999px;
   border: 1px solid var(--session-status-permission-fg);
   background: var(--session-status-permission-bg);
   color: var(--session-status-permission-fg);
diff --git a/packages/ui/src/styles/components/prompt-context-controls.css b/packages/ui/src/styles/components/prompt-context-controls.css
new file mode 100644
index 000000000..cb3e7d995
--- /dev/null
+++ b/packages/ui/src/styles/components/prompt-context-controls.css
@@ -0,0 +1,72 @@
+.prompt-context-controls {
+  display: grid;
+  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr) minmax(0, 1fr);
+  min-width: 0;
+  width: 100%;
+}
+
+.prompt-context-controls[data-has-worktree="true"] {
+  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.85fr) minmax(0, 1.35fr) minmax(0, 1fr);
+}
+
+.prompt-context-controls .sidebar-selector,
+.prompt-context-controls .selector-trigger,
+.prompt-context-controls [data-model-selector-control],
+.prompt-context-controls [data-thinking-selector-control] {
+  min-width: 0;
+  width: 100%;
+}
+
+.prompt-context-controls .selector-trigger {
+  min-height: 28px;
+  padding-inline: var(--space-sm);
+  border: 0;
+  border-inline-end: 1px solid var(--border-divider);
+  background-color: transparent;
+}
+
+.prompt-context-controls .sidebar-selector:last-child .selector-trigger {
+  border-inline-end: 0;
+}
+
+.prompt-context-controls .selector-trigger:hover {
+  background-color: var(--surface-interactive-hover);
+}
+
+.prompt-context-controls .selector-trigger:focus-visible {
+  box-shadow: inset 0 0 0 1px var(--accent-primary);
+}
+
+.prompt-context-controls .selector-trigger-primary {
+  font-size: var(--font-size-xs);
+}
+
+.prompt-context-controls .selector-trigger-icon {
+  margin-inline-start: auto;
+}
+
+@container prompt-composer (max-width: 640px) {
+  .prompt-context-controls .session-sidebar-selector-prefix {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+}
+
+@container prompt-composer (max-width: 360px) {
+  .prompt-context-controls .selector-trigger {
+    padding-inline: var(--space-xs);
+  }
+}
+
+@media (pointer: coarse) {
+  .prompt-context-controls .selector-trigger {
+    min-height: var(--touch-target-size);
+  }
+}
diff --git a/packages/ui/src/styles/components/remote-access.css b/packages/ui/src/styles/components/remote-access.css
index 3e5fa4eb2..1bc316212 100644
--- a/packages/ui/src/styles/components/remote-access.css
+++ b/packages/ui/src/styles/components/remote-access.css
@@ -55,7 +55,7 @@
   border: 1px solid var(--border-base);
   background: var(--surface-secondary);
   color: var(--text-primary);
-  border-radius: 999px;
+  border-radius: 0;
   padding: 6px 10px;
   cursor: pointer;
   font-size: 18px;
@@ -72,7 +72,7 @@
 
 .remote-section {
   border: 1px solid var(--border-base);
-  border-radius: 12px;
+  border-radius: 0;
   background: var(--surface-secondary);
   padding: 16px;
 }
@@ -113,7 +113,7 @@
   align-items: center;
   gap: 6px;
   padding: 8px 10px;
-  border-radius: 10px;
+  border-radius: 0;
   border: 1px solid var(--border-base);
   background: var(--surface-primary);
   color: var(--text-primary);
@@ -136,7 +136,7 @@
   align-items: center;
   gap: 12px;
   padding: 12px;
-  border-radius: 12px;
+  border-radius: 0;
   border: 1px solid var(--border-base);
   background: var(--surface-primary);
   cursor: pointer;
@@ -145,7 +145,7 @@
 .remote-toggle-switch {
   width: 58px;
   height: 28px;
-  border-radius: 999px;
+  border-radius: 0;
   background: var(--surface-secondary);
   border: 1px solid var(--border-base);
   display: inline-flex;
@@ -168,7 +168,7 @@
 .remote-toggle-thumb {
   width: 18px;
   height: 18px;
-  border-radius: 999px;
+  border-radius: 0;
   background: var(--surface-primary);
   transition: transform 0.2s ease;
   transform: translateX(0);
@@ -214,7 +214,7 @@
 
 .remote-address {
   border: 1px solid var(--border-base);
-  border-radius: 12px;
+  border-radius: 0;
   padding: 12px;
   background: var(--surface-primary);
 }
@@ -249,7 +249,7 @@
   align-items: center;
   gap: 6px;
   padding: 8px 10px;
-  border-radius: 999px;
+  border-radius: 0;
   border: 1px solid var(--border-base);
   background: var(--surface-secondary);
   color: var(--text-primary);
@@ -258,7 +258,7 @@
 
 .remote-address-disclosure {
   border: 1px solid var(--border-base);
-  border-radius: 12px;
+  border-radius: 0;
   background: var(--surface-primary);
   overflow: hidden;
 }
@@ -307,7 +307,7 @@
   justify-content: center;
   padding: 12px;
   border: 1px dashed var(--border-base);
-  border-radius: 10px;
+  border-radius: 0;
   background: var(--surface-secondary);
 }
 
@@ -319,7 +319,7 @@
 
 .remote-card {
   border: 1px dashed var(--border-base);
-  border-radius: 10px;
+  border-radius: 0;
   padding: 12px;
   color: var(--text-secondary);
 }
@@ -327,7 +327,7 @@
 .remote-error {
   border: 1px solid var(--border-critical, #e65c5c);
   background: color-mix(in srgb, var(--border-critical, #e65c5c) 10%, transparent);
-  border-radius: 10px;
+  border-radius: 0;
   padding: 12px;
   color: var(--text-primary);
 }
diff --git a/packages/ui/src/styles/components/selector.css b/packages/ui/src/styles/components/selector.css
index 78e51ebf2..d0b054418 100644
--- a/packages/ui/src/styles/components/selector.css
+++ b/packages/ui/src/styles/components/selector.css
@@ -59,6 +59,11 @@
 .selector-trigger-icon svg {
   width: var(--icon-size);
   height: var(--icon-size);
+  transition: transform 150ms ease;
+}
+
+.selector-trigger:is([aria-expanded="true"], [data-expanded]) .selector-trigger-icon svg {
+  transform: rotate(180deg);
 }
 
 .selector-trigger:hover .selector-trigger-icon {
diff --git a/packages/ui/src/styles/components/session-row-actions.css b/packages/ui/src/styles/components/session-row-actions.css
new file mode 100644
index 000000000..913e06a23
--- /dev/null
+++ b/packages/ui/src/styles/components/session-row-actions.css
@@ -0,0 +1,89 @@
+.session-item-actions {
+  position: relative;
+}
+
+.session-item-inline-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+  width: max-content;
+}
+
+.session-item-inline-actions .session-item-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+  min-height: 16px;
+}
+
+.session-item-actions :is(.session-item-close, .action-overflow-trigger) {
+  color: var(--text-muted);
+  opacity: 0.5;
+}
+
+.session-item-inline-actions .session-item-close svg {
+  width: 12px;
+  height: 12px;
+}
+
+.session-item-actions :is(.session-item-close, .action-overflow-trigger):is(:hover, :focus-visible):not([aria-disabled="true"]) {
+  color: var(--text-primary);
+  opacity: 1;
+}
+
+.session-item-inline-actions .session-item-close:hover:not([aria-disabled="true"]) {
+  background-color: var(--surface-hover);
+  color: var(--text-primary);
+}
+
+.session-item-inline-actions .session-item-close[aria-disabled="true"] {
+  opacity: 0.3;
+  cursor: default;
+}
+
+.session-item-actions button:focus-visible {
+  outline: 1px solid var(--accent-primary);
+  outline-offset: -1px;
+}
+
+.session-item-overflow-actions {
+  display: none;
+}
+
+.session-item-overflow-actions .action-overflow-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 24px;
+  min-height: 24px;
+}
+
+.session-item-base[data-compact-actions="true"] .session-item-inline-actions {
+  position: absolute;
+  inset-inline-end: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.session-item-base[data-compact-actions="true"] .session-item-overflow-actions {
+  display: flex;
+}
+
+.session-item-base[data-compact-actions="false"] .session-item-badges,
+.session-item-base[data-compact-actions="false"] .worktree-indicator-label {
+  max-width: none;
+}
+
+.session-item-badges svg,
+.session-item-badges .status-dot {
+  flex-shrink: 0;
+}
+
+@media (pointer: coarse) {
+  .session-item-inline-actions .session-item-close,
+  .session-item-overflow-actions .action-overflow-trigger {
+    min-width: var(--touch-target-size);
+    min-height: var(--touch-target-size);
+  }
+}
diff --git a/packages/ui/src/styles/components/session-tree.css b/packages/ui/src/styles/components/session-tree.css
new file mode 100644
index 000000000..c3e2d04ac
--- /dev/null
+++ b/packages/ui/src/styles/components/session-tree.css
@@ -0,0 +1,53 @@
+/* Every nesting level advances by the same pixel-aligned step.
+   Selection controls stay on the root axis, independently of depth. */
+.session-item-base {
+  --session-root-indent: 6px;
+  --session-expander-size: calc(0.875rem + 0.25rem);
+  --session-tree-step: round(nearest, calc((max(0.875rem, calc(var(--session-expander-size) / 2 + var(--space-xs))) + var(--session-expander-size) / 2 - 0.5px) / 2), 1px);
+  --session-selection-offset: 0px;
+  padding-inline-start: var(--session-root-indent);
+}
+
+.session-item-base:has(> input[type="checkbox"]) {
+  --session-selection-offset: calc(0.875rem + var(--space-xs));
+  position: relative;
+  padding-inline-start: calc(var(--session-root-indent) + var(--session-selection-offset));
+}
+
+.session-item-base.session-item-nested:has(> input[type="checkbox"]) {
+  padding-inline-start: calc(var(--session-indent) + var(--session-selection-offset));
+}
+
+.session-item-base > input[type="checkbox"] {
+  position: absolute;
+  inset-inline-start: var(--session-root-indent);
+  top: 50%;
+  transform: translateY(-50%);
+  width: 0.875rem;
+  height: 0.875rem;
+  flex-shrink: 0;
+  margin: 0;
+}
+
+.session-item-expander {
+  @apply transition-colors;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--session-expander-size);
+  height: var(--session-expander-size);
+  padding: 0.125rem;
+  border-radius: 0;
+}
+
+.session-item-base.session-item-nested {
+  padding-inline-start: var(--session-indent);
+  position: relative;
+}
+
+@media (pointer: coarse) {
+  .session-item-base {
+    --session-expander-size: var(--touch-target-size);
+  }
+}
diff --git a/packages/ui/src/styles/components/settings-screen.css b/packages/ui/src/styles/components/settings-screen.css
index cd935a270..471b27fe9 100644
--- a/packages/ui/src/styles/components/settings-screen.css
+++ b/packages/ui/src/styles/components/settings-screen.css
@@ -47,11 +47,11 @@
 .settings-screen-nav {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0;
   min-height: 0;
   overflow: hidden;
-  padding: 0.75rem;
-  background: var(--surface-chrome);
+  padding: 0;
+  background: var(--surface-secondary);
   border-inline-end: 1px solid var(--border-divider);
 }
 
@@ -60,8 +60,7 @@
 }
 
 .settings-screen-nav-header {
-  padding: 0.125rem 0.25rem 0.5rem;
-  border-bottom: 1px solid var(--border-divider);
+  justify-content: flex-start;
 }
 
 .settings-window-root {
@@ -72,12 +71,13 @@
   min-width: 0;
   min-height: 0;
   overflow: hidden;
-  background: var(--surface-base);
+  background: var(--surface-secondary);
 }
 
 .settings-window-root > .modal-surface.settings-screen-shell {
   flex: 1 1 auto;
   width: 100%;
+  max-width: 100%;
   height: auto;
   min-width: 0;
   min-height: 0;
@@ -97,9 +97,14 @@
   cursor: pointer;
 }
 
+.settings-window-root .settings-screen-drag-handle {
+  cursor: default;
+  touch-action: auto;
+}
+
 .settings-screen-nav-title-row {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   gap: 0.5rem;
 }
 
@@ -107,8 +112,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 1.75rem;
-  height: 1.75rem;
+  width: var(--window-control-height);
+  height: var(--window-control-height);
   border-radius: 0;
   background: var(--surface-control);
   color: var(--text-secondary);
@@ -135,6 +140,7 @@
   display: flex;
   flex-direction: column;
   gap: 1px;
+  padding: var(--space-sm);
   min-height: 0;
   overflow-x: hidden;
   overflow-y: auto;
@@ -142,6 +148,7 @@
 
 .settings-nav-button {
   display: flex;
+  text-align: start;
   align-items: center;
   gap: 0.5rem;
   width: 100%;
@@ -160,7 +167,7 @@
 }
 
 .settings-nav-button:hover {
-  background: var(--surface-interactive-hover);
+  background-color: var(--surface-hover-overlay);
   color: var(--text-primary);
 }
 
@@ -170,6 +177,10 @@
   color: var(--text-primary);
 }
 
+.settings-nav-button[data-selected="true"]:hover {
+  background-image: linear-gradient(var(--surface-hover-overlay), var(--surface-hover-overlay));
+}
+
 .settings-nav-button-icon {
   width: 1rem;
   height: 1rem;
@@ -215,7 +226,7 @@
   min-width: 0;
   min-height: 0;
   overflow: hidden;
-  background: var(--surface-base);
+  background: var(--surface-secondary);
 }
 
 .settings-screen-content-header {
@@ -251,6 +262,7 @@
 .settings-screen-scroll {
   overflow-x: hidden;
   padding: var(--space-md) var(--space-lg);
+  scrollbar-gutter: stable;
 }
 
 .settings-section-stack,
@@ -421,7 +433,6 @@
   display: inline-flex;
   align-items: center;
   padding: 0.375rem 0.6rem;
-  border-radius: 0;
   background: color-mix(in oklab, var(--surface-secondary) 75%, var(--surface-base));
   color: var(--text-secondary);
   font-size: var(--font-size-xs);
@@ -684,13 +695,14 @@
 
   .settings-screen-nav {
     gap: 0;
-    padding: 0.75rem;
+    padding: 0;
     border-inline-end: none;
     border-bottom: 1px solid var(--border-base);
   }
 
   .settings-screen-compact-bar {
     display: flex;
+    border-bottom: 0;
     align-items: center;
     gap: 0.625rem;
     min-width: 0;
@@ -762,6 +774,11 @@
     transform: none !important;
   }
 
+  .settings-window-root > .modal-surface.settings-screen-shell {
+    height: auto;
+    min-height: 0;
+  }
+
   .modal-surface.settings-screen-shell .settings-screen-nav,
   .modal-surface.settings-screen-shell .settings-screen-nav-list,
   .modal-surface.settings-screen-shell .settings-screen-content,
diff --git a/packages/ui/src/styles/components/switches.css b/packages/ui/src/styles/components/switches.css
new file mode 100644
index 000000000..ad0db44cd
--- /dev/null
+++ b/packages/ui/src/styles/components/switches.css
@@ -0,0 +1,11 @@
+/* Shared SUID switch geometry for Yolo and MCP service enable controls.
+   Keep the same track and thumb in checked, disabled and pending states;
+   each caller retains its semantic color and accessible input behavior. */
+.MuiSwitch-switchBase,
+.MuiSwitch-thumb {
+  border-radius: 50% !important;
+}
+
+.MuiSwitch-track {
+  border-radius: 999px !important;
+}
diff --git a/packages/ui/src/styles/components/tab-scroll.css b/packages/ui/src/styles/components/tab-scroll.css
new file mode 100644
index 000000000..1cb3b6e46
--- /dev/null
+++ b/packages/ui/src/styles/components/tab-scroll.css
@@ -0,0 +1,36 @@
+/* One native, shared-style scrollbar lane above tabs; no vertical transforms
+   or negative-pixel overlaps that rasterize differently at fractional zoom. */
+.tab-scroll-frame {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  flex: 1 1 auto;
+  min-width: 0;
+  height: 100%;
+}
+
+.tab-scrollbar {
+  flex: 0 0 calc(var(--scrollbar-size) + 1px);
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.tab-scrollbar-extent {
+  height: 1px;
+}
+
+.tab-scroll-frame > .tab-scroll {
+  flex: 0 0 auto;
+  width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+}
+
+.tab-scroll-frame > .tab-scroll::-webkit-scrollbar {
+  display: none;
+}
+
+.tab-scroll-frame .tab-strip {
+  width: max-content;
+}
diff --git a/packages/ui/src/styles/components/theme-scheme-settings.css b/packages/ui/src/styles/components/theme-scheme-settings.css
index c367f7a51..28cf4c772 100644
--- a/packages/ui/src/styles/components/theme-scheme-settings.css
+++ b/packages/ui/src/styles/components/theme-scheme-settings.css
@@ -1,100 +1,72 @@
+.theme-scheme-settings {
+  container: palette-settings / inline-size;
+}
+
 .theme-scheme-settings .settings-card-header {
   margin-bottom: var(--space-sm);
 }
 
 .theme-scheme-list {
-  display: grid;
-  gap: 1px;
-  border: 1px solid var(--border-base);
-  background: var(--border-base);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
 }
 
-.theme-scheme-card {
+.theme-scheme-workbench {
   display: grid;
-  grid-template-columns: minmax(8rem, 0.4fr) minmax(12rem, 1fr);
-  align-items: center;
-  min-height: 2.25rem;
-  background: var(--surface-base);
-}
-
-.theme-scheme-card[data-selected="true"] {
-  box-shadow: inset 2px 0 0 var(--accent-primary);
-  background: color-mix(in oklab, var(--accent-primary) 8%, var(--surface-base));
+  grid-template-columns: minmax(11rem, 1fr) minmax(0, 2fr);
+  align-items: start;
+  gap: var(--space-sm);
+  margin-top: var(--space-sm);
 }
 
-.theme-scheme-select {
+.theme-scheme-controls {
   display: flex;
-  align-items: center;
-  min-width: 0;
-  height: 100%;
+  flex-direction: column;
   gap: var(--space-xs);
-  padding: var(--space-xs) var(--space-sm);
-  border: 0;
-  background: transparent;
-  color: var(--text-primary);
-  text-align: start;
-}
-
-.theme-scheme-select:hover {
-  background: var(--surface-hover);
-}
-
-.theme-scheme-name {
   min-width: 0;
-  overflow: hidden;
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
-.theme-scheme-check {
-  width: 0.875rem;
-  height: 0.875rem;
-  margin-inline-start: auto;
-  color: var(--accent-primary);
-  opacity: 0;
+.theme-scheme-card {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--space-xs);
+  padding: var(--space-sm);
+  border: 1px solid var(--border-base);
+  background: var(--surface-base);
 }
 
-.theme-scheme-card[data-selected="true"] .theme-scheme-check {
-  opacity: 1;
+.theme-scheme-picker {
+  width: 100%;
+  min-width: 0;
+  background-color: var(--surface-control);
 }
 
-.theme-scheme-swatches {
+.theme-scheme-mode {
   display: flex;
   align-items: center;
-  justify-content: flex-end;
   flex-wrap: wrap;
-  gap: 2px;
-  padding: 3px var(--space-sm);
-}
-
-.theme-scheme-swatches input[type="color"] {
-  width: 1.1rem;
-  height: 1.1rem;
-  flex: 0 0 auto;
-  padding: 0;
-  border: 1px solid color-mix(in oklab, var(--border-base) 75%, transparent);
-  border-radius: 0;
-  background: transparent;
-  cursor: pointer;
+  gap: var(--space-sm);
+  padding-bottom: var(--space-sm);
+  border-bottom: 1px solid var(--border-base);
+  color: var(--text-muted);
+  font-size: var(--font-size-sm);
 }
 
-.theme-scheme-swatches input[type="color"]::-webkit-color-swatch-wrapper {
-  padding: 0;
+.theme-scheme-picker:focus {
+  border-color: var(--border-base);
+  box-shadow: none;
 }
 
-.theme-scheme-swatches input[type="color"]::-webkit-color-swatch {
-  border: 0;
-  border-radius: 0;
+.theme-scheme-picker:focus-visible {
+  background: var(--surface-secondary);
 }
 
-.theme-scheme-editor {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: var(--space-sm);
-  margin-top: var(--space-sm);
+.theme-scheme-swatches input:focus-visible,
+.theme-scheme-actions .selector-button:focus-visible {
+  outline: 2px solid var(--accent-primary);
+  outline-offset: 1px;
 }
 
 .theme-scheme-appearance-options {
@@ -105,6 +77,7 @@
 }
 
 .theme-scheme-appearance-option {
+  min-width: 4.25rem;
   padding: 0.35rem 0.65rem;
   border: 0;
   border-radius: 0;
@@ -114,18 +87,29 @@
 }
 
 .theme-scheme-appearance-option[data-selected="true"] {
-  background: color-mix(in oklab, var(--accent-primary) 10%, var(--surface-base));
+  background: color-mix(in oklab, var(--accent-primary) 12%, var(--surface-base));
   color: var(--text-primary);
 }
 
-.theme-scheme-select:focus-visible,
-.theme-scheme-swatches input:focus-visible,
-.theme-scheme-appearance-option:focus-visible,
-.theme-scheme-actions .selector-button:focus-visible {
+.theme-scheme-appearance-option:focus-visible {
   outline: 2px solid var(--accent-primary);
   outline-offset: 1px;
 }
 
+.theme-scheme-name-editor {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--space-sm);
+  color: var(--text-muted);
+  font-size: var(--font-size-xs);
+}
+
+.theme-scheme-name-editor .selector-input {
+  flex: 1;
+  min-width: 0;
+}
+
 .theme-scheme-warning {
   margin: 0;
   color: var(--status-error);
@@ -134,8 +118,8 @@
 
 .theme-scheme-actions {
   display: flex;
+  flex-wrap: wrap;
   gap: var(--space-xs);
-  margin-inline-start: auto;
 }
 
 .theme-scheme-actions .selector-button {
@@ -143,18 +127,20 @@
   border-radius: 0;
 }
 
-@media (max-width: 640px) {
-  .theme-scheme-card {
-    grid-template-columns: 1fr;
+@container palette-settings (max-width: 580px) {
+  .theme-scheme-workbench {
+    grid-template-columns: minmax(0, 1fr);
   }
+}
 
-  .theme-scheme-swatches {
-    justify-content: flex-start;
-    padding-top: 0;
-  }
+.theme-scheme-appearance-option:hover:not(:disabled) {
+  background-image: linear-gradient(var(--surface-hover-overlay), var(--surface-hover-overlay));
+}
 
-  .theme-scheme-actions {
-    width: 100%;
-    justify-content: flex-end;
+@media (pointer: coarse) {
+  .theme-scheme-appearance-option,
+  .theme-scheme-picker,
+  .theme-scheme-actions .selector-button {
+    min-height: var(--touch-target-size);
   }
 }
diff --git a/packages/ui/src/styles/components/theme-scheme-swatches.css b/packages/ui/src/styles/components/theme-scheme-swatches.css
new file mode 100644
index 000000000..2f73af332
--- /dev/null
+++ b/packages/ui/src/styles/components/theme-scheme-swatches.css
@@ -0,0 +1,52 @@
+.theme-scheme-swatches {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  align-items: start;
+  gap: var(--space-sm) var(--space-xs);
+}
+
+.theme-scheme-swatch {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  align-items: center;
+  gap: 3px;
+  color: var(--text-muted);
+  font-size: 0.625rem;
+  line-height: 1.1;
+  text-align: center;
+  overflow-wrap: anywhere;
+  cursor: pointer;
+}
+
+.theme-scheme-swatches input[type="color"] {
+  width: 100%;
+  max-width: 2.75rem;
+  height: 1.375rem;
+  flex: 0 0 auto;
+  padding: 0;
+  border: 1px solid color-mix(in oklab, var(--border-base) 75%, transparent);
+  border-radius: 0;
+  background: transparent;
+  cursor: pointer;
+}
+
+.theme-scheme-swatches input[type="color"]::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+.theme-scheme-swatches input[type="color"]::-webkit-color-swatch {
+  border: 0;
+  border-radius: 0;
+}
+
+.theme-scheme-swatches input[type="color"]::-moz-color-swatch {
+  border: 0;
+  border-radius: 0;
+}
+
+@media (pointer: coarse) {
+  .theme-scheme-swatch {
+    min-height: var(--touch-target-size);
+  }
+}
diff --git a/packages/ui/src/styles/components/toast-history.css b/packages/ui/src/styles/components/toast-history.css
index ccc401c8e..d3b4c07ce 100644
--- a/packages/ui/src/styles/components/toast-history.css
+++ b/packages/ui/src/styles/components/toast-history.css
@@ -45,6 +45,13 @@
   background: var(--surface-interactive-hover);
 }
 
+.toast-history-action-btn:disabled,
+.toast-history-action-btn[aria-disabled="true"] {
+  opacity: 0.5;
+  cursor: default;
+  background: transparent;
+}
+
 .toast-history-action-btn:focus-visible {
   outline: 1px solid var(--focus-ring-color);
   outline-offset: 2px;
@@ -116,8 +123,18 @@
   background: var(--surface-subtle);
 }
 
+.toast-history-actions-toolbar,
+.toast-history-filter-toolbar {
+  flex-wrap: wrap;
+}
+
+.toast-history-actions-toolbar {
+  justify-content: flex-end;
+}
+
 .toast-history-body {
   padding: 0;
+  overscroll-behavior: contain;
 }
 
 .toast-history-filter-btn-warning.toast-history-filter-btn-active {
@@ -138,6 +155,10 @@
   transition: background-color 0.15s ease;
 }
 
+.toast-history-item-copy {
+  overflow-wrap: anywhere;
+}
+
 .toast-history-item:hover {
   background: var(--surface-interactive-hover);
 }
@@ -198,7 +219,8 @@
 }
 
 /** Nested selector: show delete button on item hover */
-.toast-history-item:hover .toast-history-item-delete {
+.toast-history-item:hover .toast-history-item-delete,
+.toast-history-item:focus-within .toast-history-item-delete {
   opacity: 1;
 }
 
@@ -213,7 +235,11 @@
   outline-offset: 2px;
 }
 
-/* ==================== Unread Dot ==================== */
+@media (hover: none) {
+  .toast-history-item-delete {
+    opacity: 1;
+  }
+}
 
 .toast-history-item-unread-dot {
   background: var(--accent-primary);
@@ -221,6 +247,17 @@
 
 /* ==================== Responsive ==================== */
 
+@media (prefers-reduced-motion: reduce) {
+  .toast-history-panel {
+    animation: none !important;
+  }
+
+  .toast-history-panel button,
+  .toast-history-item {
+    transition: none;
+  }
+}
+
 @media (max-width: 720px) {
   .toast-history-panel {
     position: fixed;
diff --git a/packages/ui/src/styles/components/transcript-filters.css b/packages/ui/src/styles/components/transcript-filters.css
new file mode 100644
index 000000000..341b31639
--- /dev/null
+++ b/packages/ui/src/styles/components/transcript-filters.css
@@ -0,0 +1,76 @@
+.transcript-filters {
+  background-color: var(--surface-control);
+  color: var(--text-secondary);
+  border: 1px solid color-mix(in srgb, var(--border-base) 50%, transparent);
+  width: min(18rem, calc(100vw - 1rem));
+  height: max-content;
+  max-height: min(calc(100dvh - 2rem), var(--kb-popper-content-available-height, calc(100dvh - 2rem)));
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  z-index: 1000;
+}
+
+.transcript-filters-trigger { flex-shrink: 0; }
+
+.transcript-filters .window-header {
+  background: transparent;
+  border-bottom-color: color-mix(in srgb, var(--border-base) 50%, transparent);
+}
+
+.transcript-filters .window-title {
+  color: var(--text-secondary);
+}
+
+.transcript-filters-list {
+  flex: 0 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: var(--space-xs);
+}
+
+.transcript-filter-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  padding: var(--space-xs);
+  border-bottom: 1px solid color-mix(in srgb, var(--border-base) 25%, transparent);
+}
+
+.transcript-filter-row:last-child {
+  border-bottom: 0;
+}
+
+.transcript-filter-row > svg {
+  flex-shrink: 0;
+  color: var(--text-secondary);
+}
+
+.transcript-filter-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--font-size-sm);
+}
+
+.transcript-filter-row .window-icon-button[aria-pressed="true"] {
+  color: var(--text-secondary);
+  background-color: color-mix(in srgb, var(--border-base) 20%, transparent);
+}
+
+.transcript-filter-row .window-icon-button:is(:hover, :focus-visible):not(:disabled) {
+  color: var(--text-primary);
+  background-color: var(--surface-interactive-hover);
+}
+
+.transcript-filter-row .window-icon-button:disabled { opacity: 0.35; }
+
+@media (pointer: coarse) {
+  .transcript-filters .window-icon-button {
+    min-width: var(--touch-target-size);
+    min-height: var(--touch-target-size);
+  }
+}
diff --git a/packages/ui/src/styles/controls.css b/packages/ui/src/styles/controls.css
index 32ba49ad9..74ae3a091 100644
--- a/packages/ui/src/styles/controls.css
+++ b/packages/ui/src/styles/controls.css
@@ -1,4 +1,5 @@
 @import "./components/buttons.css";
+@import "./components/switches.css";
 @import "./components/window.css";
 @import "./components/native-titlebar.css";
 @import "./components/badges.css";
@@ -16,7 +17,9 @@
 @import "./components/toast-history.css";
 @import "./components/settings-screen.css";
 @import "./components/theme-scheme-settings.css";
+@import "./components/theme-scheme-swatches.css";
 @import "./components/settings-info.css";
 @import "./components/config-files-settings.css";
 @import "./components/provider-auth.css";
 @import "./components/provider-model-visibility.css";
+@import "./components/prompt-context-controls.css";
diff --git a/packages/ui/src/styles/markdown.css b/packages/ui/src/styles/markdown.css
index 40a488aa7..5ffc2754c 100644
--- a/packages/ui/src/styles/markdown.css
+++ b/packages/ui/src/styles/markdown.css
@@ -138,7 +138,7 @@
     font-size: var(--font-size-sm);
     background-color: var(--surface-muted);
     border: 1px solid var(--border-base);
-    border-radius: 4px;
+    border-radius: 0;
     padding: 0.15em 0.35em;
   }
 
@@ -155,7 +155,7 @@
     background-color: var(--surface-code);
     color: var(--text-primary);
     border: 1px solid var(--border-base);
-    border-radius: 8px;
+    border-radius: 0;
     padding: 0.75rem;
     margin: 1rem 0;
     direction: ltr;
@@ -172,8 +172,8 @@
     background-color: var(--surface-muted);
     padding: 0.5rem 1rem;
     border-start-start-radius: 0;
-    border-start-end-radius: 8px;
-    border-end-end-radius: 8px;
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
     border-end-start-radius: 0;
   }
 
diff --git a/packages/ui/src/styles/messaging.css b/packages/ui/src/styles/messaging.css
index 2f067c839..08687e825 100644
--- a/packages/ui/src/styles/messaging.css
+++ b/packages/ui/src/styles/messaging.css
@@ -1,115 +1,12 @@
 @import "./messaging/message-base.css";
 @import "./messaging/prompt-input.css";
+@import "./messaging/prompt-input-footer.css";
 @import "./messaging/message-section.css";
 @import "./messaging/virtual-follow-list.css";
 @import "./messaging/message-selection.css";
 @import "./messaging/delete-overlays.css";
 @import "./messaging/technical-groups.css";
 @import "./messaging/message-timeline.css";
+@import "./messaging/session-timeline-rail.css";
 @import "./messaging/tool-call.css";
 @import "./messaging/log-view.css";
-
-/* Message item base styles */
-
-.message-item-base {
-  @apply flex flex-col gap-2 p-3 w-full;
-}
-
-.assistant-message {
-  /* gap: 0.25rem; */
-  padding: 0.6rem 0.65rem;
-}
-
-/* Message state badges */
-.message-queued-badge {
-  @apply inline-block font-bold px-3 py-1 rounded mb-3 text-xs tracking-wide;
-  background-color: var(--accent-primary);
-  color: var(--text-inverted);
-}
-
-/* Message error block */
-.message-error-block {
-  @apply text-sm p-3 rounded border-s-[3px] my-2;
-  color: var(--status-error);
-  background-color: var(--message-error-bg);
-  border-color: var(--status-error);
-}
-
-/* Message state indicators */
-.message-generating {
-  @apply text-sm italic py-2;
-  color: var(--text-muted);
-}
-
-.message-sending {
-  @apply text-xs italic mt-1;
-  color: var(--text-muted);
-}
-
-.message-error {
-  @apply text-xs mt-1;
-  color: var(--status-error);
-}
-
-.generating-spinner {
-  @apply inline-block;
-  animation: pulse 1.5s ease-in-out infinite;
-}
-
-.message-text {
-  font-size: var(--font-size-base);
-  line-height: var(--line-height-normal);
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-  color: inherit;
-}
-
-.message-text-assistant {
-  white-space: normal;
-}
-
-.message-text pre {
-  overflow-x: auto;
-  padding: 8px;
-  background-color: var(--surface-code);
-  border-radius: 4px;
-}
-
-/* Message error part */
-.message-error-part {
-  color: var(--status-error);
-  font-size: var(--font-size-base);
-  padding: 8px;
-  background-color: var(--message-error-bg);
-  border-radius: 4px;
-}
-
-/* Message reasoning */
-.message-reasoning {
-  @apply my-2 border rounded;
-  border-color: var(--border-base);
-  background-color: var(--surface-secondary);
-  color: inherit;
-}
-
-.reasoning-container {
-  @apply p-2;
-}
-
-.reasoning-header {
-  @apply flex items-center gap-1.5 text-xs cursor-pointer select-none;
-  color: var(--text-muted);
-}
-
-.reasoning-header:hover {
-  color: var(--accent-primary);
-}
-
-.reasoning-icon {
-  @apply text-xs;
-  transition: transform 150ms ease;
-}
-
-.reasoning-label {
-  font-weight: var(--font-weight-medium);
-}
diff --git a/packages/ui/src/styles/messaging/delete-overlays.css b/packages/ui/src/styles/messaging/delete-overlays.css
index fd04b4c06..c15fb2b19 100644
--- a/packages/ui/src/styles/messaging/delete-overlays.css
+++ b/packages/ui/src/styles/messaging/delete-overlays.css
@@ -16,7 +16,7 @@
   content: "";
   position: absolute;
   inset: -4px;
-  background: var(--status-error-bg);
+  background: color-mix(in srgb, var(--status-error-bg) 50%, transparent);
   border-radius: 0;
   pointer-events: none;
   /* Overlay must sit above the part card background. */
@@ -24,8 +24,12 @@
 }
 .message-technical-group[data-delete-technical-selected="true"] > .message-technical-group-toggle,
 .message-technical-group[data-delete-technical-selected="true"] > .message-technical-group-header {
-  background: var(--status-error-bg);
+  background: color-mix(in srgb, var(--status-error-bg) 50%, transparent);
 }
 .message-reasoning-card[data-delete-part-hover="true"]::before {
   inset: 0;
 }
+
+.delete-hover-scope[data-delete-part-hover="true"] :is(.tool-call-header, .message-reasoning-header, .message-technical-group-toggle) {
+  background-color: transparent;
+}
diff --git a/packages/ui/src/styles/messaging/log-view.css b/packages/ui/src/styles/messaging/log-view.css
index 22fe22faa..cef249d5c 100644
--- a/packages/ui/src/styles/messaging/log-view.css
+++ b/packages/ui/src/styles/messaging/log-view.css
@@ -17,7 +17,7 @@
 }
 
 .log-entry {
-  @apply flex gap-3 py-0.5 px-2 -mx-2 rounded transition-colors;
+  @apply flex gap-3 py-0.5 px-2 -mx-2 transition-colors;
 }
 
 .log-entry:hover {
@@ -57,7 +57,7 @@
 .log-paused-state {
   @apply flex flex-col items-center justify-center gap-3 text-center py-10 px-6;
   border: 1px dashed var(--border-base);
-  border-radius: 12px;
+  border-radius: 0;
   background-color: var(--surface-base);
 }
 
@@ -88,7 +88,7 @@
   @apply inline-flex items-center justify-center;
   width: 2.75rem;
   height: 2.75rem;
-  border-radius: 9999px;
+  border-radius: 0;
   border: 1px solid var(--border-base);
   background-color: var(--surface-base);
   color: var(--text-primary);
diff --git a/packages/ui/src/styles/messaging/message-base.css b/packages/ui/src/styles/messaging/message-base.css
index 6b676ed7b..f685646ca 100644
--- a/packages/ui/src/styles/messaging/message-base.css
+++ b/packages/ui/src/styles/messaging/message-base.css
@@ -101,6 +101,7 @@
 }
 
 .message-item-actions {
+  position: relative;
   @apply flex items-center gap-0;
   flex: 0 0 auto;
 }
@@ -159,15 +160,19 @@
   display: none;
 }
 
-.session-center-column[data-session-center-width="narrow"] .message-item-actions[data-action-overflow="true"] .message-action-group {
-  display: none;
+.message-item-header-row[data-content-overflow="true"] .message-action-group {
+  position: absolute;
+  inset-inline-end: 0;
+  width: max-content;
+  visibility: hidden;
+  pointer-events: none;
 }
 
-.session-center-column[data-session-center-width="narrow"] .message-item-actions[data-action-overflow="true"] > .action-overflow-trigger.action-overflow-wide {
+.message-item-header-row[data-content-overflow="true"] .message-item-actions > .action-overflow-trigger.action-overflow-wide {
   display: none;
 }
 
-.session-center-column[data-session-center-width="narrow"] .message-item-actions[data-action-overflow="true"] > .action-overflow-trigger.action-overflow-narrow {
+.message-item-header-row[data-content-overflow="true"] .message-item-actions > .action-overflow-trigger.action-overflow-narrow {
   display: inline-flex;
 }
 
@@ -252,7 +257,6 @@
 .message-step-usage-chip {
   @apply inline-flex items-center border border-[var(--border-base)] px-2 text-[10px];
   min-height: 22px;
-  border-radius: 0;
   color: var(--icon-button-hover-color);
   font-weight: var(--font-weight-semibold);
   line-height: 1;
@@ -274,17 +278,17 @@
   color: var(--text-muted);
 }
 
-
-
 .message-queued-badge {
-  @apply inline-block font-bold px-3 py-1 rounded mb-3 text-xs tracking-wide;
-  border-radius: 0;
+  @apply inline-flex items-center font-bold px-3 py-1 text-xs tracking-wide;
+  align-self: center;
+  flex: 0 0 auto;
+  line-height: 1;
   background-color: var(--accent-primary);
   color: var(--text-inverted);
 }
 
 .message-error-block {
-  @apply text-sm p-3 rounded border-s-[3px] my-2;
+  @apply text-sm p-3 border-s-[3px] my-2;
   border-radius: 0;
   color: var(--status-error);
   background-color: var(--message-error-bg);
@@ -296,11 +300,6 @@
   color: var(--text-muted);
 }
 
-.message-sending {
-  @apply text-xs italic mt-1;
-  color: var(--text-muted);
-}
-
 .message-attachments {
   @apply flex flex-wrap gap-1.5 pt-2 mt-1;
   border-top: 1px solid var(--border-base);
@@ -370,7 +369,7 @@
 }
 
 .message-reasoning {
-  @apply my-2 border rounded;
+  @apply my-2 border;
   border-radius: 0;
   --reasoning-border-color: var(--border-strong, var(--border-base));
   border-color: var(--reasoning-border-color);
@@ -549,7 +548,7 @@
 }
 
 .message-reasoning-header:hover {
-  background-color: var(--surface-hover);
+  background-color: var(--message-part-hover);
 }
 
 .message-reasoning-toggle {
@@ -671,7 +670,7 @@
   height: 1.5rem;
   padding: 0 0.75rem;
   border: 1px solid var(--reasoning-border-color, var(--border-base));
-  border-radius: 0.375rem;
+  border-radius: 0;
   background-color: transparent;
   color: var(--text-muted);
   font-weight: var(--font-weight-semibold);
diff --git a/packages/ui/src/styles/messaging/message-section.css b/packages/ui/src/styles/messaging/message-section.css
index 83d9f7078..0ebc67d10 100644
--- a/packages/ui/src/styles/messaging/message-section.css
+++ b/packages/ui/src/styles/messaging/message-section.css
@@ -50,7 +50,7 @@
 }
 
 .session-sidebar-menu-button {
-  @apply inline-flex items-center justify-center border rounded-md px-2 py-1 text-sm font-medium;
+  @apply inline-flex items-center justify-center border px-2 py-1 text-sm font-medium;
   border-color: var(--border-base);
   background-color: transparent;
   color: var(--text-primary);
@@ -124,7 +124,7 @@
 }
 
 .connection-status-button {
-  @apply inline-flex items-center gap-2 px-3 py-1 text-sm font-medium border rounded-md transition-colors;
+  @apply inline-flex items-center gap-2 px-3 py-1 text-sm font-medium border transition-colors;
   border-color: var(--border-base);
   background-color: var(--surface-base);
   color: var(--text-primary);
@@ -216,39 +216,16 @@
 }
 
 .message-scroll-controls {
-  position: relative;
   display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  width: 1.75rem;
-  min-height: 1.75rem;
-}
-
-.message-scroll-controls-expanded {
-  position: absolute;
-  inset-inline-end: 0;
-  bottom: 0;
-  display: none;
-  flex-direction: column;
+  flex-direction: row;
   gap: 0.25rem;
-  align-items: flex-end;
-}
-
-.message-scroll-controls:not([data-hover-suppressed="true"]):hover .message-scroll-controls-trigger,
-.message-scroll-controls[data-open="true"] .message-scroll-controls-trigger {
-  display: none;
-}
-
-.message-scroll-controls:not([data-hover-suppressed="true"]):hover .message-scroll-controls-expanded,
-.message-scroll-controls[data-open="true"] .message-scroll-controls-expanded {
-  display: flex;
 }
 
 .message-scroll-button {
   @apply inline-flex items-center justify-center;
   width: 1.75rem;
   height: 1.75rem;
-  border-radius: 9999px;
+  border-radius: 50%;
   border: 1px solid var(--border-base);
   background-color: transparent;
   color: var(--text-primary);
@@ -271,10 +248,6 @@
   color: var(--accent-primary);
 }
 
-.message-scroll-button[data-active="false"] .message-scroll-icon--toggle {
-  color: var(--text-secondary);
-}
-
 .message-quote-popover {
   position: absolute;
   z-index: 5;
@@ -287,7 +260,7 @@
 .message-quote-button-group {
   pointer-events: auto;
   display: inline-flex;
-  border-radius: 9999px;
+  border-radius: 0;
   border: 1px solid var(--list-item-highlight-border);
   background-color: var(--list-item-highlight-bg-solid);
   box-shadow: var(--panel-shadow);
@@ -353,7 +326,7 @@
 }
 
 .message-search-button {
-  @apply inline-flex items-center justify-center rounded-md border transition-colors;
+  @apply inline-flex items-center justify-center border transition-colors;
   width: 2rem;
   height: 2rem;
   border-color: var(--border-base);
@@ -382,7 +355,7 @@
 }
 
 .message-stream-block[data-search-result="true"] {
-  border-radius: 0.75rem;
+  border-radius: 0;
 }
 
 .message-stream-block[data-search-active="true"] {
@@ -390,7 +363,7 @@
 }
 
 .session-search-match {
-  border-radius: 0.2em;
+  border-radius: 0;
   background-color: color-mix(in oklab, #fde047 58%, transparent);
   box-shadow: 0 0 0 1px color-mix(in oklab, #eab308 62%, transparent);
   color: inherit;
diff --git a/packages/ui/src/styles/messaging/message-selection.css b/packages/ui/src/styles/messaging/message-selection.css
index b69f1fdd7..5315de5f4 100644
--- a/packages/ui/src/styles/messaging/message-selection.css
+++ b/packages/ui/src/styles/messaging/message-selection.css
@@ -13,7 +13,7 @@
   /* Match other popups (dropdown-surface / panels) */
   background-color: var(--surface-base);
   border: 1px solid var(--border-base);
-  border-radius: 12px;
+  border-radius: 0;
   z-index: 50;
   box-shadow: var(--panel-shadow-strong);
   width: max-content;
@@ -40,7 +40,7 @@
   align-items: center;
   justify-content: center;
   padding: 0 8px;
-  border-radius: 999px;
+  border-radius: 0;
   font-size: 11px;
   font-weight: 700;
   font-variant-numeric: tabular-nums;
@@ -83,7 +83,7 @@
   justify-content: center;
   background: transparent;
   border: 1px solid color-mix(in oklab, var(--accent-primary) 30%, transparent);
-  border-radius: 10px;
+  border-radius: 0;
   color: var(--text-secondary);
   cursor: pointer;
   transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
@@ -154,7 +154,7 @@
 
 .message-delete-mode-menu-toggle {
   display: inline-flex;
-  border-radius: 999px;
+  border-radius: 0;
   border: 1px solid var(--border-base);
   background-color: var(--surface-secondary);
   overflow: hidden;
@@ -193,7 +193,7 @@
   margin: 0 4px;
   padding: 3px 8px;
   font-size: 12px;
-  border-radius: 6px;
+  border-radius: 0;
 }
 
 .message-delete-mode-button:focus-visible {
diff --git a/packages/ui/src/styles/messaging/message-timeline.css b/packages/ui/src/styles/messaging/message-timeline.css
index 2258170c3..3659e936b 100644
--- a/packages/ui/src/styles/messaging/message-timeline.css
+++ b/packages/ui/src/styles/messaging/message-timeline.css
@@ -68,20 +68,20 @@
 
 .message-timeline-segment {
   width: 100%;
-  min-height: 1.5rem;
+  min-height: 1.25rem;
   border-radius: 0;
-  border: 1px solid var(--border-base);
-  background-color: var(--surface-secondary);
+  border: 1px solid transparent;
+  background-color: transparent;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 0.65rem;
+  font-size: 0.625rem;
   font-weight: 600;
   letter-spacing: 0.05em;
   text-transform: uppercase;
   color: var(--text-primary);
-  opacity: 0.5;
+  opacity: 0.65;
   transition: opacity 0.2s ease, transform 0.15s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
   overflow: hidden;
   user-select: none;
@@ -96,6 +96,21 @@
   width: 100%;
 }
 
+/* Short, neutral separators distinguish adjacent markers without boxing them. */
+.message-timeline-segment::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  inset-inline: 30%;
+  height: 1px;
+  background-color: var(--border-divider);
+  pointer-events: none;
+}
+
+.message-timeline-segment:is(:hover, :focus-visible, :active, .message-timeline-segment-active)::after {
+  opacity: 0;
+}
+
 .message-timeline-item-spacer {
   flex: none;
   width: 100%;
@@ -112,15 +127,17 @@
 
 .message-timeline-segment-active {
   opacity: 1;
-  border-color: var(--accent-primary);
-  background-color: color-mix(in oklab, var(--accent-primary) 14%, var(--surface-secondary));
+  border-color: currentColor;
+  background-color: var(--selection-neutral-strong-bg);
 }
 
 .message-timeline-segment:hover,
 .message-timeline-segment:focus-visible,
 .message-timeline-segment:active {
   opacity: 1;
-  transform: translateY(-1px);
+  border-color: currentColor;
+  background-color: var(--selection-neutral-strong-bg);
+  transform: none;
   outline: none;
 }
 
@@ -129,42 +146,27 @@
 }
 
 .message-timeline-user {
-  border-color: var(--message-user-border);
-  background-color: var(--message-user-bg);
+  color: var(--message-user-border);
 }
 
 .message-timeline-assistant {
-  border-color: var(--message-assistant-border);
-  background-color: var(--message-assistant-bg);
+  color: var(--message-assistant-border);
 }
 
 .message-timeline-tool {
-  border-color: var(--message-tool-border);
-  background-color: var(--surface-secondary);
+  color: var(--message-tool-border);
 }
 
 .message-timeline-segment.message-timeline-segment-permission {
-  border-color: var(--session-status-permission-fg);
-  background-color: var(--session-status-permission-bg);
   color: var(--session-status-permission-fg);
 }
 
-.message-timeline-segment.message-timeline-segment-permission:hover,
-.message-timeline-segment.message-timeline-segment-permission:focus-visible {
-  background-color: var(--session-status-permission-bg);
-  color: var(--session-status-permission-fg);
-  border-color: var(--session-status-permission-fg);
-  transform: translateY(-1px);
-}
-
 .message-timeline-compaction-auto {
-  border-color: var(--session-status-compacting-fg);
-  background-color: var(--surface-secondary);
+  color: var(--session-status-compacting-fg);
 }
 
 .message-timeline-compaction-manual {
-  border-color: var(--session-status-compacting-fg);
-  background-color: var(--surface-secondary);
+  color: var(--session-status-compacting-fg);
 }
 
 .message-timeline-label {
@@ -183,8 +185,8 @@
 }
 
 .message-timeline-icon {
-  width: 1rem;
-  height: 1rem;
+  width: 12px;
+  height: 12px;
 }
 
 .message-timeline-tooltip {
@@ -198,7 +200,7 @@
   width: 360px;
   max-height: 420px;
   overflow: auto;
-  border-radius: 8px;
+  border-radius: 0;
   border: 1px solid var(--border-base);
   background-color: var(--surface-base);
   box-shadow: var(--panel-shadow-strong);
@@ -235,3 +237,17 @@
   box-shadow: 0 0 0 2px #ca8a04, 0 0 0 4px color-mix(in oklab, #facc15 34%, transparent) !important;
   transform: none !important;
 }
+
+@media (pointer: coarse) {
+  .message-layout--with-timeline {
+    grid-template-columns: minmax(0, 1fr) var(--touch-target-size);
+  }
+
+  .message-timeline-sidebar {
+    width: var(--touch-target-size);
+  }
+
+  .message-timeline-segment {
+    min-height: var(--touch-target-size);
+  }
+}
diff --git a/packages/ui/src/styles/messaging/prompt-input-footer.css b/packages/ui/src/styles/messaging/prompt-input-footer.css
new file mode 100644
index 000000000..8864f124f
--- /dev/null
+++ b/packages/ui/src/styles/messaging/prompt-input-footer.css
@@ -0,0 +1,120 @@
+.prompt-input-footer {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  min-width: 0;
+  min-height: 29px;
+  border-top: 1px solid var(--border-divider);
+  background-color: var(--surface-chrome);
+}
+
+.prompt-input-footer .prompt-actions-menu-trigger.action-overflow-trigger {
+  background-color: transparent;
+  flex: 0 0 32px;
+}
+
+.prompt-input-footer .send-button,
+.prompt-input-footer .stop-button {
+  appearance: none;
+  -webkit-appearance: none;
+  box-shadow: none;
+  background-image: none;
+}
+
+.prompt-input-footer .prompt-actions-menu-trigger.action-overflow-trigger:hover,
+.prompt-input-footer .prompt-context-controls .selector-trigger:hover {
+  background-color: var(--surface-hover-overlay);
+}
+
+.prompt-input-footer-context {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.prompt-input-footer-context:empty {
+  display: none;
+}
+
+.prompt-input-footer-actions {
+  display: flex;
+  align-items: stretch;
+  flex: 0 0 auto;
+  gap: 0;
+  padding-inline: 0;
+  border-inline-start: 1px solid var(--border-divider);
+}
+
+.prompt-input-footer .prompt-actions-menu,
+.prompt-input-footer .prompt-input-primary-actions {
+  position: static;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  gap: 0;
+}
+
+.prompt-input-footer .send-button,
+.prompt-input-footer .stop-button {
+  height: auto;
+  min-height: 28px;
+  align-self: stretch;
+  transform: none;
+}
+
+.prompt-input-footer .prompt-input-primary-actions {
+  border-inline-start: 1px solid var(--border-divider);
+}
+
+/* A flex separator is not faded by either button's disabled opacity. */
+.prompt-input-footer .prompt-input-primary-actions:has(> .stop-button)::before {
+  content: "";
+  order: 1;
+  flex: 0 0 1px;
+  align-self: stretch;
+  background-color: var(--border-divider);
+}
+
+.prompt-input-footer .prompt-input-primary-actions > .send-button {
+  order: 2;
+}
+
+.prompt-input-footer .prompt-actions-menu-trigger.action-overflow-trigger,
+.prompt-input-footer .stop-button,
+.prompt-input-footer .send-button {
+  width: 28px;
+  height: auto;
+  min-height: 28px;
+  min-width: 28px;
+  border-radius: 0;
+}
+
+@container prompt-composer (max-width: 360px) {
+  .prompt-input-footer {
+    flex-wrap: wrap;
+  }
+
+  .prompt-input-footer-context {
+    flex-basis: 100%;
+    border-bottom: 1px solid var(--border-divider);
+  }
+
+  .prompt-input-footer-actions {
+    width: 100%;
+    justify-content: flex-end;
+    border-inline-start: 0;
+  }
+}
+
+@media (pointer: coarse) {
+  .prompt-input-footer .prompt-actions-menu-trigger.action-overflow-trigger {
+    flex-basis: var(--touch-target-size);
+  }
+  .prompt-input-footer .prompt-actions-menu-trigger.action-overflow-trigger,
+  .prompt-input-footer .stop-button,
+  .prompt-input-footer .send-button {
+    width: var(--touch-target-size);
+    height: auto;
+    min-height: var(--touch-target-size);
+    min-width: var(--touch-target-size);
+  }
+}
diff --git a/packages/ui/src/styles/messaging/prompt-input.css b/packages/ui/src/styles/messaging/prompt-input.css
index 88fb72d66..1cd76d97c 100644
--- a/packages/ui/src/styles/messaging/prompt-input.css
+++ b/packages/ui/src/styles/messaging/prompt-input.css
@@ -1,6 +1,6 @@
 .prompt-input-container {
   @apply flex flex-col;
-  padding-bottom: 1px;
+  padding-bottom: 0;
   border-top: 1px solid var(--border-base);
   background-color: var(--surface-base);
 }
@@ -43,10 +43,12 @@
 
 .prompt-input-wrapper {
   position: relative;
-  display: block;
+  display: flex;
+  flex-direction: column;
   min-height: 104px;
   padding: 0;
   background-color: var(--surface-base);
+  container: prompt-composer / inline-size;
 }
 
 .prompt-input-main {
@@ -66,24 +68,6 @@
   height: auto;
 }
 
-.prompt-input-primary-actions {
-  position: absolute;
-  inset-inline-end: calc(0.375rem + var(--scrollbar-size));
-  bottom: 0.375rem;
-  z-index: 4;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.25rem;
-}
-
-.prompt-actions-menu {
-  position: absolute;
-  top: 0.375rem;
-  inset-inline-end: calc(0.375rem + var(--scrollbar-size));
-  z-index: 5;
-}
-
 .prompt-actions-menu-trigger.action-overflow-trigger {
   display: flex;
   width: 1.75rem;
@@ -120,7 +104,7 @@
 .prompt-input {
   @apply w-full pt-2.5 text-sm resize-none outline-none transition-colors;
   padding-inline-start: 0.75rem;
-  padding-inline-end: calc(2.75rem + var(--scrollbar-size));
+  padding-inline-end: calc(0.75rem + var(--scrollbar-size));
   font-family: inherit;
   background-color: var(--surface-base);
   color: var(--text-primary);
@@ -147,7 +131,7 @@
   position: absolute;
   bottom: 0.5rem;
   inset-inline-start: 0.75rem;
-  inset-inline-end: calc(2.75rem + var(--scrollbar-size));
+  inset-inline-end: calc(0.75rem + var(--scrollbar-size));
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
@@ -279,10 +263,10 @@
 }
 
 .hint kbd {
-  @apply inline-block px-1.5 py-0.5 text-xs font-mono rounded mx-0.5;
+  @apply inline-block px-1.5 py-0.5 text-xs font-mono mx-0.5;
   background-color: var(--surface-secondary);
   border: 1px solid var(--border-base);
-  border-radius: 3px;
+  border-radius: 0;
 }
 
 .attachment-chip {
@@ -304,7 +288,7 @@
   padding: 8px;
   background-color: var(--surface-base);
   border: 1px solid var(--border-base);
-  border-radius: 10px;
+  border-radius: 0;
   box-shadow: var(--popover-shadow);
   z-index: 20;
 }
@@ -313,7 +297,7 @@
   display: block;
   max-width: 320px;
   max-height: 320px;
-  border-radius: 8px;
+  border-radius: 0;
   object-fit: contain;
 }
 
@@ -324,7 +308,7 @@
 .attachment-remove,
 .attachment-download,
 .attachment-expand {
-  @apply ml-0.5 flex h-4 w-4 items-center justify-center rounded transition-colors;
+  @apply ml-0.5 flex h-4 w-4 items-center justify-center transition-colors;
 }
 
 .attachment-remove:hover,
@@ -349,7 +333,7 @@
   .prompt-input {
     min-height: 0;
     padding: 0.5rem 0.75rem;
-    padding-inline-end: calc(2.75rem + var(--scrollbar-size));
+    padding-inline-end: calc(0.75rem + var(--scrollbar-size));
     padding-bottom: 0.75rem;
   }
 
diff --git a/packages/ui/src/styles/messaging/session-timeline-rail.css b/packages/ui/src/styles/messaging/session-timeline-rail.css
new file mode 100644
index 000000000..0298f87f9
--- /dev/null
+++ b/packages/ui/src/styles/messaging/session-timeline-rail.css
@@ -0,0 +1,62 @@
+/* The timeline ends at the composer footer, not below its controls. */
+.session-view {
+  position: relative;
+  isolation: isolate;
+}
+
+.session-view:has(> .session-timeline-slot .message-timeline-sidebar) {
+  padding-inline-end: 40px;
+}
+
+.session-timeline-slot {
+  pointer-events: none;
+  position: absolute;
+  inset-block: 0;
+  inset-inline-end: 0;
+  width: 40px;
+  display: flex;
+}
+
+.session-view:has(> .session-timeline-slot .message-timeline-sidebar) .prompt-input-footer::after {
+  content: "";
+  position: absolute;
+  inset-block: -1px 0;
+  inset-inline-start: 100%;
+  width: 40px;
+  border-block-start: 1px solid var(--border-divider);
+  border-inline-start: 1px solid var(--border-divider);
+  background-color: var(--surface-chrome);
+  pointer-events: none;
+}
+
+.session-timeline-slot .message-timeline-sidebar {
+  pointer-events: auto;
+}
+
+.session-timeline-slot > div {
+  display: flex;
+  width: 100%;
+  min-height: 0;
+}
+
+@media (pointer: coarse) {
+  .session-view:has(> .session-timeline-slot .message-timeline-sidebar) {
+    padding-inline-end: var(--touch-target-size);
+  }
+  .session-timeline-slot { width: var(--touch-target-size); }
+  .session-view:has(> .session-timeline-slot .message-timeline-sidebar) .prompt-input-footer::after {
+    width: var(--touch-target-size);
+  }
+}
+
+.session-center-column[data-session-header-density="4"] .session-view {
+  padding-inline-end: 0;
+}
+
+.session-center-column[data-session-header-density="4"] .session-timeline-slot {
+  display: none;
+}
+
+.session-center-column[data-session-header-density="4"] .session-view .prompt-input-footer::after {
+  display: none;
+}
diff --git a/packages/ui/src/styles/messaging/technical-groups.css b/packages/ui/src/styles/messaging/technical-groups.css
index 0d736178b..af926f0e4 100644
--- a/packages/ui/src/styles/messaging/technical-groups.css
+++ b/packages/ui/src/styles/messaging/technical-groups.css
@@ -21,7 +21,7 @@
 }
 
 .message-technical-group-toggle:hover {
-  background-color: var(--surface-hover);
+  background-color: var(--message-part-hover);
 }
 
 .message-technical-group-toggle:focus-visible {
diff --git a/packages/ui/src/styles/messaging/tool-call.css b/packages/ui/src/styles/messaging/tool-call.css
index 653253032..4d1f446af 100644
--- a/packages/ui/src/styles/messaging/tool-call.css
+++ b/packages/ui/src/styles/messaging/tool-call.css
@@ -150,6 +150,7 @@
 }
 
 .tool-call-header {
+  position: relative;
   @apply flex items-center w-full;
   background-color: transparent;
   color: var(--text-primary);
@@ -158,7 +159,7 @@
 }
 
 .tool-call-header:hover {
-  background-color: var(--surface-hover);
+  background-color: var(--message-part-hover);
 }
 
 .tool-call-header-toggle {
@@ -240,27 +241,59 @@
   display: none;
 }
 
-.session-center-column[data-session-center-width="narrow"] .tool-call-header[data-action-overflow="true"] > .tool-call-header-copy:not(.action-overflow-trigger) {
-  display: none;
+.tool-call-header[data-content-overflow="true"] > .tool-call-header-copy:not(.action-overflow-trigger) {
+  position: absolute;
+  inset-inline-end: 0;
+  visibility: hidden;
+  pointer-events: none;
 }
 
-.session-center-column[data-session-center-width="narrow"] .tool-call-header[data-action-overflow="true"] > .action-overflow-trigger.action-overflow-wide {
+.tool-call-header[data-content-overflow="true"] > .action-overflow-trigger.action-overflow-wide {
   display: none;
 }
 
-.session-center-column[data-session-center-width="narrow"] .tool-call-header[data-action-overflow="true"] > .action-overflow-trigger.action-overflow-narrow {
+.tool-call-header[data-content-overflow="true"] > .action-overflow-trigger.action-overflow-narrow {
   display: inline-flex;
 }
 
 .tool-call-header-status {
   @apply inline-flex items-center justify-center;
-  font-size: 0.95rem;
+  gap: var(--space-xs);
+  margin-inline-start: auto;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
   color: var(--text-secondary);
-  width: 1.25rem;
-  height: 1.25rem;
+  min-height: 1.25rem;
   flex: 0 0 auto;
 }
 
+.tool-call-header-status-icon {
+  align-items: center;
+  justify-content: center;
+}
+
+.tool-call-header-status-icon svg {
+  width: 12px;
+  height: 12px;
+}
+
+.tool-call-header-status-label {
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.tool-call-header-status[data-status="completed"] {
+  color: var(--status-success);
+}
+
+.tool-call-header-status[data-status="running"] {
+  color: var(--status-warning);
+}
+
+.tool-call-header-status[data-status="error"] {
+  color: var(--status-error);
+}
+
 .tool-call-header-action {
   @apply inline-flex items-center justify-center;
   width: 1.6rem;
@@ -551,7 +584,7 @@
   width: 1.6rem;
   height: 1.6rem;
   border: none;
-  border-radius: 0.25rem;
+  border-radius: 0;
   background-color: transparent;
   color: var(--text-secondary);
 }
@@ -567,7 +600,7 @@
 }
 
 .tool-call-diff-mode-button {
-  @apply border text-xs font-semibold px-3 py-1 rounded transition-all duration-150;
+  @apply border text-xs font-semibold px-3 py-1 transition-all duration-150;
   border-color: var(--tool-call-border-color, var(--border-base));
   background-color: transparent;
   color: var(--text-secondary);
@@ -632,7 +665,7 @@
   font-family: var(--font-family-mono);
   font-size: 12px;
   padding: 2px 6px;
-  border-radius: 0.375rem;
+  border-radius: 0;
   border: 1px solid var(--tool-call-border-color, var(--border-base));
   background-color: var(--surface-code);
   color: var(--text-primary);
@@ -644,7 +677,7 @@
   color: var(--text-primary);
   background-color: var(--surface-code);
   border: 1px solid var(--tool-call-border-color, var(--border-base));
-  border-radius: 0.5rem;
+  border-radius: 0;
   padding: 0.5rem 0.75rem;
   word-break: break-word;
 }
@@ -663,7 +696,7 @@
   border: 1px solid var(--status-warning);
   color: var(--text-secondary);
   padding: 0.4rem 1.05rem;
-  border-radius: 0.5rem;
+  border-radius: 0;
   font-size: 0.8rem;
   font-weight: var(--font-weight-medium);
   line-height: 1.15;
@@ -708,7 +741,7 @@
   resize: vertical;
   background-color: var(--surface-code);
   border: 1px solid var(--tool-call-border-color, var(--border-base));
-  border-radius: 0.5rem;
+  border-radius: 0;
   color: var(--text-primary);
   padding: 0.6rem 0.75rem;
   font-size: 0.85rem;
@@ -863,7 +896,7 @@
   justify-content: center;
   gap: 0;
   border: none;
-  border-radius: 0.25rem;
+  border-radius: 0;
   color: var(--text-secondary);
 }
 
@@ -931,7 +964,7 @@
 
 .tool-call-markdown::-webkit-scrollbar-thumb {
   background-color: var(--border-base);
-  border-radius: 4px;
+  border-radius: 0;
   border: 2px solid transparent;
   background-clip: padding-box;
 }
@@ -1140,7 +1173,7 @@
 }
 
 .tool-call-action-button {
-  @apply border text-xs font-semibold px-3 py-1 rounded transition-colors h-8 flex items-center;
+  @apply border text-xs font-semibold px-3 py-1 transition-colors h-8 flex items-center;
   border-color: var(--tool-call-border-color, var(--border-base));
   color: var(--text-secondary);
   background-color: transparent;
@@ -1187,7 +1220,7 @@
   border-inline-start: 3px solid var(--status-error);
   padding: 12px;
   margin: 8px 0;
-  border-radius: 4px;
+  border-radius: 0;
   color: var(--status-error);
   font-size: var(--font-size-xs);
 }
diff --git a/packages/ui/src/styles/messaging/tool-call/todo.css b/packages/ui/src/styles/messaging/tool-call/todo.css
index 6d16c365e..cf72e5c3e 100644
--- a/packages/ui/src/styles/messaging/tool-call/todo.css
+++ b/packages/ui/src/styles/messaging/tool-call/todo.css
@@ -77,7 +77,6 @@
   font-size: calc(var(--font-size-xs) - 1px);
   text-transform: uppercase;
   letter-spacing: 0.08em;
-  border-radius: var(--radius-full);
   padding: var(--space-2xs) var(--space-sm);
   background-color: var(--surface-hover);
   color: var(--text-muted);
@@ -111,7 +110,6 @@
   font-size: var(--font-size-xs);
   text-transform: uppercase;
   letter-spacing: 0.08em;
-  border-radius: var(--radius-full);
   padding: var(--space-2xs) var(--space-sm);
   background-color: var(--surface-hover);
   color: var(--text-muted);
diff --git a/packages/ui/src/styles/messaging/virtual-follow-list.css b/packages/ui/src/styles/messaging/virtual-follow-list.css
index df2a51796..32ffac27a 100644
--- a/packages/ui/src/styles/messaging/virtual-follow-list.css
+++ b/packages/ui/src/styles/messaging/virtual-follow-list.css
@@ -49,7 +49,7 @@
 
 .virtual-follow-list-controls-container {
   position: absolute;
-  bottom: calc(var(--space-sm) + env(safe-area-inset-bottom, 0px));
+  bottom: calc(var(--space-xs) + env(safe-area-inset-bottom, 0px));
   left: 50%;
   transform: translateX(-50%);
   z-index: 20;
diff --git a/packages/ui/src/styles/panels.css b/packages/ui/src/styles/panels.css
index ebf571a35..4521493d7 100644
--- a/packages/ui/src/styles/panels.css
+++ b/packages/ui/src/styles/panels.css
@@ -1,6 +1,11 @@
 @import "./panels/tabs.css";
+@import "./components/tab-scroll.css";
 @import "./panels/empty-loading.css";
 @import "./panels/modal.css";
 @import "./panels/panel-shell.css";
 @import "./panels/session-layout.css";
+@import "./components/session-row-actions.css";
+@import "./components/session-tree.css";
+@import "./components/transcript-filters.css";
 @import "./panels/right-panel.css";
+@import "./panels/control-hover.css";
diff --git a/packages/ui/src/styles/panels/control-hover.css b/packages/ui/src/styles/panels/control-hover.css
new file mode 100644
index 000000000..9b8ee5f8a
--- /dev/null
+++ b/packages/ui/src/styles/panels/control-hover.css
@@ -0,0 +1,17 @@
+/* These controls rest on the base canvas, not the generic panel surface.
+   Keep that canvas and add the same local overlay as message/session rows. */
+.files-toggle-button:hover,
+.files-header-icon-button:hover,
+.git-change-row-action:hover,
+.file-viewer-toolbar-icon-button:hover,
+.file-viewer-toolbar-button:hover,
+.git-change-commit-button:hover:not(:disabled),
+.git-change-commit-button-overlay:hover {
+  background-color: var(--surface-base);
+  background-image: linear-gradient(var(--surface-hover-overlay), var(--surface-hover-overlay));
+}
+
+.git-change-section-header:hover {
+  background-color: var(--surface-secondary);
+  background-image: linear-gradient(var(--surface-hover-overlay), var(--surface-hover-overlay));
+}
diff --git a/packages/ui/src/styles/panels/panel-shell.css b/packages/ui/src/styles/panels/panel-shell.css
index fe45645ed..353c260eb 100644
--- a/packages/ui/src/styles/panels/panel-shell.css
+++ b/packages/ui/src/styles/panels/panel-shell.css
@@ -16,7 +16,7 @@
 .panel-header {
   @apply px-3 py-2 border-b;
   border-color: var(--border-base);
-  background-color: var(--surface-secondary);
+  background-color: var(--surface-shade-light);
 }
 
 .panel-title {
diff --git a/packages/ui/src/styles/panels/right-panel.css b/packages/ui/src/styles/panels/right-panel.css
index c7826df96..520df1fda 100644
--- a/packages/ui/src/styles/panels/right-panel.css
+++ b/packages/ui/src/styles/panels/right-panel.css
@@ -4,37 +4,33 @@
 .right-panel-tab-bar {
   flex: 0 0 var(--panel-header-height);
   min-height: var(--panel-header-height);
-  background-color: var(--surface-secondary);
-  border-bottom: 1px solid var(--border-base);
+  background-color: var(--surface-shade-light);
+  background-image: linear-gradient(to top, var(--tab-border) 1px, transparent 1px);
+  border-bottom: 0;
   position: relative;
   padding-inline: 0;
-}
-
-.right-panel-tab-bar::after {
-  content: '';
-  position: absolute;
-  bottom: -1px;
-  inset-inline-start: 0;
-  inset-inline-end: 0;
-  height: 1px;
-  background-color: var(--border-base);
-  z-index: 0;
+  padding-block: 0;
 }
 
 .right-panel-tab-bar .tab-container {
-  @apply flex items-center justify-between gap-1 px-2 pt-2 pb-0;
+  @apply flex items-center justify-between gap-1 px-2;
+  padding-block: 0;
+  align-items: center;
+  height: 100%;
 }
 
 /* Keep the shortcuts (close/pin) fixed; only the tabs should scroll. */
 .right-panel-tab-bar .tab-scroll {
-  @apply flex-1;
+  position: relative;
+  z-index: 1;
   width: auto;
+  min-width: 0;
 }
 
 /* Shortcuts on the left side - match left drawer icon colors */
 .tab-strip-shortcuts {
   @apply flex items-center gap-1 flex-shrink-0;
-  align-self: flex-start;
+  align-self: center;
   color: var(--text-muted);
 }
 
@@ -44,10 +40,9 @@
   font-family: var(--font-family-sans);
   cursor: grab;
   outline: none;
-  border: 1px solid transparent;
-  border-bottom: none;
-  border-radius: 8px 8px 0 0;
-  margin-inline-end: 2px;
+  border: 1px solid var(--tab-border);
+  border-inline-start-width: 0;
+  border-radius: 0;
   z-index: 1;
 }
 
@@ -66,25 +61,32 @@
 }
 
 .right-panel-tab-active {
-  background-color: var(--tab-active-bg);
-  border-color: transparent;
-  border-bottom: 2px solid var(--accent-primary);
+  background-color: var(--surface-secondary);
+  border-top: 1px solid var(--tab-border);
+  border-bottom-color: var(--surface-secondary);
   color: var(--tab-active-text);
   z-index: 2;
 }
 
+.right-panel-tab-draggable:first-child .right-panel-tab {
+  border-inline-start: 1px solid var(--tab-border);
+}
+
 .right-panel-tab-inactive {
-  background-color: var(--tab-inactive-bg);
-  color: color-mix(in oklab, var(--tab-inactive-text) 62%, transparent);
-  border-color: transparent;
-  border-bottom: 2px solid var(--tab-active-bg);
+  background-color: var(--surface-shade-light);
+  border-inline-end-color: var(--tab-border);
+  border-bottom-color: var(--tab-border);
+  color: var(--tab-inactive-text);
 }
 
 .right-panel-tab-inactive:hover {
-  background-color: var(--tab-inactive-hover-bg);
+  background-image: linear-gradient(var(--surface-hover-overlay), var(--surface-hover-overlay));
   color: var(--tab-inactive-text);
-  border-color: var(--border-base);
-  border-bottom-color: transparent;
+}
+
+.right-panel-tab-active:hover,
+.file-list-item-active:hover {
+  background-image: linear-gradient(var(--surface-hover-overlay), var(--surface-hover-overlay));
 }
 
 /* Files tab layout */
@@ -247,8 +249,8 @@
   @apply border-b-0;
 }
 
-.file-list-item:hover {
-  background-color: var(--surface-hover);
+.file-list-item:not(.file-list-item-active):not(.git-change-list-item-bulk-selected):hover {
+  background-color: var(--surface-hover-overlay);
 }
 
 .file-list-item-active {
@@ -264,6 +266,7 @@
 
 .git-change-list-item-bulk-selected:hover {
   background-color: color-mix(in srgb, var(--accent-primary) 12%, var(--surface-base));
+  background-image: linear-gradient(var(--surface-hover-overlay), var(--surface-hover-overlay));
 }
 
 .git-change-list-item-bulk-selected.file-list-item-active {
@@ -379,7 +382,6 @@
 
 .git-change-section-count {
   @apply text-[10px] px-1.5 py-0.5 shrink-0;
-  border-radius: 0;
   background-color: var(--surface-base);
   color: var(--text-muted);
   border: 1px solid var(--border-base);
@@ -472,7 +474,7 @@
   top: 50%;
   display: block;
   background-color: currentColor;
-  border-radius: 999px;
+  border-radius: 0;
   transform: translate(-50%, -50%);
 }
 
@@ -746,12 +748,12 @@
 
 .status-process-card {
   @apply border px-2 py-2 transition-colors duration-150;
-  border-color: var(--border-base);
   background-color: var(--surface-base);
 }
 
 .status-process-card:hover {
-  border-color: var(--border-strong);
+  background-color: var(--surface-base);
+  background-image: linear-gradient(var(--surface-hover-overlay), var(--surface-hover-overlay));
   box-shadow: none;
 }
 
@@ -771,6 +773,13 @@
 
 .right-panel-accordion-header-row {
   @apply flex items-center gap-2;
+  color: var(--text-secondary);
+  transition: color 150ms, background-color 150ms;
+}
+
+.right-panel-accordion-header-row:hover {
+  background-color: var(--surface-hover-overlay);
+  color: var(--text-primary);
 }
 
 .right-panel-accordion-header-row .right-panel-accordion-trigger {
@@ -788,7 +797,7 @@
 }
 
 .right-panel-accordion-trigger:hover {
-  background-color: var(--surface-hover);
+  background-color: transparent;
   color: var(--text-primary);
 }
 
@@ -800,6 +809,8 @@
 .right-panel-accordion-chevron {
   @apply h-4 w-4;
   color: var(--text-muted);
+  opacity: var(--icon-button-idle-opacity);
+  transition: color 150ms, opacity 150ms, transform 150ms ease;
 }
 
 .right-panel-section-grip {
@@ -808,7 +819,15 @@
   flex: 0 0 auto;
   margin-inline-end: 0.75rem;
   color: var(--text-muted);
+  opacity: var(--icon-button-idle-opacity);
   cursor: grab;
+  transition: color 150ms, opacity 150ms;
+}
+
+.right-panel-accordion-trigger:hover .right-panel-accordion-chevron,
+.right-panel-section-grip:hover {
+  color: var(--text-secondary);
+  opacity: 1;
 }
 
 .right-panel-accordion-content {
@@ -903,17 +922,29 @@
   flex-shrink: 0;
   border: none;
   background-color: transparent;
+  opacity: var(--icon-button-idle-opacity);
+  transition: color 150ms, opacity 150ms;
 }
 
 .section-info-trigger:hover {
-  color: var(--text-primary);
-  background-color: var(--surface-hover);
+  color: var(--text-secondary);
+  opacity: 1;
 }
 
 .section-info-trigger:focus-visible {
   @apply ring-2 ring-offset-1;
   ring-color: var(--accent-primary);
   ring-offset-color: var(--surface-secondary);
+  opacity: 1;
+}
+
+.right-panel-accordion-header-row .section-info-trigger:hover {
+  opacity: 1;
+}
+
+.status-tab-container .right-panel-accordion-content :is(.border, .status-process-card) {
+  border-width: 1px;
+  border-color: color-mix(in srgb, var(--border-base) 50%, transparent);
 }
 
 .section-label {
@@ -921,7 +952,13 @@
 }
 
 .section-info-icon {
-  @apply w-3.5 h-3.5;
+  @apply w-3 h-3;
+}
+
+@media (hover: none) {
+  .section-info-trigger {
+    opacity: 0.7;
+  }
 }
 
 .section-info-tooltip {
diff --git a/packages/ui/src/styles/panels/session-layout.css b/packages/ui/src/styles/panels/session-layout.css
index c7e18e27d..e326a24b1 100644
--- a/packages/ui/src/styles/panels/session-layout.css
+++ b/packages/ui/src/styles/panels/session-layout.css
@@ -105,6 +105,9 @@
 
 .session-sidebar-header {
   @apply flex flex-col w-full;
+  flex: 0 0 var(--panel-header-height);
+  height: var(--panel-header-height);
+  min-height: var(--panel-header-height);
   gap: 6px;
   justify-content: center;
   padding: var(--space-sm) var(--space-md);
@@ -137,7 +140,8 @@
 }
 
 .session-sidebar-title {
-  color: var(--text-primary);
+  color: var(--text-muted);
+  opacity: 0.6;
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-semibold);
   line-height: var(--line-height-tight);
@@ -259,7 +263,7 @@
   flex-shrink: 0;
   gap: var(--space-sm);
   padding-block: calc(var(--space-xl) + var(--space-sm));
-  background-color: var(--surface-secondary);
+  background-color: var(--surface-shade-light);
 }
 
 .session-sidebar-controls > * {
@@ -288,10 +292,6 @@
   box-shadow: inset 0 0 0 1px var(--accent-primary);
 }
 
-.session-sidebar-selector-group .selector-trigger-icon svg {
-  transition: transform 150ms ease;
-}
-
 .session-sidebar-selector-prefix {
   color: var(--text-muted);
 }
@@ -305,10 +305,6 @@
   max-height: 20rem;
 }
 
-.session-sidebar-selector-group .selector-trigger:is([aria-expanded="true"], [data-expanded]) .selector-trigger-icon svg {
-  transform: rotate(180deg);
-}
-
 .session-sidebar-toggle {
   display: inline-flex;
   align-items: center;
@@ -342,17 +338,6 @@
   @apply flex flex-col gap-1 w-full;
 }
 
-.session-sidebar-selector-hints {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-evenly;
-  width: 100%;
-  gap: var(--space-xs);
-  color: var(--text-muted);
-  font-size: var(--font-size-xs);
-}
-
 .session-toolbar .session-header-hints {
   min-width: 0;
   flex-shrink: 1;
@@ -519,96 +504,82 @@
 }
 
 .session-item-base {
-  @apply w-full flex flex-col gap-1 text-start transition-colors outline-none;
-  padding: 7px 10px;
+  @apply w-full flex items-center gap-1 text-start transition-colors;
+  padding: 4px 6px;
+  min-height: 36px;
   font-family: var(--font-family-sans);
   font-size: var(--font-size-sm);
 }
 
 
-.session-item-base.session-item-nested {
-  padding-inline-start: var(--session-indent);
-  position: relative;
-}
-
-.session-item-base.session-item-nested::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  inset-inline-start: var(--session-connector-offset);
-  width: 1px;
-  background-color: var(--text-secondary);
-  opacity: 0.65;
-  pointer-events: none;
+.session-item-base.session-item-border-user {
+  border-inline-start: 1px solid transparent;
 }
 
-.session-item-base.session-item-nested.session-item-child-last::before {
-  bottom: 50%;
+.session-item-base.session-item-border-assistant {
+  border-inline-start: 1px solid transparent;
 }
 
-.session-item-base.session-item-nested::after {
-  content: "";
-  position: absolute;
-  top: 50%;
-  inset-inline-start: var(--session-connector-offset);
-  width: 0.875rem;
-  height: 1px;
-  background-color: var(--text-secondary);
-  opacity: 0.65;
-  transform: translateY(-0.5px);
-  pointer-events: none;
+.session-item-kind-user .session-item-kind-icon {
+  color: var(--message-user-border);
 }
 
-.session-item-base.session-item-border-user {
-  border-inline-start: 1px solid var(--message-user-border);
+.session-item-kind-assistant .session-item-kind-icon {
+  color: var(--message-assistant-border);
 }
 
-.session-item-base.session-item-border-assistant {
-  border-inline-start: 1px solid var(--message-assistant-border);
-}
-
-.session-item-expander {
-  @apply flex-shrink-0 p-0.5 transition-colors;
-  border-radius: 0;
+.session-item-kind-icon {
+  opacity: 0.5;
 }
 
-.session-item-expander--spacer {
-  width: calc(0.875rem + 0.25rem);
-  height: calc(0.875rem + 0.25rem);
+.session-item-base:is(:hover, :focus-within, .session-item-active) .session-item-kind-icon {
+  opacity: 1;
 }
 
-.session-item-base:focus-visible {
+.session-item-select:focus-visible,
+.session-item-expander:focus-visible {
   outline: 1px solid var(--accent-primary);
   outline-offset: -1px;
 }
 
-.session-item-row {
-  @apply flex items-center gap-2 w-full;
+.session-item-select {
+  @apply flex items-center gap-2 min-w-0 flex-1 text-start;
+  align-self: stretch;
+  color: inherit;
+  font: inherit;
+  overflow: hidden;
 }
 
-.session-item-header {
-  @apply justify-between;
+.session-item-badges {
+  @apply flex items-center gap-1 min-w-0;
+  max-width: 45%;
+  flex-shrink: 0;
+  font-size: var(--font-size-xs);
+  color: var(--text-secondary);
 }
 
-.session-item-title-row {
-  @apply flex items-start gap-2 min-w-0 flex-1;
+.session-item-badges .status-indicator {
+  min-width: 0;
+  overflow: hidden;
 }
 
-.session-item-meta {
-  @apply justify-between items-center;
-  font-size: var(--font-size-xs);
-  color: var(--text-secondary);
-  margin-top: 0.125rem;
+.session-item-badges .session-status {
+  flex-shrink: 0;
+  max-width: 100%;
 }
 
-.session-item-active .session-item-meta {
-  color: var(--text-secondary);
-  opacity: 1;
+.session-item-status-label {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.session-item-badges:empty {
+  display: none;
 }
 
 .session-item-actions {
-  @apply flex items-center gap-1;
+  @apply flex items-center flex-shrink-0;
 }
 
 @media (hover: hover) and (pointer: fine) {
@@ -617,7 +588,8 @@
     pointer-events: none;
   }
 
-  .session-item-base:is(:hover, :focus-within) .session-item-actions {
+  .session-item-base:is(:hover, :focus-within) .session-item-actions,
+  .session-item-actions:has([data-expanded]) {
     opacity: 1;
     pointer-events: auto;
   }
@@ -645,12 +617,16 @@
 }
 
 .session-item-inactive:hover {
-  background-color: var(--surface-hover);
+  background-color: var(--surface-hover-overlay);
   color: var(--text-primary);
 }
 
 
 
+.session-item-active:hover {
+  background-image: linear-gradient(var(--surface-hover-overlay), var(--surface-hover-overlay));
+}
+
 .session-item-active .session-item-close:hover {
   background-color: var(--surface-hover);
   color: var(--text-primary);
@@ -662,11 +638,24 @@
 }
 
 .session-item-title--clamp {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
+  display: block;
   overflow: hidden;
-  word-break: break-word;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+@media (pointer: coarse) {
+  .session-item-select,
+  .session-item-expander,
+  .session-item-actions .action-overflow-trigger {
+    min-height: var(--touch-target-size);
+  }
+
+  .session-item-expander,
+  .session-item-expander--spacer,
+  .session-item-actions .action-overflow-trigger {
+    min-width: var(--touch-target-size);
+  }
 }
 
 .session-item-close {
@@ -683,6 +672,7 @@
 .session-list-footer {
   @apply border-t;
   border-color: var(--border-base);
+  background-color: var(--surface-shade-light);
 }
 
 .session-new-button {
@@ -813,7 +803,7 @@
   gap: 0.25rem;
   padding: 0.125rem 0.5rem;
   border-radius: var(--pill-radius);
-  border: 1px solid transparent;
+  border: 1px solid color-mix(in oklab, currentColor 28%, transparent);
   min-height: 22px;
   line-height: 1;
 }
@@ -835,7 +825,6 @@
 .status-indicator.session-yolo-mode {
   color: var(--session-yolo-accent);
   background-color: color-mix(in oklab, var(--session-yolo-accent) 14%, transparent);
-  border-color: color-mix(in oklab, var(--session-yolo-accent) 28%, transparent);
 }
 
 .status-indicator.session-yolo-mode .status-dot {
@@ -845,14 +834,12 @@
 .status-indicator.worktree-indicator {
   color: var(--text-primary);
   background-color: color-mix(in oklab, var(--text-secondary) 14%, transparent);
-  border-color: color-mix(in oklab, var(--text-secondary) 24%, transparent);
   text-transform: none;
   letter-spacing: 0.02em;
 }
 
 .session-item-active .status-indicator.worktree-indicator {
   background-color: color-mix(in oklab, var(--text-primary) 12%, transparent);
-  border-color: color-mix(in oklab, var(--text-primary) 20%, transparent);
 }
 
 .status-indicator.worktree-indicator .worktree-indicator-label {
diff --git a/packages/ui/src/styles/panels/tabs.css b/packages/ui/src/styles/panels/tabs.css
index 5b1941fba..ca55a1423 100644
--- a/packages/ui/src/styles/panels/tabs.css
+++ b/packages/ui/src/styles/panels/tabs.css
@@ -6,6 +6,9 @@
 
 .tab-bar-instance {
   background-color: var(--surface-secondary);
+  background-image: linear-gradient(to top, var(--tab-border) 1px, transparent 1px);
+  position: relative;
+  border-bottom: 0;
 }
 
 .tab-bar-session {
@@ -24,9 +27,39 @@
 }
 
 .tab-bar-instance .tab-scroll {
-  flex: 1 1 auto;
+  position: relative;
+  z-index: 1;
   min-width: 0;
   width: auto;
+  overflow-y: hidden;
+}
+
+.tab-bar-instance .tab-container {
+  padding-block: 0;
+  /* Preserve the previous strip's outer height, including its baseline. */
+  height: calc(var(--chrome-height) + var(--space-xs) + var(--scrollbar-size) + 1px);
+}
+
+:is(.tab-bar-instance, .right-panel-tab-bar) :is(.tab-strip, .tab-strip-tabs, .tab-draggable, .right-panel-tab-draggable) {
+  height: 100%;
+  align-items: stretch;
+}
+
+/* Fixed content height reserves the scrollbar lane even when overflow is absent.
+   scrollbar-gutter only reserves inline gutters, not this horizontal lane. */
+.tab-bar-instance .tab-strip,
+.right-panel-tab-bar .tab-strip {
+  height: calc(var(--chrome-height) + var(--space-xs) - 1px);
+}
+
+.tab-bar-instance .tab-draggable > div {
+  height: 100%;
+  display: flex;
+}
+
+:is(.tab-bar-instance, .right-panel-tab-bar) :is(.tab-base, .tab-pill, .right-panel-tab) {
+  height: 100%;
+  padding-block: 0;
 }
 
 .tab-bar-actions {
@@ -50,14 +83,13 @@
 }
 
 .tab-strip-tabs {
-  @apply flex items-center gap-1 flex-shrink-0;
+  @apply flex items-center flex-shrink-0;
 }
 
 .tab-draggable {
   @apply flex-shrink-0;
   user-select: none;
   transition: transform 140ms ease, opacity 140ms ease;
-  will-change: transform;
 }
 
 .tab-draggable-active {
@@ -93,9 +125,12 @@
 }
 
 .tab-base {
-  @apply inline-flex items-center gap-2 px-3 py-2 rounded-t-md max-w-[200px] transition-colors text-sm font-normal;
+  @apply inline-flex items-center gap-2 px-3 py-2 max-w-[200px] transition-colors text-sm font-normal;
   font-family: var(--font-family-sans);
   outline: none;
+  border: 1px solid var(--tab-border);
+  border-inline-start-width: 0;
+  border-radius: 0;
 }
 
 .tab-base:focus-visible {
@@ -107,13 +142,33 @@
 .tab-active {
   background-color: var(--tab-active-bg);
   color: var(--tab-active-text);
-  border-bottom: 2px solid var(--accent-primary);
+  border-top: 1px solid var(--tab-border);
+  border-bottom-color: transparent;
+}
+
+.tab-bar-instance .tab-active,
+.tab-bar-instance .tab-active:hover {
+  background-color: var(--surface-shade-light);
+  border-bottom-color: var(--surface-shade-light);
+}
+
+.tab-bar-instance .tab-active {
+  position: relative;
+}
+
+.tab-bar-instance .tab-draggable:first-child :is(.tab-base, .tab-pill) {
+  border-inline-start: 1px solid var(--tab-border);
 }
 
 .tab-inactive {
   background-color: var(--tab-inactive-bg);
-  color: color-mix(in oklab, var(--tab-inactive-text) 62%, transparent);
-  border-bottom: 2px solid var(--tab-active-bg);
+  border-inline-end-color: var(--tab-border);
+  border-bottom-color: var(--tab-border);
+  color: var(--tab-inactive-text);
+}
+
+.tab-bar-instance .tab-inactive {
+  background-color: var(--surface-secondary);
 }
 
 .tab-inactive:hover {
@@ -130,7 +185,7 @@
 }
 
 .tab-close {
-  @apply opacity-100 hover:bg-red-500 hover:text-white rounded p-0.5 transition-all cursor-pointer;
+  @apply opacity-100 hover:bg-red-500 hover:text-white p-0.5 transition-all cursor-pointer;
 }
 
 .tab-close:focus-visible {
@@ -189,7 +244,7 @@
 }
 
 .new-tab-button {
-  @apply inline-flex items-center justify-center w-8 h-8 flex-shrink-0 rounded-md transition-colors;
+  @apply inline-flex items-center justify-center w-8 h-8 flex-shrink-0 transition-colors;
   background-color: var(--new-tab-bg);
   color: var(--new-tab-text);
 }
@@ -216,10 +271,12 @@
 }
 
 .tab-pill {
-  @apply inline-flex items-center gap-1 px-3 py-2 rounded-t-md max-w-[220px] text-sm;
+  @apply inline-flex items-center gap-1 px-3 py-2 max-w-[220px] text-sm;
   background-color: var(--tab-inactive-bg);
   color: var(--tab-inactive-text);
-  border-bottom: 2px solid var(--tab-active-bg);
+  border: 1px solid var(--tab-border);
+  border-inline-start-width: 0;
+  border-radius: 0;
   outline: none;
 }
 
@@ -230,9 +287,10 @@
 }
 
 .tab-pill-active {
-  background-color: var(--tab-active-bg);
+  background-color: var(--surface-shade-light);
   color: var(--tab-active-text);
-  border-bottom-color: var(--accent-primary);
+  border-top: 1px solid var(--tab-border);
+  border-bottom-color: var(--surface-shade-light);
 }
 
 .tab-pill-button {
@@ -240,7 +298,7 @@
 }
 
 .tab-pill-close {
-  @apply inline-flex items-center justify-center rounded w-5 h-5 text-xs;
+  @apply inline-flex items-center justify-center w-5 h-5 text-xs;
 }
 
 .tab-pill-close:hover {
@@ -249,10 +307,11 @@
 
 /* Session tabs */
 .session-tab-base {
-  @apply inline-flex items-center gap-2 px-3 py-1.5 rounded-t-md max-w-[150px] transition-colors text-sm;
+  @apply inline-flex items-center gap-2 px-3 py-1.5 max-w-[150px] transition-colors text-sm;
   font-family: var(--font-family-sans);
   outline: none;
-  border-bottom: 2px solid transparent;
+  border: 1px solid var(--tab-border);
+  margin-inline-end: -1px;
 }
 
 .session-tab-base:focus-visible {
@@ -263,7 +322,6 @@
 
 .session-tab-active {
   background-color: var(--session-tab-active-bg);
-  border-bottom-color: var(--accent-primary);
   color: var(--session-tab-active-text);
   font-weight: var(--font-weight-medium);
 }
diff --git a/packages/ui/src/styles/tokens.css b/packages/ui/src/styles/tokens.css
index 205308d44..b2680512e 100644
--- a/packages/ui/src/styles/tokens.css
+++ b/packages/ui/src/styles/tokens.css
@@ -5,12 +5,15 @@
   --surface-primary: var(--surface-base);
   --surface-secondary: #f5f5f5;
   --surface-muted: #f8fafc;
+  --surface-shade-light: color-mix(in oklab, var(--surface-secondary) 75%, var(--surface-base));
+  --surface-shade-strong: color-mix(in oklab, var(--surface-secondary) 25%, var(--surface-base));
   --surface-code: #f1f5f9;
   --surface-hover: #e0e0e0;
-  --surface-chrome: color-mix(in oklab, var(--surface-secondary) 58%, var(--surface-base));
+  --surface-chrome: var(--surface-shade-light);
   --surface-subtle: color-mix(in oklab, var(--surface-secondary) 36%, var(--surface-base));
   --surface-control: color-mix(in oklab, var(--surface-secondary) 72%, var(--surface-base));
-  --surface-interactive-hover: color-mix(in oklab, var(--text-primary) 7%, var(--surface-chrome));
+  --surface-interactive-hover: color-mix(in oklab, var(--text-primary) 4%, var(--surface-secondary));
+  --surface-hover-overlay: color-mix(in oklab, var(--text-primary) 4%, transparent);
   --selection-neutral-bg: color-mix(in oklab, var(--text-primary) 7%, transparent);
   --selection-neutral-strong-bg: color-mix(in oklab, var(--text-primary) 10%, transparent);
   --markdown-table-row-odd: transparent;
@@ -41,7 +44,7 @@
   --status-warning: #ff9800;
   
   /* Message-specific tokens */
-  --message-user-bg: color-mix(in oklab, var(--surface-secondary) 88%, var(--message-user-border));
+  --message-user-bg: color-mix(in oklab, var(--surface-secondary) 94%, var(--message-user-border));
   --message-user-border: #2196f3;
   --message-assistant-bg: var(--message-tool-bg);
   --message-assistant-border: #d97706;
@@ -57,10 +60,11 @@
   --message-part-header-title-font-size: var(--font-size-sm);
   --message-part-header-title-font-weight: var(--font-weight-regular);
   --message-part-header-title-line-height: var(--line-height-normal);
+  --message-part-hover: var(--surface-hover-overlay);
 
-  /* Session list selection tints */
-  --session-user-active-bg: color-mix(in oklab, var(--surface-secondary) 85%, var(--message-user-border));
-  --session-assistant-active-bg: color-mix(in oklab, var(--surface-secondary) 85%, var(--message-assistant-border));
+  /* Selection is neutral; the icon alone identifies the participant. */
+  --session-user-active-bg: var(--list-item-highlight-bg-solid);
+  --session-assistant-active-bg: var(--list-item-highlight-bg-solid);
 
   /* Semantic component colors */
   --session-status-working-fg: #b45309;
@@ -134,14 +138,14 @@
   --button-primary-bg: var(--accent-primary);
   --button-primary-hover-bg: var(--accent-hover);
   --button-primary-text: var(--text-on-accent);
-  --tab-active-bg: var(--accent-primary);
-  --tab-active-hover-bg: var(--accent-hover);
-  --tab-active-text: var(--text-inverted);
-  --tab-inactive-bg: var(--surface-muted);
-  --tab-inactive-hover-bg: var(--surface-hover);
-  --tab-inactive-text: var(--text-secondary);
-  --tab-rail-bg: var(--surface-chrome);
-  --tab-border: var(--border-divider);
+  --tab-active-bg: var(--surface-base);
+  --tab-active-hover-bg: color-mix(in oklab, var(--text-primary) 4%, var(--surface-base));
+  --tab-active-text: var(--text-primary);
+  --tab-inactive-bg: var(--surface-secondary);
+  --tab-inactive-hover-bg: var(--surface-muted);
+  --tab-inactive-text: var(--text-muted);
+  --tab-rail-bg: var(--surface-secondary);
+  --tab-border: var(--border-base);
   --new-tab-bg: var(--surface-secondary);
   --new-tab-hover-bg: var(--surface-hover);
   --new-tab-text: var(--text-muted);
@@ -160,6 +164,7 @@
   --control-height-sm: 24px;
   --control-height: 28px;
   --selector-height: 36px;
+  --touch-target-size: 40px;
   --scrollbar-size: 8px;
   --icon-button-size: 26px;
   --icon-size: 14px;
@@ -175,9 +180,9 @@
   --radius-full: 0;
   --button-padding-y: 0.5rem;
   --button-padding-x: 0.75rem;
-  --button-radius: 0.5rem;
-  --chip-radius: 0.375rem;
-  --pill-radius: 9999px;
+  --button-radius: 0;
+  --chip-radius: 999px;
+  --pill-radius: var(--chip-radius);
   
   /* Typography tokens */
   --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
@@ -239,7 +244,7 @@
     --status-warning: #ff9800;
     
     /* Message-specific tokens */
-    --message-user-bg: #202734;
+    --message-user-bg: color-mix(in oklab, var(--surface-secondary) 92%, var(--message-user-border));
     --message-user-border: #42a5f5;
     --message-assistant-bg: var(--message-tool-bg);
     --message-assistant-border: #d97706;
@@ -301,12 +306,6 @@
     --button-primary-bg: #3f3f46;
     --button-primary-hover-bg: #52525b;
     --button-primary-text: #f5f6f8;
-    --tab-active-bg: #3f3f46;
-    --tab-active-hover-bg: #52525b;
-    --tab-active-text: #f5f6f8;
-    --tab-inactive-bg: #2f2f36;
-    --tab-inactive-hover-bg: #3d3d45;
-    --tab-inactive-text: #d4d4d8;
   }
 }
 
@@ -345,7 +344,7 @@
   --status-warning: #ff9800;
   
   /* Message-specific tokens */
-  --message-user-bg: #202734;
+  --message-user-bg: color-mix(in oklab, var(--surface-secondary) 92%, var(--message-user-border));
   --message-user-border: #2196f3;
   --message-assistant-bg: var(--message-tool-bg);
   --message-assistant-border: #d97706;
@@ -405,12 +404,6 @@
   --button-primary-bg: #3f3f46;
   --button-primary-hover-bg: #52525b;
   --button-primary-text: #f5f6f8;
-  --tab-active-bg: #3f3f46;
-  --tab-active-hover-bg: #52525b;
-  --tab-active-text: #f5f6f8;
-  --tab-inactive-bg: #2f2f36;
-  --tab-inactive-hover-bg: #3d3d45;
-  --tab-inactive-text: #d4d4d8;
   --button-danger-text: var(--text-inverted);
   --message-error-bg: rgba(244, 67, 54, 0.12);
   --message-error-bg-strong: rgba(244, 67, 54, 0.2);
diff --git a/packages/ui/src/styles/utilities.css b/packages/ui/src/styles/utilities.css
index cfa8308fa..875e35b1a 100644
--- a/packages/ui/src/styles/utilities.css
+++ b/packages/ui/src/styles/utilities.css
@@ -114,7 +114,6 @@
   min-height: 24px;
   padding-inline: var(--space-sm);
   border: 1px solid var(--border-base);
-  border-radius: 0;
   color: var(--text-primary);
   font-size: var(--font-size-sm);
   font-variant-numeric: tabular-nums;
@@ -176,6 +175,14 @@
   font-size: var(--icon-size);
 }
 
+@media (pointer: coarse) {
+  .panel-header-actions > button {
+    width: var(--touch-target-size);
+    height: var(--touch-target-size);
+    min-width: var(--touch-target-size);
+  }
+}
+
 .disclosure-chevron {
   flex: 0 0 auto;
   transition: transform 150ms ease;
diff --git a/packages/ui/src/types/global.d.ts b/packages/ui/src/types/global.d.ts
index 9cda5d459..e18ed98e4 100644
--- a/packages/ui/src/types/global.d.ts
+++ b/packages/ui/src/types/global.d.ts
@@ -81,7 +81,7 @@ declare global {
       proxySessionId?: string
       skipTlsVerify: boolean
     }) => Promise<{ ok: boolean }>
-    openPreferences?: (section: SettingsSectionId, context?: { instanceId?: string; location?: LocationRef }) => Promise<unknown>
+    openPreferences?: (section: SettingsSectionId, context?: { instanceId?: string; location?: LocationRef }, toggle?: boolean) => Promise<unknown>
     getPreferencesRequest?: () => Promise<unknown>
     getPreferencesSection?: () => Promise<unknown>
     preferencesReady?: () => Promise<unknown>
diff --git a/packages/ui/src/types/message.ts b/packages/ui/src/types/message.ts
index 9b49596b1..f8a0457d1 100644
--- a/packages/ui/src/types/message.ts
+++ b/packages/ui/src/types/message.ts
@@ -1,4 +1,6 @@
 import type {
+  ModelRef,
+  SessionMessageProviderState,
   SessionStructuredError,
 } from "@opencode-ai/client"
 
@@ -17,7 +19,11 @@ interface TextMessagePart extends PartBase { type: "text"; text: string }
 interface ReasoningMessagePart extends PartBase { type: "reasoning"; text: string }
 interface FileMessagePart extends PartBase { type: "file"; filename?: string }
 interface ToolMessagePart extends PartBase { type: "tool"; tool: string; state?: ToolState }
-interface CompactionMessagePart extends PartBase { type: "compaction" }
+interface CompactionMessagePart extends PartBase {
+  type: "compaction"
+  model?: ModelRef
+  providerState?: SessionMessageProviderState
+}
 interface StepStartMessagePart extends PartBase { type: "step-start" }
 interface StepFinishMessagePart extends PartBase { type: "step-finish" }
 
@@ -77,6 +83,7 @@ export interface MessageInfo {
   role: "user" | "assistant"
   time: {
     created: number
+    streamed?: number
     completed?: number
   }
   mode?: string
diff --git a/packages/ui/tests/browser/appearance.test.ts b/packages/ui/tests/browser/appearance.test.ts
new file mode 100644
index 000000000..fda1e9886
--- /dev/null
+++ b/packages/ui/tests/browser/appearance.test.ts
@@ -0,0 +1,114 @@
+import assert from "node:assert/strict"
+import { after, before, test } from "node:test"
+import { fileURLToPath } from "node:url"
+import { mkdir } from "node:fs/promises"
+import { chromium, type Browser, type Page } from "playwright"
+import { createServer, type ViteDevServer } from "vite"
+import solid from "vite-plugin-solid"
+
+let server: ViteDevServer, browser: Browser, url: string
+before(async () => {
+  server = await createServer({
+    configFile: false, root: fileURLToPath(new URL("../..", import.meta.url)), logLevel: "error",
+    plugins: [solid(), { name: "appearance-fixture", configureServer(s) {
+      s.middlewares.use("/fixture", async (_req, res) => {
+        res.setHeader("Content-Type", "text/html")
+        res.end(await s.transformIndexHtml("/fixture", '<html><body><div id="root" style="height:100vh"></div><script type="module" src="/tests/browser/fixtures/appearance.tsx"></script></body></html>'))
+      })
+    } }], resolve: { dedupe: ["solid-js"] }, optimizeDeps: { exclude: ["lucide-solid"] },
+    server: { host: "127.0.0.1", port: 0, hmr: false, watch: null },
+  })
+  await server.listen()
+  url = `http://127.0.0.1:${(server.httpServer!.address() as { port: number }).port}/fixture`
+  browser = await chromium.launch({ executablePath: process.env.CODENOMAD_BROWSER_PATH || undefined })
+})
+after(async () => { await browser?.close(); await server?.close() })
+
+function merge(target: any, patch: any): any {
+  const result = structuredClone(target)
+  for (const [key, value] of Object.entries(patch)) {
+    if (value === null) delete result[key]
+    else result[key] = typeof value === "object" && !Array.isArray(value) ? merge(result[key] ?? {}, value) : value
+  }
+  return result
+}
+async function open(run: (page: Page) => Promise<void>) {
+  const page = await browser.newPage({ viewport: { width: 1600, height: 1100 }, locale: "en-US" })
+  let state: any = {}
+  await page.route("**/api/**", async route => {
+    const request = route.request()
+    if (request.url().includes("/storage/state/ui") && request.method() === "PATCH") state = merge(state, request.postDataJSON())
+    await route.fulfill({ contentType: "application/json", body: JSON.stringify(request.url().includes("/storage/state/ui") ? state : {}) })
+  })
+  try { await page.goto(url); await page.waitForFunction(() => Boolean((window as any).appearanceFixture)); await run(page) }
+  finally { await page.close() }
+}
+
+test("mode filters a flat palette list and retains both choices across reload", async () => open(async page => {
+  const picker = page.locator(".theme-scheme-picker")
+  const mode = async (name: string) => {
+    await page.locator(".theme-scheme-mode").getByRole("button", { name, exact: true }).click()
+    await page.waitForFunction(() => !document.querySelector<HTMLSelectElement>(".theme-scheme-picker")?.disabled)
+  }
+  await mode("Dark")
+  await picker.selectOption("builtin:slate")
+  await page.waitForFunction(() => document.documentElement.dataset.colorScheme === "slate")
+  assert.equal(await picker.locator('option[value="builtin:linen"]').count(), 0)
+  assert.equal(await picker.locator('option[value="builtin:classic"]').textContent(), "Classic")
+  assert.equal(await picker.locator("optgroup").count(), 0)
+  await mode("Light")
+  await picker.selectOption("builtin:linen")
+  await page.waitForFunction(() => document.documentElement.dataset.colorScheme === "linen")
+  assert.equal(await picker.locator('option[value="builtin:slate"]').count(), 0)
+  await mode("Dark")
+  await page.waitForFunction(() => document.documentElement.dataset.colorScheme === "slate")
+  await mode("Auto")
+  assert.equal(await page.locator(".theme-scheme-appearance-options").count(), 1)
+  await page.emulateMedia({ colorScheme: "light" })
+  await page.waitForFunction(() => document.documentElement.dataset.colorScheme === "linen")
+  await page.waitForFunction(() => document.querySelector<HTMLSelectElement>(".theme-scheme-picker")?.value === "builtin:linen")
+  assert.equal(await picker.locator('option[value="builtin:slate"]').count(), 0)
+  await page.emulateMedia({ colorScheme: "dark" })
+  await page.waitForFunction(() => document.documentElement.dataset.colorScheme === "slate")
+  await page.waitForFunction(() => document.querySelector<HTMLSelectElement>(".theme-scheme-picker")?.value === "builtin:slate")
+  assert.equal(await picker.locator('option[value="builtin:linen"]').count(), 0)
+  await page.reload()
+  await page.waitForFunction(() => document.documentElement.dataset.colorScheme === "slate")
+  await mode("Light")
+  await page.waitForFunction(() => document.documentElement.dataset.colorScheme === "linen")
+}))
+
+test("Classic and soft palettes preserve local subtle hover on messages, sessions and panels", async () => open(async page => {
+  const ids = ["classic", "mist", "slate", "clay", "sage", "porcelain", "dawn", "parchment", "linen", "iris", "sage-light", "light", "basalt", "fjord", "lichen", "velvet", "ember"]
+  const targets = [".tool-call-header", ".session-item-inactive", ".session-item-active", ".file-list-item", ".file-list-item-active", ".file-viewer-toolbar-icon-button", ".git-change-section-header", ".status-process-card", ".right-panel-accordion-header-row", '.settings-nav-button[data-selected="true"]', ".right-panel-tab-active", ".right-panel-tab-inactive"]
+  const output = process.env.CODENOMAD_PALETTE_SCREENSHOTS
+  if (output) await mkdir(output, { recursive: true })
+  for (const id of ids) {
+    await page.evaluate(id => (window as any).appearanceFixture.apply(id), id)
+    await page.mouse.move(1599, 1099)
+    await page.waitForTimeout(220)
+    const surfaces = await page.evaluate(() => {
+      const css = getComputedStyle(document.documentElement)
+      return Object.fromEntries(["--surface-base", "--surface-secondary", "--surface-code", "--message-assistant-bg", "--message-tool-bg"].map(k => [k, css.getPropertyValue(k)]))
+    })
+    assert.equal(surfaces["--surface-code"], id === "light" ? "#F1F5F9" : surfaces["--surface-base"], id)
+    assert.equal(surfaces["--message-tool-bg"], surfaces["--message-assistant-bg"], id)
+    assert.notEqual(surfaces["--message-tool-bg"], surfaces["--surface-secondary"], id)
+    assert.equal(await page.locator(".settings-screen-content").evaluate(e => getComputedStyle(e).backgroundColor), await page.locator(".session-sidebar").evaluate(e => getComputedStyle(e).backgroundColor), id)
+    for (const selector of targets) {
+      const element = page.locator(selector).first()
+      await page.mouse.move(1599, 1099); await page.waitForTimeout(220)
+      const idle = await element.evaluate(e => [getComputedStyle(e).backgroundColor, getComputedStyle(e).backgroundImage])
+      await element.hover(); await page.waitForTimeout(220)
+      const hovered = await element.evaluate(e => [getComputedStyle(e).backgroundColor, getComputedStyle(e).backgroundImage])
+      assert.notDeepEqual(hovered, idle, `${id} ${selector}: hover must remain visible`)
+      if (selector === ".session-item-active" || selector === ".file-list-item-active" || selector.includes("data-selected") || selector.startsWith(".right-panel-tab")) {
+        assert.equal(hovered[0], idle[0], `${id} ${selector}: keep the original selected/tab surface`)
+      }
+      // Each row uses the same translucent 4% layer on its own resting surface,
+      // including selected rows (whose selection color must not disappear).
+      assert.match(hovered.join(" "), /0\.04/, `${id} ${selector}: local 4% overlay`)
+    }
+    if (output) await page.screenshot({ path: `${output}/${id}.png` })
+  }
+}))
diff --git a/packages/ui/tests/browser/fixtures/appearance.tsx b/packages/ui/tests/browser/fixtures/appearance.tsx
new file mode 100644
index 000000000..070e56d91
--- /dev/null
+++ b/packages/ui/tests/browser/fixtures/appearance.tsx
@@ -0,0 +1,43 @@
+import { render } from "solid-js/web"
+import { ConfigProvider, setColorSchemePreference, setThemePreference } from "../../../src/stores/preferences"
+import { I18nProvider } from "../../../src/lib/i18n"
+import { ThemeProvider } from "../../../src/lib/theme"
+import { GeneralSettingsSection } from "../../../src/components/settings/general-settings-section"
+import ToolCall from "../../../src/components/tool-call"
+import { normalizeColorScheme } from "../../../src/lib/theme-scheme"
+import "../../../src/index.css"
+
+render(() => <ConfigProvider><I18nProvider><ThemeProvider>
+  <div style={{ display: "grid", "grid-template-columns": "260px 1fr 300px", width: "100%", height: "100%", color: "var(--text-primary)" }}>
+    <div class="session-sidebar" style={{ padding: "16px" }}>
+      <div class="session-item-base session-item-inactive" tabindex="0">Review session</div>
+      <div class="session-item-base session-item-active" tabindex="0">Selected session</div>
+    </div>
+    <div class="session-view" style={{ display: "block", overflow: "auto" }}>
+      <div class="message-item-base"><p>Assistant response — readable text on the tool/message surface.</p></div>
+      <ToolCall instanceId="appearance-fixture" sessionId="session" messageId="message" toolCall={{
+        id: "tool", type: "tool", callID: "call", tool: "bash",
+        state: { status: "completed", input: { command: "git status" }, output: "On branch review\nNothing to commit\nWorking tree clean" },
+      }} />
+      <div style={{ height: "80px" }}><textarea class="prompt-input" aria-label="Fixture composer" value="" /></div>
+      <section class="settings-screen-content"><GeneralSettingsSection showStartupState={false} /></section>
+    </div>
+    <div class="right-panel-accordion">
+      <div><button class="right-panel-tab right-panel-tab-active">Active</button><button class="right-panel-tab right-panel-tab-inactive">Inactive</button></div>
+      <div class="right-panel-accordion-item"><div class="right-panel-accordion-header-row" tabindex="0">Status</div></div>
+      <div class="file-list-item" tabindex="0">File.ts</div>
+      <div class="file-list-item file-list-item-active" tabindex="0">Selected.ts</div>
+      <button class="file-viewer-toolbar-icon-button" aria-label="File action">↗</button>
+      <div class="git-change-section-header" tabindex="0">Changes</div>
+      <div class="status-process-card" tabindex="0">Background task</div>
+      <button class="settings-nav-button" data-selected="true">General</button>
+    </div>
+  </div>
+</ThemeProvider></I18nProvider></ConfigProvider>, document.getElementById("root")!)
+;(window as any).appearanceFixture = {
+  apply: async (id: string) => {
+    const scheme = normalizeColorScheme(id)
+    await setColorSchemePreference(scheme)
+    await setThemePreference(scheme.appearance)
+  },
+}
diff --git a/packages/ui/tests/browser/fixtures/tab-chrome-electron.cjs b/packages/ui/tests/browser/fixtures/tab-chrome-electron.cjs
new file mode 100644
index 000000000..3df5032ef
--- /dev/null
+++ b/packages/ui/tests/browser/fixtures/tab-chrome-electron.cjs
@@ -0,0 +1,9 @@
+// Isolated renderer harness: never loads CodeNomad's backend or a user profile.
+const { app, BrowserWindow } = require("electron")
+app.setPath("userData", process.env.CODENOMAD_TEST_PROFILE)
+app.whenReady().then(() => {
+  const window = new BrowserWindow({ width: 1200, height: 800, show: true,
+    webPreferences: { contextIsolation: true, nodeIntegration: false, sandbox: true } })
+  window.loadURL("about:blank")
+})
+app.on("window-all-closed", () => app.quit())
diff --git a/packages/ui/tests/browser/fixtures/tab-chrome.tsx b/packages/ui/tests/browser/fixtures/tab-chrome.tsx
new file mode 100644
index 000000000..6c64f5244
--- /dev/null
+++ b/packages/ui/tests/browser/fixtures/tab-chrome.tsx
@@ -0,0 +1,55 @@
+import { createSignal } from "solid-js"
+import { render } from "solid-js/web"
+import InstanceTabs from "../../../src/components/instance-tabs"
+import RightPanel from "../../../src/components/instance/shell/right-panel/RightPanel"
+import { ConfigProvider } from "../../../src/stores/preferences"
+import { I18nProvider, useI18n } from "../../../src/lib/i18n"
+import { applyColorScheme, normalizeColorScheme } from "../../../src/lib/theme-scheme"
+import type { AppTabRecord } from "../../../src/stores/app-tabs"
+import type { Instance } from "../../../src/types/instance"
+import "../../../src/index.css"
+
+const instance: Instance = { id: "tab-fixture", folder: "D:/fixture", port: 0, pid: 0, proxyPath: "/fixture", status: "ready", client: null }
+const tabs = Array.from({ length: 9 }, (_, i): AppTabRecord => ({
+  id: `instance:${i}`, kind: "instance", instance: { ...instance, id: `fixture-${i}`, folder: `D:/Project-${i}`, projectName: `Project ${i} — workspace` },
+}))
+tabs[2] = { id: "sidecar:preview", kind: "sidecar", sidecarTab: {
+  token: "preview", sidecarId: "preview", name: "Preview", prefixMode: "strip",
+  proxyBasePath: "/fixture/preview", shellUrl: "/fixture/preview",
+} }
+
+function Fixture() {
+  const { t } = useI18n()
+  const [count, setCount] = createSignal(9)
+  const [active, setActive] = createSignal(tabs[1].id)
+  const [order, setOrder] = createSignal(tabs)
+  ;(window as any).tabFixture = {
+    count: setCount,
+    palette: (id: string) => applyColorScheme(normalizeColorScheme(id)),
+  }
+  applyColorScheme(normalizeColorScheme("classic"))
+  return <>
+    <section data-fixture="instances" style={{ width: "min(900px, 100%)" }}>
+      <InstanceTabs tabs={order().slice(0, count())} activeTabId={active()} onSelect={setActive}
+        onClose={() => {}} onNew={() => {}}
+        onMoveTab={(id, target, placement) => setOrder(current => {
+          const moving = current.find(tab => tab.id === id)!
+          const next = current.filter(tab => tab.id !== id)
+          next.splice(next.findIndex(tab => tab.id === target) + (placement === "after" ? 1 : 0), 0, moving)
+          return next
+        })} />
+      <div style={{ height: "35px", background: "var(--surface-shade-light)" }} />
+    </section>
+    <section data-fixture="right" style={{ width: "280px", height: "170px", "margin-top": "32px" }}>
+      <RightPanel t={t} instanceId={instance.id} instance={instance} activeSessionId={() => null}
+        activeSession={() => null} latestTodoState={() => null} isPhoneLayout={() => false}
+        rightDrawerWidth={() => 280} rightDrawerWidthInitialized={() => true}
+        onCloseRightDrawer={() => {}} promptInputApi={() => null} setContentEl={() => {}} />
+    </section>
+    <div data-fixture="reference" style={{ width: "280px", height: "45px", overflow: "auto", "margin-top": "20px" }}>
+      <div style={{ width: "1200px", height: "1px" }} />
+    </div>
+  </>
+}
+
+render(() => <ConfigProvider><I18nProvider><Fixture /></I18nProvider></ConfigProvider>, document.getElementById("root")!)
diff --git a/packages/ui/tests/browser/session-rendering.test.ts b/packages/ui/tests/browser/session-rendering.test.ts
index 3540f2720..a6cd41880 100644
--- a/packages/ui/tests/browser/session-rendering.test.ts
+++ b/packages/ui/tests/browser/session-rendering.test.ts
@@ -350,6 +350,20 @@ test("a real send stays rendered across delayed admission, inbox echo and author
       assert.equal(visible, true)
     }
     await assertPrompt()
+    const queuedBadge = page.locator(".message-stream-block").filter({ hasText: marker })
+      .locator(".message-item-header-row--top > .message-header-left + .message-queued-badge")
+    assert.equal(await queuedBadge.count(), 1)
+    const placement = await queuedBadge.evaluate((badge) => {
+      const actions = badge.nextElementSibling
+      const badgeRect = badge.getBoundingClientRect()
+      const actionsRect = actions?.getBoundingClientRect()
+      return {
+        beforeMenu: actions?.classList.contains("message-item-actions") === true,
+        alignedBeforeMenu: Boolean(actionsRect && badgeRect.right <= actionsRect.left),
+      }
+    })
+    assert.deepEqual(placement, { beforeMenu: true, alignedBeforeMenu: true })
+    assert.equal(await page.locator(".message-stream-block").filter({ hasText: marker }).locator(".message-sending").count(), 0)
     for (const phase of ["before-accept", "accepted", "inbox-echo", "persisted"]) {
       if (phase === "accepted") await page.evaluate(() => (window as any).fixture.acceptPrompt())
       if (phase === "inbox-echo") await page.evaluate(() => (window as any).fixture.echoPrompt())
diff --git a/packages/ui/tests/browser/tab-chrome.test.ts b/packages/ui/tests/browser/tab-chrome.test.ts
new file mode 100644
index 000000000..f89bf9736
--- /dev/null
+++ b/packages/ui/tests/browser/tab-chrome.test.ts
@@ -0,0 +1,185 @@
+import assert from "node:assert/strict"
+import { after, before, test } from "node:test"
+import { fileURLToPath } from "node:url"
+import { mkdtemp, mkdir } from "node:fs/promises"
+import { tmpdir } from "node:os"
+import { join } from "node:path"
+import { chromium, _electron, type Browser, type Page, type ElectronApplication } from "playwright"
+import { createServer, type ViteDevServer } from "vite"
+import solid from "vite-plugin-solid"
+
+let server: ViteDevServer, browser: Browser, url: string
+before(async () => {
+  server = await createServer({ configFile: false, root: fileURLToPath(new URL("../..", import.meta.url)), logLevel: "error",
+    plugins: [solid(), { name: "tab-fixture", configureServer(s) {
+      s.middlewares.use("/tab-fixture", async (_req, res) => {
+        res.setHeader("Content-Type", "text/html")
+        res.end(await s.transformIndexHtml("/tab-fixture", '<html><body><div id="root"></div><script type="module" src="/tests/browser/fixtures/tab-chrome.tsx"></script></body></html>'))
+      })
+    } }], resolve: { dedupe: ["solid-js"] }, optimizeDeps: { exclude: ["lucide-solid"] },
+    server: { host: "127.0.0.1", port: 0, hmr: false, watch: null },
+  })
+  await server.listen()
+  url = `http://127.0.0.1:${(server.httpServer!.address() as { port: number }).port}/tab-fixture`
+  browser = await chromium.launch({ executablePath: process.env.CODENOMAD_BROWSER_PATH || undefined })
+})
+after(async () => { await browser?.close(); await server?.close() })
+
+async function prepare(page: Page) {
+  await page.route("**/api/**", route => route.fulfill({ contentType: "application/json", body: "{}" }))
+  await page.goto(url)
+  await page.waitForFunction(() => Boolean((window as any).tabFixture))
+  await page.locator(".right-panel-tab").first().waitFor()
+}
+
+async function check(page: Page, label: string) {
+  await page.waitForTimeout(120)
+  const results = await page.evaluate(() => [...document.querySelectorAll<HTMLElement>(".tab-scroll-frame")].map(frame => {
+    const viewport = frame.querySelector<HTMLElement>(".tab-scroll")!
+    const scrollbar = frame.querySelector<HTMLElement>(".tab-scrollbar")!
+    const bar = frame.closest(".tab-bar-instance,.right-panel-tab-bar")!
+    const tabs = [...frame.querySelectorAll<HTMLElement>('[role="tab"]')]
+    const reference = getComputedStyle(document.querySelector('[data-fixture="reference"]')!)
+    return {
+      tabCount: tabs.length,
+      seam: Math.abs(tabs[0].getBoundingClientRect().bottom - bar.getBoundingClientRect().bottom),
+      gaps: tabs.slice(1).map((tab, i) => Math.min(
+        Math.abs(tab.getBoundingClientRect().left - tabs[i].getBoundingClientRect().right),
+        Math.abs(tab.getBoundingClientRect().right - tabs[i].getBoundingClientRect().left))),
+      transforms: [viewport, ...viewport.querySelectorAll<HTMLElement>(".tab-strip,.tab-draggable")].map(e => getComputedStyle(e).transform),
+      scrollbarWidth: getComputedStyle(scrollbar).scrollbarWidth, referenceWidth: reference.scrollbarWidth,
+      scrollbarColor: getComputedStyle(scrollbar).scrollbarColor, referenceColor: reference.scrollbarColor,
+      overflow: viewport.scrollWidth > viewport.clientWidth,
+      ranges: [viewport.scrollWidth - viewport.clientWidth, scrollbar.scrollWidth - scrollbar.clientWidth],
+      contentScrollbar: getComputedStyle(viewport).scrollbarWidth,
+    }
+  }))
+  assert.equal(results.length, 2)
+  for (const result of results) {
+    assert.ok(result.tabCount > 0, label)
+    assert.ok(result.seam < 0.1, `${label}: baseline gap ${result.seam}`)
+    assert.ok(result.gaps.every(gap => gap < 0.1), `${label}: adjoining tabs ${result.gaps}`)
+    assert.ok(result.transforms.every(t => t === "none" || t === "matrix(1, 0, 0, 1, 0, 0)"), `${label}: mirrored layer`)
+    assert.equal(result.scrollbarWidth, result.referenceWidth, label)
+    assert.equal(result.scrollbarColor, result.referenceColor, label)
+    assert.equal(result.contentScrollbar, "none")
+    assert.ok(Math.abs(result.ranges[0] - result.ranges[1]) <= 1, `${label}: scroll range`)
+  }
+  // Exercise bidirectional synchronization without activating application actions.
+  for (const selector of [".tab-scrollbar", ".tab-scroll"]) {
+    await page.evaluate(selector => {
+      document.querySelectorAll<HTMLElement>(selector).forEach(e => { e.scrollLeft = document.dir === "rtl" ? -100 : 100 })
+    }, selector)
+    await page.waitForTimeout(60)
+    const offsets = await page.evaluate(() => [...document.querySelectorAll(".tab-scroll-frame")].map(e => [e.querySelector(".tab-scroll")!.scrollLeft, e.querySelector(".tab-scrollbar")!.scrollLeft]))
+    offsets.forEach(([a, b]) => assert.ok(Math.abs(a - b) < 1, `${label}: scroll synchronization`))
+  }
+  if (process.env.CODENOMAD_TAB_SCREENSHOTS) {
+    await mkdir(process.env.CODENOMAD_TAB_SCREENSHOTS, { recursive: true })
+    await page.screenshot({ path: join(process.env.CODENOMAD_TAB_SCREENSHOTS, `${label}.png`) })
+  }
+}
+
+async function checkFittingTabs(page: Page, label: string) {
+  await page.evaluate(() => (window as any).tabFixture.count(1))
+  await page.waitForTimeout(100)
+  const fit = await page.locator('[data-fixture="instances"] .tab-scroll-frame').evaluate(frame => {
+    const viewport = frame.querySelector<HTMLElement>(".tab-scroll")!
+    const scrollbar = frame.querySelector<HTMLElement>(".tab-scrollbar")!
+    return {
+      viewportOverflow: viewport.scrollWidth > viewport.clientWidth,
+      scrollbarOverflow: scrollbar.scrollWidth > scrollbar.clientWidth,
+      overflowX: getComputedStyle(scrollbar).overflowX,
+    }
+  })
+  assert.deepEqual(fit, { viewportOverflow: false, scrollbarOverflow: false, overflowX: "hidden" }, `${label}: no phantom scrollbar`)
+  await page.evaluate(() => (window as any).tabFixture.count(9))
+}
+
+test("real tab strips retain shared scrollbars and flush seams across zoom/DPI/RTL", async () => {
+  for (const dpr of [1, 1.25, 1.5, 2]) {
+    const page = await browser.newPage({ viewport: { width: 1200, height: 800 }, deviceScaleFactor: dpr })
+    try {
+      await prepare(page)
+      for (const dir of ["ltr", "rtl"]) for (const zoom of [0.8, 0.9, 1, 1.1, 1.25, 1.5]) {
+        await page.evaluate(({ dir, zoom }) => { document.dir = dir; document.body.style.zoom = String(zoom) }, { dir, zoom })
+        await check(page, `edge-${dpr}-${dir}-${zoom}`)
+        await checkFittingTabs(page, `edge-${dpr}-${dir}-${zoom}`)
+      }
+      await page.evaluate(() => (window as any).tabFixture.count(1))
+      await check(page, `edge-${dpr}-no-overflow`)
+      assert.equal(await page.locator('[data-fixture="instances"] .tab-scrollbar').evaluate(e => e.scrollWidth > e.clientWidth), false)
+    } finally { await page.close() }
+  }
+})
+
+test("Electron BrowserWindow native zoom retains tab seams and matching scrollbars", { skip: !process.env.CODENOMAD_TEST_ELECTRON }, async () => {
+  let app: ElectronApplication | undefined
+  const profile = await mkdtemp(join(process.env.CODENOMAD_TEST_TEMP || tmpdir(), "codenomad-tab-electron-"))
+  try {
+    const env = { ...process.env, CODENOMAD_TEST_PROFILE: profile }
+    delete env.ELECTRON_RUN_AS_NODE
+    app = await _electron.launch({ executablePath: process.env.CODENOMAD_TEST_ELECTRON,
+      args: [fileURLToPath(new URL("fixtures/tab-chrome-electron.cjs", import.meta.url))], env })
+    const page = await app.firstWindow()
+    await prepare(page)
+    for (const palette of ["classic", "light"]) for (const dir of ["ltr", "rtl"]) for (const zoom of [0.8, 0.9, 1, 1.1, 1.25, 1.5]) {
+      await page.evaluate(palette => (window as any).tabFixture.palette(palette), palette)
+      await page.evaluate(dir => { document.dir = dir }, dir)
+      await app.evaluate(({ BrowserWindow }, zoom) => { BrowserWindow.getAllWindows()[0].webContents.setZoomFactor(zoom) }, zoom)
+      await check(page, `electron-${palette}-${dir}-${zoom}`)
+      await checkFittingTabs(page, `electron-${palette}-${dir}-${zoom}`)
+    }
+  } finally { await app?.close() }
+})
+
+test("native wheel, keyboard reveal, resize and tab selection keep the two viewports in sync", async () => {
+  const page = await browser.newPage({ viewport: { width: 1200, height: 800 } })
+  try {
+    await prepare(page)
+    const frame = page.locator('[data-fixture="instances"] .tab-scroll-frame')
+    await frame.locator(".tab-scroll").hover()
+    await page.mouse.wheel(240, 0)
+    await page.waitForFunction(() => document.querySelector('[data-fixture="instances"] .tab-scroll')!.scrollLeft > 0)
+    const last = frame.getByRole("tab").last()
+    await last.focus()
+    await page.keyboard.press("Enter")
+    assert.equal(await last.getAttribute("aria-selected"), "true")
+    await check(page, "edge-keyboard-reveal")
+    // Resize the real strip while it is scrolled; the scrollbar must clamp too.
+    await page.setViewportSize({ width: 720, height: 800 })
+    await check(page, "edge-resized")
+  } finally { await page.close() }
+})
+
+test("upright tabs retain native pointer reordering and sidecar selection", async () => {
+  const page = await browser.newPage({ viewport: { width: 1200, height: 800 } })
+  try {
+    await prepare(page)
+    const tabs = page.locator('[data-fixture="instances"] [role="tab"]')
+    const firstLabel = await tabs.first().innerText()
+    const from = await tabs.first().boundingBox()
+    const to = await tabs.nth(1).boundingBox()
+    assert.ok(from && to)
+    await page.mouse.move(from.x + from.width / 2, from.y + from.height / 2)
+    await page.mouse.down()
+    await page.mouse.move(to.x + to.width / 2, to.y + to.height / 2, { steps: 15 })
+    await page.mouse.up()
+    await page.waitForTimeout(200)
+    assert.equal(await tabs.nth(1).innerText(), firstLabel)
+    const preview = tabs.filter({ hasText: "Preview" })
+    await preview.click()
+    assert.equal(await preview.getAttribute("aria-selected"), "true")
+    await check(page, "edge-reordered-sidecar")
+  } finally { await page.close() }
+})
+
+test("touch layout retains scrolling without a mirrored tab layer", async () => {
+  const page = await browser.newPage({ viewport: { width: 720, height: 800 }, hasTouch: true })
+  try {
+    await prepare(page)
+    await check(page, "edge-touch")
+    await page.locator('[data-fixture="instances"] [role="tab"]').nth(1).tap()
+    assert.equal(await page.locator('[data-fixture="instances"] [role="tab"]').nth(1).getAttribute("aria-selected"), "true")
+  } finally { await page.close() }
+})