@keboola/design 13.1.3 → 14.0.0

package/dist/{AIKit-BVCWP9Ks.js → AIKit-BRSZ3nY7.js}

@@ -1,29 +1,69 @@
-import { cn } from "./classNames-BzrkDnOD.js";
-import { Tooltip, TooltipProvider } from "./utils-Bd28bWgm.js";
-import { AlertCircle, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Ban, BarChart3, Bell, Bug, Calendar, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Circle, CircleAlert, CircleCheck, CircleHelp, CirclePause, CirclePlay, CirclePlus, CircleStop, CircleX, Clock, Cog, Copy, Database, Download, Ellipsis, ExternalLink, Eye, File, FilePen, FileText, Flag, Folder, Gauge, GitBranch, GitMerge, GitPullRequest, Globe, Hand, History, Hourglass, Info, Key, Layers, LineChart, Link, List, ListChecks, Loader2, Lock, Mail, Maximize2, Minimize2, Minus, Pencil, Play, Plus, RefreshCw, Rocket, RotateCcw, RotateCw, Save, Search, Send, Settings, Sparkles, Star, Table, ThumbsDown, ThumbsUp, Trash2, TriangleAlert, Upload, User, Users, WandSparkles, Warehouse, Workflow, X, XCircle, Zap } from "./icons-wcA70iQx.js";
-import { Button } from "./Button-B21oVcPU.js";
+import { cn } from "./classNames-DcGnTh2N.js";
+import { Tooltip, TooltipProvider, isMac } from "./utils-LQ4jJA-9.js";
+import { AlertCircle, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Ban, BarChart3, Bell, BookOpen, Bookmark, Box, Bug, Calendar, ChartBar, ChartPie, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Circle, CircleAlert, CircleCheck, CircleHelp, CirclePause, CirclePlay, CirclePlus, CircleStop, CircleX, Clock, Cloud, Cog, Copy, Database, Download, Ellipsis, ExternalLink, Eye, File, FilePen, FileText, Filter, Flag, Folder, Gauge, GitBranch, GitMerge, GitPullRequest, Globe, Hand, HardDrive, History, Hourglass, Info, Key, Layers, Lightbulb, LineChart, Link, List, ListChecks, Loader2, LoaderCircle, Lock, Mail, Maximize2, Minimize2, Minus, Package, Pause, Pencil, Pin, Play, Plus, Quote, RefreshCw, Rocket, RotateCcw, RotateCw, Save, Search, Send, Server, Settings, Shield, Sparkles, Star, Table, ThumbsDown, ThumbsUp, Trash2, TrendingDown, TrendingUp, TriangleAlert, Upload, User, Users, WandSparkles, Warehouse, Workflow, Wrench, X, XCircle, Zap } from "./icons-ZIeZXXS7.js";
+import { Button } from "./Button-D2JqBAq7.js";
 import { ButtonGroup } from "./internal/components/ButtonGroup.js";
-import { ClipboardButton } from "./ClipboardButton-srUgWgwH.js";
-import { FullScreenModal, FullScreenModalBody, FullScreenModalHeader } from "./FullScreenModal-Cwnm8WdM.js";
+import { ClipboardButton } from "./ClipboardButton-DxvZG_H0.js";
+import { FullScreenModal, FullScreenModalBody, FullScreenModalHeader } from "./FullScreenModal-CUuAakh3.js";
 import { Truncated } from "./internal/components/Truncated.js";
-import { HoverCard } from "./HoverCard-B8OKu9XZ.js";
-import { Command } from "./Command-BQPiZCNz.js";
-import { TextInput } from "./TextInput-BWYXbfs4.js";
-import { Badge } from "./Badge-Dz0cj6rj.js";
+import { useStableCallback } from "./internal/hooks/useStableCallback.js";
+import { HoverCard } from "./HoverCard-BBdPYqEf.js";
+import { Command } from "./Command-T3MLRaen.js";
+import { TextInput } from "./TextInput-K2DSDs5O.js";
+import { Badge } from "./Badge-Ba3epgcI.js";
 import { Textarea } from "./internal/blocks/Textarea.js";
-import { Table as Table$1 } from "./Table-BaVT5Tkn.js";
+import { Kbd, keys } from "./Kbd-3YM7NQO4.js";
+import { Collapsible } from "./Collapsible-DD4xTL75.js";
+import { Alert } from "./Alert-CZ0dDsuk.js";
+import { Table as Table$1, tableAriaSort } from "./Table-CilEvpMq.js";
 import { DiagramSkeleton } from "./internal/blocks/DiagramShared/DiagramSkeleton.js";
-import { DiagramSource } from "./DiagramSource-C5_d8Gdj.js";
-import { Kbd, keys } from "./Kbd-J4n1J6i4.js";
+import { DiagramSource, makeResponsive } from "./svgTransforms-Hnvev3Vs.js";
+import { ZoomableSvg, toSvgFileContent } from "./ZoomableSvg-Dh1OstPN.js";
 import { Progress } from "./internal/components/Progress.js";
 import { digitFromKeyCode, useAltDigitHotkey } from "./internal/hooks/useAltDigitHotkey.js";
+import { createContext, isValidElement, use, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Slot } from "@radix-ui/react-slot";
-import { createContext, isValidElement, use, useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
 import { cva } from "class-variance-authority";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import TextareaAutosize from "react-textarea-autosize";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
+import DOMPurify from "dompurify";
+//#region src/blocks/AIKit/AnswerCommentInput.tsx
+const MAX_COMMENT_LENGTH = 2e3;
+/**
+* One-line follow-up to a thumbs-down.
+*
+* - Submits on Enter or blur, trimmed, and only when the text differs from the last one sent.
+* - Never submits an empty comment.
+*/
+const AnswerCommentInput = ({ placeholder, onSubmit }) => {
+	const [text, setText] = useState("");
+	const lastSubmittedRef = useRef("");
+	const submit = () => {
+		const comment = text.trim();
+		if (!comment || comment === lastSubmittedRef.current) return;
+		lastSubmittedRef.current = comment;
+		onSubmit(comment);
+	};
+	const handleKeyDown = (event) => {
+		if (event.key !== "Enter") return;
+		event.preventDefault();
+		submit();
+	};
+	return /* @__PURE__ */ jsx(TextInput, {
+		sizing: "small",
+		value: text,
+		onValueChange: setText,
+		onKeyDown: handleKeyDown,
+		onBlur: submit,
+		maxLength: MAX_COMMENT_LENGTH,
+		placeholder,
+		"aria-label": placeholder,
+		className: "tw:w-64 tw:max-w-full tw:[&_input]:text-ellipsis"
+	});
+};
+//#endregion
 //#region src/blocks/AIKit/AnswerActions.tsx
 const VOTE_BUTTONS = [{
 	vote: "up",
@@ -54,7 +94,7 @@ const SIZES = {
 * - A vote can be changed but not withdrawn; pressing the pressed one re-sends it.
 * - The caller owns the recorded vote and the write.
 */
-const AnswerActions = ({ copyText, vote, onVote, onCopy, actions, labels = DEFAULT_LABELS, confirmation, size = "small", layout = "inline" }) => {
+const AnswerActions = ({ copyText, vote, onVote, onCopy, actions, labels = DEFAULT_LABELS, confirmation, size = "small", layout = "inline", onDownComment, commentPlaceholder = "What was wrong? (optional)", onRegenerate, regenerateLabel = "Ask again" }) => {
 	const { button, gap } = SIZES[size];
 	const votes = VOTE_BUTTONS.map(({ vote: candidate, icon }) => {
 		const isRecorded = vote === candidate;
@@ -81,32 +121,176 @@ const AnswerActions = ({ copyText, vote, onVote, onCopy, actions, labels = DEFAU
 		variant: "invisible",
 		onClick: onCopy
 	}) : null;
+	const regenerate = onRegenerate ? /* @__PURE__ */ jsx(Tooltip, {
+		tooltip: regenerateLabel,
+		placement: "top",
+		triggerAsChild: true,
+		children: /* @__PURE__ */ jsx(Button, {
+			size: button,
+			variant: "invisible",
+			"aria-label": regenerateLabel,
+			onClick: onRegenerate,
+			children: /* @__PURE__ */ jsx(RotateCcw, { className: "tw:size-4" })
+		})
+	}) : null;
+	const comment = onDownComment && vote === "down" ? /* @__PURE__ */ jsx(AnswerCommentInput, {
+		placeholder: commentPlaceholder,
+		onSubmit: onDownComment
+	}) : null;
 	const said = confirmation ? /* @__PURE__ */ jsx("span", {
 		"aria-live": "polite",
 		className: "tw:ml-1 tw:text-xs tw:font-medium tw:text-foreground tw:empty:hidden tw:animate-in tw:fade-in tw:slide-in-from-left-1 tw:duration-300",
 		children: vote ? confirmation[vote] : ""
 	}) : null;
 	if (layout === "split") return /* @__PURE__ */ jsxs("div", {
-		className: "tw:flex tw:w-full tw:items-center tw:justify-between tw:gap-2",
-		children: [/* @__PURE__ */ jsxs(ButtonGroup, {
-			space: gap,
-			"aria-label": "Answer actions",
-			children: [votes, said]
-		}), /* @__PURE__ */ jsxs(ButtonGroup, {
-			space: gap,
-			children: [actions, copy]
-		})]
+		className: "tw:flex tw:w-full tw:flex-wrap tw:items-center tw:justify-between tw:gap-2",
+		children: [
+			/* @__PURE__ */ jsxs(ButtonGroup, {
+				space: gap,
+				"aria-label": "Answer actions",
+				children: [votes, said]
+			}),
+			comment,
+			/* @__PURE__ */ jsxs(ButtonGroup, {
+				space: gap,
+				children: [
+					actions,
+					regenerate,
+					copy
+				]
+			})
+		]
 	});
-	return /* @__PURE__ */ jsxs(ButtonGroup, {
+	const group = /* @__PURE__ */ jsxs(ButtonGroup, {
 		space: gap,
 		"aria-label": "Answer actions",
 		children: [
 			copy,
 			votes,
+			regenerate,
 			actions,
 			said
 		]
 	});
+	if (!comment) return group;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "tw:flex tw:flex-wrap tw:items-center tw:gap-2",
+		children: [group, comment]
+	});
+};
+//#endregion
+//#region src/blocks/AIKit/SourceChip.tsx
+const STATE_CLASSES = {
+	verified: "tw:border-solid tw:border-success/30 tw:bg-success/10 tw:text-foreground",
+	unverified: "tw:border-dashed tw:border-warning/60 tw:bg-warning/10 tw:text-foreground",
+	neutral: "tw:border-solid tw:border-border tw:bg-muted tw:text-foreground"
+};
+const STATE_WORD = {
+	verified: "verified",
+	unverified: "unverified"
+};
+const accessibleName = ({ kind, label, state = "neutral" }) => [[kind, label].filter(Boolean).join(" "), STATE_WORD[state]].filter(Boolean).join(", ");
+/**
+* One cited source in an answer's provenance row.
+*
+* - The verdict rides the border and the accessible name, not the visible text.
+* - A link when it has `href`, a button when it only has `onClick`, a plain label otherwise.
+* - A plain left click goes to `onClick`; modified clicks keep the link's own behaviour.
+*/
+const SourceChip = (props) => {
+	const { label, state = "neutral", icon, href, external, onClick, title, className } = props;
+	const classes = cn("tailwindcss-preflight tw:inline-flex tw:h-6 tw:max-w-64 tw:min-w-0 tw:items-center tw:gap-1 tw:rounded-md tw:border tw:px-2 tw:text-xs tw:no-underline", STATE_CLASSES[state], (href || onClick) && "tw:cursor-pointer tw:hover:bg-hover tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-ring", className);
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [icon && /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		className: "tw:inline-flex tw:shrink-0 tw:[&_svg]:size-3.5",
+		children: icon
+	}), /* @__PURE__ */ jsx("span", {
+		className: "tw:min-w-0 tw:truncate",
+		children: label
+	})] });
+	const common = {
+		"aria-label": accessibleName(props),
+		title,
+		"data-state": state
+	};
+	if (href) return /* @__PURE__ */ jsx("a", {
+		...common,
+		href,
+		target: external ? "_blank" : void 0,
+		rel: external ? "noopener noreferrer" : void 0,
+		className: classes,
+		onClick: (event) => {
+			const isModified = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
+			if (!onClick || isModified || event.button !== 0) return;
+			event.preventDefault();
+			onClick();
+		},
+		children: content
+	});
+	if (onClick) return /* @__PURE__ */ jsx("button", {
+		...common,
+		type: "button",
+		className: cn(classes, "tw:bg-clip-padding"),
+		onClick,
+		children: content
+	});
+	return /* @__PURE__ */ jsx("span", {
+		...common,
+		className: classes,
+		children: content
+	});
+};
+//#endregion
+//#region src/blocks/AIKit/AnswerSources.tsx
+const ANSWER_SOURCES_VISIBLE = 6;
+/**
+* The provenance row under an answer: where its figures came from.
+*
+* - Says "N unverified" once, instead of on every chip, so checked sources can look calm.
+* - Collapses past `visibleCount` behind a "+N more" toggle.
+* - Empty `sources` states that none were declared, which is itself information.
+*/
+const AnswerSources = ({ sources, label = "Sources", emptyLabel = "none declared", visibleCount = 6, footnote, className }) => {
+	const [isExpanded, setIsExpanded] = useState(false);
+	const isCollapsible = sources.length > visibleCount;
+	const shown = isCollapsible && !isExpanded ? sources.slice(0, visibleCount) : sources;
+	const unverifiedCount = sources.filter((source) => source.state === "unverified").length;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("tailwindcss-preflight tw:flex tw:flex-col tw:gap-1 tw:text-xs", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "tw:flex tw:flex-wrap tw:items-center tw:gap-1.5",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "tw:font-medium tw:text-muted-foreground",
+					children: label
+				}),
+				sources.length === 0 && /* @__PURE__ */ jsx("span", {
+					className: "tw:text-muted-foreground",
+					children: emptyLabel
+				}),
+				shown.map(({ id, ...chip }) => /* @__PURE__ */ jsx(SourceChip, { ...chip }, id)),
+				isCollapsible && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-expanded": isExpanded,
+					onClick: () => setIsExpanded((current) => !current),
+					className: "tw:cursor-pointer tw:border-0 tw:bg-transparent tw:p-0 tw:text-xs tw:text-muted-foreground tw:underline tw:hover:text-foreground",
+					children: isExpanded ? "Show fewer" : `+${sources.length - visibleCount} more`
+				}),
+				unverifiedCount > 0 && /* @__PURE__ */ jsxs("span", {
+					className: "tw:inline-flex tw:items-center tw:gap-1 tw:text-warning",
+					title: "No tool call in this turn touched these: the answer named them, nothing ran on them.",
+					children: [
+						/* @__PURE__ */ jsx(TriangleAlert, {
+							"aria-hidden": true,
+							className: "tw:size-3.5"
+						}),
+						unverifiedCount,
+						" unverified"
+					]
+				})
+			]
+		}), footnote]
+	});
 };
 //#endregion
 //#region src/blocks/AIKit/CollapsibleBody.tsx
@@ -185,23 +369,55 @@ const renderVariantIcon = (variant) => {
 	if (variant === "dismissed") return /* @__PURE__ */ jsx(XCircle, { className: "tw:size-3.5 tw:text-muted-foreground/50" });
 	return /* @__PURE__ */ jsx(CircleCheck, { className: "tw:size-3.5 tw:text-muted-foreground/50" });
 };
-const InlineStepLabel = ({ variant, children }) => /* @__PURE__ */ jsxs("div", {
-	className: "tw:flex tw:min-w-0 tw:items-center tw:gap-1",
-	children: [/* @__PURE__ */ jsx("div", {
-		className: "tw:relative tw:flex tw:size-5 tw:shrink-0 tw:items-center tw:justify-center tw:[background:var(--inline-step-surface,transparent)]",
-		children: renderVariantIcon(variant)
-	}), /* @__PURE__ */ jsx("div", {
-		className: "tw:flex tw:min-w-0 tw:flex-wrap tw:items-center tw:gap-x-1.5 tw:gap-y-1 tw:text-xs tw:font-medium tw:text-muted-foreground",
-		children
-	})]
-});
+const InlineStepLabel = ({ variant, children, meta, detail, defaultExpanded = false }) => {
+	const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+	const row = /* @__PURE__ */ jsxs("div", {
+		className: "tw:flex tw:min-w-0 tw:items-center tw:gap-1",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "tw:relative tw:flex tw:size-5 tw:shrink-0 tw:items-center tw:justify-center tw:[background:var(--inline-step-surface,transparent)]",
+			children: renderVariantIcon(variant)
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "tw:flex tw:min-w-0 tw:flex-wrap tw:items-center tw:gap-x-1.5 tw:gap-y-1 tw:text-xs tw:font-medium tw:text-muted-foreground",
+			children: [
+				children,
+				meta && /* @__PURE__ */ jsx("span", {
+					className: "tw:font-normal tw:text-muted-foreground/70",
+					children: meta
+				}),
+				detail && /* @__PURE__ */ jsx(Button, {
+					variant: "inline",
+					size: "small",
+					className: "tw:px-0",
+					"aria-expanded": isExpanded,
+					onClick: () => setIsExpanded((value) => !value),
+					children: isExpanded ? "Hide details" : "Details"
+				})
+			]
+		})]
+	});
+	if (!detail) return row;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "tw:flex tw:min-w-0 tw:flex-col tw:gap-1",
+		children: [row, isExpanded && /* @__PURE__ */ jsx("div", {
+			className: "tw:min-w-0 tw:pl-6 tw:text-xs",
+			children: detail
+		})]
+	});
+};
 //#endregion
 //#region src/blocks/AIKit/AnswerSummary.tsx
 const SECTION_LABELS = {
 	success: "Answered questions",
-	dismissed: "Dismissed questions"
+	dismissed: "Dismissed questions",
+	expired: "Expired questions"
 };
