@loopbacktools/inbox 0.0.0-stage → 0.4.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Bison Labs Limited
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,82 @@
-# Temporary Holding Version
+# @loopbacktools/inbox
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+The [Loopback](https://github.com/LoopBackTools/loopback) inbox as React components: every ask your agents
+raise, in a list, and the one open beside it, answered in place, kept live as agents ask and reply.
+It is the inbox Loopback deploys, made to render inside an app of your own, with your sign-in and
+your routes around it.
+
+```sh
+pnpm add @loopbacktools/inbox @loopbacktools/sdk @cloudflare/kumo @effect/atom-react effect react react-dom
+```
+
+## Rendering it
+
+Hand it a client from [`@loopbacktools/sdk`](https://www.npmjs.com/package/@loopbacktools/sdk), and tell it
+how your app moves between asks:
+
+```tsx
+import { RegistryProvider } from "@effect/atom-react";
+import { Inbox, InboxProvider } from "@loopbacktools/inbox";
+import { make } from "@loopbacktools/sdk";
+import { useMemo } from "react";
+import { useNavigate, useParams } from "react-router";
+
+function Asks({ workspace }: { readonly workspace: string }) {
+	const { askId } = useParams();
+	const navigate = useNavigate();
+	// A client per workspace: hand over another, and the inbox follows that one instead.
+	const client = useMemo(
+		() => make({ baseUrl: location.origin, token: () => tokenFor(workspace) }),
+		[workspace],
+	);
+	return (
+		<InboxProvider client={client}>
+			<Inbox
+				selectedId={askId ?? null}
+				onSelect={(id) => navigate(id === null ? `/w/${workspace}` : `/w/${workspace}/asks/${id}`)}
+				hrefFor={(id) => `/w/${workspace}/asks/${id}`}
+			/>
+		</InboxProvider>
+	);
+}
+
+// Once, around the app: the inbox keeps its state in Effect atoms.
+<RegistryProvider>{/* your app */}</RegistryProvider>;
+```
+
+`tokenFor` stands for however your app gets a fresh token; the SDK calls it for every request, so a
+short-lived JWT is never sent stale.
+
+`Inbox` fills the element it is drawn in, which needs a height. Its shortcuts (digits to pick a
+choice, ⌘↵ or Ctrl↵ to send) work from anywhere on the page except your own controls. Where other
+people's agents ask in the same space, it offers a switch between everyone's asks and the person's
+own agents'.
+
+When Loopback is updated under the page, the inbox says so above the list. A later deploy is offered
+as a reload. A later revision of the contract reloads the page, your app around it included, the next
+time the page is hidden, never under the person. What they have written and not sent, on any kind of
+ask, is kept in the browser's `localStorage` and is there after the reload.
+
+## Styling
+
+The components are styled with [Kumo](https://www.npmjs.com/package/@cloudflare/kumo) and Tailwind 4
+utility classes, generated by your app's Tailwind build. In your stylesheet:
+
+```css
+@source "../node_modules/@cloudflare/kumo/dist/**/*.{js,jsx,ts,tsx}";
+@import "@cloudflare/kumo/styles/tailwind";
+@import "tailwindcss";
+@import "@loopbacktools/inbox/styles.css";
+```
+
+Kumo themes by `data-mode="light"` or `"dark"` on the root element, which your app sets.
+
+## Around it
+
+- `useInbox()` is the inbox state, for a header that shows whether it is live.
+- `useAttention(inbox, notify, open)` keeps the tab title counting what awaits the person, and raises
+  a notification for a new ask while the tab is in the background; `useNotifications()` asks the
+  browser's permission and remembers the choice.
+- `useMe()` and `whoIs(actor, me)` name people as the inbox does: "You", or their name.
+
+MIT licensed.

package/dist/src/briefing.d.ts

@@ -0,0 +1,9 @@
+import { type BriefingAsk } from "@loopbacktools/sdk";
+/**
+ * A briefing's points, to work through one at a time: each folded to a line until opened, with its
+ * own thread and a box to reply on it, and one bar that sends everything written since last time.
+ */
+export declare function BriefingBody({ ask, onReplied, }: {
+    readonly ask: BriefingAsk;
+    readonly onReplied: () => void;
+}): import("react").JSX.Element;

package/dist/src/briefing.js

@@ -0,0 +1,216 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge, Banner, Button, Checkbox, InputArea, Text } from "@cloudflare/kumo";
+import { useAtomSet } from "@effect/atom-react";
+import { ApiError, foldBriefing, respondedProblem, } from "@loopbacktools/sdk";
+import { ArrowDown, CaretDown, CaretRight, Check, Checks, PaperPlaneRight, WarningCircle, X, } from "@phosphor-icons/react";
+import { Cause, Exit } from "effect";
+import { useEffect, useState } from "react";
+import { Blocks, Prose } from "./content.js";
+import { SEND_KEY, useNow } from "./hooks.js";
+import { useMe, whoIs } from "./people.js";
+import { replyAtom } from "./state.js";
+import { useClient, useInboxKeys } from "./context.js";
+import { AgentSaid, PersonSaid } from "./thread.js";
+const EMPTY = { text: "", resolved: false };
+/** The draft that still counts on a point: one written since the point was last resolved. */
+const draftOn = (drafts, point) => {
+    const draft = drafts[point.id];
+    return draft !== undefined && (draft.basis ?? 0) >= point.resolvedAtEntry ? draft : undefined;
+};
+const draftKey = (askId) => `loopback.drafts.${askId}`;
+const readDrafts = (askId) => {
+    try {
+        return JSON.parse(localStorage.getItem(draftKey(askId)) ?? "{}");
+    }
+    catch {
+        return {};
+    }
+};
+/** Keeps a briefing's drafts in this browser, so a long one can be worked through over time. */
+const useDrafts = (askId, basis) => {
+    const [drafts, setDrafts] = useState(() => readDrafts(askId));
+    const keep = (next) => {
+        setDrafts(next);
+        try {
+            if (Object.keys(next).length === 0)
+                localStorage.removeItem(draftKey(askId));
+            else
+                localStorage.setItem(draftKey(askId), JSON.stringify(next));
+        }
+        catch {
+            // Storage can be unavailable (a private window); drafts then last as long as the page.
+        }
+    };
+    const update = (pointId, draft) => {
+        const { [pointId]: _, ...rest } = drafts;
+        keep(draft.text === "" && !draft.resolved ? rest : { ...rest, [pointId]: { ...draft, basis } });
+    };
+    return { drafts, update, clear: () => keep({}) };
+};
+/** Every point, in the order it is read. */
+const inOrder = (points) => points.flatMap((point) => [point, ...inOrder(point.points)]);
+const allPoints = (tree) => inOrder(tree.sections.flatMap((s) => s.points));
+/**
+ * The reply the drafts make. A draft left on a point resolved since it was written is dropped.
+ * Words beneath a point being resolved go as resolved too, as the space would read them anyway.
+ * Finishing resolves every remaining point: the uppermost of each open branch, and any written on.
+ */
+const replyFrom = (tree, drafts, finishing) => {
+    const items = [];
+    const walk = (points, covered) => {
+        for (const point of points) {
+            const draft = draftOn(drafts, point);
+            const text = draft?.text.trim() ?? "";
+            const resolving = draft?.resolved === true || finishing || covered;
+            const included = text !== "" ||
+                draft?.resolved === true ||
+                (finishing && !covered && point.state !== "resolved");
+            if (included) {
+                items.push({
+                    point: point.id,
+                    ...(text === "" ? {} : { text }),
+                    ...(resolving ? { resolved: true } : {}),
+                });
+            }
+            walk(point.points, covered || (included && resolving));
+        }
+    };
+    for (const section of tree.sections)
+        walk(section.points, false);
+    return items;
+};
+const MARKER = {
+    needs_you: { label: "Needs you", variant: "orange" },
+    with_agent: { label: "With the agent", variant: "neutral" },
+};
+/** The small uppercase label the inbox gives every group, as the list does "Your turn". */
+const GROUP_LABEL = "text-xs font-medium uppercase tracking-wide text-kumo-subtle";
+/** A point's number, in the chip a question's choices are numbered with. */
+function PointId({ id }) {
+    return (_jsx("span", { className: "flex h-5 min-w-5 shrink-0 items-center justify-center rounded border border-kumo-line px-1 text-xs text-kumo-subtle tabular-nums", children: id }));
+}
+/** Where a folded point stands: a badge for its own state, and a count of what waits beneath it. */
+function Marker({ point }) {
+    const below = point.needsYou - (point.state === "needs_you" ? 1 : 0);
+    return (_jsxs(_Fragment, { children: [below === 0 ? null : (_jsxs("span", { className: "hidden text-xs text-kumo-subtle tabular-nums sm:inline", children: [below, " below"] })), point.state === "needs_you" || point.state === "with_agent" ? (_jsx(Badge, { variant: MARKER[point.state].variant, children: MARKER[point.state].label })) : null] }));
+}
+/** That a reply is drafted on a point, marked as the list marks an agent waiting. */
+function Drafted() {
+    return (_jsxs("span", { className: "inline-flex items-center gap-1.5 text-xs text-kumo-subtle", children: [_jsx("span", { className: "size-2 rounded-full bg-kumo-brand" }), _jsx("span", { className: "sr-only sm:not-sr-only", children: "Draft" })] }));
+}
+function Turn({ turn, now }) {
+    const me = useMe();
+    if (turn.author === "agent") {
+        return _jsx(AgentSaid, { answer: turn.answer, content: turn.content, at: turn.at, now: now });
+    }
+    const who = whoIs(turn.by, me);
+    const words = turn.text?.trim() ?? "";
+    return (_jsx(PersonSaid, { title: turn.resolved ? `${who} resolved this` : `${who} wrote`, body: words === "" ? undefined : words, at: turn.at, now: now }));
+}
+function PointItem({ point, shared }) {
+    const open = shared.opened.has(point.id);
+    const draft = draftOn(shared.drafts, point) ?? EMPTY;
+    const resolved = point.state === "resolved";
+    const drafted = draft.text.trim() !== "" || draft.resolved;
+    const panel = `point-${point.id}`;
+    return (_jsxs("li", { id: `row-${point.id}`, children: [_jsxs("button", { type: "button", "aria-expanded": open, "aria-controls": panel, onClick: () => shared.toggle(point.id), className: `flex w-full items-center gap-3 px-4 py-3 text-left transition-colors hover:bg-kumo-tint ${open ? "bg-kumo-tint" : ""}`, children: [_jsx("span", { className: "shrink-0 text-kumo-subtle", children: open ? _jsx(CaretDown, { size: 12 }) : _jsx(CaretRight, { size: 12 }) }), _jsx(PointId, { id: point.id }), _jsx(Text, { truncate: true, bold: point.state === "needs_you", children: point.title }), _jsxs("span", { className: "ml-auto flex shrink-0 items-center gap-2", children: [drafted ? _jsx(Drafted, {}) : null, _jsx(Marker, { point: point })] })] }), open ? (_jsxs("section", { id: panel, "aria-label": `${point.id} ${point.title}`, className: "flex flex-col gap-3 px-4 pt-1 pb-4 sm:pl-[4.25rem]", children: [point.detail === undefined ? null : _jsx(Prose, { text: point.detail }), point.content === undefined ? null : _jsx(Blocks, { blocks: point.content }), point.turns.map((turn) => (_jsx(Turn, { turn: turn, now: shared.now }, `${turn.author}:${turn.at}`))), shared.writable ? (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(InputArea, { "aria-label": `Your reply on point ${point.id}`, placeholder: resolved
+                                    ? "Write here to reopen this point"
+                                    : "A question, a push-back or a comment", value: draft.text, onValueChange: (text) => shared.update(point.id, { ...draft, text }), autoResize: true, minRows: 2, maxRows: 10 }), resolved ? null : (_jsx(Checkbox, { label: "Resolved", checked: draft.resolved, onCheckedChange: (checked) => shared.update(point.id, { ...draft, resolved: checked }) }))] })) : null, point.points.length === 0 ? null : _jsx(Points, { points: point.points, shared: shared })] })) : null] }));
+}
+/**
+ * One level of points, as a card of rows: what is still open, in order, then the resolved folded
+ * into a count that opens like the list's "Recent".
+ */
+function Points({ points, shared, }) {
+    const [showResolved, setShowResolved] = useState(false);
+    const live = points.filter((point) => point.state !== "resolved");
+    const resolved = points.filter((point) => point.state === "resolved");
+    return (_jsxs("ul", { className: "divide-y divide-kumo-hairline overflow-hidden rounded-lg border border-kumo-line bg-kumo-base", children: [live.map((point) => (_jsx(PointItem, { point: point, shared: shared }, point.id))), resolved.length === 0 ? null : (_jsxs("li", { children: [_jsxs("button", { type: "button", "aria-expanded": showResolved, onClick: () => setShowResolved((shown) => !shown), className: `flex w-full items-center gap-1.5 px-4 py-2 text-left hover:text-kumo-default ${GROUP_LABEL}`, children: [showResolved ? _jsx(CaretDown, { size: 12 }) : _jsx(CaretRight, { size: 12 }), "Resolved ", _jsxs("span", { className: "tabular-nums", children: ["\u00B7 ", resolved.length] })] }), showResolved ? (_jsx("ul", { className: "divide-y divide-kumo-hairline border-t border-kumo-hairline", children: resolved.map((point) => (_jsx(PointItem, { point: point, shared: shared }, point.id))) })) : null] }))] }));
+}
+/** The ids of a point and every point above it. */
+const pathTo = (id) => id.split(".").map((_, depth, parts) => parts.slice(0, depth + 1).join("."));
+/**
+ * A briefing's points, to work through one at a time: each folded to a line until opened, with its
+ * own thread and a box to reply on it, and one bar that sends everything written since last time.
+ */
+export function BriefingBody({ ask, onReplied, }) {
+    const now = useNow();
+    const send = useAtomSet(replyAtom(useClient()), { mode: "promiseExit" });
+    const basis = ask.thread.length;
+    const { drafts, update, clear } = useDrafts(ask.id, basis);
+    const [opened, setOpened] = useState(() => new Set());
+    const [cursor, setCursor] = useState(null);
+    const [sending, setSending] = useState(null);
+    const [error, setError] = useState(null);
+    const closed = ask.status === "closed";
+    useEffect(() => {
+        if (closed)
+            clear();
+        // Only a briefing closing clears its drafts; `clear` is new on every render.
+        // oxlint-disable-next-line react-hooks/exhaustive-deps
+    }, [closed]);
+    const tree = foldBriefing(ask.prompt, ask.thread);
+    const yourMove = ask.status === "awaiting_human";
+    const busy = sending !== null;
+    const items = replyFrom(tree, drafts, false);
+    const reply = { outcome: "responded", points: items };
+    const problem = items.length === 0 ? null : respondedProblem(ask.prompt, ask.thread, reply);
+    const finishes = items.length > 0 &&
+        problem === null &&
+        foldBriefing(ask.prompt, [...ask.thread, { author: "human", reply, at: "" }]).resolved;
+    const toggle = (id) => setOpened((current) => {
+        const next = new Set(current);
+        if (!next.delete(id))
+            next.add(id);
+        return next;
+    });
+    const needing = allPoints(tree).filter((point) => point.state === "needs_you");
+    const next = () => {
+        const at = needing.findIndex((point) => point.id === cursor);
+        const target = needing[(at + 1) % needing.length];
+        if (target === undefined)
+            return;
+        setCursor(target.id);
+        setOpened((current) => new Set([...current, ...pathTo(target.id)]));
+        requestAnimationFrame(() => document.getElementById(`row-${target.id}`)?.scrollIntoView?.({ block: "nearest" }));
+    };
+    const submit = async (key, sent) => {
+        setSending(key);
+        setError(null);
+        const exit = await send({ askId: ask.id, reply: sent });
+        setSending(null);
+        if (Exit.isSuccess(exit)) {
+            clear();
+            onReplied();
+            return;
+        }
+        // As with any reply: one Loopback refused will not go through as it is; one that never
+        // reached it can simply be sent again. Either way the drafts are kept.
+        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 replies were not accepted", description: reason }
+            : {
+                title: "Your replies were not sent",
+                description: `Loopback could not take them just now (${reason}), so the agent still has nothing. Send them again.`,
+            });
+    };
+    const shared = { opened, toggle, drafts, update, writable: !closed, now };
+    const sendLabel = finishes
+        ? "Finish"
+        : items.length === 0
+            ? "Send"
+            : `Send ${items.length === 1 ? "1 reply" : `${items.length} replies`}`;
+    const canSend = !busy && yourMove && items.length > 0 && problem === null;
+    // ⌘↵ (Ctrl↵ off Apple's keyboards) sends, as it does on every other ask.
+    useInboxKeys((event) => {
+        if (!canSend || event.key !== "Enter" || !(event.metaKey || event.ctrlKey))
+            return;
+        event.preventDefault();
+        void submit("send", reply);
+    });
+    return (_jsxs("div", { className: "flex flex-col gap-6", children: [needing.length === 0 || !yourMove ? null : (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Text, { variant: "secondary", size: "sm", children: needing.length === 1 ? "1 point needs you" : `${needing.length} points need you` }), _jsx(Button, { size: "sm", variant: "ghost", icon: _jsx(ArrowDown, {}), onClick: next, children: "Next point that needs you" })] })), tree.sections.map((section, index) => (_jsxs("section", { className: "flex flex-col gap-2", children: [section.title === undefined ? null : _jsx("h2", { className: GROUP_LABEL, children: section.title }), _jsx(Points, { points: section.points, shared: shared })] }, section.title ?? `section-${index}`))), closed ? null : (_jsxs("div", { className: "sticky bottom-4 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 })), yourMove ? (problem === null ? null : (_jsx(Text, { variant: "secondary", size: "sm", children: problem }))) : (_jsx(Text, { variant: "secondary", size: "sm", children: "The agent is answering your replies. You can keep drafting meanwhile." })), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Button, { variant: "primary", icon: finishes ? _jsx(Check, {}) : _jsx(PaperPlaneRight, {}), loading: sending === "send", disabled: !canSend, onClick: () => void submit("send", reply), children: sendLabel }), _jsx(Button, { icon: _jsx(Checks, {}), loading: sending === "finish", disabled: busy || !yourMove, onClick: () => void submit("finish", {
+                                    outcome: "responded",
+                                    points: replyFrom(tree, drafts, true),
+                                }), children: "Finish now" }), _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 sends"] })] })] }))] }));
+}

