From c5194233cfd752c66e0e73ba5324b462c6e3ebdf Mon Sep 17 00:00:00 2001
From: Bersabel Tadesse <brsabel.t@gmail.com>
Date: Wed, 19 Aug 2026 12:33:39 -0700
Subject: [PATCH] Refine right-sidebar split tab chrome

---
 .../SecondaryPanelTabStrip.test.ts            |  17 +-
 .../SecondaryPanelTabStrip.tsx                |  46 ++-
 .../SidebarSplitContainer.test.tsx            | 308 +++++++++++-------
 .../secondary-panel/SidebarSplitContainer.tsx | 119 +++++--
 ...eadSecondaryPanel.collapseControl.test.tsx |  89 ++++-
 .../ThreadSecondaryPanel.stories.tsx          | 121 ++++++-
 .../secondary-panel/ThreadSecondaryPanel.tsx  | 199 ++++++++---
 .../sidebarSplitLayout.test.ts                |  19 ++
 .../secondary-panel/sidebarSplitLayout.ts     |   2 +-
 .../secondary-panel/terminalPanelTabs.test.ts |  49 ++-
 .../secondary-panel/terminalPanelTabs.ts      |  19 +-
 .../thread/terminal/ThreadTerminalPanel.tsx   |   3 +
 .../useThreadTerminalController.test.ts       |  22 ++
 .../terminal/useThreadTerminalController.ts   |  15 +
 apps/app/src/components/ui/tab-pill.tsx       |  14 +-
 .../thread-detail/PaneMaximizeButton.tsx      |  19 +-
 .../thread-detail/SplitThreadArea.test.tsx    |  14 +
 .../views/thread-detail/SplitThreadArea.tsx   |   2 +-
 .../views/thread-detail/ThreadDetailView.tsx  | 164 ++++++++--
 19 files changed, 985 insertions(+), 256 deletions(-)

