@sealant/mend 0.8.0 → 0.10.0

package/dist/dashboard.js

@@ -1,28 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@opentui/react/jsx-runtime";
 import { CliRenderEvents, createCliRenderer } from "@opentui/core";
 import { createRoot, useKeyboard, useRenderer, useTerminalDimensions } from "@opentui/react";
-import { QueryClient, QueryClientProvider, useQuery, useQueryClient } from "@tanstack/react-query";
+import { QueryClient, QueryClientProvider, useMutation, useQuery, useQueryClient, } from "@tanstack/react-query";
 import { useEffect, useRef, useState } from "react";
 import { reviewTargetForSession } from "./review-workflow.js";
 import { ReviewScreen } from "./review.js";
-import { cwdFacts, HARNESS_COMMANDS, LIVE_STATUSES, matchProjectByCwd } from "./shared.js";
+import { cwdFacts, HARNESS_COMMANDS, isPendingId, LIVE_STATUSES, matchProjectByCwd, pendingId, } from "./shared.js";
 import { openUrl } from "./terminal.js";
-import { AMBER, BG, COBALT, FAINT, GREEN, INK, MUTED, RED, RULE, WASH } from "./tui-theme.js";
-const STATUS_GLYPH = {
-    starting: "○",
-    running: "●",
-    waiting: "●",
-    idle: "●",
-    completed: "●",
-    failed: "●",
-    stopped: "○",
-};
+import { COBALT, FAINT, INK, INK_2, MUTED, RED, RULE, WASH } from "./tui-theme.js";
+import { createSseParser, eventFamilies } from "./workbench-events.js";
+// Near-mono on purpose: a status is a word, and only an observed failure
+// earns color. Live states read at full ink; settled ones recede.
 const STATUS_COLOR = {
-    starting: COBALT,
-    running: COBALT,
-    waiting: AMBER,
-    idle: COBALT,
-    completed: GREEN,
+    starting: INK_2,
+    running: INK,
+    waiting: INK_2,
+    idle: INK_2,
+    completed: FAINT,
     failed: RED,
     stopped: FAINT,
 };
@@ -59,59 +53,61 @@ const fetchWorkbench = async (ctx) => {
         servicesBySession,
     };
 };
