@loopbacktools/inbox 0.0.0-stage → 0.4.0

package/dist/src/detail.js

@@ -0,0 +1,239 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge, Banner, Button, InputArea, Text } from "@cloudflare/kumo";
+import { useAtomSet } from "@effect/atom-react";
+import { ApiError, } from "@loopbacktools/sdk";
+import { ArrowClockwise, ArrowLeft, Check, ChatTeardropText, PaperPlaneRight, WarningCircle, X, } from "@phosphor-icons/react";
+import { Cause, Exit } from "effect";
+import { Component, useState } from "react";
+import { BriefingBody } from "./briefing.js";
+import { Blocks, Prose } from "./content.js";
+import { AskLink, useClient, useInboxKeys, useNavigation } from "./context.js";
+import { age, SEND_KEY, useNow } from "./hooks.js";
+import { KindIcon, Waiting } from "./list.js";
+import { reloadPage } from "./page.js";
+import { useMe, whoIs } from "./people.js";
+import { replyAtom } from "./state.js";
+import { AgentSaid, PersonSaid } from "./thread.js";
+const STATUS = {
+    awaiting_human: { label: "Your turn", variant: "orange" },
+    awaiting_agent: { label: "Waiting on the agent", variant: "neutral" },
+    closed: { label: "Closed", variant: "green" },
+};
+/** A reply in the words of the person who gave it. */
+const said = (reply, who) => {
+    switch (reply.outcome) {
+        case "answered": {
+            const chose = reply.selected.length === 0
+                ? `${who} answered`
+                : `${who} chose ${reply.selected.join(", ")}`;
+            return reply.text === undefined ? { title: chose } : { title: chose, body: reply.text };
+        }
+        case "approved":
+            return reply.note === undefined
+                ? { title: `${who} approved` }
+                : { title: `${who} approved`, body: reply.note };
+        case "changes_requested":
+            return { title: `${who} asked for changes`, body: reply.feedback };
+        case "follow_up":
+            return { title: `${who} asked`, body: reply.question };
+        case "dismissed":
+            return { title: `${who} dismissed this` };
+        case "responded":
+            return {
+                title: `${who} replied on ${reply.points.length} ${reply.points.length === 1 ? "point" : "points"}`,
+            };
+        case "unknown":
+            return { title: `${who} replied in a way this page can't show` };
+    }
+};
+function Turn({ entry, now }) {
+    const me = useMe();
+    if (entry.author === "agent") {
+        return _jsx(AgentSaid, { answer: entry.answer, content: entry.content, at: entry.at, now: now });
+    }
+    const { title, body } = said(entry.reply, whoIs(entry.by, me));
+    return _jsx(PersonSaid, { title: title, body: body, at: entry.at, now: now });
+}
+const NO_NOTE = { text: "", picked: [] };
+const noteKey = (askId) => `loopback.note.${askId}`;
+/** A note kept in this browser, read as leniently as another version of this page may have left it. */
+const readNote = (askId) => {
+    try {
+        const kept = JSON.parse(localStorage.getItem(noteKey(askId)) ?? "null");
+        return {
+            text: typeof kept?.text === "string" ? kept.text : "",
+            picked: Array.isArray(kept?.picked)
+                ? kept.picked.filter((label) => typeof label === "string")
+                : [],
+        };
+    }
+    catch {
+        return NO_NOTE;
+    }
+};
+/**
+ * Keeps what the person has written or picked on an ask, and not sent, in this browser, as a
+ * briefing's drafts are: a reload onto a newer Loopback, or the agent's next turn, loses none of it.
+ */
+const useNote = (askId) => {
+    const [note, setNote] = useState(() => readNote(askId));
+    const keep = (next) => {
+        setNote(next);
+        try {
+            if (next.text === "" && next.picked.length === 0)
+                localStorage.removeItem(noteKey(askId));
+            else
+                localStorage.setItem(noteKey(askId), JSON.stringify(next));
+        }
+        catch {
+            // Storage can be unavailable (a private window); the note then lasts as long as the page.
+        }
+    };
+    return {
+        ...note,
+        setText: (text) => keep({ ...note, text }),
+        setPicked: (change) => keep({ ...note, picked: change(note.picked) }),
+        clear: () => keep(NO_NOTE),
+    };
+};
+/** The reply controls: one box for words, and the moves this kind of ask allows. */
+function ReplyPanel({ ask, onReplied }) {
+    const send = useAtomSet(replyAtom(useClient()), { mode: "promiseExit" });
+    const { text, picked, setText, setPicked, clear } = useNote(ask.id);
+    const [sending, setSending] = useState(null);
+    const [error, setError] = useState(null);
+    const words = text.trim();
+    const submit = async (key, reply) => {
+        setSending(key);
+        setError(null);
+        const exit = await send({ askId: ask.id, reply });
+        setSending(null);
+        if (Exit.isSuccess(exit)) {
+            clear();
+            onReplied();
+            return;
+        }
+        // A reply Loopback refused will not go through as it is; one that never reached it, or met
+        // a fault there, can simply be sent again. Either way the agent has nothing yet.
+        const failure = Cause.squash(exit.cause);
+        const reason = failure instanceof Error ? failure.message : "no reason given";
+        setError(failure instanceof ApiError && failure.status >= 400 && failure.status < 500
+            ? { title: "Your reply was not accepted", description: reason }
+            : {
+                title: "Your reply was not sent",
+                description: `Loopback could not take it just now (${reason}), so the agent still has nothing. Send it again.`,
+            });
+    };
+    const note = words === "" ? {} : { text: words };
+    const question = ask.kind === "question" ? ask : null;
+    const choose = (label) => {
+        if (question === null)
+            return;
+        if (question.prompt.multiple) {
+            setPicked((current) => current.includes(label) ? current.filter((item) => item !== label) : [...current, label]);
+        }
+        else {
+            void submit(label, { outcome: "answered", selected: [label], ...note });
+        }
+    };
+    const primary = () => question !== null
+        ? picked.length > 0 || words !== ""
+            ? ["send", { outcome: "answered", selected: [...picked], ...note }]
+            : null
+        : ["approve", { outcome: "approved", ...(words === "" ? {} : { note: words }) }];
+    const busy = sending !== null;
+    // ⌘↵ (Ctrl↵ off Apple's keyboards) sends the main reply wherever focus is, since an ask that opens by itself has nothing
+    // focused; 1-9 pick a choice while the reply box does not have focus.
+    useInboxKeys((event) => {
+        if (busy)
+            return;
+        if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+            const move = primary();
+            if (move === null)
+                return;
+            event.preventDefault();
+            void submit(...move);
+            return;
+        }
+        const target = event.target;
+        if (question === null || event.metaKey || event.ctrlKey)
+            return;
+        if (target?.closest("input, textarea, [contenteditable]"))
+            return;
+        const option = question.prompt.options[Number(event.key) - 1];
+        if (option !== undefined)
+            choose(option.label);
+    });
+    return (_jsxs("div", { className: "flex flex-col gap-3 rounded-lg border border-kumo-line bg-kumo-elevated p-4", children: [error === null ? null : (_jsx(Banner, { role: "alert", variant: "error", icon: _jsx(WarningCircle, {}), title: error.title, description: error.description })), question === null || question.prompt.options.length === 0 ? null : (_jsx(Choices, { question: question, picked: picked, busy: busy, sending: sending, onChoose: choose })), _jsx(InputArea, { "aria-label": question === null ? "Feedback or a note" : "Your answer, or a note", placeholder: question === null
+                    ? "Feedback, a note to go with your approval, or a question"
+                    : question.prompt.options.length === 0
+                        ? "Your answer, or a question back"
+                        : "Add a note, answer in your own words, or ask a question back", value: text, onValueChange: setText, autoResize: true, minRows: 3, maxRows: 12, disabled: busy }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [question === null ? (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "primary", icon: _jsx(Check, {}), loading: sending === "approve", disabled: busy, onClick: () => void submit("approve", {
+                                    outcome: "approved",
+                                    ...(words === "" ? {} : { note: words }),
+                                }), children: "Approve" }), _jsx(Button, { loading: sending === "changes", disabled: busy || words === "", onClick: () => void submit("changes", { outcome: "changes_requested", feedback: words }), children: "Request changes" })] })) : (_jsx(Button, { variant: "primary", icon: _jsx(PaperPlaneRight, {}), loading: sending === "send", disabled: busy || (picked.length === 0 && words === ""), onClick: () => void submit("send", { outcome: "answered", selected: [...picked], ...note }), children: "Send" })), _jsx(Button, { icon: _jsx(ChatTeardropText, {}), loading: sending === "ask", disabled: busy || words === "", onClick: () => void submit("ask", { outcome: "follow_up", question: words }), children: "Ask back" }), _jsx(Button, { variant: "ghost", icon: _jsx(X, {}), loading: sending === "dismiss", disabled: busy, onClick: () => void submit("dismiss", { outcome: "dismissed" }), children: "Dismiss" }), _jsxs("span", { className: "ml-auto hidden text-xs text-kumo-subtle sm:inline", children: [SEND_KEY, "\u21B5 ", question === null ? "approves" : "sends"] })] })] }));
+}
+function Choices({ question, picked, busy, sending, onChoose, }) {
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [question.prompt.options.map((option, index) => {
+                const on = picked.includes(option.label);
+                return (_jsxs("button", { type: "button", disabled: busy, "aria-pressed": question.prompt.multiple ? on : undefined, onClick: () => onChoose(option.label), className: `flex items-start gap-3 rounded-lg border px-3 py-2.5 text-left transition-colors disabled:opacity-60 ${on
+                        ? "border-kumo-brand bg-kumo-tint"
+                        : "border-kumo-line bg-kumo-base hover:bg-kumo-tint"}`, children: [_jsx("span", { className: "mt-0.5 flex size-5 shrink-0 items-center justify-center rounded border border-kumo-line text-xs text-kumo-subtle tabular-nums", children: sending === option.label ? "…" : index + 1 }), _jsxs("span", { className: "flex flex-col", children: [_jsx(Text, { bold: true, children: option.label }), option.description === undefined ? null : (_jsx(Text, { variant: "secondary", size: "sm", children: option.description }))] })] }, option.label));
+            }), _jsx(Text, { variant: "secondary", size: "xs", children: question.prompt.multiple
+                    ? "Pick any that apply, then send."
+                    : "Picking a choice sends it, with any note you have typed." })] }));
+}
+const nothing = () => { };
+/**
+ * An ask the inbox could not draw, with the moves still open to the person: dismissing it, and, for
+ * one sent by a newer version of Loopback than this page, reloading to see it.
+ */
+function CannotShow({ ask, onReplied, newer = false, }) {
+    const { onSelect } = useNavigation();
+    const send = useAtomSet(replyAtom(useClient()), { mode: "promiseExit" });
+    const [sending, setSending] = useState(false);
+    const [failed, setFailed] = useState(null);
+    const dismiss = async () => {
+        setSending(true);
+        setFailed(null);
+        const exit = await send({ askId: ask.id, reply: { outcome: "dismissed" } });
+        setSending(false);
+        if (Exit.isSuccess(exit)) {
+            onReplied();
+            return;
+        }
+        const failure = Cause.squash(exit.cause);
+        setFailed(failure instanceof Error ? failure.message : "no reason given");
+    };
+    return (_jsxs("article", { className: "mx-auto flex max-w-3xl flex-col gap-4 px-4 py-6 md:px-8", children: [_jsxs("button", { type: "button", onClick: () => onSelect(null), className: "inline-flex w-fit items-center gap-1 text-sm text-kumo-subtle md:hidden", children: [_jsx(ArrowLeft, {}), " Inbox"] }), _jsx(Banner, { variant: "error", icon: _jsx(WarningCircle, {}), title: "This ask can't be shown", description: newer
+                    ? "It came from a newer version of Loopback than this page. Reload the page to see it."
+                    : "It doesn't match what this inbox knows how to draw, perhaps because it was sent while Loopback was being updated. Dismiss it, and the agent can send it again." }), failed === null ? null : (_jsx(Banner, { role: "alert", variant: "error", icon: _jsx(WarningCircle, {}), title: "It was not dismissed", description: failed })), _jsxs("div", { className: "flex gap-2", children: [newer ? (_jsx(Button, { className: "w-fit", variant: "secondary", icon: _jsx(ArrowClockwise, {}), onClick: reloadPage, children: "Reload" })) : null, ask.status === "closed" ? null : (_jsx(Button, { className: "w-fit", variant: "ghost", icon: _jsx(X, {}), loading: sending, onClick: () => void dismiss(), children: "Dismiss" }))] })] }));
+}
+/** Keeps one ask that cannot be drawn from taking the whole inbox down with it. */
+class Drawable extends Component {
+    state = { failed: false };
+    static getDerivedStateFromError() {
+        return { failed: true };
+    }
+    componentDidCatch(error) {
+        console.error(`Ask ${this.props.ask.id} could not be shown:`, error);
+    }
+    render() {
+        return this.state.failed ? (_jsx(CannotShow, { ask: this.props.ask, onReplied: this.props.onReplied })) : (this.props.children);
+    }
+}
+export function AskDetail({ ask, onReplied = nothing, }) {
+    if (ask.kind === "unknown")
+        return _jsx(CannotShow, { ask: ask, onReplied: onReplied, newer: true });
+    return (_jsx(Drawable, { ask: ask, onReplied: onReplied, children: _jsx(AskView, { ask: ask, onReplied: onReplied }) }, ask.id));
+}
+/** One ask: what the agent wants, the thread so far, and the moves left. */
+function AskView({ ask, onReplied, }) {
+    const { onSelect } = useNavigation();
+    const now = useNow();
+    const me = useMe();
+    const status = STATUS[ask.status];
+    return (_jsxs("article", { className: "mx-auto flex max-w-3xl flex-col gap-6 px-4 py-6 md:px-8", children: [_jsxs("header", { className: "flex flex-col gap-3", children: [_jsxs("button", { type: "button", onClick: () => onSelect(null), className: "inline-flex w-fit items-center gap-1 text-sm text-kumo-subtle md:hidden", children: [_jsx(ArrowLeft, {}), " Inbox"] }), _jsxs("div", { className: "flex flex-wrap items-center gap-2 text-kumo-subtle", children: [_jsx(KindIcon, { ask: ask }), _jsx(Badge, { variant: status.variant, children: status.label }), ask.project === undefined ? null : _jsx(Badge, { variant: "neutral", children: ask.project }), _jsx(Waiting, { ask: ask }), _jsxs("span", { className: "ml-auto text-xs tabular-nums", children: [ask.raisedBy?.name === undefined || ask.raisedBy.id === me
+                                        ? ""
+                                        : `${ask.raisedBy.name}'s agent · `, ask.client === undefined ? "" : `${ask.client} · `, age(ask.createdAt, now)] })] }), ask.kind === "question" ? (_jsx("div", { className: "text-lg", children: _jsx(Prose, { text: ask.prompt.question }) })) : (_jsxs(_Fragment, { children: [_jsx(Text, { variant: "heading", as: "h1", children: ask.prompt.title }), ask.kind !== "review" || ask.revises === undefined ? null : (_jsx(AskLink, { askId: ask.revises, className: "text-sm text-kumo-link underline", children: "Revises an earlier review" })), ask.prompt.summary === undefined ? null : (_jsx("div", { className: "text-kumo-subtle", children: _jsx(Prose, { text: ask.prompt.summary }) }))] }))] }), ask.kind === "briefing" ? (_jsx(BriefingBody, { ask: ask, onReplied: onReplied }, ask.id)) : ask.kind === "question" ? (ask.prompt.context === undefined ? null : (_jsxs("details", { className: "rounded-lg border border-kumo-line bg-kumo-base p-4", children: [_jsx("summary", { className: "cursor-pointer text-sm text-kumo-subtle", children: "Context" }), _jsx("div", { className: "mt-3", children: _jsx(Prose, { text: ask.prompt.context }) })] }))) : (_jsx("div", { className: "rounded-lg border border-kumo-line bg-kumo-base p-4 md:p-6", children: _jsx(Blocks, { blocks: ask.prompt.content }) })), ask.kind === "briefing" || ask.thread.length === 0 ? null : (_jsx("div", { className: "flex flex-col gap-3", children: ask.thread.map((entry) => (_jsx(Turn, { entry: entry, now: now }, `${entry.author}:${entry.at}`))) })), ask.kind === "briefing" ? null : ask.status === "awaiting_human" ? (_jsx(ReplyPanel, { ask: ask, onReplied: onReplied }, `${ask.id}:${ask.thread.length}`)) : ask.status === "awaiting_agent" ? (_jsx(Text, { variant: "secondary", children: "The agent has your question and will answer here." })) : null] }));
+}

