diff --git a/apps/web/package.json b/apps/web/package.json
index a3699235..18f24162 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -21,7 +21,6 @@
     "@effect/atom-react": "catalog:",
     "@fontsource-variable/cascadia-mono": "^5.3.0",
     "@fontsource-variable/schibsted-grotesk": "^5.3.0",
-    "@formkit/auto-animate": "^0.10.0",
     "@legendapp/list": "^3.3.3",
     "@lexical/react": "^0.47.0",
     "@pierre/diffs": "catalog:",
diff --git a/apps/web/src/browserPanelStore.test.ts b/apps/web/src/browserPanelStore.test.ts
index 24f6eae6..de300e9e 100644
--- a/apps/web/src/browserPanelStore.test.ts
+++ b/apps/web/src/browserPanelStore.test.ts
@@ -1,6 +1,12 @@
 import { describe, expect, it } from "vite-plus/test";
 
-import { makeBrowserTab, nextActiveTabId, steppedZoom, type BrowserTab } from "./browserPanelStore";
+import {
+  makeBrowserTab,
+  nextActiveTabId,
+  steppedZoom,
+  waitForPreviewWebview,
+  type BrowserTab,
+} from "./browserPanelStore";
 
 function tabs(count: number): BrowserTab[] {
   return Array.from({ length: count }, () => makeBrowserTab());
@@ -49,3 +55,48 @@ describe("steppedZoom", () => {
     expect(steppedZoom(1.05, -1)).toBe(1);
   });
 });
+
+describe("waitForPreviewWebview", () => {
+  it("returns the page as soon as one registers, without waiting out the cap", async () => {
+    let element: string | null = null;
+    const listeners = new Set<() => void>();
+
+    const waited = waitForPreviewWebview<string>({
+      resolve: () => element,
+      subscribe: (listener) => {
+        listeners.add(listener);
+        return () => listeners.delete(listener);
+      },
+      timeoutMs: 5_000,
+    });
+
+    // The panel mounts its element a tick after the agent asked for it.
+    element = "webview";
+    for (const listener of listeners) listener();
+
+    expect(await waited).toBe("webview");
+    // The subscription is not left behind once it has served its purpose.
+    expect(listeners.size).toBe(0);
+  });
+
+  it("gives up at the cap so a panel that never mounts still answers", async () => {
+    const timers: Array<() => void> = [];
+
+    const waited = waitForPreviewWebview<string>({
+      resolve: () => null,
+      subscribe: () => () => undefined,
+      timeoutMs: 5_000,
+      setTimeoutFn: ((callback: () => void) => {
+        timers.push(callback);
+        return 1 as unknown as ReturnType<typeof setTimeout>;
+      }) as unknown as typeof globalThis.setTimeout,
+      clearTimeoutFn: (() => undefined) as unknown as typeof globalThis.clearTimeout,
+    });
+
+    timers[0]?.();
+
+    // Null rather than a rejection: the caller reports "no page" the way it
+    // always has instead of the agent seeing a thrown error.
+    expect(await waited).toBeNull();
+  });
+});
diff --git a/apps/web/src/browserPanelStore.ts b/apps/web/src/browserPanelStore.ts
index 49aefda3..41ecf8cc 100644
--- a/apps/web/src/browserPanelStore.ts
+++ b/apps/web/src/browserPanelStore.ts
@@ -157,8 +157,143 @@ export function nextActiveTabId(
   return (remaining[closedIndex] ?? remaining[remaining.length - 1])!.id;
 }
 
+/**
+ * The live `<webview>` elements, by thread and tab.
+ *
+ * Deliberately not in the store's state: these are DOM nodes, they change on
+ * every tab mount, and nothing renders from them -- the automation host is the
+ * only caller, and it wants the current element rather than a re-render. Kept
+ * here rather than in the panel because the host now outlives the panel.
+ */
+export interface PreviewWebviewHandle {
+  getWebContentsId: () => number;
+  loadURL: (url: string) => Promise<void>;
+  getBoundingClientRect: () => DOMRect;
+}
+
+const webviewRegistry = new Map<string, PreviewWebviewHandle>();
+const webviewListeners = new Set<() => void>();
+
+function webviewKey(threadRef: ScopedThreadRef, tabId: string): string {
+  return `${scopedThreadKey(threadRef)}::${tabId}`;
+}
+
+export function registerPreviewWebview(
+  threadRef: ScopedThreadRef,
+  tabId: string,
+  element: PreviewWebviewHandle | null,
+): void {
+  const key = webviewKey(threadRef, tabId);
+  if (element === null) {
+    webviewRegistry.delete(key);
+  } else {
+    webviewRegistry.set(key, element);
+  }
+  for (const listener of webviewListeners) {
+    listener();
+  }
+}
+
+export function getPreviewWebview(
+  threadRef: ScopedThreadRef,
+  tabId: string,
+): PreviewWebviewHandle | null {
+  return webviewRegistry.get(webviewKey(threadRef, tabId)) ?? null;
+}
+
+export function subscribePreviewWebviews(listener: () => void): () => void {
+  webviewListeners.add(listener);
+  return () => {
+    webviewListeners.delete(listener);
+  };
+}
+
+/** Test seam: the registry outlives any one component, so tests clear it. */
+export function resetPreviewWebviewsForTests(): void {
+  webviewRegistry.clear();
+  webviewListeners.clear();
+}
+
+/**
+ * Waits for a page to exist, for as long as it is worth waiting.
+ *
+ * Opening the panel is not instant: the element mounts, attaches, and only then
+ * has a webContents to drive. The agent's call arrives before all of that, so
+ * it waits here rather than being told there is no browser -- but it waits
+ * against a cap well under the broker's own timeout, so a panel that never
+ * comes up answers the agent instead of hanging it.
+ */
+export async function waitForPreviewWebview<T>(input: {
+  readonly resolve: () => T | null;
+  readonly subscribe: (listener: () => void) => () => void;
+  readonly timeoutMs: number;
+  readonly setTimeoutFn?: typeof globalThis.setTimeout;
+  readonly clearTimeoutFn?: typeof globalThis.clearTimeout;
+}): Promise<T | null> {
+  const immediate = input.resolve();
+  if (immediate !== null) {
+    return immediate;
+  }
+  const setTimeoutFn = input.setTimeoutFn ?? globalThis.setTimeout;
+  const clearTimeoutFn = input.clearTimeoutFn ?? globalThis.clearTimeout;
+
+  return await new Promise<T | null>((resolvePromise) => {
+    let settled = false;
+    const finish = (value: T | null) => {
+      if (settled) return;
+      settled = true;
+      clearTimeoutFn(timer);
+      unsubscribe();
+      resolvePromise(value);
+    };
+    const unsubscribe = input.subscribe(() => {
+      const candidate = input.resolve();
+      if (candidate !== null) {
+        finish(candidate);
+      }
+    });
+    const timer = setTimeoutFn(() => finish(null), input.timeoutMs);
+    // Racing the subscription: registration may have landed between the first
+    // check and the listener going on.
+    const late = input.resolve();
+    if (late !== null) {
+      finish(late);
+    }
+  });
+}
+
+/** How long an agent's call waits for the panel it just opened to have a page. */
+export const PREVIEW_WEBVIEW_WAIT_MS = 5_000;
+
+/**
+ * What the agent is doing in a thread's browser.
+ *
+ * In the store rather than in the panel because the host that produces it now
+ * outlives the panel that draws it: an agent can act on a page while the panel
+ * is closed, and when it opens the panel has to already know where the pointer
+ * went and which tab is the agent's.
+ */
+export interface ThreadBrowserAgentState {
+  /** The tab the agent pinned itself to; null until it acts. */
+  tabId: string | null;
+  point: { x: number; y: number; from?: { x: number; y: number }; sequence: number } | null;
+  activity: {
+    phase: "running" | "done";
+    verb: string;
+    detail: string | null;
+    sequence: number;
+  } | null;
+}
+
+export const EMPTY_AGENT_STATE: ThreadBrowserAgentState = Object.freeze({
+  tabId: null,
+  point: null,
+  activity: null,
+});
+
 interface BrowserPanelStoreState {
   browserStateByThreadKey: Record<string, ThreadBrowserState>;
+  agentStateByThreadKey: Record<string, ThreadBrowserAgentState>;
   splitChatFraction: number;
   /** Hides the chat so the page gets the whole centre; the split is remembered. */
   expanded: boolean;
@@ -188,6 +323,15 @@ interface BrowserPanelStoreState {
   setTabZoom: (threadRef: ScopedThreadRef, tabId: string, zoomFactor: number) => void;
   toggleDeviceToolbar: () => void;
   setAppearance: (appearance: BrowserAppearance) => void;
+  setAgentTab: (threadRef: ScopedThreadRef, tabId: string | null) => void;
+  setAgentPoint: (
+    threadRef: ScopedThreadRef,
+    point: { x: number; y: number; from?: { x: number; y: number } } | null,
+  ) => void;
+  setAgentActivity: (
+    threadRef: ScopedThreadRef,
+    activity: ThreadBrowserAgentState["activity"],
+  ) => void;
   setSplitChatFraction: (fraction: number) => void;
   toggleExpanded: () => void;
 }
@@ -204,6 +348,16 @@ function updateThread(
   };
 }
 
+function updateAgentState(
+  state: BrowserPanelStoreState,
+  threadRef: ScopedThreadRef,
+  update: (current: ThreadBrowserAgentState) => ThreadBrowserAgentState,
+): Pick<BrowserPanelStoreState, "agentStateByThreadKey"> {
+  const key = scopedThreadKey(threadRef);
+  const current = state.agentStateByThreadKey[key] ?? EMPTY_AGENT_STATE;
+  return { agentStateByThreadKey: { ...state.agentStateByThreadKey, [key]: update(current) } };
+}
+
 function updateTab(
   current: ThreadBrowserState,
   tabId: string,
@@ -219,6 +373,7 @@ export const useBrowserPanelStore = create<BrowserPanelStoreState>()(
   persist(
     (set) => ({
       browserStateByThreadKey: {},
+      agentStateByThreadKey: {},
       splitChatFraction: DEFAULT_BROWSER_SPLIT_CHAT_FRACTION,
       expanded: false,
       deviceToolbarOpen: false,
@@ -281,6 +436,18 @@ export const useBrowserPanelStore = create<BrowserPanelStoreState>()(
         ),
       toggleDeviceToolbar: () => set((state) => ({ deviceToolbarOpen: !state.deviceToolbarOpen })),
       setAppearance: (appearance) => set(() => ({ appearance })),
+      setAgentTab: (threadRef, tabId) =>
+        set((state) => updateAgentState(state, threadRef, (current) => ({ ...current, tabId }))),
+      setAgentPoint: (threadRef, point) =>
+        set((state) =>
+          updateAgentState(state, threadRef, (current) => ({
+            ...current,
+            point:
+              point === null ? null : { ...point, sequence: (current.point?.sequence ?? 0) + 1 },
+          })),
+        ),
+      setAgentActivity: (threadRef, activity) =>
+        set((state) => updateAgentState(state, threadRef, (current) => ({ ...current, activity }))),
       setSplitChatFraction: (fraction) =>
         set(() => ({ splitChatFraction: clampBrowserSplitFraction(fraction) })),
       toggleExpanded: () => set((state) => ({ expanded: !state.expanded })),
@@ -316,6 +483,16 @@ export function selectThreadBrowserState(
   return stored === undefined || stored.tabs.length === 0 ? DEFAULT_THREAD_STATE : stored;
 }
 
+export function selectThreadAgentState(
+  agentStateByThreadKey: Record<string, ThreadBrowserAgentState>,
+  threadRef: ScopedThreadRef | null,
+): ThreadBrowserAgentState {
+  if (threadRef === null) {
+    return EMPTY_AGENT_STATE;
+  }
+  return agentStateByThreadKey[scopedThreadKey(threadRef)] ?? EMPTY_AGENT_STATE;
+}
+
 export function selectActiveTab(state: ThreadBrowserState): BrowserTab | null {
   return state.tabs.find((tab) => tab.id === state.activeTabId) ?? state.tabs[0] ?? null;
 }
diff --git a/apps/web/src/components/AppSidebarLayout.tsx b/apps/web/src/components/AppSidebarLayout.tsx
index ce8a3b54..eacdd410 100644
--- a/apps/web/src/components/AppSidebarLayout.tsx
+++ b/apps/web/src/components/AppSidebarLayout.tsx
@@ -25,9 +25,6 @@ const THREAD_SIDEBAR_MIN_WIDTH = 13 * 16;
 const THREAD_SIDEBAR_DEFAULT_WIDTH = `${THREAD_SIDEBAR_MIN_WIDTH}px`;
 const THREAD_MAIN_CONTENT_MIN_WIDTH = 40 * 16;
 const MACOS_TRAFFIC_LIGHTS_LEFT_INSET = "88px";
-// Collapsed width of the deck rail. Wide enough for a 32px hit target plus the
-// breathing room that keeps status dots off the window edge.
-const THREAD_SIDEBAR_RAIL_WIDTH = "2.75rem";
 
 function SidebarControl() {
   return (
@@ -50,7 +47,6 @@ export function AppSidebarLayout({ children }: { children: ReactNode }) {
   const appSettings = useSettings();
   const sidebarStyle = {
     "--sidebar-width": THREAD_SIDEBAR_DEFAULT_WIDTH,
-    "--sidebar-width-icon": THREAD_SIDEBAR_RAIL_WIDTH,
     ...(isElectron && typeof navigator !== "undefined" && isMacPlatform(navigator.platform)
       ? { "--workspace-controls-left": MACOS_TRAFFIC_LIGHTS_LEFT_INSET }
       : {}),
@@ -139,7 +135,9 @@ export function AppSidebarLayout({ children }: { children: ReactNode }) {
     <SidebarProvider className="h-dvh! min-h-0!" defaultOpen style={sidebarStyle}>
       <Sidebar
         side="left"
-        collapsible="icon"
+        // Collapsing hides the sidebar completely: with the inbox gone from the
+        // pane there is nothing an icon strip could stand in for.
+        collapsible="offcanvas"
         className="border-r border-border bg-rail text-foreground"
         resizable={{
           minWidth: THREAD_SIDEBAR_MIN_WIDTH,
@@ -149,9 +147,8 @@ export function AppSidebarLayout({ children }: { children: ReactNode }) {
         }}
       >
         <ThreadSidebar />
-        {/* Only the expanded pane resizes; a handle on the fixed-width rail
-            would advertise a drag that does nothing. */}
-        <SidebarRail className="group-data-[collapsible=icon]:hidden" />
+        {/* The drag handle on the pane's edge; it resizes while open. */}
+        <SidebarRail />
       </Sidebar>
       {children}
       <SidebarControl />
diff --git a/apps/web/src/components/ChatView.browser.tsx b/apps/web/src/components/ChatView.browser.tsx
index f547dadb..1ffc0d09 100644
--- a/apps/web/src/components/ChatView.browser.tsx
+++ b/apps/web/src/components/ChatView.browser.tsx
@@ -8,6 +8,8 @@ import {
   type EnvironmentApi,
   type MessageId,
   type OrchestrationEvent,
+  type PreviewAutomationRequest,
+  type PreviewAutomationResponse,
   type OrchestrationReadModel,
   type ProjectId,
   ProviderDriverKind,
@@ -45,6 +47,13 @@ import { render } from "vitest-browser-react";
 import { useCommandPaletteStore } from "../commandPaletteStore";
 import { CLIENT_SETTINGS_STORAGE_KEY } from "../clientPersistenceStorage";
 import { useComposerDraftStore, DraftId } from "../composerDraftStore";
+import {
+  makeBrowserTab,
+  registerPreviewWebview,
+  resetPreviewWebviewsForTests,
+  useBrowserPanelStore,
+} from "../browserPanelStore";
+import { PreviewAutomationMount } from "./browser/PreviewAutomationMount";
 import {
   __resetEnvironmentApiOverridesForTests,
   __setEnvironmentApiOverrideForTests,
@@ -102,7 +111,10 @@ const PROJECT_LOGICAL_KEY = deriveLogicalProjectKeyFromSettings(
     sidebarProjectGroupingOverrides: DEFAULT_CLIENT_SETTINGS.sidebarProjectGroupingOverrides,
   },
 );
-const NOW_ISO = "2026-03-04T12:00:00.000Z";
+// The fixture clock is "a few minutes ago", not a fixed date: the sidebar's
+// lifecycle is relative (threads file themselves under Done once idle), so a
+// pinned calendar date would age into the Done tail as real time moved on.
+const NOW_ISO = new Date(Date.now() - 10 * 60_000).toISOString();
 const BASE_TIME_MS = Date.parse(NOW_ISO);
 const ATTACHMENT_SVG = "<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'></svg>";
 const ADD_PROJECT_SUBMENU_PLACEHOLDER = "Enter path (e.g. ~/projects/my-app)";
@@ -221,12 +233,13 @@ function createMockEnvironmentApi(input: {
   browse: EnvironmentApi["filesystem"]["browse"];
   dispatchCommand: EnvironmentApi["orchestration"]["dispatchCommand"];
   getRevertPlan?: EnvironmentApi["orchestration"]["getRevertPlan"];
+  previewAutomation?: EnvironmentApi["previewAutomation"];
 }): EnvironmentApi {
   return {
     terminal: {} as EnvironmentApi["terminal"],
     projects: {} as EnvironmentApi["projects"],
     attachments: {} as EnvironmentApi["attachments"],
-    previewAutomation: {} as EnvironmentApi["previewAutomation"],
+    previewAutomation: input.previewAutomation ?? ({} as EnvironmentApi["previewAutomation"]),
     filesystem: {
       browse: input.browse,
     },
@@ -2097,6 +2110,8 @@ describe("ChatView timeline estimator parity (full app)", () => {
       projectExpandedById: {},
       projectOrder: [],
       threadLastVisitedAtById: {},
+      doneThreadOverrides: {},
+      inboxProjectScopeKey: null,
     });
     useTerminalStateStore.persist.clearStorage();
     useTerminalStateStore.setState({
@@ -2192,12 +2207,13 @@ describe("ChatView timeline estimator parity (full app)", () => {
         () => document.querySelector<HTMLElement>(`[data-testid="thread-row-${THREAD_ID}"]`),
         "Unable to find phone thread row.",
       );
-      const archiveButton = await waitForElement(
-        () =>
-          document.querySelector<HTMLButtonElement>(`[data-testid="thread-archive-${THREAD_ID}"]`),
-        "Unable to find archive button.",
+      const pinButton = await waitForElement(
+        () => document.querySelector<HTMLButtonElement>(`[data-testid="thread-pin-${THREAD_ID}"]`),
+        "Unable to find pin button.",
       );
-      const compactActions = archiveButton.parentElement;
+      // Archive belongs to the Done tail now; a live row offers pin and done.
+      expect(document.querySelector(`[data-testid="thread-archive-${THREAD_ID}"]`)).toBeNull();
+      const compactActions = pinButton.parentElement;
       const timestampWrapper = await waitForElement(
         () => threadRow.querySelector<HTMLElement>(`[data-testid="thread-meta-${THREAD_ID}"]`),
         "Unable to find thread timestamp.",
@@ -2373,30 +2389,59 @@ describe("ChatView timeline estimator parity (full app)", () => {
     }
   });
 
-  it("hides the active thread row when collapsing a one-thread project", async () => {
+  function withThreadBranch(
+    snapshot: ReturnType<typeof createSnapshotForTargetUser>,
+    branch: string,
+  ): ReturnType<typeof createSnapshotForTargetUser> {
+    return {
+      ...snapshot,
+      threads: snapshot.threads.map((thread) =>
+        thread.id === THREAD_ID ? { ...thread, branch } : thread,
+      ),
+    };
+  }
+
+  it("narrows the live list from the scope menu and drops the implied project label", async () => {
     const mounted = await mountChatView({
       viewport: DEFAULT_VIEWPORT,
-      snapshot: createSnapshotForTargetUser({
-        targetMessageId: "msg-user-one-thread-collapse-target" as MessageId,
-        targetText: "one thread collapse target",
-      }),
+      snapshot: withThreadBranch(
+        createSnapshotForTargetUser({
+          targetMessageId: "msg-user-scope-target" as MessageId,
+          targetText: "scope target",
+        }),
+        "feature/scope-test",
+      ),
     });
 
     try {
-      await expect.element(page.getByTestId(`thread-row-${THREAD_ID}`)).toBeInTheDocument();
+      const threadRow = await waitForElement(
+        () => document.querySelector<HTMLElement>(`[data-testid="thread-row-${THREAD_ID}"]`),
+        "Unable to find thread row.",
+      );
+      // Unscoped: the row names its project and the branch the thread pinned.
+      expect(threadRow.textContent).toContain("Project");
+      expect(threadRow.textContent).toContain("feature/scope-test");
 
-      const projectButton = await waitForButtonByText("Project");
-      expect(projectButton.getAttribute("aria-expanded")).toBe("true");
-      projectButton.click();
+      await page.getByTestId("inbox-scope-trigger").click();
+      await page.getByTestId(`inbox-scope-${PROJECT_LOGICAL_KEY}`).click();
 
       await vi.waitFor(
         () => {
-          expect(projectButton.getAttribute("aria-expanded")).toBe("false");
-          expect(document.querySelector(`[data-testid="thread-row-${THREAD_ID}"]`)).toBeNull();
+          expect(useUiStateStore.getState().inboxProjectScopeKey).toBe(PROJECT_LOGICAL_KEY);
+          const scopedRow = document.querySelector<HTMLElement>(
+            `[data-testid="thread-row-${THREAD_ID}"]`,
+          );
+          expect(scopedRow).not.toBeNull();
+          // Scoped: the project is implied, but the row keeps its second line.
+          expect(scopedRow?.textContent).not.toContain("Project");
+          expect(
+            scopedRow?.querySelector(`[data-testid="thread-detail-${THREAD_ID}"]`),
+          ).not.toBeNull();
         },
         { timeout: 4_000, interval: 16 },
       );
     } finally {
+      useUiStateStore.getState().setInboxProjectScope(null);
       await mounted.cleanup();
     }
   });
@@ -5037,9 +5082,6 @@ describe("ChatView timeline estimator parity (full app)", () => {
   });
 
   it("renders compact thread actions in the shared thread-row hover group", async () => {
-    // Deliberately unpinned. A pinned thread is on deck, and a thread on deck
-    // is not drawn again in the tree -- so the tree row this is about only
-    // exists for an ordinary thread.
     const mounted = await mountChatView({
       viewport: DEFAULT_VIEWPORT,
       snapshot: createSnapshotForTargetUser({
@@ -5053,28 +5095,31 @@ describe("ChatView timeline estimator parity (full app)", () => {
         () => document.querySelector<HTMLElement>(`[data-testid="thread-row-${THREAD_ID}"]`),
         "Unable to find thread row.",
       );
-      const archiveButton = await waitForElement(
-        () =>
-          document.querySelector<HTMLButtonElement>(`[data-testid="thread-archive-${THREAD_ID}"]`),
-        "Unable to find archive button.",
+      const doneButton = await waitForElement(
+        () => document.querySelector<HTMLButtonElement>(`[data-testid="thread-done-${THREAD_ID}"]`),
+        "Unable to find done button.",
       );
       const pinButton = await waitForElement(
         () => document.querySelector<HTMLButtonElement>(`[data-testid="thread-pin-${THREAD_ID}"]`),
         "Unable to find pin button.",
       );
-      const compactActions = archiveButton.parentElement;
+      const compactActions = pinButton.parentElement;
       expect(
         compactActions,
         "Thread actions should render inside a shared visibility wrapper.",
       ).not.toBeNull();
-      const threadItem = archiveButton.closest("li");
-      expect(threadItem?.className).toContain("group/menu-sub-item");
-      expect(compactActions?.className).toContain("group-hover/menu-sub-item:opacity-100");
-      expect(compactActions?.className).toContain("group-focus-within/menu-sub-item:opacity-100");
+      const threadItem = pinButton.closest("li");
+      expect(threadItem?.className).toContain("group/thread-row");
+      expect(compactActions?.className).toContain("group-hover/thread-row:opacity-100");
+      expect(compactActions?.className).toContain("group-focus-within/thread-row:opacity-100");
       expect(pinButton.getAttribute("aria-label")).toBe(`Pin ${THREAD_TITLE}`);
       expect(pinButton.getAttribute("aria-pressed")).toBe("false");
+      expect(doneButton.getAttribute("aria-label")).toBe(`Wrap up ${THREAD_TITLE}`);
+      // Icons only: the words for these two live in their tooltips.
+      expect(doneButton.textContent).toBe("");
+      expect(pinButton.textContent).toBe("");
       expect(
-        pinButton.compareDocumentPosition(archiveButton) & Node.DOCUMENT_POSITION_FOLLOWING,
+        doneButton.compareDocumentPosition(pinButton) & Node.DOCUMENT_POSITION_FOLLOWING,
       ).toBeTruthy();
       // Hidden until the row is hovered or focused, which is the whole point of
       // the shared wrapper.
@@ -5084,43 +5129,408 @@ describe("ChatView timeline estimator parity (full app)", () => {
     }
   });
 
-  it("puts a pinned thread on the deck instead of in the tree, and holds live work there", async () => {
-    // This replaces two tests that asserted pin and archive on the tree row of a
-    // running thread. That row no longer exists: pinned and live threads are on
-    // deck, and a thread on deck is drawn once, there. What matters now is that
-    // it moved rather than vanished, and that a run in progress cannot be waved
-    // away with the dismiss button.
+  it("lists every open thread once, floats pins to the top, and refuses Done on running work", async () => {
+    const pinnedThreadId = "thread-pinned-inbox" as ThreadId;
+    const runningSnapshot = createSnapshotForTargetUser({
+      targetMessageId: "msg-user-running-pin-test" as MessageId,
+      targetText: "running pin target",
+      sessionStatus: "running",
+      sessionActiveTurnId: "turn-running-pin-test" as TurnId,
+    });
+    const withPinnedThread = addThreadToSnapshot(runningSnapshot, pinnedThreadId);
     const mounted = await mountChatView({
       viewport: DEFAULT_VIEWPORT,
-      snapshot: createSnapshotForTargetUser({
-        targetMessageId: "msg-user-running-pin-test" as MessageId,
-        targetText: "running pin target",
-        threadPinnedAt: NOW_ISO,
-        sessionStatus: "running",
-        sessionActiveTurnId: "turn-running-pin-test" as TurnId,
-      }),
+      snapshot: {
+        ...withPinnedThread,
+        threads: withPinnedThread.threads.map((thread) =>
+          thread.id === pinnedThreadId ? { ...thread, pinnedAt: NOW_ISO } : thread,
+        ),
+      },
     });
 
     try {
-      await waitForElement(
-        () => document.querySelector<HTMLElement>(`[data-testid="on-deck-row-${THREAD_ID}"]`),
-        "Unable to find the thread's deck row.",
+      const runningRow = await waitForElement(
+        () => document.querySelector<HTMLElement>(`[data-testid="thread-row-${THREAD_ID}"]`),
+        "Unable to find the running thread's row.",
+      );
+      const pinnedRow = await waitForElement(
+        () => document.querySelector<HTMLElement>(`[data-testid="thread-row-${pinnedThreadId}"]`),
+        "Unable to find the pinned thread's row.",
       );
 
       expect(
-        document.querySelector(`[data-testid="thread-row-${THREAD_ID}"]`),
-        "A thread on deck should not also be drawn in the project tree.",
-      ).toBeNull();
+        pinnedRow.compareDocumentPosition(runningRow) & Node.DOCUMENT_POSITION_FOLLOWING,
+        "A pinned thread sorts above the rest of the live list.",
+      ).toBeTruthy();
       expect(
-        document.querySelector(`[data-testid="on-deck-dismiss-${THREAD_ID}"]`),
-        "A running thread should not offer dismiss.",
+        document.querySelectorAll(`[data-testid="thread-row-${THREAD_ID}"]`).length,
+        "Each thread is drawn exactly once.",
+      ).toBe(1);
+      expect(
+        document.querySelector(`[data-testid="thread-done-${THREAD_ID}"]`),
+        "A running thread cannot be marked done.",
       ).toBeNull();
+      expect(
+        document.querySelector(`[data-testid="thread-done-${pinnedThreadId}"]`),
+        "A settled thread offers Done.",
+      ).not.toBeNull();
+    } finally {
+      await mounted.cleanup();
+    }
+  });
+
+  it("keeps General Chats as its own destination above the scope row", async () => {
+    const mounted = await mountChatView({
+      viewport: DEFAULT_VIEWPORT,
+      snapshot: createSnapshotForTargetUser({
+        targetMessageId: "msg-user-general-chats-nav" as MessageId,
+        targetText: "general chats nav target",
+      }),
+    });
+
+    try {
+      const chatsRow = page.getByTestId("sidebar-general-chats");
+      await expect.element(chatsRow).toBeInTheDocument();
+      await chatsRow.click();
+
+      await waitForURL(
+        mounted.router,
+        (pathname) => pathname === "/chats",
+        "General Chats should open the chats page.",
+      );
+    } finally {
+      await mounted.cleanup();
+    }
+  });
+
+  it("opens a closed browser panel for an arriving automation request", async () => {
+    // The agent asks for the page while the panel is shut. It used to be told
+    // there was no browser; now the request is what opens one.
+    const tab = makeBrowserTab();
+    useBrowserPanelStore.setState({
+      browserStateByThreadKey: {
+        [THREAD_KEY]: { open: false, tabs: [tab], activeTabId: tab.id },
+      },
+      agentStateByThreadKey: {},
+    });
+
+    let deliver: ((request: PreviewAutomationRequest) => void) | null = null;
+    const responses: PreviewAutomationResponse[] = [];
+    __setEnvironmentApiOverrideForTests(
+      LOCAL_ENVIRONMENT_ID,
+      createMockEnvironmentApi({
+        browse: (() =>
+          Promise.reject(new Error("not used"))) as EnvironmentApi["filesystem"]["browse"],
+        dispatchCommand: (() =>
+          Promise.reject(
+            new Error("not used"),
+          )) as EnvironmentApi["orchestration"]["dispatchCommand"],
+        previewAutomation: {
+          connect: (_input: unknown, listener: (request: PreviewAutomationRequest) => void) => {
+            deliver = listener;
+            return () => {
+              deliver = null;
+            };
+          },
+          respond: (response: PreviewAutomationResponse) => {
+            responses.push(response);
+            return Promise.resolve();
+          },
+        } as unknown as EnvironmentApi["previewAutomation"],
+      }),
+    );
+    window.desktopBridge = {
+      previewStatus: () =>
+        Promise.resolve({ url: "http://localhost:5173/", title: "Preview", loading: false }),
+    } as unknown as NonNullable<typeof window.desktopBridge>;
+
+    const screen = await render(<PreviewAutomationMount threadRef={THREAD_REF} />);
+
+    try {
+      await vi.waitFor(
+        () => {
+          expect(deliver, "the host should register with the broker").not.toBeNull();
+        },
+        { timeout: 4_000, interval: 16 },
+      );
+
+      deliver!({
+        requestId: "req-auto-open",
+        operation: "status",
+        input: {},
+      } as unknown as PreviewAutomationRequest);
+
+      // The panel opens on its own...
+      await vi.waitFor(
+        () => {
+          expect(useBrowserPanelStore.getState().browserStateByThreadKey[THREAD_KEY]?.open).toBe(
+            true,
+          );
+        },
+        { timeout: 4_000, interval: 16 },
+      );
+
+      // ...and once its page is up, the operation the agent asked for lands.
+      registerPreviewWebview(THREAD_REF, tab.id, {
+        getWebContentsId: () => 42,
+        loadURL: () => Promise.resolve(),
+        getBoundingClientRect: () => ({ width: 900, height: 600 }) as DOMRect,
+      });
+
+      await vi.waitFor(
+        () => {
+          expect(responses).toHaveLength(1);
+          expect(responses[0]?.error, "the request should not report a missing browser").toBe(
+            undefined,
+          );
+          expect(responses[0]?.result).toMatchObject({ url: "http://localhost:5173/" });
+        },
+        { timeout: 8_000, interval: 16 },
+      );
+    } finally {
+      screen.unmount();
+      resetPreviewWebviewsForTests();
+      useBrowserPanelStore.setState({ browserStateByThreadKey: {}, agentStateByThreadKey: {} });
+      Reflect.deleteProperty(window, "desktopBridge");
+      __resetEnvironmentApiOverridesForTests();
+    }
+  });
+
+  it("pins the search chrome above the scrolling list", async () => {
+    const mounted = await mountChatView({
+      viewport: DEFAULT_VIEWPORT,
+      snapshot: createSnapshotForTargetUser({
+        targetMessageId: "msg-user-sticky-search" as MessageId,
+        targetText: "sticky search target",
+      }),
+    });
+
+    try {
+      const trigger = await waitForElement(
+        () => document.querySelector<HTMLElement>('[data-testid="command-palette-trigger"]'),
+        "Unable to find the search trigger.",
+      );
+      const row = await waitForElement(
+        () => document.querySelector<HTMLElement>(`[data-testid="thread-row-${THREAD_ID}"]`),
+        "Unable to find a thread row.",
+      );
+      const viewport = document.querySelector<HTMLElement>('[data-slot="scroll-area-viewport"]');
+
+      expect(viewport, "the sidebar list should scroll in its own viewport").not.toBeNull();
+      // The list scrolls inside the viewport; the search row is not in it, so
+      // it cannot scroll away.
+      expect(viewport!.contains(row)).toBe(true);
+      expect(viewport!.contains(trigger)).toBe(false);
+      expect(trigger.getBoundingClientRect().bottom).toBeLessThanOrEqual(
+        viewport!.getBoundingClientRect().top + 1,
+      );
+    } finally {
+      await mounted.cleanup();
+    }
+  });
+
+  it("keeps a working row's status whole and drops the branch to make room", async () => {
+    const longBranch = "feature/a-very-long-branch-name-that-would-never-fit-in-the-sidebar";
+    const base = createSnapshotForTargetUser({
+      targetMessageId: "msg-user-working-collision" as MessageId,
+      targetText: "working collision target",
+      sessionStatus: "running",
+      sessionActiveTurnId: "turn-working-collision" as TurnId,
+    });
+    const branched = withThreadBranch(base, longBranch);
+    const mounted = await mountChatView({
+      viewport: DEFAULT_VIEWPORT,
+      snapshot: {
+        ...branched,
+        projects: base.projects.map((project) => ({
+          ...project,
+          title: "A project with a deliberately long display name",
+        })),
+        // A running session has a turn under way; that turn is what the
+        // elapsed counter counts from.
+        threads: branched.threads.map((thread) =>
+          thread.id === THREAD_ID
+            ? {
+                ...thread,
+                latestTurn: {
+                  turnId: "turn-working-collision" as TurnId,
+                  state: "running" as const,
+                  requestedAt: NOW_ISO,
+                  startedAt: NOW_ISO,
+                  completedAt: null,
+                  assistantMessageId: null,
+                },
+              }
+            : thread,
+        ),
+      },
+    });
+
+    try {
+      const row = await waitForElement(
+        () => document.querySelector<HTMLElement>(`[data-testid="thread-row-${THREAD_ID}"]`),
+        "Unable to find the working thread's row.",
+      );
+      const meta = await waitForElement(
+        () => document.querySelector<HTMLElement>(`[data-testid="thread-meta-${THREAD_ID}"]`),
+        "Unable to find the row's status slot.",
+      );
+
+      await vi.waitFor(
+        () => {
+          // A duration, never the relative formatter's "just now".
+          expect(meta.textContent).toMatch(/^working · \d+[smh]/);
+        },
+        { timeout: 8_000, interval: 16 },
+      );
+
+      // The status slot is never the thing that gets cut.
+      expect(meta.scrollWidth).toBeLessThanOrEqual(meta.clientWidth + 1);
+      expect(meta.getBoundingClientRect().right).toBeLessThanOrEqual(
+        row.getBoundingClientRect().right,
+      );
+      // The branch yields first, and yields completely.
+      expect(row.textContent).not.toContain("feature/");
     } finally {
       await mounted.cleanup();
     }
   });
 
-  it("exposes the full thread title on the sidebar row tooltip", async () => {
+  it("reveals the folded tail in increments and folds it back", async () => {
+    const extraThreadIds = Array.from(
+      { length: 13 },
+      (_, index) => `thread-quiet-${index}` as ThreadId,
+    );
+    const snapshot = extraThreadIds.reduce(
+      (current, threadId) => addThreadToSnapshot(current, threadId),
+      createSnapshotForTargetUser({
+        targetMessageId: "msg-user-live-fold" as MessageId,
+        targetText: "live fold target",
+      }),
+    );
+    const mounted = await mountChatView({ viewport: DEFAULT_VIEWPORT, snapshot });
+
+    const expectRows = async (count: number, revealLabel: string | null) => {
+      await vi.waitFor(
+        () => {
+          expect(document.querySelectorAll('[data-testid^="thread-row-"]').length).toBe(count);
+          const reveal = document.querySelector('[data-testid="inbox-live-show-more"]');
+          if (revealLabel === null) {
+            expect(reveal).toBeNull();
+          } else {
+            expect(reveal?.textContent).toContain(revealLabel);
+          }
+        },
+        { timeout: 8_000, interval: 16 },
+      );
+    };
+
+    try {
+      // Fourteen quiet threads, six unfolded, revealed five at a time.
+      await expectRows(6, "Show 5 more");
+      await page.getByTestId("inbox-live-show-more").click();
+      await expectRows(11, "Show 3 more");
+      await page.getByTestId("inbox-live-show-more").click();
+      // Nothing left to reveal, so only the fold-back and search icons remain.
+      await expectRows(14, null);
+      await expect.element(page.getByTestId("inbox-live-search")).toBeInTheDocument();
+
+      await page.getByTestId("inbox-live-show-fewer").click();
+      await expectRows(6, "Show 5 more");
+    } finally {
+      await mounted.cleanup();
+    }
+  });
+
+  it("keeps the thread you are reading on the shelf when Done collapses", async () => {
+    const otherDoneThreadId = "thread-done-collapse" as ThreadId;
+    const mounted = await mountChatView({
+      viewport: DEFAULT_VIEWPORT,
+      snapshot: addThreadToSnapshot(
+        createSnapshotForTargetUser({
+          targetMessageId: "msg-user-done-collapse" as MessageId,
+          targetText: "done collapse target",
+        }),
+        otherDoneThreadId,
+      ),
+    });
+
+    try {
+      await expect.element(page.getByTestId(`thread-row-${THREAD_ID}`)).toBeInTheDocument();
+      const otherThreadKey = scopedThreadKey(
+        scopeThreadRef(LOCAL_ENVIRONMENT_ID, otherDoneThreadId),
+      );
+      const doneAt = new Date().toISOString();
+      useUiStateStore.getState().markThreadDone(THREAD_KEY, doneAt);
+      useUiStateStore.getState().markThreadDone(otherThreadKey, doneAt);
+
+      await vi.waitFor(
+        () => {
+          expect(document.querySelector(`[data-testid="done-row-${THREAD_ID}"]`)).not.toBeNull();
+          expect(
+            document.querySelector(`[data-testid="done-row-${otherDoneThreadId}"]`),
+          ).not.toBeNull();
+        },
+        { timeout: 8_000, interval: 16 },
+      );
+
+      await page.getByTestId("inbox-done-toggle").click();
+
+      await vi.waitFor(
+        () => {
+          // Collapsing a section must not close the thread open inside it.
+          expect(document.querySelector(`[data-testid="done-row-${THREAD_ID}"]`)).not.toBeNull();
+          expect(
+            document.querySelector(`[data-testid="done-row-${otherDoneThreadId}"]`),
+          ).toBeNull();
+        },
+        { timeout: 8_000, interval: 16 },
+      );
+    } finally {
+      await mounted.cleanup();
+    }
+  });
+
+  it("moves a thread into the Done tail and back with Reopen", async () => {
+    const mounted = await mountChatView({
+      viewport: DEFAULT_VIEWPORT,
+      snapshot: createSnapshotForTargetUser({
+        targetMessageId: "msg-user-done-lifecycle" as MessageId,
+        targetText: "done lifecycle target",
+      }),
+    });
+
+    try {
+      const threadRow = page.getByTestId(`thread-row-${THREAD_ID}`);
+      await expect.element(threadRow).toBeInTheDocument();
+      await threadRow.hover();
+      await page.getByTestId(`thread-done-${THREAD_ID}`).click();
+
+      await vi.waitFor(
+        () => {
+          expect(document.querySelector(`[data-testid="thread-row-${THREAD_ID}"]`)).toBeNull();
+          expect(document.querySelector(`[data-testid="done-row-${THREAD_ID}"]`)).not.toBeNull();
+        },
+        { timeout: 4_000, interval: 16 },
+      );
+
+      const doneRow = page.getByTestId(`done-row-${THREAD_ID}`);
+      await doneRow.hover();
+      await page.getByTestId(`done-reopen-${THREAD_ID}`).click();
+
+      await vi.waitFor(
+        () => {
+          expect(document.querySelector(`[data-testid="done-row-${THREAD_ID}"]`)).toBeNull();
+          expect(document.querySelector(`[data-testid="thread-row-${THREAD_ID}"]`)).not.toBeNull();
+        },
+        { timeout: 4_000, interval: 16 },
+      );
+    } finally {
+      await mounted.cleanup();
+    }
+  });
+
+  it("shows the full thread title in the row hover card, and nothing else", async () => {
     const mounted = await mountChatView({
       viewport: DEFAULT_VIEWPORT,
       snapshot: createSnapshotForTargetUser({
@@ -5137,9 +5547,17 @@ describe("ChatView timeline estimator parity (full app)", () => {
 
       await vi.waitFor(
         () => {
-          const tooltip = document.querySelector<HTMLElement>('[data-slot="tooltip-popup"]');
-          expect(tooltip).not.toBeNull();
-          expect(tooltip?.textContent).toContain(THREAD_TITLE);
+          const hoverCard = document.querySelector<HTMLElement>(
+            '[data-testid="thread-hover-card"]',
+          );
+          expect(hoverCard).not.toBeNull();
+          expect(hoverCard?.textContent).toContain(THREAD_TITLE);
+          // The hover card is the only popup: a truncated title must not raise
+          // a second one on top of it.
+          expect(document.querySelectorAll('[data-testid="thread-hover-card"]').length).toBe(1);
+          // And no tooltip stacked on top: the card moved off the tooltip
+          // primitive precisely so the two can never compete.
+          expect(document.querySelectorAll('[data-slot="tooltip-popup"]').length).toBe(0);
         },
         { timeout: 8_000, interval: 16 },
       );
@@ -5166,10 +5584,14 @@ describe("ChatView timeline estimator parity (full app)", () => {
     });
 
     try {
-      const threadRow = page.getByTestId(`thread-row-${THREAD_ID}`);
+      // live -> done -> archived: archive is only offered once a thread has
+      // been filed away.
+      await expect.element(page.getByTestId(`thread-row-${THREAD_ID}`)).toBeInTheDocument();
+      useUiStateStore.getState().markThreadDone(THREAD_KEY, new Date().toISOString());
 
-      await expect.element(threadRow).toBeInTheDocument();
-      await threadRow.hover();
+      const doneRow = page.getByTestId(`done-row-${THREAD_ID}`);
+      await expect.element(doneRow).toBeInTheDocument();
+      await doneRow.hover();
 
       const archiveButton = page.getByTestId(`thread-archive-${THREAD_ID}`);
       await expect.element(archiveButton).toBeInTheDocument();
diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx
index b8c8618c..6f9bb51e 100644
--- a/apps/web/src/components/ChatView.tsx
+++ b/apps/web/src/components/ChatView.tsx
@@ -112,8 +112,6 @@ import {
   type TurnDiffSummary,
   type ChatAttachment,
 } from "../types";
-import { useAutoCollapseSidebar } from "../hooks/useAutoCollapseSidebar";
-import { useSidebar } from "./ui/sidebar";
 import { useTheme } from "../hooks/useTheme";
 import { useTurnDiffSummaries } from "../hooks/useTurnDiffSummaries";
 import { useMediaQuery } from "../hooks/useMediaQuery";
@@ -260,6 +258,7 @@ import {
 import { useLocalStorage } from "~/hooks/useLocalStorage";
 import { selectThreadBrowserState, useBrowserPanelStore } from "../browserPanelStore";
 import { BrowserPanel } from "./browser/BrowserPanel";
+import { PreviewAutomationMount } from "./browser/PreviewAutomationMount";
 import { BrowserSplitHandle } from "./browser/BrowserSplitHandle";
 import { useComposerHandleContext } from "../composerHandleContext";
 import {
@@ -2545,15 +2544,6 @@ export default function ChatView(props: ChatViewProps) {
   const browserAvailable = !isGeneralChatThread;
   const browserOpen = browserAvailable && browserPanelState.open;
 
-  // With source control and the browser both open the chat column is what pays
-  // for it, so the sidebar folds down to its rail -- once, and never again if
-  // you expand it back.
-  const { setOpen: setSidebarOpen, state: sidebarState } = useSidebar();
-  useAutoCollapseSidebar({
-    squeezed: browserOpen && rightPanelEngaged,
-    expanded: sidebarState === "expanded",
-    setExpanded: setSidebarOpen,
-  });
   const handleToggleBrowser = useCallback(() => {
     if (routeThreadRef !== null) {
       toggleBrowserOpen(routeThreadRef);
@@ -6499,6 +6489,12 @@ export default function ChatView(props: ChatViewProps) {
           ) : null}
         </div>
         {/* end chat column */}
+        {/* The agent's end of the browser is mounted with the thread, not with
+            the panel: a closed panel is a closed panel, not the absence of a
+            browser, and a request for the browser opens it. */}
+        {browserAvailable && routeThreadRef !== null ? (
+          <PreviewAutomationMount threadRef={routeThreadRef} />
+        ) : null}
         {browserOpen && routeThreadRef !== null ? (
           <>
             {browserExpanded ? null : (
diff --git a/apps/web/src/components/ChatsDestinationView.tsx b/apps/web/src/components/ChatsDestinationView.tsx
index bfa8780f..e730009c 100644
--- a/apps/web/src/components/ChatsDestinationView.tsx
+++ b/apps/web/src/components/ChatsDestinationView.tsx
@@ -17,14 +17,40 @@ import {
 } from "../store";
 import { buildThreadRouteParams } from "../threadRoutes";
 import { formatRelativeTimeLabel } from "../timestampFormat";
-import { ThreadRowLeadingStatus } from "./ThreadStatusIndicators";
+import { PROVIDER_ICON_BY_PROVIDER } from "./chat/providerIconUtils";
+import { PROVIDER_OPTIONS } from "../session-logic";
 import { resolveThreadStatusPill } from "./Sidebar.logic";
-import { ThreadHoverCard } from "./sidebar/ThreadHoverCard";
+import { ThreadHoverCard, ThreadHoverCardProvider } from "./sidebar/ThreadHoverCard";
 import { SidebarHoverCardGroup } from "./sidebar/hoverCard";
+import type { SidebarThreadSummary } from "../types";
+
+const DAY_MS = 24 * 60 * 60 * 1_000;
+
+type ChatGroupId = "today" | "week" | "earlier";
+
+const CHAT_GROUP_LABELS: Record<ChatGroupId, string> = {
+  today: "Today",
+  week: "This week",
+  earlier: "Earlier",
+};
+
+function chatActivityAt(thread: SidebarThreadSummary): string {
+  return thread.latestUserMessageAt ?? thread.updatedAt ?? thread.createdAt;
+}
+
+/** Recency buckets, read off the same clock as the row's relative time. */
+function resolveChatGroup(activityAt: string, nowMs: number): ChatGroupId {
+  const at = Date.parse(activityAt);
+  if (Number.isNaN(at)) return "earlier";
+  const startOfToday = new Date(nowMs).setHours(0, 0, 0, 0);
+  if (at >= startOfToday) return "today";
+  if (at >= startOfToday - 6 * DAY_MS) return "week";
+  return "earlier";
+}
 
 /**
  * The Chats destination: general chats are threads with no project, so they get
- * a place of their own rather than a project-shaped group in the sidebar tree.
+ * a place of their own rather than a project-shaped group in the sidebar.
  */
 export function ChatsDestinationView() {
   const navigate = useNavigate();
@@ -60,81 +86,135 @@ export function ChatsDestinationView() {
     );
   }, [generalChatsProject, threadSortOrder, threads]);
 
+  const groups = useMemo(() => {
+    const nowMs = Date.now();
+    const byGroup = new Map<ChatGroupId, SidebarThreadSummary[]>();
+    for (const thread of chats) {
+      const group = resolveChatGroup(chatActivityAt(thread), nowMs);
+      const existing = byGroup.get(group);
+      if (existing) {
+        existing.push(thread);
+      } else {
+        byGroup.set(group, [thread]);
+      }
+    }
+    // Empty buckets are simply absent: a label with nothing under it is a
+    // heading for a list that does not exist.
+    return (["today", "week", "earlier"] as const).flatMap((group) => {
+      const groupChats = byGroup.get(group);
+      return groupChats ? [{ id: group, chats: groupChats }] : [];
+    });
+  }, [chats]);
+
   const startChat = () => {
     if (generalChatsProjectRef) {
       void startNewGeneralChatThread(handleNewThread, generalChatsProjectRef);
     }
   };
 
-  return (
-    <div
-      className="mx-auto flex h-full w-full max-w-2xl flex-col px-6 py-8"
-      data-testid="chats-view"
+  const newChatButton = (
+    <button
+      type="button"
+      className="flex shrink-0 cursor-pointer items-center gap-1.5 rounded-md px-2 py-1 text-xs text-muted-foreground/80 transition-colors hover:bg-muted hover:text-foreground focus-ring"
+      data-testid="chats-view-new-chat"
+      disabled={generalChatsProjectRef === null}
+      onClick={startChat}
     >
-      <div className="mb-1 flex items-center gap-3">
-        <h1 className="flex-1 text-lg font-medium tracking-tight">General chats</h1>
-        <button
-          type="button"
-          className="flex shrink-0 cursor-pointer items-center gap-1.5 rounded-md px-2 py-1 text-xs text-muted-foreground/80 transition-colors hover:bg-muted hover:text-foreground focus-ring"
-          data-testid="chats-view-new-chat"
-          disabled={generalChatsProjectRef === null}
-          onClick={startChat}
-        >
-          <MessageCirclePlusIcon className="size-3.5" />
-          New chat
-        </button>
-      </div>
-      <p className="text-sm text-muted-foreground/70">
-        Conversations that aren&apos;t tied to a project.
-      </p>
+      <MessageCirclePlusIcon className="size-3.5" />
+      New chat
+    </button>
+  );
 
-      {chats.length === 0 ? (
-        <p className="mt-10 border-t border-border/50 py-6 text-sm text-muted-foreground/60">
-          No chats yet.
+  return (
+    <ThreadHoverCardProvider side="bottom">
+      <div
+        className="mx-auto flex h-full w-full max-w-2xl flex-col px-6 py-8"
+        data-testid="chats-view"
+      >
+        <div className="mb-1 flex items-center gap-3">
+          <h1 className="flex-1 text-lg font-medium tracking-tight">General chats</h1>
+          {newChatButton}
+        </div>
+        <p className="text-sm text-muted-foreground/70">
+          Conversations that aren&apos;t tied to a project.
         </p>
-      ) : (
-        <SidebarHoverCardGroup>
-          {/* The rows repeat the page title's shape closely enough that a rule
-              alone read as more list. A label gives the list a head of its own. */}
-          <div className="mt-10 mb-2 font-mono text-[10px] uppercase tracking-wider text-muted-foreground/55">
-            {chats.length} {chats.length === 1 ? "chat" : "chats"}
+
+        {chats.length === 0 ? (
+          <div className="flex flex-1 flex-col items-center justify-center gap-3 text-center">
+            <div className="flex flex-col gap-1">
+              <p className="text-sm text-muted-foreground/70">No general chats yet</p>
+              <p className="text-xs text-muted-foreground/50">
+                Start one for anything that doesn&apos;t belong to a project.
+              </p>
+            </div>
+            {newChatButton}
           </div>
-          <div className="flex flex-col divide-y divide-border/50 border-t border-border/50">
-            {chats.map((thread) => (
-              <ThreadHoverCard
-                key={`${thread.environmentId}:${thread.id}`}
-                thread={thread}
-                status={resolveThreadStatusPill({ thread })}
-                side="right"
-              >
-                <button
-                  type="button"
-                  className="group flex w-full min-w-0 cursor-pointer items-center gap-2.5 px-1 py-2.5 text-left transition-colors hover:bg-muted focus-ring"
-                  data-testid="chats-view-row"
-                  onClick={() => {
-                    void navigate({
-                      to: "/$environmentId/$threadId",
-                      params: buildThreadRouteParams(
-                        scopeThreadRef(thread.environmentId, thread.id),
-                      ),
-                    });
-                  }}
-                >
-                  <ThreadRowLeadingStatus thread={thread} />
-                  <span className="min-w-0 flex-1 truncate text-sm text-foreground/80">
-                    {thread.title}
-                  </span>
-                  <span className="shrink-0 text-xs tabular-nums text-muted-foreground/50">
-                    {formatRelativeTimeLabel(
-                      thread.latestUserMessageAt ?? thread.updatedAt ?? thread.createdAt,
-                    )}
-                  </span>
-                </button>
-              </ThreadHoverCard>
+        ) : (
+          <SidebarHoverCardGroup>
+            {groups.map((group) => (
+              <section key={group.id} className="mt-8 first:mt-10">
+                <h2 className="mb-1 font-mono text-[10px] uppercase tracking-wider text-muted-foreground/55 select-none">
+                  {CHAT_GROUP_LABELS[group.id]}
+                </h2>
+                <div className="flex flex-col divide-y divide-border/50">
+                  {group.chats.map((thread) => (
+                    <ChatRow
+                      key={`${thread.environmentId}:${thread.id}`}
+                      thread={thread}
+                      onOpen={() => {
+                        void navigate({
+                          to: "/$environmentId/$threadId",
+                          params: buildThreadRouteParams(
+                            scopeThreadRef(thread.environmentId, thread.id),
+                          ),
+                        });
+                      }}
+                    />
+                  ))}
+                </div>
+              </section>
             ))}
-          </div>
-        </SidebarHoverCardGroup>
-      )}
-    </div>
+          </SidebarHoverCardGroup>
+        )}
+      </div>
+    </ThreadHoverCardProvider>
+  );
+}
+
+function ChatRow({ thread, onOpen }: { thread: SidebarThreadSummary; onOpen: () => void }) {
+  const provider = thread.session?.provider ?? null;
+  const ProviderIcon = provider ? (PROVIDER_ICON_BY_PROVIDER[provider] ?? null) : null;
+  // The listing carries no message text and this page adds no fetching of its
+  // own, so the provider is what the second line can honestly say.
+  const providerLabel = provider
+    ? (PROVIDER_OPTIONS.find((option) => option.value === provider)?.label ?? provider)
+    : null;
+
+  return (
+    <ThreadHoverCard thread={thread} status={resolveThreadStatusPill({ thread })}>
+      <button
+        type="button"
+        className="-mx-2 flex w-[calc(100%+1rem)] min-w-0 cursor-pointer flex-col gap-0.5 rounded-md px-2 py-2.5 text-left transition-colors select-none hover:bg-muted focus-ring"
+        data-testid="chats-view-row"
+        onClick={onOpen}
+      >
+        <span className="flex w-full min-w-0 items-baseline gap-3">
+          <span className="min-w-0 flex-1 truncate text-sm font-medium text-foreground/90">
+            {thread.title}
+          </span>
+          <span className="shrink-0 font-mono text-xs tabular-nums text-muted-foreground/50">
+            {formatRelativeTimeLabel(chatActivityAt(thread))}
+          </span>
+        </span>
+        <span className="flex w-full min-w-0 items-center gap-2">
+          <span className="min-w-0 flex-1 truncate text-xs text-muted-foreground/55">
+            {providerLabel}
+          </span>
+          {ProviderIcon ? (
+            <ProviderIcon aria-hidden className="size-3 shrink-0 text-muted-foreground/45" />
+          ) : null}
+        </span>
+      </button>
+    </ThreadHoverCard>
   );
 }
diff --git a/apps/web/src/components/Sidebar.logic.test.ts b/apps/web/src/components/Sidebar.logic.test.ts
index 63aff431..80e4aca8 100644
--- a/apps/web/src/components/Sidebar.logic.test.ts
+++ b/apps/web/src/components/Sidebar.logic.test.ts
@@ -2,31 +2,28 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vite-plus/test"
 import { ProviderDriverKind } from "@threadlines/contracts";
 
 import {
-  buildOnDeckSyncInput,
-  buildProjectHoverSummary,
-  countThreadsNeedingUser,
   createThreadJumpHintVisibilityController,
-  excludeOnDeckThreads,
   getSidebarThreadIdsToPrewarm,
-  isOnDeckDismissible,
-  getVisibleSidebarThreadIds,
   resolveAdjacentThreadId,
   getFallbackThreadIdAfterDelete,
-  getSidebarThreadWindow,
   getProjectSortTimestamp,
   hasUnseenCompletion,
   isContextMenuPointerDown,
   orderItemsByPreferredIds,
-  resolveProjectStatusIndicator,
   resolveSidebarNewThreadSeedContext,
   resolveSidebarNewThreadEnvMode,
   THREAD_STATUS_DOT_CLASSES,
-  resolveThreadRowClassName,
   resolveThreadStatusPill,
   shouldClearThreadSelectionOnMouseDown,
   sortProjectsForSidebar,
   THREAD_JUMP_HINT_SHOW_DELAY_MS,
 } from "./Sidebar.logic";
+import {
+  buildProjectScopeOptions,
+  isThreadDone,
+  sortInboxThreads,
+  windowInboxThreads,
+} from "./Sidebar.logic";
 import {
   EnvironmentId,
   OrchestrationLatestTurn,
@@ -38,7 +35,6 @@ import {
   DEFAULT_INTERACTION_MODE,
   DEFAULT_RUNTIME_MODE,
   type Project,
-  type SidebarThreadSummary,
   type Thread,
 } from "../types";
 
@@ -62,13 +58,8 @@ describe("hasUnseenCompletion", () => {
   it("returns true when a thread completed after its last visit", () => {
     expect(
       hasUnseenCompletion({
-        hasActionableProposedPlan: false,
-        hasPendingApprovals: false,
-        hasPendingUserInput: false,
-        interactionMode: "default",
         latestTurn: makeLatestTurn(),
         lastVisitedAt: "2026-03-09T10:04:00.000Z",
-        session: null,
       }),
     ).toBe(true);
   });
@@ -407,46 +398,6 @@ describe("resolveAdjacentThreadId", () => {
   });
 });
 
-describe("getVisibleSidebarThreadIds", () => {
-  it("returns only the rendered visible thread order across projects", () => {
-    expect(
-      getVisibleSidebarThreadIds([
-        {
-          renderedThreadIds: [
-            ThreadId.make("thread-12"),
-            ThreadId.make("thread-11"),
-            ThreadId.make("thread-10"),
-          ],
-        },
-        {
-          renderedThreadIds: [ThreadId.make("thread-8"), ThreadId.make("thread-6")],
-        },
-      ]),
-    ).toEqual([
-      ThreadId.make("thread-12"),
-      ThreadId.make("thread-11"),
-      ThreadId.make("thread-10"),
-      ThreadId.make("thread-8"),
-      ThreadId.make("thread-6"),
-    ]);
-  });
-
-  it("skips threads from collapsed projects whose thread panels are not shown", () => {
-    expect(
-      getVisibleSidebarThreadIds([
-        {
-          shouldShowThreadPanel: false,
-          renderedThreadIds: [ThreadId.make("thread-hidden-2"), ThreadId.make("thread-hidden-1")],
-        },
-        {
-          shouldShowThreadPanel: true,
-          renderedThreadIds: [ThreadId.make("thread-12"), ThreadId.make("thread-11")],
-        },
-      ]),
-    ).toEqual([ThreadId.make("thread-12"), ThreadId.make("thread-11")]);
-  });
-});
-
 describe("isContextMenuPointerDown", () => {
   it("treats secondary-button presses as context menu gestures on all platforms", () => {
     expect(
@@ -762,212 +713,6 @@ describe("resolveThreadStatusPill", () => {
   });
 });
 
-describe("resolveThreadRowClassName", () => {
-  it("uses the darker selected palette when a thread is both selected and active", () => {
-    const className = resolveThreadRowClassName({ isActive: true, isSelected: true });
-    expect(className).toContain("bg-primary/22");
-    expect(className).toContain("hover:bg-primary/26");
-    expect(className).toContain("dark:bg-primary/30");
-    expect(className).not.toContain("bg-accent/85");
-  });
-
-  it("uses selected hover colors for selected threads", () => {
-    const className = resolveThreadRowClassName({ isActive: false, isSelected: true });
-    expect(className).toContain("bg-primary/15");
-    expect(className).toContain("hover:bg-primary/19");
-    expect(className).toContain("dark:bg-primary/22");
-    expect(className).not.toContain("hover:bg-accent");
-  });
-
-  it("keeps the accent palette for active-only threads", () => {
-    const className = resolveThreadRowClassName({ isActive: true, isSelected: false });
-    expect(className).toContain("bg-accent/85");
-    expect(className).toContain("hover:bg-accent");
-  });
-});
-
-describe("resolveProjectStatusIndicator", () => {
-  it("returns null when no threads have a notable status", () => {
-    expect(resolveProjectStatusIndicator([null, null])).toBeNull();
-  });
-
-  it("surfaces the highest-priority actionable state across project threads", () => {
-    expect(
-      resolveProjectStatusIndicator([
-        {
-          label: "Completed",
-          colorClass: "text-emerald-600",
-          dotClass: THREAD_STATUS_DOT_CLASSES.emerald,
-          pulse: false,
-        },
-        {
-          label: "Pending Approval",
-          colorClass: "text-amber-600",
-          dotClass: THREAD_STATUS_DOT_CLASSES.amber,
-          pulse: false,
-        },
-        {
-          label: "Working",
-          colorClass: "text-primary-readable",
-          dotClass: THREAD_STATUS_DOT_CLASSES.blue,
-          pulse: true,
-        },
-      ]),
-    ).toMatchObject({ label: "Pending Approval", dotClass: THREAD_STATUS_DOT_CLASSES.amber });
-  });
-
-  it("prefers plan-ready over completed when no stronger action is needed", () => {
-    expect(
-      resolveProjectStatusIndicator([
-        {
-          label: "Completed",
-          colorClass: "text-emerald-600",
-          dotClass: THREAD_STATUS_DOT_CLASSES.emerald,
-          pulse: false,
-        },
-        {
-          label: "Plan Ready",
-          colorClass: "text-violet-600",
-          dotClass: THREAD_STATUS_DOT_CLASSES.violet,
-          pulse: false,
-        },
-      ]),
-    ).toMatchObject({ label: "Plan Ready", dotClass: THREAD_STATUS_DOT_CLASSES.violet });
-  });
-});
-
-const makeKeys = (count: number) => Array.from({ length: count }, (_, index) => `t-${index + 1}`);
-const getThreadKey = (key: string) => key;
-
-describe("getSidebarThreadWindow", () => {
-  const previewLimit = 6;
-
-  it("includes the active thread even when it falls below the folded preview", () => {
-    const window = getSidebarThreadWindow({
-      threads: makeKeys(8),
-      getThreadKey,
-      activeThreadKey: "t-8",
-      previewLimit,
-      revealedCount: 0,
-    });
-
-    expect(window.visibleThreads).toEqual(["t-1", "t-2", "t-3", "t-4", "t-5", "t-6", "t-8"]);
-    expect(window.hiddenThreads).toEqual(["t-7"]);
-    expect(window.isRevealed).toBe(false);
-  });
-
-  it("caps the next reveal to the configured preview count", () => {
-    const window = getSidebarThreadWindow({
-      threads: makeKeys(previewLimit + previewLimit + 2),
-      getThreadKey,
-      activeThreadKey: null,
-      previewLimit,
-      revealedCount: 0,
-    });
-
-    expect(window.nextRevealCount).toBe(previewLimit);
-    expect(window.searchHandoffThreadCount).toBeNull();
-  });
-
-  it("offers a single preview-sized step when the tail is larger than the preview", () => {
-    const window = getSidebarThreadWindow({
-      threads: makeKeys(40),
-      getThreadKey,
-      activeThreadKey: null,
-      previewLimit,
-      revealedCount: 0,
-    });
-
-    expect(window.visibleThreads).toHaveLength(previewLimit);
-    expect(window.nextRevealCount).toBe(previewLimit);
-    expect(window.searchHandoffThreadCount).toBeNull();
-  });
-
-  it("offers only the remaining tail when it is smaller than the preview count", () => {
-    const window = getSidebarThreadWindow({
-      threads: makeKeys(previewLimit + 2),
-      getThreadKey,
-      activeThreadKey: null,
-      previewLimit,
-      revealedCount: 0,
-    });
-
-    expect(window.nextRevealCount).toBe(2);
-    expect(window.searchHandoffThreadCount).toBeNull();
-  });
-
-  it("uses the configured preview count for the reveal step", () => {
-    const configuredPreviewLimit = 5;
-    const window = getSidebarThreadWindow({
-      threads: makeKeys(40),
-      getThreadKey,
-      activeThreadKey: null,
-      previewLimit: configuredPreviewLimit,
-      revealedCount: 0,
-    });
-
-    expect(window.visibleThreads).toHaveLength(configuredPreviewLimit);
-    expect(window.nextRevealCount).toBe(configuredPreviewLimit);
-  });
-
-  it("keeps revealing in chunks once expanded while also offering search", () => {
-    const window = getSidebarThreadWindow({
-      threads: makeKeys(40),
-      getThreadKey,
-      activeThreadKey: null,
-      previewLimit,
-      revealedCount: previewLimit,
-    });
-
-    expect(window.visibleThreads).toHaveLength(previewLimit + previewLimit);
-    expect(window.nextRevealCount).toBe(previewLimit);
-    expect(window.searchHandoffThreadCount).toBe(40);
-    expect(window.isRevealed).toBe(true);
-  });
-
-  it("keeps Show less without further rows when everything is revealed", () => {
-    const window = getSidebarThreadWindow({
-      threads: makeKeys(10),
-      getThreadKey,
-      activeThreadKey: null,
-      previewLimit,
-      revealedCount: 4,
-    });
-
-    expect(window.visibleThreads).toHaveLength(10);
-    expect(window.hiddenThreads).toEqual([]);
-    expect(window.nextRevealCount).toBe(0);
-    expect(window.searchHandoffThreadCount).toBeNull();
-    expect(window.isRevealed).toBe(true);
-  });
-
-  it("does not duplicate an active thread already inside the window", () => {
-    const window = getSidebarThreadWindow({
-      threads: makeKeys(8),
-      getThreadKey,
-      activeThreadKey: "t-2",
-      previewLimit,
-      revealedCount: 0,
-    });
-
-    expect(window.visibleThreads).toEqual(["t-1", "t-2", "t-3", "t-4", "t-5", "t-6"]);
-    expect(window.hiddenThreads).toEqual(["t-7", "t-8"]);
-  });
-
-  it("ignores an active thread that belongs to another project", () => {
-    const window = getSidebarThreadWindow({
-      threads: makeKeys(8),
-      getThreadKey,
-      activeThreadKey: "other-project-thread",
-      previewLimit,
-      revealedCount: 0,
-    });
-
-    expect(window.visibleThreads).toEqual(["t-1", "t-2", "t-3", "t-4", "t-5", "t-6"]);
-    expect(window.hiddenThreads).toEqual(["t-7", "t-8"]);
-  });
-});
-
 function makeProject(overrides: Partial<Project> = {}): Project {
   const { defaultModelSelection, ...rest } = overrides;
   return {
@@ -1245,138 +990,177 @@ describe("sortProjectsForSidebar", () => {
   });
 });
 
-describe("on deck classification", () => {
-  const pill = (label: import("./Sidebar.logic").ThreadStatusPill["label"]) => ({
-    label,
-    colorClass: "",
-    dotClass: "",
-    pulse: false,
+describe("inbox done lifecycle", () => {
+  const NOW = "2026-07-28T12:00:00.000Z";
+  const base = {
+    hasPendingApprovals: false,
+    hasPendingUserInput: false,
+    session: null,
+    latestUserMessageAt: null,
+    latestTurn: null,
+    createdAt: "2026-07-27T12:00:00.000Z",
+    updatedAt: undefined,
+  };
+  const doneMark = { state: "done", at: NOW } as const;
+
+  it("refuses to hide work that is blocked on the user", () => {
+    // Hiding a pending approval defeats the approval: the agent waits forever
+    // on an answer the user can no longer see the question for.
+    expect(isThreadDone({ ...base, hasPendingApprovals: true }, doneMark, { now: NOW })).toBe(
+      false,
+    );
+    expect(isThreadDone({ ...base, hasPendingUserInput: true }, doneMark, { now: NOW })).toBe(
+      false,
+    );
   });
 
-  it("buildOnDeckSyncInput separates live work from unseen completions", () => {
-    expect(
-      buildOnDeckSyncInput({ threadKey: "t-1", pinnedAt: null, status: pill("Working") }),
-    ).toEqual({ key: "t-1", pinned: false, live: true, unseen: false });
-    expect(
-      buildOnDeckSyncInput({ threadKey: "t-2", pinnedAt: null, status: pill("Completed") }),
-    ).toEqual({ key: "t-2", pinned: false, live: false, unseen: true });
+  it("refuses to hide a running thread, even explicitly marked", () => {
+    const running = {
+      ...base,
+      session: { status: "running" } as never,
+    };
+    expect(isThreadDone(running, doneMark, { now: NOW })).toBe(false);
+  });
+
+  it("treats a just-sent message as pending work until a turn adopts it", () => {
+    // Between send and adoption there is no turn and no running session --
+    // the gap where marking Done would hide a message about to run.
+    const queued = {
+      ...base,
+      latestUserMessageAt: "2026-07-28T11:59:30.000Z",
+    };
+    expect(isThreadDone(queued, doneMark, { now: NOW })).toBe(false);
+    // Past the grace window the same shape is a failed start, not pending
+    // work; holding it undoneable forever would strand the thread.
     expect(
-      buildOnDeckSyncInput({
-        threadKey: "t-3",
-        pinnedAt: "2026-03-09T10:00:00.000Z",
-        status: null,
+      isThreadDone({ ...base, latestUserMessageAt: "2026-07-28T11:00:00.000Z" }, doneMark, {
+        now: NOW,
       }),
-    ).toEqual({ key: "t-3", pinned: true, live: false, unseen: false });
+    ).toBe(true);
   });
 
-  it("isOnDeckDismissible allows dismissing settled rows only", () => {
-    expect(isOnDeckDismissible(null)).toBe(true);
-    expect(isOnDeckDismissible(pill("Completed"))).toBe(true);
-    expect(isOnDeckDismissible(pill("Working"))).toBe(false);
-    expect(isOnDeckDismissible(pill("Pending Approval"))).toBe(false);
+  it("lets a failed thread be marked done", () => {
+    // "I saw it, I'm done with it" must be expressible for failures, or the
+    // Done list can never hold anything that went wrong.
+    const failed = { ...base, session: { status: "error" } as never };
+    expect(isThreadDone(failed, doneMark, { now: NOW })).toBe(true);
   });
 
-  it("excludeOnDeckThreads drops deck rows from the tree and keeps the rest in order", () => {
-    const threads = [{ key: "t-1" }, { key: "t-2" }, { key: "t-3" }];
-    const getThreadKey = (thread: { key: string }) => thread.key;
+  it("keeps a thread live without an explicit done mark", () => {
+    expect(isThreadDone(base, null, { now: NOW })).toBe(false);
+    expect(isThreadDone(base, { state: "active", at: NOW }, { now: NOW })).toBe(false);
+  });
 
+  it("ignores an override older than the thread's last activity", () => {
+    // New work outranks an old word, in both directions: the done thread that
+    // starts again returns by itself, the reopened one may re-file itself.
+    const activeAgain = {
+      ...base,
+      latestUserMessageAt: "2026-07-28T11:00:00.000Z",
+    };
     expect(
-      excludeOnDeckThreads({
-        threads,
-        onDeckThreadKeys: new Set(["t-2"]),
-        getThreadKey,
-      }),
-    ).toEqual([{ key: "t-1" }, { key: "t-3" }]);
-
-    expect(excludeOnDeckThreads({ threads, onDeckThreadKeys: new Set(), getThreadKey })).toEqual(
-      threads,
-    );
+      isThreadDone(activeAgain, { state: "done", at: "2026-07-28T10:00:00.000Z" }, { now: NOW }),
+    ).toBe(false);
+  });
 
+  it("files an idle thread under Done on its own", () => {
+    const staleThread = {
+      ...base,
+      latestUserMessageAt: "2026-07-24T12:00:00.000Z",
+    };
+    expect(isThreadDone(staleThread, null, { now: NOW, autoDoneAfterDays: 2 })).toBe(true);
+    // Fresh activity holds it live under the same rule.
     expect(
-      excludeOnDeckThreads({
-        threads,
-        onDeckThreadKeys: new Set(["t-1", "t-2", "t-3"]),
-        getThreadKey,
+      isThreadDone({ ...base, latestUserMessageAt: "2026-07-28T09:00:00.000Z" }, null, {
+        now: NOW,
+        autoDoneAfterDays: 2,
       }),
-    ).toEqual([]);
+    ).toBe(false);
   });
 
-  it("countThreadsNeedingUser counts only threads blocked on the user", () => {
+  it("never auto-files a completion the user has not seen", () => {
+    // Filing unread work is the sidebar reading your mail for you. Only an
+    // explicit Done may put an unseen completion in the tail.
+    const unseen = {
+      ...base,
+      latestTurn: { completedAt: "2026-07-24T12:00:00.000Z" } as never,
+      lastVisitedAt: undefined,
+    };
+    expect(isThreadDone(unseen, null, { now: NOW, autoDoneAfterDays: 2 })).toBe(false);
     expect(
-      countThreadsNeedingUser([
-        pill("Pending Approval"),
-        pill("Awaiting Input"),
-        // Live but unblocked, so the rail badge must ignore these.
-        pill("Working"),
-        pill("Starting"),
-        pill("Plan Ready"),
-        pill("Completed"),
-        null,
-      ]),
-    ).toBe(2);
-    expect(countThreadsNeedingUser([])).toBe(0);
+      isThreadDone(unseen, { state: "done", at: NOW }, { now: NOW, autoDoneAfterDays: 2 }),
+    ).toBe(true);
   });
 });
 
-describe("buildProjectHoverSummary", () => {
-  const thread = (id: string, overrides: Partial<SidebarThreadSummary> = {}) =>
-    ({
-      id: ThreadId.make(id),
-      environmentId: localEnvironmentId,
-      projectId: ProjectId.make("project-badcode"),
-      title: id,
-      interactionMode: DEFAULT_INTERACTION_MODE,
-      session: null,
-      createdAt: "2026-07-20T00:00:00.000Z",
-      archivedAt: null,
-      pinnedAt: null,
-      latestTurn: null,
-      branch: null,
-      worktreePath: null,
-      latestUserMessageAt: null,
-      hasPendingApprovals: false,
-      hasPendingUserInput: false,
-      hasActionableProposedPlan: false,
-      ...overrides,
-    }) as SidebarThreadSummary;
-
-  const summaryFor = (threads: readonly SidebarThreadSummary[]) =>
-    buildProjectHoverSummary({
-      name: "badcode",
-      cwd: "/repo/badcode",
-      environmentId: localEnvironmentId,
-      threads,
-      getLastVisitedAt: () => undefined,
-    });
-
-  it("counts only threads the provider is still live on", () => {
-    const summary = summaryFor([
-      thread("waiting", { hasPendingApprovals: true }),
-      thread("idle"),
-      thread("also-idle"),
-    ]);
+describe("sortInboxThreads", () => {
+  it("holds creation order and floats pins, nothing else", () => {
+    const rows = [
+      { id: "old", createdAt: "2026-07-20T00:00:00.000Z", pinnedAt: null },
+      { id: "pinned", createdAt: "2026-07-18T00:00:00.000Z", pinnedAt: "2026-07-27T00:00:00.000Z" },
+      { id: "new", createdAt: "2026-07-27T00:00:00.000Z", pinnedAt: null },
+    ];
 
-    expect(summary.threadCount).toBe(3);
-    expect(summary.activeCount).toBe(1);
-    expect(summary.status?.label).toBe("Pending Approval");
+    // Activity timestamps are deliberately absent from the input type: the
+    // list must be un-reorderable by anything but creation and pinning.
+    expect(sortInboxThreads(rows).map((row) => row.id)).toEqual(["pinned", "new", "old"]);
   });
+});
 
-  it("reports the most recent activity across the project", () => {
-    const summary = summaryFor([
-      thread("older", { latestUserMessageAt: "2026-07-21T00:00:00.000Z" }),
-      thread("newest", { latestUserMessageAt: "2026-07-24T00:00:00.000Z" }),
-      thread("middle", { latestUserMessageAt: "2026-07-22T00:00:00.000Z" }),
-    ]);
+describe("buildProjectScopeOptions", () => {
+  it("orders by recent activity and carries needs-you counts", () => {
+    const options = buildProjectScopeOptions({
+      projects: [
+        { key: "a", label: "alpha" },
+        { key: "b", label: "beta" },
+        { key: "c", label: "gamma" },
+        { key: "d", label: "delta" },
+      ],
+      lastActivityMsByKey: new Map([
+        ["a", 400],
+        ["b", 300],
+        ["c", 200],
+      ]),
+      needsYouCountByKey: new Map([["b", 2]]),
+    });
 
-    expect(summary.lastActivityAt).toBe("2026-07-24T00:00:00.000Z");
+    // "d" has never been touched, so it sorts last rather than dropping out.
+    expect(options.map((option) => option.key)).toEqual(["a", "b", "c", "d"]);
+    expect(options[1]?.needsYouCount).toBe(2);
+    expect(options[0]?.needsYouCount).toBe(0);
   });
+});
+
+describe("windowInboxThreads", () => {
+  const rows = [
+    { id: "a", attention: false },
+    { id: "b", attention: false },
+    { id: "c", attention: false },
+    { id: "d", attention: true },
+    { id: "e", attention: false },
+  ];
+  const hasAttention = (row: { attention: boolean }) => row.attention;
+
+  it("folds quiet rows past the limit but never one that needs you", () => {
+    // Hiding a pending approval behind "show more" defeats the approval.
+    const { visible, hiddenCount } = windowInboxThreads({
+      rows,
+      hasAttention,
+      limit: 2,
+      expanded: false,
+    });
 
-  it("describes an empty project without inventing activity", () => {
-    const summary = summaryFor([]);
+    expect(visible.map((row) => row.id)).toEqual(["a", "b", "d"]);
+    expect(hiddenCount).toBe(2);
+  });
 
-    expect(summary.threadCount).toBe(0);
-    expect(summary.activeCount).toBe(0);
-    expect(summary.status).toBeNull();
-    expect(summary.lastActivityAt).toBeNull();
+  it("shows everything when expanded or when the list fits", () => {
+    expect(windowInboxThreads({ rows, hasAttention, limit: 2, expanded: true }).hiddenCount).toBe(
+      0,
+    );
+    expect(
+      windowInboxThreads({ rows: rows.slice(0, 2), hasAttention, limit: 2, expanded: false })
+        .visible.length,
+    ).toBe(2);
   });
 });
diff --git a/apps/web/src/components/Sidebar.logic.ts b/apps/web/src/components/Sidebar.logic.ts
index 744168d5..5a4f4401 100644
--- a/apps/web/src/components/Sidebar.logic.ts
+++ b/apps/web/src/components/Sidebar.logic.ts
@@ -10,11 +10,7 @@ import {
   toSortableTimestamp,
   type ThreadSortInput,
 } from "../lib/threadSort";
-import type { EnvironmentId } from "@threadlines/contracts";
-import { scopedThreadKey, scopeThreadRef } from "@threadlines/client-runtime";
 import type { SidebarThreadSummary, Thread } from "../types";
-import type { OnDeckSyncInput } from "../uiStateStore";
-import { cn } from "../lib/utils";
 import { isLatestTurnSettled } from "../session-logic";
 
 export const THREAD_SELECTION_SAFE_SELECTOR = "[data-thread-item], [data-thread-selection-safe]";
@@ -40,28 +36,20 @@ export interface ThreadStatusPill {
     | "Pending Approval"
     | "Awaiting Input"
     | "Plan Ready"
-    | "Background";
+    | "Background"
+    | "Failed";
   colorClass: string;
   dotClass: string;
   pulse: boolean;
 }
 
-const THREAD_STATUS_PRIORITY: Record<ThreadStatusPill["label"], number> = {
-  "Pending Approval": 5,
-  "Awaiting Input": 4,
-  Working: 3,
-  Starting: 3,
-  "Plan Ready": 2,
-  Background: 2,
-  Completed: 1,
-};
-
 export const THREAD_STATUS_DOT_CLASSES = {
   amber: "bg-amber-500 dark:bg-amber-300/90",
   blue: "bg-primary-graph",
   cyan: "bg-cyan-500 dark:bg-cyan-300/90",
   emerald: "bg-emerald-500 dark:bg-emerald-300/90",
   violet: "bg-violet-500 dark:bg-violet-300/90",
+  red: "bg-red-500 dark:bg-red-400/90",
 } as const;
 
 type ThreadStatusInput = Pick<
@@ -161,7 +149,9 @@ export function useThreadJumpHintVisibility(): {
   };
 }
 
-export function hasUnseenCompletion(thread: ThreadStatusInput): boolean {
+export function hasUnseenCompletion(
+  thread: Pick<SidebarThreadSummary, "latestTurn"> & { lastVisitedAt?: string | undefined },
+): boolean {
   if (!thread.latestTurn?.completedAt) return false;
   const completedAt = Date.parse(thread.latestTurn.completedAt);
   if (Number.isNaN(completedAt)) return false;
@@ -258,17 +248,6 @@ export function orderItemsByPreferredIds<TItem, TId>(input: {
   return [...ordered, ...remaining];
 }
 
-export function getVisibleSidebarThreadIds<TThreadId>(
-  renderedProjects: readonly {
-    shouldShowThreadPanel?: boolean;
-    renderedThreadIds: readonly TThreadId[];
-  }[],
-): TThreadId[] {
-  return renderedProjects.flatMap((renderedProject) =>
-    renderedProject.shouldShowThreadPanel === false ? [] : renderedProject.renderedThreadIds,
-  );
-}
-
 export function getSidebarThreadIdsToPrewarm<TThreadId>(
   visibleThreadIds: readonly TThreadId[],
   limit = SIDEBAR_THREAD_PREWARM_LIMIT,
@@ -312,37 +291,6 @@ export function isContextMenuPointerDown(input: {
   return input.isMac && input.button === 0 && input.ctrlKey;
 }
 
-export function resolveThreadRowClassName(input: {
-  isActive: boolean;
-  isSelected: boolean;
-}): string {
-  const baseClassName =
-    "h-7 w-full translate-x-0 cursor-pointer justify-start px-2 text-left select-none focus-ring focus-visible:ring-inset";
-
-  if (input.isSelected && input.isActive) {
-    return cn(
-      baseClassName,
-      "bg-primary/22 text-foreground font-medium hover:bg-primary/26 hover:text-foreground dark:bg-primary/30 dark:hover:bg-primary/36",
-    );
-  }
-
-  if (input.isSelected) {
-    return cn(
-      baseClassName,
-      "bg-primary/15 text-foreground hover:bg-primary/19 hover:text-foreground dark:bg-primary/22 dark:hover:bg-primary/28",
-    );
-  }
-
-  if (input.isActive) {
-    return cn(
-      baseClassName,
-      "bg-accent/85 text-foreground font-medium hover:bg-accent hover:text-foreground dark:bg-accent/55 dark:hover:bg-accent/70",
-    );
-  }
-
-  return cn(baseClassName, "text-muted-foreground hover:bg-accent hover:text-foreground");
-}
-
 export function resolveThreadStatusPill(input: {
   thread: ThreadStatusInput;
 }): ThreadStatusPill | null {
@@ -386,6 +334,17 @@ export function resolveThreadStatusPill(input: {
     };
   }
 
+  if (thread.session?.status === "error") {
+    // Failed threads previously showed nothing -- indistinguishable from
+    // healthy idle ones, which is the worst place for a failure to hide.
+    return {
+      label: "Failed",
+      colorClass: "text-red-600 dark:text-red-400/90",
+      dotClass: THREAD_STATUS_DOT_CLASSES.red,
+      pulse: false,
+    };
+  }
+
   const hasPlanReadyPrompt =
     !thread.hasPendingUserInput &&
     thread.interactionMode === "plan" &&
@@ -424,163 +383,35 @@ export function resolveThreadStatusPill(input: {
   return null;
 }
 
-/** Statuses that mean the provider is working or waiting on the user right now. */
-const ON_DECK_LIVE_STATUSES: ReadonlySet<ThreadStatusPill["label"]> = new Set([
-  "Pending Approval",
-  "Awaiting Input",
-  "Working",
-  "Starting",
-  "Plan Ready",
-  "Background",
-]);
-
-/** Maps a thread's status pill and pin state onto the deck's entry signals. */
-export function buildOnDeckSyncInput(input: {
-  threadKey: string;
-  pinnedAt: string | null;
-  status: ThreadStatusPill | null;
-}): OnDeckSyncInput {
-  return {
-    key: input.threadKey,
-    pinned: input.pinnedAt !== null,
-    live: input.status !== null && ON_DECK_LIVE_STATUSES.has(input.status.label),
-    unseen: input.status?.label === "Completed",
-  };
-}
-
-/** Only settled rows offer the dismiss affordance; live work can't be waved away. */
-export function isOnDeckDismissible(status: ThreadStatusPill | null): boolean {
-  return status === null || !ON_DECK_LIVE_STATUSES.has(status.label);
-}
-
-/**
- * Drops threads that already have a deck row, so a thread on deck appears once
- * in the sidebar rather than twice. Must be applied *before* the preview window
- * is computed: a deck thread should not consume a preview slot and then vanish,
- * which would leave "Show more" counts disagreeing with the rendered rows.
- */
-export function excludeOnDeckThreads<TThread>(input: {
-  threads: readonly TThread[];
-  onDeckThreadKeys: ReadonlySet<string>;
-  getThreadKey: (thread: TThread) => string;
-}): TThread[] {
-  if (input.onDeckThreadKeys.size === 0) {
-    return [...input.threads];
-  }
-  return input.threads.filter((thread) => !input.onDeckThreadKeys.has(input.getThreadKey(thread)));
-}
-
 /**
  * Statuses where the agent has stopped and cannot continue without the user.
- * Narrower than {@link ON_DECK_LIVE_STATUSES}: a working thread is live but
- * needs nothing, and a ready plan is an invitation rather than a block.
+ * Narrower than "busy": a working thread needs nothing, and a ready plan is an
+ * invitation rather than a block.
  */
 const NEEDS_USER_STATUSES: ReadonlySet<ThreadStatusPill["label"]> = new Set([
   "Pending Approval",
   "Awaiting Input",
+  "Failed",
 ]);
 
-/** True while the provider is working on the thread or waiting on the user. */
-export function isLiveThreadStatus(status: ThreadStatusPill | null): boolean {
-  return status !== null && ON_DECK_LIVE_STATUSES.has(status.label);
-}
-
 /** True when the thread is blocked waiting on the user. */
 export function isNeedsUserStatus(status: ThreadStatusPill | null): boolean {
   return status !== null && NEEDS_USER_STATUSES.has(status.label);
 }
 
 /**
- * How many threads are blocked on the user. The collapsed sidebar rail drops
- * per-thread titles, so this aggregate is the only attention signal left.
+ * The single word a row spends on status. Only states that stop the agent and
+ * hand the thread back earn one; in-flight work reads as "working" with its
+ * elapsed time, and everything else rests with a timestamp instead.
  */
-export function countThreadsNeedingUser(statuses: ReadonlyArray<ThreadStatusPill | null>): number {
-  let count = 0;
-  for (const status of statuses) {
-    if (isNeedsUserStatus(status)) count += 1;
-  }
-  return count;
-}
-
-export function resolveProjectStatusIndicator(
-  statuses: ReadonlyArray<ThreadStatusPill | null>,
-): ThreadStatusPill | null {
-  let highestPriorityStatus: ThreadStatusPill | null = null;
-
-  for (const status of statuses) {
-    if (status === null) continue;
-    if (
-      highestPriorityStatus === null ||
-      THREAD_STATUS_PRIORITY[status.label] > THREAD_STATUS_PRIORITY[highestPriorityStatus.label]
-    ) {
-      highestPriorityStatus = status;
-    }
-  }
-
-  return highestPriorityStatus;
-}
+const INBOX_STATUS_WORDS: Partial<Record<ThreadStatusPill["label"], string>> = {
+  "Pending Approval": "approval",
+  "Awaiting Input": "input",
+  Failed: "failed",
+};
 
-export interface SidebarThreadWindow<T> {
-  visibleThreads: T[];
-  hiddenThreads: T[];
-  /** How many threads the next "Show more" click reveals (0 = no row). */
-  nextRevealCount: number;
-  /** Total thread count for the "Search all N threads" row (null = no row). */
-  searchHandoffThreadCount: number | null;
-  /** True once the user revealed beyond the preview (shows "Show less"). */
-  isRevealed: boolean;
-}
-
-export function getSidebarThreadWindow<T>(input: {
-  threads: readonly T[];
-  getThreadKey: (thread: T) => string;
-  activeThreadKey: string | null;
-  previewLimit: number;
-  revealedCount: number;
-}): SidebarThreadWindow<T> {
-  const { activeThreadKey, getThreadKey, previewLimit, revealedCount, threads } = input;
-  const isRevealed = revealedCount > 0;
-  const windowSize = previewLimit + Math.max(0, revealedCount);
-
-  if (threads.length <= windowSize) {
-    return {
-      visibleThreads: [...threads],
-      hiddenThreads: [],
-      nextRevealCount: 0,
-      searchHandoffThreadCount: null,
-      isRevealed,
-    };
-  }
-
-  const windowThreads = threads.slice(0, windowSize);
-  // The active thread always stays visible, even when it falls in the hidden
-  // tail, so the current-thread marker never disappears from the sidebar.
-  const visibleThreadKeys = new Set(windowThreads.map(getThreadKey));
-  const includeActiveThread =
-    activeThreadKey !== null &&
-    !visibleThreadKeys.has(activeThreadKey) &&
-    threads.some((thread) => getThreadKey(thread) === activeThreadKey);
-  if (includeActiveThread) {
-    visibleThreadKeys.add(activeThreadKey);
-  }
-
-  const visibleThreads = includeActiveThread
-    ? threads.filter((thread) => visibleThreadKeys.has(getThreadKey(thread)))
-    : windowThreads;
-  const hiddenThreads = threads.filter((thread) => !visibleThreadKeys.has(getThreadKey(thread)));
-
-  // Reveal in preview-sized chunks until the tail is exhausted. Search remains
-  // available after the first expansion as a fast path for huge projects.
-  const revealStepSize = Math.max(0, previewLimit);
-  const nextRevealCount = Math.min(hiddenThreads.length, revealStepSize);
-
-  return {
-    visibleThreads,
-    hiddenThreads,
-    nextRevealCount,
-    searchHandoffThreadCount: isRevealed && hiddenThreads.length > 0 ? threads.length : null,
-    isRevealed,
-  };
+export function inboxStatusWord(status: ThreadStatusPill | null): string | null {
+  return status === null ? null : (INBOX_STATUS_WORDS[status.label] ?? null);
 }
 
 export function getFallbackThreadIdAfterDelete<
@@ -699,50 +530,252 @@ export function sortScopedProjectsByActivity<
   });
 }
 
-export interface ProjectHoverSummary {
-  name: string;
-  cwd: string;
-  environmentId: EnvironmentId;
-  status: ThreadStatusPill | null;
-  threadCount: number;
-  activeCount: number;
-  lastActivityAt: string | null;
+// ── Inbox lifecycle ──────────────────────────────────────────────────
+//
+// The sidebar is an inbox: one live list, a Done tail. "Done" is a client-side
+// overlay in v1 -- an override the user sets, resolved against the thread's
+// actual state. The rules below owe their shape to studying how the settle
+// lifecycle goes wrong: the invariant that matters is that no override may
+// hide work that is moving or blocked on the user.
+
+/**
+ * A queued turn start counts as pending work for at most this long.
+ *
+ * Between sending a message and a session adopting it, the work is invisible
+ * to every status check: no turn, no running session. Without a bound, a
+ * thread whose start failed would be permanently un-doneable; without the
+ * guard, marking Done in that gap would hide a message that is about to run.
+ */
+export const QUEUED_TURN_START_GRACE_MS = 2 * 60 * 1_000;
+
+type InboxLifecycleInput = Pick<
+  SidebarThreadSummary,
+  "hasPendingApprovals" | "hasPendingUserInput" | "session" | "latestUserMessageAt" | "latestTurn"
+>;
+
+/**
+ * A user message no turn has picked up yet: strictly newer than every
+ * timestamp on the latest turn, and within the adoption grace window. Bounded
+ * on both sides because message timestamps originate on whichever device sent
+ * them -- a clock ahead of this one would otherwise hold the queued state for
+ * the whole skew.
+ */
+export function hasQueuedTurnStart(
+  thread: InboxLifecycleInput,
+  options: { readonly now: string },
+): boolean {
+  if (thread.latestUserMessageAt == null) return false;
+  // A failed start is already visible as the Failed pill; holding the queued
+  // state too would make the thread un-doneable while it screams red.
+  if (thread.session?.status === "error") return false;
+  const messageAt = Date.parse(thread.latestUserMessageAt);
+  if (Number.isNaN(messageAt)) return false;
+  const nowMs = Date.parse(options.now);
+  if (Number.isNaN(nowMs)) return false;
+  if (Math.abs(nowMs - messageAt) > QUEUED_TURN_START_GRACE_MS) return false;
+  const turn = thread.latestTurn;
+  if (turn === null) return true;
+  return [turn.requestedAt, turn.startedAt, turn.completedAt].every(
+    (candidate) => candidate == null || Date.parse(candidate) < messageAt,
+  );
 }
 
 /**
- * Builds a project's hover summary from its threads. Shared so the expanded row
- * and the collapsed rail glyph describe a project identically.
+ * Whether Done is allowed right now. Work that is moving, blocked on the
+ * user, or queued cannot be waved away: hiding a pending approval defeats
+ * the approval, and hiding a running turn hides where its result will land.
+ * A failed thread CAN be marked done -- that is "I saw it, I'm done with it".
  */
-export function buildProjectHoverSummary(input: {
-  name: string;
-  cwd: string;
-  environmentId: EnvironmentId;
-  threads: readonly SidebarThreadSummary[];
-  getLastVisitedAt: (threadKey: string) => string | null | undefined;
-}): ProjectHoverSummary {
-  const getThreadKey = (thread: SidebarThreadSummary) =>
-    scopedThreadKey(scopeThreadRef(thread.environmentId, thread.id));
-  const statuses = input.threads.map((thread) => {
-    const lastVisitedAt = input.getLastVisitedAt(getThreadKey(thread));
-    return resolveThreadStatusPill({
-      thread: {
-        ...thread,
-        ...(lastVisitedAt !== undefined && lastVisitedAt !== null ? { lastVisitedAt } : {}),
-      },
-    });
+export function canMarkThreadDone(
+  thread: InboxLifecycleInput,
+  options: { readonly now: string },
+): boolean {
+  if (thread.hasPendingApprovals || thread.hasPendingUserInput) return false;
+  // The same in-flight resolution the status pill uses, so "can't be marked
+  // done" and "shows as working" can never disagree about what running means.
+  if (getThreadInFlightStatus(thread) !== null) return false;
+  if (hasQueuedTurnStart(thread, options)) return false;
+  return true;
+}
+
+/**
+ * The user's explicit word on a thread's lifecycle, stamped when given.
+ * "active" exists so a reopened thread stays reopened once auto-done rules
+ * arrive; today it simply reads as not-done.
+ */
+export interface ThreadDoneOverride {
+  readonly state: "done" | "active";
+  readonly at: string;
+}
+
+const DAY_MS = 24 * 60 * 60 * 1_000;
+
+/**
+ * How long a thread sits idle before it files itself under Done.
+ *
+ * Without this the live list is every thread ever opened: one-off questions
+ * from three weeks ago standing shoulder to shoulder with this morning's
+ * work, which is the sidebar this design exists to replace. Two days keeps
+ * yesterday's threads at hand and lets the weekend clear the desk.
+ */
+export const INBOX_AUTO_DONE_AFTER_DAYS = 2;
+
+/**
+ * Where a thread lives. Resolution order, each layer outranking the next:
+ *
+ * 1. Blockers. Moving or blocked-on-you work is live, whatever anyone said.
+ * 2. The user's override -- but only while it is FRESHER than the thread's
+ *    last activity. New work outranks an old word in both directions: a done
+ *    thread that starts again pulls itself back without being un-marked, and
+ *    a reopened thread that goes quiet again is allowed to re-file itself.
+ * 3. Auto-done on idle, unless the thread holds a completion the user has
+ *    not seen -- unread work is the inbox's reason to exist, and filing it
+ *    unread would be the sidebar reading your mail for you.
+ */
+export function isThreadDone(
+  thread: InboxLifecycleInput & DoneSortInput & { readonly lastVisitedAt?: string | undefined },
+  override: ThreadDoneOverride | null | undefined,
+  options: { readonly now: string; readonly autoDoneAfterDays?: number | null },
+): boolean {
+  if (!canMarkThreadDone(thread, options)) return false;
+  const lastActivityAt = resolveDoneTimestamp(thread, null);
+  const overrideIsStale =
+    override != null &&
+    lastActivityAt !== null &&
+    Date.parse(lastActivityAt) > Date.parse(override.at);
+  if (override != null && !overrideIsStale) {
+    return override.state === "done";
+  }
+  if (options.autoDoneAfterDays == null) return false;
+  if (hasUnseenCompletion(thread)) return false;
+  if (lastActivityAt === null) return false;
+  return Date.parse(lastActivityAt) < Date.parse(options.now) - options.autoDoneAfterDays * DAY_MS;
+}
+
+/**
+ * The live list holds still. Creation order, newest first; activity never
+ * reorders it, so a row keeps its place from open until it is marked done
+ * and the thing you were reaching for never jumps. Pins are the one
+ * exception, and they move only when you pin -- your action, your motion.
+ */
+export function sortInboxThreads<
+  T extends { readonly id: string; readonly createdAt: string; readonly pinnedAt: string | null },
+>(threads: readonly T[]): T[] {
+  return [...threads].toSorted((left, right) => {
+    if ((left.pinnedAt !== null) !== (right.pinnedAt !== null)) {
+      return left.pinnedAt !== null ? -1 : 1;
+    }
+    if (left.pinnedAt !== null && right.pinnedAt !== null) {
+      const byPin =
+        (toSortableTimestamp(right.pinnedAt) ?? 0) - (toSortableTimestamp(left.pinnedAt) ?? 0);
+      if (byPin !== 0) return byPin;
+    }
+    const byCreated =
+      (toSortableTimestamp(right.createdAt) ?? 0) - (toSortableTimestamp(left.createdAt) ?? 0);
+    return byCreated !== 0 ? byCreated : left.id.localeCompare(right.id);
   });
-  const lastActivityAt = input.threads.reduce<string | null>((latest, thread) => {
-    const at = thread.latestUserMessageAt ?? thread.updatedAt ?? thread.createdAt;
-    return latest === null || at > latest ? at : latest;
-  }, null);
+}
 
-  return {
-    name: input.name,
-    cwd: input.cwd,
-    environmentId: input.environmentId,
-    status: resolveProjectStatusIndicator(statuses),
-    threadCount: input.threads.length,
-    activeCount: statuses.filter(isLiveThreadStatus).length,
-    lastActivityAt,
+type DoneSortInput = Pick<
+  SidebarThreadSummary,
+  "latestUserMessageAt" | "latestTurn" | "updatedAt" | "createdAt"
+>;
+
+/**
+ * Done rows are history, so they order by when the work ended: the explicit
+ * mark when there is one, else the thread's last activity. Label and order
+ * both come from here so they can never disagree.
+ */
+export function resolveDoneTimestamp(
+  thread: DoneSortInput,
+  override: ThreadDoneOverride | null | undefined,
+): string | null {
+  if (override?.state === "done" && !Number.isNaN(Date.parse(override.at))) {
+    return override.at;
+  }
+  let latest: string | null = null;
+  let latestMs = Number.NEGATIVE_INFINITY;
+  for (const candidate of [
+    thread.latestUserMessageAt,
+    thread.latestTurn?.requestedAt,
+    thread.latestTurn?.startedAt,
+    thread.latestTurn?.completedAt,
+  ]) {
+    if (candidate == null) continue;
+    const parsed = Date.parse(candidate);
+    if (!Number.isNaN(parsed) && parsed > latestMs) {
+      latest = candidate;
+      latestMs = parsed;
+    }
+  }
+  return latest ?? thread.updatedAt ?? thread.createdAt;
+}
+
+export function sortDoneThreads<T extends DoneSortInput & { readonly id: string }>(
+  threads: readonly T[],
+  overrideFor: (thread: T) => ThreadDoneOverride | null | undefined,
+): T[] {
+  const timestampMs = (thread: T) => {
+    const timestamp = resolveDoneTimestamp(thread, overrideFor(thread));
+    return timestamp === null ? 0 : (toSortableTimestamp(timestamp) ?? 0);
   };
+  return [...threads].toSorted(
+    (left, right) => timestampMs(right) - timestampMs(left) || left.id.localeCompare(right.id),
+  );
+}
+
+// ── Project scope ────────────────────────────────────────────────────
+
+export interface ProjectScopeOption {
+  readonly key: string;
+  readonly label: string;
+  /** Threads in this project blocked on the user, shown beside its name. */
+  readonly needsYouCount: number;
+}
+
+/**
+ * The scope menu's projects, most-recently-active first.
+ *
+ * A menu has room for all of them, so ordering is the whole job: whatever you
+ * touched last sits under the cursor when the menu opens.
+ */
+export function buildProjectScopeOptions(input: {
+  readonly projects: ReadonlyArray<{ readonly key: string; readonly label: string }>;
+  readonly lastActivityMsByKey: ReadonlyMap<string, number>;
+  readonly needsYouCountByKey: ReadonlyMap<string, number>;
+}): ProjectScopeOption[] {
+  return [...input.projects]
+    .toSorted(
+      (left, right) =>
+        (input.lastActivityMsByKey.get(right.key) ?? 0) -
+          (input.lastActivityMsByKey.get(left.key) ?? 0) || left.label.localeCompare(right.label),
+    )
+    .map((project) => ({
+      key: project.key,
+      label: project.label,
+      needsYouCount: input.needsYouCountByKey.get(project.key) ?? 0,
+    }));
+}
+
+/**
+ * Which live rows show while the list is folded.
+ *
+ * The live list keeps every thread, but only the first few quiet ones are
+ * worth screen space at rest -- a dev session mints a dozen threads a day and
+ * a wall of two-line rows buries the ones that matter. Rows with a status are
+ * exempt from the fold entirely: hiding a pending approval behind "show more"
+ * defeats the approval, and hiding running work hides where its result will
+ * land. Order is never changed, only membership.
+ */
+export function windowInboxThreads<T>(input: {
+  readonly rows: readonly T[];
+  readonly hasAttention: (row: T) => boolean;
+  readonly limit: number;
+  readonly expanded: boolean;
+}): { readonly visible: T[]; readonly hiddenCount: number } {
+  if (input.expanded || input.rows.length <= input.limit) {
+    return { visible: [...input.rows], hiddenCount: 0 };
+  }
+  const visible = input.rows.filter((row, index) => index < input.limit || input.hasAttention(row));
+  return { visible, hiddenCount: input.rows.length - visible.length };
 }
diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index aa76c24b..67cec70e 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -1,52 +1,18 @@
 import {
-  ArchiveIcon,
-  ArrowUpDownIcon,
-  ChevronRightIcon,
-  ChevronUpIcon,
-  CloudIcon,
-  FolderPlusIcon,
+  ChevronDownIcon,
+  ChevronsUpIcon,
+  MessageCirclePlusIcon,
   MessagesSquareIcon,
-  PinIcon,
-  PinOffIcon,
   SearchIcon,
   SettingsIcon,
   SquarePenIcon,
-  TerminalIcon,
 } from "lucide-react";
-import {
-  ChangeRequestStatusIcon,
-  prStatusIndicator,
-  resolveThreadPr,
-  terminalStatusFromRunningIds,
-  ThreadRailNode,
-  ThreadStatusLabel,
-} from "./ThreadStatusIndicators";
 import { ThreadlinesGlyph } from "./Icons";
-import { LiveNode, SectionLabel } from "./ui/threadline";
-import { ProjectFavicon } from "./ProjectFavicon";
-import { autoAnimate } from "@formkit/auto-animate";
 import React, { useCallback, useEffect, memo, useMemo, useRef, useState } from "react";
 import { useShallow } from "zustand/react/shallow";
 import {
-  DndContext,
-  type DragCancelEvent,
-  type CollisionDetection,
-  PointerSensor,
-  type DragStartEvent,
-  closestCorners,
-  pointerWithin,
-  useSensor,
-  useSensors,
-  type DragEndEvent,
-} from "@dnd-kit/core";
-import { SortableContext, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
-import { restrictToFirstScrollableAncestor, restrictToVerticalAxis } from "@dnd-kit/modifiers";
-import { CSS } from "@dnd-kit/utilities";
-import {
-  type ContextMenuItem,
-  ProjectId,
+  type ScopedProjectRef,
   type ScopedThreadRef,
-  type SidebarProjectGroupingMode,
   type ThreadEnvMode,
   ThreadId,
 } from "@threadlines/contracts";
@@ -58,25 +24,15 @@ import {
   scopeThreadRef,
 } from "@threadlines/client-runtime";
 import { Link, useLocation, useNavigate, useParams, useRouter } from "@tanstack/react-router";
-import {
-  MAX_SIDEBAR_THREAD_PREVIEW_COUNT,
-  MIN_SIDEBAR_THREAD_PREVIEW_COUNT,
-  type SidebarProjectSortOrder,
-  type SidebarThreadPreviewCount,
-  type SidebarThreadSortOrder,
-} from "@threadlines/contracts/settings";
-import { resolveThreadWorkingCwd } from "@threadlines/shared/threadCwd";
 import { usePrimaryEnvironmentId } from "../environments/primary";
-import { resolveGeneralChatsProjectRef } from "../lib/generalChats";
 import { isElectron } from "../env";
 import { APP_BASE_NAME, APP_STAGE_LABEL, APP_VERSION } from "../branding";
 import { isTerminalFocused } from "../lib/terminalFocus";
 import { cn, isMacPlatform, newCommandId } from "../lib/utils";
+import { toSortableTimestamp } from "../lib/threadSort";
 import {
   selectProjectByRef,
-  selectGeneralChatsProjectAcrossEnvironments,
   selectProjectsAcrossEnvironments,
-  selectSidebarThreadsForProjectRefs,
   selectSidebarThreadsAcrossEnvironments,
   selectThreadByRef,
   useStore,
@@ -93,12 +49,11 @@ import {
 } from "../keybindings";
 import { useModelPickerOpen } from "../modelPickerOpenState";
 import { useShortcutModifierState } from "../shortcutModifierState";
-import { useGitStatus } from "../lib/gitStatusState";
 import { readLocalApi } from "../localApi";
 import { useComposerDraftStore } from "../composerDraftStore";
-import { useHandleNewThread, useNewThreadHandler } from "../hooks/useHandleNewThread";
+import { useHandleNewThread } from "../hooks/useHandleNewThread";
+import { useRelativeTimeTick } from "../hooks/useRelativeTimeTick";
 import { retainThreadDetailSubscription } from "../environments/runtime/service";
-
 import { useThreadActions } from "../hooks/useThreadActions";
 import {
   buildThreadRouteParams,
@@ -106,37 +61,8 @@ import {
   resolveThreadRouteTarget,
 } from "../threadRoutes";
 import { stackedThreadToast, toastManager } from "./ui/toast";
-import { formatRelativeTimeLabel } from "../timestampFormat";
 import { SettingsSidebarNav } from "./settings/SettingsSidebarNav";
 import { Kbd } from "./ui/kbd";
-import { Button } from "./ui/button";
-import {
-  Dialog,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogPanel,
-  DialogPopup,
-  DialogTitle,
-} from "./ui/dialog";
-import { Input } from "./ui/input";
-import {
-  Menu,
-  MenuGroup,
-  MenuPopup,
-  MenuRadioGroup,
-  MenuRadioItem,
-  MenuSeparator,
-  MenuTrigger,
-} from "./ui/menu";
-import {
-  NumberField,
-  NumberFieldDecrement,
-  NumberFieldGroup,
-  NumberFieldIncrement,
-  NumberFieldInput,
-} from "./ui/number-field";
-import { Select, SelectItem, SelectPopup, SelectTrigger, SelectValue } from "./ui/select";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "./ui/tooltip";
 import {
   SidebarContent,
@@ -146,9 +72,6 @@ import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
-  SidebarMenuSub,
-  SidebarMenuSubButton,
-  SidebarMenuSubItem,
   SidebarSeparator,
   SidebarTrigger,
   useSidebar,
@@ -156,50 +79,36 @@ import {
 import { useThreadSelectionStore } from "../threadSelectionStore";
 import { useCommandPaletteStore } from "../commandPaletteStore";
 import {
-  buildOnDeckSyncInput,
-  buildProjectHoverSummary,
-  excludeOnDeckThreads,
+  buildProjectScopeOptions,
+  canMarkThreadDone,
   getSidebarThreadIdsToPrewarm,
-  getSidebarThreadWindow,
-  isOnDeckDismissible,
+  isNeedsUserStatus,
+  INBOX_AUTO_DONE_AFTER_DAYS,
+  isThreadDone,
   resolveAdjacentThreadId,
-  isContextMenuPointerDown,
-  resolveProjectStatusIndicator,
+  resolveDoneTimestamp,
   resolveSidebarNewThreadSeedContext,
   resolveSidebarNewThreadEnvMode,
-  resolveThreadRowClassName,
   resolveThreadStatusPill,
-  orderItemsByPreferredIds,
   shouldClearThreadSelectionOnMouseDown,
-  sortProjectsForSidebar,
+  sortDoneThreads,
+  sortInboxThreads,
+  windowInboxThreads,
   useThreadJumpHintVisibility,
-  ThreadStatusPill,
+  type ThreadStatusPill,
 } from "./Sidebar.logic";
-import { OnDeckSection, type OnDeckEntry } from "./sidebar/OnDeckSection";
-import { DeckRail, type DeckRailProject } from "./sidebar/DeckRail";
-import { ProjectHoverCard } from "./sidebar/ProjectHoverCard";
+import { InboxDoneRow, InboxThreadRow } from "./sidebar/InboxRows";
+import { ProjectScopeMenu } from "./sidebar/ProjectScopeMenu";
 import { SidebarHoverCardGroup } from "./sidebar/hoverCard";
-import {
-  DESTINATION_ICONS,
-  DestinationBand,
-  type SidebarDestination,
-} from "./sidebar/DestinationBand";
-import { startNewGeneralChatThread, startNewThreadFromContext } from "../lib/chatThreadActions";
-import { sortThreads } from "../lib/threadSort";
+import { ThreadHoverCardProvider } from "./sidebar/ThreadHoverCard";
+import { resolveThreadActionProjectRef, startNewGeneralChatThread } from "../lib/chatThreadActions";
 import { SidebarUpdatePill } from "./sidebar/SidebarUpdatePill";
 import { SidebarVersionTag } from "./sidebar/SidebarVersionTag";
-import { useCopyToClipboard } from "~/hooks/useCopyToClipboard";
-import { CommandDialogTrigger } from "./ui/command";
 import { readEnvironmentApi } from "../environmentApi";
-import { useSettings, useUpdateSettings } from "~/hooks/useSettings";
+import { useSettings } from "~/hooks/useSettings";
 import { useServerKeybindings } from "../rpc/serverState";
 import { resolveElectronSidebarWordmarkLayout } from "../desktopChrome";
-import {
-  derivePhysicalProjectKey,
-  deriveProjectGroupingOverrideKey,
-  getProjectOrderKey,
-  selectProjectGroupingSettings,
-} from "../logicalProject";
+import { derivePhysicalProjectKey, selectProjectGroupingSettings } from "../logicalProject";
 import {
   useSavedEnvironmentRegistryStore,
   useSavedEnvironmentRuntimeStore,
@@ -208,57 +117,33 @@ import type { SidebarThreadSummary } from "../types";
 import {
   buildPhysicalToLogicalProjectKeyMap,
   buildSidebarProjectSnapshots,
-  type SidebarProjectGroupMember,
   type SidebarProjectSnapshot,
 } from "../sidebarProjectGrouping";
 import { SidebarProviderUpdatePill } from "./sidebar/SidebarProviderUpdatePill";
-const SIDEBAR_SORT_LABELS: Record<SidebarProjectSortOrder, string> = {
-  updated_at: "Last user message",
-  created_at: "Created at",
-  manual: "Manual",
-};
-const SIDEBAR_THREAD_SORT_LABELS: Record<SidebarThreadSortOrder, string> = {
-  updated_at: "Last user message",
-  created_at: "Created at",
-};
-const SIDEBAR_LIST_ANIMATION_OPTIONS = {
-  duration: 180,
-  easing: "ease-out",
-} as const;
-const EMPTY_THREAD_JUMP_LABELS = new Map<string, string>();
-const PROJECT_GROUPING_MODE_LABELS: Record<SidebarProjectGroupingMode, string> = {
-  repository: "Group by repository",
-  repository_path: "Group by repository path",
-  separate: "Keep separate",
-};
-
-function clampSidebarThreadPreviewCount(value: number): SidebarThreadPreviewCount {
-  return Math.min(
-    MAX_SIDEBAR_THREAD_PREVIEW_COUNT,
-    Math.max(MIN_SIDEBAR_THREAD_PREVIEW_COUNT, value),
-  ) as SidebarThreadPreviewCount;
-}
-
-function formatProjectMemberActionLabel(
-  member: SidebarProjectGroupMember,
-  groupedProjectCount: number,
-): string {
-  if (groupedProjectCount <= 1) {
-    return member.name;
-  }
-
-  return member.environmentLabel ? `${member.environmentLabel} — ${member.cwd}` : member.cwd;
-}
+import { useCopyToClipboard } from "~/hooks/useCopyToClipboard";
+import { CommandDialogTrigger } from "./ui/command";
 
-function projectGroupingModeDescription(mode: SidebarProjectGroupingMode): string {
-  switch (mode) {
-    case "repository":
-      return "Projects from the same repository share one sidebar row.";
-    case "repository_path":
-      return "Projects group only when both the repository and repo-relative path match.";
-    case "separate":
-      return "Every project path gets its own sidebar row.";
-  }
+const EMPTY_THREAD_JUMP_LABELS = new Map<string, string>();
+/** How many quiet live rows rest unfolded; rows needing you are never folded. */
+const LIVE_PREVIEW_COUNT = 6;
+/** Each click on the reveal row uncovers this many more. */
+const LIVE_REVEAL_STEP = 5;
+/** The Done tail opens short and reveals in bigger steps: it is history. */
+const DONE_PREVIEW_COUNT = 10;
+const DONE_REVEAL_STEP = 20;
+// The queued-turn grace window is measured in minutes, so a coarse clock is
+// enough to keep "can this be marked done" honest without re-rendering often.
+const INBOX_CLOCK_INTERVAL_MS = 30_000;
+
+interface InboxEntry {
+  thread: SidebarThreadSummary;
+  threadKey: string;
+  status: ThreadStatusPill | null;
+  projectKey: string;
+  projectLabel: string | null;
+  isDone: boolean;
+  canMarkDone: boolean;
+  doneAt: string | null;
 }
 
 function buildThreadJumpLabelMap(input: {
@@ -291,844 +176,226 @@ function buildThreadJumpLabelMap(input: {
   return mapping.size > 0 ? mapping : EMPTY_THREAD_JUMP_LABELS;
 }
 
-interface SidebarThreadRowProps {
-  thread: SidebarThreadSummary;
-  projectCwd: string | null;
-  orderedProjectThreadKeys: readonly string[];
-  isActive: boolean;
-  jumpLabel: string | null;
-  appSettingsConfirmThreadArchive: boolean;
-  renamingThreadKey: string | null;
-  renamingTitle: string;
-  setRenamingTitle: (title: string) => void;
-  renamingInputRef: React.RefObject<HTMLInputElement | null>;
-  renamingCommittedRef: React.RefObject<boolean>;
-  confirmingArchiveThreadKey: string | null;
-  setConfirmingArchiveThreadKey: React.Dispatch<React.SetStateAction<string | null>>;
-  confirmArchiveButtonRefs: React.RefObject<Map<string, HTMLButtonElement>>;
-  handleThreadClick: (
-    event: React.MouseEvent,
-    threadRef: ScopedThreadRef,
-    orderedProjectThreadKeys: readonly string[],
-  ) => void;
-  navigateToThread: (threadRef: ScopedThreadRef) => void;
-  handleMultiSelectContextMenu: (position: { x: number; y: number }) => Promise<void>;
-  handleThreadContextMenu: (
-    threadRef: ScopedThreadRef,
-    position: { x: number; y: number },
-  ) => Promise<void>;
-  clearSelection: () => void;
-  commitRename: (
-    threadRef: ScopedThreadRef,
-    newTitle: string,
-    originalTitle: string,
-  ) => Promise<void>;
-  cancelRename: () => void;
-  attemptTogglePinThread: (threadRef: ScopedThreadRef, shouldPin: boolean) => Promise<void>;
-  attemptArchiveThread: (threadRef: ScopedThreadRef) => Promise<void>;
-  openPrLink: (event: React.MouseEvent<HTMLElement>, prUrl: string) => void;
-}
-
-const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThreadRowProps) {
-  const {
-    orderedProjectThreadKeys,
-    isActive,
-    jumpLabel,
-    appSettingsConfirmThreadArchive,
-    renamingThreadKey,
-    renamingTitle,
-    setRenamingTitle,
-    renamingInputRef,
-    renamingCommittedRef,
-    confirmingArchiveThreadKey,
-    setConfirmingArchiveThreadKey,
-    confirmArchiveButtonRefs,
-    handleThreadClick,
-    navigateToThread,
-    handleMultiSelectContextMenu,
-    handleThreadContextMenu,
-    clearSelection,
-    commitRename,
-    cancelRename,
-    attemptTogglePinThread,
-    attemptArchiveThread,
-    openPrLink,
-    thread,
-  } = props;
-  const threadRef = scopeThreadRef(thread.environmentId, thread.id);
-  const threadKey = scopedThreadKey(threadRef);
-  const lastVisitedAt = useUiStateStore((state) => state.threadLastVisitedAtById[threadKey]);
-  const isSelected = useThreadSelectionStore((state) => state.selectedThreadKeys.has(threadKey));
-  const runningTerminalIds = useTerminalStateStore(
-    (state) =>
-      selectThreadTerminalState(state.terminalStateByThreadKey, threadRef).runningTerminalIds,
-  );
-  const primaryEnvironmentId = usePrimaryEnvironmentId();
-  const isRemoteThread =
-    primaryEnvironmentId !== null && thread.environmentId !== primaryEnvironmentId;
-  const remoteEnvLabel = useSavedEnvironmentRuntimeStore(
-    (s) => s.byId[thread.environmentId]?.descriptor?.label ?? null,
-  );
-  const remoteEnvSavedLabel = useSavedEnvironmentRegistryStore(
-    (s) => s.byId[thread.environmentId]?.label ?? null,
-  );
-  const threadEnvironmentLabel = isRemoteThread
-    ? (remoteEnvLabel ?? remoteEnvSavedLabel ?? "Remote")
-    : null;
-  // For grouped projects, the thread may belong to a different environment
-  // than the representative project.  Look up the thread's own project cwd
-  // so git status (and thus PR detection) queries the correct path.
-  const threadProjectCwd = useStore(
-    useMemo(
-      () => (state: import("../store").AppState) =>
-        selectProjectByRef(state, scopeProjectRef(thread.environmentId, thread.projectId))?.cwd ??
-        null,
-      [thread.environmentId, thread.projectId],
-    ),
-  );
-  const gitCwd = resolveThreadWorkingCwd({
-    projectCwd: threadProjectCwd ?? props.projectCwd,
-    worktreePath: thread.worktreePath,
-    effectiveCwd: thread.effectiveCwd,
-  });
-  const gitStatus = useGitStatus({
-    environmentId: thread.environmentId,
-    cwd: thread.branch != null ? gitCwd : null,
-  });
-  const isHighlighted = isActive || isSelected;
-  const isThreadRunning =
-    thread.session?.status === "running" && thread.session.activeTurnId != null;
-  const archiveUnavailableReason =
-    thread.session?.status === "connecting" || thread.session?.orchestrationStatus === "starting"
-      ? "connecting"
-      : isThreadRunning
-        ? "running"
-        : null;
-  const isThreadArchiveDisabled = archiveUnavailableReason !== null;
-  const threadStatus = resolveThreadStatusPill({
-    thread: {
-      ...thread,
-      lastVisitedAt,
-    },
-  });
-  const pr = resolveThreadPr(thread.branch, gitStatus.data);
-  const prStatus = prStatusIndicator(pr, gitStatus.data?.sourceControlProvider);
-  const terminalStatus = terminalStatusFromRunningIds(runningTerminalIds);
-  const isConfirmingArchive = confirmingArchiveThreadKey === threadKey && !isThreadArchiveDisabled;
-  const isPinned = thread.pinnedAt !== null;
-  // On phone layouts the pin/archive cluster is always visible (absolutely
-  // positioned at the row's right edge), so the timestamp stays visible and
-  // shifts left of the cluster instead of hiding; the hover/focus fade-out
-  // only applies at sm+ where the cluster overlays the timestamp's spot.
-  const threadMetaClassName = isConfirmingArchive
-    ? "pointer-events-none opacity-0"
-    : "pointer-events-none transition-opacity duration-150 max-sm:mr-15 sm:group-hover/menu-sub-item:opacity-0 sm:group-focus-within/menu-sub-item:opacity-0";
-  const clearConfirmingArchive = useCallback(() => {
-    setConfirmingArchiveThreadKey((current) => (current === threadKey ? null : current));
-  }, [setConfirmingArchiveThreadKey, threadKey]);
-  const handleMouseLeave = useCallback(() => {
-    clearConfirmingArchive();
-  }, [clearConfirmingArchive]);
-  const handleBlurCapture = useCallback(
-    (event: React.FocusEvent<HTMLLIElement>) => {
-      const currentTarget = event.currentTarget;
-      requestAnimationFrame(() => {
-        if (currentTarget.contains(document.activeElement)) {
-          return;
-        }
-        clearConfirmingArchive();
-      });
-    },
-    [clearConfirmingArchive],
-  );
-  const handleRowClick = useCallback(
-    (event: React.MouseEvent) => {
-      handleThreadClick(event, threadRef, orderedProjectThreadKeys);
-    },
-    [handleThreadClick, orderedProjectThreadKeys, threadRef],
-  );
-  const handleRowKeyDown = useCallback(
-    (event: React.KeyboardEvent) => {
-      if (event.key !== "Enter" && event.key !== " ") return;
-      event.preventDefault();
-      navigateToThread(threadRef);
-    },
-    [navigateToThread, threadRef],
+/** Section voice for the inbox: mono, quiet, with the count on the right. */
+/**
+ * Section voice for the inbox, and the list's only structural rule: with rows
+ * separated by spacing rather than borders, the hairline belongs to the
+ * boundary between sections.
+ */
+/**
+ * A section's name, then a hairline running out to the edge.
+ *
+ * The rule doubles as the divider between sections, so the boundary and the
+ * label are one gesture rather than two stacked ones. Sentence case: these are
+ * names for parts of a list, not shouted headings.
+ */
+/**
+ * A section's name, then a hairline running out to the edge, then the state
+ * chevron -- and the whole row is the control. A header that collapses only
+ * from its glyph makes the user aim at a 14px target for a row-sized idea.
+ *
+ * Sticky with an opaque surface so rows slide under it rather than through it
+ * while the list scrolls.
+ */
+function InboxSectionHeader({
+  label,
+  count,
+  collapsed,
+  onToggleCollapsed,
+  testId,
+}: {
+  label: string;
+  count: number;
+  collapsed: boolean;
+  onToggleCollapsed: () => void;
+  testId?: string;
+}) {
+  return (
+    <button
+      type="button"
+      data-thread-selection-safe
+      data-testid={testId}
+      aria-expanded={!collapsed}
+      className="group/section-header sticky top-0 z-10 mt-1.5 flex w-full cursor-pointer items-center gap-2 bg-sidebar px-3 pb-1.5 text-left select-none focus-ring"
+      onClick={onToggleCollapsed}
+    >
+      <span className="shrink-0 text-[11px] font-medium text-muted-foreground/70 transition-colors group-hover/section-header:text-foreground">
+        {label} ({count})
+      </span>
+      <span aria-hidden="true" className="h-px min-w-3 flex-1 bg-sidebar-border" />
+      <ChevronDownIcon
+        aria-hidden="true"
+        className={cn(
+          "size-3.5 shrink-0 text-muted-foreground/50 transition-transform duration-150 group-hover/section-header:text-foreground",
+          collapsed && "-rotate-90",
+        )}
+      />
+    </button>
   );
-  const handleRowContextMenu = useCallback(
-    (event: React.MouseEvent) => {
-      event.preventDefault();
-      const hasSelection = useThreadSelectionStore.getState().hasSelection();
-      if (hasSelection && isSelected) {
-        void handleMultiSelectContextMenu({
-          x: event.clientX,
-          y: event.clientY,
-        });
-        return;
-      }
+}
 
-      if (hasSelection) {
-        clearSelection();
-      }
-      void handleThreadContextMenu(threadRef, {
-        x: event.clientX,
-        y: event.clientY,
-      });
-    },
-    [clearSelection, handleMultiSelectContextMenu, handleThreadContextMenu, isSelected, threadRef],
-  );
-  const handlePrClick = useCallback(
-    (event: React.MouseEvent<HTMLButtonElement>) => {
-      if (!prStatus) return;
-      openPrLink(event, prStatus.url);
-    },
-    [openPrLink, prStatus],
-  );
-  const handleRenameInputRef = useCallback(
-    (element: HTMLInputElement | null) => {
-      if (element && renamingInputRef.current !== element) {
-        renamingInputRef.current = element;
-        element.focus();
-        element.select();
-      }
-    },
-    [renamingInputRef],
-  );
-  const handleRenameInputChange = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => {
-      setRenamingTitle(event.target.value);
-    },
-    [setRenamingTitle],
-  );
-  const handleRenameInputKeyDown = useCallback(
-    (event: React.KeyboardEvent<HTMLInputElement>) => {
-      event.stopPropagation();
-      if (event.key === "Enter") {
-        event.preventDefault();
-        renamingCommittedRef.current = true;
-        void commitRename(threadRef, renamingTitle, thread.title);
-      } else if (event.key === "Escape") {
-        event.preventDefault();
-        renamingCommittedRef.current = true;
-        cancelRename();
-      }
-    },
-    [cancelRename, commitRename, renamingCommittedRef, renamingTitle, thread.title, threadRef],
-  );
-  const handleRenameInputBlur = useCallback(() => {
-    if (!renamingCommittedRef.current) {
-      void commitRename(threadRef, renamingTitle, thread.title);
-    }
-  }, [commitRename, renamingCommittedRef, renamingTitle, thread.title, threadRef]);
-  const handleRenameInputClick = useCallback((event: React.MouseEvent<HTMLInputElement>) => {
-    event.stopPropagation();
-  }, []);
-  const handleConfirmArchiveRef = useCallback(
-    (element: HTMLButtonElement | null) => {
-      if (element) {
-        confirmArchiveButtonRefs.current.set(threadKey, element);
-      } else {
-        confirmArchiveButtonRefs.current.delete(threadKey);
-      }
-    },
-    [confirmArchiveButtonRefs, threadKey],
-  );
-  const stopPropagationOnPointerDown = useCallback(
-    (event: React.PointerEvent<HTMLButtonElement>) => {
-      event.stopPropagation();
-    },
-    [],
-  );
-  const handleConfirmArchiveClick = useCallback(
-    (event: React.MouseEvent<HTMLButtonElement>) => {
-      event.preventDefault();
-      event.stopPropagation();
-      clearConfirmingArchive();
-      void attemptArchiveThread(threadRef);
-    },
-    [attemptArchiveThread, clearConfirmingArchive, threadRef],
-  );
-  const handleStartArchiveConfirmation = useCallback(
-    (event: React.MouseEvent<HTMLButtonElement>) => {
-      event.preventDefault();
-      event.stopPropagation();
-      setConfirmingArchiveThreadKey(threadKey);
-      requestAnimationFrame(() => {
-        confirmArchiveButtonRefs.current.get(threadKey)?.focus();
-      });
-    },
-    [confirmArchiveButtonRefs, setConfirmingArchiveThreadKey, threadKey],
-  );
-  const handleArchiveImmediateClick = useCallback(
-    (event: React.MouseEvent<HTMLButtonElement>) => {
-      event.preventDefault();
-      event.stopPropagation();
-      void attemptArchiveThread(threadRef);
-    },
-    [attemptArchiveThread, threadRef],
-  );
-  const handleTogglePinClick = useCallback(
-    (event: React.MouseEvent<HTMLButtonElement>) => {
-      event.preventDefault();
-      event.stopPropagation();
-      if (event.detail > 0) {
-        event.currentTarget.blur();
-      }
-      void attemptTogglePinThread(threadRef, !isPinned);
-    },
-    [attemptTogglePinThread, isPinned, threadRef],
+const SidebarChromeHeader = memo(function SidebarChromeHeader({
+  isElectron,
+}: {
+  isElectron: boolean;
+}) {
+  const electronWordmarkLayout = resolveElectronSidebarWordmarkLayout(
+    typeof navigator === "undefined" ? "" : navigator.platform,
   );
-  const rowButtonRender = useMemo(() => <div role="button" tabIndex={0} />, []);
-
-  return (
-    <SidebarMenuSubItem
-      className="w-full"
-      data-thread-item
-      onMouseLeave={handleMouseLeave}
-      onBlurCapture={handleBlurCapture}
-    >
-      {/* The rail node lives in the row (a sibling of the button, which clips its
-          own overflow) so it can sit centered on the project line: every thread
-          contributes one node, turning the rail into a continuous threadline. */}
-      <ThreadRailNode status={threadStatus} />
-      <SidebarMenuSubButton
-        render={rowButtonRender}
-        size="sm"
-        isActive={isActive}
-        data-testid={`thread-row-${thread.id}`}
-        className={`${resolveThreadRowClassName({
-          isActive,
-          isSelected,
-        })} relative isolate`}
-        onClick={handleRowClick}
-        onKeyDown={handleRowKeyDown}
-        onContextMenu={handleRowContextMenu}
-      >
-        <div className="flex min-w-0 flex-1 items-center gap-1.5 text-left">
-          {prStatus && (
-            <Tooltip>
-              <TooltipTrigger
-                render={
-                  <button
-                    type="button"
-                    aria-label={prStatus.tooltip}
-                    className={`inline-flex items-center justify-center ${prStatus.colorClass} cursor-pointer rounded-sm outline-hidden focus-ring`}
-                    onClick={handlePrClick}
-                  >
-                    <ChangeRequestStatusIcon className="size-3" />
-                  </button>
-                }
-              />
-              <TooltipPopup side="top">{prStatus.tooltip}</TooltipPopup>
-            </Tooltip>
-          )}
-          {isPinned && (
-            <Tooltip>
-              <TooltipTrigger
-                render={
-                  <span
-                    aria-label="Pinned thread"
-                    className="inline-flex h-4 shrink-0 items-center justify-center text-primary-readable"
-                  >
-                    <PinIcon className="size-3" />
-                  </span>
-                }
-              />
-              <TooltipPopup side="top">Pinned</TooltipPopup>
-            </Tooltip>
-          )}
-          {renamingThreadKey === threadKey ? (
-            <input
-              ref={handleRenameInputRef}
-              className="min-w-0 flex-1 truncate text-base sm:text-xs bg-transparent outline-none border border-ring rounded px-0.5"
-              value={renamingTitle}
-              onChange={handleRenameInputChange}
-              onKeyDown={handleRenameInputKeyDown}
-              onBlur={handleRenameInputBlur}
-              onClick={handleRenameInputClick}
-            />
-          ) : (
-            <Tooltip>
-              <TooltipTrigger
-                render={
-                  <span
-                    className="min-w-0 flex-1 truncate text-xs"
-                    data-testid={`thread-title-${thread.id}`}
-                  >
-                    {thread.title}
-                  </span>
-                }
-              />
-              <TooltipPopup side="top" className="max-w-80 whitespace-normal leading-tight">
-                {thread.title}
-              </TooltipPopup>
-            </Tooltip>
-          )}
-        </div>
-        <div className="ml-auto flex shrink-0 items-center gap-1.5">
-          {terminalStatus && (
-            <span
-              role="img"
-              aria-label={terminalStatus.label}
-              title={terminalStatus.label}
-              className={`inline-flex items-center justify-center ${terminalStatus.colorClass}`}
+  const wordmark = (
+    <div className="flex min-w-0 items-center gap-2">
+      <SidebarTrigger
+        className="size-7 shrink-0 text-muted-foreground/60 hover:text-foreground md:hidden"
+        tooltip="Collapse sidebar"
+      />
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <Link
+              aria-label={`Go to ${APP_BASE_NAME} home`}
+              className="flex min-w-0 cursor-pointer items-center gap-1.5 rounded-md text-foreground outline-hidden transition-opacity hover:opacity-85 focus-ring"
+              to="/"
             >
-              <TerminalIcon
-                className={`size-3 ${terminalStatus.pulse ? "animate-status-pulse" : ""}`}
-              />
-            </span>
-          )}
-          <div
-            className={`flex min-w-12 justify-end ${
-              isRemoteThread ? "max-sm:min-w-24" : "max-sm:min-w-20"
-            }`}
-          >
-            {isConfirmingArchive ? (
-              <button
-                ref={handleConfirmArchiveRef}
-                type="button"
-                data-thread-selection-safe
-                data-testid={`thread-archive-confirm-${thread.id}`}
-                aria-label={`Confirm archive ${thread.title}`}
-                className="absolute top-1/2 right-1 inline-flex h-5 -translate-y-1/2 cursor-pointer items-center rounded-full bg-destructive/12 px-2 text-[10px] font-medium text-destructive transition-colors hover:bg-destructive/18 focus-ring"
-                onPointerDown={stopPropagationOnPointerDown}
-                onClick={handleConfirmArchiveClick}
-              >
-                Confirm
-              </button>
-            ) : (
-              <div className="pointer-events-none absolute top-1/2 right-1 flex -translate-y-1/2 items-center gap-0.5 opacity-0 transition-opacity duration-150 max-sm:pointer-events-auto max-sm:opacity-100 group-hover/menu-sub-item:pointer-events-auto group-hover/menu-sub-item:opacity-100 group-focus-within/menu-sub-item:pointer-events-auto group-focus-within/menu-sub-item:opacity-100">
-                <Tooltip>
-                  <TooltipTrigger
-                    render={
-                      <button
-                        type="button"
-                        data-thread-selection-safe
-                        data-testid={`thread-pin-${thread.id}`}
-                        aria-label={`${isPinned ? "Unpin" : "Pin"} ${thread.title}`}
-                        aria-pressed={isPinned}
-                        className={`inline-flex size-5 pointer-coarse:size-7 cursor-pointer items-center justify-center transition-colors focus-ring ${
-                          isPinned
-                            ? "text-primary-readable hover:text-primary"
-                            : "text-muted-foreground/60 hover:text-foreground"
-                        }`}
-                        onPointerDown={stopPropagationOnPointerDown}
-                        onClick={handleTogglePinClick}
-                      >
-                        {isPinned ? (
-                          <PinOffIcon className="size-3.5" />
-                        ) : (
-                          <PinIcon className="size-3.5" />
-                        )}
-                      </button>
-                    }
-                  />
-                  <TooltipPopup side="top">{isPinned ? "Unpin" : "Pin"}</TooltipPopup>
-                </Tooltip>
-                {!isThreadArchiveDisabled && appSettingsConfirmThreadArchive ? (
-                  <button
-                    type="button"
-                    data-thread-selection-safe
-                    data-testid={`thread-archive-${thread.id}`}
-                    aria-label={`Archive ${thread.title}`}
-                    className="inline-flex size-5 pointer-coarse:size-7 cursor-pointer items-center justify-center text-muted-foreground/60 transition-colors hover:text-foreground focus-ring"
-                    onPointerDown={stopPropagationOnPointerDown}
-                    onClick={handleStartArchiveConfirmation}
-                  >
-                    <ArchiveIcon className="size-3.5" />
-                  </button>
-                ) : !isThreadArchiveDisabled ? (
-                  <Tooltip>
-                    <TooltipTrigger
-                      render={
-                        <button
-                          type="button"
-                          data-thread-selection-safe
-                          data-testid={`thread-archive-${thread.id}`}
-                          aria-label={`Archive ${thread.title}`}
-                          className="inline-flex size-5 pointer-coarse:size-7 cursor-pointer items-center justify-center text-muted-foreground/60 transition-colors hover:text-foreground focus-ring"
-                          onPointerDown={stopPropagationOnPointerDown}
-                          onClick={handleArchiveImmediateClick}
-                        >
-                          <ArchiveIcon className="size-3.5" />
-                        </button>
-                      }
-                    />
-                    <TooltipPopup side="top">Archive</TooltipPopup>
-                  </Tooltip>
-                ) : (
-                  <button
-                    type="button"
-                    data-thread-selection-safe
-                    data-testid={`thread-archive-${thread.id}`}
-                    aria-label={`Archive ${thread.title} unavailable while thread is ${archiveUnavailableReason}`}
-                    title={`Archive unavailable while thread is ${archiveUnavailableReason}`}
-                    disabled
-                    className="inline-flex size-5 cursor-default items-center justify-center text-muted-foreground/25"
-                  >
-                    <ArchiveIcon className="size-3.5" />
-                  </button>
-                )}
-              </div>
-            )}
-            <span className={threadMetaClassName} data-testid={`thread-meta-${thread.id}`}>
-              <span className="inline-flex items-center gap-1">
-                {isRemoteThread && (
-                  <Tooltip>
-                    <TooltipTrigger
-                      render={
-                        <span
-                          aria-label={threadEnvironmentLabel ?? "Remote"}
-                          className="inline-flex h-5 items-center justify-center"
-                        />
-                      }
-                    >
-                      <CloudIcon className="block size-3 text-muted-foreground/60" />
-                    </TooltipTrigger>
-                    <TooltipPopup side="top">{threadEnvironmentLabel}</TooltipPopup>
-                  </Tooltip>
-                )}
-                {jumpLabel ? (
-                  <span
-                    className="inline-flex h-5 items-center rounded-full border border-border/80 bg-background/90 px-1.5 font-mono text-[10px] font-medium tracking-tight text-foreground shadow-sm"
-                    title={jumpLabel}
-                  >
-                    {jumpLabel}
-                  </span>
-                ) : (
-                  <span
-                    className={`text-[10px] ${
-                      isHighlighted
-                        ? "text-foreground/72 dark:text-foreground/82"
-                        : "text-muted-foreground/40"
-                    }`}
-                  >
-                    {formatRelativeTimeLabel(
-                      thread.latestUserMessageAt ?? thread.updatedAt ?? thread.createdAt,
-                    )}
-                  </span>
-                )}
-              </span>
+              <ThreadlinesGlyph aria-hidden="true" className="h-3 w-auto shrink-0" />
+              <span className="truncate text-sm font-semibold tracking-tight">{APP_BASE_NAME}</span>
+            </Link>
+          }
+        />
+        <TooltipPopup side="bottom" sideOffset={2}>
+          <div className="flex flex-col gap-0.5">
+            <span>Home</span>
+            <span className="text-[10px] text-muted-foreground">
+              {APP_STAGE_LABEL} · Version {APP_VERSION}
             </span>
           </div>
-        </div>
-      </SidebarMenuSubButton>
-    </SidebarMenuSubItem>
+        </TooltipPopup>
+      </Tooltip>
+    </div>
   );
-});
 
-interface SidebarProjectThreadListProps {
-  projectKey: string;
-  hiddenThreadStatus: ThreadStatusPill | null;
-  orderedProjectThreadKeys: readonly string[];
-  renderedThreads: readonly SidebarThreadSummary[];
-  showEmptyThreadState: boolean;
-  shouldShowThreadPanel: boolean;
-  nextRevealCount: number;
-  searchHandoffThreadCount: number | null;
-  isThreadListRevealed: boolean;
-  onSearchAllThreads: () => void;
-  projectCwd: string;
-  activeRouteThreadKey: string | null;
-  threadJumpLabelByKey: ReadonlyMap<string, string>;
-  appSettingsConfirmThreadArchive: boolean;
-  renamingThreadKey: string | null;
-  renamingTitle: string;
-  setRenamingTitle: (title: string) => void;
-  renamingInputRef: React.RefObject<HTMLInputElement | null>;
-  renamingCommittedRef: React.RefObject<boolean>;
-  confirmingArchiveThreadKey: string | null;
-  setConfirmingArchiveThreadKey: React.Dispatch<React.SetStateAction<string | null>>;
-  confirmArchiveButtonRefs: React.RefObject<Map<string, HTMLButtonElement>>;
-  attachThreadListAutoAnimateRef: (node: HTMLElement | null) => void;
-  handleThreadClick: (
-    event: React.MouseEvent,
-    threadRef: ScopedThreadRef,
-    orderedProjectThreadKeys: readonly string[],
-  ) => void;
-  navigateToThread: (threadRef: ScopedThreadRef) => void;
-  handleMultiSelectContextMenu: (position: { x: number; y: number }) => Promise<void>;
-  handleThreadContextMenu: (
-    threadRef: ScopedThreadRef,
-    position: { x: number; y: number },
-  ) => Promise<void>;
-  clearSelection: () => void;
-  commitRename: (
-    threadRef: ScopedThreadRef,
-    newTitle: string,
-    originalTitle: string,
-  ) => Promise<void>;
-  cancelRename: () => void;
-  attemptTogglePinThread: (threadRef: ScopedThreadRef, shouldPin: boolean) => Promise<void>;
-  attemptArchiveThread: (threadRef: ScopedThreadRef) => Promise<void>;
-  openPrLink: (event: React.MouseEvent<HTMLElement>, prUrl: string) => void;
-  expandThreadListForProject: (projectKey: string, additionalCount: number) => void;
-  collapseThreadListForProject: (projectKey: string) => void;
-}
+  return isElectron ? (
+    <SidebarHeader className="drag-region shrink-0 gap-0 px-0 py-0">
+      {electronWordmarkLayout.spacerClassName ? (
+        <div aria-hidden="true" className={electronWordmarkLayout.spacerClassName} />
+      ) : null}
+      <div className={electronWordmarkLayout.wordmarkRowClassName}>{wordmark}</div>
+    </SidebarHeader>
+  ) : (
+    <SidebarHeader className="gap-3 px-3 py-2 sm:gap-2.5 sm:px-5 sm:py-3 md:shrink-0 md:gap-0 md:px-0 md:py-0">
+      <div className="min-w-0 md:flex md:h-[var(--workspace-topbar-height)] md:min-h-[var(--workspace-topbar-height)] md:items-center md:pr-3 md:pl-[var(--workspace-titlebar-content-left)]">
+        {wordmark}
+      </div>
+    </SidebarHeader>
+  );
+});
 
-const SidebarProjectThreadList = memo(function SidebarProjectThreadList(
-  props: SidebarProjectThreadListProps,
-) {
-  const {
-    projectKey,
-    hiddenThreadStatus,
-    orderedProjectThreadKeys,
-    renderedThreads,
-    showEmptyThreadState,
-    shouldShowThreadPanel,
-    nextRevealCount,
-    searchHandoffThreadCount,
-    isThreadListRevealed,
-    onSearchAllThreads,
-    projectCwd,
-    activeRouteThreadKey,
-    threadJumpLabelByKey,
-    appSettingsConfirmThreadArchive,
-    renamingThreadKey,
-    renamingTitle,
-    setRenamingTitle,
-    renamingInputRef,
-    renamingCommittedRef,
-    confirmingArchiveThreadKey,
-    setConfirmingArchiveThreadKey,
-    confirmArchiveButtonRefs,
-    attachThreadListAutoAnimateRef,
-    handleThreadClick,
-    navigateToThread,
-    handleMultiSelectContextMenu,
-    handleThreadContextMenu,
-    clearSelection,
-    commitRename,
-    cancelRename,
-    attemptTogglePinThread,
-    attemptArchiveThread,
-    openPrLink,
-    expandThreadListForProject,
-    collapseThreadListForProject,
-  } = props;
-  const shouldShowThreadCollapseButton = shouldShowThreadPanel && isThreadListRevealed;
-  const shouldPromoteThreadCollapseButton = shouldShowThreadCollapseButton && nextRevealCount <= 0;
-  const shouldShowThreadListFooter =
-    shouldShowThreadPanel &&
-    (nextRevealCount > 0 || searchHandoffThreadCount !== null || shouldShowThreadCollapseButton);
+const SidebarChromeFooter = memo(function SidebarChromeFooter() {
+  const navigate = useNavigate();
+  const { isMobile, setOpenMobile } = useSidebar();
+  // On mobile, /settings renders a full-page section index, so the sheet
+  // closes to reveal it; the sheet itself never hosts settings navigation.
+  const handleSettingsClick = useCallback(() => {
+    if (isMobile) {
+      setOpenMobile(false);
+    }
+    void navigate({ to: "/settings" });
+  }, [isMobile, navigate, setOpenMobile]);
 
   return (
-    <SidebarMenuSub
-      ref={attachThreadListAutoAnimateRef}
-      // Threads hang off their project's line. The rail is an inset pseudo-
-      // element (not border-l) so every row's node sits fully INSIDE the
-      // list's padding box: mobile WebKit clips descendants to the padding box
-      // when any overflow axis is non-visible, which shaved the left half off
-      // nodes that hung past the edge. Same rendered geometry as the old
-      // border-l layout (rail x and row indent unchanged), just with the
-      // gutter reserved as padding. Clip only the y axis: it keeps
-      // auto-animated rows from painting outside the list without becoming a
-      // scroll container (so the sticky thread-list footer tracks the sidebar
-      // viewport).
-      className="relative my-0 ml-1.5 mr-1 translate-x-0 gap-0.5 overflow-x-visible overflow-y-clip border-l-0 py-0 pl-[13px] pr-0 before:absolute before:inset-y-0 before:left-2 before:w-px before:bg-muted-foreground/15"
-    >
-      {shouldShowThreadPanel && showEmptyThreadState ? (
-        <SidebarMenuSubItem className="w-full" data-thread-selection-safe>
-          <div
-            data-thread-selection-safe
-            className="flex h-6 w-full translate-x-0 items-center px-2 text-left text-[10px] text-muted-foreground/60"
-          >
-            <span>No threads yet</span>
-          </div>
-        </SidebarMenuSubItem>
-      ) : null}
-      {shouldShowThreadPanel &&
-        renderedThreads.map((thread) => {
-          const threadKey = scopedThreadKey(scopeThreadRef(thread.environmentId, thread.id));
-          return (
-            <SidebarThreadRow
-              key={threadKey}
-              thread={thread}
-              projectCwd={projectCwd}
-              orderedProjectThreadKeys={orderedProjectThreadKeys}
-              isActive={activeRouteThreadKey === threadKey}
-              jumpLabel={threadJumpLabelByKey.get(threadKey) ?? null}
-              appSettingsConfirmThreadArchive={appSettingsConfirmThreadArchive}
-              renamingThreadKey={renamingThreadKey}
-              renamingTitle={renamingTitle}
-              setRenamingTitle={setRenamingTitle}
-              renamingInputRef={renamingInputRef}
-              renamingCommittedRef={renamingCommittedRef}
-              confirmingArchiveThreadKey={confirmingArchiveThreadKey}
-              setConfirmingArchiveThreadKey={setConfirmingArchiveThreadKey}
-              confirmArchiveButtonRefs={confirmArchiveButtonRefs}
-              handleThreadClick={handleThreadClick}
-              navigateToThread={navigateToThread}
-              handleMultiSelectContextMenu={handleMultiSelectContextMenu}
-              handleThreadContextMenu={handleThreadContextMenu}
-              clearSelection={clearSelection}
-              commitRename={commitRename}
-              cancelRename={cancelRename}
-              attemptTogglePinThread={attemptTogglePinThread}
-              attemptArchiveThread={attemptArchiveThread}
-              openPrLink={openPrLink}
-            />
-          );
-        })}
-
-      {shouldShowThreadListFooter ? (
-        <SidebarMenuSubItem
-          className={cn(
-            "w-full",
-            // Pinned to the sidebar viewport bottom while the expanded list
-            // scrolls, so collapsing never requires scrolling to the end.
-            shouldShowThreadCollapseButton &&
-              "sticky bottom-0 z-10 -ml-1 w-[calc(100%+0.25rem)] bg-sidebar py-0.5 pl-1",
-          )}
-        >
-          <div
-            data-thread-selection-safe
-            className="flex h-6 w-full translate-x-0 items-center gap-1 px-1"
+    <SidebarFooter className="p-2">
+      <SidebarProviderUpdatePill />
+      <SidebarUpdatePill />
+      <SidebarMenu>
+        <SidebarMenuItem className="flex items-center gap-1.5">
+          <SidebarMenuButton
+            size="sm"
+            className="flex-1 gap-2 px-2 py-1.5 text-muted-foreground/70 hover:bg-accent hover:text-foreground"
+            onClick={handleSettingsClick}
           >
-            {nextRevealCount > 0 ? (
-              <button
-                type="button"
-                data-thread-selection-safe
-                className="inline-flex h-6 min-w-0 flex-1 cursor-pointer items-center gap-2 rounded-md px-1.5 text-left text-[10px] text-muted-foreground/60 transition-colors hover:bg-accent hover:text-muted-foreground/80 focus-ring"
-                onClick={() => {
-                  expandThreadListForProject(projectKey, nextRevealCount);
-                }}
-              >
-                {hiddenThreadStatus && <ThreadStatusLabel status={hiddenThreadStatus} compact />}
-                <span className="truncate">Show {nextRevealCount} more</span>
-              </button>
-            ) : shouldPromoteThreadCollapseButton ? (
-              <button
-                type="button"
-                data-thread-selection-safe
-                className="inline-flex h-6 min-w-0 flex-1 cursor-pointer items-center gap-2 rounded-md px-1.5 text-left text-[10px] text-muted-foreground/60 transition-colors hover:bg-accent hover:text-muted-foreground/80 focus-ring"
-                onClick={() => {
-                  collapseThreadListForProject(projectKey);
-                }}
-              >
-                <span className="truncate">Show less</span>
-              </button>
-            ) : (
-              <span className="min-w-0 flex-1" aria-hidden="true" />
-            )}
-            {searchHandoffThreadCount !== null ? (
-              <Tooltip>
-                <TooltipTrigger
-                  render={
-                    <button
-                      type="button"
-                      data-thread-selection-safe
-                      aria-label={`Search all ${searchHandoffThreadCount} threads`}
-                      className="inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground/60 transition-colors hover:bg-accent hover:text-muted-foreground/90 focus-ring"
-                      onClick={onSearchAllThreads}
-                    >
-                      <SearchIcon className="size-3" />
-                    </button>
-                  }
-                />
-                <TooltipPopup side="top">
-                  Search all {searchHandoffThreadCount} threads
-                </TooltipPopup>
-              </Tooltip>
-            ) : null}
-            {shouldShowThreadCollapseButton && !shouldPromoteThreadCollapseButton ? (
-              <Tooltip>
-                <TooltipTrigger
-                  render={
-                    <button
-                      type="button"
-                      data-thread-selection-safe
-                      aria-label="Show less"
-                      className="inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground/60 transition-colors hover:bg-accent hover:text-muted-foreground/90 focus-ring"
-                      onClick={() => {
-                        collapseThreadListForProject(projectKey);
-                      }}
-                    >
-                      <ChevronUpIcon className="size-3.5" />
-                    </button>
-                  }
-                />
-                <TooltipPopup side="top">Show less</TooltipPopup>
-              </Tooltip>
-            ) : null}
-          </div>
-        </SidebarMenuSubItem>
-      ) : null}
-    </SidebarMenuSub>
+            <SettingsIcon className="size-3.5" />
+            <span className="text-xs">Settings</span>
+          </SidebarMenuButton>
+          <SidebarVersionTag />
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarFooter>
   );
 });
 
-interface SidebarProjectItemProps {
-  project: SidebarProjectSnapshot;
-  revealedThreadCount: number;
-  activeRouteThreadKey: string | null;
-  newThreadShortcutLabel: string | null;
-  handleNewThread: ReturnType<typeof useNewThreadHandler>["handleNewThread"];
-  archiveThread: ReturnType<typeof useThreadActions>["archiveThread"];
-  pinThread: ReturnType<typeof useThreadActions>["pinThread"];
-  unpinThread: ReturnType<typeof useThreadActions>["unpinThread"];
-  deleteThread: ReturnType<typeof useThreadActions>["deleteThread"];
-  threadJumpLabelByKey: ReadonlyMap<string, string>;
-  attachThreadListAutoAnimateRef: (node: HTMLElement | null) => void;
-  expandThreadListForProject: (projectKey: string, additionalCount: number) => void;
-  collapseThreadListForProject: (projectKey: string) => void;
-  dragInProgressRef: React.RefObject<boolean>;
-  suppressProjectClickAfterDragRef: React.RefObject<boolean>;
-  suppressProjectClickForContextMenuRef: React.RefObject<boolean>;
-  isManualProjectSorting: boolean;
-  dragHandleProps: SortableProjectHandleProps | null;
-}
-
-const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjectItemProps) {
-  const {
-    project,
-    revealedThreadCount,
-    activeRouteThreadKey,
-    newThreadShortcutLabel,
-    handleNewThread,
-    archiveThread,
-    pinThread,
-    unpinThread,
-    deleteThread,
-    threadJumpLabelByKey,
-    attachThreadListAutoAnimateRef,
-    expandThreadListForProject,
-    collapseThreadListForProject,
-    dragInProgressRef,
-    suppressProjectClickAfterDragRef,
-    suppressProjectClickForContextMenuRef,
-    isManualProjectSorting,
-    dragHandleProps,
-  } = props;
-  const threadSortOrder = useSettings<SidebarThreadSortOrder>(
-    (settings) => settings.sidebarThreadSortOrder,
+/**
+ * The sidebar is an inbox.
+ *
+ * One live list holding every thread that is still open, ordered by when it
+ * was created and never reordered by activity, so a row keeps its place from
+ * open until it is marked done. Below it, the Done tail, ordered by when the
+ * work ended. Projects are a scope filter across the top rather than a tree:
+ * every row names its own project, so nothing has to be traced back to a
+ * group header.
+ */
+export default function Sidebar() {
+  const projects = useStore(useShallow(selectProjectsAcrossEnvironments));
+  const primaryEnvironmentId = usePrimaryEnvironmentId();
+  const sidebarThreads = useStore(useShallow(selectSidebarThreadsAcrossEnvironments));
+  const threadLastVisitedAtById = useUiStateStore((store) => store.threadLastVisitedAtById);
+  const doneThreadOverrides = useUiStateStore((store) => store.doneThreadOverrides);
+  const inboxProjectScopeKey = useUiStateStore((store) => store.inboxProjectScopeKey);
+  const setInboxProjectScope = useUiStateStore((store) => store.setInboxProjectScope);
+  const markThreadDoneInStore = useUiStateStore((store) => store.markThreadDone);
+  const reopenThreadInStore = useUiStateStore((store) => store.reopenThread);
+  const markThreadUnread = useUiStateStore((store) => store.markThreadUnread);
+  const navigate = useNavigate();
+  const router = useRouter();
+  const pathname = useLocation({ select: (loc) => loc.pathname });
+  const isOnSettings = pathname.startsWith("/settings");
+  const isOnChats = pathname.startsWith("/chats");
+  const projectGroupingSettings = useSettings(selectProjectGroupingSettings);
+  const appSettingsConfirmThreadArchive = useSettings<boolean>(
+    (settings) => settings.confirmThreadArchive,
   );
   const appSettingsConfirmThreadDelete = useSettings<boolean>(
     (settings) => settings.confirmThreadDelete,
   );
-  const appSettingsConfirmThreadArchive = useSettings<boolean>(
-    (settings) => settings.confirmThreadArchive,
-  );
   const defaultThreadEnvMode = useSettings<ThreadEnvMode>(
     (settings) => settings.defaultThreadEnvMode,
   );
-  const projectGroupingSettings = useSettings(selectProjectGroupingSettings);
-  const { updateSettings } = useUpdateSettings();
-  const sidebarThreadPreviewCount = useSettings<SidebarThreadPreviewCount>(
-    (settings) => settings.sidebarThreadPreviewCount,
-  );
-  const router = useRouter();
+  // The full hook (rather than `useNewThreadHandler`) because compose has to
+  // resolve the same default project and draft context the app menu's "New
+  // thread" action uses.
+  const { activeDraftThread, activeThread, defaultProjectRef, handleNewThread } =
+    useHandleNewThread();
+  const { archiveThread, deleteThread, pinThread, unpinThread } = useThreadActions();
   const { isMobile, setOpenMobile } = useSidebar();
-  const markThreadUnread = useUiStateStore((state) => state.markThreadUnread);
-  const toggleProject = useUiStateStore((state) => state.toggleProject);
-  const toggleThreadSelection = useThreadSelectionStore((state) => state.toggleThread);
-  const rangeSelectTo = useThreadSelectionStore((state) => state.rangeSelectTo);
-  const clearSelection = useThreadSelectionStore((state) => state.clearSelection);
-  const removeFromSelection = useThreadSelectionStore((state) => state.removeFromSelection);
-  const setSelectionAnchor = useThreadSelectionStore((state) => state.setAnchor);
-  const { copyToClipboard: copyThreadIdToClipboard } = useCopyToClipboard<{
-    threadId: ThreadId;
-  }>({
+  const routeThreadRef = useParams({
+    strict: false,
+    select: (params) => resolveThreadRouteRef(params),
+  });
+  const routeThreadKey = routeThreadRef ? scopedThreadKey(routeThreadRef) : null;
+  const keybindings = useServerKeybindings();
+  const openAddProjectCommandPalette = useCommandPaletteStore((store) => store.openAddProject);
+  const { showThreadJumpHints, updateThreadJumpHintsVisibility } = useThreadJumpHintVisibility();
+  const clearSelection = useThreadSelectionStore((s) => s.clearSelection);
+  const setSelectionAnchor = useThreadSelectionStore((s) => s.setAnchor);
+  const toggleThreadSelection = useThreadSelectionStore((s) => s.toggleThread);
+  const rangeSelectTo = useThreadSelectionStore((s) => s.rangeSelectTo);
+  const removeFromSelection = useThreadSelectionStore((s) => s.removeFromSelection);
+  const platform = navigator.platform;
+  const shortcutModifiers = useShortcutModifierState();
+  const modelPickerOpen = useModelPickerOpen();
+  const savedEnvironmentRegistry = useSavedEnvironmentRegistryStore((s) => s.byId);
+  const savedEnvironmentRuntimeById = useSavedEnvironmentRuntimeStore((s) => s.byId);
+  const [renamingThreadKey, setRenamingThreadKey] = useState<string | null>(null);
+  const [renamingTitle, setRenamingTitle] = useState("");
+  const [confirmingArchiveThreadKey, setConfirmingArchiveThreadKey] = useState<string | null>(null);
+  const [revealedLiveCount, setRevealedLiveCount] = useState(0);
+  const [doneCollapsed, setDoneCollapsed] = useState(false);
+  const [revealedDoneCount, setRevealedDoneCount] = useState(0);
+  const renamingCommittedRef = useRef(false);
+  const renamingInputRef = useRef<HTMLInputElement | null>(null);
+  const confirmArchiveButtonRefs = useRef(new Map<string, HTMLButtonElement>());
+  const nowMs = useRelativeTimeTick(INBOX_CLOCK_INTERVAL_MS);
+  const nowIso = useMemo(() => new Date(nowMs).toISOString(), [nowMs]);
+
+  const { copyToClipboard: copyThreadIdToClipboard } = useCopyToClipboard<{ threadId: ThreadId }>({
     onCopy: (ctx) => {
       toastManager.add({
         type: "success",
@@ -1146,15 +413,9 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
       );
     },
   });
-  const { copyToClipboard: copyPathToClipboard } = useCopyToClipboard<{
-    path: string;
-  }>({
+  const { copyToClipboard: copyPathToClipboard } = useCopyToClipboard<{ path: string }>({
     onCopy: (ctx) => {
-      toastManager.add({
-        type: "success",
-        title: "Path copied",
-        description: ctx.path,
-      });
+      toastManager.add({ type: "success", title: "Path copied", description: ctx.path });
     },
     onError: (error) => {
       toastManager.add(
@@ -1166,37 +427,48 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
       );
     },
   });
-  const openPrLink = useCallback((event: React.MouseEvent<HTMLElement>, prUrl: string) => {
-    event.preventDefault();
-    event.stopPropagation();
 
-    const api = readLocalApi();
-    if (!api) {
-      toastManager.add({
-        type: "error",
-        title: "Link opening is unavailable.",
-      });
-      return;
-    }
-
-    void api.shell.openExternal(prUrl).catch((error) => {
-      toastManager.add(
-        stackedThreadToast({
-          type: "error",
-          title: "Unable to open pull request link",
-          description: error instanceof Error ? error.message : "An error occurred.",
-        }),
-      );
-    });
-  }, []);
-  const sidebarThreads = useStore(
-    useShallow(
-      useMemo(
-        () => (state: import("../store").AppState) =>
-          selectSidebarThreadsForProjectRefs(state, project.memberProjectRefs),
-        [project.memberProjectRefs],
+  const physicalToLogicalKey = useMemo(
+    () =>
+      buildPhysicalToLogicalProjectKeyMap({
+        projects,
+        settings: projectGroupingSettings,
+      }),
+    [projects, projectGroupingSettings],
+  );
+  const projectPhysicalKeyByScopedRef = useMemo(
+    () =>
+      new Map(
+        projects.map((project) => [
+          scopedProjectKey(scopeProjectRef(project.environmentId, project.id)),
+          derivePhysicalProjectKey(project),
+        ]),
       ),
-    ),
+    [projects],
+  );
+  const sidebarProjects = useMemo<SidebarProjectSnapshot[]>(
+    () =>
+      buildSidebarProjectSnapshots({
+        projects,
+        settings: projectGroupingSettings,
+        primaryEnvironmentId,
+        resolveEnvironmentLabel: (environmentId) => {
+          const rt = savedEnvironmentRuntimeById[environmentId];
+          const saved = savedEnvironmentRegistry[environmentId];
+          return rt?.descriptor?.label ?? saved?.label ?? null;
+        },
+      }),
+    [
+      projects,
+      projectGroupingSettings,
+      primaryEnvironmentId,
+      savedEnvironmentRegistry,
+      savedEnvironmentRuntimeById,
+    ],
+  );
+  const sidebarProjectByKey = useMemo(
+    () => new Map(sidebarProjects.map((project) => [project.projectKey, project] as const)),
+    [sidebarProjects],
   );
   const sidebarThreadByKey = useMemo(
     () =>
@@ -1208,513 +480,183 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
       ),
     [sidebarThreads],
   );
-  // Keep a ref so callbacks can read the latest map without appearing in
-  // dependency arrays (avoids invalidating every thread-row memo on each
-  // thread-list change).
+  // Callbacks read the latest map through a ref so they stay stable across
+  // thread-list changes and never invalidate every row's memo.
   const sidebarThreadByKeyRef = useRef(sidebarThreadByKey);
   sidebarThreadByKeyRef.current = sidebarThreadByKey;
-  const projectThreads = sidebarThreads;
-  // Threads with a deck row are rendered there instead of here, so the same
-  // thread never appears twice in the sidebar.
-  const onDeckThreadKeys = useUiStateStore(useShallow((state) => state.onDeckThreadKeys));
-  const onDeckThreadKeySet = useMemo(() => new Set(onDeckThreadKeys), [onDeckThreadKeys]);
-  const projectExpanded = useUiStateStore(
-    (state) => state.projectExpandedById[project.projectKey] ?? true,
-  );
-  const threadLastVisitedAts = useUiStateStore(
-    useShallow((state) =>
-      projectThreads.map(
-        (thread) =>
-          state.threadLastVisitedAtById[
-            scopedThreadKey(scopeThreadRef(thread.environmentId, thread.id))
-          ] ?? null,
-      ),
-    ),
+
+  const resolveProjectKeyForRef = useCallback(
+    (projectRef: ScopedProjectRef) => {
+      const scopedRef = scopedProjectKey(projectRef);
+      const physicalKey = projectPhysicalKeyByScopedRef.get(scopedRef) ?? scopedRef;
+      return physicalToLogicalKey.get(physicalKey) ?? physicalKey;
+    },
+    [physicalToLogicalKey, projectPhysicalKeyByScopedRef],
   );
-  const [renamingThreadKey, setRenamingThreadKey] = useState<string | null>(null);
-  const [renamingTitle, setRenamingTitle] = useState("");
-  const [confirmingArchiveThreadKey, setConfirmingArchiveThreadKey] = useState<string | null>(null);
-  const [projectRenameTarget, setProjectRenameTarget] = useState<SidebarProjectGroupMember | null>(
-    null,
+  const resolveThreadProjectKey = useCallback(
+    (thread: SidebarThreadSummary) =>
+      resolveProjectKeyForRef(scopeProjectRef(thread.environmentId, thread.projectId)),
+    [resolveProjectKeyForRef],
   );
-  const [projectRenameTitle, setProjectRenameTitle] = useState("");
-  const [projectGroupingTarget, setProjectGroupingTarget] =
-    useState<SidebarProjectGroupMember | null>(null);
-  const [projectGroupingSelection, setProjectGroupingSelection] = useState<
-    SidebarProjectGroupingMode | "inherit"
-  >("inherit");
-  const renamingCommittedRef = useRef(false);
-  const renamingInputRef = useRef<HTMLInputElement | null>(null);
-  const confirmArchiveButtonRefs = useRef(new Map<string, HTMLButtonElement>());
-  const memberProjectByScopedKey = useMemo(
+
+  // General chats belong to no project and have their own page; they never
+  // join the inbox, which is the list of project work.
+  const generalChatProjectKeys = useMemo(
     () =>
-      new Map(
-        project.memberProjects.map((member) => [
-          scopedProjectKey(scopeProjectRef(member.environmentId, member.id)),
-          member,
-        ]),
+      new Set(
+        sidebarProjects
+          .filter((project) => project.kind === "general-chat")
+          .map((project) => project.projectKey),
       ),
-    [project.memberProjects],
+    [sidebarProjects],
   );
-  const memberThreadCountByPhysicalKey = useMemo(() => {
-    const counts = new Map<string, number>(
-      project.memberProjects.map((member) => [member.physicalProjectKey, 0] as const),
-    );
-    for (const thread of projectThreads) {
-      const member = memberProjectByScopedKey.get(
-        scopedProjectKey(scopeProjectRef(thread.environmentId, thread.projectId)),
-      );
-      if (!member) {
-        continue;
-      }
-      counts.set(member.physicalProjectKey, (counts.get(member.physicalProjectKey) ?? 0) + 1);
-    }
-    return counts;
-  }, [memberProjectByScopedKey, project.memberProjects, projectThreads]);
-
-  const { hoverSummary, projectStatus, visibleProjectThreads, orderedProjectThreadKeys } =
-    useMemo(() => {
-      const lastVisitedAtByThreadKey = new Map(
-        projectThreads.map((thread, index) => [
-          scopedThreadKey(scopeThreadRef(thread.environmentId, thread.id)),
-          threadLastVisitedAts[index] ?? null,
-        ]),
-      );
-      const visibleProjectThreads = sortThreads(
-        projectThreads.filter((thread) => thread.archivedAt === null),
-        threadSortOrder,
-      );
-      const hoverSummary = buildProjectHoverSummary({
-        name: project.displayName,
-        cwd: project.cwd,
-        environmentId: project.environmentId,
-        threads: visibleProjectThreads,
-        getLastVisitedAt: (threadKey) => lastVisitedAtByThreadKey.get(threadKey),
-      });
-      const projectStatus = hoverSummary.status;
-      return {
-        orderedProjectThreadKeys: visibleProjectThreads.map((thread) =>
-          scopedThreadKey(scopeThreadRef(thread.environmentId, thread.id)),
-        ),
-        hoverSummary,
-        projectStatus,
-        visibleProjectThreads,
-      };
-    }, [projectThreads, threadLastVisitedAts, threadSortOrder]);
-
-  const {
-    hiddenThreadStatus,
-    renderedThreads,
-    nextRevealCount,
-    searchHandoffThreadCount,
-    isThreadListRevealed,
-    showEmptyThreadState,
-    shouldShowThreadPanel,
-  } = useMemo(() => {
-    const lastVisitedAtByThreadKey = new Map(
-      projectThreads.map((thread, index) => [
-        scopedThreadKey(scopeThreadRef(thread.environmentId, thread.id)),
-        threadLastVisitedAts[index] ?? null,
-      ]),
-    );
-    const resolveProjectThreadStatus = (thread: SidebarThreadSummary) => {
-      const lastVisitedAt = lastVisitedAtByThreadKey.get(
-        scopedThreadKey(scopeThreadRef(thread.environmentId, thread.id)),
-      );
-      return resolveThreadStatusPill({
-        thread: {
-          ...thread,
-          ...(lastVisitedAt !== null && lastVisitedAt !== undefined ? { lastVisitedAt } : {}),
-        },
-      });
-    };
-    const treeThreads = excludeOnDeckThreads({
-      threads: visibleProjectThreads,
-      onDeckThreadKeys: onDeckThreadKeySet,
-      getThreadKey: (thread) => scopedThreadKey(scopeThreadRef(thread.environmentId, thread.id)),
-    });
-    const threadWindow = getSidebarThreadWindow({
-      threads: treeThreads,
-      getThreadKey: (thread) => scopedThreadKey(scopeThreadRef(thread.environmentId, thread.id)),
-      activeThreadKey: activeRouteThreadKey,
-      previewLimit: sidebarThreadPreviewCount,
-      revealedCount: revealedThreadCount,
-    });
-    return {
-      hiddenThreadStatus: resolveProjectStatusIndicator(
-        threadWindow.hiddenThreads.map((thread) => resolveProjectThreadStatus(thread)),
+  const inboxThreads = useMemo(
+    () =>
+      sidebarThreads.filter(
+        (thread) =>
+          thread.archivedAt === null &&
+          !generalChatProjectKeys.has(resolveThreadProjectKey(thread)),
       ),
-      renderedThreads: threadWindow.visibleThreads,
-      nextRevealCount: threadWindow.nextRevealCount,
-      searchHandoffThreadCount: threadWindow.searchHandoffThreadCount,
-      isThreadListRevealed: threadWindow.isRevealed,
-      // Deliberately the unfiltered list: a project whose only threads are on
-      // deck still has threads, so "no threads yet" would be a lie. It simply
-      // renders no rows of its own.
-      showEmptyThreadState: projectExpanded && visibleProjectThreads.length === 0,
-      shouldShowThreadPanel: projectExpanded,
-    };
-  }, [
-    activeRouteThreadKey,
-    onDeckThreadKeySet,
-    projectExpanded,
-    projectThreads,
-    revealedThreadCount,
-    sidebarThreadPreviewCount,
-    threadLastVisitedAts,
-    visibleProjectThreads,
-  ]);
-
-  const handleProjectButtonClick = useCallback(
-    (event: React.MouseEvent<HTMLButtonElement>) => {
-      if (suppressProjectClickForContextMenuRef.current) {
-        suppressProjectClickForContextMenuRef.current = false;
-        event.preventDefault();
-        event.stopPropagation();
-        return;
-      }
-      if (dragInProgressRef.current) {
-        event.preventDefault();
-        event.stopPropagation();
-        return;
-      }
-      if (suppressProjectClickAfterDragRef.current) {
-        suppressProjectClickAfterDragRef.current = false;
-        event.preventDefault();
-        event.stopPropagation();
-        return;
-      }
-      if (useThreadSelectionStore.getState().hasSelection()) {
-        clearSelection();
-      }
-      // Folding a project also resets its revealed thread list, so reopening
-      // it later starts back at the compact preview.
-      if (projectExpanded) {
-        collapseThreadListForProject(project.projectKey);
-      }
-      toggleProject(project.projectKey);
-    },
-    [
-      clearSelection,
-      collapseThreadListForProject,
-      dragInProgressRef,
-      project.projectKey,
-      projectExpanded,
-      suppressProjectClickAfterDragRef,
-      suppressProjectClickForContextMenuRef,
-      toggleProject,
-    ],
+    [generalChatProjectKeys, resolveThreadProjectKey, sidebarThreads],
   );
+  const hasWorkspaceProjects = sidebarProjects.some((project) => project.kind !== "general-chat");
 
-  const handleProjectButtonKeyDown = useCallback(
-    (event: React.KeyboardEvent<HTMLButtonElement>) => {
-      if (event.key !== "Enter" && event.key !== " ") return;
-      event.preventDefault();
-      if (dragInProgressRef.current) {
-        return;
-      }
-      if (projectExpanded) {
-        collapseThreadListForProject(project.projectKey);
-      }
-      toggleProject(project.projectKey);
-    },
+  const entries = useMemo<InboxEntry[]>(
+    () =>
+      inboxThreads.map((thread) => {
+        const threadKey = scopedThreadKey(scopeThreadRef(thread.environmentId, thread.id));
+        const lastVisitedAt = threadLastVisitedAtById[threadKey];
+        const status = resolveThreadStatusPill({
+          thread: {
+            ...thread,
+            ...(lastVisitedAt !== undefined ? { lastVisitedAt } : {}),
+          },
+        });
+        const projectKey = resolveThreadProjectKey(thread);
+        const override = doneThreadOverrides[threadKey];
+        const isDone = isThreadDone({ ...thread, lastVisitedAt }, override, {
+          now: nowIso,
+          autoDoneAfterDays: INBOX_AUTO_DONE_AFTER_DAYS,
+        });
+        return {
+          thread,
+          threadKey,
+          status,
+          projectKey,
+          projectLabel: sidebarProjectByKey.get(projectKey)?.displayName ?? null,
+          isDone,
+          canMarkDone: canMarkThreadDone(thread, { now: nowIso }),
+          doneAt: isDone ? resolveDoneTimestamp(thread, override) : null,
+        };
+      }),
     [
-      collapseThreadListForProject,
-      dragInProgressRef,
-      project.projectKey,
-      projectExpanded,
-      toggleProject,
+      doneThreadOverrides,
+      inboxThreads,
+      nowIso,
+      resolveThreadProjectKey,
+      sidebarProjectByKey,
+      threadLastVisitedAtById,
     ],
   );
 
-  const handleSearchAllThreads = useCallback(() => {
-    useCommandPaletteStore.getState().openThreadSearch({
-      projectName: project.displayName,
-      memberProjectKeys: project.memberProjectRefs.map((ref) => scopedProjectKey(ref)),
-    });
-  }, [project.displayName, project.memberProjectRefs]);
-
-  const handleProjectButtonPointerDownCapture = useCallback(
-    (event: React.PointerEvent<HTMLButtonElement>) => {
-      suppressProjectClickForContextMenuRef.current = false;
-      if (
-        isContextMenuPointerDown({
-          button: event.button,
-          ctrlKey: event.ctrlKey,
-          isMac: isMacPlatform(navigator.platform),
-        })
-      ) {
-        event.stopPropagation();
+  const scopedProjectKeyValue =
+    inboxProjectScopeKey !== null && sidebarProjectByKey.has(inboxProjectScopeKey)
+      ? inboxProjectScopeKey
+      : null;
+
+  const scopeOptions = useMemo(() => {
+    const lastActivityMsByKey = new Map<string, number>();
+    const needsYouCountByKey = new Map<string, number>();
+    for (const entry of entries) {
+      const activityAt =
+        toSortableTimestamp(
+          entry.thread.latestUserMessageAt ?? entry.thread.updatedAt ?? entry.thread.createdAt,
+        ) ?? 0;
+      lastActivityMsByKey.set(
+        entry.projectKey,
+        Math.max(lastActivityMsByKey.get(entry.projectKey) ?? 0, activityAt),
+      );
+      if (!entry.isDone && isNeedsUserStatus(entry.status)) {
+        needsYouCountByKey.set(
+          entry.projectKey,
+          (needsYouCountByKey.get(entry.projectKey) ?? 0) + 1,
+        );
       }
-
-      suppressProjectClickAfterDragRef.current = false;
-    },
-    [suppressProjectClickAfterDragRef, suppressProjectClickForContextMenuRef],
+    }
+    return buildProjectScopeOptions({
+      projects: sidebarProjects
+        .filter((project) => project.kind !== "general-chat")
+        .map((project) => ({ key: project.projectKey, label: project.displayName })),
+      lastActivityMsByKey,
+      needsYouCountByKey,
+    });
+  }, [entries, sidebarProjects]);
+
+  const { liveEntries, doneEntries } = useMemo(() => {
+    const scoped =
+      scopedProjectKeyValue === null
+        ? entries
+        : entries.filter((entry) => entry.projectKey === scopedProjectKeyValue);
+    const entryByThreadKey = new Map(scoped.map((entry) => [entry.threadKey, entry] as const));
+    const lookup = (thread: SidebarThreadSummary) =>
+      entryByThreadKey.get(scopedThreadKey(scopeThreadRef(thread.environmentId, thread.id)))!;
+    const liveEntries = sortInboxThreads(
+      scoped.filter((entry) => !entry.isDone).map((entry) => entry.thread),
+    ).map(lookup);
+    const doneEntries = sortDoneThreads(
+      scoped.filter((entry) => entry.isDone).map((entry) => entry.thread),
+      (thread) =>
+        doneThreadOverrides[scopedThreadKey(scopeThreadRef(thread.environmentId, thread.id))],
+    ).map(lookup);
+    return { liveEntries, doneEntries };
+  }, [doneThreadOverrides, entries, scopedProjectKeyValue]);
+
+  // Volume is managed by folding, not by flattening rows: quiet threads past
+  // the limit fold away, and anything with a status stays put.
+  const { visible: visibleLiveEntries, hiddenCount: hiddenLiveCount } = useMemo(
+    () =>
+      windowInboxThreads({
+        rows: liveEntries,
+        hasAttention: (entry) => entry.status !== null,
+        limit: LIVE_PREVIEW_COUNT + revealedLiveCount,
+        expanded: false,
+      }),
+    [liveEntries, revealedLiveCount],
   );
-
-  const openProjectRenameDialog = useCallback((member: SidebarProjectGroupMember) => {
-    setProjectRenameTarget(member);
-    setProjectRenameTitle(member.name);
-  }, []);
-
-  const openProjectGroupingDialog = useCallback(
-    (member: SidebarProjectGroupMember) => {
-      const overrideKey = deriveProjectGroupingOverrideKey(member);
-      setProjectGroupingTarget(member);
-      setProjectGroupingSelection(
-        projectGroupingSettings.sidebarProjectGroupingOverrides?.[overrideKey] ?? "inherit",
-      );
-    },
-    [projectGroupingSettings.sidebarProjectGroupingOverrides],
+  const nextLiveRevealCount = Math.min(LIVE_REVEAL_STEP, hiddenLiveCount);
+  const visibleDoneEntries = useMemo(
+    () => doneEntries.slice(0, DONE_PREVIEW_COUNT + revealedDoneCount),
+    [doneEntries, revealedDoneCount],
   );
-
-  const removeProject = useCallback(
-    async (member: SidebarProjectGroupMember, options: { force?: boolean } = {}): Promise<void> => {
-      const memberProjectRef = scopeProjectRef(member.environmentId, member.id);
-      const draftStore = useComposerDraftStore.getState();
-      const projectDraftThread = draftStore.getDraftThreadByProjectRef(memberProjectRef);
-      if (projectDraftThread) {
-        draftStore.clearDraftThread(projectDraftThread.draftId);
-      }
-      draftStore.clearProjectDraftThreadId(memberProjectRef);
-
-      const projectApi = readEnvironmentApi(member.environmentId);
-      if (!projectApi) {
-        throw new Error("Project API unavailable.");
-      }
-
-      await projectApi.orchestration.dispatchCommand({
-        type: "project.delete",
-        commandId: newCommandId(),
-        projectId: member.id,
-        ...(options.force === true ? { force: true } : {}),
-      });
-    },
-    [],
+  const nextDoneRevealCount = Math.min(
+    DONE_REVEAL_STEP,
+    doneEntries.length - visibleDoneEntries.length,
   );
-
-  const handleRemoveProject = useCallback(
-    async (member: SidebarProjectGroupMember) => {
-      const api = readLocalApi();
-      if (!api) {
-        return;
-      }
-
-      const memberProjectRef = scopeProjectRef(member.environmentId, member.id);
-      const memberThreadCount = memberThreadCountByPhysicalKey.get(member.physicalProjectKey) ?? 0;
-      if (memberThreadCount > 0) {
-        const warningToastId = toastManager.add(
-          stackedThreadToast({
-            type: "warning",
-            title: "Project is not empty",
-            description: "Delete all threads in this project before removing it.",
-            actionVariant: "destructive",
-            actionProps: {
-              children: "Delete anyway",
-              onClick: () => {
-                void (async () => {
-                  toastManager.close(warningToastId);
-                  await new Promise<void>((resolve) => {
-                    window.setTimeout(resolve, 180);
-                  });
-
-                  const latestProjectThreads = selectSidebarThreadsForProjectRefs(
-                    useStore.getState(),
-                    [memberProjectRef],
-                  );
-                  const confirmed = await api.dialogs.confirm(
-                    latestProjectThreads.length > 0
-                      ? [
-                          `Remove project "${member.name}" and delete its ${latestProjectThreads.length} thread${
-                            latestProjectThreads.length === 1 ? "" : "s"
-                          }?`,
-                          `Path: ${member.cwd}`,
-                          ...(member.environmentLabel
-                            ? [`Environment: ${member.environmentLabel}`]
-                            : []),
-                          "This permanently clears conversation history for those threads.",
-                          "This removes only this project entry.",
-                          "This action cannot be undone.",
-                        ].join("\n")
-                      : [
-                          `Remove project "${member.name}"?`,
-                          `Path: ${member.cwd}`,
-                          ...(member.environmentLabel
-                            ? [`Environment: ${member.environmentLabel}`]
-                            : []),
-                          "This removes only this project entry.",
-                        ].join("\n"),
-                  );
-                  if (!confirmed) {
-                    return;
-                  }
-
-                  await removeProject(member, { force: true });
-                })().catch((error) => {
-                  const message =
-                    error instanceof Error ? error.message : "Unknown error removing project.";
-                  console.error("Failed to remove project", {
-                    projectId: member.id,
-                    environmentId: member.environmentId,
-                    error,
-                  });
-                  toastManager.add(
-                    stackedThreadToast({
-                      type: "error",
-                      title: `Failed to remove "${member.name}"`,
-                      description: message,
-                    }),
-                  );
-                });
-              },
-            },
-          }),
-        );
-        return;
-      }
-
-      const message = [
-        `Remove project "${member.name}"?`,
-        `Path: ${member.cwd}`,
-        ...(member.environmentLabel ? [`Environment: ${member.environmentLabel}`] : []),
-        "This removes only this project entry.",
-      ].join("\n");
-      const confirmed = await api.dialogs.confirm(message);
-      if (!confirmed) {
-        return;
-      }
-
-      try {
-        await removeProject(member);
-      } catch (error) {
-        const message = error instanceof Error ? error.message : "Unknown error removing project.";
-        console.error("Failed to remove project", {
-          projectId: member.id,
-          environmentId: member.environmentId,
-          error,
-        });
-        toastManager.add(
-          stackedThreadToast({
-            type: "error",
-            title: `Failed to remove "${member.name}"`,
-            description: message,
-          }),
-        );
-      }
-    },
-    [memberThreadCountByPhysicalKey, removeProject],
+  // Collapsed, the shelf still holds the thread you are reading: closing a
+  // section should not close the thing you have open in it.
+  const renderedDoneEntries = useMemo(
+    () =>
+      doneCollapsed
+        ? doneEntries.filter((entry) => entry.threadKey === routeThreadKey)
+        : visibleDoneEntries,
+    [doneCollapsed, doneEntries, routeThreadKey, visibleDoneEntries],
   );
+  const toggleDoneCollapsed = useCallback(() => {
+    setDoneCollapsed((collapsed) => !collapsed);
+  }, []);
 
-  const handleProjectButtonContextMenu = useCallback(
-    (event: React.MouseEvent<HTMLButtonElement>) => {
-      event.preventDefault();
-      suppressProjectClickForContextMenuRef.current = true;
-      // The General Chats system project is server-managed: rename, grouping,
-      // path, and removal do not apply (the server rejects them anyway).
-      if (project.kind === "general-chat") {
-        return;
-      }
-      void (async () => {
-        const api = readLocalApi();
-        if (!api) return;
-
-        const actionHandlers = new Map<string, () => Promise<void> | void>();
-        const makeLeaf = (
-          action: "rename" | "grouping" | "copy-path" | "delete",
-          member: SidebarProjectGroupMember,
-          options?: {
-            destructive?: boolean;
-            disabled?: boolean;
-          },
-        ): ContextMenuItem<string> => {
-          const id = `${action}:${member.physicalProjectKey}`;
-          actionHandlers.set(id, () => {
-            switch (action) {
-              case "rename":
-                openProjectRenameDialog(member);
-                return;
-              case "grouping":
-                openProjectGroupingDialog(member);
-                return;
-              case "copy-path":
-                copyPathToClipboard(member.cwd, { path: member.cwd });
-                return;
-              case "delete":
-                return handleRemoveProject(member);
-            }
-          });
-
-          return {
-            id,
-            label: formatProjectMemberActionLabel(member, project.groupedProjectCount),
-            ...(options?.destructive ? { destructive: true } : {}),
-            ...(options?.disabled ? { disabled: true } : {}),
-          };
-        };
-
-        const buildTargetedItem = (
-          action: "rename" | "grouping" | "copy-path" | "delete",
-          label: string,
-          options?: {
-            destructive?: boolean;
-            isDisabled?: (member: SidebarProjectGroupMember) => boolean;
-          },
-        ): ContextMenuItem<string> => {
-          if (project.memberProjects.length === 1) {
-            const singleMember = project.memberProjects[0]!;
-            return {
-              ...makeLeaf(action, singleMember, {
-                ...(options?.destructive ? { destructive: true } : {}),
-                ...(options?.isDisabled?.(singleMember) ? { disabled: true } : {}),
-              }),
-              label,
-            };
-          }
-
-          return {
-            id: `${action}:submenu`,
-            label,
-            children: project.memberProjects.map((member) =>
-              makeLeaf(action, member, {
-                ...(options?.destructive ? { destructive: true } : {}),
-                ...(options?.isDisabled?.(member) ? { disabled: true } : {}),
-              }),
-            ),
-          };
-        };
-
-        const clicked = await api.contextMenu.show(
-          [
-            buildTargetedItem("rename", "Rename project"),
-            buildTargetedItem("grouping", "Project grouping…"),
-            buildTargetedItem("copy-path", "Copy Project Path"),
-            buildTargetedItem("delete", "Remove project", {
-              destructive: true,
-            }),
-          ],
-          {
-            x: event.clientX,
-            y: event.clientY,
-          },
-        );
-
-        if (!clicked) {
-          return;
-        }
+  // A new scope is a new list; the reveals from the old one mean nothing here.
+  useEffect(() => {
+    setRevealedLiveCount(0);
+    setRevealedDoneCount(0);
+  }, [scopedProjectKeyValue]);
 
-        await actionHandlers.get(clicked)?.();
-      })();
-    },
-    [
-      copyPathToClipboard,
-      handleRemoveProject,
-      openProjectGroupingDialog,
-      openProjectRenameDialog,
-      project.groupedProjectCount,
-      project.kind,
-      project.memberProjects,
-      suppressProjectClickForContextMenuRef,
+  const orderedThreadKeys = useMemo(
+    () => [
+      ...visibleLiveEntries.map((entry) => entry.threadKey),
+      ...renderedDoneEntries.map((entry) => entry.threadKey),
     ],
+    [renderedDoneEntries, visibleLiveEntries],
   );
 
   const navigateToThread = useCallback(
@@ -1726,23 +668,18 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
       if (isMobile) {
         setOpenMobile(false);
       }
-      void router.navigate({
+      void navigate({
         to: "/$environmentId/$threadId",
         params: buildThreadRouteParams(threadRef),
       });
     },
-    [clearSelection, isMobile, router, setOpenMobile, setSelectionAnchor],
+    [clearSelection, isMobile, navigate, setOpenMobile, setSelectionAnchor],
   );
 
   const handleThreadClick = useCallback(
-    (
-      event: React.MouseEvent,
-      threadRef: ScopedThreadRef,
-      orderedProjectThreadKeys: readonly string[],
-    ) => {
+    (event: React.MouseEvent, threadRef: ScopedThreadRef, rowKeys: readonly string[]) => {
       const isMac = isMacPlatform(navigator.platform);
       const isModClick = isMac ? event.metaKey : event.ctrlKey;
-      const isShiftClick = event.shiftKey;
       const threadKey = scopedThreadKey(threadRef);
       const currentSelectionCount = useThreadSelectionStore.getState().selectedThreadKeys.size;
 
@@ -1752,9 +689,9 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
         return;
       }
 
-      if (isShiftClick) {
+      if (event.shiftKey) {
         event.preventDefault();
-        rangeSelectTo(threadKey, orderedProjectThreadKeys);
+        rangeSelectTo(threadKey, rowKeys);
         return;
       }
 
@@ -1765,7 +702,7 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
       if (isMobile) {
         setOpenMobile(false);
       }
-      void router.navigate({
+      void navigate({
         to: "/$environmentId/$threadId",
         params: buildThreadRouteParams(threadRef),
       });
@@ -1773,172 +710,34 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
     [
       clearSelection,
       isMobile,
+      navigate,
       rangeSelectTo,
-      router,
       setOpenMobile,
       setSelectionAnchor,
       toggleThreadSelection,
     ],
   );
 
-  const handleMultiSelectContextMenu = useCallback(
-    async (position: { x: number; y: number }) => {
-      const api = readLocalApi();
-      if (!api) return;
-      const threadKeys = [...useThreadSelectionStore.getState().selectedThreadKeys];
-      if (threadKeys.length === 0) return;
-      const count = threadKeys.length;
+  const openPrLink = useCallback((event: React.MouseEvent<HTMLElement>, prUrl: string) => {
+    event.preventDefault();
+    event.stopPropagation();
 
-      const clicked = await api.contextMenu.show(
-        [
-          { id: "mark-unread", label: `Mark unread (${count})` },
-          { id: "delete", label: `Delete (${count})`, destructive: true },
-        ],
-        position,
-      );
+    const api = readLocalApi();
+    if (!api) {
+      toastManager.add({ type: "error", title: "Link opening is unavailable." });
+      return;
+    }
 
-      if (clicked === "mark-unread") {
-        for (const threadKey of threadKeys) {
-          const thread = sidebarThreadByKeyRef.current.get(threadKey);
-          markThreadUnread(threadKey, thread?.latestTurn?.completedAt);
-        }
-        clearSelection();
-        return;
-      }
-
-      if (clicked !== "delete") return;
-
-      if (appSettingsConfirmThreadDelete) {
-        const confirmed = await api.dialogs.confirm(
-          [
-            `Delete ${count} thread${count === 1 ? "" : "s"}?`,
-            "This permanently clears conversation history for these threads.",
-          ].join("\n"),
-        );
-        if (!confirmed) return;
-      }
-
-      const deletedThreadKeys = new Set(threadKeys);
-      for (const threadKey of threadKeys) {
-        const thread = sidebarThreadByKeyRef.current.get(threadKey);
-        if (!thread) continue;
-        await deleteThread(scopeThreadRef(thread.environmentId, thread.id), {
-          deletedThreadKeys,
-        });
-      }
-      removeFromSelection(threadKeys);
-    },
-    [
-      appSettingsConfirmThreadDelete,
-      clearSelection,
-      deleteThread,
-      markThreadUnread,
-      removeFromSelection,
-    ],
-  );
-
-  const createThreadForProjectMember = useCallback(
-    (member: SidebarProjectGroupMember) => {
-      if (member.kind === "general-chat") {
-        if (isMobile) {
-          setOpenMobile(false);
-        }
-        void startNewGeneralChatThread(
-          handleNewThread,
-          scopeProjectRef(member.environmentId, member.id),
-        );
-        return;
-      }
-      const currentRouteParams =
-        router.state.matches[router.state.matches.length - 1]?.params ?? {};
-      const currentRouteTarget = resolveThreadRouteTarget(currentRouteParams);
-      const currentActiveThread =
-        currentRouteTarget?.kind === "server"
-          ? (selectThreadByRef(useStore.getState(), currentRouteTarget.threadRef) ?? null)
-          : null;
-      const draftStore = useComposerDraftStore.getState();
-      const currentActiveDraftThread =
-        currentRouteTarget?.kind === "server"
-          ? (draftStore.getDraftThread(currentRouteTarget.threadRef) ?? null)
-          : currentRouteTarget?.kind === "draft"
-            ? (draftStore.getDraftSession(currentRouteTarget.draftId) ?? null)
-            : null;
-      const seedContext = resolveSidebarNewThreadSeedContext({
-        projectId: member.id,
-        defaultEnvMode: resolveSidebarNewThreadEnvMode({
-          defaultEnvMode: defaultThreadEnvMode,
+    void api.shell.openExternal(prUrl).catch((error) => {
+      toastManager.add(
+        stackedThreadToast({
+          type: "error",
+          title: "Unable to open pull request link",
+          description: error instanceof Error ? error.message : "An error occurred.",
         }),
-        activeThread:
-          currentActiveThread && currentActiveThread.projectId === member.id
-            ? {
-                projectId: currentActiveThread.projectId,
-                branch: currentActiveThread.branch,
-                worktreePath: currentActiveThread.worktreePath,
-              }
-            : null,
-        activeDraftThread:
-          currentActiveDraftThread && currentActiveDraftThread.projectId === member.id
-            ? {
-                projectId: currentActiveDraftThread.projectId,
-                branch: currentActiveDraftThread.branch,
-                worktreePath: currentActiveDraftThread.worktreePath,
-                envMode: currentActiveDraftThread.envMode,
-              }
-            : null,
-      });
-      if (isMobile) {
-        setOpenMobile(false);
-      }
-      void handleNewThread(scopeProjectRef(member.environmentId, member.id), {
-        ...(seedContext.branch !== undefined ? { branch: seedContext.branch } : {}),
-        ...(seedContext.worktreePath !== undefined
-          ? { worktreePath: seedContext.worktreePath }
-          : {}),
-        envMode: seedContext.envMode,
-      });
-    },
-    [defaultThreadEnvMode, handleNewThread, isMobile, router, setOpenMobile],
-  );
-
-  const handleCreateThreadClick = useCallback(
-    (event: React.MouseEvent<HTMLButtonElement>) => {
-      event.preventDefault();
-      event.stopPropagation();
-
-      if (project.memberProjects.length === 1) {
-        createThreadForProjectMember(project.memberProjects[0]!);
-        return;
-      }
-
-      void (async () => {
-        const api = readLocalApi();
-        if (!api) {
-          return;
-        }
-        const clicked = await api.contextMenu.show(
-          project.memberProjects.map((member) => ({
-            id: member.physicalProjectKey,
-            label: formatProjectMemberActionLabel(member, project.groupedProjectCount),
-          })),
-          {
-            x: event.clientX,
-            y: event.clientY,
-          },
-        );
-        if (!clicked) {
-          return;
-        }
-        const targetMember = project.memberProjects.find(
-          (member) => member.physicalProjectKey === clicked,
-        );
-        if (!targetMember) {
-          return;
-        }
-        createThreadForProjectMember(targetMember);
-      })();
-    },
-    [createThreadForProjectMember, project.groupedProjectCount, project.memberProjects],
-  );
+      );
+    });
+  }, []);
 
   const attemptArchiveThread = useCallback(
     async (threadRef: ScopedThreadRef) => {
@@ -1956,6 +755,7 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
     },
     [archiveThread],
   );
+
   const attemptTogglePinThread = useCallback(
     async (threadRef: ScopedThreadRef, shouldPin: boolean) => {
       try {
@@ -1977,6 +777,19 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
     [pinThread, unpinThread],
   );
 
+  const markThreadDone = useCallback(
+    (threadKey: string) => {
+      markThreadDoneInStore(threadKey, new Date().toISOString());
+    },
+    [markThreadDoneInStore],
+  );
+  const reopenThread = useCallback(
+    (threadKey: string) => {
+      reopenThreadInStore(threadKey, new Date().toISOString());
+    },
+    [reopenThreadInStore],
+  );
+
   const cancelRename = useCallback(() => {
     setRenamingThreadKey(null);
     renamingInputRef.current = null;
@@ -1995,10 +808,7 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
 
       const trimmed = newTitle.trim();
       if (trimmed.length === 0) {
-        toastManager.add({
-          type: "warning",
-          title: "Thread title cannot be empty",
-        });
+        toastManager.add({ type: "warning", title: "Thread title cannot be empty" });
         finishRename();
         return;
       }
@@ -2032,91 +842,59 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
     [],
   );
 
-  const closeProjectRenameDialog = useCallback(() => {
-    setProjectRenameTarget(null);
-    setProjectRenameTitle("");
-  }, []);
-
-  const submitProjectRename = useCallback(async () => {
-    if (!projectRenameTarget) {
-      return;
-    }
-
-    const trimmed = projectRenameTitle.trim();
-    if (trimmed.length === 0) {
-      toastManager.add({
-        type: "warning",
-        title: "Project title cannot be empty",
-      });
-      return;
-    }
-
-    if (trimmed === projectRenameTarget.name) {
-      closeProjectRenameDialog();
-      return;
-    }
+  const handleMultiSelectContextMenu = useCallback(
+    async (position: { x: number; y: number }) => {
+      const api = readLocalApi();
+      if (!api) return;
+      const threadKeys = [...useThreadSelectionStore.getState().selectedThreadKeys];
+      if (threadKeys.length === 0) return;
+      const count = threadKeys.length;
 
-    const api = readEnvironmentApi(projectRenameTarget.environmentId);
-    if (!api) {
-      toastManager.add(
-        stackedThreadToast({
-          type: "error",
-          title: "Failed to rename project",
-          description: "Project API unavailable.",
-        }),
+      const clicked = await api.contextMenu.show(
+        [
+          { id: "mark-unread", label: `Mark unread (${count})` },
+          { id: "delete", label: `Delete (${count})`, destructive: true },
+        ],
+        position,
       );
-      return;
-    }
 
-    try {
-      await api.orchestration.dispatchCommand({
-        type: "project.meta.update",
-        commandId: newCommandId(),
-        projectId: projectRenameTarget.id,
-        title: trimmed,
-      });
-      closeProjectRenameDialog();
-    } catch (error) {
-      toastManager.add(
-        stackedThreadToast({
-          type: "error",
-          title: "Failed to rename project",
-          description: error instanceof Error ? error.message : "An error occurred.",
-        }),
-      );
-    }
-  }, [closeProjectRenameDialog, projectRenameTarget, projectRenameTitle]);
+      if (clicked === "mark-unread") {
+        for (const threadKey of threadKeys) {
+          const thread = sidebarThreadByKeyRef.current.get(threadKey);
+          markThreadUnread(threadKey, thread?.latestTurn?.completedAt);
+        }
+        clearSelection();
+        return;
+      }
 
-  const closeProjectGroupingDialog = useCallback(() => {
-    setProjectGroupingTarget(null);
-    setProjectGroupingSelection("inherit");
-  }, []);
+      if (clicked !== "delete") return;
 
-  const saveProjectGroupingPreference = useCallback(() => {
-    if (!projectGroupingTarget) {
-      return;
-    }
+      if (appSettingsConfirmThreadDelete) {
+        const confirmed = await api.dialogs.confirm(
+          [
+            `Delete ${count} thread${count === 1 ? "" : "s"}?`,
+            "This permanently clears conversation history for these threads.",
+          ].join("\n"),
+        );
+        if (!confirmed) return;
+      }
 
-    const overrideKey = deriveProjectGroupingOverrideKey(projectGroupingTarget);
-    const nextOverrides = {
-      ...projectGroupingSettings.sidebarProjectGroupingOverrides,
-    };
-    if (projectGroupingSelection === "inherit") {
-      delete nextOverrides[overrideKey];
-    } else {
-      nextOverrides[overrideKey] = projectGroupingSelection;
-    }
-    updateSettings({
-      sidebarProjectGroupingOverrides: nextOverrides,
-    });
-    closeProjectGroupingDialog();
-  }, [
-    closeProjectGroupingDialog,
-    projectGroupingSelection,
-    projectGroupingSettings.sidebarProjectGroupingOverrides,
-    projectGroupingTarget,
-    updateSettings,
-  ]);
+      const deletedThreadKeys = new Set(threadKeys);
+      for (const threadKey of threadKeys) {
+        const thread = sidebarThreadByKeyRef.current.get(threadKey);
+        if (!thread) continue;
+        await deleteThread(scopeThreadRef(thread.environmentId, thread.id), { deletedThreadKeys });
+      }
+      removeFromSelection(threadKeys);
+    },
+    [
+      appSettingsConfirmThreadDelete,
+      clearSelection,
+      deleteThread,
+      markThreadUnread,
+      removeFromSelection,
+    ],
+  );
 
   const handleThreadContextMenu = useCallback(
     async (threadRef: ScopedThreadRef, position: { x: number; y: number }) => {
@@ -2125,10 +903,11 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
       const threadKey = scopedThreadKey(threadRef);
       const thread = sidebarThreadByKeyRef.current.get(threadKey) ?? null;
       if (!thread) return;
-      const threadProject = memberProjectByScopedKey.get(
-        scopedProjectKey(scopeProjectRef(thread.environmentId, thread.projectId)),
+      const threadProject = selectProjectByRef(
+        useStore.getState(),
+        scopeProjectRef(thread.environmentId, thread.projectId),
       );
-      const threadWorkspacePath = thread.worktreePath ?? threadProject?.cwd ?? project.cwd ?? null;
+      const threadWorkspacePath = thread.worktreePath ?? threadProject?.cwd ?? null;
       const clicked = await api.contextMenu.show(
         [
           { id: "rename", label: "Rename thread" },
@@ -2199,1015 +978,136 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
       copyThreadIdToClipboard,
       deleteThread,
       markThreadUnread,
-      memberProjectByScopedKey,
-      project.cwd,
     ],
   );
 
-  return (
-    <>
-      {/* Sticky: stays pinned to the sidebar viewport top while this
-          project's threads scroll, so context and the collapse toggle are
-          always in reach. The next project header pushes it off naturally. */}
-      <ProjectHoverCard project={hoverSummary} side="right">
-        <div className="group/project-header sticky top-0 z-10 bg-sidebar">
-          <SidebarMenuButton
-            ref={isManualProjectSorting ? dragHandleProps?.setActivatorNodeRef : undefined}
-            size="sm"
-            className={`gap-2 px-2 py-1.5 pr-8 text-left hover:bg-accent group-hover/project-header:bg-accent group-hover/project-header:text-sidebar-accent-foreground max-sm:pr-14 ${
-              isManualProjectSorting ? "cursor-grab active:cursor-grabbing" : "cursor-pointer"
-            }`}
-            {...(isManualProjectSorting && dragHandleProps ? dragHandleProps.attributes : {})}
-            {...(isManualProjectSorting && dragHandleProps ? dragHandleProps.listeners : {})}
-            aria-expanded={projectExpanded}
-            onPointerDownCapture={handleProjectButtonPointerDownCapture}
-            onClick={handleProjectButtonClick}
-            onKeyDown={handleProjectButtonKeyDown}
-            onContextMenu={handleProjectButtonContextMenu}
-          >
-            {!projectExpanded && projectStatus ? (
-              <span
-                aria-hidden="true"
-                title={projectStatus.label}
-                className={`-ml-0.5 relative inline-flex size-3.5 shrink-0 items-center justify-center ${projectStatus.colorClass}`}
-              >
-                <span className="absolute inset-0 flex items-center justify-center transition-opacity duration-150 group-hover/project-header:opacity-0">
-                  {projectStatus.pulse ? (
-                    <LiveNode
-                      className="size-[9px]"
-                      dotClassName={projectStatus.dotClass}
-                      haloClassName={projectStatus.dotClass}
-                    />
-                  ) : (
-                    <span className={`size-[9px] rounded-full ${projectStatus.dotClass}`} />
-                  )}
-                </span>
-                <ChevronRightIcon className="absolute inset-0 m-auto size-3.5 text-muted-foreground/70 opacity-0 transition-opacity duration-150 group-hover/project-header:opacity-100" />
-              </span>
-            ) : (
-              <ChevronRightIcon
-                className={`-ml-0.5 size-3.5 shrink-0 text-muted-foreground/70 transition-transform duration-150 ${
-                  projectExpanded ? "rotate-90" : ""
-                }`}
-              />
-            )}
-            {project.kind === "general-chat" ? (
-              <MessagesSquareIcon className="size-3.5 shrink-0 text-muted-foreground/70" />
-            ) : (
-              <ProjectFavicon environmentId={project.environmentId} cwd={project.cwd} />
-            )}
-            <span className="flex min-w-0 flex-1 items-center gap-2">
-              <span className="truncate text-xs font-medium text-foreground/90">
-                {project.displayName}
-              </span>
-              {project.groupedProjectCount > 1 ? (
-                <span className="shrink-0 text-[10px] text-muted-foreground/60">
-                  {project.groupedProjectCount} projects
-                </span>
-              ) : null}
-              {!projectExpanded && visibleProjectThreads.length > 0 ? (
-                <span className="ml-auto shrink-0 text-[10px] tabular-nums text-muted-foreground/50">
-                  {visibleProjectThreads.length}
-                </span>
-              ) : null}
-            </span>
-          </SidebarMenuButton>
-          {/* Environment badge – visible by default, crossfades with the
-            "new thread" button on hover using the same pointer-events +
-            opacity pattern as the thread row archive/timestamp swap. */}
-          {project.environmentPresence === "remote-only" && (
-            <Tooltip>
-              <TooltipTrigger
-                render={
-                  <span
-                    aria-label={
-                      project.environmentPresence === "remote-only"
-                        ? "Remote project"
-                        : "Available in multiple environments"
-                    }
-                    className="pointer-events-none absolute top-1 right-1.5 inline-flex size-5 items-center justify-center rounded-md text-muted-foreground/60 transition-opacity duration-150 max-sm:right-7 group-hover/project-header:opacity-0 group-focus-within/project-header:opacity-0 max-sm:group-hover/project-header:opacity-100 max-sm:group-focus-within/project-header:opacity-100"
-                  />
-                }
-              >
-                <CloudIcon className="size-3" />
-              </TooltipTrigger>
-              <TooltipPopup side="top">
-                Remote environment: {project.remoteEnvironmentLabels.join(", ")}
-              </TooltipPopup>
-            </Tooltip>
-          )}
-          <Tooltip>
-            <TooltipTrigger
-              render={
-                <div className="pointer-events-none absolute top-1 right-1.5 opacity-0 transition-opacity duration-150 max-sm:pointer-events-auto max-sm:opacity-100 group-hover/project-header:pointer-events-auto group-hover/project-header:opacity-100 group-focus-within/project-header:pointer-events-auto group-focus-within/project-header:opacity-100">
-                  <button
-                    type="button"
-                    aria-label={
-                      project.kind === "general-chat"
-                        ? "Start a new general chat"
-                        : `Create new thread in ${project.displayName}`
-                    }
-                    data-testid="new-thread-button"
-                    className="inline-flex size-5 pointer-coarse:size-7 cursor-pointer items-center justify-center rounded-md text-muted-foreground/60 hover:bg-secondary hover:text-foreground focus-ring"
-                    onClick={handleCreateThreadClick}
-                  >
-                    <SquarePenIcon className="size-3.5" />
-                  </button>
-                </div>
-              }
-            />
-            <TooltipPopup side="top">
-              {project.kind === "general-chat"
-                ? "New general chat"
-                : newThreadShortcutLabel
-                  ? `New thread (${newThreadShortcutLabel})`
-                  : "New thread"}
-            </TooltipPopup>
-          </Tooltip>
-        </div>
-      </ProjectHoverCard>
-
-      <SidebarProjectThreadList
-        projectKey={project.projectKey}
-        hiddenThreadStatus={hiddenThreadStatus}
-        orderedProjectThreadKeys={orderedProjectThreadKeys}
-        renderedThreads={renderedThreads}
-        showEmptyThreadState={showEmptyThreadState}
-        shouldShowThreadPanel={shouldShowThreadPanel}
-        nextRevealCount={nextRevealCount}
-        searchHandoffThreadCount={searchHandoffThreadCount}
-        isThreadListRevealed={isThreadListRevealed}
-        onSearchAllThreads={handleSearchAllThreads}
-        projectCwd={project.cwd}
-        activeRouteThreadKey={activeRouteThreadKey}
-        threadJumpLabelByKey={threadJumpLabelByKey}
-        appSettingsConfirmThreadArchive={appSettingsConfirmThreadArchive}
-        renamingThreadKey={renamingThreadKey}
-        renamingTitle={renamingTitle}
-        setRenamingTitle={setRenamingTitle}
-        renamingInputRef={renamingInputRef}
-        renamingCommittedRef={renamingCommittedRef}
-        confirmingArchiveThreadKey={confirmingArchiveThreadKey}
-        setConfirmingArchiveThreadKey={setConfirmingArchiveThreadKey}
-        confirmArchiveButtonRefs={confirmArchiveButtonRefs}
-        attachThreadListAutoAnimateRef={attachThreadListAutoAnimateRef}
-        handleThreadClick={handleThreadClick}
-        navigateToThread={navigateToThread}
-        handleMultiSelectContextMenu={handleMultiSelectContextMenu}
-        handleThreadContextMenu={handleThreadContextMenu}
-        clearSelection={clearSelection}
-        commitRename={commitRename}
-        cancelRename={cancelRename}
-        attemptTogglePinThread={attemptTogglePinThread}
-        attemptArchiveThread={attemptArchiveThread}
-        openPrLink={openPrLink}
-        expandThreadListForProject={expandThreadListForProject}
-        collapseThreadListForProject={collapseThreadListForProject}
-      />
-
-      <Dialog
-        open={projectRenameTarget !== null}
-        onOpenChange={(open) => {
-          if (!open) {
-            closeProjectRenameDialog();
-          }
-        }}
-      >
-        <DialogPopup className="max-w-lg">
-          <DialogHeader>
-            <DialogTitle>Rename project</DialogTitle>
-            <DialogDescription>
-              {projectRenameTarget
-                ? `Update the title for ${projectRenameTarget.cwd}.`
-                : "Update the project title."}
-            </DialogDescription>
-          </DialogHeader>
-          <DialogPanel className="space-y-4">
-            <div className="grid gap-1.5">
-              <span className="text-xs font-medium text-foreground">Project title</span>
-              <Input
-                aria-label="Project title"
-                value={projectRenameTitle}
-                onChange={(event) => setProjectRenameTitle(event.target.value)}
-                onKeyDown={(event) => {
-                  if (event.key === "Enter") {
-                    event.preventDefault();
-                    void submitProjectRename();
-                  }
-                }}
-              />
-            </div>
-            {projectRenameTarget?.environmentLabel ? (
-              <p className="text-xs text-muted-foreground">
-                Environment: {projectRenameTarget.environmentLabel}
-              </p>
-            ) : null}
-          </DialogPanel>
-          <DialogFooter>
-            <Button variant="outline" onClick={closeProjectRenameDialog}>
-              Cancel
-            </Button>
-            <Button onClick={() => void submitProjectRename()}>Save</Button>
-          </DialogFooter>
-        </DialogPopup>
-      </Dialog>
-
-      <Dialog
-        open={projectGroupingTarget !== null}
-        onOpenChange={(open) => {
-          if (!open) {
-            closeProjectGroupingDialog();
-          }
-        }}
-      >
-        <DialogPopup className="max-w-lg">
-          <DialogHeader>
-            <DialogTitle>Project grouping</DialogTitle>
-            <DialogDescription>
-              {projectGroupingTarget
-                ? `Choose how ${projectGroupingTarget.cwd} should be grouped in the sidebar.`
-                : "Choose how this project should be grouped in the sidebar."}
-            </DialogDescription>
-          </DialogHeader>
-          <DialogPanel className="space-y-4">
-            <div className="grid gap-1.5">
-              <span className="text-xs font-medium text-foreground">Grouping rule</span>
-              <Select
-                value={projectGroupingSelection}
-                onValueChange={(value) => {
-                  if (
-                    value === "inherit" ||
-                    value === "repository" ||
-                    value === "repository_path" ||
-                    value === "separate"
-                  ) {
-                    setProjectGroupingSelection(value);
-                  }
-                }}
-              >
-                <SelectTrigger className="w-full" aria-label="Project grouping rule">
-                  <SelectValue>
-                    {projectGroupingSelection === "inherit"
-                      ? `Use global default (${PROJECT_GROUPING_MODE_LABELS[projectGroupingSettings.sidebarProjectGroupingMode]})`
-                      : PROJECT_GROUPING_MODE_LABELS[projectGroupingSelection]}
-                  </SelectValue>
-                </SelectTrigger>
-                <SelectPopup align="end" alignItemWithTrigger={false}>
-                  <SelectItem hideIndicator value="inherit">
-                    Use global default
-                  </SelectItem>
-                  <SelectItem hideIndicator value="repository">
-                    {PROJECT_GROUPING_MODE_LABELS.repository}
-                  </SelectItem>
-                  <SelectItem hideIndicator value="repository_path">
-                    {PROJECT_GROUPING_MODE_LABELS.repository_path}
-                  </SelectItem>
-                  <SelectItem hideIndicator value="separate">
-                    {PROJECT_GROUPING_MODE_LABELS.separate}
-                  </SelectItem>
-                </SelectPopup>
-              </Select>
-            </div>
-            <p className="text-xs text-muted-foreground">
-              {projectGroupingSelection === "inherit"
-                ? projectGroupingModeDescription(projectGroupingSettings.sidebarProjectGroupingMode)
-                : projectGroupingModeDescription(projectGroupingSelection)}
-            </p>
-          </DialogPanel>
-          <DialogFooter>
-            <Button variant="outline" onClick={closeProjectGroupingDialog}>
-              Cancel
-            </Button>
-            <Button onClick={saveProjectGroupingPreference}>Save</Button>
-          </DialogFooter>
-        </DialogPopup>
-      </Dialog>
-    </>
-  );
-});
-
-const SidebarProjectListRow = memo(function SidebarProjectListRow(props: SidebarProjectItemProps) {
-  return (
-    <SidebarMenuItem className="rounded-md">
-      <SidebarProjectItem {...props} />
-    </SidebarMenuItem>
-  );
-});
-
-type SortableProjectHandleProps = Pick<
-  ReturnType<typeof useSortable>,
-  "attributes" | "listeners" | "setActivatorNodeRef"
->;
-
-function ProjectSortMenu({
-  projectSortOrder,
-  threadSortOrder,
-  projectGroupingMode,
-  threadPreviewCount,
-  onProjectSortOrderChange,
-  onThreadSortOrderChange,
-  onProjectGroupingModeChange,
-  onThreadPreviewCountChange,
-}: {
-  projectSortOrder: SidebarProjectSortOrder;
-  threadSortOrder: SidebarThreadSortOrder;
-  projectGroupingMode: SidebarProjectGroupingMode;
-  threadPreviewCount: SidebarThreadPreviewCount;
-  onProjectSortOrderChange: (sortOrder: SidebarProjectSortOrder) => void;
-  onThreadSortOrderChange: (sortOrder: SidebarThreadSortOrder) => void;
-  onProjectGroupingModeChange: (mode: SidebarProjectGroupingMode) => void;
-  onThreadPreviewCountChange: (count: SidebarThreadPreviewCount) => void;
-}) {
-  const handleThreadPreviewCountChange = useCallback(
-    (nextValue: number | null) => {
-      if (nextValue === null) {
-        return;
-      }
-
-      const clampedValue = clampSidebarThreadPreviewCount(nextValue);
-      if (clampedValue !== threadPreviewCount) {
-        onThreadPreviewCountChange(clampedValue);
-      }
-    },
-    [onThreadPreviewCountChange, threadPreviewCount],
-  );
-
-  return (
-    <Menu>
-      <Tooltip>
-        <TooltipTrigger
-          render={
-            <MenuTrigger className="inline-flex size-5 pointer-coarse:size-7 cursor-pointer items-center justify-center rounded-md text-muted-foreground/60 transition-colors hover:bg-accent hover:text-foreground" />
-          }
-        >
-          <ArrowUpDownIcon className="size-3.5" />
-        </TooltipTrigger>
-        <TooltipPopup side="right">Sidebar options</TooltipPopup>
-      </Tooltip>
-      <MenuPopup align="end" side="bottom" className="min-w-52">
-        <MenuGroup>
-          <div className="px-2 py-1 sm:text-xs font-medium text-muted-foreground">
-            Sort projects
-          </div>
-          <MenuRadioGroup
-            value={projectSortOrder}
-            onValueChange={(value) => {
-              onProjectSortOrderChange(value as SidebarProjectSortOrder);
-            }}
-          >
-            {(Object.entries(SIDEBAR_SORT_LABELS) as Array<[SidebarProjectSortOrder, string]>).map(
-              ([value, label]) => (
-                <MenuRadioItem key={value} value={value} className="min-h-7 py-1 sm:text-xs">
-                  {label}
-                </MenuRadioItem>
-              ),
-            )}
-          </MenuRadioGroup>
-        </MenuGroup>
-        <MenuGroup>
-          <div className="px-2 pt-2 pb-1 sm:text-xs font-medium text-muted-foreground">
-            Sort threads
-          </div>
-          <MenuRadioGroup
-            value={threadSortOrder}
-            onValueChange={(value) => {
-              onThreadSortOrderChange(value as SidebarThreadSortOrder);
-            }}
-          >
-            {(
-              Object.entries(SIDEBAR_THREAD_SORT_LABELS) as Array<[SidebarThreadSortOrder, string]>
-            ).map(([value, label]) => (
-              <MenuRadioItem key={value} value={value} className="min-h-7 py-1 sm:text-xs">
-                {label}
-              </MenuRadioItem>
-            ))}
-          </MenuRadioGroup>
-        </MenuGroup>
-        <MenuGroup>
-          <div className="px-2 pt-2 pb-1 text-muted-foreground sm:text-xs font-medium">
-            Visible threads
-          </div>
-          <div className="px-2 py-1">
-            <NumberField
-              aria-label="Visible thread count"
-              className="w-28 gap-0"
-              max={MAX_SIDEBAR_THREAD_PREVIEW_COUNT}
-              min={MIN_SIDEBAR_THREAD_PREVIEW_COUNT}
-              onValueChange={handleThreadPreviewCountChange}
-              size="sm"
-              step={1}
-              value={threadPreviewCount}
-            >
-              <NumberFieldGroup className="h-7 rounded-md sm:h-6.5">
-                <NumberFieldDecrement
-                  aria-label="Decrease visible thread count"
-                  className="px-2 sm:px-2 [&_svg]:size-3.5"
-                />
-                <NumberFieldInput
-                  aria-label="Visible thread count"
-                  className="h-7 w-9 grow-0 px-0 text-xs leading-7 sm:h-6.5 sm:leading-6.5"
-                  inputMode="numeric"
-                  onKeyDownCapture={(event) => {
-                    event.stopPropagation();
-                  }}
-                />
-                <NumberFieldIncrement
-                  aria-label="Increase visible thread count"
-                  className="px-2 sm:px-2 [&_svg]:size-3.5"
-                />
-              </NumberFieldGroup>
-            </NumberField>
-          </div>
-        </MenuGroup>
-        <MenuSeparator />
-        <MenuGroup>
-          <div className="px-2 pt-2 pb-1 font-medium text-muted-foreground sm:text-xs">
-            Group projects
-          </div>
-          <MenuRadioGroup
-            value={projectGroupingMode}
-            onValueChange={(value) => {
-              if (value === "repository" || value === "repository_path" || value === "separate") {
-                onProjectGroupingModeChange(value);
+  const createThreadForProjectRef = useCallback(
+    (projectRef: ScopedProjectRef) => {
+      const currentRouteParams =
+        router.state.matches[router.state.matches.length - 1]?.params ?? {};
+      const currentRouteTarget = resolveThreadRouteTarget(currentRouteParams);
+      const currentActiveThread =
+        currentRouteTarget?.kind === "server"
+          ? (selectThreadByRef(useStore.getState(), currentRouteTarget.threadRef) ?? null)
+          : null;
+      const draftStore = useComposerDraftStore.getState();
+      const currentActiveDraftThread =
+        currentRouteTarget?.kind === "server"
+          ? (draftStore.getDraftThread(currentRouteTarget.threadRef) ?? null)
+          : currentRouteTarget?.kind === "draft"
+            ? (draftStore.getDraftSession(currentRouteTarget.draftId) ?? null)
+            : null;
+      const seedContext = resolveSidebarNewThreadSeedContext({
+        projectId: projectRef.projectId,
+        defaultEnvMode: resolveSidebarNewThreadEnvMode({ defaultEnvMode: defaultThreadEnvMode }),
+        activeThread:
+          currentActiveThread && currentActiveThread.projectId === projectRef.projectId
+            ? {
+                projectId: currentActiveThread.projectId,
+                branch: currentActiveThread.branch,
+                worktreePath: currentActiveThread.worktreePath,
               }
-            }}
-          >
-            {(
-              Object.entries(PROJECT_GROUPING_MODE_LABELS) as Array<
-                [SidebarProjectGroupingMode, string]
-              >
-            ).map(([value, label]) => (
-              <MenuRadioItem key={value} value={value} className="min-h-7 py-1 sm:text-xs">
-                {label}
-              </MenuRadioItem>
-            ))}
-          </MenuRadioGroup>
-        </MenuGroup>
-      </MenuPopup>
-    </Menu>
-  );
-}
-
-function SortableProjectItem({
-  projectId,
-  disabled = false,
-  children,
-}: {
-  projectId: string;
-  disabled?: boolean;
-  children: (handleProps: SortableProjectHandleProps) => React.ReactNode;
-}) {
-  const {
-    attributes,
-    listeners,
-    setActivatorNodeRef,
-    setNodeRef,
-    transform,
-    transition,
-    isDragging,
-    isOver,
-  } = useSortable({ id: projectId, disabled });
-  return (
-    <li
-      ref={setNodeRef}
-      style={{
-        transform: CSS.Translate.toString(transform),
-        transition,
-      }}
-      className={`group/menu-item relative rounded-md ${
-        isDragging ? "z-20 opacity-80" : ""
-      } ${isOver && !isDragging ? "ring-1 ring-primary/40" : ""}`}
-      data-sidebar="menu-item"
-      data-slot="sidebar-menu-item"
-    >
-      {children({ attributes, listeners, setActivatorNodeRef })}
-    </li>
-  );
-}
-
-const SidebarChromeHeader = memo(function SidebarChromeHeader({
-  isElectron,
-  collapsed = false,
-}: {
-  isElectron: boolean;
-  collapsed?: boolean;
-}) {
-  const electronWordmarkLayout = resolveElectronSidebarWordmarkLayout(
-    typeof navigator === "undefined" ? "" : navigator.platform,
-  );
-  const wordmark = (
-    <div className="flex min-w-0 items-center gap-2">
-      <SidebarTrigger
-        className="size-7 shrink-0 text-muted-foreground/60 hover:text-foreground md:hidden"
-        tooltip="Collapse sidebar"
-      />
-      <Tooltip>
-        <TooltipTrigger
-          render={
-            <Link
-              aria-label={`Go to ${APP_BASE_NAME} home`}
-              className="flex min-w-0 cursor-pointer items-center gap-1.5 rounded-md text-foreground outline-hidden transition-opacity hover:opacity-85 focus-ring"
-              to="/"
-            >
-              <ThreadlinesGlyph aria-hidden="true" className="h-3 w-auto shrink-0" />
-              <span className="truncate text-sm font-semibold tracking-tight">{APP_BASE_NAME}</span>
-            </Link>
-          }
-        />
-        <TooltipPopup side="bottom" sideOffset={2}>
-          <div className="flex flex-col gap-0.5">
-            <span>Home</span>
-            <span className="text-[10px] text-muted-foreground">
-              {APP_STAGE_LABEL} · Version {APP_VERSION}
-            </span>
-          </div>
-        </TooltipPopup>
-      </Tooltip>
-    </div>
-  );
-
-  // The rail is too narrow for the wordmark, and its top-left is already the
-  // collapse trigger's fixed home — so the collapsed header is a bare spacer
-  // that keeps the titlebar height (and, on Electron, the drag region).
-  if (collapsed) {
-    return (
-      <SidebarHeader
-        className={cn(
-          "h-[var(--workspace-topbar-height)] min-h-[var(--workspace-topbar-height)] shrink-0 gap-0 px-0 py-0",
-          isElectron && "drag-region",
-        )}
-      />
-    );
-  }
-
-  return isElectron ? (
-    <SidebarHeader className="drag-region shrink-0 gap-0 px-0 py-0">
-      {electronWordmarkLayout.spacerClassName ? (
-        <div aria-hidden="true" className={electronWordmarkLayout.spacerClassName} />
-      ) : null}
-      <div className={electronWordmarkLayout.wordmarkRowClassName}>{wordmark}</div>
-    </SidebarHeader>
-  ) : (
-    <SidebarHeader className="gap-3 px-3 py-2 sm:gap-2.5 sm:px-5 sm:py-3 md:shrink-0 md:gap-0 md:px-0 md:py-0">
-      <div className="min-w-0 md:flex md:h-[var(--workspace-topbar-height)] md:min-h-[var(--workspace-topbar-height)] md:items-center md:pr-3 md:pl-[var(--workspace-titlebar-content-left)]">
-        {wordmark}
-      </div>
-    </SidebarHeader>
-  );
-});
-
-const SidebarChromeFooter = memo(function SidebarChromeFooter() {
-  const navigate = useNavigate();
-  const { isMobile, setOpenMobile } = useSidebar();
-  // On mobile, /settings renders a full-page section index, so the sheet
-  // closes to reveal it; the sheet itself never hosts settings navigation.
-  const handleSettingsClick = useCallback(() => {
-    if (isMobile) {
-      setOpenMobile(false);
-    }
-    void navigate({ to: "/settings" });
-  }, [isMobile, navigate, setOpenMobile]);
-
-  return (
-    <SidebarFooter className="p-2">
-      <SidebarProviderUpdatePill />
-      <SidebarUpdatePill />
-      <SidebarMenu>
-        <SidebarMenuItem className="flex items-center gap-1.5">
-          <SidebarMenuButton
-            size="sm"
-            className="flex-1 gap-2 px-2 py-1.5 text-muted-foreground/70 hover:bg-accent hover:text-foreground"
-            onClick={handleSettingsClick}
-          >
-            <SettingsIcon className="size-3.5" />
-            <span className="text-xs">Settings</span>
-          </SidebarMenuButton>
-          <SidebarVersionTag />
-        </SidebarMenuItem>
-      </SidebarMenu>
-    </SidebarFooter>
-  );
-});
-
-interface SidebarProjectsContentProps {
-  projectSortOrder: SidebarProjectSortOrder;
-  threadSortOrder: SidebarThreadSortOrder;
-  projectGroupingMode: SidebarProjectGroupingMode;
-  threadPreviewCount: SidebarThreadPreviewCount;
-  updateSettings: ReturnType<typeof useUpdateSettings>["updateSettings"];
-  openAddProject: () => void;
-  /** The On Deck working-set group, rendered between search and the tree. */
-  onDeckSection: React.ReactNode;
-  destinationBand: React.ReactNode;
-  /** Pinned above the Projects section; null while there are no general chats. */
-  isManualProjectSorting: boolean;
-  projectDnDSensors: ReturnType<typeof useSensors>;
-  projectCollisionDetection: CollisionDetection;
-  handleProjectDragStart: (event: DragStartEvent) => void;
-  handleProjectDragEnd: (event: DragEndEvent) => void;
-  handleProjectDragCancel: (event: DragCancelEvent) => void;
-  handleNewThread: ReturnType<typeof useNewThreadHandler>["handleNewThread"];
-  archiveThread: ReturnType<typeof useThreadActions>["archiveThread"];
-  pinThread: ReturnType<typeof useThreadActions>["pinThread"];
-  unpinThread: ReturnType<typeof useThreadActions>["unpinThread"];
-  deleteThread: ReturnType<typeof useThreadActions>["deleteThread"];
-  sortedProjects: readonly SidebarProjectSnapshot[];
-  revealedThreadCountsByProject: ReadonlyMap<string, number>;
-  activeRouteProjectKey: string | null;
-  routeThreadKey: string | null;
-  newThreadShortcutLabel: string | null;
-  commandPaletteShortcutLabel: string | null;
-  threadJumpLabelByKey: ReadonlyMap<string, string>;
-  attachThreadListAutoAnimateRef: (node: HTMLElement | null) => void;
-  expandThreadListForProject: (projectKey: string, additionalCount: number) => void;
-  collapseThreadListForProject: (projectKey: string) => void;
-  dragInProgressRef: React.RefObject<boolean>;
-  suppressProjectClickAfterDragRef: React.RefObject<boolean>;
-  suppressProjectClickForContextMenuRef: React.RefObject<boolean>;
-  attachProjectListAutoAnimateRef: (node: HTMLElement | null) => void;
-  projectsLength: number;
-}
-
-const SidebarProjectsContent = memo(function SidebarProjectsContent(
-  props: SidebarProjectsContentProps,
-) {
-  const {
-    projectSortOrder,
-    threadSortOrder,
-    projectGroupingMode,
-    threadPreviewCount,
-    updateSettings,
-    openAddProject,
-    onDeckSection,
-    destinationBand,
-    isManualProjectSorting,
-    projectDnDSensors,
-    projectCollisionDetection,
-    handleProjectDragStart,
-    handleProjectDragEnd,
-    handleProjectDragCancel,
-    handleNewThread,
-    archiveThread,
-    pinThread,
-    unpinThread,
-    deleteThread,
-    sortedProjects,
-    revealedThreadCountsByProject,
-    activeRouteProjectKey,
-    routeThreadKey,
-    newThreadShortcutLabel,
-    commandPaletteShortcutLabel,
-    threadJumpLabelByKey,
-    attachThreadListAutoAnimateRef,
-    expandThreadListForProject,
-    collapseThreadListForProject,
-    dragInProgressRef,
-    suppressProjectClickAfterDragRef,
-    suppressProjectClickForContextMenuRef,
-    attachProjectListAutoAnimateRef,
-    projectsLength,
-  } = props;
-
-  const handleProjectSortOrderChange = useCallback(
-    (sortOrder: SidebarProjectSortOrder) => {
-      updateSettings({ sidebarProjectSortOrder: sortOrder });
-    },
-    [updateSettings],
-  );
-  const handleThreadSortOrderChange = useCallback(
-    (sortOrder: SidebarThreadSortOrder) => {
-      updateSettings({ sidebarThreadSortOrder: sortOrder });
-    },
-    [updateSettings],
-  );
-  const handleProjectGroupingModeChange = useCallback(
-    (groupingMode: SidebarProjectGroupingMode) => {
-      updateSettings({ sidebarProjectGroupingMode: groupingMode });
-    },
-    [updateSettings],
-  );
-  const handleThreadPreviewCountChange = useCallback(
-    (count: SidebarThreadPreviewCount) => {
-      updateSettings({ sidebarThreadPreviewCount: count });
-    },
-    [updateSettings],
-  );
-
-  return (
-    <SidebarContent className="gap-0">
-      <SidebarGroup className="px-2 pt-2 pb-1">
-        <SidebarMenu>
-          <SidebarMenuItem>
-            <CommandDialogTrigger
-              render={
-                <SidebarMenuButton
-                  size="sm"
-                  className="gap-2 rounded-md border border-border/60 bg-muted/30 px-2 py-1.5 text-muted-foreground/70 transition-colors hover:border-border hover:bg-muted/50 hover:text-foreground"
-                  data-testid="command-palette-trigger"
-                />
+            : null,
+        activeDraftThread:
+          currentActiveDraftThread && currentActiveDraftThread.projectId === projectRef.projectId
+            ? {
+                projectId: currentActiveDraftThread.projectId,
+                branch: currentActiveDraftThread.branch,
+                worktreePath: currentActiveDraftThread.worktreePath,
+                envMode: currentActiveDraftThread.envMode,
               }
-            >
-              <SearchIcon className="size-3.5" />
-              <span className="flex-1 truncate text-left text-xs">Search</span>
-              {commandPaletteShortcutLabel ? (
-                // Keyboard chrome means nothing to a touch pointer.
-                <Kbd className="h-4 min-w-0 rounded-sm px-1.5 text-[10px] pointer-coarse:hidden">
-                  {commandPaletteShortcutLabel}
-                </Kbd>
-              ) : null}
-            </CommandDialogTrigger>
-          </SidebarMenuItem>
-        </SidebarMenu>
-      </SidebarGroup>
-      {destinationBand}
-      <SidebarSeparator className="mx-2 my-1 w-auto" />
-      {onDeckSection}
-      <SidebarGroup className="px-2 py-2">
-        <div className="mb-1 flex items-center justify-between pl-2 pr-1.5">
-          <SectionLabel>Projects</SectionLabel>
-          <div className="flex items-center gap-1">
-            <ProjectSortMenu
-              projectSortOrder={projectSortOrder}
-              threadSortOrder={threadSortOrder}
-              projectGroupingMode={projectGroupingMode}
-              threadPreviewCount={threadPreviewCount}
-              onProjectSortOrderChange={handleProjectSortOrderChange}
-              onThreadSortOrderChange={handleThreadSortOrderChange}
-              onProjectGroupingModeChange={handleProjectGroupingModeChange}
-              onThreadPreviewCountChange={handleThreadPreviewCountChange}
-            />
-            <Tooltip>
-              <TooltipTrigger
-                render={
-                  <button
-                    type="button"
-                    aria-label="Add project"
-                    data-testid="sidebar-add-project-trigger"
-                    className="inline-flex size-5 pointer-coarse:size-7 cursor-pointer items-center justify-center rounded-md text-muted-foreground/60 transition-colors hover:bg-accent hover:text-foreground"
-                    onClick={openAddProject}
-                  />
-                }
-              >
-                <FolderPlusIcon className="size-3.5" />
-              </TooltipTrigger>
-              <TooltipPopup side="right">Add project</TooltipPopup>
-            </Tooltip>
-          </div>
-        </div>
-
-        {isManualProjectSorting ? (
-          <DndContext
-            sensors={projectDnDSensors}
-            collisionDetection={projectCollisionDetection}
-            modifiers={[restrictToVerticalAxis, restrictToFirstScrollableAncestor]}
-            onDragStart={handleProjectDragStart}
-            onDragEnd={handleProjectDragEnd}
-            onDragCancel={handleProjectDragCancel}
-          >
-            <SidebarMenu>
-              <SortableContext
-                items={sortedProjects.map((project) => project.projectKey)}
-                strategy={verticalListSortingStrategy}
-              >
-                {sortedProjects.map((project) => (
-                  <SortableProjectItem key={project.projectKey} projectId={project.projectKey}>
-                    {(dragHandleProps) => (
-                      <SidebarProjectItem
-                        project={project}
-                        revealedThreadCount={
-                          revealedThreadCountsByProject.get(project.projectKey) ?? 0
-                        }
-                        activeRouteThreadKey={
-                          activeRouteProjectKey === project.projectKey ? routeThreadKey : null
-                        }
-                        newThreadShortcutLabel={newThreadShortcutLabel}
-                        handleNewThread={handleNewThread}
-                        archiveThread={archiveThread}
-                        pinThread={pinThread}
-                        unpinThread={unpinThread}
-                        deleteThread={deleteThread}
-                        threadJumpLabelByKey={threadJumpLabelByKey}
-                        attachThreadListAutoAnimateRef={attachThreadListAutoAnimateRef}
-                        expandThreadListForProject={expandThreadListForProject}
-                        collapseThreadListForProject={collapseThreadListForProject}
-                        dragInProgressRef={dragInProgressRef}
-                        suppressProjectClickAfterDragRef={suppressProjectClickAfterDragRef}
-                        suppressProjectClickForContextMenuRef={
-                          suppressProjectClickForContextMenuRef
-                        }
-                        isManualProjectSorting={isManualProjectSorting}
-                        dragHandleProps={dragHandleProps}
-                      />
-                    )}
-                  </SortableProjectItem>
-                ))}
-              </SortableContext>
-            </SidebarMenu>
-          </DndContext>
-        ) : (
-          <SidebarMenu ref={attachProjectListAutoAnimateRef}>
-            {sortedProjects.map((project) => (
-              <SidebarProjectListRow
-                key={project.projectKey}
-                project={project}
-                revealedThreadCount={revealedThreadCountsByProject.get(project.projectKey) ?? 0}
-                activeRouteThreadKey={
-                  activeRouteProjectKey === project.projectKey ? routeThreadKey : null
-                }
-                newThreadShortcutLabel={newThreadShortcutLabel}
-                handleNewThread={handleNewThread}
-                archiveThread={archiveThread}
-                pinThread={pinThread}
-                unpinThread={unpinThread}
-                deleteThread={deleteThread}
-                threadJumpLabelByKey={threadJumpLabelByKey}
-                attachThreadListAutoAnimateRef={attachThreadListAutoAnimateRef}
-                expandThreadListForProject={expandThreadListForProject}
-                collapseThreadListForProject={collapseThreadListForProject}
-                dragInProgressRef={dragInProgressRef}
-                suppressProjectClickAfterDragRef={suppressProjectClickAfterDragRef}
-                suppressProjectClickForContextMenuRef={suppressProjectClickForContextMenuRef}
-                isManualProjectSorting={isManualProjectSorting}
-                dragHandleProps={null}
-              />
-            ))}
-          </SidebarMenu>
-        )}
-
-        {projectsLength === 0 && (
-          <div className="px-2 pt-4 text-center text-xs text-muted-foreground/60">
-            No projects yet
-          </div>
-        )}
-      </SidebarGroup>
-    </SidebarContent>
-  );
-});
-
-export default function Sidebar() {
-  const projects = useStore(useShallow(selectProjectsAcrossEnvironments));
-  const primaryEnvironmentId = usePrimaryEnvironmentId();
-  const generalChatsProject = useStore(selectGeneralChatsProjectAcrossEnvironments);
-  const activeEnvironmentId = useStore((state) => state.activeEnvironmentId);
-  // Needed for the destination row's new-chat action: the helper falls back to
-  // the active environment when no general-chat project exists yet.
-  const generalChatsProjectRef = useMemo(
-    () =>
-      resolveGeneralChatsProjectRef({
-        generalChatsProject,
-        activeEnvironmentId,
-        primaryEnvironmentId,
-      }),
-    [activeEnvironmentId, generalChatsProject, primaryEnvironmentId],
-  );
-  const workspaceProjectsLength = projects.filter(
-    (project) => project.kind !== "general-chat",
-  ).length;
-  const sidebarThreads = useStore(useShallow(selectSidebarThreadsAcrossEnvironments));
-  const projectExpandedById = useUiStateStore((store) => store.projectExpandedById);
-  const projectOrder = useUiStateStore((store) => store.projectOrder);
-  const reorderProjects = useUiStateStore((store) => store.reorderProjects);
-  const threadLastVisitedAtById = useUiStateStore((store) => store.threadLastVisitedAtById);
-  const onDeckThreadKeys = useUiStateStore((store) => store.onDeckThreadKeys);
-  const syncOnDeck = useUiStateStore((store) => store.syncOnDeck);
-  const dismissFromOnDeck = useUiStateStore((store) => store.dismissFromOnDeck);
-  const navigate = useNavigate();
-  const pathname = useLocation({ select: (loc) => loc.pathname });
-  const isOnSettings = pathname.startsWith("/settings");
-  const sidebarThreadSortOrder = useSettings((s) => s.sidebarThreadSortOrder);
-  const sidebarProjectSortOrder = useSettings((s) => s.sidebarProjectSortOrder);
-  const sidebarProjectGroupingMode = useSettings((s) => s.sidebarProjectGroupingMode);
-  const projectGroupingSettings = useSettings(selectProjectGroupingSettings);
-  const sidebarThreadPreviewCount = useSettings((s) => s.sidebarThreadPreviewCount);
-  const { updateSettings } = useUpdateSettings();
-  // The full hook (rather than `useNewThreadHandler`) because the deck rail's
-  // new-thread button has to resolve the same default project and draft context
-  // the app menu's "New thread" action uses.
-  const { activeDraftThread, activeThread, defaultProjectRef, handleNewThread } =
-    useHandleNewThread();
-  const defaultThreadEnvMode = useSettings<ThreadEnvMode>(
-    (settings) => settings.defaultThreadEnvMode,
-  );
-  const { archiveThread, deleteThread, pinThread, unpinThread } = useThreadActions();
-  const { isMobile, setOpen, setOpenMobile, state: sidebarState } = useSidebar();
-  const routeThreadRef = useParams({
-    strict: false,
-    select: (params) => resolveThreadRouteRef(params),
-  });
-  const routeThreadKey = routeThreadRef ? scopedThreadKey(routeThreadRef) : null;
-  const keybindings = useServerKeybindings();
-  const openAddProjectCommandPalette = useCommandPaletteStore((store) => store.openAddProject);
-  const toggleCommandPalette = useCommandPaletteStore((store) => store.toggleOpen);
-  // Extra thread rows revealed beyond the preview, per project ("Show more").
-  const [revealedThreadCountsByProject, setRevealedThreadCountsByProject] = useState<
-    ReadonlyMap<string, number>
-  >(() => new Map());
-  const { showThreadJumpHints, updateThreadJumpHintsVisibility } = useThreadJumpHintVisibility();
-  const dragInProgressRef = useRef(false);
-  const suppressProjectClickAfterDragRef = useRef(false);
-  const suppressProjectClickForContextMenuRef = useRef(false);
-  const clearSelection = useThreadSelectionStore((s) => s.clearSelection);
-  const setSelectionAnchor = useThreadSelectionStore((s) => s.setAnchor);
-  const platform = navigator.platform;
-  const shortcutModifiers = useShortcutModifierState();
-  const modelPickerOpen = useModelPickerOpen();
-  const savedEnvironmentRegistry = useSavedEnvironmentRegistryStore((s) => s.byId);
-  const savedEnvironmentRuntimeById = useSavedEnvironmentRuntimeStore((s) => s.byId);
-  const orderedProjects = useMemo(() => {
-    return orderItemsByPreferredIds({
-      items: projects,
-      preferredIds: projectOrder,
-      getId: getProjectOrderKey,
-    });
-  }, [projectOrder, projects]);
-
-  // Build a mapping from physical project key → logical project key for
-  // cross-environment grouping.  Projects that share a repositoryIdentity
-  // canonicalKey are treated as one logical project in the sidebar.
-  const physicalToLogicalKey = useMemo(() => {
-    return buildPhysicalToLogicalProjectKeyMap({
-      projects: orderedProjects,
-      settings: projectGroupingSettings,
-    });
-  }, [orderedProjects, projectGroupingSettings]);
-  const projectPhysicalKeyByScopedRef = useMemo(
-    () =>
-      new Map(
-        orderedProjects.map((project) => [
-          scopedProjectKey(scopeProjectRef(project.environmentId, project.id)),
-          derivePhysicalProjectKey(project),
-        ]),
-      ),
-    [orderedProjects],
+            : null,
+      });
+      void handleNewThread(projectRef, {
+        ...(seedContext.branch !== undefined ? { branch: seedContext.branch } : {}),
+        ...(seedContext.worktreePath !== undefined
+          ? { worktreePath: seedContext.worktreePath }
+          : {}),
+        envMode: seedContext.envMode,
+      });
+    },
+    [defaultThreadEnvMode, handleNewThread, router],
   );
 
-  const sidebarProjects = useMemo<SidebarProjectSnapshot[]>(() => {
-    return buildSidebarProjectSnapshots({
-      projects: orderedProjects,
-      settings: projectGroupingSettings,
-      primaryEnvironmentId,
-      resolveEnvironmentLabel: (environmentId) => {
-        const rt = savedEnvironmentRuntimeById[environmentId];
-        const saved = savedEnvironmentRegistry[environmentId];
-        return rt?.descriptor?.label ?? saved?.label ?? null;
-      },
-    });
+  // Compose follows the thread you are in. While the list is scoped to a
+  // single project, that project wins instead: filtering to it and then
+  // getting a thread somewhere else reads as the button ignoring you.
+  const handleComposeClick = useCallback(() => {
+    if (isMobile) {
+      setOpenMobile(false);
+    }
+    const scopedProject =
+      scopedProjectKeyValue === null
+        ? null
+        : (sidebarProjectByKey.get(scopedProjectKeyValue) ?? null);
+    const scopedMember =
+      scopedProject && scopedProject.memberProjects.length === 1
+        ? scopedProject.memberProjects[0]!
+        : null;
+    const projectRef = scopedMember
+      ? scopeProjectRef(scopedMember.environmentId, scopedMember.id)
+      : resolveThreadActionProjectRef({
+          activeDraftThread,
+          activeThread,
+          defaultProjectRef,
+          defaultThreadEnvMode: resolveSidebarNewThreadEnvMode({
+            defaultEnvMode: defaultThreadEnvMode,
+          }),
+          handleNewThread,
+        });
+    if (!projectRef) {
+      return;
+    }
+    // General chats run in per-thread scratch directories; branch and worktree
+    // seeding does not apply to them.
+    if (generalChatProjectKeys.has(resolveProjectKeyForRef(projectRef))) {
+      void startNewGeneralChatThread(handleNewThread, projectRef);
+      return;
+    }
+    createThreadForProjectRef(projectRef);
   }, [
-    orderedProjects,
-    projectGroupingSettings,
-    primaryEnvironmentId,
-    savedEnvironmentRegistry,
-    savedEnvironmentRuntimeById,
+    activeDraftThread,
+    activeThread,
+    createThreadForProjectRef,
+    defaultProjectRef,
+    defaultThreadEnvMode,
+    generalChatProjectKeys,
+    handleNewThread,
+    isMobile,
+    resolveProjectKeyForRef,
+    scopedProjectKeyValue,
+    setOpenMobile,
+    sidebarProjectByKey,
   ]);
 
-  const sidebarProjectByKey = useMemo(
-    () => new Map(sidebarProjects.map((project) => [project.projectKey, project] as const)),
-    [sidebarProjects],
-  );
-  const sidebarThreadByKey = useMemo(
-    () =>
-      new Map(
-        sidebarThreads.map(
-          (thread) =>
-            [scopedThreadKey(scopeThreadRef(thread.environmentId, thread.id)), thread] as const,
-        ),
-      ),
-    [sidebarThreads],
-  );
-  // Resolve the active route's project key to a logical key so it matches the
-  // sidebar's grouped project entries.
-  const activeRouteProjectKey = useMemo(() => {
-    if (!routeThreadKey) {
-      return null;
+  const handleNewGeneralChat = useCallback(() => {
+    const generalChatsProject = sidebarProjects.find((project) => project.kind === "general-chat");
+    const projectRef = generalChatsProject
+      ? scopeProjectRef(generalChatsProject.environmentId, generalChatsProject.id)
+      : null;
+    if (projectRef === null) {
+      return;
     }
-    const activeThread = sidebarThreadByKey.get(routeThreadKey);
-    if (!activeThread) return null;
-    const physicalKey =
-      projectPhysicalKeyByScopedRef.get(
-        scopedProjectKey(scopeProjectRef(activeThread.environmentId, activeThread.projectId)),
-      ) ?? scopedProjectKey(scopeProjectRef(activeThread.environmentId, activeThread.projectId));
-    return physicalToLogicalKey.get(physicalKey) ?? physicalKey;
-  }, [routeThreadKey, sidebarThreadByKey, physicalToLogicalKey, projectPhysicalKeyByScopedRef]);
-
-  // Group threads by logical project key so all threads from grouped projects
-  // are displayed together.
-  const threadsByProjectKey = useMemo(() => {
-    const next = new Map<string, SidebarThreadSummary[]>();
-    for (const thread of sidebarThreads) {
-      const physicalKey =
-        projectPhysicalKeyByScopedRef.get(
-          scopedProjectKey(scopeProjectRef(thread.environmentId, thread.projectId)),
-        ) ?? scopedProjectKey(scopeProjectRef(thread.environmentId, thread.projectId));
-      const logicalKey = physicalToLogicalKey.get(physicalKey) ?? physicalKey;
-      const existing = next.get(logicalKey);
-      if (existing) {
-        existing.push(thread);
-      } else {
-        next.set(logicalKey, [thread]);
-      }
+    if (isMobile) {
+      setOpenMobile(false);
+    }
+    void startNewGeneralChatThread(handleNewThread, projectRef);
+  }, [handleNewThread, isMobile, setOpenMobile, sidebarProjects]);
+
+  const handleOpenChats = useCallback(() => {
+    if (isMobile) {
+      setOpenMobile(false);
     }
-    return next;
-  }, [sidebarThreads, physicalToLogicalKey, projectPhysicalKeyByScopedRef]);
+    void navigate({ to: "/chats" });
+  }, [isMobile, navigate, setOpenMobile]);
+
+  const handleScopeChange = useCallback(
+    (projectKey: string | null) => {
+      setInboxProjectScope(projectKey);
+    },
+    [setInboxProjectScope],
+  );
+
   const getCurrentSidebarShortcutContext = useCallback(
     () => ({
       terminalFocus: isTerminalFocused(),
@@ -3221,339 +1121,25 @@ export default function Sidebar() {
     }),
     [modelPickerOpen, routeThreadRef],
   );
-  const newThreadShortcutLabelOptions = useMemo(
+  const shortcutLabelOptions = useMemo(
     () => ({
       platform,
-      context: {
-        terminalFocus: false,
-        terminalOpen: false,
-      },
+      context: { terminalFocus: false, terminalOpen: false },
     }),
     [platform],
   );
   const newThreadShortcutLabel =
-    shortcutLabelForCommand(keybindings, "chat.newLocal", newThreadShortcutLabelOptions) ??
-    shortcutLabelForCommand(keybindings, "chat.new", newThreadShortcutLabelOptions);
-
-  const navigateToThread = useCallback(
-    (threadRef: ScopedThreadRef) => {
-      if (useThreadSelectionStore.getState().selectedThreadKeys.size > 0) {
-        clearSelection();
-      }
-      setSelectionAnchor(scopedThreadKey(threadRef));
-      if (isMobile) {
-        setOpenMobile(false);
-      }
-      void navigate({
-        to: "/$environmentId/$threadId",
-        params: buildThreadRouteParams(threadRef),
-      });
-    },
-    [clearSelection, isMobile, navigate, setOpenMobile, setSelectionAnchor],
-  );
-
-  const expandSidebar = useCallback(() => {
-    void setOpen(true);
-  }, [setOpen]);
-  const setProjectExpanded = useUiStateStore((store) => store.setProjectExpanded);
-  // The rail has nowhere to show a thread list, so a glyph opens the pane with
-  // that project already unfolded rather than navigating somewhere unasked.
-  const revealProject = useCallback(
-    (projectKey: string) => {
-      setProjectExpanded(projectKey, true);
-      void setOpen(true);
-    },
-    [setOpen, setProjectExpanded],
-  );
-  const openSettings = useCallback(() => {
-    void navigate({ to: "/settings" });
-  }, [navigate]);
-  const startNewThreadFromRail = useCallback(() => {
-    void startNewThreadFromContext({
-      activeDraftThread,
-      activeThread,
-      defaultProjectRef,
-      defaultThreadEnvMode: resolveSidebarNewThreadEnvMode({
-        defaultEnvMode: defaultThreadEnvMode,
-      }),
-      handleNewThread,
-    });
-  }, [activeDraftThread, activeThread, defaultProjectRef, defaultThreadEnvMode, handleNewThread]);
-
-  const projectDnDSensors = useSensors(
-    useSensor(PointerSensor, {
-      activationConstraint: { distance: 6 },
-    }),
-  );
-  const projectCollisionDetection = useCallback<CollisionDetection>((args) => {
-    const pointerCollisions = pointerWithin(args);
-    if (pointerCollisions.length > 0) {
-      return pointerCollisions;
-    }
-
-    return closestCorners(args);
-  }, []);
-
-  const handleProjectDragEnd = useCallback(
-    (event: DragEndEvent) => {
-      if (sidebarProjectSortOrder !== "manual") {
-        dragInProgressRef.current = false;
-        return;
-      }
-      dragInProgressRef.current = false;
-      const { active, over } = event;
-      if (!over || active.id === over.id) return;
-      const activeProject = sidebarProjects.find((project) => project.projectKey === active.id);
-      const overProject = sidebarProjects.find((project) => project.projectKey === over.id);
-      if (!activeProject || !overProject) return;
-      const activeMemberKeys = activeProject.memberProjects.map(
-        (member) => member.physicalProjectKey,
-      );
-      const overMemberKeys = overProject.memberProjects.map((member) => member.physicalProjectKey);
-      reorderProjects(activeMemberKeys, overMemberKeys);
-    },
-    [sidebarProjectSortOrder, reorderProjects, sidebarProjects],
-  );
-
-  const handleProjectDragStart = useCallback(
-    (_event: DragStartEvent) => {
-      if (sidebarProjectSortOrder !== "manual") {
-        return;
-      }
-      dragInProgressRef.current = true;
-      suppressProjectClickAfterDragRef.current = true;
-    },
-    [sidebarProjectSortOrder],
-  );
-
-  const handleProjectDragCancel = useCallback((_event: DragCancelEvent) => {
-    dragInProgressRef.current = false;
-  }, []);
-
-  const animatedProjectListsRef = useRef(new WeakSet<HTMLElement>());
-  const attachProjectListAutoAnimateRef = useCallback((node: HTMLElement | null) => {
-    if (!node || animatedProjectListsRef.current.has(node)) {
-      return;
-    }
-    autoAnimate(node, SIDEBAR_LIST_ANIMATION_OPTIONS);
-    animatedProjectListsRef.current.add(node);
-  }, []);
-
-  const animatedThreadListsRef = useRef(new WeakSet<HTMLElement>());
-  const attachThreadListAutoAnimateRef = useCallback((node: HTMLElement | null) => {
-    if (!node || animatedThreadListsRef.current.has(node)) {
-      return;
-    }
-    autoAnimate(node, SIDEBAR_LIST_ANIMATION_OPTIONS);
-    animatedThreadListsRef.current.add(node);
-  }, []);
-
-  const visibleThreads = useMemo(
-    () => sidebarThreads.filter((thread) => thread.archivedAt === null),
-    [sidebarThreads],
-  );
-  const generalChatProjectKeys = useMemo(
-    () =>
-      new Set(
-        projects
-          .filter((project) => project.kind === "general-chat")
-          .map((project) => scopedProjectKey(scopeProjectRef(project.environmentId, project.id))),
-      ),
-    [projects],
-  );
-  // On Deck is the working set for project work. General chats are
-  // conversations that belong to no project, so they never join the deck --
-  // they live behind the Chats destination and nowhere else.
-  const deckEligibleThreads = useMemo(
-    () =>
-      visibleThreads.filter(
-        (thread) =>
-          !generalChatProjectKeys.has(
-            scopedProjectKey(scopeProjectRef(thread.environmentId, thread.projectId)),
-          ),
-      ),
-    [generalChatProjectKeys, visibleThreads],
-  );
-  const sortedProjects = useMemo(() => {
-    const sortableProjects = sidebarProjects.map((project) => ({
-      ...project,
-      id: project.projectKey,
-    }));
-    const sortableThreads = visibleThreads.map((thread) => {
-      const physicalKey =
-        projectPhysicalKeyByScopedRef.get(
-          scopedProjectKey(scopeProjectRef(thread.environmentId, thread.projectId)),
-        ) ?? scopedProjectKey(scopeProjectRef(thread.environmentId, thread.projectId));
-      return {
-        ...thread,
-        projectId: (physicalToLogicalKey.get(physicalKey) ?? physicalKey) as ProjectId,
-      };
-    });
-    return sortProjectsForSidebar(
-      sortableProjects,
-      sortableThreads,
-      sidebarProjectSortOrder,
-    ).flatMap((project) => {
-      const resolvedProject = sidebarProjectByKey.get(project.id);
-      // General Chats never participates in project sorting/grouping; it
-      // renders as a pinned row above the Projects section instead.
-      if (!resolvedProject || resolvedProject.kind === "general-chat") {
-        return [];
-      }
-      return [resolvedProject];
-    });
-  }, [
-    sidebarProjectSortOrder,
-    physicalToLogicalKey,
-    projectPhysicalKeyByScopedRef,
-    sidebarProjectByKey,
-    sidebarProjects,
-    visibleThreads,
-  ]);
-  // Pinned above the Projects section, hidden until it has chats; discovery
-  // happens through the header's new-general-chat button.
-  const isManualProjectSorting = sidebarProjectSortOrder === "manual";
-
-  // On Deck: the cross-project working set pinned above the project browser.
-  // Status pills are computed once per visible thread and shared between the
-  // deck reconcile (store) and the rendered deck rows.
-  const onDeckStatusByThreadKey = useMemo(() => {
-    const statuses = new Map<string, ThreadStatusPill | null>();
-    for (const thread of visibleThreads) {
-      const threadKey = scopedThreadKey(scopeThreadRef(thread.environmentId, thread.id));
-      const lastVisitedAt = threadLastVisitedAtById[threadKey];
-      statuses.set(
-        threadKey,
-        resolveThreadStatusPill({
-          thread: {
-            ...thread,
-            ...(lastVisitedAt !== undefined ? { lastVisitedAt } : {}),
-          },
-        }),
-      );
-    }
-    return statuses;
-  }, [threadLastVisitedAtById, visibleThreads]);
-
-  useEffect(() => {
-    syncOnDeck(
-      deckEligibleThreads.map((thread) => {
-        const threadKey = scopedThreadKey(scopeThreadRef(thread.environmentId, thread.id));
-        return buildOnDeckSyncInput({
-          threadKey,
-          pinnedAt: thread.pinnedAt,
-          status: onDeckStatusByThreadKey.get(threadKey) ?? null,
-        });
-      }),
-      routeThreadKey,
-    );
-  }, [deckEligibleThreads, onDeckStatusByThreadKey, routeThreadKey, syncOnDeck]);
-
-  // The rail drops the project tree, so each project keeps a glyph carrying the
-  // same aggregate status its expanded row shows.
-  const railProjects = useMemo<DeckRailProject[]>(
-    () =>
-      sortedProjects.map((project) => ({
-        projectKey: project.projectKey,
-        summary: buildProjectHoverSummary({
-          name: project.displayName,
-          cwd: project.cwd,
-          environmentId: project.environmentId,
-          threads: (threadsByProjectKey.get(project.projectKey) ?? []).filter(
-            (thread) => thread.archivedAt === null,
-          ),
-          getLastVisitedAt: (threadKey) => threadLastVisitedAtById[threadKey],
-        }),
-      })),
-    [sortedProjects, threadLastVisitedAtById, threadsByProjectKey],
-  );
-
-  const onDeckEntries = useMemo<OnDeckEntry[]>(() => {
-    return onDeckThreadKeys.flatMap((threadKey) => {
-      const thread = sidebarThreadByKey.get(threadKey);
-      if (!thread || thread.archivedAt !== null) {
-        return [];
-      }
-      const status = onDeckStatusByThreadKey.get(threadKey) ?? null;
-      const physicalKey =
-        projectPhysicalKeyByScopedRef.get(
-          scopedProjectKey(scopeProjectRef(thread.environmentId, thread.projectId)),
-        ) ?? scopedProjectKey(scopeProjectRef(thread.environmentId, thread.projectId));
-      const project = sidebarProjectByKey.get(physicalToLogicalKey.get(physicalKey) ?? physicalKey);
-      return [
-        {
-          thread,
-          status,
-          projectLabel: project?.kind === "general-chat" ? "chats" : (project?.displayName ?? null),
-          projectCwd: project?.kind === "general-chat" ? null : (project?.cwd ?? null),
-          dismissible: isOnDeckDismissible(status),
-        },
-      ];
-    });
-  }, [
-    onDeckStatusByThreadKey,
-    onDeckThreadKeys,
-    physicalToLogicalKey,
-    projectPhysicalKeyByScopedRef,
-    sidebarProjectByKey,
-    sidebarThreadByKey,
-  ]);
-  const onDeckVisibleThreadKeys = useMemo(
-    () =>
-      onDeckEntries.map((entry) =>
-        scopedThreadKey(scopeThreadRef(entry.thread.environmentId, entry.thread.id)),
-      ),
-    [onDeckEntries],
+    shortcutLabelForCommand(keybindings, "chat.newLocal", shortcutLabelOptions) ??
+    shortcutLabelForCommand(keybindings, "chat.new", shortcutLabelOptions);
+  const commandPaletteShortcutLabel = shortcutLabelForCommand(
+    keybindings,
+    "commandPalette.toggle",
+    shortcutLabelOptions,
   );
 
-  const visibleSidebarThreadKeys = useMemo(() => {
-    const onDeckKeySet = new Set(onDeckVisibleThreadKeys);
-    const projectThreadKeys = sortedProjects.flatMap((project) => {
-      const projectExpanded = projectExpandedById[project.projectKey] ?? true;
-      if (!projectExpanded) {
-        return [];
-      }
-      const projectThreads = excludeOnDeckThreads({
-        threads: sortThreads(
-          (threadsByProjectKey.get(project.projectKey) ?? []).filter(
-            (thread) => thread.archivedAt === null,
-          ),
-          sidebarThreadSortOrder,
-        ),
-        onDeckThreadKeys: onDeckKeySet,
-        getThreadKey: (thread) => scopedThreadKey(scopeThreadRef(thread.environmentId, thread.id)),
-      });
-      // Mirrors SidebarProjectItem's rendering window so jump labels and
-      // thread traversal line up with the rows that are actually visible.
-      const { visibleThreads } = getSidebarThreadWindow({
-        threads: projectThreads,
-        getThreadKey: (thread) => scopedThreadKey(scopeThreadRef(thread.environmentId, thread.id)),
-        activeThreadKey: project.projectKey === activeRouteProjectKey ? routeThreadKey : null,
-        previewLimit: sidebarThreadPreviewCount,
-        revealedCount: revealedThreadCountsByProject.get(project.projectKey) ?? 0,
-      });
-      return visibleThreads.map((thread) =>
-        scopedThreadKey(scopeThreadRef(thread.environmentId, thread.id)),
-      );
-    });
-    // Deck rows render above the tree, so they lead the visual order that jump
-    // keys and thread traversal follow. The tree lists were already filtered
-    // above, so a deck thread has exactly one row and one jump index.
-    return [...onDeckVisibleThreadKeys, ...projectThreadKeys];
-  }, [
-    activeRouteProjectKey,
-    onDeckVisibleThreadKeys,
-    routeThreadKey,
-    sidebarThreadSortOrder,
-    sidebarThreadPreviewCount,
-    revealedThreadCountsByProject,
-    projectExpandedById,
-    sortedProjects,
-    threadsByProjectKey,
-  ]);
   const threadJumpCommandByKey = useMemo(() => {
     const mapping = new Map<string, NonNullable<ReturnType<typeof threadJumpCommandForIndex>>>();
-    for (const [visibleThreadIndex, threadKey] of visibleSidebarThreadKeys.entries()) {
+    for (const [visibleThreadIndex, threadKey] of orderedThreadKeys.entries()) {
       const jumpCommand = threadJumpCommandForIndex(visibleThreadIndex);
       if (!jumpCommand) {
         return mapping;
@@ -3562,7 +1148,7 @@ export default function Sidebar() {
     }
 
     return mapping;
-  }, [visibleSidebarThreadKeys]);
+  }, [orderedThreadKeys]);
   const threadJumpThreadKeys = useMemo(
     () => [...threadJumpCommandByKey.keys()],
     [threadJumpCommandByKey],
@@ -3593,97 +1179,19 @@ export default function Sidebar() {
   const shouldShowThreadJumpHintsNow = shouldShowThreadJumpHintsForModifiers(
     shortcutModifiers,
     keybindings,
-    {
-      platform,
-      context: sidebarShortcutContext,
-    },
+    { platform, context: sidebarShortcutContext },
   );
   const visibleThreadJumpLabelByKey = showThreadJumpHints
     ? threadJumpLabelByKey
     : EMPTY_THREAD_JUMP_LABELS;
-  // One list, rendered as rows in the pane and as icons in the rail, so both
-  // densities offer the same destinations in the same order.
-  const chatsStatus = useMemo(() => {
-    const chatThreads = visibleThreads.filter((thread) =>
-      generalChatProjectKeys.has(
-        scopedProjectKey(scopeProjectRef(thread.environmentId, thread.projectId)),
-      ),
-    );
-    if (chatThreads.length === 0) {
-      return null;
-    }
-    return resolveProjectStatusIndicator(
-      chatThreads.map((thread) => {
-        const threadKey = scopedThreadKey(scopeThreadRef(thread.environmentId, thread.id));
-        const lastVisitedAt = threadLastVisitedAtById[threadKey];
-        return resolveThreadStatusPill({
-          thread: {
-            ...thread,
-            ...(lastVisitedAt !== undefined ? { lastVisitedAt } : {}),
-          },
-        });
-      }),
-    );
-  }, [generalChatProjectKeys, threadLastVisitedAtById, visibleThreads]);
-  const destinations = useMemo<SidebarDestination[]>(
-    () => [
-      {
-        id: "chats",
-        label: "General chats",
-        icon: DESTINATION_ICONS.chats,
-        active: pathname.startsWith("/chats"),
-        status: chatsStatus,
-        action: {
-          label: "New chat",
-          icon: DESTINATION_ICONS.newChat,
-          onSelect: () => {
-            if (generalChatsProjectRef) {
-              void startNewGeneralChatThread(handleNewThread, generalChatsProjectRef);
-            }
-          },
-        },
-        onSelect: () => {
-          void navigate({ to: "/chats" });
-        },
-      },
-    ],
-    [chatsStatus, generalChatsProjectRef, handleNewThread, navigate, pathname],
-  );
-  const destinationBand = useMemo(
-    () => <DestinationBand destinations={destinations} />,
-    [destinations],
-  );
-  const onDeckSection = useMemo(
-    () =>
-      onDeckEntries.length > 0 ? (
-        <OnDeckSection
-          entries={onDeckEntries}
-          routeThreadKey={routeThreadKey}
-          threadJumpLabelByKey={visibleThreadJumpLabelByKey}
-          navigateToThread={navigateToThread}
-          dismissFromOnDeck={dismissFromOnDeck}
-        />
-      ) : null,
-    [
-      dismissFromOnDeck,
-      navigateToThread,
-      onDeckEntries,
-      routeThreadKey,
-      visibleThreadJumpLabelByKey,
-    ],
-  );
-  const orderedSidebarThreadKeys = visibleSidebarThreadKeys;
-  const prewarmedSidebarThreadKeys = useMemo(
-    () => getSidebarThreadIdsToPrewarm(visibleSidebarThreadKeys),
-    [visibleSidebarThreadKeys],
-  );
+
   const prewarmedSidebarThreadRefs = useMemo(
     () =>
-      prewarmedSidebarThreadKeys.flatMap((threadKey) => {
+      getSidebarThreadIdsToPrewarm(orderedThreadKeys).flatMap((threadKey) => {
         const ref = parseScopedThreadKey(threadKey);
         return ref ? [ref] : [];
       }),
-    [prewarmedSidebarThreadKeys],
+    [orderedThreadKeys],
   );
 
   useEffect(() => {
@@ -3717,7 +1225,7 @@ export default function Sidebar() {
       const traversalDirection = threadTraversalDirectionFromCommand(command);
       if (traversalDirection !== null) {
         const targetThreadKey = resolveAdjacentThreadId({
-          threadIds: orderedSidebarThreadKeys,
+          threadIds: orderedThreadKeys,
           currentThreadId: routeThreadKey,
           direction: traversalDirection,
         });
@@ -3763,7 +1271,7 @@ export default function Sidebar() {
     getCurrentSidebarShortcutContext,
     keybindings,
     navigateToThread,
-    orderedSidebarThreadKeys,
+    orderedThreadKeys,
     platform,
     routeThreadKey,
     sidebarThreadByKey,
@@ -3784,68 +1292,6 @@ export default function Sidebar() {
     };
   }, [clearSelection]);
 
-  const commandPaletteShortcutLabel = shortcutLabelForCommand(
-    keybindings,
-    "commandPalette.toggle",
-    newThreadShortcutLabelOptions,
-  );
-
-  const expandThreadListForProject = useCallback((projectKey: string, additionalCount: number) => {
-    if (additionalCount <= 0) return;
-    setRevealedThreadCountsByProject((current) => {
-      const next = new Map(current);
-      next.set(projectKey, (next.get(projectKey) ?? 0) + additionalCount);
-      return next;
-    });
-  }, []);
-
-  const collapseThreadListForProject = useCallback((projectKey: string) => {
-    setRevealedThreadCountsByProject((current) => {
-      if (!current.has(projectKey)) return current;
-      const next = new Map(current);
-      next.delete(projectKey);
-      return next;
-    });
-  }, []);
-
-  // Expanded lists are scoped to the project you are working in: navigating
-  // to a thread in another project folds everything else back to its preview.
-  useEffect(() => {
-    if (!activeRouteProjectKey) return;
-    setRevealedThreadCountsByProject((current) => {
-      if (current.size === 0 || (current.size === 1 && current.has(activeRouteProjectKey))) {
-        return current;
-      }
-      const kept = current.get(activeRouteProjectKey);
-      return kept === undefined
-        ? new Map<string, number>()
-        : new Map([[activeRouteProjectKey, kept]]);
-    });
-  }, [activeRouteProjectKey]);
-
-  // Collapsed desktop density: the deck rail replaces the pane entirely rather
-  // than sitting beside it, so nothing is shown twice. Mobile keeps using the
-  // off-canvas sheet, which has no collapsed state to render.
-  if (!isMobile && sidebarState === "collapsed") {
-    return (
-      <>
-        <SidebarChromeHeader isElectron={isElectron} collapsed />
-        <DeckRail
-          entries={onDeckEntries}
-          projects={railProjects}
-          onRevealProject={revealProject}
-          destinations={destinations}
-          routeThreadKey={routeThreadKey}
-          navigateToThread={navigateToThread}
-          openSearch={toggleCommandPalette}
-          openSettings={openSettings}
-          startNewThread={startNewThreadFromRail}
-          expandSidebar={expandSidebar}
-        />
-      </>
-    );
-  }
-
   return (
     <>
       <SidebarChromeHeader isElectron={isElectron} />
@@ -3857,42 +1303,261 @@ export default function Sidebar() {
       ) : (
         <>
           <SidebarHoverCardGroup>
-            <SidebarProjectsContent
-              projectSortOrder={sidebarProjectSortOrder}
-              threadSortOrder={sidebarThreadSortOrder}
-              projectGroupingMode={sidebarProjectGroupingMode}
-              threadPreviewCount={sidebarThreadPreviewCount}
-              updateSettings={updateSettings}
-              openAddProject={openAddProjectCommandPalette}
-              onDeckSection={onDeckSection}
-              destinationBand={destinationBand}
-              isManualProjectSorting={isManualProjectSorting}
-              projectDnDSensors={projectDnDSensors}
-              projectCollisionDetection={projectCollisionDetection}
-              handleProjectDragStart={handleProjectDragStart}
-              handleProjectDragEnd={handleProjectDragEnd}
-              handleProjectDragCancel={handleProjectDragCancel}
-              handleNewThread={handleNewThread}
-              archiveThread={archiveThread}
-              pinThread={pinThread}
-              unpinThread={unpinThread}
-              deleteThread={deleteThread}
-              sortedProjects={sortedProjects}
-              revealedThreadCountsByProject={revealedThreadCountsByProject}
-              activeRouteProjectKey={activeRouteProjectKey}
-              routeThreadKey={routeThreadKey}
-              newThreadShortcutLabel={newThreadShortcutLabel}
-              commandPaletteShortcutLabel={commandPaletteShortcutLabel}
-              threadJumpLabelByKey={visibleThreadJumpLabelByKey}
-              attachThreadListAutoAnimateRef={attachThreadListAutoAnimateRef}
-              expandThreadListForProject={expandThreadListForProject}
-              collapseThreadListForProject={collapseThreadListForProject}
-              dragInProgressRef={dragInProgressRef}
-              suppressProjectClickAfterDragRef={suppressProjectClickAfterDragRef}
-              suppressProjectClickForContextMenuRef={suppressProjectClickForContextMenuRef}
-              attachProjectListAutoAnimateRef={attachProjectListAutoAnimateRef}
-              projectsLength={workspaceProjectsLength}
-            />
+            <ThreadHoverCardProvider>
+              {/* Outside the scroll container: search and compose are chrome, and
+                chrome does not scroll away. The list clips beneath the rule. */}
+              <SidebarGroup className="shrink-0 bg-sidebar px-2 pt-2 pb-1.5">
+                <div className="flex items-center gap-1.5">
+                  <CommandDialogTrigger
+                    render={
+                      <button
+                        type="button"
+                        data-testid="command-palette-trigger"
+                        className="flex h-7 min-w-0 flex-1 cursor-pointer items-center gap-2 rounded-md border border-border/60 bg-muted/30 px-1 text-muted-foreground/70 transition-colors select-none hover:border-border hover:bg-muted/50 hover:text-foreground focus-ring"
+                      />
+                    }
+                  >
+                    <SearchIcon className="size-3.5" />
+                    <span className="min-w-0 flex-1 truncate text-left text-xs">Search</span>
+                    {commandPaletteShortcutLabel ? (
+                      // Keyboard chrome means nothing to a touch pointer.
+                      <Kbd className="h-4 min-w-0 rounded-sm px-1.5 text-[10px] pointer-coarse:hidden">
+                        {commandPaletteShortcutLabel}
+                      </Kbd>
+                    ) : null}
+                  </CommandDialogTrigger>
+                  <Tooltip>
+                    <TooltipTrigger
+                      render={
+                        <button
+                          type="button"
+                          aria-label="New thread"
+                          data-testid="new-thread-button"
+                          className="inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground/70 transition-colors hover:bg-accent hover:text-foreground focus-ring"
+                          onClick={handleComposeClick}
+                        />
+                      }
+                    >
+                      <SquarePenIcon className="size-3.5" />
+                    </TooltipTrigger>
+                    <TooltipPopup side="bottom">
+                      {newThreadShortcutLabel
+                        ? `New thread (${newThreadShortcutLabel})`
+                        : "New thread"}
+                    </TooltipPopup>
+                  </Tooltip>
+                </div>
+              </SidebarGroup>
+              {/* No rule under the search: the boundary is the opaque chrome
+                above and a short fade the rows pass into. The Wrapped header
+                keeps its own hairline -- that one is a section rule. */}
+              <div className="relative flex min-h-0 flex-1 flex-col">
+                <span
+                  aria-hidden="true"
+                  className="pointer-events-none absolute inset-x-0 top-0 z-20 h-3 bg-linear-to-b from-sidebar to-transparent"
+                />
+                <SidebarContent className="gap-0">
+                  <div className="group/chats-row relative px-2 py-1">
+                    <button
+                      type="button"
+                      data-testid="sidebar-general-chats"
+                      aria-current={isOnChats ? "page" : undefined}
+                      className={cn(
+                        "flex h-7 w-full cursor-pointer items-center gap-2 rounded-md px-1 text-xs transition-colors select-none focus-ring",
+                        // The fill answers to the wrapper, not to this button:
+                        // reaching for the new-chat icon leaves the row element,
+                        // and the row should not go dark under your cursor.
+                        isOnChats
+                          ? "bg-sidebar-accent text-foreground"
+                          : "text-muted-foreground/80 group-hover/chats-row:bg-sidebar-accent/60 group-hover/chats-row:text-foreground",
+                      )}
+                      onClick={handleOpenChats}
+                    >
+                      <MessagesSquareIcon className="size-3.5 shrink-0" />
+                      <span className="min-w-0 truncate">General Chats</span>
+                    </button>
+                    {/* A sibling, not a child: a button inside a button is invalid,
+                      and starting a chat should not first walk you to the page. */}
+                    <Tooltip>
+                      <TooltipTrigger
+                        render={
+                          <button
+                            type="button"
+                            data-testid="sidebar-new-general-chat"
+                            aria-label="New general chat"
+                            className="absolute top-1/2 right-3 inline-flex size-5 -translate-y-1/2 cursor-pointer items-center justify-center rounded-sm text-muted-foreground opacity-0 transition-opacity hover:text-foreground focus-ring group-hover/chats-row:opacity-100 group-focus-within/chats-row:opacity-100 pointer-coarse:opacity-100"
+                            onClick={handleNewGeneralChat}
+                          />
+                        }
+                      >
+                        <MessageCirclePlusIcon className="size-3.5" />
+                      </TooltipTrigger>
+                      <TooltipPopup side="bottom">New general chat</TooltipPopup>
+                    </Tooltip>
+                  </div>
+
+                  <ProjectScopeMenu
+                    options={scopeOptions}
+                    projectByKey={sidebarProjectByKey}
+                    scopedProjectKey={scopedProjectKeyValue}
+                    onScopeChange={handleScopeChange}
+                    onAddProject={openAddProjectCommandPalette}
+                  />
+
+                  {liveEntries.length === 0 ? (
+                    <div className="flex flex-col items-start gap-1.5 px-3 py-2">
+                      <span className="text-[11px] text-muted-foreground/60">
+                        {hasWorkspaceProjects ? "No threads yet" : "No projects yet"}
+                      </span>
+                      {hasWorkspaceProjects ? null : (
+                        <button
+                          type="button"
+                          data-testid="inbox-empty-add-project"
+                          className="cursor-pointer text-[11px] text-muted-foreground/80 underline-offset-2 transition-colors hover:text-foreground hover:underline focus-ring"
+                          onClick={openAddProjectCommandPalette}
+                        >
+                          Add a project
+                        </button>
+                      )}
+                    </div>
+                  ) : (
+                    <ul data-testid="inbox-thread-list">
+                      {visibleLiveEntries.map((entry) => (
+                        <InboxThreadRow
+                          key={entry.threadKey}
+                          thread={entry.thread}
+                          status={entry.status}
+                          projectLabel={scopedProjectKeyValue === null ? entry.projectLabel : null}
+                          isActive={routeThreadKey === entry.threadKey}
+                          jumpLabel={visibleThreadJumpLabelByKey.get(entry.threadKey) ?? null}
+                          canMarkDone={entry.canMarkDone}
+                          orderedThreadKeys={orderedThreadKeys}
+                          renamingThreadKey={renamingThreadKey}
+                          renamingTitle={renamingTitle}
+                          setRenamingTitle={setRenamingTitle}
+                          renamingInputRef={renamingInputRef}
+                          renamingCommittedRef={renamingCommittedRef}
+                          handleThreadClick={handleThreadClick}
+                          navigateToThread={navigateToThread}
+                          handleMultiSelectContextMenu={handleMultiSelectContextMenu}
+                          handleThreadContextMenu={handleThreadContextMenu}
+                          clearSelection={clearSelection}
+                          commitRename={commitRename}
+                          cancelRename={cancelRename}
+                          attemptTogglePinThread={attemptTogglePinThread}
+                          markThreadDone={markThreadDone}
+                          openPrLink={openPrLink}
+                        />
+                      ))}
+                    </ul>
+                  )}
+
+                  {hiddenLiveCount > 0 || revealedLiveCount > 0 ? (
+                    <div className="flex items-center gap-1 px-3 pt-1 pb-1.5">
+                      {nextLiveRevealCount > 0 ? (
+                        <button
+                          type="button"
+                          data-thread-selection-safe
+                          data-testid="inbox-live-show-more"
+                          className="min-w-0 flex-1 cursor-pointer text-left text-[11px] text-muted-foreground/45 transition-colors hover:text-muted-foreground focus-ring"
+                          onClick={() => {
+                            setRevealedLiveCount((count) => count + nextLiveRevealCount);
+                          }}
+                        >
+                          Show {nextLiveRevealCount} more…
+                        </button>
+                      ) : (
+                        <span className="min-w-0 flex-1" aria-hidden="true" />
+                      )}
+                      <Tooltip>
+                        <TooltipTrigger
+                          render={
+                            <CommandDialogTrigger
+                              data-testid="inbox-live-search"
+                              aria-label="Search threads"
+                              className="inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-sm text-muted-foreground/50 transition-colors hover:text-foreground focus-ring"
+                            />
+                          }
+                        >
+                          <SearchIcon className="size-3.5" />
+                        </TooltipTrigger>
+                        <TooltipPopup side="top">Search threads</TooltipPopup>
+                      </Tooltip>
+                      {revealedLiveCount > 0 ? (
+                        <Tooltip>
+                          <TooltipTrigger
+                            render={
+                              <button
+                                type="button"
+                                data-thread-selection-safe
+                                data-testid="inbox-live-show-fewer"
+                                aria-label="Show fewer threads"
+                                className="inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-sm text-muted-foreground/50 transition-colors hover:text-foreground focus-ring"
+                                onClick={() => {
+                                  setRevealedLiveCount(0);
+                                }}
+                              />
+                            }
+                          >
+                            <ChevronsUpIcon className="size-3.5" />
+                          </TooltipTrigger>
+                          <TooltipPopup side="top">Show fewer</TooltipPopup>
+                        </Tooltip>
+                      ) : null}
+                    </div>
+                  ) : null}
+
+                  {doneEntries.length > 0 ? (
+                    <>
+                      <InboxSectionHeader
+                        label="Wrapped"
+                        count={doneEntries.length}
+                        collapsed={doneCollapsed}
+                        onToggleCollapsed={toggleDoneCollapsed}
+                        testId="inbox-done-toggle"
+                      />
+                      <ul data-testid="inbox-done-list">
+                        {renderedDoneEntries.map((entry) => (
+                          <InboxDoneRow
+                            key={entry.threadKey}
+                            thread={entry.thread}
+                            projectLabel={
+                              scopedProjectKeyValue === null ? entry.projectLabel : null
+                            }
+                            doneAt={entry.doneAt}
+                            isActive={routeThreadKey === entry.threadKey}
+                            appSettingsConfirmThreadArchive={appSettingsConfirmThreadArchive}
+                            confirmingArchiveThreadKey={confirmingArchiveThreadKey}
+                            setConfirmingArchiveThreadKey={setConfirmingArchiveThreadKey}
+                            confirmArchiveButtonRefs={confirmArchiveButtonRefs}
+                            navigateToThread={navigateToThread}
+                            handleThreadContextMenu={handleThreadContextMenu}
+                            reopenThread={reopenThread}
+                            attemptArchiveThread={attemptArchiveThread}
+                          />
+                        ))}
+                      </ul>
+                      {!doneCollapsed && nextDoneRevealCount > 0 ? (
+                        <button
+                          type="button"
+                          data-thread-selection-safe
+                          data-testid="inbox-done-show-more"
+                          className={cn(
+                            "w-full cursor-pointer px-3 pt-2 pb-3 text-left text-[11px]",
+                            "text-muted-foreground/45 transition-colors hover:text-muted-foreground focus-ring",
+                          )}
+                          onClick={() => {
+                            setRevealedDoneCount((current) => current + DONE_REVEAL_STEP);
+                          }}
+                        >
+                          Show {nextDoneRevealCount} more…
+                        </button>
+                      ) : null}
+                    </>
+                  ) : null}
+                </SidebarContent>
+              </div>
+            </ThreadHoverCardProvider>
           </SidebarHoverCardGroup>
 
           <SidebarSeparator />
diff --git a/apps/web/src/components/ThreadStatusIndicators.tsx b/apps/web/src/components/ThreadStatusIndicators.tsx
index 5d87cb85..8cad1763 100644
--- a/apps/web/src/components/ThreadStatusIndicators.tsx
+++ b/apps/web/src/components/ThreadStatusIndicators.tsx
@@ -168,66 +168,6 @@ export function ThreadStatusLabel({
   );
 }
 
-/**
- * A thread row's live node: a status-coloured dot that sits centered on the
- * project rail so the vertical line reads as one continuous threadline running
- * through every thread's node. Colour alone encodes the status; a soft halo
- * pings while work is in flight. Hovering the dot reveals the status label, so
- * dropping the inline text label loses no information.
- *
- * Presentation only — the caller positions it (absolutely, over the rail).
- */
-export function ThreadStatusRailDot({ status }: { status: ThreadStatusPill }) {
-  return (
-    <Tooltip>
-      <TooltipTrigger
-        render={
-          <span
-            aria-label={status.label}
-            className={`pointer-events-auto flex items-center justify-center ${status.colorClass}`}
-          />
-        }
-      >
-        {status.pulse ? (
-          <LiveNode
-            className="size-2"
-            dotClassName={status.dotClass}
-            haloClassName={status.dotClass}
-          />
-        ) : (
-          <span className={`size-2 rounded-full ${status.dotClass}`} />
-        )}
-      </TooltipTrigger>
-      <TooltipPopup side="right">{status.label}</TooltipPopup>
-    </Tooltip>
-  );
-}
-
-/**
- * The node a thread row contributes to its project's rail. Every thread gets one
- * so the rail reads as a continuous threadline studded with nodes: idle threads
- * show a small muted dot, active threads a status-coloured dot that pulses while
- * work is in flight. Hovering an active node reveals the status label.
- *
- * Must be rendered as a sibling of the row button (not inside it) and centered
- * on the rail in the row's left gutter, so the button's own clipping never
- * shaves the dot or its halo off the line.
- */
-export function ThreadRailNode({ status }: { status: ThreadStatusPill | null }) {
-  return (
-    <span className="pointer-events-none absolute top-1/2 left-[-4px] z-20 flex size-3 -translate-x-1/2 -translate-y-1/2 items-center justify-center">
-      {status ? (
-        <ThreadStatusRailDot status={status} />
-      ) : (
-        <span
-          aria-hidden="true"
-          className="relative z-10 block size-1.5 rounded-full bg-[color-mix(in_oklab,var(--muted-foreground)_42%,var(--rail))]"
-        />
-      )}
-    </span>
-  );
-}
-
 /**
  * Non-interactive leading status icons for a thread row in compact contexts
  * like the command palette. Shows the change request state icon (if present) and the
diff --git a/apps/web/src/components/browser/BrowserPanel.tsx b/apps/web/src/components/browser/BrowserPanel.tsx
index 867e6dc8..f7ce59f4 100644
--- a/apps/web/src/components/browser/BrowserPanel.tsx
+++ b/apps/web/src/components/browser/BrowserPanel.tsx
@@ -35,7 +35,10 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import {
   BROWSER_VIEWPORT_PRESETS,
   RESPONSIVE_VIEWPORT,
+  getPreviewWebview,
+  registerPreviewWebview,
   selectActiveTab,
+  selectThreadAgentState,
   selectThreadBrowserState,
   steppedZoom,
   useBrowserPanelStore,
@@ -61,7 +64,7 @@ import { RotateDeviceIcon } from "../Icons";
 import { resolveBrowserViewportLayout } from "./browserViewportLayout";
 import { AgentPointer, POINTER_RETIRE_MS, type AgentPointerPosition } from "./AgentPointer";
 import { completeUrl } from "./urlCompletion";
-import { usePreviewAutomationHost, type AgentActivity } from "./previewAutomationHost";
+import { type AgentActivity } from "./previewAutomationHost";
 import { normalizePreviewUrl } from "./previewUrl";
 
 /**
@@ -164,8 +167,13 @@ export function BrowserPanel({
   const activeTabId = activeTab?.id ?? "";
 
   // One element per tab, so switching tabs keeps every page alive -- along with
-  // the CDP attachment collecting its console and network diagnostics.
-  const webviewsRef = useRef(new Map<string, PreviewWebview>());
+  // the CDP attachment collecting its console and network diagnostics. The
+  // elements live in the store: the automation host outlives this panel and
+  // needs to reach them when it is closed.
+  const webviewFor = useCallback(
+    (tabId: string) => getPreviewWebview(threadRef, tabId) as PreviewWebview | null,
+    [threadRef],
+  );
   const [navState, setNavState] = useState<NavState>(IDLE_NAV_STATE);
   const [addressDraft, setAddressDraft] = useState(activeTab?.url ?? "");
   const visitedUrls = useBrowserPanelStore((store) => store.visitedUrls);
@@ -179,10 +187,19 @@ export function BrowserPanel({
   }, [activeUrl, activeTabId]);
 
   // The agent's last touch on the page, shown over the webview so it is
-  // visible working rather than silently changing things.
-  const [agentPoint, setAgentPoint] = useState<AgentPointerPosition | null>(null);
+  // visible working rather than silently changing things. Produced by the
+  // automation mount, which runs whether or not this panel is here.
+  const agentState = useBrowserPanelStore((store) =>
+    selectThreadAgentState(store.agentStateByThreadKey, threadRef),
+  );
+  const setAgentPoint = useBrowserPanelStore((store) => store.setAgentPoint);
+  const setAgentTab = useBrowserPanelStore((store) => store.setAgentTab);
+  const setAgentActivity = useBrowserPanelStore((store) => store.setAgentActivity);
+  const agentPoint = agentState.point as AgentPointerPosition | null;
+  const agentTabId = agentState.tabId;
+  const agentActivity = agentState.activity as AgentActivity | null;
 
-  const activeWebview = () => webviewsRef.current.get(activeTabId) ?? null;
+  const activeWebview = () => webviewFor(activeTabId) ?? null;
 
   // Host rather than hostname: on a dev box every page is localhost and the
   // port is the only thing telling two captures apart.
@@ -194,22 +211,6 @@ export function BrowserPanel({
     }
   }, [activeUrl]);
 
-  /**
-   * The tab the agent works in.
-   *
-   * Pinned on its first action and kept, rather than resolved fresh each time.
-   * Resolving each time meant two things went wrong at once: the agent's next
-   * click landed on whatever tab the user had just switched to, and a
-   * navigation moved the page out from under someone reading it. The pin only
-   * lets go when the tab does.
-   */
-  const [agentTabId, setAgentTabId] = useState<string | null>(null);
-  const agentTabIdRef = useRef<string | null>(null);
-  agentTabIdRef.current = agentTabId;
-
-  /** What the agent last did, shown while it is working. */
-  const [agentActivity, setAgentActivity] = useState<AgentActivity | null>(null);
-
   /*
    * The agent keeps its tab. Opening a tab, or switching to one, is yours to do
    * and does not move it.
@@ -232,11 +233,11 @@ export function BrowserPanel({
     // The agent's tab has been closed. Letting go here is what makes its next
     // action pick up the tab the user is actually looking at.
     if (agentTabId !== null && !browserState.tabs.some((tab) => tab.id === agentTabId)) {
-      setAgentTabId(null);
-      setAgentActivity(null);
-      setAgentPoint(null);
+      setAgentTab(threadRef, null);
+      setAgentActivity(threadRef, null);
+      setAgentPoint(threadRef, null);
     }
-  }, [agentTabId, browserState.tabs]);
+  }, [agentTabId, browserState.tabs, setAgentActivity, setAgentPoint, setAgentTab, threadRef]);
 
   /** Set while the mark is fading out, after the page it referred to has gone. */
   const [agentPointRetiring, setAgentPointRetiring] = useState(false);
@@ -258,75 +259,11 @@ export function BrowserPanel({
     }
     setAgentPointRetiring(true);
     const timer = window.setTimeout(() => {
-      setAgentPoint(null);
+      setAgentPoint(threadRef, null);
       setAgentPointRetiring(false);
     }, POINTER_RETIRE_MS);
     return () => window.clearTimeout(timer);
-  }, [activeUrl]);
-
-  // Offers this panel as the page the agent acts on, for as long as it is here.
-  usePreviewAutomationHost({
-    threadRef,
-    enabled: isElectron,
-    resolveTarget: () => {
-      const pinned = agentTabIdRef.current;
-      const tabId = pinned !== null && webviewsRef.current.has(pinned) ? pinned : activeTabId;
-      if (tabId !== pinned) {
-        agentTabIdRef.current = tabId;
-        setAgentTabId(tabId);
-      }
-      const webview = webviewsRef.current.get(tabId) ?? null;
-      return {
-        webContentsId: webview === null ? null : webview.getWebContentsId(),
-        onAgentPoint: (point) => {
-          setAgentPointRetiring(false);
-          setAgentPoint((previous) => ({
-            ...point,
-            sequence: (previous?.sequence ?? 0) + 1,
-          }));
-        },
-        onAgentActivity: (activity) => setAgentActivity(activity),
-        selectTab: (index) => {
-          const chosen = browserState.tabs[index];
-          if (chosen === undefined) {
-            return;
-          }
-          // Move the pin with the view. Without this the agent would keep
-          // acting on the tab it was pinned to while showing you another.
-          agentTabIdRef.current = chosen.id;
-          setAgentTabId(chosen.id);
-          selectTab(threadRef, chosen.id);
-        },
-        tabs: () =>
-          browserState.tabs.map((entry) => ({
-            title: entry.title ?? "",
-            url: entry.url ?? "",
-            active: entry.id === activeTabId,
-            agent: entry.id === tabId,
-          })),
-        viewport: () => {
-          const rect = webview?.getBoundingClientRect();
-          return {
-            width: Math.round(rect?.width ?? 0),
-            height: Math.round(rect?.height ?? 0),
-          };
-        },
-        // The address belongs to the element, so this is the one operation the
-        // main process cannot do on the agent's behalf. Note that it never
-        // touches which tab is selected: the agent moves its page, not the view.
-        navigate: async (url) => {
-          const normalized = normalizePreviewUrl(url);
-          // Refused rather than silently doing nothing: the agent gave an
-          // address, and it needs to know if that address was not one.
-          if (normalized === null) {
-            throw new Error(`${JSON.stringify(url)} is not a URL this browser can open.`);
-          }
-          setTabUrl(threadRef, tabId, normalized);
-          await webview?.loadURL(normalized);
-        },
-      };
-    },
-  });
+  }, [activeUrl, setAgentPoint, threadRef]);
 
   // Opening the device row on a responsive tab seeds concrete dimensions from
   // whatever the page currently occupies. Without them there is nothing to drag
@@ -386,7 +323,7 @@ export function BrowserPanel({
         return;
       }
       setTabUrl(threadRef, activeTabId, normalized);
-      const webview = webviewsRef.current.get(activeTabId);
+      const webview = webviewFor(activeTabId);
       callWhenReady(() => void webview?.loadURL(normalized));
     },
     [activeTabId, addressDraft, setTabUrl, threadRef],
@@ -408,7 +345,7 @@ export function BrowserPanel({
 
   const armTool = useCallback(
     async (requested: PageTool | null, options?: { readonly toggle?: boolean }) => {
-      const webview = webviewsRef.current.get(activeTabId);
+      const webview = webviewFor(activeTabId);
       if (webview === null || webview === undefined || !isElectron) {
         return;
       }
@@ -523,7 +460,7 @@ export function BrowserPanel({
       }
       if (cancelled) return;
       const targetId = onSameUrl?.id ?? activeTabId;
-      const webview = webviewsRef.current.get(targetId);
+      const webview = webviewFor(targetId);
       if (webview === null || webview === undefined) {
         onRevealHandled?.();
         return;
@@ -578,8 +515,8 @@ export function BrowserPanel({
    * odd one out.
    */
   const captureScreenshot = useCallback(() => {
-    const webview = webviewsRef.current.get(activeTabId);
-    if (webview === undefined || !isElectron) {
+    const webview = webviewFor(activeTabId);
+    if (webview === null || !isElectron) {
       return;
     }
     void window.desktopBridge
@@ -742,7 +679,7 @@ export function BrowserPanel({
           <MenuPopup align="end">
             <MenuItem
               onClick={() => {
-                const webview = webviewsRef.current.get(activeTabId);
+                const webview = webviewFor(activeTabId);
                 callWhenReady(() => webview?.reloadIgnoringCache());
               }}
             >
@@ -789,9 +726,9 @@ export function BrowserPanel({
             <MenuItem
               data-testid="browser-open-devtools"
               onClick={() => {
-                const webview = webviewsRef.current.get(activeTabId);
+                const webview = webviewFor(activeTabId);
                 const id =
-                  webview === undefined ? null : callWhenReady(() => webview.getWebContentsId());
+                  webview === null ? null : callWhenReady(() => webview.getWebContentsId());
                 if (id !== null) {
                   void window.desktopBridge?.previewOpenDevTools?.({ webContentsId: id });
                 }
@@ -804,7 +741,7 @@ export function BrowserPanel({
               data-testid="browser-clear-cache"
               onClick={() => {
                 void window.desktopBridge?.previewClearCache?.().then(() => {
-                  callWhenReady(() => webviewsRef.current.get(activeTabId)?.reloadIgnoringCache());
+                  callWhenReady(() => webviewFor(activeTabId)?.reloadIgnoringCache());
                 });
               }}
             >
@@ -816,7 +753,7 @@ export function BrowserPanel({
                 // Signing out of the preview is the point, so reload after: the
                 // page on screen would otherwise still look signed in.
                 void window.desktopBridge?.previewClearBrowsingData?.().then(() => {
-                  callWhenReady(() => webviewsRef.current.get(activeTabId)?.reload());
+                  callWhenReady(() => webviewFor(activeTabId)?.reload());
                 });
               }}
             >
@@ -863,7 +800,7 @@ export function BrowserPanel({
                   onSelect={(port) => {
                     const url = `http://localhost:${port}`;
                     setTabUrl(threadRef, activeTab.id, url);
-                    const webview = webviewsRef.current.get(activeTab.id);
+                    const webview = webviewFor(activeTab.id);
                     callWhenReady(() => void webview?.loadURL(url));
                   }}
                 />
@@ -887,11 +824,7 @@ export function BrowserPanel({
                 agentPoint={tab.id === agentTabId ? agentPoint : null}
                 agentPointRetiring={agentPointRetiring}
                 register={(element) => {
-                  if (element === null) {
-                    webviewsRef.current.delete(tab.id);
-                  } else {
-                    webviewsRef.current.set(tab.id, element);
-                  }
+                  registerPreviewWebview(threadRef, tab.id, element);
                 }}
               />
             ))}
diff --git a/apps/web/src/components/browser/PreviewAutomationMount.tsx b/apps/web/src/components/browser/PreviewAutomationMount.tsx
new file mode 100644
index 00000000..636e16a5
--- /dev/null
+++ b/apps/web/src/components/browser/PreviewAutomationMount.tsx
@@ -0,0 +1,144 @@
+import { useCallback } from "react";
+import type { ScopedThreadRef } from "@threadlines/contracts";
+
+import {
+  PREVIEW_WEBVIEW_WAIT_MS,
+  getPreviewWebview,
+  selectActiveTab,
+  selectThreadAgentState,
+  selectThreadBrowserState,
+  subscribePreviewWebviews,
+  useBrowserPanelStore,
+  waitForPreviewWebview,
+  type PreviewWebviewHandle,
+} from "../../browserPanelStore";
+import { normalizePreviewUrl } from "./previewUrl";
+import {
+  usePreviewAutomationHost,
+  type PreviewAutomationHostTarget,
+} from "./previewAutomationHost";
+
+/**
+ * The agent's end of the browser, mounted with the thread rather than with the
+ * panel.
+ *
+ * The host used to live inside the panel, which meant a closed panel was not a
+ * closed browser but no browser at all: the agent asked for a page and was told
+ * none existed, with no way to say "then open one". Since a request for the
+ * browser is a request to use the browser, the mount now sits at the thread
+ * level and opens the panel itself when something arrives for it.
+ *
+ * Renders nothing. It is a subscription with a React lifetime.
+ */
+export function PreviewAutomationMount({ threadRef }: { threadRef: ScopedThreadRef }) {
+  const setBrowserOpen = useBrowserPanelStore((store) => store.setBrowserOpen);
+  const setAgentTab = useBrowserPanelStore((store) => store.setAgentTab);
+  const setAgentPoint = useBrowserPanelStore((store) => store.setAgentPoint);
+  const setAgentActivity = useBrowserPanelStore((store) => store.setAgentActivity);
+  const selectTab = useBrowserPanelStore((store) => store.selectTab);
+  const setTabUrl = useBrowserPanelStore((store) => store.setTabUrl);
+
+  /**
+   * Reads the world at the moment the agent acts, not at the moment this
+   * component rendered: an operation may arrive many renders after the host
+   * subscribed, and it must see the tab that exists now.
+   */
+  const resolveTarget = useCallback((): PreviewAutomationHostTarget => {
+    const store = useBrowserPanelStore.getState();
+    const browserState = selectThreadBrowserState(store.browserStateByThreadKey, threadRef);
+    const agentState = selectThreadAgentState(store.agentStateByThreadKey, threadRef);
+    const activeTabId = selectActiveTab(browserState)?.id ?? "";
+    // The agent keeps the tab it pinned, as long as that tab still exists.
+    const pinned = agentState.tabId;
+    const tabId =
+      pinned !== null && browserState.tabs.some((tab) => tab.id === pinned) ? pinned : activeTabId;
+    if (tabId !== pinned) {
+      setAgentTab(threadRef, tabId === "" ? null : tabId);
+    }
+    const webview = tabId === "" ? null : getPreviewWebview(threadRef, tabId);
+
+    return {
+      webContentsId: webview === null ? null : webview.getWebContentsId(),
+      onAgentPoint: (point) => setAgentPoint(threadRef, point),
+      onAgentActivity: (activity) => setAgentActivity(threadRef, activity),
+      selectTab: (index) => {
+        const chosen = browserState.tabs[index];
+        if (chosen === undefined) {
+          return;
+        }
+        // Move the pin with the view, or the agent would keep acting on the tab
+        // it was pinned to while showing you another.
+        setAgentTab(threadRef, chosen.id);
+        selectTab(threadRef, chosen.id);
+      },
+      tabs: () =>
+        browserState.tabs.map((entry) => ({
+          title: entry.title ?? "",
+          url: entry.url ?? "",
+          active: entry.id === activeTabId,
+          agent: entry.id === tabId,
+        })),
+      viewport: () => {
+        const rect = webview?.getBoundingClientRect();
+        return { width: Math.round(rect?.width ?? 0), height: Math.round(rect?.height ?? 0) };
+      },
+      // The address belongs to the element, so this is the one operation the
+      // main process cannot do on the agent's behalf.
+      navigate: async (url) => {
+        const normalized = normalizePreviewUrl(url);
+        if (normalized === null) {
+          throw new Error(`${JSON.stringify(url)} is not a URL this browser can open.`);
+        }
+        if (tabId === "") {
+          throw new Error("The browser panel has no tab to navigate.");
+        }
+        setTabUrl(threadRef, tabId, normalized);
+        await getPreviewWebview(threadRef, tabId)?.loadURL(normalized);
+      },
+    };
+  }, [selectTab, setAgentActivity, setAgentPoint, setAgentTab, setTabUrl, threadRef]);
+
+  /**
+   * Opens the panel for an arriving operation and waits for it to have a page.
+   *
+   * Only the wait is conditional: with the panel already open this resolves on
+   * the first look, which is the common case and stays exactly as fast as it
+   * was.
+   */
+  const prepare = useCallback(async (): Promise<void> => {
+    const store = useBrowserPanelStore.getState();
+    const browserState = selectThreadBrowserState(store.browserStateByThreadKey, threadRef);
+    if (!browserState.open) {
+      setBrowserOpen(threadRef, true);
+    }
+    await waitForPreviewWebview<PreviewWebviewHandle>({
+      resolve: () => {
+        const current = useBrowserPanelStore.getState();
+        const state = selectThreadBrowserState(current.browserStateByThreadKey, threadRef);
+        const agent = selectThreadAgentState(current.agentStateByThreadKey, threadRef);
+        const activeTabId = selectActiveTab(state)?.id ?? "";
+        const pinned = agent.tabId;
+        const tabId =
+          pinned !== null && state.tabs.some((tab) => tab.id === pinned) ? pinned : activeTabId;
+        return tabId === "" ? null : getPreviewWebview(threadRef, tabId);
+      },
+      subscribe: subscribePreviewWebviews,
+      timeoutMs: PREVIEW_WEBVIEW_WAIT_MS,
+    });
+    // A timeout is not handled here: the host answers a missing page with the
+    // error it has always used for one, so a panel that never came up reads the
+    // same as a panel with nothing loaded.
+  }, [setBrowserOpen, threadRef]);
+
+  // Not the module-level `isElectron` snapshot: the bridge is what this needs,
+  // the host already refuses to connect without one, and reading it at effect
+  // time survives a preload that attaches after the bundle evaluates.
+  usePreviewAutomationHost({
+    threadRef,
+    enabled: true,
+    resolveTarget,
+    prepare,
+  });
+
+  return null;
+}
diff --git a/apps/web/src/components/browser/previewAutomationHost.ts b/apps/web/src/components/browser/previewAutomationHost.ts
index c7960751..c53a06af 100644
--- a/apps/web/src/components/browser/previewAutomationHost.ts
+++ b/apps/web/src/components/browser/previewAutomationHost.ts
@@ -176,9 +176,16 @@ function nameTarget(candidate: unknown): string | null {
 export function createPreviewAutomationHandler(
   bridge: DesktopBridge,
   resolveTarget: () => PreviewAutomationHostTarget,
+  /** Makes a page exist before the target is read; see `prepare` on the hook. */
+  prepare?: () => Promise<void>,
 ): (request: PreviewAutomationRequest) => Promise<PreviewAutomationResponse> {
   let sequence = 0;
   return async (request: PreviewAutomationRequest): Promise<PreviewAutomationResponse> => {
+    if (prepare !== undefined) {
+      // Never fatal: whatever state preparing leaves behind, the target below
+      // describes it, and a target with no page has its own answer.
+      await prepare().catch(() => undefined);
+    }
     const target = resolveTarget();
     sequence += 1;
     const verb = ACTIVITY_VERBS[request.operation];
@@ -189,10 +196,10 @@ export function createPreviewAutomationHandler(
       return response;
     };
     if (target.webContentsId === null) {
-      return {
+      return settle({
         requestId: request.requestId,
         error: "The browser panel is open but has no page loaded yet.",
-      };
+      });
     }
     try {
       const result = await dispatch(bridge, target, target.webContentsId, request);
@@ -367,19 +374,32 @@ export function usePreviewAutomationHost(input: {
   readonly threadRef: ScopedThreadRef;
   readonly enabled: boolean;
   readonly resolveTarget: () => PreviewAutomationHostTarget;
+  /**
+   * Run before the target is resolved, to make one exist. This is where a
+   * closed panel is opened and waited for; it must settle within the broker's
+   * timeout, and it may settle without succeeding -- a target with no page is
+   * an answer the host already knows how to give.
+   */
+  readonly prepare?: () => Promise<void>;
 }): void {
   const { threadRef, enabled } = input;
   // Read through a ref so a re-render that changes which tab is active does not
   // tear the subscription down and put it back up.
   const target = useRef(input.resolveTarget);
   target.current = input.resolveTarget;
+  const prepare = useRef(input.prepare);
+  prepare.current = input.prepare;
 
   useEffect(() => {
     const bridge = window.desktopBridge;
     if (!enabled || bridge === undefined) {
       return;
     }
-    const handle = createPreviewAutomationHandler(bridge, () => target.current());
+    const handle = createPreviewAutomationHandler(
+      bridge,
+      () => target.current(),
+      () => (prepare.current === undefined ? Promise.resolve() : prepare.current()),
+    );
 
     const api = ensureEnvironmentApi(threadRef.environmentId);
     return api.previewAutomation.connect(
diff --git a/apps/web/src/components/sidebar/DeckRail.browser.tsx b/apps/web/src/components/sidebar/DeckRail.browser.tsx
deleted file mode 100644
index 0efb5339..00000000
--- a/apps/web/src/components/sidebar/DeckRail.browser.tsx
+++ /dev/null
@@ -1,185 +0,0 @@
-import { EnvironmentId, ProjectId, ThreadId } from "@threadlines/contracts";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { MessagesSquareIcon } from "lucide-react";
-import { page } from "vite-plus/test/browser";
-import { describe, expect, it, vi } from "vite-plus/test";
-import { render } from "vitest-browser-react";
-
-import type { ThreadStatusPill } from "../Sidebar.logic";
-import type { SidebarThreadSummary } from "../../types";
-import { DeckRail, type DeckRailProject } from "./DeckRail";
-import type { OnDeckEntry } from "./OnDeckSection";
-
-const ENVIRONMENT_ID = EnvironmentId.make("environment-local");
-
-function thread(id: string, title: string): SidebarThreadSummary {
-  return {
-    id: ThreadId.make(id),
-    environmentId: ENVIRONMENT_ID,
-    projectId: ProjectId.make("project-badcode"),
-    title,
-    interactionMode: "default",
-    session: null,
-    effectiveCwd: null,
-    createdAt: "2026-07-23T00:00:00.000Z",
-    archivedAt: null,
-    pinnedAt: null,
-    latestTurn: null,
-    branch: null,
-    worktreePath: null,
-    latestUserMessageAt: null,
-    hasPendingApprovals: false,
-    hasPendingUserInput: false,
-    hasActionableProposedPlan: false,
-  };
-}
-
-function status(label: ThreadStatusPill["label"]): ThreadStatusPill {
-  return { label, colorClass: "", dotClass: "bg-amber-500", pulse: false };
-}
-
-function entry(
-  id: string,
-  title: string,
-  pill: ThreadStatusPill | null,
-  projectLabel: string | null = "badcode",
-): OnDeckEntry {
-  return {
-    thread: thread(id, title),
-    status: pill,
-    projectLabel,
-    projectCwd: "/repo/badcode",
-    dismissible: false,
-  };
-}
-
-function renderRail(
-  entries: readonly OnDeckEntry[],
-  overrides?: { routeThreadKey?: string; projects?: readonly DeckRailProject[] },
-) {
-  const navigateToThread = vi.fn();
-  const expandSidebar = vi.fn();
-  const onSelectChats = vi.fn();
-  const onRevealProject = vi.fn();
-  // Project glyphs render a favicon, which fetches over react-query.
-  const queryClient = new QueryClient({
-    defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
-  });
-  const screen = render(
-    <QueryClientProvider client={queryClient}>
-      <DeckRail
-        entries={entries}
-        projects={overrides?.projects ?? []}
-        onRevealProject={onRevealProject}
-        routeThreadKey={overrides?.routeThreadKey ?? null}
-        navigateToThread={navigateToThread}
-        destinations={[
-          {
-            id: "chats",
-            label: "General chats",
-            icon: MessagesSquareIcon,
-            active: false,
-            onSelect: onSelectChats,
-          },
-        ]}
-        openSearch={vi.fn()}
-        openSettings={vi.fn()}
-        startNewThread={vi.fn()}
-        expandSidebar={expandSidebar}
-      />
-    </QueryClientProvider>,
-  );
-  return { expandSidebar, navigateToThread, onRevealProject, onSelectChats, screen };
-}
-
-describe("DeckRail", () => {
-  it("renders one dot per On Deck thread and navigates on click", async () => {
-    const { navigateToThread } = renderRail([
-      entry("thread-a", "Fix reconnect race", status("Working")),
-      entry("thread-b", "Marketing footer copy", status("Completed")),
-    ]);
-
-    await expect.element(page.getByTestId("deck-rail-thread-thread-a")).toBeInTheDocument();
-    await expect.element(page.getByTestId("deck-rail-thread-thread-b")).toBeInTheDocument();
-
-    await page.getByTestId("deck-rail-thread-thread-b").click();
-    expect(navigateToThread).toHaveBeenCalledWith(
-      expect.objectContaining({ threadId: "thread-b" }),
-    );
-  });
-
-  it("labels the dot with the thread title and details it on hover", async () => {
-    renderRail([entry("thread-a", "Fix reconnect race", status("Awaiting Input"))]);
-
-    // The dot itself carries only the title; project, status and branch are
-    // the hover card's job now.
-    await expect
-      .element(page.getByTestId("deck-rail-thread-thread-a"))
-      .toHaveAttribute("aria-label", "Fix reconnect race");
-
-    await page.getByTestId("deck-rail-thread-thread-a").hover();
-    await expect.element(page.getByTestId("thread-hover-card")).toHaveTextContent("Awaiting Input");
-  });
-
-  it("badges how many threads are blocked on the user and expands the pane", async () => {
-    const { expandSidebar } = renderRail([
-      entry("thread-a", "Approve migration plan", status("Pending Approval")),
-      entry("thread-b", "Choose reconnect behavior", status("Awaiting Input")),
-      // Live but unblocked — must not be counted.
-      entry("thread-c", "Rebuild index", status("Working")),
-    ]);
-
-    const badge = page.getByTestId("deck-rail-needs-you");
-    await expect.element(badge).toHaveAttribute("aria-label", "2 threads need you");
-
-    await badge.click();
-    expect(expandSidebar).toHaveBeenCalledOnce();
-  });
-
-  it("offers the same destinations the expanded pane does", async () => {
-    const { onSelectChats } = renderRail([]);
-
-    const chats = page.getByTestId("deck-rail-destination-chats");
-    await expect.element(chats).toHaveAttribute("aria-label", "General chats");
-
-    await chats.click();
-    expect(onSelectChats).toHaveBeenCalledOnce();
-  });
-
-  it("shows a project glyph that opens the pane at that project", async () => {
-    const { onRevealProject } = renderRail([], {
-      projects: [
-        {
-          projectKey: "badcode",
-          summary: {
-            name: "badcode",
-            cwd: "/repo/badcode",
-            environmentId: ENVIRONMENT_ID,
-            status: status("Working"),
-            threadCount: 3,
-            activeCount: 1,
-            lastActivityAt: "2026-07-26T00:00:00.000Z",
-          },
-        },
-      ],
-    });
-
-    const glyph = page.getByTestId("deck-rail-project-badcode");
-    await expect.element(glyph).toHaveAttribute("aria-label", "badcode");
-
-    // The counts a favicon cannot carry live in the hover card.
-    await glyph.hover();
-    await expect.element(page.getByTestId("project-hover-card")).toHaveTextContent("3 threads");
-    await expect.element(page.getByTestId("project-hover-card")).toHaveTextContent("1 active");
-
-    await glyph.click();
-    expect(onRevealProject).toHaveBeenCalledWith("badcode");
-  });
-
-  it("omits the attention badge when nothing is waiting on the user", async () => {
-    renderRail([entry("thread-a", "Fix reconnect race", status("Working"))]);
-
-    await expect.element(page.getByTestId("deck-rail-search")).toBeInTheDocument();
-    expect(page.getByTestId("deck-rail-needs-you").query()).toBeNull();
-  });
-});
diff --git a/apps/web/src/components/sidebar/DeckRail.tsx b/apps/web/src/components/sidebar/DeckRail.tsx
deleted file mode 100644
index bc8cb85e..00000000
--- a/apps/web/src/components/sidebar/DeckRail.tsx
+++ /dev/null
@@ -1,265 +0,0 @@
-import { BellDotIcon, SearchIcon, SettingsIcon, SquarePenIcon } from "lucide-react";
-import { memo, useCallback } from "react";
-import type { EnvironmentId, ScopedThreadRef } from "@threadlines/contracts";
-import { scopedThreadKey, scopeThreadRef } from "@threadlines/client-runtime";
-import { cn } from "../../lib/utils";
-import {
-  countThreadsNeedingUser,
-  isNeedsUserStatus,
-  type ThreadStatusPill,
-} from "../Sidebar.logic";
-import { ThreadStatusDot } from "../ThreadStatusIndicators";
-import { ProjectFavicon } from "../ProjectFavicon";
-import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
-import type { OnDeckEntry } from "./OnDeckSection";
-import type { SidebarDestination } from "./DestinationBand";
-import { ThreadHoverCard } from "./ThreadHoverCard";
-import { SidebarHoverCardGroup } from "./hoverCard";
-import { ProjectHoverCard, type ProjectHoverSummary } from "./ProjectHoverCard";
-
-const RAIL_BUTTON_CLASS_NAME =
-  "flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-lg text-muted-foreground/70 outline-hidden ring-ring transition-colors hover:bg-sidebar-accent hover:text-foreground focus-visible:ring-2";
-
-interface RailButtonProps {
-  label: string;
-  onClick: () => void;
-  testId?: string;
-  active?: boolean;
-  disabled?: boolean;
-  children: React.ReactNode;
-}
-
-function RailButton({
-  label,
-  onClick,
-  testId,
-  active = false,
-  disabled = false,
-  children,
-}: RailButtonProps) {
-  return (
-    <Tooltip>
-      <TooltipTrigger
-        render={
-          <button
-            type="button"
-            aria-label={label}
-            data-testid={testId}
-            disabled={disabled}
-            className={cn(
-              RAIL_BUTTON_CLASS_NAME,
-              active && "bg-sidebar-accent text-foreground",
-              disabled && "cursor-default opacity-40 hover:bg-transparent hover:text-inherit",
-            )}
-            onClick={onClick}
-          >
-            {children}
-          </button>
-        }
-      />
-      <TooltipPopup side="right">{label}</TooltipPopup>
-    </Tooltip>
-  );
-}
-
-export interface DeckRailProject {
-  projectKey: string;
-  summary: ProjectHoverSummary;
-}
-
-export interface DeckRailProps {
-  entries: readonly OnDeckEntry[];
-  projects: readonly DeckRailProject[];
-  onRevealProject: (projectKey: string) => void;
-  destinations: readonly SidebarDestination[];
-  routeThreadKey: string | null;
-  navigateToThread: (threadRef: ScopedThreadRef) => void;
-  openSearch: () => void;
-  openSettings: () => void;
-  startNewThread: () => void;
-  expandSidebar: () => void;
-}
-
-/**
- * The collapsed density of the left sidebar. Titles and the project tree are
- * dropped; what survives is the question the sidebar answers while you are
- * heads-down in one thread — is anything else running, finished, or stuck?
- * On Deck rows keep their expanded order so a dot never moves under the
- * cursor, and the aggregate "needs you" badge stands in for the per-row
- * attention signal that collapsing takes away.
- */
-export const DeckRail = memo(function DeckRail(props: DeckRailProps) {
-  const {
-    entries,
-    projects,
-    onRevealProject,
-    destinations,
-    routeThreadKey,
-    navigateToThread,
-    openSearch,
-    openSettings,
-    startNewThread,
-    expandSidebar,
-  } = props;
-  const needsUserCount = countThreadsNeedingUser(entries.map((entry) => entry.status));
-
-  return (
-    <SidebarHoverCardGroup>
-      <div
-        className="flex min-h-0 flex-1 flex-col items-center gap-1 py-2"
-        data-testid="sidebar-deck-rail"
-      >
-        <RailButton label="New thread" onClick={startNewThread} testId="deck-rail-new-thread">
-          <SquarePenIcon className="size-4" />
-        </RailButton>
-        <RailButton label="Search" onClick={openSearch} testId="deck-rail-search">
-          <SearchIcon className="size-4" />
-        </RailButton>
-        {destinations.length > 0 ? (
-          <>
-            <div className="my-1 w-5 border-border border-t" role="separator" />
-            {destinations.map((destination) => {
-              const Icon = destination.icon;
-              return (
-                <RailButton
-                  key={destination.id}
-                  label={destination.label}
-                  onClick={destination.onSelect}
-                  testId={`deck-rail-destination-${destination.id}`}
-                  active={destination.active}
-                  disabled={destination.disabled ?? false}
-                >
-                  <Icon className="size-4" />
-                </RailButton>
-              );
-            })}
-          </>
-        ) : null}
-        {needsUserCount > 0 ? (
-          <RailButton
-            label={`${needsUserCount} ${needsUserCount === 1 ? "thread needs" : "threads need"} you`}
-            onClick={expandSidebar}
-            testId="deck-rail-needs-you"
-          >
-            <span className="relative inline-flex">
-              <BellDotIcon className="size-4 text-amber-600 dark:text-amber-300/90" />
-              <span className="-top-1 -right-1.5 absolute inline-flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-amber-500 px-1 font-mono text-[9px] text-background leading-none dark:bg-amber-300/90">
-                {needsUserCount}
-              </span>
-            </span>
-          </RailButton>
-        ) : null}
-
-        {entries.length > 0 ? (
-          <>
-            <div className="my-1 w-5 border-border border-t" role="separator" />
-            <div className="flex min-h-0 flex-col items-center gap-1 overflow-y-auto">
-              {entries.map((entry) => (
-                <DeckRailThread
-                  key={scopedThreadKey(scopeThreadRef(entry.thread.environmentId, entry.thread.id))}
-                  entry={entry}
-                  routeThreadKey={routeThreadKey}
-                  navigateToThread={navigateToThread}
-                />
-              ))}
-            </div>
-          </>
-        ) : null}
-
-        {projects.length > 0 ? (
-          <>
-            <div className="my-1 w-5 border-border border-t" role="separator" />
-            <div className="flex min-h-0 flex-col items-center gap-1 overflow-y-auto">
-              {projects.map((project) => (
-                <DeckRailProjectGlyph
-                  key={project.projectKey}
-                  project={project}
-                  onRevealProject={onRevealProject}
-                />
-              ))}
-            </div>
-          </>
-        ) : null}
-
-        <div className="flex-1" />
-        <RailButton label="Settings" onClick={openSettings} testId="deck-rail-settings">
-          <SettingsIcon className="size-4" />
-        </RailButton>
-      </div>
-    </SidebarHoverCardGroup>
-  );
-});
-
-function DeckRailThread(props: {
-  entry: OnDeckEntry;
-  routeThreadKey: string | null;
-  navigateToThread: (threadRef: ScopedThreadRef) => void;
-}) {
-  const { entry, routeThreadKey, navigateToThread } = props;
-  const threadRef = scopeThreadRef(entry.thread.environmentId, entry.thread.id);
-  const threadKey = scopedThreadKey(threadRef);
-  const isActive = routeThreadKey === threadKey;
-  const handleClick = useCallback(() => {
-    navigateToThread(threadRef);
-  }, [navigateToThread, threadRef]);
-
-  return (
-    <ThreadHoverCard thread={entry.thread} status={entry.status} side="right">
-      <button
-        type="button"
-        aria-label={entry.thread.title}
-        aria-current={isActive ? "true" : undefined}
-        data-testid={`deck-rail-thread-${entry.thread.id}`}
-        className={cn(
-          RAIL_BUTTON_CLASS_NAME,
-          "relative",
-          isActive && "bg-sidebar-accent",
-          isNeedsUserStatus(entry.status) &&
-            "after:absolute after:inset-y-1 after:-left-0.5 after:w-0.5 after:rounded-full after:bg-amber-500 dark:after:bg-amber-300/90",
-        )}
-        onClick={handleClick}
-      >
-        <ThreadStatusDot status={entry.status} />
-      </button>
-    </ThreadHoverCard>
-  );
-}
-
-function DeckRailProjectGlyph({
-  project,
-  onRevealProject,
-}: {
-  project: DeckRailProject;
-  onRevealProject: (projectKey: string) => void;
-}) {
-  const handleClick = useCallback(() => {
-    onRevealProject(project.projectKey);
-  }, [onRevealProject, project.projectKey]);
-  const { summary } = project;
-
-  return (
-    <ProjectHoverCard project={summary} side="right">
-      <button
-        type="button"
-        aria-label={summary.name}
-        data-testid={`deck-rail-project-${project.projectKey}`}
-        className={cn(RAIL_BUTTON_CLASS_NAME, "relative")}
-        onClick={handleClick}
-      >
-        <ProjectFavicon
-          cwd={summary.cwd}
-          environmentId={summary.environmentId}
-          className="size-4"
-        />
-        {summary.status ? (
-          // Corner dot rather than a row of its own: the glyph already
-          // identifies the project, so activity only needs a mark.
-          <ThreadStatusDot
-            status={summary.status}
-            className="absolute right-0.5 bottom-0.5 size-1.5 ring-2 ring-sidebar"
-          />
-        ) : null}
-      </button>
-    </ProjectHoverCard>
-  );
-}
diff --git a/apps/web/src/components/sidebar/DestinationBand.tsx b/apps/web/src/components/sidebar/DestinationBand.tsx
deleted file mode 100644
index f6073252..00000000
--- a/apps/web/src/components/sidebar/DestinationBand.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import { MessageCirclePlusIcon, MessagesSquareIcon, type LucideIcon } from "lucide-react";
-
-import { cn } from "../../lib/utils";
-import type { ThreadStatusPill } from "../Sidebar.logic";
-import { ThreadStatusDot } from "../ThreadStatusIndicators";
-import {
-  SidebarGroup,
-  SidebarMenu,
-  SidebarMenuAction,
-  SidebarMenuButton,
-  SidebarMenuItem,
-} from "../ui/sidebar";
-import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
-
-export interface SidebarDestination {
-  id: string;
-  label: string;
-  icon: LucideIcon;
-  active: boolean;
-  disabled?: boolean;
-  /**
-   * Activity behind the destination. Chats no longer appear on the deck, so
-   * without this a running chat would have no ambient signal anywhere. The
-   * destination carries its own status rather than earning a second row.
-   */
-  status?: ThreadStatusPill | null;
-  /**
-   * Optional trailing action, mirroring the project rows' new-thread button so
-   * the common action is reachable without first opening the destination.
-   */
-  action?: {
-    label: string;
-    icon: LucideIcon;
-    onSelect: () => void;
-  };
-  onSelect: () => void;
-}
-
-/**
- * Fixed places in the app, pinned above the deck.
- *
- * On Deck changes height as threads come and go, so anything below it moves;
- * navigation has to sit above it to stay in the same pixel every time. These
- * rows are deliberately plain — one line, no counts, no disclosure — so they
- * read as chrome and never compete with the live work underneath.
- */
-export function DestinationBand({ destinations }: { destinations: readonly SidebarDestination[] }) {
-  if (destinations.length === 0) {
-    return null;
-  }
-
-  return (
-    <SidebarGroup className="px-2 pt-1.5 pb-2" data-testid="sidebar-destination-band">
-      <SidebarMenu>
-        {destinations.map((destination) => {
-          const Icon = destination.icon;
-          const ActionIcon = destination.action?.icon;
-          return (
-            <SidebarMenuItem key={destination.id} className="group/menu-item relative">
-              <SidebarMenuButton
-                size="sm"
-                isActive={destination.active}
-                disabled={destination.disabled ?? false}
-                data-testid={`sidebar-destination-${destination.id}`}
-                className={cn(
-                  "gap-1.5 px-2 py-1.5 text-muted-foreground/80 hover:bg-accent hover:text-foreground",
-                  destination.active && "text-foreground",
-                )}
-                onClick={destination.onSelect}
-              >
-                <Icon className="size-3.5 shrink-0" />
-                <span className="min-w-0 flex-1 truncate text-xs">{destination.label}</span>
-                {destination.status ? (
-                  <ThreadStatusDot
-                    status={destination.status}
-                    className={cn(
-                      "ms-auto shrink-0 size-1.5",
-                      // The action takes this corner on hover; the dot yields
-                      // rather than the two stacking up.
-                      destination.action &&
-                        "transition-opacity group-hover/menu-item:opacity-0 group-focus-within/menu-item:opacity-0",
-                    )}
-                  />
-                ) : null}
-              </SidebarMenuButton>
-              {destination.action && ActionIcon ? (
-                <Tooltip>
-                  <TooltipTrigger
-                    render={
-                      <SidebarMenuAction
-                        showOnHover
-                        aria-label={destination.action.label}
-                        data-testid={`sidebar-destination-${destination.id}-action`}
-                        onClick={destination.action.onSelect}
-                      >
-                        <ActionIcon className="size-3.5" />
-                      </SidebarMenuAction>
-                    }
-                  />
-                  <TooltipPopup side="right">{destination.action.label}</TooltipPopup>
-                </Tooltip>
-              ) : null}
-            </SidebarMenuItem>
-          );
-        })}
-      </SidebarMenu>
-    </SidebarGroup>
-  );
-}
-
-export const DESTINATION_ICONS = {
-  newChat: MessageCirclePlusIcon,
-  chats: MessagesSquareIcon,
-} as const;
diff --git a/apps/web/src/components/sidebar/InboxRows.tsx b/apps/web/src/components/sidebar/InboxRows.tsx
new file mode 100644
index 00000000..6a358f31
--- /dev/null
+++ b/apps/web/src/components/sidebar/InboxRows.tsx
@@ -0,0 +1,823 @@
+import {
+  ArchiveIcon,
+  CheckIcon,
+  CloudIcon,
+  PinIcon,
+  PinOffIcon,
+  TerminalIcon,
+  Undo2Icon,
+  GitBranchIcon,
+} from "lucide-react";
+import React, { memo, useCallback, useMemo } from "react";
+import type { ScopedThreadRef } from "@threadlines/contracts";
+import { scopedThreadKey, scopeProjectRef, scopeThreadRef } from "@threadlines/client-runtime";
+import { resolveThreadWorkingCwd } from "@threadlines/shared/threadCwd";
+import type { SidebarThreadSummary } from "../../types";
+import { cn } from "../../lib/utils";
+import { useGitStatus } from "../../lib/gitStatusState";
+import { selectProjectByRef, useStore } from "../../store";
+import { usePrimaryEnvironmentId } from "../../environments/primary";
+import {
+  useSavedEnvironmentRegistryStore,
+  useSavedEnvironmentRuntimeStore,
+} from "../../environments/runtime";
+import { selectThreadTerminalState, useTerminalStateStore } from "../../terminalStateStore";
+import { useThreadSelectionStore } from "../../threadSelectionStore";
+import { useRelativeTimeTick } from "../../hooks/useRelativeTimeTick";
+import { formatRelativeTimeLabel, formatWorkingDurationLabel } from "../../timestampFormat";
+import { resolveWorkingTreeDiffStat } from "../ChatView.logic";
+import { PROVIDER_ICON_BY_PROVIDER } from "../chat/providerIconUtils";
+import {
+  ChangeRequestStatusIcon,
+  prStatusIndicator,
+  resolveThreadPr,
+  terminalStatusFromRunningIds,
+} from "../ThreadStatusIndicators";
+import { inboxStatusWord, type ThreadStatusPill } from "../Sidebar.logic";
+import { ProjectFavicon } from "../ProjectFavicon";
+import { ThreadHoverCard } from "./ThreadHoverCard";
+import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
+
+const ROW_ITEM_CLASS_NAME = "group/thread-row relative w-full";
+
+const ROW_SURFACE_CLASS_NAME =
+  "relative w-full cursor-pointer select-none text-left outline-hidden focus-ring focus-visible:ring-inset";
+
+/** Hover and selection are colour shifts only — nothing moves under the cursor. */
+function resolveRowSurfaceTone(input: { isActive: boolean; isSelected: boolean }): string {
+  if (input.isSelected) {
+    return "bg-primary/15 dark:bg-primary/22 hover:bg-primary/19 dark:hover:bg-primary/28";
+  }
+  if (input.isActive) {
+    return "bg-sidebar-accent";
+  }
+  return "hover:bg-sidebar-accent/60";
+}
+
+/**
+ * Actions take the timestamp's place rather than covering it: same line, same
+ * right edge, so nothing shifts and no surface has to be painted over the row.
+ * Touch has no hover, so there they simply sit beside the time.
+ */
+const ROW_ACTIONS_CLASS_NAME =
+  "flex shrink-0 items-center gap-0.5 sm:pointer-events-none sm:absolute sm:top-1/2 sm:right-0 sm:-translate-y-1/2 sm:opacity-0 sm:transition-opacity sm:duration-150 sm:group-hover/thread-row:pointer-events-auto sm:group-hover/thread-row:opacity-100 sm:group-focus-within/thread-row:pointer-events-auto sm:group-focus-within/thread-row:opacity-100";
+
+/** The slot a row's first line gives to the time, and to the actions. */
+const ROW_META_SLOT_CLASS_NAME =
+  "relative ml-auto flex flex-none items-center gap-1.5 whitespace-nowrap";
+
+const ROW_ACTION_BUTTON_CLASS_NAME =
+  "inline-flex size-5 cursor-pointer items-center justify-center rounded-sm text-muted-foreground transition-colors pointer-coarse:size-7 hover:text-foreground focus-ring";
+
+/**
+ * The thread's own project cwd. Grouped projects put threads from several
+ * checkouts under one name, so the row asks for its own rather than the
+ * group's -- the favicon and the git status both depend on the right one.
+ */
+function useThreadProjectCwd(thread: SidebarThreadSummary): string | null {
+  return useStore(
+    useMemo(
+      () => (state: import("../../store").AppState) =>
+        selectProjectByRef(state, scopeProjectRef(thread.environmentId, thread.projectId))?.cwd ??
+        null,
+      [thread.environmentId, thread.projectId],
+    ),
+  );
+}
+
+function formatDiffCount(count: number): string {
+  return count >= 1_000 ? `${Math.round(count / 100) / 10}k` : `${count}`;
+}
+
+/**
+ * The elapsed half of "working · 4m". Its own component so the second-by-second
+ * tick re-renders one label instead of every row in the list.
+ */
+function ThreadElapsedLabel({ startedAt }: { startedAt: string }) {
+  const nowMs = useRelativeTimeTick(1_000);
+  return <>{formatWorkingDurationLabel(startedAt, nowMs)}</>;
+}
+
+function ThreadProviderGlyph({ thread }: { thread: SidebarThreadSummary }) {
+  const provider = thread.session?.provider;
+  const Icon = provider ? PROVIDER_ICON_BY_PROVIDER[provider] : undefined;
+  if (!Icon) {
+    return null;
+  }
+  return <Icon aria-hidden="true" className="size-3 shrink-0 text-muted-foreground/45" />;
+}
+
+export interface InboxThreadRowProps {
+  thread: SidebarThreadSummary;
+  status: ThreadStatusPill | null;
+  /** Null while the list is scoped to one project: the label is implied. */
+  projectLabel: string | null;
+  isActive: boolean;
+  jumpLabel: string | null;
+  /** False while the thread is moving or blocked: live work can't be waved away. */
+  canMarkDone: boolean;
+  orderedThreadKeys: readonly string[];
+  renamingThreadKey: string | null;
+  renamingTitle: string;
+  setRenamingTitle: (title: string) => void;
+  renamingInputRef: React.RefObject<HTMLInputElement | null>;
+  renamingCommittedRef: React.RefObject<boolean>;
+  handleThreadClick: (
+    event: React.MouseEvent,
+    threadRef: ScopedThreadRef,
+    orderedThreadKeys: readonly string[],
+  ) => void;
+  navigateToThread: (threadRef: ScopedThreadRef) => void;
+  handleMultiSelectContextMenu: (position: { x: number; y: number }) => Promise<void>;
+  handleThreadContextMenu: (
+    threadRef: ScopedThreadRef,
+    position: { x: number; y: number },
+  ) => Promise<void>;
+  clearSelection: () => void;
+  commitRename: (
+    threadRef: ScopedThreadRef,
+    newTitle: string,
+    originalTitle: string,
+  ) => Promise<void>;
+  cancelRename: () => void;
+  attemptTogglePinThread: (threadRef: ScopedThreadRef, shouldPin: boolean) => Promise<void>;
+  markThreadDone: (threadKey: string) => void;
+  openPrLink: (event: React.MouseEvent<HTMLElement>, prUrl: string) => void;
+}
+
+/**
+ * One live thread in the inbox: two lines, ~46px, no card.
+ *
+ * Line one carries identity and state (dot, title, status); line two carries
+ * where the work lives (project, branch) and what it has produced (diffstat,
+ * provider). Hovering swaps the status for the row's actions — the meta and the
+ * actions share the same corner, so the row never changes height.
+ */
+export const InboxThreadRow = memo(function InboxThreadRow(props: InboxThreadRowProps) {
+  const {
+    thread,
+    status,
+    projectLabel,
+    isActive,
+    jumpLabel,
+    canMarkDone,
+    orderedThreadKeys,
+    renamingThreadKey,
+    renamingTitle,
+    setRenamingTitle,
+    renamingInputRef,
+    renamingCommittedRef,
+    handleThreadClick,
+    navigateToThread,
+    handleMultiSelectContextMenu,
+    handleThreadContextMenu,
+    clearSelection,
+    commitRename,
+    cancelRename,
+    attemptTogglePinThread,
+    markThreadDone,
+    openPrLink,
+  } = props;
+  const threadRef = scopeThreadRef(thread.environmentId, thread.id);
+  const threadKey = scopedThreadKey(threadRef);
+  const isSelected = useThreadSelectionStore((state) => state.selectedThreadKeys.has(threadKey));
+  const runningTerminalIds = useTerminalStateStore(
+    (state) =>
+      selectThreadTerminalState(state.terminalStateByThreadKey, threadRef).runningTerminalIds,
+  );
+  const primaryEnvironmentId = usePrimaryEnvironmentId();
+  const isRemoteThread =
+    primaryEnvironmentId !== null && thread.environmentId !== primaryEnvironmentId;
+  const remoteEnvLabel = useSavedEnvironmentRuntimeStore(
+    (s) => s.byId[thread.environmentId]?.descriptor?.label ?? null,
+  );
+  const remoteEnvSavedLabel = useSavedEnvironmentRegistryStore(
+    (s) => s.byId[thread.environmentId]?.label ?? null,
+  );
+  const threadEnvironmentLabel = isRemoteThread
+    ? (remoteEnvLabel ?? remoteEnvSavedLabel ?? "Remote")
+    : null;
+  const threadProjectCwd = useThreadProjectCwd(thread);
+  const gitCwd = resolveThreadWorkingCwd({
+    projectCwd: threadProjectCwd,
+    worktreePath: thread.worktreePath,
+    effectiveCwd: thread.effectiveCwd,
+  });
+  // Every live row asks, not just the ones with a pinned branch: a thread
+  // created without one is still working in a checkout, and that checkout's
+  // ref is the branch the row should name.
+  const gitStatus = useGitStatus({
+    environmentId: thread.environmentId,
+    cwd: gitCwd,
+  });
+  const diffStat = resolveWorkingTreeDiffStat(gitStatus.data ?? null);
+  // The row names only the branch the thread pinned: a checkout's current ref
+  // is shared by every thread in it, so printing it on each row says nothing
+  // about the thread. The resolved branch still drives the change request and
+  // the diffstat, which do belong to the checkout the thread works in, and the
+  // hover card is where the current ref gets its say.
+  const resolvedBranch = thread.branch ?? gitStatus.data?.refName ?? null;
+  const pr = resolveThreadPr(resolvedBranch, gitStatus.data);
+  const prStatus = prStatusIndicator(pr, gitStatus.data?.sourceControlProvider);
+  const terminalStatus = terminalStatusFromRunningIds(runningTerminalIds);
+  const isPinned = thread.pinnedAt !== null;
+  const isRenaming = renamingThreadKey === threadKey;
+  const statusWord = inboxStatusWord(status);
+  const isInFlight = status?.label === "Working" || status?.label === "Starting";
+  const inFlightStartedAt = thread.latestTurn?.startedAt ?? thread.latestTurn?.requestedAt ?? null;
+  // A completion nobody has looked at yet keeps the title bright until the
+  // thread is opened.
+  const isUnseen = status?.label === "Completed";
+  // Line one has one hard rule: the status slot on the right always fits
+  // whole, and the left cluster yields to it in a fixed order. The branch goes
+  // first and goes completely -- half a branch name is worse than none, and a
+  // row that is *doing* something has more to say than which ref it is on.
+  const hasStatusLabel = statusWord !== null || isInFlight;
+  const showBranch = thread.branch !== null && !hasStatusLabel;
+
+  const handleRowClick = useCallback(
+    (event: React.MouseEvent) => {
+      handleThreadClick(event, threadRef, orderedThreadKeys);
+    },
+    [handleThreadClick, orderedThreadKeys, threadRef],
+  );
+  const handleRowKeyDown = useCallback(
+    (event: React.KeyboardEvent) => {
+      if (event.key !== "Enter" && event.key !== " ") return;
+      event.preventDefault();
+      navigateToThread(threadRef);
+    },
+    [navigateToThread, threadRef],
+  );
+  const handleRowContextMenu = useCallback(
+    (event: React.MouseEvent) => {
+      event.preventDefault();
+      const hasSelection = useThreadSelectionStore.getState().hasSelection();
+      if (hasSelection && isSelected) {
+        void handleMultiSelectContextMenu({ x: event.clientX, y: event.clientY });
+        return;
+      }
+
+      if (hasSelection) {
+        clearSelection();
+      }
+      void handleThreadContextMenu(threadRef, { x: event.clientX, y: event.clientY });
+    },
+    [clearSelection, handleMultiSelectContextMenu, handleThreadContextMenu, isSelected, threadRef],
+  );
+  const handlePrClick = useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      if (!prStatus) return;
+      openPrLink(event, prStatus.url);
+    },
+    [openPrLink, prStatus],
+  );
+  const handleRenameInputRef = useCallback(
+    (element: HTMLInputElement | null) => {
+      if (element && renamingInputRef.current !== element) {
+        renamingInputRef.current = element;
+        element.focus();
+        element.select();
+      }
+    },
+    [renamingInputRef],
+  );
+  const handleRenameInputChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      setRenamingTitle(event.target.value);
+    },
+    [setRenamingTitle],
+  );
+  const handleRenameInputKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLInputElement>) => {
+      event.stopPropagation();
+      if (event.key === "Enter") {
+        event.preventDefault();
+        renamingCommittedRef.current = true;
+        void commitRename(threadRef, renamingTitle, thread.title);
+      } else if (event.key === "Escape") {
+        event.preventDefault();
+        renamingCommittedRef.current = true;
+        cancelRename();
+      }
+    },
+    [cancelRename, commitRename, renamingCommittedRef, renamingTitle, thread.title, threadRef],
+  );
+  const handleRenameInputBlur = useCallback(() => {
+    if (!renamingCommittedRef.current) {
+      void commitRename(threadRef, renamingTitle, thread.title);
+    }
+  }, [commitRename, renamingCommittedRef, renamingTitle, thread.title, threadRef]);
+  const handleRenameInputClick = useCallback((event: React.MouseEvent<HTMLInputElement>) => {
+    event.stopPropagation();
+  }, []);
+  const stopPropagationOnPointerDown = useCallback(
+    (event: React.PointerEvent<HTMLButtonElement>) => {
+      event.stopPropagation();
+    },
+    [],
+  );
+  const handleTogglePinClick = useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      event.preventDefault();
+      event.stopPropagation();
+      if (event.detail > 0) {
+        event.currentTarget.blur();
+      }
+      void attemptTogglePinThread(threadRef, !isPinned);
+    },
+    [attemptTogglePinThread, isPinned, threadRef],
+  );
+  const handleMarkDoneClick = useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      event.preventDefault();
+      event.stopPropagation();
+      markThreadDone(threadKey);
+    },
+    [markThreadDone, threadKey],
+  );
+
+  return (
+    <li className={ROW_ITEM_CLASS_NAME} data-thread-item>
+      <ThreadHoverCard thread={thread} status={status}>
+        <div
+          role="button"
+          tabIndex={0}
+          data-testid={`thread-row-${thread.id}`}
+          data-active={isActive ? "true" : undefined}
+          className={cn(
+            ROW_SURFACE_CLASS_NAME,
+            "px-3 pt-1.5 pb-2",
+            resolveRowSurfaceTone({ isActive, isSelected }),
+          )}
+          onClick={handleRowClick}
+          onKeyDown={handleRowKeyDown}
+          onContextMenu={handleRowContextMenu}
+        >
+          {/* Line one: where the work lives, and what it is doing. */}
+          <div
+            data-testid={`thread-detail-${thread.id}`}
+            className="flex min-w-0 items-center gap-1.5 text-[11px] text-muted-foreground/45"
+          >
+            {status ? (
+              <span
+                aria-label={status.label}
+                className={cn("size-[7px] shrink-0 rounded-full", status.dotClass)}
+              />
+            ) : isPinned ? (
+              <span
+                aria-label="Pinned thread"
+                className="inline-flex shrink-0 items-center justify-center text-muted-foreground/50"
+              >
+                <PinIcon className="size-2.5" />
+              </span>
+            ) : null}
+            {threadProjectCwd ? (
+              <ProjectFavicon
+                cwd={threadProjectCwd}
+                environmentId={thread.environmentId}
+                className="size-3 shrink-0"
+              />
+            ) : null}
+            {projectLabel ? (
+              <span className="min-w-0 truncate text-muted-foreground/60">{projectLabel}</span>
+            ) : null}
+            {showBranch ? (
+              <span className="flex min-w-0 items-center gap-1">
+                <GitBranchIcon aria-hidden className="size-2.5 shrink-0 opacity-60" />
+                <span className="min-w-0 truncate font-mono text-[10px]">{thread.branch}</span>
+              </span>
+            ) : null}
+            <span className={ROW_META_SLOT_CLASS_NAME}>
+              <span
+                data-testid={`thread-meta-${thread.id}`}
+                className={cn(
+                  "shrink-0 font-mono text-[11px] leading-none tabular-nums",
+                  "transition-opacity duration-150 sm:group-hover/thread-row:opacity-0 sm:group-focus-within/thread-row:opacity-0",
+                  statusWord !== null || isInFlight
+                    ? (status?.colorClass ?? "text-muted-foreground/50")
+                    : "text-muted-foreground/50",
+                )}
+              >
+                {jumpLabel ? (
+                  <span className="inline-flex h-4 items-center rounded-full border border-border/80 bg-background/90 px-1.5 text-[10px] font-medium tracking-tight text-foreground">
+                    {jumpLabel}
+                  </span>
+                ) : statusWord !== null ? (
+                  statusWord
+                ) : isInFlight ? (
+                  <>
+                    {status?.label === "Starting" ? "starting" : "working"}
+                    {inFlightStartedAt ? (
+                      <>
+                        {" · "}
+                        <ThreadElapsedLabel startedAt={inFlightStartedAt} />
+                      </>
+                    ) : null}
+                  </>
+                ) : (
+                  formatRelativeTimeLabel(
+                    thread.latestUserMessageAt ?? thread.updatedAt ?? thread.createdAt,
+                  )
+                )}
+              </span>
+              {/* Two actions, both icons: the words live in their tooltips. */}
+              <div className={ROW_ACTIONS_CLASS_NAME}>
+                {canMarkDone ? (
+                  <Tooltip>
+                    <TooltipTrigger
+                      render={
+                        <button
+                          type="button"
+                          data-thread-selection-safe
+                          data-testid={`thread-done-${thread.id}`}
+                          aria-label={`Wrap up ${thread.title}`}
+                          className={ROW_ACTION_BUTTON_CLASS_NAME}
+                          onPointerDown={stopPropagationOnPointerDown}
+                          onClick={handleMarkDoneClick}
+                        >
+                          <CheckIcon className="size-3.5" />
+                        </button>
+                      }
+                    />
+                    <TooltipPopup side="top">Wrap up</TooltipPopup>
+                  </Tooltip>
+                ) : null}
+                <Tooltip>
+                  <TooltipTrigger
+                    render={
+                      <button
+                        type="button"
+                        data-thread-selection-safe
+                        data-testid={`thread-pin-${thread.id}`}
+                        aria-label={`${isPinned ? "Unpin" : "Pin"} ${thread.title}`}
+                        aria-pressed={isPinned}
+                        className={cn(
+                          ROW_ACTION_BUTTON_CLASS_NAME,
+                          isPinned && "text-primary-readable",
+                        )}
+                        onPointerDown={stopPropagationOnPointerDown}
+                        onClick={handleTogglePinClick}
+                      >
+                        {isPinned ? (
+                          <PinOffIcon className="size-3.5" />
+                        ) : (
+                          <PinIcon className="size-3.5" />
+                        )}
+                      </button>
+                    }
+                  />
+                  <TooltipPopup side="top">{isPinned ? "Unpin" : "Pin"}</TooltipPopup>
+                </Tooltip>
+              </div>
+            </span>
+          </div>
+          {/* Line two: which thread, and what it has produced. */}
+          <div className="mt-0.5 flex min-w-0 items-center gap-1.5">
+            {isRenaming ? (
+              <input
+                ref={handleRenameInputRef}
+                className="min-w-0 flex-1 truncate rounded border border-ring bg-transparent px-0.5 text-base outline-none sm:text-xs"
+                value={renamingTitle}
+                onChange={handleRenameInputChange}
+                onKeyDown={handleRenameInputKeyDown}
+                onBlur={handleRenameInputBlur}
+                onClick={handleRenameInputClick}
+              />
+            ) : (
+              // No tooltip on the title: the hover card already carries the
+              // full one, and two popups racing the same hover is the bug.
+              <span
+                className={cn(
+                  "min-w-0 flex-1 truncate text-xs font-medium",
+                  isUnseen ? "text-foreground" : "text-foreground/90",
+                )}
+                data-testid={`thread-title-${thread.id}`}
+              >
+                {thread.title}
+              </span>
+            )}
+            <span className="ml-auto flex shrink-0 items-center gap-1.5">
+              {terminalStatus ? (
+                <span
+                  role="img"
+                  aria-label={terminalStatus.label}
+                  className={cn(
+                    "inline-flex items-center justify-center",
+                    terminalStatus.colorClass,
+                  )}
+                >
+                  <TerminalIcon
+                    className={cn("size-3", terminalStatus.pulse && "animate-status-pulse")}
+                  />
+                </span>
+              ) : null}
+              {isRemoteThread ? (
+                <Tooltip>
+                  <TooltipTrigger
+                    render={
+                      <span
+                        aria-label={threadEnvironmentLabel ?? "Remote"}
+                        className="inline-flex items-center justify-center"
+                      />
+                    }
+                  >
+                    <CloudIcon className="block size-3 text-muted-foreground/50" />
+                  </TooltipTrigger>
+                  <TooltipPopup side="top">{threadEnvironmentLabel}</TooltipPopup>
+                </Tooltip>
+              ) : null}
+              {prStatus ? (
+                <Tooltip>
+                  <TooltipTrigger
+                    render={
+                      <button
+                        type="button"
+                        data-thread-selection-safe
+                        aria-label={prStatus.tooltip}
+                        className={cn(
+                          "inline-flex cursor-pointer items-center justify-center rounded-sm outline-hidden focus-ring",
+                          prStatus.colorClass,
+                        )}
+                        onPointerDown={stopPropagationOnPointerDown}
+                        onClick={handlePrClick}
+                      >
+                        <ChangeRequestStatusIcon className="size-3" />
+                      </button>
+                    }
+                  />
+                  <TooltipPopup side="top">{prStatus.tooltip}</TooltipPopup>
+                </Tooltip>
+              ) : null}
+              {diffStat ? (
+                <span className="font-mono text-[10px] leading-none">
+                  <span className="text-success">+{formatDiffCount(diffStat.insertions)}</span>
+                  <span className="ps-1 text-destructive">
+                    −{formatDiffCount(diffStat.deletions)}
+                  </span>
+                </span>
+              ) : null}
+              <ThreadProviderGlyph thread={thread} />
+            </span>
+          </div>
+        </div>
+      </ThreadHoverCard>
+    </li>
+  );
+});
+
+export interface InboxDoneRowProps {
+  thread: SidebarThreadSummary;
+  projectLabel: string | null;
+  doneAt: string | null;
+  isActive: boolean;
+  appSettingsConfirmThreadArchive: boolean;
+  confirmingArchiveThreadKey: string | null;
+  setConfirmingArchiveThreadKey: React.Dispatch<React.SetStateAction<string | null>>;
+  confirmArchiveButtonRefs: React.RefObject<Map<string, HTMLButtonElement>>;
+  navigateToThread: (threadRef: ScopedThreadRef) => void;
+  handleThreadContextMenu: (
+    threadRef: ScopedThreadRef,
+    position: { x: number; y: number },
+  ) => Promise<void>;
+  reopenThread: (threadKey: string) => void;
+  attemptArchiveThread: (threadRef: ScopedThreadRef) => Promise<void>;
+}
+
+/**
+ * A settled thread in the Done tail: one line, still readable. Flattening the
+ * whole tail to one grey turns it into texture — the section header already
+ * says done, so each row keeps its name and its project.
+ */
+export const InboxDoneRow = memo(function InboxDoneRow(props: InboxDoneRowProps) {
+  const {
+    thread,
+    projectLabel,
+    doneAt,
+    isActive,
+    appSettingsConfirmThreadArchive,
+    confirmingArchiveThreadKey,
+    setConfirmingArchiveThreadKey,
+    confirmArchiveButtonRefs,
+    navigateToThread,
+    handleThreadContextMenu,
+    reopenThread,
+    attemptArchiveThread,
+  } = props;
+  const threadRef = scopeThreadRef(thread.environmentId, thread.id);
+  const threadKey = scopedThreadKey(threadRef);
+  const threadProjectCwd = useThreadProjectCwd(thread);
+
+  const handleClick = useCallback(() => {
+    navigateToThread(threadRef);
+  }, [navigateToThread, threadRef]);
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent) => {
+      if (event.key !== "Enter" && event.key !== " ") return;
+      event.preventDefault();
+      navigateToThread(threadRef);
+    },
+    [navigateToThread, threadRef],
+  );
+  const handleContextMenu = useCallback(
+    (event: React.MouseEvent) => {
+      event.preventDefault();
+      void handleThreadContextMenu(threadRef, { x: event.clientX, y: event.clientY });
+    },
+    [handleThreadContextMenu, threadRef],
+  );
+  const handleReopenClick = useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      event.preventDefault();
+      event.stopPropagation();
+      reopenThread(threadKey);
+    },
+    [reopenThread, threadKey],
+  );
+  const stopPropagationOnPointerDown = useCallback(
+    (event: React.PointerEvent<HTMLButtonElement>) => {
+      event.stopPropagation();
+    },
+    [],
+  );
+  const clearConfirmingArchive = useCallback(() => {
+    setConfirmingArchiveThreadKey((current) => (current === threadKey ? null : current));
+  }, [setConfirmingArchiveThreadKey, threadKey]);
+  const handleMouseLeave = useCallback(() => {
+    clearConfirmingArchive();
+  }, [clearConfirmingArchive]);
+  const handleBlurCapture = useCallback(
+    (event: React.FocusEvent<HTMLLIElement>) => {
+      const currentTarget = event.currentTarget;
+      requestAnimationFrame(() => {
+        if (currentTarget.contains(document.activeElement)) {
+          return;
+        }
+        clearConfirmingArchive();
+      });
+    },
+    [clearConfirmingArchive],
+  );
+  const handleConfirmArchiveRef = useCallback(
+    (element: HTMLButtonElement | null) => {
+      if (element) {
+        confirmArchiveButtonRefs.current.set(threadKey, element);
+      } else {
+        confirmArchiveButtonRefs.current.delete(threadKey);
+      }
+    },
+    [confirmArchiveButtonRefs, threadKey],
+  );
+  const handleConfirmArchiveClick = useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      event.preventDefault();
+      event.stopPropagation();
+      clearConfirmingArchive();
+      void attemptArchiveThread(threadRef);
+    },
+    [attemptArchiveThread, clearConfirmingArchive, threadRef],
+  );
+  const handleStartArchiveConfirmation = useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      event.preventDefault();
+      event.stopPropagation();
+      setConfirmingArchiveThreadKey(threadKey);
+      requestAnimationFrame(() => {
+        confirmArchiveButtonRefs.current.get(threadKey)?.focus();
+      });
+    },
+    [confirmArchiveButtonRefs, setConfirmingArchiveThreadKey, threadKey],
+  );
+  const handleArchiveImmediateClick = useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      event.preventDefault();
+      event.stopPropagation();
+      void attemptArchiveThread(threadRef);
+    },
+    [attemptArchiveThread, threadRef],
+  );
+  const isConfirmingArchive = confirmingArchiveThreadKey === threadKey;
+
+  return (
+    <li
+      className={ROW_ITEM_CLASS_NAME}
+      data-thread-item
+      onMouseLeave={handleMouseLeave}
+      onBlurCapture={handleBlurCapture}
+    >
+      {/* Same card the live rows carry: a wrapped thread's detail is no less
+          worth a hover, and status={null} reads as its idle state. */}
+      <ThreadHoverCard thread={thread} status={null}>
+        <div
+          role="button"
+          tabIndex={0}
+          data-testid={`done-row-${thread.id}`}
+          className={cn(
+            ROW_SURFACE_CLASS_NAME,
+            "flex items-center gap-2 px-3 py-1.5",
+            resolveRowSurfaceTone({ isActive, isSelected: false }),
+          )}
+          onClick={handleClick}
+          onKeyDown={handleKeyDown}
+          onContextMenu={handleContextMenu}
+        >
+          <span
+            className="min-w-0 flex-1 truncate text-xs text-muted-foreground"
+            data-testid={`done-title-${thread.id}`}
+          >
+            {thread.title}
+          </span>
+          {projectLabel ? (
+            <span className="flex shrink-0 items-center gap-1.5 text-[11px] text-muted-foreground/45">
+              {threadProjectCwd ? (
+                <ProjectFavicon
+                  cwd={threadProjectCwd}
+                  environmentId={thread.environmentId}
+                  className="size-3 shrink-0 opacity-70"
+                />
+              ) : null}
+              <span className="truncate">{projectLabel}</span>
+            </span>
+          ) : null}
+          <span className={ROW_META_SLOT_CLASS_NAME}>
+            <span className="shrink-0 font-mono text-[11px] tabular-nums text-muted-foreground/45 transition-opacity duration-150 sm:group-hover/thread-row:opacity-0 sm:group-focus-within/thread-row:opacity-0">
+              {doneAt ? formatRelativeTimeLabel(doneAt) : null}
+            </span>
+            {isConfirmingArchive ? (
+              <div className={cn(ROW_ACTIONS_CLASS_NAME, "sm:pointer-events-auto sm:opacity-100")}>
+                <button
+                  ref={handleConfirmArchiveRef}
+                  type="button"
+                  data-thread-selection-safe
+                  data-testid={`thread-archive-confirm-${thread.id}`}
+                  aria-label={`Confirm archive ${thread.title}`}
+                  className="inline-flex h-5 cursor-pointer items-center rounded-full bg-destructive/12 px-2 text-[10px] font-medium text-destructive transition-colors hover:bg-destructive/18 focus-ring"
+                  onPointerDown={stopPropagationOnPointerDown}
+                  onClick={handleConfirmArchiveClick}
+                >
+                  Confirm
+                </button>
+              </div>
+            ) : (
+              // A done thread is settled by definition, so archive is always
+              // available here -- the "running" guard the live rows needed is
+              // exactly the state that keeps a thread out of this list.
+              <div className={ROW_ACTIONS_CLASS_NAME}>
+                <Tooltip>
+                  <TooltipTrigger
+                    render={
+                      <button
+                        type="button"
+                        data-thread-selection-safe
+                        data-testid={`done-reopen-${thread.id}`}
+                        aria-label={`Reopen ${thread.title}`}
+                        className={ROW_ACTION_BUTTON_CLASS_NAME}
+                        onPointerDown={stopPropagationOnPointerDown}
+                        onClick={handleReopenClick}
+                      >
+                        <Undo2Icon className="size-3.5" />
+                      </button>
+                    }
+                  />
+                  <TooltipPopup side="top">Reopen</TooltipPopup>
+                </Tooltip>
+                {appSettingsConfirmThreadArchive ? (
+                  <button
+                    type="button"
+                    data-thread-selection-safe
+                    data-testid={`thread-archive-${thread.id}`}
+                    aria-label={`Archive ${thread.title}`}
+                    className={ROW_ACTION_BUTTON_CLASS_NAME}
+                    onPointerDown={stopPropagationOnPointerDown}
+                    onClick={handleStartArchiveConfirmation}
+                  >
+                    <ArchiveIcon className="size-3.5" />
+                  </button>
+                ) : (
+                  <Tooltip>
+                    <TooltipTrigger
+                      render={
+                        <button
+                          type="button"
+                          data-thread-selection-safe
+                          data-testid={`thread-archive-${thread.id}`}
+                          aria-label={`Archive ${thread.title}`}
+                          className={ROW_ACTION_BUTTON_CLASS_NAME}
+                          onPointerDown={stopPropagationOnPointerDown}
+                          onClick={handleArchiveImmediateClick}
+                        >
+                          <ArchiveIcon className="size-3.5" />
+                        </button>
+                      }
+                    />
+                    <TooltipPopup side="top">Archive</TooltipPopup>
+                  </Tooltip>
+                )}
+              </div>
+            )}
+          </span>
+        </div>
+      </ThreadHoverCard>
+    </li>
+  );
+});
diff --git a/apps/web/src/components/sidebar/OnDeckSection.tsx b/apps/web/src/components/sidebar/OnDeckSection.tsx
deleted file mode 100644
index e0eb7b39..00000000
--- a/apps/web/src/components/sidebar/OnDeckSection.tsx
+++ /dev/null
@@ -1,200 +0,0 @@
-import { PinIcon, XIcon } from "lucide-react";
-import { memo, useCallback } from "react";
-import type { ScopedThreadRef } from "@threadlines/contracts";
-import { scopedThreadKey, scopeThreadRef } from "@threadlines/client-runtime";
-import type { SidebarThreadSummary } from "../../types";
-import { cn } from "../../lib/utils";
-import { resolveThreadRowClassName, type ThreadStatusPill } from "../Sidebar.logic";
-import { ThreadStatusLabel } from "../ThreadStatusIndicators";
-import { SectionLabel } from "../ui/threadline";
-import { ProjectFavicon } from "../ProjectFavicon";
-import { ThreadHoverCard } from "./ThreadHoverCard";
-import { SidebarGroup, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "../ui/sidebar";
-import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
-
-export interface OnDeckEntry {
-  thread: SidebarThreadSummary;
-  status: ThreadStatusPill | null;
-  projectLabel: string | null;
-  /** Drives the row's project favicon; null for projects with no checkout. */
-  projectCwd: string | null;
-  dismissible: boolean;
-}
-
-interface OnDeckRowProps {
-  entry: OnDeckEntry;
-  isActive: boolean;
-  jumpLabel: string | null;
-  navigateToThread: (threadRef: ScopedThreadRef) => void;
-  dismissFromOnDeck: (threadKey: string) => void;
-}
-
-const ON_DECK_ROW_BUTTON_RENDER = <div role="button" tabIndex={0} />;
-
-const OnDeckRow = memo(function OnDeckRow(props: OnDeckRowProps) {
-  const { entry, isActive, jumpLabel, navigateToThread, dismissFromOnDeck } = props;
-  const { thread, status, projectLabel, projectCwd, dismissible } = entry;
-  const threadRef = scopeThreadRef(thread.environmentId, thread.id);
-  const threadKey = scopedThreadKey(threadRef);
-
-  const handleClick = useCallback(() => {
-    navigateToThread(threadRef);
-  }, [navigateToThread, threadRef]);
-  const handleKeyDown = useCallback(
-    (event: React.KeyboardEvent) => {
-      if (event.key !== "Enter" && event.key !== " ") return;
-      event.preventDefault();
-      navigateToThread(threadRef);
-    },
-    [navigateToThread, threadRef],
-  );
-  const handleDismissClick = useCallback(
-    (event: React.MouseEvent<HTMLButtonElement>) => {
-      event.preventDefault();
-      event.stopPropagation();
-      dismissFromOnDeck(threadKey);
-    },
-    [dismissFromOnDeck, threadKey],
-  );
-  const stopPointerDown = useCallback((event: React.PointerEvent<HTMLButtonElement>) => {
-    event.stopPropagation();
-  }, []);
-
-  return (
-    <SidebarMenuItem className="w-full" data-thread-item>
-      <ThreadHoverCard thread={thread} status={status} side="right">
-        <SidebarMenuButton
-          render={ON_DECK_ROW_BUTTON_RENDER}
-          size="sm"
-          isActive={isActive}
-          data-testid={`on-deck-row-${thread.id}`}
-          className={cn(
-            resolveThreadRowClassName({ isActive, isSelected: false }),
-            "relative isolate gap-1.5",
-          )}
-          onClick={handleClick}
-          onKeyDown={handleKeyDown}
-        >
-          <span className="flex size-3.5 shrink-0 items-center justify-center">
-            {status ? (
-              <ThreadStatusLabel status={status} />
-            ) : (
-              <span className="size-1.5 rounded-full bg-muted-foreground/40" />
-            )}
-          </span>
-          {thread.pinnedAt !== null && (
-            <span
-              aria-label="Pinned thread"
-              className="inline-flex h-4 shrink-0 items-center justify-center text-primary-readable"
-            >
-              <PinIcon className="size-3" />
-            </span>
-          )}
-          <span
-            className="min-w-0 flex-1 truncate text-xs"
-            data-testid={`on-deck-title-${thread.id}`}
-          >
-            {thread.title}
-          </span>
-          <span className="ml-auto flex shrink-0 items-center gap-1">
-            {jumpLabel ? (
-              <span
-                className="inline-flex h-5 items-center rounded-full border border-border/80 bg-background/90 px-1.5 font-mono text-[10px] font-medium tracking-tight text-foreground shadow-sm"
-                title={jumpLabel}
-              >
-                {jumpLabel}
-              </span>
-            ) : null}
-            {projectLabel ? (
-              <span
-                className={cn(
-                  "flex min-w-0 items-center gap-1",
-                  dismissible &&
-                    "transition-opacity duration-150 group-hover/menu-item:opacity-0 group-focus-within/menu-item:opacity-0",
-                )}
-              >
-                {projectCwd ? (
-                  <ProjectFavicon
-                    cwd={projectCwd}
-                    environmentId={thread.environmentId}
-                    className="size-3 shrink-0"
-                  />
-                ) : null}
-                <span className="max-w-20 truncate font-mono text-[10px] text-muted-foreground/50">
-                  {projectLabel}
-                </span>
-              </span>
-            ) : null}
-          </span>
-          {dismissible && (
-            <Tooltip>
-              <TooltipTrigger
-                render={
-                  <button
-                    type="button"
-                    data-thread-selection-safe
-                    data-testid={`on-deck-dismiss-${thread.id}`}
-                    aria-label={`Remove ${thread.title} from On Deck`}
-                    className="absolute top-1/2 right-1 inline-flex size-5 -translate-y-1/2 cursor-pointer items-center justify-center text-muted-foreground/60 opacity-0 transition-opacity duration-150 group-hover/menu-item:opacity-100 group-focus-within/menu-item:opacity-100 hover:text-foreground focus-ring pointer-coarse:opacity-100"
-                    onPointerDown={stopPointerDown}
-                    onClick={handleDismissClick}
-                  >
-                    <XIcon className="size-3.5" />
-                  </button>
-                }
-              />
-              <TooltipPopup side="top">Remove from On Deck</TooltipPopup>
-            </Tooltip>
-          )}
-        </SidebarMenuButton>
-      </ThreadHoverCard>
-    </SidebarMenuItem>
-  );
-});
-
-export interface OnDeckSectionProps {
-  entries: readonly OnDeckEntry[];
-  routeThreadKey: string | null;
-  threadJumpLabelByKey: ReadonlyMap<string, string>;
-  navigateToThread: (threadRef: ScopedThreadRef) => void;
-  dismissFromOnDeck: (threadKey: string) => void;
-}
-
-/**
- * The cross-project working set at the top of the sidebar. Rows keep their
- * insertion order — agent activity only changes the status dot, never the
- * position — so the threads being driven right now always live in the same
- * spot. The project tree below remains the browser for everything else.
- */
-export const OnDeckSection = memo(function OnDeckSection(props: OnDeckSectionProps) {
-  const { entries, routeThreadKey, threadJumpLabelByKey, navigateToThread, dismissFromOnDeck } =
-    props;
-  if (entries.length === 0) {
-    return null;
-  }
-
-  return (
-    <SidebarGroup className="px-2 pt-3 pb-1" data-testid="on-deck-section">
-      <div className="mb-1 pl-2">
-        <SectionLabel>On deck</SectionLabel>
-      </div>
-      <SidebarMenu>
-        {entries.map((entry) => {
-          const threadKey = scopedThreadKey(
-            scopeThreadRef(entry.thread.environmentId, entry.thread.id),
-          );
-          return (
-            <OnDeckRow
-              key={threadKey}
-              entry={entry}
-              isActive={routeThreadKey === threadKey}
-              jumpLabel={threadJumpLabelByKey.get(threadKey) ?? null}
-              navigateToThread={navigateToThread}
-              dismissFromOnDeck={dismissFromOnDeck}
-            />
-          );
-        })}
-      </SidebarMenu>
-    </SidebarGroup>
-  );
-});
diff --git a/apps/web/src/components/sidebar/ProjectHoverCard.tsx b/apps/web/src/components/sidebar/ProjectHoverCard.tsx
deleted file mode 100644
index c6887b1a..00000000
--- a/apps/web/src/components/sidebar/ProjectHoverCard.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import { FolderIcon, MessagesSquareIcon, ServerIcon } from "lucide-react";
-import type { ReactNode } from "react";
-
-import { usePrimaryEnvironmentId } from "../../environments/primary";
-import {
-  useSavedEnvironmentRegistryStore,
-  useSavedEnvironmentRuntimeStore,
-} from "../../environments/runtime";
-import { formatRelativeTimeLabel } from "../../timestampFormat";
-import type { ProjectHoverSummary } from "../Sidebar.logic";
-import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
-import {
-  HOVER_CARD_POPUP_CLASS_NAME,
-  HoverCardDetailRow,
-  HoverCardDetails,
-  HoverCardStatusLine,
-  HoverCardTitle,
-} from "./hoverCard";
-
-/**
- * What a project row leaves out.
- *
- * A row shows a name and a count; the rail shows only a favicon. Neither says
- * where the project lives on disk, how much of it is moving right now, or when
- * it last did anything, which is what you actually want before opening it.
- */
-export function ProjectHoverCard({
-  project,
-  side = "right",
-  children,
-}: {
-  project: ProjectHoverSummary;
-  side?: "right" | "left" | "top" | "bottom";
-  children: ReactNode;
-}) {
-  const primaryEnvironmentId = usePrimaryEnvironmentId();
-  const isRemote = primaryEnvironmentId !== null && project.environmentId !== primaryEnvironmentId;
-  const runtimeLabel = useSavedEnvironmentRuntimeStore(
-    (state) => state.byId[project.environmentId]?.descriptor?.label ?? null,
-  );
-  const savedLabel = useSavedEnvironmentRegistryStore(
-    (state) => state.byId[project.environmentId]?.label ?? null,
-  );
-  const environmentLabel = isRemote ? (runtimeLabel ?? savedLabel ?? "Remote") : null;
-
-  const threadsLabel = project.threadCount === 1 ? "1 thread" : `${project.threadCount} threads`;
-  const countsLabel =
-    project.activeCount > 0 ? `${threadsLabel} · ${project.activeCount} active` : threadsLabel;
-
-  return (
-    <Tooltip>
-      <TooltipTrigger render={children as never} />
-      <TooltipPopup
-        side={side}
-        sideOffset={8}
-        align="start"
-        className={HOVER_CARD_POPUP_CLASS_NAME}
-        data-testid="project-hover-card"
-      >
-        <HoverCardTitle>{project.name}</HoverCardTitle>
-        <HoverCardStatusLine
-          status={project.status}
-          idleLabel={project.threadCount === 0 ? "No threads yet" : "Idle"}
-          timestamp={
-            project.lastActivityAt ? formatRelativeTimeLabel(project.lastActivityAt) : null
-          }
-        />
-        <HoverCardDetails>
-          <HoverCardDetailRow icon={<MessagesSquareIcon className="size-3.5" />}>
-            {countsLabel}
-          </HoverCardDetailRow>
-          {environmentLabel ? (
-            <HoverCardDetailRow icon={<ServerIcon className="size-3.5" />}>
-              {environmentLabel}
-            </HoverCardDetailRow>
-          ) : null}
-          {/* Paths truncate at the wrong end by default: the leaf directory is
-              the identifying part, so keep the tail visible. */}
-          <HoverCardDetailRow
-            icon={<FolderIcon className="size-3.5" />}
-            className="truncate text-left [direction:rtl]"
-          >
-            <span className="[direction:ltr] [unicode-bidi:plaintext]">{project.cwd}</span>
-          </HoverCardDetailRow>
-        </HoverCardDetails>
-      </TooltipPopup>
-    </Tooltip>
-  );
-}
-
-export type { ProjectHoverSummary };
diff --git a/apps/web/src/components/sidebar/ProjectScopeMenu.tsx b/apps/web/src/components/sidebar/ProjectScopeMenu.tsx
new file mode 100644
index 00000000..76c1551c
--- /dev/null
+++ b/apps/web/src/components/sidebar/ProjectScopeMenu.tsx
@@ -0,0 +1,695 @@
+import { ChevronDownIcon, EllipsisIcon, FolderIcon, FolderPlusIcon } from "lucide-react";
+import React, { memo, useCallback, useState } from "react";
+import type { ContextMenuItem, SidebarProjectGroupingMode } from "@threadlines/contracts";
+import { scopeProjectRef } from "@threadlines/client-runtime";
+
+import { cn, newCommandId } from "../../lib/utils";
+import { readLocalApi } from "../../localApi";
+import { readEnvironmentApi } from "../../environmentApi";
+import { useComposerDraftStore } from "../../composerDraftStore";
+import { selectSidebarThreadsForProjectRefs, useStore } from "../../store";
+import { useCopyToClipboard } from "../../hooks/useCopyToClipboard";
+import { useSettings, useUpdateSettings } from "../../hooks/useSettings";
+import {
+  deriveProjectGroupingOverrideKey,
+  selectProjectGroupingSettings,
+} from "../../logicalProject";
+import type {
+  SidebarProjectGroupMember,
+  SidebarProjectSnapshot,
+} from "../../sidebarProjectGrouping";
+import type { ProjectScopeOption } from "../Sidebar.logic";
+import { ProjectFavicon } from "../ProjectFavicon";
+import { Button } from "../ui/button";
+import {
+  Dialog,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogPanel,
+  DialogPopup,
+  DialogTitle,
+} from "../ui/dialog";
+import { Input } from "../ui/input";
+import { Menu, MenuItem, MenuPopup, MenuSeparator, MenuTrigger } from "../ui/menu";
+import { Select, SelectItem, SelectPopup, SelectTrigger, SelectValue } from "../ui/select";
+import { stackedThreadToast, toastManager } from "../ui/toast";
+import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
+
+const PROJECT_GROUPING_MODE_LABELS: Record<SidebarProjectGroupingMode, string> = {
+  repository: "Group by repository",
+  repository_path: "Group by repository path",
+  separate: "Keep separate",
+};
+
+function projectGroupingModeDescription(mode: SidebarProjectGroupingMode): string {
+  switch (mode) {
+    case "repository":
+      return "Projects from the same repository share one sidebar row.";
+    case "repository_path":
+      return "Projects group only when both the repository and repo-relative path match.";
+    case "separate":
+      return "Every project path gets its own sidebar row.";
+  }
+}
+
+function formatProjectMemberActionLabel(
+  member: SidebarProjectGroupMember,
+  groupedProjectCount: number,
+): string {
+  if (groupedProjectCount <= 1) {
+    return member.name;
+  }
+
+  return member.environmentLabel ? `${member.environmentLabel} — ${member.cwd}` : member.cwd;
+}
+
+const SCOPE_ITEM_CLASS_NAME = "gap-2 data-highlighted:bg-foreground/12";
+/**
+ * Selection is a resting fill; hover is a stronger one. Both are neutral
+ * alphas of the foreground, so "which is selected" and "which is under the
+ * cursor" never read as the same state.
+ */
+const SCOPE_ITEM_SELECTED = "bg-foreground/6 text-foreground";
+
+export interface ProjectScopeMenuProps {
+  options: readonly ProjectScopeOption[];
+  projectByKey: ReadonlyMap<string, SidebarProjectSnapshot>;
+  scopedProjectKey: string | null;
+  onScopeChange: (projectKey: string | null) => void;
+  onAddProject: () => void;
+}
+
+/**
+ * The scope filter: one quiet line naming what the list is showing.
+ *
+ * Projects stopped being a tree, so this is where a project is addressed.
+ * Picking one narrows the list; right-clicking it opens what the project
+ * header used to hold (rename, grouping, path, removal), which keeps those
+ * off the menu itself. A menu scales with the pane where a chip row could
+ * not, so only "Add project" stays out here as a visible button.
+ */
+export const ProjectScopeMenu = memo(function ProjectScopeMenu(props: ProjectScopeMenuProps) {
+  const { options, projectByKey, scopedProjectKey, onScopeChange, onAddProject } = props;
+  const projectGroupingSettings = useSettings(selectProjectGroupingSettings);
+  const { updateSettings } = useUpdateSettings();
+  const [projectRenameTarget, setProjectRenameTarget] = useState<SidebarProjectGroupMember | null>(
+    null,
+  );
+  const [projectRenameTitle, setProjectRenameTitle] = useState("");
+  const [projectGroupingTarget, setProjectGroupingTarget] =
+    useState<SidebarProjectGroupMember | null>(null);
+  const [projectGroupingSelection, setProjectGroupingSelection] = useState<
+    SidebarProjectGroupingMode | "inherit"
+  >("inherit");
+  const { copyToClipboard: copyPathToClipboard } = useCopyToClipboard<{ path: string }>({
+    onCopy: (ctx) => {
+      toastManager.add({ type: "success", title: "Path copied", description: ctx.path });
+    },
+    onError: (error) => {
+      toastManager.add(
+        stackedThreadToast({
+          type: "error",
+          title: "Failed to copy path",
+          description: error instanceof Error ? error.message : "An error occurred.",
+        }),
+      );
+    },
+  });
+
+  const openProjectRenameDialog = useCallback((member: SidebarProjectGroupMember) => {
+    setProjectRenameTarget(member);
+    setProjectRenameTitle(member.name);
+  }, []);
+
+  const openProjectGroupingDialog = useCallback(
+    (member: SidebarProjectGroupMember) => {
+      const overrideKey = deriveProjectGroupingOverrideKey(member);
+      setProjectGroupingTarget(member);
+      setProjectGroupingSelection(
+        projectGroupingSettings.sidebarProjectGroupingOverrides?.[overrideKey] ?? "inherit",
+      );
+    },
+    [projectGroupingSettings.sidebarProjectGroupingOverrides],
+  );
+
+  const removeProject = useCallback(
+    async (member: SidebarProjectGroupMember, options: { force?: boolean } = {}): Promise<void> => {
+      const memberProjectRef = scopeProjectRef(member.environmentId, member.id);
+      const draftStore = useComposerDraftStore.getState();
+      const projectDraftThread = draftStore.getDraftThreadByProjectRef(memberProjectRef);
+      if (projectDraftThread) {
+        draftStore.clearDraftThread(projectDraftThread.draftId);
+      }
+      draftStore.clearProjectDraftThreadId(memberProjectRef);
+
+      const projectApi = readEnvironmentApi(member.environmentId);
+      if (!projectApi) {
+        throw new Error("Project API unavailable.");
+      }
+
+      await projectApi.orchestration.dispatchCommand({
+        type: "project.delete",
+        commandId: newCommandId(),
+        projectId: member.id,
+        ...(options.force === true ? { force: true } : {}),
+      });
+    },
+    [],
+  );
+
+  const handleRemoveProject = useCallback(
+    async (member: SidebarProjectGroupMember) => {
+      const api = readLocalApi();
+      if (!api) {
+        return;
+      }
+
+      const memberProjectRef = scopeProjectRef(member.environmentId, member.id);
+      const memberThreads = selectSidebarThreadsForProjectRefs(useStore.getState(), [
+        memberProjectRef,
+      ]);
+      if (memberThreads.length > 0) {
+        const warningToastId = toastManager.add(
+          stackedThreadToast({
+            type: "warning",
+            title: "Project is not empty",
+            description: "Delete all threads in this project before removing it.",
+            actionVariant: "destructive",
+            actionProps: {
+              children: "Delete anyway",
+              onClick: () => {
+                void (async () => {
+                  toastManager.close(warningToastId);
+                  await new Promise<void>((resolve) => {
+                    window.setTimeout(resolve, 180);
+                  });
+
+                  const latestProjectThreads = selectSidebarThreadsForProjectRefs(
+                    useStore.getState(),
+                    [memberProjectRef],
+                  );
+                  const confirmed = await api.dialogs.confirm(
+                    latestProjectThreads.length > 0
+                      ? [
+                          `Remove project "${member.name}" and delete its ${latestProjectThreads.length} thread${
+                            latestProjectThreads.length === 1 ? "" : "s"
+                          }?`,
+                          `Path: ${member.cwd}`,
+                          ...(member.environmentLabel
+                            ? [`Environment: ${member.environmentLabel}`]
+                            : []),
+                          "This permanently clears conversation history for those threads.",
+                          "This removes only this project entry.",
+                          "This action cannot be undone.",
+                        ].join("\n")
+                      : [
+                          `Remove project "${member.name}"?`,
+                          `Path: ${member.cwd}`,
+                          ...(member.environmentLabel
+                            ? [`Environment: ${member.environmentLabel}`]
+                            : []),
+                          "This removes only this project entry.",
+                        ].join("\n"),
+                  );
+                  if (!confirmed) {
+                    return;
+                  }
+
+                  await removeProject(member, { force: true });
+                })().catch((error) => {
+                  const message =
+                    error instanceof Error ? error.message : "Unknown error removing project.";
+                  console.error("Failed to remove project", {
+                    projectId: member.id,
+                    environmentId: member.environmentId,
+                    error,
+                  });
+                  toastManager.add(
+                    stackedThreadToast({
+                      type: "error",
+                      title: `Failed to remove "${member.name}"`,
+                      description: message,
+                    }),
+                  );
+                });
+              },
+            },
+          }),
+        );
+        return;
+      }
+
+      const message = [
+        `Remove project "${member.name}"?`,
+        `Path: ${member.cwd}`,
+        ...(member.environmentLabel ? [`Environment: ${member.environmentLabel}`] : []),
+        "This removes only this project entry.",
+      ].join("\n");
+      const confirmed = await api.dialogs.confirm(message);
+      if (!confirmed) {
+        return;
+      }
+
+      try {
+        await removeProject(member);
+      } catch (error) {
+        const message = error instanceof Error ? error.message : "Unknown error removing project.";
+        console.error("Failed to remove project", {
+          projectId: member.id,
+          environmentId: member.environmentId,
+          error,
+        });
+        toastManager.add(
+          stackedThreadToast({
+            type: "error",
+            title: `Failed to remove "${member.name}"`,
+            description: message,
+          }),
+        );
+      }
+    },
+    [removeProject],
+  );
+
+  const showProjectContextMenu = useCallback(
+    (project: SidebarProjectSnapshot, position: { x: number; y: number }) => {
+      // The General Chats system project is server-managed: rename, grouping,
+      // path, and removal do not apply (the server rejects them anyway).
+      if (project.kind === "general-chat") {
+        return;
+      }
+      void (async () => {
+        const api = readLocalApi();
+        if (!api) return;
+
+        const actionHandlers = new Map<string, () => Promise<void> | void>();
+        const makeLeaf = (
+          action: "rename" | "grouping" | "copy-path" | "delete",
+          member: SidebarProjectGroupMember,
+          options?: { destructive?: boolean },
+        ): ContextMenuItem<string> => {
+          const id = `${action}:${member.physicalProjectKey}`;
+          actionHandlers.set(id, () => {
+            switch (action) {
+              case "rename":
+                openProjectRenameDialog(member);
+                return;
+              case "grouping":
+                openProjectGroupingDialog(member);
+                return;
+              case "copy-path":
+                copyPathToClipboard(member.cwd, { path: member.cwd });
+                return;
+              case "delete":
+                return handleRemoveProject(member);
+            }
+          });
+
+          return {
+            id,
+            label: formatProjectMemberActionLabel(member, project.groupedProjectCount),
+            ...(options?.destructive ? { destructive: true } : {}),
+          };
+        };
+
+        const buildTargetedItem = (
+          action: "rename" | "grouping" | "copy-path" | "delete",
+          label: string,
+          options?: { destructive?: boolean },
+        ): ContextMenuItem<string> => {
+          if (project.memberProjects.length === 1) {
+            const singleMember = project.memberProjects[0]!;
+            return {
+              ...makeLeaf(action, singleMember, options),
+              label,
+            };
+          }
+
+          return {
+            id: `${action}:submenu`,
+            label,
+            children: project.memberProjects.map((member) => makeLeaf(action, member, options)),
+          };
+        };
+
+        const clicked = await api.contextMenu.show(
+          [
+            buildTargetedItem("rename", "Rename project"),
+            buildTargetedItem("grouping", "Project grouping…"),
+            buildTargetedItem("copy-path", "Copy Project Path"),
+            buildTargetedItem("delete", "Remove project", { destructive: true }),
+          ],
+          position,
+        );
+
+        if (!clicked) {
+          return;
+        }
+
+        await actionHandlers.get(clicked)?.();
+      })();
+    },
+    [copyPathToClipboard, handleRemoveProject, openProjectGroupingDialog, openProjectRenameDialog],
+  );
+
+  const closeProjectRenameDialog = useCallback(() => {
+    setProjectRenameTarget(null);
+    setProjectRenameTitle("");
+  }, []);
+
+  const submitProjectRename = useCallback(async () => {
+    if (!projectRenameTarget) {
+      return;
+    }
+
+    const trimmed = projectRenameTitle.trim();
+    if (trimmed.length === 0) {
+      toastManager.add({ type: "warning", title: "Project title cannot be empty" });
+      return;
+    }
+
+    if (trimmed === projectRenameTarget.name) {
+      closeProjectRenameDialog();
+      return;
+    }
+
+    const api = readEnvironmentApi(projectRenameTarget.environmentId);
+    if (!api) {
+      toastManager.add(
+        stackedThreadToast({
+          type: "error",
+          title: "Failed to rename project",
+          description: "Project API unavailable.",
+        }),
+      );
+      return;
+    }
+
+    try {
+      await api.orchestration.dispatchCommand({
+        type: "project.meta.update",
+        commandId: newCommandId(),
+        projectId: projectRenameTarget.id,
+        title: trimmed,
+      });
+      closeProjectRenameDialog();
+    } catch (error) {
+      toastManager.add(
+        stackedThreadToast({
+          type: "error",
+          title: "Failed to rename project",
+          description: error instanceof Error ? error.message : "An error occurred.",
+        }),
+      );
+    }
+  }, [closeProjectRenameDialog, projectRenameTarget, projectRenameTitle]);
+
+  const closeProjectGroupingDialog = useCallback(() => {
+    setProjectGroupingTarget(null);
+    setProjectGroupingSelection("inherit");
+  }, []);
+
+  const saveProjectGroupingPreference = useCallback(() => {
+    if (!projectGroupingTarget) {
+      return;
+    }
+
+    const overrideKey = deriveProjectGroupingOverrideKey(projectGroupingTarget);
+    const nextOverrides = { ...projectGroupingSettings.sidebarProjectGroupingOverrides };
+    if (projectGroupingSelection === "inherit") {
+      delete nextOverrides[overrideKey];
+    } else {
+      nextOverrides[overrideKey] = projectGroupingSelection;
+    }
+    updateSettings({ sidebarProjectGroupingOverrides: nextOverrides });
+    closeProjectGroupingDialog();
+  }, [
+    closeProjectGroupingDialog,
+    projectGroupingSelection,
+    projectGroupingSettings.sidebarProjectGroupingOverrides,
+    projectGroupingTarget,
+    updateSettings,
+  ]);
+
+  const showProjectContextMenuAt = useCallback(
+    (projectKey: string, position: { x: number; y: number }) => {
+      const project = projectByKey.get(projectKey);
+      if (!project) return;
+      showProjectContextMenu(project, position);
+    },
+    [projectByKey, showProjectContextMenu],
+  );
+  const handleProjectContextMenu = useCallback(
+    (event: React.MouseEvent, projectKey: string) => {
+      event.preventDefault();
+      showProjectContextMenuAt(projectKey, { x: event.clientX, y: event.clientY });
+    },
+    [showProjectContextMenuAt],
+  );
+
+  const scopedProject =
+    scopedProjectKey === null ? null : (projectByKey.get(scopedProjectKey) ?? null);
+
+  return (
+    <>
+      <div className="flex items-center gap-1 px-2 py-1">
+        <Menu>
+          <MenuTrigger
+            data-testid="inbox-scope-trigger"
+            className="flex h-7 min-w-0 flex-1 cursor-pointer items-center gap-2 rounded-md px-1 text-xs text-muted-foreground/80 transition-colors select-none hover:bg-sidebar-accent/60 hover:text-foreground focus-ring"
+            // Right-clicking the trigger addresses the project you are already
+            // scoped to, so the menu is not the only way in.
+            onContextMenu={(event: React.MouseEvent) => {
+              if (scopedProject) {
+                handleProjectContextMenu(event, scopedProject.projectKey);
+              }
+            }}
+          >
+            {scopedProject ? (
+              <ProjectFavicon
+                cwd={scopedProject.cwd}
+                environmentId={scopedProject.environmentId}
+                className="size-3.5 shrink-0"
+              />
+            ) : (
+              <FolderIcon className="size-3.5 shrink-0 text-muted-foreground/60" />
+            )}
+            <span className="min-w-0 flex-1 truncate text-left">
+              {scopedProject?.displayName ?? "All projects"}
+            </span>
+            <ChevronDownIcon className="size-3 shrink-0 text-muted-foreground/50" />
+          </MenuTrigger>
+          <MenuPopup align="start" side="bottom" className="min-w-56">
+            <MenuItem
+              data-testid="inbox-scope-all"
+              className={cn(
+                SCOPE_ITEM_CLASS_NAME,
+                scopedProjectKey === null && SCOPE_ITEM_SELECTED,
+              )}
+              onClick={() => {
+                onScopeChange(null);
+              }}
+            >
+              <FolderIcon className="size-3.5 shrink-0 text-muted-foreground/70" />
+              <span className="min-w-0 flex-1 truncate">All projects</span>
+            </MenuItem>
+            {options.map((option) => {
+              const project = projectByKey.get(option.key);
+              return (
+                <MenuItem
+                  key={option.key}
+                  data-testid={`inbox-scope-${option.key}`}
+                  className={cn(
+                    SCOPE_ITEM_CLASS_NAME,
+                    "group/scope-item",
+                    scopedProjectKey === option.key && SCOPE_ITEM_SELECTED,
+                  )}
+                  onClick={() => {
+                    onScopeChange(option.key);
+                  }}
+                  // Right-click keeps working; the button is the discoverable half.
+                  onContextMenu={(event: React.MouseEvent) => {
+                    handleProjectContextMenu(event, option.key);
+                  }}
+                >
+                  {project ? (
+                    <ProjectFavicon
+                      cwd={project.cwd}
+                      environmentId={project.environmentId}
+                      className="size-3.5 shrink-0"
+                    />
+                  ) : (
+                    <FolderIcon className="size-3.5 shrink-0 text-muted-foreground/70" />
+                  )}
+                  <span className="min-w-0 flex-1 truncate">{option.label}</span>
+                  {option.needsYouCount > 0 ? (
+                    <span className="shrink-0 font-mono text-[10px] text-amber-600 dark:text-amber-300/90">
+                      {option.needsYouCount}
+                    </span>
+                  ) : null}
+                  <button
+                    type="button"
+                    data-testid={`inbox-scope-actions-${option.key}`}
+                    aria-label={`Manage ${option.label}`}
+                    className="-mr-1 inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-sm text-muted-foreground/60 opacity-0 transition-opacity hover:text-foreground focus-ring group-hover/scope-item:opacity-100 group-focus-within/scope-item:opacity-100 pointer-coarse:opacity-100"
+                    onClick={(event) => {
+                      event.preventDefault();
+                      event.stopPropagation();
+                      const rect = event.currentTarget.getBoundingClientRect();
+                      showProjectContextMenuAt(option.key, {
+                        x: Math.round(rect.right),
+                        y: Math.round(rect.bottom),
+                      });
+                    }}
+                  >
+                    <EllipsisIcon className="size-3.5" />
+                  </button>
+                </MenuItem>
+              );
+            })}
+            <MenuSeparator />
+            <MenuItem onClick={onAddProject}>
+              <FolderPlusIcon />
+              <span className="min-w-0 flex-1 truncate">Add project…</span>
+            </MenuItem>
+          </MenuPopup>
+        </Menu>
+        <Tooltip>
+          <TooltipTrigger
+            render={
+              <button
+                type="button"
+                aria-label="Add project"
+                data-testid="sidebar-add-project-trigger"
+                className="inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground/60 transition-colors hover:bg-sidebar-accent/60 hover:text-foreground focus-ring"
+                onClick={onAddProject}
+              />
+            }
+          >
+            <FolderPlusIcon className="size-3.5" />
+          </TooltipTrigger>
+          <TooltipPopup side="bottom">Add project</TooltipPopup>
+        </Tooltip>
+      </div>
+
+      <Dialog
+        open={projectRenameTarget !== null}
+        onOpenChange={(open) => {
+          if (!open) {
+            closeProjectRenameDialog();
+          }
+        }}
+      >
+        <DialogPopup className="max-w-lg">
+          <DialogHeader>
+            <DialogTitle>Rename project</DialogTitle>
+            <DialogDescription>
+              {projectRenameTarget
+                ? `Update the title for ${projectRenameTarget.cwd}.`
+                : "Update the project title."}
+            </DialogDescription>
+          </DialogHeader>
+          <DialogPanel className="space-y-4">
+            <div className="grid gap-1.5">
+              <span className="text-xs font-medium text-foreground">Project title</span>
+              <Input
+                aria-label="Project title"
+                value={projectRenameTitle}
+                onChange={(event) => setProjectRenameTitle(event.target.value)}
+                onKeyDown={(event) => {
+                  if (event.key === "Enter") {
+                    event.preventDefault();
+                    void submitProjectRename();
+                  }
+                }}
+              />
+            </div>
+            {projectRenameTarget?.environmentLabel ? (
+              <p className="text-xs text-muted-foreground">
+                Environment: {projectRenameTarget.environmentLabel}
+              </p>
+            ) : null}
+          </DialogPanel>
+          <DialogFooter>
+            <Button variant="outline" onClick={closeProjectRenameDialog}>
+              Cancel
+            </Button>
+            <Button onClick={() => void submitProjectRename()}>Save</Button>
+          </DialogFooter>
+        </DialogPopup>
+      </Dialog>
+
+      <Dialog
+        open={projectGroupingTarget !== null}
+        onOpenChange={(open) => {
+          if (!open) {
+            closeProjectGroupingDialog();
+          }
+        }}
+      >
+        <DialogPopup className="max-w-lg">
+          <DialogHeader>
+            <DialogTitle>Project grouping</DialogTitle>
+            <DialogDescription>
+              {projectGroupingTarget
+                ? `Choose how ${projectGroupingTarget.cwd} should be grouped in the sidebar.`
+                : "Choose how this project should be grouped in the sidebar."}
+            </DialogDescription>
+          </DialogHeader>
+          <DialogPanel className="space-y-4">
+            <div className="grid gap-1.5">
+              <span className="text-xs font-medium text-foreground">Grouping rule</span>
+              <Select
+                value={projectGroupingSelection}
+                onValueChange={(value) => {
+                  if (
+                    value === "inherit" ||
+                    value === "repository" ||
+                    value === "repository_path" ||
+                    value === "separate"
+                  ) {
+                    setProjectGroupingSelection(value);
+                  }
+                }}
+              >
+                <SelectTrigger className="w-full" aria-label="Project grouping rule">
+                  <SelectValue>
+                    {projectGroupingSelection === "inherit"
+                      ? `Use global default (${PROJECT_GROUPING_MODE_LABELS[projectGroupingSettings.sidebarProjectGroupingMode]})`
+                      : PROJECT_GROUPING_MODE_LABELS[projectGroupingSelection]}
+                  </SelectValue>
+                </SelectTrigger>
+                <SelectPopup align="end" alignItemWithTrigger={false}>
+                  <SelectItem hideIndicator value="inherit">
+                    Use global default
+                  </SelectItem>
+                  <SelectItem hideIndicator value="repository">
+                    {PROJECT_GROUPING_MODE_LABELS.repository}
+                  </SelectItem>
+                  <SelectItem hideIndicator value="repository_path">
+                    {PROJECT_GROUPING_MODE_LABELS.repository_path}
+                  </SelectItem>
+                  <SelectItem hideIndicator value="separate">
+                    {PROJECT_GROUPING_MODE_LABELS.separate}
+                  </SelectItem>
+                </SelectPopup>
+              </Select>
+            </div>
+            <p className="text-xs text-muted-foreground">
+              {projectGroupingSelection === "inherit"
+                ? projectGroupingModeDescription(projectGroupingSettings.sidebarProjectGroupingMode)
+                : projectGroupingModeDescription(projectGroupingSelection)}
+            </p>
+          </DialogPanel>
+          <DialogFooter>
+            <Button variant="outline" onClick={closeProjectGroupingDialog}>
+              Cancel
+            </Button>
+            <Button onClick={saveProjectGroupingPreference}>Save</Button>
+          </DialogFooter>
+        </DialogPopup>
+      </Dialog>
+    </>
+  );
+});
diff --git a/apps/web/src/components/sidebar/ThreadHoverCard.browser.tsx b/apps/web/src/components/sidebar/ThreadHoverCard.browser.tsx
index 204d26c2..ea60c664 100644
--- a/apps/web/src/components/sidebar/ThreadHoverCard.browser.tsx
+++ b/apps/web/src/components/sidebar/ThreadHoverCard.browser.tsx
@@ -1,11 +1,36 @@
+// The card's width and truncation are CSS, so the production stylesheet is
+// part of the behaviour under test.
+import "../../index.css";
+
 import { EnvironmentId, ProjectId, ProviderDriverKind, ThreadId } from "@threadlines/contracts";
 import { page } from "vite-plus/test/browser";
-import { describe, expect, it } from "vite-plus/test";
+import { describe, expect, it, vi } from "vite-plus/test";
+
+// The card asks git for the checkout's current ref; the test decides what it
+// hears back.
+const gitStatusRef = vi.hoisted(() => ({ current: null as string | null }));
+
+vi.mock("../../lib/gitStatusState", () => ({
+  useGitStatus: () => ({
+    data: gitStatusRef.current === null ? null : { refName: gitStatusRef.current },
+    error: null,
+    cause: null,
+    isPending: false,
+  }),
+  useGitStatuses: () => new Map(),
+  refreshGitStatus: () => Promise.resolve(null),
+  refreshLocalGitStatus: () => Promise.resolve(null),
+  resetGitStatusStateForTests: () => undefined,
+}));
+
+function setGitStatusRefName(refName: string | null): void {
+  gitStatusRef.current = refName;
+}
 import { render } from "vitest-browser-react";
 
 import type { ThreadStatusPill } from "../Sidebar.logic";
 import type { SidebarThreadSummary } from "../../types";
-import { ThreadHoverCard } from "./ThreadHoverCard";
+import { ThreadHoverCard, ThreadHoverCardProvider } from "./ThreadHoverCard";
 
 const ENVIRONMENT_ID = EnvironmentId.make("environment-local");
 
@@ -36,13 +61,31 @@ function status(label: ThreadStatusPill["label"]): ThreadStatusPill {
   return { label, colorClass: "", dotClass: "bg-primary-graph", pulse: false };
 }
 
+async function waitForProductionStyles(): Promise<void> {
+  await vi.waitFor(
+    () => {
+      expect(
+        getComputedStyle(document.documentElement).getPropertyValue("--background").trim(),
+      ).not.toBe("");
+    },
+    { timeout: 4_000, interval: 16 },
+  );
+}
+
 async function openCard(summary: SidebarThreadSummary, pill: ThreadStatusPill | null) {
+  await waitForProductionStyles();
   render(
-    <ThreadHoverCard thread={summary} status={pill}>
-      <button type="button" data-testid="hover-trigger">
-        row
-      </button>
-    </ThreadHoverCard>,
+    // The trigger and the shared card mount separately in production too:
+    // rows carry triggers, the surface mounts one ThreadHoverCardCard.
+    // A fresh provider per render, exactly like a real surface: no handle
+    // state survives between tests.
+    <ThreadHoverCardProvider>
+      <ThreadHoverCard thread={summary} status={pill}>
+        <button type="button" data-testid="hover-trigger">
+          row
+        </button>
+      </ThreadHoverCard>
+    </ThreadHoverCardProvider>,
   );
   await page.getByTestId("hover-trigger").hover();
   return page.getByTestId("thread-hover-card");
@@ -81,6 +124,44 @@ describe("ThreadHoverCard", () => {
     await expect.element(card).toHaveTextContent("feature/deck-sidebar");
   });
 
+  it("falls back to the checkout's current ref when the thread pinned no branch", async () => {
+    // The row prints only a pinned branch, so a branchless thread would
+    // otherwise never say which ref its work is on.
+    setGitStatusRefName("main");
+    try {
+      const card = await openCard(thread({ branch: null }), null);
+
+      // Named as what it is: where the checkout sits, not a branch the thread
+      // pinned.
+      await expect.element(card).toHaveTextContent("main · checkout");
+    } finally {
+      setGitStatusRefName(null);
+    }
+  });
+
+  it("truncates an overlong title and branch instead of blowing the card open", async () => {
+    const longTitle =
+      "Investigate why the orchestration reactor occasionally replays a settled turn " +
+      "after a reconnect, and write up what the projection actually guarantees";
+    const longBranch = `feature/${"very-long-branch-name-segment-".repeat(5)}tail`;
+
+    const card = await openCard(thread({ title: longTitle, branch: longBranch }), null);
+    await expect.element(card).toBeInTheDocument();
+
+    const element = document.querySelector<HTMLElement>('[data-testid="thread-hover-card"]');
+    expect(element).not.toBeNull();
+    // The card keeps its own width whatever it is handed.
+    expect(element!.getBoundingClientRect().width).toBeLessThanOrEqual(280);
+
+    const branchLine = [...element!.querySelectorAll("span")].find((node) =>
+      node.textContent?.startsWith("feature/"),
+    );
+    expect(branchLine, "the branch row should render").not.toBeUndefined();
+    // Clipped on one line rather than wrapped into a wall of text.
+    expect(branchLine!.scrollWidth).toBeGreaterThan(branchLine!.clientWidth);
+    expect(branchLine!.getBoundingClientRect().height).toBeLessThan(24);
+  });
+
   it("falls back to Idle when the thread has no status", async () => {
     const card = await openCard(thread(), null);
 
diff --git a/apps/web/src/components/sidebar/ThreadHoverCard.tsx b/apps/web/src/components/sidebar/ThreadHoverCard.tsx
index 4bb490aa..6423652d 100644
--- a/apps/web/src/components/sidebar/ThreadHoverCard.tsx
+++ b/apps/web/src/components/sidebar/ThreadHoverCard.tsx
@@ -1,6 +1,6 @@
 import { scopeProjectRef, scopeThreadRef } from "@threadlines/client-runtime";
-import { GitBranchIcon, ServerIcon } from "lucide-react";
-import { useMemo, type ReactNode } from "react";
+import { GitBranchIcon, LaptopIcon, ServerIcon } from "lucide-react";
+import { createContext, useContext, useMemo, useState, type ReactNode } from "react";
 
 import { PROVIDER_ICON_BY_PROVIDER } from "../chat/providerIconUtils";
 import { PROVIDER_OPTIONS } from "../../session-logic";
@@ -10,12 +10,34 @@ import {
 } from "../../environments/runtime";
 import { usePrimaryEnvironmentId } from "../../environments/primary";
 import { selectProjectByRef, useStore } from "../../store";
+import { useGitStatus } from "../../lib/gitStatusState";
+import { resolveThreadWorkingCwd } from "@threadlines/shared/threadCwd";
 import { createThreadSelectorByRef } from "../../storeSelectors";
 import { formatRelativeTimeLabel } from "../../timestampFormat";
 import type { SidebarThreadSummary } from "../../types";
 import type { ThreadStatusPill } from "../Sidebar.logic";
 import { ProjectFavicon } from "../ProjectFavicon";
-import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
+import {
+  PreviewCard,
+  PreviewCardPopup,
+  PreviewCardTrigger,
+  createPreviewCardHandle,
+} from "../ui/previewCard";
+
+export interface ThreadHoverCardPayload {
+  thread: SidebarThreadSummary;
+  status: ThreadStatusPill | null;
+}
+
+/**
+ * One handle per surface, not per app. The sidebar and the chats page can be
+ * mounted at once, and two roots sharing one handle is undefined behaviour --
+ * so each surface creates its own through context, and every trigger inside
+ * points at its surface's card. Within a surface the card never closes between
+ * rows: the initial delay is paid once, then payload swaps are instant.
+ */
+type ThreadCardHandle = ReturnType<typeof createPreviewCardHandle<ThreadHoverCardPayload>>;
+const ThreadCardHandleContext = createContext<ThreadCardHandle | null>(null);
 import {
   HOVER_CARD_POPUP_CLASS_NAME,
   HoverCardDetailRow,
@@ -33,17 +55,36 @@ import {
  * sidebar already holds, except the model, which is only known once the
  * thread's shell has loaded and is otherwise reported as the provider.
  */
+/**
+ * A row's half of the card: a trigger carrying its thread as payload.
+ *
+ * One shared root lives in ThreadHoverCardProvider; while the card is open,
+ * moving between rows swaps the payload without closing, so the initial delay
+ * is paid once and neighbours change instantly -- the group warmth the old
+ * tooltip provider gave, restored architecturally.
+ */
 export function ThreadHoverCard({
   thread,
   status,
-  side = "right",
   children,
-}: {
-  thread: SidebarThreadSummary;
-  status: ThreadStatusPill | null;
-  side?: "right" | "left" | "top" | "bottom";
-  children: ReactNode;
-}) {
+}: ThreadHoverCardPayload & { children: ReactNode }) {
+  const handle = useContext(ThreadCardHandleContext);
+  // Outside a provider there is no card to point at; the row renders bare
+  // rather than crashing a surface that only wanted rows.
+  if (handle === null) {
+    return <>{children}</>;
+  }
+  return (
+    <PreviewCardTrigger
+      handle={handle}
+      closeDelay={120}
+      payload={{ thread, status } satisfies ThreadHoverCardPayload}
+      render={children as never}
+    />
+  );
+}
+
+function ThreadHoverCardContent({ thread, status }: ThreadHoverCardPayload) {
   const projectRef = useMemo(
     () => scopeProjectRef(thread.environmentId, thread.projectId),
     [thread.environmentId, thread.projectId],
@@ -66,7 +107,9 @@ export function ThreadHoverCard({
   const savedLabel = useSavedEnvironmentRegistryStore(
     (state) => state.byId[thread.environmentId]?.label ?? null,
   );
-  const environmentLabel = isRemote ? (runtimeLabel ?? savedLabel ?? "Remote") : null;
+  // The machine the work runs on, named whenever we know its name -- local
+  // included. "Which box is this on" is the question a hover card exists for.
+  const environmentLabel = runtimeLabel ?? savedLabel ?? (isRemote ? "Remote" : null);
 
   const provider = thread.session?.provider ?? null;
   const ProviderIcon = provider ? (PROVIDER_ICON_BY_PROVIDER[provider] ?? null) : null;
@@ -81,47 +124,95 @@ export function ThreadHoverCard({
   // A worktree is the more specific fact when present: it implies the branch
   // and tells you the checkout is isolated.
   const worktreeName = thread.worktreePath ? thread.worktreePath.split("/").pop() : null;
+  // The row prints only a pinned branch; here there is room to answer the
+  // question a branchless thread leaves open -- which ref its checkout is on.
+  const gitStatus = useGitStatus({
+    environmentId: thread.environmentId,
+    cwd: resolveThreadWorkingCwd({
+      projectCwd: backingProject?.cwd ?? null,
+      worktreePath: thread.worktreePath,
+      effectiveCwd: thread.effectiveCwd,
+    }),
+  });
+  const checkoutRef = gitStatus.data?.refName ?? null;
+  const branch = thread.branch ?? checkoutRef;
+  // Two different facts share one row, so the row says which one it is: a
+  // pinned branch belongs to the thread, a checkout ref just happens to be
+  // where its working copy sits right now.
+  const isCheckoutRef = thread.branch === null && checkoutRef !== null;
 
   return (
-    <Tooltip>
-      <TooltipTrigger render={children as never} />
-      <TooltipPopup
-        side={side}
-        sideOffset={8}
-        align="start"
-        className={HOVER_CARD_POPUP_CLASS_NAME}
-        data-testid="thread-hover-card"
-      >
-        <HoverCardTitle>{thread.title}</HoverCardTitle>
-        <HoverCardStatusLine status={status} timestamp={formatRelativeTimeLabel(activityAt)} />
-        <HoverCardDetails>
-          {project ? (
-            <HoverCardDetailRow
-              icon={<ProjectFavicon cwd={project.cwd} environmentId={project.environmentId} />}
-            >
-              {project.name}
-            </HoverCardDetailRow>
-          ) : null}
-          {environmentLabel ? (
-            <HoverCardDetailRow icon={<ServerIcon className="size-3.5" />}>
-              {environmentLabel}
-            </HoverCardDetailRow>
-          ) : null}
-          {thread.branch || worktreeName ? (
-            <HoverCardDetailRow icon={<GitBranchIcon className="size-3.5" />}>
-              {thread.branch ?? worktreeName}
-              {worktreeName && thread.branch ? (
-                <span className="ml-1.5 text-muted-foreground/50">worktree</span>
-              ) : null}
-            </HoverCardDetailRow>
-          ) : null}
-          {ProviderIcon || modelLabel || providerLabel ? (
-            <HoverCardDetailRow icon={ProviderIcon ? <ProviderIcon className="size-3.5" /> : null}>
-              {modelLabel ?? providerLabel}
-            </HoverCardDetailRow>
-          ) : null}
-        </HoverCardDetails>
-      </TooltipPopup>
-    </Tooltip>
+    <>
+      <HoverCardTitle>{thread.title}</HoverCardTitle>
+      <HoverCardStatusLine status={status} timestamp={formatRelativeTimeLabel(activityAt)} />
+      <HoverCardDetails>
+        {project ? (
+          <HoverCardDetailRow
+            icon={<ProjectFavicon cwd={project.cwd} environmentId={project.environmentId} />}
+          >
+            {project.name}
+          </HoverCardDetailRow>
+        ) : null}
+        {environmentLabel ? (
+          <HoverCardDetailRow
+            icon={
+              isRemote ? <ServerIcon className="size-3.5" /> : <LaptopIcon className="size-3.5" />
+            }
+          >
+            {environmentLabel}
+          </HoverCardDetailRow>
+        ) : null}
+        {branch || worktreeName ? (
+          <HoverCardDetailRow
+            className="font-mono text-[11px]"
+            icon={<GitBranchIcon className="size-3.5" />}
+          >
+            {branch ?? worktreeName}
+            {/* A real space, not a margin: the annotation has to read as
+                  part of the sentence to a screen reader too. */}
+            {isCheckoutRef ? (
+              <span className="font-sans text-muted-foreground/50">{" · checkout"}</span>
+            ) : null}
+            {worktreeName && branch ? (
+              <span className="font-sans text-muted-foreground/50">{" · worktree"}</span>
+            ) : null}
+          </HoverCardDetailRow>
+        ) : null}
+        {ProviderIcon || modelLabel || providerLabel ? (
+          <HoverCardDetailRow icon={ProviderIcon ? <ProviderIcon className="size-3.5" /> : null}>
+            {modelLabel ?? providerLabel}
+          </HoverCardDetailRow>
+        ) : null}
+      </HoverCardDetails>
+    </>
+  );
+}
+
+/** A surface's card: wraps its rows, owns their one shared popup. */
+export function ThreadHoverCardProvider({
+  side = "right",
+  children,
+}: {
+  side?: "right" | "bottom";
+  children: ReactNode;
+}) {
+  const [handle] = useState(() => createPreviewCardHandle<ThreadHoverCardPayload>());
+  return (
+    <ThreadCardHandleContext.Provider value={handle}>
+      {children}
+      <PreviewCard handle={handle}>
+        {({ payload }: { payload: ThreadHoverCardPayload | undefined }) => (
+          <PreviewCardPopup
+            side={side}
+            sideOffset={8}
+            align="start"
+            className={HOVER_CARD_POPUP_CLASS_NAME}
+            data-testid="thread-hover-card"
+          >
+            {payload ? <ThreadHoverCardContent {...payload} /> : null}
+          </PreviewCardPopup>
+        )}
+      </PreviewCard>
+    </ThreadCardHandleContext.Provider>
   );
 }
diff --git a/apps/web/src/components/sidebar/hoverCard.tsx b/apps/web/src/components/sidebar/hoverCard.tsx
index 1d89e6a2..c661e912 100644
--- a/apps/web/src/components/sidebar/hoverCard.tsx
+++ b/apps/web/src/components/sidebar/hoverCard.tsx
@@ -10,11 +10,17 @@ import { TooltipProvider } from "../ui/tooltip";
  * card read as the same object with different contents.
  */
 export const HOVER_CARD_POPUP_CLASS_NAME =
-  "w-64 rounded-lg p-3 text-left text-popover-foreground text-sm shadow-none elevate-popover";
+  // w-56, not w-64: every row inside truncates, so width is a choice about
+  // density, and 224px holds the longest real label (a machine name) while
+  // matching the competitor's snugness. rounded-md per the one-radius rule --
+  // this card was the last rounded-lg in the sidebar's orbit.
+  "w-56 rounded-md p-2.5 text-left text-popover-foreground text-sm shadow-none elevate-popover";
 
 export function HoverCardTitle({ children }: { children: ReactNode }) {
   return (
-    <p className="mb-2 line-clamp-2 text-xs font-medium leading-snug text-foreground">{children}</p>
+    <p className="mb-1.5 line-clamp-2 text-xs font-medium leading-tight text-foreground">
+      {children}
+    </p>
   );
 }
 
@@ -29,7 +35,7 @@ export function HoverCardStatusLine({
   timestamp: string | null;
 }) {
   return (
-    <div className="mb-2 flex items-center gap-2 border-b border-border/60 pb-2 text-xs">
+    <div className="mb-1.5 flex items-center gap-2 border-b border-border/60 pb-1.5 text-xs leading-tight">
       <ThreadStatusDot status={status} />
       <span className="min-w-0 flex-1 truncate text-foreground/80">
         {status ? status.label : idleLabel}
@@ -51,7 +57,7 @@ export function HoverCardDetailRow({
   className?: string;
 }) {
   return (
-    <div className="flex min-w-0 items-center gap-2 text-xs text-muted-foreground">
+    <div className="flex min-w-0 items-center gap-2 text-xs leading-tight text-muted-foreground">
       <span className="flex size-3.5 shrink-0 items-center justify-center text-muted-foreground/70">
         {icon}
       </span>
@@ -61,7 +67,7 @@ export function HoverCardDetailRow({
 }
 
 export function HoverCardDetails({ children }: { children: ReactNode }) {
-  return <div className="flex flex-col gap-1.5">{children}</div>;
+  return <div className="flex flex-col gap-1">{children}</div>;
 }
 
 /**
diff --git a/apps/web/src/components/ui/previewCard.tsx b/apps/web/src/components/ui/previewCard.tsx
new file mode 100644
index 00000000..5d8e1074
--- /dev/null
+++ b/apps/web/src/components/ui/previewCard.tsx
@@ -0,0 +1,54 @@
+import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card";
+
+import { cn } from "~/lib/utils";
+
+/**
+ * The hover-card primitive, distinct from Tooltip on purpose.
+ *
+ * A tooltip names the thing under the pointer; a preview card is a surface you
+ * can move onto and read. Building the thread card on Tooltip put it in the
+ * same one-at-a-time group as the row's action-button tooltips, so hovering
+ * "Wrap up" evicted the card for the row it belonged to -- and leaving the
+ * trigger closed the card before it could be read. PreviewCard has neither
+ * problem: it is groupless, and it stays open while the pointer is over the
+ * popup.
+ */
+export const PreviewCard = PreviewCardPrimitive.Root;
+export const PreviewCardTrigger = PreviewCardPrimitive.Trigger;
+export const createPreviewCardHandle = PreviewCardPrimitive.createHandle;
+
+export function PreviewCardPopup({
+  className,
+  side,
+  sideOffset,
+  align,
+  children,
+  ...props
+}: PreviewCardPrimitive.Popup.Props & {
+  side?: PreviewCardPrimitive.Positioner.Props["side"];
+  sideOffset?: PreviewCardPrimitive.Positioner.Props["sideOffset"];
+  align?: PreviewCardPrimitive.Positioner.Props["align"];
+}) {
+  return (
+    <PreviewCardPrimitive.Portal>
+      <PreviewCardPrimitive.Positioner
+        align={align}
+        side={side}
+        sideOffset={sideOffset}
+        className="z-50 max-w-(--available-width)"
+        data-slot="preview-card-positioner"
+      >
+        <PreviewCardPrimitive.Popup
+          className={cn(
+            "relative origin-(--transform-origin) rounded-md border bg-popover not-dark:bg-clip-padding text-popover-foreground text-xs shadow-md/5 transition-[scale,opacity] data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0",
+            className,
+          )}
+          data-slot="preview-card-popup"
+          {...props}
+        >
+          {children}
+        </PreviewCardPrimitive.Popup>
+      </PreviewCardPrimitive.Positioner>
+    </PreviewCardPrimitive.Portal>
+  );
+}
diff --git a/apps/web/src/hooks/useAutoCollapseSidebar.test.ts b/apps/web/src/hooks/useAutoCollapseSidebar.test.ts
deleted file mode 100644
index 8664133c..00000000
--- a/apps/web/src/hooks/useAutoCollapseSidebar.test.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { describe, expect, it } from "vitest";
-
-import { resolveAutoCollapse } from "./useAutoCollapseSidebar";
-
-/**
- * The whole feature is the restraint. Collapsing is one line; not doing it
- * again after the user has said otherwise is what makes it tolerable.
- */
-describe("resolveAutoCollapse", () => {
-  const base = { squeezed: true, expanded: true, collapsedByUs: false, overruled: false };
-
-  it("folds the sidebar when both panels squeeze the chat", () => {
-    expect(resolveAutoCollapse(base)).toEqual({ collapse: true, overrule: false });
-  });
-
-  it("leaves an already-collapsed sidebar alone", () => {
-    expect(resolveAutoCollapse({ ...base, expanded: false })).toEqual({
-      collapse: false,
-      overrule: false,
-    });
-  });
-
-  it("does nothing when only one panel is open", () => {
-    expect(resolveAutoCollapse({ ...base, squeezed: false })).toEqual({
-      collapse: false,
-      overrule: false,
-    });
-  });
-
-  it("treats expanding it back as being told to stop", () => {
-    // The user reached for the control while still squeezed. That is a
-    // decision, and it outranks ours.
-    expect(resolveAutoCollapse({ ...base, collapsedByUs: true })).toEqual({
-      collapse: false,
-      overrule: true,
-    });
-  });
-
-  it("never collapses again once overruled", () => {
-    // The second unrequested collapse is the one that makes people stop
-    // trusting the sidebar.
-    expect(resolveAutoCollapse({ ...base, overruled: true })).toEqual({
-      collapse: false,
-      overrule: false,
-    });
-    expect(resolveAutoCollapse({ ...base, overruled: true, collapsedByUs: true })).toEqual({
-      collapse: false,
-      overrule: false,
-    });
-  });
-});
diff --git a/apps/web/src/hooks/useAutoCollapseSidebar.ts b/apps/web/src/hooks/useAutoCollapseSidebar.ts
deleted file mode 100644
index 70013982..00000000
--- a/apps/web/src/hooks/useAutoCollapseSidebar.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import { useEffect, useRef } from "react";
-
-/**
- * Folds the sidebar down to its rail when the chat is squeezed between two
- * panels, and then gets out of the way.
- *
- * With source control and the browser both open the chat column is the thing
- * that pays, and it is the column the work is actually in. The rail gives back
- * around two hundred pixels without losing anything: the destinations and the
- * projects are all still there as glyphs.
- *
- * The restraint is the important half. It collapses once, on the way in, and
- * never fights you: expand the sidebar yourself and it stays expanded, even
- * with both panels still open. Auto-behaviour that re-applies itself is worse
- * than none, because the second time it happens you stop trusting the control.
- */
-export function resolveAutoCollapse(input: {
-  /** Both panels open, and the chat is worth protecting. */
-  readonly squeezed: boolean;
-  /** Whether the sidebar is expanded right now. */
-  readonly expanded: boolean;
-  /** Whether this hook is what collapsed it. */
-  readonly collapsedByUs: boolean;
-  /** Whether the user has since overruled us. */
-  readonly overruled: boolean;
-}): { readonly collapse: boolean; readonly overrule: boolean } {
-  if (input.overruled) {
-    return { collapse: false, overrule: false };
-  }
-  // Expanded while squeezed, having been folded by us, means somebody reached
-  // for it deliberately. That is the last time we touch it.
-  if (input.squeezed && input.expanded && input.collapsedByUs) {
-    return { collapse: false, overrule: true };
-  }
-  return { collapse: input.squeezed && input.expanded && !input.collapsedByUs, overrule: false };
-}
-
-export function useAutoCollapseSidebar(input: {
-  readonly squeezed: boolean;
-  readonly expanded: boolean;
-  readonly setExpanded: (expanded: boolean) => void;
-}): void {
-  const { squeezed, expanded, setExpanded } = input;
-  const collapsedByUs = useRef(false);
-  const overruled = useRef(false);
-
-  useEffect(() => {
-    // Leaving the squeeze resets the arrangement: the next time both panels are
-    // open is a new situation, not a continuation of the one you overruled.
-    if (!squeezed) {
-      collapsedByUs.current = false;
-      overruled.current = false;
-      return;
-    }
-    const next = resolveAutoCollapse({
-      squeezed,
-      expanded,
-      collapsedByUs: collapsedByUs.current,
-      overruled: overruled.current,
-    });
-    if (next.overrule) {
-      overruled.current = true;
-      return;
-    }
-    if (next.collapse) {
-      collapsedByUs.current = true;
-      setExpanded(false);
-    }
-  }, [squeezed, expanded, setExpanded]);
-}
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 29b013bc..3a69ae63 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -294,50 +294,6 @@ html.electron {
   --app-window-resize-edge-inset: 6px;
 }
 
-/* macOS traffic lights are wider than the collapsed rail, so painting the rail
-   colour behind them splits the titlebar into two greys that meet mid-button.
-   Start the rail below the titlebar instead, leaving one continuous strip
-   across the top. Only in Electron: nothing else draws window controls. */
-html.electron.mac [data-collapsible="icon"][data-side="left"] [data-slot="sidebar-container"] {
-  /* The right edge is drawn as a background layer rather than a border so it
-     can start below the titlebar too; a real border spans the full height and
-     would strike the window controls. */
-  border-right-color: transparent;
-  background:
-    /* the vertical edge, starting where the rail surface does */
-    linear-gradient(
-        to bottom,
-        transparent 0,
-        transparent var(--chat-header-bottom),
-        var(--border) var(--chat-header-bottom)
-      )
-      right / 1px 100% no-repeat,
-    /* the divider, drawn here rather than on the inner element so it reaches
-       across the edge strip too: painted on the inner it stopped one pixel
-       short and left a hole exactly where it met the chat header's rule */
-    linear-gradient(
-      to bottom,
-      transparent 0,
-      transparent calc(var(--chat-header-bottom) - 1px),
-      var(--border) calc(var(--chat-header-bottom) - 1px),
-      var(--border) var(--chat-header-bottom),
-      transparent var(--chat-header-bottom)
-    );
-}
-
-/* The rail surface itself lives on the inner element, which paints over the
-   container, so the titlebar cutout has to be applied here as well. */
-html.electron.mac [data-collapsible="icon"][data-side="left"] [data-slot="sidebar-inner"] {
-  /* Surface only; the divider above it belongs to the container so it can span
-     the full width. */
-  background: linear-gradient(
-    to bottom,
-    transparent 0,
-    transparent var(--chat-header-bottom),
-    var(--rail) var(--chat-header-bottom)
-  );
-}
-
 body {
   font-family: var(--font-sans);
   margin: 0;
diff --git a/apps/web/src/routes/_chat.$environmentId.$threadId.tsx b/apps/web/src/routes/_chat.$environmentId.$threadId.tsx
index e47dd656..767a5add 100644
--- a/apps/web/src/routes/_chat.$environmentId.$threadId.tsx
+++ b/apps/web/src/routes/_chat.$environmentId.$threadId.tsx
@@ -124,9 +124,10 @@ function ChatThreadRouteView() {
   const serverThreadHasPromotableActivity = threadHasPromotableServerActivity(serverThread);
   const environmentHasAnyThreads = environmentHasServerThreads || environmentHasDraftThreads;
   const diffOpen = search.diff === "1";
-  const rawSourceControlOpen = isSourceControlPanelOpen(search, {
-    defaultOpen: !shouldUseDiffSheet,
-  });
+  // Closed until asked for. It used to default open on desktop widths, which
+  // spent a third of the window on a panel most turns never touch; the toggle
+  // and the explicit ?sourceControl=1 both still open it.
+  const rawSourceControlOpen = isSourceControlPanelOpen(search, { defaultOpen: false });
   const sourceControlThread = serverThread ?? draftThread;
   const sourceControlProjectRef = sourceControlThread
     ? scopeProjectRef(sourceControlThread.environmentId, sourceControlThread.projectId)
diff --git a/apps/web/src/timestampFormat.test.ts b/apps/web/src/timestampFormat.test.ts
index c68d5b7e..ff31eec8 100644
--- a/apps/web/src/timestampFormat.test.ts
+++ b/apps/web/src/timestampFormat.test.ts
@@ -2,6 +2,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vite-plus/test"
 
 import {
   formatElapsedDurationLabel,
+  formatWorkingDurationLabel,
   formatExpiresInLabel,
   formatRelativeTimeUntilLabel,
   getTimestampFormatOptions,
@@ -90,6 +91,20 @@ describe("formatExpiresInLabel", () => {
   });
 });
 
+describe("formatWorkingDurationLabel", () => {
+  it("always reads as a duration, including the first seconds of a run", () => {
+    const now = Date.parse("2026-04-07T12:00:00.000Z");
+    const at = (iso: string) => formatWorkingDurationLabel(iso, now);
+
+    // The relative formatter would say "just now" here, which is not a length.
+    expect(at("2026-04-07T12:00:00.000Z")).toBe("0s");
+    expect(at("2026-04-07T11:59:57.000Z")).toBe("3s");
+    expect(at("2026-04-07T11:58:55.000Z")).toBe("1m 5s");
+    expect(at("2026-04-07T11:55:00.000Z")).toBe("5m");
+    expect(at("2026-04-07T10:30:00.000Z")).toBe("1h 30m");
+  });
+});
+
 describe("formatElapsedDurationLabel", () => {
   beforeEach(() => {
     vi.useFakeTimers();
diff --git a/apps/web/src/timestampFormat.ts b/apps/web/src/timestampFormat.ts
index 1e67174c..e22d6787 100644
--- a/apps/web/src/timestampFormat.ts
+++ b/apps/web/src/timestampFormat.ts
@@ -93,6 +93,28 @@ export function formatElapsedDurationLabel(isoDate: string, nowMs: number = Date
   return `${days}d`;
 }
 
+/**
+ * Elapsed time for a run that is happening right now: always a duration, never
+ * a phrase. {@link formatElapsedDurationLabel} answers "how long ago" and says
+ * "just now" for the first few seconds, which reads as nonsense next to a live
+ * status ("working · just now") and is a different width every tick.
+ */
+export function formatWorkingDurationLabel(isoDate: string, nowMs: number = Date.now()): string {
+  const diffMs = nowMs - new Date(isoDate).getTime();
+  const totalSeconds = Math.max(0, Math.floor(diffMs / 1_000));
+  if (totalSeconds < 60) return `${totalSeconds}s`;
+
+  const totalMinutes = Math.floor(totalSeconds / 60);
+  if (totalMinutes < 60) {
+    const seconds = totalSeconds % 60;
+    return seconds === 0 ? `${totalMinutes}m` : `${totalMinutes}m ${seconds}s`;
+  }
+
+  const hours = Math.floor(totalMinutes / 60);
+  const minutes = totalMinutes % 60;
+  return minutes === 0 ? `${hours}h` : `${hours}h ${minutes}m`;
+}
+
 /**
  * Relative time until an ISO instant (e.g. expiry). Mirrors {@link formatRelativeTime} but for future times.
  */
diff --git a/apps/web/src/uiStateStore.test.ts b/apps/web/src/uiStateStore.test.ts
index 64be831c..ebc2191e 100644
--- a/apps/web/src/uiStateStore.test.ts
+++ b/apps/web/src/uiStateStore.test.ts
@@ -3,12 +3,9 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vite-plus/test"
 
 import {
   clearThreadUi,
-  dismissFromOnDeck,
   hydratePersistedProjectState,
   markThreadVisited,
   markThreadUnread,
-  ON_DECK_MAX_THREADS,
-  type OnDeckSyncInput,
   PERSISTED_STATE_KEY,
   type PersistedUiState,
   persistState,
@@ -17,7 +14,6 @@ import {
   setLastChatThreadRef,
   setProjectExpanded,
   setThreadChangedFilesExpanded,
-  syncOnDeck,
   syncProjects,
   syncThreads,
   type UiState,
@@ -29,18 +25,14 @@ function makeUiState(overrides: Partial<UiState> = {}): UiState {
     projectOrder: [],
     threadLastVisitedAtById: {},
     threadChangedFilesExpandedById: {},
-    onDeckThreadKeys: [],
-    onDeckDismissedThreadKeys: [],
+    doneThreadOverrides: {},
+    inboxProjectScopeKey: null,
     defaultAdvertisedEndpointKey: null,
     lastChatThreadRef: null,
     ...overrides,
   };
 }
 
-function makeOnDeckInput(key: string, overrides: Partial<OnDeckSyncInput> = {}): OnDeckSyncInput {
-  return { key, pinned: false, live: false, unseen: false, ...overrides };
-}
-
 describe("uiStateStore pure functions", () => {
   it("markThreadVisited stores the provided server timestamp", () => {
     const threadId = ThreadId.make("thread-1");
@@ -686,88 +678,3 @@ describe("uiStateStore persistence round-trip", () => {
     expect(rehydrated.projectExpandedById[nextLogicalKey]).toBe(false);
   });
 });
-
-describe("on deck", () => {
-  it("syncOnDeck keeps insertion order stable while activity reorders the input", () => {
-    let state = syncOnDeck(
-      makeUiState(),
-      [makeOnDeckInput("t-a", { live: true }), makeOnDeckInput("t-b", { live: true })],
-      null,
-    );
-    expect(state.onDeckThreadKeys).toEqual(["t-a", "t-b"]);
-
-    // Later activity on t-b resorts the sidebar input; deck positions hold.
-    state = syncOnDeck(
-      state,
-      [makeOnDeckInput("t-b", { live: true }), makeOnDeckInput("t-a", { live: true })],
-      null,
-    );
-    expect(state.onDeckThreadKeys).toEqual(["t-a", "t-b"]);
-
-    // New live threads append at the bottom.
-    state = syncOnDeck(
-      state,
-      [
-        makeOnDeckInput("t-c", { live: true }),
-        makeOnDeckInput("t-b", { live: true }),
-        makeOnDeckInput("t-a", { live: true }),
-      ],
-      null,
-    );
-    expect(state.onDeckThreadKeys).toEqual(["t-a", "t-b", "t-c"]);
-  });
-
-  it("membership is sticky: settled threads stay until dismissed, and dismissal lifts when the thread goes live again", () => {
-    let state = syncOnDeck(makeUiState(), [makeOnDeckInput("t-a", { live: true })], null);
-    expect(state.onDeckThreadKeys).toEqual(["t-a"]);
-
-    // Thread settles and its completion is seen — still on deck.
-    state = syncOnDeck(state, [makeOnDeckInput("t-a")], null);
-    expect(state.onDeckThreadKeys).toEqual(["t-a"]);
-
-    state = dismissFromOnDeck(state, "t-a");
-    expect(state.onDeckThreadKeys).toEqual([]);
-
-    // An unseen completion alone does not resurrect a dismissed thread.
-    state = syncOnDeck(state, [makeOnDeckInput("t-a", { unseen: true })], null);
-    expect(state.onDeckThreadKeys).toEqual([]);
-
-    // Going live again clears the dismissal and re-enters the deck.
-    state = syncOnDeck(state, [makeOnDeckInput("t-a", { live: true })], null);
-    expect(state.onDeckThreadKeys).toEqual(["t-a"]);
-    expect(state.onDeckDismissedThreadKeys).toEqual([]);
-  });
-
-  it("syncOnDeck drops deck and dismissal entries for threads that no longer exist", () => {
-    const state = makeUiState({
-      onDeckThreadKeys: ["t-gone", "t-a"],
-      onDeckDismissedThreadKeys: ["t-gone-too"],
-    });
-
-    const next = syncOnDeck(state, [makeOnDeckInput("t-a")], null);
-
-    expect(next.onDeckThreadKeys).toEqual(["t-a"]);
-    expect(next.onDeckDismissedThreadKeys).toEqual([]);
-  });
-
-  it("syncOnDeck evicts oldest quiet rows beyond the cap but spares pinned, live, unseen, and active rows", () => {
-    const quietKeys = Array.from({ length: ON_DECK_MAX_THREADS + 1 }, (_, i) => `t-q${i}`);
-    const state = makeUiState({ onDeckThreadKeys: quietKeys });
-
-    const next = syncOnDeck(
-      state,
-      [...quietKeys.map((key) => makeOnDeckInput(key)), makeOnDeckInput("t-live", { live: true })],
-      "t-q0",
-    );
-
-    // 9 candidates, cap 7: the two oldest quiet rows go, except t-q0 which is
-    // the open thread, so t-q1 and t-q2 are evicted instead.
-    expect(next.onDeckThreadKeys).toEqual(["t-q0", ...quietKeys.slice(3), "t-live"]);
-  });
-
-  it("syncOnDeck returns the same state when nothing changed", () => {
-    const state = makeUiState({ onDeckThreadKeys: ["t-a"] });
-    const next = syncOnDeck(state, [makeOnDeckInput("t-a", { live: true })], null);
-    expect(next).toBe(state);
-  });
-});
diff --git a/apps/web/src/uiStateStore.ts b/apps/web/src/uiStateStore.ts
index 3fd111aa..af209ef1 100644
--- a/apps/web/src/uiStateStore.ts
+++ b/apps/web/src/uiStateStore.ts
@@ -23,8 +23,8 @@ export interface PersistedUiState {
   projectOrderCwds?: string[];
   defaultAdvertisedEndpointKey?: string | null;
   threadChangedFilesExpandedById?: Record<string, Record<string, boolean>>;
-  onDeckThreadKeys?: string[];
-  onDeckDismissedThreadKeys?: string[];
+  doneThreadOverrides?: Record<string, { state: "done" | "active"; at: string }>;
+  inboxProjectScopeKey?: string | null;
 }
 
 export interface UiProjectState {
@@ -37,11 +37,15 @@ export interface UiThreadState {
   threadChangedFilesExpandedById: Record<string, Record<string, boolean>>;
 }
 
-export interface UiOnDeckState {
-  /** Scoped thread keys in deck insertion order — never resorted by activity. */
-  onDeckThreadKeys: string[];
-  /** Threads the user removed from the deck; suppressed until they go live again. */
-  onDeckDismissedThreadKeys: string[];
+export interface UiInboxState {
+  /**
+   * The user's explicit word on each thread's lifecycle, by scoped thread
+   * key. An override never decides on its own -- isThreadDone resolves it
+   * against the thread's live state, so activity blockers always win.
+   */
+  doneThreadOverrides: Record<string, { state: "done" | "active"; at: string }>;
+  /** Which project chip is selected; null is All. */
+  inboxProjectScopeKey: string | null;
 }
 
 export interface UiEndpointState {
@@ -53,7 +57,7 @@ export interface UiNavigationState {
 }
 
 export interface UiState
-  extends UiProjectState, UiThreadState, UiOnDeckState, UiEndpointState, UiNavigationState {}
+  extends UiProjectState, UiThreadState, UiInboxState, UiEndpointState, UiNavigationState {}
 
 export interface SyncProjectInput {
   /** Physical project key (env + cwd). Used for manual sort order. */
@@ -73,8 +77,8 @@ const initialState: UiState = {
   projectOrder: [],
   threadLastVisitedAtById: {},
   threadChangedFilesExpandedById: {},
-  onDeckThreadKeys: [],
-  onDeckDismissedThreadKeys: [],
+  doneThreadOverrides: {},
+  inboxProjectScopeKey: null,
   defaultAdvertisedEndpointKey: null,
   lastChatThreadRef: null,
 };
@@ -121,25 +125,37 @@ function readPersistedState(): UiState {
       threadChangedFilesExpandedById: sanitizePersistedThreadChangedFilesExpanded(
         parsed.threadChangedFilesExpandedById,
       ),
-      onDeckThreadKeys: sanitizePersistedKeyList(parsed.onDeckThreadKeys),
-      onDeckDismissedThreadKeys: sanitizePersistedKeyList(parsed.onDeckDismissedThreadKeys),
+      doneThreadOverrides: sanitizePersistedDoneOverrides(parsed.doneThreadOverrides),
+      inboxProjectScopeKey:
+        typeof parsed.inboxProjectScopeKey === "string" && parsed.inboxProjectScopeKey.length > 0
+          ? parsed.inboxProjectScopeKey
+          : null,
     };
   } catch {
     return initialState;
   }
 }
 
-function sanitizePersistedKeyList(value: string[] | undefined): string[] {
-  if (!Array.isArray(value)) {
-    return [];
+function sanitizePersistedDoneOverrides(
+  value: PersistedUiState["doneThreadOverrides"],
+): Record<string, { state: "done" | "active"; at: string }> {
+  if (value === undefined || value === null || typeof value !== "object") {
+    return {};
   }
-  const keys: string[] = [];
-  for (const key of value) {
-    if (typeof key === "string" && key.length > 0 && !keys.includes(key)) {
-      keys.push(key);
+  const sanitized: Record<string, { state: "done" | "active"; at: string }> = {};
+  for (const [key, entry] of Object.entries(value)) {
+    if (
+      typeof key === "string" &&
+      key.length > 0 &&
+      entry !== null &&
+      typeof entry === "object" &&
+      (entry.state === "done" || entry.state === "active") &&
+      typeof entry.at === "string"
+    ) {
+      sanitized[key] = { state: entry.state, at: entry.at };
     }
   }
-  return keys;
+  return sanitized;
 }
 
 function sanitizePersistedThreadChangedFilesExpanded(
@@ -226,8 +242,8 @@ export function persistState(state: UiState): void {
         projectOrderCwds,
         defaultAdvertisedEndpointKey: state.defaultAdvertisedEndpointKey,
         threadChangedFilesExpandedById,
-        onDeckThreadKeys: state.onDeckThreadKeys,
-        onDeckDismissedThreadKeys: state.onDeckDismissedThreadKeys,
+        doneThreadOverrides: state.doneThreadOverrides,
+        inboxProjectScopeKey: state.inboxProjectScopeKey,
       } satisfies PersistedUiState),
     );
     if (!legacyKeysCleanedUp) {
@@ -466,89 +482,23 @@ export function syncThreads(state: UiState, threads: readonly SyncThreadInput[])
   };
 }
 
-export interface OnDeckSyncInput {
-  /** Scoped thread key. */
-  key: string;
-  pinned: boolean;
-  /** The provider is working or waiting on the user right now. */
-  live: boolean;
-  /** Settled with a completion the user hasn't seen yet. */
-  unseen: boolean;
-}
-
-/** Deck size the auto-trim steers toward; only quiet rows are evicted for it. */
-export const ON_DECK_MAX_THREADS = 7;
-
 /**
- * Reconciles the deck against the current thread snapshots. Membership is
- * sticky: rows keep their insertion position while agent activity only changes
- * their status, so the working set never reshuffles under the user. Threads
- * enter when they become live, unseen, or pinned; they leave when dismissed,
- * archived, or auto-trimmed (settled, seen, unpinned rows beyond the cap,
- * oldest first — never the active route thread).
+ * Stamp the user's word on a thread's lifecycle. Pure and idempotent: marking
+ * a done thread done again refreshes nothing, so a double-click cannot move a
+ * row twice.
  */
-export function syncOnDeck(
+export function setDoneOverride(
   state: UiState,
-  threads: readonly OnDeckSyncInput[],
-  activeThreadKey: string | null,
+  threadKey: string,
+  override: { state: "done" | "active"; at: string },
 ): UiState {
-  const inputByKey = new Map(threads.map((thread) => [thread.key, thread] as const));
-  // Dismissal only holds while a thread stays settled: going live again always
-  // brings it back to the deck.
-  const nextDismissed = state.onDeckDismissedThreadKeys.filter((key) => {
-    const input = inputByKey.get(key);
-    return input !== undefined && !input.live;
-  });
-  const dismissedSet = new Set(nextDismissed);
-  const retained = state.onDeckThreadKeys.filter(
-    (key) => inputByKey.has(key) && !dismissedSet.has(key),
-  );
-  const retainedSet = new Set(retained);
-  const appended = threads
-    .filter(
-      (thread) =>
-        (thread.pinned || thread.live || thread.unseen) &&
-        !retainedSet.has(thread.key) &&
-        !dismissedSet.has(thread.key),
-    )
-    .map((thread) => thread.key);
-  let nextOrder = [...retained, ...appended];
-  if (nextOrder.length > ON_DECK_MAX_THREADS) {
-    const evictableKeys = nextOrder.filter((key) => {
-      if (key === activeThreadKey) {
-        return false;
-      }
-      const input = inputByKey.get(key);
-      return input !== undefined && !input.pinned && !input.live && !input.unseen;
-    });
-    const evicted = new Set(evictableKeys.slice(0, nextOrder.length - ON_DECK_MAX_THREADS));
-    if (evicted.size > 0) {
-      nextOrder = nextOrder.filter((key) => !evicted.has(key));
-    }
-  }
-  if (
-    orderedListsEqual(state.onDeckThreadKeys, nextOrder) &&
-    orderedListsEqual(state.onDeckDismissedThreadKeys, nextDismissed)
-  ) {
+  const current = state.doneThreadOverrides[threadKey];
+  if (current !== undefined && current.state === override.state) {
     return state;
   }
   return {
     ...state,
-    onDeckThreadKeys: nextOrder,
-    onDeckDismissedThreadKeys: nextDismissed,
-  };
-}
-
-export function dismissFromOnDeck(state: UiState, threadKey: string): UiState {
-  if (!state.onDeckThreadKeys.includes(threadKey)) {
-    return state;
-  }
-  return {
-    ...state,
-    onDeckThreadKeys: state.onDeckThreadKeys.filter((key) => key !== threadKey),
-    onDeckDismissedThreadKeys: state.onDeckDismissedThreadKeys.includes(threadKey)
-      ? state.onDeckDismissedThreadKeys
-      : [...state.onDeckDismissedThreadKeys, threadKey],
+    doneThreadOverrides: { ...state.doneThreadOverrides, [threadKey]: override },
   };
 }
 
@@ -760,8 +710,9 @@ export function reorderProjects(
 interface UiStateStore extends UiState {
   syncProjects: (projects: readonly SyncProjectInput[]) => void;
   syncThreads: (threads: readonly SyncThreadInput[]) => void;
-  syncOnDeck: (threads: readonly OnDeckSyncInput[], activeThreadKey: string | null) => void;
-  dismissFromOnDeck: (threadKey: string) => void;
+  markThreadDone: (threadKey: string, at: string) => void;
+  reopenThread: (threadKey: string, at: string) => void;
+  setInboxProjectScope: (projectKey: string | null) => void;
   markThreadVisited: (threadId: string, visitedAt?: string) => void;
   markThreadUnread: (threadId: string, latestTurnCompletedAt: string | null | undefined) => void;
   clearThreadUi: (threadId: string) => void;
@@ -785,9 +736,16 @@ export const useUiStateStore = create<UiStateStore>((set) => ({
   ...readPersistedState(),
   syncProjects: (projects) => set((state) => syncProjects(state, projects)),
   syncThreads: (threads) => set((state) => syncThreads(state, threads)),
-  syncOnDeck: (threads, activeThreadKey) =>
-    set((state) => syncOnDeck(state, threads, activeThreadKey)),
-  dismissFromOnDeck: (threadKey) => set((state) => dismissFromOnDeck(state, threadKey)),
+  markThreadDone: (threadKey, at) =>
+    set((state) => setDoneOverride(state, threadKey, { state: "done", at })),
+  reopenThread: (threadKey, at) =>
+    set((state) => setDoneOverride(state, threadKey, { state: "active", at })),
+  setInboxProjectScope: (projectKey) =>
+    set((state) =>
+      state.inboxProjectScopeKey === projectKey
+        ? state
+        : { ...state, inboxProjectScopeKey: projectKey },
+    ),
   markThreadVisited: (threadId, visitedAt) =>
     set((state) => markThreadVisited(state, threadId, visitedAt)),
   markThreadUnread: (threadId, latestTurnCompletedAt) =>
diff --git a/docs/design/polish-checklist.md b/docs/design/polish-checklist.md
new file mode 100644
index 00000000..3df499a4
--- /dev/null
+++ b/docs/design/polish-checklist.md
@@ -0,0 +1,94 @@
+# UI polish checklist
+
+Run against every user-facing change, on a screenshot, before it ships. This
+list is how taste gets taught: every reviewed defect — Will's catches during
+the sidebar redesign, and the genres in t3code PR #4700 (33 fixes, ~8 kinds) —
+becomes a line here. When a new kind of defect is found, add it; never fix an
+instance without recording its genre.
+
+## Spacing and alignment
+
+- Padding is symmetric unless asymmetry is deliberate: top gap == bottom gap,
+  left inset == right inset. (Will: scope-row gap; PR: add-project, settle
+  button, top controls.)
+- Rows of like elements share one left edge — icon + label columns align
+  across every row, including "All"/aggregate rows. No orphan indents.
+  (Will: gap left of project name; icon-less "All projects" row.)
+- Overlays and backings hug their content exactly — no slab wider than its
+  buttons, no lead-in padding over neighbouring text. (Will: hover cluster.)
+- Fixed sizes are suspicious: panels get min/max derived from content, and
+  full-width rows stretch with their pane, pinned elements riding the edge.
+  (Will: scope trigger; PR: project picker min-width.)
+
+## States
+
+- Selected ≠ hover ≠ active: three visually distinct treatments, checked in
+  dark mode where token deltas collapse. One percent of white is not a state.
+  (Will: dropdown selected-vs-hover.)
+- Hover reveals replace, in place: swapped-in controls occupy the footprint of
+  what they replace (time label ⇄ action icons) with no height or offset jump.
+- Exactly one popup per hover target. A tooltip and a hover card on the same
+  element is a defect regardless of each being correct. (Will: title tooltip;
+  PR: tooltip padding/truncation.)
+- Tooltip and preview content truncates; unbounded strings (errors, paths)
+  never blow a popup open. (PR: error tooltip.)
+- No `title` attributes on decoration. A native tooltip is a second popup, it
+  cannot be styled, and on a surface that already has a hover card it fires on
+  top of it. Interactive controls get a real tooltip; dots, glyphs and badges
+  get an `aria-label` and nothing else. (Audit: status dot, terminal glyph.)
+- Empty states are designed, not blank: quiet copy plus the one action that
+  fills the space.
+
+## Interaction
+
+- The whole row is the control: headers with a chevron collapse from anywhere
+  on the row, list rows navigate from anywhere not claimed by an inner button.
+  Hit targets are the visual row, not the glyph. (Will: Tied off header.)
+- No auto-behaviour that moves or hides what the user arranged: no auto-hide,
+  no auto-collapse, no reordering underfoot. Lifecycle transitions only.
+  (Will: sidebar auto-collapse; T3: static sort.)
+- Nothing the user might be standing in disappears: collapsing a section keeps
+  the routed row; hiding blocked-on-you work is forbidden everywhere.
+- Volume is managed by folding, never by flattening: when a list is too long,
+  show fewer rows, not thinner ones. Stripping a row's second line to buy
+  height costs the information the row existed to carry, and makes distinct
+  kinds of row look alike. (Will: one-line quiet rows, reverted.)
+- Text that shouldn't select doesn't: labels and chrome are select-none; no
+  selection underlines on click-drag. (PR: project text underline.)
+
+## Scroll
+
+- Section headers in scrolling panes stay sticky, with an opaque background so
+  rows slide under, not through. (PR: sidebar header sticky.)
+- Scroll containers fade or clip cleanly at both ends — content doesn't shear
+  against chrome. (PR: scrollbar fades on top.)
+- Menus and popovers never show a scrollbar for one row of overflow; size to
+  content up to a max, then scroll. (PR: context-menu scrollbar.)
+
+## Drawing
+
+- Layered or translucent icons: overlapping transparent paths double up where
+  they cross; use a single path or opaque stacking. (PR: icon path overlap.)
+- One radius scale, from the design system; a rounded card next to a square
+  sibling is a defect. (PR: notification radius.)
+- Hairlines are structural: under section headers and between dense rows that
+  need them — never both a header rule and a divider a few pixels apart, and
+  never edge-to-edge where the surface's other rules are inset.
+- Live-updating labels (timers, counts) are tabular-nums so they don't wiggle.
+
+## Language
+
+- Labels answer a question someone has; a heading that restates the obvious
+  ("Threads" over a list of threads) is dropped.
+- Display language may diverge from internal names (Tie off / done), but one
+  surface never mixes both.
+
+## Testing the pixels
+
+- A browser test that asserts layout (widths, truncation, position) must load
+  the production stylesheet (`index.css` + waitForProductionStyles); without it
+  every Tailwind class is inert and the test measures unstyled DOM. Found
+  live: ThreadHoverCard's four layout tests all passed while blind. Text and
+  behaviour assertions don't need styles — only layout ones do.
+- Screenshot review is part of acceptance for user-facing change: capture via
+  a temporary browser-suite test, read the image, check this list against it.
diff --git a/docs/design/sidebar-inbox.html b/docs/design/sidebar-inbox.html
new file mode 100644
index 00000000..caa0fe65
--- /dev/null
+++ b/docs/design/sidebar-inbox.html
@@ -0,0 +1,721 @@
+<!-- Inbox sidebar proposal, 2026-07-28. Studied from T3's Sidebar v2
+     (settle/snooze lifecycle, static sort, status-in-content) and translated
+     into our flat, dense system: rows and dividers instead of cards, two-line
+     rows at ~46px instead of three-line cards at 78px. The rail is gone.
+     Companion to sidebar-variations-codex.html and sidebar-working-set.html. -->
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="default-src 'none'; style-src 'unsafe-inline'; img-src data:; base-uri 'none'; form-action 'none'"
+    />
+    <title>Inbox Sidebar</title>
+    <style>
+      :root {
+        color-scheme: dark;
+        --bg: rgb(19 20 22);
+        --panel: rgb(24 25 28);
+        --border: rgb(255 255 255 / 0.09);
+        --fg: rgb(232 231 227);
+        --fg-mid: rgb(232 231 227 / 0.64);
+        --fg-dim: rgb(232 231 227 / 0.38);
+        --hover: rgb(255 255 255 / 0.045);
+        --active-row: rgb(255 255 255 / 0.08);
+        --act: rgb(245 179 66);
+        --motion: rgb(94 156 255);
+        --broken: rgb(236 100 92);
+        --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+        --mono: ui-monospace, "SF Mono", Menlo, monospace;
+      }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: var(--bg);
+        color: var(--fg);
+        font-family: var(--font);
+        font-size: 13px;
+        padding: 40px;
+      }
+      h1 {
+        font-size: 20px;
+        font-weight: 600;
+        margin-bottom: 6px;
+      }
+      .sub {
+        color: var(--fg-mid);
+        margin-bottom: 28px;
+        max-width: 640px;
+        line-height: 1.5;
+      }
+      .stage {
+        display: flex;
+        gap: 40px;
+        align-items: flex-start;
+        flex-wrap: wrap;
+      }
+      .frame-label {
+        font-size: 11px;
+        color: var(--fg-dim);
+        margin-bottom: 8px;
+        font-family: var(--mono);
+        text-transform: uppercase;
+        letter-spacing: 0.06em;
+      }
+
+      .sidebar {
+        width: 288px;
+        background: var(--panel);
+        border: 1px solid var(--border);
+        border-radius: 8px;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        min-height: 640px;
+      }
+
+      /* ── Top chrome ─────────────────────────────── */
+      .chrome {
+        padding: 10px 10px 6px;
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+      }
+      .searchrow {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+      .search {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        gap: 7px;
+        padding: 5px 8px;
+        border: 1px solid var(--border);
+        border-radius: 6px;
+        color: var(--fg-dim);
+        font-size: 12px;
+      }
+      .search .kbd {
+        margin-left: auto;
+        font-family: var(--mono);
+        font-size: 10px;
+        border: 1px solid var(--border);
+        border-radius: 3px;
+        padding: 1px 4px;
+      }
+      .iconbtn {
+        width: 26px;
+        height: 26px;
+        display: grid;
+        place-items: center;
+        border-radius: 6px;
+        color: var(--fg-mid);
+      }
+      .iconbtn:hover {
+        background: var(--hover);
+        color: var(--fg);
+      }
+      .scope {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 4px 6px;
+        color: var(--fg-mid);
+        font-size: 12px;
+        border-radius: 6px;
+        width: fit-content;
+      }
+      .scope:hover {
+        background: var(--hover);
+        color: var(--fg);
+      }
+      .scope .chev {
+        color: var(--fg-dim);
+        font-size: 9px;
+      }
+      .chips {
+        display: flex;
+        gap: 4px;
+        padding: 0 4px 2px;
+        overflow: hidden;
+      }
+      .chip {
+        font-size: 11.5px;
+        color: var(--fg-mid);
+        padding: 3px 8px;
+        border-radius: 5px;
+        white-space: nowrap;
+        cursor: default;
+      }
+      .chip:hover {
+        background: var(--hover);
+        color: var(--fg);
+      }
+      .chip.on {
+        background: var(--active-row);
+        color: var(--fg);
+      }
+      .chip .n {
+        color: var(--fg-dim);
+        font-size: 10px;
+        margin-left: 3px;
+        font-family: var(--mono);
+      }
+      .chip.add {
+        margin-left: auto;
+        padding: 3px 6px;
+        color: var(--fg-dim);
+      }
+      .chip.add:hover {
+        color: var(--fg);
+        background: var(--hover);
+      }
+      .chip.add svg {
+        display: block;
+      }
+
+      /* ── Section headers ────────────────────────── */
+      .sect {
+        display: flex;
+        align-items: baseline;
+        gap: 8px;
+        padding: 12px 12px 5px;
+        font-size: 11px;
+        color: var(--fg-dim);
+        font-family: var(--mono);
+        text-transform: uppercase;
+        letter-spacing: 0.06em;
+      }
+      .sect .count {
+        margin-left: auto;
+        text-transform: none;
+        letter-spacing: 0;
+      }
+      .sect .needs {
+        color: var(--act);
+      }
+
+      /* ── Thread rows ────────────────────────────── */
+      ul {
+        list-style: none;
+      }
+      .row {
+        position: relative;
+        padding: 7px 12px 8px;
+        border-top: 1px solid var(--border);
+        cursor: default;
+      }
+      .row:hover {
+        background: var(--hover);
+      }
+      .row.current {
+        background: var(--active-row);
+      }
+      .l1 {
+        display: flex;
+        align-items: center;
+        gap: 7px;
+        min-width: 0;
+      }
+      .dot {
+        width: 7px;
+        height: 7px;
+        border-radius: 50%;
+        flex: none;
+      }
+      .dot.act {
+        background: var(--act);
+      }
+      .dot.motion {
+        background: var(--motion);
+      }
+      .dot.broken {
+        background: var(--broken);
+      }
+      .dot.unread {
+        background: var(--fg);
+      }
+      .pin {
+        color: var(--fg-dim);
+        font-size: 10px;
+        flex: none;
+      }
+      .title {
+        flex: 1;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-weight: 500;
+        color: rgb(232 231 227 / 0.9);
+        font-size: 13px;
+      }
+      .title.bright {
+        color: var(--fg);
+      }
+      .title.dim {
+        font-weight: 400;
+        color: var(--fg-mid);
+      }
+      .stat {
+        flex: none;
+        font-size: 11px;
+        font-family: var(--mono);
+        color: var(--fg-dim);
+      }
+      .stat.act {
+        color: var(--act);
+      }
+      .stat.motion {
+        color: var(--motion);
+      }
+      .stat.broken {
+        color: var(--broken);
+      }
+      .l2 {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        min-width: 0;
+        margin-top: 2px;
+        padding-left: 14px;
+        font-size: 11px;
+        color: var(--fg-dim);
+      }
+      .l2 .proj {
+        color: rgb(232 231 227 / 0.5);
+      }
+      .l2 .sep {
+        color: rgb(232 231 227 / 0.22);
+      }
+      .l2 .branch {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-family: var(--mono);
+        font-size: 10.5px;
+      }
+      .l2 .right {
+        margin-left: auto;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        flex: none;
+      }
+      .l2 .diff {
+        font-family: var(--mono);
+        font-size: 10px;
+      }
+      .l2 .plus {
+        color: rgb(120 200 130);
+      }
+      .l2 .minus {
+        color: rgb(230 120 110);
+      }
+      .glyph {
+        width: 12px;
+        height: 12px;
+        opacity: 0.55;
+        flex: none;
+      }
+
+      /* Hover actions replace the right meta (shown forced on one row) */
+      .acts {
+        position: absolute;
+        right: 8px;
+        top: 6px;
+        display: none;
+        gap: 2px;
+        background: var(--panel);
+        padding-left: 8px;
+      }
+      .row.show-acts .acts {
+        display: flex;
+      }
+      .row.show-acts .stat {
+        visibility: hidden;
+      }
+      .act-btn {
+        font-size: 11px;
+        color: var(--fg-mid);
+        padding: 2px 7px;
+        border-radius: 4px;
+        display: flex;
+        align-items: center;
+        gap: 4px;
+      }
+      .act-btn:hover {
+        background: var(--hover);
+        color: var(--fg);
+      }
+
+      /* ── Done tail ──────────────────────────────── */
+      /* Done rows keep their identity. Flattening them all to one grey (T3's
+         treatment) turns the section into a texture; here the section header
+         carries "done" and each row keeps a readable name and its project. */
+      .done .row {
+        padding: 6px 12px;
+      }
+      .done .l1 {
+        gap: 8px;
+      }
+      .done .title {
+        font-weight: 400;
+        color: rgb(232 231 227 / 0.78);
+      }
+      .done .row:hover .title {
+        color: var(--fg);
+      }
+      .done .proj {
+        flex: none;
+        font-size: 11px;
+        color: rgb(232 231 227 / 0.42);
+      }
+      .more {
+        padding: 7px 12px 12px;
+        font-size: 11px;
+        color: var(--fg-dim);
+        border-top: 1px solid var(--border);
+      }
+      .more:hover {
+        color: var(--fg-mid);
+      }
+
+      /* ── Notes column ───────────────────────────── */
+      .notes {
+        max-width: 420px;
+        font-size: 13px;
+        line-height: 1.55;
+        color: var(--fg-mid);
+      }
+      .notes h2 {
+        font-size: 13px;
+        color: var(--fg);
+        margin: 18px 0 4px;
+        font-weight: 600;
+      }
+      .notes h2:first-child {
+        margin-top: 0;
+      }
+      .notes code {
+        font-family: var(--mono);
+        font-size: 11.5px;
+        color: var(--fg);
+      }
+      .notes .q {
+        color: var(--act);
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Inbox sidebar</h1>
+    <p class="sub">
+      Threads are the inbox. One live list ordered by when work began, a Done tail ordered by when
+      work ended, and the rail retired. Rows and hairline dividers, not cards: two lines, ~46px,
+      where T3 spends 78px on three.
+    </p>
+
+    <div class="stage">
+      <div>
+        <div class="frame-label">Final direction &mdash; resting state</div>
+        <div class="sidebar">
+          <div class="chrome">
+            <div class="searchrow">
+              <div class="search">&#8981; Search <span class="kbd">&#8984;K</span></div>
+              <div class="iconbtn" title="New thread">&#9998;</div>
+            </div>
+            <div class="chips">
+              <span class="chip on">All</span>
+              <span class="chip">threadlines <span class="n">2</span></span>
+              <span class="chip">badcode</span>
+              <span class="chip" title="Remaining projects">&hellip;</span>
+              <span class="chip add" title="Add project"
+                ><svg
+                  width="13"
+                  height="13"
+                  viewBox="0 0 16 16"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                >
+                  <path
+                    d="M1.5 4.5v8a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1H8L6.5 3.5h-4a1 1 0 0 0-1 1z"
+                  />
+                  <path d="M8 7.5v4M6 9.5h4" /></svg
+              ></span>
+            </div>
+          </div>
+
+          <div class="sect">
+            Threads <span class="count"><span class="needs">2 need you</span> &middot; 6</span>
+          </div>
+          <ul>
+            <li class="row">
+              <div class="l1">
+                <span class="dot act"></span>
+                <span class="title bright">Give revert a preview dialog</span>
+                <span class="stat act">approval</span>
+              </div>
+              <div class="l2">
+                <span class="proj">threadlines</span><span class="sep">&middot;</span>
+                <span class="branch">feature/revert-preview</span>
+                <div class="right">
+                  <span class="diff"
+                    ><span class="plus">+214</span> <span class="minus">&minus;38</span></span
+                  ><svg class="glyph" viewBox="0 0 12 12">
+                    <path
+                      fill="currentColor"
+                      d="M6 0l1.7 4.3L12 6 7.7 7.7 6 12 4.3 7.7 0 6l4.3-1.7z"
+                    />
+                  </svg>
+                </div>
+              </div>
+            </li>
+            <li class="row">
+              <div class="l1">
+                <span class="dot motion"></span>
+                <span class="title">Polish the inbox sidebar</span>
+                <span class="stat motion">working &middot; 4m</span>
+              </div>
+              <div class="l2">
+                <span class="proj">threadlines</span><span class="sep">&middot;</span>
+                <span class="branch">feature/sidebar-polish</span>
+                <div class="right">
+                  <svg class="glyph" viewBox="0 0 12 12">
+                    <path
+                      fill="currentColor"
+                      d="M6 0l1.7 4.3L12 6 7.7 7.7 6 12 4.3 7.7 0 6l4.3-1.7z"
+                    />
+                  </svg>
+                </div>
+              </div>
+            </li>
+            <li class="row current">
+              <div class="l1">
+                <span class="pin">&#9733;</span>
+                <span class="title">In-app browser panel with agent control</span>
+                <span class="stat">2h</span>
+              </div>
+              <div class="l2">
+                <span class="proj">badcode</span><span class="sep">&middot;</span>
+                <span class="branch">feature/deck-sidebar</span>
+                <div class="right">
+                  <span class="diff"
+                    ><span class="plus">+26k</span> <span class="minus">&minus;329</span></span
+                  ><svg class="glyph" viewBox="0 0 12 12">
+                    <circle fill="currentColor" cx="6" cy="6" r="5" />
+                  </svg>
+                </div>
+              </div>
+            </li>
+            <li class="row">
+              <div class="l1">
+                <span class="dot broken"></span>
+                <span class="title bright">Wire the relay reconnect backoff</span>
+                <span class="stat broken">failed</span>
+              </div>
+              <div class="l2">
+                <span class="proj">threadlines</span><span class="sep">&middot;</span>
+                <span class="branch">fix/relay-backoff</span>
+                <div class="right">
+                  <svg class="glyph" viewBox="0 0 12 12">
+                    <circle fill="currentColor" cx="6" cy="6" r="5" />
+                  </svg>
+                </div>
+              </div>
+            </li>
+            <li class="row">
+              <div class="l1">
+                <span class="dot unread"></span>
+                <span class="title bright">Compare model picker density options</span>
+                <span class="stat">18m</span>
+              </div>
+              <div class="l2">
+                <span class="proj">badcode</span><span class="sep">&middot;</span>
+                <span class="branch">main</span>
+                <div class="right">
+                  <svg class="glyph" viewBox="0 0 12 12">
+                    <path
+                      fill="currentColor"
+                      d="M6 0l1.7 4.3L12 6 7.7 7.7 6 12 4.3 7.7 0 6l4.3-1.7z"
+                    />
+                  </svg>
+                </div>
+              </div>
+            </li>
+            <li class="row">
+              <div class="l1">
+                <span class="title dim">Draft the changelog for 0.2.6</span>
+                <span class="stat">3d</span>
+              </div>
+              <div class="l2">
+                <span class="proj">threadlines</span><span class="sep">&middot;</span>
+                <span class="branch">main</span>
+                <div class="right">
+                  <svg class="glyph" viewBox="0 0 12 12">
+                    <circle fill="currentColor" cx="6" cy="6" r="5" />
+                  </svg>
+                </div>
+              </div>
+            </li>
+          </ul>
+
+          <div class="sect">Done <span class="count">31</span></div>
+          <ul class="done">
+            <li class="row">
+              <div class="l1">
+                <span class="title">Answer a notification with 202</span
+                ><span class="proj">badcode</span><span class="stat">1d</span>
+              </div>
+            </li>
+            <li class="row">
+              <div class="l1">
+                <span class="title">Spellcheck via native Chromium</span
+                ><span class="proj">threadlines</span><span class="stat">6d</span>
+              </div>
+            </li>
+            <li class="row">
+              <div class="l1">
+                <span class="title">Phone link relay chunking</span
+                ><span class="proj">threadlines</span><span class="stat">12d</span>
+              </div>
+            </li>
+          </ul>
+          <div class="more">Show 28 more&hellip;</div>
+        </div>
+      </div>
+
+      <div>
+        <div class="frame-label">Chips, scoped to one project</div>
+        <div class="sidebar" style="min-height: 0; margin-bottom: 28px">
+          <div class="chrome">
+            <div class="searchrow">
+              <div class="search">&#8981; Search <span class="kbd">&#8984;K</span></div>
+              <div class="iconbtn" title="New thread">&#9998;</div>
+            </div>
+            <div class="chips">
+              <span class="chip">All</span>
+              <span class="chip on">threadlines <span class="n">2</span></span>
+              <span class="chip">badcode</span>
+              <span class="chip add" title="Add project"
+                ><svg
+                  width="13"
+                  height="13"
+                  viewBox="0 0 16 16"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                >
+                  <path
+                    d="M1.5 4.5v8a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1H8L6.5 3.5h-4a1 1 0 0 0-1 1z"
+                  />
+                  <path d="M8 7.5v4M6 9.5h4" /></svg
+              ></span>
+            </div>
+          </div>
+          <div class="sect">Threads</div>
+          <ul>
+            <li class="row">
+              <div class="l1">
+                <span class="dot motion"></span>
+                <span class="title">Polish the inbox sidebar</span>
+                <span class="stat motion">working &middot; 4m</span>
+              </div>
+              <div class="l2">
+                <span class="proj">threadlines</span><span class="sep">&middot;</span>
+                <span class="branch">feature/sidebar-polish</span>
+              </div>
+            </li>
+          </ul>
+        </div>
+
+        <div class="frame-label">Same rows &mdash; hover affordances forced</div>
+        <div class="sidebar" style="min-height: 0">
+          <div class="sect">Threads</div>
+          <ul>
+            <li class="row show-acts">
+              <div class="l1">
+                <span class="title">Compare model picker density options</span>
+                <span class="stat">18m</span>
+              </div>
+              <div class="l2">
+                <span class="proj">badcode</span><span class="sep">&middot;</span>
+                <span class="branch">main</span>
+              </div>
+              <div class="acts">
+                <div class="act-btn" title="Mark done">&#10003; Done</div>
+                <div class="act-btn" title="Pin">&#9734;</div>
+              </div>
+            </li>
+          </ul>
+          <div class="sect">Done</div>
+          <ul class="done">
+            <li class="row show-acts">
+              <div class="l1">
+                <span class="title">Phone link relay chunking</span><span class="stat">12d</span>
+              </div>
+              <div class="acts"><div class="act-btn">&#8617; Reopen</div></div>
+            </li>
+          </ul>
+        </div>
+
+        <div class="notes" style="margin-top: 28px">
+          <h2>What we take from T3</h2>
+          The attention partition (live above, done below), and their sort discipline: the live list
+          holds <em>creation order, newest first</em>, and activity never reorders it. A row keeps
+          its place from open until you mark it done, so the thing you were about to click never
+          jumps. Status lives in the row, not in position. Color is spent on exactly three things:
+          <code>approval</code> (act now), <code>working</code> (in motion, with elapsed),
+          <code>failed</code> (broken). Everything else rests unlabeled with a timestamp. Unread is
+          its own axis: a completed run you haven&rsquo;t seen keeps a bright title and a white dot
+          until you visit.
+
+          <h2>Our flavor</h2>
+          Rows with dividers, never cards &mdash; two lines instead of their three by folding status
+          into line one. Projects stop being a tree: the scope filter narrows the list, and every
+          row names its project, which is what killed the rail &mdash; project context travels with
+          the thread now, so nothing needs to be traced back to a group header. Pinned threads float
+          to the top of the live list (an explicit act, so the move is yours). &ldquo;Done&rdquo;
+          instead of T3&rsquo;s &ldquo;Settle&rdquo;: plainer, and it reads correctly for agent
+          work. Blocked or running work refuses Done &mdash; same rule the deck already had: live
+          work can&rsquo;t be waved away.
+
+          <h2>Deliberately deferred</h2>
+          Snooze (T3&rsquo;s wake/woke machinery is a whole feature; worth doing later, properly).
+          Auto-done on merged PRs and after idle weeks (needs settled server semantics first).
+          Multi-select.
+
+          <h2>Decided</h2>
+          Collapsing the sidebar hides it completely, same toggle as today; no icon strip. Chips
+          over the dropdown. The Done list stays at the bottom of the sidebar. Done rows are not
+          flattened to uniform grey: the section header says done, each row keeps a readable title
+          and its project name. Add project is a primary action: a folder-plus pinned to the right
+          end of the chips row, always visible &mdash; the &ldquo;&hellip;&rdquo; chip appears only
+          when projects overflow, and holds only those. The old quick-links row folds away: compose
+          covers new-chat, and the Chats page link moves into the &ldquo;&hellip;&rdquo; menu's
+          footer (easily moved if that feels buried).
+
+          <h2>Switching projects: dropdown vs chips</h2>
+          &ldquo;All projects&rdquo; is one combined list &mdash; every project&rsquo;s threads
+          mixed together, newest first, each row saying which project it belongs to. Picking a
+          project narrows the list to just that one (and the row label can disappear, since
+          it&rsquo;s implied). The dropdown (option A) is compact but costs two clicks per switch.
+          The chips row (option B) puts your most recent projects one click away, with a count of
+          threads that need you on each &mdash; overflow projects live behind the
+          &ldquo;&hellip;&rdquo;. Worth knowing: in an inbox, you often don&rsquo;t need to switch
+          at all &mdash; whatever you touched last is already near the top of the combined list. The
+          filter is for focus, not for finding things.
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a79a5bbe..56cc0454 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -284,9 +284,6 @@ importers:
       '@fontsource-variable/schibsted-grotesk':
         specifier: ^5.3.0
         version: 5.3.0
-      '@formkit/auto-animate':
-        specifier: ^0.10.0
-        version: 0.10.0
       '@legendapp/list':
         specifier: ^3.3.3
         version: 3.3.3(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
@@ -420,7 +417,7 @@ importers:
         version: 4.0.0-beta.97(effect@4.0.0-beta.97(patch_hash=181986b14edb53e2f3c82527e8e5a9f7675db32427ed6940ee3da64e2f5968e2))(vitest@4.1.10)
       oxlint:
         specifier: ^1.76.0
-        version: 1.76.0(vite-plus@0.2.4(@types/node@24.13.3)(@vitest/browser-playwright@4.1.10(@voidzero-dev/vite-plus-core@0.2.4(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(typescript@7.0.2)(yaml@2.9.0))(msw@2.15.0(@types/node@24.13.3)(typescript@7.0.2))(playwright@1.62.0)(vitest@4.1.10))(esbuild@0.28.1)(jiti@2.7.0)(msw@2.15.0(@types/node@24.13.3)(typescript@7.0.2))(typescript@7.0.2)(yaml@2.9.0))
+        version: 1.76.0(oxlint-tsgolint@0.24.0)(vite-plus@0.2.4(@types/node@24.13.3)(@vitest/browser-playwright@4.1.10(@voidzero-dev/vite-plus-core@0.2.4(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(typescript@7.0.2)(yaml@2.9.0))(msw@2.15.0(@types/node@24.13.3)(typescript@7.0.2))(playwright@1.62.0)(vitest@4.1.10))(esbuild@0.28.1)(jiti@2.7.0)(msw@2.15.0(@types/node@24.13.3)(typescript@7.0.2))(typescript@7.0.2)(yaml@2.9.0))
       typescript:
         specifier: 'catalog:'
         version: 7.0.2
@@ -1415,9 +1412,6 @@ packages:
   '@fontsource-variable/schibsted-grotesk@5.3.0':
     resolution: {integrity: sha512-ndS6H/KICWANchlHF3q4UdZD+xrZ3Ji0rUobIuXlgvDUzDfqZDsVuXPXZb636nJZMHE9zZ9Fmwgqazm8hMB50Q==}
 
-  '@formkit/auto-animate@0.10.0':
-    resolution: {integrity: sha512-KGomRttjUfORuPUaR/ZGQw+6xfMrTM+sxnILv7JAd9AmabU9rg9i6gF/iC0Ih+QpKCubJpCA/1DX9UHKE8cX+A==}
-
   '@hono/node-server@2.0.11':
     resolution: {integrity: sha512-bjD221KPLoJTWUwso1J6fGKiTXEUFedG/s0visavY4zakFPkeGURMRNly+FhBHs7T8Dz4qHaZIMX9ZoJHSJtKA==}
     engines: {node: '>=20'}
@@ -6887,8 +6881,6 @@ snapshots:
 
   '@fontsource-variable/schibsted-grotesk@5.3.0': {}
 
-  '@formkit/auto-animate@0.10.0': {}
-
   '@hono/node-server@2.0.11(hono@4.12.32)':
     dependencies:
       hono: 4.12.32
@@ -10649,7 +10641,7 @@ snapshots:
       oxlint-tsgolint: 0.24.0
       vite-plus: 0.2.4(@types/node@24.13.3)(@vitest/browser-playwright@4.1.10(@voidzero-dev/vite-plus-core@0.2.4(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(typescript@7.0.2)(yaml@2.9.0))(msw@2.15.0(@types/node@24.13.3)(typescript@7.0.2))(playwright@1.62.0)(vitest@4.1.10))(esbuild@0.28.1)(jiti@2.7.0)(msw@2.15.0(@types/node@24.13.3)(typescript@7.0.2))(typescript@7.0.2)(yaml@2.9.0)
 
-  oxlint@1.76.0(vite-plus@0.2.4(@types/node@24.13.3)(@vitest/browser-playwright@4.1.10(@voidzero-dev/vite-plus-core@0.2.4(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(typescript@7.0.2)(yaml@2.9.0))(msw@2.15.0(@types/node@24.13.3)(typescript@7.0.2))(playwright@1.62.0)(vitest@4.1.10))(esbuild@0.28.1)(jiti@2.7.0)(msw@2.15.0(@types/node@24.13.3)(typescript@7.0.2))(typescript@7.0.2)(yaml@2.9.0)):
+  oxlint@1.76.0(oxlint-tsgolint@0.24.0)(vite-plus@0.2.4(@types/node@24.13.3)(@vitest/browser-playwright@4.1.10(@voidzero-dev/vite-plus-core@0.2.4(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(typescript@7.0.2)(yaml@2.9.0))(msw@2.15.0(@types/node@24.13.3)(typescript@7.0.2))(playwright@1.62.0)(vitest@4.1.10))(esbuild@0.28.1)(jiti@2.7.0)(msw@2.15.0(@types/node@24.13.3)(typescript@7.0.2))(typescript@7.0.2)(yaml@2.9.0)):
     optionalDependencies:
       '@oxlint/binding-android-arm-eabi': 1.76.0
       '@oxlint/binding-android-arm64': 1.76.0
@@ -10670,6 +10662,7 @@ snapshots:
       '@oxlint/binding-win32-arm64-msvc': 1.76.0
       '@oxlint/binding-win32-ia32-msvc': 1.76.0
       '@oxlint/binding-win32-x64-msvc': 1.76.0
+      oxlint-tsgolint: 0.24.0
       vite-plus: 0.2.4(@types/node@24.13.3)(@vitest/browser-playwright@4.1.10(@voidzero-dev/vite-plus-core@0.2.4(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(typescript@7.0.2)(yaml@2.9.0))(msw@2.15.0(@types/node@24.13.3)(typescript@7.0.2))(playwright@1.62.0)(vitest@4.1.10))(esbuild@0.28.1)(jiti@2.7.0)(msw@2.15.0(@types/node@24.13.3)(typescript@7.0.2))(typescript@7.0.2)(yaml@2.9.0)
 
   p-cancelable@2.1.1: {}