package/dist/src/content.d.ts

@@ -0,0 +1,9 @@
+import type { Block } from "@loopbacktools/sdk";
+/** Markdown an agent wrote. Links open in a new tab; fenced code is highlighted. */
+export declare function Prose({ text }: {
+    readonly text: string;
+}): import("react").JSX.Element;
+/** What an agent put up for review, in order. */
+export declare function Blocks({ blocks }: {
+    readonly blocks: readonly Block[];
+}): import("react").JSX.Element;

package/dist/src/content.js

@@ -0,0 +1,59 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Loader, Text } from "@cloudflare/kumo";
+import { CodeHighlighted } from "@cloudflare/kumo/code";
+import { useAtomValue } from "@effect/atom-react";
+import { AsyncResult } from "effect/reactivity";
+import Markdown, {} from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { useClient } from "./context.js";
+import { imageAtom } from "./state.js";
+/** The text inside a markdown node, which react-markdown hands over as children. */
+const textOf = (node) => typeof node === "string" ? node : Array.isArray(node) ? node.map(textOf).join("") : "";
+const markdownComponents = {
+    a: ({ href, children }) => (_jsx("a", { href: href, target: "_blank", rel: "noreferrer noopener", children: children })),
+    pre: ({ children }) => _jsx(_Fragment, { children: children }),
+    code: ({ className, children }) => {
+        const language = /language-(\S+)/.exec(className ?? "")?.[1];
+        const source = textOf(children).replace(/\n$/, "");
+        if (language === undefined && !source.includes("\n"))
+            return _jsx("code", { children: children });
+        return _jsx(CodeHighlighted, { code: source, lang: language ?? "text", showCopyButton: true });
+    },
+};
+/** Markdown an agent wrote. Links open in a new tab; fenced code is highlighted. */
+export function Prose({ text }) {
+    return (_jsx("div", { className: "loopback-markdown text-kumo-default", children: _jsx(Markdown, { remarkPlugins: [remarkGfm], components: markdownComponents, children: text }) }));
+}
+function Caption({ children }) {
+    return (_jsx(Text, { variant: "secondary", size: "sm", children: children }));
+}
+function Picture({ uploadId, caption }) {
+    const result = useAtomValue(imageAtom(useClient())(uploadId));
+    if (AsyncResult.isFailure(result))
+        return _jsx(Text, { variant: "error", children: "This image could not be loaded." });
+    if (!AsyncResult.isSuccess(result)) {
+        return (_jsx("div", { className: "flex h-40 items-center justify-center rounded-lg bg-kumo-recessed", children: _jsx(Loader, {}) }));
+    }
+    return (_jsx("a", { href: result.value, target: "_blank", rel: "noreferrer noopener", children: _jsx("img", { src: result.value, alt: caption ?? "An image the agent uploaded", className: "max-h-[70vh] max-w-full rounded-lg border border-kumo-line" }) }));
+}
+function Image({ uploadId, caption }) {
+    return (_jsxs("figure", { className: "flex flex-col gap-2", children: [_jsx(Picture, { uploadId: uploadId, ...(caption === undefined ? {} : { caption }) }), caption === undefined ? null : _jsx(Caption, { children: caption })] }));
+}
+function BlockView({ block }) {
+    switch (block.type) {
+        case "markdown":
+            return _jsx(Prose, { text: block.text });
+        case "code":
+            return (_jsxs("div", { className: "flex flex-col gap-1", children: [block.filename === undefined ? null : _jsx(Caption, { children: block.filename }), _jsx(CodeHighlighted, { code: block.code, lang: block.language ?? "text", showCopyButton: true })] }));
+        case "diff":
+            return (_jsxs("div", { className: "flex flex-col gap-1", children: [block.filename === undefined ? null : _jsx(Caption, { children: block.filename }), _jsx(CodeHighlighted, { code: block.diff, lang: "diff", showCopyButton: true })] }));
+        case "image":
+            return (_jsx(Image, { uploadId: block.uploadId, ...(block.caption === undefined ? {} : { caption: block.caption }) }));
+        case "unknown":
+            return (_jsx(Caption, { children: "Part of this came from a newer version of Loopback and can't be shown here." }));
+    }
+}
+/** What an agent put up for review, in order. */
+export function Blocks({ blocks }) {
+    return (_jsx("div", { className: "flex flex-col gap-4", children: blocks.map((block, index) => (_jsx(BlockView, { block: block }, index))) }));
+}

