diff --git a/apps/app/src/App.tsx b/apps/app/src/App.tsx
index 84a192c49..2283307a3 100644
--- a/apps/app/src/App.tsx
+++ b/apps/app/src/App.tsx
@@ -5,6 +5,7 @@ import { AuthCallbackView } from "./views/AuthCallbackView";
 import { RootComposeRoute } from "./views/RootComposeView";
 import { QuickCreateProjectProvider } from "./hooks/useQuickCreateProject";
 import { ProviderCliHealthToasts } from "./components/provider-cli/ProviderCliHealthToasts";
+import { useDesktopThemeSync } from "./hooks/useDesktopThemeSync";
 import {
   useDesktopUpdateAvailableToast,
   useUpdateAvailableToast,
@@ -96,6 +97,9 @@ export function App() {
   useUpdateAvailableToast();
   // Show a separate toast when the Electron shell reports a desktop update.
   useDesktopUpdateAvailableToast();
+  // Keep the Electron window chrome (traffic lights, inactive title bar)
+  // in sync with bb's resolved theme.
+  useDesktopThemeSync();
 
   return (
     <QuickCreateProjectProvider>
diff --git a/apps/app/src/app.css b/apps/app/src/app.css
index fc8ab8b5b..c8ae2135e 100644
--- a/apps/app/src/app.css
+++ b/apps/app/src/app.css
@@ -117,9 +117,23 @@
    * toast in the stack.
    */
   :where(
-      [data-sonner-toast].bb-app-toast[data-expanded="false"][data-front="false"]
-    ) {
+    [data-sonner-toast].bb-app-toast[data-expanded="false"][data-front="false"]
+  ) {
     overflow: hidden;
     border-radius: var(--radius-md);
   }
+
+  /*
+   * Opt out of the global thin scrollbar for horizontally-scrolling strips
+   * (e.g. the secondary-panel tab strip) where the scrollbar would clutter a
+   * short row. The element still scrolls; only the scrollbar chrome is hidden.
+   */
+  .no-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
 }
diff --git a/apps/app/src/components/layout/AppLayout.test.tsx b/apps/app/src/components/layout/AppLayout.test.tsx
index e5e8629b9..06666e594 100644
--- a/apps/app/src/components/layout/AppLayout.test.tsx
+++ b/apps/app/src/components/layout/AppLayout.test.tsx
@@ -6,6 +6,7 @@ import {
   fireEvent,
   render,
   screen,
+  waitFor,
   within,
 } from "@testing-library/react";
 import { Suspense, type ReactNode } from "react";
@@ -16,6 +17,7 @@ import type {
   BbDesktopInfoChangeHandler,
   SystemConfigResponse,
 } from "@bb/server-contract";
+import { createNoopDesktopBrowserApi } from "@/test/bb-desktop-test-utils";
 import { afterEach, describe, expect, it } from "vitest";
 import { QuickCreateProjectProvider } from "@/hooks/useQuickCreateProject";
 import { createQueryClientTestHarness } from "@/test/queryClientTestHarness";
@@ -32,6 +34,7 @@ import {
 } from "@/lib/bb-desktop";
 
 interface RenderAppLayoutArgs {
+  children?: ReactNode;
   desktopInfo: BbDesktopApi | null;
   initialEntry: string;
 }
@@ -40,6 +43,11 @@ interface TestProvidersProps {
   children: ReactNode;
 }
 
+interface SidebarResizeEndScenario {
+  name: string;
+  finishDrag: () => void;
+}
+
 const testSystemConfig: SystemConfigResponse = {
   featureFlags: {
     askUserQuestion: false,
@@ -52,6 +60,7 @@ const testSystemConfig: SystemConfigResponse = {
 function createBbDesktopApi(info: BbDesktopInfo): BbDesktopApi {
   return {
     ...info,
+    browser: createNoopDesktopBrowserApi(),
     async checkForUpdates() {
       return info;
     },
@@ -64,6 +73,9 @@ function createBbDesktopApi(info: BbDesktopInfo): BbDesktopApi {
     onChange(_listener: BbDesktopInfoChangeHandler) {
       return () => undefined;
     },
+    setTheme() {
+      // no-op
+    },
   };
 }
 
@@ -113,7 +125,7 @@ async function renderAppLayout(args: RenderAppLayoutArgs): Promise<void> {
           path="*"
           element={
             <AppLayout>
-              <div>Layout content</div>
+              {args.children ?? <div>Layout content</div>}
             </AppLayout>
           }
         />
@@ -313,4 +325,68 @@ describe("AppLayout desktop chrome", () => {
       MACOS_SIDEBAR_TRIGGER_OFFSET_CLASS,
     );
   });
+
+  it.each<SidebarResizeEndScenario>([
+    {
+      name: "mouseup",
+      finishDrag: () => {
+        fireEvent.mouseUp(window, { clientX: 360 });
+      },
+    },
+    {
+      name: "window blur",
+      finishDrag: () => {
+        fireEvent.blur(window);
+      },
+    },
+    {
+      name: "Escape",
+      finishDrag: () => {
+        fireEvent.keyDown(window, { key: "Escape" });
+      },
+    },
+  ])(
+    "disables iframe pointer events while sidebar resize is active and restores them after $name",
+    async ({ finishDrag }) => {
+      const iframePointerEventsNoneClass = "[&_iframe]:pointer-events-none";
+
+      await renderAppLayout({
+        desktopInfo: null,
+        initialEntry: "/projects/proj_sidebar_resize",
+        children: <iframe title="Status app" />,
+      });
+
+      const appLayoutRoot = await screen.findByTestId("app-layout-root");
+      const resizeHandle = screen.getByTestId("app-sidebar-resize-handle");
+      const iframe = screen.getByTitle("Status app");
+
+      expect(appLayoutRoot.contains(iframe)).toBe(true);
+      expect(appLayoutRoot.className).not.toContain(
+        iframePointerEventsNoneClass,
+      );
+
+      fireEvent.mouseDown(resizeHandle, {
+        buttons: 1,
+        clientX: 320,
+        clientY: 0,
+      });
+
+      await waitFor(() => {
+        expect(appLayoutRoot.className).toContain(
+          iframePointerEventsNoneClass,
+        );
+      });
+      expect(document.body.style.cursor).toBe("col-resize");
+
+      finishDrag();
+
+      await waitFor(() => {
+        expect(appLayoutRoot.className).not.toContain(
+          iframePointerEventsNoneClass,
+        );
+      });
+      expect(document.body.style.cursor).toBe("");
+      expect(document.body.style.userSelect).toBe("");
+    },
+  );
 });
diff --git a/apps/app/src/components/layout/AppLayout.tsx b/apps/app/src/components/layout/AppLayout.tsx
index 97d75a12e..43c2f33aa 100644
--- a/apps/app/src/components/layout/AppLayout.tsx
+++ b/apps/app/src/components/layout/AppLayout.tsx
@@ -1,4 +1,10 @@
-import { Fragment, type CSSProperties, type Ref, type ReactNode } from "react";
+import {
+  Fragment,
+  type CSSProperties,
+  type MouseEvent as ReactMouseEvent,
+  type Ref,
+  type ReactNode,
+} from "react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useAtom } from "jotai";
 import { atomWithStorage } from "jotai/utils";
@@ -46,6 +52,7 @@ import {
 import { useQuickCreateProjectController } from "@/hooks/useQuickCreateProject";
 import { useStandardManagerTimelinePreference } from "@/lib/manager-timeline-view-preference";
 import { useSetRootComposeProjectId } from "@/lib/root-compose-selection";
+import { IFRAME_POINTER_EVENTS_NONE_CLASS } from "@/lib/iframe-drag-guard";
 
 const SIDEBAR_WIDTH_KEY = "bb.sidebar.width";
 const SIDEBAR_OPEN_KEY = "bb.sidebar.open";
@@ -98,16 +105,20 @@ const sidebarOpenAtom = atomWithStorage<boolean>(
 );
 
 interface SidebarStateBridgeProps {
+  className?: string;
   providerRef: Ref<HTMLDivElement>;
   style: CSSProperties;
   children: ReactNode;
 }
 
+type SidebarResizeMouseEvent = ReactMouseEvent<HTMLDivElement>;
+
 type SidebarProviderStyle = CSSProperties & {
   "--sidebar-width": string;
 };
 
 function SidebarStateBridge({
+  className,
   providerRef,
   style,
   children,
@@ -117,6 +128,8 @@ function SidebarStateBridge({
     <SidebarProvider
       ref={providerRef}
       style={style}
+      className={className}
+      data-testid="app-layout-root"
       open={open}
       onOpenChange={setOpen}
     >
@@ -135,6 +148,12 @@ function FloatingSidebarTrigger() {
   );
 }
 
+function resetSidebarResizeDocumentState(): void {
+  document.body.classList.remove("sidebar-resizing");
+  document.body.style.cursor = "";
+  document.body.style.userSelect = "";
+}
+
 /**
  * Desktop-only sidebar toggle, pinned to the window's top-left just right of
  * the macOS traffic lights. Rendered once at the layout root — outside the
@@ -443,7 +462,7 @@ export function AppLayout({ children }: AppLayoutProps) {
   })();
 
   const handleResizeMouseDown = useCallback(
-    (event: React.MouseEvent<HTMLDivElement>) => {
+    (event: SidebarResizeMouseEvent) => {
       event.preventDefault();
       setIsSidebarResizing(true);
       startXRef.current = event.clientX;
@@ -455,6 +474,20 @@ export function AppLayout({ children }: AppLayoutProps) {
     [],
   );
 
+  const finishSidebarResize = useCallback(() => {
+    if (animationFrameRef.current !== null) {
+      window.cancelAnimationFrame(animationFrameRef.current);
+      animationFrameRef.current = null;
+    }
+    providerRef.current?.style.setProperty(
+      "--sidebar-width",
+      `${liveWidthRef.current}px`,
+    );
+    setSidebarWidth(liveWidthRef.current);
+    setIsSidebarResizing(false);
+    resetSidebarResizeDocumentState();
+  }, [setSidebarWidth]);
+
   useEffect(() => {
     if (!isSidebarResizing) return;
 
@@ -475,36 +508,28 @@ export function AppLayout({ children }: AppLayoutProps) {
       }
     };
 
-    const handleMouseUp = () => {
-      if (animationFrameRef.current !== null) {
-        window.cancelAnimationFrame(animationFrameRef.current);
-        animationFrameRef.current = null;
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        finishSidebarResize();
       }
-      providerRef.current?.style.setProperty(
-        "--sidebar-width",
-        `${liveWidthRef.current}px`,
-      );
-      setSidebarWidth(liveWidthRef.current);
-      setIsSidebarResizing(false);
-      document.body.classList.remove("sidebar-resizing");
-      document.body.style.cursor = "";
-      document.body.style.userSelect = "";
     };
 
     window.addEventListener("mousemove", handleMouseMove);
-    window.addEventListener("mouseup", handleMouseUp);
+    window.addEventListener("mouseup", finishSidebarResize);
+    window.addEventListener("blur", finishSidebarResize);
+    window.addEventListener("keydown", handleKeyDown);
     return () => {
       window.removeEventListener("mousemove", handleMouseMove);
-      window.removeEventListener("mouseup", handleMouseUp);
+      window.removeEventListener("mouseup", finishSidebarResize);
+      window.removeEventListener("blur", finishSidebarResize);
+      window.removeEventListener("keydown", handleKeyDown);
       if (animationFrameRef.current !== null) {
         window.cancelAnimationFrame(animationFrameRef.current);
         animationFrameRef.current = null;
       }
-      document.body.classList.remove("sidebar-resizing");
-      document.body.style.cursor = "";
-      document.body.style.userSelect = "";
+      resetSidebarResizeDocumentState();
     };
-  }, [isSidebarResizing, setSidebarWidth]);
+  }, [finishSidebarResize, isSidebarResizing]);
 
   useEffect(() => {
     liveWidthRef.current = sidebarWidth;
@@ -519,6 +544,9 @@ export function AppLayout({ children }: AppLayoutProps) {
     <ProjectActionsProvider>
       <ThreadActionsProvider>
         <SidebarStateBridge
+          className={
+            isSidebarResizing ? IFRAME_POINTER_EVENTS_NONE_CLASS : undefined
+          }
           providerRef={providerRef}
           style={sidebarProviderStyle}
         >
diff --git a/apps/app/src/components/pickers/ModelReasoningPicker.tsx b/apps/app/src/components/pickers/ModelReasoningPicker.tsx
index 777103aee..9cbde5ac8 100644
--- a/apps/app/src/components/pickers/ModelReasoningPicker.tsx
+++ b/apps/app/src/components/pickers/ModelReasoningPicker.tsx
@@ -51,7 +51,7 @@ interface ModelReasoningPickerProps {
   formatModelLabel?: (displayName: string) => string;
   // Reasoning state — supported efforts are per-model, so callers derive
   // these options from the SELECTED model and reconcile the level on model
-  // change via `reconcileReasoningLevel` in src/lib.
+  // change via `reconcileReasoningLevel` in @bb/domain.
   reasoningValue: ReasoningLevel;
   reasoningOptions: readonly PickerOption<ReasoningLevel>[];
   onReasoningChange: (value: ReasoningLevel) => void;
diff --git a/apps/app/src/components/secondary-panel/BrowserNewTabScreen.test.tsx b/apps/app/src/components/secondary-panel/BrowserNewTabScreen.test.tsx
new file mode 100644
index 000000000..50da07f73
--- /dev/null
+++ b/apps/app/src/components/secondary-panel/BrowserNewTabScreen.test.tsx
@@ -0,0 +1,113 @@
+// @vitest-environment jsdom
+
+import { cleanup, fireEvent, render, screen, within } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { BrowserHistoryEntry } from "@/lib/browser-history";
+import { BrowserNewTabScreen } from "./BrowserNewTabScreen";
+
+interface RenderScreenArgs {
+  recent?: readonly BrowserHistoryEntry[];
+}
+
+const SEARCH_LABEL = "Search the web or type a URL";
+
+function renderScreen(args: RenderScreenArgs = {}) {
+  const onNavigateInput = vi.fn();
+  const onClearRecent = vi.fn();
+  render(
+    <BrowserNewTabScreen
+      onNavigateInput={onNavigateInput}
+      recent={args.recent ?? []}
+      onClearRecent={onClearRecent}
+    />,
+  );
+  return { onNavigateInput, onClearRecent };
+}
+
+function submitSearch(input: HTMLElement): void {
+  const form = input.closest("form");
+  if (form === null) {
+    throw new Error("expected the search input to be inside a form");
+  }
+  fireEvent.submit(form);
+}
+
+afterEach(cleanup);
+
+describe("BrowserNewTabScreen", () => {
+  it("submits the trimmed query to the default engine and clears the field", () => {
+    const { onNavigateInput } = renderScreen();
+    const input = screen.getByRole<HTMLInputElement>("textbox", {
+      name: SEARCH_LABEL,
+    });
+
+    fireEvent.change(input, { target: { value: "  claude code  " } });
+    submitSearch(input);
+
+    expect(onNavigateInput).toHaveBeenCalledWith("claude code");
+    expect(input.value).toBe("");
+  });
+
+  it("ignores a blank submit", () => {
+    const { onNavigateInput } = renderScreen();
+    const input = screen.getByRole("textbox", { name: SEARCH_LABEL });
+
+    fireEvent.change(input, { target: { value: "   " } });
+    submitSearch(input);
+
+    expect(onNavigateInput).not.toHaveBeenCalled();
+  });
+
+  it("lists recently visited entries and opens one", () => {
+    const now = Date.now();
+    const recent: BrowserHistoryEntry[] = [
+      {
+        url: "https://example.com/a",
+        title: "Example A",
+        visitedAt: now - 90_000,
+      },
+      {
+        url: "https://docs.test.dev",
+        title: null,
+        visitedAt: now - 3_600_000,
+      },
+    ];
+    const { onNavigateInput } = renderScreen({ recent });
+
+    const list = screen.getByRole("list", { name: "Recently visited" });
+    expect(within(list).getByText("Example A")).toBeTruthy();
+    // A null title falls back to the host, rendered once (no duplicate line).
+    expect(within(list).getAllByText("docs.test.dev")).toHaveLength(1);
+
+    fireEvent.click(within(list).getByRole("button", { name: /Example A/u }));
+
+    expect(onNavigateInput).toHaveBeenCalledWith("https://example.com/a");
+  });
+
+  it("clears recently visited", () => {
+    const recent: BrowserHistoryEntry[] = [
+      { url: "https://example.com", title: "Example", visitedAt: Date.now() },
+    ];
+    const { onClearRecent } = renderScreen({ recent });
+
+    fireEvent.click(
+      screen.getByRole("button", { name: "Clear recently visited" }),
+    );
+
+    expect(onClearRecent).toHaveBeenCalledTimes(1);
+  });
+
+  it("omits the recently-visited section when there is no history", () => {
+    renderScreen({ recent: [] });
+
+    expect(screen.queryByText("Recently visited")).toBeNull();
+  });
+
+  it("drops the isolated-session tag", () => {
+    renderScreen({
+      recent: [{ url: "https://example.com", title: "Example", visitedAt: Date.now() }],
+    });
+
+    expect(screen.queryByText(/isolated session/iu)).toBeNull();
+  });
+});
diff --git a/apps/app/src/components/secondary-panel/BrowserNewTabScreen.tsx b/apps/app/src/components/secondary-panel/BrowserNewTabScreen.tsx
new file mode 100644
index 000000000..d5606ea32
--- /dev/null
+++ b/apps/app/src/components/secondary-panel/BrowserNewTabScreen.tsx
@@ -0,0 +1,164 @@
+import { useState, type FormEvent, type ReactNode } from "react";
+import { Icon } from "@/components/ui/icon.js";
+import { Input } from "@/components/ui/input.js";
+import { cn } from "@/lib/utils";
+import { getBrowserUrlHost } from "@/lib/browser-url";
+import { formatRelativeTime } from "@/lib/relative-time";
+import type { BrowserHistoryEntry } from "@/lib/browser-history";
+
+interface BrowserNewTabScreenProps {
+  onNavigateInput: (rawInput: string) => void;
+  recent: readonly BrowserHistoryEntry[];
+  onClearRecent: () => void;
+}
+
+interface BrowserRowButtonProps {
+  url: string;
+  onSelect: () => void;
+  children: ReactNode;
+}
+
+interface BrowserRecentRowProps {
+  entry: BrowserHistoryEntry;
+  now: number;
+  onNavigate: (url: string) => void;
+}
+
+// Match the secondary-panel launcher (NewTabFileSearch): uppercase section
+// labels, hairline-bordered chips, and dense rows that share the app's tokens.
+const SECTION_LABEL_CLASS =
+  "px-1 text-xs font-medium uppercase tracking-wider text-subtle-foreground";
+const ROW_BASE_CLASS =
+  "group flex w-full min-w-0 items-center gap-2.5 rounded-md px-2 py-1.5 text-left transition-colors hover:bg-state-hover focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring";
+const ROW_CHIP_CLASS =
+  "flex size-7 shrink-0 items-center justify-center overflow-hidden rounded-md border border-border-hairline bg-surface-raised text-muted-foreground";
+
+// Shared row shell for recently-visited rows, mirroring the launcher's
+// LauncherTile so hover, focus, and density stay identical.
+function BrowserRowButton({ url, onSelect, children }: BrowserRowButtonProps) {
+  return (
+    <button
+      type="button"
+      onClick={onSelect}
+      title={url}
+      className={ROW_BASE_CLASS}
+    >
+      {children}
+    </button>
+  );
+}
+
+function BrowserRecentRow({ entry, now, onNavigate }: BrowserRecentRowProps) {
+  const host = getBrowserUrlHost(entry.url);
+  const title = entry.title?.trim();
+  const primary = title && title.length > 0 ? title : host;
+  const relativeTime = formatRelativeTime({ timestamp: entry.visitedAt, now });
+
+  return (
+    <BrowserRowButton url={entry.url} onSelect={() => onNavigate(entry.url)}>
+      <span className={ROW_CHIP_CLASS}>
+        <Icon name="Globe" className="size-3.5" aria-hidden />
+      </span>
+      <span className="flex min-w-0 flex-1 flex-col">
+        <span className="truncate text-sm text-foreground">{primary}</span>
+        {primary !== host ? (
+          <span className="truncate font-mono text-xs text-muted-foreground">
+            {host}
+          </span>
+        ) : null}
+      </span>
+      <span className="ml-auto flex shrink-0 items-center justify-end">
+        <span className="whitespace-nowrap text-xs text-muted-foreground group-hover:hidden">
+          {relativeTime}
+        </span>
+        <span
+          className="hidden items-center gap-1 text-xs text-subtle-foreground group-hover:flex"
+          aria-hidden
+        >
+          <Icon name="ArrowUpRight" className="size-3" aria-hidden />
+          open
+        </span>
+      </span>
+    </BrowserRowButton>
+  );
+}
+
+export function BrowserNewTabScreen({
+  onNavigateInput,
+  recent,
+  onClearRecent,
+}: BrowserNewTabScreenProps) {
+  const [query, setQuery] = useState("");
+  const now = Date.now();
+
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const trimmed = query.trim();
+    if (trimmed.length === 0) {
+      return;
+    }
+    onNavigateInput(trimmed);
+    setQuery("");
+  };
+
+  return (
+    <div className="flex h-full flex-col overflow-y-auto px-4 pb-6 pt-8">
+      <div className="mx-auto flex w-full max-w-xl flex-col gap-6">
+        <div>
+          <form onSubmit={handleSubmit} className="relative">
+            <Icon
+              name="Search"
+              className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"
+              aria-hidden
+            />
+            <Input
+              type="text"
+              value={query}
+              onChange={(event) => setQuery(event.target.value)}
+              placeholder="Search the web or type a URL"
+              aria-label="Search the web or type a URL"
+              autoComplete="off"
+              spellCheck={false}
+              className="pl-9"
+            />
+          </form>
+          <p className="mt-2 px-1 text-xs text-muted-foreground">
+            Searches go to your default engine.
+          </p>
+        </div>
+
+        {recent.length > 0 ? (
+          <section>
+            <div
+              className={cn(SECTION_LABEL_CLASS, "mb-1.5 flex items-baseline gap-2")}
+            >
+              <span>Recently visited</span>
+              <span className="font-mono text-xs font-normal normal-case tracking-normal text-muted-foreground opacity-80">
+                {recent.length}
+              </span>
+              <button
+                type="button"
+                onClick={onClearRecent}
+                aria-label="Clear recently visited"
+                className="ml-auto rounded text-xs font-normal normal-case tracking-normal text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+              >
+                Clear
+              </button>
+            </div>
+            <ul aria-label="Recently visited" className="flex flex-col gap-px">
+              {recent.map((entry) => (
+                <li key={entry.url}>
+                  <BrowserRecentRow
+                    entry={entry}
+                    now={now}
+                    onNavigate={onNavigateInput}
+                  />
+                </li>
+              ))}
+            </ul>
+          </section>
+        ) : null}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/app/src/components/secondary-panel/BrowserTabContent.tsx b/apps/app/src/components/secondary-panel/BrowserTabContent.tsx
new file mode 100644
index 000000000..fe0a6858c
--- /dev/null
+++ b/apps/app/src/components/secondary-panel/BrowserTabContent.tsx
@@ -0,0 +1,425 @@
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type FormEvent,
+} from "react";
+import type {
+  BbDesktopBrowserApi,
+  BbDesktopBrowserState,
+  BbDesktopBrowserViewBounds,
+} from "@bb/server-contract";
+import { Icon } from "@/components/ui/icon.js";
+import { getDesktopBrowserApi } from "@/lib/bb-desktop";
+import {
+  getBrowserUrlSecurity,
+  resolveBrowserAddressInput,
+} from "@/lib/browser-url";
+import { useBrowserHistory } from "@/lib/browser-history";
+import { BrowserNewTabScreen } from "./BrowserNewTabScreen";
+import type { BrowserViewVisibilityCoordinator } from "./browserViewVisibilityCoordinator";
+import type { UpdateBrowserTabArgs } from "./useThreadFileTabs";
+
+export interface BrowserTabContentProps {
+  tabId: string;
+  initialUrl: string;
+  /**
+   * Whether this browser tab is the visible, active panel tab. The native view
+   * stays attached (and its page intact) across deactivation; only its
+   * visibility follows this flag, so switching tabs never destroys/reloads it.
+   */
+  isActive: boolean;
+  /**
+   * Deck-owned coordinator that serializes view visibility so the previously
+   * shown view is always hidden before this one is shown (no two native overlays
+   * visible at once). Null on the web build, where there is no native view.
+   */
+  visibilityCoordinator: BrowserViewVisibilityCoordinator | null;
+  threadId: string;
+  onUpdate: (args: UpdateBrowserTabArgs) => void;
+}
+
+interface BrowserChromeProps {
+  addressDraft: string;
+  isEditing: boolean;
+  state: BbDesktopBrowserState | null;
+  currentUrl: string;
+  onAddressChange: (value: string) => void;
+  onAddressFocus: () => void;
+  onAddressBlur: () => void;
+  onSubmit: (event: FormEvent<HTMLFormElement>) => void;
+  onBack: () => void;
+  onForward: () => void;
+  onReloadOrStop: () => void;
+}
+
+interface NavButtonProps {
+  icon: "ChevronLeft" | "ChevronRight" | "RotateCcw" | "X";
+  label: string;
+  disabled?: boolean;
+  onClick: () => void;
+}
+
+function roundedBoundsFromRect(rect: DOMRect): BbDesktopBrowserViewBounds {
+  return {
+    x: Math.round(rect.left),
+    y: Math.round(rect.top),
+    width: Math.round(rect.width),
+    height: Math.round(rect.height),
+  };
+}
+
+function NavButton({ icon, label, disabled, onClick }: NavButtonProps) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      aria-label={label}
+      title={label}
+      className="flex size-7 shrink-0 items-center justify-center rounded-md text-foreground transition-colors hover:bg-state-hover focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40"
+    >
+      <Icon name={icon} className="size-4" aria-hidden />
+    </button>
+  );
+}
+
+function BrowserChrome({
+  addressDraft,
+  isEditing,
+  state,
+  currentUrl,
+  onAddressChange,
+  onAddressFocus,
+  onAddressBlur,
+  onSubmit,
+  onBack,
+  onForward,
+  onReloadOrStop,
+}: BrowserChromeProps) {
+  const isLoading = state?.isLoading ?? false;
+  const security = getBrowserUrlSecurity(currentUrl);
+  const addressValue = isEditing ? addressDraft : currentUrl;
+
+  return (
+    <div className="relative flex items-center gap-1 border-b border-border bg-card px-2 py-1.5">
+      <NavButton
+        icon="ChevronLeft"
+        label="Go back"
+        disabled={!(state?.canGoBack ?? false)}
+        onClick={onBack}
+      />
+      <NavButton
+        icon="ChevronRight"
+        label="Go forward"
+        disabled={!(state?.canGoForward ?? false)}
+        onClick={onForward}
+      />
+      <NavButton
+        icon={isLoading ? "X" : "RotateCcw"}
+        label={isLoading ? "Stop loading" : "Reload"}
+        onClick={onReloadOrStop}
+      />
+      <form onSubmit={onSubmit} className="min-w-0 flex-1">
+        <div className="flex h-8 items-center gap-2 rounded-full border border-border bg-background px-3">
+          {security === "secure" ? (
+            <Icon
+              name="Lock"
+              className="size-3.5 shrink-0 text-success"
+              aria-label="Secure connection"
+            />
+          ) : security === "insecure" ? (
+            <Icon
+              name="AlertTriangle"
+              className="size-3.5 shrink-0 text-warning"
+              aria-label="Connection not secure"
+            />
+          ) : (
+            <Icon
+              name="Search"
+              className="size-3.5 shrink-0 text-muted-foreground"
+              aria-hidden
+            />
+          )}
+          <input
+            type="text"
+            value={addressValue}
+            onChange={(event) => onAddressChange(event.target.value)}
+            onFocus={onAddressFocus}
+            onBlur={onAddressBlur}
+            placeholder="Search or enter address"
+            aria-label="Address and search bar"
+            autoComplete="off"
+            spellCheck={false}
+            className="min-w-0 flex-1 bg-transparent font-mono text-xs text-foreground outline-none placeholder:font-sans placeholder:text-muted-foreground"
+          />
+        </div>
+      </form>
+      {isLoading ? (
+        <span className="absolute inset-x-0 bottom-0 h-0.5 overflow-hidden">
+          <span className="block h-full w-1/3 animate-pulse bg-ring" />
+        </span>
+      ) : null}
+    </div>
+  );
+}
+
+function BrowserUnavailable() {
+  return (
+    <div className="flex h-full flex-col items-center justify-center gap-3 px-6 text-center">
+      <span className="flex size-11 items-center justify-center rounded-xl border border-border bg-card text-muted-foreground">
+        <Icon name="Globe" className="size-6" aria-hidden />
+      </span>
+      <div className="text-sm font-medium text-foreground">
+        Browser tabs need the desktop app
+      </div>
+      <p className="max-w-xs text-xs text-muted-foreground">
+        The in-app web browser runs in the bb desktop app. Open this thread there
+        to browse the web.
+      </p>
+    </div>
+  );
+}
+
+export function BrowserTabContent({
+  tabId,
+  initialUrl,
+  isActive,
+  visibilityCoordinator,
+  threadId,
+  onUpdate,
+}: BrowserTabContentProps) {
+  const desktopBrowser = useMemo<BbDesktopBrowserApi | null>(
+    () => getDesktopBrowserApi(),
+    [],
+  );
+  const contentRef = useRef<HTMLDivElement>(null);
+  const { entries: recent, recordVisit, clear: clearRecent } =
+    useBrowserHistory(threadId);
+
+  const [state, setState] = useState<BbDesktopBrowserState | null>(null);
+  const [currentUrl, setCurrentUrl] = useState(initialUrl);
+  const [addressDraft, setAddressDraft] = useState(initialUrl);
+  const [isEditing, setIsEditing] = useState(false);
+
+  // Keep the latest persistence/visit callbacks in refs so the attach effect can
+  // run once per tab without re-subscribing when these identities change.
+  const onUpdateRef = useRef(onUpdate);
+  const recordVisitRef = useRef(recordVisit);
+  onUpdateRef.current = onUpdate;
+  recordVisitRef.current = recordVisit;
+  // The URL to load when the view is first created. Captured once so navigation
+  // (which updates the persisted `initialUrl` prop) never re-runs the attach
+  // effect — and the live view keeps its page across tab switches.
+  const initialUrlRef = useRef(initialUrl);
+  // Mount-time active state, read by the create-once attach effect without
+  // re-running it when activeness later changes (the visibility effect owns that).
+  const isActiveRef = useRef(isActive);
+  isActiveRef.current = isActive;
+
+  const hasPage = currentUrl.length > 0;
+
+  // Pending rAF handle for the coalesced bounds sync, so a burst of resize ticks
+  // collapses to a single native setBounds per frame.
+  const boundsSyncFrameRef = useRef<number | null>(null);
+
+  // Push the current content-rect to the native overlay immediately. The
+  // coordinator's show() calls this synchronously so bounds always land before
+  // the view is made visible (never a stale/zero-bounds flash on activation).
+  const syncBounds = useCallback(() => {
+    const element = contentRef.current;
+    if (element === null || desktopBrowser === null) {
+      return;
+    }
+    desktopBrowser.setBounds({
+      tabId,
+      bounds: roundedBoundsFromRect(element.getBoundingClientRect()),
+    });
+  }, [desktopBrowser, tabId]);
+
+  // rAF-coalesced bounds sync for live resize tracking. A drag-resize fires the
+  // ResizeObserver (and `window` resize) repeatedly; batching to one setBounds
+  // per frame lets the visible overlay follow the panel smoothly — far better
+  // than blanking the view for the whole drag, which flashed.
+  const scheduleBoundsSync = useCallback(() => {
+    if (boundsSyncFrameRef.current !== null) {
+      return;
+    }
+    boundsSyncFrameRef.current = window.requestAnimationFrame(() => {
+      boundsSyncFrameRef.current = null;
+      syncBounds();
+    });
+  }, [syncBounds]);
+
+  // Create the native view on mount, stream navigation state back, and tear it
+  // down on unmount. Because the deck keeps every open browser tab mounted, this
+  // unmounts only when the tab is CLOSED (or the panel/thread unmounts) — never
+  // on mere deactivation — so the view (and its page + scroll) survives tab
+  // switches. Destroying on unmount keeps the lifecycle leak-free.
+  useEffect(() => {
+    if (desktopBrowser === null) {
+      return;
+    }
+    const element = contentRef.current;
+    const initialBounds =
+      element !== null
+        ? roundedBoundsFromRect(element.getBoundingClientRect())
+        : { x: 0, y: 0, width: 0, height: 0 };
+    const mountUrl = initialUrlRef.current;
+    desktopBrowser.attach({
+      tabId,
+      url: mountUrl,
+      bounds: initialBounds,
+      // Only the active tab's view starts visible; background tabs attach hidden
+      // (their page still loads) until activated.
+      visible: isActiveRef.current && mountUrl.length > 0,
+    });
+
+    const unsubscribe = desktopBrowser.onState((nextState) => {
+      if (nextState.tabId !== tabId) {
+        return;
+      }
+      setState(nextState);
+      setCurrentUrl(nextState.url);
+      onUpdateRef.current({
+        tabId,
+        url: nextState.url,
+        title: nextState.title,
+      });
+      if (!nextState.isLoading && nextState.url.length > 0) {
+        recordVisitRef.current({
+          url: nextState.url,
+          title: nextState.title,
+        });
+      }
+    });
+
+    return () => {
+      unsubscribe();
+      // Forget this tab before destroying its view so a subsequent show on
+      // another tab does not try to hide a view that no longer exists.
+      visibilityCoordinator?.release(tabId);
+      desktopBrowser.detach(tabId);
+    };
+  }, [desktopBrowser, visibilityCoordinator, tabId]);
+
+  // Track the panel content rect so the native overlay stays aligned — including
+  // throughout a drag-resize, where the rect changes every frame. Coalesced via
+  // rAF so the overlay follows the live size instead of being hidden.
+  useEffect(() => {
+    const element = contentRef.current;
+    if (element === null || desktopBrowser === null) {
+      return;
+    }
+    const observer = new ResizeObserver(() => {
+      scheduleBoundsSync();
+    });
+    observer.observe(element);
+    window.addEventListener("resize", scheduleBoundsSync);
+    return () => {
+      observer.disconnect();
+      window.removeEventListener("resize", scheduleBoundsSync);
+      if (boundsSyncFrameRef.current !== null) {
+        window.cancelAnimationFrame(boundsSyncFrameRef.current);
+        boundsSyncFrameRef.current = null;
+      }
+    };
+  }, [desktopBrowser, scheduleBoundsSync]);
+
+  // The native view is shown whenever this tab is the active panel tab and has a
+  // page. It is NOT hidden during a drag-resize — the overlay tracks the live
+  // bounds (see the ResizeObserver effect) so it follows the panel smoothly
+  // instead of blanking and flashing. It stays attached when hidden, so
+  // deactivation never reloads it. (Collapse/expand of the panel toggles
+  // `isActive`, which hides the view outright rather than chasing a CSS
+  // transition the overlay cannot clip to.)
+  const isViewVisible = isActive && hasPage;
+  // A layout effect (pre-paint) declares visibility so showing/hiding lands in
+  // the same frame as the DOM tab swap — no flash. Ordering across tabs (hide
+  // the previously-visible view BEFORE showing this one) and bounds-before-show
+  // are owned by the deck's coordinator, so two native overlays never overlap
+  // regardless of the order children's effects run in.
+  useLayoutEffect(() => {
+    if (visibilityCoordinator === null) {
+      return;
+    }
+    if (isViewVisible) {
+      visibilityCoordinator.show(tabId, syncBounds);
+      return;
+    }
+    visibilityCoordinator.hide(tabId);
+  }, [visibilityCoordinator, tabId, isViewVisible, syncBounds]);
+
+  const navigateToInput = useCallback(
+    (rawInput: string) => {
+      const url = resolveBrowserAddressInput(rawInput);
+      if (url === null) {
+        return;
+      }
+      setCurrentUrl(url);
+      setIsEditing(false);
+      desktopBrowser?.navigate({ tabId, url });
+    },
+    [desktopBrowser, tabId],
+  );
+
+  const handleAddressSubmit = useCallback(
+    (event: FormEvent<HTMLFormElement>) => {
+      event.preventDefault();
+      navigateToInput(addressDraft);
+    },
+    [addressDraft, navigateToInput],
+  );
+
+  const handleAddressFocus = useCallback(() => {
+    setAddressDraft(currentUrl);
+    setIsEditing(true);
+  }, [currentUrl]);
+
+  const handleReloadOrStop = useCallback(() => {
+    if (state?.isLoading ?? false) {
+      desktopBrowser?.stop(tabId);
+      return;
+    }
+    desktopBrowser?.reload(tabId);
+  }, [desktopBrowser, state?.isLoading, tabId]);
+
+  if (desktopBrowser === null) {
+    return <BrowserUnavailable />;
+  }
+
+  return (
+    <div className="flex h-full min-h-0 flex-col">
+      <BrowserChrome
+        addressDraft={addressDraft}
+        isEditing={isEditing}
+        state={state}
+        currentUrl={currentUrl}
+        onAddressChange={setAddressDraft}
+        onAddressFocus={handleAddressFocus}
+        onAddressBlur={() => setIsEditing(false)}
+        onSubmit={handleAddressSubmit}
+        onBack={() => desktopBrowser.goBack(tabId)}
+        onForward={() => desktopBrowser.goForward(tabId)}
+        onReloadOrStop={handleReloadOrStop}
+      />
+      {state?.errorText != null && hasPage ? (
+        <div className="border-b border-border bg-destructive/10 px-3 py-2 text-xs text-destructive">
+          {state.errorText}
+        </div>
+      ) : null}
+      <div ref={contentRef} className="relative min-h-0 flex-1">
+        {hasPage ? null : (
+          <BrowserNewTabScreen
+            onNavigateInput={navigateToInput}
+            recent={recent}
+            onClearRecent={clearRecent}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/app/src/components/secondary-panel/BrowserTabDeck.test.tsx b/apps/app/src/components/secondary-panel/BrowserTabDeck.test.tsx
new file mode 100644
index 000000000..3dbc07583
--- /dev/null
+++ b/apps/app/src/components/secondary-panel/BrowserTabDeck.test.tsx
@@ -0,0 +1,477 @@
+// @vitest-environment jsdom
+
+import { act, cleanup, render } from "@testing-library/react";
+import { getDefaultStore } from "jotai";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type {
+  BbDesktopApi,
+  BbDesktopBrowserApi,
+  BbDesktopInfo,
+  BbDesktopInfoChangeHandler,
+} from "@bb/server-contract";
+import type { BrowserFixedPanelTab } from "@/lib/fixed-panel-tabs-state";
+import { BrowserTabDeck } from "./BrowserTabDeck";
+import { threadSecondaryPanelResizingAtom } from "./threadSecondaryPanelAtoms";
+
+interface RecordedBrowserCall {
+  method: "attach" | "detach" | "setVisible" | "setBounds" | "navigate";
+  tabId: string;
+  visible: boolean | null;
+}
+
+interface RecordingBrowserApi {
+  api: BbDesktopBrowserApi;
+  calls: RecordedBrowserCall[];
+}
+
+const DESKTOP_INFO: BbDesktopInfo = {
+  lastCheckedAt: null,
+  latestVersion: null,
+  pendingVersion: null,
+  platform: "macos",
+  updateAvailable: false,
+  updateDownloaded: false,
+  version: "0.0.1",
+};
+
+function createRecordingBrowserApi(): RecordingBrowserApi {
+  const calls: RecordedBrowserCall[] = [];
+  const api: BbDesktopBrowserApi = {
+    attach(request) {
+      calls.push({
+        method: "attach",
+        tabId: request.tabId,
+        visible: request.visible,
+      });
+    },
+    detach(tabId) {
+      calls.push({ method: "detach", tabId, visible: null });
+    },
+    navigate(request) {
+      calls.push({ method: "navigate", tabId: request.tabId, visible: null });
+    },
+    goBack() {},
+    goForward() {},
+    reload() {},
+    stop() {},
+    setBounds(request) {
+      calls.push({ method: "setBounds", tabId: request.tabId, visible: null });
+    },
+    setVisible(request) {
+      calls.push({
+        method: "setVisible",
+        tabId: request.tabId,
+        visible: request.visible,
+      });
+    },
+    onState() {
+      return () => {};
+    },
+    onOpenTab() {
+      return () => {};
+    },
+  };
+  return { api, calls };
+}
+
+function installDesktopBrowserApi(browser: BbDesktopBrowserApi): void {
+  const desktop: BbDesktopApi = {
+    ...DESKTOP_INFO,
+    browser,
+    async checkForUpdates() {
+      return DESKTOP_INFO;
+    },
+    async getInfo() {
+      return DESKTOP_INFO;
+    },
+    async installUpdate() {
+      return undefined;
+    },
+    onChange(_listener: BbDesktopInfoChangeHandler) {
+      return () => undefined;
+    },
+    setTheme() {},
+  };
+  window.bbDesktop = desktop;
+}
+
+function browserTab(id: string, url: string): BrowserFixedPanelTab {
+  return { id, kind: "browser", title: null, url };
+}
+
+const TAB_A = browserTab("browser:a", "https://a.example/");
+const TAB_B = browserTab("browser:b", "https://b.example/");
+
+function visibilityFor(
+  calls: readonly RecordedBrowserCall[],
+  tabId: string,
+): boolean | null {
+  for (let index = calls.length - 1; index >= 0; index -= 1) {
+    const call = calls[index];
+    if (
+      call &&
+      call.tabId === tabId &&
+      (call.method === "setVisible" || call.method === "attach")
+    ) {
+      return call.visible;
+    }
+  }
+  return null;
+}
+
+// Replays the recorded calls and returns the largest number of native views
+// that were visible at the same time. Must always be ≤ 1: a native overlay is
+// not hidden by `display:none`, so two visible views would overlap on screen.
+function maxConcurrentVisible(calls: readonly RecordedBrowserCall[]): number {
+  const visible = new Set<string>();
+  let max = 0;
+  for (const call of calls) {
+    if (call.method === "attach" || call.method === "setVisible") {
+      if (call.visible === true) {
+        visible.add(call.tabId);
+      } else if (call.visible === false) {
+        visible.delete(call.tabId);
+      }
+    } else if (call.method === "detach") {
+      visible.delete(call.tabId);
+    }
+    max = Math.max(max, visible.size);
+  }
+  return max;
+}
+
+afterEach(() => {
+  cleanup();
+  delete window.bbDesktop;
+  window.localStorage.clear();
+  // The resizing flag lives in the default jotai store, which persists across
+  // tests in this module; reset it so a resize test never leaks into the next.
+  getDefaultStore().set(threadSecondaryPanelResizingAtom, false);
+});
+
+describe("BrowserTabDeck", () => {
+  it("creates a live view for every open browser tab and shows only the active one", () => {
+    const { api, calls } = createRecordingBrowserApi();
+    installDesktopBrowserApi(api);
+
+    render(
+      <BrowserTabDeck
+        browserTabs={[TAB_A, TAB_B]}
+        activeBrowserTabId={TAB_A.id}
+        isPanelOpen
+        threadId="thr_test"
+        onUpdate={() => {}}
+      />,
+    );
+
+    const attached = calls.filter((call) => call.method === "attach");
+    expect(attached.map((call) => call.tabId).sort()).toEqual([
+      TAB_A.id,
+      TAB_B.id,
+    ]);
+    // The active tab is shown; the background tab stays attached but hidden.
+    expect(visibilityFor(calls, TAB_A.id)).toBe(true);
+    expect(visibilityFor(calls, TAB_B.id)).toBe(false);
+  });
+
+  it("keeps both views alive across a tab switch — no detach, no re-attach", () => {
+    const { api, calls } = createRecordingBrowserApi();
+    installDesktopBrowserApi(api);
+
+    const { rerender } = render(
+      <BrowserTabDeck
+        browserTabs={[TAB_A, TAB_B]}
+        activeBrowserTabId={TAB_A.id}
+        isPanelOpen
+        threadId="thr_test"
+        onUpdate={() => {}}
+      />,
+    );
+
+    calls.length = 0;
+
+    // Switch the active tab from A to B and back to A.
+    rerender(
+      <BrowserTabDeck
+        browserTabs={[TAB_A, TAB_B]}
+        activeBrowserTabId={TAB_B.id}
+        isPanelOpen
+        threadId="thr_test"
+        onUpdate={() => {}}
+      />,
+    );
+    rerender(
+      <BrowserTabDeck
+        browserTabs={[TAB_A, TAB_B]}
+        activeBrowserTabId={TAB_A.id}
+        isPanelOpen
+        threadId="thr_test"
+        onUpdate={() => {}}
+      />,
+    );
+
+    // Deactivation must never tear a view down or recreate it.
+    expect(calls.some((call) => call.method === "detach")).toBe(false);
+    expect(calls.some((call) => call.method === "attach")).toBe(false);
+    // Visibility tracks the active tab: A ends up visible, B hidden.
+    expect(visibilityFor(calls, TAB_A.id)).toBe(true);
+    expect(visibilityFor(calls, TAB_B.id)).toBe(false);
+  });
+
+  it("syncs bounds before showing a newly-activated view (no stale-bounds flash)", () => {
+    const { api, calls } = createRecordingBrowserApi();
+    installDesktopBrowserApi(api);
+
+    const { rerender } = render(
+      <BrowserTabDeck
+        browserTabs={[TAB_A, TAB_B]}
+        activeBrowserTabId={TAB_A.id}
+        isPanelOpen
+        threadId="thr_test"
+        onUpdate={() => {}}
+      />,
+    );
+
+    calls.length = 0;
+
+    rerender(
+      <BrowserTabDeck
+        browserTabs={[TAB_A, TAB_B]}
+        activeBrowserTabId={TAB_B.id}
+        isPanelOpen
+        threadId="thr_test"
+        onUpdate={() => {}}
+      />,
+    );
+
+    const bTabCalls = calls.filter((call) => call.tabId === TAB_B.id);
+    const setBoundsIndex = bTabCalls.findIndex(
+      (call) => call.method === "setBounds",
+    );
+    const showIndex = bTabCalls.findIndex(
+      (call) => call.method === "setVisible" && call.visible === true,
+    );
+    expect(setBoundsIndex).toBeGreaterThanOrEqual(0);
+    expect(showIndex).toBeGreaterThanOrEqual(0);
+    expect(setBoundsIndex).toBeLessThan(showIndex);
+  });
+
+  it("hides the later view before showing the earlier one when switching B -> A", () => {
+    const { api, calls } = createRecordingBrowserApi();
+    installDesktopBrowserApi(api);
+
+    const { rerender } = render(
+      <BrowserTabDeck
+        browserTabs={[TAB_A, TAB_B]}
+        activeBrowserTabId={TAB_A.id}
+        isPanelOpen
+        threadId="thr_test"
+        onUpdate={() => {}}
+      />,
+    );
+
+    // Forward to the later tab, then back to the earlier one — the case where
+    // the newly-active child's effect runs before the previously-active one's.
+    rerender(
+      <BrowserTabDeck
+        browserTabs={[TAB_A, TAB_B]}
+        activeBrowserTabId={TAB_B.id}
+        isPanelOpen
+        threadId="thr_test"
+        onUpdate={() => {}}
+      />,
+    );
+
+    calls.length = 0;
+
+    rerender(
+      <BrowserTabDeck
+        browserTabs={[TAB_A, TAB_B]}
+        activeBrowserTabId={TAB_A.id}
+        isPanelOpen
+        threadId="thr_test"
+        onUpdate={() => {}}
+      />,
+    );
+
+    const hideB = calls.findIndex(
+      (call) =>
+        call.method === "setVisible" &&
+        call.tabId === TAB_B.id &&
+        call.visible === false,
+    );
+    const showA = calls.findIndex(
+      (call) =>
+        call.method === "setVisible" &&
+        call.tabId === TAB_A.id &&
+        call.visible === true,
+    );
+    expect(hideB).toBeGreaterThanOrEqual(0);
+    expect(showA).toBeGreaterThanOrEqual(0);
+    expect(hideB).toBeLessThan(showA);
+    expect(calls.some((call) => call.method === "detach")).toBe(false);
+  });
+
+  it("never has two browser views visible at once across repeated switches", () => {
+    const { api, calls } = createRecordingBrowserApi();
+    installDesktopBrowserApi(api);
+
+    const { rerender } = render(
+      <BrowserTabDeck
+        browserTabs={[TAB_A, TAB_B]}
+        activeBrowserTabId={TAB_A.id}
+        isPanelOpen
+        threadId="thr_test"
+        onUpdate={() => {}}
+      />,
+    );
+
+    for (const activeId of [TAB_B.id, TAB_A.id, TAB_B.id, TAB_A.id]) {
+      rerender(
+        <BrowserTabDeck
+          browserTabs={[TAB_A, TAB_B]}
+          activeBrowserTabId={activeId}
+          isPanelOpen
+          threadId="thr_test"
+          onUpdate={() => {}}
+        />,
+      );
+    }
+
+    expect(maxConcurrentVisible(calls)).toBe(1);
+  });
+
+  it("destroys a view only when its tab is closed", () => {
+    const { api, calls } = createRecordingBrowserApi();
+    installDesktopBrowserApi(api);
+
+    const { rerender } = render(
+      <BrowserTabDeck
+        browserTabs={[TAB_A, TAB_B]}
+        activeBrowserTabId={TAB_B.id}
+        isPanelOpen
+        threadId="thr_test"
+        onUpdate={() => {}}
+      />,
+    );
+
+    calls.length = 0;
+
+    // Close tab A (it leaves the open-tabs list); B remains active.
+    rerender(
+      <BrowserTabDeck
+        browserTabs={[TAB_B]}
+        activeBrowserTabId={TAB_B.id}
+        isPanelOpen
+        threadId="thr_test"
+        onUpdate={() => {}}
+      />,
+    );
+
+    const detached = calls.filter((call) => call.method === "detach");
+    expect(detached.map((call) => call.tabId)).toEqual([TAB_A.id]);
+  });
+
+  it("hides the active view while the panel is closed without tearing it down", () => {
+    const { api, calls } = createRecordingBrowserApi();
+    installDesktopBrowserApi(api);
+
+    const { rerender } = render(
+      <BrowserTabDeck
+        browserTabs={[TAB_A]}
+        activeBrowserTabId={TAB_A.id}
+        isPanelOpen
+        threadId="thr_test"
+        onUpdate={() => {}}
+      />,
+    );
+
+    calls.length = 0;
+
+    rerender(
+      <BrowserTabDeck
+        browserTabs={[TAB_A]}
+        activeBrowserTabId={TAB_A.id}
+        isPanelOpen={false}
+        threadId="thr_test"
+        onUpdate={() => {}}
+      />,
+    );
+
+    expect(calls.some((call) => call.method === "detach")).toBe(false);
+    expect(visibilityFor(calls, TAB_A.id)).toBe(false);
+  });
+
+  it("keeps the active view visible and tracks its bounds while the panel is resized (no flash)", () => {
+    const { api, calls } = createRecordingBrowserApi();
+    installDesktopBrowserApi(api);
+    const store = getDefaultStore();
+
+    // Capture the callback the component subscribes its ResizeObserver with —
+    // the drag-resize path runs through THIS (the panel handle shrinks/grows the
+    // content element), not through `window.resize`. The shared jsdom polyfill
+    // never fires, so we drive the real path by invoking the captured callback.
+    const resizeCallbacks: Array<() => void> = [];
+    class CapturingResizeObserver {
+      constructor(callback: () => void) {
+        resizeCallbacks.push(callback);
+      }
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    }
+    vi.stubGlobal("ResizeObserver", CapturingResizeObserver);
+    // Run the rAF-coalesced bounds sync synchronously so the resize tick lands a
+    // setBounds within this test's `act` scope.
+    const requestFrame = vi
+      .spyOn(window, "requestAnimationFrame")
+      .mockImplementation((callback) => {
+        callback(0);
+        return 0;
+      });
+
+    render(
+      <BrowserTabDeck
+        browserTabs={[TAB_A]}
+        activeBrowserTabId={TAB_A.id}
+        isPanelOpen
+        threadId="thr_test"
+        onUpdate={() => {}}
+      />,
+    );
+    expect(resizeCallbacks.length).toBeGreaterThan(0);
+
+    const resizeStart = calls.length;
+    act(() => {
+      // Begin a drag-resize, then fire a ResizeObserver tick exactly as dragging
+      // the panel handle resizes the content element.
+      store.set(threadSecondaryPanelResizingAtom, true);
+      for (const fireResizeTick of resizeCallbacks) {
+        fireResizeTick();
+      }
+    });
+    const duringResize = calls.slice(resizeStart);
+
+    // The overlay must NOT be blanked mid-resize — hiding it for the whole drag
+    // was the flash this fixes.
+    expect(
+      duringResize.some(
+        (call) =>
+          call.method === "setVisible" &&
+          call.tabId === TAB_A.id &&
+          call.visible === false,
+      ),
+    ).toBe(false);
+    // Instead, the ResizeObserver tick syncs its bounds to the live panel size.
+    expect(
+      duringResize.some(
+        (call) => call.method === "setBounds" && call.tabId === TAB_A.id,
+      ),
+    ).toBe(true);
+    // Net effect: the active view stays visible throughout the resize.
+    expect(visibilityFor(calls, TAB_A.id)).toBe(true);
+
+    requestFrame.mockRestore();
+    vi.unstubAllGlobals();
+  });
+});
diff --git a/apps/app/src/components/secondary-panel/BrowserTabDeck.tsx b/apps/app/src/components/secondary-panel/BrowserTabDeck.tsx
new file mode 100644
index 000000000..b8d04803e
--- /dev/null
+++ b/apps/app/src/components/secondary-panel/BrowserTabDeck.tsx
@@ -0,0 +1,82 @@
+import { useMemo, useRef } from "react";
+import type { BrowserFixedPanelTab } from "@/lib/fixed-panel-tabs-state";
+import { getDesktopBrowserApi } from "@/lib/bb-desktop";
+import { cn } from "@/lib/utils";
+import { BrowserTabContent } from "./BrowserTabContent";
+import {
+  createBrowserViewVisibilityCoordinator,
+  type BrowserViewVisibilityCoordinator,
+} from "./browserViewVisibilityCoordinator";
+import type { UpdateBrowserTabArgs } from "./useThreadFileTabs";
+
+export interface BrowserTabDeckProps {
+  browserTabs: readonly BrowserFixedPanelTab[];
+  activeBrowserTabId: string | null;
+  /** Whether the secondary panel is open; gates the active view's visibility. */
+  isPanelOpen: boolean;
+  threadId: string;
+  onUpdate: (args: UpdateBrowserTabArgs) => void;
+}
+
+/**
+ * Renders every open browser tab at once, keeping each tab's native
+ * `WebContentsView` mounted (and its page + scroll intact) for the tab's whole
+ * lifetime. Only the active tab is laid out and visible; the rest are
+ * `display:none` with their views hidden — so switching tabs is a visibility
+ * toggle, never a destroy/recreate + reload. A tab's view is torn down only when
+ * its `BrowserTabContent` unmounts, i.e. when the tab is closed or the panel /
+ * thread unmounts.
+ *
+ * Mounted regardless of which panel tab is active so the views survive switching
+ * to a non-browser tab; the whole deck collapses to `display:none` when no
+ * browser tab is active.
+ */
+export function BrowserTabDeck({
+  browserTabs,
+  activeBrowserTabId,
+  isPanelOpen,
+  threadId,
+  onUpdate,
+}: BrowserTabDeckProps) {
+  const desktopBrowser = useMemo(() => getDesktopBrowserApi(), []);
+  // One coordinator per deck owns the cross-tab visibility ordering for the
+  // lifetime of the panel; created once (the native bridge identity is stable).
+  const coordinatorRef = useRef<BrowserViewVisibilityCoordinator | null>(null);
+  if (desktopBrowser !== null && coordinatorRef.current === null) {
+    coordinatorRef.current =
+      createBrowserViewVisibilityCoordinator(desktopBrowser);
+  }
+  const visibilityCoordinator = coordinatorRef.current;
+
+  if (browserTabs.length === 0) {
+    return null;
+  }
+  const isBrowserTabActive = activeBrowserTabId !== null;
+  return (
+    <div
+      className={cn(
+        "min-h-0 flex-1",
+        isBrowserTabActive ? "flex flex-col" : "hidden",
+      )}
+    >
+      {browserTabs.map((tab) => {
+        const isActive = tab.id === activeBrowserTabId;
+        return (
+          <div
+            key={tab.id}
+            className={cn(isActive ? "flex min-h-0 flex-1 flex-col" : "hidden")}
+          >
+            <BrowserTabContent
+              tabId={tab.id}
+              initialUrl={tab.url}
+              isActive={isActive && isPanelOpen}
+              visibilityCoordinator={visibilityCoordinator}
+              threadId={threadId}
+              onUpdate={onUpdate}
+            />
+          </div>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/apps/app/src/components/secondary-panel/ConversationCollapsedRail.test.tsx b/apps/app/src/components/secondary-panel/ConversationCollapsedRail.test.tsx
new file mode 100644
index 000000000..b811909d5
--- /dev/null
+++ b/apps/app/src/components/secondary-panel/ConversationCollapsedRail.test.tsx
@@ -0,0 +1,72 @@
+// @vitest-environment jsdom
+
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { ConversationCollapsedRail } from "./ConversationCollapsedRail";
+import { MACOS_WINDOW_DRAG_CLASS } from "@/lib/bb-desktop";
+
+const noop = () => {};
+const RECESSED_BG_CLASS = "bg-surface-recessed";
+const TRAFFIC_LIGHT_STRIP_TESTID =
+  "conversation-collapsed-rail-traffic-light-strip";
+
+afterEach(() => {
+  cleanup();
+});
+
+function getExpandButton(): HTMLElement {
+  return screen.getByRole("button", { name: "Expand conversation" });
+}
+
+describe("ConversationCollapsedRail", () => {
+  it("reserves a transparent window-drag strip above the recessed body when desktop-macOS chrome owns the top-left", () => {
+    render(
+      <ConversationCollapsedRail
+        collapsed
+        isWorking={false}
+        reserveTopForDesktopTrafficLights
+        onExpand={noop}
+      />,
+    );
+
+    const strip = screen.getByTestId(TRAFFIC_LIGHT_STRIP_TESTID);
+    // The strip is the window-drag region the traffic lights sit on...
+    expect(strip.className).toContain(MACOS_WINDOW_DRAG_CLASS);
+    // ...and it must NOT carry the recessed background, so the lights render on
+    // clean title-bar chrome instead of on top of the rail.
+    expect(strip.className).not.toContain(RECESSED_BG_CLASS);
+    // The recessed background lives on the body below the strip, not the strip.
+    expect(getExpandButton().className).toContain(RECESSED_BG_CLASS);
+  });
+
+  it("does not reserve a top strip when the sidebar (or web chrome) is covering the traffic lights", () => {
+    render(
+      <ConversationCollapsedRail
+        collapsed
+        isWorking={false}
+        reserveTopForDesktopTrafficLights={false}
+        onExpand={noop}
+      />,
+    );
+
+    // No traffic lights to clear: the recessed body fills the full height with
+    // no transparent strip above it.
+    expect(screen.queryByTestId(TRAFFIC_LIGHT_STRIP_TESTID)).toBeNull();
+    expect(getExpandButton().className).toContain(RECESSED_BG_CLASS);
+  });
+
+  it("keeps the rail keyboard-accessible regardless of the reserve", () => {
+    render(
+      <ConversationCollapsedRail
+        collapsed
+        isWorking={false}
+        reserveTopForDesktopTrafficLights
+        onExpand={noop}
+      />,
+    );
+
+    const button = getExpandButton();
+    expect(button.getAttribute("aria-hidden")).toBeNull();
+    expect(button.hasAttribute("inert")).toBe(false);
+  });
+});
diff --git a/apps/app/src/components/secondary-panel/ConversationCollapsedRail.tsx b/apps/app/src/components/secondary-panel/ConversationCollapsedRail.tsx
new file mode 100644
index 000000000..e0e26fb9b
--- /dev/null
+++ b/apps/app/src/components/secondary-panel/ConversationCollapsedRail.tsx
@@ -0,0 +1,109 @@
+import { Icon } from "@/components/ui/icon.js";
+import { MACOS_WINDOW_DRAG_CLASS } from "@/lib/bb-desktop";
+import { cn } from "@/lib/utils";
+import { PANEL_COLLAPSE_TRANSITION_CLASS } from "./panelTransitionTokens";
+
+interface ConversationCollapsedRailProps {
+  /**
+   * Whether the conversation is collapsed. The rail is the visible placeholder
+   * in that state; when expanded it animates to zero width and drops out of the
+   * tab order + a11y tree (the full conversation is the interactive surface).
+   */
+  collapsed: boolean;
+  /** Surfaces a live "working" signal so the tucked-away conversation still shows state. */
+  isWorking: boolean;
+  /**
+   * When true, reserve a transparent title-bar-height strip at the top of the
+   * rail so the macOS traffic lights sit on clean window chrome instead of on
+   * top of the rail's recessed background. Set by the parent only when the rail
+   * is actually the top-left-most surface (desktop macOS + main sidebar
+   * collapsed).
+   */
+  reserveTopForDesktopTrafficLights: boolean;
+  onExpand: () => void;
+}
+
+/**
+ * The 36px vertical bar that stands in for the conversation when it is collapsed
+ * so the secondary panel can fill the content area. The whole recessed body is
+ * the expand affordance; it sits where the conversation was, between the sidebar
+ * and the panel, showing a chat glyph that stands in for the conversation with a
+ * working indicator beneath it. (The canonical expand/collapse control is the
+ * panel-header toggle, so the rail carries no chevron of its own.)
+ *
+ * When the rail is the top-left-most surface on macOS desktop, a transparent
+ * window-drag strip is reserved above the recessed body (mirroring AppSidebar's
+ * top strip) so the traffic lights render on the title-bar chrome rather than on
+ * top of the rail.
+ */
+export function ConversationCollapsedRail({
+  collapsed,
+  isWorking,
+  reserveTopForDesktopTrafficLights,
+  onExpand,
+}: ConversationCollapsedRailProps) {
+  return (
+    <div
+      // Hidden from the a11y tree + tab order (and made non-interactive) while
+      // the conversation is shown; the rail only exists as a placeholder once
+      // collapsed. Applied to the whole rail so the drag strip drops out too.
+      aria-hidden={collapsed ? undefined : true}
+      inert={collapsed ? undefined : true}
+      className={cn(
+        "flex h-full shrink-0 flex-col overflow-hidden transition-[width,opacity]",
+        PANEL_COLLAPSE_TRANSITION_CLASS,
+        collapsed
+          ? "w-9 opacity-100 delay-[40ms]"
+          : "pointer-events-none w-0 opacity-0",
+      )}
+    >
+      {reserveTopForDesktopTrafficLights ? (
+        /*
+          Transparent title-bar-height drag strip that anchors the recessed rail
+          body below the macOS traffic-light cluster. It carries no
+          `bg-surface-recessed`, so the red/yellow/green lights sit on clean
+          window chrome instead of on top of the rail. Mirrors AppSidebar's top
+          window-drag strip and matches the 48px (`h-12`) title-bar height the
+          sidebar and secondary-panel chrome already use. This strip is the
+          single mechanism that offsets the body below the lights — the recessed
+          body carries no top margin of its own. Only rendered when the rail owns
+          the top-left; on web / under an expanded sidebar the body fills the
+          full height.
+        */
+        <div
+          data-testid="conversation-collapsed-rail-traffic-light-strip"
+          className={cn("h-12 shrink-0", MACOS_WINDOW_DRAG_CLASS)}
+        />
+      ) : null}
+      <button
+        type="button"
+        onClick={onExpand}
+        aria-label="Expand conversation"
+        aria-expanded={false}
+        title="Expand conversation"
+        className="flex min-h-0 w-full flex-1 flex-col items-center bg-surface-recessed py-3 text-muted-foreground outline-none hover:bg-state-hover focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
+      >
+        {/*
+          Chat glyph standing in for the collapsed conversation, centered in the
+          rail, with the working indicator pinned to the bottom. Both are
+          decorative — the whole recessed body is the button, and its aria-label
+          ("Expand conversation") carries the semantics for AT users. The
+          canonical expand/collapse control is the panel-header toggle; the rail
+          just reopens the conversation on click, so it no longer needs its own
+          chevron affordance.
+        */}
+        <span className="flex flex-1 items-center justify-center">
+          <Icon name="MessageSquare" className="size-4 shrink-0" aria-hidden="true" />
+        </span>
+        <span
+          className="flex h-4 w-4 shrink-0 items-center justify-center"
+          aria-hidden="true"
+        >
+          {isWorking ? (
+            <Icon name="CircleDashed" className="size-3.5 animate-spin" />
+          ) : null}
+        </span>
+      </button>
+    </div>
+  );
+}
diff --git a/apps/app/src/components/secondary-panel/NewTabFileSearch.test.tsx b/apps/app/src/components/secondary-panel/NewTabFileSearch.test.tsx
new file mode 100644
index 000000000..9d9b814e4
--- /dev/null
+++ b/apps/app/src/components/secondary-panel/NewTabFileSearch.test.tsx
@@ -0,0 +1,97 @@
+// @vitest-environment jsdom
+
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { cleanup, render, screen } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
+import { createElement, type ReactNode } from "react";
+import type { BbDesktopApi, BbDesktopInfo } from "@bb/server-contract";
+import { NewTabFileSearch } from "./NewTabFileSearch";
+import { createNoopDesktopBrowserApi } from "@/test/bb-desktop-test-utils";
+
+// The launcher's data sources are the only external boundary here; stub them so
+// the test focuses on whether the desktop-only Browser entry is gated correctly.
+vi.mock("@/hooks/useFileSearchSuggestions", () => ({
+  useFileSearchSuggestions: () => ({
+    suggestions: [],
+    isLoading: false,
+    isError: false,
+    isDebouncing: false,
+    isUnavailable: false,
+  }),
+}));
+
+vi.mock("@/hooks/usePromptDraftStorage", () => ({
+  usePromptDraftStorage: () => ({
+    storageKey: "draft-key",
+    getCurrent: () => ({ text: "", attachments: [] }),
+    setDraft: () => {},
+  }),
+}));
+
+const DESKTOP_INFO: BbDesktopInfo = {
+  lastCheckedAt: null,
+  latestVersion: null,
+  pendingVersion: null,
+  platform: "macos",
+  updateAvailable: false,
+  updateDownloaded: false,
+  version: "0.0.1",
+};
+
+function createDesktopApiStub(): BbDesktopApi {
+  return {
+    ...DESKTOP_INFO,
+    browser: createNoopDesktopBrowserApi(),
+    async checkForUpdates() {
+      return DESKTOP_INFO;
+    },
+    async getInfo() {
+      return DESKTOP_INFO;
+    },
+    async installUpdate() {
+      return undefined;
+    },
+    onChange() {
+      return () => undefined;
+    },
+    setTheme() {
+      // no-op
+    },
+  };
+}
+
+function renderLauncher() {
+  const store = createStore();
+  const wrapper = ({ children }: { children: ReactNode }) =>
+    createElement(Provider, { store }, children);
+  return render(
+    createElement(NewTabFileSearch, {
+      projectId: "proj_1",
+      environmentId: null,
+      currentThreadId: "thr_1",
+      currentThreadType: "manager",
+      focusRequest: 0,
+      onSelect: () => {},
+      onOpenBrowser: () => {},
+    }),
+    { wrapper },
+  );
+}
+
+afterEach(() => {
+  cleanup();
+  delete window.bbDesktop;
+});
+
+describe("NewTabFileSearch — Browser entry gating", () => {
+  it("shows the Open browser entry on the desktop build", () => {
+    window.bbDesktop = createDesktopApiStub();
+    renderLauncher();
+    expect(screen.queryByText("Open browser")).not.toBeNull();
+  });
+
+  it("hides the Open browser entry on the web build (no window.bbDesktop)", () => {
+    renderLauncher();
+    expect(screen.queryByText("Open browser")).toBeNull();
+  });
+});
diff --git a/apps/app/src/components/secondary-panel/NewTabFileSearch.tsx b/apps/app/src/components/secondary-panel/NewTabFileSearch.tsx
index a8c3f504a..7774d3602 100644
--- a/apps/app/src/components/secondary-panel/NewTabFileSearch.tsx
+++ b/apps/app/src/components/secondary-panel/NewTabFileSearch.tsx
@@ -5,9 +5,10 @@ import {
   useRef,
   useState,
   type KeyboardEvent,
+  type ReactNode,
 } from "react";
 import type { ThreadType } from "@bb/domain";
-import { Icon } from "@/components/ui/icon.js";
+import { Icon, type IconName } from "@/components/ui/icon.js";
 import { Input } from "@/components/ui/input.js";
 import { TruncateStart } from "@/components/ui/truncate-start.js";
 import { ResolvedAppIcon } from "./AppIcon";
@@ -19,14 +20,24 @@ import {
 } from "@/hooks/useFileSearchSuggestions";
 import { usePromptDraftStorage } from "@/hooks/usePromptDraftStorage";
 import type { FileSearchSelection } from "./useThreadFileTabs";
+import {
+  getRecentItemName,
+  resolveRecentFileKind,
+  useThreadRecentItems,
+  THREAD_RECENT_ITEMS_VISIBLE_LIMIT,
+  type RecentFileChip,
+  type ThreadRecentItem,
+} from "./threadRecentItems";
 import { cn } from "@/lib/utils";
+import { isDesktopBrowserAvailable } from "@/lib/bb-desktop";
+import { formatRelativeTime } from "@/lib/relative-time";
 import { isPromptDraftEmpty, type PromptDraftState } from "@/lib/prompt-draft";
 
 export const CREATE_APP_PROMPT_TEMPLATE = `You are creating a new bb app for this thread.
 
 Apps system reference — run \`bb guide app\` for full detail. Layout:
 - apps/<id>/manifest.json — { manifestVersion: 1, id, name, icon | logo.svg, entry, contributions: ["thread.app"], capabilities: ["data"?, "message"?] }
-- apps/<id>/assets/index.html — self-contained inline HTML/CSS/JS/SVG (no build step needed)
+- apps/<id>/assets/index.html — self-contained static HTML/CSS/JS/SVG served by bb; use inline/relative files, no web server, npm, or build step
 - apps/<id>/data/state.json — initial state if the app uses window.bb.data
 
 In the page, use window.bb.data for live state (read / write / delete / list / onChange; onChange replays + streams) and window.bb.message(text) to send the thread a prompt. Guard with \`window.bb?.data?.…\` since capabilities are advisory.
@@ -51,6 +62,8 @@ export interface NewTabFileSearchProps {
   initialQuery?: string;
   onSelect: (selection: FileSearchSelection) => void;
   onCreateAppPromptPrefill?: CreateAppPromptPrefillHandler;
+  /** Desktop-only: open a new in-panel browser tab. Absent ⇒ no Browser entry. */
+  onOpenBrowser?: () => void;
 }
 
 interface AppResultRowProps {
@@ -69,14 +82,36 @@ interface FileResultRowProps {
   onSelect: (suggestion: FilePathSearchSuggestion) => void;
 }
 
+interface RecentResultRowProps {
+  id: string;
+  item: ThreadRecentItem;
+  isActive: boolean;
+  nowMs: number;
+  onActivate: () => void;
+  onSelect: (item: ThreadRecentItem) => void;
+}
+
 interface FileSearchMessageProps {
   iconName: "AlertCircle" | "File" | "FileQuestion" | "Spinner";
   iconClassName?: string;
   message: string;
 }
 
+/**
+ * A navigable entry in a section. Search results carry a {@link FileSearchSuggestion};
+ * the synthetic Open browser / Create App actions carry no data and route to
+ * their handlers; a recent entry carries the previously-opened
+ * {@link ThreadRecentItem}. Keeping them in one union lets the keyboard handler
+ * walk a single index space across the Apps, Open, Files, and Recent sections.
+ */
+type FileSearchSectionEntry =
+  | { kind: "suggestion"; suggestion: FileSearchSuggestion }
+  | { kind: "open-browser" }
+  | { kind: "create-app" }
+  | { kind: "recent"; item: ThreadRecentItem };
+
 interface FileSearchSectionItem {
-  suggestion: FileSearchSuggestion;
+  entry: FileSearchSectionEntry;
   index: number;
 }
 
@@ -96,7 +131,7 @@ type SearchInputKeyDownHandler = (
 ) => void;
 type CreateAppPromptPrefillHandler = () => void;
 type FileSearchSource = FileSearchSuggestion["source"];
-type FileSearchSectionKind = "apps" | "files";
+type FileSearchSectionKind = "apps" | "open" | "files" | "recent";
 
 interface GetAvailableFileSearchSourcesArgs {
   projectId: string | undefined;
@@ -107,29 +142,62 @@ interface GetAvailableFileSearchSourcesArgs {
 interface GroupFileSearchSectionsArgs {
   suggestions: readonly FileSearchSuggestion[];
   availableSources: readonly FileSearchSource[];
+  includeOpenBrowserEntry: boolean;
+  includeCreateAppEntry: boolean;
+  recentEntries: readonly FileSearchSectionEntry[];
+}
+
+interface LauncherTileProps {
+  id: string;
+  isActive: boolean;
+  onActivate: () => void;
+  onSelect: () => void;
+  title?: string;
+  children: ReactNode;
 }
 
 interface CreateAppTileProps {
-  onClick: () => void;
+  id: string;
+  isActive: boolean;
+  onActivate: () => void;
+  onSelect: () => void;
+}
+
+interface OpenBrowserTileProps {
+  id: string;
+  isActive: boolean;
+  onActivate: () => void;
+  onSelect: () => void;
 }
 
 const FILE_SEARCH_LIMIT = 20;
 const FILE_SEARCH_SECTION_ORDER: readonly FileSearchSectionKind[] = [
   "apps",
+  "open",
   "files",
+  "recent",
 ];
 
 const FILE_SEARCH_SECTION_LABELS = {
   apps: "Apps",
+  open: "Open",
   files: "Files",
+  recent: "Recent",
 } satisfies Record<FileSearchSectionKind, string>;
 
+// Substring-matched keywords that surface the "Open browser" action while the
+// user is searching (it is always shown when the query is empty).
+const OPEN_BROWSER_ENTRY_KEYWORDS = "open browser web url tab";
+
 const FILE_SEARCH_SOURCE_LABELS = {
   app: "App",
   workspace: "Workspace",
   "thread-storage": "Manager Storage",
 } satisfies Record<FileSearchSource, string>;
 
+const CREATE_APP_ENTRY_ID = "file-search-result-create-app";
+const OPEN_BROWSER_ENTRY_ID = "file-search-result-open-browser";
+
 const SECTION_HEADER_CLASS =
   "sticky top-0 z-10 bg-background px-1 pb-2 text-xs font-medium uppercase tracking-wider text-subtle-foreground";
 const LAUNCHER_TILE_BASE_CLASS =
@@ -139,6 +207,17 @@ const LAUNCHER_TILE_ICON_CLASS =
 const LAUNCHER_TILE_ICON_CLASS_DASHED =
   "flex size-9 shrink-0 items-center justify-center rounded-md border border-dashed border-border bg-surface-raised text-muted-foreground group-hover:text-foreground";
 
+// File-type identity comes from the glyph alone — the chip stays neutral
+// (shared `LAUNCHER_TILE_ICON_CLASS`) so recent rows match the app/Open-browser
+// tiles without per-type coloring.
+const RECENT_CHIP_ICON_NAME = {
+  md: "FileText",
+  html: "AppWindow",
+  report: "ChartColumn",
+  code: "Code",
+} satisfies Record<RecentFileChip, IconName>;
+const RECENT_ENTRY_ID_PREFIX = "file-search-result-recent";
+
 function slugifyAppName(name: string): string {
   return name
     .trim()
@@ -173,6 +252,34 @@ function getFileSearchResultId(suggestion: FileSearchSuggestion): string {
   )}`;
 }
 
+function getFileSearchEntryId(entry: FileSearchSectionEntry): string {
+  if (entry.kind === "create-app") {
+    return CREATE_APP_ENTRY_ID;
+  }
+  if (entry.kind === "open-browser") {
+    return OPEN_BROWSER_ENTRY_ID;
+  }
+  if (entry.kind === "recent") {
+    return `${RECENT_ENTRY_ID_PREFIX}-${entry.item.source}-${encodeURIComponent(
+      entry.item.path,
+    )}`;
+  }
+  return getFileSearchResultId(entry.suggestion);
+}
+
+function recentItemMatchesQuery(
+  item: ThreadRecentItem,
+  normalizedQuery: string,
+): boolean {
+  if (normalizedQuery.length === 0) {
+    return true;
+  }
+  const { label } = resolveRecentFileKind(item.path);
+  return `${getRecentItemName(item.path)} ${label} ${item.path}`
+    .toLowerCase()
+    .includes(normalizedQuery);
+}
+
 function splitPath(path: string): SplitPathResult {
   const lastSlash = path.lastIndexOf("/");
   if (lastSlash === -1) {
@@ -199,33 +306,65 @@ function getFileSearchSectionKind(
 
 function groupFileSearchSections({
   availableSources,
+  includeOpenBrowserEntry,
+  includeCreateAppEntry,
+  recentEntries,
   suggestions,
 }: GroupFileSearchSectionsArgs): FileSearchSection[] {
   const allowedSources = new Set<FileSearchSource>(availableSources);
   const sectionsByKind = new Map<FileSearchSectionKind, FileSearchSection>();
 
-  for (const suggestion of suggestions) {
-    const source = suggestion.source;
-    if (!allowedSources.has(source)) {
-      continue;
-    }
-    const sectionKind = getFileSearchSectionKind(suggestion);
+  const ensureSection = (
+    sectionKind: FileSearchSectionKind,
+  ): FileSearchSection => {
     const existing = sectionsByKind.get(sectionKind);
     if (existing) {
-      existing.items.push({
-        suggestion,
-        index: existing.items.length,
-      });
-      continue;
+      return existing;
     }
-
-    sectionsByKind.set(sectionKind, {
+    const created: FileSearchSection = {
       kind: sectionKind,
       label: FILE_SEARCH_SECTION_LABELS[sectionKind],
-      items: [{ suggestion, index: 0 }],
+      items: [],
+    };
+    sectionsByKind.set(sectionKind, created);
+    return created;
+  };
+
+  for (const suggestion of suggestions) {
+    if (!allowedSources.has(suggestion.source)) {
+      continue;
+    }
+    ensureSection(getFileSearchSectionKind(suggestion)).items.push({
+      entry: { kind: "suggestion", suggestion },
+      index: 0,
     });
   }
 
+  // "Create App…" trails the Apps results — it's an app-creation action, so it
+  // belongs with the apps rather than in the Open section.
+  if (includeCreateAppEntry) {
+    ensureSection("apps").items.push({
+      entry: { kind: "create-app" },
+      index: 0,
+    });
+  }
+
+  // The OPEN section holds the standing "Open browser" action, kept separate
+  // from the Apps results above.
+  if (includeOpenBrowserEntry) {
+    ensureSection("open").items.push({
+      entry: { kind: "open-browser" },
+      index: 0,
+    });
+  }
+
+  // Recent rows trail the Apps and Files sections so the unified index space
+  // reads top-down: launch an app, open a new surface, then jump back to a
+  // recently-opened file.
+  for (const entry of recentEntries) {
+    ensureSection("recent").items.push({ entry, index: 0 });
+  }
+
   let nextIndex = 0;
   return FILE_SEARCH_SECTION_ORDER.flatMap((sectionKind) => {
     const section = sectionsByKind.get(sectionKind);
@@ -235,10 +374,10 @@ function groupFileSearchSections({
     return [
       {
         ...section,
-        items: section.items.map(({ suggestion }) => {
+        items: section.items.map(({ entry }) => {
           const index = nextIndex;
           nextIndex += 1;
-          return { suggestion, index };
+          return { entry, index };
         }),
       },
     ];
@@ -260,32 +399,59 @@ function FileSearchMessage({
   );
 }
 
-function AppResultRow({
+/**
+ * Shared button shell for the Apps-section launcher tiles (app rows and the
+ * Create App action). Centralizing it keeps the listbox option/keyboard
+ * contract — `role="option"`, `aria-selected`, `id`, hover-to-activate —
+ * identical across every navigable tile.
+ */
+function LauncherTile({
   id,
-  suggestion,
   isActive,
   onActivate,
   onSelect,
-}: AppResultRowProps) {
-  const handleSelect = useCallback(() => {
-    onSelect(suggestion);
-  }, [onSelect, suggestion]);
-  const showAppId = suggestion.appId !== slugifyAppName(suggestion.name);
-
+  title,
+  children,
+}: LauncherTileProps) {
   return (
     <button
       type="button"
       id={id}
       role="option"
       aria-selected={isActive}
-      onClick={handleSelect}
+      onClick={onSelect}
       onMouseEnter={onActivate}
-      title={getFileSearchResultTitle(suggestion)}
+      title={title}
       className={cn(
         LAUNCHER_TILE_BASE_CLASS,
         "scroll-mt-7",
         isActive ? "bg-state-active" : "hover:bg-state-hover",
       )}
+    >
+      {children}
+    </button>
+  );
+}
+
+function AppResultRow({
+  id,
+  suggestion,
+  isActive,
+  onActivate,
+  onSelect,
+}: AppResultRowProps) {
+  const handleSelect = useCallback(() => {
+    onSelect(suggestion);
+  }, [onSelect, suggestion]);
+  const showAppId = suggestion.appId !== slugifyAppName(suggestion.name);
+
+  return (
+    <LauncherTile
+      id={id}
+      isActive={isActive}
+      onActivate={onActivate}
+      onSelect={handleSelect}
+      title={getFileSearchResultTitle(suggestion)}
     >
       <span className={LAUNCHER_TILE_ICON_CLASS}>
         <ResolvedAppIcon
@@ -303,16 +469,22 @@ function AppResultRow({
           </span>
         ) : null}
       </span>
-    </button>
+    </LauncherTile>
   );
 }
 
-function CreateAppTile({ onClick }: CreateAppTileProps) {
+function CreateAppTile({
+  id,
+  isActive,
+  onActivate,
+  onSelect,
+}: CreateAppTileProps) {
   return (
-    <button
-      type="button"
-      onClick={onClick}
-      className={cn(LAUNCHER_TILE_BASE_CLASS, "hover:bg-state-hover")}
+    <LauncherTile
+      id={id}
+      isActive={isActive}
+      onActivate={onActivate}
+      onSelect={onSelect}
     >
       <span className={LAUNCHER_TILE_ICON_CLASS_DASHED}>
         <Icon name="Plus" className="size-5" aria-hidden />
@@ -325,7 +497,35 @@ function CreateAppTile({ onClick }: CreateAppTileProps) {
           Describe an idea, the manager builds it
         </span>
       </span>
-    </button>
+    </LauncherTile>
+  );
+}
+
+function OpenBrowserTile({
+  id,
+  isActive,
+  onActivate,
+  onSelect,
+}: OpenBrowserTileProps) {
+  return (
+    <LauncherTile
+      id={id}
+      isActive={isActive}
+      onActivate={onActivate}
+      onSelect={onSelect}
+    >
+      <span className={LAUNCHER_TILE_ICON_CLASS}>
+        <Icon name="Globe" className="size-5 text-foreground" aria-hidden />
+      </span>
+      <span className="flex min-w-0 flex-1 flex-col">
+        <span className="truncate text-sm font-medium text-foreground">
+          Open browser
+        </span>
+        <span className="truncate text-xs text-muted-foreground">
+          Open a new web browser tab
+        </span>
+      </span>
+    </LauncherTile>
   );
 }
 
@@ -373,6 +573,86 @@ function FileResultRow({
   );
 }
 
+/**
+ * A recently-opened file row. Shares the {@link LauncherTile} shell with the app
+ * and Open-browser tiles so row height, chip size, and hover/active states line
+ * up; the file-type tint colors the chip and kind label, and a right-aligned
+ * relative timestamp flips to an "open" affordance on hover/selection.
+ * Reopening routes through the same `onSelect` path as a file-search result.
+ */
+function RecentResultRow({
+  id,
+  item,
+  isActive,
+  nowMs,
+  onActivate,
+  onSelect,
+}: RecentResultRowProps) {
+  const handleSelect = useCallback(() => {
+    onSelect(item);
+  }, [item, onSelect]);
+  const { chip, label } = resolveRecentFileKind(item.path);
+  const name = getRecentItemName(item.path);
+  const { directory } = splitPath(item.path);
+  const relativeTime = formatRelativeTime({ timestamp: item.openedAt, now: nowMs });
+
+  return (
+    <LauncherTile
+      id={id}
+      isActive={isActive}
+      onActivate={onActivate}
+      onSelect={handleSelect}
+      title={`${label}: ${item.path}`}
+    >
+      <span className={LAUNCHER_TILE_ICON_CLASS}>
+        <Icon
+          name={RECENT_CHIP_ICON_NAME[chip]}
+          className="size-5 text-muted-foreground"
+          aria-hidden
+        />
+      </span>
+      <span className="flex min-w-0 flex-1 flex-col">
+        <span className="truncate text-sm font-medium text-foreground">
+          {name}
+        </span>
+        <span className="flex min-w-0 items-center gap-1.5 text-xs text-muted-foreground">
+          <span className="shrink-0 font-medium">{label}</span>
+          {directory ? (
+            <>
+              <span className="shrink-0 opacity-50" aria-hidden>
+                ·
+              </span>
+              <TruncateStart className="text-muted-foreground [flex-shrink:9999]">
+                {directory}
+              </TruncateStart>
+            </>
+          ) : null}
+        </span>
+      </span>
+      <span className="ml-auto flex shrink-0 items-center justify-end">
+        <span
+          className={cn(
+            "whitespace-nowrap text-xs text-muted-foreground",
+            isActive ? "hidden" : "group-hover:hidden",
+          )}
+        >
+          {relativeTime}
+        </span>
+        <span
+          className={cn(
+            "items-center gap-1 text-xs text-subtle-foreground",
+            isActive ? "flex" : "hidden group-hover:flex",
+          )}
+          aria-hidden
+        >
+          <Icon name="ArrowUpRight" className="size-3" aria-hidden />
+          open
+        </span>
+      </span>
+    </LauncherTile>
+  );
+}
+
 export function NewTabFileSearch({
   projectId,
   environmentId,
@@ -382,14 +662,22 @@ export function NewTabFileSearch({
   initialQuery = "",
   onSelect,
   onCreateAppPromptPrefill,
+  onOpenBrowser,
 }: NewTabFileSearchProps) {
   const inputRef = useRef<HTMLInputElement>(null);
   const [query, setQuery] = useState(initialQuery);
   const [activeIndex, setActiveIndex] = useState(-1);
+  const [isRecentExpanded, setIsRecentExpanded] = useState(false);
+  // Captured once on mount: the launcher is transient, so a static "now" keeps
+  // every relative timestamp consistent within a single open without ticking.
+  const [nowMs] = useState(() => Date.now());
   const promptDraft = usePromptDraftStorage({
     projectId,
     threadId: currentThreadId.length > 0 ? currentThreadId : null,
   });
+  const recentItems = useThreadRecentItems(
+    currentThreadId.length > 0 ? currentThreadId : null,
+  );
   const trimmedQuery = query.trim();
   const hasQuery = trimmedQuery.length > 0;
   const canPrefillCreateAppPrompt =
@@ -412,28 +700,75 @@ export function NewTabFileSearch({
       }),
     [currentThreadId, currentThreadType, projectId],
   );
-  const sections = useMemo(
-    () => groupFileSearchSections({ availableSources, suggestions }),
-    [availableSources, suggestions],
+  const hasAppSuggestions = useMemo(
+    () => suggestions.some((suggestion) => suggestion.entryKind === "app"),
+    [suggestions],
   );
-  const hasAppsSection = sections.some((section) => section.kind === "apps");
-  const showAppsSectionShell =
+  // Mirror the visible Apps section: offer Create App when nothing is typed, or
+  // when the query actually matches apps — never alongside a files-only result.
+  const showCreateAppEntry =
     !isUnavailable &&
     canPrefillCreateAppPrompt &&
-    (!hasQuery || hasAppsSection);
-  const visualSuggestions = useMemo(
+    (!hasQuery || hasAppSuggestions);
+  // Desktop-only: the Browser entry shows when nothing is typed or the query
+  // matches its keywords. `onOpenBrowser` is only wired on desktop, but gate on
+  // the bridge too so it never appears on the web build.
+  const showOpenBrowserEntry =
+    !isUnavailable &&
+    onOpenBrowser !== undefined &&
+    isDesktopBrowserAvailable() &&
+    (!hasQuery || OPEN_BROWSER_ENTRY_KEYWORDS.includes(trimmedQuery.toLowerCase()));
+  const normalizedRecentQuery = hasQuery ? trimmedQuery.toLowerCase() : "";
+  const matchingRecentItems = useMemo(
+    () =>
+      recentItems.filter((item) =>
+        recentItemMatchesQuery(item, normalizedRecentQuery),
+      ),
+    [normalizedRecentQuery, recentItems],
+  );
+  // Collapsed to the visible cap by default; a query or "Show more" reveals the
+  // rest. Recents are local, so they stay in view while apps/files load.
+  const visibleRecentItems = useMemo(
+    () =>
+      hasQuery || isRecentExpanded
+        ? matchingRecentItems
+        : matchingRecentItems.slice(0, THREAD_RECENT_ITEMS_VISIBLE_LIMIT),
+    [hasQuery, isRecentExpanded, matchingRecentItems],
+  );
+  const recentEntries = useMemo<FileSearchSectionEntry[]>(
+    () => visibleRecentItems.map((item) => ({ kind: "recent", item })),
+    [visibleRecentItems],
+  );
+  const sections = useMemo(
+    () =>
+      groupFileSearchSections({
+        availableSources,
+        includeOpenBrowserEntry: showOpenBrowserEntry,
+        includeCreateAppEntry: showCreateAppEntry,
+        recentEntries,
+        suggestions,
+      }),
+    [
+      availableSources,
+      recentEntries,
+      showCreateAppEntry,
+      showOpenBrowserEntry,
+      suggestions,
+    ],
+  );
+  const navigableEntries = useMemo(
     () =>
       sections.flatMap((section) =>
-        section.items.map(({ suggestion }) => suggestion),
+        section.items.map(({ entry }) => entry),
       ),
     [sections],
   );
-  const activeSuggestion = useMemo(
+  const activeEntry = useMemo(
     () =>
-      activeIndex >= 0 && activeIndex < visualSuggestions.length
-        ? (visualSuggestions[activeIndex] ?? null)
+      activeIndex >= 0 && activeIndex < navigableEntries.length
+        ? (navigableEntries[activeIndex] ?? null)
         : null,
-    [activeIndex, visualSuggestions],
+    [activeIndex, navigableEntries],
   );
 
   useEffect(() => {
@@ -448,8 +783,8 @@ export function NewTabFileSearch({
   }, [focusRequest]);
 
   useEffect(() => {
-    setActiveIndex(visualSuggestions.length > 0 ? 0 : -1);
-  }, [visualSuggestions]);
+    setActiveIndex(navigableEntries.length > 0 ? 0 : -1);
+  }, [navigableEntries]);
 
   const handleAppSelect = useCallback(
     (suggestion: AppSearchSuggestion) => {
@@ -465,6 +800,17 @@ export function NewTabFileSearch({
     [onSelect],
   );
 
+  const handleRecentSelect = useCallback(
+    (item: ThreadRecentItem) => {
+      onSelect({ source: item.source, path: item.path });
+    },
+    [onSelect],
+  );
+
+  const handleToggleRecentExpanded = useCallback(() => {
+    setIsRecentExpanded((current) => !current);
+  }, []);
+
   const handleSuggestionSelect = useCallback(
     (suggestion: FileSearchSuggestion) => {
       if (suggestion.entryKind === "app") {
@@ -495,32 +841,55 @@ export function NewTabFileSearch({
     onCreateAppPromptPrefill?.();
   }, [canPrefillCreateAppPrompt, onCreateAppPromptPrefill, promptDraft]);
 
+  const handleOpenBrowser = useCallback(() => {
+    onOpenBrowser?.();
+  }, [onOpenBrowser]);
+
   const handleInputKeyDown = useCallback<SearchInputKeyDownHandler>(
     (event) => {
-      if (visualSuggestions.length === 0) {
+      if (navigableEntries.length === 0) {
         return;
       }
 
       if (event.key === "ArrowDown") {
         event.preventDefault();
-        setActiveIndex((current) => (current + 1) % visualSuggestions.length);
+        setActiveIndex((current) => (current + 1) % navigableEntries.length);
         return;
       }
 
       if (event.key === "ArrowUp") {
         event.preventDefault();
         setActiveIndex((current) =>
-          current <= 0 ? visualSuggestions.length - 1 : current - 1,
+          current <= 0 ? navigableEntries.length - 1 : current - 1,
         );
         return;
       }
 
-      if (event.key === "Enter" && activeSuggestion) {
+      if (event.key === "Enter" && activeEntry) {
         event.preventDefault();
-        handleSuggestionSelect(activeSuggestion);
+        if (activeEntry.kind === "create-app") {
+          handleCreateAppPromptPrefill();
+          return;
+        }
+        if (activeEntry.kind === "open-browser") {
+          handleOpenBrowser();
+          return;
+        }
+        if (activeEntry.kind === "recent") {
+          handleRecentSelect(activeEntry.item);
+          return;
+        }
+        handleSuggestionSelect(activeEntry.suggestion);
       }
     },
-    [activeSuggestion, handleSuggestionSelect, visualSuggestions.length],
+    [
+      activeEntry,
+      handleCreateAppPromptPrefill,
+      handleOpenBrowser,
+      handleRecentSelect,
+      handleSuggestionSelect,
+      navigableEntries.length,
+    ],
   );
 
   return (
@@ -538,9 +907,7 @@ export function NewTabFileSearch({
           disabled={isUnavailable}
           aria-label="Search apps and files"
           aria-activedescendant={
-            activeSuggestion
-              ? getFileSearchResultId(activeSuggestion)
-              : undefined
+            activeEntry ? getFileSearchEntryId(activeEntry) : undefined
           }
           placeholder={
             isUnavailable ? "No searchable source" : "Search apps and files"
@@ -563,57 +930,95 @@ export function NewTabFileSearch({
       ) : (
         <NewTabResults
           activeIndex={activeIndex}
-          canCreateApp={canPrefillCreateAppPrompt}
           hasQuery={hasQuery}
           isError={isError}
           isLoading={isLoading}
+          nowMs={nowMs}
           onActivateIndex={setActiveIndex}
           onAppSelect={handleAppSelect}
           onCreateApp={handleCreateAppPromptPrefill}
+          onOpenBrowser={handleOpenBrowser}
           onFileSelect={handleFileSelect}
+          onRecentSelect={handleRecentSelect}
+          recent={{
+            count: matchingRecentItems.length,
+            showMoreCount: Math.max(
+              0,
+              matchingRecentItems.length - THREAD_RECENT_ITEMS_VISIBLE_LIMIT,
+            ),
+            isExpanded: isRecentExpanded,
+            toggleVisible:
+              !hasQuery &&
+              matchingRecentItems.length > THREAD_RECENT_ITEMS_VISIBLE_LIMIT,
+            emptyHintVisible: !hasQuery && recentItems.length === 0,
+            onToggleExpanded: handleToggleRecentExpanded,
+          }}
           sections={sections}
-          showAppsSectionShell={showAppsSectionShell}
         />
       )}
     </div>
   );
 }
 
+interface NewTabRecentState {
+  count: number;
+  showMoreCount: number;
+  isExpanded: boolean;
+  toggleVisible: boolean;
+  emptyHintVisible: boolean;
+  onToggleExpanded: () => void;
+}
+
 interface NewTabResultsProps {
   activeIndex: number;
-  canCreateApp: boolean;
   hasQuery: boolean;
   isError: boolean;
   isLoading: boolean;
+  nowMs: number;
   onActivateIndex: (index: number) => void;
   onAppSelect: (suggestion: AppSearchSuggestion) => void;
   onCreateApp: () => void;
+  onOpenBrowser: () => void;
   onFileSelect: (suggestion: FilePathSearchSuggestion) => void;
+  onRecentSelect: (item: ThreadRecentItem) => void;
+  recent: NewTabRecentState;
   sections: readonly FileSearchSection[];
-  showAppsSectionShell: boolean;
 }
 
 function NewTabResults({
   activeIndex,
-  canCreateApp,
   hasQuery,
   isError,
   isLoading,
+  nowMs,
   onActivateIndex,
   onAppSelect,
   onCreateApp,
+  onOpenBrowser,
   onFileSelect,
+  onRecentSelect,
+  recent,
   sections,
-  showAppsSectionShell,
 }: NewTabResultsProps) {
   const appsSection = sections.find((section) => section.kind === "apps");
+  const openSection = sections.find((section) => section.kind === "open");
   const filesSection = sections.find((section) => section.kind === "files");
-  const showAppsSection = showAppsSectionShell || appsSection !== undefined;
+  const recentSection = sections.find((section) => section.kind === "recent");
+  const showAppsSection = appsSection !== undefined;
+  const showOpenSection = openSection !== undefined;
   const showFilesSection = filesSection !== undefined;
+  const showRecentSection = recentSection !== undefined || recent.emptyHintVisible;
+  const hasSectionsAbove =
+    showAppsSection || showOpenSection || showFilesSection;
   const showLoading = isLoading && !showFilesSection;
   const showError = isError && !showFilesSection && !showLoading;
   const showEmptyMessage =
-    !showAppsSection && !showFilesSection && !showLoading && !showError;
+    !showAppsSection &&
+    !showOpenSection &&
+    !showFilesSection &&
+    !showRecentSection &&
+    !showLoading &&
+    !showError;
 
   if (showEmptyMessage) {
     return (
@@ -630,46 +1035,86 @@ function NewTabResults({
 
   return (
     <div className="min-h-0 flex-1 overflow-y-auto pb-1">
-      {showAppsSection ? (
+      {appsSection ? (
         <section>
           <div className={cn(SECTION_HEADER_CLASS, "pt-0")}>
             {FILE_SEARCH_SECTION_LABELS.apps}
           </div>
-          {appsSection && appsSection.items.length > 0 ? (
-            <div
-              role="listbox"
-              aria-label={FILE_SEARCH_SECTION_LABELS.apps}
-              className="flex flex-col gap-px"
-            >
-              {appsSection.items.map(({ suggestion, index }) =>
-                suggestion.entryKind === "app" ? (
-                  <AppResultRow
-                    key={`app:${suggestion.appId}`}
-                    id={getFileSearchResultId(suggestion)}
-                    suggestion={suggestion}
+          <div
+            role="listbox"
+            aria-label={FILE_SEARCH_SECTION_LABELS.apps}
+            className="flex flex-col gap-px"
+          >
+            {appsSection.items.map(({ entry, index }) => {
+              if (entry.kind === "create-app") {
+                return (
+                  <CreateAppTile
+                    key="create-app"
+                    id={getFileSearchEntryId(entry)}
                     isActive={index === activeIndex}
                     onActivate={() => onActivateIndex(index)}
-                    onSelect={onAppSelect}
+                    onSelect={onCreateApp}
                   />
-                ) : null,
-              )}
-            </div>
-          ) : null}
-          {canCreateApp ? (
-            <div
-              className={cn(
-                appsSection && appsSection.items.length > 0 && "mt-px",
-              )}
-            >
-              <CreateAppTile onClick={onCreateApp} />
-            </div>
-          ) : null}
+                );
+              }
+              if (
+                entry.kind !== "suggestion" ||
+                entry.suggestion.entryKind !== "app"
+              ) {
+                return null;
+              }
+              const suggestion = entry.suggestion;
+              return (
+                <AppResultRow
+                  key={`app:${suggestion.appId}`}
+                  id={getFileSearchEntryId(entry)}
+                  suggestion={suggestion}
+                  isActive={index === activeIndex}
+                  onActivate={() => onActivateIndex(index)}
+                  onSelect={onAppSelect}
+                />
+              );
+            })}
+          </div>
         </section>
       ) : null}
 
-      {showFilesSection && filesSection ? (
+      {openSection ? (
         <section className={cn(showAppsSection && "mt-3")}>
           <div className={cn(SECTION_HEADER_CLASS, showAppsSection && "pt-2")}>
+            {FILE_SEARCH_SECTION_LABELS.open}
+          </div>
+          <div
+            role="listbox"
+            aria-label={FILE_SEARCH_SECTION_LABELS.open}
+            className="flex flex-col gap-px"
+          >
+            {openSection.items.map(({ entry, index }) => {
+              if (entry.kind !== "open-browser") {
+                return null;
+              }
+              return (
+                <OpenBrowserTile
+                  key="open-browser"
+                  id={getFileSearchEntryId(entry)}
+                  isActive={index === activeIndex}
+                  onActivate={() => onActivateIndex(index)}
+                  onSelect={onOpenBrowser}
+                />
+              );
+            })}
+          </div>
+        </section>
+      ) : null}
+
+      {showFilesSection && filesSection ? (
+        <section className={cn((showAppsSection || showOpenSection) && "mt-3")}>
+          <div
+            className={cn(
+              SECTION_HEADER_CLASS,
+              (showAppsSection || showOpenSection) && "pt-2",
+            )}
+          >
             {FILE_SEARCH_SECTION_LABELS.files}
           </div>
           <div
@@ -677,22 +1122,29 @@ function NewTabResults({
             aria-label={FILE_SEARCH_SECTION_LABELS.files}
             className="flex flex-col gap-px"
           >
-            {filesSection.items.map(({ suggestion, index }) =>
-              suggestion.entryKind === "file" ? (
+            {filesSection.items.map(({ entry, index }) => {
+              if (
+                entry.kind !== "suggestion" ||
+                entry.suggestion.entryKind !== "file"
+              ) {
+                return null;
+              }
+              const suggestion = entry.suggestion;
+              return (
                 <FileResultRow
                   key={`${suggestion.source}:${suggestion.path}`}
-                  id={getFileSearchResultId(suggestion)}
+                  id={getFileSearchEntryId(entry)}
                   suggestion={suggestion}
                   isActive={index === activeIndex}
                   onActivate={() => onActivateIndex(index)}
                   onSelect={onFileSelect}
                 />
-              ) : null,
-            )}
+              );
+            })}
           </div>
         </section>
       ) : showLoading || showError ? (
-        <div className={cn(showAppsSection && "mt-3")}>
+        <div className={cn((showAppsSection || showOpenSection) && "mt-3")}>
           <FileSearchMessage
             iconName={showError ? "AlertCircle" : "Spinner"}
             iconClassName={showLoading ? "animate-spin" : undefined}
@@ -704,6 +1156,76 @@ function NewTabResults({
           />
         </div>
       ) : null}
+
+      {showRecentSection ? (
+        <section className={cn(hasSectionsAbove && "mt-3")}>
+          <div
+            className={cn(
+              SECTION_HEADER_CLASS,
+              "flex items-baseline gap-2",
+              hasSectionsAbove && "pt-2",
+            )}
+          >
+            <span>{FILE_SEARCH_SECTION_LABELS.recent}</span>
+            {recent.count > 0 ? (
+              <span className="font-mono text-xs font-normal tracking-normal normal-case text-muted-foreground opacity-80">
+                {recent.count}
+              </span>
+            ) : null}
+          </div>
+          {recentSection ? (
+            <div
+              role="listbox"
+              aria-label={FILE_SEARCH_SECTION_LABELS.recent}
+              className="flex flex-col gap-px"
+            >
+              {recentSection.items.map(({ entry, index }) => {
+                if (entry.kind !== "recent") {
+                  return null;
+                }
+                return (
+                  <RecentResultRow
+                    key={`recent:${entry.item.source}:${entry.item.path}`}
+                    id={getFileSearchEntryId(entry)}
+                    item={entry.item}
+                    isActive={index === activeIndex}
+                    nowMs={nowMs}
+                    onActivate={() => onActivateIndex(index)}
+                    onSelect={onRecentSelect}
+                  />
+                );
+              })}
+            </div>
+          ) : (
+            <p className="rounded-md border border-dashed border-border bg-surface-raised px-3 py-4 text-center text-xs text-muted-foreground">
+              Nothing referenced yet — plans, mockups, and files you open will
+              show up here.
+            </p>
+          )}
+          {recent.toggleVisible ? (
+            <button
+              type="button"
+              aria-expanded={recent.isExpanded}
+              onClick={recent.onToggleExpanded}
+              className="ml-1.5 mt-0.5 inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs text-muted-foreground transition-colors hover:bg-state-hover hover:text-foreground"
+            >
+              <Icon
+                name="ChevronDown"
+                className={cn(
+                  "size-3.5 transition-transform",
+                  recent.isExpanded && "rotate-180",
+                )}
+                aria-hidden
+              />
+              <span>
+                {recent.isExpanded
+                  ? "Show less"
+                  : `Show ${recent.showMoreCount} more`}
+              </span>
+            </button>
+          ) : null}
+        </section>
+      ) : null}
     </div>
   );
 }
diff --git a/apps/app/src/components/secondary-panel/NewTabPage.test.tsx b/apps/app/src/components/secondary-panel/NewTabPage.test.tsx
index 875cfd1de..df6d3bcc5 100644
--- a/apps/app/src/components/secondary-panel/NewTabPage.test.tsx
+++ b/apps/app/src/components/secondary-panel/NewTabPage.test.tsx
@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
 
-import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { cleanup, fireEvent, render, screen, within } from "@testing-library/react";
 import type { AppSummary, WorkspacePathEntry } from "@bb/server-contract";
 import * as api from "@/lib/api";
 import {
@@ -12,6 +12,10 @@ import { afterEach, describe, expect, it, vi } from "vitest";
 import { createQueryClientTestHarness } from "@/test/queryClientTestHarness";
 import { NewTabPage } from "./NewTabPage";
 import { CREATE_APP_PROMPT_TEMPLATE } from "./NewTabFileSearch";
+import {
+  getThreadRecentItemsStorageKey,
+  type ThreadRecentItem,
+} from "./threadRecentItems";
 import type { FileSearchSelection } from "./useThreadFileTabs";
 
 vi.mock("@/lib/api", async (importOriginal) => {
@@ -109,6 +113,25 @@ function setStoredThreadDraft(draft: PromptDraftState): void {
   window.localStorage.setItem(THREAD_DRAFT_STORAGE_KEY, serialized);
 }
 
+const MINUTE_MS = 60 * 1000;
+const HOUR_MS = 60 * MINUTE_MS;
+
+function seedRecentItems(threadId: string, items: ThreadRecentItem[]): void {
+  window.localStorage.setItem(
+    getThreadRecentItemsStorageKey({ threadId }),
+    JSON.stringify(items),
+  );
+}
+
+function mockEmptySearchSources(): void {
+  vi.mocked(api.listThreadApps).mockResolvedValue([]);
+  vi.mocked(api.searchProjectPaths).mockResolvedValue(makePathResponse([]));
+  vi.mocked(api.listThreadStoragePaths).mockResolvedValue({
+    ...makePathResponse([]),
+    storageRootPath: "/tmp/thread-storage",
+  });
+}
+
 function renderNewTabPage(args: RenderNewTabPageArgs = {}) {
   const { wrapper } = createQueryClientTestHarness();
   const onSelect: (selection: FileSearchSelection) => void =
@@ -188,7 +211,7 @@ describe("NewTabPage", () => {
     vi.mocked(api.listThreadApps).mockResolvedValue([]);
     renderNewTabPage({ projectId: "proj-1" });
 
-    fireEvent.click(screen.getByRole("button", { name: /Create App/u }));
+    fireEvent.click(screen.getByRole("option", { name: /Create App/u }));
 
     expect(getStoredThreadDraft()).toEqual({
       text: CREATE_APP_PROMPT_TEMPLATE,
@@ -203,6 +226,9 @@ describe("NewTabPage", () => {
     );
     expect(CREATE_APP_PROMPT_TEMPLATE).toContain("bb guide app");
     expect(CREATE_APP_PROMPT_TEMPLATE).toContain("window.bb.data");
+    expect(CREATE_APP_PROMPT_TEMPLATE).toContain(
+      "no web server, npm, or build step",
+    );
     expect(CREATE_APP_PROMPT_TEMPLATE.endsWith("What I want:\n\n")).toBe(true);
   });
 
@@ -212,7 +238,7 @@ describe("NewTabPage", () => {
     setStoredThreadDraft(DRAFT_WITH_ATTACHMENT);
     renderNewTabPage({ projectId: "proj-1" });
 
-    fireEvent.click(screen.getByRole("button", { name: /Create App/u }));
+    fireEvent.click(screen.getByRole("option", { name: /Create App/u }));
 
     expect(getStoredThreadDraft()).toEqual(DRAFT_WITH_ATTACHMENT);
   });
@@ -223,7 +249,53 @@ describe("NewTabPage", () => {
     setStoredThreadDraft(DRAFT_WITH_ATTACHMENT);
     renderNewTabPage({ projectId: "proj-1" });
 
-    fireEvent.click(screen.getByRole("button", { name: /Create App/u }));
+    fireEvent.click(screen.getByRole("option", { name: /Create App/u }));
+
+    expect(getStoredThreadDraft()).toEqual({
+      text: CREATE_APP_PROMPT_TEMPLATE,
+      attachments: [],
+    });
+  });
+
+  it("arrows past the app rows onto the create-app entry as the last option", async () => {
+    vi.mocked(api.listThreadApps).mockResolvedValue([STATUS_APP]);
+    renderNewTabPage({ projectId: "proj-1" });
+
+    const input = screen.getByRole("textbox", {
+      name: "Search apps and files",
+    });
+    const appOption = await screen.findByRole("option", { name: /Status/u });
+    const createAppOption = screen.getByRole("option", {
+      name: /Create App/u,
+    });
+
+    // The first navigable entry is the real app row; Create App sits after it.
+    expect(input.getAttribute("aria-activedescendant")).toBe(appOption.id);
+    expect(appOption.getAttribute("aria-selected")).toBe("true");
+    expect(createAppOption.getAttribute("aria-selected")).toBe("false");
+
+    fireEvent.keyDown(input, { key: "ArrowDown" });
+
+    // Arrowing down lands the active descendant on the Create App tile.
+    expect(createAppOption.id).toBe("file-search-result-create-app");
+    expect(input.getAttribute("aria-activedescendant")).toBe(
+      createAppOption.id,
+    );
+    expect(createAppOption.getAttribute("aria-selected")).toBe("true");
+    expect(appOption.getAttribute("aria-selected")).toBe("false");
+  });
+
+  it("prefills the composer draft when the create-app entry is activated by Enter", async () => {
+    vi.mocked(api.listThreadApps).mockResolvedValue([STATUS_APP]);
+    renderNewTabPage({ projectId: "proj-1" });
+
+    const input = screen.getByRole("textbox", {
+      name: "Search apps and files",
+    });
+    await screen.findByRole("option", { name: /Status/u });
+
+    fireEvent.keyDown(input, { key: "ArrowDown" });
+    fireEvent.keyDown(input, { key: "Enter" });
 
     expect(getStoredThreadDraft()).toEqual({
       text: CREATE_APP_PROMPT_TEMPLATE,
@@ -283,3 +355,158 @@ describe("NewTabPage", () => {
     expect(api.listThreadStoragePaths).not.toHaveBeenCalled();
   });
 });
+
+describe("NewTabPage recent section", () => {
+  it("lists recent items newest-first with type chips and relative timestamps", async () => {
+    mockEmptySearchSources();
+    const threadId = "thr-recent-render";
+    const now = Date.now();
+    seedRecentItems(threadId, [
+      {
+        source: "thread-storage",
+        path: "plans/swap-model.md",
+        openedAt: now - 2 * MINUTE_MS,
+      },
+      {
+        source: "thread-storage",
+        path: "plans/sidebar-mockup.html",
+        openedAt: now - HOUR_MS,
+      },
+      {
+        source: "workspace",
+        path: "apps/app/src/components/secondary-panel/NewTabFileSearch.tsx",
+        openedAt: now - 25 * HOUR_MS,
+      },
+    ]);
+
+    renderNewTabPage({
+      projectId: "proj-1",
+      currentThreadId: threadId,
+      currentThreadType: "manager",
+    });
+
+    const recentList = await screen.findByRole("listbox", { name: "Recent" });
+    const recentOptions = within(recentList).getAllByRole("option");
+    expect(recentOptions.map((option) => option.textContent ?? "")).toEqual([
+      expect.stringContaining("swap-model.md"),
+      expect.stringContaining("sidebar-mockup.html"),
+      expect.stringContaining("NewTabFileSearch.tsx"),
+    ]);
+
+    // Chip labels follow the artifact kind, not just the extension.
+    expect(within(recentList).getByText("Plan")).toBeTruthy();
+    expect(within(recentList).getByText("Mockup")).toBeTruthy();
+    expect(within(recentList).getByText("Source")).toBeTruthy();
+
+    // Right-aligned relative timestamps.
+    expect(within(recentList).getByText("2m ago")).toBeTruthy();
+    expect(within(recentList).getByText("1h ago")).toBeTruthy();
+    expect(within(recentList).getByText("Yesterday")).toBeTruthy();
+  });
+
+  it("opens a recent item in the panel when its row is clicked", async () => {
+    mockEmptySearchSources();
+    const threadId = "thr-recent-click";
+    seedRecentItems(threadId, [
+      {
+        source: "thread-storage",
+        path: "plans/swap-model.md",
+        openedAt: Date.now() - 2 * MINUTE_MS,
+      },
+    ]);
+    const { onSelect } = renderNewTabPage({
+      projectId: "proj-1",
+      currentThreadId: threadId,
+      currentThreadType: "manager",
+    });
+
+    fireEvent.click(
+      await screen.findByRole("option", { name: /swap-model\.md/u }),
+    );
+
+    expect(onSelect).toHaveBeenCalledWith({
+      source: "thread-storage",
+      path: "plans/swap-model.md",
+    });
+  });
+
+  it("filters recent items by query and hides the section on no match", async () => {
+    mockEmptySearchSources();
+    const threadId = "thr-recent-filter";
+    seedRecentItems(threadId, [
+      {
+        source: "thread-storage",
+        path: "plans/swap-model.md",
+        openedAt: Date.now() - 2 * MINUTE_MS,
+      },
+      {
+        source: "thread-storage",
+        path: "plans/sidebar-mockup.html",
+        openedAt: Date.now() - 3 * MINUTE_MS,
+      },
+    ]);
+    renderNewTabPage({
+      projectId: "proj-1",
+      currentThreadId: threadId,
+      currentThreadType: "manager",
+    });
+
+    const input = screen.getByRole("textbox", {
+      name: "Search apps and files",
+    });
+    await screen.findByText("swap-model.md");
+
+    fireEvent.change(input, { target: { value: "sidebar" } });
+    expect(screen.queryByText("swap-model.md")).toBeNull();
+    expect(screen.getByText("sidebar-mockup.html")).toBeTruthy();
+
+    fireEvent.change(input, { target: { value: "zzz-no-match" } });
+    expect(screen.queryByText("sidebar-mockup.html")).toBeNull();
+    expect(screen.queryByText("Recent")).toBeNull();
+  });
+
+  it("reaches a recent row via keyboard navigation", async () => {
+    mockEmptySearchSources();
+    vi.mocked(api.listThreadApps).mockResolvedValue([STATUS_APP]);
+    const threadId = "thr-recent-keys";
+    seedRecentItems(threadId, [
+      {
+        source: "thread-storage",
+        path: "plans/swap-model.md",
+        openedAt: Date.now() - 2 * MINUTE_MS,
+      },
+    ]);
+    renderNewTabPage({
+      projectId: "proj-1",
+      currentThreadId: threadId,
+      currentThreadType: "manager",
+    });
+
+    const input = screen.getByRole("textbox", {
+      name: "Search apps and files",
+    });
+    // Await the app row so the async sources have settled and the active-index
+    // reset no longer fires; the recent row trails Apps + Create App in one
+    // shared index space, so ArrowUp wraps onto it from the first entry.
+    const appOption = await screen.findByRole("option", { name: /Status/u });
+    const recentOption = screen.getByRole("option", {
+      name: /swap-model\.md/u,
+    });
+    expect(input.getAttribute("aria-activedescendant")).toBe(appOption.id);
+
+    fireEvent.keyDown(input, { key: "ArrowUp" });
+    expect(input.getAttribute("aria-activedescendant")).toBe(recentOption.id);
+    expect(recentOption.getAttribute("aria-selected")).toBe("true");
+  });
+
+  it("degrades to a dashed hint when the thread has no recent items", async () => {
+    mockEmptySearchSources();
+    renderNewTabPage({
+      projectId: "proj-1",
+      currentThreadId: "thr-recent-empty",
+      currentThreadType: "manager",
+    });
+
+    expect(await screen.findByText(/Nothing referenced yet/u)).toBeTruthy();
+  });
+});
diff --git a/apps/app/src/components/secondary-panel/SecondaryPanelTabStrip.test.tsx b/apps/app/src/components/secondary-panel/SecondaryPanelTabStrip.test.tsx
new file mode 100644
index 000000000..7e5103143
--- /dev/null
+++ b/apps/app/src/components/secondary-panel/SecondaryPanelTabStrip.test.tsx
@@ -0,0 +1,395 @@
+// @vitest-environment jsdom
+
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  vi,
+  type Mock,
+} from "vitest";
+import {
+  type SecondaryPanelFileTab,
+  SecondaryPanelTabStrip,
+} from "./SecondaryPanelTabStrip";
+
+const noop = () => {};
+
+interface BuildTabArgs {
+  id: string;
+  filename: string;
+  isActive: boolean;
+}
+
+function buildTab({
+  id,
+  filename,
+  isActive,
+}: BuildTabArgs): SecondaryPanelFileTab {
+  return {
+    id,
+    filename,
+    isActive,
+    isPinned: false,
+    statusLabel: null,
+    onSelect: noop,
+    onClose: noop,
+  };
+}
+
+function getViewport(): HTMLElement {
+  const viewport = document.querySelector<HTMLElement>(".no-scrollbar");
+  if (viewport === null) {
+    throw new Error("Expected the tab strip scroll viewport to render");
+  }
+  return viewport;
+}
+
+/**
+ * jsdom reports 0 for every layout metric, so the strip never looks
+ * overflowing on its own. This stubs the geometry of the scroll viewport and
+ * fires a scroll event so the component recomputes its overflow state.
+ */
+function simulateOverflow({
+  scrollLeft,
+  scrollWidth,
+  clientWidth,
+}: {
+  scrollLeft: number;
+  scrollWidth: number;
+  clientWidth: number;
+}): void {
+  const viewport = getViewport();
+  Object.defineProperty(viewport, "scrollWidth", {
+    configurable: true,
+    value: scrollWidth,
+  });
+  Object.defineProperty(viewport, "clientWidth", {
+    configurable: true,
+    value: clientWidth,
+  });
+  Object.defineProperty(viewport, "scrollLeft", {
+    configurable: true,
+    writable: true,
+    value: scrollLeft,
+  });
+  fireEvent.scroll(viewport);
+}
+
+/**
+ * Dispatch a cancelable wheel event so the test can observe whether the strip
+ * consumed it (`defaultPrevented`) or let it bubble for normal page scrolling.
+ * The component attaches a non-passive native `wheel` listener directly on the
+ * viewport, so dispatching to the viewport exercises that handler.
+ */
+function dispatchWheel(viewport: HTMLElement, deltaY: number): WheelEvent {
+  const wheelEvent = new WheelEvent("wheel", {
+    deltaY,
+    deltaX: 0,
+    bubbles: true,
+    cancelable: true,
+  });
+  viewport.dispatchEvent(wheelEvent);
+  return wheelEvent;
+}
+
+let scrollIntoViewSpy: Mock;
+let originalScrollIntoView: typeof Element.prototype.scrollIntoView;
+let originalScrollBy: typeof Element.prototype.scrollBy;
+
+beforeEach(() => {
+  vi.stubGlobal(
+    "ResizeObserver",
+    class {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    },
+  );
+  // The shared test setup stubs scrollIntoView as a no-op; swap in a spy so the
+  // auto-scroll path is observable, then restore the shared stub afterwards.
+  originalScrollIntoView = Element.prototype.scrollIntoView;
+  scrollIntoViewSpy = vi.fn();
+  Element.prototype.scrollIntoView = scrollIntoViewSpy;
+  // jsdom doesn't implement scrollBy; remember it so individual tests can swap
+  // in a spy and we can restore it afterwards.
+  originalScrollBy = Element.prototype.scrollBy;
+});
+
+afterEach(() => {
+  cleanup();
+  Element.prototype.scrollIntoView = originalScrollIntoView;
+  Element.prototype.scrollBy = originalScrollBy;
+  vi.unstubAllGlobals();
+  vi.restoreAllMocks();
+});
+
+describe("SecondaryPanelTabStrip", () => {
+  it("hides both scroll chevrons when every tab fits", () => {
+    render(
+      <SecondaryPanelTabStrip
+        fileTabs={[
+          buildTab({ id: "a", filename: "a.ts", isActive: true }),
+          buildTab({ id: "b", filename: "b.ts", isActive: false }),
+        ]}
+        usesDesktopChrome={false}
+      />,
+    );
+
+    simulateOverflow({ scrollLeft: 0, scrollWidth: 200, clientWidth: 400 });
+
+    expect(
+      screen.queryByRole("button", { name: "Scroll tabs left" }),
+    ).toBeNull();
+    expect(
+      screen.queryByRole("button", { name: "Scroll tabs right" }),
+    ).toBeNull();
+  });
+
+  it("shows only the right chevron at the start of an overflowing strip", () => {
+    render(
+      <SecondaryPanelTabStrip
+        fileTabs={[
+          buildTab({ id: "a", filename: "a.ts", isActive: true }),
+          buildTab({ id: "b", filename: "b.ts", isActive: false }),
+          buildTab({ id: "c", filename: "c.ts", isActive: false }),
+        ]}
+        usesDesktopChrome={false}
+      />,
+    );
+
+    simulateOverflow({ scrollLeft: 0, scrollWidth: 800, clientWidth: 300 });
+
+    expect(
+      screen.queryByRole("button", { name: "Scroll tabs left" }),
+    ).toBeNull();
+    expect(
+      screen.getByRole("button", { name: "Scroll tabs right" }),
+    ).not.toBeNull();
+  });
+
+  it("shows both chevrons when scrolled to the middle of an overflowing strip", () => {
+    render(
+      <SecondaryPanelTabStrip
+        fileTabs={[
+          buildTab({ id: "a", filename: "a.ts", isActive: true }),
+          buildTab({ id: "b", filename: "b.ts", isActive: false }),
+          buildTab({ id: "c", filename: "c.ts", isActive: false }),
+        ]}
+        usesDesktopChrome={false}
+      />,
+    );
+
+    simulateOverflow({ scrollLeft: 250, scrollWidth: 800, clientWidth: 300 });
+
+    expect(
+      screen.getByRole("button", { name: "Scroll tabs left" }),
+    ).not.toBeNull();
+    expect(
+      screen.getByRole("button", { name: "Scroll tabs right" }),
+    ).not.toBeNull();
+  });
+
+  it("keeps desktop scroll chevrons split across the strip edges", () => {
+    render(
+      <SecondaryPanelTabStrip
+        fileTabs={[
+          buildTab({ id: "a", filename: "a.ts", isActive: true }),
+          buildTab({ id: "b", filename: "b.ts", isActive: false }),
+          buildTab({ id: "c", filename: "c.ts", isActive: false }),
+        ]}
+        usesDesktopChrome={true}
+      />,
+    );
+
+    simulateOverflow({ scrollLeft: 250, scrollWidth: 800, clientWidth: 300 });
+
+    const leftChevron = screen.getByRole("button", {
+      name: "Scroll tabs left",
+    });
+    const rightChevron = screen.getByRole("button", {
+      name: "Scroll tabs right",
+    });
+
+    expect(leftChevron.classList.contains("absolute")).toBe(true);
+    expect(leftChevron.classList.contains("left-0")).toBe(true);
+    expect(leftChevron.classList.contains("relative")).toBe(false);
+    expect(leftChevron.classList.contains("right-0")).toBe(false);
+    expect(leftChevron.getAttribute("tabindex")).toBe("-1");
+
+    expect(rightChevron.classList.contains("absolute")).toBe(true);
+    expect(rightChevron.classList.contains("right-0")).toBe(true);
+    expect(rightChevron.classList.contains("relative")).toBe(false);
+    expect(rightChevron.classList.contains("left-0")).toBe(false);
+    expect(rightChevron.getAttribute("tabindex")).toBe("-1");
+  });
+
+  it("gives both chevrons a solid surface fill so tabs don't bleed through", () => {
+    render(
+      <SecondaryPanelTabStrip
+        fileTabs={[
+          buildTab({ id: "a", filename: "a.ts", isActive: true }),
+          buildTab({ id: "b", filename: "b.ts", isActive: false }),
+          buildTab({ id: "c", filename: "c.ts", isActive: false }),
+        ]}
+        usesDesktopChrome={false}
+      />,
+    );
+
+    simulateOverflow({ scrollLeft: 250, scrollWidth: 800, clientWidth: 300 });
+
+    // The chevrons overlap the edge tabs, so they must paint an opaque panel
+    // surface (`bg-background`) rather than the ghost variant's transparent
+    // default — otherwise the tab label beneath shows through.
+    expect(
+      screen
+        .getByRole("button", { name: "Scroll tabs left" })
+        .classList.contains("bg-background"),
+    ).toBe(true);
+    expect(
+      screen
+        .getByRole("button", { name: "Scroll tabs right" })
+        .classList.contains("bg-background"),
+    ).toBe(true);
+  });
+
+  it("shows only the left chevron at the end of an overflowing strip", () => {
+    render(
+      <SecondaryPanelTabStrip
+        fileTabs={[
+          buildTab({ id: "a", filename: "a.ts", isActive: true }),
+          buildTab({ id: "b", filename: "b.ts", isActive: false }),
+          buildTab({ id: "c", filename: "c.ts", isActive: false }),
+        ]}
+        usesDesktopChrome={false}
+      />,
+    );
+
+    // scrollLeft === scrollWidth - clientWidth → pinned to the right edge.
+    simulateOverflow({ scrollLeft: 500, scrollWidth: 800, clientWidth: 300 });
+
+    expect(
+      screen.getByRole("button", { name: "Scroll tabs left" }),
+    ).not.toBeNull();
+    expect(
+      screen.queryByRole("button", { name: "Scroll tabs right" }),
+    ).toBeNull();
+  });
+
+  it("nudges the viewport horizontally when a chevron is clicked", () => {
+    const scrollBy = vi.fn();
+    Element.prototype.scrollBy = scrollBy;
+
+    render(
+      <SecondaryPanelTabStrip
+        fileTabs={[
+          buildTab({ id: "a", filename: "a.ts", isActive: true }),
+          buildTab({ id: "b", filename: "b.ts", isActive: false }),
+          buildTab({ id: "c", filename: "c.ts", isActive: false }),
+        ]}
+        usesDesktopChrome={false}
+      />,
+    );
+
+    simulateOverflow({ scrollLeft: 0, scrollWidth: 800, clientWidth: 300 });
+
+    fireEvent.click(screen.getByRole("button", { name: "Scroll tabs right" }));
+
+    expect(scrollBy).toHaveBeenCalledWith(
+      expect.objectContaining({ behavior: "smooth" }),
+    );
+    const [firstCall] = scrollBy.mock.calls;
+    expect(firstCall[0].left).toBeGreaterThan(0);
+  });
+
+  it("scrolls the active tab into view on mount and when the active tab changes", () => {
+    const tabs = [
+      buildTab({ id: "a", filename: "a.ts", isActive: true }),
+      buildTab({ id: "b", filename: "b.ts", isActive: false }),
+    ];
+
+    const { rerender } = render(
+      <SecondaryPanelTabStrip fileTabs={tabs} usesDesktopChrome={false} />,
+    );
+
+    expect(scrollIntoViewSpy).toHaveBeenCalledTimes(1);
+
+    rerender(
+      <SecondaryPanelTabStrip
+        fileTabs={[
+          buildTab({ id: "a", filename: "a.ts", isActive: false }),
+          buildTab({ id: "b", filename: "b.ts", isActive: true }),
+        ]}
+        usesDesktopChrome={false}
+      />,
+    );
+
+    expect(scrollIntoViewSpy).toHaveBeenCalledTimes(2);
+  });
+
+  it("translates a vertical wheel delta into horizontal scrolling when it can scroll that way", () => {
+    render(
+      <SecondaryPanelTabStrip
+        fileTabs={[
+          buildTab({ id: "a", filename: "a.ts", isActive: true }),
+          buildTab({ id: "b", filename: "b.ts", isActive: false }),
+          buildTab({ id: "c", filename: "c.ts", isActive: false }),
+        ]}
+        usesDesktopChrome={false}
+      />,
+    );
+
+    simulateOverflow({ scrollLeft: 0, scrollWidth: 800, clientWidth: 300 });
+    const viewport = getViewport();
+
+    const wheelEvent = dispatchWheel(viewport, 120);
+
+    expect(viewport.scrollLeft).toBe(120);
+    expect(wheelEvent.defaultPrevented).toBe(true);
+  });
+
+  it("lets a downward wheel at the right edge scroll the page instead of trapping it", () => {
+    render(
+      <SecondaryPanelTabStrip
+        fileTabs={[
+          buildTab({ id: "a", filename: "a.ts", isActive: true }),
+          buildTab({ id: "b", filename: "b.ts", isActive: false }),
+          buildTab({ id: "c", filename: "c.ts", isActive: false }),
+        ]}
+        usesDesktopChrome={false}
+      />,
+    );
+
+    // Pinned to the right edge: scrollLeft === scrollWidth - clientWidth.
+    simulateOverflow({ scrollLeft: 500, scrollWidth: 800, clientWidth: 300 });
+    const viewport = getViewport();
+
+    const wheelEvent = dispatchWheel(viewport, 120);
+
+    expect(viewport.scrollLeft).toBe(500);
+    expect(wheelEvent.defaultPrevented).toBe(false);
+  });
+
+  it("lets an upward wheel at the left edge scroll the page instead of trapping it", () => {
+    render(
+      <SecondaryPanelTabStrip
+        fileTabs={[
+          buildTab({ id: "a", filename: "a.ts", isActive: true }),
+          buildTab({ id: "b", filename: "b.ts", isActive: false }),
+          buildTab({ id: "c", filename: "c.ts", isActive: false }),
+        ]}
+        usesDesktopChrome={false}
+      />,
+    );
+
+    simulateOverflow({ scrollLeft: 0, scrollWidth: 800, clientWidth: 300 });
+    const viewport = getViewport();
+
+    const wheelEvent = dispatchWheel(viewport, -120);
+
+    expect(viewport.scrollLeft).toBe(0);
+    expect(wheelEvent.defaultPrevented).toBe(false);
+  });
+});
diff --git a/apps/app/src/components/secondary-panel/SecondaryPanelTabStrip.tsx b/apps/app/src/components/secondary-panel/SecondaryPanelTabStrip.tsx
new file mode 100644
index 000000000..6a0ea30ed
--- /dev/null
+++ b/apps/app/src/components/secondary-panel/SecondaryPanelTabStrip.tsx
@@ -0,0 +1,279 @@
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+import { Button } from "@/components/ui/button.js";
+import { Icon } from "@/components/ui/icon.js";
+import { OverflowFade } from "@/components/ui/overflow-fade";
+import { TabPill } from "@/components/ui/tab-pill";
+import { cn } from "@/lib/utils";
+import {
+  MACOS_APP_REGION_NO_DRAG_CLASS,
+  MACOS_WINDOW_NO_DRAG_CLASS,
+} from "@/lib/bb-desktop";
+import type { SecondaryPanelFileTab } from "./secondaryPanelFileTab";
+export type { SecondaryPanelFileTab } from "./secondaryPanelFileTab";
+
+// How far a chevron click nudges the strip, in CSS pixels. Roughly one wide
+// file tab so a click reveals the next tab without overshooting.
+const CHEVRON_SCROLL_STEP_PX = 140;
+
+// Slack so sub-pixel scroll offsets don't leave a fade/chevron stuck on at a
+// hard edge.
+const EDGE_EPSILON_PX = 1;
+
+interface TabStripOverflowState {
+  /** Scrolled away from the left edge (content hidden to the left). */
+  canScrollLeft: boolean;
+  /** More content remains to the right. */
+  canScrollRight: boolean;
+}
+
+const INITIAL_OVERFLOW_STATE: TabStripOverflowState = {
+  canScrollLeft: false,
+  canScrollRight: false,
+};
+
+export interface SecondaryPanelTabStripProps {
+  fileTabs: SecondaryPanelFileTab[];
+  usesDesktopChrome: boolean;
+}
+
+/**
+ * The middle, horizontally-scrolling region of the secondary panel tab strip.
+ *
+ * Only the file tabs scroll; the leading Info/Diff controls and the trailing
+ * new-tab + panel-toggle controls stay anchored outside this component. Edge
+ * fades and scroll chevrons appear only on a side that has more tabs, and the
+ * active tab is auto-scrolled into view on mount and whenever it changes
+ * (covering pointer, keyboard, and programmatic selection).
+ */
+export function SecondaryPanelTabStrip({
+  fileTabs,
+  usesDesktopChrome,
+}: SecondaryPanelTabStripProps) {
+  const viewportRef = useRef<HTMLDivElement>(null);
+  const activeTabRef = useRef<HTMLDivElement>(null);
+  const [overflow, setOverflow] = useState<TabStripOverflowState>(
+    INITIAL_OVERFLOW_STATE,
+  );
+
+  const recomputeOverflow = useCallback(() => {
+    const viewport = viewportRef.current;
+    if (viewport === null) {
+      return;
+    }
+    const { scrollLeft, scrollWidth, clientWidth } = viewport;
+    const maxScrollLeft = scrollWidth - clientWidth;
+    const isScrollable = maxScrollLeft > EDGE_EPSILON_PX;
+    setOverflow({
+      canScrollLeft: isScrollable && scrollLeft > EDGE_EPSILON_PX,
+      canScrollRight:
+        isScrollable && scrollLeft < maxScrollLeft - EDGE_EPSILON_PX,
+    });
+  }, []);
+
+  // Track the viewport's own scrolling and resizing. The ResizeObserver also
+  // fires once on observe, seeding the initial overflow state.
+  useEffect(() => {
+    const viewport = viewportRef.current;
+    if (viewport === null) {
+      return;
+    }
+    viewport.addEventListener("scroll", recomputeOverflow, { passive: true });
+    const resizeObserver = new ResizeObserver(recomputeOverflow);
+    resizeObserver.observe(viewport);
+    return () => {
+      viewport.removeEventListener("scroll", recomputeOverflow);
+      resizeObserver.disconnect();
+    };
+  }, [recomputeOverflow]);
+
+  // The set of tabs can change width without resizing the viewport (open/close,
+  // rename), so recompute whenever the tab list changes.
+  useEffect(() => {
+    recomputeOverflow();
+  }, [fileTabs, recomputeOverflow]);
+
+  // Bring the active tab into view on mount and on every active-tab change. This
+  // is the single hook that covers click, keyboard focus, and programmatic
+  // selection. jsdom doesn't implement scrollIntoView, so guard the call.
+  const activeTabId = fileTabs.find((tab) => tab.isActive)?.id ?? null;
+  useLayoutEffect(() => {
+    const activeTabElement = activeTabRef.current;
+    if (activeTabElement === null) {
+      return;
+    }
+    activeTabElement.scrollIntoView({ inline: "nearest", block: "nearest" });
+  }, [activeTabId]);
+
+  // A plain mouse wheel over the strip should move it sideways. React registers
+  // its onWheel listener as passive, so a synthetic handler can't call
+  // preventDefault; attach a non-passive native listener instead. Only consume
+  // the gesture (and suppress the page's vertical scroll) when the strip can
+  // actually move horizontally in the wheel's direction — at a horizontal edge
+  // we let the event bubble so the page keeps scrolling normally. Trackpad
+  // horizontal gestures arrive as deltaX and scroll natively, so only deltaY is
+  // translated here.
+  useEffect(() => {
+    const viewport = viewportRef.current;
+    if (viewport === null) {
+      return;
+    }
+    const handleWheel = (event: WheelEvent) => {
+      if (event.deltaY === 0) {
+        return;
+      }
+      const { scrollLeft, scrollWidth, clientWidth } = viewport;
+      const maxScrollLeft = scrollWidth - clientWidth;
+      if (maxScrollLeft <= EDGE_EPSILON_PX) {
+        return;
+      }
+      const canScrollInWheelDirection =
+        event.deltaY > 0
+          ? scrollLeft < maxScrollLeft - EDGE_EPSILON_PX
+          : scrollLeft > EDGE_EPSILON_PX;
+      if (!canScrollInWheelDirection) {
+        return;
+      }
+      viewport.scrollLeft += event.deltaY;
+      event.preventDefault();
+    };
+    viewport.addEventListener("wheel", handleWheel, { passive: false });
+    return () => {
+      viewport.removeEventListener("wheel", handleWheel);
+    };
+  }, []);
+
+  const scrollByStep = (direction: -1 | 1) => {
+    viewportRef.current?.scrollBy({
+      left: direction * CHEVRON_SCROLL_STEP_PX,
+      behavior: "smooth",
+    });
+  };
+
+  const noDragClass = usesDesktopChrome ? MACOS_WINDOW_NO_DRAG_CLASS : null;
+  const chevronNoDragClass = usesDesktopChrome
+    ? MACOS_APP_REGION_NO_DRAG_CLASS
+    : null;
+
+  return (
+    <div className="group relative flex min-w-0 flex-1 items-center">
+      {overflow.canScrollLeft ? (
+        <OverflowFade placement="left" className="z-10" />
+      ) : null}
+      {overflow.canScrollRight ? (
+        <OverflowFade placement="right" className="z-10" />
+      ) : null}
+      <div
+        ref={viewportRef}
+        className="no-scrollbar flex min-w-0 items-center gap-1 overflow-x-auto overflow-y-hidden scroll-smooth"
+      >
+        {fileTabs.map((tab) => (
+          <div
+            key={tab.id}
+            ref={tab.isActive ? activeTabRef : undefined}
+            className={cn("shrink-0", noDragClass)}
+          >
+            <FileTab tab={tab} />
+          </div>
+        ))}
+      </div>
+      {overflow.canScrollLeft ? (
+        <TabStripScrollChevron
+          direction="left"
+          className={chevronNoDragClass}
+          onClick={() => scrollByStep(-1)}
+        />
+      ) : null}
+      {overflow.canScrollRight ? (
+        <TabStripScrollChevron
+          direction="right"
+          className={chevronNoDragClass}
+          onClick={() => scrollByStep(1)}
+        />
+      ) : null}
+    </div>
+  );
+}
+
+interface TabStripScrollChevronProps {
+  direction: "left" | "right";
+  className: string | null;
+  onClick: () => void;
+}
+
+function TabStripScrollChevron({
+  direction,
+  className,
+  onClick,
+}: TabStripScrollChevronProps) {
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      size="sm"
+      // Decorative scroll control: every tab is already reachable via Tab, so
+      // keep the chevron out of the tab order to avoid duplicate stops.
+      tabIndex={-1}
+      onClick={onClick}
+      aria-label={
+        direction === "left" ? "Scroll tabs left" : "Scroll tabs right"
+      }
+      className={cn(
+        // Solid panel-surface fill matching the tab strip / top-chrome
+        // (`bg-background`) and the edge fade's terminal color, so the chevron
+        // fully occludes the tab labels beneath it instead of letting them bleed
+        // through. The `ghost` variant still supplies the same `bg-state-hover`
+        // hover used by the sibling header icon buttons (Info/Diff/New tab), and
+        // because both tokens are opaque the chevron stays solid in every state.
+        // Square (`rounded-none`) on purpose: the chevron overlays the
+        // partially-scrolled edge tab, so an opaque block with a straight inner
+        // edge truncates that tab along a clean vertical line and it reads as
+        // sliding *under* the strip edge. A corner radius would instead make the
+        // chevron a discrete pill beside the rounded tab pill — a button on a
+        // button. `rounded-none` also beats the Button base `rounded-md`.
+        "absolute z-50 h-7 w-7 shrink-0 rounded-none bg-background p-0",
+        // Revealed only while the strip is hovered (or the chevron itself is
+        // focused) so the chevrons don't permanently cover the edge tabs;
+        // `pointer-events` follow visibility so a hidden chevron never
+        // intercepts clicks meant for the tab beneath it.
+        "pointer-events-none opacity-0 transition group-hover:pointer-events-auto group-hover:opacity-100 focus-visible:pointer-events-auto focus-visible:opacity-100",
+        direction === "left" ? "left-0" : "right-0",
+        className,
+      )}
+    >
+      <Icon name={direction === "left" ? "ChevronLeft" : "ChevronRight"} />
+    </Button>
+  );
+}
+
+function FileTab({ tab }: { tab: SecondaryPanelFileTab }) {
+  const title =
+    tab.statusLabel === null
+      ? tab.filename
+      : `${tab.filename} (${tab.statusLabel})`;
+  return (
+    <TabPill
+      label={tab.filename}
+      leadingVisual={tab.leadingVisual}
+      secondaryLabel={tab.statusLabel === null ? null : `(${tab.statusLabel})`}
+      title={title}
+      isActive={tab.isActive}
+      onSelect={tab.onSelect}
+      labelMaxWidthClass="max-w-[160px]"
+      closeAction={
+        tab.isPinned
+          ? null
+          : {
+              onClose: tab.onClose,
+              closeLabel: `Close ${tab.filename}`,
+              closeTooltip: "Close tab",
+            }
+      }
+    />
+  );
+}
diff --git a/apps/app/src/components/secondary-panel/ThreadSecondaryPanel.stories.tsx b/apps/app/src/components/secondary-panel/ThreadSecondaryPanel.stories.tsx
index 715c0c955..72edcc48a 100644
--- a/apps/app/src/components/secondary-panel/ThreadSecondaryPanel.stories.tsx
+++ b/apps/app/src/components/secondary-panel/ThreadSecondaryPanel.stories.tsx
@@ -75,6 +75,9 @@ function ShellRow({
             onCollapse={noop}
             onClose={noop}
             onOpenNewTab={noop}
+            isConversationCollapsed={false}
+            onToggleConversationCollapse={noop}
+            reserveLeftForDesktopTrafficLights={false}
             renderAsDrawer
           />
         </PanelStage>
@@ -150,6 +153,9 @@ function FileTabsShellInner({
         onCollapse={noop}
         onClose={noop}
         onOpenNewTab={noop}
+        isConversationCollapsed={false}
+        onToggleConversationCollapse={noop}
+        reserveLeftForDesktopTrafficLights={false}
         renderAsDrawer
       />
     </PanelStage>
diff --git a/apps/app/src/components/secondary-panel/ThreadSecondaryPanel.test.tsx b/apps/app/src/components/secondary-panel/ThreadSecondaryPanel.test.tsx
index 58edd6bbe..57ce317dc 100644
--- a/apps/app/src/components/secondary-panel/ThreadSecondaryPanel.test.tsx
+++ b/apps/app/src/components/secondary-panel/ThreadSecondaryPanel.test.tsx
@@ -14,13 +14,16 @@ import type {
   BbDesktopInfo,
   BbDesktopInfoChangeHandler,
 } from "@bb/server-contract";
-import { afterEach, describe, expect, it } from "vitest";
+import { createNoopDesktopBrowserApi } from "@/test/bb-desktop-test-utils";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import { createQueryClientTestHarness } from "@/test/queryClientTestHarness";
 import {
   type SecondaryPanelFileTab,
   ThreadSecondaryPanel,
 } from "./ThreadSecondaryPanel";
 import {
+  MACOS_COLLAPSED_HEADER_RESERVE_CLASS,
+  MACOS_TRAFFIC_LIGHT_RESERVE_CLASS,
   MACOS_WINDOW_DRAG_CLASS,
   MACOS_WINDOW_NO_DRAG_CLASS,
 } from "@/lib/bb-desktop";
@@ -28,7 +31,13 @@ import {
 interface RenderPanelArgs {
   fileTabContent?: ReactNode;
   fileTabs?: SecondaryPanelFileTab[];
+  browserDeck?: ReactNode;
+  isBrowserTabActive?: boolean;
   renderAsDrawer?: boolean;
+  isOpen?: boolean;
+  isConversationCollapsed?: boolean;
+  onToggleConversationCollapse?: () => void;
+  reserveLeftForDesktopTrafficLights?: boolean;
 }
 
 interface ResizeDragEndScenario {
@@ -64,6 +73,7 @@ const MACOS_DESKTOP_INFO: BbDesktopInfo = {
 function createBbDesktopApi(info: BbDesktopInfo): BbDesktopApi {
   return {
     ...info,
+    browser: createNoopDesktopBrowserApi(),
     async checkForUpdates() {
       return info;
     },
@@ -76,6 +86,9 @@ function createBbDesktopApi(info: BbDesktopInfo): BbDesktopApi {
     onChange(_listener: BbDesktopInfoChangeHandler) {
       return () => undefined;
     },
+    setTheme() {
+      // no-op
+    },
   };
 }
 
@@ -117,7 +130,13 @@ function expectNoDragRegionOnElementOrAncestor(element: HTMLElement): void {
 function renderPanel({
   fileTabContent,
   fileTabs,
+  browserDeck,
+  isBrowserTabActive = false,
   renderAsDrawer = true,
+  isOpen = true,
+  isConversationCollapsed = false,
+  onToggleConversationCollapse = noop,
+  reserveLeftForDesktopTrafficLights = false,
 }: RenderPanelArgs) {
   const { wrapper } = createQueryClientTestHarness();
   const panel = (
@@ -127,13 +146,18 @@ function renderPanel({
       environmentId={undefined}
       fileTabContent={fileTabContent}
       fileTabs={fileTabs}
-      isOpen
+      browserDeck={browserDeck}
+      isBrowserTabActive={isBrowserTabActive}
+      isOpen={isOpen}
       metadataContent={<div>Thread details</div>}
       onCollapse={noop}
       onClose={noop}
       onOpenNewTab={noop}
       onPanelChange={noop}
       onPanelFocus={noop}
+      isConversationCollapsed={isConversationCollapsed}
+      onToggleConversationCollapse={onToggleConversationCollapse}
+      reserveLeftForDesktopTrafficLights={reserveLeftForDesktopTrafficLights}
       renderAsDrawer={renderAsDrawer}
       showGitDiffTab={false}
     />
@@ -299,4 +323,133 @@ describe("ThreadSecondaryPanel", () => {
       expect(window.getComputedStyle(iframe).pointerEvents).toBe("auto");
     },
   );
+
+  it("reserves the full traffic-light step on the top chrome when the panel is the top-left-most surface", () => {
+    renderPanel({ reserveLeftForDesktopTrafficLights: true });
+
+    const topChrome = screen.getByTestId("thread-secondary-panel-top-chrome");
+    // The panel sits right of the 36px rail, so its leading tab must clear the
+    // pinned sidebar-collapse trigger that floats over the header — the full
+    // reserve, not the smaller page-header inset (which would re-collide).
+    expect(topChrome.className).toContain(MACOS_TRAFFIC_LIGHT_RESERVE_CLASS);
+    expect(topChrome.className).not.toContain(
+      MACOS_COLLAPSED_HEADER_RESERVE_CLASS,
+    );
+  });
+
+  it("leaves the top chrome flush when the sidebar or conversation already absorbs the traffic-light cluster", () => {
+    renderPanel({ reserveLeftForDesktopTrafficLights: false });
+
+    const topChrome = screen.getByTestId("thread-secondary-panel-top-chrome");
+    expect(topChrome.className).not.toContain(MACOS_TRAFFIC_LIGHT_RESERVE_CLASS);
+  });
+
+  it("shows the resize seam hairline while the conversation is expanded", () => {
+    renderPanel({ renderAsDrawer: false, isConversationCollapsed: false });
+
+    const resizeHandle = screen.getByLabelText(
+      "Resize thread and secondary panels",
+    );
+    expect(resizeHandle.className).toContain("w-px");
+    expect(resizeHandle.className).toContain("opacity-100");
+    expect(resizeHandle.className).not.toContain("w-0");
+  });
+
+  it("renders the browser deck and suppresses the normal content slot when a browser tab is active", () => {
+    renderPanel({
+      isBrowserTabActive: true,
+      browserDeck: <div>browser deck</div>,
+      fileTabs: [
+        buildActiveFileTab({ id: "browser:a", filename: "Example", isPinned: false }),
+      ],
+      fileTabContent: <div>file tab content</div>,
+    });
+
+    expect(screen.getByText("browser deck")).not.toBeNull();
+    // The single-slot file content must not render under the deck.
+    expect(screen.queryByText("file tab content")).toBeNull();
+  });
+
+  it("keeps the browser deck mounted while a non-browser tab is active", () => {
+    renderPanel({
+      isBrowserTabActive: false,
+      browserDeck: <div>browser deck</div>,
+      fileTabs: [
+        buildActiveFileTab({ id: "app:status", filename: "Status", isPinned: true }),
+      ],
+      fileTabContent: <div>file tab content</div>,
+    });
+
+    // The deck stays in the tree (its native views survive) even though a
+    // non-browser tab owns the visible content slot.
+    expect(screen.getByText("browser deck")).not.toBeNull();
+    expect(screen.getByText("file tab content")).not.toBeNull();
+  });
+
+  it("folds the resize seam to zero width while the conversation is collapsed so it does not double the rail's edge", () => {
+    renderPanel({ renderAsDrawer: false, isConversationCollapsed: true });
+
+    const resizeHandle = screen.getByLabelText(
+      "Resize thread and secondary panels",
+    );
+    // Collapsed: the rail's recessed edge is the single seam, so the handle
+    // hairline must be hidden (and non-interactive) rather than sitting flush
+    // against it.
+    expect(resizeHandle.className).toContain("w-0");
+    expect(resizeHandle.className).toContain("opacity-0");
+    expect(resizeHandle.className).toContain("pointer-events-none");
+    expect(resizeHandle.className).not.toContain("w-px");
+  });
+
+  it("renders an expand-to-fill toggle left of the hide button while the conversation is shown", () => {
+    const onToggleConversationCollapse = vi.fn();
+    renderPanel({
+      renderAsDrawer: false,
+      isConversationCollapsed: false,
+      onToggleConversationCollapse,
+    });
+
+    const toggle = screen.getByRole("button", { name: "Expand panel" });
+    const hideButton = screen.getByRole("button", {
+      name: "Hide secondary panel",
+    });
+    // Expand-to-fill glyph, an explicit aria-expanded disclosure, and the hide
+    // button sits immediately after it in the trailing controls.
+    expect(toggle.querySelector("[data-icon='Maximize2']")).not.toBeNull();
+    expect(toggle.getAttribute("aria-expanded")).toBe("true");
+    expect(
+      Boolean(
+        toggle.compareDocumentPosition(hideButton) &
+          Node.DOCUMENT_POSITION_FOLLOWING,
+      ),
+    ).toBe(true);
+
+    fireEvent.click(toggle);
+    expect(onToggleConversationCollapse).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders the inverse restore toggle while the conversation is collapsed", () => {
+    const onToggleConversationCollapse = vi.fn();
+    renderPanel({
+      renderAsDrawer: false,
+      isConversationCollapsed: true,
+      onToggleConversationCollapse,
+    });
+
+    const toggle = screen.getByRole("button", { name: "Restore conversation" });
+    expect(toggle.querySelector("[data-icon='Minimize2']")).not.toBeNull();
+    expect(toggle.getAttribute("aria-expanded")).toBe("false");
+
+    fireEvent.click(toggle);
+    expect(onToggleConversationCollapse).toHaveBeenCalledTimes(1);
+  });
+
+  it("omits the conversation-collapse toggle in the drawer layout", () => {
+    renderPanel({ renderAsDrawer: true });
+
+    expect(screen.queryByRole("button", { name: "Expand panel" })).toBeNull();
+    expect(
+      screen.queryByRole("button", { name: "Restore conversation" }),
+    ).toBeNull();
+  });
 });
diff --git a/apps/app/src/components/secondary-panel/ThreadSecondaryPanel.tsx b/apps/app/src/components/secondary-panel/ThreadSecondaryPanel.tsx
index 376c4bb0f..9eb8c6a47 100644
--- a/apps/app/src/components/secondary-panel/ThreadSecondaryPanel.tsx
+++ b/apps/app/src/components/secondary-panel/ThreadSecondaryPanel.tsx
@@ -7,11 +7,13 @@ import {
 } from "react";
 import { useAtomValue } from "jotai";
 import { Icon } from "@/components/ui/icon.js";
-import { TabPill } from "@/components/ui/tab-pill";
 import { Panel, PanelResizeHandle } from "react-resizable-panels";
 import { Button } from "@/components/ui/button.js";
 import { cn } from "@/lib/utils";
-import type { WorkspaceFilePreviewStatusLabel } from "@/lib/file-preview";
+import { PANEL_COLLAPSE_TRANSITION_CLASS } from "./panelTransitionTokens";
+import { resolveConversationCollapseControl } from "./panelToggleControlState";
+import { SecondaryPanelTabStrip } from "./SecondaryPanelTabStrip";
+import type { SecondaryPanelFileTab } from "./secondaryPanelFileTab";
 import { type ThreadSecondaryPanel as ThreadSecondaryPanelTab } from "@/lib/thread-secondary-panel";
 import { GIT_DIFF_VIEW_BASE_OPTIONS } from "../git-diff/GitDiffCard";
 import { usePreferredTheme } from "@/hooks/useTheme";
@@ -29,36 +31,29 @@ import {
 } from "./ThreadSecondaryPanelTabContent";
 import {
   getBbDesktopInfo,
+  MACOS_TRAFFIC_LIGHT_RESERVE_CLASS,
   MACOS_WINDOW_DRAG_CLASS,
   MACOS_WINDOW_NO_DRAG_CLASS,
   shouldUseMacosDesktopChrome,
 } from "@/lib/bb-desktop";
+import { IFRAME_POINTER_EVENTS_NONE_CLASS } from "@/lib/iframe-drag-guard";
 export type {
   GitDiffDisplayMode,
   GitDiffSelectionOption,
 } from "./GitDiffToolbar";
+export type { SecondaryPanelFileTab } from "./secondaryPanelFileTab";
 
 const THREAD_SECONDARY_PANEL_MIN_SIZE_PERCENT = 24;
 const THREAD_SECONDARY_PANEL_MAX_SIZE_PERCENT = 70;
-const THREAD_SECONDARY_PANEL_TRANSITION_CLASS =
-  "duration-[220ms] ease-[cubic-bezier(0.32,0.72,0,1)]";
+// While the conversation is collapsed the panel fills the content area, so its
+// size/max are lifted to the full width of the horizontal group.
+const CONVERSATION_COLLAPSED_PANEL_SIZE_PERCENT = 100;
 const PANEL_SCROLL_SLOT_CLASS =
   "min-h-0 flex-1 overflow-x-hidden overflow-y-auto";
 const SECONDARY_RESIZABLE_PANEL_STYLE: CSSProperties = {
   pointerEvents: "auto",
 };
 
-export interface SecondaryPanelFileTab {
-  id: string;
-  filename: string;
-  isActive: boolean;
-  isPinned?: boolean;
-  leadingVisual?: ReactNode;
-  statusLabel: WorkspaceFilePreviewStatusLabel | null;
-  onSelect: () => void;
-  onClose: () => void;
-}
-
 export interface ThreadSecondaryPanelProps {
   activePanel: ThreadSecondaryPanelTab | null;
   canUseGitUi: boolean;
@@ -67,6 +62,19 @@ export interface ThreadSecondaryPanelProps {
   metadataContent: ReactNode;
   fileTabs?: SecondaryPanelFileTab[];
   fileTabContent?: ReactNode;
+  /**
+   * The persistent browser-tab deck. Rendered in the content region and kept
+   * mounted across tab switches so each browser tab's native view (and page)
+   * survives deactivation; it self-manages visibility, collapsing to
+   * `display:none` when no browser tab is active. Absent on the web build / in
+   * tests with no browser tabs.
+   */
+  browserDeck?: ReactNode;
+  /**
+   * Whether the active panel tab is a browser tab. When true the deck fills the
+   * content region and the normal content slot is suppressed.
+   */
+  isBrowserTabActive?: boolean;
   isOpen: boolean;
   showGitDiffTab?: boolean;
   onPanelFocus: () => void;
@@ -77,6 +85,29 @@ export interface ThreadSecondaryPanelProps {
   workspaceRootPath?: string | null;
   onOpenFileInEditor?: (path: string) => void;
   onOpenFilePreview?: (path: string) => void;
+  /**
+   * When true the conversation pane is collapsed: this panel expands to fill
+   * the content area (its max size is lifted). Always false in the
+   * drawer/compact layout.
+   */
+  isConversationCollapsed: boolean;
+  /**
+   * Toggles {@link isConversationCollapsed}. On a wide viewport the panel header
+   * renders the expand/restore-conversation control (immediately left of the
+   * hide-panel button); the collapsed conversation rail surfaces the same
+   * action. Unused in the drawer/compact layout, which cannot collapse the
+   * conversation.
+   */
+  onToggleConversationCollapse: () => void;
+  /**
+   * When true, the panel is the top-left-most surface under the macOS
+   * traffic-light strip (desktop macOS + main sidebar collapsed + conversation
+   * collapsed, so only the 36px rail sits to the panel's left). Adds the full
+   * traffic-light reserve on the top chrome so the leading tabs clear the pinned
+   * sidebar-collapse trigger — which floats over the header and overhangs the
+   * rail — landing them one gap to its right rather than jammed under it.
+   */
+  reserveLeftForDesktopTrafficLights: boolean;
   /**
    * When true, render only the aside content — skip the PanelResizeHandle +
    * Panel wrappers that are only meaningful inside a desktop PanelGroup.
@@ -93,6 +124,8 @@ export function ThreadSecondaryPanel({
   metadataContent,
   fileTabs,
   fileTabContent,
+  browserDeck,
+  isBrowserTabActive = false,
   isOpen,
   showGitDiffTab = true,
   onPanelFocus,
@@ -103,11 +136,22 @@ export function ThreadSecondaryPanel({
   workspaceRootPath,
   onOpenFileInEditor,
   onOpenFilePreview,
+  isConversationCollapsed,
+  onToggleConversationCollapse,
+  reserveLeftForDesktopTrafficLights,
   renderAsDrawer,
 }: ThreadSecondaryPanelProps) {
   const activeFileTab = fileTabs?.find((tab) => tab.isActive);
   const hasActiveFileTab = activeFileTab !== undefined;
   const togglePanelIconName = renderAsDrawer ? "X" : "PanelRight";
+  // The conversation-collapse toggle only exists on a wide viewport; the drawer
+  // layout fills the screen and cannot collapse the conversation.
+  const conversationCollapseControl = renderAsDrawer
+    ? null
+    : resolveConversationCollapseControl({
+        isConversationCollapsed,
+        onToggleConversationCollapse,
+      });
   const {
     gitDiffDisplayMode,
     handleGitDiffDisplayModeChange,
@@ -187,10 +231,10 @@ export function ThreadSecondaryPanel({
       onFocusCapture={handlePanelFocusCapture}
       className={cn(
         "flex h-full min-h-0 min-w-0 flex-1 flex-col overflow-hidden bg-background",
-        isSecondaryPanelResizing && "[&_iframe]:pointer-events-none",
+        isSecondaryPanelResizing && IFRAME_POINTER_EVENTS_NONE_CLASS,
         !renderAsDrawer && [
           "transition-[transform,opacity,background-color]",
-          THREAD_SECONDARY_PANEL_TRANSITION_CLASS,
+          PANEL_COLLAPSE_TRANSITION_CLASS,
           isOpen
             ? "opacity-100"
             : "pointer-events-none translate-x-[8%] opacity-0",
@@ -203,6 +247,8 @@ export function ThreadSecondaryPanel({
           className={cn(
             "flex h-12 min-w-0 items-center justify-between gap-2 px-4",
             usesDesktopChrome && MACOS_WINDOW_DRAG_CLASS,
+            reserveLeftForDesktopTrafficLights &&
+              MACOS_TRAFFIC_LIGHT_RESERVE_CLASS,
           )}
         >
           <div
@@ -243,43 +289,57 @@ export function ThreadSecondaryPanel({
               </Button>
             ) : null}
             {fileTabs && fileTabs.length > 0 ? (
-              <div className="flex min-w-0 items-center gap-1 overflow-x-auto">
-                {fileTabs.map((tab) => (
-                  <div
-                    key={tab.id}
-                    className={cn(
-                      "shrink-0",
-                      usesDesktopChrome && MACOS_WINDOW_NO_DRAG_CLASS,
-                    )}
-                  >
-                    <FileTab tab={tab} />
-                  </div>
-                ))}
-              </div>
+              <SecondaryPanelTabStrip
+                fileTabs={fileTabs}
+                usesDesktopChrome={usesDesktopChrome}
+              />
             ) : null}
             <NewTabButton
               onOpenNewTab={onOpenNewTab}
               usesDesktopChrome={usesDesktopChrome}
             />
           </div>
-          <Button
-            type="button"
-            variant="ghost"
-            size="icon"
-            className={cn(
-              "h-7 w-7 shrink-0 rounded-md p-0",
-              usesDesktopChrome && MACOS_WINDOW_NO_DRAG_CLASS,
-            )}
-            onClick={onClose}
-            aria-label={
-              renderAsDrawer ? "Close secondary panel" : "Hide secondary panel"
-            }
-            title={
-              renderAsDrawer ? "Close secondary panel" : "Hide secondary panel"
-            }
-          >
-            <Icon name={togglePanelIconName} />
-          </Button>
+          <div className="flex shrink-0 items-center gap-1">
+            {conversationCollapseControl ? (
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className={cn(
+                  "h-7 w-7 shrink-0 rounded-md p-0",
+                  usesDesktopChrome && MACOS_WINDOW_NO_DRAG_CLASS,
+                )}
+                onClick={conversationCollapseControl.onClick}
+                aria-label={conversationCollapseControl.label}
+                aria-expanded={conversationCollapseControl.isExpanded}
+                title={conversationCollapseControl.label}
+              >
+                <Icon name={conversationCollapseControl.iconName} />
+              </Button>
+            ) : null}
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              className={cn(
+                "h-7 w-7 shrink-0 rounded-md p-0",
+                usesDesktopChrome && MACOS_WINDOW_NO_DRAG_CLASS,
+              )}
+              onClick={onClose}
+              aria-label={
+                renderAsDrawer
+                  ? "Close secondary panel"
+                  : "Hide secondary panel"
+              }
+              title={
+                renderAsDrawer
+                  ? "Close secondary panel"
+                  : "Hide secondary panel"
+              }
+            >
+              <Icon name={togglePanelIconName} />
+            </Button>
+          </div>
         </div>
         {isDiffPanelActive && !hasActiveFileTab ? (
           <GitDiffToolbar
@@ -298,7 +358,14 @@ export function ThreadSecondaryPanel({
         ) : null}
       </div>
       <div className="flex min-h-0 flex-1 flex-col overflow-hidden bg-background">
-        {hasActiveFileTab ? (
+        {/*
+          The browser deck stays mounted regardless of the active tab so its
+          native views survive switching away; it shows itself only when a
+          browser tab is active. The normal content slot is suppressed in that
+          case (the deck fills the region).
+        */}
+        {browserDeck}
+        {isBrowserTabActive ? null : hasActiveFileTab ? (
           <div className={cn(PANEL_SCROLL_SLOT_CLASS, "pb-3")}>
             {fileTabContent ?? (
               <p className="mx-4 rounded-lg border border-dashed border-border bg-surface-raised px-3 py-6 text-center text-sm text-muted-foreground">
@@ -346,6 +413,7 @@ export function ThreadSecondaryPanel({
     <>
       <SecondaryPanelResizeHandle
         isOpen={isOpen}
+        isConversationCollapsed={isConversationCollapsed}
         onDragging={handleSecondaryPanelDragging}
       />
       <Panel
@@ -353,16 +421,26 @@ export function ThreadSecondaryPanel({
         id="thread-detail-secondary-panel"
         collapsible
         collapsedSize={0}
-        defaultSize={isOpen ? persistedWidthPercent : 0}
+        defaultSize={
+          isOpen
+            ? isConversationCollapsed
+              ? CONVERSATION_COLLAPSED_PANEL_SIZE_PERCENT
+              : persistedWidthPercent
+            : 0
+        }
         minSize={THREAD_SECONDARY_PANEL_MIN_SIZE_PERCENT}
-        maxSize={THREAD_SECONDARY_PANEL_MAX_SIZE_PERCENT}
+        maxSize={
+          isConversationCollapsed
+            ? CONVERSATION_COLLAPSED_PANEL_SIZE_PERCENT
+            : THREAD_SECONDARY_PANEL_MAX_SIZE_PERCENT
+        }
         onCollapse={onCollapse}
         onResize={handleSecondaryPanelResize}
         order={2}
         style={SECONDARY_RESIZABLE_PANEL_STYLE}
         className={cn(
           "min-w-0 overflow-hidden transition-[flex-grow,flex-basis,opacity]",
-          THREAD_SECONDARY_PANEL_TRANSITION_CLASS,
+          PANEL_COLLAPSE_TRANSITION_CLASS,
           isOpen ? "opacity-100" : "opacity-0",
         )}
       >
@@ -396,50 +474,37 @@ function NewTabButton({ onOpenNewTab, usesDesktopChrome }: NewTabButtonProps) {
   );
 }
 
-function FileTab({ tab }: { tab: SecondaryPanelFileTab }) {
-  const title =
-    tab.statusLabel === null
-      ? tab.filename
-      : `${tab.filename} (${tab.statusLabel})`;
-  return (
-    <TabPill
-      label={tab.filename}
-      leadingVisual={tab.leadingVisual}
-      secondaryLabel={tab.statusLabel === null ? null : `(${tab.statusLabel})`}
-      title={title}
-      isActive={tab.isActive}
-      onSelect={tab.onSelect}
-      labelMaxWidthClass="max-w-[160px]"
-      closeAction={
-        tab.isPinned
-          ? null
-          : {
-              onClose: tab.onClose,
-              closeLabel: `Close ${tab.filename}`,
-              closeTooltip: "Close tab",
-            }
-      }
-    />
-  );
+interface SecondaryPanelResizeHandleProps {
+  isOpen: boolean;
+  isConversationCollapsed: boolean;
+  onDragging: (isDragging: boolean) => void;
 }
 
 function SecondaryPanelResizeHandle({
   isOpen,
+  isConversationCollapsed,
   onDragging,
-}: {
-  isOpen: boolean;
-  onDragging: (isDragging: boolean) => void;
-}) {
+}: SecondaryPanelResizeHandleProps) {
   const isResizing = useAtomValue(threadSecondaryPanelResizingAtom);
   return (
     <PanelResizeHandle
       id="thread-detail-secondary-panel-handle"
-      disabled={!isOpen}
+      // Dragging is meaningless while collapsed (the conversation is at zero
+      // width); the collapsed rail's expand chevron is the only affordance in
+      // that state.
+      disabled={!isOpen || isConversationCollapsed}
       onDragging={onDragging}
       className={cn(
-        "group relative shrink-0 cursor-col-resize overflow-visible bg-transparent transition-[width,opacity,background-color] before:absolute before:inset-y-0 before:-left-1.5 before:-right-1.5 before:content-['']",
-        THREAD_SECONDARY_PANEL_TRANSITION_CLASS,
-        isOpen ? "w-px opacity-100" : "pointer-events-none w-0 opacity-0",
+        "group relative shrink-0 overflow-visible bg-transparent transition-[width,opacity,background-color] before:absolute before:inset-y-0 before:-left-1.5 before:-right-1.5 before:content-['']",
+        PANEL_COLLAPSE_TRANSITION_CLASS,
+        isConversationCollapsed ? "cursor-default" : "cursor-col-resize",
+        // While collapsed the handle's hairline would sit flush against the
+        // collapsed rail's recessed edge, doubling the seam. Drag is disabled
+        // in that state anyway, so fold the handle to zero width and hide it;
+        // the rail's recessed background is then the single clean edge.
+        isOpen && !isConversationCollapsed
+          ? "w-px opacity-100"
+          : "pointer-events-none w-0 opacity-0",
         isResizing && "bg-accent/20",
       )}
       aria-label="Resize thread and secondary panels"
diff --git a/apps/app/src/components/secondary-panel/ThreadSecondaryPanelNewTab.stories.tsx b/apps/app/src/components/secondary-panel/ThreadSecondaryPanelNewTab.stories.tsx
index 188d1d623..a237a4237 100644
--- a/apps/app/src/components/secondary-panel/ThreadSecondaryPanelNewTab.stories.tsx
+++ b/apps/app/src/components/secondary-panel/ThreadSecondaryPanelNewTab.stories.tsx
@@ -225,6 +225,9 @@ function NewTabPanelStory() {
         onOpenNewTab={() => setSelection(null)}
         onPanelChange={noop}
         onPanelFocus={noop}
+        isConversationCollapsed={false}
+        onToggleConversationCollapse={noop}
+        reserveLeftForDesktopTrafficLights={false}
         renderAsDrawer
         showGitDiffTab
       />
diff --git a/apps/app/src/components/secondary-panel/browserViewVisibilityCoordinator.test.ts b/apps/app/src/components/secondary-panel/browserViewVisibilityCoordinator.test.ts
new file mode 100644
index 000000000..b5b2af86b
--- /dev/null
+++ b/apps/app/src/components/secondary-panel/browserViewVisibilityCoordinator.test.ts
@@ -0,0 +1,85 @@
+import { describe, expect, it } from "vitest";
+import type { BbDesktopBrowserApi } from "@bb/server-contract";
+import { createNoopDesktopBrowserApi } from "@/test/bb-desktop-test-utils";
+import { createBrowserViewVisibilityCoordinator } from "./browserViewVisibilityCoordinator";
+
+interface VisibilityCall {
+  tabId: string;
+  visible: boolean;
+}
+
+function createRecordingApi(): {
+  api: BbDesktopBrowserApi;
+  visibility: VisibilityCall[];
+} {
+  const visibility: VisibilityCall[] = [];
+  const api: BbDesktopBrowserApi = {
+    ...createNoopDesktopBrowserApi(),
+    setVisible(request) {
+      visibility.push({ tabId: request.tabId, visible: request.visible });
+    },
+  };
+  return { api, visibility };
+}
+
+describe("browserViewVisibilityCoordinator", () => {
+  it("hides the previously-visible view before showing the next one", () => {
+    const { api, visibility } = createRecordingApi();
+    const coordinator = createBrowserViewVisibilityCoordinator(api);
+
+    coordinator.show("a", () => {});
+    coordinator.show("b", () => {});
+
+    expect(visibility).toEqual([
+      { tabId: "a", visible: true },
+      // Switching to b hides a first, then shows b.
+      { tabId: "a", visible: false },
+      { tabId: "b", visible: true },
+    ]);
+  });
+
+  it("syncs bounds before showing", () => {
+    const order: string[] = [];
+    const api: BbDesktopBrowserApi = {
+      ...createNoopDesktopBrowserApi(),
+      setVisible(request) {
+        if (request.visible) {
+          order.push(`show:${request.tabId}`);
+        }
+      },
+    };
+    const coordinator = createBrowserViewVisibilityCoordinator(api);
+
+    coordinator.show("a", () => order.push("bounds:a"));
+
+    expect(order).toEqual(["bounds:a", "show:a"]);
+  });
+
+  it("does not re-hide when re-showing the already-visible tab", () => {
+    const { api, visibility } = createRecordingApi();
+    const coordinator = createBrowserViewVisibilityCoordinator(api);
+
+    coordinator.show("a", () => {});
+    coordinator.show("a", () => {});
+
+    expect(visibility).toEqual([
+      { tabId: "a", visible: true },
+      { tabId: "a", visible: true },
+    ]);
+  });
+
+  it("releases a tab so a later show does not touch the destroyed view", () => {
+    const { api, visibility } = createRecordingApi();
+    const coordinator = createBrowserViewVisibilityCoordinator(api);
+
+    coordinator.show("a", () => {});
+    coordinator.release("a");
+    coordinator.show("b", () => {});
+
+    // No setVisible(a,false) after release — the gone view is never poked.
+    expect(visibility).toEqual([
+      { tabId: "a", visible: true },
+      { tabId: "b", visible: true },
+    ]);
+  });
+});
diff --git a/apps/app/src/components/secondary-panel/browserViewVisibilityCoordinator.ts b/apps/app/src/components/secondary-panel/browserViewVisibilityCoordinator.ts
new file mode 100644
index 000000000..55024f637
--- /dev/null
+++ b/apps/app/src/components/secondary-panel/browserViewVisibilityCoordinator.ts
@@ -0,0 +1,59 @@
+import type { BbDesktopBrowserApi } from "@bb/server-contract";
+
+/**
+ * Owns the "only one browser view is visible at a time" invariant for a panel's
+ * browser-tab deck. A native `WebContentsView` is an OS-level overlay that
+ * `display:none` cannot hide, so when the active tab changes the previously
+ * shown view MUST be hidden before the next one is shown — otherwise two views
+ * briefly overlap.
+ *
+ * Each `BrowserTabContent` only declares intent (`show`/`hide` itself); the
+ * coordinator — owned by the deck — decides ordering. Because `show` always
+ * hides the currently-visible tab first, the hide-before-show guarantee holds
+ * regardless of the order in which the children's effects run (e.g. switching to
+ * an earlier tab in the list still hides the later one first).
+ */
+export interface BrowserViewVisibilityCoordinator {
+  /**
+   * Make `tabId` the single visible view: hide whichever other tab is currently
+   * visible, then sync bounds and show this one (bounds before show so it never
+   * appears at stale/zero bounds).
+   */
+  show(tabId: string, syncBounds: () => void): void;
+  /** Hide `tabId`'s view (no-op overlay-wise if it was already hidden). */
+  hide(tabId: string): void;
+  /**
+   * Forget `tabId` without touching its view — used when the tab unmounts and
+   * its view is about to be destroyed, so a later `show` does not try to hide a
+   * gone view.
+   */
+  release(tabId: string): void;
+}
+
+export function createBrowserViewVisibilityCoordinator(
+  desktopBrowser: BbDesktopBrowserApi,
+): BrowserViewVisibilityCoordinator {
+  // The browser tab whose native view is currently shown, or null when none is.
+  let visibleTabId: string | null = null;
+  return {
+    show(tabId, syncBounds) {
+      if (visibleTabId !== null && visibleTabId !== tabId) {
+        desktopBrowser.setVisible({ tabId: visibleTabId, visible: false });
+      }
+      visibleTabId = tabId;
+      syncBounds();
+      desktopBrowser.setVisible({ tabId, visible: true });
+    },
+    hide(tabId) {
+      if (visibleTabId === tabId) {
+        visibleTabId = null;
+      }
+      desktopBrowser.setVisible({ tabId, visible: false });
+    },
+    release(tabId) {
+      if (visibleTabId === tabId) {
+        visibleTabId = null;
+      }
+    },
+  };
+}
diff --git a/apps/app/src/components/secondary-panel/panelToggleControlState.test.ts b/apps/app/src/components/secondary-panel/panelToggleControlState.test.ts
new file mode 100644
index 000000000..b9d476191
--- /dev/null
+++ b/apps/app/src/components/secondary-panel/panelToggleControlState.test.ts
@@ -0,0 +1,58 @@
+import { describe, expect, it, vi } from "vitest";
+import {
+  resolveConversationCollapseControl,
+  resolveShowPanelControl,
+} from "./panelToggleControlState";
+
+describe("resolveShowPanelControl", () => {
+  it("opens the panel and reads as a closed disclosure", () => {
+    const onToggleSecondaryPanel = vi.fn();
+    const state = resolveShowPanelControl({ onToggleSecondaryPanel });
+
+    expect(state.action).toBe("show-panel");
+    expect(state.label).toBe("Show panel");
+    expect(state.isExpanded).toBe(false);
+    // The recognizable panel icon reads as "open the right side panel".
+    expect(state.iconName).toBe("PanelRight");
+
+    state.onClick();
+    expect(onToggleSecondaryPanel).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe("resolveConversationCollapseControl", () => {
+  it("collapses the conversation when it is shown", () => {
+    const onToggleConversationCollapse = vi.fn();
+    const state = resolveConversationCollapseControl({
+      isConversationCollapsed: false,
+      onToggleConversationCollapse,
+    });
+
+    expect(state.action).toBe("expand-panel");
+    expect(state.label).toBe("Expand panel");
+    // The conversation is currently expanded; clicking collapses it.
+    expect(state.isExpanded).toBe(true);
+    // An expand-to-fill glyph, not a directional chevron.
+    expect(state.iconName).toBe("Maximize2");
+
+    state.onClick();
+    expect(onToggleConversationCollapse).toHaveBeenCalledTimes(1);
+  });
+
+  it("restores the conversation when it is collapsed", () => {
+    const onToggleConversationCollapse = vi.fn();
+    const state = resolveConversationCollapseControl({
+      isConversationCollapsed: true,
+      onToggleConversationCollapse,
+    });
+
+    expect(state.action).toBe("restore-conversation");
+    expect(state.label).toBe("Restore conversation");
+    expect(state.isExpanded).toBe(false);
+    // The inverse minimize glyph restores the conversation.
+    expect(state.iconName).toBe("Minimize2");
+
+    state.onClick();
+    expect(onToggleConversationCollapse).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/apps/app/src/components/secondary-panel/panelToggleControlState.ts b/apps/app/src/components/secondary-panel/panelToggleControlState.ts
new file mode 100644
index 000000000..76603dcc5
--- /dev/null
+++ b/apps/app/src/components/secondary-panel/panelToggleControlState.ts
@@ -0,0 +1,100 @@
+export type PanelToggleAction =
+  | "show-panel"
+  | "expand-panel"
+  | "restore-conversation";
+
+/**
+ * Icon names the toggle can render. A subset of the Icon component's `IconName`
+ * union; validity is enforced where the value flows into `<Icon name={…} />`.
+ */
+export type PanelToggleIconName = "PanelRight" | "Maximize2" | "Minimize2";
+
+interface PanelToggleActionPresentation {
+  label: string;
+  iconName: PanelToggleIconName;
+  /**
+   * `aria-expanded` reflects whether the conversation pane is currently
+   * expanded (shown). The collapse toggle flips it; the "show panel" button is
+   * never an expanded disclosure.
+   */
+  isExpanded: boolean;
+}
+
+/**
+ * The single source of truth for each action's copy, icon, and disclosure
+ * state. Both the conversation-header "show panel" button and the in-panel
+ * collapse toggle resolve their presentation from here, so the two surfaces
+ * stay in lockstep:
+ *
+ *   show-panel           → open the panel. Renders the PanelRight icon so it
+ *                          reads as "open the right side panel" — matching the
+ *                          in-panel hide button. Lives in the conversation
+ *                          header, only while the panel is closed.
+ *   expand-panel         → conversation shown: collapse it so the panel fills
+ *                          the content area. Renders the maximize glyph. Lives
+ *                          in the panel header.
+ *   restore-conversation → conversation collapsed: restore it. Renders the
+ *                          minimize glyph. Lives in the panel header (the
+ *                          collapsed-conversation rail surfaces the same action
+ *                          on its own).
+ */
+const PANEL_TOGGLE_ACTION_PRESENTATION = {
+  "show-panel": { label: "Show panel", iconName: "PanelRight", isExpanded: false },
+  "expand-panel": { label: "Expand panel", iconName: "Maximize2", isExpanded: true },
+  "restore-conversation": {
+    label: "Restore conversation",
+    iconName: "Minimize2",
+    isExpanded: false,
+  },
+} as const satisfies Record<PanelToggleAction, PanelToggleActionPresentation>;
+
+export interface PanelToggleControlState {
+  action: PanelToggleAction;
+  label: string;
+  isExpanded: boolean;
+  iconName: PanelToggleIconName;
+  onClick: () => void;
+}
+
+export interface ResolveShowPanelControlArgs {
+  onToggleSecondaryPanel: () => void;
+}
+
+/**
+ * The conversation header's panel affordance, used only while the secondary
+ * panel is closed: a button that opens it. Once the panel is open the toggle
+ * moves into the panel header (see {@link resolveConversationCollapseControl}).
+ */
+export function resolveShowPanelControl({
+  onToggleSecondaryPanel,
+}: ResolveShowPanelControlArgs): PanelToggleControlState {
+  return {
+    action: "show-panel",
+    ...PANEL_TOGGLE_ACTION_PRESENTATION["show-panel"],
+    onClick: onToggleSecondaryPanel,
+  };
+}
+
+export interface ResolveConversationCollapseControlArgs {
+  isConversationCollapsed: boolean;
+  onToggleConversationCollapse: () => void;
+}
+
+/**
+ * The panel header's collapse toggle. Only ever represents the two panel-open
+ * states — collapse the conversation so the panel fills the view, and restore
+ * it — so it takes just the conversation-collapse handler.
+ */
+export function resolveConversationCollapseControl({
+  isConversationCollapsed,
+  onToggleConversationCollapse,
+}: ResolveConversationCollapseControlArgs): PanelToggleControlState {
+  const action: PanelToggleAction = isConversationCollapsed
+    ? "restore-conversation"
+    : "expand-panel";
+  return {
+    action,
+    ...PANEL_TOGGLE_ACTION_PRESENTATION[action],
+    onClick: onToggleConversationCollapse,
+  };
+}
diff --git a/apps/app/src/components/secondary-panel/panelTransitionTokens.ts b/apps/app/src/components/secondary-panel/panelTransitionTokens.ts
new file mode 100644
index 000000000..291e3bbe7
--- /dev/null
+++ b/apps/app/src/components/secondary-panel/panelTransitionTokens.ts
@@ -0,0 +1,8 @@
+/**
+ * Shared collapse/expand easing for the thread-detail panels that animate
+ * between sizes (the secondary panel, the terminal panel, and the collapsible
+ * conversation/timeline panel). Kept in one place so the duration and easing
+ * stay in lockstep across all of them.
+ */
+export const PANEL_COLLAPSE_TRANSITION_CLASS =
+  "duration-[220ms] ease-[cubic-bezier(0.32,0.72,0,1)]";
diff --git a/apps/app/src/components/secondary-panel/secondaryPanelFileTab.ts b/apps/app/src/components/secondary-panel/secondaryPanelFileTab.ts
new file mode 100644
index 000000000..5c263f935
--- /dev/null
+++ b/apps/app/src/components/secondary-panel/secondaryPanelFileTab.ts
@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+import type { WorkspaceFilePreviewStatusLabel } from "@/lib/file-preview";
+
+/**
+ * A single file/app tab rendered in the secondary panel's scrolling tab strip.
+ */
+export interface SecondaryPanelFileTab {
+  id: string;
+  filename: string;
+  isActive: boolean;
+  isPinned?: boolean;
+  leadingVisual?: ReactNode;
+  statusLabel: WorkspaceFilePreviewStatusLabel | null;
+  onSelect: () => void;
+  onClose: () => void;
+}
diff --git a/apps/app/src/components/secondary-panel/threadRecentItems.test.ts b/apps/app/src/components/secondary-panel/threadRecentItems.test.ts
new file mode 100644
index 000000000..ca415dd2d
--- /dev/null
+++ b/apps/app/src/components/secondary-panel/threadRecentItems.test.ts
@@ -0,0 +1,106 @@
+import { describe, expect, it } from "vitest";
+import {
+  recordRecentItem,
+  resolveRecentFileKind,
+  type ThreadRecentItem,
+} from "./threadRecentItems";
+
+describe("recordRecentItem", () => {
+  it("prepends a newly opened item so the list reads newest-first", () => {
+    const items: ThreadRecentItem[] = [
+      { source: "workspace", path: "src/a.ts", openedAt: 10 },
+    ];
+    const next = recordRecentItem({
+      items,
+      source: "thread-storage",
+      path: "plans/b.md",
+      openedAt: 20,
+    });
+    expect(next).toEqual([
+      { source: "thread-storage", path: "plans/b.md", openedAt: 20 },
+      { source: "workspace", path: "src/a.ts", openedAt: 10 },
+    ]);
+  });
+
+  it("dedupes by source+path, moving the reopened item to the front with a fresh time", () => {
+    const items: ThreadRecentItem[] = [
+      { source: "workspace", path: "src/a.ts", openedAt: 10 },
+      { source: "thread-storage", path: "plans/b.md", openedAt: 20 },
+    ];
+    const next = recordRecentItem({
+      items,
+      source: "workspace",
+      path: "src/a.ts",
+      openedAt: 30,
+    });
+    expect(next).toEqual([
+      { source: "workspace", path: "src/a.ts", openedAt: 30 },
+      { source: "thread-storage", path: "plans/b.md", openedAt: 20 },
+    ]);
+  });
+
+  it("treats the same path under different sources as distinct items", () => {
+    const items: ThreadRecentItem[] = [
+      { source: "workspace", path: "notes.md", openedAt: 10 },
+    ];
+    const next = recordRecentItem({
+      items,
+      source: "thread-storage",
+      path: "notes.md",
+      openedAt: 20,
+    });
+    expect(next).toHaveLength(2);
+  });
+
+  it("caps the list to the limit, dropping the oldest", () => {
+    const items: ThreadRecentItem[] = [
+      { source: "workspace", path: "a", openedAt: 3 },
+      { source: "workspace", path: "b", openedAt: 2 },
+      { source: "workspace", path: "c", openedAt: 1 },
+    ];
+    const next = recordRecentItem({
+      items,
+      source: "workspace",
+      path: "d",
+      openedAt: 4,
+      limit: 3,
+    });
+    expect(next.map((item) => item.path)).toEqual(["d", "a", "b"]);
+  });
+});
+
+describe("resolveRecentFileKind", () => {
+  it("labels markdown plans and html mockups under plans/", () => {
+    expect(resolveRecentFileKind("plans/swap-model.md")).toEqual({
+      chip: "md",
+      label: "Plan",
+    });
+    expect(resolveRecentFileKind("plans/sidebar-mockup.html")).toEqual({
+      chip: "html",
+      label: "Mockup",
+    });
+  });
+
+  it("reads anything under reports/ as a Report regardless of extension", () => {
+    expect(resolveRecentFileKind("reports/architecture.md")).toEqual({
+      chip: "report",
+      label: "Report",
+    });
+    expect(resolveRecentFileKind("reports/desktop-size.html")).toEqual({
+      chip: "report",
+      label: "Report",
+    });
+  });
+
+  it("treats source files as code and bare markdown as a doc", () => {
+    expect(
+      resolveRecentFileKind(
+        "apps/app/src/components/secondary-panel/NewTabFileSearch.tsx",
+      ),
+    ).toEqual({ chip: "code", label: "Source" });
+    expect(resolveRecentFileKind("README.md")).toEqual({
+      chip: "md",
+      label: "Doc",
+    });
+  });
+});
diff --git a/apps/app/src/components/secondary-panel/threadRecentItems.ts b/apps/app/src/components/secondary-panel/threadRecentItems.ts
new file mode 100644
index 000000000..aff231663
--- /dev/null
+++ b/apps/app/src/components/secondary-panel/threadRecentItems.ts
@@ -0,0 +1,200 @@
+import { useCallback } from "react";
+import { atom, useAtomValue, useSetAtom } from "jotai";
+import { atomWithStorage } from "jotai/utils";
+import { atomFamily } from "jotai-family";
+import { z } from "zod";
+import { createLocalStorageSyncStorage } from "@/lib/browser-storage";
+
+export const THREAD_RECENT_ITEMS_STORAGE_PREFIX = "bb.thread.recentItems";
+export const THREAD_RECENT_ITEMS_STORAGE_VERSION = 1;
+/** How many recent items we persist per thread before dropping the oldest. */
+export const THREAD_RECENT_ITEMS_MAX_STORED = 24;
+/** How many recent rows the launcher shows before the "Show more" toggle. */
+export const THREAD_RECENT_ITEMS_VISIBLE_LIMIT = 6;
+
+/**
+ * The panel sources a recent item can be reopened from. This is the subset of
+ * {@link import("./useThreadFileTabs").FileSearchSelection} sources that map to
+ * a previewable file path, so a recent row reopens through the exact same
+ * open-in-panel path as a file-search result.
+ */
+export type RecentItemSource = "workspace" | "thread-storage";
+
+/** The visual file-type chip a recent item renders with. */
+export type RecentFileChip = "md" | "html" | "report" | "code";
+
+export interface ThreadRecentItem {
+  source: RecentItemSource;
+  path: string;
+  openedAt: number;
+}
+
+export interface ResolvedRecentFileKind {
+  chip: RecentFileChip;
+  label: string;
+}
+
+interface RecordRecentItemArgs {
+  items: readonly ThreadRecentItem[];
+  source: RecentItemSource;
+  path: string;
+  openedAt: number;
+  limit?: number;
+}
+
+interface RecordThreadRecentItemArgs {
+  source: RecentItemSource;
+  path: string;
+}
+
+interface ThreadRecentItemsStorageKeyArgs {
+  threadId: string;
+}
+
+const recentItemSchema = z
+  .object({
+    source: z.enum(["workspace", "thread-storage"]),
+    path: z.string().min(1),
+    openedAt: z.number().int().nonnegative(),
+  })
+  .strict();
+
+const recentItemsSchema = z.array(recentItemSchema);
+
+const EMPTY_RECENT_ITEMS: readonly ThreadRecentItem[] = [];
+
+/**
+ * Prepends an opened file to the recency list: it dedupes by source+path so
+ * reopening a file moves it to the front (with a fresh timestamp) rather than
+ * duplicating it, then caps the list so storage cannot grow unbounded.
+ */
+export function recordRecentItem({
+  items,
+  source,
+  path,
+  openedAt,
+  limit = THREAD_RECENT_ITEMS_MAX_STORED,
+}: RecordRecentItemArgs): ThreadRecentItem[] {
+  const withoutExisting = items.filter(
+    (item) => item.source !== source || item.path !== path,
+  );
+  return [{ source, path, openedAt }, ...withoutExisting].slice(0, limit);
+}
+
+export function getRecentItemName(path: string): string {
+  return path.slice(path.lastIndexOf("/") + 1) || path;
+}
+
+function getFileExtension(path: string): string {
+  const name = getRecentItemName(path);
+  const dotIndex = name.lastIndexOf(".");
+  return dotIndex <= 0 ? "" : name.slice(dotIndex + 1).toLowerCase();
+}
+
+function hasPathDirectorySegment(path: string, segment: string): boolean {
+  return path
+    .toLowerCase()
+    .split("/")
+    .slice(0, -1)
+    .includes(segment);
+}
+
+/**
+ * Resolves a recent file's chip + label from its path. The chip follows the
+ * artifact's kind rather than its bare extension: anything under `reports/`
+ * reads as a Report (chart) whether it is `.md` or `.html`, plans render as
+ * Plan/Mockup, and everything else falls back to Source code.
+ */
+export function resolveRecentFileKind(path: string): ResolvedRecentFileKind {
+  const extension = getFileExtension(path);
+  const inReports = hasPathDirectorySegment(path, "reports");
+  const inPlans = hasPathDirectorySegment(path, "plans");
+  const isMarkdown = extension === "md" || extension === "markdown";
+  const isHtml = extension === "html" || extension === "htm";
+
+  if (inReports && (isMarkdown || isHtml)) {
+    return { chip: "report", label: "Report" };
+  }
+  if (isMarkdown) {
+    return { chip: "md", label: inPlans ? "Plan" : "Doc" };
+  }
+  if (isHtml) {
+    return { chip: "html", label: inPlans ? "Mockup" : "Preview" };
+  }
+  return { chip: "code", label: "Source" };
+}
+
+const recentItemsStorage = createLocalStorageSyncStorage<
+  readonly ThreadRecentItem[]
+>({
+  parse: (storedValue, initialValue) => {
+    if (storedValue === null) {
+      return initialValue;
+    }
+    let parsedValue: unknown;
+    try {
+      parsedValue = JSON.parse(storedValue);
+    } catch {
+      return initialValue;
+    }
+    const result = recentItemsSchema.safeParse(parsedValue);
+    if (!result.success) {
+      return initialValue;
+    }
+    return result.data.slice(0, THREAD_RECENT_ITEMS_MAX_STORED);
+  },
+  serialize: (value) => JSON.stringify(value),
+});
+
+export function getThreadRecentItemsStorageKey({
+  threadId,
+}: ThreadRecentItemsStorageKeyArgs): string {
+  return `${THREAD_RECENT_ITEMS_STORAGE_PREFIX}-${encodeURIComponent(
+    threadId,
+  )}-${THREAD_RECENT_ITEMS_STORAGE_VERSION}`;
+}
+
+const disabledThreadRecentItemsAtom =
+  atom<readonly ThreadRecentItem[]>(EMPTY_RECENT_ITEMS);
+
+const threadRecentItemsAtomFamily = atomFamily((threadId: string) =>
+  atomWithStorage<readonly ThreadRecentItem[]>(
+    getThreadRecentItemsStorageKey({ threadId }),
+    EMPTY_RECENT_ITEMS,
+    recentItemsStorage,
+    { getOnInit: true },
+  ),
+);
+
+function hasThreadId(threadId: string | null | undefined): threadId is string {
+  return threadId !== null && threadId !== undefined && threadId.length > 0;
+}
+
+function getThreadRecentItemsAtom(threadId: string | null | undefined) {
+  return hasThreadId(threadId)
+    ? threadRecentItemsAtomFamily(threadId)
+    : disabledThreadRecentItemsAtom;
+}
+
+export function useThreadRecentItems(
+  threadId: string | null | undefined,
+): readonly ThreadRecentItem[] {
+  return useAtomValue(getThreadRecentItemsAtom(threadId));
+}
+
+export function useRecordThreadRecentItem(
+  threadId: string | null | undefined,
+): (args: RecordThreadRecentItemArgs) => void {
+  const setRecentItems = useSetAtom(getThreadRecentItemsAtom(threadId));
+  return useCallback(
+    ({ source, path }: RecordThreadRecentItemArgs) => {
+      if (!hasThreadId(threadId)) {
+        return;
+      }
+      setRecentItems((items) =>
+        recordRecentItem({ items, source, path, openedAt: Date.now() }),
+      );
+    },
+    [setRecentItems, threadId],
+  );
+}
diff --git a/apps/app/src/components/secondary-panel/threadSecondaryPanelAtoms.test.ts b/apps/app/src/components/secondary-panel/threadSecondaryPanelAtoms.test.ts
new file mode 100644
index 000000000..e643fafe7
--- /dev/null
+++ b/apps/app/src/components/secondary-panel/threadSecondaryPanelAtoms.test.ts
@@ -0,0 +1,96 @@
+// @vitest-environment jsdom
+
+import { createStore } from "jotai";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  getThreadConversationCollapsedAtom,
+  getThreadConversationCollapsedStorageKey,
+} from "./threadSecondaryPanelAtoms";
+
+const THREAD_A = "thr_a";
+const THREAD_B = "thr_b";
+
+afterEach(() => {
+  window.localStorage.clear();
+  vi.resetModules();
+});
+
+describe("getThreadConversationCollapsedAtom", () => {
+  it("defaults to collapsed=false and persists toggles to a per-thread key", () => {
+    const store = createStore();
+    const atomA = getThreadConversationCollapsedAtom(THREAD_A);
+    expect(store.get(atomA)).toBe(false);
+
+    store.set(atomA, true);
+    expect(store.get(atomA)).toBe(true);
+    expect(
+      window.localStorage.getItem(
+        getThreadConversationCollapsedStorageKey({ threadId: THREAD_A }),
+      ),
+    ).toBe("true");
+
+    store.set(atomA, false);
+    expect(store.get(atomA)).toBe(false);
+    expect(
+      window.localStorage.getItem(
+        getThreadConversationCollapsedStorageKey({ threadId: THREAD_A }),
+      ),
+    ).toBe("false");
+  });
+
+  it("keeps each thread's collapse state isolated", () => {
+    const store = createStore();
+    const atomA = getThreadConversationCollapsedAtom(THREAD_A);
+    const atomB = getThreadConversationCollapsedAtom(THREAD_B);
+
+    store.set(atomA, true);
+
+    // Collapsing thread A must not collapse thread B, and B's storage key
+    // stays untouched.
+    expect(store.get(atomA)).toBe(true);
+    expect(store.get(atomB)).toBe(false);
+    expect(
+      window.localStorage.getItem(
+        getThreadConversationCollapsedStorageKey({ threadId: THREAD_B }),
+      ),
+    ).toBeNull();
+
+    // Clearing B is likewise a no-op for A.
+    store.set(atomB, false);
+    expect(store.get(atomA)).toBe(true);
+  });
+
+  it("returns a stable atom reference per thread id", () => {
+    expect(getThreadConversationCollapsedAtom(THREAD_A)).toBe(
+      getThreadConversationCollapsedAtom(THREAD_A),
+    );
+    expect(getThreadConversationCollapsedAtom(THREAD_A)).not.toBe(
+      getThreadConversationCollapsedAtom(THREAD_B),
+    );
+  });
+
+  it("falls back to a non-persisted disabled atom without a thread id", () => {
+    const store = createStore();
+    const disabled = getThreadConversationCollapsedAtom(undefined);
+    expect(getThreadConversationCollapsedAtom(null)).toBe(disabled);
+    expect(store.get(disabled)).toBe(false);
+
+    store.set(disabled, true);
+    expect(window.localStorage.length).toBe(0);
+  });
+
+  it("hydrates a thread's persisted preference when its atom initializes", async () => {
+    // The atom reads storage when it is created (page load), so re-import the
+    // module after seeding localStorage to exercise the parse path.
+    const { getThreadConversationCollapsedStorageKey: seedKey } = await import(
+      "./threadSecondaryPanelAtoms"
+    );
+    window.localStorage.setItem(seedKey({ threadId: THREAD_A }), "true");
+    vi.resetModules();
+    const { getThreadConversationCollapsedAtom: hydratedGetter } = await import(
+      "./threadSecondaryPanelAtoms"
+    );
+
+    expect(createStore().get(hydratedGetter(THREAD_A))).toBe(true);
+  });
+});
diff --git a/apps/app/src/components/secondary-panel/threadSecondaryPanelAtoms.ts b/apps/app/src/components/secondary-panel/threadSecondaryPanelAtoms.ts
index 9b8e2fb88..56125159e 100644
--- a/apps/app/src/components/secondary-panel/threadSecondaryPanelAtoms.ts
+++ b/apps/app/src/components/secondary-panel/threadSecondaryPanelAtoms.ts
@@ -1,5 +1,6 @@
 import { atom } from "jotai";
 import { atomWithStorage } from "jotai/utils";
+import { atomFamily } from "jotai-family";
 import { createLocalStorageSyncStorage } from "@/lib/browser-storage";
 
 export const threadSecondaryPanelResizingAtom = atom(false);
@@ -27,6 +28,70 @@ export const secondaryPanelWidthPercentAtom = atomWithStorage<number>(
   { getOnInit: true },
 );
 
+/**
+ * Whether a given thread's conversation/timeline pane is collapsed so the
+ * secondary panel fills the whole content area. Keyed per thread (like the
+ * terminal panel and recent-items state) so collapsing one thread's
+ * conversation — e.g. opening an app full-screen from the sidebar — never
+ * leaks into another thread or gets cleared by selecting an unrelated row.
+ * Persisted per thread; only takes effect while the secondary panel is open on
+ * a wide viewport — see ThreadDetailSecondaryContent for the gating.
+ */
+const THREAD_CONVERSATION_COLLAPSED_STORAGE_PREFIX =
+  "bb.thread.conversation.collapsed";
+
+interface ThreadConversationCollapsedStorageKeyArgs {
+  threadId: string;
+}
+
+export function getThreadConversationCollapsedStorageKey({
+  threadId,
+}: ThreadConversationCollapsedStorageKeyArgs): string {
+  return `${THREAD_CONVERSATION_COLLAPSED_STORAGE_PREFIX}-${encodeURIComponent(
+    threadId,
+  )}`;
+}
+
+const conversationCollapsedStorage = createLocalStorageSyncStorage<boolean>({
+  parse: (storedValue, initialValue) => {
+    if (storedValue === "true") return true;
+    if (storedValue === "false") return false;
+    return initialValue;
+  },
+  serialize: (value) => String(value),
+});
+
+const threadConversationCollapsedAtomFamily = atomFamily((threadId: string) =>
+  atomWithStorage<boolean>(
+    getThreadConversationCollapsedStorageKey({ threadId }),
+    false,
+    conversationCollapsedStorage,
+    { getOnInit: true },
+  ),
+);
+
+// Fallback for callers without a resolved thread id (e.g. before routing
+// settles). It stays false and any write lands on this throwaway atom, so no
+// real thread's collapse state is affected.
+const disabledThreadConversationCollapsedAtom = atom(false);
+
+function hasThreadId(threadId: string | null | undefined): threadId is string {
+  return threadId !== null && threadId !== undefined && threadId.length > 0;
+}
+
+/**
+ * The conversation-collapsed atom for a specific thread. `atomFamily` memoizes
+ * by threadId, so repeated calls with the same id return a stable atom
+ * reference safe to pass straight to `useAtom`/`useSetAtom`/`useAtomValue`.
+ */
+export function getThreadConversationCollapsedAtom(
+  threadId: string | null | undefined,
+) {
+  return hasThreadId(threadId)
+    ? threadConversationCollapsedAtomFamily(threadId)
+    : disabledThreadConversationCollapsedAtom;
+}
+
 /** Collapsed file keys in the diff panel. Set by useGitDiffFileRenderQueue, read by ThreadSecondaryPanel. */
 export const gitDiffCollapsedFileKeysAtom = atom<ReadonlySet<string>>(
   new Set<string>(),
diff --git a/apps/app/src/components/secondary-panel/useThreadFileTabs.test.tsx b/apps/app/src/components/secondary-panel/useThreadFileTabs.test.tsx
index c25947537..4e95d2507 100644
--- a/apps/app/src/components/secondary-panel/useThreadFileTabs.test.tsx
+++ b/apps/app/src/components/secondary-panel/useThreadFileTabs.test.tsx
@@ -27,6 +27,7 @@ import {
 } from "@/lib/fixed-panel-tabs-state";
 import { useFixedPanelTabsState } from "@/lib/fixed-panel-tabs";
 import { STATUS_APP_ID, useThreadFileTabs } from "./useThreadFileTabs";
+import { useThreadRecentItems } from "./threadRecentItems";
 
 const NOW = 1_700_000_000_000;
 const WORKING_TREE_SOURCE: EnvironmentFilePreviewSource = {
@@ -84,9 +85,11 @@ function renderThreadFileTabsHook(initialProps: HookProps) {
     (props: HookProps) => {
       const fileTabs = useThreadFileTabs(props);
       const fixedPanelTabsState = useFixedPanelTabsState(props.threadId);
+      const recentItems = useThreadRecentItems(props.threadId);
       return {
         ...fileTabs,
         fixedPanelTabsState,
+        recentItems,
       };
     },
     {
@@ -243,6 +246,53 @@ afterEach(() => {
 });
 
 describe("useThreadFileTabs", () => {
+  it("records opened working-tree and storage files as thread recents", () => {
+    const { result } = renderThreadFileTabsHook({
+      environmentId: "env-recent",
+      threadType: "manager",
+      storageFiles: [],
+      threadId: "thr-recent-record",
+    });
+
+    act(() => {
+      result.current.openWorkspaceFile(
+        buildWorkspaceFileTab({ lineNumber: null, path: "src/app.ts" }),
+      );
+    });
+    act(() => {
+      result.current.openStorageFile("plans/swap-model.md");
+    });
+
+    // Newest-first, deduped, tagged by panel source.
+    expect(
+      result.current.recentItems.map(({ source, path }) => ({ source, path })),
+    ).toEqual([
+      { source: "thread-storage", path: "plans/swap-model.md" },
+      { source: "workspace", path: "src/app.ts" },
+    ]);
+  });
+
+  it("does not record diff-only (non-working-tree) workspace previews as recents", () => {
+    const { result } = renderThreadFileTabsHook({
+      environmentId: "env-recent",
+      threadType: "standard",
+      storageFiles: undefined,
+      threadId: "thr-recent-diff",
+    });
+
+    act(() => {
+      result.current.openWorkspaceFile(
+        buildWorkspaceFileTab({
+          lineNumber: null,
+          path: "src/diff.ts",
+          source: MERGE_BASE_SOURCE,
+        }),
+      );
+    });
+
+    expect(result.current.recentItems).toEqual([]);
+  });
+
   it("persists workspace tabs for the current thread", () => {
     const { result } = renderThreadFileTabsHook({
       environmentId: "env-one",
@@ -897,3 +947,111 @@ describe("useThreadFileTabs", () => {
     expect(getStoredStoragePaths(readStoredState(threadId))).toEqual([]);
   });
 });
+
+describe("useThreadFileTabs — browser tabs", () => {
+  it("opens a browser tab via openBrowserTab and persists it (not transient)", () => {
+    const { result } = renderThreadFileTabsHook({
+      environmentId: "env-one",
+      threadType: "standard",
+      storageFiles: undefined,
+      threadId: "thr-browser-open",
+    });
+
+    act(() => {
+      result.current.openBrowserTab();
+    });
+
+    const tab = result.current.activeBrowserTab;
+    expect(tab).not.toBeNull();
+    expect(tab?.kind).toBe("browser");
+    expect(tab?.url).toBe("");
+
+    const browserTabs = readStoredState(
+      "thr-browser-open",
+    ).secondary.tabs.filter((entry) => entry.kind === "browser");
+    expect(browserTabs).toHaveLength(1);
+  });
+
+  it("opens a browser tab at a given URL (popup path)", () => {
+    const { result } = renderThreadFileTabsHook({
+      environmentId: "env-one",
+      threadType: "standard",
+      storageFiles: undefined,
+      threadId: "thr-browser-url",
+    });
+
+    act(() => {
+      result.current.openBrowserTab("https://example.com");
+    });
+
+    expect(result.current.activeBrowserTab?.url).toBe("https://example.com");
+  });
+
+  it("persists url/title/favicon pushed from the view via updateBrowserTab", () => {
+    const { result } = renderThreadFileTabsHook({
+      environmentId: "env-one",
+      threadType: "standard",
+      storageFiles: undefined,
+      threadId: "thr-browser-update",
+    });
+
+    act(() => {
+      result.current.openBrowserTab();
+    });
+    const opened = result.current.activeBrowserTab;
+    if (opened === null) {
+      throw new Error("expected an active browser tab");
+    }
+
+    act(() => {
+      result.current.updateBrowserTab({
+        tabId: opened.id,
+        url: "https://example.com",
+        title: "Example",
+      });
+    });
+
+    expect(result.current.activeBrowserTab?.title).toBe("Example");
+    const persisted = readStoredState(
+      "thr-browser-update",
+    ).secondary.tabs.find((entry) => entry.kind === "browser");
+    expect(persisted?.kind === "browser" ? persisted.url : null).toBe(
+      "https://example.com",
+    );
+    expect(persisted?.kind === "browser" ? persisted.title : null).toBe(
+      "Example",
+    );
+  });
+
+  it("supports multiple independent browser tabs and closes by id", () => {
+    const { result } = renderThreadFileTabsHook({
+      environmentId: "env-one",
+      threadType: "standard",
+      storageFiles: undefined,
+      threadId: "thr-browser-multi",
+    });
+
+    act(() => {
+      result.current.openBrowserTab("https://a.example");
+    });
+    const first = result.current.activeBrowserTab;
+    act(() => {
+      result.current.openBrowserTab("https://b.example");
+    });
+    const second = result.current.activeBrowserTab;
+    if (first === null || second === null) {
+      throw new Error("expected two browser tabs");
+    }
+    expect(first.id).not.toBe(second.id);
+
+    act(() => {
+      result.current.closeBrowserTab(second.id);
+    });
+
+    const ids = readStoredState("thr-browser-multi")
+      .secondary.tabs.filter((entry) => entry.kind === "browser")
+      .map((entry) => entry.id);
+    expect(ids).toContain(first.id);
+    expect(ids).not.toContain(second.id);
+  });
+});
diff --git a/apps/app/src/components/secondary-panel/useThreadFileTabs.ts b/apps/app/src/components/secondary-panel/useThreadFileTabs.ts
index ecc890f55..c41dbe9c8 100644
--- a/apps/app/src/components/secondary-panel/useThreadFileTabs.ts
+++ b/apps/app/src/components/secondary-panel/useThreadFileTabs.ts
@@ -7,11 +7,13 @@ import {
 import {
   areFixedPanelTabsEquivalent,
   createAppFixedPanelTab,
+  createBrowserFixedPanelTab,
   createHostFilePreviewFixedPanelTab,
   createNewTabFixedPanelTab,
   createThreadStorageFilePreviewFixedPanelTab,
   createWorkspaceFilePreviewFixedPanelTab,
   type AppFixedPanelTab,
+  type BrowserFixedPanelTab,
   type FixedPanelTab,
   type FixedPanelTabsState,
   type HostFilePreviewFixedPanelTab,
@@ -25,6 +27,7 @@ import {
   type HostFileTabState,
   type WorkspaceFileTabState,
 } from "@/lib/file-preview";
+import { useRecordThreadRecentItem } from "./threadRecentItems";
 
 export const STATUS_APP_ID = "status";
 
@@ -72,6 +75,12 @@ export type FileSearchSelection =
   | FileSearchThreadStorageSelection
   | FileSearchAppSelection;
 
+export interface UpdateBrowserTabArgs {
+  tabId: string;
+  url: string;
+  title: string | null;
+}
+
 function isWorkspaceFilePreviewTab(
   tab: FixedPanelTab,
 ): tab is WorkspaceFilePreviewFixedPanelTab {
@@ -94,6 +103,10 @@ function isAppTab(tab: FixedPanelTab): tab is AppFixedPanelTab {
   return tab.kind === "app";
 }
 
+function isBrowserTab(tab: FixedPanelTab): tab is BrowserFixedPanelTab {
+  return tab.kind === "browser";
+}
+
 function isNewTab(tab: FixedPanelTab): tab is NewTabFixedPanelTab {
   return tab.kind === "new-tab";
 }
@@ -261,6 +274,18 @@ function findAppTab(
   return null;
 }
 
+function findBrowserTab(
+  tabs: readonly FixedPanelTab[],
+  tabId: string,
+): BrowserFixedPanelTab | null {
+  for (const tab of tabs) {
+    if (isBrowserTab(tab) && tab.id === tabId) {
+      return tab;
+    }
+  }
+  return null;
+}
+
 function findNewTab(
   tabs: readonly FixedPanelTab[],
 ): NewTabFixedPanelTab | null {
@@ -347,6 +372,7 @@ function buildOrderedSecondaryFileTabs({
         break;
       case "host-file-preview":
       case "app":
+      case "browser":
       case "new-tab":
         displayable.push(tab);
         break;
@@ -367,6 +393,41 @@ function buildOrderedSecondaryFileTabs({
   ];
 }
 
+/**
+ * Opens (or re-activates) an app tab in a thread's secondary panel and reveals
+ * the panel. Keyed by `threadId`, so callers outside the active thread detail
+ * view — e.g. the sidebar app-icon cluster — can drive the same panel state the
+ * detail view reads. This is the canonical open-app-tab path; `useThreadFileTabs`
+ * exposes it as `openApp`.
+ */
+export function useOpenThreadAppTab(
+  threadId: string | null | undefined,
+): (appId: string) => void {
+  const updateFixedPanelTabsState = useUpdateFixedPanelTabsState(threadId);
+  return useCallback(
+    (appId: string) => {
+      const nextTab = createAppTab(appId);
+      updateFixedPanelTabsState((state) => {
+        const tabs = upsertSecondaryTab(state.secondary.tabs, nextTab);
+        if (
+          tabs === state.secondary.tabs &&
+          state.secondary.activeTabId === nextTab.id &&
+          state.secondary.isOpen
+        ) {
+          return state;
+        }
+        return setSecondaryTabs({
+          activeTabId: nextTab.id,
+          isOpen: true,
+          state,
+          tabs,
+        });
+      });
+    },
+    [updateFixedPanelTabsState],
+  );
+}
+
 export function useThreadFileTabs({
   apps,
   threadId,
@@ -376,6 +437,7 @@ export function useThreadFileTabs({
 }: UseThreadFileTabsParams) {
   const fixedPanelTabsState = useFixedPanelTabsState(threadId);
   const updateFixedPanelTabsState = useUpdateFixedPanelTabsState(threadId);
+  const recordRecentItem = useRecordThreadRecentItem(threadId);
   const isThreadResolved = threadType !== undefined;
   const isManagerThread = threadType === "manager";
   const resolvedEnvironmentId = isThreadResolved
@@ -500,6 +562,12 @@ export function useThreadFileTabs({
   const openWorkspaceFile = useCallback(
     ({ lineNumber, path, source, statusLabel }: WorkspaceFileTabState) => {
       if (resolvedEnvironmentId === undefined) return;
+      // Only working-tree opens are recorded as recent: a recent row reopens the
+      // live file, so diff-only previews (head/merge-base) would reopen to the
+      // wrong content.
+      if (source.kind === "working-tree") {
+        recordRecentItem({ source: "workspace", path });
+      }
       const nextTab = createWorkspaceFilePreviewFixedPanelTab({
         environmentId: resolvedEnvironmentId,
         tab: {
@@ -531,7 +599,7 @@ export function useThreadFileTabs({
         });
       });
     },
-    [resolvedEnvironmentId, updateFixedPanelTabsState],
+    [recordRecentItem, resolvedEnvironmentId, updateFixedPanelTabsState],
   );
 
   const closeWorkspaceFileTab = useCallback(
@@ -580,6 +648,7 @@ export function useThreadFileTabs({
   const openStorageFile = useCallback(
     (path: string) => {
       if (!isManagerThread) return;
+      recordRecentItem({ source: "thread-storage", path });
       const nextTab = createStorageTab(path);
       updateFixedPanelTabsState((state) => {
         const tabs = upsertSecondaryTab(state.secondary.tabs, nextTab);
@@ -598,7 +667,7 @@ export function useThreadFileTabs({
         });
       });
     },
-    [isManagerThread, updateFixedPanelTabsState],
+    [isManagerThread, recordRecentItem, updateFixedPanelTabsState],
   );
 
   const openHostFile = useCallback(
@@ -673,21 +742,23 @@ export function useThreadFileTabs({
     [updateFixedPanelTabsState],
   );
 
-  const openApp = useCallback(
+  const openApp = useOpenThreadAppTab(threadId);
+
+  const closeAppTab = useCallback(
     (appId: string) => {
-      const nextTab = createAppTab(appId);
+      if (appId === STATUS_APP_ID) return;
       updateFixedPanelTabsState((state) => {
-        const tabs = upsertSecondaryTab(state.secondary.tabs, nextTab);
-        if (
-          tabs === state.secondary.tabs &&
-          state.secondary.activeTabId === nextTab.id &&
-          state.secondary.isOpen
-        ) {
+        const tab = findAppTab(state.secondary.tabs, appId);
+        if (!tab) {
           return state;
         }
+        const tabs = removeSecondaryTab(state.secondary.tabs, tab.id);
         return setSecondaryTabs({
-          activeTabId: nextTab.id,
-          isOpen: true,
+          activeTabId:
+            state.secondary.activeTabId === tab.id
+              ? null
+              : state.secondary.activeTabId,
+          isOpen: state.secondary.isOpen,
           state,
           tabs,
         });
@@ -696,14 +767,67 @@ export function useThreadFileTabs({
     [updateFixedPanelTabsState],
   );
 
-  const closeAppTab = useCallback(
+  const activateAppTab = useCallback(
     (appId: string) => {
-      if (appId === STATUS_APP_ID) return;
       updateFixedPanelTabsState((state) => {
         const tab = findAppTab(state.secondary.tabs, appId);
         if (!tab) {
           return state;
         }
+        if (state.secondary.activeTabId === tab.id && state.secondary.isOpen) {
+          return state;
+        }
+        return setSecondaryTabs({
+          activeTabId: tab.id,
+          isOpen: true,
+          state,
+          tabs: state.secondary.tabs,
+        });
+      });
+    },
+    [updateFixedPanelTabsState],
+  );
+
+  // Opening a browser tab swaps the transient new-tab in place (like selecting
+  // an app); if there is no new-tab — e.g. a popup opened from another browser
+  // tab — `replaceNewTab` appends it instead. `url` is empty for the new-tab
+  // screen and set for popups.
+  const openBrowserTab = useCallback(
+    (url?: string) => {
+      const nextTab = createBrowserFixedPanelTab({ url: url ?? "" });
+      updateFixedPanelTabsState((state) => replaceNewTab({ nextTab, state }));
+    },
+    [updateFixedPanelTabsState],
+  );
+
+  const activateBrowserTab = useCallback(
+    (tabId: string) => {
+      updateFixedPanelTabsState((state) => {
+        const tab = findBrowserTab(state.secondary.tabs, tabId);
+        if (!tab) {
+          return state;
+        }
+        if (state.secondary.activeTabId === tab.id && state.secondary.isOpen) {
+          return state;
+        }
+        return setSecondaryTabs({
+          activeTabId: tab.id,
+          isOpen: true,
+          state,
+          tabs: state.secondary.tabs,
+        });
+      });
+    },
+    [updateFixedPanelTabsState],
+  );
+
+  const closeBrowserTab = useCallback(
+    (tabId: string) => {
+      updateFixedPanelTabsState((state) => {
+        const tab = findBrowserTab(state.secondary.tabs, tabId);
+        if (!tab) {
+          return state;
+        }
         const tabs = removeSecondaryTab(state.secondary.tabs, tab.id);
         return setSecondaryTabs({
           activeTabId:
@@ -719,21 +843,30 @@ export function useThreadFileTabs({
     [updateFixedPanelTabsState],
   );
 
-  const activateAppTab = useCallback(
-    (appId: string) => {
+  // Persist the URL/title/favicon pushed from the live view so the tab pill and
+  // restore-on-reload stay current. `upsertSecondaryTab`'s equivalence check
+  // makes an unchanged update a no-op (no re-render / re-write).
+  const updateBrowserTab = useCallback(
+    ({ tabId, url, title }: UpdateBrowserTabArgs) => {
       updateFixedPanelTabsState((state) => {
-        const tab = findAppTab(state.secondary.tabs, appId);
+        const tab = findBrowserTab(state.secondary.tabs, tabId);
         if (!tab) {
           return state;
         }
-        if (state.secondary.activeTabId === tab.id && state.secondary.isOpen) {
+        const nextTab: BrowserFixedPanelTab = {
+          ...tab,
+          title,
+          url,
+        };
+        const tabs = upsertSecondaryTab(state.secondary.tabs, nextTab);
+        if (tabs === state.secondary.tabs) {
           return state;
         }
         return setSecondaryTabs({
-          activeTabId: tab.id,
-          isOpen: true,
+          activeTabId: state.secondary.activeTabId,
+          isOpen: state.secondary.isOpen,
           state,
-          tabs: state.secondary.tabs,
+          tabs,
         });
       });
     },
@@ -853,6 +986,7 @@ export function useThreadFileTabs({
 
       if (selection.source === "workspace") {
         if (resolvedEnvironmentId === undefined) return;
+        recordRecentItem({ source: "workspace", path: selection.path });
         const nextTab = createWorkspaceFilePreviewFixedPanelTab({
           environmentId: resolvedEnvironmentId,
           tab: {
@@ -867,10 +1001,16 @@ export function useThreadFileTabs({
       }
 
       if (!isManagerThread) return;
+      recordRecentItem({ source: "thread-storage", path: selection.path });
       const nextTab = createStorageTab(selection.path);
       updateFixedPanelTabsState((state) => replaceNewTab({ nextTab, state }));
     },
-    [isManagerThread, resolvedEnvironmentId, updateFixedPanelTabsState],
+    [
+      isManagerThread,
+      recordRecentItem,
+      resolvedEnvironmentId,
+      updateFixedPanelTabsState,
+    ],
   );
 
   const clearActiveFileTabs = useCallback(() => {
@@ -881,7 +1021,8 @@ export function useThreadFileTabs({
         (activeTab.kind !== "workspace-file-preview" &&
           activeTab.kind !== "host-file-preview" &&
           activeTab.kind !== "thread-storage-file-preview" &&
-          activeTab.kind !== "app")
+          activeTab.kind !== "app" &&
+          activeTab.kind !== "browser")
       ) {
         return state;
       }
@@ -900,6 +1041,14 @@ export function useThreadFileTabs({
     resolvedEnvironmentId,
     isManagerThread,
   });
+  // Every open browser tab in insertion order. The secondary panel keeps a live
+  // native view mounted for each one (only the active tab is shown), so the deck
+  // must see them all — not just the active tab — to avoid destroying/recreating
+  // a view on each tab switch.
+  const browserTabs = useMemo(
+    () => fixedPanelTabsState.secondary.tabs.filter(isBrowserTab),
+    [fixedPanelTabsState.secondary.tabs],
+  );
   const activeWorkspaceFileTab =
     activeTab?.kind === "workspace-file-preview" &&
     activeTab.environmentId === resolvedEnvironmentId
@@ -912,16 +1061,19 @@ export function useThreadFileTabs({
   const activeHostFileTab =
     activeTab?.kind === "host-file-preview" ? activeTab : null;
   const activeAppTab = activeTab?.kind === "app" ? activeTab : null;
+  const activeBrowserTab = activeTab?.kind === "browser" ? activeTab : null;
   const activeNewTab = activeTab?.kind === "new-tab" ? activeTab : null;
 
   return {
     orderedSecondaryFileTabs,
     activateAppTab,
+    activateBrowserTab,
     activateNewTab,
     activateHostFileTab,
     activateStorageFileTab,
     activateWorkspaceFileTab,
     activeAppId: activeAppTab?.appId ?? null,
+    activeBrowserTab,
     activeHostFileLineNumber: activeHostFileTab?.lineNumber ?? null,
     activeHostFilePath: activeHostFileTab?.path ?? null,
     activeStorageFilePath: activeStorageFileTab?.path ?? null,
@@ -929,19 +1081,23 @@ export function useThreadFileTabs({
     activeWorkspaceFilePath: activeWorkspaceFileTab?.path ?? null,
     activeWorkspaceFileSource: activeWorkspaceFileTab?.source ?? null,
     activeWorkspaceFileStatusLabel: activeWorkspaceFileTab?.statusLabel ?? null,
+    browserTabs,
     clearActiveFileTabs,
     closeAppTab,
+    closeBrowserTab,
     closeHostFileTab,
     closeNewTab,
     closeStorageFileTab,
     closeWorkspaceFileTab,
     hasNewTab: findNewTab(fixedPanelTabsState.secondary.tabs) !== null,
     isNewTabActive: activeNewTab !== null,
+    openBrowserTab,
     openNewTab,
     openApp,
     openHostFile,
     openStorageFile,
     openWorkspaceFile,
     selectFileSearchResult,
+    updateBrowserTab,
   };
 }
diff --git a/apps/app/src/components/sidebar/AppSidebar.tsx b/apps/app/src/components/sidebar/AppSidebar.tsx
index ac5daf59d..f2a534e79 100644
--- a/apps/app/src/components/sidebar/AppSidebar.tsx
+++ b/apps/app/src/components/sidebar/AppSidebar.tsx
@@ -130,6 +130,7 @@ export function AppSidebar({
           </SidebarMenu>
         </SidebarFooter>
         <div
+          data-testid="app-sidebar-resize-handle"
           className={cn(
             "absolute -right-1.5 top-0 z-30 hidden h-full w-3 cursor-col-resize md:block",
             "before:absolute before:inset-y-0 before:left-1/2 before:w-px before:-translate-x-1/2 before:bg-transparent before:transition-colors hover:before:bg-sidebar-border",
diff --git a/apps/app/src/components/sidebar/ProjectList.test.tsx b/apps/app/src/components/sidebar/ProjectList.test.tsx
index e953cda47..afae89c97 100644
--- a/apps/app/src/components/sidebar/ProjectList.test.tsx
+++ b/apps/app/src/components/sidebar/ProjectList.test.tsx
@@ -15,9 +15,11 @@ import {
   waitFor,
 } from "@testing-library/react";
 import { BrowserRouter } from "react-router-dom";
+import { useAtom } from "jotai";
 import type { QueryClient } from "@tanstack/react-query";
 import { PERSONAL_PROJECT_ID } from "@bb/domain";
 import type {
+  AppSummary,
   ProjectResponse,
   ProjectWithThreadsResponse,
   SidebarBootstrapResponse,
@@ -29,6 +31,8 @@ import {
 import { createQueryClientTestHarness } from "@/test/queryClientTestHarness";
 import { installFetchRoutes, jsonResponse } from "@/test/http-test-utils";
 import { wsManager } from "@/lib/ws";
+import { useFixedPanelTabsState } from "@/lib/fixed-panel-tabs";
+import { getThreadConversationCollapsedAtom } from "@/components/secondary-panel/threadSecondaryPanelAtoms";
 import { useRootComposeReuseEnvironment } from "@/lib/root-compose-selection";
 import { encodeReuseValue } from "@/components/pickers/environment-picker-value";
 import {
@@ -66,6 +70,12 @@ type ProjectThreadListEntry = ProjectWithThreadsResponse["threads"][number];
 type ProjectThreadListEntryOverrides = Partial<ProjectThreadListEntry>;
 type ProjectWithThreadsOverrides = Partial<ProjectWithThreadsResponse>;
 
+interface MakeAppArgs {
+  id: string;
+  name: string;
+  icon: AppSummary["icon"];
+}
+
 function makeProjectResponse(
   overrides: Partial<ProjectResponse> = {},
 ): ProjectResponse {
@@ -126,6 +136,22 @@ function makeThreadListEntry(
   };
 }
 
+function makeApp({ id, name, icon }: MakeAppArgs): AppSummary {
+  return {
+    id,
+    name,
+    entry: { path: "index.html", kind: "html" },
+    capabilities: [],
+    icon,
+  };
+}
+
+const STATUS_APP = makeApp({
+  id: "status",
+  name: "Status",
+  icon: { kind: "builtin", name: "ListTodo" },
+});
+
 interface ProjectListHandlerArgs {
   projects: ProjectResponse[];
   threadsByProjectId?: Map<string, ProjectWithThreadsResponse["threads"]>;
@@ -136,6 +162,10 @@ interface RootComposeReuseProbeProps {
   onValue: (value: string | null) => void;
 }
 
+interface PanelStateProbeProps {
+  threadId: string;
+}
+
 function buildProjectListHandler(args: ProjectListHandlerArgs) {
   return (request: Request) => {
     const url = new URL(request.url);
@@ -205,6 +235,42 @@ function RootComposeReuseProbe({
   return null;
 }
 
+function PanelStateProbe({ threadId }: PanelStateProbeProps) {
+  const state = useFixedPanelTabsState(threadId);
+  return (
+    <div data-testid="panel-state">
+      {JSON.stringify({
+        activeTabId: state.secondary.activeTabId,
+        isOpen: state.secondary.isOpen,
+      })}
+    </div>
+  );
+}
+
+interface ConversationCollapseProbeProps {
+  threadId: string;
+}
+
+// Mirrors one thread's conversation-collapse preference the thread detail view
+// reads/writes, and exposes a button that stands in for the collapsed rail's
+// expand control so a sidebar-only test can drive the same state. Keyed by
+// threadId so a test can probe several threads independently.
+function ConversationCollapseProbe({ threadId }: ConversationCollapseProbeProps) {
+  const [collapsed, setCollapsed] = useAtom(
+    getThreadConversationCollapsedAtom(threadId),
+  );
+  return (
+    <div>
+      <div data-testid={`conversation-collapsed:${threadId}`}>
+        {String(collapsed)}
+      </div>
+      <button type="button" onClick={() => setCollapsed(false)}>
+        {`expand-conversation:${threadId}`}
+      </button>
+    </div>
+  );
+}
+
 async function renderProjectList(
   props: ProjectListRenderProps = {},
   options: ProjectListRenderOptions = {},
@@ -424,7 +490,9 @@ describe("ProjectList", () => {
     const projectRow = projectLabel.closest(
       "[data-sidebar-sticky-tier='project']",
     );
-    expect(projectRow?.querySelector("a[href='/projects/project-1']")).toBeNull();
+    expect(
+      projectRow?.querySelector("a[href='/projects/project-1']"),
+    ).toBeNull();
     expect(screen.getByText("Project Thread")).toBeTruthy();
 
     fireEvent.click(
@@ -433,11 +501,252 @@ describe("ProjectList", () => {
 
     expect(screen.queryByText("Project Thread")).toBeNull();
 
+    fireEvent.click(screen.getByRole("button", { name: "Expand Project One" }));
+
+    expect(screen.getByText("Project Thread")).toBeTruthy();
+  });
+
+  it("renders manager app rows directly under their owning manager", async () => {
+    const project = makeProjectResponse({
+      id: "project-1",
+      name: "Project One",
+    });
+    const managerThread = makeThreadListEntry(project.id, 10, {
+      id: "thread-manager-apps",
+      title: "Sidebar Manager",
+      titleFallback: "Sidebar Manager",
+      type: "manager",
+    });
+    const workerThread = makeThreadListEntry(project.id, 9, {
+      id: "thread-manager-worker",
+      parentThreadId: managerThread.id,
+      title: "Worker Thread",
+      titleFallback: "Worker Thread",
+    });
+    const personalProject = makeProjectWithThreadsResponse({
+      id: PERSONAL_PROJECT_ID,
+      kind: "personal",
+      name: "Personal",
+      threads: [],
+    });
+    installFetchRoutes([
+      {
+        pathname: "/api/v1/sidebar-bootstrap",
+        handler: () =>
+          jsonResponse(
+            buildSidebarBootstrapResponse({
+              personalProject,
+              projects: [project],
+              threadsByProjectId: new Map([
+                [project.id, [managerThread, workerThread]],
+              ]),
+            }),
+          ),
+      },
+      {
+        pathname: `/api/v1/threads/${managerThread.id}/apps`,
+        handler: () => jsonResponse([STATUS_APP]),
+      },
+      {
+        pathname: "/api/v1/projects",
+        handler: () => jsonResponse([project]),
+      },
+      {
+        pathname: "/api/v1/threads",
+        handler: () => jsonResponse([]),
+      },
+      {
+        pathname: "/api/v1/system/config",
+        handler: () =>
+          jsonResponse({
+            hostDaemonPort: null,
+            voiceTranscriptionEnabled: false,
+          }),
+      },
+      {
+        pathname: "/api/v1/hosts",
+        handler: () => jsonResponse([]),
+      },
+    ]);
+
+    await renderProjectList();
+
+    const appRow = await screen.findByRole("button", {
+      name: "Open Status app",
+    });
+    const managerLabel = screen.getByText("Sidebar Manager");
+    const workerLabel = screen.getByText("Worker Thread");
+
+    expect(appRow.classList.contains("pl-14")).toBe(true);
+    expect(appRow.parentElement?.className).toContain("before:left-10");
+    expect(
+      Boolean(
+        managerLabel.compareDocumentPosition(appRow) &
+        Node.DOCUMENT_POSITION_FOLLOWING,
+      ),
+    ).toBe(true);
+    expect(
+      Boolean(
+        appRow.compareDocumentPosition(workerLabel) &
+        Node.DOCUMENT_POSITION_FOLLOWING,
+      ),
+    ).toBe(true);
+  });
+
+  it("opens a manager app row in the owning thread secondary panel", async () => {
+    const project = makeProjectResponse({
+      id: "project-1",
+      name: "Project One",
+    });
+    const managerThread = makeThreadListEntry(project.id, 10, {
+      id: "thread-manager-open-app",
+      title: "Sidebar Manager",
+      titleFallback: "Sidebar Manager",
+      type: "manager",
+    });
+    const personalProject = makeProjectWithThreadsResponse({
+      id: PERSONAL_PROJECT_ID,
+      kind: "personal",
+      name: "Personal",
+      threads: [],
+    });
+    installFetchRoutes([
+      {
+        pathname: "/api/v1/sidebar-bootstrap",
+        handler: () =>
+          jsonResponse(
+            buildSidebarBootstrapResponse({
+              personalProject,
+              projects: [project],
+              threadsByProjectId: new Map([[project.id, [managerThread]]]),
+            }),
+          ),
+      },
+      {
+        pathname: `/api/v1/threads/${managerThread.id}/apps`,
+        handler: () => jsonResponse([STATUS_APP]),
+      },
+      {
+        pathname: "/api/v1/projects",
+        handler: () => jsonResponse([project]),
+      },
+      {
+        pathname: "/api/v1/threads",
+        handler: () => jsonResponse([]),
+      },
+      {
+        pathname: "/api/v1/system/config",
+        handler: () =>
+          jsonResponse({
+            hostDaemonPort: null,
+            voiceTranscriptionEnabled: false,
+          }),
+      },
+      {
+        pathname: "/api/v1/hosts",
+        handler: () => jsonResponse([]),
+      },
+    ]);
+
+    await renderProjectList(
+      {},
+      { extraUi: <PanelStateProbe threadId={managerThread.id} /> },
+    );
+
     fireEvent.click(
-      screen.getByRole("button", { name: "Expand Project One" }),
+      await screen.findByRole("button", { name: "Open Status app" }),
     );
 
-    expect(screen.getByText("Project Thread")).toBeTruthy();
+    await waitFor(() => {
+      const probe = screen.getByTestId("panel-state");
+      expect(probe.textContent).toContain('"activeTabId":"app:status"');
+      expect(probe.textContent).toContain('"isOpen":true');
+    });
+    expect(window.location.pathname).toBe(
+      `/projects/${project.id}/threads/${managerThread.id}`,
+    );
+  });
+
+  it("hides manager app rows when the owning manager is collapsed", async () => {
+    const project = makeProjectResponse({
+      id: "project-1",
+      name: "Project One",
+    });
+    const managerThread = makeThreadListEntry(project.id, 10, {
+      id: "thread-manager-collapse-apps",
+      title: "Sidebar Manager",
+      titleFallback: "Sidebar Manager",
+      type: "manager",
+    });
+    const workerThread = makeThreadListEntry(project.id, 9, {
+      id: "thread-manager-collapse-worker",
+      parentThreadId: managerThread.id,
+      title: "Worker Thread",
+      titleFallback: "Worker Thread",
+    });
+    const personalProject = makeProjectWithThreadsResponse({
+      id: PERSONAL_PROJECT_ID,
+      kind: "personal",
+      name: "Personal",
+      threads: [],
+    });
+    installFetchRoutes([
+      {
+        pathname: "/api/v1/sidebar-bootstrap",
+        handler: () =>
+          jsonResponse(
+            buildSidebarBootstrapResponse({
+              personalProject,
+              projects: [project],
+              threadsByProjectId: new Map([
+                [project.id, [managerThread, workerThread]],
+              ]),
+            }),
+          ),
+      },
+      {
+        pathname: `/api/v1/threads/${managerThread.id}/apps`,
+        handler: () => jsonResponse([STATUS_APP]),
+      },
+      {
+        pathname: "/api/v1/projects",
+        handler: () => jsonResponse([project]),
+      },
+      {
+        pathname: "/api/v1/threads",
+        handler: () => jsonResponse([]),
+      },
+      {
+        pathname: "/api/v1/system/config",
+        handler: () =>
+          jsonResponse({
+            hostDaemonPort: null,
+            voiceTranscriptionEnabled: false,
+          }),
+      },
+      {
+        pathname: "/api/v1/hosts",
+        handler: () => jsonResponse([]),
+      },
+    ]);
+
+    await renderProjectList();
+
+    expect(
+      await screen.findByRole("button", { name: "Open Status app" }),
+    ).toBeTruthy();
+    expect(screen.getByText("Worker Thread")).toBeTruthy();
+
+    fireEvent.click(
+      screen.getByRole("button", {
+        name: "Collapse Sidebar Manager threads",
+      }),
+    );
+
+    expect(
+      screen.queryByRole("button", { name: "Open Status app" }),
+    ).toBeNull();
+    expect(screen.queryByText("Worker Thread")).toBeNull();
   });
 
   it("orders project hover actions as menu, new manager, then new thread", async () => {
@@ -514,13 +823,13 @@ describe("ProjectList", () => {
     expect(
       Boolean(
         menuButton.compareDocumentPosition(managerButton) &
-          Node.DOCUMENT_POSITION_FOLLOWING,
+        Node.DOCUMENT_POSITION_FOLLOWING,
       ),
     ).toBe(true);
     expect(
       Boolean(
         managerButton.compareDocumentPosition(threadButton) &
-          Node.DOCUMENT_POSITION_FOLLOWING,
+        Node.DOCUMENT_POSITION_FOLLOWING,
       ),
     ).toBe(true);
 
@@ -785,9 +1094,8 @@ describe("ProjectList", () => {
 
     await renderProjectList();
 
-    const projectlessThreadLabel = await screen.findByText(
-      "Projectless Thread",
-    );
+    const projectlessThreadLabel =
+      await screen.findByText("Projectless Thread");
     const projectlessThreadRow = projectlessThreadLabel.closest("div");
     const projectsLabel = screen.getByText("Projects");
     const threadsLabel = screen.getByText("Threads");
@@ -797,7 +1105,7 @@ describe("ProjectList", () => {
     expect(
       Boolean(
         projectsLabel.compareDocumentPosition(threadsLabel) &
-          Node.DOCUMENT_POSITION_FOLLOWING,
+        Node.DOCUMENT_POSITION_FOLLOWING,
       ),
     ).toBe(true);
     expect(sectionStack?.classList.contains("space-y-4")).toBe(true);
@@ -1022,6 +1330,10 @@ describe("ProjectList", () => {
             }),
           ),
       },
+      {
+        pathname: `/api/v1/threads/${projectlessManager.id}/apps`,
+        handler: () => jsonResponse([]),
+      },
       {
         pathname: "/api/v1/projects",
         handler: () => jsonResponse([]),
@@ -1248,8 +1560,335 @@ describe("ProjectList", () => {
     expect(
       Boolean(
         threadsLabel.compareDocumentPosition(projectsLabel) &
-          Node.DOCUMENT_POSITION_FOLLOWING,
+        Node.DOCUMENT_POSITION_FOLLOWING,
       ),
     ).toBe(true);
   });
+
+  it("collapses the conversation and moves the single selection to the opened app row", async () => {
+    const project = makeProjectResponse({
+      id: "project-1",
+      name: "Project One",
+    });
+    const managerThread = makeThreadListEntry(project.id, 10, {
+      id: "thread-manager-app-select",
+      title: "Sidebar Manager",
+      titleFallback: "Sidebar Manager",
+      type: "manager",
+    });
+    const personalProject = makeProjectWithThreadsResponse({
+      id: PERSONAL_PROJECT_ID,
+      kind: "personal",
+      name: "Personal",
+      threads: [],
+    });
+    installFetchRoutes([
+      {
+        pathname: "/api/v1/sidebar-bootstrap",
+        handler: () =>
+          jsonResponse(
+            buildSidebarBootstrapResponse({
+              personalProject,
+              projects: [project],
+              threadsByProjectId: new Map([[project.id, [managerThread]]]),
+            }),
+          ),
+      },
+      {
+        pathname: `/api/v1/threads/${managerThread.id}/apps`,
+        handler: () => jsonResponse([STATUS_APP]),
+      },
+      {
+        pathname: "/api/v1/projects",
+        handler: () => jsonResponse([project]),
+      },
+      {
+        pathname: "/api/v1/threads",
+        handler: () => jsonResponse([]),
+      },
+      {
+        pathname: "/api/v1/system/config",
+        handler: () =>
+          jsonResponse({
+            hostDaemonPort: null,
+            voiceTranscriptionEnabled: false,
+          }),
+      },
+      {
+        pathname: "/api/v1/hosts",
+        handler: () => jsonResponse([]),
+      },
+    ]);
+
+    // Start on the manager thread route so its row is the selected surface.
+    window.history.pushState(
+      null,
+      "",
+      `/projects/${project.id}/threads/${managerThread.id}`,
+    );
+
+    await renderProjectList(
+      {},
+      { extraUi: <ConversationCollapseProbe threadId={managerThread.id} /> },
+    );
+
+    const appRow = await screen.findByRole("button", {
+      name: "Open Status app",
+    });
+    const findManagerRow = () =>
+      screen
+        .getByText("Sidebar Manager")
+        .closest("[data-sidebar-sticky-tier='manager']");
+
+    // Conversation active: the manager row owns the single selected highlight
+    // and no app row is highlighted.
+    expect(findManagerRow()?.className).toContain("bg-sidebar-border");
+    expect(appRow.className).not.toContain("bg-sidebar-border");
+    expect(
+      screen.getByTestId(`conversation-collapsed:${managerThread.id}`)
+        .textContent,
+    ).toBe("false");
+
+    fireEvent.click(appRow);
+
+    // App opened: the conversation collapses and the app row becomes the single
+    // selected row; the manager row drops its selected background.
+    await waitFor(() => {
+      expect(
+        screen.getByTestId(`conversation-collapsed:${managerThread.id}`)
+          .textContent,
+      ).toBe("true");
+    });
+    expect(
+      screen.getByRole("button", { name: "Open Status app" }).className,
+    ).toContain("bg-sidebar-border");
+    expect(findManagerRow()?.className).not.toContain("bg-sidebar-border");
+
+    // Expanding the conversation flips the selection back to the manager row.
+    fireEvent.click(
+      screen.getByRole("button", {
+        name: `expand-conversation:${managerThread.id}`,
+      }),
+    );
+
+    await waitFor(() => {
+      expect(findManagerRow()?.className).toContain("bg-sidebar-border");
+    });
+    expect(
+      screen.getByRole("button", { name: "Open Status app" }).className,
+    ).not.toContain("bg-sidebar-border");
+  });
+
+  it("restores the conversation when its thread row is selected while collapsed", async () => {
+    const project = makeProjectResponse({
+      id: "project-1",
+      name: "Project One",
+    });
+    const managerThread = makeThreadListEntry(project.id, 10, {
+      id: "thread-manager-row-restore",
+      title: "Sidebar Manager",
+      titleFallback: "Sidebar Manager",
+      type: "manager",
+    });
+    const personalProject = makeProjectWithThreadsResponse({
+      id: PERSONAL_PROJECT_ID,
+      kind: "personal",
+      name: "Personal",
+      threads: [],
+    });
+    installFetchRoutes([
+      {
+        pathname: "/api/v1/sidebar-bootstrap",
+        handler: () =>
+          jsonResponse(
+            buildSidebarBootstrapResponse({
+              personalProject,
+              projects: [project],
+              threadsByProjectId: new Map([[project.id, [managerThread]]]),
+            }),
+          ),
+      },
+      {
+        pathname: `/api/v1/threads/${managerThread.id}/apps`,
+        handler: () => jsonResponse([STATUS_APP]),
+      },
+      {
+        pathname: "/api/v1/projects",
+        handler: () => jsonResponse([project]),
+      },
+      {
+        pathname: "/api/v1/threads",
+        handler: () => jsonResponse([]),
+      },
+      {
+        pathname: "/api/v1/system/config",
+        handler: () =>
+          jsonResponse({
+            hostDaemonPort: null,
+            voiceTranscriptionEnabled: false,
+          }),
+      },
+      {
+        pathname: "/api/v1/hosts",
+        handler: () => jsonResponse([]),
+      },
+    ]);
+
+    // Start on the manager thread route so its row is the selected surface.
+    window.history.pushState(
+      null,
+      "",
+      `/projects/${project.id}/threads/${managerThread.id}`,
+    );
+
+    await renderProjectList(
+      {},
+      { extraUi: <ConversationCollapseProbe threadId={managerThread.id} /> },
+    );
+
+    // Opening the app collapses the conversation so the app fills the view.
+    fireEvent.click(
+      await screen.findByRole("button", { name: "Open Status app" }),
+    );
+    await waitFor(() => {
+      expect(
+        screen.getByTestId(`conversation-collapsed:${managerThread.id}`)
+          .textContent,
+      ).toBe("true");
+    });
+
+    // Selecting the agent/thread row is the inverse: it restores the
+    // conversation by clearing this thread's own collapse flag.
+    fireEvent.click(
+      screen.getByRole("link", { name: "Open Sidebar Manager" }),
+    );
+
+    await waitFor(() => {
+      expect(
+        screen.getByTestId(`conversation-collapsed:${managerThread.id}`)
+          .textContent,
+      ).toBe("false");
+    });
+  });
+
+  it("keeps each thread's collapse state isolated when selecting another thread", async () => {
+    const project = makeProjectResponse({
+      id: "project-1",
+      name: "Project One",
+    });
+    const managerA = makeThreadListEntry(project.id, 10, {
+      id: "thread-manager-a",
+      title: "Manager A",
+      titleFallback: "Manager A",
+      type: "manager",
+    });
+    const managerB = makeThreadListEntry(project.id, 9, {
+      id: "thread-manager-b",
+      title: "Manager B",
+      titleFallback: "Manager B",
+      type: "manager",
+    });
+    const personalProject = makeProjectWithThreadsResponse({
+      id: PERSONAL_PROJECT_ID,
+      kind: "personal",
+      name: "Personal",
+      threads: [],
+    });
+    installFetchRoutes([
+      {
+        pathname: "/api/v1/sidebar-bootstrap",
+        handler: () =>
+          jsonResponse(
+            buildSidebarBootstrapResponse({
+              personalProject,
+              projects: [project],
+              threadsByProjectId: new Map([[project.id, [managerA, managerB]]]),
+            }),
+          ),
+      },
+      {
+        pathname: `/api/v1/threads/${managerA.id}/apps`,
+        handler: () => jsonResponse([STATUS_APP]),
+      },
+      {
+        pathname: `/api/v1/threads/${managerB.id}/apps`,
+        handler: () => jsonResponse([]),
+      },
+      {
+        pathname: "/api/v1/projects",
+        handler: () => jsonResponse([project]),
+      },
+      {
+        pathname: "/api/v1/threads",
+        handler: () => jsonResponse([]),
+      },
+      {
+        pathname: "/api/v1/system/config",
+        handler: () =>
+          jsonResponse({
+            hostDaemonPort: null,
+            voiceTranscriptionEnabled: false,
+          }),
+      },
+      {
+        pathname: "/api/v1/hosts",
+        handler: () => jsonResponse([]),
+      },
+    ]);
+
+    // Start on Manager A so opening its app targets A's thread.
+    window.history.pushState(
+      null,
+      "",
+      `/projects/${project.id}/threads/${managerA.id}`,
+    );
+
+    await renderProjectList(
+      {},
+      {
+        extraUi: (
+          <>
+            <ConversationCollapseProbe threadId={managerA.id} />
+            <ConversationCollapseProbe threadId={managerB.id} />
+          </>
+        ),
+      },
+    );
+
+    // Collapse A's conversation by opening its app full-screen.
+    fireEvent.click(
+      await screen.findByRole("button", { name: "Open Status app" }),
+    );
+    await waitFor(() => {
+      expect(
+        screen.getByTestId(`conversation-collapsed:${managerA.id}`).textContent,
+      ).toBe("true");
+    });
+    // B was never collapsed.
+    expect(
+      screen.getByTestId(`conversation-collapsed:${managerB.id}`).textContent,
+    ).toBe("false");
+
+    // Selecting B's row restores only B and leaves A collapsed (full-screen app).
+    fireEvent.click(screen.getByRole("link", { name: "Open Manager B" }));
+    await waitFor(() => {
+      expect(window.location.pathname).toBe(
+        `/projects/${project.id}/threads/${managerB.id}`,
+      );
+    });
+    expect(
+      screen.getByTestId(`conversation-collapsed:${managerB.id}`).textContent,
+    ).toBe("false");
+    expect(
+      screen.getByTestId(`conversation-collapsed:${managerA.id}`).textContent,
+    ).toBe("true");
+
+    // Reselecting A restores only A.
+    fireEvent.click(screen.getByRole("link", { name: "Open Manager A" }));
+    await waitFor(() => {
+      expect(
+        screen.getByTestId(`conversation-collapsed:${managerA.id}`).textContent,
+      ).toBe("false");
+    });
+  });
 });
diff --git a/apps/app/src/components/sidebar/ProjectRow.tsx b/apps/app/src/components/sidebar/ProjectRow.tsx
index fd778eff1..d51e51ed7 100644
--- a/apps/app/src/components/sidebar/ProjectRow.tsx
+++ b/apps/app/src/components/sidebar/ProjectRow.tsx
@@ -9,6 +9,7 @@ import {
   type ReactNode,
 } from "react";
 import { flushSync } from "react-dom";
+import { useAtomValue } from "jotai";
 import {
   closestCenter,
   DndContext,
@@ -30,10 +31,11 @@ import {
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import type { ThreadListEntry } from "@bb/domain";
-import type { ProjectResponse } from "@bb/server-contract";
+import type { AppSummary, ProjectResponse } from "@bb/server-contract";
 import { NavLink, useNavigate } from "react-router-dom";
 import { useCreateThreadInWorktree } from "@/hooks/useCreateThreadInWorktree";
 import { useArchiveEnvironmentThreads } from "@/hooks/mutations/environment-mutations";
+import { useThreadApps } from "@/hooks/queries/thread-queries";
 import { Button } from "@/components/ui/button.js";
 import {
   DropdownMenu,
@@ -73,6 +75,9 @@ import {
 import { cn } from "@/lib/utils";
 import { getEnvironmentWorkspaceLabelIconName } from "@/lib/environment-workspace-display";
 import { getProjectSettingsRoutePath } from "@/lib/app-route-paths";
+import { useFixedPanelTabsState } from "@/lib/fixed-panel-tabs";
+import type { FixedPanelTabsState } from "@/lib/fixed-panel-tabs-state";
+import { getThreadConversationCollapsedAtom } from "@/components/secondary-panel/threadSecondaryPanelAtoms";
 import {
   applyNeighborReorder,
   buildNeighborReorderRequest,
@@ -85,6 +90,7 @@ import {
   type ThreadRowDragBindings,
   type ThreadRowOptions,
 } from "./ThreadRow";
+import { ThreadAppRow } from "./ThreadAppRow";
 import {
   buildProjectThreadGroups,
   type EnvironmentThreadGroup,
@@ -103,6 +109,7 @@ import {
   SIDEBAR_SECTION_GROUP_LINE_CLASS,
   SIDEBAR_SECTION_LINE_CONTINUATION_CLASS,
   SIDEBAR_STANDARD_ROW_PADDING_CLASS,
+  type SidebarThreadRowIndent,
 } from "./sidebarRowClasses";
 import { SIDEBAR_SORTABLE_TRANSITION } from "./sortableMotion";
 import {
@@ -223,6 +230,7 @@ type ProjectItemClickCaptureHandler = MouseEventHandler<HTMLLIElement>;
 type ProjectThreadListClickCaptureHandler = MouseEventHandler<HTMLDivElement>;
 
 const EMPTY_PROJECT_THREADS: ThreadListEntry[] = [];
+const EMPTY_THREAD_APPS: readonly AppSummary[] = [];
 const PROJECT_ROW_LEADING_SLOT_CLASS =
   "h-7 w-8 max-md:pointer-coarse:h-10 max-md:pointer-coarse:w-10";
 
@@ -236,6 +244,13 @@ interface ManagerThreadOrderEntry {
   id: string;
 }
 
+interface ActiveThreadAppIdArgs {
+  fixedPanelTabsState: FixedPanelTabsState;
+  isConversationCollapsed: boolean;
+  selectedThreadId?: string;
+  threadId: string;
+}
+
 function getManagerThreadGroupId(
   managerThreadGroup: ManagerThreadGroup,
 ): string {
@@ -319,6 +334,12 @@ function getProjectThreadTreeManagedChildOptions(
     : THREAD_ROW_PROJECT_MANAGED_CHILD_OPTIONS;
 }
 
+function getProjectThreadTreeManagedAppIndent(
+  variant: ProjectThreadTreeVariant,
+): SidebarThreadRowIndent {
+  return variant === "section" ? "project-child" : "nested-child";
+}
+
 function getProjectThreadTreeEnvGroupedChildOptions(
   variant: ProjectThreadTreeVariant,
 ): ThreadRowOptions {
@@ -367,6 +388,29 @@ function getProjectThreadTreeManagerLineContinuationClassName(
     : SIDEBAR_MANAGER_LINE_CONTINUATION_CLASS;
 }
 
+function getActiveThreadAppId({
+  fixedPanelTabsState,
+  isConversationCollapsed,
+  selectedThreadId,
+  threadId,
+}: ActiveThreadAppIdArgs): string | null {
+  // An app is the active surface only for the open thread, and only while the
+  // conversation is tucked into the collapsed rail with the panel showing the
+  // app full. With the conversation visible it stays the selected surface, so
+  // no app row is highlighted and the manager row reads as selected instead.
+  if (selectedThreadId !== threadId || !isConversationCollapsed) {
+    return null;
+  }
+
+  const { activeTabId, isOpen, tabs } = fixedPanelTabsState.secondary;
+  if (!isOpen || activeTabId === null) {
+    return null;
+  }
+
+  const activeTab = tabs.find((tab) => tab.id === activeTabId);
+  return activeTab?.kind === "app" ? activeTab.appId : null;
+}
+
 function ProjectThreadTreeGroup({
   children,
   variant,
@@ -652,9 +696,7 @@ function EnvironmentThreadGroupHeader({
       >
         {showRollupGlyph ? (
           <span
-            data-sidebar-hover-actions-open={
-              isActionsOpen ? "true" : undefined
-            }
+            data-sidebar-hover-actions-open={isActionsOpen ? "true" : undefined}
             className={cn(
               SIDEBAR_HOVER_ACTIONS_FADE_CLASS,
               "pointer-events-none absolute inset-0 flex items-center justify-center text-subtle-foreground",
@@ -852,12 +894,26 @@ export const ManagerThreadGroupRow = memo(function ManagerThreadGroupRow({
   sortableStyle,
 }: ManagerThreadGroupRowProps) {
   const { managerThread, managedItems, stats } = managerThreadGroup;
+  const managerAppsQuery = useThreadApps(managerThread.id);
+  const managerApps = managerAppsQuery.data ?? EMPTY_THREAD_APPS;
+  const fixedPanelTabsState = useFixedPanelTabsState(managerThread.id);
+  const isConversationCollapsed = useAtomValue(
+    getThreadConversationCollapsedAtom(managerThread.id),
+  );
+  const activeAppId = getActiveThreadAppId({
+    fixedPanelTabsState,
+    isConversationCollapsed,
+    selectedThreadId,
+    threadId: managerThread.id,
+  });
+  const nestedChildCount = stats.managedChildCount + managerApps.length;
+  const appIndent = getProjectThreadTreeManagedAppIndent(variant);
   const managerOptions = useMemo<ThreadRowOptions>(
     () => ({
       kind: "manager",
       indent: variant === "section" ? "root" : "project-child",
       isCollapsed: isManagerCollapsed,
-      managedChildCount: stats.managedChildCount,
+      nestedChildCount,
       managedChildActivity: stats.managedChildActivity,
       onToggleCollapsed: onToggleManagerCollapsed,
       ...(consumeClickSuppression ? { consumeClickSuppression } : {}),
@@ -867,13 +923,13 @@ export const ManagerThreadGroupRow = memo(function ManagerThreadGroupRow({
       consumeClickSuppression,
       dragBindings,
       isManagerCollapsed,
+      nestedChildCount,
       onToggleManagerCollapsed,
-      stats.managedChildCount,
       stats.managedChildActivity,
       variant,
     ],
   );
-  const showManagedChildren = !isManagerCollapsed && managedItems.length > 0;
+  const showManagedChildren = !isManagerCollapsed && nestedChildCount > 0;
   return (
     <div
       ref={sortableRef}
@@ -883,7 +939,10 @@ export const ManagerThreadGroupRow = memo(function ManagerThreadGroupRow({
       <ThreadRow
         projectId={projectId}
         thread={managerThread}
-        isActive={selectedThreadId === managerThread.id}
+        // When one of this manager's apps is the active surface, that app row
+        // owns the single selected highlight; the manager row drops its full
+        // selected background (its nesting still shows context).
+        isActive={selectedThreadId === managerThread.id && activeAppId === null}
         onProjectSelect={onProjectSelect}
         options={managerOptions}
       />
@@ -894,6 +953,16 @@ export const ManagerThreadGroupRow = memo(function ManagerThreadGroupRow({
             getProjectThreadTreeChildGroupLineClassName(variant),
           )}
         >
+          {managerApps.map((app) => (
+            <ThreadAppRow
+              key={`app:${app.id}`}
+              app={app}
+              indent={appIndent}
+              isActive={activeAppId === app.id}
+              projectId={projectId}
+              threadId={managerThread.id}
+            />
+          ))}
           {managedItems.map((item) =>
             item.kind === "thread" ? (
               <ThreadRow
@@ -1038,9 +1107,12 @@ export const ProjectThreadTree = memo(function ProjectThreadTree({
       coordinateGetter: sortableKeyboardCoordinates,
     }),
   );
-  const handleManagerDragStart = useCallback((_event: DragStartEvent) => {
-    beginManagerDragClickSuppression();
-  }, [beginManagerDragClickSuppression]);
+  const handleManagerDragStart = useCallback(
+    (_event: DragStartEvent) => {
+      beginManagerDragClickSuppression();
+    },
+    [beginManagerDragClickSuppression],
+  );
   const handleManagerDragCancel = useCallback(() => {
     clearManagerDragClickSuppressionSoon();
   }, [clearManagerDragClickSuppressionSoon]);
@@ -1261,16 +1333,17 @@ function ProjectRowComponent({
   const [isDropdownActionsOpen, setIsDropdownActionsOpen] = useState(false);
   const [isContextActionsOpen, setIsContextActionsOpen] = useState(false);
   const isActionsOpen = isDropdownActionsOpen || isContextActionsOpen;
-  const handleProjectRowClickCapture = useCallback<ProjectItemClickCaptureHandler>(
-    (event) => {
-      if (!consumeProjectClickSuppression?.()) {
-        return;
-      }
-      event.preventDefault();
-      event.stopPropagation();
-    },
-    [consumeProjectClickSuppression],
-  );
+  const handleProjectRowClickCapture =
+    useCallback<ProjectItemClickCaptureHandler>(
+      (event) => {
+        if (!consumeProjectClickSuppression?.()) {
+          return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+      },
+      [consumeProjectClickSuppression],
+    );
   const handleProjectRowToggle = useCallback(() => {
     onToggleProjectCollapsed(project.id);
   }, [onToggleProjectCollapsed, project.id]);
@@ -1389,9 +1462,7 @@ function ProjectRowComponent({
             </NavLink>
           ) : null}
           <span
-            data-sidebar-hover-actions-open={
-              isActionsOpen ? "true" : undefined
-            }
+            data-sidebar-hover-actions-open={isActionsOpen ? "true" : undefined}
             className={cn(
               SIDEBAR_HOVER_ACTIONS_CLASS,
               "relative z-10 inline-flex shrink-0 items-center",
diff --git a/apps/app/src/components/sidebar/ThreadAppRow.tsx b/apps/app/src/components/sidebar/ThreadAppRow.tsx
new file mode 100644
index 000000000..4cb9ed985
--- /dev/null
+++ b/apps/app/src/components/sidebar/ThreadAppRow.tsx
@@ -0,0 +1,94 @@
+import { memo, useCallback } from "react";
+import { useNavigate } from "react-router-dom";
+import { useSetAtom } from "jotai";
+import type { AppSummary } from "@bb/server-contract";
+import { ResolvedAppIcon } from "@/components/secondary-panel/AppIcon";
+import { useOpenThreadAppTab } from "@/components/secondary-panel/useThreadFileTabs";
+import { getThreadConversationCollapsedAtom } from "@/components/secondary-panel/threadSecondaryPanelAtoms";
+import {
+  COARSE_POINTER_COMPACT_ROW_HEIGHT_CLASS,
+  COARSE_POINTER_GLYPH_BOX_CLASS,
+  COARSE_POINTER_ICON_SIZE_CLASS,
+} from "@/components/ui/coarse-pointer-sizing.js";
+import { getThreadRoutePath } from "@/lib/app-route-paths";
+import { cn } from "@/lib/utils";
+import {
+  SIDEBAR_ROW_BASE_CLASS,
+  SIDEBAR_ROW_GLYPH_SLOT_CLASS,
+  SIDEBAR_ROW_INTERACTIVE_STATE_CLASS,
+  getSidebarThreadRowPaddingClass,
+  type SidebarThreadRowIndent,
+} from "./sidebarRowClasses";
+
+interface ThreadAppRowProps {
+  app: AppSummary;
+  indent: SidebarThreadRowIndent;
+  isActive: boolean;
+  projectId: string;
+  threadId: string;
+}
+
+function ThreadAppRowComponent({
+  app,
+  indent,
+  isActive,
+  projectId,
+  threadId,
+}: ThreadAppRowProps) {
+  const navigate = useNavigate();
+  const openThreadAppTab = useOpenThreadAppTab(threadId);
+  const setConversationCollapsed = useSetAtom(
+    getThreadConversationCollapsedAtom(threadId),
+  );
+  const openApp = useCallback(() => {
+    // Opening an app makes it the active surface: reveal its tab in the
+    // secondary panel (openThreadAppTab also opens the panel) and tuck the
+    // conversation into the collapsed rail so the app fills the view.
+    openThreadAppTab(app.id);
+    setConversationCollapsed(true);
+    navigate(getThreadRoutePath({ projectId, threadId }));
+  }, [
+    app.id,
+    navigate,
+    openThreadAppTab,
+    projectId,
+    setConversationCollapsed,
+    threadId,
+  ]);
+
+  return (
+    <button
+      type="button"
+      aria-label={`Open ${app.name} app`}
+      title={`${app.name} app`}
+      className={cn(
+        "group/thread-app-row",
+        SIDEBAR_ROW_BASE_CLASS,
+        COARSE_POINTER_COMPACT_ROW_HEIGHT_CLASS,
+        getSidebarThreadRowPaddingClass(indent),
+        "cursor-pointer pr-2 text-left outline-none ring-sidebar-ring focus-visible:ring-2",
+        isActive
+          ? "bg-sidebar-border text-sidebar-foreground"
+          : SIDEBAR_ROW_INTERACTIVE_STATE_CLASS,
+      )}
+      onClick={openApp}
+    >
+      <span
+        className={cn(
+          "relative z-10",
+          SIDEBAR_ROW_GLYPH_SLOT_CLASS,
+          COARSE_POINTER_GLYPH_BOX_CLASS,
+        )}
+        aria-hidden="true"
+      >
+        <ResolvedAppIcon
+          icon={app.icon}
+          className={cn(COARSE_POINTER_ICON_SIZE_CLASS, "text-current")}
+        />
+      </span>
+      <span className="relative z-10 min-w-0 flex-1 truncate">{app.name}</span>
+    </button>
+  );
+}
+
+export const ThreadAppRow = memo(ThreadAppRowComponent);
diff --git a/apps/app/src/components/sidebar/ThreadRow.stories.tsx b/apps/app/src/components/sidebar/ThreadRow.stories.tsx
index 16816c55b..70f33e6cc 100644
--- a/apps/app/src/components/sidebar/ThreadRow.stories.tsx
+++ b/apps/app/src/components/sidebar/ThreadRow.stories.tsx
@@ -54,7 +54,7 @@ function managerOption(
     kind: "manager",
     indent: "project-child",
     isCollapsed: false,
-    managedChildCount: 0,
+    nestedChildCount: 0,
     managedChildActivity: NO_COLLAPSED_CHILD_ACTIVITY,
     onToggleCollapsed: noop,
     ...overrides,
@@ -220,7 +220,7 @@ export function Overview() {
             projectId="proj_demo"
             thread={managerThread}
             isActive={false}
-            options={managerOption({ managedChildCount: 0 })}
+            options={managerOption({ nestedChildCount: 0 })}
           />
         </SidebarStage>
       </StoryRow>
@@ -235,7 +235,7 @@ export function Overview() {
             isActive={false}
             options={managerOption({
               isCollapsed: false,
-              managedChildCount: 4,
+              nestedChildCount: 4,
             })}
           />
           <ThreadRow
@@ -257,7 +257,7 @@ export function Overview() {
             isActive={false}
             options={managerOption({
               isCollapsed: true,
-              managedChildCount: 4,
+              nestedChildCount: 4,
             })}
           />
         </SidebarStage>
@@ -273,7 +273,7 @@ export function Overview() {
             isActive={false}
             options={managerOption({
               isCollapsed: true,
-              managedChildCount: 4,
+              nestedChildCount: 4,
               managedChildActivity: childActivity({ working: true }),
             })}
           />
@@ -290,7 +290,7 @@ export function Overview() {
             isActive={false}
             options={managerOption({
               isCollapsed: true,
-              managedChildCount: 4,
+              nestedChildCount: 4,
               managedChildActivity: childActivity({ pending: true }),
             })}
           />
@@ -307,7 +307,7 @@ export function Overview() {
             isActive={false}
             options={managerOption({
               isCollapsed: true,
-              managedChildCount: 4,
+              nestedChildCount: 4,
               managedChildActivity: childActivity({
                 pending: true,
                 working: true,
diff --git a/apps/app/src/components/sidebar/ThreadRow.tsx b/apps/app/src/components/sidebar/ThreadRow.tsx
index 7afb1b2e6..e11ccdbb9 100644
--- a/apps/app/src/components/sidebar/ThreadRow.tsx
+++ b/apps/app/src/components/sidebar/ThreadRow.tsx
@@ -1,9 +1,11 @@
 import { memo, useCallback, useState, type MouseEventHandler } from "react";
+import { useSetAtom } from "jotai";
 import type {
   DraggableAttributes,
   DraggableSyntheticListeners,
 } from "@dnd-kit/core";
 import type { ThreadListEntry } from "@bb/domain";
+import { getThreadConversationCollapsedAtom } from "@/components/secondary-panel/threadSecondaryPanelAtoms";
 import { Icon, type IconName } from "@/components/ui/icon.js";
 import { SidebarStickyTier } from "@/components/ui/sidebar.js";
 import { NavLink } from "react-router-dom";
@@ -39,6 +41,7 @@ import { getThreadRoutePath } from "@/lib/app-route-paths";
 import { cn } from "@/lib/utils";
 import {
   SIDEBAR_ROW_BASE_CLASS,
+  SIDEBAR_ROW_GLYPH_SLOT_CLASS,
   SIDEBAR_ROW_INTERACTIVE_STATE_CLASS,
   SIDEBAR_UNREAD_DOT_CLASS,
   getSidebarThreadRowPaddingClass,
@@ -67,7 +70,7 @@ export type ThreadRowOptions =
       kind: "manager";
       indent: SidebarThreadRowIndent;
       isCollapsed: boolean;
-      managedChildCount: number;
+      nestedChildCount: number;
       managedChildActivity: CollapsedChildActivity;
       onToggleCollapsed: (threadId: string) => void;
       consumeClickSuppression?: ConsumeDragClickSuppression;
@@ -95,8 +98,6 @@ interface ManagerChevronProps {
   threadTitle: string;
 }
 
-const ROW_GLYPH_SLOT_CLASS =
-  "inline-flex shrink-0 items-center justify-center text-subtle-foreground";
 type ThreadRowClickCaptureHandler = MouseEventHandler<HTMLDivElement>;
 
 function ManagerChevron({
@@ -123,7 +124,7 @@ function ManagerChevron({
       }}
       className={cn(
         "relative z-10 rounded-md outline-none ring-sidebar-ring transition-colors hover:text-sidebar-foreground focus-visible:ring-2",
-        ROW_GLYPH_SLOT_CLASS,
+        SIDEBAR_ROW_GLYPH_SLOT_CLASS,
         COARSE_POINTER_GLYPH_BOX_CLASS,
       )}
     >
@@ -171,7 +172,7 @@ function ManagerLeadingIcon() {
   return (
     <span
       data-manager-leading-icon=""
-      className={cn(ROW_GLYPH_SLOT_CLASS, COARSE_POINTER_GLYPH_BOX_CLASS)}
+      className={cn(SIDEBAR_ROW_GLYPH_SLOT_CLASS, COARSE_POINTER_GLYPH_BOX_CLASS)}
       aria-hidden="true"
     >
       <Icon
@@ -250,7 +251,7 @@ function ThreadTrailingIndicator({
   if (showStatusGlyph) {
     return (
       <span
-        className={cn(ROW_GLYPH_SLOT_CLASS, COARSE_POINTER_GLYPH_BOX_CLASS)}
+        className={cn(SIDEBAR_ROW_GLYPH_SLOT_CLASS, COARSE_POINTER_GLYPH_BOX_CLASS)}
       >
         <ThreadStatusGlyph
           hasPendingInteraction={hasPendingInteraction}
@@ -296,6 +297,9 @@ function ThreadRowComponent({
 }: ThreadRowProps) {
   const [isDropdownActionsOpen, setIsDropdownActionsOpen] = useState(false);
   const [isContextActionsOpen, setIsContextActionsOpen] = useState(false);
+  const setConversationCollapsed = useSetAtom(
+    getThreadConversationCollapsedAtom(thread.id),
+  );
   const hasPendingInteraction = thread.hasPendingInteraction;
   const threadIsBusy = isBusyThread(thread) && !hasPendingInteraction;
   const showUnreadBadge = !hasPendingInteraction && isUnreadDoneThread(thread);
@@ -309,16 +313,16 @@ function ThreadRowComponent({
     isManagedChild || isEnvGroupedChild || isEnvGroupedManagedChild;
   const isUnderEnvHeader = isEnvGroupedChild || isEnvGroupedManagedChild;
   const isManagerCollapsed = managerOptions?.isCollapsed ?? false;
-  const managedChildCount = managerOptions?.managedChildCount ?? 0;
+  const nestedChildCount = managerOptions?.nestedChildCount ?? 0;
   const managedChildActivity =
     managerOptions?.managedChildActivity ?? NO_COLLAPSED_CHILD_ACTIVITY;
-  const hasManagedChildren = managedChildCount > 0;
+  const hasNestedChildren = nestedChildCount > 0;
   // A collapsed manager hides both itself and its children behind one glyph, so
   // it must surface its own status combined with the rolled-up child activity;
   // an expanded manager (and any leaf row) shows its own status, since the
   // children are then visible with their own glyphs.
   const hasHiddenChildren =
-    isManager && isManagerCollapsed && hasManagedChildren;
+    isManager && isManagerCollapsed && hasNestedChildren;
   const trailingHasPendingInteraction = hasHiddenChildren
     ? hasPendingInteraction || managedChildActivity.pending
     : hasPendingInteraction;
@@ -371,13 +375,19 @@ function ThreadRowComponent({
       <NavLink
         to={getThreadRoutePath({ projectId, threadId: thread.id })}
         onClick={() => {
+          // Selecting a thread/agent row restores its conversation: the inverse
+          // of opening an app row, which tucks the conversation into the
+          // collapsed rail so the app fills the view (see ThreadAppRow). Both
+          // write this thread's own collapse flag, so selecting one thread
+          // never disturbs another's full-screen-app state.
+          setConversationCollapsed(false);
           onProjectSelect?.();
         }}
         aria-label={`Open ${threadTitle}`}
         title={`Open ${threadTitle}`}
         className="absolute inset-0 rounded-md outline-none ring-sidebar-ring focus-visible:ring-2"
       />
-      {managerOptions && hasManagedChildren ? (
+      {managerOptions && hasNestedChildren ? (
         <ManagerChevron
           isCollapsed={isManagerCollapsed}
           onToggle={() => {
@@ -404,9 +414,7 @@ function ThreadRowComponent({
           )}
         >
           <span
-            data-sidebar-hover-actions-open={
-              isActionsOpen ? "true" : undefined
-            }
+            data-sidebar-hover-actions-open={isActionsOpen ? "true" : undefined}
             className={cn(
               SIDEBAR_HOVER_ACTIONS_FADE_CLASS,
               "absolute inset-0 flex items-center justify-center",
@@ -421,9 +429,7 @@ function ThreadRowComponent({
             />
           </span>
           <div
-            data-sidebar-hover-actions-open={
-              isActionsOpen ? "true" : undefined
-            }
+            data-sidebar-hover-actions-open={isActionsOpen ? "true" : undefined}
             className={cn(
               SIDEBAR_HOVER_ACTIONS_CLASS,
               "absolute inset-0 z-10 flex items-center justify-end",
@@ -431,7 +437,7 @@ function ThreadRowComponent({
           >
             <ThreadActionsMenu
               thread={thread}
-              showManagerArchiveAll={isManager && managedChildCount > 0}
+              showManagerArchiveAll={isManager && nestedChildCount > 0}
               triggerClassName={cn(
                 "text-muted-foreground hover:bg-sidebar-accent hover:text-sidebar-foreground",
                 COARSE_POINTER_ROW_ACTION_SIZE_CLASS,
@@ -467,7 +473,7 @@ function ThreadRowComponent({
   return (
     <ThreadActionsContextMenu
       thread={thread}
-      showManagerArchiveAll={isManager && managedChildCount > 0}
+      showManagerArchiveAll={isManager && nestedChildCount > 0}
       onOpenChange={setIsContextActionsOpen}
     >
       {row}
diff --git a/apps/app/src/components/sidebar/sidebarRowClasses.ts b/apps/app/src/components/sidebar/sidebarRowClasses.ts
index f6d321b48..cc0522a60 100644
--- a/apps/app/src/components/sidebar/sidebarRowClasses.ts
+++ b/apps/app/src/components/sidebar/sidebarRowClasses.ts
@@ -3,6 +3,15 @@ import { COARSE_POINTER_DOT_SIZE_CLASS } from "@/components/ui/coarse-pointer-si
 export const SIDEBAR_ROW_BASE_CLASS =
   "flex w-full items-center gap-2 rounded-md pr-0 text-sm transition-colors";
 
+/**
+ * Leading-glyph slot shared by sidebar rows (manager icon/chevron, worktree
+ * header icon, app-row icon): centers the glyph and paints it in the subtle
+ * foreground used for non-status row affordances. Call sites add the glyph box
+ * sizing and any positioning they need.
+ */
+export const SIDEBAR_ROW_GLYPH_SLOT_CLASS =
+  "inline-flex shrink-0 items-center justify-center text-subtle-foreground";
+
 /**
  * The unread "attention" dot shared by a leaf thread row and a collapsed
  * worktree header. Inner styling only — call sites own wrapper, positioning,
diff --git a/apps/app/src/components/thread/timeline/ConversationMessageContent.test.tsx b/apps/app/src/components/thread/timeline/ConversationMessageContent.test.tsx
new file mode 100644
index 000000000..b90212d3a
--- /dev/null
+++ b/apps/app/src/components/thread/timeline/ConversationMessageContent.test.tsx
@@ -0,0 +1,54 @@
+// @vitest-environment jsdom
+
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { ConversationMessageContent } from "./ConversationMessageContent";
+
+afterEach(() => {
+  cleanup();
+  vi.clearAllMocks();
+});
+
+describe("ConversationMessageContent", () => {
+  it("routes assistant web links through onOpenLink and prevents default", () => {
+    const onOpenLink = vi.fn(() => true);
+    render(
+      <ConversationMessageContent
+        role="assistant"
+        attachments={null}
+        text="[Docs](https://example.com/docs)"
+        turnRequest={null}
+        onOpenLink={onOpenLink}
+      />,
+    );
+
+    const link = screen.getByRole("link", { name: "Docs" });
+    const notDefaultPrevented = fireEvent.click(link);
+
+    expect(onOpenLink).toHaveBeenCalledTimes(1);
+    expect(onOpenLink).toHaveBeenCalledWith({
+      href: "https://example.com/docs",
+    });
+    expect(notDefaultPrevented).toBe(false);
+  });
+
+  it("renders user message content as plain text with no link surface", () => {
+    render(
+      <ConversationMessageContent
+        role="user"
+        initiator="user"
+        attachments={null}
+        text="Visit https://example.com/docs"
+        turnRequest={{ kind: "message", status: "accepted" }}
+      />,
+    );
+
+    // User messages are plain text (CollapsibleMessageText), never markdown —
+    // so there is no anchor to route, which is why `onOpenLink` is assistant
+    // only and the user variant does not accept it.
+    expect(screen.queryByRole("link")).toBeNull();
+    expect(
+      screen.getByText("Visit https://example.com/docs"),
+    ).toBeTruthy();
+  });
+});
diff --git a/apps/app/src/components/thread/timeline/ConversationMessageContent.tsx b/apps/app/src/components/thread/timeline/ConversationMessageContent.tsx
index f21173b84..03300b7c3 100644
--- a/apps/app/src/components/thread/timeline/ConversationMessageContent.tsx
+++ b/apps/app/src/components/thread/timeline/ConversationMessageContent.tsx
@@ -20,6 +20,7 @@ import { MarkdownPreview } from "../../ui/markdown-preview.js";
 import { Icon } from "@/components/ui/icon.js";
 import { computeMutedPrefixLength } from "./compute-muted-prefix-length.js";
 import type {
+  ThreadTimelineLinkHandler,
   ThreadTimelineLocalFileLinkHandler,
   UserAttachmentImageSrcResolver,
 } from "./types.js";
@@ -42,6 +43,11 @@ export interface ConversationMessageContentUserProps
 export interface ConversationMessageContentAssistantProps
   extends ConversationMessageContentBaseProps {
   role: "assistant";
+  // Assistant content renders through MarkdownPreview, which is the only
+  // surface with clickable links. User messages render as plain text
+  // (CollapsibleMessageText), so this handler lives on the assistant variant
+  // only — never accepted-but-ignored.
+  onOpenLink?: ThreadTimelineLinkHandler;
   turnRequest: null;
 }
 
@@ -497,6 +503,7 @@ function UserConversationMessage({
 
 function AssistantConversationMessage({
   attachmentItems,
+  onOpenLink,
   onOpenLocalFileLink,
   projectId,
   text,
@@ -506,6 +513,7 @@ function AssistantConversationMessage({
       <MarkdownPreview
         content={text}
         normalizeLocalFileLinks={onOpenLocalFileLink !== undefined}
+        onOpenLink={onOpenLink}
         onOpenLocalFileLink={onOpenLocalFileLink}
       />
       <ConversationAttachments
@@ -521,8 +529,13 @@ function AssistantConversationMessage({
 export function ConversationMessageContent(
   props: ConversationMessageContentProps,
 ) {
-  const { attachments, onOpenLocalFileLink, projectId, resolveUserAttachmentImageSrc, text } =
-    props;
+  const {
+    attachments,
+    onOpenLocalFileLink,
+    projectId,
+    resolveUserAttachmentImageSrc,
+    text,
+  } = props;
   const attachmentItems = useMemo(
     () =>
       buildAttachmentItems({
@@ -552,6 +565,7 @@ export function ConversationMessageContent(
     <AssistantConversationMessage
       attachmentItems={attachmentItems}
       attachments={attachments}
+      onOpenLink={props.onOpenLink}
       onOpenLocalFileLink={onOpenLocalFileLink}
       projectId={projectId}
       resolveUserAttachmentImageSrc={resolveUserAttachmentImageSrc}
diff --git a/apps/app/src/components/thread/timeline/ThreadTimelineRows.tsx b/apps/app/src/components/thread/timeline/ThreadTimelineRows.tsx
index 8fb2c9395..34eb4ee37 100644
--- a/apps/app/src/components/thread/timeline/ThreadTimelineRows.tsx
+++ b/apps/app/src/components/thread/timeline/ThreadTimelineRows.tsx
@@ -33,6 +33,7 @@ import {
 } from "./timeline-auto-expand.js";
 import { isRunningThreadRuntimeDisplayStatus } from "./thread-runtime-status.js";
 import type {
+  ThreadTimelineLinkHandler,
   ThreadTimelineLocalFileLinkHandler,
   ThreadTimelineTheme,
   ThreadTimelineUnreadDividerPlacement,
@@ -73,6 +74,7 @@ export interface ThreadTimelineRowsProps {
   initialExpanded?: ReadonlySet<string>;
   loadingTurnSummaryIds: ReadonlySet<string>;
   onLoadTurnSummaryRows: (entry: TimelineTurnRow) => void;
+  onOpenLink?: ThreadTimelineLinkHandler;
   onOpenLocalFileLink?: ThreadTimelineLocalFileLinkHandler;
   onTitleAction?: TimelineTitleActionResolver;
   projectId?: string;
@@ -103,6 +105,7 @@ export interface ThreadTimelineRowsProps {
 interface TimelineRendererStaticContextValue {
   getViewRows: GetTimelineViewRows;
   onLoadTurnSummaryRows: (entry: TimelineTurnRow) => void;
+  onOpenLink: ThreadTimelineLinkHandler | undefined;
   onOpenLocalFileLink: ThreadTimelineLocalFileLinkHandler | undefined;
   onTitleAction: TimelineTitleActionResolver | undefined;
   projectId: string | undefined;
@@ -520,7 +523,7 @@ function timelineRowsListGapClassName(
 }
 
 function ConversationRow({ row }: ConversationRowProps) {
-  const { onOpenLocalFileLink, projectId, resolveUserAttachmentImageSrc } =
+  const { onOpenLink, onOpenLocalFileLink, projectId, resolveUserAttachmentImageSrc } =
     useTimelineRendererStaticContext();
   if (row.role === "user") {
     return (
@@ -539,6 +542,7 @@ function ConversationRow({ row }: ConversationRowProps) {
   return (
     <ConversationMessageContent
       attachments={row.attachments}
+      onOpenLink={onOpenLink}
       onOpenLocalFileLink={onOpenLocalFileLink}
       projectId={projectId}
       resolveUserAttachmentImageSrc={resolveUserAttachmentImageSrc}
@@ -617,6 +621,7 @@ function TimelineExpandableBody({
   row,
 }: TimelineExpandableBodyProps) {
   const {
+    onOpenLink,
     onOpenLocalFileLink,
     projectId,
     resolveUserAttachmentImageSrc,
@@ -696,6 +701,7 @@ function TimelineExpandableBody({
               {row.output.trim().length > 0 ? (
                 <ConversationMessageContent
                   attachments={null}
+                  onOpenLink={onOpenLink}
                   onOpenLocalFileLink={onOpenLocalFileLink}
                   projectId={projectId}
                   resolveUserAttachmentImageSrc={resolveUserAttachmentImageSrc}
@@ -1127,6 +1133,7 @@ function ThreadTimelineRowsForIdentity(props: ThreadTimelineRowsProps) {
     () => ({
       getViewRows,
       onLoadTurnSummaryRows: handleLoadTurnSummaryRows,
+      onOpenLink: props.onOpenLink,
       onOpenLocalFileLink: props.onOpenLocalFileLink,
       onTitleAction: props.onTitleAction,
       projectId,
@@ -1138,6 +1145,7 @@ function ThreadTimelineRowsForIdentity(props: ThreadTimelineRowsProps) {
     [
       getViewRows,
       handleLoadTurnSummaryRows,
+      props.onOpenLink,
       props.onOpenLocalFileLink,
       props.onTitleAction,
       projectId,
diff --git a/apps/app/src/components/thread/timeline/index.ts b/apps/app/src/components/thread/timeline/index.ts
index 5945dadd8..de2d8caba 100644
--- a/apps/app/src/components/thread/timeline/index.ts
+++ b/apps/app/src/components/thread/timeline/index.ts
@@ -22,6 +22,7 @@ export { TimelineFileDiffBlock } from "./TimelineFileDiffBlock.js";
 export { TerminalOutputBlock } from "./TerminalOutputBlock.js";
 export { ToolCallDetailBlock } from "./ToolCallDetailBlock.js";
 export type {
+  ThreadTimelineLinkHandler,
   ThreadTimelineLocalFileLink,
   ThreadTimelineLocalFileLinkHandler,
   ThreadTimelineUnreadDividerPlacement,
diff --git a/apps/app/src/components/thread/timeline/types.ts b/apps/app/src/components/thread/timeline/types.ts
index 6ee2c2856..1d830fcdd 100644
--- a/apps/app/src/components/thread/timeline/types.ts
+++ b/apps/app/src/components/thread/timeline/types.ts
@@ -2,6 +2,7 @@ import type {
   MarkdownPreviewLocalFileLink,
   MarkdownPreviewLocalFileLinkHandler,
 } from "../../ui/markdown-local-file-link.js";
+import type { MarkdownPreviewLinkHandler } from "../../ui/markdown-link.js";
 
 export type ThreadTimelineTheme = "light" | "dark";
 
@@ -10,6 +11,8 @@ export type ThreadTimelineLocalFileLink = MarkdownPreviewLocalFileLink;
 export type ThreadTimelineLocalFileLinkHandler =
   MarkdownPreviewLocalFileLinkHandler;
 
+export type ThreadTimelineLinkHandler = MarkdownPreviewLinkHandler;
+
 export type ThreadTimelineUnreadDividerPlacement =
   | {
       kind: "after-cutoff";
diff --git a/apps/app/src/components/ui/icon.tsx b/apps/app/src/components/ui/icon.tsx
index d0d07da61..f82056269 100644
--- a/apps/app/src/components/ui/icon.tsx
+++ b/apps/app/src/components/ui/icon.tsx
@@ -16,12 +16,15 @@ import {
   ArrowUp01Icon,
   ArrowUp02Icon,
   ArrowUpDoubleIcon,
+  ArrowUpRight01Icon,
   AttachmentIcon,
   AudioWaveIcon,
+  BrowserIcon,
   BubbleChatAddIcon,
   BubbleChatIcon,
   Cancel01Icon,
   CancelCircleIcon,
+  ChartColumnIcon,
   CheckListIcon,
   CheckmarkCircle02Icon,
   CircleIcon,
@@ -31,6 +34,7 @@ import {
   DashedLineCircleIcon,
   Delete02Icon,
   Edit02Icon,
+  File01Icon,
   FileEmpty02Icon,
   FileQuestionMarkIcon,
   FileXIcon,
@@ -40,9 +44,11 @@ import {
   FolderRemoveIcon,
   GitBranchIcon,
   GitMergeIcon,
+  GlobalIcon,
   GridViewIcon,
   InformationCircleIcon,
   LaptopIcon,
+  LockIcon,
   LayoutTwoColumnIcon,
   LayoutTwoRowIcon,
   LinkSquare02Icon,
@@ -57,6 +63,7 @@ import {
   SidebarBottomIcon,
   SidebarLeftIcon,
   SidebarRightIcon,
+  SourceCodeIcon,
   SquareIcon,
   Tick02Icon,
   Unarchive03Icon,
@@ -70,12 +77,15 @@ const ICON_MAP = {
   AlertCircle: AlertCircleIcon,
   AlertTriangle: Alert02Icon,
   AlignLeft: Menu02Icon,
+  AppWindow: BrowserIcon,
   Archive: Archive03Icon,
   ArchiveRestore: Unarchive03Icon,
   ArrowDown: ArrowDown02Icon,
   ArrowRight: ArrowRight02Icon,
   ArrowUp: ArrowUp02Icon,
+  ArrowUpRight: ArrowUpRight01Icon,
   AudioLines: AudioWaveIcon,
+  ChartColumn: ChartColumnIcon,
   Check: Tick02Icon,
   ChevronDown: ArrowDown01Icon,
   ChevronLeft: ArrowLeft01Icon,
@@ -87,6 +97,7 @@ const ICON_MAP = {
   CircleCheck: CheckmarkCircle02Icon,
   CircleDashed: DashedLineCircleIcon,
   CircleX: CancelCircleIcon,
+  Code: SourceCodeIcon,
   Columns2: LayoutTwoColumnIcon,
   Container: CloudIcon,
   Copy: Copy01Icon,
@@ -97,6 +108,7 @@ const ICON_MAP = {
   FileDiff: PlusMinusSquare01Icon,
   File: FileEmpty02Icon,
   FileQuestion: FileQuestionMarkIcon,
+  FileText: File01Icon,
   FileX2: FileXIcon,
   Folder: FolderIcon,
   FolderOpen: Folder02Icon,
@@ -104,10 +116,12 @@ const ICON_MAP = {
   FolderPlus: FolderAddIcon,
   GitBranch: GitBranchIcon,
   GitMerge: GitMergeIcon,
+  Globe: GlobalIcon,
   GridView: GridViewIcon,
   Info: InformationCircleIcon,
   Laptop: LaptopIcon,
   ListTodo: CheckListIcon,
+  Lock: LockIcon,
   Maximize2: ArrowExpand01Icon,
   MessageSquarePlus: BubbleChatAddIcon,
   MessageSquare: BubbleChatIcon,
diff --git a/apps/app/src/components/ui/markdown-link.ts b/apps/app/src/components/ui/markdown-link.ts
new file mode 100644
index 000000000..87ca26a7e
--- /dev/null
+++ b/apps/app/src/components/ui/markdown-link.ts
@@ -0,0 +1,12 @@
+export interface MarkdownPreviewLink {
+  /** The anchor's resolved (sanitized) href. */
+  href: string;
+}
+
+/**
+ * Handler for ordinary (non-local-file) markdown anchor clicks. Return `true`
+ * when the link was handled (e.g. routed into the in-app browser) and anchor
+ * navigation should be prevented. Return `false` to leave the link as a normal
+ * anchor with its default behavior.
+ */
+export type MarkdownPreviewLinkHandler = (link: MarkdownPreviewLink) => boolean;
diff --git a/apps/app/src/components/ui/markdown-preview.test.tsx b/apps/app/src/components/ui/markdown-preview.test.tsx
index a9643277a..7ed57352f 100644
--- a/apps/app/src/components/ui/markdown-preview.test.tsx
+++ b/apps/app/src/components/ui/markdown-preview.test.tsx
@@ -237,6 +237,62 @@ describe("MarkdownPreview", () => {
     expect(link.getAttribute("rel")).toBe("noopener noreferrer");
   });
 
+  it("routes web link clicks through onOpenLink and prevents default when handled", () => {
+    const onOpenLink = vi.fn(() => true);
+    render(
+      <MarkdownPreview
+        content="[Docs](https://example.com/docs)"
+        onOpenLink={onOpenLink}
+      />,
+    );
+
+    const link = screen.getByRole("link", { name: "Docs" });
+    const notDefaultPrevented = fireEvent.click(link);
+
+    expect(onOpenLink).toHaveBeenCalledTimes(1);
+    expect(onOpenLink).toHaveBeenCalledWith({
+      href: "https://example.com/docs",
+    });
+    expect(notDefaultPrevented).toBe(false);
+  });
+
+  it("leaves the web link as a normal anchor when onOpenLink declines", () => {
+    const onOpenLink = vi.fn(() => false);
+    render(
+      <MarkdownPreview
+        content="[Docs](https://example.com/docs)"
+        onOpenLink={onOpenLink}
+      />,
+    );
+
+    const link = screen.getByRole("link", { name: "Docs" });
+    const notDefaultPrevented = fireEvent.click(link);
+
+    expect(onOpenLink).toHaveBeenCalledWith({
+      href: "https://example.com/docs",
+    });
+    expect(notDefaultPrevented).toBe(true);
+    expect(link.getAttribute("href")).toBe("https://example.com/docs");
+    expect(link.getAttribute("target")).toBe("_blank");
+  });
+
+  it("prefers the local-file handler over onOpenLink for local file links", () => {
+    const onOpenLink = vi.fn(() => true);
+    const onOpenLocalFileLink = vi.fn(() => true);
+    render(
+      <MarkdownPreview
+        content="[Open absolute](/workspace/src/app.ts:12)"
+        onOpenLink={onOpenLink}
+        onOpenLocalFileLink={onOpenLocalFileLink}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("link", { name: "Open absolute" }));
+
+    expect(onOpenLocalFileLink).toHaveBeenCalledTimes(1);
+    expect(onOpenLink).not.toHaveBeenCalled();
+  });
+
   it("normalizes local file links only when explicitly requested", () => {
     const content = "[Notes](/Users/me/My Notes/app.md)";
     const withoutNormalization = render(<MarkdownPreview content={content} />);
diff --git a/apps/app/src/components/ui/markdown-preview.tsx b/apps/app/src/components/ui/markdown-preview.tsx
index 2e71dc85c..ae4c4e4ca 100644
--- a/apps/app/src/components/ui/markdown-preview.tsx
+++ b/apps/app/src/components/ui/markdown-preview.tsx
@@ -28,6 +28,7 @@ import {
   parseLocalFileHref,
   type MarkdownPreviewLocalFileLinkHandler,
 } from "./markdown-local-file-link.js";
+import type { MarkdownPreviewLinkHandler } from "./markdown-link.js";
 import { usePreferredTheme, type Theme } from "@/hooks/useTheme";
 import { cn } from "@/lib/utils";
 
@@ -42,18 +43,21 @@ export interface MarkdownPreviewProps {
    * Use with local-file-capable message surfaces, not general markdown content.
    */
   normalizeLocalFileLinks?: boolean;
+  onOpenLink?: MarkdownPreviewLinkHandler;
   onOpenLocalFileLink?: MarkdownPreviewLocalFileLinkHandler;
   urlTransform?: UrlTransform;
 }
 
 interface MarkdownAnchorProps
   extends ComponentPropsWithoutRef<"a">, ExtraProps {
+  onOpenLink?: MarkdownPreviewLinkHandler;
   onOpenLocalFileLink?: MarkdownPreviewLocalFileLinkHandler;
 }
 
 interface BuildMarkdownComponentsArgs {
   preferredTheme: Theme;
   setExpandedImageUrl: ExpandedImageUrlSetter;
+  onOpenLink?: MarkdownPreviewLinkHandler;
   onOpenLocalFileLink?: MarkdownPreviewLocalFileLinkHandler;
 }
 
@@ -121,21 +125,25 @@ const localFileAwareUrlTransform: UrlTransform = (value, key) => {
 function MarkdownAnchor({
   children,
   href,
+  onOpenLink,
   onOpenLocalFileLink,
   ...anchorProps
 }: MarkdownAnchorProps) {
   const localFileLink = onOpenLocalFileLink ? parseLocalFileHref(href) : null;
   const anchorHref = buildLocalFileAnchorHref(localFileLink, href);
-  const handleLocalFileLinkClick = (event: MarkdownAnchorEvent) => {
-    if (!localFileLink || !onOpenLocalFileLink) {
+  const handleAnchorClick = (event: MarkdownAnchorEvent) => {
+    if (localFileLink && onOpenLocalFileLink) {
+      if (onOpenLocalFileLink(localFileLink)) {
+        event.preventDefault();
+      }
       return;
     }
 
-    if (!onOpenLocalFileLink(localFileLink)) {
-      return;
+    // Defer ordinary web-link routing (e.g. opening in the in-app browser) to
+    // the handler, which prevents default only when it takes over the open.
+    if (onOpenLink && href && onOpenLink({ href })) {
+      event.preventDefault();
     }
-
-    event.preventDefault();
   };
 
   return (
@@ -148,7 +156,7 @@ function MarkdownAnchor({
       )}
       target="_blank"
       rel="noopener noreferrer"
-      onClick={handleLocalFileLinkClick}
+      onClick={handleAnchorClick}
     >
       {children}
       {localFileLink ? (
@@ -380,13 +388,18 @@ function resolveMarkdownSourceMedia({
 }
 
 function buildMarkdownComponents({
+  onOpenLink,
   onOpenLocalFileLink,
   preferredTheme,
   setExpandedImageUrl,
 }: BuildMarkdownComponentsArgs): Components {
   function MarkdownLink(props: MarkdownAnchorProps) {
     return (
-      <MarkdownAnchor {...props} onOpenLocalFileLink={onOpenLocalFileLink} />
+      <MarkdownAnchor
+        {...props}
+        onOpenLink={onOpenLink}
+        onOpenLocalFileLink={onOpenLocalFileLink}
+      />
     );
   }
 
@@ -495,6 +508,7 @@ function MarkdownPreviewComponent({
   expandedImageAlt = "Expanded image",
   imageLightboxTitle = "Expanded image preview",
   normalizeLocalFileLinks = false,
+  onOpenLink,
   onOpenLocalFileLink,
   urlTransform,
 }: MarkdownPreviewProps) {
@@ -511,11 +525,12 @@ function MarkdownPreviewComponent({
   const markdownComponents = useMemo(
     () =>
       buildMarkdownComponents({
+        onOpenLink,
         onOpenLocalFileLink,
         preferredTheme,
         setExpandedImageUrl,
       }),
-    [onOpenLocalFileLink, preferredTheme],
+    [onOpenLink, onOpenLocalFileLink, preferredTheme],
   );
 
   return (
diff --git a/apps/app/src/components/ui/overflow-fade.tsx b/apps/app/src/components/ui/overflow-fade.tsx
index 06fc07313..5412591be 100644
--- a/apps/app/src/components/ui/overflow-fade.tsx
+++ b/apps/app/src/components/ui/overflow-fade.tsx
@@ -1,6 +1,6 @@
 import { cn } from "@/lib/utils";
 
-export type OverflowFadePlacement = "above" | "below";
+export type OverflowFadePlacement = "above" | "below" | "left" | "right";
 export type OverflowFadeTone = "background" | "sidebar";
 export type OverflowFadeSize = "default" | "sm";
 
@@ -9,21 +9,26 @@ export interface OverflowFadeProps {
   placement: OverflowFadePlacement;
   tone?: OverflowFadeTone;
   /**
-   * Named height variants so the paired offset can't drift from the height.
-   * `default` is 1.5rem (page-level fades over body content); `sm` is 0.5rem
-   * (sidebar fades where rows are short and a tall fade would mask whole
-   * rows).
+   * Named size variants so the fade thickness stays sanctioned. For vertical
+   * placements (`above`/`below`) the variant drives height + the matching
+   * negative offset; for horizontal placements (`left`/`right`) it drives the
+   * fade width. `default` is 1.5rem (page-level fades over body content); `sm`
+   * is 0.5rem (sidebar fades where rows are short and a tall fade would mask
+   * whole rows).
    */
   size?: OverflowFadeSize;
 }
 
-interface SizeClasses {
+interface VerticalSizeClasses {
   height: string;
   aboveOffset: string;
   belowOffset: string;
 }
 
-const OVERFLOW_FADE_SIZE_CLASSES: Record<OverflowFadeSize, SizeClasses> = {
+const OVERFLOW_FADE_VERTICAL_SIZE_CLASSES: Record<
+  OverflowFadeSize,
+  VerticalSizeClasses
+> = {
   default: {
     height: "h-6",
     aboveOffset: "-top-6",
@@ -36,15 +41,58 @@ const OVERFLOW_FADE_SIZE_CLASSES: Record<OverflowFadeSize, SizeClasses> = {
   },
 };
 
+const OVERFLOW_FADE_HORIZONTAL_WIDTH_CLASS: Record<OverflowFadeSize, string> = {
+  default: "w-6",
+  sm: "w-2",
+};
+
+function isHorizontalPlacement(placement: OverflowFadePlacement): boolean {
+  return placement === "left" || placement === "right";
+}
+
 function getOverflowFadeToneClass(
   placement: OverflowFadePlacement,
   tone: OverflowFadeTone,
 ): string {
-  if (placement === "above") {
-    return tone === "background" ? "to-background" : "to-sidebar";
+  // The fade always lands on the surface side: `above`/`left` fade *to* the
+  // surface (content first), `below`/`right` fade *from* the surface.
+  const startsAtSurface = placement === "below" || placement === "right";
+  if (startsAtSurface) {
+    return tone === "background" ? "from-background" : "from-sidebar";
+  }
+
+  return tone === "background" ? "to-background" : "to-sidebar";
+}
+
+function getOverflowFadeGradientClass(
+  placement: OverflowFadePlacement,
+): string {
+  switch (placement) {
+    case "above":
+      return "bg-gradient-to-b from-transparent";
+    case "below":
+      return "bg-gradient-to-b to-transparent";
+    case "left":
+      return "bg-gradient-to-l from-transparent";
+    case "right":
+      return "bg-gradient-to-r from-transparent";
+  }
+}
+
+function getOverflowFadeLayoutClasses(
+  placement: OverflowFadePlacement,
+  size: OverflowFadeSize,
+): string {
+  if (isHorizontalPlacement(placement)) {
+    const widthClass = OVERFLOW_FADE_HORIZONTAL_WIDTH_CLASS[size];
+    const sideClass = placement === "left" ? "left-0" : "right-0";
+    return cn("inset-y-0", sideClass, widthClass);
   }
 
-  return tone === "background" ? "from-background" : "from-sidebar";
+  const sizeClasses = OVERFLOW_FADE_VERTICAL_SIZE_CLASSES[size];
+  const offsetClass =
+    placement === "above" ? sizeClasses.aboveOffset : sizeClasses.belowOffset;
+  return cn("inset-x-0", sizeClasses.height, offsetClass);
 }
 
 export function OverflowFade({
@@ -53,24 +101,15 @@ export function OverflowFade({
   tone = "background",
   size = "default",
 }: OverflowFadeProps) {
-  const sizeClasses = OVERFLOW_FADE_SIZE_CLASSES[size];
-  const offsetClass =
-    placement === "above" ? sizeClasses.aboveOffset : sizeClasses.belowOffset;
-  const gradientClass =
-    placement === "above"
-      ? "bg-gradient-to-b from-transparent"
-      : "bg-gradient-to-b to-transparent";
-
   return (
     <div
       aria-hidden
       data-overflow-fade={placement}
       data-overflow-fade-tone={tone}
       className={cn(
-        "pointer-events-none absolute inset-x-0",
-        sizeClasses.height,
-        offsetClass,
-        gradientClass,
+        "pointer-events-none absolute",
+        getOverflowFadeLayoutClasses(placement, size),
+        getOverflowFadeGradientClass(placement),
         getOverflowFadeToneClass(placement, tone),
         className,
       )}
diff --git a/apps/app/src/components/ui/theme.css b/apps/app/src/components/ui/theme.css
index dd99e050e..c70a803d6 100644
--- a/apps/app/src/components/ui/theme.css
+++ b/apps/app/src/components/ui/theme.css
@@ -50,6 +50,10 @@
   --color-chart-3: var(--chart-3);
   --color-chart-4: var(--chart-4);
   --color-chart-5: var(--chart-5);
+  --color-ft-md: var(--ft-md);
+  --color-ft-html: var(--ft-html);
+  --color-ft-report: var(--ft-report);
+  --color-ft-code: var(--ft-code);
   --color-sidebar: var(--sidebar);
   --color-sidebar-foreground: var(--sidebar-foreground);
   --color-sidebar-primary: var(--sidebar-primary);
@@ -330,6 +334,12 @@
   --chart-3: oklch(0.6534 0 0);
   --chart-4: oklch(0.7316 0 0);
   --chart-5: oklch(0.8078 0 0);
+  /* File-type accents for the New Tab launcher's Recent rows. Quiet ink shown
+   * at full strength on the glyph/label and washed to ~15% on the chip fill. */
+  --ft-md: oklch(0.52 0.13 252);
+  --ft-html: oklch(0.55 0.11 178);
+  --ft-report: oklch(0.58 0.13 62);
+  --ft-code: oklch(0.53 0.15 305);
   --sidebar: oklch(0.937 0 0);
   --sidebar-foreground: oklch(0.3211 0 0);
   --sidebar-primary: oklch(0.4891 0 0);
@@ -450,6 +460,11 @@
   --chart-3: oklch(0.5452 0 0);
   --chart-4: oklch(0.4604 0 0);
   --chart-5: oklch(0.3715 0 0);
+  /* Lifted for legibility on the dark recessed panel surface. */
+  --ft-md: oklch(0.74 0.11 252);
+  --ft-html: oklch(0.76 0.1 178);
+  --ft-report: oklch(0.8 0.12 70);
+  --ft-code: oklch(0.76 0.12 305);
   --sidebar: oklch(0.24 0 0);
   --sidebar-foreground: oklch(0.8853 0 0);
   --sidebar-primary: oklch(0.7058 0 0);
diff --git a/apps/app/src/hooks/queries/thread-queries.ts b/apps/app/src/hooks/queries/thread-queries.ts
index a8abed15c..84ea5a189 100644
--- a/apps/app/src/hooks/queries/thread-queries.ts
+++ b/apps/app/src/hooks/queries/thread-queries.ts
@@ -639,6 +639,14 @@ export function useThreadStorageFilePreview(
   });
 }
 
+/**
+ * Thread apps rarely change within a session and are read from both the sidebar
+ * (a query per manager row) and the thread detail view. A shared default stale
+ * window lets navigation reuse a recent sidebar fetch instead of refetching on
+ * detail mount; callers can still override `staleTime` explicitly.
+ */
+const THREAD_APPS_STALE_TIME_MS = 30_000;
+
 export function useThreadApps(id: string, options?: QueryOptions) {
   return useQuery<AppSummary[]>({
     queryKey: threadAppsQueryKey(id),
@@ -647,7 +655,7 @@ export function useThreadApps(id: string, options?: QueryOptions) {
     enabled: (options?.enabled ?? true) && Boolean(id),
     refetchOnMount: options?.refetchOnMount ?? true,
     refetchOnWindowFocus: false,
-    staleTime: options?.staleTime,
+    staleTime: options?.staleTime ?? THREAD_APPS_STALE_TIME_MS,
   });
 }
 
diff --git a/apps/app/src/hooks/useDesktopThemeSync.test.tsx b/apps/app/src/hooks/useDesktopThemeSync.test.tsx
new file mode 100644
index 000000000..bd610c89b
--- /dev/null
+++ b/apps/app/src/hooks/useDesktopThemeSync.test.tsx
@@ -0,0 +1,124 @@
+// @vitest-environment jsdom
+
+import { act, cleanup, renderHook } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type {
+  BbDesktopApi,
+  BbDesktopInfo,
+  BbDesktopInfoChangeHandler,
+  BbDesktopTheme,
+} from "@bb/server-contract";
+import { createNoopDesktopBrowserApi } from "@/test/bb-desktop-test-utils";
+
+interface DesktopApiStub {
+  api: BbDesktopApi;
+  setThemeCalls: BbDesktopTheme[];
+}
+
+function createDesktopApiStub(): DesktopApiStub {
+  const setThemeCalls: BbDesktopTheme[] = [];
+  const initialInfo: BbDesktopInfo = {
+    lastCheckedAt: null,
+    latestVersion: null,
+    pendingVersion: null,
+    platform: "macos",
+    updateAvailable: false,
+    updateDownloaded: false,
+    version: "0.0.1",
+  };
+  const api: BbDesktopApi = {
+    browser: createNoopDesktopBrowserApi(),
+    get lastCheckedAt() {
+      return initialInfo.lastCheckedAt;
+    },
+    get latestVersion() {
+      return initialInfo.latestVersion;
+    },
+    get pendingVersion() {
+      return initialInfo.pendingVersion;
+    },
+    platform: "macos",
+    get updateAvailable() {
+      return initialInfo.updateAvailable;
+    },
+    get updateDownloaded() {
+      return initialInfo.updateDownloaded;
+    },
+    get version() {
+      return initialInfo.version;
+    },
+    async checkForUpdates() {
+      return initialInfo;
+    },
+    async getInfo() {
+      return initialInfo;
+    },
+    async installUpdate() {
+      // no-op
+    },
+    onChange(_listener: BbDesktopInfoChangeHandler) {
+      return () => {
+        // no-op
+      };
+    },
+    setTheme(theme: BbDesktopTheme): void {
+      setThemeCalls.push(theme);
+    },
+  };
+  return { api, setThemeCalls };
+}
+
+async function loadModules() {
+  const { useDesktopThemeSync } = await import("./useDesktopThemeSync");
+  const { setPreferredTheme } = await import("./useTheme");
+  return { setPreferredTheme, useDesktopThemeSync };
+}
+
+afterEach(() => {
+  cleanup();
+  delete window.bbDesktop;
+  window.localStorage.clear();
+  vi.resetModules();
+});
+
+describe("useDesktopThemeSync", () => {
+  beforeEach(() => {
+    delete window.bbDesktop;
+    window.localStorage.clear();
+  });
+
+  it("pushes the resolved theme to the desktop bridge on mount", async () => {
+    const desktopStub = createDesktopApiStub();
+    window.bbDesktop = desktopStub.api;
+
+    const { useDesktopThemeSync } = await loadModules();
+    renderHook(() => useDesktopThemeSync());
+
+    expect(desktopStub.setThemeCalls).toEqual(["light"]);
+  });
+
+  it("pushes the new resolved theme when the preference changes", async () => {
+    const desktopStub = createDesktopApiStub();
+    window.bbDesktop = desktopStub.api;
+
+    const { setPreferredTheme, useDesktopThemeSync } = await loadModules();
+    renderHook(() => useDesktopThemeSync());
+
+    expect(desktopStub.setThemeCalls).toEqual(["light"]);
+
+    act(() => {
+      setPreferredTheme("dark");
+    });
+
+    expect(desktopStub.setThemeCalls).toEqual(["light", "dark"]);
+  });
+
+  it("no-ops when the desktop bridge is absent", async () => {
+    const { useDesktopThemeSync } = await loadModules();
+    expect(window.bbDesktop).toBeUndefined();
+
+    expect(() =>
+      renderHook(() => useDesktopThemeSync()),
+    ).not.toThrow();
+  });
+});
diff --git a/apps/app/src/hooks/useDesktopThemeSync.ts b/apps/app/src/hooks/useDesktopThemeSync.ts
new file mode 100644
index 000000000..100b181e1
--- /dev/null
+++ b/apps/app/src/hooks/useDesktopThemeSync.ts
@@ -0,0 +1,17 @@
+import { useEffect } from "react";
+import { getBbDesktopInfo } from "@/lib/bb-desktop";
+import { usePreferredTheme } from "./useTheme";
+
+/**
+ * Push the renderer-resolved theme to the Electron main process so the
+ * NSWindow chrome (traffic lights + inactive title-bar) follows bb's theme
+ * rather than the OS appearance. Mounts once at the app root; safely no-ops
+ * in the web build where `window.bbDesktop` is undefined.
+ */
+export function useDesktopThemeSync(): void {
+  const theme = usePreferredTheme();
+  useEffect(() => {
+    const desktopApi = getBbDesktopInfo();
+    desktopApi?.setTheme(theme);
+  }, [theme]);
+}
diff --git a/apps/app/src/hooks/useThreadCreationOptions.ts b/apps/app/src/hooks/useThreadCreationOptions.ts
index f87f86a60..8b35b071e 100644
--- a/apps/app/src/hooks/useThreadCreationOptions.ts
+++ b/apps/app/src/hooks/useThreadCreationOptions.ts
@@ -22,7 +22,7 @@ import {
 } from "@/lib/browser-storage";
 import { useRootComposeReuseEnvironment } from "@/lib/root-compose-selection";
 import { getProviderIconInfo } from "@/lib/provider-icon";
-import { reconcileReasoningLevel } from "@/lib/reasoning-level-reconcile";
+import { reconcileReasoningLevel } from "@bb/domain";
 import { useSystemExecutionOptions } from "./queries/system-queries";
 
 const MODEL_STORAGE_KEY = "bb.promptbox.model";
@@ -577,7 +577,7 @@ export function useThreadCreationOptions(
     }
     // Carry the user's previous reasoning level across model switches when
     // the new model supports it; otherwise pick the closest supported level
-    // (tie-break upward). See reasoning-level-reconcile for the full policy.
+    // (tie-break upward). See reconcileReasoningLevel in @bb/domain for the policy.
     return reconcileReasoningLevel(
       rawReasoningLevel,
       reasoningOptions.map((option) => option.value),
diff --git a/apps/app/src/hooks/useUpdateAvailableToast.test.tsx b/apps/app/src/hooks/useUpdateAvailableToast.test.tsx
index fe8a1601a..689038646 100644
--- a/apps/app/src/hooks/useUpdateAvailableToast.test.tsx
+++ b/apps/app/src/hooks/useUpdateAvailableToast.test.tsx
@@ -9,6 +9,7 @@ import type {
   BbDesktopInfoChangeHandler,
   SystemVersionResponse,
 } from "@bb/server-contract";
+import { createNoopDesktopBrowserApi } from "@/test/bb-desktop-test-utils";
 import { createQueryClientTestHarness } from "@/test/queryClientTestHarness";
 
 interface CapturedToastButton {
@@ -170,6 +171,7 @@ function createDesktopApiStub(initialInfo: BbDesktopInfo): DesktopApiStub {
   let installUpdateCalls = 0;
   const listeners = new Set<BbDesktopInfoChangeHandler>();
   const api: BbDesktopApi = {
+    browser: createNoopDesktopBrowserApi(),
     get lastCheckedAt() {
       return currentInfo.lastCheckedAt;
     },
@@ -204,6 +206,9 @@ function createDesktopApiStub(initialInfo: BbDesktopInfo): DesktopApiStub {
         listeners.delete(listener);
       };
     },
+    setTheme() {
+      // no-op
+    },
   };
   return {
     api,
diff --git a/apps/app/src/lib/bb-desktop.ts b/apps/app/src/lib/bb-desktop.ts
index 81a3baddf..f93e2c122 100644
--- a/apps/app/src/lib/bb-desktop.ts
+++ b/apps/app/src/lib/bb-desktop.ts
@@ -1,9 +1,20 @@
-import type { BbDesktopApi } from "@bb/server-contract";
+import type { BbDesktopApi, BbDesktopBrowserApi } from "@bb/server-contract";
 
 // The macOS traffic-light cluster sits in a fixed strip on the left of the
 // frameless window. In-flow chrome clears it with left padding; the pinned
 // sidebar trigger clears it with a matching left offset. Keep the `pl-*` and
 // `left-*` steps in sync so the trigger lands just right of the lights.
+//
+// Two reserve steps, one target — the leading content lands just right of the
+// pinned sidebar trigger (`left-20`), not merely past the lights:
+//  - RESERVE (`pl-20`): the full reserve, applied directly by a surface whose
+//    left padding replaces its base inset. The secondary-panel header uses it —
+//    it sits right of the 36px conversation rail, so the trigger overhangs the
+//    header's left edge and the leading tab has to clear the trigger, not just
+//    the lights.
+//  - COLLAPSED_HEADER_RESERVE (`pl-16`): the page header's remainder, added on
+//    top of its own `px-4` (16px) so the two sum to the full reserve and the
+//    trigger spacer lands under the pinned trigger.
 export const MACOS_TRAFFIC_LIGHT_RESERVE_CLASS = "pl-20";
 export const MACOS_TRAFFIC_LIGHT_RESERVE_OFFSET_CLASS = "left-20";
 export const MACOS_COLLAPSED_HEADER_RESERVE_CLASS = "pl-16";
@@ -28,3 +39,17 @@ export function shouldUseMacosDesktopChrome(
 ): boolean {
   return desktopInfo?.platform === "macos";
 }
+
+/**
+ * The desktop browser control surface, or `null` on the web build (where
+ * `window.bbDesktop` is undefined). Also tolerates a desktop build whose
+ * preload predates the browser surface. This is the single gate for the
+ * desktop-only browser tab entry and the `WebContentsView` host.
+ */
+export function getDesktopBrowserApi(): BbDesktopBrowserApi | null {
+  return getBbDesktopInfo()?.browser ?? null;
+}
+
+export function isDesktopBrowserAvailable(): boolean {
+  return getDesktopBrowserApi() !== null;
+}
diff --git a/apps/app/src/lib/browser-history.ts b/apps/app/src/lib/browser-history.ts
new file mode 100644
index 000000000..05b36f868
--- /dev/null
+++ b/apps/app/src/lib/browser-history.ts
@@ -0,0 +1,112 @@
+import { useCallback } from "react";
+import { atom, useAtom } from "jotai";
+import { atomWithStorage } from "jotai/utils";
+import { atomFamily } from "jotai-family";
+import { z } from "zod";
+import { createLocalStorageSyncStorage } from "./browser-storage";
+
+// Per-thread "recently visited" list for the browser new-tab screen. Kept in
+// localStorage (there is no server user-settings store) and capped; deduped by
+// URL so revisiting a page moves it to the front rather than duplicating it.
+
+const BROWSER_HISTORY_STORAGE_PREFIX = "bb.thread.browserHistory";
+const BROWSER_HISTORY_STORAGE_VERSION = "1";
+const BROWSER_HISTORY_MAX_ENTRIES = 24;
+
+const browserHistoryEntrySchema = z
+  .object({
+    url: z.string().min(1),
+    title: z.string().min(1).nullable(),
+    visitedAt: z.number().int().nonnegative(),
+  })
+  .strict();
+const browserHistorySchema = z.array(browserHistoryEntrySchema);
+
+export type BrowserHistoryEntry = z.infer<typeof browserHistoryEntrySchema>;
+
+interface RecordBrowserVisitArgs {
+  url: string;
+  title: string | null;
+}
+
+export interface BrowserHistoryController {
+  entries: readonly BrowserHistoryEntry[];
+  recordVisit: (args: RecordBrowserVisitArgs) => void;
+  clear: () => void;
+}
+
+const EMPTY_BROWSER_HISTORY: readonly BrowserHistoryEntry[] = [];
+
+const browserHistoryStorage = createLocalStorageSyncStorage<
+  readonly BrowserHistoryEntry[]
+>({
+  parse: (storedValue, initialValue) => {
+    if (storedValue === null) {
+      return initialValue;
+    }
+    try {
+      const parsed = browserHistorySchema.safeParse(JSON.parse(storedValue));
+      return parsed.success ? parsed.data : initialValue;
+    } catch {
+      return initialValue;
+    }
+  },
+  serialize: (value) => JSON.stringify(value),
+});
+
+function getBrowserHistoryStorageKey(threadId: string): string {
+  return `${BROWSER_HISTORY_STORAGE_PREFIX}-${encodeURIComponent(
+    threadId.trim(),
+  )}-${BROWSER_HISTORY_STORAGE_VERSION}`;
+}
+
+const disabledBrowserHistoryAtom =
+  atom<readonly BrowserHistoryEntry[]>(EMPTY_BROWSER_HISTORY);
+
+const browserHistoryAtomFamily = atomFamily((threadId: string) =>
+  atomWithStorage<readonly BrowserHistoryEntry[]>(
+    getBrowserHistoryStorageKey(threadId),
+    EMPTY_BROWSER_HISTORY,
+    browserHistoryStorage,
+    { getOnInit: true },
+  ),
+);
+
+function hasThreadId(threadId: string | null | undefined): threadId is string {
+  return (
+    threadId !== null && threadId !== undefined && threadId.trim().length > 0
+  );
+}
+
+export function useBrowserHistory(
+  threadId: string | null | undefined,
+): BrowserHistoryController {
+  const historyAtom = hasThreadId(threadId)
+    ? browserHistoryAtomFamily(threadId)
+    : disabledBrowserHistoryAtom;
+  const [entries, setEntries] = useAtom(historyAtom);
+
+  const recordVisit = useCallback(
+    ({ url, title }: RecordBrowserVisitArgs) => {
+      if (url.length === 0) {
+        return;
+      }
+      setEntries((current) => {
+        const next: BrowserHistoryEntry = {
+          url,
+          title,
+          visitedAt: Date.now(),
+        };
+        const withoutDuplicate = current.filter((entry) => entry.url !== url);
+        return [next, ...withoutDuplicate].slice(0, BROWSER_HISTORY_MAX_ENTRIES);
+      });
+    },
+    [setEntries],
+  );
+
+  const clear = useCallback(() => {
+    setEntries(EMPTY_BROWSER_HISTORY);
+  }, [setEntries]);
+
+  return { entries, recordVisit, clear };
+}
diff --git a/apps/app/src/lib/browser-url.test.ts b/apps/app/src/lib/browser-url.test.ts
new file mode 100644
index 000000000..05a6d0e46
--- /dev/null
+++ b/apps/app/src/lib/browser-url.test.ts
@@ -0,0 +1,92 @@
+import { describe, expect, it } from "vitest";
+import {
+  getBrowserUrlHost,
+  getBrowserUrlSecurity,
+  looksLikeUrl,
+  resolveBrowserAddressInput,
+} from "./browser-url";
+
+describe("looksLikeUrl", () => {
+  it("treats explicit http(s) schemes as URLs", () => {
+    expect(looksLikeUrl("https://example.com")).toBe(true);
+    expect(looksLikeUrl("http://example.com/path?q=1")).toBe(true);
+    expect(looksLikeUrl("HTTPS://EXAMPLE.COM")).toBe(true);
+  });
+
+  it("treats bare host.tld and localhost shapes as URLs", () => {
+    expect(looksLikeUrl("example.com")).toBe(true);
+    expect(looksLikeUrl("news.ycombinator.com")).toBe(true);
+    expect(looksLikeUrl("example.com:8080/path")).toBe(true);
+    expect(looksLikeUrl("localhost:3000")).toBe(true);
+    expect(looksLikeUrl("127.0.0.1:38886")).toBe(true);
+  });
+
+  it("treats queries and non-http schemes as searches, not URLs", () => {
+    expect(looksLikeUrl("how to center a div")).toBe(false);
+    expect(looksLikeUrl("electron webcontentsview")).toBe(false);
+    expect(looksLikeUrl("single")).toBe(false);
+    expect(looksLikeUrl("javascript:alert(1)")).toBe(false);
+    expect(looksLikeUrl("file:///etc/passwd")).toBe(false);
+    expect(looksLikeUrl("data:text/html,<h1>x</h1>")).toBe(false);
+    expect(looksLikeUrl("")).toBe(false);
+  });
+});
+
+describe("resolveBrowserAddressInput", () => {
+  it("returns null for blank input", () => {
+    expect(resolveBrowserAddressInput("")).toBeNull();
+    expect(resolveBrowserAddressInput("   ")).toBeNull();
+  });
+
+  it("preserves an explicit http(s) URL", () => {
+    expect(resolveBrowserAddressInput("https://example.com")).toBe(
+      "https://example.com",
+    );
+    expect(resolveBrowserAddressInput("  http://example.com/x  ")).toBe(
+      "http://example.com/x",
+    );
+  });
+
+  it("prepends https:// to a bare host", () => {
+    expect(resolveBrowserAddressInput("example.com")).toBe(
+      "https://example.com",
+    );
+    expect(resolveBrowserAddressInput("localhost:3000")).toBe(
+      "https://localhost:3000",
+    );
+  });
+
+  it("builds a search URL for non-URL input", () => {
+    expect(resolveBrowserAddressInput("hello world")).toBe(
+      "https://www.google.com/search?q=hello%20world",
+    );
+  });
+
+  it("routes a non-http scheme to search rather than navigating to it", () => {
+    expect(resolveBrowserAddressInput("javascript:alert(1)")).toBe(
+      "https://www.google.com/search?q=javascript%3Aalert(1)",
+    );
+  });
+});
+
+describe("getBrowserUrlSecurity", () => {
+  it("classifies the scheme", () => {
+    expect(getBrowserUrlSecurity("https://example.com")).toBe("secure");
+    expect(getBrowserUrlSecurity("http://example.com")).toBe("insecure");
+    expect(getBrowserUrlSecurity("")).toBe("none");
+    expect(getBrowserUrlSecurity("not a url")).toBe("none");
+  });
+});
+
+describe("getBrowserUrlHost", () => {
+  it("returns the host for a parseable URL", () => {
+    expect(getBrowserUrlHost("https://news.ycombinator.com/item?id=1")).toBe(
+      "news.ycombinator.com",
+    );
+  });
+
+  it("falls back to the raw value when unparseable", () => {
+    expect(getBrowserUrlHost("")).toBe("");
+    expect(getBrowserUrlHost("not a url")).toBe("not a url");
+  });
+});
diff --git a/apps/app/src/lib/browser-url.ts b/apps/app/src/lib/browser-url.ts
new file mode 100644
index 000000000..15522a9a2
--- /dev/null
+++ b/apps/app/src/lib/browser-url.ts
@@ -0,0 +1,79 @@
+// Address-bar / new-tab search input parsing for the browser surface. Pure and
+// dependency-free so the URL-vs-search heuristic can be unit tested directly.
+
+const SEARCH_ENGINE_URL = "https://www.google.com/search";
+const HTTP_SCHEME_PATTERN = /^https?:\/\//i;
+const LOCALHOST_PATTERN = /^localhost(:\d+)?(\/|$)/i;
+// host.tld (one or more dotted labels), optional port, optional path/query.
+const HOSTNAME_PATTERN = /^[a-z0-9-]+(\.[a-z0-9-]+)+(:\d+)?(\/\S*)?$/i;
+
+/**
+ * Whether the trimmed input should be treated as a URL to navigate to (vs. a
+ * search query). Only an explicit `http(s)://` scheme or a bare `host.tld` /
+ * `localhost` shape counts — anything with whitespace, or a non-http scheme
+ * such as `file:`/`javascript:`/`data:`, is treated as a search.
+ */
+export function looksLikeUrl(input: string): boolean {
+  const trimmed = input.trim();
+  if (trimmed.length === 0 || /\s/u.test(trimmed)) {
+    return false;
+  }
+  if (HTTP_SCHEME_PATTERN.test(trimmed)) {
+    return true;
+  }
+  return LOCALHOST_PATTERN.test(trimmed) || HOSTNAME_PATTERN.test(trimmed);
+}
+
+function buildSearchUrl(query: string): string {
+  return `${SEARCH_ENGINE_URL}?q=${encodeURIComponent(query)}`;
+}
+
+function normalizeUrl(input: string): string {
+  return HTTP_SCHEME_PATTERN.test(input) ? input : `https://${input}`;
+}
+
+/**
+ * Resolve an address-bar input to a navigable `http(s)` URL, or a default
+ * search-engine query URL when it does not look like a URL. Returns `null` for
+ * blank input (nothing to navigate to).
+ */
+export function resolveBrowserAddressInput(rawInput: string): string | null {
+  const input = rawInput.trim();
+  if (input.length === 0) {
+    return null;
+  }
+  return looksLikeUrl(input) ? normalizeUrl(input) : buildSearchUrl(input);
+}
+
+/** Security posture of a loaded URL, for the address-bar indicator. */
+export type BrowserUrlSecurity = "secure" | "insecure" | "none";
+
+export function getBrowserUrlSecurity(url: string): BrowserUrlSecurity {
+  if (url.length === 0) {
+    return "none";
+  }
+  try {
+    const protocol = new URL(url).protocol;
+    if (protocol === "https:") {
+      return "secure";
+    }
+    if (protocol === "http:") {
+      return "insecure";
+    }
+  } catch {
+    return "none";
+  }
+  return "none";
+}
+
+/** A compact label for a URL — the hostname when parseable, else the raw URL. */
+export function getBrowserUrlHost(url: string): string {
+  if (url.length === 0) {
+    return "";
+  }
+  try {
+    return new URL(url).host;
+  } catch {
+    return url;
+  }
+}
diff --git a/apps/app/src/lib/fixed-panel-tabs-state.ts b/apps/app/src/lib/fixed-panel-tabs-state.ts
index 88e9d3e49..39ad99a13 100644
--- a/apps/app/src/lib/fixed-panel-tabs-state.ts
+++ b/apps/app/src/lib/fixed-panel-tabs-state.ts
@@ -1,4 +1,8 @@
 import { z } from "zod";
+import {
+  BB_DESKTOP_BROWSER_MAX_TITLE_LENGTH,
+  BB_DESKTOP_BROWSER_MAX_URL_LENGTH,
+} from "@bb/server-contract";
 import {
   areEnvironmentFilePreviewSourcesEqual,
   type EnvironmentFilePreviewSource,
@@ -83,6 +87,14 @@ const appFixedPanelTabSchema = z
     kind: z.literal("app"),
   })
   .strict();
+const browserFixedPanelTabSchema = z
+  .object({
+    id: z.string().min(1),
+    kind: z.literal("browser"),
+    title: z.string().min(1).max(BB_DESKTOP_BROWSER_MAX_TITLE_LENGTH).nullable(),
+    url: z.string().max(BB_DESKTOP_BROWSER_MAX_URL_LENGTH),
+  })
+  .strict();
 const newTabFixedPanelTabSchema = z
   .object({
     id: z.literal(NEW_TAB_TAB_ID),
@@ -103,6 +115,7 @@ const secondaryFixedPanelTabSchema = z.discriminatedUnion("kind", [
   hostFilePreviewFixedPanelTabSchema,
   threadStorageFilePreviewFixedPanelTabSchema,
   appFixedPanelTabSchema,
+  browserFixedPanelTabSchema,
   newTabFixedPanelTabSchema,
 ]);
 const bottomFixedPanelTabSchema = z.discriminatedUnion("kind", [
@@ -186,6 +199,21 @@ export interface AppFixedPanelTab {
   kind: "app";
 }
 
+/**
+ * A web browser tab hosted by a native Electron `WebContentsView` (desktop
+ * only). `url` is the last-loaded page (empty string = the new-tab screen) and
+ * `title` is the last title pushed from the view, so the tab pill keeps its
+ * label while inactive and across reloads. Favicons are intentionally not
+ * persisted/rendered (untrusted remote URL); the pill shows a generic globe.
+ * Live loading state is not persisted — it is held by the active tab's chrome.
+ */
+export interface BrowserFixedPanelTab {
+  id: string;
+  kind: "browser";
+  title: string | null;
+  url: string;
+}
+
 export interface NewTabFixedPanelTab {
   id: typeof NEW_TAB_TAB_ID;
   kind: "new-tab";
@@ -204,6 +232,7 @@ export type SecondaryFixedPanelTab =
   | HostFilePreviewFixedPanelTab
   | ThreadStorageFilePreviewFixedPanelTab
   | AppFixedPanelTab
+  | BrowserFixedPanelTab
   | NewTabFixedPanelTab;
 
 /**
@@ -216,6 +245,7 @@ export type SecondaryFileFixedPanelTab =
   | HostFilePreviewFixedPanelTab
   | ThreadStorageFilePreviewFixedPanelTab
   | AppFixedPanelTab
+  | BrowserFixedPanelTab
   | NewTabFixedPanelTab;
 
 export type BottomFixedPanelTab = TerminalFixedPanelTab;
@@ -290,6 +320,10 @@ interface CreateAppFixedPanelTabArgs {
   appId: string;
 }
 
+interface CreateBrowserFixedPanelTabArgs {
+  url: string;
+}
+
 interface CreateWorkspaceFilePreviewFixedPanelTabArgs {
   environmentId: string | null;
   tab: WorkspaceFileTabState;
@@ -376,6 +410,22 @@ export function createAppFixedPanelTab({
   };
 }
 
+/**
+ * Browser tabs get a fresh unique id per instance — the URL is mutable (it
+ * changes on every navigation), so it cannot serve as a stable identity the way
+ * an app id or file path does.
+ */
+export function createBrowserFixedPanelTab({
+  url,
+}: CreateBrowserFixedPanelTabArgs): BrowserFixedPanelTab {
+  return {
+    id: `browser:${crypto.randomUUID()}`,
+    kind: "browser",
+    title: null,
+    url,
+  };
+}
+
 export function createNewTabFixedPanelTab(): NewTabFixedPanelTab {
   return {
     id: NEW_TAB_TAB_ID,
@@ -648,6 +698,8 @@ export function areFixedPanelTabsEquivalent(
       );
     case "app":
       return b.kind === "app" && a.appId === b.appId;
+    case "browser":
+      return b.kind === "browser" && a.url === b.url && a.title === b.title;
     case "thread-storage-file-preview":
       return (
         b.kind === "thread-storage-file-preview" &&
diff --git a/apps/app/src/lib/iframe-drag-guard.ts b/apps/app/src/lib/iframe-drag-guard.ts
new file mode 100644
index 000000000..268566d62
--- /dev/null
+++ b/apps/app/src/lib/iframe-drag-guard.ts
@@ -0,0 +1,2 @@
+export const IFRAME_POINTER_EVENTS_NONE_CLASS =
+  "[&_iframe]:pointer-events-none";
diff --git a/apps/app/src/lib/in-app-browser-link-preference.test.ts b/apps/app/src/lib/in-app-browser-link-preference.test.ts
new file mode 100644
index 000000000..351505b0b
--- /dev/null
+++ b/apps/app/src/lib/in-app-browser-link-preference.test.ts
@@ -0,0 +1,78 @@
+import { describe, expect, it } from "vitest";
+import {
+  isHttpOrHttpsUrl,
+  resolveChatLinkOpenTarget,
+} from "./in-app-browser-link-preference";
+
+describe("isHttpOrHttpsUrl", () => {
+  it("accepts http and https URLs", () => {
+    expect(isHttpOrHttpsUrl("http://example.com")).toBe(true);
+    expect(isHttpOrHttpsUrl("https://example.com/docs?q=1#frag")).toBe(true);
+    expect(isHttpOrHttpsUrl("HTTPS://EXAMPLE.COM")).toBe(true);
+  });
+
+  it("rejects non-http schemes, relative paths, and protocol-relative URLs", () => {
+    expect(isHttpOrHttpsUrl("mailto:hi@example.com")).toBe(false);
+    expect(isHttpOrHttpsUrl("file:///Users/me/app.ts")).toBe(false);
+    expect(isHttpOrHttpsUrl("/projects/abc")).toBe(false);
+    expect(isHttpOrHttpsUrl("#section")).toBe(false);
+    expect(isHttpOrHttpsUrl("//example.com")).toBe(false);
+    expect(isHttpOrHttpsUrl("javascript:alert(1)")).toBe(false);
+  });
+});
+
+describe("resolveChatLinkOpenTarget", () => {
+  it("routes http(s) links into the in-app browser on desktop when enabled", () => {
+    expect(
+      resolveChatLinkOpenTarget({
+        desktopBrowserAvailable: true,
+        openInAppBrowser: true,
+        url: "https://example.com/docs",
+      }),
+    ).toBe("in-app-browser");
+    expect(
+      resolveChatLinkOpenTarget({
+        desktopBrowserAvailable: true,
+        openInAppBrowser: true,
+        url: "http://example.com",
+      }),
+    ).toBe("in-app-browser");
+  });
+
+  it("keeps default behavior when the preference is off", () => {
+    expect(
+      resolveChatLinkOpenTarget({
+        desktopBrowserAvailable: true,
+        openInAppBrowser: false,
+        url: "https://example.com/docs",
+      }),
+    ).toBe("default");
+  });
+
+  it("keeps default behavior when the desktop browser is unavailable (web)", () => {
+    expect(
+      resolveChatLinkOpenTarget({
+        desktopBrowserAvailable: false,
+        openInAppBrowser: true,
+        url: "https://example.com/docs",
+      }),
+    ).toBe("default");
+  });
+
+  it("never routes non-http links, even on desktop with the preference on", () => {
+    for (const url of [
+      "mailto:hi@example.com",
+      "file:///Users/me/app.ts",
+      "/projects/abc",
+      "#section",
+    ]) {
+      expect(
+        resolveChatLinkOpenTarget({
+          desktopBrowserAvailable: true,
+          openInAppBrowser: true,
+          url,
+        }),
+      ).toBe("default");
+    }
+  });
+});
diff --git a/apps/app/src/lib/in-app-browser-link-preference.ts b/apps/app/src/lib/in-app-browser-link-preference.ts
new file mode 100644
index 000000000..69a9e1bbe
--- /dev/null
+++ b/apps/app/src/lib/in-app-browser-link-preference.ts
@@ -0,0 +1,63 @@
+import { useAtom } from "jotai";
+import { atomWithStorage } from "jotai/utils";
+import { createJsonLocalStorage } from "./browser-storage";
+
+export const OPEN_LINKS_IN_APP_BROWSER_STORAGE_KEY = "bb.openLinksInAppBrowser";
+
+/**
+ * Default ON: the feature routes chat links into the desktop in-app browser
+ * instead of the external OS browser. Users can turn it OFF to fall back to the
+ * external-open behavior. The preference only has an effect on desktop builds
+ * (see {@link resolveChatLinkOpenTarget}); on web there is no in-app browser.
+ */
+export const OPEN_LINKS_IN_APP_BROWSER_DEFAULT = true;
+
+export type ChatLinkOpenTarget = "in-app-browser" | "default";
+
+interface ResolveChatLinkOpenTargetArgs {
+  /** Whether the desktop in-app browser surface is available in this build. */
+  desktopBrowserAvailable: boolean;
+  /** The persisted user preference. */
+  openInAppBrowser: boolean;
+  /** The link's resolved href. */
+  url: string;
+}
+
+// Only ordinary web links are routed into the in-app browser. mailto:, file://,
+// relative app routes, and other non-http schemes keep their default behavior.
+const HTTP_URL_SCHEME_PATTERN = /^https?:\/\//iu;
+
+export function isHttpOrHttpsUrl(url: string): boolean {
+  return HTTP_URL_SCHEME_PATTERN.test(url);
+}
+
+/**
+ * Decides where a chat link click should open. Returns `"in-app-browser"` only
+ * when the desktop browser surface exists, the user preference is on, and the
+ * href is a normal http(s) URL. Every other case returns `"default"`, leaving
+ * the anchor's existing behavior (external open for web links, internal routing
+ * for relative links, mail client for mailto, etc.) untouched.
+ */
+export function resolveChatLinkOpenTarget({
+  desktopBrowserAvailable,
+  openInAppBrowser,
+  url,
+}: ResolveChatLinkOpenTargetArgs): ChatLinkOpenTarget {
+  if (desktopBrowserAvailable && openInAppBrowser && isHttpOrHttpsUrl(url)) {
+    return "in-app-browser";
+  }
+  return "default";
+}
+
+const openLinksInAppBrowserStorage = createJsonLocalStorage<boolean>();
+
+export const openLinksInAppBrowserPreferenceAtom = atomWithStorage<boolean>(
+  OPEN_LINKS_IN_APP_BROWSER_STORAGE_KEY,
+  OPEN_LINKS_IN_APP_BROWSER_DEFAULT,
+  openLinksInAppBrowserStorage,
+  { getOnInit: true },
+);
+
+export function useOpenLinksInAppBrowserPreference() {
+  return useAtom(openLinksInAppBrowserPreferenceAtom);
+}
diff --git a/apps/app/src/lib/relative-time.test.ts b/apps/app/src/lib/relative-time.test.ts
new file mode 100644
index 000000000..4ab9c62c1
--- /dev/null
+++ b/apps/app/src/lib/relative-time.test.ts
@@ -0,0 +1,57 @@
+import { describe, expect, it } from "vitest";
+import { formatRelativeTime } from "./relative-time";
+
+const NOW = 1_700_000_000_000;
+const MINUTE = 60 * 1000;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+
+describe("formatRelativeTime", () => {
+  it("collapses sub-minute and future gaps to 'just now'", () => {
+    expect(formatRelativeTime({ timestamp: NOW, now: NOW })).toBe("just now");
+    expect(formatRelativeTime({ timestamp: NOW - 30 * 1000, now: NOW })).toBe(
+      "just now",
+    );
+    // A small clock skew must never render a negative duration.
+    expect(formatRelativeTime({ timestamp: NOW + 5 * 1000, now: NOW })).toBe(
+      "just now",
+    );
+  });
+
+  it("renders minutes and hours", () => {
+    expect(formatRelativeTime({ timestamp: NOW - 2 * MINUTE, now: NOW })).toBe(
+      "2m ago",
+    );
+    expect(formatRelativeTime({ timestamp: NOW - 59 * MINUTE, now: NOW })).toBe(
+      "59m ago",
+    );
+    expect(formatRelativeTime({ timestamp: NOW - 3 * HOUR, now: NOW })).toBe(
+      "3h ago",
+    );
+  });
+
+  it("renders Yesterday, days, and weeks", () => {
+    expect(formatRelativeTime({ timestamp: NOW - 25 * HOUR, now: NOW })).toBe(
+      "Yesterday",
+    );
+    expect(formatRelativeTime({ timestamp: NOW - 2 * DAY, now: NOW })).toBe(
+      "2d ago",
+    );
+    expect(formatRelativeTime({ timestamp: NOW - 6 * DAY, now: NOW })).toBe(
+      "6d ago",
+    );
+    expect(formatRelativeTime({ timestamp: NOW - 14 * DAY, now: NOW })).toBe(
+      "2w ago",
+    );
+  });
+
+  it("falls back to a short absolute date beyond a few weeks", () => {
+    const timestamp = NOW - 60 * DAY;
+    expect(formatRelativeTime({ timestamp, now: NOW })).toBe(
+      new Date(timestamp).toLocaleDateString(undefined, {
+        month: "short",
+        day: "numeric",
+      }),
+    );
+  });
+});
diff --git a/apps/app/src/lib/relative-time.ts b/apps/app/src/lib/relative-time.ts
new file mode 100644
index 000000000..b075b45ca
--- /dev/null
+++ b/apps/app/src/lib/relative-time.ts
@@ -0,0 +1,44 @@
+export interface FormatRelativeTimeArgs {
+  /** The past instant being described, in epoch milliseconds. */
+  timestamp: number;
+  /** The reference "now", in epoch milliseconds. Passed in for testability. */
+  now: number;
+}
+
+const MINUTE_MS = 60 * 1000;
+const HOUR_MS = 60 * MINUTE_MS;
+const DAY_MS = 24 * HOUR_MS;
+const WEEK_MS = 7 * DAY_MS;
+
+/**
+ * Formats a past timestamp as a compact relative label ("just now", "2m ago",
+ * "3h ago", "Yesterday", "2d ago", "3w ago"), falling back to a short absolute
+ * date once the gap exceeds a few weeks. Future timestamps collapse to
+ * "just now" so a small clock skew never renders a negative duration.
+ */
+export function formatRelativeTime({ timestamp, now }: FormatRelativeTimeArgs): string {
+  const diffMs = now - timestamp;
+  if (diffMs < MINUTE_MS) {
+    return "just now";
+  }
+  if (diffMs < HOUR_MS) {
+    return `${Math.floor(diffMs / MINUTE_MS)}m ago`;
+  }
+  if (diffMs < DAY_MS) {
+    return `${Math.floor(diffMs / HOUR_MS)}h ago`;
+  }
+  const days = Math.floor(diffMs / DAY_MS);
+  if (days === 1) {
+    return "Yesterday";
+  }
+  if (diffMs < WEEK_MS) {
+    return `${days}d ago`;
+  }
+  if (diffMs < 5 * WEEK_MS) {
+    return `${Math.floor(diffMs / WEEK_MS)}w ago`;
+  }
+  return new Date(timestamp).toLocaleDateString(undefined, {
+    month: "short",
+    day: "numeric",
+  });
+}
diff --git a/apps/app/src/test/bb-desktop-test-utils.ts b/apps/app/src/test/bb-desktop-test-utils.ts
new file mode 100644
index 000000000..666f3e6b0
--- /dev/null
+++ b/apps/app/src/test/bb-desktop-test-utils.ts
@@ -0,0 +1,26 @@
+import type { BbDesktopBrowserApi } from "@bb/server-contract";
+
+/**
+ * A no-op {@link BbDesktopBrowserApi} for tests that build a full
+ * `BbDesktopApi` stub. The browser control surface is exercised separately; here
+ * it just needs to satisfy the contract.
+ */
+export function createNoopDesktopBrowserApi(): BbDesktopBrowserApi {
+  return {
+    attach() {},
+    detach() {},
+    navigate() {},
+    goBack() {},
+    goForward() {},
+    reload() {},
+    stop() {},
+    setBounds() {},
+    setVisible() {},
+    onState() {
+      return () => {};
+    },
+    onOpenTab() {
+      return () => {};
+    },
+  };
+}
diff --git a/apps/app/src/test/setup.ts b/apps/app/src/test/setup.ts
index e321bc930..fed3eb776 100644
--- a/apps/app/src/test/setup.ts
+++ b/apps/app/src/test/setup.ts
@@ -3,11 +3,13 @@
 /**
  * Shared vitest setup.
  *
- * jsdom doesn't implement `window.matchMedia`, `ResizeObserver`, or
- * `IntersectionObserver`. Several of our hooks and detail blocks
- * (`useMediaQuery`, `useHoverPopover`, `ToolCallDetailBlock` overflow probe,
- * `GitDiffCard` sticky-header sentinel) reach for them during mount; without
- * polyfills they throw in every test that indirectly renders such a component.
+ * jsdom doesn't implement `window.matchMedia`, `ResizeObserver`,
+ * `IntersectionObserver`, or `Element.scrollIntoView`. Several of our hooks and
+ * detail blocks (`useMediaQuery`, `useHoverPopover`, `ToolCallDetailBlock`
+ * overflow probe, `GitDiffCard` sticky-header sentinel,
+ * `SecondaryPanelTabStrip` active-tab auto-scroll) reach for them during mount;
+ * without polyfills they throw in every test that indirectly renders such a
+ * component.
  */
 if (typeof window !== "undefined" && typeof jsdom !== "undefined") {
   /**
@@ -46,6 +48,13 @@ if (typeof window !== "undefined" && !window.ResizeObserver) {
   };
 }
 
+if (
+  typeof Element !== "undefined" &&
+  typeof Element.prototype.scrollIntoView !== "function"
+) {
+  Element.prototype.scrollIntoView = function scrollIntoViewPolyfill() {};
+}
+
 if (typeof window !== "undefined" && !window.IntersectionObserver) {
   class IntersectionObserverPolyfill {
     readonly root: Element | Document | null = null;
diff --git a/apps/app/src/views/AppSettingsView.test.tsx b/apps/app/src/views/AppSettingsView.test.tsx
index 6f11393fc..a8898c783 100644
--- a/apps/app/src/views/AppSettingsView.test.tsx
+++ b/apps/app/src/views/AppSettingsView.test.tsx
@@ -2,7 +2,10 @@
 
 import { cleanup, fireEvent, render, screen } from "@testing-library/react";
 import { afterEach, describe, expect, it, vi } from "vitest";
-import { LocalOpenTargetSettingsSection } from "./AppSettingsView";
+import {
+  InAppBrowserLinkSettingsSection,
+  LocalOpenTargetSettingsSection,
+} from "./AppSettingsView";
 
 describe("LocalOpenTargetSettingsSection", () => {
   afterEach(() => {
@@ -45,3 +48,42 @@ describe("LocalOpenTargetSettingsSection", () => {
     expect(message.getAttribute("data-disabled")).toBeNull();
   });
 });
+
+describe("InAppBrowserLinkSettingsSection", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("reflects the enabled preference and toggles it off", () => {
+    const onEnabledChange = vi.fn();
+    render(
+      <InAppBrowserLinkSettingsSection enabled onEnabledChange={onEnabledChange} />,
+    );
+
+    const toggle = screen.getByRole("switch", {
+      name: "Open links in the in-app browser",
+    });
+    expect(toggle.getAttribute("aria-checked")).toBe("true");
+
+    fireEvent.click(toggle);
+    expect(onEnabledChange).toHaveBeenCalledWith(false);
+  });
+
+  it("reflects the disabled preference and toggles it on", () => {
+    const onEnabledChange = vi.fn();
+    render(
+      <InAppBrowserLinkSettingsSection
+        enabled={false}
+        onEnabledChange={onEnabledChange}
+      />,
+    );
+
+    const toggle = screen.getByRole("switch", {
+      name: "Open links in the in-app browser",
+    });
+    expect(toggle.getAttribute("aria-checked")).toBe("false");
+
+    fireEvent.click(toggle);
+    expect(onEnabledChange).toHaveBeenCalledWith(true);
+  });
+});
diff --git a/apps/app/src/views/AppSettingsView.tsx b/apps/app/src/views/AppSettingsView.tsx
index 78d7ef461..7e5628bb6 100644
--- a/apps/app/src/views/AppSettingsView.tsx
+++ b/apps/app/src/views/AppSettingsView.tsx
@@ -7,6 +7,7 @@ import type {
 } from "@bb/host-daemon-contract";
 import { Button } from "@/components/ui/button.js";
 import { Icon } from "@/components/ui/icon.js";
+import { Switch } from "@/components/ui/switch.js";
 import { COARSE_POINTER_ICON_SIZE_CLASS } from "@/components/ui/coarse-pointer-sizing.js";
 import {
   DropdownMenu,
@@ -41,6 +42,8 @@ import {
 import { useHostDaemon } from "@/hooks/useHostDaemon";
 import { useEffectiveHosts } from "@/hooks/queries/effective-hosts";
 import { useWorkspaceOpenTargets } from "@/hooks/useWorkspaceOpenTargets";
+import { isDesktopBrowserAvailable } from "@/lib/bb-desktop";
+import { useOpenLinksInAppBrowserPreference } from "@/lib/in-app-browser-link-preference";
 import {
   invalidateHostDeleteDependentQueries,
   invalidateHostAvailabilityQueries,
@@ -101,6 +104,11 @@ export interface LocalOpenTargetSettingsSectionProps {
   targets: WorkspaceOpenTarget[];
 }
 
+export interface InAppBrowserLinkSettingsSectionProps {
+  enabled: boolean;
+  onEnabledChange: (enabled: boolean) => void;
+}
+
 const THEME_PREFERENCE_OPTIONS: ReadonlyArray<ThemePreferenceOption> = [
   { label: "System", value: "system" },
   { label: "Light", value: "light" },
@@ -257,6 +265,28 @@ export function LocalOpenTargetSettingsSection({
   );
 }
 
+const IN_APP_BROWSER_LINK_SETTING_LABEL = "Open links in the in-app browser";
+
+export function InAppBrowserLinkSettingsSection({
+  enabled,
+  onEnabledChange,
+}: InAppBrowserLinkSettingsSectionProps) {
+  return (
+    <SettingsSection title="Browser">
+      <SettingsWithControl
+        label={IN_APP_BROWSER_LINK_SETTING_LABEL}
+        description="Open http and https links from chat in the in-app browser panel instead of your default browser."
+      >
+        <Switch
+          checked={enabled}
+          onCheckedChange={onEnabledChange}
+          aria-label={IN_APP_BROWSER_LINK_SETTING_LABEL}
+        />
+      </SettingsWithControl>
+    </SettingsSection>
+  );
+}
+
 export function AppSettingsView() {
   const themePreference = useThemePreference();
   const { hasDaemon } = useHostDaemon();
@@ -266,6 +296,11 @@ export function AppSettingsView() {
   const [directoryTargetId, setDirectoryTargetId] =
     useWorkspaceOpenTargetPreference();
   const [fileTargetId, setFileTargetId] = useFileOpenTargetPreference();
+  const [openLinksInAppBrowser, setOpenLinksInAppBrowser] =
+    useOpenLinksInAppBrowserPreference();
+  // The in-app browser only exists on desktop; hide the toggle entirely on web,
+  // where it would have no effect.
+  const [desktopBrowserAvailable] = useState(isDesktopBrowserAvailable);
   const { data: hosts = [], isLoading: hostsLoading } = useEffectiveHosts();
   const queryClient = useQueryClient();
 
@@ -442,6 +477,13 @@ export function AppSettingsView() {
           targets={workspaceOpenTargets}
         />
 
+        {desktopBrowserAvailable ? (
+          <InAppBrowserLinkSettingsSection
+            enabled={openLinksInAppBrowser}
+            onEnabledChange={setOpenLinksInAppBrowser}
+          />
+        ) : null}
+
         <div className="space-y-2">
           <SettingsSection title="Hosts">
             {hostsLoading ? (
diff --git a/apps/app/src/views/RootComposeView.test.tsx b/apps/app/src/views/RootComposeView.test.tsx
index 7e0c746b4..f6492e0ad 100644
--- a/apps/app/src/views/RootComposeView.test.tsx
+++ b/apps/app/src/views/RootComposeView.test.tsx
@@ -1,19 +1,300 @@
 // @vitest-environment jsdom
 
-import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import { Suspense } from "react";
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
 import { MemoryRouter, Route, Routes, useLocation } from "react-router-dom";
-import { afterEach, describe, expect, it } from "vitest";
-import { PERSONAL_PROJECT_ID } from "@bb/domain";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  PERSONAL_PROJECT_ID,
+  type Host,
+  type ThreadWithRuntime,
+} from "@bb/domain";
+import type {
+  ManagerTemplatesResponse,
+  ProjectWithThreadsResponse,
+  SidebarBootstrapResponse,
+  SystemConfigResponse,
+  SystemExecutionOptionsResponse,
+} from "@bb/server-contract";
+import { createQueryClientTestHarness } from "@/test/queryClientTestHarness";
+import { installFetchRoutes, jsonResponse } from "@/test/http-test-utils";
+import { getThreadRoutePath } from "@/lib/app-route-paths";
+import { QuickCreateProjectProvider } from "@/hooks/useQuickCreateProject";
 import { RootComposeRoute } from "./RootComposeView";
 
+type HostIdCandidate = string | null | undefined;
+type ThreadOverrides = Partial<ThreadWithRuntime>;
+type ProjectWithThreadsOverrides = Partial<ProjectWithThreadsResponse>;
+
+vi.mock("@/hooks/useHostDaemon", () => ({
+  useHostDaemon: () => ({
+    localHostId: "host_local",
+    hasDaemon: true,
+    supportsNativeFolderPicker: false,
+    platform: null,
+    isLocalHost: (hostId: HostIdCandidate) => hostId === "host_local",
+    pickFolder: null,
+  }),
+}));
+
+const ROOT_COMPOSE_DRAFT_STORAGE_KEY =
+  "bb.promptbox.contents-proj_personal-draft-3";
+const ROOT_COMPOSE_MODE_STORAGE_KEY = "bb.promptbox.new-thread-mode";
+
+interface RootComposeFetchRoutesOptions {
+  createThreadShouldFail?: boolean;
+  createdThread?: ThreadWithRuntime;
+  hiredManager?: ThreadWithRuntime;
+}
+
+interface RootComposeFetchRequests {
+  createThread: Request[];
+  hireManager: Request[];
+}
+
+const localHost: Host = {
+  id: "host_local",
+  name: "This Mac",
+  type: "persistent",
+  status: "connected",
+  lastSeenAt: 100,
+  createdAt: 0,
+  updatedAt: 100,
+};
+
+const systemExecutionOptions = {
+  providers: [
+    {
+      id: "codex",
+      displayName: "Codex",
+      available: true,
+      capabilities: {
+        supportsArchive: true,
+        supportsRename: true,
+        supportsServiceTier: false,
+        supportsUserQuestion: true,
+        supportedPermissionModes: ["full", "workspace-write"],
+      },
+    },
+  ],
+  models: [
+    {
+      id: "gpt-5",
+      model: "gpt-5",
+      displayName: "GPT-5",
+      description: "GPT-5",
+      supportedReasoningEfforts: [
+        { reasoningEffort: "medium", description: "Medium" },
+      ],
+      defaultReasoningEffort: "medium",
+      isDefault: true,
+    },
+  ],
+  selectedOnlyModels: [],
+  modelLoadError: null,
+} satisfies SystemExecutionOptionsResponse;
+
+const managerTemplates = {
+  templates: [],
+  activeName: "default",
+} satisfies ManagerTemplatesResponse;
+
+const systemConfig = {
+  featureFlags: {
+    askUserQuestion: false,
+    terminals: false,
+  },
+  hostDaemonPort: null,
+  voiceTranscriptionEnabled: false,
+} satisfies SystemConfigResponse;
+
 function LocationCapture() {
   const location = useLocation();
   return <div data-testid="pathname">{location.pathname}</div>;
 }
 
+function RootComposeWithLocation() {
+  return (
+    <>
+      <RootComposeRoute />
+      <LocationCapture />
+    </>
+  );
+}
+
+function makeThread(overrides: ThreadOverrides = {}): ThreadWithRuntime {
+  return {
+    archivedAt: null,
+    automationId: null,
+    createdAt: 1,
+    deletedAt: null,
+    environmentId: "environment-1",
+    id: "thr_created",
+    lastReadAt: null,
+    latestAttentionAt: 1,
+    parentThreadId: null,
+    pinnedAt: null,
+    projectId: PERSONAL_PROJECT_ID,
+    providerId: "codex",
+    runtime: {
+      displayStatus: "idle",
+      hostReconnectGraceExpiresAt: null,
+    },
+    status: "idle",
+    stopRequestedAt: null,
+    title: "Created thread",
+    titleFallback: "Created thread",
+    type: "standard",
+    updatedAt: 1,
+    ...overrides,
+  };
+}
+
+function makeProjectWithThreadsResponse(
+  overrides: ProjectWithThreadsOverrides = {},
+): ProjectWithThreadsResponse {
+  return {
+    createdAt: 1,
+    id: PERSONAL_PROJECT_ID,
+    kind: "personal",
+    name: "Personal",
+    sources: [],
+    threads: [],
+    updatedAt: 1,
+    ...overrides,
+  };
+}
+
+function buildSidebarBootstrapResponse(): SidebarBootstrapResponse {
+  return {
+    projects: [],
+    personalProject: makeProjectWithThreadsResponse(),
+  };
+}
+
+function seedRootComposeDraft(text: string): void {
+  window.localStorage.setItem(
+    ROOT_COMPOSE_DRAFT_STORAGE_KEY,
+    JSON.stringify({ text, attachments: [] }),
+  );
+}
+
+function isEnabledButton(element: HTMLElement): boolean {
+  return element instanceof HTMLButtonElement && !element.disabled;
+}
+
+function installRootComposeFetchRoutes(
+  options: RootComposeFetchRoutesOptions = {},
+): RootComposeFetchRequests {
+  const requests: RootComposeFetchRequests = {
+    createThread: [],
+    hireManager: [],
+  };
+  installFetchRoutes([
+    {
+      pathname: "/api/v1/sidebar-bootstrap",
+      handler: () => jsonResponse(buildSidebarBootstrapResponse()),
+    },
+    {
+      pathname: "/api/v1/projects",
+      handler: () => jsonResponse([]),
+    },
+    {
+      pathname: `/api/v1/projects/${PERSONAL_PROJECT_ID}/prompt-history`,
+      handler: () => jsonResponse([]),
+    },
+    {
+      pathname: `/api/v1/projects/${PERSONAL_PROJECT_ID}/default-execution-options`,
+      handler: () => jsonResponse(null),
+    },
+    {
+      pathname: "/api/v1/threads",
+      handler: () => jsonResponse([]),
+    },
+    {
+      method: "POST",
+      pathname: "/api/v1/threads",
+      handler: (request) => {
+        requests.createThread.push(request);
+        if (options.createThreadShouldFail) {
+          return jsonResponse({ error: "create failed" }, { status: 500 });
+        }
+        return jsonResponse(options.createdThread ?? makeThread(), {
+          status: 201,
+        });
+      },
+    },
+    {
+      pathname: "/api/v1/hosts",
+      handler: () => jsonResponse([localHost]),
+    },
+    {
+      pathname: "/api/v1/manager-templates",
+      handler: () => jsonResponse(managerTemplates),
+    },
+    {
+      pathname: "/api/v1/system/execution-options",
+      handler: () => jsonResponse(systemExecutionOptions),
+    },
+    {
+      pathname: "/api/v1/system/config",
+      handler: () => jsonResponse(systemConfig),
+    },
+    {
+      method: "POST",
+      pathname: `/api/v1/projects/${PERSONAL_PROJECT_ID}/managers`,
+      handler: (request) => {
+        requests.hireManager.push(request);
+        return jsonResponse(
+          options.hiredManager ??
+            makeThread({
+              id: "thr_manager",
+              title: "Manager",
+              titleFallback: "Manager",
+              type: "manager",
+            }),
+          { status: 201 },
+        );
+      },
+    },
+  ]);
+  return requests;
+}
+
+function renderRootComposeRoute(): void {
+  const { wrapper: QueryClientWrapper } = createQueryClientTestHarness();
+
+  render(
+    <QueryClientWrapper>
+      <Suspense fallback={null}>
+        <MemoryRouter initialEntries={["/"]}>
+          <QuickCreateProjectProvider>
+            <Routes>
+              <Route path="/" element={<RootComposeWithLocation />} />
+              <Route path="/threads/:threadId" element={<LocationCapture />} />
+              <Route
+                path="/projects/:projectId/threads/:threadId"
+                element={<LocationCapture />}
+              />
+            </Routes>
+          </QuickCreateProjectProvider>
+        </MemoryRouter>
+      </Suspense>
+    </QueryClientWrapper>,
+  );
+}
+
 afterEach(() => {
   cleanup();
   window.localStorage.clear();
+  vi.unstubAllGlobals();
+  vi.clearAllMocks();
 });
 
 describe("RootComposeRoute", () => {
@@ -35,4 +316,78 @@ describe("RootComposeRoute", () => {
       PERSONAL_PROJECT_ID,
     );
   });
+
+  it("navigates to a successfully created new thread", async () => {
+    const thread = makeThread({ id: "thr_new_thread" });
+    installRootComposeFetchRoutes({ createdThread: thread });
+    seedRootComposeDraft("Open a debugging thread");
+    renderRootComposeRoute();
+
+    await screen.findByRole("textbox");
+    const submitButton = screen.getByTitle("Submit (Enter)");
+    await waitFor(() => {
+      expect(isEnabledButton(submitButton)).toBe(true);
+    });
+
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(screen.getByTestId("pathname").textContent).toBe(
+        getThreadRoutePath({
+          projectId: thread.projectId,
+          threadId: thread.id,
+        }),
+      );
+    });
+  });
+
+  it("navigates to a successfully hired manager thread", async () => {
+    const manager = makeThread({
+      id: "thr_new_manager",
+      title: "Manager",
+      titleFallback: "Manager",
+      type: "manager",
+    });
+    installRootComposeFetchRoutes({ hiredManager: manager });
+    window.localStorage.setItem(ROOT_COMPOSE_MODE_STORAGE_KEY, "manager");
+    renderRootComposeRoute();
+
+    await screen.findByRole("textbox");
+    const submitButton = screen.getByTitle("Submit (Enter)");
+    await waitFor(() => {
+      expect(isEnabledButton(submitButton)).toBe(true);
+    });
+
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(screen.getByTestId("pathname").textContent).toBe(
+        getThreadRoutePath({
+          projectId: manager.projectId,
+          threadId: manager.id,
+        }),
+      );
+    });
+  });
+
+  it("does not navigate when new thread creation fails", async () => {
+    const requests = installRootComposeFetchRoutes({
+      createThreadShouldFail: true,
+    });
+    seedRootComposeDraft("Open a debugging thread");
+    renderRootComposeRoute();
+
+    await screen.findByRole("textbox");
+    const submitButton = screen.getByTitle("Submit (Enter)");
+    await waitFor(() => {
+      expect(isEnabledButton(submitButton)).toBe(true);
+    });
+
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(requests.createThread).toHaveLength(1);
+    });
+    expect(screen.getByTestId("pathname").textContent).toBe("/");
+  });
 });
diff --git a/apps/app/src/views/RootComposeView.tsx b/apps/app/src/views/RootComposeView.tsx
index 90c012e93..6fdf1e379 100644
--- a/apps/app/src/views/RootComposeView.tsx
+++ b/apps/app/src/views/RootComposeView.tsx
@@ -47,6 +47,7 @@ import { getProjectScopedStorageKey } from "@/lib/project-scoped-storage";
 import { promptDraftToInput } from "@/lib/prompt-draft";
 import { getThreadDisplayTitle } from "@/lib/thread-title";
 import {
+  getThreadRoutePath,
   getRootComposeRoutePath,
   isProjectlessProjectId,
 } from "@/lib/app-route-paths";
@@ -670,7 +671,7 @@ export function RootComposeView() {
         return;
       }
       try {
-        await hireProjectManager.mutateAsync({
+        const thread = await hireProjectManager.mutateAsync({
           projectId,
           providerId: selectedProviderId,
           model: selectedThreadModel,
@@ -683,6 +684,12 @@ export function RootComposeView() {
           ...(submittedInput.length > 0 ? { input: submittedInput } : {}),
         });
         promptDraft.clearIfCurrentMatches(submittedDraft);
+        navigate(
+          getThreadRoutePath({
+            projectId: thread.projectId,
+            threadId: thread.id,
+          }),
+        );
       } catch {
         // Global mutation error handling already surfaced the failure.
       }
@@ -698,7 +705,7 @@ export function RootComposeView() {
     }
 
     try {
-      await createThread.mutateAsync({
+      const thread = await createThread.mutateAsync({
         input: submittedInput,
         projectId,
         providerId: selectedProviderId,
@@ -709,6 +716,12 @@ export function RootComposeView() {
         environment: selectedEnvironment,
       });
       promptDraft.clearIfCurrentMatches(submittedDraft);
+      navigate(
+        getThreadRoutePath({
+          projectId: thread.projectId,
+          threadId: thread.id,
+        }),
+      );
     } catch {
       // Global mutation error handling already surfaced the failure.
     }
@@ -719,6 +732,7 @@ export function RootComposeView() {
     hireProjectManager,
     managerDefaultExecutionOptionsQuery.isLoading,
     mode,
+    navigate,
     permissionMode,
     projectId,
     promptDraft,
diff --git a/apps/app/src/views/thread-detail/ThreadDetailHeader.test.tsx b/apps/app/src/views/thread-detail/ThreadDetailHeader.test.tsx
new file mode 100644
index 000000000..b82bd8c0a
--- /dev/null
+++ b/apps/app/src/views/thread-detail/ThreadDetailHeader.test.tsx
@@ -0,0 +1,74 @@
+// @vitest-environment jsdom
+
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { ThreadDetailHeader } from "./ThreadDetailHeader";
+
+vi.mock("@/components/ui/hooks/use-compact-viewport.js", () => ({
+  useIsCompactViewport: () => false,
+}));
+
+vi.mock("@/components/ui/sidebar.js", () => ({
+  SidebarTrigger: () => null,
+  useIsSidebarShowing: () => true,
+}));
+
+interface RenderHeaderOverrides {
+  isSecondaryPanelOpen?: boolean;
+  onToggleSecondaryPanel?: () => void;
+}
+
+function renderHeader(overrides: RenderHeaderOverrides = {}) {
+  const noop = () => {};
+  const props = {
+    actionsMenu: null,
+    activeTerminalCount: 0,
+    isManagedThread: false,
+    isManagerThread: false,
+    isSecondaryPanelOpen: overrides.isSecondaryPanelOpen ?? false,
+    isTerminalPanelOpen: false,
+    isThreadGitActionPending: false,
+    onOpenThreadGitAction: noop,
+    onToggleSecondaryPanel: overrides.onToggleSecondaryPanel ?? noop,
+    onToggleTerminalPanel: noop,
+    showTerminalPanelToggle: false,
+    threadHeaderGitActions: [],
+    threadTitle: "Test thread",
+  };
+  return render(<ThreadDetailHeader {...props} />);
+}
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("ThreadDetailHeader panel toggle", () => {
+  it("opens the secondary panel from the closed state", () => {
+    const onToggleSecondaryPanel = vi.fn();
+    renderHeader({
+      isSecondaryPanelOpen: false,
+      onToggleSecondaryPanel,
+    });
+
+    const button = screen.getByRole("button", { name: "Show panel" });
+    expect(button.getAttribute("aria-expanded")).toBe("false");
+    // Closed state renders the recognizable panel icon, not a chevron, so it
+    // reads as "open the right side panel".
+    expect(button.querySelector("[data-icon='PanelRight']")).not.toBeNull();
+
+    fireEvent.click(button);
+    expect(onToggleSecondaryPanel).toHaveBeenCalledTimes(1);
+  });
+
+  it("drops the panel toggle from the conversation header once the panel is open", () => {
+    // Open state moves the expand/collapse-conversation toggle into the panel
+    // header, so the conversation header no longer carries a panel affordance.
+    renderHeader({ isSecondaryPanelOpen: true });
+
+    expect(screen.queryByRole("button", { name: "Show panel" })).toBeNull();
+    expect(screen.queryByRole("button", { name: "Expand panel" })).toBeNull();
+    expect(
+      screen.queryByRole("button", { name: "Restore conversation" }),
+    ).toBeNull();
+  });
+});
diff --git a/apps/app/src/views/thread-detail/ThreadDetailHeader.tsx b/apps/app/src/views/thread-detail/ThreadDetailHeader.tsx
index 1cfd207f0..ecd856a1d 100644
--- a/apps/app/src/views/thread-detail/ThreadDetailHeader.tsx
+++ b/apps/app/src/views/thread-detail/ThreadDetailHeader.tsx
@@ -9,6 +9,7 @@ import {
   AppPageHeader,
   HEADER_ICON_BUTTON_CLASS,
 } from "@/components/layout/AppPageHeader";
+import { resolveShowPanelControl } from "@/components/secondary-panel/panelToggleControlState";
 import type { ThreadGitActionDialogTarget } from "@/components/dialogs/ThreadGitActionDialog";
 
 const THREAD_HEADER_ACTION_BUTTON_CLASS =
@@ -54,14 +55,19 @@ export function ThreadDetailHeader({
 }: ThreadDetailHeaderProps) {
   const [primaryAction, ...secondaryActions] = threadHeaderGitActions;
   const renderAsDrawer = useIsCompactViewport();
-  const secondaryPanelIconName = renderAsDrawer ? "PanelBottom" : "PanelRight";
+
+  // On a wide viewport the conversation header only owns the panel-CLOSED
+  // affordance: a button that opens the secondary panel (read as "open the
+  // right side panel" via the PanelRight icon). Once the panel is open, its own
+  // header carries the expand/collapse-conversation toggle, and the collapsed
+  // rail restores the conversation. The drawer layout keeps a simple open/close
+  // toggle below.
+  const showPanelControl = resolveShowPanelControl({ onToggleSecondaryPanel });
 
   const center = (
     <>
       <p className="truncate text-sm font-semibold">{threadTitle}</p>
-      {isManagerThread ? (
-        <Pill variant="outline">manager</Pill>
-      ) : null}
+      {isManagerThread ? <Pill variant="outline">manager</Pill> : null}
       {!isManagerThread && isManagedThread ? (
         <Pill variant="outline">managed</Pill>
       ) : null}
@@ -121,8 +127,29 @@ export function ThreadDetailHeader({
           ) : null}
         </Button>
       ) : null}
+      {!renderAsDrawer && !isSecondaryPanelOpen ? (
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className={HEADER_ICON_BUTTON_CLASS}
+          aria-label={showPanelControl.label}
+          aria-expanded={showPanelControl.isExpanded}
+          title={showPanelControl.label}
+          onClick={showPanelControl.onClick}
+        >
+          <Icon name={showPanelControl.iconName} />
+        </Button>
+      ) : null}
       {actionsMenu}
-      {!renderAsDrawer && isSecondaryPanelOpen ? null : (
+      {/*
+        On a compact/drawer viewport the secondary panel opens as a drawer with
+        no seam, so the header keeps a simple open/close toggle here. On a wide
+        viewport the open-panel button above handles the closed state, while the
+        panel header's toggle handles collapse/expand and the rail handles
+        restore-when-collapsed.
+      */}
+      {renderAsDrawer ? (
         <Button
           type="button"
           variant="ghost"
@@ -141,9 +168,9 @@ export function ThreadDetailHeader({
           }
           onClick={onToggleSecondaryPanel}
         >
-          <Icon name={secondaryPanelIconName} />
+          <Icon name="PanelBottom" />
         </Button>
-      )}
+      ) : null}
     </>
   );
 
diff --git a/apps/app/src/views/thread-detail/ThreadDetailSecondaryContent.test.tsx b/apps/app/src/views/thread-detail/ThreadDetailSecondaryContent.test.tsx
index 4a6f013f9..a5f202464 100644
--- a/apps/app/src/views/thread-detail/ThreadDetailSecondaryContent.test.tsx
+++ b/apps/app/src/views/thread-detail/ThreadDetailSecondaryContent.test.tsx
@@ -1,7 +1,12 @@
 // @vitest-environment jsdom
 
 import { cleanup, fireEvent, render, screen } from "@testing-library/react";
-import type { ReactNode } from "react";
+import {
+  forwardRef,
+  useState,
+  type ComponentProps,
+  type ReactNode,
+} from "react";
 import type { Thread } from "@bb/domain";
 import type { TimelineTurnRow } from "@bb/server-contract";
 import { afterEach, describe, expect, it, vi } from "vitest";
@@ -19,6 +24,7 @@ type TerminalPanelResizeHandler = (sizePercent: number) => void;
 interface MockPanelProps {
   children: ReactNode;
   id?: string;
+  defaultSize?: number;
   onResize?: MockPanelResizeHandler;
 }
 
@@ -37,13 +43,35 @@ interface MockThreadTimelinePaneProps {
   header: ReactNode;
 }
 
+interface MockThreadSecondaryPanelProps {
+  isOpen: boolean;
+  isConversationCollapsed: boolean;
+  reserveLeftForDesktopTrafficLights: boolean;
+}
+
+interface MockConversationCollapsedRailProps {
+  collapsed: boolean;
+  reserveTopForDesktopTrafficLights: boolean;
+  onExpand: () => void;
+}
+
+const { sidebarShowingRef, desktopChromeRef } = vi.hoisted(() => ({
+  sidebarShowingRef: { current: true },
+  desktopChromeRef: { current: false },
+}));
+
 vi.mock("react-resizable-panels", () => ({
-  PanelGroup({ children }: MockPanelGroupProps) {
-    return <div>{children}</div>;
-  },
-  Panel({ children, id, onResize }: MockPanelProps) {
+  // forwardRef so the real horizontal-group ref attaches without a warning;
+  // the ref intentionally stays null so the collapse layout effect no-ops in
+  // tests and the visible state comes purely from rendered props.
+  PanelGroup: forwardRef<HTMLDivElement, MockPanelGroupProps>(
+    function PanelGroup({ children }, _ref) {
+      return <div>{children}</div>;
+    },
+  ),
+  Panel({ children, id, defaultSize, onResize }: MockPanelProps) {
     return (
-      <section aria-label={id}>
+      <section aria-label={id} data-default-size={defaultSize}>
         {onResize ? (
           <button
             type="button"
@@ -82,9 +110,77 @@ vi.mock("@/components/ui/hooks/use-compact-viewport.js", () => ({
   useIsCompactViewport: () => false,
 }));
 
+vi.mock("@/components/ui/sidebar.js", () => ({
+  // The host tests don't mount a SidebarProvider. Backed by a hoisted ref so
+  // individual cases can flip the sidebar-collapsed signal that gates the
+  // traffic-light reserve.
+  useIsSidebarShowing: () => sidebarShowingRef.current,
+}));
+
+vi.mock("@/lib/bb-desktop", async () => {
+  // Preserve the real bb-desktop exports and only override the desktop-chrome
+  // gate so cases can pick web vs macOS desktop.
+  const actual =
+    await vi.importActual<typeof import("@/lib/bb-desktop")>(
+      "@/lib/bb-desktop",
+    );
+  return {
+    ...actual,
+    getBbDesktopInfo: () => null,
+    shouldUseMacosDesktopChrome: () => desktopChromeRef.current,
+  };
+});
+
 vi.mock("@/components/secondary-panel/ThreadSecondaryPanel", () => ({
-  ThreadSecondaryPanel() {
-    return <aside>Secondary panel</aside>;
+  // Surfacing the traffic-light reserve prop as a data attribute is what
+  // makes the parent gate (desktop + sidebar collapsed + conversation
+  // collapsed) actually testable from this seam.
+  ThreadSecondaryPanel({
+    isOpen,
+    isConversationCollapsed,
+    reserveLeftForDesktopTrafficLights,
+  }: MockThreadSecondaryPanelProps) {
+    return (
+      <aside
+        data-testid="mock-secondary-panel"
+        data-secondary-panel-open={isOpen}
+        data-secondary-panel-conversation-collapsed={isConversationCollapsed}
+        data-secondary-panel-reserve-left={String(
+          reserveLeftForDesktopTrafficLights,
+        )}
+      >
+        Secondary panel
+      </aside>
+    );
+  },
+}));
+
+vi.mock("@/components/secondary-panel/ConversationCollapsedRail", () => ({
+  // Same shape as the secondary-panel mock: the rail's reserveTop prop is
+  // the other half of the parent gate, so it has to be observable here.
+  ConversationCollapsedRail({
+    collapsed,
+    reserveTopForDesktopTrafficLights,
+    onExpand,
+  }: MockConversationCollapsedRailProps) {
+    return (
+      <button
+        type="button"
+        data-testid="mock-conversation-collapsed-rail"
+        data-rail-collapsed={String(collapsed)}
+        data-rail-reserve-top={String(reserveTopForDesktopTrafficLights)}
+        aria-label="Expand conversation"
+        aria-expanded={collapsed ? "false" : "true"}
+        // Mirror the real rail: when the conversation is shown, the rail
+        // disappears from the a11y tree + tab order. Existing tests rely on
+        // this to assert that the expand affordance is gone post-click.
+        aria-hidden={collapsed ? undefined : true}
+        inert={collapsed ? undefined : true}
+        onClick={onExpand}
+      >
+        <span data-icon="MessageSquare" aria-hidden="true" />
+      </button>
+    );
   },
 }));
 
@@ -145,84 +241,143 @@ function makeThread(): Thread {
   };
 }
 
+interface SecondaryContentOverrides {
+  onTerminalPanelResize?: TerminalPanelResizeHandler;
+  isSecondaryPanelOpen?: boolean;
+  isConversationCollapsed?: boolean;
+  onToggleConversationCollapse?: () => void;
+}
+
+function buildSecondaryContentProps({
+  onTerminalPanelResize = noop,
+  isSecondaryPanelOpen = false,
+  isConversationCollapsed = false,
+  onToggleConversationCollapse = noop,
+}: SecondaryContentOverrides = {}): ComponentProps<
+  typeof ThreadDetailSecondaryContent
+> {
+  return {
+    footer: <div>Footer</div>,
+    header: <div>Header</div>,
+    isMetadataLoading: false,
+    isSecondaryPanelOpen,
+    isConversationCollapsed,
+    onToggleConversationCollapse,
+    metadata: {
+      thread: makeThread(),
+      projectId: "proj_test",
+      parentThreadDisplayName: null,
+      managerThreads: [],
+      canAssignToManager: false,
+      canTakeOverThread: false,
+      environmentHost: null,
+      environmentIsLocal: true,
+      environment: null,
+      workspaceStatus: undefined,
+      workspaceStatusError: null,
+      selectedMergeBaseBranch: undefined,
+      mergeBaseBranchOptions: undefined,
+      isLoadingMergeBaseBranchOptions: false,
+      updateThreadPending: false,
+      onAssignManager: noopAssignManager,
+      onMergeBaseBranchChange: noopBranchChange,
+    },
+    secondaryPanel: {
+      activePanel: null,
+      canUseGitUi: false,
+      defaultMergeBaseBranch: undefined,
+      environmentId: undefined,
+      fileTabs: undefined,
+      fileTabContent: undefined,
+      isOpen: isSecondaryPanelOpen,
+      showGitDiffTab: false,
+      workspaceRootPath: undefined,
+      onClose: noop,
+      onCollapse: noop,
+      onOpenFileInEditor: noopOpenFile,
+      onOpenFilePreview: noopOpenFile,
+      onOpenNewTab: noop,
+      onPanelChange: noopSecondaryPanelChange,
+      onPanelFocus: noop,
+    },
+    terminalPanel: <div>Terminal</div>,
+    terminalPanelHeightPercent: 32,
+    terminalPanelOpen: true,
+    onTerminalPanelResize,
+    timeline: {
+      activeThinking: null,
+      hasOlderTimelineRows: false,
+      hostConnectionNotice: null,
+      isLoadingOlderTimelineRows: false,
+      isThreadTimelinePending: false,
+      timelineError: false,
+      loadingTurnSummaryIds: new Set<string>(),
+      erroredTurnSummaryIds: new Set<string>(),
+      onLoadOlderRows: noop,
+      onLoadTurnSummaryRows: noopLoadTurnSummaryRows,
+      projectId: "proj_test",
+      showOngoingIndicator: false,
+      stopRequestedAt: null,
+      timelineRows: [],
+      threadId: "thr_test",
+      threadRuntimeDisplayStatus: "idle",
+      turnSummaryRowsIdentity: "empty",
+      turnSummaryRowsById: {},
+      unreadDividerAutoScroll: false,
+      unreadDividerPlacement: null,
+      workspaceRootPath: undefined,
+    },
+  };
+}
+
 function renderContent(onTerminalPanelResize: TerminalPanelResizeHandler) {
   return render(
     <ThreadDetailSecondaryContent
-      footer={<div>Footer</div>}
-      header={<div>Header</div>}
-      isMetadataLoading={false}
-      isSecondaryPanelOpen={false}
-      metadata={{
-        thread: makeThread(),
-        projectId: "proj_test",
-        parentThreadDisplayName: null,
-        managerThreads: [],
-        canAssignToManager: false,
-        canTakeOverThread: false,
-        environmentHost: null,
-        environmentIsLocal: true,
-        environment: null,
-        workspaceStatus: undefined,
-        workspaceStatusError: null,
-        selectedMergeBaseBranch: undefined,
-        mergeBaseBranchOptions: undefined,
-        isLoadingMergeBaseBranchOptions: false,
-        updateThreadPending: false,
-        onAssignManager: noopAssignManager,
-        onMergeBaseBranchChange: noopBranchChange,
-      }}
-      secondaryPanel={{
-        activePanel: null,
-        canUseGitUi: false,
-        defaultMergeBaseBranch: undefined,
-        environmentId: undefined,
-        fileTabs: undefined,
-        fileTabContent: undefined,
-        isOpen: false,
-        showGitDiffTab: false,
-        workspaceRootPath: undefined,
-        onClose: noop,
-        onCollapse: noop,
-        onOpenFileInEditor: noopOpenFile,
-        onOpenFilePreview: noopOpenFile,
-        onOpenNewTab: noop,
-        onPanelChange: noopSecondaryPanelChange,
-        onPanelFocus: noop,
-      }}
-      terminalPanel={<div>Terminal</div>}
-      terminalPanelHeightPercent={32}
-      terminalPanelOpen
-      onTerminalPanelResize={onTerminalPanelResize}
-      timeline={{
-        activeThinking: null,
-        hasOlderTimelineRows: false,
-        hostConnectionNotice: null,
-        isLoadingOlderTimelineRows: false,
-        isThreadTimelinePending: false,
-        timelineError: false,
-        loadingTurnSummaryIds: new Set<string>(),
-        erroredTurnSummaryIds: new Set<string>(),
-        onLoadOlderRows: noop,
-        onLoadTurnSummaryRows: noopLoadTurnSummaryRows,
-        projectId: "proj_test",
-        showOngoingIndicator: false,
-        stopRequestedAt: null,
-        timelineRows: [],
-        threadId: "thr_test",
-        threadRuntimeDisplayStatus: "idle",
-        turnSummaryRowsIdentity: "empty",
-        turnSummaryRowsById: {},
-        unreadDividerAutoScroll: false,
-        unreadDividerPlacement: null,
-        workspaceRootPath: undefined,
-      }}
+      {...buildSecondaryContentProps({ onTerminalPanelResize })}
     />,
   );
 }
 
+const TIMELINE_PANEL_LABEL = "thread-detail-timeline-panel";
+
+function getTimelinePanel(): HTMLElement {
+  return screen.getByRole("region", { name: TIMELINE_PANEL_LABEL });
+}
+
+function getConversationPane(container: HTMLElement): HTMLElement {
+  const pane = container.querySelector<HTMLElement>(
+    "[data-conversation-collapsed]",
+  );
+  if (pane === null) {
+    throw new Error("Conversation pane wrapper not found");
+  }
+  return pane;
+}
+
+function ConversationCollapseHarness({
+  initialCollapsed,
+  isSecondaryPanelOpen,
+}: {
+  initialCollapsed: boolean;
+  isSecondaryPanelOpen: boolean;
+}) {
+  const [collapsed, setCollapsed] = useState(initialCollapsed);
+  return (
+    <ThreadDetailSecondaryContent
+      {...buildSecondaryContentProps({
+        isSecondaryPanelOpen,
+        isConversationCollapsed: collapsed,
+        onToggleConversationCollapse: () => setCollapsed((current) => !current),
+      })}
+    />
+  );
+}
+
 afterEach(() => {
   cleanup();
   vi.clearAllMocks();
+  sidebarShowingRef.current = true;
+  desktopChromeRef.current = false;
 });
 
 describe("ThreadDetailSecondaryContent", () => {
@@ -263,3 +418,165 @@ describe("ThreadDetailSecondaryContent", () => {
     expect(onTerminalPanelResize).toHaveBeenCalledWith(45);
   });
 });
+
+describe("ThreadDetailSecondaryContent conversation collapse", () => {
+  it("mounts the timeline at zero width and hides it when collapsed with the panel open", () => {
+    const { container } = render(
+      <ThreadDetailSecondaryContent
+        {...buildSecondaryContentProps({
+          isSecondaryPanelOpen: true,
+          isConversationCollapsed: true,
+        })}
+      />,
+    );
+
+    expect(getTimelinePanel().getAttribute("data-default-size")).toBe("0");
+    const pane = getConversationPane(container);
+    expect(pane.getAttribute("data-conversation-collapsed")).toBe("true");
+    // `inert` keeps the hidden conversation out of the tab order + a11y tree.
+    expect(pane.hasAttribute("inert")).toBe(true);
+  });
+
+  it("renders the slim conversation rail with its chat glyph when collapsed", () => {
+    render(
+      <ThreadDetailSecondaryContent
+        {...buildSecondaryContentProps({
+          isSecondaryPanelOpen: true,
+          isConversationCollapsed: true,
+        })}
+      />,
+    );
+
+    const rail = screen.getByRole("button", { name: "Expand conversation" });
+    expect(rail.getAttribute("aria-expanded")).toBe("false");
+    // The MessageSquare glyph stands in for the tucked-away conversation.
+    expect(rail.querySelector("[data-icon='MessageSquare']")).not.toBeNull();
+  });
+
+  it("expands the conversation when the rail is clicked", () => {
+    const { container } = render(
+      <ConversationCollapseHarness initialCollapsed isSecondaryPanelOpen />,
+    );
+
+    expect(getConversationPane(container).hasAttribute("inert")).toBe(true);
+
+    fireEvent.click(
+      screen.getByRole("button", { name: "Expand conversation" }),
+    );
+
+    const pane = getConversationPane(container);
+    expect(pane.getAttribute("data-conversation-collapsed")).toBe("false");
+    expect(pane.hasAttribute("inert")).toBe(false);
+    // Once the conversation is shown again, the rail drops out of the a11y tree.
+    expect(
+      screen.queryByRole("button", { name: "Expand conversation" }),
+    ).toBeNull();
+  });
+
+  it("does not collapse and offers no toggle while the secondary panel is closed", () => {
+    const { container } = render(
+      <ThreadDetailSecondaryContent
+        {...buildSecondaryContentProps({
+          isSecondaryPanelOpen: false,
+          isConversationCollapsed: true,
+        })}
+      />,
+    );
+
+    // Preference is ignored: the conversation stays visible and full width.
+    const pane = getConversationPane(container);
+    expect(pane.getAttribute("data-conversation-collapsed")).toBe("false");
+    expect(pane.hasAttribute("inert")).toBe(false);
+    expect(getTimelinePanel().getAttribute("data-default-size")).toBe("100");
+    expect(screen.queryByRole("button", { name: /conversation/i })).toBeNull();
+  });
+});
+
+interface DesktopTrafficLightScenarioState {
+  desktopChrome: boolean;
+  sidebarShowing: boolean;
+  conversationCollapsed: boolean;
+}
+
+interface DesktopTrafficLightExpectation {
+  railReserveTop: boolean;
+  panelReserveLeft: boolean;
+}
+
+interface DesktopTrafficLightScenario {
+  name: string;
+  state: DesktopTrafficLightScenarioState;
+  expected: DesktopTrafficLightExpectation;
+}
+
+function renderForTrafficLightCase(
+  state: DesktopTrafficLightScenarioState,
+): { rail: HTMLElement; panel: HTMLElement } {
+  desktopChromeRef.current = state.desktopChrome;
+  sidebarShowingRef.current = state.sidebarShowing;
+  render(
+    <ThreadDetailSecondaryContent
+      {...buildSecondaryContentProps({
+        isSecondaryPanelOpen: true,
+        isConversationCollapsed: state.conversationCollapsed,
+      })}
+    />,
+  );
+  return {
+    rail: screen.getByTestId("mock-conversation-collapsed-rail"),
+    panel: screen.getByTestId("mock-secondary-panel"),
+  };
+}
+
+describe("ThreadDetailSecondaryContent desktop traffic-light reserve", () => {
+  // Drives the actual gate that decides whether each leaf gets its reserve.
+  // Each case exercises one corner of (desktop chrome × sidebar shown ×
+  // conversation collapsed) so the test would fail if the gate were widened
+  // (e.g. firing on web, or with the sidebar still covering the lights).
+  it.each<DesktopTrafficLightScenario>([
+    {
+      name: "macOS desktop + sidebar collapsed + conversation collapsed → both reserves on",
+      state: {
+        desktopChrome: true,
+        sidebarShowing: false,
+        conversationCollapsed: true,
+      },
+      expected: { railReserveTop: true, panelReserveLeft: true },
+    },
+    {
+      name: "macOS desktop + sidebar collapsed + conversation shown → only the rail reserve (panel is no longer leftmost)",
+      state: {
+        desktopChrome: true,
+        sidebarShowing: false,
+        conversationCollapsed: false,
+      },
+      expected: { railReserveTop: true, panelReserveLeft: false },
+    },
+    {
+      name: "macOS desktop + sidebar expanded → neither reserve (sidebar already covers the lights)",
+      state: {
+        desktopChrome: true,
+        sidebarShowing: true,
+        conversationCollapsed: true,
+      },
+      expected: { railReserveTop: false, panelReserveLeft: false },
+    },
+    {
+      name: "web (non-macOS) + sidebar collapsed + conversation collapsed → neither reserve (no traffic lights to clear)",
+      state: {
+        desktopChrome: false,
+        sidebarShowing: false,
+        conversationCollapsed: true,
+      },
+      expected: { railReserveTop: false, panelReserveLeft: false },
+    },
+  ])("$name", ({ state, expected }) => {
+    const { rail, panel } = renderForTrafficLightCase(state);
+    expect(rail.getAttribute("data-rail-reserve-top")).toBe(
+      String(expected.railReserveTop),
+    );
+    expect(panel.getAttribute("data-secondary-panel-reserve-left")).toBe(
+      String(expected.panelReserveLeft),
+    );
+  });
+});
diff --git a/apps/app/src/views/thread-detail/ThreadDetailSecondaryContent.tsx b/apps/app/src/views/thread-detail/ThreadDetailSecondaryContent.tsx
index 987050772..50b1d063b 100644
--- a/apps/app/src/views/thread-detail/ThreadDetailSecondaryContent.tsx
+++ b/apps/app/src/views/thread-detail/ThreadDetailSecondaryContent.tsx
@@ -1,14 +1,22 @@
 import {
   useCallback,
   useEffect,
+  useLayoutEffect,
   useRef,
+  useState,
   type ComponentProps,
   type ReactNode,
 } from "react";
+import {
+  getBbDesktopInfo,
+  shouldUseMacosDesktopChrome,
+} from "@/lib/bb-desktop";
+import { useIsSidebarShowing } from "@/components/ui/sidebar.js";
 import {
   Panel,
   PanelGroup,
   PanelResizeHandle,
+  type ImperativePanelGroupHandle,
   type ImperativePanelHandle,
 } from "react-resizable-panels";
 import { ResponsiveDrawerShell } from "@/components/ui/responsive-overlay.js";
@@ -29,10 +37,12 @@ import {
   type ThreadMetadataContentProps,
 } from "@/components/secondary-panel/ThreadMetadataContent";
 import { ThreadTimelinePane } from "./ThreadTimelinePane";
+import { ConversationCollapsedRail } from "@/components/secondary-panel/ConversationCollapsedRail";
+import { PANEL_COLLAPSE_TRANSITION_CLASS } from "@/components/secondary-panel/panelTransitionTokens";
 
 const CLOSED_TIMELINE_PANEL_SIZE_PERCENT = 100;
-const TERMINAL_PANEL_TRANSITION_CLASS =
-  "duration-[220ms] ease-[cubic-bezier(0.32,0.72,0,1)]";
+const COLLAPSED_TIMELINE_PANEL_SIZE_PERCENT = 0;
+const TIMELINE_PANEL_MIN_SIZE_PERCENT = 30;
 
 type ThreadTimelinePaneProps = Omit<
   ComponentProps<typeof ThreadTimelinePane>,
@@ -40,7 +50,11 @@ type ThreadTimelinePaneProps = Omit<
 >;
 type ThreadSecondaryPanelProps = Omit<
   ComponentProps<typeof ThreadSecondaryPanel>,
-  "metadataContent" | "renderAsDrawer"
+  | "metadataContent"
+  | "renderAsDrawer"
+  | "isConversationCollapsed"
+  | "onToggleConversationCollapse"
+  | "reserveLeftForDesktopTrafficLights"
 >;
 type TerminalPanelDraggingHandler = (isDragging: boolean) => void;
 
@@ -49,6 +63,8 @@ interface ThreadDetailSecondaryContentProps {
   header: ReactNode;
   isMetadataLoading: boolean;
   isSecondaryPanelOpen: boolean;
+  isConversationCollapsed: boolean;
+  onToggleConversationCollapse: () => void;
   metadata: ThreadMetadataContentProps;
   secondaryPanel: ThreadSecondaryPanelProps;
   terminalPanel?: ReactNode;
@@ -63,6 +79,8 @@ export function ThreadDetailSecondaryContent({
   header,
   isMetadataLoading,
   isSecondaryPanelOpen,
+  isConversationCollapsed,
+  onToggleConversationCollapse,
   metadata,
   onTerminalPanelResize,
   secondaryPanel,
@@ -75,6 +93,53 @@ export function ThreadDetailSecondaryContent({
   const persistedSecondaryWidthPercent = useAtomValue(
     secondaryPanelWidthPercentAtom,
   );
+  // When the main sidebar is collapsed on macOS desktop, the traffic-light
+  // cluster sits over the leftmost content (no expanded sidebar to absorb it).
+  // The rail's chevron and the secondary panel's tab strip need to clear that
+  // zone; nothing-to-do otherwise (web, or sidebar covers the cluster).
+  const [desktopInfo] = useState(getBbDesktopInfo);
+  const usesDesktopChrome = shouldUseMacosDesktopChrome(desktopInfo);
+  const isMainSidebarShowing = useIsSidebarShowing();
+  const isLeftmostSurfaceUnderTrafficLights =
+    usesDesktopChrome && !isMainSidebarShowing && !renderAsDrawer;
+  // Collapsing the conversation only makes sense on a wide viewport with the
+  // secondary panel open — there is otherwise nothing to expand into.
+  const canCollapseConversation = isSecondaryPanelOpen && !renderAsDrawer;
+  const isConversationCollapsedActive =
+    canCollapseConversation && isConversationCollapsed;
+  // Real, in-scope activity signal for the collapsed rail: the agent is running.
+  const isConversationWorking = timeline.threadRuntimeDisplayStatus === "active";
+
+  const horizontalPanelGroupRef = useRef<ImperativePanelGroupHandle | null>(
+    null,
+  );
+  // Read inside the collapse layout effect without making width changes
+  // re-trigger it (which would fight an in-progress resize drag).
+  const persistedSecondaryWidthRef = useRef(persistedSecondaryWidthPercent);
+  useEffect(() => {
+    persistedSecondaryWidthRef.current = persistedSecondaryWidthPercent;
+  }, [persistedSecondaryWidthPercent]);
+  const didMountConversationCollapseRef = useRef(false);
+  useLayoutEffect(() => {
+    // Initial mount is handled by each panel's defaultSize; only animate when
+    // the collapse state changes afterwards. A layout effect keeps the
+    // secondary panel's lifted max size and the new layout in the same commit,
+    // avoiding a flicker through the clamped 70% intermediate.
+    if (!didMountConversationCollapseRef.current) {
+      didMountConversationCollapseRef.current = true;
+      return;
+    }
+    const group = horizontalPanelGroupRef.current;
+    if (group === null || renderAsDrawer || !isSecondaryPanelOpen) {
+      return;
+    }
+    if (isConversationCollapsedActive) {
+      group.setLayout([COLLAPSED_TIMELINE_PANEL_SIZE_PERCENT, 100]);
+    } else {
+      const secondaryWidth = persistedSecondaryWidthRef.current;
+      group.setLayout([100 - secondaryWidth, secondaryWidth]);
+    }
+  }, [isConversationCollapsedActive, isSecondaryPanelOpen, renderAsDrawer]);
 
   const terminalPanelRef = useRef<ImperativePanelHandle | null>(null);
   const lastTerminalSizeRef = useRef(terminalPanelHeightPercent);
@@ -126,16 +191,15 @@ export function ThreadDetailSecondaryContent({
     [onTerminalPanelResize],
   );
 
-  const handleTerminalPanelDragging =
-    useCallback<TerminalPanelDraggingHandler>(
-      (isDragging) => {
-        isTerminalPanelDraggingRef.current = isDragging;
-        if (!isDragging) {
-          persistTerminalPanelSize();
-        }
-      },
-      [persistTerminalPanelSize],
-    );
+  const handleTerminalPanelDragging = useCallback<TerminalPanelDraggingHandler>(
+    (isDragging) => {
+      isTerminalPanelDraggingRef.current = isDragging;
+      if (!isDragging) {
+        persistTerminalPanelSize();
+      }
+    },
+    [persistTerminalPanelSize],
+  );
 
   const metadataContent = hasAnyThreadMetadata(metadata) ? (
     <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
@@ -152,6 +216,13 @@ export function ThreadDetailSecondaryContent({
     <ThreadSecondaryPanel
       {...secondaryPanel}
       renderAsDrawer={false}
+      isConversationCollapsed={isConversationCollapsedActive}
+      onToggleConversationCollapse={onToggleConversationCollapse}
+      // Panel is leftmost only when the rail (36px) is the only thing between
+      // it and the window edge — i.e. the conversation is also collapsed.
+      reserveLeftForDesktopTrafficLights={
+        isLeftmostSurfaceUnderTrafficLights && isConversationCollapsedActive
+      }
       metadataContent={metadataContent}
     />
   ) : null;
@@ -159,6 +230,9 @@ export function ThreadDetailSecondaryContent({
     <ThreadSecondaryPanel
       {...secondaryPanel}
       renderAsDrawer={true}
+      isConversationCollapsed={false}
+      onToggleConversationCollapse={onToggleConversationCollapse}
+      reserveLeftForDesktopTrafficLights={false}
       metadataContent={metadataContent}
     />
   ) : null;
@@ -181,25 +255,69 @@ export function ThreadDetailSecondaryContent({
           order={1}
           className="min-w-0 overflow-hidden"
         >
-          <PanelGroup
-            direction="horizontal"
-            className="h-full w-full min-w-0"
-          >
-            <Panel
-              id="thread-detail-timeline-panel"
-              defaultSize={
-                isSecondaryPanelOpen && !renderAsDrawer
-                  ? 100 - persistedSecondaryWidthPercent
-                  : CLOSED_TIMELINE_PANEL_SIZE_PERCENT
+          {/*
+            When collapsed we keep the resizable PanelGroup mounted (the timeline
+            lifts to 0% and the panel to 100% via the layout effect) and slot the
+            36px rail in beside it as a plain flex sibling. This sidesteps the
+            "fixed px in a percentage engine" problem the same way a layout swap
+            would, but without unmounting the PanelGroup — so the secondary
+            panel's content (live app iframes, parsed diffs, scroll position) is
+            never torn down and re-created when toggling collapse.
+          */}
+          <div className="flex h-full w-full min-w-0">
+            <ConversationCollapsedRail
+              collapsed={isConversationCollapsedActive}
+              isWorking={isConversationWorking}
+              reserveTopForDesktopTrafficLights={
+                isLeftmostSurfaceUnderTrafficLights
               }
-              minSize={30}
-              order={1}
-              className="min-w-0 overflow-hidden"
+              onExpand={onToggleConversationCollapse}
+            />
+            <PanelGroup
+              ref={horizontalPanelGroupRef}
+              direction="horizontal"
+              className="h-full min-w-0 flex-1"
             >
-              <ThreadTimelinePane {...timeline} footer={footer} header={header} />
-            </Panel>
-            {inlineSecondaryPanelContent}
-          </PanelGroup>
+              <Panel
+                id="thread-detail-timeline-panel"
+                collapsible
+                collapsedSize={COLLAPSED_TIMELINE_PANEL_SIZE_PERCENT}
+                defaultSize={
+                  isConversationCollapsedActive
+                    ? COLLAPSED_TIMELINE_PANEL_SIZE_PERCENT
+                    : isSecondaryPanelOpen && !renderAsDrawer
+                      ? 100 - persistedSecondaryWidthPercent
+                      : CLOSED_TIMELINE_PANEL_SIZE_PERCENT
+                }
+                minSize={TIMELINE_PANEL_MIN_SIZE_PERCENT}
+                order={1}
+                className={cn(
+                  "min-w-0 overflow-hidden transition-[flex-grow,flex-basis]",
+                  PANEL_COLLAPSE_TRANSITION_CLASS,
+                )}
+              >
+                <div
+                  data-conversation-collapsed={isConversationCollapsedActive}
+                  // `inert` removes the hidden conversation (header, timeline,
+                  // composer) from the tab order and a11y tree and blocks pointer
+                  // events, so keyboard focus can't land in the invisible pane.
+                  inert={isConversationCollapsedActive}
+                  className={cn(
+                    "flex h-full min-h-0 min-w-0 flex-col transition-opacity",
+                    PANEL_COLLAPSE_TRANSITION_CLASS,
+                    isConversationCollapsedActive && "opacity-0",
+                  )}
+                >
+                  <ThreadTimelinePane
+                    {...timeline}
+                    footer={footer}
+                    header={header}
+                  />
+                </div>
+              </Panel>
+              {inlineSecondaryPanelContent}
+            </PanelGroup>
+          </div>
         </Panel>
         {terminalPanel ? (
           <>
@@ -212,16 +330,14 @@ export function ThreadDetailSecondaryContent({
               id="thread-detail-terminal-panel"
               collapsible
               collapsedSize={0}
-              defaultSize={
-                terminalPanelOpen ? terminalPanelHeightPercent : 0
-              }
+              defaultSize={terminalPanelOpen ? terminalPanelHeightPercent : 0}
               minSize={MIN_TERMINAL_PANEL_HEIGHT_PERCENT}
               maxSize={MAX_TERMINAL_PANEL_HEIGHT_PERCENT}
               order={2}
               onResize={handleTerminalPanelResize}
               className={cn(
                 "min-h-0 min-w-0 overflow-hidden transition-[flex-grow,flex-basis,opacity]",
-                TERMINAL_PANEL_TRANSITION_CLASS,
+                PANEL_COLLAPSE_TRANSITION_CLASS,
                 terminalPanelOpen ? "opacity-100" : "opacity-0",
               )}
             >
@@ -270,7 +386,7 @@ function TerminalPanelResizeHandle({
       onDragging={onDragging}
       className={cn(
         "group relative shrink-0 cursor-row-resize overflow-visible bg-transparent transition-[height,opacity,background-color]",
-        TERMINAL_PANEL_TRANSITION_CLASS,
+        PANEL_COLLAPSE_TRANSITION_CLASS,
         "before:absolute before:-inset-y-1.5 before:inset-x-0 before:content-['']",
         isOpen ? "h-px opacity-100" : "pointer-events-none h-0 opacity-0",
       )}
diff --git a/apps/app/src/views/thread-detail/ThreadDetailView.tsx b/apps/app/src/views/thread-detail/ThreadDetailView.tsx
index 70c8e846b..0c0806886 100644
--- a/apps/app/src/views/thread-detail/ThreadDetailView.tsx
+++ b/apps/app/src/views/thread-detail/ThreadDetailView.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { useAtomValue } from "jotai";
+import { useAtom, useAtomValue } from "jotai";
 import type {
+  ThreadTimelineLinkHandler,
   ThreadTimelineLocalFileLink,
   TimelineTitleActionResolver,
 } from "@/components/thread/timeline";
@@ -78,13 +79,22 @@ import { ThreadDetailSecondaryContent } from "./ThreadDetailSecondaryContent";
 import { useThreadSecondaryPanelVisibility } from "./useThreadSecondaryPanelVisibility";
 import type { HostConnectionNotice } from "./ThreadTimelinePane";
 import { useThreadStorageViewer } from "@/components/secondary-panel/useThreadStorageViewer";
+import { getThreadConversationCollapsedAtom } from "@/components/secondary-panel/threadSecondaryPanelAtoms";
 import {
   HostFilePreviewTabContent,
   ThreadStorageFilePreviewTabContent,
   WorkspaceFilePreviewTabContent,
 } from "@/components/secondary-panel/ThreadSecondaryPanelTabContent";
 import { AppTabContent } from "@/components/secondary-panel/AppTabContent";
+import { BrowserTabDeck } from "@/components/secondary-panel/BrowserTabDeck";
 import { NewTabPage } from "@/components/secondary-panel/NewTabPage";
+import { Icon } from "@/components/ui/icon.js";
+import { getDesktopBrowserApi, isDesktopBrowserAvailable } from "@/lib/bb-desktop";
+import {
+  resolveChatLinkOpenTarget,
+  useOpenLinksInAppBrowserPreference,
+} from "@/lib/in-app-browser-link-preference";
+import { getBrowserUrlHost } from "@/lib/browser-url";
 import { ResolvedAppIcon } from "@/components/secondary-panel/AppIcon";
 import { useManagerStorageBrowser } from "@/components/secondary-panel/useManagerStorageBrowser";
 import {
@@ -295,11 +305,13 @@ export function ThreadDetailView() {
   });
   const {
     activateAppTab,
+    activateBrowserTab,
     activateNewTab,
     activateHostFileTab,
     activateStorageFileTab,
     activateWorkspaceFileTab,
     activeAppId,
+    activeBrowserTab,
     activeHostFileLineNumber,
     activeHostFilePath,
     activeStorageFilePath,
@@ -307,13 +319,16 @@ export function ThreadDetailView() {
     activeWorkspaceFilePath,
     activeWorkspaceFileSource,
     activeWorkspaceFileStatusLabel,
+    browserTabs,
     clearActiveFileTabs,
     closeAppTab,
+    closeBrowserTab,
     closeHostFileTab,
     closeNewTab,
     closeStorageFileTab,
     closeWorkspaceFileTab,
     isNewTabActive,
+    openBrowserTab,
     openNewTab,
     openApp,
     openHostFile,
@@ -321,6 +336,7 @@ export function ThreadDetailView() {
     openWorkspaceFile,
     orderedSecondaryFileTabs,
     selectFileSearchResult,
+    updateBrowserTab,
   } = useThreadFileTabs({
     apps: threadAppsQuery.data,
     threadId,
@@ -328,6 +344,21 @@ export function ThreadDetailView() {
     threadType: thread?.type,
     storageFiles: threadStorageFiles?.files,
   });
+  const [openLinksInAppBrowser] = useOpenLinksInAppBrowserPreference();
+  // The in-app browser surface only exists on desktop; on web this stays false
+  // and chat links keep their external-open behavior.
+  const desktopBrowserAvailable = isDesktopBrowserAvailable();
+  // Popups (`window.open`/`target=_blank`) from a browser view open as a new
+  // in-panel browser tab; the native OS popup is denied in the main process.
+  useEffect(() => {
+    const browserApi = getDesktopBrowserApi();
+    if (browserApi === null) {
+      return;
+    }
+    return browserApi.onOpenTab(({ url }) => {
+      openBrowserTab(url);
+    });
+  }, [openBrowserTab]);
   const storageBrowserController = useManagerStorageBrowser({
     files: threadStorageFiles?.files,
     onSelectPath: openStorageFile,
@@ -476,6 +507,15 @@ export function ThreadDetailView() {
     threadId,
     togglePersistedPanel: togglePersistedSecondaryPanel,
   });
+  const [storedConversationCollapsed, setStoredConversationCollapsed] = useAtom(
+    getThreadConversationCollapsedAtom(threadId),
+  );
+  // The collapse preference only applies while the panel is open on a wide
+  // viewport; ThreadDetailSecondaryContent gates it (there is nothing to expand
+  // into otherwise) and surfaces the toggle on the seam arrow.
+  const toggleConversationCollapse = useCallback(() => {
+    setStoredConversationCollapsed((collapsed) => !collapsed);
+  }, [setStoredConversationCollapsed]);
   useEffect(() => {
     setHasRequestedMergeBaseOptions(false);
   }, [thread?.environmentId]);
@@ -561,6 +601,20 @@ export function ThreadDetailView() {
             onClose: () => closeAppTab(tab.appId),
           };
         }
+        case "browser": {
+          const browserLabel =
+            tab.title ??
+            (tab.url.length > 0 ? getBrowserUrlHost(tab.url) : "New tab");
+          return {
+            id: tab.id,
+            filename: browserLabel.length > 0 ? browserLabel : "New tab",
+            isActive: activeBrowserTab?.id === tab.id,
+            leadingVisual: <Icon name="Globe" className="size-3.5" aria-hidden />,
+            statusLabel: null,
+            onSelect: () => activateBrowserTab(tab.id),
+            onClose: () => closeBrowserTab(tab.id),
+          };
+        }
         case "workspace-file-preview":
           return {
             id: tab.id,
@@ -603,15 +657,18 @@ export function ThreadDetailView() {
     return tabs.length > 0 ? tabs : undefined;
   }, [
     activateAppTab,
+    activateBrowserTab,
     activateNewTab,
     activateHostFileTab,
     activateStorageFileTab,
     activateWorkspaceFileTab,
     activeAppId,
+    activeBrowserTab,
     activeHostFilePath,
     activeStorageFilePath,
     activeWorkspaceFilePath,
     closeAppTab,
+    closeBrowserTab,
     closeHostFileTab,
     closeNewTab,
     closeStorageFileTab,
@@ -891,6 +948,22 @@ export function ThreadDetailView() {
       threadStorageRootPath,
     ],
   );
+  const handleOpenTimelineLink = useCallback<ThreadTimelineLinkHandler>(
+    ({ href }) => {
+      if (
+        resolveChatLinkOpenTarget({
+          desktopBrowserAvailable,
+          openInAppBrowser: openLinksInAppBrowser,
+          url: href,
+        }) !== "in-app-browser"
+      ) {
+        return false;
+      }
+      openBrowserTab(href);
+      return true;
+    },
+    [desktopBrowserAvailable, openBrowserTab, openLinksInAppBrowser],
+  );
   const handleTimelineTitleAction = useCallback<TimelineTitleActionResolver>(
     (action) => {
       switch (action.kind) {
@@ -1145,6 +1218,7 @@ export function ThreadDetailView() {
       currentThreadType={thread.type}
       focusRequest={newTabFocusRequest}
       onCreateAppPromptPrefill={handleCreateAppPromptPrefill}
+      onOpenBrowser={() => openBrowserTab()}
       onSelect={selectFileSearchResult}
     />
   ) : activeAppId ? (
@@ -1176,6 +1250,19 @@ export function ThreadDetailView() {
       threadId={thread.id}
     />
   ) : undefined;
+  // Browser tabs are not rendered through the single `fileTabContent` slot:
+  // each one keeps a live native view that must persist across tab switches, so
+  // the deck stays mounted independently of which tab is active.
+  const isBrowserTabActive = activeBrowserTab !== null;
+  const browserDeck = (
+    <BrowserTabDeck
+      browserTabs={browserTabs}
+      activeBrowserTabId={activeBrowserTab?.id ?? null}
+      isPanelOpen={isSecondaryPanelOpen}
+      threadId={thread.id}
+      onUpdate={updateBrowserTab}
+    />
+  );
 
   return (
     <>
@@ -1184,6 +1271,8 @@ export function ThreadDetailView() {
         header={timelineHeader}
         isMetadataLoading={environmentQuery.isLoading}
         isSecondaryPanelOpen={isSecondaryPanelOpen}
+        isConversationCollapsed={storedConversationCollapsed}
+        onToggleConversationCollapse={toggleConversationCollapse}
         metadata={{
           thread,
           projectId,
@@ -1219,6 +1308,8 @@ export function ThreadDetailView() {
           workspaceRootPath: environment?.path,
           fileTabs,
           fileTabContent,
+          browserDeck,
+          isBrowserTabActive,
           isOpen: isSecondaryPanelOpen,
           onClose: closeSecondaryPanel,
           onCollapse: closeSecondaryPanel,
@@ -1258,6 +1349,7 @@ export function ThreadDetailView() {
           erroredTurnSummaryIds,
           onLoadOlderRows: loadOlderTimelineRows,
           onLoadTurnSummaryRows: handleLoadTurnSummaryRows,
+          onOpenLink: handleOpenTimelineLink,
           onOpenLocalFileLink: handleOpenTimelineLocalFileLink,
           onTitleAction: handleTimelineTitleAction,
           projectId,
diff --git a/apps/app/src/views/thread-detail/ThreadTimelinePane.tsx b/apps/app/src/views/thread-detail/ThreadTimelinePane.tsx
index f2a489974..d47b1816e 100644
--- a/apps/app/src/views/thread-detail/ThreadTimelinePane.tsx
+++ b/apps/app/src/views/thread-detail/ThreadTimelinePane.tsx
@@ -15,6 +15,7 @@ import { PageShell } from "@/components/ui/page-shell.js";
 import { useBottomAnchoredScroll } from "@/components/ui/bottom-anchored-scroll-body.js";
 import {
   ThreadTimelineRows,
+  type ThreadTimelineLinkHandler,
   type ThreadTimelineLocalFileLinkHandler,
   type ThreadTimelineUnreadDividerPlacement,
   type TimelineTitleActionResolver,
@@ -37,6 +38,7 @@ interface ThreadTimelinePaneProps {
   erroredTurnSummaryIds: ReadonlySet<string>;
   onLoadOlderRows: () => void;
   onLoadTurnSummaryRows: (entry: TimelineTurnRow) => void;
+  onOpenLink?: ThreadTimelineLinkHandler;
   onOpenLocalFileLink?: ThreadTimelineLocalFileLinkHandler;
   onTitleAction?: TimelineTitleActionResolver;
   projectId?: string;
@@ -137,6 +139,7 @@ export function ThreadTimelinePane({
   erroredTurnSummaryIds,
   onLoadOlderRows,
   onLoadTurnSummaryRows,
+  onOpenLink,
   onOpenLocalFileLink,
   onTitleAction,
   projectId,
@@ -202,6 +205,7 @@ export function ThreadTimelinePane({
               loadingTurnSummaryIds={loadingTurnSummaryIds}
               erroredTurnSummaryIds={erroredTurnSummaryIds}
               onLoadTurnSummaryRows={onLoadTurnSummaryRows}
+              onOpenLink={onOpenLink}
               onOpenLocalFileLink={onOpenLocalFileLink}
               onTitleAction={onTitleAction}
               projectId={projectId}
diff --git a/apps/app/src/views/thread-detail/threadSecondaryPanelSelection.ts b/apps/app/src/views/thread-detail/threadSecondaryPanelSelection.ts
index ab3ecedef..7eeae05c4 100644
--- a/apps/app/src/views/thread-detail/threadSecondaryPanelSelection.ts
+++ b/apps/app/src/views/thread-detail/threadSecondaryPanelSelection.ts
@@ -57,6 +57,7 @@ function getSecondaryPanelForFixedTab(
     case "host-file-preview":
     case "thread-storage-file-preview":
     case "app":
+    case "browser":
     case "new-tab":
       return "thread-info";
     case "terminal":
diff --git a/apps/cli/src/__tests__/command-output.test.ts b/apps/cli/src/__tests__/command-output.test.ts
index a2c6ee265..ef3849e1e 100644
--- a/apps/cli/src/__tests__/command-output.test.ts
+++ b/apps/cli/src/__tests__/command-output.test.ts
@@ -3294,6 +3294,127 @@ describe("CLI JSON output contracts", () => {
     );
   });
 
+  it("bb thread update sets a sticky model and reasoning level override", async () => {
+    const thread: Thread = makeThread({
+      id: "thread-update-3",
+      projectId: "proj-1",
+      providerId: "claude-code",
+      type: "standard",
+      status: "idle",
+      createdAt: 1,
+      updatedAt: 1,
+    });
+    const get = vi.fn(async () => thread);
+    const patch = vi.fn(async () => thread);
+    createClientMock.mockReturnValue(
+      asServerClient({
+        api: {
+          v1: {
+            threads: {
+              ":id": {
+                $get: get,
+                $patch: patch,
+              },
+            },
+          },
+        },
+      }),
+    );
+
+    await runCommand(
+      [
+        "thread",
+        "update",
+        "thread-update-3",
+        "--model",
+        "claude-opus-4-8",
+        "--reasoning-level",
+        "high",
+      ],
+      (program) => registerThreadCommands(program, () => "http://server"),
+    );
+
+    expect(patch).toHaveBeenCalledWith({
+      param: { id: "thread-update-3" },
+      json: { model: "claude-opus-4-8", reasoningLevel: "high" },
+    });
+    const lines = collectLogLines(vi.mocked(console.log));
+    expect(lines).toContain("Model: claude-opus-4-8");
+    expect(lines).toContain("Reasoning level: high");
+  });
+
+  it("bb thread update sets the model override independently", async () => {
+    const thread: Thread = makeThread({
+      id: "thread-update-4",
+      projectId: "proj-1",
+      providerId: "claude-code",
+      type: "standard",
+      status: "idle",
+      createdAt: 1,
+      updatedAt: 1,
+    });
+    const get = vi.fn(async () => thread);
+    const patch = vi.fn(async () => thread);
+    createClientMock.mockReturnValue(
+      asServerClient({
+        api: {
+          v1: {
+            threads: {
+              ":id": {
+                $get: get,
+                $patch: patch,
+              },
+            },
+          },
+        },
+      }),
+    );
+
+    await runCommand(
+      ["thread", "update", "thread-update-4", "--model", "claude-opus-4-8"],
+      (program) => registerThreadCommands(program, () => "http://server"),
+    );
+
+    expect(patch).toHaveBeenCalledWith({
+      param: { id: "thread-update-4" },
+      json: { model: "claude-opus-4-8" },
+    });
+  });
+
+  it("bb thread update rejects an invalid reasoning level before calling the API", async () => {
+    const patch = vi.fn();
+    createClientMock.mockReturnValue(
+      asServerClient({
+        api: {
+          v1: {
+            threads: {
+              ":id": {
+                $patch: patch,
+              },
+            },
+          },
+        },
+      }),
+    );
+
+    await expect(
+      runCommand(
+        [
+          "thread",
+          "update",
+          "thread-update-5",
+          "--reasoning-level",
+          "turbo",
+        ],
+        (program) => registerThreadCommands(program, () => "http://server"),
+      ),
+    ).rejects.toThrow("process.exit:1");
+    expect(vi.mocked(console.error)).toHaveBeenCalledWith(
+      expect.stringContaining("Invalid reasoning level 'turbo'"),
+    );
+    expect(patch).not.toHaveBeenCalled();
+  });
+
   it("bb environment update --json prints the updated environment", async () => {
     const environment = makeEnvironment({
       id: "env-json-update",
diff --git a/apps/cli/src/commands/thread/actions.ts b/apps/cli/src/commands/thread/actions.ts
index d5a7b0af8..8446ec9cc 100644
--- a/apps/cli/src/commands/thread/actions.ts
+++ b/apps/cli/src/commands/thread/actions.ts
@@ -22,6 +22,8 @@ interface ThreadUpdateCommandOptions {
   title?: string;
   parentThread?: string;
   clearParentThread?: boolean;
+  model?: string;
+  reasoningLevel?: string;
 }
 
 interface ThreadArchiveCommandOptions {
@@ -72,6 +74,8 @@ interface PostThreadMessageArgs {
 interface ThreadUpdateBody {
   title?: string;
   parentThreadId?: string | null;
+  model?: string;
+  reasoningLevel?: ReasoningLevel;
 }
 
 export function registerActionsCommands(
@@ -86,6 +90,14 @@ export function registerActionsCommands(
     .option("--title <title>", "Set the thread title")
     .option("--parent-thread <id>", "Set the managing parent thread id")
     .option("--clear-parent-thread", "Clear the managing parent thread id")
+    .option(
+      "--model <model>",
+      "Set the sticky model applied on the thread's next turn",
+    )
+    .option(
+      "--reasoning-level <level>",
+      "Set the sticky reasoning level applied on the thread's next turn: low, medium, high, xhigh, max (provider-dependent)",
+    )
     .action(
       action(
         async (id: string | undefined, opts: ThreadUpdateCommandOptions) => {
@@ -95,9 +107,16 @@ export function registerActionsCommands(
               "Cannot combine --parent-thread with --clear-parent-thread.",
             );
           }
-          if (!opts.parentThread && !opts.clearParentThread && !opts.title) {
+          const reasoningLevel = parseReasoningLevel(opts.reasoningLevel);
+          if (
+            !opts.parentThread &&
+            !opts.clearParentThread &&
+            !opts.title &&
+            !opts.model &&
+            !reasoningLevel
+          ) {
             throw new Error(
-              "No changes requested. Provide --title, --parent-thread, or --clear-parent-thread.",
+              "No changes requested. Provide --title, --parent-thread, --clear-parent-thread, --model, or --reasoning-level.",
             );
           }
 
@@ -111,6 +130,12 @@ export function registerActionsCommands(
           } else if (opts.clearParentThread) {
             body.parentThreadId = null;
           }
+          if (opts.model) {
+            body.model = opts.model;
+          }
+          if (reasoningLevel) {
+            body.reasoningLevel = reasoningLevel;
+          }
 
           const thread = await unwrap<Thread>(
             client.api.v1.threads[":id"].$patch({
@@ -130,6 +155,12 @@ export function registerActionsCommands(
                 : "No managing parent thread",
             );
           }
+          if (opts.model) {
+            console.log(`Model: ${opts.model}`);
+          }
+          if (reasoningLevel) {
+            console.log(`Reasoning level: ${reasoningLevel}`);
+          }
         },
       ),
     );
diff --git a/apps/desktop/src/desktop-browser-ipc.ts b/apps/desktop/src/desktop-browser-ipc.ts
new file mode 100644
index 000000000..5338c15b7
--- /dev/null
+++ b/apps/desktop/src/desktop-browser-ipc.ts
@@ -0,0 +1,21 @@
+// Channel names for the desktop-only web browser surface. Renderer → main
+// commands drive a hardened, isolated `WebContentsView`; main → renderer pushes
+// carry navigation state and popup-open requests. Mirrors the `bb-desktop:*`
+// convention in `desktop-update-ipc.ts`.
+
+export const BB_DESKTOP_BROWSER_ATTACH_CHANNEL = "bb-desktop:browser:attach";
+export const BB_DESKTOP_BROWSER_DETACH_CHANNEL = "bb-desktop:browser:detach";
+export const BB_DESKTOP_BROWSER_NAVIGATE_CHANNEL =
+  "bb-desktop:browser:navigate";
+export const BB_DESKTOP_BROWSER_GO_BACK_CHANNEL = "bb-desktop:browser:go-back";
+export const BB_DESKTOP_BROWSER_GO_FORWARD_CHANNEL =
+  "bb-desktop:browser:go-forward";
+export const BB_DESKTOP_BROWSER_RELOAD_CHANNEL = "bb-desktop:browser:reload";
+export const BB_DESKTOP_BROWSER_STOP_CHANNEL = "bb-desktop:browser:stop";
+export const BB_DESKTOP_BROWSER_SET_BOUNDS_CHANNEL =
+  "bb-desktop:browser:set-bounds";
+export const BB_DESKTOP_BROWSER_SET_VISIBLE_CHANNEL =
+  "bb-desktop:browser:set-visible";
+export const BB_DESKTOP_BROWSER_STATE_CHANNEL = "bb-desktop:browser:state";
+export const BB_DESKTOP_BROWSER_OPEN_TAB_CHANNEL =
+  "bb-desktop:browser:open-tab";
diff --git a/apps/desktop/src/desktop-browser-policy.ts b/apps/desktop/src/desktop-browser-policy.ts
new file mode 100644
index 000000000..12685d3ff
--- /dev/null
+++ b/apps/desktop/src/desktop-browser-policy.ts
@@ -0,0 +1,228 @@
+// Pure navigation/popup policy for the in-app browser view. Kept free of any
+// `electron` import so it can be unit tested under vitest's node environment.
+
+/**
+ * Only `http`/`https` top-level navigations are allowed in the browser view.
+ * Everything else (`file:`, `javascript:`, custom schemes, `about:` beyond
+ * blank) is treated as hostile and blocked.
+ */
+export function isAllowedBrowserUrl(url: string): boolean {
+  let parsed: URL;
+  try {
+    parsed = new URL(url);
+  } catch {
+    return false;
+  }
+  return parsed.protocol === "http:" || parsed.protocol === "https:";
+}
+
+export interface WindowOpenDecision {
+  /** The URL to open as a new in-panel tab, or null to deny entirely. */
+  openTabUrl: string | null;
+}
+
+/**
+ * Decide what to do with a `window.open`/`target=_blank` request. The native OS
+ * popup is always denied by the caller; an allowed http(s) URL is surfaced so
+ * the renderer can open it as a new in-panel browser tab.
+ */
+export function resolveWindowOpenAction(url: string): WindowOpenDecision {
+  return { openTabUrl: isAllowedBrowserUrl(url) ? url : null };
+}
+
+// --- Loopback / LAN request firewall ---
+//
+// Untrusted browsed pages must never be able to reach bb's own loopback
+// services (server `/ws`, host-daemon local API) or other hosts on the user's
+// LAN. CORS only filters responses; it does not stop the request from being
+// sent and acted on. So we block at the network layer (see the
+// `session.webRequest` wiring in desktop-browser-view) using these predicates,
+// which classify the request's URL host as loopback / link-local / private.
+//
+// Residual: this classifies the URL host, not the DNS-resolved address, so a
+// public name that resolves to a private IP (DNS rebinding) is not caught here.
+// That is a deeper, separate mitigation and out of scope for v1.
+
+function parseIpv4Octets(host: string): number[] | null {
+  const match = /^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})$/.exec(host);
+  if (match === null) {
+    return null;
+  }
+  const octets = [match[1], match[2], match[3], match[4]].map((part) =>
+    Number(part),
+  );
+  return octets.some((octet) => octet > 255) ? null : octets;
+}
+
+function isBlockedIpv4(octets: readonly number[]): boolean {
+  const [a, b] = octets;
+  if (a === 0) return true; // 0.0.0.0/8 "this host"
+  if (a === 127) return true; // 127.0.0.0/8 loopback
+  if (a === 10) return true; // 10.0.0.0/8 private
+  if (a === 172 && b >= 16 && b <= 31) return true; // 172.16.0.0/12 private
+  if (a === 192 && b === 168) return true; // 192.168.0.0/16 private
+  if (a === 169 && b === 254) return true; // 169.254.0.0/16 link-local
+  if (a === 100 && b >= 64 && b <= 127) return true; // 100.64.0.0/10 CGNAT
+  if (a >= 224) return true; // multicast / reserved / broadcast
+  return false;
+}
+
+function expandIpv6(host: string): number[] | null {
+  let work = host;
+  // Fold a trailing embedded IPv4 (e.g. ::ffff:127.0.0.1) into two hextets.
+  const dotIndex = work.indexOf(".");
+  if (dotIndex !== -1) {
+    const lastColon = work.lastIndexOf(":", dotIndex);
+    if (lastColon === -1) {
+      return null;
+    }
+    const v4 = parseIpv4Octets(work.slice(lastColon + 1));
+    if (v4 === null) {
+      return null;
+    }
+    const high = ((v4[0] << 8) | v4[1]).toString(16);
+    const low = ((v4[2] << 8) | v4[3]).toString(16);
+    work = `${work.slice(0, lastColon + 1)}${high}:${low}`;
+  }
+  const sides = work.split("::");
+  if (sides.length > 2) {
+    return null;
+  }
+  const toGroups = (part: string): string[] =>
+    part.length === 0 ? [] : part.split(":");
+  const head = toGroups(sides[0]);
+  let groups: string[];
+  if (sides.length === 2) {
+    const tail = toGroups(sides[1]);
+    const missing = 8 - head.length - tail.length;
+    if (missing < 0) {
+      return null;
+    }
+    groups = [...head, ...new Array<string>(missing).fill("0"), ...tail];
+  } else {
+    groups = head;
+  }
+  if (groups.length !== 8) {
+    return null;
+  }
+  const hextets: number[] = [];
+  for (const group of groups) {
+    if (!/^[0-9a-f]{1,4}$/.test(group)) {
+      return null;
+    }
+    hextets.push(parseInt(group, 16));
+  }
+  return hextets;
+}
+
+function isBlockedIpv6Literal(host: string): boolean {
+  const hextets = expandIpv6(host);
+  if (hextets === null) {
+    return true; // unparseable IPv6 literal → block to be safe
+  }
+  const leadingZeros = hextets.slice(0, 7).every((value) => value === 0);
+  if (leadingZeros && hextets[7] === 1) return true; // ::1 loopback
+  if (hextets.every((value) => value === 0)) return true; // :: unspecified
+  if ((hextets[0] & 0xffc0) === 0xfe80) return true; // fe80::/10 link-local
+  if ((hextets[0] & 0xfe00) === 0xfc00) return true; // fc00::/7 unique-local
+  // IPv4-mapped (::ffff:a.b.c.d) and IPv4-compatible (::a.b.c.d).
+  const firstFiveZero = hextets.slice(0, 5).every((value) => value === 0);
+  if (firstFiveZero && (hextets[5] === 0xffff || hextets[5] === 0)) {
+    return isBlockedIpv4([
+      hextets[6] >> 8,
+      hextets[6] & 0xff,
+      hextets[7] >> 8,
+      hextets[7] & 0xff,
+    ]);
+  }
+  return false;
+}
+
+/**
+ * Whether a request host (URL hostname, no port) must be blocked because it
+ * targets loopback, link-local, private/LAN, or mDNS `.local` space. Public
+ * names and addresses return false. Exported for unit testing.
+ */
+export function isBlockedBrowserRequestHost(rawHost: string): boolean {
+  let host = rawHost.trim().toLowerCase();
+  if (host.length === 0) {
+    return true;
+  }
+  if (host.startsWith("[") && host.endsWith("]")) {
+    host = host.slice(1, -1);
+  }
+  const zoneIndex = host.indexOf("%");
+  if (zoneIndex !== -1) {
+    host = host.slice(0, zoneIndex);
+  }
+  if (host === "localhost" || host.endsWith(".localhost")) {
+    return true;
+  }
+  if (host === "local" || host.endsWith(".local")) {
+    return true;
+  }
+  const ipv4 = parseIpv4Octets(host);
+  if (ipv4 !== null) {
+    return isBlockedIpv4(ipv4);
+  }
+  if (host.includes(":")) {
+    return isBlockedIpv6Literal(host);
+  }
+  return false;
+}
+
+/**
+ * Whether a network request URL must be blocked. Only `http(s)`/`ws(s)` carry a
+ * remote host worth guarding; `data:`/`blob:`/`about:` have none and are
+ * allowed (`webSecurity` guards `file:`). Exported for unit testing.
+ */
+export function isBlockedBrowserRequestUrl(url: string): boolean {
+  let parsed: URL;
+  try {
+    parsed = new URL(url);
+  } catch {
+    return false;
+  }
+  const protocol = parsed.protocol;
+  if (
+    protocol !== "http:" &&
+    protocol !== "https:" &&
+    protocol !== "ws:" &&
+    protocol !== "wss:"
+  ) {
+    return false;
+  }
+  return isBlockedBrowserRequestHost(parsed.hostname);
+}
+
+// --- Popup-tab rate limiting ---
+
+export interface PopupRateDecision {
+  allowed: boolean;
+  timestamps: number[];
+}
+
+export interface EvaluatePopupRateArgs {
+  timestamps: readonly number[];
+  now: number;
+  windowMs: number;
+  maxInWindow: number;
+}
+
+/**
+ * Sliding-window rate gate for popup → in-panel-tab creation, so a hostile page
+ * cannot spam tabs. Returns the (pruned) timestamp list the caller should
+ * persist, plus whether this popup is allowed. Pure; exported for unit testing.
+ */
+export function evaluatePopupRate({
+  timestamps,
+  now,
+  windowMs,
+  maxInWindow,
+}: EvaluatePopupRateArgs): PopupRateDecision {
+  const recent = timestamps.filter((stamp) => now - stamp < windowMs);
+  if (recent.length >= maxInWindow) {
+    return { allowed: false, timestamps: recent };
+  }
+  return { allowed: true, timestamps: [...recent, now] };
+}
diff --git a/apps/desktop/src/desktop-browser-view.ts b/apps/desktop/src/desktop-browser-view.ts
new file mode 100644
index 000000000..5ec844ded
--- /dev/null
+++ b/apps/desktop/src/desktop-browser-view.ts
@@ -0,0 +1,375 @@
+import {
+  WebContentsView,
+  session,
+  type BrowserWindow,
+  type Session,
+} from "electron";
+import {
+  BB_DESKTOP_BROWSER_MAX_TITLE_LENGTH,
+  BB_DESKTOP_BROWSER_MAX_URL_LENGTH,
+  type BbDesktopBrowserAttachRequest,
+  type BbDesktopBrowserNavigateRequest,
+  type BbDesktopBrowserSetBoundsRequest,
+  type BbDesktopBrowserSetVisibleRequest,
+  type BbDesktopBrowserState,
+} from "@bb/server-contract";
+import {
+  BB_DESKTOP_BROWSER_OPEN_TAB_CHANNEL,
+  BB_DESKTOP_BROWSER_STATE_CHANNEL,
+} from "./desktop-browser-ipc.js";
+import {
+  evaluatePopupRate,
+  isAllowedBrowserUrl,
+  isBlockedBrowserRequestUrl,
+  resolveWindowOpenAction,
+} from "./desktop-browser-policy.js";
+
+// At most this many popup → in-panel tabs may be spawned per view in a sliding
+// window, so a hostile page cannot flood the panel with tabs.
+const POPUP_RATE_WINDOW_MS = 10_000;
+const POPUP_RATE_MAX_IN_WINDOW = 3;
+
+function truncate(value: string, max: number): string {
+  return value.length > max ? value.slice(0, max) : value;
+}
+
+/**
+ * Isolated, persistent partition for the in-app browser. Cookies/storage never
+ * touch the bb app session (`defaultSession`) or the user's real browser.
+ */
+export const BB_BROWSER_PARTITION = "persist:bb-browser";
+
+/**
+ * `did-fail-load` reports aborted main-frame loads (a user navigating away, a
+ * redirect) with this code; it is not a real error and must not surface one.
+ */
+const ERR_ABORTED = -3;
+
+interface BrowserViewEntry {
+  view: WebContentsView;
+  lastErrorText: string | null;
+  popupTimestamps: number[];
+}
+
+interface CreateDesktopBrowserViewManagerArgs {
+  partition?: string;
+}
+
+interface HostScopedRequestArgs<TRequest> {
+  hostWindow: BrowserWindow;
+  request: TRequest;
+}
+
+interface HostScopedTabArgs {
+  hostWindow: BrowserWindow;
+  tabId: string;
+}
+
+export interface DesktopBrowserViewManager {
+  attach(args: HostScopedRequestArgs<BbDesktopBrowserAttachRequest>): void;
+  detach(args: HostScopedTabArgs): void;
+  navigate(args: HostScopedRequestArgs<BbDesktopBrowserNavigateRequest>): void;
+  goBack(args: HostScopedTabArgs): void;
+  goForward(args: HostScopedTabArgs): void;
+  reload(args: HostScopedTabArgs): void;
+  stop(args: HostScopedTabArgs): void;
+  setBounds(
+    args: HostScopedRequestArgs<BbDesktopBrowserSetBoundsRequest>,
+  ): void;
+  setVisible(
+    args: HostScopedRequestArgs<BbDesktopBrowserSetVisibleRequest>,
+  ): void;
+  /**
+   * Drop every view owned by a closed host window. Keyed by the host
+   * `webContents.id` because the host `BrowserWindow` (and its child views) are
+   * already torn down by the time `closed` fires.
+   */
+  releaseWindow(hostWebContentsId: number): void;
+  destroyAll(): void;
+}
+
+function browserViewKey(hostWindow: BrowserWindow, tabId: string): string {
+  return `${hostWindow.webContents.id}:${tabId}`;
+}
+
+function send(hostWindow: BrowserWindow, channel: string, payload: unknown): void {
+  if (hostWindow.isDestroyed() || hostWindow.webContents.isDestroyed()) {
+    return;
+  }
+  hostWindow.webContents.send(channel, payload);
+}
+
+function buildBrowserState(
+  tabId: string,
+  entry: BrowserViewEntry,
+): BbDesktopBrowserState {
+  const webContents = entry.view.webContents;
+  const url = webContents.getURL();
+  const rawTitle = webContents.getTitle();
+  const title = rawTitle.length > 0 && rawTitle !== url ? rawTitle : null;
+  // Truncate attacker-influenced strings to the contract caps so the push
+  // always validates and oversized values never reach the renderer/localStorage.
+  return {
+    tabId,
+    url: truncate(url, BB_DESKTOP_BROWSER_MAX_URL_LENGTH),
+    title: title === null ? null : truncate(title, BB_DESKTOP_BROWSER_MAX_TITLE_LENGTH),
+    isLoading: webContents.isLoadingMainFrame(),
+    canGoBack: webContents.navigationHistory.canGoBack(),
+    canGoForward: webContents.navigationHistory.canGoForward(),
+    errorText:
+      entry.lastErrorText === null
+        ? null
+        : truncate(entry.lastErrorText, BB_DESKTOP_BROWSER_MAX_TITLE_LENGTH),
+  };
+}
+
+export function createDesktopBrowserViewManager(
+  args: CreateDesktopBrowserViewManagerArgs = {},
+): DesktopBrowserViewManager {
+  const partition = args.partition ?? BB_BROWSER_PARTITION;
+  const entries = new Map<string, BrowserViewEntry>();
+  let hardenedSession: Session | null = null;
+
+  function ensureHardenedSession(): Session {
+    if (hardenedSession !== null) {
+      return hardenedSession;
+    }
+    const browserSession = session.fromPartition(partition);
+    // Deny every device/capability permission by default in v1 (camera, mic,
+    // geolocation, notifications, MIDI, …). A prompt UI is a later phase.
+    browserSession.setPermissionRequestHandler((_wc, _permission, callback) => {
+      callback(false);
+    });
+    browserSession.setPermissionCheckHandler(() => false);
+    // Downloads are denied in v1 (lowest file-surface risk).
+    browserSession.on("will-download", (event) => {
+      event.preventDefault();
+    });
+    // Network firewall: untrusted pages must not be able to reach bb's loopback
+    // services or the user's LAN. This fires for ALL resource types — top-level
+    // navigation, subresources, fetch/XHR, and WebSockets — so CORS-bypassing
+    // requests to 127.0.0.1 / private ranges are cancelled before they are sent.
+    browserSession.webRequest.onBeforeRequest((details, callback) => {
+      callback({ cancel: isBlockedBrowserRequestUrl(details.url) });
+    });
+    hardenedSession = browserSession;
+    return browserSession;
+  }
+
+  function pushState(hostWindow: BrowserWindow, tabId: string): void {
+    const entry = entries.get(browserViewKey(hostWindow, tabId));
+    if (!entry || entry.view.webContents.isDestroyed()) {
+      return;
+    }
+    send(
+      hostWindow,
+      BB_DESKTOP_BROWSER_STATE_CHANNEL,
+      buildBrowserState(tabId, entry),
+    );
+  }
+
+  function wireWebContents(
+    hostWindow: BrowserWindow,
+    tabId: string,
+    entry: BrowserViewEntry,
+  ): void {
+    const webContents = entry.view.webContents;
+
+    webContents.on("will-navigate", (event, url) => {
+      if (!isAllowedBrowserUrl(url)) {
+        event.preventDefault();
+      }
+    });
+    webContents.on("will-redirect", (event, url) => {
+      if (!isAllowedBrowserUrl(url)) {
+        event.preventDefault();
+      }
+    });
+
+    webContents.setWindowOpenHandler((details) => {
+      const { openTabUrl } = resolveWindowOpenAction(details.url);
+      if (openTabUrl !== null) {
+        const decision = evaluatePopupRate({
+          timestamps: entry.popupTimestamps,
+          now: Date.now(),
+          windowMs: POPUP_RATE_WINDOW_MS,
+          maxInWindow: POPUP_RATE_MAX_IN_WINDOW,
+        });
+        entry.popupTimestamps = decision.timestamps;
+        if (decision.allowed) {
+          send(hostWindow, BB_DESKTOP_BROWSER_OPEN_TAB_CHANNEL, {
+            url: openTabUrl,
+          });
+        }
+      }
+      return { action: "deny" };
+    });
+
+    const refresh = () => pushState(hostWindow, tabId);
+    webContents.on("did-start-loading", refresh);
+    webContents.on("did-stop-loading", refresh);
+    webContents.on("did-navigate", () => {
+      entry.lastErrorText = null;
+      refresh();
+    });
+    webContents.on("did-navigate-in-page", refresh);
+    webContents.on("did-start-navigation", () => {
+      entry.lastErrorText = null;
+      refresh();
+    });
+    webContents.on("page-title-updated", refresh);
+    // Favicons are intentionally NOT forwarded: a remote, attacker-controlled
+    // favicon URL must never be rendered (or fetched) by the trusted bb app
+    // surface. The renderer shows a generic globe icon instead.
+    webContents.on(
+      "did-fail-load",
+      (_event, errorCode, errorDescription, _validatedURL, isMainFrame) => {
+        if (!isMainFrame || errorCode === ERR_ABORTED) {
+          return;
+        }
+        entry.lastErrorText =
+          errorDescription.length > 0 ? errorDescription : "Failed to load page";
+        refresh();
+      },
+    );
+  }
+
+  function createEntry(
+    hostWindow: BrowserWindow,
+    tabId: string,
+  ): BrowserViewEntry {
+    ensureHardenedSession();
+    const view = new WebContentsView({
+      webPreferences: {
+        partition,
+        sandbox: true,
+        contextIsolation: true,
+        nodeIntegration: false,
+        webSecurity: true,
+        allowRunningInsecureContent: false,
+        // Intentionally NO preload: browsed pages are untrusted and must never
+        // receive a bb bridge.
+      },
+    });
+    const entry: BrowserViewEntry = {
+      view,
+      lastErrorText: null,
+      popupTimestamps: [],
+    };
+    wireWebContents(hostWindow, tabId, entry);
+    hostWindow.contentView.addChildView(view);
+    entries.set(browserViewKey(hostWindow, tabId), entry);
+    return entry;
+  }
+
+  function loadIfNeeded(entry: BrowserViewEntry, url: string): void {
+    if (url.length === 0 || !isAllowedBrowserUrl(url)) {
+      return;
+    }
+    if (entry.view.webContents.getURL() === url) {
+      return;
+    }
+    entry.lastErrorText = null;
+    entry.view.webContents.loadURL(url).catch(() => {
+      // Surfaced through `did-fail-load`; swallow the rejection.
+    });
+  }
+
+  function destroyEntry(hostWindow: BrowserWindow, key: string): void {
+    const entry = entries.get(key);
+    if (!entry) {
+      return;
+    }
+    entries.delete(key);
+    if (!hostWindow.isDestroyed()) {
+      hostWindow.contentView.removeChildView(entry.view);
+    }
+    if (!entry.view.webContents.isDestroyed()) {
+      entry.view.webContents.close();
+    }
+  }
+
+  function withEntry(
+    args: HostScopedTabArgs,
+    fn: (entry: BrowserViewEntry) => void,
+  ): void {
+    const entry = entries.get(browserViewKey(args.hostWindow, args.tabId));
+    if (!entry || entry.view.webContents.isDestroyed()) {
+      return;
+    }
+    fn(entry);
+  }
+
+  return {
+    attach({ hostWindow, request }) {
+      const key = browserViewKey(hostWindow, request.tabId);
+      const entry = entries.get(key) ?? createEntry(hostWindow, request.tabId);
+      entry.view.setBounds(request.bounds);
+      entry.view.setVisible(request.visible);
+      loadIfNeeded(entry, request.url);
+      pushState(hostWindow, request.tabId);
+    },
+    detach({ hostWindow, tabId }) {
+      destroyEntry(hostWindow, browserViewKey(hostWindow, tabId));
+    },
+    navigate({ hostWindow, request }) {
+      withEntry({ hostWindow, tabId: request.tabId }, (entry) => {
+        loadIfNeeded(entry, request.url);
+      });
+    },
+    goBack({ hostWindow, tabId }) {
+      withEntry({ hostWindow, tabId }, (entry) => {
+        if (entry.view.webContents.navigationHistory.canGoBack()) {
+          entry.view.webContents.navigationHistory.goBack();
+        }
+      });
+    },
+    goForward({ hostWindow, tabId }) {
+      withEntry({ hostWindow, tabId }, (entry) => {
+        if (entry.view.webContents.navigationHistory.canGoForward()) {
+          entry.view.webContents.navigationHistory.goForward();
+        }
+      });
+    },
+    reload({ hostWindow, tabId }) {
+      withEntry({ hostWindow, tabId }, (entry) => {
+        entry.view.webContents.reload();
+      });
+    },
+    stop({ hostWindow, tabId }) {
+      withEntry({ hostWindow, tabId }, (entry) => {
+        entry.view.webContents.stop();
+      });
+    },
+    setBounds({ hostWindow, request }) {
+      withEntry({ hostWindow, tabId: request.tabId }, (entry) => {
+        entry.view.setBounds(request.bounds);
+      });
+    },
+    setVisible({ hostWindow, request }) {
+      withEntry({ hostWindow, tabId: request.tabId }, (entry) => {
+        entry.view.setVisible(request.visible);
+      });
+    },
+    releaseWindow(hostWebContentsId) {
+      const prefix = `${hostWebContentsId}:`;
+      for (const [key, entry] of [...entries.entries()]) {
+        if (!key.startsWith(prefix)) {
+          continue;
+        }
+        entries.delete(key);
+        if (!entry.view.webContents.isDestroyed()) {
+          entry.view.webContents.close();
+        }
+      }
+    },
+    destroyAll() {
+      for (const [key, entry] of [...entries.entries()]) {
+        entries.delete(key);
+        if (!entry.view.webContents.isDestroyed()) {
+          entry.view.webContents.close();
+        }
+      }
+    },
+  };
+}
diff --git a/apps/desktop/src/desktop-update-ipc.ts b/apps/desktop/src/desktop-update-ipc.ts
index 6939530b1..e03f0508b 100644
--- a/apps/desktop/src/desktop-update-ipc.ts
+++ b/apps/desktop/src/desktop-update-ipc.ts
@@ -3,3 +3,4 @@ export const BB_DESKTOP_CHECK_FOR_UPDATES_CHANNEL =
 export const BB_DESKTOP_GET_INFO_CHANNEL = "bb-desktop:get-info";
 export const BB_DESKTOP_INFO_CHANGED_CHANNEL = "bb-desktop:info-changed";
 export const BB_DESKTOP_INSTALL_UPDATE_CHANNEL = "bb-desktop:install-update";
+export const BB_DESKTOP_SET_THEME_CHANNEL = "bb-desktop:set-theme";
diff --git a/apps/desktop/src/main.ts b/apps/desktop/src/main.ts
index 2abc2f764..c613abc66 100644
--- a/apps/desktop/src/main.ts
+++ b/apps/desktop/src/main.ts
@@ -7,12 +7,21 @@ import {
   clipboard,
   ipcMain,
   nativeImage,
+  nativeTheme,
   session,
   shell,
   type Event,
 } from "electron";
 import { autoUpdater } from "electron-updater";
-import type { BbDesktopInfo } from "@bb/server-contract";
+import {
+  bbDesktopBrowserAttachRequestSchema,
+  bbDesktopBrowserNavigateRequestSchema,
+  bbDesktopBrowserSetBoundsRequestSchema,
+  bbDesktopBrowserSetVisibleRequestSchema,
+  bbDesktopBrowserTabRefSchema,
+  bbDesktopThemeSchema,
+  type BbDesktopInfo,
+} from "@bb/server-contract";
 import { z } from "zod";
 import {
   assertPathExists,
@@ -65,7 +74,23 @@ import {
   BB_DESKTOP_GET_INFO_CHANNEL,
   BB_DESKTOP_INFO_CHANGED_CHANNEL,
   BB_DESKTOP_INSTALL_UPDATE_CHANNEL,
+  BB_DESKTOP_SET_THEME_CHANNEL,
 } from "./desktop-update-ipc.js";
+import {
+  BB_DESKTOP_BROWSER_ATTACH_CHANNEL,
+  BB_DESKTOP_BROWSER_DETACH_CHANNEL,
+  BB_DESKTOP_BROWSER_GO_BACK_CHANNEL,
+  BB_DESKTOP_BROWSER_GO_FORWARD_CHANNEL,
+  BB_DESKTOP_BROWSER_NAVIGATE_CHANNEL,
+  BB_DESKTOP_BROWSER_RELOAD_CHANNEL,
+  BB_DESKTOP_BROWSER_SET_BOUNDS_CHANNEL,
+  BB_DESKTOP_BROWSER_SET_VISIBLE_CHANNEL,
+  BB_DESKTOP_BROWSER_STOP_CHANNEL,
+} from "./desktop-browser-ipc.js";
+import {
+  createDesktopBrowserViewManager,
+  type DesktopBrowserViewManager,
+} from "./desktop-browser-view.js";
 import { ensurePackagedMacOsUserShellPath } from "./desktop-shell-path.js";
 import { clearPackagedSessionHttpCache } from "./desktop-session-cache.js";
 import {
@@ -185,6 +210,7 @@ const logViewerCopyRequestSchema = z
   .strict();
 
 let desktopWindowFactory: DesktopWindowFactory | null = null;
+let desktopBrowserViewManager: DesktopBrowserViewManager | null = null;
 let desktopUpdateService: DesktopUpdateService | null = null;
 let desktopAutoUpdateService: DesktopAutoUpdateService | null = null;
 let currentRuntime: DesktopRuntime | null = null;
@@ -628,6 +654,7 @@ function handleBeforeQuit(event: Event): void {
 async function finishQuit(): Promise<void> {
   desktopUpdateService?.stop();
   desktopAutoUpdateService?.stop();
+  desktopBrowserViewManager?.destroyAll();
   await desktopWindowFactory?.persistOpenWindows();
   await stopOwnedRuntime();
 }
@@ -656,6 +683,115 @@ function registerDesktopUpdateIpc(): void {
     await finishQuit();
     desktopAutoUpdateService.installUpdate();
   });
+  // Renderer pushes the resolved bb theme so the NSWindow appearance —
+  // traffic lights and inactive title-bar chrome — follows bb's theme
+  // rather than the OS appearance. `themeSource` is app-global so a single
+  // assignment covers every BrowserWindow, including the log viewer.
+  ipcMain.on(BB_DESKTOP_SET_THEME_CHANNEL, (_event, payload: unknown) => {
+    const parsed = bbDesktopThemeSchema.safeParse(payload);
+    if (!parsed.success) {
+      return;
+    }
+    nativeTheme.themeSource = parsed.data;
+  });
+}
+
+interface DesktopBrowserTabCommandArgs {
+  hostWindow: BrowserWindow;
+  tabId: string;
+}
+
+function registerDesktopBrowserIpc(manager: DesktopBrowserViewManager): void {
+  // Every browser command is renderer → main fire-and-forget; navigation state
+  // flows back over `BB_DESKTOP_BROWSER_STATE_CHANNEL`. Each handler resolves
+  // its own host window from the sender, so multi-window is safe, and zod-parses
+  // the (untrusted-content-adjacent) payload before touching the view.
+  const registerTabCommand = (
+    channel: string,
+    run: (args: DesktopBrowserTabCommandArgs) => void,
+  ): void => {
+    ipcMain.on(channel, (event, payload: unknown) => {
+      const hostWindow = BrowserWindow.fromWebContents(event.sender);
+      if (hostWindow === null) {
+        return;
+      }
+      const parsed = bbDesktopBrowserTabRefSchema.safeParse(payload);
+      if (!parsed.success) {
+        return;
+      }
+      run({ hostWindow, tabId: parsed.data.tabId });
+    });
+  };
+
+  ipcMain.on(BB_DESKTOP_BROWSER_ATTACH_CHANNEL, (event, payload: unknown) => {
+    const hostWindow = BrowserWindow.fromWebContents(event.sender);
+    if (hostWindow === null) {
+      return;
+    }
+    const parsed = bbDesktopBrowserAttachRequestSchema.safeParse(payload);
+    if (!parsed.success) {
+      return;
+    }
+    manager.attach({ hostWindow, request: parsed.data });
+  });
+
+  ipcMain.on(BB_DESKTOP_BROWSER_NAVIGATE_CHANNEL, (event, payload: unknown) => {
+    const hostWindow = BrowserWindow.fromWebContents(event.sender);
+    if (hostWindow === null) {
+      return;
+    }
+    const parsed = bbDesktopBrowserNavigateRequestSchema.safeParse(payload);
+    if (!parsed.success) {
+      return;
+    }
+    manager.navigate({ hostWindow, request: parsed.data });
+  });
+
+  ipcMain.on(
+    BB_DESKTOP_BROWSER_SET_BOUNDS_CHANNEL,
+    (event, payload: unknown) => {
+      const hostWindow = BrowserWindow.fromWebContents(event.sender);
+      if (hostWindow === null) {
+        return;
+      }
+      const parsed = bbDesktopBrowserSetBoundsRequestSchema.safeParse(payload);
+      if (!parsed.success) {
+        return;
+      }
+      manager.setBounds({ hostWindow, request: parsed.data });
+    },
+  );
+
+  ipcMain.on(
+    BB_DESKTOP_BROWSER_SET_VISIBLE_CHANNEL,
+    (event, payload: unknown) => {
+      const hostWindow = BrowserWindow.fromWebContents(event.sender);
+      if (hostWindow === null) {
+        return;
+      }
+      const parsed = bbDesktopBrowserSetVisibleRequestSchema.safeParse(payload);
+      if (!parsed.success) {
+        return;
+      }
+      manager.setVisible({ hostWindow, request: parsed.data });
+    },
+  );
+
+  registerTabCommand(BB_DESKTOP_BROWSER_DETACH_CHANNEL, (args) =>
+    manager.detach(args),
+  );
+  registerTabCommand(BB_DESKTOP_BROWSER_GO_BACK_CHANNEL, (args) =>
+    manager.goBack(args),
+  );
+  registerTabCommand(BB_DESKTOP_BROWSER_GO_FORWARD_CHANNEL, (args) =>
+    manager.goForward(args),
+  );
+  registerTabCommand(BB_DESKTOP_BROWSER_RELOAD_CHANNEL, (args) =>
+    manager.reload(args),
+  );
+  registerTabCommand(BB_DESKTOP_BROWSER_STOP_CHANNEL, (args) =>
+    manager.stop(args),
+  );
 }
 
 async function startOwnedRuntime(
@@ -824,6 +960,12 @@ async function runDesktopApp(): Promise<void> {
     void desktopUpdateService?.checkAfterActive();
     void desktopAutoUpdateService?.checkAfterActive();
   });
+  app.on("browser-window-created", (_event, browserWindow) => {
+    const hostWebContentsId = browserWindow.webContents.id;
+    browserWindow.once("closed", () => {
+      desktopBrowserViewManager?.releaseWindow(hostWebContentsId);
+    });
+  });
   registerDesktopShutdownSignalHandlers({
     exitProcess(code) {
       process.exitCode = code;
@@ -905,6 +1047,8 @@ async function runDesktopApp(): Promise<void> {
     sendDesktopInfoChanged();
   });
   registerDesktopUpdateIpc();
+  desktopBrowserViewManager = createDesktopBrowserViewManager();
+  registerDesktopBrowserIpc(desktopBrowserViewManager);
   desktopUpdateService.start();
   desktopAutoUpdateService.start();
 
diff --git a/apps/desktop/src/preload.ts b/apps/desktop/src/preload.ts
index e98f19b45..0c25ea90f 100644
--- a/apps/desktop/src/preload.ts
+++ b/apps/desktop/src/preload.ts
@@ -1,17 +1,38 @@
 import { contextBridge, ipcRenderer } from "electron";
 import {
+  bbDesktopBrowserOpenTabRequestSchema,
+  bbDesktopBrowserStateSchema,
   bbDesktopInfoSchema,
   type BbDesktopApi,
+  type BbDesktopBrowserApi,
+  type BbDesktopBrowserOpenTabHandler,
+  type BbDesktopBrowserStateHandler,
+  type BbDesktopBrowserUnsubscribe,
   type BbDesktopInfo,
   type BbDesktopInfoChangeHandler,
   type BbDesktopInfoUnsubscribe,
+  type BbDesktopTheme,
 } from "@bb/server-contract";
 import {
   BB_DESKTOP_CHECK_FOR_UPDATES_CHANNEL,
   BB_DESKTOP_GET_INFO_CHANNEL,
   BB_DESKTOP_INFO_CHANGED_CHANNEL,
   BB_DESKTOP_INSTALL_UPDATE_CHANNEL,
+  BB_DESKTOP_SET_THEME_CHANNEL,
 } from "./desktop-update-ipc.js";
+import {
+  BB_DESKTOP_BROWSER_ATTACH_CHANNEL,
+  BB_DESKTOP_BROWSER_DETACH_CHANNEL,
+  BB_DESKTOP_BROWSER_GO_BACK_CHANNEL,
+  BB_DESKTOP_BROWSER_GO_FORWARD_CHANNEL,
+  BB_DESKTOP_BROWSER_NAVIGATE_CHANNEL,
+  BB_DESKTOP_BROWSER_OPEN_TAB_CHANNEL,
+  BB_DESKTOP_BROWSER_RELOAD_CHANNEL,
+  BB_DESKTOP_BROWSER_SET_BOUNDS_CHANNEL,
+  BB_DESKTOP_BROWSER_SET_VISIBLE_CHANNEL,
+  BB_DESKTOP_BROWSER_STATE_CHANNEL,
+  BB_DESKTOP_BROWSER_STOP_CHANNEL,
+} from "./desktop-browser-ipc.js";
 
 function getDesktopVersion(version: string | undefined): string {
   if (version === undefined || version.length === 0) {
@@ -68,7 +89,53 @@ async function invokeInstallUpdate(): Promise<void> {
   }
 }
 
+const browserStateListeners = new Set<BbDesktopBrowserStateHandler>();
+const browserOpenTabListeners = new Set<BbDesktopBrowserOpenTabHandler>();
+
+const bbBrowserApi: BbDesktopBrowserApi = {
+  attach(request): void {
+    ipcRenderer.send(BB_DESKTOP_BROWSER_ATTACH_CHANNEL, request);
+  },
+  detach(tabId): void {
+    ipcRenderer.send(BB_DESKTOP_BROWSER_DETACH_CHANNEL, { tabId });
+  },
+  navigate(request): void {
+    ipcRenderer.send(BB_DESKTOP_BROWSER_NAVIGATE_CHANNEL, request);
+  },
+  goBack(tabId): void {
+    ipcRenderer.send(BB_DESKTOP_BROWSER_GO_BACK_CHANNEL, { tabId });
+  },
+  goForward(tabId): void {
+    ipcRenderer.send(BB_DESKTOP_BROWSER_GO_FORWARD_CHANNEL, { tabId });
+  },
+  reload(tabId): void {
+    ipcRenderer.send(BB_DESKTOP_BROWSER_RELOAD_CHANNEL, { tabId });
+  },
+  stop(tabId): void {
+    ipcRenderer.send(BB_DESKTOP_BROWSER_STOP_CHANNEL, { tabId });
+  },
+  setBounds(request): void {
+    ipcRenderer.send(BB_DESKTOP_BROWSER_SET_BOUNDS_CHANNEL, request);
+  },
+  setVisible(request): void {
+    ipcRenderer.send(BB_DESKTOP_BROWSER_SET_VISIBLE_CHANNEL, request);
+  },
+  onState(listener): BbDesktopBrowserUnsubscribe {
+    browserStateListeners.add(listener);
+    return () => {
+      browserStateListeners.delete(listener);
+    };
+  },
+  onOpenTab(listener): BbDesktopBrowserUnsubscribe {
+    browserOpenTabListeners.add(listener);
+    return () => {
+      browserOpenTabListeners.delete(listener);
+    };
+  },
+};
+
 const bbDesktopApi: BbDesktopApi = {
+  browser: bbBrowserApi,
   get lastCheckedAt() {
     return currentInfo.lastCheckedAt;
   },
@@ -101,12 +168,38 @@ const bbDesktopApi: BbDesktopApi = {
       listeners.delete(listener);
     };
   },
+  setTheme(theme: BbDesktopTheme): void {
+    ipcRenderer.send(BB_DESKTOP_SET_THEME_CHANNEL, theme);
+  },
 };
 
 ipcRenderer.on(BB_DESKTOP_INFO_CHANGED_CHANNEL, (_event, payload: unknown) => {
   applyDesktopInfoPayload(payload);
 });
 
+ipcRenderer.on(BB_DESKTOP_BROWSER_STATE_CHANNEL, (_event, payload: unknown) => {
+  const parsed = bbDesktopBrowserStateSchema.safeParse(payload);
+  if (!parsed.success) {
+    return;
+  }
+  for (const listener of browserStateListeners) {
+    listener(parsed.data);
+  }
+});
+
+ipcRenderer.on(
+  BB_DESKTOP_BROWSER_OPEN_TAB_CHANNEL,
+  (_event, payload: unknown) => {
+    const parsed = bbDesktopBrowserOpenTabRequestSchema.safeParse(payload);
+    if (!parsed.success) {
+      return;
+    }
+    for (const listener of browserOpenTabListeners) {
+      listener(parsed.data);
+    }
+  },
+);
+
 void invokeDesktopInfo(BB_DESKTOP_GET_INFO_CHANNEL);
 
 contextBridge.exposeInMainWorld("bbDesktop", bbDesktopApi);
diff --git a/apps/desktop/test/desktop-browser-policy.test.ts b/apps/desktop/test/desktop-browser-policy.test.ts
new file mode 100644
index 000000000..b374eda8c
--- /dev/null
+++ b/apps/desktop/test/desktop-browser-policy.test.ts
@@ -0,0 +1,212 @@
+import { describe, expect, it } from "vitest";
+import {
+  BB_DESKTOP_BROWSER_MAX_URL_LENGTH,
+  bbDesktopBrowserAttachRequestSchema,
+  bbDesktopBrowserSetBoundsRequestSchema,
+  bbDesktopBrowserStateSchema,
+} from "@bb/server-contract";
+import {
+  evaluatePopupRate,
+  isAllowedBrowserUrl,
+  isBlockedBrowserRequestHost,
+  isBlockedBrowserRequestUrl,
+  resolveWindowOpenAction,
+} from "../src/desktop-browser-policy.js";
+
+describe("isAllowedBrowserUrl", () => {
+  it("allows http and https", () => {
+    expect(isAllowedBrowserUrl("https://example.com")).toBe(true);
+    expect(isAllowedBrowserUrl("http://example.com/path?q=1")).toBe(true);
+  });
+
+  it("blocks non-http(s) and unparseable URLs", () => {
+    expect(isAllowedBrowserUrl("file:///etc/passwd")).toBe(false);
+    expect(isAllowedBrowserUrl("javascript:alert(1)")).toBe(false);
+    expect(isAllowedBrowserUrl("data:text/html,<h1>x</h1>")).toBe(false);
+    expect(isAllowedBrowserUrl("about:blank")).toBe(false);
+    expect(isAllowedBrowserUrl("not a url")).toBe(false);
+    expect(isAllowedBrowserUrl("")).toBe(false);
+  });
+});
+
+describe("resolveWindowOpenAction", () => {
+  it("surfaces an allowed http(s) popup URL as a new-tab request", () => {
+    expect(resolveWindowOpenAction("https://example.com")).toEqual({
+      openTabUrl: "https://example.com",
+    });
+  });
+
+  it("denies popups to disallowed schemes (no new tab)", () => {
+    expect(resolveWindowOpenAction("file:///etc/passwd")).toEqual({
+      openTabUrl: null,
+    });
+    expect(resolveWindowOpenAction("javascript:alert(1)")).toEqual({
+      openTabUrl: null,
+    });
+  });
+});
+
+describe("browser IPC payload schemas", () => {
+  it("accepts a well-formed attach request and rejects bad shapes", () => {
+    expect(
+      bbDesktopBrowserAttachRequestSchema.safeParse({
+        tabId: "browser:abc",
+        url: "",
+        bounds: { x: 0, y: 0, width: 800, height: 600 },
+        visible: false,
+      }).success,
+    ).toBe(true);
+
+    // Empty tabId, negative size, and unknown keys are all rejected.
+    expect(
+      bbDesktopBrowserAttachRequestSchema.safeParse({
+        tabId: "",
+        url: "",
+        bounds: { x: 0, y: 0, width: 800, height: 600 },
+        visible: false,
+      }).success,
+    ).toBe(false);
+    expect(
+      bbDesktopBrowserSetBoundsRequestSchema.safeParse({
+        tabId: "browser:abc",
+        bounds: { x: 0, y: 0, width: -1, height: 600 },
+      }).success,
+    ).toBe(false);
+    expect(
+      bbDesktopBrowserAttachRequestSchema.safeParse({
+        tabId: "browser:abc",
+        url: "",
+        bounds: { x: 0, y: 0, width: 800, height: 600 },
+        visible: false,
+        extra: true,
+      }).success,
+    ).toBe(false);
+  });
+
+  it("accepts a well-formed state push and rejects non-integer bounds", () => {
+    expect(
+      bbDesktopBrowserStateSchema.safeParse({
+        tabId: "browser:abc",
+        url: "https://example.com",
+        title: "Example",
+        isLoading: false,
+        canGoBack: true,
+        canGoForward: false,
+        errorText: null,
+      }).success,
+    ).toBe(true);
+
+    expect(
+      bbDesktopBrowserSetBoundsRequestSchema.safeParse({
+        tabId: "browser:abc",
+        bounds: { x: 0.5, y: 0, width: 800, height: 600 },
+      }).success,
+    ).toBe(false);
+  });
+
+  it("rejects oversized URLs beyond the length cap", () => {
+    const longUrl = `https://example.com/${"a".repeat(
+      BB_DESKTOP_BROWSER_MAX_URL_LENGTH,
+    )}`;
+    expect(
+      bbDesktopBrowserAttachRequestSchema.safeParse({
+        tabId: "browser:abc",
+        url: longUrl,
+        bounds: { x: 0, y: 0, width: 800, height: 600 },
+        visible: true,
+      }).success,
+    ).toBe(false);
+  });
+});
+
+describe("isBlockedBrowserRequestHost (loopback / LAN firewall)", () => {
+  it("blocks loopback hosts", () => {
+    for (const host of [
+      "127.0.0.1",
+      "127.1.2.3",
+      "0.0.0.0",
+      "localhost",
+      "app.localhost",
+      "::1",
+      "[::1]",
+      "::ffff:127.0.0.1",
+    ]) {
+      expect(isBlockedBrowserRequestHost(host)).toBe(true);
+    }
+  });
+
+  it("blocks private, link-local, CGNAT, and mDNS hosts", () => {
+    for (const host of [
+      "10.0.0.5",
+      "172.16.0.1",
+      "172.31.255.255",
+      "192.168.1.1",
+      "169.254.10.10",
+      "100.64.0.1",
+      "printer.local",
+      "fe80::1",
+      "fc00::1",
+      "fd12:3456::1",
+      "::ffff:10.0.0.1",
+    ]) {
+      expect(isBlockedBrowserRequestHost(host)).toBe(true);
+    }
+  });
+
+  it("allows public hosts and addresses", () => {
+    for (const host of [
+      "example.com",
+      "github.com",
+      "8.8.8.8",
+      "1.1.1.1",
+      "172.32.0.1",
+      "11.0.0.1",
+      "100.63.0.1",
+      "2606:4700:4700::1111",
+    ]) {
+      expect(isBlockedBrowserRequestHost(host)).toBe(false);
+    }
+  });
+});
+
+describe("isBlockedBrowserRequestUrl", () => {
+  it("blocks requests to loopback/LAN over http(s)/ws(s)", () => {
+    expect(isBlockedBrowserRequestUrl("http://127.0.0.1:38886/")).toBe(true);
+    expect(isBlockedBrowserRequestUrl("https://127.0.0.1/x")).toBe(true);
+    expect(isBlockedBrowserRequestUrl("ws://localhost:38886/ws")).toBe(true);
+    expect(isBlockedBrowserRequestUrl("wss://10.0.0.5/socket")).toBe(true);
+    expect(isBlockedBrowserRequestUrl("http://[::1]/")).toBe(true);
+  });
+
+  it("allows requests to public hosts and non-network schemes", () => {
+    expect(isBlockedBrowserRequestUrl("https://example.com/")).toBe(false);
+    expect(isBlockedBrowserRequestUrl("wss://example.com/socket")).toBe(false);
+    expect(
+      isBlockedBrowserRequestUrl("data:image/png;base64,iVBORw0KGgo="),
+    ).toBe(false);
+    expect(isBlockedBrowserRequestUrl("about:blank")).toBe(false);
+  });
+});
+
+describe("evaluatePopupRate", () => {
+  const args = { windowMs: 10_000, maxInWindow: 3 };
+
+  it("allows popups up to the cap, then blocks within the window", () => {
+    let timestamps: number[] = [];
+    for (const now of [0, 100, 200]) {
+      const decision = evaluatePopupRate({ ...args, timestamps, now });
+      expect(decision.allowed).toBe(true);
+      timestamps = decision.timestamps;
+    }
+    const blocked = evaluatePopupRate({ ...args, timestamps, now: 300 });
+    expect(blocked.allowed).toBe(false);
+    expect(blocked.timestamps).toHaveLength(3);
+  });
+
+  it("allows again once old timestamps age out of the window", () => {
+    const timestamps = [0, 100, 200];
+    const decision = evaluatePopupRate({ ...args, timestamps, now: 11_000 });
+    expect(decision.allowed).toBe(true);
+    expect(decision.timestamps).toEqual([11_000]);
+  });
+});
diff --git a/apps/server/src/routes/threads/base.ts b/apps/server/src/routes/threads/base.ts
index 57550380a..c7b81c425 100644
--- a/apps/server/src/routes/threads/base.ts
+++ b/apps/server/src/routes/threads/base.ts
@@ -4,6 +4,7 @@ import {
   listThreadsWithPendingInteractionState,
   markThreadDeleted,
   updateThread,
+  type UpdateThreadInput,
 } from "@bb/db";
 import type { Environment, Thread, ThreadListEntry } from "@bb/domain";
 import {
@@ -47,6 +48,7 @@ import {
 } from "../../services/threads/thread-runtime-display.js";
 import { assertValidManagerParentThread } from "../../services/threads/thread-parent.js";
 import { handleThreadOwnershipChange } from "../../services/threads/thread-ownership.js";
+import { applyThreadExecutionOverride } from "../../services/threads/thread-execution-override.js";
 
 function parseThreadIncludes(query: ThreadGetQuery): Set<ThreadIncludeOption> {
   const includes = new Set<ThreadIncludeOption>();
@@ -183,7 +185,33 @@ export function registerThreadBaseRoutes(app: Hono, deps: AppDeps): void {
         projectId: thread.projectId,
       });
     }
-    const updated = updateThread(deps.db, deps.hub, thread.id, payload);
+
+    // Sticky execution override (model / reasoning level). Validated and
+    // persisted by a dedicated service — kept off the generic metadata update
+    // because execution config must not flow through `updateThread`.
+    if ("model" in payload || "reasoningLevel" in payload) {
+      await applyThreadExecutionOverride(deps, {
+        thread,
+        patch: {
+          ...("model" in payload ? { model: payload.model } : {}),
+          ...("reasoningLevel" in payload
+            ? { reasoningLevel: payload.reasoningLevel }
+            : {}),
+        },
+      });
+    }
+
+    const metadataUpdate: UpdateThreadInput = {};
+    if ("title" in payload) {
+      metadataUpdate.title = payload.title;
+    }
+    if ("parentThreadId" in payload) {
+      metadataUpdate.parentThreadId = payload.parentThreadId;
+    }
+    const updated =
+      Object.keys(metadataUpdate).length > 0
+        ? updateThread(deps.db, deps.hub, thread.id, metadataUpdate)
+        : requirePublicThread(deps.db, thread.id);
     if (!updated) {
       throw new ApiError(404, "thread_not_found", "Thread not found");
     }
diff --git a/apps/server/src/services/threads/blank-app-scaffold.ts b/apps/server/src/services/threads/blank-app-scaffold.ts
index e47d6d256..489cdd965 100644
--- a/apps/server/src/services/threads/blank-app-scaffold.ts
+++ b/apps/server/src/services/threads/blank-app-scaffold.ts
@@ -183,7 +183,7 @@ const BLANK_APP_INDEX_HTML_TEMPLATE = `<!doctype html>
 
     <main class="panel">
       <p class="placeholder">
-        Ask your agent to customize the status app how you please.
+        Customize this static app in assets/index.html. No web server or build step needed.
       </p>
 
       <section class="section">
diff --git a/apps/server/src/services/threads/thread-execution-override.ts b/apps/server/src/services/threads/thread-execution-override.ts
new file mode 100644
index 000000000..e5753be9c
--- /dev/null
+++ b/apps/server/src/services/threads/thread-execution-override.ts
@@ -0,0 +1,204 @@
+import {
+  getProjectExecutionDefaults,
+  getThreadExecutionOverride,
+  setThreadExecutionOverride,
+  type ThreadExecutionOverride,
+} from "@bb/db";
+import {
+  reconcileReasoningLevel,
+  type AvailableModel,
+  type ReasoningLevel,
+  type Thread,
+} from "@bb/domain";
+import { ApiError } from "../../errors.js";
+import type { AppDeps } from "../../types.js";
+import { resolveSystemExecutionOptions } from "../system/execution-options.js";
+import { getLastExecutionOptions } from "./thread-events.js";
+import { getSupportedReasoningLevelsForProvider } from "./thread-runtime-config.js";
+
+/**
+ * Provider whitelist for in-place execution overrides in v1. Only `claude-code`
+ * is verified to apply a changed model on `thread/resume` while preserving
+ * context. Codex/pi in-place swap is a follow-up (needs a capability flag and a
+ * live resume-with-changed-model test); cross-provider changes require respawn.
+ */
+const OVERRIDE_SUPPORTED_PROVIDER = "claude-code";
+
+/**
+ * Presence-sensitive patch for the thread execution override. A field that is
+ * absent (key not present) is left unchanged; an explicit `null` clears it.
+ */
+export interface ThreadExecutionOverridePatch {
+  model?: string | null;
+  reasoningLevel?: ReasoningLevel | null;
+}
+
+export interface ResolveThreadExecutionOverrideUpdateArgs {
+  /** The thread's currently persisted override. */
+  existing: ThreadExecutionOverride;
+  /** The requested change (presence-sensitive). */
+  patch: ThreadExecutionOverridePatch;
+  /** The active model catalog for the thread's provider (swap targets). */
+  models: readonly AvailableModel[];
+  /** The thread's provider id, for error messages and the reasoning fallback. */
+  providerId: string;
+  /**
+   * The model a turn would resolve to absent any override (last turn ?? project
+   * default). Used to validate a reasoning-only change against the right model.
+   */
+  fallbackModel: string | null;
+}
+
+export interface ApplyThreadExecutionOverrideArgs {
+  thread: Thread;
+  patch: ThreadExecutionOverridePatch;
+}
+
+/**
+ * Pure resolver for the next override values. Validates a requested model
+ * against the active catalog (same-provider + in-catalog), validates an
+ * explicit reasoning level against the target model's supported efforts, and
+ * reconciles a now-incompatible stored reasoning level when only the model
+ * changes. Throws `ApiError(400)` for incompatible input. No IO.
+ */
+export function resolveThreadExecutionOverrideUpdate(
+  args: ResolveThreadExecutionOverrideUpdateArgs,
+): ThreadExecutionOverride {
+  const { existing, patch, models, providerId, fallbackModel } = args;
+
+  const modelChanged = "model" in patch;
+  let nextModel = existing.modelOverride;
+  if (modelChanged) {
+    if (patch.model === null || patch.model === undefined) {
+      nextModel = null;
+    } else {
+      const target = models.find((candidate) => candidate.model === patch.model);
+      if (!target) {
+        throw new ApiError(
+          400,
+          "invalid_request",
+          `Model "${patch.model}" is not available for provider ${providerId}. Cross-provider switches require respawning the thread.`,
+        );
+      }
+      nextModel = patch.model;
+    }
+  }
+
+  // The model whose reasoning support we validate/reconcile against: the new
+  // override if set, otherwise what the next turn would resolve to.
+  const effectiveModel = nextModel ?? fallbackModel;
+  const effectiveModelEntry = effectiveModel
+    ? models.find((candidate) => candidate.model === effectiveModel)
+    : undefined;
+  const supportedReasoning: readonly ReasoningLevel[] = effectiveModelEntry
+    ? effectiveModelEntry.supportedReasoningEfforts.map(
+        (effort) => effort.reasoningEffort,
+      )
+    : getSupportedReasoningLevelsForProvider(providerId);
+
+  let nextReasoning = existing.reasoningLevelOverride;
+  if ("reasoningLevel" in patch) {
+    if (patch.reasoningLevel === null || patch.reasoningLevel === undefined) {
+      nextReasoning = null;
+    } else {
+      if (
+        supportedReasoning.length > 0 &&
+        !supportedReasoning.includes(patch.reasoningLevel)
+      ) {
+        throw new ApiError(
+          400,
+          "invalid_request",
+          `Reasoning level "${patch.reasoningLevel}" is not supported by ${
+            effectiveModel ? `model "${effectiveModel}"` : `provider ${providerId}`
+          }. Supported reasoning levels: ${supportedReasoning.join(", ")}.`,
+        );
+      }
+      nextReasoning = patch.reasoningLevel;
+    }
+  } else if (
+    modelChanged &&
+    nextReasoning !== null &&
+    supportedReasoning.length > 0 &&
+    !supportedReasoning.includes(nextReasoning)
+  ) {
+    // The model changed without an explicit reasoning level and the stored
+    // reasoning override is no longer supported by the new model → reconcile
+    // to the closest supported level rather than failing.
+    nextReasoning = reconcileReasoningLevel(nextReasoning, supportedReasoning);
+  }
+
+  return { modelOverride: nextModel, reasoningLevelOverride: nextReasoning };
+}
+
+/**
+ * Validates and persists the sticky thread-level execution override. Loads the
+ * thread provider's active model catalog from the daemon to validate, then
+ * stores the resolved values. The change takes effect on the next turn via
+ * `resolveExecutionOptions` + the runtime's `reconfigureThreadIfNeeded`.
+ */
+export async function applyThreadExecutionOverride(
+  deps: AppDeps,
+  args: ApplyThreadExecutionOverrideArgs,
+): Promise<void> {
+  const { thread, patch } = args;
+
+  if (thread.providerId !== OVERRIDE_SUPPORTED_PROVIDER) {
+    throw new ApiError(
+      400,
+      "invalid_request",
+      `Changing the model or reasoning level of a running thread is only supported for ${OVERRIDE_SUPPORTED_PROVIDER} threads (this thread uses ${thread.providerId}). Cross-provider changes require respawning the thread.`,
+    );
+  }
+
+  const models = await loadThreadProviderModels(deps, thread);
+  const existing = getThreadExecutionOverride(deps.db, thread.id) ?? {
+    modelOverride: null,
+    reasoningLevelOverride: null,
+  };
+
+  const next = resolveThreadExecutionOverrideUpdate({
+    existing,
+    patch,
+    models,
+    providerId: thread.providerId,
+    fallbackModel: resolveFallbackModel(deps, thread),
+  });
+
+  setThreadExecutionOverride(deps.db, {
+    threadId: thread.id,
+    modelOverride: next.modelOverride,
+    reasoningLevelOverride: next.reasoningLevelOverride,
+  });
+}
+
+async function loadThreadProviderModels(
+  deps: AppDeps,
+  thread: Thread,
+): Promise<readonly AvailableModel[]> {
+  const result = await resolveSystemExecutionOptions(deps, {
+    providerId: thread.providerId,
+    ...(thread.environmentId !== null
+      ? { environmentId: thread.environmentId }
+      : {}),
+  });
+  if (result.modelLoadError !== null) {
+    throw new ApiError(
+      503,
+      "model_catalog_unavailable",
+      `Unable to load ${thread.providerId} models to validate the change. Try again once the host is connected.`,
+    );
+  }
+  return result.models;
+}
+
+function resolveFallbackModel(deps: AppDeps, thread: Thread): string | null {
+  const lastExecution = getLastExecutionOptions(deps, thread.id);
+  if (lastExecution?.model) {
+    return lastExecution.model;
+  }
+  const projectDefaults = getProjectExecutionDefaults(deps.db, {
+    projectId: thread.projectId,
+    threadType: thread.type,
+  });
+  return projectDefaults?.model ?? null;
+}
diff --git a/apps/server/src/services/threads/thread-runtime-config.ts b/apps/server/src/services/threads/thread-runtime-config.ts
index 2f8e3628b..201cfa5b1 100644
--- a/apps/server/src/services/threads/thread-runtime-config.ts
+++ b/apps/server/src/services/threads/thread-runtime-config.ts
@@ -39,6 +39,21 @@ const SUPPORTED_REASONING_LEVELS_BY_PROVIDER: Record<
   codex: ["low", "medium", "high", "xhigh"],
   pi: ["low", "medium", "high", "xhigh"],
 };
+
+/**
+ * The coarse, per-provider reasoning levels. Used as a fallback when a precise
+ * per-model `supportedReasoningEfforts` set is unavailable (e.g. validating a
+ * reasoning override against a legacy/selected-only model not in the active
+ * catalog). Returns an empty list for unknown providers.
+ */
+export function getSupportedReasoningLevelsForProvider(
+  providerId: string,
+): readonly ReasoningLevel[] {
+  if (!isAgentProviderId(providerId)) {
+    return [];
+  }
+  return SUPPORTED_REASONING_LEVELS_BY_PROVIDER[providerId];
+}
 const STANDARD_AGENT_INSTRUCTIONS = renderTemplate(
   "standardAgentInstructions",
   {},
@@ -189,8 +204,14 @@ export async function resolveExecutionOptions(
   if (!thread) {
     throw new ApiError(404, "thread_not_found", "Thread not found");
   }
+  // The sticky thread-level override sits between the explicit per-turn request
+  // (a one-off `tell --model` still wins for that turn) and `lastExecution` (so
+  // it persists across turns that don't specify a model/reasoning level). The
+  // next turn's `reconfigureThreadIfNeeded` applies the change to the live
+  // session.
   const model =
     args.requestedExecution.model ??
+    thread.modelOverride ??
     lastExecution?.model ??
     projectExecution?.model;
   if (!model) {
@@ -215,6 +236,7 @@ export async function resolveExecutionOptions(
   validateProviderPermissionMode(thread.providerId, permissionMode);
   const reasoningLevel =
     args.requestedExecution.reasoningLevel ??
+    thread.reasoningLevelOverride ??
     lastExecution?.reasoningLevel ??
     projectExecution?.reasoningLevel ??
     DEFAULT_REASONING_LEVEL;
diff --git a/apps/server/test/public/public-thread-apps.test.ts b/apps/server/test/public/public-thread-apps.test.ts
index eaeeedd58..fdcd0c274 100644
--- a/apps/server/test/public/public-thread-apps.test.ts
+++ b/apps/server/test/public/public-thread-apps.test.ts
@@ -1209,9 +1209,9 @@ describe("public thread app routes", () => {
       expect(html).toContain('--font-sans: "Inter"');
       expect(html).toContain("oklch(0.9551 0 0)");
       expect(html).toContain("@media (prefers-color-scheme: dark)");
-      // Placeholder copy invites the user to extend the scaffold via their agent.
+      // Placeholder copy keeps the blank scaffold aligned with app guidance.
       expect(html).toContain(
-        "Ask your agent to customize the status app how you please.",
+        "No web server or build step needed.",
       );
       // Task-list row vocabulary is present so the scaffold looks bb-native.
       expect(html).toContain('class="row"');
diff --git a/apps/server/test/public/public-threads.execution-override.test.ts b/apps/server/test/public/public-threads.execution-override.test.ts
new file mode 100644
index 000000000..c382756c1
--- /dev/null
+++ b/apps/server/test/public/public-threads.execution-override.test.ts
@@ -0,0 +1,173 @@
+import { describe, expect, it } from "vitest";
+import { getThreadExecutionOverride } from "@bb/db";
+import {
+  reportQueuedCommandSuccess,
+  waitForQueuedCommand,
+  waitForQueuedCommandAfter,
+} from "../helpers/commands.js";
+import { readJson } from "../helpers/json.js";
+import {
+  seedEnvironment,
+  seedHostSession,
+  seedProjectWithSource,
+  seedThread,
+} from "../helpers/seed.js";
+import { createTestAppHarness } from "../helpers/test-app.js";
+import type { TestAppHarness } from "../helpers/test-app.js";
+
+async function stubClaudeCodeCatalog(
+  harness: TestAppHarness,
+  hostId: string,
+): Promise<void> {
+  const providersCommand = await waitForQueuedCommand(
+    harness,
+    ({ command }) => command.type === "provider.list",
+  );
+  await reportQueuedCommandSuccess(
+    harness,
+    providersCommand,
+    {
+      providers: [
+        {
+          id: "claude-code",
+          displayName: "Claude Code",
+          capabilities: {
+            supportsArchive: true,
+            supportsRename: false,
+            supportsServiceTier: true,
+            supportsUserQuestion: true,
+            supportedPermissionModes: ["full", "workspace-write", "readonly"],
+          },
+          available: true,
+        },
+      ],
+    },
+    { hostId },
+  );
+  const modelsCommand = await waitForQueuedCommandAfter(
+    harness,
+    providersCommand.row.cursor,
+    ({ command }) =>
+      command.type === "provider.list_models" &&
+      command.providerId === "claude-code",
+  );
+  await reportQueuedCommandSuccess(
+    harness,
+    modelsCommand,
+    {
+      models: [
+        {
+          id: "claude-opus-4-8",
+          model: "claude-opus-4-8",
+          displayName: "Opus 4.8",
+          description: "",
+          supportedReasoningEfforts: [
+            { reasoningEffort: "low", description: "" },
+            { reasoningEffort: "medium", description: "" },
+            { reasoningEffort: "high", description: "" },
+            { reasoningEffort: "xhigh", description: "" },
+            { reasoningEffort: "max", description: "" },
+          ],
+          defaultReasoningEffort: "medium",
+          isDefault: true,
+        },
+      ],
+      selectedOnlyModels: [],
+    },
+    { hostId },
+  );
+}
+
+function seedClaudeCodeThread(harness: TestAppHarness, providerId = "claude-code") {
+  const { host } = seedHostSession(harness.deps, {
+    id: `host-override-${providerId}`,
+  });
+  const { project } = seedProjectWithSource(harness.deps, { hostId: host.id });
+  const environment = seedEnvironment(harness.deps, {
+    hostId: host.id,
+    projectId: project.id,
+  });
+  const thread = seedThread(harness.deps, {
+    projectId: project.id,
+    environmentId: environment.id,
+    providerId,
+  });
+  return { host, thread };
+}
+
+function patchThread(harness: TestAppHarness, threadId: string, body: unknown) {
+  return harness.app.request(`/api/v1/threads/${threadId}`, {
+    method: "PATCH",
+    headers: { "content-type": "application/json" },
+    body: JSON.stringify(body),
+  });
+}
+
+describe("PATCH /threads/:id execution override", () => {
+  it("persists a model + reasoning override after catalog validation", async () => {
+    const harness = await createTestAppHarness();
+    try {
+      const { host, thread } = seedClaudeCodeThread(harness);
+
+      const responsePromise = patchThread(harness, thread.id, {
+        model: "claude-opus-4-8",
+        reasoningLevel: "high",
+      });
+      await stubClaudeCodeCatalog(harness, host.id);
+      const response = await responsePromise;
+
+      expect(response.status).toBe(200);
+      expect(getThreadExecutionOverride(harness.db, thread.id)).toEqual({
+        modelOverride: "claude-opus-4-8",
+        reasoningLevelOverride: "high",
+      });
+    } finally {
+      await harness.cleanup();
+    }
+  });
+
+  it("rejects a model that is not in the provider's catalog", async () => {
+    const harness = await createTestAppHarness();
+    try {
+      const { host, thread } = seedClaudeCodeThread(harness);
+
+      const responsePromise = patchThread(harness, thread.id, {
+        model: "gpt-5",
+      });
+      await stubClaudeCodeCatalog(harness, host.id);
+      const response = await responsePromise;
+
+      expect(response.status).toBe(400);
+      const body = await readJson(response);
+      expect(JSON.stringify(body)).toContain("not available for provider claude-code");
+      expect(getThreadExecutionOverride(harness.db, thread.id)).toEqual({
+        modelOverride: null,
+        reasoningLevelOverride: null,
+      });
+    } finally {
+      await harness.cleanup();
+    }
+  });
+
+  it("rejects an in-place override for a non-claude-code thread", async () => {
+    const harness = await createTestAppHarness();
+    try {
+      const { thread } = seedClaudeCodeThread(harness, "codex");
+
+      // The provider gate rejects before any catalog command is queued.
+      const response = await patchThread(harness, thread.id, {
+        model: "gpt-5",
+      });
+
+      expect(response.status).toBe(400);
+      const body = await readJson(response);
+      expect(JSON.stringify(body)).toContain("only supported for claude-code");
+      expect(getThreadExecutionOverride(harness.db, thread.id)).toEqual({
+        modelOverride: null,
+        reasoningLevelOverride: null,
+      });
+    } finally {
+      await harness.cleanup();
+    }
+  });
+});
diff --git a/apps/server/test/services/threads/thread-execution-override.test.ts b/apps/server/test/services/threads/thread-execution-override.test.ts
new file mode 100644
index 000000000..946cf267a
--- /dev/null
+++ b/apps/server/test/services/threads/thread-execution-override.test.ts
@@ -0,0 +1,170 @@
+import { describe, expect, it } from "vitest";
+import type { AvailableModel, ReasoningLevel } from "@bb/domain";
+import { resolveThreadExecutionOverrideUpdate } from "../../../src/services/threads/thread-execution-override.js";
+
+function model(
+  name: string,
+  reasoning: readonly ReasoningLevel[],
+  defaultReasoning: ReasoningLevel,
+): AvailableModel {
+  return {
+    id: name,
+    model: name,
+    displayName: name,
+    description: "",
+    supportedReasoningEfforts: reasoning.map((reasoningEffort) => ({
+      reasoningEffort,
+      description: "",
+    })),
+    defaultReasoningEffort: defaultReasoning,
+    isDefault: false,
+  };
+}
+
+const OPUS = model(
+  "claude-opus-4-8",
+  ["low", "medium", "high", "xhigh", "max"],
+  "medium",
+);
+const HAIKU = model("claude-haiku-4-5", ["low"], "low");
+const CATALOG = [OPUS, HAIKU];
+const EMPTY = { modelOverride: null, reasoningLevelOverride: null };
+
+describe("resolveThreadExecutionOverrideUpdate", () => {
+  it("sets a model that is present in the active catalog", () => {
+    expect(
+      resolveThreadExecutionOverrideUpdate({
+        existing: EMPTY,
+        patch: { model: "claude-opus-4-8" },
+        models: CATALOG,
+        providerId: "claude-code",
+        fallbackModel: null,
+      }),
+    ).toEqual({
+      modelOverride: "claude-opus-4-8",
+      reasoningLevelOverride: null,
+    });
+  });
+
+  it("rejects a model absent from the provider's catalog (cross-provider/unknown)", () => {
+    expect(() =>
+      resolveThreadExecutionOverrideUpdate({
+        existing: EMPTY,
+        patch: { model: "gpt-5" },
+        models: CATALOG,
+        providerId: "claude-code",
+        fallbackModel: null,
+      }),
+    ).toThrow(/not available for provider claude-code/);
+  });
+
+  it("accepts an explicit reasoning level supported by the target model", () => {
+    expect(
+      resolveThreadExecutionOverrideUpdate({
+        existing: EMPTY,
+        patch: { model: "claude-opus-4-8", reasoningLevel: "high" },
+        models: CATALOG,
+        providerId: "claude-code",
+        fallbackModel: null,
+      }),
+    ).toEqual({
+      modelOverride: "claude-opus-4-8",
+      reasoningLevelOverride: "high",
+    });
+  });
+
+  it("rejects an explicit reasoning level the target model does not support", () => {
+    expect(() =>
+      resolveThreadExecutionOverrideUpdate({
+        existing: EMPTY,
+        patch: { model: "claude-haiku-4-5", reasoningLevel: "max" },
+        models: CATALOG,
+        providerId: "claude-code",
+        fallbackModel: null,
+      }),
+    ).toThrow(/Reasoning level "max" is not supported by model "claude-haiku-4-5"/);
+  });
+
+  it("reconciles an incompatible stored reasoning level on a model-only change", () => {
+    // Switching to Haiku (supports only "low") with a stored "max" override
+    // reconciles down to the closest supported level rather than failing.
+    expect(
+      resolveThreadExecutionOverrideUpdate({
+        existing: { modelOverride: "claude-opus-4-8", reasoningLevelOverride: "max" },
+        patch: { model: "claude-haiku-4-5" },
+        models: CATALOG,
+        providerId: "claude-code",
+        fallbackModel: null,
+      }),
+    ).toEqual({
+      modelOverride: "claude-haiku-4-5",
+      reasoningLevelOverride: "low",
+    });
+  });
+
+  it("keeps a compatible stored reasoning level on a model-only change", () => {
+    expect(
+      resolveThreadExecutionOverrideUpdate({
+        existing: { modelOverride: "claude-haiku-4-5", reasoningLevelOverride: "high" },
+        patch: { model: "claude-opus-4-8" },
+        models: CATALOG,
+        providerId: "claude-code",
+        fallbackModel: null,
+      }),
+    ).toEqual({
+      modelOverride: "claude-opus-4-8",
+      reasoningLevelOverride: "high",
+    });
+  });
+
+  it("clears both overrides when both are set to null", () => {
+    expect(
+      resolveThreadExecutionOverrideUpdate({
+        existing: { modelOverride: "claude-opus-4-8", reasoningLevelOverride: "high" },
+        patch: { model: null, reasoningLevel: null },
+        models: CATALOG,
+        providerId: "claude-code",
+        fallbackModel: null,
+      }),
+    ).toEqual(EMPTY);
+  });
+
+  it("validates a reasoning-only change against the fallback (next-turn) model", () => {
+    // No model override or model in the patch → validate against the model the
+    // next turn would otherwise use (fallbackModel = Haiku, supports only low).
+    expect(() =>
+      resolveThreadExecutionOverrideUpdate({
+        existing: EMPTY,
+        patch: { reasoningLevel: "high" },
+        models: CATALOG,
+        providerId: "claude-code",
+        fallbackModel: "claude-haiku-4-5",
+      }),
+    ).toThrow(/not supported by model "claude-haiku-4-5"/);
+
+    expect(
+      resolveThreadExecutionOverrideUpdate({
+        existing: EMPTY,
+        patch: { reasoningLevel: "xhigh" },
+        models: CATALOG,
+        providerId: "claude-code",
+        fallbackModel: "claude-opus-4-8",
+      }),
+    ).toEqual({ modelOverride: null, reasoningLevelOverride: "xhigh" });
+  });
+
+  it("leaves an unspecified field unchanged", () => {
+    expect(
+      resolveThreadExecutionOverrideUpdate({
+        existing: { modelOverride: "claude-opus-4-8", reasoningLevelOverride: "high" },
+        patch: { reasoningLevel: "max" },
+        models: CATALOG,
+        providerId: "claude-code",
+        fallbackModel: null,
+      }),
+    ).toEqual({
+      modelOverride: "claude-opus-4-8",
+      reasoningLevelOverride: "max",
+    });
+  });
+});
diff --git a/apps/server/test/services/threads/thread-runtime-display.test.ts b/apps/server/test/services/threads/thread-runtime-display.test.ts
index 1e9bb56d8..503fbe3f1 100644
--- a/apps/server/test/services/threads/thread-runtime-display.test.ts
+++ b/apps/server/test/services/threads/thread-runtime-display.test.ts
@@ -133,6 +133,8 @@ function createThreadListEntry(
 ): ThreadWithPendingInteractionState {
   return {
     ...args.thread,
+    modelOverride: null,
+    reasoningLevelOverride: null,
     environmentBranchName: null,
     environmentHostId: args.environmentHostId,
     environmentWorkspaceDisplayKind: "other",
diff --git a/apps/server/test/threads/thread-runtime-config.test.ts b/apps/server/test/threads/thread-runtime-config.test.ts
index 02d8f2157..5c780965d 100644
--- a/apps/server/test/threads/thread-runtime-config.test.ts
+++ b/apps/server/test/threads/thread-runtime-config.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from "vitest";
-import { markThreadDeleted } from "@bb/db";
+import { markThreadDeleted, setThreadExecutionOverride } from "@bb/db";
 import {
   resolvePermissionEscalation,
   resolveExecutionOptions,
@@ -281,6 +281,55 @@ describe("thread runtime config", () => {
     }
   });
 
+  it("consumes the sticky thread execution override across turns without a request value", async () => {
+    const harness = await createTestAppHarness();
+    try {
+      const { host } = seedHostSession(harness.deps, {
+        id: "host-runtime-execution-override",
+      });
+      const { project } = seedProjectWithSource(harness.deps, {
+        hostId: host.id,
+      });
+      const environment = seedEnvironment(harness.deps, {
+        hostId: host.id,
+        projectId: project.id,
+      });
+      const thread = seedThread(harness.deps, {
+        projectId: project.id,
+        environmentId: environment.id,
+        providerId: "claude-code",
+      });
+
+      setThreadExecutionOverride(harness.db, {
+        threadId: thread.id,
+        modelOverride: "claude-opus-4-8",
+        reasoningLevelOverride: "high",
+      });
+
+      // No model/reasoning in the request: the override sticks for this turn.
+      const execution = await resolveExecutionOptions(harness.deps, {
+        threadId: thread.id,
+        requestedExecution: { source: "client/turn/requested" },
+      });
+      expect(execution.model).toBe("claude-opus-4-8");
+      expect(execution.reasoningLevel).toBe("high");
+
+      // An explicit per-turn request still wins over the sticky override.
+      const oneOff = await resolveExecutionOptions(harness.deps, {
+        threadId: thread.id,
+        requestedExecution: {
+          model: "claude-sonnet-4-6",
+          reasoningLevel: "low",
+          source: "client/turn/requested",
+        },
+      });
+      expect(oneOff.model).toBe("claude-sonnet-4-6");
+      expect(oneOff.reasoningLevel).toBe("low");
+    } finally {
+      await harness.cleanup();
+    }
+  });
+
   it("derives ask escalation only for direct user root-thread work", async () => {
     const harness = await createTestAppHarness();
     try {
diff --git a/docs/migrating-status-to-apps.md b/docs/migrating-status-to-apps.md
index 30017b87d..9ea6c3374 100644
--- a/docs/migrating-status-to-apps.md
+++ b/docs/migrating-status-to-apps.md
@@ -69,7 +69,9 @@ mechanical migration.
 Browser files under `assets/` are served from the flat app URL. For example,
 `apps/status/assets/index-Cd7sCqsN.js` is requested as
 `/api/v1/threads/<thread-id>/apps/status/index-Cd7sCqsN.js`; do not include an
-`assets/` segment in HTML references.
+`assets/` segment in HTML references. Apps are served directly from these
+static files, so there is no app-specific web server, npm install, or build
+step requirement.
 
 ---
 
@@ -90,8 +92,9 @@ mkdir -p "$APP/assets" "$APP/data"
 
 Use flat relative HTML references, such as `<script type="module"
 src="./index-abc.js"></script>` or `<link rel="stylesheet"
-href="./style.css">`. If you build with Vite, set `build.assetsDir = ""` so
-emitted CSS/JS/assets sit alongside `index.html` inside `assets/`.
+href="./style.css">`. If you are moving existing Vite build output, set
+`build.assetsDir = ""` so emitted CSS/JS/assets sit alongside `index.html`
+inside `assets/`; otherwise keep the app as plain static files.
 
 ### 3. Migrate the state
 
diff --git a/packages/db/drizzle/0009_famous_the_hunter.sql b/packages/db/drizzle/0009_famous_the_hunter.sql
new file mode 100644
index 000000000..91014f4c4
--- /dev/null
+++ b/packages/db/drizzle/0009_famous_the_hunter.sql
@@ -0,0 +1,2 @@
+ALTER TABLE `threads` ADD `model_override` text;--> statement-breakpoint
+ALTER TABLE `threads` ADD `reasoning_level_override` text;
\ No newline at end of file
diff --git a/packages/db/drizzle/meta/0009_snapshot.json b/packages/db/drizzle/meta/0009_snapshot.json
new file mode 100644
index 000000000..3bcad8a86
--- /dev/null
+++ b/packages/db/drizzle/meta/0009_snapshot.json
@@ -0,0 +1,3299 @@
+{
+  "version": "6",
+  "dialect": "sqlite",
+  "id": "5bb12970-b3c6-400d-9c72-262758671d95",
+  "prevId": "db414d66-61eb-4e4a-918d-6d281b1cead0",
+  "tables": {
+    "apikey": {
+      "name": "apikey",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "start": {
+          "name": "start",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "prefix": {
+          "name": "prefix",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "key": {
+          "name": "key",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "referenceId": {
+          "name": "referenceId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "refillInterval": {
+          "name": "refillInterval",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "refillAmount": {
+          "name": "refillAmount",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "lastRefillAt": {
+          "name": "lastRefillAt",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "enabled": {
+          "name": "enabled",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "rateLimitEnabled": {
+          "name": "rateLimitEnabled",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "rateLimitTimeWindow": {
+          "name": "rateLimitTimeWindow",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "rateLimitMax": {
+          "name": "rateLimitMax",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "requestCount": {
+          "name": "requestCount",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "remaining": {
+          "name": "remaining",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "lastRequest": {
+          "name": "lastRequest",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "expiresAt": {
+          "name": "expiresAt",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "createdAt": {
+          "name": "createdAt",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "updatedAt": {
+          "name": "updatedAt",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permissions": {
+          "name": "permissions",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "metadata": {
+          "name": "metadata",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "configId": {
+          "name": "configId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "apikey_key_unique": {
+          "name": "apikey_key_unique",
+          "columns": [
+            "key"
+          ],
+          "isUnique": true
+        },
+        "apikey_reference_id_idx": {
+          "name": "apikey_reference_id_idx",
+          "columns": [
+            "referenceId"
+          ],
+          "isUnique": false
+        },
+        "apikey_config_id_idx": {
+          "name": "apikey_config_id_idx",
+          "columns": [
+            "configId"
+          ],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "apikey_referenceId_user_id_fk": {
+          "name": "apikey_referenceId_user_id_fk",
+          "tableFrom": "apikey",
+          "tableTo": "user",
+          "columnsFrom": [
+            "referenceId"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "user": {
+      "name": "user",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "email": {
+          "name": "email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "emailVerified": {
+          "name": "emailVerified",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "image": {
+          "name": "image",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "createdAt": {
+          "name": "createdAt",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "updatedAt": {
+          "name": "updatedAt",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "user_email_unique": {
+          "name": "user_email_unique",
+          "columns": [
+            "email"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "automations": {
+      "name": "automations",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "project_id": {
+          "name": "project_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "enabled": {
+          "name": "enabled",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": true
+        },
+        "trigger_type": {
+          "name": "trigger_type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "trigger_config": {
+          "name": "trigger_config",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "action": {
+          "name": "action",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "auto_archive": {
+          "name": "auto_archive",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "next_run_at": {
+          "name": "next_run_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "last_run_at": {
+          "name": "last_run_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "run_count": {
+          "name": "run_count",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "automations_project_idx": {
+          "name": "automations_project_idx",
+          "columns": [
+            "project_id"
+          ],
+          "isUnique": false
+        },
+        "automations_due_idx": {
+          "name": "automations_due_idx",
+          "columns": [
+            "enabled",
+            "trigger_type",
+            "next_run_at"
+          ],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "automations_project_id_projects_id_fk": {
+          "name": "automations_project_id_projects_id_fk",
+          "tableFrom": "automations",
+          "tableTo": "projects",
+          "columnsFrom": [
+            "project_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "environment_operations": {
+      "name": "environment_operations",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "environment_id": {
+          "name": "environment_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "kind": {
+          "name": "kind",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "state": {
+          "name": "state",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "payload": {
+          "name": "payload",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "command_id": {
+          "name": "command_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "requested_at": {
+          "name": "requested_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "queued_at": {
+          "name": "queued_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "completed_at": {
+          "name": "completed_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "failure_reason": {
+          "name": "failure_reason",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "environment_operations_environment_kind_idx": {
+          "name": "environment_operations_environment_kind_idx",
+          "columns": [
+            "environment_id",
+            "kind"
+          ],
+          "isUnique": true
+        },
+        "environment_operations_command_idx": {
+          "name": "environment_operations_command_idx",
+          "columns": [
+            "command_id"
+          ],
+          "isUnique": true
+        },
+        "environment_operations_state_idx": {
+          "name": "environment_operations_state_idx",
+          "columns": [
+            "state"
+          ],
+          "isUnique": false
+        },
+        "environment_operations_environment_idx": {
+          "name": "environment_operations_environment_idx",
+          "columns": [
+            "environment_id"
+          ],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "environment_operations_environment_id_environments_id_fk": {
+          "name": "environment_operations_environment_id_environments_id_fk",
+          "tableFrom": "environment_operations",
+          "tableTo": "environments",
+          "columnsFrom": [
+            "environment_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "environment_operations_command_id_host_daemon_commands_id_fk": {
+          "name": "environment_operations_command_id_host_daemon_commands_id_fk",
+          "tableFrom": "environment_operations",
+          "tableTo": "host_daemon_commands",
+          "columnsFrom": [
+            "command_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "environments": {
+      "name": "environments",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "project_id": {
+          "name": "project_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "host_id": {
+          "name": "host_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "path": {
+          "name": "path",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "managed": {
+          "name": "managed",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "is_git_repo": {
+          "name": "is_git_repo",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "is_worktree": {
+          "name": "is_worktree",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "branch_name": {
+          "name": "branch_name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "base_branch": {
+          "name": "base_branch",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "default_branch": {
+          "name": "default_branch",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "merge_base_branch": {
+          "name": "merge_base_branch",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "cleanup_requested_at": {
+          "name": "cleanup_requested_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "cleanup_mode": {
+          "name": "cleanup_mode",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "workspace_provision_type": {
+          "name": "workspace_provision_type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "status": {
+          "name": "status",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'provisioning'"
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "environments_host_path_idx": {
+          "name": "environments_host_path_idx",
+          "columns": [
+            "host_id",
+            "path"
+          ],
+          "isUnique": true
+        },
+        "environments_project_idx": {
+          "name": "environments_project_idx",
+          "columns": [
+            "project_id"
+          ],
+          "isUnique": false
+        },
+        "environments_cleanup_requested_idx": {
+          "name": "environments_cleanup_requested_idx",
+          "columns": [
+            "cleanup_requested_at"
+          ],
+          "isUnique": false
+        },
+        "environments_status_idx": {
+          "name": "environments_status_idx",
+          "columns": [
+            "status"
+          ],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "environments_project_id_projects_id_fk": {
+          "name": "environments_project_id_projects_id_fk",
+          "tableFrom": "environments",
+          "tableTo": "projects",
+          "columnsFrom": [
+            "project_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "environments_host_id_hosts_id_fk": {
+          "name": "environments_host_id_hosts_id_fk",
+          "tableFrom": "environments",
+          "tableTo": "hosts",
+          "columnsFrom": [
+            "host_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "events": {
+      "name": "events",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "thread_id": {
+          "name": "thread_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "environment_id": {
+          "name": "environment_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "scope_kind": {
+          "name": "scope_kind",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "turn_id": {
+          "name": "turn_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "provider_thread_id": {
+          "name": "provider_thread_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "sequence": {
+          "name": "sequence",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "item_id": {
+          "name": "item_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "item_kind": {
+          "name": "item_kind",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "producer_event_id": {
+          "name": "producer_event_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "producer_event_payload_hash": {
+          "name": "producer_event_payload_hash",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "data": {
+          "name": "data",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'{}'"
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "events_thread_sequence_idx": {
+          "name": "events_thread_sequence_idx",
+          "columns": [
+            "thread_id",
+            "sequence"
+          ],
+          "isUnique": true
+        },
+        "events_producer_event_id_idx": {
+          "name": "events_producer_event_id_idx",
+          "columns": [
+            "producer_event_id"
+          ],
+          "isUnique": true
+        },
+        "events_thread_type_item_kind_sequence_idx": {
+          "name": "events_thread_type_item_kind_sequence_idx",
+          "columns": [
+            "thread_id",
+            "type",
+            "item_kind",
+            "sequence"
+          ],
+          "isUnique": false
+        },
+        "events_thread_type_sequence_idx": {
+          "name": "events_thread_type_sequence_idx",
+          "columns": [
+            "thread_id",
+            "type",
+            "sequence"
+          ],
+          "isUnique": false
+        },
+        "events_thread_turn_type_item_sequence_idx": {
+          "name": "events_thread_turn_type_item_sequence_idx",
+          "columns": [
+            "thread_id",
+            "turn_id",
+            "type",
+            "item_id",
+            "sequence"
+          ],
+          "isUnique": false
+        },
+        "events_environment_idx": {
+          "name": "events_environment_idx",
+          "columns": [
+            "environment_id"
+          ],
+          "isUnique": false
+        },
+        "events_completed_item_truncation_idx": {
+          "name": "events_completed_item_truncation_idx",
+          "columns": [
+            "item_kind",
+            "created_at",
+            "id"
+          ],
+          "isUnique": false,
+          "where": "\"events\".\"type\" = 'item/completed'"
+        }
+      },
+      "foreignKeys": {
+        "events_thread_id_threads_id_fk": {
+          "name": "events_thread_id_threads_id_fk",
+          "tableFrom": "events",
+          "tableTo": "threads",
+          "columnsFrom": [
+            "thread_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "events_environment_id_environments_id_fk": {
+          "name": "events_environment_id_environments_id_fk",
+          "tableFrom": "events",
+          "tableTo": "environments",
+          "columnsFrom": [
+            "environment_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {
+        "events_scope_shape_check": {
+          "name": "events_scope_shape_check",
+          "value": "(\n        (\"events\".\"scope_kind\" = 'turn' AND \"events\".\"turn_id\" IS NOT NULL)\n        OR\n        (\"events\".\"scope_kind\" = 'thread' AND \"events\".\"turn_id\" IS NULL)\n      )"
+        }
+      }
+    },
+    "host_daemon_commands": {
+      "name": "host_daemon_commands",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "host_id": {
+          "name": "host_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "session_id": {
+          "name": "session_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "cursor": {
+          "name": "cursor",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "payload": {
+          "name": "payload",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "state": {
+          "name": "state",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "retry_count": {
+          "name": "retry_count",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        },
+        "result_payload": {
+          "name": "result_payload",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "fetched_at": {
+          "name": "fetched_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "completed_at": {
+          "name": "completed_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "host_daemon_commands_host_cursor_idx": {
+          "name": "host_daemon_commands_host_cursor_idx",
+          "columns": [
+            "host_id",
+            "cursor"
+          ],
+          "isUnique": true
+        },
+        "host_daemon_commands_session_idx": {
+          "name": "host_daemon_commands_session_idx",
+          "columns": [
+            "session_id"
+          ],
+          "isUnique": false
+        },
+        "host_daemon_commands_host_state_cursor_idx": {
+          "name": "host_daemon_commands_host_state_cursor_idx",
+          "columns": [
+            "host_id",
+            "state",
+            "cursor"
+          ],
+          "isUnique": false
+        },
+        "host_daemon_commands_host_type_state_idx": {
+          "name": "host_daemon_commands_host_type_state_idx",
+          "columns": [
+            "host_id",
+            "type",
+            "state"
+          ],
+          "isUnique": false
+        },
+        "host_daemon_commands_type_state_idx": {
+          "name": "host_daemon_commands_type_state_idx",
+          "columns": [
+            "type",
+            "state"
+          ],
+          "isUnique": false
+        },
+        "host_daemon_commands_state_fetched_at_idx": {
+          "name": "host_daemon_commands_state_fetched_at_idx",
+          "columns": [
+            "state",
+            "fetched_at"
+          ],
+          "isUnique": false
+        },
+        "host_daemon_commands_payload_prune_idx": {
+          "name": "host_daemon_commands_payload_prune_idx",
+          "columns": [
+            "state",
+            "completed_at"
+          ],
+          "isUnique": false,
+          "where": "\"host_daemon_commands\".\"completed_at\" IS NOT NULL\n          AND (\"host_daemon_commands\".\"payload\" <> '{}' OR \"host_daemon_commands\".\"result_payload\" IS NOT NULL)"
+        },
+        "host_daemon_commands_completed_prune_idx": {
+          "name": "host_daemon_commands_completed_prune_idx",
+          "columns": [
+            "completed_at"
+          ],
+          "isUnique": false,
+          "where": "\"host_daemon_commands\".\"completed_at\" IS NOT NULL"
+        }
+      },
+      "foreignKeys": {
+        "host_daemon_commands_host_id_hosts_id_fk": {
+          "name": "host_daemon_commands_host_id_hosts_id_fk",
+          "tableFrom": "host_daemon_commands",
+          "tableTo": "hosts",
+          "columnsFrom": [
+            "host_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "host_daemon_commands_session_id_host_daemon_sessions_id_fk": {
+          "name": "host_daemon_commands_session_id_host_daemon_sessions_id_fk",
+          "tableFrom": "host_daemon_commands",
+          "tableTo": "host_daemon_sessions",
+          "columnsFrom": [
+            "session_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "host_daemon_sessions": {
+      "name": "host_daemon_sessions",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "host_id": {
+          "name": "host_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "instance_id": {
+          "name": "instance_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "host_name": {
+          "name": "host_name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "host_type": {
+          "name": "host_type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "data_dir": {
+          "name": "data_dir",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "protocol_version": {
+          "name": "protocol_version",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "heartbeat_interval_ms": {
+          "name": "heartbeat_interval_ms",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "lease_timeout_ms": {
+          "name": "lease_timeout_ms",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "status": {
+          "name": "status",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "lease_expires_at": {
+          "name": "lease_expires_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "last_heartbeat_at": {
+          "name": "last_heartbeat_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "closed_at": {
+          "name": "closed_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "close_reason": {
+          "name": "close_reason",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "host_daemon_sessions_host_status_idx": {
+          "name": "host_daemon_sessions_host_status_idx",
+          "columns": [
+            "host_id",
+            "status"
+          ],
+          "isUnique": false
+        },
+        "host_daemon_sessions_host_latest_idx": {
+          "name": "host_daemon_sessions_host_latest_idx",
+          "columns": [
+            "host_id",
+            "updated_at",
+            "created_at",
+            "id"
+          ],
+          "isUnique": false
+        },
+        "host_daemon_sessions_closed_prune_idx": {
+          "name": "host_daemon_sessions_closed_prune_idx",
+          "columns": [
+            "status",
+            "closed_at",
+            "id"
+          ],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "host_daemon_sessions_host_id_hosts_id_fk": {
+          "name": "host_daemon_sessions_host_id_hosts_id_fk",
+          "tableFrom": "host_daemon_sessions",
+          "tableTo": "hosts",
+          "columnsFrom": [
+            "host_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "hosts": {
+      "name": "hosts",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "command_cursor": {
+          "name": "command_cursor",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        },
+        "destroyed_at": {
+          "name": "destroyed_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "last_seen_at": {
+          "name": "last_seen_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "hosts_last_seen_idx": {
+          "name": "hosts_last_seen_idx",
+          "columns": [
+            "last_seen_at"
+          ],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "maintenance_scan_cursors": {
+      "name": "maintenance_scan_cursors",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "policy": {
+          "name": "policy",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "version": {
+          "name": "version",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "item_kind": {
+          "name": "item_kind",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "output_path": {
+          "name": "output_path",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "last_created_at": {
+          "name": "last_created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        },
+        "last_event_id": {
+          "name": "last_event_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "''"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "maintenance_scan_cursors_path_idx": {
+          "name": "maintenance_scan_cursors_path_idx",
+          "columns": [
+            "policy",
+            "version",
+            "item_kind",
+            "output_path"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "manager_thread_nudges": {
+      "name": "manager_thread_nudges",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "project_id": {
+          "name": "project_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "thread_id": {
+          "name": "thread_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "cron": {
+          "name": "cron",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "timezone": {
+          "name": "timezone",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "enabled": {
+          "name": "enabled",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": true
+        },
+        "next_fire_at": {
+          "name": "next_fire_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "last_fired_at": {
+          "name": "last_fired_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "manager_thread_nudges_due_idx": {
+          "name": "manager_thread_nudges_due_idx",
+          "columns": [
+            "enabled",
+            "next_fire_at"
+          ],
+          "isUnique": false
+        },
+        "manager_thread_nudges_project_idx": {
+          "name": "manager_thread_nudges_project_idx",
+          "columns": [
+            "project_id"
+          ],
+          "isUnique": false
+        },
+        "manager_thread_nudges_sync_key_idx": {
+          "name": "manager_thread_nudges_sync_key_idx",
+          "columns": [
+            "project_id",
+            "thread_id",
+            "name"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {
+        "manager_thread_nudges_project_id_projects_id_fk": {
+          "name": "manager_thread_nudges_project_id_projects_id_fk",
+          "tableFrom": "manager_thread_nudges",
+          "tableTo": "projects",
+          "columnsFrom": [
+            "project_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "manager_thread_nudges_thread_id_threads_id_fk": {
+          "name": "manager_thread_nudges_thread_id_threads_id_fk",
+          "tableFrom": "manager_thread_nudges",
+          "tableTo": "threads",
+          "columnsFrom": [
+            "thread_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "pending_interactions": {
+      "name": "pending_interactions",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "thread_id": {
+          "name": "thread_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "turn_id": {
+          "name": "turn_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "provider_id": {
+          "name": "provider_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "provider_thread_id": {
+          "name": "provider_thread_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "provider_request_id": {
+          "name": "provider_request_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "session_id": {
+          "name": "session_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "resolving_command_id": {
+          "name": "resolving_command_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "status": {
+          "name": "status",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "payload": {
+          "name": "payload",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "resolution": {
+          "name": "resolution",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "status_reason": {
+          "name": "status_reason",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "resolved_at": {
+          "name": "resolved_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "pending_interactions_provider_request_idx": {
+          "name": "pending_interactions_provider_request_idx",
+          "columns": [
+            "session_id",
+            "provider_id",
+            "provider_thread_id",
+            "provider_request_id"
+          ],
+          "isUnique": true
+        },
+        "pending_interactions_thread_created_idx": {
+          "name": "pending_interactions_thread_created_idx",
+          "columns": [
+            "thread_id",
+            "created_at"
+          ],
+          "isUnique": false
+        },
+        "pending_interactions_thread_status_created_idx": {
+          "name": "pending_interactions_thread_status_created_idx",
+          "columns": [
+            "thread_id",
+            "status",
+            "created_at"
+          ],
+          "isUnique": false
+        },
+        "pending_interactions_status_created_idx": {
+          "name": "pending_interactions_status_created_idx",
+          "columns": [
+            "status",
+            "created_at"
+          ],
+          "isUnique": false
+        },
+        "pending_interactions_resolving_command_idx": {
+          "name": "pending_interactions_resolving_command_idx",
+          "columns": [
+            "resolving_command_id"
+          ],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "pending_interactions_thread_id_threads_id_fk": {
+          "name": "pending_interactions_thread_id_threads_id_fk",
+          "tableFrom": "pending_interactions",
+          "tableTo": "threads",
+          "columnsFrom": [
+            "thread_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "pending_interactions_resolving_command_id_host_daemon_commands_id_fk": {
+          "name": "pending_interactions_resolving_command_id_host_daemon_commands_id_fk",
+          "tableFrom": "pending_interactions",
+          "tableTo": "host_daemon_commands",
+          "columnsFrom": [
+            "resolving_command_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "project_execution_defaults": {
+      "name": "project_execution_defaults",
+      "columns": {
+        "project_id": {
+          "name": "project_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "provider_id": {
+          "name": "provider_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "thread_type": {
+          "name": "thread_type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "model": {
+          "name": "model",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "service_tier": {
+          "name": "service_tier",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "reasoning_level": {
+          "name": "reasoning_level",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permission_mode": {
+          "name": "permission_mode",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "project_execution_defaults_project_thread_type_idx": {
+          "name": "project_execution_defaults_project_thread_type_idx",
+          "columns": [
+            "project_id",
+            "thread_type"
+          ],
+          "isUnique": true
+        },
+        "project_execution_defaults_project_idx": {
+          "name": "project_execution_defaults_project_idx",
+          "columns": [
+            "project_id"
+          ],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "project_execution_defaults_project_id_projects_id_fk": {
+          "name": "project_execution_defaults_project_id_projects_id_fk",
+          "tableFrom": "project_execution_defaults",
+          "tableTo": "projects",
+          "columnsFrom": [
+            "project_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "project_operations": {
+      "name": "project_operations",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "project_id": {
+          "name": "project_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "kind": {
+          "name": "kind",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "state": {
+          "name": "state",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "payload": {
+          "name": "payload",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "command_id": {
+          "name": "command_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "requested_at": {
+          "name": "requested_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "queued_at": {
+          "name": "queued_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "completed_at": {
+          "name": "completed_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "failure_reason": {
+          "name": "failure_reason",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "project_operations_project_kind_idx": {
+          "name": "project_operations_project_kind_idx",
+          "columns": [
+            "project_id",
+            "kind"
+          ],
+          "isUnique": true
+        },
+        "project_operations_command_idx": {
+          "name": "project_operations_command_idx",
+          "columns": [
+            "command_id"
+          ],
+          "isUnique": true
+        },
+        "project_operations_state_idx": {
+          "name": "project_operations_state_idx",
+          "columns": [
+            "state"
+          ],
+          "isUnique": false
+        },
+        "project_operations_project_idx": {
+          "name": "project_operations_project_idx",
+          "columns": [
+            "project_id"
+          ],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "project_operations_project_id_projects_id_fk": {
+          "name": "project_operations_project_id_projects_id_fk",
+          "tableFrom": "project_operations",
+          "tableTo": "projects",
+          "columnsFrom": [
+            "project_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "project_operations_command_id_host_daemon_commands_id_fk": {
+          "name": "project_operations_command_id_host_daemon_commands_id_fk",
+          "tableFrom": "project_operations",
+          "tableTo": "host_daemon_commands",
+          "columnsFrom": [
+            "command_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "project_sources": {
+      "name": "project_sources",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "project_id": {
+          "name": "project_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "host_id": {
+          "name": "host_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "path": {
+          "name": "path",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "is_default": {
+          "name": "is_default",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "project_sources_project_idx": {
+          "name": "project_sources_project_idx",
+          "columns": [
+            "project_id"
+          ],
+          "isUnique": false
+        },
+        "project_sources_host_idx": {
+          "name": "project_sources_host_idx",
+          "columns": [
+            "host_id"
+          ],
+          "isUnique": false
+        },
+        "project_sources_project_host_idx": {
+          "name": "project_sources_project_host_idx",
+          "columns": [
+            "project_id",
+            "host_id"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {
+        "project_sources_project_id_projects_id_fk": {
+          "name": "project_sources_project_id_projects_id_fk",
+          "tableFrom": "project_sources",
+          "tableTo": "projects",
+          "columnsFrom": [
+            "project_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "project_sources_host_id_hosts_id_fk": {
+          "name": "project_sources_host_id_hosts_id_fk",
+          "tableFrom": "project_sources",
+          "tableTo": "hosts",
+          "columnsFrom": [
+            "host_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {
+        "project_sources_shape_check": {
+          "name": "project_sources_shape_check",
+          "value": "(\n        \"project_sources\".\"type\" = 'local_path' AND \"project_sources\".\"host_id\" IS NOT NULL AND \"project_sources\".\"path\" IS NOT NULL\n      )"
+        }
+      }
+    },
+    "projects": {
+      "name": "projects",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "kind": {
+          "name": "kind",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'standard'"
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "sort_key": {
+          "name": "sort_key",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'V'"
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "projects_updated_idx": {
+          "name": "projects_updated_idx",
+          "columns": [
+            "updated_at"
+          ],
+          "isUnique": false
+        },
+        "projects_sort_idx": {
+          "name": "projects_sort_idx",
+          "columns": [
+            "sort_key",
+            "id"
+          ],
+          "isUnique": false
+        },
+        "projects_personal_singleton_idx": {
+          "name": "projects_personal_singleton_idx",
+          "columns": [
+            "kind"
+          ],
+          "isUnique": true,
+          "where": "\"projects\".\"kind\" = 'personal'"
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "prompt_history_entries": {
+      "name": "prompt_history_entries",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "project_id": {
+          "name": "project_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "thread_id": {
+          "name": "thread_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "scope": {
+          "name": "scope",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "request_sequence": {
+          "name": "request_sequence",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "input": {
+          "name": "input",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "prompt_history_entries_thread_request_idx": {
+          "name": "prompt_history_entries_thread_request_idx",
+          "columns": [
+            "thread_id",
+            "request_sequence"
+          ],
+          "isUnique": true
+        },
+        "prompt_history_entries_project_scope_created_idx": {
+          "name": "prompt_history_entries_project_scope_created_idx",
+          "columns": [
+            "project_id",
+            "scope",
+            "created_at",
+            "request_sequence",
+            "id"
+          ],
+          "isUnique": false
+        },
+        "prompt_history_entries_thread_scope_created_idx": {
+          "name": "prompt_history_entries_thread_scope_created_idx",
+          "columns": [
+            "thread_id",
+            "scope",
+            "created_at",
+            "request_sequence",
+            "id"
+          ],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "prompt_history_entries_project_id_projects_id_fk": {
+          "name": "prompt_history_entries_project_id_projects_id_fk",
+          "tableFrom": "prompt_history_entries",
+          "tableTo": "projects",
+          "columnsFrom": [
+            "project_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "prompt_history_entries_thread_id_threads_id_fk": {
+          "name": "prompt_history_entries_thread_id_threads_id_fk",
+          "tableFrom": "prompt_history_entries",
+          "tableTo": "threads",
+          "columnsFrom": [
+            "thread_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "queued_thread_messages": {
+      "name": "queued_thread_messages",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "thread_id": {
+          "name": "thread_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "content": {
+          "name": "content",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "model": {
+          "name": "model",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "reasoning_level": {
+          "name": "reasoning_level",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permission_mode": {
+          "name": "permission_mode",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "service_tier": {
+          "name": "service_tier",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "claimed_at": {
+          "name": "claimed_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "claim_token": {
+          "name": "claim_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "sort_key": {
+          "name": "sort_key",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "queued_thread_messages_thread_created_idx": {
+          "name": "queued_thread_messages_thread_created_idx",
+          "columns": [
+            "thread_id",
+            "created_at",
+            "id"
+          ],
+          "isUnique": false
+        },
+        "queued_thread_messages_thread_sort_idx": {
+          "name": "queued_thread_messages_thread_sort_idx",
+          "columns": [
+            "thread_id",
+            "sort_key",
+            "id"
+          ],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "queued_thread_messages_thread_id_threads_id_fk": {
+          "name": "queued_thread_messages_thread_id_threads_id_fk",
+          "tableFrom": "queued_thread_messages",
+          "tableTo": "threads",
+          "columnsFrom": [
+            "thread_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "terminal_sessions": {
+      "name": "terminal_sessions",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "thread_id": {
+          "name": "thread_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "environment_id": {
+          "name": "environment_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "host_id": {
+          "name": "host_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "daemon_session_id": {
+          "name": "daemon_session_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "title": {
+          "name": "title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "initial_cwd": {
+          "name": "initial_cwd",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "current_cwd": {
+          "name": "current_cwd",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "cols": {
+          "name": "cols",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "rows": {
+          "name": "rows",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "status": {
+          "name": "status",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "exit_code": {
+          "name": "exit_code",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "close_reason": {
+          "name": "close_reason",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "last_user_input_at": {
+          "name": "last_user_input_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "last_connected_at": {
+          "name": "last_connected_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "exited_at": {
+          "name": "exited_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "terminal_sessions_thread_status_updated_idx": {
+          "name": "terminal_sessions_thread_status_updated_idx",
+          "columns": [
+            "thread_id",
+            "status",
+            "updated_at"
+          ],
+          "isUnique": false
+        },
+        "terminal_sessions_environment_status_idx": {
+          "name": "terminal_sessions_environment_status_idx",
+          "columns": [
+            "environment_id",
+            "status"
+          ],
+          "isUnique": false
+        },
+        "terminal_sessions_host_status_idx": {
+          "name": "terminal_sessions_host_status_idx",
+          "columns": [
+            "host_id",
+            "status"
+          ],
+          "isUnique": false
+        },
+        "terminal_sessions_daemon_session_idx": {
+          "name": "terminal_sessions_daemon_session_idx",
+          "columns": [
+            "daemon_session_id"
+          ],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "terminal_sessions_thread_id_threads_id_fk": {
+          "name": "terminal_sessions_thread_id_threads_id_fk",
+          "tableFrom": "terminal_sessions",
+          "tableTo": "threads",
+          "columnsFrom": [
+            "thread_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "terminal_sessions_environment_id_environments_id_fk": {
+          "name": "terminal_sessions_environment_id_environments_id_fk",
+          "tableFrom": "terminal_sessions",
+          "tableTo": "environments",
+          "columnsFrom": [
+            "environment_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "terminal_sessions_host_id_hosts_id_fk": {
+          "name": "terminal_sessions_host_id_hosts_id_fk",
+          "tableFrom": "terminal_sessions",
+          "tableTo": "hosts",
+          "columnsFrom": [
+            "host_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "terminal_sessions_daemon_session_id_host_daemon_sessions_id_fk": {
+          "name": "terminal_sessions_daemon_session_id_host_daemon_sessions_id_fk",
+          "tableFrom": "terminal_sessions",
+          "tableTo": "host_daemon_sessions",
+          "columnsFrom": [
+            "daemon_session_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "thread_dynamic_context_file_states": {
+      "name": "thread_dynamic_context_file_states",
+      "columns": {
+        "thread_id": {
+          "name": "thread_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "file_key": {
+          "name": "file_key",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "content_status": {
+          "name": "content_status",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "content_hash": {
+          "name": "content_hash",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "shown_at": {
+          "name": "shown_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "thread_dynamic_context_file_states_thread_file_idx": {
+          "name": "thread_dynamic_context_file_states_thread_file_idx",
+          "columns": [
+            "thread_id",
+            "file_key"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {
+        "thread_dynamic_context_file_states_thread_id_threads_id_fk": {
+          "name": "thread_dynamic_context_file_states_thread_id_threads_id_fk",
+          "tableFrom": "thread_dynamic_context_file_states",
+          "tableTo": "threads",
+          "columnsFrom": [
+            "thread_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "thread_operations": {
+      "name": "thread_operations",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "thread_id": {
+          "name": "thread_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "kind": {
+          "name": "kind",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "state": {
+          "name": "state",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "payload": {
+          "name": "payload",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "provisioning_id": {
+          "name": "provisioning_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "provisioning_stage": {
+          "name": "provisioning_stage",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "provisioning_environment_id": {
+          "name": "provisioning_environment_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "provision_event_sequence": {
+          "name": "provision_event_sequence",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "workspace_ready_event_sequence": {
+          "name": "workspace_ready_event_sequence",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "command_id": {
+          "name": "command_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "requested_at": {
+          "name": "requested_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "queued_at": {
+          "name": "queued_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "completed_at": {
+          "name": "completed_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "failure_reason": {
+          "name": "failure_reason",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "thread_operations_thread_kind_idx": {
+          "name": "thread_operations_thread_kind_idx",
+          "columns": [
+            "thread_id",
+            "kind"
+          ],
+          "isUnique": true
+        },
+        "thread_operations_command_idx": {
+          "name": "thread_operations_command_idx",
+          "columns": [
+            "command_id"
+          ],
+          "isUnique": true
+        },
+        "thread_operations_state_idx": {
+          "name": "thread_operations_state_idx",
+          "columns": [
+            "state"
+          ],
+          "isUnique": false
+        },
+        "thread_operations_thread_idx": {
+          "name": "thread_operations_thread_idx",
+          "columns": [
+            "thread_id"
+          ],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "thread_operations_thread_id_threads_id_fk": {
+          "name": "thread_operations_thread_id_threads_id_fk",
+          "tableFrom": "thread_operations",
+          "tableTo": "threads",
+          "columnsFrom": [
+            "thread_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "thread_operations_provisioning_environment_id_environments_id_fk": {
+          "name": "thread_operations_provisioning_environment_id_environments_id_fk",
+          "tableFrom": "thread_operations",
+          "tableTo": "environments",
+          "columnsFrom": [
+            "provisioning_environment_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        },
+        "thread_operations_command_id_host_daemon_commands_id_fk": {
+          "name": "thread_operations_command_id_host_daemon_commands_id_fk",
+          "tableFrom": "thread_operations",
+          "tableTo": "host_daemon_commands",
+          "columnsFrom": [
+            "command_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "threads": {
+      "name": "threads",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "project_id": {
+          "name": "project_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "environment_id": {
+          "name": "environment_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "automation_id": {
+          "name": "automation_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "provider_id": {
+          "name": "provider_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "model_override": {
+          "name": "model_override",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "reasoning_level_override": {
+          "name": "reasoning_level_override",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'standard'"
+        },
+        "sort_key": {
+          "name": "sort_key",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "title": {
+          "name": "title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "title_fallback": {
+          "name": "title_fallback",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "status": {
+          "name": "status",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'created'"
+        },
+        "parent_thread_id": {
+          "name": "parent_thread_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "archived_at": {
+          "name": "archived_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "pinned_at": {
+          "name": "pinned_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "pin_sort_key": {
+          "name": "pin_sort_key",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "stop_requested_at": {
+          "name": "stop_requested_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "deleted_at": {
+          "name": "deleted_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "last_read_at": {
+          "name": "last_read_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "latest_attention_at": {
+          "name": "latest_attention_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "threads_project_updated_idx": {
+          "name": "threads_project_updated_idx",
+          "columns": [
+            "project_id",
+            "updated_at"
+          ],
+          "isUnique": false
+        },
+        "threads_project_archived_deleted_idx": {
+          "name": "threads_project_archived_deleted_idx",
+          "columns": [
+            "project_id",
+            "archived_at",
+            "deleted_at",
+            "id"
+          ],
+          "isUnique": false
+        },
+        "threads_project_type_sort_idx": {
+          "name": "threads_project_type_sort_idx",
+          "columns": [
+            "project_id",
+            "type",
+            "sort_key",
+            "id"
+          ],
+          "isUnique": false
+        },
+        "threads_environment_idx": {
+          "name": "threads_environment_idx",
+          "columns": [
+            "environment_id"
+          ],
+          "isUnique": false
+        },
+        "threads_automation_runtime_idx": {
+          "name": "threads_automation_runtime_idx",
+          "columns": [
+            "automation_id",
+            "archived_at",
+            "deleted_at",
+            "status"
+          ],
+          "isUnique": false
+        },
+        "threads_parent_idx": {
+          "name": "threads_parent_idx",
+          "columns": [
+            "parent_thread_id"
+          ],
+          "isUnique": false
+        },
+        "threads_archived_status_idx": {
+          "name": "threads_archived_status_idx",
+          "columns": [
+            "archived_at",
+            "status"
+          ],
+          "isUnique": false
+        },
+        "threads_environment_archived_deleted_idx": {
+          "name": "threads_environment_archived_deleted_idx",
+          "columns": [
+            "environment_id",
+            "archived_at",
+            "deleted_at"
+          ],
+          "isUnique": false
+        },
+        "threads_active_maintenance_idx": {
+          "name": "threads_active_maintenance_idx",
+          "columns": [
+            "status"
+          ],
+          "isUnique": false,
+          "where": "\"threads\".\"deleted_at\" IS NULL"
+        },
+        "threads_pin_sort_idx": {
+          "name": "threads_pin_sort_idx",
+          "columns": [
+            "archived_at",
+            "deleted_at",
+            "pin_sort_key",
+            "id"
+          ],
+          "isUnique": false,
+          "where": "\"threads\".\"pinned_at\" IS NOT NULL"
+        }
+      },
+      "foreignKeys": {
+        "threads_project_id_projects_id_fk": {
+          "name": "threads_project_id_projects_id_fk",
+          "tableFrom": "threads",
+          "tableTo": "projects",
+          "columnsFrom": [
+            "project_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "threads_environment_id_environments_id_fk": {
+          "name": "threads_environment_id_environments_id_fk",
+          "tableFrom": "threads",
+          "tableTo": "environments",
+          "columnsFrom": [
+            "environment_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        },
+        "threads_automation_id_automations_id_fk": {
+          "name": "threads_automation_id_automations_id_fk",
+          "tableFrom": "threads",
+          "tableTo": "automations",
+          "columnsFrom": [
+            "automation_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        },
+        "threads_parent_thread_id_threads_id_fk": {
+          "name": "threads_parent_thread_id_threads_id_fk",
+          "tableFrom": "threads",
+          "tableTo": "threads",
+          "columnsFrom": [
+            "parent_thread_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    }
+  },
+  "views": {},
+  "enums": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  },
+  "internal": {
+    "indexes": {}
+  }
+}
diff --git a/packages/db/drizzle/meta/_journal.json b/packages/db/drizzle/meta/_journal.json
index 391cd83a9..860567074 100644
--- a/packages/db/drizzle/meta/_journal.json
+++ b/packages/db/drizzle/meta/_journal.json
@@ -64,6 +64,13 @@
       "when": 1779990051923,
       "tag": "0008_thread_pinning",
       "breakpoints": true
+    },
+    {
+      "idx": 9,
+      "version": "6",
+      "when": 1780022553737,
+      "tag": "0009_famous_the_hunter",
+      "breakpoints": true
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/packages/db/src/data/index.ts b/packages/db/src/data/index.ts
index 4121ddd3e..8dc08d6e7 100644
--- a/packages/db/src/data/index.ts
+++ b/packages/db/src/data/index.ts
@@ -93,6 +93,8 @@ export {
   countLiveThreadsInEnvironment,
   countNonDeletedAssignedChildThreads,
   getThread,
+  getThreadExecutionOverride,
+  setThreadExecutionOverride,
   hasNonTerminalThreadInEnvironment,
   hasPendingThreadShutdownInEnvironment,
   listHostThreadIds,
@@ -145,6 +147,8 @@ export type {
   ReorderPinnedThreadResult,
   ThreadEnvironmentAssignmentRow,
   ThreadWithPendingInteractionState,
+  ThreadExecutionOverride,
+  SetThreadExecutionOverrideInput,
   UnpinThreadArgs,
   UpdateThreadInput,
 } from "./threads.js";
diff --git a/packages/db/src/data/threads.ts b/packages/db/src/data/threads.ts
index a0ba34752..67d49ad94 100644
--- a/packages/db/src/data/threads.ts
+++ b/packages/db/src/data/threads.ts
@@ -13,6 +13,7 @@ import {
 } from "drizzle-orm";
 import type {
   EnvironmentWorkspaceDisplayKind,
+  ReasoningLevel,
   ThreadChangeKind,
   ThreadStatus,
   ThreadType,
@@ -1324,6 +1325,60 @@ export function updateThread(
   return updated ?? null;
 }
 
+export interface ThreadExecutionOverride {
+  modelOverride: string | null;
+  reasoningLevelOverride: ReasoningLevel | null;
+}
+
+export function getThreadExecutionOverride(
+  db: ThreadWriteConnection,
+  id: string,
+): ThreadExecutionOverride | null {
+  const row = db
+    .select({
+      modelOverride: threads.modelOverride,
+      reasoningLevelOverride: threads.reasoningLevelOverride,
+    })
+    .from(threads)
+    .where(eq(threads.id, id))
+    .get();
+  return row ?? null;
+}
+
+export interface SetThreadExecutionOverrideInput {
+  threadId: string;
+  modelOverride?: string | null;
+  reasoningLevelOverride?: ReasoningLevel | null;
+}
+
+/**
+ * Persists the sticky, thread-level execution override. Presence-sensitive:
+ * an omitted field is left unchanged, an explicit `null` clears it. Kept off
+ * the generic `updateThread` helper because execution config must not flow
+ * through generic metadata updates. No realtime notification is emitted: the
+ * override is consumed by the next turn's `resolveExecutionOptions`, and no
+ * client surface renders it yet (UI surfacing is a follow-up).
+ */
+export function setThreadExecutionOverride(
+  db: ThreadWriteConnection,
+  input: SetThreadExecutionOverrideInput,
+) {
+  const set: Partial<typeof threads.$inferInsert> = { updatedAt: Date.now() };
+  if ("modelOverride" in input) {
+    set.modelOverride = input.modelOverride;
+  }
+  if ("reasoningLevelOverride" in input) {
+    set.reasoningLevelOverride = input.reasoningLevelOverride;
+  }
+  const updated = db
+    .update(threads)
+    .set(set)
+    .where(eq(threads.id, input.threadId))
+    .returning()
+    .get();
+  return updated ?? null;
+}
+
 export function markThreadAttentionRequested(
   db: ThreadWriteConnection,
   notifier: DbNotifier,
diff --git a/packages/db/src/schema.ts b/packages/db/src/schema.ts
index ca296863c..e4c3c89a7 100644
--- a/packages/db/src/schema.ts
+++ b/packages/db/src/schema.ts
@@ -265,6 +265,14 @@ export const threads = sqliteTable(
       onDelete: "set null",
     }),
     providerId: text("provider_id").notNull(),
+    // Sticky, thread-level execution overrides. NULL = no override (fall back to
+    // the per-turn request, then the last turn, then project defaults). Consulted
+    // by resolveExecutionOptions so a change applies on the next turn without
+    // sending a message. Execution config, not lifecycle state.
+    modelOverride: text("model_override"),
+    reasoningLevelOverride: text(
+      "reasoning_level_override",
+    ).$type<ReasoningLevel>(),
     type: text("type").$type<ThreadType>().notNull().default("standard"),
     sortKey: text("sort_key"),
     title: text("title"),
diff --git a/packages/db/test/data/threads.test.ts b/packages/db/test/data/threads.test.ts
index 66d14b671..0e6d1d249 100644
--- a/packages/db/test/data/threads.test.ts
+++ b/packages/db/test/data/threads.test.ts
@@ -8,6 +8,8 @@ import {
   countLiveThreadsInEnvironment,
   countNonDeletedAssignedChildThreads,
   getThread,
+  getThreadExecutionOverride,
+  setThreadExecutionOverride,
   hasPendingThreadShutdownInEnvironment,
   listHostThreadIds,
   listActiveVisiblePinnedThreadRoots,
@@ -68,6 +70,51 @@ describe("threads", () => {
     expect(fetched).toMatchObject({ id: thread.id });
   });
 
+  it("persists, reads, and clears the thread execution override", () => {
+    const { db, project } = setup();
+    const thread = createThread(db, noopNotifier, {
+      projectId: project.id,
+      providerId: "claude-code",
+    });
+
+    // No override on a fresh thread.
+    expect(getThreadExecutionOverride(db, thread.id)).toEqual({
+      modelOverride: null,
+      reasoningLevelOverride: null,
+    });
+
+    setThreadExecutionOverride(db, {
+      threadId: thread.id,
+      modelOverride: "claude-opus-4-8",
+      reasoningLevelOverride: "high",
+    });
+    expect(getThreadExecutionOverride(db, thread.id)).toEqual({
+      modelOverride: "claude-opus-4-8",
+      reasoningLevelOverride: "high",
+    });
+
+    // Presence-sensitive: an omitted field is left unchanged.
+    setThreadExecutionOverride(db, {
+      threadId: thread.id,
+      reasoningLevelOverride: "max",
+    });
+    expect(getThreadExecutionOverride(db, thread.id)).toEqual({
+      modelOverride: "claude-opus-4-8",
+      reasoningLevelOverride: "max",
+    });
+
+    // Explicit null clears.
+    setThreadExecutionOverride(db, {
+      threadId: thread.id,
+      modelOverride: null,
+      reasoningLevelOverride: null,
+    });
+    expect(getThreadExecutionOverride(db, thread.id)).toEqual({
+      modelOverride: null,
+      reasoningLevelOverride: null,
+    });
+  });
+
   it("orders and reorders active manager threads by sort key", () => {
     const { db, project } = setup();
     const firstManager = createThread(db, noopNotifier, {
diff --git a/packages/db/test/migrate.test.ts b/packages/db/test/migrate.test.ts
index d0a40ddb0..22411a469 100644
--- a/packages/db/test/migrate.test.ts
+++ b/packages/db/test/migrate.test.ts
@@ -267,6 +267,12 @@ describe("migrate", () => {
       db.$client.prepare("ALTER TABLE threads DROP COLUMN sort_key").run();
       db.$client.prepare("ALTER TABLE threads DROP COLUMN pinned_at").run();
       db.$client.prepare("ALTER TABLE threads DROP COLUMN pin_sort_key").run();
+      db.$client
+        .prepare("ALTER TABLE threads DROP COLUMN model_override")
+        .run();
+      db.$client
+        .prepare("ALTER TABLE threads DROP COLUMN reasoning_level_override")
+        .run();
       db.$client.prepare("DELETE FROM __drizzle_migrations").run();
       db.$client
         .prepare<InsertMigrationParameters>(
diff --git a/packages/domain/src/index.ts b/packages/domain/src/index.ts
index e3c6c07df..cd2e7b6a4 100644
--- a/packages/domain/src/index.ts
+++ b/packages/domain/src/index.ts
@@ -34,6 +34,8 @@ export type {
   ThreadExecutionSource,
 } from "./shared-types.js";
 
+export { reconcileReasoningLevel } from "./reasoning-level.js";
+
 export { defaultFeatureFlags, featureFlagsSchema } from "./feature-flags.js";
 export type { FeatureFlags } from "./feature-flags.js";
 
diff --git a/apps/app/src/lib/reasoning-level-reconcile.ts b/packages/domain/src/reasoning-level.ts
similarity index 91%
rename from apps/app/src/lib/reasoning-level-reconcile.ts
rename to packages/domain/src/reasoning-level.ts
index cba3b86a0..f042a820a 100644
--- a/apps/app/src/lib/reasoning-level-reconcile.ts
+++ b/packages/domain/src/reasoning-level.ts
@@ -1,11 +1,8 @@
-import {
-  reasoningLevelValues,
-  type ReasoningLevel,
-} from "@bb/domain";
+import { reasoningLevelValues, type ReasoningLevel } from "./shared-types.js";
 
 /**
- * When the user switches model, we want their reasoning preference to follow
- * as closely as possible:
+ * When the model changes, we want the reasoning preference to follow as
+ * closely as possible:
  *
  * 1. If the new model supports the previously selected level → keep it.
  * 2. Otherwise, pick the supported level with the smallest distance from
@@ -57,6 +54,6 @@ export function reconcileReasoningLevel(
 }
 
 function reasoningRank(level: ReasoningLevel): number {
-  // Canonical low→max ordering pinned by `reasoningLevelValues` in @bb/domain.
+  // Canonical low→max ordering pinned by `reasoningLevelValues`.
   return reasoningLevelValues.indexOf(level);
 }
diff --git a/apps/app/src/lib/reasoning-level-reconcile.test.ts b/packages/domain/test/reasoning-level.test.ts
similarity index 95%
rename from apps/app/src/lib/reasoning-level-reconcile.test.ts
rename to packages/domain/test/reasoning-level.test.ts
index b781961f7..5f454c426 100644
--- a/apps/app/src/lib/reasoning-level-reconcile.test.ts
+++ b/packages/domain/test/reasoning-level.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from "vitest";
-import { reconcileReasoningLevel } from "./reasoning-level-reconcile";
+import { reconcileReasoningLevel } from "../src/reasoning-level.js";
 
 describe("reconcileReasoningLevel", () => {
   it("keeps the previous level when the new model supports it", () => {
diff --git a/packages/server-contract/src/api-types.ts b/packages/server-contract/src/api-types.ts
index 4a5a2ea9f..fcc8194dc 100644
--- a/packages/server-contract/src/api-types.ts
+++ b/packages/server-contract/src/api-types.ts
@@ -117,14 +117,174 @@ export const bbDesktopInfoSchema = z.object({
 });
 export type BbDesktopInfo = z.infer<typeof bbDesktopInfoSchema>;
 
+export const bbDesktopThemeSchema = z.enum(["light", "dark"]);
+export type BbDesktopTheme = z.infer<typeof bbDesktopThemeSchema>;
+
 export type BbDesktopInfoChangeHandler = (info: BbDesktopInfo) => void;
 export type BbDesktopInfoUnsubscribe = () => void;
 
 export interface BbDesktopApi extends BbDesktopInfo {
+  /**
+   * Control surface for the desktop-only web browser tab. The renderer drives
+   * a hardened, isolated Electron `WebContentsView` through these methods; the
+   * web build has no `window.bbDesktop`, so this surface is desktop-only by
+   * construction.
+   */
+  browser: BbDesktopBrowserApi;
   checkForUpdates(): Promise<BbDesktopInfo>;
   getInfo(): Promise<BbDesktopInfo>;
   installUpdate(): Promise<void>;
   onChange(listener: BbDesktopInfoChangeHandler): BbDesktopInfoUnsubscribe;
+  /**
+   * Push the renderer-resolved theme to the Electron main process so the
+   * NSWindow appearance — traffic lights and inactive title-bar chrome —
+   * follows bb's theme rather than the OS appearance. No-op on the web build
+   * where `window.bbDesktop` is undefined.
+   */
+  setTheme(theme: BbDesktopTheme): void;
+}
+
+// --- Desktop browser surface (isolated WebContentsView host) ---
+
+/**
+ * Hard caps on attacker-influenced strings crossing the browser IPC boundary so
+ * a hostile page cannot force oversized values into IPC payloads or persisted
+ * (localStorage) tab state. The main process truncates to these before sending;
+ * the schemas reject anything longer.
+ */
+export const BB_DESKTOP_BROWSER_MAX_URL_LENGTH = 4096;
+export const BB_DESKTOP_BROWSER_MAX_TITLE_LENGTH = 1024;
+
+/**
+ * Pixel rect (CSS px, which equal device-independent points on macOS) of the
+ * panel region the native browser view must overlay. The renderer measures the
+ * placeholder div and streams this on resize; the main process applies it
+ * verbatim via `WebContentsView.setBounds`.
+ */
+export const bbDesktopBrowserViewBoundsSchema = z
+  .object({
+    x: z.number().int(),
+    y: z.number().int(),
+    width: z.number().int().nonnegative(),
+    height: z.number().int().nonnegative(),
+  })
+  .strict();
+export type BbDesktopBrowserViewBounds = z.infer<
+  typeof bbDesktopBrowserViewBoundsSchema
+>;
+
+/**
+ * Create-or-update the view for a browser tab. `url` may be empty to mean "no
+ * page yet" (the renderer shows its new-tab screen and keeps the view hidden).
+ */
+export const bbDesktopBrowserAttachRequestSchema = z
+  .object({
+    tabId: z.string().min(1),
+    url: z.string().max(BB_DESKTOP_BROWSER_MAX_URL_LENGTH),
+    bounds: bbDesktopBrowserViewBoundsSchema,
+    visible: z.boolean(),
+  })
+  .strict();
+export type BbDesktopBrowserAttachRequest = z.infer<
+  typeof bbDesktopBrowserAttachRequestSchema
+>;
+
+export const bbDesktopBrowserNavigateRequestSchema = z
+  .object({
+    tabId: z.string().min(1),
+    url: z.string().min(1).max(BB_DESKTOP_BROWSER_MAX_URL_LENGTH),
+  })
+  .strict();
+export type BbDesktopBrowserNavigateRequest = z.infer<
+  typeof bbDesktopBrowserNavigateRequestSchema
+>;
+
+export const bbDesktopBrowserSetBoundsRequestSchema = z
+  .object({
+    tabId: z.string().min(1),
+    bounds: bbDesktopBrowserViewBoundsSchema,
+  })
+  .strict();
+export type BbDesktopBrowserSetBoundsRequest = z.infer<
+  typeof bbDesktopBrowserSetBoundsRequestSchema
+>;
+
+export const bbDesktopBrowserSetVisibleRequestSchema = z
+  .object({
+    tabId: z.string().min(1),
+    visible: z.boolean(),
+  })
+  .strict();
+export type BbDesktopBrowserSetVisibleRequest = z.infer<
+  typeof bbDesktopBrowserSetVisibleRequestSchema
+>;
+
+/** Ref for tab-scoped commands with no other payload (detach/back/forward/reload/stop). */
+export const bbDesktopBrowserTabRefSchema = z
+  .object({
+    tabId: z.string().min(1),
+  })
+  .strict();
+export type BbDesktopBrowserTabRef = z.infer<
+  typeof bbDesktopBrowserTabRefSchema
+>;
+
+/**
+ * Current navigation state of a browser view, pushed main → renderer on every
+ * relevant `webContents` event. A snapshot of live state — never a queue ladder.
+ */
+export const bbDesktopBrowserStateSchema = z
+  .object({
+    tabId: z.string().min(1),
+    url: z.string().max(BB_DESKTOP_BROWSER_MAX_URL_LENGTH),
+    title: z.string().max(BB_DESKTOP_BROWSER_MAX_TITLE_LENGTH).nullable(),
+    isLoading: z.boolean(),
+    canGoBack: z.boolean(),
+    canGoForward: z.boolean(),
+    errorText: z.string().max(BB_DESKTOP_BROWSER_MAX_TITLE_LENGTH).nullable(),
+  })
+  .strict();
+export type BbDesktopBrowserState = z.infer<typeof bbDesktopBrowserStateSchema>;
+
+/**
+ * Request from main → renderer to open a popup (`window.open`/`target=_blank`)
+ * as a new in-panel browser tab. The native OS popup window is always denied.
+ */
+export const bbDesktopBrowserOpenTabRequestSchema = z
+  .object({
+    url: z.string().min(1).max(BB_DESKTOP_BROWSER_MAX_URL_LENGTH),
+  })
+  .strict();
+export type BbDesktopBrowserOpenTabRequest = z.infer<
+  typeof bbDesktopBrowserOpenTabRequestSchema
+>;
+
+export type BbDesktopBrowserStateHandler = (
+  state: BbDesktopBrowserState,
+) => void;
+export type BbDesktopBrowserOpenTabHandler = (
+  request: BbDesktopBrowserOpenTabRequest,
+) => void;
+export type BbDesktopBrowserUnsubscribe = () => void;
+
+export interface BbDesktopBrowserApi {
+  /** Create (or reuse) and show the view for `tabId`, loading `url` if non-empty. */
+  attach(request: BbDesktopBrowserAttachRequest): void;
+  /** Destroy the view for `tabId` (tears down its `webContents`). */
+  detach(tabId: string): void;
+  navigate(request: BbDesktopBrowserNavigateRequest): void;
+  goBack(tabId: string): void;
+  goForward(tabId: string): void;
+  reload(tabId: string): void;
+  stop(tabId: string): void;
+  setBounds(request: BbDesktopBrowserSetBoundsRequest): void;
+  setVisible(request: BbDesktopBrowserSetVisibleRequest): void;
+  /** Subscribe to navigation-state pushes for every view in this window. */
+  onState(listener: BbDesktopBrowserStateHandler): BbDesktopBrowserUnsubscribe;
+  /** Subscribe to popup requests that should open as a new in-panel browser tab. */
+  onOpenTab(
+    listener: BbDesktopBrowserOpenTabHandler,
+  ): BbDesktopBrowserUnsubscribe;
 }
 
 // --- Thread creation: environment + workspace discriminated unions ---
@@ -488,10 +648,19 @@ export const updateThreadRequestSchema = z
   .object({
     title: z.string().min(1).nullable(),
     parentThreadId: z.string().min(1).nullable(),
+    // Sticky thread-level execution overrides applied on the next turn. `null`
+    // clears the override; an omitted field is left unchanged. Settable
+    // together or independently.
+    model: z.string().min(1).nullable(),
+    reasoningLevel: reasoningLevelSchema.nullable(),
   })
   .partial()
   .refine(
-    (value) => value.title !== undefined || value.parentThreadId !== undefined,
+    (value) =>
+      value.title !== undefined ||
+      value.parentThreadId !== undefined ||
+      value.model !== undefined ||
+      value.reasoningLevel !== undefined,
     "At least one field must be provided",
   );
 export type UpdateThreadRequest = z.infer<typeof updateThreadRequestSchema>;
diff --git a/packages/server-contract/src/index.ts b/packages/server-contract/src/index.ts
index 3de829129..df0c0383b 100644
--- a/packages/server-contract/src/index.ts
+++ b/packages/server-contract/src/index.ts
@@ -152,7 +152,18 @@ export {
   automationSchema,
   automationValidationIssueSchema,
   automationValidationSchema,
+  BB_DESKTOP_BROWSER_MAX_TITLE_LENGTH,
+  BB_DESKTOP_BROWSER_MAX_URL_LENGTH,
+  bbDesktopBrowserAttachRequestSchema,
+  bbDesktopBrowserNavigateRequestSchema,
+  bbDesktopBrowserOpenTabRequestSchema,
+  bbDesktopBrowserSetBoundsRequestSchema,
+  bbDesktopBrowserSetVisibleRequestSchema,
+  bbDesktopBrowserStateSchema,
+  bbDesktopBrowserTabRefSchema,
+  bbDesktopBrowserViewBoundsSchema,
   bbDesktopInfoSchema,
+  bbDesktopThemeSchema,
   bbDesktopVersionFeedFileSchema,
   bbDesktopVersionFeedSchema,
   commitActionResponseSchema,
@@ -320,9 +331,22 @@ export type {
   AutomationScheduleTrigger,
   AutomationValidation,
   BbDesktopApi,
+  BbDesktopBrowserApi,
+  BbDesktopBrowserAttachRequest,
+  BbDesktopBrowserNavigateRequest,
+  BbDesktopBrowserOpenTabHandler,
+  BbDesktopBrowserOpenTabRequest,
+  BbDesktopBrowserSetBoundsRequest,
+  BbDesktopBrowserSetVisibleRequest,
+  BbDesktopBrowserState,
+  BbDesktopBrowserStateHandler,
+  BbDesktopBrowserTabRef,
+  BbDesktopBrowserUnsubscribe,
+  BbDesktopBrowserViewBounds,
   BbDesktopInfo,
   BbDesktopInfoChangeHandler,
   BbDesktopInfoUnsubscribe,
+  BbDesktopTheme,
   BbDesktopVersionFeed,
   BbDesktopVersionFeedFile,
   CommitActionResponse,
diff --git a/packages/server-contract/test/contract.test.ts b/packages/server-contract/test/contract.test.ts
index f9aca0299..6ce6c9f8d 100644
--- a/packages/server-contract/test/contract.test.ts
+++ b/packages/server-contract/test/contract.test.ts
@@ -210,8 +210,12 @@ const INTENTIONAL_OPTIONAL_SERVER_FIELDS: Record<string, string> = {
     "Project source PATCH requests omit isDefault when not changing the default source.",
   "updateProjectSourceRequestSchema.path":
     "Project source PATCH requests omit path when leaving it unchanged.",
+  "updateThreadRequestSchema.model":
+    "Thread PATCH requests omit model when leaving the sticky model override unchanged or use null to clear it.",
   "updateThreadRequestSchema.parentThreadId":
     "Thread PATCH requests omit parentThreadId when leaving it unchanged or use null to clear it.",
+  "updateThreadRequestSchema.reasoningLevel":
+    "Thread PATCH requests omit reasoningLevel when leaving the sticky reasoning override unchanged or use null to clear it.",
   "updateThreadRequestSchema.title":
     "Thread PATCH requests omit title when leaving it unchanged or use null to clear it.",
   "uploadedPromptAttachmentSchema.mimeType":
diff --git a/packages/templates/src/generated/templates.generated.ts b/packages/templates/src/generated/templates.generated.ts
index 3f53e959c..3502f73f5 100644
--- a/packages/templates/src/generated/templates.generated.ts
+++ b/packages/templates/src/generated/templates.generated.ts
@@ -18,7 +18,7 @@ export const templateDefinitions = [
   },
   {
     "id": "bbGuideApp",
-    "body": "Apps\n\nApps are the supported way to build dashboards, control panels, and other\ninteractive surfaces inside thread storage. A manager's primary status surface\nis the built-in `status` app. Keep that app current instead of creating legacy\ntop-level status files.\n\nStorage layout:\n\n```text\n$BB_THREAD_STORAGE/\n  apps/\n    status/\n      manifest.json\n      assets/\n        index.html\n      data/\n        state.json\n```\n\nEach app is rooted at `apps/<id>/`. The manifest lives at\n`apps/<id>/manifest.json`, browser files live under `apps/<id>/assets/`, and\ndurable JSON state lives under `apps/<id>/data/`. The `status` app should keep\nits primary shared state in `apps/status/data/state.json`.\n\nManifest:\n\n```json\n{\n  \"manifestVersion\": 1,\n  \"id\": \"status\",\n  \"name\": \"Status\",\n  \"icon\": \"ListTodo\",\n  \"entry\": \"index.html\",\n  \"contributions\": [\"thread.app\"],\n  \"capabilities\": [\"data\", \"message\"]\n}\n```\n\n`id` uses letters, numbers, underscores, and hyphens. `entry` is relative to\n`assets/`. HTML entries load in an app iframe and receive the `window.bb`\nbridge according to `capabilities`; Markdown entries render as static documents\nand do not receive `window.bb`. `capabilities` controls which `window.bb`\nhelpers are injected for HTML entries: `data` enables `window.bb.data`, and\n`message` enables `window.bb.message`.\n\nThe served app URL is flat: `/api/v1/threads/<thread-id>/apps/<id>/<file>`\nmaps to `apps/<id>/assets/<file>` on disk. HTML should use flat relative refs\nlike `./index-abc.js`, not `./assets/index-abc.js`. For Vite builds, set\n`build.assetsDir = \"\"` so emitted files sit alongside `index.html`.\n\nThe icon is optional and uses a built-in icon name. Icon resolution order is:\n\n1. `manifest.icon`, when present, as a built-in icon.\n2. A custom top-level `logo.svg`, `logo.png`, `logo.jpg`, or `logo.jpeg` in the\n   app root, up to 1 MB.\n3. The built-in `GridView` fallback.\n\nCLI:\n\n```bash\nbb app list --self\nbb app new \"Review Board\" --id review-board --template blank --self\nbb app new \"Status\" --id status --template status --self\nbb app open status --self\nbb app rm review-board --self --yes\n```\n\nPass a thread id instead of `--self` to target another thread. `bb app open`\nprints the app URL. `--json` is available for scripts.\n\nAgent writes:\n\nWrite app data directly to `apps/<id>/data/<path>` using a temp file in the\nsame directory and then `mv` into place. Same-directory rename is atomic on\nmacOS and Linux, and bb broadcasts the committed app-data change.\n\n```bash\ndir=\"$BB_THREAD_STORAGE/apps/status/data\"\nmkdir -p \"$dir\"\ntmp=$(mktemp \"$dir/.state.XXXXXX\")\nprintf '%s\\n' '{\"tasks\":[],\"updatedAt\":\"2026-05-28T00:00:00Z\"}' > \"$tmp\" &&\n  mv \"$tmp\" \"$dir/state.json\"\n```\n\nData paths are relative to the app's `data/` directory. They must not start or\nend with `/`, must not contain backslashes, dot-prefixed segments, `.` or `..`,\nand may be nested up to eight path segments. Each segment may use letters,\nnumbers, dots, underscores, and hyphens.\n\nBrowser API:\n\n```ts\nwindow.bb.appId\nawait window.bb.data?.read(\"state.json\")\nawait window.bb.data?.write(\"state.json\", { tasks: [] })\nawait window.bb.data?.delete(\"state.json\")\nconst entries = await window.bb.data?.list(\"\")\nconst unsubscribe = window.bb.data?.onChange(\"\", (event) => {\n  console.log(event.path, event.value, event.deleted)\n})\nawait window.bb.message?.(\"Please review the current blockers.\")\n```\n\n`window.bb.data` reads and writes JSON values. `onChange(prefix, callback)`\nmatches a single data file when `prefix` equals that path and matches a subtree\nwhen the changed path is below `prefix + \"/\"`; `\"\"` matches all app data.\nRegistering a listener immediately replays existing matching data, and bb\nreplays again after reconnects or app-data resync hints. Later filesystem\nwrites, browser writes, and deletes are delivered after that replay.\n`window.bb.message(text)` sends a normal follow-up message to the thread that\nowns the app.\n\nMinimal status app pattern:\n\n```html\n<main>\n  <h1>Current work</h1>\n  <ul id=\"tasks\"></ul>\n</main>\n<script>\nconst list = document.querySelector(\"#tasks\");\n\nfunction render(state) {\n  const tasks = state?.tasks ?? [];\n  list.replaceChildren(\n    ...tasks.map((task) => {\n      const item = document.createElement(\"li\");\n      item.textContent = `${task.title} - ${task.state}`;\n      return item;\n    }),\n  );\n}\n\nwindow.bb.data?.read(\"state.json\").then(render);\nwindow.bb.data?.onChange(\"state.json\", (event) => render(event.value));\n</script>\n```\n\nStyling:\n\nMake app UI quiet, dense, and consistent with bb unless the user asks for a\ndifferent direction. Use Tailwind for layout utilities if helpful, and use the\nbb-style tokens below for colors, fonts, borders, radius, and shadows. Apps\nrender in iframes, so external resources such as Google Fonts, Tailwind CDN,\nremote images, and stylesheets load normally.\n\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fira+Code:wght@400;500&display=swap\" rel=\"stylesheet\">\n<style>\n:root {\n  color-scheme: light;\n  --background: oklch(0.9551 0 0);\n  --foreground: oklch(0.3211 0 0);\n  --card: oklch(0.9702 0 0);\n  --muted: oklch(0.8853 0 0);\n  --muted-foreground: oklch(0.5103 0 0);\n  --border: oklch(0.8576 0 0);\n  --accent: oklch(0.9 0 0);\n  --success: oklch(0.7 0.15 155);\n  --warning: oklch(0.7 0.16 50);\n  --destructive: oklch(0.5594 0.19 25.8625);\n  --radius: 0.5rem;\n  --font-sans: \"Inter\", ui-sans-serif, system-ui, sans-serif;\n  --font-mono: \"Fira Code\", ui-monospace, SFMono-Regular, monospace;\n}\n@media (prefers-color-scheme: dark) {\n  :root {\n    color-scheme: dark;\n    --background: oklch(0.2178 0 0);\n    --foreground: oklch(0.8853 0 0);\n    --card: oklch(0.2435 0 0);\n    --muted: oklch(0.31 0 0);\n    --muted-foreground: oklch(0.7058 0 0);\n    --border: oklch(0.34 0 0);\n    --accent: oklch(0.32 0 0);\n  }\n}\nbody {\n  margin: 0;\n  background: var(--background);\n  color: var(--foreground);\n  font-family: var(--font-sans);\n  font-size: 13px;\n}\n.panel {\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  background: var(--card);\n}\n</style>\n```\n\nKeep one canonical app for each concept. For manager progress, update the\n`status` app instead of creating parallel views. Use additional apps only when\nthey are distinct tools or dashboards.\n\nRelated guides:\n\n  bb guide overview\n  bb guide managers\n  bb guide manager-templates\n  bb guide async",
+    "body": "Apps\n\nApps are the supported way to build dashboards, control panels, and other\ninteractive surfaces inside thread storage. A manager's primary status surface\nis the built-in `status` app. Keep that app current instead of creating legacy\ntop-level status files.\n\nImportant: a bb app is self-contained static HTML/CSS/JS/SVG. Put files under\n`apps/<id>/assets/`; bb serves the `entry` file directly from the flat app URL\nthrough the host daemon. Do not start a web server, localhost dev server, npm\ninstall, build step, bundler, or framework for a normal app. Inline CSS/JS,\nrelative asset refs, and CDN resources such as Tailwind or fonts are fine.\n\nStorage layout:\n\n```text\n$BB_THREAD_STORAGE/\n  apps/\n    status/\n      manifest.json\n      assets/\n        index.html\n      data/\n        state.json\n```\n\nEach app is rooted at `apps/<id>/`. The manifest lives at\n`apps/<id>/manifest.json`, browser files live under `apps/<id>/assets/`, and\ndurable JSON state lives under `apps/<id>/data/`. The `status` app should keep\nits primary shared state in `apps/status/data/state.json`.\n\nManifest:\n\n```json\n{\n  \"manifestVersion\": 1,\n  \"id\": \"status\",\n  \"name\": \"Status\",\n  \"icon\": \"ListTodo\",\n  \"entry\": \"index.html\",\n  \"contributions\": [\"thread.app\"],\n  \"capabilities\": [\"data\", \"message\"]\n}\n```\n\n`id` uses letters, numbers, underscores, and hyphens. `entry` is relative to\n`assets/`. HTML entries load in an app iframe and receive the `window.bb`\nbridge according to `capabilities`; Markdown entries render as static documents\nand do not receive `window.bb`. `capabilities` controls which `window.bb`\nhelpers are injected for HTML entries: `data` enables `window.bb.data`, and\n`message` enables `window.bb.message`.\n\nThe served app URL is flat: `/api/v1/threads/<thread-id>/apps/<id>/<file>`\nmaps to `apps/<id>/assets/<file>` on disk. HTML should use flat relative refs\nlike `./index-abc.js`, not `./assets/index-abc.js`. If you are migrating an\nexisting Vite build output, set `build.assetsDir = \"\"` so emitted files sit\nalongside `index.html`; new bb apps should stay plain static files.\n\nThe icon is optional and uses a built-in icon name. Icon resolution order is:\n\n1. `manifest.icon`, when present, as a built-in icon.\n2. A custom top-level `logo.svg`, `logo.png`, `logo.jpg`, or `logo.jpeg` in the\n   app root, up to 1 MB.\n3. The built-in `GridView` fallback.\n\nCLI:\n\n```bash\nbb app list --self\nbb app new \"Review Board\" --id review-board --template blank --self\nbb app new \"Status\" --id status --template status --self\nbb app open status --self\nbb app rm review-board --self --yes\n```\n\nPass a thread id instead of `--self` to target another thread. `bb app open`\nprints the app URL. `--json` is available for scripts.\n\nAgent writes:\n\nWrite app data directly to `apps/<id>/data/<path>` using a temp file in the\nsame directory and then `mv` into place. Same-directory rename is atomic on\nmacOS and Linux, and bb broadcasts the committed app-data change.\n\n```bash\ndir=\"$BB_THREAD_STORAGE/apps/status/data\"\nmkdir -p \"$dir\"\ntmp=$(mktemp \"$dir/.state.XXXXXX\")\nprintf '%s\\n' '{\"tasks\":[],\"updatedAt\":\"2026-05-28T00:00:00Z\"}' > \"$tmp\" &&\n  mv \"$tmp\" \"$dir/state.json\"\n```\n\nData paths are relative to the app's `data/` directory. They must not start or\nend with `/`, must not contain backslashes, dot-prefixed segments, `.` or `..`,\nand may be nested up to eight path segments. Each segment may use letters,\nnumbers, dots, underscores, and hyphens.\n\nBrowser API:\n\n```ts\nwindow.bb.appId\nawait window.bb.data?.read(\"state.json\")\nawait window.bb.data?.write(\"state.json\", { tasks: [] })\nawait window.bb.data?.delete(\"state.json\")\nconst entries = await window.bb.data?.list(\"\")\nconst unsubscribe = window.bb.data?.onChange(\"\", (event) => {\n  console.log(event.path, event.value, event.deleted)\n})\nawait window.bb.message?.(\"Please review the current blockers.\")\n```\n\n`window.bb.data` reads and writes JSON values. `onChange(prefix, callback)`\nmatches a single data file when `prefix` equals that path and matches a subtree\nwhen the changed path is below `prefix + \"/\"`; `\"\"` matches all app data.\nRegistering a listener immediately replays existing matching data, and bb\nreplays again after reconnects or app-data resync hints. Later filesystem\nwrites, browser writes, and deletes are delivered after that replay.\n`window.bb.message(text)` sends a normal follow-up message to the thread that\nowns the app.\n\nMinimal status app pattern:\n\n```html\n<main>\n  <h1>Current work</h1>\n  <ul id=\"tasks\"></ul>\n</main>\n<script>\nconst list = document.querySelector(\"#tasks\");\n\nfunction render(state) {\n  const tasks = state?.tasks ?? [];\n  list.replaceChildren(\n    ...tasks.map((task) => {\n      const item = document.createElement(\"li\");\n      item.textContent = `${task.title} - ${task.state}`;\n      return item;\n    }),\n  );\n}\n\nwindow.bb.data?.read(\"state.json\").then(render);\nwindow.bb.data?.onChange(\"state.json\", (event) => render(event.value));\n</script>\n```\n\nStyling:\n\nMake app UI quiet, dense, and consistent with bb unless the user asks for a\ndifferent direction. Use Tailwind for layout utilities if helpful, and use the\nbb-style tokens below for colors, fonts, borders, radius, and shadows. Apps\nrender in iframes, so external resources such as Google Fonts, Tailwind CDN,\nremote images, and stylesheets load normally.\n\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fira+Code:wght@400;500&display=swap\" rel=\"stylesheet\">\n<style>\n:root {\n  color-scheme: light;\n  --background: oklch(0.9551 0 0);\n  --foreground: oklch(0.3211 0 0);\n  --card: oklch(0.9702 0 0);\n  --muted: oklch(0.8853 0 0);\n  --muted-foreground: oklch(0.5103 0 0);\n  --border: oklch(0.8576 0 0);\n  --accent: oklch(0.9 0 0);\n  --success: oklch(0.7 0.15 155);\n  --warning: oklch(0.7 0.16 50);\n  --destructive: oklch(0.5594 0.19 25.8625);\n  --radius: 0.5rem;\n  --font-sans: \"Inter\", ui-sans-serif, system-ui, sans-serif;\n  --font-mono: \"Fira Code\", ui-monospace, SFMono-Regular, monospace;\n}\n@media (prefers-color-scheme: dark) {\n  :root {\n    color-scheme: dark;\n    --background: oklch(0.2178 0 0);\n    --foreground: oklch(0.8853 0 0);\n    --card: oklch(0.2435 0 0);\n    --muted: oklch(0.31 0 0);\n    --muted-foreground: oklch(0.7058 0 0);\n    --border: oklch(0.34 0 0);\n    --accent: oklch(0.32 0 0);\n  }\n}\nbody {\n  margin: 0;\n  background: var(--background);\n  color: var(--foreground);\n  font-family: var(--font-sans);\n  font-size: 13px;\n}\n.panel {\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  background: var(--card);\n}\n</style>\n```\n\nKeep one canonical app for each concept. For manager progress, update the\n`status` app instead of creating parallel views. Use additional apps only when\nthey are distinct tools or dashboards.\n\nRelated guides:\n\n  bb guide overview\n  bb guide managers\n  bb guide manager-templates\n  bb guide async",
     "fileName": "bb-guide-app.md",
     "kind": "instruction",
     "title": "bb Guide - Apps",
diff --git a/packages/templates/src/templates/bb-guide-app.md b/packages/templates/src/templates/bb-guide-app.md
index 671bfd3ed..4472a708a 100644
--- a/packages/templates/src/templates/bb-guide-app.md
+++ b/packages/templates/src/templates/bb-guide-app.md
@@ -12,6 +12,12 @@ interactive surfaces inside thread storage. A manager's primary status surface
 is the built-in `status` app. Keep that app current instead of creating legacy
 top-level status files.
 
+Important: a bb app is self-contained static HTML/CSS/JS/SVG. Put files under
+`apps/<id>/assets/`; bb serves the `entry` file directly from the flat app URL
+through the host daemon. Do not start a web server, localhost dev server, npm
+install, build step, bundler, or framework for a normal app. Inline CSS/JS,
+relative asset refs, and CDN resources such as Tailwind or fonts are fine.
+
 Storage layout:
 
 ```text
@@ -53,8 +59,9 @@ helpers are injected for HTML entries: `data` enables `window.bb.data`, and
 
 The served app URL is flat: `/api/v1/threads/<thread-id>/apps/<id>/<file>`
 maps to `apps/<id>/assets/<file>` on disk. HTML should use flat relative refs
-like `./index-abc.js`, not `./assets/index-abc.js`. For Vite builds, set
-`build.assetsDir = ""` so emitted files sit alongside `index.html`.
+like `./index-abc.js`, not `./assets/index-abc.js`. If you are migrating an
+existing Vite build output, set `build.assetsDir = ""` so emitted files sit
+alongside `index.html`; new bb apps should stay plain static files.
 
 The icon is optional and uses a built-in icon name. Icon resolution order is:
 
diff --git a/packages/templates/test/templates.test.ts b/packages/templates/test/templates.test.ts
index 7fcc9049d..07aa2c898 100644
--- a/packages/templates/test/templates.test.ts
+++ b/packages/templates/test/templates.test.ts
@@ -189,6 +189,9 @@ describe("@bb/templates", () => {
     expect(rendered).toContain("apps/status/data/state.json");
     expect(rendered).toContain("window.bb.data");
     expect(rendered).toContain("bb app list --self");
+    expect(rendered).toContain(
+      "Do not start a web server, localhost dev server, npm",
+    );
     expect(rendered).toContain(
       '<script src="https://cdn.tailwindcss.com"></script>',
     );