@keboola/design 11.3.0 → 11.5.0

package/dist/{AIKit-DaFT7p92.js → AIKit-CNX6aiKm.js}

@@ -1,39 +1,105 @@
 import { cn } from "./classNames-BzrkDnOD.js";
-import { Tooltip, TooltipProvider } from "./utils-B-g7d_Jb.js";
-import { AlertCircle, ChevronDown, ChevronLeft, ChevronRight, CircleCheck, CirclePause, CircleX, FileText, Loader2, Maximize2, Minimize2, Play, Send, X, XCircle } from "./icons-Cek151jC.js";
-import { Button } from "./Button-CPsEQuTN.js";
-import { ClipboardButton } from "./ClipboardButton-CQ6Aewpg.js";
-import { FullScreenModal, FullScreenModalBody, FullScreenModalHeader } from "./FullScreenModal-j-M4aPFd.js";
+import { Tooltip, TooltipProvider } from "./utils-DSvrhU8E.js";
+import { AlertCircle, ChevronDown, ChevronLeft, ChevronRight, CircleCheck, CirclePause, CircleX, Loader2, Maximize2, Minimize2, Play, Send, Sparkles, ThumbsDown, ThumbsUp, TriangleAlert, X, XCircle } from "./icons-Cek151jC.js";
+import { Button } from "./Button-DsRrU5F1.js";
+import { ButtonGroup } from "./internal/components/ButtonGroup.js";
+import { ClipboardButton } from "./ClipboardButton-CwZJdRaz.js";
+import { FullScreenModal, FullScreenModalBody, FullScreenModalHeader } from "./FullScreenModal-BvPuYibe.js";
 import { Truncated } from "./internal/components/Truncated.js";
-import { HoverCard } from "./HoverCard-yQq-O49c.js";
-import { Command } from "./Command-Ds68v2rX.js";
-import { TextInput } from "./TextInput-DhdRk8qm.js";
-import { Checkbox } from "./Checkbox-5VNCcV7E.js";
-import { Badge } from "./Badge-Ch26CXoP.js";
+import { HoverCard } from "./HoverCard-B9ZMJxjn.js";
+import { Command } from "./Command-Bfa1kpbt.js";
+import { TextInput } from "./TextInput-DH5SkbsE.js";
+import { Checkbox } from "./Checkbox-CUIn2jap.js";
+import { Badge } from "./Badge-D0pXdekt.js";
 import { Textarea } from "./internal/blocks/Textarea.js";
 import { Table } from "./Table-CvYuTuNU.js";
 import { DiagramSkeleton } from "./internal/blocks/DiagramShared/DiagramSkeleton.js";
-import { Avatar } from "./internal/components/Avatar.js";
 import { Progress } from "./internal/components/Progress.js";
 import { Slot } from "@radix-ui/react-slot";
-import { Suspense, isValidElement, lazy, useEffect, useId, useRef, useState } from "react";
+import { Suspense, isValidElement, lazy, useCallback, useEffect, useId, 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";
+//#region src/blocks/AIKit/AnswerActions.tsx
+const VOTE_BUTTONS = [{
+	vote: "up",
+	label: "Good answer",
+	icon: /* @__PURE__ */ jsx(ThumbsUp, { className: "tw:size-4" })
+}, {
+	vote: "down",
+	label: "Bad answer",
+	icon: /* @__PURE__ */ jsx(ThumbsDown, { className: "tw:size-4" })
+}];
+/**
+* What a reader can do with a finished answer: take it away, and say whether it was any good.
+*
+* - **Always rendered, never hover-only.** A reveal-on-hover row does not exist for anyone
+*   reaching it without a pointer. The buttons are quiet (`invisible`) rather than hidden.
+* - Copy sits first: it is the one action with no round trip.
+* - **A vote can be changed but not withdrawn.** `aria-pressed` says which one is recorded, and
+*   both buttons stay focusable so a reader can switch. Pressing the pressed one re-sends the
+*   same vote.
+* - The recorded vote and the write are the caller's: the two chats vote against different
+*   endpoints, and only the caller knows whether a turn is finished enough to rate.
+*/
+const AnswerActions = ({ copyText, vote, onVote }) => {
+	return /* @__PURE__ */ jsxs(ButtonGroup, {
+		space: "extra-small",
+		"aria-label": "Answer actions",
+		children: [copyText ? /* @__PURE__ */ jsx(ClipboardButton, {
+			text: copyText,
+			tooltip: "Copy answer",
+			size: "icon-xs",
+			variant: "invisible"
+		}) : null, VOTE_BUTTONS.map(({ vote: candidate, label, icon }) => {
+			const isRecorded = vote === candidate;
+			return /* @__PURE__ */ jsx(Tooltip, {
+				tooltip: label,
+				placement: "top",
+				triggerAsChild: true,
+				children: /* @__PURE__ */ jsx(Button, {
+					size: "icon-xs",
+					variant: isRecorded ? "secondary" : "invisible",
+					"aria-label": label,
+					"aria-pressed": isRecorded,
+					onClick: () => onVote(candidate),
+					children: icon
+				})
+			}, candidate);
+		})]
+	});
+};
+//#endregion
+//#region src/blocks/AIKit/CollapsibleBody.tsx
+const CollapsibleBody = ({ isExpanded, isClosing, onClosed, children }) => {
+	const handleTransitionEnd = (event) => {
+		if (event.target !== event.currentTarget) return;
+		if (event.propertyName !== "grid-template-rows") return;
+		if (!isExpanded) onClosed();
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("tw:grid tw:transition-[grid-template-rows] tw:duration-300 tw:ease-out tw:motion-reduce:transition-none", isExpanded ? "tw:grid-rows-[1fr]" : "tw:grid-rows-[0fr]"),
+		onTransitionEnd: handleTransitionEnd,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "tw:min-h-0 tw:overflow-hidden",
+			children: (isExpanded || isClosing) && children
+		})
+	});
+};
+//#endregion
 //#region src/blocks/AIKit/CollapsibleStepHeader.tsx
 const variantClasses = {
-	success: "tw:text-secondary-500 tw:focus-visible:outline-ring tw:not-disabled:hover:text-secondary-600",
-	error: "tw:text-error-500 tw:focus-visible:outline-error-500 tw:not-disabled:hover:text-error-600",
-	processing: "tw:text-secondary-500 tw:focus-visible:outline-ring tw:not-disabled:hover:text-secondary-600",
-	dismissed: "tw:text-neutral-700 tw:focus-visible:outline-neutral-500 tw:not-disabled:hover:text-neutral-800"
+	success: "tw:text-muted-foreground tw:focus-visible:outline-ring tw:not-disabled:hover:text-foreground",
+	error: "tw:text-destructive tw:focus-visible:outline-destructive tw:not-disabled:hover:text-destructive",
+	processing: "tw:text-muted-foreground tw:focus-visible:outline-ring tw:not-disabled:hover:text-foreground",
+	dismissed: "tw:text-muted-foreground tw:focus-visible:outline-ring tw:not-disabled:hover:text-foreground"
 };
