@protobase/ui 0.1.0 → 0.1.2

package/dist/app/app.js

@@ -14,7 +14,7 @@ import { CreatePage } from "./create/create-page.js";
 import { ListPage } from "./list-page.js";
 import { userMenuFromMeta } from "./user-menu-from-meta.js";
 import { navFromMeta } from "./nav-from-meta.js";
-import { ProjectUiProvider } from "./pages/project-ui.js";
+import { ProjectUiProvider, useProjectUi } from "./pages/project-ui.js";
 import { ComposedPage } from "./pages/composed-page.js";
 import { RecordPage } from "./record-page.js";
 import { useGlobalSearch } from "./search/use-global-search.js";
@@ -47,6 +47,9 @@ const Routes = ({ workspace, sidebarMode }) => {
 	const model = route.resource ? meta.resources[route.resource] : void 0;
 	const record = useRecord(route.resource ?? "", route.key ?? "", Boolean(model && route.key && route.key !== "new"));
 	const title = model && record.data ? recordTitle(model, view, record.data.record, route.key ?? "") : route.key;
+	const { shell } = useProjectUi();
+	const Actions = shell?.actions;
+	const RightPanel = shell?.rightPanel;
 	const breadcrumb = breadcrumbFor({
 		basePath,
 		route,
@@ -74,6 +77,8 @@ const Routes = ({ workspace, sidebarMode }) => {
 			groups: search.groups,
 			onSelect: open
 		} : void 0,
+		actions: Actions && /* @__PURE__ */ jsx(Actions, {}),
+		rightPanel: RightPanel && /* @__PURE__ */ jsx(RightPanel, {}),
 		children: !route.resource ? /* @__PURE__ */ jsx(Notice, {
 			title: "Choose a resource",
 			children: "Pick one from the sidebar."

package/dist/app/pages/project-ui.d.ts

@@ -14,11 +14,16 @@ export type ActionContext = {
 export type ActionHandler = (context: ActionContext) => void | Promise<void>;
 /**
  * The project's own React code for composed pages: custom components by the name their layout declares
- * (`component('UsageChart')`), and handlers for named actions that have no built-in behaviour.
+ * (`component('UsageChart')`), handlers for named actions that have no built-in behaviour, and the shell's slots.
  */
 export type ProjectUi = {
   components?: Record<string, ComponentType<any>>;
   actions?: Record<string, ActionHandler>;
+  /** Rendered in the shell on every page: `actions` at the end of the top bar, `rightPanel` beside the page. */
+  shell?: {
+    actions?: ComponentType;
+    rightPanel?: ComponentType;
+  };
 };
 /** Typed identity, for `export default defineUi({ components, actions })` in `protobase.ui.tsx`. */
 export declare const defineUi: (ui: ProjectUi) => ProjectUi;

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

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

@@ -0,0 +1,133 @@
+import { Badge } from "../primitives/badge.js";
+import { Button } from "../primitives/button.js";
+import { approval, approveLabel, formatCredits, waitingText } from "./model.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AlertTriangle, GitBranch, ListChecks } from "lucide-react";
+//#region src/assistant-dock/plan-card.tsx
+const statusNote = {
+	awaiting: void 0,
+	approved: "Approved. The credits are held until the change is live.",
+	canceled: "Canceled. The 1-credit deposit was kept.",
+	superseded: "Replaced by a newer plan.",
+	dropped: "The repository changed, so this plan was dropped and the deposit refunded."
+};
+const PlanCard = ({ plan, balance, onApprove, onRequestChanges, onCancel, onUpdatePlan }) => {
+	const approve = approval(plan, balance);
+	const awaiting = plan.status === "awaiting";
+	const waiting = awaiting ? waitingText(plan.waiting) : void 0;
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-label": `Plan, revision ${plan.revision}`,
+		className: "shrink-0 overflow-hidden rounded-lg border border-primary-border bg-background shadow-sm",
+		children: [/* @__PURE__ */ jsxs("header", {
+			className: "flex items-center gap-2 bg-primary-soft px-3 py-2",
+			children: [
+				/* @__PURE__ */ jsx(ListChecks, { className: "size-3.5 text-primary-text" }),
+				/* @__PURE__ */ jsxs("h3", {
+					className: "flex-1 text-[13px] font-semibold text-primary-text",
+					children: ["Plan", plan.revision > 1 && `, revision ${plan.revision}`]
+				}),
+				/* @__PURE__ */ jsxs(Badge, {
+					tone: "blue",
+					dot: false,
+					children: ["Size ", plan.size]
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "text-xs font-medium text-primary-text",
+					children: formatCredits(plan.credits)
+				})
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "space-y-2.5 px-3 py-2.5",
+			children: [
+				/* @__PURE__ */ jsx("p", {
+					className: "text-[13px]",
+					children: plan.summary
+				}),
+				plan.steps.length > 0 && /* @__PURE__ */ jsx("ol", {
+					className: "list-decimal space-y-1 pl-5 text-xs text-muted-foreground",
+					children: plan.steps.map((step) => /* @__PURE__ */ jsx("li", { children: step.title }, step.title))
+				}),
+				plan.migrations.length > 0 && /* @__PURE__ */ jsxs("div", {
+					className: "space-y-1",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "text-xs font-semibold",
+						children: "Database changes"
+					}), /* @__PURE__ */ jsx("ul", {
+						className: "space-y-1",
+						children: plan.migrations.map((migration) => /* @__PURE__ */ jsxs("li", {
+							className: "flex items-start gap-2 text-xs",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "min-w-0 flex-1",
+								children: migration.description
+							}), migration.destructive && /* @__PURE__ */ jsx(Badge, {
+								tone: "red",
+								children: "Destructive"
+							})]
+						}, migration.description))
+					})]
+				}),
+				plan.risks.length > 0 && /* @__PURE__ */ jsx("ul", {
+					className: "space-y-1",
+					children: plan.risks.map((risk) => /* @__PURE__ */ jsxs("li", {
+						className: "flex items-start gap-2 text-xs text-warning-text",
+						children: [/* @__PURE__ */ jsx(AlertTriangle, { className: "mt-0.5 size-3 shrink-0" }), risk]
+					}, risk))
+				}),
+				awaiting && plan.outdated && /* @__PURE__ */ jsxs("p", {
+					role: "status",
+					className: "flex items-start gap-2 rounded-md bg-warning-soft px-2.5 py-2 text-xs text-warning-text",
+					children: [/* @__PURE__ */ jsx(GitBranch, { className: "mt-0.5 size-3 shrink-0" }), "The branch moved on GitHub since this plan was made. Approving runs it on the new code."]
+				}),
+				waiting && /* @__PURE__ */ jsxs("p", {
+					className: "text-xs text-muted-foreground",
+					children: [waiting, " Cancel frees the queue."]
+				}),
+				statusNote[plan.status] && /* @__PURE__ */ jsx("p", {
+					className: "text-xs text-muted-foreground",
+					children: statusNote[plan.status]
+				}),
+				awaiting && /* @__PURE__ */ jsxs("div", {
+					className: "space-y-2 pt-0.5",
+					children: [
+						/* @__PURE__ */ jsx(Button, {
+							variant: "primary",
+							className: "w-full",
+							disabled: !approve.enabled,
+							onClick: () => onApprove?.(plan.taskId),
+							children: approveLabel(plan)
+						}),
+						approve.reason && /* @__PURE__ */ jsx("p", {
+							className: "text-xs text-danger-text",
+							children: approve.reason
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex gap-2",
+							children: [
+								plan.outdated && /* @__PURE__ */ jsx(Button, {
+									size: "sm",
+									className: "flex-1",
+									onClick: () => onUpdatePlan?.(plan.taskId),
+									children: "Update plan"
+								}),
+								/* @__PURE__ */ jsx(Button, {
+									size: "sm",
+									className: "flex-1",
+									onClick: () => onRequestChanges?.(plan.taskId),
+									children: "Ask for changes"
+								}),
+								/* @__PURE__ */ jsx(Button, {
+									size: "sm",
+									variant: "ghost",
+									onClick: () => onCancel?.(plan.taskId),
+									children: "Cancel"
+								})
+							]
+						})
+					]
+				})
+			]
+		})]
+	});
+};
+//#endregion
+export { PlanCard };

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

