@datum-cloud/datum-ui 3.5.0 → 3.7.0

package/dist/assistant/index.mjs

@@ -5,12 +5,12 @@ import { t as Dialog } from "../dialog-Gu70fban.mjs";
 import { a as DropdownMenuRadioGroup, c as DropdownMenuTrigger, i as DropdownMenuLabel, o as DropdownMenuRadioItem, r as DropdownMenuContent, s as DropdownMenuSeparator, t as DropdownMenu } from "../dropdown-menu-b8zY5Cs6.mjs";
 import { t as Tooltip } from "../tooltip-DhbN1BDK.mjs";
 import { n as EASE, t as DURATION } from "../motion-DvGRWdsm.mjs";
-import { Archive, ArchiveRestore, ArrowDown, ArrowRight, ArrowUp, Brain, Check, ChevronDown, Copy, Download, MessagesSquare, Mic, MicOff, PanelLeft, Plus, RotateCw, Square, SquarePen, Trash2, X } from "lucide-react";
+import { Archive, ArchiveRestore, ArrowDown, ArrowRight, ArrowUp, Box, Brain, Check, ChevronDown, ClipboardList, Clock, Code, Copy, Database, Download, Globe, Laptop, Link, MapPin, MessagesSquare, Mic, MicOff, Network, PanelLeft, Plus, RotateCw, Send, Server, Shield, Split, Square, SquarePen, Trash2, X } from "lucide-react";
 import { Fragment, createContext, useCallback, useContext, useMemo, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { AnimatePresence, motion } from "motion/react";
 import { EditorContent } from "@tiptap/react";
-import { getToolName, isReasoningUIPart, isTextUIPart, isToolUIPart } from "ai";
+import { DEFAULT_ASSISTANT_CONFIG as DEFAULT_ASSISTANT_CONFIG$1, activeToolPart, assistantErrorMessage, chatFileName, chatToMarkdown, deriveTurns, formatRelativeTime, hasText, isReasoningUIPart, isStreamingMessage, isTextUIPart, isToolUIPart, messageText, showInitialLoading, showToolIndicator, thinkingLabel, toolLabel } from "@datum-cloud/datum-ui-assistant-core";
 import { code } from "@streamdown/code";
 import { Streamdown } from "streamdown";
 import "streamdown/styles.css";
@@ -40,11 +40,7 @@ function defaultRenderLink({ href, children }) {
 * config. Host apps override via `<AssistantConfigProvider config={…}>`.
 */
 const DEFAULT_ASSISTANT_CONFIG = {
-	greeting: (name) => `Hey there${name ? `, ${name}` : ""}`,
-	suggestions: [],
-	showReasoning: true,
-	modelSelector: false,
-	toolLabels: {},
+	...DEFAULT_ASSISTANT_CONFIG$1,
 	renderLink: defaultRenderLink
 };
 const AssistantConfigContext = createContext(DEFAULT_ASSISTANT_CONFIG);
@@ -147,15 +143,17 @@ function ModelSelector({ modelId, effortId, onModelChange, onEffortChange, disab
 }
 //#endregion
 //#region src/components/features/assistant/components/composer/prompt-card.tsx
-function PromptCard({ editor, isReady, canRetry, onSend, onStop, onRetry, modelId, effortId, onModelChange, onEffortChange, speechSupported, isListening, frequencyData, onMicToggle, className }) {
+function PromptCard({ editor, isReady, canRetry, onSend, onStop, onRetry, modelId, effortId, onModelChange, onEffortChange, speechSupported, isListening, frequencyData, onMicToggle, density = "default", className }) {
 	const { modelSelector } = useAssistantConfig();
+	const compact = density === "compact";
+	const sendClasses = compact ? "text-muted-foreground hover:text-foreground hover:bg-accent shrink-0 rounded-full p-1.5 transition-colors" : "bg-primary text-primary-foreground hover:bg-primary/90 shrink-0 rounded-full p-1.5 transition-colors";
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("bg-card border-primary/30 rounded-2xl border p-3 shadow-sm transition-shadow", className),
+		className: cn(compact ? "bg-card border-input flex items-end gap-2 rounded-lg border py-1 pr-1.5 pl-3" : "bg-card border-primary/30 rounded-2xl border p-3 shadow-sm transition-shadow", className),
 		children: [/* @__PURE__ */ jsx(EditorContent, {
 			editor,
-			className: "max-h-52 min-h-9 overflow-y-auto px-1 py-1"
+			className: cn("max-h-52 overflow-y-auto", compact ? "min-w-0 flex-1 [&_.ProseMirror]:py-0.5" : "min-h-9 px-1 py-1")
 		}), /* @__PURE__ */ jsx("div", {
-			className: "mt-1 flex items-center justify-end gap-2",
+			className: cn("flex items-center justify-end gap-2", compact ? "pb-0.5" : "mt-1"),
 			children: /* @__PURE__ */ jsxs("div", {
 				className: "flex items-center gap-1",
 				children: [
@@ -223,9 +221,9 @@ function PromptCard({ editor, isReady, canRetry, onSend, onStop, onRetry, modelI
 							type: "button",
 							onClick: onSend,
 							"aria-label": "Send message",
-							className: "bg-primary text-primary-foreground hover:bg-primary/90 shrink-0 rounded-full p-1.5 transition-colors",
+							className: sendClasses,
 							children: /* @__PURE__ */ jsx(Icon, {
-								icon: ArrowUp,
+								icon: compact ? Send : ArrowUp,
 								className: "size-4"
 							})
 						})
@@ -236,7 +234,7 @@ function PromptCard({ editor, isReady, canRetry, onSend, onStop, onRetry, modelI
 							type: "button",
 							onClick: onStop,
 							"aria-label": "Stop generating",
-							className: "bg-primary text-primary-foreground hover:bg-primary/90 shrink-0 rounded-full p-1.5 transition-colors",
+							className: sendClasses,
 							children: /* @__PURE__ */ jsx(Icon, {
 								icon: Square,
 								className: "size-4 fill-current"
@@ -260,10 +258,7 @@ function useTurnRail(messages, containerRef, userScrolledUpRef) {
 	const [activeTurn, setActiveTurn] = useState(null);
 	const scrollElRef = useRef(null);
 	const programmaticUntilRef = useRef(0);
-	const turns = useMemo(() => messages.filter((m) => m.role === "user").map((m) => ({
-		id: m.id,
-		text: m.parts.find(isTextUIPart)?.text ?? ""
-	})), [messages]);
+	const turns = useMemo(() => deriveTurns(messages), [messages]);
 	const activeTurnId = activeTurn ?? turns.at(-1)?.id ?? null;
 	const setScrollEl = useCallback((node) => {
 		scrollElRef.current = node;
@@ -315,20 +310,11 @@ function useTurnRail(messages, containerRef, userScrolledUpRef) {
 	};
 }
 //#endregion
-//#region src/components/features/assistant/utils/format-relative-time.ts
-/** Human-friendly relative timestamp for the chat history list. */
-function formatRelativeTime(timestamp) {
-	const seconds = Math.floor((Date.now() - timestamp) / 1e3);
-	if (seconds < 60) return "just now";
-	const minutes = Math.floor(seconds / 60);
-	if (minutes < 60) return `${minutes}m ago`;
-	const hours = Math.floor(minutes / 60);
-	if (hours < 24) return `${hours}h ago`;
-	const days = Math.floor(hours / 24);
-	if (days === 1) return "Yesterday";
-	if (days < 7) return `${days}d ago`;
-	return new Date(timestamp).toLocaleDateString();
-}
+//#region src/components/features/assistant/types.ts
+/** The message part type that carries a pick-one question (see {@link AssistantChoicesData}). */
+const CHOICES_PART_TYPE = "data-choices";
+/** The message part type that carries a plan the person can approve (see {@link AssistantPlanData}). */
+const PLAN_PART_TYPE = "data-plan";
 //#endregion
 //#region src/components/features/assistant/utils/sanitize-html.ts
 const HTML_ESCAPE_MAP = {
@@ -365,6 +351,59 @@ function sanitizeUserHtml(raw) {
 	return result.startsWith("<p>") ? result : `<p>${result}</p>`;
 }
 //#endregion
+//#region src/components/features/assistant/components/message/choice-chips.tsx
+const CHOICE_ICONS = {
+	clock: Clock,
+	container: Box,
+	database: Database,
+	domain: Link,
+	globe: Globe,
+	laptop: Laptop,
+	location: MapPin,
+	network: Network,
+	server: Server,
+	shield: Shield
+};
+/**
+* A pick-one question as a row of buttons. Once an option is picked it stays
+* marked with a check and the others fade, so a scrolled-back conversation
+* still shows what was chosen.
+*/
+function AssistantChoiceChips({ data, onChoose, disabled = false }) {
+	const answered = data.selectedId !== void 0;
+	const interactive = !answered && !disabled && onChoose !== void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "my-1 space-y-2",
+		"data-slot": "assistant-choices",
+		children: [/* @__PURE__ */ jsx("p", {
+			className: "font-medium",
+			children: data.question
+		}), /* @__PURE__ */ jsx("div", {
+			role: "group",
+			"aria-label": data.question,
+			className: "flex flex-wrap gap-2",
+			children: data.options.map((option) => {
+				const selected = option.id === data.selectedId;
+				const icon = option.icon ? CHOICE_ICONS[option.icon] : void 0;
+				return /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					disabled: !interactive,
+					"aria-pressed": answered ? selected : void 0,
+					onClick: () => onChoose?.(option),
+					className: cn("inline-flex items-center gap-1.5 rounded-full border px-3.5 py-1.5 text-sm transition-colors", selected && "border-btn-primary text-btn-primary bg-btn-primary/5", !selected && answered && "text-muted-foreground/60 border-border/60", !selected && !answered && "text-foreground border-border", interactive ? "hover:bg-accent cursor-pointer" : "cursor-default", !answered && !interactive && "opacity-60"),
+					children: [selected ? /* @__PURE__ */ jsx(Icon, {
+						icon: Check,
+						className: "size-3.5 shrink-0"
+					}) : icon && /* @__PURE__ */ jsx(Icon, {
+						icon,
+						className: "size-3.5 shrink-0"
+					}), option.label]
+				}, option.id);
+			})
+		})]
+	});
+}
+//#endregion
 //#region src/components/features/assistant/components/message/loading-dots.tsx
 /** Three bouncing dots — the assistant's "thinking" indicator. */
 function LoadingDots({ className }) {
@@ -378,6 +417,238 @@ function LoadingDots({ className }) {
 	});
 }
 //#endregion
+//#region src/components/features/assistant/components/message/plan-card.tsx
+/** How a few common kinds read to someone who doesn't know their API names. */
+const KIND_LABELS = {
+	HTTPProxy: "Load balancer",
+	NetworkService: "Network service",
+	Workload: "Workload",
+	Domain: "Domain",
+	Network: "Network"
+};
+const KIND_ICONS = {
+	HTTPProxy: Split,
+	NetworkService: Network,
+	Workload: Server,
+	Domain: Globe,
+	Network
+};
+const BADGES = {
+	pending: {
+		label: "Nothing created yet",
+		className: "bg-sky-50 text-sky-700 dark:bg-sky-950 dark:text-sky-300"
+	},
+	applying: {
+		label: "Applying",
+		className: "bg-amber-50 text-amber-700 dark:bg-amber-950 dark:text-amber-300"
+	},
+	applied: {
+		label: "Applied",
+		className: "bg-emerald-50 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-300"
+	},
+	failed: {
+		label: "Not applied",
+		className: "bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300"
+	},
+	expired: {
+		label: "Expired",
+		className: "bg-muted text-muted-foreground"
+	},
+	replaced: {
+		label: "Replaced",
+		className: "bg-muted text-muted-foreground"
+	}
+};
+function cardState(data, latest, now) {
+	if (data.status !== "pending") return data.status;
+	if (!latest) return "replaced";
+	const expires = Date.parse(data.expiresAt);
+	if (!Number.isNaN(expires) && expires <= now) return "expired";
+	return "pending";
+}
+/** "3 resources to create", "1 resource to change", "2 resources to create or change". */
+function headline(resources) {
+	const creates = resources.some((r) => r.action === "create");
+	const updates = resources.some((r) => r.action === "update");
+	const verb = creates && updates ? "create or change" : updates ? "change" : "create";
+	return `${resources.length} ${resources.length === 1 ? "resource" : "resources"} to ${verb}`;
+}
+function approveLabel(resources) {
+	const updates = resources.some((r) => r.action === "update");
+	const creates = resources.some((r) => r.action === "create");
+	return creates && !updates ? "Approve and create" : updates && !creates ? "Approve and update" : "Approve and apply";
+}
+function timeOf(iso) {
+	if (!iso) return void 0;
+	const t = new Date(iso);
+	return Number.isNaN(t.getTime()) ? void 0 : t.toLocaleTimeString([], {
+		hour: "2-digit",
+		minute: "2-digit"
+	});
+}
+/**
+* A plan the assistant settled, as a card: one row per resource with what it
+* does, the YAML and differences on request, and the person's two answers.
+* Nothing is created until they click Approve, and the card then shows how it
+* went.
+*/
+function AssistantPlanCard({ data, latest = true, canApprove = false, onApprove, onChange, now = Date.now() }) {
+	const [showYaml, setShowYaml] = useState(false);
+	const state = cardState(data, latest, now);
+	const badge = BADGES[state];
+	const approvedAt = timeOf(data.approvedAt);
+	const appliedNames = new Set((data.applied ?? []).map((a) => `${a.kind}/${a.name}`));
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-label": `Plan: ${headline(data.resources)}`,
+		"data-slot": "assistant-plan",
+		"data-state": state,
+		className: "bg-card my-2 overflow-hidden rounded-xl border",
+		children: [
+			/* @__PURE__ */ jsxs("header", {
+				className: "bg-muted/40 flex items-center gap-2 border-b px-4 py-3",
+				children: [
+					/* @__PURE__ */ jsx(Icon, {
+						icon: ClipboardList,
+						className: "size-4 shrink-0"
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: "flex-1 font-medium",
+						children: [
+							"Plan ·",
+							" ",
+							headline(data.resources)
+						]
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: cn("rounded-full px-2.5 py-0.5 text-xs", badge.className),
+						children: badge.label
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("ul", {
+				className: "divide-y",
+				children: data.resources.map((r) => {
+					const kindIcon = KIND_ICONS[r.kind] ?? Box;
+					const done = state === "applied" && appliedNames.has(`${r.kind}/${r.name}`);
+					return /* @__PURE__ */ jsxs("li", {
+						className: "flex gap-3 px-4 py-3",
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "bg-btn-primary/10 text-btn-primary flex size-8 shrink-0 items-center justify-center rounded-md",
+								children: /* @__PURE__ */ jsx(Icon, {
+									icon: kindIcon,
+									className: "size-4"
+								})
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "min-w-0 flex-1",
+								children: [
+									/* @__PURE__ */ jsxs("p", { children: [
+										/* @__PURE__ */ jsx("span", {
+											className: "font-medium",
+											children: KIND_LABELS[r.kind] ?? r.kind
+										}),
+										" ",
+										/* @__PURE__ */ jsx("span", {
+											className: "text-muted-foreground font-mono text-[0.9em]",
+											children: r.name
+										})
+									] }),
+									r.summary && /* @__PURE__ */ jsx("p", {
+										className: "text-muted-foreground",
+										children: r.summary
+									}),
+									r.diff && r.diff.length > 0 && /* @__PURE__ */ jsx("div", {
+										className: "mt-1 flex flex-wrap gap-1",
+										children: r.diff.map((line) => /* @__PURE__ */ jsx("code", {
+											className: "rounded bg-emerald-50 px-1.5 py-0.5 font-mono text-xs text-emerald-800 dark:bg-emerald-950 dark:text-emerald-200",
+											children: line
+										}, line))
+									})
+								]
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: cn("h-fit shrink-0 rounded-full px-2.5 py-0.5 text-xs", r.action === "update" ? "bg-amber-50 text-amber-700 dark:bg-amber-950 dark:text-amber-300" : "bg-emerald-50 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-300"),
+								children: done ? r.action === "update" ? "Updated" : "Created" : r.action === "update" ? "Update" : "Create"
+							})
+						]
+					}, `${r.kind}/${r.namespace ?? ""}/${r.name}`);
+				})
+			}),
+			showYaml && /* @__PURE__ */ jsx("div", {
+				className: "bg-muted/30 space-y-3 border-t px-4 py-3",
+				children: data.resources.map((r) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("p", {
+					className: "text-muted-foreground mb-1 text-xs",
+					children: [
+						r.kind,
+						" ",
+						r.name
+					]
+				}), /* @__PURE__ */ jsx("pre", {
+					className: "bg-card overflow-x-auto rounded-md border p-2 font-mono text-xs",
+					children: r.manifest
+				})] }, `yaml-${r.kind}/${r.name}`))
+			}),
+			/* @__PURE__ */ jsxs("footer", {
+				className: "flex flex-wrap items-center gap-2 border-t px-4 py-3",
+				children: [
+					/* @__PURE__ */ jsxs("button", {
+						type: "button",
+						onClick: () => setShowYaml((v) => !v),
+						"aria-expanded": showYaml,
+						className: "text-muted-foreground hover:text-foreground mr-auto inline-flex items-center gap-1.5 text-sm transition-colors",
+						children: [/* @__PURE__ */ jsx(Icon, {
+							icon: Code,
+							className: "size-4"
+						}), showYaml ? "Hide YAML and diff" : "View YAML and diff"]
+					}),
+					state === "pending" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
+						type: "tertiary",
+						theme: "outline",
+						onClick: onChange,
+						disabled: !canApprove,
+						children: "Change something"
+					}), /* @__PURE__ */ jsx(Button, {
+						type: "primary",
+						theme: "solid",
+						icon: /* @__PURE__ */ jsx(Icon, {
+							icon: Check,
+							className: "size-4"
+						}),
+						onClick: onApprove,
+						disabled: !canApprove,
+						children: approveLabel(data.resources)
+					})] }),
+					state === "applying" && /* @__PURE__ */ jsx(Button, {
+						type: "primary",
+						theme: "solid",
+						loading: true,
+						disabled: true,
+						children: "Applying"
+					}),
+					(state === "applied" || state === "failed") && approvedAt && /* @__PURE__ */ jsxs("span", {
+						className: "text-muted-foreground text-sm",
+						children: [
+							"Approved by you at",
+							" ",
+							approvedAt
+						]
+					}),
+					state === "expired" && /* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground text-sm",
+						children: "This plan expired. Ask for a new one to go ahead."
+					})
+				]
+			}),
+			state === "failed" && data.error && /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				className: "text-destructive border-t px-4 py-3 text-sm",
+				children: data.error
+			})
+		]
+	});
+}
+//#endregion
 //#region src/components/features/assistant/components/message/thinking-block.tsx
 function ThinkingBlock({ text, isStreaming = false }) {
 	const [open, setOpen] = useState(false);
@@ -385,7 +656,7 @@ function ThinkingBlock({ text, isStreaming = false }) {
 	const duration = useRef(null);
 	if (isStreaming && startedAt.current === null) startedAt.current = Date.now();
 	if (!isStreaming && startedAt.current !== null && duration.current === null) duration.current = Math.round((Date.now() - startedAt.current) / 1e3);
-	const label = isStreaming ? "Thinking…" : duration.current !== null ? duration.current < 1 ? "Thought for less than 1 second" : `Thought for ${duration.current}s` : "Thought";
+	const label = thinkingLabel(isStreaming, duration.current);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "mb-3",
 		children: [/* @__PURE__ */ jsxs("button", {
@@ -417,74 +688,127 @@ function ThinkingBlock({ text, isStreaming = false }) {
 }
 //#endregion
 //#region src/components/features/assistant/components/message/assistant-message.tsx
-function messageText(msg) {
-	return msg.parts.filter(isTextUIPart).map((p) => p.text).join("\n\n");
-}
-function AssistantMessage({ msg, isLastMessage, status }) {
+/** Streamdown overrides shared by both densities (code surfaces). */
+const STREAMDOWN_BASE_CLASSES = "**:data-[streamdown='code-block-body']:bg-card **:data-[streamdown='inline-code']:bg-card dark:**:data-[streamdown='inline-code']:bg-accent **:data-[streamdown='inline-code']:border";
+/**
+* Markdown overrides for `compact`: tighter blocks, headings at body size, and
+* inline code that reads as part of the sentence (a long image reference wraps
+* anywhere instead of breaking the line around a bordered pill).
+*/
+const COMPACT_MARKDOWN_CLASSES = cn("space-y-2 leading-relaxed", "[&_li]:py-0.5", "[&_:is(h1,h2,h3,h4,h5,h6)]:mt-3 [&_:is(h1,h2,h3,h4,h5,h6)]:mb-1", "[&_:is(h1,h2,h3,h4,h5,h6)]:text-sm [&_:is(h1,h2,h3,h4,h5,h6)]:font-semibold", "**:data-[streamdown='code-block-body']:bg-card", "**:data-[streamdown='inline-code']:bg-transparent **:data-[streamdown='inline-code']:p-0", "**:data-[streamdown='inline-code']:text-[0.95em] **:data-[streamdown='inline-code']:[overflow-wrap:anywhere]");
+function AssistantMessage({ msg, isLastMessage, status, density = "default", onChoose, canChoose = false, onApprovePlan, onChangePlan, latestPlanId, canApprovePlan = false }) {
 	const { toolLabels, showReasoning, messageActions, renderLink, renderToolOutput } = useAssistantConfig();
-	const isStreaming = isLastMessage && status === "streaming";
-	const hasText = msg.parts.some((p) => isTextUIPart(p) && p.text);
-	const activeToolPart = msg.parts.find((p) => isToolUIPart(p) && (p.state === "input-streaming" || p.state === "input-available"));
-	const showInitialLoading = isStreaming && !hasText && !activeToolPart;
-	const showToolIndicator = isLastMessage && activeToolPart != null;
-	return /* @__PURE__ */ jsxs("div", {
-		className: "text-foreground w-full text-sm",
-		children: [
-			msg.parts.map((part, i) => {
-				if (isReasoningUIPart(part)) {
-					if (!showReasoning) return null;
-					const isThinkingStreaming = isStreaming && i === msg.parts.length - 1;
-					return /* @__PURE__ */ jsx(ThinkingBlock, {
-						text: part.text,
-						isStreaming: isThinkingStreaming
-					}, i);
-				}
-				if (isTextUIPart(part) && part.text) return /* @__PURE__ */ jsx(Streamdown, {
-					className: cn("**:data-[streamdown='code-block-body']:bg-card **:data-[streamdown='inline-code']:bg-card dark:**:data-[streamdown='inline-code']:bg-accent **:data-[streamdown='inline-code']:border [&_h2]:text-xl [&_h3]:text-lg", isStreaming && "**:data-[streamdown='inline-code']:animate-[sd-blurIn_300ms_ease-out_both]"),
-					isAnimating: isStreaming,
-					plugins: { code },
-					animated: {
-						animation: "blurIn",
-						duration: 300,
-						easing: "ease-out",
-						sep: "word",
-						stagger: 30
-					},
-					components: {
-						a: ({ href, children }) => renderLink({
-							href,
-							children
-						}),
-						img: ({ src, alt }) => /* @__PURE__ */ jsx("img", {
-							src,
-							alt: alt ?? "",
-							className: "my-2 inline-block max-h-16 rounded-full",
-							referrerPolicy: "no-referrer"
-						})
-					},
-					children: part.text
+	const isStreaming = isStreamingMessage({
+		isLastMessage,
+		status
+	});
+	const hasText$1 = hasText(msg);
+	const activeToolPart$1 = activeToolPart(msg);
+	const showInitialLoading$1 = showInitialLoading({
+		msg,
+		isLastMessage,
+		status
+	});
+	const showToolIndicator$1 = showToolIndicator({
+		msg,
+		isLastMessage
+	});
+	const compact = density === "compact";
+	const body = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		msg.parts.map((part, i) => {
+			if (isReasoningUIPart(part)) {
+				if (!showReasoning) return null;
+				const isThinkingStreaming = isStreaming && i === msg.parts.length - 1;
+				return /* @__PURE__ */ jsx(ThinkingBlock, {
+					text: part.text,
+					isStreaming: isThinkingStreaming
 				}, i);
-				if (isToolUIPart(part) && part.state === "output-available" && renderToolOutput) {
-					const rendered = renderToolOutput(part, msg);
-					if (rendered) return /* @__PURE__ */ jsx(Fragment, { children: rendered }, i);
-				}
-				return null;
-			}),
-			showInitialLoading && /* @__PURE__ */ jsx("div", {
-				className: "py-1",
-				children: /* @__PURE__ */ jsx(LoadingDots, {})
-			}),
-			showToolIndicator && /* @__PURE__ */ jsxs("div", {
-				className: "text-muted-foreground flex items-center gap-1.5 py-1 text-xs",
-				children: [
-					/* @__PURE__ */ jsx("span", { className: "bg-muted-foreground/50 h-1.5 w-1.5 animate-bounce rounded-full [animation-delay:-0.3s]" }),
-					/* @__PURE__ */ jsx("span", { className: "bg-muted-foreground/50 h-1.5 w-1.5 animate-bounce rounded-full [animation-delay:-0.15s]" }),
-					/* @__PURE__ */ jsx("span", { className: "bg-muted-foreground/50 h-1.5 w-1.5 animate-bounce rounded-full" }),
-					/* @__PURE__ */ jsx("span", { children: toolLabels[getToolName(activeToolPart)] ?? "Working…" })
-				]
-			}),
-			!isStreaming && hasText && (messageActions ? messageActions(msg) : /* @__PURE__ */ jsx(MessageActions, { msg }))
-		]
+			}
+			if (isTextUIPart(part) && part.text) return /* @__PURE__ */ jsx(Streamdown, {
+				className: cn(compact ? COMPACT_MARKDOWN_CLASSES : `${STREAMDOWN_BASE_CLASSES} [&_h2]:text-xl [&_h3]:text-lg`, isStreaming && "**:data-[streamdown='inline-code']:animate-[sd-blurIn_300ms_ease-out_both]"),
+				isAnimating: isStreaming,
+				plugins: { code },
+				animated: {
+					animation: "blurIn",
+					duration: 300,
+					easing: "ease-out",
+					sep: "word",
+					stagger: 30
+				},
+				components: {
+					a: ({ href, children }) => renderLink({
+						href,
+						children
+					}),
+					img: ({ src, alt }) => /* @__PURE__ */ jsx("img", {
+						src,
+						alt: alt ?? "",
+						className: "my-2 inline-block max-h-16 rounded-full",
+						referrerPolicy: "no-referrer"
+					})
+				},
+				children: part.text
+			}, i);
+			if (part.type === "data-choices") return /* @__PURE__ */ jsx(AssistantChoiceChips, {
+				data: part.data,
+				onChoose,
+				disabled: !canChoose
+			}, i);
+			if (part.type === "data-plan") {
+				const { id, data } = part;
+				const latest = latestPlanId === void 0 || latestPlanId === id;
+				return /* @__PURE__ */ jsx(AssistantPlanCard, {
+					data,
+					latest,
+					canApprove: canApprovePlan && latest && onApprovePlan !== void 0,
+					onApprove: () => onApprovePlan?.(id),
+					onChange: () => onChangePlan?.(id)
+				}, i);
+			}
+			if (isToolUIPart(part) && part.state === "output-available" && renderToolOutput) {
+				const rendered = renderToolOutput(part, msg);
+				if (rendered) return /* @__PURE__ */ jsx(Fragment, { children: rendered }, i);
+			}
+			return null;
+		}),
+		showInitialLoading$1 && /* @__PURE__ */ jsx("div", {
+			className: "py-1",
+			children: /* @__PURE__ */ jsx(LoadingDots, {})
+		}),
+		showToolIndicator$1 && activeToolPart$1 && /* @__PURE__ */ jsxs("div", {
+			className: "text-muted-foreground flex items-center gap-1.5 py-1 text-xs",
+			children: [
+				/* @__PURE__ */ jsx("span", { className: "bg-muted-foreground/50 h-1.5 w-1.5 animate-bounce rounded-full [animation-delay:-0.3s]" }),
+				/* @__PURE__ */ jsx("span", { className: "bg-muted-foreground/50 h-1.5 w-1.5 animate-bounce rounded-full [animation-delay:-0.15s]" }),
+				/* @__PURE__ */ jsx("span", { className: "bg-muted-foreground/50 h-1.5 w-1.5 animate-bounce rounded-full" }),
+				/* @__PURE__ */ jsx("span", { children: toolLabel(activeToolPart$1, toolLabels) })
+			]
+		}),
+		!isStreaming && hasText$1 && (messageActions ? messageActions(msg) : !compact && /* @__PURE__ */ jsx(MessageActions, { msg }))
+	] });
+	if (!compact) return /* @__PURE__ */ jsx("div", {
+		className: "text-foreground w-full text-sm",
+		children: body
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "text-foreground flex w-full gap-3 text-sm",
+		"data-density": "compact",
+		children: [/* @__PURE__ */ jsx(AssistantAvatar, {}), /* @__PURE__ */ jsx("div", {
+			className: "min-w-0 flex-1 pt-1",
+			children: body
+		})]
+	});
+}
+/** The assistant's mark beside each compact turn. Decorative: the turn itself carries the content. */
+function AssistantAvatar() {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		"data-slot": "assistant-avatar",
+		className: "bg-btn-primary flex size-7 shrink-0 items-center justify-center rounded-full text-white",
+		children: /* @__PURE__ */ jsx(Icon, {
+			icon: Brain,
+			className: "size-3.5"
+		})
 	});
 }
 function MessageActions({ msg }) {
@@ -506,6 +830,7 @@ function MessageActions({ msg }) {
 		URL.revokeObjectURL(url);
 	};
 	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "message-actions",
 		className: "text-muted-foreground/60 mt-1.5 flex items-center gap-0.5",
 		children: [/* @__PURE__ */ jsx(Tooltip, {
 			message: copied ? "Copied" : "Copy",
@@ -542,11 +867,11 @@ function MessageActions({ msg }) {
 //#endregion
 //#region src/components/features/assistant/components/message/user-message.tsx
 /** A user's message — a right-aligned bubble rendering the sanitized input HTML. */
-function UserMessage({ html }) {
+function UserMessage({ html, density = "default" }) {
 	return /* @__PURE__ */ jsx("div", {
 		className: "flex justify-end",
 		children: /* @__PURE__ */ jsx("div", {
-			className: "bg-border text-foreground max-w-[80%] rounded-2xl rounded-br-sm px-4 py-2.5 text-sm",
+			className: cn("text-foreground max-w-[80%] rounded-2xl px-4 py-2.5 text-sm", density === "compact" ? "bg-muted" : "bg-border rounded-br-sm"),
 			children: /* @__PURE__ */ jsx("div", {
 				className: "[&_em]:italic [&_p]:my-0.5 [&_p:first-child]:mt-0 [&_p:last-child]:mb-0 [&_s]:line-through [&_strong]:font-semibold [&_u]:underline",
 				dangerouslySetInnerHTML: { __html: html }
@@ -614,10 +939,12 @@ function TurnRail({ turns, activeId, onJump }) {
 }
 //#endregion
 //#region src/components/features/assistant/components/conversation/conversation.tsx
-function Conversation({ messages, status, error, htmlByUserMsgIndex, containerRef, bottomRef, userScrolledUpRef, footer }) {
+function Conversation({ messages, status, error, htmlByUserMsgIndex, containerRef, bottomRef, userScrolledUpRef, footer, density = "default", onChoose, onApprovePlan, onChangePlan }) {
+	const compact = density === "compact";
 	const [showScrollButton, setShowScrollButton] = useState(false);
 	const { turns, activeTurnId, setScrollEl, handleScroll, scrollToTurn } = useTurnRail(messages, containerRef, userScrolledUpRef);
 	let userMsgIdx = 0;
+	const latestPlanId = newestPlanId(messages);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "relative flex min-h-0 flex-1 flex-col",
 		children: [
@@ -626,7 +953,7 @@ function Conversation({ messages, status, error, htmlByUserMsgIndex, containerRe
 				onScroll: (e) => setShowScrollButton(handleScroll(e.currentTarget)),
 				className: "flex-1 overflow-y-auto scroll-smooth",
 				children: /* @__PURE__ */ jsxs("div", {
-					className: "mx-auto flex w-full max-w-3xl flex-col gap-6 px-4 py-6",
+					className: compact ? "flex w-full flex-col gap-5 px-7 py-4" : "mx-auto flex w-full max-w-3xl flex-col gap-6 px-4 py-6",
 					children: [
 						messages.map((msg, msgIdx) => {
 							const isLastMessage = msgIdx === messages.length - 1;
@@ -648,7 +975,10 @@ function Conversation({ messages, status, error, htmlByUserMsgIndex, containerRe
 										stiffness: 500,
 										damping: 30
 									},
-									children: /* @__PURE__ */ jsx(UserMessage, { html: html ?? sanitizeUserHtml(fallbackText) })
+									children: /* @__PURE__ */ jsx(UserMessage, {
+										html: html ?? sanitizeUserHtml(fallbackText),
+										density
+									})
 								}, msg.id);
 							}
 							return /* @__PURE__ */ jsx(motion.div, {
@@ -668,7 +998,14 @@ function Conversation({ messages, status, error, htmlByUserMsgIndex, containerRe
 								children: /* @__PURE__ */ jsx(AssistantMessage, {
 									msg,
 									isLastMessage,
-									status
+									status,
+									density,
+									onChoose: onChoose && ((option) => onChoose(msg.id, option)),
+									canChoose: isLastMessage && status === "ready",
+									onApprovePlan: onApprovePlan && ((planId) => onApprovePlan(msg.id, planId)),
+									onChangePlan: onChangePlan && ((planId) => onChangePlan(msg.id, planId)),
+									latestPlanId,
+									canApprovePlan: status === "ready"
 								})
 							}, msg.id);
 						}),
@@ -690,8 +1027,8 @@ function Conversation({ messages, status, error, htmlByUserMsgIndex, containerRe
 								stiffness: 500,
 								damping: 30
 							},
-							className: "text-destructive bg-destructive/10 w-fit rounded-lg px-3 py-2 text-sm",
-							children: error.message.includes("429") || error.message.includes("Too Many") ? "Easy there, speed racer! You've hit the rate limit. Give it a minute and try again." : error.message.includes("503") || error.message.includes("not configured") ? "AI assistant is not configured." : `Something went wrong — ${error.message}`
+							className: cn("text-destructive bg-destructive/10 w-fit rounded-lg px-3 py-2 text-sm", compact && "ml-10"),
+							children: assistantErrorMessage(error)
 						}, "error") }),
 						/* @__PURE__ */ jsx(AnimatePresence, { children: status === "submitted" && /* @__PURE__ */ jsx(motion.div, {
 							initial: {
@@ -711,7 +1048,7 @@ function Conversation({ messages, status, error, htmlByUserMsgIndex, containerRe
 								stiffness: 500,
 								damping: 30
 							},
-							className: "flex justify-start",
+							className: cn("flex justify-start", compact && "pl-10"),
 							children: /* @__PURE__ */ jsx(LoadingDots, {})
 						}, "loading") }),
 						/* @__PURE__ */ jsx("div", { ref: bottomRef })
@@ -724,7 +1061,7 @@ function Conversation({ messages, status, error, htmlByUserMsgIndex, containerRe
 				onJump: scrollToTurn
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: "relative shrink-0 px-4 pb-4",
+				className: cn("relative shrink-0", compact ? "px-7 pb-6" : "px-4 pb-4"),
 				children: [/* @__PURE__ */ jsx(ScrollToBottomButton, {
 					show: showScrollButton && messages.length > 0,
 					onClick: () => {
@@ -733,13 +1070,23 @@ function Conversation({ messages, status, error, htmlByUserMsgIndex, containerRe
 						bottomRef.current?.scrollIntoView({ behavior: "smooth" });
 					}
 				}), /* @__PURE__ */ jsx("div", {
-					className: "mx-auto w-full max-w-3xl",
+					className: compact ? "w-full" : "mx-auto w-full max-w-3xl",
 					children: footer
 				})]
 			})
 		]
 	});
 }
+/** The id of the newest plan part in the conversation, if any. */
+function newestPlanId(messages) {
+	for (let m = messages.length - 1; m >= 0; m--) {
+		const parts = messages[m]?.parts ?? [];
+		for (let p = parts.length - 1; p >= 0; p--) {
+			const part = parts[p];
+			if (part.type === "data-plan" && part.id) return part.id;
+		}
+	}
+}
 //#endregion
 //#region src/components/features/assistant/components/brain-glyph.tsx
 /**
@@ -872,15 +1219,11 @@ function ChatRail({ historyOpen, onNewChat, onToggleHistory }) {
 //#endregion
 //#region src/components/features/assistant/components/sidebar/history-panel.tsx
 function downloadChat(chat) {
-	const lines = chat.messages.map((msg) => {
-		return `## ${msg.role === "user" ? "You" : "Assistant"}\n\n${msg.parts.filter(isTextUIPart).map((p) => p.text).join("\n")}`;
-	});
-	const markdown = `# ${chat.title}\n\n${lines.join("\n\n---\n\n")}\n`;
-	const blob = new Blob([markdown], { type: "text/markdown" });
+	const blob = new Blob([chatToMarkdown(chat)], { type: "text/markdown" });
 	const url = URL.createObjectURL(blob);
 	const a = document.createElement("a");
 	a.href = url;
-	a.download = `${chat.title.replace(/[^a-z0-9]+/gi, "-").toLowerCase()}.md`;
+	a.download = chatFileName(chat.title);
 	a.click();
 	URL.revokeObjectURL(url);
 }
@@ -1068,7 +1411,7 @@ const PANEL_SPRING = {
 	stiffness: 400,
 	damping: 32
 };
-function AssistantWorkspace({ orientation = "horizontal", onClose, config, userName, title, messages, status, error, isReady, chatList, currentChatId, sidebarHeader, editor, htmlByUserMsgIndex, bottomRef, containerRef, userScrolledUpRef, onSend, onStop, onRetry, onNewChat, onLoadChat, onDeleteChat, onArchiveChat, onUnarchiveChat, confirmDelete, onSuggestion, modelId, effortId, onModelChange, onEffortChange, micSupported, micListening, micFrequencyData, onMicToggle, historyOpen, onToggleHistory }) {
+function AssistantWorkspace({ orientation = "horizontal", onClose, config, userName, title, messages, status, error, isReady, chatList, currentChatId, sidebarHeader, editor, htmlByUserMsgIndex, bottomRef, containerRef, userScrolledUpRef, onSend, onStop, onRetry, onNewChat, onLoadChat, onDeleteChat, onArchiveChat, onUnarchiveChat, confirmDelete, onSuggestion, onChoose, onApprovePlan, onChangePlan, modelId, effortId, onModelChange, onEffortChange, micSupported, micListening, micFrequencyData, onMicToggle, historyOpen, onToggleHistory }) {
 	const hasMessages = messages.length > 0;
 	const isVertical = orientation === "vertical";
 	const promptCard = /* @__PURE__ */ jsx(PromptCard, {
@@ -1137,7 +1480,10 @@ function AssistantWorkspace({ orientation = "horizontal", onClose, config, userN
 		containerRef,
 		bottomRef,
 		userScrolledUpRef,
-		footer: promptCard
+		footer: promptCard,
+		onChoose,
+		onApprovePlan,
+		onChangePlan
 	}) : /* @__PURE__ */ jsx(EmptyState, {
 		name: userName,
 		isReady,
@@ -1245,4 +1591,4 @@ function AssistantWorkspace({ orientation = "horizontal", onClose, config, userN
 	});
 }
 //#endregion
-export { AssistantConfigProvider, AssistantMessage, AssistantWorkspace, BrainGlyph, ChatRail, Conversation, DEFAULT_ASSISTANT_CONFIG, EmptyState, Equalizer, HistoryPanel, LoadingDots, ModelSelector, PromptCard, ScrollToBottomButton, ThinkingBlock, TurnRail, UserMessage, defaultRenderLink, formatRelativeTime, sanitizeUserHtml, useAssistantConfig, useTurnRail };
+export { AssistantChoiceChips, AssistantConfigProvider, AssistantMessage, AssistantPlanCard, AssistantWorkspace, BrainGlyph, CHOICES_PART_TYPE, ChatRail, Conversation, DEFAULT_ASSISTANT_CONFIG, EmptyState, Equalizer, HistoryPanel, LoadingDots, ModelSelector, PLAN_PART_TYPE, PromptCard, ScrollToBottomButton, ThinkingBlock, TurnRail, UserMessage, defaultRenderLink, formatRelativeTime, sanitizeUserHtml, useAssistantConfig, useTurnRail };

package/dist/components/features/assistant/components/assistant-workspace.d.ts

@@ -1,7 +1,7 @@
 import type { Editor } from '@tiptap/react';
 import type { UIMessage } from 'ai';
 import type { MouseEvent as ReactMouseEvent, ReactNode, RefObject } from 'react';
-import type { AssistantConfig, ChatSummary, EffortId } from '../types';
+import type { AssistantChoiceOption, AssistantConfig, ChatSummary, EffortId } from '../types';
 export type AssistantWorkspaceOrientation = 'horizontal' | 'vertical';
 /**
  * Presentational, props-driven assistant layout: left rail + collapsible
@@ -66,6 +66,12 @@ export interface AssistantWorkspaceProps {
     /** Confirm (deletion can't be undone) before calling `onDeleteChat`. */
     confirmDelete?: boolean;
     onSuggestion: (text: string) => void;
+    /** Called when the person picks an option of a question asked as buttons (see `Conversation`). */
+    onChoose?: (messageId: string, option: AssistantChoiceOption) => void;
+    /** Called when the person approves a plan card (see `Conversation`). */
+    onApprovePlan?: (messageId: string, planId: string) => void;
+    /** Called when the person clicks "Change something" on a plan card. */
+    onChangePlan?: (messageId: string, planId: string) => void;
     modelId: string;
     effortId: EffortId;
     onModelChange: (id: string) => void;
@@ -77,4 +83,4 @@ export interface AssistantWorkspaceProps {
     historyOpen: boolean;
     onToggleHistory: () => void;
 }
-export declare function AssistantWorkspace({ orientation, onClose, config, userName, title, messages, status, error, isReady, chatList, currentChatId, sidebarHeader, editor, htmlByUserMsgIndex, bottomRef, containerRef, userScrolledUpRef, onSend, onStop, onRetry, onNewChat, onLoadChat, onDeleteChat, onArchiveChat, onUnarchiveChat, confirmDelete, onSuggestion, modelId, effortId, onModelChange, onEffortChange, micSupported, micListening, micFrequencyData, onMicToggle, historyOpen, onToggleHistory, }: AssistantWorkspaceProps): import("react").JSX.Element;
+export declare function AssistantWorkspace({ orientation, onClose, config, userName, title, messages, status, error, isReady, chatList, currentChatId, sidebarHeader, editor, htmlByUserMsgIndex, bottomRef, containerRef, userScrolledUpRef, onSend, onStop, onRetry, onNewChat, onLoadChat, onDeleteChat, onArchiveChat, onUnarchiveChat, confirmDelete, onSuggestion, onChoose, onApprovePlan, onChangePlan, modelId, effortId, onModelChange, onEffortChange, micSupported, micListening, micFrequencyData, onMicToggle, historyOpen, onToggleHistory, }: AssistantWorkspaceProps): import("react").JSX.Element;

package/dist/components/features/assistant/components/composer/prompt-card.d.ts

@@ -1,5 +1,5 @@
 import type { Editor } from '@tiptap/react';
-import type { EffortId } from '../../types';
+import type { ConversationDensity, EffortId } from '../../types';
 interface PromptCardProps {
     editor: Editor | null;
     isReady: boolean;
@@ -15,7 +15,12 @@ interface PromptCardProps {
     isListening?: boolean;
     frequencyData?: number[];
     onMicToggle?: () => void;
+    /**
+     * `compact` is one row: the input and its buttons side by side in a plain
+     * bordered field, with an outline send button. For a chat embedded in a page.
+     */
+    density?: ConversationDensity;
     className?: string;
 }
-export declare function PromptCard({ editor, isReady, canRetry, onSend, onStop, onRetry, modelId, effortId, onModelChange, onEffortChange, speechSupported, isListening, frequencyData, onMicToggle, className, }: PromptCardProps): import("react").JSX.Element;
+export declare function PromptCard({ editor, isReady, canRetry, onSend, onStop, onRetry, modelId, effortId, onModelChange, onEffortChange, speechSupported, isListening, frequencyData, onMicToggle, density, className, }: PromptCardProps): import("react").JSX.Element;
 export {};

package/dist/components/features/assistant/components/conversation/conversation.d.ts

@@ -1,5 +1,6 @@
 import type { UIMessage } from 'ai';
 import type { RefObject } from 'react';
+import type { AssistantChoiceOption, ConversationDensity } from '../../types';
 interface ConversationProps {
     messages: UIMessage[];
     status: string;
@@ -10,6 +11,27 @@ interface ConversationProps {
     userScrolledUpRef: RefObject<boolean>;
     /** The docked prompt card, pinned to the bottom. */
     footer: React.ReactNode;
+    /**
+     * `default` is the full workspace layout. `compact` is for a conversation
+     * embedded in another page: it fills the host's width with 1.75rem side
+     * padding, puts an avatar beside each assistant turn and tightens markdown
+     * spacing.
+     */
+    density?: ConversationDensity;
+    /**
+     * Called when the person picks an option of a question the assistant asked
+     * as buttons, with the message it belongs to. Only the latest turn's
+     * question can be answered, and only once it has finished streaming.
+     */
+    onChoose?: (messageId: string, option: AssistantChoiceOption) => void;
+    /**
+     * Called when the person approves a plan card, with the message it is in
+     * and the plan's id. Only the newest plan can be approved, and only while
+     * the conversation is idle.
+     */
+    onApprovePlan?: (messageId: string, planId: string) => void;
+    /** Called when the person clicks "Change something" on a plan card. */
+    onChangePlan?: (messageId: string, planId: string) => void;
 }
-export declare function Conversation({ messages, status, error, htmlByUserMsgIndex, containerRef, bottomRef, userScrolledUpRef, footer, }: ConversationProps): import("react").JSX.Element;
+export declare function Conversation({ messages, status, error, htmlByUserMsgIndex, containerRef, bottomRef, userScrolledUpRef, footer, density, onChoose, onApprovePlan, onChangePlan, }: ConversationProps): import("react").JSX.Element;
 export {};

package/dist/components/features/assistant/components/message/assistant-message.d.ts

@@ -1,9 +1,35 @@
 import type { UIMessage } from 'ai';
+import type { AssistantChoiceOption, ConversationDensity } from '../../types';
 import 'streamdown/styles.css';
 interface AssistantMessageProps {
     msg: UIMessage;
     isLastMessage: boolean;
     status: string;
+    /**
+     * `compact` puts the assistant avatar beside the turn, tightens markdown
+     * spacing (headings render at body size), sets inline code as plain mono
+     * text, and leaves out the copy and download actions (a host's own
+     * `messageActions` still render).
+     */
+    density?: ConversationDensity;
+    /**
+     * Called when the person picks an option of a question in this turn (a
+     * `data-choices` part). The host sends the option's label as their reply.
+     */
+    onChoose?: (option: AssistantChoiceOption) => void;
+    /**
+     * Whether this turn's question can still be answered: the host passes true
+     * only for the latest turn once it has finished streaming.
+     */
+    canChoose?: boolean;
+    /** Called when the person approves a plan in this turn (a `data-plan` part), with its id. */
+    onApprovePlan?: (planId: string) => void;
+    /** Called when the person asks to change a plan in this turn. */
+    onChangePlan?: (planId: string) => void;
+    /** The id of the newest plan in the conversation; any other reads as replaced. */
+    latestPlanId?: string;
+    /** Whether a plan can be approved now: the conversation is idle. */
+    canApprovePlan?: boolean;
 }
-export declare function AssistantMessage({ msg, isLastMessage, status }: AssistantMessageProps): import("react").JSX.Element;
+export declare function AssistantMessage({ msg, isLastMessage, status, density, onChoose, canChoose, onApprovePlan, onChangePlan, latestPlanId, canApprovePlan, }: AssistantMessageProps): import("react").JSX.Element;
 export {};

package/dist/components/features/assistant/components/message/choice-chips.d.ts

@@ -0,0 +1,17 @@
+import type { AssistantChoiceOption, AssistantChoicesData } from '../../types';
+export interface AssistantChoiceChipsProps {
+    data: AssistantChoicesData;
+    /**
+     * Called with the option the person picked. Omit it, or pass `disabled`,
+     * for a question that can no longer be answered (an earlier turn, or one
+     * answered by typing instead).
+     */
+    onChoose?: (option: AssistantChoiceOption) => void;
+    disabled?: boolean;
+}
+/**
+ * A pick-one question as a row of buttons. Once an option is picked it stays
+ * marked with a check and the others fade, so a scrolled-back conversation
+ * still shows what was chosen.
+ */
+export declare function AssistantChoiceChips({ data, onChoose, disabled }: AssistantChoiceChipsProps): import("react").JSX.Element;

package/dist/components/features/assistant/components/message/index.d.ts

@@ -1,4 +1,6 @@
 export * from './assistant-message';
+export * from './choice-chips';
 export * from './loading-dots';
+export * from './plan-card';
 export * from './thinking-block';
 export * from './user-message';

package/dist/components/features/assistant/components/message/plan-card.d.ts

@@ -0,0 +1,20 @@
+import type { AssistantPlanData } from '../../types';
+export interface AssistantPlanCardProps {
+    data: AssistantPlanData;
+    /** Whether this is the newest plan in the conversation; an older one reads as replaced. */
+    latest?: boolean;
+    /** Whether Approve can be clicked now (the conversation is idle). */
+    canApprove?: boolean;
+    onApprove?: () => void;
+    /** "Change something": the host puts the person in the composer to say what. */
+    onChange?: () => void;
+    /** The clock, for tests. */
+    now?: number;
+}
+/**
+ * A plan the assistant settled, as a card: one row per resource with what it
+ * does, the YAML and differences on request, and the person's two answers.
+ * Nothing is created until they click Approve, and the card then shows how it
+ * went.
+ */
+export declare function AssistantPlanCard({ data, latest, canApprove, onApprove, onChange, now, }: AssistantPlanCardProps): import("react").JSX.Element;

package/dist/components/features/assistant/components/message/user-message.d.ts

@@ -1,4 +1,9 @@
-/** A user's message — a right-aligned bubble rendering the sanitized input HTML. */
-export declare function UserMessage({ html }: {
+import type { ConversationDensity } from '../../types';
+interface UserMessageProps {
     html: string;
-}): import("react").JSX.Element;
+    /** `compact` uses a lighter bubble with even corners. */
+    density?: ConversationDensity;
+}
+/** A user's message — a right-aligned bubble rendering the sanitized input HTML. */
+export declare function UserMessage({ html, density }: UserMessageProps): import("react").JSX.Element;
+export {};

package/dist/components/features/assistant/index.d.ts

@@ -7,5 +7,6 @@ export * from './components/message';
 export * from './components/sidebar';
 export { AssistantConfigProvider, DEFAULT_ASSISTANT_CONFIG, defaultRenderLink, useAssistantConfig, } from './context';
 export { useTurnRail } from './hooks';
-export type { AssistantConfig, ChatSummary, EffortId, EffortOption, LinkRenderProps, ModelOption, ModelSelectorConfig, Turn, } from './types';
+export { CHOICES_PART_TYPE, PLAN_PART_TYPE } from './types';
+export type { AssistantAppliedResource, AssistantChoiceIcon, AssistantChoiceOption, AssistantChoicesData, AssistantConfig, AssistantPlanData, AssistantPlanResource, AssistantPlanStatus, ChatSummary, ConversationDensity, EffortId, EffortOption, LinkRenderProps, ModelOption, ModelSelectorConfig, Turn, } from './types';
 export { formatRelativeTime, sanitizeUserHtml } from './utils';

package/dist/components/features/assistant/types.d.ts

@@ -1,71 +1,81 @@
-import type { DynamicToolUIPart, ToolUIPart, UIMessage } from 'ai';
+import type { AssistantConfig as CoreAssistantConfig, LinkRenderProps as CoreLinkRenderProps } from '@datum-cloud/datum-ui-assistant-core';
 import type { ReactNode } from 'react';
-export type EffortId = 'low' | 'medium' | 'high';
-export interface ModelOption {
-    /** Stable id sent to the server; must match the allowlist in server/routes/assistant.ts. */
+export type { ChatSummary, EffortId, EffortOption, ModelOption, ModelSelectorConfig, Turn, } from '@datum-cloud/datum-ui-assistant-core';
+/** Props passed to a `renderLink` implementation (a link in the assistant's markdown). */
+export type LinkRenderProps = CoreLinkRenderProps<ReactNode>;
+/**
+ * Everything that differs between host apps (staff vs cloud). Supplied once at
+ * the workspace root and read by leaf components via `useAssistantConfig()`, so
+ * the presentational pieces stay generic and shell-agnostic.
+ */
+export type AssistantConfig = CoreAssistantConfig<ReactNode>;
+/**
+ * How tightly a conversation is laid out. `default` is the full assistant
+ * workspace; `compact` suits a conversation embedded in another page: it fills
+ * the host's width, puts an avatar beside each assistant turn, tightens
+ * markdown spacing and uses a one-line composer.
+ */
+export type ConversationDensity = 'default' | 'compact';
+/** The message part type that carries a pick-one question (see {@link AssistantChoicesData}). */
+export declare const CHOICES_PART_TYPE = "data-choices";
+/** Icon names a choice option may carry. Anything else renders with no icon. */
+export type AssistantChoiceIcon = 'clock' | 'container' | 'database' | 'domain' | 'globe' | 'laptop' | 'location' | 'network' | 'server' | 'shield';
+/** One answer to a pick-one question. `label` is sent back as the person's reply. */
+export interface AssistantChoiceOption {
     id: string;
     label: string;
+    icon?: AssistantChoiceIcon | string;
 }
-export interface EffortOption {
-    id: EffortId;
-    label: string;
-}
-/** One submitted prompt — the unit tracked by the right-edge turn rail. */
-export interface Turn {
-    id: string;
-    text: string;
+/**
+ * The data of a `data-choices` message part: a question the assistant put to
+ * the person as buttons. `selectedId` is set once they pick one.
+ */
+export interface AssistantChoicesData {
+    question: string;
+    options: AssistantChoiceOption[];
+    selectedId?: string;
 }
-/** Props passed to a `renderLink` implementation (a link in the assistant's markdown). */
-export interface LinkRenderProps {
-    href?: string;
-    children?: ReactNode;
+/** The message part type that carries a plan the person can approve (see {@link AssistantPlanData}). */
+export declare const PLAN_PART_TYPE = "data-plan";
+/** One resource a plan creates or changes, in apply order. */
+export interface AssistantPlanResource {
+    kind: string;
+    name: string;
+    namespace?: string;
+    action: 'create' | 'update' | string;
+    /** One plain-language line on what it does for the person. */
+    summary?: string;
+    /** What an update changes, one line per change. */
+    diff?: string[];
+    /** The manifest the plan covers, as YAML. */
+    manifest: string;
 }
-export interface ModelSelectorConfig {
-    models: ModelOption[];
-    efforts: EffortOption[];
-    defaultModelId: string;
-    defaultEffortId: EffortId;
+/** One resource applying a plan created or changed. */
+export interface AssistantAppliedResource {
+    action: string;
+    kind: string;
+    name: string;
+    namespace?: string;
 }
 /**
- * Everything that differs between host apps (staff vs cloud). Supplied once at
- * the workspace root and read by leaf components via `useAssistantConfig()`, so
- * the presentational pieces stay generic and shell-agnostic.
+ * Where a plan is. `pending` waits for the person; `applying` is their
+ * approval in flight; `applied` and `failed` are its outcome. Expired and
+ * replaced are not stored: the card works them out from `expiresAt` and from
+ * whether a newer plan exists.
  */
-export interface AssistantConfig {
-    /** Greeting line on the empty state, e.g. "Hey there, Jacob". */
-    greeting: (name?: string) => string;
-    /** Starter prompts on the empty state. */
-    suggestions: string[];
-    /** Whether to render the assistant's reasoning ("thinking") blocks. */
-    showReasoning: boolean;
-    /** Model + effort picker config, or `false` to hide the control. */
-    modelSelector: ModelSelectorConfig | false;
-    /** Tool name → progress label ("Searching users…"). Host-specific tool set. */
-    toolLabels: Record<string, string>;
-    /** Renders links inside the assistant's markdown (internal routes, external, host-specific icons). */
-    renderLink: (props: LinkRenderProps) => ReactNode;
-    /** Override the per-message action toolbar (defaults to copy + download). */
-    messageActions?: (msg: UIMessage) => ReactNode;
-    /**
-     * Renders a completed tool call inline, in message order. Return a falsy value
-     * to leave that tool invisible — the default for every tool, since most only
-     * feed the model. Hosts use this to surface a result as UI (cloud-portal turns
-     * an `openSupportTicket` result into a button).
-     */
-    renderToolOutput?: (part: ToolUIPart | DynamicToolUIPart, msg: UIMessage) => ReactNode;
-}
+export type AssistantPlanStatus = 'pending' | 'applying' | 'applied' | 'failed';
 /**
- * Minimal shape the history list needs. Host apps pass their own richer chat
- * objects (they're structurally compatible) — persistence lives in the host.
+ * The data of a `data-plan` message part: a change the assistant settled and
+ * the token that applies exactly it. The part's `id` names the plan.
  */
-export interface ChatSummary {
-    id: string;
-    title: string;
-    updatedAt: number;
-    messages: UIMessage[];
-    /**
-     * Archived (hidden but restorable). Only honoured when the host passes
-     * `onArchiveChat`; otherwise every chat is listed regardless of this flag.
-     */
-    archived?: boolean;
+export interface AssistantPlanData {
+    token: string;
+    /** When the plan stops being accepted, RFC 3339. */
+    expiresAt: string;
+    resources: AssistantPlanResource[];
+    status: AssistantPlanStatus;
+    /** When the person approved it, RFC 3339. */
+    approvedAt?: string;
+    applied?: AssistantAppliedResource[];
+    error?: string;
 }

package/dist/components/features/assistant/utils/format-relative-time.d.ts

@@ -1,2 +1,2 @@
-/** Human-friendly relative timestamp for the chat history list. */
-export declare function formatRelativeTime(timestamp: number): string;
+/** Human-friendly relative timestamp for the chat history list (shared with React Native). */
+export { formatRelativeTime } from '@datum-cloud/datum-ui-assistant-core';

package/dist/index.mjs

@@ -41,7 +41,7 @@ import { t as Switch } from "./switch-BaR-Vna4.mjs";
 import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "./table/index.mjs";
 import { Tabs, TabsContent, TabsLinkTrigger, TabsList, TabsTrigger } from "./tabs/index.mjs";
 import { t as Textarea } from "./textarea-DiSGxCBO.mjs";
-import { a as ListItem, c as Title, d as titleVariants, i as List, l as paragraphVariants, n as Code, o as Paragraph, r as Link, s as Text, t as Blockquote, u as textVariants } from "./typography-q71iTG72.mjs";
+import { a as ListItem, c as Title, d as titleVariants, i as List, l as paragraphVariants, n as Code, o as Paragraph, r as Link, s as Text, t as Blockquote, u as textVariants } from "./typography-B1bpHKmV.mjs";
 import { t as VisuallyHidden } from "./visuallyhidden-D7L_qs8b.mjs";
 import { a as hasActiveDescendant, i as findItemByHref, n as NavMenu, o as isNavItemActive, r as NavMenuItem, s as normalizePath, t as AppNavigation } from "./app-navigation-BB_NLEWv.mjs";
 import { n as EASE, t as DURATION } from "./motion-DvGRWdsm.mjs";
@@ -79,7 +79,7 @@ import { t as MoreActions } from "./more-actions-C3DYWO0a.mjs";
 import { configureProgress, startProgress, stopProgress } from "./nprogress/index.mjs";
 import { t as PageTitle } from "./page-title-ipRWEOeM.mjs";
 import { t as RichTextContent } from "./rich-text-content-DNonBD39.mjs";
-import { n as useRichTextEditor, t as RichTextEditor } from "./rich-text-editor-DP5JnAoO.mjs";
+import { n as useRichTextEditor, t as RichTextEditor } from "./rich-text-editor-CP1YyxMR.mjs";
 import { t as defineStepper } from "./stepper-dNvkipop.mjs";
 import { t as TagsInput } from "./tag-input-c9OvWTSe.mjs";
 import { _ as RedisTaskStorage, a as TaskPanelItem, b as createProjectMetadata, c as TaskPanelHeader, d as useCurrentScope, f as useTasksWithLabels, g as detectStorage, h as TaskQueue, i as TaskPanel, l as getContextLabel, m as TaskQueueProvider, n as TaskSummaryDialog, o as TaskPanelCounter, p as useTaskQueue, r as TaskQueueTrigger, s as TaskPanelActions, t as TaskQueueDropdown, u as matchesCurrentScope, v as LocalTaskStorage, x as createUserMetadata, y as createOrgMetadata } from "./task-queue-dropdown-CHPP5WIm.mjs";

package/dist/rich-text-editor/index.mjs

@@ -1,3 +1,3 @@
 import { t as RichTextContent } from "../rich-text-content-DNonBD39.mjs";
-import { n as useRichTextEditor, t as RichTextEditor } from "../rich-text-editor-DP5JnAoO.mjs";
+import { n as useRichTextEditor, t as RichTextEditor } from "../rich-text-editor-CP1YyxMR.mjs";
 export { RichTextContent, RichTextEditor, useRichTextEditor };

package/dist/{rich-text-editor-DP5JnAoO.mjs → rich-text-editor-CP1YyxMR.mjs}

@@ -8,7 +8,7 @@ import { BoldIcon, ItalicIcon, LinkIcon, StrikethroughIcon, UnderlineIcon, Unlin
 import { createContext, use, useCallback, useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import CharacterCount from "@tiptap/extension-character-count";
-import Link from "@tiptap/extension-link";
+import Link$1 from "@tiptap/extension-link";
 import Placeholder from "@tiptap/extension-placeholder";
 import Underline from "@tiptap/extension-underline";
 import { EditorContent, useEditor } from "@tiptap/react";
@@ -191,7 +191,7 @@ function RichTextEditorRoot({ content, onChange, onBlur, autoFocus = false, plac
 				horizontalRule: false
 			}),
 			Underline,
-			Link.configure({
+			Link$1.configure({
 				autolink: true,
 				openOnClick: false,
 				validate: (url) => /^https?:\/\/|^mailto:/.test(url),

package/dist/styles/themes/alpha.css

@@ -589,7 +589,7 @@ TAILWIND CUSTOM UTILITIES FOR THEME
 /* ========================================
 TYPE SCALE
 One named scale shared by raw `text-*` utilities and the Typography
-components. See Storybook "Docs/Type Scale" for the rules.
+components. See Storybook "Foundations/Type Scale" for the rules.
 
 Deliberately a plain `@theme`, not `@theme inline`: utilities must read
 `var(--text-*)` at runtime so the display steps below can shrink per

package/dist/typography/index.mjs

@@ -1,2 +1,2 @@
-import { a as ListItem, c as Title, d as titleVariants, i as List, l as paragraphVariants, n as Code, o as Paragraph, r as Link, s as Text, t as Blockquote, u as textVariants } from "../typography-q71iTG72.mjs";
+import { a as ListItem, c as Title, d as titleVariants, i as List, l as paragraphVariants, n as Code, o as Paragraph, r as Link, s as Text, t as Blockquote, u as textVariants } from "../typography-B1bpHKmV.mjs";
 export { Blockquote, Code, Link, List, ListItem, Paragraph, Text, Title, paragraphVariants, textVariants, titleVariants };

package/dist/{typography-q71iTG72.mjs → typography-B1bpHKmV.mjs}

@@ -162,7 +162,7 @@ function Paragraph({ className, size, spacing, as = "p", children, ...props }) {
 		...props
 	}, children);
 }
-function Link({ className, children, href, target = "_self", rel, ...props }) {
+function Link$1({ className, children, href, target = "_self", rel, ...props }) {
 	return /* @__PURE__ */ jsx("a", {
 		href,
 		target,
@@ -193,7 +193,7 @@ function Blockquote({ className, children, ...props }) {
 		children
 	});
 }
-function Code({ className, as = "code", children, ...props }) {
+function Code$1({ className, as = "code", children, ...props }) {
 	if (as === "pre") return /* @__PURE__ */ jsx("pre", {
 		className: cn("bg-muted relative overflow-x-auto rounded p-4 font-mono text-sm", className),
 		...props,
@@ -206,4 +206,4 @@ function Code({ className, as = "code", children, ...props }) {
 	});
 }
 //#endregion
-export { ListItem as a, Title as c, titleVariants as d, List as i, paragraphVariants as l, Code as n, Paragraph as o, Link as r, Text as s, Blockquote as t, textVariants as u };
+export { ListItem as a, Title as c, titleVariants as d, List as i, paragraphVariants as l, Code$1 as n, Paragraph as o, Link$1 as r, Text as s, Blockquote as t, textVariants as u };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@datum-cloud/datum-ui",
   "type": "module",
-  "version": "3.5.0",
+  "version": "3.7.0",
   "license": "MIT",
   "repository": {
     "url": "https://github.com/datum-cloud/datum-ui"
@@ -621,7 +621,8 @@
     "cmdk": "^1.1.1",
     "isomorphic-dompurify": "^3.22.0",
     "tailwind-merge": "^3.6.0",
-    "tw-animate-css": "^1.4.0"
+    "tw-animate-css": "^1.4.0",
+    "@datum-cloud/datum-ui-assistant-core": "^0.1.0"
   },
   "devDependencies": {
     "@conform-to/react": "^1.21.0",