@smithers-orchestrator/cli 0.16.0

package/src/tui/components/AttentionPane.tsx

@@ -0,0 +1,6 @@
+import type { SmithersDb } from "@smithers-orchestrator/db/adapter";
+export declare function AttentionPane({ adapter, focused, onSelectRun, }: {
+    adapter: SmithersDb;
+    focused: boolean;
+    onSelectRun?: (runId: string) => void;
+}): import("react/jsx-runtime").JSX.Element;

package/src/tui/components/ChatPane.jsx

@@ -0,0 +1,57 @@
+// @ts-nocheck
+import React, { useEffect, useState } from "react";
+import { formatChatBlock, parseChatAttemptMeta, selectChatAttempts } from "../../chat.js";
+/** @typedef {import("@smithers-orchestrator/db/adapter").SmithersDb} SmithersDb */
+
+/**
+ * @param {{ adapter: SmithersDb; runId: string; focused: boolean; filterNodeId?: string; }} value
+ */
+export function ChatPane({ adapter, runId, focused, filterNodeId, }) {
+    const [chatLines, setChatLines] = useState([]);
+    useEffect(() => {
+        let mounted = true;
+        async function fetchChat() {
+            if (!mounted)
+                return;
+            try {
+                const attempts = await adapter.listAttemptsForRun(runId);
+                let lines = [];
+                for (const attempt of attempts) {
+                    if (filterNodeId && attempt.nodeId !== filterNodeId)
+                        continue;
+                    const meta = parseChatAttemptMeta(attempt.metaJson ?? "");
+                    if (!meta.prompt && !attempt.responseText)
+                        continue; // Skip empty attempts
+                    if (lines.length > 0)
+                        lines.push("");
+                    lines.push(`=== ${attempt.nodeId} (Attempt ${attempt.attempt}, Iteration ${attempt.iteration}) ===`);
+                    if (meta.prompt) {
+                        lines.push(`[USER]`);
+                        lines.push(...String(meta.prompt).trim().split("\n").map(l => `  ${l}`));
+                        lines.push("");
+                    }
+                    if (attempt.responseText) {
+                        lines.push(`[ASSISTANT]`);
+                        lines.push(...String(attempt.responseText).trim().split("\n").map(l => `  ${l}`));
+                    }
+                }
+                if (mounted) {
+                    setChatLines(lines);
+                }
+            }
+            catch (err) { }
+            if (mounted)
+                setTimeout(fetchChat, 1000);
+        }
+        fetchChat();
+        return () => {
+            mounted = false;
+        };
+    }, [adapter, runId]);
+    return (<scrollbox focused={focused} style={{ width: "100%", height: "100%", paddingLeft: 1, paddingRight: 1 }}>
+      <box flexDirection="column">
+        {chatLines.map((line, index) => (<text key={index}>{line}</text>))}
+        {chatLines.length === 0 && <text>No chat history available.</text>}
+      </box>
+    </scrollbox>);
+}

package/src/tui/components/ChatPane.tsx

