agentic-ui-kit 0.6.0 → 0.7.1

package/dist/index.js

@@ -1,13 +1,40 @@
 "use client";
 import { A as awaitingToolCalls, C as widgetLoaderMessages, D as toBlocks, F as settleToolCall, L as salvageJson, O as activityTokens, T as readEventStream, _ as replacedId, b as resolveReplaces, d as isStateRef, f as matchesSchema, g as uiActionSchema, i as parseUiMarkup, k as applyEvent } from "./src-D01l3nBc.js";
 import { clsx } from "clsx";
-import { Autocomplete, Button as Button$1, Dialog, DialogTrigger, Disclosure as Disclosure$1, DisclosurePanel, Focusable, Header, Heading, Input, Keyboard, Link, Menu as Menu$1, MenuItem as MenuItem$1, MenuSection as MenuSection$1, MenuTrigger, MenuTrigger as MenuTrigger$1, Modal as Modal$1, ModalOverlay, Popover as Popover$1, SearchField, Separator, SubmenuTrigger, Text, ToggleButton, ToggleButtonGroup, Tooltip as Tooltip$1, TooltipTrigger, useFilter } from "react-aria-components";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Component, Fragment as Fragment$1, createContext, createElement, memo, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
-import { AlertTriangle, ArrowDown, ArrowUp, Check, ChevronDown, ChevronRight, ChevronsUpDown, Copy, FileText, Folder, FolderOpen, FolderPlus, Globe, Info, Mic, MoreHorizontal, PanelLeft, Pencil, Pin, PinOff, Plus, RefreshCw, Share, ShieldQuestion, Square, ThumbsDown, ThumbsUp, Trash2, Volume2, X } from "lucide-react";
+import { extendTailwindMerge } from "tailwind-merge";
+import { Children, Component, Fragment, createContext, createElement, isValidElement, memo, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { Autocomplete, Button as Button$1, Dialog, DialogTrigger, DialogTrigger as DialogTrigger$1, Disclosure as Disclosure$1, DisclosurePanel, Focusable, Header, Heading, Input, Keyboard, Link, Menu as Menu$1, MenuItem as MenuItem$1, MenuSection as MenuSection$1, MenuTrigger, MenuTrigger as MenuTrigger$1, Modal as Modal$1, ModalOverlay, Popover as Popover$1, SearchField, Separator, SubmenuTrigger, Text, ToggleButton, ToggleButtonGroup, Tooltip as Tooltip$1, TooltipTrigger, useFilter } from "react-aria-components";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { AlertTriangle, ArrowDown, ArrowUp, Check, ChevronDown, ChevronRight, ChevronsUpDown, Copy, FileText, Folder, FolderOpen, FolderPlus, Globe, Info, MessageSquare, Mic, MoreHorizontal, PanelLeft, Pencil, Pin, PinOff, Plus, RefreshCw, Share, ShieldQuestion, Square, ThumbsDown, ThumbsUp, Trash2, Volume2, X } from "lucide-react";
 import { UNSAFE_PortalProvider } from "react-aria";
 import { createMathPlugin } from "@streamdown/math";
-import { Streamdown, defaultRehypePlugins } from "streamdown";
+import { Streamdown, defaultComponents, defaultRehypePlugins } from "streamdown";
+// src/primitives/cx.ts
+const twMerge = extendTailwindMerge({ extend: { theme: {
+	radius: [
+		"chat-sm",
+		"chat-md",
+		"chat-lg",
+		"chat-popover"
+	],
+	shadow: ["chat-popover"],
+	animate: [
+		"chat-in",
+		"chat-out",
+		"chat-fade-in",
+		"chat-fade-out",
+		"chat-drawer-in",
+		"chat-drawer-out",
+		"chat-drawer-in-right",
+		"chat-drawer-out-right",
+		"chat-sheet-in",
+		"chat-sheet-out"
+	]
+} } });
+/** `clsx` plus tailwind-merge: later classes win over earlier ones that set the same property, so a caller's `h-7` or `rounded-none` beats the kit's. */
+function cx(...inputs) {
+	return twMerge(clsx(inputs));
+}
 // src/primitives/tooltip.tsx
 function Tooltip({ content, children, placement = "top", delay = 600 }) {
 	return /* @__PURE__ */ jsxs(TooltipTrigger, {
@@ -38,23 +65,88 @@ const variants = {
 	*/
 	danger: "bg-[var(--chat-danger-bg,color-mix(in_srgb,var(--chat-danger)_70%,black))] font-medium text-[var(--chat-danger-fg,#fff)] data-hovered:brightness-110 data-pressed:brightness-95"
 };
-const sizes = {
+const sizes$1 = {
 	sm: "h-7 gap-1.5 px-2 text-(length:--chat-ui-font-size) leading-5 [@media(pointer:coarse)]:h-9",
 	md: "h-8 gap-2 px-2.5 text-(length:--chat-ui-font-size) leading-5 [@media(pointer:coarse)]:h-10",
 	/** Dialog and empty-state actions. */
 	lg: "h-9 gap-2 px-3.5 text-(length:--chat-ui-font-size) leading-5 [@media(pointer:coarse)]:h-11"
 };
-function Button({ variant = "ghost", size = "md", className, ...props }) {
-	return /* @__PURE__ */ jsx(Button$1, {
+/** Press handlers dropped from a button that is disabled with a reason; it only looks and announces as disabled. */
+const pressHandlers = [
+	"onPress",
+	"onPressStart",
+	"onPressEnd",
+	"onPressChange",
+	"onPressUp",
+	"onClick"
+];
+/**
+* A disabled button that still explains itself. React Aria's `isDisabled` makes the button unfocusable and
+* hoverable-less, so there'd be nothing to hang a tooltip on. With a reason the button instead stays focusable
+* with `aria-disabled`, loses its press handlers and never submits a form, and the reason is shown as a tooltip
+* and read as its description.
+*/
+function useDisabledReason(props, disabledReason) {
+	const id = useId();
+	const active = Boolean(props.isDisabled && disabledReason);
+	if (!active) return {
+		active,
+		props,
+		reasonId: void 0
+	};
+	const rest = {
 		...props,
-		className: clsx("inline-flex cursor-pointer items-center rounded-chat-sm font-chat-sans whitespace-nowrap transition-colors select-none [&_svg]:size-4 [&_svg]:shrink-0", "data-disabled:cursor-default data-disabled:opacity-40", focusRing, variants[variant], sizes[size], className)
+		isDisabled: false,
+		type: "button"
+	};
+	for (const h of pressHandlers) delete rest[h];
+	rest["aria-disabled"] = true;
+	rest["data-disabled"] = true;
+	rest["aria-describedby"] = [props["aria-describedby"], id].filter(Boolean).join(" ");
+	return {
+		active,
+		props: rest,
+		reasonId: id
+	};
+}
+/** Hover and press styles are dropped while a button is disabled with a reason, to look as disabled as one that is. */
+const noInteraction = (classes) => classes.replace(/data-(hovered|pressed):\S+\s*/g, "");
+function WithReason({ active, reasonId, reason, children }) {
+	if (!active) return children;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Tooltip, {
+		content: reason,
+		children
+	}), /* @__PURE__ */ jsx("span", {
+		id: reasonId,
+		hidden: true,
+		children: reason
+	})] });
+}
+function Button({ variant = "ghost", size = "md", className, disabledReason, ...rest }) {
+	const { active, props, reasonId } = useDisabledReason(rest, disabledReason);
+	const button = /* @__PURE__ */ jsx(Button$1, {
+		...props,
+		className: cx("inline-flex cursor-pointer items-center justify-center rounded-chat-sm font-chat-sans whitespace-nowrap transition-colors select-none [&_svg]:size-4 [&_svg]:shrink-0", "data-disabled:cursor-default data-disabled:opacity-40", focusRing, active ? noInteraction(variants[variant]) : variants[variant], sizes$1[size], className)
+	});
+	return /* @__PURE__ */ jsx(WithReason, {
+		active,
+		reasonId,
+		reason: disabledReason,
+		children: button
 	});
 }
-function IconButton({ label, variant = "ghost", size = "md", tooltip = true, className, ...props }) {
+function IconButton({ label, variant = "ghost", size = "md", tooltip = true, className, disabledReason, ...rest }) {
+	const { active, props, reasonId } = useDisabledReason(rest, disabledReason);
 	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 transition-colors select-none", "data-disabled:cursor-default data-disabled:opacity-40 [&_svg]:size-4", focusRing, variants[variant], variant === "ghost" && "text-chat-muted data-hovered:text-chat-fg", size === "sm" ? "size-7 [@media(pointer:coarse)]:size-9" : "size-8 [@media(pointer:coarse)]:size-10", className)
+		className: cx("inline-flex shrink-0 cursor-pointer items-center justify-center rounded-chat-sm transition-colors select-none", "data-disabled:cursor-default data-disabled:opacity-40 [&_svg]:size-4", focusRing, active ? noInteraction(variants[variant]) : variants[variant], variant === "ghost" && (active ? "text-chat-muted" : "text-chat-muted data-hovered:text-chat-fg"), size === "sm" ? "size-7 [@media(pointer:coarse)]:size-9" : "size-8 [@media(pointer:coarse)]:size-10", className)
+	});
+	if (active) return /* @__PURE__ */ jsx(WithReason, {
+		active: true,
+		reasonId,
+		reason: disabledReason,
+		children: button
 	});
 	return tooltip ? /* @__PURE__ */ jsx(Tooltip, {
 		content: label,
@@ -70,7 +162,7 @@ const tones = {
 };
 function Badge({ children, tone = "outline", icon, className }) {
 	return /* @__PURE__ */ jsxs("span", {
-		className: clsx("inline-flex items-center gap-1 rounded-full px-2 py-px font-chat-sans text-(length:--chat-ui-font-size-sm) leading-4 whitespace-nowrap [&_svg]:size-3", tones[tone], className),
+		className: cx("inline-flex items-center gap-1 rounded-full px-2 py-px font-chat-sans text-(length:--chat-ui-font-size-sm) leading-4 whitespace-nowrap [&_svg]:size-3", tones[tone], className),
 		children: [icon, children]
 	});
 }
@@ -124,7 +216,8 @@ const defaultIcons = {
 	folder: /* @__PURE__ */ jsx(Folder, {}),
 	folderOpen: /* @__PURE__ */ jsx(FolderOpen, {}),
 	file: /* @__PURE__ */ jsx(FileText, {}),
-	remove: /* @__PURE__ */ jsx(X, {})
+	remove: /* @__PURE__ */ jsx(X, {}),
+	chatList: /* @__PURE__ */ jsx(MessageSquare, {})
 };
 const IconsContext = createContext(defaultIcons);
 /** Merges `icons` over the icons of the enclosing provider (or the defaults). */
@@ -170,6 +263,9 @@ const defaultLabels = {
 	duration: (seconds) => seconds < 60 ? `${seconds}s` : `${Math.floor(seconds / 60)}m ${seconds % 60}s`,
 	ranCommandLabel: "Ran a command",
 	ranCommands: (count) => plural(count, "ran a command", (n) => `ran ${n} commands`),
+	runCommandAsk: "Run this command?",
+	searchWebAsk: "Search the web?",
+	readPageAsk: "Read this page?",
 	searchedWebLabel: "Searched the web",
 	readPageLabel: "Read page",
 	readPages: (count) => plural(count, "read a page", (n) => `read ${n} pages`),
@@ -181,7 +277,7 @@ const defaultLabels = {
 	noResults: "No results",
 	reasoningHidden: "The model's reasoning is not shown.",
 	allowTool: (name) => `Allow ${name}?`,
-	allowAction: (label) => /* @__PURE__ */ jsxs(Fragment, { children: [
+	allowAction: (label) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		"Allow ",
 		label,
 		"?"
@@ -193,9 +289,14 @@ const defaultLabels = {
 	openSidebar: "Open sidebar",
 	expandSidebar: "Expand sidebar",
 	collapseSidebar: "Collapse sidebar",
+	resizeSidebar: "Resize sidebar",
+	withShortcut: (label, keys) => `${label} (${keys})`,
+	ctrlKey: "Ctrl",
 	context: "Context",
 	contextUsed: "Context used",
 	percentUsed: (percent) => `${percent}% used`,
+	contextSummary: (used, limit, percent) => `Context: ${used} / ${limit} (${percent}%)`,
+	contextLoading: "Context: loading",
 	freeSpace: "Free space",
 	tokenCount: (count) => `${count} tokens`,
 	replyPlaceholder: "Reply…",
@@ -240,6 +341,7 @@ const defaultLabels = {
 	justNow: "just now",
 	copy: "Copy",
 	copied: "Copied",
+	copyFieldLabel: "Link",
 	retry: "Retry",
 	edit: "Edit",
 	readAloud: "Read aloud",
@@ -299,27 +401,40 @@ function CopyButton({ text, className }) {
 	});
 }
 // src/primitives/segmented-control.tsx
+const sizes = {
+	sm: {
+		button: "h-6",
+		iconOnly: "w-7"
+	},
+	md: {
+		button: "h-8",
+		iconOnly: "w-9"
+	}
+};
 /**
 * One of a few options, side by side on a track, similar to claude.ai's Chat / Cowork switch. Themed with
 * `--chat-segment-track` (default: a shade darker than the surface it sits on) and `--chat-segment-selected`
 * (default `--chat-raised`).
 */
-function SegmentedControl({ label, options, value, onChange, className }) {
+function SegmentedControl({ label, options, value, onChange, clearable, isDisabled, size = "sm", className }) {
 	return /* @__PURE__ */ jsx(ToggleButtonGroup, {
 		"aria-label": label,
 		selectionMode: "single",
-		disallowEmptySelection: true,
-		selectedKeys: [value],
+		disallowEmptySelection: !clearable,
+		...isDisabled && { isDisabled },
+		selectedKeys: value === null ? [] : [value],
 		onSelectionChange: (keys) => {
 			const next = [...keys][0];
 			if (next !== void 0) onChange(next);
+			else if (clearable) onChange(null);
 		},
-		className: clsx("inline-flex shrink-0 items-center gap-0.5 rounded-chat-md p-0.5", "bg-[var(--chat-segment-track,color-mix(in_srgb,var(--chat-bg)_55%,transparent))]", className),
+		className: cx("inline-flex shrink-0 items-center gap-0.5 rounded-chat-md p-0.5", "bg-[var(--chat-segment-track,color-mix(in_srgb,var(--chat-bg)_55%,transparent))]", className),
 		children: options.map((o) => {
 			const button = /* @__PURE__ */ jsxs(ToggleButton, {
 				id: o.id,
+				...o.isDisabled && { isDisabled: true },
 				...o.iconOnly && { "aria-label": o.label },
-				className: clsx("inline-flex h-6 cursor-pointer items-center justify-center gap-1.5 rounded-[calc(var(--chat-radius-md)-2px)] font-chat-sans text-(length:--chat-ui-font-size) leading-5 text-chat-muted outline-none transition-colors select-none [&_svg]:size-4", o.iconOnly ? "w-7" : "px-2", "data-hovered:text-chat-fg data-focus-visible:ring-2 data-focus-visible:ring-chat-focus", "data-selected:bg-[var(--chat-segment-selected,var(--chat-raised))] data-selected:text-chat-fg data-selected:shadow-[inset_0_0_0_1px_var(--chat-border-strong)]"),
+				className: cx("inline-flex cursor-pointer items-center justify-center gap-1.5 rounded-[calc(var(--chat-radius-md)-2px)] font-chat-sans text-(length:--chat-ui-font-size) leading-5 text-chat-muted outline-none transition-colors select-none [&_svg]:size-4", sizes[size].button, o.iconOnly ? sizes[size].iconOnly : "px-2", "data-disabled:cursor-default data-disabled:opacity-40", "data-hovered:text-chat-fg data-focus-visible:ring-2 data-focus-visible:ring-chat-focus", "data-selected:bg-[var(--chat-segment-selected,var(--chat-raised))] data-selected:text-chat-fg data-selected:shadow-[inset_0_0_0_1px_var(--chat-border-strong)]"),
 				children: [o.icon, !o.iconOnly && o.label]
 			}, o.id);
 			return o.iconOnly ? /* @__PURE__ */ jsx(Tooltip, {
@@ -340,7 +455,7 @@ function Disclosure({ summary, children, className, summaryClassName, panelClass
 			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),
+				className: cx("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(IconSlot, {
 						className: "transition-transform group-aria-expanded/trigger:rotate-90 [&_svg]:size-3.5",
@@ -367,6 +482,11 @@ function Disclosure({ summary, children, className, summaryClassName, panelClass
 	});
 }
 // src/primitives/menu.tsx
+/**
+* Wraps a trigger button and a kit `Popover` (or `Modal`) so that pressing the button toggles it, without
+* importing react-aria. The same component as `DialogTrigger`; use whichever name reads better.
+*/
+const PopoverTrigger = DialogTrigger$1;
 /** 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" });
@@ -385,41 +505,71 @@ function MenuSearch({ placeholder, children, value, onChange }) {
 		}), children]
 	});
 }
-/** Floating panel for menus and pickers: surface color, rounded, soft shadow, fades in. */
-function Popover({ className, offset = 6, ...props }) {
+/** Viewport narrower than `max` px. False on the server and where `matchMedia` is missing. */
+function useNarrower(max) {
+	const query = max === false ? null : `(max-width: ${max - .02}px)`;
+	return useSyncExternalStore((notify) => {
+		if (!query || typeof window === "undefined" || !window.matchMedia) return () => {};
+		const list = window.matchMedia(query);
+		list.addEventListener("change", notify);
+		return () => list.removeEventListener("change", notify);
+	}, () => query && typeof window !== "undefined" && window.matchMedia ? window.matchMedia(query).matches : false, () => false);
+}
+/** Floating panel for menus and pickers: surface color, rounded, soft shadow, fades in. On phones it's a bottom sheet. */
+function Popover({ className, offset = 6, sheet = 768, width = "auto", fullWidthOnPhones, children, ...props }) {
+	if (useNarrower(sheet)) {
+		const { isOpen, onOpenChange } = props;
+		return /* @__PURE__ */ jsx(ModalOverlay, {
+			...isOpen !== void 0 && { isOpen },
+			...onOpenChange && { onOpenChange },
+			isDismissable: true,
+			className: "fixed inset-0 z-50 flex items-end bg-(--chat-backdrop) data-entering:animate-chat-fade-in data-exiting:animate-chat-fade-out",
+			children: /* @__PURE__ */ jsx(Modal$1, {
+				className: cx("flex max-h-[85dvh] w-full flex-col overflow-auto rounded-t-chat-lg border-t border-chat-popover-border bg-chat-popover pb-[env(safe-area-inset-bottom)] font-chat-sans text-chat-fg shadow-chat-popover outline-none", "data-entering:animate-chat-sheet-in data-exiting:animate-chat-sheet-out", className),
+				children: typeof children === "function" ? children({
+					placement: "bottom",
+					trigger: null,
+					isEntering: false,
+					isExiting: false,
+					defaultChildren: void 0
+				}) : children
+			})
+		});
+	}
 	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)
+		className: cx("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", width === "trigger" && "w-(--trigger-width) [&_[role=menu]]:min-w-0", fullWidthOnPhones && "max-sm:w-[calc(100vw-1.5rem)]", className),
+		children
 	});
 }
 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)
+		className: cx("max-h-[inherit] min-w-52 overflow-auto p-1.5 outline-none", className)
 	});
 }
-function MenuItem({ children, icon, description, descriptionPlacement = "below", detail, shortcut, tone = "default", className, ...props }) {
+function MenuItem({ children, icon, description, descriptionPlacement = "below", detail, shortcut, tone = "default", indicator = "check", className, ...props }) {
 	const icons = useIcons();
 	const textValue = props.textValue ?? (typeof children === "string" ? children : void 0);
 	return /* @__PURE__ */ jsx(MenuItem$1, {
 		...props,
 		...textValue !== void 0 && { textValue },
-		className: clsx("group flex min-h-7 cursor-pointer items-center gap-2.5 rounded-chat-sm px-2 py-1 text-(length:--chat-ui-font-size) leading-5 text-chat-fg outline-none select-none", "data-focused:bg-chat-popover-hover data-open:bg-chat-popover-hover data-disabled:opacity-40", tone === "danger" && "text-chat-danger", className),
-		children: ({ isSelected, hasSubmenu, selectionMode }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+		className: cx("group flex min-h-7 cursor-pointer items-center gap-2.5 rounded-chat-sm px-2 py-1 text-(length:--chat-ui-font-size) leading-5 text-chat-fg outline-none select-none", "data-focused:bg-chat-popover-hover data-open:bg-chat-popover-hover data-disabled:opacity-40", tone === "danger" && "text-chat-danger", className),
+		children: ({ isSelected, hasSubmenu, selectionMode }) => /* @__PURE__ */ jsxs(Fragment$1, { 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"),
+				className: cx("flex size-4 shrink-0 items-center [&_svg]:size-4", tone === "danger" ? "text-chat-danger" : "text-chat-fg"),
 				children: icon
 			}),
 			/* @__PURE__ */ jsxs("span", {
-				className: clsx("flex min-w-0 flex-1", descriptionPlacement === "beside" ? "items-baseline gap-2" : "flex-col"),
+				className: cx("flex min-w-0 flex-1", descriptionPlacement === "beside" ? "items-baseline gap-2" : "flex-col"),
 				children: [/* @__PURE__ */ jsx(Text, {
 					slot: "label",
-					className: clsx("truncate", descriptionPlacement === "beside" && "shrink-0"),
+					className: cx("truncate", descriptionPlacement === "beside" && "shrink-0"),
 					children
 				}), description && /* @__PURE__ */ jsx(Text, {
 					slot: "description",
-					className: clsx("text-chat-muted", descriptionPlacement === "beside" ? "truncate text-(length:--chat-ui-font-size) leading-5" : "text-(length:--chat-ui-font-size-sm) leading-4"),
+					className: cx("text-chat-muted", descriptionPlacement === "beside" ? "truncate text-(length:--chat-ui-font-size) leading-5" : "text-(length:--chat-ui-font-size-sm) leading-4"),
 					children: description
 				})]
 			}),
@@ -431,7 +581,12 @@ function MenuItem({ children, icon, description, descriptionPlacement = "below",
 				className: "shrink-0 font-chat-sans text-(length:--chat-ui-font-size-sm) leading-4 text-chat-subtle",
 				children: shortcut
 			}),
-			selectionMode !== "none" && isSelected && /* @__PURE__ */ jsx(IconSlot, {
+			selectionMode !== "none" && indicator === "switch" && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				"data-selected": isSelected || void 0,
+				className: "relative h-4 w-7 shrink-0 rounded-full bg-chat-border-strong transition-colors after:absolute after:top-0.5 after:left-0.5 after:size-3 after:rounded-full after:bg-chat-bg after:transition-transform data-selected:bg-chat-accent data-selected:after:translate-x-3 data-selected:after:bg-chat-accent-fg"
+			}),
+			selectionMode !== "none" && indicator === "check" && isSelected && /* @__PURE__ */ jsx(IconSlot, {
 				className: "text-chat-check [&_svg]:size-4",
 				children: icons.check
 			}),
@@ -458,7 +613,7 @@ function MenuSeparator() {
 /** Explanatory text inside a menu, above or below the items. Not focusable. */
 function MenuNote({ children, className }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: clsx("px-2 py-1.5 text-(length:--chat-ui-font-size) leading-snug text-chat-muted", className),
+		className: cx("px-2 py-1.5 text-(length:--chat-ui-font-size) leading-snug text-chat-muted", className),
 		children
 	});
 }
@@ -492,7 +647,7 @@ function ContextMenu({ menu, children, className }) {
 		ref: root,
 		onContextMenu,
 		onKeyDown,
-		className: clsx("relative", className),
+		className: cx("relative", className),
 		children: [children, /* @__PURE__ */ jsxs(MenuTrigger$1, {
 			isOpen: at !== void 0,
 			onOpenChange: (open) => !open && setAt(void 0),
@@ -513,15 +668,23 @@ function ContextMenu({ menu, children, className }) {
 	});
 }
 // src/primitives/overlay.tsx
+const modalSizes = {
+	sm: "max-w-sm",
+	md: "max-w-lg",
+	lg: "max-w-2xl",
+	xl: "max-w-5xl",
+	/** Fills the page inside the overlay's padding. */
+	full: "h-full max-h-none max-w-none"
+};
 /** A centered dialog over a dimmed page. Escape and clicking outside close it; focus stays inside. */
-function Modal({ isOpen, onOpenChange, title, children, className, ...props }) {
+function Modal({ isOpen, onOpenChange, title, size = "lg", placement = "center", children, className, ...props }) {
 	return /* @__PURE__ */ jsx(ModalOverlay, {
 		isOpen,
 		onOpenChange,
 		isDismissable: true,
-		className: "fixed inset-0 z-50 flex items-center justify-center bg-(--chat-backdrop) p-4 data-entering:animate-chat-fade-in data-exiting:animate-chat-fade-out",
+		className: cx("fixed inset-0 z-50 flex justify-center bg-(--chat-backdrop) p-4 data-entering:animate-chat-fade-in data-exiting:animate-chat-fade-out", placement === "top" ? "items-start pt-[10dvh]" : "items-center"),
 		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),
+			className: cx("flex max-h-[85dvh] w-full flex-col rounded-chat-lg border border-chat-popover-border bg-chat-popover font-chat-sans text-chat-fg shadow-chat-popover", modalSizes[size], "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",
@@ -542,7 +705,7 @@ function Drawer({ isOpen, onOpenChange, side = "left", children, className, ...p
 		isDismissable: true,
 		className: "fixed inset-0 z-40 bg-(--chat-backdrop) data-entering:animate-chat-fade-in data-exiting:animate-chat-fade-out",
 		children: /* @__PURE__ */ jsx(Modal$1, {
-			className: clsx("fixed inset-y-0 w-[min(20rem,85vw)] bg-chat-sidebar text-chat-fg shadow-chat-popover outline-none", side === "left" ? "left-0 data-entering:animate-chat-drawer-in data-exiting:animate-chat-drawer-out" : "right-0 data-entering:animate-chat-drawer-in-right data-exiting:animate-chat-drawer-out-right", className),
+			className: cx("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",
@@ -556,10 +719,10 @@ function Drawer({ isOpen, onOpenChange, side = "left", children, className, ...p
 * A titled region that fills its container and lets the body scroll: a dock panel, an agent pane in a
 * grid, a settings card. A `ChatView` placed in the body sizes itself to the panel.
 */
-function Panel({ title, actions, footer, children, variant = "card", className, ...props }) {
+function Panel({ title, actions, footer, children, variant = "card", padded = false, className, ...props }) {
 	return /* @__PURE__ */ jsxs("section", {
 		"aria-label": props["aria-label"],
-		className: 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),
+		className: cx("flex min-h-0 min-w-0 flex-col overflow-hidden bg-chat-bg font-chat-sans text-chat-fg", variant === "card" && "rounded-chat-md border border-chat-border", className),
 		children: [
 			(title || actions) && /* @__PURE__ */ jsxs("header", {
 				className: "flex h-10 shrink-0 items-center gap-2 border-b border-chat-divider px-3 text-(length:--chat-ui-font-size) leading-5",
@@ -572,7 +735,7 @@ function Panel({ title, actions, footer, children, variant = "card", className,
 				})]
 			}),
 			/* @__PURE__ */ jsx("div", {
-				className: "min-h-0 flex-1 overflow-y-auto [scrollbar-width:thin]",
+				className: cx("min-h-0 flex-1 overflow-y-auto [scrollbar-width:thin]", padded && "p-3"),
 				children
 			}),
 			footer && /* @__PURE__ */ jsx("footer", {
@@ -632,8 +795,25 @@ function useReducedMotion() {
 	return useCallback(() => shouldReduceMotion(motion), [motion]);
 }
 // src/primitives/highlight.ts
+/**
+* Shiki with its JavaScript regex engine, not the default Oniguruma WebAssembly one, so a page needs no
+* `'wasm-unsafe-eval'` in its Content Security Policy. Languages and themes load on demand.
+*/
 let shiki;
-const loadShiki = () => shiki ??= import("shiki");
+const loadShiki = () => shiki ??= (async () => {
+	const [lib, { createJavaScriptRegexEngine }] = await Promise.all([import("shiki"), import("shiki/engine/javascript")]);
+	return {
+		lib,
+		highlighter: await lib.createHighlighter({
+			themes: [],
+			langs: [],
+			engine: createJavaScriptRegexEngine({ forgiving: true })
+		})
+	};
+})().catch((error) => {
+	shiki = void 0;
+	throw error;
+});
 const cache = /* @__PURE__ */ new Map();
 const warned = /* @__PURE__ */ new Set();
 /** The theme id if Shiki bundles it; otherwise the default, with one console.warn per unknown id. */
@@ -646,6 +826,13 @@ function pick(id, fallback, known) {
 	}
 	return fallback;
 }
+let failedWarned = false;
+/** One console.warn when highlighting breaks (a blocked chunk, a CSP violation), instead of silently showing plain code. */
+function warnFailed(error) {
+	if (failedWarned) return;
+	failedWarned = true;
+	console.warn("agentic-ui-kit: code highlighting failed, showing plain code.", error);
+}
 /** Parses "--a:#fff;--b:#000" into an object. */
 function parseVars(css) {
 	const vars = {};
@@ -659,15 +846,17 @@ async function highlight(code, language, light, dark) {
 	const key = `${light}\n${dark}\n${language}\n${code}`;
 	const hit = cache.get(key);
 	if (hit) return hit;
-	const { codeToTokens, bundledLanguages, bundledLanguagesAlias, bundledThemes } = await loadShiki();
+	const { lib: { bundledLanguages, bundledLanguagesAlias, bundledThemes }, highlighter } = await loadShiki();
 	const lang = language.toLowerCase();
 	if (!(lang in bundledLanguages) && !(lang in bundledLanguagesAlias)) return void 0;
-	const { tokens, bg, fg } = await codeToTokens(code, {
+	const themes = {
+		light: pick(light, DEFAULT_CODE_THEMES.light, bundledThemes),
+		dark: pick(dark, DEFAULT_CODE_THEMES.dark, bundledThemes)
+	};
+	await Promise.all([highlighter.loadLanguage(lang), highlighter.loadTheme(themes.light, themes.dark)]);
+	const { tokens, bg, fg } = highlighter.codeToTokens(code, {
 		lang,
-		themes: {
-			light: pick(light, DEFAULT_CODE_THEMES.light, bundledThemes),
-			dark: pick(dark, DEFAULT_CODE_THEMES.dark, bundledThemes)
-		},
+		themes,
 		defaultColor: false
 	});
 	const result = {
@@ -692,7 +881,10 @@ function useHighlight(code, language) {
 	useEffect(() => {
 		if (!language) return setResult(void 0);
 		let cancelled = false;
-		highlight(code, language, light, dark).then((r) => !cancelled && setResult(r), () => !cancelled && setResult(void 0));
+		highlight(code, language, light, dark).then((r) => !cancelled && setResult(r), (error) => {
+			warnFailed(error);
+			if (!cancelled) setResult(void 0);
+		});
 		return () => {
 			cancelled = true;
 		};
@@ -726,7 +918,7 @@ function CodeBlock({ code, language, label = language, variant = "plain", copy =
 			}), copy && /* @__PURE__ */ jsx(CopyButton, { text: code })]
 		}), /* @__PURE__ */ jsx("pre", {
 			className: clsx("overflow-auto font-chat-mono text-(length:--chat-code-font-size) leading-[1.75] whitespace-pre text-chat-fg", variant === "plain" && "max-h-56", "[scrollbar-color:var(--chat-border-strong)_transparent] [scrollbar-width:thin]"),
-			children: /* @__PURE__ */ jsxs("code", { children: [highlighted ? highlighted.map((line, i) => /* @__PURE__ */ jsxs(Fragment$1, { children: [i > 0 && "\n", line.map((token, j) => /* @__PURE__ */ jsx("span", {
+			children: /* @__PURE__ */ jsxs("code", { children: [highlighted ? highlighted.map((line, i) => /* @__PURE__ */ jsxs(Fragment, { children: [i > 0 && "\n", line.map((token, j) => /* @__PURE__ */ jsx("span", {
 				className: "chat-code-token",
 				style: token.htmlStyle,
 				children: token.content
@@ -738,12 +930,15 @@ function CodeBlock({ code, language, label = language, variant = "plain", copy =
 /**
 * Applies a chat theme to part of a page. Menus, tooltips and dialogs opened inside render into this
 * element instead of `<body>`, so they get the same theme. An app themed as a whole (variables on
-* `:root`) does not need it for colors, but still uses it for `codeThemes` and `motion`.
+* `:root`) does not need it for colors, but still uses it for `codeThemes` and `motion`. The element is
+* `height: 100%` of its parent by default (so `ChatView` has a height without Tailwind); a `className` such
+* as `h-screen`, or a style rule of your own, replaces that.
 */
 function ChatTheme({ theme, codeThemes, motion, labels, icons, children, className }) {
 	const portal = useRef(null);
 	const getContainer = useCallback(() => portal.current, []);
 	return /* @__PURE__ */ jsxs("div", {
+		"data-chat-root": "",
 		"data-chat-theme": theme,
 		"data-chat-motion": motion,
 		className: clsx("bg-chat-bg font-chat-sans text-chat-fg", className),
@@ -881,7 +1076,7 @@ const DECLINED = "Declined by the user";
 * 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 }) {
+function useChat({ transport, conversationId, initialMessages = [], onTitle, agent, maxSteps = 12, resume = false }) {
 	const contextAgent = useAgentRegistry();
 	const registry = agent === void 0 ? contextAgent : agent;
 	const [messages, setMessages] = useState(initialMessages);
@@ -949,7 +1144,7 @@ function useChat({ transport, conversationId, initialMessages = [], onTitle, age
 		if (ended) commit(ended);
 	}, [commit]);
 	const advanceRef = useRef(() => {});
-	const start = useCallback((history, options, continuation) => {
+	const start = useCallback((history, options, continuation, joining) => {
 		const message = history.at(-1);
 		const controller = new AbortController();
 		const current = {
@@ -965,7 +1160,7 @@ function useChat({ transport, conversationId, initialMessages = [], onTitle, age
 			try {
 				const { transport, conversationId, registry } = latest.current;
 				const tools = registry?.specs();
-				for await (const event of transport.send({
+				const events = joining && conversationId !== void 0 && transport.resume ? transport.resume(conversationId, controller.signal) : transport.send({
 					message,
 					history,
 					signal: controller.signal,
@@ -975,7 +1170,8 @@ function useChat({ transport, conversationId, initialMessages = [], onTitle, age
 					...conversationId !== void 0 && { conversationId },
 					...options.model !== void 0 && { model: options.model },
 					...options.effort !== void 0 && { effort: options.effort }
-				})) {
+				});
+				for await (const event of events) {
 					if (controller.signal.aborted) break;
 					if (event.type === "title") {
 						latest.current.onTitle?.(event.title);
@@ -1147,7 +1343,30 @@ function useChat({ transport, conversationId, initialMessages = [], onTitle, age
 		};
 		start(messages.slice(0, index), options);
 	}, [start]);
-	useEffect(() => () => run.current?.controller.abort(), []);
+	const joined = useRef(false);
+	useEffect(() => {
+		if (!resume || joined.current || run.current) return;
+		const { transport, conversationId, messages } = latest.current;
+		if (!transport.resume || conversationId === void 0) return;
+		joined.current = true;
+		const last = messages.at(-1);
+		const history = last?.role === "assistant" && last.status === "streaming" ? messages.slice(0, -1) : messages;
+		loop.current = {
+			options: {},
+			step: 0
+		};
+		start(history, {}, void 0, true);
+	}, [resume, start]);
+	const mounted = useRef(false);
+	useEffect(() => {
+		mounted.current = true;
+		return () => {
+			mounted.current = false;
+			queueMicrotask(() => {
+				if (!mounted.current) run.current?.controller.abort();
+			});
+		};
+	}, []);
 	return {
 		messages,
 		busy,
@@ -1160,7 +1379,7 @@ function useChat({ transport, conversationId, initialMessages = [], onTitle, age
 }
 // 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 }) {
+function sseTransport({ url, headers, stopUrl, resumeUrl, fetch: fetchImpl = fetch }) {
 	const headersFor = async () => ({
 		"content-type": "application/json",
 		...Object.fromEntries(new Headers(typeof headers === "function" ? await headers() : headers))
@@ -1176,6 +1395,20 @@ function sseTransport({ url, headers, stopUrl, fetch: fetchImpl = fetch }) {
 			if (!response.ok || !response.body) throw new Error(`${url} answered ${response.status} ${response.statusText}`.trim());
 			yield* readEventStream(response.body);
 		},
+		...resumeUrl && { async *resume(conversationId, signal) {
+			const target = typeof resumeUrl === "function" ? resumeUrl(conversationId) : `${resumeUrl}${resumeUrl.includes("?") ? "&" : "?"}conversationId=${encodeURIComponent(conversationId)}`;
+			const { "content-type": _, ...headers } = await headersFor();
+			const response = await fetchImpl(target, {
+				method: "GET",
+				headers: {
+					...headers,
+					accept: "text/event-stream"
+				},
+				signal
+			});
+			if (!response.ok || !response.body) throw new Error(`${target} answered ${response.status} ${response.statusText}`.trim());
+			yield* readEventStream(response.body);
+		} },
 		...stopUrl && { async stop(runId) {
 			await fetchImpl(stopUrl, {
 				method: "POST",
@@ -1280,6 +1513,30 @@ const SidebarContext = createContext({
 	dismiss: () => {}
 });
 const useSidebar = () => useContext(SidebarContext);
+/** State that the parent may own: `value` makes it controlled, otherwise `initial` seeds it. */
+function useControllable(value, initial, onChange) {
+	const [inner, setInner] = useState(initial);
+	const current = value ?? inner;
+	const latest = useRef({
+		current,
+		value,
+		onChange
+	});
+	latest.current = {
+		current,
+		value,
+		onChange
+	};
+	return [current, useCallback((next) => {
+		const { current, value, onChange } = latest.current;
+		const resolved = typeof next === "function" ? next(current) : next;
+		if (resolved === current) return;
+		if (value === void 0) setInner(resolved);
+		onChange?.(resolved);
+	}, [])];
+}
+/** True on Apple platforms, where the shortcut modifier is ⌘ instead of Ctrl. */
+const isMacPlatform = () => typeof navigator !== "undefined" && /mac|iphone|ipad|ipod/i.test(navigator.platform || navigator.userAgent);
 // src/components/replacements.tsx
 /**
 * In-place updates of drawn visuals: a tool call whose input has `replaces: <id>` takes the place of that
@@ -2193,7 +2450,7 @@ function Code({ node, className, children }) {
 	});
 }
 const components = {
-	pre: ({ children }) => /* @__PURE__ */ jsx(Fragment, { children }),
+	pre: ({ children }) => /* @__PURE__ */ jsx(Fragment$1, { children }),
 	code: ({ node, className, children }) => /* @__PURE__ */ jsx(Code, {
 		node,
 		className,
@@ -2201,12 +2458,39 @@ const components = {
 	})
 };
 const LinksContext = createContext(void 0);
-function MarkdownLinksProvider({ renderLink, children }) {
+function MarkdownLinksProvider({ renderLink, renderLinkList, children }) {
+	const value = useMemo(() => ({
+		renderLink,
+		renderLinkList
+	}), [renderLink, renderLinkList]);
 	return /* @__PURE__ */ jsx(LinksContext.Provider, {
-		value: renderLink,
+		value,
 		children
 	});
 }
+/** The rendered link an item consists of: an `a` alone, or alone in its paragraph (a loose list). */
+function soleLink(children) {
+	const nodes = Children.toArray(children).filter((c) => !(typeof c === "string" && !c.trim()));
+	if (nodes.length !== 1 || !isValidElement(nodes[0])) return void 0;
+	const props = nodes[0].props;
+	if (typeof props.href === "string") return {
+		href: props.href,
+		children: props.children
+	};
+	return props.node?.tagName === "p" ? soleLink(props.children) : void 0;
+}
+function listOf(ordered, props, renderLinkList) {
+	const Default = ordered ? defaultComponents.ol : defaultComponents.ul;
+	const { children } = props;
+	const links = Children.toArray(children).filter((c) => isValidElement(c)).map((item) => soleLink(item.props.children));
+	const list = /* @__PURE__ */ jsx(Default, { ...props });
+	if (links.length === 0 || links.some((l) => !l)) return list;
+	return renderLinkList({
+		ordered,
+		links,
+		children: list
+	}) ?? list;
+}
 /** Message markdown: GFM, KaTeX math ($…$ and $$…$$), Shiki code blocks, smooth fade-in while streaming. */
 function Markdown({ children, streaming = false, className, partId }) {
 	const text = useSmoothText(children, streaming);
@@ -2237,22 +2521,26 @@ function BlockScope({ id, streaming, children }) {
 	});
 }
 const MarkdownBody = memo(function MarkdownBody({ text, animating, fade }) {
-	const renderLink = useContext(LinksContext);
-	const withLinks = useMemo(() => renderLink ? {
+	const { renderLink, renderLinkList } = useContext(LinksContext) ?? {};
+	const withLinks = useMemo(() => ({
 		...components,
-		a: ({ href, children }) => {
+		...renderLink && { a: ({ href, children }) => {
 			const custom = href ? renderLink({
 				href,
 				children
 			}) : void 0;
-			return custom !== void 0 ? /* @__PURE__ */ jsx(Fragment, { children: custom }) : /* @__PURE__ */ jsx("a", {
+			return custom !== void 0 ? /* @__PURE__ */ jsx(Fragment$1, { children: custom }) : /* @__PURE__ */ jsx("a", {
 				href,
 				target: "_blank",
 				rel: "noopener noreferrer",
 				children
 			});
+		} },
+		...renderLinkList && {
+			ul: (props) => listOf(false, props, renderLinkList),
+			ol: (props) => listOf(true, props, renderLinkList)
 		}
-	} : components, [renderLink]);
+	}), [renderLink, renderLinkList]);
 	return /* @__PURE__ */ jsx(Streamdown, {
 		prefix: PREFIX,
 		mode: animating || fade ? "streaming" : "static",
@@ -2312,7 +2600,7 @@ function activityLabel(part, labels, view) {
 */
 function activityHeading(parts, views, labels) {
 	const waiting = parts.find((p) => p.type === "tool_call" && p.status === "awaiting");
-	if (waiting) return /* @__PURE__ */ jsxs(Fragment, { children: [activityLabel(waiting, labels, views[waiting.name]), labels.waitingForYou] });
+	if (waiting) return /* @__PURE__ */ jsxs(Fragment$1, { children: [activityLabel(waiting, labels, views[waiting.name]), labels.waitingForYou] });
 	if (parts.some(isWorking)) {
 		const last = parts.at(-1);
 		return activityLabel(last, labels, last.type === "tool_call" ? views[last.name] : void 0);
@@ -2331,6 +2619,7 @@ function stringOf(value) {
 }
 /** A shell command. Input `{ command, description? }`; result a string or `{ stdout, stderr, exitCode }`. */
 const commandTool = {
+	ask: (_, labels) => labels.runCommandAsk,
 	label: (_, labels) => labels.ranCommandLabel,
 	hint: (part) => stringOf(recordOf(part.input).description),
 	summary: (n, labels) => labels.ranCommands(n),
@@ -2363,6 +2652,7 @@ const commandTool = {
 * part's display `data`, else its `result`.
 */
 const webSearchTool = {
+	ask: (_, labels) => labels.searchWebAsk,
 	label: (_, labels) => labels.searchedWebLabel,
 	subtitle: (part) => stringOf(recordOf(part.input).query) ?? part.subtitle,
 	summary: (n, labels) => labels.searchedWeb(n),
@@ -2410,6 +2700,7 @@ const webSearchTool = {
 };
 /** Reads a web page. Input `{ url }`; the row shows the page's host, the detail links to it. */
 const webFetchTool = {
+	ask: (_, labels) => labels.readPageAsk,
 	label: (_, labels) => labels.readPageLabel,
 	subtitle: (part) => {
 		const url = stringOf(recordOf(part.input).url);
@@ -2550,7 +2841,7 @@ function ActivityGroup({ parts, defaultExpanded = false, className }) {
 		}) : /* @__PURE__ */ jsx(Disclosure, {
 			isExpanded: expanded,
 			onExpandedChange: setExpanded,
-			summary: /* @__PURE__ */ jsxs(Fragment, { children: [
+			summary: /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				/* @__PURE__ */ jsx(Lead, { live }),
 				/* @__PURE__ */ jsx(Live, {
 					live,
@@ -2584,7 +2875,7 @@ const SHIMMER_MS = 2e3;
 * 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 });
+	return live ? /* @__PURE__ */ jsx(Shimmer, { children }) : /* @__PURE__ */ jsx(Fragment$1, { children });
 }
 function Shimmer({ children }) {
 	const [delay] = useState(() => `-${Math.round(performance.now() % SHIMMER_MS)}ms`);
@@ -2602,7 +2893,7 @@ function SingleStep({ part, live, after, expanded, onExpandedChange }) {
 	return /* @__PURE__ */ jsx(Disclosure, {
 		isExpanded: expanded,
 		onExpandedChange,
-		summary: /* @__PURE__ */ jsxs(Fragment, { children: [
+		summary: /* @__PURE__ */ jsxs(Fragment$1, { children: [
 			/* @__PURE__ */ jsx(Lead, { live }),
 			/* @__PURE__ */ jsx(Live, {
 				live,
@@ -2773,11 +3064,19 @@ function useAttachments({ upload } = {}) {
 		toParts
 	};
 }
+const IMAGE_EXTENSION = /\.(png|jpe?g|gif|webp|avif|svg|bmp|ico)$/i;
+/** Whether the card draws a thumbnail: by mime when given, else by `kind`, else by the file extension of the url or name. */
+function isImage({ mime, kind, url, name }) {
+	if (mime) return mime.startsWith("image/");
+	if (kind) return kind === "image";
+	const path = url && !url.startsWith("data:") ? url.split(/[?#]/)[0] : "";
+	return url?.startsWith("data:image/") === true || IMAGE_EXTENSION.test(path) || IMAGE_EXTENSION.test(name);
+}
 const extension = (name) => /\.([a-z0-9]{1,5})$/i.exec(name)?.[1]?.toUpperCase();
 /** A square card: pasted text preview with a PASTED badge, an image thumbnail, or a file with its type. */
 function AttachmentCard({ attachment: a, onRemove, onOpen, size = "md", className }) {
 	const icons = useIcons();
-	const image = a.mime.startsWith("image/") && a.url;
+	const image = a.url && isImage(a);
 	const pasted = a.text !== void 0;
 	const labels = useLabels();
 	const uploading = a.status === "uploading";
@@ -2842,7 +3141,7 @@ function AttachmentRow({ attachments, onRemove, onEditText }) {
 	const [editing, setEditing] = useState();
 	const labels = useLabels();
 	if (attachments.length === 0) return null;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("ul", {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("ul", {
 		"aria-label": labels.attachments,
 		className: "flex gap-2.5 overflow-x-auto px-0.5 pt-2.5 pb-1 [scrollbar-width:thin]",
 		children: attachments.map((a) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(AttachmentCard, {
@@ -3012,7 +3311,7 @@ function AssistantMessage({ message, onRetry, onFeedback, onReadAloud, renderPar
 				if (block.kind === "activity") {
 					const cards = block.parts.filter((p) => p.type === "tool_call" && views[p.name]?.Card);
 					if (!cards.length) return /* @__PURE__ */ jsx(ActivityGroup, { parts: block.parts }, block.id);
-					return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ActivityGroup, { parts: block.parts }), cards.map((p) => {
+					return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ActivityGroup, { parts: block.parts }), cards.map((p) => {
 						if (p.type !== "tool_call") return null;
 						const Card = views[p.name].Card;
 						return /* @__PURE__ */ jsx(Card, { part: p }, p.id);
@@ -3054,7 +3353,7 @@ function AssistantMessage({ message, onRetry, onFeedback, onReadAloud, renderPar
 						onPress: onReadAloud,
 						children: icons.speak
 					}),
-					onFeedback && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(IconButton, {
+					onFeedback && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(IconButton, {
 						label: labels.goodResponse,
 						size: "sm",
 						onPress: () => onFeedback("good"),
@@ -3108,7 +3407,7 @@ function ApprovalCard({ approval, onRespond, className }) {
 					children: icons.approval
 				}), /* @__PURE__ */ jsx("span", {
 					className: "min-w-0 flex-1 font-medium",
-					children: view.ask?.(part) ?? labels.allowAction(activityLabel(part, labels, view))
+					children: view.ask?.(part, labels) ?? labels.allowAction(view.askLabel?.(part, labels) ?? activityLabel(part, labels, view))
 				})]
 			}),
 			/* @__PURE__ */ jsx("div", {
@@ -3139,6 +3438,16 @@ function ApprovalCard({ approval, onRespond, className }) {
 // src/components/context-panel.tsx
 const FREE_COLOR = "var(--chat-raised)";
 const DEFAULT_COLOR = "var(--chat-subtle)";
+/** Tokens used (reserved and deferred categories excluded) and tokens still free. */
+function contextTotals(usage) {
+	const counted = 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);
+	return {
+		used,
+		free: Math.max(usage.limit - used - reserved, 0)
+	};
+}
 /**
 * 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.
@@ -3147,9 +3456,7 @@ function ContextPanel({ usage, title, defaultExpanded = true, className }) {
 	const labels = useLabels();
 	const counted = usage.categories.filter((c) => !c.deferred);
 	const deferred = usage.categories.filter((c) => c.deferred);
-	const used = counted.reduce((sum, c) => sum + (c.reserved ? 0 : c.tokens), 0);
-	const reserved = counted.reduce((sum, c) => sum + (c.reserved ? c.tokens : 0), 0);
-	const free = Math.max(usage.limit - used - reserved, 0);
+	const { used, free } = contextTotals(usage);
 	const share = (tokens) => formatShare(tokens / usage.limit);
 	return /* @__PURE__ */ jsxs(Disclosure, {
 		summary: title ?? labels.context,
@@ -3274,6 +3581,121 @@ function GroupList({ group }) {
 function formatShare(fraction) {
 	return `${(fraction * 100).toFixed(1)}%`;
 }
+// src/components/context-meter.tsx
+const SIZE = 16;
+const STROKE = 2;
+const RADIUS = 7;
+const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+/**
+* A small progress ring for the composer toolbar, filled to the share of the context window in use (accent,
+* then warning, then danger). Hover for the numbers; click or Enter opens the ContextPanel above it.
+*/
+function ContextMeter({ usage, tooltip, tooltipNote, isLoading = false, warnAt = .75, dangerAt = .9, placement = "top end", className }) {
+	const labels = useLabels();
+	const { used } = contextTotals(usage);
+	const fraction = usage.limit > 0 ? Math.min(used / usage.limit, 1) : 0;
+	const summary = isLoading ? labels.contextLoading : labels.contextSummary(formatTokens(used), formatTokens(usage.limit), Math.round(fraction * 100));
+	const color = fraction >= dangerAt ? "text-chat-danger" : fraction >= warnAt ? "text-chat-warning" : "text-chat-accent";
+	const button = /* @__PURE__ */ jsx(Button, {
+		variant: "ghost",
+		size: "sm",
+		"aria-label": summary,
+		isDisabled: isLoading,
+		className: clsx("size-7 justify-center px-0 text-chat-muted", isLoading && "data-disabled:opacity-100", className),
+		children: /* @__PURE__ */ jsxs("svg", {
+			"aria-hidden": true,
+			viewBox: `0 0 ${SIZE} ${SIZE}`,
+			className: clsx("size-4", isLoading && "motion-safe:animate-spin"),
+			fill: "none",
+			strokeWidth: STROKE,
+			children: [/* @__PURE__ */ jsx("circle", {
+				cx: SIZE / 2,
+				cy: SIZE / 2,
+				r: RADIUS,
+				stroke: "var(--chat-raised)"
+			}), /* @__PURE__ */ jsx("circle", {
+				cx: SIZE / 2,
+				cy: SIZE / 2,
+				r: RADIUS,
+				stroke: "currentColor",
+				strokeLinecap: "round",
+				strokeDasharray: CIRCUMFERENCE,
+				strokeDashoffset: CIRCUMFERENCE * (1 - (isLoading ? .25 : fraction)),
+				transform: `rotate(-90 ${SIZE / 2} ${SIZE / 2})`,
+				className: clsx(color, "transition-[stroke-dashoffset]")
+			})]
+		})
+	});
+	return /* @__PURE__ */ jsxs(DialogTrigger$1, { children: [/* @__PURE__ */ jsx(Tooltip, {
+		content: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", { children: tooltip ?? summary }), tooltipNote && /* @__PURE__ */ jsx("div", {
+			className: "text-chat-muted",
+			children: tooltipNote
+		})] }),
+		children: button
+	}), /* @__PURE__ */ jsx(Popover, {
+		placement,
+		className: "w-80 overflow-auto p-3",
+		children: /* @__PURE__ */ jsx(Dialog, {
+			"aria-label": labels.context,
+			className: "outline-none",
+			children: /* @__PURE__ */ jsx(ContextPanel, { usage })
+		})
+	})] });
+}
+// src/components/copy-field.tsx
+/** How long "Copied" stays before the button reads "Copy" again. */
+const COPIED_MS = 2e3;
+/**
+* A read-only, selectable field with a Copy button, for share links. The button says "Copied" for about two
+* seconds (and announces it to screen readers). Where the clipboard is unavailable or refuses, it selects the
+* text instead so the reader can copy it by hand.
+*/
+function CopyField({ value, "aria-label": ariaLabel, onCopy, className }) {
+	const icons = useIcons();
+	const labels = useLabels();
+	const inputRef = useRef(null);
+	const timer = useRef(void 0);
+	const [copied, setCopied] = useState(false);
+	useEffect(() => () => clearTimeout(timer.current), []);
+	const copy = async () => {
+		try {
+			if (!navigator.clipboard) throw new Error("no clipboard");
+			await navigator.clipboard.writeText(value);
+		} catch {
+			inputRef.current?.focus();
+			inputRef.current?.select();
+			return;
+		}
+		setCopied(true);
+		onCopy?.();
+		clearTimeout(timer.current);
+		timer.current = setTimeout(() => setCopied(false), COPIED_MS);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("flex items-center gap-2 font-chat-sans", className),
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				ref: inputRef,
+				readOnly: true,
+				value,
+				"aria-label": ariaLabel ?? labels.copyFieldLabel,
+				onFocus: (e) => e.currentTarget.select(),
+				className: "h-9 min-w-0 flex-1 rounded-chat-md border border-chat-border bg-chat-bg px-3 text-(length:--chat-ui-font-size) text-chat-fg outline-none focus:border-chat-border-strong"
+			}),
+			/* @__PURE__ */ jsxs(Button, {
+				variant: "subtle",
+				size: "lg",
+				onPress: () => void copy(),
+				children: [/* @__PURE__ */ jsx(IconSlot, { children: copied ? icons.copied : icons.copy }), copied ? labels.copied : labels.copy]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				role: "status",
+				className: "sr-only",
+				children: copied ? labels.copied : ""
+			})
+		]
+	});
+}
 // src/components/dictation.tsx
 /**
 * Voice dictation in the composer, similar to claude.ai's: while listening the words fill the box as they are
@@ -3773,7 +4195,7 @@ function EffortSlider({ efforts, value, onChange, label, className }) {
 function EffortButton({ icon, children, className, ...slider }) {
 	const current = slider.efforts.find((e) => e.id === slider.value) ?? slider.efforts[0];
 	const labels = useLabels();
-	return /* @__PURE__ */ jsxs(DialogTrigger, { children: [/* @__PURE__ */ jsxs(Button, {
+	return /* @__PURE__ */ jsxs(DialogTrigger$1, { children: [/* @__PURE__ */ jsxs(Button, {
 		variant: "ghost",
 		size: "sm",
 		className: clsx("text-chat-muted data-hovered:text-chat-fg", className),
@@ -3801,6 +4223,7 @@ function ModelPicker({ models, model, onModelChange, effort, onEffortChange, eff
 	const more = models.filter((m) => m.secondary);
 	const item = (m) => /* @__PURE__ */ jsx(MenuItem, {
 		id: m.id,
+		...m.icon && { icon: m.icon },
 		description: m.disabledReason ?? m.description,
 		isDisabled: m.disabled ?? false,
 		children: m.label
@@ -3815,6 +4238,10 @@ function ModelPicker({ models, model, onModelChange, effort, onEffortChange, eff
 		"aria-label": labels.modelButton(current?.label ?? model),
 		className: clsx("text-chat-muted data-hovered:text-chat-fg", className),
 		children: [
+			current?.icon && /* @__PURE__ */ jsx(IconSlot, {
+				className: "text-chat-fg [&_svg]:size-3.5",
+				children: current.icon
+			}),
 			/* @__PURE__ */ jsx("span", {
 				className: "min-w-0 truncate text-chat-fg",
 				children: current?.label ?? model
@@ -3918,10 +4345,12 @@ function MessageList({ messages, onRetry, onEdit, onFeedback, onReadAloud, actio
 			behavior
 		});
 	}, []);
-	const onScroll = () => {
+	const nearBottom = () => {
 		const el = scroller.current;
-		if (!el) return;
-		const bottom = el.scrollHeight - el.scrollTop - el.clientHeight < STICK_SLOP;
+		return !el || el.scrollHeight - el.scrollTop - el.clientHeight < STICK_SLOP;
+	};
+	const onScroll = () => {
+		const bottom = nearBottom();
 		stuck.current = bottom;
 		setAtBottom(bottom);
 	};
@@ -3938,7 +4367,7 @@ function MessageList({ messages, onRetry, onEdit, onFeedback, onReadAloud, actio
 	const jumpedFor = useRef(start === "top" ? lastUser : null);
 	useLayoutEffect(() => {
 		if (lastUser === jumpedFor.current) {
-			onScroll();
+			setAtBottom(nearBottom());
 			return;
 		}
 		jumpedFor.current = lastUser;
@@ -4084,7 +4513,7 @@ function ChatTitleMenu({ pinned, onPin, onRename, projects, onAddToProject, onCr
 				children: labels.shareChat
 			}),
 			children,
-			onDelete && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MenuSeparator, {}), /* @__PURE__ */ jsx(MenuItem, {
+			onDelete && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(MenuSeparator, {}), /* @__PURE__ */ jsx(MenuItem, {
 				id: "delete",
 				icon: icons.delete,
 				shortcut: "D",
@@ -4176,6 +4605,34 @@ function ChatList({ sections, activeId, onSelect, rowMenu, className, ...props }
 		}, section.id))
 	});
 }
+/**
+* An icon button that opens a `ChatList` in a popover, for `Sidebar`'s `railActions`: the list itself is
+* hidden on the collapsed rail, so this keeps recent chats reachable. Picking a chat closes the popover.
+*/
+function ChatListRailButton({ label, popoverProps, onSelect, className, ...list }) {
+	const icons = useIcons();
+	const labels = useLabels();
+	const name = label ?? labels.chats;
+	return /* @__PURE__ */ jsxs(DialogTrigger, { children: [/* @__PURE__ */ jsx(IconButton, {
+		label: name,
+		children: icons.chatList
+	}), /* @__PURE__ */ jsx(Popover, {
+		placement: "right top",
+		...popoverProps,
+		children: /* @__PURE__ */ jsx(Dialog, {
+			"aria-label": name,
+			className: "max-h-[70dvh] w-64 overflow-y-auto p-2 outline-none [scrollbar-width:thin]",
+			children: ({ close }) => /* @__PURE__ */ jsx(ChatList, {
+				...list,
+				className,
+				onSelect: (id) => {
+					onSelect?.(id);
+					close();
+				}
+			})
+		})
+	})] });
+}
 function ChatRow({ chat, active, nested, onSelect, menu }) {
 	const icons = useIcons();
 	const [menuOpen, setMenuOpen] = useState(false);
@@ -4186,15 +4643,22 @@ function ChatRow({ chat, active, nested, onSelect, menu }) {
 		role: "img",
 		"aria-label": labels.running,
 		className: clsx(markerClass, "animate-pulse bg-chat-accent motion-reduce:animate-none")
-	}) : chat.unread ? /* @__PURE__ */ jsx("span", {
+	}) : chat.unread && !chat.muted ? /* @__PURE__ */ jsx("span", {
 		role: "img",
 		"aria-label": labels.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 content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx("span", {
+			className: clsx("min-w-0 flex-1 truncate", chat.unread && !active && !chat.muted && "font-medium", chat.muted && "text-chat-muted"),
+			children: chat.title
+		}),
+		chat.detail != null && /* @__PURE__ */ jsx("span", {
+			className: "shrink-0 text-(length:--chat-ui-font-size-sm) leading-4 text-chat-subtle tabular-nums",
+			children: chat.detail
+		}),
+		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,
@@ -4231,7 +4695,7 @@ 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, {
+		children: ({ isExpanded }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Heading, {
 			className: "m-0 font-normal",
 			children: /* @__PURE__ */ jsxs(Button$1, {
 				slot: "trigger",
@@ -4290,6 +4754,7 @@ function ChatView({ messages, busy = false, onSend, onStop, approvals, onApprove
 	const labels = useLabels();
 	const pending = onApprove && approvals?.[0];
 	const box = (variant) => {
+		if (composer === false) return null;
 		const element = /* @__PURE__ */ jsx(Composer, {
 			variant: density === "inline" || short && !empty ? "compact" : variant,
 			busy,
@@ -4423,41 +4888,84 @@ function ChatTranscript({ messages, renderPart, widgets, header, notice, footer,
 	});
 }
 // src/views/app-shell.tsx
+const DEFAULT_WIDTH = 288;
+const KEY_STEP = 16;
+const clampWidth = (px, min, max) => Math.min(max, Math.max(min, Math.round(px)));
+function readStoredWidth(key) {
+	if (!key) return void 0;
+	try {
+		const n = Number(window.localStorage.getItem(key));
+		return n > 0 ? n : void 0;
+	} catch {
+		return;
+	}
+}
 /**
 * 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 }) {
+function AppShell({ sidebar, children, defaultCollapsed, collapsed: collapsedProp, onCollapsedChange, scroll = "inner", resizable, width: widthProp, defaultWidth, onWidthChange, persistKey, shortcut = true, className }) {
 	const drawer = useMediaQuery(DRAWER_QUERY);
-	const [collapsed, setCollapsed] = useState(() => defaultCollapsed ?? (typeof window !== "undefined" && window.matchMedia("(max-width: 1023.98px)").matches));
+	const labels = useLabels();
+	const [collapsed, setCollapsed] = useControllable(collapsedProp, () => defaultCollapsed ?? (typeof window !== "undefined" && window.matchMedia("(max-width: 1023.98px)").matches), onCollapsedChange);
 	const [drawerOpen, setDrawerOpen] = useState(false);
-	const toggle = useCallback(() => drawer ? setDrawerOpen((o) => !o) : setCollapsed((c) => !c), [drawer]);
+	const toggle = useCallback(() => drawer ? setDrawerOpen((o) => !o) : setCollapsed((c) => !c), [drawer, setCollapsed]);
 	const dismiss = useCallback(() => setDrawerOpen(false), []);
+	const min = resizable?.min ?? 0;
+	const max = resizable?.max ?? Infinity;
+	const [rawWidth, setWidth] = useControllable(widthProp, () => readStoredWidth(persistKey) ?? defaultWidth ?? DEFAULT_WIDTH, (px) => {
+		if (persistKey) try {
+			window.localStorage.setItem(persistKey, String(px));
+		} catch {}
+		onWidthChange?.(px);
+	});
+	const width = resizable ? clampWidth(rawWidth, min, max) : void 0;
+	const shortcutKeys = shortcut ? `${isMacPlatform() ? "⌘" : labels.ctrlKey} B` : void 0;
+	useEffect(() => {
+		if (!shortcut) return;
+		const mac = isMacPlatform();
+		const onKey = (e) => {
+			if (e.defaultPrevented || e.altKey || e.shiftKey || e.key.toLowerCase() !== "b") return;
+			if (mac ? !e.metaKey || e.ctrlKey : !e.ctrlKey || e.metaKey) return;
+			e.preventDefault();
+			toggle();
+		};
+		window.addEventListener("keydown", onKey);
+		return () => window.removeEventListener("keydown", onKey);
+	}, [shortcut, toggle]);
 	const pinned = useMemo(() => ({
 		collapsed,
 		drawer,
 		drawerOpen,
 		toggle,
-		dismiss
+		dismiss,
+		...shortcutKeys && { shortcut: shortcutKeys }
 	}), [
 		collapsed,
 		drawer,
 		drawerOpen,
 		toggle,
-		dismiss
+		dismiss,
+		shortcutKeys
 	]);
-	const labels = useLabels();
 	const inDrawer = useMemo(() => ({
 		...pinned,
 		collapsed: false
 	}), [pinned]);
+	const windowScroll = scroll === "window";
 	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
+			className: clsx("flex bg-chat-bg text-chat-fg", windowScroll ? "min-h-dvh" : "h-dvh overflow-hidden", className),
+			children: [!drawer && /* @__PURE__ */ jsxs("aside", {
+				style: width ? { "--chat-sidebar-width": `${width}px` } : void 0,
+				className: clsx("relative shrink-0 border-r border-chat-divider bg-chat-sidebar transition-[width] duration-200 ease-out motion-reduce:transition-none data-resizing:transition-none", windowScroll ? "sticky top-0 h-dvh self-start overflow-clip" : "overflow-hidden", collapsed ? "w-13" : "w-(--chat-sidebar-width,18rem)"),
+				children: [sidebar, resizable && !collapsed && width && /* @__PURE__ */ jsx(ResizeHandle, {
+					width,
+					min,
+					max,
+					onCommit: setWidth
+				})]
 			}), /* @__PURE__ */ jsx("main", {
 				className: "flex min-w-0 flex-1 flex-col",
 				children
@@ -4473,15 +4981,58 @@ function AppShell({ sidebar, children, defaultCollapsed, className }) {
 		})]
 	});
 }
-/** Opens the drawer on phones, collapses / expands the pinned sidebar elsewhere. */
+/** The draggable right edge of the sidebar. A drag moves the aside's width variable alone and commits on release. */
+function ResizeHandle({ width, min, max, onCommit }) {
+	const labels = useLabels();
+	const live = useRef(null);
+	const aside = (el) => el.closest("aside");
+	const move = (el, px) => {
+		live.current = clampWidth(px, min, max);
+		aside(el).style.setProperty("--chat-sidebar-width", `${live.current}px`);
+	};
+	const end = (el) => {
+		delete aside(el).dataset.resizing;
+		if (live.current != null) onCommit(live.current);
+		live.current = null;
+	};
+	return /* @__PURE__ */ jsx("div", {
+		role: "separator",
+		"aria-orientation": "vertical",
+		"aria-label": labels.resizeSidebar,
+		"aria-valuenow": width,
+		"aria-valuemin": min,
+		"aria-valuemax": max,
+		tabIndex: 0,
+		className: "group/handle absolute inset-y-0 right-0 z-10 w-1.5 cursor-col-resize touch-none outline-none",
+		onPointerDown: (e) => {
+			e.currentTarget.setPointerCapture(e.pointerId);
+			aside(e.currentTarget).dataset.resizing = "";
+			live.current = null;
+		},
+		onPointerMove: (e) => {
+			if (e.currentTarget.hasPointerCapture(e.pointerId)) move(e.currentTarget, e.clientX - aside(e.currentTarget).getBoundingClientRect().left);
+		},
+		onPointerUp: (e) => end(e.currentTarget),
+		onPointerCancel: (e) => end(e.currentTarget),
+		onKeyDown: (e) => {
+			const step = e.shiftKey ? 64 : KEY_STEP;
+			const next = e.key === "ArrowLeft" ? width - step : e.key === "ArrowRight" ? width + step : e.key === "Home" ? min : e.key === "End" ? max : null;
+			if (next == null) return;
+			e.preventDefault();
+			onCommit(clampWidth(next, min, max));
+		},
+		children: /* @__PURE__ */ jsx("span", { className: "absolute inset-y-0 right-0 w-px bg-transparent transition-colors group-hover/handle:bg-chat-border-strong group-focus-visible/handle:w-0.5 group-focus-visible/handle:bg-chat-focus in-data-resizing:bg-chat-focus" })
+	});
+}
+/** Opens the drawer on phones, collapses / expands the pinned sidebar elsewhere. Its label names the shortcut, e.g. "(⌘ B)". */
 function SidebarToggle({ drawerOnly = false, className }) {
 	const icons = useIcons();
-	const { drawer, drawerOpen, collapsed, toggle } = useSidebar();
+	const { drawer, drawerOpen, collapsed, toggle, shortcut } = useSidebar();
 	const labels = useLabels();
 	if (drawerOnly && !drawer) return null;
 	const label = drawer ? drawerOpen ? labels.closeSidebar : labels.openSidebar : collapsed ? labels.expandSidebar : labels.collapseSidebar;
 	return /* @__PURE__ */ jsx(IconButton, {
-		label,
+		label: shortcut ? labels.withShortcut(label, shortcut) : label,
 		onPress: toggle,
 		className,
 		children: icons.sidebar
@@ -4489,7 +5040,7 @@ function SidebarToggle({ drawerOnly = false, className }) {
 }
 // src/views/sidebar.tsx
 /** The claude.ai sidebar frame. Collapses to an icon rail inside `AppShell`; a drawer on phones. */
-function Sidebar({ brand, brandIcon, headerActions, nav, children, footer, className }) {
+function Sidebar({ brand, brandIcon, headerActions, railActions, 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),
@@ -4515,8 +5066,12 @@ function Sidebar({ brand, brandIcon, headerActions, nav, children, footer, class
 					/* @__PURE__ */ jsx(SidebarToggle, {})
 				]
 			}),
-			nav && /* @__PURE__ */ jsx("ul", {
-				className: clsx("flex shrink-0 flex-col gap-px px-2 pb-2", collapsed && "items-center"),
+			collapsed && railActions && /* @__PURE__ */ jsx("div", {
+				className: "flex shrink-0 flex-col items-center gap-1 pb-2",
+				children: railActions
+			}),
+			nav && /* @__PURE__ */ jsx(SidebarList, {
+				className: clsx("shrink-0 px-2 pb-2", collapsed && "items-center"),
 				children: nav
 			}),
 			!collapsed && /* @__PURE__ */ jsx("div", {
@@ -4531,32 +5086,65 @@ function Sidebar({ brand, brandIcon, headerActions, nav, children, footer, class
 		]
 	});
 }
-/** 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 }) {
+/** The `<ul>` for `SidebarItem`s outside `Sidebar`'s `nav` slot (e.g. inside a section): no bullets, no padding. */
+function SidebarList({ children, className }) {
+	return /* @__PURE__ */ jsx("ul", {
+		className: clsx("m-0 flex list-none flex-col gap-px p-0", className),
+		children
+	});
+}
+const iconSize = "[&_svg]:size-(--chat-sidebar-icon-size,1rem) [&_svg]:shrink-0";
+/**
+* A nav row: icon and label; just the icon with a tooltip when collapsed. Closes the drawer when picked.
+* Icons are 1rem, or `--chat-sidebar-icon-size`.
+*/
+function SidebarItem({ icon, label, onPress, href, active, shortcut, badge, description, trailing, title, className: extra, ...rest }) {
 	const { collapsed, dismiss } = useSidebar();
-	const className = clsx("group flex h-8 cursor-pointer items-center gap-2.5 rounded-chat-sm text-left text-(length:--chat-ui-font-size) leading-5 text-chat-fg outline-none [@media(pointer:coarse)]:h-10", "data-hovered:bg-chat-hover data-pressed:bg-chat-selected data-focus-visible:ring-2 data-focus-visible:ring-chat-focus", "[&_svg]:size-4 [&_svg]:shrink-0", collapsed ? "w-9 justify-center [@media(pointer:coarse)]:w-10" : "w-full px-2", active && "bg-chat-selected");
+	const data = Object.fromEntries(Object.entries(rest).filter(([k]) => k.startsWith("data-")));
+	const hasTrailing = !collapsed && trailing != null;
+	const className = clsx("group flex min-h-8 cursor-pointer items-center gap-2.5 rounded-chat-sm text-left text-(length:--chat-ui-font-size) leading-5 text-chat-fg outline-none [@media(pointer:coarse)]:min-h-10", "data-hovered:bg-chat-hover data-pressed:bg-chat-selected data-focus-visible:ring-2 data-focus-visible:ring-chat-focus", iconSize, collapsed ? "relative w-9 justify-center [@media(pointer:coarse)]:w-10" : "w-full px-2", description && !collapsed && "py-1", hasTrailing && "group-hover/item:pr-9 group-focus-within/item:pr-9 [@media(hover:none)]:pr-10", active && "bg-chat-selected");
 	const press = () => {
 		onPress?.();
 		dismiss();
 	};
-	const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+	const showIfCut = (e) => {
+		const el = e.currentTarget;
+		el.title = el.scrollWidth > el.clientWidth ? label : "";
+	};
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		icon,
-		collapsed ? /* @__PURE__ */ jsx("span", {
+		collapsed ? /* @__PURE__ */ jsxs("span", {
 			className: "sr-only",
-			children: label
-		}) : /* @__PURE__ */ jsx("span", {
-			className: "min-w-0 flex-1 truncate",
-			children: label
+			children: [label, (typeof badge === "string" || typeof badge === "number") && ` (${badge})`]
+		}) : /* @__PURE__ */ jsxs("span", {
+			className: "flex min-w-0 flex-1 flex-col",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "truncate",
+				onPointerEnter: title ? void 0 : showIfCut,
+				children: label
+			}), description && /* @__PURE__ */ jsx("span", {
+				className: "truncate text-(length:--chat-ui-font-size-sm) leading-4 text-chat-muted",
+				children: description
+			})]
 		}),
 		!collapsed && shortcut && /* @__PURE__ */ jsx("kbd", {
 			className: "font-chat-sans text-(length:--chat-ui-font-size-sm) leading-4 text-chat-subtle opacity-0 group-data-hovered:opacity-100",
 			children: shortcut
+		}),
+		!collapsed && badge != null && /* @__PURE__ */ jsx("span", {
+			className: "shrink-0 text-(length:--chat-ui-font-size-sm) leading-4 text-chat-muted tabular-nums",
+			children: badge
+		}),
+		collapsed && badge != null && /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: "absolute top-1 right-1 size-2 rounded-full bg-chat-accent"
 		})
 	] });
 	const common = {
 		className,
 		onPress: press,
-		"aria-current": active ? "page" : void 0
+		"aria-current": active ? "page" : void 0,
+		...title && { title }
 	};
 	const control = href ? /* @__PURE__ */ jsx(Link, {
 		...common,
@@ -4566,15 +5154,22 @@ function SidebarItem({ icon, label, onPress, href, active, shortcut }) {
 		...common,
 		children: content
 	});
-	return /* @__PURE__ */ jsx("li", { children: collapsed ? /* @__PURE__ */ jsx(Tooltip, {
-		content: label,
-		placement: "right",
-		children: control
-	}) : control });
+	return /* @__PURE__ */ jsxs("li", {
+		...data,
+		className: clsx("group/item relative list-none", extra),
+		children: [collapsed ? /* @__PURE__ */ jsx(Tooltip, {
+			content: label,
+			placement: "right",
+			children: control
+		}) : control, hasTrailing && /* @__PURE__ */ jsx("div", {
+			className: "absolute top-1/2 right-1 flex -translate-y-1/2 items-center opacity-0 group-hover/item:opacity-100 group-focus-within/item:opacity-100 [@media(hover:none)]:opacity-100",
+			children: trailing
+		})]
+	});
 }
 const initials = (name) => name.split(/\s+/).slice(0, 2).map((w) => w[0]?.toUpperCase() ?? "").join("");
 /** The account row at the bottom: avatar, name, plan, and a menu. */
-function SidebarUser({ name, detail, avatarUrl, menu }) {
+function SidebarUser({ name, detail, avatarUrl, menu, popoverProps }) {
 	const icons = useIcons();
 	const { collapsed } = useSidebar();
 	const avatar = avatarUrl ? /* @__PURE__ */ jsx("img", {
@@ -4589,7 +5184,7 @@ function SidebarUser({ name, detail, avatarUrl, menu }) {
 	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", {
+		children: [avatar, !collapsed && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("span", {
 			className: "flex min-w-0 flex-1 flex-col",
 			children: [/* @__PURE__ */ jsx("span", {
 				className: "truncate text-(length:--chat-ui-font-size) leading-5 text-chat-fg",
@@ -4606,7 +5201,8 @@ function SidebarUser({ name, detail, avatarUrl, menu }) {
 	if (!menu) return button;
 	return /* @__PURE__ */ jsxs(MenuTrigger, { children: [button, /* @__PURE__ */ jsx(Popover, {
 		placement: "top start",
+		...popoverProps,
 		children: menu
 	})] });
 }
-export { ActivityGroup, AgentProvider, AgentRegistry, AppShell, ApprovalCard, AssistantMessage, AttachButton, AttachmentCard, AttachmentRow, Badge, Button, Caret, ChatHeader, ChatList, ChatNotice, ChatTheme, ChatTitleMenu, ChatTranscript, ChatView, CodeBlock, Composer, ContextMenu, ContextPanel, CopyButton, DRAWER_QUERY, DictationButton, DictationControls, Disclosure, Drawer, EffortButton, EffortSlider, EmptyState, IconButton, Markdown, MarkdownLinksProvider, Menu, MenuItem, MenuNote, MenuSearch, MenuSection, MenuSeparator, MenuTrigger, MessageList, Modal, ModelPicker, Panel, PastedTextDialog, Popover, SegmentedControl, Sidebar, SidebarItem, SidebarToggle, SidebarUser, SubmenuTrigger, TokenCounter, ToolViewsProvider, Tooltip, UiComponentsProvider, UiMarkupBlock, UiTree, UserMessage, VoiceMeter, WIDGET_MAX_HEIGHT, WidgetFrame, WidgetHostProvider, WidgetPartView, activityHeading, activityLabel, commandTool, defaultIcons, defaultLabels, defaultToolViews, encodeWav, formatDuration, formatRelativeTime, formatTokens, htmlComponent, intersectAllow, memoryTool, messageText, openInNewTab, readTreeInput, readVisualizeInput, sseTransport, uiMarkupToolView, uiTreeToolView, useAgentContext, useAgentRegistry, useAgentSnapshot, useAgentTool, useAttachments, useChat, useChatTool, useCountUp, useDictation, useIcons, useLabels, useMediaQuery, useSidebar, useSmoothText, useToolView, useToolViews, useUiAction, useUiMarkupLanguage, useUiState, useWidgetHost, userMessage, webFetchTool, webSearchTool, widgetCsp, widgetToolView };
+export { ActivityGroup, AgentProvider, AgentRegistry, AppShell, ApprovalCard, AssistantMessage, AttachButton, AttachmentCard, AttachmentRow, Badge, Button, Caret, ChatHeader, ChatList, ChatListRailButton, ChatNotice, ChatTheme, ChatTitleMenu, ChatTranscript, ChatView, CodeBlock, Composer, ContextMenu, ContextMeter, ContextPanel, CopyButton, CopyField, DRAWER_QUERY, DialogTrigger, DictationButton, DictationControls, Disclosure, Drawer, EffortButton, EffortSlider, EmptyState, IconButton, Markdown, MarkdownLinksProvider, Menu, MenuItem, MenuNote, MenuSearch, MenuSection, MenuSeparator, MenuTrigger, MessageList, Modal, ModelPicker, Panel, PastedTextDialog, Popover, PopoverTrigger, SegmentedControl, Sidebar, SidebarItem, SidebarList, SidebarToggle, SidebarUser, SubmenuTrigger, TokenCounter, ToolViewsProvider, Tooltip, UiComponentsProvider, UiMarkupBlock, UiTree, UserMessage, VoiceMeter, WIDGET_MAX_HEIGHT, WidgetFrame, WidgetHostProvider, WidgetPartView, activityHeading, activityLabel, commandTool, defaultIcons, defaultLabels, defaultToolViews, encodeWav, formatDuration, formatRelativeTime, formatTokens, htmlComponent, intersectAllow, memoryTool, messageText, openInNewTab, readTreeInput, readVisualizeInput, sseTransport, uiMarkupToolView, uiTreeToolView, useAgentContext, useAgentRegistry, useAgentSnapshot, useAgentTool, useAttachments, useChat, useChatTool, useCountUp, useDictation, useIcons, useLabels, useMediaQuery, useSidebar, useSmoothText, useToolView, useToolViews, useUiAction, useUiMarkupLanguage, useUiState, useWidgetHost, userMessage, webFetchTool, webSearchTool, widgetCsp, widgetToolView };