agentic-ui-kit 0.2.1 → 0.3.0

package/dist/index.js

@@ -1,10 +1,10 @@
 "use client";
-import { a as activityTokens, f as settleToolCall, i as toBlocks, n as readEventStream, o as applyEvent, s as awaitingToolCalls } from "./sse-BA_ebMcH.js";
+import { A as salvageJson, C as awaitingToolCalls, O as settleToolCall, S as applyEvent, b as toBlocks, d as isStateRef, f as matchesSchema, g as uiActionSchema, i as parseUiMarkup, v as readEventStream, x as activityTokens } from "./ui-markup-6xbP-myu.js";
 import { clsx } from "clsx";
 import { Autocomplete, Button as Button$1, Dialog, Disclosure as Disclosure$1, DisclosurePanel, Focusable, Header, Heading, Input, Keyboard, Link, Menu as Menu$1, MenuItem as MenuItem$1, MenuSection as MenuSection$1, MenuTrigger, MenuTrigger as MenuTrigger$1, Modal as Modal$1, ModalOverlay, Popover as Popover$1, SearchField, Separator, SubmenuTrigger, Text, Tooltip as Tooltip$1, TooltipTrigger, useFilter } from "react-aria-components";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { AlertTriangle, ArrowDown, ArrowUp, Check, ChevronDown, ChevronRight, ChevronsUpDown, Copy, FileText, Folder, FolderOpen, FolderPlus, Globe, MoreHorizontal, PanelLeft, Pencil, Pin, PinOff, Plus, RefreshCw, Share, ShieldQuestion, Square, ThumbsDown, ThumbsUp, Trash2, Volume2, X } from "lucide-react";