@@ -0,0 +1,7 @@
+import type { SmithersDb } from "@smithers-orchestrator/db/adapter";
+export declare function ChatPane({ adapter, runId, focused, filterNodeId, }: {
+    adapter: SmithersDb;
+    runId: string;
+    focused: boolean;
+    filterNodeId?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/src/tui/components/CronList.jsx

@@ -0,0 +1,87 @@
+// @ts-nocheck
+import React, { useEffect, useState } from "react";
+import { useKeyboard } from "@opentui/react";
+import { formatAge } from "../../format.js";
+/** @typedef {import("@smithers-orchestrator/db/adapter").SmithersDb} SmithersDb */
+
+/**
+ * @param {{ adapter: SmithersDb; onBack: () => void; }} value
+ */
+export function CronList({ adapter, onBack, }) {
+    const [crons, setCrons] = useState([]);
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    useEffect(() => {
+        let mounted = true;
+        async function poll() {
+            try {
+                const jobs = await adapter.listCrons(false);
+                if (mounted)
+                    setCrons(jobs);
+            }
+            catch { }
+            if (mounted)
+                setTimeout(poll, 2000);
+        }
+        poll();
+        return () => { mounted = false; };
+    }, [adapter]);
+    useKeyboard(async (key) => {
+        if (key.name === "escape") {
+            onBack();
+            return;
+        }
+        if (crons.length > 0) {
+            if (key.name === "down" || key.name === "j") {
+                setSelectedIndex(Math.min(crons.length - 1, selectedIndex + 1));
+            }
+            else if (key.name === "up" || key.name === "k") {
+                setSelectedIndex(Math.max(0, selectedIndex - 1));
+            }
+            else if (key.name === "backspace" || key.name === "delete") {
+                const id = crons[selectedIndex].cronId;
+                await adapter.deleteCron(id);
+                const next = await adapter.listCrons(false);
+                setCrons(next);
+                setSelectedIndex(Math.max(0, Math.min(selectedIndex, next.length - 1)));
+            }
+        }
+    });
+    const selectedJob = crons[selectedIndex];
+    return (<box style={{ flexGrow: 1, width: "100%", height: "100%", flexDirection: "row" }}>
+      {/* Left List */}
+      <box style={{ width: 45, height: "100%", borderRight: true, borderColor: "#34d399", flexDirection: "column" }}>
+        <text style={{ color: "gray", marginBottom: 1 }}> Active Cron Triggers: {crons.length} </text>
+        {crons.map((c, i) => (<text key={c.cronId} style={{ color: i === selectedIndex ? "#a7f3d0" : "white" }}>
+            {i === selectedIndex ? "▶ " : "  "}{c.workflowPath.slice(0, 30)}
+          </text>))}
+      </box>
+      
+      {/* Right Details */}
+      <box style={{ flexGrow: 1, height: "100%", flexDirection: "column", paddingLeft: 1 }}>
+        {selectedJob ? (<box style={{ flexDirection: "column" }}>
+            <text style={{ color: "yellow" }}> Workflow: {selectedJob.workflowPath} </text>
+            <text style={{ color: "#93c5fd" }}> Setup: {selectedJob.pattern} </text>
+            <text style={{ color: "white", marginTop: 1 }}>
+              Status: {selectedJob.enabled ? "ACTIVE" : "PAUSED"}
+            </text>
+            <text style={{ color: "white" }}>
+              Registered: {formatAge(selectedJob.createdAtMs)}
+            </text>
+            <text style={{ color: "white" }}>
+              Last Pired: {selectedJob.lastRunAtMs ? formatAge(selectedJob.lastRunAtMs) : "Never"}
+            </text>
+            <text style={{ color: "cyan" }}>
+              Next Fire: {selectedJob.nextRunAtMs ? formatAge(selectedJob.nextRunAtMs) : "Pending"}
+            </text>
+
+            <box style={{ marginTop: 2, flexDirection: "column", borderTop: true, borderColor: "gray", paddingTop: 1 }}>
+               <text style={{ color: "red" }}>[Backspace] Kill Trigger</text>
+            </box>
+            
+            {selectedJob.errorJson && (<text style={{ color: "red", marginTop: 1 }}>
+                Last Error: {selectedJob.errorJson}
+              </text>)}
+          </box>) : (<text style={{ color: "gray" }}>No schedules found. Run `smithers cron add`.</text>)}
+      </box>
+    </box>);
+}

package/src/tui/components/CronList.tsx

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

package/src/tui/components/DetailsPane.jsx

@@ -0,0 +1,96 @@
+// @ts-nocheck
+import React, { useEffect, useState } from "react";
+import { useKeyboard } from "@opentui/react";
+/** @typedef {import("@smithers-orchestrator/db/adapter").SmithersDb} SmithersDb */
+
+/**
+ * @param {{ adapter: SmithersDb; runId: string; focused: boolean; onInspectNode?: (node: any) => void; }} value
+ */
+export function DetailsPane({ adapter, runId, focused, onInspectNode, }) {
+    const [nodes, setNodes] = useState([]);
+    const [runData, setRunData] = useState(null);
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    useEffect(() => {
+        let mounted = true;
+        let timeout;
+        async function fetchDetails() {
+            if (!mounted)
+                return;
+            try {
+                const run = await adapter.getRun(runId);
+                const fetchedNodes = await adapter.listNodes(runId);
+                if (mounted) {
+                    setRunData(run);
+                    setNodes(fetchedNodes);
+                    setSelectedIndex((prev) => Math.min(prev, Math.max(0, fetchedNodes.length - 1)));
+                }
+            }
+            catch (err) { }
+            if (mounted)
+                timeout = setTimeout(fetchDetails, 1000);
+        }
+        fetchDetails();
+        return () => {
+            mounted = false;
+            clearTimeout(timeout);
+        };
+    }, [adapter, runId]);
+    useKeyboard((key) => {
+        if (!focused)
+            return;
+        if (key.name === "down" || key.name === "j") {
+            setSelectedIndex((s) => Math.min(s + 1, Math.max(0, nodes.length - 1)));
+        }
+        if (key.name === "up" || key.name === "k") {
+            setSelectedIndex((s) => Math.max(0, s - 1));
+        }
+        if (key.name === "enter" || key.name === "return") {
+            if (nodes[selectedIndex] && onInspectNode) {
+                onInspectNode(nodes[selectedIndex]);
+            }
+        }
+    });
+    if (!runData) {
+        return <text style={{ margin: 1 }}>Loading details...</text>;
+    }
+    return (<scrollbox focused={focused} style={{ width: "100%", height: "100%", padding: 1 }}>
+      <box flexDirection="column">
+        <text>
+          <strong>Status:</strong>{" "}
+          <span fg={runData.status === "finished"
+            ? "green"
+            : runData.status === "failed"
+                ? "red"
+                : runData.status === "running"
+                    ? "#34d399"
+                    : "yellow"}>
+            {runData.status}
+          </span>
+        </text>
+        <text>
+          <strong>Input Payload:</strong>
+        </text>
+        <text>{runData.inputData ? runData.inputData.substring(0, 100) + "..." : "None"}</text>
+
+        {runData.outputData && (<>
+            <box style={{ height: 1 }}/>
+            <text>
+              <strong>Final Output:</strong>
+            </text>
+            <text>{runData.outputData.substring(0, 100) + "..."}</text>
+          </>)}
+
+        <box style={{ height: 1 }}/>
+        <text style={{ color: focused ? "yellow" : "white" }}>
+          <strong>Nodes [Press Enter on Node to Inspect]:</strong>
+        </text>
+        
+        {nodes.map((node, i) => {
+            const isSelected = focused && selectedIndex === i;
+            return (<text key={`${node.runId}-${node.nodeId}-${node.iteration}`} style={{ color: isSelected ? "green" : "white" }}>
+              {isSelected ? "▶ " : "  "}{node.nodeId}: {node.state} (Att: {node.attempts ?? 0}, Iter: {node.iteration})
+            </text>);
+        })}
+      </box>
+    </scrollbox>);
+}

package/src/tui/components/DetailsPane.tsx

@@ -0,0 +1,7 @@
+import type { SmithersDb } from "@smithers-orchestrator/db/adapter";
+export declare function DetailsPane({ adapter, runId, focused, onInspectNode, }: {
+    adapter: SmithersDb;
+    runId: string;
+    focused: boolean;
+    onInspectNode?: (node: any) => void;
+}): import("react/jsx-runtime").JSX.Element;

package/src/tui/components/FramesPane.jsx

@@ -0,0 +1,147 @@
+// @ts-nocheck
+import React, { useEffect, useState } from "react";
+import { useKeyboard } from "@opentui/react";
+/** @typedef {import("@smithers-orchestrator/db/adapter").SmithersDb} SmithersDb */
+
+/**
+ * @param {{ adapter: SmithersDb; runId: string; focused: boolean; filterNodeId?: string; nodeAttempt?: any; }} value
+ */
+export function FramesPane({ adapter, runId, focused, filterNodeId, nodeAttempt, }) {
+    const [frames, setFrames] = useState([]);
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    useEffect(() => {
+        let mounted = true;
+        async function fetchFrames() {
+            if (!mounted)
+                return;
+            try {
+                // limit(500) to ensure we get a chunk safely, reverse to ASCENDING chronological order
+                const data = await adapter.listFrames(runId, 500);
+                if (mounted && data.length > 0) {
+                    const ascData = data.slice().reverse();
+                    setFrames(ascData);
+                    if (frames.length === 0) {
+                        setSelectedIndex(ascData.length - 1); // default to newest frame (bottom)
+                    }
+                }
+            }
+            catch (err) { }
+            if (mounted)
+                setTimeout(fetchFrames, 2000); // Polling for live updates
+        }
+        fetchFrames();
+        return () => {
+            mounted = false;
+        };
+    }, [adapter, runId]);
+    let displayFrames = frames;
+    if (filterNodeId && nodeAttempt && frames.length > 0) {
+        const sMs = nodeAttempt.startedAtMs ?? 0;
+        const fMs = nodeAttempt.finishedAtMs;
+        const beforeF = frames.slice().reverse().find(f => f.createdAtMs <= sMs) || frames[0];
+        const afterF = fMs ? (frames.find(f => f.createdAtMs >= fMs) || frames[frames.length - 1]) : frames[frames.length - 1];
+        displayFrames = frames.map(f => {
+            if (f.frameNo === beforeF.frameNo && f.frameNo === afterF.frameNo) {
+                return { ...f, uiLabel: "Frame (Active)" };
+            }
+            if (f.frameNo === beforeF.frameNo)
+                return { ...f, uiLabel: "Frame (Before)" };
+            if (f.frameNo === afterF.frameNo)
+                return { ...f, uiLabel: "Frame (After)" };
+            return f;
+        });
+    }
+    useKeyboard((key) => {
+        if (!focused || displayFrames.length === 0)
+            return;
+        if (key.name === "up" || key.name === "k") {
+            setSelectedIndex((s) => Math.max(0, s - 1));
+        }
+        if (key.name === "down" || key.name === "j") {
+            setSelectedIndex((s) => Math.min(s + 1, displayFrames.length - 1));
+        }
+    });
+    if (displayFrames.length === 0) {
+        return <text style={{ paddingLeft: 1 }}>No frame history available...</text>;
+    }
+    // Bound check in case selectedIndex drifted
+    const validIndex = Math.max(0, Math.min(selectedIndex, displayFrames.length - 1));
+    const selectedFrame = displayFrames[validIndex];
+    // Recursive formatter to convert `xmlJson` into a JSX code block
+    /**
+   * @param {any} node
+   * @param {number} [indent]
+   * @returns {string}
+   */
+    function formatJsxNode(node, indent = 0) {
+        if (!node || typeof node !== "object")
+            return "";
+        const space = "  ".repeat(indent);
+        if (node.kind === "text") {
+            const escaped = String(node.text || "").replace(/\n/g, `\n${space}`);
+            return `${space}${escaped}`;
+        }
+        if (node.kind === "element" && typeof node.tag === "string") {
+            let propsStr = "";
+            if (node.props && typeof node.props === "object") {
+                for (const [k, v] of Object.entries(node.props)) {
+                    if (typeof v === "string")
+                        propsStr += ` ${k}="${v.replace(/"/g, '&quot;')}"`;
+                    else
+                        propsStr += ` ${k}={${JSON.stringify(v)}}`;
+                }
+            }
+            const tag = node.tag;
+            const isTargetNode = filterNodeId && node.props?.id === filterNodeId;
+            const colorPrefix = isTargetNode ? "👉 " : "";
+            if (!Array.isArray(node.children) || node.children.length === 0) {
+                return `${space}${colorPrefix}<${tag}${propsStr} />`;
+            }
+            let res = `${space}${colorPrefix}<${tag}${propsStr}>\n`;
+            for (const child of node.children) {
+                res += formatJsxNode(child, indent + 1) + "\n";
+            }
+            res += `${space}</${tag}>`;
+            return res;
+        }
+        // Fallback if neither text nor element
+        return `${space}${JSON.stringify(node)}`;
+    }
+    let xmlString = "Empty Frame";
+    try {
+        if (selectedFrame?.xmlJson) {
+            const parsed = typeof selectedFrame.xmlJson === "string" ? JSON.parse(selectedFrame.xmlJson) : selectedFrame.xmlJson;
+            xmlString = formatJsxNode(parsed);
+        }
+    }
+    catch (err) {
+        xmlString = `[Format Error: ${err?.message}]\n\n${selectedFrame?.xmlJson ?? "Parse error"}`;
+    }
+    return (<box style={{ flexGrow: 1, width: "100%", height: "100%", flexDirection: "row" }}>
+      {/* Left Sidebar: Frame List */}
+      <box style={{
+            width: 30,
+            height: "100%",
+            borderRight: true,
+            borderColor: "#34d399",
+            flexDirection: "column",
+        }} title={`Timeline [Up/Down]`}>
+        <scrollbox style={{ width: "100%", height: "100%", flexDirection: "column", paddingLeft: 1 }}>
+          {displayFrames.map((frame, i) => {
+            const isSelected = validIndex === i;
+            const label = frame.uiLabel ? `${frame.uiLabel}` : `Frame ${frame.frameNo}`;
+            return (<text key={frame.frameNo + label} style={{ color: isSelected ? "green" : "white" }}>
+                {isSelected ? "▶ " : "  "}{label}
+              </text>);
+        })}
+        </scrollbox>
+      </box>
+
+      {/* Right Content: XML/JSX Dump */}
+      <box style={{ flexGrow: 1, height: "100%", flexDirection: "column" }}>
+        <scrollbox style={{ width: "100%", height: "100%", paddingLeft: 1 }}>
+          <text style={{ color: "#d8b4e2" }}>{xmlString}</text>
+        </scrollbox>
+      </box>
+    </box>);
+}

package/src/tui/components/FramesPane.tsx

@@ -0,0 +1,8 @@
+import type { SmithersDb } from "@smithers-orchestrator/db/adapter";
+export declare function FramesPane({ adapter, runId, focused, filterNodeId, nodeAttempt, }: {
+    adapter: SmithersDb;
+    runId: string;
+    focused: boolean;
+    filterNodeId?: string;
+    nodeAttempt?: any;
+}): import("react/jsx-runtime").JSX.Element;

package/src/tui/components/LogsPane.jsx

@@ -0,0 +1,46 @@
+// @ts-nocheck
+import React, { useEffect, useState } from "react";
+import { formatEventLine } from "../../format.js";
+/** @typedef {import("@smithers-orchestrator/db/adapter").SmithersDb} SmithersDb */
+
+/**
+ * @param {{ adapter: SmithersDb; runId: string; focused: boolean; }} value
+ */
+export function LogsPane({ adapter, runId, focused, }) {
+    const [logs, setLogs] = useState([]);
+    useEffect(() => {
+        let mounted = true;
+        let lastSeq = -1;
+        async function fetchLogs() {
+            if (!mounted)
+                return;
+            try {
+                const events = await adapter.listEvents(runId, lastSeq, 200);
+                if (mounted && events.length > 0) {
+                    const run = await adapter.getRun(runId);
+                    const baseMs = run?.startedAtMs ?? run?.createdAtMs ?? Date.now();
+                    const newLines = events.map((e) => formatEventLine(e, baseMs));
+                    lastSeq = events[events.length - 1].seq;
+                    setLogs((prev) => {
+                        const updated = [...prev, ...newLines];
+                        // keep the last 200 lines to avoid scrollbox lag
+                        return updated.slice(-200);
+                    });
+                }
+            }
+            catch (err) { }
+            if (mounted)
+                setTimeout(fetchLogs, 500);
+        }
+        fetchLogs();
+        return () => {
+            mounted = false;
+        };
+    }, [adapter, runId]);
+    return (<scrollbox focused={focused} style={{ width: "100%", height: "100%", paddingLeft: 1, paddingRight: 1 }}>
+      <box flexDirection="column">
+        {logs.map((log, index) => (<text key={index}>{log}</text>))}
+        {logs.length === 0 && <text>Loading events...</text>}
+      </box>
+    </scrollbox>);
+}

package/src/tui/components/LogsPane.tsx

@@ -0,0 +1,6 @@
+import type { SmithersDb } from "@smithers-orchestrator/db/adapter";
+export declare function LogsPane({ adapter, runId, focused, }: {
+    adapter: SmithersDb;
+    runId: string;
+    focused: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/src/tui/components/MetricsPane.jsx

@@ -0,0 +1,108 @@
+// @ts-nocheck
+import React, { useEffect, useState } from "react";
+import { useKeyboard } from "@opentui/react";
+/** @typedef {import("@smithers-orchestrator/db/adapter").SmithersDb} SmithersDb */
+
+/**
+ * @param {{ adapter: SmithersDb; onBack: () => void; }} value
+ */
+export function MetricsPane({ adapter, onBack, }) {
+    const [stats, setStats] = useState({
+        runsTotal: 0,
+        runsFinished: 0,
+        nodesTotal: 0,
+        tokensIn: 0,
+        tokensOut: 0,
+        tokensCache: 0,
+        series: []
+    });
+    useEffect(() => {
+        let mounted = true;
+        async function fetchStats() {
+            try {
+                const [runStats] = await adapter.rawQuery(`SELECT count(*) as total, sum(case when status='finished' then 1 else 0 end) as finished FROM _smithers_runs`);
+                const [nodeStats] = await adapter.rawQuery(`SELECT count(*) as total FROM _smithers_nodes`);
+                const [tokenStats] = await adapter.rawQuery(`
+          SELECT 
+            sum(cast(json_extract(payload_json, '$.inputTokens') as integer)) as tIn,
+            sum(cast(json_extract(payload_json, '$.outputTokens') as integer)) as tOut,
+            sum(cast(json_extract(payload_json, '$.cacheReadTokens') as integer)) as tCache
+          FROM _smithers_events 
+          WHERE type = 'TokenUsageReported'
+        `);
+                // Last 24hr timeseries
+                const nowMs = Date.now();
+                const oneDayAgo = nowMs - (24 * 60 * 60 * 1000);
+                const series = await adapter.rawQuery(`
+          SELECT 
+            strftime('%H:00', datetime(timestamp_ms/1000, 'unixepoch', 'localtime')) as hr,
+            sum(cast(json_extract(payload_json, '$.inputTokens') as integer) + cast(json_extract(payload_json, '$.outputTokens') as integer)) as totalTokens
+          FROM _smithers_events 
+          WHERE type = 'TokenUsageReported' AND timestamp_ms > ${oneDayAgo}
+          GROUP BY hr
+          ORDER BY timestamp_ms ASC
+          LIMIT 24
+        `);
+                if (mounted) {
+                    setStats({
+                        runsTotal: runStats?.total || 0,
+                        runsFinished: runStats?.finished || 0,
+                        nodesTotal: nodeStats?.total || 0,
+                        tokensIn: tokenStats?.tIn || 0,
+                        tokensOut: tokenStats?.tOut || 0,
+                        tokensCache: tokenStats?.tCache || 0,
+                        series: series || []
+                    });
+                }
+            }
+            catch (err) {
+                // fail silently for telemetry
+            }
+        }
+        fetchStats();
+        const interval = setInterval(fetchStats, 5000);
+        return () => {
+            mounted = false;
+            clearInterval(interval);
+        };
+    }, [adapter]);
+    useKeyboard((key) => {
+        if (key.name === "escape") {
+            onBack();
+        }
+    });
+    // Render Sparkline
+    const maxTokens = Math.max(1, ...stats.series.map((s) => s.totalTokens || 0));
+    const blocks = [' ', '▂', '▃', '▄', '▅', '▆', '▇', '█'];
+    const sparkline = stats.series.map((s) => {
+        const val = s.totalTokens || 0;
+        const idx = Math.floor((val / maxTokens) * (blocks.length - 1));
+        return blocks[idx];
+    }).join("");
+    const labels = stats.series.map((s) => s.hr).join(" ");
+    return (<box style={{ flexGrow: 1, width: "100%", height: "100%", flexDirection: "column", paddingLeft: 1 }}>
+      <text style={{ color: "cyan", marginBottom: 1 }}> 📊 Smithers Global Telemetry (Prometheus Rollup) </text>
+      
+      <box style={{ flexDirection: "row", marginBottom: 2 }}>
+        <box style={{ width: 30, flexDirection: "column", borderRight: true, borderColor: "gray" }}>
+           <text style={{ color: "white" }}> Lifetime Runs: </text>
+           <text style={{ color: "green" }}> {stats.runsTotal} ({stats.runsFinished} completed) </text>
+        </box>
+        <box style={{ width: 30, flexDirection: "column", borderRight: true, borderColor: "gray", paddingLeft: 1 }}>
+           <text style={{ color: "white" }}> Total Nodes Executed: </text>
+           <text style={{ color: "yellow" }}> {stats.nodesTotal} tasks </text>
+        </box>
+        <box style={{ width: 40, flexDirection: "column", paddingLeft: 1 }}>
+           <text style={{ color: "white" }}> LLM Token Throughput: </text>
+           <text style={{ color: "magenta" }}> IN: {stats.tokensIn} | OUT: {stats.tokensOut} </text>
+        </box>
+      </box>
+
+      <text style={{ color: "gray", marginTop: 1 }}> Token Usage (Last 24 Hours) </text>
+      <box style={{ height: 6, width: "100%", flexDirection: "column", marginTop: 1, border: true, borderColor: "#34d399", paddingLeft: 1 }}>
+        <text style={{ color: "cyan", marginTop: 1 }}> {sparkline || "No token telemetry to graph"} </text>
+        <text style={{ color: "gray" }}> {labels} </text>
+      </box>
+
+    </box>);
+}

package/src/tui/components/MetricsPane.tsx

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