noah-agent 0.1.0

package/dist/tui/space/components.js

@@ -0,0 +1,261 @@
+import { visibleWidth, truncateToWidth } from "@earendil-works/pi-tui";
+import { wordWrap, UNICODE } from "../../ui/ansi.js";
+import { C, G, b, d } from "./theme.js";
+/* ----------------------------------------------------------------- helpers */
+// Use pi-tui's OWN width measure + truncation so our lines never exceed the
+// renderer's width check (which throws otherwise).
+const vw = (s) => visibleWidth(s);
+const truncate = (s, w) => truncateToWidth(s, Math.max(0, w));
+/** Truncate AND pad to exactly `w` visible columns. */
+function fit(s, w) {
+    const t = truncate(s, w);
+    const len = vw(t);
+    return len < w ? t + " ".repeat(w - len) : t;
+}
+/** Clamp every line so it can never exceed `w` (defensive against long tokens). */
+const clamp = (lines, w) => lines.map((l) => (vw(l) > w ? truncate(l, w) : l));
+function center(s, width) {
+    const len = vw(s);
+    if (len >= width)
+        return truncate(s, width);
+    return " ".repeat(Math.floor((width - len) / 2)) + s;
+}
+const pad = (s, w) => fit(s, w);
+/* -------------------------------------------------------------- hero logo */
+const LOGO = [
+    "███╗   ██╗  ██████╗   █████╗  ██╗  ██╗",
+    "████╗  ██║ ██╔═══██╗ ██╔══██╗ ██║  ██║",
+    "██╔██╗ ██║ ██║   ██║ ███████║ ███████║",
+    "██║╚██╗██║ ██║   ██║ ██╔══██║ ██╔══██║",
+    "██║ ╚████║ ╚██████╔╝ ██║  ██║ ██║  ██║",
+    "╚═╝  ╚═══╝  ╚═════╝  ╚═╝  ╚═╝ ╚═╝  ╚═╝",
+];
+const LOGO_W = Math.max(...LOGO.map((l) => [...l].length));
+// top-down "key light": ice-white crown fading into deep blue
+const TINT = [C.hot, C.star, C.nebula, C.plasma, C.comet, C.comet];
+/** The big NOAH wordmark, centered, cinematic gradient. */
+export function heroLogo(width) {
+    if (!UNICODE || width < LOGO_W + 2) {
+        return ["", center(b(C.hot("N O A H")), width), ""];
+    }
+    const lines = LOGO.map((row, i) => center(TINT[i](row), width));
+    const glow = center(C.ghost("▔".repeat(Math.min(LOGO_W, width))), width);
+    const tag = center(d(C.faint("A G E N T I C   O P E R A T I N G   S Y S T E M")), width);
+    return clamp(["", "", ...lines, glow, "", tag, ""], width);
+}
+/** Splash shown above the conversation. Tips appear only on a fresh session. */
+export class Splash {
+    showTips;
+    constructor(showTips) {
+        this.showTips = showTips;
+    }
+    render(width) {
+        const out = heroLogo(width);
+        if (this.showTips()) {
+            const tips = [
+                "Ask NOAH to install software, manage services, or inspect your system.",
+                "Destructive actions ask first — every action is logged.",
+                "Type / for commands · just describe what you want.",
+            ];
+            out.push("");
+            for (const t of tips)
+                out.push(`   ${C.comet(G.nodeOpen)}  ${C.text(truncate(t, Math.max(10, width - 7)))}`);
+            out.push("");
+        }
+        return out;
+    }
+    invalidate() { }
+}
+/* --------------------------------------------------------------- chat blocks */
+export class UserBlock {
+    text;
+    constructor(text) {
+        this.text = text;
+    }
+    render(width) {
+        const w = Math.max(10, width - 6);
+        const body = wordWrap(this.text, w);
+        return clamp(["", ` ${C.plasma(G.prompt)}  ${b(C.star(body[0] ?? ""))}`, ...body.slice(1).map((l) => `    ${C.star(l)}`)], width);
+    }
+    invalidate() { }
+}
+export class AssistantBlock {
+    text = "";
+    append(delta) {
+        this.text += delta;
+    }
+    get value() {
+        return this.text;
+    }
+    render(width) {
+        const w = Math.max(10, width - 6);
+        const body = wordWrap(this.text || "…", w).map((l) => C.text(l));
+        return clamp(["", ` ${C.comet(G.node)}  ${b(C.nebula("NOAH"))}`, ...body.map((l) => `    ${l}`)], width);
+    }
+    invalidate() { }
+}
+export class ToolBlock {
+    name;
+    arg;
+    state;
+    constructor(name, arg, state = "running") {
+        this.name = name;
+        this.arg = arg;
+        this.state = state;
+    }
+    set(state) {
+        this.state = state;
+    }
+    render(width) {
+        const glyph = this.state === "running" ? C.plasma(G.run) : this.state === "ok" ? C.good(G.check) : C.danger(G.cross);
+        const arg = this.arg ? " " + C.text(truncate(this.arg, Math.max(8, width - this.name.length - 14))) : "";
+        const tag = this.state === "running"
+            ? d(C.faint(" · running"))
+            : this.state === "ok"
+                ? d(C.good(" · done"))
+                : d(C.danger(" · failed"));
+        return clamp([`    ${glyph} ${C.plasma(this.name)}${arg}${tag}`], width);
+    }
+    invalidate() { }
+}
+export class SystemBlock {
+    lines;
+    kind;
+    constructor(lines, kind = "info") {
+        this.lines = lines;
+        this.kind = kind;
+    }
+    render(width) {
+        const accent = this.kind === "danger" ? C.danger : this.kind === "warn" ? C.warn : C.comet;
+        const w = Math.max(10, width - 6);
+        const out = [""];
+        for (const raw of this.lines)
+            for (const l of wordWrap(raw, w))
+                out.push(`    ${accent(G.bar)} ${C.text(l)}`);
+        return clamp(out, width);
+    }
+    invalidate() { }
+}
+/* ------------------------------------------------------------------ input box */
+/** Rounded, cinematic input box framing pi-tui's Input (keeps the cursor marker). */
+export class InputBox {
+    input;
+    getState;
+    focused = false;
+    constructor(input, getState) {
+        this.input = input;
+        this.getState = getState;
+    }
+    render(width) {
+        const inner = Math.max(8, width - 3); // interior between the rounded borders
+        const textW = inner - 4; // ' ' glyph ' ' <text> ' '
+        const busy = this.getState().busy;
+        const accent = busy ? C.faint : C.comet;
+        const top = ` ${accent("╭" + "─".repeat(inner) + "╮")}`;
+        const bot = ` ${accent("╰" + "─".repeat(inner) + "╯")}`;
+        const glyph = busy ? C.faint(G.run) : C.plasma(G.prompt);
+        const line = this.input.render(textW)[0] ?? "";
+        const mid = ` ${accent("│")} ${glyph} ${fit(line, textW)} ${accent("│")}`;
+        return clamp([top, mid, bot], width);
+    }
+    invalidate() {
+        this.input.invalidate();
+    }
+}
+/* --------------------------------------------------------------------- footer */
+export class Footer {
+    get;
+    constructor(get) {
+        this.get = get;
+    }
+    render(width) {
+        const s = this.get();
+        const cave = s.caveman && s.caveman !== "off" ? `  ${C.ghost(G.dot)}  ${C.nebula("caveman:" + s.caveman)}` : "";
+        const left = `  ${C.comet(G.node)} ${C.text(s.model)}  ${C.ghost(G.dot)}  ${C.faint("safety")} ${s.safety === "dry-run" ? C.warn(s.safety) : C.good(s.safety)}${cave}`;
+        const right = s.busy
+            ? `${d(C.faint("esc interrupt"))} `
+            : `${d(C.faint("/ commands"))}  ${C.ghost(G.dot)}  ${d(C.faint("enter send"))} `;
+        const gap = Math.max(1, width - vw(left) - vw(right));
+        return [fit(left + " ".repeat(gap) + right, width)];
+    }
+    invalidate() { }
+}
+export class Palette {
+    visible = false;
+    items = [];
+    selected = 0;
+    set(items) {
+        this.items = items;
+        if (this.selected >= items.length)
+            this.selected = Math.max(0, items.length - 1);
+    }
+    move(delta) {
+        if (this.items.length)
+            this.selected = (this.selected + delta + this.items.length) % this.items.length;
+    }
+    current() {
+        return this.items[this.selected];
+    }
+    render(width) {
+        if (!this.visible || !this.items.length)
+            return [];
+        const rows = this.items.map((it, i) => {
+            const on = i === this.selected;
+            const mark = on ? C.plasma(G.caret) : " ";
+            const name = (on ? (s) => b(C.star(s)) : C.plasma)(`/${it.name}`.padEnd(10));
+            const row = `  ${mark} ${name} ${d(C.faint(it.desc))}`;
+            return on ? hi(row, width) : truncate(row, width);
+        });
+        return clamp(["", ...rows], width);
+    }
+    invalidate() { }
+}
+/* ------------------------------------------------------------- model selector */
+import { bgHex } from "../../ui/ansi.js";
+const selBg = bgHex("#13213f");
+function hi(s, width) {
+    return selBg(pad(truncate(s, width), width));
+}
+/** Generic arrow-navigable dropdown shown in place of the input box (model, login, …). */
+export class Selector {
+    title;
+    items;
+    selected = 0;
+    top = 0;
+    window = 10;
+    constructor(title, items) {
+        this.title = title;
+        this.items = items;
+    }
+    move(delta) {
+        if (!this.items.length)
+            return;
+        this.selected = Math.min(this.items.length - 1, Math.max(0, this.selected + delta));
+        if (this.selected < this.top)
+            this.top = this.selected;
+        if (this.selected >= this.top + this.window)
+            this.top = this.selected - this.window + 1;
+    }
+    current() {
+        return this.items[this.selected];
+    }
+    render(width) {
+        const w = Math.min(width, Math.max(24, width)) - 2;
+        const t = this.title.toUpperCase();
+        const head = ` ${C.comet("╭")} ${b(C.nebula(t))} ${C.comet("─".repeat(Math.max(0, w - t.length - 4)))}${C.comet("╮")}`;
+        const foot = ` ${C.comet("╰")} ${d(C.faint("↑↓ move  ·  enter select  ·  esc cancel"))} ${C.comet("─".repeat(Math.max(0, w - 42)))}${C.comet("╯")}`;
+        const slice = this.items.slice(this.top, this.top + this.window);
+        const rows = slice.map((m, i) => {
+            const idx = this.top + i;
+            const on = idx === this.selected;
+            const mark = on ? C.plasma(G.caret) : " ";
+            const label = (on ? (s) => b(C.star(s)) : C.text)(m.label);
+            const hint = m.hint ? `  ${d(C.faint(m.hint))}` : "";
+            const inner = ` ${mark} ${label}${hint}`;
+            const body = on ? hi(inner, w - 2) : pad(truncate(inner, w - 2), w - 2);
+            return ` ${C.comet("│")}${body}${C.comet("│")}`;
+        });
+        return clamp([head, ...rows, foot], width);
+    }
+    invalidate() { }
+}

