@hanzo/rooms 0.1.0

package/dist/Board.js

@@ -0,0 +1,447 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Board: the org's work, and the day beside it.
+//
+// NAMED BOARD, NOT TASKS, and the rename is the point rather than a tidy-up.
+// `/v1/tasks` is Hanzo Tasks — the durable execution engine, ten thousand
+// workflow runs deep — and this room is a board of forge issues. Two different
+// things wearing one word is how somebody comes to believe the board IS the
+// engine, and asks why their cards are not replayable. Tasks keeps the word it
+// earned; this is the Board.
+//
+// A CARD IS A FORGE ISSUE. `/v1/todo` says so itself — "the column is a LABEL on
+// the forge, so the board and the forge web UI are the same object seen twice:
+// relabelling in either moves the card in both" — so this surface keeps no work
+// of its own. Everything drawn here is a row somebody could also have moved from
+// the forge, and everything written here is a row they will find there.
+//
+// TWO READINGS OF ONE SET OF CARDS, and one of them is up at a time: the board
+// by column, the planner by date. The room opens on the board, which is what it
+// is called. There is no inbox pane: the workspace already has one, and a second
+// would be two places for the same arriving thing.
+//
+// WHAT A CARD CAN CARRY is what the store holds — a title, a description, a
+// column, a priority, an assignee, labels, a start and a due date. Checklists
+// ride in the description as markdown task items, which is not a workaround but
+// the way a forge issue has always spelled one, so a step ticked here is ticked
+// in the forge and a step written there arrives here. Covers and file
+// attachments have nowhere to live yet, so they are not drawn.
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useAgents, usePeople } from '@hanzo/ai/react';
+import { Box, Text, View, XStack, YStack } from '@hanzo/ui';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@hanzo/ui';
+import { useIam, useOrganizations } from '@hanzo/iam/react';
+import { Calendar, CalendarClock, Check, ChevronLeft, ChevronRight, Columns3, ListChecks, ListFilter, SquareTerminal, Plus, Tag, UserPlus, X, } from 'lucide-react';
+import { useOpen } from './open.js';
+import { useAi } from './lib/ai.js';
+import { Face } from './cast.js';
+import { say } from './failure.js';
+import { AGENT_QUEUE, AGENT_WORKFLOW, reads, runOf, start as startRun, } from './lib/durable.js';
+import { COLUMNS, PRIORITIES, addStep, board as readBoard, claim, edit, open as openCard, projects as readProjects, sift, steps, tick, } from './lib/todo.js';
+import { BAD } from './lib/mix.js';
+const DAY = 86400;
+/** A pane with nothing in it yet, centred, saying which nothing it is. */
+function Empty({ children }) {
+    return (_jsxs(YStack, { flex: 1, items: "center", justify: "center", p: "$6", gap: "$2", children: [_jsx(Text, { render: "h1", fontSize: "$6", fontWeight: "600", color: "var(--foreground)", children: "Board" }), _jsx(Text, { fontSize: "$3", color: "$soft", text: "center", children: children })] }));
+}
+/** A quiet control that says its verb. */
+function Act({ icon: Icon, label, on, onPress, }) {
+    return (_jsx(Box, { render: "button", onClick: onPress, "aria-pressed": on, px: "$2.5", py: "$1.5", rounded: "$2", bg: on ? '$raised' : 'transparent', borderWidth: 1, borderColor: on ? '$borderColor' : 'transparent', hoverStyle: { bg: '$hover' }, children: _jsxs(XStack, { items: "center", gap: "$1.5", children: [Icon ? _jsx(Icon, { size: 13, "aria-hidden": true }) : null, _jsx(Text, { fontSize: "$1", color: "$ink", children: label })] }) }));
+}
+/** A label: a neutral badge, so a board reads by its words, not a hue per name. */
+function Label({ name }) {
+    return (_jsx(XStack, { px: "$2", py: "$0.5", rounded: "$2", bg: "$hover", borderWidth: 1, borderColor: "$borderColor", children: _jsx(Text, { fontSize: "$1", color: "$soft", numberOfLines: 1, children: name }) }));
+}
+/** A date, as a person says it. */
+function when(unix) {
+    if (!unix)
+        return '';
+    const at = new Date(unix * 1000);
+    const now = new Date();
+    const same = at.getFullYear() === now.getFullYear();
+    return at.toLocaleDateString(undefined, {
+        month: 'short',
+        day: 'numeric',
+        ...(same ? {} : { year: 'numeric' }),
+    });
+}
+/**
+ * WHAT A DAY IS CALLED, from where it sits relative to now.
+ *
+ * "Saturday" is the right name for a day three weeks out and the wrong one for
+ * the day you are standing in — a reader looking at the planner already knows
+ * what today is, and being told the weekday makes them work out whether that IS
+ * today. The three days a person has a word for get that word; the rest get the
+ * weekday, and one outside this week gets its date too, because "Tuesday" stops
+ * being an answer once there is more than one of them in view.
+ */
+function dayName(day, now = new Date()) {
+    const at = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
+    const days = Math.round((at(day) - at(now)) / 86400000);
+    if (days === 0)
+        return 'Today';
+    if (days === 1)
+        return 'Tomorrow';
+    if (days === -1)
+        return 'Yesterday';
+    const weekday = day.toLocaleDateString(undefined, { weekday: 'long' });
+    if (days > 1 && days < 7)
+        return weekday;
+    return `${weekday} ${day.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })}`;
+}
+/** The value a date input wants, from unix seconds. */
+const asInput = (unix) => unix ? new Date(unix * 1000).toISOString().slice(0, 10) : '';
+// ── the card ────────────────────────────────────────────────────────────────
+/**
+ * ONE CARD on the board.
+ *
+ * Everything on it is a field the row already carries, so a board of fifty
+ * costs the one read that drew it. The checklist count is the description's own
+ * task items — the same ones the forge renders.
+ */
+function Tile({ card, who, onOpen, }) {
+    const list = steps(card.description);
+    const done = list.filter((s) => s.done).length;
+    const late = card.dueAt ? card.dueAt * 1000 < Date.now() : false;
+    return (_jsx(View, { render: _jsx("div", { draggable: true }), onDragStart: (e) => e.dataTransfer.setData('text/plain', `${card.projectKey}#${card.number}`), display: "block", cursor: "grab", children: _jsx(Box, { render: "button", onClick: onOpen, width: "100%", p: "$3", gap: "$2", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", bg: "$raised", hoverStyle: { borderColor: '$ink' }, children: _jsxs(YStack, { gap: "$2", width: "100%", children: [card.labels.length > 0 ? (_jsx(XStack, { gap: "$1", flexWrap: "wrap", children: card.labels.slice(0, 4).map((l) => (_jsx(Label, { name: l }, l))) })) : null, _jsx(Text, { fontSize: "$2", color: "$ink", numberOfLines: 3, text: "left", children: card.title }), _jsxs(XStack, { items: "center", gap: "$2", flexWrap: "wrap", children: [card.dueAt ? (_jsxs(XStack, { items: "center", gap: "$1", children: [_jsx(CalendarClock, { size: 12, "aria-hidden": true }), _jsx(Text, { fontSize: "$1", color: late ? BAD : '$soft', children: when(card.dueAt) })] })) : null, list.length > 0 ? (_jsxs(XStack, { items: "center", gap: "$1", children: [_jsx(ListChecks, { size: 12, "aria-hidden": true }), _jsxs(Text, { fontSize: "$1", color: done === list.length ? '$ink' : '$soft', children: [done, "/", list.length] })] })) : null, card.priority && card.priority !== 'none' ? (_jsx(Text, { fontSize: "$1", color: "$soft", children: card.priority })) : null, _jsx(YStack, { flex: 1 }), card.assignee ? (_jsx(Face, { src: who?.avatar, emoji: who?.emoji, name: who?.name ?? card.assignee, size: 20 })) : null] })] }) }) }));
+}
+// ── the card, opened ────────────────────────────────────────────────────────
+/**
+ * THE CARD IN FULL, over the board.
+ *
+ * Each panel writes one thing and re-reads, so nothing here holds a second copy
+ * of the card that could disagree with the store. The controls that have no
+ * field behind them — a cover, a file — are absent rather than drawn and inert.
+ */
+function Detail({ card, people, agents, onClose, onSaved, }) {
+    const { client } = useAi();
+    const [panel, setPanel] = useState(null);
+    const [title, setTitle] = useState(card.title);
+    const [body, setBody] = useState(card.description ?? '');
+    const [busy, setBusy] = useState(false);
+    const [wrong, setWrong] = useState(null);
+    const [step, setStep] = useState('');
+    /**
+     * THE DURABLE RUN this card's work is doing, if it was ever handed over.
+     *
+     * The board and the engine stay two stores; the workflow's NAME is the join,
+     * so this asks the engine directly rather than reading a column the card
+     * would have to keep in step. A card that was never started answers null,
+     * which the engine spells as an empty chain.
+     */
+    const [run, setRun] = useState(null);
+    const [starting, setStarting] = useState(false);
+    useEffect(() => {
+        if (!client)
+            return;
+        let live = true;
+        const stop = new AbortController();
+        void runOf(client, card.projectKey, card.number, stop.signal)
+            .then((r) => live && setRun(r))
+            // The engine being unreachable is not this card's failure to report; the
+            // run simply is not known, which is what null already means.
+            .catch(() => live && setRun(null));
+        return () => {
+            live = false;
+            stop.abort();
+        };
+    }, [client, card.projectKey, card.number]);
+    // WHAT THE STORE CALLS FINISHED. The column IS the status, so a card in the
+    // done column and a card marked done are one fact — reading it here rather
+    // than keeping a second flag is what keeps the circle and the column from
+    // ever disagreeing.
+    const finished = (card.status ?? '').toLowerCase() === 'done';
+    const list = steps(body);
+    const done = list.filter((s) => s.done).length;
+    const pct = list.length ? Math.round((done / list.length) * 100) : 0;
+    const who = people.find((p) => p.name === card.assignee);
+    const save = useCallback(async (patch) => {
+        if (!client)
+            return;
+        setBusy(true);
+        setWrong(null);
+        try {
+            await edit(client, card.projectKey, card.number, patch);
+            onSaved();
+        }
+        catch (e) {
+            setWrong(e instanceof Error ? e.message : 'The change was refused');
+        }
+        finally {
+            setBusy(false);
+        }
+    }, [client, card.projectKey, card.number, onSaved]);
+    // TICKING A STEP REWRITES ITS LINE, and only its line — the description is
+    // the reader's prose as well as the checklist, so a save that reformatted it
+    // would eat what they wrote around the boxes.
+    const flip = (line, next) => {
+        const written = tick(body, line, next);
+        setBody(written);
+        void save({ description: written });
+    };
+    return (_jsxs(YStack, { position: "absolute", t: 0, r: 0, b: 0, width: 560, maxW: "100%", bg: "$panel", borderLeftWidth: 1, borderColor: "$borderColor", z: "var(--z-sheet)", children: [_jsxs(XStack, { items: "center", gap: "$2", px: "$4", py: "$3", borderBottomWidth: 1, borderColor: "$borderColor", children: [_jsx(Text, { fontSize: "$1", color: "$soft", flex: 1, numberOfLines: 1, children: card.identifier }), _jsx(Box, { render: "button", onClick: onClose, p: "$1", rounded: "$2", "aria-label": "Close", children: _jsx(X, { size: 16, "aria-hidden": true }) })] }), _jsxs(YStack, { flex: 1, minH: 0, overflow: "scroll", p: "$4", gap: "$4", children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(Box, { render: "button", onClick: () => void save({ status: finished ? 'todo' : 'done' }), "aria-label": finished ? 'Reopen this card' : 'Mark this card done', "aria-pressed": finished, width: 22, height: 22, shrink: 0, rounded: 9999, borderWidth: finished ? 0 : 1.5, borderColor: "$soft", bg: finished ? '$ink' : 'transparent', items: "center", justify: "center", hoverStyle: { borderColor: '$ink' }, children: finished ? _jsx(Check, { size: 13, color: "var(--background)", "aria-hidden": true }) : null }), _jsx(Text, { render: _jsx("input", { value: title, onChange: (e) => setTitle(e.target.value), onBlur: () => title.trim() && title !== card.title && void save({ title: title.trim() }), "aria-label": "Card title" }), flex: 1, minW: 0, bg: "transparent", borderWidth: 0, outlineStyle: "none", color: "inherit", fontSize: "$7", fontWeight: "600", textDecorationLine: finished ? 'line-through' : 'none' })] }), _jsxs(XStack, { gap: "$1.5", flexWrap: "wrap", children: [_jsx(Act, { icon: Tag, label: "Labels", on: panel === 'labels', onPress: () => setPanel(panel === 'labels' ? null : 'labels') }), _jsx(Act, { icon: Calendar, label: "Dates", on: panel === 'dates', onPress: () => setPanel(panel === 'dates' ? null : 'dates') }), _jsx(Act, { icon: UserPlus, label: "Members", on: panel === 'members', onPress: () => setPanel(panel === 'members' ? null : 'members') })] }), panel === 'labels' ? (_jsxs(YStack, { gap: "$2", p: "$3", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", children: [_jsx(Text, { fontSize: "$2", fontWeight: "600", color: "$ink", children: "Labels" }), card.labels.length > 0 ? (_jsx(XStack, { gap: "$1", flexWrap: "wrap", children: card.labels.map((l) => (_jsx(Label, { name: l }, l))) })) : (_jsx(Text, { fontSize: "$1", color: "$soft", children: "None yet." })), _jsx(Text, { fontSize: "$1", color: "$soft", children: "A label is a word on the forge issue, and its colour comes from the word \u2014 so it reads the same here and there. Labels are added on the forge; this board does not write them yet." })] })) : null, panel === 'dates' ? (_jsxs(YStack, { gap: "$2", p: "$3", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", children: [_jsx(Text, { fontSize: "$2", fontWeight: "600", color: "$ink", children: "Dates" }), _jsxs(XStack, { gap: "$3", flexWrap: "wrap", children: [_jsxs(YStack, { gap: "$1", children: [_jsx(Text, { fontSize: "$1", color: "$soft", children: "Start" }), _jsx(Text, { render: _jsx("input", { type: "date", value: asInput(card.startAt), readOnly: true }), ...DATE })] }), _jsxs(YStack, { gap: "$1", children: [_jsx(Text, { fontSize: "$1", color: "$soft", children: "Due" }), _jsx(Text, { render: _jsx("input", { type: "date", value: asInput(card.dueAt), readOnly: true }), ...DATE })] })] }), _jsx(Text, { fontSize: "$1", color: "$soft", children: "A card's dates come from its forge milestone, which is why they read here and cannot yet be set here." })] })) : null, panel === 'members' ? (_jsxs(YStack, { gap: "$2", p: "$3", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", children: [_jsx(Text, { fontSize: "$2", fontWeight: "600", color: "$ink", children: "Members" }), people.length === 0 ? (_jsx(Text, { fontSize: "$1", color: "$soft", children: "Nobody to assign yet." })) : (people.map((p) => (_jsx(Box, { render: "button", onClick: () => void save({ assignee: card.assignee === p.name ? '' : p.name }), width: "100%", p: "$2", rounded: "$2", hoverStyle: { bg: '$hover' }, children: _jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(Face, { src: p.avatar, emoji: p.emoji, name: p.label, size: 22 }), _jsx(Text, { fontSize: "$2", color: "$ink", flex: 1, numberOfLines: 1, children: p.label }), p.agent ? (_jsx(Text, { fontSize: "$1", color: "$soft", children: "agent" })) : null, card.assignee === p.name ? _jsx(Check, { size: 14, "aria-hidden": true }) : null] }) }, p.id)))), _jsx(Box, { render: "button", onClick: () => {
+                                    if (!client || busy)
+                                        return;
+                                    setBusy(true);
+                                    void claim(client, card.projectKey, card.number)
+                                        .then(onSaved)
+                                        .catch((e) => setWrong(e.message))
+                                        .finally(() => setBusy(false));
+                                }, p: "$2", rounded: "$2", borderWidth: 1, borderColor: "$borderColor", hoverStyle: { bg: '$hover' }, children: _jsx(Text, { fontSize: "$1", color: "$ink", children: "Take it myself" }) })] })) : null, _jsxs(YStack, { gap: "$2", children: [_jsx(Text, { fontSize: "$2", fontWeight: "600", color: "$ink", children: "Description" }), _jsx(Text, { render: _jsx("textarea", { value: body, onChange: (e) => setBody(e.target.value), onBlur: () => body !== (card.description ?? '') && void save({ description: body }), placeholder: "What is this card about?", rows: 5 }), width: "100%", bg: "transparent", borderWidth: 1, borderColor: "var(--border)", rounded: 8, p: 10, outlineStyle: "none", color: "inherit", fontSize: "$2" })] }), _jsxs(YStack, { gap: "$2", children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(Text, { fontSize: "$2", fontWeight: "600", color: "$ink", flex: 1, children: "Checklist" }), list.length > 0 ? (_jsxs(Text, { fontSize: "$1", color: "$soft", children: [pct, "%"] })) : null] }), list.length > 0 ? (_jsx(YStack, { height: 4, rounded: 9999, bg: "$hover", overflow: "hidden", children: _jsx(YStack, { width: `${pct}%`, height: 4, bg: "$ink" }) })) : null, list.map((s) => (_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx("input", { type: "checkbox", checked: s.done, onChange: (e) => flip(s.line, e.target.checked), "aria-label": s.text }), _jsx(Text, { fontSize: "$2", color: s.done ? '$soft' : '$ink', textDecorationLine: s.done ? 'line-through' : 'none', flex: 1, children: s.text })] }, s.line))), _jsx(XStack, { gap: "$2", children: _jsx(Text, { render: _jsx("input", { value: step, onChange: (e) => setStep(e.target.value), onKeyDown: (e) => {
+                                            if (e.key !== 'Enter' || !step.trim())
+                                                return;
+                                            const written = addStep(body, step);
+                                            setBody(written);
+                                            setStep('');
+                                            void save({ description: written });
+                                        }, placeholder: "Add an item" }), flex: 1, bg: "transparent", borderWidth: 1, borderColor: "var(--border)", rounded: 6, px: 8, py: 6, outlineStyle: "none", color: "inherit", fontSize: "$2" }) })] }), _jsxs(XStack, { gap: "$3", flexWrap: "wrap", children: [_jsxs(YStack, { gap: "$1", children: [_jsx(Text, { fontSize: "$1", color: "$soft", children: "Column" }), _jsxs(Select, { value: card.status, onValueChange: (v) => void save({ status: v }), children: [_jsx(SelectTrigger, { "aria-label": "Column", width: 160, children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: COLUMNS.map((c) => (_jsx(SelectItem, { value: c.id, children: c.label }, c.id))) })] })] }), _jsxs(YStack, { gap: "$1", children: [_jsx(Text, { fontSize: "$1", color: "$soft", children: "Priority" }), _jsxs(Select, { value: card.priority || 'none', onValueChange: (v) => void save({ priority: v }), children: [_jsx(SelectTrigger, { "aria-label": "Priority", width: 160, children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: PRIORITIES.map((p) => (_jsx(SelectItem, { value: p, children: p }, p))) })] })] })] }), _jsxs(YStack, { gap: "$2", pt: "$2", borderTopWidth: 1, borderColor: "$borderColor", children: [_jsx(Text, { fontSize: "$2", fontWeight: "600", color: "$ink", children: "Durable run" }), run ? (_jsxs(XStack, { items: "center", gap: "$2", flexWrap: "wrap", children: [_jsx(Text, { fontSize: "$2", color: "$ink", children: reads(run.status) }), _jsx(Text, { fontSize: "$1", color: "$soft", numberOfLines: 1, children: run.workflowId }), run.historyLength ? (_jsxs(Text, { fontSize: "$1", color: "$soft", children: [run.historyLength, " events"] })) : null] })) : (_jsxs(XStack, { items: "center", gap: "$2", flexWrap: "wrap", children: [_jsx(Text, { fontSize: "$1", color: "$soft", flex: 1, children: card.assignee
+                                            ? `${card.assignee} holds this. Hand the work to the engine and it survives a crash.`
+                                            : 'Nobody holds this yet — it can still be run, and the run is durable either way.' }), _jsx(Box, { render: "button", onClick: () => {
+                                            if (!client || starting)
+                                                return;
+                                            setStarting(true);
+                                            setWrong(null);
+                                            void startRun(client, card.projectKey, card.number, {
+                                                title: card.title,
+                                                queue: AGENT_QUEUE,
+                                                type: AGENT_WORKFLOW,
+                                            })
+                                                .then(setRun)
+                                                .catch((e) => setWrong(e.message))
+                                                .finally(() => setStarting(false));
+                                        }, px: "$2.5", py: "$1.5", rounded: "$2", borderWidth: 1, borderColor: "$borderColor", hoverStyle: { bg: '$hover' }, children: _jsx(Text, { fontSize: "$1", color: "$ink", children: starting ? 'Handing over…' : 'Run it' }) })] }))] }), who ? (_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(Face, { src: who.avatar, emoji: who.emoji, name: who.label, size: 22 }), _jsxs(Text, { fontSize: "$2", color: "$soft", children: [who.label, " has this one."] })] })) : null, wrong ? (_jsx(Text, { fontSize: "$1", color: BAD, numberOfLines: 3, children: wrong })) : null] })] }));
+}
+/** A date the sheet shows and does not yet write. */
+const DATE = {
+    bg: 'transparent',
+    color: 'inherit',
+    fontSize: '$2',
+    borderWidth: 1,
+    borderColor: 'var(--border)',
+    rounded: 6,
+    px: 8,
+    py: 6,
+    minW: 150,
+};
+// ── the planner ─────────────────────────────────────────────────────────────
+/**
+ * THE DAY, beside the board.
+ *
+ * It draws the cards that are DUE on the day shown, against the hours — so the
+ * question it answers is "what is landing today", which is the one a board of
+ * columns cannot answer. A card with a due date but no hour sits at the top of
+ * the day rather than being placed at an hour nobody chose.
+ */
+function Planner({ cards, onOpen }) {
+    const [offset, setOffset] = useState(0);
+    const day = useMemo(() => {
+        const d = new Date();
+        d.setDate(d.getDate() + offset);
+        d.setHours(0, 0, 0, 0);
+        return d;
+    }, [offset]);
+    const start = Math.floor(day.getTime() / 1000);
+    const due = cards.filter((c) => c.dueAt && c.dueAt >= start && c.dueAt < start + DAY);
+    return (_jsxs(YStack, { flex: 1, minW: 0, minH: 0, children: [_jsxs(XStack, { items: "center", gap: "$2", px: "$3", py: "$3", borderBottomWidth: 1, borderColor: "$borderColor", children: [_jsx(Calendar, { size: 14, "aria-hidden": true }), _jsx(Text, { fontSize: "$2", fontWeight: "600", color: "$ink", flex: 1, children: day.toLocaleDateString(undefined, { month: 'long' }) }), _jsx(Box, { render: "button", onClick: () => setOffset((n) => n - 1), p: "$1", rounded: "$2", "aria-label": "Previous day", children: _jsx(ChevronLeft, { size: 14, "aria-hidden": true }) }), _jsx(Box, { render: "button", onClick: () => setOffset(0), px: "$2", py: "$1", rounded: "$2", borderWidth: 1, borderColor: "$borderColor", children: _jsx(Text, { fontSize: "$1", color: "$ink", children: "Today" }) }), _jsx(Box, { render: "button", onClick: () => setOffset((n) => n + 1), p: "$1", rounded: "$2", "aria-label": "Next day", children: _jsx(ChevronRight, { size: 14, "aria-hidden": true }) })] }), _jsxs(YStack, { items: "center", py: "$2", gap: "$1", children: [_jsx(Text, { fontSize: "$1", color: "$soft", children: dayName(day) }), _jsx(Text, { fontSize: "$4", fontWeight: "600", color: "$ink", children: day.getDate() })] }), _jsxs(YStack, { flex: 1, minH: 0, overflow: "scroll", children: [due.length > 0 ? (_jsxs(YStack, { p: "$3", gap: "$2", children: [_jsx(Text, { fontSize: "$1", color: "$soft", children: "Due today" }), due.map((c) => (_jsx(Box, { render: "button", onClick: () => onOpen(c), width: "100%", p: "$2.5", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", bg: "$raised", hoverStyle: { borderColor: '$ink' }, children: _jsx(Text, { fontSize: "$2", color: "$ink", numberOfLines: 2, text: "left", children: c.title }) }, c.id)))] })) : null, Array.from({ length: 12 }, (_, i) => i + 8).map((hour) => (_jsx(XStack, { height: 56, borderTopWidth: 1, borderColor: "$borderColor", children: _jsx(YStack, { width: 54, pt: "$1", pl: "$3", children: _jsxs(Text, { fontSize: "$1", color: "$soft", children: [hour % 12 === 0 ? 12 : hour % 12, " ", hour < 12 ? 'am' : 'pm'] }) }) }, hour)))] })] }));
+}
+// ── the board ───────────────────────────────────────────────────────────────
+function Column({ column, cards, people, onDrop, onOpen, onAdd, loading, }) {
+    const [over, setOver] = useState(false);
+    const [adding, setAdding] = useState(false);
+    const [title, setTitle] = useState('');
+    return (_jsx(XStack, { onDragOver: (e) => {
+            e.preventDefault();
+            setOver(true);
+        }, onDragLeave: () => setOver(false), onDrop: (e) => {
+            e.preventDefault();
+            setOver(false);
+            const ref = e.dataTransfer.getData('text/plain');
+            if (ref)
+                onDrop(ref, column.id);
+        }, children: _jsxs(YStack, { width: 300, gap: "$2", p: "$2", rounded: "$3", borderWidth: 1, borderColor: over ? '$ink' : '$borderColor', bg: "$hover", maxH: "100%", children: [_jsxs(XStack, { items: "baseline", gap: "$2", px: "$2", pt: "$1", children: [_jsx(Text, { fontSize: "$2", fontWeight: "600", color: "$ink", flex: 1, children: column.label }), _jsx(Text, { fontSize: "$1", color: "$soft", children: loading ? '' : cards.length })] }), _jsx(YStack, { gap: "$2", overflow: "scroll", shrink: 1, children: cards.map((c) => (_jsx(Tile, { card: c, who: people.find((p) => p.name === c.assignee), onOpen: () => onOpen(c) }, c.id))) }), adding ? (_jsx(YStack, { gap: "$2", children: _jsx(Text, { render: _jsx("textarea", { value: title, autoFocus: true, onChange: (e) => setTitle(e.target.value), onKeyDown: (e) => {
+                                if (e.key === 'Escape') {
+                                    setAdding(false);
+                                    setTitle('');
+                                }
+                                if (e.key === 'Enter' && !e.shiftKey) {
+                                    e.preventDefault();
+                                    const said = title.trim();
+                                    if (!said)
+                                        return;
+                                    // THE TEXT SURVIVES A REFUSAL. Clearing before the answer is
+                                    // how a failed save costs somebody the sentence they wrote.
+                                    void onAdd(column.id, said).then((landed) => {
+                                        if (!landed)
+                                            return;
+                                        setTitle('');
+                                        setAdding(false);
+                                    });
+                                }
+                            }, placeholder: "What needs doing?", rows: 2 }), "$platform-web": { resize: 'none' }, width: "100%", bg: "var(--surface-card)", borderWidth: 1, borderColor: "var(--border)", rounded: 8, p: 8, outlineStyle: "none", color: "inherit", fontSize: "$2" }) })) : (_jsx(Box, { render: "button", onClick: () => setAdding(true), width: "100%", p: "$2", rounded: "$2", 
+                    // THE WHOLE ROW LIGHTS, not the words — it is a full-width target and
+                    // a fill is what says so. The tint sits above the column's own
+                    // ground so the row reads as raised rather than merely tinted.
+                    hoverStyle: { bg: '$raised' }, children: _jsxs(XStack, { items: "center", gap: "$1.5", children: [_jsx(Plus, { size: 13, "aria-hidden": true }), _jsx(Text, { fontSize: "$1", color: "$soft", children: "Add a card" })] }) }))] }) }));
+}
+/** One narrowing, as a box a reader ticks. */
+function Tick({ on, label, onPress, }) {
+    return (_jsx(Box, { render: "button", onClick: onPress, width: "100%", px: "$2", py: "$1.5", rounded: "$2", hoverStyle: { bg: '$hover' }, children: _jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(YStack, { width: 14, height: 14, rounded: 3, borderWidth: 1, borderColor: on ? '$ink' : '$borderColor', bg: on ? '$ink' : 'transparent', items: "center", justify: "center", shrink: 0, children: on ? _jsx(Check, { size: 10, color: "var(--background)", "aria-hidden": true }) : null }), typeof label === 'string' ? (_jsx(Text, { fontSize: "$2", color: "$ink", numberOfLines: 1, children: label })) : (label)] }) }));
+}
+/**
+ * THE FILTER, and it is what makes this board auditable.
+ *
+ * "Who did this" is the question a board of cards cannot answer by looking, and
+ * it is the one an org actually asks once agents work alongside people. The
+ * store answers it two ways at once — a row carries the `source` it was filed
+ * from and the `assignee` holding it — so "by an agent" means either, and this
+ * panel says so rather than picking one and being quietly wrong about the other.
+ *
+ * Every facet here is settled from a card the board already read. There is no
+ * narrowing that needs a second request, and none that needs a field the store
+ * does not keep.
+ */
+function Filter({ want, labels, onWant, onClose, }) {
+    const set = (patch) => onWant({ ...want, ...patch });
+    const flipLabel = (l) => {
+        const held = want.labels ?? [];
+        set({ labels: held.includes(l) ? held.filter((x) => x !== l) : [...held, l] });
+    };
+    const Head = ({ children }) => (_jsx(Text, { fontSize: "$1", color: "$soft", px: "$2", pt: "$2", children: children }));
+    return (_jsxs(YStack, { position: "absolute", t: 52, r: 12, width: 300, maxH: 560, overflow: "scroll", p: "$2", gap: "$0.5", rounded: "$4", borderWidth: 1, borderColor: "$borderColor", bg: "$panel", z: "var(--z-dock)", children: [_jsxs(XStack, { items: "center", px: "$2", py: "$1", children: [_jsx(Text, { fontSize: "$2", fontWeight: "600", color: "$ink", flex: 1, children: "Filter" }), _jsx(Box, { render: "button", onClick: onClose, p: "$1", rounded: "$2", "aria-label": "Close filter", children: _jsx(X, { size: 14, "aria-hidden": true }) })] }), _jsx(Tick, { on: want.holder === 'none', label: "Nobody has it", onPress: () => set({ holder: want.holder === 'none' ? undefined : 'none' }) }), _jsx(Tick, { on: want.holder === 'me', label: "Mine", onPress: () => set({ holder: want.holder === 'me' ? undefined : 'me' }) }), _jsx(Head, { children: "Who did the work" }), _jsx(Tick, { on: want.by === 'person', label: "A person", onPress: () => set({ by: want.by === 'person' ? undefined : 'person' }) }), _jsx(Tick, { on: want.by === 'agent', label: "An agent", onPress: () => set({ by: want.by === 'agent' ? undefined : 'agent' }) }), _jsx(Head, { children: "Card status" }), _jsx(Tick, { on: want.state === 'done', label: "Finished", onPress: () => set({ state: want.state === 'done' ? undefined : 'done' }) }), _jsx(Tick, { on: want.state === 'open', label: "Still open", onPress: () => set({ state: want.state === 'open' ? undefined : 'open' }) }), _jsx(Head, { children: "Due date" }), [['none', 'No dates'], ['late', 'Overdue'], ['day', 'Due in the next day'], ['week', 'Due in the next week'], ['month', 'Due in the next month']].map(([id, label]) => (_jsx(Tick, { on: want.due === id, label: label, onPress: () => set({ due: want.due === id ? undefined : id }) }, id))), labels.length > 0 ? (_jsxs(_Fragment, { children: [_jsx(Head, { children: "Labels" }), labels.map((l) => (_jsx(Tick, { on: (want.labels ?? []).includes(l), label: _jsx(Label, { name: l }), onPress: () => flipLabel(l) }, l)))] })) : null, _jsx(Head, { children: "Activity" }), [[7, 'Moved in the last week'], [14, 'Moved in the last two weeks'], [28, 'Moved in the last four weeks']].map(([days, label]) => (_jsx(Tick, { on: want.active === days, label: label, onPress: () => set({ active: want.active === days ? undefined : days }) }, days))), _jsx(Box, { render: "button", onClick: () => onWant({}), width: "100%", mt: "$2", p: "$2", rounded: "$2", borderWidth: 1, borderColor: "$borderColor", hoverStyle: { bg: '$hover' }, children: _jsx(Text, { fontSize: "$1", color: "$ink", children: "Clear" }) })] }));
+}
+// ── the room ────────────────────────────────────────────────────────────────
+/** Said when a write has no board to write to. It is the same event whichever
+ *  write asked, so it is one sentence rather than two wordings of one. */
+const NOWHERE = 'No project answered, so there is nowhere to file this card.';
+function Cards() {
+    const { client } = useAi();
+    const { user } = useIam();
+    const { currentOrgId } = useOrganizations();
+    // WHO I AM on the forge, which is the name a card's assignee is spelled with.
+    const me = user?.name;
+    const { agents } = useAgents();
+    const { people: humans } = usePeople({ owner: currentOrgId ?? '', service: false });
+    const [cards, setCards] = useState(null);
+    const [key, setKey] = useState('');
+    const [keys, setKeys] = useState([]);
+    const [refused, setRefused] = useState(null);
+    // ONE STATE FOR TWO READINGS OF THE SAME CARDS. Two booleans — one per view
+    // — is how a room ends up showing neither or both, and the foot ended up
+    // lighting Board while the planner was the thing on screen.
+    const { aside, showAside } = useOpen();
+    const [view, setView] = useState('board');
+    const [opened, setOpened] = useState(null);
+    const [want, setWant] = useState({});
+    const [filtering, setFiltering] = useState(false);
+    const [nonce, bump] = useState(0);
+    // WHO CAN HAVE A CARD: the org's people and its agents, in one list, because
+    // the store keeps one assignee and does not ask which kind of worker it is.
+    const roster = useMemo(() => [
+        ...humans.map((p) => ({
+            id: p.id,
+            name: p.name,
+            label: p.displayName || p.name,
+            agent: false,
+        })),
+        ...agents.map((a) => ({
+            id: a.id,
+            name: a.name,
+            label: a.name,
+            avatar: a.avatar,
+            emoji: a.emoji,
+            agent: true,
+        })),
+    ], [humans, agents]);
+    useEffect(() => {
+        let live = true;
+        const stop = new AbortController();
+        void readProjects(client, stop.signal)
+            .then((ps) => {
+            if (!live)
+                return;
+            const ks = ps.map((p) => p.key).filter(Boolean);
+            setKeys(ks);
+            setKey((k) => k || ks[0] || '');
+        })
+            .catch(() => { });
+        void readBoard(client, key ? { key } : {}, stop.signal)
+            .then((rows) => live && (setCards(rows), setRefused(null)))
+            .catch((e) => live && (setCards([]), setRefused(say(e, 'this board'))));
+        return () => {
+            live = false;
+            stop.abort();
+        };
+    }, [client, key, nonce]);
+    // THE AGENT NAMES, so "an agent did this" can be answered about a card whose
+    // source says `team` but whose holder is a bot — which is what a person filing
+    // work and handing it over actually looks like.
+    const bots = useMemo(() => new Set(agents.map((a) => a.name)), [agents]);
+    const labels = useMemo(() => [...new Set((cards ?? []).flatMap((c) => c.labels))].sort(), [cards]);
+    const shown = useMemo(() => sift(cards ?? [], want, me, bots), [cards, want, me, bots]);
+    const narrowed = Object.values(want).some((v) => (Array.isArray(v) ? v.length : v !== undefined));
+    const filed = useMemo(() => {
+        const out = new Map();
+        for (const c of shown) {
+            const held = out.get(c.status);
+            if (held)
+                held.push(c);
+            else
+                out.set(c.status, [c]);
+        }
+        return out;
+    }, [shown]);
+    const move = useCallback((ref, status) => {
+        const [k, n] = ref.split('#');
+        // THE CARD'S OWN REF FIRST, then the board on screen, then the first one
+        // the store named — and nothing after that. The chain used to end
+        // `|| currentOrgId || 'hanzo'`, which files a write against a board whose
+        // owner nobody established: an org id is not a project key, and `hanzo` is
+        // somebody's real board. A write with no name to write under is refused.
+        const targetKey = k || key || keys[0];
+        if (!n)
+            return;
+        if (!targetKey)
+            return setRefused(NOWHERE);
+        void edit(client, targetKey, Number(n), { status })
+            .then(() => bump((x) => x + 1))
+            .catch((e) => setRefused(say(e, 'this card', 'save')));
+    }, [client, key, keys]);
+    /**
+     * Files a card, and ANSWERS WHETHER IT LANDED.
+     */
+    const add = useCallback(async (status, title) => {
+        const targetKey = key || keys[0];
+        if (!targetKey) {
+            setRefused(NOWHERE);
+            return false;
+        }
+        try {
+            await openCard(client, targetKey, { title, status });
+            setRefused(null);
+            if (!key) {
+                setKey(targetKey);
+                setKeys((prev) => (prev.includes(targetKey) ? prev : [...prev, targetKey]));
+            }
+            bump((x) => x + 1);
+            return true;
+        }
+        catch (e) {
+            setRefused(say(e, 'this card', 'save'));
+            return false;
+        }
+    }, [client, key, keys]);
+    return (_jsxs(YStack, { flex: 1, minH: 0, position: "relative", children: [_jsxs(XStack, { height: 52, shrink: 0, items: "center", gap: "$3", px: "$3", borderBottomWidth: 1, borderColor: "$borderColor", children: [_jsx(Text, { render: "h1", fontSize: "$4", fontWeight: "600", color: "$ink", numberOfLines: 1, children: "Board" }), _jsxs(Select, { value: key || 'all', onValueChange: setKey, children: [_jsx(SelectTrigger, { "aria-label": "Board", width: 140, $sm: { width: 100 }, children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "all", children: "All Boards" }, "all"), keys.map((k) => (_jsx(SelectItem, { value: k, children: k.charAt(0).toUpperCase() + k.slice(1) }, k)))] })] }), _jsx(YStack, { flex: 1 }), cards ? (_jsx(Text, { fontSize: "$1", color: "$soft", display: "none", $md: { display: 'flex' }, children: narrowed ? `${shown.length} of ${cards.length}` : `${cards.length} cards` })) : null, _jsx(Act, { icon: ListFilter, label: "Filter", on: filtering || narrowed, onPress: () => setFiltering((v) => !v) }), _jsx(XStack, { display: "none", $md: { display: 'flex' }, children: _jsx(Act, { icon: SquareTerminal, label: "Tabs & Shell", on: Boolean(aside), onPress: () => showAside(aside ? null : "tasks") }) })] }), _jsxs(XStack, { flex: 1, minH: 0, children: [view === 'planner' ? _jsx(Planner, { cards: cards ?? [], onOpen: setOpened }) : null, _jsxs(YStack, { flex: 1, minW: 0, minH: 0, 
+                        // One view at a time: the planner is the other reading of these cards.
+                        display: view === 'planner' ? "none" : "flex", children: [refused ? (_jsxs(XStack, { items: "center", gap: "$2", mx: "$4", mt: "$3", px: "$3", py: "$2", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", bg: "$hover", children: [_jsxs(Text, { fontSize: "$1", color: "$soft", flex: 1, minW: 0, children: [refused, " Cards will appear here when it answers."] }), _jsx(Box, { render: "button", onClick: () => bump((x) => x + 1), shrink: 0, px: "$2", py: "$1", rounded: "$2", borderWidth: 1, borderColor: "$borderColor", hoverStyle: { bg: '$hover' }, children: _jsx(Text, { fontSize: "$1", color: "$ink", children: "Try again" }) })] })) : null, _jsx(XStack, { flex: 1, minH: 0, overflow: "scroll", p: "$4", gap: "$3", items: "flex-start", children: COLUMNS.map((c) => (_jsx(Column, { column: c, cards: filed.get(c.id) ?? [], people: roster, onDrop: move, onOpen: setOpened, onAdd: add, loading: cards === null && !refused }, c.id))) })] })] }), _jsxs(XStack, { shrink: 0, items: "center", gap: "$2", px: "$3", py: "$2", borderTopWidth: 1, borderColor: "$borderColor", children: [_jsx(Act, { icon: Columns3, label: "Board", on: view === 'board', onPress: () => setView('board') }), _jsx(Act, { icon: Calendar, label: "Planner", on: view === 'planner', onPress: () => setView('planner') }), _jsx(YStack, { flex: 1 }), _jsx(Text, { fontSize: "$1", color: "$soft", numberOfLines: 1, display: "none", $md: { display: 'flex' }, children: "A card is a forge issue \u2014 moving it here moves it there." })] }), filtering ? (_jsx(Filter, { want: want, labels: labels, onWant: setWant, onClose: () => setFiltering(false) })) : null, opened ? (_jsx(Detail, { card: cards?.find((c) => c.id === opened.id) ?? opened, people: roster, agents: agents, onClose: () => setOpened(null), onSaved: () => bump((x) => x + 1) })) : null] }));
+}
+/**
+ * The pane, and the session its reads need.
+ *
+ * SPLIT so the hooks below never run for a reader with none: every route this
+ * pane reads is org-scoped and answers 403 without one, and a hook cannot be
+ * called conditionally — so the condition is a component boundary rather than
+ * an `if` the rules forbid.
+ */
+export function Board() {
+    return _jsx(Cards, {});
+}

package/dist/Boxes.d.ts

@@ -0,0 +1 @@
+export declare function Boxes(): import("react").JSX.Element;