agentic-ui-kit 0.4.0 → 0.5.0

package/dist/index.js

@@ -1,10 +1,10 @@
 "use client";
-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-DtMYer7I.js";
+import { C as toBlocks, E as awaitingToolCalls, N as salvageJson, T as applyEvent, _ as replacedId, d as isStateRef, f as matchesSchema, g as uiActionSchema, i as parseUiMarkup, j as settleToolCall, w as activityTokens, x as readEventStream } from "./ui-markup-CG9Lednh.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, ToggleButton, ToggleButtonGroup, Tooltip as Tooltip$1, TooltipTrigger, useFilter } from "react-aria-components";
+import { Autocomplete, Button as Button$1, Dialog, DialogTrigger, Disclosure as Disclosure$1, DisclosurePanel, Focusable, Header, Heading, Input, Keyboard, Link, Menu as Menu$1, MenuItem as MenuItem$1, MenuSection as MenuSection$1, MenuTrigger, MenuTrigger as MenuTrigger$1, Modal as Modal$1, ModalOverlay, Popover as Popover$1, SearchField, Separator, SubmenuTrigger, Text, ToggleButton, ToggleButtonGroup, Tooltip as Tooltip$1, TooltipTrigger, useFilter } from "react-aria-components";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Component, Fragment as Fragment$1, createContext, createElement, memo, useCallback, useContext, useEffect, useId, 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";
@@ -74,37 +74,6 @@ function Badge({ children, tone = "outline", icon, className }) {
 		children: [icon, children]
 	});
 }
-// src/primitives/segmented-control.tsx
-/**
-* One of a few options, side by side on a track, like claude.ai's Chat / Cowork switch. Themed with
-* `--chat-segment-track` (default: a shade darker than the surface it sits on) and `--chat-segment-selected`
-* (default `--chat-raised`).
-*/
-function SegmentedControl({ label, options, value, onChange, className }) {
-	return /* @__PURE__ */ jsx(ToggleButtonGroup, {
-		"aria-label": label,
-		selectionMode: "single",
-		disallowEmptySelection: true,
-		selectedKeys: [value],
-		onSelectionChange: (keys) => {
-			const next = [...keys][0];
-			if (next !== void 0) onChange(next);
-		},
-		className: clsx("inline-flex shrink-0 items-center gap-0.5 rounded-chat-md p-0.5", "bg-[var(--chat-segment-track,color-mix(in_srgb,var(--chat-bg)_55%,transparent))]", className),
-		children: options.map((o) => {
-			const button = /* @__PURE__ */ jsxs(ToggleButton, {
-				id: o.id,
-				...o.iconOnly && { "aria-label": o.label },
-				className: clsx("inline-flex h-6 cursor-pointer items-center justify-center gap-1.5 rounded-[calc(var(--chat-radius-md)-2px)] font-chat-sans text-(length:--chat-ui-font-size) leading-5 text-chat-muted outline-none transition-colors select-none [&_svg]:size-4", o.iconOnly ? "w-7" : "px-2", "data-hovered:text-chat-fg data-focus-visible:ring-2 data-focus-visible:ring-chat-focus", "data-selected:bg-[var(--chat-segment-selected,var(--chat-raised))] data-selected:text-chat-fg data-selected:shadow-[inset_0_0_0_1px_var(--chat-border-strong)]"),
-				children: [o.icon, !o.iconOnly && o.label]
-			}, o.id);
-			return o.iconOnly ? /* @__PURE__ */ jsx(Tooltip, {
-				content: o.label,
-				children: button
-			}, o.id) : button;
-		})
-	});
-}
 // src/primitives/caret.tsx
 /** The small filled triangle claude.ai uses after expandable labels. Points right; rotate to point down. */
 function Caret({ className }) {
@@ -182,6 +151,176 @@ function IconSlot({ children, className }) {
 		children
 	});
 }
