@loopbacktools/inbox 0.0.0-stage → 0.4.0

package/dist/src/list.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge, Text } from "@cloudflare/kumo";
+import { CaretDown, CaretRight, ChatCircleDots, Eye, ListBullets, Question, } from "@phosphor-icons/react";
+import { AskLink } from "./context.js";
+import { age, headline, pointsNeedingYou, useNow, useRecentOpen } from "./hooks.js";
+export function KindIcon({ ask }) {
+    switch (ask.kind) {
+        case "question":
+            return _jsx(ChatCircleDots, { size: 18, weight: "duotone", "aria-label": "Question" });
+        case "review":
+            return _jsx(Eye, { size: 18, weight: "duotone", "aria-label": "Review" });
+        case "briefing":
+            return _jsx(ListBullets, { size: 18, weight: "duotone", "aria-label": "Briefing" });
+        case "unknown":
+            return _jsx(Question, { size: 18, weight: "duotone", "aria-label": "Can't be shown" });
+    }
+}
+/** Whether an agent is blocked on the ask right now. */
+export function Waiting({ ask }) {
+    if (ask.status === "closed")
+        return null;
+    return ask.waiting ? (_jsxs("span", { className: "inline-flex items-center gap-1.5 text-xs text-kumo-success", children: [_jsx("span", { className: "size-2 animate-pulse rounded-full bg-kumo-success" }), "Agent waiting"] })) : (_jsxs("span", { className: "inline-flex items-center gap-1.5 text-xs text-kumo-inactive", children: [_jsx("span", { className: "size-2 rounded-full bg-kumo-line" }), "Agent not waiting"] }));
+}
+function Row({ ask, selected, now, }) {
+    const needing = pointsNeedingYou(ask);
+    return (_jsxs(AskLink, { askId: ask.id, "aria-current": selected ? "page" : undefined, className: `flex gap-3 border-b border-kumo-hairline px-4 py-3 transition-colors hover:bg-kumo-tint ${selected ? "bg-kumo-tint" : ""}`, children: [_jsx("span", { className: "mt-0.5 shrink-0 text-kumo-subtle", children: _jsx(KindIcon, { ask: ask }) }), _jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [_jsxs("span", { className: "flex items-baseline gap-2", children: [_jsx(Text, { truncate: true, bold: ask.status === "awaiting_human", children: headline(ask) }), _jsx("span", { className: "ml-auto shrink-0 text-xs text-kumo-subtle tabular-nums", children: age(ask.closedAt ?? ask.updatedAt, now) })] }), _jsxs("span", { className: "flex flex-wrap items-center gap-2", children: [ask.project === undefined ? null : _jsx(Badge, { variant: "neutral", children: ask.project }), needing === 0 ? null : _jsxs(Badge, { variant: "orange", children: [needing, " need you"] }), _jsx(Waiting, { ask: ask })] })] })] }));
+}
+const SECTION_HEADING = "sticky top-0 z-10 flex w-full items-center gap-1.5 border-b border-kumo-hairline bg-kumo-canvas px-4 py-2 text-left text-xs font-medium uppercase tracking-wide text-kumo-subtle";
+function Section({ title, asks, selected, now, collapse, }) {
+    if (asks.length === 0)
+        return null;
+    const count = _jsxs("span", { className: "tabular-nums", children: ["\u00B7 ", asks.length] });
+    const open = collapse?.open ?? true;
+    return (_jsxs("section", { children: [collapse === undefined ? (_jsxs("h2", { className: SECTION_HEADING, children: [title, " ", count] })) : (_jsx("h2", { children: _jsxs("button", { type: "button", "aria-expanded": open, onClick: collapse.toggle, className: `${SECTION_HEADING} hover:text-kumo-default`, children: [open ? _jsx(CaretDown, { size: 12 }) : _jsx(CaretRight, { size: 12 }), title, " ", count] }) })), open
+                ? asks.map((ask) => _jsx(Row, { ask: ask, selected: ask.id === selected, now: now }, ask.id))
+                : null] }));
+}
+/** Every ask in the inbox, grouped by whose move it is. */
+export function AskList({ inbox, selected, }) {
+    const now = useNow();
+    const [recentOpen, toggleRecent] = useRecentOpen();
+    const yours = inbox.open.filter((ask) => ask.status === "awaiting_human");
+    const theirs = inbox.open.filter((ask) => ask.status === "awaiting_agent");
+    return (_jsxs("nav", { "aria-label": "Asks", children: [inbox.open.length === 0 ? (_jsx("p", { className: "px-4 py-6 text-sm text-kumo-subtle", children: "Nothing needs you right now." })) : null, _jsx(Section, { title: "Your turn", asks: yours, selected: selected, now: now }), _jsx(Section, { title: "Waiting on the agent", asks: theirs, selected: selected, now: now }), _jsx(Section, { title: "Recent", asks: inbox.recent, selected: selected, now: now, collapse: { open: recentOpen, toggle: toggleRecent } })] }));
+}

package/dist/src/page.d.ts

