From c914bcb44bf6f8d9f3be65cf5ce4a979c803c8d4 Mon Sep 17 00:00:00 2001
From: Mohamed Boudra <boudra.moha@gmail.com>
Date: Tue, 25 Aug 2026 13:25:57 +0200
Subject: [PATCH] feat(app): make Explorer a first-class pane host (#3826)

---
 CLAUDE.md                                     |    2 +-
 docs/design.md                                |    6 +
 docs/development.md                           |   15 +-
 docs/explorer-sidebar.md                      |   74 +
 docs/glossary.md                              |    3 +-
 docs/plugins.md                               |    4 +
 docs/side-panel.md                            |   98 --
 .../browser/agent-consecutive-turns.spec.ts   |   37 +-
 packages/app/e2e/browser/changes-pane.spec.ts |  290 ++--
 .../changes-shortcut-placement.spec.ts        |   45 +-
 .../app/e2e/browser/commit-diff-panel.spec.ts |   10 +-
 .../e2e/browser/composer-diff-stat.spec.ts    |   47 +-
 ...t-terminal-shortcut-pane-placement.spec.ts |   33 +-
 .../e2e/browser/empty-pane-keyboard.spec.ts   |   39 +-
 .../browser/explorer-pane-placement.spec.ts   |   38 +-
 .../app/e2e/browser/explorer-sidebar.spec.ts  |   48 +
 .../browser/explorer-surface-upgrade.spec.ts  |   36 +-
 packages/app/e2e/browser/file-editing.spec.ts |    8 +
 .../e2e/browser/file-tree-rail-toggle.spec.ts |  142 --
 .../app/e2e/browser/hidden-split-pane.spec.ts |   60 -
 packages/app/e2e/browser/launcher-tab.spec.ts |   13 +-
 packages/app/e2e/browser/side-panel.spec.ts   |  238 ---
 .../e2e/browser/sidebar-resize-handle.spec.ts |    4 +-
 .../app/e2e/browser/sidebar-workspace.spec.ts |   19 +-
 .../browser/workspace-model-restart.spec.ts   |   21 -
 .../e2e/support/helpers/branch-switcher.ts    |   18 +-
 .../app/e2e/support/helpers/split-pane.ts     |   84 --
 .../app/e2e/support/helpers/workspace-tabs.ts |   77 +-
 packages/app/package.json                     |    1 +
 .../app/perf/helpers/side-pane-performance.ts |  388 +++++
 .../app/perf/side-pane-performance.spec.ts    |  119 ++
 packages/app/playwright.profile.config.ts     |   18 +
 packages/app/src/agent-stream/view.tsx        |    6 +-
 packages/app/src/app/_layout.tsx              |   24 +-
 .../use-file-link.test.tsx                    |    2 +-
 .../src/assistant-file-links/use-file-link.ts |    2 +-
 .../workspace-contributions.test.ts           |    3 +-
 .../command-center/workspace-contributions.ts |   32 +-
 .../command-center/workspace-file-search.ts   |    1 +
 .../command-center/workspace-registration.tsx |    9 +-
 .../src/command-center/workspace-shortcuts.ts |    4 +-
 .../app/src/components/branch-switcher.tsx    |   47 +-
 .../compact-explorer-sidebar-host.tsx         |   74 +-
 .../components/compact-explorer-sidebar.tsx   |  143 +-
 .../desktop/titlebar-drag-region.tsx          |    9 +-
 .../components/desktop/window-controls.tsx    |  208 +++
 .../explorer-sidebar-layout.test.ts           |   22 +
 .../src/components/explorer-sidebar-layout.ts |   27 +
 .../app/src/components/file-actions-menu.tsx  |   81 +-
 .../app/src/components/file-explorer-pane.tsx |  183 +--
 .../headers/header-toggle-button.tsx          |   30 +-
 .../src/components/headers/menu-header.tsx    |   31 +-
 packages/app/src/components/message.tsx       |    2 +-
 packages/app/src/components/resize-handle.tsx |  147 +-
 .../src/components/sidebar-workspace-list.tsx |   36 +-
 .../sidebar/workspace-meta-row/index.tsx      |   39 +-
 .../components/split-container-focus.test.ts  |   27 +-
 .../src/components/split-container-focus.ts   |    9 +-
 .../app/src/components/split-container.tsx    |  624 ++++----
 .../app/src/components/tree-primitives.tsx    |    5 +-
 .../app/src/components/tree-rail-toggle.tsx   |   57 +-
 .../app/src/components/ui/context-menu.tsx    |   22 +
 .../app/src/components/ui/control-geometry.ts |    1 +
 .../ui/horizontal-scroll-boundary.tsx         |  115 ++
 .../src/components/ui/icon-button-chrome.ts   |  113 ++
 packages/app/src/components/ui/icon-color.ts  |    9 +
 packages/app/src/components/ui/menu/index.ts  |    1 +
 .../src/components/ui/menu/menu-geometry.ts   |    2 +
 .../app/src/components/ui/menu/menu-item.tsx  |    2 +-
 .../components/ui/pane-content-toolbar.tsx    |  178 ++-
 .../components/ui/toolbar-label-trigger.tsx   |  109 ++
 .../app/src/composer/draft/workspace-tab.tsx  |   13 +-
 .../app/src/composer/focused-chat-target.ts   |    2 +-
 packages/app/src/constants/layout.ts          |    5 +-
 .../browser/new-tab-requests/index.test.ts    |    4 +-
 packages/app/src/desktop/browser/panel.tsx    |    8 +-
 packages/app/src/desktop/electron/window.ts   |   22 +-
 packages/app/src/desktop/host.ts              |   24 +-
 .../src/desktop/window-chrome-presentation.ts |   48 +
 packages/app/src/file-pane/bar.tsx            |    2 -
 packages/app/src/git/actions-split-button.tsx |   56 +-
 .../diff-document/document-file-header.tsx    |    2 +
 packages/app/src/git/diff-document/index.tsx  |    7 +-
 .../app/src/git/diff-document/surface.web.tsx |   81 +-
 packages/app/src/git/diff-document/types.ts   |    1 +
 .../git/diff-document/workspace-cache.test.ts |  173 +++
 .../src/git/diff-document/workspace-cache.tsx |  168 +++
 packages/app/src/git/diff-pane.tsx            | 1321 ++++++++++++-----
 packages/app/src/git/file-header.tsx          |   41 +-
 .../app/src/git/pull-request-state-icon.tsx   |   32 +
 .../use-changes-preferences/storage.test.ts   |   18 +
 .../hooks/use-changes-preferences/storage.ts  |    3 +
 packages/app/src/hooks/use-settings/index.ts  |    2 +
 .../app/src/hooks/use-settings/storage.ts     |   40 +-
 packages/app/src/i18n/resources.test.ts       |    7 +-
 packages/app/src/i18n/resources/ar.ts         |   23 +-
 packages/app/src/i18n/resources/en.ts         |   69 +-
 packages/app/src/i18n/resources/es.ts         |   23 +-
 packages/app/src/i18n/resources/fr.ts         |   23 +-
 packages/app/src/i18n/resources/ja.ts         |   23 +-
 packages/app/src/i18n/resources/ko.ts         |   23 +-
 packages/app/src/i18n/resources/pt-BR.ts      |   23 +-
 packages/app/src/i18n/resources/ru.ts         |   25 +-
 packages/app/src/i18n/resources/zh-CN.ts      |   22 +-
 packages/app/src/keyboard/actions.ts          |    1 -
 .../keyboard/keyboard-action-dispatcher.ts    |    4 +-
 .../src/keyboard/keyboard-shortcuts.test.ts   |   15 -
 .../app/src/keyboard/keyboard-shortcuts.ts    |   29 +-
 .../app/src/keyboard/route-shortcut.test.ts   |    4 -
 packages/app/src/keyboard/route-shortcut.ts   |    4 -
 .../app/src/mobile-panels/presentation.tsx    |    1 +
 packages/app/src/panels/agent-panel.tsx       |   22 +-
 packages/app/src/panels/agent-tracks.tsx      |   30 +-
 packages/app/src/panels/changes/state.test.ts |   11 +-
 packages/app/src/panels/changes/state.ts      |   22 +-
 packages/app/src/panels/diff-panel.tsx        |  125 +-
 packages/app/src/panels/draft-panel.tsx       |    8 +-
 packages/app/src/panels/file-panel.tsx        |   66 +-
 packages/app/src/panels/files-panel.tsx       |   81 +-
 packages/app/src/panels/new-tab-panel.tsx     |   44 +-
 packages/app/src/panels/pane-context.tsx      |    7 +-
 .../app/src/panels/panel-manifest.test.ts     |   24 +
 packages/app/src/panels/panel-manifest.ts     |  103 ++
 packages/app/src/panels/panel-registry.ts     |   61 +-
 .../src/panels/provider-subagent-panel.tsx    |    8 +-
 .../app/src/panels/pull-request-panel.tsx     |   23 +-
 packages/app/src/panels/register-panels.ts    |    7 +-
 packages/app/src/panels/setup-panel.tsx       |    8 +-
 packages/app/src/panels/terminal-panel.tsx    |    8 +-
 .../command-center/contributions.test.ts      |   13 +-
 .../plugins/command-center/contributions.ts   |   24 +-
 .../plugins/command-center/registration.tsx   |   18 +-
 packages/app/src/plugins/evaluate.test.ts     |   54 +-
 packages/app/src/plugins/evaluate.ts          |   32 +-
 packages/app/src/plugins/types.ts             |    7 +-
 .../workspace-panels/locations.test.ts        |   50 +
 .../src/plugins/workspace-panels/locations.ts |   72 +
 .../src/plugins/workspace-panels/panel.tsx    |    8 +-
 .../workspace-panels/resolution.test.ts       |    1 +
 packages/app/src/screens/settings-screen.tsx  |  169 +--
 .../settings/layout/layout-section.tsx        |  126 ++
 .../workspace/explorer-sidebar-tab-rail.tsx   |  470 ++++++
 .../screens/workspace/explorer-sidebar.tsx    |  150 ++
 .../workspace/workspace-desktop-tabs-row.tsx  |  495 +++---
 .../workspace/workspace-explorer-toggle.tsx   |   95 ++
 .../workspace-file-open-command.test.ts       |   33 +
 .../workspace/workspace-file-open-command.ts  |    5 +-
 .../workspace/workspace-header-menu.tsx       |   63 +-
 .../workspace/workspace-new-tab-menu.tsx      |   17 +-
 .../workspace-open-in-editor-button.tsx       |   34 +-
 .../workspace/workspace-pane-content.test.tsx |   12 +-
 .../workspace/workspace-pane-content.tsx      |   28 +-
 .../workspace/workspace-panel-host.tsx        |  138 ++
 .../screens/workspace/workspace-screen.tsx    |  568 ++++---
 .../workspace/workspace-scripts-button.tsx    |   75 +-
 .../screens/workspace/workspace-tab-menu.ts   |    2 +-
 .../workspace/workspace-tab-presentation.tsx  |    9 +-
 .../navigation.ts                             |    2 +
 .../src/stores/workspace-layout-actions.ts    |  307 ++--
 .../src/stores/workspace-layout-store.test.ts |  443 +++---
 .../app/src/stores/workspace-layout-store.ts  |  632 ++++++--
 .../workspace-subagents-integration.test.ts   |   42 +-
 packages/app/src/styles/theme.ts              |    2 +
 packages/app/src/utils/desktop-window.test.ts |   31 +-
 packages/app/src/utils/desktop-window.tsx     |   95 +-
 packages/app/src/utils/host-routes.ts         |    1 +
 .../app/src/utils/prepare-workspace-tab.ts    |    5 +-
 .../app/src/utils/workspace-navigation.ts     |    8 +-
 .../workspace-tabs/explorer-sidebar.test.ts   |   88 ++
 .../src/workspace-tabs/explorer-sidebar.ts    |  124 ++
 packages/app/src/workspace-tabs/identity.ts   |    6 +-
 .../app/src/workspace-tabs/launcher/index.tsx |   92 +-
 .../launcher/internal/catalog.test.ts         |    2 +
 .../launcher/internal/catalog.ts              |    2 +
 packages/app/src/workspace-tabs/model.ts      |    1 +
 .../app/src/workspace-tabs/open-beside.ts     |  164 ++
 .../app/src/workspace-tabs/side-panel.test.ts |  281 ----
 packages/app/src/workspace-tabs/side-panel.ts |  337 -----
 packages/app/src/workspace/file-open/index.ts |    2 +-
 packages/cli/src/commands/plugin/scaffold.ts  |   11 +-
 packages/desktop/src/main.ts                  |   14 +-
 packages/desktop/src/preload.ts               |   24 +-
 packages/desktop/src/window/chrome.test.ts    |   48 +
 packages/desktop/src/window/chrome.ts         |   31 +
 .../desktop/src/window/window-manager.test.ts |  120 +-
 packages/desktop/src/window/window-manager.ts |  125 +-
 packages/plugin/src/contracts.ts              |   11 +-
 packages/plugin/src/index.ts                  |    2 +
 plugin-examples/local-plugin/index.ts         |    1 +
 public-docs/plugins/index.md                  |    1 +
 public-docs/plugins/reference.md              |   20 +-
 191 files changed, 8634 insertions(+), 4730 deletions(-)
 create mode 100644 docs/explorer-sidebar.md
 delete mode 100644 docs/side-panel.md
 create mode 100644 packages/app/e2e/browser/explorer-sidebar.spec.ts
 delete mode 100644 packages/app/e2e/browser/file-tree-rail-toggle.spec.ts
 delete mode 100644 packages/app/e2e/browser/hidden-split-pane.spec.ts
 delete mode 100644 packages/app/e2e/browser/side-panel.spec.ts
 delete mode 100644 packages/app/e2e/support/helpers/split-pane.ts
 create mode 100644 packages/app/perf/helpers/side-pane-performance.ts
 create mode 100644 packages/app/perf/side-pane-performance.spec.ts
 create mode 100644 packages/app/playwright.profile.config.ts
 create mode 100644 packages/app/src/components/desktop/window-controls.tsx
 create mode 100644 packages/app/src/components/explorer-sidebar-layout.test.ts
 create mode 100644 packages/app/src/components/explorer-sidebar-layout.ts
 create mode 100644 packages/app/src/components/ui/horizontal-scroll-boundary.tsx
 create mode 100644 packages/app/src/components/ui/icon-button-chrome.ts
 create mode 100644 packages/app/src/components/ui/icon-color.ts
 create mode 100644 packages/app/src/components/ui/menu/menu-geometry.ts
 create mode 100644 packages/app/src/components/ui/toolbar-label-trigger.tsx
 create mode 100644 packages/app/src/desktop/window-chrome-presentation.ts
 create mode 100644 packages/app/src/git/diff-document/workspace-cache.test.ts
 create mode 100644 packages/app/src/git/diff-document/workspace-cache.tsx
 create mode 100644 packages/app/src/git/pull-request-state-icon.tsx
 create mode 100644 packages/app/src/panels/panel-manifest.test.ts
 create mode 100644 packages/app/src/panels/panel-manifest.ts
 create mode 100644 packages/app/src/plugins/workspace-panels/locations.test.ts
 create mode 100644 packages/app/src/plugins/workspace-panels/locations.ts
 create mode 100644 packages/app/src/screens/settings/layout/layout-section.tsx
 create mode 100644 packages/app/src/screens/workspace/explorer-sidebar-tab-rail.tsx
 create mode 100644 packages/app/src/screens/workspace/explorer-sidebar.tsx
 create mode 100644 packages/app/src/screens/workspace/workspace-explorer-toggle.tsx
 create mode 100644 packages/app/src/screens/workspace/workspace-file-open-command.test.ts
 create mode 100644 packages/app/src/screens/workspace/workspace-panel-host.tsx
 create mode 100644 packages/app/src/workspace-tabs/explorer-sidebar.test.ts
 create mode 100644 packages/app/src/workspace-tabs/explorer-sidebar.ts
 create mode 100644 packages/app/src/workspace-tabs/open-beside.ts
 delete mode 100644 packages/app/src/workspace-tabs/side-panel.test.ts
 delete mode 100644 packages/app/src/workspace-tabs/side-panel.ts
 create mode 100644 packages/desktop/src/window/chrome.test.ts
 create mode 100644 packages/desktop/src/window/chrome.ts

diff --git a/CLAUDE.md b/CLAUDE.md
index b72d99731c..d22e2b2381 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -52,7 +52,7 @@ At the start of non-trivial work, list `docs/` and skim anything relevant to the
 | [docs/qa.md](docs/qa.md)                                           | QA evidence bar for pull requests — platform matrix, version drift, performance, UI proof                                      |
 | [docs/mobile-testing.md](docs/mobile-testing.md)                   | Maestro and mobile test workflows                                                                                              |
 | [docs/mobile-panels.md](docs/mobile-panels.md)                     | Compact left/center/right panel ownership, worklet motion, gesture revisions, and Fabric constraints                           |
-| [docs/side-panel.md](docs/side-panel.md)                           | The Side panel surface — its three renderings, tab placement intents, pane lifecycle, and the routing preference               |
+| [docs/explorer-sidebar.md](docs/explorer-sidebar.md)               | Explorer sidebar and ordinary side-pane host contracts, lifecycle, placement, and routing preferences                          |
 | [docs/ad-hoc-daemon-testing.md](docs/ad-hoc-daemon-testing.md)     | Isolated in-process daemon test harness                                                                                        |
 | [docs/browser-capture-harness.md](docs/browser-capture-harness.md) | Real-Electron browser screenshot harness and compositor-surface gotcha                                                         |
 | [docs/android.md](docs/android.md)                                 | App variants, local/cloud builds, EAS workflows                                                                                |
diff --git a/docs/design.md b/docs/design.md
index c1e6953625..21557dbedf 100644
--- a/docs/design.md
+++ b/docs/design.md
@@ -62,6 +62,10 @@ The button is `<Button>` (`packages/app/src/components/ui/button.tsx`). It has f
 
 `ghost` is structural and non-committal — no border, no fill. Back arrows, header toggles, "Load more" footers (`packages/app/src/screens/sessions-screen.tsx:54-63`), more-affordances. Ghost is used when the affordance is part of the chrome, not a decision.
 
+Header and toolbar controls use `interactionHighlight` for hovered, pressed, open, and selected
+backgrounds. It is a translucent semantic fill so the same control works over the main surface and
+the sidebar. Apply it as `backgroundColor`; setting `opacity` on the control also fades its content.
+
 `destructive` is filled with `destructive`. It only appears inside a confirm. The button on the page is `outline`; the destructive button is the confirm button inside the dialog.
 
 Sizes: `xs` for ultra-tight inline triggers. `sm` for any button sitting in a row. `md` is the page default. `lg` is reserved for large standalone CTAs.
@@ -155,6 +159,8 @@ On a narrow desktop route, app navigation yields to the rendered content topolog
 
 Electron window controls are top-corner obstructions, not a compact-layout condition. Rendered surfaces declare which top corners they physically occupy; only those corners receive clearance. Full-window overlays redeclare both corners. A focused split pane owns both corners; if focus restoration temporarily exposes the full split tree, the split boundary reserves one top strip instead of assigning a control rectangle to an arbitrarily narrow leaf. The 720px desktop breakpoint preserves the default 320px sidebar and target 400px center width when the Explorer is closed; it is product policy, not an obstruction gate.
 
+Windows and Linux controls are fixed window chrome, outside scrolling header content. A tab rail that reaches them ends at their obstruction and shows the shared overflow fade. On macOS, the Explorer toggle occupies a fixed top-right window slot so opening and closing Explorer does not move the pointer target.
+
 A new list+detail feature copies the settings shell. A new workspace-shaped feature copies the workspace shell. Inventing a third shape happens in design review, not in a PR.
 
 ---
diff --git a/docs/development.md b/docs/development.md
index a093dfabc7..22b491220a 100644
--- a/docs/development.md
+++ b/docs/development.md
@@ -242,13 +242,13 @@ focused invalidation capture; React Native's generated stacks make that mode hig
 Set `PASEO_PROFILE_TRACE_FOCUS=1` to include focus targets, durations, and JavaScript call stacks in
 the scenario report. This mode wraps `HTMLElement.focus`, so use it only for diagnosis.
 
-For the desktop Side panel toggle, run the app against the root checkout's daemon and use:
+For the desktop Explorer sidebar toggle, run the app against the root checkout's daemon and use:
 
 ```bash
 npm run profile:explorer-toggle --workspace=@getpaseo/app
 ```
 
-The harness verifies port `6768`, opens the Paseo workspace, creates and warms the Side panel pane,
+The harness verifies port `6768`, opens the Paseo workspace, creates and warms the Explorer pane,
 records an idle control, then measures settled and 50 ms burst Cmd+E toggles. It reports
 input-to-DOM and input-to-paint latency, React commits, mounts, unmounts, and DOM mutations. Set
 `PASEO_PROFILE_TRACE_PATH=/tmp/explorer-toggle.trace.json` or
@@ -278,6 +278,17 @@ That report includes input and composer height changes plus React work grouped i
 stream, and ancestor/root scopes. Ancestor/root timings include descendant work because the Profiler
 boundaries are nested. A printable key after an empty newline should not change either height.
 
+### Preview Windows and Linux window controls on macOS
+
+Desktop development can replace native macOS traffic lights with Paseo's custom controls:
+
+```bash
+PASEO_DESKTOP_WINDOW_CONTROLS=windows npm run dev:desktop
+PASEO_DESKTOP_WINDOW_CONTROLS=linux npm run dev:desktop
+```
+
+The override is rejected in packaged builds. Restart the desktop process when changing it.
+
 ### Desktop macOS compositor watchdog
 
 macOS display sleep can leave Chromium's GPU-process display link — the vsync
diff --git a/docs/explorer-sidebar.md b/docs/explorer-sidebar.md
new file mode 100644
index 0000000000..6817a8c65f
--- /dev/null
+++ b/docs/explorer-sidebar.md
@@ -0,0 +1,74 @@
+# Explorer sidebar and side pane
+
+The Explorer sidebar and the side pane share panel implementations, but they have different shell
+contracts.
+
+| Surface          | Purpose                      | Lifecycle                                  |
+| ---------------- | ---------------------------- | ------------------------------------------ |
+| Explorer sidebar | Files and Changes navigation | Cmd+E shows or hides the dedicated dock    |
+| Side pane        | Ordinary workspace content   | Created and closed like any workspace pane |
+
+## Panel host contract
+
+Every desktop panel registers its supported `PaneHost` values and presentation. Launchers derive
+fixed-target labels and icons from that registration, filter by host, and never substitute one
+panel type for another. Tab moves reject unsupported destinations, and placement resolves only to
+a compatible pane.
+
+Files and Changes are the Explorer defaults and its singleton navigation views. Other compatible
+tabs, including agents, terminals, files, and diffs, can move between Explorer and main panes.
+Keep panel implementations independent of either shell. `WorkspacePanelHost` owns mounting and
+retention, while each shell owns its tabs, focus, dragging, resizing, and shortcuts.
+
+## Explorer sidebar
+
+`packages/app/src/workspace-tabs/explorer-sidebar.ts` owns show, hide, toggle, and view selection.
+On desktop, the shell is rendered outside the workspace split canvas so it divides the full
+workspace, including the header. It has its own persisted width and resize handle. Main-pane splits
+never read or modify that width.
+
+The persisted layout still contains the Explorer pane so tabs survive reloads. The renderer removes
+that pane from the workspace split tree and docks it separately. Persisted identifiers retain the
+literal `"explorer"` pane id and `explorerPaneIdByWorkspace` key for compatibility.
+
+The tab rail has no inline add or close controls. Its context menu opens a New Tab launcher and
+toggles the singleton Files and Changes views. Individual tab menus close instances or move
+compatible tabs to main. Explorer tabs can be reordered, but the dock cannot be split. Selecting
+an Explorer tab does not change workspace focus.
+
+Cmd+E selects Changes for Git workspaces and Files otherwise. Compact layouts use the combined
+full-screen Explorer overlay and close it after a file opens. Wide native layouts without pane
+splits use the same combined content in a resizable inline dock; opening a file leaves that dock
+visible. Both presentations keep their selection in the panel store and reuse the layout store's
+per-workspace Explorer width. They do not create a second Explorer lifecycle.
+
+## Side pane
+
+`packages/app/src/workspace-tabs/open-beside.ts` owns content opened beside the user's work. The
+layout store remembers one ordinary pane per workspace. The first side open creates a full-height
+right split around the workspace root; later side opens reuse it.
+
+Closing the pane or moving away its final tab removes it normally and clears the remembered id. A
+later side open creates a new pane. There is no hidden side-pane lifecycle.
+
+Placement intent still controls existing tabs:
+
+| Mode      | New target                  | Existing target                   |
+| --------- | --------------------------- | --------------------------------- |
+| `pane`    | opens in the requested pane | moves to the requested pane       |
+| `prefer`  | opens in the requested pane | stays where the user placed it    |
+| `focused` | opens in the focused pane   | focuses it where it already lives |
+| `ambient` | opens in a compatible pane  | focuses it where it already lives |
+
+Explicit **Open to Side** uses `pane`. Implicit opens use `prefer`, so a preference affects only a
+new target and never yanks an existing tab out of a user-selected pane.
+
+## Routing preferences
+
+Desktop **Settings → Layout → Open in side pane** has independent switches for Explorer Files,
+Explorer Changes, chat files, diff files, subagents, pull requests, and Changes links. All switches
+default off. Mobile ignores them.
+
+Panels request an implicit open through the narrow `openPreferredTarget(target, source)` pane
+contract. Entry points outside panels use `openPreferredWorkspaceTarget`. Do not branch on a
+specific shell inside a panel.
diff --git a/docs/glossary.md b/docs/glossary.md
index d83ca99804..0433269b01 100644
--- a/docs/glossary.md
+++ b/docs/glossary.md
@@ -19,7 +19,8 @@ Authoritative terminology. UI label wins. Don't invent synonyms; use what's here
 - **MR** — GitLab merge request. UI label for GitLab change requests only; do not use MR for GitHub/Gitea/Forgejo.
 - **Worktree** — Paseo-managed git worktree (`~/.paseo/worktrees/{name}`); also a `workspaceKind` value. User-facing creation treats it as the `worktree` workspace isolation choice. Code and `paseo.json` retain worktree terminology for git lifecycle implementation. Forbidden: "Checkout" as a product synonym.
 - **Repository / Remote** — Internal Git observations. They may produce mutable kind, branch, and project-grouping metadata but never the host-local project ID, root, display name, or workspace membership. No UI label.
-- **Side panel** — The companion surface beside the user's work, holding Changes, Files, the pull request, and tabs an agent opens alongside its output. UI: "Side panel". Code: `packages/app/src/workspace-tabs/side-panel.ts`; the persisted pane id and layout key keep the pre-rename `explorer` spelling. See [side-panel.md](side-panel.md). Forbidden: "Explorer" as the name of the surface — **File Explorer** is only the Files view inside it.
+- **Explorer sidebar** — The dedicated navigation dock containing the Files and Changes trees. UI: "Explorer sidebar". Code: `packages/app/src/workspace-tabs/explorer-sidebar.ts`; persisted pane identifiers retain the `explorer` spelling. See [explorer-sidebar.md](explorer-sidebar.md).
+- **Side pane** — An ordinary right-side workspace pane used for content opened beside the user's work. It closes and participates in workspace splits like every other main-host pane. See [explorer-sidebar.md](explorer-sidebar.md#side-pane). Forbidden: "Side panel".
 - **Directory-backed surface** — A right-sidebar surface whose content is determined by the workspace's `cwd`, so two workspaces on the same directory see identical content: git diff/status, forge change-request info, file preview/explorer contents. Keyed by `(serverId, cwd)`, never `workspaceId`. See [architecture.md](architecture.md#right-sidebar-boundary-directory-backed-vs-workspace-owned).
 - **Workspace-owned state** — Per-workspace state that never leaks to a same-`cwd` sibling: tabs, agents, terminals, panes, title, plus review drafts, diff-mode overrides, composer attachments, and file-explorer open/expand state. Keyed by `workspaceId` (`cwd` only as a fallback for old payloads). See [architecture.md](architecture.md#right-sidebar-boundary-directory-backed-vs-workspace-owned).
 - **Workspace status bucket** — Aggregate activity signal for a workspace row. Same-`cwd` workspaces intentionally share agent and terminal status buckets, while tab, agent, and terminal visibility remains scoped by `workspaceId`.
diff --git a/docs/plugins.md b/docs/plugins.md
index 7c86b31058..8680b58559 100644
--- a/docs/plugins.md
+++ b/docs/plugins.md
@@ -165,6 +165,10 @@ RPC. Snapshot DTOs are deeply readonly and frozen at runtime so plugin code cann
 app state or a memoized selection. Panels use one persisted
 `plugin` workspace-tab target, so reload, disable, removal, and restoration resolve through the
 current installed-plugin catalog. A missing contribution renders unavailable inside the tab.
+Panels declare `locations: ["workspace", "explorer"]` to opt into Explorer hosting; omission means
+workspace only. Location controls hosting, not context. An agent panel target keeps its `agentId`
+when moved between hosts. Explorer configuration can create workspace-context panels and remove
+existing agent-context instances, but it cannot create an agent panel without an agent-aware command.
 
 Command Center callbacks use the selected host's existing `PaseoApi` for normal Paseo operations.
 They use typed plugin RPC only for plugin-specific backend work. Navigation is limited to the
diff --git a/docs/side-panel.md b/docs/side-panel.md
deleted file mode 100644
index 2fc113ba07..0000000000
--- a/docs/side-panel.md
+++ /dev/null
@@ -1,98 +0,0 @@
-# Side panel
-
-The companion surface beside the user's work: Changes, Files, the pull request, and
-anything an agent asks to show alongside its output.
-
-Everything that opens, reveals, hides, or asks about it goes through
-`packages/app/src/workspace-tabs/side-panel.ts`. Nothing else branches on which
-surface the current layout uses.
-
-## Three renderings, two facts
-
-| Layout                 | Rendering                                       |
-| ---------------------- | ----------------------------------------------- |
-| compact                | slide-over overlay, owned by the panel store    |
-| non-compact + splits   | dedicated right pane, owned by the layout store |
-| non-compact, no splits | ordinary tabs in the focused pane               |
-
-The third case is the one that bites. A native tablet renders one pane at a time and
-the tab row only lists the focused pane's tabs, so anything routed into a separate
-side panel pane there disappears with no way back.
-
-## Placement
-
-Where a tab lands is an intent the caller declares, not something the store infers
-from a `paneId` that happens to be in scope. `WorkspaceTabPlacement`
-(`packages/app/src/stores/workspace-layout-actions.ts`) has four modes, and the
-difference between them only shows up when the tab is already open somewhere:
-
-| Mode      | New tab           | Tab already open             |
-| --------- | ----------------- | ---------------------------- |
-| `pane`    | opens in the pane | **moves** to the pane        |
-| `prefer`  | opens in the pane | stays where the user left it |
-| `focused` | focused pane      | focuses it in place          |
-| `ambient` | focused pane      | focuses it in place          |
-
-`pane` is a pane-local affordance — that pane's `+` menu, its empty-state launcher.
-The user is placing the tab and expects it to arrive.
-
-`prefer` is an implicit supporting open — an agent's file link or a failed workspace
-setup. It has an opinion about new tabs only. Yanking a tab out of the pane the user
-deliberately moved it to is the failure this mode exists to prevent.
-
-`ambient` differs from `focused` in one rule: reconciliation opens tabs with nobody
-behind the click, and the side panel can hold focus from an earlier reveal, so an
-ambient open of something the user works _in_ (an agent, a terminal, a browser) is
-pushed out of the side panel. A `focused` open honours the focused pane whatever it
-is, because the user is standing in it.
-
-Deduplication lives in `openTabInLayoutFocused`, so it obeys the placement intent for
-every caller. Do not re-place a tab after opening it.
-
-## Lifecycle
-
-The side panel lives in the ordinary split tree, so it is a pane like any other until
-it empties or the user dismisses it:
-
-- **Close pane** on the side panel **hides** it; its tabs are waiting on the next reveal.
-- **Close pane** on any other pane **removes** it.
-- Closing the Side panel's final tab hides the pane. Revealing it returns the empty launcher.
-  This is close-only: claiming or dragging that tab to another pane leaves the empty Side panel
-  visible.
-- Nothing takes the last visible pane away. `closePane` will not remove it, and
-  neither `closePane` nor `hideSidePanel` will hide it — including the header toggle
-  reaching `hideSidePanel` after every other pane is gone. The gate is one check in
-  `setPaneHiddenInLayout`; do not add a second one upstream.
-
-`closePane` in the layout store owns that distinction. React renders the button and
-does not decide what it means.
-
-Dragging a pane's last tab into another pane collapses the source pane — except the
-side panel, which the user summons and expects to find again, split size and all.
-
-## What the side panel never does
-
-It does not seed itself. Revealing it opens an empty pane with the launcher; the user
-picks what goes in. Detecting a pull request makes the launcher's card available and
-opens nothing. A failed workspace setup adds a background tab to the main pane.
-Running and successful setup never seed tabs.
-
-## Routing preference
-
-**Settings → General → Open supporting tabs in the Side panel**, on by default,
-persisted in client app settings as `openSupportingTabsInSidePanel`. Off means new
-supporting tabs land in the focused pane instead. Mobile ignores it. Explicit actions
-— the header toggle, a pane's `+` menu, the empty-state launcher — are never subject
-to it. The Changes keyboard shortcut and the diff-stat pill above an agent composer are
-supporting opens: they follow the preference and focus an existing Changes tab wherever
-the user left it. When Changes is already visible in the Side panel, the diff-stat pill
-hides the panel without closing the tab. A different visible Side panel tab switches to
-Changes instead.
-
-## The name
-
-The product surface is the **Side panel**. **File Explorer** is still the name of the
-Files view inside it. Persisted identifiers keep their pre-rename spelling: the pane
-id is the literal string `"explorer"` (`SIDE_PANEL_PANE_ID`) and the persisted layout
-key is `explorerPaneIdByWorkspace`. The persisted state schema is strict, so renaming
-either would fail every saved blob and wipe the layout it describes.
diff --git a/packages/app/e2e/browser/agent-consecutive-turns.spec.ts b/packages/app/e2e/browser/agent-consecutive-turns.spec.ts
index c022509b1f..04a3e547e8 100644
--- a/packages/app/e2e/browser/agent-consecutive-turns.spec.ts
+++ b/packages/app/e2e/browser/agent-consecutive-turns.spec.ts
@@ -442,21 +442,40 @@ function formatFrames(frames: TurnFrame[], centers: number | number[]): string {
     .join("\n");
 }
 
+function submittedRowContentTop(frame: TurnFrame | undefined): number | undefined {
+  const viewportTop = frame?.userRow.rect?.top;
+  const scrollTop = frame?.scroll.scrollTop;
+  return viewportTop == null || scrollTop == null ? undefined : viewportTop + scrollTop;
+}
+
 function expectRowContinuity(frames: TurnFrame[]): void {
   const first = frames.findIndex((frame) => hasPaintedLayout(frame.userRow));
-  const baseline = frames[first]?.userRow.rect?.top;
+  const baselineFrame = frames[first];
+  const baselineContentTop = submittedRowContentTop(baselineFrame);
   const disappeared = frames.findIndex(
     (frame, index) => index > first && !hasPaintedLayout(frame.userRow),
   );
   const reappeared = frames.findIndex(
     (frame, index) => index > disappeared && disappeared >= 0 && hasPaintedLayout(frame.userRow),
   );
-  const shifted = frames.findIndex(
-    (frame, index) =>
+  const contentShifted = frames.findIndex((frame, index) => {
+    const contentTop = submittedRowContentTop(frame);
+    return (
       index > first &&
       hasPaintedLayout(frame.userRow) &&
-      baseline !== undefined &&
-      Math.abs((frame.userRow.rect?.top ?? baseline) - baseline) > 1,
+      baselineContentTop !== undefined &&
+      contentTop !== undefined &&
+      Math.abs(contentTop - baselineContentTop) > 1
+    );
+  });
+  const viewportChanged = frames.findIndex(
+    (frame, index) =>
+      index > first &&
+      [
+        geometryChanged(frame.scroll.rect?.top, baselineFrame?.scroll.rect?.top),
+        geometryChanged(frame.scroll.rect?.height, baselineFrame?.scroll.rect?.height),
+        geometryChanged(frame.scroll.clientHeight, baselineFrame?.scroll.clientHeight),
+      ].some(Boolean),
   );
   const attachmentMissing = frames.findIndex(
     (frame, index) => index >= first && !hasPaintedLayout(frame.attachment),
@@ -468,16 +487,18 @@ function expectRowContinuity(frames: TurnFrame[]): void {
           `submitted row disappeared for ${Math.max(0, reappeared - disappeared)} recorded frames (${Math.max(0, (frames[reappeared]?.at ?? frames.at(-1)?.at ?? 0) - frames[disappeared].at).toFixed(1)}ms) before authoritative recovery`,
         ]
       : []),
-    ...(shifted >= 0
+    ...(contentShifted >= 0
       ? [
-          `submitted row moved from ${baseline?.toFixed(1)} to ${frames[shifted].userRow.rect?.top.toFixed(1)}`,
+          `submitted row moved in scroll content from ${baselineContentTop?.toFixed(1)} to ${submittedRowContentTop(frames[contentShifted])?.toFixed(1)}`,
         ]
       : []),
+    ...(viewportChanged >= 0 ? ["scroll viewport geometry changed"] : []),
     ...(attachmentMissing >= 0 ? ["submitted image attachment left the painted layout"] : []),
   ];
   let failure = Math.max(0, first);
   if (attachmentMissing >= 0) failure = attachmentMissing;
-  if (shifted >= 0) failure = shifted;
+  if (viewportChanged >= 0) failure = viewportChanged;
+  if (contentShifted >= 0) failure = contentShifted;
   if (disappeared >= 0) failure = disappeared;
   expect(
     violations,
diff --git a/packages/app/e2e/browser/changes-pane.spec.ts b/packages/app/e2e/browser/changes-pane.spec.ts
index 51503d751b..9efaf379e1 100644
--- a/packages/app/e2e/browser/changes-pane.spec.ts
+++ b/packages/app/e2e/browser/changes-pane.spec.ts
@@ -30,11 +30,7 @@ const cleanupTasks: CleanupTask[] = [];
 const APP_SETTINGS_KEY = "@paseo:app-settings";
 
 function changesTree(page: Page) {
-  return page.getByTestId("changes-tree-rail-tree");
-}
-
-function changesContent(page: Page) {
-  return page.getByTestId("changes-tree-rail-content");
+  return page.getByTestId("changes-file-tree").filter({ visible: true });
 }
 
 async function readFileIfPresent(filePath: string): Promise<string | null> {
@@ -264,7 +260,8 @@ test("Changes opens the populated committed comparison for a clean checkout", as
   await openWorkspaceChangesSurface(page, workspace);
 
   const panel = page.getByTestId("working-diff-panel").filter({ visible: true });
-  await expect(panel.getByTestId("changes-diff-status-trigger")).toContainText("Committed");
+  const tree = page.getByTestId("changes-tree-panel").filter({ visible: true });
+  await expect(tree.getByTestId("changes-diff-status-trigger")).toContainText("Committed");
   await expect(panel.getByText("committed-only.ts", { exact: true })).toBeVisible();
 });
 
@@ -272,19 +269,19 @@ test("Changes expires a manual comparison when checkout dirtiness changes", asyn
   const workspace = await createWorkspaceWithMountedTabDiff();
   await openWorkspaceChanges(page, workspace);
 
-  const panel = page.getByTestId("working-diff-panel").filter({ visible: true });
-  const mode = panel.getByTestId("changes-diff-status-trigger");
+  const tree = page.getByTestId("changes-tree-panel").filter({ visible: true });
+  const mode = tree.getByTestId("changes-diff-status-trigger");
   await expect(mode).toContainText("Uncommitted");
 
   await mode.click();
   await page.getByTestId("changes-diff-mode-committed").click();
   await expect(mode).toContainText("Committed");
-  await expect(panel.getByRole("button", { name: "See uncommitted changes" })).toBeVisible();
+  await expect(tree.getByRole("button", { name: "See uncommitted changes" })).toBeVisible();
 
   execFileSync("git", ["add", "--all"], { cwd: workspace.repoPath });
   execFileSync("git", ["commit", "-m", "Commit working changes"], { cwd: workspace.repoPath });
   await expect(mode).toContainText("Committed");
-  await expect(panel.getByRole("button", { name: "See uncommitted changes" })).toHaveCount(0, {
+  await expect(tree.getByRole("button", { name: "See uncommitted changes" })).toHaveCount(0, {
     timeout: 30_000,
   });
 
@@ -297,7 +294,8 @@ test("an empty Changes comparison links to the populated comparison", async ({ p
   await openWorkspaceChangesSurface(page, workspace);
 
   const panel = page.getByTestId("working-diff-panel").filter({ visible: true });
-  const mode = panel.getByTestId("changes-diff-status-trigger");
+  const tree = page.getByTestId("changes-tree-panel").filter({ visible: true });
+  const mode = tree.getByTestId("changes-diff-status-trigger");
   await mode.click();
   await page.getByTestId("changes-diff-mode-committed").click();
   await expect(panel.getByText("committed-only.ts", { exact: true })).toBeVisible();
@@ -305,8 +303,8 @@ test("an empty Changes comparison links to the populated comparison", async ({ p
   await mode.click();
   await page.getByTestId("changes-diff-mode-uncommitted").click();
 
-  await expect(panel.getByText("No uncommitted changes", { exact: true })).toBeVisible();
-  const seeCommitted = panel.getByRole("button", { name: "See committed changes" });
+  await expect(tree.getByText("No uncommitted changes", { exact: true })).toBeVisible();
+  const seeCommitted = tree.getByRole("button", { name: "See committed changes" });
   await expect(seeCommitted).toBeVisible();
   await seeCommitted.click();
   await expect(mode).toContainText("Committed");
@@ -321,7 +319,7 @@ test("changes file actions open below the right-click without a reserved kebab",
   await openWorkspaceChanges(page, workspace);
 
   await expect(page.getByTestId("diff-file-1")).toContainText("zz-deleted.ts");
-  const deletedFileName = page.getByText("zz-deleted.ts", { exact: true });
+  const deletedFileName = page.getByTestId("diff-file-1-name");
   await expect(deletedFileName).toHaveCSS("user-select", "none");
   await deletedFileName.dblclick();
   expect(await page.evaluate(() => window.getSelection()?.toString() ?? "")).toBe("");
@@ -432,7 +430,6 @@ test("changes context menus duplicate files and folders", async ({ page }) => {
     .poll(() => readFileIfPresent(path.join(workspace.repoPath, "src/use-mounted-tab-set copy.ts")))
     .toBe(AFTER);
 
-  await page.getByTestId("changes-toggle-tree").click();
   await changesTree(page).getByTestId("diff-folder-src-toggle").click({ button: "right" });
   await page.getByTestId("diff-folder-src-duplicate").click();
   await expect
@@ -447,8 +444,6 @@ test("changes tree aligns every file status after its diff stat", async ({ page
   });
   await useUnwrappedDiffLines(page);
   await openWorkspaceChanges(page, workspace);
-  await page.getByTestId("changes-toggle-tree").click();
-
   const tree = changesTree(page);
   const modifiedRow = tree.getByTestId("diff-tree-file-0");
   const deletedRow = tree.getByTestId("diff-tree-file-1");
@@ -471,7 +466,6 @@ test("changes context menu recursively collapses descendant folders", async ({ p
   await useUnwrappedDiffLines(page);
   await openWorkspaceChanges(page, workspace);
 
-  await page.getByTestId("changes-toggle-tree").click();
   const tree = changesTree(page);
   await expect(tree.getByTestId("diff-folder-src/zz-folder")).toBeVisible();
   await expect(tree.getByTestId("diff-folder-src/zz-folder/nested")).toBeVisible();
@@ -516,7 +510,6 @@ test("changes context menus expose folder revert and restore a file after confir
   await useUnwrappedDiffLines(page);
   await openWorkspaceChanges(page, workspace);
 
-  await page.getByTestId("changes-toggle-tree").click();
   const tree = changesTree(page);
   await tree.getByTestId("diff-folder-src-toggle").click({ button: "right" });
   const folderRevert = page.getByTestId("diff-folder-src-revert");
@@ -649,6 +642,11 @@ test("Changes keeps review navigation and controls inside its workspace tab", as
 
   const visiblePanel = page.getByTestId("working-diff-panel").filter({ visible: true });
   await expect(visiblePanel).toBeVisible();
+  await expect(visiblePanel.getByTestId("changes-repository-header")).toHaveCount(0);
+  await expect(visiblePanel.getByTestId("changes-branch-switcher")).toHaveCount(0);
+  await expect(visiblePanel.getByTestId("changes-diff-status-trigger")).toHaveCount(0);
+  await expect(visiblePanel.getByTestId("changes-selected-diff-stat")).toHaveCount(0);
+  await expect(visiblePanel.getByTestId("changes-header")).toHaveCount(1);
   await expect(visiblePanel.getByText("use-mounted-tab-set.ts", { exact: true })).toBeVisible();
   await expect(visiblePanel).toContainText("zz-deleted.ts");
   await expect(visiblePanel.getByTestId("changes-primary-cta")).toHaveCount(0);
@@ -658,34 +656,30 @@ test("Changes keeps review navigation and controls inside its workspace tab", as
   await visiblePanel.getByTestId("diff-file-0-toggle").click();
   await expect(visiblePanel.getByTestId("diff-file-0-body")).not.toBeVisible();
 
-  // Collapse-all and the layout switch are overflow-menu items, not toolbar icons.
-  const diffOptions = visiblePanel.getByRole("button", { name: "Diff options" });
-  await expect(page.getByTestId("changes-toggle-collapse-all")).toHaveCount(0);
-  await diffOptions.click();
-  // A workspace tab has nowhere to open itself, so the menu withholds that item.
+  await expect(visiblePanel.getByRole("button", { name: "Diff options" })).toHaveCount(0);
   await expect(page.getByTestId("changes-open-tab")).toHaveCount(0);
-  await page.getByTestId("changes-toggle-collapse-all").click();
-  await diffOptions.click();
-  await expect(page.getByTestId("changes-toggle-collapse-all")).toContainText("Expand all files");
-  await page.getByTestId("changes-toggle-collapse-all").click();
+  const collapseFiles = visiblePanel.getByTestId("changes-toggle-collapse-all");
+  await expect(collapseFiles).toHaveAttribute("aria-label", "Collapse all files");
+  await collapseFiles.click();
+  await expect(collapseFiles).toHaveAttribute("aria-label", "Expand all files");
+  await collapseFiles.click();
   await expect(visiblePanel.getByTestId("diff-file-0-body")).toBeVisible();
 
-  const layoutItem = page.getByTestId("changes-toggle-layout");
-  await diffOptions.click();
-  await expect(layoutItem).toContainText("Side-by-side diff");
-  // Leading icon only: the layout is still unified, so no trailing check.
-  await expect(layoutItem.locator("svg")).toHaveCount(1);
-  await layoutItem.click();
-  await diffOptions.click();
-  await expect(layoutItem.locator("svg")).toHaveCount(2);
+  const layout = visiblePanel.getByTestId("changes-toggle-layout");
+  await expect(layout).toHaveAttribute("aria-label", "Switch to side-by-side diff");
+  await layout.click();
+  await expect(layout).toHaveAttribute("aria-label", "Switch to unified diff");
 
-  await expect(page.getByText("Hide whitespace", { exact: true })).toBeVisible();
-  await expect(page.getByText("Wrap long lines", { exact: true })).toBeVisible();
-  await expect(page.getByTestId("changes-refresh")).toHaveText("Refresh");
-  await page.getByText("Wrap long lines", { exact: true }).click();
-  await diffOptions.click();
-  await expect(page.getByText("Scroll long lines", { exact: true })).toBeVisible();
-  await page.keyboard.press("Escape");
+  const whitespace = visiblePanel.getByTestId("changes-toggle-whitespace");
+  await expect(whitespace).toHaveAttribute("aria-label", "Hide whitespace");
+  const wrapLines = visiblePanel.getByTestId("changes-toggle-wrap-lines");
+  await expect(wrapLines).toHaveAttribute("aria-label", "Wrap long lines");
+  await expect(visiblePanel.getByTestId("changes-refresh")).toHaveAttribute(
+    "aria-label",
+    "Refresh",
+  );
+  await wrapLines.click();
+  await expect(wrapLines).toHaveAttribute("aria-label", "Scroll long lines");
   await expect(page.getByTestId(/^workspace-working-diff-close-/)).toHaveCount(1);
 
   await writeFile(path.join(workspace.repoPath, "src/use-mounted-tab-set.ts"), BEFORE);
@@ -701,151 +695,23 @@ test("Changes keeps review navigation and controls inside its workspace tab", as
   await expect(visiblePanel.getByRole("img", { name: "Deleted" })).toBeVisible();
 });
 
-test("desktop Changes toggles a navigation tree beside the expanded diff document", async ({
-  page,
-}, testInfo) => {
-  const workspace = await createWorkspaceWithMountedTabDiff();
-  await useUnwrappedDiffLines(page);
-  await openWorkspaceChanges(page, workspace);
-
-  await expectFlatFileList(page);
-  await expect(page.getByTestId("changes-layout-unified")).toHaveCount(0);
-  await expect(page.getByTestId("changes-layout-split")).toHaveCount(0);
-  // The tree toggle is the one icon action that stays outside the overflow menu.
-  await expect(page.getByTestId("changes-toggle-tree")).toBeVisible();
-  const [changesToolbarBox, treeToggleBox, optionsBox, treeGlyphBox, optionsGlyphBox] =
-    await Promise.all([
-      page.getByTestId("changes-header").boundingBox(),
-      page.getByTestId("changes-toggle-tree").boundingBox(),
-      page.getByRole("button", { name: "Diff options" }).boundingBox(),
-      page.getByTestId("changes-toggle-tree").locator("svg").boundingBox(),
-      page.getByRole("button", { name: "Diff options" }).locator("svg").boundingBox(),
-    ]);
-  if (!changesToolbarBox || !treeToggleBox || !optionsBox || !treeGlyphBox || !optionsGlyphBox) {
-    throw new Error("Changes toolbar geometry could not be measured");
-  }
-  expect(changesToolbarBox.height).toBe(36);
-  expect(treeToggleBox.width).toBe(24);
-  expect(treeToggleBox.height).toBe(24);
-  expect(optionsBox.width).toBe(24);
-  expect(optionsBox.height).toBe(24);
-  expect(treeGlyphBox.width).toBe(14);
-  expect(treeGlyphBox.height).toBe(14);
-  expect(optionsGlyphBox.width).toBe(14);
-  expect(optionsGlyphBox.height).toBe(14);
-  const diffOptions = page.getByRole("button", { name: "Diff options" });
-  const diffOptionsRestBackground = await diffOptions.evaluate(
-    (element) => getComputedStyle(element).backgroundColor,
-  );
-  await diffOptions.hover();
-  const diffOptionsHoverBackground = await diffOptions.evaluate(
-    (element) => getComputedStyle(element).backgroundColor,
-  );
-  expect(diffOptionsHoverBackground).not.toBe(diffOptionsRestBackground);
-  await page.getByTestId("changes-toggle-tree").hover();
-  expect(
-    await page
-      .getByTestId("changes-toggle-tree")
-      .evaluate((element) => getComputedStyle(element).backgroundColor),
-  ).toBe(diffOptionsHoverBackground);
-  await expect(page.getByTestId("changes-toggle-collapse-all")).toHaveCount(0);
-  await expect(page.getByTestId("changes-toggle-layout")).toHaveCount(0);
-
-  await page.getByTestId("changes-options-menu").click();
-  await expect(page.getByTestId("changes-options-menu-content")).toBeVisible();
-  await expect(page.getByTestId("changes-toggle-collapse-all")).toContainText("Collapse all files");
-  await expect(page.getByTestId("changes-toggle-layout")).toContainText("Side-by-side diff");
-  await expect(page.getByTestId("changes-toggle-whitespace")).toContainText("Hide whitespace");
-  await expect(page.getByTestId("changes-toggle-wrap-lines")).toContainText("Wrap long lines");
-  await expect(page.getByTestId("changes-refresh")).toHaveText("Refresh");
-  await page.getByTestId("changes-toggle-whitespace").click();
-  await page.getByTestId("changes-options-menu").click();
-  await expect(page.getByTestId("changes-toggle-whitespace")).toContainText("Show whitespace");
-  await page.keyboard.press("Escape");
-
-  await scrollToLowerUnwrappedDiffRows(page);
-  await page.getByTestId("changes-toggle-tree").click();
-  await expect(page.getByTestId("changes-toggle-tree")).toHaveAttribute("aria-selected", "true");
-  expect(
-    await page
-      .getByTestId("changes-toggle-tree")
-      .evaluate((element) => getComputedStyle(element).backgroundColor),
-  ).toBe(diffOptionsHoverBackground);
-  const tree = changesTree(page);
-  const content = changesContent(page);
-  await expect(tree.getByTestId("diff-folder-src")).toBeVisible();
-  await expect(tree.getByTestId("diff-folder-src").getByText("src", { exact: true })).toHaveCSS(
-    "user-select",
-    "none",
-  );
-  await expect(tree.getByTestId("diff-tree-file-0")).toBeVisible();
-  await expect(tree.getByTestId("diff-folder-src-toggle").locator("svg")).toHaveCount(1);
-  const folderToggleBounds = await tree.getByTestId("diff-folder-src-toggle").boundingBox();
-  const folderChevronBounds = await tree
-    .getByTestId("diff-folder-src-toggle")
-    .locator("svg")
-    .boundingBox();
-  expect(folderToggleBounds).not.toBeNull();
-  expect(folderChevronBounds).not.toBeNull();
-  expect(folderChevronBounds!.y + folderChevronBounds!.height / 2).toBeCloseTo(
-    folderToggleBounds!.y + folderToggleBounds!.height / 2,
-    0,
-  );
-  const folderLabelBounds = await tree
-    .getByTestId("diff-folder-src")
-    .getByText("src", { exact: true })
-    .boundingBox();
-  const fileLabelBounds = await tree
-    .getByTestId("diff-tree-file-0")
-    .getByText("use-mounted-tab-set.ts", { exact: true })
-    .boundingBox();
-  expect(folderLabelBounds).not.toBeNull();
-  expect(fileLabelBounds).not.toBeNull();
-  expect(fileLabelBounds!.x - folderLabelBounds!.x).toBeCloseTo(12, 0);
-
-  const folderToggle = tree.getByTestId("diff-folder-src-toggle");
-  await folderToggle.click();
-  await expect(folderToggle).toHaveAttribute("aria-selected", "true");
-  await expect(tree.getByTestId("diff-tree-file-0")).toHaveCount(0);
-  await folderToggle.click();
-  await expect(folderToggle).toHaveAttribute("aria-selected", "true");
-  await expect(tree.getByTestId("diff-tree-file-0")).toBeVisible();
-
-  const fileToggle = tree.getByTestId("diff-tree-file-0-toggle");
-  await fileToggle.click({ button: "right" });
-  await expect(fileToggle).toHaveAttribute("aria-selected", "true");
-  await expect(folderToggle).toHaveAttribute("aria-selected", "false");
-  await expect(page.getByTestId("diff-tree-file-0-context-menu")).toBeVisible();
-  await page.keyboard.press("Escape");
-
-  await fileToggle.click();
-  await expect(content.getByTestId("diff-file-0-body")).toBeVisible();
-  const contentBounds = await content.boundingBox();
-  const focusedFileBounds = await content.getByTestId("diff-file-0").boundingBox();
-  expect(contentBounds).not.toBeNull();
-  expect(focusedFileBounds).not.toBeNull();
-  expect(focusedFileBounds!.y).toBeGreaterThanOrEqual(contentBounds!.y);
-  expect(focusedFileBounds!.y).toBeLessThan(contentBounds!.y + 80);
-
-  await tree.getByTestId("diff-folder-src-toggle").click();
-  await expect(tree.getByTestId("diff-tree-file-0")).toHaveCount(0);
-
-  await page.getByTestId("changes-toggle-tree").click();
-  await expect(page.getByTestId("changes-toggle-tree")).toHaveAttribute("aria-selected", "false");
-  await expectFlatFileList(page);
-  const screenshot = testInfo.outputPath("changes-toolbar.png");
-  await page.screenshot({ path: screenshot });
-  await testInfo.attach("changes-toolbar", { path: screenshot, contentType: "image/png" });
-});
-
 test("compact Changes keeps its actions compact and menu-only", async ({ page }) => {
   const workspace = await createWorkspaceWithMountedTabDiff();
   await useUnwrappedDiffLines(page);
   await openWorkspaceChanges(page, workspace);
   await page.setViewportSize({ width: 480, height: 900 });
 
-  const actions = page.getByTestId("changes-actions-menu-trigger").filter({ visible: true });
-  const options = page.getByRole("button", { name: "Diff options" }).filter({ visible: true });
+  const compactChangesTab = page.getByTestId("explorer-tab-changes").filter({ visible: true });
+  if (!(await compactChangesTab.isVisible())) {
+    await page.getByTestId("workspace-explorer-toggle").first().click();
+  }
+  await expect(compactChangesTab).toBeVisible();
+  await compactChangesTab.click();
+  const compactExplorer = page.getByTestId("explorer-content-area").filter({ visible: true });
+  await expect(compactExplorer.getByTestId("changes-header")).toBeVisible();
+
+  const actions = compactExplorer.getByTestId("changes-actions-menu-trigger");
+  const options = compactExplorer.getByRole("button", { name: "Diff options" });
   const [actionsBox, optionsBox, glyphBox] = await Promise.all([
     actions.boundingBox(),
     options.boundingBox(),
@@ -873,7 +739,9 @@ test("compact Changes keeps its actions compact and menu-only", async ({ page })
   await expect(wrapLines).toBeVisible();
   await wrapLines.click();
   await options.click();
-  await expect(page.getByTestId("changes-toggle-wrap-lines")).toContainText("Scroll long lines");
+  await expect(
+    page.getByTestId("changes-options-menu-content").getByTestId("changes-toggle-wrap-lines"),
+  ).toContainText("Scroll long lines");
 });
 
 test("canvas diff stays sharp while its workspace pane is resized", async ({ page }) => {
@@ -883,7 +751,9 @@ test("canvas diff stays sharp while its workspace pane is resized", async ({ pag
 
   const canvas = page.getByTestId("git-diff-canvas");
   const root = page.getByTestId("git-diff-canvas-root");
-  const handle = page.getByTestId("workspace-split-resize-handle").getByRole("separator");
+  const handle = page
+    .getByTestId("workspace-explorer-sidebar-resize-handle")
+    .getByRole("separator");
   await expect(handle).toBeVisible();
   await expect
     .poll(async () => {
@@ -904,11 +774,11 @@ test("canvas diff stays sharp while its workspace pane is resized", async ({ pag
       };
     }),
   ]);
-  if (!handleBounds) throw new Error("Workspace split resize handle has no bounds");
+  if (!handleBounds) throw new Error("Explorer sidebar resize handle has no bounds");
 
   await page.mouse.move(handleBounds.x + handleBounds.width / 2, handleBounds.y + 120);
   await page.mouse.down();
-  await page.mouse.move(handleBounds.x - 120, handleBounds.y + 120);
+  await page.mouse.move(handleBounds.x + 120, handleBounds.y + 120);
   await page.evaluate(() => new Promise<void>((resolve) => requestAnimationFrame(() => resolve())));
 
   const duringDrag = await Promise.all([
@@ -1074,6 +944,7 @@ test("canvas diff uses the overlay scrollbar and its thumb controls vertical scr
   if (!bounds) throw new Error("Diff overlay scrollbar thumb has no bounds");
   await page.mouse.move(bounds.x + bounds.width / 2, bounds.y + bounds.height / 2);
   await page.mouse.down();
+  await expect(grab).toHaveCSS("cursor", "grabbing");
   await page.mouse.move(bounds.x + bounds.width / 2, bounds.y + bounds.height / 2 + 180);
   await page.mouse.up();
 
@@ -1313,24 +1184,20 @@ async function setOpenChangesPresentation(
   page: Page,
   requestedPresentation: { layout: "unified" | "split"; wrapLines: boolean },
 ): Promise<void> {
-  const options = page.getByRole("button", { name: "Diff options" }).filter({ visible: true });
-
-  await options.click();
-  const layoutItem = page.getByTestId("changes-toggle-layout");
-  const currentLayout = (await layoutItem.locator("svg").count()) === 2 ? "split" : "unified";
+  const diffPanel = page.getByTestId("working-diff-panel").filter({ visible: true });
+  const layoutItem = diffPanel.getByTestId("changes-toggle-layout");
+  const currentLayout =
+    (await layoutItem.getAttribute("aria-label")) === "Switch to unified diff"
+      ? "split"
+      : "unified";
   if (currentLayout !== requestedPresentation.layout) {
     await layoutItem.click();
-  } else {
-    await page.keyboard.press("Escape");
   }
 
-  await options.click();
-  const wrapItem = page.getByTestId("changes-toggle-wrap-lines");
-  const currentWrapLines = (await wrapItem.locator("svg").count()) === 2;
+  const wrapItem = diffPanel.getByTestId("changes-toggle-wrap-lines");
+  const currentWrapLines = (await wrapItem.getAttribute("aria-label")) === "Scroll long lines";
   if (currentWrapLines !== requestedPresentation.wrapLines) {
     await wrapItem.click();
-  } else {
-    await page.keyboard.press("Escape");
   }
 }
 
@@ -1365,12 +1232,6 @@ async function releaseBrowserFontLoads(page: Page): Promise<void> {
   });
 }
 
-async function expectFlatFileList(page: Page): Promise<void> {
-  await expect(page.locator('[data-testid^="diff-folder-"]')).toHaveCount(0);
-  await expect(page.getByTestId("diff-file-0")).toContainText("use-mounted-tab-set.ts");
-  await expect(page.getByTestId("diff-file-0")).toContainText("src");
-}
-
 async function expectDiffCodeFontSize(page: Page, fontSize: number): Promise<void> {
   const canvas = page.getByTestId("git-diff-canvas");
   await expect
@@ -1491,6 +1352,7 @@ async function openWorkspaceChanges(page: Page, workspace: DirtyWorkspace): Prom
   await page.setViewportSize({ width: 1400, height: 900 });
   await page.goto(buildHostWorkspaceRoute(getServerId(), workspace.id));
   await waitForWorkspaceTabsVisible(page);
+  await page.getByTestId("workspace-explorer-toggle").first().click();
   await openChangesInVisibleExplorer(page);
   await expectExpandedMountedTabDiff(page);
 }
@@ -1507,13 +1369,27 @@ async function openSelectionWorkspaceChanges(page: Page, workspace: DirtyWorkspa
   await page.goto(buildHostWorkspaceRoute(getServerId(), workspace.id));
   await waitForWorkspaceTabsVisible(page);
   await openChangesPanel(page);
-  await expect(page.getByText("selection.ts")).toBeVisible({ timeout: 30_000 });
+  const diffPanel = page.getByTestId("working-diff-panel").filter({ visible: true });
+  await expect(diffPanel.getByTestId("diff-file-0-name")).toHaveText("selection.ts", {
+    timeout: 30_000,
+  });
   await expectExpandedMountedTabDiff(page);
 }
 
 async function openChangesInVisibleExplorer(page: Page): Promise<void> {
-  await openChangesPanel(page);
-  await expect(page.getByText("use-mounted-tab-set.ts")).toBeVisible({ timeout: 30_000 });
+  const explorer = page.getByTestId("workspace-explorer-sidebar");
+  await expect(explorer).toBeVisible({ timeout: 30_000 });
+  const changesTab = explorer.getByRole("button", { name: /Working tree diff/i }).first();
+  await changesTab.click();
+  const changedFile = explorer
+    .locator('[data-testid^="diff-tree-file-"][data-testid$="-toggle"]')
+    .filter({ visible: true })
+    .first();
+  await expect(changedFile).toBeVisible({ timeout: 30_000 });
+  await changedFile.click();
+  await expect(page.getByTestId("working-diff-panel").filter({ visible: true })).toBeVisible({
+    timeout: 30_000,
+  });
 }
 
 async function expectExpandedMountedTabDiff(page: Page): Promise<void> {
diff --git a/packages/app/e2e/browser/changes-shortcut-placement.spec.ts b/packages/app/e2e/browser/changes-shortcut-placement.spec.ts
index 13be178f11..214a420e8f 100644
--- a/packages/app/e2e/browser/changes-shortcut-placement.spec.ts
+++ b/packages/app/e2e/browser/changes-shortcut-placement.spec.ts
@@ -1,21 +1,12 @@
-import { expect, test, type Page } from "../support/fixtures";
+import { expect, test } from "../support/fixtures";
 import { gotoWorkspace } from "../support/helpers/launcher";
 import { seedWorkspace } from "../support/helpers/seed-client";
 import { waitForWorkspaceTabsVisible } from "../support/helpers/workspace-tabs";
 
-const APP_SETTINGS_KEY = "@paseo:app-settings";
 const CHANGES_SHORTCUT = `${process.platform === "darwin" ? "Meta" : "Control"}+Shift+G`;
 
-function mainPane(page: Page) {
-  return page.getByTestId("workspace-pane-main").filter({ visible: true });
-}
-
-function sidePanel(page: Page) {
-  return page.getByTestId("workspace-side-panel").filter({ visible: true });
-}
-
-test("Changes shortcut follows the default Side panel placement", async ({ page }) => {
-  const workspace = await seedWorkspace({ repoPrefix: "changes-shortcut-side-" });
+test("Changes shortcut reveals the Changes tree in Explorer", async ({ page }) => {
+  const workspace = await seedWorkspace({ repoPrefix: "changes-shortcut-explorer-" });
 
   try {
     await page.setViewportSize({ width: 1400, height: 900 });
@@ -24,34 +15,12 @@ test("Changes shortcut follows the default Side panel placement", async ({ page
 
     await page.keyboard.press(CHANGES_SHORTCUT);
 
-    await expect(sidePanel(page).getByTestId("workspace-tab-working_diff")).toBeVisible({
+    const explorer = page.getByTestId("workspace-explorer-sidebar").filter({ visible: true });
+    await expect(explorer.getByTestId("explorer-sidebar-tab-changes_tree")).toBeVisible({
       timeout: 30_000,
     });
-    await expect(mainPane(page).getByTestId("workspace-tab-working_diff")).toHaveCount(0);
-  } finally {
-    await workspace.cleanup();
-  }
-});
-
-test("Changes shortcut uses the focused pane when Side panel placement is off", async ({
-  page,
-}) => {
-  await page.addInitScript((settingsKey) => {
-    localStorage.setItem(settingsKey, JSON.stringify({ openSupportingTabsInSidePanel: false }));
-  }, APP_SETTINGS_KEY);
-  const workspace = await seedWorkspace({ repoPrefix: "changes-shortcut-pane-" });
-
-  try {
-    await page.setViewportSize({ width: 1400, height: 900 });
-    await gotoWorkspace(page, workspace.workspaceId);
-    await waitForWorkspaceTabsVisible(page);
-
-    await page.keyboard.press(CHANGES_SHORTCUT);
-
-    await expect(mainPane(page).getByTestId("workspace-tab-working_diff")).toBeVisible({
-      timeout: 30_000,
-    });
-    await expect(sidePanel(page)).toHaveCount(0);
+    await expect(explorer.getByTestId("changes-tree-panel")).toBeVisible();
+    await expect(page.getByTestId("workspace-tab-working_diff")).toHaveCount(0);
   } finally {
     await workspace.cleanup();
   }
diff --git a/packages/app/e2e/browser/commit-diff-panel.spec.ts b/packages/app/e2e/browser/commit-diff-panel.spec.ts
index f044cc90d1..b92bd67a2c 100644
--- a/packages/app/e2e/browser/commit-diff-panel.spec.ts
+++ b/packages/app/e2e/browser/commit-diff-panel.spec.ts
@@ -3,7 +3,7 @@ import { writeFile } from "node:fs/promises";
 import path from "node:path";
 import type { Locator } from "@playwright/test";
 import { test, expect } from "../support/fixtures";
-import { openChangesPanel } from "../support/helpers/workspace-tabs";
+import { openChangesTreePanel } from "../support/helpers/workspace-tabs";
 
 const COMMIT_SUBJECT = "Show commit timestamps";
 
@@ -15,7 +15,7 @@ test("commit history explains when the workspace has no commits ahead of its bas
   execFileSync("git", ["checkout", "-b", "feature"], { cwd: workspace.repoPath, stdio: "ignore" });
   await workspace.navigateTo();
 
-  await openChangesPanel(page);
+  await openChangesTreePanel(page);
   const commitsSection = page.getByRole("button", { name: /Commits/i });
   await expect(commitsSection).toBeVisible({ timeout: 30_000 });
   await commitsSection.click();
@@ -35,7 +35,7 @@ test("commit history shows dates and shares diff layout preferences", async ({
   await page.setViewportSize({ width: 1400, height: 900 });
   await workspace.navigateTo();
 
-  await openChangesPanel(page);
+  await openChangesTreePanel(page);
   const commitsSection = page.getByRole("button", { name: /Commits/i });
   await expect(commitsSection).toBeVisible({ timeout: 30_000 });
   await commitsSection.click();
@@ -60,8 +60,8 @@ test("commit history shows dates and shares diff layout preferences", async ({
     throw new Error("Commit-diff toolbar geometry could not be measured");
   }
   expect(commitToolbarBox.height).toBe(36);
-  expect(layoutToggleBox.width).toBe(24);
-  expect(layoutToggleBox.height).toBe(24);
+  expect(layoutToggleBox.width).toBe(20);
+  expect(layoutToggleBox.height).toBe(20);
   expect(layoutToggleGlyphBox.width).toBe(14);
   expect(layoutToggleGlyphBox.height).toBe(14);
   await expect(layoutToggle).toHaveAccessibleName("Switch to side-by-side diff");
diff --git a/packages/app/e2e/browser/composer-diff-stat.spec.ts b/packages/app/e2e/browser/composer-diff-stat.spec.ts
index 003273bc6b..70b47b7d10 100644
--- a/packages/app/e2e/browser/composer-diff-stat.spec.ts
+++ b/packages/app/e2e/browser/composer-diff-stat.spec.ts
@@ -38,7 +38,10 @@ async function seedChangedAgent(repoPrefix: string) {
   }
 }
 
-test("composer diff stat toggles Changes in the preferred Side panel", async ({ page }) => {
+test("composer diff stat opens Changes in the configured side pane", async ({ page }) => {
+  await page.addInitScript((settingsKey) => {
+    localStorage.setItem(settingsKey, JSON.stringify({ openInSidePane: { changesLinks: true } }));
+  }, APP_SETTINGS_KEY);
   const workspace = await seedChangedAgent("composer-diff-stat-side-");
 
   try {
@@ -54,31 +57,24 @@ test("composer diff stat toggles Changes in the preferred Side panel", async ({
     await expect(pill).toContainText("-0");
     await pill.click();
 
-    const sidePanel = page.getByTestId("workspace-side-panel").filter({ visible: true });
-    await expect(sidePanel.getByTestId("workspace-tab-working_diff")).toBeVisible({
+    const sidePane = page
+      .locator('[data-testid^="workspace-pane-"]')
+      .filter({ visible: true })
+      .filter({ has: page.getByTestId("working-diff-panel") });
+    await expect(sidePane.getByTestId("workspace-tab-working_diff")).toBeVisible({
       timeout: 30_000,
     });
-    await expect(sidePanel.getByTestId("working-diff-panel")).toBeVisible({ timeout: 30_000 });
+    await expect(sidePane.getByTestId("working-diff-panel")).toBeVisible({ timeout: 30_000 });
+    await expect(visibleMainPane(page).getByTestId("working-diff-panel")).toHaveCount(0);
 
-    await test.step("switching from another Side panel view reveals Changes", async () => {
+    await test.step("Explorer navigation does not replace the side pane", async () => {
       await openFilesPanel(page);
-      await expect(sidePanel.getByTestId("file-explorer-tree-scroll")).toBeVisible();
+      await expect(page.getByTestId("workspace-explorer-sidebar")).toContainText("Files");
 
       await pill.click();
-      await expect(sidePanel.getByTestId("working-diff-panel")).toBeVisible();
-    });
-
-    await test.step("clicking visible Changes hides the panel without closing its tab", async () => {
-      await pill.click();
-      await expect(sidePanel).toHaveCount(0);
+      await expect(sidePane.getByTestId("working-diff-panel")).toBeVisible();
       await expect(page.getByTestId("workspace-tab-working_diff")).toHaveCount(1);
     });
-
-    await test.step("clicking again restores Changes", async () => {
-      await pill.click();
-      await expect(sidePanel.getByTestId("workspace-tab-working_diff")).toBeVisible();
-      await expect(sidePanel.getByTestId("working-diff-panel")).toBeVisible();
-    });
   } finally {
     await workspace.cleanup();
   }
@@ -96,19 +92,16 @@ test("composer diff stat opens the compact explorer instead of a Changes tab", a
 
     await page.getByTestId("composer-diff-stat-pill").click();
 
-    await expect(page.getByTestId("changes-header")).toBeVisible({ timeout: 30_000 });
+    await expect(page.getByTestId("changes-header").filter({ visible: true }).first()).toBeVisible({
+      timeout: 30_000,
+    });
     await expect(page.getByTestId("workspace-tab-working_diff")).toHaveCount(0);
   } finally {
     await workspace.cleanup();
   }
 });
 
-test("composer diff stat opens Changes in the focused pane when Side panel routing is off", async ({
-  page,
-}) => {
-  await page.addInitScript((settingsKey) => {
-    localStorage.setItem(settingsKey, JSON.stringify({ openSupportingTabsInSidePanel: false }));
-  }, APP_SETTINGS_KEY);
+test("composer diff stat opens Changes in the focused pane by default", async ({ page }) => {
   const workspace = await seedChangedAgent("composer-diff-stat-tab-");
 
   try {
@@ -125,7 +118,9 @@ test("composer diff stat opens Changes in the focused pane when Side panel routi
       timeout: 30_000,
     });
     await expect(mainPane.getByTestId("working-diff-panel")).toBeVisible({ timeout: 30_000 });
-    await expect(page.getByTestId("workspace-side-panel")).toHaveCount(0);
+    await expect(
+      page.locator('[data-testid^="workspace-pane-"]').filter({ visible: true }),
+    ).toHaveCount(1);
   } finally {
     await workspace.cleanup();
   }
diff --git a/packages/app/e2e/browser/direct-terminal-shortcut-pane-placement.spec.ts b/packages/app/e2e/browser/direct-terminal-shortcut-pane-placement.spec.ts
index 6735705e26..194be40ef9 100644
--- a/packages/app/e2e/browser/direct-terminal-shortcut-pane-placement.spec.ts
+++ b/packages/app/e2e/browser/direct-terminal-shortcut-pane-placement.spec.ts
@@ -1,7 +1,8 @@
 import { expect, test } from "../support/fixtures";
+import { runWorkspaceActionFromCommandCenter } from "../support/helpers/command-center-workspace-actions";
 import { gotoWorkspace, pressDirectNewTabShortcut } from "../support/helpers/launcher";
 import { seedWorkspace } from "../support/helpers/seed-client";
-import { openChangesPanel, waitForWorkspaceTabsVisible } from "../support/helpers/workspace-tabs";
+import { waitForWorkspaceTabsVisible } from "../support/helpers/workspace-tabs";
 
 test.describe("Direct terminal shortcut pane placement", () => {
   test("opens a terminal in the focused pane", async ({ page }) => {
@@ -11,21 +12,31 @@ test.describe("Direct terminal shortcut pane placement", () => {
       await gotoWorkspace(page, workspace.workspaceId);
       await waitForWorkspaceTabsVisible(page);
 
-      await openChangesPanel(page);
-      const focusedPane = page
-        .getByTestId("workspace-tabs-row")
-        .filter({ has: page.getByTestId("workspace-tab-working_diff") })
-        .first();
-      const primaryPane = page
-        .getByTestId("workspace-tabs-row")
-        .filter({ hasNot: page.getByTestId("workspace-tab-working_diff") })
-        .first();
+      await runWorkspaceActionFromCommandCenter(page, "Split pane right");
+      const focusedPaneChild = page
+        .getByTestId("split-group-child")
+        .filter({ has: page.getByTestId("workspace-new-tab-panel") });
+      const originalPaneChild = page
+        .getByTestId("split-group-child")
+        .filter({ hasNot: page.getByTestId("workspace-new-tab-panel") });
+      await expect(focusedPaneChild).toBeVisible();
+      const focusedPaneId = await focusedPaneChild
+        .locator('[data-testid^="workspace-pane-"]')
+        .getAttribute("data-testid");
+      const originalPaneId = await originalPaneChild
+        .locator('[data-testid^="workspace-pane-"]')
+        .getAttribute("data-testid");
+      expect(focusedPaneId).not.toBeNull();
+      expect(originalPaneId).not.toBeNull();
+      const focusedPane = page.getByTestId(focusedPaneId!);
+      const originalPane = page.getByTestId(originalPaneId!);
+
       await pressDirectNewTabShortcut(page, "t");
 
       await expect(focusedPane.locator('[data-testid^="workspace-tab-terminal_"]')).toHaveCount(1, {
         timeout: 30_000,
       });
-      await expect(primaryPane.locator('[data-testid^="workspace-tab-terminal_"]')).toHaveCount(0);
+      await expect(originalPane.locator('[data-testid^="workspace-tab-terminal_"]')).toHaveCount(0);
     } finally {
       await workspace.cleanup();
     }
diff --git a/packages/app/e2e/browser/empty-pane-keyboard.spec.ts b/packages/app/e2e/browser/empty-pane-keyboard.spec.ts
index 1eb3d66e5a..cf8b92a255 100644
--- a/packages/app/e2e/browser/empty-pane-keyboard.spec.ts
+++ b/packages/app/e2e/browser/empty-pane-keyboard.spec.ts
@@ -13,38 +13,25 @@ async function expectLauncherSelection(launcher: Locator, name: string): Promise
   await expect(launcher.getByRole("button", { name, exact: true })).toBeFocused();
 }
 
-async function openSidePanelWithKeyboard(page: Page): Promise<Locator> {
+async function openExplorerWithKeyboard(page: Page): Promise<Locator> {
   const modifier = process.platform === "darwin" ? "Meta" : "Control";
   await page.keyboard.press(`${modifier}+E`);
-  const launcher = page
-    .getByTestId("workspace-side-panel")
-    .filter({ visible: true })
-    .getByTestId("workspace-new-tab-panel");
-  await expect(launcher).toBeVisible({ timeout: 30_000 });
-  return launcher;
+  const explorer = page.getByTestId("workspace-explorer-sidebar").filter({ visible: true });
+  await expect(explorer).toBeVisible({ timeout: 30_000 });
+  return explorer;
 }
 
 test.describe("New tab keyboard launcher", () => {
-  test("Cmd+E focuses the launcher and Enter opens the selected view", async ({ page }) => {
-    const workspace = await seedWorkspace({ repoPrefix: "empty-pane-side-panel-keyboard-" });
+  test("Cmd+E reveals the repository Changes tree", async ({ page }) => {
+    const workspace = await seedWorkspace({ repoPrefix: "explorer-keyboard-" });
 
     try {
       await gotoWorkspace(page, workspace.workspaceId);
       await waitForWorkspaceTabsVisible(page);
 
-      const launcher = await openSidePanelWithKeyboard(page);
-      await expectLauncherSelection(launcher, "Changes");
-
-      await page.keyboard.press("ArrowDown");
-      await expectLauncherSelection(launcher, "Files");
-      await page.keyboard.press("Enter");
-
-      await expect(
-        page
-          .getByTestId("workspace-side-panel")
-          .filter({ visible: true })
-          .getByTestId("workspace-tab-files"),
-      ).toBeVisible({ timeout: 30_000 });
+      const explorer = await openExplorerWithKeyboard(page);
+      await expect(explorer.getByTestId("explorer-sidebar-tab-changes_tree")).toBeVisible();
+      await expect(explorer.getByTestId("changes-tree-panel")).toBeVisible();
     } finally {
       await workspace.cleanup();
     }
@@ -66,13 +53,11 @@ test.describe("New tab keyboard launcher", () => {
       await expectLauncherSelection(launcher, "Terminal");
       await page.keyboard.press("ArrowDown");
       await expectLauncherSelection(launcher, "Changes");
-      await page.keyboard.press("ArrowDown");
-      await expectLauncherSelection(launcher, "Files");
       await page.keyboard.press("Enter");
 
-      await expect(page.getByTestId("workspace-tab-files").filter({ visible: true })).toBeVisible({
-        timeout: 30_000,
-      });
+      await expect(
+        page.getByTestId("workspace-tab-working_diff").filter({ visible: true }),
+      ).toBeVisible({ timeout: 30_000 });
     } finally {
       await workspace.cleanup();
     }
diff --git a/packages/app/e2e/browser/explorer-pane-placement.spec.ts b/packages/app/e2e/browser/explorer-pane-placement.spec.ts
index 7dc42f7b31..750a2f3dc5 100644
--- a/packages/app/e2e/browser/explorer-pane-placement.spec.ts
+++ b/packages/app/e2e/browser/explorer-pane-placement.spec.ts
@@ -8,7 +8,10 @@ import { expect, type Locator, type Page } from "@playwright/test";
 import { test } from "../support/fixtures";
 import { gotoWorkspace } from "../support/helpers/launcher";
 import { seedWorkspace } from "../support/helpers/seed-client";
-import { openChangesPanel, waitForWorkspaceTabsVisible } from "../support/helpers/workspace-tabs";
+import {
+  openChangesTreePanel,
+  waitForWorkspaceTabsVisible,
+} from "../support/helpers/workspace-tabs";
 
 function visible(page: Page, testId: string): Locator {
   return page.getByTestId(testId).filter({ visible: true });
@@ -22,23 +25,18 @@ function draftTabChip(page: Page): Locator {
   return page.locator('[data-testid^="workspace-tab-draft_"]').filter({ visible: true });
 }
 
-/** The explorer pane is the only tab row carrying the Changes tab. */
+/** The Explorer has its own fixed tab rail, separate from workspace pane rows. */
 function explorerTabRow(page: Page): Locator {
-  return visible(page, "workspace-tabs-row").filter({
-    has: page.getByTestId("workspace-tab-working_diff"),
-  });
+  return visible(page, "explorer-sidebar-tab-rail");
 }
 
 function mainTabRow(page: Page): Locator {
-  return visible(page, "workspace-tabs-row").filter({
-    hasNot: page.getByTestId("workspace-tab-working_diff"),
-  });
+  return visible(page, "workspace-tabs-row");
 }
 
-async function focusExplorerPane(page: Page): Promise<void> {
-  await openChangesPanel(page);
-  const changesTab = visible(page, "workspace-tab-working_diff").first();
-  await expect(changesTab).toHaveAttribute("aria-selected", "true");
+async function selectExplorerChanges(page: Page): Promise<void> {
+  await openChangesTreePanel(page);
+  await expect(visible(page, "changes-tree-panel").first()).toBeVisible();
 }
 
 async function closeSeededDraftInMainPane(page: Page): Promise<void> {
@@ -115,8 +113,8 @@ test.describe("explorer pane tab placement", () => {
         await expect(draftTabChip(page).first()).toBeVisible({ timeout: 30_000 });
       });
 
-      await test.step("focus the explorer pane", async () => {
-        await focusExplorerPane(page);
+      await test.step("select Changes in Explorer", async () => {
+        await selectExplorerChanges(page);
       });
 
       await test.step("an agent appearing now opens in the main pane, not the explorer pane", async () => {
@@ -140,11 +138,8 @@ test.describe("explorer pane tab placement", () => {
         await expect(
           explorerTabRow(page).first().getByTestId(`workspace-tab-agent_${agentId}`),
         ).toHaveCount(0);
-        // The background open must not steal the explorer pane's focus.
-        await expect(visible(page, "workspace-tab-working_diff").first()).toHaveAttribute(
-          "aria-selected",
-          "true",
-        );
+        // The background open must not change the selected Explorer view.
+        await expect(visible(page, "changes-tree-panel").first()).toBeVisible();
       });
 
       await test.step("close the draft; the agent is the main pane's only tab", async () => {
@@ -170,8 +165,9 @@ test.describe("explorer pane tab placement", () => {
           body: await page.screenshot(),
           contentType: "image/png",
         });
-        // The split must have taken: agent pane + New main + explorer = 3 tab rows.
-        await expect(visible(page, "workspace-tabs-row")).toHaveCount(3, { timeout: 10_000 });
+        // The split must have taken: agent pane + New main. Explorer keeps its own rail.
+        await expect(visible(page, "workspace-tabs-row")).toHaveCount(2, { timeout: 10_000 });
+        await expect(explorerTabRow(page)).toHaveCount(1);
         await expect(page.getByTestId("workspace-new-tab-panel")).toBeVisible();
       });
 
diff --git a/packages/app/e2e/browser/explorer-sidebar.spec.ts b/packages/app/e2e/browser/explorer-sidebar.spec.ts
new file mode 100644
index 0000000000..0d8db71435
--- /dev/null
+++ b/packages/app/e2e/browser/explorer-sidebar.spec.ts
@@ -0,0 +1,48 @@
+import { expect, test } from "../support/fixtures";
+import { gotoWorkspace } from "../support/helpers/launcher";
+import { seedWorkspace } from "../support/helpers/seed-client";
+import {
+  ensureExplorerSidebar,
+  openFilesPanel,
+  waitForWorkspaceTabsVisible,
+} from "../support/helpers/workspace-tabs";
+
+function explorerSidebar(page: Parameters<typeof ensureExplorerSidebar>[0]) {
+  return page.getByTestId("workspace-explorer-sidebar").filter({ visible: true });
+}
+
+test.describe("Explorer sidebar", () => {
+  test("starts with Files and Changes, switches views, and toggles without changing main", async ({
+    page,
+  }) => {
+    const workspace = await seedWorkspace({ repoPrefix: "explorer-sidebar-defaults-" });
+
+    try {
+      await gotoWorkspace(page, workspace.workspaceId);
+      await waitForWorkspaceTabsVisible(page);
+      const mainTabsBefore = await page
+        .getByTestId("workspace-pane-main")
+        .locator('[data-testid^="workspace-tab-"]')
+        .count();
+
+      const explorer = await ensureExplorerSidebar(page);
+      await expect(explorer.getByTestId("explorer-sidebar-tab-files")).toBeVisible();
+      await expect(explorer.getByTestId("explorer-sidebar-tab-changes_tree")).toBeVisible();
+      await expect(explorer.getByTestId("workspace-new-tab-button")).toHaveCount(0);
+
+      await openFilesPanel(page);
+      await expect(explorer.getByTestId("file-explorer-tree-scroll")).toBeVisible();
+
+      await explorer.getByTestId("explorer-sidebar-tab-changes_tree").click();
+      await expect(explorer.getByTestId("changes-tree-panel")).toBeVisible();
+
+      await page.getByTestId("workspace-explorer-toggle").first().click();
+      await expect(explorerSidebar(page)).toHaveCount(0);
+      await expect(
+        page.getByTestId("workspace-pane-main").locator('[data-testid^="workspace-tab-"]'),
+      ).toHaveCount(mainTabsBefore);
+    } finally {
+      await workspace.cleanup();
+    }
+  });
+});
diff --git a/packages/app/e2e/browser/explorer-surface-upgrade.spec.ts b/packages/app/e2e/browser/explorer-surface-upgrade.spec.ts
index 0da548e08e..9e2e6a2378 100644
--- a/packages/app/e2e/browser/explorer-surface-upgrade.spec.ts
+++ b/packages/app/e2e/browser/explorer-surface-upgrade.spec.ts
@@ -19,14 +19,8 @@ function readPersistedPanelState(page: Page): Promise<string | null> {
   return page.evaluate(() => localStorage.getItem("panel-state"));
 }
 
-/** Only the docked sidebar ever rendered `explorer-header` on a wide layout. */
-function dockedSidebar(page: Page): Locator {
-  return visible(page, "explorer-header");
-}
-
-/** The desktop companion surface is a hideable side panel. */
-function sidePanel(page: Page): Locator {
-  return visible(page, "workspace-side-panel");
+function explorerSidebar(page: Page): Locator {
+  return visible(page, "workspace-explorer-sidebar");
 }
 
 /** Seed exactly what a pre-pane build wrote after the user opened the sidebar once. */
@@ -65,18 +59,18 @@ test.describe("explorer surface after upgrading from the docked sidebar", () =>
       await gotoWorkspace(page, workspace.workspaceId);
       await waitForWorkspaceTabsVisible(page);
 
-      await test.step("no docked sidebar, on load or after toggling", async () => {
-        await expect(dockedSidebar(page)).toHaveCount(0);
-
+      await test.step("the retired flag does not reveal Explorer", async () => {
+        await expect(explorerSidebar(page)).toHaveCount(0);
         const toggle = visible(page, "workspace-explorer-toggle").first();
         await toggle.click();
-        await expect(sidePanel(page)).toHaveCount(1, { timeout: 15_000 });
-        await expect(sidePanel(page).getByTestId("workspace-new-tab-panel")).toBeVisible();
-        await expect(dockedSidebar(page)).toHaveCount(0);
+        await expect(explorerSidebar(page)).toHaveCount(1, { timeout: 15_000 });
+        await expect(explorerSidebar(page).getByTestId("explorer-sidebar-tab-files")).toBeVisible();
+        await expect(
+          explorerSidebar(page).getByTestId("explorer-sidebar-tab-changes_tree"),
+        ).toBeVisible();
 
         await toggle.click();
-        await expect(sidePanel(page)).toHaveCount(0, { timeout: 15_000 });
-        await expect(dockedSidebar(page)).toHaveCount(0);
+        await expect(explorerSidebar(page)).toHaveCount(0, { timeout: 15_000 });
       });
 
       await test.step("the retired keys are migrated out of storage", async () => {
@@ -107,22 +101,22 @@ test.describe("explorer surface after upgrading from the docked sidebar", () =>
 
       await test.step("open the explorer so both sides are showing", async () => {
         await toggle.click();
-        await expect(sidePanel(page)).toHaveCount(1, { timeout: 15_000 });
-        await expect(sidePanel(page).getByTestId("workspace-new-tab-panel")).toBeVisible();
+        await expect(explorerSidebar(page)).toHaveCount(1, { timeout: 15_000 });
+        await expect(explorerSidebar(page).getByTestId("explorer-sidebar-tab-files")).toBeVisible();
         await expect(agentList).toHaveCount(1);
       });
 
       await test.step("the shortcut collapses both", async () => {
         await page.keyboard.press(`${modifier}+.`);
-        await expect(sidePanel(page)).toHaveCount(0, { timeout: 15_000 });
+        await expect(explorerSidebar(page)).toHaveCount(0, { timeout: 15_000 });
         await expect(agentList).toHaveCount(0);
       });
 
       await test.step("the shortcut restores both", async () => {
         await page.keyboard.press(`${modifier}+.`);
         await expect(agentList).toHaveCount(1, { timeout: 15_000 });
-        await expect(sidePanel(page)).toHaveCount(1, { timeout: 15_000 });
-        await expect(sidePanel(page).getByTestId("workspace-new-tab-panel")).toBeVisible();
+        await expect(explorerSidebar(page)).toHaveCount(1, { timeout: 15_000 });
+        await expect(explorerSidebar(page).getByTestId("explorer-sidebar-tab-files")).toBeVisible();
       });
     } finally {
       await workspace.cleanup();
diff --git a/packages/app/e2e/browser/file-editing.spec.ts b/packages/app/e2e/browser/file-editing.spec.ts
index daedee41ad..9da7687b98 100644
--- a/packages/app/e2e/browser/file-editing.spec.ts
+++ b/packages/app/e2e/browser/file-editing.spec.ts
@@ -9,6 +9,8 @@ import {
 import { installDaemonWebSocketGate } from "../support/helpers/daemon-websocket-gate";
 import { openAgentRoute, seedMockAgentWorkspace } from "../support/helpers/mock-agent";
 
+const APP_SETTINGS_KEY = "@paseo:app-settings";
+
 const RED_PIXEL = Buffer.from(
   "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAusB9Y9ZQmcAAAAASUVORK5CYII=",
   "base64",
@@ -218,6 +220,12 @@ test.describe("CodeMirror workspace file editing", () => {
   });
 
   test("clicking the editor focuses its pane beside an agent", async ({ page }) => {
+    await page.addInitScript((settingsKey) => {
+      localStorage.setItem(
+        settingsKey,
+        JSON.stringify({ openInSidePane: { explorerFiles: true } }),
+      );
+    }, APP_SETTINGS_KEY);
     const target = "target.ts:42";
     const session = await seedAgentWithFileLink({
       target,
diff --git a/packages/app/e2e/browser/file-tree-rail-toggle.spec.ts b/packages/app/e2e/browser/file-tree-rail-toggle.spec.ts
deleted file mode 100644
index 14780334ed..0000000000
--- a/packages/app/e2e/browser/file-tree-rail-toggle.spec.ts
+++ /dev/null
@@ -1,142 +0,0 @@
-// The file panel's tree rail had no way to close: the changes panel's toolbar
-// carries a folder-tree toggle, the file toolbar carried nothing, and the rail
-// was permanent on desktop.
-import { expect } from "@playwright/test";
-import { test } from "../support/fixtures";
-import { openFileExplorer, openFileFromExplorer } from "../support/helpers/file-explorer";
-import { gotoWorkspace } from "../support/helpers/launcher";
-import { seedWorkspace, type SeededWorkspace } from "../support/helpers/seed-client";
-
-let workspace: SeededWorkspace;
-
-async function effectiveBackground(locator: import("@playwright/test").Locator): Promise<string> {
-  return locator.evaluate((element) => {
-    let current: Element | null = element;
-    while (current) {
-      const color = getComputedStyle(current).backgroundColor;
-      if (color !== "rgba(0, 0, 0, 0)" && color !== "transparent") return color;
-      current = current.parentElement;
-    }
-    return "transparent";
-  });
-}
-
-test.beforeAll(async () => {
-  workspace = await seedWorkspace({
-    repoPrefix: "file-tree-rail-toggle-",
-    repo: { files: [{ path: "docs/guide.md", content: "# Guide\n" }] },
-  });
-});
-
-test.afterAll(async () => {
-  await workspace?.cleanup();
-});
-
-test.describe("File panel tree rail", () => {
-  test("the Files panel starts with an empty content pane beside the tree", async ({ page }) => {
-    await gotoWorkspace(page, workspace.workspaceId);
-    await openFileExplorer(page);
-
-    const rail = page.getByTestId("files-tree-rail").filter({ visible: true });
-    await expect(rail).toBeVisible({ timeout: 30_000 });
-    const content = rail.getByTestId("files-tree-rail-content");
-    const tree = rail.getByTestId("files-tree-rail-tree");
-    await expect(content).toHaveText("Choose a file");
-    await expect(tree).toContainText("docs");
-    expect(await effectiveBackground(tree.getByTestId("file-explorer-tree-scroll"))).toBe(
-      await effectiveBackground(content),
-    );
-  });
-
-  test("the file toolbar toggle closes and reopens the tree", async ({ page }, testInfo) => {
-    await gotoWorkspace(page, workspace.workspaceId);
-    await openFileExplorer(page);
-    await openFileFromExplorer(page, "docs");
-    await openFileFromExplorer(page, "guide.md");
-
-    const rail = page.getByTestId("file-tree-rail-tree").filter({ visible: true });
-    const toggle = page.getByTestId("file-toggle-tree").filter({ visible: true }).first();
-    const editorToolbar = page.getByTestId("file-panel-bar").filter({ visible: true });
-    const filesToolbar = page.getByTestId("files-pane-header").filter({ visible: true });
-    const refresh = page.getByRole("button", { name: "Refresh files" }).filter({ visible: true });
-    const hiddenFiles = page
-      .getByRole("button", { name: "Hide hidden files" })
-      .filter({ visible: true });
-    const shoot = async (name: string) => {
-      const path = testInfo.outputPath(`${name}.png`);
-      await page.screenshot({ path });
-      await testInfo.attach(name, { path, contentType: "image/png" });
-    };
-    await expect(rail).toBeVisible({ timeout: 30_000 });
-    await expect(toggle).toHaveAttribute("aria-selected", "true");
-    const [
-      editorToolbarBox,
-      filesToolbarBox,
-      treeToggleBox,
-      refreshBox,
-      treeGlyphBox,
-      refreshGlyphBox,
-    ] = await Promise.all([
-      editorToolbar.boundingBox(),
-      filesToolbar.boundingBox(),
-      toggle.boundingBox(),
-      refresh.boundingBox(),
-      toggle.locator("svg").boundingBox(),
-      refresh.locator("svg").boundingBox(),
-    ]);
-    if (
-      !editorToolbarBox ||
-      !filesToolbarBox ||
-      !treeToggleBox ||
-      !refreshBox ||
-      !treeGlyphBox ||
-      !refreshGlyphBox
-    ) {
-      throw new Error("Pane-content toolbar geometry could not be measured");
-    }
-    expect(editorToolbarBox.height).toBe(36);
-    expect(filesToolbarBox.height).toBe(36);
-    expect(editorToolbarBox.y + editorToolbarBox.height).toBe(
-      filesToolbarBox.y + filesToolbarBox.height,
-    );
-    expect(treeToggleBox.width).toBe(24);
-    expect(treeToggleBox.height).toBe(24);
-    expect(refreshBox.width).toBe(24);
-    expect(refreshBox.height).toBe(24);
-    expect(treeGlyphBox.width).toBe(14);
-    expect(treeGlyphBox.height).toBe(14);
-    expect(refreshGlyphBox.width).toBe(14);
-    expect(refreshGlyphBox.height).toBe(14);
-
-    const restBackground = await refresh.evaluate(
-      (element) => getComputedStyle(element).backgroundColor,
-    );
-    const treeToggleSelectedBackground = await toggle.evaluate(
-      (element) => getComputedStyle(element).backgroundColor,
-    );
-    await refresh.hover();
-    const refreshHoverBackground = await refresh.evaluate(
-      (element) => getComputedStyle(element).backgroundColor,
-    );
-    expect(refreshHoverBackground).not.toBe(restBackground);
-    expect(refreshHoverBackground).toBe(treeToggleSelectedBackground);
-    await hiddenFiles.click();
-    const hiddenFilesSelected = page
-      .getByRole("button", { name: "Show hidden files" })
-      .filter({ visible: true });
-    expect(
-      await hiddenFilesSelected.evaluate((element) => getComputedStyle(element).backgroundColor),
-    ).toBe(refreshHoverBackground);
-    await shoot("tree-open");
-
-    await toggle.click();
-    await expect(toggle).toHaveAttribute("aria-selected", "false");
-    await expect(rail).toHaveCount(0);
-    await shoot("tree-closed");
-
-    await toggle.click();
-    await expect(toggle).toHaveAttribute("aria-selected", "true");
-    await expect(rail).toBeVisible();
-    await shoot("tree-reopened");
-  });
-});
diff --git a/packages/app/e2e/browser/hidden-split-pane.spec.ts b/packages/app/e2e/browser/hidden-split-pane.spec.ts
deleted file mode 100644
index 50eb2c2fab..0000000000
--- a/packages/app/e2e/browser/hidden-split-pane.spec.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import { test, expect } from "../support/fixtures";
-import { gotoWorkspace } from "../support/helpers/launcher";
-import { seedWorkspace } from "../support/helpers/seed-client";
-import {
-  expectExplorerNodeRetained,
-  hideExplorerSplit,
-  measureExplorerSplit,
-  openExplorerSplit,
-  resizeExplorerSplit,
-  stampExplorerNode,
-} from "../support/helpers/split-pane";
-import {
-  createAgentTabFromMenu,
-  waitForWorkspaceTabsVisible,
-} from "../support/helpers/workspace-tabs";
-
-test.describe("Hidden split pane retention", () => {
-  test("releases all layout space without unmounting and restores its dragged width", async ({
-    page,
-  }, testInfo) => {
-    const workspace = await seedWorkspace({ repoPrefix: "hidden-split-pane-" });
-
-    try {
-      await gotoWorkspace(page, workspace.workspaceId);
-      await waitForWorkspaceTabsVisible(page);
-      await createAgentTabFromMenu(page);
-      await openExplorerSplit(page);
-
-      // Drag to a non-default width first: restoring the default would prove nothing.
-      await resizeExplorerSplit(page, 137);
-      await stampExplorerNode(page);
-      const open = await measureExplorerSplit(page);
-      expect(open.explorerWidth).toBeGreaterThan(250);
-      expect(open.separatorCount).toBe(1);
-
-      await hideExplorerSplit(page);
-      const hidden = await measureExplorerSplit(page);
-      expect(hidden.explorerWidth).toBe(0);
-      // The sibling must absorb the whole row, not just collapse the hidden pane.
-      expect(hidden.visibleWidth).toBeCloseTo(hidden.containerWidth, 5);
-      expect(hidden.occupiedWidth).toBeCloseTo(hidden.containerWidth, 5);
-      expect(hidden.separatorCount).toBe(0);
-      // Same DOM node, so a teardown-and-rebuild cannot pass as retention.
-      await expectExplorerNodeRetained(page);
-
-      await openExplorerSplit(page);
-      await expectExplorerNodeRetained(page);
-      const reopened = await measureExplorerSplit(page);
-      expect(reopened.explorerWidth).toBeCloseTo(open.explorerWidth, 5);
-      expect(reopened.separatorCount).toBe(1);
-
-      await testInfo.attach("split-pane-geometry", {
-        body: JSON.stringify({ open, hidden, reopened }, null, 2),
-        contentType: "application/json",
-      });
-    } finally {
-      await workspace.cleanup();
-    }
-  });
-});
diff --git a/packages/app/e2e/browser/launcher-tab.spec.ts b/packages/app/e2e/browser/launcher-tab.spec.ts
index b4c150cd98..9e2dc9de57 100644
--- a/packages/app/e2e/browser/launcher-tab.spec.ts
+++ b/packages/app/e2e/browser/launcher-tab.spec.ts
@@ -11,6 +11,7 @@ import {
   countTabsOfKind,
   waitForTabBar,
   pressNewTabShortcut,
+  pressDirectNewTabShortcut,
   getTabTestIds,
   waitForTabWithTitle,
   measureTileTransition,
@@ -177,13 +178,11 @@ test.describe("Tab creation", () => {
     const panel = page.getByTestId("workspace-new-tab-panel").filter({ visible: true });
     const agent = panel.getByRole("button", { name: /^Agent/ });
     const terminal = panel.getByRole("button", { name: /^Terminal/ });
-    const changes = panel.getByRole("button", { name: /Changes/ });
-    const files = panel.getByRole("button", { name: /Files/ });
+    const diff = panel.getByRole("button", { name: /Diff/ });
     const shortcutPrefix = process.platform === "darwin" ? /⇧⌘/ : /Ctrl.*Shift/;
     await expect(agent).toContainText(new RegExp(`${shortcutPrefix.source}.*A`));
     await expect(terminal).toContainText(new RegExp(`${shortcutPrefix.source}.*T`));
-    await expect(changes).toContainText(new RegExp(`${shortcutPrefix.source}.*G`));
-    await expect(files).toContainText(new RegExp(`${shortcutPrefix.source}.*E`));
+    await expect(diff).toContainText(new RegExp(`${shortcutPrefix.source}.*G`));
     await expect(agent).toBeFocused();
 
     await page.keyboard.press("ArrowDown");
@@ -191,6 +190,12 @@ test.describe("Tab creation", () => {
     await page.keyboard.press("ArrowUp");
     await expect(agent).toBeFocused();
 
+    await pressDirectNewTabShortcut(page, "e");
+    await expect(page.getByTestId("workspace-explorer-sidebar")).toBeVisible();
+    await expect(
+      page.getByTestId("file-explorer-tree-scroll").filter({ visible: true }),
+    ).toBeVisible();
+
     await page.locator("body").click({ position: { x: 1, y: 1 } });
     await panel.click({ position: { x: 20, y: 20 } });
     await expect(agent).toBeFocused();
diff --git a/packages/app/e2e/browser/side-panel.spec.ts b/packages/app/e2e/browser/side-panel.spec.ts
deleted file mode 100644
index e46a709acd..0000000000
--- a/packages/app/e2e/browser/side-panel.spec.ts
+++ /dev/null
@@ -1,238 +0,0 @@
-import { expect, type Locator, type Page, type TestInfo } from "@playwright/test";
-import { test } from "../support/fixtures";
-import { gotoWorkspace } from "../support/helpers/launcher";
-import { seedWorkspace } from "../support/helpers/seed-client";
-import { ensureSidePanel, waitForWorkspaceTabsVisible } from "../support/helpers/workspace-tabs";
-
-async function capture(page: Page, testInfo: TestInfo, name: string): Promise<void> {
-  const path = testInfo.outputPath(`${name}.png`);
-  await page.screenshot({ path });
-  await testInfo.attach(name, { path, contentType: "image/png" });
-}
-
-function sidePanel(page: Page): Locator {
-  return page.getByTestId("workspace-side-panel").filter({ visible: true });
-}
-
-function mainPane(page: Page): Locator {
-  return page.getByTestId("workspace-pane-main").filter({ visible: true });
-}
-
-function newTabPanel(scope: Locator): Locator {
-  return scope.getByTestId("workspace-new-tab-panel");
-}
-
-async function launcherButtonLabels(launcher: Locator): Promise<(string | null)[]> {
-  return launcher
-    .getByRole("button")
-    .evaluateAll((buttons) => buttons.map((button) => button.getAttribute("aria-label")));
-}
-
-function sidePanelToggle(page: Page): Locator {
-  return page.getByTestId("workspace-explorer-toggle").first();
-}
-
-/** Drags the pane's only tab into the left edge of its own pane, splitting it out. */
-async function splitTabOutOfMainPane(page: Page, chip: Locator): Promise<void> {
-  const paneBox = await mainPane(page).boundingBox();
-  const chipBox = await chip.boundingBox();
-  expect(paneBox).not.toBeNull();
-  expect(chipBox).not.toBeNull();
-  if (!paneBox || !chipBox) throw new Error("Unable to measure the main pane");
-
-  await page.mouse.move(chipBox.x + chipBox.width / 2, chipBox.y + chipBox.height / 2);
-  await page.mouse.down();
-  await page.mouse.move(chipBox.x + chipBox.width / 2 + 12, chipBox.y + chipBox.height / 2 + 4);
-  await page.mouse.move(paneBox.x + paneBox.width * 0.06, paneBox.y + paneBox.height * 0.6, {
-    steps: 20,
-  });
-  await page.mouse.up();
-}
-
-test.describe("Side panel", () => {
-  test("reveals empty, launches a view, and hides back out of the way", async ({
-    page,
-  }, testInfo) => {
-    const workspace = await seedWorkspace({ repoPrefix: "side-panel-reveal-" });
-
-    try {
-      await gotoWorkspace(page, workspace.workspaceId);
-      await waitForWorkspaceTabsVisible(page);
-      await expect(sidePanel(page)).toHaveCount(0);
-
-      await test.step("revealing the Side panel seeds nothing", async () => {
-        await sidePanelToggle(page).click();
-        await expect(sidePanel(page)).toBeVisible({ timeout: 30_000 });
-        const launcher = newTabPanel(sidePanel(page));
-        await expect(launcher).toBeVisible();
-        expect((await launcherButtonLabels(launcher)).slice(0, 4)).toEqual([
-          "Changes",
-          "Files",
-          "Terminal",
-          "Agent",
-        ]);
-        await expect(page.getByTestId("workspace-tab-working_diff")).toHaveCount(0);
-        await capture(page, testInfo, "01-side-panel-reveals-empty");
-      });
-
-      await test.step("Changes opens in the Side panel that offered it", async () => {
-        await newTabPanel(sidePanel(page)).getByRole("button", { name: "Changes" }).click();
-        await expect(sidePanel(page).getByTestId("workspace-tab-working_diff")).toBeVisible({
-          timeout: 30_000,
-        });
-        await expect(page.getByTestId("working-diff-panel").filter({ visible: true })).toBeVisible({
-          timeout: 30_000,
-        });
-        await capture(page, testInfo, "02-changes-opens-in-side-panel");
-      });
-
-      await test.step("closing its final tab hides the Side panel, and it reopens empty", async () => {
-        const changesTab = sidePanel(page).getByTestId("workspace-tab-working_diff");
-        await changesTab.hover();
-        await page
-          .locator('[data-testid^="workspace-working-diff-close-"]')
-          .filter({ visible: true })
-          .click();
-        await expect(sidePanel(page)).toHaveCount(0, { timeout: 15_000 });
-        await capture(page, testInfo, "03-side-panel-hidden-after-final-tab-close");
-
-        await sidePanelToggle(page).click();
-        await expect(sidePanel(page)).toBeVisible({ timeout: 15_000 });
-        await expect(newTabPanel(sidePanel(page))).toBeVisible();
-        await capture(page, testInfo, "04-side-panel-revealed-empty");
-      });
-    } finally {
-      await workspace.cleanup();
-    }
-  });
-
-  test("an emptied ordinary pane is removed rather than hidden", async ({ page }, testInfo) => {
-    const workspace = await seedWorkspace({ repoPrefix: "side-panel-close-main-" });
-
-    try {
-      await gotoWorkspace(page, workspace.workspaceId);
-      await waitForWorkspaceTabsVisible(page);
-      await ensureSidePanel(page);
-
-      // Dragging the pane's only tab into its own left edge splits that tab into a
-      // new pane and leaves the one it came from empty.
-      const draftTab = page
-        .locator('[data-testid^="workspace-tab-draft_"]')
-        .filter({ visible: true })
-        .first();
-      await expect(draftTab).toBeVisible({ timeout: 30_000 });
-      await splitTabOutOfMainPane(page, draftTab);
-      const draftPane = page
-        .locator('[data-testid^="workspace-pane-pane_"]')
-        .filter({ visible: true })
-        .first();
-      await expect(draftPane).toBeVisible({ timeout: 15_000 });
-
-      const emptyMain = newTabPanel(mainPane(page));
-      await expect(emptyMain).toBeVisible({ timeout: 15_000 });
-      await capture(page, testInfo, "06-empty-main-pane-launcher");
-
-      const newTabChip = mainPane(page)
-        .locator('[data-testid^="workspace-tab-tab_"]')
-        .filter({ hasText: "New tab" });
-      await newTabChip.hover();
-      await mainPane(page)
-        .locator('[data-testid^="workspace-new-tab-close-"]')
-        .filter({ visible: true })
-        .click();
-
-      // Gone for good, unlike the Side panel beside it, which is still only hidden away.
-      await expect(mainPane(page)).toHaveCount(0, { timeout: 30_000 });
-      await expect(sidePanel(page)).toBeVisible();
-      await expect(draftPane.getByTestId("workspace-new-tab-panel")).toHaveCount(0);
-      await capture(page, testInfo, "07-empty-main-pane-removed");
-    } finally {
-      await workspace.cleanup();
-    }
-  });
-
-  test("closing New cannot remove the last visible pane", async ({ page }, testInfo) => {
-    const workspace = await seedWorkspace({ repoPrefix: "side-panel-final-pane-" });
-
-    try {
-      await gotoWorkspace(page, workspace.workspaceId);
-      await waitForWorkspaceTabsVisible(page);
-
-      // Park a tab in the Side panel, then put the panel away. The workspace still
-      // holds that tab, so emptying Main does not look like an empty workspace and
-      // nothing reseeds a draft into it.
-      await ensureSidePanel(page);
-      await newTabPanel(sidePanel(page))
-        .getByRole("button", { name: "Files", exact: true })
-        .click();
-      await expect(sidePanel(page).getByTestId("workspace-tab-files")).toBeVisible({
-        timeout: 30_000,
-      });
-      await sidePanelToggle(page).click();
-      await expect(sidePanel(page)).toHaveCount(0, { timeout: 15_000 });
-
-      const draftTab = page
-        .locator('[data-testid^="workspace-tab-draft_"]')
-        .filter({ visible: true })
-        .first();
-      await draftTab.hover();
-      await page
-        .locator('[data-testid^="workspace-draft-close-"]')
-        .filter({ visible: true })
-        .first()
-        .click();
-
-      // Main now contains New and is the only pane the user can see. Closing its
-      // tab cannot remove the final visible pane.
-      const lastPane = newTabPanel(mainPane(page));
-      await expect(lastPane).toBeVisible({ timeout: 15_000 });
-      await expect(lastPane.getByRole("button", { name: "Files", exact: true })).toBeVisible();
-      const finalNewTab = mainPane(page)
-        .locator('[data-testid^="workspace-tab-tab_"]')
-        .filter({ hasText: "New tab" });
-      await finalNewTab.hover();
-      await mainPane(page)
-        .locator('[data-testid^="workspace-new-tab-close-"]')
-        .filter({ visible: true })
-        .click();
-      await expect(lastPane).toBeVisible();
-      await capture(page, testInfo, "08-final-visible-pane-has-no-close");
-    } finally {
-      await workspace.cleanup();
-    }
-  });
-
-  test("a pane's own menu creates an independent view when one is open elsewhere", async ({
-    page,
-  }, testInfo) => {
-    const workspace = await seedWorkspace({ repoPrefix: "side-panel-claim-" });
-
-    try {
-      await gotoWorkspace(page, workspace.workspaceId);
-      await waitForWorkspaceTabsVisible(page);
-      await ensureSidePanel(page);
-      await newTabPanel(sidePanel(page)).getByRole("button", { name: "Changes" }).click();
-      await expect(sidePanel(page).getByTestId("workspace-tab-working_diff")).toBeVisible({
-        timeout: 30_000,
-      });
-      await capture(page, testInfo, "08-changes-in-side-panel");
-
-      await mainPane(page).getByTestId("workspace-new-tab-button").click();
-      await page
-        .getByTestId("workspace-new-tab-menu-changes")
-        .filter({ visible: true })
-        .first()
-        .click();
-
-      await expect(mainPane(page).getByTestId("workspace-tab-working_diff")).toBeVisible({
-        timeout: 15_000,
-      });
-      await expect(sidePanel(page).getByTestId("workspace-tab-working_diff")).toHaveCount(1);
-      await expect(mainPane(page).getByTestId("workspace-tab-working_diff")).toHaveCount(1);
-      await expect(page.getByTestId("workspace-tab-working_diff")).toHaveCount(2);
-      await capture(page, testInfo, "09-independent-changes-in-both-panes");
-    } finally {
-      await workspace.cleanup();
-    }
-  });
-});
diff --git a/packages/app/e2e/browser/sidebar-resize-handle.spec.ts b/packages/app/e2e/browser/sidebar-resize-handle.spec.ts
index dd59ab02bf..fdbfb5842c 100644
--- a/packages/app/e2e/browser/sidebar-resize-handle.spec.ts
+++ b/packages/app/e2e/browser/sidebar-resize-handle.spec.ts
@@ -29,10 +29,10 @@ test("sidebar and workspace pane borders highlight on hover", async ({ page, wit
   await expectBorderHighlight(page, "left-sidebar-resize-handle", sidebarHandle, "1px");
 
   await page.getByTestId("workspace-explorer-toggle").first().click();
-  const splitHandle = page.getByTestId("workspace-split-resize-handle");
+  const splitHandle = page.getByTestId("workspace-explorer-sidebar-resize-handle");
   await expectBorderHighlight(
     page,
-    "workspace-split-resize-handle",
+    "workspace-explorer-sidebar-resize-handle",
     splitHandle.getByRole("separator"),
     "3px",
   );
diff --git a/packages/app/e2e/browser/sidebar-workspace.spec.ts b/packages/app/e2e/browser/sidebar-workspace.spec.ts
index e7c375f4dc..e7a95106da 100644
--- a/packages/app/e2e/browser/sidebar-workspace.spec.ts
+++ b/packages/app/e2e/browser/sidebar-workspace.spec.ts
@@ -319,7 +319,7 @@ test.describe("Half-screen desktop layout", () => {
     await expect(closedIcon).toBeVisible();
     const closedBounds = await closedIcon.boundingBox();
     expect(closedBounds).not.toBeNull();
-    expect(closedBounds?.x).toBeCloseTo(12, 0);
+    expect(closedBounds?.x).toBeCloseTo(9, 0);
     expect(closedBounds?.y).toBe(openBounds?.y);
   });
 
@@ -342,16 +342,19 @@ test.describe("Half-screen desktop layout", () => {
 
       await openFilesPanel(page);
       const explorerToggle = page.getByTestId("workspace-explorer-toggle").first();
-      await expect(page.getByTestId("workspace-tab-files").filter({ visible: true })).toBeVisible();
-      await expect(explorerToggle).toHaveAccessibleName("Close side panel");
+      await expect(
+        page.getByTestId("explorer-sidebar-tab-files").filter({ visible: true }),
+      ).toBeVisible();
+      await expect(explorerToggle).toHaveAccessibleName("Close Explorer sidebar");
       await expect(page.getByTestId("sidebar-global-new-workspace")).toBeVisible();
-      await expect(page.getByTestId("workspace-tabs-row").filter({ visible: true })).toHaveCount(2);
+      await expect(page.getByTestId("explorer-sidebar-tab-rail")).toBeVisible();
+      await expect(page.getByTestId("workspace-tabs-row").filter({ visible: true })).toHaveCount(1);
 
       await explorerToggle.click();
-      await expect(page.getByTestId("workspace-tab-files").filter({ visible: true })).toHaveCount(
-        0,
-      );
-      await expect(explorerToggle).toHaveAccessibleName("Open side panel");
+      await expect(
+        page.getByTestId("explorer-sidebar-tab-files").filter({ visible: true }),
+      ).toHaveCount(0);
+      await expect(explorerToggle).toHaveAccessibleName("Open Explorer sidebar");
       await expect(page.getByTestId("sidebar-global-new-workspace")).toBeVisible();
     } finally {
       await workspace.cleanup();
diff --git a/packages/app/e2e/browser/workspace-model-restart.spec.ts b/packages/app/e2e/browser/workspace-model-restart.spec.ts
index be96b1642c..e1dd703508 100644
--- a/packages/app/e2e/browser/workspace-model-restart.spec.ts
+++ b/packages/app/e2e/browser/workspace-model-restart.spec.ts
@@ -356,22 +356,6 @@ function parseWorkspaceIdFromPageUrl(page: Page, serverId: string): string | nul
   return decodeWorkspaceIdFromPathSegment(match[1]);
 }
 
-async function expectWorkspaceRowHasOnlyIndicator(
-  page: Page,
-  input: { serverId: string; workspaceId: string; indicator: string },
-) {
-  const row = page.getByTestId(`sidebar-workspace-row-${input.serverId}:${input.workspaceId}`);
-  await expect(row).toBeVisible({ timeout: 30_000 });
-  for (const indicator of ["attention", "done", "failed", "loading", "needs_input", "running"]) {
-    const locator = row.locator(`[data-testid="workspace-status-indicator-${indicator}"]`);
-    if (indicator === input.indicator) {
-      await expect(locator).toBeVisible({ timeout: 30_000 });
-    } else {
-      await expect(locator).toHaveCount(0);
-    }
-  }
-}
-
 async function expectWorkspaceRowDoesNotShowIndicator(
   page: Page,
   input: { serverId: string; workspaceId: string; indicator: string },
@@ -444,11 +428,6 @@ test.describe("Workspace model restart regressions", () => {
 
       await page.goto(buildHostWorkspaceRoute(serverId, seeded.workspaceA));
       await waitForSidebarHydration(page);
-      await expectWorkspaceRowHasOnlyIndicator(page, {
-        serverId,
-        workspaceId: seeded.workspaceA,
-        indicator: "running",
-      });
       await expectWorkspaceRowDoesNotShowIndicator(page, {
         serverId,
         workspaceId: seeded.workspaceB,
diff --git a/packages/app/e2e/support/helpers/branch-switcher.ts b/packages/app/e2e/support/helpers/branch-switcher.ts
index c9fbe3530c..fa43ce33b2 100644
--- a/packages/app/e2e/support/helpers/branch-switcher.ts
+++ b/packages/app/e2e/support/helpers/branch-switcher.ts
@@ -1,27 +1,27 @@
 import { expect, type Page } from "@playwright/test";
 import { escapeRegex } from "./regex";
-import { openChangesPanel as openWorkspaceChangesPanel } from "./workspace-tabs";
+import { openChangesTreePanel } from "./workspace-tabs";
 
 // The branch switcher lives in the Changes tab, not in the workspace header. It renders as a button whose
 // accessible name carries the current branch ("Current branch: <name>. Press to
 // switch branch."). Matching on the accessible name keeps these helpers tied to
 // what a screen reader user hears, and it proves the panel resolved a real
-// checkout directory from the opaque workspace id. Scoping to the changes header
-// keeps the matcher unambiguous even when the header is shared with diff actions.
+// checkout directory from the opaque workspace id. Scoping to the repository
+// header keeps the matcher aligned with the row that owns repository identity.
 function branchSwitcherTrigger(page: Page, branchName: string) {
   return page
-    .getByTestId("changes-header")
+    .getByTestId("changes-repository-header")
     .getByRole("button", { name: new RegExp(`Current branch: ${escapeRegex(branchName)}\\b`) })
     .filter({ visible: true })
     .first();
 }
 
-// Opens the fixed pane and lands on the Changes tab, where the switcher and diff live.
+// Opens the fixed Explorer Changes view, where the switcher lives.
 export async function openChangesPanel(page: Page): Promise<void> {
-  await openWorkspaceChangesPanel(page);
-  await expect(page.getByTestId("changes-header").filter({ visible: true }).first()).toBeVisible({
-    timeout: 30_000,
-  });
+  await openChangesTreePanel(page);
+  await expect(
+    page.getByTestId("changes-repository-header").filter({ visible: true }).first(),
+  ).toBeVisible({ timeout: 30_000 });
 }
 
 export async function expectWorkspaceBranch(page: Page, branchName: string): Promise<void> {
diff --git a/packages/app/e2e/support/helpers/split-pane.ts b/packages/app/e2e/support/helpers/split-pane.ts
deleted file mode 100644
index 1e5cb17ecb..0000000000
--- a/packages/app/e2e/support/helpers/split-pane.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-import { expect, type Locator, type Page } from "@playwright/test";
-
-export interface SplitPaneGeometry {
-  containerWidth: number;
-  explorerWidth: number;
-  visibleWidth: number;
-  separatorCount: number;
-  occupiedWidth: number;
-}
-
-function splitSeparator(page: Page): Locator {
-  return page.getByRole("separator", { name: "" });
-}
-
-export async function openExplorerSplit(page: Page): Promise<void> {
-  await page.getByRole("button", { name: "Open side panel" }).click();
-  await expect(splitSeparator(page)).toHaveCount(1, { timeout: 30_000 });
-}
-
-export async function hideExplorerSplit(page: Page): Promise<void> {
-  await page.getByRole("button", { name: "Close side panel" }).click();
-  await expect(splitSeparator(page)).toHaveCount(0, { timeout: 30_000 });
-}
-
-export async function resizeExplorerSplit(page: Page, deltaX: number): Promise<void> {
-  const separator = splitSeparator(page);
-  await expect(separator).toHaveCount(1);
-  const box = await separator.boundingBox();
-  expect(box).not.toBeNull();
-  if (!box) throw new Error("Split separator has no bounding box");
-  await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
-  await page.mouse.down();
-  await page.mouse.move(box.x + box.width / 2 + deltaX, box.y + box.height / 2, { steps: 10 });
-  await page.mouse.up();
-}
-
-export async function stampExplorerNode(page: Page): Promise<void> {
-  await page
-    .getByTestId("split-group-child")
-    .last()
-    .evaluate((node) => {
-      Reflect.set(window, "__splitPaneExplorerNode", node);
-      node.setAttribute("data-split-pane-identity", "retained");
-    });
-}
-
-export async function expectExplorerNodeRetained(page: Page): Promise<void> {
-  const stampedNode = page.locator('[data-split-pane-identity="retained"]');
-  await expect(stampedNode).toHaveCount(1);
-  expect(
-    await stampedNode.evaluate((node) => Reflect.get(window, "__splitPaneExplorerNode") === node),
-  ).toBe(true);
-}
-
-export async function measureExplorerSplit(page: Page): Promise<SplitPaneGeometry> {
-  const explorerChild = page.locator('[data-split-pane-identity="retained"]');
-  await expect(explorerChild).toHaveCount(1);
-
-  return explorerChild.evaluate((explorerNode) => {
-    const visibleNode = Array.from(explorerNode.parentElement?.children ?? [])
-      .filter(
-        (candidate) =>
-          candidate !== explorerNode &&
-          (candidate as HTMLElement).dataset.testid === "split-group-child",
-      )
-      .sort(
-        (left, right) => right.getBoundingClientRect().width - left.getBoundingClientRect().width,
-      )[0];
-    if (!(visibleNode instanceof HTMLElement)) throw new Error("Visible split child not found");
-    const visible = visibleNode.getBoundingClientRect();
-    const explorer = explorerNode.getBoundingClientRect();
-    const container = explorerNode.parentElement?.getBoundingClientRect();
-    if (!container) throw new Error("Split child has no container");
-    const separatorCount =
-      explorerNode.parentElement?.querySelectorAll('[role="separator"]').length ?? 0;
-    return {
-      containerWidth: container.width,
-      explorerWidth: explorer.width,
-      visibleWidth: visible.width,
-      separatorCount,
-      occupiedWidth: explorer.width + visible.width,
-    };
-  });
-}
diff --git a/packages/app/e2e/support/helpers/workspace-tabs.ts b/packages/app/e2e/support/helpers/workspace-tabs.ts
index cdebe3af3e..bcce4556a0 100644
--- a/packages/app/e2e/support/helpers/workspace-tabs.ts
+++ b/packages/app/e2e/support/helpers/workspace-tabs.ts
@@ -42,8 +42,8 @@ export async function expectFailedSetupTabSeededInMainPane(
   await expect(page.getByTestId(tabId).filter({ visible: true }).first()).toBeVisible({
     timeout: 30_000,
   });
-  const panel = await ensureSidePanel(page);
-  await expect(panel.getByTestId(tabId)).toHaveCount(0);
+  const explorer = await ensureExplorerSidebar(page);
+  await expect(explorer.getByTestId(tabId)).toHaveCount(0);
 }
 
 export async function closeSetupTab(page: Page, workspaceId: string): Promise<void> {
@@ -57,8 +57,8 @@ function visibleTestId(page: Page, testId: string) {
   return page.getByTestId(testId).filter({ visible: true });
 }
 
-function sidePanel(page: Page) {
-  return visibleTestId(page, "workspace-side-panel").first();
+function explorerSidebar(page: Page) {
+  return visibleTestId(page, "workspace-explorer-sidebar").first();
 }
 
 async function selectWorkspaceTab(tab: Locator): Promise<void> {
@@ -70,53 +70,54 @@ async function selectWorkspaceTab(tab: Locator): Promise<void> {
   await expect(tab).toHaveAttribute("aria-selected", "true");
 }
 
-/** Reveal the Side panel. It opens empty; the caller decides what goes in it. */
-export async function ensureSidePanel(page: Page): Promise<Locator> {
+/** Reveal the Explorer sidebar without changing its selected view. */
+export async function ensureExplorerSidebar(page: Page): Promise<Locator> {
   const toggle = page.getByTestId("workspace-explorer-toggle").first();
   await expect(toggle).toBeVisible({ timeout: 30_000 });
-  const panel = sidePanel(page);
-  if ((await panel.count()) === 0) {
+  const explorer = explorerSidebar(page);
+  if ((await explorer.count()) === 0) {
     await toggle.click();
   }
-  await expect(panel).toBeVisible({ timeout: 30_000 });
-  return panel;
+  await expect(explorer).toBeVisible({ timeout: 30_000 });
+  return explorer;
 }
 
-/**
- * Reveals the Side panel and brings one of its views up in it. Goes through the
- * pane's own `+` menu, which is there whether the pane is empty or already loaded.
- */
-async function openSidePanelView(
+/** Reveals the Explorer sidebar and selects one of its fixed navigation views. */
+async function openExplorerView(
   page: Page,
-  view: { tabTestId: string; launchItemId: string; contentTestId: string; timeout?: number },
+  view: { tabTestId: string; contentTestId: string; timeout?: number },
 ): Promise<void> {
-  const panel = await ensureSidePanel(page);
-  const tab = panel.getByTestId(view.tabTestId);
-  if ((await tab.count()) === 0) {
-    await panel.getByTestId("workspace-new-tab-button").click();
-    await page
-      .getByTestId(`workspace-new-tab-menu-${view.launchItemId}`)
-      .filter({ visible: true })
-      .click();
-  }
-  await selectWorkspaceTab(tab);
+  const explorer = await ensureExplorerSidebar(page);
+  const tab = explorer.getByTestId(view.tabTestId);
+  await tab.click();
   await expect(visibleTestId(page, view.contentTestId).first()).toBeVisible({
     timeout: view.timeout ?? 30_000,
   });
 }
 
+export async function openChangesTreePanel(page: Page): Promise<void> {
+  await openExplorerView(page, {
+    tabTestId: "explorer-sidebar-tab-changes_tree",
+    contentTestId: "changes-tree-panel",
+  });
+}
+
 export async function openChangesPanel(page: Page): Promise<void> {
-  await openSidePanelView(page, {
-    tabTestId: "workspace-tab-working_diff",
-    launchItemId: "changes",
-    contentTestId: "working-diff-panel",
+  await openChangesTreePanel(page);
+  const changedFile = page
+    .locator('[data-testid^="diff-tree-file-"][data-testid$="-toggle"]')
+    .filter({ visible: true })
+    .first();
+  await expect(changedFile).toBeVisible({ timeout: 30_000 });
+  await changedFile.click();
+  await expect(visibleTestId(page, "working-diff-panel").first()).toBeVisible({
+    timeout: 30_000,
   });
 }
 
 export async function openFilesPanel(page: Page): Promise<void> {
-  await openSidePanelView(page, {
-    tabTestId: "workspace-tab-files",
-    launchItemId: "files",
+  await openExplorerView(page, {
+    tabTestId: "explorer-sidebar-tab-files",
     contentTestId: "file-explorer-tree-scroll",
   });
 }
@@ -128,12 +129,10 @@ export async function openPullRequestPanel(page: Page): Promise<void> {
     await expect(visibleTestId(page, "pr-pane").first()).toBeVisible({ timeout: 15_000 });
     return;
   }
-  await openSidePanelView(page, {
-    tabTestId: "workspace-tab-pull_request",
-    launchItemId: "pull-request",
-    contentTestId: "pr-pane",
-    timeout: 15_000,
-  });
+  const trigger = visibleTestId(page, "workspace-new-tab-button").first();
+  await trigger.click();
+  await visibleTestId(page, "workspace-new-tab-menu-pull-request").first().click();
+  await expect(visibleTestId(page, "pr-pane").first()).toBeVisible({ timeout: 15_000 });
 }
 
 export async function waitForWorkspaceTabsVisible(page: Page): Promise<void> {
diff --git a/packages/app/package.json b/packages/app/package.json
index 39494e5de6..9bac314032 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -30,6 +30,7 @@
     "build:web": "npm --prefix ../.. run build:app-deps && expo export --platform web",
     "profile:composer-typing": "node ./scripts/profile-composer-typing.mjs",
     "profile:explorer-toggle": "node ./scripts/profile-explorer-toggle.mjs",
+    "profile:side-pane": "playwright test --config playwright.profile.config.ts side-pane-performance.spec.ts",
     "profile:workspace-switching": "node ./scripts/profile-workspace-switching.mjs",
     "profile:workspace-tabs": "node ./scripts/profile-workspace-tabs.mjs",
     "deploy:web": "npm run build:web && wrangler pages deploy dist --project-name paseo-app --branch main",
diff --git a/packages/app/perf/helpers/side-pane-performance.ts b/packages/app/perf/helpers/side-pane-performance.ts
new file mode 100644
index 0000000000..f4cc586fe9
--- /dev/null
+++ b/packages/app/perf/helpers/side-pane-performance.ts
@@ -0,0 +1,388 @@
+import { execFileSync } from "node:child_process";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { expect, type Locator, type Page } from "@playwright/test";
+
+const APP_SETTINGS_KEY = "@paseo:app-settings";
+
+export interface ProfileTarget {
+  serverId: string;
+  workspaceId: string;
+}
+
+export interface RenderSummary {
+  id: string;
+  renders: number;
+  mounts: number;
+  updates: number;
+  actualDurationMs: number;
+  maximumActualDurationMs: number;
+}
+
+export interface InteractionMeasurement {
+  name: string;
+  latencyMs: number;
+  commits: number;
+  domMutations: number;
+  addedElements: number;
+  removedElements: number;
+  addedTestIds: string[];
+  removedTestIds: string[];
+  trackedNodes: Array<{
+    selector: string;
+    existedBefore: boolean;
+    connected: boolean;
+    sameNode: boolean;
+  }>;
+  renders: RenderSummary[];
+  reasons: Record<string, Record<string, number>>;
+  heapAfterGcBytes?: number;
+}
+
+interface BrowserMeasurementState {
+  startedAt: number;
+  selectors: string[];
+  originals: Array<Element | null>;
+  observer?: MutationObserver;
+  domMutations: number;
+  addedElements: number;
+  removedElements: number;
+  addedTestIds: Set<string>;
+  removedTestIds: Set<string>;
+}
+
+declare global {
+  interface Window {
+    __PASEO_SIDE_PANE_MEASUREMENT__?: BrowserMeasurementState;
+  }
+}
+
+function parseCliJson<T>(output: string): T {
+  const arrayStart = output.indexOf("[\n");
+  const objectStart = output.indexOf("{\n");
+  const start = arrayStart >= 0 ? arrayStart : objectStart;
+  if (start < 0) throw new Error(`Could not find JSON in CLI output: ${output}`);
+  return JSON.parse(output.slice(start)) as T;
+}
+
+export function resolveProfileTarget(): ProfileTarget {
+  const repoRoot = resolve(process.cwd(), "../..");
+  const serverId = (
+    process.env.PASEO_PROFILE_SERVER_ID ??
+    readFileSync(resolve(repoRoot, ".dev/paseo-home/server-id"), "utf8")
+  ).trim();
+  const requestedName = process.env.PASEO_PROFILE_WORKSPACE_NAME?.trim() || "Paseo";
+  const requestedWorkspaceId = process.env.PASEO_PROFILE_WORKSPACE_ID?.trim();
+  if (requestedWorkspaceId) return { serverId, workspaceId: requestedWorkspaceId };
+
+  const output = execFileSync("npm", ["run", "cli", "--", "workspace", "ls", "--json"], {
+    cwd: repoRoot,
+    encoding: "utf8",
+    env: { ...process.env, FORCE_COLOR: "0" },
+  });
+  const workspaces =
+    parseCliJson<Array<{ workspaceId: string; name: string; cwd: string }>>(output);
+  const workspace = workspaces.find(
+    (candidate) => candidate.name === requestedName && candidate.cwd === repoRoot,
+  );
+  if (!workspace) {
+    throw new Error(`No Paseo workspace named ${requestedName} points at ${repoRoot}`);
+  }
+  return { serverId, workspaceId: workspace.workspaceId };
+}
+
+export async function openProfileWorkspace(page: Page, target: ProfileTarget): Promise<void> {
+  await page.addInitScript(() => {
+    const preserveRenderProfile = (original: History["pushState"]) =>
+      function preserveProfileParam(
+        this: History,
+        state: unknown,
+        unused: string,
+        url?: string | URL | null,
+      ) {
+        if (url == null) return Reflect.apply(original, this, [state, unused, url]);
+        const nextUrl = new URL(String(url), location.href);
+        nextUrl.searchParams.set("renderProfile", "1");
+        return Reflect.apply(original, this, [
+          state,
+          unused,
+          `${nextUrl.pathname}${nextUrl.search}${nextUrl.hash}`,
+        ]);
+      };
+    history.pushState = preserveRenderProfile(history.pushState);
+    history.replaceState = preserveRenderProfile(history.replaceState);
+  });
+  await page.goto("/?renderProfile=1", { waitUntil: "domcontentloaded" });
+  const workspaceRow = page.getByTestId(
+    `sidebar-workspace-row-${target.serverId}:${target.workspaceId}`,
+  );
+  await expect(workspaceRow).toBeVisible({ timeout: 60_000 });
+  await workspaceRow.click();
+  await expect(
+    page.getByTestId("workspace-tabs-row").filter({ visible: true }).first(),
+  ).toBeVisible({
+    timeout: 60_000,
+  });
+  await expect(page.getByTestId("workspace-explorer-toggle").first()).toBeVisible();
+  await expect(page).toHaveURL(new RegExp(`/workspace/${target.workspaceId}\\?renderProfile=1$`));
+}
+
+export async function enableChangesOpenInSidePane(page: Page): Promise<void> {
+  await page.evaluate((settingsKey) => {
+    const persisted = JSON.parse(localStorage.getItem(settingsKey) ?? "{}") as Record<
+      string,
+      unknown
+    >;
+    const currentPreferences =
+      typeof persisted.openInSidePane === "object" && persisted.openInSidePane !== null
+        ? (persisted.openInSidePane as Record<string, unknown>)
+        : {};
+    localStorage.setItem(
+      settingsKey,
+      JSON.stringify({
+        ...persisted,
+        openInSidePane: { ...currentPreferences, explorerChanges: true },
+      }),
+    );
+  }, APP_SETTINGS_KEY);
+  await page.reload({ waitUntil: "domcontentloaded" });
+  await expect(
+    page.getByTestId("workspace-tabs-row").filter({ visible: true }).first(),
+  ).toBeVisible({
+    timeout: 60_000,
+  });
+}
+
+export async function openChangesExplorer(page: Page): Promise<void> {
+  const explorer = page.getByTestId("workspace-explorer-sidebar");
+  if ((await explorer.count()) === 0) {
+    await page.keyboard.press("Meta+e");
+  }
+  await expect(explorer).toBeVisible({ timeout: 30_000 });
+  const changesTab = explorer.getByRole("button", { name: /Working tree diff/i }).first();
+  await expect(changesTab).toBeVisible();
+  if ((await changesTab.getAttribute("aria-selected")) !== "true") {
+    await changesTab.click();
+  }
+  await expect(page.getByTestId("changes-tree-panel")).toBeVisible({ timeout: 30_000 });
+  await expect(changedFileRows(page).nth(1)).toBeVisible({ timeout: 30_000 });
+}
+
+export function changedFileRows(page: Page): Locator {
+  return page
+    .locator('[data-testid^="diff-tree-file-"][data-testid$="-toggle"]')
+    .filter({ visible: true });
+}
+
+export async function selectChangedFile(page: Page, index: number): Promise<void> {
+  const row = changedFileRows(page).nth(index);
+  await expect(row).toBeVisible();
+  await row.click();
+  await expect(row).toHaveAttribute("aria-selected", "true");
+}
+
+export async function expectWorkingDiffVisible(page: Page): Promise<void> {
+  await expect(page.getByTestId("working-diff-panel").filter({ visible: true })).toBeVisible({
+    timeout: 60_000,
+  });
+  await expect(page.getByTestId("git-diff-canvas").filter({ visible: true })).toBeVisible({
+    timeout: 60_000,
+  });
+}
+
+export async function closeWorkingDiffPane(page: Page): Promise<void> {
+  const tab = page.getByTestId("workspace-tab-working_diff").filter({ visible: true }).first();
+  await expect(tab).toBeVisible();
+  await tab.hover();
+  await page
+    .locator('[data-testid^="workspace-working-diff-close-"]')
+    .filter({ visible: true })
+    .first()
+    .click();
+  await expect(page.getByTestId("working-diff-panel").filter({ visible: true })).toHaveCount(0);
+}
+
+export async function measureHeapAfterGc(page: Page): Promise<number> {
+  await page.requestGC();
+  return page.evaluate(() => {
+    const memory = performance as Performance & {
+      memory?: { usedJSHeapSize: number };
+    };
+    return memory.memory?.usedJSHeapSize ?? 0;
+  });
+}
+
+async function waitForReactIdle(page: Page, quietMs = 250): Promise<void> {
+  let previousCount = -1;
+  let unchangedSince = Date.now();
+  const deadline = Date.now() + 15_000;
+  while (Date.now() < deadline) {
+    const count = await page.evaluate(() => globalThis.__PASEO_RENDER_PROFILE__?.length ?? 0);
+    if (count !== previousCount) {
+      previousCount = count;
+      unchangedSince = Date.now();
+    } else if (Date.now() - unchangedSince >= quietMs) {
+      return;
+    }
+    await page.waitForTimeout(25);
+  }
+  throw new Error("React profiler did not become idle");
+}
+
+function summarizeRenders(
+  samples: Array<{
+    id: string;
+    phase: "mount" | "update" | "nested-update";
+    actualDuration: number;
+  }>,
+): RenderSummary[] {
+  const summaries = new Map<string, RenderSummary>();
+  for (const sample of samples) {
+    const summary = summaries.get(sample.id) ?? {
+      id: sample.id,
+      renders: 0,
+      mounts: 0,
+      updates: 0,
+      actualDurationMs: 0,
+      maximumActualDurationMs: 0,
+    };
+    summary.renders += 1;
+    summary.mounts += sample.phase === "mount" ? 1 : 0;
+    summary.updates += sample.phase === "mount" ? 0 : 1;
+    summary.actualDurationMs += sample.actualDuration;
+    summary.maximumActualDurationMs = Math.max(
+      summary.maximumActualDurationMs,
+      sample.actualDuration,
+    );
+    summaries.set(sample.id, summary);
+  }
+  for (const summary of summaries.values()) {
+    summary.actualDurationMs = Math.round(summary.actualDurationMs * 100) / 100;
+    summary.maximumActualDurationMs = Math.round(summary.maximumActualDurationMs * 100) / 100;
+  }
+  return [...summaries.values()].sort(
+    (left, right) => right.actualDurationMs - left.actualDurationMs,
+  );
+}
+
+async function beginMeasurement(page: Page, selectors: string[]): Promise<void> {
+  await waitForReactIdle(page);
+  await page.evaluate((trackedSelectors) => {
+    globalThis.__PASEO_RESET_RENDER_PROFILE__?.();
+    const collectTestIds = (node: Node, output: Set<string>) => {
+      if (!(node instanceof Element)) return;
+      const ownTestId = node.getAttribute("data-testid");
+      if (ownTestId) output.add(ownTestId);
+      for (const element of node.querySelectorAll("[data-testid]")) {
+        const testId = element.getAttribute("data-testid");
+        if (testId) output.add(testId);
+      }
+    };
+    const state: BrowserMeasurementState = {
+      startedAt: performance.now(),
+      selectors: trackedSelectors,
+      originals: trackedSelectors.map((selector) => document.querySelector(selector)),
+      domMutations: 0,
+      addedElements: 0,
+      removedElements: 0,
+      addedTestIds: new Set(),
+      removedTestIds: new Set(),
+    };
+    state.observer = new MutationObserver((records) => {
+      state.domMutations += records.length;
+      for (const record of records) {
+        for (const node of record.addedNodes) {
+          state.addedElements +=
+            node instanceof Element ? 1 + node.querySelectorAll("*").length : 0;
+          collectTestIds(node, state.addedTestIds);
+        }
+        for (const node of record.removedNodes) {
+          state.removedElements +=
+            node instanceof Element ? 1 + node.querySelectorAll("*").length : 0;
+          collectTestIds(node, state.removedTestIds);
+        }
+      }
+    });
+    state.observer.observe(document.body, { childList: true, subtree: true });
+    window.__PASEO_SIDE_PANE_MEASUREMENT__ = state;
+  }, selectors);
+}
+
+async function finishMeasurement(page: Page, name: string): Promise<InteractionMeasurement> {
+  await page.evaluate(
+    () =>
+      new Promise<void>((resolveFrame) => {
+        requestAnimationFrame(() => requestAnimationFrame(() => resolveFrame()));
+      }),
+  );
+  await waitForReactIdle(page);
+  const raw = await page.evaluate((measurementName) => {
+    const state = window.__PASEO_SIDE_PANE_MEASUREMENT__;
+    if (!state) throw new Error("Side-pane performance measurement was not started");
+    state.observer?.disconnect();
+    const samples = globalThis.__PASEO_RENDER_PROFILE__ ?? [];
+    return {
+      name: measurementName,
+      latencyMs: Math.round((performance.now() - state.startedAt) * 100) / 100,
+      commits: new Set(samples.map((sample) => sample.commitTime)).size,
+      domMutations: state.domMutations,
+      addedElements: state.addedElements,
+      removedElements: state.removedElements,
+      addedTestIds: [...state.addedTestIds].sort(),
+      removedTestIds: [...state.removedTestIds].sort(),
+      trackedNodes: state.selectors.map((selector, index) => {
+        const original = state.originals[index] ?? null;
+        const current = document.querySelector(selector);
+        return {
+          selector,
+          existedBefore: original !== null,
+          connected: original?.isConnected ?? false,
+          sameNode: original !== null && original === current,
+        };
+      }),
+      samples,
+      reasons: globalThis.__PASEO_RENDER_PROFILE_REASONS__ ?? {},
+    };
+  }, name);
+  return {
+    ...raw,
+    renders: summarizeRenders(raw.samples),
+  };
+}
+
+export async function measureInteraction(
+  page: Page,
+  input: {
+    name: string;
+    trackedSelectors: string[];
+    interact: () => Promise<void>;
+    expectComplete: () => Promise<void>;
+  },
+): Promise<InteractionMeasurement> {
+  await beginMeasurement(page, input.trackedSelectors);
+  await input.interact();
+  await input.expectComplete();
+  return finishMeasurement(page, input.name);
+}
+
+export function expectTrackedNodePreserved(
+  measurement: InteractionMeasurement,
+  selector: string,
+): void {
+  const tracked = measurement.trackedNodes.find((candidate) => candidate.selector === selector);
+  expect.soft(tracked).toEqual({
+    selector,
+    existedBefore: true,
+    connected: true,
+    sameNode: true,
+  });
+}
+
+export function expectProfilerDidNotMount(
+  measurement: InteractionMeasurement,
+  idPrefix: string,
+): void {
+  const summaries = measurement.renders.filter((summary) => summary.id.startsWith(idPrefix));
+  expect.soft(summaries.length).toBeGreaterThan(0);
+  expect.soft(summaries.every((summary) => summary.mounts === 0)).toBe(true);
+}
diff --git a/packages/app/perf/side-pane-performance.spec.ts b/packages/app/perf/side-pane-performance.spec.ts
new file mode 100644
index 0000000000..a9628b8c08
--- /dev/null
+++ b/packages/app/perf/side-pane-performance.spec.ts
@@ -0,0 +1,119 @@
+import { test, expect } from "@playwright/test";
+import {
+  changedFileRows,
+  closeWorkingDiffPane,
+  enableChangesOpenInSidePane,
+  expectProfilerDidNotMount,
+  expectTrackedNodePreserved,
+  expectWorkingDiffVisible,
+  measureInteraction,
+  measureHeapAfterGc,
+  openChangesExplorer,
+  openProfileWorkspace,
+  resolveProfileTarget,
+  selectChangedFile,
+  type InteractionMeasurement,
+} from "./helpers/side-pane-performance";
+
+const MAIN_PANE = '[data-testid="workspace-pane-main"]';
+const WORKING_DIFF = '[data-testid="working-diff-panel"]';
+const DIFF_CANVAS = '[data-testid="git-diff-canvas-root"]';
+const DIFF_TAB = '[data-testid="workspace-tab-working_diff"]';
+
+test("side-pane diff transitions preserve mounted work and report their real React cost", async ({
+  page,
+}, testInfo) => {
+  test.setTimeout(180_000);
+  const target = resolveProfileTarget();
+  const reports: InteractionMeasurement[] = [];
+
+  await test.step("open the real main workspace with Changes routed beside it", async () => {
+    await openProfileWorkspace(page, target);
+    await enableChangesOpenInSidePane(page);
+    await openChangesExplorer(page);
+    expect(await changedFileRows(page).count()).toBeGreaterThanOrEqual(2);
+  });
+
+  await test.step("creating the side pane keeps the main pane mounted", async () => {
+    const report = await measureInteraction(page, {
+      name: "create-side-pane",
+      trackedSelectors: [MAIN_PANE],
+      interact: () => selectChangedFile(page, 0),
+      expectComplete: () => expectWorkingDiffVisible(page),
+    });
+    reports.push(report);
+    await testInfo.attach(report.name, {
+      body: JSON.stringify(report, null, 2),
+      contentType: "application/json",
+    });
+    expectTrackedNodePreserved(report, MAIN_PANE);
+  });
+
+  await test.step("changing the selected diff file updates the existing diff in place", async () => {
+    const report = await measureInteraction(page, {
+      name: "change-diff-focus",
+      trackedSelectors: [MAIN_PANE, WORKING_DIFF, DIFF_CANVAS, DIFF_TAB],
+      interact: () => selectChangedFile(page, 1),
+      expectComplete: () => expectWorkingDiffVisible(page),
+    });
+    reports.push(report);
+    await testInfo.attach(report.name, {
+      body: JSON.stringify(report, null, 2),
+      contentType: "application/json",
+    });
+    expectTrackedNodePreserved(report, MAIN_PANE);
+    expectTrackedNodePreserved(report, WORKING_DIFF);
+    expectTrackedNodePreserved(report, DIFF_CANVAS);
+    expectTrackedNodePreserved(report, DIFF_TAB);
+    expectProfilerDidNotMount(report, "WorkingDiffPanel:");
+  });
+
+  await test.step("repeated cold reopenings measure retained workspace work", async () => {
+    for (let index = 0; index < 5; index += 1) {
+      await closeWorkingDiffPane(page);
+      const report = await measureInteraction(page, {
+        name: `reopen-side-pane-${index + 1}`,
+        trackedSelectors: [MAIN_PANE],
+        interact: () => selectChangedFile(page, index % 2),
+        expectComplete: () => expectWorkingDiffVisible(page),
+      });
+      report.heapAfterGcBytes = await measureHeapAfterGc(page);
+      reports.push(report);
+      await testInfo.attach(report.name, {
+        body: JSON.stringify(report, null, 2),
+        contentType: "application/json",
+      });
+      expectTrackedNodePreserved(report, MAIN_PANE);
+      expect(
+        report.renders.some(
+          (summary) => summary.id.startsWith("WorkingDiffPanel:") && summary.mounts > 0,
+        ),
+      ).toBe(true);
+    }
+  });
+
+  const artifact = {
+    appUrl: testInfo.project.use.baseURL,
+    target,
+    reports,
+  };
+  await testInfo.attach("side-pane-performance", {
+    body: JSON.stringify(artifact, null, 2),
+    contentType: "application/json",
+  });
+  console.log(
+    `[perf] Side pane: ${JSON.stringify(
+      reports.map((report) => ({
+        name: report.name,
+        latencyMs: report.latencyMs,
+        commits: report.commits,
+        domMutations: report.domMutations,
+        addedElements: report.addedElements,
+        removedElements: report.removedElements,
+        heapAfterGcBytes: report.heapAfterGcBytes,
+        trackedNodes: report.trackedNodes,
+        renders: report.renders.slice(0, 8),
+      })),
+    )}`,
+  );
+});
diff --git a/packages/app/playwright.profile.config.ts b/packages/app/playwright.profile.config.ts
new file mode 100644
index 0000000000..1ca80e2bf4
--- /dev/null
+++ b/packages/app/playwright.profile.config.ts
@@ -0,0 +1,18 @@
+import { defineConfig, devices } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "./perf",
+  timeout: 120_000,
+  expect: { timeout: 30_000 },
+  fullyParallel: false,
+  workers: 1,
+  retries: 0,
+  reporter: [["list"]],
+  use: {
+    ...devices["Desktop Chrome"],
+    baseURL: process.env.PASEO_PROFILE_APP_URL ?? "http://127.0.0.1:8081",
+    viewport: { width: 1440, height: 900 },
+    trace: "retain-on-failure",
+    screenshot: "only-on-failure",
+  },
+});
diff --git a/packages/app/src/agent-stream/view.tsx b/packages/app/src/agent-stream/view.tsx
index 44aa809b23..4651710ace 100644
--- a/packages/app/src/agent-stream/view.tsx
+++ b/packages/app/src/agent-stream/view.tsx
@@ -27,7 +27,7 @@ import { useMutation } from "@tanstack/react-query";
 import Animated, { FadeIn, FadeOut } from "react-native-reanimated";
 import { Check, ChevronDown, X } from "lucide-react-native";
 import { buildWorkspaceTabPersistenceKey } from "@/workspace-tabs/model";
-import { openSidePanelView } from "@/workspace-tabs/side-panel";
+import { openExplorerSidebarView } from "@/workspace-tabs/explorer-sidebar";
 import {
   AssistantMessage,
   SpeakMessage,
@@ -457,7 +457,7 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
           setCurrentPath: false,
         });
 
-        openSidePanelView({
+        openExplorerSidebarView({
           isCompact: isMobile,
           workspaceKey: buildWorkspaceTabPersistenceKey({
             serverId: resolvedServerId,
@@ -474,7 +474,7 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
     );
 
     const handleToolCallOpenFile = useStableEvent((filePath: string) => {
-      handleInlinePathPress({ raw: filePath, path: filePath }, "side");
+      handleInlinePathPress({ raw: filePath, path: filePath }, "preferred");
     });
 
     const handleForkAssistantTurn: AssistantTurnForkHandler = useStableEvent(
diff --git a/packages/app/src/app/_layout.tsx b/packages/app/src/app/_layout.tsx
index beb17ac702..b54470d50a 100644
--- a/packages/app/src/app/_layout.tsx
+++ b/packages/app/src/app/_layout.tsx
@@ -36,6 +36,7 @@ import { KeyboardShortcutsDialog } from "@/components/keyboard-shortcuts-dialog"
 import { AppDiagnosticHost } from "@/components/app-diagnostic-host";
 import { LeftSidebar } from "@/components/left-sidebar";
 import { WindowSidebarMenuToggle } from "@/components/headers/menu-header";
+import { DesktopWindowControls } from "@/components/desktop/window-controls";
 import { SidebarModelProvider } from "@/components/sidebar/sidebar-model";
 import { WorkspacePinShortcutHandler } from "@/components/workspace-pin-shortcut-handler";
 import { CompactExplorerSidebarHost } from "@/components/compact-explorer-sidebar-host";
@@ -76,7 +77,7 @@ import { AgentNavigationListener } from "@/desktop/agent-navigation";
 import { LegacyAgentSkillsMigration } from "@/agent-skills/legacy-migration";
 import { legacyFavoriteProfileMigration } from "@/agent-profiles/migration";
 import { listenToDesktopEvent } from "@/desktop/electron/events";
-import { updateDesktopWindowControls } from "@/desktop/electron/window";
+import { updateDesktopWindowChrome } from "@/desktop/electron/window";
 import { getDesktopHost } from "@/desktop/host";
 import { loadDesktopSettings } from "@/desktop/settings/desktop-settings";
 import { RosettaCalloutSource } from "@/desktop/updates/rosetta-callout-source";
@@ -86,6 +87,7 @@ import { useGlobalNewWorkspaceAction } from "@/hooks/use-global-new-workspace-ac
 import { useLatchedBoolean } from "@/hooks/use-latched-boolean";
 import { useFaviconStatus } from "@/hooks/use-favicon-status";
 import { useKeyboardShortcuts } from "@/hooks/use-keyboard-shortcuts";
+import { resolveExplorerSidebarPresentation } from "@/workspace-tabs/explorer-sidebar";
 import { KeyboardShiftProvider } from "@/hooks/use-keyboard-shift-style";
 import { useCompactWebViewportZoomLock } from "@/hooks/use-compact-web-viewport-zoom-lock";
 import { useOpenProject } from "@/hooks/use-open-project";
@@ -473,6 +475,10 @@ function AppContainer({ children, chromeEnabled: chromeEnabledOverride }: AppCon
   }, [settings.theme, updateSettings]);
 
   const isCompactLayout = useIsCompactFormFactor();
+  const explorerSidebarPresentation = resolveExplorerSidebarPresentation({
+    isCompact: isCompactLayout,
+  });
+  const usesCompactExplorerHost = explorerSidebarPresentation !== "pane";
   useCompactWebViewportZoomLock(isCompactLayout);
   const pathname = usePathname();
   const isWorkspaceRoute = parseHostWorkspaceRouteFromPathname(pathname) !== null;
@@ -545,8 +551,11 @@ function AppContainer({ children, chromeEnabled: chromeEnabledOverride }: AppCon
           {sidebarChrome}
         </WindowChromeRegion>
       ) : null}
-      {isCompactLayout ? (
-        <CompactExplorerSidebarHost enabled={chromeEnabled}>
+      {usesCompactExplorerHost ? (
+        <CompactExplorerSidebarHost
+          enabled={chromeEnabled}
+          presentation={explorerSidebarPresentation === "dock" ? "dock" : "overlay"}
+        >
           <WindowChromeRegion corners={chromeEnabled ? "both" : appChromeLayout.contentCorners}>
             <View style={flexStyle}>{children}</View>
           </WindowChromeRegion>
@@ -574,6 +583,7 @@ function AppContainer({ children, chromeEnabled: chromeEnabledOverride }: AppCon
           </WindowChromeSafeArea>
         </WindowChromeRegion>
       ) : null}
+      <DesktopWindowControls />
       <FloatingPanelPortalHost />
       {isCompactLayout ? sidebarChrome : null}
       <DownloadToast />
@@ -665,18 +675,16 @@ function DesktopWindowControlsSync() {
   const { isLoading } = useAppSettings();
   const { theme } = useUnistyles();
   const surface0 = theme.colors.surface0;
-  const foreground = theme.colors.foreground;
 
   useEffect(() => {
     if (isLoading || isNative) return;
-    void updateDesktopWindowControls({
+    void updateDesktopWindowChrome({
       backgroundColor: surface0,
-      foregroundColor: foreground,
-      trafficLightOffsetY: -5,
+      trafficLightOffsetY: -4,
     }).catch((error) => {
       console.warn("[DesktopWindow] Failed to update window controls overlay", error);
     });
-  }, [isLoading, surface0, foreground]);
+  }, [isLoading, surface0]);
 
   return null;
 }
diff --git a/packages/app/src/assistant-file-links/use-file-link.test.tsx b/packages/app/src/assistant-file-links/use-file-link.test.tsx
index ca934ef6f9..386cb429f1 100644
--- a/packages/app/src/assistant-file-links/use-file-link.test.tsx
+++ b/packages/app/src/assistant-file-links/use-file-link.test.tsx
@@ -176,7 +176,7 @@ describe("useFileLink", () => {
             lineStart: undefined,
             lineEnd: undefined,
           },
-          disposition: "side",
+          disposition: "preferred",
         },
       ]);
     });
diff --git a/packages/app/src/assistant-file-links/use-file-link.ts b/packages/app/src/assistant-file-links/use-file-link.ts
index 7bb4843bab..2a08594aa5 100644
--- a/packages/app/src/assistant-file-links/use-file-link.ts
+++ b/packages/app/src/assistant-file-links/use-file-link.ts
@@ -117,7 +117,7 @@ export function useFileLink(source: AssistantFileLinkSource): UseFileLinkResult
   });
 
   const onPress = useStableEvent(() => {
-    open(stableSource, "side");
+    open(stableSource, "preferred");
   });
 
   const target = useMemo(() => {
diff --git a/packages/app/src/command-center/workspace-contributions.test.ts b/packages/app/src/command-center/workspace-contributions.test.ts
index cfaf3a8e5a..ce027fbf0c 100644
--- a/packages/app/src/command-center/workspace-contributions.test.ts
+++ b/packages/app/src/command-center/workspace-contributions.test.ts
@@ -61,9 +61,8 @@ function source(gitActions: GitActions): {
         moveTabUp: "Move tab up",
         moveTabDown: "Move tab down",
         closePane: "Close pane",
-        togglePaneMaximization: "Toggle pane maximization",
         toggleFocusMode: "Toggle focus mode",
-        toggleSidePanel: "Toggle side panel",
+        toggleExplorerSidebar: "Toggle side panel",
       },
       icons: {},
       shortcuts: {},
diff --git a/packages/app/src/command-center/workspace-contributions.ts b/packages/app/src/command-center/workspace-contributions.ts
index 4f1c108ffb..2d98ba5e84 100644
--- a/packages/app/src/command-center/workspace-contributions.ts
+++ b/packages/app/src/command-center/workspace-contributions.ts
@@ -40,9 +40,8 @@ export interface WorkspaceCommandCenterLabels {
   moveTabUp: string;
   moveTabDown: string;
   closePane: string;
-  togglePaneMaximization: string;
   toggleFocusMode: string;
-  toggleSidePanel: string;
+  toggleExplorerSidebar: string;
 }
 
 export interface WorkspaceCommandCenterIcons {
@@ -62,9 +61,8 @@ export interface WorkspaceCommandCenterIcons {
   copy?: CommandCenterIcon;
   focusPane?: CommandCenterIcon;
   moveTab?: CommandCenterIcon;
-  maximize?: CommandCenterIcon;
   focusMode?: CommandCenterIcon;
-  sidePanel?: CommandCenterIcon;
+  explorerSidebar?: CommandCenterIcon;
   git?(action: GitAction): CommandCenterIcon | undefined;
 }
 
@@ -78,9 +76,8 @@ export interface WorkspaceCommandCenterShortcuts {
   nextTab?: ShortcutKey[][];
   closeCurrentTab?: ShortcutKey[][];
   closePane?: ShortcutKey[][];
-  togglePaneMaximization?: ShortcutKey[][];
   toggleFocusMode?: ShortcutKey[][];
-  toggleSidePanel?: ShortcutKey[][];
+  toggleExplorerSidebar?: ShortcutKey[][];
 }
 
 export interface WorkspaceCommandCenterSource {
@@ -198,7 +195,9 @@ function buildPanelContributions(
       }),
     );
     if (!source.capabilities.canSplitPanes) continue;
-    for (const [placementIndex, placement] of (["side-panel", "focused-pane"] as const).entries()) {
+    if (panel.target !== "pull-request") continue;
+    const placements = ["side-pane", "focused-pane"] as const;
+    for (const [placementIndex, placement] of placements.entries()) {
       contributions.push(
         buildQueryAction(source, {
           id: `tab:open:${panel.target}:${placement}`,
@@ -447,15 +446,6 @@ function buildPaneContributions(source: WorkspaceCommandCenterSource): CommandCe
       shortcutKeys: source.shortcuts.closePane,
       action: { id: "workspace.pane.close", scope: "workspace" },
     },
-    {
-      id: "pane:maximize-toggle",
-      rank: 61,
-      title: source.labels.togglePaneMaximization,
-      keywords: ["pane", "maximize", "restore", "toggle"],
-      icon: source.icons.maximize,
-      shortcutKeys: source.shortcuts.togglePaneMaximization,
-      action: { id: "workspace.explorer.maximize.toggle", scope: "workspace" },
-    },
     {
       id: "pane:focus-mode-toggle",
       rank: 62,
@@ -522,12 +512,12 @@ export function buildWorkspaceCommandCenterContributions(
     ...buildActiveTabContributions(source),
     ...(source.capabilities.canSplitPanes ? buildPaneContributions(source) : []),
     buildQueryAction(source, {
-      id: "side-panel:toggle",
+      id: "explorer-sidebar:toggle",
       rank: 70,
-      title: source.labels.toggleSidePanel,
-      keywords: ["side", "panel", "toggle", "show", "hide"],
-      icon: source.icons.sidePanel,
-      shortcutKeys: source.shortcuts.toggleSidePanel,
+      title: source.labels.toggleExplorerSidebar,
+      keywords: ["explorer", "sidebar", "toggle", "show", "hide"],
+      icon: source.icons.explorerSidebar,
+      shortcutKeys: source.shortcuts.toggleExplorerSidebar,
       action: { id: "sidebar.toggle.right", scope: "workspace" },
     }),
   ];
diff --git a/packages/app/src/command-center/workspace-file-search.ts b/packages/app/src/command-center/workspace-file-search.ts
index 9850c81782..1008604bec 100644
--- a/packages/app/src/command-center/workspace-file-search.ts
+++ b/packages/app/src/command-center/workspace-file-search.ts
@@ -131,6 +131,7 @@ export function useWorkspaceFileSearch(input: { enabled: boolean; query: string
       openWorkspaceFileFromExplorer({
         filePath: path,
         persistenceKey: buildWorkspaceTabPersistenceKey({ serverId, workspaceId }),
+        closeExplorerAfterOpen: true,
         showMobileAgent: usePanelStore.getState().showMobileAgent,
         openWorkspaceTabInFocusedPane: (workspaceKey, target, placement) =>
           useWorkspaceLayoutStore.getState().openTab({
diff --git a/packages/app/src/command-center/workspace-registration.tsx b/packages/app/src/command-center/workspace-registration.tsx
index 9ff2858714..773ada71fc 100644
--- a/packages/app/src/command-center/workspace-registration.tsx
+++ b/packages/app/src/command-center/workspace-registration.tsx
@@ -11,7 +11,6 @@ import {
   GitCompareArrows,
   GitPullRequest,
   Globe,
-  Maximize2,
   Move,
   PanelRight,
   Pencil,
@@ -64,14 +63,13 @@ const WORKSPACE_COMMAND_CENTER_ICONS = {
   copy: getCommandCenterIcon(Copy),
   focusPane: getCommandCenterIcon(Focus),
   moveTab: getCommandCenterIcon(Move),
-  maximize: getCommandCenterIcon(Maximize2),
   focusMode: getCommandCenterIcon(ArrowDownToLine),
-  sidePanel: getCommandCenterIcon(PanelRight),
+  explorerSidebar: getCommandCenterIcon(PanelRight),
 };
 
 const OPEN_PANEL_LABEL_KEYS = {
   supporting: "shell.commandCenter.open",
-  "side-panel": "shell.commandCenter.openInSidePanel",
+  "side-pane": "shell.commandCenter.openInSidePane",
   "focused-pane": "shell.commandCenter.openInFocusedPane",
 } as const;
 
@@ -152,9 +150,8 @@ export function useWorkspaceCommandCenterActions(): void {
           moveTabUp: t("settings.shortcuts.help.moveTabUp"),
           moveTabDown: t("settings.shortcuts.help.moveTabDown"),
           closePane: t("settings.shortcuts.help.closePane"),
-          togglePaneMaximization: t("settings.shortcuts.help.toggleExplorerPaneMaximization"),
           toggleFocusMode: t("settings.shortcuts.help.toggleFocusMode"),
-          toggleSidePanel: t("workspace.tabs.sidePanel.toggle"),
+          toggleExplorerSidebar: t("workspace.tabs.explorerSidebar.toggle"),
         },
         icons: {
           ...WORKSPACE_COMMAND_CENTER_ICONS,
diff --git a/packages/app/src/command-center/workspace-shortcuts.ts b/packages/app/src/command-center/workspace-shortcuts.ts
index 3f355e048a..2bc968af29 100644
--- a/packages/app/src/command-center/workspace-shortcuts.ts
+++ b/packages/app/src/command-center/workspace-shortcuts.ts
@@ -31,9 +31,7 @@ export function resolveWorkspaceCommandCenterShortcuts({
       resolveShortcutKeysForAction("workspace-tab-close-current", overrides, platform) ?? undefined,
     closePane:
       resolveShortcutKeysForAction("workspace-pane-close", overrides, platform) ?? undefined,
-    togglePaneMaximization:
-      resolveShortcutKeysForAction("workspace-explorer-maximize", overrides, platform) ?? undefined,
-    toggleSidePanel:
+    toggleExplorerSidebar:
       resolveShortcutKeysForAction("toggle-right-sidebar", overrides, platform) ?? undefined,
   };
 }
diff --git a/packages/app/src/components/branch-switcher.tsx b/packages/app/src/components/branch-switcher.tsx
index c1663cbdcd..737035d540 100644
--- a/packages/app/src/components/branch-switcher.tsx
+++ b/packages/app/src/components/branch-switcher.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useMemo, useRef } from "react";
-import { Pressable, Text, View, type PressableStateCallbackType } from "react-native";
+import { Text, View } from "react-native";
 import { useQueryClient } from "@tanstack/react-query";
-import { ChevronDown, GitBranch } from "lucide-react-native";
+import { GitBranch } from "lucide-react-native";
 import { StyleSheet, withUnistyles } from "react-native-unistyles";
 import { useTranslation } from "react-i18next";
 import type { Theme } from "@/styles/theme";
@@ -10,6 +10,7 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip
 import { useHostRuntimeClient, useHostRuntimeIsConnected } from "@/runtime/host-runtime";
 import { useToast } from "@/contexts/toast-context";
 import { useBranchSwitcher } from "@/hooks/use-branch-switcher";
+import { ToolbarLabelSelectTrigger } from "@/components/ui/toolbar-label-trigger";
 
 interface BranchSwitcherProps {
   currentBranchName: string | null;
@@ -23,9 +24,7 @@ interface BranchSwitcherProps {
 const foregroundMutedIconColorMapping = (theme: Theme) => ({
   color: theme.colors.foregroundMuted,
 });
-
 const ThemedGitBranch = withUnistyles(GitBranch);
-const ThemedChevronDown = withUnistyles(ChevronDown);
 
 export function BranchSwitcher({
   currentBranchName,
@@ -56,14 +55,6 @@ export function BranchSwitcher({
 
   const handleOpen = useCallback(() => setIsOpen(true), [setIsOpen]);
 
-  const triggerStyle = useCallback(
-    ({ hovered = false, pressed }: PressableStateCallbackType & { hovered?: boolean }) => [
-      styles.trigger,
-      (Boolean(hovered) || pressed) && styles.triggerHovered,
-    ],
-    [],
-  );
-
   const branchLeadingSlot = useMemo(
     () => <ThemedGitBranch size={14} uniProps={foregroundMutedIconColorMapping} />,
     [],
@@ -90,21 +81,16 @@ export function BranchSwitcher({
     <View ref={anchorRef} collapsable={false} style={styles.anchor}>
       <Tooltip delayDuration={300} enabledOnDesktop enabledOnMobile={false}>
         <TooltipTrigger asChild>
-          <Pressable
+          <ToolbarLabelSelectTrigger
             testID={testID}
+            label={currentBranchName}
+            open={isOpen}
             onPress={handleOpen}
-            style={triggerStyle}
             accessibilityRole="button"
             accessibilityLabel={t("branchSwitcher.currentBranch", {
               branchName: currentBranchName,
             })}
-          >
-            <ThemedGitBranch size={12} uniProps={foregroundMutedIconColorMapping} />
-            <Text style={styles.branchLabel} numberOfLines={1}>
-              {currentBranchName}
-            </Text>
-            <ThemedChevronDown size={12} uniProps={foregroundMutedIconColorMapping} />
-          </Pressable>
+          />
         </TooltipTrigger>
         <TooltipContent side="bottom">
           <Text style={styles.tooltipText}>{t("branchSwitcher.triggerTooltip")}</Text>
@@ -136,25 +122,6 @@ const styles = StyleSheet.create((theme) => ({
     flexShrink: 1,
     minWidth: 0,
   },
-  trigger: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.spacing[1],
-    minWidth: 0,
-    paddingVertical: theme.spacing[1],
-    paddingHorizontal: theme.spacing[1],
-    borderRadius: theme.borderRadius.md,
-    flexShrink: 1,
-  },
-  triggerHovered: {
-    backgroundColor: theme.colors.surface1,
-  },
-  branchLabel: {
-    fontSize: theme.fontSize.sm,
-    color: theme.colors.foregroundMuted,
-    fontWeight: theme.fontWeight.normal,
-    flexShrink: 1,
-  },
   tooltipText: {
     color: theme.colors.popoverForeground,
     fontSize: theme.fontSize.sm,
diff --git a/packages/app/src/components/compact-explorer-sidebar-host.tsx b/packages/app/src/components/compact-explorer-sidebar-host.tsx
index d001eba69e..c2be2d5a89 100644
--- a/packages/app/src/components/compact-explorer-sidebar-host.tsx
+++ b/packages/app/src/components/compact-explorer-sidebar-host.tsx
@@ -1,9 +1,12 @@
-import { type ReactNode, useCallback, useEffect, useMemo, useRef } from "react";
-import { View } from "react-native";
+import { type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { View, type LayoutChangeEvent } from "react-native";
 import { GestureDetector } from "react-native-gesture-handler";
 import { useActiveWorkspaceSelection } from "@/stores/navigation-active-workspace-store";
 import { useWorkspace } from "@/stores/session-store-hooks";
-import { CompactExplorerSidebar } from "@/components/compact-explorer-sidebar";
+import {
+  CompactExplorerSidebar,
+  NativeExplorerSidebarDock,
+} from "@/components/compact-explorer-sidebar";
 import { useOpenFileExplorerGesture } from "@/mobile-panels/gestures";
 import { useHostRuntimeClient, useHostRuntimeIsConnected } from "@/runtime/host-runtime";
 import { selectIsCompactFileExplorerOpen, usePanelStore } from "@/stores/panel-store";
@@ -12,6 +15,7 @@ import type { WorkspaceTabTarget } from "@/workspace-tabs/model";
 import { useWorkspaceCheckoutStatus } from "@/screens/workspace/use-workspace-checkout-status";
 import { openWorkspaceFileFromExplorer } from "@/screens/workspace/workspace-file-open-command";
 import { isWeb } from "@/constants/platform";
+import { DiffDocumentWorkspaceCacheProvider } from "@/git/diff-document/workspace-cache";
 import {
   resolveCompactExplorerSidebarHostModel,
   type CompactExplorerSidebarHostModel,
@@ -94,10 +98,16 @@ function useActiveCompactExplorerSidebarModel(
 interface CompactExplorerSidebarHostProps {
   children: ReactNode;
   enabled: boolean;
+  presentation: "overlay" | "dock";
 }
 
-export function CompactExplorerSidebarHost({ children, enabled }: CompactExplorerSidebarHostProps) {
+export function CompactExplorerSidebarHost({
+  children,
+  enabled,
+  presentation,
+}: CompactExplorerSidebarHostProps) {
   const model = useActiveCompactExplorerSidebarModel(enabled);
+  const [containerWidth, setContainerWidth] = useState(0);
   const openCompactFileExplorer = usePanelStore((state) => state.openCompactFileExplorer);
   const showMobileAgent = usePanelStore((state) => state.showMobileAgent);
   const openTab = useWorkspaceLayoutStore((state) => state.openTab);
@@ -127,14 +137,54 @@ export function CompactExplorerSidebarHost({ children, enabled }: CompactExplore
       openWorkspaceFileFromExplorer({
         filePath,
         persistenceKey: model.persistenceKey,
+        closeExplorerAfterOpen: presentation === "overlay",
         showMobileAgent,
         openWorkspaceTabInFocusedPane,
         focusWorkspaceTab,
       });
     },
-    [focusWorkspaceTab, model, openWorkspaceTabInFocusedPane, showMobileAgent],
+    [focusWorkspaceTab, model, openWorkspaceTabInFocusedPane, presentation, showMobileAgent],
   );
 
+  const handleContainerLayout = useCallback((event: LayoutChangeEvent) => {
+    const nextWidth = event.nativeEvent.layout.width;
+    setContainerWidth((current) => (current === nextWidth ? current : nextWidth));
+  }, []);
+
+  const explorer =
+    enabled && model ? (
+      <DiffDocumentWorkspaceCacheProvider key={model.persistenceKey}>
+        {presentation === "dock" ? (
+          <NativeExplorerSidebarDock
+            serverId={model.serverId}
+            workspaceId={model.workspaceId}
+            workspaceRoot={model.workspaceRoot}
+            isGit={model.isGit}
+            persistenceKey={model.persistenceKey}
+            containerWidth={containerWidth}
+            onOpenFile={handleOpenFile}
+          />
+        ) : (
+          <CompactExplorerSidebar
+            serverId={model.serverId}
+            workspaceId={model.workspaceId}
+            workspaceRoot={model.workspaceRoot}
+            isGit={model.isGit}
+            onOpenFile={handleOpenFile}
+          />
+        )}
+      </DiffDocumentWorkspaceCacheProvider>
+    ) : null;
+
+  if (presentation === "dock") {
+    return (
+      <View style={styles.row} onLayout={handleContainerLayout}>
+        <View style={styles.fill}>{children}</View>
+        {explorer}
+      </View>
+    );
+  }
+
   return (
     <>
       <CompactExplorerOpenGestureSurface
@@ -143,15 +193,7 @@ export function CompactExplorerSidebarHost({ children, enabled }: CompactExplore
       >
         {children}
       </CompactExplorerOpenGestureSurface>
-      {enabled && model ? (
-        <CompactExplorerSidebar
-          serverId={model.serverId}
-          workspaceId={model.workspaceId}
-          workspaceRoot={model.workspaceRoot}
-          isGit={model.isGit}
-          onOpenFile={handleOpenFile}
-        />
-      ) : null}
+      {explorer}
     </>
   );
 }
@@ -160,4 +202,8 @@ const styles = {
   fill: {
     flex: 1,
   },
+  row: {
+    flex: 1,
+    flexDirection: "row",
+  },
 } as const;
diff --git a/packages/app/src/components/compact-explorer-sidebar.tsx b/packages/app/src/components/compact-explorer-sidebar.tsx
index 788a379b8a..ea186995bf 100644
--- a/packages/app/src/components/compact-explorer-sidebar.tsx
+++ b/packages/app/src/components/compact-explorer-sidebar.tsx
@@ -1,5 +1,8 @@
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { View, Text, Pressable } from "react-native";
+import { Gesture } from "react-native-gesture-handler";
+import Animated, { runOnJS, useAnimatedStyle, useSharedValue } from "react-native-reanimated";
+import { scheduleOnRN } from "react-native-worklets";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { X } from "lucide-react-native";
@@ -29,6 +32,13 @@ import { useMountedTabSet } from "@/screens/workspace/use-mounted-tab-set";
 import { usePullRequestPanelAvailability } from "@/panels/pull-request-availability";
 import { PullRequestContent } from "@/panels/pull-request";
 import { useAddFileToChat } from "@/panels/use-add-file-to-chat";
+import { SidebarResizeHandle } from "@/components/sidebar-resize-handle";
+import {
+  SIDEBAR_RESIZE_ACTIVATION_OFFSET,
+  SIDEBAR_RESIZE_FAIL_OFFSET,
+} from "@/components/sidebar-resize-handle-layout";
+import { resolveExplorerSidebarWidth } from "@/components/explorer-sidebar-layout";
+import { useWorkspaceLayoutStore } from "@/stores/workspace-layout-store";
 
 function logExplorerSidebar(_event: string, _details: Record<string, unknown>): void {}
 
@@ -139,6 +149,118 @@ export function CompactExplorerSidebar({
   );
 }
 
+interface NativeExplorerSidebarDockProps extends ExplorerSidebarProps {
+  persistenceKey: string;
+  containerWidth: number;
+}
+
+export function NativeExplorerSidebarDock({
+  serverId,
+  workspaceId,
+  workspaceRoot,
+  isGit,
+  onOpenFile,
+  persistenceKey,
+  containerWidth,
+}: NativeExplorerSidebarDockProps) {
+  const { theme } = useUnistyles();
+  const insets = useSafeAreaInsets();
+  const isOpen = usePanelStore(selectIsCompactFileExplorerOpen);
+  const showMobileAgent = usePanelStore((state) => state.showMobileAgent);
+  const storedWidth = useWorkspaceLayoutStore(
+    (state) => state.explorerSidebarWidthByWorkspace[persistenceKey],
+  );
+  const resizeExplorerSidebar = useWorkspaceLayoutStore((state) => state.resizeExplorerSidebar);
+  const visibleWidth = resolveExplorerSidebarWidth({
+    requestedWidth: storedWidth,
+    containerWidth,
+  });
+  const resizeWidth = useSharedValue(visibleWidth);
+  const startWidthRef = useRef(visibleWidth);
+  const [resizePressed, setResizePressed] = useState(false);
+  const { explorerTab, handleTabPress } = useExplorerSidebarSharedState({
+    serverId,
+    workspaceRoot,
+    isGit,
+  });
+
+  useEffect(() => {
+    resizeWidth.value = visibleWidth;
+  }, [resizeWidth, visibleWidth]);
+
+  const showResizeGrip = useCallback(() => setResizePressed(true), []);
+  const hideResizeGrip = useCallback(() => setResizePressed(false), []);
+  const commitWidth = useCallback(
+    (width: number) => resizeExplorerSidebar(persistenceKey, width),
+    [persistenceKey, resizeExplorerSidebar],
+  );
+  const resizeGesture = useMemo(
+    () =>
+      Gesture.Pan()
+        .enabled(true)
+        .hitSlop({ left: 8, right: 8, top: 0, bottom: 0 })
+        .onBegin(() => scheduleOnRN(showResizeGrip))
+        .activeOffsetX([-SIDEBAR_RESIZE_ACTIVATION_OFFSET, SIDEBAR_RESIZE_ACTIVATION_OFFSET])
+        .failOffsetY([-SIDEBAR_RESIZE_FAIL_OFFSET, SIDEBAR_RESIZE_FAIL_OFFSET])
+        .onStart((event) => {
+          startWidthRef.current = visibleWidth + event.translationX;
+          resizeWidth.value = visibleWidth;
+        })
+        .onUpdate((event) => {
+          resizeWidth.value = resolveExplorerSidebarWidth({
+            requestedWidth: startWidthRef.current - event.translationX,
+            containerWidth,
+          });
+        })
+        .onEnd(() => runOnJS(commitWidth)(resizeWidth.value))
+        .onFinalize(() => scheduleOnRN(hideResizeGrip)),
+    [commitWidth, containerWidth, hideResizeGrip, resizeWidth, showResizeGrip, visibleWidth],
+  );
+  const animatedWidthStyle = useAnimatedStyle(() => ({ width: resizeWidth.value }));
+  const dockStyle = useMemo(
+    () => [
+      styles.nativeDock,
+      {
+        display: isOpen ? ("flex" as const) : ("none" as const),
+        paddingTop: insets.top + HEADER_TOP_PADDING_MOBILE,
+        backgroundColor: theme.colors.surfaceSidebar,
+      },
+      animatedWidthStyle,
+    ],
+    [animatedWidthStyle, insets.top, isOpen, theme.colors.surfaceSidebar],
+  );
+  const dockContentStyle = useMemo(
+    () => [styles.nativeDockContent, { borderLeftColor: theme.colors.border }],
+    [theme.colors.border],
+  );
+
+  return (
+    <RetainedPanelActivity active={isOpen}>
+      <Animated.View style={dockStyle} testID="native-explorer-sidebar-dock">
+        <View style={dockContentStyle}>
+          <SidebarResizeHandle
+            edge="left"
+            gesture={resizeGesture}
+            pressed={resizePressed}
+            testID="native-explorer-sidebar-resize-handle"
+          />
+          <ExplorerSidebarContent
+            activeTab={explorerTab}
+            onTabPress={handleTabPress}
+            onClose={showMobileAgent}
+            serverId={serverId}
+            workspaceId={workspaceId}
+            workspaceRoot={workspaceRoot}
+            isGit={isGit}
+            isOpen={isOpen}
+            onOpenFile={onOpenFile}
+          />
+        </View>
+      </Animated.View>
+    </RetainedPanelActivity>
+  );
+}
+
 interface ExplorerTabButtonProps {
   tab: ExplorerTab;
   active: boolean;
@@ -230,7 +352,7 @@ function ExplorerSidebarContent({
             <ExplorerTabButton
               tab="changes"
               active={resolvedTab === "changes"}
-              label={t("workspace.tabs.sidePanel.changes")}
+              label={t("workspace.tabs.explorerSidebar.changes")}
               onTabPress={onTabPress}
               testID="explorer-tab-changes"
             />
@@ -238,7 +360,7 @@ function ExplorerSidebarContent({
           <ExplorerTabButton
             tab="files"
             active={resolvedTab === "files"}
-            label={t("workspace.tabs.sidePanel.files")}
+            label={t("workspace.tabs.explorerSidebar.files")}
             onTabPress={onTabPress}
             testID="explorer-tab-files"
           />
@@ -268,7 +390,7 @@ function ExplorerSidebarContent({
             nativeID="explorer-close"
             accessible
             accessibilityRole="button"
-            accessibilityLabel={t("workspace.tabs.sidePanel.close")}
+            accessibilityLabel={t("workspace.tabs.explorerSidebar.close")}
             hitSlop={8}
           >
             {({ hovered, pressed }) => (
@@ -335,7 +457,6 @@ function ChangedFilesPane({
   );
   return (
     <ChangesSurface
-      host="explorer"
       serverId={serverId}
       workspaceId={workspaceId}
       cwd={workspaceRoot}
@@ -370,6 +491,18 @@ function FilesPane({
 const PrTabContent = PullRequestContent;
 
 const styles = StyleSheet.create((theme) => ({
+  nativeDock: {
+    position: "relative",
+    height: "100%",
+    minHeight: 0,
+    overflow: "hidden",
+  },
+  nativeDockContent: {
+    position: "relative",
+    flex: 1,
+    minHeight: 0,
+    borderLeftWidth: 1,
+  },
   sidebarContent: {
     flex: 1,
     minHeight: 0,
diff --git a/packages/app/src/components/desktop/titlebar-drag-region.tsx b/packages/app/src/components/desktop/titlebar-drag-region.tsx
index 3855489d50..da115c7349 100644
--- a/packages/app/src/components/desktop/titlebar-drag-region.tsx
+++ b/packages/app/src/components/desktop/titlebar-drag-region.tsx
@@ -17,15 +17,20 @@ import { isNative } from "@/constants/platform";
  * On macOS, Electron handles edge resize natively.
  */
 
+export const titlebarDragSurfaceStyle: React.CSSProperties = {
+  cursor: "default",
+  // @ts-expect-error — WebkitAppRegion is not in CSSProperties
+  WebkitAppRegion: "drag",
+};
+
 const DRAG_OVERLAY_STYLE: React.CSSProperties = {
+  ...titlebarDragSurfaceStyle,
   top: 0,
   left: 0,
   display: "block",
   position: "absolute",
   width: "100%",
   height: "100%",
-  // @ts-expect-error — WebkitAppRegion is not in CSSProperties
-  WebkitAppRegion: "drag",
 };
 
 const TOP_RESIZER_STYLE: React.CSSProperties = {
diff --git a/packages/app/src/components/desktop/window-controls.tsx b/packages/app/src/components/desktop/window-controls.tsx
new file mode 100644
index 0000000000..615214e95e
--- /dev/null
+++ b/packages/app/src/components/desktop/window-controls.tsx
@@ -0,0 +1,208 @@
+import { useCallback, useMemo } from "react";
+import { Pressable, View } from "react-native";
+import Svg, { Line, Rect } from "react-native-svg";
+import { useTranslation } from "react-i18next";
+import { StyleSheet, withUnistyles } from "react-native-unistyles";
+import {
+  closeDesktopWindow,
+  minimizeDesktopWindow,
+  toggleDesktopMaximize,
+} from "@/desktop/electron/window";
+import {
+  getDesktopWindowControlsPresentation,
+  type DesktopWindowControlsPresentation,
+} from "@/desktop/window-chrome-presentation";
+import { useCustomDesktopWindowControls } from "@/utils/desktop-window";
+import type { Theme } from "@/styles/theme";
+
+type WindowControlKind = "minimize" | "maximize" | "restore" | "close";
+
+function WindowControlGlyph({
+  kind,
+  color,
+  size,
+  strokeWidth,
+}: {
+  kind: WindowControlKind;
+  color: string;
+  size: number;
+  strokeWidth: number;
+}) {
+  if (kind === "minimize") {
+    return (
+      <Svg width={size} height={size} viewBox="0 0 16 16" style={styles.glyph}>
+        <Line x1={3} y1={8} x2={13} y2={8} stroke={color} strokeWidth={strokeWidth} />
+      </Svg>
+    );
+  }
+  if (kind === "restore") {
+    return (
+      <Svg width={size} height={size} viewBox="0 0 16 16" style={styles.glyph}>
+        <Rect
+          x={5.5}
+          y={3.5}
+          width={7}
+          height={7}
+          fill="none"
+          stroke={color}
+          strokeWidth={strokeWidth}
+        />
+        <Line x1={3.5} y1={5.5} x2={3.5} y2={12.5} stroke={color} strokeWidth={strokeWidth} />
+        <Line x1={3} y1={12.5} x2={10.5} y2={12.5} stroke={color} strokeWidth={strokeWidth} />
+      </Svg>
+    );
+  }
+  if (kind === "close") {
+    return (
+      <Svg width={size} height={size} viewBox="0 0 16 16" style={styles.glyph}>
+        <Line x1={4} y1={4} x2={12} y2={12} stroke={color} strokeWidth={strokeWidth} />
+        <Line x1={12} y1={4} x2={4} y2={12} stroke={color} strokeWidth={strokeWidth} />
+      </Svg>
+    );
+  }
+  return (
+    <Svg width={size} height={size} viewBox="0 0 16 16" style={styles.glyph}>
+      <Rect
+        x={3.5}
+        y={3.5}
+        width={9}
+        height={9}
+        fill="none"
+        stroke={color}
+        strokeWidth={strokeWidth}
+      />
+    </Svg>
+  );
+}
+
+const ThemedWindowControlGlyph = withUnistyles(WindowControlGlyph);
+const mutedGlyphMapping = (theme: Theme) => ({ color: theme.colors.foregroundMuted });
+const whiteGlyphMapping = () => ({ color: "#ffffff" });
+
+function WindowControl({
+  kind,
+  label,
+  onPress,
+  presentation,
+}: {
+  kind: WindowControlKind;
+  label: string;
+  onPress: () => void;
+  presentation: DesktopWindowControlsPresentation;
+}) {
+  const glyph = useCallback(
+    ({ hovered, pressed }: { hovered?: boolean; pressed: boolean }) => {
+      const highlighted = hovered || pressed;
+      const closeHighlighted = kind === "close" && highlighted;
+      return (
+        <View
+          style={[
+            styles.controlSurface,
+            presentation.hoverShape === "circle"
+              ? styles.circularControlSurface
+              : styles.fullControlSurface,
+            highlighted ? styles.controlHovered : null,
+            closeHighlighted ? styles.closeHovered : null,
+          ]}
+        >
+          <ThemedWindowControlGlyph
+            kind={kind}
+            size={presentation.glyphSize}
+            strokeWidth={presentation.glyphStrokeWidth}
+            uniProps={closeHighlighted ? whiteGlyphMapping : mutedGlyphMapping}
+          />
+        </View>
+      );
+    },
+    [kind, presentation],
+  );
+  const controlStyle = useMemo(
+    () => [styles.control, { width: presentation.controlWidth }],
+    [presentation.controlWidth],
+  );
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={label}
+      onPress={onPress}
+      style={controlStyle}
+    >
+      {glyph}
+    </Pressable>
+  );
+}
+
+export function DesktopWindowControls() {
+  const { t } = useTranslation();
+  const { visible, mode, isMaximized } = useCustomDesktopWindowControls();
+  const minimize = useCallback(() => void minimizeDesktopWindow(), []);
+  const toggleMaximize = useCallback(() => void toggleDesktopMaximize(), []);
+  const close = useCallback(() => void closeDesktopWindow(), []);
+  if (!visible || !mode) return null;
+  const presentation = getDesktopWindowControlsPresentation(mode);
+
+  return (
+    <View
+      style={[styles.controls, { height: presentation.controlHeight }]}
+      testID="desktop-window-controls"
+    >
+      <WindowControl
+        kind="minimize"
+        label={t("desktop.windowControls.minimize")}
+        onPress={minimize}
+        presentation={presentation}
+      />
+      <WindowControl
+        kind={isMaximized ? "restore" : "maximize"}
+        label={t(
+          isMaximized ? "desktop.windowControls.restore" : "desktop.windowControls.maximize",
+        )}
+        onPress={toggleMaximize}
+        presentation={presentation}
+      />
+      <WindowControl
+        kind="close"
+        label={t("desktop.windowControls.close")}
+        onPress={close}
+        presentation={presentation}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  controls: {
+    position: "absolute",
+    top: 0,
+    right: 0,
+    zIndex: 3000,
+    flexDirection: "row",
+  },
+  control: {
+    height: "100%",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  controlSurface: {
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  fullControlSurface: {
+    width: "100%",
+    height: "100%",
+  },
+  circularControlSurface: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+  },
+  glyph: {
+    flexShrink: 0,
+  },
+  controlHovered: {
+    backgroundColor: theme.colors.interactionHighlight,
+  },
+  closeHovered: {
+    backgroundColor: "rgba(232, 17, 35, 0.9)",
+  },
+}));
diff --git a/packages/app/src/components/explorer-sidebar-layout.test.ts b/packages/app/src/components/explorer-sidebar-layout.test.ts
new file mode 100644
index 0000000000..5ec16dc860
--- /dev/null
+++ b/packages/app/src/components/explorer-sidebar-layout.test.ts
@@ -0,0 +1,22 @@
+import { describe, expect, it } from "vitest";
+import {
+  resolveExplorerSidebarDockSizes,
+  resolveExplorerSidebarWidth,
+} from "@/components/explorer-sidebar-layout";
+
+describe("Explorer sidebar layout", () => {
+  it("keeps the sidebar width fixed when the workspace body changes size", () => {
+    const narrow = resolveExplorerSidebarDockSizes({ requestedWidth: 320, containerWidth: 1200 });
+    const wide = resolveExplorerSidebarDockSizes({ requestedWidth: 320, containerWidth: 1520 });
+
+    expect(narrow[1] * 1200).toBeCloseTo(320);
+    expect(wide[1] * 1520).toBeCloseTo(320);
+  });
+
+  it("has no fixed maximum while preserving room for the workspace body", () => {
+    expect(resolveExplorerSidebarWidth({ requestedWidth: 100, containerWidth: 1200 })).toBe(240);
+    expect(resolveExplorerSidebarWidth({ requestedWidth: 900, containerWidth: 1600 })).toBe(900);
+    expect(resolveExplorerSidebarWidth({ requestedWidth: 900, containerWidth: 1200 })).toBe(800);
+    expect(resolveExplorerSidebarWidth({ requestedWidth: 600, containerWidth: 750 })).toBe(350);
+  });
+});
diff --git a/packages/app/src/components/explorer-sidebar-layout.ts b/packages/app/src/components/explorer-sidebar-layout.ts
new file mode 100644
index 0000000000..840b615902
--- /dev/null
+++ b/packages/app/src/components/explorer-sidebar-layout.ts
@@ -0,0 +1,27 @@
+const DEFAULT_EXPLORER_SIDEBAR_WIDTH = 320;
+const MIN_EXPLORER_SIDEBAR_WIDTH = 240;
+const MIN_WORKSPACE_BODY_WIDTH = 400;
+
+export function resolveExplorerSidebarWidth(input: {
+  requestedWidth?: number;
+  containerWidth: number;
+}): number {
+  const requestedWidth = input.requestedWidth ?? DEFAULT_EXPLORER_SIDEBAR_WIDTH;
+  const maximumVisibleWidth =
+    input.containerWidth > 0
+      ? Math.max(MIN_EXPLORER_SIDEBAR_WIDTH, input.containerWidth - MIN_WORKSPACE_BODY_WIDTH)
+      : requestedWidth;
+  return Math.max(MIN_EXPLORER_SIDEBAR_WIDTH, Math.min(maximumVisibleWidth, requestedWidth));
+}
+
+export function resolveExplorerSidebarDockSizes(input: {
+  requestedWidth?: number;
+  containerWidth: number;
+}): number[] {
+  if (input.containerWidth <= 0) {
+    return [1, 0];
+  }
+  const width = resolveExplorerSidebarWidth(input);
+  const ratio = width / input.containerWidth;
+  return [1 - ratio, ratio];
+}
diff --git a/packages/app/src/components/file-actions-menu.tsx b/packages/app/src/components/file-actions-menu.tsx
index 63de27475e..6573066ea6 100644
--- a/packages/app/src/components/file-actions-menu.tsx
+++ b/packages/app/src/components/file-actions-menu.tsx
@@ -1,6 +1,7 @@
-import { Fragment, useMemo, type ReactElement, type ReactNode } from "react";
+import { Fragment, useMemo, type ReactElement } from "react";
 import { withUnistyles } from "react-native-unistyles";
 import {
+  ArrowRightToLine,
   Copy,
   CopyPlus,
   Download,
@@ -25,8 +26,11 @@ import {
 
 const foregroundMutedColorMapping = (theme: Theme) => ({ color: theme.colors.foregroundMuted });
 const destructiveColorMapping = (theme: Theme) => ({ color: theme.colors.destructive });
+type FileActionGroup = "create" | "open" | "reference" | "manage" | "destructive";
+
 interface FileAction {
   key: string;
+  group: FileActionGroup;
   label: string;
   icon: LucideIcon;
   onSelect: () => void;
@@ -35,10 +39,19 @@ interface FileAction {
   testID?: string;
 }
 
+function optionalFileAction(
+  available: boolean,
+  onSelect: (() => void) | undefined,
+  action: Omit<FileAction, "onSelect">,
+): FileAction | null {
+  return available && onSelect ? { ...action, onSelect } : null;
+}
+
 interface FileActionsContextMenuContentProps {
   fileKind: "file" | "directory";
   fileExists?: boolean;
   onOpenFile?: () => void;
+  onOpenToSide?: () => void;
   onCopyPath?: () => void;
   onCopyRelativePath?: () => void;
   onReveal?: () => void;
@@ -52,8 +65,6 @@ interface FileActionsContextMenuContentProps {
   onDuplicate?: () => void;
   onRevert?: () => void;
   onDelete?: () => void;
-  /** Optional metadata block rendered above the actions (e.g. size/modified). */
-  header?: ReactNode;
   testIDPrefix?: string;
 }
 
@@ -65,6 +76,7 @@ export function FileActionsContextMenuContent({
   fileKind,
   fileExists = true,
   onOpenFile,
+  onOpenToSide,
   onCopyPath,
   onCopyRelativePath,
   onReveal,
@@ -78,7 +90,6 @@ export function FileActionsContextMenuContent({
   onDuplicate,
   onRevert,
   onDelete,
-  header,
   testIDPrefix,
 }: FileActionsContextMenuContentProps): ReactElement | null {
   const { t } = useTranslation();
@@ -88,6 +99,7 @@ export function FileActionsContextMenuContent({
       onNewFile
         ? {
             key: "new-file",
+            group: "create",
             label: t("workspace.fileActions.newFile"),
             icon: FilePlus,
             onSelect: onNewFile,
@@ -96,6 +108,7 @@ export function FileActionsContextMenuContent({
       onNewFolder
         ? {
             key: "new-folder",
+            group: "create",
             label: t("workspace.fileActions.newFolder"),
             icon: FolderPlus,
             onSelect: onNewFolder,
@@ -104,6 +117,7 @@ export function FileActionsContextMenuContent({
       onCollapseFolder
         ? {
             key: "collapse-folder",
+            group: "open",
             label: t("workspace.fileActions.collapseFolder"),
             icon: FolderMinus,
             onSelect: onCollapseFolder,
@@ -112,30 +126,22 @@ export function FileActionsContextMenuContent({
       availableFile && onOpenFile
         ? {
             key: "open-file",
+            group: "open",
             label: t("workspace.fileActions.openFile"),
             icon: FileText,
             onSelect: onOpenFile,
           }
         : null,
-      onRename
-        ? {
-            key: "rename",
-            label: t("workspace.fileActions.rename"),
-            icon: Pencil,
-            onSelect: onRename,
-          }
-        : null,
-      onDuplicate
-        ? {
-            key: "duplicate",
-            label: t("workspace.fileActions.duplicate"),
-            icon: CopyPlus,
-            onSelect: onDuplicate,
-          }
-        : null,
+      optionalFileAction(availableFile, onOpenToSide, {
+        key: "open-to-side",
+        group: "open",
+        label: t("workspace.fileActions.openToSide"),
+        icon: ArrowRightToLine,
+      }),
       onCopyPath
         ? {
             key: "copy-path",
+            group: "reference",
             label: t("workspace.fileActions.copyPath"),
             icon: Copy,
             onSelect: onCopyPath,
@@ -144,6 +150,7 @@ export function FileActionsContextMenuContent({
       onCopyRelativePath
         ? {
             key: "copy-relative-path",
+            group: "reference",
             label: t("workspace.fileActions.copyRelativePath"),
             icon: Copy,
             onSelect: onCopyRelativePath,
@@ -152,6 +159,7 @@ export function FileActionsContextMenuContent({
       onReveal && revealTargetName
         ? {
             key: "reveal",
+            group: "reference",
             label: t("workspace.fileActions.revealIn", { target: revealTargetName }),
             icon: FolderOpen,
             onSelect: onReveal,
@@ -160,6 +168,7 @@ export function FileActionsContextMenuContent({
       availableFile && onDownload
         ? {
             key: "download",
+            group: "reference",
             label: t("workspace.fileActions.download"),
             icon: Download,
             onSelect: onDownload,
@@ -168,14 +177,34 @@ export function FileActionsContextMenuContent({
       availableFile && onAddToChat
         ? {
             key: "add-to-chat",
+            group: "reference",
             label: t("workspace.fileActions.addToChat"),
             icon: MessageSquarePlus,
             onSelect: onAddToChat,
           }
         : null,
+      onRename
+        ? {
+            key: "rename",
+            group: "manage",
+            label: t("workspace.fileActions.rename"),
+            icon: Pencil,
+            onSelect: onRename,
+          }
+        : null,
+      onDuplicate
+        ? {
+            key: "duplicate",
+            group: "manage",
+            label: t("workspace.fileActions.duplicate"),
+            icon: CopyPlus,
+            onSelect: onDuplicate,
+          }
+        : null,
       onRevert
         ? {
             key: "revert",
+            group: "destructive",
             label: t("workspace.fileActions.revert"),
             icon: Undo2,
             onSelect: onRevert,
@@ -185,6 +214,7 @@ export function FileActionsContextMenuContent({
       onDelete
         ? {
             key: "delete",
+            group: "destructive",
             label: t("workspace.fileActions.delete"),
             icon: Trash2,
             onSelect: onDelete,
@@ -195,9 +225,7 @@ export function FileActionsContextMenuContent({
     const availableActions = specs.filter((action): action is FileAction => action !== null);
     return availableActions.map((action, index) =>
       Object.assign(action, {
-        separatorBefore: Boolean(
-          action.destructive && index > 0 && !availableActions[index - 1].destructive,
-        ),
+        separatorBefore: index > 0 && action.group !== availableActions[index - 1]?.group,
         testID: testIDPrefix ? `${testIDPrefix}-${action.key}` : undefined,
       }),
     );
@@ -214,6 +242,7 @@ export function FileActionsContextMenuContent({
     onNewFile,
     onNewFolder,
     onOpenFile,
+    onOpenToSide,
     onRename,
     onReveal,
     onRevert,
@@ -231,12 +260,6 @@ export function FileActionsContextMenuContent({
       width={220}
       testID={testIDPrefix ? `${testIDPrefix}-context-menu` : undefined}
     >
-      {header ? (
-        <>
-          {header}
-          <ContextMenuSeparator />
-        </>
-      ) : null}
       {actions.map((action) => (
         <Fragment key={action.key}>
           {action.separatorBefore ? <ContextMenuSeparator /> : null}
diff --git a/packages/app/src/components/file-explorer-pane.tsx b/packages/app/src/components/file-explorer-pane.tsx
index e2c3d9d5eb..f636074a20 100644
--- a/packages/app/src/components/file-explorer-pane.tsx
+++ b/packages/app/src/components/file-explorer-pane.tsx
@@ -41,7 +41,9 @@ import { LoadingSpinner } from "@/components/ui/loading-spinner";
 import {
   PaneContentToolbar,
   paneContentToolbarIconSize,
-  paneContentToolbarIconButtonStyle,
+  paneContentToolbarTrailingPadding,
+  ToolbarButton,
+  ToolbarControls,
 } from "@/components/ui/pane-content-toolbar";
 import {
   useOverlayFlatListScrollbar,
@@ -61,7 +63,6 @@ import { useIsLocalDaemon } from "@/hooks/use-is-local-daemon";
 import { useFileExplorerActions } from "@/hooks/use-file-explorer-actions";
 import { buildWorkspaceExplorerStateKey } from "@/hooks/use-file-explorer-actions";
 import { usePanelStore, type ExpandedPathsUpdate, type SortOption } from "@/stores/panel-store";
-import { formatTimeAgo } from "@/utils/time";
 import { buildAbsoluteExplorerPath } from "@/utils/explorer-paths";
 import { isHiddenExplorerPath } from "@/file-explorer/visibility";
 import {
@@ -100,16 +101,6 @@ function DirectoryChevronIcon({ loading, expanded }: { loading: boolean; expande
   return <TreeChevron expanded={expanded} />;
 }
 
-function formatFileSize({ size }: { size: number }): string {
-  if (size < 1024) {
-    return `${size} B`;
-  }
-  if (size < 1024 * 1024) {
-    return `${(size / 1024).toFixed(1)} KB`;
-  }
-  return `${(size / (1024 * 1024)).toFixed(1)} MB`;
-}
-
 interface TreeRowItemProps {
   serverId: string;
   workspaceId?: string | null;
@@ -126,6 +117,7 @@ interface TreeRowItemProps {
   revealTargetName?: string;
   onDownloadEntry: (entry: ExplorerEntry) => void;
   onAddToChat?: (path: string) => void;
+  onOpenFileToSide?: (path: string) => void;
   onNewEntry?: (parentPath: string, kind: "file" | "directory") => void;
   onCollapseDirectory?: (path: string) => void;
   onRenameEntry?: (entry: ExplorerEntry) => void;
@@ -141,13 +133,6 @@ function sortTriggerStyle({
   return [styles.sortTrigger, (Boolean(hovered) || pressed) && styles.sortTriggerHovered];
 }
 
-function iconButtonStyle(
-  isCompact: boolean,
-  { hovered, pressed }: PressableStateCallbackType & { hovered?: boolean },
-) {
-  return paneContentToolbarIconButtonStyle({ hovered, pressed }, false, isCompact);
-}
-
 type ExplorerListRow =
   | { type: "entry"; row: ExplorerTreeRow }
   | { type: "draft"; parentPath: string; kind: "file" | "directory"; depth: number }
@@ -256,6 +241,7 @@ function TreeRowItem({
   revealTargetName,
   onDownloadEntry,
   onAddToChat,
+  onOpenFileToSide,
   onNewEntry,
   onCollapseDirectory,
   onRenameEntry,
@@ -263,7 +249,6 @@ function TreeRowItem({
   onDeleteEntry,
   testID,
 }: TreeRowItemProps) {
-  const { t } = useTranslation();
   const [isHovered, setIsHovered] = useState(false);
   const showNameHover = useCallback(() => setIsHovered(true), []);
   const hideNameHover = useCallback(() => setIsHovered(false), []);
@@ -317,6 +302,10 @@ function TreeRowItem({
     onAddToChat?.(entry.path);
   }, [onAddToChat, entry.path]);
 
+  const handleOpenToSide = useCallback(() => {
+    onOpenFileToSide?.(entry.path);
+  }, [entry.path, onOpenFileToSide]);
+
   const handleNewFile = useCallback(() => {
     onNewEntry?.(entry.path, "file");
   }, [onNewEntry, entry.path]);
@@ -341,30 +330,6 @@ function TreeRowItem({
     onDeleteEntry?.(entry);
   }, [onDeleteEntry, entry]);
 
-  const metaHeader = useMemo(
-    () => (
-      <View style={styles.contextMetaBlock}>
-        <View style={styles.contextMetaRow}>
-          <Text style={styles.contextMetaLabel} numberOfLines={1}>
-            {t("workspace.fileExplorer.context.size")}
-          </Text>
-          <Text style={styles.contextMetaValue} numberOfLines={1} ellipsizeMode="tail">
-            {formatFileSize({ size: entry.size })}
-          </Text>
-        </View>
-        <View style={styles.contextMetaRow}>
-          <Text style={styles.contextMetaLabel} numberOfLines={1}>
-            {t("workspace.fileExplorer.context.modified")}
-          </Text>
-          <Text style={styles.contextMetaValue} numberOfLines={1} ellipsizeMode="tail">
-            {formatTimeAgo(new Date(entry.modifiedAt))}
-          </Text>
-        </View>
-      </View>
-    ),
-    [entry.modifiedAt, entry.size, t],
-  );
-
   return (
     <ContextMenu>
       <ContextMenuTrigger
@@ -407,13 +372,13 @@ function TreeRowItem({
         revealTargetName={revealTargetName}
         onDownload={handleDownload}
         onAddToChat={onAddToChat ? handleAddToChat : undefined}
+        onOpenToSide={!isDirectory && onOpenFileToSide ? handleOpenToSide : undefined}
         onNewFile={onNewEntry ? handleNewFile : undefined}
         onNewFolder={onNewEntry ? handleNewFolder : undefined}
         onCollapseFolder={isDirectory && isExpanded ? handleCollapseDirectory : undefined}
         onRename={onRenameEntry ? handleRename : undefined}
         onDuplicate={onDuplicateEntry ? handleDuplicate : undefined}
         onDelete={onDeleteEntry ? handleDelete : undefined}
-        header={metaHeader}
         testIDPrefix={testID}
       />
     </ContextMenu>
@@ -425,6 +390,7 @@ interface FileExplorerPaneProps {
   workspaceId?: string | null;
   workspaceRoot: string;
   onOpenFile?: (filePath: string) => void;
+  onOpenFileToSide?: (filePath: string) => void;
   onAddToChat?: (path: string) => void;
 }
 
@@ -433,6 +399,7 @@ export function FileExplorerPane({
   workspaceId,
   workspaceRoot,
   onOpenFile,
+  onOpenFileToSide,
   onAddToChat,
 }: FileExplorerPaneProps) {
   const { t } = useTranslation();
@@ -996,6 +963,7 @@ export function FileExplorerPane({
           revealTargetName={fileManagerTarget?.label}
           onDownloadEntry={handleDownloadEntry}
           onAddToChat={onAddToChat}
+          onOpenFileToSide={onOpenFileToSide}
           onNewEntry={fsEntryOpsEnabled ? handleNewEntry : undefined}
           onCollapseDirectory={handleCollapseDirectory}
           onRenameEntry={fsEntryOpsEnabled ? handleRenameEntry : undefined}
@@ -1026,6 +994,7 @@ export function FileExplorerPane({
       fileManagerTarget,
       selectedEntryPath,
       onAddToChat,
+      onOpenFileToSide,
       serverId,
       workspaceId,
     ],
@@ -1049,11 +1018,6 @@ export function FileExplorerPane({
     });
   }, [requestDirectoryListing]);
 
-  const toolbarIconButtonStyle = useCallback(
-    (state: PressableStateCallbackType) => iconButtonStyle(isCompact, state),
-    [isCompact],
-  );
-
   if (!hasWorkspaceScope) {
     return (
       <View style={styles.centerState}>
@@ -1087,7 +1051,6 @@ export function FileExplorerPane({
         handleBackFromError={handleBackFromError}
         handleRetry={handleRetry}
         sortTriggerStyle={sortTriggerStyle}
-        iconButtonStyle={toolbarIconButtonStyle}
       />
     </View>
   );
@@ -1162,7 +1125,6 @@ interface FileExplorerPaneContentProps {
   handleBackFromError: () => void;
   handleRetry: () => void;
   sortTriggerStyle: (state: PressableStateCallbackType) => StyleProp<ViewStyle>;
-  iconButtonStyle: (state: PressableStateCallbackType) => StyleProp<ViewStyle>;
 }
 
 function FileExplorerPaneContent(props: FileExplorerPaneContentProps) {
@@ -1186,7 +1148,6 @@ function FileExplorerPaneContent(props: FileExplorerPaneContentProps) {
     handleBackFromError,
     handleRetry,
     sortTriggerStyle: sortTriggerStyleProp,
-    iconButtonStyle: iconButtonStyleProp,
   } = props;
 
   const showHiddenFiles = usePanelStore((state) => state.explorerShowHiddenFiles);
@@ -1204,17 +1165,6 @@ function FileExplorerPaneContent(props: FileExplorerPaneContentProps) {
   const emptyLabel = showHiddenFiles
     ? t("workspace.fileExplorer.empty.noFiles")
     : t("workspace.fileExplorer.empty.noVisibleFiles");
-  const hiddenFilesToggleStyle = useCallback(
-    (state: PressableStateCallbackType) => [
-      iconButtonStyleProp(state),
-      !showHiddenFiles && styles.iconButtonActive,
-    ],
-    [showHiddenFiles, iconButtonStyleProp],
-  );
-  const hiddenFilesToggleAccessibilityState = useMemo(
-    () => ({ selected: !showHiddenFiles }),
-    [showHiddenFiles],
-  );
 
   if (error) {
     return (
@@ -1245,7 +1195,10 @@ function FileExplorerPaneContent(props: FileExplorerPaneContentProps) {
 
   return (
     <View style={[styles.treePane, styles.treePaneFill]}>
-      <PaneContentToolbar style={styles.paneHeader} testID="files-pane-header">
+      <PaneContentToolbar
+        style={[styles.paneHeader, { paddingRight: paneContentToolbarTrailingPadding(isCompact) }]}
+        testID="files-pane-header"
+      >
         <Pressable
           onPress={handleSortCycle}
           style={sortTriggerStyleProp}
@@ -1256,86 +1209,82 @@ function FileExplorerPaneContent(props: FileExplorerPaneContentProps) {
           </Text>
           <ChevronDown size={12} color={theme.colors.foregroundMuted} />
         </Pressable>
-        <View style={styles.headerActions}>
+        <ToolbarControls style={styles.headerActions}>
           {onNewEntryAtRoot ? (
             <>
-              <Pressable
-                onPress={handleNewFileAtRoot}
+              <ToolbarButton
+                label={t("workspace.fileActions.newFile")}
+                compact={isCompact}
                 hitSlop={8}
-                style={iconButtonStyleProp}
-                accessibilityRole="button"
-                accessibilityLabel={t("workspace.fileActions.newFile")}
                 testID="files-new-file"
+                onPress={handleNewFileAtRoot}
               >
                 <FilePlus
                   size={paneContentToolbarIconSize(isCompact)}
-                  color={theme.colors.foregroundMuted}
+                  color={theme.colors.foregroundExtraMuted}
                 />
-              </Pressable>
-              <Pressable
-                onPress={handleNewFolderAtRoot}
+              </ToolbarButton>
+              <ToolbarButton
+                label={t("workspace.fileActions.newFolder")}
+                compact={isCompact}
                 hitSlop={8}
-                style={iconButtonStyleProp}
-                accessibilityRole="button"
-                accessibilityLabel={t("workspace.fileActions.newFolder")}
                 testID="files-new-folder"
+                onPress={handleNewFolderAtRoot}
               >
                 <FolderPlus
                   size={paneContentToolbarIconSize(isCompact)}
-                  color={theme.colors.foregroundMuted}
+                  color={theme.colors.foregroundExtraMuted}
                 />
-              </Pressable>
+              </ToolbarButton>
             </>
           ) : null}
-          <Pressable
-            onPress={handleToggleHiddenFiles}
+          <ToolbarButton
+            label={hiddenFilesToggleAccessibilityLabel}
+            selected={!showHiddenFiles}
+            compact={isCompact}
             hitSlop={8}
-            style={hiddenFilesToggleStyle}
-            accessibilityRole="button"
-            accessibilityLabel={hiddenFilesToggleAccessibilityLabel}
-            accessibilityState={hiddenFilesToggleAccessibilityState}
             testID="files-hidden-toggle"
+            onPress={handleToggleHiddenFiles}
           >
             {showHiddenFiles ? (
               <Eye
                 size={paneContentToolbarIconSize(isCompact)}
-                color={theme.colors.foregroundMuted}
+                color={theme.colors.foregroundExtraMuted}
               />
             ) : (
               <EyeOff
                 size={paneContentToolbarIconSize(isCompact)}
-                color={theme.colors.foregroundMuted}
+                color={theme.colors.foregroundExtraMuted}
               />
             )}
-          </Pressable>
-          <Pressable
-            onPress={handleRefresh}
-            disabled={isRefreshFetching}
-            hitSlop={8}
-            style={iconButtonStyleProp}
-            accessibilityRole="button"
-            accessibilityLabel={
+          </ToolbarButton>
+          <ToolbarButton
+            label={
               isRefreshFetching
                 ? t("workspace.fileExplorer.actions.refreshing")
                 : t("workspace.fileExplorer.actions.refresh")
             }
+            compact={isCompact}
+            disabled={isRefreshFetching}
+            hitSlop={8}
             testID="files-refresh"
+            onPress={handleRefresh}
           >
             <View style={styles.refreshIcon}>
               {isRefreshFetching ? (
                 <LoadingSpinner
                   size={paneContentToolbarIconSize(isCompact)}
-                  color={theme.colors.foregroundMuted}
+                  color={theme.colors.foregroundExtraMuted}
                 />
               ) : (
                 <RotateCw
                   size={paneContentToolbarIconSize(isCompact)}
-                  color={theme.colors.foregroundMuted}
+                  color={theme.colors.foregroundExtraMuted}
                 />
               )}
             </View>
-          </Pressable>
-        </View>
+          </ToolbarButton>
+        </ToolbarControls>
       </PaneContentToolbar>
       <ContextMenu>
         <RootCreationContextTarget enabled={Boolean(onNewEntryAtRoot)}>
@@ -1479,6 +1428,7 @@ function TreeRowDispatcher({
   revealTargetName,
   onDownloadEntry,
   onAddToChat,
+  onOpenFileToSide,
   onNewEntry,
   onCollapseDirectory,
   onRenameEntry,
@@ -1500,6 +1450,7 @@ function TreeRowDispatcher({
   revealTargetName?: string;
   onDownloadEntry: (entry: ExplorerEntry) => void;
   onAddToChat?: (path: string) => void;
+  onOpenFileToSide?: (path: string) => void;
   onNewEntry?: (parentPath: string, kind: "file" | "directory") => void;
   onCollapseDirectory?: (path: string) => void;
   onRenameEntry?: (entry: ExplorerEntry) => void;
@@ -1530,6 +1481,7 @@ function TreeRowDispatcher({
       revealTargetName={revealTargetName}
       onDownloadEntry={onDownloadEntry}
       onAddToChat={onAddToChat}
+      onOpenFileToSide={onOpenFileToSide}
       onNewEntry={onNewEntry}
       onCollapseDirectory={onCollapseDirectory}
       onRenameEntry={onRenameEntry}
@@ -1698,7 +1650,7 @@ const styles = StyleSheet.create((theme) => ({
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
-    paddingRight: theme.spacing[3],
+    backgroundColor: theme.colors.surfaceSidebar,
   },
   sortTrigger: {
     flexDirection: "row",
@@ -1711,7 +1663,7 @@ const styles = StyleSheet.create((theme) => ({
     borderRadius: theme.borderRadius.base,
   },
   sortTriggerHovered: {
-    backgroundColor: theme.colors.surface2,
+    backgroundColor: theme.colors.surfaceSidebarHover,
   },
   sortTriggerText: {
     fontSize: theme.fontSize.sm,
@@ -1720,7 +1672,6 @@ const styles = StyleSheet.create((theme) => ({
   headerActions: {
     flexDirection: "row",
     alignItems: "center",
-    gap: theme.spacing[1],
   },
   treeList: {
     flex: 1,
@@ -1807,38 +1758,12 @@ const styles = StyleSheet.create((theme) => ({
   draftPlaceholder: {
     color: theme.colors.foregroundExtraMuted,
   },
-  contextMetaBlock: {
-    paddingVertical: theme.spacing[1],
-  },
-  contextMetaRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    minHeight: 32,
-    paddingHorizontal: theme.spacing[3],
-  },
-  contextMetaLabel: {
-    fontSize: theme.fontSize.base,
-    color: theme.colors.foregroundMuted,
-    flexShrink: 0,
-  },
-  contextMetaValue: {
-    fontSize: theme.fontSize.base,
-    color: theme.colors.foreground,
-    fontWeight: theme.fontWeight.medium,
-    flex: 1,
-    minWidth: 0,
-    textAlign: "right",
-  },
   previewHeaderText: {
     flex: 1,
     color: theme.colors.foreground,
     fontSize: theme.fontSize.base,
     fontWeight: theme.fontWeight.normal,
   },
-  iconButtonActive: {
-    backgroundColor: theme.colors.surface2,
-  },
   refreshIcon: {
     width: 16,
     height: 16,
diff --git a/packages/app/src/components/headers/header-toggle-button.tsx b/packages/app/src/components/headers/header-toggle-button.tsx
index d6ac94d354..b11394c46d 100644
--- a/packages/app/src/components/headers/header-toggle-button.tsx
+++ b/packages/app/src/components/headers/header-toggle-button.tsx
@@ -5,6 +5,10 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip
 import { Shortcut } from "@/components/ui/shortcut";
 import type { ShortcutKey } from "@/utils/format-shortcut";
 import { isWeb } from "@/constants/platform";
+import {
+  iconButtonChromeFrameStyle,
+  iconButtonChromeStyle,
+} from "@/components/ui/icon-button-chrome";
 
 interface HeaderToggleButtonState {
   hovered: boolean;
@@ -42,7 +46,17 @@ export function HeaderToggleButton({
       ? ({ "aria-expanded": expandedState } as Record<string, boolean>)
       : null;
 
-  const combinedStyle = useMemo(() => [headerIconSlotStyle.slot, style], [style]);
+  const combinedStyle = useMemo(
+    () =>
+      ({ hovered, pressed }: { hovered?: boolean; pressed: boolean }) =>
+        iconButtonChromeStyle({
+          size: "large",
+          state: { hovered: Boolean(hovered), pressed },
+          disabled: Boolean(disabled),
+          style,
+        }),
+    [disabled, style],
+  );
 
   return (
     <Tooltip delayDuration={tooltipDelayDuration} enabledOnDesktop enabledOnMobile={false}>
@@ -68,16 +82,6 @@ export function HeaderToggleButton({
   );
 }
 
-export const headerIconSlotStyle = StyleSheet.create((theme) => ({
-  slot: {
-    padding: {
-      xs: theme.spacing[3],
-      md: theme.spacing[2],
-    },
-    borderRadius: theme.borderRadius.lg,
-  },
-}));
-
 const styles = StyleSheet.create((theme) => ({
   tooltipRow: {
     flexDirection: "row",
@@ -90,3 +94,7 @@ const styles = StyleSheet.create((theme) => ({
   },
   shortcut: {},
 }));
+
+export const headerIconSlotStyle = {
+  slot: iconButtonChromeFrameStyle("large"),
+};
diff --git a/packages/app/src/components/headers/menu-header.tsx b/packages/app/src/components/headers/menu-header.tsx
index 1d251440af..37f39ca0ba 100644
--- a/packages/app/src/components/headers/menu-header.tsx
+++ b/packages/app/src/components/headers/menu-header.tsx
@@ -10,6 +10,7 @@ import { selectIsAgentListOpen, usePanelStore } from "@/stores/panel-store";
 import { useIsCompactFormFactor } from "@/constants/layout";
 import { getShortcutOs } from "@/utils/shortcut-platform";
 import { useHasWindowChromeObstruction, useOwnsWindowChromeCorner } from "@/utils/desktop-window";
+import { iconButtonChromeGlyphSize } from "@/components/ui/icon-button-chrome";
 
 interface MenuHeaderProps {
   title?: string;
@@ -26,7 +27,7 @@ interface SidebarMenuToggleProps {
 
 const MOBILE_MENU_LINE_WIDTH = 16;
 const MOBILE_MENU_LINE_SHORT_WIDTH = 8;
-const MOBILE_MENU_LINE_HEIGHT = 2;
+const MOBILE_MENU_LINE_HEIGHT = 1.5;
 
 function MobileMenuIcon({ color }: { color: string }) {
   const lineStyle = useMemo(() => [styles.mobileMenuLine, { backgroundColor: color }], [color]);
@@ -84,19 +85,21 @@ function SidebarMenuToggleButton({
       accessibilityLabel={isOpen ? t("shell.menu.close") : t("shell.menu.open")}
       accessibilityState={accessibilityState}
     >
-      {({ hovered, pressed }) => {
-        let color = extraMutedIdleIcon
-          ? theme.colors.foregroundExtraMuted
-          : theme.colors.foregroundMuted;
-        if (hovered || pressed) {
-          color = theme.colors.foreground;
-        }
-        return isMobile ? (
-          <MobileMenuIcon color={color} />
-        ) : (
-          <PanelLeft size={theme.iconSize.md} color={color} />
-        );
-      }}
+      {isMobile ? (
+        <MobileMenuIcon
+          color={
+            extraMutedIdleIcon ? theme.colors.foregroundExtraMuted : theme.colors.foregroundMuted
+          }
+        />
+      ) : (
+        <PanelLeft
+          size={iconButtonChromeGlyphSize("large")}
+          strokeWidth={1.5}
+          color={
+            extraMutedIdleIcon ? theme.colors.foregroundExtraMuted : theme.colors.foregroundMuted
+          }
+        />
+      )}
     </HeaderToggleButton>
   );
 }
diff --git a/packages/app/src/components/message.tsx b/packages/app/src/components/message.tsx
index e8a0fdbb69..ac7493b5b5 100644
--- a/packages/app/src/components/message.tsx
+++ b/packages/app/src/components/message.tsx
@@ -1462,7 +1462,7 @@ export const AssistantMessage = memo(function AssistantMessage({
 
   const fileLinkActions = useAssistantFileLinkActions();
   const handleMarkdownLinkPress = useStableEvent((url: string) => {
-    fileLinkActions.open({ href: url }, "side");
+    fileLinkActions.open({ href: url }, "preferred");
     // react-native-markdown-display opens the link itself when this returns true.
     // We already handled it above, so return false to avoid duplicate opens.
     return false;
diff --git a/packages/app/src/components/resize-handle.tsx b/packages/app/src/components/resize-handle.tsx
index 43688578ea..6576728384 100644
--- a/packages/app/src/components/resize-handle.tsx
+++ b/packages/app/src/components/resize-handle.tsx
@@ -1,14 +1,22 @@
 import { useCallback, useMemo, useRef, useState } from "react";
 import { View, type PointerEvent as RNPointerEvent } from "react-native";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { startResizeHandleDrag, type ResizeHandleDrag } from "@/components/resize-handle-drag";
+import { useHasFinePointer } from "@/hooks/use-fine-pointer";
+import {
+  SIDEBAR_RESIZE_ACTIVATION_OFFSET,
+  SIDEBAR_RESIZE_FAIL_OFFSET,
+} from "@/components/sidebar-resize-handle-layout";
 
 export interface ResizeHandleProps {
   testID?: string;
   direction: "horizontal" | "vertical";
+  hitAreaAlignment?: "center" | "end";
   groupId: string;
   index: number;
   sizes: number[];
+  containerSize: number;
   onPreviewResizeSplit: (groupId: string, sizes: number[]) => void;
   onResizeSplit: (groupId: string, sizes: number[]) => void;
 }
@@ -30,14 +38,18 @@ function resetWindowHorizontalScroll() {
 export function ResizeHandle({
   testID,
   direction,
+  hitAreaAlignment = "center",
   groupId,
   index,
   sizes,
+  containerSize,
   onPreviewResizeSplit,
   onResizeSplit,
 }: ResizeHandleProps) {
   const { theme } = useUnistyles();
+  const finePointer = useHasFinePointer();
   const pointerStatesRef = useRef(new Map<number, PointerState>());
+  const touchDragRef = useRef<ResizeHandleDrag | null>(null);
   const cursorBeforeDragRef = useRef<string | null>(null);
   const hoverTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const [active, setActive] = useState(false);
@@ -51,13 +63,6 @@ export function ResizeHandle({
         return;
       }
 
-      const containerElement = hitAreaElement.parentElement?.parentElement ?? null;
-      if (!containerElement) {
-        return;
-      }
-
-      const rect = containerElement.getBoundingClientRect();
-      const containerSize = direction === "horizontal" ? rect.width : rect.height;
       if (containerSize <= 0) {
         return;
       }
@@ -140,9 +145,41 @@ export function ResizeHandle({
       window.addEventListener("pointerup", handlePointerUp);
       window.addEventListener("pointercancel", handlePointerUp);
     },
-    [direction, groupId, index, onPreviewResizeSplit, onResizeSplit, sizes],
+    [containerSize, direction, groupId, index, onPreviewResizeSplit, onResizeSplit, sizes],
   );
 
+  const touchGesture = useMemo(() => {
+    const gesture = Gesture.Pan()
+      .runOnJS(true)
+      .onBegin(() => setDragging(true))
+      .onStart(() => {
+        touchDragRef.current = startResizeHandleDrag({
+          sizes,
+          index,
+          preview: (nextSizes) => onPreviewResizeSplit(groupId, nextSizes),
+          commit: (nextSizes) => onResizeSplit(groupId, nextSizes),
+        });
+      })
+      .onUpdate((event) => {
+        if (containerSize <= 0) return;
+        const translation = direction === "horizontal" ? event.translationX : event.translationY;
+        touchDragRef.current?.move(translation / containerSize);
+      })
+      .onEnd(() => touchDragRef.current?.finish())
+      .onFinalize(() => {
+        touchDragRef.current = null;
+        setDragging(false);
+      });
+
+    return direction === "horizontal"
+      ? gesture
+          .activeOffsetX([-SIDEBAR_RESIZE_ACTIVATION_OFFSET, SIDEBAR_RESIZE_ACTIVATION_OFFSET])
+          .failOffsetY([-SIDEBAR_RESIZE_FAIL_OFFSET, SIDEBAR_RESIZE_FAIL_OFFSET])
+      : gesture
+          .activeOffsetY([-SIDEBAR_RESIZE_ACTIVATION_OFFSET, SIDEBAR_RESIZE_ACTIVATION_OFFSET])
+          .failOffsetX([-SIDEBAR_RESIZE_FAIL_OFFSET, SIDEBAR_RESIZE_FAIL_OFFSET]);
+  }, [containerSize, direction, groupId, index, onPreviewResizeSplit, onResizeSplit, sizes]);
+
   const handlePointerEnter = useCallback(() => {
     hoverTimerRef.current = setTimeout(() => {
       setActive(true);
@@ -178,11 +215,36 @@ export function ResizeHandle({
       styles.hitArea,
       direction === "horizontal" ? styles.hitAreaHorizontal : styles.hitAreaVertical,
       {
+        ...(direction === "horizontal"
+          ? { left: hitAreaAlignment === "end" ? 0 : -5 }
+          : { top: hitAreaAlignment === "end" ? 0 : -5 }),
         cursor: direction === "horizontal" ? "col-resize" : "row-resize",
         touchAction: "none",
       } as object,
     ],
-    [direction],
+    [direction, hitAreaAlignment],
+  );
+  const touchHitAreaStyle = useMemo(
+    () => [
+      styles.touchHitArea,
+      direction === "horizontal" ? styles.touchHitAreaHorizontal : styles.touchHitAreaVertical,
+      {
+        ...(direction === "horizontal"
+          ? { left: hitAreaAlignment === "end" ? 0 : -12 }
+          : { top: hitAreaAlignment === "end" ? 0 : -12 }),
+        touchAction: "none",
+      } as object,
+    ],
+    [direction, hitAreaAlignment],
+  );
+  const touchGripStyle = useMemo(
+    () => [
+      styles.touchGrip,
+      direction === "horizontal" ? styles.touchGripHorizontal : styles.touchGripVertical,
+      highlighted ? styles.touchGripVisible : styles.touchGripHidden,
+      { backgroundColor: theme.colors.foreground },
+    ],
+    [direction, highlighted, theme.colors.foreground],
   );
 
   return (
@@ -194,14 +256,27 @@ export function ResizeHandle({
           testID={testID ? `${testID}-highlight` : undefined}
         />
       )}
-      <View
-        role="separator"
-        aria-orientation={direction === "horizontal" ? "vertical" : "horizontal"}
-        style={hitAreaStyle}
-        onPointerDown={handlePointerDown}
-        onPointerEnter={handlePointerEnter}
-        onPointerLeave={handlePointerLeave}
-      />
+      {finePointer ? (
+        <View
+          role="separator"
+          aria-orientation={direction === "horizontal" ? "vertical" : "horizontal"}
+          style={hitAreaStyle}
+          onPointerDown={handlePointerDown}
+          onPointerEnter={handlePointerEnter}
+          onPointerLeave={handlePointerLeave}
+        />
+      ) : (
+        <GestureDetector gesture={touchGesture}>
+          <View
+            role="separator"
+            aria-orientation={direction === "horizontal" ? "vertical" : "horizontal"}
+            collapsable={false}
+            style={touchHitAreaStyle}
+          >
+            <View pointerEvents="none" style={touchGripStyle} />
+          </View>
+        </GestureDetector>
+      )}
     </View>
   );
 }
@@ -210,6 +285,7 @@ const styles = StyleSheet.create((_theme) => ({
   handle: {
     position: "relative",
     flexShrink: 0,
+    zIndex: 10,
   },
   handleHorizontal: {
     width: 1,
@@ -240,15 +316,48 @@ const styles = StyleSheet.create((_theme) => ({
     zIndex: 10,
   },
   hitAreaHorizontal: {
-    left: -5,
     top: 0,
     bottom: 0,
     width: 10,
   },
   hitAreaVertical: {
-    top: -5,
     left: 0,
     right: 0,
     height: 10,
   },
+  touchHitArea: {
+    position: "absolute",
+    zIndex: 10,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  touchHitAreaHorizontal: {
+    top: "50%",
+    width: 24,
+    height: 88,
+    transform: [{ translateY: -44 }],
+  },
+  touchHitAreaVertical: {
+    left: "50%",
+    width: 88,
+    height: 24,
+    transform: [{ translateX: -44 }],
+  },
+  touchGrip: {
+    borderRadius: 2,
+  },
+  touchGripHorizontal: {
+    width: 4,
+    height: 36,
+  },
+  touchGripVertical: {
+    width: 36,
+    height: 4,
+  },
+  touchGripHidden: {
+    opacity: 0.12,
+  },
+  touchGripVisible: {
+    opacity: 0.3,
+  },
 }));
diff --git a/packages/app/src/components/sidebar-workspace-list.tsx b/packages/app/src/components/sidebar-workspace-list.tsx
index 20ba99e847..94a931f700 100644
--- a/packages/app/src/components/sidebar-workspace-list.tsx
+++ b/packages/app/src/components/sidebar-workspace-list.tsx
@@ -37,14 +37,7 @@ import type { SidebarSurfaceBackdrop } from "@/styles/surface-backdrop";
 import { getSidebarRowBackdrop } from "@/components/sidebar/sidebar-row-backdrop";
 import { type GestureType } from "react-native-gesture-handler";
 import * as Clipboard from "expo-clipboard";
-import {
-  ExternalLink,
-  GitPullRequest,
-  Settings,
-  MoreVertical,
-  Plus,
-  Trash2,
-} from "lucide-react-native";
+import { ExternalLink, Settings, MoreVertical, Plus, Trash2 } from "lucide-react-native";
 import { NestableScrollContainer } from "react-native-draggable-flatlist";
 import { DraggableList, type DraggableRenderItemInfo } from "./draggable-list";
 import type { DraggableListDragHandleProps } from "./draggable-list.types";
@@ -159,6 +152,7 @@ import { useLocalDaemonServerId } from "@/hooks/use-is-local-daemon";
 import type { HostBadgeModel } from "@/hosts/appearance";
 import { useHostBadges } from "@/hosts/use-host-badges";
 import { useSidebarRowItems } from "@/components/sidebar/display-preferences/model";
+import { PullRequestStateIcon } from "@/git/pull-request-state-icon";
 
 const workspaceKeyExtractor = (workspace: SidebarWorkspacePlacement) => workspace.workspaceKey;
 
@@ -166,7 +160,6 @@ const projectViewKeyExtractor = (project: SidebarProjectEntry) => project.viewKe
 
 const WORKSPACE_STATUS_DOT_WIDTH = 14;
 const ThemedExternalLink = withUnistyles(ExternalLink);
-const ThemedGitPullRequest = withUnistyles(GitPullRequest);
 const ThemedLoadingSpinner = withUnistyles(LoadingSpinner);
 const ThemedPlus = withUnistyles(Plus);
 const ThemedMoreVertical = withUnistyles(MoreVertical);
@@ -179,26 +172,6 @@ const foregroundColorMapping = (theme: Theme) => ({
 const foregroundMutedColorMapping = (theme: Theme) => ({
   color: theme.colors.foregroundMuted,
 });
-const redColorMapping = (theme: Theme) => ({
-  color: theme.colors.statusDanger,
-});
-const greenColorMapping = (theme: Theme) => ({
-  color: theme.colors.statusSuccess,
-});
-const purpleColorMapping = (theme: Theme) => ({
-  color: theme.colors.statusMerged,
-});
-
-function getPrIconUniMapping(state: PrHint["state"]) {
-  switch (state) {
-    case "merged":
-      return purpleColorMapping;
-    case "open":
-      return greenColorMapping;
-    case "closed":
-      return redColorMapping;
-  }
-}
 
 function isWorkspaceSelected(input: {
   selection: ActiveWorkspaceSelection | null;
@@ -352,7 +325,6 @@ export function PrBadge({ hint, style }: { hint: PrHint; style?: StyleProp<ViewS
   const textStyle = isHovered
     ? [prBadgeStyles.text, prBadgeStyles.textHovered]
     : prBadgeStyles.text;
-  const iconUniProps = isHovered ? foregroundColorMapping : getPrIconUniMapping(hint.state);
   const presentation = getForgePresentation(normalizeForge(hint.forge));
 
   return (
@@ -370,9 +342,9 @@ export function PrBadge({ hint, style }: { hint: PrHint; style?: StyleProp<ViewS
       style={pressableStyle}
     >
       {isHovered ? (
-        <ThemedExternalLink size={12} uniProps={iconUniProps} />
+        <ThemedExternalLink size={12} uniProps={foregroundColorMapping} />
       ) : (
-        <ThemedGitPullRequest size={12} uniProps={iconUniProps} />
+        <PullRequestStateIcon state={hint.state} size={12} />
       )}
       <Text style={textStyle} numberOfLines={1}>
         {hint.number}
diff --git a/packages/app/src/components/sidebar/workspace-meta-row/index.tsx b/packages/app/src/components/sidebar/workspace-meta-row/index.tsx
index f26f562be4..d539fcf064 100644
--- a/packages/app/src/components/sidebar/workspace-meta-row/index.tsx
+++ b/packages/app/src/components/sidebar/workspace-meta-row/index.tsx
@@ -2,15 +2,7 @@ import { Fragment, useCallback, useState, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import { Pressable, Text, View, type GestureResponderEvent } from "react-native";
 import { StyleSheet, withUnistyles } from "react-native-unistyles";
-import {
-  ExternalLink,
-  Folder,
-  GitBranch,
-  GitMerge,
-  GitPullRequest,
-  GitPullRequestClosed,
-  Globe,
-} from "lucide-react-native";
+import { ExternalLink, Folder, GitBranch, Globe } from "lucide-react-native";
 import {
   workspaceLabelKey,
   type WorkspaceLabelDefinition,
@@ -23,6 +15,7 @@ import { getForgePresentation, normalizeForge } from "@/git/forge";
 import { openExternalUrl } from "@/utils/open-external-url";
 import { useSidebarMetaPreferences } from "@/components/sidebar/display-preferences/model";
 import type { Theme } from "@/styles/theme";
+import { PullRequestStateIcon } from "@/git/pull-request-state-icon";
 import { CheckIndicator } from "./check-indicator";
 import type { CheckSummary, CheckSummaryState } from "./check-summary";
 import { selectMetaRowItems, type MetaRowItem } from "./meta-items";
@@ -44,9 +37,6 @@ const META_ICON_SIZE = HOST_BADGE_ICON_SIZE;
 const ThemedExternalLink = withUnistyles(ExternalLink);
 const ThemedFolder = withUnistyles(Folder);
 const ThemedGitBranch = withUnistyles(GitBranch);
-const ThemedGitPullRequest = withUnistyles(GitPullRequest);
-const ThemedGitMerge = withUnistyles(GitMerge);
-const ThemedGitPullRequestClosed = withUnistyles(GitPullRequestClosed);
 const ThemedGlobe = withUnistyles(Globe);
 
 /** Stable identity so a row without labels doesn't re-select its items on every render. */
@@ -54,7 +44,6 @@ const EMPTY_LABELS: readonly WorkspaceLabelDefinition[] = [];
 
 const foregroundMapping = (theme: Theme) => ({ color: theme.colors.foreground });
 const mutedMapping = (theme: Theme) => ({ color: theme.colors.foregroundMuted });
-const mergedMapping = (theme: Theme) => ({ color: theme.colors.statusMerged });
 const dangerMapping = (theme: Theme) => ({ color: theme.colors.statusDanger });
 
 /**
@@ -212,7 +201,6 @@ function PullRequestItem({ hint }: { hint: PrHint }) {
   const handleHoverIn = useCallback(() => setIsHovered(true), []);
   const handleHoverOut = useCallback(() => setIsHovered(false), []);
 
-  const Icon = isHovered ? ThemedExternalLink : PR_ICONS[hint.state];
   return (
     <Pressable
       accessibilityRole="link"
@@ -227,10 +215,11 @@ function PullRequestItem({ hint }: { hint: PrHint }) {
       onHoverOut={handleHoverOut}
       style={pressableItemStyle}
     >
-      <Icon
-        size={META_ICON_SIZE}
-        uniProps={isHovered ? foregroundMapping : PR_COLOR_MAPPINGS[hint.state]}
-      />
+      {isHovered ? (
+        <ThemedExternalLink size={META_ICON_SIZE} uniProps={foregroundMapping} />
+      ) : (
+        <PullRequestStateIcon state={hint.state} size={META_ICON_SIZE} />
+      )}
       <Text style={isHovered ? styles.prTextHovered : styles.prText} numberOfLines={1}>
         {hint.number}
         {/* An open change request is the unremarkable case and says nothing extra; a merged
@@ -311,20 +300,6 @@ function ServiceItem({ summary }: { summary: WorkspaceServiceSummary }) {
 
 const successMapping = (theme: Theme) => ({ color: theme.colors.statusSuccess });
 
-const PR_ICONS = {
-  open: ThemedGitPullRequest,
-  merged: ThemedGitMerge,
-  closed: ThemedGitPullRequestClosed,
-} as const;
-
-// Same three colours the hover card gives the same three states — a change request has one
-// identity, and it shouldn't shift when you hover the row that names it.
-const PR_COLOR_MAPPINGS = {
-  open: successMapping,
-  merged: mergedMapping,
-  closed: dangerMapping,
-} as const;
-
 const PR_STATE_LABEL_KEYS = {
   merged: "workspace.git.pr.states.merged",
   closed: "workspace.git.pr.states.closed",
diff --git a/packages/app/src/components/split-container-focus.test.ts b/packages/app/src/components/split-container-focus.test.ts
index 1880f924f4..14ee9ba3c5 100644
--- a/packages/app/src/components/split-container-focus.test.ts
+++ b/packages/app/src/components/split-container-focus.test.ts
@@ -1,5 +1,8 @@
 import { describe, expect, it } from "vitest";
-import { resolveSplitContainerRoot } from "@/components/split-container-focus";
+import {
+  resolveSplitContainerRoot,
+  splitNodeContainsPane,
+} from "@/components/split-container-focus";
 import type { SplitNode } from "@/stores/workspace-layout-store";
 
 const pane = (id: string): SplitNode => ({
@@ -35,25 +38,11 @@ describe("split focus root", () => {
     ).toEqual({ root, usesFallbackStrip: false });
   });
 
-  it("renders only a maximized pane without entering focus mode", () => {
+  it("finds the maximized pane without replacing the rendered split tree", () => {
+    expect(splitNodeContainsPane(root, "right")).toBe(true);
+    expect(splitNodeContainsPane(root, "missing")).toBe(false);
     expect(
-      resolveSplitContainerRoot({
-        root,
-        focusedPaneId: "left",
-        focusModeEnabled: false,
-        maximizedPaneId: "right",
-      }),
-    ).toEqual({ root: pane("right"), usesFallbackStrip: false });
-  });
-
-  it("keeps normal splits when the maximized pane is unavailable", () => {
-    expect(
-      resolveSplitContainerRoot({
-        root,
-        focusedPaneId: "left",
-        focusModeEnabled: false,
-        maximizedPaneId: "missing",
-      }),
+      resolveSplitContainerRoot({ root, focusedPaneId: "left", focusModeEnabled: false }),
     ).toEqual({ root, usesFallbackStrip: false });
   });
 });
diff --git a/packages/app/src/components/split-container-focus.ts b/packages/app/src/components/split-container-focus.ts
index aa7ef6db3a..8d41a54f28 100644
--- a/packages/app/src/components/split-container-focus.ts
+++ b/packages/app/src/components/split-container-focus.ts
@@ -4,9 +4,8 @@ export function resolveSplitContainerRoot(input: {
   root: SplitNode;
   focusedPaneId: string | null;
   focusModeEnabled: boolean | undefined;
-  maximizedPaneId?: string | null;
 }): { root: SplitNode; usesFallbackStrip: boolean } {
-  const isolatedPaneId = input.focusModeEnabled ? input.focusedPaneId : input.maximizedPaneId;
+  const isolatedPaneId = input.focusModeEnabled ? input.focusedPaneId : null;
   if (!isolatedPaneId) return { root: input.root, usesFallbackStrip: false };
   const isolatedPane = findPane(input.root, isolatedPaneId);
   if (!isolatedPane || isolatedPane.hidden === true) {
@@ -15,6 +14,12 @@ export function resolveSplitContainerRoot(input: {
   return { root: { kind: "pane", pane: isolatedPane }, usesFallbackStrip: false };
 }
 
+/** Whether a split subtree contains the pane currently projected full-size. */
+export function splitNodeContainsPane(node: SplitNode, paneId: string): boolean {
+  if (node.kind === "pane") return node.pane.id === paneId;
+  return node.group.children.some((child) => splitNodeContainsPane(child, paneId));
+}
+
 function findPane(node: SplitNode, paneId: string): SplitPane | null {
   if (node.kind === "pane") return node.pane.id === paneId ? node.pane : null;
   for (const child of node.group.children) {
diff --git a/packages/app/src/components/split-container.tsx b/packages/app/src/components/split-container.tsx
index 2f0c275321..9ab461eeca 100644
--- a/packages/app/src/components/split-container.tsx
+++ b/packages/app/src/components/split-container.tsx
@@ -1,6 +1,5 @@
 import {
   Fragment,
-  memo,
   useCallback,
   useEffect,
   useMemo,
@@ -27,7 +26,7 @@ import {
   type DragStartEvent,
 } from "@dnd-kit/core";
 import { arrayMove, sortableKeyboardCoordinates } from "@dnd-kit/sortable";
-import { View, Text } from "react-native";
+import { View, Text, type LayoutChangeEvent } from "react-native";
 import Animated, {
   useAnimatedStyle,
   useSharedValue,
@@ -36,10 +35,18 @@ import Animated, {
 import { useTranslation } from "react-i18next";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { ResizeHandle } from "@/components/resize-handle";
+import {
+  resolveExplorerSidebarDockSizes,
+  resolveExplorerSidebarWidth,
+} from "@/components/explorer-sidebar-layout";
 import { RetainedPanel } from "@/components/retained-panel";
-import { resolveSplitContainerRoot } from "@/components/split-container-focus";
+import {
+  resolveSplitContainerRoot,
+  splitNodeContainsPane,
+} from "@/components/split-container-focus";
 import { shouldFocusPaneFromEventTarget } from "@/components/split-container-pane-focus";
 import {
+  removeWindowChromeCorner,
   WindowChromeRegion,
   WindowChromeSafeArea,
   useWindowChromeCorners,
@@ -59,22 +66,20 @@ import {
   deriveWorkspacePaneState,
   getWorkspacePaneDescriptors,
 } from "@/screens/workspace/workspace-pane-state";
-import { useMountedTabSet } from "@/screens/workspace/use-mounted-tab-set";
-import { useModifiedPanelTabIds } from "@/panels/panel-instance-attributes";
-import {
-  WorkspacePaneContent,
-  type WorkspacePaneContentModel,
-} from "@/screens/workspace/workspace-pane-content";
+import type { WorkspacePaneContentModel } from "@/screens/workspace/workspace-pane-content";
+import { WorkspacePanelHost } from "@/screens/workspace/workspace-panel-host";
 import {
   WorkspaceDesktopTabsRow,
   type WorkspaceDesktopTabRowItem,
 } from "@/screens/workspace/workspace-desktop-tabs-row";
+import { ExplorerSidebarDock } from "@/screens/workspace/explorer-sidebar";
 import {
   WorkspaceTabPresentationResolver,
   WorkspaceTabIcon,
 } from "@/screens/workspace/workspace-tab-presentation";
 import type { WorkspaceTabDescriptor } from "@/screens/workspace/workspace-tabs-types";
 import {
+  createDefaultLayout,
   findPaneById,
   useWorkspaceLayoutStore,
   type SplitNode,
@@ -83,13 +88,13 @@ import {
 } from "@/stores/workspace-layout-store";
 import type { WorkspaceTab } from "@/workspace-tabs/model";
 import { RenderProfile } from "@/utils/render-profiler";
-import { workspaceTabTargetsEqual } from "@/workspace-tabs/identity";
 import { isNative } from "@/constants/platform";
-import { useKeyboardActionHandler } from "@/hooks/use-keyboard-action-handler";
-import type { KeyboardActionDefinition } from "@/keyboard/keyboard-action-dispatcher";
+import { panelTargetSupportsHost } from "@/plugins/workspace-panels/locations";
 
 interface SplitContainerProps {
   layout: WorkspaceLayout;
+  renderMainHeader?: () => ReactNode;
+  renderExplorerSidebarHeaderAction?: () => ReactNode;
   workspaceKey: string;
   normalizedServerId: string;
   normalizedWorkspaceId: string;
@@ -125,6 +130,7 @@ interface SplitContainerProps {
     position: "left" | "right" | "top" | "bottom";
   }) => void;
   onMoveTabToPane: (tabId: string, toPaneId: string) => void;
+  onSelectTabInPane: (paneId: string, tabId: string) => void;
   onResizeSplit: (groupId: string, sizes: number[]) => void;
   onReorderTabsInPane: (paneId: string, tabIds: string[]) => void;
   focusModeEnabled?: boolean;
@@ -144,6 +150,7 @@ interface SplitPaneDropData {
 
 const EMPTY_SPLIT_NODES: SplitNode[] = [];
 const EMPTY_SPLIT_SIZES: number[] = [];
+const EXPLORER_SIDEBAR_RESIZE_GROUP_ID = "explorer-sidebar";
 
 function isWorkspaceTabDragData(data: unknown): data is WorkspaceTabDragData {
   return typeof data === "object" && data !== null && Reflect.get(data, "kind") === "workspace-tab";
@@ -165,18 +172,21 @@ function asDragOverData(data: unknown): WorkspaceTabDragData | SplitPaneDropData
   return undefined;
 }
 
-interface SplitNodeViewProps extends Omit<SplitContainerProps, "layout" | "onMoveTabToPane"> {
+interface SplitNodeViewProps extends Omit<
+  SplitContainerProps,
+  "layout" | "onMoveTabToPane" | "onSelectTabInPane"
+> {
   node: SplitNode;
   uiTabs: WorkspaceTab[];
   focusedPaneId: string | null;
-  sidePanelPaneId: string | null;
-  maximizedPaneId: string | null;
-  onTogglePaneMaximized: (paneId: string) => void;
   activeDragTabId: string | null;
   showDropZones: boolean;
   dropPreview: SplitDropZoneHover | null;
   tabDropPreview: TabDropPreview | null;
   windowChromeCorners: WindowChromeCorners;
+  maximizedPaneId: string | null;
+  workspaceHasSplits: boolean;
+  onTogglePaneMaximized: (paneId: string) => void;
 }
 
 interface SplitPaneViewProps extends Omit<
@@ -199,82 +209,6 @@ interface SplitPaneViewProps extends Omit<
   tabDropPreview: TabDropPreview | null;
 }
 
-interface MountedTabSlotProps {
-  tabDescriptor: WorkspaceTabDescriptor;
-  isVisible: boolean;
-  isWorkspaceFocused: boolean;
-  isPaneFocused: boolean;
-  paneId: string;
-  onFocusPane: (paneId: string) => void;
-  buildPaneContentModel: (input: {
-    paneId: string;
-    tab: WorkspaceTabDescriptor;
-  }) => WorkspacePaneContentModel;
-}
-
-const MountedTabSlot = memo(function MountedTabSlot({
-  tabDescriptor,
-  isVisible,
-  isWorkspaceFocused,
-  isPaneFocused,
-  paneId,
-  onFocusPane,
-  buildPaneContentModel,
-}: MountedTabSlotProps) {
-  const content = useMemo(
-    () =>
-      buildPaneContentModel({
-        paneId,
-        tab: tabDescriptor,
-      }),
-    [buildPaneContentModel, paneId, tabDescriptor],
-  );
-
-  const handleFocusPane = useCallback(() => {
-    onFocusPane(paneId);
-  }, [onFocusPane, paneId]);
-
-  return (
-    <RenderProfile id={`DesktopMountedTabSlot:${tabDescriptor.kind}:${tabDescriptor.tabId}`}>
-      <RetainedPanel active={isVisible}>
-        <WorkspacePaneContent
-          content={content}
-          isWorkspaceFocused={isWorkspaceFocused}
-          isPaneFocused={isPaneFocused}
-          onFocusPane={handleFocusPane}
-        />
-      </RetainedPanel>
-    </RenderProfile>
-  );
-});
-
-function useStableTabDescriptorMap(tabDescriptors: WorkspaceTabDescriptor[]) {
-  const cacheRef = useRef(new Map<string, WorkspaceTabDescriptor>());
-  const tabDescriptorMap = useMemo(() => {
-    const next = new Map<string, WorkspaceTabDescriptor>();
-    for (const tabDescriptor of tabDescriptors) {
-      const cachedDescriptor = cacheRef.current.get(tabDescriptor.tabId);
-      if (
-        cachedDescriptor &&
-        cachedDescriptor.key === tabDescriptor.key &&
-        cachedDescriptor.kind === tabDescriptor.kind &&
-        cachedDescriptor.state === tabDescriptor.state &&
-        workspaceTabTargetsEqual(cachedDescriptor.target, tabDescriptor.target)
-      ) {
-        next.set(tabDescriptor.tabId, cachedDescriptor);
-        continue;
-      }
-      next.set(tabDescriptor.tabId, tabDescriptor);
-    }
-    return next;
-  }, [tabDescriptors]);
-  useEffect(() => {
-    cacheRef.current = tabDescriptorMap;
-  }, [tabDescriptorMap]);
-
-  return tabDescriptorMap;
-}
-
 interface DragMoveRects {
   translatedRect: { left: number; top: number; width: number; height: number };
   overRect: { left: number; top: number; width: number; height: number };
@@ -372,6 +306,8 @@ const dropCollisionDetection: CollisionDetection = (args) => {
 
 export function SplitContainer({
   layout,
+  renderMainHeader,
+  renderExplorerSidebarHeaderAction,
   workspaceKey,
   normalizedServerId,
   normalizedWorkspaceId,
@@ -397,6 +333,7 @@ export function SplitContainer({
   onSplitPane,
   onSplitPaneEmpty,
   onMoveTabToPane,
+  onSelectTabInPane,
   onResizeSplit,
   onReorderTabsInPane,
   focusModeEnabled,
@@ -413,56 +350,10 @@ export function SplitContainer({
   } | null>(null);
   const maximizedPaneId =
     maximizedPane?.workspaceKey === workspaceKey ? maximizedPane.paneId : null;
-  const sidePanelPaneId = useWorkspaceLayoutStore(
-    (state) => state.sidePanelPaneIdByWorkspace[workspaceKey] ?? null,
+  const explorerSidebarPaneId = useWorkspaceLayoutStore(
+    (state) => state.explorerSidebarPaneIdByWorkspace[workspaceKey] ?? null,
   );
 
-  useEffect(() => {
-    if (!maximizedPaneId) {
-      return;
-    }
-    const isolatedPane = findPaneById(layout.root, maximizedPaneId);
-    if (focusModeEnabled || !isolatedPane || isolatedPane.hidden === true) {
-      setMaximizedPane(null);
-    }
-  }, [focusModeEnabled, layout.root, maximizedPaneId]);
-
-  const handleTogglePaneMaximized = useCallback(
-    (paneId: string) => {
-      setMaximizedPane((currentPane) =>
-        currentPane?.workspaceKey === workspaceKey && currentPane.paneId === paneId
-          ? null
-          : { workspaceKey, paneId },
-      );
-    },
-    [workspaceKey],
-  );
-
-  const handleExplorerMaximizeAction = useCallback(
-    (action: KeyboardActionDefinition): boolean => {
-      if (action.id !== "workspace.explorer.maximize.toggle") {
-        return false;
-      }
-      const explorerPane = findPaneById(layout.root, sidePanelPaneId);
-      if (focusModeEnabled || !explorerPane || explorerPane.hidden === true) {
-        return true;
-      }
-      onFocusPane(explorerPane.id);
-      handleTogglePaneMaximized(explorerPane.id);
-      return true;
-    },
-    [sidePanelPaneId, focusModeEnabled, handleTogglePaneMaximized, layout.root, onFocusPane],
-  );
-
-  useKeyboardActionHandler({
-    handlerId: `workspace-explorer-maximize:${workspaceKey}`,
-    actions: ["workspace.explorer.maximize.toggle"] as const,
-    enabled: isWorkspaceFocused,
-    priority: 100,
-    isActive: () => true,
-    handle: handleExplorerMaximizeAction,
-  });
-
   const sensors = useSensors(
     useSensor(PointerSensor, {
       activationConstraint: {
@@ -475,15 +366,122 @@ export function SplitContainer({
   );
 
   const panesById = useMemo(() => collectPanesById(layout.root), [layout.root]);
+  const explorerSidebarPane = useMemo(
+    () => findPaneById(layout.root, explorerSidebarPaneId),
+    [layout.root, explorerSidebarPaneId],
+  );
+  const mainRoot = useMemo(
+    () => removePaneFromSplitTree(layout.root, explorerSidebarPaneId),
+    [layout.root, explorerSidebarPaneId],
+  );
+  const workspaceHasSplits = mainRoot?.kind === "group";
+  useEffect(() => {
+    if (
+      maximizedPaneId &&
+      (focusModeEnabled ||
+        !workspaceHasSplits ||
+        !mainRoot ||
+        !splitNodeContainsPane(mainRoot, maximizedPaneId))
+    ) {
+      setMaximizedPane(null);
+    }
+  }, [focusModeEnabled, mainRoot, maximizedPaneId, workspaceHasSplits]);
+  const handleTogglePaneMaximized = useCallback(
+    (paneId: string) => {
+      setMaximizedPane((current) =>
+        current?.workspaceKey === workspaceKey && current.paneId === paneId
+          ? null
+          : { workspaceKey, paneId },
+      );
+    },
+    [workspaceKey],
+  );
+  const handleCreateExplorerTab = useCallback(
+    () => onCreateNewTab({ paneId: explorerSidebarPaneId ?? undefined }),
+    [explorerSidebarPaneId, onCreateNewTab],
+  );
+  const handleMoveExplorerTabToMain = useCallback(
+    (tabId: string) => {
+      if (layout.focusedPaneId) {
+        onMoveTabToPane(tabId, layout.focusedPaneId);
+      }
+    },
+    [layout.focusedPaneId, onMoveTabToPane],
+  );
   const splitRoot = useMemo(
     () =>
       resolveSplitContainerRoot({
-        root: layout.root,
+        root: mainRoot ?? createDefaultLayout().root,
         focusedPaneId: layout.focusedPaneId,
         focusModeEnabled,
-        maximizedPaneId,
       }),
-    [focusModeEnabled, layout.focusedPaneId, layout.root, maximizedPaneId],
+    [focusModeEnabled, layout.focusedPaneId, mainRoot],
+  );
+  const storedExplorerSidebarWidth = useWorkspaceLayoutStore(
+    (state) => state.explorerSidebarWidthByWorkspace[workspaceKey],
+  );
+  const resizeExplorerSidebar = useWorkspaceLayoutStore((state) => state.resizeExplorerSidebar);
+  const [workspaceShellWidth, setWorkspaceShellWidth] = useState(0);
+  const [previewExplorerSidebarWidth, setPreviewExplorerSidebarWidth] = useState<number | null>(
+    null,
+  );
+  const requestedExplorerSidebarWidth = previewExplorerSidebarWidth ?? storedExplorerSidebarWidth;
+  const explorerSidebarWidth = resolveExplorerSidebarWidth({
+    requestedWidth: requestedExplorerSidebarWidth,
+    containerWidth: workspaceShellWidth,
+  });
+  const explorerSidebarDockSizes = useMemo(
+    () =>
+      resolveExplorerSidebarDockSizes({
+        requestedWidth: requestedExplorerSidebarWidth,
+        containerWidth: workspaceShellWidth,
+      }),
+    [requestedExplorerSidebarWidth, workspaceShellWidth],
+  );
+  const renderExplorerSidebarDock = Boolean(
+    !focusModeEnabled && explorerSidebarPane && explorerSidebarPane.hidden !== true,
+  );
+  const mainColumnWindowChromeCorners = renderExplorerSidebarDock
+    ? removeWindowChromeCorner(inheritedWindowChromeCorners, "top-right")
+    : inheritedWindowChromeCorners;
+  const mainColumnStyle = styles.mainColumn;
+  const explorerSidebarDockStyle = useMemo(
+    () => [styles.explorerSidebarDock, { width: explorerSidebarWidth }],
+    [explorerSidebarWidth],
+  );
+  const handleWorkspaceShellLayout = useCallback((event: LayoutChangeEvent) => {
+    const nextWidth = event.nativeEvent.layout.width;
+    setWorkspaceShellWidth((current) => (current === nextWidth ? current : nextWidth));
+  }, []);
+  const previewExplorerSidebarResize = useCallback(
+    (_groupId: string, sizes: number[]) => {
+      const nextRatio = sizes[1];
+      if (nextRatio !== undefined) {
+        setPreviewExplorerSidebarWidth(
+          resolveExplorerSidebarWidth({
+            requestedWidth: nextRatio * workspaceShellWidth,
+            containerWidth: workspaceShellWidth,
+          }),
+        );
+      }
+    },
+    [workspaceShellWidth],
+  );
+  const commitExplorerSidebarResize = useCallback(
+    (_groupId: string, sizes: number[]) => {
+      setPreviewExplorerSidebarWidth(null);
+      const nextRatio = sizes[1];
+      if (nextRatio !== undefined) {
+        resizeExplorerSidebar(
+          workspaceKey,
+          resolveExplorerSidebarWidth({
+            requestedWidth: nextRatio * workspaceShellWidth,
+            containerWidth: workspaceShellWidth,
+          }),
+        );
+      }
+    },
+    [resizeExplorerSidebar, workspaceKey, workspaceShellWidth],
   );
   const renderRoot = useMemo(() => wrapRootPaneForStableMount(splitRoot.root), [splitRoot.root]);
   const handleDragStart = useCallback((event: DragStartEvent) => {
@@ -521,6 +519,21 @@ export function SplitContainer({
         return;
       }
 
+      const activeTab = uiTabs.find((tab) => tab.tabId === activeData.tabId) ?? null;
+      const destinationPaneId =
+        overData?.kind === "workspace-tab" || overData?.kind === "split-pane-drop"
+          ? overData.paneId
+          : null;
+      const destinationHost = destinationPaneId === explorerSidebarPaneId ? "explorer" : "main";
+      if (
+        !activeTab ||
+        !panelTargetSupportsHost(normalizedServerId, activeTab.target, destinationHost)
+      ) {
+        setDropPreview(null);
+        setTabDropPreview(null);
+        return;
+      }
+
       if (overData?.kind === "workspace-tab") {
         const preview = computeTabOverDropPreview({
           activeData,
@@ -542,7 +555,7 @@ export function SplitContainer({
 
       setDropPreview(computePaneOverDropPreview({ overData, rects }));
     },
-    [panesById, uiTabs],
+    [normalizedServerId, panesById, explorerSidebarPaneId, uiTabs],
   );
 
   const applyTabDropEnd = useCallback(
@@ -639,47 +652,90 @@ export function SplitContainer({
         onDragCancel={handleDragCancel}
         onDragEnd={handleDragEnd}
       >
-        {splitRoot.usesFallbackStrip && <WindowChromeSafeArea placement="below" />}
-        <SplitNodeView
-          node={renderRoot}
-          workspaceKey={workspaceKey}
-          uiTabs={uiTabs}
-          focusedPaneId={layout.focusedPaneId}
-          sidePanelPaneId={sidePanelPaneId}
-          maximizedPaneId={maximizedPaneId}
-          onTogglePaneMaximized={handleTogglePaneMaximized}
-          normalizedServerId={normalizedServerId}
-          normalizedWorkspaceId={normalizedWorkspaceId}
-          isWorkspaceFocused={isWorkspaceFocused}
-          hoveredCloseTabKey={hoveredCloseTabKey}
-          setHoveredCloseTabKey={setHoveredCloseTabKey}
-          closingTabIds={closingTabIds}
-          onNavigateTab={onNavigateTab}
-          onCloseTab={onCloseTab}
-          onCopyResumeCommand={onCopyResumeCommand}
-          onCopyAgentId={onCopyAgentId}
-          onCopyTerminalId={onCopyTerminalId}
-          onCopyFilePath={onCopyFilePath}
-          onReloadAgent={onReloadAgent}
-          onRenameTab={onRenameTab}
-          onCloseTabsToLeft={onCloseTabsToLeft}
-          onCloseTabsToRight={onCloseTabsToRight}
-          onCloseOtherTabs={onCloseOtherTabs}
-          onCreateNewTab={onCreateNewTab}
-          buildPaneContentModel={buildPaneContentModel}
-          onFocusPane={onFocusPane}
-          onSplitPane={onSplitPane}
-          onSplitPaneEmpty={onSplitPaneEmpty}
-          onResizeSplit={onResizeSplit}
-          onReorderTabsInPane={onReorderTabsInPane}
-          activeDragTabId={activeDragTabId}
-          showDropZones={activeDragTabId !== null}
-          dropPreview={dropPreview}
-          tabDropPreview={tabDropPreview}
-          windowChromeCorners={splitRoot.usesFallbackStrip ? "none" : windowChromeCorners}
-          focusModeEnabled={focusModeEnabled}
-          onExitFocusMode={onExitFocusMode}
-        />
+        <View style={styles.workspaceShell} onLayout={handleWorkspaceShellLayout}>
+          <WindowChromeRegion corners={mainColumnWindowChromeCorners}>
+            <View style={mainColumnStyle}>
+              {renderMainHeader?.()}
+              {splitRoot.usesFallbackStrip && <WindowChromeSafeArea placement="below" />}
+              {renderRoot ? (
+                <SplitNodeView
+                  node={renderRoot}
+                  workspaceKey={workspaceKey}
+                  uiTabs={uiTabs}
+                  focusedPaneId={layout.focusedPaneId}
+                  normalizedServerId={normalizedServerId}
+                  normalizedWorkspaceId={normalizedWorkspaceId}
+                  isWorkspaceFocused={isWorkspaceFocused}
+                  hoveredCloseTabKey={hoveredCloseTabKey}
+                  setHoveredCloseTabKey={setHoveredCloseTabKey}
+                  closingTabIds={closingTabIds}
+                  onNavigateTab={onNavigateTab}
+                  onCloseTab={onCloseTab}
+                  onCopyResumeCommand={onCopyResumeCommand}
+                  onCopyAgentId={onCopyAgentId}
+                  onCopyTerminalId={onCopyTerminalId}
+                  onCopyFilePath={onCopyFilePath}
+                  onReloadAgent={onReloadAgent}
+                  onRenameTab={onRenameTab}
+                  onCloseTabsToLeft={onCloseTabsToLeft}
+                  onCloseTabsToRight={onCloseTabsToRight}
+                  onCloseOtherTabs={onCloseOtherTabs}
+                  onCreateNewTab={onCreateNewTab}
+                  buildPaneContentModel={buildPaneContentModel}
+                  onFocusPane={onFocusPane}
+                  onSplitPane={onSplitPane}
+                  onSplitPaneEmpty={onSplitPaneEmpty}
+                  onResizeSplit={onResizeSplit}
+                  onReorderTabsInPane={onReorderTabsInPane}
+                  activeDragTabId={activeDragTabId}
+                  showDropZones={activeDragTabId !== null}
+                  dropPreview={dropPreview}
+                  tabDropPreview={tabDropPreview}
+                  windowChromeCorners={splitRoot.usesFallbackStrip ? "none" : windowChromeCorners}
+                  maximizedPaneId={maximizedPaneId}
+                  workspaceHasSplits={workspaceHasSplits}
+                  onTogglePaneMaximized={handleTogglePaneMaximized}
+                  focusModeEnabled={focusModeEnabled}
+                  onExitFocusMode={onExitFocusMode}
+                />
+              ) : null}
+            </View>
+          </WindowChromeRegion>
+          {renderExplorerSidebarDock && explorerSidebarPane ? (
+            <>
+              <ResizeHandle
+                testID="workspace-explorer-sidebar-resize-handle"
+                direction="horizontal"
+                hitAreaAlignment="end"
+                groupId={EXPLORER_SIDEBAR_RESIZE_GROUP_ID}
+                index={0}
+                sizes={explorerSidebarDockSizes}
+                containerSize={workspaceShellWidth}
+                onPreviewResizeSplit={previewExplorerSidebarResize}
+                onResizeSplit={commitExplorerSidebarResize}
+              />
+              <View style={explorerSidebarDockStyle}>
+                <ExplorerSidebarDock
+                  pane={explorerSidebarPane}
+                  uiTabs={uiTabs}
+                  normalizedServerId={normalizedServerId}
+                  normalizedWorkspaceId={normalizedWorkspaceId}
+                  isWorkspaceFocused={isWorkspaceFocused}
+                  closingTabIds={closingTabIds}
+                  onSelectTab={onSelectTabInPane}
+                  onCloseTab={onCloseTab}
+                  onCreateNewTab={handleCreateExplorerTab}
+                  onMoveTabToMain={handleMoveExplorerTabToMain}
+                  buildPaneContentModel={buildPaneContentModel}
+                  onReorderTabsInPane={onReorderTabsInPane}
+                  activeDragTabId={activeDragTabId}
+                  tabDropPreview={tabDropPreview}
+                  headerAction={renderExplorerSidebarHeaderAction?.()}
+                />
+              </View>
+            </>
+          ) : null}
+        </View>
         <DragOverlay dropAnimation={null}>
           {activeDragTabId ? (
             <DragOverlayTabChip
@@ -825,16 +881,35 @@ function SplitGroupChild({
  * hidden pane give its space back instead of just going invisible. The stored `sizes` are never
  * touched, so unhiding restores the width the user dragged to.
  */
-function resolveVisibleGroupFlex(children: SplitNode[], sizes: number[]): number[] {
+function resolveVisibleGroupFlex(
+  children: SplitNode[],
+  sizes: number[],
+  maximizedPaneId: string | null,
+): number[] {
   const visibleTotal = children.reduce(
-    (total, child, index) => (isSplitNodeHidden(child) ? total : total + (sizes[index] ?? 1)),
+    (total, child, index) =>
+      isSplitNodeHiddenForPresentation(child, maximizedPaneId)
+        ? total
+        : total + (sizes[index] ?? 1),
     0,
   );
   if (visibleTotal <= 0) {
     return children.map(() => 0);
   }
   return children.map((child, index) =>
-    isSplitNodeHidden(child) ? 0 : (sizes[index] ?? 1) / visibleTotal,
+    isSplitNodeHiddenForPresentation(child, maximizedPaneId)
+      ? 0
+      : (sizes[index] ?? 1) / visibleTotal,
+  );
+}
+
+function isSplitNodeHiddenForPresentation(
+  node: SplitNode,
+  maximizedPaneId: string | null,
+): boolean {
+  return (
+    isSplitNodeHidden(node) ||
+    Boolean(maximizedPaneId && !splitNodeContainsPane(node, maximizedPaneId))
   );
 }
 
@@ -850,9 +925,6 @@ function SplitNodeView({
   workspaceKey,
   uiTabs,
   focusedPaneId,
-  sidePanelPaneId,
-  maximizedPaneId,
-  onTogglePaneMaximized,
   normalizedServerId,
   normalizedWorkspaceId,
   isWorkspaceFocused,
@@ -882,9 +954,13 @@ function SplitNodeView({
   dropPreview,
   tabDropPreview,
   windowChromeCorners,
+  maximizedPaneId,
+  workspaceHasSplits,
+  onTogglePaneMaximized,
   focusModeEnabled,
   onExitFocusMode,
 }: SplitNodeViewProps) {
+  const [groupContainerSize, setGroupContainerSize] = useState(0);
   const groupId = node.kind === "group" ? node.group.id : null;
   const groupDirection = node.kind === "group" ? node.group.direction : null;
 
@@ -895,8 +971,8 @@ function SplitNodeView({
   const groupSizes =
     storedGroupSizes ?? (node.kind === "group" ? node.group.sizes : EMPTY_SPLIT_SIZES);
   const visibleFlex = useMemo(
-    () => resolveVisibleGroupFlex(groupChildren, groupSizes),
-    [groupChildren, groupSizes],
+    () => resolveVisibleGroupFlex(groupChildren, groupSizes, maximizedPaneId),
+    [groupChildren, groupSizes, maximizedPaneId],
   );
   const resizeFlex = useSharedValue(visibleFlex);
   useEffect(() => {
@@ -904,9 +980,19 @@ function SplitNodeView({
   }, [resizeFlex, visibleFlex]);
   const previewResizeSplit = useCallback(
     (_groupId: string, sizes: number[]) => {
-      resizeFlex.value = resolveVisibleGroupFlex(groupChildren, sizes);
+      resizeFlex.value = resolveVisibleGroupFlex(groupChildren, sizes, maximizedPaneId);
     },
-    [groupChildren, resizeFlex],
+    [groupChildren, maximizedPaneId, resizeFlex],
+  );
+  const handleGroupLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      const nextSize =
+        groupDirection === "horizontal"
+          ? event.nativeEvent.layout.width
+          : event.nativeEvent.layout.height;
+      setGroupContainerSize((current) => (current === nextSize ? current : nextSize));
+    },
+    [groupDirection],
   );
 
   const groupStyle = useMemo(
@@ -919,15 +1005,14 @@ function SplitNodeView({
 
   if (node.kind === "pane") {
     return (
-      <RetainedPanel active={node.pane.hidden !== true}>
+      <RetainedPanel
+        active={node.pane.hidden !== true && (!maximizedPaneId || node.pane.id === maximizedPaneId)}
+      >
         <WindowChromeRegion corners={windowChromeCorners}>
           <SplitPaneView
             pane={node.pane}
             uiTabs={uiTabs}
             isFocused={node.pane.id === focusedPaneId}
-            sidePanelPaneId={sidePanelPaneId}
-            maximizedPaneId={maximizedPaneId}
-            onTogglePaneMaximized={onTogglePaneMaximized}
             normalizedServerId={normalizedServerId}
             normalizedWorkspaceId={normalizedWorkspaceId}
             isWorkspaceFocused={isWorkspaceFocused}
@@ -955,6 +1040,9 @@ function SplitNodeView({
             showDropZones={showDropZones}
             dropPreview={dropPreview}
             tabDropPreview={tabDropPreview}
+            maximizedPaneId={maximizedPaneId}
+            workspaceHasSplits={workspaceHasSplits}
+            onTogglePaneMaximized={onTogglePaneMaximized}
             focusModeEnabled={focusModeEnabled}
             onExitFocusMode={onExitFocusMode}
           />
@@ -964,18 +1052,19 @@ function SplitNodeView({
   }
 
   return (
-    <View style={groupStyle}>
+    <View style={groupStyle} onLayout={handleGroupLayout}>
       {node.group.children.map((child, index) => (
         <Fragment key={getNodeKey(child)}>
-          <SplitGroupChild resizeFlex={resizeFlex} index={index} hidden={isSplitNodeHidden(child)}>
+          <SplitGroupChild
+            resizeFlex={resizeFlex}
+            index={index}
+            hidden={isSplitNodeHiddenForPresentation(child, maximizedPaneId)}
+          >
             <SplitNodeView
               node={child}
               workspaceKey={workspaceKey}
               uiTabs={uiTabs}
               focusedPaneId={focusedPaneId}
-              sidePanelPaneId={sidePanelPaneId}
-              maximizedPaneId={maximizedPaneId}
-              onTogglePaneMaximized={onTogglePaneMaximized}
               normalizedServerId={normalizedServerId}
               normalizedWorkspaceId={normalizedWorkspaceId}
               isWorkspaceFocused={isWorkspaceFocused}
@@ -1005,19 +1094,23 @@ function SplitNodeView({
               dropPreview={dropPreview}
               tabDropPreview={tabDropPreview}
               windowChromeCorners={windowChromeCorners}
+              maximizedPaneId={maximizedPaneId}
+              workspaceHasSplits={workspaceHasSplits}
+              onTogglePaneMaximized={onTogglePaneMaximized}
               focusModeEnabled={focusModeEnabled}
               onExitFocusMode={onExitFocusMode}
             />
           </SplitGroupChild>
           {index < node.group.children.length - 1 &&
-          !isSplitNodeHidden(child) &&
-          !isSplitNodeHidden(node.group.children[index + 1]) ? (
+          !isSplitNodeHiddenForPresentation(child, maximizedPaneId) &&
+          !isSplitNodeHiddenForPresentation(node.group.children[index + 1], maximizedPaneId) ? (
             <ResizeHandle
               testID="workspace-split-resize-handle"
               direction={node.group.direction}
               groupId={node.group.id}
               index={index}
               sizes={groupSizes}
+              containerSize={groupContainerSize}
               onPreviewResizeSplit={previewResizeSplit}
               onResizeSplit={onResizeSplit}
             />
@@ -1053,19 +1146,18 @@ function SplitPaneView({
   buildPaneContentModel,
   onFocusPane,
   onSplitPane: _onSplitPane,
-  onSplitPaneEmpty: _onSplitPaneEmpty,
+  onSplitPaneEmpty,
   onReorderTabsInPane,
   activeDragTabId,
   showDropZones,
   dropPreview,
   tabDropPreview,
-  sidePanelPaneId,
   maximizedPaneId,
+  workspaceHasSplits,
   onTogglePaneMaximized,
   focusModeEnabled,
   onExitFocusMode,
 }: SplitPaneViewProps) {
-  const { theme: _theme } = useUnistyles();
   const paneRef = useRef<View | null>(null);
   const stableOnFocusPane = useStableEvent(onFocusPane);
   const paneState = useMemo(
@@ -1077,24 +1169,7 @@ function SplitPaneView({
     [pane, uiTabs],
   );
   const paneTabs = useMemo(() => paneState.tabs.map((tab) => tab.descriptor), [paneState.tabs]);
-  const paneTabIds = useMemo(() => paneTabs.map((tab) => tab.tabId), [paneTabs]);
-  const modifiedPaneTabIds = useModifiedPanelTabIds({
-    serverId: normalizedServerId,
-    workspaceId: normalizedWorkspaceId,
-    tabIds: paneTabIds,
-  });
-  const tabDescriptorMap = useStableTabDescriptorMap(paneTabs);
   const activeTabDescriptor = paneState.activeTab?.descriptor ?? null;
-  const { mountedTabIds } = useMountedTabSet({
-    activeTabId: activeTabDescriptor?.tabId ?? null,
-    allTabIds: paneTabIds,
-    retainedTabIds: modifiedPaneTabIds,
-    cap: 3,
-  });
-  const mountedPaneTabIds = useMemo(
-    () => paneTabIds.filter((tabId) => mountedTabIds.has(tabId)),
-    [mountedTabIds, paneTabIds],
-  );
   const desktopTabRowItems = useMemo<WorkspaceDesktopTabRowItem[]>(
     () =>
       paneTabs.map((tab) => ({
@@ -1162,7 +1237,15 @@ function SplitPaneView({
     },
     [onReorderTabsInPane, paneId],
   );
-  const handleToggleMaximized = useCallback(
+  const handleSplitRight = useCallback(
+    () => onSplitPaneEmpty({ targetPaneId: paneId, position: "right" }),
+    [onSplitPaneEmpty, paneId],
+  );
+  const handleSplitDown = useCallback(
+    () => onSplitPaneEmpty({ targetPaneId: paneId, position: "bottom" }),
+    [onSplitPaneEmpty, paneId],
+  );
+  const handleTogglePaneMaximized = useCallback(
     () => onTogglePaneMaximized(paneId),
     [onTogglePaneMaximized, paneId],
   );
@@ -1172,7 +1255,7 @@ function SplitPaneView({
         ref={paneRef}
         collapsable={false}
         style={styles.pane}
-        testID={pane.id === sidePanelPaneId ? "workspace-side-panel" : `workspace-pane-${pane.id}`}
+        testID={`workspace-pane-${pane.id}`}
       >
         <WindowChromeSafeArea placement="inline" style={styles.paneTabs}>
           <TitlebarDragRegion />
@@ -1201,34 +1284,29 @@ function SplitPaneView({
             tabDropPreviewIndex={
               tabDropPreview?.paneId === pane.id ? tabDropPreview.indicatorIndex : null
             }
-            showPaneMaximizeAction={pane.id === sidePanelPaneId && !focusModeEnabled}
-            paneMaximized={pane.id === maximizedPaneId}
-            onTogglePaneMaximized={handleToggleMaximized}
+            showPaneSplitActions={!focusModeEnabled}
+            showPaneMaximizeAction={workspaceHasSplits && !focusModeEnabled}
+            paneMaximized={paneId === maximizedPaneId}
+            onTogglePaneMaximized={handleTogglePaneMaximized}
+            onSplitRight={handleSplitRight}
+            onSplitDown={handleSplitDown}
             focusModeEnabled={Boolean(focusModeEnabled)}
             onExitFocusMode={onExitFocusMode}
           />
         </WindowChromeSafeArea>
 
         <View style={styles.paneContent}>
-          {mountedPaneTabIds.map((tabId) => {
-            const tabDescriptor = tabDescriptorMap.get(tabId);
-            if (!tabDescriptor) {
-              return null;
-            }
-
-            return (
-              <MountedTabSlot
-                key={tabId}
-                tabDescriptor={tabDescriptor}
-                isVisible={tabId === activeTabDescriptor?.tabId}
-                isWorkspaceFocused={isWorkspaceFocused}
-                isPaneFocused={isFocused && tabId === activeTabDescriptor?.tabId}
-                paneId={pane.id}
-                onFocusPane={stableOnFocusPane}
-                buildPaneContentModel={buildPaneContentModel}
-              />
-            );
-          })}
+          <WorkspacePanelHost
+            paneId={pane.id}
+            tabs={paneTabs}
+            activeTabId={activeTabDescriptor?.tabId ?? null}
+            normalizedServerId={normalizedServerId}
+            normalizedWorkspaceId={normalizedWorkspaceId}
+            isWorkspaceFocused={isWorkspaceFocused}
+            isPaneFocused={isFocused}
+            onFocusPane={stableOnFocusPane}
+            buildPaneContentModel={buildPaneContentModel}
+          />
           <SplitDropZone paneId={pane.id} active={showDropZones} preview={dropPreview} />
         </View>
       </View>
@@ -1274,7 +1352,53 @@ function wrapRootPaneForStableMount(node: SplitNode): SplitNode {
   };
 }
 
+function removePaneFromSplitTree(node: SplitNode, paneId: string | null): SplitNode | null {
+  if (!paneId) {
+    return node;
+  }
+  if (node.kind === "pane") {
+    return node.pane.id === paneId ? null : node;
+  }
+
+  const children = node.group.children.flatMap((child) => {
+    const nextChild = removePaneFromSplitTree(child, paneId);
+    return nextChild ? [nextChild] : [];
+  });
+  if (children.length === 0) {
+    return null;
+  }
+  if (children.length === 1) {
+    return children[0] ?? null;
+  }
+  return {
+    kind: "group",
+    group: {
+      ...node.group,
+      children,
+      sizes: children.map(() => 1 / children.length),
+    },
+  };
+}
+
 const styles = StyleSheet.create((theme) => ({
+  workspaceShell: {
+    flex: 1,
+    minWidth: 0,
+    minHeight: 0,
+    flexDirection: "row",
+  },
+  mainColumn: {
+    flex: 1,
+    flexShrink: 1,
+    minWidth: 0,
+    minHeight: 0,
+  },
+  explorerSidebarDock: {
+    flexShrink: 0,
+    minWidth: 240,
+    minHeight: 0,
+    backgroundColor: theme.colors.surfaceSidebar,
+  },
   group: {
     flex: 1,
     minWidth: 0,
diff --git a/packages/app/src/components/tree-primitives.tsx b/packages/app/src/components/tree-primitives.tsx
index b1da728ada..378eb2c651 100644
--- a/packages/app/src/components/tree-primitives.tsx
+++ b/packages/app/src/components/tree-primitives.tsx
@@ -18,7 +18,8 @@ export const WORKSPACE_TREE_ICON_LABEL_GAP = SPACING[2];
  * The extra 2px is optical: text ink ends inside its layout box, while the
  * header icons' strokes extend to theirs.
  */
-export const WORKSPACE_FILE_ROW_TRAILING_PADDING = SPACING[4] + 2;
+/** Shared painted-edge rail for pane headers, toolbars, and tree/diff rows. */
+export const WORKSPACE_PANE_TRAILING_GLYPH_RAIL = SPACING[2];
 
 /** Left padding for a row in either workspace tree. */
 export function treeRowPaddingLeft(depth: number): number {
@@ -49,7 +50,7 @@ export const workspaceTreeRowStyles = StyleSheet.create((theme: Theme) => ({
     alignItems: "center",
     justifyContent: "space-between",
     paddingVertical: WORKSPACE_FILE_ROW_VERTICAL_PADDING,
-    paddingRight: WORKSPACE_FILE_ROW_TRAILING_PADDING,
+    paddingRight: WORKSPACE_PANE_TRAILING_GLYPH_RAIL,
   },
   active: {
     backgroundColor: theme.colors.surfaceSidebarHover,
diff --git a/packages/app/src/components/tree-rail-toggle.tsx b/packages/app/src/components/tree-rail-toggle.tsx
index b88713d741..2a1de98fa1 100644
--- a/packages/app/src/components/tree-rail-toggle.tsx
+++ b/packages/app/src/components/tree-rail-toggle.tsx
@@ -1,18 +1,10 @@
-import { useMemo } from "react";
-import { Pressable, Text } from "react-native";
 import { useTranslation } from "react-i18next";
 import { FolderTree } from "lucide-react-native";
-import { StyleSheet, withUnistyles } from "react-native-unistyles";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
-import {
-  paneContentToolbarIconSize,
-  paneContentToolbarIconButtonStyle,
-} from "@/components/ui/pane-content-toolbar";
-import type { Theme } from "@/styles/theme";
+import { withUnistyles } from "react-native-unistyles";
+import { paneContentToolbarIconSize, ToolbarButton } from "@/components/ui/pane-content-toolbar";
+import { extraMutedIconColorMapping } from "@/components/ui/icon-button-chrome";
 
 const ThemedFolderTree = withUnistyles(FolderTree);
-const iconColorMapping = (theme: Theme) => ({ color: theme.colors.foregroundMuted });
-
 /**
  * Opens and closes a `TreeRail`. Every panel that owns a tree rail uses this one
  * button so the affordance reads the same wherever the rail appears; only the
@@ -29,37 +21,18 @@ export function TreeRailToggle({
 }) {
   const { t } = useTranslation();
   const label = t(visible ? "workspace.tree.hideFolderTree" : "workspace.tree.showFolderTree");
-  const buttonStyle = useMemo(
-    () => (state: { hovered?: boolean; pressed: boolean }) =>
-      paneContentToolbarIconButtonStyle(state, visible),
-    [visible],
-  );
-  const accessibilityState = useMemo(() => ({ selected: visible }), [visible]);
   return (
-    <Tooltip delayDuration={300}>
-      <TooltipTrigger asChild>
-        <Pressable
-          accessibilityRole="button"
-          accessibilityLabel={label}
-          accessibilityState={accessibilityState}
-          aria-selected={visible}
-          testID={testID}
-          style={buttonStyle}
-          onPress={onToggle}
-        >
-          <ThemedFolderTree size={paneContentToolbarIconSize(false)} uniProps={iconColorMapping} />
-        </Pressable>
-      </TooltipTrigger>
-      <TooltipContent side="bottom">
-        <Text style={styles.tooltipText}>{label}</Text>
-      </TooltipContent>
-    </Tooltip>
+    <ToolbarButton
+      label={label}
+      selected={visible}
+      aria-selected={visible}
+      testID={testID}
+      onPress={onToggle}
+    >
+      <ThemedFolderTree
+        size={paneContentToolbarIconSize(false)}
+        uniProps={extraMutedIconColorMapping}
+      />
+    </ToolbarButton>
   );
 }
-
-const styles = StyleSheet.create((theme) => ({
-  tooltipText: {
-    fontSize: theme.fontSize.sm,
-    color: theme.colors.foreground,
-  },
-}));
diff --git a/packages/app/src/components/ui/context-menu.tsx b/packages/app/src/components/ui/context-menu.tsx
index 5a0dbe30a7..86dd7e978b 100644
--- a/packages/app/src/components/ui/context-menu.tsx
+++ b/packages/app/src/components/ui/context-menu.tsx
@@ -13,6 +13,7 @@ import {
   type PressableProps,
   type PressableStateCallbackType,
   type StyleProp,
+  type ViewProps,
   type ViewStyle,
 } from "react-native";
 import { isNative, isWeb } from "@/constants/platform";
@@ -98,6 +99,7 @@ type TriggerStyleProp = StyleProp<ViewStyle> | ((state: MenuTriggerState) => Sty
 
 export function ContextMenuTrigger({
   children,
+  contextOnly = false,
   disabled,
   highlightStyle,
   style,
@@ -118,6 +120,7 @@ export function ContextMenuTrigger({
     longPressDelayMs?: number;
     onContextMenu?: (event: unknown) => void;
     triggerRef?: Ref<View | null>;
+    contextOnly?: boolean;
   }
 >): ReactElement {
   const ctx = useMenuContext("ContextMenuTrigger");
@@ -188,6 +191,25 @@ export function ContextMenuTrigger({
     [style, ctx.open],
   );
 
+  if (contextOnly) {
+    const contextOnlyStyle =
+      typeof style === "function"
+        ? style({ pressed: false, hovered: false, open: ctx.open })
+        : style;
+    return (
+      <View
+        {...(props as ViewProps)}
+        ref={handleRef}
+        collapsable={false}
+        // @ts-ignore - onContextMenu is web-only and not in RN types.
+        onContextMenu={handleContextMenu}
+        style={contextOnlyStyle}
+      >
+        {children}
+      </View>
+    );
+  }
+
   return (
     <PressHighlight
       {...props}
diff --git a/packages/app/src/components/ui/control-geometry.ts b/packages/app/src/components/ui/control-geometry.ts
index 0538fa40f7..0828e37c66 100644
--- a/packages/app/src/components/ui/control-geometry.ts
+++ b/packages/app/src/components/ui/control-geometry.ts
@@ -25,6 +25,7 @@ export interface ControlInteractionStyleMap {
 const TIGHT_CONTROL_HEIGHT = 28;
 const COMPACT_CONTROL_HEIGHT = 32;
 const FIELD_CONTROL_HEIGHT = 44;
+export const HEADER_CONTROL_HEIGHT = 26;
 const SEGMENTED_TIGHT_INSET = 2;
 const SEGMENTED_COMPACT_INSET = 2;
 const SEGMENTED_FIELD_INSET = 3;
diff --git a/packages/app/src/components/ui/horizontal-scroll-boundary.tsx b/packages/app/src/components/ui/horizontal-scroll-boundary.tsx
new file mode 100644
index 0000000000..046552787b
--- /dev/null
+++ b/packages/app/src/components/ui/horizontal-scroll-boundary.tsx
@@ -0,0 +1,115 @@
+import { useCallback, useId } from "react";
+import type { LayoutChangeEvent } from "react-native";
+import Animated, {
+  useAnimatedScrollHandler,
+  useAnimatedStyle,
+  useSharedValue,
+  type AnimatedStyle,
+} from "react-native-reanimated";
+import Svg, { Defs, LinearGradient, Rect, Stop } from "react-native-svg";
+import { StyleSheet, withUnistyles } from "react-native-unistyles";
+import type { Theme } from "@/styles/theme";
+
+const EDGE_EPSILON = 1;
+const SHADE_WIDTH = 24;
+
+function ScrollBoundaryShadeSvg({ side, color }: { side: "left" | "right"; color: string }) {
+  const gradientId = `horizontal-scroll-boundary-${side}-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+  return (
+    <Svg width="100%" height="100%" preserveAspectRatio="none">
+      <Defs>
+        <LinearGradient
+          id={gradientId}
+          x1={side === "left" ? "100%" : "0%"}
+          y1="0%"
+          x2={side === "left" ? "0%" : "100%"}
+          y2="0%"
+        >
+          <Stop offset="0%" stopColor={color} stopOpacity={0} />
+          <Stop offset="100%" stopColor={color} stopOpacity={1} />
+        </LinearGradient>
+      </Defs>
+      <Rect x="0" y="0" width="100%" height="100%" fill={`url(#${gradientId})`} />
+    </Svg>
+  );
+}
+
+const ThemedScrollBoundaryShadeSvg = withUnistyles(ScrollBoundaryShadeSvg);
+const surfaceColorMapping = (theme: Theme) => ({ color: theme.colors.surface0 });
+const sidebarColorMapping = (theme: Theme) => ({ color: theme.colors.surfaceSidebar });
+
+export function useHorizontalScrollBoundary() {
+  const offset = useSharedValue(0);
+  const viewportWidth = useSharedValue(0);
+  const contentWidth = useSharedValue(0);
+  const onLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      viewportWidth.value = event.nativeEvent.layout.width;
+    },
+    [viewportWidth],
+  );
+  const onContentSizeChange = useCallback(
+    (width: number) => {
+      contentWidth.value = width;
+    },
+    [contentWidth],
+  );
+  const onScroll = useAnimatedScrollHandler((event) => {
+    offset.value = event.contentOffset.x;
+    viewportWidth.value = event.layoutMeasurement.width;
+    contentWidth.value = event.contentSize.width;
+  });
+  const leftShadeStyle = useAnimatedStyle(() => ({
+    opacity: Number(offset.value > EDGE_EPSILON),
+  }));
+  const rightShadeStyle = useAnimatedStyle(() => ({
+    opacity: Number(offset.value + viewportWidth.value < contentWidth.value - EDGE_EPSILON),
+  }));
+  return { onLayout, onContentSizeChange, onScroll, leftShadeStyle, rightShadeStyle };
+}
+
+export function HorizontalScrollBoundaryShades({
+  visible,
+  backdrop,
+  leftStyle,
+  rightStyle,
+  testIDPrefix = "horizontal-scroll-boundary",
+}: {
+  visible: boolean;
+  backdrop: "surface" | "sidebar";
+  leftStyle: AnimatedStyle<{ opacity: number }>;
+  rightStyle: AnimatedStyle<{ opacity: number }>;
+  testIDPrefix?: string;
+}) {
+  if (!visible) return null;
+  const colorMapping = backdrop === "sidebar" ? sidebarColorMapping : surfaceColorMapping;
+  return (
+    <>
+      <Animated.View
+        pointerEvents="none"
+        testID={`${testIDPrefix}-left`}
+        style={[styles.shade, styles.left, leftStyle]}
+      >
+        <ThemedScrollBoundaryShadeSvg side="left" uniProps={colorMapping} />
+      </Animated.View>
+      <Animated.View
+        pointerEvents="none"
+        testID={`${testIDPrefix}-right`}
+        style={[styles.shade, styles.right, rightStyle]}
+      >
+        <ThemedScrollBoundaryShadeSvg side="right" uniProps={colorMapping} />
+      </Animated.View>
+    </>
+  );
+}
+
+const styles = StyleSheet.create(() => ({
+  shade: {
+    position: "absolute",
+    top: 0,
+    bottom: 1,
+    width: SHADE_WIDTH,
+  },
+  left: { left: 0 },
+  right: { right: 0 },
+}));
diff --git a/packages/app/src/components/ui/icon-button-chrome.ts b/packages/app/src/components/ui/icon-button-chrome.ts
new file mode 100644
index 0000000000..394a744e64
--- /dev/null
+++ b/packages/app/src/components/ui/icon-button-chrome.ts
@@ -0,0 +1,113 @@
+import type { StyleProp, ViewStyle } from "react-native";
+import { StyleSheet } from "react-native-unistyles";
+import { HEADER_CONTROL_HEIGHT } from "@/components/ui/control-geometry";
+import { ICON_SIZE } from "@/styles/theme";
+
+export { extraMutedIconColorMapping, mutedIconColorMapping } from "@/components/ui/icon-color";
+
+export type IconButtonChromeSize = "large" | "small";
+
+const SMALL_ICON_BUTTON_SIZE = 20;
+const COMPACT_SMALL_ICON_BUTTON_SIZE = 32;
+
+export interface IconButtonChromeState {
+  hovered?: boolean;
+  pressed?: boolean;
+  open?: boolean;
+  active?: boolean;
+}
+
+function resolveIconButtonFrame(size: IconButtonChromeSize, compact: boolean) {
+  if (size === "large") return styles.large;
+  return compact ? styles.smallCompact : styles.small;
+}
+
+interface IconButtonChromeOptions {
+  size: IconButtonChromeSize;
+  state?: IconButtonChromeState;
+  compact?: boolean;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+/** Shared hitbox and interaction chrome for icon-only header and toolbar controls. */
+export function iconButtonChromeStyle({
+  size,
+  state,
+  compact = false,
+  disabled = false,
+  style,
+}: IconButtonChromeOptions): StyleProp<ViewStyle> {
+  const highlighted = state?.active || state?.hovered || state?.pressed || state?.open;
+  return [
+    resolveIconButtonFrame(size, compact),
+    style,
+    highlighted ? styles.highlighted : null,
+    disabled ? styles.disabled : null,
+  ];
+}
+
+/** Frame-only form for non-interactive placeholders that must preserve header alignment. */
+export function iconButtonChromeFrameStyle(
+  size: IconButtonChromeSize,
+  compact = false,
+): StyleProp<ViewStyle> {
+  return resolveIconButtonFrame(size, compact);
+}
+
+export function iconButtonChromeGlyphSize(size: IconButtonChromeSize, compact = false): number {
+  if (size === "large") return ICON_SIZE.md;
+  return compact ? 18 : 14;
+}
+
+export function smallIconButtonChromeFrameSize(compact = false): number {
+  return compact ? COMPACT_SMALL_ICON_BUTTON_SIZE : SMALL_ICON_BUTTON_SIZE;
+}
+
+const styles = StyleSheet.create((theme) => ({
+  large: {
+    width: {
+      xs: 32,
+      md: HEADER_CONTROL_HEIGHT,
+    },
+    height: {
+      xs: 32,
+      md: HEADER_CONTROL_HEIGHT,
+    },
+    padding: 0,
+    borderRadius: theme.borderRadius.md,
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+    outlineWidth: 0,
+    outlineColor: "transparent",
+  },
+  small: {
+    width: SMALL_ICON_BUTTON_SIZE,
+    height: SMALL_ICON_BUTTON_SIZE,
+    padding: 0,
+    borderRadius: theme.borderRadius.md,
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+    outlineWidth: 0,
+    outlineColor: "transparent",
+  },
+  smallCompact: {
+    width: COMPACT_SMALL_ICON_BUTTON_SIZE,
+    height: COMPACT_SMALL_ICON_BUTTON_SIZE,
+    padding: 0,
+    borderRadius: theme.borderRadius.md,
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+    outlineWidth: 0,
+    outlineColor: "transparent",
+  },
+  highlighted: {
+    backgroundColor: theme.colors.interactionHighlight,
+  },
+  disabled: {
+    opacity: theme.opacity[50],
+  },
+}));
diff --git a/packages/app/src/components/ui/icon-color.ts b/packages/app/src/components/ui/icon-color.ts
new file mode 100644
index 0000000000..1093064423
--- /dev/null
+++ b/packages/app/src/components/ui/icon-color.ts
@@ -0,0 +1,9 @@
+import type { Theme } from "@/styles/theme";
+
+export const mutedIconColorMapping = (theme: Theme) => ({
+  color: theme.colors.foregroundMuted,
+});
+
+export const extraMutedIconColorMapping = (theme: Theme) => ({
+  color: theme.colors.foregroundExtraMuted,
+});
diff --git a/packages/app/src/components/ui/menu/index.ts b/packages/app/src/components/ui/menu/index.ts
index ee9c72b4a1..c2114d1593 100644
--- a/packages/app/src/components/ui/menu/index.ts
+++ b/packages/app/src/components/ui/menu/index.ts
@@ -26,6 +26,7 @@ export {
   type ActionStatus,
   type MenuItemProps,
 } from "./menu-item";
+export { MENU_ITEM_HEIGHT } from "./menu-geometry";
 export {
   useMenuContext,
   useMenuDepth,
diff --git a/packages/app/src/components/ui/menu/menu-geometry.ts b/packages/app/src/components/ui/menu/menu-geometry.ts
new file mode 100644
index 0000000000..089f4afa67
--- /dev/null
+++ b/packages/app/src/components/ui/menu/menu-geometry.ts
@@ -0,0 +1,2 @@
+/** Shared geometry for menu rows and controls that align with them. */
+export const MENU_ITEM_HEIGHT = { xs: 40, md: 28 } as const;
diff --git a/packages/app/src/components/ui/menu/menu-item.tsx b/packages/app/src/components/ui/menu/menu-item.tsx
index 40286c513a..771f8f8b1a 100644
--- a/packages/app/src/components/ui/menu/menu-item.tsx
+++ b/packages/app/src/components/ui/menu/menu-item.tsx
@@ -20,6 +20,7 @@ import { LoadingSpinner } from "@/components/ui/loading-spinner";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import type { Theme } from "@/styles/theme";
 import { MenuDepthProvider, useMenuContext } from "./menu-context";
+import { MENU_ITEM_HEIGHT } from "./menu-geometry";
 
 const ThemedCheck = withUnistyles(Check);
 const ThemedCheckCircle = withUnistyles(CheckCircle);
@@ -42,7 +43,6 @@ const successMapping = (theme: Theme) => ({ color: theme.colors.palette.green[50
  * `lineHeight` to the platform and the content outgrows `minHeight`, which then does nothing and
  * the rows drift taller again. On compact, `minHeight` leads instead and the label centres in it.
  */
-const MENU_ITEM_HEIGHT = { xs: 40, md: 28 } as const;
 const MENU_ITEM_LINE_HEIGHT = 18;
 
 /**
diff --git a/packages/app/src/components/ui/pane-content-toolbar.tsx b/packages/app/src/components/ui/pane-content-toolbar.tsx
index 8ddfad0c90..8e5be2da95 100644
--- a/packages/app/src/components/ui/pane-content-toolbar.tsx
+++ b/packages/app/src/components/ui/pane-content-toolbar.tsx
@@ -1,7 +1,24 @@
-import type { ReactNode } from "react";
-import { View, type StyleProp, type ViewStyle } from "react-native";
+import { useMemo, type ReactNode } from "react";
+import {
+  Text,
+  View,
+  type PressableProps,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} from "react-native";
 import { StyleSheet } from "react-native-unistyles";
+import { DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import { Shortcut } from "@/components/ui/shortcut";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { WORKSPACE_SECONDARY_HEADER_HEIGHT } from "@/constants/layout";
+import type { ShortcutKey } from "@/utils/format-shortcut";
+import {
+  iconButtonChromeGlyphSize,
+  iconButtonChromeStyle,
+  smallIconButtonChromeFrameSize,
+} from "@/components/ui/icon-button-chrome";
+import { WORKSPACE_PANE_TRAILING_GLYPH_RAIL } from "@/components/tree-primitives";
 
 /** Shared chrome at the boundary between a workspace pane's tabs and content. */
 export function PaneContentToolbar({
@@ -20,18 +37,144 @@ export function PaneContentToolbar({
   );
 }
 
-export function paneContentToolbarIconSize(isCompact: boolean): number {
-  return isCompact ? 18 : 14;
+/** A consistently spaced group of controls within any workspace toolbar or tab track. */
+export function ToolbarControls({
+  children,
+  style,
+  ...props
+}: ViewProps & { children: ReactNode }) {
+  return (
+    <View {...props} style={[styles.controls, style]}>
+      {children}
+    </View>
+  );
 }
 
+interface ToolbarButtonCommonProps extends Omit<
+  PressableProps,
+  "accessibilityLabel" | "accessibilityRole" | "children" | "style"
+> {
+  children: ReactNode;
+  label: string;
+  selected?: boolean;
+  compact?: boolean;
+  shortcut?: ShortcutKey[][] | null;
+  tooltipSide?: "left" | "right" | "top" | "bottom";
+  style?: StyleProp<ViewStyle>;
+}
+
+type ToolbarButtonProps = ToolbarButtonCommonProps &
+  (
+    | { kind?: "action"; onPress: NonNullable<PressableProps["onPress"]> }
+    | { kind: "menu"; onPress?: never }
+  );
+
+/**
+ * The icon action used by pane toolbars and tab tracks. It owns the hitbox,
+ * interaction states, tooltip, and action/menu trigger composition.
+ */
+export function ToolbarButton({
+  children,
+  label,
+  selected = false,
+  compact = false,
+  shortcut,
+  tooltipSide = "bottom",
+  style,
+  kind = "action",
+  onPress,
+  disabled,
+  testID,
+  ...props
+}: ToolbarButtonProps) {
+  const buttonStyle = useMemo(
+    () => (state: { hovered?: boolean; pressed: boolean; open?: boolean }) =>
+      iconButtonChromeStyle({
+        size: "small",
+        compact,
+        state: { ...state, active: selected },
+        disabled: Boolean(disabled),
+        style,
+      }),
+    [compact, disabled, selected, style],
+  );
+  const accessibilityState = useMemo(
+    () => ({ disabled: Boolean(disabled), selected }),
+    [disabled, selected],
+  );
+  const tooltip = (
+    <TooltipContent side={tooltipSide} align="center" offset={8}>
+      <View style={styles.tooltipRow}>
+        <Text style={styles.tooltipText}>{label}</Text>
+        {shortcut ? <Shortcut chord={shortcut} /> : null}
+      </View>
+    </TooltipContent>
+  );
+
+  if (kind === "menu") {
+    return (
+      <Tooltip delayDuration={300} enabledOnDesktop enabledOnMobile={false}>
+        <TooltipTrigger asChild triggerRefProp="triggerRef">
+          <DropdownMenuTrigger
+            {...props}
+            disabled={disabled}
+            testID={testID}
+            accessibilityRole="button"
+            accessibilityLabel={label}
+            accessibilityState={accessibilityState}
+            style={buttonStyle}
+          >
+            {children}
+          </DropdownMenuTrigger>
+        </TooltipTrigger>
+        {tooltip}
+      </Tooltip>
+    );
+  }
+
+  return (
+    <Tooltip delayDuration={300} enabledOnDesktop enabledOnMobile={false}>
+      <TooltipTrigger
+        {...props}
+        disabled={disabled}
+        testID={testID}
+        accessibilityRole="button"
+        accessibilityLabel={label}
+        accessibilityState={accessibilityState}
+        onPress={onPress}
+        style={buttonStyle}
+      >
+        {children}
+      </TooltipTrigger>
+      {tooltip}
+    </Tooltip>
+  );
+}
+
+export function paneContentToolbarIconSize(isCompact: boolean): number {
+  return iconButtonChromeGlyphSize("small", isCompact);
+}
+
+/** Keeps a toolbar glyph on the same trailing rail as tree-row glyphs. */
+export function paneContentToolbarTrailingPadding(isCompact: boolean): number {
+  const buttonSize = smallIconButtonChromeFrameSize(isCompact);
+  return (
+    WORKSPACE_PANE_TRAILING_GLYPH_RAIL - (buttonSize - paneContentToolbarIconSize(isCompact)) / 2
+  );
+}
+
+/** @deprecated Use `ToolbarButton`; retained while remaining pane toolbars migrate. */
 export function paneContentToolbarIconButtonStyle(
   { hovered, pressed }: { hovered?: boolean; pressed: boolean },
   selected = false,
   isCompact = false,
 ) {
   return [
-    isCompact ? styles.iconButtonCompact : styles.iconButton,
-    (selected || Boolean(hovered) || pressed) && styles.iconButtonSelected,
+    iconButtonChromeStyle({
+      size: "small",
+      compact: isCompact,
+      state: { hovered, pressed, active: selected },
+    }),
   ];
 }
 
@@ -43,23 +186,18 @@ const styles = StyleSheet.create((theme) => ({
     borderBottomColor: theme.colors.border,
     flexShrink: 0,
   },
-  iconButton: {
-    width: 24,
-    height: 24,
+  controls: {
+    flexDirection: "row",
     alignItems: "center",
-    justifyContent: "center",
-    borderRadius: theme.borderRadius.md,
-    flexShrink: 0,
+    gap: 1,
   },
-  iconButtonCompact: {
-    width: 32,
-    height: 32,
+  tooltipRow: {
+    flexDirection: "row",
     alignItems: "center",
-    justifyContent: "center",
-    borderRadius: theme.borderRadius.md,
-    flexShrink: 0,
+    gap: theme.spacing[2],
   },
-  iconButtonSelected: {
-    backgroundColor: theme.colors.surface2,
+  tooltipText: {
+    fontSize: theme.fontSize.sm,
+    color: theme.colors.popoverForeground,
   },
 }));
diff --git a/packages/app/src/components/ui/toolbar-label-trigger.tsx b/packages/app/src/components/ui/toolbar-label-trigger.tsx
new file mode 100644
index 0000000000..489a284cba
--- /dev/null
+++ b/packages/app/src/components/ui/toolbar-label-trigger.tsx
@@ -0,0 +1,109 @@
+import { forwardRef, useCallback, type ReactNode } from "react";
+import {
+  Pressable,
+  Text,
+  View,
+  type PressableProps,
+  type PressableStateCallbackType,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from "react-native";
+import { ChevronDown } from "lucide-react-native";
+import { StyleSheet, withUnistyles } from "react-native-unistyles";
+import { extraMutedIconColorMapping } from "@/components/ui/icon-button-chrome";
+
+export type ToolbarLabelTriggerState = PressableStateCallbackType & {
+  hovered?: boolean;
+  open?: boolean;
+};
+
+export function isToolbarLabelTriggerHighlighted(state: ToolbarLabelTriggerState): boolean {
+  return Boolean(state.hovered) || state.pressed || Boolean(state.open);
+}
+
+export function toolbarLabelTriggerStyle(state: ToolbarLabelTriggerState): StyleProp<ViewStyle> {
+  return [
+    toolbarLabelTriggerFrameStyle(),
+    isToolbarLabelTriggerHighlighted(state) ? styles.highlighted : null,
+  ];
+}
+
+/** Shared spacing for interactive triggers and visually aligned passive context. */
+export function toolbarLabelTriggerFrameStyle(): StyleProp<ViewStyle> {
+  return styles.trigger;
+}
+
+export function toolbarLabelTriggerTextStyle(highlighted: boolean): StyleProp<TextStyle> {
+  return [styles.label, highlighted ? styles.labelHighlighted : null];
+}
+
+/** Fixed geometry for glyphs beside labels. Text yields space; icons never do. */
+export function ToolbarLabelTriggerIcon({ children }: { children: ReactNode }) {
+  return <View style={styles.icon}>{children}</View>;
+}
+
+interface ToolbarLabelSelectTriggerProps extends Omit<PressableProps, "children" | "style"> {
+  label: string;
+  open?: boolean;
+}
+
+const ThemedChevronDown = withUnistyles(ChevronDown);
+
+/** The shared current/base branch geometry. Disabled keeps the frame but has no interaction. */
+export const ToolbarLabelSelectTrigger = forwardRef<View, ToolbarLabelSelectTriggerProps>(
+  function ToolbarLabelSelectTrigger({ label, open = false, ...props }, ref) {
+    const triggerStyle = useCallback(
+      (state: ToolbarLabelTriggerState) => toolbarLabelTriggerStyle({ ...state, open }),
+      [open],
+    );
+    return (
+      <Pressable {...props} ref={ref} style={triggerStyle}>
+        {(state) => {
+          const highlighted = isToolbarLabelTriggerHighlighted({ ...state, open });
+          return (
+            <>
+              <Text style={toolbarLabelTriggerTextStyle(highlighted)} numberOfLines={1}>
+                {label}
+              </Text>
+              <ToolbarLabelTriggerIcon>
+                <ThemedChevronDown size={12} uniProps={extraMutedIconColorMapping} />
+              </ToolbarLabelTriggerIcon>
+            </>
+          );
+        }}
+      </Pressable>
+    );
+  },
+);
+
+const styles = StyleSheet.create((theme) => ({
+  trigger: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[1],
+    minWidth: 0,
+    paddingVertical: theme.spacing[1],
+    paddingHorizontal: theme.spacing[1],
+    borderRadius: theme.borderRadius.md,
+    flexShrink: 1,
+  },
+  highlighted: {
+    backgroundColor: theme.colors.interactionHighlight,
+  },
+  label: {
+    minWidth: 0,
+    flexShrink: 1,
+    fontSize: theme.fontSize.sm,
+    color: theme.colors.foregroundMuted,
+    fontWeight: theme.fontWeight.normal,
+  },
+  labelHighlighted: {
+    color: theme.colors.foreground,
+  },
+  icon: {
+    flexShrink: 0,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+}));
diff --git a/packages/app/src/composer/draft/workspace-tab.tsx b/packages/app/src/composer/draft/workspace-tab.tsx
index a8cf37813c..dfb329f7eb 100644
--- a/packages/app/src/composer/draft/workspace-tab.tsx
+++ b/packages/app/src/composer/draft/workspace-tab.tsx
@@ -52,7 +52,8 @@ import {
   buildWorkspaceTabPersistenceKey,
   type WorkspaceDraftTabSetup,
 } from "@/workspace-tabs/model";
-import { openSidePanelView } from "@/workspace-tabs/side-panel";
+import { openPreferredWorkspaceTarget } from "@/workspace-tabs/open-beside";
+import { useSettings } from "@/hooks/use-settings";
 
 const EMPTY_PENDING_PERMISSIONS = new Map();
 const EMPTY_ONLINE_SERVER_IDS: string[] = [];
@@ -439,6 +440,7 @@ export function WorkspaceDraftAgentTab({
     workspaceId,
   });
   const draftAttachmentScopeKey = useDraftWorkspaceAttachmentScopeKey(draftId);
+  const openInSidePane = useSettings((settings) => settings.openInSidePane);
   const attachmentScopeKeys = useMemo(
     () => [draftAttachmentScopeKey, workspaceAttachmentScopeKey].filter(Boolean),
     [draftAttachmentScopeKey, workspaceAttachmentScopeKey],
@@ -451,14 +453,15 @@ export function WorkspaceDraftAgentTab({
       if (attachment.kind !== "review") {
         return;
       }
-      openSidePanelView({
+      openPreferredWorkspaceTarget({
         isCompact: isCompactFormFactor,
         workspaceKey: buildWorkspaceTabPersistenceKey({ serverId, workspaceId: workspaceId ?? "" }),
-        checkout: { serverId, cwd: attachment.attachment.cwd, isGit: true },
-        view: "changes",
+        target: { kind: "working_diff" },
+        source: "changesLinks",
+        preferences: openInSidePane,
       });
     },
-    [isCompactFormFactor, serverId, workspaceId],
+    [isCompactFormFactor, openInSidePane, serverId, workspaceId],
   );
 
   const {
diff --git a/packages/app/src/composer/focused-chat-target.ts b/packages/app/src/composer/focused-chat-target.ts
index 7ee0167d8b..615cff49a8 100644
--- a/packages/app/src/composer/focused-chat-target.ts
+++ b/packages/app/src/composer/focused-chat-target.ts
@@ -37,7 +37,7 @@ function resolveChatTab(
 /**
  * The chat a file should attach to. The focused pane answers first, then the tab it
  * came from — a file opened beside a chat belongs to that chat. Failing both, any
- * chat the user can see: standing in the Side panel looking at Changes, "add to
+ * chat the user can see: standing in the Explorer sidebar looking at Changes, "add to
  * chat" plainly means the chat in the pane next to it.
  */
 export function resolveFocusedChatTarget(input: {
diff --git a/packages/app/src/constants/layout.ts b/packages/app/src/constants/layout.ts
index 0a5b4be099..3e159041e2 100644
--- a/packages/app/src/constants/layout.ts
+++ b/packages/app/src/constants/layout.ts
@@ -27,9 +27,8 @@ export const SETTINGS_DESKTOP_SPLIT_MIN_WIDTH =
 export const DESKTOP_TRAFFIC_LIGHT_WIDTH = 78;
 export const DESKTOP_TRAFFIC_LIGHT_HEIGHT = 45;
 
-// Windows/Linux window controls (minimize/maximize/close) — top-right
-export const DESKTOP_WINDOW_CONTROLS_WIDTH = 140;
-export const DESKTOP_WINDOW_CONTROLS_HEIGHT = 48;
+// Custom desktop window controls (minimize/maximize/close) — top-right
+export const DESKTOP_WINDOW_CONTROLS_HEIGHT = HEADER_INNER_HEIGHT;
 
 export {
   getIsElectron as getIsElectronRuntime,
diff --git a/packages/app/src/desktop/browser/new-tab-requests/index.test.ts b/packages/app/src/desktop/browser/new-tab-requests/index.test.ts
index 236e290bf6..4f4204d9ca 100644
--- a/packages/app/src/desktop/browser/new-tab-requests/index.test.ts
+++ b/packages/app/src/desktop/browser/new-tab-requests/index.test.ts
@@ -10,8 +10,8 @@ function createLayoutWithBrowser(browserId: string): WorkspaceLayout {
     target: { kind: "browser", browserId },
     now: 1,
     placement: FOCUSED_PANE_PLACEMENT,
-    sidePanelPaneId: null,
-  }).layout;
+    explorerSidebarPaneId: null,
+  })!.layout;
 }
 
 describe("browser new-tab requests", () => {
diff --git a/packages/app/src/desktop/browser/panel.tsx b/packages/app/src/desktop/browser/panel.tsx
index f4c89ee215..63d11fc6eb 100644
--- a/packages/app/src/desktop/browser/panel.tsx
+++ b/packages/app/src/desktop/browser/panel.tsx
@@ -4,7 +4,7 @@ import { Globe } from "lucide-react-native";
 import invariant from "tiny-invariant";
 import { BrowserPane } from "@/desktop/browser/pane";
 import { usePaneContext, usePaneFocus } from "@/panels/pane-context";
-import type { PanelDescriptor, PanelIconProps, PanelRegistration } from "@/panels/panel-registry";
+import { definePanel, type PanelDescriptor, type PanelIconProps } from "@/panels/panel-registry";
 import { useBrowserStore } from "@/desktop/browser/store";
 import { useWorkspaceDirectory } from "@/stores/session-store-hooks";
 
@@ -71,9 +71,7 @@ function BrowserPanel() {
   );
 }
 
-export const browserPanelRegistration: PanelRegistration<"browser"> = {
-  kind: "browser",
-  resourceKey: (target) => target.browserId,
+export const browserPanelRegistration = definePanel("browser", {
   component: BrowserPanel,
   useDescriptor: useBrowserPanelDescriptor,
-};
+});
diff --git a/packages/app/src/desktop/electron/window.ts b/packages/app/src/desktop/electron/window.ts
index 2dc6c6a71a..d3a2350954 100644
--- a/packages/app/src/desktop/electron/window.ts
+++ b/packages/app/src/desktop/electron/window.ts
@@ -1,7 +1,7 @@
 import {
   getDesktopHost,
   type DesktopWindowBridge,
-  type DesktopWindowControlsOverlayUpdate,
+  type DesktopWindowChromeUpdate,
 } from "@/desktop/host";
 
 export function getDesktopWindow(): DesktopWindowBridge | null {
@@ -16,6 +16,14 @@ export function getDesktopWindow(): DesktopWindowBridge | null {
   }
 }
 
+export async function minimizeDesktopWindow(): Promise<void> {
+  await getDesktopWindow()?.minimize?.();
+}
+
+export async function closeDesktopWindow(): Promise<void> {
+  await getDesktopWindow()?.close?.();
+}
+
 export async function toggleDesktopMaximize(): Promise<void> {
   const win = getDesktopWindow();
   if (!win || typeof win.toggleMaximize !== "function") {
@@ -24,6 +32,10 @@ export async function toggleDesktopMaximize(): Promise<void> {
   await win.toggleMaximize();
 }
 
+export async function isDesktopMaximized(): Promise<boolean> {
+  return (await getDesktopWindow()?.isMaximized?.()) ?? false;
+}
+
 export async function isDesktopFullscreen(): Promise<boolean> {
   const win = getDesktopWindow();
   if (!win || typeof win.isFullscreen !== "function") {
@@ -32,13 +44,11 @@ export async function isDesktopFullscreen(): Promise<boolean> {
   return await win.isFullscreen();
 }
 
-export async function updateDesktopWindowControls(
-  update: DesktopWindowControlsOverlayUpdate,
-): Promise<void> {
+export async function updateDesktopWindowChrome(update: DesktopWindowChromeUpdate): Promise<void> {
   const win = getDesktopWindow();
-  if (!win || typeof win.updateWindowControls !== "function") {
+  if (!win || typeof win.updateChrome !== "function") {
     return;
   }
 
-  await win.updateWindowControls(update);
+  await win.updateChrome(update);
 }
diff --git a/packages/app/src/desktop/host.ts b/packages/app/src/desktop/host.ts
index 9a0031857c..8440221ec7 100644
--- a/packages/app/src/desktop/host.ts
+++ b/packages/app/src/desktop/host.ts
@@ -13,6 +13,7 @@ type BrowserAutomationExecuteResponse = Extract<
 >;
 
 export type DesktopNotificationPermission = "granted" | "denied" | "default";
+export type DesktopWindowChromeMode = "native-mac" | "custom-windows" | "custom-linux";
 
 export interface DesktopDialogAskOptions {
   title?: string;
@@ -92,19 +93,20 @@ export interface DesktopMenuBridge {
   setCapturingShortcut?: (capturing: boolean) => Promise<void>;
 }
 
-export interface DesktopWindowControlsOverlayUpdate {
-  height?: number;
+export interface DesktopWindowChromeUpdate {
   backgroundColor?: string;
-  foregroundColor?: string;
   trafficLightOffsetY?: number;
 }
 
 export interface DesktopWindowBridge {
   label?: string;
+  minimize?: () => Promise<void>;
+  close?: () => Promise<void>;
   toggleMaximize?: () => Promise<void>;
+  isMaximized?: () => Promise<boolean>;
   setFullscreen?: (fullscreen: boolean) => Promise<void>;
   isFullscreen?: () => Promise<boolean>;
-  updateWindowControls?: (update: DesktopWindowControlsOverlayUpdate) => Promise<void>;
+  updateChrome?: (update: DesktopWindowChromeUpdate) => Promise<void>;
   onResized?: <TEvent = unknown>(
     handler: (event: TEvent) => void,
   ) => Promise<() => void> | (() => void);
@@ -172,6 +174,7 @@ export interface DesktopInvokeBridge {
 
 export interface DesktopHostBridge {
   platform?: string;
+  windowChromeMode?: string;
   invoke?: DesktopInvokeBridge["invoke"];
   getPendingOpenProject?: () => Promise<string | null>;
   agentNavigation?: DesktopAgentNavigationBridge;
@@ -217,3 +220,16 @@ export function isElectronRuntimeMac(): boolean {
   const ua = navigator.userAgent;
   return ua.includes("Mac OS") || ua.includes("Macintosh");
 }
+
+export function getDesktopWindowChromeMode(): DesktopWindowChromeMode | null {
+  const host = getDesktopHost();
+  if (!host) return null;
+  const mode = host.windowChromeMode;
+  if (mode === "native-mac" || mode === "custom-windows" || mode === "custom-linux") {
+    return mode;
+  }
+  // COMPAT(windowChromeMode): added in v0.5.3; remove after 2026-11-25.
+  if (isElectronRuntimeMac()) return "native-mac";
+  if (host.platform?.toLowerCase() === "linux") return "custom-linux";
+  return "custom-windows";
+}
diff --git a/packages/app/src/desktop/window-chrome-presentation.ts b/packages/app/src/desktop/window-chrome-presentation.ts
new file mode 100644
index 0000000000..45cb5b1bf9
--- /dev/null
+++ b/packages/app/src/desktop/window-chrome-presentation.ts
@@ -0,0 +1,48 @@
+import { DESKTOP_WINDOW_CONTROLS_HEIGHT } from "@/constants/layout";
+import type { DesktopWindowChromeMode } from "@/desktop/host";
+
+export type CustomDesktopWindowChromeMode = Extract<
+  DesktopWindowChromeMode,
+  "custom-windows" | "custom-linux"
+>;
+
+export interface DesktopWindowControlsPresentation {
+  controlWidth: number;
+  railHeight: number;
+  controlHeight: number;
+  glyphSize: number;
+  glyphStrokeWidth: number;
+  hoverShape: "control" | "circle";
+}
+
+const PRESENTATION_BY_MODE: Record<
+  CustomDesktopWindowChromeMode,
+  DesktopWindowControlsPresentation
+> = {
+  "custom-windows": {
+    controlWidth: 46,
+    railHeight: DESKTOP_WINDOW_CONTROLS_HEIGHT,
+    controlHeight: DESKTOP_WINDOW_CONTROLS_HEIGHT - 1,
+    glyphSize: 16,
+    glyphStrokeWidth: 1,
+    hoverShape: "control",
+  },
+  "custom-linux": {
+    controlWidth: 36,
+    railHeight: DESKTOP_WINDOW_CONTROLS_HEIGHT,
+    controlHeight: DESKTOP_WINDOW_CONTROLS_HEIGHT - 1,
+    glyphSize: 14,
+    glyphStrokeWidth: 1.5,
+    hoverShape: "circle",
+  },
+};
+
+export function getDesktopWindowControlsPresentation(
+  mode: CustomDesktopWindowChromeMode,
+): DesktopWindowControlsPresentation {
+  return PRESENTATION_BY_MODE[mode];
+}
+
+export function getDesktopWindowControlsWidth(mode: CustomDesktopWindowChromeMode): number {
+  return getDesktopWindowControlsPresentation(mode).controlWidth * 3;
+}
diff --git a/packages/app/src/file-pane/bar.tsx b/packages/app/src/file-pane/bar.tsx
index 51569785e7..3ce1b8323f 100644
--- a/packages/app/src/file-pane/bar.tsx
+++ b/packages/app/src/file-pane/bar.tsx
@@ -7,7 +7,6 @@ import { SegmentedControl } from "@/components/ui/segmented-control";
 import type { Theme } from "@/styles/theme";
 import { FileConflictAlert, type FileConflictAlertState } from "./conflict-alert";
 import type { FileEditorStatus } from "./editor/model";
-import { FileTreeToggle } from "./tree-toggle";
 
 const ThemedSpinner = withUnistyles(LoadingSpinner);
 const spinnerMapping = (theme: Theme) => ({ color: theme.colors.foregroundMuted });
@@ -109,7 +108,6 @@ export function FilePanelBar({
               options={previewModes}
             />
           ) : null}
-          <FileTreeToggle />
         </View>
       </PaneContentToolbar>
       {conflict ? <FileConflictAlert state={conflict} /> : null}
diff --git a/packages/app/src/git/actions-split-button.tsx b/packages/app/src/git/actions-split-button.tsx
index 59df725ca7..193154b377 100644
--- a/packages/app/src/git/actions-split-button.tsx
+++ b/packages/app/src/git/actions-split-button.tsx
@@ -17,7 +17,7 @@ import { inlineUnistylesStyle } from "@/styles/unistyles-inline-style";
 import type { ShortcutKey } from "@/utils/format-shortcut";
 import type { GitAction, GitActions } from "@/git/policy";
 import { useGitActionRunner } from "@/git/use-actions";
-import { buttonControlHeight } from "@/components/ui/control-geometry";
+import { buttonControlHeight, HEADER_CONTROL_HEIGHT } from "@/components/ui/control-geometry";
 
 interface GitActionsSplitButtonProps {
   gitActions: GitActions;
@@ -152,7 +152,7 @@ export function GitActionsSplitButton({
           accessibilityLabel={t("workspace.header.actions.workspaceActions")}
         >
           <GitBranch size={16} color={theme.colors.foregroundMuted} />
-          <ChevronDown size={12} color={theme.colors.foregroundMuted} />
+          <ChevronDown size={12} color={theme.colors.foregroundExtraMuted} />
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end" testID="changes-primary-cta-menu">
           {menuOnlyActions.map((action, index) => (
@@ -176,6 +176,10 @@ export function GitActionsSplitButton({
     );
   }
 
+  if (!gitActions.primary && gitActions.secondary.length === 0 && gitActions.menu.length === 0) {
+    return null;
+  }
+
   return (
     <View style={styles.row}>
       {gitActions.primary ? (
@@ -213,7 +217,7 @@ export function GitActionsSplitButton({
                 accessibilityRole="button"
                 accessibilityLabel={t("workspace.git.actions.moreOptions")}
               >
-                <ChevronDown size={16} color={theme.colors.foregroundMuted} />
+                <ChevronDown size={16} color={theme.colors.foregroundExtraMuted} />
               </DropdownMenuTrigger>
               <DropdownMenuContent align="end" testID="changes-primary-cta-menu">
                 {gitActions.secondary.map((action, index) => (
@@ -272,27 +276,39 @@ const styles = StyleSheet.create((theme) => ({
     flexShrink: 0,
   },
   splitButton: {
-    height: buttonControlHeight.xs,
+    height: {
+      xs: buttonControlHeight.xs,
+      md: HEADER_CONTROL_HEIGHT,
+    },
     flexDirection: "row",
     alignItems: "stretch",
-    borderRadius: theme.borderRadius.lg,
+    borderRadius: theme.borderRadius.md,
     borderWidth: theme.borderWidth[1],
     borderColor: theme.colors.borderAccent,
     overflow: "hidden",
   },
   splitButtonPrimary: {
-    paddingHorizontal: theme.spacing[3],
+    paddingHorizontal: {
+      xs: theme.spacing[3],
+      md: theme.spacing[2],
+    },
     justifyContent: "center",
     position: "relative",
   },
   menuOnlyTrigger: {
-    width: 48,
-    height: buttonControlHeight.xs,
+    width: {
+      xs: 48,
+      md: 42,
+    },
+    height: {
+      xs: buttonControlHeight.xs,
+      md: HEADER_CONTROL_HEIGHT,
+    },
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
     gap: theme.spacing[1],
-    borderRadius: theme.borderRadius.lg,
+    borderRadius: theme.borderRadius.md,
     borderWidth: theme.borderWidth[1],
     borderColor: theme.colors.borderAccent,
   },
@@ -309,24 +325,36 @@ const styles = StyleSheet.create((theme) => ({
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
-    gap: theme.spacing[2],
+    gap: {
+      xs: theme.spacing[2],
+      md: theme.spacing[1],
+    },
   },
   splitButtonSpinnerOnly: {
     transform: [{ scale: 0.8 }],
   },
   splitButtonCaret: {
-    width: 28,
+    width: {
+      xs: buttonControlHeight.xs,
+      md: HEADER_CONTROL_HEIGHT,
+    },
     alignItems: "center",
     justifyContent: "center",
     borderLeftWidth: theme.borderWidth[1],
     borderLeftColor: theme.colors.borderAccent,
   },
   iconButton: {
-    width: buttonControlHeight.xs,
-    height: buttonControlHeight.xs,
+    width: {
+      xs: buttonControlHeight.xs,
+      md: HEADER_CONTROL_HEIGHT,
+    },
+    height: {
+      xs: buttonControlHeight.xs,
+      md: HEADER_CONTROL_HEIGHT,
+    },
     alignItems: "center",
     justifyContent: "center",
-    borderRadius: theme.borderRadius.lg,
+    borderRadius: theme.borderRadius.md,
   },
   overflowMenuButton: {
     marginRight: -theme.spacing[2],
diff --git a/packages/app/src/git/diff-document/document-file-header.tsx b/packages/app/src/git/diff-document/document-file-header.tsx
index c7396e1c49..e1be1171d3 100644
--- a/packages/app/src/git/diff-document/document-file-header.tsx
+++ b/packages/app/src/git/diff-document/document-file-header.tsx
@@ -37,6 +37,7 @@ export const DocumentFileHeader = memo(function DocumentFileHeader({
       onActivate={activate}
       onSelect={onSelectPath}
       onOpenFile={working?.onOpenFile}
+      onOpenToSide={working?.onOpenToSide}
       onAddToChat={working?.onAddToChat}
       onCopyPath={working?.onCopyPath}
       onCopyRelativePath={working?.onCopyRelativePath}
@@ -60,6 +61,7 @@ function documentFileHeaderPropsEqual(
     previous.mode.onFilePress === next.mode.onFilePress &&
     previous.mode.workspaceFileDragScope === next.mode.workspaceFileDragScope &&
     previous.mode.onOpenFile === next.mode.onOpenFile &&
+    previous.mode.onOpenToSide === next.mode.onOpenToSide &&
     previous.mode.onAddToChat === next.mode.onAddToChat &&
     previous.mode.onCopyPath === next.mode.onCopyPath &&
     previous.mode.onCopyRelativePath === next.mode.onCopyRelativePath &&
diff --git a/packages/app/src/git/diff-document/index.tsx b/packages/app/src/git/diff-document/index.tsx
index b83f52604f..133d678fbf 100644
--- a/packages/app/src/git/diff-document/index.tsx
+++ b/packages/app/src/git/diff-document/index.tsx
@@ -1,5 +1,6 @@
 import { useCallback, useMemo, useRef, useState } from "react";
 import { withUnistyles } from "react-native-unistyles";
+import { RenderProfile } from "@/utils/render-profiler";
 import { createDiffPalette, retainDiffPalette } from "./palette";
 import { DiffSurface } from "./surface";
 import type { DiffDocumentProps, DiffPalette } from "./types";
@@ -47,5 +48,9 @@ const StyledDiffDocument = withUnistyles(ThemedDiffDocument, (theme) => ({
 }));
 
 export function DiffDocument(props: DiffDocumentProps) {
-  return <StyledDiffDocument {...props} />;
+  return (
+    <RenderProfile id="DiffDocument">
+      <StyledDiffDocument {...props} />
+    </RenderProfile>
+  );
 }
diff --git a/packages/app/src/git/diff-document/surface.web.tsx b/packages/app/src/git/diff-document/surface.web.tsx
index 807f914fba..055a335c11 100644
--- a/packages/app/src/git/diff-document/surface.web.tsx
+++ b/packages/app/src/git/diff-document/surface.web.tsx
@@ -8,12 +8,7 @@ import { DocumentFileHeader } from "./document-file-header";
 import { hitTestDiffDocument, selectedSourceText } from "./hit-testing";
 import { retainHorizontalOffsetMapForPaths } from "./horizontal-offsets";
 import { HorizontalScroll } from "./horizontal-scroll.web";
-import {
-  buildDiffDocumentModel,
-  FILE_HEADER_HEIGHT,
-  resolveRelayoutScrollTop,
-  retainReusableModels,
-} from "./model";
+import { buildDiffDocumentModel, FILE_HEADER_HEIGHT, resolveRelayoutScrollTop } from "./model";
 import { paintWebViewport } from "./paint.web";
 import { hasPointerDragStarted } from "./pointer-gesture";
 import { createMeasuredAdvances } from "./text-measurement";
@@ -25,22 +20,20 @@ import type {
   DiffTypography,
   TextMeasurer,
 } from "./types";
+import { useDiffDocumentWorkspaceCache } from "./workspace-cache";
 
 const DEFAULT_MONO_STACK = "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace";
 const RESIZE_SETTLE_DELAY_MS = 120;
 
 export function DiffSurface(props: DiffSurfaceProps) {
   const { t } = useTranslation();
+  const workspaceCache = useDiffDocumentWorkspaceCache();
   const rootRef = useRef<HTMLDivElement>(null);
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const canvasScratchRef = useRef<HTMLCanvasElement>(null);
   const scrollRef = useRef<HTMLDivElement>(null);
   const modelRef = useRef<ReturnType<typeof buildDiffDocumentModel> | null>(null);
   const previousModelRef = useRef<ReturnType<typeof buildDiffDocumentModel> | null>(null);
-  const reusableModelRef = useRef<{
-    dependencies: readonly unknown[];
-    models: ReturnType<typeof buildDiffDocumentModel>[];
-  } | null>(null);
   const consumedFocusRef = useRef<string | null>(null);
   const scrollTopRef = useRef(0);
   const horizontalOffsetsRef = useRef(new Map<string, number>());
@@ -60,7 +53,6 @@ export function DiffSurface(props: DiffSurfaceProps) {
   const forcePaintRef = useRef(true);
   const canvasWindowRef = useRef({ top: 0, height: 0 });
   const [viewport, setViewport] = useState({ width: 0, height: 0 });
-  const [loadedTypography, setLoadedTypography] = useState<DiffTypography | null>(null);
   const [hoveredAffordance, setHoveredAffordance] = useState<{
     hit: Extract<DiffHit, { kind: "cell" }>;
     left: number;
@@ -81,10 +73,28 @@ export function DiffSurface(props: DiffSurfaceProps) {
     }),
     [family, props.displayPreferences.codeFontSize],
   );
-  const measurement = useMemo(
-    () => (loadedTypography ? createWebTextMeasurer(loadedTypography) : null),
-    [loadedTypography],
+  const typographyResource = useMemo(
+    () =>
+      workspaceCache.typography({
+        typography: desiredTypography,
+        load: async () => {
+          await Promise.all([
+            document.fonts.load(`400 ${desiredTypography.size}px ${desiredTypography.family}`),
+            document.fonts.load(`600 ${desiredTypography.size}px ${desiredTypography.family}`),
+          ]);
+          await document.fonts.ready;
+        },
+        createMeasurer: () => createWebTextMeasurer(desiredTypography),
+      }),
+    [desiredTypography, workspaceCache],
   );
+  const [readyTypographyResource, setReadyTypographyResource] = useState<ReturnType<
+    typeof workspaceCache.typography
+  > | null>(() => (typographyResource.isReady() ? typographyResource : null));
+  const loadedTypography =
+    readyTypographyResource === typographyResource ? typographyResource.typography : null;
+  const measurement =
+    readyTypographyResource === typographyResource ? typographyResource.measureText : null;
   const reviewActions = props.mode.kind === "working" ? props.mode.reviewActions : undefined;
   const model = useMemo(() => {
     if (!loadedTypography || !measurement) {
@@ -95,22 +105,7 @@ export function DiffSurface(props: DiffSurfaceProps) {
         lineHeight: desiredTypography.lineHeight,
       });
     }
-    const dependencies = [
-      props.files,
-      props.displayPreferences.layout,
-      props.displayPreferences.wrapLines,
-      viewport.width,
-      loadedTypography,
-      measurement,
-      props.palette,
-      t,
-    ] as const;
-    const previous = reusableModelRef.current;
-    const canReuse = previous?.dependencies.every(
-      (dependency, index) => dependency === dependencies[index],
-    );
-    const reuseFrom = canReuse ? previous?.models : undefined;
-    const next = buildDiffDocumentModel({
+    return workspaceCache.buildModel({
       files: props.files,
       collapsedFilePaths: props.collapsedFilePaths,
       layout: props.displayPreferences.layout,
@@ -124,13 +119,7 @@ export function DiffSurface(props: DiffSurfaceProps) {
         binary: t("workspace.git.diff.binaryFile"),
         tooLarge: t("workspace.git.diff.tooLarge"),
       },
-      reuseFrom,
     });
-    reusableModelRef.current = {
-      dependencies,
-      models: retainReusableModels(reuseFrom, next),
-    };
-    return next;
   }, [
     measurement,
     props.collapsedFilePaths,
@@ -143,6 +132,7 @@ export function DiffSurface(props: DiffSurfaceProps) {
     desiredTypography.lineHeight,
     loadedTypography,
     viewport.width,
+    workspaceCache,
   ]);
   modelRef.current = model;
 
@@ -280,18 +270,19 @@ export function DiffSurface(props: DiffSurfaceProps) {
   }, []);
   useEffect(() => {
     let cancelled = false;
-    void (async () => {
-      await Promise.all([
-        document.fonts.load(`400 ${desiredTypography.size}px ${desiredTypography.family}`),
-        document.fonts.load(`600 ${desiredTypography.size}px ${desiredTypography.family}`),
-      ]);
-      await document.fonts.ready;
-      if (!cancelled) setLoadedTypography(desiredTypography);
-    })();
+    if (typographyResource.isReady()) {
+      setReadyTypographyResource(typographyResource);
+      return;
+    }
+    setReadyTypographyResource(null);
+    void typographyResource.load().then(() => {
+      if (!cancelled) setReadyTypographyResource(typographyResource);
+      return undefined;
+    });
     return () => {
       cancelled = true;
     };
-  }, [desiredTypography]);
+  }, [typographyResource]);
   useLayoutEffect(() => {
     const previous = previousModelRef.current;
     const scroll = scrollRef.current;
diff --git a/packages/app/src/git/diff-document/types.ts b/packages/app/src/git/diff-document/types.ts
index 923b77b8c5..d5d621fc44 100644
--- a/packages/app/src/git/diff-document/types.ts
+++ b/packages/app/src/git/diff-document/types.ts
@@ -20,6 +20,7 @@ export interface WorkingDiffMode {
   focusRequestId?: number;
   workspaceFileDragScope?: { serverId: string; workspaceId: string };
   onOpenFile?: (path: string) => void;
+  onOpenToSide?: (path: string) => void;
   onAddToChat?: (path: string) => void;
   onCopyPath?: (path: string) => void;
   onCopyRelativePath?: (path: string) => void;
diff --git a/packages/app/src/git/diff-document/workspace-cache.test.ts b/packages/app/src/git/diff-document/workspace-cache.test.ts
new file mode 100644
index 0000000000..d81fca5d75
--- /dev/null
+++ b/packages/app/src/git/diff-document/workspace-cache.test.ts
@@ -0,0 +1,173 @@
+import type { ParsedDiffFile } from "@getpaseo/protocol/messages";
+import { describe, expect, it } from "vitest";
+import { createDiffDocumentWorkspaceCache } from "./workspace-cache";
+import type { BuildDiffDocumentModelInput, DiffPalette, TextMeasurer } from "./types";
+
+const palette: DiffPalette = {
+  surface: "#000",
+  headerSurface: "#111",
+  border: "#222",
+  foreground: "#fff",
+  foregroundMuted: "#aaa",
+  addition: "green",
+  deletion: "red",
+  additionBackground: "#010",
+  deletionBackground: "#100",
+  emptyBackground: "#111",
+  selection: "blue",
+  syntax: { keyword: "purple" },
+};
+
+function diffFile(): ParsedDiffFile {
+  return {
+    path: "src/a.ts",
+    isNew: false,
+    isDeleted: false,
+    additions: 1,
+    deletions: 0,
+    hunks: [
+      {
+        oldStart: 1,
+        oldCount: 0,
+        newStart: 1,
+        newCount: 1,
+        lines: [{ type: "add", content: "const answer = 42;" }],
+      },
+    ],
+  };
+}
+
+function countingMeasurer() {
+  const stats = { calls: 0 };
+  const measureText: TextMeasurer = {
+    measure(text) {
+      stats.calls += 1;
+      return text.length * 8;
+    },
+  };
+  return { measureText, stats };
+}
+
+function modelInput(
+  files: readonly ParsedDiffFile[],
+  measureText: TextMeasurer,
+  overrides: Partial<BuildDiffDocumentModelInput> = {},
+): BuildDiffDocumentModelInput {
+  return {
+    files,
+    collapsedFilePaths: new Set(),
+    layout: "unified",
+    wrapLines: false,
+    viewportWidth: 800,
+    typography: { family: "monospace", size: 12, lineHeight: 18 },
+    measureText,
+    palette,
+    labels: { binary: "Binary", tooLarge: "Too large" },
+    ...overrides,
+  };
+}
+
+describe("diff document workspace cache", () => {
+  it("reuses measured rows until a model-building input changes", () => {
+    const cache = createDiffDocumentWorkspaceCache();
+    const files = [diffFile()];
+    const { measureText, stats } = countingMeasurer();
+    const input = modelInput(files, measureText);
+
+    const first = cache.buildModel(input);
+    expect(stats.calls).toBeGreaterThan(0);
+
+    stats.calls = 0;
+    const second = cache.buildModel(input);
+    expect(stats.calls).toBe(0);
+    expect(second).toBe(first);
+
+    const collapsed = cache.buildModel({
+      ...input,
+      collapsedFilePaths: new Set(["src/a.ts"]),
+    });
+    expect(collapsed).not.toBe(first);
+    expect(collapsed.files[0]?.isCollapsed).toBe(true);
+
+    cache.buildModel({ ...input, viewportWidth: 640 });
+    expect(stats.calls).toBeGreaterThan(0);
+
+    stats.calls = 0;
+    cache.buildModel({
+      ...input,
+      typography: { family: "monospace", size: 13, lineHeight: 20 },
+    });
+    expect(stats.calls).toBeGreaterThan(0);
+
+    stats.calls = 0;
+    cache.buildModel({ ...input, palette: { ...palette, foreground: "#eee" } });
+    expect(stats.calls).toBeGreaterThan(0);
+
+    stats.calls = 0;
+    cache.buildModel({ ...input, files: [...files] });
+    expect(stats.calls).toBeGreaterThan(0);
+  });
+
+  it("bounds retained geometry variants for one diff payload", () => {
+    const cache = createDiffDocumentWorkspaceCache();
+    const files = [diffFile()];
+    const { measureText, stats } = countingMeasurer();
+
+    for (const viewportWidth of [600, 700, 800, 900, 1000]) {
+      cache.buildModel(modelInput(files, measureText, { viewportWidth }));
+    }
+
+    stats.calls = 0;
+    cache.buildModel(modelInput(files, measureText, { viewportWidth: 600 }));
+    expect(stats.calls).toBeGreaterThan(0);
+  });
+
+  it("invalidates status rows when their translated labels change", () => {
+    const cache = createDiffDocumentWorkspaceCache();
+    const { measureText } = countingMeasurer();
+    const files: ParsedDiffFile[] = [{ ...diffFile(), status: "binary", hunks: [] }];
+    const first = cache.buildModel(modelInput(files, measureText));
+    const second = cache.buildModel(
+      modelInput(files, measureText, {
+        labels: { binary: "Binary blob", tooLarge: "Too large" },
+      }),
+    );
+
+    expect(first.rows[0]).toMatchObject({ kind: "status", label: "Binary" });
+    expect(second.rows[0]).toMatchObject({ kind: "status", label: "Binary blob" });
+  });
+
+  it("shares loaded typography and its text measurer across mounts", async () => {
+    const cache = createDiffDocumentWorkspaceCache();
+    const { measureText } = countingMeasurer();
+    let loadCount = 0;
+    let measurerCount = 0;
+    const typography = { family: "monospace", size: 12, lineHeight: 18 };
+    const resource = cache.typography({
+      typography,
+      load: async () => {
+        loadCount += 1;
+      },
+      createMeasurer: () => {
+        measurerCount += 1;
+        return measureText;
+      },
+    });
+    const reused = cache.typography({
+      typography: { ...typography },
+      load: async () => {
+        loadCount += 1;
+      },
+      createMeasurer: () => {
+        measurerCount += 1;
+        return measureText;
+      },
+    });
+
+    expect(reused).toBe(resource);
+    expect(measurerCount).toBe(1);
+    await Promise.all([resource.load(), reused.load()]);
+    expect(loadCount).toBe(1);
+    expect(resource.isReady()).toBe(true);
+  });
+});
diff --git a/packages/app/src/git/diff-document/workspace-cache.tsx b/packages/app/src/git/diff-document/workspace-cache.tsx
new file mode 100644
index 0000000000..55d87c2744
--- /dev/null
+++ b/packages/app/src/git/diff-document/workspace-cache.tsx
@@ -0,0 +1,168 @@
+import { createContext, useContext, useState, type ReactNode } from "react";
+import invariant from "tiny-invariant";
+import { buildDiffDocumentModel, retainReusableModels } from "./model";
+import type {
+  BuildDiffDocumentModelInput,
+  DiffDocumentModel,
+  DiffPalette,
+  DiffTypography,
+  TextMeasurer,
+} from "./types";
+
+const MAX_MODEL_VARIANTS = 4;
+const MAX_TYPOGRAPHY_RESOURCES = 4;
+
+interface ModelVariant {
+  key: string;
+  exactKey: string;
+  model: DiffDocumentModel;
+  models: DiffDocumentModel[];
+}
+
+interface TypographyResourceInput {
+  typography: DiffTypography;
+  load: () => Promise<void>;
+  createMeasurer: () => TextMeasurer;
+}
+
+export interface DiffTypographyResource {
+  typography: DiffTypography;
+  measureText: TextMeasurer;
+  isReady(): boolean;
+  load(): Promise<DiffTypography>;
+}
+
+export interface DiffDocumentWorkspaceCache {
+  buildModel(input: Omit<BuildDiffDocumentModelInput, "reuseFrom">): DiffDocumentModel;
+  typography(input: TypographyResourceInput): DiffTypographyResource;
+}
+
+export function createDiffDocumentWorkspaceCache(): DiffDocumentWorkspaceCache {
+  const variantsByFiles = new WeakMap<BuildDiffDocumentModelInput["files"], ModelVariant[]>();
+  const typographyResources = new Map<string, DiffTypographyResource>();
+
+  return {
+    buildModel(input) {
+      const key = modelVariantKey(input);
+      const exactKey = exactModelKey(input);
+      const variants = variantsByFiles.get(input.files) ?? [];
+      const variantIndex = variants.findIndex((candidate) => candidate.key === key);
+      const variant = variantIndex === -1 ? undefined : variants[variantIndex];
+      if (variant?.exactKey === exactKey) {
+        variants.splice(variantIndex, 1);
+        variants.unshift(variant);
+        return variant.model;
+      }
+      const model = buildDiffDocumentModel({ ...input, reuseFrom: variant?.models });
+      const nextVariant = {
+        key,
+        exactKey,
+        model,
+        models: retainReusableModels(variant?.models, model),
+      };
+      if (variantIndex !== -1) variants.splice(variantIndex, 1);
+      variants.unshift(nextVariant);
+      variantsByFiles.set(input.files, variants.slice(0, MAX_MODEL_VARIANTS));
+      return model;
+    },
+    typography(input) {
+      const key = typographyKey(input.typography);
+      const existing = typographyResources.get(key);
+      if (existing) {
+        typographyResources.delete(key);
+        typographyResources.set(key, existing);
+        return existing;
+      }
+      const resource = createTypographyResource(input);
+      typographyResources.set(key, resource);
+      while (typographyResources.size > MAX_TYPOGRAPHY_RESOURCES) {
+        const oldestKey = typographyResources.keys().next().value;
+        if (oldestKey === undefined) break;
+        typographyResources.delete(oldestKey);
+      }
+      return resource;
+    },
+  };
+}
+
+function createTypographyResource(input: TypographyResourceInput): DiffTypographyResource {
+  let ready = false;
+  let pending: Promise<DiffTypography> | null = null;
+  return {
+    typography: input.typography,
+    measureText: input.createMeasurer(),
+    isReady: () => ready,
+    load() {
+      if (ready) return Promise.resolve(input.typography);
+      pending ??= input.load().then(() => {
+        ready = true;
+        return input.typography;
+      });
+      return pending;
+    },
+  };
+}
+
+function modelVariantKey(input: Omit<BuildDiffDocumentModelInput, "reuseFrom">): string {
+  return JSON.stringify([
+    input.layout,
+    input.wrapLines,
+    input.viewportWidth,
+    typographyKey(input.typography),
+    paletteKey(input.palette),
+    input.labels.binary,
+    input.labels.tooLarge,
+  ]);
+}
+
+function exactModelKey(input: Omit<BuildDiffDocumentModelInput, "reuseFrom">): string {
+  const collapsedFilePaths = [...input.collapsedFilePaths].sort();
+  const reviewGeometry = input.reviewActions
+    ? {
+        comments: [...input.reviewActions.commentsByTarget.entries()]
+          .map(([target, comments]) => [target, comments.map((comment) => comment.id).sort()])
+          .sort(([left], [right]) => String(left).localeCompare(String(right))),
+        editor: input.reviewActions.editor
+          ? [input.reviewActions.editor.target.key, input.reviewActions.editor.commentId]
+          : null,
+      }
+    : null;
+  return JSON.stringify([collapsedFilePaths, reviewGeometry]);
+}
+
+function typographyKey(typography: DiffTypography): string {
+  return JSON.stringify([typography.family, typography.size, typography.lineHeight]);
+}
+
+function paletteKey(palette: DiffPalette): string {
+  const syntax = Object.keys(palette.syntax)
+    .sort()
+    .map((name) => [name, palette.syntax[name]]);
+  return JSON.stringify([
+    palette.surface,
+    palette.headerSurface,
+    palette.border,
+    palette.foreground,
+    palette.foregroundMuted,
+    palette.addition,
+    palette.deletion,
+    palette.additionBackground,
+    palette.deletionBackground,
+    palette.emptyBackground,
+    palette.selection,
+    syntax,
+  ]);
+}
+
+const WorkspaceCacheContext = createContext<DiffDocumentWorkspaceCache | null>(null);
+
+export function DiffDocumentWorkspaceCacheProvider({ children }: { children: ReactNode }) {
+  const [cache] = useState(createDiffDocumentWorkspaceCache);
+  return <WorkspaceCacheContext.Provider value={cache}>{children}</WorkspaceCacheContext.Provider>;
+}
+
+export function useDiffDocumentWorkspaceCache(): DiffDocumentWorkspaceCache {
+  const cache = useContext(WorkspaceCacheContext);
+  invariant(cache, "DiffDocumentWorkspaceCacheProvider is required");
+  return cache;
+}
diff --git a/packages/app/src/git/diff-pane.tsx b/packages/app/src/git/diff-pane.tsx
index e615d98861..1a61b34de7 100644
--- a/packages/app/src/git/diff-pane.tsx
+++ b/packages/app/src/git/diff-pane.tsx
@@ -1,4 +1,4 @@
-import { useState, useCallback, useMemo, type ReactElement } from "react";
+import { useState, useCallback, useMemo, type ReactElement, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import type { TFunction } from "i18next";
 import { TreeRail } from "@/components/tree-rail";
@@ -14,15 +14,16 @@ import {
   type ViewStyle,
 } from "react-native";
 import { StyleSheet, withUnistyles } from "react-native-unistyles";
-import { ICON_SIZE, type Theme } from "@/styles/theme";
+import type { Theme } from "@/styles/theme";
 import { useIsCompactFormFactor } from "@/constants/layout";
 import {
   AlignJustify,
   ChevronDown,
   Columns2,
+  ExternalLink,
   ListChevronsDownUp,
   ListChevronsUpDown,
-  Maximize2,
+  Maximize,
   MoreHorizontal,
   Pilcrow,
   RotateCw,
@@ -41,9 +42,14 @@ import {
   type DiffTreeRow,
 } from "@/git/diff-tree";
 import { DiffFolderRow } from "@/git/diff-folder-row";
-import { useCheckoutPrStatusQuery } from "@/git/use-pr-status-query";
+import {
+  selectPrHintFromStatus,
+  type PrHint,
+  useCheckoutPrStatusQuery,
+} from "@/git/use-pr-status-query";
 import { CommitsSection } from "@/git/commits-section/commits-section";
 import { useAppSettings } from "@/hooks/use-settings";
+import { useChangesPreferences } from "@/hooks/use-changes-preferences";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -74,8 +80,19 @@ import {
   PaneContentToolbar,
   paneContentToolbarIconSize,
   paneContentToolbarIconButtonStyle,
+  paneContentToolbarTrailingPadding,
+  ToolbarButton,
+  ToolbarControls,
 } from "@/components/ui/pane-content-toolbar";
+import { extraMutedIconColorMapping } from "@/components/ui/icon-button-chrome";
+import {
+  isToolbarLabelTriggerHighlighted,
+  ToolbarLabelTriggerIcon,
+  toolbarLabelTriggerTextStyle,
+  toolbarLabelTriggerStyle,
+} from "@/components/ui/toolbar-label-trigger";
 import { FOCUSED_PANE_PLACEMENT, useWorkspaceLayoutStore } from "@/stores/workspace-layout-store";
+import { usePanelStore } from "@/stores/panel-store";
 import type { WorkspaceTabPlacement } from "@/stores/workspace-layout-actions";
 import type { WorkspaceTabTarget } from "@/workspace-tabs/model";
 import { buildWorkspaceTabPersistenceKey } from "@/workspace-tabs/model";
@@ -84,6 +101,10 @@ import { usePublishWorkingDiffAttachment, useWorkingDiff } from "@/git/use-worki
 import type { CheckoutStatusPayload } from "@/git/use-status-query";
 import { DiffTooLargeState } from "@/git/diff-too-large-state";
 import { openDesktopTarget, useDesktopOpenTargets } from "@/workspace/desktop-open-targets";
+import { PullRequestStateIcon } from "@/git/pull-request-state-icon";
+import { openExternalUrl } from "@/utils/open-external-url";
+import { openPreferredWorkspaceTarget } from "@/workspace-tabs/open-beside";
+import type { OpenInSidePanePreferences } from "@/hooks/use-settings";
 
 export type { GitActionId, GitAction, GitActions } from "@/git/policy";
 
@@ -166,11 +187,13 @@ interface ChangesSurfaceProps {
   workspaceId?: string | null;
   cwd: string;
   enabled?: boolean;
-  host: "explorer" | "panel";
+  presentation?: ChangesPresentation;
   modeScope: string;
   focusPath?: string;
   focusRequestId?: number;
   onOpenFile?: (path: string) => void;
+  onOpenToSide?: (path: string) => void;
+  onSelectDiffFile?: (path: string) => void;
   onAddToChat?: (path: string) => void;
   state?: ChangesState;
   onStateChange?: (state: ChangesState) => void;
@@ -189,10 +212,11 @@ const ThemedPilcrow = withUnistyles(Pilcrow);
 const ThemedWrapText = withUnistyles(WrapText);
 const ThemedListChevronsDownUp = withUnistyles(ListChevronsDownUp);
 const ThemedListChevronsUpDown = withUnistyles(ListChevronsUpDown);
-const ThemedMaximize2 = withUnistyles(Maximize2);
+const ThemedMaximize = withUnistyles(Maximize);
 const noopStateChange = () => {};
 const ThemedChevronDown = withUnistyles(ChevronDown);
 const ThemedMoreHorizontal = withUnistyles(MoreHorizontal);
+const ThemedExternalLink = withUnistyles(ExternalLink);
 const DIFF_OPTIONS_WHITESPACE_ICON = (
   <ThemedPilcrow size={14} uniProps={foregroundMutedIconColorMapping} />
 );
@@ -209,7 +233,7 @@ const DIFF_OPTIONS_EXPAND_ICON = (
   <ThemedListChevronsUpDown size={14} uniProps={foregroundMutedIconColorMapping} />
 );
 const DIFF_OPTIONS_CHANGES_TAB_ICON = (
-  <ThemedMaximize2 size={14} uniProps={foregroundMutedIconColorMapping} />
+  <ThemedMaximize size={14} uniProps={foregroundMutedIconColorMapping} />
 );
 
 interface DiffLayoutToggleProps {
@@ -262,17 +286,6 @@ export function DiffLayoutToggle({
   );
 }
 
-function resolveChangesTabOpen(host: "explorer" | "panel", changesTabOpen: boolean): boolean {
-  return host === "explorer" ? changesTabOpen : false;
-}
-
-function resolveChangesFilePress(
-  host: "explorer" | "panel",
-  onChangesFilePress: ((path?: string) => void) | undefined,
-): ((path?: string) => void) | undefined {
-  return host === "explorer" ? onChangesFilePress : undefined;
-}
-
 interface DiffModeMenuProps {
   diffMode: "uncommitted" | "base";
   committedDescription?: string;
@@ -289,21 +302,29 @@ export function DiffModeMenu({
   onSelectBase,
 }: DiffModeMenuProps) {
   const { t } = useTranslation();
-  const triggerStyle = useMemo(() => buildDiffModeTriggerStyle(), []);
   const uncommittedLabel = t("workspace.git.diff.uncommitted");
   const committedLabel = t("workspace.git.diff.committed");
   return (
     <DropdownMenu>
       <DropdownMenuTrigger
         testID={`${testIDPrefix}-status-trigger`}
-        style={triggerStyle}
+        style={toolbarLabelTriggerStyle}
         accessibilityRole="button"
         accessibilityLabel={t("workspace.git.diff.diffMode")}
       >
-        <Text style={styles.diffStatusText} numberOfLines={1}>
-          {diffMode === "uncommitted" ? uncommittedLabel : committedLabel}
-        </Text>
-        <ThemedChevronDown size={12} uniProps={foregroundMutedIconColorMapping} />
+        {(state) => {
+          const highlighted = isToolbarLabelTriggerHighlighted(state);
+          return (
+            <>
+              <Text style={toolbarLabelTriggerTextStyle(highlighted)} numberOfLines={1}>
+                {diffMode === "uncommitted" ? uncommittedLabel : committedLabel}
+              </Text>
+              <ToolbarLabelTriggerIcon>
+                <ThemedChevronDown size={12} uniProps={extraMutedIconColorMapping} />
+              </ToolbarLabelTriggerIcon>
+            </>
+          );
+        }}
       </DropdownMenuTrigger>
       <DropdownMenuContent align="start" width={260} testID={`${testIDPrefix}-status-menu`}>
         <DropdownMenuItem
@@ -327,256 +348,689 @@ export function DiffModeMenu({
   );
 }
 
-interface ChangesToolbarProps {
-  branchName: string | null;
-  allFilesCollapsed: boolean;
-  canUseSplitLayout: boolean;
-  changesTabOpen: boolean;
-  committedDescription?: string;
-  cwd: string;
-  desktopTreeVisible: boolean;
-  diffMode: "uncommitted" | "base";
-  gitActions: GitActions;
-  hasFiles: boolean;
-  hideWhitespace: boolean;
-  host: "explorer" | "panel";
-  isMobile: boolean;
+type ChangesPresentation = "combined" | "tree" | "diff";
+
+interface ChangesToolbarRefreshAction {
   isRefreshing: boolean;
-  layout: "unified" | "split";
-  overflowToggleStyle: PressableStyleFn;
-  refreshSupported: boolean;
-  selectedDiffStat: { additions: number; deletions: number } | null;
-  serverId: string;
-  workspaceId?: string | null;
-  wrapLines: boolean;
   onRefresh: () => void;
-  onCollapseAll: () => void;
-  onExpandAll: () => void;
-  onSelectBase: () => void;
-  onSelectUncommitted: () => void;
-  onToggleChangesTab: () => void;
-  onToggleDesktopTree: () => void;
+}
+
+interface ChangesToolbarInlineDiffToggle {
+  value: boolean;
+  onToggle: () => void;
+}
+
+interface ChangesToolbarDiffOptions {
+  collapse: {
+    allFilesCollapsed: boolean;
+    onCollapseAll: () => void;
+    onExpandAll: () => void;
+  } | null;
+  layout: {
+    value: "unified" | "split";
+    onToggle: () => void;
+  } | null;
+  hideWhitespace: boolean;
+  wrapLines: boolean;
   onToggleHideWhitespace: () => void;
-  onToggleLayout: () => void;
   onToggleWrapLines: () => void;
 }
 
-// One row: the diff-mode and branch pickers lead, the git actions and the
-// overflow menu trail. The tree toggle is the only icon action that stays out
-// of the menu, and it only exists on desktop, so a phone-width row holds two
-// pickers, the split button, and the trigger without wrapping.
-function ChangesToolbar(props: ChangesToolbarProps) {
-  const {
-    branchName,
-    committedDescription,
-    cwd,
-    desktopTreeVisible,
-    diffMode,
-    gitActions,
-    hasFiles,
-    isMobile,
-    selectedDiffStat,
-    serverId,
-    workspaceId,
-    onSelectBase,
-    onSelectUncommitted,
-    onToggleDesktopTree,
-  } = props;
+type ChangesToolbarMode =
+  | {
+      kind: "tree";
+      onOpenDiff: () => void;
+      inlineDiff: ChangesToolbarInlineDiffToggle | null;
+      refresh: ChangesToolbarRefreshAction | null;
+    }
+  | {
+      kind: "diff";
+      options: ChangesToolbarDiffOptions;
+      refresh: ChangesToolbarRefreshAction | null;
+    }
+  | {
+      kind: "combined";
+      options: ChangesToolbarDiffOptions;
+      refresh: ChangesToolbarRefreshAction | null;
+      treeToggle: { visible: boolean; onToggle: () => void } | null;
+      inlineDiff: ChangesToolbarInlineDiffToggle | null;
+    };
+
+function buildChangesToolbarMode(input: {
+  presentation: ChangesPresentation;
+  compact: boolean;
+  hasChanges: boolean;
+  canUseSplitLayout: boolean;
+  refreshSupported: boolean;
+  isRefreshing: boolean;
+  layout: "unified" | "split";
+  hideWhitespace: boolean;
+  wrapLines: boolean;
+  treeVisible: boolean;
+  onOpenDiff: () => void;
+  inlineDiff: ChangesToolbarInlineDiffToggle | null;
+  onRefresh: () => void;
+  onCollapseAll: () => void;
+  onExpandAll: () => void;
+  allFilesCollapsed: boolean;
+  onToggleLayout: () => void;
+  onToggleHideWhitespace: () => void;
+  onToggleWrapLines: () => void;
+  onToggleTree: () => void;
+}): ChangesToolbarMode {
+  const refresh = input.refreshSupported
+    ? { isRefreshing: input.isRefreshing, onRefresh: input.onRefresh }
+    : null;
+  if (input.presentation === "tree") {
+    return {
+      kind: "tree",
+      onOpenDiff: input.onOpenDiff,
+      inlineDiff: input.inlineDiff,
+      refresh,
+    };
+  }
+  const options: ChangesToolbarDiffOptions = {
+    collapse: input.hasChanges
+      ? {
+          allFilesCollapsed: input.allFilesCollapsed,
+          onCollapseAll: input.onCollapseAll,
+          onExpandAll: input.onExpandAll,
+        }
+      : null,
+    layout: input.canUseSplitLayout
+      ? { value: input.layout, onToggle: input.onToggleLayout }
+      : null,
+    hideWhitespace: input.hideWhitespace,
+    wrapLines: input.wrapLines,
+    onToggleHideWhitespace: input.onToggleHideWhitespace,
+    onToggleWrapLines: input.onToggleWrapLines,
+  };
+  if (input.presentation === "diff") {
+    return { kind: "diff", options, refresh };
+  }
+  return {
+    kind: "combined",
+    options,
+    refresh,
+    treeToggle:
+      !input.compact && input.hasChanges
+        ? { visible: input.treeVisible, onToggle: input.onToggleTree }
+        : null,
+    inlineDiff: input.inlineDiff,
+  };
+}
+
+interface ChangesPullRequestLinkModel extends Pick<PrHint, "forge" | "number" | "state" | "url"> {
+  onOpen: () => void;
+}
+
+interface ChangesRepositoryToolbarModel {
+  branchName: string | null;
+  cwd: string;
+  gitActions: GitActions | null;
+  pullRequest: ChangesPullRequestLinkModel | null;
+  serverId: string;
+  workspaceId?: string | null;
+}
+
+interface ChangesComparisonToolbarModel {
+  committedDescription?: string;
+  diffMode: "uncommitted" | "base";
+  mode: ChangesToolbarMode;
+  selectedDiffStat: { additions: number; deletions: number } | null;
+  onSelectBase: () => void;
+  onSelectUncommitted: () => void;
+}
+
+interface ChangesHeaderProps {
+  compact: boolean;
+  repository: ChangesRepositoryToolbarModel;
+  comparison: ChangesComparisonToolbarModel;
+  sidebarSurface: boolean;
+}
+
+interface BuildChangesHeaderModelInput {
+  branchName: string | null;
+  committedDescription?: string;
+  compact: boolean;
+  cwd: string;
+  diffMode: "uncommitted" | "base";
+  gitActions: GitActions;
+  mode: ChangesToolbarMode;
+  onOpenPullRequest: () => void;
+  onSelectBase: () => void;
+  onSelectUncommitted: () => void;
+  pullRequest: PrHint | null;
+  selectedDiffStat: { additions: number; deletions: number } | null;
+  serverId: string;
+  workspaceId?: string | null;
+}
+
+function buildChangesHeaderModel(input: BuildChangesHeaderModelInput): {
+  repository: ChangesRepositoryToolbarModel;
+  comparison: ChangesComparisonToolbarModel;
+} {
+  return {
+    repository: {
+      branchName: input.branchName,
+      cwd: input.cwd,
+      gitActions: input.compact ? input.gitActions : null,
+      pullRequest: input.pullRequest
+        ? { ...input.pullRequest, onOpen: input.onOpenPullRequest }
+        : null,
+      serverId: input.serverId,
+      workspaceId: input.workspaceId,
+    },
+    comparison: {
+      committedDescription: input.committedDescription,
+      diffMode: input.diffMode,
+      mode: input.mode,
+      selectedDiffStat: input.selectedDiffStat,
+      onSelectBase: input.onSelectBase,
+      onSelectUncommitted: input.onSelectUncommitted,
+    },
+  };
+}
+
+// Presentation resolves into these two capability models before rendering. The rows
+// never infer which host or Changes presentation produced them.
+function ChangesHeader({ compact, repository, comparison, sidebarSurface }: ChangesHeaderProps) {
+  if (comparison.mode.kind === "diff") {
+    return (
+      <ChangesDiffOnlyToolbar
+        compact={compact}
+        mode={comparison.mode}
+        sidebarSurface={sidebarSurface}
+      />
+    );
+  }
   return (
-    <PaneContentToolbar style={styles.changesToolbar} testID="changes-header">
-      <View style={styles.changesToolbarIdentity}>
-        <DiffModeMenu
-          diffMode={diffMode}
-          committedDescription={committedDescription}
-          onSelectUncommitted={onSelectUncommitted}
-          onSelectBase={onSelectBase}
-        />
-        <BranchSwitcher
-          currentBranchName={branchName}
-          serverId={serverId}
-          workspaceId={workspaceId ?? cwd}
-          workspaceDirectory={cwd}
-          isGitCheckout
-          testID="changes-branch-switcher"
-        />
-        {!isMobile && selectedDiffStat ? (
-          <DiffStat
-            additions={selectedDiffStat.additions}
-            deletions={selectedDiffStat.deletions}
-            testID="changes-selected-diff-stat"
-          />
-        ) : null}
-      </View>
-      <View style={styles.changesToolbarControls}>
-        {!isMobile && hasFiles ? (
-          <TreeRailToggle
-            visible={desktopTreeVisible}
-            testID="changes-toggle-tree"
-            onToggle={onToggleDesktopTree}
-          />
-        ) : null}
-        {isMobile ? <GitActionsSplitButton gitActions={gitActions} menuOnly /> : null}
-        <ChangesOptionsMenu {...props} />
-      </View>
+    <View>
+      <ChangesRepositoryToolbar
+        compact={compact}
+        model={repository}
+        sidebarSurface={sidebarSurface}
+      />
+      <ChangesComparisonToolbar
+        compact={compact}
+        model={comparison}
+        sidebarSurface={sidebarSurface}
+      />
+    </View>
+  );
+}
+
+function ChangesDiffOnlyToolbar({
+  compact,
+  mode,
+  sidebarSurface,
+}: {
+  compact: boolean;
+  mode: Extract<ChangesToolbarMode, { kind: "diff" }>;
+  sidebarSurface: boolean;
+}) {
+  return (
+    <ChangesToolbarRow compact={compact} sidebarSurface={sidebarSurface} testID="changes-header">
+      <ChangesToolbarLeading />
+      <ChangesToolbarTrailing>
+        <ChangesToolbarActions mode={mode} compact={compact} />
+      </ChangesToolbarTrailing>
+    </ChangesToolbarRow>
+  );
+}
+
+function ChangesToolbarRow({
+  children,
+  compact,
+  sidebarSurface,
+  testID,
+}: {
+  children: ReactNode;
+  compact: boolean;
+  sidebarSurface: boolean;
+  testID: string;
+}) {
+  const toolbarStyle = useMemo(
+    () => [
+      styles.changesToolbar,
+      { paddingRight: paneContentToolbarTrailingPadding(compact) },
+      sidebarSurface ? styles.changesToolbarSidebar : null,
+    ],
+    [compact, sidebarSurface],
+  );
+  return (
+    <PaneContentToolbar style={toolbarStyle} testID={testID}>
+      {children}
     </PaneContentToolbar>
   );
 }
 
-type ChangesOptionsMenuProps = Pick<
-  ChangesToolbarProps,
-  | "allFilesCollapsed"
-  | "canUseSplitLayout"
-  | "changesTabOpen"
-  | "hasFiles"
-  | "hideWhitespace"
-  | "host"
-  | "isMobile"
-  | "isRefreshing"
-  | "layout"
-  | "overflowToggleStyle"
-  | "refreshSupported"
-  | "wrapLines"
-  | "onCollapseAll"
-  | "onExpandAll"
-  | "onRefresh"
-  | "onToggleChangesTab"
-  | "onToggleHideWhitespace"
-  | "onToggleLayout"
-  | "onToggleWrapLines"
->;
+function ChangesToolbarLeading({ children }: { children?: ReactNode }) {
+  return <View style={styles.changesToolbarIdentity}>{children}</View>;
+}
 
-function ChangesOptionsMenu({
-  allFilesCollapsed,
-  canUseSplitLayout,
-  changesTabOpen,
-  hasFiles,
-  hideWhitespace,
-  host,
-  isMobile,
-  isRefreshing,
-  layout,
-  overflowToggleStyle,
-  refreshSupported,
-  wrapLines,
-  onCollapseAll,
-  onExpandAll,
-  onRefresh,
-  onToggleChangesTab,
-  onToggleHideWhitespace,
-  onToggleLayout,
-  onToggleWrapLines,
-}: ChangesOptionsMenuProps) {
+function ChangesToolbarTrailing({ children }: { children: ReactNode }) {
+  return <ToolbarControls style={styles.changesToolbarControls}>{children}</ToolbarControls>;
+}
+
+function ChangesRepositoryToolbar({
+  compact,
+  model,
+  sidebarSurface,
+}: {
+  compact: boolean;
+  model: ChangesRepositoryToolbarModel;
+  sidebarSurface: boolean;
+}) {
+  return (
+    <ChangesToolbarRow
+      compact={compact}
+      sidebarSurface={sidebarSurface}
+      testID="changes-repository-header"
+    >
+      <ChangesToolbarLeading>
+        <BranchSwitcher
+          currentBranchName={model.branchName}
+          serverId={model.serverId}
+          workspaceId={model.workspaceId ?? model.cwd}
+          workspaceDirectory={model.cwd}
+          isGitCheckout
+          testID="changes-branch-switcher"
+        />
+      </ChangesToolbarLeading>
+      <ChangesToolbarTrailing>
+        {model.pullRequest ? (
+          <>
+            <ChangesPullRequestLink model={model.pullRequest} />
+            <ChangesPullRequestExternalLink compact={compact} model={model.pullRequest} />
+          </>
+        ) : null}
+        {model.gitActions ? <GitActionsSplitButton gitActions={model.gitActions} menuOnly /> : null}
+      </ChangesToolbarTrailing>
+    </ChangesToolbarRow>
+  );
+}
+
+function ChangesPullRequestLink({ model }: { model: ChangesPullRequestLinkModel }) {
   const { t } = useTranslation();
-  const optionsLabel = t("workspace.git.diff.options");
+  const presentation = getForgePresentation(model.forge);
+  const label = `${presentation.numberPrefix}${model.number}`;
+  return (
+    <Tooltip delayDuration={300} enabledOnDesktop enabledOnMobile={false}>
+      <TooltipTrigger
+        testID="changes-open-pull-request"
+        accessibilityRole="button"
+        accessibilityLabel={`${t("panels.pullRequest.label")} ${label}`}
+        onPress={model.onOpen}
+        style={toolbarLabelTriggerStyle}
+      >
+        {(state) => {
+          const highlighted = isToolbarLabelTriggerHighlighted(state);
+          return (
+            <>
+              <ToolbarLabelTriggerIcon>
+                <PullRequestStateIcon state={model.state} size={14} strokeWidth={1.5} />
+              </ToolbarLabelTriggerIcon>
+              <Text style={toolbarLabelTriggerTextStyle(highlighted)}>{label}</Text>
+            </>
+          );
+        }}
+      </TooltipTrigger>
+      <TooltipContent side="bottom">
+        <Text style={styles.tooltipText}>{t("panels.pullRequest.label")}</Text>
+      </TooltipContent>
+    </Tooltip>
+  );
+}
+
+function ChangesPullRequestExternalLink({
+  compact,
+  model,
+}: {
+  compact: boolean;
+  model: ChangesPullRequestLinkModel;
+}) {
+  const { t } = useTranslation();
+  const presentation = getForgePresentation(model.forge);
+  const label = t("workspace.git.pr.actions.openOn", { brand: presentation.brandLabel });
+  const handlePress = useCallback(() => {
+    void openExternalUrl(model.url);
+  }, [model.url]);
+  return (
+    <ToolbarButton
+      compact={compact}
+      label={label}
+      onPress={handlePress}
+      testID="changes-open-pull-request-external"
+    >
+      <ThemedExternalLink
+        size={paneContentToolbarIconSize(compact)}
+        strokeWidth={1.5}
+        uniProps={extraMutedIconColorMapping}
+      />
+    </ToolbarButton>
+  );
+}
+
+function ChangesComparisonToolbar({
+  compact,
+  model,
+  sidebarSurface,
+}: {
+  compact: boolean;
+  model: ChangesComparisonToolbarModel;
+  sidebarSurface: boolean;
+}) {
+  return (
+    <ChangesToolbarRow compact={compact} sidebarSurface={sidebarSurface} testID="changes-header">
+      <ChangesToolbarLeading>
+        <DiffModeMenu
+          diffMode={model.diffMode}
+          committedDescription={model.committedDescription}
+          onSelectUncommitted={model.onSelectUncommitted}
+          onSelectBase={model.onSelectBase}
+        />
+        {model.selectedDiffStat ? (
+          <DiffStat
+            additions={model.selectedDiffStat.additions}
+            deletions={model.selectedDiffStat.deletions}
+            testID="changes-selected-diff-stat"
+          />
+        ) : null}
+      </ChangesToolbarLeading>
+      <ChangesToolbarTrailing>
+        <ChangesToolbarActions mode={model.mode} compact={compact} />
+      </ChangesToolbarTrailing>
+    </ChangesToolbarRow>
+  );
+}
+
+function ChangesToolbarActions({ mode, compact }: { mode: ChangesToolbarMode; compact: boolean }) {
+  if (mode.kind === "tree") {
+    return (
+      <>
+        {mode.refresh ? <ChangesRefreshButton refresh={mode.refresh} compact={compact} /> : null}
+        <ChangesOptionsMenu mode={mode} compact={compact} />
+      </>
+    );
+  }
+  if (mode.kind === "diff") {
+    return (
+      <>
+        {mode.refresh ? <ChangesRefreshButton refresh={mode.refresh} compact={compact} /> : null}
+        <ChangesDiffToolbar options={mode.options} compact={compact} />
+      </>
+    );
+  }
+  return (
+    <>
+      {mode.treeToggle ? (
+        <TreeRailToggle
+          visible={mode.treeToggle.visible}
+          testID="changes-toggle-tree"
+          onToggle={mode.treeToggle.onToggle}
+        />
+      ) : null}
+      {mode.refresh ? <ChangesRefreshButton refresh={mode.refresh} compact={compact} /> : null}
+      <ChangesOptionsMenu mode={mode} compact={compact} />
+    </>
+  );
+}
+
+function ChangesDiffToolbar({
+  options,
+  compact,
+}: {
+  options: ChangesToolbarDiffOptions;
+  compact: boolean;
+}) {
+  const { t } = useTranslation();
+  const iconSize = paneContentToolbarIconSize(compact);
   const collapseLabel = t(
-    allFilesCollapsed ? "workspace.git.diff.expandAllFiles" : "workspace.git.diff.collapseAllFiles",
+    options.collapse?.allFilesCollapsed
+      ? "workspace.git.diff.expandAllFiles"
+      : "workspace.git.diff.collapseAllFiles",
   );
-  const changesTabLabel = t(
-    changesTabOpen ? "workspace.git.diff.closeChangesTab" : "workspace.git.diff.openChangesTab",
-  );
-  const whitespaceLabel = hideWhitespace
+  const whitespaceLabel = options.hideWhitespace
     ? t("workspace.git.diff.showWhitespace")
     : t("workspace.git.diff.hideWhitespace");
-  const wrapLinesLabel = wrapLines
+  const wrapLinesLabel = options.wrapLines
     ? t("workspace.git.diff.scrollLongLines")
     : t("workspace.git.diff.wrapLongLines");
-  const refreshLabel = isRefreshing
+  const layoutLabel =
+    options.layout?.value === "split"
+      ? t("workspace.git.diff.switchToUnified")
+      : t("workspace.git.diff.switchToSplit");
+  return (
+    <>
+      {options.collapse ? (
+        <ToolbarButton
+          compact={compact}
+          label={collapseLabel}
+          testID="changes-toggle-collapse-all"
+          onPress={
+            options.collapse.allFilesCollapsed
+              ? options.collapse.onExpandAll
+              : options.collapse.onCollapseAll
+          }
+        >
+          {options.collapse.allFilesCollapsed ? (
+            <ThemedListChevronsUpDown size={iconSize} uniProps={extraMutedIconColorMapping} />
+          ) : (
+            <ThemedListChevronsDownUp size={iconSize} uniProps={extraMutedIconColorMapping} />
+          )}
+        </ToolbarButton>
+      ) : null}
+      {options.layout ? (
+        <ToolbarButton
+          compact={compact}
+          label={layoutLabel}
+          selected={options.layout.value === "split"}
+          testID="changes-toggle-layout"
+          onPress={options.layout.onToggle}
+        >
+          <ThemedColumns2 size={iconSize} uniProps={extraMutedIconColorMapping} />
+        </ToolbarButton>
+      ) : null}
+      <ToolbarButton
+        compact={compact}
+        label={whitespaceLabel}
+        selected={options.hideWhitespace}
+        testID="changes-toggle-whitespace"
+        onPress={options.onToggleHideWhitespace}
+      >
+        <ThemedPilcrow size={iconSize} uniProps={extraMutedIconColorMapping} />
+      </ToolbarButton>
+      <ToolbarButton
+        compact={compact}
+        label={wrapLinesLabel}
+        selected={options.wrapLines}
+        testID="changes-toggle-wrap-lines"
+        onPress={options.onToggleWrapLines}
+      >
+        <ThemedWrapText size={iconSize} uniProps={extraMutedIconColorMapping} />
+      </ToolbarButton>
+    </>
+  );
+}
+
+function ChangesRefreshButton({
+  refresh,
+  compact,
+}: {
+  refresh: ChangesToolbarRefreshAction;
+  compact: boolean;
+}) {
+  const { t } = useTranslation();
+  const refreshLabel = refresh.isRefreshing
     ? t("workspace.git.diff.refreshing")
     : t("workspace.git.diff.refresh");
-  const refreshIcon = useMemo(
-    () =>
-      isRefreshing ? (
-        <ThemedLoadingSpinner size={ICON_SIZE.sm} uniProps={foregroundMutedIconColorMapping} />
+  return (
+    <ToolbarButton
+      label={refreshLabel}
+      compact={compact}
+      disabled={refresh.isRefreshing}
+      testID="changes-refresh"
+      onPress={refresh.onRefresh}
+    >
+      {refresh.isRefreshing ? (
+        <ThemedLoadingSpinner
+          size={paneContentToolbarIconSize(compact)}
+          uniProps={extraMutedIconColorMapping}
+        />
       ) : (
-        <ThemedRotateCw size={ICON_SIZE.sm} uniProps={foregroundMutedIconColorMapping} />
-      ),
-    [isRefreshing],
+        <ThemedRotateCw
+          size={paneContentToolbarIconSize(compact)}
+          uniProps={extraMutedIconColorMapping}
+        />
+      )}
+    </ToolbarButton>
   );
+}
 
-  const showChangesTab = host === "explorer" && !isMobile;
-  const showLayout = canUseSplitLayout && !changesTabOpen;
+type ChangesOptionsMenuMode = Extract<ChangesToolbarMode, { kind: "tree" | "combined" }>;
+
+function ChangesOptionsMenu({ mode, compact }: { mode: ChangesOptionsMenuMode; compact: boolean }) {
+  const { t } = useTranslation();
+  const optionsLabel = t("workspace.git.diff.options");
+  const content =
+    mode.kind === "tree" ? (
+      <ChangesTreeOptions onOpenDiff={mode.onOpenDiff} inlineDiff={mode.inlineDiff} />
+    ) : (
+      <>
+        <ChangesDiffOptions options={mode.options} />
+        {mode.inlineDiff ? (
+          <>
+            <DropdownMenuSeparator />
+            <ChangesInlineDiffOption toggle={mode.inlineDiff} />
+          </>
+        ) : null}
+      </>
+    );
 
   return (
     <DropdownMenu>
-      <Tooltip delayDuration={300}>
-        <TooltipTrigger asChild>
-          <DropdownMenuTrigger
-            accessibilityRole="button"
-            accessibilityLabel={optionsLabel}
-            testID="changes-options-menu"
-            style={overflowToggleStyle}
-          >
-            <ThemedMoreHorizontal
-              size={paneContentToolbarIconSize(isMobile)}
-              uniProps={foregroundMutedIconColorMapping}
-            />
-          </DropdownMenuTrigger>
-        </TooltipTrigger>
-        <TooltipContent side="bottom">
-          <Text style={styles.tooltipText}>{optionsLabel}</Text>
-        </TooltipContent>
-      </Tooltip>
+      <ToolbarButton
+        kind="menu"
+        label={optionsLabel}
+        compact={compact}
+        testID="changes-options-menu"
+      >
+        <ThemedMoreHorizontal
+          size={paneContentToolbarIconSize(compact)}
+          uniProps={extraMutedIconColorMapping}
+        />
+      </ToolbarButton>
       <DropdownMenuContent align="end" width={240} testID="changes-options-menu-content">
-        {hasFiles ? (
+        {content}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+function ChangesTreeOptions({
+  onOpenDiff,
+  inlineDiff,
+}: {
+  onOpenDiff: () => void;
+  inlineDiff: ChangesToolbarInlineDiffToggle | null;
+}) {
+  const { t } = useTranslation();
+  return (
+    <>
+      <DropdownMenuItem
+        leading={DIFF_OPTIONS_CHANGES_TAB_ICON}
+        testID="changes-open-tab"
+        onSelect={onOpenDiff}
+      >
+        {t("workspace.git.diff.openDiffTab")}
+      </DropdownMenuItem>
+      {inlineDiff ? (
+        <>
+          <DropdownMenuSeparator />
+          <ChangesInlineDiffOption toggle={inlineDiff} />
+        </>
+      ) : null}
+    </>
+  );
+}
+
+function ChangesInlineDiffOption({ toggle }: { toggle: ChangesToolbarInlineDiffToggle }) {
+  const { t } = useTranslation();
+  return (
+    <DropdownMenuItem
+      selected={toggle.value}
+      testID="changes-toggle-inline-diff"
+      onSelect={toggle.onToggle}
+    >
+      {t("workspace.git.diff.inlineDiff")}
+    </DropdownMenuItem>
+  );
+}
+
+function ChangesDiffOptions({ options }: { options: ChangesToolbarDiffOptions }) {
+  const { t } = useTranslation();
+  const collapseLabel = t(
+    options.collapse?.allFilesCollapsed
+      ? "workspace.git.diff.expandAllFiles"
+      : "workspace.git.diff.collapseAllFiles",
+  );
+  const whitespaceLabel = options.hideWhitespace
+    ? t("workspace.git.diff.showWhitespace")
+    : t("workspace.git.diff.hideWhitespace");
+  const wrapLinesLabel = options.wrapLines
+    ? t("workspace.git.diff.scrollLongLines")
+    : t("workspace.git.diff.wrapLongLines");
+
+  return (
+    <>
+      {options.collapse ? (
+        <>
           <DropdownMenuItem
-            leading={allFilesCollapsed ? DIFF_OPTIONS_EXPAND_ICON : DIFF_OPTIONS_COLLAPSE_ICON}
+            leading={
+              options.collapse.allFilesCollapsed
+                ? DIFF_OPTIONS_EXPAND_ICON
+                : DIFF_OPTIONS_COLLAPSE_ICON
+            }
             testID="changes-toggle-collapse-all"
-            onSelect={allFilesCollapsed ? onExpandAll : onCollapseAll}
+            onSelect={
+              options.collapse.allFilesCollapsed
+                ? options.collapse.onExpandAll
+                : options.collapse.onCollapseAll
+            }
           >
             {collapseLabel}
           </DropdownMenuItem>
-        ) : null}
-        {showChangesTab ? (
-          <DropdownMenuItem
-            leading={DIFF_OPTIONS_CHANGES_TAB_ICON}
-            testID="changes-open-tab"
-            onSelect={onToggleChangesTab}
-          >
-            {changesTabLabel}
-          </DropdownMenuItem>
-        ) : null}
-        {hasFiles || showChangesTab ? <DropdownMenuSeparator /> : null}
-        {showLayout ? (
-          <DropdownMenuItem
-            leading={DIFF_OPTIONS_SPLIT_ICON}
-            selected={layout === "split"}
-            testID="changes-toggle-layout"
-            onSelect={onToggleLayout}
-          >
-            {t("workspace.git.diff.split")}
-          </DropdownMenuItem>
-        ) : null}
+          <DropdownMenuSeparator />
+        </>
+      ) : null}
+      {options.layout ? (
         <DropdownMenuItem
-          leading={DIFF_OPTIONS_WHITESPACE_ICON}
-          selected={hideWhitespace}
-          testID="changes-toggle-whitespace"
-          onSelect={onToggleHideWhitespace}
+          leading={DIFF_OPTIONS_SPLIT_ICON}
+          selected={options.layout.value === "split"}
+          testID="changes-toggle-layout"
+          onSelect={options.layout.onToggle}
         >
-          {whitespaceLabel}
+          {t("workspace.git.diff.split")}
         </DropdownMenuItem>
-        <DropdownMenuItem
-          leading={DIFF_OPTIONS_WRAP_ICON}
-          selected={wrapLines}
-          testID="changes-toggle-wrap-lines"
-          onSelect={onToggleWrapLines}
-        >
-          {wrapLinesLabel}
-        </DropdownMenuItem>
-        {refreshSupported ? (
-          <>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem
-              leading={refreshIcon}
-              disabled={isRefreshing}
-              testID="changes-refresh"
-              onSelect={onRefresh}
-            >
-              {refreshLabel}
-            </DropdownMenuItem>
-          </>
-        ) : null}
-      </DropdownMenuContent>
-    </DropdownMenu>
+      ) : null}
+      <DropdownMenuItem
+        leading={DIFF_OPTIONS_WHITESPACE_ICON}
+        selected={options.hideWhitespace}
+        testID="changes-toggle-whitespace"
+        onSelect={options.onToggleHideWhitespace}
+      >
+        {whitespaceLabel}
+      </DropdownMenuItem>
+      <DropdownMenuItem
+        leading={DIFF_OPTIONS_WRAP_ICON}
+        selected={options.wrapLines}
+        testID="changes-toggle-wrap-lines"
+        onSelect={options.onToggleWrapLines}
+      >
+        {wrapLinesLabel}
+      </DropdownMenuItem>
+    </>
   );
 }
 
@@ -798,17 +1252,6 @@ function buildForgeSetupMessage(input: {
   return input.t("workspace.git.forgeSetup.signIn", { command, brand: brandLabel });
 }
 
-function buildDiffModeTriggerStyle(): PressableStyleFn {
-  return ({ hovered, pressed, open }) => [
-    styles.diffModeTrigger,
-    (Boolean(hovered) || pressed || Boolean(open)) && styles.diffModeTriggerHovered,
-  ];
-}
-
-function buildOverflowButtonStyle(isMobile: boolean): PressableStyleFn {
-  return (state) => paneContentToolbarIconButtonStyle(state, false, isMobile);
-}
-
 function buildToggleButtonStyle(
   selected: boolean,
   baseStyles?: StyleProp<ViewStyle> | StyleProp<ViewStyle>[],
@@ -906,6 +1349,7 @@ function ChangedFilesTree({
           onActivate={handleSelectFile}
           onSelect={handleSelectPath}
           onOpenFile={mode.onOpenFile}
+          onOpenToSide={mode.onOpenToSide}
           onAddToChat={mode.onAddToChat}
           onCopyPath={mode.onCopyPath}
           onCopyRelativePath={mode.onCopyRelativePath}
@@ -982,19 +1426,102 @@ function ChangesTreeRail({
   );
 }
 
+function ChangesBody({
+  presentation,
+  children,
+  desktopTreeVisible,
+  isMobile,
+  files,
+  mode,
+  onSelectFile,
+  treeWidth,
+  onTreeWidthChange,
+  collapsedFolderPaths,
+  onCollapsedFolderPathsChange,
+}: {
+  presentation: ChangesPresentation;
+  children: ReactElement;
+  desktopTreeVisible: boolean;
+  isMobile: boolean;
+  files: ParsedDiffFile[];
+  mode: WorkingDiffMode;
+  onSelectFile: (path: string) => void;
+  treeWidth?: number;
+  onTreeWidthChange: (width: number) => void;
+  collapsedFolderPaths: string[];
+  onCollapsedFolderPathsChange: (paths: string[]) => void;
+}) {
+  if (presentation === "tree") {
+    if (files.length === 0) return children;
+    return (
+      <ChangedFilesTree
+        files={files}
+        mode={mode}
+        onSelectFile={onSelectFile}
+        collapsedFolderPaths={collapsedFolderPaths}
+        onCollapsedFolderPathsChange={onCollapsedFolderPathsChange}
+      />
+    );
+  }
+  if (presentation === "diff") return children;
+  return (
+    <ChangesTreeRail
+      shown={desktopTreeVisible && !isMobile && files.length > 0}
+      files={files}
+      mode={mode}
+      onSelectFile={onSelectFile}
+      treeWidth={treeWidth}
+      onTreeWidthChange={onTreeWidthChange}
+      collapsedFolderPaths={collapsedFolderPaths}
+      onCollapsedFolderPathsChange={onCollapsedFolderPathsChange}
+    >
+      {children}
+    </ChangesTreeRail>
+  );
+}
+
+function ChangesCommits({
+  presentation,
+  serverId,
+  cwd,
+  collapsed,
+  onCommitPress,
+  onCollapsedChange,
+}: {
+  presentation: ChangesPresentation;
+  serverId: string;
+  cwd: string;
+  collapsed: boolean;
+  onCommitPress: (sha: string) => void;
+  onCollapsedChange: (collapsed: boolean) => void;
+}) {
+  if (presentation === "diff") return null;
+  return (
+    <CommitsSection
+      serverId={serverId}
+      cwd={cwd}
+      onCommitPress={onCommitPress}
+      collapsed={collapsed}
+      onCollapsedChange={onCollapsedChange}
+    />
+  );
+}
+
 function useDiffTabNavigation({
   serverId,
   workspaceId,
   cwd,
   isMobile,
+  openInSidePane,
 }: {
   serverId: string;
   workspaceId?: string | null;
   cwd: string;
   isMobile: boolean;
+  openInSidePane: OpenInSidePanePreferences;
 }) {
   const openTab = useWorkspaceLayoutStore((state) => state.openTab);
-  const openWorkspaceTabInFocusedPane = useCallback(
+  const openWorkspaceTab = useCallback(
     (workspaceKey: string, target: WorkspaceTabTarget, placement?: WorkspaceTabPlacement) =>
       openTab({ workspaceKey, target, intent: "reveal", placement }),
     [openTab],
@@ -1003,47 +1530,36 @@ function useDiffTabNavigation({
     () => buildWorkspaceTabPersistenceKey({ serverId, workspaceId: workspaceId ?? cwd }),
     [cwd, serverId, workspaceId],
   );
-  const changesTabOpen = false;
-  const openChanges = useCallback(
-    (path?: string) => {
-      if (!persistenceKey || isMobile) {
-        return;
-      }
-      openWorkspaceTabInFocusedPane(
-        persistenceKey,
-        {
-          kind: "working_diff",
-          ...(path ? { focusPath: path, focusRequestId: Date.now() } : {}),
-        },
-        FOCUSED_PANE_PLACEMENT,
-      );
-    },
-    [isMobile, openWorkspaceTabInFocusedPane, persistenceKey],
-  );
-  const toggleChanges = useCallback(() => {
+  const showMobileAgent = usePanelStore((state) => state.showMobileAgent);
+  const openDiff = useCallback(() => {
     if (!persistenceKey || isMobile) {
       return;
     }
-    openChanges();
-  }, [isMobile, openChanges, persistenceKey]);
+    openWorkspaceTab(persistenceKey, { kind: "working_diff" }, FOCUSED_PANE_PLACEMENT);
+  }, [isMobile, openWorkspaceTab, persistenceKey]);
   const openCommit = useCallback(
     (sha: string) => {
       if (persistenceKey) {
-        openWorkspaceTabInFocusedPane(
-          persistenceKey,
-          { kind: "commit_diff", sha },
-          FOCUSED_PANE_PLACEMENT,
-        );
+        openWorkspaceTab(persistenceKey, { kind: "commit_diff", sha }, FOCUSED_PANE_PLACEMENT);
       }
     },
-    [openWorkspaceTabInFocusedPane, persistenceKey],
+    [openWorkspaceTab, persistenceKey],
   );
+  const openPullRequest = useCallback(() => {
+    if (!persistenceKey) return;
+    openPreferredWorkspaceTarget({
+      isCompact: isMobile,
+      workspaceKey: persistenceKey,
+      target: { kind: "pull_request" },
+      source: "pullRequests",
+      preferences: openInSidePane,
+    });
+    if (isMobile) showMobileAgent();
+  }, [isMobile, openInSidePane, persistenceKey, showMobileAgent]);
   return {
-    changesTabOpen,
-    openChanges,
-    toggleChanges,
+    openDiff,
     openCommit,
-    onChangesFilePress: changesTabOpen ? openChanges : undefined,
+    openPullRequest,
   };
 }
 
@@ -1052,24 +1568,27 @@ export function ChangesSurface({
   workspaceId,
   cwd,
   enabled,
-  host,
+  presentation = "combined",
   modeScope,
   focusPath,
   focusRequestId,
   onOpenFile,
+  onOpenToSide,
+  onSelectDiffFile,
   onAddToChat,
   state: changesState,
   onStateChange,
 }: ChangesSurfaceProps) {
   const { settings: appSettings } = useAppSettings();
+  const { preferences, updatePreferences } = useChangesPreferences();
   const { t } = useTranslation();
   const isMobile = useIsCompactFormFactor();
   const canUseSplitLayout = isWeb && !isMobile;
   const instanceState = changesState ?? defaultChangesState;
   const updateState = onStateChange ?? noopStateChange;
-  const wrapLines = instanceState.wrapLines;
+  const wrapLines = preferences.wrapLines;
   const desktopTreeVisible = instanceState.treeVisible;
-  const effectiveLayout = resolveDiffLayout(instanceState.layout, canUseSplitLayout);
+  const effectiveLayout = resolveDiffLayout(preferences.layout, canUseSplitLayout);
   const collapsedFilePaths = instanceState.collapsedFilePaths;
   const updateCollapsedFilePaths = useCallback(
     (paths: string[]) => updateState({ ...instanceState, collapsedFilePaths: paths }),
@@ -1085,26 +1604,23 @@ export function ChangesSurface({
   );
 
   const handleToggleWrapLines = useCallback(() => {
-    updateState({ ...instanceState, wrapLines: !wrapLines });
-  }, [instanceState, updateState, wrapLines]);
+    void updatePreferences({ wrapLines: !wrapLines });
+  }, [updatePreferences, wrapLines]);
 
   const handleToggleHideWhitespace = useCallback(() => {
-    updateState({
-      ...instanceState,
-      hideWhitespace: !instanceState.hideWhitespace,
-    });
-  }, [instanceState, updateState]);
+    void updatePreferences({ hideWhitespace: !preferences.hideWhitespace });
+  }, [preferences.hideWhitespace, updatePreferences]);
+
+  const handleToggleInlineDiff = useCallback(() => {
+    void updatePreferences({ inlineDiff: !preferences.inlineDiff });
+  }, [preferences.inlineDiff, updatePreferences]);
 
   const handleToggleLayout = useCallback(() => {
-    updateState({
-      ...instanceState,
-      layout: instanceState.layout === "unified" ? "split" : "unified",
-    });
-  }, [instanceState, updateState]);
+    const layout = preferences.layout === "unified" ? "split" : "unified";
+    void updatePreferences({ layout });
+  }, [preferences.layout, updatePreferences]);
   const codeFontSize = appSettings.codeFontSize;
 
-  const overflowToggleStyle = useMemo(() => buildOverflowButtonStyle(isMobile), [isMobile]);
-
   const toast = useToast();
   const isLocalDaemon = useIsLocalDaemon(serverId);
   const { targets: desktopOpenTargets } = useDesktopOpenTargets({
@@ -1112,13 +1628,16 @@ export function ChangesSurface({
   });
   const fileManagerTarget = desktopOpenTargets.find((target) => target.kind === "file-manager");
   const {
-    changesTabOpen: workspaceChangesTabOpen,
-    toggleChanges: handleToggleChangesTab,
+    openDiff: handleOpenDiff,
     openCommit: handleCommitPress,
-    onChangesFilePress: workspaceOnChangesFilePress,
-  } = useDiffTabNavigation({ serverId, workspaceId, cwd, isMobile });
-  const changesTabOpen = resolveChangesTabOpen(host, workspaceChangesTabOpen);
-  const onChangesFilePress = resolveChangesFilePress(host, workspaceOnChangesFilePress);
+    openPullRequest: handleOpenPullRequest,
+  } = useDiffTabNavigation({
+    serverId,
+    workspaceId,
+    cwd,
+    isMobile,
+    openInSidePane: appSettings.openInSidePane,
+  });
   const refreshSupported = useSessionStore(
     (s) => s.sessions[serverId]?.serverInfo?.features?.checkoutRefresh === true,
   );
@@ -1162,7 +1681,7 @@ export function ChangesSurface({
     serverId,
     workspaceId: workspaceId ?? undefined,
     cwd,
-    ignoreWhitespace: instanceState.hideWhitespace,
+    ignoreWhitespace: preferences.hideWhitespace,
     enabled: enabled !== false,
     modeScope,
   });
@@ -1171,9 +1690,10 @@ export function ChangesSurface({
     workspaceId: workspaceId ?? undefined,
     cwd,
     attachment: reviewAttachment,
-    enabled: !changesTabOpen,
+    enabled: true,
   });
   const {
+    status: pullRequestStatus,
     githubFeaturesEnabled,
     forge,
     authState,
@@ -1288,21 +1808,28 @@ export function ChangesSurface({
     (!externalFocusRequest || localFocusRequest.revision >= externalFocusRequest.revision)
       ? localFocusRequest
       : externalFocusRequest;
-  const handleSelectTreeFile = useCallback((path: string) => {
-    setLocalFocusRequest((current) => ({
-      path,
-      revision: Math.max(Date.now(), (current?.revision ?? 0) + 1),
-    }));
-  }, []);
+  const handleSelectTreeFile = useCallback(
+    (path: string) => {
+      if (presentation === "tree" && onSelectDiffFile) {
+        onSelectDiffFile(path);
+        return;
+      }
+      setLocalFocusRequest((current) => ({
+        path,
+        revision: Math.max(Date.now(), (current?.revision ?? 0) + 1),
+      }));
+    },
+    [onSelectDiffFile, presentation],
+  );
   const workingMode = useMemo(
     () => ({
       kind: "working" as const,
       reviewActions,
-      onFilePress: onChangesFilePress,
       focusPath: documentFocusRequest?.path,
       focusRequestId: documentFocusRequest?.revision,
       workspaceFileDragScope: workspaceId ? { serverId, workspaceId } : undefined,
       onOpenFile,
+      onOpenToSide,
       onAddToChat,
       onCopyPath: handleCopyPath,
       onCopyRelativePath: handleCopyRelativePath,
@@ -1314,12 +1841,12 @@ export function ChangesSurface({
     }),
     [
       reviewActions,
-      onChangesFilePress,
       documentFocusRequest?.path,
       documentFocusRequest?.revision,
       serverId,
       workspaceId,
       onOpenFile,
+      onOpenToSide,
       onAddToChat,
       handleCopyPath,
       handleCopyRelativePath,
@@ -1362,13 +1889,13 @@ export function ChangesSurface({
     () => computeCommittedDiffDescription(branchLabel, baseRefLabel),
     [baseRefLabel, branchLabel],
   );
-  const emptyMessage = computeEmptyMessage(instanceState.hideWhitespace, diffMode, baseRefLabel, {
+  const emptyMessage = computeEmptyMessage(preferences.hideWhitespace, diffMode, baseRefLabel, {
     hiddenWhitespace: t("workspace.git.diff.emptyHiddenWhitespace"),
     uncommitted: t("workspace.git.diff.emptyUncommitted"),
     againstBase: (label) => t("workspace.git.diff.emptyAgainstBase", { baseRef: label }),
   });
   const emptyAction = computeChangesEmptyAction({
-    hideWhitespace: instanceState.hideWhitespace,
+    hideWhitespace: preferences.hideWhitespace,
     diffMode,
     status,
     seeUncommittedLabel: t("workspace.git.diff.seeUncommittedChanges"),
@@ -1400,8 +1927,10 @@ export function ChangesSurface({
     </DiffBodyContent>
   );
   const bodyContent = (
-    <ChangesTreeRail
-      shown={desktopTreeVisible && !isMobile && files.length > 0}
+    <ChangesBody
+      presentation={presentation}
+      desktopTreeVisible={desktopTreeVisible}
+      isMobile={isMobile}
       files={files}
       mode={workingMode}
       onSelectFile={handleSelectTreeFile}
@@ -1411,7 +1940,93 @@ export function ChangesSurface({
       onCollapsedFolderPathsChange={updateCollapsedFolderPaths}
     >
       {diffContent}
-    </ChangesTreeRail>
+    </ChangesBody>
+  );
+  const toolbarMode = useMemo(
+    () =>
+      buildChangesToolbarMode({
+        presentation,
+        compact: isMobile,
+        hasChanges,
+        canUseSplitLayout,
+        refreshSupported,
+        isRefreshing,
+        layout: preferences.layout,
+        hideWhitespace: preferences.hideWhitespace,
+        wrapLines,
+        treeVisible: desktopTreeVisible,
+        onOpenDiff: handleOpenDiff,
+        inlineDiff: !isMobile
+          ? { value: preferences.inlineDiff, onToggle: handleToggleInlineDiff }
+          : null,
+        onRefresh: handleRefresh,
+        onCollapseAll: handleCollapseAllFiles,
+        onExpandAll: handleExpandAllFiles,
+        allFilesCollapsed,
+        onToggleLayout: handleToggleLayout,
+        onToggleHideWhitespace: handleToggleHideWhitespace,
+        onToggleWrapLines: handleToggleWrapLines,
+        onToggleTree: handleToggleDesktopTree,
+      }),
+    [
+      allFilesCollapsed,
+      canUseSplitLayout,
+      desktopTreeVisible,
+      handleCollapseAllFiles,
+      handleExpandAllFiles,
+      handleOpenDiff,
+      handleToggleInlineDiff,
+      handleRefresh,
+      handleToggleDesktopTree,
+      handleToggleHideWhitespace,
+      handleToggleLayout,
+      handleToggleWrapLines,
+      hasChanges,
+      preferences.hideWhitespace,
+      preferences.inlineDiff,
+      preferences.layout,
+      isMobile,
+      isRefreshing,
+      presentation,
+      refreshSupported,
+      wrapLines,
+    ],
+  );
+  const changesHeaderModel = useMemo(
+    () =>
+      buildChangesHeaderModel({
+        branchName: currentBranchName,
+        committedDescription: committedDiffDescription,
+        compact: isMobile,
+        cwd,
+        diffMode,
+        gitActions,
+        mode: toolbarMode,
+        onOpenPullRequest: handleOpenPullRequest,
+        onSelectBase: handleSelectBase,
+        onSelectUncommitted: handleSelectUncommitted,
+        pullRequest: selectPrHintFromStatus(pullRequestStatus, forge),
+        selectedDiffStat,
+        serverId,
+        workspaceId,
+      }),
+    [
+      committedDiffDescription,
+      currentBranchName,
+      cwd,
+      diffMode,
+      gitActions,
+      handleOpenPullRequest,
+      handleSelectBase,
+      handleSelectUncommitted,
+      isMobile,
+      forge,
+      pullRequestStatus,
+      selectedDiffStat,
+      serverId,
+      toolbarMode,
+      workspaceId,
+    ],
   );
 
   return (
@@ -1422,38 +2037,11 @@ export function ChangesSurface({
       style={styles.container}
     >
       {isGit ? (
-        <ChangesToolbar
-          branchName={currentBranchName}
-          allFilesCollapsed={allFilesCollapsed}
-          canUseSplitLayout={canUseSplitLayout}
-          changesTabOpen={changesTabOpen}
-          committedDescription={committedDiffDescription}
-          cwd={cwd}
-          desktopTreeVisible={desktopTreeVisible}
-          diffMode={diffMode}
-          gitActions={gitActions}
-          hasFiles={hasChanges}
-          hideWhitespace={instanceState.hideWhitespace}
-          host={host}
-          isMobile={isMobile}
-          isRefreshing={isRefreshing}
-          layout={instanceState.layout}
-          overflowToggleStyle={overflowToggleStyle}
-          refreshSupported={refreshSupported}
-          selectedDiffStat={selectedDiffStat}
-          serverId={serverId}
-          workspaceId={workspaceId}
-          wrapLines={wrapLines}
-          onCollapseAll={handleCollapseAllFiles}
-          onExpandAll={handleExpandAllFiles}
-          onRefresh={handleRefresh}
-          onSelectBase={handleSelectBase}
-          onSelectUncommitted={handleSelectUncommitted}
-          onToggleChangesTab={handleToggleChangesTab}
-          onToggleDesktopTree={handleToggleDesktopTree}
-          onToggleHideWhitespace={handleToggleHideWhitespace}
-          onToggleLayout={handleToggleLayout}
-          onToggleWrapLines={handleToggleWrapLines}
+        <ChangesHeader
+          compact={isMobile}
+          repository={changesHeaderModel.repository}
+          comparison={changesHeaderModel.comparison}
+          sidebarSurface={presentation === "tree"}
         />
       ) : null}
 
@@ -1467,7 +2055,8 @@ export function ChangesSurface({
 
       <View style={styles.diffContainer}>{bodyContent}</View>
 
-      <CommitsSection
+      <ChangesCommits
+        presentation={presentation}
         serverId={serverId}
         cwd={cwd}
         onCommitPress={handleCommitPress}
@@ -1486,14 +2075,15 @@ const styles = StyleSheet.create((theme) => ({
   changesToolbar: {
     flexDirection: "row",
     alignItems: "center",
-    justifyContent: "space-between",
     gap: theme.spacing[2],
     paddingLeft: theme.spacing[2],
-    paddingRight: theme.spacing[3],
+  },
+  changesToolbarSidebar: {
+    backgroundColor: theme.colors.surfaceSidebar,
   },
   changesToolbarIdentity: {
+    flex: 1,
     minWidth: 0,
-    flexShrink: 1,
     flexDirection: "row",
     alignItems: "center",
     gap: theme.spacing[1],
@@ -1502,31 +2092,8 @@ const styles = StyleSheet.create((theme) => ({
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "flex-end",
-    gap: theme.spacing[1],
     flexShrink: 0,
   },
-  diffModeTrigger: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: theme.spacing[1],
-    paddingHorizontal: theme.spacing[1],
-    height: {
-      xs: 28,
-      sm: 28,
-      md: 24,
-    },
-    borderRadius: theme.borderRadius.base,
-    flexShrink: 0,
-  },
-  diffModeTriggerHovered: {
-    backgroundColor: theme.colors.surface2,
-  },
-  diffStatusText: {
-    fontSize: theme.fontSize.sm,
-    lineHeight: theme.fontSize.sm * 1.25,
-    color: theme.colors.foregroundMuted,
-  },
   diffStatusIconHidden: {
     opacity: 0,
   },
diff --git a/packages/app/src/git/file-header.tsx b/packages/app/src/git/file-header.tsx
index 2e34415192..9fb72dc8bb 100644
--- a/packages/app/src/git/file-header.tsx
+++ b/packages/app/src/git/file-header.tsx
@@ -9,7 +9,7 @@ import { MaterialFileIcon } from "@/components/material-file-icon";
 import {
   treeRowPaddingLeft,
   workspaceTreeRowStyles,
-  WORKSPACE_FILE_ROW_TRAILING_PADDING,
+  WORKSPACE_PANE_TRAILING_GLYPH_RAIL,
   WORKSPACE_FILE_ROW_VERTICAL_PADDING,
   WORKSPACE_TREE_ICON_LABEL_GAP,
   WORKSPACE_TREE_ICON_SIZE,
@@ -32,6 +32,7 @@ export interface FileHeaderProps {
   onActivate?: (path: string) => void;
   onSelect?: (path: string) => void;
   onOpenFile?: (path: string) => void;
+  onOpenToSide?: (path: string) => void;
   onAddToChat?: (path: string) => void;
   onCopyPath?: (path: string) => void;
   onCopyRelativePath?: (path: string) => void;
@@ -119,24 +120,10 @@ function fileChange(file: ParsedDiffFile): "added" | "deleted" | "modified" {
   return "modified";
 }
 
-function documentFileChangeIcon(file: ParsedDiffFile, showsBodyState: boolean) {
-  if (!showsBodyState) return null;
-  if (file.isNew) return <FileChangeIcon change="added" />;
-  if (file.isDeleted) return <FileChangeIcon change="deleted" />;
-  return null;
-}
-
-function treeFileChangeIcon(file: ParsedDiffFile, showsBodyState: boolean) {
-  return showsBodyState ? null : <FileChangeIcon change={fileChange(file)} />;
-}
-
-function fileHeaderRightStyle(showsBodyState: boolean) {
-  return showsBodyState ? styles.right : [styles.right, styles.treeRight];
-}
-
 function FileHeaderMenu({
   file,
   onOpenFile,
+  onOpenToSide,
   onAddToChat,
   onCopyPath,
   onCopyRelativePath,
@@ -148,6 +135,7 @@ function FileHeaderMenu({
   testID,
 }: FileHeaderProps) {
   const openFile = useCallback(() => onOpenFile?.(file.path), [file.path, onOpenFile]);
+  const openToSide = useCallback(() => onOpenToSide?.(file.path), [file.path, onOpenToSide]);
   const addToChat = useCallback(() => onAddToChat?.(file.path), [file.path, onAddToChat]);
   const copyPath = useCallback(() => onCopyPath?.(file.path), [file.path, onCopyPath]);
   const copyRelativePath = useCallback(
@@ -166,6 +154,7 @@ function FileHeaderMenu({
       fileKind="file"
       fileExists={!file.isDeleted}
       onOpenFile={onOpenFile ? openFile : undefined}
+      onOpenToSide={onOpenToSide ? openToSide : undefined}
       onCopyPath={onCopyPath ? copyPath : undefined}
       onCopyRelativePath={onCopyRelativePath ? copyRelativePath : undefined}
       onReveal={onReveal ? reveal : undefined}
@@ -238,9 +227,7 @@ export const FileHeader = memo(function FileHeader({
   );
   const fileName = fileNameForPath(file.path);
   const nameStyle = fileHeaderNameStyle(showsBodyState, hover.isHovered);
-  const documentChangeIcon = documentFileChangeIcon(file, showsBodyState);
-  const treeChangeIcon = treeFileChangeIcon(file, showsBodyState);
-  const rightStyle = fileHeaderRightStyle(showsBodyState);
+  const changeIcon = <FileChangeIcon change={fileChange(file)} />;
   const content = (
     <View
       style={[styles.content, showsBodyState && styles.documentContent]}
@@ -262,15 +249,14 @@ export const FileHeader = memo(function FileHeader({
         ) : (
           <View style={styles.directorySpacer} />
         )}
-        {documentChangeIcon}
       </View>
-      <View style={rightStyle}>
+      <View style={styles.right}>
         <DiffStat
           additions={file.additions}
           deletions={file.deletions}
           testID={testID ? `${testID}-stat` : undefined}
         />
-        {treeChangeIcon}
+        {changeIcon}
       </View>
     </View>
   );
@@ -332,7 +318,7 @@ const styles = StyleSheet.create((theme) => ({
     flexDirection: "row",
     alignItems: "center",
     paddingLeft: theme.spacing[3],
-    paddingRight: WORKSPACE_FILE_ROW_TRAILING_PADDING,
+    paddingRight: WORKSPACE_PANE_TRAILING_GLYPH_RAIL,
     paddingVertical: WORKSPACE_FILE_ROW_VERTICAL_PADDING,
     gap: theme.spacing[1],
     minWidth: 0,
@@ -354,7 +340,11 @@ const styles = StyleSheet.create((theme) => ({
     justifyContent: "space-between",
     userSelect: "none",
   },
-  documentContent: { height: 28, paddingHorizontal: theme.spacing[3] },
+  documentContent: {
+    height: 28,
+    paddingLeft: theme.spacing[3],
+    paddingRight: WORKSPACE_PANE_TRAILING_GLYPH_RAIL,
+  },
   documentActive: { backgroundColor: theme.colors.surface1 },
   documentPressFeedback: { backgroundColor: theme.colors.surface1 },
   left: {
@@ -369,11 +359,10 @@ const styles = StyleSheet.create((theme) => ({
   right: {
     flexDirection: "row",
     alignItems: "center",
-    gap: theme.spacing[1],
+    gap: theme.spacing[2],
     flexShrink: 0,
     userSelect: "none",
   },
-  treeRight: { gap: theme.spacing[2] },
   icon: {
     width: WORKSPACE_TREE_ICON_SIZE,
     height: WORKSPACE_TREE_ICON_SIZE,
diff --git a/packages/app/src/git/pull-request-state-icon.tsx b/packages/app/src/git/pull-request-state-icon.tsx
new file mode 100644
index 0000000000..4de297f26c
--- /dev/null
+++ b/packages/app/src/git/pull-request-state-icon.tsx
@@ -0,0 +1,32 @@
+import { GitMerge, GitPullRequest, GitPullRequestClosed } from "lucide-react-native";
+import { withUnistyles } from "react-native-unistyles";
+import type { Theme } from "@/styles/theme";
+import type { PrHint } from "@/git/pr-hint";
+
+const ThemedGitPullRequest = withUnistyles(GitPullRequest);
+const ThemedGitMerge = withUnistyles(GitMerge);
+const ThemedGitPullRequestClosed = withUnistyles(GitPullRequestClosed);
+
+const successMapping = (theme: Theme) => ({ color: theme.colors.statusSuccess });
+const mergedMapping = (theme: Theme) => ({ color: theme.colors.statusMerged });
+const dangerMapping = (theme: Theme) => ({ color: theme.colors.statusDanger });
+
+const PRESENTATION = {
+  open: { Icon: ThemedGitPullRequest, color: successMapping },
+  merged: { Icon: ThemedGitMerge, color: mergedMapping },
+  closed: { Icon: ThemedGitPullRequestClosed, color: dangerMapping },
+} as const;
+
+/** The canonical state glyph and color shared by every pull-request badge. */
+export function PullRequestStateIcon({
+  state,
+  size,
+  strokeWidth,
+}: {
+  state: PrHint["state"];
+  size: number;
+  strokeWidth?: number;
+}) {
+  const { Icon, color } = PRESENTATION[state];
+  return <Icon size={size} strokeWidth={strokeWidth} uniProps={color} />;
+}
diff --git a/packages/app/src/hooks/use-changes-preferences/storage.test.ts b/packages/app/src/hooks/use-changes-preferences/storage.test.ts
index 4f37f4a301..7ad31753f2 100644
--- a/packages/app/src/hooks/use-changes-preferences/storage.test.ts
+++ b/packages/app/src/hooks/use-changes-preferences/storage.test.ts
@@ -31,6 +31,7 @@ describe("loadChangesPreferencesFromStorage", () => {
       desktopTreeVisible: false,
       wrapLines: true,
       hideWhitespace: false,
+      inlineDiff: false,
       commitsCollapsed: true,
     });
     expect(storage.entries.get(CHANGES_PREFERENCES_STORAGE_KEY)).toBe(JSON.stringify(result));
@@ -54,6 +55,7 @@ describe("loadChangesPreferencesFromStorage", () => {
       desktopTreeVisible: true,
       hideWhitespace: true,
       wrapLines: false,
+      inlineDiff: false,
       commitsCollapsed: true,
     });
     expect(storage.entries.get(CHANGES_PREFERENCES_STORAGE_KEY)).toBe(persisted);
@@ -87,6 +89,22 @@ describe("changes preferences commitsCollapsed", () => {
   });
 });
 
+describe("changes preferences inlineDiff", () => {
+  it("keeps inline diff disabled by default", () => {
+    expect(DEFAULT_CHANGES_PREFERENCES.inlineDiff).toBe(false);
+  });
+
+  it("round-trips the inline diff preference", async () => {
+    const storage = createInMemoryKeyValueStorage({
+      [CHANGES_PREFERENCES_STORAGE_KEY]: JSON.stringify({ inlineDiff: true }),
+    });
+
+    const prefs = await loadChangesPreferencesFromStorage(storage);
+
+    expect(prefs.inlineDiff).toBe(true);
+  });
+});
+
 describe("saveChangesPreferences", () => {
   it("merges updates onto cached preferences and persists the result", async () => {
     const storage = createInMemoryKeyValueStorage();
diff --git a/packages/app/src/hooks/use-changes-preferences/storage.ts b/packages/app/src/hooks/use-changes-preferences/storage.ts
index 4d49bed65a..0f6c94dce5 100644
--- a/packages/app/src/hooks/use-changes-preferences/storage.ts
+++ b/packages/app/src/hooks/use-changes-preferences/storage.ts
@@ -13,6 +13,7 @@ const changesPreferencesSchema = z.strictObject({
   viewMode: z.enum(["flat", "tree"]).optional(),
   wrapLines: z.boolean().optional(),
   hideWhitespace: z.boolean().optional(),
+  inlineDiff: z.boolean().optional(),
   commitsCollapsed: z.boolean().optional(),
 });
 
@@ -21,6 +22,7 @@ export interface ChangesPreferences {
   desktopTreeVisible: boolean;
   wrapLines: boolean;
   hideWhitespace: boolean;
+  inlineDiff: boolean;
   commitsCollapsed: boolean;
 }
 
@@ -29,6 +31,7 @@ export const DEFAULT_CHANGES_PREFERENCES: ChangesPreferences = {
   desktopTreeVisible: false,
   wrapLines: false,
   hideWhitespace: false,
+  inlineDiff: false,
   commitsCollapsed: true,
 };
 
diff --git a/packages/app/src/hooks/use-settings/index.ts b/packages/app/src/hooks/use-settings/index.ts
index d24a7ca346..514d2cd355 100644
--- a/packages/app/src/hooks/use-settings/index.ts
+++ b/packages/app/src/hooks/use-settings/index.ts
@@ -36,6 +36,7 @@ import {
   sanitizeFontFamily,
   saveAppSettings as saveAppSettingsPure,
   type AppSettings,
+  type OpenInSidePanePreferences,
   type DesktopSettingsBridge,
   type KeyValueStorage,
   type ReleaseChannel,
@@ -71,6 +72,7 @@ export {
 export type {
   AppSettings,
   AppLanguage,
+  OpenInSidePanePreferences,
   DesktopSettingsBridge,
   KeyValueStorage,
   ReleaseChannel,
diff --git a/packages/app/src/hooks/use-settings/storage.ts b/packages/app/src/hooks/use-settings/storage.ts
index d4efe753ac..5233beaf5d 100644
--- a/packages/app/src/hooks/use-settings/storage.ts
+++ b/packages/app/src/hooks/use-settings/storage.ts
@@ -85,10 +85,30 @@ export interface AppSettings {
   toolCallDetailLevel: ToolCallDetailLevel;
   chatOutlineEnabled: boolean;
   vimKeybindings: boolean;
-  /** Route implicitly opened supporting tabs into the Side panel. Desktop only. */
-  openSupportingTabsInSidePanel: boolean;
+  /** Desktop-only preferences for implicit opens into the ordinary side pane. */
+  openInSidePane: OpenInSidePanePreferences;
 }
 
+export interface OpenInSidePanePreferences {
+  explorerFiles: boolean;
+  explorerChanges: boolean;
+  chatFiles: boolean;
+  diffFiles: boolean;
+  subagents: boolean;
+  pullRequests: boolean;
+  changesLinks: boolean;
+}
+
+export const DEFAULT_OPEN_IN_SIDE_PANE_PREFERENCES: OpenInSidePanePreferences = {
+  explorerFiles: false,
+  explorerChanges: false,
+  chatFiles: false,
+  diffFiles: false,
+  subagents: false,
+  pullRequests: false,
+  changesLinks: false,
+};
+
 export interface Settings extends AppSettings {
   manageBuiltInDaemon: boolean;
   releaseChannel: ReleaseChannel;
@@ -116,7 +136,7 @@ export const DEFAULT_CLIENT_SETTINGS: AppSettings = {
   toolCallDetailLevel: "detailed",
   chatOutlineEnabled: true,
   vimKeybindings: false,
-  openSupportingTabsInSidePanel: true,
+  openInSidePane: DEFAULT_OPEN_IN_SIDE_PANE_PREFERENCES,
 };
 
 export const DEFAULT_APP_SETTINGS: Settings = {
@@ -209,7 +229,19 @@ const StoredAppSettingsSchema = z
     compactToolCalls: z.boolean().optional().catch(undefined),
     chatOutlineEnabled: z.boolean().catch(true),
     vimKeybindings: z.boolean().catch(false),
-    openSupportingTabsInSidePanel: z.boolean().catch(true),
+    openInSidePane: z
+      .object({
+        explorerFiles: z.boolean().catch(false),
+        explorerChanges: z.boolean().catch(false),
+        chatFiles: z.boolean().catch(false),
+        diffFiles: z.boolean().catch(false),
+        subagents: z.boolean().catch(false),
+        pullRequests: z.boolean().catch(false),
+        changesLinks: z.boolean().catch(false),
+      })
+      .catch(DEFAULT_OPEN_IN_SIDE_PANE_PREFERENCES),
+    // COMPAT(explorerSidebarRouting): replaced by source-specific side-pane preferences in v0.6.
+    openSupportingTabsInSidePanel: z.boolean().optional().catch(undefined),
     // COMPAT(rendererDesktopSettings): these fields used to share this renderer-owned key.
     manageBuiltInDaemon: z.boolean().optional().catch(undefined),
     releaseChannel: z.enum(["stable", "beta"]).optional().catch(undefined),
diff --git a/packages/app/src/i18n/resources.test.ts b/packages/app/src/i18n/resources.test.ts
index e493f20a2d..95e8bc69f7 100644
--- a/packages/app/src/i18n/resources.test.ts
+++ b/packages/app/src/i18n/resources.test.ts
@@ -493,13 +493,10 @@ describe("translation resources", () => {
     expect(en.agentList.dateSections.recent).toBe("Recent");
     expect(en.message.attachments.imagePreviewUnavailable).toBe("Image preview unavailable.");
     expect(en.message.attachments.imagePreviewLoadFailed).toBe("Unable to load image preview.");
-    expect(en.workspace.tabs.sidePanel.changes).toBe("Changes");
-    expect(en.workspace.tabs.sidePanel.files).toBe("Files");
+    expect(en.workspace.tabs.explorerSidebar.changes).toBe("Changes");
+    expect(en.workspace.tabs.explorerSidebar.files).toBe("Files");
     expect(en.workspace.tabs.actions.maximizePane).toBe("Maximize pane");
     expect(en.workspace.tabs.actions.restorePane).toBe("Restore pane");
-    expect(en.settings.shortcuts.help.toggleExplorerPaneMaximization).toBe(
-      "Toggle Side panel maximization",
-    );
     expect(en.branchSwitcher.triggerTooltip).toBe("Switch workspace branch");
     expect(en.branchSwitcher.uncommittedTitle).toBe("Uncommitted changes");
     expect(en.branchSwitcher.uncommittedMessage).toBe(
diff --git a/packages/app/src/i18n/resources/ar.ts b/packages/app/src/i18n/resources/ar.ts
index 0a2accbf57..96ea2c6f57 100644
--- a/packages/app/src/i18n/resources/ar.ts
+++ b/packages/app/src/i18n/resources/ar.ts
@@ -65,7 +65,7 @@ export const ar: TranslationResources = {
       agents: "الوكلاء",
       newAgent: "وكيل جديد",
       open: "فتح {{name}}",
-      openInSidePanel: "فتح {{name}} في اللوحة الجانبية",
+      openInSidePane: "فتح {{name}} في اللوحة الجانبية",
       openInFocusedPane: "فتح {{name}} في الجزء النشط",
       addProject: "إضافة مشروع",
       home: "بيت",
@@ -416,6 +416,7 @@ export const ar: TranslationResources = {
     },
     fileActions: {
       openFile: "افتح الملف",
+      openToSide: "فتح إلى الجانب",
       copyPath: "نسخ المسار",
       copyRelativePath: "نسخ المسار النسبي",
       revealIn: "إظهار في {{target}}",
@@ -582,6 +583,7 @@ export const ar: TranslationResources = {
         closeLeft: "بالقرب من اليسار",
         closeRight: "قريب من اليمين",
         closeOthers: "أغلق علامات التبويب الأخرى",
+        moveToMain: "Move to main panel",
         reloadAgent: "إعادة تحميل الوكيل",
         reloadAgentTooltip: "قم بإعادة تحميل الوكيل لتحديث المهارات أو MCPs أو حالة تسجيل الدخول.",
         close: "يغلق",
@@ -607,7 +609,7 @@ export const ar: TranslationResources = {
         terminalProfilesMenu: "Terminal profiles",
         editTerminalProfiles: "Edit profiles",
       },
-      sidePanel: {
+      explorerSidebar: {
         open: "افتح اللوحة الجانبية",
         close: "إغلاق اللوحة الجانبية",
         toggle: "تبديل اللوحة الجانبية",
@@ -853,6 +855,7 @@ export const ar: TranslationResources = {
       },
       diff: {
         openChangesTab: "فتح علامة تبويب التغييرات",
+        openDiffTab: "فتح علامة تبويب الفرق",
         closeChangesTab: "إغلاق علامة تبويب التغييرات",
         binaryFile: "ملف ثنائي",
         tooLarge: "الفرق كبير جدًا بحيث لا يمكن عرضه",
@@ -863,6 +866,7 @@ export const ar: TranslationResources = {
         switchToUnified: "التبديل إلى الفرق الموحد",
         switchToSplit: "التبديل إلى الفرق جنبًا إلى جنب",
         options: "خيارات الفرق",
+        inlineDiff: "فرق مضمّن",
         hideWhitespace: "إخفاء المسافة البيضاء",
         showWhitespace: "إظهار المسافة البيضاء",
         scrollLongLines: "قم بتمرير الخطوط الطويلة",
@@ -1211,6 +1215,12 @@ export const ar: TranslationResources = {
     },
   },
   desktop: {
+    windowControls: {
+      minimize: "تصغير النافذة",
+      maximize: "تكبير النافذة",
+      restore: "استعادة النافذة",
+      close: "إغلاق النافذة",
+    },
     quitting: {
       title: "جارٍ إنهاء Paseo...",
       detail: "إيقاف البرنامج الخفي المحلي.",
@@ -1744,6 +1754,7 @@ export const ar: TranslationResources = {
     },
     diff: {
       changesLabel: "التغييرات",
+      diffLabel: "الفرق",
       changesSubtitle: "فروقات شجرة العمل",
       commitSubtitle: "فروقات الالتزام",
       uncommittedSubtitle: "تغييرات غير ملتزم بها",
@@ -1838,6 +1849,7 @@ export const ar: TranslationResources = {
     sections: {
       general: "عام",
       appearance: "مظهر",
+      layout: en.settings.sections.layout,
       editor: "المحرر",
       shortcuts: "الاختصارات",
       integrations: "التكامل",
@@ -1846,6 +1858,7 @@ export const ar: TranslationResources = {
       diagnostics: "التشخيص",
       about: "عن",
     },
+    layout: en.settings.layout,
     editor: {
       title: "المحرر",
       vimKeybindings: "اختصارات Vim",
@@ -1935,11 +1948,6 @@ export const ar: TranslationResources = {
         description: "يتم الاحتفاظ بالخطوط في المخزن المؤقت الطرفي المدمج",
         accessibilityLabel: "خطوط التمرير Terminal",
       },
-      sidePanelRouting: {
-        label: "فتح علامات التبويب المساعدة في اللوحة الجانبية",
-        description:
-          "تفتح روابط الملفات وطلبات السحب وتقدم الإعداد بجوار عملك بدلاً من الجزء المركّز عليه",
-      },
       autoExpandReasoning: {
         label: "عرض التفكير دائماً",
         description: "إظهار تفكير الوكيل وخطوات الاستدلال بشكل كامل بشكل افتراضي",
@@ -2134,7 +2142,6 @@ export const ar: TranslationResources = {
         toggleBothSidebars: "تبديل كلا الشريطين الجانبيين",
         toggleSettings: "تبديل الإعدادات",
         toggleFocusMode: "تبديل وضع التركيز",
-        toggleExplorerPaneMaximization: "تبديل تكبير اللوحة الجانبية",
         cycleTheme: "موضوع الدورة",
         focusMessageInput: "التركيز على إدخال الرسالة",
         cycleAgentMode: "تبديل وضع الوكيل",
diff --git a/packages/app/src/i18n/resources/en.ts b/packages/app/src/i18n/resources/en.ts
index 24018981ab..30a225eaa9 100644
--- a/packages/app/src/i18n/resources/en.ts
+++ b/packages/app/src/i18n/resources/en.ts
@@ -62,7 +62,7 @@ export const en = {
       agents: "Agents",
       newAgent: "New agent",
       open: "Open {{name}}",
-      openInSidePanel: "Open {{name}} in Side panel",
+      openInSidePane: "Open {{name}} in side pane",
       openInFocusedPane: "Open {{name}} in focused pane",
       addProject: "Add project",
       home: "Home",
@@ -414,6 +414,7 @@ export const en = {
     },
     fileActions: {
       openFile: "Open file",
+      openToSide: "Open to the side",
       copyPath: "Copy path",
       copyRelativePath: "Copy relative path",
       revealIn: "Reveal in {{target}}",
@@ -580,6 +581,7 @@ export const en = {
         closeLeft: "Close to the left",
         closeRight: "Close to the right",
         closeOthers: "Close other tabs",
+        moveToMain: "Move to main panel",
         reloadAgent: "Reload agent",
         reloadAgentTooltip: "Reload agent to update skills, MCPs or login status.",
         close: "Close",
@@ -605,10 +607,10 @@ export const en = {
         terminalProfilesMenu: "Terminal profiles",
         editTerminalProfiles: "Edit profiles",
       },
-      sidePanel: {
-        open: "Open side panel",
-        close: "Close side panel",
-        toggle: "Toggle side panel",
+      explorerSidebar: {
+        open: "Open Explorer sidebar",
+        close: "Close Explorer sidebar",
+        toggle: "Toggle Explorer sidebar",
         changes: "Changes",
         files: "Files",
       },
@@ -862,6 +864,7 @@ export const en = {
       },
       diff: {
         openChangesTab: "Open Changes tab",
+        openDiffTab: "Open Diff tab",
         closeChangesTab: "Close Changes tab",
         binaryFile: "Binary file",
         tooLarge: "Diff too large to display",
@@ -872,6 +875,7 @@ export const en = {
         switchToUnified: "Switch to unified diff",
         switchToSplit: "Switch to side-by-side diff",
         options: "Diff options",
+        inlineDiff: "Inline diff",
         hideWhitespace: "Hide whitespace",
         showWhitespace: "Show whitespace",
         scrollLongLines: "Scroll long lines",
@@ -1220,6 +1224,12 @@ export const en = {
     },
   },
   desktop: {
+    windowControls: {
+      minimize: "Minimize window",
+      maximize: "Maximize window",
+      restore: "Restore window",
+      close: "Close window",
+    },
     quitting: {
       title: "Quitting Paseo...",
       detail: "Stopping the local daemon.",
@@ -1754,6 +1764,7 @@ export const en = {
     },
     diff: {
       changesLabel: "Changes",
+      diffLabel: "Diff",
       changesSubtitle: "Working tree diff",
       commitSubtitle: "Commit diff",
       uncommittedSubtitle: "Uncommitted changes",
@@ -1848,6 +1859,7 @@ export const en = {
     sections: {
       general: "General",
       appearance: "Appearance",
+      layout: "Layout",
       editor: "Editor",
       shortcuts: "Shortcuts",
       integrations: "Integrations",
@@ -1856,6 +1868,45 @@ export const en = {
       diagnostics: "Diagnostics",
       about: "About",
     },
+    layout: {
+      openInSidePane: {
+        title: "Open location",
+        destinations: {
+          main: "Main panel",
+          side: "On the side",
+        },
+        sources: {
+          explorerFiles: {
+            label: "Selecting a file in Explorer",
+            description: "Open files selected in the Explorer sidebar beside your work",
+          },
+          explorerChanges: {
+            label: "Selecting a change in Explorer",
+            description: "Open diffs selected in the Explorer sidebar beside your work",
+          },
+          chatFiles: {
+            label: "Opening a file from an agent chat",
+            description: "Open file links and tool-call files beside the conversation",
+          },
+          diffFiles: {
+            label: "Opening a file from Changes",
+            description: "Open source files selected from a diff beside it",
+          },
+          subagents: {
+            label: "Opening a subagent",
+            description: "Open subagents beside their parent agent",
+          },
+          pullRequests: {
+            label: "Opening a pull request from Changes",
+            description: "Open pull request details beside Changes",
+          },
+          changesLinks: {
+            label: "Opening Changes from an agent",
+            description: "Open diff stats and review attachments beside the conversation",
+          },
+        },
+      },
+    },
     editor: {
       title: "Editor",
       vimKeybindings: "Vim keybindings",
@@ -1999,11 +2050,6 @@ export const en = {
         description: "Lines kept in the built-in terminal buffer",
         accessibilityLabel: "Terminal scrollback lines",
       },
-      sidePanelRouting: {
-        label: "Open supporting tabs in the Side panel",
-        description:
-          "File links, pull requests, and setup progress open beside your work instead of in the focused pane",
-      },
       autoExpandReasoning: {
         label: "Always expand reasoning",
         description: "Show agent thinking and chain-of-thought blocks fully expanded by default",
@@ -2193,11 +2239,10 @@ export const en = {
         toggleCommandCenter: "Toggle command center",
         showKeyboardShortcuts: "Show keyboard shortcuts",
         toggleLeftSidebar: "Toggle left sidebar",
-        toggleRightSidebar: "Toggle side panel",
+        toggleRightSidebar: "Toggle Explorer sidebar",
         toggleBothSidebars: "Toggle both sidebars",
         toggleSettings: "Toggle settings",
         toggleFocusMode: "Toggle focus mode",
-        toggleExplorerPaneMaximization: "Toggle Side panel maximization",
         cycleTheme: "Cycle theme",
         focusMessageInput: "Focus message input",
         cycleAgentMode: "Cycle agent mode",
diff --git a/packages/app/src/i18n/resources/es.ts b/packages/app/src/i18n/resources/es.ts
index e86ed2b1ab..e17e3fab3a 100644
--- a/packages/app/src/i18n/resources/es.ts
+++ b/packages/app/src/i18n/resources/es.ts
@@ -65,7 +65,7 @@ export const es: TranslationResources = {
       agents: "Agentes",
       newAgent: "Nuevo agente",
       open: "Abrir {{name}}",
-      openInSidePanel: "Abrir {{name}} en el panel lateral",
+      openInSidePane: "Abrir {{name}} en el panel lateral",
       openInFocusedPane: "Abrir {{name}} en el panel enfocado",
       addProject: "Agregar proyecto",
       home: "Hogar",
@@ -420,6 +420,7 @@ export const es: TranslationResources = {
     },
     fileActions: {
       openFile: "Abrir archivo",
+      openToSide: "Abrir al lado",
       copyPath: "Copiar ruta",
       copyRelativePath: "Copiar ruta relativa",
       revealIn: "Mostrar en {{target}}",
@@ -586,6 +587,7 @@ export const es: TranslationResources = {
         closeLeft: "Cerca de la izquierda",
         closeRight: "Cerca de la derecha",
         closeOthers: "Cerrar otras pestañas",
+        moveToMain: "Mover al panel principal",
         reloadAgent: "Recargar agente",
         reloadAgentTooltip:
           "Vuelva a cargar el agente para actualizar habilidades, MCP o estado de inicio de sesión.",
@@ -612,7 +614,7 @@ export const es: TranslationResources = {
         terminalProfilesMenu: "Terminal profiles",
         editTerminalProfiles: "Edit profiles",
       },
-      sidePanel: {
+      explorerSidebar: {
         open: "Abrir panel lateral",
         close: "Cerrar panel lateral",
         toggle: "Alternar panel lateral",
@@ -884,6 +886,7 @@ export const es: TranslationResources = {
       },
       diff: {
         openChangesTab: "Abrir la pestaña Cambios",
+        openDiffTab: "Abrir la pestaña Diferencia",
         closeChangesTab: "Cerrar la pestaña Cambios",
         binaryFile: "archivo binario",
         tooLarge: "La diferencia es demasiado grande para mostrarse",
@@ -894,6 +897,7 @@ export const es: TranslationResources = {
         switchToUnified: "Cambiar a diferencia unificada",
         switchToSplit: "Cambiar a diferencia lado a lado",
         options: "Opciones de diferencia",
+        inlineDiff: "Diferencia integrada",
         hideWhitespace: "Ocultar espacios en blanco",
         showWhitespace: "Mostrar espacios en blanco",
         scrollLongLines: "Desplazarse por largas filas",
@@ -1245,6 +1249,12 @@ export const es: TranslationResources = {
     },
   },
   desktop: {
+    windowControls: {
+      minimize: "Minimizar ventana",
+      maximize: "Maximizar ventana",
+      restore: "Restaurar ventana",
+      close: "Cerrar ventana",
+    },
     quitting: {
       title: "Saliendo dePaseo...",
       detail: "Deteniendo el demonio local.",
@@ -1790,6 +1800,7 @@ export const es: TranslationResources = {
     },
     diff: {
       changesLabel: "Cambios",
+      diffLabel: "Diferencia",
       changesSubtitle: "Diferencias del árbol de trabajo",
       commitSubtitle: "Diferencias del commit",
       uncommittedSubtitle: "Cambios sin confirmar",
@@ -1884,6 +1895,7 @@ export const es: TranslationResources = {
     sections: {
       general: "General",
       appearance: "Apariencia",
+      layout: en.settings.sections.layout,
       editor: "Editor",
       shortcuts: "Atajos",
       integrations: "Integraciones",
@@ -1892,6 +1904,7 @@ export const es: TranslationResources = {
       diagnostics: "Diagnóstico",
       about: "Acerca de",
     },
+    layout: en.settings.layout,
     editor: {
       title: "Editor",
       vimKeybindings: "Atajos de Vim",
@@ -1984,11 +1997,6 @@ export const es: TranslationResources = {
         description: "Líneas mantenidas en el búfer de terminal incorporado",
         accessibilityLabel: "Líneas del historial de terminal",
       },
-      sidePanelRouting: {
-        label: "Abrir pestañas de apoyo en el panel lateral",
-        description:
-          "Los enlaces a archivos, las solicitudes de incorporación y el progreso de configuración se abren junto a tu trabajo en lugar del panel enfocado",
-      },
       autoExpandReasoning: {
         label: "Siempre expandir razonamiento",
         description:
@@ -2185,7 +2193,6 @@ export const es: TranslationResources = {
         toggleBothSidebars: "Alternar ambas barras laterales",
         toggleSettings: "Alternar configuración",
         toggleFocusMode: "Alternar modo de enfoque",
-        toggleExplorerPaneMaximization: "Alternar maximización del panel lateral",
         cycleTheme: "Tema del ciclo",
         focusMessageInput: "Entrada de mensaje de enfoque",
         cycleAgentMode: "Alternar modo del agente",
diff --git a/packages/app/src/i18n/resources/fr.ts b/packages/app/src/i18n/resources/fr.ts
index f68dd38198..86d6d17841 100644
--- a/packages/app/src/i18n/resources/fr.ts
+++ b/packages/app/src/i18n/resources/fr.ts
@@ -66,7 +66,7 @@ export const fr: TranslationResources = {
       agents: "Agents",
       newAgent: "Nouvel agent",
       open: "Ouvrir {{name}}",
-      openInSidePanel: "Ouvrir {{name}} dans le panneau latéral",
+      openInSidePane: "Ouvrir {{name}} dans le panneau latéral",
       openInFocusedPane: "Ouvrir {{name}} dans le volet actif",
       addProject: "Ajouter un projet",
       home: "Maison",
@@ -420,6 +420,7 @@ export const fr: TranslationResources = {
     },
     fileActions: {
       openFile: "Ouvrir le fichier",
+      openToSide: "Ouvrir sur le côté",
       copyPath: "Copier le chemin",
       copyRelativePath: "Copier le chemin relatif",
       revealIn: "Afficher dans {{target}}",
@@ -586,6 +587,7 @@ export const fr: TranslationResources = {
         closeLeft: "Près de la gauche",
         closeRight: "Près de la droite",
         closeOthers: "Fermer les autres onglets",
+        moveToMain: "Déplacer vers le panneau principal",
         reloadAgent: "Agent de rechargement",
         reloadAgentTooltip:
           "Rechargez l'agent pour mettre à jour les compétences, les MCP ou le statut de connexion.",
@@ -612,7 +614,7 @@ export const fr: TranslationResources = {
         terminalProfilesMenu: "Terminal profiles",
         editTerminalProfiles: "Edit profiles",
       },
-      sidePanel: {
+      explorerSidebar: {
         open: "Ouvrir le panneau latéral",
         close: "Fermer le panneau latéral",
         toggle: "Basculer le panneau latéral",
@@ -883,6 +885,7 @@ export const fr: TranslationResources = {
       },
       diff: {
         openChangesTab: "Ouvrir l'onglet Modifications",
+        openDiffTab: "Ouvrir l'onglet Diff",
         closeChangesTab: "Fermer l'onglet Modifications",
         binaryFile: "Fichier binaire",
         tooLarge: "Diff trop grand pour être affiché",
@@ -893,6 +896,7 @@ export const fr: TranslationResources = {
         switchToUnified: "Passer au diff unifié",
         switchToSplit: "Passer au diff côte à côte",
         options: "Options du diff",
+        inlineDiff: "Diff intégré",
         hideWhitespace: "Masquer les espaces",
         showWhitespace: "Afficher les espaces",
         scrollLongLines: "Faire défiler les longues lignes",
@@ -1245,6 +1249,12 @@ export const fr: TranslationResources = {
     },
   },
   desktop: {
+    windowControls: {
+      minimize: "Réduire la fenêtre",
+      maximize: "Agrandir la fenêtre",
+      restore: "Restaurer la fenêtre",
+      close: "Fermer la fenêtre",
+    },
     quitting: {
       title: "QuitterPaseo...",
       detail: "Arrêt du démon local.",
@@ -1795,6 +1805,7 @@ export const fr: TranslationResources = {
     },
     diff: {
       changesLabel: "Modifications",
+      diffLabel: "Diff",
       changesSubtitle: "Différences de l'arbre de travail",
       commitSubtitle: "Différences du commit",
       uncommittedSubtitle: "Modifications non validées",
@@ -1889,6 +1900,7 @@ export const fr: TranslationResources = {
     sections: {
       general: "Général",
       appearance: "Apparence",
+      layout: en.settings.sections.layout,
       editor: "Éditeur",
       shortcuts: "Raccourcis",
       integrations: "Intégrations",
@@ -1897,6 +1909,7 @@ export const fr: TranslationResources = {
       diagnostics: "Diagnostic",
       about: "À propos",
     },
+    layout: en.settings.layout,
     editor: {
       title: "Éditeur",
       vimKeybindings: "Raccourcis Vim",
@@ -1988,11 +2001,6 @@ export const fr: TranslationResources = {
         description: "Lignes conservées dans le tampon du terminal intégré",
         accessibilityLabel: "Lignes de défilementTerminal",
       },
-      sidePanelRouting: {
-        label: "Ouvrir les onglets d'appoint dans le panneau latéral",
-        description:
-          "Les liens de fichiers, les pull requests et la progression de la configuration s'ouvrent à côté de votre travail plutôt que dans le volet actif",
-      },
       autoExpandReasoning: {
         label: "Toujours afficher le raisonnement",
         description: "Afficher le raisonnement de l'agent entièrement développé par défaut",
@@ -2189,7 +2197,6 @@ export const fr: TranslationResources = {
         toggleBothSidebars: "Basculer les deux barres latérales",
         toggleSettings: "Basculer les paramètres",
         toggleFocusMode: "Basculer le mode de mise au point",
-        toggleExplorerPaneMaximization: "Basculer l’agrandissement du panneau latéral",
         cycleTheme: "Thème du cycle",
         focusMessageInput: "Saisie du message de focus",
         cycleAgentMode: "Parcourir les modes de l'agent",
diff --git a/packages/app/src/i18n/resources/ja.ts b/packages/app/src/i18n/resources/ja.ts
index c65aa6ada0..75bf79bc00 100644
--- a/packages/app/src/i18n/resources/ja.ts
+++ b/packages/app/src/i18n/resources/ja.ts
@@ -65,7 +65,7 @@ export const ja: TranslationResources = {
       agents: "エージェント",
       newAgent: "新しいエージェント",
       open: "{{name}}を開く",
-      openInSidePanel: "{{name}}をサイドパネルで開く",
+      openInSidePane: "{{name}}をサイドパネルで開く",
       openInFocusedPane: "{{name}}をフォーカス中のペインで開く",
       addProject: "プロジェクトを追加",
       home: "ホーム",
@@ -420,6 +420,7 @@ export const ja: TranslationResources = {
     },
     fileActions: {
       openFile: "ファイルを開く",
+      openToSide: "横に開く",
       copyPath: "パスをコピー",
       copyRelativePath: "相対パスをコピー",
       revealIn: "{{target}}で表示",
@@ -586,6 +587,7 @@ export const ja: TranslationResources = {
         closeLeft: "左のタブを閉じる",
         closeRight: "右のタブを閉じる",
         closeOthers: "他のタブを閉じる",
+        moveToMain: "メインパネルへ移動",
         reloadAgent: "エージェントを再読み込み",
         reloadAgentTooltip:
           "スキル、MCP、ログイン状態を更新するためにエージェントを再読み込みします。",
@@ -612,7 +614,7 @@ export const ja: TranslationResources = {
         terminalProfilesMenu: "ターミナルプロファイル",
         editTerminalProfiles: "プロファイルを編集",
       },
-      sidePanel: {
+      explorerSidebar: {
         open: "サイドパネルを開く",
         close: "サイドパネルを閉じる",
         toggle: "サイドパネルを切り替え",
@@ -864,6 +866,7 @@ export const ja: TranslationResources = {
       },
       diff: {
         openChangesTab: "変更タブを開く",
+        openDiffTab: "差分タブを開く",
         closeChangesTab: "変更タブを閉じる",
         binaryFile: "バイナリファイル",
         tooLarge: "差分が大きすぎて表示できません",
@@ -874,6 +877,7 @@ export const ja: TranslationResources = {
         switchToUnified: "ユニファイド差分に切り替え",
         switchToSplit: "左右比較差分に切り替え",
         options: "差分オプション",
+        inlineDiff: "インライン差分",
         hideWhitespace: "空白を非表示",
         showWhitespace: "空白を表示",
         scrollLongLines: "長い行をスクロール",
@@ -1223,6 +1227,12 @@ export const ja: TranslationResources = {
     },
   },
   desktop: {
+    windowControls: {
+      minimize: "ウィンドウを最小化",
+      maximize: "ウィンドウを最大化",
+      restore: "ウィンドウを元に戻す",
+      close: "ウィンドウを閉じる",
+    },
     quitting: {
       title: "Paseoを終了中...",
       detail: "ローカルデーモンを停止中。",
@@ -1762,6 +1772,7 @@ export const ja: TranslationResources = {
     },
     diff: {
       changesLabel: "変更",
+      diffLabel: "差分",
       changesSubtitle: "作業ツリーの差分",
       commitSubtitle: "コミット差分",
       uncommittedSubtitle: "未コミットの変更",
@@ -1856,6 +1867,7 @@ export const ja: TranslationResources = {
     sections: {
       general: "一般",
       appearance: "外観",
+      layout: en.settings.sections.layout,
       editor: "エディター",
       shortcuts: "ショートカット",
       integrations: "連携",
@@ -1864,6 +1876,7 @@ export const ja: TranslationResources = {
       diagnostics: "診断",
       about: "アプリ情報",
     },
+    layout: en.settings.layout,
     editor: {
       title: "エディター",
       vimKeybindings: "Vim キーバインド",
@@ -1952,11 +1965,6 @@ export const ja: TranslationResources = {
         description: "組み込みターミナルバッファに保持する行数",
         accessibilityLabel: "ターミナルスクロールバック行数",
       },
-      sidePanelRouting: {
-        label: "補助タブをサイドパネルで開く",
-        description:
-          "ファイルリンク、プルリクエスト、セットアップの進行状況が、フォーカス中のペインではなく作業の横に開きます",
-      },
       autoExpandReasoning: {
         label: "常に思考プロセスを展開",
         description: "デフォルトでAIのエージェント思考・推論ブロックを完全に展開して表示します",
@@ -2152,7 +2160,6 @@ export const ja: TranslationResources = {
         toggleBothSidebars: "両方のサイドバーを切り替え",
         toggleSettings: "設定を切り替え",
         toggleFocusMode: "フォーカスモードを切り替え",
-        toggleExplorerPaneMaximization: "サイドパネルの最大化を切り替え",
         cycleTheme: "テーマを順に切り替え",
         focusMessageInput: "メッセージ入力にフォーカス",
         cycleAgentMode: "エージェントモードを順に切り替え",
diff --git a/packages/app/src/i18n/resources/ko.ts b/packages/app/src/i18n/resources/ko.ts
index de784dabb4..c7757649df 100644
--- a/packages/app/src/i18n/resources/ko.ts
+++ b/packages/app/src/i18n/resources/ko.ts
@@ -65,7 +65,7 @@ export const ko: TranslationResources = {
       agents: "에이전트",
       newAgent: "새 에이전트",
       open: "{{name}} 열기",
-      openInSidePanel: "사이드 패널에서 {{name}} 열기",
+      openInSidePane: "사이드 패널에서 {{name}} 열기",
       openInFocusedPane: "포커스된 창에서 {{name}} 열기",
       addProject: "프로젝트 추가",
       home: "홈",
@@ -417,6 +417,7 @@ export const ko: TranslationResources = {
     },
     fileActions: {
       openFile: "파일 열기",
+      openToSide: "옆에 열기",
       copyPath: "경로 복사",
       copyRelativePath: "상대 경로 복사",
       revealIn: "{{target}}에서 보기",
@@ -583,6 +584,7 @@ export const ko: TranslationResources = {
         closeLeft: "왼쪽 탭 닫기",
         closeRight: "오른쪽 탭 닫기",
         closeOthers: "다른 탭 닫기",
+        moveToMain: "기본 패널로 이동",
         reloadAgent: "에이전트 다시 로드",
         reloadAgentTooltip:
           "스킬, MCP 또는 로그인 상태를 업데이트하려면 에이전트를 다시 로드하세요.",
@@ -609,7 +611,7 @@ export const ko: TranslationResources = {
         terminalProfilesMenu: "터미널 프로필",
         editTerminalProfiles: "프로필 편집",
       },
-      sidePanel: {
+      explorerSidebar: {
         open: "사이드 패널 열기",
         close: "사이드 패널 닫기",
         toggle: "사이드 패널 토글",
@@ -860,6 +862,7 @@ export const ko: TranslationResources = {
       },
       diff: {
         openChangesTab: "변경사항 탭 열기",
+        openDiffTab: "Diff 탭 열기",
         closeChangesTab: "변경사항 탭 닫기",
         binaryFile: "바이너리 파일",
         tooLarge: "표시하기에 diff가 너무 큽니다",
@@ -870,6 +873,7 @@ export const ko: TranslationResources = {
         switchToUnified: "통합 diff로 전환",
         switchToSplit: "나란히 보기 diff로 전환",
         options: "Diff 옵션",
+        inlineDiff: "인라인 Diff",
         hideWhitespace: "공백 숨기기",
         showWhitespace: "공백 표시",
         scrollLongLines: "긴 줄 스크롤",
@@ -1218,6 +1222,12 @@ export const ko: TranslationResources = {
     },
   },
   desktop: {
+    windowControls: {
+      minimize: "창 최소화",
+      maximize: "창 최대화",
+      restore: "창 복원",
+      close: "창 닫기",
+    },
     quitting: {
       title: "Paseo 종료 중...",
       detail: "로컬 데몬을 중지하는 중입니다.",
@@ -1754,6 +1764,7 @@ export const ko: TranslationResources = {
     },
     diff: {
       changesLabel: "변경 사항",
+      diffLabel: "Diff",
       changesSubtitle: "작업 트리 diff",
       commitSubtitle: "커밋 diff",
       uncommittedSubtitle: "커밋되지 않은 변경 사항",
@@ -1848,6 +1859,7 @@ export const ko: TranslationResources = {
     sections: {
       general: "일반",
       appearance: "모양",
+      layout: en.settings.sections.layout,
       editor: "편집기",
       shortcuts: "단축키",
       integrations: "통합",
@@ -1856,6 +1868,7 @@ export const ko: TranslationResources = {
       diagnostics: "진단",
       about: "정보",
     },
+    layout: en.settings.layout,
     editor: {
       title: "편집기",
       vimKeybindings: "Vim 키 바인딩",
@@ -1946,11 +1959,6 @@ export const ko: TranslationResources = {
         description: "내장 터미널 버퍼에 보관되는 줄 수",
         accessibilityLabel: "터미널 스크롤백 줄 수",
       },
-      sidePanelRouting: {
-        label: "보조 탭을 사이드 패널에서 열기",
-        description:
-          "파일 링크, 풀 리퀘스트, 설정 진행 상황이 포커스된 창이 아니라 작업 옆에서 열립니다",
-      },
       autoExpandReasoning: {
         label: "추론 항상 펼치기",
         description: "에이전트의 사고 및 추론 블록을 기본적으로 모두 펼쳐 표시합니다.",
@@ -2144,7 +2152,6 @@ export const ko: TranslationResources = {
         toggleBothSidebars: "양쪽 사이드바 토글",
         toggleSettings: "설정 토글",
         toggleFocusMode: "집중 모드 토글",
-        toggleExplorerPaneMaximization: "사이드 패널 최대화 전환",
         cycleTheme: "테마 순환",
         focusMessageInput: "메시지 입력란에 포커스",
         cycleAgentMode: "에이전트 모드 전환",
diff --git a/packages/app/src/i18n/resources/pt-BR.ts b/packages/app/src/i18n/resources/pt-BR.ts
index 400ccb9453..90ff716a76 100644
--- a/packages/app/src/i18n/resources/pt-BR.ts
+++ b/packages/app/src/i18n/resources/pt-BR.ts
@@ -65,7 +65,7 @@ export const ptBR: TranslationResources = {
       agents: "Agentes",
       newAgent: "Novo agente",
       open: "Abrir {{name}}",
-      openInSidePanel: "Abrir {{name}} no painel lateral",
+      openInSidePane: "Abrir {{name}} no painel lateral",
       openInFocusedPane: "Abrir {{name}} no painel em foco",
       addProject: "Adicionar projeto",
       home: "Início",
@@ -420,6 +420,7 @@ export const ptBR: TranslationResources = {
     },
     fileActions: {
       openFile: "Abrir arquivo",
+      openToSide: "Abrir ao lado",
       copyPath: "Copiar caminho",
       copyRelativePath: "Copiar caminho relativo",
       revealIn: "Mostrar no {{target}}",
@@ -586,6 +587,7 @@ export const ptBR: TranslationResources = {
         closeLeft: "Fechar à esquerda",
         closeRight: "Fechar à direita",
         closeOthers: "Fechar outras abas",
+        moveToMain: "Mover para o painel principal",
         reloadAgent: "Recarregar agente",
         reloadAgentTooltip: "Recarregue o agente para atualizar skills, MCPs ou status de login.",
         close: "Fechar",
@@ -611,7 +613,7 @@ export const ptBR: TranslationResources = {
         terminalProfilesMenu: "Perfis de terminal",
         editTerminalProfiles: "Editar perfis",
       },
-      sidePanel: {
+      explorerSidebar: {
         open: "Abrir painel lateral",
         close: "Fechar painel lateral",
         toggle: "Alternar painel lateral",
@@ -875,6 +877,7 @@ export const ptBR: TranslationResources = {
       },
       diff: {
         openChangesTab: "Abrir a aba Alterações",
+        openDiffTab: "Abrir a aba Diff",
         closeChangesTab: "Fechar a aba Alterações",
         binaryFile: "Arquivo binário",
         tooLarge: "Diff grande demais para exibir",
@@ -885,6 +888,7 @@ export const ptBR: TranslationResources = {
         switchToUnified: "Alternar para diff unificado",
         switchToSplit: "Alternar para diff lado a lado",
         options: "Opções do diff",
+        inlineDiff: "Diff embutido",
         hideWhitespace: "Ocultar espaços em branco",
         showWhitespace: "Mostrar espaços em branco",
         scrollLongLines: "Rolar linhas longas",
@@ -1236,6 +1240,12 @@ export const ptBR: TranslationResources = {
     },
   },
   desktop: {
+    windowControls: {
+      minimize: "Minimizar janela",
+      maximize: "Maximizar janela",
+      restore: "Restaurar janela",
+      close: "Fechar janela",
+    },
     quitting: {
       title: "Saindo do Paseo...",
       detail: "Parando o daemon local.",
@@ -1776,6 +1786,7 @@ export const ptBR: TranslationResources = {
     },
     diff: {
       changesLabel: "Alterações",
+      diffLabel: "Diff",
       changesSubtitle: "Diff da árvore de trabalho",
       commitSubtitle: "Diff do commit",
       uncommittedSubtitle: "Alterações não commitadas",
@@ -1870,6 +1881,7 @@ export const ptBR: TranslationResources = {
     sections: {
       general: "Geral",
       appearance: "Aparência",
+      layout: en.settings.sections.layout,
       editor: "Editor",
       shortcuts: "Atalhos",
       integrations: "Integrações",
@@ -1878,6 +1890,7 @@ export const ptBR: TranslationResources = {
       diagnostics: "Diagnósticos",
       about: "Sobre",
     },
+    layout: en.settings.layout,
     editor: {
       title: "Editor",
       vimKeybindings: "Atalhos do Vim",
@@ -1968,11 +1981,6 @@ export const ptBR: TranslationResources = {
         description: "Linhas mantidas no buffer do terminal integrado",
         accessibilityLabel: "Linhas do scrollback do terminal",
       },
-      sidePanelRouting: {
-        label: "Abrir abas de apoio no painel lateral",
-        description:
-          "Links de arquivo, pull requests e progresso da configuração abrem ao lado do seu trabalho em vez do painel em foco",
-      },
       autoExpandReasoning: {
         label: "Sempre expandir raciocínio",
         description:
@@ -2168,7 +2176,6 @@ export const ptBR: TranslationResources = {
         toggleBothSidebars: "Alternar ambas as barras laterais",
         toggleSettings: "Alternar Configurações",
         toggleFocusMode: "Alternar modo de foco",
-        toggleExplorerPaneMaximization: "Alternar maximização do painel lateral",
         cycleTheme: "Alternar tema",
         focusMessageInput: "Focar entrada de mensagem",
         cycleAgentMode: "Alternar modo do agente",
diff --git a/packages/app/src/i18n/resources/ru.ts b/packages/app/src/i18n/resources/ru.ts
index ac8059b81a..86f12175e9 100644
--- a/packages/app/src/i18n/resources/ru.ts
+++ b/packages/app/src/i18n/resources/ru.ts
@@ -1,4 +1,4 @@
-import type { TranslationResources } from "./en";
+import { en, type TranslationResources } from "./en";
 import { pluginSettings } from "./plugin-settings";
 
 export const ru: TranslationResources = {
@@ -65,7 +65,7 @@ export const ru: TranslationResources = {
       agents: "Агенты",
       newAgent: "Новый агент",
       open: "Открыть {{name}}",
-      openInSidePanel: "Открыть {{name}} в боковой панели",
+      openInSidePane: "Открыть {{name}} в боковой панели",
       openInFocusedPane: "Открыть {{name}} в активной области",
       addProject: "Добавить проект",
       home: "Главная",
@@ -419,6 +419,7 @@ export const ru: TranslationResources = {
     },
     fileActions: {
       openFile: "Открыть файл",
+      openToSide: "Открыть сбоку",
       copyPath: "Копировать путь",
       copyRelativePath: "Копировать относительный путь",
       revealIn: "Показать в {{target}}",
@@ -587,6 +588,7 @@ export const ru: TranslationResources = {
         closeLeft: "Закрыть вкладки слева",
         closeRight: "Закрыть вкладки справа",
         closeOthers: "Закрыть другие вкладки",
+        moveToMain: "Переместить на основную панель",
         reloadAgent: "Перезагрузить агента",
         reloadAgentTooltip: "Перезагрузите агента, чтобы обновить навыки, MCP или статус входа.",
         close: "Закрыть",
@@ -612,7 +614,7 @@ export const ru: TranslationResources = {
         terminalProfilesMenu: "Профили терминала",
         editTerminalProfiles: "Изменить профили",
       },
-      sidePanel: {
+      explorerSidebar: {
         open: "Открыть боковую панель",
         close: "Закрыть боковую панель",
         toggle: "Переключить боковую панель",
@@ -868,6 +870,7 @@ export const ru: TranslationResources = {
       },
       diff: {
         openChangesTab: "Открыть вкладку «Изменения»",
+        openDiffTab: "Открыть вкладку «Дифф»",
         closeChangesTab: "Закрыть вкладку «Изменения»",
         binaryFile: "Бинарный файл",
         tooLarge: "Дифф слишком велик для отображения",
@@ -878,6 +881,7 @@ export const ru: TranslationResources = {
         switchToUnified: "Переключиться на унифицированный дифф",
         switchToSplit: "Переключиться на параллельный дифф",
         options: "Параметры диффа",
+        inlineDiff: "Встроенный дифф",
         hideWhitespace: "Скрыть пробельные изменения",
         showWhitespace: "Показать пробельные изменения",
         scrollLongLines: "Прокручивать длинные строки",
@@ -1228,6 +1232,12 @@ export const ru: TranslationResources = {
     },
   },
   desktop: {
+    windowControls: {
+      minimize: "Свернуть окно",
+      maximize: "Развернуть окно",
+      restore: "Восстановить окно",
+      close: "Закрыть окно",
+    },
     quitting: {
       title: "Завершение работы Paseo...",
       detail: "Остановка локального демона.",
@@ -1775,6 +1785,7 @@ export const ru: TranslationResources = {
     },
     diff: {
       changesLabel: "Изменения",
+      diffLabel: "Дифф",
       changesSubtitle: "Изменения в worktree",
       commitSubtitle: "Изменения в коммите",
       uncommittedSubtitle: "Незафиксированные изменения",
@@ -1869,6 +1880,7 @@ export const ru: TranslationResources = {
     sections: {
       general: "Основные",
       appearance: "Оформление",
+      layout: en.settings.sections.layout,
       editor: "Редактор",
       shortcuts: "Сочетания клавиш",
       integrations: "Интеграции",
@@ -1877,6 +1889,7 @@ export const ru: TranslationResources = {
       diagnostics: "Диагностика",
       about: "О приложении",
     },
+    layout: en.settings.layout,
     editor: {
       title: "Редактор",
       vimKeybindings: "Сочетания клавиш Vim",
@@ -1968,11 +1981,6 @@ export const ru: TranslationResources = {
         description: "Количество строк, сохраняемых во встроенном буфере терминала",
         accessibilityLabel: "Количество строк в буфере прокрутки терминала",
       },
-      sidePanelRouting: {
-        label: "Открывать вспомогательные вкладки в боковой панели",
-        description:
-          "Ссылки на файлы, пул-реквесты и ход настройки открываются рядом с вашей работой, а не в активной панели",
-      },
       autoExpandReasoning: {
         label: "Всегда разворачивать размышления",
         description:
@@ -2171,7 +2179,6 @@ export const ru: TranslationResources = {
         toggleBothSidebars: "Переключить обе боковые панели",
         toggleSettings: "Переключить настройки",
         toggleFocusMode: "Переключить режим фокусировки",
-        toggleExplorerPaneMaximization: "Развернуть или восстановить боковую панель",
         cycleTheme: "Переключить тему",
         focusMessageInput: "Перейти к полю ввода сообщения",
         cycleAgentMode: "Переключить режим агента",
diff --git a/packages/app/src/i18n/resources/zh-CN.ts b/packages/app/src/i18n/resources/zh-CN.ts
index 9c456b9e43..94a00cec8c 100644
--- a/packages/app/src/i18n/resources/zh-CN.ts
+++ b/packages/app/src/i18n/resources/zh-CN.ts
@@ -65,7 +65,7 @@ export const zhCN: TranslationResources = {
       agents: "Agents",
       newAgent: "新建 Agent",
       open: "打开{{name}}",
-      openInSidePanel: "在侧边面板中打开{{name}}",
+      openInSidePane: "在侧边面板中打开{{name}}",
       openInFocusedPane: "在当前窗格中打开{{name}}",
       addProject: "添加 project",
       home: "首页",
@@ -416,6 +416,7 @@ export const zhCN: TranslationResources = {
     },
     fileActions: {
       openFile: "打开文件",
+      openToSide: "在侧边打开",
       copyPath: "复制路径",
       copyRelativePath: "复制相对路径",
       revealIn: "在 {{target}} 中显示",
@@ -582,6 +583,7 @@ export const zhCN: TranslationResources = {
         closeLeft: "关闭左侧标签",
         closeRight: "关闭右侧标签",
         closeOthers: "关闭其他标签",
+        moveToMain: "移至主面板",
         reloadAgent: "重新加载 Agent",
         reloadAgentTooltip: "重新加载 Agent 以更新 skills、MCPs 或登录状态。",
         close: "关闭",
@@ -607,7 +609,7 @@ export const zhCN: TranslationResources = {
         terminalProfilesMenu: "Terminal profiles",
         editTerminalProfiles: "Edit profiles",
       },
-      sidePanel: {
+      explorerSidebar: {
         open: "打开侧边面板",
         close: "关闭侧边面板",
         toggle: "切换侧边面板",
@@ -845,6 +847,7 @@ export const zhCN: TranslationResources = {
       },
       diff: {
         openChangesTab: "打开“更改”标签页",
+        openDiffTab: "打开 Diff 标签页",
         closeChangesTab: "关闭“更改”标签页",
         binaryFile: "二进制文件",
         tooLarge: "Diff 过大，无法显示",
@@ -855,6 +858,7 @@ export const zhCN: TranslationResources = {
         switchToUnified: "切换到统一差异视图",
         switchToSplit: "切换到并排差异视图",
         options: "Diff 选项",
+        inlineDiff: "内联 Diff",
         hideWhitespace: "隐藏空白差异",
         showWhitespace: "显示空白差异",
         scrollLongLines: "滚动长行",
@@ -1200,6 +1204,12 @@ export const zhCN: TranslationResources = {
     },
   },
   desktop: {
+    windowControls: {
+      minimize: "最小化窗口",
+      maximize: "最大化窗口",
+      restore: "还原窗口",
+      close: "关闭窗口",
+    },
     quitting: {
       title: "正在退出 Paseo...",
       detail: "正在停止本地 daemon。",
@@ -1723,6 +1733,7 @@ export const zhCN: TranslationResources = {
     },
     diff: {
       changesLabel: "更改",
+      diffLabel: "Diff",
       changesSubtitle: "工作区差异",
       commitSubtitle: "提交差异",
       uncommittedSubtitle: "未提交的更改",
@@ -1817,6 +1828,7 @@ export const zhCN: TranslationResources = {
     sections: {
       general: "通用",
       appearance: "外观",
+      layout: en.settings.sections.layout,
       editor: "编辑器",
       shortcuts: "快捷键",
       integrations: "集成",
@@ -1825,6 +1837,7 @@ export const zhCN: TranslationResources = {
       diagnostics: "诊断",
       about: "关于",
     },
+    layout: en.settings.layout,
     editor: {
       title: "编辑器",
       vimKeybindings: "Vim 键位",
@@ -1911,10 +1924,6 @@ export const zhCN: TranslationResources = {
         description: "内置终端缓冲区保留的行数",
         accessibilityLabel: "终端回滚行数",
       },
-      sidePanelRouting: {
-        label: "在侧边面板中打开辅助标签页",
-        description: "文件链接、拉取请求和设置进度会在你的工作旁边打开，而不是在聚焦的窗格中",
-      },
       autoExpandReasoning: {
         label: "始终展开推理过程",
         description: "默认情况下完全展开 AI 的思考和推理过程",
@@ -2107,7 +2116,6 @@ export const zhCN: TranslationResources = {
         toggleBothSidebars: "切换两侧边栏",
         toggleSettings: "切换设置",
         toggleFocusMode: "切换专注模式",
-        toggleExplorerPaneMaximization: "切换侧边面板最大化",
         cycleTheme: "循环切换主题",
         focusMessageInput: "聚焦消息输入框",
         cycleAgentMode: "循环切换代理模式",
diff --git a/packages/app/src/keyboard/actions.ts b/packages/app/src/keyboard/actions.ts
index 803a9952df..1bf78d923f 100644
--- a/packages/app/src/keyboard/actions.ts
+++ b/packages/app/src/keyboard/actions.ts
@@ -38,7 +38,6 @@ export type KeyboardActionId =
   | "workspace.pane.move-tab.up"
   | "workspace.pane.move-tab.down"
   | "workspace.pane.close"
-  | "workspace.explorer.maximize.toggle"
   | "workspace.navigate.index"
   | "workspace.navigate.relative"
   | "sidebar.toggle.left"
diff --git a/packages/app/src/keyboard/keyboard-action-dispatcher.ts b/packages/app/src/keyboard/keyboard-action-dispatcher.ts
index 376fc17559..a584db7e02 100644
--- a/packages/app/src/keyboard/keyboard-action-dispatcher.ts
+++ b/packages/app/src/keyboard/keyboard-action-dispatcher.ts
@@ -1,7 +1,7 @@
 export type KeyboardActionScope = "global" | "message-input" | "sidebar" | "workspace";
 
 export type WorkspacePanelTarget = "changes" | "files" | "pull-request";
-export type WorkspacePanelPlacement = "supporting" | "side-panel" | "focused-pane";
+export type WorkspacePanelPlacement = "supporting" | "side-pane" | "focused-pane";
 
 export type KeyboardActionId =
   | "agent.interrupt"
@@ -42,7 +42,6 @@ export type KeyboardActionId =
   | "workspace.pane.move-tab.up"
   | "workspace.pane.move-tab.down"
   | "workspace.pane.close"
-  | "workspace.explorer.maximize.toggle"
   | "workspace.focus.toggle"
   | "workspace.terminal.new"
   | "workspace.browser.new"
@@ -98,7 +97,6 @@ export type KeyboardActionDefinition =
   | { id: "workspace.pane.move-tab.up"; scope: KeyboardActionScope }
   | { id: "workspace.pane.move-tab.down"; scope: KeyboardActionScope }
   | { id: "workspace.pane.close"; scope: KeyboardActionScope }
-  | { id: "workspace.explorer.maximize.toggle"; scope: KeyboardActionScope }
   | { id: "workspace.focus.toggle"; scope: KeyboardActionScope }
   | { id: "workspace.terminal.new"; scope: KeyboardActionScope }
   | { id: "workspace.browser.new"; scope: KeyboardActionScope }
diff --git a/packages/app/src/keyboard/keyboard-shortcuts.test.ts b/packages/app/src/keyboard/keyboard-shortcuts.test.ts
index b0dd8670d9..02e23ba614 100644
--- a/packages/app/src/keyboard/keyboard-shortcuts.test.ts
+++ b/packages/app/src/keyboard/keyboard-shortcuts.test.ts
@@ -270,18 +270,6 @@ describe("keyboard-shortcuts", () => {
       context: { isMac: true },
       action: "workspace.pane.split.down",
     },
-    {
-      name: "matches Cmd+Shift+M to maximize the Explorer pane on macOS",
-      event: { key: "M", code: "KeyM", metaKey: true, shiftKey: true },
-      context: { isMac: true },
-      action: "workspace.explorer.maximize.toggle",
-    },
-    {
-      name: "matches Ctrl+Shift+M to maximize the Explorer pane on non-macOS",
-      event: { key: "M", code: "KeyM", ctrlKey: true, shiftKey: true },
-      context: { isMac: false },
-      action: "workspace.explorer.maximize.toggle",
-    },
     {
       name: "matches Cmd+Shift+ArrowRight to focus pane right on macOS",
       event: { key: "ArrowRight", code: "ArrowRight", metaKey: true, shiftKey: true },
@@ -654,7 +642,6 @@ describe("keyboard-shortcut help sections", () => {
         "workspace-tab-close-current": ["alt", "shift", "W"],
         "workspace-pane-split-right": ["mod", "\\"],
         "workspace-pane-close": ["mod", "shift", "W"],
-        "workspace-explorer-maximize": ["mod", "shift", "M"],
         "cycle-agent-mode": ["shift", "Tab"],
       },
     },
@@ -674,7 +661,6 @@ describe("keyboard-shortcut help sections", () => {
         "workspace-tab-close-current": ["mod", "W"],
         "workspace-pane-split-right": ["mod", "\\"],
         "workspace-pane-close": ["mod", "shift", "W"],
-        "workspace-explorer-maximize": ["mod", "shift", "M"],
       },
     },
     {
@@ -683,7 +669,6 @@ describe("keyboard-shortcut help sections", () => {
       expectedKeys: {
         "workspace-tab-jump-index": ["alt", "1-9"],
         "workspace-tab-close-current": ["ctrl", "W"],
-        "workspace-explorer-maximize": ["ctrl", "shift", "M"],
       },
     },
     {
diff --git a/packages/app/src/keyboard/keyboard-shortcuts.ts b/packages/app/src/keyboard/keyboard-shortcuts.ts
index d2b2c31daa..d18650a80a 100644
--- a/packages/app/src/keyboard/keyboard-shortcuts.ts
+++ b/packages/app/src/keyboard/keyboard-shortcuts.ts
@@ -191,7 +191,6 @@ export const SHORTCUT_HELP_ROW_ORDER: Record<ShortcutSectionId, readonly string[
     "workspace-pane-move-tab-up",
     "workspace-pane-move-tab-down",
     "workspace-pane-close",
-    "workspace-explorer-maximize",
   ],
   layout: ["toggle-left-sidebar", "toggle-right-sidebar", "toggle-both-sidebars", "toggle-focus"],
   "agent-input": [
@@ -232,7 +231,6 @@ const SHORTCUT_HELP_LABEL_KEYS: Record<string, string> = {
   "workspace-pane-move-tab-up": "settings.shortcuts.help.moveTabUp",
   "workspace-pane-move-tab-down": "settings.shortcuts.help.moveTabDown",
   "workspace-pane-close": "settings.shortcuts.help.closePane",
-  "workspace-explorer-maximize": "settings.shortcuts.help.toggleExplorerPaneMaximization",
   "workspace-terminal-new": "settings.shortcuts.help.newTerminal",
   "search-files": "settings.shortcuts.help.searchFiles",
   "toggle-command-center": "settings.shortcuts.help.toggleCommandCenter",
@@ -837,29 +835,6 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
       label: "Close pane",
     },
   },
-  {
-    id: "workspace-explorer-maximize-cmd-shift-m-mac",
-    action: "workspace.explorer.maximize.toggle",
-    combo: "Cmd+Shift+M",
-    when: { mac: true, commandCenter: false },
-    help: {
-      id: "workspace-explorer-maximize",
-      section: "tabs-panes",
-      label: "Toggle Explorer pane maximization",
-    },
-  },
-  {
-    id: "workspace-explorer-maximize-ctrl-shift-m-non-mac",
-    action: "workspace.explorer.maximize.toggle",
-    combo: "Ctrl+Shift+M",
-    when: { mac: false, commandCenter: false, terminal: false },
-    help: {
-      id: "workspace-explorer-maximize",
-      section: "tabs-panes",
-      label: "Toggle Explorer pane maximization",
-    },
-  },
-
   // --- New terminal ---
   {
     id: "workspace-terminal-new-cmd-shift-t-mac",
@@ -955,7 +930,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
     help: {
       id: "toggle-right-sidebar",
       section: "layout",
-      label: "Toggle side panel",
+      label: "Toggle Explorer sidebar",
     },
   },
   {
@@ -966,7 +941,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
     help: {
       id: "toggle-right-sidebar",
       section: "layout",
-      label: "Toggle side panel",
+      label: "Toggle Explorer sidebar",
     },
   },
   {
diff --git a/packages/app/src/keyboard/route-shortcut.test.ts b/packages/app/src/keyboard/route-shortcut.test.ts
index db9ccebb3c..0243f555fd 100644
--- a/packages/app/src/keyboard/route-shortcut.test.ts
+++ b/packages/app/src/keyboard/route-shortcut.test.ts
@@ -52,10 +52,6 @@ describe("routeKeyboardShortcut — dispatch passthroughs", () => {
     ["workspace.pane.move-tab.up", { id: "workspace.pane.move-tab.up", scope: "workspace" }],
     ["workspace.pane.move-tab.down", { id: "workspace.pane.move-tab.down", scope: "workspace" }],
     ["workspace.pane.close", { id: "workspace.pane.close", scope: "workspace" }],
-    [
-      "workspace.explorer.maximize.toggle",
-      { id: "workspace.explorer.maximize.toggle", scope: "workspace" },
-    ],
     ["view.toggle.focus", { id: "workspace.focus.toggle", scope: "workspace" }],
   ])("%s → dispatch %j", (action, expected) => {
     expect(routeKeyboardShortcut({ action, payload: null }, makeCtx())).toEqual({
diff --git a/packages/app/src/keyboard/route-shortcut.ts b/packages/app/src/keyboard/route-shortcut.ts
index 72c3763a8b..33660994a7 100644
--- a/packages/app/src/keyboard/route-shortcut.ts
+++ b/packages/app/src/keyboard/route-shortcut.ts
@@ -64,10 +64,6 @@ const PASSTHROUGH_DISPATCH: Record<string, KeyboardActionDefinition> = {
   "workspace.pane.move-tab.up": { id: "workspace.pane.move-tab.up", scope: "workspace" },
   "workspace.pane.move-tab.down": { id: "workspace.pane.move-tab.down", scope: "workspace" },
   "workspace.pane.close": { id: "workspace.pane.close", scope: "workspace" },
-  "workspace.explorer.maximize.toggle": {
-    id: "workspace.explorer.maximize.toggle",
-    scope: "workspace",
-  },
   "view.toggle.focus": { id: "workspace.focus.toggle", scope: "workspace" },
 };
 
diff --git a/packages/app/src/mobile-panels/presentation.tsx b/packages/app/src/mobile-panels/presentation.tsx
index b050a74a06..bc917419cd 100644
--- a/packages/app/src/mobile-panels/presentation.tsx
+++ b/packages/app/src/mobile-panels/presentation.tsx
@@ -105,6 +105,7 @@ export function MobilePanelOverlay({
 const styles = StyleSheet.create({
   overlay: {
     ...StyleSheet.absoluteFillObject,
+    zIndex: 1,
   },
   backdrop: {
     ...StyleSheet.absoluteFillObject,
diff --git a/packages/app/src/panels/agent-panel.tsx b/packages/app/src/panels/agent-panel.tsx
index 13680676c5..b2913ab1e2 100644
--- a/packages/app/src/panels/agent-panel.tsx
+++ b/packages/app/src/panels/agent-panel.tsx
@@ -66,7 +66,7 @@ import {
   type ReconnectToastState,
 } from "@/panels/reconnect-toast-state";
 import { usePaneContext, usePaneFocus } from "@/panels/pane-context";
-import type { PanelDescriptor, PanelRegistration } from "@/panels/panel-registry";
+import { definePanel, type PanelDescriptor } from "@/panels/panel-registry";
 import { RenderProfile } from "@/utils/render-profiler";
 import { buildDraftPanelDescriptor } from "@/panels/draft-panel-descriptor";
 import {
@@ -94,7 +94,8 @@ import {
 } from "@/stores/session-store";
 import { useWorkspaceLayoutStore } from "@/stores/workspace-layout-store";
 import { buildWorkspaceTabPersistenceKey } from "@/workspace-tabs/model";
-import { openSidePanelView } from "@/workspace-tabs/side-panel";
+import { openPreferredWorkspaceTarget } from "@/workspace-tabs/open-beside";
+import { useSettings } from "@/hooks/use-settings";
 import type { Theme } from "@/styles/theme";
 import type { PendingPermission } from "@/types/shared";
 import type { StreamItem, TodoEntry } from "@/types/stream";
@@ -439,12 +440,10 @@ export function AgentConversationPanel() {
   invariant(false, "AgentConversationPanel requires an agent or draft target");
 }
 
-export const agentPanelRegistration: PanelRegistration<"agent"> = {
-  kind: "agent",
-  resourceKey: (target) => target.agentId,
+export const agentPanelRegistration = definePanel("agent", {
   component: AgentConversationPanel,
   useDescriptor: useAgentPanelDescriptor,
-};
+});
 
 export function useDraftPanelDescriptor(
   target: { kind: "draft"; draftId: string },
@@ -1350,7 +1349,6 @@ const ChatAgentReadyContent = memo(function ChatAgentReadyContent({
         <AgentTracks
           serverId={serverId}
           workspaceId={workspaceId}
-          cwd={cwd}
           subagentRows={subagentRows}
           tasks={tasks}
           archiveFinishedStatus={archiveFinishedSubagents.status}
@@ -1599,6 +1597,7 @@ function ActiveAgentComposer({
     { initialIsBelow: isCompactFormFactor },
   );
   const paneContext = usePaneContext();
+  const openInSidePane = useSettings((settings) => settings.openInSidePane);
   const { workspaceId, tabId, retargetCurrentTab } = paneContext;
   const { archiveAgent } = useArchiveAgent();
   const closeWorkspaceTab = useWorkspaceLayoutStore((state) => state.closeTab);
@@ -1618,14 +1617,15 @@ function ActiveAgentComposer({
       if (attachment.kind !== "review") {
         return;
       }
-      openSidePanelView({
+      openPreferredWorkspaceTarget({
         isCompact: isCompactFormFactor,
         workspaceKey: buildWorkspaceTabPersistenceKey({ serverId, workspaceId }),
-        checkout: { serverId, cwd: attachment.attachment.cwd, isGit: true },
-        view: "changes",
+        target: { kind: "working_diff" },
+        source: "changesLinks",
+        preferences: openInSidePane,
       });
     },
-    [isCompactFormFactor, serverId, workspaceId],
+    [isCompactFormFactor, openInSidePane, serverId, workspaceId],
   );
 
   const handleClientSlashCommand = useCallback(
diff --git a/packages/app/src/panels/agent-tracks.tsx b/packages/app/src/panels/agent-tracks.tsx
index 9b5e473368..4067426a48 100644
--- a/packages/app/src/panels/agent-tracks.tsx
+++ b/packages/app/src/panels/agent-tracks.tsx
@@ -17,7 +17,7 @@ import { SubagentsTrack } from "@/subagents/track";
 import type { TodoEntry } from "@/types/stream";
 import { navigateToAgent } from "@/utils/navigate-to-agent";
 import { buildWorkspaceTabPersistenceKey } from "@/workspace-tabs/model";
-import { openSupportingTab, toggleSupportingTab } from "@/workspace-tabs/side-panel";
+import { openPreferredWorkspaceTarget } from "@/workspace-tabs/open-beside";
 
 /**
  * The pane's ambient context — workspace changes, subagents, and tasks — as a row of pills above
@@ -29,7 +29,6 @@ import { openSupportingTab, toggleSupportingTab } from "@/workspace-tabs/side-pa
 export const AgentTracks = memo(function AgentTracks({
   serverId,
   workspaceId,
-  cwd,
   subagentRows,
   tasks,
   archiveFinishedStatus,
@@ -37,7 +36,6 @@ export const AgentTracks = memo(function AgentTracks({
 }: {
   serverId: string;
   workspaceId: string;
-  cwd: string;
   subagentRows: SubagentRow[];
   tasks: TodoEntry[] | undefined;
   archiveFinishedStatus: ArchiveFinishedStatus;
@@ -47,9 +45,7 @@ export const AgentTracks = memo(function AgentTracks({
   const hasWorkspaceDiffStat = useWorkspaceHasDiffStat(serverId, workspaceId);
   const isCompact = useIsCompactFormFactor();
   const canSplit = supportsDesktopPaneSplits() && !isCompact;
-  const openInSidePanelByDefault = useSettings(
-    (settings) => settings.openSupportingTabsInSidePanel,
-  );
+  const openInSidePane = useSettings((settings) => settings.openInSidePane);
   const workspaceKey = buildWorkspaceTabPersistenceKey({ serverId, workspaceId });
   const canDetachSubagents = useSessionStore(
     (state) => state.sessions[serverId]?.serverInfo?.features?.agentDetach === true,
@@ -65,47 +61,49 @@ export const AgentTracks = memo(function AgentTracks({
         return;
       }
       if (canSplit && workspaceKey) {
-        openSupportingTab({
+        openPreferredWorkspaceTarget({
           isCompact,
           workspaceKey,
           target: { kind: "agent", agentId: subagentId },
-          openInSidePanelByDefault,
+          source: "subagents",
+          preferences: openInSidePane,
           parentTabId: tabId,
         });
         return;
       }
       navigateToAgent({ serverId, agentId: subagentId });
     },
-    [canSplit, isCompact, openInSidePanelByDefault, serverId, tabId, workspaceId, workspaceKey],
+    [canSplit, isCompact, openInSidePane, serverId, tabId, workspaceId, workspaceKey],
   );
   const handleOpenProviderSubagent = useCallback(
     (parentAgentId: string, subagentId: string) => {
       if (canSplit && workspaceKey) {
-        openSupportingTab({
+        openPreferredWorkspaceTarget({
           isCompact,
           workspaceKey,
           target: { kind: "provider_subagent", parentAgentId, subagentId },
-          openInSidePanelByDefault,
+          source: "subagents",
+          preferences: openInSidePane,
           parentTabId: tabId,
         });
         return;
       }
       openTab({ kind: "provider_subagent", parentAgentId, subagentId });
     },
-    [canSplit, isCompact, openInSidePanelByDefault, openTab, tabId, workspaceKey],
+    [canSplit, isCompact, openInSidePane, openTab, tabId, workspaceKey],
   );
   const handleOpenChanges = useCallback(() => {
     if (!workspaceKey) {
       return;
     }
-    toggleSupportingTab({
+    openPreferredWorkspaceTarget({
       isCompact,
       workspaceKey,
-      checkout: { serverId, cwd, isGit: true },
       target: { kind: "working_diff" },
-      openInSidePanelByDefault,
+      source: "changesLinks",
+      preferences: openInSidePane,
     });
-  }, [cwd, isCompact, openInSidePanelByDefault, serverId, workspaceKey]);
+  }, [isCompact, openInSidePane, workspaceKey]);
 
   if (!hasWorkspaceDiffStat && !hasAgentTracks({ subagentRows, tasks, archiveFinishedStatus })) {
     return null;
diff --git a/packages/app/src/panels/changes/state.test.ts b/packages/app/src/panels/changes/state.test.ts
index 0e9c52a83a..9e1820d4c0 100644
--- a/packages/app/src/panels/changes/state.test.ts
+++ b/packages/app/src/panels/changes/state.test.ts
@@ -1,8 +1,8 @@
 import { describe, expect, it } from "vitest";
 import { changesStateSchema, defaultChangesState } from "./state";
 
-describe("Changes presentation state", () => {
-  it("drops the persisted mode without resetting the remaining presentation", () => {
+describe("Changes pane state", () => {
+  it("drops preferences formerly persisted per pane without resetting local document state", () => {
     expect(
       changesStateSchema.parse({
         ...defaultChangesState,
@@ -10,11 +10,8 @@ describe("Changes presentation state", () => {
         baseRef: "origin/main",
         layout: "split",
         wrapLines: true,
+        hideWhitespace: true,
       }),
-    ).toEqual({
-      ...defaultChangesState,
-      layout: "split",
-      wrapLines: true,
-    });
+    ).toEqual(defaultChangesState);
   });
 });
diff --git a/packages/app/src/panels/changes/state.ts b/packages/app/src/panels/changes/state.ts
index 1b36b5dcb8..a4efb49ebd 100644
--- a/packages/app/src/panels/changes/state.ts
+++ b/packages/app/src/panels/changes/state.ts
@@ -2,26 +2,32 @@ import { z } from "zod";
 
 export const changesStateSchema = z
   .strictObject({
-    // COMPAT(changesModeState): fields persisted by v0.5.0-beta.3; remove after 2026-11-21. Mode selection is ephemeral.
+    // COMPAT(changesPaneState): fields persisted by v0.5.0-beta.3; remove after 2026-11-21. Preferences are global and mode selection is ephemeral.
     mode: z.enum(["uncommitted", "base"]).optional(),
     baseRef: z.string().optional(),
-    layout: z.enum(["unified", "split"]),
-    wrapLines: z.boolean(),
-    hideWhitespace: z.boolean(),
+    layout: z.enum(["unified", "split"]).optional(),
+    wrapLines: z.boolean().optional(),
+    hideWhitespace: z.boolean().optional(),
     treeVisible: z.boolean(),
     treeWidth: z.number().optional(),
     collapsedFilePaths: z.array(z.string()),
     collapsedFolderPaths: z.array(z.string()),
     commitsCollapsed: z.boolean(),
   })
-  .transform(({ mode: _mode, baseRef: _baseRef, ...presentation }) => presentation);
+  .transform(
+    ({
+      mode: _mode,
+      baseRef: _baseRef,
+      layout: _layout,
+      wrapLines: _wrapLines,
+      hideWhitespace: _hideWhitespace,
+      ...paneState
+    }) => paneState,
+  );
 
 export type ChangesState = z.infer<typeof changesStateSchema>;
 
 export const defaultChangesState: ChangesState = {
-  layout: "unified",
-  wrapLines: false,
-  hideWhitespace: false,
   treeVisible: false,
   collapsedFilePaths: [],
   collapsedFolderPaths: [],
diff --git a/packages/app/src/panels/diff-panel.tsx b/packages/app/src/panels/diff-panel.tsx
index 763777c2c4..e97dbcf17e 100644
--- a/packages/app/src/panels/diff-panel.tsx
+++ b/packages/app/src/panels/diff-panel.tsx
@@ -14,12 +14,13 @@ import { useCommitDiffFiles } from "@/git/use-diff-files";
 import { useChangesPreferences } from "@/hooks/use-changes-preferences";
 import { useAppSettings } from "@/hooks/use-settings";
 import { usePaneContext } from "@/panels/pane-context";
-import type { PanelDescriptor, PanelRegistration } from "@/panels/panel-registry";
+import { definePanel, type PanelDescriptor, type PanelPresentation } from "@/panels/panel-registry";
 import { useAddFileToChat } from "@/panels/use-add-file-to-chat";
 import { useWorkspaceDirectory } from "@/stores/session-store-hooks";
 import type { WorkspaceTabTarget } from "@/workspace-tabs/model";
 import { defaultChangesState, changesStateSchema } from "@/panels/changes/state";
 import { usePanelState } from "@/panels/use-panel-state";
+import { RenderProfile } from "@/utils/render-profiler";
 
 const ThemedFileDiff = withUnistyles(FileDiff);
 const ThemedGitCommitHorizontal = withUnistyles(GitCommitHorizontal);
@@ -75,40 +76,77 @@ function PanelState({
   );
 }
 
-function WorkingDiffPanel() {
+function resolveChangesPresentation(
+  isTree: boolean,
+  inlineDiff: boolean,
+): "tree" | "diff" | "combined" {
+  if (!isTree) return "diff";
+  return inlineDiff ? "combined" : "tree";
+}
+
+function ChangesPanel() {
   const { t } = useTranslation();
-  const { serverId, workspaceId, tabId, target, openFileInWorkspace } = usePaneContext();
+  const { serverId, workspaceId, tabId, target, openPreferredTarget, openTargetToSide } =
+    usePaneContext();
   const [changesState, setChangesState] = usePanelState(changesStateSchema, defaultChangesState);
+  const { preferences } = useChangesPreferences();
   const cwd = useWorkspaceDirectory(serverId, workspaceId);
   const isActive = useRetainedPanelActive();
   const { addFile, canAddToChat } = useAddFileToChat({ serverId, workspaceId });
-  invariant(target.kind === "working_diff", "WorkingDiffPanel requires working_diff target");
+  invariant(
+    target.kind === "working_diff" || target.kind === "changes_tree",
+    "ChangesPanel requires working_diff or changes_tree target",
+  );
+  const isTree = target.kind === "changes_tree";
 
   const handleOpenFile = useCallback(
-    (path: string) => openFileInWorkspace({ location: { path }, disposition: "side" }),
-    [openFileInWorkspace],
+    (path: string) =>
+      openPreferredTarget({ kind: "file", path }, isTree ? "explorerChanges" : "diffFiles"),
+    [isTree, openPreferredTarget],
+  );
+
+  const handleSelectDiffFile = useCallback(
+    (path: string) =>
+      openPreferredTarget(
+        { kind: "working_diff", focusPath: path, focusRequestId: Date.now() },
+        "explorerChanges",
+      ),
+    [openPreferredTarget],
+  );
+  const handleOpenDiffToSide = useCallback(
+    (path: string) =>
+      openTargetToSide?.({ kind: "working_diff", focusPath: path, focusRequestId: Date.now() }),
+    [openTargetToSide],
   );
 
   if (!cwd) {
     return <PanelState message={t("panels.diff.directoryMissing")} />;
   }
 
+  const presentation = resolveChangesPresentation(isTree, preferences.inlineDiff);
+  const testID = isTree ? "changes-tree-panel" : "working-diff-panel";
+  const profileId = isTree ? `ChangesTreePanel:${tabId}` : `WorkingDiffPanel:${tabId}`;
+
   return (
-    <View style={styles.container} testID="working-diff-panel">
-      <ChangesSurface
-        serverId={serverId}
-        workspaceId={workspaceId}
-        cwd={cwd}
-        enabled={isActive}
-        host="panel"
-        modeScope={tabId}
-        focusPath={target.focusPath}
-        focusRequestId={target.focusRequestId}
-        onOpenFile={handleOpenFile}
-        onAddToChat={canAddToChat ? addFile : undefined}
-        state={changesState}
-        onStateChange={setChangesState}
-      />
+    <View style={styles.container} testID={testID}>
+      <RenderProfile id={profileId}>
+        <ChangesSurface
+          serverId={serverId}
+          workspaceId={workspaceId}
+          cwd={cwd}
+          enabled={isActive}
+          presentation={presentation}
+          modeScope={tabId}
+          focusPath={target.kind === "working_diff" ? target.focusPath : undefined}
+          focusRequestId={target.kind === "working_diff" ? target.focusRequestId : undefined}
+          onSelectDiffFile={isTree ? handleSelectDiffFile : undefined}
+          onOpenFile={handleOpenFile}
+          onOpenToSide={isTree && openTargetToSide ? handleOpenDiffToSide : undefined}
+          onAddToChat={canAddToChat ? addFile : undefined}
+          state={changesState}
+          onStateChange={setChangesState}
+        />
+      </RenderProfile>
     </View>
   );
 }
@@ -174,17 +212,19 @@ function CommitDiffPanel() {
   );
 }
 
-function useWorkingDiffPanelDescriptor(): PanelDescriptor {
-  const { t } = useTranslation();
-  return {
-    label: t("panels.diff.changesLabel"),
-    subtitle: t("panels.diff.changesSubtitle"),
-    tooltip: t("panels.diff.changesSubtitle"),
-    titleState: "ready",
-    icon: ThemedFileDiff,
-    statusBucket: null,
-  };
-}
+const workingDiffPresentation = {
+  label: (t) => t("panels.diff.diffLabel"),
+  subtitle: (t) => t("panels.diff.changesSubtitle"),
+  tooltip: (t) => t("panels.diff.changesSubtitle"),
+  icon: ThemedFileDiff,
+} satisfies PanelPresentation;
+
+const changesTreePresentation = {
+  label: (t) => t("panels.diff.changesLabel"),
+  subtitle: (t) => t("panels.diff.changesSubtitle"),
+  tooltip: (t) => t("panels.diff.changesSubtitle"),
+  icon: ThemedFileDiff,
+} satisfies PanelPresentation;
 
 function useCommitDiffPanelDescriptor(
   target: Extract<WorkspaceTabTarget, { kind: "commit_diff" }>,
@@ -200,19 +240,20 @@ function useCommitDiffPanelDescriptor(
   };
 }
 
-export const workingDiffPanelRegistration: PanelRegistration<"working_diff"> = {
-  kind: "working_diff",
-  component: WorkingDiffPanel,
-  useDescriptor: useWorkingDiffPanelDescriptor,
-  resourceKey: () => "working_diff",
-};
+export const workingDiffPanelRegistration = definePanel("working_diff", {
+  component: ChangesPanel,
+  presentation: workingDiffPresentation,
+});
 
-export const commitDiffPanelRegistration: PanelRegistration<"commit_diff"> = {
-  kind: "commit_diff",
+export const changesTreePanelRegistration = definePanel("changes_tree", {
+  component: ChangesPanel,
+  presentation: changesTreePresentation,
+});
+
+export const commitDiffPanelRegistration = definePanel("commit_diff", {
   component: CommitDiffPanel,
   useDescriptor: useCommitDiffPanelDescriptor,
-  resourceKey: (target) => target.sha,
-};
+});
 
 const styles = StyleSheet.create((theme) => ({
   container: {
diff --git a/packages/app/src/panels/draft-panel.tsx b/packages/app/src/panels/draft-panel.tsx
index bcef483b7b..98000d8ef8 100644
--- a/packages/app/src/panels/draft-panel.tsx
+++ b/packages/app/src/panels/draft-panel.tsx
@@ -1,9 +1,7 @@
 import { AgentConversationPanel, useDraftPanelDescriptor } from "@/panels/agent-panel";
-import type { PanelRegistration } from "@/panels/panel-registry";
+import { definePanel } from "@/panels/panel-registry";
 
-export const draftPanelRegistration: PanelRegistration<"draft"> = {
-  kind: "draft",
-  resourceKey: (target) => target.draftId,
+export const draftPanelRegistration = definePanel("draft", {
   component: AgentConversationPanel,
   useDescriptor: useDraftPanelDescriptor,
-};
+});
diff --git a/packages/app/src/panels/file-panel.tsx b/packages/app/src/panels/file-panel.tsx
index b06844e4ac..1d5112359e 100644
--- a/packages/app/src/panels/file-panel.tsx
+++ b/packages/app/src/panels/file-panel.tsx
@@ -1,17 +1,12 @@
 import { Text, View } from "react-native";
-import { useCallback, useMemo } from "react";
+import { useMemo } from "react";
 import invariant from "tiny-invariant";
 import { useTranslation } from "react-i18next";
 import { FilePane } from "@/file-pane/pane";
 import { usePaneContext } from "@/panels/pane-context";
-import type { PanelRegistration } from "@/panels/panel-registry";
+import { definePanel } from "@/panels/panel-registry";
 import { useWorkspaceDirectory } from "@/stores/session-store-hooks";
 import { createMaterialFileIcon } from "@/components/material-file-icon";
-import { FileExplorerPane } from "@/components/file-explorer-pane";
-import { TreeRail } from "@/components/tree-rail";
-import { useIsCompactFormFactor } from "@/constants/layout";
-import { defaultFileState, fileStateSchema } from "@/panels/file/state";
-import { usePanelState } from "@/panels/use-panel-state";
 
 const CENTERED_PADDED_STYLE = {
   flex: 1,
@@ -35,20 +30,8 @@ function useFilePanelDescriptor(target: { kind: "file"; path: string }) {
 
 function FilePanel() {
   const { t } = useTranslation();
-  const { serverId, workspaceId, target, fileNavigationRevision, retargetCurrentTab } =
-    usePaneContext();
-  const [fileState, setFileState] = usePanelState(fileStateSchema, defaultFileState);
-  const isCompact = useIsCompactFormFactor();
-  const treeVisible = fileState.treeVisible;
+  const { serverId, workspaceId, target, fileNavigationRevision } = usePaneContext();
   const workspaceDirectory = useWorkspaceDirectory(serverId, workspaceId);
-  const handleOpenFile = useCallback(
-    (path: string) => retargetCurrentTab({ kind: "file", path }),
-    [retargetCurrentTab],
-  );
-  const handleTreeWidthChange = useCallback(
-    (treeWidth: number) => setFileState({ ...fileState, treeWidth }),
-    [fileState, setFileState],
-  );
   invariant(target.kind === "file", "FilePanel requires file target");
   if (!workspaceDirectory) {
     return (
@@ -57,44 +40,17 @@ function FilePanel() {
       </View>
     );
   }
-  // Branch around the whole rail rather than making the tree slot conditional —
-  // see the `TreeRail` children contract.
-  if (isCompact || !treeVisible) {
-    return (
-      <FilePane
-        serverId={serverId}
-        workspaceRoot={workspaceDirectory}
-        location={target}
-        navigationRevision={fileNavigationRevision ?? 0}
-      />
-    );
-  }
   return (
-    <TreeRail
-      testID="file-tree-rail"
-      width={fileState.treeWidth ?? 220}
-      onWidthChange={handleTreeWidthChange}
-      minimumWidth={160}
-    >
-      <FilePane
-        serverId={serverId}
-        workspaceRoot={workspaceDirectory}
-        location={target}
-        navigationRevision={fileNavigationRevision ?? 0}
-      />
-      <FileExplorerPane
-        serverId={serverId}
-        workspaceId={workspaceId}
-        workspaceRoot={workspaceDirectory}
-        onOpenFile={handleOpenFile}
-      />
-    </TreeRail>
+    <FilePane
+      serverId={serverId}
+      workspaceRoot={workspaceDirectory}
+      location={target}
+      navigationRevision={fileNavigationRevision ?? 0}
+    />
   );
 }
 
-export const filePanelRegistration: PanelRegistration<"file"> = {
-  kind: "file",
+export const filePanelRegistration = definePanel("file", {
   component: FilePanel,
   useDescriptor: useFilePanelDescriptor,
-  resourceKey: (target) => target.path,
-};
+});
diff --git a/packages/app/src/panels/files-panel.tsx b/packages/app/src/panels/files-panel.tsx
index 07d17818ed..f733915c8b 100644
--- a/packages/app/src/panels/files-panel.tsx
+++ b/packages/app/src/panels/files-panel.tsx
@@ -1,42 +1,36 @@
 import { Text, View } from "react-native";
-import { FolderTree } from "lucide-react-native";
+import { Files } from "lucide-react-native";
 import { StyleSheet, withUnistyles } from "react-native-unistyles";
 import { useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import invariant from "tiny-invariant";
 import { FileExplorerPane } from "@/components/file-explorer-pane";
 import { usePaneContext } from "@/panels/pane-context";
-import type { PanelRegistration } from "@/panels/panel-registry";
+import { definePanel, type PanelPresentation } from "@/panels/panel-registry";
 import { useAddFileToChat } from "@/panels/use-add-file-to-chat";
 import { useWorkspaceDirectory } from "@/stores/session-store-hooks";
-import { TreeRail } from "@/components/tree-rail";
-import { useIsCompactFormFactor } from "@/constants/layout";
 
-const ThemedFolderTree = withUnistyles(FolderTree);
-const FILE_TREE_WIDTH = 220;
-
-function useFilesPanelDescriptor() {
-  const { t } = useTranslation();
-  return {
-    label: t("panels.files.label"),
-    subtitle: t("panels.files.subtitle"),
-    tooltip: t("panels.files.tooltip"),
-    titleState: "ready" as const,
-    icon: ThemedFolderTree,
-    statusBucket: null,
-  };
-}
+const ThemedFiles = withUnistyles(Files);
+const filesPanelPresentation = {
+  label: (t) => t("panels.files.label"),
+  subtitle: (t) => t("panels.files.subtitle"),
+  tooltip: (t) => t("panels.files.tooltip"),
+  icon: ThemedFiles,
+} satisfies PanelPresentation;
 
 function FilesPanel() {
   const { t } = useTranslation();
-  const { serverId, workspaceId, target, retargetCurrentTab } = usePaneContext();
+  const { serverId, workspaceId, target, openPreferredTarget, openTargetToSide } = usePaneContext();
   const workspaceRoot = useWorkspaceDirectory(serverId, workspaceId);
   const { addFile, canAddToChat } = useAddFileToChat({ serverId, workspaceId });
-  const isCompact = useIsCompactFormFactor();
   invariant(target.kind === "files", "FilesPanel requires files target");
   const onOpenFile = useCallback(
-    (path: string) => retargetCurrentTab({ kind: "file", path }),
-    [retargetCurrentTab],
+    (path: string) => openPreferredTarget({ kind: "file", path }, "explorerFiles"),
+    [openPreferredTarget],
+  );
+  const onOpenFileToSide = useCallback(
+    (path: string) => openTargetToSide?.({ kind: "file", path }),
+    [openTargetToSide],
   );
   if (!workspaceRoot) {
     return (
@@ -45,39 +39,22 @@ function FilesPanel() {
       </View>
     );
   }
-  if (isCompact) {
-    return (
-      <FileExplorerPane
-        serverId={serverId}
-        workspaceId={workspaceId}
-        workspaceRoot={workspaceRoot}
-        onOpenFile={onOpenFile}
-        onAddToChat={canAddToChat ? addFile : undefined}
-      />
-    );
-  }
   return (
-    <TreeRail testID="files-tree-rail" width={FILE_TREE_WIDTH}>
-      <View style={styles.centerState}>
-        <Text style={styles.emptyText}>{t("panels.files.chooseFile")}</Text>
-      </View>
-      <FileExplorerPane
-        serverId={serverId}
-        workspaceId={workspaceId}
-        workspaceRoot={workspaceRoot}
-        onOpenFile={onOpenFile}
-        onAddToChat={canAddToChat ? addFile : undefined}
-      />
-    </TreeRail>
+    <FileExplorerPane
+      serverId={serverId}
+      workspaceId={workspaceId}
+      workspaceRoot={workspaceRoot}
+      onOpenFile={onOpenFile}
+      onOpenFileToSide={openTargetToSide ? onOpenFileToSide : undefined}
+      onAddToChat={canAddToChat ? addFile : undefined}
+    />
   );
 }
 
-export const filesPanelRegistration: PanelRegistration<"files"> = {
-  kind: "files",
-  resourceKey: () => "files",
+export const filesPanelRegistration = definePanel("files", {
   component: FilesPanel,
-  useDescriptor: useFilesPanelDescriptor,
-};
+  presentation: filesPanelPresentation,
+});
 
 const styles = StyleSheet.create((theme) => ({
   centerState: {
@@ -86,8 +63,4 @@ const styles = StyleSheet.create((theme) => ({
     justifyContent: "center",
     padding: theme.spacing[4],
   },
-  emptyText: {
-    color: theme.colors.foregroundMuted,
-    fontSize: theme.fontSize.base,
-  },
 }));
diff --git a/packages/app/src/panels/new-tab-panel.tsx b/packages/app/src/panels/new-tab-panel.tsx
index 5faed42ae9..cdafafabed 100644
--- a/packages/app/src/panels/new-tab-panel.tsx
+++ b/packages/app/src/panels/new-tab-panel.tsx
@@ -1,7 +1,15 @@
-import { memo, useCallback, useEffect, useMemo, useRef, type ReactElement } from "react";
+import {
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  type ComponentType,
+  type ReactElement,
+} from "react";
 import { Pressable, ScrollView, Text, View, type PressableStateCallbackType } from "react-native";
 import { useTranslation } from "react-i18next";
-import { Pencil, Plus, type LucideIcon } from "lucide-react-native";
+import { Pencil, Plus } from "lucide-react-native";
 import { StyleSheet, withUnistyles } from "react-native-unistyles";
 import { TerminalProfileIcon } from "@/components/terminal-profile-icon";
 import { Shortcut } from "@/components/ui/shortcut";
@@ -10,7 +18,7 @@ import { useShortcutKeys } from "@/hooks/use-shortcut-keys";
 import { useKeyboardActionHandler } from "@/hooks/use-keyboard-action-handler";
 import type { KeyboardActionDefinition } from "@/keyboard/keyboard-action-dispatcher";
 import { usePaneContext, usePaneFocus } from "@/panels/pane-context";
-import type { PanelRegistration } from "@/panels/panel-registry";
+import { definePanel, type PanelIconProps } from "@/panels/panel-registry";
 import { ICON_SIZE, SPACING, type Theme } from "@/styles/theme";
 import {
   useWorkspaceTabLaunchCatalog,
@@ -29,7 +37,13 @@ const LAUNCHER_MAX_WIDTH = 380;
 const EDIT_PROFILES_HIT_SIZE = ICON_SIZE.xs + SPACING[2];
 const ROW_DATA_SET = { newTabLauncherRow: "true" };
 const ROW_SELECTOR = '[data-new-tab-launcher-row="true"]';
-function LauncherIcon({ Icon, color = "" }: { Icon: LucideIcon; color?: string }) {
+function LauncherIcon({
+  Icon,
+  color = "",
+}: {
+  Icon: ComponentType<PanelIconProps>;
+  color?: string;
+}) {
   return <Icon size={LAUNCHER_ICON_SIZE} color={color} />;
 }
 
@@ -116,17 +130,19 @@ function useNewTabDescriptor() {
 }
 
 const NewTabPanel = memo(function NewTabPanel(): ReactElement {
-  const { isSidePanel, serverId, tabId } = usePaneContext();
+  const { host, serverId, tabId } = usePaneContext();
   const { isInteractive, focusPane } = usePaneFocus();
   const containerRef = useRef<View | null>(null);
   const groups = useWorkspaceTabLaunchCatalog({
     serverId,
-    purpose: isSidePanel ? "supporting" : "primary",
+    purpose: host === "explorer" ? "supporting" : "primary",
+    host,
   });
   const itemsById = useMemo(
     () => new Map(groups.flatMap((group) => group.items).map((item) => [item.id, item])),
     [groups],
   );
+  const handlesWorkspaceShortcuts = isInteractive && host === "main";
 
   useEffect(() => {
     if (!isWeb || !isInteractive) return;
@@ -194,11 +210,15 @@ const NewTabPanel = memo(function NewTabPanel(): ReactElement {
         return true;
       }
       if (action.id === "workspace.tab.target.changes") {
-        itemsById.get("changes")?.launch({ kind: "replace", tabId });
+        const changesItem = itemsById.get("changes") ?? itemsById.get("diff");
+        if (!changesItem) return false;
+        changesItem.launch({ kind: "replace", tabId });
         return true;
       }
       if (action.id === "workspace.tab.target.files") {
-        itemsById.get("files")?.launch({ kind: "replace", tabId });
+        const filesItem = itemsById.get("files");
+        if (!filesItem) return false;
+        filesItem.launch({ kind: "replace", tabId });
         return true;
       }
       return false;
@@ -216,7 +236,7 @@ const NewTabPanel = memo(function NewTabPanel(): ReactElement {
       "workspace.tab.target.changes",
       "workspace.tab.target.files",
     ],
-    enabled: isInteractive,
+    enabled: handlesWorkspaceShortcuts,
     priority: 250,
     handle: handleKeyboardAction,
   });
@@ -249,12 +269,10 @@ const NewTabPanel = memo(function NewTabPanel(): ReactElement {
   );
 });
 
-export const newTabPanelRegistration: PanelRegistration<"new_tab"> = {
-  kind: "new_tab",
-  resourceKey: () => "new_tab",
+export const newTabPanelRegistration = definePanel("new_tab", {
   component: NewTabPanel,
   useDescriptor: useNewTabDescriptor,
-};
+});
 
 const styles = StyleSheet.create((theme) => ({
   container: {
diff --git a/packages/app/src/panels/pane-context.tsx b/packages/app/src/panels/pane-context.tsx
index 56a0c22ce4..5e716b006a 100644
--- a/packages/app/src/panels/pane-context.tsx
+++ b/packages/app/src/panels/pane-context.tsx
@@ -3,17 +3,20 @@ import invariant from "tiny-invariant";
 import type { JsonValue } from "@getpaseo/protocol/agent-types";
 import type { WorkspaceTabTarget } from "@/workspace-tabs/model";
 import type { WorkspaceFileOpenRequest } from "@/workspace/file-open";
+import type { OpenInSidePaneSource } from "@/workspace-tabs/open-beside";
+import type { PaneHost } from "@/panels/panel-manifest";
 
 export interface PaneContextValue {
   serverId: string;
   workspaceId: string;
-  /** Whether this pane is the workspace's dedicated Side panel. */
-  isSidePanel: boolean;
+  host: PaneHost;
   tabId: string;
   target: WorkspaceTabTarget;
   state?: JsonValue;
   fileNavigationRevision?: number;
   openTab: (target: WorkspaceTabTarget) => void;
+  openPreferredTarget: (target: WorkspaceTabTarget, source: OpenInSidePaneSource) => void;
+  openTargetToSide?: (target: WorkspaceTabTarget) => void;
   closeCurrentTab: () => void;
   retargetCurrentTab: (target: WorkspaceTabTarget) => void;
   setCurrentTabState: (state: JsonValue) => void;
diff --git a/packages/app/src/panels/panel-manifest.test.ts b/packages/app/src/panels/panel-manifest.test.ts
new file mode 100644
index 0000000000..0a91aad995
--- /dev/null
+++ b/packages/app/src/panels/panel-manifest.test.ts
@@ -0,0 +1,24 @@
+import { describe, expect, it } from "vitest";
+import { panelResourceKey, panelSupportsHost } from "@/panels/panel-manifest";
+
+describe("panel manifest", () => {
+  it("answers host support without React panel registration", () => {
+    expect(panelSupportsHost("agent", "main")).toBe(true);
+    expect(panelSupportsHost("agent", "explorer")).toBe(true);
+    expect(panelSupportsHost("file", "explorer")).toBe(true);
+    expect(panelSupportsHost("working_diff", "explorer")).toBe(true);
+    expect(panelSupportsHost("new_tab", "explorer")).toBe(true);
+    expect(panelSupportsHost("files", "explorer")).toBe(true);
+    expect(panelSupportsHost("files", "main")).toBe(false);
+    expect(panelSupportsHost("setup", "explorer")).toBe(false);
+  });
+
+  it("keeps durable resource identity separate from transient target input", () => {
+    expect(
+      panelResourceKey({ kind: "working_diff", focusPath: "src/a.ts", focusRequestId: 1 }),
+    ).toBe(panelResourceKey({ kind: "working_diff", focusPath: "src/b.ts", focusRequestId: 2 }));
+    expect(panelResourceKey({ kind: "file", path: "src/a.ts" })).not.toBe(
+      panelResourceKey({ kind: "file", path: "src/b.ts" }),
+    );
+  });
+});
diff --git a/packages/app/src/panels/panel-manifest.ts b/packages/app/src/panels/panel-manifest.ts
new file mode 100644
index 0000000000..c608340d09
--- /dev/null
+++ b/packages/app/src/panels/panel-manifest.ts
@@ -0,0 +1,103 @@
+import type { WorkspaceTabTarget } from "@/workspace-tabs/model";
+
+export type PaneHost = "main" | "explorer";
+
+export interface PanelManifest<K extends WorkspaceTabTarget["kind"] = WorkspaceTabTarget["kind"]> {
+  kind: K;
+  supportedHosts: readonly PaneHost[];
+  resourceKey(target: Extract<WorkspaceTabTarget, { kind: K }>): string;
+}
+
+type PanelManifestByKind = {
+  [K in WorkspaceTabTarget["kind"]]: PanelManifest<K>;
+};
+
+const manifests = {
+  new_tab: {
+    kind: "new_tab",
+    supportedHosts: ["main", "explorer"],
+    resourceKey: () => "new_tab",
+  },
+  draft: {
+    kind: "draft",
+    supportedHosts: ["main", "explorer"],
+    resourceKey: (target) => target.draftId,
+  },
+  agent: {
+    kind: "agent",
+    supportedHosts: ["main", "explorer"],
+    resourceKey: (target) => target.agentId,
+  },
+  provider_subagent: {
+    kind: "provider_subagent",
+    supportedHosts: ["main", "explorer"],
+    resourceKey: (target) => `${target.parentAgentId}:${target.subagentId}`,
+  },
+  terminal: {
+    kind: "terminal",
+    supportedHosts: ["main", "explorer"],
+    resourceKey: (target) => target.terminalId,
+  },
+  browser: {
+    kind: "browser",
+    supportedHosts: ["main"],
+    resourceKey: (target) => target.browserId,
+  },
+  changes_tree: {
+    kind: "changes_tree",
+    supportedHosts: ["explorer"],
+    resourceKey: () => "changes_tree",
+  },
+  files: {
+    kind: "files",
+    supportedHosts: ["explorer"],
+    resourceKey: () => "files",
+  },
+  pull_request: {
+    kind: "pull_request",
+    supportedHosts: ["main", "explorer"],
+    resourceKey: () => "pull_request",
+  },
+  file: {
+    kind: "file",
+    supportedHosts: ["main", "explorer"],
+    resourceKey: (target) => target.path,
+  },
+  working_diff: {
+    kind: "working_diff",
+    supportedHosts: ["main", "explorer"],
+    resourceKey: () => "working_diff",
+  },
+  plugin: {
+    kind: "plugin",
+    // Plugin targets are narrowed by the target-aware plugin panel capability resolver.
+    supportedHosts: ["main", "explorer"],
+    resourceKey: (target) =>
+      target.context === "agent"
+        ? `${target.pluginId}:${target.panelId}:agent:${target.agentId}`
+        : `${target.pluginId}:${target.panelId}:workspace`,
+  },
+  setup: {
+    kind: "setup",
+    supportedHosts: ["main"],
+    resourceKey: (target) => target.workspaceId,
+  },
+  commit_diff: {
+    kind: "commit_diff",
+    supportedHosts: ["main", "explorer"],
+    resourceKey: (target) => target.sha,
+  },
+} satisfies PanelManifestByKind;
+
+export function getPanelManifest<K extends WorkspaceTabTarget["kind"]>(kind: K): PanelManifest<K> {
+  return manifests[kind] as unknown as PanelManifest<K>;
+}
+
+export function panelSupportsHost(kind: WorkspaceTabTarget["kind"], host: PaneHost): boolean {
+  return getPanelManifest(kind).supportedHosts.includes(host);
+}
+
+export function panelResourceKey(target: WorkspaceTabTarget): string {
+  const manifest = getPanelManifest(target.kind);
+  return `${target.kind}:${manifest.resourceKey(target as never)}`;
+}
diff --git a/packages/app/src/panels/panel-registry.ts b/packages/app/src/panels/panel-registry.ts
index d746ace512..e41ef41ff8 100644
--- a/packages/app/src/panels/panel-registry.ts
+++ b/packages/app/src/panels/panel-registry.ts
@@ -1,10 +1,16 @@
 import type { ComponentType } from "react";
+import type { TFunction } from "i18next";
+import { useTranslation } from "react-i18next";
+import invariant from "tiny-invariant";
+import { getPanelManifest, type PanelManifest } from "@/panels/panel-manifest";
+export type { PaneHost } from "@/panels/panel-manifest";
 import type { WorkspaceTabTarget } from "@/workspace-tabs/model";
 import type { SidebarStateBucket } from "@/utils/sidebar-agent-state";
 
 export interface PanelIconProps {
   size: number;
   color: string;
+  strokeWidth?: number;
 }
 
 export interface PanelDescriptor {
@@ -22,16 +28,65 @@ export interface PanelDescriptorContext {
   tabId: string;
 }
 
+export interface PanelPresentation {
+  label: (t: TFunction) => string;
+  subtitle: (t: TFunction) => string;
+  tooltip: (t: TFunction) => string;
+  icon: ComponentType<PanelIconProps>;
+}
+
 export interface PanelRegistration<
   K extends WorkspaceTabTarget["kind"] = WorkspaceTabTarget["kind"],
-> {
-  kind: K;
+> extends PanelManifest<K> {
   component: ComponentType;
+  presentation?: PanelPresentation;
   useDescriptor(
     target: Extract<WorkspaceTabTarget, { kind: K }>,
     context: PanelDescriptorContext,
   ): PanelDescriptor;
-  resourceKey(target: Extract<WorkspaceTabTarget, { kind: K }>): string;
+}
+
+type PanelImplementation<K extends WorkspaceTabTarget["kind"]> =
+  | {
+      component: ComponentType;
+      presentation: PanelPresentation;
+      useDescriptor?: PanelRegistration<K>["useDescriptor"];
+    }
+  | {
+      component: ComponentType;
+      presentation?: never;
+      useDescriptor: PanelRegistration<K>["useDescriptor"];
+    };
+
+function createStaticDescriptorHook(presentation: PanelPresentation) {
+  return function useStaticPanelDescriptor(): PanelDescriptor {
+    const { t } = useTranslation();
+    return {
+      label: presentation.label(t),
+      subtitle: presentation.subtitle(t),
+      tooltip: presentation.tooltip(t),
+      titleState: "ready",
+      icon: presentation.icon,
+      statusBucket: null,
+    };
+  };
+}
+
+export function definePanel<K extends WorkspaceTabTarget["kind"]>(
+  kind: K,
+  implementation: PanelImplementation<K>,
+): PanelRegistration<K> {
+  let useDescriptor = implementation.useDescriptor;
+  if (!useDescriptor) {
+    invariant(implementation.presentation, `Panel ${kind} requires a presentation`);
+    useDescriptor = createStaticDescriptorHook(implementation.presentation);
+  }
+  return {
+    ...getPanelManifest(kind),
+    component: implementation.component,
+    presentation: implementation.presentation,
+    useDescriptor,
+  };
 }
 
 const panelRegistry = new Map<WorkspaceTabTarget["kind"], PanelRegistration>();
diff --git a/packages/app/src/panels/provider-subagent-panel.tsx b/packages/app/src/panels/provider-subagent-panel.tsx
index 91af894f22..46153089e8 100644
--- a/packages/app/src/panels/provider-subagent-panel.tsx
+++ b/packages/app/src/panels/provider-subagent-panel.tsx
@@ -7,7 +7,7 @@ import { AgentStreamView } from "@/agent-stream/view";
 import { getProviderIcon } from "@/components/provider-icons";
 import type { AgentScreenAgent } from "@/hooks/use-agent-screen-state-machine";
 import { usePaneContext } from "@/panels/pane-context";
-import type { PanelDescriptor, PanelRegistration } from "@/panels/panel-registry";
+import { definePanel, type PanelDescriptor } from "@/panels/panel-registry";
 import { useSessionStore } from "@/stores/session-store";
 import {
   providerSubagentKey,
@@ -228,9 +228,7 @@ const styles = StyleSheet.create((theme) => ({
   unsupportedText: { color: theme.colors.foregroundMuted, textAlign: "center" },
 }));
 
-export const providerSubagentPanelRegistration: PanelRegistration<"provider_subagent"> = {
-  kind: "provider_subagent",
-  resourceKey: (target) => `${target.parentAgentId}:${target.subagentId}`,
+export const providerSubagentPanelRegistration = definePanel("provider_subagent", {
   component: ProviderSubagentPanel,
   useDescriptor: useProviderSubagentDescriptor,
-};
+});
diff --git a/packages/app/src/panels/pull-request-panel.tsx b/packages/app/src/panels/pull-request-panel.tsx
index 7280426d6c..53a6af8bd0 100644
--- a/packages/app/src/panels/pull-request-panel.tsx
+++ b/packages/app/src/panels/pull-request-panel.tsx
@@ -5,11 +5,17 @@ import { useTranslation } from "react-i18next";
 import invariant from "tiny-invariant";
 import { formatPrTabLabel } from "@/git/pull-request-panel";
 import { usePaneContext } from "@/panels/pane-context";
-import type { PanelRegistration } from "@/panels/panel-registry";
+import { definePanel, type PanelPresentation } from "@/panels/panel-registry";
 import { PullRequestContent, usePullRequestData } from "@/panels/pull-request";
 import { useWorkspaceDirectory } from "@/stores/session-store-hooks";
 
 const ThemedGitPullRequest = withUnistyles(GitPullRequest);
+const pullRequestPanelPresentation = {
+  label: (t) => t("panels.pullRequest.label"),
+  subtitle: (t) => t("panels.pullRequest.subtitle"),
+  tooltip: (t) => t("panels.pullRequest.label"),
+  icon: ThemedGitPullRequest,
+} satisfies PanelPresentation;
 const CENTERED_PADDED_STYLE = {
   flex: 1,
   alignItems: "center",
@@ -25,13 +31,15 @@ function usePullRequestPanelDescriptor(
   const cwd = useWorkspaceDirectory(context.serverId, context.workspaceId) ?? "";
   const prPane = usePullRequestData({ serverId: context.serverId, cwd, timelineEnabled: false });
   const label =
-    prPane.prNumber === null ? t("panels.pullRequest.label") : formatPrTabLabel(prPane.prNumber);
+    prPane.prNumber === null
+      ? pullRequestPanelPresentation.label(t)
+      : formatPrTabLabel(prPane.prNumber);
   return {
     label,
-    subtitle: t("panels.pullRequest.subtitle"),
+    subtitle: pullRequestPanelPresentation.subtitle(t),
     tooltip: label,
     titleState: prPane.isLoading ? ("loading" as const) : ("ready" as const),
-    icon: ThemedGitPullRequest,
+    icon: pullRequestPanelPresentation.icon,
     statusBucket: null,
   };
 }
@@ -54,9 +62,8 @@ function PullRequestPanel() {
   );
 }
 
-export const pullRequestPanelRegistration: PanelRegistration<"pull_request"> = {
-  kind: "pull_request",
-  resourceKey: () => "pull_request",
+export const pullRequestPanelRegistration = definePanel("pull_request", {
   component: PullRequestPanel,
+  presentation: pullRequestPanelPresentation,
   useDescriptor: usePullRequestPanelDescriptor,
-};
+});
diff --git a/packages/app/src/panels/register-panels.ts b/packages/app/src/panels/register-panels.ts
index 9003cabb65..1e91dc0401 100644
--- a/packages/app/src/panels/register-panels.ts
+++ b/packages/app/src/panels/register-panels.ts
@@ -1,6 +1,10 @@
 import { agentPanelRegistration } from "@/panels/agent-panel";
 import { browserPanelRegistration } from "@/desktop/browser/panel";
-import { commitDiffPanelRegistration, workingDiffPanelRegistration } from "@/panels/diff-panel";
+import {
+  changesTreePanelRegistration,
+  commitDiffPanelRegistration,
+  workingDiffPanelRegistration,
+} from "@/panels/diff-panel";
 import { draftPanelRegistration } from "@/panels/draft-panel";
 import { filePanelRegistration } from "@/panels/file-panel";
 import { filesPanelRegistration } from "@/panels/files-panel";
@@ -30,6 +34,7 @@ export function ensurePanelsRegistered(): void {
   registerPanel(pullRequestPanelRegistration);
   registerPanel(commitDiffPanelRegistration);
   registerPanel(workingDiffPanelRegistration);
+  registerPanel(changesTreePanelRegistration);
   registerPanel(pluginPanelRegistration);
   panelsRegistered = true;
 }
diff --git a/packages/app/src/panels/setup-panel.tsx b/packages/app/src/panels/setup-panel.tsx
index 26301596f5..8b6057c06d 100644
--- a/packages/app/src/panels/setup-panel.tsx
+++ b/packages/app/src/panels/setup-panel.tsx
@@ -6,7 +6,7 @@ import { Pressable, type PressableStateCallbackType, ScrollView, Text, View } fr
 import invariant from "tiny-invariant";
 import { StyleSheet, withUnistyles } from "react-native-unistyles";
 import { usePaneContext } from "@/panels/pane-context";
-import type { PanelDescriptor, PanelRegistration } from "@/panels/panel-registry";
+import { definePanel, type PanelDescriptor } from "@/panels/panel-registry";
 import { buildWorkspaceTabPersistenceKey } from "@/workspace-tabs/model";
 import { CODE_SURFACE_DATASET } from "@/styles/code-surface";
 import type { Theme } from "@/styles/theme";
@@ -390,12 +390,10 @@ function SetupCommandRow({
   );
 }
 
-export const setupPanelRegistration: PanelRegistration<"setup"> = {
-  kind: "setup",
-  resourceKey: (target) => target.workspaceId,
+export const setupPanelRegistration = definePanel("setup", {
   component: SetupPanel,
   useDescriptor: useSetupPanelDescriptor,
-};
+});
 
 function SetupCommandChevron({ showDetail }: { showDetail: boolean }) {
   const chevronStyle = useMemo(
diff --git a/packages/app/src/panels/terminal-panel.tsx b/packages/app/src/panels/terminal-panel.tsx
index f409d0ff3c..32dd1f188d 100644
--- a/packages/app/src/panels/terminal-panel.tsx
+++ b/packages/app/src/panels/terminal-panel.tsx
@@ -8,7 +8,7 @@ import type { ListTerminalsResponse } from "@getpaseo/protocol/messages";
 import { deriveTerminalActivityStatusBucket } from "@getpaseo/protocol/terminal-activity";
 import { TerminalPane } from "@/components/terminal-pane";
 import { usePaneContext, usePaneFocus } from "@/panels/pane-context";
-import type { PanelDescriptor, PanelRegistration } from "@/panels/panel-registry";
+import { definePanel, type PanelDescriptor } from "@/panels/panel-registry";
 import { queryClient } from "@/data/query-client";
 import { buildTerminalsQueryKey } from "@/screens/workspace/terminals/state";
 import { usePanelStore } from "@/stores/panel-store";
@@ -114,9 +114,7 @@ function TerminalPanel() {
   );
 }
 
-export const terminalPanelRegistration: PanelRegistration<"terminal"> = {
-  kind: "terminal",
-  resourceKey: (target) => target.terminalId,
+export const terminalPanelRegistration = definePanel("terminal", {
   component: TerminalPanel,
   useDescriptor: useTerminalPanelDescriptor,
-};
+});
diff --git a/packages/app/src/plugins/command-center/contributions.test.ts b/packages/app/src/plugins/command-center/contributions.test.ts
index 9e131a03f3..659736d04d 100644
--- a/packages/app/src/plugins/command-center/contributions.test.ts
+++ b/packages/app/src/plugins/command-center/contributions.test.ts
@@ -70,6 +70,7 @@ function plugin(onAgentSelect: AgentCommandItem["onSelect"]): InstalledPlugin {
         title: "Details",
         icon: "Scan",
         context: "agent",
+        locations: ["workspace", "explorer"],
         Component: () => null,
       },
     ],
@@ -179,7 +180,7 @@ describe("plugin Command Center contributions", () => {
       receivedPaseo = context.paseo;
       rpcValue = (await context.rpc(inspect, { value: 4 })).value;
       context.openSurface("main");
-      context.openPanel("details");
+      context.openPanel("details", { location: "explorer" });
     });
     const runtime = createRuntime("review");
     const actions = buildPluginCommandCenterContributions({
@@ -192,11 +193,11 @@ describe("plugin Command Center contributions", () => {
         openSurface(pluginId, surfaceId) {
           opened.push(`${pluginId}/surface/${surfaceId}`);
         },
-        openWorkspacePanel(pluginId, panelId) {
-          opened.push(`${pluginId}/workspace/${panelId}`);
+        openWorkspacePanel(pluginId, panelId, location) {
+          opened.push(`${pluginId}/workspace/${panelId}/${location}`);
         },
-        openAgentPanel(pluginId, panelId, agentId) {
-          opened.push(`${pluginId}/agent/${panelId}/${agentId}`);
+        openAgentPanel(pluginId, panelId, agentId, location) {
+          opened.push(`${pluginId}/agent/${panelId}/${agentId}/${location}`);
         },
       },
       reportError(error) {
@@ -208,7 +209,7 @@ describe("plugin Command Center contributions", () => {
 
     expect(rpcValue).toBe(5);
     expect(receivedPaseo).toBe(runtime.paseo);
-    expect(opened).toEqual(["review/surface/main", "review/agent/details/agent-1"]);
+    expect(opened).toEqual(["review/surface/main", "review/agent/details/agent-1/explorer"]);
   });
 
   it("removes every contribution when its installation disappears", () => {
diff --git a/packages/app/src/plugins/command-center/contributions.ts b/packages/app/src/plugins/command-center/contributions.ts
index 7852164681..70bc65bc51 100644
--- a/packages/app/src/plugins/command-center/contributions.ts
+++ b/packages/app/src/plugins/command-center/contributions.ts
@@ -1,16 +1,22 @@
 import { callPluginRpc } from "@getpaseo/plugin/host";
-import type { PluginCommandCapabilities } from "@getpaseo/plugin";
+import type { PluginCommandCapabilities, PluginPanelLocation } from "@getpaseo/plugin";
 import type { PluginClientStateSource } from "@getpaseo/plugin/host";
 import type { CommandCenterContribution } from "@/command-center/contributions";
 import { getCommandCenterIcon } from "@/command-center/icon";
 import { resolvePluginIcon } from "../icons";
+import { resolvePluginPanelOpenLocation } from "../workspace-panels/locations";
 import type { PluginSurfaceRuntime } from "../surface-runtime";
 import type { InstalledPlugin } from "../types";
 
 export interface PluginCommandCenterNavigation {
   openSurface(pluginId: string, surfaceId: string): void;
-  openWorkspacePanel(pluginId: string, panelId: string): void;
-  openAgentPanel(pluginId: string, panelId: string, agentId: string): void;
+  openWorkspacePanel(pluginId: string, panelId: string, location: PluginPanelLocation): void;
+  openAgentPanel(
+    pluginId: string,
+    panelId: string,
+    agentId: string,
+    location: PluginPanelLocation,
+  ): void;
 }
 
 export interface PluginCommandCenterSource {
@@ -65,12 +71,13 @@ export function buildPluginCommandCenterContributions(
               context: "workspace",
               ...common,
               workspace,
-              openPanel(panelId) {
+              openPanel(panelId, options) {
                 const panel = plugin.workspacePanels.find(
                   (candidate) => candidate.id === panelId && candidate.context === "workspace",
                 );
                 if (!panel) throw new Error(`Workspace panel is unavailable: ${panelId}`);
-                source.navigation.openWorkspacePanel(plugin.id, panelId);
+                const location = resolvePluginPanelOpenLocation(panel, options?.location);
+                source.navigation.openWorkspacePanel(plugin.id, panelId, location);
               },
             });
             return;
@@ -82,14 +89,15 @@ export function buildPluginCommandCenterContributions(
             ...common,
             workspace,
             agent,
-            openPanel(panelId) {
+            openPanel(panelId, options) {
               const panel = plugin.workspacePanels.find((candidate) => candidate.id === panelId);
               if (!panel) throw new Error(`Workspace panel is unavailable: ${panelId}`);
+              const location = resolvePluginPanelOpenLocation(panel, options?.location);
               if (panel.context === "workspace") {
-                source.navigation.openWorkspacePanel(plugin.id, panelId);
+                source.navigation.openWorkspacePanel(plugin.id, panelId, location);
                 return;
               }
-              source.navigation.openAgentPanel(plugin.id, panelId, agent.id);
+              source.navigation.openAgentPanel(plugin.id, panelId, agent.id, location);
             },
           });
         } catch (error) {
diff --git a/packages/app/src/plugins/command-center/registration.tsx b/packages/app/src/plugins/command-center/registration.tsx
index 8326266ba5..462d3df148 100644
--- a/packages/app/src/plugins/command-center/registration.tsx
+++ b/packages/app/src/plugins/command-center/registration.tsx
@@ -10,6 +10,7 @@ import {
 import { useSessionStore } from "@/stores/session-store";
 import { useWorkspaceExists } from "@/stores/session-store-hooks";
 import { useWorkspaceLayoutStore } from "@/stores/workspace-layout-store";
+import type { PluginPanelLocation } from "@getpaseo/plugin";
 import { normalizeWorkspaceOpaqueId } from "@/utils/workspace-identity";
 import { createPluginClientStateSource } from "../client-state/source";
 import { buildPluginSurfaceRoute, hostIdFromPathname } from "../routes";
@@ -69,20 +70,24 @@ export function PluginCommandCenterActions() {
             buildPluginSurfaceRoute(serverId, pluginId, { kind: "surface", id: surfaceId }),
           );
         },
-        openWorkspacePanel(pluginId, panelId) {
+        openWorkspacePanel(pluginId, panelId, location) {
           if (!workspaceId) throw new Error("No active workspace");
+          const placement = resolvePluginPanelPlacement(workspaceKey, location);
           navigateToWorkspace({
             serverId,
             workspaceId,
             target: { kind: "plugin", pluginId, panelId, context: "workspace" },
+            placement,
           });
         },
-        openAgentPanel(pluginId, panelId, agentId) {
+        openAgentPanel(pluginId, panelId, agentId, location) {
           if (!workspaceId) throw new Error("No active workspace");
+          const placement = resolvePluginPanelPlacement(workspaceKey, location);
           navigateToWorkspace({
             serverId,
             workspaceId,
             target: { kind: "plugin", pluginId, panelId, context: "agent", agentId },
+            placement,
           });
         },
       },
@@ -100,6 +105,7 @@ export function PluginCommandCenterActions() {
     toast,
     workspaceExists,
     workspaceId,
+    workspaceKey,
   ]);
 
   useCommandCenterActions({
@@ -109,3 +115,11 @@ export function PluginCommandCenterActions() {
   });
   return null;
 }
+
+function resolvePluginPanelPlacement(workspaceKey: string | null, location: PluginPanelLocation) {
+  if (location !== "explorer") return undefined;
+  if (!workspaceKey) throw new Error("No active workspace");
+  const paneId = useWorkspaceLayoutStore.getState().showExplorerSidebar(workspaceKey);
+  if (!paneId) throw new Error("Explorer is unavailable");
+  return { mode: "pane" as const, paneId };
+}
diff --git a/packages/app/src/plugins/evaluate.test.ts b/packages/app/src/plugins/evaluate.test.ts
index 3cf59481bd..03794c7c4e 100644
--- a/packages/app/src/plugins/evaluate.test.ts
+++ b/packages/app/src/plugins/evaluate.test.ts
@@ -77,13 +77,22 @@ describe("evaluatePluginClientBundle", () => {
     );
 
     expect(
-      plugin.workspacePanels.map(({ id, title, icon, context }) => ({
+      plugin.workspacePanels.map(({ id, title, icon, context, locations }) => ({
         id,
         title,
         icon,
         context,
+        locations,
       })),
-    ).toEqual([{ id: "review", title: "Review", icon: "Scan", context: "agent" }]);
+    ).toEqual([
+      {
+        id: "review",
+        title: "Review",
+        icon: "Scan",
+        context: "agent",
+        locations: ["workspace"],
+      },
+    ]);
     expect(
       plugin.commandCenterItems.map(({ id, title, icon, context }) => ({
         id,
@@ -94,6 +103,47 @@ describe("evaluatePluginClientBundle", () => {
     ).toEqual([{ id: "open-review", title: "Open review", icon: "Scan", context: "agent" }]);
   });
 
+  it("normalizes and validates workspace panel locations", () => {
+    const plugin = evaluatePluginClientBundle(
+      "review",
+      bundle(`
+        function ReviewPanel() { return null; }
+        plugin.addWorkspacePanel({
+          id: "review",
+          title: "Review",
+          icon: "Scan",
+          context: "agent",
+          locations: ["workspace", "explorer"],
+          Component: ReviewPanel,
+        });
+      `),
+    );
+    expect(plugin.workspacePanels[0]?.locations).toEqual(["workspace", "explorer"]);
+
+    for (const [locations, message] of [
+      ["[]", "must support at least one location"],
+      ['["sidebar"]', "has invalid location: sidebar"],
+      ['["explorer", "explorer"]', "has duplicate locations"],
+    ] as const) {
+      expect(() =>
+        evaluatePluginClientBundle(
+          "review",
+          bundle(`
+            function ReviewPanel() { return null; }
+            plugin.addWorkspacePanel({
+              id: "review",
+              title: "Review",
+              icon: "Scan",
+              context: "agent",
+              locations: ${locations},
+              Component: ReviewPanel,
+            });
+          `),
+        ),
+      ).toThrow(message);
+    }
+  });
+
   it("rejects duplicate workspace panel and Command Center ids", () => {
     expect(() =>
       evaluatePluginClientBundle(
diff --git a/packages/app/src/plugins/evaluate.ts b/packages/app/src/plugins/evaluate.ts
index 2561e275c5..ab568bdfe5 100644
--- a/packages/app/src/plugins/evaluate.ts
+++ b/packages/app/src/plugins/evaluate.ts
@@ -26,6 +26,27 @@ import { resolvePluginIcon } from "./icons";
 import { parsePluginThemeContribution } from "./themes";
 
 const CONTRIBUTION_ID = /^[a-z][a-z0-9-]*$/;
+const PANEL_LOCATIONS = ["workspace", "explorer"] as const;
+
+function normalizePanelLocations(
+  panelId: string,
+  locations: PluginWorkspacePanelContribution["locations"],
+): readonly (typeof PANEL_LOCATIONS)[number][] {
+  if (locations === undefined) return ["workspace"];
+  if (!Array.isArray(locations) || locations.length === 0) {
+    throw new Error(`Workspace panel ${panelId} must support at least one location`);
+  }
+  const normalized = locations.map((location) => {
+    if (!PANEL_LOCATIONS.includes(location as never)) {
+      throw new Error(`Workspace panel ${panelId} has invalid location: ${String(location)}`);
+    }
+    return location;
+  });
+  if (new Set(normalized).size !== normalized.length) {
+    throw new Error(`Workspace panel ${panelId} has duplicate locations`);
+  }
+  return normalized;
+}
 
 function requireId(value: string, label: string): string {
   const id = value.trim();
@@ -88,8 +109,15 @@ export function evaluatePluginClientBundle(id: string, bundle: string): Evaluate
         throw new Error(`Workspace panel ${normalizedId} is not a component`);
       }
       resolvePluginIcon(icon);
+      const locations = normalizePanelLocations(normalizedId, contribution.locations);
       workspacePanelIds.add(normalizedId);
-      collector.workspacePanels.push({ ...contribution, id: normalizedId, title, icon });
+      collector.workspacePanels.push({
+        ...contribution,
+        id: normalizedId,
+        title,
+        icon,
+        locations,
+      });
     },
     addCommandCenterItem(contribution: PluginCommandCenterItemContribution) {
       const normalizedId = requireId(contribution.id, "Command Center item id");
@@ -213,7 +241,7 @@ export function evaluatePluginClientBundle(id: string, bundle: string): Evaluate
     cleanup,
     surfaces: collector.surfaces,
     sidebarItems: collector.sidebarItems,
-    workspacePanels: collector.workspacePanels,
+    workspacePanels: collector.workspacePanels as EvaluatedPlugin["workspacePanels"],
     commandCenterItems: collector.commandCenterItems,
     attachmentSources: collector.attachmentSources,
     themes: collector.themes,
diff --git a/packages/app/src/plugins/types.ts b/packages/app/src/plugins/types.ts
index a2ee9dbf98..9461250a3b 100644
--- a/packages/app/src/plugins/types.ts
+++ b/packages/app/src/plugins/types.ts
@@ -5,15 +5,20 @@ import type {
   PluginSidebarContribution,
   PluginSurfaceContribution,
   PluginThemeContribution,
+  PluginPanelLocation,
   PluginWorkspacePanelContribution,
 } from "@getpaseo/plugin";
 
+export type EvaluatedPluginWorkspacePanelContribution = PluginWorkspacePanelContribution & {
+  locations: readonly PluginPanelLocation[];
+};
+
 export interface EvaluatedPlugin {
   id: string;
   cleanup: () => void;
   surfaces: PluginSurfaceContribution[];
   sidebarItems: PluginSidebarContribution[];
-  workspacePanels: PluginWorkspacePanelContribution[];
+  workspacePanels: EvaluatedPluginWorkspacePanelContribution[];
   commandCenterItems: PluginCommandCenterItemContribution[];
   attachmentSources: PluginAttachmentSourceContribution[];
   themes: PluginThemeContribution[];
diff --git a/packages/app/src/plugins/workspace-panels/locations.test.ts b/packages/app/src/plugins/workspace-panels/locations.test.ts
new file mode 100644
index 0000000000..1efbc134c6
--- /dev/null
+++ b/packages/app/src/plugins/workspace-panels/locations.test.ts
@@ -0,0 +1,50 @@
+import { describe, expect, it } from "vitest";
+import { pluginRegistry } from "../registry";
+import { panelTargetSupportsHost, resolvePluginPanelOpenLocation } from "./locations";
+
+function install(locations: readonly ("workspace" | "explorer")[]) {
+  const bundle = `(function() {
+    return { default: function(plugin) {
+      plugin.addWorkspacePanel({
+        id: "details",
+        title: "Details",
+        icon: "Scan",
+        context: "agent",
+        locations: ${JSON.stringify(locations)},
+        Component: function Details() { return null; },
+      });
+      return function() {};
+    }};
+  })`;
+  pluginRegistry.installCatalog("host-1", [{ id: "review", clientBundle: bundle }]);
+  return pluginRegistry.getSnapshot()[0]!;
+}
+
+describe("plugin workspace panel locations", () => {
+  it("applies the same host contract to agent panel instances", () => {
+    install(["workspace", "explorer"]);
+    const target = {
+      kind: "plugin" as const,
+      pluginId: "review",
+      panelId: "details",
+      context: "agent" as const,
+      agentId: "agent-1",
+    };
+    expect(panelTargetSupportsHost("host-1", target, "main")).toBe(true);
+    expect(panelTargetSupportsHost("host-1", target, "explorer")).toBe(true);
+    pluginRegistry.removeHost("host-1");
+  });
+
+  it("defaults opens to workspace and validates explicit Explorer opens", () => {
+    const panel = install(["workspace", "explorer"]).workspacePanels[0]!;
+    expect(resolvePluginPanelOpenLocation(panel)).toBe("workspace");
+    expect(resolvePluginPanelOpenLocation(panel, "explorer")).toBe("explorer");
+    pluginRegistry.removeHost("host-1");
+
+    const workspaceOnly = install(["workspace"]).workspacePanels[0]!;
+    expect(() => resolvePluginPanelOpenLocation(workspaceOnly, "explorer")).toThrow(
+      "does not support explorer location",
+    );
+    pluginRegistry.removeHost("host-1");
+  });
+});
diff --git a/packages/app/src/plugins/workspace-panels/locations.ts b/packages/app/src/plugins/workspace-panels/locations.ts
new file mode 100644
index 0000000000..7248ccbe61
--- /dev/null
+++ b/packages/app/src/plugins/workspace-panels/locations.ts
@@ -0,0 +1,72 @@
+import type { PluginPanelLocation, PluginWorkspacePanelContribution } from "@getpaseo/plugin";
+import type { PaneHost } from "@/panels/panel-manifest";
+import { panelSupportsHost } from "@/panels/panel-manifest";
+import type { PluginWorkspaceTabTarget, WorkspaceTabTarget } from "@/workspace-tabs/model";
+import { pluginRegistry } from "../registry";
+import { resolvePluginWorkspacePanel } from "./resolution";
+
+const DEFAULT_LOCATIONS: readonly PluginPanelLocation[] = ["workspace"];
+
+export function getPluginPanelLocations(
+  panel: PluginWorkspacePanelContribution,
+): readonly PluginPanelLocation[] {
+  return panel.locations ?? DEFAULT_LOCATIONS;
+}
+
+export function pluginPanelSupportsLocation(
+  panel: PluginWorkspacePanelContribution,
+  location: PluginPanelLocation,
+): boolean {
+  return getPluginPanelLocations(panel).includes(location);
+}
+
+export function resolvePluginPanelOpenLocation(
+  panel: PluginWorkspacePanelContribution,
+  requested?: PluginPanelLocation,
+): PluginPanelLocation {
+  const locations = getPluginPanelLocations(panel);
+  const location = requested ?? (locations.includes("workspace") ? "workspace" : locations[0]);
+  if (!location || !locations.includes(location)) {
+    throw new Error(`Workspace panel ${panel.id} does not support ${requested ?? "any"} location`);
+  }
+  return location;
+}
+
+function findPluginPanel(serverId: string, target: PluginWorkspaceTabTarget) {
+  const plugin =
+    pluginRegistry
+      .getSnapshot()
+      .find((candidate) => candidate.serverId === serverId && candidate.id === target.pluginId) ??
+    null;
+  return resolvePluginWorkspacePanel(plugin, target);
+}
+
+/** The single target-aware boundary for placement, drag, drop, and restoration. */
+export function panelTargetSupportsHost(
+  serverId: string,
+  target: WorkspaceTabTarget,
+  host: PaneHost,
+): boolean {
+  if (target.kind !== "plugin") return panelSupportsHost(target.kind, host);
+  const panel = findPluginPanel(serverId, target);
+  // Preserve a persisted unavailable panel where the user left it until its plugin loads again.
+  if (!panel) return true;
+  const location: PluginPanelLocation = host === "explorer" ? "explorer" : "workspace";
+  return pluginPanelSupportsLocation(panel, location);
+}
+
+export function panelTargetSupportsHostForWorkspaceKey(
+  workspaceKey: string,
+  target: WorkspaceTabTarget,
+  host: PaneHost,
+): boolean {
+  if (target.kind !== "plugin") return panelSupportsHost(target.kind, host);
+  const serverId =
+    pluginRegistry
+      .getSnapshot()
+      .filter((plugin) => plugin.id === target.pluginId)
+      .map((plugin) => plugin.serverId)
+      .sort((left, right) => right.length - left.length)
+      .find((candidate) => workspaceKey.startsWith(`${candidate}:`)) ?? "";
+  return panelTargetSupportsHost(serverId, target, host);
+}
diff --git a/packages/app/src/plugins/workspace-panels/panel.tsx b/packages/app/src/plugins/workspace-panels/panel.tsx
index f1bbe2941b..c9d47a7337 100644
--- a/packages/app/src/plugins/workspace-panels/panel.tsx
+++ b/packages/app/src/plugins/workspace-panels/panel.tsx
@@ -12,7 +12,7 @@ import { StyleSheet, withUnistyles } from "react-native-unistyles";
 import invariant from "tiny-invariant";
 import { useIsCompactFormFactor } from "@/constants/layout";
 import { usePaneContext } from "@/panels/pane-context";
-import type { PanelDescriptor, PanelRegistration } from "@/panels/panel-registry";
+import { definePanel, type PanelDescriptor } from "@/panels/panel-registry";
 import { useHostRuntimeClient, useHosts } from "@/runtime/host-runtime";
 import { useSessionStore } from "@/stores/session-store";
 import { useWorkspaceExists } from "@/stores/session-store-hooks";
@@ -159,12 +159,10 @@ function usePluginPanelDescriptor(
   };
 }
 
-export const pluginPanelRegistration: PanelRegistration<"plugin"> = {
-  kind: "plugin",
-  resourceKey: (target) => `${target.pluginId}:${target.panelId}:${target.context}`,
+export const pluginPanelRegistration = definePanel("plugin", {
   component: PluginPanel,
   useDescriptor: usePluginPanelDescriptor,
-};
+});
 
 const styles = StyleSheet.create((theme) => ({
   unavailable: {
diff --git a/packages/app/src/plugins/workspace-panels/resolution.test.ts b/packages/app/src/plugins/workspace-panels/resolution.test.ts
index 3b48f4203c..d88d161240 100644
--- a/packages/app/src/plugins/workspace-panels/resolution.test.ts
+++ b/packages/app/src/plugins/workspace-panels/resolution.test.ts
@@ -18,6 +18,7 @@ function installed(): InstalledPlugin {
         title: "Details",
         icon: "Scan",
         context: "workspace",
+        locations: ["workspace"],
         Component: () => null,
       },
     ],
diff --git a/packages/app/src/screens/settings-screen.tsx b/packages/app/src/screens/settings-screen.tsx
index 9bd91798f7..9dfd9e7746 100644
--- a/packages/app/src/screens/settings-screen.tsx
+++ b/packages/app/src/screens/settings-screen.tsx
@@ -38,6 +38,7 @@ import {
   Smartphone,
   Sparkles,
   Blocks,
+  PanelsTopLeft,
 } from "lucide-react-native";
 import { DropdownTrigger } from "@/components/ui/dropdown-trigger";
 import { ComboboxTrigger } from "@/components/ui/combobox-trigger";
@@ -49,6 +50,7 @@ import { ScreenTitle } from "@/components/headers/screen-title";
 import { HeaderIconBadge } from "@/components/headers/header-icon-badge";
 import { SettingsSection } from "@/screens/settings/settings-section";
 import { AppearanceSection } from "@/screens/settings/appearance/appearance-section";
+import { LayoutSection } from "@/screens/settings/layout/layout-section";
 import {
   useAppSettings,
   useSettings,
@@ -77,7 +79,6 @@ import { KeyboardShortcutsSection } from "@/screens/settings/keyboard-shortcuts-
 import { EditorSection } from "@/screens/settings/editor-section";
 import { Button } from "@/components/ui/button";
 import { Switch } from "@/components/ui/switch";
-import { supportsDesktopPaneSplits } from "@/constants/layout";
 import { CommunityLinks } from "@/components/community-links";
 import { SegmentedControl } from "@/components/ui/segmented-control";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem } from "@/components/ui/dropdown-menu";
@@ -145,6 +146,12 @@ interface SidebarSectionItem {
 const SIDEBAR_SECTION_ITEMS: SidebarSectionItem[] = [
   { id: "general", labelKey: "settings.sections.general", icon: Settings },
   { id: "appearance", labelKey: "settings.sections.appearance", icon: Palette },
+  {
+    id: "layout",
+    labelKey: "settings.sections.layout",
+    icon: PanelsTopLeft,
+    desktopOnly: true,
+  },
   { id: "editor", labelKey: "settings.sections.editor", icon: Code2, webOnly: true },
   { id: "shortcuts", labelKey: "settings.sections.shortcuts", icon: Keyboard, desktopOnly: true },
   {
@@ -274,7 +281,6 @@ interface GeneralSectionProps {
   handleServiceUrlBehaviorChange: (behavior: ServiceUrlBehavior) => void;
   handleLanguageChange: (language: AppLanguage) => void;
   handleTerminalScrollbackLinesChange: (lines: number) => void;
-  handleSidePanelRoutingChange: (enabled: boolean) => void;
 }
 
 interface ServiceUrlBehaviorMenuItemProps {
@@ -349,7 +355,6 @@ function GeneralSection({
   handleServiceUrlBehaviorChange,
   handleLanguageChange,
   handleTerminalScrollbackLinesChange,
-  handleSidePanelRoutingChange,
 }: GeneralSectionProps) {
   const { t, i18n } = useTranslation();
   const activeLocale = getActiveLocale(i18n.language);
@@ -497,23 +502,6 @@ function GeneralSection({
             accessibilityLabel={t("settings.general.terminalScrollback.accessibilityLabel")}
           />
         </View>
-        {supportsDesktopPaneSplits() ? (
-          <View style={[settingsStyles.row, settingsStyles.rowBorder]}>
-            <View style={settingsStyles.rowContent}>
-              <Text style={settingsStyles.rowTitle}>
-                {t("settings.general.sidePanelRouting.label")}
-              </Text>
-              <Text style={settingsStyles.rowHint}>
-                {t("settings.general.sidePanelRouting.description")}
-              </Text>
-            </View>
-            <Switch
-              value={settings.openSupportingTabsInSidePanel}
-              onValueChange={handleSidePanelRoutingChange}
-              accessibilityLabel={t("settings.general.sidePanelRouting.label")}
-            />
-          </View>
-        ) : null}
       </View>
     </SettingsSection>
   );
@@ -1266,13 +1254,6 @@ export default function SettingsScreen({ view, openAddHostIntent = null }: Setti
     [updateSettings],
   );
 
-  const handleSidePanelRoutingChange = useCallback(
-    (openSupportingTabsInSidePanel: boolean) => {
-      void updateSettings({ openSupportingTabsInSidePanel });
-    },
-    [updateSettings],
-  );
-
   const handleUseLegacyTerminalRendererChange = useCallback(
     (useLegacyTerminalRenderer: boolean) => {
       void updateSettings({ useLegacyTerminalRenderer });
@@ -1456,72 +1437,76 @@ export default function SettingsScreen({ view, openAddHostIntent = null }: Setti
     return null;
   })();
 
-  const content = (() => {
-    if (view.kind === "host") {
-      return renderHostSettingsContent(view, handleHostRemoved);
-    }
-    if (view.kind === "project") {
-      return (
-        <ProjectSettingsScreen
-          serverId={view.serverId}
-          projectId={view.projectId}
-          onBackToProjects={handleBackFromDetail}
-          showBackToProjects={!isCompactLayout}
-        />
-      );
-    }
-    if (view.kind === "section") {
-      switch (view.section) {
-        case "general":
-          return (
-            <>
-              <GeneralSection
-                settings={settings}
-                isDesktopApp={isDesktopApp}
-                handleSendBehaviorChange={handleSendBehaviorChange}
-                handleServiceUrlBehaviorChange={handleServiceUrlBehaviorChange}
-                handleLanguageChange={handleLanguageChange}
-                handleTerminalScrollbackLinesChange={handleTerminalScrollbackLinesChange}
-                handleSidePanelRoutingChange={handleSidePanelRoutingChange}
-              />
-              {isDesktopApp ? <BrowserDataSection /> : null}
-            </>
-          );
-        case "appearance":
-          return <AppearanceSection />;
-        case "editor":
-          return isWeb ? <EditorSection /> : null;
-        case "shortcuts":
-          return isDesktopApp ? <KeyboardShortcutsSection /> : null;
-        case "integrations":
-          return isDesktopApp ? <IntegrationsSection /> : null;
-        case "notifications":
-          return isDesktopApp ? <DesktopNotificationsSection /> : null;
-        case "permissions":
-          return isDesktopApp ? <DesktopPermissionsSection /> : null;
-        case "diagnostics":
-          return (
-            <DiagnosticsSection
-              useLegacyTerminalRenderer={settings.useLegacyTerminalRenderer}
-              onUseLegacyTerminalRendererChange={handleUseLegacyTerminalRendererChange}
-              voiceAudioEngine={voiceAudioEngine}
-              isPlaybackTestRunning={isPlaybackTestRunning}
-              playbackTestResult={playbackTestResult}
-              handlePlaybackTest={handlePlaybackTest}
-            />
-          );
-        case "about":
-          return (
-            <AboutSection
-              appVersion={appVersion}
-              appVersionText={appVersionText}
-              isDesktopApp={isDesktopApp}
-            />
-          );
+  let content: ReactNode;
+  if (view.kind === "section" && view.section === "layout") {
+    content = isDesktopApp ? <LayoutSection /> : null;
+  } else {
+    content = (() => {
+      if (view.kind === "host") {
+        return renderHostSettingsContent(view, handleHostRemoved);
       }
-    }
-    return null;
-  })();
+      if (view.kind === "project") {
+        return (
+          <ProjectSettingsScreen
+            serverId={view.serverId}
+            projectId={view.projectId}
+            onBackToProjects={handleBackFromDetail}
+            showBackToProjects={!isCompactLayout}
+          />
+        );
+      }
+      if (view.kind === "section") {
+        switch (view.section) {
+          case "general":
+            return (
+              <>
+                <GeneralSection
+                  settings={settings}
+                  isDesktopApp={isDesktopApp}
+                  handleSendBehaviorChange={handleSendBehaviorChange}
+                  handleServiceUrlBehaviorChange={handleServiceUrlBehaviorChange}
+                  handleLanguageChange={handleLanguageChange}
+                  handleTerminalScrollbackLinesChange={handleTerminalScrollbackLinesChange}
+                />
+                {isDesktopApp ? <BrowserDataSection /> : null}
+              </>
+            );
+          case "appearance":
+            return <AppearanceSection />;
+          case "editor":
+            return isWeb ? <EditorSection /> : null;
+          case "shortcuts":
+            return isDesktopApp ? <KeyboardShortcutsSection /> : null;
+          case "integrations":
+            return isDesktopApp ? <IntegrationsSection /> : null;
+          case "notifications":
+            return isDesktopApp ? <DesktopNotificationsSection /> : null;
+          case "permissions":
+            return isDesktopApp ? <DesktopPermissionsSection /> : null;
+          case "diagnostics":
+            return (
+              <DiagnosticsSection
+                useLegacyTerminalRenderer={settings.useLegacyTerminalRenderer}
+                onUseLegacyTerminalRendererChange={handleUseLegacyTerminalRendererChange}
+                voiceAudioEngine={voiceAudioEngine}
+                isPlaybackTestRunning={isPlaybackTestRunning}
+                playbackTestResult={playbackTestResult}
+                handlePlaybackTest={handlePlaybackTest}
+              />
+            );
+          case "about":
+            return (
+              <AboutSection
+                appVersion={appVersion}
+                appVersionText={appVersionText}
+                isDesktopApp={isDesktopApp}
+              />
+            );
+        }
+      }
+      return null;
+    })();
+  }
 
   if (settingsLoading) {
     return (
diff --git a/packages/app/src/screens/settings/layout/layout-section.tsx b/packages/app/src/screens/settings/layout/layout-section.tsx
new file mode 100644
index 0000000000..bcd427cf1a
--- /dev/null
+++ b/packages/app/src/screens/settings/layout/layout-section.tsx
@@ -0,0 +1,126 @@
+import { Fragment, useCallback } from "react";
+import { Text, View, type PressableStateCallbackType } from "react-native";
+import { useTranslation } from "react-i18next";
+import { StyleSheet } from "react-native-unistyles";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem } from "@/components/ui/dropdown-menu";
+import { DropdownTrigger } from "@/components/ui/dropdown-trigger";
+import { useAppSettings, type OpenInSidePanePreferences } from "@/hooks/use-settings";
+import { SettingsSection } from "@/screens/settings/settings-section";
+import { settingsStyles } from "@/styles/settings";
+
+const SOURCES = [
+  "explorerFiles",
+  "explorerChanges",
+  "chatFiles",
+  "diffFiles",
+  "subagents",
+  "pullRequests",
+  "changesLinks",
+] as const satisfies readonly (keyof OpenInSidePanePreferences)[];
+
+type OpenDestination = "main" | "side";
+
+function destinationTriggerStyle({
+  pressed,
+  open,
+}: PressableStateCallbackType & { open?: boolean }) {
+  return [styles.destinationTrigger, (pressed || open) && styles.destinationTriggerActive];
+}
+
+function LayoutPreferenceRow({
+  source,
+  value,
+  first,
+  onDestinationChange,
+}: {
+  source: keyof OpenInSidePanePreferences;
+  value: boolean;
+  first: boolean;
+  onDestinationChange: (
+    source: keyof OpenInSidePanePreferences,
+    destination: OpenDestination,
+  ) => void;
+}) {
+  const { t } = useTranslation();
+  const destination: OpenDestination = value ? "side" : "main";
+  const destinationLabel = t(`settings.layout.openInSidePane.destinations.${destination}`);
+  const selectMain = useCallback(
+    () => onDestinationChange(source, "main"),
+    [onDestinationChange, source],
+  );
+  const selectSide = useCallback(
+    () => onDestinationChange(source, "side"),
+    [onDestinationChange, source],
+  );
+  const label = t(`settings.layout.openInSidePane.sources.${source}.label`);
+  return (
+    <View style={[settingsStyles.row, first ? null : settingsStyles.rowBorder]}>
+      <View style={settingsStyles.rowContent}>
+        <Text style={settingsStyles.rowTitle}>{label}</Text>
+      </View>
+      <DropdownMenu>
+        <DropdownTrigger
+          style={destinationTriggerStyle}
+          accessibilityRole="button"
+          accessibilityLabel={`${label}: ${destinationLabel}`}
+        >
+          <Text style={styles.destinationLabel}>{destinationLabel}</Text>
+        </DropdownTrigger>
+        <DropdownMenuContent side="bottom" align="end" width={180}>
+          <DropdownMenuItem selected={destination === "main"} onSelect={selectMain}>
+            {t("settings.layout.openInSidePane.destinations.main")}
+          </DropdownMenuItem>
+          <DropdownMenuItem selected={destination === "side"} onSelect={selectSide}>
+            {t("settings.layout.openInSidePane.destinations.side")}
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </View>
+  );
+}
+
+export function LayoutSection() {
+  const { t } = useTranslation();
+  const { settings, updateSettings } = useAppSettings();
+  const handleDestinationChange = useCallback(
+    (source: keyof OpenInSidePanePreferences, destination: OpenDestination) => {
+      void updateSettings({
+        openInSidePane: { ...settings.openInSidePane, [source]: destination === "side" },
+      });
+    },
+    [settings.openInSidePane, updateSettings],
+  );
+  return (
+    <SettingsSection title={t("settings.layout.openInSidePane.title")}>
+      <View style={settingsStyles.card}>
+        {SOURCES.map((source, index) => (
+          <Fragment key={source}>
+            <LayoutPreferenceRow
+              source={source}
+              value={settings.openInSidePane[source]}
+              first={index === 0}
+              onDestinationChange={handleDestinationChange}
+            />
+          </Fragment>
+        ))}
+      </View>
+    </SettingsSection>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  destinationTrigger: {
+    paddingVertical: theme.spacing[1],
+    paddingHorizontal: theme.spacing[2],
+    borderRadius: theme.borderRadius.md,
+    borderWidth: theme.borderWidth[1],
+    borderColor: theme.colors.border,
+  },
+  destinationTriggerActive: {
+    backgroundColor: theme.colors.interactionHighlight,
+  },
+  destinationLabel: {
+    color: theme.colors.foreground,
+    fontSize: theme.fontSize.base,
+  },
+}));
diff --git a/packages/app/src/screens/workspace/explorer-sidebar-tab-rail.tsx b/packages/app/src/screens/workspace/explorer-sidebar-tab-rail.tsx
new file mode 100644
index 0000000000..bda9f8af5c
--- /dev/null
+++ b/packages/app/src/screens/workspace/explorer-sidebar-tab-rail.tsx
@@ -0,0 +1,470 @@
+import { useCallback, useMemo, useState, type ComponentType, type ReactNode } from "react";
+import { Text, View } from "react-native";
+import { ArrowLeftToLine, Plus, X } from "lucide-react-native";
+import { StyleSheet, withUnistyles } from "react-native-unistyles";
+import { useTranslation } from "react-i18next";
+import Animated from "react-native-reanimated";
+import { SortableInlineList } from "@/components/sortable-inline-list";
+import type {
+  DraggableListDragHandleProps,
+  DraggableRenderItemInfo,
+} from "@/components/draggable-list.types";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+} from "@/components/ui/context-menu";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { titlebarDragSurfaceStyle } from "@/components/desktop/titlebar-drag-region";
+import { WORKSPACE_SECONDARY_HEADER_HEIGHT } from "@/constants/layout";
+import { iconButtonChromeGlyphSize } from "@/components/ui/icon-button-chrome";
+import { HEADER_CONTROL_HEIGHT } from "@/components/ui/control-geometry";
+import {
+  WorkspaceTabIcon,
+  WorkspaceTabPresentationResolver,
+  type WorkspaceTabPresentation,
+} from "@/screens/workspace/workspace-tab-presentation";
+import type { WorkspaceDesktopTabRowItem } from "@/screens/workspace/workspace-desktop-tabs-row";
+import type { WorkspaceTabDescriptor } from "@/screens/workspace/workspace-tabs-types";
+import {
+  useWorkspaceTabLaunchCatalog,
+  type WorkspaceTabLaunchItem,
+} from "@/workspace-tabs/launcher";
+import { panelSupportsHost } from "@/panels/panel-manifest";
+import type { PanelIconProps } from "@/panels/panel-registry";
+import { panelTargetSupportsHost } from "@/plugins/workspace-panels/locations";
+import type { Theme } from "@/styles/theme";
+import type { SurfaceBackdrop } from "@/styles/surface-backdrop";
+import {
+  HorizontalScrollBoundaryShades,
+  useHorizontalScrollBoundary,
+} from "@/components/ui/horizontal-scroll-boundary";
+
+const TAB_GAP = 4;
+const TAB_DROP_INDICATOR_WIDTH = 4;
+
+const mutedColorMapping = (theme: Theme) => ({ color: theme.colors.foregroundMuted });
+
+interface ExplorerSidebarTabRailProps {
+  paneId: string;
+  tabs: WorkspaceDesktopTabRowItem[];
+  normalizedServerId: string;
+  normalizedWorkspaceId: string;
+  activeDragTabId: string | null;
+  tabDropPreviewIndex: number | null;
+  onNavigateTab: (tabId: string) => void;
+  onCloseTab: (tabId: string) => Promise<void> | void;
+  onCreateNewTab: () => void;
+  onMoveTabToMain: (tabId: string) => void;
+  onReorderTabs: (tabs: WorkspaceTabDescriptor[]) => void;
+  trailingAccessory?: ReactNode;
+}
+
+function tabKey(item: WorkspaceDesktopTabRowItem): string {
+  return `${item.tab.key}:${item.tab.kind}`;
+}
+
+function resolveExplorerSidebarTabBackdrop(): SurfaceBackdrop {
+  return "surfaceSidebar";
+}
+
+function ExplorerSidebarTab({
+  item,
+  isDragging,
+  dragHandleProps,
+  onNavigateTab,
+  onCloseTab,
+  onMoveTabToMain,
+  normalizedServerId,
+  normalizedWorkspaceId,
+}: {
+  item: WorkspaceDesktopTabRowItem;
+  isDragging: boolean;
+  dragHandleProps?: DraggableListDragHandleProps;
+  onNavigateTab: (tabId: string) => void;
+  onCloseTab: (tabId: string) => Promise<void> | void;
+  onMoveTabToMain: (tabId: string) => void;
+  normalizedServerId: string;
+  normalizedWorkspaceId: string;
+}) {
+  const { t } = useTranslation();
+  const [hovered, setHovered] = useState(false);
+  const handlePress = useCallback(
+    () => onNavigateTab(item.tab.tabId),
+    [item.tab.tabId, onNavigateTab],
+  );
+  const handleHoverIn = useCallback(() => setHovered(true), []);
+  const handleHoverOut = useCallback(() => setHovered(false), []);
+  const handleClose = useCallback(() => {
+    void onCloseTab(item.tab.tabId);
+  }, [item.tab.tabId, onCloseTab]);
+  const handleMoveToMain = useCallback(
+    () => onMoveTabToMain(item.tab.tabId),
+    [item.tab.tabId, onMoveTabToMain],
+  );
+  const canMoveToMain = panelTargetSupportsHost(normalizedServerId, item.tab.target, "main");
+  const moveToMainLeading = useMemo(
+    () => <ThemedArrowLeftToLine size={14} uniProps={mutedColorMapping} />,
+    [],
+  );
+  const closeLeading = useMemo(() => <ThemedX size={14} uniProps={mutedColorMapping} />, []);
+  const accessibilityState = useMemo(() => ({ selected: item.isActive }), [item.isActive]);
+  const renderPresentation = useCallback(
+    (presentation: WorkspaceTabPresentation) => (
+      <ContextMenu>
+        <Tooltip delayDuration={300} enabledOnDesktop enabledOnMobile={false}>
+          <TooltipTrigger asChild triggerRefProp="triggerRef">
+            <ContextMenuTrigger
+              {...(dragHandleProps?.attributes as object | undefined)}
+              {...(dragHandleProps?.listeners as object | undefined)}
+              triggerRef={dragHandleProps?.setActivatorNodeRef as never}
+              testID={`explorer-sidebar-tab-${item.tab.tabId}`}
+              accessibilityRole="button"
+              accessibilityLabel={presentation.tooltip}
+              accessibilityState={accessibilityState}
+              onPress={handlePress}
+              onHoverIn={handleHoverIn}
+              onHoverOut={handleHoverOut}
+              style={[
+                styles.tab,
+                hovered ? styles.tabHovered : null,
+                item.isActive ? styles.tabActive : null,
+                isDragging ? styles.tabDragging : null,
+              ]}
+            >
+              <WorkspaceTabIcon
+                presentation={presentation}
+                active={item.isActive}
+                size={iconButtonChromeGlyphSize("small")}
+                strokeWidth={1.5}
+                backdrop={resolveExplorerSidebarTabBackdrop()}
+              />
+              <Text
+                selectable={false}
+                numberOfLines={1}
+                ellipsizeMode="tail"
+                style={[styles.tabLabel, item.isActive ? styles.tabLabelActive : null]}
+              >
+                {presentation.label}
+              </Text>
+            </ContextMenuTrigger>
+          </TooltipTrigger>
+          <TooltipContent side="bottom" align="center" offset={8}>
+            <Text style={styles.tooltipText}>{presentation.tooltip}</Text>
+          </TooltipContent>
+        </Tooltip>
+        <ContextMenuContent align="start" minWidth={180}>
+          {canMoveToMain ? (
+            <ContextMenuItem leading={moveToMainLeading} onSelect={handleMoveToMain}>
+              {t("workspace.tabs.menu.moveToMain")}
+            </ContextMenuItem>
+          ) : null}
+          {canMoveToMain ? <ContextMenuSeparator /> : null}
+          <ContextMenuItem leading={closeLeading} onSelect={handleClose}>
+            {t("workspace.tabs.menu.close")}
+          </ContextMenuItem>
+        </ContextMenuContent>
+      </ContextMenu>
+    ),
+    [
+      accessibilityState,
+      dragHandleProps,
+      handleHoverIn,
+      handleHoverOut,
+      handleClose,
+      handleMoveToMain,
+      handlePress,
+      hovered,
+      isDragging,
+      item,
+      canMoveToMain,
+      closeLeading,
+      moveToMainLeading,
+      t,
+    ],
+  );
+
+  return (
+    <WorkspaceTabPresentationResolver
+      tab={item.tab}
+      serverId={normalizedServerId}
+      workspaceId={normalizedWorkspaceId}
+    >
+      {renderPresentation}
+    </WorkspaceTabPresentationResolver>
+  );
+}
+
+function CatalogIcon({
+  Icon,
+  color = "",
+}: {
+  Icon: ComponentType<PanelIconProps>;
+  color?: string;
+}) {
+  return <Icon size={14} color={color} />;
+}
+
+const ThemedCatalogIcon = withUnistyles(CatalogIcon);
+const ThemedArrowLeftToLine = withUnistyles(ArrowLeftToLine);
+const ThemedPlus = withUnistyles(Plus);
+const ThemedX = withUnistyles(X);
+
+function ExplorerSidebarConfigurationItem({
+  item,
+  paneId,
+  tab,
+  onCloseTab,
+}: {
+  item: WorkspaceTabLaunchItem;
+  paneId: string;
+  tab: WorkspaceTabDescriptor | null;
+  onCloseTab: (tabId: string) => Promise<void> | void;
+}) {
+  const leading = useMemo(() => {
+    return item.Icon ? <ThemedCatalogIcon Icon={item.Icon} uniProps={mutedColorMapping} /> : null;
+  }, [item.Icon]);
+  const handleSelect = useCallback(() => {
+    if (tab) {
+      void onCloseTab(tab.tabId);
+      return;
+    }
+    item.launch({ kind: "open", paneId });
+  }, [item, onCloseTab, paneId, tab]);
+
+  return (
+    <ContextMenuItem
+      leading={leading}
+      selected={Boolean(tab)}
+      showSelectedCheck
+      disabled={!tab && item.disabled}
+      onSelect={handleSelect}
+    >
+      {item.label}
+    </ContextMenuItem>
+  );
+}
+
+function catalogItemMatchesTab(item: WorkspaceTabLaunchItem, tab: WorkspaceTabDescriptor): boolean {
+  return item.panelKind === tab.target.kind;
+}
+
+export function ExplorerSidebarTabRail({
+  paneId,
+  tabs,
+  normalizedServerId,
+  normalizedWorkspaceId,
+  activeDragTabId,
+  tabDropPreviewIndex,
+  onNavigateTab,
+  onCloseTab,
+  onCreateNewTab,
+  onMoveTabToMain,
+  onReorderTabs,
+  trailingAccessory,
+}: ExplorerSidebarTabRailProps) {
+  const scrollBoundary = useHorizontalScrollBoundary();
+  const { t } = useTranslation();
+  const groups = useWorkspaceTabLaunchCatalog({
+    serverId: normalizedServerId,
+    purpose: "supporting",
+    host: "explorer",
+  });
+  const singletonConfigurationItems = useMemo(
+    () =>
+      (groups.find((group) => group.id === "tabs")?.items ?? []).filter(
+        (item) => !panelSupportsHost(item.panelKind, "main"),
+      ),
+    [groups],
+  );
+  const newTabLeading = useMemo(() => <ThemedPlus size={14} uniProps={mutedColorMapping} />, []);
+  const handleDragEnd = useCallback(
+    (nextTabs: WorkspaceDesktopTabRowItem[]) => onReorderTabs(nextTabs.map((item) => item.tab)),
+    [onReorderTabs],
+  );
+  const getTabDragData = useCallback(
+    (item: WorkspaceDesktopTabRowItem) => ({
+      kind: "workspace-tab" as const,
+      paneId,
+      tabId: item.tab.tabId,
+    }),
+    [paneId],
+  );
+  const renderTab = useCallback(
+    ({
+      item,
+      index,
+      dragHandleProps,
+      isActive,
+    }: DraggableRenderItemInfo<WorkspaceDesktopTabRowItem>) => {
+      const showBefore = activeDragTabId !== null && tabDropPreviewIndex === index;
+      const showAfter =
+        activeDragTabId !== null &&
+        tabDropPreviewIndex === tabs.length &&
+        index === tabs.length - 1;
+      return (
+        <View style={styles.tabSlot}>
+          {showBefore ? <View style={[styles.dropIndicator, styles.dropIndicatorBefore]} /> : null}
+          <ExplorerSidebarTab
+            item={item}
+            isDragging={isActive}
+            dragHandleProps={dragHandleProps}
+            onNavigateTab={onNavigateTab}
+            onCloseTab={onCloseTab}
+            onMoveTabToMain={onMoveTabToMain}
+            normalizedServerId={normalizedServerId}
+            normalizedWorkspaceId={normalizedWorkspaceId}
+          />
+          {showAfter ? <View style={[styles.dropIndicator, styles.dropIndicatorAfter]} /> : null}
+        </View>
+      );
+    },
+    [
+      activeDragTabId,
+      normalizedServerId,
+      normalizedWorkspaceId,
+      onNavigateTab,
+      onCloseTab,
+      onMoveTabToMain,
+      tabDropPreviewIndex,
+      tabs.length,
+    ],
+  );
+
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger
+        contextOnly
+        style={[styles.track, titlebarDragSurfaceStyle as never]}
+        testID="explorer-sidebar-tab-rail"
+      >
+        <View style={styles.scrollContainer}>
+          <Animated.ScrollView
+            horizontal
+            showsHorizontalScrollIndicator={false}
+            contentContainerStyle={styles.scrollContent}
+            onLayout={scrollBoundary.onLayout}
+            onContentSizeChange={scrollBoundary.onContentSizeChange}
+            onScroll={scrollBoundary.onScroll}
+            scrollEventThrottle={16}
+          >
+            <SortableInlineList
+              data={tabs}
+              keyExtractor={tabKey}
+              renderItem={renderTab}
+              onDragEnd={handleDragEnd}
+              useDragHandle
+              externalDndContext
+              activeId={activeDragTabId}
+              getItemData={getTabDragData}
+            />
+          </Animated.ScrollView>
+          <HorizontalScrollBoundaryShades
+            visible
+            backdrop="sidebar"
+            testIDPrefix="explorer-sidebar-tabs-scroll-shade"
+            leftStyle={scrollBoundary.leftShadeStyle}
+            rightStyle={scrollBoundary.rightShadeStyle}
+          />
+        </View>
+        {trailingAccessory ? (
+          <View style={styles.trailingAccessory}>{trailingAccessory}</View>
+        ) : null}
+      </ContextMenuTrigger>
+      <ContextMenuContent align="start" minWidth={200} testID="explorer-sidebar-tab-configuration">
+        <ContextMenuItem leading={newTabLeading} onSelect={onCreateNewTab}>
+          {t("workspace.tabs.actions.newTab")}
+        </ContextMenuItem>
+        <ContextMenuSeparator />
+        {singletonConfigurationItems.map((item) => (
+          <ExplorerSidebarConfigurationItem
+            key={item.id}
+            item={item}
+            paneId={paneId}
+            tab={tabs.find(({ tab }) => catalogItemMatchesTab(item, tab))?.tab ?? null}
+            onCloseTab={onCloseTab}
+          />
+        ))}
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  track: {
+    minWidth: 0,
+    height: WORKSPACE_SECONDARY_HEADER_HEIGHT,
+    backgroundColor: theme.colors.surfaceSidebar,
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  scrollContainer: {
+    flex: 1,
+    minWidth: 0,
+    alignSelf: "stretch",
+  },
+  scrollContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 4,
+  },
+  trailingAccessory: {
+    marginRight: 4,
+  },
+  tabSlot: {
+    position: "relative",
+    marginHorizontal: TAB_GAP / 2,
+  },
+  tab: {
+    height: HEADER_CONTROL_HEIGHT,
+    maxWidth: 180,
+    paddingHorizontal: theme.spacing[2],
+    borderRadius: theme.borderRadius.md,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[1],
+    userSelect: "none",
+  },
+  tabHovered: {
+    backgroundColor: theme.colors.interactionHighlight,
+  },
+  tabActive: {
+    backgroundColor: theme.colors.interactionHighlight,
+  },
+  tabLabel: {
+    minWidth: 0,
+    flexShrink: 1,
+    color: theme.colors.foregroundMuted,
+    fontSize: theme.fontSize.base,
+    fontWeight: theme.fontWeight.normal,
+    userSelect: "none",
+  },
+  tabLabelActive: {
+    color: theme.colors.foreground,
+  },
+  tabDragging: {
+    opacity: 0.3,
+  },
+  dropIndicator: {
+    position: "absolute",
+    top: theme.spacing[0.5],
+    bottom: theme.spacing[0.5],
+    width: TAB_DROP_INDICATOR_WIDTH,
+    borderRadius: theme.borderRadius.full,
+    backgroundColor: theme.colors.accent,
+    zIndex: 10,
+    pointerEvents: "none",
+  },
+  dropIndicatorBefore: {
+    left: -TAB_GAP / 2 - TAB_DROP_INDICATOR_WIDTH / 2,
+  },
+  dropIndicatorAfter: {
+    right: -TAB_GAP / 2 - TAB_DROP_INDICATOR_WIDTH / 2,
+  },
+  tooltipText: {
+    color: theme.colors.popoverForeground,
+    fontSize: theme.fontSize.base,
+  },
+}));
diff --git a/packages/app/src/screens/workspace/explorer-sidebar.tsx b/packages/app/src/screens/workspace/explorer-sidebar.tsx
new file mode 100644
index 0000000000..389d37c821
--- /dev/null
+++ b/packages/app/src/screens/workspace/explorer-sidebar.tsx
@@ -0,0 +1,150 @@
+import { useCallback, useMemo, type ReactNode } from "react";
+import { View } from "react-native";
+import { StyleSheet } from "react-native-unistyles";
+import { RetainedPanel } from "@/components/retained-panel";
+import { TitlebarDragRegion } from "@/components/desktop/titlebar-drag-region";
+import type { TabDropPreview } from "@/components/split-container-tab-drop-preview";
+import { ExplorerSidebarTabRail } from "@/screens/workspace/explorer-sidebar-tab-rail";
+import { WorkspacePanelHost } from "@/screens/workspace/workspace-panel-host";
+import { deriveWorkspacePaneState } from "@/screens/workspace/workspace-pane-state";
+import type { WorkspaceDesktopTabRowItem } from "@/screens/workspace/workspace-desktop-tabs-row";
+import type { WorkspacePaneContentModel } from "@/screens/workspace/workspace-pane-content";
+import type { WorkspaceTabDescriptor } from "@/screens/workspace/workspace-tabs-types";
+import type { SplitPane } from "@/stores/workspace-layout-store";
+import type { WorkspaceTab } from "@/workspace-tabs/model";
+import { WindowChromeRegion, WindowChromeSafeArea } from "@/utils/desktop-window";
+
+interface ExplorerSidebarDockProps {
+  pane: SplitPane;
+  uiTabs: WorkspaceTab[];
+  normalizedServerId: string;
+  normalizedWorkspaceId: string;
+  isWorkspaceFocused: boolean;
+  closingTabIds: Set<string>;
+  activeDragTabId: string | null;
+  tabDropPreview: TabDropPreview | null;
+  onSelectTab: (paneId: string, tabId: string) => void;
+  onCloseTab: (tabId: string) => Promise<void> | void;
+  onCreateNewTab: () => void;
+  onMoveTabToMain: (tabId: string) => void;
+  onReorderTabsInPane: (paneId: string, tabIds: string[]) => void;
+  buildPaneContentModel: (input: {
+    paneId: string;
+    tab: WorkspaceTabDescriptor;
+  }) => WorkspacePaneContentModel;
+  headerAction?: ReactNode;
+}
+
+/** A dock shell over the shared panel host. It owns no workspace-pane capabilities. */
+export function ExplorerSidebarDock({
+  pane,
+  uiTabs,
+  normalizedServerId,
+  normalizedWorkspaceId,
+  isWorkspaceFocused,
+  closingTabIds,
+  activeDragTabId,
+  tabDropPreview,
+  onSelectTab,
+  onCloseTab,
+  onCreateNewTab,
+  onMoveTabToMain,
+  onReorderTabsInPane,
+  buildPaneContentModel,
+  headerAction,
+}: ExplorerSidebarDockProps) {
+  const paneState = useMemo(() => deriveWorkspacePaneState({ pane, tabs: uiTabs }), [pane, uiTabs]);
+  const tabs = useMemo(() => paneState.tabs.map((tab) => tab.descriptor), [paneState.tabs]);
+  const activeTabId = paneState.activeTabId;
+  const tabItems = useMemo<WorkspaceDesktopTabRowItem[]>(
+    () =>
+      tabs.map((tab) => ({
+        tab,
+        isActive: tab.tabId === activeTabId,
+        isCloseHovered: false,
+        isClosingTab: closingTabIds.has(tab.tabId),
+      })),
+    [activeTabId, closingTabIds, tabs],
+  );
+  const handleSelectTab = useCallback(
+    (tabId: string) => onSelectTab(pane.id, tabId),
+    [onSelectTab, pane.id],
+  );
+  const handleReorderTabs = useCallback(
+    (nextTabs: WorkspaceTabDescriptor[]) => {
+      onReorderTabsInPane(
+        pane.id,
+        nextTabs.map((tab) => tab.tabId),
+      );
+    },
+    [onReorderTabsInPane, pane.id],
+  );
+
+  return (
+    <RetainedPanel active>
+      <WindowChromeRegion corners="top-right">
+        <View style={styles.dock} testID="workspace-explorer-sidebar">
+          <WindowChromeSafeArea placement="inline" style={styles.tabRail}>
+            <TitlebarDragRegion />
+            <ExplorerSidebarTabRail
+              paneId={pane.id}
+              tabs={tabItems}
+              normalizedServerId={normalizedServerId}
+              normalizedWorkspaceId={normalizedWorkspaceId}
+              activeDragTabId={activeDragTabId}
+              tabDropPreviewIndex={
+                tabDropPreview?.paneId === pane.id ? tabDropPreview.indicatorIndex : null
+              }
+              onNavigateTab={handleSelectTab}
+              onCloseTab={onCloseTab}
+              onCreateNewTab={onCreateNewTab}
+              onMoveTabToMain={onMoveTabToMain}
+              onReorderTabs={handleReorderTabs}
+              trailingAccessory={headerAction}
+            />
+            <View pointerEvents="none" style={styles.tabRailDivider} />
+          </WindowChromeSafeArea>
+          <View style={styles.content}>
+            <WorkspacePanelHost
+              paneId={pane.id}
+              tabs={tabs}
+              activeTabId={activeTabId}
+              normalizedServerId={normalizedServerId}
+              normalizedWorkspaceId={normalizedWorkspaceId}
+              isWorkspaceFocused={isWorkspaceFocused}
+              isPaneFocused
+              buildPaneContentModel={buildPaneContentModel}
+            />
+          </View>
+        </View>
+      </WindowChromeRegion>
+    </RetainedPanel>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  dock: {
+    flex: 1,
+    minWidth: 0,
+    minHeight: 0,
+    backgroundColor: theme.colors.surfaceSidebar,
+  },
+  tabRail: {
+    position: "relative",
+    flexShrink: 0,
+    backgroundColor: theme.colors.surfaceSidebar,
+  },
+  tabRailDivider: {
+    position: "absolute",
+    right: 0,
+    bottom: 0,
+    left: 0,
+    height: theme.borderWidth[1],
+    backgroundColor: theme.colors.border,
+  },
+  content: {
+    flex: 1,
+    minHeight: 0,
+    backgroundColor: theme.colors.surfaceSidebar,
+  },
+}));
diff --git a/packages/app/src/screens/workspace/workspace-desktop-tabs-row.tsx b/packages/app/src/screens/workspace/workspace-desktop-tabs-row.tsx
index bfe922b2a2..d7284a22c1 100644
--- a/packages/app/src/screens/workspace/workspace-desktop-tabs-row.tsx
+++ b/packages/app/src/screens/workspace/workspace-desktop-tabs-row.tsx
@@ -2,7 +2,6 @@ import { LoadingSpinner } from "@/components/ui/loading-spinner";
 import React, {
   useCallback,
   useEffect,
-  useId,
   useLayoutEffect,
   useMemo,
   useRef,
@@ -10,13 +9,7 @@ import React, {
   type Dispatch,
   type SetStateAction,
 } from "react";
-import {
-  Pressable,
-  Text,
-  View,
-  type LayoutChangeEvent,
-  type PressableStateCallbackType,
-} from "react-native";
+import { Pressable, Text, View, type LayoutChangeEvent } from "react-native";
 import {
   CopyX,
   ArrowLeftToLine,
@@ -24,19 +17,16 @@ import {
   Copy,
   Pencil,
   RotateCw,
-  Maximize2,
-  Minimize2,
+  Columns2,
+  Rows2,
+  Ellipsis,
+  Maximize,
+  Minimize,
   Plus,
   X,
 } from "lucide-react-native";
 import { StyleSheet, withUnistyles } from "react-native-unistyles";
-import Animated, {
-  useAnimatedScrollHandler,
-  useAnimatedStyle,
-  useSharedValue,
-  type AnimatedStyle,
-} from "react-native-reanimated";
-import Svg, { Defs, LinearGradient as SvgLinearGradient, Rect, Stop } from "react-native-svg";
+import Animated from "react-native-reanimated";
 import { useTranslation } from "react-i18next";
 import { SortableInlineList } from "@/components/sortable-inline-list";
 import type {
@@ -51,13 +41,13 @@ import {
   ContextMenuSeparator,
   ContextMenuTrigger,
 } from "@/components/ui/context-menu";
-import { DropdownMenu, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
-import { Shortcut } from "@/components/ui/shortcut";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem } from "@/components/ui/dropdown-menu";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { useShortcutKeys } from "@/hooks/use-shortcut-keys";
 import { WORKSPACE_SECONDARY_HEADER_HEIGHT, useIsCompactFormFactor } from "@/constants/layout";
 import { buttonControlHeight } from "@/components/ui/control-geometry";
 import type { ShortcutKey } from "@/utils/format-shortcut";
+import { Shortcut } from "@/components/ui/shortcut";
 import { useWorkspaceTabLayout } from "@/screens/workspace/use-workspace-tab-layout";
 import { retainWorkspaceTabMeasuredWidth } from "@/screens/workspace/workspace-tab-layout";
 import {
@@ -81,10 +71,27 @@ import { useKeyboardActionHandler } from "@/hooks/use-keyboard-action-handler";
 import { buildWorkspaceKeyboardHandlerId } from "@/keyboard/handler-id";
 import type { KeyboardActionDefinition } from "@/keyboard/keyboard-action-dispatcher";
 import { WorkspaceNewTabMenuContent } from "@/screens/workspace/workspace-new-tab-menu";
-import { SIDE_PANEL_PANE_ID } from "@/stores/workspace-layout-actions";
+import {
+  paneContentToolbarTrailingPadding,
+  ToolbarButton,
+  ToolbarControls,
+} from "@/components/ui/pane-content-toolbar";
+import { smallIconButtonChromeFrameSize } from "@/components/ui/icon-button-chrome";
+import {
+  HorizontalScrollBoundaryShades,
+  useHorizontalScrollBoundary,
+} from "@/components/ui/horizontal-scroll-boundary";
 
 const DROPDOWN_WIDTH = 220;
 const DEFAULT_INLINE_ADD_BUTTON_RESERVED_WIDTH = 36;
+const PANE_SPLIT_ACTIONS_HORIZONTAL_PADDING = 2;
+const PANE_SPLIT_ACTIONS_OUTER_MARGIN =
+  paneContentToolbarTrailingPadding(false) - PANE_SPLIT_ACTIONS_HORIZONTAL_PADDING;
+const PANE_SPLIT_ACTIONS_RESERVED_WIDTH =
+  smallIconButtonChromeFrameSize(false) +
+  PANE_SPLIT_ACTIONS_HORIZONTAL_PADDING * 2 +
+  PANE_SPLIT_ACTIONS_OUTER_MARGIN;
+const PANE_MAXIMIZE_ACTION_RESERVED_WIDTH = smallIconButtonChromeFrameSize(false) + 1;
 // Chip geometry. `layoutMetrics` measures tabs from these same numbers, so a chip that changes
 // shape without changing them mis-measures and drops the row into the overflow-scroll fallback at
 // the wrong width. Keep them together.
@@ -101,91 +108,26 @@ const TAB_MIN_WIDTH = 96;
 const TAB_MAX_WIDTH = 160;
 const TAB_CLOSE_BUTTON_RESERVED_WIDTH = 0;
 const TAB_LABEL_LAYOUT_ALLOWANCE = 4;
-const TAB_SCROLL_SHADE_WIDTH = 24;
-const TAB_SCROLL_EDGE_EPSILON = 1;
 
 const ThemedLoadingSpinner = withUnistyles(LoadingSpinner);
 const ThemedX = withUnistyles(X);
 const ThemedCopy = withUnistyles(Copy);
 
-function WorkspaceTabScrollShadeSvg({ side, color }: { side: "left" | "right"; color: string }) {
-  const gradientId = `workspace-tab-scroll-shade-${side}-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
-  return (
-    <Svg width="100%" height="100%" preserveAspectRatio="none">
-      <Defs>
-        <SvgLinearGradient
-          id={gradientId}
-          x1={side === "left" ? "100%" : "0%"}
-          y1="0%"
-          x2={side === "left" ? "0%" : "100%"}
-          y2="0%"
-        >
-          <Stop offset="0%" stopColor={color} stopOpacity={0} />
-          <Stop offset="100%" stopColor={color} stopOpacity={1} />
-        </SvgLinearGradient>
-      </Defs>
-      <Rect x="0" y="0" width="100%" height="100%" fill={`url(#${gradientId})`} />
-    </Svg>
-  );
-}
-
-const ThemedWorkspaceTabScrollShadeSvg = withUnistyles(WorkspaceTabScrollShadeSvg);
-const tabScrollShadeColorMapping = (theme: Theme) => ({ color: theme.colors.surface0 });
-
-function WorkspaceTabScrollShades({
-  visible,
-  leftStyle,
-  rightStyle,
-}: {
-  visible: boolean;
-  leftStyle: AnimatedStyle<{ opacity: number }>;
-  rightStyle: AnimatedStyle<{ opacity: number }>;
-}) {
-  if (!visible) return null;
-
-  return (
-    <>
-      <Animated.View
-        pointerEvents="none"
-        testID="workspace-tabs-scroll-shade-left"
-        style={[styles.tabScrollShade, styles.tabScrollShadeLeft, leftStyle]}
-      >
-        <ThemedWorkspaceTabScrollShadeSvg side="left" uniProps={tabScrollShadeColorMapping} />
-      </Animated.View>
-      <Animated.View
-        pointerEvents="none"
-        testID="workspace-tabs-scroll-shade-right"
-        style={[styles.tabScrollShade, styles.tabScrollShadeRight, rightStyle]}
-      >
-        <ThemedWorkspaceTabScrollShadeSvg side="right" uniProps={tabScrollShadeColorMapping} />
-      </Animated.View>
-    </>
-  );
-}
-
 const ThemedRotateCw = withUnistyles(RotateCw);
 const ThemedArrowLeftToLine = withUnistyles(ArrowLeftToLine);
 const ThemedArrowRightToLine = withUnistyles(ArrowRightToLine);
 const ThemedCopyX = withUnistyles(CopyX);
 const ThemedPencil = withUnistyles(Pencil);
 const ThemedPlus = withUnistyles(Plus);
-const ThemedMaximize2 = withUnistyles(Maximize2);
-const ThemedMinimize2 = withUnistyles(Minimize2);
+const ThemedColumns2 = withUnistyles(Columns2);
+const ThemedRows2 = withUnistyles(Rows2);
+const ThemedEllipsis = withUnistyles(Ellipsis);
+const ThemedMaximize = withUnistyles(Maximize);
+const ThemedMinimize = withUnistyles(Minimize);
 const foregroundColorMapping = (theme: Theme) => ({ color: theme.colors.foreground });
 const mutedColorMapping = (theme: Theme) => ({ color: theme.colors.foregroundMuted });
 const extraMutedColorMapping = (theme: Theme) => ({ color: theme.colors.foregroundExtraMuted });
 
-function inlineAddActionButtonStyle({
-  hovered,
-  pressed,
-  open = false,
-}: PressableStateCallbackType & { open?: boolean }) {
-  return [
-    styles.inlineAddActionButton,
-    (hovered || pressed || open) && styles.newTabActionButtonHovered,
-  ];
-}
-
 function updateMeasuredWidth(
   setWidth: React.Dispatch<React.SetStateAction<number>>,
   event: LayoutChangeEvent,
@@ -223,93 +165,150 @@ interface WorkspaceNewTabButtonProps {
   serverId: string;
   paneId?: string;
   shortcutKeys: ShortcutKey[][] | null;
-  onLayout: (event: LayoutChangeEvent) => void;
+  placement: "inline" | "toolbar";
 }
 
 function WorkspaceNewTabButton({
   serverId,
   paneId,
   shortcutKeys,
-  onLayout,
+  placement,
 }: WorkspaceNewTabButtonProps) {
   const { t } = useTranslation();
   const tooltipText = t("workspace.tabs.actions.newTab");
-
-  return (
-    <View style={styles.inlineAddButton} onLayout={onLayout}>
-      <DropdownMenu>
-        <Tooltip delayDuration={0} enabledOnDesktop enabledOnMobile={false}>
-          <TooltipTrigger asChild triggerRefProp="triggerRef">
-            <DropdownMenuTrigger
-              testID="workspace-new-tab-button"
-              accessibilityRole="button"
-              accessibilityLabel={tooltipText}
-              style={inlineAddActionButtonStyle}
-            >
-              <ThemedPlus size={14} uniProps={extraMutedColorMapping} />
-            </DropdownMenuTrigger>
-          </TooltipTrigger>
-          <TooltipContent side="bottom" align="center" offset={8}>
-            <View style={styles.newTabTooltipRow}>
-              <Text style={styles.newTabTooltipText}>{tooltipText}</Text>
-              {shortcutKeys ? <Shortcut chord={shortcutKeys} /> : null}
-            </View>
-          </TooltipContent>
-        </Tooltip>
-        <WorkspaceNewTabMenuContent
-          serverId={serverId}
-          purpose={paneId === SIDE_PANEL_PANE_ID ? "supporting" : "primary"}
-          paneId={paneId}
-        />
-      </DropdownMenu>
-    </View>
+  const menu = (
+    <DropdownMenu>
+      <ToolbarButton
+        kind="menu"
+        label={tooltipText}
+        shortcut={shortcutKeys}
+        testID="workspace-new-tab-button"
+        style={placement === "inline" ? styles.inlineNewTabButton : undefined}
+      >
+        <ThemedPlus size={14} uniProps={extraMutedColorMapping} />
+      </ToolbarButton>
+      <WorkspaceNewTabMenuContent
+        serverId={serverId}
+        purpose="primary"
+        host="main"
+        paneId={paneId}
+      />
+    </DropdownMenu>
   );
+
+  return placement === "inline" ? <View style={styles.inlineAddButton}>{menu}</View> : menu;
 }
 
-function WorkspacePaneMaximizeButton({
-  visible,
-  maximized,
-  onPress,
-  onLayout,
+function WorkspacePaneToolbarActions({
+  showNewTabButton,
+  showSplitActions,
+  showMaximizeAction,
+  paneMaximized,
+  serverId,
+  paneId,
+  newTabShortcutKeys,
+  onSplitRight,
+  onSplitDown,
+  onTogglePaneMaximized,
 }: {
-  visible: boolean;
-  maximized: boolean;
-  onPress?: () => void;
-  onLayout: (event: LayoutChangeEvent) => void;
+  showNewTabButton: boolean;
+  showSplitActions: boolean;
+  showMaximizeAction: boolean;
+  paneMaximized: boolean;
+  serverId: string;
+  paneId?: string;
+  newTabShortcutKeys: ShortcutKey[][] | null;
+  onSplitRight?: () => void;
+  onSplitDown?: () => void;
+  onTogglePaneMaximized?: () => void;
 }) {
   const { t } = useTranslation();
-  const maximizePaneKeys = useShortcutKeys("workspace-explorer-maximize");
-  if (!visible || !onPress) {
-    return null;
-  }
-  const label = t(
-    maximized ? "workspace.tabs.actions.restorePane" : "workspace.tabs.actions.maximizePane",
+  const splitRightKeys = useShortcutKeys("workspace-pane-split-right");
+  const splitDownKeys = useShortcutKeys("workspace-pane-split-down");
+  const splitActionsVisible = showSplitActions && Boolean(onSplitRight && onSplitDown);
+  const splitRightLeading = useMemo(
+    () => <ThemedColumns2 size={14} uniProps={extraMutedColorMapping} />,
+    [],
   );
+  const splitDownLeading = useMemo(
+    () => <ThemedRows2 size={14} uniProps={extraMutedColorMapping} />,
+    [],
+  );
+  const splitRightTrailing = useMemo(
+    () => (splitRightKeys ? <Shortcut chord={splitRightKeys} /> : null),
+    [splitRightKeys],
+  );
+  const splitDownTrailing = useMemo(
+    () => (splitDownKeys ? <Shortcut chord={splitDownKeys} /> : null),
+    [splitDownKeys],
+  );
+  const maximizeActionVisible = showMaximizeAction && Boolean(onTogglePaneMaximized);
+  if (!showNewTabButton && !splitActionsVisible && !maximizeActionVisible) return null;
 
   return (
-    <View style={[styles.inlineAddButton, styles.paneMaximizeButtonSlot]} onLayout={onLayout}>
-      <Tooltip delayDuration={0} enabledOnDesktop enabledOnMobile={false}>
-        <TooltipTrigger
-          testID={maximized ? "workspace-restore-pane" : "workspace-maximize-pane"}
-          onPress={onPress}
-          accessibilityRole="button"
-          accessibilityLabel={label}
-          style={inlineAddActionButtonStyle}
-        >
-          {maximized ? (
-            <ThemedMinimize2 size={14} uniProps={extraMutedColorMapping} />
-          ) : (
-            <ThemedMaximize2 size={14} uniProps={extraMutedColorMapping} />
+    <ToolbarControls style={styles.paneSplitActions}>
+      {showNewTabButton ? (
+        <WorkspaceNewTabButton
+          placement="toolbar"
+          serverId={serverId}
+          paneId={paneId}
+          shortcutKeys={newTabShortcutKeys}
+        />
+      ) : null}
+      {maximizeActionVisible && onTogglePaneMaximized ? (
+        <ToolbarButton
+          label={t(
+            paneMaximized
+              ? "workspace.tabs.actions.restorePane"
+              : "workspace.tabs.actions.maximizePane",
           )}
-        </TooltipTrigger>
-        <TooltipContent side="bottom" align="center" offset={8}>
-          <View style={styles.newTabTooltipRow}>
-            <Text style={styles.newTabTooltipText}>{label}</Text>
-            {maximizePaneKeys ? <Shortcut chord={maximizePaneKeys} /> : null}
-          </View>
-        </TooltipContent>
-      </Tooltip>
-    </View>
+          selected={paneMaximized}
+          testID={paneMaximized ? "workspace-restore-pane" : "workspace-maximize-pane"}
+          onPress={onTogglePaneMaximized}
+        >
+          {paneMaximized ? (
+            <ThemedMinimize size={14} uniProps={extraMutedColorMapping} />
+          ) : (
+            <ThemedMaximize size={14} uniProps={extraMutedColorMapping} />
+          )}
+        </ToolbarButton>
+      ) : null}
+      {splitActionsVisible && onSplitRight && onSplitDown ? (
+        <DropdownMenu>
+          <ToolbarButton
+            kind="menu"
+            label={t("workspace.git.actions.moreActions")}
+            testID="workspace-split-pane-menu"
+          >
+            <ThemedEllipsis size={14} uniProps={extraMutedColorMapping} />
+          </ToolbarButton>
+          <DropdownMenuContent
+            side="bottom"
+            align="end"
+            offset={4}
+            width={220}
+            testID="workspace-split-pane-menu-content"
+          >
+            <DropdownMenuItem
+              leading={splitRightLeading}
+              trailing={splitRightTrailing}
+              testID="workspace-split-pane-right"
+              onSelect={onSplitRight}
+            >
+              {t("workspace.tabs.actions.splitRight")}
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              leading={splitDownLeading}
+              trailing={splitDownTrailing}
+              testID="workspace-split-pane-down"
+              onSelect={onSplitDown}
+            >
+              {t("workspace.tabs.actions.splitDown")}
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      ) : null}
+    </ToolbarControls>
   );
 }
 
@@ -330,35 +329,18 @@ function WorkspaceExitFocusModeButton({
 
   return (
     <View style={styles.exitFocusModeSlot} onLayout={onLayout}>
-      <Tooltip delayDuration={0} enabledOnDesktop enabledOnMobile={false}>
-        <TooltipTrigger
-          testID="workspace-exit-focus-mode"
-          onPress={onPress}
-          accessibilityRole="button"
-          accessibilityLabel={t("workspace.tabs.actions.exitFocusMode")}
-          style={inlineAddActionButtonStyle}
-        >
-          <ThemedX size={14} uniProps={mutedColorMapping} />
-        </TooltipTrigger>
-        <TooltipContent side="bottom" align="center" offset={8}>
-          <View style={styles.newTabTooltipRow}>
-            <Text style={styles.newTabTooltipText}>
-              {t("workspace.tabs.actions.exitFocusMode")}
-            </Text>
-            {focusModeKeys ? (
-              <Shortcut chord={focusModeKeys} style={styles.newTabTooltipShortcut} />
-            ) : null}
-          </View>
-        </TooltipContent>
-      </Tooltip>
+      <ToolbarButton
+        label={t("workspace.tabs.actions.exitFocusMode")}
+        shortcut={focusModeKeys}
+        testID="workspace-exit-focus-mode"
+        onPress={onPress}
+      >
+        <ThemedX size={14} uniProps={mutedColorMapping} />
+      </ToolbarButton>
     </View>
   );
 }
 
-function resolvePaneMaximizeReservedWidth(visible: boolean, measuredWidth: number): number {
-  return visible ? measuredWidth : 0;
-}
-
 function TabContextMenuItem({
   entry,
 }: {
@@ -485,9 +467,12 @@ interface WorkspaceDesktopTabsRowProps {
   externalDndContext?: boolean;
   activeDragTabId?: string | null;
   tabDropPreviewIndex?: number | null;
+  showPaneSplitActions?: boolean;
   showPaneMaximizeAction?: boolean;
   paneMaximized?: boolean;
   onTogglePaneMaximized?: () => void;
+  onSplitRight?: () => void;
+  onSplitDown?: () => void;
   focusModeEnabled: boolean;
   onExitFocusMode: () => void;
 }
@@ -567,7 +552,7 @@ function getFallbackTabLabel(
   if (tab.target.kind === "file") {
     return tab.target.path.split("/").findLast(Boolean) ?? tab.target.path;
   }
-  if (tab.target.kind === "working_diff") {
+  if (tab.target.kind === "working_diff" || tab.target.kind === "changes_tree") {
     return labels.changes;
   }
   if (tab.target.kind === "files") {
@@ -970,21 +955,20 @@ function ResolvedWorkspaceDesktopTabsRow({
   externalDndContext = false,
   activeDragTabId = null,
   tabDropPreviewIndex = null,
+  showPaneSplitActions = false,
   showPaneMaximizeAction = false,
   paneMaximized = false,
   onTogglePaneMaximized,
+  onSplitRight,
+  onSplitDown,
   focusModeEnabled,
   onExitFocusMode,
 }: ResolvedWorkspaceDesktopTabsRowProps) {
   const { t } = useTranslation();
   const newTabKeys = useShortcutKeys("workspace-tab-new");
   const [tabsContainerWidth, setTabsContainerWidth] = useState<number>(0);
-  const [inlineAddButtonWidth, setInlineAddButtonWidth] = useState<number>(0);
-  const [paneMaximizeButtonWidth, setPaneMaximizeButtonWidth] = useState<number>(0);
   const [exitFocusModeWidth, setExitFocusModeWidth] = useState<number>(0);
-  const tabScrollOffset = useSharedValue(0);
-  const tabScrollViewportWidth = useSharedValue(0);
-  const tabScrollContentWidth = useSharedValue(0);
+  const tabScrollBoundary = useHorizontalScrollBoundary();
   const [labelMeasurements, setLabelMeasurements] = useState(
     () => new Map<string, WorkspaceTabLabelMeasurement>(),
   );
@@ -994,56 +978,19 @@ function ResolvedWorkspaceDesktopTabsRow({
     updateMeasuredWidth(setTabsContainerWidth, event);
   }, []);
 
-  const handleInlineAddButtonLayout = useCallback((event: LayoutChangeEvent) => {
-    updateMeasuredWidth(setInlineAddButtonWidth, event);
-  }, []);
-
   const handleExitFocusModeLayout = useCallback((event: LayoutChangeEvent) => {
     updateMeasuredWidth(setExitFocusModeWidth, event);
   }, []);
 
-  const handlePaneMaximizeButtonLayout = useCallback((event: LayoutChangeEvent) => {
-    updateMeasuredWidth(setPaneMaximizeButtonWidth, event);
-  }, []);
-
-  const handleTabScrollLayout = useCallback(
-    (event: LayoutChangeEvent) => {
-      tabScrollViewportWidth.value = event.nativeEvent.layout.width;
-    },
-    [tabScrollViewportWidth],
-  );
-
-  const handleTabScrollContentSizeChange = useCallback(
-    (width: number) => {
-      tabScrollContentWidth.value = width;
-    },
-    [tabScrollContentWidth],
-  );
-
-  const handleTabScroll = useAnimatedScrollHandler((event) => {
-    tabScrollOffset.value = event.contentOffset.x;
-    tabScrollViewportWidth.value = event.layoutMeasurement.width;
-    tabScrollContentWidth.value = event.contentSize.width;
-  });
-
-  const leftTabScrollShadeStyle = useAnimatedStyle(() => ({
-    opacity: Number(tabScrollOffset.value > TAB_SCROLL_EDGE_EPSILON),
-  }));
-  const rightTabScrollShadeStyle = useAnimatedStyle(() => ({
-    opacity: Number(
-      tabScrollOffset.value + tabScrollViewportWidth.value <
-        tabScrollContentWidth.value - TAB_SCROLL_EDGE_EPSILON,
-    ),
-  }));
-
   const layoutMetrics = useMemo(
     () => ({
       rowHorizontalInset: 0,
       actionsReservedWidth: Math.max(
         0,
-        (inlineAddButtonWidth || DEFAULT_INLINE_ADD_BUTTON_RESERVED_WIDTH) +
+        DEFAULT_INLINE_ADD_BUTTON_RESERVED_WIDTH +
           (focusModeEnabled ? exitFocusModeWidth : 0) +
-          resolvePaneMaximizeReservedWidth(showPaneMaximizeAction, paneMaximizeButtonWidth),
+          (showPaneSplitActions ? PANE_SPLIT_ACTIONS_RESERVED_WIDTH : 0) +
+          (showPaneMaximizeAction ? PANE_MAXIMIZE_ACTION_RESERVED_WIDTH : 0),
       ),
       rowPaddingHorizontal: TAB_ROW_PADDING_HORIZONTAL,
       tabGap: TAB_CHIP_GAP,
@@ -1054,13 +1001,7 @@ function ResolvedWorkspaceDesktopTabsRow({
       tabHorizontalPadding: TAB_CHIP_HORIZONTAL_PADDING,
       closeButtonWidth: TAB_CLOSE_BUTTON_RESERVED_WIDTH,
     }),
-    [
-      exitFocusModeWidth,
-      focusModeEnabled,
-      inlineAddButtonWidth,
-      paneMaximizeButtonWidth,
-      showPaneMaximizeAction,
-    ],
+    [exitFocusModeWidth, focusModeEnabled, showPaneMaximizeAction, showPaneSplitActions],
   );
 
   const fallbackTabLabels = useMemo(
@@ -1344,9 +1285,9 @@ function ResolvedWorkspaceDesktopTabsRow({
           style={tabsScrollStyle}
           contentContainerStyle={styles.tabsContent}
           showsHorizontalScrollIndicator={false}
-          onLayout={handleTabScrollLayout}
-          onContentSizeChange={handleTabScrollContentSizeChange}
-          onScroll={handleTabScroll}
+          onLayout={tabScrollBoundary.onLayout}
+          onContentSizeChange={tabScrollBoundary.onContentSizeChange}
+          onScroll={tabScrollBoundary.onScroll}
           scrollEventThrottle={16}
         >
           <SortableInlineList
@@ -1362,32 +1303,32 @@ function ResolvedWorkspaceDesktopTabsRow({
           />
           {!layout.requiresHorizontalScrollFallback ? (
             <WorkspaceNewTabButton
+              placement="inline"
               serverId={normalizedServerId}
               paneId={paneId}
               shortcutKeys={newTabKeys}
-              onLayout={handleInlineAddButtonLayout}
             />
           ) : null}
         </Animated.ScrollView>
-        <WorkspaceTabScrollShades
+        <HorizontalScrollBoundaryShades
           visible={layout.requiresHorizontalScrollFallback}
-          leftStyle={leftTabScrollShadeStyle}
-          rightStyle={rightTabScrollShadeStyle}
+          backdrop="surface"
+          testIDPrefix="workspace-tabs-scroll-shade"
+          leftStyle={tabScrollBoundary.leftShadeStyle}
+          rightStyle={tabScrollBoundary.rightShadeStyle}
         />
       </View>
-      {layout.requiresHorizontalScrollFallback ? (
-        <WorkspaceNewTabButton
-          serverId={normalizedServerId}
-          paneId={paneId}
-          shortcutKeys={newTabKeys}
-          onLayout={handleInlineAddButtonLayout}
-        />
-      ) : null}
-      <WorkspacePaneMaximizeButton
-        visible={showPaneMaximizeAction}
-        maximized={paneMaximized}
-        onPress={onTogglePaneMaximized}
-        onLayout={handlePaneMaximizeButtonLayout}
+      <WorkspacePaneToolbarActions
+        showNewTabButton={layout.requiresHorizontalScrollFallback}
+        showSplitActions={showPaneSplitActions}
+        showMaximizeAction={showPaneMaximizeAction}
+        paneMaximized={paneMaximized}
+        serverId={normalizedServerId}
+        paneId={paneId}
+        newTabShortcutKeys={newTabKeys}
+        onSplitRight={onSplitRight}
+        onSplitDown={onSplitDown}
+        onTogglePaneMaximized={onTogglePaneMaximized}
       />
     </View>
   );
@@ -1548,23 +1489,11 @@ const styles = StyleSheet.create((theme) => ({
     alignItems: "center",
     paddingHorizontal: TAB_ROW_PADDING_HORIZONTAL,
   },
-  tabScrollShade: {
-    position: "absolute",
-    top: 0,
-    bottom: 1,
-    width: TAB_SCROLL_SHADE_WIDTH,
-  },
-  tabScrollShadeLeft: {
-    left: 0,
-  },
-  tabScrollShadeRight: {
-    right: 0,
-  },
   exitFocusModeSlot: {
     alignSelf: "stretch",
     flexDirection: "row",
     alignItems: "center",
-    paddingHorizontal: theme.spacing[1],
+    paddingHorizontal: theme.spacing[0.5],
     borderRightWidth: 1,
     borderRightColor: theme.colors.border,
   },
@@ -1573,9 +1502,13 @@ const styles = StyleSheet.create((theme) => ({
     alignItems: "center",
     paddingHorizontal: theme.spacing[1],
   },
-  paneMaximizeButtonSlot: {
-    // Keep the glyph centered in its hit target while placing that glyph on the trailing rail.
-    marginRight: theme.spacing[2],
+  inlineNewTabButton: {
+    width: buttonControlHeight.xs,
+    height: buttonControlHeight.xs,
+  },
+  paneSplitActions: {
+    paddingHorizontal: PANE_SPLIT_ACTIONS_HORIZONTAL_PADDING,
+    marginRight: PANE_SPLIT_ACTIONS_OUTER_MARGIN,
   },
   tab: {
     height: buttonControlHeight.xs,
@@ -1704,28 +1637,10 @@ const styles = StyleSheet.create((theme) => ({
     borderRadius: theme.borderRadius.full,
     backgroundColor: theme.colors.foregroundMuted,
   },
-  inlineAddActionButton: {
-    width: buttonControlHeight.xs,
-    height: buttonControlHeight.xs,
-    borderRadius: theme.borderRadius.md,
-    alignItems: "center",
-    justifyContent: "center",
-    outlineWidth: 0,
-    outlineColor: "transparent",
-  },
-  newTabActionButtonHovered: {
-    backgroundColor: theme.colors.surface2,
-  },
   newTabTooltipText: {
     color: theme.colors.foreground,
     fontSize: theme.fontSize.base,
   },
-  newTabTooltipRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.spacing[2],
-  },
-  newTabTooltipShortcut: {},
   tooltipAgentRow: {
     flexDirection: "row",
     alignItems: "center",
diff --git a/packages/app/src/screens/workspace/workspace-explorer-toggle.tsx b/packages/app/src/screens/workspace/workspace-explorer-toggle.tsx
new file mode 100644
index 0000000000..041aa6954b
--- /dev/null
+++ b/packages/app/src/screens/workspace/workspace-explorer-toggle.tsx
@@ -0,0 +1,95 @@
+import { PanelRight } from "lucide-react-native";
+import { type StyleProp, type ViewStyle } from "react-native";
+import { withUnistyles } from "react-native-unistyles";
+import { HeaderToggleButton } from "@/components/headers/header-toggle-button";
+import {
+  extraMutedIconColorMapping,
+  iconButtonChromeGlyphSize,
+  mutedIconColorMapping,
+} from "@/components/ui/icon-button-chrome";
+import type { ShortcutKey } from "@/utils/format-shortcut";
+
+const ThemedPanelRight = withUnistyles(PanelRight);
+
+interface WorkspaceExplorerToggleProps {
+  onPress: () => void;
+  label: string;
+  tooltipLabel: string;
+  tooltipKeys: ShortcutKey[];
+  accessibilityState: { expanded: boolean };
+  mobile: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+export type WorkspaceExplorerToggleOwner = "mobile" | "header" | "window";
+
+export function resolveWorkspaceExplorerToggleOwner({
+  isMobile,
+  hasMacTrafficLights,
+}: {
+  isMobile: boolean;
+  hasMacTrafficLights: boolean;
+}): WorkspaceExplorerToggleOwner {
+  if (isMobile) return "mobile";
+  return hasMacTrafficLights ? "window" : "header";
+}
+
+export function WorkspaceExplorerToggle({
+  onPress,
+  label,
+  tooltipLabel,
+  tooltipKeys,
+  accessibilityState,
+  mobile,
+  style,
+}: WorkspaceExplorerToggleProps) {
+  return (
+    <HeaderToggleButton
+      testID="workspace-explorer-toggle"
+      onPress={onPress}
+      tooltipLabel={tooltipLabel}
+      tooltipKeys={tooltipKeys}
+      tooltipSide="left"
+      style={style}
+      accessible
+      accessibilityRole="button"
+      accessibilityLabel={label}
+      accessibilityState={accessibilityState}
+    >
+      <ThemedPanelRight
+        size={iconButtonChromeGlyphSize("large")}
+        strokeWidth={1.5}
+        uniProps={mobile ? mutedIconColorMapping : extraMutedIconColorMapping}
+      />
+    </HeaderToggleButton>
+  );
+}
+
+interface DesktopWorkspaceExplorerToggleProps extends Omit<WorkspaceExplorerToggleProps, "mobile"> {
+  owner: WorkspaceExplorerToggleOwner;
+}
+
+export function WorkspaceHeaderExplorerToggle({
+  owner,
+  accessibilityState,
+  style,
+  ...toggleProps
+}: DesktopWorkspaceExplorerToggleProps) {
+  if (owner === "mobile" || (owner === "window" && accessibilityState.expanded)) return null;
+  return (
+    <WorkspaceExplorerToggle
+      {...toggleProps}
+      accessibilityState={accessibilityState}
+      mobile={false}
+      style={style}
+    />
+  );
+}
+
+export function WorkspaceExplorerSidebarToggle({
+  owner,
+  ...toggleProps
+}: DesktopWorkspaceExplorerToggleProps) {
+  if (owner !== "window") return null;
+  return <WorkspaceExplorerToggle {...toggleProps} mobile={false} />;
+}
diff --git a/packages/app/src/screens/workspace/workspace-file-open-command.test.ts b/packages/app/src/screens/workspace/workspace-file-open-command.test.ts
new file mode 100644
index 0000000000..d1551c7a8c
--- /dev/null
+++ b/packages/app/src/screens/workspace/workspace-file-open-command.test.ts
@@ -0,0 +1,33 @@
+import { describe, expect, it, vi } from "vitest";
+import { openWorkspaceFileFromExplorer } from "@/screens/workspace/workspace-file-open-command";
+
+function createInput(closeExplorerAfterOpen: boolean) {
+  return {
+    filePath: "src/app.tsx",
+    persistenceKey: "server:workspace",
+    closeExplorerAfterOpen,
+    showMobileAgent: vi.fn(),
+    openWorkspaceTabInFocusedPane: vi.fn(() => "file-tab"),
+    focusWorkspaceTab: vi.fn(),
+  };
+}
+
+describe("openWorkspaceFileFromExplorer", () => {
+  it("closes the phone overlay after opening a file", () => {
+    const input = createInput(true);
+
+    openWorkspaceFileFromExplorer(input);
+
+    expect(input.showMobileAgent).toHaveBeenCalledOnce();
+  });
+
+  it("keeps the tablet dock open after opening a file", () => {
+    const input = createInput(false);
+
+    openWorkspaceFileFromExplorer(input);
+
+    expect(input.showMobileAgent).not.toHaveBeenCalled();
+    expect(input.openWorkspaceTabInFocusedPane).toHaveBeenCalledOnce();
+    expect(input.focusWorkspaceTab).toHaveBeenCalledWith("server:workspace", "file-tab");
+  });
+});
diff --git a/packages/app/src/screens/workspace/workspace-file-open-command.ts b/packages/app/src/screens/workspace/workspace-file-open-command.ts
index c4e6a82f4c..0d990f3557 100644
--- a/packages/app/src/screens/workspace/workspace-file-open-command.ts
+++ b/packages/app/src/screens/workspace/workspace-file-open-command.ts
@@ -11,6 +11,7 @@ import type { WorkspaceTabTarget } from "@/workspace-tabs/model";
 interface OpenWorkspaceFileFromExplorerInput {
   filePath: string;
   persistenceKey: string | null;
+  closeExplorerAfterOpen: boolean;
   showMobileAgent: () => void;
   openWorkspaceTabInFocusedPane: (
     workspaceKey: string,
@@ -21,7 +22,9 @@ interface OpenWorkspaceFileFromExplorerInput {
 }
 
 export function openWorkspaceFileFromExplorer(input: OpenWorkspaceFileFromExplorerInput): void {
-  input.showMobileAgent();
+  if (input.closeExplorerAfterOpen) {
+    input.showMobileAgent();
+  }
   if (!input.persistenceKey) {
     return;
   }
diff --git a/packages/app/src/screens/workspace/workspace-header-menu.tsx b/packages/app/src/screens/workspace/workspace-header-menu.tsx
index 7306e8b122..1ffd99425f 100644
--- a/packages/app/src/screens/workspace/workspace-header-menu.tsx
+++ b/packages/app/src/screens/workspace/workspace-header-menu.tsx
@@ -20,7 +20,11 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { buttonControlHeight } from "@/components/ui/control-geometry";
+import {
+  extraMutedIconColorMapping,
+  iconButtonChromeGlyphSize,
+  iconButtonChromeStyle,
+} from "@/components/ui/icon-button-chrome";
 import { TerminalProfileIcon } from "@/components/terminal-profile-icon";
 import { useDaemonConfig } from "@/hooks/use-daemon-config";
 import {
@@ -37,7 +41,6 @@ const ThemedGlobe = withUnistyles(Globe);
 const ThemedImport = withUnistyles(ImportIcon);
 const ThemedSettings = withUnistyles(Settings);
 
-const foregroundColorMapping = (theme: Theme) => ({ color: theme.colors.foreground });
 const mutedColorMapping = (theme: Theme) => ({ color: theme.colors.foregroundMuted });
 
 const MENU_NEW_AGENT_ICON = <ThemedSquarePen size={16} uniProps={mutedColorMapping} />;
@@ -46,6 +49,14 @@ const MENU_NEW_TERMINAL_ICON = <TerminalProfileIcon iconKey={undefined} size={16
 const MENU_IMPORT_ICON = <ThemedImport size={16} uniProps={mutedColorMapping} />;
 const MENU_COPY_ICON = <ThemedCopy size={16} uniProps={mutedColorMapping} />;
 const MENU_SETTINGS_ICON = <ThemedSettings size={16} uniProps={mutedColorMapping} />;
+function WorkspaceHeaderMenuTriggerIcon() {
+  return (
+    <ThemedEllipsis
+      size={iconButtonChromeGlyphSize("large")}
+      uniProps={extraMutedIconColorMapping}
+    />
+  );
+}
 
 /**
  * The compact header buttons draw at 32pt, under the 44pt touch minimum, and sit flush against
@@ -123,13 +134,16 @@ function WorkspaceHeaderWorkspaceActionItems({
   );
 }
 
-function WorkspaceHeaderMenuTriggerIcon({ hovered, open }: { hovered: boolean; open: boolean }) {
-  const colorMapping = hovered || open ? foregroundColorMapping : mutedColorMapping;
-  return <ThemedEllipsis size={16} uniProps={colorMapping} />;
-}
-
-function renderTriggerIcon({ hovered, open }: { hovered: boolean; open: boolean }) {
-  return <WorkspaceHeaderMenuTriggerIcon hovered={hovered} open={open} />;
+function workspaceHeaderMenuButtonStyle({
+  hovered,
+  pressed,
+  open,
+}: {
+  hovered: boolean;
+  pressed: boolean;
+  open: boolean;
+}) {
+  return iconButtonChromeStyle({ size: "large", state: { hovered, pressed, open } });
 }
 
 /**
@@ -141,11 +155,11 @@ export function WorkspaceHeaderMenuDesktop(props: WorkspaceHeaderWorkspaceAction
     <DropdownMenu>
       <DropdownMenuTrigger
         testID="workspace-header-menu-trigger"
-        style={styles.headerActionButton}
+        style={workspaceHeaderMenuButtonStyle}
         accessibilityRole="button"
         accessibilityLabel={t("workspace.header.actions.workspaceActions")}
       >
-        {renderTriggerIcon}
+        <WorkspaceHeaderMenuTriggerIcon />
       </DropdownMenuTrigger>
       <DropdownMenuContent align="start" width={220} testID="workspace-header-menu">
         <WorkspaceHeaderWorkspaceActionItems {...props} />
@@ -225,12 +239,12 @@ export function WorkspaceHeaderMenuMobile({
     <DropdownMenu compactMode="sheet">
       <DropdownMenuTrigger
         testID="workspace-header-menu-trigger"
-        style={styles.compactHeaderActionButton}
+        style={workspaceHeaderMenuButtonStyle}
         hitSlop={COMPACT_HEADER_BUTTON_HIT_SLOP}
         accessibilityRole="button"
         accessibilityLabel={t("workspace.header.actions.workspaceActions")}
       >
-        {renderTriggerIcon}
+        <WorkspaceHeaderMenuTriggerIcon />
       </DropdownMenuTrigger>
       <DropdownMenuContent
         align="start"
@@ -285,28 +299,9 @@ export function WorkspaceHeaderMenuMobile({
   );
 }
 
-const styles = StyleSheet.create((theme) => ({
-  headerActionButton: {
-    paddingVertical: theme.spacing[2],
-    paddingHorizontal: theme.spacing[2],
-    borderRadius: theme.borderRadius.lg,
-  },
-  compactHeaderActionButton: {
-    width: {
-      xs: theme.spacing[8],
-      md: buttonControlHeight.xs,
-    },
-    height: {
-      xs: theme.spacing[8],
-      md: buttonControlHeight.xs,
-    },
-    padding: 0,
-    borderRadius: theme.borderRadius.lg,
-    alignItems: "center",
-    justifyContent: "center",
-  },
+const styles = StyleSheet.create({
   headerMenuProfileIconWrapper: {
     width: 16,
     height: 16,
   },
-}));
+});
diff --git a/packages/app/src/screens/workspace/workspace-new-tab-menu.tsx b/packages/app/src/screens/workspace/workspace-new-tab-menu.tsx
index da2d2d7fe7..a8d7c3a43a 100644
--- a/packages/app/src/screens/workspace/workspace-new-tab-menu.tsx
+++ b/packages/app/src/screens/workspace/workspace-new-tab-menu.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useMemo, type ReactElement } from "react";
+import { useCallback, useMemo, type ComponentType, type ReactElement } from "react";
 import { View } from "react-native";
 import { withUnistyles } from "react-native-unistyles";
 import {
@@ -16,11 +16,18 @@ import {
   type WorkspaceTabLaunchItem,
   type WorkspaceTabLaunchPurpose,
 } from "@/workspace-tabs/launcher";
-import type { LucideIcon } from "lucide-react-native";
+import type { PaneHost } from "@/panels/panel-manifest";
+import type { PanelIconProps } from "@/panels/panel-registry";
 
 const mutedColorMapping = (theme: Theme) => ({ color: theme.colors.foregroundMuted });
 
-function LaunchItemIconGlyph({ Icon, color = "" }: { Icon: LucideIcon; color?: string }) {
+function LaunchItemIconGlyph({
+  Icon,
+  color = "",
+}: {
+  Icon: ComponentType<PanelIconProps>;
+  color?: string;
+}) {
   return <Icon size={14} color={color} />;
 }
 
@@ -76,13 +83,15 @@ function LaunchItemShortcut({ actionId }: { actionId: string }) {
 export function WorkspaceNewTabMenuContent({
   serverId,
   purpose,
+  host,
   paneId,
 }: {
   serverId: string;
   purpose: WorkspaceTabLaunchPurpose;
+  host: PaneHost;
   paneId?: string;
 }) {
-  const groups = useWorkspaceTabLaunchCatalog({ serverId, purpose });
+  const groups = useWorkspaceTabLaunchCatalog({ serverId, purpose, host });
 
   return (
     <DropdownMenuContent
diff --git a/packages/app/src/screens/workspace/workspace-open-in-editor-button.tsx b/packages/app/src/screens/workspace/workspace-open-in-editor-button.tsx
index ee10fd6263..969f04f3a1 100644
--- a/packages/app/src/screens/workspace/workspace-open-in-editor-button.tsx
+++ b/packages/app/src/screens/workspace/workspace-open-in-editor-button.tsx
@@ -27,7 +27,8 @@ import { planWorkspaceOpenTargets } from "@/workspace/open-target-planner";
 import type { Theme } from "@/styles/theme";
 import { ForgeBrandIcon } from "@/git/forge-icon";
 import { getForgePresentation } from "@/git/forge";
-import { buttonControlHeight } from "@/components/ui/control-geometry";
+import { buttonControlHeight, HEADER_CONTROL_HEIGHT } from "@/components/ui/control-geometry";
+import { extraMutedIconColorMapping } from "@/components/ui/icon-button-chrome";
 
 interface WorkspaceOpenInEditorButtonProps {
   serverId: string;
@@ -185,11 +186,11 @@ export function WorkspaceOpenInEditorButton({
 
   const primaryPressableStyle = useCallback(
     ({ pressed, hovered = false }: PressableStateCallbackType & { hovered?: boolean }) => [
-      styles.splitButtonPrimary,
+      hideLabels ? styles.splitButtonPrimaryIconOnly : styles.splitButtonPrimary,
       (Boolean(hovered) || pressed) && styles.splitButtonPrimaryHovered,
       openMutation.isPending && styles.splitButtonPrimaryDisabled,
     ],
-    [openMutation.isPending],
+    [hideLabels, openMutation.isPending],
   );
 
   const caretTriggerStyle = useCallback(
@@ -253,7 +254,7 @@ export function WorkspaceOpenInEditorButton({
               accessibilityRole="button"
               accessibilityLabel={t("workspace.git.openInEditor.chooseEditor")}
             >
-              <ThemedChevronDown size={16} uniProps={mutedColorMapping} />
+              <ThemedChevronDown size={16} uniProps={extraMutedIconColorMapping} />
             </DropdownMenuTrigger>
             <DropdownMenuContent
               align="end"
@@ -285,23 +286,31 @@ const styles = StyleSheet.create((theme) => ({
     flexShrink: 0,
   },
   splitButton: {
-    height: buttonControlHeight.xs,
+    height: {
+      xs: buttonControlHeight.xs,
+      md: HEADER_CONTROL_HEIGHT,
+    },
     flexDirection: "row",
     alignItems: "stretch",
-    borderRadius: theme.borderRadius.lg,
+    borderRadius: theme.borderRadius.md,
     borderWidth: theme.borderWidth[1],
     borderColor: theme.colors.borderAccent,
     overflow: "hidden",
   },
   splitButtonPrimary: {
-    paddingLeft: theme.spacing[3],
-    paddingRight: theme.spacing[3],
+    paddingHorizontal: {
+      xs: theme.spacing[3],
+      md: theme.spacing[2],
+    },
     justifyContent: "center",
     position: "relative",
   },
   splitButtonPrimaryIconOnly: {
-    paddingLeft: theme.spacing[2],
-    paddingRight: theme.spacing[2],
+    width: {
+      xs: buttonControlHeight.xs,
+      md: HEADER_CONTROL_HEIGHT,
+    },
+    paddingHorizontal: 0,
     justifyContent: "center",
     position: "relative",
   },
@@ -328,7 +337,10 @@ const styles = StyleSheet.create((theme) => ({
     transform: [{ scale: 0.8 }],
   },
   splitButtonCaret: {
-    width: 28,
+    width: {
+      xs: buttonControlHeight.xs,
+      md: HEADER_CONTROL_HEIGHT,
+    },
     alignItems: "center",
     justifyContent: "center",
     borderLeftWidth: theme.borderWidth[1],
diff --git a/packages/app/src/screens/workspace/workspace-pane-content.test.tsx b/packages/app/src/screens/workspace/workspace-pane-content.test.tsx
index 4367e3fb5b..84ec2634b9 100644
--- a/packages/app/src/screens/workspace/workspace-pane-content.test.tsx
+++ b/packages/app/src/screens/workspace/workspace-pane-content.test.tsx
@@ -55,13 +55,15 @@ const agentTab: WorkspaceTabDescriptor = {
   target: { kind: "agent", agentId: "agent-a" },
 };
 
-function buildContent(tab: WorkspaceTabDescriptor = agentTab, isSidePanel = false) {
+function buildContent(tab: WorkspaceTabDescriptor = agentTab, host: "main" | "explorer" = "main") {
   return buildWorkspacePaneContentModel({
     tab,
     normalizedServerId: "server-a",
     normalizedWorkspaceId: "workspace-a",
-    isSidePanel,
+    host,
     onOpenTab: vi.fn(),
+    onOpenPreferredTarget: vi.fn(),
+    onOpenTargetToSide: vi.fn(),
     onCloseCurrentTab: vi.fn(),
     onRetargetCurrentTab: vi.fn(),
     onSetCurrentTabState: vi.fn(),
@@ -123,7 +125,7 @@ describe("WorkspacePaneContent", () => {
     });
   });
 
-  it("exposes whether the pane is the Side panel to its content", () => {
+  it("exposes the pane host to its content", () => {
     container = document.createElement("div");
     document.body.appendChild(container);
     root = createRoot(container);
@@ -131,14 +133,14 @@ describe("WorkspacePaneContent", () => {
     act(() => {
       root?.render(
         <WorkspacePaneContent
-          content={buildContent(agentTab, true)}
+          content={buildContent(agentTab, "explorer")}
           isPaneFocused
           isWorkspaceFocused
         />,
       );
     });
 
-    expect(snapshots[0]?.paneContextValue.isSidePanel).toBe(true);
+    expect(snapshots[0]?.paneContextValue.host).toBe("explorer");
   });
 
   it("keeps pane content mounted when a draft tab is retargeted in place", () => {
diff --git a/packages/app/src/screens/workspace/workspace-pane-content.tsx b/packages/app/src/screens/workspace/workspace-pane-content.tsx
index aa02409f19..e9534769b3 100644
--- a/packages/app/src/screens/workspace/workspace-pane-content.tsx
+++ b/packages/app/src/screens/workspace/workspace-pane-content.tsx
@@ -12,6 +12,8 @@ import { ensurePanelsRegistered } from "@/panels/register-panels";
 import type { WorkspaceTabDescriptor } from "@/screens/workspace/workspace-tabs-types";
 import { RenderProfile } from "@/utils/render-profiler";
 import type { WorkspaceFileOpenRequest } from "@/workspace/file-open";
+import type { OpenInSidePaneSource } from "@/workspace-tabs/open-beside";
+import type { PaneHost } from "@/panels/panel-manifest";
 
 export interface WorkspacePaneContentModel {
   key: string;
@@ -23,9 +25,14 @@ export interface BuildWorkspacePaneContentModelInput {
   tab: WorkspaceTabDescriptor;
   normalizedServerId: string;
   normalizedWorkspaceId: string;
-  isSidePanel: boolean;
+  host: PaneHost;
   fileNavigationRevision?: number;
   onOpenTab: (target: WorkspaceTabDescriptor["target"]) => void;
+  onOpenPreferredTarget: (
+    target: WorkspaceTabDescriptor["target"],
+    source: OpenInSidePaneSource,
+  ) => void;
+  onOpenTargetToSide?: (target: WorkspaceTabDescriptor["target"]) => void;
   onCloseCurrentTab: () => void;
   onRetargetCurrentTab: (target: WorkspaceTabDescriptor["target"]) => void;
   onSetCurrentTabState: (state: WorkspaceTabDescriptor["state"]) => void;
@@ -37,9 +44,11 @@ export function buildWorkspacePaneContentModel({
   tab,
   normalizedServerId,
   normalizedWorkspaceId,
-  isSidePanel,
+  host,
   fileNavigationRevision,
   onOpenTab,
+  onOpenPreferredTarget,
+  onOpenTargetToSide,
   onCloseCurrentTab,
   onRetargetCurrentTab,
   onSetCurrentTabState,
@@ -55,12 +64,14 @@ export function buildWorkspacePaneContentModel({
     paneContextValue: {
       serverId: normalizedServerId,
       workspaceId: normalizedWorkspaceId,
-      isSidePanel,
+      host,
       tabId: tab.tabId,
       target: tab.target,
       state: tab.state,
       fileNavigationRevision,
       openTab: onOpenTab,
+      openPreferredTarget: onOpenPreferredTarget,
+      openTargetToSide: onOpenTargetToSide,
       closeCurrentTab: onCloseCurrentTab,
       retargetCurrentTab: onRetargetCurrentTab,
       setCurrentTabState: onSetCurrentTabState,
@@ -85,6 +96,8 @@ export function WorkspacePaneContent({
 }: WorkspacePaneContentProps) {
   const { Component, key, paneContextValue } = content;
   const openTab = useStableEvent(paneContextValue.openTab);
+  const openPreferredTarget = useStableEvent(paneContextValue.openPreferredTarget);
+  const openTargetToSide = useStableEvent(paneContextValue.openTargetToSide ?? (() => undefined));
   const closeCurrentTab = useStableEvent(paneContextValue.closeCurrentTab);
   const retargetCurrentTab = useStableEvent(paneContextValue.retargetCurrentTab);
   const setCurrentTabState = useStableEvent(paneContextValue.setCurrentTabState);
@@ -94,12 +107,14 @@ export function WorkspacePaneContent({
     () => ({
       serverId: paneContextValue.serverId,
       workspaceId: paneContextValue.workspaceId,
-      isSidePanel: paneContextValue.isSidePanel,
+      host: paneContextValue.host,
       tabId: paneContextValue.tabId,
       target: paneContextValue.target,
       state: paneContextValue.state,
       fileNavigationRevision: paneContextValue.fileNavigationRevision,
       openTab,
+      openPreferredTarget,
+      openTargetToSide: paneContextValue.openTargetToSide ? openTargetToSide : undefined,
       closeCurrentTab,
       retargetCurrentTab,
       setCurrentTabState,
@@ -111,13 +126,16 @@ export function WorkspacePaneContent({
       openFileInWorkspace,
       openImportSheet,
       openTab,
+      openPreferredTarget,
+      openTargetToSide,
       paneContextValue.serverId,
       paneContextValue.fileNavigationRevision,
       paneContextValue.tabId,
       paneContextValue.target,
       paneContextValue.state,
       paneContextValue.workspaceId,
-      paneContextValue.isSidePanel,
+      paneContextValue.host,
+      paneContextValue.openTargetToSide,
       retargetCurrentTab,
       setCurrentTabState,
     ],
diff --git a/packages/app/src/screens/workspace/workspace-panel-host.tsx b/packages/app/src/screens/workspace/workspace-panel-host.tsx
new file mode 100644
index 0000000000..9851fe610c
--- /dev/null
+++ b/packages/app/src/screens/workspace/workspace-panel-host.tsx
@@ -0,0 +1,138 @@
+import { memo, useCallback, useEffect, useMemo, useRef } from "react";
+import { RetainedPanel } from "@/components/retained-panel";
+import { useModifiedPanelTabIds } from "@/panels/panel-instance-attributes";
+import {
+  WorkspacePaneContent,
+  type WorkspacePaneContentModel,
+} from "@/screens/workspace/workspace-pane-content";
+import type { WorkspaceTabDescriptor } from "@/screens/workspace/workspace-tabs-types";
+import { useMountedTabSet } from "@/screens/workspace/use-mounted-tab-set";
+import { workspaceTabTargetsEqual } from "@/workspace-tabs/identity";
+import { RenderProfile } from "@/utils/render-profiler";
+
+interface WorkspacePanelHostProps {
+  paneId: string;
+  tabs: WorkspaceTabDescriptor[];
+  activeTabId: string | null;
+  normalizedServerId: string;
+  normalizedWorkspaceId: string;
+  isWorkspaceFocused: boolean;
+  isPaneFocused: boolean;
+  onFocusPane?: (paneId: string) => void;
+  buildPaneContentModel: (input: {
+    paneId: string;
+    tab: WorkspaceTabDescriptor;
+  }) => WorkspacePaneContentModel;
+}
+
+interface MountedTabProps {
+  tab: WorkspaceTabDescriptor;
+  paneId: string;
+  visible: boolean;
+  interactive: boolean;
+  isWorkspaceFocused: boolean;
+  onFocusPane?: (paneId: string) => void;
+  buildPaneContentModel: WorkspacePanelHostProps["buildPaneContentModel"];
+}
+
+const MountedTab = memo(function MountedTab({
+  tab,
+  paneId,
+  visible,
+  interactive,
+  isWorkspaceFocused,
+  onFocusPane,
+  buildPaneContentModel,
+}: MountedTabProps) {
+  const content = useMemo(
+    () => buildPaneContentModel({ paneId, tab }),
+    [buildPaneContentModel, paneId, tab],
+  );
+  const handleFocusPane = useCallback(() => onFocusPane?.(paneId), [onFocusPane, paneId]);
+  return (
+    <RenderProfile id={`DesktopMountedTab:${tab.kind}:${tab.tabId}`}>
+      <RetainedPanel active={visible}>
+        <WorkspacePaneContent
+          content={content}
+          isWorkspaceFocused={isWorkspaceFocused}
+          isPaneFocused={interactive}
+          onFocusPane={onFocusPane ? handleFocusPane : undefined}
+        />
+      </RetainedPanel>
+    </RenderProfile>
+  );
+});
+
+function useStableTabs(tabs: WorkspaceTabDescriptor[]) {
+  const cacheRef = useRef(new Map<string, WorkspaceTabDescriptor>());
+  const stableTabs = useMemo(() => {
+    const next = new Map<string, WorkspaceTabDescriptor>();
+    for (const tab of tabs) {
+      const cached = cacheRef.current.get(tab.tabId);
+      next.set(
+        tab.tabId,
+        cached &&
+          cached.key === tab.key &&
+          cached.kind === tab.kind &&
+          cached.state === tab.state &&
+          workspaceTabTargetsEqual(cached.target, tab.target)
+          ? cached
+          : tab,
+      );
+    }
+    return next;
+  }, [tabs]);
+  useEffect(() => {
+    cacheRef.current = stableTabs;
+  }, [stableTabs]);
+  return stableTabs;
+}
+
+/** Mounts panel implementations behind the shared host contract and retains modified tabs. */
+export function WorkspacePanelHost({
+  paneId,
+  tabs,
+  activeTabId,
+  normalizedServerId,
+  normalizedWorkspaceId,
+  isWorkspaceFocused,
+  isPaneFocused,
+  onFocusPane,
+  buildPaneContentModel,
+}: WorkspacePanelHostProps) {
+  const tabIds = useMemo(() => tabs.map((tab) => tab.tabId), [tabs]);
+  const retainedTabIds = useModifiedPanelTabIds({
+    serverId: normalizedServerId,
+    workspaceId: normalizedWorkspaceId,
+    tabIds,
+  });
+  const stableTabs = useStableTabs(tabs);
+  const { mountedTabIds } = useMountedTabSet({
+    activeTabId,
+    allTabIds: tabIds,
+    retainedTabIds,
+    cap: 3,
+  });
+  const mountedIds = useMemo(
+    () => tabIds.filter((tabId) => mountedTabIds.has(tabId)),
+    [mountedTabIds, tabIds],
+  );
+
+  return mountedIds.map((tabId) => {
+    const tab = stableTabs.get(tabId);
+    if (!tab) return null;
+    const visible = tabId === activeTabId;
+    return (
+      <MountedTab
+        key={tabId}
+        tab={tab}
+        paneId={paneId}
+        visible={visible}
+        interactive={isPaneFocused && visible}
+        isWorkspaceFocused={isWorkspaceFocused}
+        onFocusPane={onFocusPane}
+        buildPaneContentModel={buildPaneContentModel}
+      />
+    );
+  });
+}
diff --git a/packages/app/src/screens/workspace/workspace-screen.tsx b/packages/app/src/screens/workspace/workspace-screen.tsx
index 076792495a..b0d52df685 100644
--- a/packages/app/src/screens/workspace/workspace-screen.tsx
+++ b/packages/app/src/screens/workspace/workspace-screen.tsx
@@ -19,14 +19,12 @@ import { useQueryClient } from "@tanstack/react-query";
 import { useRouter, type Href } from "expo-router";
 import * as Clipboard from "expo-clipboard";
 import { useTranslation } from "react-i18next";
-import { ChevronDown, PanelRight } from "lucide-react-native";
+import { ChevronDown } from "lucide-react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { StyleSheet, withUnistyles } from "react-native-unistyles";
 import type { Theme } from "@/styles/theme";
 import invariant from "tiny-invariant";
 import { SidebarMenuToggle } from "@/components/headers/menu-header";
-import { HeaderToggleButton } from "@/components/headers/header-toggle-button";
-import { buttonControlHeight } from "@/components/ui/control-geometry";
 import { ScreenHeader } from "@/components/headers/screen-header";
 import { ScreenTitle } from "@/components/headers/screen-title";
 import { HostBadge } from "@/hosts/host-badge";
@@ -48,12 +46,16 @@ import { getOrCreateClientId } from "@/utils/client-id";
 import { selectIsAgentListOpen, usePanelStore } from "@/stores/panel-store";
 import { toggleDesktopSidebarsWithCheckoutIntent } from "@/utils/desktop-sidebar-toggle";
 import {
-  isSidePanelOpen,
-  openSupportingTab,
-  openTabInSidePanel,
-  toggleSidePanel,
-  useIsSidePanelOpen,
-} from "@/workspace-tabs/side-panel";
+  isExplorerSidebarOpen,
+  openExplorerSidebarView,
+  toggleExplorerSidebar,
+  useIsExplorerSidebarOpen,
+} from "@/workspace-tabs/explorer-sidebar";
+import {
+  openPreferredWorkspacePreview,
+  openPreferredWorkspaceTarget,
+  openWorkspaceTargetBeside,
+} from "@/workspace-tabs/open-beside";
 import { type ExplorerCheckoutContext } from "@/stores/explorer-checkout-context";
 import { traceInstant } from "@/performance/native-trace";
 import { useSessionStore, type WorkspaceDescriptor } from "@/stores/session-store";
@@ -64,7 +66,7 @@ import {
   findPaneById,
   getFocusedBrowserId,
   FOCUSED_PANE_PLACEMENT,
-  selectSidePanelPaneId,
+  selectExplorerSidebarPaneId,
   type WorkspaceLayout,
   type WorkspaceTabPlacement,
   useWorkspaceLayoutStore,
@@ -132,6 +134,13 @@ import {
 } from "@/screens/workspace/workspace-tab-menu";
 import { useDesktopBrowserNewTabRequests } from "@/desktop/browser/new-tab-requests";
 import type { WorkspaceTabDescriptor } from "@/screens/workspace/workspace-tabs-types";
+import {
+  resolveWorkspaceExplorerToggleOwner,
+  WorkspaceExplorerToggle,
+  WorkspaceExplorerSidebarToggle,
+  WorkspaceHeaderExplorerToggle,
+} from "@/screens/workspace/workspace-explorer-toggle";
+import { useHasWindowChromeObstruction } from "@/utils/desktop-window";
 import {
   resolveWorkspaceHeaderRenderState,
   type WorkspaceHeaderCheckoutState,
@@ -156,6 +165,7 @@ import {
 } from "@/screens/workspace/workspace-pane-content";
 import { useMountedTabSet } from "@/screens/workspace/use-mounted-tab-set";
 import { WorkspaceFocusProvider } from "@/workspace/focus";
+import { DiffDocumentWorkspaceCacheProvider } from "@/git/diff-document/workspace-cache";
 import type { NewTabSelection } from "@/workspace-tabs/new-tab";
 import {
   NewTabLauncherProvider,
@@ -194,7 +204,6 @@ import {
 import { RenderProfile } from "@/utils/render-profiler";
 import { useWorkspaceCheckoutStatus } from "@/screens/workspace/use-workspace-checkout-status";
 import { useHasPullRequest } from "@/panels/pull-request";
-import { fileStateForFilesView } from "@/panels/file/state";
 
 const WORKSPACE_FLOATING_PANEL_PORTAL_HOST_PREFIX = "workspace-floating-panels";
 const EMPTY_UI_TABS: WorkspaceTab[] = [];
@@ -235,13 +244,8 @@ function buildWorkspaceFileLocation(
 
 const ThemedLoadingSpinner = withUnistyles(LoadingSpinner);
 const ThemedChevronDown = withUnistyles(ChevronDown);
-const ThemedPanelRight = withUnistyles(PanelRight);
 
-const foregroundColorMapping = (theme: Theme) => ({ color: theme.colors.foreground });
 const mutedColorMapping = (theme: Theme) => ({ color: theme.colors.foregroundMuted });
-const extraMutedColorMapping = (theme: Theme) => ({
-  color: theme.colors.foregroundExtraMuted,
-});
 
 const GATED_WORKSPACE_HEADER_LEFT = <SidebarMenuToggle />;
 
@@ -328,7 +332,7 @@ function getFallbackTabOptionLabel(
   if (tab.target.kind === "file") {
     return tab.target.path.split("/").findLast(Boolean) ?? tab.target.path;
   }
-  if (tab.target.kind === "working_diff") {
+  if (tab.target.kind === "working_diff" || tab.target.kind === "changes_tree") {
     return labels.changes;
   }
   if (tab.target.kind === "files") {
@@ -381,7 +385,7 @@ function getFallbackTabOptionDescription(
   if (tab.target.kind === "commit_diff") {
     return tab.target.sha.slice(0, 7);
   }
-  if (tab.target.kind === "working_diff") {
+  if (tab.target.kind === "working_diff" || tab.target.kind === "changes_tree") {
     return labels.changes;
   }
   if (tab.target.kind === "files") {
@@ -1283,6 +1287,20 @@ function WorkspaceScreenGateFrame({ children }: { children: ReactNode }) {
   );
 }
 
+function WorkspaceContentProviders({
+  children,
+  workspaceKey,
+}: {
+  children: ReactNode;
+  workspaceKey: string | null;
+}) {
+  return (
+    <WorkspaceFocusProvider workspaceKey={workspaceKey}>
+      <DiffDocumentWorkspaceCacheProvider>{children}</DiffDocumentWorkspaceCacheProvider>
+    </WorkspaceFocusProvider>
+  );
+}
+
 function WorkspacePanelContent({
   launcher,
   content,
@@ -1473,7 +1491,7 @@ function useWorkspaceTerminalTabActions({
 function resolveCommandCenterPanelTarget(target: WorkspacePanelTarget): WorkspaceTabTarget {
   switch (target) {
     case "changes":
-      return { kind: "working_diff" };
+      return { kind: "changes_tree" };
     case "files":
       return { kind: "files" };
     case "pull-request":
@@ -1481,6 +1499,25 @@ function resolveCommandCenterPanelTarget(target: WorkspacePanelTarget): Workspac
   }
 }
 
+function useLastMainPane(input: {
+  workspaceKey: string | null;
+  layout: WorkspaceLayout | null;
+  explorerSidebarPaneId: string | null;
+}) {
+  const lastMainPaneRef = useRef<{ workspaceKey: string | null; paneId: string | null }>({
+    workspaceKey: null,
+    paneId: null,
+  });
+  if (lastMainPaneRef.current.workspaceKey !== input.workspaceKey) {
+    lastMainPaneRef.current = { workspaceKey: input.workspaceKey, paneId: null };
+  }
+  const focusedPaneId = input.layout?.focusedPaneId ?? null;
+  if (focusedPaneId && focusedPaneId !== input.explorerSidebarPaneId) {
+    lastMainPaneRef.current.paneId = focusedPaneId;
+  }
+  return lastMainPaneRef;
+}
+
 function WorkspaceScreenContent({
   serverId,
   workspaceId,
@@ -1492,6 +1529,11 @@ function WorkspaceScreenContent({
   const _insets = useSafeAreaInsets();
   const toast = useToast();
   const isMobile = useIsCompactFormFactor();
+  const hasMacTrafficLights = useHasWindowChromeObstruction("top-left");
+  const explorerToggleOwner = resolveWorkspaceExplorerToggleOwner({
+    isMobile,
+    hasMacTrafficLights,
+  });
   const isFocusModeEnabled = usePanelStore((state) => state.desktop.focusModeEnabled);
   const toggleFocusMode = usePanelStore((state) => state.toggleFocusMode);
 
@@ -1721,21 +1763,20 @@ function WorkspaceScreenContent({
     };
   }, [isGitCheckout, normalizedServerId, workspaceDirectory]);
 
-  const isSidePanelShowing = useIsSidePanelOpen({
+  const isExplorerSidebarShowing = useIsExplorerSidebarOpen({
     isCompact: isMobile,
     workspaceKey: persistenceKey,
   });
-
-  const sidePanelToggleAccessibilityState = useMemo(
-    () => ({ expanded: isSidePanelShowing }),
-    [isSidePanelShowing],
+  const explorerSidebarToggleAccessibilityState = useMemo(
+    () => ({ expanded: isExplorerSidebarShowing }),
+    [isExplorerSidebarShowing],
   );
 
   useEffect(() => {
     // Back dismisses the compact overlay only. On a wide native layout the
     // explorer is a tab, `showMobileAgent` has no rendered consumer, and
     // returning true would swallow Back with nothing to show for it.
-    if (!isRouteFocused || isWeb || !isMobile || !isSidePanelShowing) {
+    if (!isRouteFocused || isWeb || !isMobile || !isExplorerSidebarShowing) {
       return;
     }
 
@@ -1745,14 +1786,20 @@ function WorkspaceScreenContent({
     });
 
     return () => handler.remove();
-  }, [isSidePanelShowing, isMobile, isRouteFocused, showMobileAgent]);
+  }, [isExplorerSidebarShowing, isMobile, isRouteFocused, showMobileAgent]);
 
   const workspaceLayout = useWorkspaceLayoutStore((state) =>
     persistenceKey ? (state.layoutByWorkspace[persistenceKey] ?? null) : null,
   );
-  const sidePanelPaneId = useWorkspaceLayoutStore((state) =>
-    persistenceKey ? selectSidePanelPaneId(state, persistenceKey) : null,
+  const explorerSidebarPaneId = useWorkspaceLayoutStore((state) =>
+    persistenceKey ? selectExplorerSidebarPaneId(state, persistenceKey) : null,
   );
+  const lastMainPaneRef = useLastMainPane({
+    workspaceKey: persistenceKey,
+    layout: workspaceLayout,
+    explorerSidebarPaneId,
+  });
+  const lastMainPaneId = lastMainPaneRef.current.paneId;
   const hasHydratedWorkspaceLayoutStore = useWorkspaceLayoutStoreHydrated();
   const workspaceSetupSnapshot = useWorkspaceSetupStore((state) =>
     persistenceKey ? (state.snapshots[persistenceKey] ?? null) : null,
@@ -1780,10 +1827,9 @@ function WorkspaceScreenContent({
       openTab({ workspaceKey, target, intent: "background", placement }),
     [openTab],
   );
-  const openInSidePanelByDefault = useSettings(
-    (settings) => settings.openSupportingTabsInSidePanel,
-  );
+  const openInSidePane = useSettings((settings) => settings.openInSidePane);
   const focusWorkspaceTab = useWorkspaceLayoutStore((state) => state.focusTab);
+  const selectWorkspaceTabInPane = useWorkspaceLayoutStore((state) => state.selectTabInPane);
   const closeWorkspaceTab = useWorkspaceLayoutStore((state) => state.closeTab);
   const unpinWorkspaceAgent = useWorkspaceLayoutStore((state) => state.unpinAgent);
   const hideWorkspaceAgent = useWorkspaceLayoutStore((state) => state.hideAgent);
@@ -1793,8 +1839,8 @@ function WorkspaceScreenContent({
   const splitWorkspacePaneEmpty = useWorkspaceLayoutStore((state) => state.splitPaneEmpty);
   const moveWorkspaceTabToPane = useWorkspaceLayoutStore((state) => state.moveTabToPane);
   const closeWorkspacePane = useWorkspaceLayoutStore((state) => state.closePane);
-  const handleToggleSidePanel = useCallback(() => {
-    toggleSidePanel({
+  const handleToggleExplorerSidebar = useCallback(() => {
+    toggleExplorerSidebar({
       isCompact: isMobile,
       workspaceKey: persistenceKey,
       checkout: activeExplorerCheckout,
@@ -2014,6 +2060,14 @@ function WorkspaceScreenContent({
     },
     [focusWorkspaceTab, persistenceKey],
   );
+  const selectTabInPane = useCallback(
+    (paneId: string, tabId: string) => {
+      if (persistenceKey) {
+        selectWorkspaceTabInPane(persistenceKey, paneId, tabId);
+      }
+    },
+    [persistenceKey, selectWorkspaceTabInPane],
+  );
   const handleImportedAgent = useCallback(
     (agentId: string) => {
       if (!persistenceKey) {
@@ -2125,7 +2179,7 @@ function WorkspaceScreenContent({
     ],
   );
 
-  const handleOpenAssistantFileInSidePanel = useCallback(
+  const handleOpenPreferredAssistantFile = useCallback(
     (input: { location: WorkspaceFileLocation; parentTabId?: string | null }) => {
       const location = normalizeWorkspaceFileLocation(input.location);
       if (!location) {
@@ -2138,11 +2192,12 @@ function WorkspaceScreenContent({
         return;
       }
 
-      const tabId = openSupportingTab({
+      const tabId = openPreferredWorkspaceTarget({
         isCompact: isMobile,
         workspaceKey: persistenceKey,
         target: createWorkspaceFileTabTarget(location),
-        openInSidePanelByDefault,
+        source: "chatFiles",
+        preferences: openInSidePane,
         parentTabId: input.parentTabId,
       });
       if (tabId) {
@@ -2153,7 +2208,7 @@ function WorkspaceScreenContent({
     [
       isMobile,
       navigateToTabId,
-      openInSidePanelByDefault,
+      openInSidePane,
       persistenceKey,
       requestFileNavigation,
       showMobileAgent,
@@ -2175,7 +2230,21 @@ function WorkspaceScreenContent({
       focusWorkspacePane(persistenceKey, paneId);
     }
     if (request.disposition === "side") {
-      handleOpenAssistantFileInSidePanel({
+      const location = normalizeWorkspaceFileLocation(request.location);
+      if (!location || !persistenceKey) return;
+      const tabId = openWorkspaceTargetBeside({
+        workspaceKey: persistenceKey,
+        target: createWorkspaceFileTabTarget(location),
+        parentTabId,
+      });
+      if (tabId) {
+        requestFileNavigation(tabId);
+        navigateToTabId(tabId);
+      }
+      return;
+    }
+    if (request.disposition === "preferred") {
+      handleOpenPreferredAssistantFile({
         location: request.location,
         parentTabId,
       });
@@ -2242,9 +2311,9 @@ function WorkspaceScreenContent({
     }),
     [t],
   );
-  const sidePanelToggleLabel = isSidePanelShowing
-    ? t("workspace.tabs.sidePanel.close")
-    : t("workspace.tabs.sidePanel.open");
+  const explorerSidebarToggleLabel = isExplorerSidebarShowing
+    ? t("workspace.tabs.explorerSidebar.close")
+    : t("workspace.tabs.explorerSidebar.open");
 
   const activeTabKey = useMemo(() => activeTabId ?? "", [activeTabId]);
   const tabFallbackLabels = useMemo(
@@ -2711,13 +2780,8 @@ function WorkspaceScreenContent({
     if (!target) {
       return;
     }
-    openSupportingTab({
-      isCompact: isMobile,
-      workspaceKey: persistenceKey,
-      target,
-      openInSidePanelByDefault,
-    });
-  }, [isMobile, normalizedWorkspaceId, openInSidePanelByDefault, persistenceKey]);
+    openWorkspaceTabFocused(persistenceKey, target, FOCUSED_PANE_PLACEMENT);
+  }, [normalizedWorkspaceId, openWorkspaceTabFocused, persistenceKey]);
 
   const handleBulkCloseTabs = useCallback(
     async (input: {
@@ -2876,7 +2940,7 @@ function WorkspaceScreenContent({
       // Ask before tearing anything down. The layout refuses to dismiss the final
       // visible pane, and discovering that after closing its tabs would cost the
       // user the tabs and leave the pane standing.
-      if (!pane || !canDismissPaneInLayout(workspaceLayout, paneId)) {
+      if (!pane || !canDismissPaneInLayout(workspaceLayout, paneId, explorerSidebarPaneId)) {
         return;
       }
       const tabsToClose = pane.tabIds.flatMap((tabId) => {
@@ -2900,6 +2964,7 @@ function WorkspaceScreenContent({
       persistenceKey,
       t,
       workspaceLayout,
+      explorerSidebarPaneId,
     ],
   );
 
@@ -2910,19 +2975,21 @@ function WorkspaceScreenContent({
 
       const target = resolveCommandCenterPanelTarget(action.target);
       if (action.placement === "supporting") {
-        openSupportingTab({
-          isCompact: isMobile,
-          workspaceKey: persistenceKey,
-          target,
-          openInSidePanelByDefault,
-        });
+        if (action.target === "files" || action.target === "changes") {
+          openExplorerSidebarView({
+            isCompact: isMobile,
+            workspaceKey: persistenceKey,
+            checkout: activeExplorerCheckout,
+            view: action.target === "files" ? "files" : "changes",
+          });
+          return true;
+        }
+        openWorkspaceTabFocused(persistenceKey, target, FOCUSED_PANE_PLACEMENT);
         return true;
       }
-      if (action.placement === "side-panel") {
-        openTabInSidePanel({
-          isCompact: isMobile,
+      if (action.placement === "side-pane") {
+        openWorkspaceTargetBeside({
           workspaceKey: persistenceKey,
-          checkout: activeExplorerCheckout,
           target,
         });
         return true;
@@ -2939,7 +3006,6 @@ function WorkspaceScreenContent({
       activeExplorerCheckout,
       focusedPaneTabState.pane?.id,
       isMobile,
-      openInSidePanelByDefault,
       openWorkspaceTabFocused,
       persistenceKey,
     ],
@@ -3074,17 +3140,22 @@ function WorkspaceScreenContent({
           return true;
         case "workspace.tab.target.changes":
           if (persistenceKey && isGitCheckout) {
-            openSupportingTab({
+            openExplorerSidebarView({
               isCompact: isMobile,
               workspaceKey: persistenceKey,
-              target: { kind: "working_diff" },
-              openInSidePanelByDefault,
+              checkout: activeExplorerCheckout,
+              view: "changes",
             });
           }
           return true;
         case "workspace.tab.target.files":
           if (persistenceKey) {
-            openWorkspaceTabFocused(persistenceKey, { kind: "files" }, paneLocalPlacement(paneId));
+            openExplorerSidebarView({
+              isCompact: isMobile,
+              workspaceKey: persistenceKey,
+              checkout: activeExplorerCheckout,
+              view: "files",
+            });
           }
           return true;
         default:
@@ -3093,12 +3164,11 @@ function WorkspaceScreenContent({
     },
     [
       focusedPaneTabState.pane?.id,
+      activeExplorerCheckout,
       handleCreateBrowserTab,
       handleCreateDraftTab,
       isGitCheckout,
       isMobile,
-      openInSidePanelByDefault,
-      openWorkspaceTabFocused,
       persistenceKey,
     ],
   );
@@ -3106,7 +3176,7 @@ function WorkspaceScreenContent({
   const handleWorkspaceSidebarAction = useCallback(
     (action: KeyboardActionDefinition): boolean => {
       if (action.id === "sidebar.toggle.right") {
-        handleToggleSidePanel();
+        handleToggleExplorerSidebar();
         return true;
       }
       if (action.id !== "sidebar.toggle.both") {
@@ -3117,17 +3187,17 @@ function WorkspaceScreenContent({
       const panel = usePanelStore.getState();
       toggleDesktopSidebarsWithCheckoutIntent({
         isAgentListOpen: selectIsAgentListOpen(panel, { isCompact: isMobile }),
-        isExplorerOpen: isSidePanelOpen({
+        isExplorerOpen: isExplorerSidebarOpen({
           isCompact: isMobile,
           workspaceKey: persistenceKey,
         }),
         openAgentList: () => panel.openAgentListForLayout({ isCompact: isMobile }),
         closeAgentList: () => panel.closeAgentListForLayout({ isCompact: isMobile }),
-        toggleExplorer: handleToggleSidePanel,
+        toggleExplorer: handleToggleExplorerSidebar,
       });
       return true;
     },
-    [handleToggleSidePanel, isMobile, persistenceKey],
+    [handleToggleExplorerSidebar, isMobile, persistenceKey],
   );
 
   const handleWorkspacePaneAction = useCallback(
@@ -3375,8 +3445,12 @@ function WorkspaceScreenContent({
         tab: input.tab,
         normalizedServerId,
         normalizedWorkspaceId,
-        isSidePanel:
-          canRenderDesktopPaneSplits && input.paneId !== null && input.paneId === sidePanelPaneId,
+        host:
+          canRenderDesktopPaneSplits &&
+          input.paneId !== null &&
+          input.paneId === explorerSidebarPaneId
+            ? "explorer"
+            : "main",
         fileNavigationRevision: fileNavigationRevisionByTabId[input.tab.tabId] ?? 0,
         onOpenTab: (target) => {
           if (!persistenceKey) {
@@ -3392,6 +3466,37 @@ function WorkspaceScreenContent({
             navigateToTabId(tabId);
           }
         },
+        onOpenPreferredTarget: (target, source) => {
+          if (!persistenceKey) return;
+          const tabId = openPreferredWorkspacePreview({
+            isCompact: isMobile,
+            workspaceKey: persistenceKey,
+            serverId: normalizedServerId,
+            workspaceId: normalizedWorkspaceId,
+            explorerSidebarPaneId,
+            lastMainPaneId,
+            target,
+            source,
+            preferences: openInSidePane,
+          });
+          if (tabId && target.kind === "file") requestFileNavigation(tabId);
+          if (tabId) navigateToTabId(tabId);
+        },
+        onOpenTargetToSide:
+          canRenderDesktopPaneSplits &&
+          input.paneId !== null &&
+          input.paneId === explorerSidebarPaneId
+            ? (target) => {
+                if (!persistenceKey) return;
+                const tabId = openWorkspaceTargetBeside({
+                  workspaceKey: persistenceKey,
+                  target,
+                  parentTabId: input.tab.tabId,
+                });
+                if (tabId && target.kind === "file") requestFileNavigation(tabId);
+                if (tabId) navigateToTabId(tabId);
+              }
+            : undefined,
         onCloseCurrentTab: () => {
           void handleCloseTabById(input.tab.tabId);
         },
@@ -3399,16 +3504,7 @@ function WorkspaceScreenContent({
           if (!persistenceKey) {
             return;
           }
-          if (target.kind === "file" && input.tab.target.kind === "files") {
-            replaceWorkspaceTabTarget(
-              persistenceKey,
-              input.tab.tabId,
-              target,
-              fileStateForFilesView,
-            );
-          } else {
-            replaceWorkspaceTabTarget(persistenceKey, input.tab.tabId, target);
-          }
+          replaceWorkspaceTabTarget(persistenceKey, input.tab.tabId, target);
         },
         onSetCurrentTabState: (state) => {
           if (persistenceKey) {
@@ -3434,11 +3530,15 @@ function WorkspaceScreenContent({
       normalizedWorkspaceId,
       canRenderDesktopPaneSplits,
       openImportSheet,
+      openInSidePane,
+      isMobile,
+      requestFileNavigation,
       revealWorkspaceChildTab,
       persistenceKey,
       replaceWorkspaceTabTarget,
       setWorkspaceTabState,
-      sidePanelPaneId,
+      explorerSidebarPaneId,
+      lastMainPaneId,
     ],
   );
   const focusedPaneId = useMemo(
@@ -3616,44 +3716,26 @@ function WorkspaceScreenContent({
         {!isMobile && workspaceDirectory ? (
           <>
             <WorkspaceActions serverId={normalizedServerId} cwd={workspaceDirectory} />
-            <HeaderToggleButton
-              testID="workspace-explorer-toggle"
-              onPress={handleToggleSidePanel}
-              tooltipLabel={t("workspace.tabs.sidePanel.toggle")}
+            <WorkspaceHeaderExplorerToggle
+              owner={explorerToggleOwner}
+              onPress={handleToggleExplorerSidebar}
+              label={explorerSidebarToggleLabel}
+              tooltipLabel={t("workspace.tabs.explorerSidebar.toggle")}
               tooltipKeys={EXPLORER_TOGGLE_KEYS}
-              tooltipSide="left"
               style={styles.compactHeaderActionButton}
-              accessible
-              accessibilityRole="button"
-              accessibilityLabel={sidePanelToggleLabel}
-              accessibilityState={sidePanelToggleAccessibilityState}
-            >
-              {({ hovered }) => {
-                const colorMapping = hovered ? foregroundColorMapping : extraMutedColorMapping;
-                return <ThemedPanelRight size={16} uniProps={colorMapping} />;
-              }}
-            </HeaderToggleButton>
+              accessibilityState={explorerSidebarToggleAccessibilityState}
+            />
           </>
         ) : null}
         {isMobile ? (
-          <HeaderToggleButton
-            testID="workspace-explorer-toggle"
-            onPress={handleToggleSidePanel}
-            tooltipLabel={t("workspace.tabs.sidePanel.toggle")}
+          <WorkspaceExplorerToggle
+            onPress={handleToggleExplorerSidebar}
+            label={explorerSidebarToggleLabel}
+            tooltipLabel={t("workspace.tabs.explorerSidebar.toggle")}
             tooltipKeys={EXPLORER_TOGGLE_KEYS}
-            tooltipSide="left"
-            style={styles.headerActionButton}
-            accessible
-            accessibilityRole="button"
-            accessibilityLabel={sidePanelToggleLabel}
-            accessibilityState={sidePanelToggleAccessibilityState}
-          >
-            {({ hovered }) => {
-              const colorMapping = hovered ? foregroundColorMapping : mutedColorMapping;
-              // Matches the ghost scripts Play icon in the same header (16 / 1.5).
-              return <ThemedPanelRight size={16} strokeWidth={1.5} uniProps={colorMapping} />;
-            }}
-          </HeaderToggleButton>
+            accessibilityState={explorerSidebarToggleAccessibilityState}
+            mobile
+          />
         ) : null}
       </View>
     ),
@@ -3668,9 +3750,10 @@ function WorkspaceScreenContent({
       handleScriptTerminalStarted,
       handleViewScriptTerminal,
       handleOpenUrlInBrowserTab,
-      handleToggleSidePanel,
-      sidePanelToggleLabel,
-      sidePanelToggleAccessibilityState,
+      handleToggleExplorerSidebar,
+      explorerSidebarToggleLabel,
+      explorerSidebarToggleAccessibilityState,
+      explorerToggleOwner,
       t,
     ],
   );
@@ -3679,6 +3762,25 @@ function WorkspaceScreenContent({
     () => shouldShowWorkspaceScreenHeader({ isFocusModeEnabled, isMobile }),
     [isFocusModeEnabled, isMobile],
   );
+  const renderExplorerSidebarHeaderAction = useCallback(
+    () => (
+      <WorkspaceExplorerSidebarToggle
+        owner={explorerToggleOwner}
+        onPress={handleToggleExplorerSidebar}
+        label={explorerSidebarToggleLabel}
+        tooltipLabel={t("workspace.tabs.explorerSidebar.toggle")}
+        tooltipKeys={EXPLORER_TOGGLE_KEYS}
+        accessibilityState={explorerSidebarToggleAccessibilityState}
+      />
+    ),
+    [
+      explorerSidebarToggleAccessibilityState,
+      explorerSidebarToggleLabel,
+      explorerToggleOwner,
+      handleToggleExplorerSidebar,
+      t,
+    ],
+  );
   const createTerminalDisabled = useMemo(
     () => createTerminalMutation.isPending || pendingTerminalCreateInput !== null,
     [createTerminalMutation.isPending, pendingTerminalCreateInput],
@@ -3710,88 +3812,9 @@ function WorkspaceScreenContent({
       `${WORKSPACE_FLOATING_PANEL_PORTAL_HOST_PREFIX}:${normalizedServerId}:${normalizedWorkspaceId}`,
     [normalizedServerId, normalizedWorkspaceId],
   );
-  const desktopSplitContent = useMemo(() => {
-    if (!canRenderDesktopPaneSplits || !workspaceLayout || !persistenceKey) {
-      return null;
-    }
-    return (
-      <SplitContainer
-        layout={workspaceLayout}
-        focusModeEnabled={desktopFocusModeEnabled}
-        onExitFocusMode={toggleFocusMode}
-        workspaceKey={persistenceKey}
-        normalizedServerId={normalizedServerId}
-        normalizedWorkspaceId={normalizedWorkspaceId}
-        isWorkspaceFocused={isRouteFocused}
-        uiTabs={uiTabs}
-        hoveredCloseTabKey={hoveredCloseTabKey}
-        setHoveredCloseTabKey={setHoveredCloseTabKey}
-        closingTabIds={closingTabIds}
-        onNavigateTab={navigateToTabId}
-        onCloseTab={handleCloseTabById}
-        onCopyResumeCommand={handleCopyResumeCommand}
-        onCopyAgentId={handleCopyAgentId}
-        onCopyTerminalId={handleCopyTerminalId}
-        onCopyFilePath={handleCopyFilePath}
-        onReloadAgent={handleReloadAgent}
-        onRenameTab={handleRenameTab}
-        onCloseTabsToLeft={handleCloseTabsToLeftInPane}
-        onCloseTabsToRight={handleCloseTabsToRightInPane}
-        onCloseOtherTabs={handleCloseOtherTabsInPane}
-        onCreateNewTab={handleCreateNewTab}
-        buildPaneContentModel={buildDesktopPaneContentModel}
-        onFocusPane={handleFocusPane}
-        onSplitPane={handleSplitPane}
-        onSplitPaneEmpty={handleCreateEmptySplit}
-        onMoveTabToPane={handleMoveTabToPane}
-        onResizeSplit={handleResizePaneSplit}
-        onReorderTabsInPane={handleReorderTabsInPane}
-      />
-    );
-  }, [
-    canRenderDesktopPaneSplits,
-    workspaceLayout,
-    persistenceKey,
-    desktopFocusModeEnabled,
-    toggleFocusMode,
-    normalizedServerId,
-    normalizedWorkspaceId,
-    isRouteFocused,
-    uiTabs,
-    hoveredCloseTabKey,
-    closingTabIds,
-    navigateToTabId,
-    handleCloseTabById,
-    handleCopyResumeCommand,
-    handleCopyAgentId,
-    handleCopyTerminalId,
-    handleCopyFilePath,
-    handleReloadAgent,
-    handleRenameTab,
-    handleCloseTabsToLeftInPane,
-    handleCloseTabsToRightInPane,
-    handleCloseOtherTabsInPane,
-    handleCreateNewTab,
-    buildDesktopPaneContentModel,
-    handleFocusPane,
-    handleSplitPane,
-    handleCreateEmptySplit,
-    handleMoveTabToPane,
-    handleResizePaneSplit,
-    handleReorderTabsInPane,
-  ]);
-  const desktopContent = desktopSplitContent ?? content;
-
-  const workspacePanelContent = (
-    <WorkspacePanelContent
-      launcher={newTabLauncher}
-      content={isMobile ? content : desktopContent}
-    />
-  );
-
-  const workspaceCenterColumn = (
-    <View style={styles.centerColumn}>
-      {showScreenHeader && (
+  const renderWorkspaceScreenHeader = useCallback(
+    () =>
+      showScreenHeader ? (
         <ScreenHeader
           left={
             <>
@@ -3828,7 +3851,127 @@ function WorkspaceScreenContent({
           }
           right={headerRight}
         />
-      )}
+      ) : null,
+    [
+      canOpenImportSheet,
+      createTerminalDisabled,
+      currentBranchName,
+      handleCopyBranchName,
+      handleCopyWorkspacePath,
+      handleCreateBrowserTab,
+      handleCreateDraftTab,
+      handleCreateTerminal,
+      handleCreateTerminalWithProfile,
+      handleOpenSetupTab,
+      handleOpenUrlInBrowserTab,
+      handleScriptTerminalStarted,
+      handleViewScriptTerminal,
+      headerRight,
+      isMobile,
+      isWorkspaceHeaderLoading,
+      liveTerminalIds,
+      normalizedServerId,
+      normalizedWorkspaceId,
+      openImportSheet,
+      showCreateBrowserTab,
+      showScreenHeader,
+      showWorkspaceSetup,
+      workspaceDirectory,
+      workspaceHeaderSubtitle,
+      workspaceHeaderTitle,
+      isWorkspaceHeaderSubtitleDistinct,
+      workspaceScripts,
+    ],
+  );
+  const desktopSplitContent = useMemo(() => {
+    if (!canRenderDesktopPaneSplits || !workspaceLayout || !persistenceKey) {
+      return null;
+    }
+    return (
+      <SplitContainer
+        layout={workspaceLayout}
+        renderMainHeader={renderWorkspaceScreenHeader}
+        renderExplorerSidebarHeaderAction={renderExplorerSidebarHeaderAction}
+        focusModeEnabled={desktopFocusModeEnabled}
+        onExitFocusMode={toggleFocusMode}
+        workspaceKey={persistenceKey}
+        normalizedServerId={normalizedServerId}
+        normalizedWorkspaceId={normalizedWorkspaceId}
+        isWorkspaceFocused={isRouteFocused}
+        uiTabs={uiTabs}
+        hoveredCloseTabKey={hoveredCloseTabKey}
+        setHoveredCloseTabKey={setHoveredCloseTabKey}
+        closingTabIds={closingTabIds}
+        onNavigateTab={navigateToTabId}
+        onCloseTab={handleCloseTabById}
+        onCopyResumeCommand={handleCopyResumeCommand}
+        onCopyAgentId={handleCopyAgentId}
+        onCopyTerminalId={handleCopyTerminalId}
+        onCopyFilePath={handleCopyFilePath}
+        onReloadAgent={handleReloadAgent}
+        onRenameTab={handleRenameTab}
+        onCloseTabsToLeft={handleCloseTabsToLeftInPane}
+        onCloseTabsToRight={handleCloseTabsToRightInPane}
+        onCloseOtherTabs={handleCloseOtherTabsInPane}
+        onCreateNewTab={handleCreateNewTab}
+        buildPaneContentModel={buildDesktopPaneContentModel}
+        onFocusPane={handleFocusPane}
+        onSplitPane={handleSplitPane}
+        onSplitPaneEmpty={handleCreateEmptySplit}
+        onMoveTabToPane={handleMoveTabToPane}
+        onSelectTabInPane={selectTabInPane}
+        onResizeSplit={handleResizePaneSplit}
+        onReorderTabsInPane={handleReorderTabsInPane}
+      />
+    );
+  }, [
+    canRenderDesktopPaneSplits,
+    workspaceLayout,
+    renderWorkspaceScreenHeader,
+    renderExplorerSidebarHeaderAction,
+    persistenceKey,
+    desktopFocusModeEnabled,
+    toggleFocusMode,
+    normalizedServerId,
+    normalizedWorkspaceId,
+    isRouteFocused,
+    uiTabs,
+    hoveredCloseTabKey,
+    closingTabIds,
+    navigateToTabId,
+    handleCloseTabById,
+    handleCopyResumeCommand,
+    handleCopyAgentId,
+    handleCopyTerminalId,
+    handleCopyFilePath,
+    handleReloadAgent,
+    handleRenameTab,
+    handleCloseTabsToLeftInPane,
+    handleCloseTabsToRightInPane,
+    handleCloseOtherTabsInPane,
+    handleCreateNewTab,
+    buildDesktopPaneContentModel,
+    handleFocusPane,
+    handleSplitPane,
+    handleCreateEmptySplit,
+    handleMoveTabToPane,
+    selectTabInPane,
+    handleResizePaneSplit,
+    handleReorderTabsInPane,
+  ]);
+  const desktopContent = desktopSplitContent ?? content;
+  const rendersDesktopSplitContent = !isMobile && desktopSplitContent !== null;
+
+  const workspacePanelContent = (
+    <WorkspacePanelContent
+      launcher={newTabLauncher}
+      content={isMobile ? content : desktopContent}
+    />
+  );
+
+  const workspaceCenterColumn = (
+    <View style={styles.centerColumn}>
+      {rendersDesktopSplitContent ? null : renderWorkspaceScreenHeader()}
 
       {isMobile ? (
         <MobileWorkspaceTabSwitcher
@@ -3927,9 +4070,9 @@ function WorkspaceScreenContent({
     return gatedWorkspaceScreen;
   }
   return (
-    <WorkspaceFocusProvider workspaceKey={persistenceKey}>
+    <WorkspaceContentProviders key={persistenceKey} workspaceKey={persistenceKey}>
       {renderedWorkspaceScreen}
-    </WorkspaceFocusProvider>
+    </WorkspaceContentProviders>
   );
 }
 
@@ -4025,24 +4168,11 @@ const styles = StyleSheet.create((theme) => ({
       md: theme.spacing[2],
     },
   },
-  headerActionButton: {
-    paddingVertical: theme.spacing[2],
-    paddingHorizontal: theme.spacing[2],
-    borderRadius: theme.borderRadius.lg,
-  },
   compactHeaderActionButton: {
-    width: {
-      xs: theme.spacing[8],
-      md: buttonControlHeight.xs,
+    marginRight: {
+      xs: 0,
+      md: -theme.spacing[2],
     },
-    height: {
-      xs: theme.spacing[8],
-      md: buttonControlHeight.xs,
-    },
-    padding: 0,
-    borderRadius: theme.borderRadius.lg,
-    alignItems: "center",
-    justifyContent: "center",
   },
   compactHeaderMenuCluster: {
     flexDirection: "row",
diff --git a/packages/app/src/screens/workspace/workspace-scripts-button.tsx b/packages/app/src/screens/workspace/workspace-scripts-button.tsx
index a814e14c4c..59ddd9a0fb 100644
--- a/packages/app/src/screens/workspace/workspace-scripts-button.tsx
+++ b/packages/app/src/screens/workspace/workspace-scripts-button.tsx
@@ -1,4 +1,4 @@
-import { Fragment, useCallback, useEffect, useMemo, useRef, type ReactElement } from "react";
+import { useCallback, useEffect, useMemo, useRef, type ReactElement } from "react";
 import type { GestureResponderEvent } from "react-native";
 import { Pressable, Text, View } from "react-native";
 import * as Clipboard from "expo-clipboard";
@@ -22,11 +22,11 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuSeparator,
   DropdownMenuTrigger,
   useDropdownMenuClose,
 } from "@/components/ui/dropdown-menu";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { MENU_ITEM_HEIGHT } from "@/components/ui/menu/menu-geometry";
 import { useToast } from "@/contexts/toast-context";
 import { openServiceUrl } from "@/utils/open-service-url";
 import {
@@ -36,7 +36,8 @@ import {
 } from "@/utils/workspace-script-links";
 import type { Theme } from "@/styles/theme";
 import { useWorkspaceServiceRoutePreferencesStore } from "@/workspace-service-routes/store";
-import { buttonControlHeight } from "@/components/ui/control-geometry";
+import { buttonControlHeight, HEADER_CONTROL_HEIGHT } from "@/components/ui/control-geometry";
+import { extraMutedIconColorMapping } from "@/components/ui/icon-color";
 
 type RowActionIcon = "copy" | "open" | "restart" | "start" | "stop" | "terminal";
 
@@ -494,7 +495,6 @@ function ScriptRow({
       accessibilityLabel={t("workspace.scripts.accessibility.script", {
         scriptName: script.scriptName,
       })}
-      style={styles.scriptItem}
     >
       <View style={styles.scriptHeader}>
         <ScriptIcon size={14} uniProps={iconColorMapping} style={styles.scriptIcon} />
@@ -696,7 +696,7 @@ export function WorkspaceScriptsButton({
                 <Text style={styles.splitButtonText}>{t("workspace.scripts.title")}</Text>
               )}
               {presentation === "split" ? (
-                <ThemedChevronDown size={14} uniProps={mutedColorMapping} />
+                <ThemedChevronDown size={16} uniProps={extraMutedIconColorMapping} />
               ) : null}
             </View>
           </DropdownMenuTrigger>
@@ -706,28 +706,24 @@ export function WorkspaceScriptsButton({
             maxWidth={280}
             testID="workspace-scripts-menu"
           >
-            <View style={styles.scriptList}>
-              {scripts.map((script, index) => (
-                <Fragment key={script.scriptName}>
-                  {index > 0 ? <DropdownMenuSeparator /> : null}
-                  <ScriptRow
-                    script={script}
-                    liveTerminalIdSet={liveTerminalIdSet}
-                    activeConnection={activeConnection}
-                    isStartPending={startScriptMutation.isPending}
-                    isStopPending={stopScriptMutation.isPending}
-                    onStartScript={handleStartScript}
-                    onStopScript={handleStopScript}
-                    onRestartScript={handleRestartScript}
-                    onCopyUrl={handleCopyUrl}
-                    preferredRouteKind={preferredRouteKind}
-                    onSelectRouteKind={handleSelectRouteKind}
-                    onViewTerminal={onViewTerminal}
-                    onOpenUrlInBrowserTab={onOpenUrlInBrowserTab}
-                  />
-                </Fragment>
-              ))}
-            </View>
+            {scripts.map((script) => (
+              <ScriptRow
+                key={script.scriptName}
+                script={script}
+                liveTerminalIdSet={liveTerminalIdSet}
+                activeConnection={activeConnection}
+                isStartPending={startScriptMutation.isPending}
+                isStopPending={stopScriptMutation.isPending}
+                onStartScript={handleStartScript}
+                onStopScript={handleStopScript}
+                onRestartScript={handleRestartScript}
+                onCopyUrl={handleCopyUrl}
+                preferredRouteKind={preferredRouteKind}
+                onSelectRouteKind={handleSelectRouteKind}
+                onViewTerminal={onViewTerminal}
+                onOpenUrlInBrowserTab={onOpenUrlInBrowserTab}
+              />
+            ))}
           </DropdownMenuContent>
         </DropdownMenu>
       </View>
@@ -743,10 +739,13 @@ const styles = StyleSheet.create((theme) => ({
     flexShrink: 0,
   },
   splitButton: {
-    height: buttonControlHeight.xs,
+    height: {
+      xs: buttonControlHeight.xs,
+      md: HEADER_CONTROL_HEIGHT,
+    },
     flexDirection: "row",
     alignItems: "stretch",
-    borderRadius: theme.borderRadius.lg,
+    borderRadius: theme.borderRadius.md,
     borderWidth: theme.borderWidth[1],
     borderColor: theme.colors.borderAccent,
     overflow: "hidden",
@@ -767,7 +766,10 @@ const styles = StyleSheet.create((theme) => ({
     backgroundColor: theme.colors.surface2,
   },
   splitButtonPrimary: {
-    paddingHorizontal: theme.spacing[3],
+    paddingHorizontal: {
+      xs: theme.spacing[3],
+      md: theme.spacing[2],
+    },
     justifyContent: "center",
   },
   splitButtonPrimaryHovered: {
@@ -783,21 +785,18 @@ const styles = StyleSheet.create((theme) => ({
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
-    gap: theme.spacing[1.5],
+    gap: {
+      xs: theme.spacing[1.5],
+      md: theme.spacing[1],
+    },
     minHeight: theme.fontSize.base * 1.5,
   },
-  scriptList: {
-    paddingVertical: theme.spacing[1],
-  },
-  scriptItem: {
-    paddingVertical: 6,
-  },
   scriptHeader: {
     flexDirection: "row",
     alignItems: "center",
     gap: theme.spacing[2],
     paddingHorizontal: theme.spacing[3],
-    minHeight: 24,
+    minHeight: MENU_ITEM_HEIGHT,
   },
   scriptIcon: {
     flexShrink: 0,
diff --git a/packages/app/src/screens/workspace/workspace-tab-menu.ts b/packages/app/src/screens/workspace/workspace-tab-menu.ts
index 7b97f46c23..3667337393 100644
--- a/packages/app/src/screens/workspace/workspace-tab-menu.ts
+++ b/packages/app/src/screens/workspace/workspace-tab-menu.ts
@@ -148,7 +148,7 @@ function getCloseButtonTestId(tab: WorkspaceTabDescriptor): string {
   if (tab.target.kind === "commit_diff") {
     return `workspace-commit-diff-close-${encodeFilePathForPathSegment(tab.target.sha)}`;
   }
-  if (tab.target.kind === "working_diff") {
+  if (tab.target.kind === "working_diff" || tab.target.kind === "changes_tree") {
     return `workspace-working-diff-close-${encodeFilePathForPathSegment(buildDeterministicWorkspaceTabId(tab.target))}`;
   }
   if (tab.target.kind === "files" || tab.target.kind === "pull_request") {
diff --git a/packages/app/src/screens/workspace/workspace-tab-presentation.tsx b/packages/app/src/screens/workspace/workspace-tab-presentation.tsx
index 56aaf889c3..07cd56e4fb 100644
--- a/packages/app/src/screens/workspace/workspace-tab-presentation.tsx
+++ b/packages/app/src/screens/workspace/workspace-tab-presentation.tsx
@@ -5,7 +5,7 @@ import { StyleSheet, withUnistyles } from "react-native-unistyles";
 import { useTranslation } from "react-i18next";
 import invariant from "tiny-invariant";
 import { ensurePanelsRegistered } from "@/panels/register-panels";
-import { getPanelRegistration } from "@/panels/panel-registry";
+import { getPanelRegistration, type PanelIconProps } from "@/panels/panel-registry";
 import type { WorkspaceTabDescriptor } from "@/screens/workspace/workspace-tabs-types";
 import type { SidebarStateBucket } from "@/utils/sidebar-agent-state";
 import type { SurfaceBackdrop } from "@/styles/surface-backdrop";
@@ -27,7 +27,7 @@ export interface WorkspaceTabPresentation {
   tooltip: string;
   modified: boolean;
   titleState: "ready" | "loading";
-  icon: React.ComponentType<{ size: number; color: string }>;
+  icon: React.ComponentType<PanelIconProps>;
   statusBucket: SidebarStateBucket | null;
 }
 
@@ -114,6 +114,7 @@ interface WorkspaceTabIconProps {
   presentation: WorkspaceTabPresentation;
   active?: boolean;
   size?: number;
+  strokeWidth?: number;
   statusDotBorderColor?: string;
   /**
    * The surface this icon is sitting on, so the running ring can knock out of it. This icon is
@@ -136,6 +137,7 @@ export function WorkspaceTabIcon({
   presentation,
   active = false,
   size = 14,
+  strokeWidth,
   statusDotBorderColor,
   backdrop,
 }: WorkspaceTabIconProps): ReactElement {
@@ -164,7 +166,7 @@ export function WorkspaceTabIcon({
 
   return (
     <View style={agentIconWrapperStyle}>
-      <Icon size={size} color={iconColor} />
+      <Icon size={size} color={iconColor} strokeWidth={strokeWidth} />
       {isRunning ? (
         <View
           style={styles.statusRing}
@@ -261,6 +263,7 @@ const styles = StyleSheet.create((theme) => ({
     position: "relative",
     alignItems: "center",
     justifyContent: "center",
+    flexShrink: 0,
   },
   statusDot: {
     position: "absolute",
diff --git a/packages/app/src/stores/navigation-active-workspace-store/navigation.ts b/packages/app/src/stores/navigation-active-workspace-store/navigation.ts
index d4100d3adf..aea1cd69e5 100644
--- a/packages/app/src/stores/navigation-active-workspace-store/navigation.ts
+++ b/packages/app/src/stores/navigation-active-workspace-store/navigation.ts
@@ -13,6 +13,7 @@ import {
 import type { ActiveWorkspaceSelection } from "@/stores/last-workspace-selection";
 import type { WorkspaceTabTarget } from "@/workspace-tabs/model";
 import { prepareWorkspaceTab, type PrepareWorkspaceTabDeps } from "@/utils/prepare-workspace-tab";
+import type { WorkspaceTabPlacement } from "@/stores/workspace-layout-actions";
 
 export interface RouteSelectionInput {
   pathname: string;
@@ -27,6 +28,7 @@ export interface NavigateToWorkspaceInput {
   workspaceId: string;
   target?: WorkspaceTabTarget;
   pin?: boolean;
+  placement?: WorkspaceTabPlacement;
 }
 
 export interface NavigateToWorkspaceDeps extends PrepareWorkspaceTabDeps {
diff --git a/packages/app/src/stores/workspace-layout-actions.ts b/packages/app/src/stores/workspace-layout-actions.ts
index 18e91a2415..9496479f4e 100644
--- a/packages/app/src/stores/workspace-layout-actions.ts
+++ b/packages/app/src/stores/workspace-layout-actions.ts
@@ -2,7 +2,7 @@ import invariant from "tiny-invariant";
 import type { JsonValue } from "@getpaseo/protocol/agent-types";
 import type { WorkspaceTab, WorkspaceTabTarget } from "@/workspace-tabs/model";
 import { MIN_SPLIT_SIZE } from "@/stores/workspace-layout-constants";
-import { getPanelRegistration } from "@/panels/panel-registry";
+import { panelResourceKey, panelSupportsHost } from "@/panels/panel-manifest";
 import { defaultWorkspaceLayoutIds } from "@/stores/workspace-layout-ids";
 import type { WorkspaceLayoutNodeIdPrefix } from "@/stores/workspace-layout-ids";
 import {
@@ -130,8 +130,8 @@ interface OpenTabInLayoutInput {
   target: WorkspaceTabTarget;
   now: number;
   placement: WorkspaceTabPlacement;
-  /** Required so a new caller cannot silently opt out of the side-panel placement rule. */
-  sidePanelPaneId: string | null;
+  /** Required so a new caller cannot silently opt out of Explorer placement rules. */
+  explorerSidebarPaneId: string | null;
 }
 
 interface CreateTabInLayoutInput extends OpenTabInLayoutInput {
@@ -185,6 +185,7 @@ interface CloseTabInLayoutInput {
 interface ClosePaneInLayoutInput {
   layout: WorkspaceLayout;
   paneId: string;
+  explorerSidebarPaneId?: string | null;
 }
 
 interface SplitPaneInLayoutInput {
@@ -209,10 +210,17 @@ interface SplitPaneEmptyInLayoutInput {
   maxTreeDepth: number;
 }
 
+interface SplitWorkspaceRootRightInLayoutInput {
+  layout: WorkspaceLayout;
+  createNodeId: (prefix: WorkspaceLayoutNodeIdPrefix) => string;
+  maxTreeDepth: number;
+}
+
 interface MoveTabToPaneInLayoutInput {
   layout: WorkspaceLayout;
   tabId: string;
   toPaneId: string;
+  explorerSidebarPaneId?: string | null;
 }
 
 interface FocusTabInLayoutInput {
@@ -220,6 +228,10 @@ interface FocusTabInLayoutInput {
   tabId: string;
 }
 
+interface SelectTabInPaneInLayoutInput extends FocusTabInLayoutInput {
+  paneId: string;
+}
+
 interface FocusPaneInLayoutInput {
   layout: WorkspaceLayout;
   paneId: string;
@@ -242,7 +254,7 @@ export interface WorkspaceTabReconcileState {
   pinnedAgentIds?: ReadonlySet<string> | null;
   pendingAgentIds?: ReadonlySet<string> | null;
   hiddenAgentIds?: ReadonlySet<string> | null;
-  sidePanelPaneId: string | null;
+  explorerSidebarPaneId: string | null;
 }
 
 export interface WorkspaceTabSnapshot {
@@ -259,7 +271,7 @@ export interface WorkspaceTabSnapshot {
 
 export const DEFAULT_PANE_ID = "main";
 /** The pane id is persisted, so it keeps its pre-rename spelling. */
-export const SIDE_PANEL_PANE_ID = "explorer";
+export const EXPLORER_SIDEBAR_PANE_ID = "explorer";
 const DEFAULT_LAYOUT_GROUP_ID = "workspace-root";
 
 function trimNonEmpty(value: string | null | undefined): string | null {
@@ -1121,29 +1133,40 @@ export function stripEphemeralTabsFromLayout(layout: WorkspaceLayout): Workspace
   });
 }
 
-function restoreEmptyPanesInNode(node: SplitNodeInternal): SplitNodeInternal {
+function restoreEmptyPanesInNode(
+  node: SplitNodeInternal,
+  explorerSidebarPaneId: string | null,
+): SplitNodeInternal {
   if (node.kind === "pane") {
     return node.pane.tabs.length > 0
       ? node
       : createPaneNode({
           id: node.pane.id,
-          tabs: [createNewWorkspaceTab()],
+          tabs:
+            node.pane.id === explorerSidebarPaneId
+              ? createDefaultExplorerSidebarTabs()
+              : [createNewWorkspaceTab()],
           hidden: node.pane.hidden,
         });
   }
   return createGroupNode({
     id: node.group.id,
     direction: node.group.direction,
-    children: node.group.children.map(restoreEmptyPanesInNode),
+    children: node.group.children.map((child) =>
+      restoreEmptyPanesInNode(child, explorerSidebarPaneId),
+    ),
     sizes: node.group.sizes,
   });
 }
 
-export function restoreEmptyPanesInLayout(layout: WorkspaceLayout): WorkspaceLayout {
+export function restoreEmptyPanesInLayout(
+  layout: WorkspaceLayout,
+  explorerSidebarPaneId: string | null = null,
+): WorkspaceLayout {
   const normalized = normalizeLayout(layout);
   return {
     ...normalized,
-    root: restoreEmptyPanesInNode(asInternalNode(normalized.root)),
+    root: restoreEmptyPanesInNode(asInternalNode(normalized.root), explorerSidebarPaneId),
   };
 }
 
@@ -1168,8 +1191,18 @@ export function createDefaultLayout(): WorkspaceLayout {
   };
 }
 
+function createDefaultExplorerSidebarTabs(): WorkspaceTab[] {
+  const createdAt = Date.now();
+  const targets = [{ kind: "files" }, { kind: "changes_tree" }] as const;
+  return targets.map((target) => ({
+    tabId: buildDeterministicWorkspaceTabId(target),
+    target,
+    createdAt,
+  }));
+}
+
 /** The desktop companion pane exists before it is first shown. */
-export function createWorkspaceLayoutWithSidePanel(): WorkspaceLayout {
+export function createWorkspaceLayoutWithExplorerSidebar(): WorkspaceLayout {
   return {
     root: createGroupNode({
       id: DEFAULT_LAYOUT_GROUP_ID,
@@ -1177,12 +1210,12 @@ export function createWorkspaceLayoutWithSidePanel(): WorkspaceLayout {
       children: [
         createPaneNode({ id: DEFAULT_PANE_ID, tabs: [createNewWorkspaceTab()] }),
         createPaneNode({
-          id: SIDE_PANEL_PANE_ID,
-          tabs: [createNewWorkspaceTab()],
+          id: EXPLORER_SIDEBAR_PANE_ID,
+          tabs: createDefaultExplorerSidebarTabs(),
           hidden: true,
         }),
       ],
-      sizes: [0.5, 0.5],
+      sizes: [0.78, 0.22],
     }),
     focusedPaneId: DEFAULT_PANE_ID,
   };
@@ -1222,68 +1255,55 @@ export function removeTabFromTree(root: SplitNode, tabId: string): SplitNode {
   }).root;
 }
 
-// Tab kinds that belong in the main workspace rather than the side panel. Ambient
-// opens, and preferred opens whose requested pane no longer exists, have nobody
-// behind the fallback. The side panel can retain focus from an earlier reveal, so
-// placement must route these back to the main workspace.
-const SIDE_PANEL_EXCLUDED_TAB_KINDS: ReadonlySet<WorkspaceTabTarget["kind"]> = new Set([
-  "agent",
-  "provider_subagent",
-  "terminal",
-  "draft",
-  "browser",
-  "setup",
-]);
-
 function resolvePlacementPane(input: {
   layout: { root: SplitNodeInternal; focusedPaneId: string | null };
   target: WorkspaceTabTarget;
   placement: WorkspaceTabPlacement;
-  sidePanelPaneId: string | null;
-}): SplitPaneInternal {
-  const requestedPane =
+  explorerSidebarPaneId: string | null;
+}): SplitPaneInternal | null {
+  const supportsTarget = (pane: SplitPane) =>
+    panelSupportsHost(
+      input.target.kind,
+      pane.id === input.explorerSidebarPaneId ? "explorer" : "main",
+    );
+  const requestedCandidate =
     input.placement.mode === "pane" || input.placement.mode === "prefer"
       ? findPaneById(input.layout.root, input.placement.paneId)
       : null;
+  const requestedPane =
+    requestedCandidate && supportsTarget(requestedCandidate) ? requestedCandidate : null;
   if (requestedPane) {
     return requestedPane as SplitPaneInternal;
   }
 
-  // `collectAllPanes` skips hidden panes, so a focused-but-hidden pane — the side
-  // panel between a reveal and a hide — falls through to a pane the user can see.
   const focusedCandidate = findPaneById(input.layout.root, input.layout.focusedPaneId);
   const focusedPane =
-    (focusedCandidate?.hidden === true ? null : focusedCandidate) ??
-    collectAllPanes(input.layout.root)[0] ??
-    findPaneById(createDefaultLayout().root, DEFAULT_PANE_ID);
-  invariant(focusedPane, "Workspace layout must always have a pane");
-  if (
-    (input.placement.mode !== "ambient" && input.placement.mode !== "prefer") ||
-    focusedPane.id !== input.sidePanelPaneId ||
-    !SIDE_PANEL_EXCLUDED_TAB_KINDS.has(input.target.kind)
-  ) {
+    (focusedCandidate && focusedCandidate.hidden !== true && supportsTarget(focusedCandidate)
+      ? focusedCandidate
+      : null) ?? collectAllPanes(input.layout.root).find(supportsTarget);
+  if (focusedPane) {
     return focusedPane as SplitPaneInternal;
   }
 
-  // `collectAllPanes` skips hidden panes, so the chain falls back to the side panel
-  // pane itself only when it is the sole visible pane. The side panel is the only
-  // pane anything ever hides, so today that means "the side panel is the only pane".
-  const panes = collectAllPanes(input.layout.root);
-  return (panes.find((pane) => pane.id === DEFAULT_PANE_ID && pane.id !== focusedPane.id) ??
-    panes.find((pane) => pane.id !== focusedPane.id) ??
-    focusedPane) as SplitPaneInternal;
+  const hiddenExplorerPane = findPaneById(input.layout.root, input.explorerSidebarPaneId);
+  return hiddenExplorerPane && supportsTarget(hiddenExplorerPane)
+    ? (hiddenExplorerPane as SplitPaneInternal)
+    : null;
 }
 
 function insertNewTabIntoPane(
   input: CreateTabInLayoutInput & { focus: boolean },
-): OpenTabInLayoutResult {
+): OpenTabInLayoutResult | null {
   const layout = asInternalLayout(input.layout);
   const targetPane = resolvePlacementPane({
     layout,
     target: input.target,
     placement: input.placement,
-    sidePanelPaneId: input.sidePanelPaneId,
+    explorerSidebarPaneId: input.explorerSidebarPaneId,
   });
+  if (!targetPane) {
+    return null;
+  }
 
   const tabId = input.createTabId();
   const nextTab: WorkspaceTab = {
@@ -1330,16 +1350,9 @@ function findExistingTabForTarget(root: SplitNodeInternal, target: WorkspaceTabT
   if (target.kind === "new_tab") {
     return null;
   }
-  const registration = getPanelRegistration(target.kind);
-  const targetResourceKey = registration?.resourceKey(target as never);
-  const targetIdentity = targetResourceKey ?? buildDeterministicWorkspaceTabId(target);
+  const targetIdentity = panelResourceKey(target);
   return (
-    collectAllTabs(root).find(
-      (tab) =>
-        tab.target.kind === target.kind &&
-        (registration?.resourceKey(tab.target as never) ??
-          buildDeterministicWorkspaceTabId(tab.target)) === targetIdentity,
-    ) ?? null
+    collectAllTabs(root).find((tab) => panelResourceKey(tab.target) === targetIdentity) ?? null
   );
 }
 
@@ -1362,7 +1375,7 @@ function updateExistingTabTarget(
   });
 }
 
-export function openTabInLayoutFocused(input: OpenTabInLayoutInput): OpenTabInLayoutResult {
+export function openTabInLayoutFocused(input: OpenTabInLayoutInput): OpenTabInLayoutResult | null {
   const layout = asInternalLayout(input.layout);
   const existingTab = findExistingTabForTarget(layout.root, input.target);
   if (existingTab) {
@@ -1385,12 +1398,12 @@ export function openTabInLayoutFocused(input: OpenTabInLayoutInput): OpenTabInLa
 }
 
 /** Always allocates an independent tab instance. */
-export function createTabInLayout(input: CreateTabInLayoutInput): OpenTabInLayoutResult {
+export function createTabInLayout(input: CreateTabInLayoutInput): OpenTabInLayoutResult | null {
   return insertNewTabIntoPane({ ...input, focus: true });
 }
 
 /** Reveals an equivalent target, or creates it when absent. */
-export function revealTargetInLayout(input: CreateTabInLayoutInput): OpenTabInLayoutResult {
+export function revealTargetInLayout(input: CreateTabInLayoutInput): OpenTabInLayoutResult | null {
   const existingTab = findExistingTabForTarget(asInternalLayout(input.layout).root, input.target);
   if (existingTab) {
     return {
@@ -1433,7 +1446,9 @@ function revealExistingTab(input: {
   return focusTabInLayout({ layout: input.layout, tabId: input.tabId }) ?? input.layout;
 }
 
-export function openTabInLayoutBackground(input: OpenTabInLayoutInput): OpenTabInLayoutResult {
+export function openTabInLayoutBackground(
+  input: OpenTabInLayoutInput,
+): OpenTabInLayoutResult | null {
   const layout = asInternalLayout(input.layout);
   const existingTab = findExistingTabForTarget(layout.root, input.target);
   if (existingTab) {
@@ -1458,7 +1473,7 @@ export function closeTabInLayout(input: CloseTabInLayoutInput): WorkspaceLayout
   }
   const preserveEmptyPaneId =
     input.preserveEmptyPaneId ??
-    (pane.id === DEFAULT_PANE_ID || pane.id === SIDE_PANEL_PANE_ID ? pane.id : null);
+    (pane.id === DEFAULT_PANE_ID || pane.id === EXPLORER_SIDEBAR_PANE_ID ? pane.id : null);
 
   const closeSuccessorTabId = getCloseSuccessorTabId({
     pane,
@@ -1503,7 +1518,7 @@ export function closeTabInLayout(input: CloseTabInLayoutInput): WorkspaceLayout
 
 /**
  * Whether dismissing this pane would do anything — removing it, or hiding it if it
- * is the side panel. A workspace always has somewhere to look, so the last pane the
+ * is the Explorer sidebar. A workspace always has somewhere to look, so the last pane the
  * user can see stays.
  *
  * Ask this *before* tearing down the pane's tabs. `closePaneInLayout` and
@@ -1511,12 +1526,19 @@ export function closeTabInLayout(input: CloseTabInLayoutInput): WorkspaceLayout
  * once the tabs are already gone. This is the same rule stated early enough to act
  * on, and it is the one both the affordance and the action read so they cannot drift.
  */
-export function canDismissPaneInLayout(layout: WorkspaceLayout, paneId: string): boolean {
+export function canDismissPaneInLayout(
+  layout: WorkspaceLayout,
+  paneId: string,
+  explorerSidebarPaneId?: string | null,
+): boolean {
   const pane = findPaneById(layout.root, paneId);
   if (!pane || pane.hidden === true) {
     return false;
   }
-  return collectAllPanes(layout.root).length > 1;
+  const ordinaryPanes = collectAllPanes(layout.root).filter(
+    (candidate) => candidate.id !== explorerSidebarPaneId,
+  );
+  return paneId === explorerSidebarPaneId ? ordinaryPanes.length > 0 : ordinaryPanes.length > 1;
 }
 
 /**
@@ -1524,8 +1546,8 @@ export function canDismissPaneInLayout(layout: WorkspaceLayout, paneId: string):
  * agents, killing terminals) before calling this; the layout only forgets them.
  *
  * The split tree cannot represent a workspace with nothing in it, so the last
- * visible pane never goes. `main` and the explorer pane are ordinary panes here
- * — `closeTabInLayout` keeps them alive when they empty, this is how they leave.
+ * visible ordinary pane never goes. The Explorer is identified separately so it
+ * cannot satisfy that invariant on behalf of the workspace canvas.
  */
 export function closePaneInLayout(input: ClosePaneInLayoutInput): WorkspaceLayout | null {
   const layout = asInternalLayout(input.layout);
@@ -1533,8 +1555,14 @@ export function closePaneInLayout(input: ClosePaneInLayoutInput): WorkspaceLayou
   if (!panePath) {
     return null;
   }
-  const visiblePaneIds = listPaneIds(layout.root);
-  if (visiblePaneIds.length <= 1 && visiblePaneIds.includes(input.paneId)) {
+  const visibleOrdinaryPaneIds = listPaneIds(layout.root).filter(
+    (paneId) => paneId !== input.explorerSidebarPaneId,
+  );
+  if (
+    input.paneId !== input.explorerSidebarPaneId &&
+    visibleOrdinaryPaneIds.length <= 1 &&
+    visibleOrdinaryPaneIds.includes(input.paneId)
+  ) {
     return null;
   }
 
@@ -1547,6 +1575,7 @@ export function closePaneInLayout(input: ClosePaneInLayoutInput): WorkspaceLayou
       root: nextRoot,
       focusedPaneId: layout.focusedPaneId,
       fallbackPaneId,
+      excludedPaneId: input.explorerSidebarPaneId,
     }),
     parentTabIdByTabId: input.layout.parentTabIdByTabId,
   });
@@ -1574,6 +1603,22 @@ export function focusTabInLayout(input: FocusTabInLayoutInput): WorkspaceLayout
   });
 }
 
+/** Selects a tab inside a host without making that host the workspace's focused pane. */
+export function selectTabInPaneInLayout(
+  input: SelectTabInPaneInLayoutInput,
+): WorkspaceLayout | null {
+  const layout = asInternalLayout(input.layout);
+  const pane = findPaneById(layout.root, input.paneId);
+  if (!pane?.tabIds.includes(input.tabId) || pane.focusedTabId === input.tabId) {
+    return null;
+  }
+  return withNormalizedParentTabMap({
+    root: focusTabInPane(layout.root, input.paneId, input.tabId),
+    focusedPaneId: layout.focusedPaneId,
+    parentTabIdByTabId: input.layout.parentTabIdByTabId,
+  });
+}
+
 export function retargetTabInLayout(
   input: RetargetTabInLayoutInput,
 ): RetargetTabInLayoutResult | null {
@@ -1660,12 +1705,12 @@ export function replaceTabTargetInLayout(
     };
   }
   let tabId = input.createTabId();
-  // File navigation is a retarget of one File tab, not a new panel instance. Keeping its
-  // identity preserves the mounted tab track and the File tab's local presentation state.
+  // A same-kind replacement delivers new target props to the mounted panel instance.
+  // Cross-kind replacement creates a new instance so local panel state cannot leak.
   if (
     currentTab?.target.kind === "new_tab" ||
     currentTab?.target.kind === "draft" ||
-    (currentTab?.target.kind === "file" && input.target.kind === "file")
+    currentTab?.target.kind === input.target.kind
   ) {
     tabId = input.tabId;
   } else if (input.target.kind === "draft") {
@@ -1894,6 +1939,29 @@ export function splitPaneEmptyInLayout(
   };
 }
 
+/** Creates a full-height ordinary pane to the right of the complete workspace split tree. */
+export function splitWorkspaceRootRightInLayout(
+  input: SplitWorkspaceRootRightInLayoutInput,
+): SplitPaneInLayoutResult | null {
+  const layout = asInternalLayout(input.layout);
+  const paneId = input.createNodeId("pane");
+  const root = createGroupNode({
+    id: input.createNodeId("group"),
+    direction: "horizontal",
+    children: [layout.root, createPaneNode({ id: paneId, tabs: [createNewWorkspaceTab()] })],
+    sizes: [0.7, 0.3],
+  });
+  if (getTreeDepth(root) > input.maxTreeDepth) return null;
+  return {
+    paneId,
+    layout: withNormalizedParentTabMap({
+      root,
+      focusedPaneId: paneId,
+      parentTabIdByTabId: input.layout.parentTabIdByTabId,
+    }),
+  };
+}
+
 export function moveTabToPaneInLayout(input: MoveTabToPaneInLayoutInput): WorkspaceLayout | null {
   const layout = asInternalLayout(input.layout);
   const sourcePane = findPaneContainingTab(layout.root, input.tabId);
@@ -1907,18 +1975,23 @@ export function moveTabToPaneInLayout(input: MoveTabToPaneInLayoutInput): Worksp
     sourcePane.id !== input.toPaneId &&
     sourcePane.tabIds.length === 1 &&
     sourceTab?.target.kind === "new_tab";
-  if (isMovingSoleNewTab) {
-    return sourcePane.id === SIDE_PANEL_PANE_ID
+  if (isMovingSoleNewTab && input.toPaneId !== input.explorerSidebarPaneId) {
+    return sourcePane.id === input.explorerSidebarPaneId
       ? setPaneHiddenInLayout({ layout, paneId: sourcePane.id, hidden: true })
-      : closePaneInLayout({ layout, paneId: sourcePane.id });
+      : closePaneInLayout({
+          layout,
+          paneId: sourcePane.id,
+          explorerSidebarPaneId: input.explorerSidebarPaneId,
+        });
   }
 
   const detached = detachTabFromTree(layout.root, {
     tabId: input.tabId,
-    // Dragging a pane's last tab elsewhere collapses that pane — except the side
-    // panel, which the user summons and expects to find again, geometry and all.
+    // Crossing into or out of Explorer cannot remove either host shell.
     preserveEmptyPaneId:
-      sourcePane.id === input.toPaneId || sourcePane.id === SIDE_PANEL_PANE_ID
+      sourcePane.id === input.toPaneId ||
+      sourcePane.id === input.explorerSidebarPaneId ||
+      input.toPaneId === input.explorerSidebarPaneId
         ? sourcePane.id
         : null,
   });
@@ -1969,7 +2042,7 @@ export function setPaneHiddenInLayout(input: {
     return null;
   }
   // A workspace always has somewhere to look. This is the single gate on hiding the
-  // last visible pane — `hideSidePanel` and `closePane` both land here, so neither
+  // last visible pane — `hideExplorerSidebar` and `closePane` both land here, so neither
   // needs its own check, and `collectAllPanes` skipping hidden panes is what makes
   // "the only one left" mean visibly left.
   if (input.hidden && collectAllPanes(input.layout.root).length === 1) {
@@ -2104,14 +2177,19 @@ function getFocusedPaneIdAfterTabClose(input: {
   root: SplitNode;
   focusedPaneId: string | null;
   fallbackPaneId: string | null;
+  excludedPaneId?: string | null;
 }): string | null {
   if (input.focusedPaneId === null) {
     return null;
   }
   return (
-    findPaneById(input.root, input.focusedPaneId)?.id ??
-    (input.fallbackPaneId && findPaneById(input.root, input.fallbackPaneId)?.id) ??
-    collectAllPanes(input.root)[0]?.id ??
+    (input.focusedPaneId !== input.excludedPaneId
+      ? findPaneById(input.root, input.focusedPaneId)?.id
+      : null) ??
+    (input.fallbackPaneId && input.fallbackPaneId !== input.excludedPaneId
+      ? findPaneById(input.root, input.fallbackPaneId)?.id
+      : null) ??
+    collectAllPanes(input.root).find((pane) => pane.id !== input.excludedPaneId)?.id ??
     DEFAULT_PANE_ID
   );
 }
@@ -2137,17 +2215,19 @@ function isTerminalTab(
 function openEntityTabWithoutFocusing(input: {
   layout: WorkspaceLayout;
   target: WorkspaceTabTarget;
-  sidePanelPaneId: string | null;
+  explorerSidebarPaneId: string | null;
 }): WorkspaceLayout {
-  return insertNewTabIntoPane({
-    layout: input.layout,
-    target: input.target,
-    now: Date.now(),
-    placement: AMBIENT_PLACEMENT,
-    sidePanelPaneId: input.sidePanelPaneId,
-    createTabId: () => buildDeterministicWorkspaceTabId(input.target),
-    focus: false,
-  }).layout;
+  return (
+    insertNewTabIntoPane({
+      layout: input.layout,
+      target: input.target,
+      now: Date.now(),
+      placement: AMBIENT_PLACEMENT,
+      explorerSidebarPaneId: input.explorerSidebarPaneId,
+      createTabId: () => buildDeterministicWorkspaceTabId(input.target),
+      focus: false,
+    })?.layout ?? input.layout
+  );
 }
 
 interface EntityTabGroup {
@@ -2237,7 +2317,7 @@ function addMissingEntityTabs(input: {
   standaloneTerminalIds: Set<string>;
   hasActivePendingTerminalCreate: boolean;
   hasActivePendingDraftCreate: boolean;
-  sidePanelPaneId: string | null;
+  explorerSidebarPaneId: string | null;
 }): WorkspaceLayout {
   const {
     autoOpenAgentIds,
@@ -2245,7 +2325,7 @@ function addMissingEntityTabs(input: {
     standaloneTerminalIds,
     hasActivePendingTerminalCreate,
     hasActivePendingDraftCreate,
-    sidePanelPaneId,
+    explorerSidebarPaneId,
   } = input;
   let nextLayout = input.layout;
   const currentEntityTabs = collectAllTabs(nextLayout.root);
@@ -2267,7 +2347,7 @@ function addMissingEntityTabs(input: {
     nextLayout = openEntityTabWithoutFocusing({
       layout: nextLayout,
       target: { kind: "agent", agentId },
-      sidePanelPaneId,
+      explorerSidebarPaneId,
     });
     currentAgentIds.add(agentId);
   }
@@ -2281,7 +2361,7 @@ function addMissingEntityTabs(input: {
       nextLayout = openEntityTabWithoutFocusing({
         layout: nextLayout,
         target: { kind: "terminal", terminalId },
-        sidePanelPaneId,
+        explorerSidebarPaneId,
       });
       currentTerminalIds.add(terminalId);
     }
@@ -2294,29 +2374,36 @@ function seedDraftForEmptyWorkspace(input: {
   snapshot: WorkspaceTabSnapshot;
   activeAgentIds: Set<string>;
   knownTerminalIds: Set<string>;
-  sidePanelPaneId: string | null;
+  explorerSidebarPaneId: string | null;
 }): WorkspaceLayout {
   const ready = input.snapshot.agentsHydrated && input.snapshot.terminalsHydrated;
   const creatingContent =
     input.snapshot.hasActivePendingDraftCreate === true ||
     input.snapshot.hasActivePendingTerminalCreate === true;
   const hasWorkspaceEntities = input.activeAgentIds.size > 0 || input.knownTerminalIds.size > 0;
+  const explorerTabIds = new Set(
+    input.explorerSidebarPaneId
+      ? (findPaneById(input.layout.root, input.explorerSidebarPaneId)?.tabIds ?? [])
+      : [],
+  );
   const hasContentTab = collectAllTabs(input.layout.root).some(
-    (tab) => tab.target.kind !== "new_tab",
+    (tab) => tab.target.kind !== "new_tab" && !explorerTabIds.has(tab.tabId),
   );
   if (!ready || creatingContent || hasWorkspaceEntities || hasContentTab) {
     return input.layout;
   }
 
   const draftId = generateDraftId();
-  return createTabInLayout({
-    layout: input.layout,
-    target: { kind: "draft", draftId },
-    now: Date.now(),
-    placement: FOCUSED_PANE_PLACEMENT,
-    sidePanelPaneId: input.sidePanelPaneId,
-    createTabId: () => draftId,
-  }).layout;
+  return (
+    createTabInLayout({
+      layout: input.layout,
+      target: { kind: "draft", draftId },
+      now: Date.now(),
+      placement: FOCUSED_PANE_PLACEMENT,
+      explorerSidebarPaneId: input.explorerSidebarPaneId,
+      createTabId: () => draftId,
+    })?.layout ?? input.layout
+  );
 }
 
 export function reconcileWorkspaceTabs(
@@ -2404,7 +2491,7 @@ export function reconcileWorkspaceTabs(
     standaloneTerminalIds,
     hasActivePendingTerminalCreate: snapshot.hasActivePendingTerminalCreate ?? false,
     hasActivePendingDraftCreate: snapshot.hasActivePendingDraftCreate ?? false,
-    sidePanelPaneId: state.sidePanelPaneId,
+    explorerSidebarPaneId: state.explorerSidebarPaneId,
   });
 
   nextLayout = seedDraftForEmptyWorkspace({
@@ -2412,7 +2499,7 @@ export function reconcileWorkspaceTabs(
     snapshot,
     activeAgentIds,
     knownTerminalIds,
-    sidePanelPaneId: state.sidePanelPaneId,
+    explorerSidebarPaneId: state.explorerSidebarPaneId,
   });
 
   if (reconciledFocusedTabId) {
diff --git a/packages/app/src/stores/workspace-layout-store.test.ts b/packages/app/src/stores/workspace-layout-store.test.ts
index 56a8f1c2fa..17d07f5eca 100644
--- a/packages/app/src/stores/workspace-layout-store.test.ts
+++ b/packages/app/src/stores/workspace-layout-store.test.ts
@@ -25,7 +25,7 @@ import {
   collectAllTabs,
   createWorkspaceLayoutStore,
   createDefaultLayout,
-  createWorkspaceLayoutWithSidePanel,
+  createWorkspaceLayoutWithExplorerSidebar,
   findPaneById,
   findPaneContainingTab,
   FOCUSED_PANE_PLACEMENT,
@@ -119,11 +119,16 @@ function collectTabIds(root: SplitNode): string[] {
 }
 
 function collectContentTabs(root: SplitNode): WorkspaceTab[] {
-  return collectAllTabs(root).filter((tab) => tab.target.kind !== "new_tab");
+  return contentTabs(collectAllTabs(root));
 }
 
 function contentTabs(tabs: WorkspaceTab[]): WorkspaceTab[] {
-  return tabs.filter((tab) => tab.target.kind !== "new_tab");
+  return tabs.filter(
+    (tab) =>
+      tab.target.kind !== "new_tab" &&
+      tab.target.kind !== "files" &&
+      tab.target.kind !== "changes_tree",
+  );
 }
 
 function expectGroup(node: SplitNode): Extract<SplitNode, { kind: "group" }> {
@@ -132,17 +137,22 @@ function expectGroup(node: SplitNode): Extract<SplitNode, { kind: "group" }> {
 }
 
 describe("workspace-layout-store helpers", () => {
-  it("creates independent random New tabs for the default panes", () => {
-    const layout = createWorkspaceLayoutWithSidePanel();
+  it("seeds Files and Changes in the default Explorer sidebar", () => {
+    const layout = createWorkspaceLayoutWithExplorerSidebar();
     const tabs = collectAllTabs(layout.root);
 
-    expect(tabs).toHaveLength(2);
-    expect(tabs.map((tab) => tab.target)).toEqual([{ kind: "new_tab" }, { kind: "new_tab" }]);
-    expect(new Set(tabs.map((tab) => tab.tabId)).size).toBe(2);
+    expect(tabs.map((tab) => tab.target)).toEqual([
+      { kind: "new_tab" },
+      { kind: "files" },
+      { kind: "changes_tree" },
+    ]);
+    expect(findPaneById(layout.root, "explorer")?.focusedTabId).toBe(
+      tabs.find((tab) => tab.target.kind === "changes_tree")?.tabId,
+    );
   });
 
   it("discards persisted New tabs and restores each empty pane with a fresh identity", async () => {
-    const persisted = createWorkspaceLayoutWithSidePanel();
+    const persisted = createWorkspaceLayoutWithExplorerSidebar();
     const persistedIds = new Set(collectAllTabs(persisted.root).map((tab) => tab.tabId));
     await AsyncStorage.setItem(
       "workspace-layout-state",
@@ -159,9 +169,14 @@ describe("workspace-layout-store helpers", () => {
     await restored.persist.rehydrate();
 
     const restoredTabs = collectAllTabs(restored.getState().layoutByWorkspace.workspace.root);
-    expect(restoredTabs).toHaveLength(2);
-    expect(new Set(restoredTabs.map((tab) => tab.tabId)).size).toBe(2);
-    expect(restoredTabs.every((tab) => !persistedIds.has(tab.tabId))).toBe(true);
+    expect(restoredTabs.map((tab) => tab.target)).toEqual([
+      { kind: "new_tab" },
+      { kind: "files" },
+      { kind: "changes_tree" },
+    ]);
+    const restoredNewTab = restoredTabs.find((tab) => tab.target.kind === "new_tab");
+    expect(restoredNewTab).toBeTruthy();
+    expect(persistedIds.has(restoredNewTab?.tabId ?? "")).toBe(false);
   });
 
   it("finds panes and tabs across nested groups", () => {
@@ -348,12 +363,13 @@ describe("workspace-layout-store tree transforms", () => {
     for (const position of ["left", "right"] as const) {
       it(`keeps every pane in place when a tab is dragged ${position} from the default layout`, () => {
         workspaceLayoutIds.reset();
-        const mainPaneId = collectAllPanes(createWorkspaceLayoutWithSidePanel().root)[0]?.id;
+        const mainPaneId = collectAllPanes(createWorkspaceLayoutWithExplorerSidebar().root)[0]?.id;
         expect(mainPaneId).toBeTruthy();
-        const root = withPaneTabs(createWorkspaceLayoutWithSidePanel().root, mainPaneId as string, [
-          "tab-a",
-          "tab-b",
-        ]);
+        const root = withPaneTabs(
+          createWorkspaceLayoutWithExplorerSidebar().root,
+          mainPaneId as string,
+          ["tab-a", "tab-b"],
+        );
 
         const nextRoot = insertSplit(
           root,
@@ -371,7 +387,7 @@ describe("workspace-layout-store tree transforms", () => {
       workspaceLayoutIds.reset();
       const workspaceKey = createWorkspaceKey();
       const store = workspaceLayoutStore.getState();
-      const before = createWorkspaceLayoutWithSidePanel();
+      const before = createWorkspaceLayoutWithExplorerSidebar();
       const mainPaneId = collectAllPanes(before.root)[0]?.id;
       expect(mainPaneId).toBeTruthy();
 
@@ -512,7 +528,7 @@ describe("workspace-layout-store actions", () => {
         (tab) => tab.tabId === crossKind,
       )?.state,
     ).toBeUndefined();
-    const override: ChangesState = { ...defaultChangesState, wrapLines: true };
+    const override: ChangesState = { ...defaultChangesState, treeVisible: true };
     const overridden = store.replaceTab(
       workspaceKey,
       crossKind!,
@@ -526,7 +542,35 @@ describe("workspace-layout-store actions", () => {
     ).toEqual(override);
   });
 
-  it("keeps every Changes presentation field independent across explicit instances", () => {
+  it("keeps the tab instance when a panel receives a same-kind replacement", () => {
+    const workspaceKey = createWorkspaceKey();
+    const store = workspaceLayoutStore.getState();
+    const tabId = store.openTab({
+      workspaceKey,
+      target: { kind: "working_diff", focusPath: "src/a.ts", focusRequestId: 1 },
+      intent: "new",
+    })!;
+    const state: ChangesState = { ...defaultChangesState, collapsedFilePaths: ["src/a.ts"] };
+    store.setTabState(workspaceKey, tabId, state);
+
+    const replacementTabId = store.replaceTab(workspaceKey, tabId, {
+      kind: "working_diff",
+      focusPath: "src/b.ts",
+      focusRequestId: 2,
+    });
+    const replacement = collectAllTabs(
+      workspaceLayoutStore.getState().layoutByWorkspace[workspaceKey].root,
+    ).find((tab) => tab.tabId === tabId);
+
+    expect(replacementTabId).toBe(tabId);
+    expect(replacement).toMatchObject({
+      tabId,
+      target: { kind: "working_diff", focusPath: "src/b.ts", focusRequestId: 2 },
+      state,
+    });
+  });
+
+  it("keeps every local Changes field independent across explicit instances", () => {
     const workspaceKey = createWorkspaceKey();
     const store = workspaceLayoutStore.getState();
     const first = store.openTab({
@@ -540,9 +584,6 @@ describe("workspace-layout-store actions", () => {
       intent: "new",
     })!;
     const changed: ChangesState = {
-      layout: "split" as const,
-      wrapLines: true,
-      hideWhitespace: true,
       treeVisible: true,
       treeWidth: 320,
       collapsedFilePaths: ["a.ts"],
@@ -612,7 +653,7 @@ describe("workspace-layout-store actions", () => {
     const store = workspaceLayoutStore.getState();
     const replaced = store.openTab({
       workspaceKey: workspaceKey,
-      target: { kind: "files" },
+      target: { kind: "pull_request" },
       intent: "new",
     })!;
     const child = store.openTab({
@@ -738,14 +779,14 @@ describe("workspace-layout-store actions", () => {
       pinnedAgentIdsByWorkspace: {},
       hiddenAgentIdsByWorkspace: {},
       focusRestorationByWorkspace: {},
-      sidePanelPaneIdByWorkspace: {},
+      explorerSidebarPaneIdByWorkspace: {},
     });
   });
 
   it("replaces a pane's sole New tab when real content opens", () => {
     const workspaceKey = createWorkspaceKey();
     const store = workspaceLayoutStore.getState();
-    const initialLayout = createWorkspaceLayoutWithSidePanel();
+    const initialLayout = createWorkspaceLayoutWithExplorerSidebar();
     workspaceLayoutStore.setState({ layoutByWorkspace: { [workspaceKey]: initialLayout } });
     const initialMainTabId = findPaneById(initialLayout.root, "main")?.focusedTabId;
 
@@ -764,7 +805,7 @@ describe("workspace-layout-store actions", () => {
   it("keeps a New tab's random identity when its launcher selects content", () => {
     const workspaceKey = createWorkspaceKey();
     const store = workspaceLayoutStore.getState();
-    const initialLayout = createWorkspaceLayoutWithSidePanel();
+    const initialLayout = createWorkspaceLayoutWithExplorerSidebar();
     workspaceLayoutStore.setState({ layoutByWorkspace: { [workspaceKey]: initialLayout } });
     const newTabId = findPaneById(initialLayout.root, "main")?.focusedTabId as string;
 
@@ -825,16 +866,22 @@ describe("workspace-layout-store actions", () => {
 
     const state = restored.getState();
     const layout = state.layoutByWorkspace.legacy;
-    const sidePanelPaneId = state.sidePanelPaneIdByWorkspace.legacy;
+    const explorerSidebarPaneId = state.explorerSidebarPaneIdByWorkspace.legacy;
     expect(findPaneById(layout.root, "main")).toBeTruthy();
-    expect(sidePanelPaneId).toBeTruthy();
-    expect(findPaneById(layout.root, sidePanelPaneId)?.hidden).toBe(true);
+    expect(explorerSidebarPaneId).toBeTruthy();
+    const explorerPane = findPaneById(layout.root, explorerSidebarPaneId);
+    expect(explorerPane?.hidden).toBe(true);
+    const tabsById = new Map(collectAllTabs(layout.root).map((tab) => [tab.tabId, tab]));
+    expect(explorerPane?.tabIds.map((tabId) => tabsById.get(tabId)?.target)).toEqual([
+      { kind: "files" },
+      { kind: "changes_tree" },
+    ]);
     expect(restored.getState().splitSizesByWorkspace).toEqual({});
     await expect(AsyncStorage.getItem("workspace-layout-state")).resolves.not.toBeNull();
   });
 
   it("restores a layout saved before the Side panel rename, PR bookkeeping and all", async () => {
-    const savedLayout = createWorkspaceLayoutWithSidePanel();
+    const savedLayout = createWorkspaceLayoutWithExplorerSidebar();
     await AsyncStorage.setItem(
       "workspace-layout-state",
       JSON.stringify({
@@ -852,7 +899,7 @@ describe("workspace-layout-store actions", () => {
 
     const state = restored.getState();
     expect(state.layoutByWorkspace.renamed).toBeTruthy();
-    expect(state.sidePanelPaneIdByWorkspace.renamed).toBe("explorer");
+    expect(state.explorerSidebarPaneIdByWorkspace.renamed).toBe("explorer");
   });
 
   it("persists first-class pane targets, visibility, and focus", async () => {
@@ -871,8 +918,8 @@ describe("workspace-layout-store actions", () => {
       target: { kind: "agent", agentId: "agent-2" },
       intent: "reveal",
     });
-    const sidePanelPaneId = source.getState().showSidePanel(workspaceKey);
-    expect(sidePanelPaneId).toBeTruthy();
+    const explorerSidebarPaneId = source.getState().showExplorerSidebar(workspaceKey);
+    expect(explorerSidebarPaneId).toBeTruthy();
     source
       .getState()
       .openTab({ workspaceKey: workspaceKey, target: { kind: "files" }, intent: "reveal" });
@@ -880,9 +927,9 @@ describe("workspace-layout-store actions", () => {
       workspaceKey: workspaceKey,
       target: { kind: "pull_request" },
       intent: "background",
-      placement: { mode: "prefer", paneId: sidePanelPaneId as string },
+      placement: { mode: "prefer", paneId: explorerSidebarPaneId as string },
     });
-    source.getState().hideSidePanel(workspaceKey);
+    source.getState().hideExplorerSidebar(workspaceKey);
 
     await vi.waitFor(async () => {
       expect(await AsyncStorage.getItem("workspace-layout-state")).not.toBeNull();
@@ -895,14 +942,15 @@ describe("workspace-layout-store actions", () => {
 
     expect(layout.focusedPaneId).toBe("main");
     expect(findPaneById(layout.root, "main")?.focusedTabId).toBe(focusedAgentTabId);
-    expect(findPaneById(layout.root, sidePanelPaneId)?.hidden).toBe(true);
+    expect(findPaneById(layout.root, explorerSidebarPaneId)?.hidden).toBe(true);
     expect(collectAllTabs(layout.root).map((tab) => tab.target.kind)).toEqual([
       "agent",
       "agent",
       "files",
+      "changes_tree",
       "pull_request",
     ]);
-    expect(state.sidePanelPaneIdByWorkspace[workspaceKey]).toBe(sidePanelPaneId);
+    expect(state.explorerSidebarPaneIdByWorkspace[workspaceKey]).toBe(explorerSidebarPaneId);
   });
 
   it("persists and rehydrates independent Changes state through validated storage", async () => {
@@ -917,9 +965,6 @@ describe("workspace-layout-store actions", () => {
       .getState()
       .openTab({ workspaceKey: workspaceKey, target: { kind: "working_diff" }, intent: "new" })!;
     const firstState: ChangesState = {
-      layout: "split" as const,
-      wrapLines: true,
-      hideWhitespace: true,
       treeVisible: true,
       treeWidth: 320,
       collapsedFilePaths: ["src/a.ts"],
@@ -927,9 +972,6 @@ describe("workspace-layout-store actions", () => {
       commitsCollapsed: false,
     };
     const secondState: ChangesState = {
-      layout: "unified" as const,
-      wrapLines: false,
-      hideWhitespace: false,
       treeVisible: false,
       collapsedFilePaths: ["README.md"],
       collapsedFolderPaths: ["docs"],
@@ -942,7 +984,7 @@ describe("workspace-layout-store actions", () => {
       const persisted = await AsyncStorage.getItem("workspace-layout-state");
       expect(persisted).not.toBeNull();
       const root = JSON.parse(persisted ?? "{}").state.layoutByWorkspace[workspaceKey].root;
-      expect(collectTabIds(root)).toEqual([first, second]);
+      expect(collectTabIds(root)).toEqual([first, second, "files", "changes_tree"]);
     });
 
     const restored = createWorkspaceLayoutStore(createDeterministicWorkspaceLayoutIds());
@@ -952,7 +994,7 @@ describe("workspace-layout-store actions", () => {
     expect(tabs.find((tab) => tab.tabId === second)?.state).toEqual(secondState);
   });
 
-  it("leaves a side-panel background tab in the only other pane instead of emptying it", () => {
+  it("leaves an Explorer background tab in the only other pane instead of emptying it", () => {
     const workspaceKey = createWorkspaceKey();
     const store = workspaceLayoutStore.getState();
     const setupTabId = store.openTab({
@@ -976,7 +1018,7 @@ describe("workspace-layout-store actions", () => {
     expect(layout.focusedPaneId).toBe("main");
   });
 
-  it("keeps ambient entity tabs out of the side panel after a background tab lands there", () => {
+  it("keeps ambient entity tabs out of Explorer after a background tab lands there", () => {
     const workspaceKey = createWorkspaceKey();
     const store = workspaceLayoutStore.getState();
 
@@ -999,7 +1041,7 @@ describe("workspace-layout-store actions", () => {
     expect(layout.focusedPaneId).toBe("main");
   });
 
-  it("keeps a background entity tab out of the focused explorer pane without moving focus", () => {
+  it("places a background terminal tab in Explorer without stealing workspace focus", () => {
     const workspaceKey = createWorkspaceKey();
     const store = workspaceLayoutStore.getState();
     store.openTab({
@@ -1007,7 +1049,7 @@ describe("workspace-layout-store actions", () => {
       target: { kind: "agent", agentId: "agent-1" },
       intent: "reveal",
     });
-    store.focusPane(workspaceKey, "explorer");
+    store.showExplorerSidebar(workspaceKey);
 
     const terminalTabId = store.openTab({
       workspaceKey: workspaceKey,
@@ -1016,11 +1058,12 @@ describe("workspace-layout-store actions", () => {
         terminalId: "terminal-1",
       },
       intent: "background",
+      placement: { mode: "pane", paneId: "explorer" },
     });
 
     const layout = workspaceLayoutStore.getState().layoutByWorkspace[workspaceKey];
-    expect(findPaneContainingTab(layout.root, terminalTabId as string)?.id).toBe("main");
-    expect(layout.focusedPaneId).toBe("explorer");
+    expect(findPaneContainingTab(layout.root, terminalTabId as string)?.id).toBe("explorer");
+    expect(layout.focusedPaneId).toBe("main");
   });
 
   it("places a background setup tab in the main pane without moving focus", () => {
@@ -1031,8 +1074,6 @@ describe("workspace-layout-store actions", () => {
       target: { kind: "agent", agentId: "agent-1" },
       intent: "reveal",
     });
-    store.focusPane(workspaceKey, "explorer");
-
     const setupTabId = store.openTab({
       workspaceKey,
       target: { kind: "setup", workspaceId: WORKSPACE_ID },
@@ -1042,10 +1083,10 @@ describe("workspace-layout-store actions", () => {
 
     const layout = workspaceLayoutStore.getState().layoutByWorkspace[workspaceKey];
     expect(findPaneContainingTab(layout.root, setupTabId as string)?.id).toBe("main");
-    expect(layout.focusedPaneId).toBe("explorer");
+    expect(layout.focusedPaneId).toBe("main");
   });
 
-  it("keeps a failed setup tab out of the focused side panel when main was removed", () => {
+  it("keeps a failed setup tab out of the focused Explorer when main was removed", () => {
     const workspaceKey = createWorkspaceKey();
     const store = workspaceLayoutStore.getState();
     workspaceLayoutStore.setState((state) => ({
@@ -1067,8 +1108,8 @@ describe("workspace-layout-store actions", () => {
           focusedPaneId: "explorer",
         }),
       },
-      sidePanelPaneIdByWorkspace: {
-        ...state.sidePanelPaneIdByWorkspace,
+      explorerSidebarPaneIdByWorkspace: {
+        ...state.explorerSidebarPaneIdByWorkspace,
         [workspaceKey]: "explorer",
       },
     }));
@@ -1082,7 +1123,7 @@ describe("workspace-layout-store actions", () => {
 
     const layout = workspaceLayoutStore.getState().layoutByWorkspace[workspaceKey];
     expect(findPaneContainingTab(layout.root, setupTabId as string)?.id).toBe("secondary");
-    expect(layout.focusedPaneId).toBe("explorer");
+    expect(layout.focusedPaneId).toBe("secondary");
   });
 
   it("keeps ambient browser opens out of the focused explorer pane", () => {
@@ -1130,7 +1171,7 @@ describe("workspace-layout-store actions", () => {
     expect(layout.focusedPaneId).toBe("main");
   });
 
-  it("honours an explicit pane id over the explorer reroute", () => {
+  it("routes an unsupported explicit Explorer placement to main", () => {
     const workspaceKey = createWorkspaceKey();
     const store = workspaceLayoutStore.getState();
     store.openTab({
@@ -1139,19 +1180,19 @@ describe("workspace-layout-store actions", () => {
       intent: "reveal",
     });
 
-    const draftTabId = store.openTab({
+    const setupTabId = store.openTab({
       workspaceKey: workspaceKey,
-      target: { kind: "draft", draftId: "draft-1" },
+      target: { kind: "setup", workspaceId: "workspace-1" },
       intent: "reveal",
       placement: { mode: "pane", paneId: "explorer" },
     });
 
     const layout = workspaceLayoutStore.getState().layoutByWorkspace[workspaceKey];
-    expect(findPaneContainingTab(layout.root, draftTabId as string)?.id).toBe("explorer");
-    expect(layout.focusedPaneId).toBe("explorer");
+    expect(findPaneContainingTab(layout.root, setupTabId as string)?.id).toBe("main");
+    expect(layout.focusedPaneId).toBe("main");
   });
 
-  it("opens user-created entity tabs in the focused side panel", () => {
+  it("keeps focused placement in main because Explorer is not workspace focus", () => {
     const workspaceKey = createWorkspaceKey();
     const store = workspaceLayoutStore.getState();
     store.openTab({
@@ -1169,8 +1210,8 @@ describe("workspace-layout-store actions", () => {
     });
 
     const layout = workspaceLayoutStore.getState().layoutByWorkspace[workspaceKey];
-    expect(findPaneContainingTab(layout.root, terminalTabId as string)?.id).toBe("explorer");
-    expect(layout.focusedPaneId).toBe("explorer");
+    expect(findPaneContainingTab(layout.root, terminalTabId as string)?.id).toBe("main");
+    expect(layout.focusedPaneId).toBe("main");
   });
 
   it("keeps an existing user-created entity tab in its original pane", () => {
@@ -1184,7 +1225,7 @@ describe("workspace-layout-store actions", () => {
       },
       intent: "background",
     });
-    store.showSidePanel(workspaceKey);
+    store.showExplorerSidebar(workspaceKey);
 
     store.openTab({
       workspaceKey: workspaceKey,
@@ -1202,7 +1243,7 @@ describe("workspace-layout-store actions", () => {
   it("defers terminal reconciliation while a user terminal is being created", () => {
     const workspaceKey = createWorkspaceKey();
     const store = workspaceLayoutStore.getState();
-    store.focusPane(workspaceKey, "explorer");
+    store.showExplorerSidebar(workspaceKey);
 
     store.reconcileTabs(workspaceKey, {
       agentsHydrated: true,
@@ -1252,7 +1293,7 @@ describe("workspace-layout-store actions", () => {
     expect(findPaneContainingTab(layout.root, filesTabId as string)?.id).toBe("explorer");
   });
 
-  it("focuses an entity tab the user dragged into the explorer pane where it lives", () => {
+  it("keeps an agent where the user moved it in Explorer", () => {
     const workspaceKey = createWorkspaceKey();
     const store = workspaceLayoutStore.getState();
     const agentTabId = store.openTab({
@@ -1260,7 +1301,7 @@ describe("workspace-layout-store actions", () => {
       target: { kind: "agent", agentId: "agent-1" },
       intent: "reveal",
     });
-    store.showSidePanel(workspaceKey);
+    store.showExplorerSidebar(workspaceKey);
     store.moveTabToPane(workspaceKey, agentTabId as string, "explorer");
     store.focusPane(workspaceKey, "main");
 
@@ -1272,7 +1313,23 @@ describe("workspace-layout-store actions", () => {
 
     const layout = workspaceLayoutStore.getState().layoutByWorkspace[workspaceKey];
     expect(findPaneContainingTab(layout.root, agentTabId as string)?.id).toBe("explorer");
-    expect(layout.focusedPaneId).toBe("explorer");
+    expect(layout.focusedPaneId).toBe("main");
+  });
+
+  it.each([
+    { kind: "file", path: "src/app.ts" } as const,
+    { kind: "working_diff" } as const,
+    { kind: "commit_diff", sha: "abc1234" } as const,
+  ])("allows $kind tabs to move into Explorer", (target) => {
+    const workspaceKey = createWorkspaceKey();
+    const store = workspaceLayoutStore.getState();
+    const tabId = store.openTab({ workspaceKey, target, intent: "reveal" });
+
+    store.showExplorerSidebar(workspaceKey);
+    store.moveTabToPane(workspaceKey, tabId as string, "explorer");
+
+    const layout = workspaceLayoutStore.getState().layoutByWorkspace[workspaceKey];
+    expect(findPaneContainingTab(layout.root, tabId as string)?.id).toBe("explorer");
   });
 
   it("keeps reconcile auto-opened agents out of the focused explorer pane", () => {
@@ -1296,10 +1353,10 @@ describe("workspace-layout-store actions", () => {
 
     const layout = workspaceLayoutStore.getState().layoutByWorkspace[workspaceKey];
     expect(findPaneContainingTab(layout.root, "agent_agent-2")?.id).toBe("main");
-    expect(layout.focusedPaneId).toBe("explorer");
+    expect(layout.focusedPaneId).toBe("main");
   });
 
-  it("opens an entity tab in the explorer pane when it is the only pane", () => {
+  it("opens an Explorer-supported tab there when Explorer is the only pane", () => {
     const workspaceKey = createWorkspaceKey();
     const store = workspaceLayoutStore.getState();
     workspaceLayoutStore.setState((state) => ({
@@ -1310,23 +1367,23 @@ describe("workspace-layout-store actions", () => {
           focusedPaneId: "explorer",
         }),
       },
-      sidePanelPaneIdByWorkspace: {
-        ...state.sidePanelPaneIdByWorkspace,
+      explorerSidebarPaneIdByWorkspace: {
+        ...state.explorerSidebarPaneIdByWorkspace,
         [workspaceKey]: "explorer",
       },
     }));
 
-    const agentTabId = store.openTab({
+    const terminalTabId = store.openTab({
       workspaceKey: workspaceKey,
-      target: { kind: "agent", agentId: "agent-1" },
+      target: { kind: "terminal", terminalId: "terminal-1" },
       intent: "reveal",
     });
 
     const layout = workspaceLayoutStore.getState().layoutByWorkspace[workspaceKey];
-    expect(findPaneContainingTab(layout.root, agentTabId as string)?.id).toBe("explorer");
+    expect(findPaneContainingTab(layout.root, terminalTabId as string)?.id).toBe("explorer");
   });
 
-  it("creates setup in the hidden side panel without changing focus", () => {
+  it("keeps setup in main when Explorer is hidden", () => {
     const workspaceKey = createWorkspaceKey();
     const store = workspaceLayoutStore.getState();
     const agentTabId = store.openTab({
@@ -1344,18 +1401,19 @@ describe("workspace-layout-store actions", () => {
 
     const state = workspaceLayoutStore.getState();
     const layout = state.layoutByWorkspace[workspaceKey];
-    const sidePanelPaneId = state.sidePanelPaneIdByWorkspace[workspaceKey] ?? "explorer";
+    const explorerSidebarPaneId =
+      state.explorerSidebarPaneIdByWorkspace[workspaceKey] ?? "explorer";
     expect(tabId).toBe("setup_ws-main");
     expect(layout.focusedPaneId).toBe("main");
-    expect(findPaneById(layout.root, sidePanelPaneId)?.hidden).toBe(true);
+    expect(findPaneById(layout.root, explorerSidebarPaneId)?.hidden).toBe(true);
     expect(findPaneById(layout.root, "main")?.focusedTabId).toBe(agentTabId);
-    expect(findPaneContainingTab(layout.root, tabId!)?.id).toBe(sidePanelPaneId);
+    expect(findPaneContainingTab(layout.root, tabId!)?.id).toBe("main");
   });
 
-  it("opens assistant files in the revealed side panel and reveals it again on the next open", () => {
+  it("opens file content in Explorer when explicitly preferred there", () => {
     const workspaceKey = createWorkspaceKey();
     const store = workspaceLayoutStore.getState();
-    const paneId = store.showSidePanel(workspaceKey) as string;
+    const paneId = store.showExplorerSidebar(workspaceKey) as string;
     const tabId = store.openTab({
       workspaceKey: workspaceKey,
       target: { kind: "file", path: "/repo/worktree/a.ts" },
@@ -1364,47 +1422,47 @@ describe("workspace-layout-store actions", () => {
       placement: { mode: "prefer", paneId },
     });
     const createdState = workspaceLayoutStore.getState();
-    const sidePanelPaneId = createdState.sidePanelPaneIdByWorkspace[workspaceKey];
+    const explorerSidebarPaneId = createdState.explorerSidebarPaneIdByWorkspace[workspaceKey];
 
-    expect(sidePanelPaneId).toBe("explorer");
+    expect(explorerSidebarPaneId).toBe("explorer");
     expect(
       findPaneContainingTab(createdState.layoutByWorkspace[workspaceKey].root, tabId!)?.id,
-    ).toBe(sidePanelPaneId);
+    ).toBe("explorer");
     expect(collectAllTabs(createdState.layoutByWorkspace[workspaceKey].root)).toContainEqual({
       tabId,
       target: { kind: "file", path: "/repo/worktree/a.ts" },
       createdAt: expect.any(Number),
     });
 
-    store.hideSidePanel(workspaceKey);
+    store.hideExplorerSidebar(workspaceKey);
     store.openTab({
       workspaceKey: workspaceKey,
       target: { kind: "file", path: "/repo/worktree/b.ts" },
       intent: "reveal",
-      placement: { mode: "prefer", paneId: store.showSidePanel(workspaceKey) as string },
+      placement: { mode: "prefer", paneId: store.showExplorerSidebar(workspaceKey) as string },
     });
     const revealedLayout = workspaceLayoutStore.getState().layoutByWorkspace[workspaceKey];
 
-    expect(findPaneById(revealedLayout.root, sidePanelPaneId)?.hidden).toBeUndefined();
+    expect(findPaneById(revealedLayout.root, explorerSidebarPaneId)?.hidden).toBeUndefined();
     expect(findPaneContainingTab(revealedLayout.root, "file_/repo/worktree/b.ts")?.id).toBe(
-      sidePanelPaneId,
+      "explorer",
     );
   });
 
-  it("leaves a canonical duplicate file tab where the user has it, in the revealed side panel", () => {
+  it("leaves a canonical duplicate file tab where the user placed it in Explorer", () => {
     const workspaceKey = createWorkspaceKey();
     const store = workspaceLayoutStore.getState();
     useWorkspaceLayoutIds("explorer");
-    const paneId = store.showSidePanel(workspaceKey) as string;
+    const paneId = store.showExplorerSidebar(workspaceKey) as string;
     const tabId = store.openTab({
       workspaceKey: workspaceKey,
       target: { kind: "file", path: "/repo/worktree/a.ts" },
       intent: "reveal",
       placement: { mode: "pane", paneId },
     });
-    store.hideSidePanel(workspaceKey);
+    store.hideExplorerSidebar(workspaceKey);
 
-    store.showSidePanel(workspaceKey);
+    store.showExplorerSidebar(workspaceKey);
     const duplicateTabId = store.openTab({
       workspaceKey: workspaceKey,
       target: { kind: "file", path: "/repo/worktree/a.ts", lineStart: 12 },
@@ -1416,9 +1474,9 @@ describe("workspace-layout-store actions", () => {
 
     expect(duplicateTabId).toBe(tabId);
     expect(collectAllTabs(layout.root).filter((tab) => tab.tabId === tabId)).toHaveLength(1);
-    expect(findPaneContainingTab(layout.root, tabId as string)?.id).toBe(paneId);
+    expect(findPaneContainingTab(layout.root, tabId as string)?.id).toBe("explorer");
     expect(findPaneById(layout.root, paneId)?.hidden).toBeUndefined();
-    expect(layout.focusedPaneId).toBe(paneId);
+    expect(layout.focusedPaneId).toBe("main");
     expect(findPaneById(layout.root, paneId)?.focusedTabId).toBe(tabId);
   });
 
@@ -1856,7 +1914,7 @@ describe("workspace-layout-store actions", () => {
     expect(findPaneById(layout.root, newPaneId)?.focusedTabId).toBe(draftTabId);
   });
 
-  it("hides and shows the side panel without changing its tabs or split sizes", () => {
+  it("hides and shows Explorer without changing its default tabs or split sizes", () => {
     useWorkspaceLayoutIds("88888888-8888-8888-8888-888888888888");
     const workspaceKey = createWorkspaceKey();
     const store = workspaceLayoutStore.getState();
@@ -1866,7 +1924,7 @@ describe("workspace-layout-store actions", () => {
       target: { kind: "draft", draftId: "main-tab" },
       intent: "reveal",
     });
-    const paneId = store.showSidePanel(workspaceKey)!;
+    const paneId = store.showExplorerSidebar(workspaceKey)!;
     store.openTab({
       workspaceKey: workspaceKey,
       target: { kind: "working_diff" },
@@ -1875,18 +1933,20 @@ describe("workspace-layout-store actions", () => {
     const sizes = expectGroup(workspaceLayoutStore.getState().layoutByWorkspace[workspaceKey].root)
       .group.sizes;
 
-    store.hideSidePanel(workspaceKey);
+    store.hideExplorerSidebar(workspaceKey);
     let layout = workspaceLayoutStore.getState().layoutByWorkspace[workspaceKey];
     expect(findPaneById(layout.root, paneId)).toMatchObject({
       hidden: true,
-      tabIds: ["working_diff"],
+      tabIds: ["files", "changes_tree"],
     });
     expect(expectGroup(layout.root).group.sizes).toEqual(sizes);
     expect(layout.focusedPaneId).toBe("main");
 
-    store.showSidePanel(workspaceKey);
+    store.showExplorerSidebar(workspaceKey);
     layout = workspaceLayoutStore.getState().layoutByWorkspace[workspaceKey];
-    expect(findPaneById(layout.root, paneId)).toMatchObject({ tabIds: ["working_diff"] });
+    expect(findPaneById(layout.root, paneId)).toMatchObject({
+      tabIds: ["files", "changes_tree"],
+    });
     expect(findPaneById(layout.root, paneId)?.hidden).toBeUndefined();
     expect(expectGroup(layout.root).group.sizes).toEqual(sizes);
   });
@@ -1929,7 +1989,7 @@ describe("workspace-layout-store actions", () => {
     expect(findPaneById(layout.root, splitPaneId)?.focusedTabId).toBe(terminalTabId);
   });
 
-  it("focusTab reveals a hidden pane and focuses its requested tab without changing sizes", () => {
+  it("focusTab reveals an Explorer tab without moving workspace focus", () => {
     useWorkspaceLayoutIds("89898989-8989-8989-8989-898989898989");
     const workspaceKey = createWorkspaceKey();
     const store = workspaceLayoutStore.getState();
@@ -1947,7 +2007,7 @@ describe("workspace-layout-store actions", () => {
       },
       intent: "reveal",
     })!;
-    const paneId = store.showSidePanel(workspaceKey)!;
+    const paneId = store.showExplorerSidebar(workspaceKey)!;
     store.moveTabToPane(workspaceKey, targetTabId, paneId);
     store.openTab({
       workspaceKey: workspaceKey,
@@ -1959,17 +2019,17 @@ describe("workspace-layout-store actions", () => {
       workspaceLayoutStore.getState().layoutByWorkspace[workspaceKey].root,
     ).group;
     store.resizeSplit(workspaceKey, group.id, [0.7, 0.3]);
-    store.hideSidePanel(workspaceKey);
+    store.hideExplorerSidebar(workspaceKey);
     const splitSizes = workspaceLayoutStore.getState().splitSizesByWorkspace[workspaceKey];
 
     store.focusTab(workspaceKey, targetTabId);
 
     const state = workspaceLayoutStore.getState();
     const layout = state.layoutByWorkspace[workspaceKey];
-    expect(layout.focusedPaneId).toBe(paneId);
+    expect(layout.focusedPaneId).toBe("main");
     expect(findPaneById(layout.root, paneId)).toMatchObject({
       focusedTabId: targetTabId,
-      tabIds: [targetTabId, "working_diff"],
+      tabIds: ["files", "changes_tree", targetTabId],
     });
     expect(findPaneById(layout.root, paneId)?.hidden).toBeUndefined();
     expect(expectGroup(layout.root).group.sizes).toEqual(group.sizes);
@@ -2315,7 +2375,7 @@ describe("workspace-layout-store actions", () => {
     expect(layout.focusedPaneId).toBe(splitPaneId);
   });
 
-  it("focusPane reveals an explicitly targeted hidden pane", () => {
+  it("focusPane does not turn Explorer into workspace focus", () => {
     useWorkspaceLayoutIds("57575757-5757-5757-5757-575757575757");
     const workspaceKey = createWorkspaceKey();
     const store = workspaceLayoutStore.getState();
@@ -2325,15 +2385,15 @@ describe("workspace-layout-store actions", () => {
       target: { kind: "file", path: "/repo/worktree/a.ts" },
       intent: "reveal",
     });
-    const paneId = store.showSidePanel(workspaceKey)!;
+    const paneId = store.showExplorerSidebar(workspaceKey)!;
     store.focusPane(workspaceKey, "main");
-    store.hideSidePanel(workspaceKey);
+    store.hideExplorerSidebar(workspaceKey);
 
     store.focusPane(workspaceKey, paneId);
 
     const layout = workspaceLayoutStore.getState().layoutByWorkspace[workspaceKey];
-    expect(layout.focusedPaneId).toBe(paneId);
-    expect(findPaneById(layout.root, paneId)?.hidden).toBeUndefined();
+    expect(layout.focusedPaneId).toBe("main");
+    expect(findPaneById(layout.root, paneId)?.hidden).toBe(true);
   });
 
   it("closeTab collapses an emptied pane and keeps the nearest sibling focused", () => {
@@ -2501,7 +2561,7 @@ describe("workspace-layout-store actions", () => {
     expect(collectAllTabs(layout.root).some((tab) => tab.tabId === newTabId)).toBe(false);
   });
 
-  it("moving the Side panel's sole New tab hides the panel instead of moving the tab", () => {
+  it("does not move Explorer-only default tabs into main", () => {
     const workspaceKey = createWorkspaceKey();
     const store = workspaceLayoutStore.getState();
     const fileTabId = store.openTab({
@@ -2509,16 +2569,19 @@ describe("workspace-layout-store actions", () => {
       target: { kind: "file", path: "/repo/worktree/a.ts" },
       intent: "reveal",
     }) as string;
-    const sidePanelPaneId = store.showSidePanel(workspaceKey) as string;
+    const explorerSidebarPaneId = store.showExplorerSidebar(workspaceKey) as string;
     const before = workspaceLayoutStore.getState().layoutByWorkspace[workspaceKey];
-    const newTabId = findPaneById(before.root, sidePanelPaneId)?.focusedTabId as string;
+    const changesTabId = findPaneById(before.root, explorerSidebarPaneId)?.focusedTabId as string;
 
-    store.moveTabToPane(workspaceKey, newTabId, "main");
+    store.moveTabToPane(workspaceKey, changesTabId, "main");
 
     const layout = workspaceLayoutStore.getState().layoutByWorkspace[workspaceKey];
-    expect(findPaneById(layout.root, sidePanelPaneId)?.hidden).toBe(true);
+    expect(findPaneById(layout.root, explorerSidebarPaneId)?.hidden).toBeUndefined();
     expect(findPaneById(layout.root, "main")?.tabIds).toEqual([fileTabId]);
-    expect(findPaneById(layout.root, sidePanelPaneId)?.tabIds).toEqual([newTabId]);
+    expect(findPaneById(layout.root, explorerSidebarPaneId)?.tabIds).toEqual([
+      "files",
+      "changes_tree",
+    ]);
   });
 
   it("closeTab cascades group unwrapping when an inner split collapses to a single pane", () => {
@@ -2648,14 +2711,18 @@ describe("workspace-layout-store actions", () => {
     expect(persisted).toEqual({
       layoutByWorkspace: { [workspaceKey]: layout },
       splitSizesByWorkspace: currentState.splitSizesByWorkspace,
+      explorerSidebarWidthByWorkspace: currentState.explorerSidebarWidthByWorkspace,
       // The persisted key keeps its pre-rename spelling for older clients.
       explorerPaneIdByWorkspace: {},
+      sidePaneIdByWorkspace: currentState.sidePaneIdByWorkspace,
     });
     expect(layout && collectAllTabs(layout.root).map((tab) => tab.target)).toEqual([
       {
         kind: "working_diff",
         focusPath: "src/a.ts",
       },
+      { kind: "files" },
+      { kind: "changes_tree" },
     ]);
   });
 
@@ -2826,7 +2893,9 @@ describe("workspace-layout-store actions", () => {
     expect(partialize?.(state)).toEqual({
       layoutByWorkspace: {},
       splitSizesByWorkspace: {},
+      explorerSidebarWidthByWorkspace: {},
       explorerPaneIdByWorkspace: {},
+      sidePaneIdByWorkspace: {},
     });
   });
 
@@ -2863,7 +2932,9 @@ describe("workspace-layout-store actions", () => {
     expect(partialize?.(state)).toEqual({
       layoutByWorkspace: {},
       splitSizesByWorkspace: {},
+      explorerSidebarWidthByWorkspace: {},
       explorerPaneIdByWorkspace: {},
+      sidePaneIdByWorkspace: {},
     });
   });
 
@@ -3447,7 +3518,7 @@ describe("workspace-layout-store actions", () => {
     expect(workspaceLayoutStore.getState().layoutByWorkspace[workspaceKey]).toBe(before);
   });
 
-  it("closePane hides the side panel instead of removing it, keeping its tabs", () => {
+  it("closePane hides Explorer instead of removing it, keeping its tabs", () => {
     const workspaceKey = createWorkspaceKey();
     const store = workspaceLayoutStore.getState();
     store.openTab({
@@ -3455,7 +3526,7 @@ describe("workspace-layout-store actions", () => {
       target: { kind: "agent", agentId: "kept" },
       intent: "reveal",
     });
-    const paneId = store.showSidePanel(workspaceKey) as string;
+    const paneId = store.showExplorerSidebar(workspaceKey) as string;
     const filesTabId = store.openTab({
       workspaceKey: workspaceKey,
       target: { kind: "files" },
@@ -3468,14 +3539,14 @@ describe("workspace-layout-store actions", () => {
     const layout = workspaceLayoutStore.getState().layoutByWorkspace[workspaceKey];
     expect(findPaneById(layout.root, paneId)?.hidden).toBe(true);
     expect(collectAllTabs(layout.root).map((tab) => tab.tabId)).toContain(filesTabId);
-    expect(store.showSidePanel(workspaceKey)).toBe(paneId);
+    expect(store.showExplorerSidebar(workspaceKey)).toBe(paneId);
     expect(
       findPaneById(workspaceLayoutStore.getState().layoutByWorkspace[workspaceKey].root, paneId)
         ?.hidden,
     ).toBeUndefined();
   });
 
-  it("closing the final Side panel content tab leaves New tab hidden until reveal", () => {
+  it("closing Files leaves Changes available in Explorer", () => {
     const workspaceKey = createWorkspaceKey();
     const store = workspaceLayoutStore.getState();
     store.openTab({
@@ -3483,7 +3554,7 @@ describe("workspace-layout-store actions", () => {
       target: { kind: "agent", agentId: "kept" },
       intent: "reveal",
     });
-    const paneId = store.showSidePanel(workspaceKey) as string;
+    const paneId = store.showExplorerSidebar(workspaceKey) as string;
     const filesTabId = store.openTab({
       workspaceKey: workspaceKey,
       target: { kind: "files" },
@@ -3495,20 +3566,20 @@ describe("workspace-layout-store actions", () => {
 
     let layout = workspaceLayoutStore.getState().layoutByWorkspace[workspaceKey];
     const hiddenPane = findPaneById(layout.root, paneId);
-    expect(hiddenPane?.hidden).toBe(true);
+    expect(hiddenPane?.hidden).toBeUndefined();
     expect(hiddenPane?.tabIds).toHaveLength(1);
     expect(
       collectAllTabs(layout.root).find((tab) => tab.tabId === hiddenPane?.focusedTabId)?.target,
-    ).toEqual({ kind: "new_tab" });
-    expect(collectAllPanes(layout.root).map((pane) => pane.id)).toEqual(["main"]);
+    ).toEqual({ kind: "changes_tree" });
+    expect(collectAllPanes(layout.root).map((pane) => pane.id)).toEqual(["main", paneId]);
 
-    expect(store.showSidePanel(workspaceKey)).toBe(paneId);
+    expect(store.showExplorerSidebar(workspaceKey)).toBe(paneId);
     layout = workspaceLayoutStore.getState().layoutByWorkspace[workspaceKey];
     expect(findPaneById(layout.root, paneId)?.tabIds).toEqual(hiddenPane?.tabIds);
     expect(findPaneById(layout.root, paneId)?.hidden).toBeUndefined();
   });
 
-  it("closing one of several Side panel tabs leaves the panel visible", () => {
+  it("closing one of several Explorer tabs leaves the sidebar visible", () => {
     const workspaceKey = createWorkspaceKey();
     const store = workspaceLayoutStore.getState();
     store.openTab({
@@ -3516,7 +3587,7 @@ describe("workspace-layout-store actions", () => {
       target: { kind: "agent", agentId: "kept" },
       intent: "reveal",
     });
-    const paneId = store.showSidePanel(workspaceKey) as string;
+    const paneId = store.showExplorerSidebar(workspaceKey) as string;
     const filesTabId = store.openTab({
       workspaceKey: workspaceKey,
       target: { kind: "files" },
@@ -3534,10 +3605,10 @@ describe("workspace-layout-store actions", () => {
 
     const layout = workspaceLayoutStore.getState().layoutByWorkspace[workspaceKey];
     expect(findPaneById(layout.root, paneId)?.hidden).toBeUndefined();
-    expect(findPaneById(layout.root, paneId)?.tabIds).toEqual(["working_diff"]);
+    expect(findPaneById(layout.root, paneId)?.tabIds).toEqual(["changes_tree", "working_diff"]);
   });
 
-  it("closing the final Side panel content tab keeps New tab on screen", () => {
+  it("closing Files keeps Changes on screen without removing the final ordinary pane", () => {
     const workspaceKey = createWorkspaceKey();
     const store = workspaceLayoutStore.getState();
     store.openTab({
@@ -3545,7 +3616,7 @@ describe("workspace-layout-store actions", () => {
       target: { kind: "agent", agentId: "only" },
       intent: "reveal",
     });
-    const paneId = store.showSidePanel(workspaceKey) as string;
+    const paneId = store.showExplorerSidebar(workspaceKey) as string;
     const filesTabId = store.openTab({
       workspaceKey: workspaceKey,
       target: { kind: "files" },
@@ -3557,12 +3628,13 @@ describe("workspace-layout-store actions", () => {
     store.closeTab(workspaceKey, filesTabId);
 
     const layout = workspaceLayoutStore.getState().layoutByWorkspace[workspaceKey];
-    expect(collectAllPanes(layout.root).map((pane) => pane.id)).toEqual([paneId]);
+    expect(collectAllPanes(layout.root).map((pane) => pane.id)).toEqual(["main", paneId]);
+    expect(findPaneById(layout.root, "main")?.tabIds).toHaveLength(1);
     const finalPane = findPaneById(layout.root, paneId);
     expect(finalPane?.tabIds).toHaveLength(1);
     expect(
       collectAllTabs(layout.root).find((tab) => tab.tabId === finalPane?.focusedTabId)?.target,
-    ).toEqual({ kind: "new_tab" });
+    ).toEqual({ kind: "changes_tree" });
     expect(findPaneById(layout.root, paneId)?.hidden).toBeUndefined();
   });
 
@@ -3574,12 +3646,12 @@ describe("workspace-layout-store actions", () => {
       target: { kind: "agent", agentId: "agent-1" },
       intent: "reveal",
     });
-    const sidePanelPaneId = store.showSidePanel(workspaceKey) as string;
+    const explorerSidebarPaneId = store.showExplorerSidebar(workspaceKey) as string;
     const changesTabId = store.openTab({
       workspaceKey: workspaceKey,
       target: { kind: "working_diff" },
       intent: "reveal",
-      placement: { mode: "pane", paneId: sidePanelPaneId },
+      placement: { mode: "pane", paneId: explorerSidebarPaneId },
     });
 
     const reopened = store.openTab({
@@ -3605,12 +3677,12 @@ describe("workspace-layout-store actions", () => {
       target: { kind: "agent", agentId: "agent-1" },
       intent: "reveal",
     });
-    const sidePanelPaneId = store.showSidePanel(workspaceKey) as string;
+    const explorerSidebarPaneId = store.showExplorerSidebar(workspaceKey) as string;
     const fileTabId = store.openTab({
       workspaceKey: workspaceKey,
       target: { kind: "file", path: "/repo/a.ts" },
       intent: "reveal",
-      placement: { mode: "prefer", paneId: sidePanelPaneId },
+      placement: { mode: "prefer", paneId: explorerSidebarPaneId },
     }) as string;
     store.moveTabToPane(workspaceKey, fileTabId, "main");
 
@@ -3618,7 +3690,7 @@ describe("workspace-layout-store actions", () => {
       workspaceKey: workspaceKey,
       target: { kind: "file", path: "/repo/a.ts" },
       intent: "reveal",
-      placement: { mode: "prefer", paneId: sidePanelPaneId },
+      placement: { mode: "prefer", paneId: explorerSidebarPaneId },
     });
 
     const layout = workspaceLayoutStore.getState().layoutByWorkspace[workspaceKey];
@@ -3626,7 +3698,7 @@ describe("workspace-layout-store actions", () => {
     expect(findPaneContainingTab(layout.root, fileTabId)?.id).toBe("main");
     expect(layout.focusedPaneId).toBe("main");
   });
-  it("leaves New tab in the Side panel when its content is claimed by another pane", () => {
+  it("leaves the default tabs in Explorer when content is claimed by main", () => {
     const workspaceKey = createWorkspaceKey();
     const store = workspaceLayoutStore.getState();
     store.openTab({
@@ -3634,7 +3706,7 @@ describe("workspace-layout-store actions", () => {
       target: { kind: "agent", agentId: "agent-1" },
       intent: "reveal",
     });
-    const paneId = store.showSidePanel(workspaceKey) as string;
+    const paneId = store.showExplorerSidebar(workspaceKey) as string;
     const changesTabId = store.openTab({
       workspaceKey: workspaceKey,
       target: { kind: "working_diff" },
@@ -3652,74 +3724,30 @@ describe("workspace-layout-store actions", () => {
     const layout = workspaceLayoutStore.getState().layoutByWorkspace[workspaceKey];
     expect(findPaneContainingTab(layout.root, changesTabId)?.id).toBe("main");
     const sidePane = findPaneById(layout.root, paneId);
-    expect(sidePane?.tabIds).toHaveLength(1);
-    expect(
-      collectAllTabs(layout.root).find((tab) => tab.tabId === sidePane?.focusedTabId)?.target,
-    ).toEqual({ kind: "new_tab" });
+    expect(sidePane?.tabIds).toEqual(["files", "changes_tree"]);
     expect(findPaneById(layout.root, paneId)?.hidden).toBeUndefined();
   });
-  it("closePane refuses to hide the side panel once it is the only visible pane", () => {
+  it("keeps the final ordinary pane when Explorer is visible", () => {
     const workspaceKey = createWorkspaceKey();
     const store = workspaceLayoutStore.getState();
-    store.openTab({
+    const agentTabId = store.openTab({
       workspaceKey: workspaceKey,
       target: { kind: "agent", agentId: "only" },
       intent: "reveal",
     });
-    const paneId = store.showSidePanel(workspaceKey) as string;
-    store.closePane(workspaceKey, "main");
-    const afterMainClosed = workspaceLayoutStore.getState().layoutByWorkspace[workspaceKey];
-    expect(findPaneById(afterMainClosed.root, "main")).toBeNull();
-    expect(collectAllPanes(afterMainClosed.root).map((pane) => pane.id)).toEqual([paneId]);
-    const before = afterMainClosed;
-
-    store.closePane(workspaceKey, paneId);
-
-    const layout = workspaceLayoutStore.getState().layoutByWorkspace[workspaceKey];
-    expect(layout).toBe(before);
-    expect(findPaneById(layout.root, paneId)?.hidden).toBeUndefined();
-  });
-  it("closePane refuses to hide the side panel once it is the only visible pane", () => {
-    const workspaceKey = createWorkspaceKey();
-    const store = workspaceLayoutStore.getState();
-    store.openTab({
-      workspaceKey: workspaceKey,
-      target: { kind: "agent", agentId: "only" },
-      intent: "reveal",
-    });
-    const paneId = store.showSidePanel(workspaceKey) as string;
-    store.closePane(workspaceKey, "main");
-    const afterMainClosed = workspaceLayoutStore.getState().layoutByWorkspace[workspaceKey];
-    expect(findPaneById(afterMainClosed.root, "main")).toBeNull();
-    expect(collectAllPanes(afterMainClosed.root).map((pane) => pane.id)).toEqual([paneId]);
-    const before = afterMainClosed;
-
-    store.closePane(workspaceKey, paneId);
-
-    const layout = workspaceLayoutStore.getState().layoutByWorkspace[workspaceKey];
-    expect(layout).toBe(before);
-    expect(findPaneById(layout.root, paneId)?.hidden).toBeUndefined();
-  });
-  it("hideSidePanel refuses to blank the workspace when the side panel is all that is left", () => {
-    const workspaceKey = createWorkspaceKey();
-    const store = workspaceLayoutStore.getState();
-    store.openTab({
-      workspaceKey: workspaceKey,
-      target: { kind: "agent", agentId: "only" },
-      intent: "reveal",
-    });
-    const paneId = store.showSidePanel(workspaceKey) as string;
-    store.closePane(workspaceKey, "main");
+    const paneId = store.showExplorerSidebar(workspaceKey) as string;
     const before = workspaceLayoutStore.getState().layoutByWorkspace[workspaceKey];
-    expect(collectAllPanes(before.root).map((pane) => pane.id)).toEqual([paneId]);
 
-    store.hideSidePanel(workspaceKey);
+    store.closePane(workspaceKey, "main");
 
     const layout = workspaceLayoutStore.getState().layoutByWorkspace[workspaceKey];
     expect(layout).toBe(before);
-    expect(collectAllPanes(layout.root).map((pane) => pane.id)).toEqual([paneId]);
+    expect(findPaneById(layout.root, "main")?.tabIds).toEqual([agentTabId]);
+    expect(findPaneById(layout.root, paneId)?.hidden).toBeUndefined();
+    expect(collectAllPanes(layout.root).map((pane) => pane.id)).toEqual(["main", paneId]);
   });
-  it("canDismissPaneInLayout refuses the final visible pane, loaded or empty", () => {
+
+  it("canDismissPaneInLayout treats Explorer separately from ordinary panes", () => {
     const workspaceKey = createWorkspaceKey();
     const store = workspaceLayoutStore.getState();
     store.openTab({
@@ -3729,19 +3757,15 @@ describe("workspace-layout-store actions", () => {
     });
     const loadedFinal = workspaceLayoutStore.getState().layoutByWorkspace[workspaceKey];
 
-    // Only `main` is on screen; the side panel is present but hidden.
+    // Only `main` is on screen; Explorer is present but hidden.
     expect(collectAllPanes(loadedFinal.root).map((pane) => pane.id)).toEqual(["main"]);
-    expect(canDismissPaneInLayout(loadedFinal, "main")).toBe(false);
-    expect(canDismissPaneInLayout(loadedFinal, "explorer")).toBe(false);
+    expect(canDismissPaneInLayout(loadedFinal, "main", "explorer")).toBe(false);
+    expect(canDismissPaneInLayout(loadedFinal, "explorer", "explorer")).toBe(false);
 
-    const paneId = store.showSidePanel(workspaceKey) as string;
+    const paneId = store.showExplorerSidebar(workspaceKey) as string;
     const bothVisible = workspaceLayoutStore.getState().layoutByWorkspace[workspaceKey];
-    expect(canDismissPaneInLayout(bothVisible, "main")).toBe(true);
-    expect(canDismissPaneInLayout(bothVisible, paneId)).toBe(true);
-
-    store.closePane(workspaceKey, "main");
-    const sidePanelAlone = workspaceLayoutStore.getState().layoutByWorkspace[workspaceKey];
-    expect(canDismissPaneInLayout(sidePanelAlone, paneId)).toBe(false);
+    expect(canDismissPaneInLayout(bothVisible, "main", paneId)).toBe(false);
+    expect(canDismissPaneInLayout(bothVisible, paneId, paneId)).toBe(true);
   });
 
   it("closePane on a loaded final pane keeps the pane and every tab in it", () => {
@@ -3752,18 +3776,13 @@ describe("workspace-layout-store actions", () => {
       target: { kind: "agent", agentId: "only" },
       intent: "reveal",
     });
-    const filesTabId = store.openTab({
-      workspaceKey: workspaceKey,
-      target: { kind: "files" },
-      intent: "reveal",
-    });
     const before = workspaceLayoutStore.getState().layoutByWorkspace[workspaceKey];
 
     store.closePane(workspaceKey, "main");
 
     const layout = workspaceLayoutStore.getState().layoutByWorkspace[workspaceKey];
     expect(layout).toBe(before);
-    expect(findPaneById(layout.root, "main")?.tabIds).toEqual([agentTabId, filesTabId]);
+    expect(findPaneById(layout.root, "main")?.tabIds).toEqual([agentTabId]);
     expect(collectAllPanes(layout.root).map((pane) => pane.id)).toEqual(["main"]);
   });
 });
diff --git a/packages/app/src/stores/workspace-layout-store.ts b/packages/app/src/stores/workspace-layout-store.ts
index 8b4b0f2a75..4ef564f328 100644
--- a/packages/app/src/stores/workspace-layout-store.ts
+++ b/packages/app/src/stores/workspace-layout-store.ts
@@ -21,9 +21,9 @@ import {
   createDefaultLayout,
   DEFAULT_PANE_ID,
   AMBIENT_PLACEMENT,
-  createWorkspaceLayoutWithSidePanel,
+  createWorkspaceLayoutWithExplorerSidebar,
   FOCUSED_PANE_PLACEMENT,
-  SIDE_PANEL_PANE_ID,
+  EXPLORER_SIDEBAR_PANE_ID,
   findPaneById,
   findPaneContainingTab,
   focusPaneInLayout,
@@ -44,7 +44,9 @@ import {
   reorderPaneTabsInLayout,
   setPaneHiddenInLayout,
   setTabStateInLayout,
+  selectTabInPaneInLayout,
   splitPaneEmptyInLayout,
+  splitWorkspaceRootRightInLayout,
   splitPaneInLayout,
   stripEphemeralTabsFromLayout,
   type SplitGroup,
@@ -57,6 +59,7 @@ import {
 } from "@/stores/workspace-layout-actions";
 import { normalizeWorkspaceTabTarget } from "@/workspace-tabs/identity";
 import { createValidatedPersistStorage } from "@/storage/validated-persist-storage";
+import { panelTargetSupportsHostForWorkspaceKey } from "@/plugins/workspace-panels/locations";
 
 export {
   AMBIENT_PLACEMENT,
@@ -65,7 +68,7 @@ export {
   collectAllTabs,
   createDefaultLayout,
   DEFAULT_PANE_ID,
-  createWorkspaceLayoutWithSidePanel,
+  createWorkspaceLayoutWithExplorerSidebar,
   FOCUSED_PANE_PLACEMENT,
   findPaneById,
   findPaneContainingTab,
@@ -100,17 +103,22 @@ export interface OpenWorkspaceTabInput {
 interface WorkspaceLayoutStore {
   layoutByWorkspace: Record<string, WorkspaceLayout>;
   splitSizesByWorkspace: Record<string, Record<string, number[]>>;
+  explorerSidebarWidthByWorkspace: Record<string, number>;
   pinnedAgentIdsByWorkspace: Record<string, Set<string>>;
   pendingAgentIdsByWorkspace: Record<string, Set<string>>;
   hiddenAgentIdsByWorkspace: Record<string, Set<string>>;
   focusRestorationByWorkspace: Record<string, WorkspaceFocusRestorationState>;
-  sidePanelPaneIdByWorkspace: Record<string, string | null>;
+  explorerSidebarPaneIdByWorkspace: Record<string, string | null>;
+  sidePaneIdByWorkspace: Record<string, string | null>;
   openTab: (input: OpenWorkspaceTabInput) => string | null;
-  /** Reveals the side panel without putting anything in it. Returns its pane id. */
-  showSidePanel: (workspaceKey: string) => string | null;
-  hideSidePanel: (workspaceKey: string) => void;
+  /** Reveals the Explorer sidebar without selecting a view. Returns its pane id. */
+  showExplorerSidebar: (workspaceKey: string) => string | null;
+  hideExplorerSidebar: (workspaceKey: string) => void;
+  /** Returns the ordinary right-side workspace pane, creating it when absent. */
+  ensureSidePane: (workspaceKey: string) => string | null;
   closeTab: (workspaceKey: string, tabId: string) => void;
   focusTab: (workspaceKey: string, tabId: string) => void;
+  selectTabInPane: (workspaceKey: string, paneId: string, tabId: string) => void;
   replaceTab: (
     workspaceKey: string,
     tabId: string,
@@ -140,8 +148,8 @@ interface WorkspaceLayoutStore {
   ) => string | null;
   moveTabToPane: (workspaceKey: string, tabId: string, toPaneId: string) => void;
   /**
-   * Dismisses the pane along with whatever it still holds. The side panel hides so
-   * the user can bring it back; every other pane is removed. Callers own tab teardown
+   * Dismisses the pane along with whatever it still holds. The Explorer hides so the
+   * user can bring it back; every ordinary pane is removed. Callers own tab teardown
    * (archiving agents, killing terminals) first. No-ops on the last visible pane.
    */
   closePane: (workspaceKey: string, paneId: string) => void;
@@ -149,6 +157,7 @@ interface WorkspaceLayoutStore {
   unfocusPane: (workspaceKey: string) => string | null;
   restorePaneFocus: (workspaceKey: string, token: string) => void;
   resizeSplit: (workspaceKey: string, groupId: string, sizes: number[]) => void;
+  resizeExplorerSidebar: (workspaceKey: string, width: number) => void;
   reorderTabsInPane: (workspaceKey: string, paneId: string, tabIds: string[]) => void;
   pinAgent: (workspaceKey: string, agentId: string) => void;
   unpinAgent: (workspaceKey: string, agentId: string) => void;
@@ -162,8 +171,8 @@ interface WorkspaceFocusRestorationState {
   tokens: string[];
 }
 
-// The root companion split is always present for the hidden side panel pane.
-// Preserve four user-created split levels beneath it.
+// The persisted tree includes the Explorer shell; the renderer docks it outside workspace splits.
+// Preserve four user-created split levels beneath that bookkeeping node.
 const MAX_TREE_DEPTH = 5;
 
 const WorkspaceDraftTabSetupStorageSchema = z.strictObject({
@@ -189,6 +198,7 @@ const WorkspaceTabTargetStorageSchema = z.discriminatedUnion("kind", [
   }),
   z.strictObject({ kind: z.literal("terminal"), terminalId: z.string() }),
   z.strictObject({ kind: z.literal("browser"), browserId: z.string() }),
+  z.strictObject({ kind: z.literal("changes_tree") }),
   z.strictObject({ kind: z.literal("files") }),
   z.strictObject({ kind: z.literal("pull_request") }),
   z.strictObject({
@@ -261,14 +271,33 @@ const WorkspaceLayoutStorageSchema: z.ZodType<WorkspaceLayout> = z.strictObject(
 const WorkspaceLayoutPersistedStateSchema = z.strictObject({
   layoutByWorkspace: z.record(z.string(), WorkspaceLayoutStorageSchema),
   splitSizesByWorkspace: z.record(z.string(), z.record(z.string(), z.array(z.number()))).optional(),
+  explorerSidebarWidthByWorkspace: z.record(z.string(), z.number()).optional(),
+  // COMPAT(explorerSidebarWidth): added in v0.6, remove after 2027-08-25.
+  explorerSidebarRatioByWorkspace: z.record(z.string(), z.number()).optional(),
+  // COMPAT(explorerSidebarNaming): accepted from builds that called this dock the Side panel.
+  sidePanelRatioByWorkspace: z.record(z.string(), z.number()).optional(),
   // The persisted keys keep their pre-rename spelling: the schema is strict, so a
   // rename here would fail every existing blob and wipe the layout it describes.
   explorerPaneIdByWorkspace: z.record(z.string(), z.string().nullable()).optional(),
+  sidePaneIdByWorkspace: z.record(z.string(), z.string().nullable()).optional(),
   // COMPAT(pullRequestAutoAdd): PR detection stopped opening a tab in v0.5; accepted
   // and ignored so upgrading does not discard the layout. Remove after 2027-08-20.
   acknowledgedPullRequestByWorkspace: z.record(z.string(), z.string()).optional(),
 });
 
+const LEGACY_EXPLORER_SIDEBAR_REFERENCE_WIDTH = 1440;
+
+function convertLegacyExplorerSidebarRatios(
+  ratiosByWorkspace: Record<string, number>,
+): Record<string, number> {
+  return Object.fromEntries(
+    Object.entries(ratiosByWorkspace).map(([workspaceKey, ratio]) => [
+      workspaceKey,
+      ratio * LEGACY_EXPLORER_SIDEBAR_REFERENCE_WIDTH,
+    ]),
+  );
+}
+
 function trimNonEmpty(value: string | null | undefined): string | null {
   if (typeof value !== "string") {
     return null;
@@ -331,33 +360,58 @@ function getWorkspaceLayout(
   state: Record<string, WorkspaceLayout>,
   workspaceKey: string,
 ): WorkspaceLayout {
-  return normalizeLayout(state[workspaceKey] ?? createWorkspaceLayoutWithSidePanel());
+  return normalizeLayout(state[workspaceKey] ?? createWorkspaceLayoutWithExplorerSidebar());
 }
 
-type SidePanelState = Pick<
+function keepWorkspaceFocusOutOfExplorerSidebar(
+  layout: WorkspaceLayout,
+  explorerSidebarPaneId: string | null,
+  preferredMainPaneId?: string | null,
+): WorkspaceLayout {
+  if (!explorerSidebarPaneId || layout.focusedPaneId !== explorerSidebarPaneId) {
+    return layout;
+  }
+  const panes = collectAllPanes(layout.root);
+  const preferredPane = panes.find(
+    (pane) => pane.id === preferredMainPaneId && pane.id !== explorerSidebarPaneId,
+  );
+  const mainPane =
+    preferredPane ??
+    panes.find((pane) => pane.id === DEFAULT_PANE_ID && pane.id !== explorerSidebarPaneId) ??
+    panes.find((pane) => pane.id !== explorerSidebarPaneId);
+  return { ...layout, focusedPaneId: mainPane?.id ?? null };
+}
+
+type ExplorerSidebarState = Pick<
   WorkspaceLayoutStore,
-  "layoutByWorkspace" | "sidePanelPaneIdByWorkspace"
+  "layoutByWorkspace" | "explorerSidebarPaneIdByWorkspace"
 >;
 
 /**
- * The side panel's pane, on screen or not. A workspace the user has not laid out
+ * The Explorer sidebar's pane, on screen or not. A workspace the user has not laid out
  * yet still has one — the default layout is born with it — so this answers before
  * the first tab exists.
  */
-export function selectSidePanelPaneId(state: SidePanelState, workspaceKey: string): string | null {
+export function selectExplorerSidebarPaneId(
+  state: ExplorerSidebarState,
+  workspaceKey: string,
+): string | null {
   const layout = getWorkspaceLayout(state.layoutByWorkspace, workspaceKey);
-  return resolveSidePanelPaneId(layout, state.sidePanelPaneIdByWorkspace[workspaceKey]);
+  return resolveExplorerSidebarPaneId(layout, state.explorerSidebarPaneIdByWorkspace[workspaceKey]);
 }
 
-/** Whether the side panel pane is currently on screen. */
-export function selectIsSidePanelVisible(state: SidePanelState, workspaceKey: string): boolean {
+/** Whether the Explorer sidebar pane is currently on screen. */
+export function selectIsExplorerSidebarVisible(
+  state: ExplorerSidebarState,
+  workspaceKey: string,
+): boolean {
   const layout = state.layoutByWorkspace[workspaceKey];
-  const paneId = layout ? selectSidePanelPaneId(state, workspaceKey) : null;
+  const paneId = layout ? selectExplorerSidebarPaneId(state, workspaceKey) : null;
   const pane = paneId && layout ? findPaneById(layout.root, paneId) : null;
   return Boolean(pane && pane.hidden !== true);
 }
 
-export function resolveSidePanelPaneId(
+export function resolveExplorerSidebarPaneId(
   layout: WorkspaceLayout,
   registeredPaneId: string | null | undefined,
 ): string | null {
@@ -365,18 +419,31 @@ export function resolveSidePanelPaneId(
   if (registeredPane) {
     return registeredPane.id;
   }
-  const defaultPane = findPaneById(layout.root, SIDE_PANEL_PANE_ID);
+  const defaultPane = findPaneById(layout.root, EXPLORER_SIDEBAR_PANE_ID);
   return defaultPane?.id ?? null;
 }
 
-function ensurePersistedSidePanelPane(input: {
+function ensurePersistedExplorerSidebarPane(input: {
+  workspaceKey: string;
   layout: WorkspaceLayout;
   registeredPaneId: string | null | undefined;
   ids: WorkspaceLayoutIdSource;
 }): { layout: WorkspaceLayout; paneId: string } | null {
-  const existingPaneId = resolveSidePanelPaneId(input.layout, input.registeredPaneId);
+  const existingPaneId = resolveExplorerSidebarPaneId(input.layout, input.registeredPaneId);
   if (existingPaneId) {
-    return { layout: input.layout, paneId: existingPaneId };
+    const migratedLayout = migrateExplorerSidebarTabs(
+      input.workspaceKey,
+      input.layout,
+      existingPaneId,
+    );
+    return {
+      layout: keepWorkspaceFocusOutOfExplorerSidebar(
+        migratedLayout,
+        existingPaneId,
+        input.layout.focusedPaneId,
+      ),
+      paneId: existingPaneId,
+    };
   }
   const targetPaneId =
     findPaneById(input.layout.root, input.layout.focusedPaneId)?.id ??
@@ -399,23 +466,129 @@ function ensurePersistedSidePanelPane(input: {
     paneId: split.paneId,
     hidden: true,
   });
-  return { layout: hiddenLayout ?? split.layout, paneId: split.paneId };
+  const seededLayout = restoreEmptyPanesInLayout(
+    stripEphemeralTabsFromLayout(hiddenLayout ?? split.layout),
+    split.paneId,
+  );
+  return {
+    layout: migrateExplorerSidebarTabs(input.workspaceKey, seededLayout, split.paneId),
+    paneId: split.paneId,
+  };
+}
+
+/** Keeps hydration compatible while enforcing the Explorer's navigation-only contract. */
+function migrateExplorerSidebarTabs(
+  workspaceKey: string,
+  layout: WorkspaceLayout,
+  paneId: string,
+): WorkspaceLayout {
+  const changesMigrated = migrateLegacyExplorerSidebarChanges(layout, paneId);
+  const pane = findPaneById(changesMigrated.root, paneId);
+  if (!pane) return changesMigrated;
+  const targetPane =
+    findPaneById(changesMigrated.root, DEFAULT_PANE_ID) ??
+    collectAllPanes(changesMigrated.root).find((candidate) => candidate.id !== paneId);
+  if (!targetPane) return changesMigrated;
+  const tabsById = new Map(collectAllTabs(changesMigrated.root).map((tab) => [tab.tabId, tab]));
+  let nextLayout = changesMigrated;
+  for (const tabId of pane.tabIds) {
+    const tab = tabsById.get(tabId);
+    if (
+      !tab ||
+      tab.target.kind === "new_tab" ||
+      panelTargetSupportsHostForWorkspaceKey(workspaceKey, tab.target, "explorer")
+    ) {
+      continue;
+    }
+    nextLayout =
+      moveTabToPaneInLayout({ layout: nextLayout, tabId, toPaneId: targetPane.id }) ?? nextLayout;
+  }
+
+  return nextLayout;
+}
+
+function migrateLegacyExplorerSidebarChanges(
+  layout: WorkspaceLayout,
+  paneId: string,
+): WorkspaceLayout {
+  const pane = findPaneById(layout.root, paneId);
+  if (!pane) return layout;
+
+  const tabsById = new Map(collectAllTabs(layout.root).map((tab) => [tab.tabId, tab]));
+  const paneTabs = pane.tabIds.flatMap((tabId) => {
+    const tab = tabsById.get(tabId);
+    return tab ? [tab] : [];
+  });
+  const legacyTabs = paneTabs.filter((tab) => tab.target.kind === "working_diff");
+  if (legacyTabs.length === 0) return layout;
+
+  let nextLayout = layout;
+  let hasChangesTree = paneTabs.some((tab) => tab.target.kind === "changes_tree");
+  for (const legacyTab of legacyTabs) {
+    if (hasChangesTree) {
+      nextLayout =
+        closeTabInLayout({
+          layout: nextLayout,
+          tabId: legacyTab.tabId,
+          preserveEmptyPaneId: paneId,
+        }) ?? nextLayout;
+      continue;
+    }
+    const replacement = replaceTabTargetInLayout({
+      layout: nextLayout,
+      tabId: legacyTab.tabId,
+      target: { kind: "changes_tree" },
+      createTabId: createWorkspaceTabInstanceId,
+    });
+    if (replacement) {
+      nextLayout = replacement.layout;
+      hasChangesTree = true;
+    }
+  }
+  return nextLayout;
 }
 
 function getOpenTabPlacement(
   state: WorkspaceLayoutStore,
   workspaceKey: string,
+  target: WorkspaceTabTarget,
   placement: WorkspaceTabPlacement | undefined,
 ): {
   layout: WorkspaceLayout;
   placement: WorkspaceTabPlacement;
-  sidePanelPaneId: string | null;
+  explorerSidebarPaneId: string | null;
 } {
   const layout = getWorkspaceLayout(state.layoutByWorkspace, workspaceKey);
+  const explorerSidebarPaneId = resolveExplorerSidebarPaneId(
+    layout,
+    state.explorerSidebarPaneIdByWorkspace[workspaceKey],
+  );
+  const requestedPlacement = placement ?? AMBIENT_PLACEMENT;
+  const supportsPane = (pane: SplitPane) =>
+    panelTargetSupportsHostForWorkspaceKey(
+      workspaceKey,
+      target,
+      pane.id === explorerSidebarPaneId ? "explorer" : "main",
+    );
+  const requestedPaneId =
+    requestedPlacement.mode === "pane" || requestedPlacement.mode === "prefer"
+      ? requestedPlacement.paneId
+      : layout.focusedPaneId;
+  const requestedPane = findPaneById(layout.root, requestedPaneId);
+  const fallbackPane = collectAllPanes(layout.root).find(
+    (pane) => pane.hidden !== true && supportsPane(pane),
+  );
+  let resolvedPlacement = requestedPlacement;
+  if ((!requestedPane || !supportsPane(requestedPane)) && fallbackPane) {
+    resolvedPlacement = {
+      mode: requestedPlacement.mode === "pane" ? "pane" : "prefer",
+      paneId: fallbackPane.id,
+    };
+  }
   return {
     layout,
-    placement: placement ?? AMBIENT_PLACEMENT,
-    sidePanelPaneId: resolveSidePanelPaneId(layout, state.sidePanelPaneIdByWorkspace[workspaceKey]),
+    placement: resolvedPlacement,
+    explorerSidebarPaneId,
   };
 }
 
@@ -431,6 +604,20 @@ function withoutFocusRestoration(
   return { focusRestorationByWorkspace };
 }
 
+function reconcileRememberedSidePane(
+  state: WorkspaceLayoutStore,
+  workspaceKey: string,
+  layout: WorkspaceLayout,
+): Pick<WorkspaceLayoutStore, "sidePaneIdByWorkspace"> {
+  const paneId = state.sidePaneIdByWorkspace[workspaceKey];
+  return {
+    sidePaneIdByWorkspace:
+      paneId && !findPaneById(layout.root, paneId)
+        ? { ...state.sidePaneIdByWorkspace, [workspaceKey]: null }
+        : state.sidePaneIdByWorkspace,
+  };
+}
+
 function attachParentTab(input: {
   layout: WorkspaceLayout;
   childTabId: string | null;
@@ -457,10 +644,10 @@ function attachParentTab(input: {
 }
 
 /**
- * Splits a side panel out of the pane the user is in. Only reached by layouts saved
- * before the side panel became part of the default tree; new ones are born with it.
+ * Splits an Explorer sidebar out of the pane the user is in. Only reached by layouts saved
+ * before the Explorer became part of the default tree; new ones are born with it.
  */
-function createSidePanelPane(
+function createExplorerSidebarPane(
   workspaceKey: string,
   layout: WorkspaceLayout,
   splitPaneEmpty: WorkspaceLayoutStore["splitPaneEmpty"],
@@ -478,18 +665,25 @@ export function createWorkspaceLayoutStore(
       (set, get) => ({
         layoutByWorkspace: {},
         splitSizesByWorkspace: {},
+        explorerSidebarWidthByWorkspace: {},
         pinnedAgentIdsByWorkspace: {},
         pendingAgentIdsByWorkspace: {},
         hiddenAgentIdsByWorkspace: {},
         focusRestorationByWorkspace: {},
-        sidePanelPaneIdByWorkspace: {},
+        explorerSidebarPaneIdByWorkspace: {},
+        sidePaneIdByWorkspace: {},
         openTab: (input) => {
           const normalizedWorkspaceKey = trimNonEmpty(input.workspaceKey);
           const normalizedTarget = normalizeWorkspaceTabTarget(input.target);
           if (!normalizedWorkspaceKey || !normalizedTarget) {
             return null;
           }
-          const placement = getOpenTabPlacement(get(), normalizedWorkspaceKey, input.placement);
+          const placement = getOpenTabPlacement(
+            get(),
+            normalizedWorkspaceKey,
+            normalizedTarget,
+            input.placement,
+          );
           let result;
           if (input.intent === "new") {
             result = createTabInLayout({
@@ -513,6 +707,14 @@ export function createWorkspaceLayoutStore(
               createTabId: createWorkspaceTabInstanceId,
             });
           }
+          if (!result) {
+            return null;
+          }
+          const nextLayout = keepWorkspaceFocusOutOfExplorerSidebar(
+            result.layout,
+            placement.explorerSidebarPaneId,
+            placement.layout.focusedPaneId,
+          );
           set((state) => ({
             ...withoutFocusRestoration(state, normalizedWorkspaceKey),
             hiddenAgentIdsByWorkspace:
@@ -527,16 +729,16 @@ export function createWorkspaceLayoutStore(
               ...state.layoutByWorkspace,
               [normalizedWorkspaceKey]: input.parentTabId
                 ? attachParentTab({
-                    layout: result.layout,
+                    layout: nextLayout,
                     childTabId: result.tabId,
                     parentTabId: input.parentTabId,
                   })
-                : result.layout,
+                : nextLayout,
             },
           }));
           return result.tabId;
         },
-        showSidePanel: (workspaceKey) => {
+        showExplorerSidebar: (workspaceKey) => {
           const normalizedWorkspaceKey = trimNonEmpty(workspaceKey);
           if (!normalizedWorkspaceKey) {
             return null;
@@ -544,29 +746,40 @@ export function createWorkspaceLayoutStore(
 
           const layout = getWorkspaceLayout(get().layoutByWorkspace, normalizedWorkspaceKey);
           const paneId =
-            resolveSidePanelPaneId(
+            resolveExplorerSidebarPaneId(
               layout,
-              get().sidePanelPaneIdByWorkspace[normalizedWorkspaceKey],
-            ) ?? createSidePanelPane(normalizedWorkspaceKey, layout, get().splitPaneEmpty);
+              get().explorerSidebarPaneIdByWorkspace[normalizedWorkspaceKey],
+            ) ?? createExplorerSidebarPane(normalizedWorkspaceKey, layout, get().splitPaneEmpty);
           if (!paneId) {
             return null;
           }
 
-          set((state) =>
-            state.sidePanelPaneIdByWorkspace[normalizedWorkspaceKey] === paneId
-              ? state
-              : {
-                  sidePanelPaneIdByWorkspace: {
-                    ...state.sidePanelPaneIdByWorkspace,
-                    [normalizedWorkspaceKey]: paneId,
-                  },
-                },
-          );
-          // Focusing a hidden pane reveals it, so this is both halves of "show".
-          get().focusPane(normalizedWorkspaceKey, paneId);
+          set((state) => {
+            const currentLayout = getWorkspaceLayout(
+              state.layoutByWorkspace,
+              normalizedWorkspaceKey,
+            );
+            const revealedLayout =
+              setPaneHiddenInLayout({ layout: currentLayout, paneId, hidden: false }) ??
+              currentLayout;
+            return {
+              layoutByWorkspace: {
+                ...state.layoutByWorkspace,
+                [normalizedWorkspaceKey]: keepWorkspaceFocusOutOfExplorerSidebar(
+                  revealedLayout,
+                  paneId,
+                  currentLayout.focusedPaneId,
+                ),
+              },
+              explorerSidebarPaneIdByWorkspace: {
+                ...state.explorerSidebarPaneIdByWorkspace,
+                [normalizedWorkspaceKey]: paneId,
+              },
+            };
+          });
           return paneId;
         },
-        hideSidePanel: (workspaceKey) => {
+        hideExplorerSidebar: (workspaceKey) => {
           const normalizedWorkspaceKey = trimNonEmpty(workspaceKey);
           if (!normalizedWorkspaceKey) {
             return;
@@ -574,9 +787,9 @@ export function createWorkspaceLayoutStore(
 
           set((state) => {
             const layout = getWorkspaceLayout(state.layoutByWorkspace, normalizedWorkspaceKey);
-            const paneId = resolveSidePanelPaneId(
+            const paneId = resolveExplorerSidebarPaneId(
               layout,
-              state.sidePanelPaneIdByWorkspace[normalizedWorkspaceKey],
+              state.explorerSidebarPaneIdByWorkspace[normalizedWorkspaceKey],
             );
             const nextLayout = paneId
               ? setPaneHiddenInLayout({ layout, paneId, hidden: true })
@@ -593,6 +806,46 @@ export function createWorkspaceLayoutStore(
             };
           });
         },
+        ensureSidePane: (workspaceKey) => {
+          const normalizedWorkspaceKey = trimNonEmpty(workspaceKey);
+          if (!normalizedWorkspaceKey) {
+            return null;
+          }
+          const currentState = get();
+          const layout = getWorkspaceLayout(currentState.layoutByWorkspace, normalizedWorkspaceKey);
+          const explorerPaneId = resolveExplorerSidebarPaneId(
+            layout,
+            currentState.explorerSidebarPaneIdByWorkspace[normalizedWorkspaceKey],
+          );
+          const rememberedPaneId = trimNonEmpty(
+            currentState.sidePaneIdByWorkspace[normalizedWorkspaceKey],
+          );
+          const rememberedPane = findPaneById(layout.root, rememberedPaneId);
+          if (rememberedPane && rememberedPane.id !== explorerPaneId) {
+            return rememberedPane.id;
+          }
+
+          const result = splitWorkspaceRootRightInLayout({
+            layout,
+            maxTreeDepth: MAX_TREE_DEPTH,
+            createNodeId: ids.createNodeId,
+          });
+          if (!result) {
+            return null;
+          }
+          set((state) => ({
+            ...withoutFocusRestoration(state, normalizedWorkspaceKey),
+            layoutByWorkspace: {
+              ...state.layoutByWorkspace,
+              [normalizedWorkspaceKey]: result.layout,
+            },
+            sidePaneIdByWorkspace: {
+              ...state.sidePaneIdByWorkspace,
+              [normalizedWorkspaceKey]: result.paneId,
+            },
+          }));
+          return result.paneId;
+        },
         closeTab: (workspaceKey, tabId) => {
           const normalizedWorkspaceKey = trimNonEmpty(workspaceKey);
           const normalizedTabId = trimNonEmpty(tabId);
@@ -602,9 +855,9 @@ export function createWorkspaceLayoutStore(
 
           set((state) => {
             const layout = getWorkspaceLayout(state.layoutByWorkspace, normalizedWorkspaceKey);
-            const sidePanelPaneId = resolveSidePanelPaneId(
+            const explorerSidebarPaneId = resolveExplorerSidebarPaneId(
               layout,
-              state.sidePanelPaneIdByWorkspace[normalizedWorkspaceKey],
+              state.explorerSidebarPaneIdByWorkspace[normalizedWorkspaceKey],
             );
             const closingPane = findPaneContainingTab(layout.root, normalizedTabId);
             const closingTab = collectAllTabs(layout.root).find(
@@ -612,18 +865,23 @@ export function createWorkspaceLayoutStore(
             );
             if (closingPane?.tabIds.length === 1 && closingTab?.target.kind === "new_tab") {
               const nextLayout =
-                closingPane.id === sidePanelPaneId
+                closingPane.id === explorerSidebarPaneId
                   ? setPaneHiddenInLayout({
                       layout,
                       paneId: closingPane.id,
                       hidden: true,
                     })
-                  : closePaneInLayout({ layout, paneId: closingPane.id });
+                  : closePaneInLayout({
+                      layout,
+                      paneId: closingPane.id,
+                      explorerSidebarPaneId,
+                    });
               if (!nextLayout) {
                 return state;
               }
               return {
                 ...withoutFocusRestoration(state, normalizedWorkspaceKey),
+                ...reconcileRememberedSidePane(state, normalizedWorkspaceKey, nextLayout),
                 layoutByWorkspace: {
                   ...state.layoutByWorkspace,
                   [normalizedWorkspaceKey]: nextLayout,
@@ -631,7 +889,7 @@ export function createWorkspaceLayoutStore(
               };
             }
             const preserveEmptyPaneId =
-              closingPane?.id === "main" || closingPane?.id === sidePanelPaneId
+              closingPane?.id === "main" || closingPane?.id === explorerSidebarPaneId
                 ? closingPane.id
                 : null;
             const closedLayout = closeTabInLayout({
@@ -639,20 +897,30 @@ export function createWorkspaceLayoutStore(
               tabId: normalizedTabId,
               preserveEmptyPaneId,
             });
-            const nextLayout =
-              closedLayout && closingPane?.id === sidePanelPaneId && closingPane.tabIds.length === 1
+            const nextLayoutBeforeFocusNormalization =
+              closedLayout &&
+              closingPane?.id === explorerSidebarPaneId &&
+              closingPane.tabIds.length === 1
                 ? (setPaneHiddenInLayout({
                     layout: closedLayout,
-                    paneId: sidePanelPaneId,
+                    paneId: explorerSidebarPaneId,
                     hidden: true,
                   }) ?? closedLayout)
                 : closedLayout;
+            const nextLayout = nextLayoutBeforeFocusNormalization
+              ? keepWorkspaceFocusOutOfExplorerSidebar(
+                  nextLayoutBeforeFocusNormalization,
+                  explorerSidebarPaneId,
+                  layout.focusedPaneId,
+                )
+              : null;
             if (!nextLayout) {
               return state;
             }
 
             return {
               ...withoutFocusRestoration(state, normalizedWorkspaceKey),
+              ...reconcileRememberedSidePane(state, normalizedWorkspaceKey, nextLayout),
               layoutByWorkspace: {
                 ...state.layoutByWorkspace,
                 [normalizedWorkspaceKey]: nextLayout,
@@ -668,10 +936,29 @@ export function createWorkspaceLayoutStore(
           }
 
           set((state) => {
-            const nextLayout = focusTabInLayout({
-              layout: getWorkspaceLayout(state.layoutByWorkspace, normalizedWorkspaceKey),
-              tabId: normalizedTabId,
-            });
+            const layout = getWorkspaceLayout(state.layoutByWorkspace, normalizedWorkspaceKey);
+            const explorerSidebarPaneId = resolveExplorerSidebarPaneId(
+              layout,
+              state.explorerSidebarPaneIdByWorkspace[normalizedWorkspaceKey],
+            );
+            const tabPane = findPaneContainingTab(layout.root, normalizedTabId);
+            let nextLayout: WorkspaceLayout | null;
+            if (tabPane?.id === explorerSidebarPaneId) {
+              const revealedLayout =
+                setPaneHiddenInLayout({
+                  layout,
+                  paneId: explorerSidebarPaneId,
+                  hidden: false,
+                }) ?? layout;
+              nextLayout =
+                selectTabInPaneInLayout({
+                  layout: revealedLayout,
+                  paneId: explorerSidebarPaneId,
+                  tabId: normalizedTabId,
+                }) ?? revealedLayout;
+            } else {
+              nextLayout = focusTabInLayout({ layout, tabId: normalizedTabId });
+            }
             if (!nextLayout) {
               return state;
             }
@@ -685,6 +972,30 @@ export function createWorkspaceLayoutStore(
             };
           });
         },
+        selectTabInPane: (workspaceKey, paneId, tabId) => {
+          const normalizedWorkspaceKey = trimNonEmpty(workspaceKey);
+          const normalizedPaneId = trimNonEmpty(paneId);
+          const normalizedTabId = trimNonEmpty(tabId);
+          if (!normalizedWorkspaceKey || !normalizedPaneId || !normalizedTabId) {
+            return;
+          }
+          set((state) => {
+            const layout = getWorkspaceLayout(state.layoutByWorkspace, normalizedWorkspaceKey);
+            const nextLayout = selectTabInPaneInLayout({
+              layout,
+              paneId: normalizedPaneId,
+              tabId: normalizedTabId,
+            });
+            return nextLayout
+              ? {
+                  layoutByWorkspace: {
+                    ...state.layoutByWorkspace,
+                    [normalizedWorkspaceKey]: nextLayout,
+                  },
+                }
+              : state;
+          });
+        },
         replaceTab: (workspaceKey, tabId, target, tabState) => {
           const normalizedWorkspaceKey = trimNonEmpty(workspaceKey);
           const normalizedTabId = trimNonEmpty(tabId);
@@ -785,9 +1096,9 @@ export function createWorkspaceLayoutStore(
                 pinnedAgentIds: state.pinnedAgentIdsByWorkspace[normalizedWorkspaceKey] ?? null,
                 pendingAgentIds: state.pendingAgentIdsByWorkspace[normalizedWorkspaceKey] ?? null,
                 hiddenAgentIds: state.hiddenAgentIdsByWorkspace[normalizedWorkspaceKey] ?? null,
-                sidePanelPaneId: resolveSidePanelPaneId(
+                explorerSidebarPaneId: resolveExplorerSidebarPaneId(
                   currentLayout,
-                  state.sidePanelPaneIdByWorkspace[normalizedWorkspaceKey],
+                  state.explorerSidebarPaneIdByWorkspace[normalizedWorkspaceKey],
                 ),
               },
               snapshot,
@@ -863,8 +1174,30 @@ export function createWorkspaceLayoutStore(
             return null;
           }
 
+          const currentLayout = getWorkspaceLayout(get().layoutByWorkspace, normalizedWorkspaceKey);
+          const explorerSidebarPaneId = resolveExplorerSidebarPaneId(
+            currentLayout,
+            get().explorerSidebarPaneIdByWorkspace[normalizedWorkspaceKey],
+          );
+          if (normalizedTargetPaneId === explorerSidebarPaneId) {
+            return null;
+          }
+          const movingTab = collectAllTabs(currentLayout.root).find(
+            (tab) => tab.tabId === normalizedTabId,
+          );
+          if (
+            !movingTab ||
+            !panelTargetSupportsHostForWorkspaceKey(
+              normalizedWorkspaceKey,
+              movingTab.target,
+              "main",
+            )
+          ) {
+            return null;
+          }
+
           const result = splitPaneInLayout({
-            layout: getWorkspaceLayout(get().layoutByWorkspace, normalizedWorkspaceKey),
+            layout: currentLayout,
             tabId: normalizedTabId,
             targetPaneId: normalizedTargetPaneId,
             position: input.position,
@@ -892,8 +1225,17 @@ export function createWorkspaceLayoutStore(
             return null;
           }
 
+          const currentLayout = getWorkspaceLayout(get().layoutByWorkspace, normalizedWorkspaceKey);
+          const explorerSidebarPaneId = resolveExplorerSidebarPaneId(
+            currentLayout,
+            get().explorerSidebarPaneIdByWorkspace[normalizedWorkspaceKey],
+          );
+          if (normalizedTargetPaneId === explorerSidebarPaneId) {
+            return null;
+          }
+
           const result = splitPaneEmptyInLayout({
-            layout: getWorkspaceLayout(get().layoutByWorkspace, normalizedWorkspaceKey),
+            layout: currentLayout,
             targetPaneId: normalizedTargetPaneId,
             position: input.position,
             maxTreeDepth: MAX_TREE_DEPTH,
@@ -922,21 +1264,57 @@ export function createWorkspaceLayoutStore(
           }
 
           set((state) => {
+            const layout = getWorkspaceLayout(state.layoutByWorkspace, normalizedWorkspaceKey);
+            const movingTab = collectAllTabs(layout.root).find(
+              (tab) => tab.tabId === normalizedTabId,
+            );
+            const explorerSidebarPaneId = resolveExplorerSidebarPaneId(
+              layout,
+              state.explorerSidebarPaneIdByWorkspace[normalizedWorkspaceKey],
+            );
+            const destinationHost =
+              normalizedToPaneId === explorerSidebarPaneId ? "explorer" : "main";
+            if (
+              !movingTab ||
+              !panelTargetSupportsHostForWorkspaceKey(
+                normalizedWorkspaceKey,
+                movingTab.target,
+                destinationHost,
+              )
+            ) {
+              return state;
+            }
             const nextLayout = moveTabToPaneInLayout({
-              layout: getWorkspaceLayout(state.layoutByWorkspace, normalizedWorkspaceKey),
+              layout,
               tabId: normalizedTabId,
               toPaneId: normalizedToPaneId,
+              explorerSidebarPaneId,
             });
             if (!nextLayout) {
               return state;
             }
+            const restoredLayout =
+              normalizedToPaneId === explorerSidebarPaneId
+                ? restoreEmptyPanesInLayout(nextLayout, explorerSidebarPaneId)
+                : nextLayout;
+            const normalizedNextLayout = keepWorkspaceFocusOutOfExplorerSidebar(
+              restoredLayout,
+              explorerSidebarPaneId,
+              layout.focusedPaneId,
+            );
+            const rememberedSidePaneId = state.sidePaneIdByWorkspace[normalizedWorkspaceKey];
 
             return {
               ...withoutFocusRestoration(state, normalizedWorkspaceKey),
               layoutByWorkspace: {
                 ...state.layoutByWorkspace,
-                [normalizedWorkspaceKey]: nextLayout,
+                [normalizedWorkspaceKey]: normalizedNextLayout,
               },
+              sidePaneIdByWorkspace:
+                rememberedSidePaneId &&
+                !findPaneById(normalizedNextLayout.root, rememberedSidePaneId)
+                  ? { ...state.sidePaneIdByWorkspace, [normalizedWorkspaceKey]: null }
+                  : state.sidePaneIdByWorkspace,
             };
           });
         },
@@ -949,16 +1327,20 @@ export function createWorkspaceLayoutStore(
 
           set((state) => {
             const layout = getWorkspaceLayout(state.layoutByWorkspace, normalizedWorkspaceKey);
-            // The side panel is a surface the user summons, so closing it puts it
+            // The Explorer is a surface the user summons, so closing it puts it
             // away rather than dismantling the split it lives in.
-            const isSidePanel =
-              resolveSidePanelPaneId(
-                layout,
-                state.sidePanelPaneIdByWorkspace[normalizedWorkspaceKey],
-              ) === normalizedPaneId;
-            const nextLayout = isSidePanel
+            const explorerSidebarPaneId = resolveExplorerSidebarPaneId(
+              layout,
+              state.explorerSidebarPaneIdByWorkspace[normalizedWorkspaceKey],
+            );
+            const isExplorerSidebar = explorerSidebarPaneId === normalizedPaneId;
+            const nextLayout = isExplorerSidebar
               ? setPaneHiddenInLayout({ layout, paneId: normalizedPaneId, hidden: true })
-              : closePaneInLayout({ layout, paneId: normalizedPaneId });
+              : closePaneInLayout({
+                  layout,
+                  paneId: normalizedPaneId,
+                  explorerSidebarPaneId,
+                });
             if (!nextLayout) {
               return state;
             }
@@ -969,6 +1351,13 @@ export function createWorkspaceLayoutStore(
                 ...state.layoutByWorkspace,
                 [normalizedWorkspaceKey]: nextLayout,
               },
+              sidePaneIdByWorkspace:
+                state.sidePaneIdByWorkspace[normalizedWorkspaceKey] === normalizedPaneId
+                  ? {
+                      ...state.sidePaneIdByWorkspace,
+                      [normalizedWorkspaceKey]: null,
+                    }
+                  : state.sidePaneIdByWorkspace,
             };
           });
         },
@@ -980,8 +1369,16 @@ export function createWorkspaceLayoutStore(
           }
 
           set((state) => {
+            const layout = getWorkspaceLayout(state.layoutByWorkspace, normalizedWorkspaceKey);
+            const explorerSidebarPaneId = resolveExplorerSidebarPaneId(
+              layout,
+              state.explorerSidebarPaneIdByWorkspace[normalizedWorkspaceKey],
+            );
+            if (normalizedPaneId === explorerSidebarPaneId) {
+              return state;
+            }
             const nextLayout = focusPaneInLayout({
-              layout: getWorkspaceLayout(state.layoutByWorkspace, normalizedWorkspaceKey),
+              layout,
               paneId: normalizedPaneId,
             });
             if (!nextLayout) {
@@ -1099,6 +1496,19 @@ export function createWorkspaceLayoutStore(
             },
           }));
         },
+        resizeExplorerSidebar: (workspaceKey, width) => {
+          const normalizedWorkspaceKey = trimNonEmpty(workspaceKey);
+          if (!normalizedWorkspaceKey || !Number.isFinite(width) || width <= 0) {
+            return;
+          }
+
+          set((state) => ({
+            explorerSidebarWidthByWorkspace: {
+              ...state.explorerSidebarWidthByWorkspace,
+              [normalizedWorkspaceKey]: width,
+            },
+          }));
+        },
         reorderTabsInPane: (workspaceKey, paneId, tabIds) => {
           const normalizedWorkspaceKey = trimNonEmpty(workspaceKey);
           const normalizedPaneId = trimNonEmpty(paneId);
@@ -1264,11 +1674,13 @@ export function createWorkspaceLayoutStore(
             const hasAny =
               normalizedWorkspaceKey in state.layoutByWorkspace ||
               normalizedWorkspaceKey in state.splitSizesByWorkspace ||
+              normalizedWorkspaceKey in state.explorerSidebarWidthByWorkspace ||
               normalizedWorkspaceKey in state.pinnedAgentIdsByWorkspace ||
               normalizedWorkspaceKey in state.pendingAgentIdsByWorkspace ||
               normalizedWorkspaceKey in state.hiddenAgentIdsByWorkspace ||
               normalizedWorkspaceKey in state.focusRestorationByWorkspace ||
-              normalizedWorkspaceKey in state.sidePanelPaneIdByWorkspace;
+              normalizedWorkspaceKey in state.explorerSidebarPaneIdByWorkspace ||
+              normalizedWorkspaceKey in state.sidePaneIdByWorkspace;
             if (!hasAny) {
               return state;
             }
@@ -1276,6 +1688,10 @@ export function createWorkspaceLayoutStore(
               state.layoutByWorkspace;
             const { [normalizedWorkspaceKey]: _splits, ...splitSizesByWorkspace } =
               state.splitSizesByWorkspace;
+            const {
+              [normalizedWorkspaceKey]: _explorerSidebarWidth,
+              ...explorerSidebarWidthByWorkspace
+            } = state.explorerSidebarWidthByWorkspace;
             const { [normalizedWorkspaceKey]: _pinned, ...pinnedAgentIdsByWorkspace } =
               state.pinnedAgentIdsByWorkspace;
             const { [normalizedWorkspaceKey]: _pending, ...pendingAgentIdsByWorkspace } =
@@ -1284,16 +1700,22 @@ export function createWorkspaceLayoutStore(
               state.hiddenAgentIdsByWorkspace;
             const { [normalizedWorkspaceKey]: _restoration, ...focusRestorationByWorkspace } =
               state.focusRestorationByWorkspace;
-            const { [normalizedWorkspaceKey]: _sidePanelPane, ...sidePanelPaneIdByWorkspace } =
-              state.sidePanelPaneIdByWorkspace;
+            const {
+              [normalizedWorkspaceKey]: _explorerSidebarPane,
+              ...explorerSidebarPaneIdByWorkspace
+            } = state.explorerSidebarPaneIdByWorkspace;
+            const { [normalizedWorkspaceKey]: _sidePane, ...sidePaneIdByWorkspace } =
+              state.sidePaneIdByWorkspace;
             return {
               layoutByWorkspace,
               splitSizesByWorkspace,
+              explorerSidebarWidthByWorkspace,
               pinnedAgentIdsByWorkspace,
               pendingAgentIdsByWorkspace,
               hiddenAgentIdsByWorkspace,
               focusRestorationByWorkspace,
-              sidePanelPaneIdByWorkspace,
+              explorerSidebarPaneIdByWorkspace,
+              sidePaneIdByWorkspace,
             };
           });
         },
@@ -1314,7 +1736,9 @@ export function createWorkspaceLayoutStore(
           return {
             layoutByWorkspace,
             splitSizesByWorkspace: state.splitSizesByWorkspace,
-            explorerPaneIdByWorkspace: state.sidePanelPaneIdByWorkspace,
+            explorerSidebarWidthByWorkspace: state.explorerSidebarWidthByWorkspace,
+            explorerPaneIdByWorkspace: state.explorerSidebarPaneIdByWorkspace,
+            sidePaneIdByWorkspace: state.sidePaneIdByWorkspace,
           };
         },
         merge: (persistedState, currentState) => {
@@ -1323,32 +1747,42 @@ export function createWorkspaceLayoutStore(
             return currentState;
           }
           const layoutByWorkspace: Record<string, WorkspaceLayout> = {};
-          const sidePanelPaneIdByWorkspace: Record<string, string | null> = {
+          const explorerSidebarPaneIdByWorkspace: Record<string, string | null> = {
             ...result.data.explorerPaneIdByWorkspace,
           };
           for (const [workspaceKey, persistedLayout] of Object.entries(
             result.data.layoutByWorkspace,
           )) {
-            const restoredLayout = restoreEmptyPanesInLayout(
-              stripEphemeralTabsFromLayout(persistedLayout),
-            );
-            const sidePanel = ensurePersistedSidePanelPane({
-              layout: restoredLayout,
-              registeredPaneId: sidePanelPaneIdByWorkspace[workspaceKey],
+            const strippedLayout = stripEphemeralTabsFromLayout(persistedLayout);
+            const explorerSidebar = ensurePersistedExplorerSidebarPane({
+              workspaceKey,
+              layout: strippedLayout,
+              registeredPaneId: explorerSidebarPaneIdByWorkspace[workspaceKey],
               ids,
             });
-            if (!sidePanel) {
-              layoutByWorkspace[workspaceKey] = restoredLayout;
+            if (!explorerSidebar) {
+              layoutByWorkspace[workspaceKey] = restoreEmptyPanesInLayout(strippedLayout);
               continue;
             }
-            layoutByWorkspace[workspaceKey] = sidePanel.layout;
-            sidePanelPaneIdByWorkspace[workspaceKey] = sidePanel.paneId;
+            layoutByWorkspace[workspaceKey] = restoreEmptyPanesInLayout(
+              explorerSidebar.layout,
+              explorerSidebar.paneId,
+            );
+            explorerSidebarPaneIdByWorkspace[workspaceKey] = explorerSidebar.paneId;
           }
           return {
             ...currentState,
             layoutByWorkspace,
             splitSizesByWorkspace: result.data.splitSizesByWorkspace ?? {},
-            sidePanelPaneIdByWorkspace,
+            explorerSidebarWidthByWorkspace:
+              result.data.explorerSidebarWidthByWorkspace ??
+              convertLegacyExplorerSidebarRatios(
+                result.data.explorerSidebarRatioByWorkspace ??
+                  result.data.sidePanelRatioByWorkspace ??
+                  {},
+              ),
+            explorerSidebarPaneIdByWorkspace,
+            sidePaneIdByWorkspace: result.data.sidePaneIdByWorkspace ?? {},
           };
         },
       },
diff --git a/packages/app/src/stores/workspace-subagents-integration.test.ts b/packages/app/src/stores/workspace-subagents-integration.test.ts
index 0cbcfb5191..2024f43d92 100644
--- a/packages/app/src/stores/workspace-subagents-integration.test.ts
+++ b/packages/app/src/stores/workspace-subagents-integration.test.ts
@@ -114,11 +114,11 @@ function reconcileWorkspaceTabs(workspaceKey: string, visibility: WorkspaceAgent
   );
 }
 
-function getWorkspaceContentTabIds(workspaceKey: string): string[] {
+function getWorkspaceAgentTabIds(workspaceKey: string): string[] {
   return useWorkspaceLayoutStore
     .getState()
     .getWorkspaceTabs(workspaceKey)
-    .filter((tab) => tab.target.kind !== "new_tab")
+    .filter((tab) => tab.target.kind === "agent")
     .map((tab) => tab.tabId);
 }
 
@@ -154,13 +154,13 @@ describe("workspace subagents integration", () => {
 
     reconcileWorkspaceTabs(workspaceKey!, deriveVisibilityFromSession());
 
-    expect(getWorkspaceContentTabIds(workspaceKey!)).toEqual([]);
+    expect(getWorkspaceAgentTabIds(workspaceKey!)).toEqual([]);
 
     appendAgent(parent);
 
     reconcileWorkspaceTabs(workspaceKey!, deriveVisibilityFromSession());
 
-    expect(getWorkspaceContentTabIds(workspaceKey!)).toEqual(["agent_parent-agent"]);
+    expect(getWorkspaceAgentTabIds(workspaceKey!)).toEqual(["agent_parent-agent"]);
     expect(
       selectSubagentsForParent(
         useSessionStore.getState(),
@@ -193,7 +193,7 @@ describe("workspace subagents integration", () => {
     initializeAgents([parent, child]);
     reconcileWorkspaceTabs(workspaceKey!, deriveVisibilityFromSession());
 
-    expect(getWorkspaceContentTabIds(workspaceKey!)).toEqual(["agent_parent-agent"]);
+    expect(getWorkspaceAgentTabIds(workspaceKey!)).toEqual(["agent_parent-agent"]);
     expect(
       selectSubagentsForParent(
         useSessionStore.getState(),
@@ -208,7 +208,7 @@ describe("workspace subagents integration", () => {
     appendAgent({ ...child, parentAgentId: null, labels: {} });
     reconcileWorkspaceTabs(workspaceKey!, deriveVisibilityFromSession());
 
-    expect(getWorkspaceContentTabIds(workspaceKey!)).toEqual([
+    expect(getWorkspaceAgentTabIds(workspaceKey!)).toEqual([
       "agent_parent-agent",
       "agent_child-agent",
     ]);
@@ -245,7 +245,7 @@ describe("workspace subagents integration", () => {
     initializeAgents([parent, child]);
     reconcileWorkspaceTabs(workspaceKey!, deriveVisibilityFromSession());
 
-    expect(getWorkspaceContentTabIds(workspaceKey!)).toEqual(["agent_child-agent"]);
+    expect(getWorkspaceAgentTabIds(workspaceKey!)).toEqual(["agent_child-agent"]);
     expect(
       selectSubagentsForParent(
         useSessionStore.getState(),
@@ -258,7 +258,7 @@ describe("workspace subagents integration", () => {
     ).toEqual([child.id]);
   });
 
-  it("opens a subagent in the side panel when focused", () => {
+  it("falls back to the main pane when the Explorer is preferred for a subagent", () => {
     const workspaceKey = buildWorkspaceTabPersistenceKey({
       serverId: SERVER_ID,
       workspaceId: WORKSPACE_ID,
@@ -279,7 +279,7 @@ describe("workspace subagents integration", () => {
     reconcileWorkspaceTabs(workspaceKey!, deriveVisibilityFromSession());
 
     const store = useWorkspaceLayoutStore.getState();
-    const paneId = store.showSidePanel(workspaceKey!) as string;
+    const paneId = store.showExplorerSidebar(workspaceKey!) as string;
     const tabId = store.openTab({
       workspaceKey: workspaceKey!,
       target: { kind: "agent", agentId: child.id },
@@ -290,15 +290,15 @@ describe("workspace subagents integration", () => {
 
     const state = useWorkspaceLayoutStore.getState();
     const layout = state.layoutByWorkspace[workspaceKey!];
-    const sidePanelPaneId = state.sidePanelPaneIdByWorkspace[workspaceKey!];
+    const explorerSidebarPaneId = state.explorerSidebarPaneIdByWorkspace[workspaceKey!];
 
-    expect(sidePanelPaneId).toBeTruthy();
-    expect(findPaneContainingTab(layout.root, tabId!)?.id).toBe(sidePanelPaneId);
-    expect(findPaneById(layout.root, sidePanelPaneId!)?.hidden).toBeUndefined();
-    expect(layout.focusedPaneId).toBe(sidePanelPaneId);
+    expect(explorerSidebarPaneId).toBeTruthy();
+    expect(findPaneContainingTab(layout.root, tabId!)?.id).toBe("main");
+    expect(findPaneById(layout.root, explorerSidebarPaneId!)?.hidden).toBeUndefined();
+    expect(layout.focusedPaneId).toBe("main");
   });
 
-  it("opens a provider subagent in the side panel when focused", () => {
+  it("falls back to the main pane when the Explorer is preferred for a provider subagent", () => {
     const workspaceKey = buildWorkspaceTabPersistenceKey({
       serverId: SERVER_ID,
       workspaceId: WORKSPACE_ID,
@@ -306,7 +306,7 @@ describe("workspace subagents integration", () => {
     expect(workspaceKey).toBeTruthy();
 
     const store = useWorkspaceLayoutStore.getState();
-    const paneId = store.showSidePanel(workspaceKey!) as string;
+    const paneId = store.showExplorerSidebar(workspaceKey!) as string;
     const tabId = store.openTab({
       workspaceKey: workspaceKey!,
       target: { kind: "provider_subagent", parentAgentId: "parent-agent", subagentId: "task-1" },
@@ -317,11 +317,11 @@ describe("workspace subagents integration", () => {
 
     const state = useWorkspaceLayoutStore.getState();
     const layout = state.layoutByWorkspace[workspaceKey!];
-    const sidePanelPaneId = state.sidePanelPaneIdByWorkspace[workspaceKey!];
+    const explorerSidebarPaneId = state.explorerSidebarPaneIdByWorkspace[workspaceKey!];
 
-    expect(sidePanelPaneId).toBeTruthy();
-    expect(findPaneContainingTab(layout.root, tabId!)?.id).toBe(sidePanelPaneId);
-    expect(findPaneById(layout.root, sidePanelPaneId!)?.hidden).toBeUndefined();
-    expect(layout.focusedPaneId).toBe(sidePanelPaneId);
+    expect(explorerSidebarPaneId).toBeTruthy();
+    expect(findPaneContainingTab(layout.root, tabId!)?.id).toBe("main");
+    expect(findPaneById(layout.root, explorerSidebarPaneId!)?.hidden).toBeUndefined();
+    expect(layout.focusedPaneId).toBe("main");
   });
 });
diff --git a/packages/app/src/styles/theme.ts b/packages/app/src/styles/theme.ts
index 5d8d75ed50..0537530e74 100644
--- a/packages/app/src/styles/theme.ts
+++ b/packages/app/src/styles/theme.ts
@@ -256,6 +256,7 @@ export function buildLightSemanticColors(tint: LightThemeConfig) {
     surfaceSidebarHover: tint.surface1,
     surfaceSidebarSelected: tint.surface2,
     surfaceWorkspace: tint.surface0,
+    interactionHighlight: "rgba(0, 0, 0, 0.06)",
 
     foreground: tint.foreground,
     foregroundMuted: tint.foregroundMuted,
@@ -385,6 +386,7 @@ export function buildDarkSemanticColors(tint: DarkThemeConfig) {
     surfaceSidebarHover: tint.surface1,
     surfaceSidebarSelected: tint.surface2,
     surfaceWorkspace: tint.surface1,
+    interactionHighlight: "rgba(255, 255, 255, 0.08)",
 
     foreground,
     foregroundMuted: tint.foregroundMuted,
diff --git a/packages/app/src/utils/desktop-window.test.ts b/packages/app/src/utils/desktop-window.test.ts
index c9f915905b..aa95a90dbf 100644
--- a/packages/app/src/utils/desktop-window.test.ts
+++ b/packages/app/src/utils/desktop-window.test.ts
@@ -8,21 +8,28 @@ import {
 
 describe("window chrome", () => {
   it("has no corner obstruction outside Electron or in fullscreen", () => {
-    expect(
-      resolveWindowChromeObstruction({ isElectron: false, isMac: true, isFullscreen: false }),
-    ).toEqual({ topLeft: null, topRight: null });
-    expect(
-      resolveWindowChromeObstruction({ isElectron: true, isMac: true, isFullscreen: true }),
-    ).toEqual({ topLeft: null, topRight: null });
+    expect(resolveWindowChromeObstruction({ mode: null, isFullscreen: false })).toEqual({
+      topLeft: null,
+      topRight: null,
+    });
+    expect(resolveWindowChromeObstruction({ mode: "native-mac", isFullscreen: true })).toEqual({
+      topLeft: null,
+      topRight: null,
+    });
   });
 
   it("places native controls in their physical top corner", () => {
-    expect(
-      resolveWindowChromeObstruction({ isElectron: true, isMac: true, isFullscreen: false }),
-    ).toEqual({ topLeft: { width: 78, height: 45 }, topRight: null });
-    expect(
-      resolveWindowChromeObstruction({ isElectron: true, isMac: false, isFullscreen: false }),
-    ).toEqual({ topLeft: null, topRight: { width: 140, height: 48 } });
+    expect(resolveWindowChromeObstruction({ mode: "native-mac", isFullscreen: false })).toEqual({
+      topLeft: { width: 78, height: 45 },
+      topRight: null,
+    });
+    expect(resolveWindowChromeObstruction({ mode: "custom-windows", isFullscreen: false })).toEqual(
+      { topLeft: null, topRight: { width: 138, height: 36 } },
+    );
+    expect(resolveWindowChromeObstruction({ mode: "custom-linux", isFullscreen: false })).toEqual({
+      topLeft: null,
+      topRight: { width: 108, height: 36 },
+    });
   });
 
   it("insets and reserves only claimed corners", () => {
diff --git a/packages/app/src/utils/desktop-window.tsx b/packages/app/src/utils/desktop-window.tsx
index d3c6a5cfda..adc3f7c9a1 100644
--- a/packages/app/src/utils/desktop-window.tsx
+++ b/packages/app/src/utils/desktop-window.tsx
@@ -3,12 +3,14 @@ import { View, type ViewProps } from "react-native";
 import {
   DESKTOP_TRAFFIC_LIGHT_HEIGHT,
   DESKTOP_TRAFFIC_LIGHT_WIDTH,
-  DESKTOP_WINDOW_CONTROLS_HEIGHT,
-  DESKTOP_WINDOW_CONTROLS_WIDTH,
   getIsElectronRuntime,
-  getIsElectronRuntimeMac,
 } from "@/constants/layout";
 import { getDesktopWindow } from "@/desktop/electron/window";
+import { getDesktopWindowChromeMode, type DesktopWindowChromeMode } from "@/desktop/host";
+import {
+  getDesktopWindowControlsPresentation,
+  getDesktopWindowControlsWidth,
+} from "@/desktop/window-chrome-presentation";
 import { isNative } from "@/constants/platform";
 
 export type WindowChromeCorners = "none" | "top-left" | "top-right" | "both";
@@ -31,6 +33,11 @@ type WindowChromeSafeAreaStyle = { height: number } | { paddingLeft: number; pad
 const EMPTY_OBSTRUCTION: WindowChromeObstruction = { topLeft: null, topRight: null };
 const WindowChromeContext = createContext<WindowChromeObstruction>(EMPTY_OBSTRUCTION);
 const WindowChromeCornersContext = createContext<WindowChromeCorners>("none");
+const DesktopWindowChromeContext = createContext<{
+  mode: DesktopWindowChromeMode | null;
+  isFullscreen: boolean;
+  isMaximized: boolean;
+}>({ mode: null, isFullscreen: false, isMaximized: false });
 
 function windowChromeCornersFromFlags(topLeft: boolean, topRight: boolean): WindowChromeCorners {
   if (topLeft && topRight) return "both";
@@ -76,21 +83,33 @@ export function intersectWindowChromeCorners(
   );
 }
 
+export function removeWindowChromeCorner(
+  corners: WindowChromeCorners,
+  corner: WindowChromeCorner,
+): WindowChromeCorners {
+  if (!windowChromeCornersInclude(corners, corner)) return corners;
+  if (corners !== "both") return "none";
+  return corner === "top-left" ? "top-right" : "top-left";
+}
+
 export function resolveWindowChromeObstruction(input: {
-  isElectron: boolean;
-  isMac: boolean;
+  mode: DesktopWindowChromeMode | null;
   isFullscreen: boolean;
 }): WindowChromeObstruction {
-  if (!input.isElectron || input.isFullscreen) return EMPTY_OBSTRUCTION;
-  if (input.isMac) {
+  if (!input.mode || input.isFullscreen) return EMPTY_OBSTRUCTION;
+  if (input.mode === "native-mac") {
     return {
       topLeft: { width: DESKTOP_TRAFFIC_LIGHT_WIDTH, height: DESKTOP_TRAFFIC_LIGHT_HEIGHT },
       topRight: null,
     };
   }
+  const presentation = getDesktopWindowControlsPresentation(input.mode);
   return {
     topLeft: null,
-    topRight: { width: DESKTOP_WINDOW_CONTROLS_WIDTH, height: DESKTOP_WINDOW_CONTROLS_HEIGHT },
+    topRight: {
+      width: getDesktopWindowControlsWidth(input.mode),
+      height: presentation.railHeight,
+    },
   };
 }
 
@@ -111,7 +130,7 @@ export function resolveWindowChromeSafeArea(input: {
 
 export function WindowChromeProvider({ children }: { children: ReactNode }) {
   const [isElectronReady, setIsElectronReady] = useState(getIsElectronRuntime);
-  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [windowState, setWindowState] = useState({ isFullscreen: false, isMaximized: false });
 
   useEffect(() => {
     let active = true;
@@ -146,23 +165,27 @@ export function WindowChromeProvider({ children }: { children: ReactNode }) {
       )
         return scheduleRetry(true);
       const readFullscreen = desktopWindow.isFullscreen;
+      const readMaximized = desktopWindow.isMaximized;
       const subscribeToResized = desktopWindow.onResized;
       connecting = true;
       void (async () => {
-        async function syncFullscreen() {
+        async function syncWindowState() {
           try {
-            const fullscreen = await readFullscreen();
-            if (active) setIsFullscreen(fullscreen);
+            const [isFullscreen, isMaximized] = await Promise.all([
+              readFullscreen(),
+              readMaximized?.() ?? false,
+            ]);
+            if (active) setWindowState({ isFullscreen, isMaximized });
           } catch (error) {
-            if (active) console.warn("[DesktopWindow] Failed to read fullscreen state", error);
+            if (active) console.warn("[DesktopWindow] Failed to read window state", error);
           }
         }
         try {
-          const nextDispose = await subscribeToResized(syncFullscreen);
+          const nextDispose = await subscribeToResized(syncWindowState);
           if (!active) return nextDispose();
           dispose = nextDispose;
           setIsElectronReady(true);
-          await syncFullscreen();
+          await syncWindowState();
         } catch (error) {
           if (active) console.warn("[DesktopWindow] Failed to subscribe to resize", error);
         } finally {
@@ -184,21 +207,45 @@ export function WindowChromeProvider({ children }: { children: ReactNode }) {
   const obstruction = useMemo(
     () =>
       resolveWindowChromeObstruction({
-        isElectron: isElectronReady,
-        isMac: getIsElectronRuntimeMac(),
-        isFullscreen,
+        mode: isElectronReady ? getDesktopWindowChromeMode() : null,
+        isFullscreen: windowState.isFullscreen,
       }),
-    [isElectronReady, isFullscreen],
+    [isElectronReady, windowState.isFullscreen],
+  );
+  const desktopWindowChrome = useMemo(
+    () => ({
+      mode: isElectronReady ? getDesktopWindowChromeMode() : null,
+      isFullscreen: windowState.isFullscreen,
+      isMaximized: windowState.isMaximized,
+    }),
+    [isElectronReady, windowState],
   );
   return (
-    <WindowChromeContext.Provider value={obstruction}>
-      <WindowChromeCornersContext.Provider value="both">
-        {children}
-      </WindowChromeCornersContext.Provider>
-    </WindowChromeContext.Provider>
+    <DesktopWindowChromeContext.Provider value={desktopWindowChrome}>
+      <WindowChromeContext.Provider value={obstruction}>
+        <WindowChromeCornersContext.Provider value="both">
+          {children}
+        </WindowChromeCornersContext.Provider>
+      </WindowChromeContext.Provider>
+    </DesktopWindowChromeContext.Provider>
   );
 }
 
+export function useCustomDesktopWindowControls(): {
+  visible: boolean;
+  mode: "custom-windows" | "custom-linux" | null;
+  isMaximized: boolean;
+} {
+  const chrome = useContext(DesktopWindowChromeContext);
+  const customMode =
+    chrome.mode === "custom-windows" || chrome.mode === "custom-linux" ? chrome.mode : null;
+  return {
+    visible: customMode !== null && !chrome.isFullscreen,
+    mode: customMode,
+    isMaximized: chrome.isMaximized,
+  };
+}
+
 /** Narrows inherited corner ownership to the corners occupied by this child surface. */
 export function WindowChromeRegion({
   corners,
diff --git a/packages/app/src/utils/host-routes.ts b/packages/app/src/utils/host-routes.ts
index 612d0f0023..5b8b6ad8d1 100644
--- a/packages/app/src/utils/host-routes.ts
+++ b/packages/app/src/utils/host-routes.ts
@@ -492,6 +492,7 @@ export function resolveKnownHostRoute(input: {
 export const SETTINGS_SECTION_SLUGS = [
   "general",
   "appearance",
+  "layout",
   "editor",
   "shortcuts",
   "integrations",
diff --git a/packages/app/src/utils/prepare-workspace-tab.ts b/packages/app/src/utils/prepare-workspace-tab.ts
index 5fb2cfda9e..57a7448f33 100644
--- a/packages/app/src/utils/prepare-workspace-tab.ts
+++ b/packages/app/src/utils/prepare-workspace-tab.ts
@@ -1,11 +1,13 @@
 import { generateDraftId } from "@/stores/draft-keys";
 import { buildWorkspaceTabPersistenceKey, type WorkspaceTabTarget } from "@/workspace-tabs/model";
+import type { WorkspaceTabPlacement } from "@/stores/workspace-layout-actions";
 
 export interface PrepareWorkspaceTabInput {
   serverId: string;
   workspaceId: string;
   target: WorkspaceTabTarget;
   pin?: boolean;
+  placement?: WorkspaceTabPlacement;
 }
 
 export interface PrepareWorkspaceTabDeps {
@@ -13,6 +15,7 @@ export interface PrepareWorkspaceTabDeps {
     workspaceKey: string;
     target: WorkspaceTabTarget;
     intent: "reveal";
+    placement?: WorkspaceTabPlacement;
   }) => string | null;
   pinAgent: (workspaceKey: string, agentId: string) => void;
 }
@@ -35,7 +38,7 @@ export function prepareWorkspaceTab(
       workspaceId: input.workspaceId,
     }) ?? "";
 
-  deps.openTab({ workspaceKey: key, target, intent: "reveal" });
+  deps.openTab({ workspaceKey: key, target, intent: "reveal", placement: input.placement });
 
   if (input.pin && target.kind === "agent") {
     deps.pinAgent(key, target.agentId);
diff --git a/packages/app/src/utils/workspace-navigation.ts b/packages/app/src/utils/workspace-navigation.ts
index 60afce6cca..1b1cc91657 100644
--- a/packages/app/src/utils/workspace-navigation.ts
+++ b/packages/app/src/utils/workspace-navigation.ts
@@ -10,8 +10,12 @@ export type { PrepareWorkspaceTabInput } from "./prepare-workspace-tab";
 function layoutStoreDeps() {
   const store = useWorkspaceLayoutStore.getState();
   return {
-    openTab: (input: { workspaceKey: string; target: WorkspaceTabTarget; intent: "reveal" }) =>
-      store.openTab(input),
+    openTab: (input: {
+      workspaceKey: string;
+      target: WorkspaceTabTarget;
+      intent: "reveal";
+      placement?: import("@/stores/workspace-layout-actions").WorkspaceTabPlacement;
+    }) => store.openTab(input),
     pinAgent: store.pinAgent,
   };
 }
diff --git a/packages/app/src/workspace-tabs/explorer-sidebar.test.ts b/packages/app/src/workspace-tabs/explorer-sidebar.test.ts
new file mode 100644
index 0000000000..c9bb74a6e0
--- /dev/null
+++ b/packages/app/src/workspace-tabs/explorer-sidebar.test.ts
@@ -0,0 +1,88 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+vi.mock("@react-native-async-storage/async-storage", () => ({
+  default: {
+    getItem: vi.fn(async () => null),
+    setItem: vi.fn(async () => undefined),
+    removeItem: vi.fn(async () => undefined),
+  },
+}));
+
+import { usePanelStore } from "@/stores/panel-store";
+import {
+  collectAllTabs,
+  selectExplorerSidebarPaneId,
+  useWorkspaceLayoutStore,
+} from "@/stores/workspace-layout-store";
+import {
+  isExplorerSidebarOpen,
+  openExplorerSidebarView,
+  resolveExplorerSidebarPresentation,
+  toggleExplorerSidebar,
+} from "@/workspace-tabs/explorer-sidebar";
+
+const WORKSPACE_KEY = "server-1:ws-main";
+const CHECKOUT = { serverId: "server-1", cwd: "/tmp/repo", isGit: true };
+
+beforeEach(() => {
+  useWorkspaceLayoutStore.setState({
+    layoutByWorkspace: {},
+    explorerSidebarPaneIdByWorkspace: {},
+    sidePaneIdByWorkspace: {},
+    splitSizesByWorkspace: {},
+  });
+  usePanelStore.setState({ mobilePanel: { target: "agent", revision: 0 } });
+});
+
+describe("Explorer sidebar", () => {
+  it("selects the Explorer shell from layout and split capabilities", () => {
+    expect(resolveExplorerSidebarPresentation({ isCompact: true })).toBe("overlay");
+    expect(
+      resolveExplorerSidebarPresentation({ isCompact: false, supportsPaneSplits: false }),
+    ).toBe("dock");
+    expect(resolveExplorerSidebarPresentation({ isCompact: false, supportsPaneSplits: true })).toBe(
+      "pane",
+    );
+  });
+
+  it("uses the compact explorer without creating a desktop pane", () => {
+    openExplorerSidebarView({
+      isCompact: true,
+      workspaceKey: WORKSPACE_KEY,
+      checkout: CHECKOUT,
+      view: "changes",
+    });
+
+    expect(usePanelStore.getState().mobilePanel.target).toBe("file-explorer");
+    expect(useWorkspaceLayoutStore.getState().layoutByWorkspace[WORKSPACE_KEY]).toBeUndefined();
+  });
+
+  it("creates a dedicated desktop Explorer containing only its requested tree", () => {
+    openExplorerSidebarView({
+      isCompact: false,
+      supportsPaneSplits: true,
+      workspaceKey: WORKSPACE_KEY,
+      checkout: CHECKOUT,
+      view: "files",
+    });
+
+    const state = useWorkspaceLayoutStore.getState();
+    const layout = state.layoutByWorkspace[WORKSPACE_KEY];
+    const paneId = selectExplorerSidebarPaneId(state, WORKSPACE_KEY);
+    expect(paneId).not.toBeNull();
+    expect(layout && collectAllTabs(layout.root).map((tab) => tab.target.kind)).toContain("files");
+  });
+
+  it("toggles the desktop Explorer independently of ordinary panes", () => {
+    const input = {
+      isCompact: false,
+      supportsPaneSplits: true,
+      workspaceKey: WORKSPACE_KEY,
+      checkout: CHECKOUT,
+    };
+    toggleExplorerSidebar(input);
+    expect(isExplorerSidebarOpen(input)).toBe(true);
+    toggleExplorerSidebar(input);
+    expect(isExplorerSidebarOpen(input)).toBe(false);
+  });
+});
diff --git a/packages/app/src/workspace-tabs/explorer-sidebar.ts b/packages/app/src/workspace-tabs/explorer-sidebar.ts
new file mode 100644
index 0000000000..5f1b7912dd
--- /dev/null
+++ b/packages/app/src/workspace-tabs/explorer-sidebar.ts
@@ -0,0 +1,124 @@
+import { supportsDesktopPaneSplits } from "@/constants/layout";
+import { selectIsCompactFileExplorerOpen, usePanelStore } from "@/stores/panel-store";
+import type { ExplorerCheckoutContext } from "@/stores/explorer-checkout-context";
+import {
+  selectIsExplorerSidebarVisible,
+  useWorkspaceLayoutStore,
+} from "@/stores/workspace-layout-store";
+import type { WorkspaceTabTarget } from "@/workspace-tabs/model";
+
+export type ExplorerSidebarView = "changes" | "files";
+export type ExplorerSidebarPresentation = "overlay" | "dock" | "pane";
+
+const VIEW_TARGETS: Record<ExplorerSidebarView, WorkspaceTabTarget> = {
+  changes: { kind: "changes_tree" },
+  files: { kind: "files" },
+};
+
+export interface ExplorerSidebarQuery {
+  isCompact: boolean;
+  workspaceKey: string | null;
+  supportsPaneSplits?: boolean;
+}
+
+export interface ExplorerSidebarInput extends ExplorerSidebarQuery {
+  checkout: ExplorerCheckoutContext | null;
+}
+
+export function resolveExplorerSidebarPresentation(
+  input: Pick<ExplorerSidebarQuery, "isCompact" | "supportsPaneSplits">,
+): ExplorerSidebarPresentation {
+  if (input.isCompact) {
+    return "overlay";
+  }
+  return (input.supportsPaneSplits ?? supportsDesktopPaneSplits()) ? "pane" : "dock";
+}
+
+export function usesCompactExplorerSidebar(
+  input: Pick<ExplorerSidebarQuery, "isCompact" | "supportsPaneSplits">,
+): boolean {
+  return resolveExplorerSidebarPresentation(input) !== "pane";
+}
+
+function canUseExplorerSidebar(
+  input: Pick<ExplorerSidebarQuery, "isCompact" | "supportsPaneSplits">,
+): boolean {
+  return resolveExplorerSidebarPresentation(input) === "pane";
+}
+
+/** Reveals the Explorer sidebar and selects one of its navigation trees. */
+export function openExplorerSidebarView(
+  input: ExplorerSidebarInput & { view: ExplorerSidebarView },
+): void {
+  if (usesCompactExplorerSidebar(input)) {
+    if (!input.checkout) return;
+    const panel = usePanelStore.getState();
+    panel.setExplorerTabForCheckout({ ...input.checkout, tab: input.view });
+    panel.openCompactFileExplorer(input.checkout);
+    return;
+  }
+  if (!input.workspaceKey) return;
+  const store = useWorkspaceLayoutStore.getState();
+  const paneId = store.showExplorerSidebar(input.workspaceKey);
+  store.openTab({
+    workspaceKey: input.workspaceKey,
+    target: VIEW_TARGETS[input.view],
+    intent: "reveal",
+    placement: paneId ? { mode: "pane", paneId } : undefined,
+  });
+}
+
+export function showExplorerSidebar(input: ExplorerSidebarInput): void {
+  if (usesCompactExplorerSidebar(input)) {
+    if (input.checkout) usePanelStore.getState().openCompactFileExplorer(input.checkout);
+    return;
+  }
+  if (input.workspaceKey && canUseExplorerSidebar(input)) {
+    useWorkspaceLayoutStore.getState().showExplorerSidebar(input.workspaceKey);
+  }
+}
+
+export function hideExplorerSidebar(input: ExplorerSidebarInput): void {
+  if (usesCompactExplorerSidebar(input)) {
+    usePanelStore.getState().showMobileAgent();
+    return;
+  }
+  if (input.workspaceKey && canUseExplorerSidebar(input)) {
+    useWorkspaceLayoutStore.getState().hideExplorerSidebar(input.workspaceKey);
+  }
+}
+
+export function toggleExplorerSidebar(input: ExplorerSidebarInput): void {
+  if (usesCompactExplorerSidebar(input)) {
+    if (input.checkout) usePanelStore.getState().toggleCompactFileExplorer(input.checkout);
+    return;
+  }
+  if (!input.workspaceKey) return;
+  const view: ExplorerSidebarView = input.checkout?.isGit ? "changes" : "files";
+  if (isExplorerSidebarOpen(input)) {
+    hideExplorerSidebar(input);
+  } else {
+    openExplorerSidebarView({ ...input, view });
+  }
+}
+
+export function useIsExplorerSidebarOpen(input: ExplorerSidebarQuery): boolean {
+  const compactOpen = usePanelStore(selectIsCompactFileExplorerOpen);
+  const paneOpen = useWorkspaceLayoutStore((state) =>
+    input.workspaceKey && canUseExplorerSidebar(input)
+      ? selectIsExplorerSidebarVisible(state, input.workspaceKey)
+      : false,
+  );
+  return usesCompactExplorerSidebar(input) ? compactOpen : paneOpen;
+}
+
+export function isExplorerSidebarOpen(input: ExplorerSidebarQuery): boolean {
+  if (usesCompactExplorerSidebar(input)) {
+    return selectIsCompactFileExplorerOpen(usePanelStore.getState());
+  }
+  return Boolean(
+    input.workspaceKey &&
+    canUseExplorerSidebar(input) &&
+    selectIsExplorerSidebarVisible(useWorkspaceLayoutStore.getState(), input.workspaceKey),
+  );
+}
diff --git a/packages/app/src/workspace-tabs/identity.ts b/packages/app/src/workspace-tabs/identity.ts
index 6e01210d14..6e15d506c2 100644
--- a/packages/app/src/workspace-tabs/identity.ts
+++ b/packages/app/src/workspace-tabs/identity.ts
@@ -55,6 +55,7 @@ function normalizeSimpleWorkspaceTabTarget(value: WorkspaceTabTarget): Workspace
       const browserId = trimNonEmpty(value.browserId);
       return browserId ? { kind: "browser", browserId } : null;
     }
+    case "changes_tree":
     case "files":
     case "pull_request":
       return { kind: value.kind };
@@ -142,6 +143,9 @@ function secondaryWorkspaceTabTargetsEqual(
   if (left.kind === "files" && right.kind === "files") {
     return true;
   }
+  if (left.kind === "changes_tree" && right.kind === "changes_tree") {
+    return true;
+  }
   if (left.kind === "pull_request" && right.kind === "pull_request") {
     return true;
   }
@@ -215,7 +219,7 @@ export function buildDeterministicWorkspaceTabId(target: WorkspaceTabTarget): st
   if (target.kind === "working_diff") {
     return "working_diff";
   }
-  if (target.kind === "files" || target.kind === "pull_request") {
+  if (target.kind === "changes_tree" || target.kind === "files" || target.kind === "pull_request") {
     return target.kind;
   }
   if (target.kind === "plugin") {
diff --git a/packages/app/src/workspace-tabs/launcher/index.tsx b/packages/app/src/workspace-tabs/launcher/index.tsx
index 402c8554cd..ba4998fda9 100644
--- a/packages/app/src/workspace-tabs/launcher/index.tsx
+++ b/packages/app/src/workspace-tabs/launcher/index.tsx
@@ -1,22 +1,30 @@
-import { createContext, useCallback, useContext, useMemo, type ReactNode } from "react";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  type ComponentType,
+  type ReactNode,
+} from "react";
 import { useRouter, type Href } from "expo-router";
 import { useTranslation } from "react-i18next";
-import {
-  FileDiff,
-  FolderTree,
-  GitPullRequest,
-  Globe,
-  SquarePen,
-  SquareTerminal,
-  type LucideIcon,
-} from "lucide-react-native";
+import { Globe, SquarePen, SquareTerminal } from "lucide-react-native";
 import invariant from "tiny-invariant";
 import { useDaemonConfig } from "@/hooks/use-daemon-config";
 import { resolvePluginIcon } from "@/plugins/icons";
 import { useInstalledPlugins } from "@/plugins/registry";
+import { pluginPanelSupportsLocation } from "@/plugins/workspace-panels/locations";
 import { buildSettingsHostSectionRoute } from "@/utils/host-routes";
 import type { NewTabSelection } from "@/workspace-tabs/new-tab";
+import type { WorkspaceTabTarget } from "@/workspace-tabs/model";
 import type { TerminalProfile } from "@getpaseo/protocol/messages";
+import { panelSupportsHost, type PaneHost } from "@/panels/panel-manifest";
+import {
+  getPanelRegistration,
+  type PanelIconProps,
+  type PanelPresentation,
+} from "@/panels/panel-registry";
+import { ensurePanelsRegistered } from "@/panels/register-panels";
 import {
   getTerminalProfileIcon,
   resolveTerminalProfiles,
@@ -40,15 +48,16 @@ export interface NewTabLauncher {
 export interface WorkspaceTabLaunchItem {
   id: string;
   label: string;
-  Icon?: LucideIcon;
+  Icon?: ComponentType<PanelIconProps>;
   terminalIconKey?: string;
   shortcutActionId?: string;
   disabled: boolean;
+  panelKind: WorkspaceTabTarget["kind"];
   launch: (destination: WorkspaceTabLaunchDestination) => void;
 }
 
 export interface WorkspaceTabLaunchGroup {
-  id: "tabs" | "terminal-profiles";
+  id: "tabs" | "plugin-panels" | "terminal-profiles";
   label: string | null;
   items: readonly WorkspaceTabLaunchItem[];
   accessory?: { id: string; label: string; run: () => void };
@@ -69,23 +78,32 @@ export function NewTabLauncherProvider({
 const BUILT_IN_SELECTIONS: Record<BuiltInLaunchItemId, NewTabSelection> = {
   agent: { kind: "agent" },
   terminal: { kind: "terminal" },
-  changes: { kind: "target", target: { kind: "working_diff" } },
+  changes: { kind: "target", target: { kind: "changes_tree" } },
+  diff: { kind: "target", target: { kind: "working_diff" } },
   files: { kind: "target", target: { kind: "files" } },
   browser: { kind: "browser" },
   pullRequest: { kind: "target", target: { kind: "pull_request" } },
 };
 
+function getLaunchPresentation(kind: WorkspaceTabTarget["kind"]): PanelPresentation {
+  const registration = getPanelRegistration(kind);
+  invariant(registration?.presentation, `Panel ${kind} has no launch presentation`);
+  return registration.presentation;
+}
+
 export function useWorkspaceTabLaunchCatalog(input: {
   serverId: string;
   purpose: WorkspaceTabLaunchPurpose;
+  host: PaneHost;
 }): readonly WorkspaceTabLaunchGroup[] {
-  const { serverId, purpose } = input;
+  const { serverId, purpose, host } = input;
   const { t } = useTranslation();
   const router = useRouter();
   const launcher = useContext(NewTabLauncherContext);
   invariant(launcher, "NewTabLauncherProvider is required");
   const { config } = useDaemonConfig(serverId);
   const plugins = useInstalledPlugins();
+  ensurePanelsRegistered();
 
   const launchSelection = useCallback(
     (selection: NewTabSelection) => (destination: WorkspaceTabLaunchDestination) => {
@@ -98,6 +116,10 @@ export function useWorkspaceTabLaunchCatalog(input: {
   }, [router, serverId]);
 
   return useMemo(() => {
+    const changesPresentation = getLaunchPresentation("changes_tree");
+    const diffPresentation = getLaunchPresentation("working_diff");
+    const filesPresentation = getLaunchPresentation("files");
+    const pullRequestPresentation = getLaunchPresentation("pull_request");
     const builtIns: Record<BuiltInLaunchItemId, WorkspaceTabLaunchItem & { hidden?: boolean }> = {
       agent: {
         id: "agent",
@@ -105,6 +127,7 @@ export function useWorkspaceTabLaunchCatalog(input: {
         Icon: SquarePen,
         shortcutActionId: "workspace-tab-target-agent",
         disabled: false,
+        panelKind: "draft",
         launch: launchSelection(BUILT_IN_SELECTIONS.agent),
       },
       terminal: {
@@ -113,23 +136,35 @@ export function useWorkspaceTabLaunchCatalog(input: {
         Icon: SquareTerminal,
         shortcutActionId: "workspace-terminal-new",
         disabled: launcher.terminalDisabled,
+        panelKind: "terminal",
         launch: launchSelection(BUILT_IN_SELECTIONS.terminal),
       },
       changes: {
         id: "changes",
-        label: t("workspace.tabs.actions.changes"),
-        Icon: FileDiff,
-        shortcutActionId: "workspace-tab-target-changes",
+        label: changesPresentation.label(t),
+        Icon: changesPresentation.icon,
         disabled: false,
+        panelKind: "changes_tree",
         hidden: !launcher.showChanges,
         launch: launchSelection(BUILT_IN_SELECTIONS.changes),
       },
+      diff: {
+        id: "diff",
+        label: diffPresentation.label(t),
+        Icon: diffPresentation.icon,
+        shortcutActionId: "workspace-tab-target-changes",
+        disabled: false,
+        panelKind: "working_diff",
+        hidden: !launcher.showChanges,
+        launch: launchSelection(BUILT_IN_SELECTIONS.diff),
+      },
       files: {
         id: "files",
-        label: t("workspace.tabs.actions.files"),
-        Icon: FolderTree,
+        label: filesPresentation.label(t),
+        Icon: filesPresentation.icon,
         shortcutActionId: "workspace-tab-target-files",
         disabled: false,
+        panelKind: "files",
         launch: launchSelection(BUILT_IN_SELECTIONS.files),
       },
       browser: {
@@ -138,36 +173,42 @@ export function useWorkspaceTabLaunchCatalog(input: {
         Icon: Globe,
         shortcutActionId: "workspace-tab-target-browser",
         disabled: false,
+        panelKind: "browser",
         hidden: !launcher.showBrowser,
         launch: launchSelection(BUILT_IN_SELECTIONS.browser),
       },
       pullRequest: {
         id: "pull-request",
-        label: t("workspace.tabs.actions.pullRequest"),
-        Icon: GitPullRequest,
+        label: pullRequestPresentation.label(t),
+        Icon: pullRequestPresentation.icon,
         disabled: false,
+        panelKind: "pull_request",
         hidden: !launcher.showPullRequest,
         launch: launchSelection(BUILT_IN_SELECTIONS.pullRequest),
       },
     };
     const tabItems = getBuiltInLaunchOrder(purpose).flatMap((id) => {
       const item = builtIns[id];
-      return item.hidden ? [] : [item];
+      return item.hidden || !panelSupportsHost(item.panelKind, host) ? [] : [item];
     });
 
+    const pluginItems: WorkspaceTabLaunchItem[] = [];
     for (const plugin of plugins) {
       if (plugin.serverId !== serverId) continue;
       for (const panel of plugin.workspacePanels) {
         if (panel.context !== "workspace") continue;
+        const location = host === "explorer" ? "explorer" : "workspace";
+        if (!pluginPanelSupportsLocation(panel, location)) continue;
         const selection: NewTabSelection = {
           kind: "target",
           target: { kind: "plugin", pluginId: plugin.id, panelId: panel.id, context: "workspace" },
         };
-        tabItems.push({
+        pluginItems.push({
           id: `plugin:${plugin.id}:${panel.id}`,
           label: panel.title,
           Icon: resolvePluginIcon(panel.icon),
           disabled: false,
+          panelKind: "plugin",
           launch: launchSelection(selection),
         });
       }
@@ -175,6 +216,9 @@ export function useWorkspaceTabLaunchCatalog(input: {
 
     const profiles = resolveTerminalProfiles(config?.terminalProfiles);
     const groups: WorkspaceTabLaunchGroup[] = [{ id: "tabs", label: null, items: tabItems }];
+    if (pluginItems.length > 0) {
+      groups.push({ id: "plugin-panels", label: null, items: pluginItems });
+    }
     if (profiles.length > 0) {
       groups.push({
         id: "terminal-profiles",
@@ -184,6 +228,7 @@ export function useWorkspaceTabLaunchCatalog(input: {
           label: profile.name,
           terminalIconKey: getTerminalProfileIcon(profile),
           disabled: launcher.terminalDisabled,
+          panelKind: "terminal",
           launch: launchSelection({ kind: "terminal", profile }),
         })),
         accessory: {
@@ -201,6 +246,7 @@ export function useWorkspaceTabLaunchCatalog(input: {
     launcher,
     plugins,
     purpose,
+    host,
     serverId,
     t,
   ]);
diff --git a/packages/app/src/workspace-tabs/launcher/internal/catalog.test.ts b/packages/app/src/workspace-tabs/launcher/internal/catalog.test.ts
index 420ffdccfb..a2ede20ddf 100644
--- a/packages/app/src/workspace-tabs/launcher/internal/catalog.test.ts
+++ b/packages/app/src/workspace-tabs/launcher/internal/catalog.test.ts
@@ -7,6 +7,7 @@ describe("getBuiltInLaunchOrder", () => {
       "agent",
       "terminal",
       "changes",
+      "diff",
       "files",
       "browser",
       "pullRequest",
@@ -16,6 +17,7 @@ describe("getBuiltInLaunchOrder", () => {
   it("leads with companion tools in a supporting pane", () => {
     expect(getBuiltInLaunchOrder("supporting")).toEqual([
       "changes",
+      "diff",
       "files",
       "terminal",
       "agent",
diff --git a/packages/app/src/workspace-tabs/launcher/internal/catalog.ts b/packages/app/src/workspace-tabs/launcher/internal/catalog.ts
index a2d55dbb90..dfed374170 100644
--- a/packages/app/src/workspace-tabs/launcher/internal/catalog.ts
+++ b/packages/app/src/workspace-tabs/launcher/internal/catalog.ts
@@ -2,6 +2,7 @@ export const PRIMARY_LAUNCH_ORDER = [
   "agent",
   "terminal",
   "changes",
+  "diff",
   "files",
   "browser",
   "pullRequest",
@@ -9,6 +10,7 @@ export const PRIMARY_LAUNCH_ORDER = [
 
 export const SUPPORTING_LAUNCH_ORDER = [
   "changes",
+  "diff",
   "files",
   "terminal",
   "agent",
diff --git a/packages/app/src/workspace-tabs/model.ts b/packages/app/src/workspace-tabs/model.ts
index 0bda48a708..fa0e155060 100644
--- a/packages/app/src/workspace-tabs/model.ts
+++ b/packages/app/src/workspace-tabs/model.ts
@@ -39,6 +39,7 @@ export type WorkspaceTabTarget =
   | { kind: "provider_subagent"; parentAgentId: string; subagentId: string }
   | { kind: "terminal"; terminalId: string }
   | { kind: "browser"; browserId: string }
+  | { kind: "changes_tree" }
   | { kind: "files" }
   | { kind: "pull_request" }
   | WorkspaceFileTabTarget
diff --git a/packages/app/src/workspace-tabs/open-beside.ts b/packages/app/src/workspace-tabs/open-beside.ts
new file mode 100644
index 0000000000..9b5477dc7d
--- /dev/null
+++ b/packages/app/src/workspace-tabs/open-beside.ts
@@ -0,0 +1,164 @@
+import type { OpenInSidePanePreferences } from "@/hooks/use-settings";
+import {
+  collectAllTabs,
+  collectAllPanes,
+  DEFAULT_PANE_ID,
+  findPaneById,
+  useWorkspaceLayoutStore,
+  type WorkspaceTabPlacement,
+} from "@/stores/workspace-layout-store";
+import { getPanelInstanceAttributes } from "@/panels/panel-instance-attributes";
+import { workspaceTabTargetsEqual } from "@/workspace-tabs/identity";
+import type { WorkspaceTabTarget } from "@/workspace-tabs/model";
+
+export type OpenInSidePaneSource = keyof OpenInSidePanePreferences;
+
+interface OpenWorkspaceTargetInput {
+  workspaceKey: string | null;
+  target: WorkspaceTabTarget;
+  parentTabId?: string | null;
+}
+
+export interface OpenPreferredWorkspaceTargetInput extends OpenWorkspaceTargetInput {
+  isCompact: boolean;
+  source: OpenInSidePaneSource;
+  preferences: OpenInSidePanePreferences;
+}
+
+interface OpenPreferredWorkspacePreviewInput extends OpenPreferredWorkspaceTargetInput {
+  serverId: string;
+  workspaceId: string;
+  explorerSidebarPaneId: string | null;
+  lastMainPaneId: string | null;
+}
+
+function resolveMainPane(input: {
+  workspaceKey: string;
+  explorerSidebarPaneId: string | null;
+  lastMainPaneId: string | null;
+}) {
+  const layout = useWorkspaceLayoutStore.getState().layoutByWorkspace[input.workspaceKey];
+  if (!layout) return null;
+  const panes = collectAllPanes(layout.root);
+  return (
+    panes.find(
+      (pane) =>
+        pane.id === input.lastMainPaneId &&
+        pane.id !== input.explorerSidebarPaneId &&
+        pane.hidden !== true,
+    ) ??
+    panes.find((pane) => pane.id === DEFAULT_PANE_ID && pane.hidden !== true) ??
+    panes.find((pane) => pane.id !== input.explorerSidebarPaneId && pane.hidden !== true) ??
+    null
+  );
+}
+
+function canReplacePreview(input: {
+  serverId: string;
+  workspaceId: string;
+  tabId: string;
+  currentTarget: WorkspaceTabTarget;
+  nextTarget: WorkspaceTabTarget;
+}): boolean {
+  if (input.nextTarget.kind === "working_diff") {
+    return input.currentTarget.kind === "working_diff";
+  }
+  return (
+    input.nextTarget.kind === "file" &&
+    input.currentTarget.kind === "file" &&
+    !getPanelInstanceAttributes({
+      serverId: input.serverId,
+      workspaceId: input.workspaceId,
+      tabId: input.tabId,
+    }).modified
+  );
+}
+
+/** Opens an implicit target according to its source-specific desktop preference. */
+export function openPreferredWorkspaceTarget(
+  input: OpenPreferredWorkspaceTargetInput,
+): string | null {
+  if (!input.workspaceKey) return null;
+  const store = useWorkspaceLayoutStore.getState();
+  const layout = store.layoutByWorkspace[input.workspaceKey];
+  const targetAlreadyExists = Boolean(
+    layout &&
+    collectAllTabs(layout.root).some((tab) => workspaceTabTargetsEqual(tab.target, input.target)),
+  );
+  const shouldOpenBeside = !input.isCompact && input.preferences[input.source];
+  let placement: WorkspaceTabPlacement | undefined;
+  if (shouldOpenBeside && !targetAlreadyExists) {
+    const paneId = store.ensureSidePane(input.workspaceKey);
+    placement = paneId ? { mode: "prefer", paneId } : undefined;
+  }
+  return store.openTab({
+    workspaceKey: input.workspaceKey,
+    target: input.target,
+    intent: "reveal",
+    placement,
+    parentTabId: input.parentTabId ?? undefined,
+  });
+}
+
+/** Opens a tree selection while reusing an unmodified preview in its destination pane. */
+export function openPreferredWorkspacePreview(
+  input: OpenPreferredWorkspacePreviewInput,
+): string | null {
+  if (!input.workspaceKey) return null;
+  const store = useWorkspaceLayoutStore.getState();
+  const layout = store.layoutByWorkspace[input.workspaceKey];
+  if (!layout) return null;
+  const existing = collectAllTabs(layout.root).some((tab) =>
+    workspaceTabTargetsEqual(tab.target, input.target),
+  );
+  if (existing) return openPreferredWorkspaceTarget(input);
+
+  const mainPane = resolveMainPane({
+    workspaceKey: input.workspaceKey,
+    explorerSidebarPaneId: input.explorerSidebarPaneId,
+    lastMainPaneId: input.lastMainPaneId,
+  });
+  const destinationPaneId =
+    !input.isCompact && input.preferences[input.source]
+      ? store.ensureSidePane(input.workspaceKey)
+      : mainPane?.id;
+  if (!destinationPaneId) return null;
+  const nextLayout = useWorkspaceLayoutStore.getState().layoutByWorkspace[input.workspaceKey];
+  const destinationPane = nextLayout ? findPaneById(nextLayout.root, destinationPaneId) : null;
+  const activeTab = nextLayout
+    ? collectAllTabs(nextLayout.root).find((tab) => tab.tabId === destinationPane?.focusedTabId)
+    : null;
+  if (
+    activeTab &&
+    canReplacePreview({
+      serverId: input.serverId,
+      workspaceId: input.workspaceId,
+      tabId: activeTab.tabId,
+      currentTarget: activeTab.target,
+      nextTarget: input.target,
+    })
+  ) {
+    return store.replaceTab(input.workspaceKey, activeTab.tabId, input.target);
+  }
+  return store.openTab({
+    workspaceKey: input.workspaceKey,
+    target: input.target,
+    intent: "reveal",
+    placement: { mode: "pane", paneId: destinationPaneId },
+    parentTabId: input.parentTabId ?? activeTab?.tabId ?? undefined,
+  });
+}
+
+/** Explicit Open to Side: creates the side pane and places the target there. */
+export function openWorkspaceTargetBeside(input: OpenWorkspaceTargetInput): string | null {
+  if (!input.workspaceKey) return null;
+  const store = useWorkspaceLayoutStore.getState();
+  const paneId = store.ensureSidePane(input.workspaceKey);
+  return store.openTab({
+    workspaceKey: input.workspaceKey,
+    target: input.target,
+    intent: "reveal",
+    placement: paneId ? { mode: "pane", paneId } : undefined,
+    parentTabId: input.parentTabId ?? undefined,
+  });
+}
diff --git a/packages/app/src/workspace-tabs/side-panel.test.ts b/packages/app/src/workspace-tabs/side-panel.test.ts
deleted file mode 100644
index e2a7430876..0000000000
--- a/packages/app/src/workspace-tabs/side-panel.test.ts
+++ /dev/null
@@ -1,281 +0,0 @@
-import { beforeEach, describe, expect, it, vi } from "vitest";
-
-vi.mock("@react-native-async-storage/async-storage", () => {
-  const storage = new Map<string, string>();
-  return {
-    default: {
-      getItem: vi.fn(async (key: string) => storage.get(key) ?? null),
-      setItem: vi.fn(async (key: string, value: string) => {
-        storage.set(key, value);
-      }),
-      removeItem: vi.fn(async (key: string) => {
-        storage.delete(key);
-      }),
-    },
-  };
-});
-
-import { usePanelStore } from "@/stores/panel-store";
-import {
-  collectAllPanes,
-  collectAllTabs,
-  findPaneById,
-  findPaneContainingTab,
-  selectSidePanelPaneId,
-  useWorkspaceLayoutStore,
-} from "@/stores/workspace-layout-store";
-import {
-  hideSidePanel,
-  isSidePanelOpen,
-  openSidePanelView,
-  openSupportingTab,
-  showSidePanel,
-  toggleSidePanel,
-  toggleSupportingTab,
-} from "@/workspace-tabs/side-panel";
-
-const WORKSPACE_KEY = "server-1:ws-main";
-const CHECKOUT = { serverId: "server-1", cwd: "/tmp/repo", isGit: true };
-
-function layout() {
-  const value = useWorkspaceLayoutStore.getState().layoutByWorkspace[WORKSPACE_KEY];
-  if (!value) throw new Error("workspace layout missing");
-  return value;
-}
-
-function tabKinds(): string[] {
-  return collectAllTabs(layout().root).map((tab) => tab.target.kind);
-}
-
-function focusedPaneTabKinds(): string[] {
-  const current = layout();
-  const pane = findPaneById(current.root, current.focusedPaneId);
-  const tabs = collectAllTabs(current.root);
-  return (pane?.tabIds ?? []).map(
-    (tabId) => tabs.find((tab) => tab.tabId === tabId)?.target.kind ?? "?",
-  );
-}
-
-function sidePanelPaneId(): string | null {
-  return selectSidePanelPaneId(useWorkspaceLayoutStore.getState(), WORKSPACE_KEY);
-}
-
-function paneIdHolding(tabId: string): string | undefined {
-  return findPaneContainingTab(layout().root, tabId)?.id;
-}
-
-beforeEach(() => {
-  useWorkspaceLayoutStore.setState({
-    layoutByWorkspace: {},
-    sidePanelPaneIdByWorkspace: {},
-    splitSizesByWorkspace: {},
-  });
-  usePanelStore.setState({ mobilePanel: { target: "agent", revision: 0 } });
-});
-
-describe("compact surface", () => {
-  const compact = { isCompact: true, workspaceKey: WORKSPACE_KEY, checkout: CHECKOUT };
-
-  it("opens Changes in the explorer overlay without creating a workspace tab", () => {
-    toggleSupportingTab({
-      ...compact,
-      target: { kind: "working_diff" },
-      openInSidePanelByDefault: true,
-    });
-
-    expect(usePanelStore.getState().mobilePanel.target).toBe("file-explorer");
-    expect(usePanelStore.getState().explorerTab).toBe("changes");
-    expect(useWorkspaceLayoutStore.getState().layoutByWorkspace[WORKSPACE_KEY]).toBeUndefined();
-  });
-
-  it("opens and closes the overlay without touching the layout", () => {
-    openSidePanelView({ ...compact, view: "files" });
-
-    expect(usePanelStore.getState().mobilePanel.target).toBe("file-explorer");
-    expect(usePanelStore.getState().explorerTab).toBe("files");
-    expect(useWorkspaceLayoutStore.getState().layoutByWorkspace[WORKSPACE_KEY]).toBeUndefined();
-
-    toggleSidePanel(compact);
-    expect(usePanelStore.getState().mobilePanel.target).toBe("agent");
-  });
-
-  it("reports the overlay state, not the layout state", () => {
-    expect(isSidePanelOpen({ isCompact: true, workspaceKey: WORKSPACE_KEY })).toBe(false);
-    toggleSidePanel(compact);
-    expect(isSidePanelOpen({ isCompact: true, workspaceKey: WORKSPACE_KEY })).toBe(true);
-  });
-});
-
-describe("non-compact with splits", () => {
-  const wide = {
-    isCompact: false,
-    supportsPaneSplits: true,
-    workspaceKey: WORKSPACE_KEY,
-    checkout: CHECKOUT,
-  };
-
-  it("reveals a New tab pane rather than seeding a supporting view into it", () => {
-    toggleSidePanel(wide);
-
-    expect(isSidePanelOpen(wide)).toBe(true);
-    expect(tabKinds()).toEqual(["new_tab", "new_tab"]);
-    expect(collectAllPanes(layout().root).length).toBeGreaterThan(1);
-  });
-
-  it("opens the view the user picked from the revealed panel", () => {
-    showSidePanel(wide);
-    openSidePanelView({ ...wide, view: "changes" });
-
-    const changesTabId = collectAllTabs(layout().root).find(
-      (tab) => tab.target.kind === "working_diff",
-    )?.tabId;
-    expect(changesTabId).toBeTruthy();
-    expect(paneIdHolding(changesTabId as string)).toBe(sidePanelPaneId());
-  });
-
-  it("hides the pane on the second toggle and restores its tabs on the third", () => {
-    openSidePanelView({ ...wide, view: "changes" });
-    toggleSidePanel(wide);
-    expect(isSidePanelOpen(wide)).toBe(false);
-
-    toggleSidePanel(wide);
-    expect(isSidePanelOpen(wide)).toBe(true);
-    expect(tabKinds().filter((kind) => kind === "working_diff")).toHaveLength(1);
-  });
-
-  it("leaves the compact overlay alone", () => {
-    toggleSidePanel(wide);
-    expect(usePanelStore.getState().mobilePanel.target).toBe("agent");
-  });
-
-  it("routes a new supporting tab into the side panel", () => {
-    const tabId = openSupportingTab({
-      isCompact: false,
-      supportsPaneSplits: true,
-      workspaceKey: WORKSPACE_KEY,
-      target: { kind: "files" },
-      openInSidePanelByDefault: true,
-    });
-
-    expect(tabId).not.toBeNull();
-    expect(paneIdHolding(tabId as string)).toBe(sidePanelPaneId());
-    expect(isSidePanelOpen(wide)).toBe(true);
-  });
-
-  it("finds a supporting tab the user moved instead of dragging it back", () => {
-    const tabId = openSupportingTab({
-      isCompact: false,
-      supportsPaneSplits: true,
-      workspaceKey: WORKSPACE_KEY,
-      target: { kind: "files" },
-      openInSidePanelByDefault: true,
-    }) as string;
-    useWorkspaceLayoutStore.getState().moveTabToPane(WORKSPACE_KEY, tabId, "main");
-
-    const reopened = openSupportingTab({
-      isCompact: false,
-      supportsPaneSplits: true,
-      workspaceKey: WORKSPACE_KEY,
-      target: { kind: "files" },
-      openInSidePanelByDefault: true,
-    });
-
-    expect(reopened).toBe(tabId);
-    expect(paneIdHolding(tabId)).toBe("main");
-  });
-
-  it("opens a new supporting tab in the focused pane when routing is off", () => {
-    const tabId = openSupportingTab({
-      isCompact: false,
-      supportsPaneSplits: true,
-      workspaceKey: WORKSPACE_KEY,
-      target: { kind: "files" },
-      openInSidePanelByDefault: false,
-    });
-
-    expect(paneIdHolding(tabId as string)).toBe(layout().focusedPaneId);
-    expect(isSidePanelOpen(wide)).toBe(false);
-  });
-
-  it("adds a background supporting tab without revealing the panel", () => {
-    const tabId = openSupportingTab({
-      isCompact: false,
-      supportsPaneSplits: true,
-      workspaceKey: WORKSPACE_KEY,
-      target: { kind: "setup", workspaceId: "ws-main" },
-      openInSidePanelByDefault: true,
-      background: true,
-    });
-
-    expect(paneIdHolding(tabId as string)).toBe(sidePanelPaneId());
-    expect(isSidePanelOpen(wide)).toBe(false);
-  });
-
-  it("keeps the panel's tabs when it is hidden", () => {
-    openSidePanelView({ ...wide, view: "files" });
-    hideSidePanel(wide);
-
-    expect(isSidePanelOpen(wide)).toBe(false);
-    expect(tabKinds()).toEqual(["new_tab", "files"]);
-  });
-
-  it("toggles the visible supporting target without closing its tab", () => {
-    const changes = {
-      ...wide,
-      target: { kind: "working_diff" } as const,
-      openInSidePanelByDefault: true,
-    };
-    const tabId = toggleSupportingTab(changes);
-    openSidePanelView({ ...wide, view: "files" });
-
-    toggleSupportingTab(changes);
-    expect(isSidePanelOpen(wide)).toBe(true);
-    expect(focusedPaneTabKinds()).toContain("working_diff");
-
-    toggleSupportingTab(changes);
-    expect(isSidePanelOpen(wide)).toBe(false);
-    expect(tabKinds()).toContain("working_diff");
-
-    expect(toggleSupportingTab(changes)).toBe(tabId);
-    expect(isSidePanelOpen(wide)).toBe(true);
-  });
-});
-
-describe("non-compact without splits", () => {
-  const tablet = {
-    isCompact: false,
-    supportsPaneSplits: false,
-    workspaceKey: WORKSPACE_KEY,
-    checkout: CHECKOUT,
-  };
-
-  it("opens the side panel as a tab in the focused pane, never a second pane", () => {
-    toggleSidePanel(tablet);
-
-    expect(focusedPaneTabKinds()).toContain("working_diff");
-    expect(collectAllPanes(layout().root)).toHaveLength(1);
-    expect(isSidePanelOpen(tablet)).toBe(true);
-  });
-
-  it("closes the side panel tab on the second toggle", () => {
-    toggleSidePanel(tablet);
-    toggleSidePanel(tablet);
-
-    expect(tabKinds()).not.toContain("working_diff");
-    expect(isSidePanelOpen(tablet)).toBe(false);
-  });
-
-  it("keeps supporting tabs in the focused pane so the tab row still lists them", () => {
-    const tabId = openSupportingTab({
-      isCompact: false,
-      supportsPaneSplits: false,
-      workspaceKey: WORKSPACE_KEY,
-      target: { kind: "files" },
-      openInSidePanelByDefault: true,
-    });
-
-    expect(tabId).not.toBeNull();
-    expect(paneIdHolding(tabId as string)).toBe(layout().focusedPaneId);
-    expect(collectAllPanes(layout().root)).toHaveLength(1);
-  });
-});
diff --git a/packages/app/src/workspace-tabs/side-panel.ts b/packages/app/src/workspace-tabs/side-panel.ts
deleted file mode 100644
index da154529a4..0000000000
--- a/packages/app/src/workspace-tabs/side-panel.ts
+++ /dev/null
@@ -1,337 +0,0 @@
-import { supportsDesktopPaneSplits } from "@/constants/layout";
-import {
-  usePanelStore,
-  selectIsCompactFileExplorerOpen,
-  type ExplorerTab,
-} from "@/stores/panel-store";
-import type { ExplorerCheckoutContext } from "@/stores/explorer-checkout-context";
-import {
-  collectAllTabs,
-  findPaneById,
-  selectIsSidePanelVisible,
-  selectSidePanelPaneId,
-  useWorkspaceLayoutStore,
-  type WorkspaceTabPlacement,
-} from "@/stores/workspace-layout-store";
-import type { WorkspaceTabTarget } from "@/workspace-tabs/model";
-import { workspaceTabTargetsEqual } from "@/workspace-tabs/identity";
-
-/**
- * The side panel is the companion surface beside the user's work — Changes, Files,
- * the pull request, and anything an agent asks to show alongside its output. It has
- * three renderings, picked from two facts — is the layout compact, and can this
- * platform render split panes:
- *
- *   compact                → slide-over overlay, owned by the panel store
- *   non-compact + splits   → dedicated right pane, owned by the layout store
- *   non-compact, no splits → ordinary tabs in the focused pane (native tablets)
- *
- * Every entry point goes through this module. Nothing else branches on the surface —
- * the third case is why: a native tablet renders one pane at a time and the tab row
- * only lists the focused pane's tabs, so anything routed into a separate side panel
- * pane there would silently disappear.
- */
-
-/** Tab kinds that are side panel views rather than user content. */
-const SIDE_PANEL_TAB_KINDS = ["working_diff", "files", "pull_request"] as const;
-type SidePanelTabKind = (typeof SIDE_PANEL_TAB_KINDS)[number];
-
-const SIDE_PANEL_VIEW_TARGETS: Record<ExplorerTab, WorkspaceTabTarget> = {
-  changes: { kind: "working_diff" },
-  files: { kind: "files" },
-  pr: { kind: "pull_request" },
-};
-
-export interface SidePanelQuery {
-  isCompact: boolean;
-  workspaceKey: string | null;
-  /** Allows callers with known layout capabilities to avoid platform inference. */
-  supportsPaneSplits?: boolean;
-}
-
-export interface SidePanelInput extends SidePanelQuery {
-  checkout: ExplorerCheckoutContext | null;
-}
-
-type LayoutState = ReturnType<typeof useWorkspaceLayoutStore.getState>;
-
-function isSidePanelTabKind(kind: string): kind is SidePanelTabKind {
-  return (SIDE_PANEL_TAB_KINDS as readonly string[]).includes(kind);
-}
-
-function canUseSidePanelPane(input: SidePanelQuery): boolean {
-  return !input.isCompact && (input.supportsPaneSplits ?? supportsDesktopPaneSplits());
-}
-
-function isTargetVisibleInSidePanel(
-  state: LayoutState,
-  workspaceKey: string,
-  target: WorkspaceTabTarget,
-): boolean {
-  if (!selectIsSidePanelVisible(state, workspaceKey)) return false;
-  const layout = state.layoutByWorkspace[workspaceKey];
-  const paneId = selectSidePanelPaneId(state, workspaceKey);
-  const focusedTabId = layout && paneId ? findPaneById(layout.root, paneId)?.focusedTabId : null;
-  if (!layout || !focusedTabId) return false;
-  const focusedTab = collectAllTabs(layout.root).find((tab) => tab.tabId === focusedTabId);
-  return Boolean(focusedTab && workspaceTabTargetsEqual(focusedTab.target, target));
-}
-
-// ─── Side panel tabs (non-compact, no splits) ──────────────────────────────
-
-/**
- * The side panel tab the focused pane is currently showing, if any. On a tablet
- * "the side panel is open" means exactly that — there is no pane to hide.
- */
-function findActiveSidePanelTabId(state: LayoutState, workspaceKey: string): string | null {
-  const layout = state.layoutByWorkspace[workspaceKey];
-  if (!layout) {
-    return null;
-  }
-  const focusedTabId = findPaneById(layout.root, layout.focusedPaneId)?.focusedTabId ?? null;
-  if (!focusedTabId) {
-    return null;
-  }
-  const tab = collectAllTabs(layout.root).find((candidate) => candidate.tabId === focusedTabId);
-  return tab && isSidePanelTabKind(tab.target.kind) ? tab.tabId : null;
-}
-
-// ─── Public API ────────────────────────────────────────────────────────────
-
-export interface OpenSupportingTabInput extends SidePanelQuery {
-  target: WorkspaceTabTarget;
-  /** The user's preference for where new supporting tabs land. Ignored on compact. */
-  openInSidePanelByDefault: boolean;
-  parentTabId?: string | null;
-  /** Add the tab without revealing the side panel or moving focus. */
-  background?: boolean;
-}
-
-type SidePanelViewTarget = Extract<WorkspaceTabTarget, { kind: SidePanelTabKind }>;
-
-export interface ToggleSupportingTabInput extends SidePanelInput {
-  target: SidePanelViewTarget;
-  openInSidePanelByDefault: boolean;
-}
-
-/**
- * Opens a tab the user did not place themselves — an agent's file link, a detected
- * pull request, workspace setup progress. A supporting tab that is already open is
- * left where the user put it; only a brand new one follows the preference.
- */
-export function openSupportingTab(input: OpenSupportingTabInput): string | null {
-  if (!input.workspaceKey) {
-    return null;
-  }
-  const workspaceKey = input.workspaceKey;
-  const store = useWorkspaceLayoutStore.getState();
-  const background = input.background === true;
-  const placement = resolveSidePanelPlacement({
-    store,
-    workspaceKey,
-    routeToSidePanel: input.openInSidePanelByDefault && canUseSidePanelPane(input),
-    background,
-  });
-
-  if (background) {
-    return store.openTab({ workspaceKey, target: input.target, intent: "background", placement });
-  }
-  return store.openTab({
-    workspaceKey,
-    target: input.target,
-    intent: "reveal",
-    placement,
-    parentTabId: input.parentTabId ?? undefined,
-  });
-}
-
-/** Toggle a supporting target when it is the visible Side panel tab; otherwise reveal it. */
-export function toggleSupportingTab(input: ToggleSupportingTabInput): string | null {
-  if (input.isCompact) {
-    openSidePanelView({ ...input, view: explorerViewForTarget(input.target) });
-    return null;
-  }
-  if (!input.workspaceKey) return null;
-  const store = useWorkspaceLayoutStore.getState();
-  if (
-    input.openInSidePanelByDefault &&
-    canUseSidePanelPane(input) &&
-    isTargetVisibleInSidePanel(store, input.workspaceKey, input.target)
-  ) {
-    store.hideSidePanel(input.workspaceKey);
-    return null;
-  }
-  return openSupportingTab(input);
-}
-
-function explorerViewForTarget(target: SidePanelViewTarget): ExplorerTab {
-  switch (target.kind) {
-    case "working_diff":
-      return "changes";
-    case "files":
-      return "files";
-    case "pull_request":
-      return "pr";
-  }
-}
-
-/** Explicitly place a companion tab in the Side panel, moving an existing tab there. */
-export function openTabInSidePanel(
-  input: SidePanelInput & { target: WorkspaceTabTarget },
-): string | null {
-  if (!input.workspaceKey) {
-    return null;
-  }
-
-  if (input.isCompact) {
-    const view = Object.entries(SIDE_PANEL_VIEW_TARGETS).find(
-      ([, target]) => target.kind === input.target.kind,
-    )?.[0] as ExplorerTab | undefined;
-    if (!view || !input.checkout) {
-      return null;
-    }
-    const panel = usePanelStore.getState();
-    panel.setExplorerTabForCheckout({ ...input.checkout, tab: view });
-    panel.openCompactFileExplorer(input.checkout);
-    return null;
-  }
-
-  const store = useWorkspaceLayoutStore.getState();
-  const paneId = canUseSidePanelPane(input) ? store.showSidePanel(input.workspaceKey) : undefined;
-  return store.openTab({
-    workspaceKey: input.workspaceKey,
-    target: input.target,
-    intent: "reveal",
-    placement: paneId ? { mode: "pane", paneId } : undefined,
-  });
-}
-
-/**
- * Undefined means "no opinion, use the focused pane". Revealing is part of resolving
- * the side panel: a focused tab in a hidden pane is nothing the user can see, so a
- * visible open brings the panel on screen. A background open never does.
- */
-function resolveSidePanelPlacement(input: {
-  store: LayoutState;
-  workspaceKey: string;
-  routeToSidePanel: boolean;
-  background: boolean;
-}): WorkspaceTabPlacement | undefined {
-  if (!input.routeToSidePanel) {
-    return undefined;
-  }
-  const paneId = input.background
-    ? selectSidePanelPaneId(input.store, input.workspaceKey)
-    : input.store.showSidePanel(input.workspaceKey);
-  return paneId ? { mode: "prefer", paneId } : undefined;
-}
-
-/** Reveal the side panel showing `view`. */
-export function openSidePanelView(input: SidePanelInput & { view: ExplorerTab }): void {
-  if (input.isCompact) {
-    if (!input.checkout) {
-      return;
-    }
-    const panel = usePanelStore.getState();
-    panel.setExplorerTabForCheckout({ ...input.checkout, tab: input.view });
-    panel.openCompactFileExplorer(input.checkout);
-    return;
-  }
-
-  openSupportingTab({
-    isCompact: input.isCompact,
-    workspaceKey: input.workspaceKey,
-    target: SIDE_PANEL_VIEW_TARGETS[input.view],
-    openInSidePanelByDefault: true,
-  });
-}
-
-/** Reveal the side panel without putting anything in it. */
-export function showSidePanel(input: SidePanelInput): void {
-  if (input.isCompact) {
-    if (input.checkout) {
-      usePanelStore.getState().openCompactFileExplorer(input.checkout);
-    }
-    return;
-  }
-  if (!input.workspaceKey || !canUseSidePanelPane(input)) {
-    return;
-  }
-  useWorkspaceLayoutStore.getState().showSidePanel(input.workspaceKey);
-}
-
-/** Put the side panel away. Its tabs stay open, waiting for the next reveal. */
-export function hideSidePanel(input: SidePanelInput): void {
-  if (input.isCompact) {
-    usePanelStore.getState().showMobileAgent();
-    return;
-  }
-  if (!input.workspaceKey) {
-    return;
-  }
-
-  const store = useWorkspaceLayoutStore.getState();
-  if (!canUseSidePanelPane(input)) {
-    const activeTabId = findActiveSidePanelTabId(store, input.workspaceKey);
-    if (activeTabId) {
-      store.closeTab(input.workspaceKey, activeTabId);
-    }
-    return;
-  }
-  store.hideSidePanel(input.workspaceKey);
-}
-
-/** Show the side panel if it is hidden, hide it if it is showing. */
-export function toggleSidePanel(input: SidePanelInput): void {
-  if (input.isCompact) {
-    if (input.checkout) {
-      usePanelStore.getState().toggleCompactFileExplorer(input.checkout);
-    }
-    return;
-  }
-  if (!input.workspaceKey) {
-    return;
-  }
-
-  if (isSidePanelOpen(input)) {
-    hideSidePanel(input);
-    return;
-  }
-
-  // Without splits there is no pane to reveal, so the toggle has to produce a tab.
-  if (!canUseSidePanelPane(input)) {
-    useWorkspaceLayoutStore.getState().openTab({
-      workspaceKey: input.workspaceKey,
-      target: SIDE_PANEL_VIEW_TARGETS.changes,
-      intent: "reveal",
-    });
-    return;
-  }
-  showSidePanel(input);
-}
-
-/** Reactive "is the side panel showing" for the surface this layout uses. */
-export function useIsSidePanelOpen(input: SidePanelQuery): boolean {
-  const compactOpen = usePanelStore(selectIsCompactFileExplorerOpen);
-  const paneOpen = useWorkspaceLayoutStore((state) =>
-    input.isCompact ? false : isSidePanelOpenForLayout(state, input),
-  );
-  return input.isCompact ? compactOpen : paneOpen;
-}
-
-/** Imperative counterpart of {@link useIsSidePanelOpen}. */
-export function isSidePanelOpen(input: SidePanelQuery): boolean {
-  if (input.isCompact) {
-    return selectIsCompactFileExplorerOpen(usePanelStore.getState());
-  }
-  return isSidePanelOpenForLayout(useWorkspaceLayoutStore.getState(), input);
-}
-
-function isSidePanelOpenForLayout(state: LayoutState, input: SidePanelQuery): boolean {
-  if (!input.workspaceKey) {
-    return false;
-  }
-  return canUseSidePanelPane(input)
-    ? selectIsSidePanelVisible(state, input.workspaceKey)
-    : findActiveSidePanelTabId(state, input.workspaceKey) !== null;
-}
diff --git a/packages/app/src/workspace/file-open/index.ts b/packages/app/src/workspace/file-open/index.ts
index a823edd5de..f09d5bd81f 100644
--- a/packages/app/src/workspace/file-open/index.ts
+++ b/packages/app/src/workspace/file-open/index.ts
@@ -1,6 +1,6 @@
 import { isAbsolutePath } from "@/utils/path";
 
-export type OpenFileDisposition = "main" | "side";
+export type OpenFileDisposition = "main" | "preferred" | "side";
 
 export interface WorkspaceFileLocation {
   path: string;
diff --git a/packages/cli/src/commands/plugin/scaffold.ts b/packages/cli/src/commands/plugin/scaffold.ts
index 45544a336c..9ac091df74 100644
--- a/packages/cli/src/commands/plugin/scaffold.ts
+++ b/packages/cli/src/commands/plugin/scaffold.ts
@@ -143,9 +143,12 @@ declare module "@getpaseo/plugin" {
     agentId: string;
   }
 
+  export type PluginPanelLocation = "workspace" | "explorer";
+  export interface PluginOpenPanelOptions { location?: PluginPanelLocation; }
+
   export type PluginWorkspacePanelContribution =
-    | { id: string; title: string; icon: string; context: "workspace"; Component: ComponentType<PluginWorkspacePanelProps> }
-    | { id: string; title: string; icon: string; context: "agent"; Component: ComponentType<PluginAgentPanelProps> };
+    | { id: string; title: string; icon: string; locations?: readonly PluginPanelLocation[]; context: "workspace"; Component: ComponentType<PluginWorkspacePanelProps> }
+    | { id: string; title: string; icon: string; locations?: readonly PluginPanelLocation[]; context: "agent"; Component: ComponentType<PluginAgentPanelProps> };
 
   export interface PluginSidebarContribution {
     id: string;
@@ -193,14 +196,14 @@ declare module "@getpaseo/plugin" {
   export interface PluginWorkspaceCommandContext extends PluginCommandCapabilities {
     context: "workspace";
     workspace: PluginWorkspaceSnapshot;
-    openPanel(id: string): void;
+    openPanel(id: string, options?: PluginOpenPanelOptions): void;
   }
 
   export interface PluginAgentCommandContext extends PluginCommandCapabilities {
     context: "agent";
     workspace: PluginWorkspaceSnapshot;
     agent: PluginAgentSnapshot;
-    openPanel(id: string): void;
+    openPanel(id: string, options?: PluginOpenPanelOptions): void;
   }
 
   export type PluginCommandCenterItemContribution =
diff --git a/packages/desktop/src/main.ts b/packages/desktop/src/main.ts
index 399272402b..6ef3dc14a5 100644
--- a/packages/desktop/src/main.ts
+++ b/packages/desktop/src/main.ts
@@ -28,6 +28,7 @@ import { registerDaemonManager } from "./daemon/daemon-manager.js";
 import { parsePassthroughCliArgsFromArgv, runPassthroughCli } from "./daemon/cli/passthrough.js";
 import { closeAllTransportSessions } from "./daemon/local-transport.js";
 import {
+  applyDesktopWindowChromeMode,
   registerWindowManager,
   getMainWindowChromeOptions,
   getWindowBackgroundColor,
@@ -40,6 +41,7 @@ import {
   buildStandardContextMenuItems,
 } from "./window/window-manager.js";
 import { setupDarwinCompositorWatchdog } from "./window/compositor-watchdog/index.js";
+import { resolveDesktopWindowChromeMode, windowChromeModeArgument } from "./window/chrome.js";
 import { registerDialogHandlers } from "./features/dialogs.js";
 import {
   registerNotificationHandlers,
@@ -103,6 +105,11 @@ const APP_SCHEME = "paseo";
 const PASEO_DEBUG = process.env.PASEO_DEBUG === "1";
 const DISABLE_SINGLE_INSTANCE_LOCK = process.env.PASEO_DISABLE_SINGLE_INSTANCE_LOCK === "1";
 const APP_NAME = process.env.PASEO_TEST_APP_NAME?.trim() || "Paseo";
+const DESKTOP_WINDOW_CHROME_MODE = resolveDesktopWindowChromeMode({
+  platform: process.platform,
+  override: process.env.PASEO_DESKTOP_WINDOW_CONTROLS,
+  isPackaged: app.isPackaged,
+});
 const UPDATE_QUIT_DEADLINE_MS = 5_000;
 const pendingBrowserWindowOpenRequests = new PendingBrowserWindowOpenRequests();
 const agentNavigationInbox = new AgentNavigationInbox();
@@ -748,16 +755,17 @@ async function createWindow(
     backgroundColor: getWindowBackgroundColor(systemTheme),
     ...(iconPath ? { icon: iconPath } : {}),
     ...getMainWindowChromeOptions({
-      platform: process.platform,
-      theme: systemTheme,
+      mode: DESKTOP_WINDOW_CHROME_MODE,
     }),
     webPreferences: {
       preload: getPreloadPath(),
+      additionalArguments: [windowChromeModeArgument(DESKTOP_WINDOW_CHROME_MODE)],
       contextIsolation: true,
       nodeIntegration: false,
       webviewTag: true,
     },
   });
+  applyDesktopWindowChromeMode({ win: mainWindow, mode: DESKTOP_WINDOW_CHROME_MODE });
 
   const webContentsId = mainWindow.webContents.id;
   pendingOpenProjectStore.set(webContentsId, options.pendingOpenProjectPath);
@@ -1015,7 +1023,7 @@ async function bootstrap(): Promise<void> {
   });
   ensureNotificationCenterRegistration();
   registerDaemonManager();
-  registerWindowManager();
+  registerWindowManager({ mode: DESKTOP_WINDOW_CHROME_MODE });
   registerDialogHandlers();
   registerNotificationHandlers();
   registerOpenerHandlers();
diff --git a/packages/desktop/src/preload.ts b/packages/desktop/src/preload.ts
index fc3bb19ec5..6075fbe64c 100644
--- a/packages/desktop/src/preload.ts
+++ b/packages/desktop/src/preload.ts
@@ -1,5 +1,6 @@
 import { contextBridge, ipcRenderer, webUtils } from "electron";
 import type { BrowserKeyboardPolicy } from "./features/browser-keyboard/index.js";
+import type { DesktopWindowChromeMode } from "./window/chrome.js";
 
 // This preload runs in Electron's sandbox and is tsc-compiled (not bundled), so it MUST
 // NOT emit any runtime module load other than "electron" — a require() of a local or
@@ -11,6 +12,17 @@ const PASEO_BROWSER_PROFILE_PARTITION = "persist:paseo-browser";
 
 type EventHandler = (payload: unknown) => void;
 
+function readWindowChromeMode(): DesktopWindowChromeMode {
+  const prefix = "--paseo-window-chrome-mode=";
+  const value = process.argv.find((argument) => argument.startsWith(prefix))?.slice(prefix.length);
+  if (value === "native-mac" || value === "custom-windows" || value === "custom-linux") {
+    return value;
+  }
+  // COMPAT(windowChromeMode): added in v0.5.3; remove after 2026-11-25.
+  if (process.platform === "darwin") return "native-mac";
+  return process.platform === "linux" ? "custom-linux" : "custom-windows";
+}
+
 interface AttachedBrowserRegistration {
   browserId: string;
   workspaceId: string;
@@ -19,6 +31,7 @@ interface AttachedBrowserRegistration {
 
 contextBridge.exposeInMainWorld("paseoDesktop", {
   platform: process.platform,
+  windowChromeMode: readWindowChromeMode(),
   invoke: (command: string, args?: Record<string, unknown>) =>
     ipcRenderer.invoke("paseo:invoke", command, args),
   getPendingOpenProject: () =>
@@ -45,16 +58,15 @@ contextBridge.exposeInMainWorld("paseoDesktop", {
     openNew: (options?: { pendingOpenProjectPath?: string | null }) =>
       ipcRenderer.invoke("paseo:window:openNew", options),
     getCurrentWindow: () => ({
+      minimize: () => ipcRenderer.invoke("paseo:window:minimize"),
+      close: () => ipcRenderer.invoke("paseo:window:close"),
       toggleMaximize: () => ipcRenderer.invoke("paseo:window:toggleMaximize"),
+      isMaximized: () => ipcRenderer.invoke("paseo:window:isMaximized"),
       setFullscreen: (fullscreen: boolean) =>
         ipcRenderer.invoke("paseo:window:setFullscreen", fullscreen),
       isFullscreen: () => ipcRenderer.invoke("paseo:window:isFullscreen"),
-      updateWindowControls: (update: {
-        height?: number;
-        backgroundColor?: string;
-        foregroundColor?: string;
-        trafficLightOffsetY?: number;
-      }) => ipcRenderer.invoke("paseo:window:updateWindowControls", update),
+      updateChrome: (update: { backgroundColor?: string; trafficLightOffsetY?: number }) =>
+        ipcRenderer.invoke("paseo:window:updateChrome", update),
       onResized: (handler: EventHandler): (() => void) => {
         const listener = (_ipcEvent: Electron.IpcRendererEvent, payload: unknown) => {
           handler(payload);
diff --git a/packages/desktop/src/window/chrome.test.ts b/packages/desktop/src/window/chrome.test.ts
new file mode 100644
index 0000000000..b4c36e1760
--- /dev/null
+++ b/packages/desktop/src/window/chrome.test.ts
@@ -0,0 +1,48 @@
+import { describe, expect, it } from "vitest";
+import { resolveDesktopWindowChromeMode, windowChromeModeArgument } from "./chrome";
+
+describe("desktop window chrome", () => {
+  it("maps each operating system to its shipped chrome", () => {
+    expect(
+      resolveDesktopWindowChromeMode({ platform: "darwin", override: undefined, isPackaged: true }),
+    ).toBe("native-mac");
+    expect(
+      resolveDesktopWindowChromeMode({ platform: "win32", override: undefined, isPackaged: true }),
+    ).toBe("custom-windows");
+    expect(
+      resolveDesktopWindowChromeMode({ platform: "linux", override: undefined, isPackaged: true }),
+    ).toBe("custom-linux");
+  });
+
+  it("allows development builds to preview custom controls on macOS", () => {
+    expect(
+      resolveDesktopWindowChromeMode({
+        platform: "darwin",
+        override: "windows",
+        isPackaged: false,
+      }),
+    ).toBe("custom-windows");
+    expect(
+      resolveDesktopWindowChromeMode({ platform: "darwin", override: "linux", isPackaged: false }),
+    ).toBe("custom-linux");
+  });
+
+  it("rejects invalid and packaged overrides", () => {
+    expect(() =>
+      resolveDesktopWindowChromeMode({ platform: "darwin", override: "mac", isPackaged: false }),
+    ).toThrow("Use windows or linux");
+    expect(() =>
+      resolveDesktopWindowChromeMode({
+        platform: "darwin",
+        override: "windows",
+        isPackaged: true,
+      }),
+    ).toThrow("only available in development builds");
+  });
+
+  it("serializes the validated mode for preload", () => {
+    expect(windowChromeModeArgument("custom-windows")).toBe(
+      "--paseo-window-chrome-mode=custom-windows",
+    );
+  });
+});
diff --git a/packages/desktop/src/window/chrome.ts b/packages/desktop/src/window/chrome.ts
new file mode 100644
index 0000000000..1e8aa017da
--- /dev/null
+++ b/packages/desktop/src/window/chrome.ts
@@ -0,0 +1,31 @@
+export type DesktopWindowChromeMode = "native-mac" | "custom-windows" | "custom-linux";
+
+const WINDOW_CHROME_MODE_ARGUMENT_PREFIX = "--paseo-window-chrome-mode=";
+
+function systemWindowChromeMode(platform: NodeJS.Platform): DesktopWindowChromeMode {
+  if (platform === "darwin") return "native-mac";
+  if (platform === "win32") return "custom-windows";
+  if (platform === "linux") return "custom-linux";
+  throw new Error(`Unsupported desktop window chrome platform: ${platform}`);
+}
+
+export function resolveDesktopWindowChromeMode(input: {
+  platform: NodeJS.Platform;
+  override: string | undefined;
+  isPackaged: boolean;
+}): DesktopWindowChromeMode {
+  const override = input.override?.trim().toLowerCase();
+  if (!override) return systemWindowChromeMode(input.platform);
+  if (input.isPackaged) {
+    throw new Error("PASEO_DESKTOP_WINDOW_CONTROLS is only available in development builds");
+  }
+  if (override === "windows") return "custom-windows";
+  if (override === "linux") return "custom-linux";
+  throw new Error(
+    `Unsupported PASEO_DESKTOP_WINDOW_CONTROLS value: ${input.override}. Use windows or linux.`,
+  );
+}
+
+export function windowChromeModeArgument(mode: DesktopWindowChromeMode): string {
+  return `${WINDOW_CHROME_MODE_ARGUMENT_PREFIX}${mode}`;
+}
diff --git a/packages/desktop/src/window/window-manager.test.ts b/packages/desktop/src/window/window-manager.test.ts
index 5a9a8247f7..3f6de7775c 100644
--- a/packages/desktop/src/window/window-manager.test.ts
+++ b/packages/desktop/src/window/window-manager.test.ts
@@ -2,16 +2,12 @@ import { describe, expect, it, vi } from "vitest";
 
 import {
   applyMacWindowControlsUpdate,
-  applyWindowControlsOverlayUpdate,
-  createWindowControlsOverlayState,
   DEFAULT_WINDOW_HEIGHT,
   DEFAULT_WINDOW_WIDTH,
   getMainWindowChromeOptions,
-  getTitleBarOverlayOptions,
   readBadgeCount,
-  readWindowControlsOverlayUpdate,
+  readWindowChromeUpdate,
   readWindowTheme,
-  resolveRuntimeTitleBarOverlayOptions,
   resolveWindowBounds,
 } from "./window-manager";
 
@@ -47,108 +43,33 @@ describe("window-manager", () => {
     });
   });
 
-  describe("getTitleBarOverlayOptions", () => {
-    it("returns light title bar overlay colors", () => {
-      expect(getTitleBarOverlayOptions("light")).toEqual({
-        color: "#ffffff",
-        symbolColor: "#09090b",
-        height: 29,
-      });
-    });
-
-    it("returns dark title bar overlay colors", () => {
-      expect(getTitleBarOverlayOptions("dark")).toEqual({
-        color: "#181B1A",
-        symbolColor: "#e4e4e7",
-        height: 29,
-      });
-    });
-  });
-
-  describe("readWindowControlsOverlayUpdate", () => {
+  describe("readWindowChromeUpdate", () => {
     it("accepts partial runtime overlay updates", () => {
       expect(
-        readWindowControlsOverlayUpdate({
-          height: 48,
+        readWindowChromeUpdate({
           backgroundColor: "#181B1A",
           trafficLightOffsetY: -5,
         }),
       ).toEqual({
-        height: 48,
         backgroundColor: "#181B1A",
         trafficLightOffsetY: -5,
       });
     });
 
     it("rejects empty and invalid payloads", () => {
-      expect(readWindowControlsOverlayUpdate(undefined)).toBeNull();
-      expect(readWindowControlsOverlayUpdate({})).toBeNull();
-      expect(readWindowControlsOverlayUpdate({ height: 0 })).toBeNull();
-      expect(readWindowControlsOverlayUpdate({ backgroundColor: 12 })).toBeNull();
-      expect(readWindowControlsOverlayUpdate({ trafficLightOffsetY: -11 })).toBeNull();
+      expect(readWindowChromeUpdate(undefined)).toBeNull();
+      expect(readWindowChromeUpdate({})).toBeNull();
+      expect(readWindowChromeUpdate({ backgroundColor: 12 })).toBeNull();
+      expect(readWindowChromeUpdate({ trafficLightOffsetY: -11 })).toBeNull();
     });
 
     it("preserves fractional traffic-light offsets", () => {
-      expect(readWindowControlsOverlayUpdate({ trafficLightOffsetY: 1.5 })).toEqual({
+      expect(readWindowChromeUpdate({ trafficLightOffsetY: 1.5 })).toEqual({
         trafficLightOffsetY: 1.5,
       });
     });
   });
 
-  describe("resolveRuntimeTitleBarOverlayOptions", () => {
-    it("applies the VS Code height minus border adjustment", () => {
-      expect(
-        resolveRuntimeTitleBarOverlayOptions({
-          height: 48,
-          backgroundColor: "#ffffff",
-          foregroundColor: "#09090b",
-        }),
-      ).toEqual({
-        color: "#ffffff",
-        symbolColor: "#09090b",
-        height: 47,
-      });
-    });
-  });
-
-  describe("applyWindowControlsOverlayUpdate", () => {
-    it("merges cached colors with later runtime height updates", () => {
-      const setTitleBarOverlay = vi.fn();
-      let state = createWindowControlsOverlayState("dark");
-
-      state = applyWindowControlsOverlayUpdate({
-        win: { setTitleBarOverlay },
-        current: state,
-        update: {
-          backgroundColor: "#181B1A",
-          foregroundColor: "#e4e4e7",
-        },
-      });
-
-      state = applyWindowControlsOverlayUpdate({
-        win: { setTitleBarOverlay },
-        current: state,
-        update: { height: 48 },
-      });
-
-      expect(state).toEqual({
-        height: 48,
-        backgroundColor: "#181B1A",
-        foregroundColor: "#e4e4e7",
-      });
-      expect(setTitleBarOverlay).toHaveBeenNthCalledWith(1, {
-        color: "#181B1A",
-        symbolColor: "#e4e4e7",
-        height: 28,
-      });
-      expect(setTitleBarOverlay).toHaveBeenNthCalledWith(2, {
-        color: "#181B1A",
-        symbolColor: "#e4e4e7",
-        height: 47,
-      });
-    });
-  });
-
   describe("applyMacWindowControlsUpdate", () => {
     it("uses the focus and normal traffic-light positions", () => {
       const setWindowButtonPosition = vi.fn();
@@ -168,47 +89,32 @@ describe("window-manager", () => {
   });
 
   describe("getMainWindowChromeOptions", () => {
-    it("uses frameless hidden title bars with overlay on windows", () => {
+    it("uses renderer-painted controls on windows", () => {
       expect(
         getMainWindowChromeOptions({
-          platform: "win32",
-          theme: "dark",
+          mode: "custom-windows",
         }),
       ).toEqual({
-        titleBarStyle: "hidden",
         frame: false,
         autoHideMenuBar: true,
-        titleBarOverlay: {
-          color: "#181B1A",
-          symbolColor: "#e4e4e7",
-          height: 29,
-        },
       });
     });
 
-    it("uses frameless hidden title bars with overlay on linux", () => {
+    it("uses renderer-painted controls on linux", () => {
       expect(
         getMainWindowChromeOptions({
-          platform: "linux",
-          theme: "light",
+          mode: "custom-linux",
         }),
       ).toEqual({
-        titleBarStyle: "hidden",
         frame: false,
         autoHideMenuBar: true,
-        titleBarOverlay: {
-          color: "#ffffff",
-          symbolColor: "#09090b",
-          height: 29,
-        },
       });
     });
 
     it("keeps the mac traffic-light path separate", () => {
       expect(
         getMainWindowChromeOptions({
-          platform: "darwin",
-          theme: "dark",
+          mode: "native-mac",
         }),
       ).toEqual({
         titleBarStyle: "hidden",
diff --git a/packages/desktop/src/window/window-manager.ts b/packages/desktop/src/window/window-manager.ts
index c011bb2bed..9c4da17590 100644
--- a/packages/desktop/src/window/window-manager.ts
+++ b/packages/desktop/src/window/window-manager.ts
@@ -11,6 +11,7 @@ import {
 } from "electron";
 
 import type { WindowState, WindowStateStore } from "../settings/window-state.js";
+import type { DesktopWindowChromeMode } from "./chrome.js";
 
 const WINDOW_STATE_SAVE_DEBOUNCE_MS = 400;
 const MAC_TRAFFIC_LIGHT_POSITION = { x: 16, y: 14 } as const;
@@ -25,19 +26,11 @@ export function readBadgeCount(input: unknown): number {
 }
 
 export type WindowTheme = "light" | "dark";
-export interface WindowControlsOverlayUpdate {
-  height?: number;
+export interface WindowChromeUpdate {
   backgroundColor?: string;
-  foregroundColor?: string;
   trafficLightOffsetY?: number;
 }
 
-export interface WindowControlsOverlayState {
-  height: number;
-  backgroundColor?: string;
-  foregroundColor?: string;
-}
-
 export function readWindowTheme(input: unknown): WindowTheme | null {
   if (input === "light" || input === "dark") {
     return input;
@@ -54,31 +47,13 @@ export function getWindowBackgroundColor(theme: WindowTheme): string {
   return theme === "dark" ? "#181B1A" : "#ffffff";
 }
 
-export function createWindowControlsOverlayState(theme: WindowTheme): WindowControlsOverlayState {
-  const overlay = getTitleBarOverlayOptions(theme);
-  return {
-    height: overlay.height ?? 29,
-    backgroundColor: overlay.color,
-    foregroundColor: overlay.symbolColor,
-  };
-}
-
-export function getTitleBarOverlayOptions(theme: WindowTheme): Electron.TitleBarOverlayOptions {
-  if (theme === "dark") {
-    return { color: "#181B1A", symbolColor: "#e4e4e7", height: 29 };
-  }
-
-  return { color: "#ffffff", symbolColor: "#09090b", height: 29 };
-}
-
 export function getMainWindowChromeOptions(input: {
-  platform: NodeJS.Platform;
-  theme: WindowTheme;
+  mode: DesktopWindowChromeMode;
 }): Pick<
   Electron.BrowserWindowConstructorOptions,
   "titleBarStyle" | "trafficLightPosition" | "frame" | "titleBarOverlay" | "autoHideMenuBar"
 > {
-  if (input.platform === "darwin") {
+  if (input.mode === "native-mac") {
     return {
       titleBarStyle: "hidden",
       titleBarOverlay: true,
@@ -87,13 +62,20 @@ export function getMainWindowChromeOptions(input: {
   }
 
   return {
-    titleBarStyle: "hidden",
     frame: false,
-    titleBarOverlay: getTitleBarOverlayOptions(input.theme),
     autoHideMenuBar: true,
   };
 }
 
+export function applyDesktopWindowChromeMode(input: {
+  win: Pick<BrowserWindow, "setWindowButtonVisibility">;
+  mode: DesktopWindowChromeMode;
+  platform?: NodeJS.Platform;
+}): void {
+  if ((input.platform ?? process.platform) !== "darwin") return;
+  input.win.setWindowButtonVisibility(input.mode === "native-mac");
+}
+
 export const DEFAULT_WINDOW_WIDTH = 1200;
 export const DEFAULT_WINDOW_HEIGHT = 800;
 
@@ -114,15 +96,6 @@ export function resolveWindowBounds(
   return { width, height };
 }
 
-function readFiniteOverlayHeight(input: unknown): number | null {
-  if (typeof input !== "number" || !Number.isFinite(input)) {
-    return null;
-  }
-
-  const rounded = Math.round(input);
-  return rounded >= 1 ? rounded : null;
-}
-
 function readOverlayColor(input: unknown): string | null {
   if (typeof input !== "string") {
     return null;
@@ -139,64 +112,28 @@ function readTrafficLightOffsetY(input: unknown): number | null {
   return Math.abs(input) <= MAX_TRAFFIC_LIGHT_OFFSET_Y ? input : null;
 }
 
-export function readWindowControlsOverlayUpdate(
-  input: unknown,
-): WindowControlsOverlayUpdate | null {
+export function readWindowChromeUpdate(input: unknown): WindowChromeUpdate | null {
   if (!input || typeof input !== "object") {
     return null;
   }
 
   const candidate = input as Record<string, unknown>;
-  const height = readFiniteOverlayHeight(candidate.height);
   const backgroundColor = readOverlayColor(candidate.backgroundColor);
-  const foregroundColor = readOverlayColor(candidate.foregroundColor);
   const trafficLightOffsetY = readTrafficLightOffsetY(candidate.trafficLightOffsetY);
 
-  if (
-    height === null &&
-    backgroundColor === null &&
-    foregroundColor === null &&
-    trafficLightOffsetY === null
-  ) {
+  if (backgroundColor === null && trafficLightOffsetY === null) {
     return null;
   }
 
   return {
-    ...(height !== null ? { height } : {}),
     ...(backgroundColor !== null ? { backgroundColor } : {}),
-    ...(foregroundColor !== null ? { foregroundColor } : {}),
     ...(trafficLightOffsetY !== null ? { trafficLightOffsetY } : {}),
   };
 }
 
-export function resolveRuntimeTitleBarOverlayOptions(
-  state: WindowControlsOverlayState,
-): Electron.TitleBarOverlayOptions {
-  return {
-    color: state.backgroundColor?.trim() === "" ? undefined : state.backgroundColor,
-    symbolColor: state.foregroundColor?.trim() === "" ? undefined : state.foregroundColor,
-    height: Math.max(0, state.height - 1),
-  };
-}
-
-export function applyWindowControlsOverlayUpdate(input: {
-  win: Pick<BrowserWindow, "setTitleBarOverlay">;
-  current: WindowControlsOverlayState;
-  update: WindowControlsOverlayUpdate;
-}): WindowControlsOverlayState {
-  const next: WindowControlsOverlayState = {
-    height: input.update.height ?? input.current.height,
-    backgroundColor: input.update.backgroundColor ?? input.current.backgroundColor,
-    foregroundColor: input.update.foregroundColor ?? input.current.foregroundColor,
-  };
-
-  input.win.setTitleBarOverlay(resolveRuntimeTitleBarOverlayOptions(next));
-  return next;
-}
-
 export function applyMacWindowControlsUpdate(input: {
   win: Pick<BrowserWindow, "setWindowButtonPosition">;
-  update: WindowControlsOverlayUpdate;
+  update: WindowChromeUpdate;
 }): void {
   if (input.update.trafficLightOffsetY === undefined) {
     return;
@@ -208,8 +145,14 @@ export function applyMacWindowControlsUpdate(input: {
   });
 }
 
-export function registerWindowManager(): void {
-  const overlayStateByWindow = new WeakMap<BrowserWindow, WindowControlsOverlayState>();
+export function registerWindowManager(input: { mode: DesktopWindowChromeMode }): void {
+  ipcMain.handle("paseo:window:minimize", (event) => {
+    BrowserWindow.fromWebContents(event.sender)?.minimize();
+  });
+
+  ipcMain.handle("paseo:window:close", (event) => {
+    BrowserWindow.fromWebContents(event.sender)?.close();
+  });
 
   ipcMain.handle("paseo:window:toggleMaximize", (event) => {
     const win = BrowserWindow.fromWebContents(event.sender);
@@ -226,6 +169,10 @@ export function registerWindowManager(): void {
     return win?.isFullScreen() ?? false;
   });
 
+  ipcMain.handle("paseo:window:isMaximized", (event) => {
+    return BrowserWindow.fromWebContents(event.sender)?.isMaximized() ?? false;
+  });
+
   ipcMain.handle("paseo:window:setFullscreen", (event, fullscreen: unknown) => {
     if (typeof fullscreen !== "boolean") return;
     BrowserWindow.fromWebContents(event.sender)?.setFullScreen(fullscreen);
@@ -246,13 +193,13 @@ export function registerWindowManager(): void {
     }
   });
 
-  ipcMain.handle("paseo:window:updateWindowControls", (event, update?: unknown) => {
+  ipcMain.handle("paseo:window:updateChrome", (event, update?: unknown) => {
     const win = BrowserWindow.fromWebContents(event.sender);
     if (!win) {
       return;
     }
 
-    const nextUpdate = readWindowControlsOverlayUpdate(update);
+    const nextUpdate = readWindowChromeUpdate(update);
     if (!nextUpdate) {
       return;
     }
@@ -261,19 +208,9 @@ export function registerWindowManager(): void {
       win.setBackgroundColor(nextUpdate.backgroundColor);
     }
 
-    if (process.platform === "darwin") {
+    if (input.mode === "native-mac") {
       applyMacWindowControlsUpdate({ win, update: nextUpdate });
-      return;
     }
-
-    const current =
-      overlayStateByWindow.get(win) ?? createWindowControlsOverlayState(resolveSystemWindowTheme());
-    const nextState = applyWindowControlsOverlayUpdate({
-      win,
-      current,
-      update: nextUpdate,
-    });
-    overlayStateByWindow.set(win, nextState);
   });
 }
 
diff --git a/packages/plugin/src/contracts.ts b/packages/plugin/src/contracts.ts
index 2c47eeeda8..d6a57a657f 100644
--- a/packages/plugin/src/contracts.ts
+++ b/packages/plugin/src/contracts.ts
@@ -63,10 +63,17 @@ export interface PluginAgentSnapshot {
   readonly labels: Readonly<Record<string, string>>;
 }
 
+export type PluginPanelLocation = "workspace" | "explorer";
+
+export interface PluginOpenPanelOptions {
+  location?: PluginPanelLocation;
+}
+
 interface PluginWorkspacePanelBase {
   id: string;
   title: string;
   icon: string;
+  locations?: readonly PluginPanelLocation[];
 }
 
 export interface PluginWorkspacePanelProps extends PluginHostProps {
@@ -145,14 +152,14 @@ export interface PluginGlobalCommandContext extends PluginCommandCapabilities {
 export interface PluginWorkspaceCommandContext extends PluginCommandCapabilities {
   context: "workspace";
   workspace: PluginWorkspaceSnapshot;
-  openPanel(id: string): void;
+  openPanel(id: string, options?: PluginOpenPanelOptions): void;
 }
 
 export interface PluginAgentCommandContext extends PluginCommandCapabilities {
   context: "agent";
   workspace: PluginWorkspaceSnapshot;
   agent: PluginAgentSnapshot;
-  openPanel(id: string): void;
+  openPanel(id: string, options?: PluginOpenPanelOptions): void;
 }
 
 interface PluginCommandCenterItemBase {
diff --git a/packages/plugin/src/index.ts b/packages/plugin/src/index.ts
index b0a5f3cc07..481ca29332 100644
--- a/packages/plugin/src/index.ts
+++ b/packages/plugin/src/index.ts
@@ -20,6 +20,8 @@ export type {
   PluginGlobalCommandContext,
   PluginHandlerContext,
   PluginHostProps,
+  PluginOpenPanelOptions,
+  PluginPanelLocation,
   PluginTheme,
   PluginSidebarContribution,
   PluginSurfaceContribution,
diff --git a/plugin-examples/local-plugin/index.ts b/plugin-examples/local-plugin/index.ts
index 38118fcb06..7df53a2026 100644
--- a/plugin-examples/local-plugin/index.ts
+++ b/plugin-examples/local-plugin/index.ts
@@ -10,6 +10,7 @@ export default function contribute(plugin: PluginContext) {
     title: "Plugin counter",
     icon: "Blocks",
     context: "workspace",
+    locations: ["workspace", "explorer"],
     Component: ExamplePanel,
   });
   plugin.addCommandCenterItem({
diff --git a/public-docs/plugins/index.md b/public-docs/plugins/index.md
index f747b40502..f387a365f5 100644
--- a/public-docs/plugins/index.md
+++ b/public-docs/plugins/index.md
@@ -92,6 +92,7 @@ export default function contribute(plugin: PluginContext) {
     title: "Workspace overview",
     icon: "PanelsTopLeft",
     context: "workspace",
+    locations: ["workspace", "explorer"],
     Component: WorkspaceOverview,
   });
   plugin.addCommandCenterItem({
diff --git a/public-docs/plugins/reference.md b/public-docs/plugins/reference.md
index 24d624ea19..b913daf116 100644
--- a/public-docs/plugins/reference.md
+++ b/public-docs/plugins/reference.md
@@ -269,6 +269,7 @@ export default function contribute(plugin: PluginContext) {
     title: "Review",
     icon: "Scan",
     context: "agent",
+    locations: ["workspace", "explorer"],
     Component: ReviewPanel,
   });
   return () => {};
@@ -283,6 +284,7 @@ export default function contribute(plugin: PluginContext) {
 | `title`     | Yes      | Workspace-tab title.                                          |
 | `icon`      | Yes      | Lucide icon name.                                             |
 | `context`   | Yes      | `workspace` or `agent`.                                       |
+| `locations` | No       | `workspace` and/or `explorer`. Defaults to `workspace`.       |
 | `Component` | Yes      | React Native component matching the selected context's props. |
 
 A workspace panel receives `PluginWorkspacePanelProps`: `context: "workspace"`, `theme`, `host`, `layout`, and `workspaceId`. An agent panel receives `PluginAgentPanelProps`: `context: "agent"`, the same common fields and `workspaceId`, plus `agentId`.
@@ -377,15 +379,15 @@ Global items appear on the installation's selected host. Workspace items appear
 
 Every callback receives:
 
-| Field                  | Context             | Meaning                                                       |
-| ---------------------- | ------------------- | ------------------------------------------------------------- |
-| `context`              | All                 | Matching discriminator.                                       |
-| `paseo`                | All                 | Selected host's existing `PaseoApi`.                          |
-| `rpc(contract, input)` | All                 | Typed call to this installation's daemon-side plugin handler. |
-| `openSurface(id)`      | All                 | Opens one of this plugin's registered global surfaces.        |
-| `workspace`            | Workspace and agent | Synchronous workspace snapshot.                               |
-| `agent`                | Agent               | Synchronous matching agent snapshot.                          |
-| `openPanel(id)`        | Workspace and agent | Opens a registered panel in the callback's current context.   |
+| Field                     | Context             | Meaning                                                                                                         |
+| ------------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------- |
+| `context`                 | All                 | Matching discriminator.                                                                                         |
+| `paseo`                   | All                 | Selected host's existing `PaseoApi`.                                                                            |
+| `rpc(contract, input)`    | All                 | Typed call to this installation's daemon-side plugin handler.                                                   |
+| `openSurface(id)`         | All                 | Opens one of this plugin's registered global surfaces.                                                          |
+| `workspace`               | Workspace and agent | Synchronous workspace snapshot.                                                                                 |
+| `agent`                   | Agent               | Synchronous matching agent snapshot.                                                                            |
+| `openPanel(id, options?)` | Workspace and agent | Opens a registered panel in the callback's current context. Pass `{ location: "explorer" }` to target Explorer. |
 
 An agent callback may open either an agent panel or a workspace panel. A workspace callback may open only a workspace panel. Unknown surface and panel IDs fail visibly. Use `paseo` for normal workspace, agent, provider, and daemon-config operations. Use `rpc` for plugin-specific filesystem, credential, vendor, or daemon-local work.