package/dist/src/context.d.ts

@@ -0,0 +1,42 @@
+import { type InboxState, type LoopbackApi, type Update } from "@loopbacktools/sdk";
+import { type ComponentProps, type ReactNode, type RefObject } from "react";
+/**
+ * Gives everything inside it the client the inbox reads and answers through. Hand over another
+ * client, for another space or another person, and the inbox follows that one instead.
+ */
+export declare function InboxProvider({ client, children, }: {
+    readonly client: LoopbackApi;
+    readonly children: ReactNode;
+}): import("react").JSX.Element;
+/** The client the nearest `InboxProvider` holds. */
+export declare const useClient: () => LoopbackApi;
+/** The inbox as it stands, kept live while anything renders it. */
+export declare const useInbox: () => InboxState;
+/** Whether Loopback has been updated under the page. */
+export declare const useUpdate: () => Update;
+/** Where the inbox moves between asks: in the host's own routes, or anywhere else it likes. */
+export interface InboxNavigation {
+    /** The ask the person opened, or `null` for none. */
+    readonly selectedId: string | null;
+    /** Opens an ask, or with `null` goes back to the list. */
+    readonly onSelect: (askId: string | null) => void;
+    /** The address of an ask, for links opened in a new tab. */
+    readonly hrefFor: (askId: string) => string;
+}
+export declare const NavigationContext: import("react").Context<InboxNavigation | null>;
+export declare const useNavigation: () => InboxNavigation;
+/**
+ * A link to an ask. A plain click opens it in place, through the host's navigation; a modified or
+ * middle click is left to the browser, so the ask opens in a new tab at its own address.
+ */
+export declare function AskLink({ askId, onClick, children, ...props }: ComponentProps<"a"> & {
+    readonly askId: string;
+}): import("react").JSX.Element;
+/** The element the inbox is drawn in, so its shortcuts leave the rest of the page alone. */
+export declare const RootContext: import("react").Context<RefObject<HTMLElement | null> | null>;
+/**
+ * Listens for keys anywhere on the page except the host's own controls: an ask that opens by itself
+ * has nothing focused, so its shortcuts must work from the page itself, but keys typed into a search
+ * box beside the inbox belong to that box.
+ */
+export declare const useInboxKeys: (onKey: (event: KeyboardEvent) => void) => void;

