Wire plan review surface into frontend app

All session modes now render production surfaces:
- review → ReviewAppEmbedded
- plan, annotate, archive, goal-setup → PlanAppEmbedded

Added @plannotator/plan-review dependency, Vite aliases, and styles.
SessionSurface simplified — review gets code review, everything else
gets plan review (which determines its mode from /api/plan response).

Author: backnotprop

apps/frontend/package.json

@@ -18,6 +18,7 @@
     "@fontsource-variable/geist-mono": "^5.2.7",
     "@fontsource-variable/inter": "^5.2.8",
     "@plannotator/code-review": "workspace:*",
+    "@plannotator/plan-review": "workspace:*",
     "@plannotator/shared": "workspace:*",
     "@plannotator/ui": "workspace:*",
     "@radix-ui/react-collapsible": "^1.1.12",

apps/frontend/src/components/sessions/SessionSurface.tsx

@@ -1,9 +1,14 @@
 import { SidebarTrigger } from "@/components/ui/sidebar";
 import { SessionProvider } from "@plannotator/ui/hooks/useSessionFetch";
 import { ReviewAppEmbedded } from "@plannotator/code-review";
+import { PlanAppEmbedded } from "@plannotator/plan-review";
 import "@plannotator/code-review/styles";
+import "@plannotator/plan-review/styles";
 import type { SessionBootstrap } from "../../daemon/contracts";
-import { getSessionModeMeta } from "../../shared/session-meta";
+
+const sidebarTrigger = (
+  <SidebarTrigger className="p-1 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted" />
+);
 
 interface SessionSurfaceProps {
   bootstrap: SessionBootstrap;
@@ -15,40 +20,15 @@ export function SessionSurface({ bootstrap }: SessionSurfaceProps) {
   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" />
-          }
-        />
+        <ReviewAppEmbedded headerLeft={sidebarTrigger} />
       </SessionProvider>
     );
   }
 
-  const meta = getSessionModeMeta(session.mode);
-  const Icon = meta.icon;
-
+  // plan, annotate, archive, goal-setup — all handled by the plan review component
   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>
+    <SessionProvider sessionId={session.id}>
+      <PlanAppEmbedded headerLeft={sidebarTrigger} />
+    </SessionProvider>
   );
 }

apps/frontend/vite.config.ts

@@ -68,6 +68,14 @@ export default defineConfig(({ command }) => {
           __dirname,
           "../../packages/plannotator-code-review",
         ),
+        "@plannotator/plan-review/styles": path.resolve(
+          __dirname,
+          "../../packages/plannotator-plan-review/index.css",
+        ),
+        "@plannotator/plan-review": path.resolve(
+          __dirname,
+          "../../packages/plannotator-plan-review",
+        ),
         "@plannotator/shared": path.resolve(__dirname, "../../packages/shared"),
         "@plannotator/ui": path.resolve(__dirname, "../../packages/ui"),
       },