agentic-ui-kit 0.7.0 → 0.8.0

package/dist/index.js

@@ -1,11 +1,11 @@
 "use client";
-import { A as awaitingToolCalls, C as widgetLoaderMessages, D as toBlocks, F as settleToolCall, L as salvageJson, O as activityTokens, T as readEventStream, _ as replacedId, b as resolveReplaces, d as isStateRef, f as matchesSchema, g as uiActionSchema, i as parseUiMarkup, k as applyEvent } from "./src-D01l3nBc.js";
+import { A as widgetLoaderMessages, C as readAskUserResult, D as resolveReplaces, F as activityTokens, H as settleToolCall, I as applyEvent, L as awaitingToolCalls, M as readEventStream, P as toBlocks, S as readAskUserInput, W as salvageJson, b as uiActionSchema, c as parseUiMarkup, g as matchesSchema, h as isStateRef, r as uiSpecSet, w as replacedId } from "./src-BrPYkHdt.js";
 import { clsx } from "clsx";
 import { extendTailwindMerge } from "tailwind-merge";
 import { Children, Component, Fragment, createContext, createElement, isValidElement, memo, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Autocomplete, Button as Button$1, Dialog, DialogTrigger, DialogTrigger as DialogTrigger$1, Disclosure as Disclosure$1, DisclosurePanel, Focusable, Header, Heading, Input, Keyboard, Link, Menu as Menu$1, MenuItem as MenuItem$1, MenuSection as MenuSection$1, MenuTrigger, MenuTrigger as MenuTrigger$1, Modal as Modal$1, ModalOverlay, Popover as Popover$1, SearchField, Separator, SubmenuTrigger, Text, ToggleButton, ToggleButtonGroup, Tooltip as Tooltip$1, TooltipTrigger, useFilter } from "react-aria-components";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { AlertTriangle, ArrowDown, ArrowUp, Check, ChevronDown, ChevronRight, ChevronsUpDown, Copy, FileText, Folder, FolderOpen, FolderPlus, Globe, Info, Mic, MoreHorizontal, PanelLeft, Pencil, Pin, PinOff, Plus, RefreshCw, Share, ShieldQuestion, Square, ThumbsDown, ThumbsUp, Trash2, Volume2, X } from "lucide-react";
+import { AlertTriangle, ArrowDown, ArrowRight, ArrowUp, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronsUpDown, Copy, FileText, Folder, FolderOpen, FolderPlus, Globe, GripVertical, Info, MessageSquare, Mic, MoreHorizontal, PanelLeft, Pencil, Pin, PinOff, Plus, RefreshCw, Share, ShieldQuestion, Square, ThumbsDown, ThumbsUp, Trash2, Volume2, X } from "lucide-react";
 import { UNSAFE_PortalProvider } from "react-aria";
 import { createMathPlugin } from "@streamdown/math";
 import { Streamdown, defaultComponents, defaultRehypePlugins } from "streamdown";
