@keboola/design 11.4.0 → 11.5.0

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

@@ -1,26 +1,94 @@
 import { cn } from "./classNames-BzrkDnOD.js";
-import { Tooltip, TooltipProvider } from "./utils-B5Z52hYs.js";
-import { AlertCircle, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, CircleCheck, CirclePause, CircleX, Loader2, Maximize2, Minimize2, Play, Send, Sparkles, TriangleAlert, X, XCircle } from "./icons-Cek151jC.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 { ClipboardButton } from "./ClipboardButton-D9pDjgkB.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-B9ZMJxjn.js";
-import { Command } from "./Command-B7ML9YMv.js";
-import { TextInput } from "./TextInput-DHM6dHmn.js";
-import { Checkbox } from "./Checkbox-fC0BuO2B.js";
-import { Badge } from "./Badge-Ch26CXoP.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 { 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-muted-foreground tw:focus-visible:outline-ring tw:not-disabled:hover:text-foreground",
@@ -31,8 +99,7 @@ const variantClasses = {
 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" }) => {
@@ -51,6 +118,9 @@ const CollapsibleStepHeader = ({ isExpanded, onToggle, label, variant = "success
 	});
 };
 //#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-border tw:pl-3 tw:text-xs tw:text-muted-foreground",
@@ -80,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}`))
+			})
 		})]
 	});
 };
@@ -112,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;
@@ -135,19 +220,48 @@ const getLanguage = (element) => {
 * - 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", {
@@ -335,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",
@@ -415,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);
 	};
@@ -465,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: [
@@ -482,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", {
@@ -515,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, {
@@ -585,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", {
@@ -758,11 +879,15 @@ const wrapperVariants = cva(null, {
 		inline: ""
 	} }
 });
-const PromptInput = ({ onSend, onAbort, onContinue, prefix, variant, suffix, disabled, disableSubmit, value = "", onValueChange, status = "ready", maxRows = 6, minRows, commands, autoFocus, ...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(() => {
@@ -833,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,
@@ -1331,14 +1456,31 @@ const ToolCallStatusHeader = ({ icon: IconComponent, iconSpin, status, text, nee
 					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 && (isCollapsed ? /* @__PURE__ */ jsx(ChevronDown, { className: "tw:size-3.5 tw:shrink-0 tw:text-muted-foreground" }) : /* @__PURE__ */ jsx(ChevronUp, { className: "tw:size-3.5 tw:shrink-0 tw:text-muted-foreground" }))]
+			}), 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 }) => {
@@ -1357,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,
@@ -1373,28 +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 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, { 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
-	})] });
+	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, ToolCallStatusHeader, 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-DDg5DBCG.js.map
+//# sourceMappingURL=AIKit-CNX6aiKm.js.map