@hanzo/ui 8.13.3 → 8.14.1

package/dist/agents/Board.cjs

@@ -0,0 +1,119 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RunRow = RunRow;
+exports.AgentBoard = AgentBoard;
+exports.nest = nest;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * AgentBoard — the agents working view: who is running, on what, and where.
+ *
+ * A run is a SESSION, and a session that spawned others is the root of a tree.
+ * A flat list draws a fan-out as N unrelated rows and loses the one fact worth
+ * seeing — that they are one piece of work — so the board nests children under
+ * their root and a collapsed root says how many it is hiding.
+ *
+ * Grouped by PROJECT, because that is the question a person opens this with:
+ * not "what is running" but "what is running on the thing I am working on".
+ * A session with no project groups under `ungrouped`, named rather than hidden.
+ *
+ * Presentational. It takes rows and raises `onOpen`; it does no fetching, no
+ * grouping policy beyond the field it is given, and no status derivation. The
+ * surface holds the data — `@hanzo/ai`'s `sessions.list` / `sessions.tree` and
+ * the stream — so the same board serves hanzo.ai, a channel workspace, or
+ * anything else that can answer with rows.
+ */
+const gui_1 = require("@hanzo/gui");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const react_1 = require("react");
+const slot_1 = require("../backends/gui/slot.cjs");
+const TONE = {
+    running: '$green10',
+    paused: '$yellow10',
+    done: '$color10',
+    error: '$red10',
+    unknown: '$color8',
+};
+/** The label a status wears. Separate from the colour so neither is guessed. */
+const SAYS = {
+    running: 'running',
+    paused: 'paused',
+    done: 'done',
+    error: 'error',
+    unknown: '—',
+};
+function Dot({ status }) {
+    return ((0, jsx_runtime_1.jsx)(gui_1.YStack, { width: 7, height: 7, rounded: 9999, bg: TONE[status], shrink: 0, "aria-label": SAYS[status] }));
+}
+/**
+ * One row, and its children under it.
+ *
+ * Expansion is per-row local state: a board is read top-down and a caller that
+ * wanted to persist which roots are open would be holding UI state for a list
+ * it does not own. A root with children opens by default, because the fan-out
+ * is the thing worth seeing.
+ */
+function RunRow({ run, depth = 0, active = false, onOpen, trailing, ...rest }) {
+    const kids = run.children ?? [];
+    const [open, setOpen] = (0, react_1.useState)(true);
+    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('run-row'), ...rest, children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$2", px: "$2", py: "$1.5", rounded: "$3", pl: 8 + depth * 16, cursor: "pointer", role: "button", tabIndex: 0, "aria-current": active ? 'true' : undefined, bg: active ? '$edge' : undefined, hoverStyle: { bg: active ? '$edge' : '$hover' }, pressStyle: { bg: '$raised' }, onPress: () => onOpen?.(run.id), children: [kids.length ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { width: 16, height: 16, items: "center", justify: "center", shrink: 0, role: "button", tabIndex: 0, "aria-expanded": open, "aria-label": open ? 'Hide sub-agents' : 'Show sub-agents', onPress: (e) => {
+                            e.stopPropagation?.();
+                            setOpen((v) => !v);
+                        }, children: open ? (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronDown, { size: 13, opacity: 0.6 }) : (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronRight, { size: 13, opacity: 0.6 }) })) : ((0, jsx_runtime_1.jsx)(gui_1.YStack, { width: 16, shrink: 0 })), (0, jsx_runtime_1.jsx)(Dot, { status: run.status }), (0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$2", numberOfLines: 1, shrink: 1, color: active ? '$color' : '$quiet', children: run.agent }), run.doing ? ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$1", numberOfLines: 1, flex: 1, color: "$soft", children: run.doing })) : ((0, jsx_runtime_1.jsx)(gui_1.XStack, { flex: 1 })), kids.length && !open ? ((0, jsx_runtime_1.jsxs)(gui_1.SizableText, { size: "$1", color: "$soft", children: [kids.length, " sub-agent", kids.length === 1 ? '' : 's'] })) : null, run.target ? ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: run.target })) : null, trailing] }), open && kids.length
+                ? kids.map((kid) => ((0, jsx_runtime_1.jsx)(RunRow, { run: kid, depth: depth + 1, onOpen: onOpen }, kid.id)))
+                : null] }));
+}
+/**
+ * The board.
+ *
+ * Groups are ordered by name with the un-projected group LAST, so the answer to
+ * "what is running on my project" is never below a pile of stray runs.
+ */
+function AgentBoard({ runs, active, onOpen, empty, otherLabel = 'Other work', ...rest }) {
+    const groups = (0, react_1.useMemo)(() => group(runs, otherLabel), [runs, otherLabel]);
+    if (!runs.length) {
+        return ((0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('agent-board'), p: "$4", ...rest, children: empty ?? ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$2", color: "$soft", children: "Nothing running." })) }));
+    }
+    return ((0, jsx_runtime_1.jsx)(gui_1.ScrollView, { ...(0, slot_1.slot)('agent-board'), flex: 1, showsVerticalScrollIndicator: false, ...rest, children: (0, jsx_runtime_1.jsx)(gui_1.YStack, { gap: "$1", p: "$2", children: groups.map(([project, rows]) => ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { mt: "$2", gap: "$0.5", children: [(0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$1", px: "$2", py: "$1", color: "$soft", fontWeight: "500", children: project }), rows.map((run) => ((0, jsx_runtime_1.jsx)(RunRow, { run: run, active: run.id === active, onOpen: onOpen }, run.id)))] }, project))) }) }));
+}
+/** Group roots by project, un-projected last. */
+function group(runs, otherLabel) {
+    const by = new Map();
+    for (const run of runs) {
+        const key = run.project?.trim() || otherLabel;
+        const rows = by.get(key);
+        if (rows)
+            rows.push(run);
+        else
+            by.set(key, [run]);
+    }
+    return [...by.entries()].sort(([a], [b]) => a === otherLabel ? 1 : b === otherLabel ? -1 : a.localeCompare(b));
+}
+/**
+ * Build the tree a board draws from the flat list an API answers with.
+ *
+ * A session names its root rather than its parent, so a fan-out is TWO levels
+ * and not N: every non-root hangs off its root. A row whose root is not in the
+ * list is treated as a root itself — otherwise a filtered page silently drops
+ * work, which is the one thing a board must not do.
+ */
+function nest(rows) {
+    const roots = new Map();
+    const orphans = [];
+    for (const row of rows) {
+        if (!row.rootId || row.rootId === row.id)
+            roots.set(row.id, { ...row, children: [] });
+    }
+    for (const row of rows) {
+        if (!row.rootId || row.rootId === row.id)
+            continue;
+        const root = roots.get(row.rootId);
+        if (root)
+            root.children.push({ ...row, children: [] });
+        else
+            orphans.push(row);
+    }
+    for (const row of orphans)
+        roots.set(row.id, { ...row, children: [] });
+    return [...roots.values()];
+}

package/dist/agents/Board.d.ts

@@ -0,0 +1,98 @@
+/**
+ * AgentBoard — the agents working view: who is running, on what, and where.
+ *
+ * A run is a SESSION, and a session that spawned others is the root of a tree.
+ * A flat list draws a fan-out as N unrelated rows and loses the one fact worth
+ * seeing — that they are one piece of work — so the board nests children under
+ * their root and a collapsed root says how many it is hiding.
+ *
+ * Grouped by PROJECT, because that is the question a person opens this with:
+ * not "what is running" but "what is running on the thing I am working on".
+ * A session with no project groups under `ungrouped`, named rather than hidden.
+ *
+ * Presentational. It takes rows and raises `onOpen`; it does no fetching, no
+ * grouping policy beyond the field it is given, and no status derivation. The
+ * surface holds the data — `@hanzo/ai`'s `sessions.list` / `sessions.tree` and
+ * the stream — so the same board serves hanzo.ai, a channel workspace, or
+ * anything else that can answer with rows.
+ */
+import { ScrollView, YStack } from '@hanzo/gui';
+import { type ComponentProps, type ReactNode } from 'react';
+type Col = Omit<ComponentProps<typeof YStack>, 'children'>;
+type Scroll = Omit<ComponentProps<typeof ScrollView>, 'children'>;
+/** The states a run can be in. `unknown` is honest about a value we do not model. */
+export type RunStatus = 'running' | 'paused' | 'done' | 'error' | 'unknown';
+/**
+ * One run.
+ *
+ * `children` is the fan-out. It is the SHAPE the board draws, so a caller with
+ * a flat list plus parent ids builds the tree before handing it over — `nest()`
+ * below does exactly that and is exported for the purpose.
+ */
+export interface Run {
+    id: string;
+    /** The agent doing the work. */
+    agent: string;
+    status: RunStatus;
+    /** What it is doing right now — one line, already trimmed by the caller. */
+    doing?: string;
+    /** Where it is running: a machine, a sandbox, a registered target. */
+    target?: string;
+    /** The project this run belongs to. Absent groups under "Other work". */
+    project?: string;
+    /** Sub-agents this run spawned. */
+    children?: Run[];
+}
+export interface RunRowProps extends Col {
+    run: Run;
+    depth?: number;
+    active?: boolean;
+    onOpen?: (id: string) => void;
+    /** Rendered at the end of the row — a watch affordance, a menu, a count. */
+    trailing?: ReactNode;
+}
+/**
+ * One row, and its children under it.
+ *
+ * Expansion is per-row local state: a board is read top-down and a caller that
+ * wanted to persist which roots are open would be holding UI state for a list
+ * it does not own. A root with children opens by default, because the fan-out
+ * is the thing worth seeing.
+ */
+export declare function RunRow({ run, depth, active, onOpen, trailing, ...rest }: RunRowProps): import("react/jsx-runtime").JSX.Element;
+export interface AgentBoardProps extends Scroll {
+    /** Roots. Children ride on each root's `children`. */
+    runs: Run[];
+    /** The run currently open, so the board can mark it. */
+    active?: string;
+    onOpen?: (id: string) => void;
+    /** What to draw when there is nothing running. */
+    empty?: ReactNode;
+    /** Heading for runs carrying no project. */
+    otherLabel?: string;
+}
+/**
+ * The board.
+ *
+ * Groups are ordered by name with the un-projected group LAST, so the answer to
+ * "what is running on my project" is never below a pile of stray runs.
+ */
+export declare function AgentBoard({ runs, active, onOpen, empty, otherLabel, ...rest }: AgentBoardProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Build the tree a board draws from the flat list an API answers with.
+ *
+ * A session names its root rather than its parent, so a fan-out is TWO levels
+ * and not N: every non-root hangs off its root. A row whose root is not in the
+ * list is treated as a root itself — otherwise a filtered page silently drops
+ * work, which is the one thing a board must not do.
+ */
+export declare function nest<T extends {
+    id: string;
+    rootId?: string;
+}>(rows: T[]): (T & {
+    children: (T & {
+        children: never[];
+    })[];
+})[];
+export {};
+//# sourceMappingURL=Board.d.ts.map

package/dist/agents/Board.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Board.d.ts","sourceRoot":"","sources":["../../src/agents/Board.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EAAE,UAAU,EAAuB,MAAM,EAAE,MAAM,YAAY,CAAA;AAEpE,OAAO,EAAqB,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAI9E,KAAK,GAAG,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,UAAU,CAAC,CAAA;AAC1D,KAAK,MAAM,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,EAAE,UAAU,CAAC,CAAA;AAEjE,qFAAqF;AACrF,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAA;AAE3E;;;;;;GAMG;AACH,MAAM,WAAW,GAAG;IAClB,EAAE,EAAE,MAAM,CAAA;IACV,gCAAgC;IAChC,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,SAAS,CAAA;IACjB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,sEAAsE;IACtE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,yEAAyE;IACzE,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAA;CACjB;AAkCD,MAAM,WAAW,WAAY,SAAQ,GAAG;IACtC,GAAG,EAAE,GAAG,CAAA;IACR,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAED;;;;;;;GAOG;AACH,wBAAgB,MAAM,CAAC,EAAE,GAAG,EAAE,KAAS,EAAE,MAAc,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,WAAW,2CAiFhG;AAED,MAAM,WAAW,eAAgB,SAAQ,MAAM;IAC7C,sDAAsD;IACtD,IAAI,EAAE,GAAG,EAAE,CAAA;IACX,wDAAwD;IACxD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,kDAAkD;IAClD,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,MAAM,EACN,MAAM,EACN,KAAK,EACL,UAAyB,EACzB,GAAG,IAAI,EACR,EAAE,eAAe,2CA+BjB;AAgBD;;;;;;;GAOG;AACH,wBAAgB,IAAI,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,EAC5D,IAAI,EAAE,CAAC,EAAE,GACR,CAAC,CAAC,GAAG;IAAE,QAAQ,EAAE,CAAC,CAAC,GAAG;QAAE,QAAQ,EAAE,KAAK,EAAE,CAAA;KAAE,CAAC,EAAE,CAAA;CAAE,CAAC,EAAE,CAgBrD"}

package/dist/agents/Board.js

@@ -0,0 +1,115 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * AgentBoard — the agents working view: who is running, on what, and where.
+ *
+ * A run is a SESSION, and a session that spawned others is the root of a tree.
+ * A flat list draws a fan-out as N unrelated rows and loses the one fact worth
+ * seeing — that they are one piece of work — so the board nests children under
+ * their root and a collapsed root says how many it is hiding.
+ *
+ * Grouped by PROJECT, because that is the question a person opens this with:
+ * not "what is running" but "what is running on the thing I am working on".
+ * A session with no project groups under `ungrouped`, named rather than hidden.
+ *
+ * Presentational. It takes rows and raises `onOpen`; it does no fetching, no
+ * grouping policy beyond the field it is given, and no status derivation. The
+ * surface holds the data — `@hanzo/ai`'s `sessions.list` / `sessions.tree` and
+ * the stream — so the same board serves hanzo.ai, a channel workspace, or
+ * anything else that can answer with rows.
+ */
+import { ScrollView, SizableText, XStack, YStack } from '@hanzo/gui';
+import { ChevronDown, ChevronRight } from '@hanzogui/lucide-icons-2';
+import { useMemo, useState } from 'react';
+import { slot } from '../backends/gui/slot.js';
+const TONE = {
+    running: '$green10',
+    paused: '$yellow10',
+    done: '$color10',
+    error: '$red10',
+    unknown: '$color8',
+};
+/** The label a status wears. Separate from the colour so neither is guessed. */
+const SAYS = {
+    running: 'running',
+    paused: 'paused',
+    done: 'done',
+    error: 'error',
+    unknown: '—',
+};
+function Dot({ status }) {
+    return (_jsx(YStack, { width: 7, height: 7, rounded: 9999, bg: TONE[status], shrink: 0, "aria-label": SAYS[status] }));
+}
+/**
+ * One row, and its children under it.
+ *
+ * Expansion is per-row local state: a board is read top-down and a caller that
+ * wanted to persist which roots are open would be holding UI state for a list
+ * it does not own. A root with children opens by default, because the fan-out
+ * is the thing worth seeing.
+ */
+export function RunRow({ run, depth = 0, active = false, onOpen, trailing, ...rest }) {
+    const kids = run.children ?? [];
+    const [open, setOpen] = useState(true);
+    return (_jsxs(YStack, { ...slot('run-row'), ...rest, children: [_jsxs(XStack, { items: "center", gap: "$2", px: "$2", py: "$1.5", rounded: "$3", pl: 8 + depth * 16, cursor: "pointer", role: "button", tabIndex: 0, "aria-current": active ? 'true' : undefined, bg: active ? '$edge' : undefined, hoverStyle: { bg: active ? '$edge' : '$hover' }, pressStyle: { bg: '$raised' }, onPress: () => onOpen?.(run.id), children: [kids.length ? (_jsx(XStack, { width: 16, height: 16, items: "center", justify: "center", shrink: 0, role: "button", tabIndex: 0, "aria-expanded": open, "aria-label": open ? 'Hide sub-agents' : 'Show sub-agents', onPress: (e) => {
+                            e.stopPropagation?.();
+                            setOpen((v) => !v);
+                        }, children: open ? _jsx(ChevronDown, { size: 13, opacity: 0.6 }) : _jsx(ChevronRight, { size: 13, opacity: 0.6 }) })) : (_jsx(YStack, { width: 16, shrink: 0 })), _jsx(Dot, { status: run.status }), _jsx(SizableText, { size: "$2", numberOfLines: 1, shrink: 1, color: active ? '$color' : '$quiet', children: run.agent }), run.doing ? (_jsx(SizableText, { size: "$1", numberOfLines: 1, flex: 1, color: "$soft", children: run.doing })) : (_jsx(XStack, { flex: 1 })), kids.length && !open ? (_jsxs(SizableText, { size: "$1", color: "$soft", children: [kids.length, " sub-agent", kids.length === 1 ? '' : 's'] })) : null, run.target ? (_jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: run.target })) : null, trailing] }), open && kids.length
+                ? kids.map((kid) => (_jsx(RunRow, { run: kid, depth: depth + 1, onOpen: onOpen }, kid.id)))
+                : null] }));
+}
+/**
+ * The board.
+ *
+ * Groups are ordered by name with the un-projected group LAST, so the answer to
+ * "what is running on my project" is never below a pile of stray runs.
+ */
+export function AgentBoard({ runs, active, onOpen, empty, otherLabel = 'Other work', ...rest }) {
+    const groups = useMemo(() => group(runs, otherLabel), [runs, otherLabel]);
+    if (!runs.length) {
+        return (_jsx(YStack, { ...slot('agent-board'), p: "$4", ...rest, children: empty ?? (_jsx(SizableText, { size: "$2", color: "$soft", children: "Nothing running." })) }));
+    }
+    return (_jsx(ScrollView, { ...slot('agent-board'), flex: 1, showsVerticalScrollIndicator: false, ...rest, children: _jsx(YStack, { gap: "$1", p: "$2", children: groups.map(([project, rows]) => (_jsxs(YStack, { mt: "$2", gap: "$0.5", children: [_jsx(SizableText, { size: "$1", px: "$2", py: "$1", color: "$soft", fontWeight: "500", children: project }), rows.map((run) => (_jsx(RunRow, { run: run, active: run.id === active, onOpen: onOpen }, run.id)))] }, project))) }) }));
+}
+/** Group roots by project, un-projected last. */
+function group(runs, otherLabel) {
+    const by = new Map();
+    for (const run of runs) {
+        const key = run.project?.trim() || otherLabel;
+        const rows = by.get(key);
+        if (rows)
+            rows.push(run);
+        else
+            by.set(key, [run]);
+    }
+    return [...by.entries()].sort(([a], [b]) => a === otherLabel ? 1 : b === otherLabel ? -1 : a.localeCompare(b));
+}
+/**
+ * Build the tree a board draws from the flat list an API answers with.
+ *
+ * A session names its root rather than its parent, so a fan-out is TWO levels
+ * and not N: every non-root hangs off its root. A row whose root is not in the
+ * list is treated as a root itself — otherwise a filtered page silently drops
+ * work, which is the one thing a board must not do.
+ */
+export function nest(rows) {
+    const roots = new Map();
+    const orphans = [];
+    for (const row of rows) {
+        if (!row.rootId || row.rootId === row.id)
+            roots.set(row.id, { ...row, children: [] });
+    }
+    for (const row of rows) {
+        if (!row.rootId || row.rootId === row.id)
+            continue;
+        const root = roots.get(row.rootId);
+        if (root)
+            root.children.push({ ...row, children: [] });
+        else
+            orphans.push(row);
+    }
+    for (const row of orphans)
+        roots.set(row.id, { ...row, children: [] });
+    return [...roots.values()];
+}
+//# sourceMappingURL=Board.js.map

package/dist/agents/Board.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Board.js","sourceRoot":"","sources":["../../src/agents/Board.tsx"],"names":[],"mappings":"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"}

package/dist/agents/Screen.cjs

@@ -0,0 +1,91 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Screen = Screen;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Screen — watching a run while it works.
+ *
+ * Some runs have something to look at: a sandbox serving an interactive page, a
+ * headful browser a person can watch over VNC. Most have nothing, and this
+ * component's first job is to say which it is, honestly — a viewer that draws a
+ * black rectangle for a run with no screen has told the reader the run is
+ * broken.
+ *
+ * THE CREDENTIAL NEVER OUTLIVES THE VIEW. A watchable surface is authorized by
+ * a short-lived TICKET the caller mints per view; this component asks for one
+ * when it mounts, embeds the page the ticket names, and asks for another if the
+ * viewer stays past its life. It does NOT take a URL with a long-lived token in
+ * it, and there is no prop to pass one — an embed URL ends up in browser
+ * history, in a screenshot, and in whatever the parent frame can read.
+ *
+ * The mint is a PROP, not an import, because who may watch is the surface's
+ * question and the answer lives in `@hanzo/ai` on one deployment and behind a
+ * BFF on another. This file owns the frame, the states and the refresh.
+ */
+const gui_1 = require("@hanzo/gui");
+const react_1 = require("react");
+const slot_1 = require("../backends/gui/slot.cjs");
+const NAMES = {
+    sandbox: 'sandbox',
+    browser: 'browser',
+};
+/** Re-mint at 80% of a ticket's life — early enough that the frame never blinks. */
+const EARLY = 0.8;
+function Screen({ sessionId, kind, mint, empty, title, ...rest }) {
+    const [state, setState] = (0, react_1.useState)({ phase: 'idle' });
+    const timer = (0, react_1.useRef)(null);
+    const live = (0, react_1.useRef)(true);
+    const open = (0, react_1.useCallback)(async () => {
+        if (!mint || !kind)
+            return;
+        setState({ phase: 'minting' });
+        try {
+            const ticket = await mint(sessionId);
+            if (!live.current)
+                return;
+            setState({ phase: 'watching', url: ticket.url });
+            if (ticket.expiresIn && ticket.expiresIn > 0) {
+                if (timer.current)
+                    clearTimeout(timer.current);
+                timer.current = setTimeout(() => void open(), ticket.expiresIn * 1000 * EARLY);
+            }
+        }
+        catch (err) {
+            if (!live.current)
+                return;
+            setState({
+                phase: 'failed',
+                message: err instanceof Error ? err.message : 'Could not open this screen.',
+            });
+        }
+    }, [mint, kind, sessionId]);
+    (0, react_1.useEffect)(() => {
+        live.current = true;
+        void open();
+        return () => {
+            live.current = false;
+            if (timer.current)
+                clearTimeout(timer.current);
+        };
+    }, [open]);
+    if (!kind) {
+        return ((0, jsx_runtime_1.jsx)(Frame, { title: title, ...rest, children: empty ?? ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$2", color: "$soft", children: "This run has no screen." })) }));
+    }
+    if (!mint) {
+        return ((0, jsx_runtime_1.jsx)(Frame, { title: title, ...rest, children: (0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$2", color: "$soft", children: "Watching is not wired up on this surface." }) }));
+    }
+    if (state.phase === 'failed') {
+        return ((0, jsx_runtime_1.jsx)(Frame, { title: title, ...rest, children: (0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$2", items: "center", children: [(0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$2", color: "$soft", children: state.message }), (0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$2", color: "$color", cursor: "pointer", role: "button", tabIndex: 0, onPress: () => void open(), children: "Try again" })] }) }));
+    }
+    if (state.phase !== 'watching') {
+        return ((0, jsx_runtime_1.jsx)(Frame, { title: title, ...rest, children: (0, jsx_runtime_1.jsxs)(gui_1.SizableText, { size: "$2", color: "$soft", children: ["Opening the ", NAMES[kind], "\u2026"] }) }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('screen'), flex: 1, minH: 0, bg: "$panel", rounded: "$4", overflow: "hidden", ...rest, children: [title ? (0, jsx_runtime_1.jsx)(Caption, { children: title }) : null, (0, jsx_runtime_1.jsx)("iframe", { src: state.url, title: title ?? `Live ${NAMES[kind]}`, sandbox: "allow-scripts allow-same-origin allow-forms", referrerPolicy: "no-referrer", allow: "clipboard-read; clipboard-write", style: { border: 0, width: '100%', height: '100%', flex: 1, display: 'block' } })] }));
+}
+function Caption({ children }) {
+    return ((0, jsx_runtime_1.jsx)(gui_1.XStack, { px: "$3", py: "$2", borderBottomWidth: 1, borderColor: "$borderColor", children: (0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: children }) }));
+}
+function Frame({ title, children, ...rest }) {
+    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('screen'), flex: 1, minH: 0, bg: "$panel", rounded: "$4", overflow: "hidden", ...rest, children: [title ? (0, jsx_runtime_1.jsx)(Caption, { children: title }) : null, (0, jsx_runtime_1.jsx)(gui_1.YStack, { flex: 1, items: "center", justify: "center", p: "$4", children: children })] }));
+}

package/dist/agents/Screen.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Screen — watching a run while it works.
+ *
+ * Some runs have something to look at: a sandbox serving an interactive page, a
+ * headful browser a person can watch over VNC. Most have nothing, and this
+ * component's first job is to say which it is, honestly — a viewer that draws a
+ * black rectangle for a run with no screen has told the reader the run is
+ * broken.
+ *
+ * THE CREDENTIAL NEVER OUTLIVES THE VIEW. A watchable surface is authorized by
+ * a short-lived TICKET the caller mints per view; this component asks for one
+ * when it mounts, embeds the page the ticket names, and asks for another if the
+ * viewer stays past its life. It does NOT take a URL with a long-lived token in
+ * it, and there is no prop to pass one — an embed URL ends up in browser
+ * history, in a screenshot, and in whatever the parent frame can read.
+ *
+ * The mint is a PROP, not an import, because who may watch is the surface's
+ * question and the answer lives in `@hanzo/ai` on one deployment and behind a
+ * BFF on another. This file owns the frame, the states and the refresh.
+ */
+import { YStack } from '@hanzo/gui';
+import { type ComponentProps, type ReactNode } from 'react';
+type Col = Omit<ComponentProps<typeof YStack>, 'children'>;
+/** What a mint answers with: where to look, and for how long. */
+export interface Ticket {
+    /** The page to embed. Already carries whatever the grant put in it. */
+    url: string;
+    /** Seconds until it stops working. Absent, the view is not refreshed. */
+    expiresIn?: number;
+}
+/** How a run's screen is served, for the label a viewer reads. */
+export type ScreenKind = 'sandbox' | 'browser';
+export interface ScreenProps extends Col {
+    /** The run being watched. Changing it re-mints. */
+    sessionId: string;
+    /**
+     * What this run has to look at. `null` means nothing does — the honest empty
+     * state, and the common case. The caller decides; this component never guesses
+     * from a session's shape.
+     */
+    kind?: ScreenKind | null;
+    /**
+     * Mint a view. Called on mount, on `sessionId` change, and shortly before the
+     * previous ticket expires. Throwing renders the failure with a retry.
+     */
+    mint?: (sessionId: string) => Promise<Ticket>;
+    /** Shown when `kind` is null. */
+    empty?: ReactNode;
+    title?: string;
+}
+export declare function Screen({ sessionId, kind, mint, empty, title, ...rest }: ScreenProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Screen.d.ts.map

package/dist/agents/Screen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Screen.d.ts","sourceRoot":"","sources":["../../src/agents/Screen.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAAuB,MAAM,EAAE,MAAM,YAAY,CAAA;AACxD,OAAO,EAA4C,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAIrG,KAAK,GAAG,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,UAAU,CAAC,CAAA;AAE1D,iEAAiE;AACjE,MAAM,WAAW,MAAM;IACrB,uEAAuE;IACvE,GAAG,EAAE,MAAM,CAAA;IACX,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,kEAAkE;AAClE,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,SAAS,CAAA;AAO9C,MAAM,WAAW,WAAY,SAAQ,GAAG;IACtC,mDAAmD;IACnD,SAAS,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,IAAI,CAAA;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,CAAC,CAAA;IAC7C,iCAAiC;IACjC,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAWD,wBAAgB,MAAM,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,WAAW,2CA2GnF"}

package/dist/agents/Screen.js

@@ -0,0 +1,89 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Screen — watching a run while it works.
+ *
+ * Some runs have something to look at: a sandbox serving an interactive page, a
+ * headful browser a person can watch over VNC. Most have nothing, and this
+ * component's first job is to say which it is, honestly — a viewer that draws a
+ * black rectangle for a run with no screen has told the reader the run is
+ * broken.
+ *
+ * THE CREDENTIAL NEVER OUTLIVES THE VIEW. A watchable surface is authorized by
+ * a short-lived TICKET the caller mints per view; this component asks for one
+ * when it mounts, embeds the page the ticket names, and asks for another if the
+ * viewer stays past its life. It does NOT take a URL with a long-lived token in
+ * it, and there is no prop to pass one — an embed URL ends up in browser
+ * history, in a screenshot, and in whatever the parent frame can read.
+ *
+ * The mint is a PROP, not an import, because who may watch is the surface's
+ * question and the answer lives in `@hanzo/ai` on one deployment and behind a
+ * BFF on another. This file owns the frame, the states and the refresh.
+ */
+import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { slot } from '../backends/gui/slot.js';
+const NAMES = {
+    sandbox: 'sandbox',
+    browser: 'browser',
+};
+/** Re-mint at 80% of a ticket's life — early enough that the frame never blinks. */
+const EARLY = 0.8;
+export function Screen({ sessionId, kind, mint, empty, title, ...rest }) {
+    const [state, setState] = useState({ phase: 'idle' });
+    const timer = useRef(null);
+    const live = useRef(true);
+    const open = useCallback(async () => {
+        if (!mint || !kind)
+            return;
+        setState({ phase: 'minting' });
+        try {
+            const ticket = await mint(sessionId);
+            if (!live.current)
+                return;
+            setState({ phase: 'watching', url: ticket.url });
+            if (ticket.expiresIn && ticket.expiresIn > 0) {
+                if (timer.current)
+                    clearTimeout(timer.current);
+                timer.current = setTimeout(() => void open(), ticket.expiresIn * 1000 * EARLY);
+            }
+        }
+        catch (err) {
+            if (!live.current)
+                return;
+            setState({
+                phase: 'failed',
+                message: err instanceof Error ? err.message : 'Could not open this screen.',
+            });
+        }
+    }, [mint, kind, sessionId]);
+    useEffect(() => {
+        live.current = true;
+        void open();
+        return () => {
+            live.current = false;
+            if (timer.current)
+                clearTimeout(timer.current);
+        };
+    }, [open]);
+    if (!kind) {
+        return (_jsx(Frame, { title: title, ...rest, children: empty ?? (_jsx(SizableText, { size: "$2", color: "$soft", children: "This run has no screen." })) }));
+    }
+    if (!mint) {
+        return (_jsx(Frame, { title: title, ...rest, children: _jsx(SizableText, { size: "$2", color: "$soft", children: "Watching is not wired up on this surface." }) }));
+    }
+    if (state.phase === 'failed') {
+        return (_jsx(Frame, { title: title, ...rest, children: _jsxs(YStack, { gap: "$2", items: "center", children: [_jsx(SizableText, { size: "$2", color: "$soft", children: state.message }), _jsx(SizableText, { size: "$2", color: "$color", cursor: "pointer", role: "button", tabIndex: 0, onPress: () => void open(), children: "Try again" })] }) }));
+    }
+    if (state.phase !== 'watching') {
+        return (_jsx(Frame, { title: title, ...rest, children: _jsxs(SizableText, { size: "$2", color: "$soft", children: ["Opening the ", NAMES[kind], "\u2026"] }) }));
+    }
+    return (_jsxs(YStack, { ...slot('screen'), flex: 1, minH: 0, bg: "$panel", rounded: "$4", overflow: "hidden", ...rest, children: [title ? _jsx(Caption, { children: title }) : null, _jsx("iframe", { src: state.url, title: title ?? `Live ${NAMES[kind]}`, sandbox: "allow-scripts allow-same-origin allow-forms", referrerPolicy: "no-referrer", allow: "clipboard-read; clipboard-write", style: { border: 0, width: '100%', height: '100%', flex: 1, display: 'block' } })] }));
+}
+function Caption({ children }) {
+    return (_jsx(XStack, { px: "$3", py: "$2", borderBottomWidth: 1, borderColor: "$borderColor", children: _jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: children }) }));
+}
+function Frame({ title, children, ...rest }) {
+    return (_jsxs(YStack, { ...slot('screen'), flex: 1, minH: 0, bg: "$panel", rounded: "$4", overflow: "hidden", ...rest, children: [title ? _jsx(Caption, { children: title }) : null, _jsx(YStack, { flex: 1, items: "center", justify: "center", p: "$4", children: children })] }));
+}
+//# sourceMappingURL=Screen.js.map

package/dist/agents/Screen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Screen.js","sourceRoot":"","sources":["../../src/agents/Screen.tsx"],"names":[],"mappings":"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"}