-const iconClasses = "tw:size-4 tw:shrink-0 tw:basis-4";
+const iconClasses = "tw:size-3.5 tw:shrink-0 tw:basis-3.5 tw:opacity-70";
 const renderVariantIcon$1 = (variant) => {
 	if (variant === "processing") return /* @__PURE__ */ jsx(Loader2, { className: cn(iconClasses, "tw:animate-spin") });
-	if (variant === "error") return /* @__PURE__ */ jsx(XCircle, { className: iconClasses });
-	if (variant === "dismissed") return /* @__PURE__ */ jsx(XCircle, { className: cn(iconClasses, "tw:text-neutral-500") });
+	if (variant === "error" || variant === "dismissed") return /* @__PURE__ */ jsx(XCircle, { className: iconClasses });
 	return /* @__PURE__ */ jsx(CircleCheck, { className: iconClasses });
 };
 const CollapsibleStepHeader = ({ isExpanded, onToggle, label, variant = "success" }) => {
@@ -41,37 +107,40 @@ const CollapsibleStepHeader = ({ isExpanded, onToggle, label, variant = "success
 		type: "button",
 		"aria-expanded": isExpanded,
 		onClick: onToggle,
-		className: cn("tw:flex tw:w-fit tw:items-start tw:gap-2 tw:text-left tw:text-sm tw:font-medium tw:italic tw:transition-colors tw:focus-visible:outline tw:focus-visible:outline-2 tw:focus-visible:outline-offset-2 tw:disabled:opacity-40", variantClasses[variant]),
+		className: cn("tw:flex tw:w-fit tw:items-center tw:gap-1.5 tw:text-left tw:text-xs tw:font-medium tw:transition-colors tw:focus-visible:outline tw:focus-visible:outline-2 tw:focus-visible:outline-offset-2 tw:disabled:opacity-40", variantClasses[variant]),
 		children: [renderVariantIcon$1(variant), /* @__PURE__ */ jsxs("span", {
 			className: "tw:min-w-0",
 			children: [label, /* @__PURE__ */ jsxs("span", {
 				className: "tw:whitespace-nowrap",
-				children: ["⁠", /* @__PURE__ */ jsx(ChevronDown, { className: cn("tw:ml-2 tw:inline-block tw:size-4 tw:align-middle tw:transition-transform", isExpanded && "tw:rotate-180") })]
+				children: ["⁠", /* @__PURE__ */ jsx(ChevronDown, { className: cn("tw:ml-1.5 tw:inline-block tw:size-3.5 tw:align-middle tw:transition-transform", isExpanded && "tw:rotate-180") })]
 			})]
 		})]
 	});
 };
 //#endregion
+//#region src/blocks/AIKit/hasMotion.ts
+const hasMotion = () => typeof window.matchMedia === "function" && !window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+//#endregion
 //#region src/blocks/AIKit/InlineStepDetail.tsx
 const InlineStepDetail = ({ children }) => /* @__PURE__ */ jsx("div", {
-	className: "tw:ml-2.5 tw:whitespace-pre-wrap tw:border-l tw:border-neutral-200 tw:pl-3 tw:text-xs tw:text-neutral-400",
+	className: "tw:ml-2.5 tw:whitespace-pre-wrap tw:border-l tw:border-border tw:pl-3 tw:text-xs tw:text-muted-foreground",
 	children
 });
 //#endregion
 //#region src/blocks/AIKit/InlineStepLabel.tsx
 const renderVariantIcon = (variant) => {
-	if (variant === "processing") return /* @__PURE__ */ jsx(Loader2, { className: "tw:size-4 tw:animate-spin tw:text-neutral-200" });
-	if (variant === "error") return /* @__PURE__ */ jsx(XCircle, { className: "tw:size-4 tw:text-error-500" });
-	if (variant === "dismissed") return /* @__PURE__ */ jsx(XCircle, { className: "tw:size-4 tw:text-neutral-200" });
-	return /* @__PURE__ */ jsx(CircleCheck, { className: "tw:size-4 tw:text-neutral-200" });
+	if (variant === "processing") return /* @__PURE__ */ jsx(Loader2, { className: "tw:size-3.5 tw:animate-spin tw:text-muted-foreground" });
+	if (variant === "error") return /* @__PURE__ */ jsx(XCircle, { className: "tw:size-3.5 tw:text-destructive" });
+	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:flex tw:size-5 tw:shrink-0 tw:items-center tw:justify-center",
+		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-sm tw:font-medium tw:italic tw:text-neutral-800",
+		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
 	})]
 });
