bazilion 0.5.0 → 0.6.0

package/dist/web/server/assets/ChatPane-BvpswYvF.js

@@ -0,0 +1,1084 @@
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import DOMPurify from "dompurify";
+import { marked } from "marked";
+//#region src/lib/md.ts
+var installed = false;
+function install() {
+	if (installed) return;
+	marked.setOptions({
+		breaks: true,
+		gfm: true
+	});
+	DOMPurify.addHook("afterSanitizeAttributes", (node) => {
+		if (node.nodeName === "A") {
+			node.setAttribute("target", "_blank");
+			node.setAttribute("rel", "noopener noreferrer");
+		}
+	});
+	installed = true;
+}
+function renderMd(text) {
+	if (!text) return "";
+	if (typeof window === "undefined") return escapeHtml(text);
+	install();
+	try {
+		const html = marked.parse(text, { async: false });
+		return DOMPurify.sanitize(html);
+	} catch {
+		return escapeHtml(text);
+	}
+}
+function escapeHtml(s) {
+	return String(s).replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
+}
+//#endregion
+//#region src/components/ChatPane.tsx
+var INBOX_WAKE_PREFIX = "[[bazilion:inbox-wake]]\n";
+var COMPACTION_REPLAY_PREFIX = "[conversation summary]";
+var AUTOSCROLL_THRESHOLD_PX = 40;
+var SESSION_POLL_MS = 1e4;
+var TOOL_GROUP_MAX_HEIGHT_PX = 320;
+var MAX_INPUT_HEIGHT = 200;
+var SLASH_HELP = "slash commands:\n  /context           — context breakdown (system prompt, tools, skills, history)\n  /compact [N]       — summarize the head; keep the last N messages verbatim (default 10)\n  /reset             — reset chat history for this agent\n  /help              — show this list";
+function prettyArgs(raw) {
+	if (!raw) return "";
+	try {
+		return JSON.stringify(JSON.parse(raw), null, 2);
+	} catch {
+		return raw;
+	}
+}
+function formatBytes(n) {
+	if (n < 1024) return `${n} B`;
+	if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KiB`;
+	return `${(n / (1024 * 1024)).toFixed(2)} MiB`;
+}
+/** Read any File into a base64 Attachment (strips the data: URL prefix). */
+function fileToAttachment(file) {
+	return new Promise((resolve, reject) => {
+		const reader = new FileReader();
+		reader.onload = () => {
+			const result = String(reader.result);
+			const comma = result.indexOf(",");
+			resolve({
+				name: file.name,
+				data: comma >= 0 ? result.slice(comma + 1) : result,
+				mimeType: file.type || "application/octet-stream"
+			});
+		};
+		reader.onerror = () => reject(reader.error);
+		reader.readAsDataURL(file);
+	});
+}
+var isImageMime = (m) => m.startsWith("image/");
+function projectMessages(msgs) {
+	const entries = [];
+	let openTool = null;
+	for (const m of msgs) if (m.role === "user") {
+		openTool = null;
+		entries.push({
+			type: "user",
+			content: m.content,
+			...m.images && m.images.length > 0 ? { images: m.images } : {}
+		});
+	} else if (m.role === "assistant") {
+		if (m.content) {
+			openTool = null;
+			entries.push({
+				type: "assistant",
+				content: m.content
+			});
+		}
+		if (m.toolCalls && m.toolCalls.length > 0) {
+			if (!openTool) {
+				openTool = {
+					type: "tool",
+					items: []
+				};
+				entries.push(openTool);
+			}
+			for (const tc of m.toolCalls) openTool.items.push({
+				kind: "call",
+				id: tc.id,
+				name: tc.name,
+				body: tc.arguments
+			});
+		}
+	} else if (m.role === "tool") {
+		if (!openTool) {
+			openTool = {
+				type: "tool",
+				items: []
+			};
+			entries.push(openTool);
+		}
+		const isError = m.content.startsWith("Error:") || m.content.startsWith("error:");
+		openTool.items.push({
+			kind: isError ? "error" : "result",
+			id: m.toolCallId ?? "",
+			name: m.toolName ?? "",
+			body: m.content
+		});
+		if (m.images && m.images.length > 0) {
+			entries.push({
+				type: "images",
+				images: m.images
+			});
+			openTool = null;
+		}
+	}
+	return entries;
+}
+function ChatPane({ agentId, agentName, initialMessages, initialSessionHead }) {
+	const [serverMessages, setServerMessages] = useState(initialMessages);
+	const [liveEntries, setLiveEntries] = useState([]);
+	const [systemBubbles, setSystemBubbles] = useState([]);
+	const [thinking, setThinking] = useState(false);
+	const [streaming, setStreaming] = useState(false);
+	const [editIdx, setEditIdx] = useState(null);
+	const [input, setInput] = useState("");
+	const [attachments, setAttachments] = useState([]);
+	const [dragging, setDragging] = useState(false);
+	const [staleBanner, setStaleBanner] = useState(false);
+	const messagesRef = useRef(null);
+	const fileInputRef = useRef(null);
+	const inputRef = useRef(null);
+	const currentAbortRef = useRef(null);
+	const systemIdRef = useRef(0);
+	const visibleEntryCountRef = useRef(0);
+	const knownHeadRef = useRef(initialSessionHead ?? {
+		file: null,
+		size: 0
+	});
+	const streamingRef = useRef(false);
+	streamingRef.current = streaming;
+	useEffect(() => {
+		setServerMessages(initialMessages);
+		setLiveEntries([]);
+		setSystemBubbles([]);
+		setEditIdx(null);
+		setInput("");
+		setThinking(false);
+		setStreaming(false);
+		setStaleBanner(false);
+		knownHeadRef.current = initialSessionHead ?? {
+			file: null,
+			size: 0
+		};
+	}, [agentId]);
+	const wasNearBottomRef = useRef(true);
+	useLayoutEffect(() => {
+		const el = messagesRef.current;
+		if (!el) return;
+		if (wasNearBottomRef.current) el.scrollTop = el.scrollHeight;
+	});
+	function captureScroll() {
+		const el = messagesRef.current;
+		if (!el) {
+			wasNearBottomRef.current = true;
+			return;
+		}
+		wasNearBottomRef.current = el.scrollHeight - el.scrollTop - el.clientHeight < AUTOSCROLL_THRESHOLD_PX;
+	}
+	useLayoutEffect(() => {
+		const el = inputRef.current;
+		if (!el) return;
+		el.style.height = "auto";
+		el.style.height = `${Math.min(el.scrollHeight, MAX_INPUT_HEIGHT)}px`;
+	}, [input]);
+	useEffect(() => {
+		const key = `bz_pending_${agentId}`;
+		function onVis() {
+			if (document.visibilityState === "visible" && sessionStorage.getItem(key)) {
+				sessionStorage.removeItem(key);
+				window.location.reload();
+			}
+		}
+		document.addEventListener("visibilitychange", onVis);
+		return () => document.removeEventListener("visibilitychange", onVis);
+	}, [agentId]);
+	useEffect(() => {
+		if (!initialSessionHead) return;
+		let stopped = false;
+		let timer = null;
+		async function tick() {
+			if (stopped) return;
+			if (!document.hidden && !streamingRef.current && !staleBanner) try {
+				const res = await fetch(`/api/agents/${encodeURIComponent(agentId)}/sessions/head`);
+				if (res.ok) {
+					const body = await res.json();
+					if (typeof body.size === "number") {
+						const known = knownHeadRef.current;
+						if (body.file !== known.file || body.size !== known.size) setStaleBanner(true);
+					}
+				}
+			} catch {}
+			timer = setTimeout(tick, SESSION_POLL_MS);
+		}
+		timer = setTimeout(tick, SESSION_POLL_MS);
+		return () => {
+			stopped = true;
+			if (timer) clearTimeout(timer);
+		};
+	}, [
+		agentId,
+		initialSessionHead,
+		staleBanner
+	]);
+	async function refreshKnownHead() {
+		try {
+			const res = await fetch(`/api/agents/${encodeURIComponent(agentId)}/sessions/head`);
+			if (!res.ok) return;
+			const body = await res.json();
+			if (typeof body.size === "number") knownHeadRef.current = {
+				file: body.file ?? null,
+				size: body.size
+			};
+		} catch {}
+	}
+	function pushSystem(text) {
+		captureScroll();
+		setSystemBubbles((prev) => [...prev, {
+			id: systemIdRef.current++,
+			content: text,
+			afterIdx: visibleEntryCountRef.current
+		}]);
+	}
+	async function runContextCommand() {
+		try {
+			const res = await fetch(`/api/agents/${encodeURIComponent(agentId)}/chat/context`);
+			if (!res.ok) {
+				pushSystem(`/context failed: ${res.statusText}`);
+				return;
+			}
+			const ctx = await res.json();
+			const fmt = (chars, tokens) => `${chars.toLocaleString()} chars (~${tokens.toLocaleString()} tok)`;
+			const lines = [];
+			lines.push(`context for ${ctx.agentId}`);
+			lines.push(`model: ${ctx.model}`);
+			lines.push("");
+			lines.push(`system prompt: ${fmt(ctx.systemPrompt.chars, ctx.systemPrompt.tokens)}`);
+			for (const f of ctx.systemPrompt.files) lines.push(`  - ${f.name}: ${f.chars.toLocaleString()} chars`);
+			lines.push("");
+			lines.push(`tools: ${ctx.tools.count} (${ctx.tools.schemaChars.toLocaleString()} chars of schema)`);
+			for (const t of ctx.tools.entries.slice(0, 5)) lines.push(`  - ${t.name}: ${t.schemaChars.toLocaleString()} chars`);
+			if (ctx.skills.count > 0) {
+				lines.push("");
+				lines.push(`skills: ${ctx.skills.count}`);
+				for (const s of ctx.skills.entries.slice(0, 10)) lines.push(`  - ${s.name}: ${s.blockChars.toLocaleString()} chars`);
+			}
+			lines.push("");
+			lines.push(`history: ${ctx.history.messageEntries} messages / ${ctx.history.compactionEntries} compactions`);
+			lines.push(`  ${fmt(ctx.history.chars, ctx.history.tokensEstimate)}`);
+			lines.push(`  bytes on disk: ${formatBytes(ctx.history.bytes)}`);
+			lines.push("");
+			lines.push(`TOTAL: ${fmt(ctx.totals.chars, ctx.totals.tokens)}`);
+			pushSystem(lines.join("\n"));
+		} catch (err) {
+			pushSystem(`/context failed: ${err.message}`);
+		}
+	}
+	async function runResetCommand() {
+		if (serverMessages.length === 0) {
+			pushSystem("/reset: history already empty");
+			return;
+		}
+		if (!confirm("reset chat history for this agent?")) return;
+		exitEditMode();
+		try {
+			const res = await fetch(`/api/agents/${encodeURIComponent(agentId)}/chat/reset`, { method: "POST" });
+			if (!res.ok) {
+				let msg = res.statusText;
+				try {
+					msg = (await res.json()).error || msg;
+				} catch {}
+				pushSystem(`/reset failed: ${msg}`);
+				return;
+			}
+			setServerMessages([]);
+			setLiveEntries([]);
+			setSystemBubbles([]);
+			pushSystem("/reset: history wiped");
+		} catch (err) {
+			pushSystem(`/reset failed: ${err.message}`);
+		}
+	}
+	async function runCompactCommand(rest) {
+		if (serverMessages.length < 2) {
+			pushSystem("/compact: need ≥2 messages to compact");
+			return;
+		}
+		let keepTail;
+		const argText = rest.trim();
+		if (argText) {
+			const n = Number(argText);
+			if (Number.isFinite(n) && n >= 0) keepTail = Math.floor(n);
+		}
+		exitEditMode();
+		setStreaming(true);
+		setThinking(true);
+		try {
+			const res = await fetch(`/api/agents/${encodeURIComponent(agentId)}/chat/compact`, {
+				method: "POST",
+				headers: { "content-type": "application/json" },
+				body: JSON.stringify(keepTail !== void 0 ? { keepTail } : {})
+			});
+			if (!res.ok) {
+				let msg = res.statusText;
+				try {
+					msg = (await res.json()).error || msg;
+				} catch {}
+				pushSystem(`/compact failed: ${msg}`);
+				return;
+			}
+			const body = await res.json();
+			pushSystem(`/compact: ${body.before} → ${body.after} entries (${body.summarized} summarized, ${body.keptTail} kept verbatim; ~${body.tokensBefore.toLocaleString()} → ~${body.tokensAfter.toLocaleString()} tok). reloading…`);
+			setTimeout(() => window.location.reload(), 400);
+		} catch (err) {
+			pushSystem(`/compact failed: ${err.message}`);
+		} finally {
+			setThinking(false);
+			setStreaming(false);
+		}
+	}
+	async function maybeHandleSlashCommand(text) {
+		const trimmed = text.trim();
+		if (!trimmed.startsWith("/")) return false;
+		const parts = trimmed.split(/\s+/);
+		const cmd = (parts[0] ?? "").toLowerCase();
+		const rest = parts.slice(1).join(" ");
+		switch (cmd) {
+			case "/help":
+				pushSystem(SLASH_HELP);
+				return true;
+			case "/context":
+				await runContextCommand();
+				return true;
+			case "/reset":
+				await runResetCommand();
+				return true;
+			case "/compact":
+				await runCompactCommand(rest);
+				return true;
+			default: return false;
+		}
+	}
+	function findLastUserIdx() {
+		for (let i = serverMessages.length - 1; i >= 0; i--) if (serverMessages[i]?.role === "user") return i;
+		return -1;
+	}
+	function enterEditMode() {
+		if (liveEntries.length > 0 || streaming) return;
+		const idx = findLastUserIdx();
+		if (idx === -1) return;
+		const userMsg = serverMessages[idx];
+		if (!userMsg) return;
+		setEditIdx(idx);
+		setInput(userMsg.content);
+		inputRef.current?.focus();
+	}
+	function exitEditMode() {
+		setEditIdx(null);
+	}
+	async function addFiles(files) {
+		if (!files) return;
+		const arr = Array.from(files);
+		if (arr.length === 0) return;
+		const encoded = await Promise.all(arr.map(fileToAttachment));
+		setAttachments((prev) => [...prev, ...encoded].slice(0, 16));
+	}
+	function onPaste(e) {
+		const files = Array.from(e.clipboardData.files);
+		if (files.some((f) => f.type.startsWith("image/"))) {
+			e.preventDefault();
+			addFiles(files);
+		}
+	}
+	function onDragOver(e) {
+		if (streaming) return;
+		if (Array.from(e.dataTransfer.types).includes("Files")) {
+			e.preventDefault();
+			setDragging(true);
+		}
+	}
+	function onDragLeave(e) {
+		if (e.currentTarget === e.target) setDragging(false);
+	}
+	function onDrop(e) {
+		if (e.dataTransfer.files.length > 0) {
+			e.preventDefault();
+			setDragging(false);
+			addFiles(e.dataTransfer.files);
+		}
+	}
+	const send = useCallback(async (text) => {
+		const atts = attachments;
+		if (!text.trim() && atts.length === 0 || streaming) return;
+		setInput("");
+		if (await maybeHandleSlashCommand(text)) return;
+		setAttachments([]);
+		let truncatedServerMessages = null;
+		if (editIdx !== null) {
+			const keep = editIdx;
+			try {
+				const res = await fetch(`/api/agents/${encodeURIComponent(agentId)}/chat/truncate`, {
+					method: "POST",
+					headers: { "content-type": "application/json" },
+					body: JSON.stringify({ keepCount: keep })
+				});
+				if (!res.ok) {
+					let err = res.statusText;
+					try {
+						err = (await res.json()).error || err;
+					} catch {}
+					setInput(text);
+					alert(`failed to replace last turn: ${err}`);
+					return;
+				}
+				truncatedServerMessages = serverMessages.slice(0, keep);
+				setServerMessages(truncatedServerMessages);
+				setEditIdx(null);
+			} catch (err) {
+				setInput(text);
+				alert(`failed to replace last turn: ${err.message}`);
+				return;
+			}
+		}
+		captureScroll();
+		const previewImages = atts.filter((a) => isImageMime(a.mimeType));
+		const previewFiles = atts.filter((a) => !isImageMime(a.mimeType));
+		setLiveEntries([{
+			type: "user",
+			content: text,
+			...previewImages.length > 0 ? { images: previewImages } : {},
+			...previewFiles.length > 0 ? { files: previewFiles.map((f) => ({ name: f.name ?? "file" })) } : {}
+		}]);
+		sessionStorage.setItem(`bz_pending_${agentId}`, "1");
+		const abort = new AbortController();
+		currentAbortRef.current = abort;
+		setStreaming(true);
+		setThinking(true);
+		try {
+			const res = await fetch(`/api/agents/${encodeURIComponent(agentId)}/chat`, {
+				method: "POST",
+				headers: { "content-type": "application/json" },
+				body: JSON.stringify({
+					message: text,
+					attachments: atts
+				}),
+				signal: abort.signal
+			});
+			if (!res.ok || !res.body) {
+				let err = res.statusText;
+				try {
+					err = (await res.json()).error || err;
+				} catch {}
+				setLiveEntries((prev) => [...prev, {
+					type: "error",
+					content: `[error] ${err}`
+				}]);
+				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;
+					let frame;
+					try {
+						frame = JSON.parse(line);
+					} catch {
+						continue;
+					}
+					handleFrame(frame);
+				}
+			}
+			if (buffer.trim()) try {
+				handleFrame(JSON.parse(buffer));
+			} catch {}
+			await refreshKnownHead();
+			sessionStorage.removeItem(`bz_pending_${agentId}`);
+		} catch (err) {
+			if (err.name !== "AbortError") setLiveEntries((prev) => [...prev, {
+				type: "error",
+				content: `[network error] ${err.message}`
+			}]);
+			sessionStorage.removeItem(`bz_pending_${agentId}`);
+		} finally {
+			setThinking(false);
+			setStreaming(false);
+			currentAbortRef.current = null;
+		}
+	}, [
+		agentId,
+		editIdx,
+		serverMessages,
+		streaming,
+		attachments
+	]);
+	function handleFrame(frame) {
+		if (frame.kind === "fatal") {
+			setLiveEntries((prev) => [...prev, {
+				type: "error",
+				content: `[fatal] ${frame.error}`
+			}]);
+			return;
+		}
+		if (frame.kind === "done") {
+			setServerMessages(frame.messages);
+			setLiveEntries([]);
+			return;
+		}
+		if (frame.kind !== "event") return;
+		const ev = frame.event;
+		captureScroll();
+		if (ev.type === "user_message") return;
+		if (ev.type === "assistant_delta") {
+			setThinking(false);
+			setLiveEntries((prev) => {
+				const next = [...prev];
+				const last = next[next.length - 1];
+				if (last?.type === "assistant") next[next.length - 1] = {
+					type: "assistant",
+					content: last.content + ev.delta
+				};
+				else next.push({
+					type: "assistant",
+					content: ev.delta
+				});
+				return next;
+			});
+			return;
+		}
+		if (ev.type === "assistant_message") {
+			setThinking(false);
+			setLiveEntries((prev) => {
+				const next = [...prev];
+				if (next[next.length - 1]?.type === "assistant") next[next.length - 1] = {
+					type: "assistant",
+					content: ev.text
+				};
+				else next.push({
+					type: "assistant",
+					content: ev.text
+				});
+				return next;
+			});
+			return;
+		}
+		if (ev.type === "tool_call" || ev.type === "tool_result" || ev.type === "tool_error") {
+			setThinking(ev.type !== "tool_call");
+			const item = ev.type === "tool_call" ? {
+				kind: "call",
+				id: ev.id,
+				name: ev.name,
+				body: ev.arguments
+			} : ev.type === "tool_result" ? {
+				kind: "result",
+				id: ev.id,
+				name: ev.name,
+				body: ev.result
+			} : {
+				kind: "error",
+				id: ev.id,
+				name: ev.name,
+				body: ev.error
+			};
+			const images = ev.type === "tool_result" ? ev.images : void 0;
+			setLiveEntries((prev) => {
+				const next = [...prev];
+				const last = next[next.length - 1];
+				if (last?.type === "tool") next[next.length - 1] = {
+					type: "tool",
+					items: [...last.items, item]
+				};
+				else next.push({
+					type: "tool",
+					items: [item]
+				});
+				if (images && images.length > 0) next.push({
+					type: "images",
+					images
+				});
+				return next;
+			});
+			return;
+		}
+		if (ev.type === "file") {
+			setLiveEntries((prev) => [...prev, {
+				type: "file",
+				name: ev.name,
+				mimeType: ev.mimeType,
+				data: ev.data
+			}]);
+			return;
+		}
+		if (ev.type === "error") setLiveEntries((prev) => [...prev, {
+			type: "error",
+			content: `[error] ${ev.error}`
+		}]);
+	}
+	async function cancel() {
+		try {
+			const res = await fetch(`/api/agents/${encodeURIComponent(agentId)}/cancel`, { method: "POST" });
+			if (res.ok || res.status === 204) return;
+		} catch {}
+		currentAbortRef.current?.abort();
+	}
+	function onKeyDown(e) {
+		if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
+			e.preventDefault();
+			send(input);
+		}
+	}
+	const baseEntries = projectMessages(serverMessages);
+	visibleEntryCountRef.current = baseEntries.length + liveEntries.length;
+	const lastUserIdx = (() => {
+		if (liveEntries.length > 0 || streaming) return -1;
+		for (let i = baseEntries.length - 1; i >= 0; i--) if (baseEntries[i]?.type === "user") return i;
+		return -1;
+	})();
+	const willDropFromIdx = (() => {
+		if (editIdx === null) return -1;
+		let userCount = 0;
+		for (let i = 0; i < baseEntries.length; i++) if (baseEntries[i]?.type === "user") {
+			if (userCount === serverMessages.slice(0, editIdx + 1).filter((m) => m.role === "user").length - 1) return i;
+			userCount++;
+		}
+		return lastUserIdx;
+	})();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative flex h-full flex-col overflow-hidden rounded-[16px] border border-frost bg-snow shadow-baziu-sm",
+		onDragOver,
+		onDragLeave,
+		onDrop,
+		children: [
+			dragging && /* @__PURE__ */ jsx("div", {
+				className: "pointer-events-none absolute inset-0 z-10 flex items-center justify-center rounded-[16px] border-2 border-dashed border-sapphire bg-sapphire-glow/80 text-[0.95em] font-medium text-sapphire-deep",
+				children: "drop images or files to attach"
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-baseline justify-between border-b border-frost px-4 py-2.5",
+				children: [/* @__PURE__ */ jsx("h1", {
+					className: "font-display text-[1.2rem] text-charcoal",
+					children: agentName
+				}), /* @__PURE__ */ jsx("a", {
+					href: `/agents/${agentId}`,
+					className: "text-xs text-mocha-light hover:text-sapphire",
+					children: "settings →"
+				})]
+			}),
+			staleBanner && /* @__PURE__ */ jsxs("div", {
+				className: "mx-5 mt-2 flex items-center gap-2 rounded-md border border-sapphire bg-frost px-4 py-2 text-[0.86em] text-mocha",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "h-2 w-2 flex-none rounded-full bg-sapphire",
+						"aria-hidden": "true"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "flex-1",
+						children: "new activity from another source — reload to see it"
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => window.location.reload(),
+						className: "rounded-sm bg-sapphire px-3 py-1 text-[0.92em] text-snow hover:opacity-90",
+						children: "reload"
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => setStaleBanner(false),
+						className: "px-1 text-mocha-light hover:text-mocha",
+						"aria-label": "dismiss",
+						children: "×"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				ref: messagesRef,
+				onScroll: captureScroll,
+				className: `min-h-[240px] flex-1 overflow-y-auto px-5 py-5 ${editIdx !== null ? "is-editing" : ""}`,
+				children: [
+					baseEntries.length === 0 && liveEntries.length === 0 && systemBubbles.length === 0 && /* @__PURE__ */ jsx("p", {
+						className: "py-12 text-center italic text-fawn",
+						children: "start a conversation…"
+					}),
+					(() => {
+						const out = [];
+						let sysIdx = 0;
+						const flushSysUpTo = (idx) => {
+							while (sysIdx < systemBubbles.length && systemBubbles[sysIdx].afterIdx <= idx) {
+								const sb = systemBubbles[sysIdx];
+								out.push(/* @__PURE__ */ jsx(Bubble, { entry: {
+									type: "system",
+									content: sb.content
+								} }, `y-${sb.id}`));
+								sysIdx++;
+							}
+						};
+						flushSysUpTo(0);
+						for (let i = 0; i < baseEntries.length; i++) {
+							const entry = baseEntries[i];
+							out.push(/* @__PURE__ */ jsx(Bubble, {
+								entry,
+								isLastUser: i === lastUserIdx && editIdx === null,
+								isWillDrop: willDropFromIdx !== -1 && i >= willDropFromIdx,
+								onEdit: enterEditMode
+							}, `s-${i}`));
+							flushSysUpTo(i + 1);
+						}
+						for (let i = 0; i < liveEntries.length; i++) {
+							const entry = liveEntries[i];
+							out.push(/* @__PURE__ */ jsx(Bubble, { entry }, `l-${i}`));
+							flushSysUpTo(baseEntries.length + i + 1);
+						}
+						while (sysIdx < systemBubbles.length) {
+							const sb = systemBubbles[sysIdx];
+							out.push(/* @__PURE__ */ jsx(Bubble, { entry: {
+								type: "system",
+								content: sb.content
+							} }, `y-${sb.id}`));
+							sysIdx++;
+						}
+						return out;
+					})(),
+					thinking && /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2 px-1 py-1 text-[0.85em] text-mocha-light",
+						children: [
+							/* @__PURE__ */ jsx(Dot, {}),
+							/* @__PURE__ */ jsx(Dot, { delay: "0.15s" }),
+							/* @__PURE__ */ jsx(Dot, { delay: "0.3s" }),
+							/* @__PURE__ */ jsx("span", { children: "agent is thinking…" })
+						]
+					})
+				]
+			}),
+			editIdx !== null && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 border-t border-frost bg-sapphire-glow px-5 py-2 text-[0.85em] text-sapphire-deep",
+				children: [/* @__PURE__ */ jsx("span", { children: "editing last message — submit to replace, or" }), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: exitEditMode,
+					className: "ml-auto rounded-sm border border-sapphire-light bg-transparent px-2 py-0.5 text-[0.92em] text-sapphire-deep hover:bg-snow",
+					children: "cancel"
+				})]
+			}),
+			attachments.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: "flex flex-wrap gap-2 border-t border-frost bg-ivory px-5 pt-3",
+				children: attachments.map((a, i) => {
+					const remove = () => setAttachments((prev) => prev.filter((_, j) => j !== i));
+					return isImageMime(a.mimeType) ? /* @__PURE__ */ jsxs("div", {
+						className: "relative",
+						children: [/* @__PURE__ */ jsx("img", {
+							src: `data:${a.mimeType};base64,${a.data}`,
+							alt: "pending attachment",
+							className: "h-16 w-16 rounded-md border border-frost object-cover"
+						}), /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: remove,
+							className: "absolute -right-1.5 -top-1.5 flex h-5 w-5 items-center justify-center rounded-full border border-frost bg-snow text-[0.7em] text-mocha hover:border-sapphire hover:text-sapphire",
+							"aria-label": "remove attachment",
+							children: "✕"
+						})]
+					}, `${a.mimeType}-${i}`) : /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-1.5 rounded-md border border-frost bg-snow px-2 py-1 text-[0.82em] text-mocha",
+						children: [
+							/* @__PURE__ */ jsx("span", { children: "📄" }),
+							/* @__PURE__ */ jsx("span", {
+								className: "max-w-[160px] truncate",
+								children: a.name ?? "file"
+							}),
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: remove,
+								className: "text-[0.85em] text-mocha hover:text-sapphire",
+								"aria-label": "remove attachment",
+								children: "✕"
+							})
+						]
+					}, `${a.name ?? "file"}-${i}`);
+				})
+			}),
+			/* @__PURE__ */ jsxs("form", {
+				className: "flex items-end gap-2 border-t border-frost bg-ivory px-5 py-3",
+				onSubmit: (e) => {
+					e.preventDefault();
+					send(input);
+				},
+				children: [
+					/* @__PURE__ */ jsx("input", {
+						ref: fileInputRef,
+						type: "file",
+						multiple: true,
+						className: "hidden",
+						onChange: (e) => {
+							addFiles(e.target.files);
+							e.target.value = "";
+						}
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => fileInputRef.current?.click(),
+						disabled: streaming,
+						title: "attach images or files",
+						"aria-label": "attach files",
+						className: "rounded-md border-[1.5px] border-frost bg-snow px-3 py-2 text-[1em] text-mocha transition-colors hover:border-sapphire hover:text-sapphire disabled:cursor-not-allowed disabled:opacity-50",
+						children: "📎"
+					}),
+					/* @__PURE__ */ jsx("textarea", {
+						ref: inputRef,
+						rows: 1,
+						value: input,
+						onChange: (e) => setInput(e.target.value),
+						onKeyDown,
+						onPaste,
+						disabled: streaming,
+						placeholder: "say something… (Shift+Enter for newline; paste or 📎 to attach images/files)",
+						autoComplete: "off",
+						className: "max-h-[200px] min-h-[2.4rem] flex-1 resize-none overflow-y-auto rounded-md border-[1.5px] border-frost bg-snow px-3 py-2 text-[0.93em] leading-[1.45] text-chocolate outline-none transition-colors focus:border-sapphire focus:shadow-[0_0_0_3px_var(--color-sapphire-glow)]"
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "submit",
+						disabled: streaming || !input.trim() && attachments.length === 0,
+						className: "rounded-md bg-sapphire px-4 py-2 text-[0.92em] font-semibold text-snow transition-colors hover:bg-sapphire-deep disabled:cursor-not-allowed disabled:opacity-50",
+						children: "send"
+					}),
+					streaming && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: cancel,
+						className: "rounded-md border-[1.5px] border-frost bg-transparent px-3 py-1.5 text-[0.92em] font-medium text-mocha hover:border-sapphire-light hover:bg-sapphire-glow hover:text-sapphire",
+						children: "cancel"
+					})
+				]
+			})
+		]
+	});
+}
+function Bubble({ entry, isLastUser, isWillDrop, onEdit }) {
+	const dropCls = isWillDrop ? "opacity-40 [&_.bubble-content]:line-through" : "";
+	if (entry.type === "user") {
+		if (entry.content.startsWith(INBOX_WAKE_PREFIX)) {
+			const body = entry.content.slice(24);
+			return /* @__PURE__ */ jsxs("div", {
+				className: `my-4 flex flex-col items-end ${dropCls}`,
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "mb-1 text-[0.72em] font-semibold uppercase tracking-wider text-mocha opacity-90",
+					children: "inbox"
+				}), /* @__PURE__ */ jsx("div", {
+					className: "bubble-content max-w-[85%] whitespace-pre-wrap break-words rounded-[14px_14px_4px_14px] border border-fawn border-l-[3px] border-l-mocha-light bg-ivory px-3 py-2 font-mono text-[0.88em] leading-[1.5] text-mocha",
+					children: body
+				})]
+			});
+		}
+		return /* @__PURE__ */ jsxs("div", {
+			className: `group relative my-4 flex flex-col items-end ${dropCls}`,
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: "you"
+				}),
+				entry.images && entry.images.length > 0 && /* @__PURE__ */ jsx("div", {
+					className: "mb-1 flex max-w-[85%] flex-wrap justify-end gap-1",
+					children: entry.images.map((img, i) => /* @__PURE__ */ jsx("img", {
+						src: `data:${img.mimeType};base64,${img.data}`,
+						alt: "attachment",
+						className: "max-h-48 rounded-lg border border-sapphire-light"
+					}, i))
+				}),
+				entry.files && entry.files.length > 0 && /* @__PURE__ */ jsx("div", {
+					className: "mb-1 flex max-w-[85%] flex-wrap justify-end gap-1",
+					children: entry.files.map((f, i) => /* @__PURE__ */ jsxs("span", {
+						className: "flex items-center gap-1 rounded-md border border-sapphire-light bg-sapphire-glow px-2 py-1 text-[0.8em] text-chocolate",
+						children: ["📄 ", /* @__PURE__ */ jsx("span", {
+							className: "max-w-[180px] truncate",
+							children: f.name
+						})]
+					}, i))
+				}),
+				entry.content && /* @__PURE__ */ jsx("div", {
+					className: "bubble-content max-w-[85%] whitespace-pre-wrap break-words rounded-[14px_14px_4px_14px] border border-sapphire-light bg-sapphire-glow px-3 py-2 text-chocolate",
+					children: entry.content
+				}),
+				isLastUser && onEdit && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: onEdit,
+					title: "edit and resend — replaces the last turn",
+					className: "absolute left-1 top-1 rounded-sm border border-fawn bg-ivory px-2 py-0.5 text-[0.78em] font-medium text-mocha opacity-65 transition hover:border-sapphire hover:bg-sapphire-glow hover:text-sapphire hover:opacity-100 group-hover:opacity-100 group-focus-within:opacity-100",
+					children: "edit"
+				})
+			]
+		});
+	}
+	if (entry.type === "assistant") {
+		if (entry.content.startsWith(COMPACTION_REPLAY_PREFIX)) {
+			const summary = entry.content.slice(22).trim();
+			return /* @__PURE__ */ jsx("div", {
+				className: `my-3 border-y border-dashed border-frost py-2 text-[0.85em] italic text-mocha-light ${dropCls}`,
+				children: /* @__PURE__ */ jsxs("details", { children: [/* @__PURE__ */ jsx("summary", {
+					className: "cursor-pointer select-none text-center [&::-webkit-details-marker]:hidden",
+					children: "— conversation summary (click to expand) —"
+				}), /* @__PURE__ */ jsx("div", {
+					className: "md-content mt-2 rounded-sm bg-frost/40 p-2 not-italic",
+					dangerouslySetInnerHTML: { __html: renderMd(summary) }
+				})] })
+			});
+		}
+		if (entry.content.startsWith("[error]") || entry.content.startsWith("[fatal]") || entry.content.startsWith("[network error]")) return /* @__PURE__ */ jsxs("div", {
+			className: `my-4 flex flex-col items-start ${dropCls}`,
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "mb-1 text-[0.72em] font-semibold uppercase tracking-wider text-[#9B3D3D]",
+				children: "error"
+			}), /* @__PURE__ */ jsx("div", {
+				className: "bubble-content rounded-r-sm border-l-[3px] border-l-[#9B3D3D] bg-[rgba(196,135,138,0.06)] py-1 pl-3 pr-2 leading-[1.55]",
+				dangerouslySetInnerHTML: { __html: renderMd(entry.content) }
+			})]
+		});
+		return /* @__PURE__ */ jsxs("div", {
+			className: `my-4 flex flex-col items-start ${dropCls}`,
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: "agent"
+			}), /* @__PURE__ */ jsx("div", {
+				className: "md-content bubble-content w-full leading-[1.55] text-chocolate",
+				dangerouslySetInnerHTML: { __html: renderMd(entry.content) }
+			})]
+		});
+	}
+	if (entry.type === "tool") return /* @__PURE__ */ jsx(ToolGroup, {
+		items: entry.items,
+		dropCls
+	});
+	if (entry.type === "images") return /* @__PURE__ */ jsx("div", {
+		className: `my-2 space-y-2 ${dropCls}`,
+		children: entry.images.map((img, i) => /* @__PURE__ */ jsx("img", {
+			src: `data:${img.mimeType};base64,${img.data}`,
+			alt: "screenshot",
+			className: "block max-w-full rounded-lg border border-fawn"
+		}, i))
+	});
+	if (entry.type === "file") {
+		const isImage = entry.mimeType.startsWith("image/");
+		const href = `data:${entry.mimeType};base64,${entry.data}`;
+		return /* @__PURE__ */ jsxs("div", {
+			className: `my-2 ${dropCls}`,
+			children: [isImage && /* @__PURE__ */ jsx("img", {
+				src: href,
+				alt: entry.name,
+				className: "mb-1 block max-w-full rounded-lg border border-fawn"
+			}), /* @__PURE__ */ jsxs("a", {
+				href,
+				download: entry.name,
+				className: "inline-flex items-center gap-2 rounded-md border border-fawn bg-ivory px-3 py-2 text-[0.88em] text-mocha hover:border-sapphire hover:text-sapphire",
+				children: [
+					/* @__PURE__ */ jsx("span", { children: "📄" }),
+					/* @__PURE__ */ jsx("span", {
+						className: "max-w-[260px] truncate",
+						children: entry.name
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-[0.85em] opacity-70",
+						children: "download"
+					})
+				]
+			})]
+		});
+	}
+	if (entry.type === "system") return /* @__PURE__ */ jsxs("div", {
+		className: `my-3 rounded-r-sm border-l-[3px] border-sapphire bg-sapphire-glow px-3 py-1 font-mono text-[0.88em] text-sapphire-deep ${dropCls}`,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "mr-2 font-semibold uppercase tracking-wider opacity-80",
+			children: "system"
+		}), /* @__PURE__ */ jsx("span", {
+			className: "whitespace-pre-wrap",
+			children: entry.content
+		})]
+	});
+	if (entry.type === "error") return /* @__PURE__ */ jsx("div", {
+		className: `my-3 rounded-r-sm border-l-[3px] border-[#9B3D3D] bg-[rgba(196,135,138,0.08)] px-3 py-1 text-[0.92em] text-[#9B3D3D] ${dropCls}`,
+		children: entry.content
+	});
+	return null;
+}
+function ToolGroup({ items, dropCls }) {
+	const [expanded, setExpanded] = useState(false);
+	const contentRef = useRef(null);
+	const [overflows, setOverflows] = useState(false);
+	useLayoutEffect(() => {
+		const el = contentRef.current;
+		if (!el) return;
+		setOverflows(el.scrollHeight > 324);
+	}, [items.length]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: `my-1.5 rounded-r-sm border-l-[3px] border-fawn bg-ivory px-3 py-2 font-mono text-[0.82em] leading-[1.5] text-mocha-light ${dropCls}`,
+		children: [/* @__PURE__ */ jsxs("div", {
+			ref: contentRef,
+			className: "relative overflow-hidden",
+			style: { maxHeight: expanded ? "none" : `${TOOL_GROUP_MAX_HEIGHT_PX}px` },
+			children: [items.map((it, i) => /* @__PURE__ */ jsx(ToolLine, { item: it }, i)), overflows && !expanded && /* @__PURE__ */ jsx("div", {
+				className: "pointer-events-none absolute inset-x-0 bottom-0 h-10",
+				style: { background: "linear-gradient(to bottom, rgba(247,240,229,0), var(--color-ivory))" }
+			})]
+		}), overflows && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: () => setExpanded((v) => !v),
+			className: "mt-2 rounded-sm border border-fawn bg-transparent px-2 py-0.5 text-[0.9em] text-mocha hover:border-sapphire hover:text-sapphire-deep",
+			children: expanded ? "show less ↑" : "show more ↓"
+		})]
+	});
+}
+function ToolLine({ item }) {
+	if (item.kind === "call") {
+		const args = prettyArgs(item.body);
+		const multiLine = args.includes("\n");
+		return /* @__PURE__ */ jsxs("div", {
+			className: "whitespace-pre-wrap break-words py-0.5",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "mr-1 opacity-45",
+					children: "→"
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "font-medium text-mocha",
+					children: item.name
+				}),
+				multiLine ? /* @__PURE__ */ jsx("pre", {
+					className: "ml-4 mt-0.5 rounded-sm bg-[rgba(42,31,22,0.04)] px-2 py-1 font-mono text-[0.95em] leading-[1.4] text-mocha",
+					children: args
+				}) : args ? /* @__PURE__ */ jsxs("span", { children: [
+					" (",
+					args,
+					")"
+				] }) : null
+			]
+		});
+	}
+	if (item.kind === "error") return /* @__PURE__ */ jsxs("div", {
+		className: "whitespace-pre-wrap break-words py-0.5 text-rose-baziu",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "mr-1 opacity-45",
+			children: "←"
+		}), item.body]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "whitespace-pre-wrap break-words py-0.5",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "mr-1 opacity-45",
+			children: "←"
+		}), item.body]
+	});
+}
+function Dot({ delay = "0s" }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: "inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-mocha-light/60",
+		style: { animationDelay: delay },
+		"aria-hidden": "true"
+	});
+}
+//#endregion
+export { ChatPane as t };