package/dist/src/hooks.d.ts

@@ -0,0 +1,53 @@
+import { type Ask, type InboxState } from "@loopbacktools/sdk";
+/**
+ * The ask to open once `current` has been answered: the next one awaiting the person, below it in
+ * the list, or above it if it was last. `null` when nothing else awaits them.
+ */
+export declare const nextAfter: (queue: readonly Ask[], current: string) => string | null;
+/**
+ * The ask the inbox shows: the one the person picked, or else the top one waiting on them, so
+ * something that needs them is never hidden behind a "pick one" screen.
+ */
+export declare const focusOf: (inbox: InboxState, picked: string | null) => string | null;
+/** The asks the person's own agents raised: what "Mine" shows. */
+export declare const onlyMine: (inbox: InboxState, me: string) => InboxState;
+/** Whether anyone else's agents have asked here; only then is there a "Mine" to pick. */
+export declare const shared: (inbox: InboxState, me: string | undefined) => boolean;
+/** Which asks the list shows. */
+export type Filter = "all" | "mine";
+/** Everyone's asks, or only the person's own agents', as they last left it in this browser. */
+export declare const useFilter: () => readonly [Filter, (next: Filter) => void];
+/** The inbox list's width in pixels: narrow by default, so a zoomed-in page still leaves room. */
+export declare const SIDEBAR: {
+    readonly min: 220;
+    readonly max: 560;
+    readonly initial: 288;
+};
+/** The inbox list's width, as the person last left it in this browser. */
+export declare const useSidebarWidth: () => readonly [number, (next: number) => void];
+/**
+ * Whether the Recent section is open. Closed by default: what has been answered stays a click
+ * away without competing with what still needs the person.
+ */
+export declare const useRecentOpen: () => readonly [boolean, () => void];
+/** The kind of thing an ask is, in a few words. */
+export declare const headline: (ask: Ask) => string;
+/** How many of a briefing's points need the person; none for any other ask, or when it is not their move. */
+export declare const pointsNeedingYou: (ask: Ask) => number;
+/** The modifier that sends with ↵, as the keyboard labels it: ⌘ on Apple's, Ctrl elsewhere. */
+export declare const SEND_KEY: string;
+/** "just now", "5 min", "3 h", "2 d". */
+export declare const age: (iso: string, now: number) => string;
+/** The current time, ticking every half minute so ages stay true. */
+export declare const useNow: () => number;
+/** Whether this browser shows a notification when an agent asks something. */
+export declare const useNotifications: () => {
+    supported: boolean;
+    enabled: boolean;
+    toggle: () => Promise<void>;
+};
+/**
+ * Keeps the person's attention where it is needed: the tab title counts what awaits them, and a
+ * new ask raises a notification while the tab is in the background. Clicking one opens the ask.
+ */
+export declare const useAttention: (inbox: InboxState, notify: boolean, open: (askId: string) => void) => void;

