@sealant/mend 0.1.0 → 0.1.1

package/README.md

@@ -11,6 +11,12 @@ npm install -g @sealant/mend
 
 Requires Node 22+ and a running Mend server.
 
+Run bare `mend` for the interactive dashboard. Highlight a session and press `v` to review its
+accumulated change in the terminal: navigate files and hunks, switch between unified and split
+diffs, reveal whitespace, select line ranges, add line or whole-change comments, inspect linked
+evidence, and draft a follow-up for the same session. Press `y` to deliver a pending follow-up and
+relaunch that session, or `o` to continue the review in the web app.
+
 ## Commands
 
 ```
@@ -20,7 +26,9 @@ mend run -- <command...>              same, with an arbitrary command
 mend attach <session-id-prefix>       reattach this terminal to a running session
 mend continue [session-id]            resume a session with its pending review follow-up
 mend resume [session-id] [--with h]   rejoin a settled session (state restored; --with switches harness)
-mend status                           active sessions
+mend rejoin [session-id] [--harness h] attach if live, otherwise resume; newest live wins
+mend sessions [--all] [--project p] [--json]
+mend status                           active sessions (alias of mend sessions)
 ```
 
 ## Configuration
@@ -29,8 +37,17 @@ mend status                           active sessions
 | ------------------ | ------------------------------------------------- |
 | `MEND_URL`         | The Mend server (default `http://localhost:3105`) |
 | `MEND_TOKEN`       | Bearer token for that server                      |
+| `MEND_DETACH_KEY`  | Set to `none` when an outer multiplexer detaches  |
 | `~/.mend/cli.json` | `{ "url": ..., "token": ... }` — env vars win     |
 
+## Herdr
+
+When Mend attaches Codex, Claude Code, or OpenCode inside a Herdr pane, it reports that harness to
+Herdr for the lifetime of the attachment. The session therefore appears in Herdr's Agents sidebar
+whether it was started from the `mend` dashboard or a one-shot CLI command. Mend supplies Herdr's
+foreground-process hint rather than claiming lifecycle authority, so Herdr continues to derive
+working, idle, and blocked from its native agent screen rules.
+
 ## How it works
 
 Every session runs in its own git worktree over the adopted repository, inside a recorded workspace.
@@ -40,5 +57,6 @@ can reach the server. When a session settles, Mend harvests the harness's own st
 so `mend resume` restores it natively (a Claude session resumes with its memory intact, even across
 machines), and `--with` carries the conversation into a different harness.
 
-The reviewable object is the session's accumulated local change — worktree versus base — in the Mend
-web app, with the session record beside it. No issue tracker or pull request required.
+The reviewable object is the session's accumulated local change — worktree versus base — with the
+session record beside it. Review it in the terminal dashboard or the Mend web app. No issue tracker
+or pull request required.

package/dist/dashboard.js

