Add sidebar lifecycle filters and drafts

apps/app/src/App.tsx

@@ -57,6 +57,7 @@ import { AppCommandProvider } from "./components/commands/AppCommandProvider";
 import { ProviderCliInstallLogDialogHost } from "./components/provider-cli/provider-cli-install";
 import { PluginSettingsCompatibilityRoute } from "./components/settings/PluginSettingsCompatibilityRoute";
 import { RouteLoadingSkeleton } from "./components/ui/route-loading-skeleton";
+import { AppLocalStateInitialization } from "./components/AppLocalStateInitialization";
 
 const SettingsView = lazy(() =>
   import("./views/SettingsView").then((m) => ({
@@ -371,6 +372,7 @@ export function App() {
 
   return (
     <QuickCreateProjectProvider>
+      <AppLocalStateInitialization />
       <AppCommandProvider>
         <RouteNavigationProvider>
           <AppNavigationUrlHost>
@@ -387,8 +389,8 @@ export function App() {
               {/* Outside <Routes>: a provider CLI install outlives the page that
                 started it, so its failure toast can be clicked from any route —
                 including auth callback, which renders no app shell. */}
-               <ProviderCliInstallLogDialogHost />
-             </AppFileExternalNavigationHost>
+              <ProviderCliInstallLogDialogHost />
+            </AppFileExternalNavigationHost>
           </AppNavigationUrlHost>
         </RouteNavigationProvider>
       </AppCommandProvider>

apps/app/src/components/AppLocalStateInitialization.test.tsx

@@ -0,0 +1,63 @@
+// @vitest-environment jsdom
+
+import { cleanup, render, screen } from "@testing-library/react";
+import { StrictMode } from "react";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import {
+  promptDraftSlotStorageKeysForTests,
+  readNewThreadDraftSlots,
+} from "@/lib/prompt-draft-slots";
+import { useNewThreadDraftSlots } from "@/hooks/useNewThreadDraftSlots";
+import { AppLocalStateInitialization } from "./AppLocalStateInitialization";
+
+function DraftRows() {
+  const drafts = useNewThreadDraftSlots();
+  return <output>{drafts.map((draft) => draft.title).join(", ")}</output>;
+}
+
+beforeEach(() => {
+  window.localStorage.clear();
+});
+
+afterEach(() => {
+  cleanup();
+  window.localStorage.clear();
+});
+
+describe("AppLocalStateInitialization", () => {
+  it("migrates the legacy shared composer draft at app boot", () => {
+    window.localStorage.setItem(
+      "bb.root-compose.project-id",
+      "project-at-launch",
+    );
+    window.localStorage.setItem(
+      promptDraftSlotStorageKeysForTests.legacy,
+      JSON.stringify({ text: "Never lose this draft", attachments: [] }),
+    );
+
+    render(
+      <StrictMode>
+        <AppLocalStateInitialization />
+        <DraftRows />
+      </StrictMode>,
+    );
+
+    expect(readNewThreadDraftSlots()).toEqual([
+      expect.objectContaining({
+        draft: {
+          attachments: [],
+          mentions: [],
+          text: "Never lose this draft",
+        },
+        destination: {
+          projectId: "project-at-launch",
+          sectionId: null,
+        },
+      }),
+    ]);
+    expect(
+      window.localStorage.getItem(promptDraftSlotStorageKeysForTests.legacy),
+    ).toBeNull();
+    expect(screen.getByText("Never lose this draft")).not.toBeNull();
+  });
+});

apps/app/src/components/AppLocalStateInitialization.tsx

@@ -0,0 +1,21 @@
+import { useEffect, useRef } from "react";
+import { refreshNewThreadDraftSlots } from "@/hooks/usePromptDraftStorage";
+import { initializeNewThreadDraftSlots } from "@/lib/prompt-draft-slots";
+import { readRootComposeProjectId } from "@/lib/root-compose-selection";
+
+/**
+ * Launch-time client-local migrations that must run regardless of which
+ * sidebar surface owns thread-list rendering.
+ */
+export function AppLocalStateInitialization() {
+  const didInitializeDraftSlots = useRef(false);
+
+  useEffect(() => {
+    if (didInitializeDraftSlots.current) return;
+    didInitializeDraftSlots.current = true;
+    initializeNewThreadDraftSlots(readRootComposeProjectId());
+    refreshNewThreadDraftSlots();
+  }, []);
+
+  return null;
+}

apps/app/src/components/sidebar/ProjectList.modes.test.tsx

@@ -17,7 +17,11 @@ import {
 } from "jotai";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import type { ThreadListEntry } from "@bb/domain";
-import { ActiveSidebarModeSections, MachineModeSections } from "./ProjectList";
+import {
+  ActiveSidebarModeSections,
+  BuiltInSidebarLifecycleSections,
+  MachineModeSections,
+} from "./ProjectList";
 import { buildMachineThreadGroups } from "@bb/client-core";
 import {
   collapsedSidebarSectionIdsAtom,
@@ -195,6 +199,35 @@ afterEach(() => {
 });
 
 describe("sidebar organization mode sections", () => {
+  it.each<SidebarOrganizationMode>(["project", "chronological", "machine"])(
+    "keeps drafts above %s sections and archived rows trailing",
+    (mode) => {
+      const { container } = render(
+        <BuiltInSidebarLifecycleSections
+          draftRows={<div>Drafts</div>}
+          activeModeSections={
+            <ActiveSidebarModeSections
+              mode={mode}
+              renderChronological={() => <div>Chronological</div>}
+              renderMachine={() => <div>Machine</div>}
+              renderProject={() => <div>Project</div>}
+            />
+          }
+          archivedRows={<div>Archived</div>}
+          emptyState={null}
+        />,
+      );
+
+      const activeLabel =
+        mode === "chronological"
+          ? "Chronological"
+          : mode === "machine"
+            ? "Machine"
+            : "Project";
+      expect(container.textContent).toBe(`Drafts${activeLabel}Archived`);
+    },
+  );
+
   it("does not mount inactive ordering or machine-grouping work", async () => {
     const store = createStore();
     store.set(sidebarSectionOrderAtom, ["threads", "project:a", "pinned"]);