+// 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",
+	effortFaster: "Faster",
+	effortSmarter: "Smarter",
+	moreModels: "More models",
+	widget: "Widget",
+	visualUpdated: "Updated below ↓",
+	visualUpdating: "Updating…",
+	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/copy-button.tsx
+/** Copies `text`; shows a check for a moment after. */
+function CopyButton({ text, className }) {
+	const icons = useIcons();
+	const labels = useLabels();
+	const [copied, setCopied] = useState(false);
+	return /* @__PURE__ */ jsx(IconButton, {
+		label: copied ? labels.copied : labels.copy,
+		size: "sm",
+		...className && { className },
+		onPress: () => {
+			navigator.clipboard?.writeText(text);
+			setCopied(true);
+			setTimeout(() => setCopied(false), 1500);
+		},
+		children: copied ? icons.copied : icons.copy
+	});
+}
+// src/primitives/segmented-control.tsx
+/**
+* One of a few options, side by side on a track, like claude.ai's Chat / Cowork switch. Themed with
+* `--chat-segment-track` (default: a shade darker than the surface it sits on) and `--chat-segment-selected`
+* (default `--chat-raised`).
+*/
+function SegmentedControl({ label, options, value, onChange, className }) {
+	return /* @__PURE__ */ jsx(ToggleButtonGroup, {
+		"aria-label": label,
+		selectionMode: "single",
+		disallowEmptySelection: true,
+		selectedKeys: [value],
+		onSelectionChange: (keys) => {
+			const next = [...keys][0];
+			if (next !== void 0) onChange(next);
+		},
+		className: clsx("inline-flex shrink-0 items-center gap-0.5 rounded-chat-md p-0.5", "bg-[var(--chat-segment-track,color-mix(in_srgb,var(--chat-bg)_55%,transparent))]", className),
+		children: options.map((o) => {
+			const button = /* @__PURE__ */ jsxs(ToggleButton, {
+				id: o.id,
+				...o.iconOnly && { "aria-label": o.label },
+				className: clsx("inline-flex h-6 cursor-pointer items-center justify-center gap-1.5 rounded-[calc(var(--chat-radius-md)-2px)] font-chat-sans text-(length:--chat-ui-font-size) leading-5 text-chat-muted outline-none transition-colors select-none [&_svg]:size-4", o.iconOnly ? "w-7" : "px-2", "data-hovered:text-chat-fg data-focus-visible:ring-2 data-focus-visible:ring-chat-focus", "data-selected:bg-[var(--chat-segment-selected,var(--chat-raised))] data-selected:text-chat-fg data-selected:shadow-[inset_0_0_0_1px_var(--chat-border-strong)]"),
+				children: [o.icon, !o.iconOnly && o.label]
+			}, o.id);
+			return o.iconOnly ? /* @__PURE__ */ jsx(Tooltip, {
+				content: o.label,
+				children: button
+			}, o.id) : button;
+		})
+	});
+}
 // 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 }) {
@@ -559,7 +698,7 @@ function useHighlight(code, language) {
 }
 // src/primitives/code-block.tsx
 /** Monospace code with Shiki highlighting, scrolling past a fixed height. */
