@protobase/ui 0.1.6 → 0.2.0

package/dist/action-card/action-card.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from "react";
+//#region src/action-card/action-card.d.ts
+export type CardTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+/** A button of a card. With `confirm`, clicking it asks that question first. `hint` is a line under the buttons. */
+export type CardAction = {
+  id: string;
+  label: string;
+  style?: 'primary' | 'secondary' | 'ghost' | 'danger';
+  disabled?: boolean;
+  hint?: string;
+  confirm?: string;
+};
+export type ActionCardProps = {
+  title: string;
+  tone?: CardTone;
+  /** Short text at the end of the title row. */
+  badge?: string;
+  /** A muted line under the content. */
+  note?: string;
+  actions?: CardAction[];
+  onAction?: (id: string) => void;
+  children?: ReactNode;
+};
+/** A card with a toned title row, any content, a note and buttons: the building block of rich chat messages. */
+export declare const ActionCard: ({ title, tone, badge, note, actions, onAction, children }: ActionCardProps) => import("react").JSX.Element;
+//#endregion

package/dist/action-card/action-card.js

@@ -0,0 +1,93 @@
+import { cn } from "../lib/cn.js";
+import { Button } from "../primitives/button.js";
+import { Dialog } from "../primitives/dialog.js";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/action-card/action-card.tsx
+const frames = {
+	neutral: {
+		border: "border-border-strong",
+		header: "bg-surface text-foreground"
+	},
+	info: {
+		border: "border-primary-border",
+		header: "bg-primary-soft text-primary-text"
+	},
+	success: {
+		border: "border-success/40",
+		header: "bg-success-soft text-success-text"
+	},
+	warning: {
+		border: "border-warning/40",
+		header: "bg-warning-soft text-warning-text"
+	},
+	danger: {
+		border: "border-danger/40",
+		header: "bg-danger-soft text-danger-text"
+	}
+};
+/** A card with a toned title row, any content, a note and buttons: the building block of rich chat messages. */
+const ActionCard = ({ title, tone = "neutral", badge, note, actions = [], onAction, children }) => {
+	const [confirming, setConfirming] = useState();
+	const hints = actions.flatMap((action) => action.hint ? [action.hint] : []);
+	const click = (action) => action.confirm ? setConfirming(action) : onAction?.(action.id);
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-label": title,
+		className: cn("shrink-0 overflow-hidden rounded-lg border bg-background whitespace-normal text-foreground shadow-sm", frames[tone].border),
+		children: [
+			/* @__PURE__ */ jsxs("header", {
+				className: cn("flex items-center gap-2 px-3 py-2", frames[tone].header),
+				children: [/* @__PURE__ */ jsx("h3", {
+					className: "min-w-0 flex-1 text-[13px] font-semibold",
+					children: title
+				}), badge && /* @__PURE__ */ jsx("span", {
+					className: "shrink-0 text-xs font-medium",
+					children: badge
+				})]
+			}),
+			(children || note || actions.length > 0) && /* @__PURE__ */ jsxs("div", {
+				className: "space-y-2.5 px-3 py-2.5",
+				children: [
+					children,
+					note && /* @__PURE__ */ jsx("p", {
+						className: "text-xs text-muted-foreground",
+						children: note
+					}),
+					actions.length > 0 && /* @__PURE__ */ jsx("div", {
+						className: "flex flex-wrap gap-2 pt-0.5",
+						children: actions.map((action) => /* @__PURE__ */ jsx(Button, {
+							size: "sm",
+							variant: action.style ?? "secondary",
+							className: cn(action.style === "primary" && "flex-1"),
+							disabled: action.disabled,
+							onClick: () => click(action),
+							children: action.label
+						}, action.id))
+					}),
+					hints.map((hint) => /* @__PURE__ */ jsx("p", {
+						className: "text-xs text-muted-foreground",
+						children: hint
+					}, hint))
+				]
+			}),
+			confirming && /* @__PURE__ */ jsx(Dialog, {
+				title: `${confirming.label}?`,
+				description: confirming.confirm,
+				onClose: () => setConfirming(void 0),
+				actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
+					onClick: () => setConfirming(void 0),
+					children: "Cancel"
+				}), /* @__PURE__ */ jsx(Button, {
+					variant: confirming.style === "danger" ? "danger" : "primary",
+					onClick: () => {
+						setConfirming(void 0);
+						onAction?.(confirming.id);
+					},
+					children: confirming.label
+				})] })
+			})
+		]
+	});
+};
+//#endregion
+export { ActionCard };

