@hanzo/rooms 0.1.0

package/dist/Vibe.js

@@ -0,0 +1,188 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * /vibe — three columns: the runs started here, a frame pointed at whatever you
+ * are building, and the org's people.
+ *
+ * WHAT IS DRAWN WAS READ, OR IT IS NOT DRAWN. This room shipped as a stage set.
+ * It opened holding three members nobody had invited — one of them an
+ * individual, named in full at a live domain — all stamped "online" by a
+ * literal and counted in the header as "3 online". Under them sat two finished
+ * agent runs attributed to those people, priced at $0.0485 and $0.0192 over
+ * 146.0s and 32.1s, and three chat messages carrying a poll whose 3-to-1 tally
+ * nobody had voted in. The address bar named a host on another org's domain
+ * while the frame below it loaded /ocean, a path this site does not serve.
+ * Every one of those was typed into the file.
+ *
+ * The reads that answer are IAM's people, the platform's agents and models, and
+ * POST /v1/agents/coding. The chat column went entirely: nothing it displayed
+ * came from anywhere, and nothing typed into it ever left the browser — a room
+ * that only ever talked to itself. The preview column kept its frame and lost
+ * its claims: it now shows the URL in the bar, which is the one thing about it
+ * that was ever true.
+ */
+import { dev } from './lib/host.js';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useRooms } from './host.js';
+import { ArrowUp, Globe, Monitor, RefreshCw, Smartphone, Sparkles, Tablet, UserPlus, Users, } from 'lucide-react';
+import { View, XStack, YStack, Text } from '@hanzo/gui';
+import { Button, Picker } from '@hanzo/ui';
+import { AiProvider, useAgents, useModels, usePeople } from '@hanzo/ai/react';
+import { sku } from './lib/limits.js';
+import { useIam, useOrganizations } from '@hanzo/iam/react';
+import { hasSession } from './lib/session.js';
+import { useHydrated } from './lib/hydrated.js';
+import { ENSO, FREE, served, useAi } from './lib/ai.js';
+import { TopOrgSelector } from './OrgSwitcher.js';
+import { plainly, say } from './failure.js';
+import { invite } from './lib/home.js';
+import { startRun } from './lib/coding.js';
+import { Orgs } from './Orgs.js';
+const clock = () => new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+/** The one grey line, so every empty state in this room is written the same. */
+function Quiet({ children }) {
+    return (_jsx(Text, { fontSize: 11, color: "$soft", lineHeight: 16, children: children }));
+}
+/**
+ * The org's people and its agents.
+ *
+ * SPLIT OUT because `usePeople` needs an owner and a hook cannot be called
+ * conditionally — the same reason Home keeps `Mates` apart from `Team`.
+ *
+ * NOBODY IS MARKED PRESENT. Nothing here subscribes to presence, so "online"
+ * was a field set to the same string for everyone the moment the file loaded.
+ * A directory can say who belongs to the org; it cannot say who is looking.
+ */
+function Members({ owner }) {
+    const { people, loading, error } = usePeople({ owner, service: false });
+    const { agents, loading: counting, error: refused } = useAgents();
+    const wrong = error ?? refused;
+    if (wrong)
+        return _jsx(Quiet, { children: say(wrong, 'your team') });
+    const rows = [
+        ...people.map((p) => ({
+            key: p.id,
+            name: p.displayName || p.name,
+            detail: p.email || '',
+            // A ROLE IS A CLAIM IAM MAKES OR NOBODY DOES.
+            role: p.admin ? 'Admin' : '',
+            mark: (p.displayName || p.name || '?').charAt(0).toUpperCase(),
+        })),
+        ...agents.map((a) => ({
+            key: a.id,
+            name: a.name,
+            detail: a.model || '',
+            role: 'Agent',
+            mark: a.emoji || a.name.charAt(0).toUpperCase(),
+        })),
+    ];
+    if (rows.length === 0)
+        return _jsx(Quiet, { children: loading || counting ? 'Reading.' : 'Nobody in this org yet.' });
+    return (_jsx(YStack, { gap: "$1.5", children: rows.map((r) => (_jsxs(XStack, { items: "center", justify: "space-between", p: "$2", rounded: 8, bg: "$panel", children: [_jsxs(XStack, { items: "center", gap: "$2.5", flex: 1, overflow: "hidden", children: [_jsx(View, { width: 24, height: 24, rounded: 12, bg: "$raised", items: "center", justify: "center", shrink: 0, children: _jsx(Text, { fontSize: 10, fontWeight: "700", color: "$ink", children: r.mark }) }), _jsxs(YStack, { flex: 1, overflow: "hidden", children: [_jsx(Text, { fontSize: 12, fontWeight: "600", color: "$ink", numberOfLines: 1, children: r.name }), r.detail ? (_jsx(Text, { fontSize: 10, color: "$soft", numberOfLines: 1, children: r.detail })) : null] })] }), r.role ? (_jsx(View, { px: 6, py: 2, rounded: 4, bg: "$hover", children: _jsx(Text, { fontSize: 10, color: "$soft", children: r.role }) })) : null] }, r.key))) }));
+}
+/**
+ * The session is asked FIRST, because it is the state that never resolves — a
+ * reader nobody will answer would sit on "Reading." until they closed the tab.
+ *
+ * `useHydrated` keeps the server's render and the first client one agreeing:
+ * `useOrganizations` resolves synchronously in the browser and never on the
+ * server, and React answers a text mismatch by throwing the tree away.
+ */
+function Team() {
+    const hydrated = useHydrated();
+    const { isAuthenticated } = useIam();
+    const signedIn = isAuthenticated || hasSession();
+    const { currentOrgId } = useOrganizations() || {};
+    if (!hydrated)
+        return _jsx(Quiet, { children: "\u00A0" });
+    if (!signedIn)
+        return _jsx(Quiet, { children: "Sign in to see who is in this workspace." });
+    if (!currentOrgId)
+        return _jsx(Quiet, { children: "Reading." });
+    return _jsx(Members, { owner: currentOrgId });
+}
+/**
+ * THIS ROOM MOUNTS ITS OWN CLIENT.
+ *
+ * Every other room on this site arrives under `Room` → `Workspace`, which
+ * supplies the `AiProvider` for the whole shell. `/vibe` is routed straight to
+ * this component, so nothing above it does — and the moment anything here reads
+ * the platform, `useAi` raises and the route answers 500. The provider prefers
+ * the `client` prop over the one it builds itself, so a session that settles
+ * after mount reaches the hooks below; signed out, its own anonymous client
+ * stands in and the org-scoped reads simply answer nothing.
+ *
+ * The reading half is a separate component because a hook cannot run in the
+ * component that mounts its provider.
+ */
+function VibeWorkspaceInner() {
+    const { client } = useAi();
+    return (_jsx(AiProvider, { client: client ?? undefined, children: _jsx(Vibe, {}) }));
+}
+function Vibe() {
+    const { Link } = useRooms();
+    const { user } = useIam();
+    // Hanzo models alone, as every picker here offers them (`sku`).
+    const { models: listed } = useModels();
+    const models = useMemo(() => listed.filter((m) => sku(m.id)), [listed]);
+    const [activeTabMobile, setActiveTabMobile] = useState('stream');
+    // The frame shows what the bar says. It starts empty because a run publishes
+    // no URL — the 202 names a session, not an address — so this room has nothing
+    // to point at until somebody points it.
+    const [previewUrl, setPreviewUrl] = useState('');
+    const [previewDevice, setPreviewDevice] = useState('desktop');
+    const [previewKey, setPreviewKey] = useState(0);
+    const [agentInput, setAgentInput] = useState('');
+    // The house name for the lane, resolved against what the gateway serves —
+    // `served` falls to a model that answers rather than sending one nobody has.
+    const [wanted, setWanted] = useState(user ? ENSO : FREE);
+    const model = served(models, wanted);
+    const [busy, setBusy] = useState(false);
+    const [turns, setTurns] = useState([]);
+    const bottom = useRef(null);
+    useEffect(() => {
+        bottom.current?.scrollIntoView({ behavior: 'smooth' });
+    }, [turns]);
+    const who = user?.displayName || user?.name || user?.email || 'You';
+    /**
+     * SEND THE PROMPT, AND SAY WHAT CAME BACK.
+     *
+     * `repo` is no longer sent. It carried the room's name — which defaulted to
+     * `ocean-genesis-room` and was editable free text — into a field the contract
+     * defines as `owner/name` in the caller's own org, so a label typed in a
+     * header reached a real write as a repository. Omitting it is what the
+     * contract means by optional: the server picks the default.
+     */
+    const send = () => {
+        const task = agentInput.trim();
+        if (!task || busy)
+            return;
+        const id = `t${Date.now()}`;
+        setAgentInput('');
+        setBusy(true);
+        setTurns((prev) => [...prev, { id, time: clock(), who, prompt: task, model }]);
+        startRun({ prompt: task, model })
+            .then((run) => setTurns((prev) => prev.map((t) => (t.id === id ? { ...t, run } : t))))
+            .catch((e) => setTurns((prev) => prev.map((t) => (t.id === id ? { ...t, refused: plainly(e, 'this run') } : t))))
+            .finally(() => setBusy(false));
+    };
+    return (_jsxs(YStack, { "data-vibe": true, flex: 1, minH: 0, height: "100vh", width: "100%", maxW: "100%", overflowX: "auto", overflowY: "hidden", bg: "$background", pb: 56, children: [_jsxs(XStack, { height: 52, items: "center", justify: "space-between", px: "$3.5", borderBottomWidth: 1, borderColor: "$borderColor", bg: "$background", z: 30, shrink: 0, children: [_jsxs(XStack, { items: "center", gap: "$2.5", children: [_jsx(TopOrgSelector, {}), _jsxs(XStack, { display: "none", $md: { display: 'flex' }, items: "center", gap: "$2", py: 4, px: 10, rounded: 20, bg: "$panel", borderWidth: 1, borderColor: "$borderColor", children: [_jsx(View, { width: 7, height: 7, rounded: 4, bg: busy ? 'var(--state-online)' : '$faint' }), _jsx(Text, { fontSize: 11, color: "$quiet", fontWeight: "500", children: busy ? 'Starting a run' : 'Idle' })] })] }), _jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(XStack, { $md: { display: 'none' }, bg: "$panel", rounded: 8, p: 2, gap: 2, borderWidth: 1, borderColor: "$borderColor", children: ['stream', 'preview', 'team'].map((tab) => (_jsx(Button, { size: "sm", px: "$2", variant: activeTabMobile === tab ? 'secondary' : 'ghost', color: activeTabMobile === tab ? '$ink' : '$soft', "aria-pressed": activeTabMobile === tab, onClick: () => setActiveTabMobile(tab), children: tab === 'stream' ? 'Stream' : tab === 'preview' ? 'Preview' : 'Team' }, tab))) }), _jsx(Button, { asChild: true, variant: "primary", size: "sm", children: _jsxs(Link, { href: invite(), children: [_jsx(UserPlus, { size: 13 }), "Invite"] }) })] })] }), _jsxs(View, { flex: 1, minH: 0, width: "100%", height: "100%", overflow: "hidden", display: "grid", gridTemplateRows: "100%", gridTemplateColumns: "100%", $md: { gridTemplateColumns: 'minmax(320px, 380px) minmax(0, 1fr)' }, $lg: { gridTemplateColumns: 'minmax(340px, 400px) minmax(360px, 1fr) minmax(300px, 340px)' }, $xl: { gridTemplateColumns: 'minmax(380px, 440px) minmax(480px, 1fr) minmax(340px, 380px)' }, children: [_jsxs(YStack, { height: "100%", borderRightWidth: 1, borderColor: "$borderColor", bg: "$background", minW: 0, display: activeTabMobile === 'stream' ? 'flex' : 'none', $md: { display: 'flex' }, children: [_jsxs(XStack, { height: 42, items: "center", gap: "$2", px: "$3.5", borderBottomWidth: 1, borderColor: "$borderColor", bg: "$background", children: [_jsx(Sparkles, { size: 14, color: "var(--foreground)" }), _jsx(Text, { fontSize: 12, fontWeight: "600", color: "$ink", children: "Runs" }), turns.length > 0 && (_jsx(View, { px: 6, py: 2, rounded: 4, bg: "$hover", children: _jsx(Text, { fontSize: 10, color: "$soft", children: turns.length }) }))] }), _jsxs(YStack, { flex: 1, overflow: "scroll", p: "$3.5", gap: "$4", children: [turns.length === 0 ? (_jsx(Quiet, { children: "Nothing has been sent from this room yet. Describe a task below and the run it opens appears here." })) : null, turns.map((turn) => (_jsxs(YStack, { gap: "$2.5", children: [_jsxs(XStack, { gap: "$2.5", children: [_jsx(View, { width: 24, height: 24, rounded: 12, bg: "$raised", items: "center", justify: "center", shrink: 0, children: _jsx(Text, { fontSize: 10, fontWeight: "700", color: "$ink", children: turn.who.charAt(0).toUpperCase() }) }), _jsxs(YStack, { flex: 1, gap: "$1", children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(Text, { fontSize: 12, fontWeight: "700", color: "$ink", children: turn.who }), _jsx(Text, { fontSize: 11, color: "$soft", children: turn.time }), _jsx(View, { px: 5, py: 1, rounded: 4, bg: "$hover", children: _jsx(Text, { fontSize: 10, color: "$soft", fontFamily: "$mono", children: turn.model }) })] }), _jsx(Text, { fontSize: 12, color: "$quiet", lineHeight: 18, children: turn.prompt })] })] }), _jsx(YStack, { ml: "$4", gap: "$1.5", children: turn.refused ? (_jsx(Text, { fontSize: 11, color: "$ink", lineHeight: 16, children: turn.refused })) : !turn.run ? (_jsx(Quiet, { children: "Starting." })) : (_jsxs(YStack, { p: "$2", rounded: 8, bg: "$panel", borderWidth: 1, borderColor: "$borderColor", gap: "$1", children: [_jsx(Text, { fontSize: 11, color: "$quiet", fontFamily: "$mono", children: turn.run.sessionId }), _jsxs(Text, { fontSize: 11, color: "$soft", children: [turn.run.routed
+                                                                    ? `Running on ${turn.run.targetId}`
+                                                                    : 'Running in a sandbox', turn.run.branch ? ` · ${turn.run.branch}` : ''] }), _jsx(Text, { render: _jsx(Link, { href: dev(turn.run.sessionId) }), color: "$ink", fontSize: "$1", children: "Watch it work" })] })) })] }, turn.id))), _jsx("div", { ref: bottom })] }), _jsxs(YStack, { p: "$3", borderTopWidth: 1, borderColor: "$borderColor", bg: "$background", gap: "$2", children: [_jsxs(XStack, { items: "center", justify: "space-between", gap: "$2", children: [_jsxs(Picker, { value: model, onChange: (e) => setWanted(e.target.value), "aria-label": "Model", maxW: 200, children: [models.length === 0 ? _jsx("option", { value: model, children: model }) : null, models.map((m) => (_jsx("option", { value: m.id, children: m.id }, m.id)))] }), _jsx(Text, { fontSize: 10, color: "$faint", children: "Press Enter to send" })] }), _jsxs(YStack, { bg: "$panel", borderWidth: 1, borderColor: "var(--border-control)", rounded: 12, overflow: "hidden", children: [_jsx(Text, { render: _jsx("textarea", { value: agentInput, onChange: (e) => setAgentInput(e.target.value), onKeyDown: (e) => {
+                                                        if (e.key === 'Enter' && !e.shiftKey) {
+                                                            e.preventDefault();
+                                                            send();
+                                                        }
+                                                    }, placeholder: "Describe a task and an agent starts on it\u2026", rows: 2, disabled: busy }), "$platform-web": { resize: 'none' }, width: "100%", bg: "transparent", px: 12, py: 10, color: "$ink", fontSize: "$2", outlineStyle: "none", borderWidth: 0 }), _jsx(XStack, { items: "center", justify: "flex-end", px: "$2.5", pb: "$2", children: _jsxs(Button, { variant: "primary", size: "sm", onClick: send, disabled: !agentInput.trim() || busy, children: ["Send", _jsx(ArrowUp, { size: 13 })] }) })] })] })] }), _jsxs(YStack, { height: "100%", borderRightWidth: 1, borderColor: "$borderColor", bg: "$background", minW: 0, display: activeTabMobile === 'preview' ? 'flex' : 'none', $md: { display: 'flex' }, children: [_jsxs(XStack, { height: 42, items: "center", justify: "space-between", gap: "$2", px: "$3", borderBottomWidth: 1, borderColor: "$borderColor", bg: "$background", children: [_jsxs(XStack, { items: "center", gap: "$2", flex: 1, maxW: 420, bg: "$panel", rounded: 6, px: "$2.5", py: 3, borderWidth: 1, borderColor: "var(--border-control)", children: [_jsx(Globe, { size: 13, color: "var(--muted-foreground)" }), _jsx(Text, { render: _jsx("input", { type: "text", value: previewUrl, onChange: (e) => setPreviewUrl(e.target.value), placeholder: "https://\u2026" }), flex: 1, bg: "transparent", borderWidth: 0, color: "$ink", fontSize: "$1", fontFamily: "$mono", outlineStyle: "none" })] }), _jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(XStack, { items: "center", gap: 2, bg: "$panel", rounded: 6, p: 2, borderWidth: 1, borderColor: "$borderColor", children: [
+                                                    ['desktop', 'Desktop', Monitor],
+                                                    ['tablet', 'Tablet', Tablet],
+                                                    ['mobile', 'Mobile', Smartphone],
+                                                ].map(([device, label, Glyph]) => (_jsx(Button, { variant: previewDevice === device ? 'secondary' : 'ghost', size: "icon-sm", "aria-label": label, title: label, "aria-pressed": previewDevice === device, onClick: () => setPreviewDevice(device), children: _jsx(Glyph, { size: 12, color: previewDevice === device ? 'var(--foreground)' : 'var(--muted-foreground)' }) }, device))) }), _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Reload preview", title: "Reload preview", onClick: () => setPreviewKey((k) => k + 1), children: _jsx(RefreshCw, { size: 12, color: "var(--muted-foreground)" }) })] })] }), _jsx(YStack, { flex: 1, items: "center", justify: "center", bg: "$background", p: "$2", children: previewUrl.trim() === '' ? (_jsx(Quiet, { children: "Nothing to show. Put the address of what you are building in the bar." })) : (_jsx(View, { width: previewDevice === 'desktop' ? '100%' : previewDevice === 'tablet' ? 768 : 375, maxW: "100%", height: "100%", bg: "$background", rounded: previewDevice === 'desktop' ? 0 : 8, overflow: "hidden", borderWidth: previewDevice === 'desktop' ? 0 : 1, borderColor: "var(--border-control)", boxShadow: "var(--shadow-lg)", children: _jsx(View, { render: _jsx("iframe", { src: previewUrl, sandbox: "allow-scripts allow-forms allow-popups allow-same-origin", title: "Preview" }), width: "100%", height: "100%", borderWidth: 0 }) }, previewKey)) })] }), _jsxs(YStack, { height: "100%", bg: "$background", minW: 0, display: activeTabMobile === 'team' ? 'flex' : 'none', $md: { display: 'none' }, $lg: { display: 'flex' }, children: [_jsxs(XStack, { height: 42, items: "center", gap: "$2", px: "$3", borderBottomWidth: 1, borderColor: "$borderColor", bg: "$background", children: [_jsx(Users, { size: 14, color: "var(--foreground)" }), _jsx(Text, { fontSize: 12, fontWeight: "600", color: "$ink", children: "People" })] }), _jsx(YStack, { flex: 1, overflow: "scroll", p: "$3", gap: "$3", children: _jsx(Team, {}) })] })] })] }));
+}
+// THE GATE IS NOT A ROOM'S TO REMEMBER. This room draws its own shell rather
+// than `Room`, which is where every other room picks the organization gate up —
+// so it was reachable, and usable, by an account that had never paid. Wrapping
+// the export means the route cannot mount the room without it.
+export function VibeWorkspace() {
+    return (_jsx(Orgs, { children: _jsx(VibeWorkspaceInner, {}) }));
+}

package/dist/Work.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from 'react';
+/**
+ * The board, and the session its reads need.
+ *
+ * SPLIT so the hooks below never run for a reader with none: sessions and their
+ * trees are the org's, answered 403 without a session, and a hook cannot be
+ * called conditionally — so the condition is a component boundary rather than
+ * an `if` the rules forbid.
+ */
+export declare function Work({ idle }: {
+    idle?: ReactNode;
+}): import("react").JSX.Element;

package/dist/Work.js

@@ -0,0 +1,256 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The working view: what is running, what it did, and what it made.
+//
+// Every piece here comes from `@hanzo/ui/agents` and every fact from
+// `@hanzo/ai`. This file is arrangement — it owns no pixels and no transport,
+// which is the test of whether the lift actually landed: a stranger with the
+// two packages can assemble this room, and a channel workspace will assemble
+// the same one from the same parts.
+//
+// THE BOARD IS A TREE, not a list. `sessions.list` answers ROOT sessions only,
+// so a fan-out is invisible until you ask for it: each root with `children > 0`
+// gets one `tree` read, and `nest` is not needed here because the server
+// already materialises the nesting. A root with no children costs no request.
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useAi, useSession, useSessions } from '@hanzo/ai/react';
+import { useOpen } from './open.js';
+import { AgentBoard, ChannelHeader, Pane, ProgressBlock, Steer, steps, } from '@hanzo/ui/agents';
+import { Text, XStack, YStack } from '@hanzo/ui';
+import { useIam } from '@hanzo/iam/react';
+import { Composer } from '@hanzo/ui/chat';
+import { Start } from './Start.js';
+import { Bar } from './progress.js';
+/** The server's four statuses, plus the honest fallback for anything else. */
+const STATUS = (s) => s === 'running' || s === 'paused' || s === 'done' || s === 'error' ? s : 'unknown';
+/**
+ * A session as the board reads it.
+ *
+ * `doing` is `lastEvent.preview` — the first 240 BYTES of a payload, cut
+ * without regard for JSON or rune boundaries. It is rendered, never parsed, and
+ * never re-cut here: a second truncation of an already-truncated string is how
+ * a preview becomes a fragment of a fragment.
+ */
+/**
+ * What the run is doing, in words.
+ *
+ * The preview is the first 240 bytes of the raw event, so for a machine payload
+ * it arrives as `{"type":"done","finishRea…` — a fragment of JSON with the
+ * closing brace cut off. Rendering that put twenty-five lines of escaped JSON
+ * down the board where the summaries belong, which reads as a crash.
+ *
+ * It cannot be parsed back (it is truncated by construction), so this reads the
+ * one field that survives the cut — `type` is written first by every producer —
+ * and says it. Anything that does not look like a payload is human text already
+ * and passes through untouched.
+ */
+const say = (preview) => {
+    if (!preview)
+        return undefined;
+    const raw = preview.trim();
+    if (!raw.startsWith('{') && !raw.startsWith('"{') && !raw.startsWith('['))
+        return preview;
+    const kind = /"type"\s*:\s*\\?"([a-z_]+)/i.exec(raw)?.[1];
+    switch (kind) {
+        case 'done': return 'Finished';
+        case 'error': return 'Failed';
+        case 'start': return 'Starting';
+        case 'tool':
+        case 'tool_call': return 'Using a tool';
+        case 'text':
+        case 'delta': return 'Writing';
+        case undefined: return undefined;
+        default: return kind.replace(/_/g, ' ');
+    }
+};
+const toRun = (s, children = []) => ({
+    id: s.id,
+    agent: s.agent || s.title || s.id,
+    status: STATUS(s.status),
+    doing: say(s.lastEvent?.preview),
+    target: s.target,
+    project: s.project,
+    children,
+});
+/** Flatten the server's tree into the board's, dropping the node we asked for. */
+const kidsOf = (node) => 
+// `children` is NULL on a leaf, not `[]` — the guard is load-bearing.
+(node?.children ?? []).map((child) => child.session ? toRun(child.session, kidsOf(child)) : null).filter((r) => r !== null);
+function Watching({ idle }) {
+    const ai = useAi();
+    const { sessions, loading, reload } = useSessions({ limit: 100 });
+    // THE OPEN RUN IS THE SHELL'S, not this pane's. `Start` announces a new run by
+    // writing `openSession`, which is how /dev picks it up; this pane kept its own
+    // useState and so never heard, and the one control the idle state offers spent
+    // money on a real run and left the reader reading "No runs yet". Same store,
+    // and the list is re-read when the id changes so the new row is there to open.
+    const { session: open, openSession: setOpen } = useOpen();
+    const [trees, setTrees] = useState({});
+    useEffect(() => {
+        if (open)
+            reload();
+    }, [open, reload]);
+    // One `tree` read per root that says it has children. Roots without a
+    // fan-out are left alone, so an org of solo runs costs exactly one request.
+    useEffect(() => {
+        const safeSessions = Array.isArray(sessions) ? sessions : [];
+        const swarms = safeSessions.filter((s) => (s?.children ?? 0) > 0);
+        if (!swarms.length)
+            return;
+        const stop = new AbortController();
+        void Promise.all(swarms.map((s) => ai.sessions
+            .tree(s.id, { signal: stop.signal })
+            .then((node) => [s.id, kidsOf(node)])
+            .catch(() => [s.id, []]))).then((pairs) => {
+            if (!stop.signal.aborted)
+                setTrees(Object.fromEntries(pairs));
+        });
+        return () => stop.abort();
+    }, [ai, sessions]);
+    const runs = useMemo(() => sessions.map((s) => toRun(s, trees[s.id] ?? [])), [sessions, trees]);
+    return (_jsxs(YStack, { flex: 1, minH: 0, width: "100%", $lg: { flexDirection: 'row' }, children: [_jsx(YStack
+            // AN EMPTY BOARD DRAWS NOTHING ACROSS THE TOP. As a full-width strip it
+            // reserved 270px and a hairline for one line of grey text, and pushed
+            // the pane's own content most of a screen down — a narrow window's
+            // whole budget spent saying there is nothing to show. As a COLUMN it is
+            // still worth drawing empty, because a column with a heading is where a
+            // reader looks for the list; a strip is not.
+            , { 
+                // AN EMPTY BOARD DRAWS NOTHING ACROSS THE TOP. As a full-width strip it
+                // reserved 270px and a hairline for one line of grey text, and pushed
+                // the pane's own content most of a screen down — a narrow window's
+                // whole budget spent saying there is nothing to show. As a COLUMN it is
+                // still worth drawing empty, because a column with a heading is where a
+                // reader looks for the list; a strip is not.
+                display: runs.length === 0 ? 'none' : 'flex', width: "100%", 
+                // A STRIP HAS A HEIGHT, and `maxHeight` could not give it one. The
+                // board inside is a ScrollView at `flex: 1 1 0` — a zero basis — so in
+                // a column with an auto height it measured 1px and the strip vanished.
+                // "Up to 220" is not expressible over a child that contributes nothing;
+                // 220 is.
+                height: 220, shrink: 0, borderBottomWidth: 1, 
+                // A COLUMN NEEDS A WINDOW WIDE ENOUGH FOR TWO. At 640 this took 300 of
+                // the 316px left after the rail and the sidebar, so the pane beside it
+                // was 32px wide and the run itself was unreadable — a narrow strip with
+                // a rule down it, which is what a squeezed column looks like. Above
+                // 1024 there is room for both; below it the board is a strip across the
+                // top and the run has the whole width under it.
+                //
+                // STATE THE VALUE, NEVER `undefined`. gui emits nothing for an
+                // undefined value, so the base cap this block used to lift SURVIVED
+                // into `$lg` and the full-height column described here was a 220px stub
+                // at every width — measured in the browser at 1280.
+                $lg: {
+                    display: 'flex',
+                    width: 300,
+                    shrink: 0,
+                    height: '100%',
+                    borderBottomWidth: 0,
+                    borderRightWidth: 1,
+                }, borderColor: "$borderColor", children: _jsx(AgentBoard, { runs: runs, active: open ?? undefined, onOpen: setOpen, empty: _jsx(Text, { fontSize: "$2", color: "$soft", children: loading ? 'Reading runs…' : 'No runs yet. Start one and it appears here.' }) }) }), _jsx(YStack, { width: "100%", flex: 1, minW: 0, minH: 0, $lg: { width: 'auto' }, children: open ? _jsx(Watch, { id: open }, open) : (idle ?? _jsx(Idle, { runs: runs.length })) })] }));
+}
+/**
+ * Nothing is open. What that MEANS depends on whether there is anything to
+ * open: with runs on the board it is an instruction, and with none the pane is
+ * the whole width (the board draws nothing) and the honest thing to show is the
+ * home — the composer and what to do next.
+ */
+function Idle({ runs }) {
+    if (runs === 0) {
+        return (_jsx(YStack, { flex: 1, minH: 0, overflow: "scroll", children: _jsxs(YStack, { width: "100%", maxW: 640, mx: "auto", px: "$5", pt: "$10", gap: "$4", children: [_jsxs(YStack, { gap: "$2", children: [_jsx(Text, { render: "h1", fontSize: "$7", fontWeight: "500", color: "$ink", children: "Start a run" }), _jsx(Text, { fontSize: "$3", color: "$soft", maxW: 520, children: "Give an agent a task. Its plan, progress, and output will appear here." })] }), _jsx(Start, {}), _jsx(Text, { fontSize: "$1", color: "$soft", children: "Runs stay visible in Working so you can inspect or steer them at any time." })] }) }));
+    }
+    return (_jsx(YStack, { flex: 1, items: "center", justify: "center", p: "$6", children: _jsx(Text, { fontSize: "$3", color: "$soft", children: "Pick a run to watch it work." }) }));
+}
+/**
+ * One run: its steps on the left, whatever it produced on the right.
+ *
+ * KEYED BY THE RUN at the call site, so opening a different one REMOUNTS — the
+ * live tail, the draft and the last confirmation all start empty rather than
+ * carrying the previous run's.
+ */
+function Watch({ id }) {
+    const ai = useAi();
+    const { session } = useSession(id);
+    const [live, setLive] = useState([]);
+    const [draft, setDraft] = useState('');
+    const [note, setNote] = useState(null);
+    // The live feed, narrowed to this run's tree. There is no per-session stream
+    // — `/v1/agents/sessions/{id}/stream` does not exist — so `root` is how one
+    // run is watched, and it brings its sub-agents' turns with it.
+    useEffect(() => {
+        const stop = new AbortController();
+        void (async () => {
+            try {
+                for await (const frame of ai.sessions.stream({ root: id }, { signal: stop.signal })) {
+                    if (stop.signal.aborted)
+                        return;
+                    if (frame.kind === 'event')
+                        setLive((prev) => [...prev, frame.event]);
+                }
+            }
+            catch {
+                // A dropped feed is ordinary. What is on screen stands.
+            }
+        })();
+        return () => stop.abort();
+    }, [ai, id]);
+    // The 50 the detail carries, then everything the feed added, deduped by seq —
+    // the two overlap whenever a turn lands between the read and the subscribe.
+    const events = useMemo(() => {
+        const seen = new Map();
+        for (const [i, e] of [...(session?.recentEvents ?? []), ...live].entries()) {
+            seen.set(e.seq !== undefined ? `s${e.seq}` : (e.id ?? `i${i}`), e);
+        }
+        return [...seen.values()].sort((a, b) => (a.seq ?? 0) - (b.seq ?? 0));
+    }, [session?.recentEvents, live]);
+    const { steps: shown, message } = useMemo(() => steps(events), [events]);
+    const status = STATUS(session?.status);
+    const finished = status === 'done' || status === 'error';
+    const steer = useCallback(async (command) => {
+        setNote(null);
+        try {
+            await ai.sessions.steer(id, command);
+            setNote(`${command} queued — it takes effect between turns`);
+        }
+        catch {
+            setNote(`Could not ${command} this run`);
+        }
+    }, [ai, id]);
+    const send = useCallback(async () => {
+        const text = draft.trim();
+        if (!text)
+            return;
+        setDraft('');
+        setNote(null);
+        try {
+            await ai.sessions.steer(id, 'message', { message: text });
+            setNote('Sent — the agent reads it between turns');
+        }
+        catch {
+            setNote('Could not reach this run');
+        }
+    }, [ai, draft, id]);
+    return (_jsxs(XStack, { flex: 1, minH: 0, flexWrap: "wrap", children: [_jsxs(YStack, { flex: 1, minH: 0, minW: 0, children: [_jsx(ChannelHeader, { name: session?.title || session?.agent || id, artifacts: 0 }), _jsx(XStack, { px: "$4", pb: "$2", children: _jsx(Bar, { run: session }) }), _jsx(YStack, { flex: 1, minH: 0, overflow: "scroll", p: "$4", gap: "$4", children: _jsx(ProgressBlock, { steps: shown, done: finished, children: message ? (_jsx(Text, { fontSize: "$4", color: "$ink", children: message })) : null }) }), _jsxs(YStack, { p: "$3", gap: "$2", borderTopWidth: 1, borderColor: "$borderColor", children: [_jsx(Steer, { onCommand: (c) => void steer(c), withhold: finished ? ['pause', 'resume', 'stop'] : [], note: note }), _jsx(Composer, { value: draft, onChange: setDraft, onSend: () => void send(), placeholder: "Steer this run\u2026", label: "Steer this run" })] })] }), _jsx(YStack, { width: "100%", p: "$3", borderTopWidth: 1, $sm: { width: 420, shrink: 0, borderTopWidth: 0, borderLeftWidth: 1 }, borderColor: "$borderColor", children: _jsx(Pane, { tabs: [
+                        { id: 'code', label: 'Code', kind: 'code', content: _jsx(Nothing, { what: "changes" }) },
+                        { id: 'view', label: 'View', kind: 'view', content: _jsx(Nothing, { what: "preview" }) },
+                        { id: 'canvas', label: 'Canvas', kind: 'canvas', content: _jsx(Nothing, { what: "summary" }) },
+                    ] }) })] }));
+}
+function Nothing({ what }) {
+    return (_jsxs(Text, { fontSize: "$2", color: "$soft", children: ["This run has produced no ", what, " yet."] }));
+}
+/**
+ * The board, and the session its reads need.
+ *
+ * SPLIT so the hooks below never run for a reader with none: sessions and their
+ * trees are the org's, answered 403 without a session, and a hook cannot be
+ * called conditionally — so the condition is a component boundary rather than
+ * an `if` the rules forbid.
+ */
+export function Work({ idle }) {
+    const { user, isLoading } = useIam();
+    if (isLoading || !user) {
+        return (_jsxs(YStack, { flex: 1, items: "center", justify: "center", p: "$6", gap: "$2", children: [_jsx(Text, { render: "h1", fontSize: "$5", fontWeight: "600", color: "$ink", children: "Agents" }), _jsx(Text, { fontSize: "$3", color: "$soft", text: "center", children: isLoading ? '\u00a0' : 'Sign in to watch your agents work.' })] }));
+    }
+    return _jsx(Watching, { idle: idle });
+}

package/dist/bots/Bots.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function Bots(): React.JSX.Element;