-const AnswerSummary = ({ items, variant = "success", noAnswerLabel = "No answer", onExpandToggle }) => {
+const STEP_VARIANT = {
+	success: "success",
+	dismissed: "dismissed",
+	expired: "dismissed"
+};
+const DEFAULT_STATUS_LABEL = { expired: "Expired" };
+const AnswerSummary = ({ items, variant = "success", statusLabel = DEFAULT_STATUS_LABEL[variant], statusMessage, noAnswerLabel = "No answer", onExpandToggle }) => {
 	const [isExpanded, setIsExpanded] = useState(false);
 	const [isClosing, setIsClosing] = useState(false);
 	const toggle = () => {
@@ -212,42 +428,144 @@ const AnswerSummary = ({ items, variant = "success", noAnswerLabel = "No answer"
 	};
 	const count = items.length;
 	const [firstItem] = items;
-	const label = count === 1 && firstItem ? firstItem.question : `${count} questions`;
+	const questionLabel = count === 1 && firstItem ? firstItem.question : `${count} questions`;
+	const label = statusLabel ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		questionLabel,
+		" ",
+		/* @__PURE__ */ jsx("span", {
+			className: "tw:font-normal",
+			children: statusLabel
+		})
+	] }) : questionLabel;
+	const stepVariant = STEP_VARIANT[variant];
 	return /* @__PURE__ */ jsxs("section", {
 		className: "tw:mt-4 tw:flex tw:flex-col",
 		"aria-label": SECTION_LABELS[variant],
 		children: [/* @__PURE__ */ jsx(CollapsibleStepHeader, {
 			isExpanded,
 			onToggle: toggle,
-			variant,
+			variant: stepVariant,
 			label
 		}), /* @__PURE__ */ jsx(CollapsibleBody, {
 			isExpanded,
 			isClosing,
 			onClosed: () => setIsClosing(false),
-			children: /* @__PURE__ */ jsx("div", {
+			children: /* @__PURE__ */ jsxs("div", {
 				className: "tw:flex tw:flex-col tw:gap-4 tw:pt-4 tw:pl-5",
-				children: items.map(({ question, answer }, index) => /* @__PURE__ */ jsxs("div", {
+				children: [statusMessage != null && /* @__PURE__ */ jsx("p", {
+					className: "tw:m-0 tw:text-xs tw:text-muted-foreground",
+					children: statusMessage
+				}), items.map(({ question, answer }, index) => /* @__PURE__ */ jsxs("div", {
 					className: "tw:flex tw:flex-col tw:gap-1",
 					children: [/* @__PURE__ */ jsx(InlineStepLabel, {
-						variant,
+						variant: stepVariant,
 						children: question
 					}), /* @__PURE__ */ jsx(InlineStepDetail, { children: answer && answer.length > 0 ? answer : noAnswerLabel })]
-				}, `${index}-${question}`))
+				}, `${index}-${question}`))]
 			})
 		})]
 	});
 };
 //#endregion
-//#region src/blocks/AIKit/ChatInlineIcon.tsx
+//#region src/blocks/AIKit/AttachmentChip.tsx
+const Lead = ({ status, thumbnailUrl }) => {
+	if (status === "uploading") return /* @__PURE__ */ jsx(LoaderCircle, {
+		"aria-hidden": true,
+		className: "tw:size-4 tw:shrink-0 tw:animate-spin"
+	});
+	if (status === "error") return /* @__PURE__ */ jsx(CircleAlert, {
+		"aria-hidden": true,
+		className: "tw:size-4 tw:shrink-0 tw:text-destructive"
+	});
+	if (thumbnailUrl) return /* @__PURE__ */ jsx("img", {
+		src: thumbnailUrl,
+		alt: "",
+		className: "tw:size-4 tw:shrink-0 tw:rounded-sm tw:object-cover"
+	});
+	return /* @__PURE__ */ jsx(FileText, {
+		"aria-hidden": true,
+		className: "tw:size-4 tw:shrink-0"
+	});
+};
 /**
-* The Lucide component each `icon:<name>` token draws.
+* A file attached to a message being composed.
 *
-* - Names are FontAwesome-solid ones, published as `CHAT_INLINE_ICON_NAMES`.
-* - The `satisfies` is the drift guard: a name the prompt teaches and this map lacks fails to compile.
-* - Read through `Object.hasOwn`: `icon:constructor` would otherwise hit `Object.prototype`.
+* - Capped width with a truncating name, so a long filename cannot push the text away.
+* - `error` explains itself in a tooltip; the remove control stays available in every status.
 */
+const AttachmentChip = ({ name, thumbnailUrl, status, error, onRemove, trailing, className }) => {
+	const chip = /* @__PURE__ */ jsxs("span", {
+		"data-status": status,
+		className: cn("tailwindcss-preflight tw:inline-flex tw:h-6 tw:min-w-0 tw:max-w-48 tw:items-center tw:gap-1 tw:rounded-md tw:bg-muted tw:px-2 tw:text-xs tw:text-muted-foreground", status === "error" && "tw:text-destructive", className),
+		children: [
+			/* @__PURE__ */ jsx(Lead, {
+				status,
+				thumbnailUrl
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "tw:min-w-0 tw:truncate",
+				children: name
+			}),
+			trailing,
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": `Remove ${name}`,
+				onClick: onRemove,
+				className: "tw:-mr-1 tw:shrink-0 tw:cursor-pointer tw:rounded-sm tw:border-0 tw:bg-transparent tw:p-0 tw:text-muted-foreground tw:hover:text-foreground tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-ring",
+				children: /* @__PURE__ */ jsx(X, { className: "tw:size-3.5" })
+			})
+		]
+	});
+	if (status !== "error" || !error) return chip;
+	return /* @__PURE__ */ jsx(Tooltip, {
+		tooltip: error,
+		placement: "top",
+		triggerAsChild: true,
+		children: chip
+	});
+};
+//#endregion
+//#region src/blocks/AIKit/ChatInlineIcon.tsx
+/** Every drawable name; read through `Object.hasOwn`, or `icon:constructor` hits `Object.prototype`. */
 const ICON_REGISTRY = {
+	"book-open": BookOpen,
+	bookmark: Bookmark,
+	box: Box,
+	"chart-bar": ChartBar,
+	"chart-pie": ChartPie,
+	"circle-alert": CircleAlert,
+	"circle-help": CircleHelp,
+	"circle-x": CircleX,
+	cloud: Cloud,
+	"external-link": ExternalLink,
+	"file-text": FileText,
+	filter: Filter,
+	"git-branch": GitBranch,
+	"hard-drive": HardDrive,
+	history: History,
+	hourglass: Hourglass,
+	info: Info,
+	layers: Layers,
+	lightbulb: Lightbulb,
+	list: List,
+	"list-checks": ListChecks,
+	mail: Mail,
+	package: Package,
+	pause: Pause,
+	pencil: Pencil,
+	pin: Pin,
+	"refresh-cw": RefreshCw,
+	server: Server,
+	settings: Settings,
+	shield: Shield,
+	"trash-2": Trash2,
+	"trending-down": TrendingDown,
+	"trending-up": TrendingUp,
+	"triangle-alert": TriangleAlert,
+	users: Users,
+	workflow: Workflow,
+	wrench: Wrench,
+	x: X,
 	"alert-circle": AlertCircle,
 	"arrow-down": ArrowDown,
 	"arrow-left": ArrowLeft,
@@ -390,26 +708,153 @@ const ChatInlineIcon = ({ name }) => {
 	});
 };
 //#endregion
+//#region src/blocks/AIKit/useCountdown.ts
+const TICK_MS = 1e3;
+/** Whole seconds left of a countdown that starts at `seconds`; `undefined` when there is none. */
+const useCountdown = (seconds) => {
+	const [ticks, setTicks] = useState({
+		start: seconds,
+		elapsed: 0
+	});
+	useEffect(() => {
+		if (seconds === void 0 || seconds <= 0) return void 0;
+		const interval = setInterval(() => {
+			setTicks((current) => ({
+				start: seconds,
+				elapsed: (current.start === seconds ? current.elapsed : 0) + 1
+			}));
+		}, TICK_MS);
+		return () => clearInterval(interval);
+	}, [seconds]);
+	if (seconds === void 0) return void 0;
+	const elapsed = ticks.start === seconds ? ticks.elapsed : 0;
+	return Math.max(seconds - elapsed, 0);
+};
+//#endregion
+//#region src/blocks/AIKit/ChatNotice.tsx
+const ALERT_VARIANT = {
+	error: "error",
+	warn: "warning",
+	info: "info"
+};
+const countdownLabel = (remaining) => remaining > 0 ? `Try again in ${remaining}s.` : "You can try again now.";
+/**
+* A notice row in a chat transcript.
+*
+* - Thin wrapper over `Alert`; `warn` maps to the warning variant.
+* - `details` stays collapsed so a stack trace never crowds the message.
+* - `retryAfter` appends a live countdown; `action` is always rendered, so the host decides whether to gate it.
+*/
+const ChatNotice = ({ tone, children, action, details, retryAfter, className }) => {
+	const remaining = useCountdown(retryAfter);
+	return /* @__PURE__ */ jsx(Alert, {
+		variant: ALERT_VARIANT[tone],
+		role: "status",
+		className,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "tw:flex tw:flex-wrap tw:items-start tw:gap-x-3 tw:gap-y-2",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "tw:min-w-0 tw:flex-1 tw:basis-40",
+				children: [
+					/* @__PURE__ */ jsx("span", { children }),
+					remaining !== void 0 && /* @__PURE__ */ jsx("span", {
+						className: "tw:ml-1 tw:text-muted-foreground",
+						"data-testid": "chat-notice-countdown",
+						children: countdownLabel(remaining)
+					}),
+					details && /* @__PURE__ */ jsxs(Collapsible, {
+						className: "tw:mt-1",
+						children: [/* @__PURE__ */ jsxs(Collapsible.Trigger, {
+							className: "tailwindcss-preflight tw:group tw:flex tw:cursor-pointer tw:items-center tw:gap-1 tw:border-0 tw:bg-transparent tw:p-0 tw:text-xs tw:text-muted-foreground tw:hover:text-foreground",
+							children: ["Technical details", /* @__PURE__ */ jsx(ChevronDown, { className: "tw:size-3 tw:transition-transform tw:group-data-[state=open]:rotate-180" })]
+						}), /* @__PURE__ */ jsx(Collapsible.Content, { children: /* @__PURE__ */ jsx("code", {
+							className: "tw:mt-1 tw:block tw:whitespace-pre-wrap tw:break-words tw:text-xs",
+							children: details
+						}) })]
+					})
+				]
+			}), action && /* @__PURE__ */ jsx("div", {
+				className: "tw:ml-auto tw:flex tw:shrink-0 tw:gap-2",
+				children: action
+			})]
+		})
+	});
+};
+//#endregion
+//#region src/blocks/AIKit/ContextChip.tsx
+const CONTEXT_CHIP_EXPANDABLE_LENGTH = 120;
+/**
+* A quote or reference attached to a message being composed.
+*
+* - The excerpt is clamped to two lines; "Show all" appears once it is long enough to be cut.
+* - Images sit under the excerpt as small thumbnails.
+*/
+const ContextChip = ({ label, excerpt, images = [], onRemove, className }) => {
+	const [isExpanded, setIsExpanded] = useState(false);
+	const isExpandable = excerpt.length > 120;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("tailwindcss-preflight tw:flex tw:w-full tw:min-w-0 tw:flex-col tw:gap-1 tw:rounded-md tw:border-0 tw:border-l-2 tw:border-solid tw:border-border tw:bg-muted tw:px-3 tw:py-2 tw:text-xs", className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "tw:flex tw:items-center tw:gap-1 tw:text-muted-foreground",
+				children: [
+					/* @__PURE__ */ jsx(Quote, {
+						"aria-hidden": true,
+						className: "tw:size-3.5 tw:shrink-0"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "tw:min-w-0 tw:flex-1 tw:truncate tw:font-medium",
+						children: label
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": `Remove ${label}`,
+						onClick: onRemove,
+						className: "tw:shrink-0 tw:cursor-pointer tw:rounded-sm tw:border-0 tw:bg-transparent tw:p-0 tw:text-muted-foreground tw:hover:text-foreground tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-ring",
+						children: /* @__PURE__ */ jsx(X, { className: "tw:size-3.5" })
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: cn("tw:m-0 tw:whitespace-pre-wrap tw:break-words tw:text-foreground", !isExpanded && "tw:line-clamp-2"),
+				children: excerpt
+			}),
+			isExpandable && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-expanded": isExpanded,
+				onClick: () => setIsExpanded((current) => !current),
+				className: "tw:w-fit tw:cursor-pointer tw:border-0 tw:bg-transparent tw:p-0 tw:text-xs tw:text-muted-foreground tw:underline tw:hover:text-foreground",
+				children: isExpanded ? "Show less" : "Show all"
+			}),
+			images.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: "tw:flex tw:flex-wrap tw:gap-1",
+				children: images.map((image) => /* @__PURE__ */ jsx("img", {
+					src: image.src,
+					alt: image.alt,
+					className: "tw:size-10 tw:rounded-sm tw:border tw:border-border tw:object-cover"
+				}, image.src))
+			})
+		]
+	});
+};
+//#endregion
 //#region src/blocks/AIKit/FileDownloadChip.tsx
 /**
 * A file the agent wrote, offered inside its own answer.
 *
-* - The whole chip is the control: a small icon beside a truncating filename is hard to hit.
+* - By default the whole chip is the control: a small icon beside a truncating filename is hard to hit.
+* - With `onPreview` or `actions` the chip splits: the name previews (or downloads, without
+*   `onPreview`), the download sits beside it, and `actions` follow.
 * - Presentation only — the host fetches and saves, through its own auth.
 */
-const FileDownloadChip = ({ fileName, filePath, size, isPending = false, onDownload, className }) => /* @__PURE__ */ jsxs(Button, {
-	variant: "secondary",
-	size: "small",
-	isLoading: isPending,
-	"aria-disabled": isPending,
-	"aria-label": `Download ${filePath ?? fileName}`,
-	title: filePath,
-	onClick: () => {
+const FileDownloadChip = ({ fileName, filePath, size, isPending = false, onDownload, onPreview, actions, className }) => {
+	const isSplit = onPreview !== void 0 || actions !== void 0;
+	const target = filePath ?? fileName;
+	const handleDownload = () => {
 		if (!isPending) onDownload();
-	},
-	className: cn("tw:max-w-full tw:justify-start tw:gap-2 tw:font-normal", className),
-	children: [
-		!isPending && /* @__PURE__ */ jsx(FileText, { className: "tw:size-4 tw:shrink-0 tw:text-muted-foreground" }),
+	};
+	const nameAndSize = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(FileText, { className: "tw:size-4 tw:shrink-0 tw:text-muted-foreground" }),
 		/* @__PURE__ */ jsx("span", {
 			className: "tw:truncate",
 			children: fileName
@@ -417,10 +862,148 @@ const FileDownloadChip = ({ fileName, filePath, size, isPending = false, onDownl
 		size !== void 0 && /* @__PURE__ */ jsx("span", {
 			className: "tw:shrink-0 tw:text-xs tw:text-muted-foreground",
 			children: size
-		}),
-		!isPending && /* @__PURE__ */ jsx(Download, { className: "tw:size-4 tw:shrink-0" })
-	]
-});
+		})
+	] });
+	if (!isSplit) return /* @__PURE__ */ jsxs(Button, {
+		variant: "secondary",
+		size: "small",
+		isLoading: isPending,
+		"aria-disabled": isPending,
+		"aria-label": `Download ${target}`,
+		title: filePath,
+		onClick: handleDownload,
+		className: cn("tw:max-w-full tw:justify-start tw:gap-2 tw:font-normal", className),
+		children: [nameAndSize, !isPending && /* @__PURE__ */ jsx(Download, { className: "tw:size-4 tw:shrink-0" })]
+	});
+	return /* @__PURE__ */ jsxs(ButtonGroup, {
+		space: "compact",
+		className: cn("tw:max-w-full", className),
+		children: [
+			onPreview ? /* @__PURE__ */ jsx(Button, {
+				variant: "secondary",
+				size: "small",
+				"aria-label": `Preview ${target}`,
+				title: filePath,
+				onClick: onPreview,
+				className: "tw:min-w-0 tw:!shrink tw:justify-start tw:gap-2 tw:overflow-hidden tw:font-normal",
+				children: nameAndSize
+			}) : null,
+			/* @__PURE__ */ jsxs(Button, {
+				variant: "secondary",
+				size: onPreview ? "icon-sm" : "small",
+				isLoading: isPending,
+				"aria-disabled": isPending,
+				"aria-label": `Download ${target}`,
+				title: onPreview ? void 0 : filePath,
+				onClick: handleDownload,
+				className: cn(onPreview ? "tw:shrink-0" : "tw:min-w-0 tw:!shrink tw:justify-start tw:gap-2 tw:overflow-hidden tw:font-normal"),
+				children: [onPreview ? !isPending && /* @__PURE__ */ jsx(Download, { className: "tw:size-4" }) : nameAndSize, !onPreview && !isPending && /* @__PURE__ */ jsx(Download, { className: "tw:size-4 tw:shrink-0" })]
+			}),
+			actions
+		]
+	});
+};
+//#endregion
+//#region src/blocks/AIKit/FileGalleryTile.tsx
+const VISIBLE_MARGIN = "200px";
+/**
+* One image in a `FileGallery`.
+*
+* - Reports itself visible once, 200px before it scrolls in; without an `IntersectionObserver`
+*   (jsdom) it reports on mount.
+* - A thumbnail that fails to decode counts as failed, and a press retries instead of opening.
+*/
+const FileGalleryTile = ({ image, onOpen, onRetry, onVisible }) => {
+	const [tile, setTile] = useState(null);
+	const [isBroken, setIsBroken] = useState(false);
+	const isFailed = image.isFailed === true || isBroken;
+	const isLoading = !isFailed && image.src === void 0;
+	const hasVisibleHandler = onVisible !== void 0;
+	const reportVisible = useStableCallback(() => onVisible?.(image));
+	useEffect(() => {
+		if (!tile || !hasVisibleHandler) return;
+		if (typeof IntersectionObserver === "undefined") {
+			reportVisible();
+			return;
+		}
+		const observer = new IntersectionObserver((entries) => {
+			if (!entries.some((entry) => entry.isIntersecting)) return;
+			observer.disconnect();
+			reportVisible();
+		}, { rootMargin: VISIBLE_MARGIN });
+		observer.observe(tile);
+		return () => observer.disconnect();
+	}, [
+		tile,
+		hasVisibleHandler,
+		reportVisible
+	]);
+	const handleClick = () => {
+		if (!isFailed) return onOpen(image);
+		setIsBroken(false);
+		onRetry?.(image);
+	};
+	return /* @__PURE__ */ jsxs(Button, {
+		ref: setTile,
+		variant: "invisible",
+		"aria-label": isFailed ? `Retry preview of ${image.name}` : image.name,
+		onClick: handleClick,
+		className: cn("tw:relative tw:aspect-square tw:!h-auto tw:!max-h-none tw:!min-h-0 tw:!w-full tw:overflow-hidden tw:rounded-md tw:border tw:border-border tw:bg-muted tw:p-0", isFailed && "tw:text-xs tw:text-muted-foreground"),
+		children: [
+			isLoading && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: "tw:absolute tw:inset-0 tw:animate-pulse tw:bg-muted-foreground/10"
+			}),
+			isFailed && /* @__PURE__ */ jsx("span", {
+				className: "tw:px-2 tw:text-center tw:whitespace-normal",
+				children: "Preview unavailable — retry"
+			}),
+			!isFailed && image.src !== void 0 && /* @__PURE__ */ jsx("img", {
+				src: image.src,
+				alt: image.name,
+				loading: "lazy",
+				decoding: "async",
+				onError: () => setIsBroken(true),
+				className: "tw:size-full tw:object-cover"
+			})
+		]
+	});
+};
+//#endregion
+//#region src/blocks/AIKit/FileGallery.tsx
+const DEFAULT_MAX_TILES = 12;
+/**
+* Image files the agent wrote, as a grid of thumbnails.
+*
+* - Presentation only: the host owns thumbnail URLs, their loading and their auth.
+* - Tiles ask for their thumbnail as they near the viewport, so a long gallery loads on scroll.
+* - Draws `maxTiles`, then a "+N more" button that reveals the rest.
+*/
+const FileGallery = ({ images, onOpen, onRetry, onImageVisible, maxTiles = DEFAULT_MAX_TILES, className }) => {
+	const [isShowingAll, setIsShowingAll] = useState(false);
+	const shown = isShowingAll ? images : images.slice(0, maxTiles);
+	const hiddenCount = images.length - shown.length;
+	if (images.length === 0) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		role: "group",
+		"aria-label": "Images",
+		className: className ?? "tw:grid tw:grid-cols-[repeat(auto-fill,minmax(6rem,1fr))] tw:gap-2",
+		children: [shown.map((image) => /* @__PURE__ */ jsx(FileGalleryTile, {
+			image,
+			onOpen,
+			onRetry,
+			onVisible: onImageVisible
+		}, image.id)), hiddenCount > 0 && /* @__PURE__ */ jsxs(Button, {
+			variant: "secondary",
+			onClick: () => setIsShowingAll(true),
+			children: [
+				"+",
+				hiddenCount,
+				" more"
+			]
+		})]
+	});
+};
 //#endregion
 //#region src/blocks/AIKit/InlineStepGroup.tsx
 /** The surface colour, as the custom property the step icons mask against. */