@@ -81,29 +150,40 @@ const SECTION_LABELS = {
 	success: "Answered questions",
 	dismissed: "Dismissed questions"
 };
-const AnswerSummary = ({ items, variant = "success", noAnswerLabel = "No answer" }) => {
+const AnswerSummary = ({ items, variant = "success", noAnswerLabel = "No answer", onExpandToggle }) => {
 	const [isExpanded, setIsExpanded] = useState(false);
-	const toggle = () => setIsExpanded((prev) => !prev);
+	const [isClosing, setIsClosing] = useState(false);
+	const toggle = () => {
+		const next = !isExpanded;
+		if (!next) setIsClosing(hasMotion());
+		setIsExpanded(next);
+		onExpandToggle?.(next);
+	};
 	const count = items.length;
 	const [firstItem] = items;
 	const label = count === 1 && firstItem ? firstItem.question : `${count} questions`;
 	return /* @__PURE__ */ jsxs("section", {
-		className: "tw:mt-4 tw:flex tw:flex-col tw:gap-4",
+		className: "tw:mt-4 tw:flex tw:flex-col",
 		"aria-label": SECTION_LABELS[variant],
 		children: [/* @__PURE__ */ jsx(CollapsibleStepHeader, {
 			isExpanded,
 			onToggle: toggle,
 			variant,
 			label
-		}), isExpanded && /* @__PURE__ */ jsx("div", {
-			className: "tw:flex tw:flex-col tw:gap-4 tw:pl-5",
-			children: items.map(({ question, answer }, index) => /* @__PURE__ */ jsxs("div", {
-				className: "tw:flex tw:flex-col tw:gap-1",
-				children: [/* @__PURE__ */ jsx(InlineStepLabel, {
-					variant,
-					children: question
-				}), /* @__PURE__ */ jsx(InlineStepDetail, { children: answer && answer.length > 0 ? answer : noAnswerLabel })]
-			}, `${index}-${question}`))
+		}), /* @__PURE__ */ jsx(CollapsibleBody, {
+			isExpanded,
+			isClosing,
+			onClosed: () => setIsClosing(false),
+			children: /* @__PURE__ */ jsx("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", {
+					className: "tw:flex tw:flex-col tw:gap-1",
+					children: [/* @__PURE__ */ jsx(InlineStepLabel, {
+						variant,
+						children: question
+					}), /* @__PURE__ */ jsx(InlineStepDetail, { children: answer && answer.length > 0 ? answer : noAnswerLabel })]
+				}, `${index}-${question}`))
+			})
 		})]
 	});
 };
@@ -113,6 +193,10 @@ const MermaidDiagram = lazy(() => import("@keboola/design/mermaid").then((module
 	console.error("[AIKit] failed to load the MermaidDiagram chunk", error);
 	return { default: ({ code }) => /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { children: code }) }) };
 }));