-const itemKey = (item) => item.kind === "session"
-    ? item.session.id
-    : item.kind === "project"
-        ? item.project.id
-        : String(item.harness);
-const itemHeight = (view) => (view.kind === "sessions" ? 2 : 1);
-const homeView = (cwd, data) => {
-    const home = matchProjectByCwd(data.projects, cwdFacts(cwd));
-    return home === undefined ? { kind: "projects" } : { kind: "sessions", projectId: home.id };
+// ─── optimistic cache surgery: pure Workbench → Workbench ───────────────────
+/** Apply `f` to every session row in every project detail. */
+const mapWorkbenchSessions = (data, f) => ({
+    ...data,
+    details: new Map([...data.details].map(([id, detail]) => [id, { ...detail, sessions: detail.sessions.map(f) }])),
+});
+const mapProjectSessions = (data, projectId, f) => {
+    const detail = data.details.get(projectId);
+    if (detail === undefined)
+        return data;
+    const details = new Map(data.details);
+    details.set(projectId, { ...detail, sessions: f(detail.sessions) });
+    return { ...data, details };
 };
-const deriveItems = (view, data) => {
-    if (data === undefined)
+const prependSession = (data, projectId, session) => mapProjectSessions(data, projectId, (sessions) => [session, ...sessions]);
+const replaceSession = (data, projectId, oldId, session) => mapProjectSessions(data, projectId, (sessions) => sessions.map((candidate) => (candidate.id === oldId ? session : candidate)));
+const removeSession = (data, projectId, sessionId) => mapProjectSessions(data, projectId, (sessions) => sessions.filter((candidate) => candidate.id !== sessionId));
+const deriveProjects = (data) => (data?.projects ?? []).map((project) => {
+    const detail = data?.details.get(project.id);
+    const sessions = detail?.sessions ?? [];
+    const live = sessions.filter((s) => LIVE_STATUSES.has(s.status)).length;
+    const open = (detail?.annotations ?? []).reduce((sum, a) => sum + a.openComments, 0);
+    return { project, total: sessions.length, live, open };
+});
+const deriveSessions = (data, projectId) => {
+    if (data === undefined || projectId === null)
         return [];
-    if (view.kind === "projects") {
-        return data.projects.map((project) => {
-            const detail = data.details.get(project.id);
-            const sessions = detail?.sessions ?? [];
-            const live = sessions.filter((s) => LIVE_STATUSES.has(s.status)).length;
-            const open = (detail?.annotations ?? []).reduce((sum, a) => sum + a.openComments, 0);
-            return { kind: "project", project, total: sessions.length, live, open };
-        });
-    }
-    if (view.kind === "sessions") {
-        const detail = data.details.get(view.projectId);
-        if (detail === undefined)
-            return [];
-        return detail.sessions
-            .toSorted((a, b) => {
-            const aLive = LIVE_STATUSES.has(a.status) ? 1 : 0;
-            const bLive = LIVE_STATUSES.has(b.status) ? 1 : 0;
-            if (aLive !== bLive)
-                return bLive - aLive;
-            return b.createdAt.localeCompare(a.createdAt);
-        })
-            .map((session) => ({
-            kind: "session",
-            session,
-            annotation: detail.annotations.find((a) => a.sessionId === session.id),
-            services: data.servicesBySession.get(session.id) ?? [],
-        }));
-    }
-    const resuming = view.session;
+    const detail = data.details.get(projectId);
+    if (detail === undefined)
+        return [];
+    return detail.sessions
+        .toSorted((a, b) => {
+        const aLive = LIVE_STATUSES.has(a.status) ? 1 : 0;
+        const bLive = LIVE_STATUSES.has(b.status) ? 1 : 0;
+        if (aLive !== bLive)
+            return bLive - aLive;
+        return b.createdAt.localeCompare(a.createdAt);
+    })
+        .map((session) => ({
+        session,
+        annotation: detail.annotations.find((a) => a.sessionId === session.id),
+        services: data.servicesBySession.get(session.id) ?? [],
+    }));
+};
+/** The picker's rows: resume offers the same harness first, then the crossings. */
+const deriveHarnesses = (resuming) => {
     if (resuming !== null) {
         const others = Object.keys(HARNESS_COMMANDS).filter((h) => h !== resuming.harness);
         return [
             {
-                kind: "harness",
                 harness: null,
                 label: resuming.harness,
                 hint: "same harness — native resume, conversation intact",
             },
             ...others.map((harness) => ({
-                kind: "harness",
                 harness,
                 label: harness,
                 hint: harness === "shell"
@@ -121,7 +117,6 @@ const deriveItems = (view, data) => {
         ];
     }
     return Object.keys(HARNESS_COMMANDS).map((harness) => ({
-        kind: "harness",
         harness,
         label: harness,
         hint: harness === "shell"
@@ -129,53 +124,41 @@ const deriveItems = (view, data) => {
             : `mend ${harness} — new worktree, recorded session`,
     }));
 };
-// ─── rows: JSX spans instead of StyledText chunks ───────────────────────────
+// ─── panes and rows ─────────────────────────────────────────────────────────
 const Gutter = ({ selected }) => (_jsx("span", { fg: selected ? COBALT : FAINT, children: selected ? "▌ " : "  " }));
-/** Facts joined with dim separators — label, review state, age. */
-const Facts = ({ facts }) => {
-    if (facts.length === 0)
-        return _jsx("span", { fg: FAINT, children: "\u2014" });
-    return (_jsx(_Fragment, { children: facts.map((fact, index) => (
-        // eslint-disable-next-line react/no-array-index-key -- order is the identity here
-        _jsxs("span", { children: [index > 0 ? _jsx("span", { fg: FAINT, children: " \u00B7 " }) : null, fact] }, index))) }));
+/**
+ * A drawn pane: rounded border, a title in the frame, cobalt when the
+ * keyboard lives here. Everything the dashboard shows sits in one of these.
+ */
+const Pane = ({ title, focused, children, width, height, grow, }) => (_jsx("box", { border: true, borderStyle: "rounded", borderColor: focused ? COBALT : RULE, title: ` ${title} `, titleAlignment: "left", backgroundColor: "transparent", ...(width === undefined ? {} : { width, flexShrink: 0, minHeight: 0 }), ...(height === undefined ? {} : { height, flexShrink: 0 }), ...(grow === true ? { flexGrow: 1, flexShrink: 1, minHeight: 0, minWidth: 0 } : {}), flexDirection: "column", children: children }));
+const paneScrollStyle = {
+    rootOptions: { backgroundColor: "transparent", border: false },
+    wrapperOptions: { backgroundColor: "transparent" },
+    viewportOptions: { backgroundColor: "transparent" },
+    contentOptions: { backgroundColor: "transparent" },
 };
+const ProjectRow = ({ item, selected, nameWidth, }) => (_jsx("box", { height: 1, flexShrink: 0, backgroundColor: selected ? WASH : "transparent", children: _jsxs("text", { height: 1, bg: "transparent", children: [_jsx(Gutter, { selected: selected }), _jsx("span", { fg: INK, children: item.project.name.padEnd(nameWidth) }), _jsx("span", { fg: item.total === 0 ? FAINT : MUTED, children: `  ${item.total}` }), item.live > 0 ? _jsx("span", { fg: MUTED, children: ` · ${item.live} live` }) : null, item.open > 0 ? _jsx("span", { fg: MUTED, children: ` · ${item.open}` }) : null] }) }));
 const SessionRow = ({ item, selected, }) => {
-    const { session, annotation, services } = item;
+    const { session, annotation } = item;
     const color = STATUS_COLOR[session.status] ?? MUTED;
-    const glyph = STATUS_GLYPH[session.status] ?? "·";
-    const facts = [];
-    const age = timeAgo(session.createdAt);
-    if (age !== "")
-        facts.push(_jsx("span", { fg: FAINT, children: age }));
-    // What runs right now: name :port → host port, observed state colored.
-    for (const service of services.slice(0, 2)) {
-        facts.push(_jsx("span", { fg: service.status === "reachable" ? GREEN : AMBER, children: `${service.label ?? service.id.slice(0, 6)} :${service.workspacePort ?? "?"}${service.protocol === "udp" ? "u" : ""}→${service.hostPort ?? "?"} ${service.status}` }));
-    }
-    if (services.length > 2) {
-        facts.push(_jsx("span", { fg: FAINT, children: `+${services.length - 2} services` }));
-    }
-    if (session.label !== null)
-        facts.push(_jsx("span", { fg: MUTED, children: session.label }));
-    if (annotation !== undefined && annotation.openComments > 0) {
-        facts.push(_jsxs("span", { fg: AMBER, children: [annotation.openComments, " open comment", annotation.openComments === 1 ? "" : "s"] }));
-    }
-    if (annotation !== undefined && annotation.pendingFollowUp) {
-        facts.push(_jsx("span", { fg: AMBER, children: "follow-up pending" }));
-    }
-    if (session.summary !== null && facts.length < 3) {
-        facts.push(_jsx("span", { fg: FAINT, children: session.summary.split("\n")[0]?.slice(0, 60) ?? "" }));
-    }
-    return (_jsxs("box", { height: 2, flexDirection: "column", flexShrink: 0, backgroundColor: selected ? WASH : "transparent", children: [_jsxs("text", { height: 1, bg: "transparent", children: [_jsx(Gutter, { selected: selected }), _jsxs("span", { fg: color, children: [glyph, " "] }), _jsx("span", { fg: INK, children: session.harness.padEnd(9) }), _jsx("span", { fg: FAINT, children: session.id.slice(0, 8) }), _jsx("span", { fg: color, children: `  ${session.status.padEnd(10)}` }), _jsx("span", { fg: MUTED, children: session.branch })] }), _jsxs("text", { height: 1, bg: "transparent", children: [_jsx(Gutter, { selected: selected }), _jsx("span", { children: "  " }), _jsx(Facts, { facts: facts })] })] }));
-};
-const ProjectRow = ({ item, selected, nameWidth, branchWidth, }) => {
-    const { project, total, live, open } = item;
-    const counts = total === 0 ? "no sessions" : `${total} session${total === 1 ? "" : "s"}`;
-    const liveText = live > 0 ? ` · ${live} live` : "";
-    const openText = open > 0 ? ` · ${open} open` : "";
-    const pad = " ".repeat(Math.max(1, 24 - counts.length - liveText.length - openText.length));
-    return (_jsx("box", { height: 1, flexShrink: 0, backgroundColor: selected ? WASH : "transparent", children: _jsxs("text", { height: 1, bg: "transparent", children: [_jsx(Gutter, { selected: selected }), _jsx("span", { fg: INK, children: project.name.padEnd(nameWidth) }), _jsx("span", { children: "  " }), _jsx("span", { fg: MUTED, children: project.defaultBranch.padEnd(branchWidth) }), _jsx("span", { children: "  " }), _jsx("span", { fg: total === 0 ? FAINT : MUTED, children: counts }), liveText === "" ? null : _jsx("span", { fg: COBALT, children: liveText }), openText === "" ? null : _jsx("span", { fg: AMBER, children: openText }), _jsxs("span", { fg: FAINT, children: [pad, project.storePath] })] }) }));
+    const age = timeAgo(session.createdAt).replace(" ago", "");
+    return (_jsx("box", { height: 1, flexShrink: 0, backgroundColor: selected ? WASH : "transparent", children: _jsxs("text", { height: 1, bg: "transparent", children: [_jsx(Gutter, { selected: selected }), _jsx("span", { fg: INK, children: session.harness.padEnd(9) }), _jsx("span", { fg: FAINT, children: session.id.slice(0, 8) }), _jsx("span", { fg: color, children: `  ${session.status.padEnd(10)}` }), _jsx("span", { fg: FAINT, children: age.padEnd(9) }), annotation !== undefined && annotation.openComments > 0 ? (_jsx("span", { fg: MUTED, children: `${annotation.openComments} open  ` })) : null, _jsx("span", { fg: MUTED, children: (session.label ?? "").slice(0, 40) })] }) }));
 };
 const HarnessRow = ({ item, selected, }) => (_jsx("box", { height: 1, flexShrink: 0, backgroundColor: selected ? WASH : "transparent", children: _jsxs("text", { height: 1, bg: "transparent", children: [_jsx(Gutter, { selected: selected }), _jsx("span", { fg: INK, children: item.label.padEnd(12) }), _jsx("span", { fg: FAINT, children: item.hint })] }) }));
+/**
+ * The detail panel: everything about the selected session that the one-line
+ * rows no longer carry — branch and base, services, the review state, the
+ * summary. The panes above stay scannable because this panel holds the depth.
+ */
+const SessionDetail = ({ item }) => {
+    if (item === null) {
+        return (_jsx("text", { height: 1, bg: "transparent", fg: FAINT, children: "  no session selected — n starts one" }));
+    }
+    const { session, annotation, services } = item;
+    const color = STATUS_COLOR[session.status] ?? MUTED;
+    const summary = session.summary?.split("\n")[0] ?? null;
+    return (_jsxs(_Fragment, { children: [_jsxs("text", { height: 1, bg: "transparent", children: [_jsx("span", { children: "  " }), _jsx("span", { fg: color, children: session.status }), _jsx("span", { fg: FAINT, children: " \u00B7 " }), _jsx("span", { fg: MUTED, children: session.branch }), _jsxs("span", { fg: FAINT, children: [session.baseSha === "" ? "" : ` vs ${session.baseSha.slice(0, 12)}`, " \u00B7 started", " ", timeAgo(session.createdAt)] })] }), _jsxs("text", { height: 1, bg: "transparent", children: [_jsx("span", { children: "  " }), services.length === 0 ? (_jsx("span", { fg: FAINT, children: "no services running" })) : (services.slice(0, 3).map((service, index) => (_jsxs("span", { children: [index > 0 ? _jsx("span", { fg: FAINT, children: " \u00B7 " }) : null, _jsx("span", { fg: service.status === "reachable" ? INK_2 : MUTED, children: `${service.label ?? service.id.slice(0, 6)} :${service.workspacePort ?? "?"}${service.protocol === "udp" ? "u" : ""}→${service.hostPort ?? "?"} ${service.status}` })] }, service.id)))), services.length > 3 ? _jsx("span", { fg: FAINT, children: ` · +${services.length - 3} more` }) : null] }), _jsxs("text", { height: 1, bg: "transparent", children: [_jsx("span", { children: "  " }), annotation === undefined || annotation.openComments === 0 ? (_jsx("span", { fg: FAINT, children: "no open review comments" })) : (_jsxs("span", { fg: INK_2, children: [annotation.openComments, " open comment", annotation.openComments === 1 ? "" : "s"] })), annotation?.pendingFollowUp === true ? (_jsxs(_Fragment, { children: [_jsx("span", { fg: FAINT, children: " \u00B7 " }), _jsx("span", { fg: INK_2, children: "follow-up pending" })] })) : null, annotation?.changeId != null ? (_jsxs(_Fragment, { children: [_jsx("span", { fg: FAINT, children: " \u00B7 " }), _jsx("span", { fg: MUTED, children: "v reviews the change" })] })) : null] }), _jsx("text", { height: 1, bg: "transparent", fg: summary === null ? FAINT : MUTED, children: `  ${summary ?? "no summary yet"}` })] }));
+};
 const StatusLine = ({ busy, busyStarted, status, }) => {
     const [now, setNow] = useState(() => Date.now());
     // Timers are the one thing React cannot express declaratively: a 1s tick
@@ -196,10 +179,20 @@ const StatusLine = ({ busy, busyStarted, status, }) => {
         : status !== null && Date.now() - status.at < 5000
             ? ` ${status.text}`
             : "";
-    return (_jsx("text", { height: 1, fg: AMBER, bg: "transparent", children: text }));
+    return (_jsx("text", { height: 1, fg: INK_2, bg: "transparent", children: text }));
+};
+const errorText = (error) => error instanceof Error ? error.message : String(error);
+/** Keep a 1-line-per-row selection inside its scrollbox's real viewport. */
+const keepRowVisible = (scroll, index) => {
+    if (scroll === null)
+        return;
+    const viewH = Math.max(1, scroll.viewport.height);
+    if (index < scroll.scrollTop)
+        scroll.scrollTo(index);
+    else if (index + 1 > scroll.scrollTop + viewH)
+        scroll.scrollTo(index + 1 - viewH);
 };
-// ─── the app ────────────────────────────────────────────────────────────────
-const CHROME_ROWS = 7; // margin + header + margin + 2 borders + status + footer
+const PROJECTS_PANE_WIDTH = 30;
 const App = ({ ctx, onQuit }) => {
     const renderer = useRenderer();
     const queryClient = useQueryClient();
@@ -210,9 +203,11 @@ const App = ({ ctx, onQuit }) => {
         retry: true,
         retryDelay: 1000,
     });
-    const [navigated, setNavigated] = useState(null);
-    const view = navigated ?? (data === undefined ? { kind: "projects" } : homeView(ctx.cwd, data));
-    const [selectedKey, setSelectedKey] = useState(null);
+    const [focusState, setFocus] = useState("sessions");
+    const [projectKey, setProjectKey] = useState(null);
+    const [sessionKey, setSessionKey] = useState(null);
+    const [picker, setPicker] = useState(null);
+    const [pickerIndex, setPickerIndex] = useState(0);
     const [busy, setBusy] = useState(null);
     const [busyStarted, setBusyStarted] = useState(0);
     const [status, setStatus] = useState(null);
@@ -220,39 +215,39 @@ const App = ({ ctx, onQuit }) => {
     const [reviewing, setReviewing] = useState(null);
     /** Set synchronously around attach/launch so keystrokes can't double-fire. */
     const lockRef = useRef(false);
-    const items = deriveItems(view, data);
-    const foundIndex = selectedKey === null ? -1 : items.findIndex((i) => itemKey(i) === selectedKey);
-    const selectedIndex = foundIndex === -1 ? 0 : foundIndex;
+    /** Latest modal state for mutation callbacks — closures there go stale. */
+    const modalRef = useRef(false);
+    modalRef.current = editing !== null || reviewing !== null || picker !== null;
+    const { width: terminalCols, height: terminalRows } = useTerminalDimensions();
+    const showProjectsPane = terminalCols >= 72;
+    const showDetail = terminalRows >= 18;
+    const focus = showProjectsPane ? focusState : "sessions";
+    // ── pane data ──
+    const projectItems = deriveProjects(data);
+    const homeProject = data === undefined ? undefined : matchProjectByCwd(data.projects, cwdFacts(ctx.cwd));
+    const projectIndexRaw = projectKey === null ? -1 : projectItems.findIndex((p) => p.project.id === projectKey);
+    const projectIndex = projectIndexRaw !== -1
+        ? projectIndexRaw
+        : Math.max(0, homeProject === undefined
+            ? 0
+            : projectItems.findIndex((p) => p.project.id === homeProject.id));
+    const selectedProject = projectItems[projectIndex] ?? null;
+    const sessionItems = deriveSessions(data, selectedProject?.project.id ?? null);
+    const sessionIndexRaw = sessionKey === null ? -1 : sessionItems.findIndex((s) => s.session.id === sessionKey);
+    const sessionIndex = sessionIndexRaw === -1 ? 0 : sessionIndexRaw;
+    const selectedSession = sessionItems[sessionIndex] ?? null;
+    const pickerItems = picker === null ? [] : deriveHarnesses(picker.session);
     const say = (text) => setStatus({ text, at: Date.now() });
     const refetch = () => void queryClient.invalidateQueries({ queryKey: WORKBENCH_KEY });
-    const setView = (next) => {
-        setNavigated(next);
-        setSelectedKey(null);
-    };
-    // Keep the selection on screen — the one imperative escape hatch.
-    const scrollRef = useRef(null);
-    const { height: terminalRows } = useTerminalDimensions();
-    const rowH = itemHeight(view);
+    // Keep each pane's selection on screen — the one imperative escape hatch.
+    const projectScrollRef = useRef(null);
+    const sessionScrollRef = useRef(null);
     useEffect(() => {
-        const scroll = scrollRef.current;
-        if (scroll === null)
-            return;
-        const top = selectedIndex * rowH;
-        const viewH = Math.max(1, terminalRows - CHROME_ROWS - (editing === null ? 0 : 3));
-        if (top < scroll.scrollTop)
-            scroll.scrollTo(top);
-        else if (top + rowH > scroll.scrollTop + viewH)
-            scroll.scrollTo(top + rowH - viewH);
-    }, [selectedIndex, rowH, terminalRows, editing]);
-    const beginBusy = (label) => {
-        lockRef.current = true;
-        setBusy(label);
-        setBusyStarted(Date.now());
-    };
-    const endBusy = () => {
-        lockRef.current = false;
-        setBusy(null);
-    };
+        keepRowVisible(projectScrollRef.current, projectIndex);
+    }, [projectIndex]);
+    useEffect(() => {
+        keepRowVisible(sessionScrollRef.current, sessionIndex);
+    }, [sessionIndex]);
     const attachFlow = async (session) => {
         const short = session.id.slice(0, 8);
         lockRef.current = true;
@@ -285,99 +280,184 @@ const App = ({ ctx, onQuit }) => {
                 : `session settled · ${short}`);
         refetch();
     };
-    const startSession = async (projectId, harness) => {
-        const argv = HARNESS_COMMANDS[harness];
-        if (argv === undefined)
+    /** Converge on the server's truth once, after the LAST in-flight mutation. */
+    const settleRefetch = () => {
+        if (queryClient.isMutating() === 1)
+            refetch();
+    };
+    /** The current cache entry, for surgical optimistic edits. */
+    const workbench = () => queryClient.getQueryData(WORKBENCH_KEY);
+    const patchWorkbench = (f) => {
+        const current = workbench();
+        if (current !== undefined)
+            queryClient.setQueryData(WORKBENCH_KEY, f(current));
+    };
+    /** Attaching yanks the terminal; only do it unasked when nothing else is open. */
+    const attachIfIdle = async (session) => {
+        if (lockRef.current || modalRef.current) {
+            say(`session ready · ${session.id.slice(0, 8)} — enter attaches`);
             return;
-        setView({ kind: "sessions", projectId });
-        beginBusy(`provisioning ${harness} workspace — a first launch builds the harness image ·`);
-        try {
-            const session = await ctx.api("POST", `/projects/${projectId}/sessions`, {
-                harness,
+        }
+        await attachFlow(session);
+    };
+    // A new session appears as a `starting` row the moment enter is pressed;
+    // the keyboard stays free while the workspace provisions, and the terminal
+    // attaches when the launch answers — unless something else has the screen.
+    const launchMutation = useMutation({
+        mutationFn: async (vars) => {
+            const argv = HARNESS_COMMANDS[vars.harness];
+            if (argv === undefined)
+                throw new Error(`unknown harness "${vars.harness}"`);
+            const session = await ctx.api("POST", `/projects/${vars.projectId}/sessions`, {
+                harness: vars.harness,
                 label: null,
                 base: null,
             });
             await ctx.api("POST", `/sessions/${session.id}/launch`, { argv });
-            endBusy();
-            await attachFlow(session);
-        }
-        catch (error) {
-            endBusy();
-            say(error instanceof Error ? error.message : String(error));
-        }
-        refetch();
+            return session;
+        },
+        onMutate: async (vars) => {
+            await queryClient.cancelQueries({ queryKey: WORKBENCH_KEY });
+            patchWorkbench((current) => prependSession(current, vars.projectId, {
+                id: vars.pendingKey,
+                harness: vars.harness,
+                label: null,
+                branch: "provisioning…",
+                baseSha: "",
+                status: "starting",
+                summary: null,
+                createdAt: new Date().toISOString(),
+            }));
+            setSessionKey(vars.pendingKey);
+            setBusy(`provisioning ${vars.harness} workspace — a first launch builds the harness image ·`);
+            setBusyStarted(Date.now());
+        },
+        onError: (error, vars) => {
+            patchWorkbench((current) => removeSession(current, vars.projectId, vars.pendingKey));
+            setBusy(null);
+            say(errorText(error));
+        },
+        onSuccess: async (session, vars) => {
+            patchWorkbench((current) => replaceSession(current, vars.projectId, vars.pendingKey, session));
+            setSessionKey(session.id);
+            setBusy(null);
+            await attachIfIdle(session);
+        },
+        onSettled: settleRefetch,
+    });
+    const resumeMutation = useMutation({
+        mutationFn: (vars) => ctx.api("POST", `/sessions/${vars.session.id}/resume`, {
+            harness: vars.harness,
+        }),
+        onMutate: async (vars) => {
+            await queryClient.cancelQueries({ queryKey: WORKBENCH_KEY });
+            patchWorkbench((current) => mapWorkbenchSessions(current, (session) => session.id === vars.session.id ? { ...session, status: "starting" } : session));
+            setSessionKey(vars.session.id);
+            setBusy(`resuming ${vars.session.id.slice(0, 8)} — a fresh workspace restores the saved state ·`);
+            setBusyStarted(Date.now());
+        },
+        onError: (error) => {
+            setBusy(null);
+            say(errorText(error));
+            refetch();
+        },
+        onSuccess: async (resumed, vars) => {
+            patchWorkbench((current) => replaceSession(current, vars.projectId, vars.session.id, resumed));
+            setSessionKey(resumed.id);
+            setBusy(null);
+            await attachIfIdle(resumed);
+        },
+        onSettled: settleRefetch,
+    });
+    // The label lands in the row before the server answers; an error puts the
+    // truth back on the next refetch.
+    const renameMutation = useMutation({
+        mutationFn: (vars) => ctx.api("POST", `/sessions/${vars.session.id}/label`, { label: vars.label }),
+        onMutate: async (vars) => {
+            await queryClient.cancelQueries({ queryKey: WORKBENCH_KEY });
+            patchWorkbench((current) => mapWorkbenchSessions(current, (session) => session.id === vars.session.id ? { ...session, label: vars.label } : session));
+            say(vars.label === null
+                ? `label cleared · ${vars.session.id.slice(0, 8)}`
+                : `labeled · ${vars.label}`);
+        },
+        onError: (error) => {
+            say(errorText(error));
+            refetch();
+        },
+        onSettled: settleRefetch,
+    });
+    const startSession = (projectId, harness) => {
+        setFocus("sessions");
+        launchMutation.mutate({ projectId, harness, pendingKey: pendingId() });
     };
-    const resumeSession = async (projectId, session, harness) => {
-        setView({ kind: "sessions", projectId });
-        setSelectedKey(session.id);
-        beginBusy(`resuming ${session.id.slice(0, 8)} — a fresh workspace restores the saved state ·`);
-        try {
-            const resumed = await ctx.api("POST", `/sessions/${session.id}/resume`, {
-                harness,
-            });
-            endBusy();
-            await attachFlow(resumed);
-        }
-        catch (error) {
-            endBusy();
-            say(error instanceof Error ? error.message : String(error));
-        }
-        refetch();
+    const resumeSession = (projectId, session, harness) => {
+        setFocus("sessions");
+        resumeMutation.mutate({ projectId, session, harness });
     };
-    const submitRename = async (session, value) => {
+    const submitRename = (session, value) => {
         setEditing(null);
         const label = value.trim() === "" ? null : value.trim();
-        try {
-            await ctx.api("POST", `/sessions/${session.id}/label`, { label });
-            say(label === null ? `label cleared · ${session.id.slice(0, 8)}` : `labeled · ${label}`);
-        }
-        catch (error) {
-            say(error instanceof Error ? error.message : String(error));
-        }
-        refetch();
+        renameMutation.mutate({ session, label });
+    };
+    const openPicker = (session) => {
+        setPicker({ session });
+        setPickerIndex(0);
     };
     const moveSelection = (delta) => {
-        if (items.length === 0)
+        if (picker !== null) {
+            setPickerIndex((current) => Math.max(0, Math.min(pickerItems.length - 1, current + delta)));
+            return;
+        }
+        if (focus === "projects") {
+            if (projectItems.length === 0)
+                return;
+            const next = Math.max(0, Math.min(projectItems.length - 1, projectIndex + delta));
+            const item = projectItems[next];
+            if (item !== undefined) {
+                setProjectKey(item.project.id);
+                setSessionKey(null);
+            }
             return;
-        const next = Math.max(0, Math.min(items.length - 1, selectedIndex + delta));
-        const item = items[next];
+        }
+        if (sessionItems.length === 0)
+            return;
+        const next = Math.max(0, Math.min(sessionItems.length - 1, sessionIndex + delta));
+        const item = sessionItems[next];
         if (item !== undefined)
-            setSelectedKey(itemKey(item));
+            setSessionKey(item.session.id);
     };
     const activate = () => {
-        const item = items[selectedIndex];
-        if (item === undefined)
-            return;
-        if (item.kind === "project") {
-            setView({ kind: "sessions", projectId: item.project.id });
-            return;
-        }
-        if (item.kind === "session" && view.kind === "sessions") {
-            if (LIVE_STATUSES.has(item.session.status)) {
-                void attachFlow(item.session);
+        if (picker !== null) {
+            const choice = pickerItems[pickerIndex];
+            const projectId = selectedProject?.project.id;
+            if (choice === undefined || projectId === undefined)
+                return;
+            setPicker(null);
+            if (picker.session === null) {
+                if (choice.harness !== null)
+                    startSession(projectId, choice.harness);
             }
             else {
-                setView({ kind: "picker", projectId: view.projectId, session: item.session });
+                resumeSession(projectId, picker.session, choice.harness);
             }
             return;
         }
-        if (item.kind === "harness" && view.kind === "picker") {
-            const { projectId, session } = view;
-            if (session === null) {
-                if (item.harness !== null)
-                    void startSession(projectId, item.harness);
-            }
-            else {
-                void resumeSession(projectId, session, item.harness);
-            }
+        if (focus === "projects") {
+            setFocus("sessions");
+            return;
+        }
+        const item = selectedSession;
+        if (item === null)
+            return;
+        if (isPendingId(item.session.id)) {
+            say("still provisioning — the row fills in when the workspace answers");
+        }
+        else if (LIVE_STATUSES.has(item.session.status)) {
+            void attachFlow(item.session);
+        }
+        else {
+            openPicker(item.session);
         }
-    };
-    /** `-`, backspace, or vim `h`: one level up. */
-    const goUp = () => {
-        if (view.kind === "sessions")
-            setView({ kind: "projects" });
-        if (view.kind === "picker")
-            setView({ kind: "sessions", projectId: view.projectId });
     };
     useKeyboard((key) => {
         if (reviewing !== null)
@@ -392,6 +472,26 @@ const App = ({ ctx, onQuit }) => {
                 setEditing(null);
             return;
         }
+        if (picker !== null) {
+            switch (key.name) {
+                case "down":
+                case "j":
+                    return moveSelection(1);
+                case "up":
+                case "k":
+                    return moveSelection(-1);
+                case "return":
+                case "linefeed":
+                case "l":
+                    return activate();
+                case "escape":
+                case "q":
+                case "h":
+                    return setPicker(null);
+                default:
+                    return;
+            }
+        }
         switch (key.name) {
             case "q":
                 return onQuit();
@@ -403,41 +503,50 @@ const App = ({ ctx, onQuit }) => {
                 return moveSelection(-1);
             case "return":
             case "linefeed":
-            case "l":
                 return activate();
+            case "l":
+            case "right":
+                if (focus === "projects")
+                    setFocus("sessions");
+                return;
+            case "h":
+            case "left":
             case "-":
             case "backspace":
-            case "h":
-                return goUp();
-            case "escape":
-                if (view.kind === "picker")
-                    setView({ kind: "sessions", projectId: view.projectId });
+                if (showProjectsPane)
+                    setFocus("projects");
+                return;
+            case "tab":
+                if (showProjectsPane)
+                    setFocus(focus === "projects" ? "sessions" : "projects");
                 return;
             case "n":
-                if (view.kind === "sessions") {
-                    setView({ kind: "picker", projectId: view.projectId, session: null });
-                }
+                if (selectedProject !== null)
+                    openPicker(null);
                 return;
             case "e": {
-                const item = items[selectedIndex];
-                if (view.kind === "sessions" && item !== undefined && item.kind === "session") {
+                const item = selectedSession;
+                if (item !== null && !isPendingId(item.session.id))
                     setEditing(item.session);
-                }
                 return;
             }
             case "o": {
-                const item = items[selectedIndex];
-                if (item !== undefined && item.kind === "session") {
+                const item = selectedSession;
+                if (item !== null && !isPendingId(item.session.id)) {
                     openUrl(`${ctx.config.url}/sessions/${item.session.id}`);
                     say(`opened · ${ctx.config.url}/sessions/${item.session.id.slice(0, 8)}…`);
                 }
                 return;
             }
             case "v": {
-                const item = items[selectedIndex];
-                if (view.kind !== "sessions" || item === undefined || item.kind !== "session")
+                const item = selectedSession;
+                if (item === null)
+                    return;
+                if (isPendingId(item.session.id)) {
+                    say("still provisioning — nothing to review yet");
                     return;
-                const target = reviewTargetForSession(item.session, item.annotation, detail?.project.name ?? "project");
+                }
+                const target = reviewTargetForSession(item.session, item.annotation, selectedProject?.project.name ?? "project");
                 if (target === null) {
                     say("this session has no reviewable change yet");
                     return;
@@ -453,43 +562,27 @@ const App = ({ ctx, onQuit }) => {
                 return;
         }
     });
-    // ── chrome derived from the view ──
-    const projects = data?.projects ?? [];
-    const liveTotal = data === undefined
-        ? 0
-        : [...data.details.values()]
-            .flatMap((d) => d.sessions)
-            .filter((s) => LIVE_STATUSES.has(s.status)).length;
-    const detail = view.kind === "projects" ? undefined : data?.details.get(view.projectId);
-    const nameWidth = Math.max(...projects.map((p) => p.name.length), 4);
-    const branchWidth = Math.max(...projects.map((p) => p.defaultBranch.length), 4);
-    let title;
-    let headerContext;
-    let footerText;
-    if (view.kind === "projects") {
-        title = " projects ";
-        headerContext = (_jsxs(_Fragment, { children: [_jsxs("span", { fg: MUTED, children: [projects.length, " project", projects.length === 1 ? "" : "s"] }), _jsx("span", { fg: FAINT, children: " \u00B7 " }), _jsxs("span", { fg: liveTotal > 0 ? COBALT : FAINT, children: [liveTotal, " live"] })] }));
-        footerText = " ↑↓/jk move · enter/l open project · r refresh · q quit";
-    }
-    else if (view.kind === "sessions") {
-        const name = detail?.project.name ?? "?";
-        const live = (detail?.sessions ?? []).filter((s) => LIVE_STATUSES.has(s.status)).length;
-        title = ` sessions — ${name} `;
-        headerContext = (_jsxs(_Fragment, { children: [_jsx("span", { fg: COBALT, children: name }), _jsxs("span", { fg: FAINT, children: [" ", detail?.project.defaultBranch ?? ""] }), _jsx("span", { fg: FAINT, children: " \u00B7 " }), _jsxs("span", { fg: live > 0 ? COBALT : FAINT, children: [live, " live"] })] }));
-        footerText =
-            " ↑↓/jk move · enter/l attach/resume · v review in TUI · o web · n new · e rename · h/- projects · q quit";
-    }
-    else {
-        const forSession = view.session;
-        title =
-            forSession === null
-                ? " new session — pick a harness "
-                : ` resume ${forSession.id.slice(0, 8)} — pick a harness `;
-        headerContext = (_jsx("span", { fg: MUTED, children: forSession === null
-                ? "a fresh worktree, recorded from the first keystroke"
-                : "same worktree, restored state" }));
-        footerText = " ↑↓ move · enter start · esc/h back";
-    }
+    // ── chrome ──
+    const liveTotal = projectItems.reduce((sum, item) => sum + item.live, 0);
+    const nameWidth = Math.min(16, Math.max(...projectItems.map((p) => p.project.name.length), 4));
+    const sessionsTitle = selectedProject === null
+        ? "sessions"
+        : `sessions — ${selectedProject.project.name}${selectedProject.live > 0 ? ` · ${selectedProject.live} live` : ""}`;
+    const detailTitle = selectedSession === null
+        ? "session"
+        : `session — ${selectedSession.session.harness} ${selectedSession.session.id.slice(0, 8)}`;
+    const pickerTitle = picker === null
+        ? ""
+        : picker.session === null
+            ? "new session — pick a harness"
+            : `resume ${picker.session.id.slice(0, 8)} — pick a harness`;
+    const footerText = editing !== null
+        ? " enter save · esc cancel"
+        : picker !== null
+            ? " ↑↓ move · enter start · esc cancel"
+            : focus === "projects"
+                ? " ↑↓ move · enter/l sessions · ⇥ panes · r refresh · q quit"
+                : " ↑↓ move · enter attach/resume · n new · v review · e rename · o web · h/⇥ projects · q quit";
     const loadFailure = data === undefined && failureReason !== null
         ? failureReason instanceof Error
             ? failureReason.message
@@ -501,20 +594,14 @@ const App = ({ ctx, onQuit }) => {
                 refetch();
             }, onQuit: onQuit }));
     }
-    return (_jsxs("box", { flexGrow: 1, flexDirection: "column", backgroundColor: BG, children: [_jsxs("box", { height: 1, marginTop: 1, flexDirection: "row", justifyContent: "space-between", backgroundColor: "transparent", children: [_jsxs("text", { height: 1, bg: "transparent", children: [_jsx("span", { fg: INK, children: " mend" }), _jsx("span", { children: "  " }), headerContext] }), _jsx("text", { height: 1, fg: FAINT, bg: "transparent", children: `${ctx.config.url}  ` })] }), _jsx("box", { border: true, borderStyle: "rounded", borderColor: RULE, title: title, titleAlignment: "left", backgroundColor: BG, flexGrow: 1, flexShrink: 1, minHeight: 0, marginTop: 1, children: _jsxs("scrollbox", { ref: scrollRef, flexGrow: 1, flexShrink: 1, minHeight: 0, style: {
-                        rootOptions: { backgroundColor: BG, border: false },
-                        wrapperOptions: { backgroundColor: BG },
-                        viewportOptions: { backgroundColor: BG },
-                        contentOptions: { backgroundColor: BG },
-                    }, children: [items.map((item, index) => item.kind === "session" ? (_jsx(SessionRow, { item: item, selected: index === selectedIndex }, itemKey(item))) : item.kind === "project" ? (_jsx(ProjectRow, { item: item, selected: index === selectedIndex, nameWidth: nameWidth, branchWidth: branchWidth }, itemKey(item))) : (_jsx(HarnessRow, { item: item, selected: index === selectedIndex }, itemKey(item)))), view.kind === "sessions" && data !== undefined && items.length === 0 ? (_jsx("text", { height: 1, fg: FAINT, bg: "transparent", children: "  no sessions yet — n starts one" })) : null, loadFailure !== null ? (_jsx("text", { height: 1, fg: AMBER, bg: "transparent", children: `  ${loadFailure} — retrying` })) : null] }) }), editing === null ? null : (_jsx("box", { border: true, borderStyle: "rounded", borderColor: COBALT, title: ` label — ${editing.harness} ${editing.id.slice(0, 8)} `, titleAlignment: "left", backgroundColor: BG, height: 3, flexShrink: 0, children: _jsx("input", { focused: true, value: editing.label ?? "", placeholder: "a few words for what this session is doing (empty clears)", backgroundColor: BG, focusedBackgroundColor: BG, textColor: INK, focusedTextColor: INK, placeholderColor: FAINT, cursorColor: INK, flexGrow: 1, onSubmit: (value) => {
+    return (_jsxs("box", { flexGrow: 1, flexDirection: "column", backgroundColor: "transparent", children: [_jsxs("box", { height: 1, flexDirection: "row", justifyContent: "space-between", children: [_jsxs("text", { height: 1, bg: "transparent", children: [_jsx("span", { fg: INK, children: " mend" }), _jsxs("span", { fg: MUTED, children: ["  ", projectItems.length, " project", projectItems.length === 1 ? "" : "s"] }), _jsx("span", { fg: FAINT, children: " \u00B7 " }), _jsxs("span", { fg: liveTotal > 0 ? MUTED : FAINT, children: [liveTotal, " live"] })] }), _jsx("text", { height: 1, fg: FAINT, bg: "transparent", children: `${ctx.config.url}  ` })] }), _jsxs("box", { flexGrow: 1, flexShrink: 1, minHeight: 0, flexDirection: "row", children: [showProjectsPane ? (_jsx(Pane, { title: "projects", focused: focus === "projects", width: PROJECTS_PANE_WIDTH, children: _jsxs("scrollbox", { ref: projectScrollRef, flexGrow: 1, flexShrink: 1, minHeight: 0, style: paneScrollStyle, children: [projectItems.map((item, index) => (_jsx(ProjectRow, { item: item, selected: index === projectIndex, nameWidth: nameWidth }, item.project.id))), data !== undefined && projectItems.length === 0 ? (_jsx("text", { height: 1, fg: FAINT, bg: "transparent", children: "  none adopted yet" })) : null] }) })) : null, _jsx(Pane, { title: sessionsTitle, focused: focus === "sessions", grow: true, children: _jsxs("scrollbox", { ref: sessionScrollRef, flexGrow: 1, flexShrink: 1, minHeight: 0, style: paneScrollStyle, children: [sessionItems.map((item, index) => (_jsx(SessionRow, { item: item, selected: index === sessionIndex }, item.session.id))), data !== undefined && sessionItems.length === 0 ? (_jsx("text", { height: 1, fg: FAINT, bg: "transparent", children: "  no sessions yet — n starts one" })) : null, loadFailure !== null ? (_jsx("text", { height: 1, fg: INK_2, bg: "transparent", children: `  ${loadFailure} — retrying` })) : null] }) })] }), picker !== null ? (_jsx(Pane, { title: pickerTitle, focused: true, height: 2 + pickerItems.length, children: pickerItems.map((item, index) => (_jsx(HarnessRow, { item: item, selected: index === pickerIndex }, String(item.harness)))) })) : editing !== null ? (_jsx("box", { border: true, borderStyle: "rounded", borderColor: COBALT, title: ` label — ${editing.harness} ${editing.id.slice(0, 8)} `, titleAlignment: "left", backgroundColor: "transparent", height: 3, flexShrink: 0, children: _jsx("input", { focused: true, value: editing.label ?? "", placeholder: "a few words for what this session is doing (empty clears)", backgroundColor: "transparent", focusedBackgroundColor: "transparent", textColor: INK, focusedTextColor: INK, placeholderColor: FAINT, cursorColor: INK, flexGrow: 1, onSubmit: (value) => {
                         if (typeof value === "string")
-                            void submitRename(editing, value);
-                    } }) })), _jsx(StatusLine, { busy: busy, busyStarted: busyStarted, status: status }), _jsx("text", { height: 1, fg: FAINT, bg: "transparent", children: editing === null ? footerText : " enter save · esc cancel" })] }));
+                            submitRename(editing, value);
+                    } }) })) : showDetail ? (_jsx(Pane, { title: detailTitle, focused: false, height: 6, children: _jsx(SessionDetail, { item: selectedSession }) })) : null, _jsx(StatusLine, { busy: busy, busyStarted: busyStarted, status: status }), _jsx("text", { height: 1, fg: FAINT, bg: "transparent", children: footerText })] }));
 };
 // ─── entry ──────────────────────────────────────────────────────────────────
 export const runDashboard = async (ctx) => {
     const renderer = await createCliRenderer({ exitOnCtrlC: false });
-    renderer.setBackgroundColor(BG);
     const queryClient = new QueryClient();
     const controller = new AbortController();
     let eventTimer = null;
@@ -531,14 +618,33 @@ export const runDashboard = async (ctx) => {
         // ^[[..;..:.u key-release sequences.
         process.nextTick(() => renderer.destroy());
     };
-    // The SSE stream invalidates the cache from outside React — any traffic
-    // (heartbeats included) means state may have moved, so re-read it.
-    const scheduleInvalidate = () => {
-        if (eventTimer !== null)
-            clearTimeout(eventTimer);
-        eventTimer = setTimeout(() => {
-            void queryClient.invalidateQueries();
-        }, 250);
+    // The SSE stream invalidates the cache from outside React. Frames are
+    // parsed and each pointer event stales only its query families — the
+    // 25-second heartbeat and per-record-line progress invalidate nothing, so
+    // an idle dashboard makes no requests and a busy session doesn't turn push
+    // into a refetch loop. The flush waits out in-flight mutations: their
+    // onSettled refetch converges on the same truth without a mid-write
+    // snapshot clobbering an optimistic row.
+    const pendingFamilies = new Set();
+    const flushInvalidations = () => {
+        eventTimer = null;
+        if (queryClient.isMutating() > 0) {
+            eventTimer = setTimeout(flushInvalidations, 250);
+            return;
+        }
+        const families = [...pendingFamilies];
+        pendingFamilies.clear();
+        for (const family of families) {
+            void queryClient.invalidateQueries({ queryKey: [family] });
+        }
+    };
+    const scheduleInvalidate = (families) => {
+        if (families.length === 0)
+            return;
+        for (const family of families)
+            pendingFamilies.add(family);
+        if (eventTimer === null)
+            eventTimer = setTimeout(flushInvalidations, 250);
     };
     const watch = async () => {
         while (!controller.signal.aborted) {
@@ -553,17 +659,26 @@ export const runDashboard = async (ctx) => {
                 if (!response.ok || response.body === null)
                     throw new Error(String(response.status));
                 const reader = response.body.getReader();
+                const parser = createSseParser();
+                const decoder = new TextDecoder();
                 for (;;) {
-                    const { done } = await reader.read();
+                    const { done, value } = await reader.read();
                     if (done)
                         break;
-                    scheduleInvalidate();
+                    for (const payload of parser.push(decoder.decode(value, { stream: true }))) {
+                        scheduleInvalidate(eventFamilies(payload));
+                    }
                 }
             }
             catch {
                 if (controller.signal.aborted)
                     return;
             }
+            // A dropped stream may have swallowed events — re-read once on reconnect.
+            pendingFamilies.add("workbench").add("review");
+            if (eventTimer === null && !controller.signal.aborted) {
+                eventTimer = setTimeout(flushInvalidations, 250);
+            }
             await new Promise((resolve) => setTimeout(resolve, 2000));
         }
     };