@loopbacktools/inbox 0.0.0-stage → 0.4.0

package/src/hooks.ts

@@ -0,0 +1,212 @@
+import { awaitingHuman, type Ask, foldBriefing, type InboxState } 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: readonly Ask[], current: string): string | null => {
+	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: InboxState, picked: string | null): string | null =>
+	picked ?? awaitingHuman(inbox)[0]?.id ?? null;
+
+/** The asks the person's own agents raised: what "Mine" shows. */
+export const onlyMine = (inbox: InboxState, me: string): InboxState => {
+	const mine = (ask: 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: InboxState, me: string | undefined): boolean =>
+	me !== undefined &&
+	[...inbox.open, ...inbox.recent].some(
+		(ask) => ask.raisedBy !== undefined && ask.raisedBy.id !== me,
+	);
+
+/** Which asks the list shows. */
+export type Filter = "all" | "mine";
+
+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<Filter>(() => {
+		try {
+			return localStorage.getItem(FILTER_KEY) === "mine" ? "mine" : "all";
+		} catch {
+			return "all";
+		}
+	});
+	const choose = (next: Filter) => {
+		setFilter(next);
+		try {
+			localStorage.setItem(FILTER_KEY, next);
+		} catch {
+			// Remembered for this tab only.
+		}
+	};
+	return [filter, choose] as const;
+};
+
+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 } as const;
+
+const clampWidth = (width: number) =>
+	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: number) => {
+		const clamped = clampWidth(next);
+		setWidth(clamped);
+		try {
+			localStorage.setItem(SIDEBAR_KEY, String(clamped));
+		} catch {
+			// Remembered for this tab only.
+		}
+	};
+	return [width, resize] as const;
+};
+
+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] as const;
+};
+
+/** The kind of thing an ask is, in a few words. */
+export const headline = (ask: Ask): string =>
+	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): number =>
+	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: string, now: number): string => {
+	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 = (): number => {
+	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: InboxState, notify: boolean, open: (askId: string) => void) => {
+	const seen = useRef<Set<string> | null>(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/src/inbox.tsx

@@ -0,0 +1,191 @@
+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 { type CSSProperties, type KeyboardEvent, type PointerEvent, useRef } from "react";
+import { type InboxNavigation, NavigationContext, RootContext, useInbox } from "./context.tsx";
+import { AskDetail } from "./detail.tsx";
+import {
+	type Filter,
+	focusOf,
+	nextAfter,
+	onlyMine,
+	shared,
+	SIDEBAR,
+	useFilter,
+	useSidebarWidth,
+} from "./hooks.ts";
+import { AskList } from "./list.tsx";
+import { useMe } from "./people.ts";
+import { UpdateBanner } from "./update.tsx";
+
+/** 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",
+] as const;
+
+/** The edge between the list and the ask: drag it, or focus it and use the arrow keys. */
+function ResizeHandle({
+	width,
+	onResize,
+}: {
+	readonly width: number;
+	readonly onResize: (width: number) => void;
+}) {
+	const drag = useRef<{ readonly x: number; readonly width: number } | null>(null);
+	const onPointerDown = (event: PointerEvent<HTMLDivElement>) => {
+		drag.current = { x: event.clientX, width };
+		event.currentTarget.setPointerCapture(event.pointerId);
+	};
+	const onPointerMove = (event: PointerEvent<HTMLDivElement>) => {
+		if (drag.current !== null) onResize(drag.current.width + event.clientX - drag.current.x);
+	};
+	const onPointerUp = (event: PointerEvent<HTMLDivElement>) => {
+		drag.current = null;
+		event.currentTarget.releasePointerCapture(event.pointerId);
+	};
+	const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+		if (event.key === "ArrowLeft") onResize(width - 16);
+		else if (event.key === "ArrowRight") onResize(width + 16);
+		else return;
+		event.preventDefault();
+	};
+	return (
+		// An <hr> is a static separator; a splitter that resizes is the focusable kind, which only
+		// role="separator" can express.
+		<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 }: InboxNavigation) {
+	const root = useRef<HTMLDivElement>(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: string) => onSelect(nextAfter(awaitingHuman(inbox), answered));
+	const allDone = inbox.status === "live" && awaitingHuman(inbox).length === 0;
+
+	return (
+		<NavigationContext value={{ selectedId, onSelect, hrefFor }}>
+			<RootContext value={root}>
+				<ShikiProvider engine="javascript" languages={[...LANGUAGES]}>
+					<div ref={root} className="flex h-full min-h-0 flex-1 flex-col">
+						<UpdateBanner />
+						<div className="flex min-h-0 flex-1">
+							<aside
+								style={{ "--sidebar": `${width}px` } as CSSProperties}
+								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"
+								}`}
+							>
+								{choosing ? (
+									<div className="border-b border-kumo-hairline px-4 py-2">
+										<Tabs
+											size="sm"
+											value={filter}
+											onValueChange={(value) => setFilter(value as Filter)}
+											tabs={[
+												{ value: "all", label: "Everyone's" },
+												{ value: "mine", label: "My agents'" },
+											]}
+										/>
+									</div>
+								) : null}
+								{inbox.status === "connecting" ? (
+									<div className="flex justify-center p-8">
+										<Loader />
+									</div>
+								) : inbox.open.length === 0 && inbox.recent.length === 0 ? (
+									<Empty
+										icon={<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."
+										}
+									/>
+								) : (
+									<AskList inbox={inbox} selected={focusId} />
+								)}
+							</aside>
+							<ResizeHandle width={width} onResize={resize} />
+							<main
+								className={`min-w-0 flex-1 overflow-y-auto md:block ${selectedId === null ? "hidden" : ""}`}
+							>
+								{selected !== undefined ? (
+									<AskDetail ask={selected} onReplied={() => advance(selected.id)} />
+								) : selectedId !== null && inbox.status === "live" ? (
+									<Empty
+										title="Not in the inbox"
+										description="This ask is older than the inbox keeps."
+									/>
+								) : (
+									<div className="hidden h-full items-center justify-center md:flex">
+										{allDone ? (
+											<div className="w-full max-w-sm">
+												<Empty
+													icon={<CheckCircle size={32} weight="duotone" />}
+													title="All done"
+													description="Nothing needs you right now."
+												/>
+											</div>
+										) : null}
+									</div>
+								)}
+							</main>
+						</div>
+					</div>
+				</ShikiProvider>
+			</RootContext>
+		</NavigationContext>
+	);
+}

package/src/index.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/src/list.tsx

@@ -0,0 +1,157 @@
+import { Badge, Text } from "@cloudflare/kumo";
+import type { Ask, InboxState } from "@loopbacktools/sdk";
+import {
+	CaretDown,
+	CaretRight,
+	ChatCircleDots,
+	Eye,
+	ListBullets,
+	Question,
+} from "@phosphor-icons/react";
+import { AskLink } from "./context.tsx";
+import { age, headline, pointsNeedingYou, useNow, useRecentOpen } from "./hooks.ts";
+
+export function KindIcon({ ask }: { readonly ask: Ask }) {
+	switch (ask.kind) {
+		case "question":
+			return <ChatCircleDots size={18} weight="duotone" aria-label="Question" />;
+		case "review":
+			return <Eye size={18} weight="duotone" aria-label="Review" />;
+		case "briefing":
+			return <ListBullets size={18} weight="duotone" aria-label="Briefing" />;
+		case "unknown":
+			return <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 }: { readonly ask: Ask }) {
+	if (ask.status === "closed") return null;
+	return ask.waiting ? (
+		<span className="inline-flex items-center gap-1.5 text-xs text-kumo-success">
+			<span className="size-2 animate-pulse rounded-full bg-kumo-success" />
+			Agent waiting
+		</span>
+	) : (
+		<span className="inline-flex items-center gap-1.5 text-xs text-kumo-inactive">
+			<span className="size-2 rounded-full bg-kumo-line" />
+			Agent not waiting
+		</span>
+	);
+}
+
+function Row({
+	ask,
+	selected,
+	now,
+}: {
+	readonly ask: Ask;
+	readonly selected: boolean;
+	readonly now: number;
+}) {
+	const needing = pointsNeedingYou(ask);
+	return (
+		<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" : ""
+			}`}
+		>
+			<span className="mt-0.5 shrink-0 text-kumo-subtle">
+				<KindIcon ask={ask} />
+			</span>
+			<span className="flex min-w-0 flex-1 flex-col gap-1">
+				<span className="flex items-baseline gap-2">
+					<Text truncate bold={ask.status === "awaiting_human"}>
+						{headline(ask)}
+					</Text>
+					<span className="ml-auto shrink-0 text-xs text-kumo-subtle tabular-nums">
+						{age(ask.closedAt ?? ask.updatedAt, now)}
+					</span>
+				</span>
+				<span className="flex flex-wrap items-center gap-2">
+					{ask.project === undefined ? null : <Badge variant="neutral">{ask.project}</Badge>}
+					{needing === 0 ? null : <Badge variant="orange">{needing} need you</Badge>}
+					<Waiting ask={ask} />
+				</span>
+			</span>
+		</AskLink>
+	);
+}
+
+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,
+}: {
+	readonly title: string;
+	readonly asks: readonly Ask[];
+	readonly selected: string | null;
+	readonly now: number;
+	/** Makes the section foldable: its heading opens and closes it. */
+	readonly collapse?: { readonly open: boolean; readonly toggle: () => void };
+}) {
+	if (asks.length === 0) return null;
+	const count = <span className="tabular-nums">· {asks.length}</span>;
+	const open = collapse?.open ?? true;
+	return (
+		<section>
+			{collapse === undefined ? (
+				<h2 className={SECTION_HEADING}>
+					{title} {count}
+				</h2>
+			) : (
+				<h2>
+					<button
+						type="button"
+						aria-expanded={open}
+						onClick={collapse.toggle}
+						className={`${SECTION_HEADING} hover:text-kumo-default`}
+					>
+						{open ? <CaretDown size={12} /> : <CaretRight size={12} />}
+						{title} {count}
+					</button>
+				</h2>
+			)}
+			{open
+				? asks.map((ask) => <Row key={ask.id} ask={ask} selected={ask.id === selected} now={now} />)
+				: null}
+		</section>
+	);
+}
+
+/** Every ask in the inbox, grouped by whose move it is. */
+export function AskList({
+	inbox,
+	selected,
+}: {
+	readonly inbox: InboxState;
+	readonly selected: string | null;
+}) {
+	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 (
+		<nav aria-label="Asks">
+			{inbox.open.length === 0 ? (
+				<p className="px-4 py-6 text-sm text-kumo-subtle">Nothing needs you right now.</p>
+			) : null}
+			<Section title="Your turn" asks={yours} selected={selected} now={now} />
+			<Section title="Waiting on the agent" asks={theirs} selected={selected} now={now} />
+			<Section
+				title="Recent"
+				asks={inbox.recent}
+				selected={selected}
+				now={now}
+				collapse={{ open: recentOpen, toggle: toggleRecent }}
+			/>
+		</nav>
+	);
+}