@@ -0,0 +1,2 @@
+/** Reloads the page, onto whatever code now serves it. */
+export declare const reloadPage: () => void;

package/dist/src/page.js

@@ -0,0 +1,2 @@
+/** Reloads the page, onto whatever code now serves it. */
+export const reloadPage = () => window.location.reload();

package/dist/src/people.d.ts

@@ -0,0 +1,8 @@
+import type { Actor } from "@loopbacktools/sdk";
+/** Who the inbox is signed in as, once it knows. */
+export declare const useMe: () => string | undefined;
+/**
+ * Someone the deployment named, as the person reading sees them: "You" for themselves, and for anyone
+ * the deployment could not name, as on a single-person inbox; otherwise their name.
+ */
+export declare const whoIs: (actor: Actor | undefined, me: string | undefined) => string;

package/dist/src/people.js

@@ -0,0 +1,11 @@
+import { useAtomValue } from "@effect/atom-react";
+import { AsyncResult } from "effect/reactivity";
+import { useClient } from "./context.js";
+import { meAtom } from "./state.js";
+/** Who the inbox is signed in as, once it knows. */
+export const useMe = () => AsyncResult.getOrElse(useAtomValue(meAtom(useClient())), () => undefined);
+/**
+ * Someone the deployment named, as the person reading sees them: "You" for themselves, and for anyone
+ * the deployment could not name, as on a single-person inbox; otherwise their name.
+ */
+export const whoIs = (actor, me) => actor === undefined || actor.id === me || actor.name === undefined ? "You" : actor.name;

package/dist/src/state.d.ts

@@ -0,0 +1,19 @@
+import { type ApiError, type LoopbackApi, type ReplyBody } from "@loopbacktools/sdk";
+import { Atom } from "effect/reactivity";
+/**
+ * Everything here is kept per client, so a host that switches the inbox to another space, by
+ * handing over another client, starts afresh, and what the last one held is released.
+ */
+/** The inbox a client opens, followed live while anything renders it. */
+export declare const inboxAtom: (arg: LoopbackApi) => Atom.Atom<import("effect/reactivity/AsyncResult").AsyncResult<import("@loopbacktools/sdk").InboxState, import("effect/Cause").NoSuchElementError>>;
+/** Whether Loopback has been updated under the page a client is in. */
+export declare const updateAtom: (arg: LoopbackApi) => Atom.Atom<import("effect/reactivity/AsyncResult").AsyncResult<import("@loopbacktools/sdk").Update, import("effect/Cause").NoSuchElementError>>;
+/** Who a client is signed in as: the person whose replies read as "you". */
+export declare const meAtom: (arg: LoopbackApi) => Atom.Atom<import("effect/reactivity/AsyncResult").AsyncResult<string | undefined, never>>;
+/** Sends a reply to an ask. */
+export declare const replyAtom: (arg: LoopbackApi) => Atom.AtomResultFn<{
+    readonly askId: string;
+    readonly reply: ReplyBody;
+}, unknown, ApiError>;
+/** An uploaded image as an object URL, released when nothing shows it any more. */
+export declare const imageAtom: (arg: LoopbackApi) => (arg: string) => Atom.Atom<import("effect/reactivity/AsyncResult").AsyncResult<string, ApiError>>;

package/dist/src/state.js

@@ -0,0 +1,17 @@
+import { initialInbox } from "@loopbacktools/sdk";
+import { Effect } from "effect";
+import { Atom } from "effect/reactivity";
+/**
+ * Everything here is kept per client, so a host that switches the inbox to another space, by
+ * handing over another client, starts afresh, and what the last one held is released.
+ */
+/** The inbox a client opens, followed live while anything renders it. */
+export const inboxAtom = Atom.family((client) => Atom.make(() => client.inbox, { initialValue: initialInbox }));
+/** Whether Loopback has been updated under the page a client is in. */
+export const updateAtom = Atom.family((client) => Atom.make(() => client.update, { initialValue: "none" }));
+/** Who a client is signed in as: the person whose replies read as "you". */
+export const meAtom = Atom.family((client) => Atom.make(client.whoami.pipe(Effect.map((whoami) => whoami.actor.id), Effect.catch(() => Effect.succeed(undefined)))));
+/** Sends a reply to an ask. */
+export const replyAtom = Atom.family((client) => Atom.fn((input) => client.reply(input.askId, input.reply)));
+/** An uploaded image as an object URL, released when nothing shows it any more. */
+export const imageAtom = Atom.family((client) => Atom.family((uploadId) => Atom.make(Effect.acquireRelease(Effect.map(client.file(uploadId), (blob) => URL.createObjectURL(blob)), (url) => Effect.sync(() => URL.revokeObjectURL(url))))));

package/dist/src/thread.d.ts

@@ -0,0 +1,15 @@
+import type { Block } from "@loopbacktools/sdk";
+/** A turn the agent took in a thread: its answer, and anything it showed with it. */
+export declare function AgentSaid({ answer, content, at, now, }: {
+    readonly answer: string;
+    readonly content?: readonly Block[] | undefined;
+    readonly at: string;
+    readonly now: number;
+}): import("react").JSX.Element;
+/** A turn the person took in a thread: what they did, and their words when they gave any. */
+export declare function PersonSaid({ title, body, at, now, }: {
+    readonly title: string;
+    readonly body?: string | undefined;
+    readonly at: string;
+    readonly now: number;
+}): import("react").JSX.Element;

