feat(app): make the side panel user-directed (#3605)

* feat(app): let the file panel close its tree rail

The file panel's tree rail was permanent on desktop — the changes panel
had a folder-tree toggle in its toolbar, the file toolbar had nothing, so
the rail was there whether you wanted it or not.

The changes panel's private DesktopTreeToggle becomes a shared
TreeRailToggle so both toolbars render the same affordance; that also
drops the treeToggleStyle prop threaded through ChangesToolbarProps,
which recomputed exactly what the component already built internally.
The i18n keys move out of workspace.git.diff into workspace.tree, since a
shared component reaching into the git namespace would rot.

The two rails keep independent flags — the file rail in panel-store, the
changes rail in useChangesPreferences — so closing one leaves the other
alone. FileTreeToggle wires itself to the store rather than taking a
callback: the bar renders several components below FilePanel, where the
rail actually lives.

Both rails also get narrower (320 -> 260 default, 200 -> 180 minimum).
The persist version bump resets treeRailWidth on purpose: nearly every
existing install carries the old 320 default, so without the reset the
narrower rail would only ever reach new users. Anyone who dragged their
rail to a deliberate custom width loses it once.

Note that MIN_CONTENT_WIDTH still clamps the rail to
`containerWidth - 240`, so in a narrow pane the new default never
applies — that floor, not the default, is what sets the width there.

* feat(app): make the side panel an empty workspace surface

The fixed, hideable side panel keeps supporting context beside an agent without seeding content. Pane-local choices stay local, while implicit supporting opens follow a persisted routing preference.

* test(app): exercise side panel policy through its capability boundary

The browser rail journey already covers the real tree-toggle behavior. Side-panel policy tests now pass their platform capability through the public boundary instead of replacing a production module.

* test(app): expect an empty side panel after upgrade

* test(app): expect an empty first split pane

* test(app): account for the empty side panel in split retention

* feat(app): make workspace panel tabs independent

Give explicit New actions fresh tab instances, keep panel state opaque to tab management, preserve File navigation context, and stabilize uncached File transitions.

* fix(app): preserve file conflicts during preview refresh

Keep the current preview mounted for same-target reads and conversions so the editor retains its conflict observation state. Clear retained previews only when the file target changes.

packages/app/e2e/browser/changes-pane.spec.ts

@@ -648,7 +648,7 @@ test("Changes keeps review navigation and controls inside its workspace tab", as
 
 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);
@@ -658,6 +658,41 @@ test("desktop Changes toggles a navigation tree beside the expanded diff documen
   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);
 
@@ -675,6 +710,12 @@ test("desktop Changes toggles a navigation tree beside the expanded diff documen
 
   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();
@@ -735,7 +776,38 @@ test("desktop Changes toggles a navigation tree beside the expanded diff documen
   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 options control touch-sized", async ({ page }) => {
+  const workspace = await createWorkspaceWithMountedTabDiff();
+  await useUnwrappedDiffLines(page);
+  await openWorkspaceChanges(page, workspace);
+  await page.setViewportSize({ width: 480, height: 900 });
+
+  const options = page.getByRole("button", { name: "Diff options" }).filter({ visible: true });
+  const [optionsBox, glyphBox] = await Promise.all([
+    options.boundingBox(),
+    options.locator("svg").boundingBox(),
+  ]);
+  if (!optionsBox || !glyphBox) {
+    throw new Error("Compact Changes options geometry could not be measured");
+  }
+  expect(optionsBox.width).toBe(32);
+  expect(optionsBox.height).toBe(32);
+  expect(glyphBox.width).toBe(18);
+  expect(glyphBox.height).toBe(18);
+
+  await options.click();
+  const wrapLines = page.getByText("Wrap long lines", { exact: true });
+  await expect(wrapLines).toBeVisible();
+  await wrapLines.click();
+  await options.click();
+  await expect(page.getByTestId("changes-toggle-wrap-lines")).toContainText("Scroll long lines");
 });
 
 test("canvas diff stays sharp while its workspace pane is resized", async ({ page }) => {
@@ -875,6 +947,7 @@ test("split canvas creates a review on the changed side and keeps it in that col
   const workspace = await createWorkspaceWithMountedTabDiff();
   await configureDiffPresentation(page, { layout: "split", wrapLines: false });
   await openWorkspaceChanges(page, workspace);
+  await setOpenChangesPresentation(page, { layout: "split", wrapLines: false });
   await startReviewOnFirstChangedLine(page, "right");
   const [editor, body] = await Promise.all([
     page.getByTestId("inline-review-editor").boundingBox(),
@@ -1004,6 +1077,7 @@ test("canvas diff copies only the selected split side", async ({ context, page }
   await context.grantPermissions(["clipboard-read", "clipboard-write"]);
   await configureDiffPresentation(page, { layout: "split", wrapLines: false });
   await openSelectionWorkspaceChanges(page, workspace);
+  await setOpenChangesPresentation(page, { layout: "split", wrapLines: false });
   const before = await readSelectionPaintSamples(page, "right");
   await dragAddedTextRange(page, {
     lines,
@@ -1027,6 +1101,7 @@ test("canvas diff copies exact wrapped fragments", async ({ context, page }) =>
   await context.grantPermissions(["clipboard-read", "clipboard-write"]);
   await configureDiffPresentation(page, { layout: "unified", wrapLines: true });
   await openSelectionWorkspaceChanges(page, workspace);
+  await setOpenChangesPresentation(page, { layout: "unified", wrapLines: true });
   await dragAddedTextRange(page, {
     lines: [content],
     wrapped: true,
@@ -1151,6 +1226,31 @@ async function configureDiffPresentation(
   );
 }
 
+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";
+  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;
+  if (currentWrapLines !== requestedPresentation.wrapLines) {
+    await wrapItem.click();
+  } else {
+    await page.keyboard.press("Escape");
+  }
+}
+
 async function holdBrowserFontLoads(page: Page): Promise<void> {
   await page.addInitScript(() => {
     const fontSet = document.fonts;

packages/app/e2e/browser/commit-diff-panel.spec.ts

@@ -51,6 +51,19 @@ test("commit history shows dates and shares diff layout preferences", async ({
   const panel = page.getByTestId("commit-diff-panel").filter({ visible: true });
   await expect(panel.getByTestId("commit-diff-toolbar")).toBeVisible({ timeout: 30_000 });
   const layoutToggle = panel.getByTestId("commit-diff-toggle-layout");
+  const [commitToolbarBox, layoutToggleBox, layoutToggleGlyphBox] = await Promise.all([
+    panel.getByTestId("commit-diff-header").boundingBox(),
+    layoutToggle.boundingBox(),
+    layoutToggle.locator("svg").boundingBox(),
+  ]);
+  if (!commitToolbarBox || !layoutToggleBox || !layoutToggleGlyphBox) {
+    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(layoutToggleGlyphBox.width).toBe(14);
+  expect(layoutToggleGlyphBox.height).toBe(14);
   await expect(layoutToggle).toHaveAccessibleName("Switch to side-by-side diff");
   await expect(panel.getByTestId("git-diff-canvas")).toBeVisible({ timeout: 30_000 });
   await expectCommitDiffHeaderGeometry(panel);

packages/app/e2e/browser/diff-performance.spec.ts

@@ -77,7 +77,7 @@ diffPerfDescribe("Diff canvas performance", () => {
       await page.setViewportSize({ width: 1400, height: 900 });
       await page.goto(buildHostWorkspaceRoute(getServerId(), created.workspace.id));
       await waitForWorkspaceTabsVisible(page);
-      await page.getByRole("button", { name: "Open explorer" }).click();
+      await openChangesPanel(page);
       await expect(page.getByTestId("git-diff-canvas")).toBeVisible({ timeout: 30_000 });
 
       await expectSingleCanvasSurface(page);

packages/app/e2e/browser/explorer-pane-placement.spec.ts

@@ -9,7 +9,7 @@ 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 { ensureExplorerPane, waitForWorkspaceTabsVisible } from "../support/helpers/workspace-tabs";
+import { openChangesPanel, waitForWorkspaceTabsVisible } from "../support/helpers/workspace-tabs";
 
 function visible(page: Page, testId: string): Locator {
   return page.getByTestId(testId).filter({ visible: true });
@@ -37,9 +37,8 @@ function mainTabRow(page: Page): Locator {
 }
 
 async function focusExplorerPane(page: Page): Promise<void> {
-  await ensureExplorerPane(page);
+  await openChangesPanel(page);
   const changesTab = visible(page, "workspace-tab-working_diff").first();
-  await changesTab.click({ position: { x: 12, y: 13 } });
   await expect(changesTab).toHaveAttribute("aria-selected", "true");
 }
 
@@ -54,11 +53,15 @@ async function closeSeededDraftInMainPane(page: Page): Promise<void> {
   await expect(draftTabChip(page)).toHaveCount(0, { timeout: 15_000 });
 }
 
-async function emptyPaneBox(page: Page) {
-  const paneChild = page
+function emptyPaneChild(page: Page): Locator {
+  return page
     .getByTestId("split-group-child")
-    .filter({ hasText: "No tabs in this pane." })
+    .filter({ has: page.getByTestId("workspace-pane-empty-state") })
     .first();
+}
+
+async function emptyPaneBox(page: Page) {
+  const paneChild = emptyPaneChild(page);
   await expect(paneChild).toBeVisible({ timeout: 15_000 });
   const box = await paneChild.boundingBox();
   expect(box).not.toBeNull();
@@ -170,7 +173,7 @@ test.describe("explorer pane tab placement", () => {
         });
         // The split must have taken: agent pane + empty main + explorer = 3 tab rows.
         await expect(visible(page, "workspace-tabs-row")).toHaveCount(3, { timeout: 10_000 });
-        await expect(page.getByText("No tabs in this pane.")).toBeVisible();
+        await expect(page.getByTestId("workspace-pane-empty-state")).toBeVisible();
       });
 
       await test.step("app must stay interactive after the split", async () => {
@@ -183,12 +186,10 @@ test.describe("explorer pane tab placement", () => {
         await chip.click({ position: { x: 12, y: 13 }, timeout: 5_000 });
         await expect(chip).toHaveAttribute("aria-selected", "true", { timeout: 5_000 });
 
-        // Clicking inside the empty pane (focuses it) must not lock anything.
-        const emptyPane = page
-          .getByTestId("split-group-child")
-          .filter({ hasText: "No tabs in this pane." })
-          .first();
-        await emptyPane.click({ timeout: 5_000 });
+        // Clicking inside the empty pane (focuses it) must not lock anything. Aim
+        // above the vertically centred launcher, which would open a tab instead.
+        const emptyPane = emptyPaneChild(page);
+        await emptyPane.click({ position: { x: 40, y: 120 }, timeout: 5_000 });
 
         // The empty pane's + menu must open and dismiss cleanly.
         const emptyPaneTrigger = emptyPane.getByTestId("workspace-new-tab-menu-trigger").first();
@@ -207,7 +208,9 @@ test.describe("explorer pane tab placement", () => {
         });
 
         // The agent chip must have moved into the previously empty pane and stay clickable.
-        await expect(page.getByText("No tabs in this pane.")).toHaveCount(0, { timeout: 10_000 });
+        await expect(page.getByTestId("workspace-pane-empty-state")).toHaveCount(0, {
+          timeout: 10_000,
+        });
         await agentTabChip(page, agentId)
           .first()
           .click({ position: { x: 12, y: 13 } });

packages/app/e2e/browser/explorer-surface-upgrade.spec.ts

@@ -24,11 +24,9 @@ function dockedSidebar(page: Page): Locator {
   return visible(page, "explorer-header");
 }
 
-/** The explorer pane is the tab row carrying the Changes tab. */
-function explorerTabRow(page: Page): Locator {
-  return visible(page, "workspace-tabs-row").filter({
-    has: page.getByTestId("workspace-tab-working_diff"),
-  });
+/** The desktop companion surface is a hideable side panel. */
+function sidePanel(page: Page): Locator {
+  return visible(page, "workspace-side-panel");
 }
 
 /** Seed exactly what a pre-pane build wrote after the user opened the sidebar once. */
@@ -72,11 +70,12 @@ test.describe("explorer surface after upgrading from the docked sidebar", () =>
 
         const toggle = visible(page, "workspace-explorer-toggle").first();
         await toggle.click();
-        await expect(explorerTabRow(page)).toHaveCount(1, { timeout: 15_000 });
+        await expect(sidePanel(page)).toHaveCount(1, { timeout: 15_000 });
+        await expect(sidePanel(page).getByTestId("workspace-pane-empty-state")).toBeVisible();
         await expect(dockedSidebar(page)).toHaveCount(0);
 
         await toggle.click();
-        await expect(explorerTabRow(page)).toHaveCount(0, { timeout: 15_000 });
+        await expect(sidePanel(page)).toHaveCount(0, { timeout: 15_000 });
         await expect(dockedSidebar(page)).toHaveCount(0);
       });
 
@@ -108,20 +107,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(explorerTabRow(page)).toHaveCount(1, { timeout: 15_000 });
+        await expect(sidePanel(page)).toHaveCount(1, { timeout: 15_000 });
+        await expect(sidePanel(page).getByTestId("workspace-pane-empty-state")).toBeVisible();
         await expect(agentList).toHaveCount(1);
       });
 
       await test.step("the shortcut collapses both", async () => {
         await page.keyboard.press(`${modifier}+.`);
-        await expect(explorerTabRow(page)).toHaveCount(0, { timeout: 15_000 });
+        await expect(sidePanel(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(explorerTabRow(page)).toHaveCount(1, { timeout: 15_000 });
+        await expect(sidePanel(page)).toHaveCount(1, { timeout: 15_000 });
+        await expect(sidePanel(page).getByTestId("workspace-pane-empty-state")).toBeVisible();
       });
     } finally {
       await workspace.cleanup();

packages/app/e2e/browser/file-transition.spec.ts

@@ -0,0 +1,128 @@
+import { expect } from "@playwright/test";
+import { test } from "../support/fixtures";
+import { delayFileReadResponse } from "../support/helpers/file-read-gate";
+import {
+  expandFolder,
+  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;
+
+test.beforeAll(async () => {
+  workspace = await seedWorkspace({
+    repoPrefix: "file-transition-",
+    repo: {
+      files: [
+        { path: "src/a.ts", content: "export const sourceA = true;\n" },
+        { path: "src/b.ts", content: "export const sourceB = true;\n" },
+        { path: "docs/b.md", content: "# Markdown B\n" },
+      ],
+    },
+  });
+});
+
+test.afterAll(async () => workspace?.cleanup());
+
+async function openSourceA(page: import("@playwright/test").Page) {
+  await openFileExplorer(page);
+  await expandFolder(page, "src");
+  await openFileFromExplorer(page, "a.ts");
+  await expect(page.getByText("export const sourceA = true;")).toBeVisible({ timeout: 30_000 });
+}
+
+async function assertHeldFileTransition(
+  page: import("@playwright/test").Page,
+  targetPath: string,
+  finalText: string,
+  gate: Awaited<ReturnType<typeof delayFileReadResponse>>,
+) {
+  await page.evaluate((tabTestId) => {
+    const timeline: Array<{ chip: boolean; loading: boolean; unavailable: boolean }> = [];
+    const sample = () => {
+      const next = {
+        chip: Boolean(document.querySelector(`[data-testid="${tabTestId}"]`)),
+        loading: Boolean(document.querySelector('[data-testid="file-preview-loading"]')),
+        unavailable: Boolean(document.querySelector('[data-testid="file-preview-unsupported"]')),
+      };
+      if (JSON.stringify(timeline.at(-1)) !== JSON.stringify(next)) timeline.push(next);
+    };
+    sample();
+    const observer = new MutationObserver(sample);
+    observer.observe(document.body, { childList: true, subtree: true, characterData: true });
+    (
+      window as typeof window & { __fileTransitionTimeline?: typeof timeline }
+    ).__fileTransitionTimeline = timeline;
+    (
+      window as typeof window & { __fileTransitionObserver?: MutationObserver }
+    ).__fileTransitionObserver = observer;
+  }, `workspace-tab-file_${targetPath}`);
+  await openFileFromExplorer(page, targetPath.split("/").pop() as string);
+  await gate.waitUntilHeld();
+
+  const targetChip = page.getByTestId(`workspace-tab-file_${targetPath}`).first();
+  await expect(targetChip).toBeVisible();
+  await expect(targetChip).toContainText(targetPath.split("/").pop() as string);
+  await expect(page.getByTestId("file-preview-loading")).toBeVisible();
+  await expect(page.getByTestId("file-preview-unsupported")).toHaveCount(0);
+  await expect(page.getByText("export const sourceA = true;")).toHaveCount(0);
+
+  const heldTimeline = await page.evaluate(
+    () =>
+      (
+        window as typeof window & {
+          __fileTransitionTimeline?: Array<{
+            chip: boolean;
+            loading: boolean;
+            unavailable: boolean;
+          }>;
+        }
+      ).__fileTransitionTimeline ?? [],
+  );
+  expect(heldTimeline).toContainEqual(expect.objectContaining({ chip: true, loading: true }));
+  expect(heldTimeline).not.toContainEqual(expect.objectContaining({ unavailable: true }));
+  const descriptorIndex = heldTimeline.findIndex((sample) => sample.chip);
+  expect(heldTimeline.slice(descriptorIndex)).not.toContainEqual(
+    expect.objectContaining({ chip: false }),
+  );
+
+  gate.release();
+  await expect(page.getByText(finalText)).toBeVisible({ timeout: 30_000 });
+  await expect(page.getByTestId("file-preview-loading")).toHaveCount(0);
+  const timeline = await page.evaluate(() => {
+    const windowWithTimeline = window as typeof window & {
+      __fileTransitionTimeline?: Array<{ chip: boolean; loading: boolean; unavailable: boolean }>;
+      __fileTransitionObserver?: MutationObserver;
+    };
+    windowWithTimeline.__fileTransitionObserver?.disconnect();
+    return windowWithTimeline.__fileTransitionTimeline ?? [];
+  });
+  expect(
+    timeline.filter((sample, index) => sample.loading && !timeline[index - 1]?.loading),
+  ).toHaveLength(1);
+}
+
+test.describe("File target transitions", () => {
+  test("keeps the Markdown descriptor and loading state stable through a real delayed read", async ({
+    page,
+  }) => {
+    const gate = await delayFileReadResponse(page, "docs/b.md");
+    await page.reload();
+    await gotoWorkspace(page, workspace.workspaceId);
+    await openSourceA(page);
+    await expandFolder(page, "docs");
+    await assertHeldFileTransition(page, "docs/b.md", "Markdown B", gate);
+  });
+
+  test("keeps the source descriptor and loading state stable through a real delayed read", async ({
+    page,
+  }) => {
+    const gate = await delayFileReadResponse(page, "src/b.ts");
+    await page.reload();
+    await gotoWorkspace(page, workspace.workspaceId);
+    await openSourceA(page);
+    await assertHeldFileTransition(page, "src/b.ts", "export const sourceB = true;", gate);
+  });
+});

packages/app/e2e/browser/file-tree-rail-toggle.spec.ts

@@ -0,0 +1,115 @@
+// 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;
+
+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 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");
+  });
+});

packages/app/e2e/browser/side-panel.spec.ts

@@ -0,0 +1,217 @@
+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 emptyState(scope: Locator): Locator {
+  return scope.getByTestId("workspace-pane-empty-state");
+}
+
+function sidePanelToggle(page: Page): Locator {
+  return page.getByTestId("workspace-explorer-toggle").first();
+}
+
+function closePaneButton(page: Page): Locator {
+  return page.getByRole("button", { name: "Close pane" });
+}
+
+/** 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 });
+        await expect(emptyState(sidePanel(page))).toBeVisible();
+        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 emptyState(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("a loaded pane offers no one-tap close", async () => {
+        await expect(closePaneButton(page)).toHaveCount(0);
+      });
+
+      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(emptyState(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 = emptyState(mainPane(page));
+      await expect(emptyMain).toBeVisible({ timeout: 15_000 });
+      await capture(page, testInfo, "06-empty-main-pane-launcher");
+
+      await emptyMain.getByRole("button", { name: "Close pane" }).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-pane-empty-state")).toHaveCount(0);
+      await capture(page, testInfo, "07-empty-main-pane-removed");
+    } finally {
+      await workspace.cleanup();
+    }
+  });
+
+  test("the last pane on screen offers no Close 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 emptyState(sidePanel(page)).getByRole("button", { name: "Files" }).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 is now empty and the only pane the user can see. Taking it away would
+      // leave nowhere to look, so the launcher appears without a Close pane.
+      const lastPane = emptyState(mainPane(page));
+      await expect(lastPane).toBeVisible({ timeout: 15_000 });
+      await expect(lastPane.getByRole("button", { name: "Files" })).toBeVisible();
+      await expect(lastPane.getByRole("button", { name: "Close pane" })).toHaveCount(0);
+      await expect(closePaneButton(page)).toHaveCount(0);
+      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 emptyState(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-menu-trigger").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();
+    }
+  });
+});

packages/app/e2e/browser/sidebar-workspace.spec.ts

@@ -343,7 +343,7 @@ 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 explorer");
+      await expect(explorerToggle).toHaveAccessibleName("Close side panel");
       await expect(page.getByTestId("sidebar-global-new-workspace")).toBeVisible();
       await expect(page.getByTestId("workspace-tabs-row").filter({ visible: true })).toHaveCount(2);
 
@@ -351,7 +351,7 @@ test.describe("Half-screen desktop layout", () => {
       await expect(page.getByTestId("workspace-tab-files").filter({ visible: true })).toHaveCount(
         0,
       );
-      await expect(explorerToggle).toHaveAccessibleName("Open explorer");
+      await expect(explorerToggle).toHaveAccessibleName("Open side panel");
       await expect(page.getByTestId("sidebar-global-new-workspace")).toBeVisible();
     } finally {
       await workspace.cleanup();

packages/app/e2e/browser/workspace-pane-remount.spec.ts

@@ -65,12 +65,14 @@ test.describe("Workspace pane mounting", () => {
         .first()
         .elementHandle();
       expect(originalComposer).not.toBeNull();
+      const emptyPanesBeforeSplit = await page.getByTestId("workspace-pane-empty-state").count();
 
       await runWorkspaceActionFromCommandCenter(page, "Split pane right");
-      await expect(page.getByTestId("message-input-root").filter({ visible: true })).toHaveCount(
-        2,
+      await expect(page.getByTestId("workspace-pane-empty-state")).toHaveCount(
+        emptyPanesBeforeSplit + 1,
         { timeout: 30_000 },
       );
+      await expect(page.getByTestId("message-input-root").filter({ visible: true })).toHaveCount(1);
 
       const originalStillConnected = await originalComposer!.evaluate((node) => node.isConnected);
       expect(originalStillConnected).toBe(true);