diff --git a/src/components/shared/LocalPipelineMigration.test.tsx b/src/components/shared/LocalPipelineMigration.test.tsx
index 8e8f041e63..12c5b6fba8 100644
--- a/src/components/shared/LocalPipelineMigration.test.tsx
+++ b/src/components/shared/LocalPipelineMigration.test.tsx
@@ -168,6 +168,64 @@ it.each([false, true])(
   },
 );
 
+it("finishes an already-consented move for a hidden tab that opted in", async () => {
+  render(
+    <QueryClientProvider client={client}>
+      <LocalPipelineMigration
+        pipelineRef={pipelineRef}
+        isActive={false}
+        allowBackgroundMigration
+        onMigrated={onMigrated}
+      >
+        <p>Local editor</p>
+      </LocalPipelineMigration>
+    </QueryClientProvider>,
+  );
+  await waitFor(() => expect(onMigrated).toHaveBeenCalledWith(remote));
+  expect(screen.queryByRole("alertdialog")).toBeNull();
+});
+
+it("never prompts, checks write access or uploads for a hidden opted-in tab without consent", async () => {
+  localStorage.removeItem(consentKey);
+  const view = (active: boolean) => (
+    <QueryClientProvider client={client}>
+      <LocalPipelineMigration
+        pipelineRef={pipelineRef}
+        isActive={active}
+        allowBackgroundMigration
+        onMigrated={onMigrated}
+      >
+        <p>Local editor</p>
+      </LocalPipelineMigration>
+    </QueryClientProvider>
+  );
+  const { rerender } = render(view(false));
+  await waitFor(() => expect(storage.resolvePipeline).toHaveBeenCalled());
+  await act(async () => {});
+  expect(screen.queryByRole("alertdialog")).toBeNull();
+  expect(getRemotePipelineWriter).not.toHaveBeenCalled();
+  expect(storage.moveLocalPipelineToRemote).not.toHaveBeenCalled();
+
+  rerender(view(true));
+  expect(await screen.findByRole("alertdialog")).toBeInTheDocument();
+});
+
+it("keeps a cancelled pipeline local when consent is granted elsewhere", async () => {
+  localStorage.removeItem(consentKey);
+  open();
+  fireEvent.click(await screen.findByRole("button", { name: "Cancel" }));
+  await screen.findByText("Local editor");
+
+  act(() => {
+    localStorage.setItem(consentKey, "true");
+    window.dispatchEvent(new StorageEvent("storage"));
+  });
+
+  await act(async () => {});
+  expect(storage.moveLocalPipelineToRemote).not.toHaveBeenCalled();
+  expect(screen.getByText("Local editor")).toBeInTheDocument();
+});
+
 it("opens the local editor without offering a move when writing is unavailable", async () => {
   vi.mocked(getRemotePipelineWriter).mockRejectedValue(
     new Error("Write permission denied"),
diff --git a/src/components/shared/LocalPipelineMigration.tsx b/src/components/shared/LocalPipelineMigration.tsx
index 27089f92ff..c95e21b1e0 100644
--- a/src/components/shared/LocalPipelineMigration.tsx
+++ b/src/components/shared/LocalPipelineMigration.tsx
@@ -43,6 +43,7 @@ interface LocalPipelineMigrationProps {
   pipelineRef: PipelineRef;
   projectId?: string;
   isActive?: boolean;
+  allowBackgroundMigration?: boolean;
   onMigrated: (file: PipelineFile, clearProjectContext?: boolean) => void;
   children: ReactNode;
 }
@@ -119,6 +120,7 @@ function MigrateLocalPipeline({
   pipelineRef,
   projectId,
   isActive = true,
+  allowBackgroundMigration = false,
   onMigrated,
   children,
   file,
@@ -191,16 +193,24 @@ function MigrateLocalPipeline({
   const writer = useQuery({
     queryKey: RemotePipelineQueryKeys.Writer(backendUrl),
     queryFn: () => getRemotePipelineWriter(backendUrl),
-    enabled: ready && isActive && shouldMigrate && !isFetching,
+    enabled:
+      ready &&
+      !keepLocal &&
+      (isActive || (allowBackgroundMigration && hasConsent)) &&
+      shouldMigrate &&
+      !isFetching,
     retry: false,
   });
   useEffect(() => {
     if (
-      !isActive ||
+      (!isActive && !allowBackgroundMigration) ||
       !file ||
       isFetching ||
       started.current ||
-      (!file.remote && (!shouldMigrate || !hasConsent || !writer.isSuccess))
+      // Declining the dialog keeps this pipeline local until the user opens it
+      // again; later consent from another tab must not override that choice.
+      (!file.remote &&
+        (keepLocal || !shouldMigrate || !hasConsent || !writer.isSuccess))
     )
       return;
     started.current = true;
@@ -210,6 +220,8 @@ function MigrateLocalPipeline({
     hasConsent,
     isFetching,
     isActive,
+    keepLocal,
+    allowBackgroundMigration,
     migration,
     shouldMigrate,
     writer.isSuccess,
diff --git a/src/components/ui/resize-handle.tsx b/src/components/ui/resize-handle.tsx
index d57ddf8bd2..6e5d6b535d 100644
--- a/src/components/ui/resize-handle.tsx
+++ b/src/components/ui/resize-handle.tsx
@@ -7,6 +7,8 @@ interface ResizeHandleProps {
   minWidth?: number;
   maxWidth?: number;
   side?: "left" | "right";
+  // Names the handle as a separator for assistive tech and tests.
+  label?: string;
   onDoubleClick?: () => void;
   /** Called while dragging with the width requested before min/max constraints. */
   onResize?: (attemptedWidth: number) => void;
@@ -18,6 +20,7 @@ export const VerticalResizeHandle = ({
   minWidth = 200,
   maxWidth = 600,
   side = "left",
+  label,
   onDoubleClick,
   onResize,
   onResizeEnd,
@@ -92,6 +95,9 @@ export const VerticalResizeHandle = ({
         "w-2 -mx-0.5",
       )}
       ref={captureParentElement}
+      role={label ? "separator" : undefined}
+      aria-orientation={label ? "vertical" : undefined}
+      aria-label={label}
       onMouseDown={handleMouseDown}
       onDoubleClick={onDoubleClick}
     >
diff --git a/src/routes/v2/pages/Editor/EmbeddedPipelineEditor.tsx b/src/routes/v2/pages/Editor/EmbeddedPipelineEditor.tsx
index 5456ecb1be..8d5ea9bb87 100644
--- a/src/routes/v2/pages/Editor/EmbeddedPipelineEditor.tsx
+++ b/src/routes/v2/pages/Editor/EmbeddedPipelineEditor.tsx
@@ -63,6 +63,7 @@ import { TangentEditorAgentProvider } from "./TangentEditorAgentProvider";
 interface EmbeddedPipelineEditorProps {
   pipelineRef: EditorPipelineRef;
   isActive: boolean;
+  allowBackgroundMigration?: boolean;
   projectId: string;
   onMigrated?: (file: PipelineFile) => void;
   onTitleChange?: (title: string) => void;
@@ -281,6 +282,7 @@ export function EmbeddedPipelineEditor(props: EmbeddedPipelineEditorProps) {
         pipelineRef={props.pipelineRef}
         projectId={props.projectId}
         isActive={props.isActive}
+        allowBackgroundMigration={props.allowBackgroundMigration}
         onMigrated={(file) => props.onMigrated?.(file)}
       >
         <EditableEmbeddedPipelineEditor {...props} />
diff --git a/src/routes/v2/pages/Editor/components/FlowCanvas/FlowCanvas.test.tsx b/src/routes/v2/pages/Editor/components/FlowCanvas/FlowCanvas.test.tsx
new file mode 100644
index 0000000000..264b2e1710
--- /dev/null
+++ b/src/routes/v2/pages/Editor/components/FlowCanvas/FlowCanvas.test.tsx
@@ -0,0 +1,145 @@
+import { act, fireEvent, render, waitFor } from "@testing-library/react";
+import { ReactFlowProvider, useReactFlow } from "@xyflow/react";
+import { useEffect } from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { Binding, ComponentSpec, Task } from "@/models/componentSpec";
+import { KeyboardStore } from "@/routes/v2/shared/store/keyboardStore";
+
+import { FlowCanvas } from "./FlowCanvas";
+
+let keyboard: KeyboardStore;
+let spec: ComponentSpec;
+const undoGroup = vi.fn((_label: string, apply: () => void) => apply());
+const clearSelection = vi.fn();
+const clearMultiSelection = vi.fn();
+
+vi.mock("@/routes/v2/shared/store/SharedStoreContext", () => ({
+  useSharedStores: () => ({
+    keyboard,
+    editor: { clearSelection, clearMultiSelection },
+    navigation: { parentContext: undefined },
+  }),
+}));
+vi.mock("@/routes/v2/pages/Editor/store/EditorSessionContext", () => ({
+  useEditorSession: () => ({ undo: { withGroup: undoGroup } }),
+}));
+vi.mock("@/routes/v2/shared/nodes/NodeRegistryContext", () => ({
+  useNodeRegistry: () => ({
+    getNodeTypes: () => ({}),
+    getEdgeTypes: () => ({}),
+    getByNodeId: () => ({
+      entityType: "task",
+      getPosition: () => ({ x: 0, y: 0 }),
+    }),
+  }),
+}));
+vi.mock("@/routes/v2/shared/hooks/useFlowCanvasState", () => ({
+  useFlowCanvasState: () => ({
+    displayNodes: [
+      {
+        id: "task_1",
+        position: { x: 0, y: 0 },
+        data: { label: "Selected task" },
+        selected: true,
+      },
+    ],
+    displayEdges: [
+      {
+        id: "edge_binding_1",
+        source: "task_1",
+        target: "task_1",
+        selected: true,
+      },
+    ],
+    selectionBehavior: {},
+  }),
+}));
+vi.mock("@/routes/v2/shared/components/SubgraphBreadcrumbs", () => ({
+  SubgraphBreadcrumbs: () => null,
+}));
+vi.mock("./components/CanvasUndoRedo", () => ({ CanvasUndoRedo: () => null }));
+vi.mock("./components/FloatingSelectionToolbar", () => ({
+  FloatingSelectionToolbar: () => null,
+}));
+vi.mock("./hooks/useDropBehavior", () => ({ useDropBehavior: () => ({}) }));
+
+let deleteProgrammatically: () => Promise<unknown>;
+function FlowProbe() {
+  const flow = useReactFlow();
+  useEffect(() => {
+    deleteProgrammatically = () =>
+      flow.deleteElements({ nodes: [{ id: "task_1" }] });
+  }, [flow]);
+  return null;
+}
+function Canvas() {
+  return (
+    <ReactFlowProvider>
+      <FlowCanvas spec={spec} />
+      <FlowProbe />
+    </ReactFlowProvider>
+  );
+}
+
+async function press(key: string) {
+  await act(async () => {
+    fireEvent.keyDown(document.body, { key, code: key });
+  });
+  await act(async () => {
+    fireEvent.keyUp(document.body, { key, code: key });
+  });
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  vi.stubGlobal(
+    "ResizeObserver",
+    class {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    },
+  );
+  keyboard = new KeyboardStore();
+  spec = new ComponentSpec({ name: "Pipeline" });
+  spec.addTask(
+    new Task({ $id: "task_1", name: "Selected task", componentRef: {} }),
+  );
+  spec.addBinding(
+    new Binding({
+      $id: "binding_1",
+      sourceEntityId: "task_1",
+      sourcePortName: "output",
+      targetEntityId: "task_1",
+      targetPortName: "input",
+    }),
+  );
+});
+
+describe("real ReactFlow keyboard activity", () => {
+  it.each(["Delete", "Backspace"])(
+    "ignores %s while the editor is not listening and deletes once it is",
+    async (key) => {
+      render(<Canvas />);
+
+      await press(key);
+      expect(spec.tasks).toHaveLength(1);
+      expect(spec.bindings).toHaveLength(1);
+
+      act(() => keyboard.setListening(true));
+      await press(key);
+      await waitFor(() => expect(spec.tasks).toHaveLength(0));
+      expect(spec.bindings).toHaveLength(0);
+    },
+  );
+
+  it("keeps deliberate programmatic/agent deletion available while not listening", async () => {
+    render(<Canvas />);
+    await act(async () => {
+      await deleteProgrammatically();
+    });
+    expect(spec.tasks).toHaveLength(0);
+    expect(spec.bindings).toHaveLength(0);
+  });
+});
diff --git a/src/routes/v2/pages/Editor/components/FlowCanvas/FlowCanvas.tsx b/src/routes/v2/pages/Editor/components/FlowCanvas/FlowCanvas.tsx
index bcf3c5bbb8..fdc25716e1 100644
--- a/src/routes/v2/pages/Editor/components/FlowCanvas/FlowCanvas.tsx
+++ b/src/routes/v2/pages/Editor/components/FlowCanvas/FlowCanvas.tsx
@@ -116,7 +116,11 @@ export const FlowCanvas = observer(function FlowCanvas({
         onViewportChange={handleViewportChange}
         onBeforeDelete={onBeforeDelete}
         connectionLineComponent={ConnectionLine}
-        deleteKeyCode={["Delete", "Backspace"]}
+        deleteKeyCode={keyboard.listening ? ["Delete", "Backspace"] : null}
+        selectionKeyCode={keyboard.listening ? undefined : null}
+        multiSelectionKeyCode={keyboard.listening ? undefined : null}
+        panActivationKeyCode={keyboard.listening ? undefined : null}
+        zoomActivationKeyCode={keyboard.listening ? undefined : null}
         className={cn(
           shiftKeyPressed && !isConnecting && "cursor-crosshair",
           !isDetailedView && "connections-disabled",
diff --git a/src/routes/v2/pages/Tangent/components/AssetsWindowContent.tsx b/src/routes/v2/pages/Tangent/components/AssetsWindowContent.tsx
index 4eaac8eaba..6b1e5c6d20 100644
--- a/src/routes/v2/pages/Tangent/components/AssetsWindowContent.tsx
+++ b/src/routes/v2/pages/Tangent/components/AssetsWindowContent.tsx
@@ -13,6 +13,7 @@ export const AssetsWindowContent = observer(function AssetsWindowContent() {
   function handleOpenAsset(asset: EmbedAsset) {
     store.selectAsset(asset);
     if (asset.kind !== "trigger") {
+      store.showWorkarea();
       store.openArtifactTab(asset.url, asset.title);
     }
   }
diff --git a/src/routes/v2/pages/Tangent/components/CollapsedWorkareaRail.tsx b/src/routes/v2/pages/Tangent/components/CollapsedWorkareaRail.tsx
new file mode 100644
index 0000000000..2f6b216c91
--- /dev/null
+++ b/src/routes/v2/pages/Tangent/components/CollapsedWorkareaRail.tsx
@@ -0,0 +1,107 @@
+import { observer } from "mobx-react-lite";
+import { type Ref, useEffect, useRef, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Icon, type IconName } from "@/components/ui/icon";
+import { BlockStack } from "@/components/ui/layout";
+import { VerticalResizeHandle } from "@/components/ui/resize-handle";
+import { useTangentProject } from "@/routes/v2/pages/Tangent/context/TangentProjectContext";
+import {
+  MIN_WORKAREA_WIDTH,
+  WORKAREA_ID,
+} from "@/routes/v2/pages/Tangent/layout";
+import { workareaTabIcon } from "@/routes/v2/pages/Tangent/workarea/workareaTabIcon";
+import {
+  COLLAPSED_DOCK_AREA_WIDTH,
+  DOCK_AREA_EXPAND_SNAP_THRESHOLD,
+} from "@/routes/v2/shared/windows/types";
+
+interface RailButtonProps {
+  label: string;
+  icon: IconName;
+  onClick: () => void;
+  ref?: Ref<HTMLButtonElement>;
+}
+
+function RailButton({ label, icon, onClick, ref }: RailButtonProps) {
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      aria-label={label}
+      title={label}
+      className="size-7 text-muted-foreground hover:text-foreground"
+      onClick={onClick}
+    >
+      <Icon name={icon} size="sm" />
+    </Button>
+  );
+}
+
+export const CollapsedWorkareaRail = observer(function CollapsedWorkareaRail() {
+  const store = useTangentProject();
+  const [expandPreview, setExpandPreview] = useState(false);
+  const showButton = useRef<HTMLButtonElement | null>(null);
+
+  // Hiding the workarea strands any focus inside it; land it on the rail.
+  useEffect(() => {
+    const focused = document.activeElement;
+    const workarea = document.getElementById(WORKAREA_ID);
+    if (!focused || focused === document.body || workarea?.contains(focused))
+      showButton.current?.focus();
+  }, []);
+
+  const shouldExpand = (attemptedWidth: number) =>
+    attemptedWidth >= DOCK_AREA_EXPAND_SNAP_THRESHOLD;
+
+  return (
+    <div
+      className="relative flex shrink-0 flex-col border-l border-border bg-muted"
+      style={{ width: COLLAPSED_DOCK_AREA_WIDTH }}
+    >
+      {expandPreview && (
+        <div
+          aria-hidden="true"
+          className="pointer-events-none absolute inset-y-0 right-0 z-10 border-l border-primary/40 bg-card/75 shadow-2xl ring-1 ring-primary/30"
+          style={{ width: MIN_WORKAREA_WIDTH }}
+        />
+      )}
+      <BlockStack
+        gap="1"
+        align="center"
+        className="hide-scrollbar relative z-20 min-h-0 flex-1 overflow-x-hidden overflow-y-auto px-0.5 py-1"
+      >
+        <RailButton
+          ref={showButton}
+          label="Show workarea"
+          icon="PanelRightOpen"
+          onClick={() => store.showWorkarea()}
+        />
+        {store.workareaTabs.map((tab) => (
+          <RailButton
+            key={tab.id}
+            label={`Show ${tab.title}`}
+            icon={workareaTabIcon(tab)}
+            onClick={() => {
+              store.selectWorkareaTab(tab.id);
+              store.showWorkarea();
+            }}
+          />
+        ))}
+      </BlockStack>
+      <VerticalResizeHandle
+        side="left"
+        label="Expand workarea"
+        minWidth={COLLAPSED_DOCK_AREA_WIDTH}
+        maxWidth={COLLAPSED_DOCK_AREA_WIDTH}
+        onDoubleClick={() => store.showWorkarea()}
+        onResize={(width) => setExpandPreview(shouldExpand(width))}
+        onResizeEnd={(width) => {
+          setExpandPreview(false);
+          if (shouldExpand(width)) store.showWorkarea();
+        }}
+      />
+    </div>
+  );
+});
diff --git a/src/routes/v2/pages/Tangent/components/DynamicWorkarea.test.tsx b/src/routes/v2/pages/Tangent/components/DynamicWorkarea.test.tsx
new file mode 100644
index 0000000000..7376416d02
--- /dev/null
+++ b/src/routes/v2/pages/Tangent/components/DynamicWorkarea.test.tsx
@@ -0,0 +1,123 @@
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { observer } from "mobx-react-lite";
+import { useEffect } from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { TangentProjectStore } from "@/routes/v2/pages/Tangent/store/TangentProjectStore";
+import type {
+  WorkareaHostProps,
+  WorkareaTab,
+} from "@/routes/v2/pages/Tangent/workarea/types";
+import { idIdentity } from "@/services/projects/resourceTarget";
+
+import { CollapsedWorkareaRail } from "./CollapsedWorkareaRail";
+import { DynamicWorkarea } from "./DynamicWorkarea";
+
+let store: TangentProjectStore;
+const unmounted = vi.fn();
+const listening = new Map<string, boolean>();
+
+vi.mock("@/routes/v2/pages/Tangent/context/TangentProjectContext", () => ({
+  useTangentProject: () => store,
+}));
+vi.mock("@/routes/v2/pages/Tangent/workarea/registry", () => ({
+  registerWorkareaKind: vi.fn(),
+  getWorkareaKind: () => ({
+    icon: "FileText",
+    keepMounted: true,
+    render: (tab: WorkareaTab, host: WorkareaHostProps) => (
+      <TestView tab={tab} host={host} />
+    ),
+  }),
+}));
+
+// Stands in for an editor's shortcut listener, which follows `isActive`.
+function TestView({
+  tab,
+  host,
+}: {
+  tab: WorkareaTab;
+  host: WorkareaHostProps;
+}) {
+  listening.set(tab.title, host.isActive);
+  useEffect(() => () => unmounted(tab.id), [tab.id]);
+  return (
+    <input data-testid={`view-${tab.title}`} defaultValue="work in progress" />
+  );
+}
+
+function open(title: string) {
+  return store.openResolvedView({
+    title,
+    target: { type: "pipeline", identity: idIdentity(title) },
+  });
+}
+
+const Workarea = observer(function Workarea() {
+  return (
+    <>
+      <DynamicWorkarea />
+      {store.workareaCollapsed && <CollapsedWorkareaRail />}
+    </>
+  );
+});
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  listening.clear();
+  store = new TangentProjectStore("project-1");
+  store.setDefaultSessionId("session-1");
+});
+
+describe("collapsing the workarea to its rail", () => {
+  it("keeps the open view's work while collapsed and reopens on its tab", () => {
+    open("First");
+    open("Second");
+    render(<Workarea />);
+    const first = screen.getByTestId("view-First");
+    fireEvent.change(first, { target: { value: "edited canvas" } });
+    first.focus();
+
+    act(() => store.hideWorkarea());
+    expect(first).not.toBeVisible();
+    expect(listening.get("Second")).toBe(false);
+    expect(screen.getByRole("button", { name: "Show workarea" })).toHaveFocus();
+    expect(unmounted).not.toHaveBeenCalled();
+
+    fireEvent.click(screen.getByRole("button", { name: "Show First" }));
+    expect(first).toBeVisible();
+    expect(first).toHaveValue("edited canvas");
+    expect(listening.get("First")).toBe(true);
+  });
+
+  it("reopens when the rail's edge is double-clicked", () => {
+    open("Pipeline");
+    store.hideWorkarea();
+    render(<Workarea />);
+
+    fireEvent.doubleClick(
+      screen.getByRole("separator", { name: "Expand workarea" }),
+    );
+
+    expect(screen.getByTestId("view-Pipeline")).toBeVisible();
+  });
+
+  it("opens an agent's new tab while collapsed without reopening or taking focus", () => {
+    store.hideWorkarea();
+    render(
+      <>
+        <input aria-label="Chat composer" />
+        <Workarea />
+      </>,
+    );
+    const composer = screen.getByLabelText("Chat composer");
+    composer.focus();
+
+    act(() => {
+      open("Agent pipeline");
+    });
+
+    expect(screen.getByTestId("view-Agent pipeline")).not.toBeVisible();
+    expect(composer).toHaveFocus();
+  });
+});
diff --git a/src/routes/v2/pages/Tangent/components/DynamicWorkarea.tsx b/src/routes/v2/pages/Tangent/components/DynamicWorkarea.tsx
index 0be5998d33..220669770d 100644
--- a/src/routes/v2/pages/Tangent/components/DynamicWorkarea.tsx
+++ b/src/routes/v2/pages/Tangent/components/DynamicWorkarea.tsx
@@ -12,9 +12,17 @@ import { Text } from "@/components/ui/typography";
 import { cn } from "@/lib/utils";
 import { CloseableTabTrigger } from "@/routes/v2/pages/Tangent/components/CloseableTabTrigger";
 import { useTangentProject } from "@/routes/v2/pages/Tangent/context/TangentProjectContext";
-import { MIN_WORKAREA_WIDTH } from "@/routes/v2/pages/Tangent/layout";
+import {
+  MIN_WORKAREA_WIDTH,
+  WORKAREA_ID,
+} from "@/routes/v2/pages/Tangent/layout";
 import { getWorkareaKind } from "@/routes/v2/pages/Tangent/workarea/registry";
 import type { WorkareaHostProps } from "@/routes/v2/pages/Tangent/workarea/types";
+import { workareaTabIcon } from "@/routes/v2/pages/Tangent/workarea/workareaTabIcon";
+
+interface DynamicWorkareaProps {
+  collapsePreview?: boolean;
+}
 
 /**
  * The right-hand "Dynamic Workarea": a tabbed surface people and Tangent agents
@@ -25,14 +33,18 @@ import type { WorkareaHostProps } from "@/routes/v2/pages/Tangent/workarea/types
  * A `keepMounted` view stays mounted while inactive (hidden via CSS) so a live
  * view survives background switches; other views mount only when active.
  */
-export const DynamicWorkarea = observer(function DynamicWorkarea() {
+export const DynamicWorkarea = observer(function DynamicWorkarea({
+  collapsePreview = false,
+}: DynamicWorkareaProps) {
   const store = useTangentProject();
   const activeSessionId = store.activeSessionId;
   const workareaTabs = store.workareaTabs;
   const activeWorkareaTabId = store.activeWorkareaTabId;
   function hostPropsFor(tabId: string): WorkareaHostProps {
+    const isSelected = tabId === activeWorkareaTabId;
     return {
-      isActive: tabId === activeWorkareaTabId,
+      isSelected,
+      isActive: !store.workareaCollapsed && isSelected,
       projectId: store.projectId,
       sessionId: activeSessionId,
       registerTabStore: (id, tabStore) => store.registerTabStore(id, tabStore),
@@ -51,9 +63,19 @@ export const DynamicWorkarea = observer(function DynamicWorkarea() {
 
   return (
     <div
+      id={WORKAREA_ID}
+      hidden={store.workareaCollapsed}
       className="relative flex h-full min-w-0 flex-1 flex-col border-l border-border bg-card"
       style={{ minWidth: MIN_WORKAREA_WIDTH }}
     >
+      {collapsePreview && (
+        <div
+          aria-hidden="true"
+          className="pointer-events-none absolute inset-0 z-20 bg-background/60 backdrop-blur-[1px]"
+        >
+          <div className="absolute inset-y-0 right-0 w-9 border-l border-primary/40 bg-primary/15 shadow-xl" />
+        </div>
+      )}
       {workareaTabs.length > 0 ? (
         <Tabs
           value={activeWorkareaTabId ?? undefined}
@@ -71,7 +93,7 @@ export const DynamicWorkarea = observer(function DynamicWorkarea() {
                 key={tab.id}
                 value={tab.id}
                 title={tab.title}
-                icon={getWorkareaKind(tab.target.type)?.icon ?? "FileText"}
+                icon={workareaTabIcon(tab)}
                 onClose={() => store.closeWorkareaTab(tab.id)}
               />
             ))}
diff --git a/src/routes/v2/pages/Tangent/components/ProjectChatArea.tsx b/src/routes/v2/pages/Tangent/components/ProjectChatArea.tsx
index aaef549c97..182ed44776 100644
--- a/src/routes/v2/pages/Tangent/components/ProjectChatArea.tsx
+++ b/src/routes/v2/pages/Tangent/components/ProjectChatArea.tsx
@@ -55,7 +55,10 @@ export const ProjectChatArea = observer(function ProjectChatArea() {
         activeTab={store.chatActiveTab}
         onTabChange={(value) => store.setChatActiveTab(value)}
         onCloseTab={(id) => store.closeChatTab(id)}
-        onOpenArtifact={(url, title) => store.openArtifactTab(url, title)}
+        onOpenArtifact={(url, title) => {
+          store.showWorkarea();
+          store.openArtifactTab(url, title);
+        }}
         onSendPrompt={(content) => store.recordSessionPrompt(content)}
         onError={(message) => notify(message, "error")}
         headerAction={
diff --git a/src/routes/v2/pages/Tangent/components/ResourcesWindowContent.test.tsx b/src/routes/v2/pages/Tangent/components/ResourcesWindowContent.test.tsx
index 5b8c4803f5..60a1ff7b8e 100644
--- a/src/routes/v2/pages/Tangent/components/ResourcesWindowContent.test.tsx
+++ b/src/routes/v2/pages/Tangent/components/ResourcesWindowContent.test.tsx
@@ -10,11 +10,16 @@ import { useRemotePipelineNames } from "@/services/projects/useRemotePipelineNam
 import { ResourcesWindowContent } from "./ResourcesWindowContent";
 
 const openWorkareaTarget = vi.fn();
+const showWorkarea = vi.fn();
 const deleteResource = vi.fn();
 const saveInstructions = vi.fn();
 
 vi.mock("@/routes/v2/pages/Tangent/context/TangentProjectContext", () => ({
-  useTangentProject: () => ({ projectId: "project-1", openWorkareaTarget }),
+  useTangentProject: () => ({
+    projectId: "project-1",
+    openWorkareaTarget,
+    showWorkarea,
+  }),
 }));
 
 vi.mock("@/services/projects/useProjectResources", () => ({
@@ -194,6 +199,7 @@ describe("ResourcesWindowContent", () => {
 
     await user.click(screen.getByTestId("open-resource-r-2"));
 
+    expect(showWorkarea).toHaveBeenCalled();
     expect(openWorkareaTarget).toHaveBeenCalledWith(
       { type: "document", identity: "id/r-2" },
       "Model card",
@@ -220,6 +226,7 @@ describe("ResourcesWindowContent", () => {
 
     await user.click(screen.getByTestId("open-resource-r-5"));
 
+    expect(showWorkarea).toHaveBeenCalled();
     expect(openWorkareaTarget).toHaveBeenCalledWith(
       { type: "document", identity: "id/r-5" },
       "Loose note",
@@ -242,6 +249,7 @@ describe("ResourcesWindowContent", () => {
     expect(screen.getByText("Hello World")).toBeInTheDocument();
     expect(screen.getByText("Pipeline")).toBeInTheDocument();
     await userEvent.setup().click(screen.getByTestId("open-resource-r-5"));
+    expect(showWorkarea).toHaveBeenCalled();
     expect(openWorkareaTarget).toHaveBeenCalledWith(
       { type: "pipeline", identity: "remote/uuid-1" },
       "Hello World",
@@ -263,6 +271,7 @@ describe("ResourcesWindowContent", () => {
       screen.queryByText("Make a basic hello world pipeline"),
     ).not.toBeInTheDocument();
     await userEvent.setup().click(screen.getByTestId("open-resource-r-5"));
+    expect(showWorkarea).toHaveBeenCalled();
     expect(openWorkareaTarget).toHaveBeenCalledWith(
       { type: "pipeline", identity: "remote/uuid-1" },
       "Workspace secret hello world",
@@ -309,6 +318,7 @@ describe("ResourcesWindowContent", () => {
 
     await user.click(screen.getByTestId("open-resource-r-7"));
 
+    expect(showWorkarea).toHaveBeenCalled();
     expect(openWorkareaTarget).toHaveBeenCalledWith(
       { type: "pipeline", identity: "name/Churn model" },
       "Churn model",
diff --git a/src/routes/v2/pages/Tangent/components/ResourcesWindowContent.tsx b/src/routes/v2/pages/Tangent/components/ResourcesWindowContent.tsx
index 3d09873561..84bdbea220 100644
--- a/src/routes/v2/pages/Tangent/components/ResourcesWindowContent.tsx
+++ b/src/routes/v2/pages/Tangent/components/ResourcesWindowContent.tsx
@@ -176,6 +176,7 @@ export function ResourcesWindowContent() {
   async function handleOpenResource(resource: ProjectResourceItem) {
     if (!resource.target) return;
     try {
+      store.showWorkarea();
       await store.openWorkareaTarget(resource.target, resource.name);
     } catch (error) {
       notify(getErrorMessage(error), "error");
diff --git a/src/routes/v2/pages/Tangent/components/RunsWindowContent.test.tsx b/src/routes/v2/pages/Tangent/components/RunsWindowContent.test.tsx
index 0883f07689..5373a2a97a 100644
--- a/src/routes/v2/pages/Tangent/components/RunsWindowContent.test.tsx
+++ b/src/routes/v2/pages/Tangent/components/RunsWindowContent.test.tsx
@@ -11,9 +11,14 @@ import {
 import { RunsWindowContent } from "./RunsWindowContent";
 
 const openWorkareaTarget = vi.fn();
+const showWorkarea = vi.fn();
 
 vi.mock("@/routes/v2/pages/Tangent/context/TangentProjectContext", () => ({
-  useTangentProject: () => ({ projectId: "project-1", openWorkareaTarget }),
+  useTangentProject: () => ({
+    projectId: "project-1",
+    openWorkareaTarget,
+    showWorkarea,
+  }),
 }));
 
 vi.mock("@/services/projects/useProjectRuns", () => ({
@@ -79,6 +84,7 @@ describe("RunsWindowContent", () => {
     render(<RunsWindowContent />);
     await user.click(screen.getByTestId("open-run-run-7"));
 
+    expect(showWorkarea).toHaveBeenCalled();
     expect(openWorkareaTarget).toHaveBeenCalledWith(
       { type: "run", identity: "id/run-7" },
       "Churn model",
@@ -101,6 +107,7 @@ describe("RunsWindowContent", () => {
 
       expect(window.open).toHaveBeenCalledWith("/runs/run-7", "_blank");
       expect(openWorkareaTarget).not.toHaveBeenCalled();
+      expect(showWorkarea).not.toHaveBeenCalled();
     },
   );
 
@@ -111,6 +118,7 @@ describe("RunsWindowContent", () => {
     render(<RunsWindowContent />);
     await user.click(screen.getByTestId("open-run-run-8"));
 
+    expect(showWorkarea).toHaveBeenCalled();
     expect(openWorkareaTarget).toHaveBeenCalledWith(
       { type: "run", identity: "id/run-8" },
       "Unnamed pipeline",
diff --git a/src/routes/v2/pages/Tangent/components/RunsWindowContent.tsx b/src/routes/v2/pages/Tangent/components/RunsWindowContent.tsx
index 74f947315a..13849439b2 100644
--- a/src/routes/v2/pages/Tangent/components/RunsWindowContent.tsx
+++ b/src/routes/v2/pages/Tangent/components/RunsWindowContent.tsx
@@ -38,6 +38,7 @@ export function RunsWindowContent() {
     }
     const title = run.pipelineName ?? UNNAMED_PIPELINE;
     try {
+      store.showWorkarea();
       await store.openWorkareaTarget(
         { type: "run", identity: idIdentity(run.id) },
         title,
diff --git a/src/routes/v2/pages/Tangent/components/TangentProjectWorkspace.tsx b/src/routes/v2/pages/Tangent/components/TangentProjectWorkspace.tsx
index e7d4617603..0c93f75f85 100644
--- a/src/routes/v2/pages/Tangent/components/TangentProjectWorkspace.tsx
+++ b/src/routes/v2/pages/Tangent/components/TangentProjectWorkspace.tsx
@@ -1,41 +1,44 @@
 import { observer } from "mobx-react-lite";
+import { useState } from "react";
 
 import { InlineStack } from "@/components/ui/layout";
-import { VerticalResizeHandle } from "@/components/ui/resize-handle";
+import { cn } from "@/lib/utils";
 import { useTangentProject } from "@/routes/v2/pages/Tangent/context/TangentProjectContext";
 import { useChatPaneWidth } from "@/routes/v2/pages/Tangent/hooks/useChatPaneWidth";
 import { useNarrowLayoutDock } from "@/routes/v2/pages/Tangent/hooks/useNarrowLayoutDock";
 import { useTangentProjectWindows } from "@/routes/v2/pages/Tangent/hooks/useTangentProjectWindows";
 import { useTangentSessionParam } from "@/routes/v2/pages/Tangent/hooks/useTangentSessionParam";
-import { MIN_CHAT_WIDTH } from "@/routes/v2/pages/Tangent/layout";
 import { useSharedStores } from "@/routes/v2/shared/store/SharedStoreContext";
 import { DockArea } from "@/routes/v2/shared/windows/DockArea";
 import { COLLAPSED_DOCK_AREA_WIDTH } from "@/routes/v2/shared/windows/types";
 import { WindowContainer } from "@/routes/v2/shared/windows/WindowContainer";
 import { useWindowPersistence } from "@/routes/v2/shared/windows/windowPersistence";
 
+import { CollapsedWorkareaRail } from "./CollapsedWorkareaRail";
 import { DynamicWorkarea } from "./DynamicWorkarea";
 import { ProjectChatArea } from "./ProjectChatArea";
 import { ProjectHeader } from "./ProjectHeader";
 import { TangentProjectAgentProvider } from "./TangentProjectAgentProvider";
+import { WorkareaDivider } from "./WorkareaDivider";
 
 export const TangentProjectWorkspace = observer(
   function TangentProjectWorkspace() {
     useWindowPersistence("tangent-project");
     useTangentProjectWindows();
-    useNarrowLayoutDock();
     const store = useTangentProject();
+    useNarrowLayoutDock(store.workareaCollapsed);
     useTangentSessionParam(store);
     const { windows } = useSharedStores();
     const dock = windows.getDockAreaConfig("left");
+    const dockWidth = dock.collapsed ? COLLAPSED_DOCK_AREA_WIDTH : dock.width;
     const {
       rowRef,
+      rowMeasured,
       width: chatWidth,
       maxWidth: maxChatWidth,
       requestWidth,
-    } = useChatPaneWidth(
-      dock.collapsed ? COLLAPSED_DOCK_AREA_WIDTH : dock.width,
-    );
+    } = useChatPaneWidth(dockWidth);
+    const [collapsePreview, setCollapsePreview] = useState(false);
 
     return (
       <TangentProjectAgentProvider sessionId={store.activeSessionId}>
@@ -43,25 +46,31 @@ export const TangentProjectWorkspace = observer(
           <ProjectHeader />
           <InlineStack
             ref={rowRef}
-            className="min-h-0 flex-1"
+            className="min-h-0 min-w-0 flex-1"
             blockAlign="stretch"
             wrap="nowrap"
           >
             <DockArea side="left" />
             <div
-              className="relative flex min-h-0 shrink-0 flex-col"
-              style={{ width: chatWidth }}
+              className={cn(
+                "relative flex min-h-0 min-w-0 flex-col",
+                store.workareaCollapsed ? "w-0 flex-1" : "shrink-0",
+              )}
+              style={{ width: store.workareaCollapsed ? undefined : chatWidth }}
             >
-              <VerticalResizeHandle
-                side="right"
-                minWidth={MIN_CHAT_WIDTH}
-                maxWidth={maxChatWidth}
-                onResizeEnd={requestWidth}
-              />
+              {!store.workareaCollapsed && (
+                <WorkareaDivider
+                  rowMeasured={rowMeasured}
+                  maxChatWidth={maxChatWidth}
+                  onResize={requestWidth}
+                  onCollapsePreview={setCollapsePreview}
+                />
+              )}
               <ProjectChatArea />
               <WindowContainer />
             </div>
-            <DynamicWorkarea />
+            <DynamicWorkarea collapsePreview={collapsePreview} />
+            {store.workareaCollapsed && <CollapsedWorkareaRail />}
           </InlineStack>
         </div>
       </TangentProjectAgentProvider>
diff --git a/src/routes/v2/pages/Tangent/components/WorkareaDivider.test.tsx b/src/routes/v2/pages/Tangent/components/WorkareaDivider.test.tsx
new file mode 100644
index 0000000000..bc8bf8c2f5
--- /dev/null
+++ b/src/routes/v2/pages/Tangent/components/WorkareaDivider.test.tsx
@@ -0,0 +1,64 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { TangentProjectStore } from "@/routes/v2/pages/Tangent/store/TangentProjectStore";
+
+import { WorkareaDivider } from "./WorkareaDivider";
+
+let store: TangentProjectStore;
+const resize = vi.fn();
+
+vi.mock("@/routes/v2/pages/Tangent/context/TangentProjectContext", () => ({
+  useTangentProject: () => store,
+}));
+
+const MAX_CHAT = 760;
+
+function renderDivider() {
+  render(
+    <div>
+      <WorkareaDivider
+        rowMeasured
+        maxChatWidth={MAX_CHAT}
+        onResize={resize}
+        onCollapsePreview={vi.fn()}
+      />
+    </div>,
+  );
+  return screen.getByRole("separator", { name: "Resize workarea" });
+}
+
+// jsdom has no layout, so a drag starts from a 0px-wide chat pane and the
+// pointer's x position is the width the user is asking for.
+function dragTo(divider: HTMLElement, x: number) {
+  fireEvent.mouseDown(divider, { clientX: 0 });
+  fireEvent.mouseMove(document, { clientX: x });
+  fireEvent.mouseUp(document, { clientX: x });
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  store = new TangentProjectStore("project-1");
+});
+
+describe("chat/workarea divider", () => {
+  it("collapses the workarea on double-click", () => {
+    fireEvent.doubleClick(renderDivider());
+
+    expect(store.workareaCollapsed).toBe(true);
+  });
+
+  it("snaps the workarea shut when dragged past where it stops", () => {
+    dragTo(renderDivider(), MAX_CHAT + 40);
+
+    expect(store.workareaCollapsed).toBe(true);
+    expect(resize).not.toHaveBeenCalled();
+  });
+
+  it("only resizes the chat on a shorter drag", () => {
+    dragTo(renderDivider(), 600);
+
+    expect(store.workareaCollapsed).toBe(false);
+    expect(resize).toHaveBeenCalledWith(600);
+  });
+});
diff --git a/src/routes/v2/pages/Tangent/components/WorkareaDivider.tsx b/src/routes/v2/pages/Tangent/components/WorkareaDivider.tsx
new file mode 100644
index 0000000000..25d782730a
--- /dev/null
+++ b/src/routes/v2/pages/Tangent/components/WorkareaDivider.tsx
@@ -0,0 +1,40 @@
+import { VerticalResizeHandle } from "@/components/ui/resize-handle";
+import { useTangentProject } from "@/routes/v2/pages/Tangent/context/TangentProjectContext";
+import {
+  MIN_CHAT_WIDTH,
+  snapsWorkareaShut,
+} from "@/routes/v2/pages/Tangent/layout";
+
+interface WorkareaDividerProps {
+  rowMeasured: boolean;
+  maxChatWidth: number;
+  onResize: (chatWidth: number) => void;
+  onCollapsePreview: (snapping: boolean) => void;
+}
+
+export function WorkareaDivider({
+  rowMeasured,
+  maxChatWidth,
+  onResize,
+  onCollapsePreview,
+}: WorkareaDividerProps) {
+  const store = useTangentProject();
+  const snapsShut = (attempted: number) =>
+    snapsWorkareaShut(rowMeasured, maxChatWidth, attempted);
+
+  return (
+    <VerticalResizeHandle
+      side="right"
+      label="Resize workarea"
+      minWidth={MIN_CHAT_WIDTH}
+      maxWidth={maxChatWidth}
+      onDoubleClick={() => store.hideWorkarea()}
+      onResize={(width) => onCollapsePreview(snapsShut(width))}
+      onResizeEnd={(width) => {
+        onCollapsePreview(false);
+        if (snapsShut(width)) store.hideWorkarea();
+        else onResize(width);
+      }}
+    />
+  );
+}
diff --git a/src/routes/v2/pages/Tangent/components/tangentAnchorProtocols.test.tsx b/src/routes/v2/pages/Tangent/components/tangentAnchorProtocols.test.tsx
index 33263fbbd6..997bc90f5e 100644
--- a/src/routes/v2/pages/Tangent/components/tangentAnchorProtocols.test.tsx
+++ b/src/routes/v2/pages/Tangent/components/tangentAnchorProtocols.test.tsx
@@ -5,10 +5,11 @@ import { beforeEach, describe, expect, it, vi } from "vitest";
 import { tangentAnchorProtocols } from "./tangentAnchorProtocols";
 
 const openWorkareaTarget = vi.fn();
+const showWorkarea = vi.fn();
 const notify = vi.fn();
 
 vi.mock("@/routes/v2/pages/Tangent/context/TangentProjectContext", () => ({
-  useTangentProject: () => ({ openWorkareaTarget }),
+  useTangentProject: () => ({ openWorkareaTarget, showWorkarea }),
 }));
 
 vi.mock("@/hooks/useToastNotification", () => ({
@@ -43,6 +44,7 @@ describe("tangentAnchorProtocols run anchor", () => {
     render(<RunAnchor {...anchorProps()} />);
     fireEvent.click(screen.getByRole("button"));
 
+    expect(showWorkarea).toHaveBeenCalled();
     expect(openWorkareaTarget).toHaveBeenCalledWith(
       { type: "run", identity: "id/run_1" },
       "Training run",
diff --git a/src/routes/v2/pages/Tangent/components/tangentAnchorProtocols.tsx b/src/routes/v2/pages/Tangent/components/tangentAnchorProtocols.tsx
index a5ac2657a7..0a15045808 100644
--- a/src/routes/v2/pages/Tangent/components/tangentAnchorProtocols.tsx
+++ b/src/routes/v2/pages/Tangent/components/tangentAnchorProtocols.tsx
@@ -36,6 +36,7 @@ function RunAnchor({ path, label }: AnchorProtocolProps) {
   async function openRun() {
     if (!target) return;
     try {
+      store.showWorkarea();
       await store.openWorkareaTarget(target, label);
     } catch (error) {
       notify(getErrorMessage(error), "error");
diff --git a/src/routes/v2/pages/Tangent/hooks/useChatPaneWidth.ts b/src/routes/v2/pages/Tangent/hooks/useChatPaneWidth.ts
index f3bd93899e..012d7db0a8 100644
--- a/src/routes/v2/pages/Tangent/hooks/useChatPaneWidth.ts
+++ b/src/routes/v2/pages/Tangent/hooks/useChatPaneWidth.ts
@@ -35,6 +35,7 @@ export function useChatPaneWidth(dockWidth: number) {
 
   return {
     rowRef,
+    rowMeasured: rowWidth !== UNMEASURED,
     maxWidth,
     width: Math.min(requestedWidth, maxWidth),
     requestWidth: (attempted: number) =>
diff --git a/src/routes/v2/pages/Tangent/hooks/useNarrowLayoutDock.test.tsx b/src/routes/v2/pages/Tangent/hooks/useNarrowLayoutDock.test.tsx
index ca1a37b505..fbff6445bd 100644
--- a/src/routes/v2/pages/Tangent/hooks/useNarrowLayoutDock.test.tsx
+++ b/src/routes/v2/pages/Tangent/hooks/useNarrowLayoutDock.test.tsx
@@ -1,7 +1,11 @@
 import { act, renderHook } from "@testing-library/react";
+import { observable, runInAction } from "mobx";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
-import { NARROW_LAYOUT_WIDTH } from "@/routes/v2/pages/Tangent/layout";
+import {
+  NARROW_LAYOUT_WIDTH,
+  narrowLayoutWidth,
+} from "@/routes/v2/pages/Tangent/layout";
 import { useSharedStores } from "@/routes/v2/shared/store/SharedStoreContext";
 
 import { useNarrowLayoutDock } from "./useNarrowLayoutDock";
@@ -62,6 +66,14 @@ describe("useNarrowLayoutDock", () => {
     expect(setDockAreaCollapsed).toHaveBeenLastCalledWith("left", false);
   });
 
+  it("keeps the dock open where only a collapsed workarea leaves room for it", () => {
+    window.innerWidth = (narrowLayoutWidth(true) + NARROW_LAYOUT_WIDTH) / 2;
+
+    renderHook(() => useNarrowLayoutDock(true));
+
+    expect(setDockAreaCollapsed).not.toHaveBeenCalled();
+  });
+
   /** Reopening a dock someone shut reads as the app fighting the mouse. */
   it("leaves a dock the user collapsed alone", () => {
     collapsed = true;
@@ -72,4 +84,28 @@ describe("useNarrowLayoutDock", () => {
 
     expect(setDockAreaCollapsed).not.toHaveBeenCalledWith("left", false);
   });
+
+  it("does not reopen a dock the user closed after reopening it by hand", () => {
+    const dock = observable({ collapsed: false });
+    setDockAreaCollapsed.mockImplementation((_side, next) => {
+      dock.collapsed = next;
+    });
+    vi.mocked(useSharedStores).mockReturnValue({
+      windows: { getDockAreaConfig: () => dock, setDockAreaCollapsed },
+    } as unknown as ReturnType<typeof useSharedStores>);
+    window.innerWidth = (narrowLayoutWidth(true) + NARROW_LAYOUT_WIDTH) / 2;
+    const { rerender } = renderHook(
+      ({ workareaCollapsed }) => useNarrowLayoutDock(workareaCollapsed),
+      { initialProps: { workareaCollapsed: false } },
+    );
+    expect(dock.collapsed).toBe(true);
+
+    runInAction(() => (dock.collapsed = false));
+    rerender({ workareaCollapsed: true });
+    runInAction(() => (dock.collapsed = true));
+    rerender({ workareaCollapsed: false });
+    rerender({ workareaCollapsed: true });
+
+    expect(dock.collapsed).toBe(true);
+  });
 });
diff --git a/src/routes/v2/pages/Tangent/hooks/useNarrowLayoutDock.ts b/src/routes/v2/pages/Tangent/hooks/useNarrowLayoutDock.ts
index af6eba36ec..c7ac59bd10 100644
--- a/src/routes/v2/pages/Tangent/hooks/useNarrowLayoutDock.ts
+++ b/src/routes/v2/pages/Tangent/hooks/useNarrowLayoutDock.ts
@@ -1,6 +1,7 @@
+import { reaction } from "mobx";
 import { useEffect, useRef } from "react";
 
-import { NARROW_LAYOUT_WIDTH } from "@/routes/v2/pages/Tangent/layout";
+import { narrowLayoutWidth } from "@/routes/v2/pages/Tangent/layout";
 import { useSharedStores } from "@/routes/v2/shared/store/SharedStoreContext";
 
 /**
@@ -8,13 +9,26 @@ import { useSharedStores } from "@/routes/v2/shared/store/SharedStoreContext";
  * themselves and then widened the window meant to keep it collapsed, and
  * reopening it under them reads as the app fighting the mouse.
  */
-export function useNarrowLayoutDock() {
+export function useNarrowLayoutDock(workareaCollapsed = false) {
   const { windows } = useSharedStores();
   const collapsedByUs = useRef(false);
 
+  // Once the dock is open again, by this hook or by hand, any later collapse
+  // is no longer ours to undo.
+  useEffect(
+    () =>
+      reaction(
+        () => windows.getDockAreaConfig("left").collapsed,
+        (collapsed) => {
+          if (!collapsed) collapsedByUs.current = false;
+        },
+      ),
+    [windows],
+  );
+
   useEffect(() => {
     const apply = () => {
-      const narrow = window.innerWidth < NARROW_LAYOUT_WIDTH;
+      const narrow = window.innerWidth < narrowLayoutWidth(workareaCollapsed);
       const { collapsed } = windows.getDockAreaConfig("left");
 
       if (narrow && !collapsed) {
@@ -31,5 +45,5 @@ export function useNarrowLayoutDock() {
     apply();
     window.addEventListener("resize", apply);
     return () => window.removeEventListener("resize", apply);
-  }, [windows]);
+  }, [windows, workareaCollapsed]);
 }
diff --git a/src/routes/v2/pages/Tangent/hooks/usePrepareProjectArrival.test.tsx b/src/routes/v2/pages/Tangent/hooks/usePrepareProjectArrival.test.tsx
index e0e14af0d5..ade87b0b59 100644
--- a/src/routes/v2/pages/Tangent/hooks/usePrepareProjectArrival.test.tsx
+++ b/src/routes/v2/pages/Tangent/hooks/usePrepareProjectArrival.test.tsx
@@ -105,6 +105,7 @@ function makeStore() {
     isStartingSession: false,
     startSession: vi.fn().mockResolvedValue(true),
     openWorkareaTarget: vi.fn().mockResolvedValue(undefined),
+    showWorkarea: vi.fn(),
   } as unknown as TangentProjectStore;
 }
 
@@ -303,6 +304,19 @@ describe("usePrepareProjectArrival", () => {
     await waitFor(() => expect(store.openWorkareaTarget).toHaveBeenCalled());
   });
 
+  it("does not reveal again after pending arrival work can be manually collapsed", async () => {
+    const store = makeStore();
+    const pending = Promise.withResolvers<boolean>();
+    vi.mocked(store.startSession).mockReturnValue(pending.promise);
+    prepare(store);
+    await waitFor(() => expect(store.startSession).toHaveBeenCalled());
+    expect(store.showWorkarea).toHaveBeenCalledOnce();
+    vi.mocked(store.showWorkarea).mockClear();
+    await act(async () => pending.resolve(true));
+    await waitFor(() => expect(store.openWorkareaTarget).toHaveBeenCalled());
+    expect(store.showWorkarea).not.toHaveBeenCalled();
+  });
+
   it("leaves a project that already has a session alone", async () => {
     const store = makeStore();
 
diff --git a/src/routes/v2/pages/Tangent/hooks/usePrepareProjectArrival.ts b/src/routes/v2/pages/Tangent/hooks/usePrepareProjectArrival.ts
index 4cf37d9d19..9f0119d50e 100644
--- a/src/routes/v2/pages/Tangent/hooks/usePrepareProjectArrival.ts
+++ b/src/routes/v2/pages/Tangent/hooks/usePrepareProjectArrival.ts
@@ -116,6 +116,7 @@ export function usePrepareProjectArrival(
 
   const { mutate, isIdle } = useMutation({
     mutationFn: async (askedToOpen: WorkareaTarget | undefined) => {
+      if (askedToOpen || isEmpty) store.showWorkarea();
       const started = await store.startSession(
         starting && { ...starting, name: askedFor },
       );
diff --git a/src/routes/v2/pages/Tangent/layout.test.ts b/src/routes/v2/pages/Tangent/layout.test.ts
new file mode 100644
index 0000000000..b3fe026200
--- /dev/null
+++ b/src/routes/v2/pages/Tangent/layout.test.ts
@@ -0,0 +1,22 @@
+import { describe, expect, it } from "vitest";
+
+import { chatWidthCeiling } from "./hooks/useChatPaneWidth";
+import { snapsWorkareaShut } from "./layout";
+
+const DOCK = 320;
+
+describe("when dragging the chat divider snaps the workarea shut", () => {
+  it.each([1512, 1920, 2560])(
+    "snaps just past where the divider stops on a %ipx row",
+    (row) => {
+      const stop = chatWidthCeiling(row, DOCK);
+
+      expect(snapsWorkareaShut(true, stop, stop + 10)).toBe(false);
+      expect(snapsWorkareaShut(true, stop, stop + 30)).toBe(true);
+    },
+  );
+
+  it("never snaps before the row has been measured", () => {
+    expect(snapsWorkareaShut(false, 760, 5000)).toBe(false);
+  });
+});
diff --git a/src/routes/v2/pages/Tangent/layout.ts b/src/routes/v2/pages/Tangent/layout.ts
index 508c6df4fb..3837e7a70f 100644
--- a/src/routes/v2/pages/Tangent/layout.ts
+++ b/src/routes/v2/pages/Tangent/layout.ts
@@ -1,4 +1,8 @@
-import { MIN_DOCK_AREA_WIDTH } from "@/routes/v2/shared/windows/types";
+import {
+  COLLAPSED_DOCK_AREA_WIDTH,
+  DOCK_AREA_SNAP_OVERSHOOT,
+  MIN_DOCK_AREA_WIDTH,
+} from "@/routes/v2/shared/windows/types";
 
 export const DEFAULT_CHAT_WIDTH = 480;
 export const MIN_CHAT_WIDTH = 380;
@@ -6,5 +10,27 @@ export const MAX_CHAT_WIDTH = 760;
 
 export const MIN_WORKAREA_WIDTH = 420;
 
-export const NARROW_LAYOUT_WIDTH =
-  MIN_CHAT_WIDTH + MIN_WORKAREA_WIDTH + MIN_DOCK_AREA_WIDTH;
+export function narrowLayoutWidth(workareaCollapsed: boolean): number {
+  return (
+    MIN_CHAT_WIDTH +
+    (workareaCollapsed ? COLLAPSED_DOCK_AREA_WIDTH : MIN_WORKAREA_WIDTH) +
+    MIN_DOCK_AREA_WIDTH
+  );
+}
+
+export const NARROW_LAYOUT_WIDTH = narrowLayoutWidth(false);
+
+// Like the left dock, the workarea snaps shut once the divider is dragged a
+// little past where it stops: the chat's maximum or the workarea's minimum,
+// whichever binds first.
+export function snapsWorkareaShut(
+  rowMeasured: boolean,
+  maxChatWidth: number,
+  attemptedChatWidth: number,
+): boolean {
+  return (
+    rowMeasured && attemptedChatWidth >= maxChatWidth + DOCK_AREA_SNAP_OVERSHOOT
+  );
+}
+
+export const WORKAREA_ID = "tangent-project-workarea";
diff --git a/src/routes/v2/pages/Tangent/store/TangentProjectStore.test.ts b/src/routes/v2/pages/Tangent/store/TangentProjectStore.test.ts
index bea2116c19..981ef2d7fc 100644
--- a/src/routes/v2/pages/Tangent/store/TangentProjectStore.test.ts
+++ b/src/routes/v2/pages/Tangent/store/TangentProjectStore.test.ts
@@ -382,7 +382,9 @@ describe("TangentProjectStore.revealEntity", () => {
     store.registerTabStore(p2.id, shared);
     store.selectWorkareaTab(p1.id);
 
+    store.hideWorkarea();
     expect(store.revealEntity("task_1", "Load CSV")).toBe(true);
+    expect(store.workareaCollapsed).toBe(false);
     expect(store.activeWorkareaTabId).toBe(p2.id);
     expect(shared.navigation.navigateToPath).toHaveBeenCalledWith([
       "MyPipeline",
@@ -405,7 +407,9 @@ describe("TangentProjectStore.revealEntity", () => {
     const p1 = store.openResolvedView({ title: "P1", target: pipeline("p1") });
     store.registerTabStore(p1.id, makeSharedStore(specWithTask()));
 
+    store.hideWorkarea();
     expect(store.revealEntity("task_missing", "Nope")).toBe(false);
+    expect(store.workareaCollapsed).toBe(true);
   });
 
   it("returns false when the pipeline tab has no registered store yet", () => {
diff --git a/src/routes/v2/pages/Tangent/store/TangentProjectStore.ts b/src/routes/v2/pages/Tangent/store/TangentProjectStore.ts
index abce37cb81..37d20bb015 100644
--- a/src/routes/v2/pages/Tangent/store/TangentProjectStore.ts
+++ b/src/routes/v2/pages/Tangent/store/TangentProjectStore.ts
@@ -111,6 +111,7 @@ export class TangentProjectStore {
   @observable accessor selectedSessionId: string | undefined = undefined;
   @observable accessor defaultSessionId: string | undefined = undefined;
   @observable accessor isStartingSession = false;
+  @observable accessor workareaCollapsed = false;
 
   @observable.shallow accessor workareaBySession = new Map<
     string,
@@ -138,6 +139,14 @@ export class TangentProjectStore {
     makeObservable(this);
   }
 
+  @action hideWorkarea() {
+    this.workareaCollapsed = true;
+  }
+
+  @action showWorkarea() {
+    this.workareaCollapsed = false;
+  }
+
   @action setSessionIo(io: TangentSessionIo) {
     this.#io = io;
   }
@@ -469,6 +478,7 @@ export class TangentProjectStore {
       const store = this.#tabStores.get(tab.id);
       if (store && this.#focusEntityInStore(store, entityId, label)) {
         this.selectWorkareaTab(tab.id);
+        this.showWorkarea();
         return true;
       }
     }
diff --git a/src/routes/v2/pages/Tangent/workarea/pipelineKind.test.ts b/src/routes/v2/pages/Tangent/workarea/pipelineKind.test.ts
index 190b0524f7..e2938c49ee 100644
--- a/src/routes/v2/pages/Tangent/workarea/pipelineKind.test.ts
+++ b/src/routes/v2/pages/Tangent/workarea/pipelineKind.test.ts
@@ -53,7 +53,13 @@ function resolvePipelineTitle(
   return kind.resolveTitle({ type: "pipeline", identity });
 }
 
-function renderPipeline(identity: WorkareaIdentity) {
+function renderPipeline(
+  identity: WorkareaIdentity,
+  visibility: { isSelected: boolean; isActive: boolean } = {
+    isSelected: true,
+    isActive: true,
+  },
+) {
   const kind = getWorkareaKind("pipeline")!;
   render(
     kind.render(
@@ -63,7 +69,7 @@ function renderPipeline(identity: WorkareaIdentity) {
         target: { type: "pipeline", identity },
       },
       {
-        isActive: true,
+        ...visibility,
         projectId: "project-1",
         tabEnvironmentId: () => undefined,
         registerTabStore: vi.fn(),
@@ -77,6 +83,23 @@ function renderPipeline(identity: WorkareaIdentity) {
   );
 }
 
+describe("pipelineKind background migration", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it.each([true, false])(
+    "only lets the selected tab migrate while hidden (selected: %s)",
+    (isSelected) => {
+      renderPipeline("id/abc", { isSelected, isActive: false });
+      expect(mocks.editor.mock.calls.at(-1)?.[0]).toMatchObject({
+        isActive: false,
+        allowBackgroundMigration: isSelected,
+      });
+    },
+  );
+});
+
 describe("pipelineKind resolveTitle", () => {
   beforeEach(() => {
     vi.clearAllMocks();
@@ -172,6 +195,7 @@ it("shows a recoverable message when an old draft target is unavailable", () =>
         target: { type: "pipeline", identity: "draft/missing" },
       } as Parameters<typeof kind.render>[0],
       {
+        isSelected: true,
         isActive: true,
         projectId: "project-1",
         tabEnvironmentId: () => undefined,
diff --git a/src/routes/v2/pages/Tangent/workarea/pipelineKind.tsx b/src/routes/v2/pages/Tangent/workarea/pipelineKind.tsx
index f23083b08f..510f079ab2 100644
--- a/src/routes/v2/pages/Tangent/workarea/pipelineKind.tsx
+++ b/src/routes/v2/pages/Tangent/workarea/pipelineKind.tsx
@@ -78,6 +78,9 @@ registerWorkareaKind({
       target={tab.target}
       title={tab.title}
       isActive={hostProps.isActive}
+      // Hiding the workarea must not strand the selected tab mid-migration, but
+      // it must not start migrating the other mounted tabs either.
+      allowBackgroundMigration={hostProps.isSelected}
       projectId={hostProps.projectId}
       onStoreReady={(store) => hostProps.registerTabStore(tab.id, store)}
       onStoreClosed={() => hostProps.unregisterTabStore(tab.id)}
diff --git a/src/routes/v2/pages/Tangent/workarea/types.ts b/src/routes/v2/pages/Tangent/workarea/types.ts
index 737b0cb0e1..9496962be7 100644
--- a/src/routes/v2/pages/Tangent/workarea/types.ts
+++ b/src/routes/v2/pages/Tangent/workarea/types.ts
@@ -34,8 +34,15 @@ export type WorkareaTab = ResolvedWorkareaView & { id: string };
  * a spawnable kind (pipeline / run) uses to host a remote sub-agent bound to
  * its live canvas. The shell fills this bag from context; kinds pass the pieces
  * they need into their view.
+ *
+ * `isSelected` is the tab the user picked, and stays true while the workarea
+ * is collapsed. `isActive` is that tab while it is also visible. Keyboard
+ * shortcuts and anything that puts UI in front of the user follow `isActive`;
+ * work that may carry on while collapsed follows `isSelected`, so it never
+ * spreads to the other mounted tabs.
  */
 export interface WorkareaHostProps {
+  isSelected: boolean;
   isActive: boolean;
   projectId: string;
   sessionId?: string;
diff --git a/src/routes/v2/pages/Tangent/workarea/workareaTabIcon.ts b/src/routes/v2/pages/Tangent/workarea/workareaTabIcon.ts
new file mode 100644
index 0000000000..04a3367b60
--- /dev/null
+++ b/src/routes/v2/pages/Tangent/workarea/workareaTabIcon.ts
@@ -0,0 +1,8 @@
+import type { IconName } from "@/components/ui/icon";
+
+import { getWorkareaKind } from "./registry";
+import type { WorkareaTab } from "./types";
+
+export function workareaTabIcon(tab: WorkareaTab): IconName {
+  return getWorkareaKind(tab.target.type)?.icon ?? "FileText";
+}
diff --git a/src/routes/v2/shared/windows/types.ts b/src/routes/v2/shared/windows/types.ts
index 831a968775..2c5d53c8c9 100644
--- a/src/routes/v2/shared/windows/types.ts
+++ b/src/routes/v2/shared/windows/types.ts
@@ -90,7 +90,10 @@ export const DEFAULT_DOCK_AREA_WIDTH = 320;
 
 export const MIN_DOCK_AREA_WIDTH = 220;
 
-export const DOCK_AREA_COLLAPSE_SNAP_THRESHOLD = MIN_DOCK_AREA_WIDTH - 20;
+export const DOCK_AREA_SNAP_OVERSHOOT = 20;
+
+export const DOCK_AREA_COLLAPSE_SNAP_THRESHOLD =
+  MIN_DOCK_AREA_WIDTH - DOCK_AREA_SNAP_OVERSHOOT;
 
 export const MAX_DOCK_AREA_WIDTH = 600;