package/dist/src/thread.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from "@cloudflare/kumo";
+import { Blocks, Prose } from "./content.js";
+import { age } from "./hooks.js";
+/** A turn the agent took in a thread: its answer, and anything it showed with it. */
+export function AgentSaid({ answer, content, at, now, }) {
+    return (_jsxs("div", { className: "flex flex-col gap-3 rounded-lg border border-kumo-line bg-kumo-base p-4", children: [_jsxs(Text, { variant: "secondary", size: "sm", children: ["The agent answered \u00B7 ", age(at, now)] }), _jsx(Prose, { text: answer }), content === undefined ? null : _jsx(Blocks, { blocks: content })] }));
+}
+/** A turn the person took in a thread: what they did, and their words when they gave any. */
+export function PersonSaid({ title, body, at, now, }) {
+    return (_jsxs("div", { className: "ml-auto flex max-w-[85%] flex-col gap-1 rounded-lg bg-kumo-tint p-4", children: [_jsxs(Text, { size: "sm", bold: true, children: [title, " \u00B7 ", _jsx("span", { className: "font-normal text-kumo-subtle", children: age(at, now) })] }), body === undefined ? null : _jsx(Prose, { text: body })] }));
+}

package/dist/src/update.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Says when Loopback has been updated under the page. A later deploy of the same revision of the
+ * contract is offered as a reload. A later revision is one this page can't fully read, so it reloads
+ * at the first moment that disturbs no one: as soon as the page is hidden, or at once if it already
+ * is. What the person has written and not sent is kept in this browser, so the reload loses none of it.
+ */
+export declare function UpdateBanner(): import("react").JSX.Element | null;

package/dist/src/update.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Banner } from "@cloudflare/kumo";
+import { ArrowClockwise } from "@phosphor-icons/react";
+import { useEffect } from "react";
+import { useUpdate } from "./context.js";
+import { reloadPage } from "./page.js";
+/**
+ * Says when Loopback has been updated under the page. A later deploy of the same revision of the
+ * contract is offered as a reload. A later revision is one this page can't fully read, so it reloads
+ * at the first moment that disturbs no one: as soon as the page is hidden, or at once if it already
+ * is. What the person has written and not sent is kept in this browser, so the reload loses none of it.
+ */
+export function UpdateBanner() {
+    const update = useUpdate();
+    useEffect(() => {
+        if (update !== "required")
+            return undefined;
+        const whenHidden = () => {
+            if (document.visibilityState === "hidden")
+                reloadPage();
+        };
+        whenHidden();
+        document.addEventListener("visibilitychange", whenHidden);
+        return () => document.removeEventListener("visibilitychange", whenHidden);
+    }, [update]);
+    if (update === "none")
+        return null;
+    return (_jsx(Banner, { size: "sm", className: "m-2", icon: _jsx(ArrowClockwise, {}), title: "Loopback has been updated", description: update === "required"
+            ? "This page reloads onto the new version when you next leave it. Anything you haven't sent is kept."
+            : "Reload to use the new version.", action: _jsx(Banner.Action, { onClick: reloadPage, children: "Reload" }) }));
+}

package/package.json

@@ -1,6 +1,66 @@
 {
   "name": "@loopbacktools/inbox",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.4.0",
+  "description": "The Loopback inbox as React components: read and answer what agents ask, live, inside your own app.",
+  "homepage": "https://github.com/LoopBackTools/loopback/tree/main/packages/inbox#readme",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/LoopBackTools/loopback.git",
+    "directory": "packages/inbox"
+  },
+  "files": [
+    "dist",
+    "src",
+    "styles.css"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/src/index.d.ts",
+      "default": "./dist/src/index.js"
+    },
+    "./styles.css": "./styles.css"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@phosphor-icons/react": "2.1.10",
+    "react-markdown": "10.1.0",
+    "remark-gfm": "4.0.1"
+  },
+  "devDependencies": {
+    "@cloudflare/kumo": "2.15.0",
+    "@effect/atom-react": "4.0.6",
+    "@testing-library/jest-dom": "7.0.1",
+    "@testing-library/react": "16.3.3",
+    "@testing-library/user-event": "14.6.8",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "@vitejs/plugin-react": "6.1.2",
+    "effect": "4.0.6",
+    "jsdom": "30.1.3",
+    "react": "19.3.1",
+    "react-dom": "19.3.1",
+    "typescript": "7.0.2",
+    "vitest": "5.0.5",
+    "@loopbacktools/sdk": "0.4.0"
+  },
+  "peerDependencies": {
+    "@cloudflare/kumo": "^2.15.0",
+    "@effect/atom-react": "^4.0.6",
+    "effect": "^4.0.6",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "@loopbacktools/sdk": "^0.4.0"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "build": "tsc -p tsconfig.build.json"
+  }
 }