Share plugin sidebar DTO cache across consumers, provide route navigation in Ladle

- plugin-sidebar-hooks: derive the host-name map per hosts payload at module
  level so two useSidebarThreads callers keep the same WeakMap DTO entries
  instead of evicting each other's; test covers two consumers.
- plugin-slots: batch closer never drives the depth below zero after a test
  reset.
- Ladle global provider mounts RouteNavigationProvider so sidebar/thread
  stories that now navigate through useRouteNavigate do not throw on click.

Co-Authored-By: Claude <noreply@anthropic.com>

Author: SawyerHood

apps/app/.ladle/components.tsx

@@ -6,6 +6,7 @@ import { WorkerPoolContextProvider } from "@pierre/diffs/react";
 import { Provider as JotaiProvider, createStore } from "jotai";
 import { MemoryRouter } from "react-router-dom";
 import { AppToaster } from "../src/components/AppToaster";
+import { RouteNavigationProvider } from "../src/components/ui/app-route-anchor";
 import { TooltipProvider } from "@bb/shared-ui/tooltip";
 import { setPreferredTheme } from "../src/hooks/useTheme";
 import {
@@ -57,24 +58,28 @@ export const Provider: GlobalProvider = ({ globalState, children }) => {
 
   return (
     <MemoryRouter initialEntries={["/"]}>
-      <JotaiProvider store={store}>
-        <QueryClientProvider client={queryClient}>
-          <WorkerPoolContextProvider
-            poolOptions={{
-              workerFactory: createDiffWorker,
-              poolSize: getDiffWorkerPoolSize(),
-            }}
-            highlighterOptions={{}}
-          >
-            <TooltipProvider delayDuration={300} disableHoverableContent>
-              <div className="min-h-screen text-foreground">
-                {children}
-                <AppToaster position="bottom-right" />
-              </div>
-            </TooltipProvider>
-          </WorkerPoolContextProvider>
-        </QueryClientProvider>
-      </JotaiProvider>
+      {/* Sidebar rows, thread actions and the fork handler navigate through
+          useRouteNavigate, which throws at the click without this provider. */}
+      <RouteNavigationProvider>
+        <JotaiProvider store={store}>
+          <QueryClientProvider client={queryClient}>
+            <WorkerPoolContextProvider
+              poolOptions={{
+                workerFactory: createDiffWorker,
+                poolSize: getDiffWorkerPoolSize(),
+              }}
+              highlighterOptions={{}}
+            >
+              <TooltipProvider delayDuration={300} disableHoverableContent>
+                <div className="min-h-screen text-foreground">
+                  {children}
+                  <AppToaster position="bottom-right" />
+                </div>
+              </TooltipProvider>
+            </WorkerPoolContextProvider>
+          </QueryClientProvider>
+        </JotaiProvider>
+      </RouteNavigationProvider>
     </MemoryRouter>
   );
 };

apps/app/src/lib/plugin-sidebar-hooks.test.tsx

@@ -70,4 +70,22 @@ describe("useSidebarThreads", () => {
     expect(after[1]).not.toBe(before[1]);
     expect(after[1]?.title).toBe("Two");
   });
+
+  it("shares DTO identity between two consumers of the same payload", () => {
+    const stable = makeThreadListEntry({ id: "thr_stable", title: "Stable" });
+    state.data = payload([stable]);
+    const first = renderHook(() => useSidebarThreads());
+    const second = renderHook(() => useSidebarThreads());
+    // Two plugin lists mounted at once (or one list plus the built-in
+    // sidebar's plugin surfaces): each derives the host-name map from the
+    // same hosts payload, so they must not evict each other's cached DTOs.
+    expect(second.result.current.threads[0]).toBe(
+      first.result.current.threads[0],
+    );
+    const before = first.result.current.threads[0];
+    first.rerender();
+    second.rerender();
+    expect(first.result.current.threads[0]).toBe(before);
+    expect(second.result.current.threads[0]).toBe(before);
+  });
 });

apps/app/src/lib/plugin-sidebar-hooks.ts

@@ -1,6 +1,10 @@
 import { useCallback, useMemo } from "react";
 import { useStore } from "jotai";
-import { PERSONAL_PROJECT_ID, type ThreadListEntry } from "@bb/domain";
+import {
+  PERSONAL_PROJECT_ID,
+  type Host,
+  type ThreadListEntry,
+} from "@bb/domain";
 import { useIsCompactViewport } from "@bb/shared-ui/hooks/use-compact-viewport";
 import type {
   PluginSidebarProject,
@@ -31,6 +35,29 @@ import {
 const EMPTY_THREADS: readonly PluginSidebarThread[] = [];
 const EMPTY_PROJECTS: readonly PluginSidebarProject[] = [];
 const EMPTY_ENTRIES: ReadonlyMap<string, ThreadListEntry> = new Map();
+const EMPTY_HOST_NAMES: ReadonlyMap<string, string> = new Map();
+
+/**
+ * Host-name map per hosts payload. Module-level (not `useMemo`) so every
+ * `useSidebarThreads` caller derives the same map object from the same React
+ * Query result; a per-hook map would give two plugin lists two keys and make
+ * them evict each other's entries from {@link pluginSidebarThreadByEntry}.
+ */
+const hostNamesByHosts = new WeakMap<
+  readonly Host[],
+  ReadonlyMap<string, string>
+>();
+
+function hostNamesFor(
+  hosts: readonly Host[] | undefined,
+): ReadonlyMap<string, string> {
+  if (hosts === undefined) return EMPTY_HOST_NAMES;
+  const cached = hostNamesByHosts.get(hosts);
+  if (cached !== undefined) return cached;
+  const names = new Map(hosts.map((host) => [host.id, host.name] as const));
+  hostNamesByHosts.set(hosts, names);
+  return names;
+}
 
 /**
  * Per-entry DTO memo. React Query structurally shares the sidebar payload, so
@@ -74,10 +101,7 @@ export function useSidebarThreads(): PluginSidebarThreadsState {
   // The sidebar already subscribes to host updates; this reads the same
   // cached list so a row can print a machine name instead of a host id.
   const { data: hosts } = useHosts();
-  const hostNamesById = useMemo(
-    () => new Map((hosts ?? []).map((host) => [host.id, host.name] as const)),
-    [hosts],
-  );
+  const hostNamesById = hostNamesFor(hosts);
 
   return useMemo<PluginSidebarThreadsState>(() => {
     if (data === undefined) {

apps/app/src/lib/plugin-slots.ts

@@ -336,7 +336,8 @@ export function beginPluginSlotBatch(options: {
   return () => {
     if (closed) return;
     closed = true;
-    openBatchDepth -= 1;
+    // Never below zero: a test reset can zero the depth under an open batch.
+    openBatchDepth = Math.max(0, openBatchDepth - 1);
     if (openBatchDepth === 0) flushChange();
   };
 }