package/dist/tui/space/dashboard.js

@@ -0,0 +1,63 @@
+import { truncate, visibleLen, UNICODE } from "../../ui/ansi.js";
+import { C, G, b, d } from "./theme.js";
+import { humanBytes } from "../../sys/probe.js";
+import { realDisks } from "../../sys/report.js";
+import { assessHealth } from "../../sys/health.js";
+const FULL = UNICODE ? "█" : "#";
+const EMPTY = UNICODE ? "░" : "-";
+/** A fixed-width meter bar for a percent. */
+export function meter(pct, width) {
+    const p = Math.max(0, Math.min(100, pct));
+    const filled = Math.round((p / 100) * width);
+    const tint = p >= 90 ? C.danger : p >= 80 ? C.warn : C.good;
+    return tint(FULL.repeat(filled)) + C.ghost(EMPTY.repeat(Math.max(0, width - filled)));
+}
+const SEV_GLYPH = {
+    high: C.danger,
+    medium: C.warn,
+    low: C.faint,
+};
+const STATUS_TINT = { ok: C.good, warn: C.warn, critical: C.danger };
+export class Dashboard {
+    get;
+    constructor(get) {
+        this.get = get;
+    }
+    render(width) {
+        const data = this.get();
+        if (!data) {
+            return ["", ` ${C.plasma(G.node)} ${d(C.faint("reading machine state\u2026"))}`, ""];
+        }
+        const { snap, health } = data;
+        const w = Math.max(20, width);
+        const out = [""];
+        const status = `${STATUS_TINT[health.status](health.status.toUpperCase())}`;
+        out.push(` ${C.plasma(G.node)} ${b(C.star("SYSTEM"))}  ${d(C.faint(snap.os))}  ${C.ghost(G.dot)}  ${status}`);
+        const barW = Math.min(18, Math.max(8, w - 40));
+        if (snap.memory) {
+            out.push(`   ${C.faint("memory")}  ${meter(snap.memory.usedPct, barW)} ${C.text(`${snap.memory.usedPct}%`)} ${d(C.faint(`(${humanBytes(snap.memory.used)} / ${humanBytes(snap.memory.total)})`))}`);
+        }
+        const root = (realDisks(snap)[0] ?? snap.disks[0]);
+        if (root) {
+            out.push(`   ${C.faint("disk  ")}  ${meter(root.usedPct, barW)} ${C.text(`${root.usedPct}%`)} ${d(C.faint(`(${humanBytes(root.available)} free on ${root.mount})`))}`);
+        }
+        if (health.items.length) {
+            out.push(` ${C.plasma(G.node)} ${d(C.faint("recommendations"))}`);
+            for (const it of health.items.slice(0, 3)) {
+                const line = `   ${SEV_GLYPH[it.severity](G.caret)} ${C.text(it.title)}  ${d(C.faint(it.detail))}`;
+                out.push(truncate(line, w));
+            }
+        }
+        else {
+            out.push(`   ${C.good(G.check)} ${C.text("all clear \u2014 nothing needs attention")}`);
+        }
+        out.push(`   ${d(C.faint('ask "how healthy is my machine?" or /doctor for the full report'))}`);
+        out.push("");
+        return out.map((l) => (visibleLen(l) > w ? truncate(l, w) : l));
+    }
+    invalidate() { }
+}
+/** Build dashboard data from a snapshot. */
+export function dashboardData(snap) {
+    return { snap, health: assessHealth(snap) };
+}

