failproofai 0.0.10-beta.8 → 0.0.10

package/.next/standalone/app/policies/hooks-client.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useEffect, useCallback, useRef, useTransition } from "react";
+import React, { useState, useEffect, useCallback, useMemo, useRef, useTransition } from "react";
 import { createPortal } from "react-dom";
 import Link from "next/link";
 import {
@@ -21,6 +21,7 @@ import { getHookActivityAction, searchHookActivityAction } from "@/app/actions/g
 import type { HookActivityPayload } from "@/app/actions/get-hook-activity";
 import { getHooksConfigAction } from "@/app/actions/get-hooks-config";
 import type { HooksConfigPayload, PolicyInfo, CustomPolicyInfo } from "@/app/actions/get-hooks-config";
+import type { IntegrationType } from "@/src/hooks/types";
 import { togglePolicyAction } from "@/app/actions/update-hooks-config";
 import { installHooksWebAction, removeHooksWebAction } from "@/app/actions/install-hooks-web";
 import { updatePolicyParamsAction } from "@/app/actions/update-policy-params";
@@ -950,23 +951,66 @@ function PoliciesTab({ onHooksInstallChange }: { onHooksInstallChange?: (install
   const [actionError, setActionError] = useState<string | null>(null);
   const [hooksWarning, setHooksWarning] = useState<string | null>(null);
   const [configuringPolicy, setConfiguringPolicy] = useState<PolicyInfo | null>(null);
+  const [checkedClis, setCheckedClis] = useState<Set<IntegrationType>>(() => new Set());
+  const cliCheckboxesInitializedRef = useRef(false);
 
   const reload = useCallback(async () => {
     try {
       const data = await getHooksConfigAction();
       setConfig(data);
-      onHooksInstallChange?.(data.installedScopes.length > 0);
+      onHooksInstallChange?.(data.clis.some((c) => c.installed));
     } catch {
       // Non-critical
     }
   }, [onHooksInstallChange]);
 
-  // eslint-disable-next-line react-hooks/set-state-in-effect
   useEffect(() => { reload(); }, [reload]);
 
+  // Sync the checkbox set with payload. On first load only, pre-check
+  // detected-but-not-installed CLIs so a fresh user lands ready for one-click
+  // install. After that, sync strictly to `installed` so unchecking a still-
+  // detected CLI and clicking Apply doesn't re-tick the box on reload.
+  useEffect(() => {
+    if (!config) return;
+    if (!cliCheckboxesInitializedRef.current) {
+      cliCheckboxesInitializedRef.current = true;
+      setCheckedClis(new Set(config.clis.filter((c) => c.installed || c.detected).map((c) => c.id)));
+    } else {
+      setCheckedClis(new Set(config.clis.filter((c) => c.installed).map((c) => c.id)));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [config?.clis]);
+
+  const installedCliSet = useMemo(
+    () => new Set((config?.clis ?? []).filter((c) => c.installed).map((c) => c.id)),
+    [config?.clis],
+  );
+
+  const pendingChanges = useMemo(() => {
+    const toInstall: IntegrationType[] = [];
+    const toRemove: IntegrationType[] = [];
+    for (const cli of config?.clis ?? []) {
+      const isChecked = checkedClis.has(cli.id);
+      if (isChecked && !installedCliSet.has(cli.id)) toInstall.push(cli.id);
+      if (!isChecked && installedCliSet.has(cli.id)) toRemove.push(cli.id);
+    }
+    return { toInstall, toRemove };
+  }, [config?.clis, checkedClis, installedCliSet]);
+
+  const hasPendingChanges = pendingChanges.toInstall.length > 0 || pendingChanges.toRemove.length > 0;
+
+  const toggleCli = (id: IntegrationType) => {
+    setCheckedClis((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+
   const handleToggle = (name: string, currentlyEnabled: boolean) => {
     if (!config) return;
-    const installed = config.installedScopes.length > 0;
+    const installed = config.clis.some((c) => c.installed);
     if (!installed) {
       setHooksWarning("Policies are not installed. Install policies to continue.");
       return;
@@ -995,26 +1039,39 @@ function PoliciesTab({ onHooksInstallChange }: { onHooksInstallChange?: (install
     });
   };
 
-  const handleInstall = () => {
+  const handleApply = () => {
+    const { toInstall, toRemove } = pendingChanges;
+    if (toInstall.length === 0 && toRemove.length === 0) return;
     startTransition(async () => {
       try {
         setActionError(null);
-        await installHooksWebAction("user");
-        await reload();
+        if (toInstall.length > 0) await installHooksWebAction("user", toInstall);
+        if (toRemove.length > 0) await removeHooksWebAction("user", toRemove);
       } catch (e) {
-        setActionError(e instanceof Error ? e.message : "Failed to install hooks.");
+        setActionError(e instanceof Error ? e.message : "Failed to apply changes.");
+      } finally {
+        // Always resync so a partial-success batch (install OK, remove failed)
+        // doesn't leave the UI showing stale install state on the next click.
+        await reload();
       }
     });
   };
 
-  const handleRemove = () => {
+  const handleReinstall = () => {
+    // Reinstall acts on the intersection of checked × installed. Detected-but-
+    // not-installed CLIs are pre-checked as a one-click install hint, so a raw
+    // Array.from(checkedClis) would silently install brand-new CLIs from the
+    // Reinstall button. Use Apply for first-time installs.
+    const targets = Array.from(installedCliSet).filter((id) => checkedClis.has(id));
+    if (targets.length === 0) return;
     startTransition(async () => {
       try {
         setActionError(null);
-        await removeHooksWebAction("user");
-        await reload();
+        await installHooksWebAction("user", targets);
       } catch (e) {
-        setActionError(e instanceof Error ? e.message : "Failed to remove hooks.");
+        setActionError(e instanceof Error ? e.message : "Failed to reinstall.");
+      } finally {
+        await reload();
       }
     });
   };
@@ -1042,7 +1099,9 @@ function PoliciesTab({ onHooksInstallChange }: { onHooksInstallChange?: (install
     );
   }
 
-  const installed = config.installedScopes.length > 0;
+  const installed = config.clis.some((c) => c.installed);
+  const installedCount = installedCliSet.size;
+  const checkedCount = checkedClis.size;
 
   // Group policies by category
   const categories = Array.from(new Set(config.policies.map((p) => p.category)));
@@ -1057,45 +1116,170 @@ function PoliciesTab({ onHooksInstallChange }: { onHooksInstallChange?: (install
       />
     )}
     <div className="bg-card border border-border rounded-lg overflow-hidden">
-      {/* Install status banner */}
-      <div className="flex items-center justify-between px-4 py-3 border-b border-border bg-muted/10">
-        <div className="flex items-center gap-2.5">
-          <span
-            className={`h-2 w-2 rounded-full shrink-0 ${installed ? "bg-emerald-500" : "bg-muted-foreground/50"}`}
-          />
-          <span className="text-sm text-foreground">
-            {installed ? "Policies installed" : "Policies not installed"}
-          </span>
-          {installed && (
-            <span className="text-xs text-muted-foreground font-mono hidden sm:inline">
-              · {config.installedScopes.join(", ")} scope · {config.settingsPath}
+      {/* CLI control panel — header */}
+      <div className="flex items-center justify-between gap-4 px-5 py-3.5 border-b border-border/60 bg-muted/10">
+        <div className="flex items-center gap-3 min-w-0 flex-wrap">
+          <div className="flex items-center gap-2">
+            <span
+              className={`h-2 w-2 rounded-full transition-shadow ${
+                installed
+                  ? "bg-emerald-400 shadow-[0_0_8px_rgba(52,211,153,0.6)]"
+                  : "bg-muted-foreground/40"
+              }`}
+              aria-hidden
+            />
+            <span className="text-[0.65rem] uppercase tracking-[0.2em] font-mono text-foreground/90">
+              Integrations
+            </span>
+          </div>
+          <span className="text-[0.65rem] font-mono text-muted-foreground/40">·</span>
+          <div className="text-[0.65rem] uppercase tracking-[0.2em] font-mono text-muted-foreground">
+            <span className="text-foreground tabular-nums">
+              {installedCount.toString().padStart(2, "0")}
             </span>
+            <span className="opacity-50"> / 0{config.clis.length} active</span>
+          </div>
+          {hasPendingChanges && (
+            <>
+              <span className="text-[0.65rem] font-mono text-muted-foreground/40">·</span>
+              <span className="inline-flex items-center gap-1.5 text-[0.65rem] uppercase tracking-[0.2em] font-mono text-pink-400">
+                <span className="h-1 w-1 rounded-full bg-pink-400 animate-pulse" />
+                {pendingChanges.toInstall.length + pendingChanges.toRemove.length} pending
+              </span>
+            </>
           )}
         </div>
         <div className="flex items-center gap-2 shrink-0">
-          {installed && (
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={handleRemove}
-              disabled={isPending}
-              className="text-xs h-7 px-3"
-            >
-              Remove
-            </Button>
-          )}
           <Button
-            variant={installed ? "outline" : "default"}
+            variant="outline"
             size="sm"
-            onClick={handleInstall}
-            disabled={isPending}
-            className="text-xs h-7 px-3"
+            onClick={handleReinstall}
+            disabled={isPending || checkedCount === 0}
+            className="text-xs h-7 px-3 font-mono"
           >
-            {installed ? "Reinstall" : "Install policies"}
+            Reinstall
+          </Button>
+          <Button
+            variant="default"
+            size="sm"
+            onClick={handleApply}
+            disabled={isPending || !hasPendingChanges}
+            className="text-xs h-7 px-3 font-mono"
+          >
+            Apply changes
           </Button>
         </div>
       </div>
 
+      {/* CLI rows */}
+      <div className="divide-y divide-border/30 border-b border-border/60">
+        {config.clis.map((cli, i) => {
+          const isChecked = checkedClis.has(cli.id);
+          const isInstalled = installedCliSet.has(cli.id);
+          const willChange = isChecked !== isInstalled;
+          const badge = getCliBadgeClasses(cli.id);
+          const accentClass =
+            badge.split(" ").find((c) => c.startsWith("text-")) ?? "text-foreground";
+
+          return (
+            <label
+              key={cli.id}
+              className={`group relative flex items-center gap-3 pl-6 pr-5 py-3 cursor-pointer transition-colors hover:bg-muted/15 ${
+                willChange ? "bg-pink-500/[0.04]" : ""
+              }`}
+            >
+              {/* Brand-colored accent rail */}
+              <div
+                className={`absolute left-0 top-0 bottom-0 w-[3px] ${accentClass} bg-current transition-opacity ${
+                  isChecked ? "opacity-100" : "opacity-25 group-hover:opacity-60"
+                }`}
+                aria-hidden
+              />
+
+              {/* Slot index — 01..07 */}
+              <div className="font-mono text-[0.65rem] text-muted-foreground/40 tabular-nums w-6 select-none">
+                {(i + 1).toString().padStart(2, "0")}
+              </div>
+
+              {/* Custom checkbox */}
+              <div className="relative shrink-0">
+                <input
+                  type="checkbox"
+                  checked={isChecked}
+                  onChange={() => toggleCli(cli.id)}
+                  disabled={isPending}
+                  className="sr-only peer"
+                  aria-label={`Toggle ${cli.label}`}
+                />
+                <div
+                  className={`h-[18px] w-[18px] rounded-sm border transition-all peer-focus-visible:ring-2 peer-focus-visible:ring-primary/40 ${
+                    isChecked
+                      ? "bg-primary border-primary"
+                      : "bg-background/50 border-border group-hover:border-foreground/40"
+                  }`}
+                >
+                  {isChecked && (
+                    <svg
+                      viewBox="0 0 18 18"
+                      className="h-full w-full text-primary-foreground"
+                      fill="none"
+                      aria-hidden
+                    >
+                      <path
+                        d="M4 9.5L7.5 12.5L14 6"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      />
+                    </svg>
+                  )}
+                </div>
+              </div>
+
+              {/* CLI label */}
+              <div className="min-w-[150px] shrink-0">
+                <div className="text-sm font-medium text-foreground">{cli.label}</div>
+              </div>
+
+              {/* Status + diff pills */}
+              <div className="flex items-center gap-1.5 shrink-0">
+                {isInstalled ? (
+                  <span
+                    className={`inline-flex items-center gap-1.5 px-2 py-0.5 rounded-sm text-[0.6rem] uppercase tracking-[0.15em] font-mono border ${badge}`}
+                  >
+                    <span className="h-1 w-1 rounded-full bg-current shadow-[0_0_4px_currentColor]" />
+                    Active
+                  </span>
+                ) : cli.detected ? (
+                  <span className="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-sm text-[0.6rem] uppercase tracking-[0.15em] font-mono border border-border/60 text-muted-foreground/80 bg-muted/20">
+                    <span className="h-1 w-1 rounded-full bg-current opacity-60" />
+                    Detected
+                  </span>
+                ) : (
+                  <span className="inline-flex items-center px-2 py-0.5 rounded-sm text-[0.6rem] uppercase tracking-[0.15em] font-mono border border-border/30 text-muted-foreground/40">
+                    Inactive
+                  </span>
+                )}
+                {willChange && (
+                  <span className="inline-flex items-center px-2 py-0.5 rounded-sm text-[0.6rem] uppercase tracking-[0.15em] font-mono border border-pink-500/40 text-pink-400 bg-pink-500/10">
+                    {isChecked ? "+ install" : "− remove"}
+                  </span>
+                )}
+              </div>
+
+              {/* Settings path — right-aligned, monospace */}
+              <div
+                className="ml-auto hidden lg:block text-[0.7rem] font-mono text-muted-foreground/50 truncate max-w-[420px] group-hover:text-muted-foreground/80 transition-colors"
+                title={cli.settingsPath}
+              >
+                {cli.settingsPath}
+              </div>
+            </label>
+          );
+        })}
+      </div>
+
       {/* Policy summary */}
       <div className="flex items-center gap-2 px-4 py-2 border-b border-border/40 bg-muted/5">
         <span className="text-xs text-muted-foreground">
@@ -1106,7 +1290,7 @@ function PoliciesTab({ onHooksInstallChange }: { onHooksInstallChange?: (install
         </span>
         {installed && (
           <span className="text-[0.65rem] text-muted-foreground/60">
-            · active in {config.installedScopes.join(", ")} scope
+            · shared across {installedCount} active CLI{installedCount === 1 ? "" : "s"}
           </span>
         )}
       </div>
@@ -1120,7 +1304,7 @@ function PoliciesTab({ onHooksInstallChange }: { onHooksInstallChange?: (install
         <ErrorToast
           message={hooksWarning}
           onDismiss={() => setHooksWarning(null)}
-          onInstall={handleInstall}
+          onInstall={handleApply}
           isPending={isPending}
         />
       )}
@@ -1306,7 +1490,7 @@ export default function HooksClient({ initialTab = "activity" }: { initialTab?:
   useEffect(() => {
     getHooksConfigAction()
       .then((cfg) => {
-        setHooksInstalled(cfg.installedScopes.length > 0);
+        setHooksInstalled(cfg.clis.some((c) => c.installed));
         setPolicyCounts({
           enabled: cfg.enabledPolicies.length,
           total: cfg.policies.length + (cfg.customPolicies?.length ?? 0),

package/.next/standalone/components/navbar.tsx

@@ -1,12 +1,10 @@
-/** Top navigation bar with logo, app title, and theme toggle. */
+/** Top navigation bar — wordmark, primary nav, refresh + reach-developers controls. */
 "use client";
 
 import React from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { FolderOpen, Shield } from "lucide-react";
-import { Logo } from "@/components/logo";
-import { ThemeToggle } from "@/components/theme-toggle";
 import { ReachDevelopers } from "@/components/reach-developers";
 import { RefreshButton } from "@/app/components/refresh-button";
 
@@ -15,11 +13,13 @@ const NAV_LINKS = [
   { href: "/projects", label: "Projects", icon: FolderOpen },
 ];
 
+const WORDMARK_SRC = "https://d2wq11aau0arks.cloudfront.net/failproof/logo-wordmark.png";
+
 export const Navbar: React.FC<{ disabledPages?: string[] }> = ({ disabledPages = [] }) => {
   const pathname = usePathname();
 
   return (
-    <header className="relative z-50 border-b border-border bg-card/50 backdrop-blur supports-[backdrop-filter]:bg-card/50">
+    <header className="relative z-50 border-b border-border bg-card/60 backdrop-blur supports-[backdrop-filter]:bg-card/60">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex items-center justify-between h-16">
           <div className="flex items-center gap-3">
@@ -27,15 +27,19 @@ export const Navbar: React.FC<{ disabledPages?: string[] }> = ({ disabledPages =
               href="https://github.com/exospherehost/failproofai"
               target="_blank"
               rel="noopener noreferrer"
-              className="flex items-center gap-3 hover:opacity-80 transition-opacity"
+              className="flex items-center hover:opacity-80 transition-opacity"
+              aria-label="failproof ai · GitHub"
             >
-              <Logo width={28} height={28} className="flex-shrink-0" />
-              <h1 className="text-lg font-semibold text-foreground leading-tight tracking-tight">
-                Failproof AI
-              </h1>
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img
+                src={WORDMARK_SRC}
+                alt="failproof ai"
+                style={{ height: 24, width: "auto" }}
+                className="select-none"
+              />
             </a>
             {process.env.NEXT_PUBLIC_APP_VERSION && (
-              <span className="text-[0.6rem] font-mono leading-none text-muted-foreground/70 border border-border/60 rounded-md px-1.5 py-0.5 select-none tracking-wide">
+              <span className="font-mono text-[0.6rem] leading-none text-muted-foreground/70 border border-border/60 rounded px-1.5 py-0.5 select-none tracking-wider uppercase">
                 v{process.env.NEXT_PUBLIC_APP_VERSION}
               </span>
             )}
@@ -63,10 +67,8 @@ export const Navbar: React.FC<{ disabledPages?: string[] }> = ({ disabledPages =
                     <Icon className={`w-4 h-4 ${active ? "text-primary" : ""}`} />
                     {label}
                     <span
-                      className={`absolute inset-x-1 bottom-0 h-[2px] rounded-full transition-all ${
-                        active
-                          ? "bg-primary"
-                          : "bg-transparent group-hover:bg-muted"
+                      className={`absolute inset-x-1 bottom-0 h-[2px] transition-all ${
+                        active ? "bg-primary" : "bg-transparent"
                       }`}
                     />
                   </Link>
@@ -78,7 +80,6 @@ export const Navbar: React.FC<{ disabledPages?: string[] }> = ({ disabledPages =
             <RefreshButton />
             <div className="w-px h-6 bg-border mx-1" />
             <ReachDevelopers />
-            <ThemeToggle />
           </div>
         </div>
       </div>

package/.next/standalone/components/ui/button.tsx

@@ -16,12 +16,12 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     return (
       <button
         className={cn(
-          "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none",
+          "inline-flex items-center justify-center rounded-md text-sm font-medium transition-[background-color,color,box-shadow,border-color] duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:opacity-50 disabled:pointer-events-none",
           {
-            "bg-primary text-primary-foreground hover:bg-primary/90":
+            "bg-primary text-primary-foreground hover:bg-primary/90 hover:shadow-[0_0_0_1px_var(--primary)]":
               variant === "default",
-            "hover:bg-muted hover:text-muted-foreground": variant === "ghost",
-            "border border-border bg-background hover:bg-muted":
+            "text-foreground hover:bg-muted": variant === "ghost",
+            "border border-border bg-transparent hover:border-primary/60 hover:bg-card":
               variant === "outline",
             "h-10 py-2 px-4": size === "default",
             "h-10 w-10": size === "icon",

package/.next/standalone/lib/gemini-projects.ts

@@ -21,7 +21,7 @@
  * missing `~/.gemini/` returns `[]`, malformed JSONL falls open without
  * surfacing the session.
  */
-import { readdir, readFile, stat } from "node:fs/promises";
+import { open, readdir, readFile, stat } from "node:fs/promises";
 import { homedir } from "node:os";
 import { join } from "node:path";
 import type { ProjectFolder, SessionFile } from "./projects";
@@ -34,6 +34,13 @@ import { logWarn } from "./logger";
 /** Filename pattern for a Gemini session JSONL:
  *  `session-<ISO-timestamp-with-dashes>-<8-hex-uuid-prefix>.jsonl`. */
 const SESSION_FILE_RE = /^session-(\d{4}-\d{2}-\d{2}T\d{2}-\d{2})-([0-9a-f]{8})\.jsonl$/i;
+/** Full UUID — the filename only embeds the first 8 hex chars; the rest is on
+ *  the JSONL metadata header line. The session detail route requires a full
+ *  UUID, so links built from the truncated filename prefix 404. */
+const UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+/** Metadata header sits on line 1 and is well under 1 KB; 4 KB covers it
+ *  comfortably without slurping a multi-MB transcript. */
+const FIRST_LINE_CHUNK_BYTES = 4 * 1024;
 
 /** Override for tests. Defaults to the live Gemini session-state root. */
 function getGeminiTmpRoot(): string {
@@ -46,6 +53,10 @@ interface GeminiSessionMeta {
   sessionFilename: string;
   cwd: string;
   fileMtime: Date;
+  /** Full UUID parsed from the JSONL metadata header (line 1). Undefined when
+   *  the header is missing, malformed, or carries a non-UUID `sessionId`;
+   *  callers fall through to rendering an un-linked row. */
+  sessionId?: string;
 }
 
 async function safeReaddir(dir: string) {
@@ -64,6 +75,40 @@ async function statMtime(path: string): Promise<Date | null> {
   }
 }
 
+/** Read the first newline-delimited line of `filePath` without slurping the
+ *  rest. Mirrors `lib/codex-projects.ts`'s readFirstLine; the Gemini metadata
+ *  header is always on line 1. */
+async function readFirstLine(filePath: string): Promise<string | null> {
+  let fh: Awaited<ReturnType<typeof open>> | null = null;
+  try {
+    fh = await open(filePath, "r");
+    const buf = Buffer.alloc(FIRST_LINE_CHUNK_BYTES);
+    const { bytesRead } = await fh.read(buf, 0, FIRST_LINE_CHUNK_BYTES, 0);
+    if (bytesRead === 0) return null;
+    const slice = buf.subarray(0, bytesRead);
+    const nl = slice.indexOf(0x0a); // '\n'
+    const end = nl === -1 ? bytesRead : nl;
+    return slice.subarray(0, end).toString("utf-8");
+  } catch {
+    return null;
+  } finally {
+    if (fh) await fh.close().catch(() => {});
+  }
+}
+
+/** Extract a full-UUID `sessionId` from a JSONL metadata header line. Returns
+ *  undefined on parse failure, missing field, or a non-UUID value. */
+function extractFullSessionId(line: string | null): string | undefined {
+  if (!line) return undefined;
+  try {
+    const meta = JSON.parse(line) as { sessionId?: unknown };
+    if (typeof meta.sessionId !== "string") return undefined;
+    return UUID_RE.test(meta.sessionId) ? meta.sessionId : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
 /** Read `.project_root` to recover the absolute cwd for a basename folder.
  *  Returns null if missing or empty (caller treats the folder as un-mappable). */
 async function readProjectRoot(projectDir: string): Promise<string | null> {
@@ -101,7 +146,8 @@ async function scanGeminiSessions(): Promise<GeminiSessionMeta[]> {
           const filePath = join(chatsDir, f.name);
           const mtime = await statMtime(filePath);
           if (!mtime) continue;
-          out.push({ filePath, sessionFilename: f.name, cwd, fileMtime: mtime });
+          const sessionId = extractFullSessionId(await readFirstLine(filePath));
+          out.push({ filePath, sessionFilename: f.name, cwd, fileMtime: mtime, sessionId });
         }
       }),
     16,
@@ -140,17 +186,14 @@ export async function getGeminiProjects(): Promise<ProjectFolder[]> {
 export async function getGeminiSessionsForCwd(cwd: string): Promise<SessionFile[]> {
   const sessions = await scanGeminiSessions();
   const matches = sessions.filter((s) => s.cwd === cwd);
-  const files: SessionFile[] = matches.map((s) => {
-    const m = s.sessionFilename.match(SESSION_FILE_RE);
-    return {
-      name: s.sessionFilename,
-      path: s.filePath,
-      lastModified: s.fileMtime,
-      lastModifiedFormatted: formatDate(s.fileMtime),
-      sessionId: m ? m[2] : undefined,
-      cli: "gemini",
-    };
-  });
+  const files: SessionFile[] = matches.map((s) => ({
+    name: s.sessionFilename,
+    path: s.filePath,
+    lastModified: s.fileMtime,
+    lastModifiedFormatted: formatDate(s.fileMtime),
+    sessionId: s.sessionId,
+    cli: "gemini",
+  }));
   files.sort((a, b) => b.lastModified.getTime() - a.lastModified.getTime());
   return files;
 }
@@ -180,17 +223,14 @@ export async function getGeminiSessionsByEncodedName(name: string): Promise<Gemi
   if (uniqueCwds.length !== 1) {
     return { cwd: null, sessions: [] };
   }
-  const sessions = matches.map((s) => {
-    const m = s.sessionFilename.match(SESSION_FILE_RE);
-    return {
-      name: s.sessionFilename,
-      path: s.filePath,
-      lastModified: s.fileMtime,
-      lastModifiedFormatted: formatDate(s.fileMtime),
-      sessionId: m ? m[2] : undefined,
-      cli: "gemini" as const,
-    };
-  });
+  const sessions = matches.map((s) => ({
+    name: s.sessionFilename,
+    path: s.filePath,
+    lastModified: s.fileMtime,
+    lastModifiedFormatted: formatDate(s.fileMtime),
+    sessionId: s.sessionId,
+    cli: "gemini" as const,
+  }));
   sessions.sort((a, b) => b.lastModified.getTime() - a.lastModified.getTime());
   return { cwd: uniqueCwds[0], sessions };
 }

package/.next/standalone/lib/opencode-projects.ts

@@ -22,7 +22,6 @@
  *       https://opencode.ai/docs/plugins/  (plugin model context)
  */
 import { execFileSync } from "node:child_process";
-import { basename } from "node:path";
 import { encodeFolderName } from "./paths";
 import type { ProjectFolder, SessionFile } from "./projects";
 import { runtimeCache } from "./runtime-cache";
@@ -91,10 +90,11 @@ function readProjectRows(): OpenCodeProjectRow[] | null {
 
 /**
  * Group sessions by `project_id` and produce one ProjectFolder per project.
- * The folder name comes from `project.name` when set, else `basename(worktree)`,
- * else the project_id (last-resort). `lastModified` is the max session
- * `time_updated` for that project (or the project's own time_updated if no
- * sessions exist yet).
+ * The folder name is `encodeFolderName(worktree)` (matches every other CLI's
+ * URL-slug encoding so the dashboard's `/project/[name]` route resolves), or
+ * the project_id when no worktree is recorded. `lastModified` is the max
+ * session `time_updated` for that project (or the project's own time_updated
+ * if no sessions exist yet).
  */
 export async function getOpenCodeProjects(): Promise<ProjectFolder[]> {
   const sessions = readSessionRows();
@@ -122,13 +122,15 @@ export async function getOpenCodeProjects(): Promise<ProjectFolder[]> {
 
   // Emit one ProjectFolder per project that has at least one session OR a
   // project row (covers projects opencode knows about but hasn't run yet).
+  // `name` is the dashboard's URL slug — must be `encodeFolderName(cwd)` to
+  // match every other CLI (and the resolver in `getOpenCodeSessionsByEncodedName`).
   const seen = new Set<string>();
   const out: ProjectFolder[] = [];
   for (const [projectId, group] of groups) {
     seen.add(projectId);
     const proj = projectMap.get(projectId);
     const worktree = proj?.worktree ?? group.rows[0]?.directory ?? null;
-    const name = proj?.name?.trim() || (worktree ? basename(worktree) : projectId);
+    const name = worktree ? encodeFolderName(worktree) : projectId;
     const path = worktree ?? "";
     const lastModified = new Date(Math.max(group.latest, proj?.time_updated ?? 0));
     out.push({
@@ -143,7 +145,7 @@ export async function getOpenCodeProjects(): Promise<ProjectFolder[]> {
   for (const p of projects ?? []) {
     if (seen.has(p.id)) continue;
     const worktree = p.worktree ?? "";
-    const name = p.name?.trim() || (worktree ? basename(worktree) : p.id);
+    const name = worktree ? encodeFolderName(worktree) : p.id;
     const lastModified = new Date(p.time_updated);
     out.push({
       name,