backnotprop · backnotprop · May 19, 2026 · May 19, 2026 · May 19, 2026 · May 19, 2026
diff --git a/apps/debug-frontend/src/daemon/events/hub-client.ts b/apps/debug-frontend/src/daemon/events/hub-client.ts
@@ -221,6 +221,7 @@ export class DaemonHubClient {
       this.socket = undefined;
       this.daemonSubscribed = false;
       socket?.close();
+      this.scheduleReconnect();
       return;
     }
     if (

diff --git a/apps/frontend/index.html b/apps/frontend/index.html
@@ -1,9 +1,20 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" class="theme-neutral">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Plannotator</title>
+    <script>
+      // Apply saved theme before React mounts to prevent flash of unstyled content.
+      // ThemeProvider will take over once mounted.
+      try {
+        const ct = document.cookie.match(/(?:^|; )plannotator-color-theme=([^;]*)/);
+        const theme = ct ? decodeURIComponent(ct[1]) : 'neutral';
+        const mt = document.cookie.match(/(?:^|; )plannotator-theme=([^;]*)/);
+        const mode = mt ? decodeURIComponent(mt[1]) : 'dark';
+        document.documentElement.className = 'theme-' + theme + (mode === 'light' ? ' light' : '');
+      } catch(e) {}
+    </script>
   </head>
   <body>
     <div id="root"></div>

diff --git a/apps/frontend/package.json b/apps/frontend/package.json
@@ -17,6 +17,7 @@
   "dependencies": {
     "@fontsource-variable/geist-mono": "^5.2.7",
     "@fontsource-variable/inter": "^5.2.8",
+    "@plannotator/code-review": "workspace:*",
     "@plannotator/shared": "workspace:*",
     "@plannotator/ui": "workspace:*",
     "@radix-ui/react-collapsible": "^1.1.12",

diff --git a/apps/frontend/src/app/Layout.tsx b/apps/frontend/src/app/Layout.tsx
@@ -1,36 +1,85 @@
 import { useCallback, useEffect } from "react";
-import { Outlet } from "@tanstack/react-router";
+import { Outlet, useMatchRoute } from "@tanstack/react-router";
 import { Toaster } from "sonner";
-import { SidebarProvider } from "@/components/ui/sidebar";
+import { SidebarProvider, useSidebar } from "@/components/ui/sidebar";
+import { TooltipProvider } from "@/components/ui/tooltip";
 import { AppSidebar } from "../components/sidebar/AppSidebar";
 import { AddProjectDialog } from "../components/landing/AddProjectDialog";
+import { SessionSurface } from "../components/sessions/SessionSurface";
 import { useDaemonEvents } from "../daemon/events/use-daemon-events";
 import { projectStore } from "../stores/project-store";
 import { useAppStore } from "../stores/app-store";
 
-export function Layout() {
+function LayoutContent() {
   const addProjectOpen = useAppStore((s) => s.addProjectOpen);
   const setAddProjectOpen = useAppStore((s) => s.setAddProjectOpen);
+  const activeSessionId = useAppStore((s) => s.activeSessionId);
+  const visitedSessions = useAppStore((s) => s.visitedSessions);
+  const matchRoute = useMatchRoute();
+  const { open: sidebarOpen } = useSidebar();
 
   useDaemonEvents();
 
   useEffect(() => {
     void projectStore.getState().fetchProjects();
   }, []);
 
+  const isOnSession = !!matchRoute({ to: "/s/$sessionId", fuzzy: true });
+  const showLanding = !isOnSession;
+
   const openAddProject = useCallback(() => setAddProjectOpen(true), [setAddProjectOpen]);
 
   return (
-    <SidebarProvider
-      defaultOpen={false}
-      style={{ "--sidebar-width": "16rem" } as React.CSSProperties}
-    >
+    <>
       <AppSidebar onAddProject={openAddProject} />
-      <main className="flex-1 overflow-hidden">
-        <Outlet />
+      <main className="relative flex-1 overflow-hidden">
+        <div
+          className="absolute inset-0"
+          style={{
+            visibility: showLanding ? "visible" : "hidden",
+            zIndex: showLanding ? 1 : 0,
+          }}
+        >
+          <Outlet />
+        </div>
+
+        {Object.values(visitedSessions).map(({ sessionId, bootstrap }) => (
+          <div
+            key={sessionId}
+            className={`absolute inset-0 overflow-hidden ${sidebarOpen ? "rounded-tl-xl border-l border-border/50" : ""}`}
+            style={{
+              visibility: sessionId === activeSessionId && isOnSession ? "visible" : "hidden",
+              zIndex: sessionId === activeSessionId && isOnSession ? 1 : 0,
+            }}
+          >
+            <SessionSurface bootstrap={bootstrap} />
+          </div>
+        ))}
       </main>
       <AddProjectDialog open={addProjectOpen} onOpenChange={setAddProjectOpen} />
-      <Toaster position="bottom-right" />
-    </SidebarProvider>
+      <Toaster
+        position="bottom-right"
+        toastOptions={{
+          style: {
+            "--normal-bg": "var(--card)",
+            "--normal-border": "var(--border)",
+            "--normal-text": "var(--foreground)",
+          } as React.CSSProperties,
+        }}
+      />
+    </>
+  );
+}
+
+export function Layout() {
+  return (
+    <TooltipProvider delayDuration={200} skipDelayDuration={100}>
+      <SidebarProvider
+        defaultOpen={false}
+        style={{ "--sidebar-width": "16rem" } as React.CSSProperties}
+      >
+        <LayoutContent />
+      </SidebarProvider>
+    </TooltipProvider>
   );
 }
diff --git a/apps/frontend/src/app/router.tsx b/apps/frontend/src/app/router.tsx
@@ -13,6 +13,8 @@ export function createAppRouter(
     routeTree,
     context,
     defaultPreload: "intent",
+    defaultPendingMs: 0,
+    defaultPendingMinMs: 0,
   });
 }
 

diff --git a/apps/frontend/src/components/landing/LandingPage.tsx b/apps/frontend/src/components/landing/LandingPage.tsx
@@ -152,7 +152,7 @@ function ProjectTable({
   onSelect: (name: string) => void;
 }) {
   return (
-    <div className="overflow-hidden rounded-lg border border-border/60">
+    <div className="max-h-64 overflow-y-auto rounded-lg border border-border/60">
       {projects.map((project, i) => (
         <button
           key={project.name}

diff --git a/apps/frontend/src/components/sessions/SessionSurface.tsx b/apps/frontend/src/components/sessions/SessionSurface.tsx
@@ -0,0 +1,54 @@
+import { SidebarTrigger } from "@/components/ui/sidebar";
+import { SessionProvider } from "@plannotator/ui/hooks/useSessionFetch";
+import { ReviewAppEmbedded } from "@plannotator/code-review";
+import "@plannotator/code-review/styles";
+import type { SessionBootstrap } from "../../daemon/contracts";
+import { getSessionModeMeta } from "../../shared/session-meta";
+
+interface SessionSurfaceProps {
+  bootstrap: SessionBootstrap;
+}
+
+export function SessionSurface({ bootstrap }: SessionSurfaceProps) {
+  const { session } = bootstrap;
+
+  if (session.mode === "review") {
+    return (
+      <SessionProvider sessionId={session.id}>
+        <ReviewAppEmbedded
+          headerLeft={
+            <SidebarTrigger className="p-1 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted" />
+          }
+        />
+      </SessionProvider>
+    );
+  }
+
+  const meta = getSessionModeMeta(session.mode);
+  const Icon = meta.icon;
+
+  return (
+    <div className="isolate flex h-full flex-col bg-muted">
+      <nav className="flex h-10 shrink-0 items-center gap-2 px-3">
+        <SidebarTrigger className="-ml-1" />
+        <Icon className="size-4 text-muted-foreground" />
+        <span className="text-sm font-semibold">{session.label}</span>
+        <span className="rounded-full bg-surface-1 px-2 py-0.5 text-[10px] font-medium text-muted-foreground">
+          {session.status}
+        </span>
+      </nav>
+
+      <div className="flex-1 overflow-hidden p-2 pt-0">
+        <div className="h-full overflow-hidden rounded-xl bg-card shadow-[var(--card-shadow)]">
+          <main className="h-full scroll-smooth overflow-auto">
+            <div className="mx-auto w-full max-w-3xl px-6 py-8 md:py-10">
+              <p className="text-sm text-muted-foreground">
+                {meta.label} surface · {session.project} · {session.id}
+              </p>
+            </div>
+          </main>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/frontend/src/components/sidebar/AppSidebar.tsx b/apps/frontend/src/components/sidebar/AppSidebar.tsx
@@ -22,6 +22,13 @@ import { getSessionModeMeta } from "../../shared/session-meta";
 
 const MODE_ORDER = ["plan", "review", "annotate", "goal-setup", "archive"];
 
+function formatSessionLabel(label: string): string {
+  return label
+    .replace(/^plugin-(plan|review|annotate|archive)-/, "")
+    .replace(/^(claude-code|opencode|pi|plannotator-frontend)-/, "")
+    .replace(/^goal-setup-(interview|facts)-/, "");
+}
+
 interface AppSidebarProps {
   onAddProject: () => void;
 }
@@ -46,20 +53,22 @@ export function AppSidebar({ onAddProject }: AppSidebarProps) {
   }, [resolvedMode, setMode]);
 
   return (
-    <Sidebar collapsible="offcanvas" className="border-r">
+    <Sidebar collapsible="offcanvas">
       <SidebarHeader>
         <SidebarMenu>
           <SidebarMenuItem>
-            <SidebarMenuButton size="lg" className="pointer-events-none">
-              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground text-xs font-bold">
-                P
-              </div>
-              <div className="grid flex-1 text-left leading-tight">
-                <span className="truncate text-sm font-semibold">Plannotator</span>
-                <span className="truncate text-[11px] text-muted-foreground">
-                  {sessions.length} session{sessions.length !== 1 ? "s" : ""}
-                </span>
-              </div>
+            <SidebarMenuButton size="lg" asChild>
+              <Link to="/">
+                <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground text-xs font-bold">
+                  P
+                </div>
+                <div className="grid flex-1 text-left leading-tight">
+                  <span className="truncate text-sm font-semibold">Plannotator</span>
+                  <span className="truncate text-[11px] text-muted-foreground">
+                    {sessions.length} session{sessions.length !== 1 ? "s" : ""}
+                  </span>
+                </div>
+              </Link>
             </SidebarMenuButton>
           </SidebarMenuItem>
         </SidebarMenu>
@@ -87,7 +96,12 @@ export function AppSidebar({ onAddProject }: AppSidebarProps) {
 
                     return (
                       <SidebarMenuItem key={session.id}>
-                        <SidebarMenuButton asChild isActive={isActive} tooltip={session.label}>
+                        <SidebarMenuButton
+                          asChild
+                          isActive={isActive}
+                          tooltip={session.label}
+                          className="pr-7"
+                        >
                           <Link to="/s/$sessionId" params={{ sessionId: session.id }}>
                             <Icon
                               className={cn(
@@ -101,7 +115,7 @@ export function AppSidebar({ onAddProject }: AppSidebarProps) {
                                 isTerminal && "text-muted-foreground/60 line-through",
                               )}
                             >
-                              {session.label}
+                              {formatSessionLabel(session.label)}
                             </span>
                           </Link>
                         </SidebarMenuButton>

diff --git a/apps/frontend/src/daemon/api/client.ts b/apps/frontend/src/daemon/api/client.ts
@@ -64,7 +64,7 @@ export interface DaemonApiClient {
     cwd: string,
     name?: string,
   ): Promise<DaemonApiResult<{ ok: true; project: ProjectEntry }>>;
-  removeProject(name: string): Promise<DaemonApiResult<{ ok: true }>>;
+  removeProject(cwd: string): Promise<DaemonApiResult<{ ok: true }>>;
   createReviewSession(cwd: string): Promise<DaemonApiResult<SessionResponse>>;
   createArchiveSession(cwd: string): Promise<DaemonApiResult<SessionResponse>>;
 }
@@ -442,12 +442,12 @@ export function createDaemonApiClient(options: DaemonApiClientOptions = {}): Dae
       );
     },
 
-    removeProject(name) {
+    removeProject(cwd) {
       return requestJson(
         fetchImpl,
-        joinUrl(options.baseUrl, `/daemon/projects/${encodeURIComponent(name)}`),
+        joinUrl(options.baseUrl, "/daemon/projects"),
         isDeleteSessionResponse,
-        { method: "DELETE" },
+        { method: "DELETE", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ cwd }) },
       );
     },
 

diff --git a/apps/frontend/src/main.tsx b/apps/frontend/src/main.tsx
@@ -5,9 +5,6 @@ import { ThemeProvider } from "@plannotator/ui/components/ThemeProvider";
 import { createAppRouter } from "./app/router";
 import "./styles.css";
 
-document.cookie = "plannotator-color-theme=neutral; path=/; max-age=31536000; SameSite=Lax";
-document.cookie = "plannotator-theme=dark; path=/; max-age=31536000; SameSite=Lax";
-
 const rootElement = document.getElementById("root");
 
 if (!rootElement) {

diff --git a/apps/frontend/src/routes/s.$sessionId.tsx b/apps/frontend/src/routes/s.$sessionId.tsx
@@ -1,8 +1,9 @@
+import { useEffect } from "react";
 import { createFileRoute } from "@tanstack/react-router";
 import { SidebarTrigger } from "@/components/ui/sidebar";
 import type { SessionBootstrap } from "../daemon/contracts";
 import type { DaemonApiResult } from "../daemon/api/errors";
-import { getSessionModeMeta } from "../shared/session-meta";
+import { appStore } from "../stores/app-store";
 
 const SESSION_ID_PATTERN = /^[A-Za-z0-9][A-Za-z0-9_-]{2,127}$/;
 
@@ -20,6 +21,15 @@ export const Route = createFileRoute("/s/$sessionId")({
 
 function SessionRoute() {
   const result: DaemonApiResult<SessionBootstrap> = Route.useLoaderData();
+  const { sessionId } = Route.useParams();
+
+  useEffect(() => {
+    if (result.ok) {
+      appStore.getState().activateSession(sessionId, result.data);
+    } else {
+      appStore.getState().deactivateSession();
+    }
+  }, [sessionId, result]);
 
   if (!result.ok) {
     return (
@@ -36,32 +46,6 @@ function SessionRoute() {
     );
   }
 
-  const { session } = result.data;
-  const meta = getSessionModeMeta(session.mode);
-  const Icon = meta.icon;
-
-  return (
-    <div className="isolate flex h-full flex-col bg-muted">
-      <nav className="flex h-10 shrink-0 items-center gap-2 px-3">
-        <SidebarTrigger className="-ml-1" />
-        <Icon className="size-4 text-muted-foreground" />
-        <span className="text-sm font-semibold">{session.label}</span>
-        <span className="rounded-full bg-surface-1 px-2 py-0.5 text-[10px] font-medium text-muted-foreground">
-          {session.status}
-        </span>
-      </nav>
-
-      <div className="flex-1 overflow-hidden p-2 pt-0">
-        <div className="h-full overflow-hidden rounded-xl bg-card shadow-[var(--card-shadow)]">
-          <main className="h-full scroll-smooth overflow-auto">
-            <div className="mx-auto w-full max-w-3xl px-6 py-8 md:py-10">
-              <p className="text-sm text-muted-foreground">
-                {meta.label} surface · {session.project} · {session.id}
-              </p>
-            </div>
-          </main>
-        </div>
-      </div>
-    </div>
-  );
+  // The actual surface is rendered by Layout via Activity — this route just registers the session
+  return null;
 }