package/dist/tui/space/theme.js

@@ -0,0 +1,39 @@
+/**
+ * NOAH visual language — cinematic "blue & black" (Nolan-grade): deep blacks,
+ * cold steel blues, ice-white highlights. Minimal, high-contrast, spacious.
+ * Truecolor; degrades to plain text without color.
+ */
+import { hex, bold, dim as dimStyle } from "../../ui/ansi.js";
+export const C = {
+    hot: hex("#eaf2ff"), // ice-white highlight (logo crown, emphasis)
+    star: hex("#dce8ff"), // bright text
+    text: hex("#aebfd9"), // body text (cool grey-blue)
+    faint: hex("#62719a"), // secondary
+    ghost: hex("#26365c"), // borders / hairlines (deep steel)
+    comet: hex("#3b82f6"), // core blue
+    plasma: hex("#5b9dff"), // azure accent (primary)
+    nebula: hex("#9ec5ff"), // glacier (logo light / secondary)
+    pulse: hex("#7fb0ff"),
+    good: hex("#57d9a3"),
+    warn: hex("#ffce6b"),
+    danger: hex("#ff6b81"),
+};
+export const BG = {
+    panel: hex("#0a1020"),
+    sel: hex("#13213f"),
+};
+/** Minimal, modern glyph set. */
+export const G = {
+    prompt: "›",
+    node: "◆",
+    nodeOpen: "◇",
+    dot: "·",
+    arrow: "→",
+    check: "✓",
+    cross: "✕",
+    run: "◐",
+    bar: "▏",
+    caret: "▸",
+};
+export const b = bold;
+export const d = dimStyle;