@@ -433,7 +1016,7 @@ const surfaceStyle = (surface) => ({ "--inline-step-surface": surface });
 * - Animates `grid-template-rows`; children stay mounted while closed.
 * - `role="group"`, not a `region` landmark: dozens per transcript would drown real landmarks.
 */
-const InlineStepGroup = ({ label, variant = "success", isExpanded, onToggle, surface = "rgb(var(--background))", "aria-label": ariaLabel, "data-testid": testId, className, children }) => /* @__PURE__ */ jsxs("section", {
+const InlineStepGroup = ({ label, variant = "success", isExpanded, onToggle, surface = "rgb(var(--background))", "aria-label": ariaLabel, "data-testid": testId, className, footer, children }) => /* @__PURE__ */ jsxs("section", {
 	role: "group",
 	className: cn("tw:flex tw:flex-col", className),
 	"aria-label": ariaLabel,
@@ -452,15 +1035,42 @@ const InlineStepGroup = ({ label, variant = "success", isExpanded, onToggle, sur
 			children: /* @__PURE__ */ jsxs("div", {
 				style: surfaceStyle(surface),
 				className: "tw:relative tw:flex tw:flex-col tw:gap-4 tw:pt-4 tw:pl-5",
-				children: [/* @__PURE__ */ jsx("span", {
-					"aria-hidden": "true",
-					className: "tw:pointer-events-none tw:absolute tw:top-4 tw:bottom-0 tw:left-[30px] tw:w-px tw:bg-border"
-				}), children]
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: "tw:pointer-events-none tw:absolute tw:top-4 tw:bottom-0 tw:left-[30px] tw:w-px tw:bg-border"
+					}),
+					children,
+					footer && /* @__PURE__ */ jsx("div", {
+						className: "tw:relative tw:pl-6 tw:[background:var(--inline-step-surface,transparent)]",
+						children: footer
+					})
+				]
 			})
 		})
 	})]
 });
 //#endregion
+//#region src/blocks/AIKit/JumpToLatest.tsx
+/**
+* Scrolls a transcript back to its newest message.
+*
+* - Renders nothing while `visible` is false.
+* - Positioning is the host's: pass `className` to pin it over the list.
+*/
+const JumpToLatest = ({ visible, working = false, onClick, label, className }) => {
+	if (!visible) return null;
+	return /* @__PURE__ */ jsxs(Button, {
+		variant: "outline",
+		size: label ? "small" : "icon-sm",
+		"aria-label": label ?? "Scroll to bottom",
+		"data-working": working,
+		onClick,
+		className: cn("tw:rounded-full tw:shadow-md", working && "tw:animate-pulse tw:motion-reduce:animate-none", className),
+		children: [/* @__PURE__ */ jsx(ArrowDown, { className: "tw:size-4" }), label]
+	});
+};
+//#endregion
 //#region src/blocks/AIKit/DiagramBlock.tsx
 /**
 * One diagram block: a skeleton while its chunk loads, the fence source plus a retry if it fails.
@@ -470,7 +1080,7 @@ const InlineStepGroup = ({ label, variant = "success", isExpanded, onToggle, sur
 * - A new `load` resets the block, or a dialect switch keeps the previous renderer.
 * - Functions in state go through the setter form, or React calls them.
 */
-const DiagramBlock = ({ load, code }) => {
+const DiagramBlock = ({ load, code, renderActions }) => {
 	const [Diagram, setDiagram] = useState(null);
 	const [failed, setFailed] = useState(false);
 	const [attempt, setAttempt] = useState(0);
@@ -491,7 +1101,10 @@ const DiagramBlock = ({ load, code }) => {
 			cancelled = true;
 		};
 	}, [load, attempt]);