package/dist/src/context.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useAtomValue } from "@effect/atom-react";
+import { initialInbox } from "@loopbacktools/sdk";
+import { AsyncResult } from "effect/reactivity";
+import { createContext, use, useEffect, } from "react";
+import { inboxAtom, updateAtom } from "./state.js";
+const ClientContext = createContext(null);
+/**
+ * Gives everything inside it the client the inbox reads and answers through. Hand over another
+ * client, for another space or another person, and the inbox follows that one instead.
+ */
+export function InboxProvider({ client, children, }) {
+    return _jsx(ClientContext, { value: client, children: children });
+}
+/** The client the nearest `InboxProvider` holds. */
+export const useClient = () => {
+    const client = use(ClientContext);
+    if (client === null)
+        throw new Error("Loopback's inbox renders inside an <InboxProvider>.");
+    return client;
+};
+/** The inbox as it stands, kept live while anything renders it. */
+export const useInbox = () => AsyncResult.getOrElse(useAtomValue(inboxAtom(useClient())), () => initialInbox);
+/** Whether Loopback has been updated under the page. */
+export const useUpdate = () => AsyncResult.getOrElse(useAtomValue(updateAtom(useClient())), () => "none");
+export const NavigationContext = createContext(null);
+export const useNavigation = () => {
+    const navigation = use(NavigationContext);
+    if (navigation === null)
+        throw new Error("Loopback's inbox needs its navigation.");
+    return navigation;
+};
+/**
+ * A link to an ask. A plain click opens it in place, through the host's navigation; a modified or
+ * middle click is left to the browser, so the ask opens in a new tab at its own address.
+ */
+export function AskLink({ askId, onClick, children, ...props }) {
+    const { hrefFor, onSelect } = useNavigation();
+    return (_jsx("a", { ...props, href: hrefFor(askId), onClick: (event) => {
+            onClick?.(event);
+            const modified = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
+            if (event.defaultPrevented || event.button !== 0 || modified)
+                return;
+            event.preventDefault();
+            onSelect(askId);
+        }, children: children }));
+}
+/** The element the inbox is drawn in, so its shortcuts leave the rest of the page alone. */
+export const RootContext = createContext(null);
+/**
+ * Listens for keys anywhere on the page except the host's own controls: an ask that opens by itself
+ * has nothing focused, so its shortcuts must work from the page itself, but keys typed into a search
+ * box beside the inbox belong to that box.
+ */
+export const useInboxKeys = (onKey) => {
+    const root = use(RootContext);
+    useEffect(() => {
+        const listener = (event) => {
+            const target = event.target;
+            const onPage = target === document.body || target === document.documentElement;
+            const outside = root?.current != null &&
+                target instanceof Node &&
+                !onPage &&
+                !root.current.contains(target);
+            if (!outside)
+                onKey(event);
+        };
+        window.addEventListener("keydown", listener);
+        return () => window.removeEventListener("keydown", listener);
+    });
+};

package/dist/src/detail.d.ts

@@ -0,0 +1,6 @@
+import { type Ask } from "@loopbacktools/sdk";
+export declare function AskDetail({ ask, onReplied, }: {
+    readonly ask: Ask;
+    /** Called once a reply is sent: the inbox moves on to whatever is next. */
+    readonly onReplied?: () => void;
+}): import("react").JSX.Element;