package/dist/action-card/field-list.d.ts

@@ -0,0 +1,9 @@
+//#region src/action-card/field-list.d.ts
+/** Labelled values, one per row, inside a card. */
+export declare const FieldList: ({ fields }: {
+  fields: Array<{
+    label: string;
+    value: string;
+  }>;
+}) => import("react").JSX.Element;
+//#endregion

package/dist/action-card/field-list.js

@@ -0,0 +1,18 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/action-card/field-list.tsx
+/** Labelled values, one per row, inside a card. */
+const FieldList = ({ fields }) => /* @__PURE__ */ jsx("dl", {
+	className: "grid grid-cols-[auto_minmax(0,1fr)] gap-x-3 gap-y-1 text-xs",
+	children: fields.map((field, index) => /* @__PURE__ */ jsxs("div", {
+		className: "contents",
+		children: [/* @__PURE__ */ jsx("dt", {
+			className: "text-muted-foreground",
+			children: field.label
+		}), /* @__PURE__ */ jsx("dd", {
+			className: "min-w-0 break-words",
+			children: field.value
+		})]
+	}, `${index}-${field.label}`))
+});
+//#endregion
+export { FieldList };

package/dist/action-card/index.d.ts

@@ -0,0 +1,3 @@
+import { ActionCard, ActionCardProps, CardAction, CardTone } from "./action-card.js";
+import { FieldList } from "./field-list.js";
+export { ActionCard, type ActionCardProps, type CardAction, type CardTone, FieldList };

package/dist/app/app.d.ts

@@ -1,7 +1,7 @@
 import { SidebarMode } from "../app-shell/sidebar-mode.js";
 import "../app-shell/index.js";
 import { ProjectUi } from "./pages/project-ui.js";
