@smithers-orchestrator/cli 0.16.0

package/src/tree.js

@@ -0,0 +1,307 @@
+// @smithers-type-exports-begin
+/** @typedef {import("./TreeRenderOptions.ts").TreeRenderOptions} TreeRenderOptions */
+/** @typedef {import("./RunTreeCommandInput.ts").RunTreeCommandInput} RunTreeCommandInput */
+/** @typedef {import("./RunTreeCommandResult.ts").RunTreeCommandResult} RunTreeCommandResult */
+// @smithers-type-exports-end
+
+import pc from "picocolors";
+import { getDevToolsSnapshotRoute, DevToolsRouteError } from "@smithers-orchestrator/server/gatewayRoutes/getDevToolsSnapshot";
+import { streamDevToolsRoute } from "@smithers-orchestrator/server/gatewayRoutes/streamDevTools";
+import { applyDelta } from "@smithers-orchestrator/devtools";
+import { EXIT_OK, EXIT_USER_ERROR, EXIT_SERVER_ERROR, EXIT_SIGINT } from "./util/exitCodes.js";
+import { formatCliErrorForStderr, getCliErrorMapping } from "./util/errorMessage.js";
+
+export const TREE_INDENT = "  ";
+
+/** @param {boolean} color */
+function colors(color) {
+    return color ? pc.createColors(true) : pc.createColors(false);
+}
+
+/**
+ * @param {unknown} value
+ * @returns {string}
+ */
+function renderAttr(value) {
+    if (value === null || value === undefined) return "";
+    if (typeof value === "string") return JSON.stringify(value);
+    if (typeof value === "number" || typeof value === "boolean") return JSON.stringify(value);
+    try {
+        return JSON.stringify(value);
+    } catch {
+        return '"[unserializable]"';
+    }
+}
+
+/**
+ * @param {import("@smithers-orchestrator/protocol/devtools").DevToolsNode} node
+ * @param {boolean} useColor
+ */
+function renderOpenTag(node, useColor) {
+    const c = colors(useColor);
+    const parts = [c.cyan(`<${node.type}`)];
+    if (node.name) {
+        parts.push(` ${c.yellow("name")}=${c.green(renderAttr(node.name))}`);
+    }
+    if (node.task?.nodeId) {
+        parts.push(` ${c.yellow("nodeId")}=${c.green(renderAttr(node.task.nodeId))}`);
+        if (node.task.kind) {
+            parts.push(` ${c.yellow("kind")}=${c.green(renderAttr(node.task.kind))}`);
+        }
+        if (node.task.agent) {
+            parts.push(` ${c.yellow("agent")}=${c.green(renderAttr(node.task.agent))}`);
+        }
+        if (typeof node.task.iteration === "number") {
+            parts.push(` ${c.yellow("iter")}=${c.magenta(String(node.task.iteration))}`);
+        }
+    }
+    for (const [key, value] of Object.entries(node.props ?? {})) {
+        // Keep props short; skip nested objects to avoid multi-line blowouts.
+        if (value === null || value === undefined) continue;
+        if (typeof value === "object") continue;
+        parts.push(` ${c.yellow(key)}=${c.green(renderAttr(value))}`);
+    }
+    parts.push(c.cyan(">"));
+    return parts.join("");
+}
+
+/** @param {import("@smithers-orchestrator/protocol/devtools").DevToolsNode} node @param {boolean} useColor */
+function renderCloseTag(node, useColor) {
+    const c = colors(useColor);
+    return c.cyan(`</${node.type}>`);
+}
+
+/** @param {import("@smithers-orchestrator/protocol/devtools").DevToolsNode} node @param {string} id */
+function findNode(node, id) {
+    if (node.task?.nodeId === id) return node;
+    if (typeof node.name === "string" && node.name === id) return node;
+    for (const child of node.children ?? []) {
+        const hit = findNode(child, id);
+        if (hit) return hit;
+    }
+    return null;
+}
+
+/**
+ * @param {import("@smithers-orchestrator/protocol/devtools").DevToolsNode} root
+ * @param {string} nodeId
+ * @returns {import("@smithers-orchestrator/protocol/devtools").DevToolsNode | null}
+ */
+export function selectSubtree(root, nodeId) {
+    return findNode(root, nodeId);
+}
+
+/**
+ * @param {import("@smithers-orchestrator/protocol/devtools").DevToolsSnapshot} snapshot
+ * @param {TreeRenderOptions} [options]
+ * @returns {string}
+ */
+export function renderDevToolsTree(snapshot, options) {
+    const useColor = Boolean(options?.color);
+    const depthLimit = options?.depth;
+    const selected = options?.nodeId ? selectSubtree(snapshot.root, options.nodeId) : snapshot.root;
+    if (!selected) {
+        return "";
+    }
+    /** @type {string[]} */
+    const lines = [];
+    /**
+     * @param {import("@smithers-orchestrator/protocol/devtools").DevToolsNode} node
+     * @param {number} indent
+     */
+    const walk = (node, indent) => {
+        const pad = TREE_INDENT.repeat(indent);
+        const children = node.children ?? [];
+        const atLimit = typeof depthLimit === "number" && indent + 1 >= depthLimit;
+        if (children.length === 0 || atLimit) {
+            if (children.length > 0 && atLimit) {
+                const opened = renderOpenTag(node, useColor);
+                const trunc = useColor ? pc.dim(`...${children.length} hidden...`) : `...${children.length} hidden...`;
+                lines.push(`${pad}${opened}${trunc}${renderCloseTag(node, useColor)}`);
+            } else {
+                lines.push(`${pad}${renderOpenTag(node, useColor)}${renderCloseTag(node, useColor)}`);
+            }
+            return;
+        }
+        lines.push(`${pad}${renderOpenTag(node, useColor)}`);
+        for (const child of children) {
+            walk(child, indent + 1);
+        }
+        lines.push(`${pad}${renderCloseTag(node, useColor)}`);
+    };
+    walk(selected, 0);
+    return lines.join("\n");
+}
+
+/**
+ * @param {RunTreeCommandInput} input
+ * @returns {Promise<RunTreeCommandResult>}
+ */
+export async function runTreeOnce(input) {
+    try {
+        const snapshot = await getDevToolsSnapshotRoute({
+            adapter: input.adapter,
+            runId: input.runId,
+            frameNo: input.frameNo,
+        });
+        if (input.json) {
+            input.stdout.write(`${JSON.stringify(snapshot)}\n`);
+            return { exitCode: EXIT_OK };
+        }
+        const rendered = renderDevToolsTree(snapshot, {
+            depth: input.depth,
+            nodeId: input.node,
+            color: input.color,
+        });
+        if (input.node && rendered.length === 0) {
+            input.stderr.write(`${formatCliErrorForStderr("NodeNotFound", `Node not found in tree: ${input.node}`)}\n`);
+            return { exitCode: EXIT_USER_ERROR };
+        }
+        input.stdout.write(`${rendered}\n`);
+        return { exitCode: EXIT_OK };
+    } catch (err) {
+        const code = err instanceof DevToolsRouteError ? err.code : undefined;
+        input.stderr.write(`${formatCliErrorForStderr(code, err instanceof Error ? err.message : String(err))}\n`);
+        const mapping = getCliErrorMapping(code, err instanceof Error ? err.message : undefined);
+        return { exitCode: mapping.exitCode };
+    }
+}
+
+// Finding #8: fatal codes that should terminate the watch instead of
+// triggering a reconnect. InvalidRunId/FrameOutOfRange/Unauthorized won't
+// self-heal by reconnecting; BackpressureDisconnect also signals a
+// consumer-side problem we should not hammer the server over.
+const WATCH_FATAL_CODES = new Set([
+    "InvalidRunId",
+    "FrameOutOfRange",
+    "Unauthorized",
+    "BackpressureDisconnect",
+]);
+
+// Exponential backoff bounds. Kept small so `--watch` feels responsive
+// on transient server restarts but doesn't busy-loop.
+const WATCH_RECONNECT_BACKOFF_MS = [200, 500, 1000, 2000, 5000];
+
+/** @param {number} attempt */
+function backoffMs(attempt) {
+    const idx = Math.min(attempt, WATCH_RECONNECT_BACKOFF_MS.length - 1);
+    return WATCH_RECONNECT_BACKOFF_MS[idx];
+}
+
+/** @param {RunTreeCommandInput} input @returns {Promise<RunTreeCommandResult>} */
+export async function runTreeWatch(input) {
+    const renderOpts = {
+        depth: input.depth,
+        nodeId: input.node,
+        color: input.color,
+    };
+    /** @type {import("@smithers-orchestrator/protocol/devtools").DevToolsSnapshot | null} */
+    let snapshot = null;
+    /** @type {number | undefined} */
+    let lastDeliveredSeq;
+    /** @param {import("@smithers-orchestrator/protocol/devtools").DevToolsSnapshot} snap */
+    const emit = (snap) => {
+        lastDeliveredSeq = snap.seq;
+        if (input.json) {
+            input.stdout.write(`${JSON.stringify(snap)}\n`);
+            return;
+        }
+        input.stdout.write(`${renderDevToolsTree(snap, renderOpts)}\n`);
+    };
+    // Internal controller so we can exit cleanly on SIGINT.
+    const internalAbort = new AbortController();
+    const onAbort = () => internalAbort.abort();
+    if (input.abortSignal) {
+        if (input.abortSignal.aborted) internalAbort.abort();
+        else input.abortSignal.addEventListener("abort", onAbort, { once: true });
+    }
+    let attempt = 0;
+    try {
+        // Finding #8: reconnect loop. On stream error, retry with
+        // `fromSeq` so we pick up where we left off. SeqOutOfRange is
+        // recoverable (server re-bases from a fresh snapshot), so we
+        // treat it as a retryable reconnect, not a fatal error.
+        while (!internalAbort.signal.aborted) {
+            try {
+                const iterator = streamDevToolsRoute({
+                    adapter: input.adapter,
+                    runId: input.runId,
+                    signal: internalAbort.signal,
+                    ...(lastDeliveredSeq !== undefined ? { fromSeq: lastDeliveredSeq } : undefined),
+                });
+                for await (const event of iterator) {
+                    if (internalAbort.signal.aborted) break;
+                    if (event.kind === "snapshot") {
+                        snapshot = event.snapshot;
+                        emit(snapshot);
+                        attempt = 0;
+                    } else if (event.kind === "delta" && snapshot) {
+                        try {
+                            const nextRoot = applyDelta(snapshot.root, event.delta);
+                            snapshot = { ...snapshot, root: nextRoot, seq: event.delta.seq };
+                            emit(snapshot);
+                            attempt = 0;
+                        } catch (err) {
+                            input.stderr.write(`${formatCliErrorForStderr("InvalidDelta", err instanceof Error ? err.message : String(err))}\n`);
+                            return { exitCode: EXIT_SERVER_ERROR };
+                        }
+                    }
+                }
+                // Iterator ended cleanly.
+                if (internalAbort.signal.aborted) {
+                    return { exitCode: EXIT_SIGINT };
+                }
+                return { exitCode: EXIT_OK };
+            } catch (err) {
+                if (internalAbort.signal.aborted) {
+                    return { exitCode: EXIT_SIGINT };
+                }
+                const code = err instanceof DevToolsRouteError ? err.code : undefined;
+                if (code && WATCH_FATAL_CODES.has(code)) {
+                    input.stderr.write(`${formatCliErrorForStderr(code, err instanceof Error ? err.message : String(err))}\n`);
+                    const mapping = getCliErrorMapping(code, err instanceof Error ? err.message : undefined);
+                    return { exitCode: mapping.exitCode };
+                }
+                // SeqOutOfRange → re-subscribe without fromSeq so server
+                // re-bases from a fresh snapshot.
+                if (code === "SeqOutOfRange") {
+                    input.stderr.write(`[watch] server reported SeqOutOfRange; rebasing from latest snapshot\n`);
+                    lastDeliveredSeq = undefined;
+                }
+                attempt += 1;
+                const delay = backoffMs(attempt);
+                const reason = err instanceof Error ? err.message : String(err);
+                input.stderr.write(`[watch] stream error (${code ?? "unknown"}): ${reason}; reconnecting in ${delay}ms (attempt ${attempt})\n`);
+                await sleep(delay, internalAbort.signal);
+                if (internalAbort.signal.aborted) {
+                    return { exitCode: EXIT_SIGINT };
+                }
+            }
+        }
+        return { exitCode: EXIT_SIGINT };
+    } finally {
+        if (input.abortSignal) {
+            input.abortSignal.removeEventListener?.("abort", onAbort);
+        }
+    }
+}
+
+/**
+ * @param {number} ms
+ * @param {AbortSignal} signal
+ * @returns {Promise<void>}
+ */
+function sleep(ms, signal) {
+    return new Promise((resolve) => {
+        if (signal.aborted) return resolve();
+        const timer = setTimeout(() => {
+            signal.removeEventListener?.("abort", onAbort);
+            resolve();
+        }, ms);
+        const onAbort = () => {
+            clearTimeout(timer);
+            resolve();
+        };
+        signal.addEventListener?.("abort", onAbort, { once: true });
+    });
+}