package/src/page.ts

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

package/src/people.ts

@@ -0,0 +1,16 @@
+import { useAtomValue } from "@effect/atom-react";
+import type { Actor } from "@loopbacktools/sdk";
+import { AsyncResult } from "effect/reactivity";
+import { useClient } from "./context.tsx";
+import { meAtom } from "./state.ts";
+
+/** Who the inbox is signed in as, once it knows. */
+export const useMe = (): string | undefined =>
+	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: Actor | undefined, me: string | undefined): string =>
+	actor === undefined || actor.id === me || actor.name === undefined ? "You" : actor.name;

package/src/state.ts

@@ -0,0 +1,50 @@
+import { type ApiError, initialInbox, type LoopbackApi, type ReplyBody } 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: LoopbackApi) =>
+	Atom.make(() => client.inbox, { initialValue: initialInbox }),
+);
+
+/** Whether Loopback has been updated under the page a client is in. */
+export const updateAtom = Atom.family((client: LoopbackApi) =>
+	Atom.make(() => client.update, { initialValue: "none" as const }),
+);
+
+/** Who a client is signed in as: the person whose replies read as "you". */
+export const meAtom = Atom.family((client: LoopbackApi) =>
+	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: LoopbackApi) =>
+	Atom.fn(
+		(input: {
+			readonly askId: string;
+			readonly reply: ReplyBody;
+		}): Effect.Effect<unknown, ApiError> => 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: LoopbackApi) =>
+	Atom.family((uploadId: string) =>
+		Atom.make(
+			Effect.acquireRelease(
+				Effect.map(client.file(uploadId), (blob) => URL.createObjectURL(blob)),
+				(url) => Effect.sync(() => URL.revokeObjectURL(url)),
+			),
+		),
+	),
+);