@@ -204,6 +204,10 @@ const defaultIcons = {
 	info: /* @__PURE__ */ jsx(Info, {}),
 	warning: /* @__PURE__ */ jsx(AlertTriangle, {}),
 	approval: /* @__PURE__ */ jsx(ShieldQuestion, {}),
+	askPrevious: /* @__PURE__ */ jsx(ChevronLeft, {}),
+	askPagerNext: /* @__PURE__ */ jsx(ChevronRight, {}),
+	askNext: /* @__PURE__ */ jsx(ArrowRight, {}),
+	dragHandle: /* @__PURE__ */ jsx(GripVertical, {}),
 	web: /* @__PURE__ */ jsx(Globe, {}),
 	pin: /* @__PURE__ */ jsx(Pin, {}),
 	unpin: /* @__PURE__ */ jsx(PinOff, {}),
@@ -216,7 +220,8 @@ const defaultIcons = {
 	folder: /* @__PURE__ */ jsx(Folder, {}),
 	folderOpen: /* @__PURE__ */ jsx(FolderOpen, {}),
 	file: /* @__PURE__ */ jsx(FileText, {}),
-	remove: /* @__PURE__ */ jsx(X, {})
+	remove: /* @__PURE__ */ jsx(X, {}),
+	chatList: /* @__PURE__ */ jsx(MessageSquare, {})
 };
 const IconsContext = createContext(defaultIcons);
 /** Merges `icons` over the icons of the enclosing provider (or the defaults). */
@@ -300,6 +305,24 @@ const defaultLabels = {
 	tokenCount: (count) => `${count} tokens`,
 	replyPlaceholder: "Reply…",
 	replyDirectly: "Or reply directly…",
+	askUserPrompt: "Question for you",
+	askUserPager: (current, total) => `${current} of ${total}`,
+	askUserPrevious: "Previous question",
+	askUserNext: "Next question",
+	askUserContinue: "Continue",
+	askUserSubmit: "Send answers",
+	askUserClose: "Close and decline",
+	askUserSomethingElse: "Something else",
+	askUserSkip: "Skip",
+	askUserSelected: (count) => `${count} selected`,
+	askUserRankHint: "Drag to re-order",
+	askUserReorder: (option) => `Move ${option}`,
+	askUserReorderKeys: "Press Alt with the up or down arrow to move",
+	askUserPicked: (options) => options.join(", "),
+	askUserRanked: (options) => `Ranked: ${options.map((o, i) => `${i + 1}. ${o}`).join(" ")}`,
+	askUserSkipped: "Skipped",
+	askUserDeclined: "You declined to answer",
+	askUserAnswers: "Your answers",
 	message: "Message",
 	stop: "Stop",
 	send: "Send",
@@ -718,7 +741,7 @@ function Drawer({ isOpen, onOpenChange, side = "left", children, className, ...p
 * A titled region that fills its container and lets the body scroll: a dock panel, an agent pane in a
 * grid, a settings card. A `ChatView` placed in the body sizes itself to the panel.
 */
-function Panel({ title, actions, footer, children, variant = "card", className, ...props }) {
+function Panel({ title, actions, footer, children, variant = "card", padded = false, className, ...props }) {
 	return /* @__PURE__ */ jsxs("section", {
 		"aria-label": props["aria-label"],
 		className: cx("flex min-h-0 min-w-0 flex-col overflow-hidden bg-chat-bg font-chat-sans text-chat-fg", variant === "card" && "rounded-chat-md border border-chat-border", className),
@@ -734,7 +757,7 @@ function Panel({ title, actions, footer, children, variant = "card", className,
 				})]
 			}),
 			/* @__PURE__ */ jsx("div", {
-				className: "min-h-0 flex-1 overflow-y-auto [scrollbar-width:thin]",
+				className: cx("min-h-0 flex-1 overflow-y-auto [scrollbar-width:thin]", padded && "p-3"),
 				children
 			}),
 			footer && /* @__PURE__ */ jsx("footer", {
@@ -794,8 +817,25 @@ function useReducedMotion() {
 	return useCallback(() => shouldReduceMotion(motion), [motion]);
 }
 // src/primitives/highlight.ts
+/**
+* Shiki with its JavaScript regex engine, not the default Oniguruma WebAssembly one, so a page needs no
+* `'wasm-unsafe-eval'` in its Content Security Policy. Languages and themes load on demand.
+*/
 let shiki;
-const loadShiki = () => shiki ??= import("shiki");
+const loadShiki = () => shiki ??= (async () => {
+	const [lib, { createJavaScriptRegexEngine }] = await Promise.all([import("shiki"), import("shiki/engine/javascript")]);
+	return {
+		lib,
+		highlighter: await lib.createHighlighter({
+			themes: [],
+			langs: [],
+			engine: createJavaScriptRegexEngine({ forgiving: true })
+		})
+	};
+})().catch((error) => {
+	shiki = void 0;
+	throw error;
+});
 const cache = /* @__PURE__ */ new Map();
 const warned = /* @__PURE__ */ new Set();
 /** The theme id if Shiki bundles it; otherwise the default, with one console.warn per unknown id. */
@@ -808,6 +848,13 @@ function pick(id, fallback, known) {
 	}
 	return fallback;
 }
+let failedWarned = false;
+/** One console.warn when highlighting breaks (a blocked chunk, a CSP violation), instead of silently showing plain code. */
+function warnFailed(error) {
+	if (failedWarned) return;
+	failedWarned = true;
+	console.warn("agentic-ui-kit: code highlighting failed, showing plain code.", error);
+}
 /** Parses "--a:#fff;--b:#000" into an object. */
 function parseVars(css) {
 	const vars = {};
@@ -821,15 +868,17 @@ async function highlight(code, language, light, dark) {
 	const key = `${light}\n${dark}\n${language}\n${code}`;
 	const hit = cache.get(key);
 	if (hit) return hit;
-	const { codeToTokens, bundledLanguages, bundledLanguagesAlias, bundledThemes } = await loadShiki();
+	const { lib: { bundledLanguages, bundledLanguagesAlias, bundledThemes }, highlighter } = await loadShiki();
 	const lang = language.toLowerCase();
 	if (!(lang in bundledLanguages) && !(lang in bundledLanguagesAlias)) return void 0;
-	const { tokens, bg, fg } = await codeToTokens(code, {
+	const themes = {
+		light: pick(light, DEFAULT_CODE_THEMES.light, bundledThemes),
+		dark: pick(dark, DEFAULT_CODE_THEMES.dark, bundledThemes)
+	};
+	await Promise.all([highlighter.loadLanguage(lang), highlighter.loadTheme(themes.light, themes.dark)]);
+	const { tokens, bg, fg } = highlighter.codeToTokens(code, {
 		lang,
-		themes: {
-			light: pick(light, DEFAULT_CODE_THEMES.light, bundledThemes),
-			dark: pick(dark, DEFAULT_CODE_THEMES.dark, bundledThemes)
-		},
+		themes,
 		defaultColor: false
 	});
 	const result = {
@@ -854,7 +903,10 @@ function useHighlight(code, language) {
 	useEffect(() => {
 		if (!language) return setResult(void 0);
 		let cancelled = false;
-		highlight(code, language, light, dark).then((r) => !cancelled && setResult(r), () => !cancelled && setResult(void 0));
+		highlight(code, language, light, dark).then((r) => !cancelled && setResult(r), (error) => {
+			warnFailed(error);
+			if (!cancelled) setResult(void 0);
+		});
 		return () => {
 			cancelled = true;
 		};
@@ -900,12 +952,15 @@ function CodeBlock({ code, language, label = language, variant = "plain", copy =
 /**
 * Applies a chat theme to part of a page. Menus, tooltips and dialogs opened inside render into this
 * element instead of `<body>`, so they get the same theme. An app themed as a whole (variables on
-* `:root`) does not need it for colors, but still uses it for `codeThemes` and `motion`.
+* `:root`) does not need it for colors, but still uses it for `codeThemes` and `motion`. The element is
+* `height: 100%` of its parent by default (so `ChatView` has a height without Tailwind); a `className` such
+* as `h-screen`, or a style rule of your own, replaces that.
 */
 function ChatTheme({ theme, codeThemes, motion, labels, icons, children, className }) {
 	const portal = useRef(null);
 	const getContainer = useCallback(() => portal.current, []);
 	return /* @__PURE__ */ jsxs("div", {
+		"data-chat-root": "",
 		"data-chat-theme": theme,
 		"data-chat-motion": motion,
 		className: clsx("bg-chat-bg font-chat-sans text-chat-fg", className),
@@ -1037,32 +1092,36 @@ function userMessage(text, parentId, attachments = []) {
 	};
 }
 const wantsApproval = (part, tool) => part.approval === void 0 && (part.needsApproval === true || (typeof tool?.approval === "function" ? tool.approval(part.input) : tool?.approval === true));
+const wantsPrompt = (part, promptTools, tool) => part.approval !== "denied" && (promptTools.includes(part.name) || tool?.view?.Prompt !== void 0);
 const DECLINED = "Declined by the user";
 /**
 * A linear conversation driven by a Transport: sends, streams the reply through `applyEvent`, stops and
 * retries. With an `AgentProvider` it also runs the agent loop: client tools run in the page, approvals
 * wait for the user, then the reply continues; every finished tool call reaches its tool's `onResult`.
 */
-function useChat({ transport, conversationId, initialMessages = [], onTitle, agent, maxSteps = 12, resume = false }) {
+function useChat({ transport, conversationId, initialMessages = [], onTitle, agent, maxSteps = 12, resume = false, promptTools = ["ask_user"] }) {
 	const contextAgent = useAgentRegistry();
 	const registry = agent === void 0 ? contextAgent : agent;
 	const [messages, setMessages] = useState(initialMessages);
 	const [busy, setBusy] = useState(false);
 	const [approvals, setApprovals] = useState([]);
+	const [prompts, setPrompts] = useState([]);
 	const run = useRef(null);
 	const latest = useRef({
 		messages,
 		transport,
 		conversationId,
 		onTitle,
-		registry
+		registry,
+		promptTools
 	});
 	latest.current = {
 		messages,
 		transport,
 		conversationId,
 		onTitle,
-		registry
+		registry,
+		promptTools
 	};
 	const loop = useRef({
 		options: {},
@@ -1177,6 +1236,15 @@ function useChat({ transport, conversationId, initialMessages = [], onTitle, age
 			setBusy(false);
 			return;
 		}
+		const prompted = awaiting.filter((p) => wantsPrompt(p, latest.current.promptTools, registry?.tool(p.name)));
+		if (prompted.length > 0) {
+			setPrompts(prompted.map((part) => ({
+				messageId: reply.id,
+				part
+			})));
+			setBusy(false);
+			return;
+		}
 		const controller = new AbortController();
 		const current = {
 			controller,
@@ -1265,6 +1333,29 @@ function useChat({ transport, conversationId, initialMessages = [], onTitle, age
 		advance,
 		commit
 	]);
+	const settlePrompt = useCallback((partId, fields) => {
+		const pending = prompts.find((p) => p.part.id === partId);
+		if (!pending) return;
+		const message = latest.current.messages.find((m) => m.id === pending.messageId);
+		if (!message) return;
+		const next = settleToolCall(message, partId, fields);
+		commit(next);
+		const rest = prompts.filter((p) => p.part.id !== partId);
+		setPrompts(rest);
+		if (rest.length === 0) advance(next);
+	}, [
+		prompts,
+		advance,
+		commit
+	]);
+	const answer = useCallback((partId, result) => settlePrompt(partId, {
+		status: "done",
+		result
+	}), [settlePrompt]);
+	const decline = useCallback((partId) => settlePrompt(partId, {
+		status: "error",
+		error: DECLINED
+	}), [settlePrompt]);
 	/** Declines whatever is waiting, e.g. because the user moved on. */
 	const declineAll = useCallback(() => {
 		for (const { messageId, part } of approvals) {
@@ -1280,6 +1371,7 @@ function useChat({ transport, conversationId, initialMessages = [], onTitle, age
 			error: DECLINED
 		}));
 		setApprovals([]);
+		setPrompts([]);
 	}, [approvals, commit]);
 	const send = useCallback((text, options = {}) => {
 		const attachments = options.attachments ?? [];
@@ -1304,6 +1396,7 @@ function useChat({ transport, conversationId, initialMessages = [], onTitle, age
 		const index = messages.findIndex((m) => m.id === assistantId);
 		if (index < 1 || messages[index - 1].role !== "user") return;
 		setApprovals([]);
+		setPrompts([]);
 		loop.current = {
 			options,
 			step: 0
@@ -1339,6 +1432,9 @@ function useChat({ transport, conversationId, initialMessages = [], onTitle, age
 		busy,
 		approvals,
 		respond,
+		prompts,
+		answer,
+		decline,
 		send,
 		stop,
 		retry
@@ -2178,17 +2274,18 @@ function Node({ node, registry }) {
 	}) });
 }
 /** Draws a `render_ui` tree with the registered components. Unknown components and bad props render nothing. */
-function UiTree({ id, root, state: initial, streaming = false }) {
+function UiTree({ id, stateKey, root, state: initial, streaming = false }) {
+	const storeKey = stateKey ?? id;
 	const registry = useContext(RegistryContext);
 	const host = useWidgetHost();
-	const [local, setLocal] = useState(() => registry?.persist?.load(id) ?? {});
+	const [local, setLocal] = useState(() => registry?.persist?.load(storeKey) ?? {});
 	const changed = useRef(false);
 	const latest = useRef(host);
 	latest.current = host;
 	useEffect(() => {
-		if (changed.current) registry?.persist?.save(id, local);
+		if (changed.current) registry?.persist?.save(storeKey, local);
 	}, [
-		id,
+		storeKey,
 		local,
 		registry
 	]);
@@ -2239,15 +2336,20 @@ function useUiMarkupLanguage() {
 	return registry && registry.markup !== false ? registry.markup : void 0;
 }
 /** A ```ui block from a reply, drawn with the registered components. Safe on a block that is still streaming. */
-function UiMarkupBlock({ id, source, streaming = false }) {
+function UiMarkupBlock({ id, stateKey, source, streaming = false }) {
 	const { nodes, state } = useMemo(() => parseUiMarkup(source), [source]);
 	return /* @__PURE__ */ jsx(UiTree, {
 		id,
+		...stateKey && { stateKey },
 		root: nodes,
 		state,
 		streaming
 	});
 }
+function stateKeyOf(options, part) {
+	const stateKey = options.stateKey?.(part);
+	return stateKey ? { stateKey } : {};
+}
 /**
 * A tool view that draws a call's (streaming) JSX markup with your registered components, for whatever tool
 * your harness uses; the suggested one is core's `showUiTool`. Register it under your tool's name:
@@ -2256,12 +2358,13 @@ function UiMarkupBlock({ id, source, streaming = false }) {
 function uiMarkupToolView(read = (input) => {
 	const markup = input?.markup;
 	return typeof markup === "string" ? markup : void 0;
-}) {
+}, options = {}) {
 	function UiMarkupToolBlock({ part }) {
 		const markup = read(part.input ?? part.partialInput);
 		if (!markup) return null;
 		return /* @__PURE__ */ jsx(UiMarkupBlock, {
 			id: part.id,
+			...stateKeyOf(options, part),
 			source: markup,
 			streaming: part.status === "streaming" || part.status === "input"
 		});
@@ -2285,13 +2388,14 @@ function readTreeInput(input) {
 * your tool's input to the tree and its starting state; the default reads `{ root, state }`, the shape of
 * the suggested `renderUiTool`.
 */
-function uiTreeToolView(read = readTreeInput) {
+function uiTreeToolView(read = readTreeInput, options = {}) {
 	function UiTreeToolBlock({ part }) {
 		const { root, state } = read(part.input ?? part.partialInput);
 		if (!root) return null;
 		const ok = typeof state === "object" && state !== null;
 		return /* @__PURE__ */ jsx(UiTree, {
 			id: part.id,
+			...stateKeyOf(options, part),
 			root,
 			...ok && { state },
 			streaming: part.status === "streaming" || part.status === "input"
@@ -2384,7 +2488,19 @@ function rehypeWordFade() {
 	return (tree) => wrap(tree);
 }
 // src/components/markdown.tsx
-const fadePlugins = [...Object.values(defaultRehypePlugins), rehypeWordFade];
+const [sanitize, sanitizeSchema] = defaultRehypePlugins.sanitize;
+const rehypePlugins = Object.values({
+	...defaultRehypePlugins,
+	sanitize: [sanitize, {
+		...sanitizeSchema,
+		tagNames: sanitizeSchema.tagNames?.filter((t) => t !== "source"),
+		protocols: {
+			...sanitizeSchema.protocols,
+			src: [...sanitizeSchema.protocols?.src ?? [], "data"]
+		}
+	}]
+});
+const fadePlugins = [...rehypePlugins, rehypeWordFade];
 const math = createMathPlugin({ singleDollarTextMath: true });
 /** Streamdown's own utility classes get this prefix, so neither they nor the host's classes apply. */
 const PREFIX = "llmchat";
@@ -2417,6 +2533,15 @@ function Code({ node, className, children }) {
 	});
 }
 const components = {
+	...Object.fromEntries([
+		"source",
+		"video",
+		"audio",
+		"track",
+		"iframe",
+		"embed",
+		"object"
+	].map((t) => [t, () => null])),
 	pre: ({ children }) => /* @__PURE__ */ jsx(Fragment$1, { children }),
 	code: ({ node, className, children }) => /* @__PURE__ */ jsx(Code, {
 		node,
@@ -2425,11 +2550,18 @@ const components = {
 	})
 };
 const LinksContext = createContext(void 0);
-function MarkdownLinksProvider({ renderLink, renderLinkList, children }) {
+function MarkdownLinksProvider({ renderLink, renderLinkList, renderImage, imageOrigins, children }) {
 	const value = useMemo(() => ({
 		renderLink,
-		renderLinkList
-	}), [renderLink, renderLinkList]);
+		renderLinkList,
+		renderImage,
+		imageOrigins
+	}), [
+		renderLink,
+		renderLinkList,
+		renderImage,
+		imageOrigins
+	]);
 	return /* @__PURE__ */ jsx(LinksContext.Provider, {
 		value,
 		children
@@ -2446,6 +2578,32 @@ function soleLink(children) {
 	};
 	return props.node?.tagName === "p" ? soleLink(props.children) : void 0;
 }
+const originOf = (url, base) => {
+	try {
+		return new URL(url, base).origin;
+	} catch {
+		return;
+	}
+};
+/** Whether an image may load on render. Relative and protocol-relative URLs count as the page's origin or the one they name. */
+function imageAllowed(src, origins) {
+	if (/^data:image\//i.test(src)) return true;
+	if (origins === "all") return /^(https?:)?\/\//i.test(src) || !/^[a-z][a-z\d+.-]*:/i.test(src);
+	if (!origins?.length) return false;
+	const origin = originOf(src, typeof location === "undefined" ? void 0 : location.href);
+	return origin !== void 0 && /^https?:/.test(origin) && origins.some((o) => (originOf(o) ?? o) === origin);
+}
+/** What an image the host did not allow becomes: a link to it (alt text or host name), opened only by the reader. */
+function ImageLink({ src, alt }) {
+	const url = URL.canParse(src) ? new URL(src) : void 0;
+	if (url?.protocol !== "http:" && url?.protocol !== "https:") return /* @__PURE__ */ jsx(Fragment$1, { children: alt });
+	return /* @__PURE__ */ jsx("a", {
+		href: src,
+		target: "_blank",
+		rel: "noopener noreferrer",
+		children: alt || url.host
+	});
+}
 function listOf(ordered, props, renderLinkList) {
 	const Default = ordered ? defaultComponents.ol : defaultComponents.ul;
 	const { children } = props;
@@ -2488,9 +2646,27 @@ function BlockScope({ id, streaming, children }) {
 	});
 }
 const MarkdownBody = memo(function MarkdownBody({ text, animating, fade }) {
-	const { renderLink, renderLinkList } = useContext(LinksContext) ?? {};
+	const { renderLink, renderLinkList, renderImage, imageOrigins } = useContext(LinksContext) ?? {};
 	const withLinks = useMemo(() => ({
 		...components,
+		img: ({ src, alt }) => {
+			if (typeof src !== "string" || !src) return /* @__PURE__ */ jsx(Fragment$1, { children: alt });
+			if (renderImage) return /* @__PURE__ */ jsx(Fragment$1, { children: renderImage({
+				src,
+				alt: alt ?? ""
+			}) });
+			if (imageAllowed(src, imageOrigins)) return /* @__PURE__ */ jsx("img", {
+				src,
+				alt: alt ?? "",
+				loading: "lazy",
+				referrerPolicy: "no-referrer",
+				className: "max-w-full rounded-chat-md"
+			});
+			return /* @__PURE__ */ jsx(ImageLink, {
+				src,
+				alt: alt ?? ""
+			});
+		},
 		...renderLink && { a: ({ href, children }) => {
 			const custom = href ? renderLink({
 				href,
@@ -2507,11 +2683,16 @@ const MarkdownBody = memo(function MarkdownBody({ text, animating, fade }) {
 			ul: (props) => listOf(false, props, renderLinkList),
 			ol: (props) => listOf(true, props, renderLinkList)
 		}
-	}), [renderLink, renderLinkList]);
+	}), [
+		renderLink,
+		renderLinkList,
+		renderImage,
+		imageOrigins
+	]);
 	return /* @__PURE__ */ jsx(Streamdown, {
 		prefix: PREFIX,
 		mode: animating || fade ? "streaming" : "static",
-		...fade && { rehypePlugins: fadePlugins },
+		rehypePlugins: fade ? fadePlugins : rehypePlugins,
 		plugins: { math },
 		components: withLinks,
 		controls: false,
@@ -2520,6 +2701,406 @@ const MarkdownBody = memo(function MarkdownBody({ text, animating, fade }) {
 		children: text
 	});
 });
+// src/components/ask-user.tsx
+const rowClass$1 = "flex w-full cursor-pointer items-center gap-3 rounded-chat-md px-2.5 py-2 text-left text-(length:--chat-ui-font-size) leading-5 text-chat-fg outline-none hover:bg-chat-hover focus-visible:ring-2 focus-visible:ring-chat-focus";
+/** Moves focus to the previous or next answer row of a question, without wrapping. */
+function moveFocus(root, from, delta) {
+	const rows = [...root.querySelectorAll("[data-ask-row]")];
+	const i = rows.findIndex((row) => row === from || row.contains(from));
+	rows[Math.min(rows.length - 1, Math.max(0, i + delta))]?.focus();
+}
+const isTextField = (target) => target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement;
+/** The 1-based number a plain digit key stands for, or undefined. */
+function digitOf(e) {
+	if (e.altKey || e.ctrlKey || e.metaKey || isTextField(e.target)) return void 0;
+	return /^[1-9]$/.test(e.key) ? Number(e.key) : void 0;
+}
+function Num({ children, active }) {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		className: clsx("flex size-6 shrink-0 items-center justify-center rounded-chat-sm border text-(length:--chat-ui-font-size-sm) tabular-nums", active ? "border-chat-accent bg-chat-accent text-chat-accent-fg" : "border-chat-border-strong text-chat-muted"),
+		children
+	});
+}
+function Check$1({ checked }) {
+	const icons = useIcons();
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		className: clsx("flex size-5 shrink-0 items-center justify-center rounded-chat-sm border [&_svg]:size-3.5", checked ? "border-chat-accent bg-chat-accent text-chat-accent-fg" : "border-chat-border-strong"),
+		children: checked && icons.check
+	});
+}
+/** The "Something else" row: a text input the number key after the last option focuses. */
+function OtherRow({ number, value, onChange, onEnter, leading }) {
+	const labels = useLabels();
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx(rowClass$1, "cursor-text"),
+		children: [leading, /* @__PURE__ */ jsx("input", {
+			"data-ask-row": true,
+			"data-ask-other": true,
+			value,
+			onChange: (e) => onChange(e.target.value),
+			onKeyDown: (e) => {
+				if (e.key === "Enter" && !e.nativeEvent.isComposing) {
+					e.preventDefault();
+					onEnter();
+				}
+			},
+			placeholder: labels.askUserSomethingElse,
+			"aria-label": labels.askUserSomethingElse,
+			"aria-keyshortcuts": String(number),
+			className: "min-w-0 flex-1 bg-transparent text-chat-fg outline-none placeholder:text-chat-subtle"
+		})]
+	});
+}
+function Footer({ start, onSkip, next }) {
+	const labels = useLabels();
+	const icons = useIcons();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "mt-2 flex items-center gap-2 px-1",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "min-w-0 flex-1 truncate text-(length:--chat-ui-font-size-sm) leading-4 text-chat-subtle",
+				children: start
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				size: "sm",
+				variant: "ghost",
+				className: "text-chat-muted",
+				onPress: onSkip,
+				children: labels.askUserSkip
+			}),
+			next && /* @__PURE__ */ jsx(IconButton, {
+				label: next.label,
+				variant: "primary",
+				size: "sm",
+				isDisabled: next.disabled,
+				onPress: next.onPress,
+				children: icons.askNext
+			})
+		]
+	});
+}
+function SingleQuestion({ question, initial, onAnswer, onSkip }) {
+	const { options } = question;
+	const chosen = typeof initial?.answer === "string" ? initial.answer : void 0;
+	const [other, setOther] = useState(chosen !== void 0 && !options.includes(chosen) ? chosen : "");
+	const root = useRef(null);
+	const submitOther = () => other.trim() && onAnswer(other.trim());
+	return /* @__PURE__ */ jsxs("div", {
+		ref: root,
+		role: "group",
+		"aria-label": question.question,
+		onKeyDown: (e) => {
+			const n = digitOf(e);
+			if (n !== void 0 && n <= options.length) onAnswer(options[n - 1]);
+			else if (n === options.length + 1) root.current?.querySelector("[data-ask-other]")?.focus();
+			else return;
+			e.preventDefault();
+		},
+		children: [
+			options.map((option, i) => /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				"data-ask-row": true,
+				onClick: () => onAnswer(option),
+				className: rowClass$1,
+				children: [/* @__PURE__ */ jsx(Num, {
+					active: option === chosen,
+					children: i + 1
+				}), /* @__PURE__ */ jsx("span", {
+					className: "min-w-0 flex-1",
+					children: option
+				})]
+			}, i)),
+			/* @__PURE__ */ jsx(OtherRow, {
+				number: options.length + 1,
+				value: other,
+				onChange: setOther,
+				onEnter: submitOther,
+				leading: /* @__PURE__ */ jsx(Num, {
+					active: other !== "" && other === chosen,
+					children: options.length + 1
+				})
+			}),
+			/* @__PURE__ */ jsx(Footer, { onSkip })
+		]
+	});
+}
+function MultipleQuestion({ question, initial, last, onAnswer, onSkip }) {
+	const labels = useLabels();
+	const { options } = question;
+	const before = Array.isArray(initial?.answer) ? initial.answer : [];
+	const [picked, setPicked] = useState(() => new Set(options.flatMap((o, i) => before.includes(o) ? [i] : [])));
+	const [other, setOther] = useState(before.find((a) => !options.includes(a)) ?? "");
+	const root = useRef(null);
+	const answer = [...options.filter((_, i) => picked.has(i)), ...other.trim() ? [other.trim()] : []];
+	const toggle = (i) => setPicked((set) => (set.delete(i) || set.add(i), new Set(set)));
+	const next = () => answer.length > 0 && onAnswer(answer);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: root,
+		role: "group",
+		"aria-label": question.question,
+		onKeyDown: (e) => {
+			const n = digitOf(e);
+			if (n !== void 0 && n <= options.length) toggle(n - 1);
+			else if (n === options.length + 1) root.current?.querySelector("[data-ask-other]")?.focus();
+			else return;
+			e.preventDefault();
+		},
+		children: [
+			options.map((option, i) => /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				role: "checkbox",
+				"aria-checked": picked.has(i),
+				"data-ask-row": true,
+				onClick: () => toggle(i),
+				onKeyDown: (e) => {
+					if (e.key !== "Enter" || answer.length === 0) return;
+					e.preventDefault();
+					e.stopPropagation();
+					next();
+				},
+				className: rowClass$1,
+				children: [/* @__PURE__ */ jsx(Check$1, { checked: picked.has(i) }), /* @__PURE__ */ jsx("span", {
+					className: "min-w-0 flex-1",
+					children: option
+				})]
+			}, i)),
+			/* @__PURE__ */ jsx(OtherRow, {
+				number: options.length + 1,
+				value: other,
+				onChange: setOther,
+				onEnter: next,
+				leading: /* @__PURE__ */ jsx(Check$1, { checked: other.trim() !== "" })
+			}),
+			/* @__PURE__ */ jsx(Footer, {
+				start: labels.askUserSelected(answer.length),
+				onSkip,
+				next: {
+					label: last ? labels.askUserSubmit : labels.askUserContinue,
+					disabled: answer.length === 0,
+					onPress: next
+				}
+			})
+		]
+	});
+}
+function RankQuestion({ question, initial, last, onAnswer, onSkip }) {
+	const labels = useLabels();
+	const icons = useIcons();
+	const { options } = question;
+	const [order, setOrder] = useState(() => {
+		const before = Array.isArray(initial?.answer) ? initial.answer : [];
+		const pool = options.map((o, i) => [o, i]);
+		const restored = before.flatMap((text) => {
+			const at = pool.findIndex(([o]) => o === text);
+			return at === -1 ? [] : pool.splice(at, 1).map(([, i]) => i);
+		});
+		return restored.length === options.length ? restored : options.map((_, i) => i);
+	});
+	const rows = useRef(/* @__PURE__ */ new Map());
+	const focusAfter = useRef(null);
+	const dragging = useRef(null);
+	useLayoutEffect(() => {
+		if (focusAfter.current !== null) rows.current.get(focusAfter.current)?.focus();
+		focusAfter.current = null;
+	}, [order]);
+	const move = (from, to) => {
+		if (to < 0 || to >= order.length || from === to) return;
+		setOrder((list) => {
+			const next = [...list];
+			next.splice(to, 0, next.splice(from, 1)[0]);
+			return next;
+		});
+	};
+	const send = () => onAnswer(order.map((i) => options[i]));
+	const onDragOver = (position) => (e) => {
+		e.preventDefault();
+		if (dragging.current === null || dragging.current === position) return;
+		move(dragging.current, position);
+		dragging.current = position;
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		role: "group",
+		"aria-label": question.question,
+		children: [/* @__PURE__ */ jsx("ol", { children: order.map((option, position) => /* @__PURE__ */ jsxs("li", {
+			ref: (el) => void (el ? rows.current.set(option, el) : rows.current.delete(option)),
+			"data-ask-row": true,
+			tabIndex: 0,
+			draggable: true,
+			"aria-label": `${position + 1}. ${options[option]}`,
+			"aria-description": labels.askUserReorderKeys,
+			"aria-keyshortcuts": "Alt+ArrowUp Alt+ArrowDown",
+			onDragStart: () => dragging.current = position,
+			onDragOver: onDragOver(position),
+			onDragEnd: () => dragging.current = null,
+			onDrop: (e) => e.preventDefault(),
+			onKeyDown: (e) => {
+				if (e.key === "Enter") send();
+				else if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+					const delta = e.key === "ArrowUp" ? -1 : 1;
+					if (e.altKey) {
+						focusAfter.current = option;
+						move(position, position + delta);
+					} else moveFocus(e.currentTarget.parentElement, e.currentTarget, delta);
+				} else return;
+				e.preventDefault();
+			},
+			className: clsx(rowClass$1, "cursor-grab"),
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					className: "text-chat-subtle",
+					children: /* @__PURE__ */ jsx(IconSlot, {
+						className: "[&_svg]:size-4",
+						children: icons.dragHandle
+					})
+				}),
+				/* @__PURE__ */ jsx(Num, { children: position + 1 }),
+				/* @__PURE__ */ jsx("span", {
+					className: "min-w-0 flex-1",
+					children: options[option]
+				})
+			]
+		}, option)) }), /* @__PURE__ */ jsx(Footer, {
+			start: labels.askUserRankHint,
+			onSkip,
+			next: {
+				label: last ? labels.askUserSubmit : labels.askUserContinue,
+				disabled: false,
+				onPress: send
+			}
+		})]
+	});
+}
+const questionViews = {
+	single: SingleQuestion,
+	multiple: MultipleQuestion,
+	rank: RankQuestion
+};
+/**
+* The `ask_user` prompt: the model's questions one at a time with a pager, answered by clicking or the keyboard
+* (number keys, arrows, Enter; Alt+arrows reorder a rank). Submits `{ answers }` (an `AskUserResult`) after the
+* last question; Skip leaves a question out, the close button or Escape declines everything.
+*/
+function AskUserPrompt({ part, onSubmit, onDecline }) {
+	const labels = useLabels();
+	const icons = useIcons();
+	const questions = readAskUserInput(part.input);
+	const [index, setIndex] = useState(0);
+	const [answers, setAnswers] = useState([]);
+	const root = useRef(null);
+	useEffect(() => {
+		root.current?.querySelector("[data-ask-row]:not([data-ask-other])")?.focus();
+	}, [index]);
+	const question = questions[index];
+	if (!question) return null;
+	const Question = questionViews[question.kind];
+	const settle = (answer) => {
+		const next = answers.slice();
+		next[index] = {
+			question: question.question,
+			kind: question.kind,
+			...answer
+		};
+		setAnswers(next);
+		for (let step = 1; step <= questions.length; step++) {
+			const at = (index + step) % questions.length;
+			if (next[at] === void 0) return setIndex(at);
+		}
+		onSubmit({ answers: questions.map((_, i) => next[i]) });
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: root,
+		role: "dialog",
+		"aria-label": labels.askUserPrompt,
+		onKeyDown: (e) => {
+			if (e.key !== "Escape") return;
+			e.preventDefault();
+			onDecline();
+		},
+		className: "flex flex-col gap-1 rounded-chat-lg border border-chat-border-strong bg-chat-surface p-3 font-chat-sans text-chat-fg shadow-chat-popover",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-start gap-2 px-1 pb-1",
+			children: [
+				/* @__PURE__ */ jsx("p", {
+					className: "min-w-0 flex-1 text-(length:--chat-ui-font-size) leading-5 font-medium",
+					children: question.question
+				}),
+				questions.length > 1 && /* @__PURE__ */ jsxs("div", {
+					className: "flex shrink-0 items-center gap-0.5 text-(length:--chat-ui-font-size-sm) text-chat-muted",
+					children: [
+						/* @__PURE__ */ jsx(IconButton, {
+							label: labels.askUserPrevious,
+							size: "sm",
+							isDisabled: index === 0,
+							onPress: () => setIndex(index - 1),
+							children: icons.askPrevious
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "tabular-nums",
+							children: labels.askUserPager(index + 1, questions.length)
+						}),
+						/* @__PURE__ */ jsx(IconButton, {
+							label: labels.askUserNext,
+							size: "sm",
+							isDisabled: index === questions.length - 1,
+							onPress: () => setIndex(index + 1),
+							children: icons.askPagerNext
+						})
+					]
+				}),
+				/* @__PURE__ */ jsx(IconButton, {
+					label: labels.askUserClose,
+					size: "sm",
+					onPress: onDecline,
+					children: icons.remove
+				})
+			]
+		}), /* @__PURE__ */ jsx(Question, {
+			question,
+			initial: answers[index],
+			last: answers.filter((a, i) => a !== void 0 && i !== index).length === questions.length - 1,
+			onAnswer: (answer) => settle({ answer }),
+			onSkip: () => settle({ skipped: true })
+		}, index)]
+	});
+}
+/** The user's answers as a card in the message: each question with its answer, "Ranked: 1. …", or "Skipped". */
+function AskUserAnswers({ part }) {
+	const labels = useLabels();
+	if (part.status === "error") return /* @__PURE__ */ jsx("p", {
+		className: "font-chat-sans text-(length:--chat-ui-font-size) leading-5 text-chat-muted",
+		children: labels.askUserDeclined
+	});
+	const answers = part.status === "done" ? readAskUserResult(part.result) : void 0;
+	if (!answers) return null;
+	const text = (a) => {
+		if (a.skipped || a.answer === void 0) return labels.askUserSkipped;
+		if (typeof a.answer === "string") return a.answer;
+		return a.kind === "rank" ? labels.askUserRanked(a.answer) : labels.askUserPicked(a.answer);
+	};
+	return /* @__PURE__ */ jsx("ul", {
+		"aria-label": labels.askUserAnswers,
+		className: "flex flex-col gap-3 rounded-chat-lg border border-chat-border bg-chat-surface px-4 py-3 font-chat-sans text-(length:--chat-ui-font-size) leading-5",
+		children: answers.map((a, i) => /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx("p", {
+			className: "text-chat-muted",
+			children: a.question
+		}), /* @__PURE__ */ jsx("p", {
+			className: clsx("text-chat-fg", (a.skipped || a.answer === void 0) && "text-chat-subtle"),
+			children: text(a)
+		})] }, i))
+	});
+}
+/**
+* The view of the `ask_user` tool (`askUserTool` in `agentic-ui-kit/core`): the prompt over the composer while
+* the call awaits the user, then the answers card in the message. Registered in `defaultToolViews`.
+*/
+const askUserToolView = {
+	label: (_, labels) => labels.askUserPrompt,
+	Prompt: AskUserPrompt,
+	Block: AskUserAnswers
+};
 // src/components/tools.tsx
 const ToolViewsContext = createContext(void 0);
 function ToolViewsProvider({ tools, children }) {
@@ -2700,6 +3281,7 @@ const memoryTool = {
 	summary: (n, labels) => labels.recalledMemory(n)
 };
 const defaultToolViews = {
+	ask_user: askUserToolView,
 	bash: commandTool,
 	shell: commandTool,
 	web_search: webSearchTool,
@@ -2786,10 +3368,12 @@ function TokenCounter({ tokens, variant = "standalone", className }) {
 * row per step. Each row expands on its own; tool rows render through the registered `ToolView`.
 * A group of one step skips the rows: the heading is the step's own label and the box holds its detail.
 */
-function ActivityGroup({ parts, defaultExpanded = false, className }) {
+function ActivityGroup({ parts: all, defaultExpanded = false, className }) {
+	const parts = all.filter((p) => !bareThought(p) || p.title || p.durationMs);
 	const views = useToolViews();
 	const labels = useLabels();
 	const [expanded, setExpanded] = useState(defaultExpanded);
+	if (parts.length === 0) return null;
 	const live = parts.some(isWorking);
 	const tokens = activityTokens(parts);
 	const after = live && tokens > 0 && /* @__PURE__ */ jsx(TokenCounter, {
@@ -2855,8 +3439,16 @@ function Shimmer({ children }) {
 		children
 	});
 }
+/** A finished thought with nothing to open: hidden reasoning, or no text. It is a plain line, not a disclosure. */
+function bareThought(part) {
+	return part.type === "thinking" && part.status === "done" && (part.visibility === "hidden" || !part.text);
+}
 function SingleStep({ part, live, after, expanded, onExpandedChange }) {
 	const { summary, detail } = useStepContent(part);
+	if (bareThought(part)) return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-1.5 text-chat-muted text-(length:--chat-activity-font-size)",
+		children: [/* @__PURE__ */ jsx(Lead, { live }), summary]
+	});
 	return /* @__PURE__ */ jsx(Disclosure, {
 		isExpanded: expanded,
 		onExpandedChange,
@@ -2879,6 +3471,10 @@ function SingleStep({ part, live, after, expanded, onExpandedChange }) {
 function Step({ part }) {
 	const { summary, detail } = useStepContent(part);
 	const live = isWorking(part);
+	if (bareThought(part)) return /* @__PURE__ */ jsx("div", {
+		className: "px-3 py-2 text-chat-muted text-(length:--chat-activity-font-size)",
+		children: summary
+	});
 	return /* @__PURE__ */ jsx(Disclosure, {
 		className: "px-3 py-2",
 		summaryClassName: "text-(length:--chat-activity-font-size)",
@@ -3347,6 +3943,246 @@ function AssistantMessage({ message, onRetry, onFeedback, onReadAloud, renderPar
 		]
 	});
 }
+// src/components/tool-prompt.tsx
+/**
+* Shows the `Prompt` of a pending call's tool view, above the composer (`ChatView` does this for you). Apps
+* that lay out the chat themselves render it from `useChat().prompts[0]`. Renders nothing if the tool's view
+* has no `Prompt`.
+*/
+function ToolPromptCard({ prompt, onAnswer, onDecline }) {
+	const { part } = prompt;
+	const Prompt = useToolView(part.name).Prompt;
+	if (!Prompt) return null;
+	return /* @__PURE__ */ jsx(Prompt, {
+		part,
+		onSubmit: (result) => onAnswer(part.id, result),
+		onDecline: () => onDecline(part.id)
+	}, part.id);
+}
+// src/components/ui-components.tsx
+const toneClass = {
+	default: "text-chat-fg",
+	accent: "text-chat-accent",
+	good: "text-chat-check",
+	warning: "text-chat-warning",
+	bad: "text-chat-danger"
+};
+const fillClass = {
+	default: "bg-chat-fg",
+	accent: "bg-chat-accent",
+	good: "bg-chat-check",
+	warning: "bg-chat-warning",
+	bad: "bg-chat-danger"
+};
+/** "New" / "Changed": what the model added stands out in the accent. */
+function Tag({ children, quiet = false }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: `rounded-chat-sm px-1.5 text-(length:--chat-ui-font-size-sm) font-medium ${quiet ? "border border-chat-border-strong text-chat-muted" : "bg-chat-accent text-chat-accent-fg"}`,
+		children
+	});
+}
+const Stack = ({ direction = "column", gap = "md", children }) => /* @__PURE__ */ jsx("div", {
+	className: `flex ${direction === "row" ? "flex-row flex-wrap" : "flex-col"} ${{
+		sm: "gap-1.5",
+		md: "gap-3",
+		lg: "gap-5"
+	}[gap]}`,
+	children
+});
+const Grid = ({ columns = 2, children }) => /* @__PURE__ */ jsx("div", {
+	className: "grid gap-3",
+	style: { gridTemplateColumns: `repeat(auto-fit, minmax(min(100%, ${Math.floor(36 / columns)}rem), 1fr))` },
+	children
+});
+const Card = ({ title, subtitle, tag, tone = "default", children }) => /* @__PURE__ */ jsxs("section", {
+	className: `rounded-chat-lg border p-3 ${tone === "accent" ? "border-chat-accent" : "border-chat-border"}`,
+	children: [
+		(title || tag) && /* @__PURE__ */ jsxs("header", {
+			className: "mb-1 flex items-center gap-2",
+			children: [title && /* @__PURE__ */ jsx("h3", {
+				className: "font-chat-sans text-(length:--chat-ui-font-size) font-semibold",
+				children: title
+			}), tag && /* @__PURE__ */ jsx(Tag, {
+				quiet: tone !== "accent",
+				children: tag
+			})]
+		}),
+		subtitle && /* @__PURE__ */ jsx("p", {
+			className: "mb-2 text-(length:--chat-ui-font-size-sm) text-chat-muted",
+			children: subtitle
+		}),
+		children
+	]
+});
+const Heading$1 = ({ text }) => /* @__PURE__ */ jsx("h2", {
+	className: "font-chat-sans text-(length:--chat-ui-font-size) font-semibold",
+	children: text
+});
+const Text$1 = ({ text, tone = "default" }) => /* @__PURE__ */ jsx("p", {
+	className: `font-chat-sans text-(length:--chat-ui-font-size) leading-relaxed ${tone === "muted" ? "text-chat-muted" : ""}`,
+	children: text
+});
+const Metric = ({ label, value, note, tone = "default" }) => /* @__PURE__ */ jsxs("div", {
+	className: "min-w-24",
+	children: [
+		/* @__PURE__ */ jsx("div", {
+			className: "text-(length:--chat-ui-font-size-sm) text-chat-muted",
+			children: label
+		}),
+		/* @__PURE__ */ jsx("div", {
+			className: `font-chat-sans text-xl font-semibold tabular-nums ${toneClass[tone]}`,
+			children: value
+		}),
+		note && /* @__PURE__ */ jsx("div", {
+			className: "text-(length:--chat-ui-font-size-sm) text-chat-subtle",
+			children: note
+		})
+	]
+});
+const List = ({ items }) => /* @__PURE__ */ jsx("ul", {
+	className: "divide-y divide-chat-divider",
+	children: items.map((item, i) => /* @__PURE__ */ jsxs("li", {
+		className: "flex items-baseline gap-2 py-1.5 font-chat-sans text-(length:--chat-ui-font-size)",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: item.tag ? "text-chat-accent" : "",
+				children: item.label
+			}),
+			item.tag && /* @__PURE__ */ jsx(Tag, { children: item.tag }),
+			item.detail && /* @__PURE__ */ jsx("span", {
+				className: "ml-auto text-chat-muted tabular-nums",
+				children: item.detail
+			})
+		]
+	}, i))
+});
+const Table = ({ columns, rows }) => /* @__PURE__ */ jsx("div", {
+	className: "max-w-full overflow-x-auto",
+	children: /* @__PURE__ */ jsxs("table", {
+		className: "w-full border-collapse text-left font-chat-sans text-(length:--chat-ui-font-size)",
+		children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", {
+			className: "border-b border-chat-border-strong",
+			children: columns.map((c, i) => /* @__PURE__ */ jsx("th", {
+				scope: "col",
+				className: "px-2 py-1.5 font-medium text-chat-muted",
+				children: c
+			}, i))
+		}) }), /* @__PURE__ */ jsx("tbody", {
+			className: "divide-y divide-chat-divider",
+			children: rows.map((row, r) => /* @__PURE__ */ jsx("tr", { children: columns.map((_, c) => /* @__PURE__ */ jsx("td", {
+				className: `px-2 py-1.5 ${typeof row[c] === "number" ? "tabular-nums" : ""}`,
+				children: row[c]
+			}, c)) }, r))
+		})]
+	})
+});
+const Badge$1 = ({ label, tone = "default" }) => /* @__PURE__ */ jsx("span", {
+	className: `inline-block self-start rounded-chat-sm border border-current px-1.5 font-chat-sans text-(length:--chat-ui-font-size-sm) font-medium ${toneClass[tone]}`,
+	children: label
+});
+const Progress = ({ label, value, max = 100, tone = "accent" }) => {
+	const share = Math.min(1, Math.max(0, value / max));
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1",
+		children: [label && /* @__PURE__ */ jsxs("div", {
+			className: "flex justify-between text-(length:--chat-ui-font-size-sm) text-chat-muted",
+			children: [/* @__PURE__ */ jsx("span", { children: label }), /* @__PURE__ */ jsxs("span", {
+				className: "tabular-nums",
+				children: [Math.round(share * 100), "%"]
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			role: "progressbar",
+			"aria-label": label ?? "Progress",
+			"aria-valuemin": 0,
+			"aria-valuemax": max,
+			"aria-valuenow": Math.min(value, max),
+			className: "h-1.5 overflow-hidden rounded-full bg-chat-border",
+			children: /* @__PURE__ */ jsx("div", {
+				className: `h-full rounded-full ${fillClass[tone]}`,
+				style: { width: `${share * 100}%` }
+			})
+		})]
+	});
+};
+const Checklist = function Checklist({ stateKey, items }) {
+	const [state, set] = useUiState();
+	const done = state[stateKey] ?? [];
+	return /* @__PURE__ */ jsx("ul", {
+		className: "flex flex-col gap-1",
+		children: items.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("label", {
+			className: "flex items-center gap-2 font-chat-sans text-(length:--chat-ui-font-size)",
+			children: [/* @__PURE__ */ jsx("input", {
+				type: "checkbox",
+				className: "accent-(--chat-accent)",
+				checked: done.includes(item),
+				onChange: (e) => set(stateKey, e.target.checked ? [...done, item] : done.filter((d) => d !== item))
+			}), /* @__PURE__ */ jsx("span", {
+				className: done.includes(item) ? "text-chat-subtle line-through" : "",
+				children: item
+			})]
+		}) }, item))
+	});
+};
+const Tabs = function Tabs({ stateKey, value, options }) {
+	const [, set] = useUiState();
+	const current = value ?? options[0].id;
+	return /* @__PURE__ */ jsx("div", {
+		role: "tablist",
+		className: "inline-flex max-w-full flex-wrap gap-1 self-start rounded-chat-md border border-chat-border p-0.5",
+		children: options.map((o) => /* @__PURE__ */ jsx(Button, {
+			size: "sm",
+			variant: o.id === current ? "subtle" : "ghost",
+			onPress: () => set(stateKey, o.id),
+			"aria-selected": o.id === current,
+			children: o.label
+		}, o.id))
+	});
+};
+const Show = ({ value, equals, fallback, children }) => value === equals || value === void 0 && fallback ? /* @__PURE__ */ jsx(Fragment$1, { children }) : null;
+/**
+* The drawing of each component, by name and apart from its spec. Take one to reuse in your own
+* component: `{ ...uiSpecs.Card, render: uiRenders.Card }`.
+*/
+const uiRenders = {
+	Stack,
+	Grid,
+	Card,
+	Heading: Heading$1,
+	Text: Text$1,
+	Metric,
+	List,
+	Table,
+	Badge: Badge$1,
+	Progress,
+	Checklist,
+	Tabs,
+	Show,
+	Button: function UiButton({ label, variant = "secondary", onPress }) {
+		const run = useUiAction();
+		return /* @__PURE__ */ jsx(Button, {
+			size: "sm",
+			className: "self-start",
+			variant: variant === "primary" ? "primary" : "subtle",
+			onPress: () => run(onPress),
+			children: label
+		});
+	}
+};
+/**
+* The ready components for `UiComponentsProvider`, in the order of `uiComponentSpecs`. Everything by default;
+* `include` and `exclude` take component names or the groups `"display"` (Stack, Grid, Card, Heading, Text,
+* Metric, List, Table, Badge, Progress) and `"interactive"` (Checklist, Tabs, Show, Button). `renders` swaps the
+* drawing of single components. Build the model's tool from the same picks so it only hears of what you
+* registered: `uiSpecSet({ include })` in `agentic-ui-kit/core`, or strip the renders from this list.
+*/
+function uiComponentSet({ renders = {}, ...selection } = {}) {
+	return uiSpecSet(selection).map((spec) => ({
+		...spec,
+		render: renders[spec.name] ?? uiRenders[spec.name]
+	}));
+}
+/** The whole set: `uiComponentSet()`. */
+const uiComponents = uiComponentSet();
 // src/components/approval-card.tsx
 /**
 * Asks the user before a tool runs, above the composer. Shows the tool's label and what it will do: its
@@ -4572,6 +5408,34 @@ function ChatList({ sections, activeId, onSelect, rowMenu, className, ...props }
 		}, section.id))
 	});
 }
+/**
+* An icon button that opens a `ChatList` in a popover, for `Sidebar`'s `railActions`: the list itself is
+* hidden on the collapsed rail, so this keeps recent chats reachable. Picking a chat closes the popover.
+*/
+function ChatListRailButton({ label, popoverProps, onSelect, className, ...list }) {
+	const icons = useIcons();
+	const labels = useLabels();
+	const name = label ?? labels.chats;
+	return /* @__PURE__ */ jsxs(DialogTrigger, { children: [/* @__PURE__ */ jsx(IconButton, {
+		label: name,
+		children: icons.chatList
+	}), /* @__PURE__ */ jsx(Popover, {
+		placement: "right top",
+		...popoverProps,
+		children: /* @__PURE__ */ jsx(Dialog, {
+			"aria-label": name,
+			className: "max-h-[70dvh] w-64 overflow-y-auto p-2 outline-none [scrollbar-width:thin]",
+			children: ({ close }) => /* @__PURE__ */ jsx(ChatList, {
+				...list,
+				className,
+				onSelect: (id) => {
+					onSelect?.(id);
+					close();
+				}
+			})
+		})
+	})] });
+}
 function ChatRow({ chat, active, nested, onSelect, menu }) {
 	const icons = useIcons();
 	const [menuOpen, setMenuOpen] = useState(false);
@@ -4677,7 +5541,7 @@ const densityVars = {
 	}
 };
 /** A whole chat: header, the conversation, the docked composer. An empty chat shows `emptyState`. */
-function ChatView({ messages, busy = false, onSend, onStop, approvals, onApprove, onRetry, onEdit, onFeedback, onReadAloud, messageActions, renderPart, widgets, header, composer, emptyState, disclaimer, renderComposer, density = "full", contentWidth, contentPadding, className }) {
+function ChatView({ messages, busy = false, onSend, onStop, approvals, onApprove, prompts, onAnswer, onDecline, onRetry, onEdit, onFeedback, onReadAloud, messageActions, renderPart, widgets, header, composer, emptyState, disclaimer, renderComposer, density = "full", contentWidth, contentPadding, className }) {
 	const style = {
 		...densityVars[density],
 		...contentWidth && { "--chat-content-width": contentWidth },
@@ -4692,6 +5556,7 @@ function ChatView({ messages, busy = false, onSend, onStop, approvals, onApprove
 	const [body, short] = useShortPane();
 	const labels = useLabels();
 	const pending = onApprove && approvals?.[0];
+	const asking = !pending && onAnswer ? prompts?.[0] : void 0;
 	const box = (variant) => {
 		if (composer === false) return null;
 		const element = /* @__PURE__ */ jsx(Composer, {
@@ -4700,7 +5565,7 @@ function ChatView({ messages, busy = false, onSend, onStop, approvals, onApprove
 			onSubmit: onSend,
 			...onStop && { onStop },
 			...composer,
-			...pending && { placeholder: labels.replyDirectly }
+			...(pending || asking) && { placeholder: labels.replyDirectly }
 		});
 		return renderComposer ? renderComposer(element, variant === "centered" ? "empty" : "docked") : element;
 	};
@@ -4737,6 +5602,14 @@ function ChatView({ messages, busy = false, onSend, onStop, approvals, onApprove
 									onRespond: onApprove,
 									className: "mb-2"
 								}, pending.part.id),
+								asking && /* @__PURE__ */ jsx("div", {
+									className: "mb-2",
+									children: /* @__PURE__ */ jsx(ToolPromptCard, {
+										prompt: asking,
+										onAnswer,
+										onDecline: onDecline ?? (() => {})
+									})
+								}),
 								box("docked"),
 								/* @__PURE__ */ jsx("div", {
 									className: clsx("flex items-center justify-center py-1 pb-[max(0.25rem,env(safe-area-inset-bottom))] text-center font-chat-sans text-(length:--chat-ui-font-size-sm) leading-4 text-chat-subtle", short ? "min-h-2" : "min-h-6"),
@@ -5108,7 +5981,7 @@ function SidebarItem({ icon, label, onPress, href, active, shortcut, badge, desc
 }
 const initials = (name) => name.split(/\s+/).slice(0, 2).map((w) => w[0]?.toUpperCase() ?? "").join("");
 /** The account row at the bottom: avatar, name, plan, and a menu. */
-function SidebarUser({ name, detail, avatarUrl, menu }) {
+function SidebarUser({ name, detail, avatarUrl, menu, popoverProps }) {
 	const icons = useIcons();
 	const { collapsed } = useSidebar();
 	const avatar = avatarUrl ? /* @__PURE__ */ jsx("img", {
@@ -5140,7 +6013,8 @@ function SidebarUser({ name, detail, avatarUrl, menu }) {
 	if (!menu) return button;
 	return /* @__PURE__ */ jsxs(MenuTrigger, { children: [button, /* @__PURE__ */ jsx(Popover, {
 		placement: "top start",
+		...popoverProps,
 		children: menu
 	})] });
 }
-export { ActivityGroup, AgentProvider, AgentRegistry, AppShell, ApprovalCard, AssistantMessage, AttachButton, AttachmentCard, AttachmentRow, Badge, Button, Caret, ChatHeader, ChatList, ChatNotice, ChatTheme, ChatTitleMenu, ChatTranscript, ChatView, CodeBlock, Composer, ContextMenu, ContextMeter, ContextPanel, CopyButton, CopyField, DRAWER_QUERY, DialogTrigger, DictationButton, DictationControls, Disclosure, Drawer, EffortButton, EffortSlider, EmptyState, IconButton, Markdown, MarkdownLinksProvider, Menu, MenuItem, MenuNote, MenuSearch, MenuSection, MenuSeparator, MenuTrigger, MessageList, Modal, ModelPicker, Panel, PastedTextDialog, Popover, PopoverTrigger, SegmentedControl, Sidebar, SidebarItem, SidebarList, SidebarToggle, SidebarUser, SubmenuTrigger, TokenCounter, ToolViewsProvider, Tooltip, UiComponentsProvider, UiMarkupBlock, UiTree, UserMessage, VoiceMeter, WIDGET_MAX_HEIGHT, WidgetFrame, WidgetHostProvider, WidgetPartView, activityHeading, activityLabel, commandTool, defaultIcons, defaultLabels, defaultToolViews, encodeWav, formatDuration, formatRelativeTime, formatTokens, htmlComponent, intersectAllow, memoryTool, messageText, openInNewTab, readTreeInput, readVisualizeInput, sseTransport, uiMarkupToolView, uiTreeToolView, useAgentContext, useAgentRegistry, useAgentSnapshot, useAgentTool, useAttachments, useChat, useChatTool, useCountUp, useDictation, useIcons, useLabels, useMediaQuery, useSidebar, useSmoothText, useToolView, useToolViews, useUiAction, useUiMarkupLanguage, useUiState, useWidgetHost, userMessage, webFetchTool, webSearchTool, widgetCsp, widgetToolView };
+export { ActivityGroup, AgentProvider, AgentRegistry, AppShell, ApprovalCard, AskUserAnswers, AskUserPrompt, AssistantMessage, AttachButton, AttachmentCard, AttachmentRow, Badge, Button, Caret, ChatHeader, ChatList, ChatListRailButton, ChatNotice, ChatTheme, ChatTitleMenu, ChatTranscript, ChatView, CodeBlock, Composer, ContextMenu, ContextMeter, ContextPanel, CopyButton, CopyField, DRAWER_QUERY, DialogTrigger, DictationButton, DictationControls, Disclosure, Drawer, EffortButton, EffortSlider, EmptyState, IconButton, Markdown, MarkdownLinksProvider, Menu, MenuItem, MenuNote, MenuSearch, MenuSection, MenuSeparator, MenuTrigger, MessageList, Modal, ModelPicker, Panel, PastedTextDialog, Popover, PopoverTrigger, SegmentedControl, Sidebar, SidebarItem, SidebarList, SidebarToggle, SidebarUser, SubmenuTrigger, TokenCounter, ToolPromptCard, ToolViewsProvider, Tooltip, UiComponentsProvider, UiMarkupBlock, UiTree, UserMessage, VoiceMeter, WIDGET_MAX_HEIGHT, WidgetFrame, WidgetHostProvider, WidgetPartView, activityHeading, activityLabel, askUserToolView, commandTool, defaultIcons, defaultLabels, defaultToolViews, encodeWav, formatDuration, formatRelativeTime, formatTokens, htmlComponent, intersectAllow, memoryTool, messageText, openInNewTab, readTreeInput, readVisualizeInput, sseTransport, uiComponentSet, uiComponents, uiMarkupToolView, uiRenders, uiTreeToolView, useAgentContext, useAgentRegistry, useAgentSnapshot, useAgentTool, useAttachments, useChat, useChatTool, useCountUp, useDictation, useIcons, useLabels, useMediaQuery, useSidebar, useSmoothText, useToolView, useToolViews, useUiAction, useUiMarkupLanguage, useUiState, useWidgetHost, userMessage, webFetchTool, webSearchTool, widgetCsp, widgetToolView };