package/dist/ui/ansi.js

@@ -0,0 +1,93 @@
+/**
+ * ANSI primitives — TTY + NO_COLOR aware. Zero dependencies.
+ *
+ * When stdout is not a TTY (piped, smoke test) or NO_COLOR is set, colors and
+ * heavy box characters degrade gracefully so plain-text assertions still match.
+ */
+const noColorEnv = "NO_COLOR" in process.env && process.env.NO_COLOR !== "";
+const forceColor = process.env.NOAH_COLOR === "1";
+export const COLOR = forceColor || (process.stdout.isTTY === true && !noColorEnv);
+export const UNICODE = process.env.NOAH_ASCII !== "1";
+function wrap(open, close) {
+    return (s) => (COLOR ? `\x1b[${open}m${s}\x1b[${close}m` : s);
+}
+// Styles
+export const bold = wrap(1, 22);
+export const dim = wrap(2, 22);
+export const italic = wrap(3, 23);
+export const underline = wrap(4, 24);
+// Foreground colors (256-color where useful, with basic fallback semantics)
+export const red = wrap(31, 39);
+export const green = wrap(32, 39);
+export const yellow = wrap(33, 39);
+export const blue = wrap(34, 39);
+export const magenta = wrap(35, 39);
+export const cyan = wrap(36, 39);
+export const gray = wrap(90, 39);
+export const white = wrap(97, 39);
+// 256-color helpers for richer accents
+export function fg256(code) {
+    return (s) => (COLOR ? `\x1b[38;5;${code}m${s}\x1b[39m` : s);
+}
+export function bg256(code) {
+    return (s) => (COLOR ? `\x1b[48;5;${code}m${s}\x1b[49m` : s);
+}
+/** Truecolor foreground (24-bit). Falls back to plain text without color. */
+export function rgb(r, g, b) {
+    return (s) => (COLOR ? `\x1b[38;2;${r};${g};${b}m${s}\x1b[39m` : s);
+}
+/** Truecolor background (24-bit). */
+export function bgRgb(r, g, b) {
+    return (s) => (COLOR ? `\x1b[48;2;${r};${g};${b}m${s}\x1b[49m` : s);
+}
+/** Parse "#rrggbb" → truecolor foreground fn. */
+export function hex(color) {
+    const n = parseInt(color.replace(/^#/, ""), 16);
+    return rgb((n >> 16) & 255, (n >> 8) & 255, n & 255);
+}
+export function bgHex(color) {
+    const n = parseInt(color.replace(/^#/, ""), 16);
+    return bgRgb((n >> 16) & 255, (n >> 8) & 255, n & 255);
+}
+// eslint-disable-next-line no-control-regex
+const ESC_SEQ = /\x1b\[[0-9;]*m|\x1b[_\]][^\x07]*\x07/g;
+/** Strip SGR colors and OSC/APC sequences (incl. pi-tui's CURSOR_MARKER). */
+export function stripAnsi(s) {
+    return s.replace(ESC_SEQ, "");
+}
+/** Visible length, ignoring color + control sequences (cursor marker is zero-width). */
+export function visibleLen(s) {
+    return stripAnsi(s).length;
+}
+/** Pad a string to width based on visible length. */
+export function padEnd(s, width) {
+    const len = visibleLen(s);
+    return len >= width ? s : s + " ".repeat(width - len);
+}
+/** Truncate to width (visible), appending an ellipsis when cut. */
+export function truncate(s, width) {
+    if (visibleLen(s) <= width)
+        return s;
+    const ell = UNICODE ? "…" : "...";
+    return s.slice(0, Math.max(0, width - ell.length)) + ell;
+}
+/** Word-wrap plain text to a visible width (no ANSI inside expected). */
+export function wordWrap(text, width) {
+    const out = [];
+    for (const para of text.split("\n")) {
+        let line = "";
+        for (const word of para.split(/\s+/)) {
+            if (!word)
+                continue;
+            if (line && visibleLen(line) + 1 + visibleLen(word) > width) {
+                out.push(line);
+                line = word;
+            }
+            else {
+                line = line ? `${line} ${word}` : word;
+            }
+        }
+        out.push(line);
+    }
+    return out;
+}

package/dist/ui/badge.js

@@ -0,0 +1,31 @@
+/**
+ * Status badges — colored, consistent indicators.
+ * The literal words (INFO/RUNNING/SUCCESS/WARNING/BLOCKED/ALLOW/CONFIRM)
+ * are preserved in output so plain-text assertions keep matching.
+ */
+import { bold, cyan, gray, green, red, yellow, fg256, UNICODE } from "./ansi.js";
+const orange = fg256(208);
+const SPECS = {
+    info: { label: "INFO", dot: "●", paint: cyan },
+    running: { label: "RUNNING", dot: "◐", paint: (s) => orange(s) },
+    success: { label: "SUCCESS", dot: "●", paint: green },
+    warning: { label: "WARNING", dot: "▲", paint: yellow },
+    blocked: { label: "BLOCKED", dot: "■", paint: red },
+    allow: { label: "ALLOW", dot: "●", paint: green },
+    confirm: { label: "CONFIRM", dot: "▲", paint: yellow },
+};
+/** Inline badge, e.g. "● SUCCESS" (colored). */
+export function badge(status) {
+    const s = SPECS[status];
+    const dot = UNICODE ? s.dot : "*";
+    return s.paint(bold(`${dot} ${s.label}`));
+}
+/** Just the colored label text (no dot), for panel right-aligned tags. */
+export function badgeLabel(status) {
+    const s = SPECS[status];
+    return s.paint(bold(s.label));
+}
+export function statusColor(status) {
+    return SPECS[status].paint;
+}
+export const muted = gray;

package/dist/ui/box.js

@@ -0,0 +1,61 @@
+/**
+ * Box / panel drawing. Styles: round · square · heavy · block.
+ * Width is the inner content area; visible length math ignores ANSI codes.
+ */
+import { gray, padEnd, visibleLen, UNICODE } from "./ansi.js";
+const STYLES = {
+    round: { tl: "╭", tr: "╮", bl: "╰", br: "╯", h: "─", v: "│" },
+    square: { tl: "┌", tr: "┐", bl: "└", br: "┘", h: "─", v: "│" },
+    heavy: { tl: "┏", tr: "┓", bl: "┗", br: "┛", h: "━", v: "┃" },
+};
+const ASCII = { tl: "+", tr: "+", bl: "+", br: "+", h: "-", v: "|" };
+export function drawBox(body, opts = {}) {
+    const width = opts.width ?? 64;
+    const accent = opts.accent ?? gray;
+    const pad = " ".repeat(opts.indent ?? 2);
+    if (opts.style === "block") {
+        return drawBlock(body, width, accent, pad, opts.title, opts.status);
+    }
+    const c = UNICODE ? STYLES[opts.style ?? "round"] : ASCII;
+    const seg = width + 2; // dashes span between corners
+    // Top border with optional title (left) and status (right).
+    let titleStr = opts.title ? ` ${opts.title} ` : "";
+    let statusStr = opts.status ? ` ${opts.status} ` : "";
+    const avail = seg - 2; // room between the lead and trail border dashes
+    // Drop the status tag, then the title, if they cannot fit the top border.
+    if (visibleLen(titleStr) + visibleLen(statusStr) > avail)
+        statusStr = "";
+    if (visibleLen(titleStr) > avail)
+        titleStr = "";
+    const used = 1 + visibleLen(titleStr) + visibleLen(statusStr) + 1; // lead + trail h
+    const fill = c.h.repeat(Math.max(0, seg - used));
+    const top = pad +
+        accent(c.tl) +
+        accent(c.h) +
+        titleStr +
+        accent(fill) +
+        statusStr +
+        accent(c.h) +
+        accent(c.tr);
+    const lines = body.map((line) => pad + accent(c.v) + " " + padEnd(line, width) + " " + accent(c.v));
+    const bottom = pad + accent(c.bl) + accent(c.h.repeat(seg)) + accent(c.br);
+    return [top, ...lines, bottom].join("\n");
+}
+function drawBlock(body, width, accent, pad, title, status) {
+    const block = UNICODE ? "█" : "#";
+    const total = width + 8; // ██ + "  " + width + "  " + ██
+    const solid = pad + accent(block.repeat(total));
+    const blank = pad + accent(block.repeat(2)) + " ".repeat(width + 4) + accent(block.repeat(2));
+    const row = (content) => pad + accent(block.repeat(2)) + "  " + padEnd(content, width) + "  " + accent(block.repeat(2));
+    const header = [];
+    if (title)
+        header.push(row(title), blank);
+    if (status)
+        header.push(row(status), blank);
+    return [solid, blank, ...header, ...body.map(row), blank, solid].join("\n");
+}
+/** A thin full-width rule for separating sections. */
+export function rule(width = 68, indent = 2) {
+    const ch = UNICODE ? "─" : "-";
+    return " ".repeat(indent) + gray(ch.repeat(width));
+}

package/dist/ui/preview.js

@@ -0,0 +1,37 @@
+/**
+ * Visual preview of every NOAH panel — wire-free.
+ *   npm run build && node dist/ui/preview.js
+ *   (or: npx tsx src/ui/preview.ts)
+ *
+ * Lets us validate the terminal experience before connecting it to live events.
+ */
+import * as ui from "./render.js";
+const out = (s) => process.stdout.write(s + "\n");
+out(ui.brand());
+out(ui.requestPanel("install htop and then show me my five biggest files"));
+out(ui.sectionHeader("PLAN", "info"));
+out(ui.barLines([
+    "1. Inspect the largest files in the home directory (read-only)",
+    "2. Install htop via the native package manager",
+    "3. Report results",
+].join("\n")));
+out(ui.toolCard("bash", "du -ah ~ | sort -rh | head -5", "running"));
+out(ui.toolCard("bash", "du -ah ~ | sort -rh | head -5", "success", [
+    "1.2G  ~/Movies/demo.mov",
+    "480M  ~/Downloads/node-v22.pkg",
+    "120M  ~/Projects/NOAH/node_modules",
+]));
+out(ui.toolCard("package", "install htop", "running"));
+out(ui.safetyReview("sudo apt-get install -y htop", "package install", "bash"));
+out(ui.approvePrompt() + "y");
+out(ui.safetyBlock("rm -rf / --no-preserve-root", "blocked: recursive delete of root/home"));
+out(ui.safetyBlock(":(){ :|:& };:", "blocked: fork bomb"));
+out("");
+out(ui.auditLine("bash", "du -ah ~ | sort -rh | head -5", true));
+out(ui.auditLine("package", "install htop", true));
+out(ui.auditLine("bash", "cat /missing", false));
+out(ui.resultPanel("Installed htop. Your five largest files are listed above; ~/Movies/demo.mov (1.2G) is the biggest."));
+out("\n  " + "\x1b[1m\x1b[97m— check verdicts —\x1b[0m");
+out(ui.checkVerdict("ls -la", "allow", "read-only / safe command"));
+out(ui.checkVerdict("sudo apt install nginx", "confirm", "potentially destructive command"));
+out("");