@@ -0,0 +1,18 @@
+import { StepList } from "../assistant-panel/step-list.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/assistant-dock/progress-card.tsx
+const titles = {
+	planning: "Planning",
+	running: "Making the change"
+};
+/** What the planning run or the job is doing, step by step. */
+const ProgressCard = ({ phase, steps }) => /* @__PURE__ */ jsxs("section", {
+	"aria-label": titles[phase],
+	className: "shrink-0 space-y-2 rounded-lg border border-border-strong bg-background px-3 py-2.5 shadow-sm",
+	children: [/* @__PURE__ */ jsx("h3", {
+		className: "text-xs font-semibold",
+		children: titles[phase]
+	}), /* @__PURE__ */ jsx(StepList, { steps })]
+});
+//#endregion
+export { ProgressCard };

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

@@ -0,0 +1,52 @@
+import { formatCell } from "./model.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Database } from "lucide-react";
+//#region src/assistant-dock/query-card.tsx
+/** A read-only query the chat ran, with its rows as a table. */
+const QueryCard = ({ query }) => /* @__PURE__ */ jsxs("section", {
+	"aria-label": "Query result",
+	className: "shrink-0 overflow-hidden rounded-lg border border-border-strong bg-background shadow-sm",
+	children: [
+		/* @__PURE__ */ jsxs("header", {
+			className: "flex items-start gap-2 bg-surface px-3 py-2",
+			children: [/* @__PURE__ */ jsx(Database, { className: "mt-0.5 size-3.5 shrink-0 text-muted-foreground" }), /* @__PURE__ */ jsx("code", {
+				className: "min-w-0 flex-1 whitespace-pre-wrap break-words font-mono text-[11px] text-foreground",
+				children: query.sql
+			})]
+		}),
+		query.rows.length === 0 ? /* @__PURE__ */ jsx("p", {
+			className: "px-3 py-2 text-xs text-muted-foreground",
+			children: "No rows."
+		}) : /* @__PURE__ */ jsx("div", {
+			className: "max-h-64 overflow-auto",
+			children: /* @__PURE__ */ jsxs("table", {
+				className: "w-full border-collapse text-left text-[11px]",
+				children: [/* @__PURE__ */ jsx("thead", {
+					className: "sticky top-0 bg-background",
+					children: /* @__PURE__ */ jsx("tr", { children: query.columns.map((column) => /* @__PURE__ */ jsx("th", {
+						scope: "col",
+						className: "border-b border-border px-2 py-1 font-semibold whitespace-nowrap",
+						children: column
+					}, column)) })
+				}), /* @__PURE__ */ jsx("tbody", { children: query.rows.map((row, index) => /* @__PURE__ */ jsx("tr", {
+					className: "border-b border-border last:border-b-0",
+					children: row.map((value, column) => /* @__PURE__ */ jsx("td", {
+						className: value === null ? "px-2 py-1 whitespace-nowrap text-faint-foreground" : "px-2 py-1 whitespace-nowrap",
+						children: formatCell(value)
+					}, column))
+				}, index)) })]
+			})
+		}),
+		/* @__PURE__ */ jsxs("footer", {
+			className: "border-t border-border px-3 py-1.5 text-[11px] text-muted-foreground",
+			children: [
+				query.rows.length,
+				" ",
+				query.rows.length === 1 ? "row" : "rows",
+				query.truncated && ", cut off at the limit"
+			]
+		})
+	]
+});
+//#endregion
+export { QueryCard };

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