package/dist/src/hooks.js

@@ -0,0 +1,193 @@
+import { awaitingHuman, foldBriefing } from "@loopbacktools/sdk";
+import { useEffect, useRef, useState } from "react";
+/**
+ * The ask to open once `current` has been answered: the next one awaiting the person, below it in
+ * the list, or above it if it was last. `null` when nothing else awaits them.
+ */
+export const nextAfter = (queue, current) => {
+    const position = queue.findIndex((ask) => ask.id === current);
+    const rest = queue.filter((ask) => ask.id !== current);
+    return (rest[Math.max(position, 0)] ?? rest.at(-1))?.id ?? null;
+};
+/**
+ * The ask the inbox shows: the one the person picked, or else the top one waiting on them, so
+ * something that needs them is never hidden behind a "pick one" screen.
+ */
+export const focusOf = (inbox, picked) => picked ?? awaitingHuman(inbox)[0]?.id ?? null;
+/** The asks the person's own agents raised: what "Mine" shows. */
+export const onlyMine = (inbox, me) => {
+    const mine = (ask) => ask.raisedBy?.id === me;
+    return { ...inbox, open: inbox.open.filter(mine), recent: inbox.recent.filter(mine) };
+};
+/** Whether anyone else's agents have asked here; only then is there a "Mine" to pick. */
+export const shared = (inbox, me) => me !== undefined &&
+    [...inbox.open, ...inbox.recent].some((ask) => ask.raisedBy !== undefined && ask.raisedBy.id !== me);
+const FILTER_KEY = "loopback.filter";
+/** Everyone's asks, or only the person's own agents', as they last left it in this browser. */
+export const useFilter = () => {
+    const [filter, setFilter] = useState(() => {
+        try {
+            return localStorage.getItem(FILTER_KEY) === "mine" ? "mine" : "all";
+        }
+        catch {
+            return "all";
+        }
+    });
+    const choose = (next) => {
+        setFilter(next);
+        try {
+            localStorage.setItem(FILTER_KEY, next);
+        }
+        catch {
+            // Remembered for this tab only.
+        }
+    };
+    return [filter, choose];
+};
+const SIDEBAR_KEY = "loopback.sidebar";
+/** The inbox list's width in pixels: narrow by default, so a zoomed-in page still leaves room. */
+export const SIDEBAR = { min: 220, max: 560, initial: 288 };
+const clampWidth = (width) => Math.round(Math.min(SIDEBAR.max, Math.max(SIDEBAR.min, width)));
+/** The inbox list's width, as the person last left it in this browser. */
+export const useSidebarWidth = () => {
+    const [width, setWidth] = useState(() => {
+        try {
+            const saved = Number(localStorage.getItem(SIDEBAR_KEY));
+            return Number.isFinite(saved) && saved > 0 ? clampWidth(saved) : SIDEBAR.initial;
+        }
+        catch {
+            return SIDEBAR.initial;
+        }
+    });
+    const resize = (next) => {
+        const clamped = clampWidth(next);
+        setWidth(clamped);
+        try {
+            localStorage.setItem(SIDEBAR_KEY, String(clamped));
+        }
+        catch {
+            // Remembered for this tab only.
+        }
+    };
+    return [width, resize];
+};
+const RECENT_KEY = "loopback.recent";
+/**
+ * Whether the Recent section is open. Closed by default: what has been answered stays a click
+ * away without competing with what still needs the person.
+ */
+export const useRecentOpen = () => {
+    const [open, setOpen] = useState(() => {
+        try {
+            return localStorage.getItem(RECENT_KEY) === "open";
+        }
+        catch {
+            return false;
+        }
+    });
+    const toggle = () => {
+        setOpen((was) => {
+            try {
+                localStorage.setItem(RECENT_KEY, was ? "closed" : "open");
+            }
+            catch {
+                // Remembered for this tab only.
+            }
+            return !was;
+        });
+    };
+    return [open, toggle];
+};
+/** The kind of thing an ask is, in a few words. */
+export const headline = (ask) => ask.kind === "question"
+    ? ask.prompt.question
+    : ask.kind === "unknown"
+        ? "An ask this page can't show"
+        : ask.prompt.title;
+/** How many of a briefing's points need the person; none for any other ask, or when it is not their move. */
+export const pointsNeedingYou = (ask) => ask.kind === "briefing" && ask.status === "awaiting_human"
+    ? foldBriefing(ask.prompt, ask.thread).needsYou
+    : 0;
+/** The modifier that sends with ↵, as the keyboard labels it: ⌘ on Apple's, Ctrl elsewhere. */
+export const SEND_KEY = /Mac|iPhone|iPad/.test(navigator.platform) ? "⌘" : "Ctrl";
+/** "just now", "5 min", "3 h", "2 d". */
+export const age = (iso, now) => {
+    const minutes = Math.floor((now - Date.parse(iso)) / 60_000);
+    if (minutes < 1)
+        return "just now";
+    if (minutes < 60)
+        return `${minutes} min`;
+    const hours = Math.floor(minutes / 60);
+    if (hours < 24)
+        return `${hours} h`;
+    return `${Math.floor(hours / 24)} d`;
+};
+/** The current time, ticking every half minute so ages stay true. */
+export const useNow = () => {
+    const [now, setNow] = useState(() => Date.now());
+    useEffect(() => {
+        const timer = setInterval(() => setNow(Date.now()), 30_000);
+        return () => clearInterval(timer);
+    }, []);
+    return now;
+};
+const NOTIFY_KEY = "loopback.notify";
+const readNotify = () => {
+    try {
+        return localStorage.getItem(NOTIFY_KEY) === "on";
+    }
+    catch {
+        return false;
+    }
+};
+/** Whether this browser shows a notification when an agent asks something. */
+export const useNotifications = () => {
+    const [enabled, setEnabled] = useState(() => readNotify() && typeof Notification !== "undefined" && Notification.permission === "granted");
+    const toggle = async () => {
+        const next = !enabled;
+        if (next && Notification.permission !== "granted") {
+            if ((await Notification.requestPermission()) !== "granted")
+                return;
+        }
+        try {
+            localStorage.setItem(NOTIFY_KEY, next ? "on" : "off");
+        }
+        catch {
+            // Remembered for this tab only.
+        }
+        setEnabled(next);
+    };
+    return { supported: typeof Notification !== "undefined", enabled, toggle };
+};
+/**
+ * Keeps the person's attention where it is needed: the tab title counts what awaits them, and a
+ * new ask raises a notification while the tab is in the background. Clicking one opens the ask.
+ */
+export const useAttention = (inbox, notify, open) => {
+    const seen = useRef(null);
+    const waiting = awaitingHuman(inbox);
+    useEffect(() => {
+        document.title = waiting.length === 0 ? "Loopback" : `(${waiting.length}) Loopback`;
+    }, [waiting.length]);
+    useEffect(() => {
+        if (inbox.status !== "live")
+            return;
+        const ids = new Set(waiting.map((ask) => ask.id));
+        const previous = seen.current;
+        seen.current = ids;
+        if (previous === null || !notify || !document.hidden)
+            return;
+        for (const ask of waiting) {
+            if (previous.has(ask.id))
+                continue;
+            const note = new Notification(ask.project ?? "Loopback", {
+                body: headline(ask),
+                tag: ask.id,
+            });
+            note.addEventListener("click", () => {
+                window.focus();
+                open(ask.id);
+            });
+        }
+    }, [inbox.status, waiting, notify, open]);
+};

