@tangle-network/sandbox-ui 0.113.7 → 0.114.0

package/dist/chat-BOvFAe6p.js

@@ -0,0 +1,903 @@
+import { t as cn$1 } from "./utils-DzWbktWG.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React$1 from "react";
+import { focusField, focusRing } from "@tangle-network/ui/utils";
+import { Bot, Brain, Check, ChevronDown, Lock, Pencil, Plus, Send, Sparkles, Square, Trash2, X } from "lucide-react";
+import { AgentTimeline, ChatContainer as ChatContainer$1, ChatMessage, ChatMessage as ChatMessage$1, MessageList, ThinkingIndicator, UserMessage } from "@tangle-network/ui/chat";
+import { createPortal } from "react-dom";
+import { modelProvider, reasoningLadder, snapHarnessToModel } from "@tangle-network/agent-interface";
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+//#region src/chat/reasoning-level-picker.tsx
+/** Ordered ascending intensity (excludes "auto"), straight from the canonical ladder. */
+const REASONING_LADDER = reasoningLadder;
+/**
+* Proportional intensity meter. Auto shows a Sparkles glyph (no fixed depth);
+* every other level fills a fixed-width bar meter to its rank in the ladder, so
+* the rows read as an ascending scale regardless of how many levels exist.
+*/
+function ReasoningGlyph({ level }) {
+	if (level === "auto") return /* @__PURE__ */ jsx(Sparkles, { className: "h-3.5 w-3.5 text-muted-foreground" });
+	const BARS = 4;
+	const rank = REASONING_LADDER.indexOf(level) + 1;
+	const filled = Math.max(1, Math.ceil(rank / REASONING_LADDER.length * BARS));
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		className: "inline-flex h-3.5 items-end gap-px",
+		style: { width: 16 },
+		children: Array.from({ length: BARS }).map((_, i) => /* @__PURE__ */ jsx("span", {
+			className: cn$1("w-1 rounded-[1px]", i < filled ? "bg-foreground" : "bg-border"),
+			style: { height: `${35 + i * 22}%` }
+		}, i))
+	});
+}
+const DEFAULT_REASONING_LEVEL_OPTIONS = [
+	{
+		value: "auto",
+		label: "Auto",
+		description: "Let the agent pick the right depth."
+	},
+	{
+		value: "none",
+		label: "None",
+		description: "No extended thinking — fastest, cheapest."
+	},
+	{
+		value: "minimal",
+		label: "Minimal",
+		description: "Thinking on, lowest budget."
+	},
+	{
+		value: "low",
+		label: "Low",
+		description: "Fast, direct answers."
+	},
+	{
+		value: "medium",
+		label: "Medium",
+		description: "Inspect context before acting."
+	},
+	{
+		value: "high",
+		label: "High",
+		description: "Deeper planning and edge-case checks."
+	},
+	{
+		value: "xhigh",
+		label: "Extra High",
+		description: "Extended reasoning for the hardest problems."
+	},
+	{
+		value: "ultracode",
+		label: "Ultracode",
+		description: "Maximum extended thinking."
+	}
+];
+/**
+* Per-harness option overrides for harnesses whose real control isn't a depth scale, so the generic
+* ladder's labels would mislead. A harness with no entry uses {@link DEFAULT_REASONING_LEVEL_OPTIONS};
+* either way the picker still intersects the chosen options with the harness/model `available` set, so
+* only supported values render.
+*
+* `kimi-code` is a BINARY thinking toggle, not a gradient: its `--thinking` flag is simply off or on.
+* `none` emits `--no-thinking` (off) and `high` maps to thinking-on, so the
+* menu reads Auto / No thinking / Thinking rather than a misleading five-step scale.
+*/
+const HARNESS_REASONING_OPTIONS = { "kimi-code": [
+	{
+		value: "auto",
+		label: "Auto",
+		description: "Use Kimi's default."
+	},
+	{
+		value: "none",
+		label: "No thinking",
+		description: "Kimi answers directly — thinking off."
+	},
+	{
+		value: "high",
+		label: "Thinking",
+		description: "Kimi reasons before answering."
+	}
+] };
+function ReasoningLevelPicker({ value, onChange, disabled, className, triggerClassName, options = DEFAULT_REASONING_LEVEL_OPTIONS, available, side, avoidCollisions }) {
+	const shown = available ? options.filter((o) => o.value === "auto" || available.includes(o.value)) : options;
+	const label = shown.find((option) => option.value === value)?.label ?? "Auto";
+	return /* @__PURE__ */ jsxs(DropdownMenu.Root, { children: [/* @__PURE__ */ jsx(DropdownMenu.Trigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			disabled,
+			className: cn$1("inline-flex h-8 items-center gap-1.5 rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container px-2.5", "text-xs font-medium text-foreground shadow-sm transition-colors", "hover:border-[var(--md3-outline-variant)] hover:bg-surface-container-high", focusRing, "data-[state=open]:border-[var(--md3-outline-variant)] data-[state=open]:bg-surface-container-high", "disabled:cursor-not-allowed disabled:opacity-50", className, triggerClassName),
+			"aria-label": "Reasoning level",
+			children: [
+				/* @__PURE__ */ jsx(Brain, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
+				/* @__PURE__ */ jsx("span", { children: label }),
+				/* @__PURE__ */ jsx(ChevronDown, { className: "ml-auto h-3.5 w-3.5 shrink-0 text-muted-foreground" })
+			]
+		})
+	}), /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsx(DropdownMenu.Content, {
+		side,
+		align: "start",
+		avoidCollisions,
+		collisionPadding: 24,
+		sideOffset: 6,
+		className: cn$1("z-50 w-64 max-h-[var(--radix-dropdown-menu-content-available-height)] overflow-y-auto rounded-[var(--radius-md)] border border-[var(--md3-outline-variant)] bg-surface-container-highest p-1", "shadow-[0_8px_30px_rgba(0,0,0,0.45)] ring-1 ring-[#ffffff14]", "data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95"),
+		children: shown.map((option) => /* @__PURE__ */ jsxs(DropdownMenu.Item, {
+			onSelect: () => onChange(option.value),
+			className: cn$1("flex cursor-pointer items-start gap-2.5 rounded-md px-2.5 py-2 outline-none", "transition-colors hover:bg-accent/40 focus:bg-accent/40", option.value === value && "bg-[var(--accent-surface-soft)] text-[var(--accent-text)]"),
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "mt-0.5 flex w-3.5 shrink-0 justify-center",
+				children: /* @__PURE__ */ jsx(ReasoningGlyph, { level: option.value })
+			}), /* @__PURE__ */ jsxs("span", {
+				className: "flex min-w-0 flex-col gap-0.5",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-sm font-medium",
+					children: option.label
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-xs text-muted-foreground",
+					children: option.description
+				})]
+			})]
+		}, option.value))
+	}) })] });
+}
+//#endregion
+//#region src/lib/use-click-outside.ts
+/**
+* Returns a ref; calls `onOutside` when a mousedown lands outside that element
+* and outside every element in `extras`. For self-contained popovers/menus
+* that close on an outside click; `extras` covers body-portaled panels, whose
+* DOM nodes are not descendants of the returned ref.
+*/
+function useClickOutside(onOutside, extras) {
+	const ref = React$1.useRef(null);
+	const extrasRef = React$1.useRef(extras);
+	extrasRef.current = extras;
+	React$1.useEffect(() => {
+		function handler(event) {
+			const target = event.target;
+			if (!ref.current || ref.current.contains(target)) return;
+			if (extrasRef.current?.some((extra) => extra.current?.contains(target))) return;
+			onOutside();
+		}
+		document.addEventListener("mousedown", handler);
+		return () => document.removeEventListener("mousedown", handler);
+	}, [onOutside]);
+	return ref;
+}
+//#endregion
+//#region src/chat/anchored-popover.tsx
+/**
+* Body-portaled popover for the self-contained (non-Radix) pickers. Composer
+* control strips scroll horizontally and sit under overlapping siblings, so an
+* inline `position:absolute` panel gets clipped by the strip's overflow and
+* loses hit-testing to later stacking contexts — portaling to `document.body`
+* with viewport-fixed coordinates sidesteps both. Position tracks the anchor
+* on scroll/resize while open; callers keep ownership of open state, outside
+* clicks (pass the returned node to `useClickOutside` extras), and contents.
+*/
+const AnchoredPopover = React$1.forwardRef(function AnchoredPopover({ anchorRef, side, children, className, style, ...rest }, forwardedRef) {
+	const innerRef = React$1.useRef(null);
+	const setRefs = (node) => {
+		innerRef.current = node;
+		if (typeof forwardedRef === "function") forwardedRef(node);
+		else if (forwardedRef) forwardedRef.current = node;
+	};
+	const [position, setPosition] = React$1.useState(null);
+	const place = React$1.useCallback(() => {
+		const anchor = anchorRef.current;
+		if (!anchor) return;
+		const rect = anchor.getBoundingClientRect();
+		const width = innerRef.current?.offsetWidth ?? 0;
+		const margin = 8;
+		const left = Math.max(margin, Math.min(rect.left, window.innerWidth - width - margin));
+		setPosition(side === "top" ? {
+			left,
+			bottom: window.innerHeight - rect.top + margin
+		} : {
+			left,
+			top: rect.bottom + margin
+		});
+	}, [anchorRef, side]);
+	React$1.useLayoutEffect(() => {
+		place();
+		window.addEventListener("resize", place);
+		window.addEventListener("scroll", place, true);
+		return () => {
+			window.removeEventListener("resize", place);
+			window.removeEventListener("scroll", place, true);
+		};
+	}, [place]);
+	return createPortal(/* @__PURE__ */ jsx("div", {
+		...rest,
+		ref: setRefs,
+		className: cn$1("fixed z-50", className),
+		style: {
+			...style,
+			pointerEvents: "auto",
+			...position ?? {
+				visibility: "hidden",
+				left: 0,
+				top: 0
+			}
+		},
+		children
+	}), document.body);
+});
+//#endregion
+//#region src/chat/informative-lock.tsx
+/**
+* Interactive locked-control shell shared by session-bound pickers. It keeps
+* the pinned selection visible while explaining how to switch in a new chat.
+*/
+function InformativeLock({ children, ariaLabel, lockTitle, lockBody, newChatLabel, onNewChat, className, triggerClassName, popoverClassName, side = "top" }) {
+	const [open, setOpen] = React$1.useState(false);
+	const closeTimer = React$1.useRef(null);
+	const popoverRef = React$1.useRef(null);
+	const ref = useClickOutside(() => setOpen(false), [popoverRef]);
+	const cancelClose = React$1.useCallback(() => {
+		if (closeTimer.current) {
+			clearTimeout(closeTimer.current);
+			closeTimer.current = null;
+		}
+	}, []);
+	const scheduleClose = React$1.useCallback(() => {
+		cancelClose();
+		closeTimer.current = setTimeout(() => setOpen(false), 150);
+	}, [cancelClose]);
+	React$1.useEffect(() => cancelClose, [cancelClose]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn$1("relative inline-flex", className),
+		onMouseEnter: () => {
+			cancelClose();
+			setOpen(true);
+		},
+		onMouseLeave: scheduleClose,
+		onKeyDown: (event) => {
+			if (event.key === "Escape") setOpen(false);
+		},
+		children: [/* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: () => setOpen(true),
+			"data-state": open ? "open" : "closed",
+			"aria-label": ariaLabel,
+			"aria-haspopup": "dialog",
+			"aria-expanded": open,
+			className: cn$1("inline-flex h-8 items-center gap-1.5 rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container px-2.5 opacity-60", "text-xs font-medium text-foreground shadow-sm transition-colors", "hover:border-[var(--md3-outline-variant)] hover:bg-surface-container-high", focusRing, "data-[state=open]:border-[var(--md3-outline-variant)] data-[state=open]:bg-surface-container-high", triggerClassName),
+			children
+		}), open && /* @__PURE__ */ jsxs(AnchoredPopover, {
+			ref: popoverRef,
+			anchorRef: ref,
+			side,
+			role: "dialog",
+			onMouseEnter: () => {
+				cancelClose();
+				setOpen(true);
+			},
+			onMouseLeave: scheduleClose,
+			className: cn$1("w-72 rounded-[var(--radius-md)] border border-[var(--md3-outline-variant)] bg-surface-container-highest p-3", "shadow-[0_8px_30px_rgba(0,0,0,0.45)] ring-1 ring-[#ffffff14]", popoverClassName),
+			children: [
+				/* @__PURE__ */ jsxs("p", {
+					className: "flex items-start gap-2 text-sm font-medium text-foreground",
+					children: [/* @__PURE__ */ jsx(Lock, { className: "mt-0.5 h-3.5 w-3.5 shrink-0 text-muted-foreground" }), /* @__PURE__ */ jsx("span", { children: lockTitle })]
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "mt-1.5 text-xs text-muted-foreground",
+					children: lockBody
+				}),
+				/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: () => {
+						setOpen(false);
+						onNewChat();
+					},
+					className: cn$1("mt-3 flex w-full items-center justify-center gap-1.5 rounded-md px-2.5 py-2 text-sm font-medium text-foreground", "bg-primary/10 ring-1 ring-inset ring-primary/25 transition-colors", "hover:bg-primary/15", focusRing),
+					children: [/* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }), newChatLabel]
+				})
+			]
+		})]
+	});
+}
+//#endregion
+//#region src/chat/agent-profile-picker.tsx
+function profileSubtitle(profile) {
+	if (profile.description) return profile.description;
+	const count = profile.capabilities?.length ?? 0;
+	return `${count} ${count === 1 ? "tool group" : "tool groups"}`;
+}
+/**
+* Agent / mode switcher styled to match the chat control strip's pills
+* (harness, model, effort). The pill shows the active profile; the menu lists
+* builtin modes and saved custom agents. When a capability catalog and a write
+* callback are supplied it also authors agents inline (name + tool toggles +
+* persona) — a self-contained click-outside popover rather than a Radix menu,
+* because the inline form needs its own focus and typing without the menu
+* stealing keystrokes.
+*/
+function AgentProfilePicker({ value, onChange, profiles, capabilities, onCreate, onUpdate, onDelete, disabled, locked, lockReason, onNewChat, className, triggerClassName, popoverClassName, side = "top" }) {
+	const [open, setOpen] = React$1.useState(false);
+	const [composing, setComposing] = React$1.useState(null);
+	const popoverRef = React$1.useRef(null);
+	const ref = useClickOutside(() => {
+		setOpen(false);
+		setComposing(null);
+	}, [popoverRef]);
+	const canAuthor = Boolean(capabilities && (onCreate || onUpdate));
+	const builtins = profiles.filter((profile) => profile.builtin);
+	const custom = profiles.filter((profile) => !profile.builtin);
+	const selectedName = profiles.find((profile) => profile.id === value)?.name ?? value;
+	React$1.useEffect(() => {
+		if (!locked) return;
+		setOpen(false);
+		setComposing(null);
+	}, [locked]);
+	function select(id) {
+		onChange(id);
+		setOpen(false);
+	}
+	async function save(draft) {
+		if (draft.id) await onUpdate?.(draft.id, draft);
+		else await onCreate?.(draft);
+		setComposing(null);
+	}
+	if (locked && onNewChat) return /* @__PURE__ */ jsxs(InformativeLock, {
+		ariaLabel: "Agent profile (locked)",
+		lockTitle: `Profile fixed to ${selectedName} for this conversation.`,
+		lockBody: "Conversations stay on one profile.",
+		newChatLabel: "New chat to switch profile",
+		onNewChat,
+		className,
+		triggerClassName,
+		popoverClassName,
+		side,
+		children: [/* @__PURE__ */ jsx(Bot, { className: "h-3.5 w-3.5 text-muted-foreground" }), /* @__PURE__ */ jsx("span", {
+			className: "max-w-[140px] truncate",
+			children: selectedName
+		})]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn$1("relative inline-flex", className),
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			disabled: disabled || locked,
+			title: locked ? lockReason : void 0,
+			onClick: () => setOpen((v) => !v),
+			className: cn$1("inline-flex h-8 items-center gap-1.5 rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container px-2.5", "text-xs font-medium text-foreground shadow-sm transition-colors", "hover:border-[var(--md3-outline-variant)] hover:bg-surface-container-high", focusRing, "data-[state=open]:border-[var(--md3-outline-variant)] data-[state=open]:bg-surface-container-high", "disabled:cursor-not-allowed disabled:opacity-60", triggerClassName),
+			"data-state": open ? "open" : "closed",
+			"aria-label": "Agent profile",
+			children: [
+				/* @__PURE__ */ jsx(Bot, { className: "h-3.5 w-3.5 text-muted-foreground" }),
+				/* @__PURE__ */ jsx("span", {
+					className: "max-w-[140px] truncate",
+					children: selectedName
+				}),
+				!locked && /* @__PURE__ */ jsx(ChevronDown, { className: "ml-auto h-3.5 w-3.5 shrink-0 text-muted-foreground" })
+			]
+		}), open && !locked && /* @__PURE__ */ jsx(AnchoredPopover, {
+			ref: popoverRef,
+			anchorRef: ref,
+			side,
+			className: cn$1("w-[min(320px,calc(100vw-2rem))] overflow-hidden rounded-[var(--radius-md)] border border-[var(--md3-outline-variant)] bg-surface-container-highest p-1", "shadow-[0_8px_30px_rgba(0,0,0,0.45)] ring-1 ring-[#ffffff14]", popoverClassName),
+			"data-testid": "agent-profile-popover",
+			children: composing ? /* @__PURE__ */ jsx(ProfileForm, {
+				capabilities: capabilities ?? [],
+				initial: composing === "new" ? void 0 : composing,
+				onCancel: () => setComposing(null),
+				onSave: save
+			}) : /* @__PURE__ */ jsxs("div", {
+				className: "max-h-[min(60vh,420px)] overflow-y-auto",
+				children: [
+					/* @__PURE__ */ jsx(SectionHeader, { children: "Modes" }),
+					builtins.map((profile) => /* @__PURE__ */ jsx(ProfileRow, {
+						active: profile.id === value,
+						title: profile.name,
+						subtitle: profileSubtitle(profile),
+						onSelect: () => select(profile.id)
+					}, profile.id)),
+					custom.length > 0 && /* @__PURE__ */ jsx(SectionHeader, { children: "Your agents" }),
+					custom.map((profile) => /* @__PURE__ */ jsx(ProfileRow, {
+						active: profile.id === value,
+						title: profile.name,
+						subtitle: profileSubtitle(profile),
+						onSelect: () => select(profile.id),
+						onEdit: canAuthor ? () => setComposing(profile) : void 0,
+						onDelete: onDelete ? () => void onDelete(profile.id) : void 0
+					}, profile.id)),
+					canAuthor && /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						onClick: () => setComposing("new"),
+						className: "mt-1 flex w-full items-center gap-2 rounded-md px-2.5 py-2 text-left text-sm text-[var(--accent-text)] transition-colors hover:bg-accent/40",
+						children: [/* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }), " New agent…"]
+					})
+				]
+			})
+		})]
+	});
+}
+function SectionHeader({ children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "px-2.5 pb-1 pt-2 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/70",
+		children
+	});
+}
+function ProfileRow({ active, title, subtitle, onSelect, onEdit, onDelete }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn$1("group flex items-center gap-2 rounded-md px-2.5 py-2 text-sm transition-colors", active ? "bg-[var(--accent-surface-soft)] text-[var(--accent-text)]" : "hover:bg-accent/40"),
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick: onSelect,
+			className: "flex min-w-0 flex-1 items-center gap-2 text-left",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "flex h-4 w-4 shrink-0 items-center justify-center",
+				children: active && /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5" })
+			}), /* @__PURE__ */ jsxs("span", {
+				className: "min-w-0",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "block truncate font-medium",
+					children: title
+				}), /* @__PURE__ */ jsx("span", {
+					className: "block truncate text-xs text-muted-foreground",
+					children: subtitle
+				})]
+			})]
+		}), (onEdit || onDelete) && /* @__PURE__ */ jsxs("span", {
+			className: "flex shrink-0 items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100",
+			children: [onEdit && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: onEdit,
+				title: "Edit",
+				className: "rounded p-1 text-muted-foreground hover:text-foreground",
+				children: /* @__PURE__ */ jsx(Pencil, { className: "h-3 w-3" })
+			}), onDelete && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: onDelete,
+				title: "Delete",
+				className: "rounded p-1 text-muted-foreground hover:text-[var(--status-error,#ff4d6d)]",
+				children: /* @__PURE__ */ jsx(Trash2, { className: "h-3 w-3" })
+			})]
+		})]
+	});
+}
+function ProfileForm({ capabilities, initial, onCancel, onSave }) {
+	const [name, setName] = React$1.useState(initial?.name ?? "");
+	const [caps, setCaps] = React$1.useState(initial?.capabilities ? [...initial.capabilities] : capabilities.map((c) => c.id));
+	const [instructions, setInstructions] = React$1.useState(initial?.instructions ?? "");
+	const toggle = (id) => setCaps((prev) => prev.includes(id) ? prev.filter((c) => c !== id) : [...prev, id]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-3 p-2.5",
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				autoFocus: true,
+				value: name,
+				onChange: (event) => setName(event.target.value),
+				placeholder: "Agent name (e.g. Tax Reviewer)",
+				className: `w-full rounded-lg border bg-surface-container px-3 py-2 text-sm ${focusField}`
+			}),
+			capabilities.length > 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+				className: "mb-1.5 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/70",
+				children: "Tools"
+			}), /* @__PURE__ */ jsx("div", {
+				className: "space-y-0.5",
+				children: capabilities.map((cap) => /* @__PURE__ */ jsxs("label", {
+					className: "flex cursor-pointer items-start gap-2 rounded-md px-2 py-1.5 hover:bg-accent/40",
+					children: [/* @__PURE__ */ jsx("input", {
+						type: "checkbox",
+						checked: caps.includes(cap.id),
+						onChange: () => toggle(cap.id),
+						className: "mt-0.5"
+					}), /* @__PURE__ */ jsxs("span", {
+						className: "min-w-0",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "block text-sm font-medium",
+							children: cap.label
+						}), cap.description && /* @__PURE__ */ jsx("span", {
+							className: "block text-xs text-muted-foreground",
+							children: cap.description
+						})]
+					})]
+				}, cap.id))
+			})] }),
+			/* @__PURE__ */ jsx("textarea", {
+				value: instructions,
+				onChange: (event) => setInstructions(event.target.value),
+				rows: 2,
+				placeholder: "Instructions (optional) — how this agent should behave",
+				className: `w-full resize-none rounded-lg border bg-surface-container px-3 py-2 text-sm ${focusField}`
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex justify-end gap-2",
+				children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: onCancel,
+					className: "rounded-lg px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent/40",
+					children: "Cancel"
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					disabled: !name.trim(),
+					onClick: () => onSave({
+						id: initial?.id,
+						name: name.trim(),
+						capabilities: caps,
+						instructions: instructions.trim()
+					}),
+					className: "rounded-lg bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90 disabled:opacity-40",
+					children: "Save agent"
+				})]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/chat/artifact-agent-dock.tsx
+function defaultScopeLabel(scope) {
+	if (scope.label) return scope.label;
+	switch (scope.kind) {
+		case "vault-file": return scope.key.split("/").pop() ?? scope.key;
+		case "sequence": return `Sequence ${scope.key.slice(0, 8)}`;
+		case "content": return `Content ${scope.key.slice(0, 8)}`;
+		case "image": return `Image ${scope.key.slice(0, 8)}`;
+		case "video": return `Video ${scope.key.slice(0, 8)}`;
+		case "project": return "Project chat";
+		case "workspace": return "Workspace chat";
+		default: return scope.key;
+	}
+}
+function normalizeRole(role) {
+	return role === "assistant" || role === "system" ? role : "user";
+}
+/** Stable client-side message id. Uses `crypto.randomUUID()` when available,
+*  else a UUIDv4 from `getRandomValues`. Avoids `Date.now()`, which collides
+*  when a user+assistant pair are created in the same millisecond. */
+function createDockMessageId() {
+	const c = typeof globalThis !== "undefined" ? globalThis.crypto : void 0;
+	if (c && typeof c.randomUUID === "function") return c.randomUUID();
+	if (c && typeof c.getRandomValues === "function") {
+		const b = c.getRandomValues(/* @__PURE__ */ new Uint8Array(16));
+		b[6] = b[6] & 15 | 64;
+		b[8] = b[8] & 63 | 128;
+		const h = Array.from(b, (x) => x.toString(16).padStart(2, "0")).join("");
+		return `${h.slice(0, 8)}-${h.slice(8, 12)}-${h.slice(12, 16)}-${h.slice(16, 20)}-${h.slice(20)}`;
+	}
+	throw new Error("crypto.getRandomValues is required for message ids");
+}
+/**
+* ArtifactAgentDock — slide-in right-rail chat scoped to a single artifact.
+*
+* Renders a persistent, per-artifact conversation surface that streams via a
+* consumer-supplied transport. Mount alongside any artifact view (file editor,
+* sequence editor, asset preview) to give every artifact its own dedicated
+* agent conversation without forking the chat UI per app.
+*
+* Behavior:
+* - On open, calls `transport.ensureThread(scope)` to get the canonical thread
+*   id and `transport.loadMessages(threadId)` to populate prior turns.
+* - On submit, calls `transport.sendStream(...)` and concatenates delta events
+*   into a single streaming assistant message; renders inline.
+* - Composer: Enter sends, Shift+Enter newline, Cancel during stream supported.
+* - Accessibility: scope `aria-label` on the panel, `aria-pressed` is the
+*   consumer's job on whatever button toggles `open`.
+*/
+function ArtifactAgentDock({ scope, open, onOpenChange, transport, defaultPrompt, onError, className }) {
+	const [threadId, setThreadId] = React$1.useState(null);
+	const [messages, setMessages] = React$1.useState([]);
+	const [composer, setComposer] = React$1.useState(defaultPrompt ?? "");
+	const [streamContent, setStreamContent] = React$1.useState("");
+	const [sending, setSending] = React$1.useState(false);
+	const [loading, setLoading] = React$1.useState(false);
+	const abortRef = React$1.useRef(null);
+	const scrollRef = React$1.useRef(null);
+	const scopeTokenRef = React$1.useRef(0);
+	const reportError = React$1.useCallback((message) => {
+		if (onError) onError(message);
+		else if (typeof console !== "undefined") console.error("[ArtifactAgentDock]", message);
+	}, [onError]);
+	React$1.useEffect(() => {
+		if (!open) return;
+		scopeTokenRef.current += 1;
+		abortRef.current?.abort();
+		abortRef.current = null;
+		let cancelled = false;
+		async function bootstrap() {
+			setLoading(true);
+			try {
+				const { id } = await transport.ensureThread(scope);
+				if (cancelled) return;
+				setThreadId(id);
+				if (transport.loadMessages) {
+					const prior = await transport.loadMessages(id);
+					if (cancelled) return;
+					setMessages(prior.map((m) => ({
+						...m,
+						role: normalizeRole(m.role),
+						createdAt: m.createdAt instanceof Date ? m.createdAt : m.createdAt ? new Date(m.createdAt) : void 0
+					})));
+				} else setMessages([]);
+			} catch (err) {
+				reportError(err instanceof Error ? err.message : "Failed to open artifact chat");
+			} finally {
+				if (!cancelled) setLoading(false);
+			}
+		}
+		bootstrap();
+		return () => {
+			cancelled = true;
+		};
+	}, [
+		open,
+		scope.kind,
+		scope.key,
+		transport,
+		reportError
+	]);
+	React$1.useEffect(() => {
+		if (!scrollRef.current) return;
+		scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+	}, [messages.length, streamContent]);
+	const send = React$1.useCallback(async () => {
+		const text = composer.trim();
+		if (!text || !threadId || sending) return;
+		const token = scopeTokenRef.current;
+		const userMsg = {
+			id: createDockMessageId(),
+			role: "user",
+			content: text,
+			createdAt: /* @__PURE__ */ new Date()
+		};
+		setMessages((prev) => [...prev, userMsg]);
+		setComposer("");
+		setSending(true);
+		setStreamContent("");
+		const controller = new AbortController();
+		abortRef.current = controller;
+		let assistantContent = "";
+		let streamFailed = false;
+		try {
+			for await (const event of transport.sendStream({
+				threadId,
+				content: text,
+				signal: controller.signal
+			})) {
+				if (scopeTokenRef.current !== token) return;
+				if (event.type === "delta") {
+					assistantContent += event.text;
+					setStreamContent(assistantContent);
+				} else if (event.type === "error") {
+					streamFailed = true;
+					reportError(event.message);
+				}
+			}
+			if (scopeTokenRef.current !== token) return;
+			if (assistantContent && !streamFailed) setMessages((prev) => [...prev, {
+				id: createDockMessageId(),
+				role: "assistant",
+				content: assistantContent,
+				createdAt: /* @__PURE__ */ new Date()
+			}]);
+			setStreamContent("");
+		} catch (err) {
+			if (err?.name === "AbortError") return;
+			if (scopeTokenRef.current === token) reportError(err instanceof Error ? err.message : "Send failed");
+		} finally {
+			if (scopeTokenRef.current === token) setSending(false);
+			if (abortRef.current === controller) abortRef.current = null;
+		}
+	}, [
+		composer,
+		threadId,
+		sending,
+		transport,
+		reportError
+	]);
+	const cancel = React$1.useCallback(() => {
+		if (threadId && transport.cancel) try {
+			Promise.resolve(transport.cancel({ threadId })).catch(() => {});
+		} catch {}
+		abortRef.current?.abort();
+		setSending(false);
+		setStreamContent("");
+	}, [threadId, transport]);
+	if (!open) return null;
+	const heading = defaultScopeLabel(scope);
+	return /* @__PURE__ */ jsxs("aside", {
+		className: cn$1("flex h-full w-[420px] min-w-[360px] max-w-[480px] flex-col border-l border-[var(--md3-outline-variant)] bg-surface-container shadow-[var(--shadow-dropdown)]", className),
+		"aria-label": `Agent chat about ${heading}`,
+		children: [
+			/* @__PURE__ */ jsxs("header", {
+				className: "flex items-center justify-between border-b border-[var(--md3-outline-variant)] bg-surface-container-low px-4 py-3",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 items-center gap-2",
+					children: [/* @__PURE__ */ jsx(Sparkles, { className: "h-4 w-4 shrink-0 text-muted-foreground" }), /* @__PURE__ */ jsxs("div", {
+						className: "min-w-0",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "text-[10px] font-medium uppercase tracking-wider text-muted-foreground",
+							children: "Discussing"
+						}), /* @__PURE__ */ jsx("div", {
+							className: "truncate text-sm font-semibold text-foreground",
+							children: heading
+						})]
+					})]
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => onOpenChange(false),
+					"aria-label": "Close artifact chat",
+					className: "rounded-md p-1 text-muted-foreground transition-colors hover:bg-surface-container-high hover:text-foreground",
+					children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref: scrollRef,
+				className: "flex-1 overflow-y-auto px-3 py-4",
+				children: loading ? /* @__PURE__ */ jsx("div", {
+					className: "px-3 py-8 text-center text-xs text-muted-foreground",
+					children: "Loading conversation…"
+				}) : messages.length === 0 && !streamContent ? /* @__PURE__ */ jsxs("div", {
+					className: "px-3 py-12 text-center",
+					children: [
+						/* @__PURE__ */ jsx(Sparkles, { className: "mx-auto mb-3 h-5 w-5 text-muted-foreground/40" }),
+						/* @__PURE__ */ jsxs("p", {
+							className: "text-sm text-foreground",
+							children: [
+								"Ask the agent about this ",
+								scope.kind === "vault-file" ? "document" : scope.kind,
+								"."
+							]
+						}),
+						/* @__PURE__ */ jsx("p", {
+							className: "mt-1 text-xs text-muted-foreground",
+							children: "It can read the current contents and propose edits, rewrites, or follow-ups."
+						})
+					]
+				}) : /* @__PURE__ */ jsxs("div", {
+					className: "space-y-3",
+					children: [messages.map((m) => /* @__PURE__ */ jsx(ChatMessage, {
+						role: m.role,
+						content: m.content,
+						timestamp: m.createdAt
+					}, m.id)), streamContent && /* @__PURE__ */ jsx(ChatMessage, {
+						role: "assistant",
+						content: streamContent,
+						isStreaming: true
+					})]
+				})
+			}),
+			/* @__PURE__ */ jsx("form", {
+				className: "border-t border-[var(--md3-outline-variant)] bg-surface-container-low p-3",
+				onSubmit: (e) => {
+					e.preventDefault();
+					send();
+				},
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "flex items-end gap-2",
+					children: [/* @__PURE__ */ jsx("textarea", {
+						value: composer,
+						onChange: (e) => setComposer(e.target.value),
+						onKeyDown: (e) => {
+							if (e.key === "Enter" && !e.shiftKey && !sending) {
+								e.preventDefault();
+								send();
+							}
+						},
+						placeholder: `Ask about ${heading}…`,
+						rows: 2,
+						disabled: !threadId,
+						className: `min-h-[44px] flex-1 resize-none rounded-[20px] border bg-surface-dim px-3.5 py-2 text-sm text-foreground placeholder:text-muted-foreground disabled:opacity-50 ${focusField}`
+					}), sending ? /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: cancel,
+						"aria-label": "Cancel",
+						className: "inline-flex h-9 w-9 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-surface-container-high hover:text-foreground",
+						children: /* @__PURE__ */ jsx(Square, { className: "h-4 w-4" })
+					}) : /* @__PURE__ */ jsx("button", {
+						type: "submit",
+						disabled: !composer.trim() || !threadId,
+						"aria-label": "Send",
+						className: "inline-flex h-9 w-9 items-center justify-center rounded-full bg-primary text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-50",
+						children: /* @__PURE__ */ jsx(Send, { className: "h-4 w-4" })
+					})]
+				})
+			})
+		]
+	});
+}
+/**
+* Build a transport that hits the Tangle product convention: POST
+* /api/threads with body.scope = ArtifactScope to ensure the canonical
+* thread; GET /api/threads/:id/messages to load history; POST /api/chat
+* with body = {workspaceId, threadId, content} and an NDJSON event stream
+* to send. Most consumers can use this as-is; advanced ones can supply
+* their own transport object.
+*
+* The expected NDJSON event shape:
+*   { type: "message.part.updated", data: { delta: string, part?: {type} } }  // assistant chunk
+*   { type: "error", data: { message: string, ... } }        // surface error
+*
+* Other event types are ignored — consumers that need tool-call rendering
+* or other event semantics should ship a richer transport.
+*/
+function createFetchTransport(opts) {
+	const threadsUrl = opts.threadsUrl ?? "/api/threads";
+	const chatUrl = opts.chatUrl ?? "/api/chat";
+	const f = opts.fetchImpl ?? ((...args) => fetch(...args));
+	const workspaceId = opts.workspaceId;
+	return {
+		async ensureThread(scope) {
+			const url = threadsUrl.includes("?") ? `${threadsUrl}&workspaceId=${encodeURIComponent(workspaceId)}` : `${threadsUrl}?workspaceId=${encodeURIComponent(workspaceId)}`;
+			const res = await f(url, {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({
+					workspaceId,
+					scope,
+					ensureScoped: true
+				})
+			});
+			if (!res.ok) throw new Error(`Thread ensure failed (${res.status})`);
+			const data = await res.json();
+			const id = data.thread?.id ?? data.id;
+			if (!id) throw new Error("Malformed ensure response");
+			return { id };
+		},
+		async loadMessages(threadId) {
+			const res = await f(`${threadsUrl}/${encodeURIComponent(threadId)}/messages`);
+			if (!res.ok) return [];
+			return ((await res.json()).messages ?? []).map((m) => ({
+				id: m.id,
+				role: normalizeRole(m.role),
+				content: m.content,
+				createdAt: new Date(m.createdAt)
+			}));
+		},
+		sendStream({ threadId, content, signal }) {
+			return (async function* () {
+				const res = await f(chatUrl, {
+					method: "POST",
+					headers: { "Content-Type": "application/json" },
+					body: JSON.stringify({
+						workspaceId,
+						threadId,
+						content
+					}),
+					signal
+				});
+				if (!res.ok || !res.body) {
+					yield {
+						type: "error",
+						message: await res.text().catch(() => "") || `Send failed (${res.status})`
+					};
+					return;
+				}
+				const reader = res.body.getReader();
+				const decoder = new TextDecoder();
+				let buffer = "";
+				while (true) {
+					const { done, value } = await reader.read();
+					if (done) break;
+					buffer += decoder.decode(value, { stream: true });
+					const lines = buffer.split("\n");
+					buffer = lines.pop() ?? "";
+					for (const line of lines) {
+						if (!line.trim()) continue;
+						try {
+							const event = JSON.parse(line);
+							if (event.type === "message.part.updated" && event.data) {
+								const delta = event.data.delta;
+								const part = event.data.part;
+								if ((!part || typeof part !== "object" || part.type === void 0 || part.type === "text") && typeof delta === "string" && delta.length > 0) yield {
+									type: "delta",
+									text: delta
+								};
+							} else if (event.type === "error" && event.data) yield {
+								type: "error",
+								message: typeof event.data.message === "string" ? event.data.message : "Stream error"
+							};
+						} catch {}
+					}
+				}
+			})();
+		}
+	};
+}
+//#endregion
+export { ThinkingIndicator as a, createFetchTransport as c, AgentProfilePicker as d, DEFAULT_REASONING_LEVEL_OPTIONS as f, MessageList as i, modelProvider as l, ReasoningLevelPicker as m, ChatContainer$1 as n, UserMessage as o, HARNESS_REASONING_OPTIONS as p, ChatMessage$1 as r, ArtifactAgentDock as s, AgentTimeline as t, snapHarnessToModel as u };