@@ -0,0 +1,31 @@
+import { Button } from "../primitives/button.js";
+import { queueText } from "./model.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Clock } from "lucide-react";
+//#region src/assistant-dock/queue-card.tsx
+/** A task waiting in the app's queue, with its deposit billed. */
+const QueueCard = ({ taskId, request, ahead, waitingOnPlan, onCancel }) => /* @__PURE__ */ jsxs("section", {
+	"aria-label": "Queued change",
+	className: "flex shrink-0 items-start gap-2.5 rounded-lg border border-border-strong bg-background px-3 py-2.5 shadow-sm",
+	children: [
+		/* @__PURE__ */ jsx(Clock, { className: "mt-0.5 size-3.5 shrink-0 text-muted-foreground" }),
+		/* @__PURE__ */ jsxs("div", {
+			className: "min-w-0 flex-1 space-y-0.5",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "truncate text-[13px] font-medium",
+				children: request
+			}), /* @__PURE__ */ jsx("div", {
+				className: "text-xs text-muted-foreground",
+				children: queueText(ahead, waitingOnPlan)
+			})]
+		}),
+		/* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size: "sm",
+			onClick: () => onCancel?.(taskId),
+			children: "Cancel"
+		})
+	]
+});
+//#endregion
+export { QueueCard };

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

@@ -0,0 +1,77 @@
+import { cn } from "../lib/cn.js";
+import { formatCredits } from "./model.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CircleCheck, CircleX, GitCommitHorizontal } from "lucide-react";
+//#region src/assistant-dock/result-card.tsx
+const headings = {
+	live: "Live now",
+	failed: "The change failed",
+	capped: "The change hit its limit"
+};
+/** How a job ended: live with its commit, or failed or capped at no cost, with the database changes that stay live. */
+const ResultCard = ({ result }) => {
+	const live = result.outcome === "live";
+	const Icon = live ? CircleCheck : CircleX;
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-label": headings[result.outcome],
+		className: cn("shrink-0 overflow-hidden rounded-lg border bg-background shadow-sm", live ? "border-success/40" : "border-danger/40"),
+		children: [/* @__PURE__ */ jsxs("header", {
+			className: cn("flex items-center gap-2 px-3 py-2", live ? "bg-success-soft text-success-text" : "bg-danger-soft text-danger-text"),
+			children: [
+				/* @__PURE__ */ jsx(Icon, { className: "size-3.5" }),
+				/* @__PURE__ */ jsx("h3", {
+					className: "flex-1 text-[13px] font-semibold",
+					children: headings[result.outcome]
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "text-xs font-medium",
+					children: live ? formatCredits(result.credits) : "No charge"
+				})
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "space-y-2.5 px-3 py-2.5",
+			children: [
+				/* @__PURE__ */ jsx("p", {
+					className: "text-[13px]",
+					children: result.summary
+				}),
+				result.commit && /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2 text-xs text-muted-foreground",
+					children: [/* @__PURE__ */ jsx(GitCommitHorizontal, { className: "size-3.5" }), result.commit.url ? /* @__PURE__ */ jsx("a", {
+						className: "font-mono text-primary-text hover:underline",
+						href: result.commit.url,
+						target: "_blank",
+						rel: "noreferrer",
+						children: result.commit.sha.slice(0, 7)
+					}) : /* @__PURE__ */ jsx("span", {
+						className: "font-mono",
+						children: result.commit.sha.slice(0, 7)
+					})]
+				}),
+				result.keptOnBranch && /* @__PURE__ */ jsxs("p", {
+					className: "text-xs text-muted-foreground",
+					children: [
+						"GitHub did not accept the push. The code is kept on the branch ",
+						/* @__PURE__ */ jsx("code", {
+							className: "font-mono",
+							children: result.keptOnBranch
+						}),
+						"."
+					]
+				}),
+				result.dbChanges.length > 0 && /* @__PURE__ */ jsxs("div", {
+					className: "space-y-1",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "text-xs font-semibold",
+						children: live ? "Database changes" : "Database changes that stay live"
+					}), /* @__PURE__ */ jsx("ul", {
+						className: "space-y-0.5 font-mono text-[11px] text-muted-foreground",
+						children: result.dbChanges.map((change) => /* @__PURE__ */ jsx("li", { children: change }, change))
+					})]
+				})
+			]
+		})]
+	});
+};
+//#endregion
+export { ResultCard };