-import { AuthSession, Client } from "@protobase/client";
+import { AssistantClient, AuthSession, Client } from "@protobase/client";
 //#region src/app/app.d.ts
 export type AppProps = {
   /** Where `/api/v1` lives. Defaults to the current origin. */
@@ -18,6 +18,8 @@ export type AppProps = {
   sidebarMode?: SidebarMode;
   /** The project's React code for composed pages: custom components and action handlers (`protobase.ui.tsx`). */
   ui?: ProjectUi;
+  /** A ready-made client of the assistant backend, for stories and tests; used only when `/meta` names an assistant. */
+  assistant?: AssistantClient;
 };
 /** The admin: sign-in first, then a sidebar from `/meta`, `/:page` composed pages, `/:resource` lists and `/:resource/:key` records. Fills its parent. */
 export declare const App: ({ auth, workspace, ...rest }: AppProps) => import("react").JSX.Element;

package/dist/app/app.js

@@ -7,6 +7,7 @@ import { useRecord } from "../data/use-record.js";
 import { recordTitle } from "../live/model-helpers.js";
 import { humanize } from "../live/naming.js";
 import { ToastProvider } from "../toasts/toast-provider.js";
+import { AssistantButton, AssistantPanel } from "./assistant-shell.js";
 import { breadcrumbFor } from "./breadcrumb-for.js";
 import { Router, matchRoute, useRouter } from "./router.js";
 import { MetaGate, Notice, useAdminMeta } from "./meta-gate.js";
@@ -19,10 +20,10 @@ import { ComposedPage } from "./pages/composed-page.js";
 import { RecordPage } from "./record-page.js";
 import { useGlobalSearch } from "./search/use-global-search.js";
 import { useNavRecent } from "./use-nav-recent.js";
-import { useEffect } from "react";
-import { jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/app.tsx
-const Routes = ({ workspace, sidebarMode }) => {
+const Routes = ({ workspace, sidebarMode, assistant }) => {
 	const meta = useAdminMeta();
 	const { state, signOut } = useAuth();
 	if (state.kind !== "signed-in") throw new Error("The shell is only rendered for a signed-in user");
@@ -50,6 +51,17 @@ const Routes = ({ workspace, sidebarMode }) => {
 	const { shell } = useProjectUi();
 	const Actions = shell?.actions;
 	const RightPanel = shell?.rightPanel;
+	const [assistantOpen, setAssistantOpen] = useState(false);
+	const assistantUrl = meta.assistant?.url;
+	const assistantButton = assistantUrl && /* @__PURE__ */ jsx(AssistantButton, {
+		open: assistantOpen,
+		onToggle: () => setAssistantOpen(!assistantOpen)
+	});
+	const assistantPanel = assistantUrl && assistantOpen && /* @__PURE__ */ jsx(AssistantPanel, {
+		url: assistantUrl,
+		client: assistant,
+		onClose: () => setAssistantOpen(false)
+	});
 	const breadcrumb = breadcrumbFor({
 		basePath,
 		route,
@@ -77,8 +89,8 @@ const Routes = ({ workspace, sidebarMode }) => {
 			groups: search.groups,
 			onSelect: open
 		} : void 0,
-		actions: Actions && /* @__PURE__ */ jsx(Actions, {}),
-		rightPanel: RightPanel && /* @__PURE__ */ jsx(RightPanel, {}),
+		actions: (Actions || assistantButton) && /* @__PURE__ */ jsxs(Fragment$1, { children: [Actions && /* @__PURE__ */ jsx(Actions, {}), assistantButton] }),
+		rightPanel: (RightPanel || assistantPanel) && /* @__PURE__ */ jsxs(Fragment$1, { children: [RightPanel && /* @__PURE__ */ jsx(RightPanel, {}), assistantPanel] }),
 		children: !route.resource ? /* @__PURE__ */ jsx(Notice, {
 			title: "Choose a resource",
 			children: "Pick one from the sidebar."
@@ -88,7 +100,7 @@ const Routes = ({ workspace, sidebarMode }) => {
 		}, `${route.resource}/${route.key}`) : /* @__PURE__ */ jsx(ListPage, { resource: route.resource }, route.resource)
 	});
 };
-const Authenticated = ({ baseUrl, client, basePath, initialUrl, workspace, sidebarMode, ui }) => {
+const Authenticated = ({ baseUrl, client, basePath, initialUrl, workspace, sidebarMode, ui, assistant }) => {
 	const { session, markSignedOut } = useAuth();
 	return /* @__PURE__ */ jsx(ApiProvider, {
 		baseUrl,
@@ -102,7 +114,8 @@ const Authenticated = ({ baseUrl, client, basePath, initialUrl, workspace, sideb
 				ui,
 				children: /* @__PURE__ */ jsx(Routes, {
 					workspace,
-					sidebarMode
+					sidebarMode,
+					assistant
 				})
 			}) }) })
 		})

package/dist/app/assistant-shell.js

@@ -0,0 +1,39 @@
+import { Button } from "../primitives/button.js";
+import { AssistantDock } from "../assistant-dock/assistant-dock.js";
+import { useAssistant } from "../assistant-dock/use-assistant.js";
+import { useAssistantClient } from "../assistant-dock/use-assistant-client.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Sparkles } from "lucide-react";
+//#region src/app/assistant-shell.tsx
+const AssistantButton = ({ open, onToggle }) => /* @__PURE__ */ jsxs(Button, {
+	size: "sm",
+	variant: open ? "primary" : "secondary",
+	"aria-pressed": open,
+	onClick: onToggle,
+	children: [/* @__PURE__ */ jsx(Sparkles, { className: "size-3.5" }), "Assistant"]
+});
+const ConnectedDock = ({ client, onClose }) => {
+	const { state, offline, error, send, act } = useAssistant(client);
+	return /* @__PURE__ */ jsx(AssistantDock, {
+		state,
+		offline,
+		error,
+		onSend: send,
+		onAction: act,
+		onClose
+	});
+};
+const OwnDock = ({ url, onClose }) => /* @__PURE__ */ jsx(ConnectedDock, {
+	client: useAssistantClient(url),
+	onClose
+});
+/** The dock for the backend `/meta` names, signed in as the user; `client` replaces it in stories and tests. */
+const AssistantPanel = ({ url, client, onClose }) => client ? /* @__PURE__ */ jsx(ConnectedDock, {
+	client,
+	onClose
+}) : /* @__PURE__ */ jsx(OwnDock, {
+	url,
+	onClose
+});
+//#endregion
+export { AssistantButton, AssistantPanel };

package/dist/app-shell/global-search.d.ts

@@ -1 +1 @@
-import "react";
+import { Ref } from "react";

package/dist/assistant-dock/assistant-dock.d.ts

@@ -1,15 +1,15 @@
-import { DockItem } from "./model.js";
-import { DockItemHandlers } from "./dock-item.js";
+import { AssistantState } from "@protobase/schema";
 //#region src/assistant-dock/assistant-dock.d.ts
-export type AssistantDockProps = DockItemHandlers & {
-  /** The chat in order: messages and the cards of its tasks and queries. */
-  items: DockItem[];
-  /** The organization's credits; Approve needs the plan's quote. */
-  balance: number;
-  replying?: boolean;
+export type AssistantDockProps = {
+  state: AssistantState;
+  /** The connection to the backend is down and being retried. */
+  offline?: boolean;
+  /** Why the last message or click was not delivered. */
+  error?: string;
   onSend?: (text: string) => void;
+  onAction?: (partId: string, actionId: string) => void;
   onClose?: () => void;
 };
-/** The assistant beside the app: chat, plans to approve, the queue, progress, results and query tables. */
-export declare const AssistantDock: ({ items, balance, replying, onSend, onClose, onRequestChanges, ...handlers }: AssistantDockProps) => import("react").JSX.Element;
+/** The assistant beside the app: renders a backend's chat, its cards and status line, and sends messages and clicks back. */
+export declare const AssistantDock: ({ state, offline, error, onSend, onAction, onClose }: AssistantDockProps) => import("react").JSX.Element;
 //#endregion

package/dist/assistant-dock/assistant-dock.js

@@ -1,80 +1,45 @@
-import { Button } from "../primitives/button.js";
-import { Composer } from "./composer.js";
-import { formatCredits } from "./model.js";
-import { DockItemView } from "./dock-item.js";
-import { useEffect, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Sparkles, X } from "lucide-react";
+import { ChatMessage } from "../chat/chat-message.js";
+import { ChatThread } from "../chat/chat-thread.js";
+import { Composer } from "../chat/composer.js";
+import { SidePanel } from "../side-panel/side-panel.js";
+import { PartView } from "./part-view.js";
+import { useEffect, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Sparkles } from "lucide-react";
 //#region src/assistant-dock/assistant-dock.tsx
-/** The assistant beside the app: chat, plans to approve, the queue, progress, results and query tables. */
-const AssistantDock = ({ items, balance, replying, onSend, onClose, onRequestChanges, ...handlers }) => {
-	const list = useRef(null);
+const defaultPlaceholder = "Ask a question...";
+/** The assistant beside the app: renders a backend's chat, its cards and status line, and sends messages and clicks back. */
+const AssistantDock = ({ state, offline, error, onSend, onAction, onClose }) => {
 	const input = useRef(null);
-	const [revising, setRevising] = useState(false);
 	useEffect(() => {
-		const element = list.current;
-		if (element) element.scrollTop = element.scrollHeight;
-	}, [items.length]);
-	const requestChanges = (taskId) => {
-		setRevising(true);
-		input.current?.focus();
-		onRequestChanges?.(taskId);
-	};
-	const send = (text) => {
-		setRevising(false);
-		onSend?.(text);
-	};
-	return /* @__PURE__ */ jsxs("aside", {
-		"aria-label": "Assistant",
-		className: "flex h-full w-[380px] max-w-full shrink-0 flex-col border-l border-border bg-surface",
-		children: [
-			/* @__PURE__ */ jsxs("header", {
-				className: "flex h-12 shrink-0 items-center gap-2 border-b border-border bg-background px-4",
-				children: [
-					/* @__PURE__ */ jsx(Sparkles, { className: "size-4 text-primary" }),
-					/* @__PURE__ */ jsx("h2", {
-						className: "flex-1 text-[13px] font-semibold",
-						children: "Assistant"
-					}),
-					/* @__PURE__ */ jsx("span", {
-						className: "text-xs font-medium text-muted-foreground",
-						children: formatCredits(balance)
-					}),
-					onClose && /* @__PURE__ */ jsx(Button, {
-						variant: "ghost",
-						size: "sm",
-						className: "w-7 px-0",
-						"aria-label": "Close",
-						onClick: onClose,
-						children: /* @__PURE__ */ jsx(X, { className: "size-4" })
-					})
-				]
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				ref: list,
-				className: "flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4",
-				children: [items.length === 0 && /* @__PURE__ */ jsx("p", {
-					className: "m-auto max-w-60 text-center text-[13px] text-muted-foreground",
-					children: "Ask for a change to this app, or a question about its data."
-				}), items.map((item) => /* @__PURE__ */ jsx(DockItemView, {
-					item,
-					balance,
-					handlers: {
-						...handlers,
-						onRequestChanges: requestChanges
-					}
-				}, item.id))]
-			}),
-			/* @__PURE__ */ jsx("footer", {
-				className: "shrink-0 border-t border-border bg-background p-3",
-				children: /* @__PURE__ */ jsx(Composer, {
-					inputRef: input,
-					onSend: send,
-					replying,
-					placeholder: revising ? "What should change in the plan?" : "Ask for a change or about your data..."
-				})
-			})
-		]
+		if (state.placeholder) input.current?.focus();
+	}, [state.placeholder]);
+	return /* @__PURE__ */ jsx(SidePanel, {
+		title: "Assistant",
+		icon: /* @__PURE__ */ jsx(Sparkles, { className: "size-4 text-primary" }),
+		status: offline ? "Reconnecting..." : state.status,
+		onClose,
+		footer: /* @__PURE__ */ jsxs(Fragment$1, { children: [error && /* @__PURE__ */ jsx("p", {
+			role: "alert",
+			className: "text-xs text-danger-text",
+			children: error
+		}), /* @__PURE__ */ jsx(Composer, {
+			inputRef: input,
+			onSend,
+			busy: state.replying,
+			placeholder: state.placeholder ?? defaultPlaceholder
+		})] }),
+		children: /* @__PURE__ */ jsx(ChatThread, {
+			length: state.messages.reduce((sum, message) => sum + message.parts.length, 0),
+			empty: "Ask a question about this app or its data.",
+			children: state.messages.map((message) => /* @__PURE__ */ jsx(ChatMessage, {
+				from: message.from,
+				children: message.parts.map((part) => /* @__PURE__ */ jsx(PartView, {
+					part,
+					onAction
+				}, part.id))
+			}, message.id))
+		})
 	});
 };
 //#endregion

package/dist/assistant-dock/index.d.ts

@@ -0,0 +1,5 @@
+import { AssistantDock, AssistantDockProps } from "./assistant-dock.js";
+import { PartView } from "./part-view.js";
+import { useAssistant } from "./use-assistant.js";
+import { useAssistantClient } from "./use-assistant-client.js";
+export { AssistantDock, type AssistantDockProps, PartView, useAssistant, useAssistantClient };

package/dist/assistant-dock/part-view.d.ts

@@ -0,0 +1,8 @@
+import { AssistantPart } from "@protobase/schema";
+//#region src/assistant-dock/part-view.d.ts
+/** One part of a message, drawn with the primitive it names. */
+export declare const PartView: ({ part, onAction }: {
+  part: AssistantPart;
+  onAction?: (partId: string, actionId: string) => void;
+}) => import("react").JSX.Element;
+//#endregion

package/dist/assistant-dock/part-view.js

@@ -0,0 +1,47 @@
+import { ActionCard } from "../action-card/action-card.js";
+import { FieldList } from "../action-card/field-list.js";
+import { CompactTable } from "../compact-table/compact-table.js";
+import { DiffView } from "../diff-view/diff-view.js";
+import { StepList } from "../step-list/step-list.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/assistant-dock/part-view.tsx
+/** One part of a message, drawn with the primitive it names. */
+const PartView = ({ part, onAction }) => {
+	switch (part.type) {
+		case "text": return /* @__PURE__ */ jsx("p", { children: part.text });
+		case "table": return /* @__PURE__ */ jsx(CompactTable, {
+			columns: part.columns,
+			rows: part.rows,
+			caption: part.caption,
+			truncated: part.truncated
+		});
+		case "card": return /* @__PURE__ */ jsxs(ActionCard, {
+			title: part.title,
+			tone: part.tone,
+			badge: part.badge,
+			note: part.note,
+			actions: part.actions,
+			onAction: (actionId) => onAction?.(part.id, actionId),
+			children: [
+				part.body && /* @__PURE__ */ jsx("p", {
+					className: "text-[13px]",
+					children: part.body
+				}),
+				part.code && /* @__PURE__ */ jsx("pre", {
+					className: "overflow-x-auto rounded-md bg-surface px-2.5 py-2 font-mono text-[11px] whitespace-pre-wrap break-words",
+					children: part.code
+				}),
+				part.fields && part.fields.length > 0 && /* @__PURE__ */ jsx(FieldList, { fields: part.fields }),
+				part.steps && part.steps.length > 0 && /* @__PURE__ */ jsx(StepList, { steps: part.steps }),
+				part.diffs?.map((diff, index) => /* @__PURE__ */ jsx(DiffView, {
+					source: diff.source,
+					start: diff.start,
+					path: diff.path,
+					className: "rounded-md border border-border"
+				}, `${index}-${diff.path}`))
+			]
+		});
+	}
+};
+//#endregion
+export { PartView };

package/dist/assistant-dock/use-assistant-client.d.ts

@@ -0,0 +1,4 @@
+//#region src/assistant-dock/use-assistant-client.d.ts
+/** A client of the backend at `url`, authenticated as the signed-in user; `undefined` until their token is there. */
+export declare const useAssistantClient: (url: string) => import("@protobase/client").AssistantClient | undefined;
+//#endregion

package/dist/assistant-dock/use-assistant-client.js

@@ -0,0 +1,17 @@
+import { useApiToken } from "../auth/use-api-token.js";
+import { useMemo, useRef } from "react";
+import { createAssistantClient } from "@protobase/client";
+//#region src/assistant-dock/use-assistant-client.ts
+/** A client of the backend at `url`, authenticated as the signed-in user; `undefined` until their token is there. */
+const useAssistantClient = (url) => {
+	const token = useApiToken();
+	const latest = useRef(token);
+	latest.current = token;
+	const ready = token !== void 0;
+	return useMemo(() => ready ? createAssistantClient({
+		url,
+		token: () => latest.current
+	}) : void 0, [url, ready]);
+};
+//#endregion
+export { useAssistantClient };

package/dist/assistant-dock/use-assistant.d.ts

@@ -0,0 +1,11 @@
+import { AssistantClient } from "@protobase/client";
+//#region src/assistant-dock/use-assistant.d.ts
+/** Follows an assistant backend's event stream into state, with its two requests; `undefined` client means not yet. */
+export declare const useAssistant: (client: AssistantClient | undefined) => {
+  state: import("@protobase/schema").AssistantState;
+  offline: boolean;
+  error: string | undefined;
+  send: (text: string) => void | undefined;
+  act: (partId: string, actionId: string) => void | undefined;
+};
+//#endregion

package/dist/assistant-dock/use-assistant.js

@@ -0,0 +1,27 @@
+import { useEffect, useState } from "react";
+import { applyAssistantEvent, emptyAssistantState } from "@protobase/schema";
+//#region src/assistant-dock/use-assistant.ts
+const messageOf = (error) => error instanceof Error ? error.message : "The assistant did not answer";
+/** Follows an assistant backend's event stream into state, with its two requests; `undefined` client means not yet. */
+const useAssistant = (client) => {
+	const [state, setState] = useState(emptyAssistantState);
+	const [offline, setOffline] = useState(false);
+	const [error, setError] = useState();
+	useEffect(() => {
+		if (!client) return;
+		return client.connect((event) => setState((current) => applyAssistantEvent(current, event)), (connection) => setOffline(connection.state === "retrying"));
+	}, [client]);
+	const deliver = (request) => {
+		setError(void 0);
+		request.catch((reason) => setError(messageOf(reason)));
+	};
+	return {
+		state,
+		offline,
+		error,
+		send: (text) => client && deliver(client.send(text)),
+		act: (partId, actionId) => client && deliver(client.act(partId, actionId))
+	};
+};
+//#endregion
+export { useAssistant };

package/dist/auth/use-api-token.d.ts

@@ -0,0 +1,7 @@
+//#region src/auth/use-api-token.d.ts
+/**
+ * The signed-in user's API token (a JWT from `/api/auth/token`), for calling another service as them. It changes
+ * before it expires, re-rendering the component; `undefined` while it loads and when nobody is signed in.
+ */
+export declare const useApiToken: () => string | undefined;
+//#endregion

package/dist/auth/use-api-token.js

@@ -0,0 +1,37 @@
+import { useAuth } from "./auth-provider.js";
+import { useEffect, useState } from "react";
+import { tokenExpiry } from "@protobase/client";
+//#region src/auth/use-api-token.ts
+/** Asks for the token again this long before it expires; the session hands out a fresh one by then. */
+const refreshLeadMs = 3e4;
+/** How long until the hook reads `token` again: shortly before it expires, and never sooner than a second. */
+const tokenRefreshDelay = (token, now = Date.now()) => Math.max(1e3, tokenExpiry(token) - now - refreshLeadMs);
+/**
+* The signed-in user's API token (a JWT from `/api/auth/token`), for calling another service as them. It changes
+* before it expires, re-rendering the component; `undefined` while it loads and when nobody is signed in.
+*/
+const useApiToken = () => {
+	const { state, session } = useAuth();
+	const signedIn = state.kind === "signed-in";
+	const [token, setToken] = useState();
+	useEffect(() => {
+		if (!signedIn) return;
+		let active = true;
+		let timer;
+		const read = async (previous) => {
+			const value = await session.token();
+			const fresh = value !== void 0 && value === previous ? await session.token({ refresh: true }) : value;
+			if (!active) return;
+			setToken(fresh);
+			if (fresh) timer = setTimeout(() => void read(fresh), tokenRefreshDelay(fresh));
+		};
+		read();
+		return () => {
+			active = false;
+			clearTimeout(timer);
+		};
+	}, [session, signedIn]);
+	return signedIn ? token : void 0;
+};
+//#endregion
+export { tokenRefreshDelay, useApiToken };

package/dist/chat/chat-message.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from "react";
+//#region src/chat/chat-message.d.ts
+/** One message of a chat: the user's as a bubble on the right, the other side's as plain content, cards included. */
+export declare const ChatMessage: ({ from, children }: {
+  from: "user" | "assistant";
+  children: ReactNode;
+}) => import("react").JSX.Element;
+//#endregion

package/dist/chat/chat-message.js

@@ -0,0 +1,11 @@
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/chat/chat-message.tsx
+/** One message of a chat: the user's as a bubble on the right, the other side's as plain content, cards included. */
+const ChatMessage = ({ from, children }) => /* @__PURE__ */ jsx("div", {
+	"data-from": from,
+	className: cn("flex min-w-0 flex-col gap-2 whitespace-pre-wrap break-words text-[13px]", from === "user" ? "ml-8 self-end rounded-lg rounded-br-sm bg-primary px-3 py-2 text-primary-foreground shadow-sm" : "mr-4 text-foreground"),
+	children
+});
+//#endregion
+export { ChatMessage };

package/dist/chat/chat-thread.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+//#region src/chat/chat-thread.d.ts
+export type ChatThreadProps = {
+  children: ReactNode;
+  /** Shown centred while the chat is empty. */
+  empty?: ReactNode;
+  /** Changes whenever the chat grows, which scrolls it to the end. */
+  length: number;
+};
+/** The scrolling list of a chat's messages, kept at the newest one as messages arrive. */
+export declare const ChatThread: ({ children, empty, length }: ChatThreadProps) => import("react").JSX.Element;
+//#endregion