@protobase/ui 0.0.0-stage → 0.1.1

package/dist/app-shell/sidebar-group.js

@@ -0,0 +1,94 @@
+import { cn } from "../lib/cn.js";
+import { navOpenStorageKey, readNavOpen, writeNavOpen } from "./nav-open-storage.js";
+import { SidebarItem } from "./sidebar-item.js";
+import { StatusDot } from "./status-dot.js";
+import { useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRight } from "lucide-react";
+//#region src/app-shell/sidebar-group.tsx
+const row = {
+	"text-large": "h-8 gap-2.5 px-2.5 text-[13px]",
+	"text-small": "h-7 gap-2 px-2 text-xs"
+};
+/** Lines the records up under the entry's icon. */
+const indent = {
+	"text-large": "ml-[20px]",
+	"text-small": "ml-[17px]"
+};
+/**
+* A sidebar entry with a few of its records under it. The label opens the list, the chevron shows or hides the
+* records (remembered in this browser), and "View all" at the end opens the list too.
+*/
+const SidebarGroup = ({ item, recent, mode, active, onNavigate }) => {
+	const storageKey = navOpenStorageKey(item.id);
+	const [open, setOpen] = useState(() => readNavOpen(localStorage, storageKey));
+	const listId = useId();
+	const href = item.href ?? `#${item.id}`;
+	const toggle = () => {
+		writeNavOpen(localStorage, storageKey, !open);
+		setOpen(!open);
+	};
+	const link = (to) => ({
+		href: to,
+		onClick: onNavigate && ((event) => {
+			event.preventDefault();
+			onNavigate(to);
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-0.5",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "relative",
+			children: [/* @__PURE__ */ jsx(SidebarItem, {
+				item,
+				mode,
+				active,
+				onNavigate,
+				className: "pr-8"
+			}), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-expanded": open,
+				"aria-controls": listId,
+				"aria-label": `Recent ${item.label.toLowerCase()}`,
+				onClick: toggle,
+				className: "absolute right-1 top-1/2 inline-flex size-6 -translate-y-1/2 items-center justify-center rounded text-faint-foreground hover:bg-muted hover:text-foreground",
+				children: /* @__PURE__ */ jsx(ChevronRight, { className: cn("size-3.5 transition-transform", open && "rotate-90") })
+			})]
+		}), open && /* @__PURE__ */ jsxs("ul", {
+			id: listId,
+			"aria-label": `Recent ${item.label.toLowerCase()}`,
+			className: cn("flex flex-col gap-0.5 border-l pl-1.5", indent[mode]),
+			children: [
+				recent.state === "loading" && /* @__PURE__ */ jsx("li", {
+					className: cn("flex items-center text-faint-foreground", row[mode]),
+					children: "Loading..."
+				}),
+				recent.state === "error" && /* @__PURE__ */ jsx("li", {
+					className: cn("flex items-center text-faint-foreground", row[mode]),
+					children: "Could not load"
+				}),
+				recent.state === "ready" && recent.records.map((record) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("a", {
+					...link(record.href),
+					"aria-label": `${record.label}, ${record.status}`,
+					title: `${record.label} (${record.status})`,
+					"aria-current": record.active ? "page" : void 0,
+					className: cn("flex min-w-0 items-center rounded-md font-medium transition-colors", row[mode], record.active ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground"),
+					children: [/* @__PURE__ */ jsx(StatusDot, {
+						tone: record.tone,
+						pulse: record.pulse
+					}), /* @__PURE__ */ jsx("span", {
+						className: "truncate",
+						children: record.label
+					})]
+				}) }, record.id)),
+				/* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", {
+					...link(href),
+					className: cn("flex items-center rounded-md text-faint-foreground transition-colors hover:bg-muted hover:text-foreground", row[mode]),
+					children: "View all"
+				}) })
+			]
+		})]
+	});
+};
+//#endregion
+export { SidebarGroup };

package/dist/app-shell/sidebar-item.js

@@ -0,0 +1,46 @@
+import { cn } from "../lib/cn.js";
+import { Tooltip } from "../primitives/tooltip.js";
+import { isTextMode, showsLabelInline } from "./sidebar-mode.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app-shell/sidebar-item.tsx
+const layout = {
+	"text-large": "h-9 gap-3 px-3 text-sm",
+	"text-small": "h-7 gap-2.5 px-2.5 text-xs",
+	icon: "size-9 justify-center",
+	"icon-label": "w-full flex-col gap-0.5 py-1.5 text-[10px]",
+	"icon-tooltip": "size-9 justify-center",
+	"icon-expand": "h-8 gap-3 px-3 text-[13px]"
+};
+const SidebarItem = ({ item, mode, active, onNavigate, className }) => {
+	const Icon = item.icon;
+	const button = /* @__PURE__ */ jsxs("a", {
+		onClick: onNavigate && ((event) => {
+			event.preventDefault();
+			onNavigate(item.href ?? `#${item.id}`);
+		}),
+		href: item.href ?? `#${item.id}`,
+		"aria-label": item.label,
+		"aria-current": active ? "page" : void 0,
+		className: cn("flex shrink-0 items-center rounded-md font-medium transition-colors", layout[mode], active ? "bg-primary-soft text-primary-text" : "text-muted-foreground hover:bg-muted hover:text-foreground", className),
+		children: [
+			/* @__PURE__ */ jsx(Icon, {
+				className: cn("shrink-0", mode === "text-small" ? "size-4" : "size-[18px]"),
+				strokeWidth: active ? 2.2 : 1.9
+			}),
+			(showsLabelInline(mode) || mode === "icon-label") && /* @__PURE__ */ jsx("span", {
+				className: "whitespace-nowrap",
+				children: item.label
+			}),
+			isTextMode(mode) && item.count && /* @__PURE__ */ jsx("span", {
+				className: "ml-auto rounded bg-muted px-1.5 text-[11px] tabular-nums text-muted-foreground",
+				children: item.count
+			})
+		]
+	});
+	return mode === "icon-tooltip" ? /* @__PURE__ */ jsx(Tooltip, {
+		label: item.label,
+		children: button
+	}) : button;
+};
+//#endregion
+export { SidebarItem };

package/dist/app-shell/sidebar-mode.d.ts

@@ -0,0 +1,4 @@
+//#region src/app-shell/sidebar-mode.d.ts
+export declare const sidebarModes: readonly ["text-large", "text-small", "icon", "icon-label", "icon-tooltip", "icon-expand"];
+export type SidebarMode = (typeof sidebarModes)[number];
+//#endregion

package/dist/app-shell/sidebar-mode.js

@@ -0,0 +1,13 @@
+//#region src/app-shell/sidebar-mode.ts
+const showsLabelInline = (mode) => mode === "text-large" || mode === "text-small" || mode === "icon-expand";
+const isTextMode = (mode) => mode === "text-large" || mode === "text-small";
+const sidebarWidth = {
+	"text-large": "w-60",
+	"text-small": "w-52",
+	icon: "w-14",
+	"icon-label": "w-[76px]",
+	"icon-tooltip": "w-14",
+	"icon-expand": "w-14"
+};
+//#endregion
+export { isTextMode, showsLabelInline, sidebarWidth };

package/dist/app-shell/sidebar.d.ts

@@ -0,0 +1,2 @@
+import "./nav.js";
+import "./profile-menu.js";

package/dist/app-shell/sidebar.js

@@ -0,0 +1,64 @@
+import { cn } from "../lib/cn.js";
+import { Logo } from "./logo.js";
+import { navGroups } from "./nav.js";
+import { ProfileMenu } from "./profile-menu.js";
+import { isTextMode, sidebarWidth } from "./sidebar-mode.js";
+import { SidebarItem } from "./sidebar-item.js";
+import { SidebarGroup } from "./sidebar-group.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app-shell/sidebar.tsx
+const Sidebar = ({ mode, activeItem, user, workspace, forceExpanded, profileMenuOpen, groups = navGroups, userMenu, onNavigate, onSignOut }) => {
+	const expanding = mode === "icon-expand";
+	const expanded = expanding && forceExpanded;
+	const inline = isTextMode(mode) || expanding;
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": "Resources",
+		className: cn("relative z-30 shrink-0", sidebarWidth[mode]),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cn("group/side absolute inset-y-0 left-0 flex flex-col overflow-hidden border-r bg-sidebar", expanding ? "w-14 transition-[width,box-shadow] duration-150 hover:w-60 hover:shadow-pop focus-within:w-60 focus-within:shadow-pop" : "w-full", expanded && "w-60 shadow-pop"),
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: cn("flex h-12 shrink-0 items-center px-3.5", mode === "icon-label" && "justify-center px-0"),
+					children: /* @__PURE__ */ jsx(Logo, {
+						showName: isTextMode(mode) || expanding,
+						workspace
+					})
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: cn("flex-1 overflow-y-auto overflow-x-hidden pb-2", mode === "icon-label" ? "px-2" : "px-2"),
+					children: groups.map((group, index) => /* @__PURE__ */ jsxs("div", {
+						className: cn("flex flex-col gap-0.5", index > 0 && "mt-3"),
+						children: [inline ? /* @__PURE__ */ jsx("div", {
+							className: cn("px-3 pb-1 pt-1 text-[11px] font-medium uppercase tracking-wide text-faint-foreground", expanding && "h-4 whitespace-nowrap py-0 opacity-0 transition-opacity group-hover/side:opacity-100 group-focus-within/side:opacity-100", expanded && "opacity-100"),
+							children: group.label
+						}) : index > 0 && /* @__PURE__ */ jsx("div", { className: "mx-auto mb-1 h-px w-6 bg-border" }), group.items.map((item) => item.recent && isTextMode(mode) ? /* @__PURE__ */ jsx(SidebarGroup, {
+							item,
+							recent: item.recent,
+							mode,
+							active: item.id === activeItem,
+							onNavigate
+						}, item.id) : /* @__PURE__ */ jsx(SidebarItem, {
+							item,
+							mode,
+							active: item.id === activeItem,
+							onNavigate
+						}, item.id))]
+					}, group.label))
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: cn("shrink-0 border-t p-2", mode !== "text-large" && mode !== "text-small" && !expanding && "flex justify-center"),
+					children: /* @__PURE__ */ jsx(ProfileMenu, {
+						user,
+						compact: !inline,
+						open: profileMenuOpen,
+						items: userMenu,
+						onNavigate,
+						onSignOut
+					})
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { Sidebar };

package/dist/app-shell/status-dot.d.ts

@@ -0,0 +1 @@
+import "@protobase/schema";

package/dist/app-shell/status-dot.js

@@ -0,0 +1,20 @@
+import { cn } from "../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app-shell/status-dot.tsx
+const colour = {
+	neutral: "bg-faint-foreground",
+	info: "bg-primary",
+	success: "bg-success",
+	warning: "bg-warning",
+	danger: "bg-danger"
+};
+/** A record's status as a coloured dot; `pulse` animates a ring around it for states in progress (still under reduced motion). */
+const StatusDot = ({ tone, pulse = false, className }) => /* @__PURE__ */ jsxs("span", {
+	"aria-hidden": true,
+	className: cn("relative flex size-2 shrink-0", className),
+	"data-tone": tone,
+	"data-pulse": pulse || void 0,
+	children: [pulse && /* @__PURE__ */ jsx("span", { className: cn("absolute inset-0 animate-ping rounded-full opacity-60 motion-reduce:animate-none", colour[tone]) }), /* @__PURE__ */ jsx("span", { className: cn("relative size-2 rounded-full", colour[tone]) })]
+});
+//#endregion
+export { StatusDot };

package/dist/app-shell/top-bar.js

@@ -0,0 +1,82 @@
+import { cn } from "../lib/cn.js";
+import { Breadcrumb } from "./breadcrumb.js";
+import { GlobalSearch } from "./global-search.js";
+import { useEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Menu, Search, X } from "lucide-react";
+//#region src/app-shell/top-bar.tsx
+const iconButton = "inline-flex size-11 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-muted md:hidden";
+const TopBar = ({ breadcrumb, onNavigate, actions, onMenu, menuOpen, menuControls, search }) => {
+	const [searchOpen, setSearchOpen] = useState(false);
+	const desktopSearch = useRef(null);
+	useEffect(() => {
+		if (!search) return;
+		const onKey = (event) => {
+			if (event.key.toLowerCase() !== "k" || !(event.metaKey || event.ctrlKey)) return;
+			event.preventDefault();
+			const input = desktopSearch.current;
+			if (input && input.offsetParent !== null) input.focus();
+			else setSearchOpen(true);
+		};
+		window.addEventListener("keydown", onKey);
+		return () => window.removeEventListener("keydown", onKey);
+	}, [search]);
+	return /* @__PURE__ */ jsxs("header", {
+		className: "relative flex h-12 shrink-0 items-center gap-1 border-b bg-background px-2 md:gap-4 md:px-5",
+		children: [
+			onMenu && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": "Open navigation",
+				"aria-expanded": Boolean(menuOpen),
+				"aria-controls": menuControls,
+				onClick: onMenu,
+				className: cn(iconButton, "-ml-0.5"),
+				children: /* @__PURE__ */ jsx(Menu, { className: "size-5" })
+			}),
+			/* @__PURE__ */ jsx(Breadcrumb, {
+				parts: breadcrumb,
+				onNavigate
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "ml-auto flex items-center gap-1 md:gap-3",
+				children: [search && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+					className: "hidden md:block",
+					children: /* @__PURE__ */ jsx(GlobalSearch, {
+						ref: desktopSearch,
+						search
+					})
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": "Search",
+					"aria-expanded": searchOpen,
+					onClick: () => setSearchOpen(true),
+					className: iconButton,
+					children: /* @__PURE__ */ jsx(Search, { className: "size-5" })
+				})] }), actions]
+			}),
+			search && searchOpen && /* @__PURE__ */ jsxs("div", {
+				className: "absolute inset-0 z-20 flex items-center gap-1 bg-background px-3 md:hidden",
+				children: [/* @__PURE__ */ jsx(GlobalSearch, {
+					className: "min-w-0 flex-1",
+					autoFocus: true,
+					showShortcut: false,
+					search: {
+						...search,
+						onSelect: (href) => {
+							search.onSelect(href);
+							setSearchOpen(false);
+						}
+					}
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": "Close search",
+					onClick: () => setSearchOpen(false),
+					className: iconButton,
+					children: /* @__PURE__ */ jsx(X, { className: "size-5" })
+				})]
+			})
+		]
+	});
+};
+//#endregion
+export { TopBar };

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