package/src/tui/app.jsx

@@ -0,0 +1,139 @@
+// @ts-nocheck
+import React, { useEffect, useState } from "react";
+import { useKeyboard } from "@opentui/react";
+import { RunsList } from "./components/RunsList.jsx";
+import { WorkflowLauncher } from "./components/WorkflowLauncher.jsx";
+import { RunDetailView } from "./components/RunDetailView.jsx";
+import { NodeDetailView } from "./components/NodeDetailView.jsx";
+import { AskModal } from "./components/AskModal.jsx";
+import { SqliteBrowser } from "./components/SqliteBrowser.jsx";
+import { CronList } from "./components/CronList.jsx";
+import { MetricsPane } from "./components/MetricsPane.jsx";
+/** @typedef {import("@smithers-orchestrator/db/adapter").SmithersDb} SmithersDb */
+
+const TABS = [
+    { id: "runs", label: "Runs", access: "r" },
+    { id: "ask", label: "Agent Console", access: "a" },
+    { id: "crons", label: "Triggers", access: "t" },
+    { id: "metrics", label: "Telemetry", access: "m" },
+    { id: "sqlite", label: "Data Grid", access: "s" },
+];
+/**
+ * @param {{ adapter: SmithersDb; onExit: () => void; }} value
+ */
+export function TuiApp({ adapter, onExit, }) {
+    const [view, setView] = useState("runs");
+    const [selectedRunId, setSelectedRunId] = useState(null);
+    const [selectedNodeId, setSelectedNodeId] = useState(null);
+    const activeTabId = (view === "detail" || view === "node" || view === "launcher") ? "runs" : view;
+    useKeyboard(async (key) => {
+        // Tab switching
+        if (key.name === "left" || key.name === "right") {
+            // only accept left/right at the root view so we don't clobber text inputs
+            if (view === "runs" || view === "crons" || view === "metrics") {
+                const currentIndex = TABS.findIndex((t) => t.id === activeTabId);
+                if (key.name === "right") {
+                    const next = TABS[(currentIndex + 1) % TABS.length];
+                    setView(next.id);
+                }
+                else {
+                    const prev = TABS[(currentIndex - 1 + TABS.length) % TABS.length];
+                    setView(prev.id);
+                }
+                return;
+            }
+        }
+        if (key.name === "s" && view !== "sqlite" && view !== "ask") {
+            setView("sqlite");
+            return;
+        }
+        if (key.name === "t" && view !== "crons" && view !== "ask") {
+            setView("crons");
+            return;
+        }
+        if (key.name === "m" && view !== "metrics" && view !== "ask") {
+            setView("metrics");
+            return;
+        }
+        if (view === "runs") {
+            if (key.name === "escape" || (key.name === "c" && key.ctrl)) {
+                onExit();
+            }
+            if (key.name === "n") {
+                setView("launcher");
+            }
+            if (key.name === "a") {
+                setView("ask");
+            }
+        }
+        else if (view === "detail") {
+            if (key.name === "escape") {
+                setView("runs");
+            }
+            else if (key.name === "c" && key.ctrl) {
+                onExit();
+            }
+        }
+        else if (view === "node") {
+            if (key.name === "escape") {
+                setView("detail");
+            }
+            else if (key.name === "c" && key.ctrl) {
+                onExit();
+            }
+        }
+        else if (view === "launcher") {
+            if (key.name === "escape") {
+                setView("runs");
+            }
+            else if (key.name === "c" && key.ctrl) {
+                onExit();
+            }
+        }
+        else if (view === "ask") {
+            if (key.name === "escape") {
+                setView("runs");
+            }
+            else if (key.name === "c" && key.ctrl) {
+                onExit();
+            }
+        }
+    });
+    return (<box style={{ flexGrow: 1, width: "100%", height: "100%", flexDirection: "column" }}>
+      {/* Global Tab Header */}
+      <box style={{ width: "100%", height: 3, borderBottom: true, borderColor: "gray", flexDirection: "row", paddingLeft: 1 }}>
+        {TABS.map((tab) => {
+            const isActive = activeTabId === tab.id;
+            return (<text key={tab.id} style={{ color: isActive ? "#a7f3d0" : "gray", marginRight: 3 }}>
+              {isActive ? "▶ " : "  "}[{tab.access.toUpperCase()}] {tab.label}
+            </text>);
+        })}
+      </box>
+
+      {view === "runs" && (<box style={{ flexGrow: 1, width: "100%", height: "100%", border: true, borderColor: "#34d399", flexDirection: "column" }} title="Smithers Runs - [Enter] View Details | [N] New Run | [Esc] Exit">
+          <RunsList adapter={adapter} focused={view === "runs"} onChange={setSelectedRunId} onSubmit={(runId) => {
+                setSelectedRunId(runId);
+                setView("detail");
+            }}/>
+        </box>)}
+
+      {view === "detail" && selectedRunId && (<RunDetailView adapter={adapter} runId={selectedRunId} onBack={() => setView("runs")} onSelectNode={(nodeId) => {
+                setSelectedNodeId(nodeId);
+                setView("node");
+            }}/>)}
+
+      {view === "node" && selectedRunId && (<NodeDetailView adapter={adapter} runId={selectedRunId} nodeId={selectedNodeId} onBack={() => setView("detail")}/>)}
+
+      {view === "launcher" && (<WorkflowLauncher onClose={() => setView("runs")}/>)}
+      {view === "ask" && (<AskModal onClose={() => setView("runs")}/>)}
+      {view === "sqlite" && (<box style={{ flexGrow: 1, width: "100%", height: "100%", border: true, borderColor: "#34d399", flexDirection: "column" }} title="Smithers DB - [Esc] Return to Runs | [Tab] Switch Panes | [Up/Down] Query Table">
+          <SqliteBrowser adapter={adapter} onBack={() => setView("runs")}/>
+        </box>)}
+      {view === "crons" && (<box style={{ flexGrow: 1, width: "100%", height: "100%", border: true, borderColor: "#34d399", flexDirection: "column" }} title="Smithers Schedule Triggers - [Esc] Return to Runs | [Up/Down] Select | [Del] Remove">
+          <CronList adapter={adapter} onBack={() => setView("runs")}/>
+        </box>)}
+      {view === "metrics" && (<box style={{ flexGrow: 1, width: "100%", height: "100%", border: true, borderColor: "#34d399", flexDirection: "column" }} title="Smithers Telemetry (Prometheus Rollup) - [Esc] Return to Runs">
+          <MetricsPane adapter={adapter} onBack={() => setView("runs")}/>
+        </box>)}
+    </box>);
+}