package/src/thread.tsx

@@ -0,0 +1,49 @@
+import { Text } from "@cloudflare/kumo";
+import type { Block } from "@loopbacktools/sdk";
+import { Blocks, Prose } from "./content.tsx";
+import { age } from "./hooks.ts";
+
+/** A turn the agent took in a thread: its answer, and anything it showed with it. */
+export function AgentSaid({
+	answer,
+	content,
+	at,
+	now,
+}: {
+	readonly answer: string;
+	readonly content?: readonly Block[] | undefined;
+	readonly at: string;
+	readonly now: number;
+}) {
+	return (
+		<div className="flex flex-col gap-3 rounded-lg border border-kumo-line bg-kumo-base p-4">
+			<Text variant="secondary" size="sm">
+				The agent answered · {age(at, now)}
+			</Text>
+			<Prose text={answer} />
+			{content === undefined ? null : <Blocks blocks={content} />}
+		</div>
+	);
+}
+
+/** 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,
+}: {
+	readonly title: string;
+	readonly body?: string | undefined;
+	readonly at: string;
+	readonly now: number;
+}) {
+	return (
+		<div className="ml-auto flex max-w-[85%] flex-col gap-1 rounded-lg bg-kumo-tint p-4">
+			<Text size="sm" bold>
+				{title} · <span className="font-normal text-kumo-subtle">{age(at, now)}</span>
+			</Text>
+			{body === undefined ? null : <Prose text={body} />}
+		</div>
+	);
+}