+const FlintChart = lazy(() => import("@keboola/design/flint").then((module) => ({ default: module.FlintChart }), (error) => {
+	console.error("[AIKit] failed to load the FlintChart chunk", error);
+	return { default: ({ code }) => /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { children: code }) }) };
+}));
 const proseClass = "tw:prose tw:prose-sm tw:max-w-none tw:break-words tw:[&_pre]:bg-muted tw:[&_pre]:text-foreground tw:[&_:not(pre)>code]:bg-muted tw:[&_:not(pre)>code]:text-foreground tw:[&_:not(pre)>code]:rounded tw:[&_:not(pre)>code]:px-1 tw:[&_:not(pre)>code]:py-0.5 tw:[&_:not(pre)>code]:before:content-none tw:[&_:not(pre)>code]:after:content-none";
 const getText = (node) => {
 	if (typeof node === "string") return node;
@@ -128,19 +212,56 @@ const getLanguage = (element) => {
 	if (typeof props.className !== "string") return void 0;
 	return props.className.match(/language-(\S+)/)?.[1];
 };
-const components = {
+/**
+* The plugins this renderer always runs.
+*
+* - GFM is part of its contract: tables route through the design `Table`, and autolinks and
+*   task lists are what an assistant answer is written in.
+* - A caller's own plugins are appended to these, never substituted for them.
+*/
+const baseRemarkPlugins = [remarkGfm];
+/**
+* Fence language → the renderer that draws it.
+*
+* - Both dialects are the agent's, not this package's: kai-agent's prompt tells the model to
+*   write ```mermaid for structure and ```flint for quantitative data, so a chat that renders
+*   one and not the other drops output the agent was instructed to produce.
+* - `flint-chart` is an alias — it is the fence tag flint's own docs use, so a model emits it
+*   unprompted often enough to matter. `markdownComponents.tsx` in kbc-ui carries the same pair.
+* - Read through `Object.hasOwn`, never by plain index: a fence tagged ```constructor or
+*   ```valueOf otherwise answers with an `Object.prototype` member, which is truthy, and mounting
+*   it as a component throws — taking the whole message subtree down with it.
+*/
+const DIAGRAM_RENDERERS = {
+	mermaid: MermaidDiagram,
+	flint: FlintChart,
+	"flint-chart": FlintChart
+};
+/**
+* The fence languages this renderer draws instead of printing.
+*
+* - For a caller that streams: a diagram mounts a lazily loaded chunk, so an answer arriving a
+*   token at a time has to keep a fence that is still open an ordinary code block, or every
+*   keystroke fetches the chunk. Sharing the list is what keeps that hold-back from missing a
+*   dialect this map has and the caller does not.
+* - Frozen, because it is that shared contract: a consumer that pushed onto it would change how
+*   every other app in the same bundle holds a fence back.
+*/
+const DIAGRAM_LANGUAGES = Object.freeze(Object.keys(DIAGRAM_RENDERERS));
+const baseComponents = {
 	pre({ children, ...props }) {
 		const child = Array.isArray(children) ? children[0] : children;
-		if (getLanguage(child) === "mermaid") {
-			const code = getText(child).replace(/\n$/, "");
+		const code = getText(child).replace(/\n$/, "");
+		const language = getLanguage(child);
+		const Diagram = language !== void 0 && Object.hasOwn(DIAGRAM_RENDERERS, language) ? DIAGRAM_RENDERERS[language] : void 0;
+		if (Diagram) {
 			if (!code.trim()) return null;
 			return /* @__PURE__ */ jsx(Suspense, {
 				fallback: /* @__PURE__ */ jsx(DiagramSkeleton, {}),
-				children: /* @__PURE__ */ jsx(MermaidDiagram, { code })
+				children: /* @__PURE__ */ jsx(Diagram, { code })
 			});
 		}
 		const { node: _node, ...rest } = props;
-		const code = getText(child).replace(/\n$/, "");
 		return /* @__PURE__ */ jsxs("div", {
 			className: "tw:group tw:relative",
 			children: [/* @__PURE__ */ jsx("span", {
@@ -207,13 +328,16 @@ const components = {
 * `MessageBubble` to render an assistant message body. Code blocks expose a
 * copy button, so mount a `TooltipProvider` once at the app root.
 */
-const Markdown = ({ children, className }) => {
+const Markdown = ({ children, className, remarkPlugins, components: componentOverrides }) => {
 	return /* @__PURE__ */ jsx("div", {
 		"data-prose": true,
 		className: cn(proseClass, className),
 		children: /* @__PURE__ */ jsx(ReactMarkdown, {
-			remarkPlugins: [remarkGfm],
-			components,
+			remarkPlugins: remarkPlugins === void 0 ? baseRemarkPlugins : [...baseRemarkPlugins, ...remarkPlugins],
+			components: componentOverrides === void 0 ? baseComponents : {
+				...baseComponents,
+				...componentOverrides
+			},
 			children
 		})
 	});
@@ -223,22 +347,31 @@ const Markdown = ({ children, className }) => {
 const containerClasses = cva([
 	"tw:flex",
 	"tw:max-w-full",
-	"tw:gap-4"
+	"tw:gap-3"
 ], {
 	variants: { variant: {
-		user: ["tw:justify-self-end", "tw:flex-row-reverse"],
-		assistant: [
-			"tw:justify-self-start",
-			"tw:w-full",
-			"tw:gap-3"
-		]
+		user: ["tw:justify-end"],
+		assistant: ["tw:justify-start", "tw:w-full"]
+	} },
+	defaultVariants: { variant: "assistant" }
+});
+const stackClasses = cva([
+	"tw:flex",
+	"tw:min-w-0",
+	"tw:flex-1",
+	"tw:flex-col",
+	"tw:gap-2"
+], {
+	variants: { variant: {
+		user: ["tw:items-end"],
+		assistant: []
 	} },
 	defaultVariants: { variant: "assistant" }
 });
 const contentClasses = cva([
 	"tw:flex",
 	"tw:flex-col",
-	"tw:gap-4",
+	"tw:gap-3",
 	"tw:break-words",
 	"tw:leading-relaxed",
 	"tw:text-foreground",
@@ -252,33 +385,30 @@ const contentClasses = cva([
 			"tw:[&>*]:min-w-0"
 		],
 		user: [
-			"tw:max-w-screen-sm",
+			"tw:max-w-[min(85%,40rem)]",
 			"tw:w-fit",
 			"tw:bg-muted",
-			"tw:p-3",
-			"tw:rounded-2xl",
-			"tw:ml-6",
+			"tw:px-3",
+			"tw:py-2",
+			"tw:rounded-xl",
 			"tw:overflow-hidden",
 			"tw:break-anywhere"
 		]
 	} },
 	defaultVariants: { variant: "assistant" }
 });
-const MessageBubble = ({ variant, children, user, actions, createdAt }) => {
-	return /* @__PURE__ */ jsxs("div", {
+const MessageBubble = ({ variant, children, actions, createdAt }) => {
+	return /* @__PURE__ */ jsx("div", {
 		className: containerClasses({ variant }),
 		"data-testid": `chat-message-${variant}`,
-		children: [variant === "user" && /* @__PURE__ */ jsx(Avatar, {
-			user,
-			size: 30,
-			title: createdAt
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "tw:flex tw:min-w-0 tw:flex-1 tw:flex-col tw:gap-2",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: stackClasses({ variant }),
 			children: [/* @__PURE__ */ jsx("div", {
 				className: contentClasses({ variant }),
+				title: variant === "user" ? createdAt : void 0,
 				children
 			}), actions]
-		})]
+		})
 	});
 };
 //#endregion
@@ -319,7 +449,7 @@ const ExpandToggle = ({ isExpanded, onToggle, showMoreLabel, showLessLabel }) =>
 });
 const ChangeRequestForm = ({ value, onValueChange, onSubmit, onKeyDown, placeholder, submitLabel, formLabel, canSubmit, isSubmitting }) => /* @__PURE__ */ jsx("form", {
 	onSubmit,
-	className: "tw:border-0 tw:border-t tw:border-solid tw:border-neutral-100 tw:bg-white tw:px-4 tw:py-3",
+	className: "tw:border-0 tw:border-t tw:border-solid tw:border-border tw:bg-card tw:text-card-foreground tw:px-4 tw:py-3",
 	"aria-label": formLabel,
 	children: /* @__PURE__ */ jsxs("div", {
 		className: "tw:relative",
@@ -399,8 +529,10 @@ const PlanApproval = ({ status, title, summary, stepCount, planBody, defaultExpa
 	const canShowPlanBody = planBody != null;
 	const trimmedChangeRequest = changeRequest.trim();
 	const canSubmitChangeRequest = trimmedChangeRequest.length > 0 && !isSubmitting;
+	const [isClosing, setIsClosing] = useState(false);
 	const toggleExpanded = () => {
 		const next = !isExpanded;
+		if (!next) setIsClosing(hasMotion());
 		if (isExpandedProp === void 0) setUncontrolledExpanded(next);
 		onExpandToggle?.(next);
 	};
@@ -449,7 +581,7 @@ const PlanApproval = ({ status, title, summary, stepCount, planBody, defaultExpa
 	});
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("section", {
 		"aria-label": title,
-		className: cn("tw:flex tw:w-full tw:max-w-[800px] tw:flex-col tw:overflow-hidden tw:rounded-xl tw:border tw:border-solid tw:border-border tw:bg-neutral-50", className),
+		className: cn("tw:flex tw:w-full tw:max-w-[800px] tw:flex-col tw:overflow-hidden tw:rounded-xl tw:border tw:border-solid tw:border-border tw:bg-background tw:text-foreground", className),
 		"data-testid": "plan-approval-root",
 		"data-plan-status": status,
 		children: [
@@ -466,11 +598,11 @@ const PlanApproval = ({ status, title, summary, stepCount, planBody, defaultExpa
 							dismissedLabel: dismissedPillLabel,
 							changesRequestedLabel: changesRequestedPillLabel
 						}), stepCount != null && stepCount > 0 && /* @__PURE__ */ jsx("span", {
-							className: "tw:text-xs tw:leading-4 tw:text-neutral-500",
+							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 tw:text-neutral-800",
+						className: "tw:m-0 tw:text-base tw:font-semibold tw:leading-6",
 						children: title
 					})]
 				}), /* @__PURE__ */ jsxs("div", {
@@ -499,15 +631,20 @@ const PlanApproval = ({ status, title, summary, stepCount, planBody, defaultExpa
 				})]
 			}),
 			summary != null && /* @__PURE__ */ jsx("div", {
-				className: cn("tw:whitespace-pre-wrap tw:border-0 tw:border-t tw:border-solid tw:border-neutral-100 tw:px-4 tw:pt-4 tw:text-sm tw:text-neutral-700", isExpanded && canShowPlanBody ? "tw:pb-4" : "tw:pb-2"),
+				className: cn("tw:whitespace-pre-wrap tw:border-0 tw:border-t tw:border-solid tw:border-border tw:px-4 tw:pt-4 tw:text-sm", isExpanded && canShowPlanBody ? "tw:pb-4" : "tw:pb-2"),
 				children: summary
 			}),
-			isExpanded && canShowPlanBody && /* @__PURE__ */ jsx("div", {
-				className: "tw:max-h-[400px] tw:overflow-y-auto tw:border-0 tw:border-t tw:border-solid tw:border-neutral-100 tw:bg-white tw:p-4 tw:text-sm tw:text-neutral-700",
-				children: planBody
+			canShowPlanBody && /* @__PURE__ */ jsx(CollapsibleBody, {
+				isExpanded,
+				isClosing,
+				onClosed: () => setIsClosing(false),
+				children: /* @__PURE__ */ jsx("div", {
+					className: "tw:max-h-[400px] tw:overflow-y-auto tw:border-0 tw:border-t tw:border-solid tw:border-border tw:bg-card tw:p-4 tw:text-sm tw:text-card-foreground",
+					children: planBody
+				})
 			}),
 			!isFullScreen && /* @__PURE__ */ jsxs(Fragment$1, { children: [showChangeRequestForm && changeRequestForm, /* @__PURE__ */ jsxs("div", {
-				className: cn("tw:flex tw:items-center tw:gap-2 tw:overflow-x-auto tw:border-0 tw:border-t tw:border-solid tw:border-neutral-100 tw:bg-white tw:px-4 tw:py-3", canShowPlanBody ? "tw:justify-between" : "tw:justify-end"),
+				className: cn("tw:flex tw:items-center tw:gap-2 tw:overflow-x-auto tw:border-0 tw:border-t tw:border-solid tw:border-border tw:bg-card tw:px-4 tw:py-3 tw:text-card-foreground", canShowPlanBody ? "tw:justify-between" : "tw:justify-end"),
 				children: [canShowPlanBody && /* @__PURE__ */ jsx("div", {
 					className: "tw:shrink-0",
 					children: /* @__PURE__ */ jsx(ExpandToggle, {
@@ -569,14 +706,14 @@ const PlanApproval = ({ status, title, summary, stepCount, planBody, defaultExpa
 				})
 			}),
 			/* @__PURE__ */ jsx(FullScreenModalBody, {
-				className: "tw:bg-white tw:px-6 tw:py-4",
+				className: "tw:bg-card tw:px-6 tw:py-4 tw:text-card-foreground",
 				children: /* @__PURE__ */ jsx("div", {
-					className: "tw:mx-auto tw:w-full tw:max-w-[800px] tw:text-sm tw:text-neutral-700",
+					className: "tw:mx-auto tw:w-full tw:max-w-[800px] tw:text-sm",
 					children: planBody
 				})
 			}),
 			(showChangeRequestForm || showActions) && /* @__PURE__ */ jsx("div", {
-				className: "tw:shrink-0 tw:border-0 tw:border-t tw:border-solid tw:border-neutral-100 tw:bg-white",
+				className: "tw:shrink-0 tw:border-0 tw:border-t tw:border-solid tw:border-border tw:bg-card tw:text-card-foreground",
 				children: /* @__PURE__ */ jsxs("div", {
 					className: "tw:mx-auto tw:w-full tw:max-w-[800px]",
 					children: [showChangeRequestForm && changeRequestForm, showActions && /* @__PURE__ */ jsx("div", {
@@ -665,7 +802,7 @@ const PromptInputSubmit = ({ ref, disabled, status = "ready" }) => {
 	const icon = (() => {
 		if (status === "streaming") return /* @__PURE__ */ jsx(CirclePause, { className: "tw:size-4" });
 		if (status === "interrupted") return /* @__PURE__ */ jsx(Play, { className: "tw:size-4" });
-		return /* @__PURE__ */ jsx(Send, { className: "tw:size-4" });
+		return /* @__PURE__ */ jsx(Send, { className: "tw:size-4 tw:translate-x-[-1px] tw:translate-y-[1px]" });
 	})();
 	const getTooltipText = () => {
 		if (status === "streaming") return "Stop";
@@ -679,9 +816,9 @@ const PromptInputSubmit = ({ ref, disabled, status = "ready" }) => {
 			disabled,
 			"aria-label": ARIA_LABEL_BY_STATUS[status],
 			size: "icon-sm",
-			variant: "invisible",
+			variant: "primary",
 			isLoading: status === "submitted",
-			className: "tw:ml-auto tw:flex tw:items-center tw:rounded-lg tw:[&_svg]:text-secondary-500 tw:not-disabled:hover:[&_svg]:text-secondary-600",
+			className: cn("tw:ml-auto tw:flex tw:items-center tw:rounded-full", "tw:bg-gradient-to-br tw:from-[#61E4FF] tw:via-[#1F8FFF] tw:to-[#7C5CFF]", "tw:hover:not-disabled:brightness-110"),
 			children: status !== "submitted" && icon
 		}) })
 	}), getTooltipText() && /* @__PURE__ */ jsx(Tooltip.Content, {
@@ -742,12 +879,20 @@ const wrapperVariants = cva(null, {
 		inline: ""
 	} }
 });
-const PromptInput = ({ onSend, onAbort, onContinue, prefix, variant, suffix, disabled, disableSubmit, value = "", onValueChange, status = "ready", maxRows = 6, minRows, commands, ...textareaProps }) => {
+const PromptInput = ({ onSend, onAbort, onContinue, prefix, variant, suffix, disabled, disableSubmit, value = "", onValueChange, status = "ready", maxRows = 6, minRows, commands, autoFocus, textareaRef: publishedRef, ...textareaProps }) => {
 	const defaultMinRows = variant === "inline" ? 1 : 2;
 	const isDisabled = (disabled || disableSubmit || !value.trim()) && status !== "streaming" && status !== "interrupted";
 	const textareaId = useId();
 	const textareaRef = useRef(null);
+	const setTextareaNode = useCallback((node) => {
+		textareaRef.current = node;
+		if (publishedRef) publishedRef.current = node;
+	}, [publishedRef]);
 	const [dismissedValue, setDismissedValue] = useState(null);
+	const autoFocusRef = useRef(autoFocus);
+	useEffect(() => {
+		if (autoFocusRef.current) textareaRef.current?.focus({ preventScroll: true });
+	}, []);
 	if (dismissedValue !== null && value !== dismissedValue) setDismissedValue(null);
 	const hasCommands = !!commands && commands.length > 0;
 	const valueLooksLikeSlashCommand = value.startsWith("/") && !/\s/.test(value);
@@ -813,7 +958,7 @@ const PromptInput = ({ onSend, onAbort, onContinue, prefix, variant, suffix, dis
 					minRows: minRows ?? defaultMinRows,
 					maxRows,
 					id: textareaId,
-					ref: textareaRef,
+					ref: setTextareaNode,
 					value,
 					onChange: handleOnChange,
 					onKeyDown: handleOnKeyDown,
@@ -1093,9 +1238,9 @@ const SuggestedPrompt = ({ label, disabled, onClick, icon, className }) => {
 	return /* @__PURE__ */ jsxs("button", {
 		type: "button",
 		disabled,
-		className: cn("tailwindcss-preflight tw:flex tw:items-center tw:justify-start tw:gap-2 tw:whitespace-nowrap tw:rounded-lg tw:p-2 tw:text-left tw:text-sm tw:font-medium tw:text-foreground tw:transition-colors tw:not-disabled:hover:bg-muted tw:disabled:cursor-not-allowed tw:disabled:opacity-50", className),
+		className: cn("tailwindcss-preflight tw:flex tw:items-center tw:justify-start tw:gap-2.5 tw:whitespace-nowrap", "tw:rounded-lg tw:px-3 tw:py-2", "tw:text-left tw:text-sm tw:font-medium tw:text-foreground", "tw:transition-colors tw:not-disabled:hover:bg-accent", "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", className),
 		onClick,
-		children: [icon ?? /* @__PURE__ */ jsx(FileText, { className: "tw:size-4 tw:shrink-0 tw:basis-4 tw:[&_*]:stroke-aigradient-600" }), /* @__PURE__ */ jsx("div", {
+		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
 		})]
@@ -1105,10 +1250,10 @@ const SuggestedPrompt = ({ label, disabled, onClick, icon, className }) => {
 //#region src/blocks/AIKit/ThinkingIndicator.tsx
 const ThinkingIndicator = ({ label = "Thinking..." }) => {
 	return /* @__PURE__ */ jsxs("div", {
-		className: "tw:flex tw:items-center tw:gap-2",
+		className: "tw:flex tw:items-center tw:gap-1.5",
 		"data-testid": "chat-thinking-indicator",
-		children: [/* @__PURE__ */ jsx(Loader2, { className: "tw:size-4 tw:animate-spin tw:text-secondary-500" }), /* @__PURE__ */ jsx("span", {
-			className: "tw:text-sm tw:italic tw:text-secondary-500",
+		children: [/* @__PURE__ */ jsx(Loader2, { className: "tw:size-3.5 tw:animate-spin tw:text-muted-foreground" }), /* @__PURE__ */ jsx("span", {
+			className: "tw:text-xs tw:font-medium tw:text-muted-foreground",
 			children: label
 		})]
 	});
@@ -1259,9 +1404,83 @@ const ToolCallChip = ({ label, state, icon, trailing, onClick, className }) => {
 	});
 };
 //#endregion
+//#region src/blocks/AIKit/ToolCallStatusHeader.tsx
+const headerVariants = cva("tw:flex tw:items-center tw:justify-between tw:gap-2 tw:px-2.5 tw:py-1.5", {
+	variants: { status: {
+		processing: "tw:border-b tw:border-border/60",
+		warning: "tw:bg-warning/10",
+		success: "tw:border-b tw:border-border/60",
+		error: "tw:bg-destructive/10"
+	} },
+	defaultVariants: { status: "success" }
+});
+const statusInk = {
+	processing: "tw:text-muted-foreground",
+	warning: "tw:text-warning",
+	success: "tw:text-muted-foreground",
+	error: "tw:text-destructive"
+};
+const statusIconInk = {
+	processing: "tw:text-muted-foreground",
+	warning: "tw:text-warning",
+	success: "tw:text-success/70",
+	error: "tw:text-destructive"
+};
+const ToolCallStatusHeader = ({ icon: IconComponent, iconSpin, status, text, needsConfirmation, isCollapsible, isCollapsed, onToggleCollapse }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		role: isCollapsible ? "button" : void 0,
+		tabIndex: isCollapsible ? 0 : void 0,
+		"aria-expanded": isCollapsible ? !isCollapsed : void 0,
+		"data-status": status,
+		className: cn(headerVariants({ status }), isCollapsible && "tw:cursor-pointer"),
+		onClick: isCollapsible ? onToggleCollapse : void 0,
+		onKeyDown: isCollapsible ? (e) => {
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault();
+				onToggleCollapse?.();
+			}
+		} : void 0,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "tw:flex tw:min-w-0 tw:flex-1 tw:items-center tw:gap-1.5",
+			children: [/* @__PURE__ */ jsx(IconComponent, { className: cn("tw:size-3.5 tw:shrink-0", statusIconInk[status], iconSpin && "tw:animate-spin") }), /* @__PURE__ */ jsx("span", {
+				"data-testid": "tool-status-text",
+				className: cn("tw:truncate tw:pr-0.5 tw:text-xs tw:font-medium", statusInk[status]),
+				children: text
+			})]
+		}), (needsConfirmation || isCollapsible) && /* @__PURE__ */ jsxs("div", {
+			className: "tw:flex tw:shrink-0 tw:items-center tw:gap-2",
+			children: [needsConfirmation && /* @__PURE__ */ jsxs("div", {
+				className: "tw:flex tw:items-center tw:gap-1",
+				children: [/* @__PURE__ */ jsx("span", {
+					"data-testid": "tool-confirmation-required",
+					className: "tw:text-xs tw:font-medium tw:text-warning",
+					children: "Confirmation required"
+				}), /* @__PURE__ */ jsx(TriangleAlert, { className: "tw:size-3.5 tw:text-warning" })]
+			}), isCollapsible && /* @__PURE__ */ jsx(ChevronDown, { className: cn("tw:size-3.5 tw:shrink-0 tw:text-muted-foreground", "tw:transition-transform tw:duration-300 tw:ease-out tw:motion-reduce:transition-none", !isCollapsed && "tw:rotate-180") })]
+		})]
+	});
+};
+//#endregion
 //#region src/blocks/AIKit/usageStatsHelpers.ts
-/** Clamp a percentage to 0–100 and normalize non-finite input to 0. */
+/**
+* Clamp a percentage to 0–100 and normalize non-finite input to 0.
+*
+* - `Progress`'s indicator is unclamped, so a value over 100 slides the bar off-screen.
+* - `NaN` normalizes to 0 — `Math.min`/`Math.max` propagate it, and it renders as no bar at all.
+*/
 const clampPercentage = (value) => Number.isFinite(value) ? Math.min(100, Math.max(0, value)) : 0;
+/**
+* A percentage as text — `72%`, `1.1%`, `99.9%`.
+*
+* - One decimal place, trimmed to a whole number, so `11/1000` reads as `1.1%` rather than `1%`.
+* - Floored, not rounded: rounding `99.96` up to `100%` disagrees with the at-limit state computed
+*   from the raw value, exactly at the boundary everything else turns on.
+* - The `1e-9` nudge is for floating-point noise — `11 / 1000 * 100` is `1.0999999999999999`.
+*/
+const formatPercentage = (value) => {
+	const floored = Math.floor(value * 10 + 1e-9) / 10;
+	return `${Number.isInteger(floored) ? floored.toFixed(0) : floored.toFixed(1)}%`;
+};
 //#endregion
 //#region src/blocks/AIKit/UsageStatsRing.tsx
 const UsageStatsRing = ({ value, size = 16, strokeWidth = 2.5, className }) => {
@@ -1280,7 +1499,7 @@ const UsageStatsRing = ({ value, size = 16, strokeWidth = 2.5, className }) => {
 			r: radius,
 			fill: "none",
 			strokeWidth,
-			className: "tw:stroke-neutral-400 tw:opacity-50"
+			className: "tw:stroke-muted-foreground tw:opacity-50"
 		}), /* @__PURE__ */ jsx("circle", {
 			cx: size / 2,
 			cy: size / 2,
@@ -1296,26 +1515,32 @@ const UsageStatsRing = ({ value, size = 16, strokeWidth = 2.5, className }) => {
 };
 //#endregion
 //#region src/blocks/AIKit/UsageStats.tsx
-const UsageStats = ({ value, alert = false, children, className, ariaLabel, align = "end", side = "top", sideOffset = 8 }) => {
-	const defaultLabel = `Usage: ${Math.round(clampPercentage(value))}%${alert ? " (usage alert)" : ""}`;
-	return /* @__PURE__ */ jsxs(HoverCard, { children: [/* @__PURE__ */ jsx(HoverCard.Trigger, {
-		asChild: true,
-		children: /* @__PURE__ */ jsxs("span", {
-			"aria-label": ariaLabel ?? defaultLabel,
-			className: cn("tw:relative tw:inline-flex tw:size-8 tw:items-center tw:justify-center", className),
-			children: [/* @__PURE__ */ jsx(UsageStatsRing, { value }), alert && /* @__PURE__ */ jsx(AlertCircle, {
-				"data-testid": "usage-stats-alert",
-				className: "tw:absolute tw:-right-0.5 tw:-top-0.5 tw:size-3 tw:text-error-500"
-			})]
-		})
-	}), /* @__PURE__ */ jsx(HoverCard.Content, {
-		align,
-		side,
-		sideOffset,
-		children
-	})] });
+const UsageStats = ({ value, alert = false, children, className, ariaLabel, align = "end", side = "top", sideOffset = 8, open, onOpenChange }) => {
+	const hasAlert = Boolean(alert);
+	const isWarning = alert === "warning";
+	const defaultLabel = `Usage: ${Math.round(clampPercentage(value))}%${hasAlert ? " (usage alert)" : ""}`;
+	return /* @__PURE__ */ jsxs(HoverCard, {
+		open,
+		onOpenChange,
+		children: [/* @__PURE__ */ jsx(HoverCard.Trigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs("span", {
+				"aria-label": ariaLabel ?? defaultLabel,
+				className: cn("tw:relative tw:inline-flex tw:size-8 tw:items-center tw:justify-center", className),
+				children: [/* @__PURE__ */ jsx(UsageStatsRing, { value }), hasAlert && /* @__PURE__ */ jsx(AlertCircle, {
+					"data-testid": "usage-stats-alert",
+					className: cn("tw:absolute tw:-right-0.5 tw:-top-0.5 tw:size-3", isWarning ? "tw:text-warning-500" : "tw:text-error-500")
+				})]
+			})
+		}), /* @__PURE__ */ jsx(HoverCard.Content, {
+			align,
+			side,
+			sideOffset,
+			children
+		})]
+	});
 };
 //#endregion
-export { AnswerSummary, CollapsibleStepHeader, InlineStepDetail, InlineStepLabel, Markdown, MessageBubble, PlanApproval, PlanRewritingIndicator, PromptInput, Question, QuestionBlock, SuggestedPrompt, ThinkingIndicator, ToolCallApproval, ToolCallChip, UsageStats, UsageStatsRing };
+export { AnswerActions, AnswerSummary, CollapsibleStepHeader, DIAGRAM_LANGUAGES, InlineStepDetail, InlineStepLabel, Markdown, MessageBubble, PlanApproval, PlanRewritingIndicator, PromptInput, Question, QuestionBlock, SuggestedPrompt, ThinkingIndicator, ToolCallApproval, ToolCallChip, ToolCallStatusHeader, UsageStats, UsageStatsRing, clampPercentage, formatPercentage };
 
-//# sourceMappingURL=AIKit-DaFT7p92.js.map
+//# sourceMappingURL=AIKit-CNX6aiKm.js.map