package/dist/assistant-panel/content.d.ts

@@ -0,0 +1,7 @@
+//#region src/assistant-panel/content.d.ts
+export type StepState = 'done' | 'running' | 'failed';
+export type Step = {
+  label: string;
+  state: StepState;
+};
+//#endregion

package/dist/assistant-panel/step-list.js

@@ -0,0 +1,30 @@
+import { cn } from "../lib/cn.js";
+import { Spinner } from "../primitives/spinner.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, X } from "lucide-react";
+//#region src/assistant-panel/step-list.tsx
+const StepList = ({ steps }) => /* @__PURE__ */ jsx("ul", {
+	className: "shrink-0 space-y-2",
+	children: steps.map((step) => /* @__PURE__ */ jsxs("li", {
+		className: "flex items-start gap-2.5 text-[13px]",
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "mt-0.5 flex size-4 shrink-0 items-center justify-center",
+			children: [
+				step.state === "running" && /* @__PURE__ */ jsx(Spinner, { className: "size-3.5 text-primary" }),
+				step.state === "done" && /* @__PURE__ */ jsx(Check, {
+					className: "size-3.5 text-success",
+					strokeWidth: 2.5
+				}),
+				step.state === "failed" && /* @__PURE__ */ jsx(X, {
+					className: "size-3.5 text-danger",
+					strokeWidth: 2.5
+				})
+			]
+		}), /* @__PURE__ */ jsx("span", {
+			className: cn(step.state === "running" ? "text-foreground" : "text-muted-foreground", step.state === "failed" && "text-danger-text"),
+			children: step.label
+		})]
+	}, step.label))
+});
+//#endregion
+export { StepList };