package/dist/src/inbox.d.ts

@@ -0,0 +1,7 @@
+import { type InboxNavigation } from "./context.tsx";
+/**
+ * The inbox: every ask in a list, and the one open beside it, answered in place. It fills the
+ * element it is drawn in, which needs a height. Which ask is open is the host's to keep, in its
+ * own routes or anywhere else, through `selectedId`, `onSelect` and `hrefFor`.
+ */
+export declare function Inbox({ selectedId, onSelect, hrefFor }: InboxNavigation): import("react").JSX.Element;

package/dist/src/inbox.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Empty, Loader, Tabs } from "@cloudflare/kumo";
+import { ShikiProvider } from "@cloudflare/kumo/code";
+import { awaitingHuman } from "@loopbacktools/sdk";
+import { CheckCircle, Tray } from "@phosphor-icons/react";
+import { useRef } from "react";
+import { NavigationContext, RootContext, useInbox } from "./context.js";
+import { AskDetail } from "./detail.js";
+import { focusOf, nextAfter, onlyMine, shared, SIDEBAR, useFilter, useSidebarWidth, } from "./hooks.js";
+import { AskList } from "./list.js";
+import { useMe } from "./people.js";
+import { UpdateBanner } from "./update.js";
+/** The languages review code is highlighted in; anything else is shown plain. */
+const LANGUAGES = [
+    "typescript",
+    "tsx",
+    "javascript",
+    "jsx",
+    "json",
+    "html",
+    "css",
+    "python",
+    "bash",
+    "yaml",
+    "toml",
+    "sql",
+    "markdown",
+    "graphql",
+    "hcl",
+    "diff",
+];
+/** The edge between the list and the ask: drag it, or focus it and use the arrow keys. */
+function ResizeHandle({ width, onResize, }) {
+    const drag = useRef(null);
+    const onPointerDown = (event) => {
+        drag.current = { x: event.clientX, width };
+        event.currentTarget.setPointerCapture(event.pointerId);
+    };
+    const onPointerMove = (event) => {
+        if (drag.current !== null)
+            onResize(drag.current.width + event.clientX - drag.current.x);
+    };
+    const onPointerUp = (event) => {
+        drag.current = null;
+        event.currentTarget.releasePointerCapture(event.pointerId);
+    };
+    const onKeyDown = (event) => {
+        if (event.key === "ArrowLeft")
+            onResize(width - 16);
+        else if (event.key === "ArrowRight")
+            onResize(width + 16);
+        else
+            return;
+        event.preventDefault();
+    };
+    return (_jsx("div", { 
+        // oxlint-disable-next-line jsx-a11y/prefer-tag-over-role
+        role: "separator", "aria-orientation": "vertical", "aria-label": "Resize the inbox list", "aria-valuenow": width, "aria-valuemin": SIDEBAR.min, "aria-valuemax": SIDEBAR.max, tabIndex: 0, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onKeyDown: onKeyDown, className: "relative z-10 -ml-1 hidden w-2 shrink-0 cursor-col-resize touch-none outline-none transition-colors hover:bg-kumo-line focus-visible:bg-kumo-brand md:block" }));
+}
+/**
+ * The inbox: every ask in a list, and the one open beside it, answered in place. It fills the
+ * element it is drawn in, which needs a height. Which ask is open is the host's to keep, in its
+ * own routes or anywhere else, through `selectedId`, `onSelect` and `hrefFor`.
+ */
+export function Inbox({ selectedId, onSelect, hrefFor }) {
+    const root = useRef(null);
+    const everything = useInbox();
+    const me = useMe();
+    const [filter, setFilter] = useFilter();
+    // "Mine" is a choice only where other people's agents ask too.
+    const choosing = shared(everything, me);
+    const inbox = choosing && filter === "mine" && me !== undefined ? onlyMine(everything, me) : everything;
+    // On a wide screen the top waiting ask opens by itself; on a phone the list comes first.
+    const focusId = focusOf(inbox, selectedId);
+    // An ask the person opened stays open, whichever asks the list shows.
+    const selected = focusId === null
+        ? undefined
+        : [...everything.open, ...everything.recent].find((ask) => ask.id === focusId);
+    const [width, resize] = useSidebarWidth();
+    // Once an ask is answered, open whatever else awaits the person; with nothing left, clear the
+    // view so it shows that everything is done rather than the ask just answered.
+    const advance = (answered) => onSelect(nextAfter(awaitingHuman(inbox), answered));
+    const allDone = inbox.status === "live" && awaitingHuman(inbox).length === 0;
+    return (_jsx(NavigationContext, { value: { selectedId, onSelect, hrefFor }, children: _jsx(RootContext, { value: root, children: _jsx(ShikiProvider, { engine: "javascript", languages: [...LANGUAGES], children: _jsxs("div", { ref: root, className: "flex h-full min-h-0 flex-1 flex-col", children: [_jsx(UpdateBanner, {}), _jsxs("div", { className: "flex min-h-0 flex-1", children: [_jsxs("aside", { style: { "--sidebar": `${width}px` }, className: `w-full overflow-y-auto border-r border-kumo-line bg-kumo-base md:block md:w-(--sidebar) md:shrink-0 ${selectedId === null ? "" : "hidden"}`, children: [choosing ? (_jsx("div", { className: "border-b border-kumo-hairline px-4 py-2", children: _jsx(Tabs, { size: "sm", value: filter, onValueChange: (value) => setFilter(value), tabs: [
+                                                    { value: "all", label: "Everyone's" },
+                                                    { value: "mine", label: "My agents'" },
+                                                ] }) })) : null, inbox.status === "connecting" ? (_jsx("div", { className: "flex justify-center p-8", children: _jsx(Loader, {}) })) : inbox.open.length === 0 && inbox.recent.length === 0 ? (_jsx(Empty, { icon: _jsx(Tray, { size: 32 }), title: "Nothing yet", description: inbox === everything
+                                                ? "When an agent asks you something, it appears here."
+                                                : "When one of your agents asks something, it appears here." })) : (_jsx(AskList, { inbox: inbox, selected: focusId }))] }), _jsx(ResizeHandle, { width: width, onResize: resize }), _jsx("main", { className: `min-w-0 flex-1 overflow-y-auto md:block ${selectedId === null ? "hidden" : ""}`, children: selected !== undefined ? (_jsx(AskDetail, { ask: selected, onReplied: () => advance(selected.id) })) : selectedId !== null && inbox.status === "live" ? (_jsx(Empty, { title: "Not in the inbox", description: "This ask is older than the inbox keeps." })) : (_jsx("div", { className: "hidden h-full items-center justify-center md:flex", children: allDone ? (_jsx("div", { className: "w-full max-w-sm", children: _jsx(Empty, { icon: _jsx(CheckCircle, { size: 32, weight: "duotone" }), title: "All done", description: "Nothing needs you right now." }) })) : null })) })] })] }) }) }) }));
+}

package/dist/src/index.d.ts

@@ -0,0 +1,4 @@
+export { InboxProvider, type InboxNavigation, useClient, useInbox } from "./context.tsx";
+export { Inbox } from "./inbox.tsx";
+export { useAttention, useNotifications } from "./hooks.ts";
+export { useMe, whoIs } from "./people.ts";

package/dist/src/index.js

@@ -0,0 +1,4 @@
+export { InboxProvider, useClient, useInbox } from "./context.js";
+export { Inbox } from "./inbox.js";
+export { useAttention, useNotifications } from "./hooks.js";
+export { useMe, whoIs } from "./people.js";

package/dist/src/list.d.ts

@@ -0,0 +1,13 @@
+import type { Ask, InboxState } from "@loopbacktools/sdk";
+export declare function KindIcon({ ask }: {
+    readonly ask: Ask;
+}): import("react").JSX.Element;
+/** Whether an agent is blocked on the ask right now. */
+export declare function Waiting({ ask }: {
+    readonly ask: Ask;
+}): import("react").JSX.Element | null;
+/** Every ask in the inbox, grouped by whose move it is. */
+export declare function AskList({ inbox, selected, }: {
+    readonly inbox: InboxState;
+    readonly selected: string | null;
+}): import("react").JSX.Element;