@@ -0,0 +1,546 @@
+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 { useEffect, useRef, useState } from "react";
+import { reviewTargetForSession } from "./review-workflow.js";
+import { ReviewScreen } from "./review.js";
+import { HARNESS_COMMANDS, LIVE_STATUSES, matchProjectByCwd } 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: "○",
+};
+const STATUS_COLOR = {
+    starting: COBALT,
+    running: COBALT,
+    waiting: AMBER,
+    idle: COBALT,
+    completed: GREEN,
+    failed: RED,
+    stopped: FAINT,
+};
+const timeAgo = (iso) => {
+    const ms = Date.now() - new Date(iso).getTime();
+    if (!Number.isFinite(ms) || ms < 0)
+        return "";
+    const minutes = Math.floor(ms / 60_000);
+    if (minutes < 1)
+        return "just now";
+    if (minutes < 60)
+        return `${minutes}m ago`;
+    const hours = Math.floor(minutes / 60);
+    if (hours < 24)
+        return `${hours}h ago`;
+    return `${Math.floor(hours / 24)}d ago`;
+};
+const WORKBENCH_KEY = ["workbench"];
+const fetchWorkbench = async (ctx) => {
+    const projects = await ctx.api("GET", "/projects");
+    const fetched = await Promise.all(projects.map((project) => ctx.api("GET", `/projects/${project.id}`)));
+    return { projects, details: new Map(fetched.map((detail) => [detail.project.id, detail])) };
+};
+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, cwd);
+    return home === undefined ? { kind: "projects" } : { kind: "sessions", projectId: home.id };
+};
+const deriveItems = (view, data) => {
+    if (data === undefined)
+        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),
+        }));
+    }
+    const resuming = view.session;
+    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: "the conversation crosses as a distilled prompt",
+            })),
+        ];
+    }
+    return Object.keys(HARNESS_COMMANDS).map((harness) => ({
+        kind: "harness",
+        harness,
+        label: harness,
+        hint: `mend ${harness} — new worktree, recorded session`,
+    }));
+};
+// ─── rows: JSX spans instead of StyledText chunks ───────────────────────────
+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))) }));
+};
+const SessionRow = ({ item, selected, }) => {
+    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 }));
+    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 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 })] }) }));
+const StatusLine = ({ busy, busyStarted, status, }) => {
+    const [now, setNow] = useState(() => Date.now());
+    // Timers are the one thing React cannot express declaratively: a 1s tick
+    // while busy, and one repaint to clear an expired status message.
+    useEffect(() => {
+        if (busy !== null) {
+            const timer = setInterval(() => setNow(Date.now()), 1000);
+            return () => clearInterval(timer);
+        }
+        if (status !== null) {
+            const timer = setTimeout(() => setNow(Date.now()), 5100);
+            return () => clearTimeout(timer);
+        }
+        return undefined;
+    }, [busy, status]);
+    const text = busy !== null
+        ? ` ${busy} ${Math.max(0, Math.round((now - busyStarted) / 1000))}s`
+        : status !== null && Date.now() - status.at < 5000
+            ? ` ${status.text}`
+            : "";
+    return (_jsx("text", { height: 1, fg: AMBER, bg: "transparent", children: text }));
+};
+// ─── the app ────────────────────────────────────────────────────────────────
+const CHROME_ROWS = 7; // margin + header + margin + 2 borders + status + footer
+const App = ({ ctx, onQuit }) => {
+    const renderer = useRenderer();
+    const queryClient = useQueryClient();
+    const { data, failureReason } = useQuery({
+        queryKey: WORKBENCH_KEY,
+        queryFn: () => fetchWorkbench(ctx),
+        // A dev server mid-restart is normal: keep trying, once a second.
+        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 [busy, setBusy] = useState(null);
+    const [busyStarted, setBusyStarted] = useState(0);
+    const [status, setStatus] = useState(null);
+    const [editing, setEditing] = useState(null);
+    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;
+    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);
+    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);
+    };
+    const attachFlow = async (session) => {
+        const short = session.id.slice(0, 8);
+        lockRef.current = true;
+        renderer.suspend();
+        process.stdout.write(`\nattached · ${session.harness} · ${short} · detach: Ctrl+]\n\n`);
+        let outcome;
+        try {
+            outcome = await ctx.attachTty(session.id, session.harness);
+        }
+        catch (error) {
+            say(error instanceof Error ? error.message : String(error));
+            return;
+        }
+        finally {
+            renderer.resume();
+            lockRef.current = false;
+        }
+        say(outcome === "unavailable"
+            ? "attach unavailable — could not connect"
+            : outcome === "detached"
+                ? `detached — ${short} keeps running`
+                : `session settled · ${short}`);
+        refetch();
+    };
+    const startSession = async (projectId, harness) => {
+        const argv = HARNESS_COMMANDS[harness];
+        if (argv === undefined)
+            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,
+                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();
+    };
+    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 submitRename = async (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();
+    };
+    const moveSelection = (delta) => {
+        if (items.length === 0)
+            return;
+        const next = Math.max(0, Math.min(items.length - 1, selectedIndex + delta));
+        const item = items[next];
+        if (item !== undefined)
+            setSelectedKey(itemKey(item));
+    };
+    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);
+            }
+            else {
+                setView({ kind: "picker", projectId: view.projectId, session: item.session });
+            }
+            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);
+            }
+        }
+    };
+    /** `-`, 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)
+            return;
+        if (lockRef.current)
+            return;
+        if (key.ctrl && key.name === "c")
+            return onQuit();
+        if (editing !== null) {
+            // The input owns the keyboard; only escape leaves without saving.
+            if (key.name === "escape")
+                setEditing(null);
+            return;
+        }
+        switch (key.name) {
+            case "q":
+                return onQuit();
+            case "down":
+            case "j":
+                return moveSelection(1);
+            case "up":
+            case "k":
+                return moveSelection(-1);
+            case "return":
+            case "linefeed":
+            case "l":
+                return activate();
+            case "-":
+            case "backspace":
+            case "h":
+                return goUp();
+            case "escape":
+                if (view.kind === "picker")
+                    setView({ kind: "sessions", projectId: view.projectId });
+                return;
+            case "n":
+                if (view.kind === "sessions") {
+                    setView({ kind: "picker", projectId: view.projectId, session: null });
+                }
+                return;
+            case "e": {
+                const item = items[selectedIndex];
+                if (view.kind === "sessions" && item !== undefined && item.kind === "session") {
+                    setEditing(item.session);
+                }
+                return;
+            }
+            case "o": {
+                const item = items[selectedIndex];
+                if (item !== undefined && item.kind === "session") {
+                    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")
+                    return;
+                const target = reviewTargetForSession(item.session, item.annotation, detail?.project.name ?? "project");
+                if (target === null) {
+                    say("this session has no reviewable change yet");
+                    return;
+                }
+                setReviewing(target);
+                return;
+            }
+            case "r":
+                say("refreshing…");
+                refetch();
+                return;
+            default:
+                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";
+    }
+    const loadFailure = data === undefined && failureReason !== null
+        ? failureReason instanceof Error
+            ? failureReason.message
+            : String(failureReason)
+        : null;
+    if (reviewing !== null) {
+        return (_jsx(ReviewScreen, { ctx: ctx, projectName: reviewing.projectName, session: reviewing.session, changeId: reviewing.changeId, onBack: () => {
+                setReviewing(null);
+                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) => {
+                        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" })] }));
+};
+// ─── 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;
+    const quit = () => {
+        controller.abort();
+        if (eventTimer !== null)
+            clearTimeout(eventTimer);
+        // Drop cached queries so their gc/retry timers stop pinning the event loop.
+        queryClient.clear();
+        // The canonical opentui shutdown (its own exitOnCtrlC path does exactly
+        // this): destroy on the next tick and let the process end on its own. A
+        // process.exit() here would race destroy()'s deferred finalize — the
+        // kitty keyboard protocol stays pushed and the shell is left eating
+        // ^[[..;..:.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);
+    };
+    const watch = async () => {
+        while (!controller.signal.aborted) {
+            try {
+                const headers = {};
+                if (ctx.config.token !== null)
+                    headers["authorization"] = `Bearer ${ctx.config.token}`;
+                const response = await fetch(`${ctx.config.url}/api/events`, {
+                    headers,
+                    signal: controller.signal,
+                });
+                if (!response.ok || response.body === null)
+                    throw new Error(String(response.status));
+                const reader = response.body.getReader();
+                for (;;) {
+                    const { done } = await reader.read();
+                    if (done)
+                        break;
+                    scheduleInvalidate();
+                }
+            }
+            catch {
+                if (controller.signal.aborted)
+                    return;
+            }
+            await new Promise((resolve) => setTimeout(resolve, 2000));
+        }
+    };
+    void watch();
+    createRoot(renderer).render(_jsx(QueryClientProvider, { client: queryClient, children: _jsx(App, { ctx: ctx, onQuit: quit }) }));
+    // finalizeDestroy() emits DESTROY synchronously mid-teardown; this
+    // continuation is a microtask, so it runs after the terminal is fully
+    // restored. Settling here lets main()'s top-level await finish and the
+    // process exit 0 naturally — no process.exit, no unsettled-await code 13.
+    await new Promise((resolve) => {
+        renderer.once(CliRenderEvents.DESTROY, () => resolve());
+    });
+};