-	if (Diagram) return /* @__PURE__ */ jsx(Diagram, { code });
+	if (Diagram) return /* @__PURE__ */ jsx(Diagram, {
+		code,
+		renderActions
+	});
 	if (failed) return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(DiagramSource, { code }), /* @__PURE__ */ jsx(Button, {
 		variant: "inline",
 		size: "small",
@@ -526,6 +1139,622 @@ const diagramChunk = (name, load) => {
 	};
 };
 //#endregion
+//#region src/blocks/AIKit/downloadSvgFile.ts
+/** How long the object URL outlives the click; the download has started by then. */
+const REVOKE_DELAY_MS = 1e3;
+/** Saves sanitized SVG markup as a standalone `.svg` file. */
+const downloadSvgFile = (svg, filename = "diagram.svg") => {
+	const blob = new Blob([toSvgFileContent(svg)], { type: "image/svg+xml;charset=utf-8" });
+	const url = URL.createObjectURL(blob);
+	const anchor = document.createElement("a");
+	anchor.href = url;
+	anchor.download = filename;
+	document.body.append(anchor);
+	anchor.click();
+	anchor.remove();
+	setTimeout(() => URL.revokeObjectURL(url), REVOKE_DELAY_MS);
+};
+//#endregion
+//#region src/blocks/AIKit/DiagramDownloadButton.tsx
+/** A diagram toolbar action that saves the drawn diagram as an SVG file. */
+const DiagramDownloadButton = ({ safeSvg }) => /* @__PURE__ */ jsx(Tooltip, {
+	tooltip: "Download SVG",
+	placement: "top",
+	triggerAsChild: true,
+	children: /* @__PURE__ */ jsx(Button, {
+		size: "icon-sm",
+		variant: "outline",
+		"aria-label": "Download SVG",
+		onClick: () => downloadSvgFile(safeSvg),
+		children: /* @__PURE__ */ jsx(Download, { className: "tw:size-4" })
+	})
+});
+//#endregion
+//#region src/blocks/AIKit/highlightChunk.ts
+let pending = null;
+/**
+* The syntax highlighter, loaded on first use and shared between blocks.
+*
+* - The parsers are heavy, so they stay out of the main chunk.
+* - A failed import is logged and resolves `null`; the next block retries.
+*/
+const loadHighlighter = () => {
+	pending ??= import("./highlightCode-D354tCXO.js").then((module) => module.highlightCode, (error) => {
+		console.error("[AIKit] failed to load the syntax highlighter chunk", error);
+		pending = null;
+		return null;
+	});
+	return pending;
+};
+//#endregion
+//#region src/blocks/AIKit/HighlightedCode.tsx
+/**
+* A fenced block's `<code>`, coloured once the highlighter chunk loads.
+*
+* - Functions in state go through the setter form, or React calls them.
+*/
+const HighlightedCode = ({ code, grammar, className, children }) => {
+	const [highlight, setHighlight] = useState(null);
+	useEffect(() => {
+		let cancelled = false;
+		loadHighlighter().then((loaded) => {
+			if (!cancelled && loaded) setHighlight(() => loaded);
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, []);
+	const tokens = useMemo(() => highlight?.(code, grammar), [
+		highlight,
+		code,
+		grammar
+	]);
+	if (!tokens) return children;
+	return /* @__PURE__ */ jsx("code", {
+		className,
+		children: tokens.map((token, index) => token.className ? /* @__PURE__ */ jsx("span", {
+			className: token.className,
+			children: token.text
+		}, index) : token.text)
+	});
+};
+//#endregion
+//#region src/blocks/AIKit/highlightLanguages.ts
+/**
+* Fence language → the grammar that highlights it.
+*
+* - Read via `Object.hasOwn`: ```constructor would otherwise hit `Object.prototype`.
+*/
+const HIGHLIGHT_GRAMMARS = {
+	sql: "sql",
+	snowflake: "sql",
+	sfsql: "sql",
+	python: "python",
+	py: "python",
+	js: "javascript",
+	javascript: "javascript",
+	jsx: "jsx",
+	ts: "typescript",
+	typescript: "typescript",
+	tsx: "tsx",
+	json: "json",
+	sh: "shell",
+	bash: "shell",
+	shell: "shell",
+	zsh: "shell",
+	yaml: "yaml",
+	yml: "yaml"
+};
+/** The grammar for a fence language, or `undefined` when the block stays plain. */
+const getHighlightGrammar = (language) => {
+	const key = language?.toLowerCase();
+	return key !== void 0 && Object.hasOwn(HIGHLIGHT_GRAMMARS, key) ? HIGHLIGHT_GRAMMARS[key] : void 0;
+};
+//#endregion
+//#region src/blocks/AIKit/markdownOptions.ts
+const MarkdownOptionsContext = createContext({
+	highlight: false,
+	sortable: false,
+	renderDiagramActions: void 0
+});
+//#endregion
+//#region src/blocks/AIKit/tableSort.ts
+/** Characters a number cell carries for the reader: grouping, currency, percent, sign, spaces. */
+const NUMBER_NOISE = /[\s,_%$€£¥+]/g;
+/** A trailing magnitude: `142k`, `1.2M`, `3B`. */
+const MAGNITUDE = /^(.*?)([kmb])$/i;
+const MAGNITUDES = {
+	k: 1e3,
+	m: 1e6,
+	b: 1e9
+};
+/** A cell's number, or `null` when it is not one: `1,234`, `−5.1%`, `€142` and `1.2M` all read. */
+const parseSortNumber = (text) => {
+	const cleaned = text.replace(NUMBER_NOISE, "").replace(/^\u2212/, "-");
+	const [, digits = cleaned, suffix = ""] = MAGNITUDE.exec(cleaned) ?? [];
+	if (digits === "" || /[^\d.eE-]/.test(digits)) return null;
+	const value = Number(digits) * (MAGNITUDES[suffix.toLowerCase()] ?? 1);
+	return Number.isFinite(value) ? value : null;
+};
+/** Cells a model writes for "no value"; they sort with the empty ones. */
+const PLACEHOLDER = /^(?:n\/?a|-+|[\u2013\u2014\u2026?]|none|null)$/i;
+const isBlank = (key) => key === "" || PLACEHOLDER.test(key);
+const collator = new Intl.Collator(void 0, {
+	numeric: true,
+	sensitivity: "base"
+});
+/**
+* Row indices in the order one column sorts them.
+*
+* - Numeric when every non-empty cell parses as a number; otherwise locale-aware text.
+* - Empty and placeholder cells (`n/a`, `—`) go last in both directions; ties keep source order.
+*/
+const sortRowOrder = (cells, direction) => {
+	const keys = cells.map((cell) => cell.trim());
+	const numbers = keys.map(parseSortNumber);
+	const filled = keys.flatMap((key, index) => isBlank(key) ? [] : [index]);
+	const empty = keys.flatMap((key, index) => isBlank(key) ? [index] : []);
+	const numeric = filled.every((index) => numbers[index] !== null);
+	const compare = (a, b) => numeric ? (numbers[a] ?? 0) - (numbers[b] ?? 0) : collator.compare(keys[a] ?? "", keys[b] ?? "");
+	const sorted = filled.toSorted(compare);
+	return [...direction === "ascending" ? sorted : sorted.toReversed(), ...empty];
+};
+/** The sort after a header press: a new column sorts ascending, the same one flips. */
+const nextSort = (current, column) => current?.column === column && current.direction === "ascending" ? {
+	column,
+	direction: "descending"
+} : {
+	column,
+	direction: "ascending"
+};
+const getHastText = (node) => {
+	if (node.type === "text") return node.value;
+	if (node.type === "element") return node.children.map(getHastText).join("");
+	return "";
+};
+/** A row's cells, read off its hast node; `[]` without one. */
+const getRowCells = (row) => row?.children.filter((child) => child.type === "element" && /^t[dh]$/.test(child.tagName)) ?? [];
+/** The text of a row's cell at `column`; `''` when the row is short. */
+const getRowCellText = (row, column) => {
+	const cell = getRowCells(row)[column];
+	return cell ? getHastText(cell) : "";
+};
+//#endregion
+//#region src/blocks/AIKit/tableSortContext.ts
+/** The sort of the table being rendered; `null` outside a sortable table. */
+const TableSortContext = createContext(null);
+/** The hast cells of the row being rendered; a cell finds its column by identity. */
+const RowCellsContext = createContext([]);
+//#endregion
+//#region src/blocks/AIKit/TableSortProvider.tsx
+/** Holds one table's sort; the `Markdown` header, row and body renderers read it. */
+const TableSortProvider = ({ children }) => {
+	const [sort, setSort] = useState(null);
+	const value = useMemo(() => ({
+		sort,
+		toggle: (column) => setSort((current) => nextSort(current, column))
+	}), [sort]);
+	return /* @__PURE__ */ jsx(TableSortContext, {
+		value,
+		children
+	});
+};
+//#endregion
+//#region src/blocks/AIKit/MarkdownGrid.tsx
+/** The `table` renderer; a sortable block gives each table its own sort. */
+const MarkdownGrid = (props) => {
+	const { className, node: _node, ...rest } = props;
+	const { sortable } = use(MarkdownOptionsContext);
+	const grid = /* @__PURE__ */ jsx("div", {
+		className: "tw:not-prose tw:my-4",
+		children: /* @__PURE__ */ jsx(Table$1, {
+			bordered: true,
+			className: cn("tw:!mb-0", className),
+			...rest
+		})
+	});
+	return sortable ? /* @__PURE__ */ jsx(TableSortProvider, { children: grid }) : grid;
+};
+//#endregion
+//#region src/blocks/AIKit/MarkdownTableBody.tsx
+/**
+* The body of an answer's table, in the order its sorted column puts the rows.
+*
+* - react-markdown hands rows over as a keyed array, each with its hast `node`.
+* - Rows keep their keys, so a sort moves them rather than remounting them.
+*/
+const MarkdownTableBody = (props) => {
+	const { children, node: _node, ...rest } = props;
+	const sort = use(TableSortContext)?.sort ?? null;
+	if (sort === null || !Array.isArray(children)) return /* @__PURE__ */ jsx(Table$1.Body, {
+		...rest,
+		children
+	});
+	const rows = children.filter(isValidElement);
+	const order = sortRowOrder(rows.map((row) => getRowCellText(row.props.node, sort.column)), sort.direction);
+	return /* @__PURE__ */ jsx(Table$1.Body, {
+		...rest,
+		children: order.map((index) => rows[index])
+	});
+};
+//#endregion
+//#region src/blocks/AIKit/MarkdownTableHead.tsx
+/**
+* A header cell in an answer's table; a sort control inside a sortable table.
+*
+* - The button sorts on click, Enter and Space; `aria-sort` sits on the cell.
+*/
+const MarkdownTableHead = (props) => {
+	const { children, node, ...rest } = props;
+	const sorting = use(TableSortContext);
+	const column = node ? use(RowCellsContext).indexOf(node) : -1;
+	if (sorting === null || column === -1) return /* @__PURE__ */ jsx(Table$1.Head, {
+		...rest,
+		children
+	});
+	const { sort, toggle } = sorting;
+	const sorted = sort?.column !== column ? false : sort.direction === "ascending" ? "asc" : "desc";
+	return /* @__PURE__ */ jsx(Table$1.Head, {
+		"aria-sort": tableAriaSort(sorted),
+		...rest,
+		children: /* @__PURE__ */ jsx(Table$1.SortHeader, {
+			sorted,
+			onClick: () => toggle(column),
+			children
+		})
+	});
+};
+//#endregion
+//#region src/blocks/AIKit/MarkdownTableRow.tsx
+/** A row in an answer's table; inside a sortable table its cells can find their column. */
+const MarkdownTableRow = (props) => {
+	const { node, ...rest } = props;
+	const sorting = use(TableSortContext);
+	const row = /* @__PURE__ */ jsx(Table$1.Row, { ...rest });
+	return sorting === null ? row : /* @__PURE__ */ jsx(RowCellsContext, {
+		value: getRowCells(node),
+		children: row
+	});
+};
+//#endregion
+//#region src/blocks/AIKit/svgFence.ts
+/** Fence languages whose body may be a single SVG document. */
+const SVG_FENCE_LANGUAGES = [
+	"svg",
+	"xml",
+	"html"
+];
+/** A root start tag: `<svg` then whitespace, `/` or `>` — not `<svg-chart`. */
+const SVG_ROOT = /^<svg[\s/>]/i;
+/** An end tag for `svg` as the HTML parser sees one. */
+const SVG_END_TAG = /<\/svg[\s/>]/iy;
+/** The only spelling that closes a chart: `</svg>`, optional whitespace before `>`. */
+const SVG_CLOSE = /<\/svg\s*>/iy;
+const COMMENT_END = /--!?>/g;
+/**
+* Where the HTML parser ends the comment, CDATA or other `<!…>` / `<?…>` markup opening at `lt`.
+*
+* - The index just past it, `-1` while it is still open, `null` when none opens there.
+*/
+const skipMarkup = (text, lt) => {
+	if (text.startsWith("<!--", lt)) {
+		const body = lt + 4;
+		if (text.startsWith(">", body)) return body + 1;
+		if (text.startsWith("->", body)) return body + 2;
+		COMMENT_END.lastIndex = body;
+		const end = COMMENT_END.exec(text);
+		return end ? end.index + end[0].length : -1;
+	}
+	if (text.startsWith("<![CDATA[", lt)) {
+		const end = text.indexOf("]]>", lt + 9);
+		return end < 0 ? -1 : end + 3;
+	}
+	if (text.startsWith("<!", lt) || text.startsWith("<?", lt)) {
+		const end = text.indexOf(">", lt + 2);
+		return end < 0 ? -1 : end + 1;
+	}
+	return null;
+};
+/**
+* Index just past the first `</svg>` at or after `from` outside skipped markup, or `-1`.
+*
+* - Any other spelling of that first end tag (`</svg/>`, junk attributes) also gives `-1`.
+* - One pass over the `<`s, never a backtracking regex: it runs on every streamed chunk.
+*/
+const svgEndTagEnd = (text, from) => {
+	let at = from;
+	for (;;) {
+		const lt = text.indexOf("<", at);
+		if (lt < 0) return -1;
+		const skipped = skipMarkup(text, lt);
+		if (skipped === -1) return -1;
+		if (skipped !== null) {
+			at = skipped;
+			continue;
+		}
+		SVG_END_TAG.lastIndex = lt;
+		if (SVG_END_TAG.test(text)) {
+			SVG_CLOSE.lastIndex = lt;
+			return SVG_CLOSE.test(text) ? SVG_CLOSE.lastIndex : -1;
+		}
+		at = lt + 1;
+	}
+};
+/**
+* The SVG document a fenced block holds, or `null` when it holds anything else.
+*
+* - Only `svg`, `xml` and `html` fences; an XML prolog, doctype or comments may lead.
+* - Exactly one document: a second one, prose around it or one still streaming stays code.
+* - The scan mirrors the HTML parser; whatever it accepts is still sanitized.
+*/
+const svgFenceDocument = (language, body) => {
+	if (language === void 0 || !SVG_FENCE_LANGUAGES.includes(language.toLowerCase())) return null;
+	const text = body.trim();
+	let at = 0;
+	for (;;) {
+		while (at < text.length && /\s/.test(text.charAt(at))) at++;
+		const skipped = skipMarkup(text, at);
+		if (skipped === null) break;
+		if (skipped === -1) return null;
+		at = skipped;
+	}
+	if (!SVG_ROOT.test(text.slice(at, at + 5))) return null;
+	return svgEndTagEnd(text, at) === text.length ? text.slice(at) : null;
+};
+//#endregion
+//#region src/blocks/AIKit/scopeSvgReferences.ts
+/** More cloned nodes than any honest chart needs; matplotlib's glyphs stay well under it. */
+const MAX_CLONED_NODES = 2e4;
+const LINK_ATTRIBUTES = ["href", "xlink:href"];
+/**
+* The only id shape a reference may name.
+*
+* - No `%`, `\\` or quotes: the browser decodes those where this check would not.
+*/
+const STRICT_ID = /^[A-Za-z_][\w.-]*$/;
+/** A `url(#id)` paint, clip, mask, filter or marker reference, in its one accepted spelling. */
+const URL_REFERENCE = /url\(\s*(['"]?)#([A-Za-z_][\w.-]*)\1\s*\)/gi;
+/** Anything the browser could read as a `url(` or a CSS escape. */
+const ANY_URL = /url\s*\(|\\/gi;
+/**
+* The ids an attribute value points at; `null` when it cannot be read safely.
+*
+* - Fails closed: a `url(` or escape the strict spelling does not account for is unreadable.
+*/
+const referencesIn = (name, value) => {
+	if (LINK_ATTRIBUTES.includes(name)) {
+		const id = value.trim().replace(/^#/, "");
+		return value.trim().startsWith("#") && STRICT_ID.test(id) ? [id] : null;
+	}
+	const strict = [...value.matchAll(URL_REFERENCE)].map((match) => match[2] ?? "");
+	return (value.match(ANY_URL)?.length ?? 0) === strict.length ? strict : null;
+};
+/** The ids an element's own attributes point at, by attribute name; `null` marks an unreadable one. */
+const ownReferences = (element) => {
+	const references = /* @__PURE__ */ new Map();
+	for (const { name, value } of element.attributes) {
+		const ids = referencesIn(name, value);
+		if (ids === null || ids.length > 0) references.set(name, ids);
+	}
+	return references;
+};
+/** Drops a reference that failed the check: a `<use>` goes whole, anything else loses the attribute. */
+const dropReference = (element, attribute) => {
+	if (element.localName === "use" && LINK_ATTRIBUTES.includes(attribute)) element.remove();
+	else element.removeAttribute(attribute);
+};
+let fenceCount = 0;
+const nextPrefix = () => {
+	fenceCount += 1;
+	return `svgf${fenceCount.toString(36)}${Math.random().toString(36).slice(2, 8)}-`;
+};
+/**
+* Confines a sanitized fence's internal references to the fence itself, at linear cost.
+*
+* 1. An id outside `STRICT_ID` is removed; a repeated one keeps its first element, as the browser does.
+* 2. A reference survives only if readable and aimed at an in-fence, reference-free subtree.
+* 3. Each `<use>` costs its target's node count; past `MAX_CLONED_NODES` the rest go.
+* 4. Every id and reference gets a per-fence prefix, so nothing resolves into the host page.
+*/
+const scopeSvgReferences = (root) => {
+	const elements = [...root.querySelectorAll("*")];
+	const byId = /* @__PURE__ */ new Map();
+	for (const element of elements) {
+		if (!element.hasAttribute("id")) continue;
+		if (!STRICT_ID.test(element.id) || byId.has(element.id)) element.removeAttribute("id");
+		else byId.set(element.id, element);
+	}
+	const references = new Map(elements.map((element) => [element, ownReferences(element)]));
+	const referencing = /* @__PURE__ */ new Set();
+	for (const [element, refs] of references) {
+		if (refs.size === 0) continue;
+		for (let node = element; node; node = node.parentElement) referencing.add(node);
+	}
+	for (const [element, refs] of references) for (const [attribute, ids] of refs) if (ids === null || ids.some((id) => {
+		const target = byId.get(id);
+		return !target || referencing.has(target);
+	})) dropReference(element, attribute);
+	const targetSize = /* @__PURE__ */ new Map();
+	let cloned = 0;
+	for (const use of root.querySelectorAll("use")) {
+		const href = use.getAttribute("href") ?? use.getAttribute("xlink:href") ?? "";
+		const target = byId.get(href.trim().slice(1));
+		if (!target) continue;
+		let size = targetSize.get(target);
+		if (size === void 0) {
+			size = target.getElementsByTagName("*").length + 1;
+			targetSize.set(target, size);
+		}
+		cloned += size;
+		if (cloned > MAX_CLONED_NODES) use.remove();
+	}
+	const prefix = nextPrefix();
+	for (const element of root.querySelectorAll("*")) {
+		if (element.id) element.id = `${prefix}${element.id}`;
+		for (const { name, value } of [...element.attributes]) {
+			const scoped = LINK_ATTRIBUTES.includes(name) ? value.trim().replace(/^#/, `#${prefix}`) : value.replace(URL_REFERENCE, (_match, quote, id) => {
+				return `url(${quote}#${prefix}${id}${quote})`;
+			});
+			if (scoped !== value) element.setAttribute(name, scoped);
+		}
+	}
+};
+//#endregion
+//#region src/blocks/AIKit/filterSvgStyle.ts
+/** The CSS properties a fenced chart may set inline: nothing that loads a URL or leaves the box. */
+const SAFE_PROPERTIES = /* @__PURE__ */ new Set([
+	"alignment-baseline",
+	"baseline-shift",
+	"clip-path",
+	"clip-rule",
+	"color",
+	"display",
+	"dominant-baseline",
+	"fill",
+	"fill-opacity",
+	"fill-rule",
+	"filter",
+	"flood-color",
+	"flood-opacity",
+	"font",
+	"font-family",
+	"font-size",
+	"font-style",
+	"font-weight",
+	"letter-spacing",
+	"lighting-color",
+	"marker",
+	"marker-end",
+	"marker-mid",
+	"marker-start",
+	"mask",
+	"opacity",
+	"paint-order",
+	"shape-rendering",
+	"stop-color",
+	"stop-opacity",
+	"stroke",
+	"stroke-dasharray",
+	"stroke-dashoffset",
+	"stroke-linecap",
+	"stroke-linejoin",
+	"stroke-miterlimit",
+	"stroke-opacity",
+	"stroke-width",
+	"text-anchor",
+	"text-decoration",
+	"text-rendering",
+	"vector-effect",
+	"visibility",
+	"word-spacing"
+]);
+/**
+* The only functions a value may call: colours, and a same-document reference.
+*
+* - Colour arguments take words, numbers and `/`, never a nested `(`.
+*/
+const SAFE_FUNCTION = new RegExp(String.raw`(?:rgba?|hsla?|hwb|lab|lch|oklab|oklch)\([\w\s.,%+/-]*\)|${URL_REFERENCE.source}`, "gi");
+/** What is left of a value once its safe functions are gone: words, numbers, colours, quotes. */
+const SAFE_REMAINDER = /^[\w\s#.,%'"+/-]*$/;
+const isSafeDeclaration = (property, value) => SAFE_PROPERTIES.has(property) && SAFE_REMAINDER.test(value.replace(SAFE_FUNCTION, ""));
+/**
+* A `style` attribute reduced to the declarations a static chart needs.
+*
+* - Allowlist, not denylist: `image-set()`, escapes and positioning never pass.
+* - A declaration goes whole; `''` when none survive.
+*/
+const filterSvgStyle = (style) => style.split(";").flatMap((declaration) => {
+	const colon = declaration.indexOf(":");
+	if (colon < 0) return [];
+	const property = declaration.slice(0, colon).trim().toLowerCase();
+	const value = declaration.slice(colon + 1).trim();
+	return isSafeDeclaration(property, value) ? [`${property}: ${value}`] : [];
+}).join("; ");
+//#endregion
+//#region src/blocks/AIKit/sanitizeSvgFence.ts
+/**
+* Elements a fenced chart never keeps.
+*
+* - SMIL (`animate*`, `set`) sets attributes at runtime, past every attribute check.
+* - `foreignObject` carries HTML; a `style` element would restyle the whole page.
+*/
+const FORBIDDEN_TAGS = [
+	"script",
+	"foreignObject",
+	"animate",
+	"animateMotion",
+	"animateTransform",
+	"set",
+	"style"
+];
+const URL_ATTRIBUTES = /* @__PURE__ */ new Set(["href", "xlink:href"]);
+let purifier = null;
+/** A DOMPurify instance of its own, so these hooks never reach `ZoomableSvg` or other callers. */
+const getPurifier = () => {
+	if (purifier) return purifier;
+	const instance = DOMPurify(window);
+	instance.addHook("uponSanitizeAttribute", (_node, data) => {
+		const name = data.attrName.toLowerCase();
+		if (URL_ATTRIBUTES.has(name) && !data.attrValue.trim().startsWith("#")) data.keepAttr = false;
+		if (name === "style") {
+			data.attrValue = filterSvgStyle(data.attrValue);
+			if (!data.attrValue) data.keepAttr = false;
+		}
+	});
+	purifier = instance;
+	return instance;
+};
+/**
+* A model-written SVG document reduced to static, self-contained drawing.
+*
+* - SVG profile only: scripts, event handlers and HTML go.
+* - `href`s survive only as same-document `#` references, so nothing loads from elsewhere.
+* - `use` is allowed back in for that reason (matplotlib draws every glyph with it).
+* - References are then confined to the fence; see `scopeSvgReferences`.
+*/
+const sanitizeSvgFence = (svg) => {
+	const template = document.createElement("template");
+	template.innerHTML = getPurifier().sanitize(svg, {
+		USE_PROFILES: {
+			svg: true,
+			svgFilters: true
+		},
+		ADD_TAGS: ["use"],
+		FORBID_TAGS: FORBIDDEN_TAGS
+	});
+	scopeSvgReferences(template.content);
+	return template.innerHTML;
+};
+//#endregion
+//#region src/blocks/AIKit/SvgFencesContext.ts
+/** Whether the `Markdown.Block` being rendered draws ```svg fences; off by default. */
+const SvgFencesContext = createContext(false);
+//#endregion
+//#region src/blocks/AIKit/SvgFenceChart.tsx
+/** A fenced SVG chart, sanitized and drawn responsive, in a block that opted in. */
+const SvgFenceChart = ({ svg, source, children }) => {
+	const allowed = use(SvgFencesContext);
+	const html = useMemo(() => allowed ? makeResponsive(sanitizeSvgFence(svg)) : "", [allowed, svg]);
+	if (!allowed || !html) return children;
+	return /* @__PURE__ */ jsx(ZoomableSvg, {
+		html,
+		copyText: source,
+		className: "tw:my-3",
+		allowUse: true
+	});
+};
+/**
+* The fence languages `Markdown` draws instead of printing.
+*
+* - Streaming callers hold an open fence back as plain code, or every keystroke fetches the chunk.
+* - Frozen: it is shared across every app in the bundle.
+*/
+const DIAGRAM_LANGUAGES = Object.freeze([...[
+	"mermaid",
+	"flint",
+	"flint-chart"
+]]);
+//#endregion
 //#region src/blocks/AIKit/Markdown.tsx
 const loadMermaid = diagramChunk("MermaidDiagram", () => import("@keboola/design/mermaid").then((module) => module.MermaidDiagram));
 const loadFlint = diagramChunk("FlintChart", () => import("@keboola/design/flint").then((module) => module.FlintChart));
@@ -562,13 +1791,6 @@ const DIAGRAM_CHUNKS = {
 	"flint-chart": loadFlint
 };
 /**
-* The fence languages this renderer draws instead of printing.
-*
-* - Streaming callers hold an open fence back as plain code, or every keystroke fetches the chunk.
-* - Frozen: it is shared across every app in the bundle.
-*/
-const DIAGRAM_LANGUAGES = Object.freeze(Object.keys(DIAGRAM_CHUNKS));
-/**
 * Whether the `code` being rendered sits inside a fenced block.
 *
 * - Set by `pre`: a fence without info string has no `language-…` class, like inline code.
@@ -590,39 +1812,61 @@ const MarkdownCode = ({ children, className, ...props }) => {
 		children
 	});
 };
-const baseComponents = {
-	pre({ children, ...props }) {
-		const child = Array.isArray(children) ? children[0] : children;
-		const code = getText(child).replace(/\n$/, "");
-		const language = getLanguage(child);
-		const load = language !== void 0 && Object.hasOwn(DIAGRAM_CHUNKS, language) ? DIAGRAM_CHUNKS[language] : void 0;
-		if (load) {
-			if (!code.trim()) return null;
-			return /* @__PURE__ */ jsx(DiagramBlock, {
-				load,
-				code
-			});
-		}
-		const { node: _node, ...rest } = props;
-		return /* @__PURE__ */ jsxs("div", {
-			className: "tw:group tw:relative",
-			children: [/* @__PURE__ */ jsx("span", {
-				className: "tw:absolute tw:right-2 tw:top-2 tw:opacity-0 tw:transition-opacity tw:group-focus-within:opacity-100 tw:group-hover:opacity-100",
-				children: /* @__PURE__ */ jsx(ClipboardButton, {
-					text: code,
-					tooltip: "Copy",
-					size: "icon-xs",
-					variant: "outline"
-				})
-			}), /* @__PURE__ */ jsx("pre", {
-				...rest,
-				children: /* @__PURE__ */ jsx(CodeBlockContext, {
-					value: true,
+/**
+* The `pre` renderer: a diagram fence draws, any other fence prints with a copy button.
+*
+* - Diagrams replace the whole `<pre>`; a `<div>` inside `<pre><code>` is invalid HTML.
+* - A `highlight` block colours a fence whose language has a grammar, once the chunk loads.
+*/
+const MarkdownPre = (props) => {
+	const { children, node: _node, ...rest } = props;
+	const { highlight, renderDiagramActions } = use(MarkdownOptionsContext);
+	const child = Array.isArray(children) ? children[0] : children;
+	const code = getText(child).replace(/\n$/, "");
+	const language = getLanguage(child);
+	const load = language !== void 0 && Object.hasOwn(DIAGRAM_CHUNKS, language) ? DIAGRAM_CHUNKS[language] : void 0;
+	if (load) {
+		if (!code.trim()) return null;
+		return /* @__PURE__ */ jsx(DiagramBlock, {
+			load,
+			code,
+			renderActions: renderDiagramActions
+		});
+	}
+	const grammar = highlight ? getHighlightGrammar(language) : void 0;
+	const block = /* @__PURE__ */ jsxs("div", {
+		className: "tw:group tw:relative",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "tw:absolute tw:right-2 tw:top-2 tw:opacity-0 tw:transition-opacity tw:group-focus-within:opacity-100 tw:group-hover:opacity-100",
+			children: /* @__PURE__ */ jsx(ClipboardButton, {
+				text: code,
+				tooltip: "Copy",
+				size: "icon-xs",
+				variant: "outline"
+			})
+		}), /* @__PURE__ */ jsx("pre", {
+			...rest,
+			children: /* @__PURE__ */ jsx(CodeBlockContext, {
+				value: true,
+				children: grammar === void 0 ? children : /* @__PURE__ */ jsx(HighlightedCode, {
+					code,
+					grammar,
+					className: `language-${language}`,
 					children
 				})
-			})]
-		});
-	},
+			})
+		})]
+	});
+	const svg = svgFenceDocument(language, code);
+	if (svg === null) return block;
+	return /* @__PURE__ */ jsx(SvgFenceChart, {
+		svg,
+		source: `\`\`\`${language}\n${code}\n\`\`\``,
+		children: block
+	});
+};
+const baseComponents = {
+	pre: MarkdownPre,
 	code: MarkdownCode,
 	a({ children, href, ...props }) {
 		const { node: _node, ...rest } = props;
@@ -637,33 +1881,14 @@ const baseComponents = {
 			children
 		});
 	},
-	table({ className, ...props }) {
-		const { node: _node, ...rest } = props;
-		return /* @__PURE__ */ jsx("div", {
-			className: "tw:not-prose tw:my-4",
-			children: /* @__PURE__ */ jsx(Table$1, {
-				bordered: true,
-				className: cn("tw:!mb-0", className),
-				...rest
-			})
-		});
-	},
+	table: MarkdownGrid,
 	thead(props) {
 		const { node: _node, ...rest } = props;
 		return /* @__PURE__ */ jsx(Table$1.Header, { ...rest });
 	},
-	tbody(props) {
-		const { node: _node, ...rest } = props;
-		return /* @__PURE__ */ jsx(Table$1.Body, { ...rest });
-	},
-	tr(props) {
-		const { node: _node, ...rest } = props;
-		return /* @__PURE__ */ jsx(Table$1.Row, { ...rest });
-	},
-	th(props) {
-		const { node: _node, ...rest } = props;
-		return /* @__PURE__ */ jsx(Table$1.Head, { ...rest });
-	},
+	tbody: MarkdownTableBody,
+	tr: MarkdownTableRow,
+	th: MarkdownTableHead,
 	td(props) {
 		const { node: _node, ...rest } = props;
 		return /* @__PURE__ */ jsx(Table$1.Cell, { ...rest });
@@ -681,15 +1906,38 @@ const MarkdownRoot = ({ children, className, rhythm = "answer" }) => /* @__PURE_
 	className: cn(PROSE_CLASS[rhythm], className),
 	children
 });
+/** The diagram toolbar a block asks for: the caller's actions, then the built-in download. */
+const composeDiagramActions = (diagramActions, diagramDownload) => {
+	if (!diagramDownload) return diagramActions;
+	return (safeSvg) => /* @__PURE__ */ jsxs(Fragment$1, { children: [diagramActions?.(safeSvg), /* @__PURE__ */ jsx(DiagramDownloadButton, { safeSvg })] });
+};
 /** One parsed piece of an answer, with no surface of its own; memoise at the call site. */
-const MarkdownBlock = ({ children, remarkPlugins, components: componentOverrides }) => /* @__PURE__ */ jsx(ReactMarkdown, {
-	remarkPlugins: remarkPlugins === void 0 ? baseRemarkPlugins : [...baseRemarkPlugins, ...remarkPlugins],
-	components: componentOverrides === void 0 ? baseComponents : {
-		...baseComponents,
-		...componentOverrides
-	},
-	children
-});
+const MarkdownBlock = ({ children, remarkPlugins, components: componentOverrides, highlight = false, sortable = false, diagramActions, diagramDownload = false, allowSvgFences = false }) => {
+	const options = useMemo(() => ({
+		highlight,
+		sortable,
+		renderDiagramActions: composeDiagramActions(diagramActions, diagramDownload)
+	}), [
+		highlight,
+		sortable,
+		diagramActions,
+		diagramDownload
+	]);
+	return /* @__PURE__ */ jsx(MarkdownOptionsContext, {
+		value: options,
+		children: /* @__PURE__ */ jsx(SvgFencesContext, {
+			value: allowSvgFences,
+			children: /* @__PURE__ */ jsx(ReactMarkdown, {
+				remarkPlugins: remarkPlugins === void 0 ? baseRemarkPlugins : [...baseRemarkPlugins, ...remarkPlugins],
+				components: componentOverrides === void 0 ? baseComponents : {
+					...baseComponents,
+					...componentOverrides
+				},
+				children
+			})
+		})
+	});
+};
 /**
 * Read-only GFM Markdown renderer with design-token typography.
 *
@@ -725,7 +1973,7 @@ const FADE_SURFACE = {
 *   `baseline-widely-available` build floor lacks, and must sit on `Table`'s own container.
 * - Past `EXPAND_RATIO` the expand action shows without hover.
 */
-const MarkdownTable = ({ children, actions, onExpand, surface = "card", className }) => {
+const MarkdownTable = ({ children, actions, onExpand, surface = "card", sortable = false, className }) => {
 	const frameRef = useRef(null);
 	const [overflow, setOverflow] = useState({
 		scrollable: false,
@@ -775,15 +2023,104 @@ const MarkdownTable = ({ children, actions, onExpand, surface = "card", classNam
 		}), /* @__PURE__ */ jsxs("div", {
 			ref: frameRef,
 			className: "tw:relative",
-			children: [children, overflow.scrollable && !overflow.atEnd && /* @__PURE__ */ jsx("span", {
+			children: [sortable ? /* @__PURE__ */ jsx(TableSortProvider, { children }) : children, overflow.scrollable && !overflow.atEnd && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				"data-testid": "markdown-table-fade",
+				className: cn("tw:pointer-events-none tw:absolute tw:inset-y-px tw:right-px tw:w-12 tw:rounded-r-[10px] tw:bg-gradient-to-l tw:to-transparent", FADE_SURFACE[surface])
+			})]
+		})]
+	});
+};
+//#endregion
+//#region src/blocks/AIKit/CollapsedMessageBody.tsx
+/**
+* Clips tall content at `maxHeight` behind a fade, with a Show more / Show less toggle.
+*
+* - The toggle and fade appear only while the content is taller than `maxHeight`.
+* - Height is measured with a `ResizeObserver`; without one (jsdom) nothing is clipped.
+*/
+const CollapsedMessageBody = ({ maxHeight, fadeClassName, children }) => {
+	const contentRef = useRef(null);
+	const [isOverflowing, setIsOverflowing] = useState(false);
+	const [isExpanded, setIsExpanded] = useState(false);
+	useLayoutEffect(() => {
+		const node = contentRef.current;
+		if (!node || typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(() => setIsOverflowing(node.offsetHeight > maxHeight));
+		observer.observe(node);
+		return () => observer.disconnect();
+	}, [maxHeight]);
+	const isClipped = isOverflowing && !isExpanded;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "tw:flex tw:flex-col tw:items-start tw:gap-1",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "tw:relative tw:w-full tw:overflow-hidden",
+			style: isClipped ? { maxHeight } : void 0,
+			children: [/* @__PURE__ */ jsx("div", {
+				ref: contentRef,
+				children
+			}), isClipped && /* @__PURE__ */ jsx("div", {
 				"aria-hidden": true,
-				"data-testid": "markdown-table-fade",
-				className: cn("tw:pointer-events-none tw:absolute tw:inset-y-px tw:right-px tw:w-12 tw:rounded-r-[10px] tw:bg-gradient-to-l tw:to-transparent", FADE_SURFACE[surface])
+				className: cn("tw:pointer-events-none tw:absolute tw:inset-x-0 tw:bottom-0 tw:h-12 tw:bg-gradient-to-t tw:to-transparent", fadeClassName)
 			})]
+		}), isOverflowing && /* @__PURE__ */ jsx(Button, {
+			variant: "inline",
+			size: "small",
+			className: "tw:px-0",
+			"aria-expanded": isExpanded,
+			onClick: () => setIsExpanded((v) => !v),
+			children: isExpanded ? "Show less" : "Show more"
+		})]
+	});
+};
+//#endregion
+//#region src/blocks/AIKit/MessageDeliveryStatus.tsx
+/**
+* Where a sent message stands, until it is delivered.
+*
+* - `sending` is announced politely; `failed` is an alert with a Retry button when `onRetry` is set.
+*/
+const MessageDeliveryStatus = ({ status, onRetry }) => {
+	if (status === "sending") return /* @__PURE__ */ jsx("span", {
+		role: "status",
+		className: "tw:text-xs tw:text-muted-foreground",
+		children: "Sending…"
+	});
+	return /* @__PURE__ */ jsxs("span", {
+		role: "alert",
+		className: "tw:inline-flex tw:items-center tw:gap-2 tw:text-xs tw:text-destructive",
+		children: ["Failed to send", onRetry && /* @__PURE__ */ jsx(Button, {
+			variant: "inline",
+			size: "small",
+			className: "tw:px-0",
+			onClick: onRetry,
+			children: "Retry"
 		})]
 	});
 };
 //#endregion
+//#region src/blocks/AIKit/MessageTimestamp.tsx
+const TIME_FORMAT = {
+	hour: "2-digit",
+	minute: "2-digit"
+};
+/**
+* The time a message was sent.
+*
+* - Shows the clock time, with the full locale date and time as the tooltip.
+* - Draws nothing for a value that is not a date.
+*/
+const MessageTimestamp = ({ createdAt }) => {
+	const date = new Date(createdAt);
+	if (Number.isNaN(date.getTime())) return null;
+	return /* @__PURE__ */ jsx("time", {
+		dateTime: date.toISOString(),
+		title: date.toLocaleString(),
+		className: "tw:text-xs tw:text-muted-foreground",
+		children: date.toLocaleTimeString([], TIME_FORMAT)
+	});
+};
+//#endregion
 //#region src/blocks/AIKit/MessageBubble.tsx
 const containerClasses = cva([
 	"tw:flex",
@@ -838,49 +2175,105 @@ const contentClasses = cva([
 	} },
 	defaultVariants: { variant: "assistant" }
 });
-const MessageBubble = ({ variant, children, actions, createdAt }) => {
-	return /* @__PURE__ */ jsx("div", {
+const MessageBubble = ({ variant, children, actions, createdAt, timestamp = "tooltip", quote, status, onRetry, author, collapseAfterPx, avatar }) => {
+	const isTimestampVisible = timestamp === "visible" && createdAt !== void 0;
+	const isSending = variant === "user" && status === "sending";
+	const deliveryStatus = variant === "user" && status ? /* @__PURE__ */ jsx(MessageDeliveryStatus, {
+		status,
+		onRetry
+	}) : null;
+	const body = collapseAfterPx === void 0 ? children : /* @__PURE__ */ jsx(CollapsedMessageBody, {
+		maxHeight: collapseAfterPx,
+		fadeClassName: variant === "user" ? "tw:from-muted" : "tw:from-background",
+		children
+	});
+	const hasActionsRow = isTimestampVisible || deliveryStatus !== null;
+	return /* @__PURE__ */ jsxs("div", {
 		className: containerClasses({ variant }),
 		"data-testid": `chat-message-${variant}`,
-		children: /* @__PURE__ */ jsxs("div", {
-			className: stackClasses({ variant }),
-			children: [/* @__PURE__ */ jsx("div", {
-				className: contentClasses({ variant }),
-				title: variant === "user" ? createdAt : void 0,
-				children
-			}), actions]
+		children: [
+			variant === "assistant" && avatar,
+			/* @__PURE__ */ jsxs("div", {
+				className: stackClasses({ variant }),
+				children: [
+					author && /* @__PURE__ */ jsx("div", {
+						className: "tw:text-xs tw:font-medium tw:text-muted-foreground",
+						children: author
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: cn(contentClasses({ variant }), isSending && "tw:opacity-70"),
+						title: variant === "user" && timestamp === "tooltip" ? createdAt : void 0,
+						children: [quote && /* @__PURE__ */ jsx("blockquote", {
+							className: "tw:m-0 tw:border-l-2 tw:border-border tw:pl-2 tw:text-sm tw:text-muted-foreground",
+							children: quote
+						}), body]
+					}),
+					hasActionsRow ? /* @__PURE__ */ jsxs("div", {
+						className: "tw:flex tw:items-center tw:gap-2",
+						children: [
+							isTimestampVisible && /* @__PURE__ */ jsx(MessageTimestamp, { createdAt }),
+							deliveryStatus,
+							actions
+						]
+					}) : actions
+				]
+			}),
+			variant === "user" && avatar
+		]
+	});
+};
+//#endregion
+//#region src/blocks/AIKit/ModeChip.tsx
+/**
+* A removable pill naming a mode the composer is in.
+*
+* - The whole chip turns the mode off, not just the ×.
+* - Collapsed via a `0fr` / `1fr` grid column and taken out of the tab order while hidden.
+*/
+const ModeChip = ({ children, visible = true, tooltip, removeLabel, color = "amber", onRemove, className }) => {
+	const button = /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick: onRemove,
+		tabIndex: visible ? void 0 : -1,
+		"aria-label": removeLabel,
+		className: "tailwindcss-preflight tw:cursor-pointer tw:border-0 tw:bg-transparent tw:p-0",
+		children: /* @__PURE__ */ jsx(Badge, {
+			variant: "pill",
+			color,
+			suffix: /* @__PURE__ */ jsx(X, { className: "tw:size-3" }),
+			children
+		})
+	});
+	return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": !visible,
+		className: cn("tw:grid tw:transition-all tw:duration-200 tw:ease-out tw:motion-reduce:transition-none", visible ? "tw:mr-1 tw:grid-cols-[1fr] tw:opacity-100" : "tw:mr-0 tw:grid-cols-[0fr] tw:opacity-0", className),
+		children: /* @__PURE__ */ jsx("div", {
+			className: "tw:overflow-hidden",
+			children: tooltip ? /* @__PURE__ */ jsx(Tooltip, {
+				placement: "top",
+				tooltip,
+				triggerAsChild: true,
+				children: button
+			}) : button
 		})
 	});
 };
 //#endregion
 //#region src/blocks/AIKit/PlanApproval.tsx
 const defaultStepCountLabel = (count) => `${count} step${count === 1 ? "" : "s"}`;
-const StatusPill = ({ status, pendingLabel, approvedLabel, dismissedLabel, changesRequestedLabel }) => {
-	if (status === "approved") return /* @__PURE__ */ jsx(Badge, {
-		color: "green",
-		variant: "pill",
-		className: "tw:normal-case tw:tracking-normal",
-		children: approvedLabel
-	});
-	if (status === "dismissed") return /* @__PURE__ */ jsx(Badge, {
-		color: "gray",
-		variant: "pill",
-		className: "tw:normal-case tw:tracking-normal",
-		children: dismissedLabel
-	});
-	if (status === "changes-requested") return /* @__PURE__ */ jsx(Badge, {
-		color: "blue",
-		variant: "pill",
-		className: "tw:normal-case tw:tracking-normal",
-		children: changesRequestedLabel
-	});
-	return /* @__PURE__ */ jsx(Badge, {
-		color: "green",
-		variant: "pill",
-		className: "tw:normal-case tw:tracking-normal",
-		children: pendingLabel
-	});
+const STATUS_PILL_COLOR = {
+	pending: "green",
+	approved: "green",
+	dismissed: "gray",
+	"changes-requested": "blue",
+	expired: "orange"
 };
+const StatusPill = ({ status, label }) => /* @__PURE__ */ jsx(Badge, {
+	color: STATUS_PILL_COLOR[status],
+	variant: "pill",
+	className: "tw:normal-case tw:tracking-normal",
+	children: label
+});
 const ExpandToggle = ({ isExpanded, onToggle, showMoreLabel, showLessLabel }) => /* @__PURE__ */ jsxs("button", {
 	type: "button",
 	onClick: onToggle,
@@ -958,12 +2351,19 @@ const PlanActions = ({ isRequestingChanges, isSubmitting, onApprove, onRequestCh
 		children: approveLabel
 	}))]
 });
-const PlanApproval = ({ status, title, summary, stepCount, planBody, defaultExpanded = false, isExpanded: isExpandedProp, onExpandToggle, onApprove, onRequestChanges, onClose, isSubmitting = false, approveTooltip, pendingPillLabel = "Ready for approval", approvedPillLabel = "Approved", dismissedPillLabel = "Dismissed", changesRequestedPillLabel = "Changes Requested", approveLabel = "Approve", requestChangesLabel = "Request Changes", cancelLabel = "Cancel", showMoreLabel = "Show more", showLessLabel = "Show less", closeLabel = "Dismiss plan", fullScreenLabel = "View full screen", exitFullScreenLabel = "Exit full screen", changeRequestPlaceholder = "What would you like to change in the plan?", changeRequestSubmitLabel = "Send change request", stepCountLabel = defaultStepCountLabel, className }) => {
+const PlanApproval = ({ status, statusLabel, statusMessage, title, summary, stepCount, planBody, defaultExpanded = false, isExpanded: isExpandedProp, onExpandToggle, onApprove, onRequestChanges, onClose, isSubmitting = false, approveTooltip, pendingPillLabel = "Ready for approval", approvedPillLabel = "Approved", dismissedPillLabel = "Dismissed", changesRequestedPillLabel = "Changes Requested", approveLabel = "Approve", requestChangesLabel = "Request Changes", cancelLabel = "Cancel", showMoreLabel = "Show more", showLessLabel = "Show less", closeLabel = "Dismiss plan", fullScreenLabel = "View full screen", exitFullScreenLabel = "Exit full screen", changeRequestPlaceholder = "What would you like to change in the plan?", changeRequestSubmitLabel = "Send change request", stepCountLabel = defaultStepCountLabel, className }) => {
 	const [uncontrolledExpanded, setUncontrolledExpanded] = useState(defaultExpanded);
 	const isExpanded = isExpandedProp ?? uncontrolledExpanded;
 	const [isRequestingChanges, setIsRequestingChanges] = useState(false);
 	const [changeRequest, setChangeRequest] = useState("");
 	const [isFullScreen, setIsFullScreen] = useState(false);
+	const pillLabel = statusLabel ?? {
+		pending: pendingPillLabel,
+		approved: approvedPillLabel,
+		dismissed: dismissedPillLabel,
+		"changes-requested": changesRequestedPillLabel,
+		expired: "Expired"
+	}[status];
 	const isPending = status === "pending";
 	const showActions = isPending && (onApprove || onRequestChanges);
 	const showClose = isPending && Boolean(onClose);
@@ -1030,22 +2430,27 @@ const PlanApproval = ({ status, title, summary, stepCount, planBody, defaultExpa
 				className: "tw:flex tw:items-start tw:gap-2 tw:pl-4 tw:pr-2 tw:pt-4",
 				children: [/* @__PURE__ */ jsxs("div", {
 					className: "tw:flex tw:min-w-0 tw:flex-1 tw:flex-col tw:gap-2 tw:pb-4",
-					children: [/* @__PURE__ */ jsxs("div", {
-						className: "tw:flex tw:items-center tw:gap-3",
-						children: [/* @__PURE__ */ jsx(StatusPill, {
-							status,
-							pendingLabel: pendingPillLabel,
-							approvedLabel: approvedPillLabel,
-							dismissedLabel: dismissedPillLabel,
-							changesRequestedLabel: changesRequestedPillLabel
-						}), stepCount != null && stepCount > 0 && /* @__PURE__ */ jsx("span", {
-							className: "tw:text-xs tw:leading-4 tw:text-muted-foreground",
-							children: stepCountLabel(stepCount)
-						})]
-					}), /* @__PURE__ */ jsx("p", {
-						className: "tw:m-0 tw:text-base tw:font-semibold tw:leading-6",
-						children: title
-					})]
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "tw:flex tw:items-center tw:gap-3",
+							children: [/* @__PURE__ */ jsx(StatusPill, {
+								status,
+								label: pillLabel
+							}), stepCount != null && stepCount > 0 && /* @__PURE__ */ jsx("span", {
+								className: "tw:text-xs tw:leading-4 tw:text-muted-foreground",
+								children: stepCountLabel(stepCount)
+							})]
+						}),
+						/* @__PURE__ */ jsx("p", {
+							className: "tw:m-0 tw:text-base tw:font-semibold tw:leading-6",
+							children: title
+						}),
+						statusMessage != null && /* @__PURE__ */ jsx("p", {
+							className: "tw:m-0 tw:text-sm tw:text-muted-foreground",
+							"data-testid": "plan-status-message",
+							children: statusMessage
+						})
+					]
 				}), /* @__PURE__ */ jsxs("div", {
 					className: "tw:flex tw:items-center tw:gap-2",
 					children: [canShowPlanBody && !isFullScreen && /* @__PURE__ */ jsx(Tooltip, {
@@ -1105,10 +2510,7 @@ const PlanApproval = ({ status, title, summary, stepCount, planBody, defaultExpa
 					className: "tw:flex tw:min-w-0 tw:items-center tw:gap-3",
 					children: [/* @__PURE__ */ jsx(StatusPill, {
 						status,
-						pendingLabel: pendingPillLabel,
-						approvedLabel: approvedPillLabel,
-						dismissedLabel: dismissedPillLabel,
-						changesRequestedLabel: changesRequestedPillLabel
+						label: pillLabel
 					}), /* @__PURE__ */ jsx("span", {
 						className: "tw:truncate",
 						children: title
@@ -1294,7 +2696,7 @@ const clipBand = (node) => {
 		bottom
 	};
 };
-const PromptInputCommands = ({ items, open, onSelect, filterValue, emptyText = "No commands found", panel, groupAction, groupHeading, children }) => {
+const PromptInputCommands = ({ items, open, onSelect, filterValue, tabPicks = false, emptyText = "No commands found", panel, groupAction, groupHeading, children }) => {
 	const filtered = matchesFilter(items, filterValue);
 	const [highlighted, setHighlighted] = useState();
 	const [wasOpen, setWasOpen] = useState(open);
@@ -1346,6 +2748,15 @@ const PromptInputCommands = ({ items, open, onSelect, filterValue, emptyText = "
 		acc[item.group] = group;
 		return acc;
 	}, {});
+	const handleKeyDown = (event) => {
+		if (!tabPicks || event.key !== "Tab" || event.shiftKey || !open || panel) return;
+		if (!(event.target instanceof HTMLTextAreaElement)) return;
+		if (event.defaultPrevented || event.nativeEvent.isComposing) return;
+		const picked = filtered.find((item) => item.value === highlightedValue);
+		if (!picked) return;
+		event.preventDefault();
+		onSelect(picked);
+	};
 	const menuStyle = { "--prompt-menu-max-h": `${maxHeight}px` };
 	return /* @__PURE__ */ jsxs(Command, {
 		ref: attachRoot,
@@ -1354,6 +2765,7 @@ const PromptInputCommands = ({ items, open, onSelect, filterValue, emptyText = "
 		shouldFilter: false,
 		value: highlightedValue ?? "",
 		onValueChange: setHighlighted,
+		onKeyDown: handleKeyDown,
 		children: [open && /* @__PURE__ */ jsx("div", {
 			className: cn("tw:absolute tw:left-0 tw:z-50 tw:w-full tw:max-w-lg", below ? "tw:top-full tw:mt-1" : "tw:bottom-full tw:mb-1", "tw:rounded-[14px] tw:border tw:border-border tw:bg-popover tw:text-popover-foreground tw:shadow-lg", "tw:p-1"),
 			style: menuStyle,
@@ -1455,6 +2867,68 @@ const PromptInputSubmit = ({ ref, disabled, status = "ready" }) => {
 	})] });
 };
 //#endregion
+//#region src/blocks/AIKit/usePromptHistory.ts
+/** The prompts ↑ steps through: blanks dropped, a prompt sent twice in a row kept once. */
+const toRecallStack = (history) => history.reduce((stack, prompt) => {
+	if (prompt.trim() && stack.at(-1) !== prompt) stack.push(prompt);
+	return stack;
+}, []);
+const isPlainArrow = (event) => (event.key === "ArrowUp" || event.key === "ArrowDown") && !event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey && !event.nativeEvent.isComposing;
+/** Whether the caret sits on the text's first line (↑) or last line (↓), where a textarea has nowhere to move it. */
+const isOnEdgeLine = ({ key, currentTarget }) => {
+	const { value, selectionStart, selectionEnd } = currentTarget;
+	return key === "ArrowUp" ? !value.slice(0, selectionStart).includes("\n") : !value.slice(selectionEnd).includes("\n");
+};
+/**
+* Shell-style recall of the prompts already sent, on ↑ and ↓.
+*
+* - ↑ starts from the caret at the very start of the text.
+* - While browsing, ↑ and ↓ step only from the first and last line; inside a multi-line prompt they move the caret.
+* - ↓ past the newest prompt gives back the draft typed before browsing began.
+* - Browsing ends on any edit, or once the value is no longer the recalled prompt.
+*/
+const usePromptHistory = ({ history, value, onRecall }) => {
+	const stack = useMemo(() => toRecallStack(history ?? []), [history]);
+	const browsingRef = useRef(null);
+	const stop = () => {
+		browsingRef.current = null;
+	};
+	const recall = (event, next, text) => {
+		browsingRef.current = next;
+		event.preventDefault();
+		onRecall(text);
+		return true;
+	};
+	const handleKeyDown = (event) => {
+		if (stack.length === 0 || !isPlainArrow(event)) return false;
+		const current = browsingRef.current;
+		const browsing = current && stack[current.position] === value ? current : null;
+		if (event.key === "ArrowUp") {
+			const { selectionStart, selectionEnd } = event.currentTarget;
+			if (browsing ? !isOnEdgeLine(event) : !(selectionStart === 0 && selectionEnd === 0)) return false;
+			const position = (browsing?.position ?? stack.length) - 1;
+			const older = stack[position];
+			if (older === void 0) return false;
+			return recall(event, {
+				position,
+				draft: browsing?.draft ?? value
+			}, older);
+		}
+		if (!browsing || !isOnEdgeLine(event)) return false;
+		const position = browsing.position + 1;
+		const newer = stack[position];
+		if (newer === void 0) return recall(event, null, browsing.draft);
+		return recall(event, {
+			...browsing,
+			position
+		}, newer);
+	};
+	return {
+		handleKeyDown,
+		stop
+	};
+};
+//#endregion
 //#region src/blocks/AIKit/PromptInput.tsx
 const CMDK_HIJACKED_KEYS = /* @__PURE__ */ new Set([
 	"ArrowUp",
@@ -1544,9 +3018,11 @@ const wrapperVariants = cva(null, {
 		inline: ""
 	} }
 });
-const PromptInput = ({ onSend, onAbort, onContinue, prefix, variant, suffix, attachments, className, disabled, disableSubmit, value = "", onValueChange, status = "ready", maxRows = 6, minRows, commands, commandsGroupAction, panel, mentions, onMentionSelect, mentionsEmptyText = "Nothing to attach", mentionsGroupHeading, mentionsMultiple = false, autoFocus, textareaRef: publishedRef, ...textareaProps }) => {
+const PromptInput = ({ onSend, onAbort, onContinue, prefix, variant, suffix, attachments, className, disabled, disableSubmit, busy = false, blurOnEscape = false, onKeyDown, onPasteFiles, canSubmitEmpty = false, allowSendWhileBusy = false, canAbort = true, value = "", onValueChange, status = "ready", maxRows = 6, minRows, commands, commandsEmptyText = "No commands found", commandsLoading = false, slashTrigger = "value", commandsGroupAction, panel, mentions, onMentionSelect, mentionsEmptyText = "Nothing to attach", mentionsGroupHeading, mentionsMultiple = false, history, autoFocus, textareaRef: publishedRef, ...textareaProps }) => {
 	const defaultMinRows = variant === "inline" ? 1 : 2;
-	const isDisabled = (disabled || disableSubmit || !value.trim()) && status !== "streaming" && status !== "interrupted";
+	const canSendWhileBusy = allowSendWhileBusy && (status === "streaming" || status === "submitted") && !busy && !disabled && !disableSubmit && value.trim() !== "";
+	const showSeparateStop = allowSendWhileBusy && canAbort && (canSendWhileBusy || status === "submitted");
+	const isDisabled = busy || !canSendWhileBusy && (disabled || disableSubmit || !canSubmitEmpty && !value.trim()) && status !== "streaming" && status !== "interrupted";
 	const textareaId = useId();
 	const textareaRef = useRef(null);
 	const setTextareaNode = useCallback((node) => {
@@ -1565,20 +3041,37 @@ const PromptInput = ({ onSend, onAbort, onContinue, prefix, variant, suffix, att
 	useEffect(() => {
 		if (autoFocusRef.current) textareaRef.current?.focus({ preventScroll: true });
 	}, []);
+	const [typedSlashValue, setTypedSlashValue] = useState(null);
 	if (dismissedValue !== null && value !== dismissedValue) setDismissedValue(null);
-	const hasCommands = !!commands && commands.length > 0;
+	const hasCommands = commands !== void 0;
 	const panelOpen = panel !== void 0;
 	const hasMentions = mentions !== void 0;
 	const hasMenus = hasCommands || hasMentions;
-	const slashToken = hasCommands && !panelOpen && value !== dismissedValue ? findSlashToken(value, Math.min(caret, value.length)) : null;
+	const slashToken = hasCommands && !panelOpen && value !== dismissedValue && (slashTrigger === "value" || typedSlashValue === value) ? findSlashToken(value, Math.min(caret, value.length)) : null;
 	const commandsOpen = slashToken !== null;
 	const mentionToken = hasMentions && !commandsOpen && !panelOpen && value !== dismissedValue ? findMentionToken(value, Math.min(caret, value.length)) : null;
 	const mentionsOpen = mentionToken !== null;
 	const menuOpen = commandsOpen || mentionsOpen || panelOpen;
 	const menuItems = commandsOpen ? commands ?? [] : mentions ?? [];
 	const menuFilter = commandsOpen ? slashToken.query : mentionToken?.query ?? "";
+	const promptHistory = usePromptHistory({
+		history,
+		value,
+		onRecall: (text) => {
+			onValueChange?.(text);
+			moveCaret(text.length, text);
+			setDismissedValue(text);
+			requestAnimationFrame(() => {
+				textareaRef.current?.setSelectionRange(text.length, text.length);
+			});
+		}
+	});
 	const handleSubmit = () => {
 		if (isDisabled) return;
+		if (canSendWhileBusy) {
+			onSend?.(value);
+			return;
+		}
 		if (status === "streaming") onAbort?.();
 		if (status === "interrupted") onContinue?.();
 		if (status === "ready") onSend?.(value);
@@ -1588,6 +3081,11 @@ const PromptInput = ({ onSend, onAbort, onContinue, prefix, variant, suffix, att
 		handleSubmit();
 	};
 	const handleOnChange = (event) => {
+		promptHistory.stop();
+		const inputType = event.nativeEvent instanceof InputEvent ? event.nativeEvent.inputType : "";
+		const isTyping = inputType === "insertText" || inputType.startsWith("delete");
+		const startsSession = inputType === "insertText" && value === "" && event.target.value === "/";
+		setTypedSlashValue(startsSession || isTyping && typedSlashValue === value ? event.target.value : null);
 		moveCaret(event.target.selectionStart ?? event.target.value.length, event.target.value);
 		onValueChange?.(event.target.value);
 	};
@@ -1641,7 +3139,14 @@ const PromptInput = ({ onSend, onAbort, onContinue, prefix, variant, suffix, att
 		}
 		setDismissedValue(value);
 	};
-	const handleOnKeyDown = (event) => {
+	const handleOnPaste = (event) => {
+		if (!onPasteFiles) return;
+		const files = Array.from(event.clipboardData.files);
+		if (files.length === 0) return;
+		onPasteFiles(files);
+		if (!event.clipboardData.getData("text/plain")) event.preventDefault();
+	};
+	const handleOnComposerKeyDown = (event) => {
 		if (menuOpen) {
 			if (event.key === "Escape") {
 				event.preventDefault();
@@ -1653,11 +3158,18 @@ const PromptInput = ({ onSend, onAbort, onContinue, prefix, variant, suffix, att
 			if (event.key === "ArrowUp" || event.key === "ArrowDown") return;
 			if (event.key === "Enter" && matchesFilter(menuItems, menuFilter).length > 0) return;
 		} else if (hasMenus && isCmdkNavigation(event)) event.stopPropagation();
+		if (promptHistory.handleKeyDown(event)) return;
 		if (event.key === "Enter" && !event.shiftKey && !event.ctrlKey && !event.metaKey) {
 			event.preventDefault();
-			if (status !== "streaming") handleSubmit();
+			if (status !== "streaming" || canSendWhileBusy) handleSubmit();
 		}
 	};
+	const handleOnKeyDown = (event) => {
+		handleOnComposerKeyDown(event);
+		if (event.defaultPrevented) return;
+		if (blurOnEscape && event.key === "Escape") event.currentTarget.blur();
+		onKeyDown?.(event);
+	};
 	const handleOnFormKeyDown = (event) => {
 		if (hasMenus && event.target !== textareaRef.current && isCmdkNavigation(event)) event.stopPropagation();
 	};
@@ -1710,15 +3222,37 @@ const PromptInput = ({ onSend, onAbort, onContinue, prefix, variant, suffix, att
 								onChange: handleOnChange,
 								onSelect: handleOnSelect,
 								onKeyDown: handleOnKeyDown,
-								className: cn("tw:resize-none", "tw:outline-hidden", "tw:min-w-32 tw:flex-1", variant === "inline" ? "tw:@max-[480px]/composer:pl-2" : "tw:pl-2 tw:pr-0", "tw:bg-transparent", disabled ? "tw:text-muted-foreground" : "tw:text-foreground", "tw:text-sm", "tw:font-sans", "tw:transition-[width]", "tw:delay-75", "tw:ease-linear", "tw:overflow-auto")
+								onPaste: handleOnPaste,
+								readOnly: busy,
+								"aria-busy": busy || void 0,
+								className: cn("tw:resize-none", "tw:outline-hidden", "tw:min-w-32 tw:flex-1", variant === "inline" ? "tw:@max-[480px]/composer:pl-2" : "tw:pl-2 tw:pr-0", "tw:bg-transparent", disabled || busy ? "tw:text-muted-foreground" : "tw:text-foreground", "tw:text-sm", "tw:font-sans", "tw:transition-[width]", "tw:delay-75", "tw:ease-linear", "tw:overflow-auto")
 							})
 						}),
 						/* @__PURE__ */ jsxs("div", {
 							className: cn("tw:flex tw:items-center tw:gap-1", "tw:[&>*:last-child]:ml-1", "tw:shrink-0", variant === "inline" && "tw:pr-2.5 tw:@max-[480px]/composer:grow tw:@max-[480px]/composer:pr-0"),
-							children: [suffix, /* @__PURE__ */ jsx(PromptInputSubmit, {
-								disabled: isDisabled,
-								status
-							})]
+							children: [
+								suffix,
+								showSeparateStop && /* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, {
+									asChild: true,
+									children: /* @__PURE__ */ jsx(PromptInputAction, { children: /* @__PURE__ */ jsx(Button, {
+										type: "button",
+										onClick: () => onAbort?.(),
+										"aria-label": "Stop",
+										size: "icon-sm",
+										variant: "outline",
+										className: "tw:flex tw:items-center tw:rounded-full",
+										children: /* @__PURE__ */ jsx(CirclePause, { className: "tw:size-4" })
+									}) })
+								}), /* @__PURE__ */ jsx(Tooltip.Content, {
+									placement: "top",
+									variant: "action",
+									children: "Stop"
+								})] }),
+								/* @__PURE__ */ jsx(PromptInputSubmit, {
+									disabled: isDisabled,
+									status: canSendWhileBusy ? "ready" : status
+								})
+							]
 						})
 					]
 				})
@@ -1730,7 +3264,8 @@ const PromptInput = ({ onSend, onAbort, onContinue, prefix, variant, suffix, att
 		open: menuOpen,
 		onSelect: handleMenuSelect,
 		filterValue: menuFilter,
-		emptyText: mentionsOpen ? mentionsEmptyText : "No commands found",
+		tabPicks: commandsOpen,
+		emptyText: mentionsOpen ? mentionsEmptyText : commandsLoading ? "Loading commands…" : commandsEmptyText,
 		panel: panel?.content,
 		groupAction: commandsOpen ? commandsGroupAction : void 0,
 		groupHeading: mentionsOpen ? mentionsGroupHeading : void 0,
@@ -1741,7 +3276,7 @@ PromptInput.Action = PromptInputAction;
 PromptInput.MenuTrigger = PromptInputMenuTrigger;
 //#endregion
 //#region src/blocks/AIKit/Question.tsx
-const isEditableTarget = (target) => target instanceof HTMLElement && (target.isContentEditable || [
+const isEditableTarget$1 = (target) => target instanceof HTMLElement && (target.isContentEditable || [
 	"INPUT",
 	"TEXTAREA",
 	"SELECT"
@@ -1752,6 +3287,11 @@ const isFieldWithText = (element) => {
 };
 const hasCommandModifier = (e) => e.altKey || e.ctrlKey || e.metaKey;
 const SEND_KEY_CLASS = "tw:!bg-white/20 tw:!text-primary-foreground";
+const DEFAULT_SKIP_TOOLTIP = /* @__PURE__ */ jsx(Kbd, {
+	variant: "primary",
+	casing: "as-written",
+	children: "Space"
+});
 const keyRange = (count) => count > 1 ? `1–${count}` : "1";
 /** An option's key, or a blank slot past the ninth; a picked option's turns into a check. */
 const OptionKey = ({ digit, checked }) => digit === null && !checked ? /* @__PURE__ */ jsx("span", {
@@ -1770,7 +3310,7 @@ const handleKeyDown = (callback) => (e) => {
 		callback();
 	}
 };
-const Question = ({ question, header, options, multiSelect = true, selectedOptionIds = [], onSelectionChange, customAnswer = "", onCustomAnswerChange, onCustomAnswerConfirm, showCustomAnswer = true, customAnswerPlaceholder = "Type your answer…", showSkip = true, onSkip, onClose, onNext, submitTooltip, onPrevious, currentStep, totalSteps, renderPreview, autoFocus = false, enableShortcuts = false, className }) => {
+const Question = ({ question, header, options, multiSelect = true, selectedOptionIds = [], onSelectionChange, customAnswer = "", onCustomAnswerChange, onCustomAnswerConfirm, showCustomAnswer = true, customAnswerPlaceholder = "Type your answer…", customAnswerMaxLength, showSkip = true, onSkip, skipTooltip = DEFAULT_SKIP_TOOLTIP, onClose, onNext, submitTooltip, isSubmitDisabled = false, isSubmitting = false, error, onPrevious, currentStep, totalSteps, renderPreview, autoFocus = false, enableShortcuts = false, className }) => {
 	const [isCustomExpanded, setIsCustomExpanded] = useState(false);
 	const [activeRow, setActiveRow] = useState(0);
 	const [pendingId, setPendingId] = useState(null);
@@ -1784,6 +3324,7 @@ const Question = ({ question, header, options, multiSelect = true, selectedOptio
 	const chosenId = multiSelect ? null : pendingId ?? selectedOptionIds[0] ?? null;
 	const showSubmitButton = multiSelect || isCustomSelected || chosenId !== null;
 	const showFooter = showStepControls || showSkipButton || showSubmitButton;
+	const canSend = !isSubmitDisabled && !isSubmitting;
 	const progressValue = hasSteps ? currentStep / totalSteps * 100 : 0;
 	const isFirstStep = currentStep === 1;
 	const isLastStep = hasSteps && currentStep === totalSteps;
@@ -1834,7 +3375,7 @@ const Question = ({ question, header, options, multiSelect = true, selectedOptio
 	*/
 	const handleCardKeyDown = (e) => {
 		if (e.key === "Enter" && (e.metaKey || e.ctrlKey) && !e.altKey && !e.repeat) {
-			if (!showSubmitButton) return;
+			if (!showSubmitButton || !canSend) return;
 			send();
 			e.preventDefault();
 			e.stopPropagation();
@@ -1845,7 +3386,7 @@ const Question = ({ question, header, options, multiSelect = true, selectedOptio
 			focusRow(options.length);
 			return;
 		}
-		if (e.defaultPrevented || hasCommandModifier(e) || isEditableTarget(e.target)) return;
+		if (e.defaultPrevented || hasCommandModifier(e) || isEditableTarget$1(e.target)) return;
 		if ((e.key === "ArrowDown" || e.key === "ArrowUp") && rowCount > 0) {
 			e.preventDefault();
 			const delta = e.key === "ArrowDown" ? 1 : -1;
@@ -1871,7 +3412,7 @@ const Question = ({ question, header, options, multiSelect = true, selectedOptio
 		if (e.key === " " && e.target === e.currentTarget) {
 			e.preventDefault();
 			e.stopPropagation();
-			if (showSkipButton) onSkip?.();
+			if (showSkipButton && !isSubmitting) onSkip?.();
 			return;
 		}
 		if (showCustomAnswer && digit === null && e.key.length === 1 && e.key !== " ") {
@@ -1912,6 +3453,8 @@ const Question = ({ question, header, options, multiSelect = true, selectedOptio
 		variant: "primary",
 		size: "small",
 		onClick: send,
+		disabled: !canSend,
+		isLoading: isSubmitting,
 		"data-testid": "question-next-button",
 		children: [isLastStep ? "Submit" : "Next", /* @__PURE__ */ jsx(Kbd, {
 			"aria-hidden": true,
@@ -1920,6 +3463,15 @@ const Question = ({ question, header, options, multiSelect = true, selectedOptio
 			children: `${keys.mod.symbol} Enter`
 		})]
 	});
+	const skipButton = /* @__PURE__ */ jsx(Button, {
+		variant: "outline",
+		size: "small",
+		onClick: onSkip,
+		disabled: isSubmitting,
+		"aria-keyshortcuts": "Space",
+		"data-testid": "question-skip-button",
+		children: "Skip"
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		ref: rootRef,
 		role: "group",
@@ -1963,7 +3515,7 @@ const Question = ({ question, header, options, multiSelect = true, selectedOptio
 							ref: (row) => {
 								rowsRef.current[index] = row;
 							},
-							className: "tw:-mx-2 tw:-my-1.5 tw:flex tw:cursor-pointer tw:items-start tw:gap-2 tw:rounded-md tw:px-2 tw:py-1.5 tw:outline-none tw:hover:bg-accent tw:focus-visible:ring-2 tw:focus-visible:ring-ring",
+							className: "tw:-mx-2 tw:-my-1.5 tw:flex tw:cursor-pointer tw:items-start tw:gap-2 tw:rounded-md tw:px-2 tw:py-1.5 tw:outline-none tw:hover:bg-hover tw:focus-visible:ring-2 tw:focus-visible:ring-ring",
 							onClick: () => handleOptionToggle(option.id),
 							onKeyDown: (e) => {
 								if (hasCommandModifier(e) || e.repeat) return;
@@ -1986,7 +3538,16 @@ const Question = ({ question, header, options, multiSelect = true, selectedOptio
 								className: "tw:flex tw:min-w-0 tw:flex-1 tw:items-start tw:gap-3",
 								children: [/* @__PURE__ */ jsxs("div", {
 									className: "tw:flex tw:flex-col tw:gap-1.5",
-									children: [/* @__PURE__ */ jsx("span", {
+									children: [option.badge ? /* @__PURE__ */ jsxs("span", {
+										className: "tw:flex tw:flex-wrap tw:items-center tw:gap-x-2 tw:gap-y-1 tw:text-sm tw:font-medium tw:leading-none",
+										children: [option.label, /* @__PURE__ */ jsx(Badge, {
+											variant: "pill",
+											color: "green-inverse",
+											className: "tw:normal-case tw:tracking-normal",
+											"data-testid": "question-option-badge",
+											children: option.badge
+										})]
+									}) : /* @__PURE__ */ jsx("span", {
 										className: "tw:text-sm tw:font-medium tw:leading-none",
 										children: option.label
 									}), option.description && /* @__PURE__ */ jsx("span", {
@@ -2009,7 +3570,7 @@ const Question = ({ question, header, options, multiSelect = true, selectedOptio
 							ref: (row) => {
 								rowsRef.current[options.length] = row;
 							},
-							className: "tw:-mx-2 tw:-my-1.5 tw:flex tw:cursor-pointer tw:items-start tw:gap-2 tw:rounded-md tw:px-2 tw:py-1.5 tw:outline-none tw:hover:bg-accent tw:focus-visible:ring-2 tw:focus-visible:ring-ring",
+							className: "tw:-mx-2 tw:-my-1.5 tw:flex tw:cursor-pointer tw:items-start tw:gap-2 tw:rounded-md tw:px-2 tw:py-1.5 tw:outline-none tw:hover:bg-hover tw:focus-visible:ring-2 tw:focus-visible:ring-ring",
 							onClick: handleCustomRowClick,
 							onKeyDown: handleKeyDown(handleCustomRowKey),
 							onFocus: () => setActiveRow(options.length),
@@ -2036,6 +3597,7 @@ const Question = ({ question, header, options, multiSelect = true, selectedOptio
 								}
 							} : void 0,
 							placeholder: customAnswerPlaceholder,
+							maxLength: customAnswerMaxLength,
 							sizing: "small",
 							testId: "question-custom"
 						})]
@@ -2067,6 +3629,12 @@ const Question = ({ question, header, options, multiSelect = true, selectedOptio
 					})
 				]
 			}),
+			error != null && /* @__PURE__ */ jsx("div", {
+				role: "alert",
+				"data-testid": "question-error",
+				className: "tw:mx-4 tw:-mt-1 tw:rounded-md tw:bg-destructive/10 tw:px-3 tw:py-2 tw:text-sm tw:text-destructive",
+				children: error
+			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "tw:flex tw:flex-col",
 				children: [showStepControls && /* @__PURE__ */ jsx(Progress, {
@@ -2105,23 +3673,12 @@ const Question = ({ question, header, options, multiSelect = true, selectedOptio
 								})
 							]
 						}),
-						showSkipButton && /* @__PURE__ */ jsx(Tooltip, {
-							tooltip: /* @__PURE__ */ jsx(Kbd, {
-								variant: "primary",
-								casing: "as-written",
-								children: "Space"
-							}),
+						showSkipButton && (skipTooltip == null ? skipButton : /* @__PURE__ */ jsx(Tooltip, {
+							tooltip: skipTooltip,
 							placement: "top",
 							triggerAsChild: true,
-							children: /* @__PURE__ */ jsx(Button, {
-								variant: "outline",
-								size: "small",
-								onClick: onSkip,
-								"aria-keyshortcuts": "Space",
-								"data-testid": "question-skip-button",
-								children: "Skip"
-							})
-						}),
+							children: skipButton
+						})),
 						showSubmitButton && (submitTooltip ? /* @__PURE__ */ jsx(Tooltip, {
 							tooltip: submitTooltip,
 							placement: "top",
@@ -2179,22 +3736,188 @@ const QuestionBlock = ({ steps, showSkip = true, onSubmit, onClose, renderPrevie
 	}, currentStep);
 };
 //#endregion
+//#region src/blocks/AIKit/streamingMarkdown.ts
+/** A fence delimiter line: up to three spaces, then three or more backticks or tildes. */
+const FENCE_LINE = /^ {0,3}(`{3,}|~{3,})/;
+/** A list-item marker: a bullet or a `1.`/`1)` ordinal, then a space or the line end. */
+const LIST_MARKER = /^ {0,3}(?:[-*+]|\d{1,9}[.)])(?:\s|$)/;
+/** A line at column four continues whatever block sits above a blank line. */
+const INDENTED = /^(?: {4}| {0,3}\t)/;
+/** A line that continues an open list: one to three spaces, or another marker. */
+const CONTINUES_LIST = /^(?: {1,3}|(?:[-*+]|\d{1,9}[.)])(?:\s|$))/;
+/** A line that can only be a GFM table row: it opens with a pipe. */
+const TABLE_ROW = /^ {0,3}\|/;
+/** A delimiter row still streaming: pipes, dashes, colons and spaces only. */
+const TABLE_DELIMITER_PARTIAL = /^ {0,3}\|?[ :|-]*$/;
+/** Past this length a lone pipe line with no second pipe is prose, not a header. */
+const TABLE_HEAD_FIRST_CELL_MAX = 80;
+/** Whether `line` closes a fence opened with `marker`: same character, at least as long, nothing after. */
+const closesFence = (line, marker) => {
+	const match = FENCE_LINE.exec(line);
+	return !!match?.[1] && match[1][0] === marker[0] && match[1].length >= marker.length && !line.slice(match[0].length).trim();
+};
+/**
+* Every offset where all blocks before it are closed.
+*
+* - A cut is the end of a blank line outside a fence whose next line opens a fresh block.
+* - The last line is never classified: it is still streaming.
+* - An indented line, or a list continuation while a list is open, defers the cut.
+*/
+const sealableBoundaries = (text) => {
+	const cuts = [];
+	let pos = 0;
+	let fence = null;
+	let pendingBlank = -1;
+	let listOpen = false;
+	const cutAtBlank = () => {
+		if (pendingBlank > 0) cuts.push(pendingBlank);
+		listOpen = false;
+	};
+	while (pos < text.length) {
+		const nl = text.indexOf("\n", pos);
+		if (nl === -1) break;
+		const line = text.slice(pos, nl);
+		pos = nl + 1;
+		if (fence !== null) {
+			if (closesFence(line, fence)) fence = null;
+			continue;
+		}
+		const continuesList = listOpen && CONTINUES_LIST.test(line);
+		const opener = FENCE_LINE.exec(line)?.[1];
+		if (opener !== void 0) {
+			fence = opener;
+			if (pendingBlank !== -1 && !continuesList) cutAtBlank();
+			pendingBlank = -1;
+		} else if (!line.trim()) pendingBlank = pos;
+		else {
+			const continues = INDENTED.test(line) || continuesList;
+			if (pendingBlank !== -1 && !continues) cutAtBlank();
+			pendingBlank = -1;
+			if (LIST_MARKER.test(line)) listOpen = true;
+		}
+	}
+	return cuts;
+};
+/**
+* A streaming answer split into blocks that can no longer change and the tail that still can.
+*
+* - Render each `sealed` block in its own memoised `Markdown.Block`, keyed by index; only `tail` re-parses.
+* - A sealed block's text never changes as more text arrives.
+* - Reference links and footnotes defined in a later block resolve only once the full answer renders.
+*/
+const splitSealedBlocks = (text) => {
+	const sealed = [];
+	let from = 0;
+	for (const cut of sealableBoundaries(text)) {
+		sealed.push(text.slice(from, cut));
+		from = cut;
+	}
+	return {
+		sealed,
+		tail: text.slice(from)
+	};
+};
+/**
+* The fence still open at the end of `text`, if any.
+*
+* - `language` is `null` while the info string is still streaming (no newline yet).
+*/
+const findOpenFence = (text) => {
+	let open = null;
+	let pos = 0;
+	for (;;) {
+		const nl = text.indexOf("\n", pos);
+		const line = text.slice(pos, nl === -1 ? text.length : nl);
+		if (open !== null) {
+			if (nl !== -1 && closesFence(line, open.marker)) open = null;
+		} else {
+			const match = FENCE_LINE.exec(line);
+			if (match?.[1]) {
+				const info = line.slice(match[0].length).trim().split(/\s+/)[0] ?? "";
+				open = {
+					start: pos,
+					marker: match[1],
+					language: nl === -1 ? null : info.toLowerCase()
+				};
+			}
+		}
+		if (nl === -1) break;
+		pos = nl + 1;
+	}
+	return open && {
+		start: open.start,
+		language: open.language
+	};
+};
+/**
+* Drops a table header still waiting for its delimiter row.
+*
+* - Until the delimiter row ends, GFM renders the header as a paragraph of raw pipes.
+* - Two shapes are withheld at the end: a lone pipe line, or that line plus a partial delimiter.
+* - A data row is never withheld: it has table rows above it.
+*/
+const withholdTableHead = (text) => {
+	const lastNl = text.lastIndexOf("\n");
+	const last = text.slice(lastNl + 1);
+	const prevNl = lastNl === -1 ? -1 : text.lastIndexOf("\n", lastNl - 1);
+	const prev = lastNl === -1 ? null : text.slice(prevNl + 1, lastNl);
+	const prevIsRow = prev !== null && TABLE_ROW.test(prev);
+	if (TABLE_ROW.test(last) && !prevIsRow) {
+		const firstPipe = last.indexOf("|");
+		return last.indexOf("|", firstPipe + 1) === -1 && last.length > TABLE_HEAD_FIRST_CELL_MAX ? text : text.slice(0, lastNl + 1);
+	}
+	if (prevIsRow && TABLE_DELIMITER_PARTIAL.test(last)) {
+		const prev2Nl = prevNl === -1 ? -1 : text.lastIndexOf("\n", prevNl - 1);
+		const prev2 = prevNl === -1 ? null : text.slice(prev2Nl + 1, prevNl);
+		if (prev2 === null || !TABLE_ROW.test(prev2)) return text.slice(0, prevNl + 1);
+	}
+	return text;
+};
+/**
+* The part of a streaming answer that is safe to paint now.
+*
+* - An open fence whose language is still being typed is always held back.
+* - An open fence in a `diagram` language is held back, or every chunk redraws the chart.
+* - Any other open fence streams as a growing code block.
+*/
+const withholdOpenTail = (text, { diagram = false, tableHead = false } = {}) => {
+	const fence = findOpenFence(text);
+	const diagramLanguages = diagram === true ? DIAGRAM_LANGUAGES : diagram === false ? [] : diagram;
+	const visible = fence === null ? text : fence.language === null || diagramLanguages.includes(fence.language) ? text.slice(0, fence.start) : null;
+	if (visible === null) return text;
+	return tableHead ? withholdTableHead(visible) : visible;
+};
+//#endregion
 //#region src/blocks/AIKit/SuggestedPrompt.tsx
-const SuggestedPrompt = ({ label, disabled, onClick, icon, variant = "row", className }) => {
+const SuggestedPrompt = ({ label, disabled, onClick, icon, description, trailing, "aria-label": ariaLabel, variant = "row", className }) => {
 	return /* @__PURE__ */ jsxs("button", {
 		type: "button",
 		disabled,
+		"aria-label": ariaLabel,
 		"data-variant": variant,
-		className: cn("tailwindcss-preflight tw:flex tw:items-center tw:justify-start tw:gap-2.5 tw:whitespace-nowrap", "tw:text-left tw:text-sm tw:text-foreground tw:transition-colors", "tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-ring tw:focus-visible:ring-offset-1", "tw:disabled:cursor-not-allowed tw:disabled:opacity-50", variant === "bubble" ? [
+		className: cn("tailwindcss-preflight tw:flex tw:items-center tw:justify-start tw:gap-2.5 tw:whitespace-nowrap", "tw:text-left tw:text-sm tw:text-foreground tw:transition-colors", "tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-ring tw:focus-visible:ring-offset-1", "tw:disabled:cursor-not-allowed tw:disabled:opacity-disabled", variant === "bubble" ? [
 			"tw:w-fit tw:max-w-[min(85%,40rem)] tw:rounded-xl tw:px-3 tw:py-2",
 			"tw:border tw:border-solid tw:border-border tw:bg-card",
-			"tw:not-disabled:hover:bg-muted tw:focus-visible:bg-muted"
-		] : "tw:rounded-lg tw:px-3 tw:py-2 tw:font-medium tw:not-disabled:hover:bg-accent", className),
+			"tw:not-disabled:hover:bg-hover tw:focus-visible:bg-hover"
+		] : "tw:rounded-lg tw:px-3 tw:py-2 tw:font-medium tw:not-disabled:hover:bg-hover", className),
 		onClick,
-		children: [icon ?? /* @__PURE__ */ jsx(Sparkles, { className: "tw:size-4 tw:shrink-0 tw:basis-4 tw:[&_*]:stroke-aigradient-600" }), /* @__PURE__ */ jsx("div", {
-			className: "tw:whitespace-normal tw:text-left",
-			children: label
-		})]
+		children: [
+			icon ?? /* @__PURE__ */ jsx(Sparkles, { className: "tw:size-4 tw:shrink-0 tw:basis-4 tw:[&_*]:stroke-aigradient-600" }),
+			description === void 0 ? /* @__PURE__ */ jsx("div", {
+				className: "tw:whitespace-normal tw:text-left",
+				children: label
+			}) : /* @__PURE__ */ jsxs("div", {
+				className: "tw:flex tw:min-w-0 tw:flex-1 tw:flex-col tw:gap-0.5 tw:whitespace-normal tw:text-left",
+				children: [/* @__PURE__ */ jsx("span", { children: label }), /* @__PURE__ */ jsx("span", {
+					className: "tw:text-xs tw:font-normal tw:text-muted-foreground",
+					children: description
+				})]
+			}),
+			trailing !== void 0 && /* @__PURE__ */ jsx("span", {
+				className: "tw:ml-auto tw:shrink-0",
+				children: trailing
+			})
+		]
 	});
 };
 //#endregion
@@ -2223,7 +3946,128 @@ const ThinkingIndicator = ({ label = "Thinking..." }) => {
 	});
 };
 //#endregion
-//#region src/blocks/AIKit/ToolCall/ToolCallApproval.tsx
+//#region src/blocks/AIKit/ToolCall/ToolCallApprovalActions.tsx
+const ShortcutHint = ({ shortcutKey }) => /* @__PURE__ */ jsxs(Kbd.Group, {
+	separator: "+",
+	children: [shortcutKey === "mod-enter" && /* @__PURE__ */ jsx(Kbd, {
+		variant: "primary",
+		children: keys.mod.symbol
+	}), /* @__PURE__ */ jsx(Kbd, {
+		variant: "primary",
+		children: keys.enter.symbol
+	})]
+});
+const BUTTON_CLASS = "tw:shrink-0 tw:whitespace-nowrap";
+const ToolCallApprovalActions = ({ onApprove, onReject, extraAction, approveLabel, rejectLabel, approveVariant, pendingAction, isDisabled, shortcutKey }) => {
+	const isLocked = isDisabled || pendingAction != null;
+	const approveButton = onApprove && /* @__PURE__ */ jsx(Button, {
+		"data-testid": "tool-approve-button",
+		variant: approveVariant,
+		size: "small",
+		className: BUTTON_CLASS,
+		onClick: onApprove,
+		disabled: isLocked,
+		isLoading: pendingAction === "approve",
+		children: approveLabel
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "tw:flex tw:items-center tw:justify-end tw:gap-2 tw:overflow-x-auto",
+		children: [
+			onReject && /* @__PURE__ */ jsx(Button, {
+				"data-testid": "tool-decline-button",
+				variant: "outline",
+				size: "small",
+				className: BUTTON_CLASS,
+				onClick: onReject,
+				disabled: isLocked,
+				isLoading: pendingAction === "reject",
+				children: rejectLabel
+			}),
+			extraAction && /* @__PURE__ */ jsx(Button, {
+				"data-testid": "tool-extra-action-button",
+				variant: "outline",
+				size: "small",
+				className: BUTTON_CLASS,
+				onClick: extraAction.onClick,
+				disabled: isLocked,
+				isLoading: pendingAction === "extra",
+				children: extraAction.label
+			}),
+			approveButton && shortcutKey !== "none" ? /* @__PURE__ */ jsx(Tooltip, {
+				tooltip: /* @__PURE__ */ jsx(ShortcutHint, { shortcutKey }),
+				placement: "top",
+				triggerAsChild: true,
+				children: approveButton
+			}) : approveButton
+		]
+	});
+};
+//#endregion
+//#region src/blocks/AIKit/ToolCall/ToolCallApprovalNotice.tsx
+const TONE = {
+	warning: {
+		icon: TriangleAlert,
+		className: "tw:bg-warning/10 tw:text-warning"
+	},
+	destructive: {
+		icon: CircleAlert,
+		className: "tw:bg-destructive/10 tw:text-destructive"
+	},
+	info: {
+		icon: Info,
+		className: "tw:bg-info/10 tw:text-info"
+	}
+};
+const ToolCallApprovalNotice = ({ tone, content, icon }) => {
+	const Icon = icon ?? TONE[tone].icon;
+	return /* @__PURE__ */ jsxs("p", {
+		"data-testid": "tool-call-approval-notice",
+		"data-tone": tone,
+		className: cn("tw:m-0 tw:flex tw:items-start tw:gap-2 tw:rounded-md tw:px-2.5 tw:py-1.5 tw:text-sm", TONE[tone].className),
+		children: [/* @__PURE__ */ jsx(Icon, {
+			className: "tw:mt-0.5 tw:size-4 tw:shrink-0",
+			"aria-hidden": true
+		}), /* @__PURE__ */ jsx("span", {
+			className: "tw:min-w-0 tw:text-foreground",
+			children: content
+		})]
+	});
+};
+//#endregion
+//#region src/blocks/AIKit/ToolCall/ToolCallApprovalRecord.tsx
+const ToolCallApprovalRecord = ({ status, label, subject, resolvedBy, resolvedAt, className }) => {
+	const isApproved = status === "approved";
+	const Icon = isApproved ? CircleCheck : CircleX;
+	return /* @__PURE__ */ jsxs("p", {
+		"data-testid": "tool-call-approval",
+		"data-status": status,
+		"data-density": "record",
+		className: cn("tw:m-0 tw:flex tw:min-w-0 tw:items-center tw:gap-1.5 tw:text-xs tw:text-muted-foreground", className),
+		children: [/* @__PURE__ */ jsx(Icon, {
+			"aria-hidden": true,
+			className: cn("tw:size-3.5 tw:shrink-0", isApproved ? "tw:text-success" : "tw:opacity-70")
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "tw:flex tw:min-w-0 tw:flex-wrap tw:items-baseline tw:gap-x-1.5",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "tw:font-medium tw:text-foreground",
+					children: label
+				}),
+				subject != null && /* @__PURE__ */ jsx("span", {
+					className: "tw:min-w-0 tw:truncate",
+					children: subject
+				}),
+				resolvedBy != null && /* @__PURE__ */ jsx("span", { children: resolvedBy }),
+				resolvedAt && /* @__PURE__ */ jsx("time", {
+					dateTime: resolvedAt.toISOString(),
+					children: resolvedAt.toLocaleString()
+				})
+			]
+		})]
+	});
+};
+//#endregion
+//#region src/blocks/AIKit/ToolCall/toolCallApprovalStatus.ts
 const STATUS_BADGE = {
 	pending: {
 		label: "Needs approval",
@@ -2239,93 +4083,163 @@ const STATUS_BADGE = {
 	},
 	expired: {
 		label: "Expired",
+		color: "orange"
+	},
+	"timed-out": {
+		label: "Timed out",
+		color: "orange"
+	},
+	cancelled: {
+		label: "Cancelled",
+		color: "gray"
+	},
+	unattended: {
+		label: "Unattended",
 		color: "gray"
 	}
 };
+//#endregion
+//#region src/blocks/AIKit/ToolCall/useApprovalShortcut.ts
+const isEditableTarget = (target) => target instanceof HTMLElement && (target.isContentEditable || target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.tagName === "SELECT");
+const isModPressed = (event) => isMac ? event.metaKey : event.ctrlKey;
+const matchesShortcut = (event, shortcutKey) => {
+	if (event.key !== "Enter" || event.shiftKey || event.altKey) return false;
+	if (shortcutKey === "mod-enter") return isModPressed(event);
+	return !event.metaKey && !event.ctrlKey && !isEditableTarget(event.target);
+};
 /**
-* Per-tool-call approve/reject frame — the granular sibling of `PlanApproval`
-* (which approves a whole plan). Chrome + status + actions only: the app
-* renders the call detail as `children` and owns the SDK/permission wiring.
+* Approves on `shortcutKey` from anywhere on the page while `isEnabled`.
+*
+* - `enter` skips keystrokes typed into a field; `mod-enter` fires from one too.
+* - Ignores key-repeat, IME composition and an event another handler already took.
 */
-const ToolCallApproval = ({ toolName, title, status, onApprove, onReject, children, actions, isSubmitting = false, enableShortcuts = false, approveLabel = "Approve", rejectLabel = "Reject", className }) => {
-	const isPending = status === "pending";
-	const hasCustomActions = actions != null;
-	const showActions = isPending && (isPending && !hasCustomActions && Boolean(onApprove || onReject) || hasCustomActions);
-	const badge = STATUS_BADGE[status];
+const useApprovalShortcut = ({ shortcutKey, isEnabled, onApprove }) => {
 	useEffect(() => {
-		if (!enableShortcuts || !isPending || isSubmitting) return;
-		const isEditableTarget = (target) => {
-			if (!(target instanceof HTMLElement)) return false;
-			return target.isContentEditable || target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.tagName === "SELECT";
-		};
+		if (shortcutKey === "none" || !isEnabled || !onApprove) return;
 		const handleKeyDown = (event) => {
-			if (event.repeat || event.defaultPrevented || isEditableTarget(event.target)) return;
-			if (event.key === "Enter" && !event.shiftKey && !event.ctrlKey && !event.metaKey && onApprove) {
-				event.preventDefault();
-				onApprove();
-			} else if (event.key === "Escape" && onReject) {
-				event.preventDefault();
-				onReject();
-			}
+			if (event.repeat || event.isComposing || event.defaultPrevented) return;
+			if (!matchesShortcut(event, shortcutKey)) return;
+			event.preventDefault();
+			onApprove();
 		};
 		window.addEventListener("keydown", handleKeyDown);
 		return () => window.removeEventListener("keydown", handleKeyDown);
 	}, [
-		enableShortcuts,
-		isPending,
-		isSubmitting,
-		onApprove,
-		onReject
+		shortcutKey,
+		isEnabled,
+		onApprove
 	]);
+};
+//#endregion
+//#region src/blocks/AIKit/ToolCall/ToolCallApproval.tsx
+/**
+* Per-tool-call approve/reject frame — the granular sibling of `PlanApproval`.
+*
+* - Chrome, status and actions only: the app renders the call detail and owns the permission wiring.
+* - Actions render only while `pending`.
+*/
+const ToolCallApproval = ({ status, statusLabel, statusMessage, density = "card", resolvedBy, resolvedAt, toolName, eyebrow, title, children, notices = [], aside, error, onApprove, onReject, extraAction, approveLabel = "Approve", rejectLabel = "Reject", approveVariant = "primary", pendingAction = null, isDisabled = false, shortcutKey = "none", isShortcutHintOnly = false, className }) => {
+	const isPending = status === "pending";
+	const badge = STATUS_BADGE[status];
+	const label = statusLabel ?? badge.label;
+	const showActions = isPending && Boolean(onApprove || onReject || extraAction);
+	useApprovalShortcut({
+		shortcutKey: isShortcutHintOnly ? "none" : shortcutKey,
+		isEnabled: isPending && !isDisabled && pendingAction == null,
+		onApprove
+	});
+	if (density === "record" && !isPending) return /* @__PURE__ */ jsx(ToolCallApprovalRecord, {
+		status,
+		label,
+		subject: title ?? toolName,
+		resolvedBy,
+		resolvedAt,
+		className
+	});
+	const showBadge = !isPending || eyebrow == null;
+	const hasHeadline = showBadge || toolName != null;
 	return /* @__PURE__ */ jsxs("section", {
 		"data-testid": "tool-call-approval",
 		"data-status": status,
-		"aria-label": typeof title === "string" ? title : toolName,
-		className: cn("tw:flex tw:w-full tw:max-w-[800px] tw:flex-col tw:gap-3 tw:overflow-hidden tw:rounded-xl tw:border tw:border-solid tw:border-border tw:bg-muted tw:p-4", className),
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: "tw:flex tw:items-center tw:gap-2",
-				children: [/* @__PURE__ */ jsx(Badge, {
-					color: badge.color,
-					variant: "pill",
-					className: "tw:normal-case tw:tracking-normal",
-					children: badge.label
-				}), /* @__PURE__ */ jsx("code", {
-					className: "tw:rounded tw:bg-background tw:px-1.5 tw:py-0.5 tw:font-mono tw:text-xs tw:text-foreground",
-					children: toolName
-				})]
-			}),
-			title != null && /* @__PURE__ */ jsx("p", {
-				className: "tw:m-0 tw:text-sm tw:font-medium tw:text-foreground",
-				children: title
-			}),
-			children,
-			showActions && /* @__PURE__ */ jsx("div", {
-				className: "tw:flex tw:items-center tw:justify-end tw:gap-2 tw:overflow-x-auto",
-				children: actions ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [onReject && /* @__PURE__ */ jsx(Button, {
-					variant: "outline",
-					size: "small",
-					onClick: onReject,
-					disabled: isSubmitting,
-					className: "tw:shrink-0 tw:whitespace-nowrap",
-					children: rejectLabel
-				}), onApprove && /* @__PURE__ */ jsx(Button, {
-					variant: "primary",
-					size: "small",
-					onClick: onApprove,
-					disabled: isSubmitting,
-					className: "tw:shrink-0 tw:whitespace-nowrap",
-					children: approveLabel
-				})] })
-			})
-		]
+		"data-density": "card",
+		"aria-label": typeof title === "string" ? title : toolName ?? label,
+		className: cn("tw:flex tw:w-full tw:max-w-[800px] tw:flex-col tw:overflow-hidden tw:rounded-lg tw:border tw:border-solid tw:border-border tw:bg-card tw:text-card-foreground", className),
+		children: [eyebrow, /* @__PURE__ */ jsxs("div", {
+			className: "tw:flex tw:flex-col tw:gap-3 tw:p-3",
+			children: [
+				(hasHeadline || title != null || !isPending && statusMessage != null) && /* @__PURE__ */ jsxs("div", {
+					className: "tw:flex tw:flex-col tw:gap-1.5",
+					children: [
+						hasHeadline && /* @__PURE__ */ jsxs("div", {
+							className: "tw:flex tw:flex-wrap tw:items-center tw:gap-2",
+							children: [showBadge && /* @__PURE__ */ jsx(Badge, {
+								color: badge.color,
+								variant: "pill",
+								className: "tw:normal-case tw:tracking-normal",
+								children: label
+							}), toolName != null && /* @__PURE__ */ jsx("code", {
+								className: "tw:rounded tw:bg-muted tw:px-1.5 tw:py-0.5 tw:font-mono tw:text-xs tw:text-foreground",
+								children: toolName
+							})]
+						}),
+						title != null && /* @__PURE__ */ jsx("p", {
+							className: "tw:m-0 tw:text-sm tw:font-medium tw:text-foreground",
+							children: title
+						}),
+						!isPending && statusMessage != null && /* @__PURE__ */ jsx("p", {
+							"data-testid": "tool-call-approval-status-message",
+							className: "tw:m-0 tw:text-sm tw:text-muted-foreground",
+							children: statusMessage
+						}),
+						(resolvedBy != null || resolvedAt) && !isPending && /* @__PURE__ */ jsxs("p", {
+							className: "tw:m-0 tw:flex tw:flex-wrap tw:gap-x-1.5 tw:text-xs tw:text-muted-foreground",
+							children: [resolvedBy != null && /* @__PURE__ */ jsx("span", { children: resolvedBy }), resolvedAt && /* @__PURE__ */ jsx("time", {
+								dateTime: resolvedAt.toISOString(),
+								children: resolvedAt.toLocaleString()
+							})]
+						})
+					]
+				}),
+				notices.map((notice, index) => /* @__PURE__ */ jsx(ToolCallApprovalNotice, { ...notice }, index)),
+				(children != null || aside != null) && /* @__PURE__ */ jsx("div", {
+					className: "tw:@container",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "tw:flex tw:flex-col tw:gap-3 tw:@xl:flex-row",
+						children: [children != null && /* @__PURE__ */ jsx("div", {
+							className: "tw:min-w-0 tw:flex-1",
+							children
+						}), aside != null && /* @__PURE__ */ jsx("div", {
+							"data-testid": "tool-call-approval-aside",
+							className: "tw:min-w-0 tw:@xl:w-1/2 tw:@xl:shrink-0",
+							children: aside
+						})]
+					})
+				}),
+				error != null && /* @__PURE__ */ jsx("div", {
+					role: "alert",
+					className: "tw:rounded-md tw:bg-destructive/10 tw:p-2 tw:text-sm tw:text-destructive tw:whitespace-pre-wrap tw:break-words",
+					children: error
+				}),
+				showActions && /* @__PURE__ */ jsx(ToolCallApprovalActions, {
+					onApprove,
+					onReject,
+					extraAction,
+					approveLabel,
+					rejectLabel,
+					approveVariant,
+					pendingAction,
+					isDisabled,
+					shortcutKey
+				})
+			]
+		})]
 	});
 };
 //#endregion
 //#region src/blocks/AIKit/ToolCall/ToolCallChip.tsx
 const chipClasses = cva(["tw:inline-flex tw:items-center tw:gap-1.5 tw:rounded-md tw:border tw:border-solid", "tw:border-border tw:bg-muted tw:px-2 tw:py-1 tw:text-xs tw:text-foreground"], {
 	variants: { interactive: {
-		true: "tw:cursor-pointer tw:focus-visible:outline-hidden tw:focus-visible:ring-2 tw:focus-visible:ring-ring tw:not-disabled:hover:bg-accent",
+		true: "tw:cursor-pointer tw:focus-visible:outline-hidden tw:focus-visible:ring-2 tw:focus-visible:ring-ring tw:not-disabled:hover:bg-hover",
 		false: ""
 	} },
 	defaultVariants: { interactive: false }
@@ -2527,6 +4441,6 @@ const UsageStats = ({ value, alert = false, children, className, ariaLabel, alig
 	});
 };
 //#endregion
-export { AnswerActions, AnswerSummary, ChatInlineIcon, CollapsibleStepHeader, DIAGRAM_LANGUAGES, FileDownloadChip, InlineStepDetail, InlineStepGroup, InlineStepLabel, Markdown, MarkdownTable, MessageBubble, PROMPT_INPUT_CONTAINER, PlanApproval, PlanRewritingIndicator, PromptInput, Question, QuestionBlock, SuggestedPrompt, ThinkingIndicator, ToolCallApproval, ToolCallChip, ToolCallStatusHeader, UsageBar, UsageStats, UsageStatsRing, clampPercentage, findMentionToken, findSlashToken, formatPercentage, getChatInlineIconName };
+export { ANSWER_SOURCES_VISIBLE, AnswerActions, AnswerSources, AnswerSummary, AttachmentChip, CONTEXT_CHIP_EXPANDABLE_LENGTH, ChatInlineIcon, ChatNotice, CollapsibleStepHeader, ContextChip, DIAGRAM_LANGUAGES, FileDownloadChip, FileGallery, InlineStepDetail, InlineStepGroup, InlineStepLabel, JumpToLatest, Markdown, MarkdownTable, MessageBubble, ModeChip, PROMPT_INPUT_CONTAINER, PlanApproval, PlanRewritingIndicator, PromptInput, Question, QuestionBlock, SourceChip, SuggestedPrompt, ThinkingIndicator, ToolCallApproval, ToolCallChip, ToolCallStatusHeader, UsageBar, UsageStats, UsageStatsRing, clampPercentage, findMentionToken, findSlashToken, formatPercentage, getChatInlineIconName, splitSealedBlocks, withholdOpenTail };
 
-//# sourceMappingURL=AIKit-BVCWP9Ks.js.map
+//# sourceMappingURL=AIKit-BRSZ3nY7.js.map