@@ -0,0 +1,15 @@
+import { DockItem } from "./model.js";
+import { DockItemHandlers } from "./dock-item.js";
+//#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;
+  onSend?: (text: 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;
+//#endregion

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

@@ -0,0 +1,81 @@
+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";
+//#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 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..."
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { AssistantDock };

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

@@ -0,0 +1,9 @@
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/assistant-dock/chat-message.tsx
+const ChatMessage = ({ from, text }) => /* @__PURE__ */ jsx("div", {
+	className: cn("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: text
+});
+//#endregion
+export { ChatMessage };

package/dist/assistant-dock/composer.js

@@ -0,0 +1,39 @@
+import { Input } from "../primitives/input.js";
+import { Button } from "../primitives/button.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { SendHorizontal } from "lucide-react";
+//#region src/assistant-dock/composer.tsx
+const Composer = ({ onSend, replying, placeholder, inputRef }) => {
+	const [text, setText] = useState("");
+	const message = text.trim();
+	const send = () => {
+		if (!message || replying) return;
+		onSend?.(message);
+		setText("");
+	};
+	return /* @__PURE__ */ jsxs("form", {
+		className: "flex gap-2",
+		onSubmit: (event) => {
+			event.preventDefault();
+			send();
+		},
+		children: [/* @__PURE__ */ jsx(Input, {
+			ref: inputRef,
+			"aria-label": "Message",
+			placeholder,
+			value: text,
+			onChange: (event) => setText(event.target.value),
+			wrapperClassName: "flex-1"
+		}), /* @__PURE__ */ jsx(Button, {
+			type: "submit",
+			variant: "primary",
+			className: "w-8 px-0",
+			"aria-label": "Send",
+			disabled: !message || replying,
+			children: /* @__PURE__ */ jsx(SendHorizontal, { className: "size-4" })
+		})]
+	});
+};
+//#endregion
+export { Composer };

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

@@ -0,0 +1,4 @@
+import { PlanCardProps } from "./plan-card.js";
+//#region src/assistant-dock/dock-item.d.ts
+export type DockItemHandlers = Pick<PlanCardProps, 'onApprove' | 'onRequestChanges' | 'onCancel' | 'onUpdatePlan'>;
+//#endregion

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

@@ -0,0 +1,37 @@
+import { ChatMessage } from "./chat-message.js";
+import { PlanCard } from "./plan-card.js";
+import { ProgressCard } from "./progress-card.js";
+import { QueryCard } from "./query-card.js";
+import { QueueCard } from "./queue-card.js";
+import { ResultCard } from "./result-card.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/assistant-dock/dock-item.tsx
+const DockItemView = ({ item, balance, handlers }) => {
+	switch (item.kind) {
+		case "user":
+		case "assistant": return /* @__PURE__ */ jsx(ChatMessage, {
+			from: item.kind,
+			text: item.text
+		});
+		case "queue": return /* @__PURE__ */ jsx(QueueCard, {
+			taskId: item.taskId,
+			request: item.request,
+			ahead: item.ahead,
+			waitingOnPlan: item.waitingOnPlan,
+			onCancel: handlers.onCancel
+		});
+		case "progress": return /* @__PURE__ */ jsx(ProgressCard, {
+			phase: item.phase,
+			steps: item.steps
+		});
+		case "plan": return /* @__PURE__ */ jsx(PlanCard, {
+			plan: item.plan,
+			balance,
+			...handlers
+		});
+		case "result": return /* @__PURE__ */ jsx(ResultCard, { result: item.result });
+		case "query": return /* @__PURE__ */ jsx(QueryCard, { query: item.query });
+	}
+};
+//#endregion
+export { DockItemView };

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

@@ -0,0 +1,84 @@
+import { Step } from "../assistant-panel/content.js";
+//#region src/assistant-dock/model.d.ts
+export type PlanSize = 'S' | 'M' | 'L';
+/** A plan as the planner returned it and central priced it. */
+export type Plan = {
+  taskId: string;
+  /** 1 for the first plan; "Ask for changes" and "Update plan" make the next one. */
+  revision: number;
+  summary: string;
+  steps: Array<{
+    title: string;
+    files?: string[];
+  }>;
+  migrations: Array<{
+    description: string;
+    destructive: boolean;
+  }>;
+  risks: string[];
+  size: PlanSize;
+  /** The quote: what Approve holds. */
+  credits: number;
+  /** The branch moved on GitHub since the plan was made. */
+  outdated: boolean;
+  /** Tasks behind this one in the app's queue, waiting until it is answered. */
+  waiting: number;
+  /** `dropped`: the platform dropped it and refunded the deposit (repository replaced, app archived). */
+  status: 'awaiting' | 'approved' | 'canceled' | 'superseded' | 'dropped';
+};
+export type JobResult = {
+  taskId: string;
+  outcome: 'live' | 'failed' | 'capped';
+  summary: string;
+  commit?: {
+    sha: string;
+    url?: string;
+  };
+  /** The migrations the job applied; they stay live when it fails. */
+  dbChanges: string[];
+  /** A finished change GitHub refused, kept on `protobase/task-<n>`. */
+  keptOnBranch?: string;
+  /** What was charged: the quote when live, 0 otherwise. */
+  credits: number;
+};
+export type QueryResult = {
+  sql: string;
+  columns: string[];
+  rows: unknown[][];
+  truncated: boolean;
+};
+export type DockItem = {
+  kind: 'user';
+  id: string;
+  text: string;
+} | {
+  kind: 'assistant';
+  id: string;
+  text: string;
+} | {
+  kind: 'queue';
+  id: string;
+  taskId: string;
+  request: string;
+  ahead: number;
+  waitingOnPlan: boolean;
+} | {
+  kind: 'progress';
+  id: string;
+  taskId: string;
+  phase: 'planning' | 'running';
+  steps: Step[];
+} | {
+  kind: 'plan';
+  id: string;
+  plan: Plan;
+} | {
+  kind: 'result';
+  id: string;
+  result: JobResult;
+} | {
+  kind: 'query';
+  id: string;
+  query: QueryResult;
+};
+//#endregion

package/dist/assistant-dock/model.js

@@ -0,0 +1,26 @@
+//#region src/assistant-dock/model.ts
+const formatCredits = (credits) => `${credits} ${credits === 1 ? "credit" : "credits"}`;
+/** Approve is offered only on a plan awaiting an answer, and only when the balance covers the quote. */
+const approval = (plan, balance) => {
+	if (plan.status !== "awaiting") return { enabled: false };
+	if (balance < plan.credits) return {
+		enabled: false,
+		reason: `Needs ${formatCredits(plan.credits)}; the balance is ${formatCredits(balance)}.`
+	};
+	return { enabled: true };
+};
+const approveLabel = (plan) => `${plan.outdated ? "Approve anyway" : "Approve"} · ${formatCredits(plan.credits)}`;
+const queueText = (ahead, waitingOnPlan) => {
+	if (waitingOnPlan) return "Waiting for the plan above to be approved or canceled.";
+	if (ahead === 0) return "Next in line.";
+	return `Waiting, ${ahead} ${ahead === 1 ? "task" : "tasks"} ahead.`;
+};
+const waitingText = (waiting) => waiting === 0 ? void 0 : `${waiting} ${waiting === 1 ? "task waits" : "tasks wait"} on this plan.`;
+/** A query cell as text: `null` stays visible, objects and arrays as JSON. */
+const formatCell = (value) => {
+	if (value === null || value === void 0) return "null";
+	if (typeof value === "object") return JSON.stringify(value);
+	return String(value);
+};
+//#endregion
+export { approval, approveLabel, formatCell, formatCredits, queueText, waitingText };

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

@@ -0,0 +1,13 @@
+import { Plan } from "./model.js";
+//#region src/assistant-dock/plan-card.d.ts
+export type PlanCardProps = {
+  plan: Plan;
+  balance: number;
+  onApprove?: (taskId: string) => void;
+  /** Asks for the next revision; the dock moves to the chat box for what should change. */
+  onRequestChanges?: (taskId: string) => void;
+  onCancel?: (taskId: string) => void;
+  /** A free re-plan from the moved branch. */
+  onUpdatePlan?: (taskId: string) => void;
+};
+//#endregion