diff --git a/apps/app/src/components/secondary-panel/SecondaryPanelTabStrip.test.ts b/apps/app/src/components/secondary-panel/SecondaryPanelTabStrip.test.ts
index e941cf9612..0df7797568 100644
--- a/apps/app/src/components/secondary-panel/SecondaryPanelTabStrip.test.ts
+++ b/apps/app/src/components/secondary-panel/SecondaryPanelTabStrip.test.ts
@@ -16,7 +16,7 @@ afterEach(() => {
 
 describe("secondary panel tab-strip edge fades", () => {
   it("uses the themed edge fade", () => {
-    expect(SECONDARY_PANEL_TAB_STRIP_FADE_TONE).toBe("sidebar");
+    expect(SECONDARY_PANEL_TAB_STRIP_FADE_TONE).toBe("surface-raised");
   });
 
   it("observes the intrinsic tab row so async title changes refresh overflow", () => {
@@ -87,6 +87,8 @@ describe("secondary panel tab-strip edge fades", () => {
     );
     expect(leftButton?.classList.contains("w-0")).toBe(true);
     expect(rightButton?.classList.contains("w-0")).toBe(true);
+    expect(strip?.hasAttribute("data-overflowing")).toBe(false);
+    expect(strip?.classList.contains("border-border-hairline")).toBe(false);
 
     const rightFade = container.querySelector("[data-overflow-fade='right']");
     expect(rightFade?.classList.contains("opacity-0")).toBe(true);
@@ -122,11 +124,12 @@ describe("secondary panel tab-strip edge fades", () => {
     expect(leftButton?.tabIndex).toBe(-1);
     expect(rightButton?.classList.contains("opacity-100")).toBe(true);
     expect(rightButton?.tabIndex).toBe(0);
-    expect(rightButton?.classList.contains("bg-sidebar")).toBe(true);
-    expect(
-      rightButton?.classList.contains("hover:bg-surface-raised-solid"),
-    ).toBe(true);
-    expect(rightButton?.classList.contains("hover:bg-state-hover")).toBe(false);
+    expect(strip?.hasAttribute("data-overflowing")).toBe(true);
+    expect(strip?.classList.contains("rounded-md")).toBe(true);
+    expect(strip?.classList.contains("border-border-hairline")).toBe(true);
+    expect(strip?.classList.contains("bg-surface-raised-solid")).toBe(true);
+    expect(rightButton?.classList.contains("bg-transparent")).toBe(true);
+    expect(rightButton?.classList.contains("hover:bg-state-hover")).toBe(true);
 
     const scrollBy = vi.fn();
     Object.defineProperty(viewport!, "scrollBy", {
@@ -154,6 +157,8 @@ describe("secondary panel tab-strip edge fades", () => {
     });
     expect(leftButton?.classList.contains("w-0")).toBe(true);
     expect(rightButton?.classList.contains("w-0")).toBe(true);
+    expect(strip?.hasAttribute("data-overflowing")).toBe(false);
+    expect(strip?.classList.contains("border-border-hairline")).toBe(false);
     expect(document.activeElement).toBe(
       container.querySelector('button[aria-pressed="true"]'),
     );
diff --git a/apps/app/src/components/secondary-panel/SecondaryPanelTabStrip.tsx b/apps/app/src/components/secondary-panel/SecondaryPanelTabStrip.tsx
index 0ed23ff0a7..44deb0c8b3 100644
--- a/apps/app/src/components/secondary-panel/SecondaryPanelTabStrip.tsx
+++ b/apps/app/src/components/secondary-panel/SecondaryPanelTabStrip.tsx
@@ -34,7 +34,7 @@ import {
   OverflowFade,
   type OverflowFadeTone,
 } from "@/components/ui/overflow-fade";
-import { TabPill } from "@/components/ui/tab-pill";
+import { TabPill, type TabPillActiveTreatment } from "@/components/ui/tab-pill";
 import { useDragClickSuppression } from "@/components/ui/use-drag-click-suppression";
 import { cn } from "@bb/shared-ui/lib/utils";
 import {
@@ -57,7 +57,8 @@ const TAB_STRIP_SCROLL_BUTTON_CLASS =
 // Slack so sub-pixel scroll offsets don't leave an overflow cue at a hard edge.
 const EDGE_EPSILON_PX = 1;
 
-export const SECONDARY_PANEL_TAB_STRIP_FADE_TONE: OverflowFadeTone = "sidebar";
+export const SECONDARY_PANEL_TAB_STRIP_FADE_TONE: OverflowFadeTone =
+  "surface-raised";
 
 /**
  * Stand-in for dnd-kit's TouchSensor while the panel is closed or has nothing
@@ -86,6 +87,7 @@ const INITIAL_OVERFLOW_STATE: TabStripOverflowState = {
 };
 
 export interface SecondaryPanelTabStripProps {
+  activeClassName?: string;
   fileTabs: SecondaryPanelFileTab[];
   onBeginTabDrag?: (
     tabId: string,
@@ -100,11 +102,12 @@ export interface SecondaryPanelTabStripProps {
    * every page.
    */
   isPanelOpen: boolean;
-  activeTreatment?: "fill" | "underline";
+  activeTreatment?: TabPillActiveTreatment;
 }
 
 interface SortableFileTabProps {
-  activeTreatment: "fill" | "underline";
+  activeClassName?: string;
+  activeTreatment: TabPillActiveTreatment;
   activeTabRef: RefObject<HTMLDivElement | null>;
   dragDisabled: boolean;
   noDragClass: string | null;
@@ -125,6 +128,7 @@ interface SortableFileTabProps {
  * (covering pointer, keyboard, and programmatic selection).
  */
 export function SecondaryPanelTabStrip({
+  activeClassName,
   fileTabs,
   onBeginTabDrag,
   onReorderTab,
@@ -436,6 +440,7 @@ export function SecondaryPanelTabStrip({
           {fileTabs.map((tab) => (
             <SortableFileTab
               key={tab.id}
+              activeClassName={activeClassName}
               activeTreatment={activeTreatment}
               activeTabRef={activeTabRef}
               dragDisabled={dragDisabled}
@@ -452,7 +457,11 @@ export function SecondaryPanelTabStrip({
         {createPortal(
           <DragOverlay className="cursor-grabbing">
             {draggingTab === null ? null : (
-              <FileTab tab={draggingTab} activeTreatment={activeTreatment} />
+              <FileTab
+                tab={draggingTab}
+                activeClassName={activeClassName}
+                activeTreatment={activeTreatment}
+              />
             )}
           </DragOverlay>,
           document.body,
@@ -471,6 +480,7 @@ export function SecondaryPanelTabStrip({
       onBeginTabDrag,
       draggingTab,
       activeTreatment,
+      activeClassName,
     ],
   );
 
@@ -482,7 +492,12 @@ export function SecondaryPanelTabStrip({
     <div
       ref={stripRef}
       data-testid="secondary-panel-tab-strip"
-      className="group relative flex min-w-0 items-center"
+      data-overflowing={overflow.hasOverflow ? "" : undefined}
+      className={cn(
+        "group relative flex min-w-0 items-center",
+        overflow.hasOverflow &&
+          "rounded-md border border-border-hairline bg-surface-raised-solid",
+      )}
     >
       <TabStripScrollButton
         buttonRef={leftScrollButtonRef}
@@ -543,6 +558,7 @@ export function SecondaryPanelTabStrip({
 }
 
 function SortableFileTab({
+  activeClassName,
   activeTreatment,
   activeTabRef,
   dragDisabled,
@@ -592,7 +608,11 @@ function SortableFileTab({
       }}
       {...sortableListeners}
     >
-      <FileTab tab={tab} activeTreatment={activeTreatment} />
+      <FileTab
+        tab={tab}
+        activeClassName={activeClassName}
+        activeTreatment={activeTreatment}
+      />
     </div>
   );
 }
@@ -626,9 +646,12 @@ function TabStripScrollButton({
       aria-label={label}
       onClick={onClick}
       className={cn(
-        "z-20 shrink-0 bg-sidebar text-muted-foreground shadow-none hover:bg-surface-raised-solid hover:text-foreground focus-visible:bg-sidebar",
+        "z-20 shrink-0 text-muted-foreground shadow-none",
         hasOverflow
-          ? TAB_STRIP_SCROLL_BUTTON_CLASS
+          ? [
+              TAB_STRIP_SCROLL_BUTTON_CLASS,
+              "bg-transparent hover:bg-state-hover hover:text-foreground focus-visible:bg-state-hover",
+            ]
           : "h-7 w-0 overflow-hidden p-0 max-md:pointer-coarse:h-9",
         "transition-opacity",
         canScroll
@@ -644,10 +667,12 @@ function TabStripScrollButton({
 
 function FileTab({
   tab,
+  activeClassName,
   activeTreatment,
 }: {
   tab: SecondaryPanelFileTab;
-  activeTreatment: "fill" | "underline";
+  activeClassName?: string;
+  activeTreatment: TabPillActiveTreatment;
 }) {
   const title =
     tab.statusLabel === null
@@ -660,6 +685,7 @@ function FileTab({
       secondaryLabel={tab.statusLabel === null ? null : `(${tab.statusLabel})`}
       title={title}
       isActive={tab.isActive}
+      activeClassName={activeClassName}
       activeTreatment={activeTreatment}
       onSelect={tab.onSelect}
       labelMaxWidthClass="max-w-[160px]"
diff --git a/apps/app/src/components/secondary-panel/SidebarSplitContainer.test.tsx b/apps/app/src/components/secondary-panel/SidebarSplitContainer.test.tsx
index f5a485ee35..facc12f1e5 100644
--- a/apps/app/src/components/secondary-panel/SidebarSplitContainer.test.tsx
+++ b/apps/app/src/components/secondary-panel/SidebarSplitContainer.test.tsx
@@ -48,20 +48,6 @@ function createTwoPaneState(): SidebarSplitState {
   );
 }
 
-function createStackedPaneState(): SidebarSplitState {
-  const initial = createSidebarSplitState(
-    TABS.map((tab) => tab.id),
-    "tab-a",
-  );
-  return moveSidebarTab(
-    initial,
-    initial.layout.focusedPaneId,
-    "tab-b",
-    { paneId: initial.layout.focusedPaneId, zone: "bottom" },
-    { groupId: "group-b" },
-  );
-}
-
 function persistState(state: SidebarSplitState): void {
   window.localStorage.setItem(
     sidebarSplitStorageKey(PANEL_STATE_ID),
@@ -225,8 +211,6 @@ describe("SidebarSplitContainer", () => {
   it.each([
     ["left", "flex-row", "tab-a,tab-b"],
     ["right", "flex-row", "tab-b,tab-a"],
-    ["top", "flex-col", "tab-a,tab-b"],
-    ["bottom", "flex-col", "tab-b,tab-a"],
   ] as const)(
     "moves the active tab to the supported %s position without dragging",
     (side, directionClass, expectedOrder) => {
@@ -262,6 +246,96 @@ describe("SidebarSplitContainer", () => {
     },
   );
 
+  it("rejects top and bottom tab tear-out zones while retaining side splits", () => {
+    Object.defineProperty(document, "elementsFromPoint", {
+      configurable: true,
+      value: vi.fn(() => []),
+    });
+    renderContainer({
+      renderPane: ({ onBeginTabDrag }) => (
+        <aside
+          data-testid="sidebar-panel"
+          ref={(element) => {
+            if (element === null) return;
+            vi.spyOn(element, "getBoundingClientRect").mockReturnValue({
+              bottom: 600,
+              height: 600,
+              left: 0,
+              right: 400,
+              top: 0,
+              width: 400,
+              x: 0,
+              y: 0,
+              toJSON: () => ({}),
+            });
+          }}
+        >
+          <button
+            type="button"
+            onPointerDown={(event) => onBeginTabDrag("tab-b", event)}
+          >
+            Drag B
+          </button>
+        </aside>
+      ),
+    });
+
+    const tab = screen.getByRole("button", { name: "Drag B" });
+    fireEvent.pointerDown(tab, {
+      button: 0,
+      clientX: 200,
+      clientY: 20,
+      pointerId: 1,
+    });
+    fireEvent.pointerMove(window, {
+      clientX: 200,
+      clientY: 40,
+      pointerId: 1,
+    });
+    fireEvent.pointerUp(window, {
+      clientX: 200,
+      clientY: 40,
+      pointerId: 1,
+    });
+    expect(document.querySelectorAll("[data-split-pane-id]")).toHaveLength(0);
+
+    fireEvent.pointerDown(tab, {
+      button: 0,
+      clientX: 200,
+      clientY: 300,
+      pointerId: 2,
+    });
+    fireEvent.pointerMove(window, {
+      clientX: 200,
+      clientY: 560,
+      pointerId: 2,
+    });
+    fireEvent.pointerUp(window, {
+      clientX: 200,
+      clientY: 560,
+      pointerId: 2,
+    });
+    expect(document.querySelectorAll("[data-split-pane-id]")).toHaveLength(0);
+
+    fireEvent.pointerDown(tab, {
+      button: 0,
+      clientX: 200,
+      clientY: 300,
+      pointerId: 3,
+    });
+    fireEvent.pointerMove(window, {
+      clientX: 20,
+      clientY: 300,
+      pointerId: 3,
+    });
+    fireEvent.pointerUp(window, {
+      clientX: 20,
+      clientY: 300,
+      pointerId: 3,
+    });
+    expect(document.querySelectorAll("[data-split-pane-id]")).toHaveLength(2);
+  });
+
   it("positions the focused active tab even when the control is in the outer pane", () => {
     const split = createTwoPaneState();
     const firstPane =
@@ -280,24 +354,22 @@ describe("SidebarSplitContainer", () => {
           {showOuterControls ? (
             <button
               type="button"
-              onClick={() => onMoveActiveTabToSide?.("bottom")}
+              onClick={() => onMoveActiveTabToSide?.("left")}
             >
-              Move focused bottom
+              Move focused left
             </button>
           ) : null}
         </div>
       ),
     });
 
-    fireEvent.click(
-      screen.getByRole("button", { name: "Move focused bottom" }),
-    );
+    fireEvent.click(screen.getByRole("button", { name: "Move focused left" }));
     expect(
       screen
         .getAllByTestId("active-pane-tab")
         .map((tab) => tab.textContent)
         .join(","),
-    ).toBe("tab-b,tab-a");
+    ).toBe("tab-a,tab-b");
   });
 
   it("keeps stateful pane content attached to pane identity after a move", () => {
@@ -371,14 +443,21 @@ describe("SidebarSplitContainer", () => {
     );
     expect(headerSeparator).toBeInstanceOf(HTMLElement);
     expect(bodySeparator).toBeInstanceOf(HTMLElement);
+    const headerBodyDivider = document.querySelector<HTMLElement>(
+      "[data-sidebar-split-header-divider]",
+    );
+    expect(headerBodyDivider).toBeInstanceOf(HTMLElement);
+    expect(headerBodyDivider?.className).toContain("h-px");
+    expect(headerBodyDivider?.className).toContain(
+      "bg-border-seam-vertical/40",
+    );
     if (
       !(headerSeparator instanceof HTMLElement) ||
       !(bodySeparator instanceof HTMLElement)
     ) {
       return;
     }
-    expect(headerSeparator.className).toContain("bg-border-seam-vertical/60");
-    expect(bodySeparator.className).toContain("bg-transparent");
+    expect(bodySeparator.className).not.toContain("bg-transparent");
 
     const headerPrevious = headerSeparator.previousElementSibling;
     const headerNext = headerSeparator.nextElementSibling;
@@ -422,6 +501,21 @@ describe("SidebarSplitContainer", () => {
     });
 
     fireEvent.pointerDown(bodyHitTarget, { clientX: 400, pointerId: 1 });
+    expect(bodySeparator.dataset.dragging).toBe("true");
+    expect(headerSeparator.dataset.dragging).toBe("true");
+    expect(headerSeparator.className).not.toContain("bg-transparent");
+    expect(headerSeparator.className).toContain("bg-border-seam-vertical/40");
+    expect(headerSeparator.className).toContain(
+      "hover:bg-border-seam-vertical/50",
+    );
+    expect(headerSeparator.className).toContain("data-[dragging]:bg-ring/40");
+    expect(bodySeparator.className).toContain("bg-border-seam-vertical/40");
+    expect(bodySeparator.className).toContain(
+      "hover:bg-border-seam-vertical/50",
+    );
+    expect(headerSeparator.className).toBe(bodySeparator.className);
+    expect(headerSeparator.className).not.toContain("hover:bg-ring/40");
+    expect(bodySeparator.className).not.toContain("hover:bg-ring/40");
     fireEvent.pointerMove(bodyHitTarget, { clientX: 600, pointerId: 1 });
 
     expect(headerPrevious.style.flex).toBe(bodyPrevious.style.flex);
@@ -445,6 +539,8 @@ describe("SidebarSplitContainer", () => {
     fireEvent.pointerUp(bodyHitTarget, { clientX: 600, pointerId: 1 });
     expect(headerPrevious.style.flex).toBe(bodyPrevious.style.flex);
     expect(headerNext.style.flex).toBe(bodyNext.style.flex);
+    expect(bodySeparator.dataset.dragging).toBeUndefined();
+    expect(headerSeparator.dataset.dragging).toBeUndefined();
   });
 
   it("resizes the adjacent panes from the shared-header separator", () => {
@@ -622,101 +718,15 @@ describe("SidebarSplitContainer", () => {
     expect(headerSeparator.dataset.dragging).toBeUndefined();
   });
 
-  it("resizes stacked panes from their shared-header separator and restores cancellation", () => {
-    persistState(createStackedPaneState());
-    renderContainer({
-      renderPane: ({ paneId }) => <div>{paneId}</div>,
-      renderSplitHeader: ({ renderTabGroups }) => (
-        <div>{renderTabGroups(({ paneId }) => <div>{paneId}</div>)}</div>
-      ),
-    });
-
-    const headerSeparator = screen
-      .getAllByRole("separator")
-      .find(
-        (separator) =>
-          separator.parentElement?.dataset.sidebarSplitSurface === "header",
-      );
-    expect(headerSeparator).toBeInstanceOf(HTMLElement);
-    expect(headerSeparator?.className).toContain(
-      "bg-border-seam-vertical/60",
-    );
-    const bodySeparator = screen.getByRole("separator", {
-      name: "Resize stacked right panel panes",
-    });
-    const hitTarget = headerSeparator?.firstElementChild;
-    const headerPrevious = headerSeparator?.previousElementSibling;
-    const headerNext = headerSeparator?.nextElementSibling;
-    const bodyPrevious = bodySeparator.previousElementSibling;
-    const bodyNext = bodySeparator.nextElementSibling;
-    if (
-      !(headerSeparator instanceof HTMLElement) ||
-      !(hitTarget instanceof HTMLElement) ||
-      !(headerPrevious instanceof HTMLElement) ||
-      !(headerNext instanceof HTMLElement) ||
-      !(bodyPrevious instanceof HTMLElement) ||
-      !(bodyNext instanceof HTMLElement)
-    ) {
-      throw new Error("Expected stacked header and body resize elements");
-    }
-    Object.defineProperty(hitTarget, "setPointerCapture", {
-      configurable: true,
-      value: vi.fn(),
-    });
-    vi.spyOn(headerPrevious, "getBoundingClientRect").mockReturnValue({
-      bottom: 48,
-      height: 48,
-      left: 0,
-      right: 400,
-      top: 0,
-      width: 400,
-      x: 0,
-      y: 0,
-      toJSON: () => ({}),
-    });
-    vi.spyOn(headerNext, "getBoundingClientRect").mockReturnValue({
-      bottom: 48,
-      height: 48,
-      left: 401,
-      right: 801,
-      top: 0,
-      width: 400,
-      x: 401,
-      y: 0,
-      toJSON: () => ({}),
-    });
-
-    fireEvent.pointerDown(hitTarget, { clientX: 400, pointerId: 3 });
-    fireEvent.pointerMove(hitTarget, { clientX: 520, pointerId: 3 });
-    expect(headerPrevious.style.flex).toBe(bodyPrevious.style.flex);
-    expect(headerNext.style.flex).toBe(bodyNext.style.flex);
-    expect(Number.parseFloat(headerPrevious.style.flex)).toBeCloseTo(0.649, 3);
-
-    fireEvent.pointerUp(hitTarget, { clientX: 600, pointerId: 3 });
-    expect(headerPrevious.style.flex).toBe(bodyPrevious.style.flex);
-    expect(headerNext.style.flex).toBe(bodyNext.style.flex);
-    expect(Number.parseFloat(bodyPrevious.style.flex)).toBeCloseTo(0.749, 3);
-    expect(Number.parseFloat(bodyNext.style.flex)).toBeCloseTo(0.251, 3);
-
-    const committedPreviousFlex = headerPrevious.style.flex;
-    const committedNextFlex = headerNext.style.flex;
-    fireEvent.pointerDown(hitTarget, { clientX: 600, pointerId: 4 });
-    fireEvent.pointerMove(hitTarget, { clientX: 320, pointerId: 4 });
-    expect(headerPrevious.style.flex).not.toBe(committedPreviousFlex);
-    expect(bodyPrevious.style.flex).toBe(headerPrevious.style.flex);
-    fireEvent.pointerCancel(hitTarget, { clientX: 320, pointerId: 4 });
-    expect(headerPrevious.style.flex).toBe(committedPreviousFlex);
-    expect(headerNext.style.flex).toBe(committedNextFlex);
-    expect(bodyPrevious.style.flex).toBe(committedPreviousFlex);
-    expect(bodyNext.style.flex).toBe(committedNextFlex);
-  });
-
   it("restores both adjacent flex values after pointer cancellation", () => {
     persistState(createTwoPaneState());
     renderContainer({
       renderPane: ({ paneId }) => <div>{paneId}</div>,
     });
 
+    expect(
+      document.querySelector("[data-sidebar-split-header-divider]"),
+    ).toBeNull();
     const separator = screen.getByRole("separator");
     expect(separator.className).toContain("bg-transparent");
     expect(separator.className).not.toContain("bg-border-seam");
@@ -752,6 +762,78 @@ describe("SidebarSplitContainer", () => {
     expect(previous.style.flex).toBe(previousFlex);
     expect(next.style.flex).toBe(nextFlex);
     expect(document.body.style.userSelect).toBe("");
+
+    fireEvent.pointerDown(hitTarget, { clientX: 400, pointerId: 2 });
+    fireEvent.pointerMove(hitTarget, { clientX: 520, pointerId: 2 });
+    fireEvent.blur(window);
+    expect(previous.style.flex).toBe(previousFlex);
+    expect(next.style.flex).toBe(nextFlex);
+    expect(document.body.style.userSelect).toBe("");
+
+    fireEvent.pointerDown(hitTarget, { clientX: 400, pointerId: 3 });
+    fireEvent.pointerMove(hitTarget, { clientX: 520, pointerId: 3 });
+    fireEvent.lostPointerCapture(hitTarget, { pointerId: 3 });
+    expect(previous.style.flex).toBe(previousFlex);
+    expect(next.style.flex).toBe(nextFlex);
+    expect(document.body.style.userSelect).toBe("");
+  });
+
+  it("cancels an active resize when the split container unmounts", () => {
+    persistState(createTwoPaneState());
+    const storageKey = sidebarSplitStorageKey(PANEL_STATE_ID);
+    const initialStorage = window.localStorage.getItem(storageKey);
+    const view = renderContainer({
+      renderPane: ({ paneId }) => <div>{paneId}</div>,
+    });
+    const separator = screen.getByRole("separator");
+    const hitTarget = separator.firstElementChild;
+    const previous = separator.previousElementSibling;
+    const next = separator.nextElementSibling;
+    if (
+      !(hitTarget instanceof HTMLElement) ||
+      !(previous instanceof HTMLElement) ||
+      !(next instanceof HTMLElement)
+    ) {
+      throw new Error("Expected resize elements");
+    }
+    Object.defineProperty(hitTarget, "setPointerCapture", {
+      configurable: true,
+      value: vi.fn(),
+    });
+    vi.spyOn(previous, "getBoundingClientRect").mockReturnValue({
+      bottom: 600,
+      height: 600,
+      left: 0,
+      right: 400,
+      top: 0,
+      width: 400,
+      x: 0,
+      y: 0,
+      toJSON: () => ({}),
+    });
+    vi.spyOn(next, "getBoundingClientRect").mockReturnValue({
+      bottom: 600,
+      height: 600,
+      left: 401,
+      right: 801,
+      top: 0,
+      width: 400,
+      x: 401,
+      y: 0,
+      toJSON: () => ({}),
+    });
+    const initialFlex = [previous.style.flex, next.style.flex];
+
+    fireEvent.pointerDown(hitTarget, { clientX: 400, pointerId: 41 });
+    fireEvent.pointerMove(hitTarget, { clientX: 560, pointerId: 41 });
+    expect(document.body.style.userSelect).toBe("none");
+    expect(previous.style.flex).not.toBe(initialFlex[0]);
+
+    view.unmount();
+
+    expect(document.body.style.userSelect).toBe("");
+    expect([previous.style.flex, next.style.flex]).toEqual(initialFlex);
+    expect(window.localStorage.getItem(storageKey)).toBe(initialStorage);
   });
 
   it("does not write a canonical layout or rewrite a focused-pane no-op", () => {
diff --git a/apps/app/src/components/secondary-panel/SidebarSplitContainer.tsx b/apps/app/src/components/secondary-panel/SidebarSplitContainer.tsx
index 4c39b3c9de..fb560dedb8 100644
--- a/apps/app/src/components/secondary-panel/SidebarSplitContainer.tsx
+++ b/apps/app/src/components/secondary-panel/SidebarSplitContainer.tsx
@@ -50,6 +50,9 @@ import {
 import type { SecondaryPanelTabReorderRequest } from "./secondaryPanelFileTab";
 
 const PANE_DRAG_ENGAGE_DISTANCE_PX = 7;
+const TAB_SPLIT_DIVIDER_CLASS =
+  "bg-border-seam-vertical/40 hover:bg-border-seam-vertical/50 data-[dragging]:bg-ring/40";
+type SidebarTabSplitSide = Extract<SplitSide, "left" | "right">;
 
 export interface SidebarSplitTabDescriptor {
   id: string;
@@ -68,10 +71,11 @@ export interface SidebarSplitPaneRenderArgs {
   ) => void;
   onReorderTab: (request: SecondaryPanelTabReorderRequest) => void;
   onFocusPane: () => void;
-  onMoveActiveTabToSide?: (side: SplitSide) => void;
+  onMoveActiveTabToSide?: (side: SidebarTabSplitSide) => void;
   onSelectTab: (tabId: string) => void;
   paneId: string;
   showOuterControls: boolean;
+  visibleActiveTabIds: readonly string[];
 }
 
 export interface SidebarSplitHeaderRenderArgs {
@@ -85,6 +89,7 @@ interface SidebarSplitContainerProps {
   activeTabId: string;
   onActivateTab: (tabId: string) => void;
   onGlobalTabReorder: (request: SecondaryPanelTabReorderRequest) => void;
+  onVisibleActiveTabIdsChange?: (tabIds: readonly string[]) => void;
   panelStateId: string;
   renderPane: (args: SidebarSplitPaneRenderArgs) => ReactNode;
   renderSplitHeader?: (args: SidebarSplitHeaderRenderArgs) => ReactNode;
@@ -95,6 +100,7 @@ export function SidebarSplitContainer({
   activeTabId,
   onActivateTab,
   onGlobalTabReorder,
+  onVisibleActiveTabIdsChange,
   panelStateId,
   renderPane,
   renderSplitHeader,
@@ -125,11 +131,23 @@ export function SidebarSplitContainer({
   const dimsInactiveSplits = useAtomValue(dimInactiveSplitsAtom);
   const paneCount = countPanes(state.layout.root);
   const hasMultiplePanes = paneCount > 1;
+  const visibleActiveTabIds = useMemo(
+    () =>
+      listPanes(state.layout.root).flatMap((pane) => {
+        const group = getSidebarGroupForPane(state, pane.paneId);
+        return group === null ? [] : [group.activeTabId];
+      }),
+    [state],
+  );
 
   useEffect(() => {
     stateRef.current = state;
   }, [state]);
 
+  useEffect(() => {
+    onVisibleActiveTabIdsChange?.(visibleActiveTabIds);
+  }, [onVisibleActiveTabIdsChange, visibleActiveTabIds]);
+
   useEffect(() => {
     const shouldFollowExternalSelection =
       previousActiveTabId.current !== activeTabId;
@@ -231,7 +249,7 @@ export function SidebarSplitContainer({
   );
 
   const moveActiveTabToSide = useCallback(
-    (side: SplitSide) => {
+    (side: SidebarTabSplitSide) => {
       commitState((current) => {
         const paneId = current.layout.focusedPaneId;
         const sourceGroup = getSidebarGroupForPane(current, paneId);
@@ -259,10 +277,6 @@ export function SidebarSplitContainer({
                   return rect.x;
                 case "right":
                   return -(rect.x + rect.w);
-                case "top":
-                  return rect.y;
-                case "bottom":
-                  return -(rect.y + rect.h);
               }
             };
             return edge(a) - edge(b);
@@ -277,6 +291,7 @@ export function SidebarSplitContainer({
 
   const moveTab = useCallback(
     (sourcePaneId: string, tabId: string, target: SplitDropTarget) => {
+      if (target.zone === "top" || target.zone === "bottom") return;
       const groupId = nextSidebarSplitGroupId(stateRef.current);
       commitState(
         (current) =>
@@ -327,6 +342,7 @@ export function SidebarSplitContainer({
           );
         },
         decide: (targetPaneId, zone) => {
+          if (zone === "top" || zone === "bottom") return null;
           if (targetPaneId === sourcePaneId) {
             if (zone === "center" || (sourceGroup?.tabIds.length ?? 0) <= 1) {
               return null;
@@ -403,6 +419,7 @@ export function SidebarSplitContainer({
       onSelectTab: (tabId) => selectTab(firstPane.paneId, tabId),
       paneId: firstPane.paneId,
       showOuterControls: true,
+      visibleActiveTabIds,
     });
   }
 
@@ -427,6 +444,7 @@ export function SidebarSplitContainer({
         onSelectTab: (tabId: string) => selectTab(pane.paneId, tabId),
         paneId: pane.paneId,
         showOuterControls: index === splitPanes.length - 1,
+        visibleActiveTabIds,
       },
     ];
   });
@@ -452,6 +470,13 @@ export function SidebarSplitContainer({
       data-sidebar-split-container=""
     >
       {splitHeader}
+      {splitHeader !== undefined ? (
+        <div
+          aria-hidden
+          className="h-px shrink-0 bg-border-seam-vertical/40"
+          data-sidebar-split-header-divider=""
+        />
+      ) : null}
       <div className="relative flex min-h-0 min-w-0 flex-1 overflow-hidden">
         <SidebarSplitTree
           node={state.layout.root}
@@ -463,6 +488,7 @@ export function SidebarSplitContainer({
           hasSharedHeader={splitHeader !== undefined}
           renderPane={renderPane}
           state={state}
+          visibleActiveTabIds={visibleActiveTabIds}
           onBeginTabDrag={beginTabDrag}
           onFocusPane={focusPane}
           onMoveActiveTabToSide={activeTabPositionHandler}
@@ -488,7 +514,7 @@ interface SidebarSplitTreeProps {
     event: ReactPointerEvent<HTMLElement>,
   ) => void;
   onFocusPane: (paneId: string) => void;
-  onMoveActiveTabToSide?: (side: SplitSide) => void;
+  onMoveActiveTabToSide?: (side: SidebarTabSplitSide) => void;
   onReorderTab: (
     paneId: string,
     request: SecondaryPanelTabReorderRequest,
@@ -498,6 +524,7 @@ interface SidebarSplitTreeProps {
   path: number[];
   renderPane: (args: SidebarSplitPaneRenderArgs) => ReactNode;
   state: SidebarSplitState;
+  visibleActiveTabIds: readonly string[];
 }
 
 interface SidebarSplitHeaderTreeProps {
@@ -578,7 +605,7 @@ function SidebarSplitTree(props: SidebarSplitTreeProps) {
         <Fragment key={sidebarSplitSubtreeKey(child)}>
           {index > 0 ? (
             <SidebarSplitDivider
-              appearance="pane"
+              appearance={props.hasSharedHeader ? "tab" : "pane"}
               childIndex={index - 1}
               dir={node.dir}
               hidden={false}
@@ -659,6 +686,7 @@ function SidebarSplitLeaf(
             onSelectTab: (tabId) => props.onSelectTab(pane.paneId, tabId),
             paneId: pane.paneId,
             showOuterControls: reserveOuterControl,
+            visibleActiveTabIds: props.visibleActiveTabIds,
           })}
         </section>
         <div
@@ -694,9 +722,17 @@ function SidebarSplitDivider({
   surface: "body" | "header";
 }) {
   const horizontal = dir === "row";
+  const activeResizeTeardownRef = useRef<(() => void) | null>(null);
+  useEffect(
+    () => () => {
+      activeResizeTeardownRef.current?.();
+    },
+    [],
+  );
   const handlePointerDown = useCallback(
     (event: ReactPointerEvent<HTMLDivElement>) => {
       event.preventDefault();
+      activeResizeTeardownRef.current?.();
       const hitTarget = event.currentTarget;
       const divider = hitTarget.parentElement;
       const previous = divider?.previousElementSibling;
@@ -716,24 +752,32 @@ function SidebarSplitDivider({
       const pointerDownPosition = horizontal ? event.clientX : event.clientY;
       const span = end - start;
       if (span <= 0) return;
+      const peer = findSidebarSplitPeer({
+        childIndex,
+        divider,
+        path,
+        surface,
+      });
       const pairs = [
         createSidebarSplitResizePair(previous, next),
-        findSidebarSplitPeerPair({
-          childIndex,
-          divider,
-          path,
-          surface,
-        }),
-      ].filter((pair): pair is SidebarSplitResizePair => pair !== null);
+        peer?.pair,
+      ].filter((pair): pair is SidebarSplitResizePair => pair !== undefined);
+      const dividers = [divider, peer?.divider].filter(
+        (candidate): candidate is HTMLElement => candidate !== undefined,
+      );
       hitTarget.setPointerCapture(pointerId);
-      divider.dataset.dragging = "true";
+      for (const activeDivider of dividers) {
+        activeDivider.dataset.dragging = "true";
+      }
       applyResizeCursor(horizontal ? "horizontal" : "vertical");
       document.body.style.userSelect = "none";
       let pendingFraction: number | null = null;
       let receivedPointerMove = false;
       let finished = false;
       const applyPointerPosition = (pointerEvent: PointerEvent) => {
-        const pointer = horizontal ? pointerEvent.clientX : pointerEvent.clientY;
+        const pointer = horizontal
+          ? pointerEvent.clientX
+          : pointerEvent.clientY;
         const fraction = clampSplitPairFraction((pointer - start) / span);
         pendingFraction = fraction;
         for (const pair of pairs) {
@@ -749,10 +793,15 @@ function SidebarSplitDivider({
       const finish = (commit: boolean) => {
         if (finished) return;
         finished = true;
-        delete divider.dataset.dragging;
+        for (const activeDivider of dividers) {
+          delete activeDivider.dataset.dragging;
+        }
         hitTarget.removeEventListener("pointermove", move);
         hitTarget.removeEventListener("pointerup", onUp);
         hitTarget.removeEventListener("pointercancel", cancel);
+        hitTarget.removeEventListener("lostpointercapture", cancel);
+        window.removeEventListener("blur", cancelOnBlur);
+        activeResizeTeardownRef.current = null;
         clearResizeCursor();
         document.body.style.userSelect = "";
         if (commit && pendingFraction !== null) {
@@ -780,9 +829,13 @@ function SidebarSplitDivider({
         if (cancelEvent.pointerId !== pointerId) return;
         finish(false);
       };
+      const cancelOnBlur = () => finish(false);
       hitTarget.addEventListener("pointermove", move);
       hitTarget.addEventListener("pointerup", onUp);
       hitTarget.addEventListener("pointercancel", cancel);
+      hitTarget.addEventListener("lostpointercapture", cancel);
+      window.addEventListener("blur", cancelOnBlur);
+      activeResizeTeardownRef.current = () => finish(false);
     },
     [childIndex, horizontal, onResize, path, surface],
   );
@@ -795,11 +848,12 @@ function SidebarSplitDivider({
           : "Resize stacked right panel panes"
       }
       aria-orientation={horizontal ? "vertical" : "horizontal"}
+      data-sidebar-split-divider-index={childIndex}
       className={cn(
-        "group relative z-[25] shrink-0 transition-colors hover:bg-ring/40 data-[dragging]:bg-ring/40",
+        "group relative z-[25] shrink-0 transition-colors",
         appearance === "tab"
-          ? ["bg-border-seam-vertical/60", MACOS_APP_REGION_NO_DRAG_CLASS]
-          : "bg-transparent",
+          ? [TAB_SPLIT_DIVIDER_CLASS, MACOS_APP_REGION_NO_DRAG_CLASS]
+          : "bg-transparent hover:bg-ring/40 data-[dragging]:bg-ring/40",
         hidden && "invisible pointer-events-none",
         horizontal ? "w-px cursor-col-resize" : "h-px cursor-row-resize",
       )}
@@ -826,6 +880,11 @@ interface SidebarSplitResizePair {
   total: number;
 }
 
+interface SidebarSplitResizePeer {
+  divider: HTMLElement;
+  pair: SidebarSplitResizePair;
+}
+
 function createSidebarSplitResizePair(
   previous: HTMLElement,
   next: HTMLElement,
@@ -848,7 +907,7 @@ function createSidebarSplitResizePair(
   };
 }
 
-function findSidebarSplitPeerPair({
+function findSidebarSplitPeer({
   childIndex,
   divider,
   path,
@@ -858,7 +917,7 @@ function findSidebarSplitPeerPair({
   divider: HTMLElement;
   path: SplitPath;
   surface: "body" | "header";
-}): SidebarSplitResizePair | null {
+}): SidebarSplitResizePeer | null {
   const container = divider.closest<HTMLElement>(
     "[data-sidebar-split-container]",
   );
@@ -884,9 +943,19 @@ function findSidebarSplitPeerPair({
   const next = children.find(
     (child) => child.dataset.sidebarSplitChildIndex === String(childIndex + 1),
   );
-  return previous === undefined || next === undefined
+  const peerDivider = Array.from(peerTrack.children).find(
+    (child): child is HTMLElement =>
+      child instanceof HTMLElement &&
+      child.dataset.sidebarSplitDividerIndex === String(childIndex),
+  );
+  return previous === undefined ||
+    next === undefined ||
+    peerDivider === undefined
     ? null
-    : createSidebarSplitResizePair(previous, next);
+    : {
+        divider: peerDivider,
+        pair: createSidebarSplitResizePair(previous, next),
+      };
 }
 
 function nextSidebarSplitGroupId(state: SidebarSplitState): string {
diff --git a/apps/app/src/components/secondary-panel/ThreadSecondaryPanel.collapseControl.test.tsx b/apps/app/src/components/secondary-panel/ThreadSecondaryPanel.collapseControl.test.tsx
index 45ba95d670..73edadc949 100644
--- a/apps/app/src/components/secondary-panel/ThreadSecondaryPanel.collapseControl.test.tsx
+++ b/apps/app/src/components/secondary-panel/ThreadSecondaryPanel.collapseControl.test.tsx
@@ -17,7 +17,10 @@ import {
   sidebarSplitStorageKey,
 } from "./sidebarSplitLayout";
 import { createQueryClientTestHarness } from "@/test/queryClientTestHarness";
-import { ThreadSecondaryPanel } from "./ThreadSecondaryPanel";
+import {
+  isGitDiffDataActive,
+  ThreadSecondaryPanel,
+} from "./ThreadSecondaryPanel";
 
 afterEach(() => {
   cleanup();
@@ -197,12 +200,34 @@ describe("ThreadSecondaryPanel compact file content", () => {
     expect(restoredTabGroups).toHaveLength(2);
     expect(restoredTabGroups[0]?.textContent).toContain("Info");
     expect(restoredTabGroups[1]?.textContent).toContain("index.ts");
-    expect(renderSplitTabContent).toHaveBeenCalledWith(activeTab);
+    expect(renderSplitTabContent).toHaveBeenCalledWith(
+      activeTab,
+      expect.objectContaining({
+        visibleActiveTabIds: expect.arrayContaining([activeTab.id]),
+      }),
+    );
     expect(window.localStorage.getItem(storageKey)).toBe(storedSplit);
   });
 });
 
 describe("ThreadSecondaryPanel Diff eligibility", () => {
+  it("keeps Diff data active while a visible split Diff pane is unfocused", () => {
+    expect(
+      isGitDiffDataActive({
+        isDiffPanelActive: false,
+        sidebarSplitsEnabled: true,
+        visibleSplitActiveTabIds: [createGitDiffFixedPanelTab().id, "file-a"],
+      }),
+    ).toBe(true);
+    expect(
+      isGitDiffDataActive({
+        isDiffPanelActive: false,
+        sidebarSplitsEnabled: true,
+        visibleSplitActiveTabIds: ["file-a"],
+      }),
+    ).toBe(false);
+  });
+
   it("falls back from an ineligible active Diff tab to Info", () => {
     const { wrapper: Wrapper } = createQueryClientTestHarness();
     render(
@@ -322,7 +347,7 @@ describe("ThreadSecondaryPanel full-screen control", () => {
     expect(onToggleConversationCollapse).toHaveBeenCalledTimes(1);
   });
 
-  it("offers every existing split position from the right-panel control and moves the active tab", () => {
+  it("offers only horizontal split positions from the right-panel control and moves the active tab", () => {
     const { wrapper: Wrapper } = createQueryClientTestHarness();
     const onOpenNewTab = vi.fn();
     const fileTab = createWorkspaceFilePreviewFixedPanelTab({
@@ -376,16 +401,26 @@ describe("ThreadSecondaryPanel full-screen control", () => {
       </Wrapper>,
     );
 
+    const unsplitActiveSurface = screen.getByRole("button", {
+      name: "index.ts",
+    }).parentElement;
+    expect(unsplitActiveSurface?.className).toContain("bg-state-active");
+    expect(unsplitActiveSurface?.className).not.toContain(
+      "before:bg-state-active",
+    );
+
     const control = screen.getByRole("button", { name: "Full Screen" });
     fireEvent.focus(control);
     expect(
       screen.getByRole("menu", { name: "Pane arrangement" }),
     ).not.toBeNull();
-    for (const side of ["left", "right", "top", "bottom"] as const) {
+    for (const side of ["left", "right"] as const) {
       expect(
         screen.getByRole("menuitem", { name: `Move ${side}` }),
       ).not.toBeNull();
     }
+    expect(screen.queryByRole("menuitem", { name: "Move top" })).toBeNull();
+    expect(screen.queryByRole("menuitem", { name: "Move bottom" })).toBeNull();
 
     fireEvent.click(screen.getByRole("menuitem", { name: "Move right" }));
     const panes = Array.from(
@@ -396,6 +431,12 @@ describe("ThreadSecondaryPanel full-screen control", () => {
       document.querySelectorAll<HTMLElement>("[data-sidebar-split-tab-group]"),
     );
     expect(tabGroups).toHaveLength(2);
+    expect(tabGroups.every((group) => group.classList.contains("w-full"))).toBe(
+      true,
+    );
+    expect(
+      tabGroups.every((group) => !group.classList.contains("flex-1")),
+    ).toBe(true);
     expect(tabGroups[0]?.textContent).toContain("Info");
     expect(tabGroups[1]?.textContent).toContain("index.ts");
     expect(
@@ -403,6 +444,31 @@ describe("ThreadSecondaryPanel full-screen control", () => {
         '[data-testid="thread-secondary-panel-top-chrome"]',
       ),
     ).toHaveLength(1);
+    const infoTab = screen.getByRole("button", {
+      name: "Show thread info panel",
+    });
+    const fileTabButton = screen.getByRole("button", { name: "index.ts" });
+    expect(infoTab.parentElement?.className).not.toContain(
+      "before:bg-state-active",
+    );
+    expect(infoTab.parentElement?.className).toContain(
+      "text-muted-foreground/60",
+    );
+    expect(fileTabButton.parentElement?.className).toContain("bg-state-active");
+    expect(fileTabButton.parentElement?.className).not.toContain(
+      "before:bg-state-active",
+    );
+    fireEvent.pointerDown(infoTab);
+    expect(infoTab.parentElement?.className).toContain("bg-state-active");
+    expect(infoTab.parentElement?.className).not.toContain(
+      "before:bg-state-active",
+    );
+    expect(fileTabButton.parentElement?.className).not.toContain(
+      "bg-state-active",
+    );
+    expect(fileTabButton.parentElement?.className).toContain(
+      "text-muted-foreground/60",
+    );
     expect(
       panes.some((pane) =>
         pane.querySelector('[data-testid="thread-secondary-panel-top-chrome"]'),
@@ -413,6 +479,21 @@ describe("ThreadSecondaryPanel full-screen control", () => {
       name: "Open new tab",
     });
     expect(newTabControls).toHaveLength(1);
+    const fullScreenControl = screen.getByRole("button", {
+      name: "Full Screen",
+    });
+    const hideControl = screen.getByRole("button", {
+      name: "Hide right panel",
+    });
+    expect(
+      (newTabControls[0] as HTMLElement).compareDocumentPosition(
+        fullScreenControl,
+      ) & Node.DOCUMENT_POSITION_FOLLOWING,
+    ).not.toBe(0);
+    expect(
+      fullScreenControl.compareDocumentPosition(hideControl) &
+        Node.DOCUMENT_POSITION_FOLLOWING,
+    ).not.toBe(0);
     fireEvent.click(newTabControls[0] as HTMLElement);
     expect(onOpenNewTab).toHaveBeenCalledTimes(1);
   });
diff --git a/apps/app/src/components/secondary-panel/ThreadSecondaryPanel.stories.tsx b/apps/app/src/components/secondary-panel/ThreadSecondaryPanel.stories.tsx
index 9cf2b1b51c..12b6f919ea 100644
--- a/apps/app/src/components/secondary-panel/ThreadSecondaryPanel.stories.tsx
+++ b/apps/app/src/components/secondary-panel/ThreadSecondaryPanel.stories.tsx
@@ -73,15 +73,19 @@ function createStoryFileTab(filename: string): HostFilePreviewFixedPanelTab {
 function PanelStage({
   children,
   height = "compact",
+  width = "standard",
 }: {
   children: ReactNode;
   height?: "compact" | "info";
+  width?: "standard" | "wide";
 }) {
   return (
     <div
-      className={`flex w-full max-w-[640px] min-w-0 flex-col overflow-hidden rounded-md border border-border bg-background ${
-        height === "info" ? "h-[520px]" : "h-[160px]"
-      }`}
+      className={`flex w-full min-w-0 flex-col overflow-hidden rounded-md border border-border bg-background ${
+        width === "wide"
+          ? "max-w-[900px] [--secondary-swipe-width:100%] [&_aside]:!w-full"
+          : "max-w-[640px]"
+      } ${height === "info" ? "h-[520px]" : "h-[160px]"}`}
     >
       <PanelGroup direction="horizontal">{children}</PanelGroup>
     </div>
@@ -485,6 +489,8 @@ function TerminalTabsShellRow(props: TerminalTabsShellRowProps) {
 }
 
 const SPLIT_STORY_PANEL_STATE_ID = "ladle-production-split-panes";
+const MINIMAL_CHROME_PROPOSAL_PANEL_STATE_ID =
+  "ladle-minimal-chrome-split-tabs";
 const SPLIT_STORY_FILE = createStoryFileTab("ThreadSecondaryPanel.tsx");
 const SPLIT_STORY_TERMINAL = createTerminalFixedPanelTab({
   terminalId: "term_story_running",
@@ -520,6 +526,20 @@ function createSplitStoryState() {
   );
 }
 
+function createMinimalChromeProposalState() {
+  const state = createSidebarSplitState(
+    SPLIT_STORY_TABS.map((tab) => tab.id),
+    SPLIT_STORY_FILE.id,
+  );
+  return moveSidebarTab(
+    state,
+    "pane-primary",
+    SPLIT_STORY_TERMINAL.id,
+    { paneId: "pane-primary", zone: "right" },
+    { groupId: "group-terminal" },
+  );
+}
+
 function ProductionSplitPanesStory() {
   const [activeTab, setActiveTab] = useState<SecondaryFixedPanelTab>(() => {
     window.localStorage.setItem(
@@ -600,6 +620,88 @@ function ProductionSplitPanesStory() {
   );
 }
 
+function MinimalChromeProposalStory() {
+  const [activeTab, setActiveTab] = useState<SecondaryFixedPanelTab>(() => {
+    window.localStorage.setItem(
+      sidebarSplitStorageKey(MINIMAL_CHROME_PROPOSAL_PANEL_STATE_ID),
+      serializeSidebarSplitState(createMinimalChromeProposalState()),
+    );
+    return SPLIT_STORY_TERMINAL;
+  });
+  const [isFullScreen, setIsFullScreen] = useState(false);
+
+  const fileTabs = useMemo<SecondaryPanelFileTab[]>(
+    () =>
+      [SPLIT_STORY_FILE, SPLIT_STORY_TERMINAL].map((tab) => ({
+        id: tab.id,
+        filename:
+          tab.kind === "terminal" ? "pnpm dev" : "ThreadSecondaryPanel.tsx",
+        isActive: tab.id === activeTab.id,
+        leadingVisual: (
+          <Icon
+            name={tab.kind === "terminal" ? "Terminal" : "Code"}
+            className="size-3.5"
+            aria-hidden
+          />
+        ),
+        statusLabel: null,
+        onSelect: () => setActiveTab(tab),
+        onClose: noop,
+      })),
+    [activeTab.id],
+  );
+
+  return (
+    <TooltipProvider>
+      <SidebarProvider>
+        <PanelStage height="info" width="wide">
+          <ThreadSecondaryPanel
+            activeTab={activeTab}
+            canUseGitUi
+            requestedMergeBaseBranch="main"
+            environmentId={undefined}
+            isOpen
+            metadataContent={<RepresentativeInfoContent />}
+            fileTabs={fileTabs}
+            fileTabContent={
+              activeTab.kind === "terminal" ? (
+                <RepresentativeTerminalContent title="pnpm dev" />
+              ) : (
+                representativeFileContent
+              )
+            }
+            splitPanelStateId={MINIMAL_CHROME_PROPOSAL_PANEL_STATE_ID}
+            splitTabModels={SPLIT_STORY_FILE_TABS}
+            renderSplitTabContent={(tab) =>
+              tab.kind === "terminal" ? (
+                <RepresentativeTerminalContent title="pnpm dev" />
+              ) : (
+                representativeFileContent
+              )
+            }
+            splitTabContentFillsRegion={(tab) => tab.kind === "terminal"}
+            showGitDiffTab
+            onPanelFocus={noop}
+            onPanelChange={(panel) =>
+              setActiveTab(createStoryFixedPanelTab(panel))
+            }
+            onCollapse={noop}
+            onClose={noop}
+            onFileTabReorder={noop}
+            onOpenNewTab={noop}
+            isConversationCollapsed={isFullScreen}
+            onToggleConversationCollapse={() =>
+              setIsFullScreen((value) => !value)
+            }
+            renderAsDrawer={false}
+            inlinePanelToggle="button"
+          />
+        </PanelStage>
+      </SidebarProvider>
+    </TooltipProvider>
+  );
+}
+
 export function SplitPanes() {
   return (
     <StoryCard>
@@ -613,6 +715,19 @@ export function SplitPanes() {
   );
 }
 
+export function MinimalChromeProposal() {
+  return (
+    <StoryCard>
+      <StoryRow
+        label="minimal chrome proposal"
+        hint="existing tabs share one header; arrangement targets the focused tab; panel collapse remains the far-right global action"
+      >
+        <MinimalChromeProposalStory />
+      </StoryRow>
+    </StoryCard>
+  );
+}
+
 export function Overview() {
   return (
     <StoryCard>
diff --git a/apps/app/src/components/secondary-panel/ThreadSecondaryPanel.tsx b/apps/app/src/components/secondary-panel/ThreadSecondaryPanel.tsx
index 18e43d8ce3..50f6fdec33 100644
--- a/apps/app/src/components/secondary-panel/ThreadSecondaryPanel.tsx
+++ b/apps/app/src/components/secondary-panel/ThreadSecondaryPanel.tsx
@@ -95,10 +95,11 @@ import { type ThreadSecondaryPanel as ThreadSecondaryPanelTab } from "@/lib/thre
 import { useAppCommandShortcut } from "@/components/commands/AppCommandProvider";
 import { AppCommandShortcutHint } from "@/components/commands/AppCommandShortcutHint";
 import type { AppShortcutPresentation } from "@/lib/app-keybindings";
-import { TabPill } from "@/components/ui/tab-pill";
+import { TabPill, type TabPillActiveTreatment } from "@/components/ui/tab-pill";
+import { CONTEXT_INACTIVE_TEXT_CLASS } from "@/components/ui/context-selection";
+import { dimInactiveSplitsAtom } from "@/lib/split-layout/atoms";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@bb/shared-ui/tooltip";
 import { dispatchBrowserViewBoundsSync } from "@/lib/browser-view-bounds-sync";
-import type { SplitSide } from "@/lib/split-layout";
 import { PaneArrangementButton } from "@/views/thread-detail/PaneMaximizeButton";
 import {
   SidebarSplitContainer,
@@ -117,6 +118,7 @@ export type {
 } from "./GitDiffToolbar";
 export type { SecondaryPanelFileTab } from "./secondaryPanelFileTab";
 
+const SIDEBAR_TAB_SPLIT_SIDES = ["left", "right"] as const;
 export function isSecondaryPanelLayoutTransition(
   propertyName: string,
 ): boolean {
@@ -230,6 +232,22 @@ export function resolveSecondaryPanelHideControl() {
   };
 }
 
+export function isGitDiffDataActive({
+  isDiffPanelActive,
+  sidebarSplitsEnabled,
+  visibleSplitActiveTabIds,
+}: {
+  isDiffPanelActive: boolean;
+  sidebarSplitsEnabled: boolean;
+  visibleSplitActiveTabIds: readonly string[];
+}): boolean {
+  return (
+    isDiffPanelActive ||
+    (sidebarSplitsEnabled &&
+      visibleSplitActiveTabIds.includes(SIDEBAR_FIXED_DIFF_TAB_ID))
+  );
+}
+
 export interface SecondaryPanelFixedTab {
   ariaLabel: string;
   label: string;
@@ -284,7 +302,11 @@ export interface ThreadSecondaryPanelProps {
   splitPanelStateId?: string;
   /** Rich tab models used to render pane-local content after a split. */
   splitTabModels?: readonly SecondaryFileFixedPanelTab[];
-  renderSplitTabContent?: (tab: SecondaryFileFixedPanelTab) => ReactNode;
+  renderSplitTabContent?: (
+    tab: SecondaryFileFixedPanelTab,
+    context: { visibleActiveTabIds?: readonly string[] },
+  ) => ReactNode;
+  onVisibleSplitActiveTabIdsChange?: (tabIds: readonly string[]) => void;
   splitTabContentFillsRegion?: (tab: SecondaryFileFixedPanelTab) => boolean;
   isOpen: boolean;
   showConversationCollapseControl?: boolean;
@@ -376,6 +398,7 @@ export function ThreadSecondaryPanel({
   splitPanelStateId,
   splitTabModels,
   renderSplitTabContent,
+  onVisibleSplitActiveTabIdsChange,
   splitTabContentFillsRegion,
   isOpen,
   showConversationCollapseControl = true,
@@ -403,6 +426,21 @@ export function ThreadSecondaryPanel({
   onToggleConversationCollapse,
   renderAsDrawer,
 }: ThreadSecondaryPanelProps) {
+  const shouldEnableSidebarSplits =
+    !renderAsDrawer &&
+    splitPanelStateId !== undefined &&
+    splitTabModels !== undefined &&
+    renderSplitTabContent !== undefined;
+  const [visibleSplitActiveTabIds, setVisibleSplitActiveTabIds] = useState<
+    readonly string[]
+  >([]);
+  const handleVisibleSplitActiveTabIdsChange = useCallback(
+    (tabIds: readonly string[]) => {
+      setVisibleSplitActiveTabIds(tabIds);
+      onVisibleSplitActiveTabIdsChange?.(tabIds);
+    },
+    [onVisibleSplitActiveTabIdsChange],
+  );
   const resolvedGitDiffTabStatus =
     gitDiffTabStatus ?? (canUseGitUi ? "eligible" : "ineligible");
   const newTabShortcut = useAppCommandShortcut("panel.newTab");
@@ -544,7 +582,13 @@ export function ThreadSecondaryPanel({
   const isDiffPanelActive =
     resolvedGitDiffTabStatus === "eligible" &&
     activeFixedTab?.tab.kind === "git-diff";
-  const isDiffPanelLive = isDiffPanelActive && isLayoutOpen;
+  const isAnyDiffPanelVisible =
+    isLayoutOpen &&
+    isGitDiffDataActive({
+      isDiffPanelActive,
+      sidebarSplitsEnabled: shouldEnableSidebarSplits,
+      visibleSplitActiveTabIds,
+    });
   const isDiffEligibilityPending =
     activeFixedTab?.tab.kind === "git-diff" &&
     (resolvedGitDiffTabStatus === "loading" ||
@@ -564,7 +608,7 @@ export function ThreadSecondaryPanel({
     onGitDiffSelectionChange,
   } = useGitDiffPanelState({
     environmentId,
-    isDiffPanelActive: isDiffPanelLive,
+    isDiffPanelActive: isAnyDiffPanelVisible,
     requestedMergeBaseBranch,
     onClearPendingGitDiffIntent,
     pendingGitDiffCommitSha,
@@ -578,7 +622,7 @@ export function ThreadSecondaryPanel({
   const { data: diffFilesResponse, isLoading: isDiffFilesLoading } =
     useEnvironmentDiffFiles(environmentId ?? "", {
       enabled:
-        isDiffPanelLive &&
+        isAnyDiffPanelVisible &&
         Boolean(environmentId) &&
         gitDiffTarget !== undefined,
       target: gitDiffTarget,
@@ -614,6 +658,7 @@ export function ThreadSecondaryPanel({
   const isSecondaryPanelResizing = useAtomValue(
     threadSecondaryPanelResizingAtom,
   );
+  const dimsInactiveSplits = useAtomValue(dimInactiveSplitsAtom);
   const [desktopInfo] = useState(getBbDesktopInfo);
   const [gitDiffLineOverflowMode, setGitDiffLineOverflowMode] =
     useState<CodeOverflowMode>(DEFAULT_CODE_OVERFLOW_MODE);
@@ -667,7 +712,7 @@ export function ThreadSecondaryPanel({
       event: ReactPointerEvent<HTMLElement>,
     ) => void;
     onSelectSurfaceTab?: (tabId: string) => void;
-    onMoveActiveTabToSide?: (side: SplitSide) => void;
+    onMoveActiveTabToSide?: SidebarSplitPaneRenderArgs["onMoveActiveTabToSide"];
     onSurfaceFileTabReorder: SecondaryPanelTabReorderHandler;
     showDiffSurfaceTab: boolean;
     showInfoSurfaceTab: boolean;
@@ -676,6 +721,8 @@ export function ThreadSecondaryPanel({
   }
 
   interface PanelTabGroupArgs {
+    activeClassName?: string;
+    activeTreatment?: TabPillActiveTreatment;
     activeSurfaceTab: SecondaryFixedPanelTab | null;
     fileSurfaceTabs: SecondaryPanelFileTab[] | undefined;
     onBeginTabDrag?: (
@@ -716,21 +763,32 @@ export function ThreadSecondaryPanel({
   );
 
   const renderConversationCollapseButton = (
-    onMoveActiveTabToSide?: (side: SplitSide) => void,
+    onMoveActiveTabToSide?: SidebarSplitPaneRenderArgs["onMoveActiveTabToSide"],
   ) =>
     conversationCollapseControl ? (
       <PaneArrangementButton
+        arrangementSides={SIDEBAR_TAB_SPLIT_SIDES}
         className={cn(
           "shrink-0",
           usesDesktopChrome && MACOS_WINDOW_NO_DRAG_CLASS,
         )}
         isFullScreen={conversationCollapseControl.isFullScreen}
-        onMoveToSide={onMoveActiveTabToSide}
+        onMoveToSide={
+          onMoveActiveTabToSide
+            ? (side) => {
+                if (side === "left" || side === "right") {
+                  onMoveActiveTabToSide(side);
+                }
+              }
+            : undefined
+        }
         onToggleFullScreen={conversationCollapseControl.onClick}
       />
     ) : null;
 
   const renderPanelTabGroup = ({
+    activeClassName,
+    activeTreatment = "fill",
     activeSurfaceTab,
     fileSurfaceTabs,
     onBeginTabDrag,
@@ -774,7 +832,8 @@ export function ThreadSecondaryPanel({
             }
             title="Thread info"
             usesDesktopChrome={usesDesktopChrome}
-            activeTreatment="fill"
+            activeClassName={activeClassName}
+            activeTreatment={activeTreatment}
           />
         ) : null}
         {showDiffSurfaceTab ? (
@@ -802,17 +861,19 @@ export function ThreadSecondaryPanel({
             }
             title="Diff"
             usesDesktopChrome={usesDesktopChrome}
-            activeTreatment="fill"
+            activeClassName={activeClassName}
+            activeTreatment={activeTreatment}
           />
         ) : null}
         {visibleSurfaceFileTabs && visibleSurfaceFileTabs.length > 0 ? (
           <SecondaryPanelTabStrip
+            activeClassName={activeClassName}
             fileTabs={visibleSurfaceFileTabs}
             onBeginTabDrag={onBeginTabDrag}
             onReorderTab={onSurfaceFileTabReorder}
             usesDesktopChrome={usesDesktopChrome}
             isPanelOpen={isOpen}
-            activeTreatment="fill"
+            activeTreatment={activeTreatment}
           />
         ) : null}
         {showGroupNewTabButton ? (
@@ -848,7 +909,9 @@ export function ThreadSecondaryPanel({
       activeSurfaceTab?.kind === "git-diff" ? "git-diff" : "thread-info";
     const isSurfaceDiffActive = activeSurfaceFixedPanel === "git-diff";
     const showsSurfaceDiffToolbar =
-      isSurfaceDiffActive && !hasActiveSurfaceFileTab;
+      isSurfaceDiffActive &&
+      resolvedGitDiffTabStatus === "eligible" &&
+      !hasActiveSurfaceFileTab;
     const isSurfaceTerminalActive =
       activeSurfaceTab?.kind === "terminal" && hasActiveSurfaceFileTab;
 
@@ -951,6 +1014,30 @@ export function ThreadSecondaryPanel({
                 </EmptyStatePanel>
               )}
             </div>
+          ) : isSurfaceDiffActive &&
+            (resolvedGitDiffTabStatus === "loading" ||
+              resolvedGitDiffTabStatus === "error") ? (
+            <EmptyStatePanel className="m-4 rounded-lg" role="status">
+              {resolvedGitDiffTabStatus === "error" ? (
+                <div className="flex flex-col items-center gap-3 text-center">
+                  <span>
+                    Could not determine whether this workspace uses Git.
+                  </span>
+                  {onRetryGitDiffEligibility ? (
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="sm"
+                      onClick={onRetryGitDiffEligibility}
+                    >
+                      Retry
+                    </Button>
+                  ) : null}
+                </div>
+              ) : (
+                "Checking Git support…"
+              )}
+            </EmptyStatePanel>
           ) : isSurfaceDiffActive ? (
             <GitDiffTabContent
               environmentId={environmentId}
@@ -973,11 +1060,6 @@ export function ThreadSecondaryPanel({
     );
   };
 
-  const shouldEnableSidebarSplits =
-    !renderAsDrawer &&
-    splitPanelStateId !== undefined &&
-    splitTabModels !== undefined &&
-    renderSplitTabContent !== undefined;
   const splitTabs = shouldEnableSidebarSplits
     ? ([
         ...(showInfoTab
@@ -1039,6 +1121,7 @@ export function ThreadSecondaryPanel({
         }
       }}
       onGlobalTabReorder={onFileTabReorder}
+      onVisibleActiveTabIdsChange={handleVisibleSplitActiveTabIdsChange}
       panelStateId={splitPanelStateId}
       tabs={splitTabs}
       renderSplitHeader={({
@@ -1046,8 +1129,14 @@ export function ThreadSecondaryPanel({
         renderTabGroups,
       }: SidebarSplitHeaderRenderArgs) => {
         const focusedPane = panes.find((pane) => pane.isFocused) ?? panes[0];
+        const hasTabSplits = panes.length > 1;
         return (
-          <div className={getSecondaryPanelChromeStackClassName(false)}>
+          <div
+            className={getSecondaryPanelChromeStackClassName(
+              false,
+              topChromeSurface,
+            )}
+          >
             <div
               data-testid="thread-secondary-panel-top-chrome"
               className={cn(
@@ -1070,35 +1159,50 @@ export function ThreadSecondaryPanel({
                   return (
                     <div
                       key={pane.paneId}
-                      className={cn(
-                        "flex h-full min-w-0 flex-1 items-center gap-1 overflow-hidden px-2",
-                        `transition-[padding] ${PANEL_COLLAPSE_TRANSITION_CLASS}`,
-                        index === 0 && [
-                          "pl-4",
-                          collapsedPanelTrafficLightReserveClassName,
-                        ],
-                        index === panes.length - 1 &&
-                          (showNewTabButton ? "pr-28" : "pr-20"),
-                      )}
+                      className="flex h-full w-full min-w-0 overflow-hidden"
                       data-sidebar-split-tab-group={pane.paneId}
                       role="group"
                       aria-label={`Pane ${index + 1} tabs`}
                       onPointerDown={pane.onFocusPane}
                     >
-                      {renderPanelTabGroup({
-                        activeSurfaceTab: paneModel,
-                        fileSurfaceTabs: resolveSplitPaneFileTabs(pane),
-                        onBeginTabDrag: pane.onBeginTabDrag,
-                        onSelectSurfaceTab: pane.onSelectTab,
-                        onSurfaceFileTabReorder: pane.onReorderTab,
-                        showDiffSurfaceTab: pane.group.tabIds.includes(
-                          SIDEBAR_FIXED_DIFF_TAB_ID,
-                        ),
-                        showInfoSurfaceTab: pane.group.tabIds.includes(
-                          SIDEBAR_FIXED_INFO_TAB_ID,
-                        ),
-                        showNewTabButton: false,
-                      })}
+                      <div
+                        className={cn(
+                          "flex h-full min-w-0 flex-1 items-center gap-1 overflow-hidden px-2",
+                          `transition-[padding] ${PANEL_COLLAPSE_TRANSITION_CLASS}`,
+                          index === 0 && [
+                            "pl-4",
+                            collapsedPanelTrafficLightReserveClassName,
+                          ],
+                          index === panes.length - 1 &&
+                            (showNewTabButton ? "pr-28" : "pr-20"),
+                        )}
+                      >
+                        {renderPanelTabGroup({
+                          activeClassName:
+                            hasTabSplits &&
+                            !pane.isFocused &&
+                            dimsInactiveSplits
+                              ? CONTEXT_INACTIVE_TEXT_CLASS
+                              : undefined,
+                          activeTreatment: hasTabSplits
+                            ? pane.isFocused
+                              ? "fill"
+                              : "plain"
+                            : "fill",
+                          activeSurfaceTab: paneModel,
+                          fileSurfaceTabs: resolveSplitPaneFileTabs(pane),
+                          onBeginTabDrag: pane.onBeginTabDrag,
+                          onSelectSurfaceTab: pane.onSelectTab,
+                          onSurfaceFileTabReorder: pane.onReorderTab,
+                          showDiffSurfaceTab: pane.group.tabIds.includes(
+                            SIDEBAR_FIXED_DIFF_TAB_ID,
+                          ),
+                          showInfoSurfaceTab: pane.group.tabIds.includes(
+                            SIDEBAR_FIXED_INFO_TAB_ID,
+                          ),
+                          showNewTabButton: false,
+                        })}
+                      </div>
                     </div>
                   );
                 })}
@@ -1142,7 +1246,9 @@ export function ThreadSecondaryPanel({
           paneModel.kind !== "thread-info" &&
           paneModel.kind !== "git-diff" &&
           paneModel.kind !== "browser"
-            ? renderSplitTabContent(paneModel)
+            ? renderSplitTabContent(paneModel, {
+                visibleActiveTabIds: pane.visibleActiveTabIds,
+              })
             : undefined;
         return renderPanelSurface({
           activeSurfaceTab: paneModel,
@@ -1583,7 +1689,8 @@ interface NewTabButtonProps {
 }
 
 interface PinnedIconTabProps {
-  activeTreatment: "fill" | "underline";
+  activeClassName?: string;
+  activeTreatment: TabPillActiveTreatment;
   ariaLabel: string;
   ariaKeyshortcuts?: string;
   isActive: boolean;
@@ -1596,6 +1703,7 @@ interface PinnedIconTabProps {
 }
 
 function PinnedIconTab({
+  activeClassName,
   activeTreatment,
   ariaLabel,
   ariaKeyshortcuts,
@@ -1626,6 +1734,7 @@ function PinnedIconTab({
             leadingVisual={leadingVisual}
             title={title}
             isActive={isActive}
+            activeClassName={activeClassName}
             activeTreatment={activeTreatment}
             onSelect={onClick}
             closeAction={null}
diff --git a/apps/app/src/components/secondary-panel/sidebarSplitLayout.test.ts b/apps/app/src/components/secondary-panel/sidebarSplitLayout.test.ts
index 4d346c729c..99b700c5ca 100644
--- a/apps/app/src/components/secondary-panel/sidebarSplitLayout.test.ts
+++ b/apps/app/src/components/secondary-panel/sidebarSplitLayout.test.ts
@@ -108,6 +108,25 @@ describe("sidebar split layout", () => {
     ).toEqual(TABS);
   });
 
+  it("discards restored vertical tab splits now that the header is horizontal-only", () => {
+    const vertical = persistedStateWithPaneCount(2);
+    if (vertical.layout.root.type !== "split") {
+      throw new Error("expected split");
+    }
+    vertical.layout.root.dir = "col";
+    const availableTabIds = ["tab-0", "tab-1"];
+
+    const parsed = parseSidebarSplitState(
+      JSON.stringify(vertical),
+      availableTabIds,
+      "tab-0",
+    );
+
+    expect(isCanonicalSidebarSplitState(parsed, availableTabIds, "tab-0")).toBe(
+      true,
+    );
+  });
+
   it("continues to parse the current raw v1 state without an envelope", () => {
     const split = splitOff(
       createSidebarSplitState(TABS, SIDEBAR_FIXED_INFO_TAB_ID),
diff --git a/apps/app/src/components/secondary-panel/sidebarSplitLayout.ts b/apps/app/src/components/secondary-panel/sidebarSplitLayout.ts
index bdc80e1b31..95ac7db3c3 100644
--- a/apps/app/src/components/secondary-panel/sidebarSplitLayout.ts
+++ b/apps/app/src/components/secondary-panel/sidebarSplitLayout.ts
@@ -594,7 +594,7 @@ const layoutNodeSchema: z.ZodType<LayoutNode> = z.lazy(() =>
     z
       .object({
         type: z.literal("split"),
-        dir: z.enum(["row", "col"]),
+        dir: z.literal("row"),
         sizes: z.array(z.number().positive()).min(2),
         children: z.array(layoutNodeSchema).min(2),
       })
diff --git a/apps/app/src/components/secondary-panel/terminalPanelTabs.test.ts b/apps/app/src/components/secondary-panel/terminalPanelTabs.test.ts
index fa80a17c45..a6150971d9 100644
--- a/apps/app/src/components/secondary-panel/terminalPanelTabs.test.ts
+++ b/apps/app/src/components/secondary-panel/terminalPanelTabs.test.ts
@@ -19,9 +19,7 @@ interface TabIdentity {
   id: string;
 }
 
-function terminalSession(
-  overrides: TerminalSessionOverrides,
-): TerminalSession {
+function terminalSession(overrides: TerminalSessionOverrides): TerminalSession {
   return {
     id: "term_1",
     threadId: "thr_1",
@@ -216,6 +214,47 @@ describe("terminalPanelTabs", () => {
     ]);
   });
 
+  it("retains every disconnected terminal that remains visible in split panes", () => {
+    const first = createTerminalFixedPanelTab({ terminalId: "term_first" });
+    const second = createTerminalFixedPanelTab({ terminalId: "term_second" });
+    const hidden = createTerminalFixedPanelTab({ terminalId: "term_hidden" });
+    const sessions = [
+      terminalSession({ id: "term_first", status: "disconnected" }),
+      terminalSession({ id: "term_second", status: "disconnected" }),
+      terminalSession({ id: "term_hidden", status: "disconnected" }),
+    ];
+    const retainedTerminalIds = ["term_first", "term_second"];
+
+    expect(
+      tabIds(
+        buildTerminalSyncedSecondaryFileTabs({
+          orderedTabs: [first, second, hidden],
+          retainedTerminalId: null,
+          retainedTerminalIds,
+          terminalSessions: sessions,
+        }),
+      ),
+    ).toEqual([first.id, second.id]);
+
+    const state = createEmptyFixedPanelTabsState({
+      secondary: {
+        activeTabId: first.id,
+        isOpen: true,
+        tabs: [first, second, hidden],
+      },
+    });
+    expect(
+      tabIds(
+        syncTerminalTabsInFixedPanelState({
+          retainedTerminalId: null,
+          retainedTerminalIds,
+          state,
+          terminalSessions: sessions,
+        }).secondary.tabs,
+      ),
+    ).toEqual([first.id, second.id]);
+  });
+
   it("finds the active terminal id only for displayed terminal tabs", () => {
     const terminalTab = createTerminalFixedPanelTab({ terminalId: "term_1" });
     const fileTab = createHostFilePreviewFixedPanelTab({
@@ -300,9 +339,7 @@ describe("terminalPanelTabs", () => {
       terminalSessions: [terminalSession({ id: "term_1" })],
     });
 
-    expect(tabIds(nextState.secondary.tabs)).toEqual([
-      "terminal:term_1:none",
-    ]);
+    expect(tabIds(nextState.secondary.tabs)).toEqual(["terminal:term_1:none"]);
     expect(nextState.secondary.activeTabId).toBeNull();
   });
 
diff --git a/apps/app/src/components/secondary-panel/terminalPanelTabs.ts b/apps/app/src/components/secondary-panel/terminalPanelTabs.ts
index 3d55dec060..abebb6c65b 100644
--- a/apps/app/src/components/secondary-panel/terminalPanelTabs.ts
+++ b/apps/app/src/components/secondary-panel/terminalPanelTabs.ts
@@ -11,6 +11,7 @@ import { shouldShowRetainedTerminalSession } from "@/lib/terminal-session-visibi
 interface BuildTerminalSyncedSecondaryFileTabsArgs {
   orderedTabs: readonly SecondaryFileFixedPanelTab[];
   retainedTerminalId: string | null;
+  retainedTerminalIds?: readonly string[];
   terminalSessions: readonly TerminalSession[];
 }
 
@@ -21,6 +22,7 @@ interface FindActiveTerminalIdInSecondaryFileTabsArgs {
 
 interface SyncTerminalTabsInFixedPanelStateArgs {
   retainedTerminalId: string | null;
+  retainedTerminalIds?: readonly string[];
   state: FixedPanelTabsState;
   terminalSessions: readonly TerminalSession[];
 }
@@ -38,15 +40,20 @@ interface PruneTerminalTabsForSessionsArgs {
 
 function getTerminalSessionTabIds({
   retainedTerminalId,
+  retainedTerminalIds,
   terminalSessions,
 }: {
   retainedTerminalId: string | null;
+  retainedTerminalIds?: readonly string[];
   terminalSessions: readonly TerminalSession[];
 }): ReadonlySet<string> {
+  const retainedIds = new Set(retainedTerminalIds);
   return new Set(
     terminalSessions
-      .filter((session) =>
-        shouldShowRetainedTerminalSession({ retainedTerminalId, session }),
+      .filter(
+        (session) =>
+          retainedIds.has(session.id) ||
+          shouldShowRetainedTerminalSession({ retainedTerminalId, session }),
       )
       .map((session) => session.id),
   );
@@ -79,10 +86,12 @@ export function pruneTerminalTabsForSessions({
 export function buildTerminalSyncedSecondaryFileTabs({
   orderedTabs,
   retainedTerminalId,
+  retainedTerminalIds,
   terminalSessions,
 }: BuildTerminalSyncedSecondaryFileTabsArgs): readonly SecondaryFileFixedPanelTab[] {
   const terminalSessionIds = getTerminalSessionTabIds({
     retainedTerminalId,
+    retainedTerminalIds,
     terminalSessions,
   });
   const seenTerminalIds = new Set<string>();
@@ -104,7 +113,7 @@ export function buildTerminalSyncedSecondaryFileTabs({
   }
 
   for (const session of terminalSessions) {
-    if (!shouldShowRetainedTerminalSession({ retainedTerminalId, session })) {
+    if (!terminalSessionIds.has(session.id)) {
       continue;
     }
     if (seenTerminalIds.has(session.id)) {
@@ -136,11 +145,13 @@ export function findActiveTerminalIdInSecondaryFileTabs({
 
 export function syncTerminalTabsInFixedPanelState({
   retainedTerminalId,
+  retainedTerminalIds,
   state,
   terminalSessions,
 }: SyncTerminalTabsInFixedPanelStateArgs): FixedPanelTabsState {
   const terminalSessionIds = getTerminalSessionTabIds({
     retainedTerminalId,
+    retainedTerminalIds,
     terminalSessions,
   });
   const seenTerminalIds = new Set<string>();
@@ -162,7 +173,7 @@ export function syncTerminalTabsInFixedPanelState({
   }
 
   for (const session of terminalSessions) {
-    if (!shouldShowRetainedTerminalSession({ retainedTerminalId, session })) {
+    if (!terminalSessionIds.has(session.id)) {
       continue;
     }
     if (seenTerminalIds.has(session.id)) {
diff --git a/apps/app/src/components/thread/terminal/ThreadTerminalPanel.tsx b/apps/app/src/components/thread/terminal/ThreadTerminalPanel.tsx
index 8426bb1d4a..a479a33b5e 100644
--- a/apps/app/src/components/thread/terminal/ThreadTerminalPanel.tsx
+++ b/apps/app/src/components/thread/terminal/ThreadTerminalPanel.tsx
@@ -17,6 +17,7 @@ interface ThreadTerminalPanelProps {
   onOpenLink?: MarkdownPreviewLinkHandler;
   onSelectionAddToChat?: (text: string) => void;
   panelStateId?: string;
+  retainedTerminalIds?: readonly string[];
   syncThreadId: string | null;
   terminalId?: string;
   target: ThreadTerminalTarget;
@@ -33,6 +34,7 @@ export function ThreadTerminalPanel({
   onOpenLink,
   onSelectionAddToChat,
   panelStateId,
+  retainedTerminalIds,
   syncThreadId,
   terminalId,
   target,
@@ -45,6 +47,7 @@ export function ThreadTerminalPanel({
     fixedTerminalId,
     panelStateId,
     preferredTerminalId: terminalId,
+    retainedTerminalIds,
     syncThreadId,
     target,
   });
diff --git a/apps/app/src/components/thread/terminal/useThreadTerminalController.test.ts b/apps/app/src/components/thread/terminal/useThreadTerminalController.test.ts
index c703dd406d..f4a268f4b6 100644
--- a/apps/app/src/components/thread/terminal/useThreadTerminalController.test.ts
+++ b/apps/app/src/components/thread/terminal/useThreadTerminalController.test.ts
@@ -91,6 +91,28 @@ describe("terminal visibility", () => {
     ).toBe(false);
   });
 
+  it("keeps disconnected sessions retained by a sibling split pane", () => {
+    const disconnected = terminalSession({
+      id: "term_sibling",
+      status: "disconnected",
+    });
+
+    expect(
+      shouldCloseDisconnectedTerminalSession({
+        retainedTerminalViewId: null,
+        retainedTerminalViewIds: new Set(["term_sibling"]),
+        session: disconnected,
+      }),
+    ).toBe(false);
+    expect(
+      shouldCloseDisconnectedTerminalSession({
+        retainedTerminalViewId: null,
+        retainedTerminalViewIds: new Set(),
+        session: disconnected,
+      }),
+    ).toBe(true);
+  });
+
   it("auto-closes only clean UI-created terminal sessions", () => {
     const cleanUiCreated = terminalSession({ id: "term_ui" });
     const external = terminalSession({ id: "term_external" });
diff --git a/apps/app/src/components/thread/terminal/useThreadTerminalController.ts b/apps/app/src/components/thread/terminal/useThreadTerminalController.ts
index d55a220d40..0b35810f8b 100644
--- a/apps/app/src/components/thread/terminal/useThreadTerminalController.ts
+++ b/apps/app/src/components/thread/terminal/useThreadTerminalController.ts
@@ -49,6 +49,8 @@ export interface ThreadTerminalControllerArgs {
   panelStateId?: string;
   /** Pins this controller to one pane-owned terminal without changing global tab selection. */
   preferredTerminalId?: string;
+  /** Terminal views retained by every visible pane in the shared panel. */
+  retainedTerminalIds?: readonly string[];
   /** Thread whose tabs are server-synced; null for local-only panel state. */
   syncThreadId: string | null;
   fixedPanelTarget?: TerminalCreateTarget;
@@ -113,11 +115,16 @@ export function isVisibleTerminalSession({
 
 export function shouldCloseDisconnectedTerminalSession({
   retainedTerminalViewId,
+  retainedTerminalViewIds,
   session,
 }: {
   retainedTerminalViewId: string | null;
+  retainedTerminalViewIds?: ReadonlySet<string>;
   session: TerminalSession;
 }): boolean {
+  if (retainedTerminalViewIds?.has(session.id)) {
+    return false;
+  }
   return shouldCloseUnretainedDisconnectedTerminalSession({
     retainedTerminalId: retainedTerminalViewId,
     session,
@@ -208,6 +215,7 @@ export function useThreadTerminalController({
   isPanelPersistedOpen,
   panelStateId,
   preferredTerminalId,
+  retainedTerminalIds,
   syncThreadId,
   fixedPanelTarget,
   fixedTerminalId,
@@ -253,6 +261,11 @@ export function useThreadTerminalController({
   const [retainedTerminalViewId, setRetainedTerminalViewId] = useState<
     string | null
   >(null);
+  const sharedRetainedTerminalIds = useMemo(
+    () =>
+      retainedTerminalIds === undefined ? null : new Set(retainedTerminalIds),
+    [retainedTerminalIds],
+  );
   // Whether this client has shown the panel since it was last persisted-open.
   // Derived during render (not in an effect) so the mount decision below never
   // lags a commit behind `isPanelOpen`.
@@ -509,6 +522,7 @@ export function useThreadTerminalController({
       if (
         !shouldCloseDisconnectedTerminalSession({
           retainedTerminalViewId,
+          retainedTerminalViewIds: sharedRetainedTerminalIds ?? undefined,
           session,
         }) ||
         closingDisconnectedTerminalIdsRef.current.has(session.id)
@@ -538,6 +552,7 @@ export function useThreadTerminalController({
     isPanelOpen,
     removeFixedTerminalTab,
     retainedTerminalViewId,
+    sharedRetainedTerminalIds,
     sessions,
     terminalsQuery.error,
     terminalsQuery.isLoading,
diff --git a/apps/app/src/components/ui/tab-pill.tsx b/apps/app/src/components/ui/tab-pill.tsx
index 5dc4e2faa0..bccd9195e0 100644
--- a/apps/app/src/components/ui/tab-pill.tsx
+++ b/apps/app/src/components/ui/tab-pill.tsx
@@ -26,6 +26,8 @@ export interface TabPillCloseAction {
   isClosing?: boolean;
 }
 
+export type TabPillActiveTreatment = "fill" | "underline" | "plain";
+
 export interface TabPillProps {
   label: string;
   ariaLabel?: string;
@@ -39,9 +41,11 @@ export interface TabPillProps {
   isActive: boolean;
   /**
    * Full-width panels use a quiet underline because the view already owns the
-   * whole canvas; the filled selection surface is reserved for sibling panes.
+   * whole canvas. Split panes reuse the standard fill treatment so their focus
+   * state matches page splits.
    */
-  activeTreatment?: "fill" | "underline";
+  activeTreatment?: TabPillActiveTreatment;
+  activeClassName?: string;
   onSelect: () => void;
   labelMaxWidthClass?: string;
   closeAction: TabPillCloseAction | null;
@@ -58,6 +62,7 @@ export function TabPill({
   title,
   isActive,
   activeTreatment = "fill",
+  activeClassName,
   onSelect,
   labelMaxWidthClass = TAB_PILL_DEFAULT_LABEL_MAX_WIDTH_CLASS,
   closeAction,
@@ -70,8 +75,11 @@ export function TabPill({
         isActive
           ? activeTreatment === "fill"
             ? cn(CONTEXT_SELECTION_SURFACE_CLASS, "text-foreground")
-            : "text-foreground after:absolute after:inset-x-1.5 after:bottom-0 after:h-0.5 after:rounded-full after:bg-foreground/60"
+            : activeTreatment === "underline"
+              ? "text-foreground after:absolute after:inset-x-1.5 after:bottom-0 after:h-0.5 after:rounded-full after:bg-foreground/60"
+              : "text-foreground"
           : "text-muted-foreground hover:bg-state-hover",
+        isActive && activeClassName,
       )}
     >
       <button
diff --git a/apps/app/src/views/thread-detail/PaneMaximizeButton.tsx b/apps/app/src/views/thread-detail/PaneMaximizeButton.tsx
index 0c5b29fe95..8ee648661f 100644
--- a/apps/app/src/views/thread-detail/PaneMaximizeButton.tsx
+++ b/apps/app/src/views/thread-detail/PaneMaximizeButton.tsx
@@ -75,6 +75,7 @@ export function PaneMaximizeButton({
 }
 
 export function PaneArrangementButton({
+  arrangementSides,
   className,
   defaultMenuOpen = false,
   defaultTooltipOpen = false,
@@ -83,6 +84,7 @@ export function PaneArrangementButton({
   onToggleFullScreen,
   shortcut,
 }: {
+  arrangementSides?: readonly SplitSide[];
   className?: string;
   defaultMenuOpen?: boolean;
   defaultTooltipOpen?: boolean;
@@ -101,6 +103,11 @@ export function PaneArrangementButton({
   } = useHoverPopover({ openDelayMs: 400, closeDelayMs: 100 });
 
   const label = isFullScreen ? "Exit Full Screen" : "Full Screen";
+  const arrangementActions = arrangementSides
+    ? ARRANGEMENT_ACTIONS.filter((action) =>
+        arrangementSides.includes(action.side),
+      )
+    : ARRANGEMENT_ACTIONS;
   const accessibleLabel = shortcut ? `${label} (${shortcut.label})` : label;
   const menuOpen = !isFullScreen && (defaultMenuOpen || hoverOpen);
   const button = (
@@ -168,13 +175,19 @@ export function PaneArrangementButton({
             <span className="text-subtle-foreground">{shortcut.label}</span>
           ) : null}
         </button>
-        {onMoveToSide ? (
+        {onMoveToSide && arrangementActions.length > 0 ? (
           <div className="border-t border-border-hairline pt-1.5">
             <div className="px-2 pb-0.5 text-2xs font-medium text-subtle-foreground">
               Move
             </div>
-            <div className="grid grid-cols-4 gap-1" aria-label="Move pane">
-              {ARRANGEMENT_ACTIONS.map((action) => (
+            <div
+              className={cn(
+                "grid gap-1",
+                arrangementActions.length === 2 ? "grid-cols-2" : "grid-cols-4",
+              )}
+              aria-label="Move pane"
+            >
+              {arrangementActions.map((action) => (
                 <Tooltip key={action.side}>
                   <TooltipTrigger asChild>
                     <button
diff --git a/apps/app/src/views/thread-detail/SplitThreadArea.test.tsx b/apps/app/src/views/thread-detail/SplitThreadArea.test.tsx
index f7ff0a0be3..a070b4a432 100644
--- a/apps/app/src/views/thread-detail/SplitThreadArea.test.tsx
+++ b/apps/app/src/views/thread-detail/SplitThreadArea.test.tsx
@@ -1158,6 +1158,8 @@ describe("SplitThreadArea", () => {
     });
     const separator = screen.getByRole("separator");
     expect(separator.getAttribute("aria-orientation")).toBe("horizontal");
+    expect(separator.classList).toContain("bg-border-seam-vertical/60");
+    expect(separator.classList).not.toContain("bg-border-seam");
 
     const hitTarget = separator.querySelector<HTMLElement>(
       "[data-split-divider-hit-target]",
@@ -1220,6 +1222,18 @@ describe("SplitThreadArea", () => {
     expect(resizedRoot.sizes[1]).toBeCloseTo(0.3, 5);
   });
 
+  it("keeps the existing stronger seam on side-by-side split dividers", () => {
+    renderSplitArea({
+      path: threadPath("thr-a"),
+      layout: twoPaneLayout("pane-1", "row"),
+    });
+
+    const separator = screen.getByRole("separator");
+    expect(separator.getAttribute("aria-orientation")).toBe("vertical");
+    expect(separator.classList).toContain("bg-border-seam");
+    expect(separator.classList).not.toContain("bg-border-seam-vertical/60");
+  });
+
   it("hosts one panel whose visibility survives focus changes between panes", async () => {
     renderSplitArea({
       path: threadPath("thr-a"),
diff --git a/apps/app/src/views/thread-detail/SplitThreadArea.tsx b/apps/app/src/views/thread-detail/SplitThreadArea.tsx
index 015ec6db93..cef85f8aae 100644
--- a/apps/app/src/views/thread-detail/SplitThreadArea.tsx
+++ b/apps/app/src/views/thread-detail/SplitThreadArea.tsx
@@ -1466,7 +1466,7 @@ function SplitDivider({ dir, hidden, onResize }: SplitDividerProps) {
         // In a column split, the lower pane's header touches the seam, so a
         // lower divider layer loses the grab target to that header.
         "group relative z-[25] flex-shrink-0 transition-colors",
-        "bg-border-seam",
+        horizontal ? "bg-border-seam" : "bg-border-seam-vertical/60",
         "hover:bg-ring/40 data-[dragging]:bg-ring/40",
         hidden && "invisible pointer-events-none",
         horizontal ? "w-px cursor-col-resize" : "h-px cursor-row-resize",
diff --git a/apps/app/src/views/thread-detail/ThreadDetailView.tsx b/apps/app/src/views/thread-detail/ThreadDetailView.tsx
index dbc65dee11..5c460529ed 100644
--- a/apps/app/src/views/thread-detail/ThreadDetailView.tsx
+++ b/apps/app/src/views/thread-detail/ThreadDetailView.tsx
@@ -34,6 +34,7 @@ import {
 import type {
   PullRequestMergeMethod,
   TerminalSession,
+  ThreadTabFileOpenerOwner,
   TimelineRow,
 } from "@bb/server-contract";
 import type { WorkspaceOpenTarget } from "@bb/host-daemon-contract";
@@ -717,6 +718,34 @@ function ThreadDetailViewInternal(props: ThreadDetailViewInternalProps) {
     storageFiles: threadStorageFiles?.files,
     terminalSessions: terminalsListQuery.data?.sessions,
   });
+  const splitPanelStateId = thread?.id ?? threadId ?? null;
+  const [reportedVisibleSplitTabs, setReportedVisibleSplitTabs] = useState<{
+    panelStateId: string;
+    tabIds: readonly string[];
+  } | null>(null);
+  const handleVisibleSplitActiveTabIdsChange = useCallback(
+    (tabIds: readonly string[]) => {
+      if (splitPanelStateId === null) return;
+      setReportedVisibleSplitTabs({ panelStateId: splitPanelStateId, tabIds });
+    },
+    [splitPanelStateId],
+  );
+  const orderedSecondaryFileTabIds = useMemo(
+    () => orderedSecondaryFileTabs.map((tab) => tab.id),
+    [orderedSecondaryFileTabs],
+  );
+  const visibleSplitTabIds =
+    reportedVisibleSplitTabs?.panelStateId === splitPanelStateId
+      ? reportedVisibleSplitTabs.tabIds
+      : orderedSecondaryFileTabIds;
+  const retainedSplitTerminalIds = useMemo<readonly string[]>(() => {
+    if (!isSecondaryPanelOpen) return [];
+    return orderedSecondaryFileTabs.flatMap((tab) =>
+      tab.kind === "terminal" && visibleSplitTabIds.includes(tab.id)
+        ? [tab.terminalId]
+        : [],
+    );
+  }, [isSecondaryPanelOpen, orderedSecondaryFileTabs, visibleSplitTabIds]);
   const pluginPanelActions = usePluginPanelActions({
     openPluginPanel,
     threadId,
@@ -911,9 +940,15 @@ function ThreadDetailViewInternal(props: ThreadDetailViewInternalProps) {
         : buildTerminalSyncedSecondaryFileTabs({
             orderedTabs: orderedSecondaryFileTabs,
             retainedTerminalId,
+            retainedTerminalIds: retainedSplitTerminalIds,
             terminalSessions: loadedTerminalSessions,
           }),
-    [loadedTerminalSessions, orderedSecondaryFileTabs, retainedTerminalId],
+    [
+      loadedTerminalSessions,
+      orderedSecondaryFileTabs,
+      retainedSplitTerminalIds,
+      retainedTerminalId,
+    ],
   );
   useEffect(() => {
     if (terminalsListQuery.data === undefined) {
@@ -922,12 +957,14 @@ function ThreadDetailViewInternal(props: ThreadDetailViewInternalProps) {
     updateFixedPanelTabsState((state) =>
       syncTerminalTabsInFixedPanelState({
         retainedTerminalId,
+        retainedTerminalIds: retainedSplitTerminalIds,
         state,
         terminalSessions,
       }),
     );
   }, [
     retainedTerminalId,
+    retainedSplitTerminalIds,
     terminalSessions,
     terminalsListQuery.data,
     updateFixedPanelTabsState,
@@ -2632,8 +2669,93 @@ function ThreadDetailViewInternal(props: ThreadDetailViewInternalProps) {
       thread={thread}
     />
   );
+  const renderFileOpenerOriginal = (
+    owner: ThreadTabFileOpenerOwner,
+  ): ReactNode => {
+    switch (owner.kind) {
+      case "workspace-file-preview": {
+        const copyPath = resolveAbsoluteFilePath({
+          path: owner.tab.path,
+          rootPath: workspacePreviewRootPath,
+        });
+        return (
+          <LazyWorkspaceFilePreviewTabContent
+            activePath={owner.tab.path}
+            copyPath={copyPath}
+            environmentId={owner.environmentId}
+            isPanelOpen={isSecondaryPanelOpen}
+            lineRange={owner.tab.lineRange}
+            markdownLinkRouting={buildMarkdownPreviewLinkRouting({
+              baseDir: copyPath
+                ? getAbsoluteDirname({ path: copyPath })
+                : undefined,
+              onOpenLink: handleOpenTimelineLink,
+              onOpenLocalFileLink: handleOpenTimelineLocalFileLink,
+              rootPath: workspacePreviewRootPath,
+            })}
+            onOpenInEditor={handleOpenFileInEditor}
+            onSelectionAddToChat={handleSelectionAddToChat}
+            source={owner.tab.source}
+            statusLabel={owner.tab.statusLabel}
+            threadId={owner.threadId ?? thread.id}
+          />
+        );
+      }
+      case "host-file-preview": {
+        const baseDir = getAbsoluteDirname({ path: owner.tab.path });
+        return (
+          <LazyHostFilePreviewTabContent
+            activePath={owner.tab.path}
+            copyPath={owner.tab.path}
+            environmentId={owner.environmentId}
+            isPanelOpen={isSecondaryPanelOpen}
+            lineRange={owner.tab.lineRange}
+            markdownLinkRouting={buildMarkdownPreviewLinkRouting({
+              baseDir,
+              onOpenLink: handleOpenTimelineLink,
+              onOpenLocalFileLink: handleOpenTimelineLocalFileLink,
+              rootPath: resolveHostFilePreviewLinkRootPath({
+                baseDir,
+                threadStorageRootPath,
+                workspaceRootPath: workspacePreviewRootPath,
+              }),
+            })}
+            onOpenInEditor={handleOpenHostFileInEditor}
+            onSelectionAddToChat={handleSelectionAddToChat}
+            threadId={owner.threadId}
+          />
+        );
+      }
+      case "thread-storage-file-preview": {
+        const copyPath = resolveAbsoluteFilePath({
+          path: owner.tab.path,
+          rootPath: threadStorageRootPath,
+        });
+        return (
+          <LazyThreadStorageFilePreviewTabContent
+            activePath={owner.tab.path}
+            copyPath={copyPath}
+            isPanelOpen={isSecondaryPanelOpen}
+            lineRange={owner.tab.lineRange}
+            markdownLinkRouting={buildMarkdownPreviewLinkRouting({
+              baseDir: copyPath
+                ? getAbsoluteDirname({ path: copyPath })
+                : undefined,
+              onOpenLink: handleOpenTimelineLink,
+              onOpenLocalFileLink: handleOpenTimelineLocalFileLink,
+              rootPath: threadStorageRootPath,
+            })}
+            onOpenInEditor={handleOpenStorageFileInEditor}
+            onSelectionAddToChat={handleSelectionAddToChat}
+            threadId={owner.threadId}
+          />
+        );
+      }
+    }
+  };
   const renderSplitTabContent = (
     tab: SecondaryFileFixedPanelTab,
+    _context: { visibleActiveTabIds?: readonly string[] },
   ): ReactNode => {
     switch (tab.kind) {
       case "browser":
@@ -2650,6 +2772,7 @@ function ThreadDetailViewInternal(props: ThreadDetailViewInternalProps) {
             onAutoFocusHandled={handleTerminalAutoFocusHandled}
             onOpenLink={handleOpenTimelineLink}
             onSelectionAddToChat={handleSelectionAddToChat}
+            retainedTerminalIds={retainedSplitTerminalIds}
             syncThreadId={thread.id}
             target={{ kind: "thread", threadId: thread.id }}
             terminalId={tab.terminalId}
@@ -2752,35 +2875,6 @@ function ThreadDetailViewInternal(props: ThreadDetailViewInternalProps) {
         );
       }
       case "plugin-panel":
-        const fileOpenerOriginal =
-          tab.fileOpenerOwner === undefined
-            ? undefined
-            : renderSplitTabContent(
-                tab.fileOpenerOwner.kind === "workspace-file-preview"
-                  ? {
-                      ...tab.fileOpenerOwner.tab,
-                      environmentId: tab.fileOpenerOwner.environmentId,
-                      id: `${tab.id}:file-opener-original`,
-                      kind: "workspace-file-preview",
-                      projectId: tab.fileOpenerOwner.projectId,
-                    }
-                  : tab.fileOpenerOwner.kind === "host-file-preview"
-                    ? {
-                        ...tab.fileOpenerOwner.tab,
-                        environmentId: tab.fileOpenerOwner.environmentId,
-                        id: `${tab.id}:file-opener-original`,
-                        kind: "host-file-preview",
-                        threadId: tab.fileOpenerOwner.threadId,
-                      }
-                    : {
-                        ...tab.fileOpenerOwner.tab,
-                        environmentId: tab.fileOpenerOwner.environmentId,
-                        id: `${tab.id}:file-opener-original`,
-                        isPinned: false,
-                        kind: "thread-storage-file-preview",
-                        threadId: tab.fileOpenerOwner.threadId,
-                      },
-              );
         return (
           <ThreadTimelineNavigationProvider
             environmentId={thread.environmentId}
@@ -2792,7 +2886,11 @@ function ThreadDetailViewInternal(props: ThreadDetailViewInternalProps) {
             <PluginPanelTabContent
               tab={tab}
               context={{ kind: "thread", threadId: thread.id }}
-              fileOpenerOriginal={fileOpenerOriginal}
+              fileOpenerOriginal={
+                tab.fileOpenerOwner
+                  ? renderFileOpenerOriginal(tab.fileOpenerOwner)
+                  : undefined
+              }
             />
           </ThreadTimelineNavigationProvider>
         );
@@ -2802,7 +2900,7 @@ function ThreadDetailViewInternal(props: ThreadDetailViewInternalProps) {
     (tab) => tab.id === activeFixedSecondaryTabId,
   );
   const fileTabContent = activeFileTabModel
-    ? renderSplitTabContent(activeFileTabModel)
+    ? renderSplitTabContent(activeFileTabModel, {})
     : undefined;
   const isBrowserTabActive = activeBrowserTab !== null;
   const threadDetailContent = (
@@ -2893,6 +2991,8 @@ function ThreadDetailViewInternal(props: ThreadDetailViewInternalProps) {
             splitPanelStateId: thread.id,
             splitTabModels: syncedOrderedSecondaryFileTabs,
             renderSplitTabContent,
+            onVisibleSplitActiveTabIdsChange:
+              handleVisibleSplitActiveTabIdsChange,
             splitTabContentFillsRegion: (tab) =>
               tab.kind === "plugin-panel" &&
               pluginThreadPanelActions.find(