@gedatou/cadenza-ai 0.7.1

package/dist/index.mjs

@@ -0,0 +1,2809 @@
+"use client";
+import { n as modelRef, r as parseModelRef, t as createCatalog } from "./catalog-CvvS2JaW.mjs";
+import { t as anthropic } from "./anthropic-DdrANeO1.mjs";
+import { t as bedrock } from "./bedrock-534H9yfk.mjs";
+import { t as deepseek } from "./deepseek-C1b74T2F.mjs";
+import { t as gemini } from "./gemini-DcJ5Kr3h.mjs";
+import { t as grok } from "./grok-CffQuBd6.mjs";
+import { t as groq } from "./groq-Ba6TTYLp.mjs";
+import { t as llmgateway } from "./llmgateway-Pt5CS6aQ.mjs";
+import { t as mistral } from "./mistral-BGMwwbU9.mjs";
+import { t as ollama } from "./ollama-BBJs-3mK.mjs";
+import { t as openai } from "./openai--FIeahIH.mjs";
+import { t as openrouter } from "./openrouter-q-lx-2Cb.mjs";
+import { t as vercelGateway } from "./vercel-gateway-DW3Z0Os1.mjs";
+import { t as vertex } from "./vertex-hg4Dt54O.mjs";
+import { n as clampThinkingLevel, r as supportedThinkingLevels, t as THINKING_LEVELS } from "./thinking-CH2uL1dr.mjs";
+import { Children, createContext, isValidElement, memo, use, useCallback, useEffect, useEffectEvent, useId, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { defaultByokStorage, defaultByokStorage as defaultByokStorage$1, defineByok, defineByok as defineByok$1, isPasskeyStorageSupported, memoryStorage, memoryStorage as memoryStorage$1, passkeyStorage } from "@tanstack/ai-client/byok";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { EventType, EventType as EventType$1, fromSpecTokenUsage, fromSpecTokenUsage as fromSpecTokenUsage$1, generateMessageId, parsePartialJSON, parsePartialJSON as parsePartialJSON$1, toolDefinition } from "@tanstack/ai/client";
+import { Attachment, AttachmentAction, AttachmentActions, AttachmentContent, AttachmentGroup, AttachmentMedia, AttachmentTitle, Bubble, BubbleContent, Button, Collapsible, CollapsiblePanel, CollapsibleTrigger, Combobox, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxTrigger, ComboboxValue, Dialog, DialogBody, DialogClose, DialogDescription, DialogFooter, DialogHeader, DialogPopup, DialogTitle, Empty, Field, FieldError, FieldLabel, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupTextarea, Item, ItemActions, ItemContent, ItemDescription, ItemGroup, ItemTitle, Marker, MarkerContent, Message, MessageContent, MessageFooter, MessageScroller, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, Progress, ScrollArea, Select, SelectItem, SelectPopup, SelectTrigger, SelectValue, Spinner, Toggle, Tooltip, TooltipPopup, TooltipTrigger, cn, createChangeEventDetails, createGenericEventDetails, dataAttr } from "@gedatou/cadenza-ui";
+import { useControllableState } from "@gedatou/cadenza-utils";
+import { IconArchive, IconArrowUp, IconBrain, IconCheck, IconClock, IconFileText, IconKey, IconMicrophone, IconPaperclip, IconPencil, IconPhoto, IconPlayerStop, IconServer, IconTrash, IconWorld, IconX } from "@tabler/icons-react";
+import { useAudioRecorder, useByok } from "@tanstack/ai-react";
+import { cjk } from "@streamdown/cjk";
+import { code } from "@streamdown/code";
+import { math } from "@streamdown/math";
+import { Streamdown } from "streamdown";
+export * from "@tanstack/ai-react";
+//#region src/catalog/cost.ts
+/**
+* USD；`cost` 缺失返回 undefined。
+*
+* 提示 token 分三档计价：命中缓存的按 `cacheRead`，写入缓存的按 `cacheWrite`
+* （Anthropic 是 input 的 1.25×），其余按 `input`；两个缓存价缺省都回落到 `input`。
+* 两个明细都当作含在 `promptTokens` 里扣除——`usage.ts` 的 `addTokenUsage` 正是这样
+* 累加它们的，而 `Math.max(…, 0)` 兜住厂商把它们单列在外的情形。
+*/
+function estimateCost(model, usage) {
+	const cost = model.cost;
+	if (!cost) return void 0;
+	const cached = usage.promptTokensDetails?.cachedTokens ?? 0;
+	const written = usage.promptTokensDetails?.cacheWriteTokens ?? 0;
+	const fresh = Math.max(usage.promptTokens - cached - written, 0);
+	const cacheRead = cost.cacheRead ?? cost.input;
+	const cacheWrite = cost.cacheWrite ?? cost.input;
+	return (fresh * cost.input + cached * cacheRead + written * cacheWrite + usage.completionTokens * cost.output) / 1e6;
+}
+//#endregion
+//#region src/catalog/usage-metrics.ts
+const MODALITIES = [
+	"text",
+	"image",
+	"audio",
+	"video",
+	"document"
+];
+/** 分母为零或缺失时返回 undefined，不返回 0。 */
+function ratio(part, whole) {
+	if (part === void 0 || whole === void 0 || whole <= 0) return void 0;
+	return part / whole;
+}
+function slices(details, whole) {
+	if (!details || whole <= 0) return [];
+	const by = details;
+	return MODALITIES.map((kind) => ({
+		kind,
+		tokens: by[`${kind}Tokens`] ?? 0,
+		share: (by[`${kind}Tokens`] ?? 0) / whole
+	})).filter((s) => s.tokens > 0).sort((a, b) => b.tokens - a.tokens);
+}
+/**
+* `TokenUsage` 里读得出来的比例，一次算齐。
+*
+* 纯函数，和 `estimateCost` 并排住在目录层：这些数字两端都用得上，且与 React 无关。
+* 输入可以是 `useUsageTracker` 的任意一个粒度——`total` / `lastRun` / `byMessage` 的某一条。
+*
+* `model` 只有两项指标需要（`contextRatio` 要 `contextWindow`，`cacheSavings` 要价格），
+* 不给就是那两项为 `undefined`，其余照算。
+*/
+function usageMetrics(usage, model) {
+	const prompt = usage.promptTokensDetails;
+	const completion = usage.completionTokensDetails;
+	const cached = prompt?.cachedTokens;
+	const cost = model?.cost;
+	const savings = cached !== void 0 && cost?.cacheRead !== void 0 ? cached * (cost.input - cost.cacheRead) / 1e6 : void 0;
+	return {
+		outputRatio: ratio(usage.completionTokens, usage.promptTokens),
+		cacheHitRate: ratio(cached, usage.promptTokens),
+		cacheWriteRate: ratio(prompt?.cacheWriteTokens, usage.promptTokens),
+		reasoningShare: ratio(completion?.reasoningTokens, usage.completionTokens),
+		contextRatio: ratio(usage.promptTokens, model?.contextWindow),
+		cacheSavings: savings,
+		promptModalities: slices(prompt, usage.promptTokens),
+		completionModalities: slices(completion, usage.completionTokens)
+	};
+}
+//#endregion
+//#region src/catalog/index.ts
+const providers = {
+	openai,
+	anthropic,
+	gemini,
+	grok,
+	groq,
+	mistral,
+	openrouter,
+	vercelGateway,
+	llmgateway,
+	bedrock,
+	vertex,
+	ollama,
+	deepseek
+};
+const defaultCatalog = createCatalog(Object.values(providers));
+//#endregion
+//#region src/runtime/attachments.ts
+/** 3 MiB: base64 in a JSON body, comfortably under common function payload limits. */
+const DEFAULT_MAX_ATTACHMENT_BYTES = 3145728;
+const DOCUMENT_MIMES = /* @__PURE__ */ new Set([
+	"application/pdf",
+	"text/plain",
+	"text/markdown"
+]);
+const EXTENSION_MIME = {
+	pdf: "application/pdf",
+	md: "text/markdown",
+	txt: "text/plain"
+};
+function attachmentKindOf(mimeType) {
+	if (mimeType.startsWith("image/")) return "image";
+	if (mimeType.startsWith("audio/")) return "audio";
+	if (mimeType.startsWith("video/")) return "video";
+	if (DOCUMENT_MIMES.has(mimeType)) return "document";
+}
+function mimeOf(file) {
+	if (file.type !== "") return file.type;
+	const ext = file.name.split(".").pop()?.toLowerCase() ?? "";
+	return EXTENSION_MIME[ext] ?? "";
+}
+function toBase64(file) {
+	return new Promise((resolve, reject) => {
+		const reader = new FileReader();
+		reader.onerror = () => reject(reader.error ?? /* @__PURE__ */ new Error("cadenza-ai: could not read the file"));
+		reader.onload = () => resolve(String(reader.result).split(",")[1] ?? "");
+		reader.readAsDataURL(file);
+	});
+}
+/** Inline a file as a `data` content part; rejects unsupported types and oversize files. */
+async function fileToContentPart(file, options = {}) {
+	const maxBytes = options.maxBytes ?? 3145728;
+	if (file.size > maxBytes) throw new Error(`cadenza-ai: "${file.name}" exceeds the ${maxBytes} byte attachment limit.`);
+	const mimeType = mimeOf(file);
+	const kind = attachmentKindOf(mimeType);
+	if (!kind) throw new Error(`cadenza-ai: "${file.name}" (${mimeType || "unknown type"}) is not an accepted attachment.`);
+	return {
+		type: kind,
+		source: {
+			type: "data",
+			value: await toBase64(file),
+			mimeType
+		}
+	};
+}
+const ACCEPT = {
+	image: ["image/*"],
+	audio: ["audio/*"],
+	video: ["video/*"],
+	document: [
+		"application/pdf",
+		"text/plain",
+		"text/markdown"
+	]
+};
+let counter = 0;
+function nextId() {
+	counter += 1;
+	return `attachment-${Date.now().toString(36)}-${counter}`;
+}
+function revoke(item) {
+	if (item.previewUrl !== void 0) URL.revokeObjectURL(item.previewUrl);
+}
+/** The composer's pending attachments, before they become parts of a sent message. */
+const ALL_KINDS = [
+	"image",
+	"audio",
+	"video",
+	"document"
+];
+function useAttachmentDraft(options = {}) {
+	const accepted = options.accept;
+	const kinds = useMemo(() => accepted ?? ALL_KINDS, [accepted]);
+	const maxBytes = options.maxBytes ?? 3145728;
+	const [items, setItems] = useState([]);
+	const itemsRef = useRef(items);
+	itemsRef.current = items;
+	const add = useCallback((incoming) => {
+		const next = incoming.map((entry) => {
+			if (entry instanceof File) {
+				const mimeType = mimeOf(entry);
+				const kind = attachmentKindOf(mimeType);
+				const base = {
+					id: nextId(),
+					name: entry.name,
+					mimeType,
+					size: entry.size,
+					file: entry
+				};
+				if (!kind || !kinds.includes(kind)) return {
+					...base,
+					kind: kind ?? "document",
+					state: "error",
+					error: "unsupported"
+				};
+				if (entry.size > maxBytes) return {
+					...base,
+					kind,
+					state: "error",
+					error: "too-large"
+				};
+				return {
+					...base,
+					kind,
+					state: "idle",
+					previewUrl: kind === "image" ? URL.createObjectURL(entry) : void 0
+				};
+			}
+			const kind = entry.type === "text" ? void 0 : entry.type;
+			const ok = kind !== void 0 && kinds.includes(kind);
+			const mimeType = entry.type === "text" ? "text/plain" : entry.source.mimeType ?? "";
+			return {
+				id: nextId(),
+				kind: kind ?? "document",
+				state: ok ? "done" : "error",
+				name: kind ?? "text",
+				mimeType,
+				size: 0,
+				part: entry,
+				...ok ? {} : { error: "unsupported" }
+			};
+		});
+		setItems((current) => [...current, ...next]);
+	}, [kinds, maxBytes]);
+	const remove = useCallback((id) => {
+		itemsRef.current.filter((i) => i.id === id).forEach(revoke);
+		setItems((current) => current.filter((i) => i.id !== id));
+	}, []);
+	const clear = useCallback(() => {
+		itemsRef.current.forEach(revoke);
+		setItems([]);
+	}, []);
+	useEffect(() => () => itemsRef.current.forEach(revoke), []);
+	const toParts = useCallback(async () => {
+		return Promise.all(itemsRef.current.filter((i) => i.state !== "error").map((i) => i.part ? Promise.resolve(i.part) : fileToContentPart(i.file, { maxBytes })));
+	}, [maxBytes]);
+	const accept = useMemo(() => kinds.flatMap((k) => ACCEPT[k]).join(","), [kinds]);
+	return useMemo(() => ({
+		items,
+		add,
+		remove,
+		clear,
+		toParts,
+		accept
+	}), [
+		items,
+		add,
+		remove,
+		clear,
+		toParts,
+		accept
+	]);
+}
+//#endregion
+//#region src/runtime/byok.ts
+function keylessCoverage(catalog) {
+	return Object.fromEntries(catalog.providers.filter((p) => !p.keyRequired).map((p) => [p.id, true]));
+}
+const BYOK_ERRORS = /* @__PURE__ */ new Set([
+	"ByokBlockedError",
+	"ByokMissingError",
+	"ByokUnresolvedProviderError"
+]);
+/** True for the errors a send throws when the client could not attach a key — the dialog is already asking; the send can run again once the key is in. */
+function isByokError(error) {
+	return error instanceof Error && BYOK_ERRORS.has(error.name);
+}
+/** A `ByokClient` with the house defaults, ready for `useChat({ byok })`. */
+function createByok(options = {}) {
+	const byok = defineByok$1({ storage: options.storage ?? (options.persistent ? defaultByokStorage$1() : memoryStorage$1()) });
+	if (options.catalog) byok.setServerCoverage(keylessCoverage(options.catalog));
+	return byok;
+}
+/**
+* Fetch `/api/ai/catalog` once and merge its `coverage` into the client, so
+* `prepare()` stops asking for keys the server already holds.
+*/
+function useServerCoverage(byok, url = "/api/ai/catalog") {
+	const [state, setState] = useState({
+		coverage: void 0,
+		providers: void 0,
+		error: void 0
+	});
+	useEffect(() => {
+		let cancelled = false;
+		const controller = new AbortController();
+		fetch(url, { signal: controller.signal }).then(async (res) => {
+			if (!res.ok) throw new Error(`cadenza-ai: ${url} answered ${res.status}`);
+			return res.json();
+		}).then((json) => {
+			if (cancelled) return;
+			byok.setServerCoverage(json.coverage);
+			setState({
+				coverage: json.coverage,
+				providers: json.providers,
+				error: void 0
+			});
+		}).catch((error) => {
+			if (!cancelled) setState((s) => ({
+				...s,
+				error: error instanceof Error ? error : new Error(String(error))
+			}));
+		});
+		return () => {
+			cancelled = true;
+			controller.abort();
+		};
+	}, [byok, url]);
+	return state;
+}
+//#endregion
+//#region src/runtime/messages.ts
+/** The message's text parts, joined by blank lines; tool calls and media are skipped. */
+function messageText(message) {
+	return message.parts.filter((p) => p.type === "text").map((p) => p.content).join("\n\n");
+}
+/** A plain Markdown transcript, for copy / download. */
+function messagesToMarkdown(messages, options = {}) {
+	const out = [];
+	if (options.title !== void 0) out.push(`# ${options.title}`, "");
+	for (const message of messages) {
+		out.push(`**${message.role === "user" ? "User" : "Assistant"}**`, "");
+		for (const part of message.parts) if (part.type === "text") out.push(part.content, "");
+		else if (part.type === "thinking" && options.includeThinking) out.push(...part.content.split("\n").map((line) => `> ${line}`), "");
+	}
+	return `${out.join("\n").trimEnd()}\n`;
+}
+/**
+* Linear edit-and-resend (spec Q2): stop any run, drop the edited user message
+* and everything after it, then send the new content in its place.
+*/
+async function editAndResend(chat, messageId, content) {
+	const index = chat.messages.findIndex((m) => m.id === messageId);
+	if (index === -1 || chat.messages[index]?.role !== "user") throw new Error("cadenza-ai: editAndResend needs the id of a user message.");
+	if (chat.status !== "ready") chat.stop();
+	chat.setMessages(chat.messages.slice(0, index));
+	await chat.sendMessage(content);
+}
+/**
+* A thinking part is done when the run is no longer streaming, when the
+* provider signed it, or when a later text / tool-call part has started.
+*/
+function isThinkingComplete(message, partIndex, status) {
+	if (status !== "streaming") return true;
+	if (message.parts[partIndex]?.signature !== void 0) return true;
+	return message.parts.slice(partIndex + 1).some((p) => p.type === "text" || p.type === "tool-call");
+}
+function asSource(value) {
+	if (typeof value !== "object" || value === null) return void 0;
+	const { url, title, snippet } = value;
+	if (typeof url !== "string") return void 0;
+	return {
+		url,
+		...typeof title === "string" ? { title } : {},
+		...typeof snippet === "string" ? { snippet } : {}
+	};
+}
+function collect(value, into) {
+	if (Array.isArray(value)) for (const item of value) {
+		const source = asSource(item);
+		if (source) into.push(source);
+	}
+	else if (typeof value === "object" && value !== null && "results" in value) collect(value.results, into);
+}
+/**
+* Citations from provider-executed web search: an explicit `metadata.sources`
+* list, or the result payload of a search tool the provider ran itself.
+*/
+function sourcesOf(message) {
+	const found = [];
+	for (const part of message.parts) {
+		if (part.type !== "tool-call") continue;
+		const metadata = part.metadata ?? {};
+		collect(metadata.sources, found);
+		if (metadata.providerExecuted === true && /search/i.test(part.name)) collect(part.output, found);
+	}
+	const seen = /* @__PURE__ */ new Set();
+	return found.filter((s) => seen.has(s.url) ? false : (seen.add(s.url), true));
+}
+//#endregion
+//#region src/runtime/renderers.tsx
+const DEFAULT_PART_LABELS = {
+	thinking: "Thinking…",
+	thought: "Thought for ",
+	toolPending: "Preparing",
+	toolRunning: "Running",
+	toolApprovalRequested: "Needs approval",
+	toolApproved: "Approved",
+	toolDenied: "Denied",
+	toolDone: "Done",
+	toolFailed: "Failed",
+	toolGroup: (count) => `Ran ${count} tools`,
+	approve: "Approve",
+	deny: "Deny",
+	sources: (count) => `${count} sources`
+};
+/** Identity with a type check, so a registry can be declared outside a component. */
+function definePartRenderers(renderers) {
+	return renderers;
+}
+const PartRenderersContext = createContext({
+	renderers: {},
+	labels: DEFAULT_PART_LABELS
+});
+if (process.env.NODE_ENV !== "production") PartRenderersContext.displayName = "PartRenderersContext";
+function PartRenderersProvider({ renderers, labels, children }) {
+	const parent = use(PartRenderersContext);
+	const value = useMemo(() => ({
+		renderers: renderers ? {
+			...parent.renderers,
+			...renderers,
+			...parent.renderers.toolCall ?? renderers.toolCall ? { toolCall: {
+				...parent.renderers.toolCall,
+				...renderers.toolCall
+			} } : {}
+		} : parent.renderers,
+		labels: labels ? {
+			...parent.labels,
+			...labels
+		} : parent.labels
+	}), [
+		renderers,
+		labels,
+		parent
+	]);
+	return /* @__PURE__ */ jsx(PartRenderersContext, {
+		value,
+		children
+	});
+}
+function usePartRenderers() {
+	return use(PartRenderersContext);
+}
+//#endregion
+//#region src/runtime/stored-state.ts
+const listeners = /* @__PURE__ */ new Map();
+const cache = /* @__PURE__ */ new Map();
+function storage() {
+	try {
+		return typeof window === "undefined" ? void 0 : window.localStorage ?? void 0;
+	} catch {
+		return;
+	}
+}
+function snapshot(key, initial) {
+	const store = storage();
+	const hit = cache.get(key);
+	if (!store || hit?.detached) return hit ? hit.value : seed(key, null, initial);
+	const raw = store.getItem(key);
+	if (hit && hit.raw === raw) return hit.value;
+	if (raw === null) return seed(key, null, initial);
+	try {
+		return seed(key, raw, JSON.parse(raw));
+	} catch {
+		return seed(key, raw, initial);
+	}
+}
+function seed(key, raw, value) {
+	cache.set(key, {
+		raw,
+		value
+	});
+	return value;
+}
+function emit(key) {
+	listeners.get(key)?.forEach((l) => l());
+}
+/**
+* `useState` whose value round-trips through `localStorage[key]` and stays in
+* sync across hooks and tabs. Falls back to `initial` on the server and to an
+* in-memory copy where storage is unavailable; writes never throw.
+*/
+function useStoredState(key, initial) {
+	const subscribe = useCallback((listener) => {
+		let set = listeners.get(key);
+		if (!set) {
+			set = /* @__PURE__ */ new Set();
+			listeners.set(key, set);
+		}
+		set.add(listener);
+		const onStorage = (event) => {
+			if (event.key === key) listener();
+		};
+		window.addEventListener("storage", onStorage);
+		return () => {
+			set.delete(listener);
+			window.removeEventListener("storage", onStorage);
+		};
+	}, [key]);
+	return [useSyncExternalStore(subscribe, () => snapshot(key, initial), () => initial), useCallback((next) => {
+		const raw = JSON.stringify(next);
+		let stored = null;
+		let detached = false;
+		try {
+			storage()?.setItem(key, raw);
+			stored = storage()?.getItem(key) ?? null;
+		} catch {
+			detached = true;
+		}
+		cache.set(key, {
+			raw: stored,
+			value: next,
+			detached
+		});
+		emit(key);
+	}, [key])];
+}
+//#endregion
+//#region src/runtime/selection.ts
+function firstSelection(catalog) {
+	const model = catalog.models[0];
+	return {
+		provider: model?.provider ?? "",
+		model: model?.id ?? "",
+		thinking: "off",
+		search: false
+	};
+}
+/** 只有模型声明了 `search` 才可能是 on——同 `clampThinkingLevel` 的道理：能力由目录说了算，不由存储说了算。 */
+function clampSearch(model, on) {
+	return on === true && model?.search === true;
+}
+/**
+* 存储里那份，修成控件能用的形状。两条规矩，来源不同：
+*
+* 1. **字段必须存在、类型必须对。** 控件把 `undefined` 当受控值会出事——
+*    `useControllableState` 在首帧按 `value !== undefined` 锁死受控性且不再改判，
+*    于是 `SearchToggle` / `ThinkingToggle` 整场会话都改吃自己的内部状态，第一次
+*    按下还会触发受控性告警。这一条无条件执行。
+* 2. **按能力裁剪，只在目录认识这个模型时做。** 「目录里没这条」和「这个模型没这个
+*    能力」是两回事：目录改名或删掉一个条目，就会让所有 `getModel` 落空，把它当成
+*    「什么都不支持」会静默擦掉用户的选择。
+*
+* 裁剪只作用于读出来的这一份。写回存储的永远是原值展开——目录暂时不认识某个模型，
+* 不该成为把它的档位和搜索开关抹平的理由，存储里那些我们不认识的键也一并留着。
+*/
+function normalize(model, stored) {
+	const base = {
+		provider: stored.provider ?? "",
+		model: stored.model ?? "",
+		thinking: stored.thinking ?? "off",
+		search: stored.search === true
+	};
+	if (model === void 0) return base;
+	return {
+		...base,
+		thinking: clampThinkingLevel(model, base.thinking),
+		search: clampSearch(model, base.search)
+	};
+}
+/** The user's model + thinking choice, persisted, always valid for the chosen model. */
+function useModelSelection(options = {}) {
+	const catalog = options.catalog ?? defaultCatalog;
+	const [stored, setStored] = useStoredState(options.key ?? "cadenza-ai:selection", options.initial ?? firstSelection(catalog));
+	const model = catalog.getModel(modelRef({
+		provider: stored.provider ?? "",
+		id: stored.model ?? ""
+	}));
+	const provider = catalog.getProvider(stored.provider ?? "");
+	const selection = useMemo(() => normalize(model, stored), [model, stored]);
+	return {
+		selection,
+		model,
+		provider,
+		setModel: useCallback((ref) => {
+			const { provider: nextProvider, id } = parseModelRef(ref);
+			const next = catalog.getModel(ref);
+			setStored({
+				...stored,
+				provider: nextProvider,
+				model: id,
+				thinking: clampThinkingLevel(next, stored.thinking ?? "off"),
+				search: clampSearch(next, stored.search)
+			});
+		}, [
+			catalog,
+			stored,
+			setStored
+		]),
+		setThinking: useCallback((level) => {
+			setStored({
+				...stored,
+				thinking: clampThinkingLevel(model, level)
+			});
+		}, [
+			model,
+			stored,
+			setStored
+		]),
+		setSearch: useCallback((on) => {
+			setStored({
+				...stored,
+				search: clampSearch(model, on)
+			});
+		}, [
+			model,
+			stored,
+			setStored
+		]),
+		forwardedProps: selection
+	};
+}
+//#endregion
+//#region src/runtime/threads.ts
+function newThreadId() {
+	return `thread-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+}
+function sortThreads(threads) {
+	return [...threads].sort((a, b) => Number(a.archived) - Number(b.archived) || b.updatedAt - a.updatedAt);
+}
+function createThreadIndex(options = {}) {
+	const key = options.key ?? "cadenza-ai:threads";
+	const local = (options.storage ?? "local") === "local" && typeof window !== "undefined";
+	const listeners = /* @__PURE__ */ new Set();
+	const tombstones = /* @__PURE__ */ new Set();
+	let threads = load();
+	let sorted = sortThreads(threads);
+	function load() {
+		if (!local) return [];
+		try {
+			const raw = window.localStorage.getItem(key);
+			return raw === null ? [] : JSON.parse(raw);
+		} catch {
+			return [];
+		}
+	}
+	function commit(next) {
+		threads = next;
+		sorted = sortThreads(next);
+		if (local) try {
+			window.localStorage.setItem(key, JSON.stringify(next));
+		} catch {}
+		listeners.forEach((l) => l());
+	}
+	function get(id) {
+		return threads.find((t) => t.id === id);
+	}
+	function touch(id, patch) {
+		const now = Date.now();
+		const existing = get(id);
+		const next = existing ? {
+			...existing,
+			...patch,
+			updatedAt: patch.updatedAt ?? now
+		} : {
+			id,
+			title: "",
+			createdAt: now,
+			updatedAt: now,
+			messageCount: 0,
+			preview: "",
+			archived: false,
+			...patch
+		};
+		if (!existing && tombstones.has(id)) return next;
+		commit(existing ? threads.map((t) => t.id === id ? next : t) : [...threads, next]);
+		return next;
+	}
+	return {
+		list: () => sorted,
+		get,
+		create: (init) => {
+			const id = init?.id ?? newThreadId();
+			tombstones.delete(id);
+			return touch(id, init ?? {});
+		},
+		touch,
+		rename: (id, title) => {
+			touch(id, { title });
+		},
+		archive: (id, archived) => {
+			touch(id, { archived });
+		},
+		remove: (id) => {
+			tombstones.add(id);
+			commit(threads.filter((t) => t.id !== id));
+		},
+		wasRemoved: (id) => tombstones.has(id),
+		subscribe: (listener) => {
+			listeners.add(listener);
+			const onStorage = (event) => {
+				if (local && event.key === key) {
+					threads = load();
+					sorted = sortThreads(threads);
+					listener();
+				}
+			};
+			if (local) window.addEventListener("storage", onStorage);
+			return () => {
+				listeners.delete(listener);
+				if (local) window.removeEventListener("storage", onStorage);
+			};
+		}
+	};
+}
+const EMPTY = [];
+function useThreadIndex(index) {
+	return useSyncExternalStore(index.subscribe, index.list, () => EMPTY);
+}
+function textOf(message) {
+	return message?.parts.map((p) => p.type === "text" ? p.content : "").join(" ").trim() ?? "";
+}
+/** Title from the first user message; truncated with an ellipsis past `max` characters. */
+function threadTitleFrom(messages, max = 40) {
+	const text = textOf(messages.find((m) => m.role === "user")).replace(/\s+/g, " ");
+	return text.length > max ? `${text.slice(0, max)}…` : text;
+}
+function threadPersistence(index, base, options = {}) {
+	const derive = options.title === void 0 ? threadTitleFrom : options.title;
+	return {
+		getItem: (id) => index.wasRemoved(id) ? null : base.getItem(id),
+		setItem: async (id, state) => {
+			if (index.wasRemoved(id)) return;
+			await base.setItem(id, Array.isArray(state) ? { messages: state } : state);
+			const messages = Array.isArray(state) ? state : state.messages;
+			const last = messages.at(-1);
+			const own = index.get(id)?.title ?? "";
+			index.touch(id, {
+				messageCount: messages.length,
+				preview: textOf(last).slice(0, 200),
+				...own === "" && derive !== false ? { title: derive(messages) } : {}
+			});
+		},
+		removeItem: async (id) => {
+			await base.removeItem(id);
+			index.remove(id);
+		}
+	};
+}
+const DAY = 864e5;
+/** Buckets by local calendar day of `updatedAt`; empty buckets are omitted. */
+function groupThreadsByDay(threads, now = Date.now()) {
+	const today = new Date(now).toDateString();
+	const yesterday = (/* @__PURE__ */ new Date(now - DAY)).toDateString();
+	const buckets = {
+		today: [],
+		yesterday: [],
+		earlier: []
+	};
+	for (const t of threads) {
+		const day = new Date(t.updatedAt).toDateString();
+		buckets[day === today ? "today" : day === yesterday ? "yesterday" : "earlier"].push(t);
+	}
+	return [
+		"today",
+		"yesterday",
+		"earlier"
+	].filter((label) => buckets[label].length > 0).map((label) => ({
+		label,
+		threads: buckets[label]
+	}));
+}
+//#endregion
+//#region src/runtime/usage.ts
+function add(a, b) {
+	return a === void 0 && b === void 0 ? void 0 : (a ?? 0) + (b ?? 0);
+}
+/**
+* Sum the keys both sides actually carry, rather than a hand-written list.
+*
+* Naming the fields dropped every other one: `PromptTokensDetails` also holds
+* `audioTokens` / `imageTokens` / `videoTokens` / `textTokens` /
+* `documentTokens`, and a two-run sum silently threw the modality breakdown
+* away — present on a single run, gone the moment a second one landed.
+*/
+function addDetails(a, b) {
+	if (a === void 0 && b === void 0) return void 0;
+	const left = a;
+	const right = b;
+	const out = {};
+	for (const key of /* @__PURE__ */ new Set([...Object.keys(left ?? {}), ...Object.keys(right ?? {})])) out[key] = add(left?.[key], right?.[key]);
+	return out;
+}
+/** Field-wise sum, including the nested detail breakdowns and the provider's own cost. */
+function addTokenUsage(a, b) {
+	if (!a) return b;
+	const promptTokensDetails = addDetails(a.promptTokensDetails, b.promptTokensDetails);
+	const completionTokensDetails = addDetails(a.completionTokensDetails, b.completionTokensDetails);
+	const cost = add(a.cost, b.cost);
+	return {
+		promptTokens: a.promptTokens + b.promptTokens,
+		completionTokens: a.completionTokens + b.completionTokens,
+		totalTokens: a.totalTokens + b.totalTokens,
+		...cost !== void 0 ? { cost } : {},
+		...promptTokensDetails ? { promptTokensDetails } : {},
+		...completionTokensDetails ? { completionTokensDetails } : {}
+	};
+}
+const ZERO = {
+	promptTokens: 0,
+	completionTokens: 0,
+	totalTokens: 0
+};
+function usageOf(chunk) {
+	const usage = chunk.usage;
+	if (usage === void 0) return void 0;
+	if (Array.isArray(usage)) return fromSpecTokenUsage$1(usage, chunk.metadata?.tanstack?.usage);
+	return usage;
+}
+/**
+* Sums every `RUN_FINISHED` of a run (tool loops finish once per iteration)
+* and books the sum against the assistant message that closes the run.
+*/
+function useUsageTracker() {
+	const pendingRef = useRef(/* @__PURE__ */ new Map());
+	const [state, setState] = useState(() => ({
+		total: ZERO,
+		lastRun: void 0,
+		byMessage: /* @__PURE__ */ new Map()
+	}));
+	const onChunk = useCallback((chunk) => {
+		if (chunk.type !== EventType$1.RUN_FINISHED) return;
+		const usage = usageOf(chunk);
+		if (!usage) return;
+		pendingRef.current.set(chunk.runId, addTokenUsage(pendingRef.current.get(chunk.runId), usage));
+	}, []);
+	const onFinish = useCallback((message) => {
+		const runId = pendingRef.current.keys().next().value;
+		const run = runId === void 0 ? void 0 : pendingRef.current.get(runId);
+		if (runId !== void 0) pendingRef.current.delete(runId);
+		if (!run) return;
+		const booked = run;
+		setState((s) => {
+			const byMessage = new Map(s.byMessage);
+			byMessage.set(message.id, booked);
+			return {
+				total: addTokenUsage(s.total, booked),
+				lastRun: booked,
+				byMessage
+			};
+		});
+	}, []);
+	const reset = useCallback(() => {
+		pendingRef.current.clear();
+		setState({
+			total: ZERO,
+			lastRun: void 0,
+			byMessage: /* @__PURE__ */ new Map()
+		});
+	}, []);
+	return useMemo(() => ({
+		onChunk,
+		onFinish,
+		reset,
+		...state
+	}), [
+		onChunk,
+		onFinish,
+		reset,
+		state
+	]);
+}
+//#endregion
+//#region src/view/approval.tsx
+const ApprovalContext = createContext(void 0);
+if (process.env.NODE_ENV !== "production") ApprovalContext.displayName = "ApprovalContext";
+function useApprovalContext() {
+	const context = use(ApprovalContext);
+	if (context === void 0) throw new Error("cadenza-ai: ApprovalContext is missing. Approval parts must be placed within <ApprovalActions>.");
+	return context;
+}
+/**
+* The approve / deny row under a tool call. Resolves through the interrupt;
+* both buttons disable once `interrupt.status` leaves `pending`. The choice
+* lands on the row as `data-approved` / `data-denied`.
+*/
+function ApprovalActions({ interrupt, children, className }) {
+	const [choice, setChoice] = useState(void 0);
+	const responded = interrupt.status !== "pending";
+	const value = useMemo(() => ({
+		interrupt,
+		responded,
+		choose: setChoice
+	}), [interrupt, responded]);
+	return /* @__PURE__ */ jsx(ApprovalContext, {
+		value,
+		children: /* @__PURE__ */ jsx("div", {
+			role: "group",
+			"data-slot": "approval-actions",
+			"data-approved": dataAttr(choice === true),
+			"data-denied": dataAttr(choice === false),
+			className,
+			children
+		})
+	});
+}
+function ApprovalApprove({ editedArgs, disabled, onClick, ...props }) {
+	const { interrupt, responded, choose } = useApprovalContext();
+	return /* @__PURE__ */ jsx(Button, {
+		"data-slot": "approval-approve",
+		size: "sm",
+		...props,
+		disabled: disabled || responded,
+		onClick: (event) => {
+			onClick?.(event);
+			if (event.defaultPrevented) return;
+			choose(true);
+			interrupt.resolveInterrupt(true, { editedArgs });
+		}
+	});
+}
+function ApprovalDeny({ disabled, onClick, ...props }) {
+	const { interrupt, responded, choose } = useApprovalContext();
+	return /* @__PURE__ */ jsx(Button, {
+		"data-slot": "approval-deny",
+		size: "sm",
+		variant: "outline",
+		...props,
+		disabled: disabled || responded,
+		onClick: (event) => {
+			onClick?.(event);
+			if (event.defaultPrevented) return;
+			choose(false);
+			interrupt.resolveInterrupt(false);
+		}
+	});
+}
+//#endregion
+//#region src/view/byok-key-dialog.tsx
+const DEFAULT_BYOK_KEY_DIALOG_LABELS = {
+	title: "API keys",
+	description: "Keys stay in this browser and are sent per request in a header.",
+	save: "Save",
+	clear: "Clear",
+	confirm: "Confirm",
+	unlock: "Unlock",
+	close: "Close",
+	serverKey: "Server key"
+};
+const ByokKeyDialogContext = createContext(null);
+if (process.env.NODE_ENV !== "production") ByokKeyDialogContext.displayName = "ByokKeyDialogContext";
+function useByokKeyDialog() {
+	const context = use(ByokKeyDialogContext);
+	if (context === null) throw new Error("cadenza-ai: ByokKeyDialogContext is missing. ByokKeyDialog parts must be placed within <ByokKeyDialog>.");
+	return context;
+}
+/**
+* The key-entry dialog for a `ByokClient`. Subscribes to the client and opens
+* itself whenever it raises a prompt (`prepare()` blocked on a missing key, or
+* the server answered `byok_missing`), focusing that provider's input.
+*/
+function ByokKeyDialog({ byok, catalog, coverage, open: openProp, defaultOpen, onOpenChange, labels: labelsProp, children }) {
+	const snapshot = useByok(byok);
+	const [open, setOpen] = useControllableState({
+		value: openProp,
+		defaultValue: defaultOpen,
+		fallback: false
+	});
+	const labels = useMemo(() => ({
+		...DEFAULT_BYOK_KEY_DIALOG_LABELS,
+		...labelsProp
+	}), [labelsProp]);
+	const change = (next, details) => {
+		onOpenChange?.(next, details);
+		if (!details.isCanceled) setOpen(next);
+	};
+	const openForPrompt = useEffectEvent(() => change(true, createChangeEventDetails("none")));
+	useEffect(() => {
+		if (snapshot.prompt) openForPrompt();
+	}, [snapshot.prompt]);
+	const promptRef = useRef(null);
+	useEffect(() => {
+		if (!open || snapshot.prompt === null) return;
+		const timers = [0, 250].map((delay) => setTimeout(() => {
+			if (document.activeElement !== promptRef.current) promptRef.current?.focus();
+		}, delay));
+		return () => timers.forEach(clearTimeout);
+	}, [open, snapshot.prompt]);
+	const formId = useId();
+	const [epoch, setEpoch] = useState(0);
+	const context = useMemo(() => ({
+		byok,
+		catalog,
+		coverage,
+		labels,
+		snapshot,
+		promptRef
+	}), [
+		byok,
+		catalog,
+		coverage,
+		labels,
+		snapshot
+	]);
+	const confirm = async (event) => {
+		event.preventDefault();
+		const entries = Array.from(new FormData(event.currentTarget).entries());
+		try {
+			for (const [id, value] of entries) if (typeof value === "string" && value.trim() !== "") await byok.update(id, value.trim());
+		} catch {
+			return;
+		}
+		setEpoch((e) => e + 1);
+		change(false, createChangeEventDetails("confirm", event.nativeEvent));
+	};
+	return /* @__PURE__ */ jsx(ByokKeyDialogContext, {
+		value: context,
+		children: /* @__PURE__ */ jsx(Dialog, {
+			open,
+			onOpenChange: change,
+			children: /* @__PURE__ */ jsxs(DialogPopup, {
+				"data-slot": "byok-key-dialog",
+				initialFocus: () => promptRef.current ?? true,
+				children: [
+					/* @__PURE__ */ jsxs(DialogHeader, { children: [
+						/* @__PURE__ */ jsx(DialogTitle, { children: labels.title }),
+						/* @__PURE__ */ jsx(DialogDescription, { children: labels.description }),
+						/* @__PURE__ */ jsxs("p", {
+							"data-slot": "byok-key-dialog-storage",
+							"data-persistent": dataAttr(byok.storage.persistent),
+							className: "text-xs text-muted-foreground",
+							children: [byok.storage.label, byok.storage.warning !== void 0 && ` — ${byok.storage.warning}`]
+						})
+					] }),
+					/* @__PURE__ */ jsx(DialogBody, { children: /* @__PURE__ */ jsx("form", {
+						id: formId,
+						className: "flex flex-col gap-4",
+						onSubmit: (event) => void confirm(event),
+						children: children ?? catalog.providers.map((p) => /* @__PURE__ */ jsx(ByokKeyDialogProvider, { provider: p.id }, p.id))
+					}, epoch) }),
+					/* @__PURE__ */ jsxs(DialogFooter, { children: [
+						snapshot.locked && /* @__PURE__ */ jsx(Button, {
+							onClick: (event) => {
+								const native = event.nativeEvent;
+								byok.unlock().then(() => change(false, createChangeEventDetails("confirm", native)), () => {});
+							},
+							children: labels.unlock
+						}),
+						/* @__PURE__ */ jsx(DialogClose, {
+							render: /* @__PURE__ */ jsx(Button, { variant: "outline" }),
+							children: labels.close
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							form: formId,
+							type: "submit",
+							children: labels.confirm
+						})
+					] })
+				]
+			})
+		})
+	});
+}
+/**
+* One provider's row: label, password input, save / clear icon buttons.
+* `data-key-status` mirrors the client's `empty | set | locked | error`;
+* `data-server-key` marks a provider the server can key on its own;
+* `data-prompted` is on while the client is asking for this provider's key.
+*/
+function ByokKeyDialogProvider({ provider: id, children, className }) {
+	const { byok, catalog, coverage, labels, snapshot, promptRef } = useByokKeyDialog();
+	const inputId = useId();
+	const [draft, setDraft] = useState("");
+	const provider = catalog.getProvider(id);
+	if (provider === void 0) throw new Error(`cadenza-ai: ByokKeyDialogProvider: unknown provider "${id}".`);
+	const status = snapshot.status[id] ?? { state: "empty" };
+	const serverKey = !provider.keyRequired || coverage?.[id] === true;
+	const key = draft.trim();
+	const prompted = snapshot.prompt?.provider === id;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "byok-key-dialog-provider",
+		"data-provider": id,
+		"data-key-status": status.state,
+		"data-server-key": dataAttr(serverKey),
+		"data-prompted": dataAttr(prompted),
+		className: cn("flex items-end gap-2", className),
+		children: [
+			/* @__PURE__ */ jsxs(Field, {
+				className: "flex-1",
+				children: [
+					/* @__PURE__ */ jsxs(FieldLabel, {
+						htmlFor: inputId,
+						children: [provider.label, serverKey && /* @__PURE__ */ jsx(IconServer, {
+							"aria-label": labels.serverKey,
+							className: "text-muted-foreground block-4 inline-4"
+						})]
+					}),
+					/* @__PURE__ */ jsx(Input, {
+						id: inputId,
+						ref: prompted ? promptRef : void 0,
+						name: id,
+						type: "password",
+						autoComplete: "off",
+						onKeyDown: (event) => {
+							if (event.key === "Enter" && !event.nativeEvent.isComposing) {
+								event.preventDefault();
+								event.currentTarget.form?.requestSubmit();
+							}
+						},
+						placeholder: status.state === "empty" ? void 0 : status.masked,
+						value: draft,
+						onValueChange: setDraft
+					}),
+					status.state === "error" && /* @__PURE__ */ jsx(FieldError, { children: status.message })
+				]
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				variant: "outline",
+				size: "icon-sm",
+				"aria-label": labels.save,
+				disabled: key === "",
+				onClick: () => void byok.update(id, key).then(() => setDraft(""), () => {}),
+				children: /* @__PURE__ */ jsx(IconCheck, {})
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "icon-sm",
+				"aria-label": labels.clear,
+				disabled: status.state === "empty",
+				onClick: () => void byok.clear(id).catch(() => {}),
+				children: /* @__PURE__ */ jsx(IconX, {})
+			}),
+			children
+		]
+	});
+}
+//#endregion
+//#region src/view/composer.tsx
+const ComposerContext = createContext(null);
+if (process.env.NODE_ENV !== "production") ComposerContext.displayName = "ComposerContext";
+function useComposer() {
+	const context = use(ComposerContext);
+	if (context === null) throw new Error("cadenza-ai: ComposerContext is missing. Composer parts must be placed within <Composer>.");
+	return context;
+}
+function isBusy(status) {
+	return status === "submitted" || status === "streaming";
+}
+/**
+* The input area: a `<form>` around an `InputGroup`, so `ComposerTextarea` and
+* `ComposerToolbar` stay direct children of the group (its auto-height and
+* block-end addon rules key off `>` combinators).
+*/
+function Composer({ allowEmpty = false, children, className, defaultValue, disabled = false, editing = false, onDragLeave, onDragOver, onDrop, onEditCancel, onFiles, onPaste, onStop, onValueChange, onValueCommitted, status, value: valueProp, ...props }) {
+	const [value, setValueState] = useControllableState({
+		value: valueProp,
+		defaultValue,
+		fallback: ""
+	});
+	const [dragging, setDragging] = useState(false);
+	const latestRef = useRef({
+		value,
+		disabled,
+		editing,
+		status,
+		allowEmpty,
+		onValueChange,
+		onValueCommitted,
+		onStop,
+		onEditCancel
+	});
+	latestRef.current = {
+		value,
+		disabled,
+		editing,
+		status,
+		allowEmpty,
+		onValueChange,
+		onValueCommitted,
+		onStop,
+		onEditCancel
+	};
+	const committable = allowEmpty || value.trim() !== "";
+	const context = useMemo(() => {
+		const setValue = (next, details = createChangeEventDetails("none")) => {
+			latestRef.current.onValueChange?.(next, details);
+			if (details.isCanceled) return;
+			setValueState(next);
+		};
+		return {
+			value,
+			setValue,
+			status,
+			editing,
+			disabled,
+			committable,
+			submit: (details) => {
+				const text = latestRef.current.value;
+				if (latestRef.current.disabled || !latestRef.current.allowEmpty && text.trim() === "") return;
+				latestRef.current.onValueCommitted(text, details);
+				setValue("");
+			},
+			stop: (details) => {
+				if (isBusy(latestRef.current.status)) latestRef.current.onStop?.(details);
+			},
+			cancelEdit: (details) => latestRef.current.onEditCancel?.(details)
+		};
+	}, [
+		value,
+		status,
+		editing,
+		disabled,
+		committable,
+		setValueState
+	]);
+	return /* @__PURE__ */ jsx(ComposerContext, {
+		value: context,
+		children: /* @__PURE__ */ jsx("form", {
+			className: cn("flex flex-col gap-2", className),
+			"data-slot": "composer",
+			"data-submitted": dataAttr(status === "submitted"),
+			"data-streaming": dataAttr(status === "streaming"),
+			"data-error": dataAttr(status === "error"),
+			"data-dragging": dataAttr(dragging),
+			"data-editing": dataAttr(editing),
+			...props,
+			onSubmit: (event) => {
+				event.preventDefault();
+				context.submit(createGenericEventDetails("none", event.nativeEvent));
+			},
+			onDragOver: (event) => {
+				onDragOver?.(event);
+				if (event.defaultPrevented || !onFiles) return;
+				event.preventDefault();
+				setDragging(true);
+			},
+			onDragLeave: (event) => {
+				onDragLeave?.(event);
+				if (!event.currentTarget.contains(event.relatedTarget)) setDragging(false);
+			},
+			onDrop: (event) => {
+				onDrop?.(event);
+				setDragging(false);
+				if (event.defaultPrevented || !onFiles) return;
+				const files = Array.from(event.dataTransfer.files);
+				if (files.length === 0) return;
+				event.preventDefault();
+				onFiles(files, createGenericEventDetails("drag", event.nativeEvent));
+			},
+			onPaste: (event) => {
+				onPaste?.(event);
+				if (event.defaultPrevented || !onFiles) return;
+				const files = Array.from(event.clipboardData.files);
+				if (files.length === 0) return;
+				event.preventDefault();
+				onFiles(files, createGenericEventDetails("input-paste", event.nativeEvent));
+			},
+			children: /* @__PURE__ */ jsx(InputGroup, { children })
+		})
+	});
+}
+/** The draft text. Enter commits, Shift+Enter breaks a line, IME composition is left alone, Escape cancels or stops. */
+function ComposerTextarea({ className, onChange, onKeyDown, ...props }) {
+	const { value, setValue, editing, disabled, submit, stop, cancelEdit } = useComposer();
+	return /* @__PURE__ */ jsx(InputGroupTextarea, {
+		className: cn("field-sizing-content max-block-48", className),
+		"data-slot": "composer-textarea",
+		disabled,
+		rows: 1,
+		...props,
+		value,
+		onChange: (event) => {
+			onChange?.(event);
+			if (!event.defaultPrevented) setValue(event.target.value, createChangeEventDetails("input-change", event.nativeEvent));
+		},
+		onKeyDown: (event) => {
+			onKeyDown?.(event);
+			if (event.defaultPrevented || event.nativeEvent.isComposing || event.key === "Process") return;
+			if (event.key === "Enter" && !event.shiftKey) {
+				event.preventDefault();
+				submit(createGenericEventDetails("keyboard", event.nativeEvent));
+			} else if (event.key === "Escape") {
+				if (editing) cancelEdit(createGenericEventDetails("escape-key", event.nativeEvent));
+				else stop(createGenericEventDetails("escape-key", event.nativeEvent));
+			}
+		}
+	});
+}
+/** The row under the textarea: attach, dictate, pickers, submit. */
+function ComposerToolbar(props) {
+	return /* @__PURE__ */ jsx(InputGroupAddon, {
+		align: "block-end",
+		"data-slot": "composer-toolbar",
+		...props
+	});
+}
+/** Send while idle, stop while busy. Disabled on an empty draft. */
+function ComposerSubmit({ children, ...props }) {
+	const { committable, status, disabled, stop } = useComposer();
+	if (isBusy(status)) return /* @__PURE__ */ jsx(Button, {
+		"aria-label": "Stop",
+		"data-slot": "composer-submit",
+		size: "icon-sm",
+		type: "button",
+		...props,
+		onClick: (event) => {
+			props.onClick?.(event);
+			if (!event.defaultPrevented) stop(createGenericEventDetails("none", event.nativeEvent));
+		},
+		children: children ?? /* @__PURE__ */ jsx(IconPlayerStop, {})
+	});
+	return /* @__PURE__ */ jsx(Button, {
+		"aria-label": "Send",
+		"data-slot": "composer-submit",
+		disabled: disabled || !committable,
+		size: "icon-sm",
+		type: "submit",
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(IconArrowUp, {})
+	});
+}
+/** The pending-attachments strip; `state` maps straight onto `Attachment`'s. Renders nothing while empty. */
+function ComposerAttachments({ items, onRemove, className }) {
+	if (items.length === 0) return null;
+	return /* @__PURE__ */ jsx(AttachmentGroup, {
+		className,
+		"data-slot": "composer-attachments",
+		children: items.map((item) => /* @__PURE__ */ jsxs(Attachment, {
+			size: "sm",
+			state: item.state,
+			children: [
+				/* @__PURE__ */ jsx(AttachmentMedia, {
+					variant: item.previewUrl === void 0 ? "icon" : "image",
+					children: item.previewUrl === void 0 ? /* @__PURE__ */ jsx(IconPaperclip, {}) : /* @__PURE__ */ jsx("img", {
+						alt: "",
+						src: item.previewUrl
+					})
+				}),
+				/* @__PURE__ */ jsx(AttachmentContent, { children: /* @__PURE__ */ jsx(AttachmentTitle, { children: item.name }) }),
+				/* @__PURE__ */ jsx(AttachmentActions, { children: /* @__PURE__ */ jsx(AttachmentAction, {
+					"aria-label": "Remove",
+					onClick: (event) => onRemove(item.id, createGenericEventDetails("none", event.nativeEvent)),
+					children: /* @__PURE__ */ jsx(IconX, {})
+				}) })
+			]
+		}, item.id))
+	});
+}
+/** Opens the file picker; the chosen files go to `onFiles`. */
+function ComposerAttach({ accept, children, multiple = true, onClick, onFiles, ...props }) {
+	const inputRef = useRef(null);
+	const { disabled } = useComposer();
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("input", {
+		accept,
+		hidden: true,
+		multiple,
+		ref: inputRef,
+		tabIndex: -1,
+		type: "file",
+		onChange: (event) => {
+			const files = Array.from(event.target.files ?? []);
+			event.target.value = "";
+			if (files.length > 0) onFiles(files, createGenericEventDetails("input-change", event.nativeEvent));
+		}
+	}), /* @__PURE__ */ jsx(InputGroupButton, {
+		"aria-label": "Attach",
+		"data-slot": "composer-attach",
+		disabled,
+		size: "icon-xs",
+		...props,
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented) inputRef.current?.click();
+		},
+		children: children ?? /* @__PURE__ */ jsx(IconPaperclip, {})
+	})] });
+}
+const noSubscribe = () => () => {};
+/** Press to record, press again to stop; the finished recording's audio part goes to `onRecording`. */
+function ComposerDictate({ children, onClick, onRecording, ...props }) {
+	const { disabled } = useComposer();
+	const recorder = useAudioRecorder();
+	const supported = useSyncExternalStore(noSubscribe, () => recorder.isSupported, () => false);
+	return /* @__PURE__ */ jsx(InputGroupButton, {
+		"aria-label": "Dictate",
+		"aria-pressed": recorder.isRecording,
+		"data-recording": dataAttr(recorder.isRecording),
+		"data-slot": "composer-dictate",
+		disabled: disabled || !supported,
+		size: "icon-xs",
+		...props,
+		onClick: (event) => {
+			onClick?.(event);
+			if (event.defaultPrevented) return;
+			if (recorder.isRecording) recorder.stop().then((recording) => onRecording(recording.part, createGenericEventDetails("imperative-action", event.nativeEvent)), () => {});
+			else recorder.start().catch(() => {});
+		},
+		children: children ?? /* @__PURE__ */ jsx(IconMicrophone, {})
+	});
+}
+//#endregion
+//#region src/view/context-usage.tsx
+const DEFAULT_CONTEXT_USAGE_LABELS = {
+	prompt: "Prompt",
+	completion: "Completion",
+	cached: "Cached",
+	total: "Total",
+	cost: "Cost",
+	cacheHit: "Cache hit",
+	outputRatio: "Out per in",
+	reasoningShare: "Reasoning",
+	cacheSaved: "Saved by cache"
+};
+const USD$1 = new Intl.NumberFormat("en-US", {
+	style: "currency",
+	currency: "USD",
+	maximumFractionDigits: 4
+});
+const PERCENT$1 = new Intl.NumberFormat("en-US", {
+	style: "percent",
+	maximumFractionDigits: 1
+});
+/**
+* How full the context is (spec O1): a bar for `promptTokens / contextWindow`
+* beside the number, with the token breakdown and `estimateCost` in a tooltip.
+* The whole thing is the tooltip's trigger; `data-ratio` (two decimals) is
+* the bar's value for styling from outside.
+*/
+function ContextUsage({ model, usage, labels: labelsProp, children, className }) {
+	const labels = useMemo(() => ({
+		...DEFAULT_CONTEXT_USAGE_LABELS,
+		...labelsProp
+	}), [labelsProp]);
+	const id = useId();
+	const window = model?.contextWindow;
+	const ratio = window !== void 0 && window > 0 ? usage.promptTokens / window : void 0;
+	const cached = usage.promptTokensDetails?.cachedTokens;
+	const cost = model && estimateCost(model, usage);
+	const metrics = useMemo(() => usageMetrics(usage, model), [usage, model]);
+	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsxs(TooltipTrigger, {
+		"data-slot": "context-usage",
+		"data-ratio": ratio?.toFixed(2),
+		className: cn(`
+          inline-flex items-center gap-2 text-xs text-muted-foreground
+          tabular-nums
+        `, className),
+		children: [ratio !== void 0 && /* @__PURE__ */ jsx(Progress, {
+			value: Math.min(ratio, 1) * 100,
+			"aria-labelledby": id,
+			className: "inline-16"
+		}), /* @__PURE__ */ jsxs("span", {
+			id,
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					"data-slot": "context-usage-tokens",
+					children: usage.promptTokens
+				}),
+				children !== void 0 && " ",
+				children
+			]
+		})]
+	}), /* @__PURE__ */ jsx(TooltipPopup, { children: /* @__PURE__ */ jsxs("dl", {
+		"data-slot": "context-usage-details",
+		className: "grid grid-cols-[auto_auto] gap-x-3 tabular-nums",
+		children: [
+			/* @__PURE__ */ jsx("dt", { children: labels.prompt }),
+			/* @__PURE__ */ jsx("dd", {
+				className: "text-end",
+				children: usage.promptTokens
+			}),
+			/* @__PURE__ */ jsx("dt", { children: labels.completion }),
+			/* @__PURE__ */ jsx("dd", {
+				className: "text-end",
+				children: usage.completionTokens
+			}),
+			cached !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("dt", { children: labels.cached }), /* @__PURE__ */ jsx("dd", {
+				className: "text-end",
+				children: cached
+			})] }),
+			/* @__PURE__ */ jsx("dt", { children: labels.total }),
+			/* @__PURE__ */ jsx("dd", {
+				className: "text-end",
+				children: usage.totalTokens
+			}),
+			metrics.cacheHitRate !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("dt", { children: labels.cacheHit }), /* @__PURE__ */ jsx("dd", {
+				className: "text-end",
+				children: PERCENT$1.format(metrics.cacheHitRate)
+			})] }),
+			metrics.outputRatio !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("dt", { children: labels.outputRatio }), /* @__PURE__ */ jsx("dd", {
+				className: "text-end",
+				children: `${metrics.outputRatio.toFixed(2)}×`
+			})] }),
+			metrics.reasoningShare !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("dt", { children: labels.reasoningShare }), /* @__PURE__ */ jsx("dd", {
+				className: "text-end",
+				children: PERCENT$1.format(metrics.reasoningShare)
+			})] }),
+			cost !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("dt", { children: labels.cost }), /* @__PURE__ */ jsx("dd", {
+				className: "text-end",
+				children: USD$1.format(cost)
+			})] }),
+			metrics.cacheSavings !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("dt", { children: labels.cacheSaved }), /* @__PURE__ */ jsx("dd", {
+				className: "text-end",
+				children: USD$1.format(metrics.cacheSavings)
+			})] })
+		]
+	}) })] });
+}
+//#endregion
+//#region src/view/markdown.tsx
+const PLUGINS = {
+	code,
+	math,
+	cjk
+};
+const SHIKI_THEME = ["github-light-default", "vesper"];
+const CONTROLS = {
+	code: {
+		copy: true,
+		download: false
+	},
+	table: {
+		copy: true,
+		download: false,
+		fullscreen: false
+	}
+};
+function Anchor({ node: _node, ...props }) {
+	return /* @__PURE__ */ jsx("a", {
+		...props,
+		target: "_blank",
+		rel: "noreferrer"
+	});
+}
+const COMPONENTS = { a: Anchor };
+/** Product-grade Markdown: streamdown with code / math / CJK plugins and safe links. */
+function Markdown({ content, streaming = false, translations, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "markdown",
+		"data-streaming": dataAttr(streaming),
+		className: "[&>div]:flex [&>div]:flex-col [&>div]:gap-4 [&>div]:space-y-0",
+		children: /* @__PURE__ */ jsx(Streamdown, {
+			mode: streaming ? "streaming" : "static",
+			isAnimating: streaming,
+			parseIncompleteMarkdown: true,
+			plugins: PLUGINS,
+			shikiTheme: SHIKI_THEME,
+			controls: CONTROLS,
+			dir: "auto",
+			translations,
+			components: COMPONENTS,
+			className,
+			children: content
+		})
+	});
+}
+//#endregion
+//#region src/view/media-part.tsx
+function nameOf(metadata) {
+	const name = metadata?.name;
+	return typeof name === "string" ? name : void 0;
+}
+/** A message's media part rendered by type: image card, native audio / video, document card. */
+function MediaPart({ part, className }) {
+	const { source } = part;
+	const src = source.type === "data" ? `data:${source.mimeType};base64,${source.value}` : source.value;
+	const name = nameOf(part.metadata);
+	switch (part.type) {
+		case "image": return /* @__PURE__ */ jsx(Attachment, {
+			"data-slot": "media-part",
+			"data-type": "image",
+			size: "sm",
+			orientation: "vertical",
+			className,
+			children: /* @__PURE__ */ jsx(AttachmentMedia, {
+				variant: "image",
+				children: /* @__PURE__ */ jsx("img", {
+					src,
+					alt: name ?? ""
+				})
+			})
+		});
+		case "audio": return /* @__PURE__ */ jsx("audio", {
+			"data-slot": "media-part",
+			"data-type": "audio",
+			controls: true,
+			src,
+			className
+		});
+		case "video": return /* @__PURE__ */ jsx("video", {
+			"data-slot": "media-part",
+			"data-type": "video",
+			controls: true,
+			src,
+			className
+		});
+		case "document": return /* @__PURE__ */ jsxs(Attachment, {
+			"data-slot": "media-part",
+			"data-type": "document",
+			size: "sm",
+			className,
+			children: [/* @__PURE__ */ jsx(AttachmentMedia, { children: /* @__PURE__ */ jsx(IconFileText, {}) }), /* @__PURE__ */ jsx(AttachmentContent, { children: /* @__PURE__ */ jsx(AttachmentTitle, { children: name ?? source.mimeType?.split("/")[1] ?? source.value }) })]
+		});
+	}
+}
+//#endregion
+//#region src/view/model-picker.tsx
+function formatContext(tokens) {
+	return tokens >= 1e6 ? `${Math.round(tokens / 1e5) / 10}M` : `${Math.round(tokens / 1e3)}k`;
+}
+/** A searchable, provider-grouped model list; the value is the model ref. */
+function ModelPicker({ byok, catalog, className, defaultValue, disabledProviders, onValueChange, value }) {
+	const groups = useMemo(() => catalog.providers.map((provider) => ({
+		value: provider.id,
+		items: provider.models.map(modelRef)
+	})), [catalog]);
+	const haystack = useMemo(() => new Map(catalog.models.map((model) => {
+		const provider = catalog.getProvider(model.provider);
+		return [modelRef(model), `${model.name} ${model.id} ${provider?.label ?? ""} ${model.provider}`.toLowerCase()];
+	})), [catalog]);
+	return /* @__PURE__ */ jsxs(Combobox, {
+		defaultValue,
+		filter: (ref, query) => haystack.get(ref)?.includes(query.trim().toLowerCase()) === true,
+		items: groups,
+		value,
+		onValueChange: (ref, details) => {
+			if (ref !== null) onValueChange(ref, details);
+		},
+		children: [/* @__PURE__ */ jsx(ComboboxTrigger, {
+			className,
+			"data-slot": "model-picker",
+			render: /* @__PURE__ */ jsx(Button, {
+				size: "sm",
+				variant: "outline"
+			}),
+			children: /* @__PURE__ */ jsx(ComboboxValue, { children: (ref) => ref === null ? null : catalog.getModel(ref)?.name ?? ref })
+		}), /* @__PURE__ */ jsxs(ComboboxPopup, {
+			className: "inline-80",
+			children: [
+				/* @__PURE__ */ jsx(ComboboxInput, {
+					"aria-label": "Search models",
+					clearable: false,
+					trigger: false
+				}),
+				/* @__PURE__ */ jsx(ComboboxEmpty, {}),
+				/* @__PURE__ */ jsx(ComboboxList, { children: (group) => {
+					const provider = catalog.getProvider(group.value);
+					const keyMissing = provider?.keyRequired === true && byok?.status[group.value]?.state === "empty";
+					return /* @__PURE__ */ jsxs(ComboboxGroup, {
+						items: group.items,
+						children: [/* @__PURE__ */ jsxs(ComboboxGroupLabel, {
+							className: "flex items-center gap-1",
+							"data-key-missing": dataAttr(keyMissing),
+							children: [provider?.label ?? group.value, keyMissing && /* @__PURE__ */ jsx(IconKey, {
+								"aria-label": "Key missing",
+								className: "block-3.5 inline-3.5"
+							})]
+						}), /* @__PURE__ */ jsx(ComboboxCollection, { children: (ref) => {
+							const model = catalog.getModel(ref);
+							return /* @__PURE__ */ jsxs(ComboboxItem, {
+								disabled: disabledProviders?.includes(group.value),
+								value: ref,
+								children: [
+									/* @__PURE__ */ jsx("span", {
+										className: "flex-1 truncate",
+										children: model?.name ?? ref
+									}),
+									model?.reasoning === true && /* @__PURE__ */ jsx(IconBrain, {
+										"aria-label": "Reasoning",
+										className: "text-muted-foreground"
+									}),
+									model?.input.includes("image") === true && /* @__PURE__ */ jsx(IconPhoto, {
+										"aria-label": "Vision",
+										className: "text-muted-foreground"
+									}),
+									model?.contextWindow !== void 0 && /* @__PURE__ */ jsx("span", {
+										className: "\n                            text-xs text-muted-foreground tabular-nums\n                          ",
+										children: formatContext(model.contextWindow)
+									})
+								]
+							}, ref);
+						} })]
+					}, group.value);
+				} })
+			]
+		})]
+	});
+}
+/** The model's supported thinking levels; renders nothing when there is no choice to make. */
+function ThinkingLevelPicker({ className, defaultValue, model, onValueChange, value }) {
+	const levels = supportedThinkingLevels(model);
+	if (levels.length <= 1) return null;
+	return /* @__PURE__ */ jsxs(Select, {
+		clearable: false,
+		defaultValue,
+		value,
+		onValueChange: (level, details) => {
+			if (level !== null) onValueChange(level, details);
+		},
+		children: [/* @__PURE__ */ jsx(SelectTrigger, {
+			"aria-label": "Thinking level",
+			className,
+			"data-slot": "thinking-level-picker",
+			size: "sm",
+			children: /* @__PURE__ */ jsx(SelectValue, {})
+		}), /* @__PURE__ */ jsx(SelectPopup, { children: levels.map((level) => /* @__PURE__ */ jsx(SelectItem, {
+			value: level,
+			children: level
+		}, level)) })]
+	});
+}
+/**
+* The one-press deep-thinking switch, DeepSeek style: a pill that lights up
+* while thinking is on. Renders nothing for a model without reasoning; a model
+* that cannot switch thinking off (no `'off'` level) shows it pressed and
+* disabled. `data-thinking` mirrors the on state.
+*/
+function ThinkingToggle({ children, className, defaultValue, model, onLevel = "high", onValueChange, value }) {
+	const levels = supportedThinkingLevels(model);
+	const [level, setLevel] = useControllableState({
+		value,
+		defaultValue,
+		fallback: "off"
+	});
+	if (levels.length <= 1) return null;
+	const canOff = levels.includes("off");
+	const on = level !== "off";
+	return /* @__PURE__ */ jsxs(Toggle, {
+		"data-slot": "thinking-toggle",
+		"data-thinking": dataAttr(on),
+		pressed: on,
+		disabled: !canOff,
+		size: "sm",
+		variant: "outline",
+		className: cn(`
+        gap-1.5 rounded-full
+        data-pressed:border-primary/40 data-pressed:bg-primary/10
+        data-pressed:text-primary
+        data-pressed:hover:bg-primary/15
+      `, className),
+		onPressedChange: (pressed, details) => {
+			const clamped = clampThinkingLevel(model, onLevel);
+			const next = pressed ? clamped === "off" ? levels[levels.length - 1] : clamped : "off";
+			setLevel(next);
+			onValueChange(next, details);
+		},
+		children: [/* @__PURE__ */ jsx(IconBrain, { "aria-hidden": true }), children]
+	});
+}
+/**
+* The one-press web-search switch, the same pill as `ThinkingToggle`. Renders
+* nothing for a model without `search`, so it appears and disappears with the
+* model the way the thinking controls do. `data-search` mirrors the on state.
+*
+* The search itself runs on the provider's side; the caller's job is to put the
+* answer into `forwardedProps` so the server can hand that provider its
+* built-in tool (`createChatHandler`'s function form of `tools`).
+*/
+function SearchToggle({ children, className, defaultValue, model, onValueChange, value }) {
+	const [on, setOn] = useControllableState({
+		value,
+		defaultValue,
+		fallback: false
+	});
+	if (model?.search !== true) return null;
+	return /* @__PURE__ */ jsxs(Toggle, {
+		"data-slot": "search-toggle",
+		"data-search": dataAttr(on),
+		pressed: on,
+		size: "sm",
+		variant: "outline",
+		className: cn(`
+        gap-1.5 rounded-full
+        data-pressed:border-primary/40 data-pressed:bg-primary/10
+        data-pressed:text-primary
+        data-pressed:hover:bg-primary/15
+      `, className),
+		onPressedChange: (next, details) => {
+			setOn(next);
+			onValueChange(next, details);
+		},
+		children: [/* @__PURE__ */ jsx(IconWorld, { "aria-hidden": true }), children]
+	});
+}
+//#endregion
+//#region src/view/queue.tsx
+function queuedText(message) {
+	if (typeof message.content === "string") return message.content;
+	const { content } = message.content;
+	if (typeof content === "string") return content;
+	return content.map((part) => part.type === "text" ? part.content : `[${part.type}]`).join(" ");
+}
+/** Messages waiting behind the current turn, each with a cancel. */
+function QueueList({ children, className, onCancel, queue }) {
+	return /* @__PURE__ */ jsxs(ItemGroup, {
+		className,
+		"data-slot": "queue-list",
+		children: [queue.map((message) => /* @__PURE__ */ jsxs(Item, {
+			"data-slot": "queue-list-item",
+			size: "xs",
+			children: [/* @__PURE__ */ jsx(ItemContent, { children: /* @__PURE__ */ jsx(ItemTitle, { children: queuedText(message) }) }), /* @__PURE__ */ jsx(ItemActions, { children: /* @__PURE__ */ jsx(Button, {
+				"aria-label": "Cancel",
+				size: "icon-xs",
+				variant: "ghost",
+				onClick: (event) => onCancel(message.id, createGenericEventDetails("none", event.nativeEvent)),
+				children: /* @__PURE__ */ jsx(IconX, {})
+			}) })]
+		}, message.id)), children]
+	});
+}
+//#endregion
+//#region src/view/reasoning.tsx
+function elapsedSeconds(complete, startedAt) {
+	return complete ? Math.max(1, Math.round((Date.now() - startedAt) / 1e3)) : void 0;
+}
+/**
+* A thinking block: open while streaming (shimmering trigger), folds itself
+* once when `complete` flips — unless the user has already toggled it by hand.
+*/
+function Reasoning({ content, complete, startedAt: startedAtProp, open: openProp, defaultOpen, onOpenChange, children, className }) {
+	const [open, setOpenState] = useControllableState({
+		value: openProp,
+		defaultValue: defaultOpen,
+		fallback: !complete
+	});
+	const manualRef = useRef(false);
+	const completeRef = useRef(complete);
+	const [startedAt] = useState(() => startedAtProp ?? Date.now());
+	const [seconds, setSeconds] = useState(() => elapsedSeconds(complete, startedAt));
+	const setOpen = (next, details) => {
+		onOpenChange?.(next, details);
+		if (details.isCanceled) return;
+		setOpenState(next);
+	};
+	const onComplete = useEffectEvent(() => {
+		setSeconds(elapsedSeconds(true, startedAt));
+		if (!manualRef.current) setOpen(false, createChangeEventDetails("none"));
+	});
+	useEffect(() => {
+		const was = completeRef.current;
+		completeRef.current = complete;
+		if (complete && !was) onComplete();
+	}, [complete]);
+	return /* @__PURE__ */ jsxs(Collapsible, {
+		"data-slot": "reasoning",
+		"data-complete": dataAttr(complete),
+		"data-open": dataAttr(open),
+		open,
+		onOpenChange: (next, details) => {
+			manualRef.current = true;
+			setOpen(next, details);
+		},
+		className: cn("flex flex-col", className),
+		children: [/* @__PURE__ */ jsx(CollapsibleTrigger, {
+			"data-slot": "reasoning-trigger",
+			render: /* @__PURE__ */ jsx(Marker, { render: /* @__PURE__ */ jsx("button", { type: "button" }) }),
+			children: /* @__PURE__ */ jsxs(MarkerContent, {
+				className: complete ? void 0 : "shimmer",
+				children: [children, seconds !== void 0 && /* @__PURE__ */ jsxs("span", {
+					"data-slot": "reasoning-duration",
+					children: [seconds, "s"]
+				})]
+			})
+		}), /* @__PURE__ */ jsx(CollapsiblePanel, {
+			keepMounted: true,
+			children: /* @__PURE__ */ jsx("div", {
+				className: "pbs-2",
+				children: /* @__PURE__ */ jsx(Markdown, {
+					content,
+					streaming: !complete,
+					className: "text-sm text-muted-foreground"
+				})
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/view/sources.tsx
+/** The links a provider-executed search returned (spec T12), folded behind a trigger. */
+function Sources({ sources, children, open: openProp, defaultOpen, onOpenChange, className }) {
+	const [open, setOpen] = useControllableState({
+		value: openProp,
+		defaultValue: defaultOpen,
+		fallback: false
+	});
+	return /* @__PURE__ */ jsxs(Collapsible, {
+		"data-slot": "sources",
+		"data-count": sources.length,
+		open,
+		onOpenChange: (next, details) => {
+			onOpenChange?.(next, details);
+			if (!details.isCanceled) setOpen(next);
+		},
+		className: cn("flex flex-col text-sm", className),
+		children: [/* @__PURE__ */ jsx(CollapsibleTrigger, {
+			"data-slot": "sources-trigger",
+			className: "text-muted-foreground",
+			children
+		}), /* @__PURE__ */ jsx(CollapsiblePanel, { children: /* @__PURE__ */ jsx("ol", {
+			className: "flex list-decimal flex-col gap-1 ps-5 pbs-2",
+			children: sources.map((source) => /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx("a", {
+				href: source.url,
+				target: "_blank",
+				rel: "noreferrer",
+				className: "underline underline-offset-4",
+				children: source.title ?? source.url
+			}), source.snippet !== void 0 && /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground",
+				children: source.snippet
+			})] }, source.url))
+		}) })]
+	});
+}
+//#endregion
+//#region src/view/structured-output.tsx
+function jsonBlock$1(value) {
+	return `\`\`\`json\n${JSON.stringify(value, null, 2)}\n\`\`\``;
+}
+/** `useChat({ outputSchema })`'s part (spec T23): partial JSON while streaming, the validated data once complete. */
+function StructuredOutput({ part, className }) {
+	const streaming = part.status === "streaming";
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "structured-output",
+		"data-streaming": dataAttr(streaming),
+		"data-complete": dataAttr(part.status === "complete"),
+		"data-error": dataAttr(part.status === "error"),
+		className: cn("flex flex-col gap-2", className),
+		children: [
+			streaming && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Markdown, {
+				content: jsonBlock$1(part.partial),
+				streaming: true
+			}), /* @__PURE__ */ jsx(Spinner, {
+				"aria-hidden": true,
+				className: "block-[1em] inline-[1em]"
+			})] }),
+			part.status === "complete" && /* @__PURE__ */ jsx(Markdown, { content: jsonBlock$1(part.data) }),
+			part.status === "error" && /* @__PURE__ */ jsx("p", {
+				"data-slot": "structured-output-error",
+				className: "text-sm text-destructive",
+				children: part.errorMessage
+			})
+		]
+	});
+}
+//#endregion
+//#region src/view/suggestions.tsx
+const SuggestionsContext = createContext(null);
+if (process.env.NODE_ENV !== "production") SuggestionsContext.displayName = "SuggestionsContext";
+function useSuggestionsContext() {
+	const context = use(SuggestionsContext);
+	if (context === null) throw new Error("cadenza-ai: SuggestionsContext is missing. Suggestions parts must be placed within <Suggestions>.");
+	return context;
+}
+/** A horizontally scrolling row of prompt chips. */
+function Suggestions({ children, className, onValueChange }) {
+	const context = useMemo(() => ({ onValueChange }), [onValueChange]);
+	return /* @__PURE__ */ jsx(SuggestionsContext, {
+		value: context,
+		children: /* @__PURE__ */ jsx(ScrollArea, {
+			className: cn("inline-full", className),
+			orientation: "horizontal",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "flex gap-2 inline-max",
+				"data-slot": "suggestions",
+				role: "group",
+				children
+			})
+		})
+	});
+}
+function SuggestionsItem({ onClick, value, ...props }) {
+	const { onValueChange } = useSuggestionsContext();
+	return /* @__PURE__ */ jsx(Button, {
+		"data-slot": "suggestions-item",
+		"data-value": value,
+		size: "sm",
+		variant: "outline",
+		...props,
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented) onValueChange(value, createChangeEventDetails("item-press", event.nativeEvent));
+		}
+	});
+}
+//#endregion
+//#region src/view/thread-list.tsx
+const ThreadListContext = createContext(null);
+if (process.env.NODE_ENV !== "production") ThreadListContext.displayName = "ThreadListContext";
+function useThreadList() {
+	const context = use(ThreadListContext);
+	if (context === null) throw new Error("cadenza-ai: ThreadListContext is missing. ThreadList parts must be placed within <ThreadList>.");
+	return context;
+}
+const ThreadListItemContext = createContext(null);
+if (process.env.NODE_ENV !== "production") ThreadListItemContext.displayName = "ThreadListItemContext";
+function useThreadListItemContext() {
+	const context = use(ThreadListItemContext);
+	if (context === null) throw new Error("cadenza-ai: ThreadListItemContext is missing. ThreadListItem parts must be placed within <ThreadListItem>.");
+	return context;
+}
+/** The row a `ThreadListItem` action sits in. */
+function useThreadListItem() {
+	const { thread, active } = useThreadListItemContext();
+	return {
+		thread,
+		active
+	};
+}
+/**
+* The scrolling list of threads. `ScrollArea` root > `div[role=list]`; the
+* current thread is the controlled `value`, and selecting a row (or `ThreadListNew`
+* creating one) reports through `onValueChange(id, details)`.
+*/
+function ThreadList({ index, threads, value, defaultValue, onValueChange, children, className, untitled }) {
+	const [current, setCurrent] = useControllableState({
+		value,
+		defaultValue
+	});
+	const select = useCallback((id, details) => {
+		onValueChange(id, details);
+		if (!details.isCanceled) setCurrent(id);
+	}, [onValueChange, setCurrent]);
+	const context = useMemo(() => ({
+		index,
+		value: current,
+		select,
+		untitled
+	}), [
+		index,
+		current,
+		select,
+		untitled
+	]);
+	return /* @__PURE__ */ jsx(ThreadListContext, {
+		value: context,
+		children: /* @__PURE__ */ jsx(ScrollArea, {
+			className,
+			children: /* @__PURE__ */ jsx("div", {
+				role: "list",
+				"data-slot": "thread-list",
+				className: "flex flex-col gap-1",
+				children: children ?? threads.map((thread) => /* @__PURE__ */ jsx(ThreadListItem, { thread }, thread.id))
+			})
+		})
+	});
+}
+function ThreadListGroup({ children, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"data-slot": "thread-list-group",
+		className: cn(`flex flex-col gap-1`, className),
+		children
+	});
+}
+function ThreadListGroupLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "thread-list-group-label",
+		className: cn("ps-3 pbs-2 text-xs text-muted-foreground", className),
+		...props
+	});
+}
+/**
+* One row: an `Item` whose content is a press target for selection, or — while
+* renaming — an inline `Input` (Enter / blur commit, Escape cancels). Mirrors its
+* state as `data-active` (+ `aria-current="page"`), `data-archived`, `data-renaming`.
+*/
+function ThreadListItem({ thread, children, className }) {
+	const { index, value, select, untitled } = useThreadList();
+	const [renaming, setRenaming] = useState(false);
+	const settledRef = useRef(false);
+	const active = value === thread.id;
+	const context = useMemo(() => ({
+		thread,
+		active,
+		renaming,
+		setRenaming: (next) => {
+			settledRef.current = false;
+			setRenaming(next);
+		}
+	}), [
+		thread,
+		active,
+		renaming
+	]);
+	const finish = (title) => {
+		if (settledRef.current) return;
+		settledRef.current = true;
+		const next = title?.trim() ?? "";
+		if (next !== "" && next !== thread.title) index.rename(thread.id, next);
+		setRenaming(false);
+	};
+	const onKeyDown = (event) => {
+		if (event.key === "Enter") finish(event.currentTarget.value);
+		else if (event.key === "Escape") finish(null);
+	};
+	return /* @__PURE__ */ jsx(ThreadListItemContext, {
+		value: context,
+		children: /* @__PURE__ */ jsxs(Item, {
+			role: "listitem",
+			size: "sm",
+			"data-slot": "thread-list-item",
+			"data-active": dataAttr(active),
+			"data-archived": dataAttr(thread.archived),
+			"data-renaming": dataAttr(renaming),
+			"aria-current": active ? "page" : void 0,
+			className: cn("data-active:bg-muted", className),
+			children: [/* @__PURE__ */ jsx(ItemContent, { children: renaming ? /* @__PURE__ */ jsx(Input, {
+				autoFocus: true,
+				defaultValue: thread.title,
+				onKeyDown,
+				onBlur: (event) => finish(event.currentTarget.value)
+			}) : /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				className: "\n                    flex flex-col items-start rounded-md text-start outline-none\n                    min-inline-0\n                  ",
+				onClick: (event) => select(thread.id, createChangeEventDetails("item-press", event.nativeEvent)),
+				children: [/* @__PURE__ */ jsx(ItemTitle, { children: thread.title !== "" ? thread.title : untitled }), thread.preview !== "" && /* @__PURE__ */ jsx(ItemDescription, { children: thread.preview })]
+			}) }), children !== void 0 && /* @__PURE__ */ jsx(ItemActions, { children })]
+		})
+	});
+}
+function handled(onClick, event) {
+	onClick?.(event);
+	return event.defaultPrevented;
+}
+/** Switches the row to its inline rename input. */
+function ThreadListRename({ children, onClick, ...props }) {
+	const { setRenaming } = useThreadListItemContext();
+	return /* @__PURE__ */ jsx(Button, {
+		"data-slot": "thread-list-rename",
+		variant: "ghost",
+		size: "icon-xs",
+		...props,
+		onClick: (event) => {
+			if (!handled(onClick, event)) setRenaming(true);
+		},
+		children: children ?? /* @__PURE__ */ jsx(IconPencil, {})
+	});
+}
+/** Toggles `archived` through the index. */
+function ThreadListArchive({ children, onClick, ...props }) {
+	const { index } = useThreadList();
+	const { thread } = useThreadListItemContext();
+	return /* @__PURE__ */ jsx(Button, {
+		"data-slot": "thread-list-archive",
+		variant: "ghost",
+		size: "icon-xs",
+		...props,
+		onClick: (event) => {
+			if (!handled(onClick, event)) index.archive(thread.id, !thread.archived);
+		},
+		children: children ?? /* @__PURE__ */ jsx(IconArchive, {})
+	});
+}
+/** Removes the thread from the index. Confirmation is the caller's — wrap it in an `AlertDialog`. */
+function ThreadListDelete({ children, onClick, ...props }) {
+	const { index } = useThreadList();
+	const { thread } = useThreadListItemContext();
+	return /* @__PURE__ */ jsx(Button, {
+		"data-slot": "thread-list-delete",
+		variant: "ghost",
+		size: "icon-xs",
+		...props,
+		onClick: (event) => {
+			if (!handled(onClick, event)) index.remove(thread.id);
+		},
+		children: children ?? /* @__PURE__ */ jsx(IconTrash, {})
+	});
+}
+/** Creates an empty thread and selects it (`reason: 'item-press'`). */
+function ThreadListNew({ onClick, ...props }) {
+	const { index, select } = useThreadList();
+	return /* @__PURE__ */ jsx(Button, {
+		"data-slot": "thread-list-new",
+		variant: "outline",
+		...props,
+		onClick: (event) => {
+			if (handled(onClick, event)) return;
+			const thread = index.create();
+			select(thread.id, createChangeEventDetails("item-press", event.nativeEvent));
+		}
+	});
+}
+//#endregion
+//#region src/view/tool-call.tsx
+function useOpen({ open, defaultOpen, onOpenChange }, fallback = false) {
+	const [value, setValue] = useControllableState({
+		value: open,
+		defaultValue: defaultOpen,
+		fallback
+	});
+	return [value, (next, details) => {
+		onOpenChange?.(next, details);
+		if (!details.isCanceled) setValue(next);
+	}];
+}
+function parseJson(value) {
+	if (typeof value !== "string") return value;
+	try {
+		return parsePartialJSON$1(value) ?? value;
+	} catch {
+		return value;
+	}
+}
+function jsonBlock(value) {
+	return `\`\`\`json\n${JSON.stringify(value, null, 2)}\n\`\`\``;
+}
+/**
+* A collapsible card for one tool call: header = tool name + state icon (no
+* words), body = the JSON input and output as Markdown code blocks, then
+* `children`.
+*/
+function ToolCallCard({ part, result, interrupt: _interrupt, streaming = false, open: openProp, defaultOpen, onOpenChange, children, className }) {
+	const { labels } = usePartRenderers();
+	const state = {
+		pending: part.state === "awaiting-input" || part.state === "input-streaming" || part.state === "input-complete",
+		approvalRequested: part.state === "approval-requested",
+		approvalResponded: part.state === "approval-responded",
+		complete: part.state === "complete",
+		error: part.state === "error" || result?.state === "error"
+	};
+	const [open, setOpen] = useOpen({
+		open: openProp,
+		defaultOpen,
+		onOpenChange
+	}, state.approvalRequested);
+	const manualRef = useRef(false);
+	const requestedRef = useRef(state.approvalRequested);
+	const openForApproval = useEffectEvent(() => {
+		if (!manualRef.current) setOpen(true, createChangeEventDetails("none"));
+	});
+	useEffect(() => {
+		const was = requestedRef.current;
+		requestedRef.current = state.approvalRequested;
+		if (state.approvalRequested && !was) openForApproval();
+	}, [state.approvalRequested]);
+	const stateLabel = state.error ? labels.toolFailed : state.complete ? labels.toolDone : state.approvalRequested ? labels.toolApprovalRequested : state.approvalResponded ? part.approval?.approved === false ? labels.toolDenied : labels.toolApproved : part.state === "input-complete" ? labels.toolRunning : labels.toolPending;
+	const input = part.input ?? (part.arguments === "" ? void 0 : parseJson(part.arguments));
+	const output = part.output ?? result?.content;
+	const error = result?.error;
+	return /* @__PURE__ */ jsxs(Collapsible, {
+		"data-slot": "tool-call-card",
+		"data-pending": dataAttr(state.pending),
+		"data-approval-requested": dataAttr(state.approvalRequested),
+		"data-approval-responded": dataAttr(state.approvalResponded),
+		"data-complete": dataAttr(state.complete),
+		"data-error": dataAttr(state.error),
+		"data-streaming": dataAttr(streaming),
+		open,
+		onOpenChange: (next, details) => {
+			manualRef.current = true;
+			setOpen(next, details);
+		},
+		className: cn("rounded-lg border bg-card text-sm text-card-foreground", className),
+		children: [/* @__PURE__ */ jsxs(CollapsibleTrigger, {
+			"data-slot": "tool-call-card-trigger",
+			className: "\n          flex items-center gap-2 px-3 py-2 text-start inline-full\n          hover:bg-muted/50\n        ",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					"data-slot": "tool-call-name",
+					className: "flex-1 truncate font-mono min-inline-0",
+					children: part.name
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					"data-slot": "tool-call-state",
+					children: stateLabel
+				}),
+				state.pending && /* @__PURE__ */ jsx(Spinner, {
+					"aria-hidden": true,
+					className: "block-[1em] inline-[1em]"
+				}),
+				state.approvalRequested && /* @__PURE__ */ jsx(IconClock, {
+					"aria-hidden": true,
+					className: "block-[1em] inline-[1em]"
+				}),
+				state.complete && /* @__PURE__ */ jsx(IconCheck, {
+					"aria-hidden": true,
+					className: "block-[1em] inline-[1em]"
+				}),
+				state.error && /* @__PURE__ */ jsx(IconX, {
+					"aria-hidden": true,
+					className: "text-destructive block-[1em] inline-[1em]"
+				})
+			]
+		}), /* @__PURE__ */ jsx(CollapsiblePanel, {
+			keepMounted: true,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-2 border-bs px-3 py-2",
+				children: [
+					input !== void 0 && /* @__PURE__ */ jsx(Markdown, {
+						content: jsonBlock(input),
+						streaming: state.pending && streaming
+					}),
+					output !== void 0 && /* @__PURE__ */ jsx(Markdown, { content: jsonBlock(parseJson(output)) }),
+					error !== void 0 && /* @__PURE__ */ jsx("p", {
+						"data-slot": "tool-call-error",
+						className: "text-destructive",
+						children: error
+					}),
+					children
+				]
+			})
+		})]
+	});
+}
+/** The group's title — a `CollapsibleTrigger`, wording from the caller. */
+function ToolCallGroupTrigger({ className, ...props }) {
+	return /* @__PURE__ */ jsx(CollapsibleTrigger, {
+		"data-slot": "tool-call-group-trigger",
+		className: cn(`text-sm text-muted-foreground`, className),
+		...props
+	});
+}
+/**
+* Folds a run of consecutive tool calls (spec G6). Position contract like
+* `DialogTrigger`: the first child is the `ToolCallGroupTrigger`, the rest
+* go into the panel.
+*/
+function ToolCallGroup({ count, children, open: openProp, defaultOpen, onOpenChange, className }) {
+	const [open, setOpen] = useOpen({
+		open: openProp,
+		defaultOpen,
+		onOpenChange
+	});
+	const [trigger, ...body] = Children.toArray(children);
+	return /* @__PURE__ */ jsxs(Collapsible, {
+		"data-slot": "tool-call-group",
+		"data-count": count,
+		open,
+		onOpenChange: setOpen,
+		className: cn("flex flex-col", className),
+		children: [trigger, /* @__PURE__ */ jsx(CollapsiblePanel, {
+			keepMounted: true,
+			children: /* @__PURE__ */ jsx("div", {
+				className: "flex flex-col gap-2 pbs-2",
+				children: body
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/view/transcript.tsx
+const TranscriptContext = createContext(null);
+if (process.env.NODE_ENV !== "production") TranscriptContext.displayName = "TranscriptContext";
+const NO_INTERRUPTS = [];
+/** Hands `useChat()`'s run state to every Transcript part below it. */
+function TranscriptProvider({ status, interrupts = NO_INTERRUPTS, addToolApprovalResponse, children }) {
+	const value = useMemo(() => ({
+		status,
+		interrupts,
+		addToolApprovalResponse
+	}), [
+		status,
+		interrupts,
+		addToolApprovalResponse
+	]);
+	return /* @__PURE__ */ jsx(TranscriptContext, {
+		value,
+		children
+	});
+}
+function useTranscript() {
+	const value = use(TranscriptContext);
+	if (value === null) throw new Error("cadenza-ai: TranscriptContext is missing. Transcript parts must be placed within <TranscriptProvider>.");
+	return value;
+}
+const TranscriptFrameContext = createContext({
+	anchorTurns: true,
+	anchorId: null
+});
+if (process.env.NODE_ENV !== "production") TranscriptFrameContext.displayName = "TranscriptFrameContext";
+/** Ran on the provider's side (Anthropic's or DeepSeek's server search), by the convention adapters stamp on the call. */
+function providerExecuted(part) {
+	return part.metadata?.providerExecuted === true;
+}
+/** The scrolling frame: `MessageScroller` with the house viewport, one row per `TranscriptMessage`. */
+function Transcript({ children, autoScroll = true, defaultScrollPosition = "end", anchorTurns = true, previousPeek, after, className, ...viewport }) {
+	useTranscript();
+	const anchorId = useMemo(() => {
+		let id = null;
+		for (const child of Children.toArray(children)) if (isValidElement(child) && child.props.message?.role === "user") id = child.props.message.id;
+		return id;
+	}, [children]);
+	const frame = useMemo(() => ({
+		anchorTurns,
+		anchorId
+	}), [anchorTurns, anchorId]);
+	return /* @__PURE__ */ jsx(TranscriptFrameContext, {
+		value: frame,
+		children: /* @__PURE__ */ jsx(MessageScrollerProvider, {
+			autoScroll,
+			defaultScrollPosition,
+			scrollPreviousItemPeek: previousPeek,
+			children: /* @__PURE__ */ jsxs(MessageScroller, {
+				"data-slot": "transcript",
+				className: cn(`relative flex flex-1 flex-col min-block-0`, className),
+				children: [/* @__PURE__ */ jsx(MessageScrollerViewport, {
+					...viewport,
+					className: "*:[[role=presentation]]:min-inline-0!",
+					children: /* @__PURE__ */ jsx(MessageScrollerContent, {
+						className: "flex flex-col gap-6 p-4",
+						children
+					})
+				}), after]
+			})
+		})
+	});
+}
+function TranscriptMessageImpl({ message, align, streaming = false, children, className }) {
+	const user = message.role === "user";
+	const { anchorTurns, anchorId } = use(TranscriptFrameContext);
+	const anchor = anchorTurns && user && (anchorId === null || anchorId === message.id);
+	const parts = [];
+	const actions = [];
+	Children.forEach(children, (child) => {
+		if (isValidElement(child) && child.type === TranscriptActions) actions.push(child);
+		else if (child !== null && child !== void 0 && child !== false) parts.push(child);
+	});
+	return /* @__PURE__ */ jsx(MessageScrollerItem, {
+		messageId: message.id,
+		scrollAnchor: anchor,
+		"data-slot": "transcript-message",
+		"data-role": message.role,
+		"data-streaming": dataAttr(streaming),
+		className: cn("[content-visibility:visible]", className),
+		children: /* @__PURE__ */ jsx(Message, {
+			align: align ?? (user ? "end" : "start"),
+			children: /* @__PURE__ */ jsxs(MessageContent, { children: [/* @__PURE__ */ jsx(Bubble, {
+				variant: user ? "muted" : "ghost",
+				className: user ? void 0 : `min-inline-full`,
+				children: /* @__PURE__ */ jsx(BubbleContent, {
+					className: user ? void 0 : "min-inline-full",
+					children: parts.length > 0 ? parts : /* @__PURE__ */ jsx(TranscriptParts, { message })
+				})
+			}), actions] })
+		})
+	});
+}
+/** One row. Memoised so a streaming row re-renders alone. */
+const TranscriptMessage = memo(TranscriptMessageImpl);
+if (process.env.NODE_ENV !== "production") TranscriptMessage.displayName = "TranscriptMessage";
+function isApproval(interrupt) {
+	return interrupt.kind === "tool-approval";
+}
+/** Dispatches every part of a message through the renderer registry and the default parts. */
+function TranscriptParts({ message, className }) {
+	const { renderers, labels } = usePartRenderers();
+	const { status, interrupts, addToolApprovalResponse } = useTranscript();
+	const results = useMemo(() => {
+		const map = /* @__PURE__ */ new Map();
+		for (const part of message.parts) if (part.type === "tool-result") map.set(part.toolCallId, part);
+		return map;
+	}, [message.parts]);
+	const lastIndex = message.parts.length - 1;
+	const renderTool = (part, index) => {
+		const result = results.get(part.id);
+		const interrupt = interrupts.filter(isApproval).find((i) => i.toolCallId === part.id);
+		const streaming = status === "streaming" && index === lastIndex;
+		const custom = renderers.toolCall?.[part.name] ?? renderers.toolCall?.default;
+		if (custom) return custom({
+			part,
+			result,
+			interrupt,
+			streaming
+		});
+		let approval = null;
+		if (part.state === "approval-requested") {
+			if (interrupt) approval = /* @__PURE__ */ jsxs(ApprovalActions, {
+				interrupt,
+				children: [/* @__PURE__ */ jsx(ApprovalApprove, { children: labels.approve }), /* @__PURE__ */ jsx(ApprovalDeny, { children: labels.deny })]
+			});
+			else if (part.approval && addToolApprovalResponse) {
+				const id = part.approval.id;
+				approval = /* @__PURE__ */ jsxs("div", {
+					role: "group",
+					"data-slot": "approval-actions",
+					className: "flex gap-2",
+					children: [/* @__PURE__ */ jsx(Button, {
+						size: "sm",
+						onClick: () => void addToolApprovalResponse({
+							id,
+							approved: true
+						}),
+						children: labels.approve
+					}), /* @__PURE__ */ jsx(Button, {
+						size: "sm",
+						variant: "outline",
+						onClick: () => void addToolApprovalResponse({
+							id,
+							approved: false
+						}),
+						children: labels.deny
+					})]
+				});
+			}
+		}
+		return /* @__PURE__ */ jsx(ToolCallCard, {
+			part,
+			result,
+			interrupt,
+			streaming,
+			children: approval
+		});
+	};
+	/**
+	* The `tool-result` parts a tool-call scan walked past. They carry no node of
+	* their own by default — the card renders the output — but a caller who
+	* registers `renderers.toolResult` has asked for one, and the scan used to
+	* advance `index` straight over them so that renderer was never reached.
+	*/
+	const walkedResults = (from, to) => {
+		const render = renderers.toolResult;
+		if (!render) return [];
+		const out = [];
+		for (let i = from; i < to; i += 1) {
+			const part = message.parts[i];
+			if (part.type === "tool-result") out.push(/* @__PURE__ */ jsx("div", { children: render({ part }) }, `tool-result-${i}`));
+		}
+		return out;
+	};
+	const nodes = [];
+	let index = 0;
+	while (index <= lastIndex) {
+		const part = message.parts[index];
+		if (part.type === "tool-call") {
+			if (providerExecuted(part)) {
+				nodes.push(/* @__PURE__ */ jsx("div", { children: renderTool(part, index) }, part.id));
+				let next = index + 1;
+				while (next <= lastIndex && message.parts[next].type === "tool-result") next += 1;
+				nodes.push(...walkedResults(index + 1, next));
+				index = next;
+				continue;
+			}
+			const run = [];
+			let cursor = index;
+			while (cursor <= lastIndex) {
+				const next = message.parts[cursor];
+				if (next.type === "tool-call") {
+					if (providerExecuted(next)) break;
+					run.push([next, cursor]);
+				} else if (next.type !== "tool-result") break;
+				cursor += 1;
+			}
+			const cards = run.map(([p, i]) => /* @__PURE__ */ jsx("div", { children: renderTool(p, i) }, p.id));
+			nodes.push(run.length > 1 ? /* @__PURE__ */ jsxs(ToolCallGroup, {
+				count: run.length,
+				children: [/* @__PURE__ */ jsx(ToolCallGroupTrigger, { children: labels.toolGroup(run.length) }), cards]
+			}, `group-${index}`) : cards[0]);
+			nodes.push(...walkedResults(index, cursor));
+			index = cursor;
+			continue;
+		}
+		const key = `${part.type}-${index}`;
+		switch (part.type) {
+			case "text": {
+				const streaming = status === "streaming" && index === lastIndex;
+				nodes.push(/* @__PURE__ */ jsx("div", { children: renderers.text ? renderers.text({
+					part,
+					message,
+					streaming
+				}) : /* @__PURE__ */ jsx(Markdown, {
+					content: part.content,
+					streaming
+				}) }, key));
+				break;
+			}
+			case "thinking": {
+				const complete = isThinkingComplete(message, index, status);
+				nodes.push(/* @__PURE__ */ jsx("div", { children: renderers.thinking ? renderers.thinking({
+					part,
+					complete
+				}) : /* @__PURE__ */ jsx(Reasoning, {
+					content: part.content,
+					complete,
+					children: complete ? labels.thought : labels.thinking
+				}) }, key));
+				break;
+			}
+			case "tool-result":
+				if (renderers.toolResult) nodes.push(/* @__PURE__ */ jsx("div", { children: renderers.toolResult({ part }) }, key));
+				break;
+			case "image":
+				nodes.push(/* @__PURE__ */ jsx("div", { children: renderers.image ? renderers.image({
+					part,
+					message
+				}) : /* @__PURE__ */ jsx(MediaPart, { part }) }, key));
+				break;
+			case "audio":
+				nodes.push(/* @__PURE__ */ jsx("div", { children: renderers.audio ? renderers.audio({
+					part,
+					message
+				}) : /* @__PURE__ */ jsx(MediaPart, { part }) }, key));
+				break;
+			case "video":
+				nodes.push(/* @__PURE__ */ jsx("div", { children: renderers.video ? renderers.video({
+					part,
+					message
+				}) : /* @__PURE__ */ jsx(MediaPart, { part }) }, key));
+				break;
+			case "document":
+				nodes.push(/* @__PURE__ */ jsx("div", { children: renderers.document ? renderers.document({
+					part,
+					message
+				}) : /* @__PURE__ */ jsx(MediaPart, { part }) }, key));
+				break;
+			case "structured-output":
+				nodes.push(/* @__PURE__ */ jsx("div", { children: renderers.structuredOutput ? renderers.structuredOutput({ part }) : /* @__PURE__ */ jsx(StructuredOutput, { part }) }, key));
+				break;
+			case "ui-resource": if (renderers.uiResource) nodes.push(/* @__PURE__ */ jsx("div", { children: renderers.uiResource({ part }) }, key));
+		}
+		index += 1;
+	}
+	const sources = useMemo(() => sourcesOf(message), [message]);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "transcript-parts",
+		className: cn("flex flex-col gap-3", className),
+		children: [nodes, sources.length > 0 && /* @__PURE__ */ jsx(Sources, {
+			sources,
+			children: labels.sources(sources.length)
+		})]
+	});
+}
+/** The row's toolbar, hidden while a run streams. Place it as a child of `TranscriptMessage`. */
+function TranscriptActions({ children, className }) {
+	const { status } = useTranscript();
+	return /* @__PURE__ */ jsx(MessageFooter, { children: /* @__PURE__ */ jsx("div", {
+		role: "toolbar",
+		"data-slot": "transcript-actions",
+		"data-hidden": dataAttr(status === "streaming"),
+		className: cn(`
+          flex items-center gap-1
+          data-hidden:invisible
+        `, className),
+		children
+	}) });
+}
+function TranscriptAction({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		variant: "ghost",
+		size: "icon-xs",
+		"data-slot": "transcript-action",
+		className,
+		...props
+	});
+}
+function TranscriptEmpty(props) {
+	return /* @__PURE__ */ jsx(Empty, {
+		"data-slot": "transcript-empty",
+		...props
+	});
+}
+/** Shown between submit and the first chunk. */
+function TranscriptPending({ children, className }) {
+	return /* @__PURE__ */ jsx(Marker, {
+		role: "status",
+		"data-slot": "transcript-pending",
+		className,
+		children: /* @__PURE__ */ jsx(MarkerContent, {
+			className: "shimmer",
+			children
+		})
+	});
+}
+function TranscriptError({ error, children, className }) {
+	const code = error.code;
+	return /* @__PURE__ */ jsx("div", {
+		role: "alert",
+		"data-slot": "transcript-error",
+		"data-code": typeof code === "string" ? code : void 0,
+		className: cn(`
+        rounded-md border border-destructive/40 bg-destructive/5 px-3 py-2
+        text-sm text-destructive
+      `, className),
+		children
+	});
+}
+//#endregion
+//#region src/view/usage-stats.tsx
+const DEFAULT_USAGE_STATS_LABELS = {
+	cacheHit: "Cache hit",
+	cacheWrite: "Cache write",
+	outputRatio: "Out per in",
+	reasoningShare: "Reasoning",
+	contextUsed: "Context used",
+	cacheSaved: "Saved by cache",
+	promptModalities: "Prompt by modality",
+	completionModalities: "Completion by modality",
+	modality: {
+		text: "Text",
+		image: "Image",
+		audio: "Audio",
+		video: "Video",
+		document: "Document"
+	}
+};
+const PERCENT = new Intl.NumberFormat("en-US", {
+	style: "percent",
+	maximumFractionDigits: 1
+});
+const USD = new Intl.NumberFormat("en-US", {
+	style: "currency",
+	currency: "USD",
+	maximumFractionDigits: 4
+});
+function Tile({ label, value, bar, children }) {
+	const id = useId();
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "usage-stat",
+		className: "flex flex-col gap-1 rounded-md border p-3",
+		children: [/* @__PURE__ */ jsx("dt", {
+			id,
+			className: "text-xs text-muted-foreground",
+			children: label
+		}), /* @__PURE__ */ jsxs("dd", {
+			className: "flex flex-col gap-1.5",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "text-lg tabular-nums",
+					children: value
+				}),
+				bar !== void 0 && /* @__PURE__ */ jsx(Progress, {
+					value: Math.min(bar, 1) * 100,
+					"aria-labelledby": id
+				}),
+				children
+			]
+		})]
+	});
+}
+function Breakdown({ slices, labels }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: "flex flex-col gap-0.5 text-xs text-muted-foreground",
+		children: slices.map((slice) => /* @__PURE__ */ jsxs("span", {
+			className: "flex justify-between gap-2 tabular-nums",
+			children: [/* @__PURE__ */ jsx("span", { children: labels.modality[slice.kind] }), /* @__PURE__ */ jsx("span", { children: PERCENT.format(slice.share) })]
+		}, slice.kind))
+	});
+}
+/**
+* The ratios inside a `TokenUsage`, one tile each: how much of the prompt came
+* from cache, how much answer a prompt bought, how much of the answer was
+* thinking, how full the context is, and what the cache saved.
+*
+* Every tile is skipped when its number is unknown — a rate with no denominator
+* is not zero — so a provider that reports no cache detail simply shows fewer
+* tiles rather than a row of 0%.
+*
+* It renders one `usage`. Which one is the caller's to decide: `useUsageTracker`
+* hands over `total`, `lastRun` and `byMessage`, and a switch between them is a
+* few lines the caller writes anyway, keeping that wording and those variants
+* where they belong.
+*/
+function UsageStats({ usage, model, labels: labelsProp, className }) {
+	const labels = useMemo(() => ({
+		...DEFAULT_USAGE_STATS_LABELS,
+		...labelsProp
+	}), [labelsProp]);
+	const m = useMemo(() => usageMetrics(usage, model), [usage, model]);
+	return /* @__PURE__ */ jsxs("dl", {
+		"data-slot": "usage-stats",
+		className: cn("grid grid-cols-[repeat(auto-fit,minmax(9rem,1fr))] gap-2", className),
+		children: [
+			m.cacheHitRate !== void 0 && /* @__PURE__ */ jsx(Tile, {
+				label: labels.cacheHit,
+				value: PERCENT.format(m.cacheHitRate),
+				bar: m.cacheHitRate
+			}),
+			m.cacheWriteRate !== void 0 && /* @__PURE__ */ jsx(Tile, {
+				label: labels.cacheWrite,
+				value: PERCENT.format(m.cacheWriteRate),
+				bar: m.cacheWriteRate
+			}),
+			m.outputRatio !== void 0 && /* @__PURE__ */ jsx(Tile, {
+				label: labels.outputRatio,
+				value: `${m.outputRatio.toFixed(2)}×`
+			}),
+			m.reasoningShare !== void 0 && /* @__PURE__ */ jsx(Tile, {
+				label: labels.reasoningShare,
+				value: PERCENT.format(m.reasoningShare),
+				bar: m.reasoningShare
+			}),
+			m.contextRatio !== void 0 && /* @__PURE__ */ jsx(Tile, {
+				label: labels.contextUsed,
+				value: PERCENT.format(m.contextRatio),
+				bar: m.contextRatio
+			}),
+			m.cacheSavings !== void 0 && /* @__PURE__ */ jsx(Tile, {
+				label: labels.cacheSaved,
+				value: USD.format(m.cacheSavings)
+			}),
+			m.promptModalities.length > 1 && /* @__PURE__ */ jsx(Tile, {
+				label: labels.promptModalities,
+				value: String(usage.promptTokens),
+				children: /* @__PURE__ */ jsx(Breakdown, {
+					slices: m.promptModalities,
+					labels
+				})
+			}),
+			m.completionModalities.length > 1 && /* @__PURE__ */ jsx(Tile, {
+				label: labels.completionModalities,
+				value: String(usage.completionTokens),
+				children: /* @__PURE__ */ jsx(Breakdown, {
+					slices: m.completionModalities,
+					labels
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { ApprovalActions, ApprovalApprove, ApprovalDeny, ByokKeyDialog, ByokKeyDialogProvider, Composer, ComposerAttach, ComposerAttachments, ComposerDictate, ComposerSubmit, ComposerTextarea, ComposerToolbar, ContextUsage, DEFAULT_BYOK_KEY_DIALOG_LABELS, DEFAULT_CONTEXT_USAGE_LABELS, DEFAULT_MAX_ATTACHMENT_BYTES, DEFAULT_PART_LABELS, DEFAULT_USAGE_STATS_LABELS, EventType, Markdown, MediaPart, ModelPicker, PartRenderersProvider, QueueList, Reasoning, SearchToggle, Sources, StructuredOutput, Suggestions, SuggestionsItem, THINKING_LEVELS, ThinkingLevelPicker, ThinkingToggle, ThreadList, ThreadListArchive, ThreadListDelete, ThreadListGroup, ThreadListGroupLabel, ThreadListItem, ThreadListNew, ThreadListRename, ToolCallCard, ToolCallGroup, ToolCallGroupTrigger, Transcript, TranscriptAction, TranscriptActions, TranscriptEmpty, TranscriptError, TranscriptMessage, TranscriptParts, TranscriptPending, TranscriptProvider, UsageStats, addTokenUsage, attachmentKindOf, clampThinkingLevel, createByok, createCatalog, createThreadIndex, defaultByokStorage, defaultCatalog, defineByok, definePartRenderers, editAndResend, estimateCost, fileToContentPart, fromSpecTokenUsage, generateMessageId, groupThreadsByDay, isByokError, isPasskeyStorageSupported, isThinkingComplete, memoryStorage, messageText, messagesToMarkdown, modelRef, newThreadId, parseModelRef, parsePartialJSON, passkeyStorage, providers, sourcesOf, supportedThinkingLevels, threadPersistence, threadTitleFrom, toolDefinition, usageMetrics, useAttachmentDraft, useComposer, useModelSelection, usePartRenderers, useServerCoverage, useStoredState, useThreadIndex, useThreadListItem, useTranscript, useUsageTracker };