package/dist/auth/auth-provider.js

@@ -12,6 +12,7 @@ const useAuth = () => {
 const AuthProvider = ({ session: given, children }) => {
 	const [state, setState] = useState({ kind: "loading" });
 	const [passwordReset, setPasswordReset] = useState(false);
+	const [socialProviders, setSocialProviders] = useState([]);
 	const markSignedOut = useCallback(() => setState((current) => current.kind === "signed-in" ? { kind: "signed-out" } : current), []);
 	const signedOut = useRef(markSignedOut);
 	signedOut.current = markSignedOut;
@@ -20,6 +21,7 @@ const AuthProvider = ({ session: given, children }) => {
 		setState({ kind: "loading" });
 		session.status().then(async (status) => {
 			setPasswordReset(status.passwordReset);
+			setSocialProviders(status.socialProviders);
 			if (status.needsAdmin) return setState({ kind: "needs-admin" });
 			const user = await session.session();
 			setState(user ? {
@@ -36,6 +38,7 @@ const AuthProvider = ({ session: given, children }) => {
 		state,
 		session,
 		passwordReset,
+		socialProviders,
 		markSignedOut,
 		recheck,
 		signIn: async (email, password) => {
@@ -44,6 +47,9 @@ const AuthProvider = ({ session: given, children }) => {
 				user: await session.signIn(email, password)
 			});
 		},
+		signInSocial: async (provider) => {
+			window.location.assign(await session.signInSocial(provider, window.location.href));
+		},
 		signOut: async () => {
 			await session.signOut();
 			setState({ kind: "signed-out" });
@@ -52,6 +58,7 @@ const AuthProvider = ({ session: given, children }) => {
 		state,
 		session,
 		passwordReset,
+		socialProviders,
 		markSignedOut,
 		recheck
 	]);

package/dist/auth/sign-in-form.js

@@ -2,72 +2,88 @@ import { Input } from "../primitives/input.js";
 import { Button } from "../primitives/button.js";
 import { AuthLayout } from "./auth-layout.js";
 import { useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/auth/sign-in-form.tsx
-const SignInForm = ({ onSubmit, busy, error, workspace, notice, onForgotPassword }) => {
+const SignInForm = ({ onSubmit, busy, error, workspace, notice, onForgotPassword, onContinueWithGitHub }) => {
 	const [email, setEmail] = useState("");
 	const [password, setPassword] = useState("");
 	return /* @__PURE__ */ jsxs(AuthLayout, {
 		title: "Sign in to Protobase",
 		description: workspace,
-		children: [notice && /* @__PURE__ */ jsx("p", {
-			role: "status",
-			className: "mb-4 rounded-md bg-success-soft px-3 py-2 text-xs font-medium text-success-text",
-			children: notice
-		}), /* @__PURE__ */ jsxs("form", {
-			className: "flex flex-col gap-4",
-			onSubmit: (event) => {
-				event.preventDefault();
-				onSubmit(email.trim(), password);
-			},
-			children: [
-				/* @__PURE__ */ jsxs("label", {
-					className: "flex flex-col gap-1.5 text-[13px] font-medium",
-					children: ["Email", /* @__PURE__ */ jsx(Input, {
-						type: "email",
-						name: "email",
-						autoComplete: "username",
-						required: true,
-						autoFocus: true,
-						value: email,
-						invalid: Boolean(error),
-						onChange: (event) => setEmail(event.target.value),
-						className: "min-h-6"
-					})]
-				}),
-				/* @__PURE__ */ jsxs("label", {
-					className: "flex flex-col gap-1.5 text-[13px] font-medium",
-					children: ["Password", /* @__PURE__ */ jsx(Input, {
-						type: "password",
-						name: "password",
-						autoComplete: "current-password",
-						required: true,
-						value: password,
-						invalid: Boolean(error),
-						onChange: (event) => setPassword(event.target.value),
-						className: "min-h-6"
-					})]
-				}),
-				error && /* @__PURE__ */ jsx("p", {
-					role: "alert",
-					className: "text-xs font-medium text-danger-text",
-					children: error
-				}),
-				/* @__PURE__ */ jsx(Button, {
-					variant: "primary",
-					type: "submit",
-					loading: busy,
-					className: "min-h-10",
-					children: "Sign in"
-				}),
-				onForgotPassword && /* @__PURE__ */ jsx("button", {
-					type: "button",
-					onClick: onForgotPassword,
-					className: "self-center text-[13px] font-medium text-primary-text hover:underline",
-					children: "Forgot password?"
-				})
-			]
-		})]
+		children: [
+			notice && /* @__PURE__ */ jsx("p", {
+				role: "status",
+				className: "mb-4 rounded-md bg-success-soft px-3 py-2 text-xs font-medium text-success-text",
+				children: notice
+			}),
+			onContinueWithGitHub && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
+				onClick: onContinueWithGitHub,
+				disabled: busy,
+				className: "min-h-10 w-full",
+				children: "Continue with GitHub"
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "my-4 flex items-center gap-3 text-xs text-muted-foreground",
+				children: [
+					/* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-border" }),
+					"or",
+					/* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-border" })
+				]
+			})] }),
+			/* @__PURE__ */ jsxs("form", {
+				className: "flex flex-col gap-4",
+				onSubmit: (event) => {
+					event.preventDefault();
+					onSubmit(email.trim(), password);
+				},
+				children: [
+					/* @__PURE__ */ jsxs("label", {
+						className: "flex flex-col gap-1.5 text-[13px] font-medium",
+						children: ["Email", /* @__PURE__ */ jsx(Input, {
+							type: "email",
+							name: "email",
+							autoComplete: "username",
+							required: true,
+							autoFocus: true,
+							value: email,
+							invalid: Boolean(error),
+							onChange: (event) => setEmail(event.target.value),
+							className: "min-h-6"
+						})]
+					}),
+					/* @__PURE__ */ jsxs("label", {
+						className: "flex flex-col gap-1.5 text-[13px] font-medium",
+						children: ["Password", /* @__PURE__ */ jsx(Input, {
+							type: "password",
+							name: "password",
+							autoComplete: "current-password",
+							required: true,
+							value: password,
+							invalid: Boolean(error),
+							onChange: (event) => setPassword(event.target.value),
+							className: "min-h-6"
+						})]
+					}),
+					error && /* @__PURE__ */ jsx("p", {
+						role: "alert",
+						className: "text-xs font-medium text-danger-text",
+						children: error
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						variant: "primary",
+						type: "submit",
+						loading: busy,
+						className: "min-h-10",
+						children: "Sign in"
+					}),
+					onForgotPassword && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: onForgotPassword,
+						className: "self-center text-[13px] font-medium text-primary-text hover:underline",
+						children: "Forgot password?"
+					})
+				]
+			})
+		]
 	});
 };
 //#endregion

package/dist/auth/sign-in-page.js

@@ -11,14 +11,14 @@ const signInMessage = (error) => {
 	return error.message;
 };
 const SignInPage = ({ workspace, notice, onForgotPassword }) => {
-	const { signIn } = useAuth();
+	const { signIn, signInSocial, socialProviders } = useAuth();
 	const [busy, setBusy] = useState(false);
 	const [error, setError] = useState();
-	const submit = async (email, password) => {
+	const attempt = async (start) => {
 		setBusy(true);
 		setError(void 0);
 		try {
-			await signIn(email, password);
+			await start();
 		} catch (failure) {
 			if (!(failure instanceof AuthError)) throw failure;
 			setError(signInMessage(failure));
@@ -31,7 +31,8 @@ const SignInPage = ({ workspace, notice, onForgotPassword }) => {
 		workspace,
 		notice,
 		onForgotPassword,
-		onSubmit: (email, password) => void submit(email, password)
+		onContinueWithGitHub: socialProviders.includes("github") ? () => void attempt(() => signInSocial("github")) : void 0,
+		onSubmit: (email, password) => void attempt(() => signIn(email, password))
 	});
 };
 //#endregion

package/dist/index.d.ts

@@ -9,4 +9,6 @@ import { useRecord } from "./data/use-record.js";
 import { useFacets, useHistogram, useSeries } from "./data/use-aggregates.js";
 import { isConflict, useUpdateRecord } from "./data/use-update-record.js";
 import { LayoutRecord, useLayoutRecord } from "./app/pages/record-scope.js";
-export { type ActionContext, type ActionHandler, ApiProvider, type ApiProviderProps, App, type AppProps, type LayoutRecord, type MetaData, type ProjectUi, defineUi, isConflict, useClient, useFacets, useHistogram, useLayoutRecord, useList, useMeta, useRecord, useSeries, useUpdateRecord };
+import { DockItem, JobResult, Plan, PlanSize, QueryResult } from "./assistant-dock/model.js";
+import { AssistantDock, AssistantDockProps } from "./assistant-dock/assistant-dock.js";
+export { type ActionContext, type ActionHandler, ApiProvider, type ApiProviderProps, App, type AppProps, AssistantDock, type AssistantDockProps, type DockItem, type JobResult, type LayoutRecord, type MetaData, type Plan, type PlanSize, type ProjectUi, type QueryResult, defineUi, isConflict, useClient, useFacets, useHistogram, useLayoutRecord, useList, useMeta, useRecord, useSeries, useUpdateRecord };

package/dist/index.js

@@ -7,4 +7,5 @@ import { defineUi } from "./app/pages/project-ui.js";
 import { useList } from "./data/use-list.js";
 import { isConflict, useUpdateRecord } from "./data/use-update-record.js";
 import { App } from "./app/app.js";
-export { ApiProvider, App, defineUi, isConflict, useClient, useFacets, useHistogram, useLayoutRecord, useList, useMeta, useRecord, useSeries, useUpdateRecord };
+import { AssistantDock } from "./assistant-dock/assistant-dock.js";
+export { ApiProvider, App, AssistantDock, defineUi, isConflict, useClient, useFacets, useHistogram, useLayoutRecord, useList, useMeta, useRecord, useSeries, useUpdateRecord };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@protobase/ui",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "The Protobase admin app and the React hooks and components for custom UI.",
   "license": "Apache-2.0",
   "repository": {
@@ -38,9 +38,9 @@
     "react-dom": "^19.3.0",
     "recharts": "^3.10.1",
     "tailwindcss": "^4.3.3",
-    "@protobase/client": "0.1.0",
-    "@protobase/schema": "0.1.0",
-    "@protobase/layout": "0.1.0"
+    "@protobase/client": "0.1.2",
+    "@protobase/schema": "0.1.2",
+    "@protobase/layout": "0.1.2"
   },
   "scripts": {
     "build": "tsdown"