agentic-ui-kit 0.0.0-stage → 0.1.0

package/dist/index.js

@@ -0,0 +1,2785 @@
+"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 { 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 { UNSAFE_PortalProvider } from "react-aria";
+import { createMathPlugin } from "@streamdown/math";
+import { Streamdown, defaultRehypePlugins } from "streamdown";
+// src/primitives/tooltip.tsx
+function Tooltip({ content, children, placement = "top", delay = 600 }) {
+	return /* @__PURE__ */ jsxs(TooltipTrigger, {
+		delay,
+		closeDelay: 0,
+		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",
+			children: content
+		})]
+	});
+}
+// src/primitives/button.tsx
+const focusRing = "outline-none data-focus-visible:ring-2 data-focus-visible:ring-chat-focus";
+const variants = {
+	/** Plain text button, highlights on hover. Sidebar rows, header buttons. */
+	ghost: "text-chat-fg data-hovered:bg-chat-hover data-pressed:bg-chat-selected",
+	/** 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"
+};
+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"
+};
+function Button({ variant = "ghost", size = "md", className, ...props }) {
+	return /* @__PURE__ */ jsx(Button$1, {
+		...props,
+		className: clsx("inline-flex cursor-pointer items-center rounded-chat-sm font-chat-sans whitespace-nowrap transition-colors select-none", "data-disabled:cursor-default data-disabled:opacity-40", focusRing, variants[variant], sizes[size], className)
+	});
+}
+function IconButton({ label, variant = "ghost", size = "md", tooltip = true, className, ...props }) {
+	const button = /* @__PURE__ */ jsx(Button$1, {
+		...props,
+		"aria-label": label,
+		className: clsx("inline-flex shrink-0 cursor-pointer items-center justify-center rounded-chat-sm text-chat-muted transition-colors select-none", "data-hovered:text-chat-fg data-disabled:cursor-default data-disabled:opacity-40 [&_svg]:size-4", focusRing, variants[variant], variant === "ghost" && "text-chat-muted", size === "sm" ? "size-7 [@media(pointer:coarse)]:size-9" : "size-8 [@media(pointer:coarse)]:size-10", className)
+	});
+	return tooltip ? /* @__PURE__ */ jsx(Tooltip, {
+		content: label,
+		children: button
+	}) : button;
+}
+// src/primitives/badge.tsx
+const tones = {
+	/** Outlined, e.g. "Recommended". */
+	outline: "border border-chat-border-strong text-chat-muted",
+	/** Amber, e.g. "5.5× or more usage". */
+	warning: "bg-chat-warning-bg text-chat-warning"
+};
+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),
+		children: [icon, children]
+	});
+}
+// src/primitives/caret.tsx
+/** The small filled triangle claude.ai uses after expandable labels. Points right; rotate to point down. */
+function Caret({ className }) {
+	return /* @__PURE__ */ jsx("svg", {
+		"aria-hidden": true,
+		viewBox: "0 0 8 8",
+		className: clsx("size-2 shrink-0 fill-current transition-transform duration-150", className),
+		children: /* @__PURE__ */ jsx("path", { d: "M2 1.2 6.2 4 2 6.8z" })
+	});
+}
+// 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 }) {
+	return /* @__PURE__ */ jsxs(Disclosure$1, {
+		...props,
+		...className !== void 0 && { className },
+		children: [/* @__PURE__ */ jsx(Heading, {
+			className: "m-0 font-normal",
+			children: /* @__PURE__ */ jsxs(Button$1, {
+				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"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "min-w-0 truncate",
+						children: summary
+					}),
+					indicator === "caret" && /* @__PURE__ */ jsx(Caret, { className: "group-aria-expanded/trigger:rotate-90" }),
+					trailing && /* @__PURE__ */ jsx("span", {
+						className: "ml-auto shrink-0 pl-2",
+						children: trailing
+					})
+				]
+			})
+		}), /* @__PURE__ */ jsx(DisclosurePanel, { children: /* @__PURE__ */ jsx("div", {
+			className: panelClassName,
+			children
+		}) })]
+	});
+}
+// src/primitives/menu.tsx
+/** A search box above a menu that filters its items, like "Search or create a project". */
+function MenuSearch({ placeholder, children, value, onChange }) {
+	const { contains } = useFilter({ sensitivity: "base" });
+	return /* @__PURE__ */ jsxs(Autocomplete, {
+		filter: contains,
+		...value !== void 0 && { inputValue: value },
+		...onChange && { onInputChange: onChange },
+		children: [/* @__PURE__ */ jsx(SearchField, {
+			"aria-label": placeholder,
+			autoFocus: true,
+			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"
+			})
+		}), children]
+	});
+}
+/** Floating panel for menus and pickers: surface color, rounded, soft shadow, fades in. */
+function Popover({ className, offset = 6, ...props }) {
+	return /* @__PURE__ */ jsx(Popover$1, {
+		offset,
+		...props,
+		className: clsx("rounded-chat-popover border border-chat-popover-border bg-chat-popover font-chat-sans text-chat-fg shadow-chat-popover outline-none", "motion-safe:data-entering:animate-chat-in motion-safe:data-exiting:animate-chat-out", className)
+	});
+}
+function Menu({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menu$1, {
+		...props,
+		className: clsx("max-h-[inherit] min-w-52 overflow-auto p-1.5 outline-none", className)
+	});
+}
+function MenuItem({ children, icon, description, detail, shortcut, tone = "default", className, ...props }) {
+	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),
+		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"),
+				children: icon
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: "flex min-w-0 flex-1 flex-col",
+				children: [/* @__PURE__ */ jsx(Text, {
+					slot: "label",
+					className: "truncate",
+					children
+				}), description && /* @__PURE__ */ jsx(Text, {
+					slot: "description",
+					className: "text-xs text-chat-muted",
+					children: description
+				})]
+			}),
+			detail && /* @__PURE__ */ jsx("span", {
+				className: "shrink-0 text-sm text-chat-muted",
+				children: detail
+			}),
+			shortcut && /* @__PURE__ */ jsx(Keyboard, {
+				className: "shrink-0 font-chat-sans text-xs text-chat-subtle",
+				children: shortcut
+			}),
+			selectionMode !== "none" && isSelected && /* @__PURE__ */ jsx(Check, {
+				"aria-hidden": true,
+				className: "size-4 shrink-0 text-chat-check"
+			}),
+			hasSubmenu && /* @__PURE__ */ jsx(ChevronRight, {
+				"aria-hidden": true,
+				className: "size-4 shrink-0 text-chat-muted"
+			})
+		] })
+	});
+}
+function MenuSection({ title, children, ...selection }) {
+	return /* @__PURE__ */ jsxs(MenuSection$1, {
+		...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",
+			children: title
+		}), children]
+	});
+}
+function MenuSeparator() {
+	return /* @__PURE__ */ jsx(Separator, { className: "-mx-1.5 my-1.5 border-t border-chat-popover-border" });
+}
+/** 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),
+		children
+	});
+}
+// src/primitives/context-menu.tsx
+/**
+* Opens `menu` at the pointer on right-click, or at the focused element with the Menu key or Shift+F10.
+* Long-press opens it where the browser fires `contextmenu` for touch (Android); give touch users a
+* visible "…" button as well.
+*/
+function ContextMenu({ menu, children, className }) {
+	const root = useRef(null);
+	const [at, setAt] = useState();
+	const openAt = (x, y) => {
+		const box = root.current?.getBoundingClientRect();
+		if (box) setAt({
+			x: x - box.left,
+			y: y - box.top
+		});
+	};
+	const onContextMenu = (e) => {
+		e.preventDefault();
+		openAt(e.clientX, e.clientY);
+	};
+	const onKeyDown = (e) => {
+		if (e.key !== "ContextMenu" && !(e.shiftKey && e.key === "F10")) return;
+		e.preventDefault();
+		const target = e.target.getBoundingClientRect();
+		openAt(target.left + 8, target.bottom);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: root,
+		onContextMenu,
+		onKeyDown,
+		className: clsx("relative", className),
+		children: [children, /* @__PURE__ */ jsxs(MenuTrigger$1, {
+			isOpen: at !== void 0,
+			onOpenChange: (open) => !open && setAt(void 0),
+			children: [/* @__PURE__ */ jsx(Button$1, {
+				"aria-hidden": true,
+				excludeFromTabOrder: true,
+				className: "pointer-events-none absolute size-0 opacity-0",
+				style: {
+					left: at?.x ?? 0,
+					top: at?.y ?? 0
+				}
+			}), /* @__PURE__ */ jsx(Popover, {
+				placement: "bottom start",
+				offset: 2,
+				children: menu
+			})]
+		})]
+	});
+}
+// src/primitives/overlay.tsx
+/** A centered dialog over a dimmed page. Escape and clicking outside close it; focus stays inside. */
+function Modal({ isOpen, onOpenChange, title, children, className, ...props }) {
+	return /* @__PURE__ */ jsx(ModalOverlay, {
+		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",
+		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, {
+				...props,
+				className: "flex min-h-0 flex-1 flex-col outline-none",
+				children: [title && /* @__PURE__ */ jsx(Heading, {
+					slot: "title",
+					className: "px-5 pt-4 pb-3 text-base font-medium",
+					children: title
+				}), children]
+			})
+		})
+	});
+}
+/** A panel sliding in from the side over a dimmed page, e.g. the sidebar on phones. */
+function Drawer({ isOpen, onOpenChange, side = "left", children, className, ...props }) {
+	return /* @__PURE__ */ jsx(ModalOverlay, {
+		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",
+		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, {
+				...props,
+				className: "h-full outline-none",
+				children
+			})
+		})
+	});
+}
+// src/primitives/panel.tsx
+/**
+* A titled region that fills its container and lets the body scroll: a dock panel, an agent pane in a
+* grid, a settings card. A `ChatView` placed in the body sizes itself to the panel.
+*/
+function Panel({ title, actions, footer, children, variant = "card", className, ...props }) {
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-label": props["aria-label"],
+		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",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "min-w-0 flex-1 truncate font-medium",
+					children: title
+				}), actions && /* @__PURE__ */ jsx("div", {
+					className: "flex shrink-0 items-center gap-0.5",
+					children: actions
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "min-h-0 flex-1 overflow-y-auto [scrollbar-width:thin]",
+				children
+			}),
+			footer && /* @__PURE__ */ jsx("footer", {
+				className: "shrink-0 border-t border-chat-divider px-3 py-2",
+				children: footer
+			})
+		]
+	});
+}
+// src/primitives/highlight.ts
+/**
+* Shiki themes for code. Each token carries both colors as --shiki-light / --shiki-dark, and CSS picks one
+* with light-dark() from the chat theme's color-scheme. Backgrounds are ignored; blocks use --chat-code-bg.
+*/
+const THEMES = {
+	light: "github-light",
+	dark: "one-dark-pro"
+};
+let shiki;
+const loadShiki = () => shiki ??= import("shiki");
+const cache = /* @__PURE__ */ new Map();
+async function highlight(code, language) {
+	const key = `${language}\n${code}`;
+	const hit = cache.get(key);
+	if (hit) return hit;
+	const { codeToTokens, bundledLanguages, bundledLanguagesAlias } = await loadShiki();
+	const lang = language.toLowerCase();
+	if (!(lang in bundledLanguages) && !(lang in bundledLanguagesAlias)) return void 0;
+	const { tokens } = await codeToTokens(code, {
+		lang,
+		themes: THEMES,
+		defaultColor: false
+	});
+	if (cache.size > 200) cache.clear();
+	cache.set(key, tokens);
+	return tokens;
+}
+/**
+* Highlights `code` in the background. Returns the latest finished result, so streaming code keeps its
+* colors while the next version is highlighted instead of flashing back to plain text.
+*/
+function useHighlight(code, language) {
+	const [lines, setLines] = useState();
+	useEffect(() => {
+		if (!language) return setLines(void 0);
+		let cancelled = false;
+		highlight(code, language).then((result) => !cancelled && setLines(result), () => !cancelled && setLines(void 0));
+		return () => {
+			cancelled = true;
+		};
+	}, [code, language]);
+	return lines;
+}
+// src/primitives/code-block.tsx
+/** Monospace code with Shiki highlighting, scrolling past a fixed height. */
+function CodeBlock({ code, language, label = language, variant = "plain", className }) {
+	const lines = useHighlight(code, language);
+	const done = lines?.map((l) => l.map((t) => t.content).join("")).join("\n");
+	const highlighted = lines && done !== void 0 && code.startsWith(done) ? lines : void 0;
+	const tail = highlighted ? code.slice(done.length) : "";
+	return /* @__PURE__ */ jsxs("div", {
+		"data-chat-code-block": true,
+		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",
+			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]"),
+			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,
+				children: token.content
+			}, j))] }, i)) : code, tail] })
+		})]
+	});
+}
+// 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.
+*/
+function ChatTheme({ theme, children, className }) {
+	const portal = useRef(null);
+	const getContainer = useCallback(() => portal.current, []);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-chat-theme": theme,
+		className: clsx("bg-chat-bg font-chat-sans text-chat-fg", className),
+		children: [/* @__PURE__ */ jsx(UNSAFE_PortalProvider, {
+			getContainer,
+			children
+		}), /* @__PURE__ */ jsx("div", { ref: portal })]
+	});
+}
+// src/hooks/agent.ts
+/**
+* The tools and context the page currently offers. Components register what they own while mounted, so
+* the model's tools follow what is on screen.
+*/
+var AgentRegistry = class {
+	tools = /* @__PURE__ */ new Map();
+	contexts = /* @__PURE__ */ new Map();
+	listeners = /* @__PURE__ */ new Set();
+	version = 0;
+	addTool(holder) {
+		const name = holder.current.name;
+		this.tools.set(name, holder);
+		this.emit();
+		return () => {
+			if (this.tools.get(name) !== holder) return;
+			this.tools.delete(name);
+			this.emit();
+		};
+	}
+	setContext(key, value) {
+		this.contexts.set(key, value);
+		this.emit();
+		return () => {
+			if (this.contexts.get(key) !== value) return;
+			this.contexts.delete(key);
+			this.emit();
+		};
+	}
+	tool(name) {
+		return this.tools.get(name)?.current;
+	}
+	list() {
+		return [...this.tools.values()].map((h) => h.current);
+	}
+	/** Client tools, for the request. */
+	specs() {
+		return this.list().filter((t) => t.execute).map(({ name, description, inputSchema }) => ({
+			name,
+			...description && { description },
+			...inputSchema && { inputSchema }
+		}));
+	}
+	/** Everything the page shared with `useAgentContext`, for the request. */
+	context() {
+		return Object.fromEntries(this.contexts);
+	}
+	subscribe = (listener) => {
+		this.listeners.add(listener);
+		return () => this.listeners.delete(listener);
+	};
+	getVersion = () => this.version;
+	emit() {
+		this.version++;
+		for (const listener of this.listeners) listener();
+	}
+};
+const AgentContext = createContext(null);
+/** Holds the tools and context for the chats and the page inside it. */
+function AgentProvider({ registry, children }) {
+	const [own] = useState(() => registry ?? new AgentRegistry());
+	return createElement(AgentContext.Provider, { value: registry ?? own }, children);
+}
+const useAgentRegistry = () => useContext(AgentContext);
+/** Re-renders when tools or context change, e.g. for an inspector. */
+function useAgentSnapshot() {
+	const registry = useAgentRegistry();
+	useSyncExternalStore(registry?.subscribe ?? noopSubscribe, registry?.getVersion ?? zero, zero);
+	return registry;
+}
+const noopSubscribe = () => () => {};
+const zero = () => 0;
+/**
+* Offers a tool while the calling component is mounted. The latest `tool` is always used, so `execute` can
+* close over current state; it is only re-registered when the name changes.
+*/
+function useAgentTool(tool) {
+	const registry = useAgentRegistry();
+	const holder = useRef(tool);
+	useLayoutEffect(() => {
+		holder.current = tool;
+	});
+	useEffect(() => registry?.addTool(holder), [registry, tool.name]);
+}
+/** Shares page state with the model, e.g. the form's current values. Sent with each request. */
+function useAgentContext(key, value) {
+	const registry = useAgentRegistry();
+	useEffect(() => registry?.setContext(key, value), [
+		registry,
+		key,
+		value
+	]);
+}
+// src/hooks/use-chat.ts
+let counter$1 = 0;
+const localId = () => `local_${Date.now().toString(36)}_${(counter$1++).toString(36)}`;
+function userMessage(text, parentId, attachments = []) {
+	return {
+		id: localId(),
+		parentId,
+		role: "user",
+		status: "done",
+		createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+		parts: [...attachments, ...text.trim() ? [{
+			type: "text",
+			id: localId(),
+			text,
+			status: "done"
+		}] : []]
+	};
+}
+const wantsApproval = (part, tool) => part.approval === void 0 && (part.needsApproval === true || (typeof tool?.approval === "function" ? tool.approval(part.input) : tool?.approval === true));
+const DECLINED = "Declined by the user";
+/**
+* A linear conversation driven by a Transport: sends, streams the reply through `applyEvent`, stops and
+* retries. With an `AgentProvider` it also runs the agent loop: client tools run in the page, approvals
+* wait for the user, then the reply continues; every finished tool call reaches its tool's `onResult`.
+*/
+function useChat({ transport, conversationId, initialMessages = [], onTitle, agent, maxSteps = 12 }) {
+	const contextAgent = useAgentRegistry();
+	const registry = agent === void 0 ? contextAgent : agent;
+	const [messages, setMessages] = useState(initialMessages);
+	const [busy, setBusy] = useState(false);
+	const [approvals, setApprovals] = useState([]);
+	const run = useRef(null);
+	const latest = useRef({
+		messages,
+		transport,
+		conversationId,
+		onTitle,
+		registry
+	});
+	latest.current = {
+		messages,
+		transport,
+		conversationId,
+		onTitle,
+		registry
+	};
+	const loop = useRef({
+		options: {},
+		step: 0
+	});
+	const reported = useRef(null);
+	reported.current ??= new Set(initialMessages.flatMap((m) => m.parts.map((p) => p.id)));
+	const seen = useRef(/* @__PURE__ */ new Map());
+	const report = useCallback((message) => {
+		for (const part of message.parts) {
+			if (part.type !== "tool_call" || reported.current.has(part.id)) continue;
+			const tool = latest.current.registry?.tool(part.name);
+			try {
+				if (seen.current.get(part.id) !== part) {
+					seen.current.set(part.id, part);
+					tool?.onCall?.(part);
+				}
+				if (part.status === "done" || part.status === "error") {
+					reported.current.add(part.id);
+					seen.current.delete(part.id);
+					tool?.onResult?.(part);
+				}
+			} catch (error) {
+				console.error(`Tool callback for ${part.name} failed`, error);
+			}
+		}
+	}, []);
+	/** Puts a changed message into the list and the ref, so the next step sees it at once. */
+	const commit = useCallback((message) => {
+		const list = latest.current.messages;
+		const index = list.findIndex((m) => m.id === message.id);
+		const next = index === -1 ? [...list, message] : list.with(index, message);
+		latest.current.messages = next;
+		setMessages(next);
+		report(message);
+	}, [report]);
+	const finish = useCallback((reply, status, error) => {
+		if (!reply || reply.status !== "streaming") return;
+		const ended = applyEvent(reply, {
+			type: "run.end",
+			runId: reply.runId ?? "",
+			seq: (reply.lastSeq ?? 0) + 1,
+			status,
+			...error !== void 0 && { error }
+		});
+		if (ended) commit(ended);
+	}, [commit]);
+	const advanceRef = useRef(() => {});
+	const start = useCallback((history, options, continuation) => {
+		const message = history.at(-1);
+		const controller = new AbortController();
+		const current = {
+			controller,
+			...continuation && { reply: continuation }
+		};
+		run.current = current;
+		latest.current.messages = history;
+		setMessages(history);
+		setBusy(true);
+		let followUp = false;
+		(async () => {
+			try {
+				const { transport, conversationId, registry } = latest.current;
+				const tools = registry?.specs();
+				for await (const event of transport.send({
+					message,
+					history,
+					signal: controller.signal,
+					...continuation && { continuation: true },
+					...tools?.length && { tools },
+					...registry && { context: registry.context() },
+					...conversationId !== void 0 && { conversationId },
+					...options.model !== void 0 && { model: options.model },
+					...options.effort !== void 0 && { effort: options.effort }
+				})) {
+					if (controller.signal.aborted) break;
+					if (event.type === "title") {
+						latest.current.onTitle?.(event.title);
+						continue;
+					}
+					const next = applyEvent(current.reply, event);
+					if (!next || next === current.reply) continue;
+					current.reply = next;
+					current.runId = next.runId;
+					commit(next);
+				}
+				if (controller.signal.aborted) finish(current.reply, "stopped");
+				else if (current.reply?.status === "done" && awaitingToolCalls(current.reply).length > 0) followUp = true;
+			} catch (error) {
+				if (controller.signal.aborted) finish(current.reply, "stopped");
+				else finish(current.reply, "error", error instanceof Error ? error.message : String(error));
+			} finally {
+				if (run.current === current) {
+					run.current = null;
+					if (followUp) advanceRef.current(current.reply);
+					else setBusy(false);
+				}
+			}
+		})();
+	}, [commit, finish]);
+	/** After a run ends with awaiting calls: ask, or run the client tools and continue. */
+	const advance = useCallback((reply) => {
+		const { registry } = latest.current;
+		const awaiting = awaitingToolCalls(reply);
+		const ask = awaiting.filter((p) => wantsApproval(p, registry?.tool(p.name)));
+		if (ask.length > 0) {
+			setApprovals(ask.map((part) => ({
+				messageId: reply.id,
+				part
+			})));
+			setBusy(false);
+			return;
+		}
+		const controller = new AbortController();
+		const current = {
+			controller,
+			reply
+		};
+		run.current = current;
+		setBusy(true);
+		(async () => {
+			let message = reply;
+			const set = (part, fields) => {
+				message = settleToolCall(message, part.id, fields);
+				current.reply = message;
+				commit(message);
+			};
+			for (const part of awaiting) {
+				if (controller.signal.aborted) break;
+				if (part.approval === "denied") set(part, {
+					status: "error",
+					error: DECLINED
+				});
+				else if (part.runsOn === "client") {
+					const tool = latest.current.registry?.tool(part.name);
+					if (!tool?.execute) {
+						set(part, {
+							status: "error",
+							error: `This page has no handler for ${part.name}`
+						});
+						continue;
+					}
+					set(part, { status: "running" });
+					const began = performance.now();
+					try {
+						set(part, {
+							status: "done",
+							result: await tool.execute(part.input, {
+								callId: part.id,
+								messageId: message.id,
+								signal: controller.signal
+							}),
+							durationMs: Math.round(performance.now() - began)
+						});
+					} catch (error) {
+						set(part, {
+							status: "error",
+							error: error instanceof Error ? error.message : String(error)
+						});
+					}
+				} else set(part, { status: "running" });
+			}
+			if (run.current !== current) return;
+			run.current = null;
+			if (controller.signal.aborted) {
+				for (const part of awaitingToolCalls(message).concat(message.parts.filter((p) => p.type === "tool_call" && p.status === "running"))) set(part, {
+					status: "error",
+					error: "Stopped"
+				});
+				setBusy(false);
+				return;
+			}
+			if (loop.current.step >= maxSteps) {
+				setBusy(false);
+				return;
+			}
+			loop.current.step++;
+			const list = latest.current.messages;
+			start(list.slice(0, list.findIndex((m) => m.id === message.id) + 1), loop.current.options, message);
+		})();
+	}, [
+		commit,
+		maxSteps,
+		start
+	]);
+	advanceRef.current = advance;
+	const respond = useCallback((partId, granted) => {
+		const pending = approvals.find((a) => a.part.id === partId);
+		if (!pending) return;
+		const message = latest.current.messages.find((m) => m.id === pending.messageId);
+		if (!message) return;
+		const next = settleToolCall(message, partId, { approval: granted ? "granted" : "denied" });
+		commit(next);
+		const rest = approvals.filter((a) => a.part.id !== partId);
+		setApprovals(rest);
+		if (rest.length === 0) advance(next);
+	}, [
+		approvals,
+		advance,
+		commit
+	]);
+	/** Declines whatever is waiting, e.g. because the user moved on. */
+	const declineAll = useCallback(() => {
+		for (const { messageId, part } of approvals) {
+			const message = latest.current.messages.find((m) => m.id === messageId);
+			if (message) commit(settleToolCall(message, part.id, {
+				approval: "denied",
+				status: "error",
+				error: DECLINED
+			}));
+		}
+		for (const message of latest.current.messages) for (const part of awaitingToolCalls(message)) commit(settleToolCall(message, part.id, {
+			status: "error",
+			error: DECLINED
+		}));
+		setApprovals([]);
+	}, [approvals, commit]);
+	const send = useCallback((text, options = {}) => {
+		const attachments = options.attachments ?? [];
+		if (run.current || !text.trim() && attachments.length === 0) return;
+		declineAll();
+		loop.current = {
+			options,
+			step: 0
+		};
+		const { messages } = latest.current;
+		start([...messages, userMessage(text, messages.at(-1)?.id ?? null, attachments)], options);
+	}, [declineAll, start]);
+	const stop = useCallback(() => {
+		const current = run.current;
+		if (!current) return declineAll();
+		current.controller.abort();
+		if (current.runId) latest.current.transport.stop?.(current.runId);
+	}, [declineAll]);
+	const retry = useCallback((assistantId, options = {}) => {
+		if (run.current) return;
+		const { messages } = latest.current;
+		const index = messages.findIndex((m) => m.id === assistantId);
+		if (index < 1 || messages[index - 1].role !== "user") return;
+		setApprovals([]);
+		loop.current = {
+			options,
+			step: 0
+		};
+		start(messages.slice(0, index), options);
+	}, [start]);
+	useEffect(() => () => run.current?.controller.abort(), []);
+	return {
+		messages,
+		busy,
+		approvals,
+		respond,
+		send,
+		stop,
+		retry
+	};
+}
+// src/hooks/sse-transport.ts
+/** A `Transport` for backends that stream `StreamEvent`s over server-sent events (see `formatEvent`). */
+function sseTransport({ url, headers, stopUrl, fetch: fetchImpl = fetch }) {
+	const headersFor = async () => ({
+		"content-type": "application/json",
+		...Object.fromEntries(new Headers(typeof headers === "function" ? await headers() : headers))
+	});
+	return {
+		async *send({ signal, ...body }) {
+			const response = await fetchImpl(url, {
+				method: "POST",
+				headers: await headersFor(),
+				body: JSON.stringify(body),
+				signal
+			});
+			if (!response.ok || !response.body) throw new Error(`${url} answered ${response.status} ${response.statusText}`.trim());
+			yield* readEventStream(response.body);
+		},
+		...stopUrl && { async stop(runId) {
+			await fetchImpl(stopUrl, {
+				method: "POST",
+				headers: await headersFor(),
+				body: JSON.stringify({ runId })
+			});
+		} }
+	};
+}
+// src/hooks/smooth-text.ts
+/** Slowest reveal, in characters per second, so a trickle of tokens still reads as steady typing. */
+const MIN_RATE = 45;
+/** How many seconds of backlog the reveal aims to hold; bigger bursts speed it up. */
+const LAG_SECONDS = .35;
+/** Once the stream ends, the rest is revealed at least this fast. */
+const FINISH_RATE = 600;
+/** Text is released in groups this far apart, so each group of words fades in together. */
+const CHUNK_MS = 90;
+const prefersReducedMotion = () => typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+/**
+* Paces streamed text so it appears at an even rate instead of in network-sized bursts. The reveal speed
+* follows the backlog: it never falls far behind and never stalls. It stops at word ends so a word fades
+* in whole. When `streaming` ends the rest catches up quickly. With reduced motion it returns `text`.
+*
+* One animation loop runs while there is text left to show; new text only moves its target, so frequent
+* small deltas do not restart it. Text is released in groups every CHUNK_MS rather than every frame.
+*/
+function useSmoothText(text, streaming) {
+	const [shown, setShown] = useState(() => streaming ? "" : text);
+	const s = useRef({
+		shown,
+		target: text,
+		streaming,
+		frame: 0,
+		last: 0,
+		carry: 0,
+		lastCommit: 0
+	}).current;
+	s.target = text;
+	s.streaming = streaming;
+	useEffect(() => {
+		if (prefersReducedMotion() || !text.startsWith(s.shown)) {
+			cancelAnimationFrame(s.frame);
+			s.frame = 0;
+			s.shown = text;
+			setShown(text);
+			return;
+		}
+		if (s.frame || s.shown.length >= text.length) return;
+		s.last = performance.now();
+		const step = (now) => {
+			const dt = Math.min(Math.max(now - s.last, 0), 100) / 1e3;
+			s.last = now;
+			const full = s.target;
+			const backlog = full.length - s.shown.length;
+			const rate = s.streaming ? Math.max(MIN_RATE, backlog / LAG_SECONDS) : Math.max(FINISH_RATE, backlog * 4);
+			s.carry += rate * dt;
+			const advance = Math.floor(s.carry);
+			if (advance > 0 && now - s.lastCommit >= CHUNK_MS) {
+				s.lastCommit = now;
+				s.carry -= advance;
+				s.shown = full.slice(0, wordEnd(full, Math.min(s.shown.length + advance, full.length)));
+				setShown(s.shown);
+			}
+			s.frame = s.shown.length < full.length ? requestAnimationFrame(step) : 0;
+		};
+		s.frame = requestAnimationFrame(step);
+	}, [
+		text,
+		streaming,
+		s
+	]);
+	useEffect(() => () => cancelAnimationFrame(s.frame), [s]);
+	return shown;
+}
+/** Moves `index` forward to the end of the word it falls in, so words are never cut in half. */
+function wordEnd(text, index) {
+	let i = index;
+	while (i < text.length && !/\s/.test(text[i])) i++;
+	return i;
+}
+// src/hooks/sidebar-state.ts
+/** Below this width the sidebar is a drawer over the content (phones). */
+const DRAWER_QUERY = "(max-width: 767.98px)";
+function useMediaQuery(query) {
+	return useSyncExternalStore((notify) => {
+		const list = window.matchMedia(query);
+		list.addEventListener("change", notify);
+		return () => list.removeEventListener("change", notify);
+	}, () => window.matchMedia(query).matches, () => false);
+}
+const SidebarContext = createContext({
+	collapsed: false,
+	drawer: false,
+	drawerOpen: false,
+	toggle: () => {},
+	dismiss: () => {}
+});
+const useSidebar = () => useContext(SidebarContext);
+// src/components/word-fade.ts
+const OPAQUE_TAGS = /* @__PURE__ */ new Set([
+	"code",
+	"pre",
+	"svg",
+	"math",
+	"script",
+	"style"
+]);
+function classes(node) {
+	const value = node.properties?.className;
+	if (Array.isArray(value)) return value.map(String);
+	return typeof value === "string" ? value.split(/\s+/) : [];
+}
+function isMath(node) {
+	return classes(node).some((c) => c === "katex" || c === "katex-display" || c.startsWith("math-") || c === "language-math");
+}
+function wordSpan(word) {
+	return {
+		type: "element",
+		tagName: "span",
+		properties: { className: ["chat-word"] },
+		children: [{
+			type: "text",
+			value: word
+		}]
+	};
+}
+function wrap(node) {
+	if (!node.children) return;
+	const out = [];
+	for (const child of node.children) {
+		if (child.type === "text") {
+			for (const piece of (child.value ?? "").split(/(\s+)/)) {
+				if (!piece) continue;
+				out.push(/^\s+$/.test(piece) ? {
+					type: "text",
+					value: piece
+				} : wordSpan(piece));
+			}
+			continue;
+		}
+		if (child.type === "element") {
+			if (isMath(child)) child.properties = {
+				...child.properties,
+				className: [...classes(child), "chat-word"]
+			};
+			else if (!OPAQUE_TAGS.has(child.tagName ?? "")) wrap(child);
+		}
+		out.push(child);
+	}
+	node.children = out;
+}
+function rehypeWordFade() {
+	return (tree) => wrap(tree);
+}
+// src/components/markdown.tsx
+const fadePlugins = [...Object.values(defaultRehypePlugins), rehypeWordFade];
+const math = createMathPlugin({ singleDollarTextMath: true });
+/** Streamdown's own utility classes get this prefix, so neither they nor the host's classes apply. */
+const PREFIX = "llmchat";
+function textOf(node) {
+	if (!node) return "";
+	if (node.type === "text") return node.value ?? "";
+	return (node.children ?? []).map(textOf).join("");
+}
+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 }
+		});
+	}
+};
+/** Message markdown: GFM, KaTeX math ($…$ and $$…$$), Shiki code blocks, smooth fade-in while streaming. */
+function Markdown({ children, streaming = false, className }) {
+	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
+		})
+	});
+}
+const MarkdownBody = memo(function MarkdownBody({ text, animating, fade }) {
+	return /* @__PURE__ */ jsx(Streamdown, {
+		prefix: PREFIX,
+		mode: animating || fade ? "streaming" : "static",
+		...fade && { rehypePlugins: fadePlugins },
+		plugins: { math },
+		components,
+		controls: false,
+		lineNumbers: false,
+		linkSafety: { enabled: false },
+		children: text
+	});
+});
+// src/components/tools.tsx
+const ToolViewsContext = createContext(void 0);
+function ToolViewsProvider({ tools, children }) {
+	return /* @__PURE__ */ jsx(ToolViewsContext.Provider, {
+		value: tools,
+		children
+	});
+}
+function useToolView(name) {
+	return useToolViews()[name] ?? {};
+}
+/** The provider's views, plus views brought by tools the page registered (`ChatTool.view`). */
+function useToolViews() {
+	const base = useContext(ToolViewsContext) ?? defaultToolViews;
+	const registry = useAgentSnapshot();
+	const version = registry?.getVersion() ?? 0;
+	return useMemo(() => {
+		const own = registry?.list().filter((t) => t.view !== void 0) ?? [];
+		return own.length ? {
+			...base,
+			...Object.fromEntries(own.map((t) => [t.name, t.view]))
+		} : base;
+	}, [
+		base,
+		registry,
+		version
+	]);
+}
+/** `useAgentTool` for tools that bring a view. */
+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) {
+	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";
+	}
+	return view?.label?.(part) ?? 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) {
+	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 (parts.some(isWorking)) {
+		const last = parts.at(-1);
+		return activityLabel(last, 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);
+}
+const plural = (count, one, many) => count === 1 ? one : many(count);
+function recordOf(value) {
+	return value && typeof value === "object" && !Array.isArray(value) ? value : {};
+}
+function stringOf(value) {
+	return typeof value === "string" ? value : void 0;
+}
+/** A shell command. Input `{ command, description? }`; result a string or `{ stdout, stderr, exitCode }`. */
+const commandTool = {
+	label: () => "Ran a command",
+	hint: (part) => stringOf(recordOf(part.input).description),
+	summary: (n) => plural(n, "ran a command", (n) => `ran ${n} commands`),
+	Detail: function CommandDetail({ part }) {
+		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");
+		return /* @__PURE__ */ jsxs("div", {
+			className: "space-y-4",
+			children: [
+				/* @__PURE__ */ jsx(CodeBlock, {
+					label: "bash",
+					code: command
+				}),
+				(output || part.status === "done") && /* @__PURE__ */ jsx(CodeBlock, {
+					label: "Output",
+					code: output || "(no output)"
+				}),
+				part.error && /* @__PURE__ */ jsx("p", {
+					className: "text-sm text-chat-danger",
+					children: part.error
+				})
+			]
+		});
+	}
+};
+/** A web search. Input `{ query }`; result `{ results: SearchResult[] }` or `SearchResult[]`. */
+const webSearchTool = {
+	label: () => "Searched the web",
+	subtitle: (part) => stringOf(recordOf(part.input).query) ?? part.subtitle,
+	summary: (n) => plural(n, "searched the web", (n) => `searched the web ${n} times`),
+	Detail: function WebSearchDetail({ part }) {
+		const results = Array.isArray(part.result) ? part.result : recordOf(part.result).results;
+		if (part.error) return /* @__PURE__ */ jsx("p", {
+			className: "text-sm text-chat-danger",
+			children: part.error
+		});
+		if (!results?.length) return /* @__PURE__ */ jsx("p", {
+			className: "text-sm text-chat-muted",
+			children: "No results"
+		});
+		return /* @__PURE__ */ jsx("ul", {
+			className: "-mx-1",
+			children: results.map((result) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("a", {
+				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",
+				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("span", {
+						className: "min-w-0 flex-1 truncate",
+						children: result.title
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "shrink-0 text-sm",
+						children: hostOf(result.url)
+					})
+				]
+			}) }, result.url))
+		});
+	}
+};
+/** Memory lookups, e.g. Anthropic's memory tool. Input `{ path }`. */
+const memoryTool = {
+	label: () => "Recalled memory",
+	subtitle: (part) => {
+		return stringOf(recordOf(part.input).path)?.split("/").at(-1) ?? part.subtitle;
+	},
+	summary: () => "recalled memory"
+};
+const defaultToolViews = {
+	bash: commandTool,
+	shell: commandTool,
+	web_search: webSearchTool,
+	memory: memoryTool,
+	memory_view: memoryTool
+};
+function hostOf(url) {
+	try {
+		return new URL(url).host;
+	} catch {
+		return 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`;
+}
+// src/components/token-counter.tsx
+/** Compact token count: 526, 1.4k, 33k, 76.8k, 1M. */
+function formatTokens(n) {
+	if (n < 1e3) return String(Math.round(n));
+	if (n < 1e6) return `${trim(n / 1e3)}k`;
+	return `${trim(n / 1e6)}M`;
+}
+function trim(value) {
+	return (Math.round(value * 10) / 10).toString();
+}
+/**
+* Follows `target` with a number that counts up smoothly instead of jumping. Each frame closes part of the
+* gap, so bursts of tokens roll in rather than land at once. Jumps straight there with reduced motion.
+*/
+function useCountUp(target) {
+	const [value, setValue] = useState(target);
+	const valueRef = useRef(target);
+	useEffect(() => {
+		if (typeof window === "undefined" || window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) {
+			valueRef.current = target;
+			setValue(target);
+			return;
+		}
+		let frame = 0;
+		let last = performance.now();
+		const step = (now) => {
+			const dt = Math.min(Math.max(now - last, 0), 100);
+			last = now;
+			const gap = target - valueRef.current;
+			const move = Math.min(Math.max(Math.abs(gap) * (1 - Math.pow(.1, dt / 250)), 1), Math.abs(gap));
+			const next = Math.abs(gap) < 1 ? target : valueRef.current + Math.sign(gap) * move;
+			valueRef.current = next;
+			setValue(next);
+			if (next !== target) frame = requestAnimationFrame(step);
+		};
+		frame = requestAnimationFrame(step);
+		return () => cancelAnimationFrame(frame);
+	}, [target]);
+	return Math.round(value);
+}
+/** A token count that counts up as `tokens` grows and holds still when it stops growing. */
+function TokenCounter({ tokens, variant = "standalone", className }) {
+	const shown = useCountUp(tokens);
+	if (variant === "inline") return /* @__PURE__ */ jsxs("span", {
+		className: clsx("text-chat-subtle tabular-nums", className),
+		children: [
+			"(",
+			formatTokens(shown),
+			" tokens)"
+		]
+	});
+	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"
+		]
+	});
+}
+// src/components/activity-group.tsx
+/**
+* The "Ran a command, searched the web ▾" dropdown: a one-line heading that opens a bordered box with one
+* row per step. Each row expands on its own; tool rows render through the registered `ToolView`.
+* A group of one step skips the rows: the heading is the step's own label and the box holds its detail.
+*/
+function ActivityGroup({ parts, defaultExpanded = false, className }) {
+	const views = useToolViews();
+	const [expanded, setExpanded] = useState(defaultExpanded);
+	const live = parts.some(isWorking);
+	const tokens = activityTokens(parts);
+	const after = live && tokens > 0 && /* @__PURE__ */ jsx(TokenCounter, {
+		variant: "inline",
+		tokens,
+		className: "ml-1.5"
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className,
+		children: parts.length === 1 ? /* @__PURE__ */ jsx(SingleStep, {
+			part: parts[0],
+			live,
+			after,
+			expanded,
+			onExpandedChange: setExpanded
+		}) : /* @__PURE__ */ jsx(Disclosure, {
+			isExpanded: expanded,
+			onExpandedChange: setExpanded,
+			summary: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Live, {
+				live,
+				children: activityHeading(parts, views)
+			}), after] }),
+			summaryClassName: "text-[0.9375rem]",
+			panelClassName: "pt-3",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "divide-y divide-chat-divider rounded-chat-md border border-chat-divider",
+				children: parts.map((part) => /* @__PURE__ */ jsx(Step, { part }, part.id))
+			})
+		})
+	});
+}
+const SHIMMER_MS = 2e3;
+/**
+* Sweeps a highlight across a label while its step is running. The animation starts at the phase of a
+* shared clock, so every live label sweeps in step and a remount does not restart it.
+*/
+function Live({ live, children }) {
+	return live ? /* @__PURE__ */ jsx(Shimmer, { children }) : /* @__PURE__ */ jsx(Fragment, { children });
+}
+function Shimmer({ children }) {
+	const [delay] = useState(() => `-${Math.round(performance.now() % SHIMMER_MS)}ms`);
+	return /* @__PURE__ */ jsx("span", {
+		className: "chat-shimmer",
+		style: {
+			animationDelay: delay,
+			["--chat-shimmer-duration"]: `${SHIMMER_MS}ms`
+		},
+		children
+	});
+}
+function SingleStep({ part, live, after, expanded, onExpandedChange }) {
+	const { summary, detail } = useStepContent(part);
+	return /* @__PURE__ */ jsx(Disclosure, {
+		isExpanded: expanded,
+		onExpandedChange,
+		summary: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Live, {
+			live,
+			children: summary
+		}), after] }),
+		summaryClassName: "text-[0.9375rem]",
+		panelClassName: "pt-3",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "rounded-chat-md border border-chat-divider px-3 py-2",
+			children: detail
+		})
+	});
+}
+function Step({ part }) {
+	const { summary, detail } = useStepContent(part);
+	const live = isWorking(part);
+	return /* @__PURE__ */ jsx(Disclosure, {
+		className: "px-3 py-2",
+		summaryClassName: "text-[0.9375rem]",
+		panelClassName: "pt-2 pb-1",
+		summary: /* @__PURE__ */ jsx(Live, {
+			live,
+			children: summary
+		}),
+		children: detail
+	});
+}
+/** The label line and expanded body of one step. Tool calls go through their registered view. */
+function useStepContent(part) {
+	const view = useToolView(part.type === "tool_call" ? part.name : "");
+	if (part.type === "thinking") return {
+		summary: activityLabel(part),
+		detail: part.visibility === "hidden" || !part.text ? /* @__PURE__ */ jsx("p", {
+			className: "text-sm text-chat-subtle",
+			children: "The model's reasoning is not shown."
+		}) : /* @__PURE__ */ jsx("div", {
+			className: "max-h-96 overflow-y-auto [scrollbar-width:thin]",
+			children: /* @__PURE__ */ jsx(Markdown, {
+				className: "chat-thinking",
+				streaming: part.status === "streaming",
+				children: part.text
+			})
+		})
+	};
+	const subtitle = view.subtitle ? view.subtitle(part) : part.subtitle;
+	const Detail = view.Detail ?? DefaultDetail;
+	return {
+		summary: /* @__PURE__ */ jsxs("span", {
+			title: view.hint?.(part),
+			children: [activityLabel(part, view), subtitle && /* @__PURE__ */ jsx("span", {
+				className: "ml-1.5 text-chat-fg",
+				children: subtitle
+			})]
+		}),
+		detail: /* @__PURE__ */ jsx(Detail, { part })
+	};
+}
+function DefaultDetail({ part }) {
+	if (part.error) return /* @__PURE__ */ jsx("p", {
+		className: "text-sm 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",
+		children: body
+	});
+	return /* @__PURE__ */ jsx("pre", {
+		className: "max-h-56 overflow-auto font-chat-mono text-[0.8125rem] leading-relaxed text-chat-muted",
+		children: JSON.stringify(body, null, 2)
+	});
+}
+// src/components/attachments.tsx
+let counter = 0;
+const draftId = () => `att_${Date.now().toString(36)}_${(counter++).toString(36)}`;
+/** Composer attachments: pasted text, images with thumbnails, files, each uploading on its own. */
+function useAttachments({ upload } = {}) {
+	const [attachments, setAttachments] = useState([]);
+	const uploads = useRef(/* @__PURE__ */ new Map());
+	const uploadRef = useRef(upload);
+	uploadRef.current = upload;
+	const patch = useCallback((id, fields) => {
+		setAttachments((list) => list.map((a) => a.id === id ? {
+			...a,
+			...fields
+		} : a));
+	}, []);
+	const addFiles = useCallback((files) => {
+		for (const file of files) {
+			const id = draftId();
+			const image = file.type.startsWith("image/");
+			const doUpload = uploadRef.current;
+			const draft = {
+				id,
+				kind: image ? "image" : "file",
+				name: file.name,
+				mime: file.type || "application/octet-stream",
+				size: file.size,
+				status: doUpload ? "uploading" : "ready",
+				...image && { previewUrl: URL.createObjectURL(file) }
+			};
+			setAttachments((list) => [...list, draft]);
+			if (!doUpload) continue;
+			const controller = new AbortController();
+			uploads.current.set(id, controller);
+			doUpload(file, controller.signal).then((result) => patch(id, {
+				status: "ready",
+				fileId: result.fileId,
+				...result.url && { url: result.url }
+			})).catch((error) => {
+				if (!controller.signal.aborted) patch(id, {
+					status: "error",
+					error: error instanceof Error ? error.message : "Upload failed"
+				});
+			}).finally(() => uploads.current.delete(id));
+		}
+	}, [patch]);
+	const addText = useCallback((text) => {
+		setAttachments((list) => [...list, {
+			id: draftId(),
+			kind: "text",
+			name: "Pasted text",
+			mime: "text/plain",
+			size: new Blob([text]).size,
+			text,
+			status: "ready"
+		}]);
+	}, []);
+	const updateText = useCallback((id, text) => patch(id, {
+		text,
+		size: new Blob([text]).size
+	}), [patch]);
+	const remove = useCallback((id) => {
+		uploads.current.get(id)?.abort();
+		setAttachments((list) => {
+			const gone = list.find((a) => a.id === id);
+			if (gone?.previewUrl) URL.revokeObjectURL(gone.previewUrl);
+			return list.filter((a) => a.id !== id);
+		});
+	}, []);
+	const clear = useCallback(() => setAttachments([]), []);
+	const toParts = useCallback(() => attachments.filter((a) => a.status === "ready").map((a) => ({
+		type: "attachment",
+		id: a.id,
+		status: "done",
+		fileId: a.fileId ?? a.id,
+		name: a.name,
+		mime: a.mime,
+		size: a.size,
+		...(a.url ?? a.previewUrl) && { url: a.url ?? a.previewUrl },
+		...a.text !== void 0 && { text: a.text }
+	})), [attachments]);
+	useEffect(() => () => uploads.current.forEach((c) => c.abort()), []);
+	return {
+		attachments,
+		uploading: attachments.some((a) => a.status === "uploading"),
+		addFiles,
+		addText,
+		updateText,
+		remove,
+		clear,
+		toParts
+	};
+}
+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 image = a.mime.startsWith("image/") && a.url;
+	const pasted = a.text !== void 0;
+	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,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: clsx("absolute inset-0 overflow-hidden rounded-[inherit]", uploading && "chat-shimmer-surface"),
+				children: image ? /* @__PURE__ */ jsx("img", {
+					src: a.url,
+					alt: a.name,
+					className: clsx("size-full object-cover", uploading && "opacity-60")
+				}) : pasted ? /* @__PURE__ */ jsx("p", {
+					className: "h-full overflow-hidden p-2.5 pb-9 text-[0.5625rem] leading-snug break-all text-chat-muted [mask-image:linear-gradient(to_bottom,black_45%,transparent_72%)]",
+					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"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "line-clamp-3 text-xs break-words text-chat-fg",
+						children: a.name
+					})]
+				})
+			}),
+			!image && /* @__PURE__ */ jsxs("div", {
+				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"
+				}), pasted && onOpen && /* @__PURE__ */ jsx(IconButton, {
+					label: "Edit pasted text",
+					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, {})
+				})]
+			}),
+			pasted && onOpen && !onRemove && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": "View pasted text",
+				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}`,
+				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, {})
+			})
+		]
+	});
+}
+/** The composer's row of cards above the text. Renders nothing when empty. */
+function AttachmentRow({ attachments, onRemove, onEditText }) {
+	const [editing, setEditing] = useState();
+	if (attachments.length === 0) return null;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("ul", {
+		"aria-label": "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: {
+				...a,
+				...a.previewUrl && { url: a.previewUrl }
+			},
+			onRemove: () => onRemove(a.id),
+			...a.kind === "text" && { onOpen: () => setEditing(a) }
+		}) }, a.id))
+	}), /* @__PURE__ */ jsx(PastedTextDialog, {
+		text: editing?.text,
+		onClose: () => setEditing(void 0),
+		...onEditText && editing && { onSave: (text) => onEditText(editing.id, text) }
+	})] });
+}
+/** Shows pasted text in a modal, editable when `onSave` is set. */
+function PastedTextDialog({ text, onClose, onSave, title = "Pasted text" }) {
+	const [draft, setDraft] = useState(text ?? "");
+	useEffect(() => setDraft(text ?? ""), [text]);
+	return /* @__PURE__ */ jsxs(Modal, {
+		isOpen: text !== void 0,
+		onOpenChange: (open) => !open && onClose(),
+		title,
+		children: [/* @__PURE__ */ jsx("textarea", {
+			value: draft,
+			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]"
+		}), /* @__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"
+			}), onSave && /* @__PURE__ */ jsx(Button, {
+				variant: "primary",
+				onPress: () => {
+					onSave(draft);
+					onClose();
+				},
+				children: "Save"
+			})]
+		})]
+	});
+}
+// src/components/messages.tsx
+/** "just now", "5 minutes ago", "21 hours ago", "yesterday", then a date. */
+function formatRelativeTime(iso, now = Date.now()) {
+	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";
+	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, {
+		month: "short",
+		day: "numeric"
+	});
+}
+/** Plain text of a message, for copy and read aloud. */
+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 [copied, setCopied] = useState(false);
+	return /* @__PURE__ */ jsx(IconButton, {
+		label: copied ? "Copied" : "Copy",
+		size: "sm",
+		onPress: () => {
+			navigator.clipboard?.writeText(text);
+			setCopied(true);
+			setTimeout(() => setCopied(false), 1500);
+		},
+		children: copied ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Copy, {})
+	});
+}
+const timeClass = "px-1 font-chat-sans text-xs 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 text = messageText(message);
+	const attachments = message.parts.filter((p) => p.type === "attachment");
+	const [viewing, setViewing] = useState();
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("group/message flex flex-col items-end", className),
+		children: [
+			attachments.length > 0 && /* @__PURE__ */ jsx("ul", {
+				"aria-label": "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,
+					size: "sm",
+					...a.text !== void 0 && { onOpen: () => setViewing(a.text) }
+				}) }, a.id))
+			}),
+			/* @__PURE__ */ jsx(PastedTextDialog, {
+				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
+			}),
+			/* @__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)
+					}),
+					onRetry && /* @__PURE__ */ jsx(IconButton, {
+						label: "Retry",
+						size: "sm",
+						onPress: onRetry,
+						children: /* @__PURE__ */ jsx(RefreshCw, {})
+					}),
+					onEdit && /* @__PURE__ */ jsx(IconButton, {
+						label: "Edit",
+						size: "sm",
+						onPress: onEdit,
+						children: /* @__PURE__ */ jsx(Pencil, {})
+					}),
+					/* @__PURE__ */ jsx(CopyButton, { text }),
+					actions
+				]
+			})
+		]
+	});
+}
+/**
+* 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 streaming = message.status === "streaming";
+	const views = useToolViews();
+	const blocks = toBlocks(message.parts, (part) => views[part.name]?.Block !== void 0);
+	return /* @__PURE__ */ jsxs("div", {
+		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 === "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, {
+					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 === "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."
+			}),
+			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",
+						size: "sm",
+						onPress: onReadAloud,
+						children: /* @__PURE__ */ jsx(Volume2, {})
+					}),
+					onFeedback && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(IconButton, {
+						label: "Good response",
+						size: "sm",
+						onPress: () => onFeedback("good"),
+						children: /* @__PURE__ */ jsx(ThumbsUp, {})
+					}), /* @__PURE__ */ jsx(IconButton, {
+						label: "Bad response",
+						size: "sm",
+						onPress: () => onFeedback("bad"),
+						children: /* @__PURE__ */ jsx(ThumbsDown, {})
+					})] }),
+					onRetry && /* @__PURE__ */ jsx(IconButton, {
+						label: "Retry",
+						size: "sm",
+						onPress: onRetry,
+						children: /* @__PURE__ */ jsx(RefreshCw, {})
+					}),
+					actions,
+					/* @__PURE__ */ jsx("span", {
+						className: timeClass,
+						children: formatRelativeTime(message.createdAt)
+					})
+				]
+			})
+		]
+	});
+}
+// src/components/approval-card.tsx
+/**
+* Asks the user before a tool runs, above the composer. Shows the tool's label and what it will do: its
+* view's `Detail` when it has one, else the input. Replying in the composer instead declines it.
+*/
+function ApprovalCard({ approval, onRespond, className }) {
+	const { part } = approval;
+	const view = useToolView(part.name);
+	const Detail = view.Detail;
+	const preview = {
+		...part,
+		status: "awaiting"
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		role: "alertdialog",
+		"aria-label": `Allow ${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"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "min-w-0 flex-1 font-medium",
+					children: view.ask?.(part) ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+						"Allow ",
+						activityLabel(part, view),
+						"?"
+					] })
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "max-h-48 overflow-auto [scrollbar-width:thin]",
+				children: Detail ? /* @__PURE__ */ jsx(Detail, { part: preview }) : /* @__PURE__ */ jsx(CodeBlock, {
+					variant: "boxed",
+					label: part.name,
+					code: JSON.stringify(part.input ?? {}, null, 2)
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex justify-end gap-2",
+				children: [/* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					className: "border border-chat-border-strong",
+					onPress: () => onRespond(part.id, false),
+					children: "Deny"
+				}), /* @__PURE__ */ jsx(Button, {
+					variant: "primary",
+					autoFocus: true,
+					onPress: () => onRespond(part.id, true),
+					children: "Allow"
+				})]
+			})
+		]
+	});
+}
+// src/components/context-panel.tsx
+const FREE_COLOR = "var(--chat-raised)";
+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 }) {
+	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);
+	const reserved = counted.reduce((sum, c) => sum + (c.reserved ? c.tokens : 0), 0);
+	const free = Math.max(usage.limit - used - reserved, 0);
+	const share = (tokens) => formatShare(tokens / usage.limit);
+	return /* @__PURE__ */ jsxs(Disclosure, {
+		summary: title,
+		defaultExpanded,
+		className: clsx("font-chat-sans text-chat-fg", className),
+		summaryClassName: "text-[0.9375rem] 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",
+					children: [
+						formatTokens(used),
+						" / ",
+						formatTokens(usage.limit)
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				role: "meter",
+				"aria-label": "Context used",
+				"aria-valuemin": 0,
+				"aria-valuemax": usage.limit,
+				"aria-valuenow": used,
+				className: "mb-3 flex h-1 gap-px overflow-hidden rounded-full",
+				style: { background: FREE_COLOR },
+				children: counted.map((c) => /* @__PURE__ */ jsx("span", {
+					className: "h-full min-w-[2px]",
+					style: {
+						width: `${c.tokens / usage.limit * 100}%`,
+						background: c.color ?? DEFAULT_COLOR
+					}
+				}, c.id))
+			}),
+			/* @__PURE__ */ jsxs("ul", {
+				className: "space-y-1",
+				children: [counted.map((c) => /* @__PURE__ */ jsx(CategoryRow, {
+					category: c,
+					share: share(c.tokens)
+				}, c.id)), /* @__PURE__ */ jsx(CategoryRow, {
+					category: {
+						id: "free",
+						label: "Free space",
+						tokens: free,
+						color: FREE_COLOR
+					},
+					share: share(free)
+				})]
+			}),
+			deferred.length > 0 && /* @__PURE__ */ jsx("ul", {
+				className: "mt-3 space-y-1",
+				children: deferred.map((c) => /* @__PURE__ */ jsx(CategoryRow, {
+					category: c,
+					share: "—"
+				}, c.id))
+			}),
+			usage.groups && usage.groups.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: "mt-3 space-y-1.5",
+				children: usage.groups.map((g) => /* @__PURE__ */ jsx(GroupList, { group: g }, g.id))
+			})
+		]
+	});
+}
+function CategoryRow({ category, share }) {
+	const label = category.hint ? /* @__PURE__ */ jsx(Tooltip, {
+		content: category.hint,
+		children: /* @__PURE__ */ jsx(Focusable, { children: /* @__PURE__ */ jsx("span", {
+			tabIndex: 0,
+			className: "cursor-help underline decoration-chat-subtle decoration-dotted underline-offset-4 outline-none",
+			children: category.label
+		}) })
+	}) : category.label;
+	return /* @__PURE__ */ jsxs("li", {
+		className: "flex items-center gap-2.5 text-sm",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: "size-2.5 shrink-0 rounded-[2px]",
+				style: { background: category.color ?? (category.deferred ? "var(--chat-selected)" : DEFAULT_COLOR) }
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "min-w-0 flex-1 truncate text-chat-muted",
+				children: label
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "w-14 text-right text-chat-muted tabular-nums",
+				children: formatTokens(category.tokens)
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "w-12 text-right text-chat-muted tabular-nums",
+				children: share
+			})
+		]
+	});
+}
+function GroupList({ group }) {
+	return /* @__PURE__ */ jsx(Disclosure, {
+		summary: group.label,
+		trailing: /* @__PURE__ */ jsx("span", {
+			className: "text-sm text-chat-subtle tabular-nums",
+			children: group.items.length
+		}),
+		indicator: "chevron",
+		summaryClassName: "text-sm",
+		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",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "min-w-0 flex-1 truncate",
+					children: item.label
+				}), /* @__PURE__ */ jsx("span", {
+					className: "w-12 shrink-0 text-right tabular-nums",
+					children: formatTokens(item.tokens)
+				})]
+			}, item.id))
+		})
+	});
+}
+function formatShare(fraction) {
+	return `${(fraction * 100).toFixed(1)}%`;
+}
+// src/components/composer.tsx
+/** 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 }) {
+	const [own, setOwn] = useState("");
+	const text = value ?? own;
+	const setText = (next) => {
+		if (value === void 0) setOwn(next);
+		onChange?.(next);
+	};
+	const area = useRef(null);
+	const fit = useCallback(() => {
+		const el = area.current;
+		if (!el) return;
+		el.style.height = "auto";
+		el.style.height = `${el.scrollHeight}px`;
+		el.style.overflowY = el.scrollHeight > el.clientHeight + 1 ? "auto" : "hidden";
+	}, []);
+	useLayoutEffect(fit, [
+		text,
+		variant,
+		fit
+	]);
+	useEffect(() => {
+		const el = area.current;
+		if (!el || typeof ResizeObserver === "undefined") return;
+		let width = el.clientWidth;
+		const observer = new ResizeObserver(() => {
+			if (el.clientWidth !== width) width = el.clientWidth, fit();
+		});
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, [fit]);
+	const [dragging, setDragging] = useState(false);
+	const canSend = !busy && !isDisabled && !submitDisabled && (allowEmpty || text.trim().length > 0);
+	const submit = () => {
+		if (!canSend) return;
+		onSubmit(text);
+		setText("");
+	};
+	const onKeyDown = (e) => {
+		if (e.key !== "Enter" || e.shiftKey || e.nativeEvent.isComposing || coarsePointer()) return;
+		e.preventDefault();
+		submit();
+	};
+	const onPaste = (e) => {
+		const files = [...e.clipboardData.files];
+		if (files.length && onFiles) {
+			e.preventDefault();
+			onFiles(files);
+			return;
+		}
+		const pasted = e.clipboardData.getData("text/plain");
+		if (onLongPaste && pasted.length > longPasteChars) {
+			e.preventDefault();
+			onLongPaste(pasted);
+		}
+	};
+	const dropProps = onFiles && {
+		onDragOver: (e) => {
+			if (!e.dataTransfer.types.includes("Files")) return;
+			e.preventDefault();
+			setDragging(true);
+		},
+		onDragLeave: (e) => {
+			if (!e.currentTarget.contains(e.relatedTarget)) setDragging(false);
+		},
+		onDrop: (e) => {
+			if (!e.dataTransfer.files.length) return;
+			e.preventDefault();
+			setDragging(false);
+			onFiles([...e.dataTransfer.files]);
+		}
+	};
+	const compact = variant === "compact";
+	const action = busy ? /* @__PURE__ */ jsx(IconButton, {
+		label: "Stop",
+		variant: "primary",
+		onPress: onStop,
+		className: "rounded-chat-md [&_svg]:size-3.5 [&_svg]:fill-current",
+		children: /* @__PURE__ */ jsx(Square, {})
+	}) : /* @__PURE__ */ jsx(IconButton, {
+		label: "Send",
+		variant: "primary",
+		onPress: submit,
+		isDisabled: !canSend,
+		className: "rounded-chat-md",
+		children: /* @__PURE__ */ jsx(ArrowUp, {})
+	});
+	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),
+		...dropProps,
+		onPointerDown: (e) => {
+			if (e.target === e.currentTarget) {
+				e.preventDefault();
+				area.current?.focus();
+			}
+		},
+		children: [above, /* @__PURE__ */ jsxs("div", {
+			className: clsx("flex gap-2", compact ? "items-end" : "flex-col"),
+			children: [
+				compact && leading,
+				/* @__PURE__ */ jsx("textarea", {
+					ref: area,
+					rows: 1,
+					value: text,
+					onChange: (e) => setText(e.target.value),
+					onKeyDown,
+					onPaste,
+					placeholder,
+					"aria-label": "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")
+				}),
+				compact ? /* @__PURE__ */ jsxs("div", {
+					className: "flex shrink-0 items-center gap-1",
+					children: [trailing, action]
+				}) : /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-1",
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							className: "flex min-w-0 flex-1 items-center gap-1",
+							children: leading
+						}),
+						trailing,
+						action
+					]
+				})
+			]
+		})]
+	});
+}
+/** The `+` button that opens the attach menu above the composer. */
+function AttachButton({ children, label = "Add files and more" }) {
+	return /* @__PURE__ */ jsxs(MenuTrigger, { children: [/* @__PURE__ */ jsx(IconButton, {
+		label,
+		children: /* @__PURE__ */ jsx(Plus, {})
+	}), /* @__PURE__ */ jsx(Popover, {
+		placement: "top start",
+		children
+	})] });
+}
+// 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 }) {
+	const current = models.find((m) => m.id === model);
+	const efforts = current?.efforts ?? [];
+	const currentEffort = efforts.find((e) => e.id === (effort ?? current?.defaultEffort));
+	const main = models.filter((m) => !m.secondary);
+	const more = models.filter((m) => m.secondary);
+	const item = (m) => /* @__PURE__ */ jsx(MenuItem, {
+		id: m.id,
+		description: m.disabledReason ?? m.description,
+		isDisabled: m.disabled ?? false,
+		children: m.label
+	}, m.id);
+	const pick = (keys) => {
+		if (keys === "all") return;
+		const [id] = keys;
+		if (id !== void 0) onModelChange(String(id));
+	};
+	return /* @__PURE__ */ jsxs(MenuTrigger, { children: [/* @__PURE__ */ jsxs(Button, {
+		size: "sm",
+		"aria-label": `Model: ${current?.label ?? model}`,
+		className: clsx("text-chat-muted data-hovered:text-chat-fg", className),
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "min-w-0 truncate text-chat-fg",
+				children: current?.label ?? model
+			}),
+			currentEffort && /* @__PURE__ */ jsx("span", {
+				className: "chat-picker-detail text-chat-muted",
+				children: currentEffort.label
+			}),
+			/* @__PURE__ */ jsx(ChevronDown, {
+				"aria-hidden": true,
+				className: "size-3.5"
+			})
+		]
+	}), /* @__PURE__ */ jsxs(Popover, {
+		placement: "top end",
+		className: "w-72",
+		children: [/* @__PURE__ */ jsxs(Menu, {
+			"aria-label": "Model",
+			children: [
+				/* @__PURE__ */ jsx(MenuSection, {
+					selectionMode: "single",
+					selectedKeys: [model],
+					onSelectionChange: pick,
+					children: main.map(item)
+				}),
+				(efforts.length > 0 || more.length > 0) && /* @__PURE__ */ jsx(MenuSeparator, {}),
+				efforts.length > 0 && onEffortChange && /* @__PURE__ */ jsxs(SubmenuTrigger, { children: [/* @__PURE__ */ jsx(MenuItem, {
+					id: "__effort",
+					detail: currentEffort?.label,
+					children: "Effort"
+				}), /* @__PURE__ */ jsxs(Popover, {
+					placement: "end top",
+					className: "w-80",
+					children: [/* @__PURE__ */ jsx(MenuNote, { children: effortNote }), /* @__PURE__ */ jsx(Menu, {
+						"aria-label": "Effort",
+						selectionMode: "single",
+						selectedKeys: currentEffort ? [currentEffort.id] : [],
+						onSelectionChange: (keys) => {
+							if (keys === "all") return;
+							const [id] = keys;
+							if (id !== void 0) onEffortChange(String(id));
+						},
+						children: efforts.map((e) => /* @__PURE__ */ jsx(MenuItem, {
+							id: e.id,
+							textValue: e.label,
+							children: /* @__PURE__ */ jsxs("span", {
+								className: "flex items-center gap-2",
+								children: [
+									e.label,
+									e.recommended && /* @__PURE__ */ jsx(Badge, { children: "Recommended" }),
+									e.warning && /* @__PURE__ */ jsx(Badge, {
+										tone: "warning",
+										icon: /* @__PURE__ */ jsx(AlertTriangle, {}),
+										children: e.warning
+									})
+								]
+							})
+						}, e.id))
+					})]
+				})] }),
+				more.length > 0 && /* @__PURE__ */ jsxs(SubmenuTrigger, { children: [/* @__PURE__ */ jsx(MenuItem, {
+					id: "__more",
+					children: "More models"
+				}), /* @__PURE__ */ jsx(Popover, {
+					placement: "end top",
+					className: "w-72",
+					children: /* @__PURE__ */ jsx(Menu, {
+						"aria-label": "More models",
+						selectionMode: "single",
+						selectedKeys: [model],
+						onSelectionChange: pick,
+						children: more.map(item)
+					})
+				})] })
+			]
+		}), footnote && /* @__PURE__ */ jsx(MenuNote, {
+			className: "border-t border-chat-popover-border text-xs",
+			children: footnote
+		})]
+	})] });
+}
+// src/components/message-list.tsx
+/** How close to the bottom still counts as "at the bottom", in px. */
+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 }) {
+	const scroller = useRef(null);
+	const content = useRef(null);
+	const stuck = useRef(true);
+	const [atBottom, setAtBottom] = useState(true);
+	const toBottom = useCallback((behavior = "auto") => {
+		const el = scroller.current;
+		if (el) el.scrollTo({
+			top: el.scrollHeight,
+			behavior
+		});
+	}, []);
+	const onScroll = () => {
+		const el = scroller.current;
+		if (!el) return;
+		const bottom = el.scrollHeight - el.scrollTop - el.clientHeight < STICK_SLOP;
+		stuck.current = bottom;
+		setAtBottom(bottom);
+	};
+	useEffect(() => {
+		const el = content.current;
+		if (!el) return;
+		const observer = new ResizeObserver(() => {
+			if (stuck.current) toBottom();
+		});
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, [toBottom]);
+	const lastUser = messages.findLast((m) => m.role === "user")?.id;
+	useLayoutEffect(() => {
+		stuck.current = true;
+		setAtBottom(true);
+		toBottom();
+	}, [lastUser, toBottom]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("relative min-h-0 flex-1", className),
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: scroller,
+			onScroll,
+			className: "h-full overflow-y-auto [scrollbar-gutter:stable] [scrollbar-width:thin]",
+			children: /* @__PURE__ */ jsxs("div", {
+				ref: content,
+				className: "flex min-h-full flex-col",
+				children: [/* @__PURE__ */ jsx("div", {
+					role: "log",
+					"aria-label": "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, {
+						message: m,
+						...onEdit && { onEdit: () => onEdit(m.id) }
+					}, m.id) : /* @__PURE__ */ jsx(AssistantMessage, {
+						message: m,
+						...onRetry && { onRetry: () => onRetry(m.id) },
+						...onFeedback && { onFeedback: (f) => onFeedback(m.id, f) },
+						...renderPart && { renderPart }
+					}, m.id))
+				}), footer && /* @__PURE__ */ jsx("div", {
+					className: "sticky bottom-0",
+					children: footer
+				})]
+			})
+		}), !atBottom && /* @__PURE__ */ jsx(IconButton, {
+			label: "Scroll to bottom",
+			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, {})
+		})]
+	});
+}
+// 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 }) {
+	return /* @__PURE__ */ jsxs("header", {
+		className: clsx("flex h-12 shrink-0 items-center gap-1 px-3 font-chat-sans", className),
+		children: [
+			leading,
+			menu ? /* @__PURE__ */ jsxs(MenuTrigger, { children: [/* @__PURE__ */ jsxs(Button, {
+				size: "sm",
+				className: "min-w-0 text-chat-fg",
+				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(Popover, {
+				placement: "bottom start",
+				children: menu
+			})] }) : /* @__PURE__ */ jsx("h1", {
+				className: "min-w-0 truncate px-2 text-sm text-chat-fg",
+				children: title
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "ml-auto flex shrink-0 items-center gap-1",
+				children: actions
+			})
+		]
+	});
+}
+/** 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 act = (key) => {
+		if (key === "pin") onPin?.();
+		else if (key === "rename") onRename?.();
+		else if (key === "share") onShare?.();
+		else if (key === "delete") onDelete?.();
+	};
+	return /* @__PURE__ */ jsxs(Menu, {
+		"aria-label": "Chat actions",
+		className: "min-w-44",
+		onAction: act,
+		children: [
+			onPin && /* @__PURE__ */ jsx(MenuItem, {
+				id: "pin",
+				icon: pinned ? /* @__PURE__ */ jsx(PinOff, {}) : /* @__PURE__ */ jsx(Pin, {}),
+				shortcut: "P",
+				children: pinned ? "Unpin" : "Pin"
+			}),
+			onRename && /* @__PURE__ */ jsx(MenuItem, {
+				id: "rename",
+				icon: /* @__PURE__ */ jsx(Pencil, {}),
+				shortcut: "R",
+				children: "Rename"
+			}),
+			onAddToProject && /* @__PURE__ */ jsxs(SubmenuTrigger, { children: [/* @__PURE__ */ jsx(MenuItem, {
+				id: "project",
+				icon: /* @__PURE__ */ jsx(FolderPlus, {}),
+				children: "Add to project"
+			}), /* @__PURE__ */ jsx(Popover, {
+				placement: "end top",
+				className: "w-60",
+				children: /* @__PURE__ */ jsx(MenuSearch, {
+					placeholder: "Search or create a project",
+					children: /* @__PURE__ */ jsxs(Menu, {
+						"aria-label": "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"
+						}), (projects ?? []).map((p) => /* @__PURE__ */ jsx(MenuItem, {
+							id: p.id,
+							children: p.name
+						}, p.id))]
+					})
+				})
+			})] }),
+			onShare && /* @__PURE__ */ jsx(MenuItem, {
+				id: "share",
+				icon: /* @__PURE__ */ jsx(Share, {}),
+				children: "Share chat"
+			}),
+			children,
+			onDelete && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MenuSeparator, {}), /* @__PURE__ */ jsx(MenuItem, {
+				id: "delete",
+				icon: /* @__PURE__ */ jsx(Trash2, {}),
+				shortcut: "D",
+				tone: "danger",
+				children: "Delete"
+			})] })
+		]
+	});
+}
+// 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");
+/**
+* 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 row = (chat, nested = false) => /* @__PURE__ */ jsx(ChatRow, {
+		chat,
+		active: chat.id === activeId,
+		nested,
+		...onSelect && { onSelect },
+		...rowMenu && { menu: rowMenu(chat) }
+	}, chat.id);
+	const items = (list) => list.map((item) => isProject(item) ? /* @__PURE__ */ jsx(ProjectRow, {
+		project: item,
+		activeId,
+		row
+	}, item.id) : row(item));
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": props["aria-label"] ?? "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",
+				children: [
+					/* @__PURE__ */ jsxs(Button$1, {
+						slot: "trigger",
+						className: "group/trigger flex min-w-0 cursor-pointer items-center gap-1 rounded-chat-sm outline-none data-hovered:text-chat-muted data-focus-visible:ring-2 data-focus-visible:ring-chat-focus",
+						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"
+						})]
+					}),
+					section.badge,
+					/* @__PURE__ */ jsx("span", {
+						className: "ml-auto flex items-center",
+						children: section.action
+					})
+				]
+			}), /* @__PURE__ */ jsxs(DisclosurePanel, { children: [/* @__PURE__ */ jsx("ul", {
+				className: "flex flex-col gap-px",
+				children: items(section.items)
+			}), section.onViewAll && /* @__PURE__ */ jsx(Button$1, {
+				onPress: section.onViewAll,
+				className: clsx(rowClass, "text-chat-muted"),
+				children: "View all"
+			})] })]
+		}, section.id) : /* @__PURE__ */ jsx("ul", {
+			className: "flex flex-col gap-px",
+			children: items(section.items)
+		}, section.id))
+	});
+}
+function ChatRow({ chat, active, nested, onSelect, menu }) {
+	const [menuOpen, setMenuOpen] = useState(false);
+	const { dismiss } = useSidebar();
+	const markerClass = "size-2 shrink-0 rounded-full";
+	const marker = chat.running ? /* @__PURE__ */ jsx("span", {
+		role: "img",
+		"aria-label": "Running",
+		className: clsx(markerClass, "animate-pulse bg-chat-accent motion-reduce:animate-none")
+	}) : chat.unread ? /* @__PURE__ */ jsx("span", {
+		role: "img",
+		"aria-label": "Unread",
+		className: clsx(markerClass, "bg-chat-check")
+	}) : null;
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		className: clsx("min-w-0 flex-1 truncate", chat.unread && !active && "font-medium"),
+		children: chat.title
+	}), marker] });
+	const common = {
+		className: clsx(rowClass, nested && "pl-8", active && "bg-chat-selected", menu && (menuOpen || active ? "pr-8" : "group-hover/item:pr-8 group-focus-within/item:pr-8"), menu && "[@media(hover:none)]:pr-10"),
+		"aria-current": active ? "page" : void 0,
+		onPress: () => (onSelect?.(chat.id), dismiss())
+	};
+	return /* @__PURE__ */ jsxs("li", {
+		className: "group/item relative",
+		children: [chat.href ? /* @__PURE__ */ jsx(Link, {
+			...common,
+			href: chat.href,
+			children: content
+		}) : /* @__PURE__ */ jsx(Button$1, {
+			...common,
+			children: content
+		}), menu && /* @__PURE__ */ jsxs(MenuTrigger, {
+			isOpen: menuOpen,
+			onOpenChange: setMenuOpen,
+			children: [/* @__PURE__ */ jsx(IconButton, {
+				label: `More options for ${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, {})
+			}), /* @__PURE__ */ jsx(Popover, {
+				placement: "bottom start",
+				children: menu
+			})]
+		})]
+	});
+}
+function ProjectRow({ project, activeId, row }) {
+	const holdsActive = project.chats.some((c) => c.id === activeId);
+	return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Disclosure$1, {
+		defaultExpanded: project.defaultExpanded ?? holdsActive,
+		children: ({ isExpanded }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Heading, {
+			className: "m-0 font-normal",
+			children: /* @__PURE__ */ jsxs(Button$1, {
+				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("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" })
+				]
+			})
+		}), /* @__PURE__ */ jsx(DisclosurePanel, { children: /* @__PURE__ */ jsx("ul", {
+			className: "flex flex-col gap-px",
+			children: project.chats.map((c) => row(c, true))
+		}) })] })
+	}) });
+}
+// src/views/chat-view.tsx
+/** Column defaults per density; `contentWidth` / `contentPadding` override them. */
+const densityVars = {
+	full: {},
+	panel: {
+		"--chat-content-width": "100%",
+		"--chat-content-padding": "1rem",
+		"--chat-message-font-size": "1rem"
+	},
+	inline: {
+		"--chat-content-width": "100%",
+		"--chat-content-padding": "0.75rem",
+		"--chat-message-font-size": "0.9375rem"
+	}
+};
+/** 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 }) {
+	const style = {
+		...densityVars[density],
+		...contentWidth && { "--chat-content-width": contentWidth },
+		...contentPadding && { "--chat-content-padding": contentPadding }
+	};
+	const empty = messages.length === 0;
+	const [body, short] = useShortPane();
+	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: "Or reply directly…" }
+	});
+	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", {
+			ref: body,
+			className: "chat-view-body flex min-h-0 flex-1 flex-col",
+			children: empty ? /* @__PURE__ */ jsx("div", {
+				className: "flex flex-1 flex-col items-center justify-center overflow-y-auto px-(--chat-gutter) pb-[10cqh]",
+				children: /* @__PURE__ */ jsx("div", {
+					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 })
+							})
+						]
+					})
+				})
+			})
+		})]
+	});
+}
+/** Below this pane height (px) the docked composer is one row and the disclaimer hides, e.g. stacked panes or a phone on its side. */
+const SHORT_PANE = 360;
+/** Tracks the chat body's own height, so it adapts to its pane rather than the window. */
+function useShortPane() {
+	const [short, setShort] = useState(false);
+	const observer = useRef(null);
+	return [useCallback((el) => {
+		observer.current?.disconnect();
+		if (!el) return;
+		observer.current = new ResizeObserver(([entry]) => entry && setShort(entry.contentRect.height < SHORT_PANE));
+		observer.current.observe(el);
+	}, []), short];
+}
+/** A new chat: greeting over a centered composer. */
+function EmptyState({ greeting, icon, children, footer }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-8",
+		children: [
+			/* @__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]",
+					children: icon
+				}), greeting]
+			}),
+			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
+* content on phones. Children get `useSidebar()` and `<SidebarToggle>`.
+*/
+function AppShell({ sidebar, children, defaultCollapsed, className }) {
+	const drawer = useMediaQuery(DRAWER_QUERY);
+	const [collapsed, setCollapsed] = useState(() => defaultCollapsed ?? (typeof window !== "undefined" && window.matchMedia("(max-width: 1023.98px)").matches));
+	const [drawerOpen, setDrawerOpen] = useState(false);
+	const toggle = useCallback(() => drawer ? setDrawerOpen((o) => !o) : setCollapsed((c) => !c), [drawer]);
+	const dismiss = useCallback(() => setDrawerOpen(false), []);
+	const pinned = useMemo(() => ({
+		collapsed,
+		drawer,
+		drawerOpen,
+		toggle,
+		dismiss
+	}), [
+		collapsed,
+		drawer,
+		drawerOpen,
+		toggle,
+		dismiss
+	]);
+	const inDrawer = useMemo(() => ({
+		...pinned,
+		collapsed: false
+	}), [pinned]);
+	return /* @__PURE__ */ jsxs(SidebarContext.Provider, {
+		value: pinned,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: clsx("flex h-dvh overflow-hidden bg-chat-bg text-chat-fg", className),
+			children: [!drawer && /* @__PURE__ */ jsx("aside", {
+				className: clsx("shrink-0 overflow-hidden border-r border-chat-divider bg-chat-sidebar transition-[width] duration-200 ease-out motion-reduce:transition-none", collapsed ? "w-13" : "w-(--chat-sidebar-width,18rem)"),
+				children: sidebar
+			}), /* @__PURE__ */ jsx("main", {
+				className: "flex min-w-0 flex-1 flex-col",
+				children
+			})]
+		}), drawer && /* @__PURE__ */ jsx(Drawer, {
+			isOpen: drawerOpen,
+			onOpenChange: setDrawerOpen,
+			"aria-label": "Sidebar",
+			children: /* @__PURE__ */ jsx(SidebarContext.Provider, {
+				value: inDrawer,
+				children: sidebar
+			})
+		})]
+	});
+}
+/** Opens the drawer on phones, collapses / expands the pinned sidebar elsewhere. */
+function SidebarToggle({ drawerOnly = false, className }) {
+	const { drawer, drawerOpen, collapsed, toggle } = useSidebar();
+	if (drawerOnly && !drawer) return null;
+	return /* @__PURE__ */ jsx(IconButton, {
+		label: drawer ? drawerOpen ? "Close sidebar" : "Open sidebar" : collapsed ? "Expand sidebar" : "Collapse sidebar",
+		onPress: toggle,
+		className,
+		children: /* @__PURE__ */ jsx(PanelLeft, {})
+	});
+}
+// 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 }) {
+	const { collapsed } = useSidebar();
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("flex h-full flex-col font-chat-sans", collapsed ? "w-13" : "w-full", className),
+		children: [
+			/* @__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 && headerActions,
+					/* @__PURE__ */ jsx(SidebarToggle, {})
+				]
+			}),
+			nav && /* @__PURE__ */ jsx("ul", {
+				className: clsx("flex shrink-0 flex-col gap-px px-2 pb-2", collapsed && "items-center"),
+				children: nav
+			}),
+			!collapsed && /* @__PURE__ */ jsx("div", {
+				className: "min-h-0 flex-1 overflow-y-auto px-2 pt-2 pb-4 [scrollbar-width:thin]",
+				children
+			}),
+			collapsed && /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+			footer && /* @__PURE__ */ jsx("div", {
+				className: "shrink-0 border-t border-chat-divider p-2 pb-[max(0.5rem,env(safe-area-inset-bottom))]",
+				children: footer
+			})
+		]
+	});
+}
+/** 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 press = () => {
+		onPress?.();
+		dismiss();
+	};
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+		icon,
+		collapsed ? /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: label
+		}) : /* @__PURE__ */ jsx("span", {
+			className: "min-w-0 flex-1 truncate",
+			children: label
+		}),
+		!collapsed && shortcut && /* @__PURE__ */ jsx("kbd", {
+			className: "font-chat-sans text-xs text-chat-subtle opacity-0 group-data-hovered:opacity-100",
+			children: shortcut
+		})
+	] });
+	const common = {
+		className,
+		onPress: press,
+		"aria-current": active ? "page" : void 0
+	};
+	const control = href ? /* @__PURE__ */ jsx(Link, {
+		...common,
+		href,
+		children: content
+	}) : /* @__PURE__ */ jsx(Button$1, {
+		...common,
+		children: content
+	});
+	return /* @__PURE__ */ jsx("li", { children: collapsed ? /* @__PURE__ */ jsx(Tooltip, {
+		content: label,
+		placement: "right",
+		children: control
+	}) : control });
+}
+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 { collapsed } = useSidebar();
+	const avatar = avatarUrl ? /* @__PURE__ */ jsx("img", {
+		src: avatarUrl,
+		alt: "",
+		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",
+		children: initials(name)
+	});
+	const button = /* @__PURE__ */ jsxs(Button$1, {
+		"aria-label": collapsed ? name : void 0,
+		className: clsx("flex h-12 w-full cursor-pointer items-center gap-2.5 rounded-chat-md text-left outline-none", "data-hovered:bg-chat-hover data-pressed:bg-chat-selected data-focus-visible:ring-2 data-focus-visible:ring-chat-focus", collapsed ? "justify-center" : "px-1.5"),
+		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",
+				children: name
+			}), detail && /* @__PURE__ */ jsx("span", {
+				className: "truncate text-xs text-chat-muted",
+				children: detail
+			})]
+		}), menu && /* @__PURE__ */ jsx(ChevronsUpDown, {
+			"aria-hidden": true,
+			className: "size-4 shrink-0 text-chat-muted"
+		})] })]
+	});
+	if (!menu) return button;
+	return /* @__PURE__ */ jsxs(MenuTrigger, { children: [button, /* @__PURE__ */ jsx(Popover, {
+		placement: "top start",
+		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 };