package/src/tui/app.tsx

@@ -0,0 +1,5 @@
+import type { SmithersDb } from "@smithers-orchestrator/db/adapter";
+export declare function TuiApp({ adapter, onExit, }: {
+    adapter: SmithersDb;
+    onExit: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/src/tui/components/AskModal.jsx

@@ -0,0 +1,109 @@
+// @ts-nocheck
+import React, { useState, useEffect } from "react";
+import { useKeyboard } from "@opentui/react";
+/**
+ * @param {{ onClose: () => void }} value
+ */
+export function AskModal({ onClose }) {
+    const [question, setQuestion] = useState("");
+    const [answer, setAnswer] = useState("");
+    const [status, setStatus] = useState("input");
+    useKeyboard((key) => {
+        if (key.name === "escape" || (key.name === "c" && key.ctrl)) {
+            if (status !== "streaming") { // Or allow cancel mid-stream if we kill the proc? Keep simple for now
+                onClose();
+                return;
+            }
+        }
+        if (status === "input") {
+            if (key.name === "backspace") {
+                setQuestion((q) => q.slice(0, -1));
+                return;
+            }
+            if (key.name === "enter" || key.name === "return") {
+                if (question.trim().length > 0) {
+                    startAsk();
+                }
+                return;
+            }
+            // Basic typing capture (sequence is the literal ansi char)
+            if (!key.ctrl && !key.meta && key.sequence && key.sequence.length === 1 && key.name !== "up" && key.name !== "down" && key.name !== "left" && key.name !== "right") {
+                setQuestion((q) => q + key.sequence);
+            }
+        }
+    });
+    async function startAsk() {
+        setStatus("streaming");
+        setAnswer("");
+        try {
+            const proc = Bun.spawn(["bun", "run", "src/index.js", "ask", question], {
+                stdout: "pipe",
+                stderr: "pipe",
+            });
+            // Stream stdout async
+            (async () => {
+                try {
+                    const stream = proc.stdout;
+                    const reader = stream.getReader();
+                    const decoder = new TextDecoder();
+                    while (true) {
+                        const { done, value } = await reader.read();
+                        if (done)
+                            break;
+                        const text = decoder.decode(value);
+                        setAnswer((a) => a + text);
+                    }
+                }
+                catch { }
+            })();
+            // Stream stderr async (in case the agent prints progress or errors there)
+            (async () => {
+                try {
+                    const stream = proc.stderr;
+                    const reader = stream.getReader();
+                    const decoder = new TextDecoder();
+                    while (true) {
+                        const { done, value } = await reader.read();
+                        if (done)
+                            break;
+                        const text = decoder.decode(value);
+                        setAnswer((a) => a + text);
+                    }
+                }
+                catch { }
+            })();
+            await proc.exited;
+            if (proc.exitCode !== 0 && answer.trim().length === 0) {
+                setAnswer("Failed to run ask command. Is your agent installed?");
+                setStatus("error");
+            }
+            else {
+                setStatus("done");
+            }
+        }
+        catch (err) {
+            setAnswer(`Spawn error: ${err.message}`);
+            setStatus("error");
+        }
+    }
+    // Auto scroll logic in OpenTUI: scrollboxes generally stay at the top unless navigated? 
+    // For streaming, we'll just append text.
+    return (<box style={{
+            flexGrow: 1,
+            width: "100%",
+            height: "100%",
+            border: true,
+            borderColor: "magenta",
+            flexDirection: "column",
+        }} title={`Ask Smithers ${status === "input" ? "[Type Question, Enter to Submit, Esc to Close]" : "[Streaming... Esc to Close]"}`}>
+      {status === "input" ? (<box style={{ flexDirection: "column", paddingLeft: 1, paddingTop: 1 }}>
+          <text style={{ color: "cyan" }}>What would you like to know about the Smithers orchestrator?</text>
+          <text style={{ color: "white", marginTop: 1 }}>{"> "}{question}█</text>
+        </box>) : (<scrollbox style={{ width: "100%", height: "100%", flexDirection: "column", paddingLeft: 1 }}>
+          <text style={{ color: "cyan", marginBottom: 1 }}>Q: {question}</text>
+          <text style={{ color: "white" }}>{answer}</text>
+          {status === "done" && <text style={{ color: "green", marginTop: 1 }}>[ Agent finished. Press Esc to close. ]</text>}
+          {status === "error" && <text style={{ color: "red", marginTop: 1 }}>[ Agent failed. Press Esc to close. ]</text>}
+        </scrollbox>)}
+    </box>);
+}

package/src/tui/components/AskModal.tsx

@@ -0,0 +1,3 @@
+export declare function AskModal({ onClose }: {
+    onClose: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/src/tui/components/AttentionPane.jsx

@@ -0,0 +1,112 @@
+// @ts-nocheck
+import React, { useEffect, useState, useCallback } from "react";
+import { useKeyboard } from "@opentui/react";
+import { formatAge } from "../../format.js";
+/** @typedef {import("@smithers-orchestrator/db/adapter").SmithersDb} SmithersDb */
+
+/**
+ * @param {{ adapter: SmithersDb; focused: boolean; onSelectRun?: (runId: string) => void; }} value
+ */
+export function AttentionPane({ adapter, focused, onSelectRun, }) {
+    const [items, setItems] = useState([]);
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    useEffect(() => {
+        let mounted = true;
+        async function poll() {
+            if (!mounted)
+                return;
+            try {
+                const result = [];
+                // Active alerts
+                const alerts = await adapter.listAlerts(100, ["firing", "acknowledged"]);
+                for (const alert of alerts) {
+                    result.push({
+                        kind: "alert",
+                        id: alert.alertId,
+                        severity: alert.severity,
+                        status: alert.status,
+                        runId: alert.runId ?? null,
+                        nodeId: alert.nodeId ?? null,
+                        message: alert.message,
+                        firedAtMs: alert.firedAtMs ?? null,
+                    });
+                }
+                // Pending approvals
+                const runs = await adapter.listRuns(100);
+                for (const run of runs) {
+                    const pending = await adapter.listPendingApprovals(run.runId);
+                    for (const ap of pending) {
+                        result.push({
+                            kind: "approval",
+                            id: `${ap.runId}:${ap.nodeId}:${ap.iteration ?? 0}`,
+                            severity: "info",
+                            status: "pending",
+                            runId: ap.runId,
+                            nodeId: ap.nodeId,
+                            message: ap.note ?? `Approval for ${ap.nodeId}`,
+                            firedAtMs: ap.requestedAtMs ?? null,
+                        });
+                    }
+                }
+                // Sort: critical first, then warning, then info
+                const order = { critical: 0, warning: 1, info: 2 };
+                result.sort((a, b) => (order[a.severity] ?? 3) - (order[b.severity] ?? 3));
+                if (mounted)
+                    setItems(result);
+            }
+            catch { }
+            if (mounted)
+                setTimeout(poll, 2000);
+        }
+        poll();
+        return () => { mounted = false; };
+    }, [adapter]);
+    const selected = items[selectedIndex];
+    useKeyboard(focused, useCallback((key) => {
+        if (key === "up" || key === "k") {
+            setSelectedIndex((i) => Math.max(0, i - 1));
+        }
+        else if (key === "down" || key === "j") {
+            setSelectedIndex((i) => Math.min(items.length - 1, i + 1));
+        }
+        else if (key === "a" && selected?.kind === "alert" && selected.status === "firing") {
+            // Ack
+            void adapter.acknowledgeAlert(selected.id, Date.now());
+        }
+        else if (key === "r" && selected?.kind === "alert") {
+            // Resolve
+            void adapter.resolveAlert(selected.id, Date.now());
+        }
+        else if (key === "s" && selected?.kind === "alert") {
+            // Silence for 1h
+            void adapter.silenceAlert(selected.id, Date.now() + 3_600_000);
+        }
+        else if (key === "enter" && selected?.runId && onSelectRun) {
+            onSelectRun(selected.runId);
+        }
+    }, [items, selectedIndex, selected, adapter, onSelectRun]));
+    const severityCounts = {
+        critical: items.filter((i) => i.severity === "critical").length,
+        warning: items.filter((i) => i.severity === "warning").length,
+        info: items.filter((i) => i.severity === "info").length,
+    };
+    const header = [
+        `Attention (${items.length})`,
+        severityCounts.critical > 0 ? ` 🔴${severityCounts.critical}` : "",
+        severityCounts.warning > 0 ? ` 🟡${severityCounts.warning}` : "",
+        severityCounts.info > 0 ? ` 🔵${severityCounts.info}` : "",
+    ].join("");
+    return (<box flexDirection="column">
+      <text bold>{header}</text>
+      <text dimColor>  [a]ck  [r]esolve  [s]ilence  [Enter] open run</text>
+      {items.length === 0 ? (<text dimColor>  All clear — no attention items.</text>) : (items.map((item, i) => {
+            const isSelected = i === selectedIndex && focused;
+            const sev = item.severity === "critical" ? "🔴" : item.severity === "warning" ? "🟡" : "🔵";
+            const age = item.firedAtMs ? formatAge(item.firedAtMs) : "";
+            const prefix = isSelected ? "▸ " : "  ";
+            return (<text key={item.id} inverse={isSelected}>
+              {prefix}{sev} [{item.kind}] {item.message} ({item.status}) {age}
+            </text>);
+        }))}
+    </box>);
+}