-import { Fragment as Fragment$1, createContext, createElement, memo, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { AlertTriangle, ArrowDown, ArrowUp, Check, ChevronDown, ChevronRight, ChevronsUpDown, Copy, FileText, Folder, FolderOpen, FolderPlus, Globe, Info, MoreHorizontal, PanelLeft, Pencil, Pin, PinOff, Plus, RefreshCw, Share, ShieldQuestion, Square, ThumbsDown, ThumbsUp, Trash2, Volume2, X } from "lucide-react";
+import { Component, Fragment as Fragment$1, createContext, createElement, memo, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { UNSAFE_PortalProvider } from "react-aria";
 import { createMathPlugin } from "@streamdown/math";
 import { Streamdown, defaultRehypePlugins } from "streamdown";
@@ -16,7 +16,7 @@ function Tooltip({ content, children, placement = "top", delay = 600 }) {
 		children: [children, /* @__PURE__ */ jsx(Tooltip$1, {
 			placement,
 			offset: 6,
-			className: "rounded-chat-sm bg-chat-raised px-2 py-1 font-chat-sans text-xs text-chat-fg shadow-chat-popover motion-safe:data-entering:animate-chat-in motion-safe:data-exiting:animate-chat-out",
+			className: "rounded-chat-sm bg-chat-raised px-2 py-1 font-chat-sans text-(length:--chat-ui-font-size-sm) leading-4 text-chat-fg shadow-chat-popover motion-safe:data-entering:animate-chat-in motion-safe:data-exiting:animate-chat-out",
 			children: content
 		})]
 	});
@@ -29,11 +29,11 @@ const variants = {
 	/** Filled with the surface color, e.g. the selected Chat/Cowork toggle. */
 	subtle: "bg-chat-surface text-chat-fg data-hovered:bg-chat-hover data-pressed:bg-chat-selected",
 	/** The send button. */
-	primary: "bg-chat-accent text-white data-hovered:brightness-110 data-pressed:brightness-95"
+	primary: "bg-chat-accent text-chat-accent-fg data-hovered:brightness-110 data-pressed:brightness-95"
 };
 const sizes = {
-	sm: "h-7 gap-1.5 px-2 text-sm [@media(pointer:coarse)]:h-9",
-	md: "h-8 gap-2 px-2.5 text-sm [@media(pointer:coarse)]:h-10"
+	sm: "h-7 gap-1.5 px-2 text-(length:--chat-ui-font-size) leading-5 [@media(pointer:coarse)]:h-9",
+	md: "h-8 gap-2 px-2.5 text-(length:--chat-ui-font-size) leading-5 [@media(pointer:coarse)]:h-10"
 };
 function Button({ variant = "ghost", size = "md", className, ...props }) {
 	return /* @__PURE__ */ jsx(Button$1, {
@@ -61,7 +61,7 @@ const tones = {
 };
 function Badge({ children, tone = "outline", icon, className }) {
 	return /* @__PURE__ */ jsxs("span", {
-		className: clsx("inline-flex items-center gap-1 rounded-full px-2 py-px font-chat-sans text-xs whitespace-nowrap [&_svg]:size-3", tones[tone], className),
+		className: clsx("inline-flex items-center gap-1 rounded-full px-2 py-px font-chat-sans text-(length:--chat-ui-font-size-sm) leading-4 whitespace-nowrap [&_svg]:size-3", tones[tone], className),
 		children: [icon, children]
 	});
 }
@@ -75,9 +75,77 @@ function Caret({ className }) {
 		children: /* @__PURE__ */ jsx("path", { d: "M2 1.2 6.2 4 2 6.8z" })
 	});
 }
+// src/primitives/icons.tsx
+/** Lucide icons, plus the claude.ai caret. Unsized: the places that show them size them with CSS. */
+const defaultIcons = {
+	copy: /* @__PURE__ */ jsx(Copy, {}),
+	copied: /* @__PURE__ */ jsx(Check, {}),
+	retry: /* @__PURE__ */ jsx(RefreshCw, {}),
+	edit: /* @__PURE__ */ jsx(Pencil, {}),
+	speak: /* @__PURE__ */ jsx(Volume2, {}),
+	thumbsUp: /* @__PURE__ */ jsx(ThumbsUp, {}),
+	thumbsDown: /* @__PURE__ */ jsx(ThumbsDown, {}),
+	send: /* @__PURE__ */ jsx(ArrowUp, {}),
+	stop: /* @__PURE__ */ jsx(Square, {}),
+	attach: /* @__PURE__ */ jsx(Plus, {}),
+	scrollToBottom: /* @__PURE__ */ jsx(ArrowDown, {}),
+	tokens: /* @__PURE__ */ jsx(ArrowDown, {}),
+	sidebar: /* @__PURE__ */ jsx(PanelLeft, {}),
+	switcher: /* @__PURE__ */ jsx(ChevronsUpDown, {}),
+	dropdown: /* @__PURE__ */ jsx(ChevronDown, {}),
+	expand: /* @__PURE__ */ jsx(ChevronRight, {}),
+	caret: /* @__PURE__ */ jsx(Caret, {}),
+	submenu: /* @__PURE__ */ jsx(ChevronRight, {}),
+	check: /* @__PURE__ */ jsx(Check, {}),
+	info: /* @__PURE__ */ jsx(Info, {}),
+	warning: /* @__PURE__ */ jsx(AlertTriangle, {}),
+	approval: /* @__PURE__ */ jsx(ShieldQuestion, {}),
+	web: /* @__PURE__ */ jsx(Globe, {}),
+	pin: /* @__PURE__ */ jsx(Pin, {}),
+	unpin: /* @__PURE__ */ jsx(PinOff, {}),
+	rename: /* @__PURE__ */ jsx(Pencil, {}),
+	addToProject: /* @__PURE__ */ jsx(FolderPlus, {}),
+	add: /* @__PURE__ */ jsx(Plus, {}),
+	share: /* @__PURE__ */ jsx(Share, {}),
+	delete: /* @__PURE__ */ jsx(Trash2, {}),
+	more: /* @__PURE__ */ jsx(MoreHorizontal, {}),
+	folder: /* @__PURE__ */ jsx(Folder, {}),
+	folderOpen: /* @__PURE__ */ jsx(FolderOpen, {}),
+	file: /* @__PURE__ */ jsx(FileText, {}),
+	remove: /* @__PURE__ */ jsx(X, {})
+};
+const IconsContext = createContext(defaultIcons);
+/** Merges `icons` over the icons of the enclosing provider (or the defaults). */
+function IconsProvider({ icons, children }) {
+	const parent = useIcons();
+	const merged = useMemo(() => icons ? {
+		...parent,
+		...icons
+	} : parent, [parent, icons]);
+	return /* @__PURE__ */ jsx(IconsContext.Provider, {
+		value: merged,
+		children
+	});
+}
+/** The active icons: the enclosing `ChatTheme`'s `icons` over the defaults. */
+function useIcons() {
+	return useContext(IconsContext);
+}
+/**
+* Sizes and colors an icon where no button does it already. Pass the size as `[&_svg]:size-4` so it
+* reaches whatever SVG the host supplies.
+*/
+function IconSlot({ children, className }) {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		className: clsx("inline-flex shrink-0 items-center justify-center", className),
+		children
+	});
+}
 // src/primitives/disclosure.tsx
 /** A row that expands to show more, like "Recalled memory ▸". */
 function Disclosure({ summary, children, className, summaryClassName, panelClassName, indicator = "caret", trailing, ...props }) {
+	const icons = useIcons();
 	return /* @__PURE__ */ jsxs(Disclosure$1, {
 		...props,
 		...className !== void 0 && { className },
@@ -87,15 +155,18 @@ function Disclosure({ summary, children, className, summaryClassName, panelClass
 				slot: "trigger",
 				className: clsx("group/trigger flex max-w-full cursor-pointer items-center gap-1.5 rounded-chat-sm text-left text-chat-muted outline-none", "data-hovered:text-chat-fg data-focus-visible:ring-2 data-focus-visible:ring-chat-focus", summaryClassName),
 				children: [
-					indicator === "chevron" && /* @__PURE__ */ jsx(ChevronRight, {
-						"aria-hidden": true,
-						className: "size-3.5 shrink-0 transition-transform group-aria-expanded/trigger:rotate-90"
+					indicator === "chevron" && /* @__PURE__ */ jsx(IconSlot, {
+						className: "transition-transform group-aria-expanded/trigger:rotate-90 [&_svg]:size-3.5",
+						children: icons.expand
 					}),
 					/* @__PURE__ */ jsx("span", {
 						className: "min-w-0 truncate",
 						children: summary
 					}),
-					indicator === "caret" && /* @__PURE__ */ jsx(Caret, { className: "group-aria-expanded/trigger:rotate-90" }),
+					indicator === "caret" && /* @__PURE__ */ jsx(IconSlot, {
+						className: "transition-transform duration-150 group-aria-expanded/trigger:rotate-90",
+						children: icons.caret
+					}),
 					trailing && /* @__PURE__ */ jsx("span", {
 						className: "ml-auto shrink-0 pl-2",
 						children: trailing
@@ -122,7 +193,7 @@ function MenuSearch({ placeholder, children, value, onChange }) {
 			className: "border-b border-chat-popover-border",
 			children: /* @__PURE__ */ jsx(Input, {
 				placeholder,
-				className: "w-full bg-transparent px-3.5 py-2.5 text-sm text-chat-fg outline-none placeholder:text-chat-subtle"
+				className: "w-full bg-transparent px-3.5 py-2.5 text-(length:--chat-ui-font-size) leading-5 text-chat-fg outline-none placeholder:text-chat-subtle"
 			})
 		}), children]
 	});
@@ -142,11 +213,12 @@ function Menu({ className, ...props }) {
 	});
 }
 function MenuItem({ children, icon, description, detail, shortcut, tone = "default", className, ...props }) {
+	const icons = useIcons();
 	const textValue = props.textValue ?? (typeof children === "string" ? children : void 0);
 	return /* @__PURE__ */ jsx(MenuItem$1, {
 		...props,
 		...textValue !== void 0 && { textValue },
-		className: clsx("group flex min-h-7 cursor-pointer items-center gap-2.5 rounded-chat-sm px-2 py-1 text-sm text-chat-fg outline-none select-none", "data-focused:bg-chat-popover-hover data-open:bg-chat-popover-hover data-disabled:opacity-40", tone === "danger" && "text-chat-danger", className),
+		className: clsx("group flex min-h-7 cursor-pointer items-center gap-2.5 rounded-chat-sm px-2 py-1 text-(length:--chat-ui-font-size) leading-5 text-chat-fg outline-none select-none", "data-focused:bg-chat-popover-hover data-open:bg-chat-popover-hover data-disabled:opacity-40", tone === "danger" && "text-chat-danger", className),
 		children: ({ isSelected, hasSubmenu, selectionMode }) => /* @__PURE__ */ jsxs(Fragment, { children: [
 			icon && /* @__PURE__ */ jsx("span", {
 				className: clsx("flex size-4 shrink-0 items-center [&_svg]:size-4", tone === "danger" ? "text-chat-danger" : "text-chat-fg"),
@@ -160,25 +232,25 @@ function MenuItem({ children, icon, description, detail, shortcut, tone = "defau
 					children
 				}), description && /* @__PURE__ */ jsx(Text, {
 					slot: "description",
-					className: "text-xs text-chat-muted",
+					className: "text-(length:--chat-ui-font-size-sm) leading-4 text-chat-muted",
 					children: description
 				})]
 			}),
 			detail && /* @__PURE__ */ jsx("span", {
-				className: "shrink-0 text-sm text-chat-muted",
+				className: "shrink-0 text-(length:--chat-ui-font-size) leading-5 text-chat-muted",
 				children: detail
 			}),
 			shortcut && /* @__PURE__ */ jsx(Keyboard, {
-				className: "shrink-0 font-chat-sans text-xs text-chat-subtle",
+				className: "shrink-0 font-chat-sans text-(length:--chat-ui-font-size-sm) leading-4 text-chat-subtle",
 				children: shortcut
 			}),
-			selectionMode !== "none" && isSelected && /* @__PURE__ */ jsx(Check, {
-				"aria-hidden": true,
-				className: "size-4 shrink-0 text-chat-check"
+			selectionMode !== "none" && isSelected && /* @__PURE__ */ jsx(IconSlot, {
+				className: "text-chat-check [&_svg]:size-4",
+				children: icons.check
 			}),
-			hasSubmenu && /* @__PURE__ */ jsx(ChevronRight, {
-				"aria-hidden": true,
-				className: "size-4 shrink-0 text-chat-muted"
+			hasSubmenu && /* @__PURE__ */ jsx(IconSlot, {
+				className: "text-chat-muted [&_svg]:size-4",
+				children: icons.submenu
 			})
 		] })
 	});
@@ -188,7 +260,7 @@ function MenuSection({ title, children, ...selection }) {
 		...selection,
 		className: "[&:not(:first-child)]:mt-1",
 		children: [title && /* @__PURE__ */ jsx(Header, {
-			className: "px-2 pt-1.5 pb-1 text-xs text-chat-subtle",
+			className: "px-2 pt-1.5 pb-1 text-(length:--chat-ui-font-size-sm) leading-4 text-chat-subtle",
 			children: title
 		}), children]
 	});
@@ -199,7 +271,7 @@ function MenuSeparator() {
 /** Explanatory text inside a menu, above or below the items. Not focusable. */
 function MenuNote({ children, className }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: clsx("px-2 py-1.5 text-sm leading-snug text-chat-muted", className),
+		className: clsx("px-2 py-1.5 text-(length:--chat-ui-font-size) leading-snug text-chat-muted", className),
 		children
 	});
 }
@@ -260,7 +332,7 @@ function Modal({ isOpen, onOpenChange, title, children, className, ...props }) {
 		isOpen,
 		onOpenChange,
 		isDismissable: true,
-		className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4 data-entering:animate-chat-fade-in data-exiting:animate-chat-fade-out",
+		className: "fixed inset-0 z-50 flex items-center justify-center bg-(--chat-backdrop) p-4 data-entering:animate-chat-fade-in data-exiting:animate-chat-fade-out",
 		children: /* @__PURE__ */ jsx(Modal$1, {
 			className: clsx("flex max-h-[85dvh] w-full max-w-2xl flex-col rounded-chat-lg border border-chat-popover-border bg-chat-popover font-chat-sans text-chat-fg shadow-chat-popover", "data-entering:animate-chat-in data-exiting:animate-chat-out", className),
 			children: /* @__PURE__ */ jsxs(Dialog, {
@@ -281,7 +353,7 @@ function Drawer({ isOpen, onOpenChange, side = "left", children, className, ...p
 		isOpen,
 		onOpenChange,
 		isDismissable: true,
-		className: "fixed inset-0 z-40 bg-black/50 data-entering:animate-chat-fade-in data-exiting:animate-chat-fade-out",
+		className: "fixed inset-0 z-40 bg-(--chat-backdrop) data-entering:animate-chat-fade-in data-exiting:animate-chat-fade-out",
 		children: /* @__PURE__ */ jsx(Modal$1, {
 			className: clsx("fixed inset-y-0 w-[min(20rem,85vw)] bg-chat-sidebar text-chat-fg shadow-chat-popover outline-none", side === "left" ? "left-0 data-entering:animate-chat-drawer-in data-exiting:animate-chat-drawer-out" : "right-0 data-entering:animate-chat-drawer-in-right data-exiting:animate-chat-drawer-out-right", className),
 			children: /* @__PURE__ */ jsx(Dialog, {
@@ -303,7 +375,7 @@ function Panel({ title, actions, footer, children, variant = "card", className,
 		className: clsx("flex min-h-0 min-w-0 flex-col overflow-hidden bg-chat-bg font-chat-sans text-chat-fg", variant === "card" && "rounded-chat-md border border-chat-border", className),
 		children: [
 			(title || actions) && /* @__PURE__ */ jsxs("header", {
-				className: "flex h-10 shrink-0 items-center gap-2 border-b border-chat-divider px-3 text-sm",
+				className: "flex h-10 shrink-0 items-center gap-2 border-b border-chat-divider px-3 text-(length:--chat-ui-font-size) leading-5",
 				children: [/* @__PURE__ */ jsx("div", {
 					className: "min-w-0 flex-1 truncate font-medium",
 					children: title
@@ -460,10 +532,10 @@ function CodeBlock({ code, language, label = language, variant = "plain", classN
 		style: themeBackground ? result.vars : void 0,
 		className: clsx(variant === "boxed" && "my-4 rounded-chat-md border border-chat-code-border bg-chat-code-bg px-4 py-3.5", className),
 		children: [label && /* @__PURE__ */ jsx("div", {
-			className: "mb-3 font-chat-sans text-xs text-chat-subtle",
+			className: "mb-3 font-chat-sans text-(length:--chat-ui-font-size-sm) leading-4 text-chat-subtle",
 			children: label
 		}), /* @__PURE__ */ jsx("pre", {
-			className: clsx("overflow-auto font-chat-mono text-[0.8125rem] leading-[1.75] whitespace-pre text-chat-fg", variant === "plain" && "max-h-56", "[scrollbar-color:var(--chat-border-strong)_transparent] [scrollbar-width:thin]"),
+			className: clsx("overflow-auto font-chat-mono text-(length:--chat-code-font-size) leading-[1.75] whitespace-pre text-chat-fg", variant === "plain" && "max-h-56", "[scrollbar-color:var(--chat-border-strong)_transparent] [scrollbar-width:thin]"),
 			children: /* @__PURE__ */ jsxs("code", { children: [highlighted ? highlighted.map((line, i) => /* @__PURE__ */ jsxs(Fragment$1, { children: [i > 0 && "\n", line.map((token, j) => /* @__PURE__ */ jsx("span", {
 				className: "chat-code-token",
 				style: token.htmlStyle,
@@ -472,13 +544,130 @@ function CodeBlock({ code, language, label = language, variant = "plain", classN
 		})]
 	});
 }
+// src/primitives/labels.tsx
+const plural = (count, one, many) => count === 1 ? one : many(count);
+/** The English strings. */
+const defaultLabels = {
+	thinking: "Thinking…",
+	thought: "Thought",
+	thoughtFor: (duration) => `Thought for ${duration}`,
+	waitingForYou: " · waiting for you",
+	usedTool: (name) => `used ${name}`,
+	joinSummaries: (phrases) => {
+		const text = phrases.join(", ");
+		return text.charAt(0).toUpperCase() + text.slice(1);
+	},
+	duration: (seconds) => seconds < 60 ? `${seconds}s` : `${Math.floor(seconds / 60)}m ${seconds % 60}s`,
+	ranCommandLabel: "Ran a command",
+	ranCommands: (count) => plural(count, "ran a command", (n) => `ran ${n} commands`),
+	searchedWebLabel: "Searched the web",
+	readPageLabel: "Read page",
+	readPages: (count) => plural(count, "read a page", (n) => `read ${n} pages`),
+	searchedWeb: (count) => plural(count, "searched the web", (n) => `searched the web ${n} times`),
+	recalledMemoryLabel: "Recalled memory",
+	recalledMemory: () => "recalled memory",
+	output: "Output",
+	noOutput: "(no output)",
+	noResults: "No results",
+	reasoningHidden: "The model's reasoning is not shown.",
+	allowTool: (name) => `Allow ${name}?`,
+	allowAction: (label) => /* @__PURE__ */ jsxs(Fragment, { children: [
+		"Allow ",
+		label,
+		"?"
+	] }),
+	allow: "Allow",
+	deny: "Deny",
+	sidebar: "Sidebar",
+	closeSidebar: "Close sidebar",
+	openSidebar: "Open sidebar",
+	expandSidebar: "Expand sidebar",
+	collapseSidebar: "Collapse sidebar",
+	context: "Context",
+	contextUsed: "Context used",
+	percentUsed: (percent) => `${percent}% used`,
+	freeSpace: "Free space",
+	tokenCount: (count) => `${count} tokens`,
+	replyPlaceholder: "Reply…",
+	replyDirectly: "Or reply directly…",
+	message: "Message",
+	stop: "Stop",
+	send: "Send",
+	addFiles: "Add files and more",
+	attachments: "Attachments",
+	editPastedText: "Edit pasted text",
+	viewPastedText: "View pasted text",
+	removeAttachment: (name) => `Remove ${name}`,
+	pastedText: "Pasted text",
+	pasted: "Pasted",
+	failed: "Failed",
+	file: "File",
+	uploadFailed: "Upload failed",
+	cancel: "Cancel",
+	close: "Close",
+	save: "Save",
+	chats: "Chats",
+	running: "Running",
+	unread: "Unread",
+	moreOptionsFor: (title) => `More options for ${title}`,
+	new: "New",
+	viewAll: "View all",
+	chatActions: "Chat actions",
+	pin: "Pin",
+	unpin: "Unpin",
+	rename: "Rename",
+	addToProject: "Add to project",
+	searchProjects: "Search or create a project",
+	projects: "Projects",
+	newProject: "New project",
+	shareChat: "Share chat",
+	delete: "Delete",
+	justNow: "just now",
+	copy: "Copy",
+	copied: "Copied",
+	retry: "Retry",
+	edit: "Edit",
+	readAloud: "Read aloud",
+	goodResponse: "Good response",
+	badResponse: "Bad response",
+	somethingWentWrong: "Something went wrong.",
+	conversation: "Conversation",
+	scrollToBottom: "Scroll to bottom",
+	showMore: "Show more",
+	showLess: "Show less",
+	model: "Model",
+	modelButton: (label) => `Model: ${label}`,
+	effort: "Effort",
+	effortNote: "Higher effort means more thorough responses, but takes longer and uses your limits faster.",
+	recommended: "Recommended",
+	moreModels: "More models",
+	widget: "Widget",
+	drawingWidget: "Drawing"
+};
+const LabelsContext = createContext(defaultLabels);
+/** Merges `labels` over the labels of the enclosing provider (or the defaults). */
+function LabelsProvider({ labels, children }) {
+	const parent = useLabels();
+	const merged = useMemo(() => labels ? {
+		...parent,
+		...labels
+	} : parent, [parent, labels]);
+	return /* @__PURE__ */ jsx(LabelsContext.Provider, {
+		value: merged,
+		children
+	});
+}
+/** The active UI strings: the enclosing `ChatTheme`'s `labels` over the English defaults. */
+function useLabels() {
+	return useContext(LabelsContext);
+}
 // src/primitives/chat-theme.tsx
 /**
 * Applies a chat theme to part of a page. Menus, tooltips and dialogs opened inside render into this
 * element instead of `<body>`, so they get the same theme. An app themed as a whole (variables on
 * `:root`) does not need it for colors, but still uses it for `codeThemes` and `motion`.
 */
-function ChatTheme({ theme, codeThemes, motion, children, className }) {
+function ChatTheme({ theme, codeThemes, motion, labels, icons, children, className }) {
 	const portal = useRef(null);
 	const getContainer = useCallback(() => portal.current, []);
 	return /* @__PURE__ */ jsxs("div", {
@@ -488,9 +677,15 @@ function ChatTheme({ theme, codeThemes, motion, children, className }) {
 		children: [/* @__PURE__ */ jsx(AppearanceProvider, {
 			codeThemes,
 			motion,
-			children: /* @__PURE__ */ jsx(UNSAFE_PortalProvider, {
-				getContainer,
-				children
+			children: /* @__PURE__ */ jsx(LabelsProvider, {
+				labels,
+				children: /* @__PURE__ */ jsx(IconsProvider, {
+					icons,
+					children: /* @__PURE__ */ jsx(UNSAFE_PortalProvider, {
+						getContainer,
+						children
+					})
+				})
 			})
 		}), /* @__PURE__ */ jsx("div", { ref: portal })]
 	});
@@ -1012,6 +1207,700 @@ const SidebarContext = createContext({
 	dismiss: () => {}
 });
 const useSidebar = () => useContext(SidebarContext);
+// src/components/widget-frame.tsx
+const WidgetHostContext = createContext({});
+/** Sets what widgets below may do. ChatView and ChatTranscript set it from their `widgets` prop. */
+function WidgetHostProvider({ host, children }) {
+	return /* @__PURE__ */ jsx(WidgetHostContext.Provider, {
+		value: host,
+		children
+	});
+}
+function useWidgetHost() {
+	return useContext(WidgetHostContext);
+}
+/** The tallest a widget may grow, in px. */
+const WIDGET_MAX_HEIGHT = 2e3;
+const PROTOCOL_VERSION = "2026-01-26";
+const THEME_VARS = [
+	"bg",
+	"fg",
+	"muted",
+	"subtle",
+	"surface",
+	"raised",
+	"hover",
+	"selected",
+	"border",
+	"border-strong",
+	"divider",
+	"accent",
+	"accent-fg",
+	"check",
+	"warning",
+	"danger",
+	"code-bg",
+	"font-sans",
+	"font-serif",
+	"font-mono",
+	"radius-sm",
+	"radius-md",
+	"radius-lg",
+	"ui-font-size",
+	"ui-font-size-sm",
+	"message-font-size"
+];
+const ORIGIN = /^(https?|wss?):\/\/(\*\.)?[a-z0-9-]+(\.[a-z0-9-]+)*(:\d{1,5})?$/;
+function origins(list) {
+	return (list ?? []).map((d) => d.trim().toLowerCase().replace(/\/$/, "")).filter((d) => ORIGIN.test(d));
+}
+/** Whether `origin` is covered by `allowed`, which may be a wildcard like "https://*.example.com". */
+function covers(allowed, origin) {
+	if (allowed === origin) return true;
+	const wild = /^([a-z]+:\/\/)\*\.(.+)$/.exec(allowed);
+	return !!wild && origin.startsWith(wild[1]) && origin.slice(wild[1].length).endsWith("." + wild[2]) && !origin.includes("*");
+}
+/** The part of a widget's request that the host allows. */
+function intersectAllow(request, allow = {}) {
+	const keep = (asked, max) => origins(asked).filter((o) => origins(max).some((m) => covers(m, o)));
+	return {
+		resourceDomains: keep(request.resourceDomains, allow.resourceDomains),
+		connectDomains: keep(request.connectDomains, allow.connectDomains)
+	};
+}
+/** The Content-Security-Policy of a widget's document. */
+function widgetCsp(allow = {}) {
+	const res = origins(allow.resourceDomains).join(" ");
+	const conn = origins(allow.connectDomains).join(" ");
+	const with_ = (base) => res ? `${base} ${res}` : base;
+	return [
+		"default-src 'none'",
+		with_("script-src 'unsafe-inline'"),
+		with_("style-src 'unsafe-inline'"),
+		with_("img-src data: blob:"),
+		with_("font-src data:"),
+		with_("media-src data: blob:"),
+		`connect-src ${conn || "'none'"}`,
+		"frame-src 'none'",
+		"base-uri 'none'",
+		"form-action 'none'"
+	].join("; ");
+}
+/** Runs inside a fragment's frame: renders the markup, reports its height, offers sendPrompt and openLink. */
+const BOOT = `(() => {
+  const root = document.getElementById("widget");
+  let id = 0;
+  const post = (method, params, request) => parent.postMessage(request ? { jsonrpc: "2.0", id: ++id, method, params } : { jsonrpc: "2.0", method, params }, "*");
+  window.sendPrompt = (text) => post("ui/message", { role: "user", content: [{ type: "text", text: String(text) }] }, true);
+  window.openLink = (url) => post("ui/open-link", { url: String(url) }, true);
+  let done = false;
+  const runScripts = async () => {
+    for (const old of [...root.querySelectorAll("script")]) {
+      const s = document.createElement("script");
+      for (const a of old.attributes) s.setAttribute(a.name, a.value);
+      s.textContent = old.textContent;
+      const loaded = s.src ? new Promise((ok) => { s.onload = s.onerror = ok; }) : null;
+      old.replaceWith(s);
+      if (loaded) await loaded;
+    }
+  };
+  const theme = (ctx) => {
+    const vars = (ctx && ctx.styles && ctx.styles.variables) || {};
+    for (const k in vars) if (k.startsWith("--chat-")) document.documentElement.style.setProperty(k, vars[k]);
+    if (ctx && ctx.theme) document.documentElement.style.colorScheme = ctx.theme;
+  };
+  addEventListener("message", (e) => {
+    if (e.source !== parent) return;
+    const m = e.data || {};
+    if (m.method === "ui/notifications/host-context-changed") return theme(m.params);
+    const code = m.params && m.params.arguments && m.params.arguments.widget_code;
+    if (typeof code !== "string" || done) return;
+    if (m.method === "ui/notifications/tool-input-partial") root.innerHTML = code;
+    if (m.method === "ui/notifications/tool-input") { done = true; root.innerHTML = code; runScripts(); }
+  });
+  let last = -1;
+  new ResizeObserver(() => {
+    const h = Math.ceil(root.getBoundingClientRect().height);
+    if (h !== last) { last = h; post("ui/notifications/size-changed", { height: h }); }
+  }).observe(root);
+  const seen = new Set();
+  const report = (text) => { if (!seen.has(text) && seen.size < 10) { seen.add(text); post("notifications/message", { level: "error", logger: "widget", data: text }); } };
+  addEventListener("error", (e) => report(String(e.message) + (e.lineno ? " (line " + e.lineno + ")" : "")));
+  addEventListener("unhandledrejection", (e) => report("Unhandled promise rejection: " + String(e.reason && e.reason.message || e.reason)));
+  post("ui/notifications/initialized", {});
+})();`;
+function fragmentDoc(csp, theme) {
+	return `<!doctype html><html><head><meta charset="utf-8">
+<meta http-equiv="Content-Security-Policy" content="${csp}">
+<style>
+:root { ${Object.entries(theme.vars).map(([k, v]) => `${k}: ${v};`).join(" ")} color-scheme: ${theme.scheme}; }
+html, body { margin: 0; background: transparent; color: var(--chat-fg); font-family: var(--chat-font-sans);
+  font-size: var(--chat-ui-font-size); line-height: 1.5; }
+#widget { display: flow-root; }
+*, *::before, *::after { box-sizing: border-box; }
+button, input, select, textarea { font: inherit; color: inherit; }
+</style></head><body><div id="widget"></div><script>${BOOT}<\/script></body></html>`;
+}
+/** An app's own document with the host's CSP put first in its head (a second policy can only narrow it). */
+function appDoc(csp, html) {
+	const meta = `<meta http-equiv="Content-Security-Policy" content="${csp}">`;
+	const head = /<head(\s[^>]*)?>/i.exec(html);
+	if (head) return html.slice(0, head.index + head[0].length) + meta + html.slice(head.index + head[0].length);
+	const root = /<html(\s[^>]*)?>/i.exec(html);
+	if (root) return html.slice(0, root.index + root[0].length) + `<head>${meta}</head>` + html.slice(root.index + root[0].length);
+	return `<!doctype html><html><head>${meta}</head><body>${html}</body></html>`;
+}
+function readTheme(el) {
+	const style = getComputedStyle(el);
+	return {
+		vars: Object.fromEntries(THEME_VARS.map((v) => [`--chat-${v}`, style.getPropertyValue(`--chat-${v}`).trim()])),
+		scheme: /light/.test(style.colorScheme) && !/dark/.test(style.colorScheme) ? "light" : "dark"
+	};
+}
+/** Calls `onChange` when anything above `el` changes attributes (a theme switch) or the OS scheme flips. */
+function watchTheme(el, onChange) {
+	const observer = new MutationObserver(onChange);
+	for (let node = el; node; node = node.parentElement) observer.observe(node, {
+		attributes: true,
+		attributeFilter: [
+			"class",
+			"style",
+			"data-chat-theme"
+		]
+	});
+	const media = typeof matchMedia === "function" ? matchMedia("(prefers-color-scheme: dark)") : void 0;
+	media?.addEventListener?.("change", onChange);
+	return () => {
+		observer.disconnect();
+		media?.removeEventListener?.("change", onChange);
+	};
+}
+function WidgetFrame({ html, document: isDocument = false, streaming = false, title, loadingMessages, allow, csp: request, onPrompt, onOpenLink, onCallTool, onError, toolInput, toolResult, cancelled, className }) {
+	const labels = useLabels();
+	const frame = useRef(null);
+	const host = useRef(null);
+	const [ready, setReady] = useState(false);
+	const [height, setHeight] = useState(0);
+	const [initial, setInitial] = useState();
+	const theme = useRef(void 0);
+	const [tick, setTick] = useState(0);
+	const effective = request ? intersectAllow(request, allow) : isDocument ? {} : allow ?? {};
+	const policy = widgetCsp(effective);
+	const doc = useMemo(() => initial && (isDocument ? appDoc(policy, html) : fragmentDoc(policy, initial)), [
+		initial,
+		policy,
+		isDocument,
+		isDocument && html
+	]);
+	const latest = useRef({
+		onPrompt,
+		onOpenLink,
+		onCallTool,
+		onError,
+		policy,
+		effective
+	});
+	latest.current = {
+		onPrompt,
+		onOpenLink,
+		onCallTool,
+		onError,
+		policy,
+		effective
+	};
+	const send = (message) => frame.current?.contentWindow?.postMessage({
+		jsonrpc: "2.0",
+		...message
+	}, "*");
+	const context = () => ({
+		theme: theme.current?.scheme,
+		styles: { variables: theme.current?.vars },
+		displayMode: "inline",
+		availableDisplayModes: ["inline"],
+		containerDimensions: {
+			maxHeight: WIDGET_MAX_HEIGHT,
+			...host.current && { width: host.current.clientWidth }
+		},
+		platform: "web",
+		...labels.locale && { locale: labels.locale }
+	});
+	useEffect(() => {
+		const el = host.current;
+		theme.current = readTheme(el);
+		setInitial(theme.current);
+		return watchTheme(el, () => {
+			const next = readTheme(el);
+			if (JSON.stringify(next) === JSON.stringify(theme.current)) return;
+			theme.current = next;
+			send({
+				method: "ui/notifications/host-context-changed",
+				params: {
+					theme: next.scheme,
+					styles: { variables: next.vars }
+				}
+			});
+		});
+	}, []);
+	useEffect(() => setReady(false), [doc]);
+	useEffect(() => {
+		const reply = (id, result) => id !== void 0 && send({
+			id,
+			result
+		});
+		const fail = (id, code, message) => id !== void 0 && send({
+			id,
+			error: {
+				code,
+				message
+			}
+		});
+		const onMessage = async (e) => {
+			if (!frame.current || e.source !== frame.current.contentWindow) return;
+			const m = e.data ?? {};
+			if (typeof m !== "object" || typeof m.method !== "string") return;
+			const { onPrompt, onOpenLink, onCallTool, effective } = latest.current;
+			switch (m.method) {
+				case "ui/initialize": return reply(m.id, {
+					protocolVersion: PROTOCOL_VERSION,
+					hostInfo: {
+						name: "agentic-ui-kit",
+						version: "1"
+					},
+					hostCapabilities: {
+						...onOpenLink && { openLinks: {} },
+						...onCallTool && { serverTools: {} },
+						logging: {},
+						sandbox: { csp: effective }
+					},
+					hostContext: context()
+				});
+				case "ui/notifications/initialized": return setReady(true);
+				case "ui/notifications/size-changed": return setHeight(Math.min(Math.max(0, Number(m.params?.height) || 0), WIDGET_MAX_HEIGHT));
+				case "ui/message": {
+					const text = (Array.isArray(m.params?.content) ? m.params.content : []).find((c) => c?.type === "text")?.text;
+					if (!onPrompt) return fail(m.id, -32e3, "Sending messages is off");
+					if (typeof text !== "string" || !text.trim()) return fail(m.id, -32602, "Empty message");
+					onPrompt(text.slice(0, 4e3));
+					return reply(m.id, {});
+				}
+				case "ui/open-link": {
+					const url = String(m.params?.url ?? "");
+					if (!onOpenLink) return fail(m.id, -32e3, "Opening links is off");
+					if (!/^https?:\/\//i.test(url)) return fail(m.id, -32602, "Only http(s) links");
+					onOpenLink(url);
+					return reply(m.id, {});
+				}
+				case "tools/call": {
+					if (!onCallTool) return fail(m.id, -32e3, "Calling tools is off");
+					const name = String(m.params?.name ?? "");
+					const args = m.params?.arguments ?? {};
+					try {
+						return reply(m.id, await onCallTool(name, args));
+					} catch (error) {
+						return fail(m.id, -32e3, error instanceof Error ? error.message : String(error));
+					}
+				}
+				case "ping": return reply(m.id, {});
+				case "notifications/message": {
+					const data = typeof m.params?.data === "string" ? m.params.data : JSON.stringify(m.params?.data);
+					if (m.params?.level === "error" && data) latest.current.onError?.(data.slice(0, 1e3));
+					return;
+				}
+				default: return fail(m.id, -32601, "Method not found");
+			}
+		};
+		window.addEventListener("message", onMessage);
+		return () => window.removeEventListener("message", onMessage);
+	}, []);
+	useEffect(() => {
+		if (!ready || isDocument) return;
+		send({
+			method: streaming ? "ui/notifications/tool-input-partial" : "ui/notifications/tool-input",
+			params: { arguments: { widget_code: html } }
+		});
+	}, [
+		ready,
+		isDocument,
+		html,
+		streaming
+	]);
+	const inputKey = isDocument && toolInput !== void 0 ? JSON.stringify(toolInput) : void 0;
+	useEffect(() => {
+		if (!ready || inputKey === void 0) return;
+		send({
+			method: streaming ? "ui/notifications/tool-input-partial" : "ui/notifications/tool-input",
+			params: { arguments: JSON.parse(inputKey) }
+		});
+	}, [
+		ready,
+		inputKey,
+		streaming
+	]);
+	useEffect(() => {
+		if (ready && isDocument && toolResult !== void 0) send({
+			method: "ui/notifications/tool-result",
+			params: toolResult
+		});
+	}, [
+		ready,
+		isDocument,
+		toolResult
+	]);
+	useEffect(() => {
+		if (ready && isDocument && cancelled !== void 0) send({
+			method: "ui/notifications/tool-cancelled",
+			params: { reason: cancelled }
+		});
+	}, [
+		ready,
+		isDocument,
+		cancelled
+	]);
+	const lines = loadingMessages?.length ? loadingMessages : [labels.drawingWidget];
+	useEffect(() => {
+		if (!streaming || lines.length < 2) return;
+		const id = setInterval(() => setTick((t) => t + 1), 1800);
+		return () => clearInterval(id);
+	}, [streaming, lines.length]);
+	return /* @__PURE__ */ jsxs("figure", {
+		ref: host,
+		className: className ?? "my-2",
+		"aria-label": title ?? labels.widget,
+		"aria-busy": streaming || void 0,
+		children: [streaming && /* @__PURE__ */ jsx("div", {
+			className: "mb-2 animate-pulse font-chat-sans text-(length:--chat-ui-font-size) text-chat-muted motion-reduce:animate-none",
+			children: lines[tick % lines.length]
+		}), doc && /* @__PURE__ */ jsx("iframe", {
+			ref: frame,
+			title: title ?? labels.widget,
+			sandbox: "allow-scripts",
+			srcDoc: doc,
+			style: {
+				height: height || (streaming ? 120 : 0),
+				transition: "height 150ms ease-out"
+			},
+			className: "block w-full border-0 bg-transparent"
+		})]
+	});
+}
+/** Pulls the host's abilities from context into frame props. */
+function useHostProps(partId) {
+	const { allow, onPrompt, onOpenLink, onCallTool, onWidgetError } = useWidgetHost();
+	return {
+		...allow && { allow },
+		...onPrompt && { onPrompt },
+		...onOpenLink && { onOpenLink },
+		...onCallTool && { onCallTool },
+		...onWidgetError && { onError: (message) => onWidgetError({
+			partId,
+			message
+		}) }
+	};
+}
+/** The default look of a `widget` part: inline html, or an app UI the host reads from `resourceUri`. */
+function WidgetPartView({ part }) {
+	const host = useWidgetHost();
+	const props = useHostProps(part.id);
+	const [resource, setResource] = useState();
+	const uri = part.html === void 0 ? part.resourceUri : void 0;
+	useEffect(() => {
+		if (!uri || !host.readResource) return;
+		let live = true;
+		host.readResource(uri).then((r) => live && setResource(r), (e) => console.warn("widget:", e));
+		return () => {
+			live = false;
+		};
+	}, [uri, host.readResource]);
+	if (part.html !== void 0) return /* @__PURE__ */ jsx(WidgetFrame, {
+		html: part.html,
+		streaming: part.status === "streaming",
+		...part.title && { title: part.title },
+		...props
+	});
+	if (!resource) return null;
+	return /* @__PURE__ */ jsx(WidgetFrame, {
+		document: true,
+		html: resource.html,
+		...resource.csp && { csp: resource.csp },
+		...part.title && { title: part.title },
+		...props
+	});
+}
+const str = (v) => typeof v === "string" ? v : void 0;
+/** Reads the fields of the suggested `visualizeTool` (widget_code, title, loading_messages). */
+function readVisualizeInput(input) {
+	const i = input ?? {};
+	const loading = Array.isArray(i.loading_messages) ? i.loading_messages.filter((l) => typeof l === "string" && l !== "") : [];
+	return {
+		...str(i.widget_code) !== void 0 && { html: str(i.widget_code) },
+		...str(i.title) && { title: str(i.title) },
+		...loading.length && { loadingMessages: loading.slice(0, 4) }
+	};
+}
+/**
+* A tool view that draws a call's (streaming) input in a WidgetFrame, for whatever tool your harness uses
+* to write HTML. Register it under your tool's name: `{ show_widget: widgetToolView() }`. `read` maps your
+* tool's input (possibly cut short while it streams) to the frame's fields; the default reads the suggested
+* `visualizeTool`'s fields.
+*/
+function widgetToolView(read = readVisualizeInput) {
+	function WidgetToolBlock({ part }) {
+		const props = useHostProps(part.id);
+		const { html = "", title, loadingMessages } = read(part.input ?? part.partialInput);
+		if (part.status === "error" && !html) return null;
+		return /* @__PURE__ */ jsx(WidgetFrame, {
+			html,
+			streaming: part.status === "streaming" || part.status === "input",
+			...title && { title },
+			...loadingMessages?.length && { loadingMessages },
+			...props
+		});
+	}
+	return { Block: WidgetToolBlock };
+}
+/** The default `onOpenLink` of ChatView and ChatTranscript: a new tab with no opener. */
+function openInNewTab(url) {
+	window.open(url, "_blank", "noopener,noreferrer");
+}
+// src/components/ui-tree.tsx
+const RegistryContext = createContext(void 0);
+/**
+* The components the model may use: in ```ui blocks of its replies (see `uiMarkupGuide` in
+* agentic-ui-kit/core) and in tool calls drawn with `uiTreeToolView`. `persist` keeps each widget's state.
+*/
+function UiComponentsProvider({ components, persist, markup = "ui", children }) {
+	const value = useMemo(() => ({
+		components: new Map(components.map((c) => [c.name, c])),
+		persist,
+		markup
+	}), [
+		components,
+		persist,
+		markup
+	]);
+	return /* @__PURE__ */ jsx(RegistryContext.Provider, {
+		value,
+		children
+	});
+}
+const TreeContext = createContext({
+	state: {},
+	run: () => {},
+	streaming: false
+});
+/** Inside a registered component: runs an action from its props, e.g. `run(props.onPress)`. Bad actions do nothing. */
+function useUiAction() {
+	const { run } = useContext(TreeContext);
+	return useCallback((action) => matchesSchema(uiActionSchema, action) && run(action), [run]);
+}
+/** Inside a registered component: the widget's state and a setter, for inputs that write to it. */
+function useUiState() {
+	const { state, run } = useContext(TreeContext);
+	return [state, useCallback((key, value) => run({
+		action: "set",
+		key,
+		value
+	}), [run])];
+}
+/** Replaces `{ "$state": key }` anywhere in the props with the state's value. */
+function resolve(value, state) {
+	if (isStateRef(value)) return state[value.$state];
+	if (Array.isArray(value)) return value.map((v) => resolve(v, state));
+	if (typeof value === "object" && value !== null) {
+		const out = {};
+		for (const [k, v] of Object.entries(value)) {
+			const r = resolve(v, state);
+			if (r !== void 0) out[k] = r;
+		}
+		return out;
+	}
+	return value;
+}
+/** A component that throws renders nothing instead of taking the message down. */
+var Contain = class extends Component {
+	state = { failed: false };
+	static getDerivedStateFromError() {
+		return { failed: true };
+	}
+	componentDidCatch(error) {
+		console.warn("render_ui:", error);
+	}
+	render() {
+		return this.state.failed ? null : this.props.children;
+	}
+};
+function Node({ node, registry }) {
+	const { state } = useContext(TreeContext);
+	if (Array.isArray(node)) return node.map((child, i) => /* @__PURE__ */ jsx(Node, {
+		node: child,
+		registry
+	}, i));
+	if (typeof node !== "object" || node === null) return null;
+	const { component, props = {}, children } = node;
+	const spec = typeof component === "string" ? registry.components.get(component) : void 0;
+	if (!spec || typeof props !== "object") return null;
+	const resolved = resolve(props, state);
+	if (!matchesSchema(spec.props ?? { type: "object" }, resolved)) return null;
+	const Render = spec.render;
+	const kids = spec.children && Array.isArray(children) ? children.map((child, i) => /* @__PURE__ */ jsx(Node, {
+		node: child,
+		registry
+	}, i)) : void 0;
+	return /* @__PURE__ */ jsx(Contain, { children: /* @__PURE__ */ jsx(Render, {
+		...resolved,
+		children: kids
+	}) });
+}
+/** Draws a `render_ui` tree with the registered components. Unknown components and bad props render nothing. */
+function UiTree({ id, root, state: initial, streaming = false }) {
+	const registry = useContext(RegistryContext);
+	const host = useWidgetHost();
+	const [local, setLocal] = useState(() => registry?.persist?.load(id) ?? {});
+	const changed = useRef(false);
+	const latest = useRef(host);
+	latest.current = host;
+	useEffect(() => {
+		if (changed.current) registry?.persist?.save(id, local);
+	}, [
+		id,
+		local,
+		registry
+	]);
+	const run = useCallback((action) => {
+		switch (action.action) {
+			case "set":
+				changed.current = true;
+				return setLocal((s) => ({
+					...s,
+					[action.key]: action.value
+				}));
+			case "send": return latest.current.onPrompt?.(action.text);
+			case "open": return /^https?:\/\//i.test(action.url) && latest.current.onOpenLink?.(action.url);
+			case "copy":
+				navigator.clipboard?.writeText(action.text).catch(() => {});
+				return;
+		}
+	}, []);
+	const state = useMemo(() => ({
+		...typeof initial === "object" && initial ? initial : {},
+		...local
+	}), [initial, local]);
+	const context = useMemo(() => ({
+		state,
+		run,
+		streaming
+	}), [
+		state,
+		run,
+		streaming
+	]);
+	if (!registry) return null;
+	return /* @__PURE__ */ jsx(TreeContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "chat-ui-tree my-2",
+			"aria-busy": streaming || void 0,
+			children: /* @__PURE__ */ jsx(Node, {
+				node: root,
+				registry
+			})
+		})
+	});
+}
+/** The fence language drawn as UI here, or undefined outside a `UiComponentsProvider`. */
+function useUiMarkupLanguage() {
+	const registry = useContext(RegistryContext);
+	return registry && registry.markup !== false ? registry.markup : void 0;
+}
+/** A ```ui block from a reply, drawn with the registered components. Safe on a block that is still streaming. */
+function UiMarkupBlock({ id, source, streaming = false }) {
+	const { nodes, state } = useMemo(() => parseUiMarkup(source), [source]);
+	return /* @__PURE__ */ jsx(UiTree, {
+		id,
+		root: nodes,
+		state,
+		streaming
+	});
+}
+/**
+* A tool view that draws a call's (streaming) JSX markup with your registered components, for whatever tool
+* your harness uses; the suggested one is core's `showUiTool`. Register it under your tool's name:
+* `{ show_ui: uiMarkupToolView() }`. `read` maps your tool's input to the markup; the default reads `markup`.
+*/
+function uiMarkupToolView(read = (input) => {
+	const markup = input?.markup;
+	return typeof markup === "string" ? markup : void 0;
+}) {
+	function UiMarkupToolBlock({ part }) {
+		const markup = read(part.input ?? part.partialInput);
+		if (!markup) return null;
+		return /* @__PURE__ */ jsx(UiMarkupBlock, {
+			id: part.id,
+			source: markup,
+			streaming: part.status === "streaming" || part.status === "input"
+		});
+	}
+	return { Block: UiMarkupToolBlock };
+}
+/** Reads `{ root, state }`. Models sometimes send `root` or `state` as a JSON string; those are parsed too. */
+function readTreeInput(input) {
+	const i = input ?? {};
+	const unwrap = (v) => typeof v === "string" ? salvageJson(v).value : v;
+	const root = unwrap(i.root);
+	const state = unwrap(i.state);
+	return {
+		...root !== void 0 && { root },
+		...typeof state === "object" && state !== null && { state }
+	};
+}
+/**
+* A tool view that draws a call's (streaming) input as a tree of your registered components, for whatever
+* tool your harness uses. Register it under your tool's name: `{ render_ui: uiTreeToolView() }`. `read` maps
+* your tool's input to the tree and its starting state; the default reads `{ root, state }`, the shape of
+* the suggested `renderUiTool`.
+*/
+function uiTreeToolView(read = readTreeInput) {
+	function UiTreeToolBlock({ part }) {
+		const { root, state } = read(part.input ?? part.partialInput);
+		if (!root) return null;
+		const ok = typeof state === "object" && state !== null;
+		return /* @__PURE__ */ jsx(UiTree, {
+			id: part.id,
+			root,
+			...ok && { state },
+			streaming: part.status === "streaming" || part.status === "input"
+		});
+	}
+	return { Block: UiTreeToolBlock };
+}
+/**
+* The escape hatch: raw HTML or SVG in a sandboxed WidgetFrame, as a node of the tree. Register it only if
+* the model may write HTML; it gets what the chat's `widgets` host allows.
+*/
+const htmlComponent = {
+	name: "Html",
+	description: "Raw HTML or <svg> in a sandboxed frame, only for what the other components cannot show. Follow the visual design guide.",
+	props: {
+		type: "object",
+		properties: {
+			html: { type: "string" },
+			title: { type: "string" }
+		},
+		required: ["html"]
+	},
+	render: function Html({ html, title }) {
+		const { streaming } = useContext(TreeContext);
+		const { allow, onPrompt, onOpenLink } = useWidgetHost();
+		return /* @__PURE__ */ jsx(WidgetFrame, {
+			html,
+			streaming,
+			...title && { title },
+			...allow && { allow },
+			...onPrompt && { onPrompt },
+			...onOpenLink && { onOpenLink }
+		});
+	}
+};
 // src/components/word-fade.ts
 const OPAQUE_TAGS = /* @__PURE__ */ new Set([
 	"code",
@@ -1078,45 +1967,96 @@ function textOf(node) {
 	if (node.type === "text") return node.value ?? "";
 	return (node.children ?? []).map(textOf).join("");
 }
+const BlockContext = createContext(void 0);
+function Code({ node, className, children }) {
+	const hast = node;
+	const language = /language-([\w+#-]+)/.exec(className ?? "")?.[1];
+	const ui = useUiMarkupLanguage();
+	const block = useContext(BlockContext);
+	const multiline = hast?.position && hast.position.start.line !== hast.position.end.line;
+	if (!language && !multiline) return /* @__PURE__ */ jsx("code", {
+		"data-chat-inline-code": true,
+		children
+	});
+	const code = textOf(hast).replace(/\n$/, "");
+	if (block && ui && language === ui) return /* @__PURE__ */ jsx(UiMarkupBlock, {
+		id: `${block.id}:${hast?.position?.start.line ?? 0}`,
+		source: code,
+		streaming: block.streaming
+	});
+	return /* @__PURE__ */ jsx(CodeBlock, {
+		variant: "boxed",
+		code,
+		...language && { language }
+	});
+}
 const components = {
 	pre: ({ children }) => /* @__PURE__ */ jsx(Fragment, { children }),
-	code: ({ node, className, children }) => {
-		const hast = node;
-		const language = /language-([\w+#-]+)/.exec(className ?? "")?.[1];
-		const multiline = hast?.position && hast.position.start.line !== hast.position.end.line;
-		if (!language && !multiline) return /* @__PURE__ */ jsx("code", {
-			"data-chat-inline-code": true,
-			children
-		});
-		return /* @__PURE__ */ jsx(CodeBlock, {
-			variant: "boxed",
-			code: textOf(hast).replace(/\n$/, ""),
-			...language && { language }
-		});
-	}
+	code: ({ node, className, children }) => /* @__PURE__ */ jsx(Code, {
+		node,
+		className,
+		children
+	})
 };
+const LinksContext = createContext(void 0);
+function MarkdownLinksProvider({ renderLink, children }) {
+	return /* @__PURE__ */ jsx(LinksContext.Provider, {
+		value: renderLink,
+		children
+	});
+}
 /** Message markdown: GFM, KaTeX math ($…$ and $$…$$), Shiki code blocks, smooth fade-in while streaming. */
-function Markdown({ children, streaming = false, className }) {
+function Markdown({ children, streaming = false, className, partId }) {
 	const text = useSmoothText(children, streaming);
 	const animating = streaming || text.length < children.length;
 	const [streamed, setStreamed] = useState(streaming);
 	if (streaming && !streamed) setStreamed(true);
 	return /* @__PURE__ */ jsx("div", {
 		className: clsx("chat-markdown", streamed && "chat-fade", className),
-		children: /* @__PURE__ */ jsx(MarkdownBody, {
-			text,
-			animating,
-			fade: streamed
+		children: /* @__PURE__ */ jsx(BlockScope, {
+			id: partId,
+			streaming: animating,
+			children: /* @__PURE__ */ jsx(MarkdownBody, {
+				text,
+				animating,
+				fade: streamed
+			})
 		})
 	});
 }
+function BlockScope({ id, streaming, children }) {
+	const value = useMemo(() => id ? {
+		id,
+		streaming
+	} : void 0, [id, streaming]);
+	return /* @__PURE__ */ jsx(BlockContext.Provider, {
+		value,
+		children
+	});
+}
 const MarkdownBody = memo(function MarkdownBody({ text, animating, fade }) {
+	const renderLink = useContext(LinksContext);
+	const withLinks = useMemo(() => renderLink ? {
+		...components,
+		a: ({ href, children }) => {
+			const custom = href ? renderLink({
+				href,
+				children
+			}) : void 0;
+			return custom !== void 0 ? /* @__PURE__ */ jsx(Fragment, { children: custom }) : /* @__PURE__ */ jsx("a", {
+				href,
+				target: "_blank",
+				rel: "noopener noreferrer",
+				children
+			});
+		}
+	} : components, [renderLink]);
 	return /* @__PURE__ */ jsx(Streamdown, {
 		prefix: PREFIX,
 		mode: animating || fade ? "streaming" : "static",
 		...fade && { rehypePlugins: fadePlugins },
 		plugins: { math },
-		components,
+		components: withLinks,
 		controls: false,
 		lineNumbers: false,
 		linkSafety: { enabled: false },
@@ -1156,32 +2096,31 @@ const useChatTool = useAgentTool;
 /** Streaming or running: the model or a tool is busy with it. */
 const isWorking = (part) => part.status !== "done" && part.status !== "error" && part.status !== "awaiting";
 /** Row label for any activity part. */
-function activityLabel(part, view) {
+function activityLabel(part, labels, view) {
 	if (part.type === "thinking") {
 		if (part.title) return part.title;
-		if (part.status !== "done") return "Thinking…";
-		return part.durationMs ? `Thought for ${formatDuration(part.durationMs)}` : "Thought";
+		if (part.status !== "done") return labels.thinking;
+		return part.durationMs ? labels.thoughtFor(formatDuration(part.durationMs, labels)) : labels.thought;
 	}
-	return view?.label?.(part) ?? part.title ?? part.name;
+	return view?.label?.(part, labels) ?? part.title ?? part.name;
 }
 /**
 * Heading of an activity group. While live it follows the latest step. Once done it lists what the tools
 * did, in order ("Ran a command, searched the web"); a group of only thinking shows the first title.
 */
-function activityHeading(parts, views) {
+function activityHeading(parts, views, labels) {
 	const waiting = parts.find((p) => p.type === "tool_call" && p.status === "awaiting");
-	if (waiting) return /* @__PURE__ */ jsxs(Fragment, { children: [activityLabel(waiting, views[waiting.name]), " · waiting for you"] });
+	if (waiting) return /* @__PURE__ */ jsxs(Fragment, { children: [activityLabel(waiting, labels, views[waiting.name]), labels.waitingForYou] });
 	if (parts.some(isWorking)) {
 		const last = parts.at(-1);
-		return activityLabel(last, last.type === "tool_call" ? views[last.name] : void 0);
+		return activityLabel(last, labels, last.type === "tool_call" ? views[last.name] : void 0);
 	}
 	const counts = /* @__PURE__ */ new Map();
 	for (const part of parts) if (part.type === "tool_call") counts.set(part.name, (counts.get(part.name) ?? 0) + 1);
-	if (counts.size === 0) return parts[0] ? activityLabel(parts[0]) : "";
-	const text = [...counts].map(([name, count]) => views[name]?.summary?.(count) ?? `used ${name}`).join(", ");
-	return text.charAt(0).toUpperCase() + text.slice(1);
+	if (counts.size === 0) return parts[0] ? activityLabel(parts[0], labels) : "";
+	const phrases = [...counts].map(([name, count]) => views[name]?.summary?.(count, labels) ?? labels.usedTool(name));
+	return labels.joinSummaries(phrases);
 }
-const plural = (count, one, many) => count === 1 ? one : many(count);
 function recordOf(value) {
 	return value && typeof value === "object" && !Array.isArray(value) ? value : {};
 }
@@ -1190,10 +2129,11 @@ function stringOf(value) {
 }
 /** A shell command. Input `{ command, description? }`; result a string or `{ stdout, stderr, exitCode }`. */
 const commandTool = {
-	label: () => "Ran a command",
+	label: (_, labels) => labels.ranCommandLabel,
 	hint: (part) => stringOf(recordOf(part.input).description),
-	summary: (n) => plural(n, "ran a command", (n) => `ran ${n} commands`),
+	summary: (n, labels) => labels.ranCommands(n),
 	Detail: function CommandDetail({ part }) {
+		const labels = useLabels();
 		const command = stringOf(recordOf(part.input).command) ?? part.inputJson;
 		const result = recordOf(part.result);
 		const output = stringOf(part.result) ?? [stringOf(result.stdout), stringOf(result.stderr)].filter(Boolean).join("\n");
@@ -1205,31 +2145,37 @@ const commandTool = {
 					code: command
 				}),
 				(output || part.status === "done") && /* @__PURE__ */ jsx(CodeBlock, {
-					label: "Output",
-					code: output || "(no output)"
+					label: labels.output,
+					code: output || labels.noOutput
 				}),
 				part.error && /* @__PURE__ */ jsx("p", {
-					className: "text-sm text-chat-danger",
+					className: "text-(length:--chat-ui-font-size) leading-5 text-chat-danger",
 					children: part.error
 				})
 			]
 		});
 	}
 };
-/** A web search. Input `{ query }`; result `{ results: SearchResult[] }` or `SearchResult[]`. */
+/**
+* A web search. Input `{ query }`; results (`{ results: SearchResult[] }` or `SearchResult[]`) from the
+* part's display `data`, else its `result`.
+*/
 const webSearchTool = {
-	label: () => "Searched the web",
+	label: (_, labels) => labels.searchedWebLabel,
 	subtitle: (part) => stringOf(recordOf(part.input).query) ?? part.subtitle,
-	summary: (n) => plural(n, "searched the web", (n) => `searched the web ${n} times`),
+	summary: (n, labels) => labels.searchedWeb(n),
 	Detail: function WebSearchDetail({ part }) {
-		const results = Array.isArray(part.result) ? part.result : recordOf(part.result).results;
+		const labels = useLabels();
+		const icons = useIcons();
+		const shown = part.data ?? part.result;
+		const results = Array.isArray(shown) ? shown : recordOf(shown).results;
 		if (part.error) return /* @__PURE__ */ jsx("p", {
-			className: "text-sm text-chat-danger",
+			className: "text-(length:--chat-ui-font-size) leading-5 text-chat-danger",
 			children: part.error
 		});
 		if (!results?.length) return /* @__PURE__ */ jsx("p", {
-			className: "text-sm text-chat-muted",
-			children: "No results"
+			className: "text-(length:--chat-ui-font-size) leading-5 text-chat-muted",
+			children: labels.noResults
 		});
 		return /* @__PURE__ */ jsx("ul", {
 			className: "-mx-1",
@@ -1237,22 +2183,22 @@ const webSearchTool = {
 				href: result.url,
 				target: "_blank",
 				rel: "noreferrer",
-				className: "flex items-center gap-2.5 rounded-chat-sm px-1 py-2 text-[0.9375rem] text-chat-muted outline-none hover:text-chat-fg focus-visible:ring-2 focus-visible:ring-chat-focus",
+				className: "flex items-center gap-2.5 rounded-chat-sm px-1 py-2 text-(length:--chat-activity-font-size) text-chat-muted outline-none hover:text-chat-fg focus-visible:ring-2 focus-visible:ring-chat-focus",
 				children: [
 					result.favicon ? /* @__PURE__ */ jsx("img", {
 						src: result.favicon,
 						alt: "",
 						className: "size-4 shrink-0 rounded-sm"
-					}) : /* @__PURE__ */ jsx(Globe, {
-						"aria-hidden": true,
-						className: "size-4 shrink-0"
+					}) : /* @__PURE__ */ jsx(IconSlot, {
+						className: "[&_svg]:size-4",
+						children: icons.web
 					}),
 					/* @__PURE__ */ jsx("span", {
 						className: "min-w-0 flex-1 truncate",
 						children: result.title
 					}),
 					/* @__PURE__ */ jsx("span", {
-						className: "shrink-0 text-sm",
+						className: "shrink-0 text-(length:--chat-ui-font-size) leading-5",
 						children: hostOf(result.url)
 					})
 				]
@@ -1260,18 +2206,44 @@ const webSearchTool = {
 		});
 	}
 };
+/** Reads a web page. Input `{ url }`; the row shows the page's host, the detail links to it. */
+const webFetchTool = {
+	label: (_, labels) => labels.readPageLabel,
+	subtitle: (part) => {
+		const url = stringOf(recordOf(part.input).url);
+		return url ? hostOf(url) : part.subtitle;
+	},
+	summary: (n, labels) => labels.readPages(n),
+	Detail: function WebFetchDetail({ part }) {
+		const url = stringOf(recordOf(part.input).url);
+		const title = stringOf(recordOf(part.data).title);
+		if (part.error) return /* @__PURE__ */ jsx("p", {
+			className: "text-(length:--chat-ui-font-size) leading-5 text-chat-danger",
+			children: part.error
+		});
+		if (!url) return null;
+		return /* @__PURE__ */ jsx("a", {
+			href: url,
+			target: "_blank",
+			rel: "noopener noreferrer",
+			className: "block truncate text-(length:--chat-ui-font-size) leading-5 text-chat-fg hover:underline",
+			children: title ?? url
+		});
+	}
+};
 /** Memory lookups, e.g. Anthropic's memory tool. Input `{ path }`. */
 const memoryTool = {
-	label: () => "Recalled memory",
+	label: (_, labels) => labels.recalledMemoryLabel,
 	subtitle: (part) => {
 		return stringOf(recordOf(part.input).path)?.split("/").at(-1) ?? part.subtitle;
 	},
-	summary: () => "recalled memory"
+	summary: (n, labels) => labels.recalledMemory(n)
 };
 const defaultToolViews = {
 	bash: commandTool,
 	shell: commandTool,
 	web_search: webSearchTool,
+	web_fetch: webFetchTool,
 	memory: memoryTool,
 	memory_view: memoryTool
 };
@@ -1283,9 +2255,8 @@ function hostOf(url) {
 	}
 }
 /** "9s", "1m 5s". */
-function formatDuration(ms) {
-	const seconds = Math.max(1, Math.round(ms / 1e3));
-	return seconds < 60 ? `${seconds}s` : `${Math.floor(seconds / 60)}m ${seconds % 60}s`;
+function formatDuration(ms, labels = defaultLabels) {
+	return labels.duration(Math.max(1, Math.round(ms / 1e3)));
 }
 // src/components/token-counter.tsx
 /** Compact token count: 526, 1.4k, 33k, 76.8k, 1M. */
@@ -1330,25 +2301,23 @@ function useCountUp(target) {
 }
 /** A token count that counts up as `tokens` grows and holds still when it stops growing. */
 function TokenCounter({ tokens, variant = "standalone", className }) {
+	const icons = useIcons();
 	const shown = useCountUp(tokens);
+	const labels = useLabels();
 	if (variant === "inline") return /* @__PURE__ */ jsxs("span", {
 		className: clsx("text-chat-subtle tabular-nums", className),
 		children: [
 			"(",
-			formatTokens(shown),
-			" tokens)"
+			labels.tokenCount(formatTokens(shown)),
+			")"
 		]
 	});
 	return /* @__PURE__ */ jsxs("span", {
-		className: clsx("inline-flex items-center gap-1 font-chat-sans text-xs text-chat-subtle tabular-nums", className),
-		children: [
-			/* @__PURE__ */ jsx(ArrowDown, {
-				"aria-hidden": true,
-				className: "size-3"
-			}),
-			formatTokens(shown),
-			" tokens"
-		]
+		className: clsx("inline-flex items-center gap-1 font-chat-sans text-(length:--chat-ui-font-size-sm) leading-4 text-chat-subtle tabular-nums", className),
+		children: [/* @__PURE__ */ jsx(IconSlot, {
+			className: "[&_svg]:size-3",
+			children: icons.tokens
+		}), labels.tokenCount(formatTokens(shown))]
 	});
 }
 // src/components/activity-group.tsx
@@ -1359,6 +2328,7 @@ function TokenCounter({ tokens, variant = "standalone", className }) {
 */
 function ActivityGroup({ parts, defaultExpanded = false, className }) {
 	const views = useToolViews();
+	const labels = useLabels();
 	const [expanded, setExpanded] = useState(defaultExpanded);
 	const live = parts.some(isWorking);
 	const tokens = activityTokens(parts);
@@ -1380,9 +2350,9 @@ function ActivityGroup({ parts, defaultExpanded = false, className }) {
 			onExpandedChange: setExpanded,
 			summary: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Live, {
 				live,
-				children: activityHeading(parts, views)
+				children: activityHeading(parts, views, labels)
 			}), after] }),
-			summaryClassName: "text-[0.9375rem]",
+			summaryClassName: "text-(length:--chat-activity-font-size)",
 			panelClassName: "pt-3",
 			children: /* @__PURE__ */ jsx("div", {
 				className: "divide-y divide-chat-divider rounded-chat-md border border-chat-divider",
@@ -1419,7 +2389,7 @@ function SingleStep({ part, live, after, expanded, onExpandedChange }) {
 			live,
 			children: summary
 		}), after] }),
-		summaryClassName: "text-[0.9375rem]",
+		summaryClassName: "text-(length:--chat-activity-font-size)",
 		panelClassName: "pt-3",
 		children: /* @__PURE__ */ jsx("div", {
 			className: "rounded-chat-md border border-chat-divider px-3 py-2",
@@ -1432,7 +2402,7 @@ function Step({ part }) {
 	const live = isWorking(part);
 	return /* @__PURE__ */ jsx(Disclosure, {
 		className: "px-3 py-2",
-		summaryClassName: "text-[0.9375rem]",
+		summaryClassName: "text-(length:--chat-activity-font-size)",
 		panelClassName: "pt-2 pb-1",
 		summary: /* @__PURE__ */ jsx(Live, {
 			live,
@@ -1443,12 +2413,13 @@ function Step({ part }) {
 }
 /** The label line and expanded body of one step. Tool calls go through their registered view. */
 function useStepContent(part) {
+	const labels = useLabels();
 	const view = useToolView(part.type === "tool_call" ? part.name : "");
 	if (part.type === "thinking") return {
-		summary: activityLabel(part),
+		summary: activityLabel(part, labels),
 		detail: part.visibility === "hidden" || !part.text ? /* @__PURE__ */ jsx("p", {
-			className: "text-sm text-chat-subtle",
-			children: "The model's reasoning is not shown."
+			className: "text-(length:--chat-ui-font-size) leading-5 text-chat-subtle",
+			children: labels.reasoningHidden
 		}) : /* @__PURE__ */ jsx("div", {
 			className: "max-h-96 overflow-y-auto [scrollbar-width:thin]",
 			children: /* @__PURE__ */ jsx(Markdown, {
@@ -1463,7 +2434,7 @@ function useStepContent(part) {
 	return {
 		summary: /* @__PURE__ */ jsxs("span", {
 			title: view.hint?.(part),
-			children: [activityLabel(part, view), subtitle && /* @__PURE__ */ jsx("span", {
+			children: [activityLabel(part, labels, view), subtitle && /* @__PURE__ */ jsx("span", {
 				className: "ml-1.5 text-chat-fg",
 				children: subtitle
 			})]
@@ -1473,16 +2444,16 @@ function useStepContent(part) {
 }
 function DefaultDetail({ part }) {
 	if (part.error) return /* @__PURE__ */ jsx("p", {
-		className: "text-sm text-chat-danger",
+		className: "text-(length:--chat-ui-font-size) leading-5 text-chat-danger",
 		children: part.error
 	});
 	const body = part.result ?? part.input ?? part.inputJson;
 	if (typeof body === "string") return /* @__PURE__ */ jsx("p", {
-		className: "text-[0.9375rem] leading-relaxed whitespace-pre-wrap text-chat-muted",
+		className: "text-(length:--chat-activity-font-size) leading-relaxed whitespace-pre-wrap text-chat-muted",
 		children: body
 	});
 	return /* @__PURE__ */ jsx("pre", {
-		className: "max-h-56 overflow-auto font-chat-mono text-[0.8125rem] leading-relaxed text-chat-muted",
+		className: "max-h-56 overflow-auto font-chat-mono text-(length:--chat-code-font-size) leading-relaxed text-chat-muted",
 		children: JSON.stringify(body, null, 2)
 	});
 }
@@ -1493,6 +2464,9 @@ const draftId = () => `att_${Date.now().toString(36)}_${(counter++).toString(36)
 function useAttachments({ upload } = {}) {
 	const [attachments, setAttachments] = useState([]);
 	const uploads = useRef(/* @__PURE__ */ new Map());
+	const labels = useLabels();
+	const labelsRef = useRef(labels);
+	labelsRef.current = labels;
 	const uploadRef = useRef(upload);
 	uploadRef.current = upload;
 	const patch = useCallback((id, fields) => {
@@ -1526,7 +2500,7 @@ function useAttachments({ upload } = {}) {
 			})).catch((error) => {
 				if (!controller.signal.aborted) patch(id, {
 					status: "error",
-					error: error instanceof Error ? error.message : "Upload failed"
+					error: error instanceof Error ? error.message : labelsRef.current.uploadFailed
 				});
 			}).finally(() => uploads.current.delete(id));
 		}
@@ -1535,7 +2509,7 @@ function useAttachments({ upload } = {}) {
 		setAttachments((list) => [...list, {
 			id: draftId(),
 			kind: "text",
-			name: "Pasted text",
+			name: labelsRef.current.pastedText,
 			mime: "text/plain",
 			size: new Blob([text]).size,
 			text,
@@ -1581,13 +2555,15 @@ function useAttachments({ upload } = {}) {
 const extension = (name) => /\.([a-z0-9]{1,5})$/i.exec(name)?.[1]?.toUpperCase();
 /** A square card: pasted text preview with a PASTED badge, an image thumbnail, or a file with its type. */
 function AttachmentCard({ attachment: a, onRemove, onOpen, size = "md", className }) {
+	const icons = useIcons();
 	const image = a.mime.startsWith("image/") && a.url;
 	const pasted = a.text !== void 0;
+	const labels = useLabels();
 	const uploading = a.status === "uploading";
 	const failed = a.status === "error";
 	return /* @__PURE__ */ jsxs("div", {
 		className: clsx("group/card relative shrink-0 rounded-chat-md border bg-chat-bg font-chat-sans", failed ? "border-chat-danger" : "border-chat-border", size === "md" ? "size-30" : "size-24", className),
-		title: failed ? a.error ?? "Upload failed" : a.name,
+		title: failed ? a.error ?? labels.uploadFailed : a.name,
 		children: [
 			/* @__PURE__ */ jsx("div", {
 				className: clsx("absolute inset-0 overflow-hidden rounded-[inherit]", uploading && "chat-shimmer-surface"),
@@ -1600,11 +2576,11 @@ function AttachmentCard({ attachment: a, onRemove, onOpen, size = "md", classNam
 					children: a.text
 				}) : /* @__PURE__ */ jsxs("div", {
 					className: "flex h-full flex-col gap-1.5 p-2.5",
-					children: [/* @__PURE__ */ jsx(FileText, {
-						"aria-hidden": true,
-						className: "size-5 shrink-0 text-chat-muted"
+					children: [/* @__PURE__ */ jsx(IconSlot, {
+						className: "text-chat-muted [&_svg]:size-5",
+						children: icons.file
 					}), /* @__PURE__ */ jsx("span", {
-						className: "line-clamp-3 text-xs break-words text-chat-fg",
+						className: "line-clamp-3 text-(length:--chat-ui-font-size-sm) leading-4 break-words text-chat-fg",
 						children: a.name
 					})]
 				})
@@ -1613,29 +2589,29 @@ function AttachmentCard({ attachment: a, onRemove, onOpen, size = "md", classNam
 				className: "absolute inset-x-2 bottom-2 flex items-end justify-between gap-1",
 				children: [/* @__PURE__ */ jsx("span", {
 					className: clsx("rounded-[0.3rem] border bg-chat-bg px-1.5 py-0.5 text-[0.625rem] leading-none tracking-wide uppercase", failed ? "border-chat-danger text-chat-danger" : "border-chat-border-strong text-chat-muted"),
-					children: failed ? "Failed" : pasted ? "Pasted" : extension(a.name) ?? "File"
+					children: failed ? labels.failed : pasted ? labels.pasted : extension(a.name) ?? labels.file
 				}), pasted && onOpen && /* @__PURE__ */ jsx(IconButton, {
-					label: "Edit pasted text",
+					label: labels.editPastedText,
 					size: "sm",
 					onPress: onOpen,
 					className: "size-6 border border-chat-border-strong bg-chat-bg [&_svg]:size-3.5 [@media(pointer:coarse)]:size-7!",
-					children: /* @__PURE__ */ jsx(Pencil, {})
+					children: icons.edit
 				})]
 			}),
 			pasted && onOpen && !onRemove && /* @__PURE__ */ jsx("button", {
 				type: "button",
-				"aria-label": "View pasted text",
+				"aria-label": labels.viewPastedText,
 				onClick: onOpen,
 				className: "absolute inset-0 cursor-pointer rounded-[inherit] outline-none focus-visible:ring-2 focus-visible:ring-chat-focus"
 			}),
 			onRemove && /* @__PURE__ */ jsx(IconButton, {
-				label: `Remove ${a.name}`,
+				label: labels.removeAttachment(a.name),
 				variant: "subtle",
 				size: "sm",
 				tooltip: false,
 				onPress: onRemove,
 				className: clsx("absolute -top-2 -right-2 size-6 rounded-full border border-chat-border-strong [&_svg]:size-3.5 [@media(pointer:coarse)]:size-7!", "opacity-0 group-hover/card:opacity-100 group-focus-within/card:opacity-100 data-focus-visible:opacity-100 [@media(hover:none)]:opacity-100"),
-				children: /* @__PURE__ */ jsx(X, {})
+				children: icons.remove
 			})
 		]
 	});
@@ -1643,9 +2619,10 @@ function AttachmentCard({ attachment: a, onRemove, onOpen, size = "md", classNam
 /** The composer's row of cards above the text. Renders nothing when empty. */
 function AttachmentRow({ attachments, onRemove, onEditText }) {
 	const [editing, setEditing] = useState();
+	const labels = useLabels();
 	if (attachments.length === 0) return null;
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("ul", {
-		"aria-label": "Attachments",
+		"aria-label": labels.attachments,
 		className: "flex gap-2.5 overflow-x-auto px-0.5 pt-2.5 pb-1 [scrollbar-width:thin]",
 		children: attachments.map((a) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(AttachmentCard, {
 			attachment: {
@@ -1662,7 +2639,9 @@ function AttachmentRow({ attachments, onRemove, onEditText }) {
 	})] });
 }
 /** Shows pasted text in a modal, editable when `onSave` is set. */
-function PastedTextDialog({ text, onClose, onSave, title = "Pasted text" }) {
+function PastedTextDialog({ text, onClose, onSave, title }) {
+	const labels = useLabels();
+	title ??= labels.pastedText;
 	const [draft, setDraft] = useState(text ?? "");
 	useEffect(() => setDraft(text ?? ""), [text]);
 	return /* @__PURE__ */ jsxs(Modal, {
@@ -1674,34 +2653,34 @@ function PastedTextDialog({ text, onClose, onSave, title = "Pasted text" }) {
 			onChange: (e) => setDraft(e.target.value),
 			readOnly: !onSave,
 			"aria-label": title,
-			className: "mx-5 min-h-64 flex-1 resize-none rounded-chat-md border border-chat-border bg-chat-bg p-3 font-chat-mono text-sm leading-relaxed text-chat-fg outline-none focus:border-chat-border-strong [scrollbar-width:thin]"
+			className: "mx-5 min-h-64 flex-1 resize-none rounded-chat-md border border-chat-border bg-chat-bg p-3 font-chat-mono text-(length:--chat-ui-font-size) leading-relaxed text-chat-fg outline-none focus:border-chat-border-strong [scrollbar-width:thin]"
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "flex justify-end gap-2 px-5 py-4",
 			children: [/* @__PURE__ */ jsx(Button, {
 				variant: "subtle",
 				onPress: onClose,
-				children: onSave ? "Cancel" : "Close"
+				children: onSave ? labels.cancel : labels.close
 			}), onSave && /* @__PURE__ */ jsx(Button, {
 				variant: "primary",
 				onPress: () => {
 					onSave(draft);
 					onClose();
 				},
-				children: "Save"
+				children: labels.save
 			})]
 		})]
 	});
 }
 // src/components/messages.tsx
 /** "just now", "5 minutes ago", "21 hours ago", "yesterday", then a date. */
-function formatRelativeTime(iso, now = Date.now()) {
+function formatRelativeTime(iso, now = Date.now(), labels = defaultLabels) {
 	const seconds = (new Date(iso).getTime() - now) / 1e3;
-	const rtf = new Intl.RelativeTimeFormat(void 0, { numeric: "auto" });
-	if (Math.abs(seconds) < 60) return "just now";
+	const rtf = new Intl.RelativeTimeFormat(labels.locale, { numeric: "auto" });
+	if (Math.abs(seconds) < 60) return labels.justNow;
 	if (Math.abs(seconds) < 3600) return rtf.format(Math.round(seconds / 60), "minute");
 	if (Math.abs(seconds) < 86400) return rtf.format(Math.round(seconds / 3600), "hour");
 	if (Math.abs(seconds) < 604800) return rtf.format(Math.round(seconds / 86400), "day");
-	return new Date(iso).toLocaleDateString(void 0, {
+	return new Date(iso).toLocaleDateString(labels.locale, {
 		month: "short",
 		day: "numeric"
 	});
@@ -1711,21 +2690,25 @@ function messageText(message) {
 	return message.parts.map((p) => p.type === "text" ? p.text : p.type === "custom" ? p.text ?? "" : "").filter(Boolean).join("\n\n");
 }
 function CopyButton({ text }) {
+	const icons = useIcons();
+	const labels = useLabels();
 	const [copied, setCopied] = useState(false);
 	return /* @__PURE__ */ jsx(IconButton, {
-		label: copied ? "Copied" : "Copy",
+		label: copied ? labels.copied : labels.copy,
 		size: "sm",
 		onPress: () => {
 			navigator.clipboard?.writeText(text);
 			setCopied(true);
 			setTimeout(() => setCopied(false), 1500);
 		},
-		children: copied ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Copy, {})
+		children: copied ? icons.copied : icons.copy
 	});
 }
-const timeClass = "px-1 font-chat-sans text-xs text-chat-subtle";
+const timeClass = "px-1 font-chat-sans text-(length:--chat-ui-font-size-sm) leading-4 text-chat-subtle";
 /** The user's turn: a bubble on the right, with time, retry, edit and copy under it on hover. */
 function UserMessage({ message, onRetry, onEdit, actions, className }) {
+	const icons = useIcons();
+	const labels = useLabels();
 	const text = messageText(message);
 	const attachments = message.parts.filter((p) => p.type === "attachment");
 	const [viewing, setViewing] = useState();
@@ -1733,7 +2716,7 @@ function UserMessage({ message, onRetry, onEdit, actions, className }) {
 		className: clsx("group/message flex flex-col items-end", className),
 		children: [
 			attachments.length > 0 && /* @__PURE__ */ jsx("ul", {
-				"aria-label": "Attachments",
+				"aria-label": labels.attachments,
 				className: "mb-2 flex max-w-[85%] flex-wrap justify-end gap-2",
 				children: attachments.map((a) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(AttachmentCard, {
 					attachment: a,
@@ -1745,28 +2728,25 @@ function UserMessage({ message, onRetry, onEdit, actions, className }) {
 				text: viewing,
 				onClose: () => setViewing(void 0)
 			}),
-			text && /* @__PURE__ */ jsx("div", {
-				className: "max-w-[85%] rounded-chat-lg bg-chat-bubble px-4 py-2.5 font-chat-sans text-[0.9375rem] leading-relaxed whitespace-pre-wrap text-chat-fg",
-				children: text
-			}),
+			text && /* @__PURE__ */ jsx(UserBubble, { text }),
 			/* @__PURE__ */ jsxs("div", {
 				className: "mt-1 flex items-center gap-0.5 opacity-0 transition-opacity group-hover/message:opacity-100 group-focus-within/message:opacity-100 [@media(hover:none)]:opacity-100",
 				children: [
 					/* @__PURE__ */ jsx("span", {
 						className: timeClass,
-						children: formatRelativeTime(message.createdAt)
+						children: formatRelativeTime(message.createdAt, void 0, labels)
 					}),
 					onRetry && /* @__PURE__ */ jsx(IconButton, {
-						label: "Retry",
+						label: labels.retry,
 						size: "sm",
 						onPress: onRetry,
-						children: /* @__PURE__ */ jsx(RefreshCw, {})
+						children: icons.retry
 					}),
 					onEdit && /* @__PURE__ */ jsx(IconButton, {
-						label: "Edit",
+						label: labels.edit,
 						size: "sm",
 						onPress: onEdit,
-						children: /* @__PURE__ */ jsx(Pencil, {})
+						children: icons.edit
 					}),
 					/* @__PURE__ */ jsx(CopyButton, { text }),
 					actions
@@ -1775,11 +2755,46 @@ function UserMessage({ message, onRetry, onEdit, actions, className }) {
 		]
 	});
 }
+/** Taller than this (px), a user message folds to this height with "Show more", like a long paste. */
+const FOLD_HEIGHT = 240;
+function UserBubble({ text }) {
+	const body = useRef(null);
+	const [long, setLong] = useState(false);
+	const [open, setOpen] = useState(false);
+	const labels = useLabels();
+	useLayoutEffect(() => {
+		const el = body.current;
+		if (!el) return;
+		const measure = () => setLong(el.scrollHeight > 264);
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, [text]);
+	const folded = long && !open;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "max-w-[85%] rounded-chat-lg bg-chat-bubble px-4 py-2.5 font-chat-sans text-(length:--chat-bubble-font-size) leading-relaxed text-chat-fg",
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: body,
+			style: folded ? { maxHeight: FOLD_HEIGHT } : void 0,
+			className: clsx("whitespace-pre-wrap", folded && "overflow-hidden mask-b-from-60% mask-b-to-100%"),
+			children: text
+		}), long && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-expanded": open,
+			onClick: () => setOpen(!open),
+			className: "mt-1.5 cursor-pointer rounded-chat-sm text-(length:--chat-ui-font-size) leading-5 text-chat-muted outline-none hover:text-chat-fg focus-visible:ring-2 focus-visible:ring-chat-focus",
+			children: open ? labels.showLess : labels.showMore
+		})]
+	});
+}
 /**
 * The assistant's turn: activity groups (each with its own token count), markdown, and other parts in
 * order. When done, copy / read aloud / feedback / retry and the time sit under it.
 */
 function AssistantMessage({ message, onRetry, onFeedback, onReadAloud, renderPart, actions, className }) {
+	const icons = useIcons();
+	const labels = useLabels();
 	const streaming = message.status === "streaming";
 	const views = useToolViews();
 	const blocks = toBlocks(message.parts, (part) => views[part.name]?.Block !== void 0);
@@ -1787,56 +2802,66 @@ function AssistantMessage({ message, onRetry, onFeedback, onReadAloud, renderPar
 		className: clsx("group/message flex flex-col gap-4", className),
 		children: [
 			blocks.map((block) => {
-				if (block.kind === "activity") return /* @__PURE__ */ jsx(ActivityGroup, { parts: block.parts }, block.id);
+				if (block.kind === "activity") {
+					const cards = block.parts.filter((p) => p.type === "tool_call" && views[p.name]?.Card);
+					if (!cards.length) return /* @__PURE__ */ jsx(ActivityGroup, { parts: block.parts }, block.id);
+					return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ActivityGroup, { parts: block.parts }), cards.map((p) => {
+						if (p.type !== "tool_call") return null;
+						const Card = views[p.name].Card;
+						return /* @__PURE__ */ jsx(Card, { part: p }, p.id);
+					})] }, block.id);
+				}
 				if (block.kind === "tool") {
 					const ToolBlock = views[block.part.name].Block;
 					return /* @__PURE__ */ jsx(ToolBlock, { part: block.part }, block.id);
 				}
 				const part = block.part;
 				if (part.type === "text") return /* @__PURE__ */ jsx(Markdown, {
+					partId: part.id,
 					streaming: part.status === "streaming",
 					children: part.text
 				}, part.id);
 				const custom = renderPart?.(part);
 				if (custom) return /* @__PURE__ */ jsx("div", { children: custom }, part.id);
+				if (part.type === "widget") return /* @__PURE__ */ jsx(WidgetPartView, { part }, part.id);
 				if (part.type === "custom" && part.text) return /* @__PURE__ */ jsx(Markdown, { children: part.text }, part.id);
 				return null;
 			}),
 			message.status === "error" && /* @__PURE__ */ jsx("p", {
-				className: "font-chat-sans text-sm text-chat-danger",
-				children: message.error ?? "Something went wrong."
+				className: "font-chat-sans text-(length:--chat-ui-font-size) leading-5 text-chat-danger",
+				children: message.error ?? labels.somethingWentWrong
 			}),
 			streaming ? /* @__PURE__ */ jsx("div", { className: "h-7" }) : /* @__PURE__ */ jsxs("div", {
 				className: "-ml-1.5 flex h-7 items-center gap-0.5",
 				children: [
 					/* @__PURE__ */ jsx(CopyButton, { text: messageText(message) }),
 					onReadAloud && /* @__PURE__ */ jsx(IconButton, {
-						label: "Read aloud",
+						label: labels.readAloud,
 						size: "sm",
 						onPress: onReadAloud,
-						children: /* @__PURE__ */ jsx(Volume2, {})
+						children: icons.speak
 					}),
 					onFeedback && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(IconButton, {
-						label: "Good response",
+						label: labels.goodResponse,
 						size: "sm",
 						onPress: () => onFeedback("good"),
-						children: /* @__PURE__ */ jsx(ThumbsUp, {})
+						children: icons.thumbsUp
 					}), /* @__PURE__ */ jsx(IconButton, {
-						label: "Bad response",
+						label: labels.badResponse,
 						size: "sm",
 						onPress: () => onFeedback("bad"),
-						children: /* @__PURE__ */ jsx(ThumbsDown, {})
+						children: icons.thumbsDown
 					})] }),
 					onRetry && /* @__PURE__ */ jsx(IconButton, {
-						label: "Retry",
+						label: labels.retry,
 						size: "sm",
 						onPress: onRetry,
-						children: /* @__PURE__ */ jsx(RefreshCw, {})
+						children: icons.retry
 					}),
 					actions,
 					/* @__PURE__ */ jsx("span", {
 						className: timeClass,
-						children: formatRelativeTime(message.createdAt)
+						children: formatRelativeTime(message.createdAt, void 0, labels)
 					})
 				]
 			})
@@ -1849,7 +2874,9 @@ function AssistantMessage({ message, onRetry, onFeedback, onReadAloud, renderPar
 * view's `Detail` when it has one, else the input. Replying in the composer instead declines it.
 */
 function ApprovalCard({ approval, onRespond, className }) {
+	const icons = useIcons();
 	const { part } = approval;
+	const labels = useLabels();
 	const view = useToolView(part.name);
 	const Detail = view.Detail;
 	const preview = {
@@ -1858,21 +2885,17 @@ function ApprovalCard({ approval, onRespond, className }) {
 	};
 	return /* @__PURE__ */ jsxs("div", {
 		role: "alertdialog",
-		"aria-label": `Allow ${part.name}?`,
+		"aria-label": labels.allowTool(part.name),
 		className: clsx("flex flex-col gap-3 rounded-chat-lg border border-chat-border-strong bg-chat-surface p-3 font-chat-sans text-chat-fg shadow-chat-popover", className),
 		children: [
 			/* @__PURE__ */ jsxs("div", {
-				className: "flex items-center gap-2 text-sm",
-				children: [/* @__PURE__ */ jsx(ShieldQuestion, {
-					"aria-hidden": true,
-					className: "size-4 shrink-0 text-chat-accent"
+				className: "flex items-center gap-2 text-(length:--chat-ui-font-size) leading-5",
+				children: [/* @__PURE__ */ jsx(IconSlot, {
+					className: "text-chat-accent [&_svg]:size-4",
+					children: icons.approval
 				}), /* @__PURE__ */ jsx("span", {
 					className: "min-w-0 flex-1 font-medium",
-					children: view.ask?.(part) ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-						"Allow ",
-						activityLabel(part, view),
-						"?"
-					] })
+					children: view.ask?.(part) ?? labels.allowAction(activityLabel(part, labels, view))
 				})]
 			}),
 			/* @__PURE__ */ jsx("div", {
@@ -1889,12 +2912,12 @@ function ApprovalCard({ approval, onRespond, className }) {
 					variant: "ghost",
 					className: "border border-chat-border-strong",
 					onPress: () => onRespond(part.id, false),
-					children: "Deny"
+					children: labels.deny
 				}), /* @__PURE__ */ jsx(Button, {
 					variant: "primary",
 					autoFocus: true,
 					onPress: () => onRespond(part.id, true),
-					children: "Allow"
+					children: labels.allow
 				})]
 			})
 		]
@@ -1907,7 +2930,8 @@ const DEFAULT_COLOR = "var(--chat-subtle)";
 * What fills the context window: a usage line, a segmented bar, one row per category with its share, and
 * expandable lists (each MCP tool, each memory file). Deferred categories are listed but not counted.
 */
-function ContextPanel({ usage, title = "Context", defaultExpanded = true, className }) {
+function ContextPanel({ usage, title, defaultExpanded = true, className }) {
+	const labels = useLabels();
 	const counted = usage.categories.filter((c) => !c.deferred);
 	const deferred = usage.categories.filter((c) => c.deferred);
 	const used = counted.reduce((sum, c) => sum + (c.reserved ? 0 : c.tokens), 0);
@@ -1915,16 +2939,16 @@ function ContextPanel({ usage, title = "Context", defaultExpanded = true, classN
 	const free = Math.max(usage.limit - used - reserved, 0);
 	const share = (tokens) => formatShare(tokens / usage.limit);
 	return /* @__PURE__ */ jsxs(Disclosure, {
-		summary: title,
+		summary: title ?? labels.context,
 		defaultExpanded,
 		className: clsx("font-chat-sans text-chat-fg", className),
-		summaryClassName: "text-[0.9375rem] text-chat-fg",
+		summaryClassName: "text-(length:--chat-activity-font-size) text-chat-fg",
 		panelClassName: "pt-3",
 		children: [
 			/* @__PURE__ */ jsxs("div", {
-				className: "mb-2 flex items-baseline justify-between text-[0.9375rem]",
-				children: [/* @__PURE__ */ jsxs("span", { children: [Math.round(used / usage.limit * 100), "% used"] }), /* @__PURE__ */ jsxs("span", {
-					className: "text-sm text-chat-muted tabular-nums",
+				className: "mb-2 flex items-baseline justify-between text-(length:--chat-activity-font-size)",
+				children: [/* @__PURE__ */ jsx("span", { children: labels.percentUsed(Math.round(used / usage.limit * 100)) }), /* @__PURE__ */ jsxs("span", {
+					className: "text-(length:--chat-ui-font-size) leading-5 text-chat-muted tabular-nums",
 					children: [
 						formatTokens(used),
 						" / ",
@@ -1934,7 +2958,7 @@ function ContextPanel({ usage, title = "Context", defaultExpanded = true, classN
 			}),
 			/* @__PURE__ */ jsx("div", {
 				role: "meter",
-				"aria-label": "Context used",
+				"aria-label": labels.contextUsed,
 				"aria-valuemin": 0,
 				"aria-valuemax": usage.limit,
 				"aria-valuenow": used,
@@ -1956,7 +2980,7 @@ function ContextPanel({ usage, title = "Context", defaultExpanded = true, classN
 				}, c.id)), /* @__PURE__ */ jsx(CategoryRow, {
 					category: {
 						id: "free",
-						label: "Free space",
+						label: labels.freeSpace,
 						tokens: free,
 						color: FREE_COLOR
 					},
@@ -1987,7 +3011,7 @@ function CategoryRow({ category, share }) {
 		}) })
 	}) : category.label;
 	return /* @__PURE__ */ jsxs("li", {
-		className: "flex items-center gap-2.5 text-sm",
+		className: "flex items-center gap-2.5 text-(length:--chat-ui-font-size) leading-5",
 		children: [
 			/* @__PURE__ */ jsx("span", {
 				"aria-hidden": true,
@@ -2013,16 +3037,16 @@ function GroupList({ group }) {
 	return /* @__PURE__ */ jsx(Disclosure, {
 		summary: group.label,
 		trailing: /* @__PURE__ */ jsx("span", {
-			className: "text-sm text-chat-subtle tabular-nums",
+			className: "text-(length:--chat-ui-font-size) leading-5 text-chat-subtle tabular-nums",
 			children: group.items.length
 		}),
 		indicator: "chevron",
-		summaryClassName: "text-sm",
+		summaryClassName: "text-(length:--chat-ui-font-size) leading-5",
 		panelClassName: "pt-1.5",
 		children: /* @__PURE__ */ jsx("ul", {
 			className: "max-h-72 space-y-1 overflow-y-auto pl-6 [scrollbar-color:var(--chat-border-strong)_transparent] [scrollbar-width:thin]",
 			children: group.items.map((item) => /* @__PURE__ */ jsxs("li", {
-				className: "flex items-center gap-2 text-sm text-chat-muted",
+				className: "flex items-center gap-2 text-(length:--chat-ui-font-size) leading-5 text-chat-muted",
 				children: [/* @__PURE__ */ jsx("span", {
 					className: "min-w-0 flex-1 truncate",
 					children: item.label
@@ -2041,7 +3065,9 @@ function formatShare(fraction) {
 /** Touch keyboards have no easy Shift+Enter, so there Enter adds a line and the button sends. */
 const coarsePointer = () => typeof window !== "undefined" && window.matchMedia?.("(pointer: coarse)").matches;
 /** The chat box: growing textarea, toolbar slots, send / stop. Enter sends, Shift+Enter adds a line. */
-function Composer({ onSubmit, onStop, busy = false, value, onChange, placeholder = "Reply…", variant = "docked", leading, trailing, above, onFiles, onLongPaste, longPasteChars = 2e3, allowEmpty = false, submitDisabled = false, isDisabled = false, autoFocus, className }) {
+function Composer({ onSubmit, onStop, busy = false, value, onChange, placeholder, variant = "docked", leading, trailing, above, onFiles, onLongPaste, longPasteChars = 2e3, allowEmpty = false, submitDisabled = false, isDisabled = false, autoFocus, className }) {
+	const icons = useIcons();
+	const labels = useLabels();
 	const [own, setOwn] = useState("");
 	const text = value ?? own;
 	const setText = (next) => {
@@ -2114,18 +3140,18 @@ function Composer({ onSubmit, onStop, busy = false, value, onChange, placeholder
 	};
 	const compact = variant === "compact";
 	const action = busy ? /* @__PURE__ */ jsx(IconButton, {
-		label: "Stop",
+		label: labels.stop,
 		variant: "primary",
 		onPress: onStop,
 		className: "rounded-chat-md [&_svg]:size-3.5 [&_svg]:fill-current",
-		children: /* @__PURE__ */ jsx(Square, {})
+		children: icons.stop
 	}) : /* @__PURE__ */ jsx(IconButton, {
-		label: "Send",
+		label: labels.send,
 		variant: "primary",
 		onPress: submit,
 		isDisabled: !canSend,
 		className: "rounded-chat-md",
-		children: /* @__PURE__ */ jsx(ArrowUp, {})
+		children: icons.send
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		className: clsx("flex flex-col rounded-[1.25rem] border border-chat-border bg-chat-surface font-chat-sans shadow-chat-popover", "focus-within:border-chat-border-strong", dragging && "border-chat-accent! border-dashed", compact ? "gap-1 p-2" : "gap-2 p-3", className),
@@ -2147,8 +3173,8 @@ function Composer({ onSubmit, onStop, busy = false, value, onChange, placeholder
 					onChange: (e) => setText(e.target.value),
 					onKeyDown,
 					onPaste,
-					placeholder,
-					"aria-label": "Message",
+					placeholder: placeholder ?? labels.replyPlaceholder,
+					"aria-label": labels.message,
 					disabled: isDisabled,
 					autoFocus,
 					className: clsx("w-full resize-none bg-transparent px-1.5 text-chat-fg outline-none placeholder:text-chat-subtle", "text-base leading-relaxed [scrollbar-width:thin]", compact ? "max-h-[min(10rem,30cqh)] py-1" : variant === "centered" ? "max-h-[min(24rem,45cqh)] min-h-12 pt-1" : "max-h-[min(18rem,35cqh)] min-h-6 pt-1")
@@ -2172,10 +3198,12 @@ function Composer({ onSubmit, onStop, busy = false, value, onChange, placeholder
 	});
 }
 /** The `+` button that opens the attach menu above the composer. */
-function AttachButton({ children, label = "Add files and more" }) {
+function AttachButton({ children, label }) {
+	const icons = useIcons();
+	const labels = useLabels();
 	return /* @__PURE__ */ jsxs(MenuTrigger, { children: [/* @__PURE__ */ jsx(IconButton, {
-		label,
-		children: /* @__PURE__ */ jsx(Plus, {})
+		label: label ?? labels.addFiles,
+		children: icons.attach
 	}), /* @__PURE__ */ jsx(Popover, {
 		placement: "top start",
 		children
@@ -2183,7 +3211,9 @@ function AttachButton({ children, label = "Add files and more" }) {
 }
 // src/components/model-picker.tsx
 /** "Opus 5.5  High ⌄": the models, an Effort submenu for models that have levels, and More models. */
-function ModelPicker({ models, model, onModelChange, effort, onEffortChange, effortNote = "Higher effort means more thorough responses, but takes longer and uses your limits faster.", footnote, className }) {
+function ModelPicker({ models, model, onModelChange, effort, onEffortChange, effortNote, footnote, className }) {
+	const icons = useIcons();
+	const labels = useLabels();
 	const current = models.find((m) => m.id === model);
 	const efforts = current?.efforts ?? [];
 	const currentEffort = efforts.find((e) => e.id === (effort ?? current?.defaultEffort));
@@ -2202,7 +3232,7 @@ function ModelPicker({ models, model, onModelChange, effort, onEffortChange, eff
 	};
 	return /* @__PURE__ */ jsxs(MenuTrigger, { children: [/* @__PURE__ */ jsxs(Button, {
 		size: "sm",
-		"aria-label": `Model: ${current?.label ?? model}`,
+		"aria-label": labels.modelButton(current?.label ?? model),
 		className: clsx("text-chat-muted data-hovered:text-chat-fg", className),
 		children: [
 			/* @__PURE__ */ jsx("span", {
@@ -2213,16 +3243,16 @@ function ModelPicker({ models, model, onModelChange, effort, onEffortChange, eff
 				className: "chat-picker-detail text-chat-muted",
 				children: currentEffort.label
 			}),
-			/* @__PURE__ */ jsx(ChevronDown, {
-				"aria-hidden": true,
-				className: "size-3.5"
+			/* @__PURE__ */ jsx(IconSlot, {
+				className: "[&_svg]:size-3.5",
+				children: icons.dropdown
 			})
 		]
 	}), /* @__PURE__ */ jsxs(Popover, {
 		placement: "top end",
 		className: "w-72",
 		children: [/* @__PURE__ */ jsxs(Menu, {
-			"aria-label": "Model",
+			"aria-label": labels.model,
 			children: [
 				/* @__PURE__ */ jsx(MenuSection, {
 					selectionMode: "single",
@@ -2234,12 +3264,12 @@ function ModelPicker({ models, model, onModelChange, effort, onEffortChange, eff
 				efforts.length > 0 && onEffortChange && /* @__PURE__ */ jsxs(SubmenuTrigger, { children: [/* @__PURE__ */ jsx(MenuItem, {
 					id: "__effort",
 					detail: currentEffort?.label,
-					children: "Effort"
+					children: labels.effort
 				}), /* @__PURE__ */ jsxs(Popover, {
 					placement: "end top",
 					className: "w-80",
-					children: [/* @__PURE__ */ jsx(MenuNote, { children: effortNote }), /* @__PURE__ */ jsx(Menu, {
-						"aria-label": "Effort",
+					children: [/* @__PURE__ */ jsx(MenuNote, { children: effortNote ?? labels.effortNote }), /* @__PURE__ */ jsx(Menu, {
+						"aria-label": labels.effort,
 						selectionMode: "single",
 						selectedKeys: currentEffort ? [currentEffort.id] : [],
 						onSelectionChange: (keys) => {
@@ -2254,10 +3284,10 @@ function ModelPicker({ models, model, onModelChange, effort, onEffortChange, eff
 								className: "flex items-center gap-2",
 								children: [
 									e.label,
-									e.recommended && /* @__PURE__ */ jsx(Badge, { children: "Recommended" }),
+									e.recommended && /* @__PURE__ */ jsx(Badge, { children: labels.recommended }),
 									e.warning && /* @__PURE__ */ jsx(Badge, {
 										tone: "warning",
-										icon: /* @__PURE__ */ jsx(AlertTriangle, {}),
+										icon: icons.warning,
 										children: e.warning
 									})
 								]
@@ -2267,12 +3297,12 @@ function ModelPicker({ models, model, onModelChange, effort, onEffortChange, eff
 				})] }),
 				more.length > 0 && /* @__PURE__ */ jsxs(SubmenuTrigger, { children: [/* @__PURE__ */ jsx(MenuItem, {
 					id: "__more",
-					children: "More models"
+					children: labels.moreModels
 				}), /* @__PURE__ */ jsx(Popover, {
 					placement: "end top",
 					className: "w-72",
 					children: /* @__PURE__ */ jsx(Menu, {
-						"aria-label": "More models",
+						"aria-label": labels.moreModels,
 						selectionMode: "single",
 						selectedKeys: [model],
 						onSelectionChange: pick,
@@ -2281,7 +3311,7 @@ function ModelPicker({ models, model, onModelChange, effort, onEffortChange, eff
 				})] })
 			]
 		}), footnote && /* @__PURE__ */ jsx(MenuNote, {
-			className: "border-t border-chat-popover-border text-xs",
+			className: "border-t border-chat-popover-border text-(length:--chat-ui-font-size-sm) leading-4",
 			children: footnote
 		})]
 	})] });
@@ -2293,10 +3323,12 @@ const STICK_SLOP = 48;
 * The scrolling conversation. It follows a streaming reply while the reader is at the bottom and leaves
 * them alone once they scroll up, with a button to jump back. Sending a message always jumps down.
 */
-function MessageList({ messages, onRetry, onEdit, onFeedback, renderPart, footer, className }) {
+function MessageList({ messages, onRetry, onEdit, onFeedback, renderPart, header, footer, start = "bottom", className }) {
+	const icons = useIcons();
 	const scroller = useRef(null);
 	const content = useRef(null);
-	const stuck = useRef(true);
+	const stuck = useRef(start === "bottom");
+	const labels = useLabels();
 	const [atBottom, setAtBottom] = useState(true);
 	const toBottom = useCallback((behavior = "auto") => {
 		const el = scroller.current;
@@ -2322,7 +3354,13 @@ function MessageList({ messages, onRetry, onEdit, onFeedback, renderPart, footer
 		return () => observer.disconnect();
 	}, [toBottom]);
 	const lastUser = messages.findLast((m) => m.role === "user")?.id;
+	const jumpedFor = useRef(start === "top" ? lastUser : null);
 	useLayoutEffect(() => {
+		if (lastUser === jumpedFor.current) {
+			onScroll();
+			return;
+		}
+		jumpedFor.current = lastUser;
 		stuck.current = true;
 		setAtBottom(true);
 		toBottom();
@@ -2336,11 +3374,11 @@ function MessageList({ messages, onRetry, onEdit, onFeedback, renderPart, footer
 			children: /* @__PURE__ */ jsxs("div", {
 				ref: content,
 				className: "flex min-h-full flex-col",
-				children: [/* @__PURE__ */ jsx("div", {
+				children: [/* @__PURE__ */ jsxs("div", {
 					role: "log",
-					"aria-label": "Conversation",
+					"aria-label": labels.conversation,
 					className: "mx-auto flex w-full max-w-[calc(var(--chat-content-width)+2*var(--chat-gutter,var(--chat-content-padding)))] flex-1 flex-col gap-6 px-[var(--chat-gutter,var(--chat-content-padding))] pt-6 pb-4",
-					children: messages.map((m) => m.role === "user" ? /* @__PURE__ */ jsx(UserMessage, {
+					children: [header, messages.map((m) => m.role === "user" ? /* @__PURE__ */ jsx(UserMessage, {
 						message: m,
 						...onEdit && { onEdit: () => onEdit(m.id) }
 					}, m.id) : /* @__PURE__ */ jsx(AssistantMessage, {
@@ -2348,27 +3386,28 @@ function MessageList({ messages, onRetry, onEdit, onFeedback, renderPart, footer
 						...onRetry && { onRetry: () => onRetry(m.id) },
 						...onFeedback && { onFeedback: (f) => onFeedback(m.id, f) },
 						...renderPart && { renderPart }
-					}, m.id))
+					}, m.id))]
 				}), footer && /* @__PURE__ */ jsx("div", {
 					className: "sticky bottom-0",
 					children: footer
 				})]
 			})
 		}), !atBottom && /* @__PURE__ */ jsx(IconButton, {
-			label: "Scroll to bottom",
+			label: labels.scrollToBottom,
 			variant: "subtle",
 			onPress: () => {
 				stuck.current = true;
 				toBottom("smooth");
 			},
 			className: "absolute bottom-[min(10rem,40%)] left-1/2 -translate-x-1/2 rounded-full border border-chat-border shadow-chat-popover",
-			children: /* @__PURE__ */ jsx(ArrowDown, {})
+			children: icons.scrollToBottom
 		})]
 	});
 }
 // src/components/chat-header.tsx
 /** The bar above a chat: breadcrumb and title with its menu, actions on the right. */
 function ChatHeader({ title, menu, leading, actions, className }) {
+	const icons = useIcons();
 	return /* @__PURE__ */ jsxs("header", {
 		className: clsx("flex h-12 shrink-0 items-center gap-1 px-3 font-chat-sans", className),
 		children: [
@@ -2379,15 +3418,15 @@ function ChatHeader({ title, menu, leading, actions, className }) {
 				children: [/* @__PURE__ */ jsx("span", {
 					className: "truncate",
 					children: title
-				}), /* @__PURE__ */ jsx(ChevronDown, {
-					"aria-hidden": true,
-					className: "size-3.5 shrink-0 text-chat-muted"
+				}), /* @__PURE__ */ jsx(IconSlot, {
+					className: "text-chat-muted [&_svg]:size-3.5",
+					children: icons.dropdown
 				})]
 			}), /* @__PURE__ */ jsx(Popover, {
 				placement: "bottom start",
 				children: menu
 			})] }) : /* @__PURE__ */ jsx("h1", {
-				className: "min-w-0 truncate px-2 text-sm text-chat-fg",
+				className: "min-w-0 truncate px-2 text-(length:--chat-ui-font-size) leading-5 text-chat-fg",
 				children: title
 			}),
 			/* @__PURE__ */ jsx("div", {
@@ -2399,6 +3438,8 @@ function ChatHeader({ title, menu, leading, actions, className }) {
 }
 /** Pin, Rename, Add to project (searchable), Share, Delete. Each shows only when its handler is set. */
 function ChatTitleMenu({ pinned, onPin, onRename, projects, onAddToProject, onCreateProject, onShare, onDelete, children }) {
+	const icons = useIcons();
+	const labels = useLabels();
 	const act = (key) => {
 		if (key === "pin") onPin?.();
 		else if (key === "rename") onRename?.();
@@ -2406,39 +3447,39 @@ function ChatTitleMenu({ pinned, onPin, onRename, projects, onAddToProject, onCr
 		else if (key === "delete") onDelete?.();
 	};
 	return /* @__PURE__ */ jsxs(Menu, {
-		"aria-label": "Chat actions",
+		"aria-label": labels.chatActions,
 		className: "min-w-44",
 		onAction: act,
 		children: [
 			onPin && /* @__PURE__ */ jsx(MenuItem, {
 				id: "pin",
-				icon: pinned ? /* @__PURE__ */ jsx(PinOff, {}) : /* @__PURE__ */ jsx(Pin, {}),
+				icon: pinned ? icons.unpin : icons.pin,
 				shortcut: "P",
-				children: pinned ? "Unpin" : "Pin"
+				children: pinned ? labels.unpin : labels.pin
 			}),
 			onRename && /* @__PURE__ */ jsx(MenuItem, {
 				id: "rename",
-				icon: /* @__PURE__ */ jsx(Pencil, {}),
+				icon: icons.rename,
 				shortcut: "R",
-				children: "Rename"
+				children: labels.rename
 			}),
 			onAddToProject && /* @__PURE__ */ jsxs(SubmenuTrigger, { children: [/* @__PURE__ */ jsx(MenuItem, {
 				id: "project",
-				icon: /* @__PURE__ */ jsx(FolderPlus, {}),
-				children: "Add to project"
+				icon: icons.addToProject,
+				children: labels.addToProject
 			}), /* @__PURE__ */ jsx(Popover, {
 				placement: "end top",
 				className: "w-60",
 				children: /* @__PURE__ */ jsx(MenuSearch, {
-					placeholder: "Search or create a project",
+					placeholder: labels.searchProjects,
 					children: /* @__PURE__ */ jsxs(Menu, {
-						"aria-label": "Projects",
+						"aria-label": labels.projects,
 						className: "max-h-72",
 						onAction: (key) => key === "__new" ? onCreateProject?.() : onAddToProject(String(key)),
 						children: [onCreateProject && /* @__PURE__ */ jsx(MenuItem, {
 							id: "__new",
-							icon: /* @__PURE__ */ jsx(Plus, {}),
-							children: "New project"
+							icon: icons.add,
+							children: labels.newProject
 						}), (projects ?? []).map((p) => /* @__PURE__ */ jsx(MenuItem, {
 							id: p.id,
 							children: p.name
@@ -2448,28 +3489,50 @@ function ChatTitleMenu({ pinned, onPin, onRename, projects, onAddToProject, onCr
 			})] }),
 			onShare && /* @__PURE__ */ jsx(MenuItem, {
 				id: "share",
-				icon: /* @__PURE__ */ jsx(Share, {}),
-				children: "Share chat"
+				icon: icons.share,
+				children: labels.shareChat
 			}),
 			children,
 			onDelete && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MenuSeparator, {}), /* @__PURE__ */ jsx(MenuItem, {
 				id: "delete",
-				icon: /* @__PURE__ */ jsx(Trash2, {}),
+				icon: icons.delete,
 				shortcut: "D",
 				tone: "danger",
-				children: "Delete"
+				children: labels.delete
 			})] })
 		]
 	});
 }
+// src/components/chat-notice.tsx
+/** A bordered note in the conversation column: "Shared by Alex. This is a copy of a chat…" with actions under it. */
+function ChatNotice({ children, actions, icon, className }) {
+	const icons = useIcons();
+	const shown = icon === void 0 ? icons.info : icon;
+	return /* @__PURE__ */ jsxs("div", {
+		role: "note",
+		className: clsx("flex gap-3 rounded-chat-lg border border-(--chat-notice-border,var(--chat-border)) bg-(--chat-notice-bg,transparent) px-4 py-3.5 font-chat-sans text-(length:--chat-ui-font-size) leading-relaxed text-chat-fg", className),
+		children: [shown && /* @__PURE__ */ jsx("span", {
+			className: "mt-0.5 shrink-0 text-chat-muted [&_svg]:size-4",
+			children: shown
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "min-w-0 flex-1",
+			children: [/* @__PURE__ */ jsx("div", { children }), actions && /* @__PURE__ */ jsx("div", {
+				className: "mt-2.5 flex flex-wrap gap-2",
+				children: actions
+			})]
+		})]
+	});
+}
 // src/components/chat-list.tsx
 const isProject = (item) => "type" in item && item.type === "project";
-const rowClass = clsx("group/row relative flex h-8 w-full min-w-0 cursor-pointer items-center gap-2 rounded-chat-sm px-2 text-left font-chat-sans text-sm text-chat-fg outline-none", "data-hovered:bg-chat-hover data-pressed:bg-chat-selected data-focus-visible:ring-2 data-focus-visible:ring-chat-focus data-focus-visible:ring-inset", "[@media(pointer:coarse)]:h-10");
+const rowClass = clsx("group/row relative flex h-8 w-full min-w-0 cursor-pointer items-center gap-2 rounded-chat-sm px-2 text-left font-chat-sans text-(length:--chat-ui-font-size) leading-5 text-chat-fg outline-none", "data-hovered:bg-chat-hover data-pressed:bg-chat-selected data-focus-visible:ring-2 data-focus-visible:ring-chat-focus data-focus-visible:ring-inset", "[@media(pointer:coarse)]:h-10");
 /**
 * The chat picker: sections of chats and projects, collapsible, with an active row, running and unread
 * markers and a per-row menu. Usable on its own (in a host's own sidebar) or inside `Sidebar`.
 */
 function ChatList({ sections, activeId, onSelect, rowMenu, className, ...props }) {
+	const icons = useIcons();
+	const labels = useLabels();
 	const row = (chat, nested = false) => /* @__PURE__ */ jsx(ChatRow, {
 		chat,
 		active: chat.id === activeId,
@@ -2483,13 +3546,13 @@ function ChatList({ sections, activeId, onSelect, rowMenu, className, ...props }
 		row
 	}, item.id) : row(item));
 	return /* @__PURE__ */ jsx("nav", {
-		"aria-label": props["aria-label"] ?? "Chats",
+		"aria-label": props["aria-label"] ?? labels.chats,
 		className: clsx("flex flex-col gap-3", className),
 		children: sections.map((section) => section.title ? /* @__PURE__ */ jsxs(Disclosure$1, {
 			defaultExpanded: section.defaultExpanded ?? true,
 			className: "group/section",
 			children: [/* @__PURE__ */ jsxs(Heading, {
-				className: "m-0 flex h-7 items-center gap-1 pr-1 pl-2 font-chat-sans text-xs font-normal text-chat-subtle",
+				className: "m-0 flex h-7 items-center gap-1 pr-1 pl-2 font-chat-sans text-(length:--chat-ui-font-size-sm) leading-4 font-normal text-chat-subtle",
 				children: [
 					/* @__PURE__ */ jsxs(Button$1, {
 						slot: "trigger",
@@ -2497,9 +3560,9 @@ function ChatList({ sections, activeId, onSelect, rowMenu, className, ...props }
 						children: [/* @__PURE__ */ jsx("span", {
 							className: "truncate",
 							children: section.title
-						}), /* @__PURE__ */ jsx(ChevronRight, {
-							"aria-hidden": true,
-							className: "size-3 shrink-0 opacity-0 transition group-hover/section:opacity-100 group-aria-expanded/trigger:rotate-90 group-data-focus-visible/trigger:opacity-100 [@media(hover:none)]:opacity-100"
+						}), /* @__PURE__ */ jsx(IconSlot, {
+							className: "opacity-0 transition group-hover/section:opacity-100 group-aria-expanded/trigger:rotate-90 group-data-focus-visible/trigger:opacity-100 [@media(hover:none)]:opacity-100 [&_svg]:size-3",
+							children: icons.expand
 						})]
 					}),
 					section.badge,
@@ -2514,7 +3577,7 @@ function ChatList({ sections, activeId, onSelect, rowMenu, className, ...props }
 			}), section.onViewAll && /* @__PURE__ */ jsx(Button$1, {
 				onPress: section.onViewAll,
 				className: clsx(rowClass, "text-chat-muted"),
-				children: "View all"
+				children: labels.viewAll
 			})] })]
 		}, section.id) : /* @__PURE__ */ jsx("ul", {
 			className: "flex flex-col gap-px",
@@ -2523,16 +3586,18 @@ function ChatList({ sections, activeId, onSelect, rowMenu, className, ...props }
 	});
 }
 function ChatRow({ chat, active, nested, onSelect, menu }) {
+	const icons = useIcons();
 	const [menuOpen, setMenuOpen] = useState(false);
 	const { dismiss } = useSidebar();
+	const labels = useLabels();
 	const markerClass = "size-2 shrink-0 rounded-full";
 	const marker = chat.running ? /* @__PURE__ */ jsx("span", {
 		role: "img",
-		"aria-label": "Running",
+		"aria-label": labels.running,
 		className: clsx(markerClass, "animate-pulse bg-chat-accent motion-reduce:animate-none")
 	}) : chat.unread ? /* @__PURE__ */ jsx("span", {
 		role: "img",
-		"aria-label": "Unread",
+		"aria-label": labels.unread,
 		className: clsx(markerClass, "bg-chat-check")
 	}) : null;
 	const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
@@ -2557,11 +3622,11 @@ function ChatRow({ chat, active, nested, onSelect, menu }) {
 			isOpen: menuOpen,
 			onOpenChange: setMenuOpen,
 			children: [/* @__PURE__ */ jsx(IconButton, {
-				label: `More options for ${chat.title}`,
+				label: labels.moreOptionsFor(chat.title),
 				size: "sm",
 				tooltip: false,
 				className: clsx("absolute top-1/2 right-1 size-6 -translate-y-1/2 [@media(pointer:coarse)]:size-8", menuOpen || active ? "opacity-100" : "opacity-0 group-hover/item:opacity-100 group-focus-within/item:opacity-100 [@media(hover:none)]:opacity-100"),
-				children: /* @__PURE__ */ jsx(MoreHorizontal, {})
+				children: icons.more
 			}), /* @__PURE__ */ jsx(Popover, {
 				placement: "bottom start",
 				children: menu
@@ -2570,6 +3635,8 @@ function ChatRow({ chat, active, nested, onSelect, menu }) {
 	});
 }
 function ProjectRow({ project, activeId, row }) {
+	const icons = useIcons();
+	const labels = useLabels();
 	const holdsActive = project.chats.some((c) => c.id === activeId);
 	return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Disclosure$1, {
 		defaultExpanded: project.defaultExpanded ?? holdsActive,
@@ -2579,18 +3646,15 @@ function ProjectRow({ project, activeId, row }) {
 				slot: "trigger",
 				className: rowClass,
 				children: [
-					isExpanded ? /* @__PURE__ */ jsx(FolderOpen, {
-						"aria-hidden": true,
-						className: "size-4 shrink-0 text-chat-muted"
-					}) : /* @__PURE__ */ jsx(Folder, {
-						"aria-hidden": true,
-						className: "size-4 shrink-0 text-chat-muted"
+					/* @__PURE__ */ jsx(IconSlot, {
+						className: "text-chat-muted [&_svg]:size-4",
+						children: isExpanded ? icons.folderOpen : icons.folder
 					}),
 					/* @__PURE__ */ jsx("span", {
 						className: "min-w-0 flex-1 truncate",
 						children: project.name
 					}),
-					!isExpanded && project.chats.some((c) => c.unread || c.running) && /* @__PURE__ */ jsx(Badge, { children: "New" })
+					!isExpanded && project.chats.some((c) => c.unread || c.running) && /* @__PURE__ */ jsx(Badge, { children: labels.new })
 				]
 			})
 		}), /* @__PURE__ */ jsx(DisclosurePanel, { children: /* @__PURE__ */ jsx("ul", {
@@ -2600,7 +3664,11 @@ function ProjectRow({ project, activeId, row }) {
 	}) });
 }
 // src/views/chat-view.tsx
-/** Column defaults per density; `contentWidth` / `contentPadding` override them. */
+/**
+* Column defaults per density; `contentWidth` / `contentPadding` override them. Only the message size changes
+* with density: UI text is the same in all three. A theme can set the other text-size variables per density
+* with `[data-chat-density="panel"] { --chat-ui-font-size: … }`.
+*/
 const densityVars = {
 	full: {},
 	panel: {
@@ -2615,14 +3683,20 @@ const densityVars = {
 	}
 };
 /** A whole chat: header, the conversation, the docked composer. An empty chat shows `emptyState`. */
-function ChatView({ messages, busy = false, onSend, onStop, approvals, onApprove, onRetry, onEdit, onFeedback, renderPart, header, composer, emptyState, disclaimer, density = "full", contentWidth, contentPadding, className }) {
+function ChatView({ messages, busy = false, onSend, onStop, approvals, onApprove, onRetry, onEdit, onFeedback, renderPart, widgets, header, composer, emptyState, disclaimer, density = "full", contentWidth, contentPadding, className }) {
 	const style = {
 		...densityVars[density],
 		...contentWidth && { "--chat-content-width": contentWidth },
 		...contentPadding && { "--chat-content-padding": contentPadding }
 	};
+	const host = useMemo(() => ({
+		onPrompt: onSend,
+		onOpenLink: openInNewTab,
+		...widgets
+	}), [onSend, widgets]);
 	const empty = messages.length === 0;
 	const [body, short] = useShortPane();
+	const labels = useLabels();
 	const pending = onApprove && approvals?.[0];
 	const box = (variant) => /* @__PURE__ */ jsx(Composer, {
 		variant: density === "inline" || short && !empty ? "compact" : variant,
@@ -2630,7 +3704,7 @@ function ChatView({ messages, busy = false, onSend, onStop, approvals, onApprove
 		onSubmit: onSend,
 		...onStop && { onStop },
 		...composer,
-		...pending && { placeholder: "Or reply directly…" }
+		...pending && { placeholder: labels.replyDirectly }
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		"data-chat-density": density,
@@ -2645,28 +3719,31 @@ function ChatView({ messages, busy = false, onSend, onStop, approvals, onApprove
 					className: "w-full max-w-(--chat-content-width)",
 					children: emptyState ? emptyState(box("centered")) : box("centered")
 				})
-			}) : /* @__PURE__ */ jsx(MessageList, {
-				messages,
-				...onRetry && { onRetry },
-				...onEdit && { onEdit },
-				...onFeedback && { onFeedback },
-				...renderPart && { renderPart },
-				footer: /* @__PURE__ */ jsx("div", {
-					className: clsx("bg-linear-to-t from-chat-bg from-70% to-transparent px-(--chat-gutter)", short ? "pt-2" : "pt-4"),
-					children: /* @__PURE__ */ jsxs("div", {
-						className: "mx-auto w-full max-w-(--chat-content-width)",
-						children: [
-							pending && /* @__PURE__ */ jsx(ApprovalCard, {
-								approval: pending,
-								onRespond: onApprove,
-								className: "mb-2"
-							}, pending.part.id),
-							box("docked"),
-							/* @__PURE__ */ jsx("div", {
-								className: clsx("flex items-center justify-center py-1 pb-[max(0.25rem,env(safe-area-inset-bottom))] text-center font-chat-sans text-xs text-chat-subtle", short ? "min-h-2" : "min-h-6"),
-								children: disclaimer && !short && /* @__PURE__ */ jsx("span", { children: disclaimer })
-							})
-						]
+			}) : /* @__PURE__ */ jsx(WidgetHostProvider, {
+				host,
+				children: /* @__PURE__ */ jsx(MessageList, {
+					messages,
+					...onRetry && { onRetry },
+					...onEdit && { onEdit },
+					...onFeedback && { onFeedback },
+					...renderPart && { renderPart },
+					footer: /* @__PURE__ */ jsx("div", {
+						className: clsx("bg-linear-to-t from-chat-bg from-70% to-transparent px-(--chat-gutter)", short ? "pt-2" : "pt-4"),
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "mx-auto w-full max-w-(--chat-content-width)",
+							children: [
+								pending && /* @__PURE__ */ jsx(ApprovalCard, {
+									approval: pending,
+									onRespond: onApprove,
+									className: "mb-2"
+								}, pending.part.id),
+								box("docked"),
+								/* @__PURE__ */ jsx("div", {
+									className: clsx("flex items-center justify-center py-1 pb-[max(0.25rem,env(safe-area-inset-bottom))] text-center font-chat-sans text-(length:--chat-ui-font-size-sm) leading-4 text-chat-subtle", short ? "min-h-2" : "min-h-6"),
+									children: disclaimer && !short && /* @__PURE__ */ jsx("span", { children: disclaimer })
+								})
+							]
+						})
 					})
 				})
 			})
@@ -2703,6 +3780,51 @@ function EmptyState({ greeting, icon, children, footer }) {
 		]
 	});
 }
+// src/views/chat-transcript.tsx
+/**
+* A conversation to read, not to continue: a shared chat, an export, a log. Same messages as ChatView,
+* with no composer, approvals, retry, edit or feedback. Copy stays.
+*/
+function ChatTranscript({ messages, renderPart, widgets, header, notice, footer, start = "top", density = "full", contentWidth, contentPadding, className }) {
+	const style = {
+		...densityVars[density],
+		...contentWidth && { "--chat-content-width": contentWidth },
+		...contentPadding && { "--chat-content-padding": contentPadding }
+	};
+	const host = useMemo(() => {
+		const { allow, readResource } = { ...widgets };
+		const onOpenLink = widgets && "onOpenLink" in widgets ? widgets.onOpenLink : openInNewTab;
+		return {
+			...allow && { allow },
+			...onOpenLink && { onOpenLink },
+			...readResource && { readResource }
+		};
+	}, [widgets]);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-chat-density": density,
+		style,
+		className: clsx("chat-view flex h-full min-h-0 flex-col bg-chat-bg text-chat-fg", className),
+		children: [header, /* @__PURE__ */ jsx("div", {
+			className: "chat-view-body flex min-h-0 flex-1 flex-col",
+			children: /* @__PURE__ */ jsx(WidgetHostProvider, {
+				host,
+				children: /* @__PURE__ */ jsx(MessageList, {
+					messages,
+					start,
+					...notice && { header: notice },
+					...renderPart && { renderPart },
+					...footer && { footer: /* @__PURE__ */ jsx("div", {
+						className: "bg-linear-to-t from-chat-bg from-70% to-transparent px-(--chat-gutter) pt-4 pb-[max(1rem,env(safe-area-inset-bottom))]",
+						children: /* @__PURE__ */ jsx("div", {
+							className: "mx-auto w-full max-w-(--chat-content-width)",
+							children: footer
+						})
+					}) }
+				})
+			})
+		})]
+	});
+}
 // src/views/app-shell.tsx
 /**
 * A page with a sidebar: pinned and collapsible to an icon rail from tablet width up, a drawer over the
@@ -2727,6 +3849,7 @@ function AppShell({ sidebar, children, defaultCollapsed, className }) {
 		toggle,
 		dismiss
 	]);
+	const labels = useLabels();
 	const inDrawer = useMemo(() => ({
 		...pinned,
 		collapsed: false
@@ -2745,7 +3868,7 @@ function AppShell({ sidebar, children, defaultCollapsed, className }) {
 		}), drawer && /* @__PURE__ */ jsx(Drawer, {
 			isOpen: drawerOpen,
 			onOpenChange: setDrawerOpen,
-			"aria-label": "Sidebar",
+			"aria-label": labels.sidebar,
 			children: /* @__PURE__ */ jsx(SidebarContext.Provider, {
 				value: inDrawer,
 				children: sidebar
@@ -2755,13 +3878,16 @@ function AppShell({ sidebar, children, defaultCollapsed, className }) {
 }
 /** Opens the drawer on phones, collapses / expands the pinned sidebar elsewhere. */
 function SidebarToggle({ drawerOnly = false, className }) {
+	const icons = useIcons();
 	const { drawer, drawerOpen, collapsed, toggle } = useSidebar();
+	const labels = useLabels();
 	if (drawerOnly && !drawer) return null;
+	const label = drawer ? drawerOpen ? labels.closeSidebar : labels.openSidebar : collapsed ? labels.expandSidebar : labels.collapseSidebar;
 	return /* @__PURE__ */ jsx(IconButton, {
-		label: drawer ? drawerOpen ? "Close sidebar" : "Open sidebar" : collapsed ? "Expand sidebar" : "Collapse sidebar",
+		label,
 		onPress: toggle,
 		className,
-		children: /* @__PURE__ */ jsx(PanelLeft, {})
+		children: icons.sidebar
 	});
 }
 // src/views/sidebar.tsx
@@ -2801,7 +3927,7 @@ function Sidebar({ brand, headerActions, nav, children, footer, className }) {
 /** A nav row: icon and label; just the icon with a tooltip when collapsed. Closes the drawer when picked. */
 function SidebarItem({ icon, label, onPress, href, active, shortcut }) {
 	const { collapsed, dismiss } = useSidebar();
-	const className = clsx("group flex h-8 cursor-pointer items-center gap-2.5 rounded-chat-sm text-left text-sm text-chat-fg outline-none [@media(pointer:coarse)]:h-10", "data-hovered:bg-chat-hover data-pressed:bg-chat-selected data-focus-visible:ring-2 data-focus-visible:ring-chat-focus", "[&_svg]:size-4 [&_svg]:shrink-0", collapsed ? "w-9 justify-center [@media(pointer:coarse)]:w-10" : "w-full px-2", active && "bg-chat-selected");
+	const className = clsx("group flex h-8 cursor-pointer items-center gap-2.5 rounded-chat-sm text-left text-(length:--chat-ui-font-size) leading-5 text-chat-fg outline-none [@media(pointer:coarse)]:h-10", "data-hovered:bg-chat-hover data-pressed:bg-chat-selected data-focus-visible:ring-2 data-focus-visible:ring-chat-focus", "[&_svg]:size-4 [&_svg]:shrink-0", collapsed ? "w-9 justify-center [@media(pointer:coarse)]:w-10" : "w-full px-2", active && "bg-chat-selected");
 	const press = () => {
 		onPress?.();
 		dismiss();
@@ -2816,7 +3942,7 @@ function SidebarItem({ icon, label, onPress, href, active, shortcut }) {
 			children: label
 		}),
 		!collapsed && shortcut && /* @__PURE__ */ jsx("kbd", {
-			className: "font-chat-sans text-xs text-chat-subtle opacity-0 group-data-hovered:opacity-100",
+			className: "font-chat-sans text-(length:--chat-ui-font-size-sm) leading-4 text-chat-subtle opacity-0 group-data-hovered:opacity-100",
 			children: shortcut
 		})
 	] });
@@ -2842,6 +3968,7 @@ function SidebarItem({ icon, label, onPress, href, active, shortcut }) {
 const initials = (name) => name.split(/\s+/).slice(0, 2).map((w) => w[0]?.toUpperCase() ?? "").join("");
 /** The account row at the bottom: avatar, name, plan, and a menu. */
 function SidebarUser({ name, detail, avatarUrl, menu }) {
+	const icons = useIcons();
 	const { collapsed } = useSidebar();
 	const avatar = avatarUrl ? /* @__PURE__ */ jsx("img", {
 		src: avatarUrl,
@@ -2849,7 +3976,7 @@ function SidebarUser({ name, detail, avatarUrl, menu }) {
 		className: "size-8 shrink-0 rounded-full object-cover"
 	}) : /* @__PURE__ */ jsx("span", {
 		"aria-hidden": true,
-		className: "flex size-8 shrink-0 items-center justify-center rounded-full bg-chat-fg text-xs font-medium text-chat-bg",
+		className: "flex size-8 shrink-0 items-center justify-center rounded-full bg-chat-fg text-(length:--chat-ui-font-size-sm) leading-4 font-medium text-chat-bg",
 		children: initials(name)
 	});
 	const button = /* @__PURE__ */ jsxs(Button$1, {
@@ -2858,15 +3985,15 @@ function SidebarUser({ name, detail, avatarUrl, menu }) {
 		children: [avatar, !collapsed && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
 			className: "flex min-w-0 flex-1 flex-col",
 			children: [/* @__PURE__ */ jsx("span", {
-				className: "truncate text-sm text-chat-fg",
+				className: "truncate text-(length:--chat-ui-font-size) leading-5 text-chat-fg",
 				children: name
 			}), detail && /* @__PURE__ */ jsx("span", {
-				className: "truncate text-xs text-chat-muted",
+				className: "truncate text-(length:--chat-ui-font-size-sm) leading-4 text-chat-muted",
 				children: detail
 			})]
-		}), menu && /* @__PURE__ */ jsx(ChevronsUpDown, {
-			"aria-hidden": true,
-			className: "size-4 shrink-0 text-chat-muted"
+		}), menu && /* @__PURE__ */ jsx(IconSlot, {
+			className: "text-chat-muted [&_svg]:size-4",
+			children: icons.switcher
 		})] })]
 	});
 	if (!menu) return button;
@@ -2875,4 +4002,4 @@ function SidebarUser({ name, detail, avatarUrl, menu }) {
 		children: menu
 	})] });
 }
-export { ActivityGroup, AgentProvider, AgentRegistry, AppShell, ApprovalCard, AssistantMessage, AttachButton, AttachmentCard, AttachmentRow, Badge, Button, Caret, ChatHeader, ChatList, ChatTheme, ChatTitleMenu, ChatView, CodeBlock, Composer, ContextMenu, ContextPanel, DRAWER_QUERY, Disclosure, Drawer, EmptyState, IconButton, Markdown, Menu, MenuItem, MenuNote, MenuSearch, MenuSection, MenuSeparator, MenuTrigger, MessageList, Modal, ModelPicker, Panel, PastedTextDialog, Popover, Sidebar, SidebarItem, SidebarToggle, SidebarUser, SubmenuTrigger, TokenCounter, ToolViewsProvider, Tooltip, UserMessage, activityHeading, activityLabel, commandTool, defaultToolViews, formatDuration, formatRelativeTime, formatTokens, memoryTool, messageText, sseTransport, useAgentContext, useAgentRegistry, useAgentSnapshot, useAgentTool, useAttachments, useChat, useChatTool, useCountUp, useMediaQuery, useSidebar, useSmoothText, useToolView, useToolViews, userMessage, webSearchTool };
+export { ActivityGroup, AgentProvider, AgentRegistry, AppShell, ApprovalCard, AssistantMessage, AttachButton, AttachmentCard, AttachmentRow, Badge, Button, Caret, ChatHeader, ChatList, ChatNotice, ChatTheme, ChatTitleMenu, ChatTranscript, ChatView, CodeBlock, Composer, ContextMenu, ContextPanel, DRAWER_QUERY, Disclosure, Drawer, EmptyState, IconButton, Markdown, MarkdownLinksProvider, Menu, MenuItem, MenuNote, MenuSearch, MenuSection, MenuSeparator, MenuTrigger, MessageList, Modal, ModelPicker, Panel, PastedTextDialog, Popover, Sidebar, SidebarItem, SidebarToggle, SidebarUser, SubmenuTrigger, TokenCounter, ToolViewsProvider, Tooltip, UiComponentsProvider, UiMarkupBlock, UiTree, UserMessage, WIDGET_MAX_HEIGHT, WidgetFrame, WidgetHostProvider, WidgetPartView, activityHeading, activityLabel, commandTool, defaultIcons, defaultLabels, defaultToolViews, formatDuration, formatRelativeTime, formatTokens, htmlComponent, intersectAllow, memoryTool, messageText, openInNewTab, readTreeInput, readVisualizeInput, sseTransport, uiMarkupToolView, uiTreeToolView, useAgentContext, useAgentRegistry, useAgentSnapshot, useAgentTool, useAttachments, useChat, useChatTool, useCountUp, useIcons, useLabels, useMediaQuery, useSidebar, useSmoothText, useToolView, useToolViews, useUiAction, useUiMarkupLanguage, useUiState, useWidgetHost, userMessage, webFetchTool, webSearchTool, widgetCsp, widgetToolView };