feat(frontend): SessionMenu kebab + NavSessions prop-driven; AppShell owns sessions query

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

frontend/src/shell/NavSessions.tsx

@@ -1,28 +1,15 @@
 // frontend/src/shell/NavSessions.tsx
-import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { listSessions } from "../api/sessions";
-import { resumeSession } from "../api/sessions";
+import type { ReactNode } from "react";
 import type { SessionSummary } from "../api/types";
 
 interface Props {
+  sessions: SessionSummary[];
   activeSessionId: string | null;
-  onSessionSelect: (id: string) => void;
+  onOpenPanel: (id: string) => void;
+  menuFor: (session: SessionSummary) => ReactNode;
 }
 
-export function NavSessions({ activeSessionId, onSessionSelect }: Props) {
-  const queryClient = useQueryClient();
-  const { data: sessions = [] } = useQuery<SessionSummary[]>({
-    queryKey: ["sessions"],
-    queryFn: listSessions,
-    refetchInterval: 10_000,
-  });
-
-  async function handleClick(id: string) {
-    await resumeSession(id);
-    queryClient.invalidateQueries({ queryKey: ["sessions"] });
-    onSessionSelect(id);
-  }
-
+export function NavSessions({ sessions, activeSessionId, onOpenPanel, menuFor }: Props) {
   if (sessions.length === 0) {
     return (
       <p className="px-1 py-6 text-center text-xs text-muted-foreground">
@@ -30,48 +17,46 @@ export function NavSessions({ activeSessionId, onSessionSelect }: Props) {
       </p>
     );
   }
-
   return (
     <ul className="flex flex-col gap-0.5">
       {sessions.map((s) => {
         const active = s.id === activeSessionId;
         return (
           <li key={s.id}>
-            <button
+            <div
               data-testid={`session-item-${s.id}`}
               data-active={active ? "true" : "false"}
-              onClick={() => handleClick(s.id)}
+              onClick={() => onOpenPanel(s.id)}
               className={[
-                "group w-full rounded-lg px-2.5 py-2 text-left transition-colors",
-                active
-                  ? "bg-[oklch(var(--primary)/0.12)]"
-                  : "hover:bg-accent",
+                "group flex w-full cursor-pointer items-start gap-1 rounded-lg px-2.5 py-2 text-left transition-colors",
+                active ? "bg-[oklch(var(--primary)/0.12)]" : "hover:bg-accent",
               ].join(" ")}
             >
-              <span
-                className={[
-                  "block truncate text-[0.8rem] leading-snug",
-                  active ? "font-bold text-primary" : "text-foreground/90",
-                ].join(" ")}
-              >
-                {s.question || s.id}
-              </span>
-              <span className="mt-1 flex items-center gap-1.5">
+              <div className="min-w-0 flex-1">
                 <span
                   className={[
-                    "size-1.5 rounded-full",
-                    s.status === "open"
-                      ? "bg-[oklch(var(--success))]"
-                      : s.status === "finalized"
-                        ? "bg-primary"
-                        : "bg-muted-foreground/50",
+                    "block truncate text-[0.8rem] leading-snug",
+                    active ? "font-bold text-primary" : "text-foreground/90",
                   ].join(" ")}
-                />
-                <span className="text-[0.65rem] uppercase tracking-wide text-muted-foreground">
-                  {s.status}
+                >
+                  {s.name || s.question || s.id}
                 </span>
-              </span>
-            </button>
+                <span className="mt-1 flex items-center gap-1.5">
+                  <span
+                    className={[
+                      "size-1.5 rounded-full",
+                      s.status === "open"
+                        ? "bg-[oklch(var(--success))]"
+                        : s.status === "finalized"
+                          ? "bg-primary"
+                          : "bg-muted-foreground/50",
+                    ].join(" ")}
+                  />
+                  <span className="text-[0.65rem] uppercase tracking-wide text-muted-foreground">{s.status}</span>
+                </span>
+              </div>
+              {menuFor(s)}
+            </div>
           </li>
         );
       })}