-function CodeBlock({ code, language, label = language, variant = "plain", className }) {
+function CodeBlock({ code, language, label = language, variant = "plain", copy = variant === "boxed", className }) {
 	const result = useHighlight(code, language);
 	const lines = result?.lines;
 	const themeBackground = useCodeThemes().background === "theme" && variant === "boxed" && !!result;
@@ -571,9 +710,12 @@ function CodeBlock({ code, language, label = language, variant = "plain", classN
 		"data-chat-code-bg": themeBackground ? "theme" : void 0,
 		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-(length:--chat-ui-font-size-sm) leading-4 text-chat-subtle",
-			children: label
+		children: [(label || copy) && /* @__PURE__ */ jsxs("div", {
+			className: clsx("flex items-center gap-2 font-chat-sans text-(length:--chat-ui-font-size-sm) leading-4 text-chat-subtle", copy ? "-mt-1.5 -mr-2 mb-1.5" : "mb-3"),
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "min-w-0 flex-1 truncate",
+				children: label
+			}), copy && /* @__PURE__ */ jsx(CopyButton, { text: code })]
 		}), /* @__PURE__ */ jsx("pre", {
 			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", {
@@ -584,123 +726,6 @@ 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
@@ -1247,6 +1272,87 @@ const SidebarContext = createContext({
 	dismiss: () => {}
 });
 const useSidebar = () => useContext(SidebarContext);
+// src/components/replacements.tsx
+/**
+* In-place updates of drawn visuals: a tool call whose input has `replaces: <id>` takes the place of that
+* earlier call. In the same reply the newest finished call is drawn where the first one was, and the old one
+* stays (dimmed) until the new one's input is complete. A call replaced from a later reply folds into a link.
+*/
+/** Ready to take the old one's place: its input is complete and it didn't fail. */
+const isReady = (p) => p.status !== "streaming" && p.status !== "input" && p.status !== "error";
+const callsOf = (m) => m.parts.filter((p) => p.type === "tool_call");
+const replaces = (p) => replacedId(p.input ?? p.partialInput);
+/** One reply's chains: each call's first call (where the chain is drawn) and each first call's chain, in order. */
+function chainsOf(message) {
+	const first = /* @__PURE__ */ new Map();
+	const chains = /* @__PURE__ */ new Map();
+	for (const call of callsOf(message)) {
+		const r = replaces(call);
+		const root = r !== void 0 && first.has(r) ? first.get(r) : call.id;
+		first.set(call.id, root);
+		chains.set(root, [...chains.get(root) ?? [], call]);
+	}
+	return {
+		first,
+		chains
+	};
+}
+/** Calls replaced by a finished call in a later reply: replaced id → the newest such call. */
+function laterReplacements(messages) {
+	const later = /* @__PURE__ */ new Map();
+	for (const m of messages) {
+		if (m.role !== "assistant") continue;
+		const own = new Set(callsOf(m).map((c) => c.id));
+		for (const call of callsOf(m)) {
+			const r = replaces(call);
+			if (r !== void 0 && !own.has(r) && isReady(call)) later.set(r, call);
+		}
+	}
+	return later;
+}
+const LaterContext = createContext(/* @__PURE__ */ new Map());
+function LaterReplacements({ value, children }) {
+	return /* @__PURE__ */ jsx(LaterContext.Provider, {
+		value,
+		children
+	});
+}
+/** The call in a later reply that replaces any call of this chain, if there is one. */
+function useLaterReplacement(chain) {
+	const later = useContext(LaterContext);
+	for (let i = chain.length - 1; i >= 0; i--) {
+		const by = later.get(chain[i].id);
+		if (by) return by;
+	}
+}
+/** The DOM id of a drawn tool call, for the "Updated below" link. */
+const toolAnchor = (id) => `chat-tool-${id}`;
+/** Draws a chain: the newest finished call (dimmed while a newer one streams), or a link to its later update. */
+function ToolChain({ chain, draw }) {
+	const labels = useLabels();
+	const later = useLaterReplacement(chain);
+	const shown = chain.findLast(isReady) ?? chain[0];
+	const updating = chain.indexOf(shown) < chain.length - 1 && chain.at(-1).status !== "error";
+	if (later) return /* @__PURE__ */ jsx(Button, {
+		variant: "ghost",
+		size: "sm",
+		className: "self-start text-chat-muted data-hovered:text-chat-fg",
+		onPress: () => document.getElementById(toolAnchor(later.id))?.scrollIntoView({
+			behavior: "smooth",
+			block: "center"
+		}),
+		children: labels.visualUpdated
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		id: toolAnchor(chain[0].id),
+		"aria-busy": updating || void 0,
+		className: updating ? "opacity-60 transition-opacity" : "transition-opacity",
+		children: [/* @__PURE__ */ jsx("div", { children: draw(shown) }, shown.id), updating && /* @__PURE__ */ jsx("p", {
+			className: "chat-shimmer mt-1 font-chat-sans text-(length:--chat-ui-font-size-sm) text-chat-muted",
+			children: labels.visualUpdating
+		})]
+	});
+}
 // src/components/widget-frame.tsx
 const WidgetHostContext = createContext({});
 /** Sets what widgets below may do. ChatView and ChatTranscript set it from their `widgets` prop. */
@@ -1362,6 +1468,8 @@ const BOOT = `(() => {
   new ResizeObserver(() => {
     const h = Math.ceil(root.getBoundingClientRect().height);
     if (h !== last) { last = h; post("ui/notifications/size-changed", { height: h }); }
+    // The frame grows to fit, a moment behind; only content past the cap gets a scrollbar.
+    document.documentElement.style.overflowY = h > ${WIDGET_MAX_HEIGHT} ? "auto" : "hidden";
   }).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 }); } };
@@ -1374,6 +1482,7 @@ function fragmentDoc(csp, theme) {
 <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 { overflow: hidden; }
 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; }
@@ -2388,10 +2497,14 @@ function ActivityGroup({ parts, defaultExpanded = false, className }) {
 		}) : /* @__PURE__ */ jsx(Disclosure, {
 			isExpanded: expanded,
 			onExpandedChange: setExpanded,
-			summary: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Live, {
-				live,
-				children: activityHeading(parts, views, labels)
-			}), after] }),
+			summary: /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx(Lead, { live }),
+				/* @__PURE__ */ jsx(Live, {
+					live,
+					children: activityHeading(parts, views, labels)
+				}),
+				after
+			] }),
 			summaryClassName: "text-(length:--chat-activity-font-size)",
 			panelClassName: "pt-3",
 			children: /* @__PURE__ */ jsx("div", {
@@ -2401,6 +2514,17 @@ function ActivityGroup({ parts, defaultExpanded = false, className }) {
 		})
 	});
 }
+/** The host's mark left of the summary (`icons.activity` while working, `icons.activityDone` after), if set. */
+function Lead({ live }) {
+	const icons = useIcons();
+	const icon = live ? icons.activity : icons.activityDone;
+	if (!icon) return null;
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		className: "chat-activity-icon mr-1.5 inline-flex size-[1.15em] shrink-0 items-center self-center [&_svg]:size-full",
+		children: icon
+	});
+}
 const SHIMMER_MS = 2e3;
 /**
 * Sweeps a highlight across a label while its step is running. The animation starts at the phase of a
@@ -2425,10 +2549,14 @@ function SingleStep({ part, live, after, expanded, onExpandedChange }) {
 	return /* @__PURE__ */ jsx(Disclosure, {
 		isExpanded: expanded,
 		onExpandedChange,
-		summary: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Live, {
-			live,
-			children: summary
-		}), after] }),
+		summary: /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx(Lead, { live }),
+			/* @__PURE__ */ jsx(Live, {
+				live,
+				children: summary
+			}),
+			after
+		] }),
 		summaryClassName: "text-(length:--chat-activity-font-size)",
 		panelClassName: "pt-3",
 		children: /* @__PURE__ */ jsx("div", {
@@ -2729,21 +2857,6 @@ function formatRelativeTime(iso, now = Date.now(), labels = defaultLabels) {
 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 ? labels.copied : labels.copy,
-		size: "sm",
-		onPress: () => {
-			navigator.clipboard?.writeText(text);
-			setCopied(true);
-			setTimeout(() => setCopied(false), 1500);
-		},
-		children: copied ? icons.copied : icons.copy
-	});
-}
 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, copy = true, time = true, className }) {
@@ -2838,6 +2951,7 @@ function AssistantMessage({ message, onRetry, onFeedback, onReadAloud, renderPar
 	const streaming = message.status === "streaming";
 	const views = useToolViews();
 	const blocks = toBlocks(message.parts, (part) => views[part.name]?.Block !== void 0);
+	const { first, chains } = chainsOf(message);
 	return /* @__PURE__ */ jsxs("div", {
 		className: clsx("group/message flex flex-col gap-4", className),
 		children: [
@@ -2852,8 +2966,14 @@ function AssistantMessage({ message, onRetry, onFeedback, onReadAloud, renderPar
 					})] }, block.id);
 				}
 				if (block.kind === "tool") {
-					const ToolBlock = views[block.part.name].Block;
-					return /* @__PURE__ */ jsx(ToolBlock, { part: block.part }, block.id);
+					if (first.get(block.part.id) !== block.part.id) return null;
+					return /* @__PURE__ */ jsx(ToolChain, {
+						chain: chains.get(block.part.id) ?? [block.part],
+						draw: (part) => {
+							const ToolBlock = (views[part.name] ?? views[block.part.name]).Block;
+							return /* @__PURE__ */ jsx(ToolBlock, { part });
+						}
+					}, block.id);
 				}
 				const part = block.part;
 				if (part.type === "text") return /* @__PURE__ */ jsx(Markdown, {
@@ -3251,6 +3371,115 @@ function AttachButton({ children, label, icon, className, menuClassName }) {
 		children
 	})] });
 }
+// src/components/effort-slider.tsx
+/**
+* Effort as a slider with one stop per level, lowest (faster) on the left: title and the current level on
+* top, the level's description under them, "Faster" and "Smarter" under the track. Arrow keys move a stop.
+*/
+function EffortSlider({ efforts, value, onChange, label, className }) {
+	const labels = useLabels();
+	const id = useId();
+	const index = Math.max(0, efforts.findIndex((e) => e.id === value));
+	const current = efforts[index];
+	const last = Math.max(1, efforts.length - 1);
+	const at = (i) => `${i / last * 100}%`;
+	if (!current) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("flex w-full flex-col gap-1 font-chat-sans", className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [
+					/* @__PURE__ */ jsx("label", {
+						htmlFor: id,
+						className: "flex-1 text-(length:--chat-ui-font-size) font-medium text-chat-fg",
+						children: label ?? labels.effort
+					}),
+					current.recommended && /* @__PURE__ */ jsx(Badge, { children: labels.recommended }),
+					current.warning && /* @__PURE__ */ jsx(Badge, {
+						tone: "warning",
+						children: current.warning
+					}),
+					/* @__PURE__ */ jsx("output", {
+						htmlFor: id,
+						className: "text-(length:--chat-ui-font-size) text-chat-fg",
+						children: current.label
+					})
+				]
+			}),
+			current.description && /* @__PURE__ */ jsx("p", {
+				className: "text-(length:--chat-ui-font-size-sm) leading-4 text-chat-muted",
+				children: current.description
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "relative mx-2 mt-2 h-6",
+				children: [
+					/* @__PURE__ */ jsx("div", { className: "absolute top-1/2 right-0 left-0 h-1 -translate-y-1/2 rounded-full bg-chat-border-strong" }),
+					/* @__PURE__ */ jsx("div", {
+						className: "absolute top-1/2 left-0 h-1 -translate-y-1/2 rounded-full bg-chat-accent",
+						style: { width: at(index) }
+					}),
+					efforts.map((e, i) => /* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: clsx("absolute top-1/2 size-1.5 -translate-1/2 rounded-full", i <= index ? "bg-chat-accent-fg/70" : "bg-chat-subtle"),
+						style: { left: at(i) }
+					}, e.id)),
+					/* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: "pointer-events-none absolute top-1/2 size-4 -translate-1/2 rounded-full border-2 border-chat-accent bg-chat-fg shadow-sm peer-focus-visible:ring-2",
+						style: { left: at(index) }
+					}),
+					/* @__PURE__ */ jsx("input", {
+						id,
+						type: "range",
+						min: 0,
+						max: efforts.length - 1,
+						step: 1,
+						value: index,
+						"aria-valuetext": current.label,
+						onChange: (e) => {
+							const next = efforts[Number(e.target.value)];
+							if (next && next.id !== value) onChange(next.id);
+						},
+						onKeyDown: (e) => {
+							const step = e.key === "ArrowRight" || e.key === "ArrowUp" ? 1 : e.key === "ArrowLeft" || e.key === "ArrowDown" ? -1 : 0;
+							const next = step ? efforts[index + step] : void 0;
+							if (next) {
+								e.preventDefault();
+								onChange(next.id);
+							}
+						},
+						className: "absolute -inset-x-2 inset-y-0 w-[calc(100%+1rem)] cursor-pointer rounded-full opacity-0 focus-visible:opacity-100 focus-visible:outline-2 focus-visible:outline-chat-focus [&::-webkit-slider-thumb]:opacity-0"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex justify-between text-(length:--chat-ui-font-size-sm) leading-4 text-chat-subtle",
+				children: [/* @__PURE__ */ jsx("span", { children: labels.effortFaster }), /* @__PURE__ */ jsx("span", { children: labels.effortSmarter })]
+			})
+		]
+	});
+}
+/** A composer pill ("◎ Medium") that opens the effort slider above it, like chatgpt.com's Think button. */
+function EffortButton({ icon, children, className, ...slider }) {
+	const current = slider.efforts.find((e) => e.id === slider.value) ?? slider.efforts[0];
+	const labels = useLabels();
+	return /* @__PURE__ */ jsxs(DialogTrigger, { children: [/* @__PURE__ */ jsxs(Button, {
+		variant: "ghost",
+		size: "sm",
+		className: clsx("text-chat-muted data-hovered:text-chat-fg", className),
+		"aria-label": `${labels.effort}: ${current?.label ?? ""}`,
+		children: [icon, children ?? current?.label]
+	}), /* @__PURE__ */ jsx(Popover, {
+		placement: "top end",
+		className: "w-72 p-3",
+		children: /* @__PURE__ */ jsx(Dialog, {
+			"aria-label": labels.effort,
+			className: "outline-none",
+			children: /* @__PURE__ */ jsx(EffortSlider, { ...slider })
+		})
+	})] });
+}
 // 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, footnote, className }) {
@@ -3371,6 +3600,7 @@ function MessageList({ messages, onRetry, onEdit, onFeedback, onReadAloud, actio
 	const content = useRef(null);
 	const stuck = useRef(start === "bottom");
 	const labels = useLabels();
+	const later = useMemo(() => laterReplacements(messages), [messages]);
 	const [atBottom, setAtBottom] = useState(true);
 	const toBottom = useCallback((behavior = "auto") => {
 		const el = scroller.current;
@@ -3420,22 +3650,25 @@ function MessageList({ messages, onRetry, onEdit, onFeedback, onReadAloud, actio
 					role: "log",
 					"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: [header, messages.map((m) => m.role === "user" ? /* @__PURE__ */ jsx(UserMessage, {
-						message: m,
-						...onEdit && { onEdit: () => onEdit(m.id) },
-						...actions?.extra && { actions: actions.extra(m) },
-						...actions?.copy === false && { copy: false },
-						...actions?.time === false && { time: false }
-					}, m.id) : /* @__PURE__ */ jsx(AssistantMessage, {
-						message: m,
-						...onRetry && { onRetry: () => onRetry(m.id) },
-						...onFeedback && { onFeedback: (f) => onFeedback(m.id, f) },
-						...onReadAloud && { onReadAloud: () => onReadAloud(m.id) },
-						...actions?.extra && { actions: actions.extra(m) },
-						...actions?.copy === false && { copy: false },
-						...actions?.time === false && { time: false },
-						...renderPart && { renderPart }
-					}, m.id))]
+					children: [header, /* @__PURE__ */ jsx(LaterReplacements, {
+						value: later,
+						children: messages.map((m) => m.role === "user" ? /* @__PURE__ */ jsx(UserMessage, {
+							message: m,
+							...onEdit && { onEdit: () => onEdit(m.id) },
+							...actions?.extra && { actions: actions.extra(m) },
+							...actions?.copy === false && { copy: false },
+							...actions?.time === false && { time: false }
+						}, m.id) : /* @__PURE__ */ jsx(AssistantMessage, {
+							message: m,
+							...onRetry && { onRetry: () => onRetry(m.id) },
+							...onFeedback && { onFeedback: (f) => onFeedback(m.id, f) },
+							...onReadAloud && { onReadAloud: () => onReadAloud(m.id) },
+							...actions?.extra && { actions: actions.extra(m) },
+							...actions?.copy === false && { copy: false },
+							...actions?.time === false && { time: false },
+							...renderPart && { renderPart }
+						}, m.id))
+					})]
 				}), footer && /* @__PURE__ */ jsx("div", {
 					className: "sticky bottom-0",
 					children: footer
@@ -3732,7 +3965,7 @@ const densityVars = {
 	}
 };
 /** A whole chat: header, the conversation, the docked composer. An empty chat shows `emptyState`. */
-function ChatView({ messages, busy = false, onSend, onStop, approvals, onApprove, onRetry, onEdit, onFeedback, onReadAloud, messageActions, renderPart, widgets, header, composer, emptyState, disclaimer, density = "full", contentWidth, contentPadding, className }) {
+function ChatView({ messages, busy = false, onSend, onStop, approvals, onApprove, onRetry, onEdit, onFeedback, onReadAloud, messageActions, renderPart, widgets, header, composer, emptyState, disclaimer, renderComposer, density = "full", contentWidth, contentPadding, className }) {
 	const style = {
 		...densityVars[density],
 		...contentWidth && { "--chat-content-width": contentWidth },
@@ -3747,14 +3980,17 @@ function ChatView({ messages, busy = false, onSend, onStop, approvals, onApprove
 	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,
-		busy,
-		onSubmit: onSend,
-		...onStop && { onStop },
-		...composer,
-		...pending && { placeholder: labels.replyDirectly }
-	});
+	const box = (variant) => {
+		const element = /* @__PURE__ */ jsx(Composer, {
+			variant: density === "inline" || short && !empty ? "compact" : variant,
+			busy,
+			onSubmit: onSend,
+			...onStop && { onStop },
+			...composer,
+			...pending && { placeholder: labels.replyDirectly }
+		});
+		return renderComposer ? renderComposer(element, variant === "centered" ? "empty" : "docked") : element;
+	};
 	return /* @__PURE__ */ jsxs("div", {
 		"data-chat-density": density,
 		style,
@@ -3822,7 +4058,7 @@ function EmptyState({ greeting, icon, children, footer }) {
 			/* @__PURE__ */ jsxs("h1", {
 				className: "chat-empty-greeting flex items-center justify-center gap-3 text-center font-chat-serif text-[clamp(1.5rem,6cqw,2.5rem)] font-normal text-chat-fg",
 				children: [icon && /* @__PURE__ */ jsx("span", {
-					className: "flex shrink-0 text-chat-accent [&_svg]:size-[1em]",
+					className: "flex shrink-0 text-[var(--chat-empty-icon,var(--chat-accent))] [&_svg]:size-[1em]",
 					children: icon
 				}), greeting]
 			}),
@@ -3943,17 +4179,27 @@ function SidebarToggle({ drawerOnly = false, className }) {
 }
 // src/views/sidebar.tsx
 /** The claude.ai sidebar frame. Collapses to an icon rail inside `AppShell`; a drawer on phones. */
-function Sidebar({ brand, headerActions, nav, children, footer, className }) {
+function Sidebar({ brand, brandIcon, headerActions, nav, children, footer, className }) {
 	const { collapsed } = useSidebar();
 	return /* @__PURE__ */ jsxs("div", {
 		className: clsx("flex h-full flex-col font-chat-sans", collapsed ? "w-13" : "w-full", className),
 		children: [
+			collapsed && brandIcon && /* @__PURE__ */ jsx("div", {
+				className: "flex h-12 shrink-0 items-center justify-center [&_svg]:size-5",
+				children: brandIcon
+			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: clsx("flex h-12 shrink-0 items-center gap-1 px-2", collapsed && "justify-center"),
 				children: [
-					!collapsed && /* @__PURE__ */ jsx("div", {
-						className: "min-w-0 flex-1 truncate px-1.5 font-chat-serif text-lg text-chat-fg",
-						children: brand
+					!collapsed && /* @__PURE__ */ jsxs("div", {
+						className: "flex min-w-0 flex-1 items-center gap-2 px-1.5 font-chat-serif text-lg text-chat-fg",
+						children: [brandIcon && /* @__PURE__ */ jsx("span", {
+							className: "flex shrink-0 [&_svg]:size-5",
+							children: brandIcon
+						}), /* @__PURE__ */ jsx("span", {
+							className: "min-w-0 truncate",
+							children: brand
+						})]
 					}),
 					!collapsed && headerActions,
 					/* @__PURE__ */ jsx(SidebarToggle, {})
@@ -4053,4 +4299,4 @@ function SidebarUser({ name, detail, avatarUrl, menu }) {
 		children: menu
 	})] });
 }
-export { ActivityGroup, AgentProvider, AgentRegistry, AppShell, ApprovalCard, AssistantMessage, AttachButton, AttachmentCard, AttachmentRow, Badge, Button, Caret, ChatHeader, ChatList, ChatNotice, ChatTheme, ChatTitleMenu, ChatTranscript, ChatView, CodeBlock, Composer, ContextMenu, ContextPanel, DRAWER_QUERY, Disclosure, Drawer, EmptyState, IconButton, Markdown, MarkdownLinksProvider, Menu, MenuItem, MenuNote, MenuSearch, MenuSection, MenuSeparator, MenuTrigger, MessageList, Modal, ModelPicker, Panel, PastedTextDialog, Popover, SegmentedControl, 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 };
+export { ActivityGroup, AgentProvider, AgentRegistry, AppShell, ApprovalCard, AssistantMessage, AttachButton, AttachmentCard, AttachmentRow, Badge, Button, Caret, ChatHeader, ChatList, ChatNotice, ChatTheme, ChatTitleMenu, ChatTranscript, ChatView, CodeBlock, Composer, ContextMenu, ContextPanel, CopyButton, DRAWER_QUERY, Disclosure, Drawer, EffortButton, EffortSlider, EmptyState, IconButton, Markdown, MarkdownLinksProvider, Menu, MenuItem, MenuNote, MenuSearch, MenuSection, MenuSeparator, MenuTrigger, MessageList, Modal, ModelPicker, Panel, PastedTextDialog, Popover, SegmentedControl, 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 };