bazilion 0.14.2 → 0.16.0

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

@@ -0,0 +1,2666 @@
+import { t as Button } from "./Button-Dsnw22OF.js";
+import { t as ResultCard } from "./ResultCard-B3zD9N0t.js";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import DOMPurify from "dompurify";
+import { marked } from "marked";
+//#region src/lib/coding-presentation.ts
+/** Presentation only: excerpts are never used for authorization or receipt validity. */
+function codingFailureSummary(diagnostic) {
+	const error = diagnostic.split("\n").map((line) => line.trim()).find((line) => /^(?:[A-Za-z]*Error(?: \[[A-Z_]+\])?:|ERR_[A-Z_]+\b)/.test(line));
+	if (!error) return null;
+	return error.length > 240 ? `${error.slice(0, 237)}…` : error;
+}
+function inboxUpdateLabel(body) {
+	const header = body.split("\n").find((line) => line.startsWith("--- from "));
+	if (!header) return "Teammate update received";
+	const match = /^--- from (.+?) \(message [0-9a-f-]+(?:, reply to [0-9a-f-]+)?\) ---$/.exec(header);
+	if (!match) return "Teammate update received";
+	const name = match[1]?.replace(/ \([0-9a-f-]{36}\)$/, "").trim();
+	if (!name || /^[0-9a-f-]{36}$/.test(name)) return "Teammate update received";
+	return `Update from ${name.slice(0, 100)}`;
+}
+//#endregion
+//#region src/components/CodingToolResult.tsx
+/** Presents only already-authorized chat text; never fetches private receipt records. */
+function CodingToolResult({ name, body, pending = false }) {
+	if (!pending && body === "Coding context or command evidence retained privately. Captured transport output follows its communication approval; ask the Agent for the relevant result.") return /* @__PURE__ */ jsxs("details", {
+		className: "py-1 text-xs font-sans",
+		"aria-label": "Private command details",
+		children: [/* @__PURE__ */ jsx("summary", {
+			className: "cursor-pointer",
+			children: "Detailed output isn’t included in this history view"
+		}), /* @__PURE__ */ jsx("p", {
+			className: "mt-1",
+			children: "The Agent’s summary is shown in the conversation. Ask the Agent to summarize its retained command result if you need more detail."
+		})]
+	});
+	let parsed;
+	try {
+		parsed = JSON.parse(body);
+	} catch {
+		return /* @__PURE__ */ jsx("span", { children: body });
+	}
+	if (!parsed || typeof parsed !== "object") return /* @__PURE__ */ jsx("span", { children: body });
+	if (pending) {
+		const input = parsed;
+		return /* @__PURE__ */ jsxs("p", {
+			className: "py-1 break-words",
+			children: [
+				name === "coding_command" ? "Running" : "Inspecting",
+				":",
+				" ",
+				typeof input.command === "string" ? input.command : typeof input.target === "string" ? input.target : "command evidence"
+			]
+		});
+	}
+	if (name === "repository_context") {
+		const report = parsed;
+		if (!Array.isArray(report.instructions?.files)) return /* @__PURE__ */ jsx("span", { children: body });
+		return /* @__PURE__ */ jsxs("details", {
+			className: "py-1",
+			children: [
+				/* @__PURE__ */ jsxs("summary", {
+					className: "cursor-pointer",
+					children: [
+						"Repository: ",
+						report.target,
+						" ·",
+						" ",
+						report.instructions.state === "complete" ? `${report.instructions.files.length} instruction files` : "instructions unavailable"
+					]
+				}),
+				report.instructions.files.map((file) => /* @__PURE__ */ jsx("p", { children: file.path }, file.path)),
+				/* @__PURE__ */ jsxs("p", { children: [
+					report.commands?.candidates?.length ?? 0,
+					" suggested commands ·",
+					" ",
+					report.git?.state === "available" ? report.git.branch : "Git unavailable"
+				] }),
+				/* @__PURE__ */ jsx("pre", {
+					className: "max-h-64 overflow-auto whitespace-pre-wrap break-words",
+					children: body
+				})
+			]
+		});
+	}
+	if (name === "coding_environment") {
+		const value = parsed;
+		if (typeof value.posture !== "string") return /* @__PURE__ */ jsx("span", { children: body });
+		return /* @__PURE__ */ jsxs("details", {
+			className: "py-1",
+			children: [
+				/* @__PURE__ */ jsxs("summary", {
+					className: "cursor-pointer",
+					children: [
+						"Environment: ",
+						value.posture,
+						" · ",
+						value.cwd
+					]
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "break-all",
+					children: value.imageId ?? "Host runtime"
+				}),
+				Array.isArray(value.restrictions) && value.restrictions.filter((x) => typeof x === "string").map((text) => /* @__PURE__ */ jsx("p", { children: text }, text))
+			]
+		});
+	}
+	const view = parsed;
+	const receipt = name === "coding_receipt" ? view.receipt : parsed;
+	if (!receipt || typeof receipt.state !== "string" || typeof receipt.input?.command !== "string" || typeof receipt.input?.cwd !== "string") return /* @__PURE__ */ jsx("span", { children: body });
+	const failure = receipt.state === "failed" && typeof receipt.diagnostic === "string" ? codingFailureSummary(receipt.diagnostic) : null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "py-2",
+		"aria-label": "Coding command result",
+		children: [
+			/* @__PURE__ */ jsxs("p", {
+				className: "font-sans",
+				children: [
+					/* @__PURE__ */ jsx("strong", {
+						className: receipt.state === "succeeded" ? "text-sapphire-deep" : "text-mocha",
+						children: receipt.state.replaceAll("_", " ")
+					}),
+					" ",
+					"· ",
+					receipt.input.purpose,
+					typeof receipt.exitCode === "number" ? ` · exit ${receipt.exitCode}` : "",
+					name === "coding_receipt" ? ` · ${view.applicability}` : ""
+				]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "whitespace-pre-wrap break-words",
+				children: receipt.input.command
+			}),
+			/* @__PURE__ */ jsxs("p", {
+				className: "text-xs",
+				children: [
+					receipt.input.cwd,
+					" · ",
+					receipt.environment?.posture,
+					" · result at execution time"
+				]
+			}),
+			failure && /* @__PURE__ */ jsx("p", {
+				className: "mt-1 font-sans text-rose-baziu",
+				"aria-label": "Command failure summary",
+				children: failure
+			}),
+			typeof receipt.reason === "string" && /* @__PURE__ */ jsx("p", { children: receipt.reason }),
+			/* @__PURE__ */ jsxs("details", { children: [
+				/* @__PURE__ */ jsx("summary", {
+					className: "cursor-pointer",
+					children: "Output and evidence"
+				}),
+				/* @__PURE__ */ jsx("pre", {
+					className: "max-h-64 overflow-auto whitespace-pre-wrap break-words",
+					children: receipt.diagnostic
+				}),
+				receipt.truncated && /* @__PURE__ */ jsx("p", { children: "Output truncated." }),
+				/* @__PURE__ */ jsxs("p", {
+					className: "break-all",
+					children: ["coding-receipt:", receipt.id]
+				}),
+				receipt.environment?.imageId && /* @__PURE__ */ jsx("p", {
+					className: "break-all",
+					children: receipt.environment.imageId
+				})
+			] })
+		]
+	});
+}
+//#endregion
+//#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, domReady) {
+	if (!text) return "";
+	if (!domReady || typeof window === "undefined") return escapeHtml(text);
+	try {
+		install();
+		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/ConversationLibrary.tsx
+function ConversationLibrary({ agentId, turnBusy, onCreated, renderHistory, initialConversationId }) {
+	const [library, setLibrary] = useState(null);
+	const [offset, setOffset] = useState(0);
+	const [refresh, setRefresh] = useState(0);
+	const [selected, setSelected] = useState(null);
+	const [history, setHistory] = useState(null);
+	const [title, setTitle] = useState("");
+	const [error, setError] = useState("");
+	const [historyError, setHistoryError] = useState("");
+	const [busy, setBusy] = useState(false);
+	const pendingKey = `bazilion:conversation-create:${agentId}`;
+	const pendingCreate = useRef(null);
+	useEffect(() => {
+		try {
+			pendingCreate.current = JSON.parse(sessionStorage.getItem(pendingKey) ?? "null");
+		} catch {
+			pendingCreate.current = null;
+		}
+	}, [pendingKey]);
+	function clearPending() {
+		pendingCreate.current = null;
+		sessionStorage.removeItem(pendingKey);
+	}
+	const base = `/api/agents/${encodeURIComponent(agentId)}/conversations`;
+	useEffect(() => {
+		if (!initialConversationId) return;
+		const controller = new AbortController();
+		fetch(`${base}/${encodeURIComponent(initialConversationId)}`, { signal: controller.signal }).then(async (response) => {
+			if (!response.ok) throw new Error("Retained conversation is unavailable");
+			const body = await response.json();
+			if (!controller.signal.aborted) {
+				setSelected(body.conversation);
+				setTitle(body.conversation.title);
+			}
+		}).catch((error) => {
+			if (!controller.signal.aborted) setError(error.message);
+		});
+		return () => controller.abort();
+	}, [base, initialConversationId]);
+	useEffect(() => {
+		const controller = new AbortController();
+		setLibrary(null);
+		fetch(`${base}?limit=20&offset=${offset}`, { signal: controller.signal }).then(async (response) => {
+			if (!response.ok) throw new Error("Could not load conversations.");
+			const body = await response.json();
+			if (!controller.signal.aborted) setLibrary(body);
+		}).catch((error) => {
+			if (!controller.signal.aborted) setError(error.message);
+		});
+		return () => controller.abort();
+	}, [
+		base,
+		offset,
+		refresh
+	]);
+	useEffect(() => {
+		if (!selected) return;
+		const controller = new AbortController();
+		setHistory(null);
+		setHistoryError("");
+		fetch(`${base}/${encodeURIComponent(selected.id)}`, { signal: controller.signal }).then(async (response) => {
+			if (!response.ok) throw new Error("This conversation history is unavailable. You can still start a new conversation.");
+			const body = await response.json();
+			if (!controller.signal.aborted) setHistory(body.messages);
+		}).catch((error) => {
+			if (!controller.signal.aborted) setHistoryError(error.message);
+		});
+		return () => controller.abort();
+	}, [base, selected?.id]);
+	async function create() {
+		if (!library || busy || turnBusy) return;
+		setBusy(true);
+		setError("");
+		const request = pendingCreate.current ?? {
+			requestId: crypto.randomUUID(),
+			expectedSelection: library.selection
+		};
+		pendingCreate.current = request;
+		try {
+			sessionStorage.setItem(pendingKey, JSON.stringify(request));
+			const response = await fetch(base, {
+				method: "POST",
+				headers: { "content-type": "application/json" },
+				body: JSON.stringify(request)
+			});
+			const body = await response.json();
+			if (!response.ok) {
+				if (response.status === 409 || response.status === 400) clearPending();
+				throw new Error(body.error ?? "Could not create conversation.");
+			}
+			clearPending();
+			setSelected(null);
+			setOffset(0);
+			setRefresh((value) => value + 1);
+			await onCreated();
+		} catch (error) {
+			setError(error instanceof Error ? error.message : "Could not create conversation.");
+		} finally {
+			setBusy(false);
+		}
+	}
+	async function rename() {
+		if (!selected || busy) return;
+		setBusy(true);
+		setError("");
+		try {
+			const response = await fetch(`${base}/${encodeURIComponent(selected.id)}`, {
+				method: "PATCH",
+				headers: { "content-type": "application/json" },
+				body: JSON.stringify({
+					title,
+					expectedTitleRevision: selected.titleRevision
+				})
+			});
+			const body = await response.json();
+			if (!response.ok) throw new Error(body.error ?? "Could not rename conversation.");
+			setSelected(body.conversation);
+			setRefresh((value) => value + 1);
+		} catch (error) {
+			setError(error instanceof Error ? error.message : "Could not rename conversation.");
+		} finally {
+			setBusy(false);
+		}
+	}
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-live": "off",
+		className: "my-3 min-w-0 space-y-4 rounded-lg border border-fawn bg-ivory p-4",
+		"aria-label": "Conversation library",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col items-start gap-3 sm:flex-row sm:items-center sm:justify-between",
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: "m-0 text-lg",
+					children: "Conversations"
+				}), /* @__PURE__ */ jsx(Button, {
+					variant: "primary",
+					disabled: !library || busy || turnBusy,
+					onClick: () => void create(),
+					children: "New conversation"
+				})]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "m-0 text-sm",
+				children: "Starting a new conversation keeps previous history and saved files. Viewing history does not change the active conversation."
+			}),
+			turnBusy && /* @__PURE__ */ jsx("p", {
+				role: "status",
+				children: "Wait for the current turn to finish before starting a new conversation."
+			}),
+			error && /* @__PURE__ */ jsxs("p", {
+				role: "alert",
+				children: [
+					error,
+					" ",
+					/* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						disabled: busy,
+						onClick: () => {
+							setError("");
+							setRefresh((value) => value + 1);
+						},
+						children: "Refresh library"
+					})
+				]
+			}),
+			!library ? /* @__PURE__ */ jsx("p", {
+				role: "status",
+				children: "Loading conversations…"
+			}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+				!library.total && /* @__PURE__ */ jsx("p", { children: "No conversations yet." }),
+				/* @__PURE__ */ jsx("ul", {
+					className: "mt-4 grid list-none gap-2 p-0",
+					children: library.conversations.map((item) => /* @__PURE__ */ jsxs("li", {
+						className: "flex min-w-0 flex-col items-start gap-3 rounded border border-fawn p-3 sm:flex-row sm:items-center sm:justify-between",
+						children: [/* @__PURE__ */ jsxs("span", {
+							className: "flex min-w-0 flex-1 flex-wrap items-center gap-2",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "min-w-0 break-words [overflow-wrap:anywhere]",
+								children: item.title
+							}), item.id === library.selection.conversationId && /* @__PURE__ */ jsx("strong", {
+								className: "shrink-0 rounded-full bg-frost px-2 py-0.5 text-xs",
+								children: "Active"
+							})]
+						}), /* @__PURE__ */ jsxs(Button, {
+							variant: "ghost",
+							className: "max-w-full whitespace-normal break-words text-left sm:max-w-[50%]",
+							disabled: busy,
+							"aria-pressed": selected?.id === item.id,
+							onClick: () => {
+								setSelected(item);
+								setTitle(item.title);
+							},
+							children: ["View ", item.title]
+						})]
+					}, item.id))
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "mt-4 flex flex-wrap items-center gap-2",
+					children: [
+						/* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							disabled: busy || offset === 0,
+							onClick: () => setOffset(Math.max(0, offset - 20)),
+							children: "Previous"
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							disabled: busy || offset + library.conversations.length >= library.total,
+							onClick: () => setOffset(offset + 20),
+							children: "Next"
+						}),
+						/* @__PURE__ */ jsxs("span", {
+							className: "text-sm",
+							children: [library.total, " conversations"]
+						})
+					]
+				})
+			] }),
+			selected && /* @__PURE__ */ jsxs("section", {
+				className: "space-y-4 border-t border-fawn pt-4",
+				"aria-label": "Retained conversation",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "grid min-w-0 grid-cols-2 items-end gap-2 sm:grid-cols-[minmax(0,1fr)_auto_auto]",
+						children: [
+							/* @__PURE__ */ jsxs("label", {
+								className: "col-span-2 m-0 grid min-w-0 gap-2 sm:col-span-1",
+								children: ["Conversation title", /* @__PURE__ */ jsx("input", {
+									className: "h-11",
+									value: title,
+									maxLength: 200,
+									onChange: (event) => setTitle(event.target.value)
+								})]
+							}),
+							/* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								className: "h-11",
+								disabled: busy || !title.trim(),
+								onClick: () => void rename(),
+								children: "Rename"
+							}),
+							/* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								className: "h-11",
+								disabled: busy,
+								onClick: () => setSelected(null),
+								children: "Close history"
+							})
+						]
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "m-0 text-sm",
+						children: "Viewing retained history. New messages still go to the active conversation."
+					}),
+					historyError ? /* @__PURE__ */ jsx("p", {
+						role: "alert",
+						children: historyError
+					}) : history === null ? /* @__PURE__ */ jsx("p", {
+						role: "status",
+						children: "Loading history…"
+					}) : history.length ? renderHistory(history) : /* @__PURE__ */ jsx("p", { children: "This conversation is empty." })
+				]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/lib/queue-journal.ts
+/** Store bytes before submission so a reload can retry the exact same attempt. */
+async function queueJournal(agentId, value, clearRequestId) {
+	return new Promise((resolve, reject) => {
+		const opening = indexedDB.open("bazilion-queue-attempts", 1);
+		opening.onupgradeneeded = () => {
+			opening.result.createObjectStore("requests", { keyPath: "input.requestId" }).createIndex("agentId", "agentId");
+		};
+		opening.onerror = () => reject(/* @__PURE__ */ new Error("Local queue recovery storage is unavailable"));
+		opening.onblocked = () => reject(/* @__PURE__ */ new Error("Close other Bazilion tabs to open queue recovery storage"));
+		opening.onsuccess = () => {
+			const db = opening.result;
+			const tx = db.transaction("requests", value === void 0 ? "readonly" : "readwrite");
+			const store = tx.objectStore("requests");
+			if (value === null && !clearRequestId) {
+				db.close();
+				reject(/* @__PURE__ */ new Error("Queue request identity is required to clear recovery state"));
+				return;
+			}
+			const request = value === void 0 ? store.index("agentId").get(agentId) : value === null ? store.delete(clearRequestId) : store.put(value);
+			tx.oncomplete = () => {
+				db.close();
+				resolve(value === void 0 ? request.result ?? null : value);
+			};
+			tx.onerror = tx.onabort = () => {
+				db.close();
+				reject(/* @__PURE__ */ new Error("Unable to retain queue request locally; it was not acknowledged"));
+			};
+		};
+	});
+}
+//#endregion
+//#region src/components/UserQueuePanel.tsx
+var UserQueuePanel = forwardRef(function UserQueuePanel({ agentId, selection, onQueueMode, onViewConversation }, ref) {
+	const base = `/api/agents/${encodeURIComponent(agentId)}/queue`;
+	const [state, setState] = useState(null);
+	const [error, setError] = useState("");
+	const [notice, setNotice] = useState("");
+	const [busy, setBusy] = useState(false);
+	const [ready, setReady] = useState(false);
+	const readyRef = useRef(false);
+	const [pending, setPending] = useState(null);
+	const pendingRef = useRef(null);
+	const locked = useRef(false);
+	const mounted = useRef(true);
+	const refreshGeneration = useRef(0);
+	useEffect(() => {
+		mounted.current = true;
+		return () => {
+			mounted.current = false;
+		};
+	}, []);
+	const [editing, setEditing] = useState(null);
+	const [text, setText] = useState("");
+	const [editFiles, setEditFiles] = useState([]);
+	const [history, setHistory] = useState(false);
+	const [offset, setOffset] = useState(0);
+	const modeRef = useRef(onQueueMode);
+	modeRef.current = onQueueMode;
+	async function refresh() {
+		const generation = ++refreshGeneration.current;
+		const response = await fetch(`${base}?all=${history ? 1 : 0}&offset=${offset}`);
+		if (!response.ok) throw new Error("Queue could not be loaded");
+		const body = await response.json();
+		const activeResponse = history ? await fetch(base) : null;
+		const active = activeResponse?.ok ? await activeResponse.json() : body;
+		if (mounted.current && generation === refreshGeneration.current) {
+			setState(body);
+			if (readyRef.current) modeRef.current(active.total > 0 || active.control.paused || !!pendingRef.current);
+		}
+		return body;
+	}
+	useEffect(() => {
+		let live = true;
+		queueJournal(agentId).then((value) => {
+			if (live) {
+				pendingRef.current = value;
+				setPending(value);
+				readyRef.current = true;
+				setReady(true);
+				refresh().catch((e) => setError(e.message));
+			}
+		}).catch((e) => {
+			if (live) setError(e.message);
+		});
+		return () => {
+			live = false;
+		};
+	}, [agentId]);
+	useEffect(() => {
+		refresh().catch((e) => setError(e.message));
+		const timer = setInterval(() => {
+			refresh().catch((e) => setError(e.message));
+		}, 2e3);
+		return () => clearInterval(timer);
+	}, [
+		agentId,
+		history,
+		offset
+	]);
+	async function clearPending(record) {
+		await queueJournal(agentId, null, record.input.requestId);
+		const remaining = await queueJournal(agentId);
+		pendingRef.current = remaining;
+		setPending(remaining);
+	}
+	async function submit(record, retry = false) {
+		if (locked.current || !ready) return false;
+		if (pendingRef.current && !retry) {
+			setError("Resolve the unacknowledged queue request before sending another.");
+			return false;
+		}
+		locked.current = true;
+		setBusy(true);
+		setError("");
+		setNotice("");
+		try {
+			await queueJournal(agentId, record);
+			pendingRef.current = record;
+			setPending(record);
+			const response = await fetch(record.replacementId ? `${base}/${encodeURIComponent(record.replacementId)}` : base, {
+				method: record.replacementId ? "PATCH" : "POST",
+				headers: { "content-type": "application/json" },
+				body: JSON.stringify(record.input)
+			});
+			if (!response.ok) {
+				const detail = await response.json().catch(() => ({}));
+				if (response.status >= 400 && response.status < 500) await clearPending(record);
+				throw new Error(detail.error ?? "Queue acknowledgement unavailable; retry this same request.");
+			}
+			const item = await response.json();
+			await clearPending(record);
+			setNotice(`Follow-up ${item.status}.`);
+			setEditing(null);
+			await refresh().catch(() => setError("Input acknowledged; queue display could not refresh."));
+			return true;
+		} catch (e) {
+			setError(e instanceof Error ? e.message : "Queue request failed");
+			return false;
+		} finally {
+			locked.current = false;
+			setBusy(false);
+		}
+	}
+	async function action(path, body, method = "POST") {
+		if (locked.current) return false;
+		locked.current = true;
+		setBusy(true);
+		setError("");
+		try {
+			const response = await fetch(`${base}${path}`, {
+				method,
+				headers: { "content-type": "application/json" },
+				body: JSON.stringify(body)
+			});
+			if (!response.ok) {
+				const detail = await response.json();
+				throw new Error(detail.error ?? "Queue changed; refresh and try again");
+			}
+			await refresh();
+			return true;
+		} catch (e) {
+			setError(e instanceof Error ? e.message : "Queue action failed");
+			await refresh().catch(() => {});
+			return false;
+		} finally {
+			locked.current = false;
+			setBusy(false);
+		}
+	}
+	useImperativeHandle(ref, () => ({
+		async enqueue(message, attachments, expectedSelection) {
+			if (!expectedSelection) {
+				setError("Refresh conversation history before queuing input.");
+				return false;
+			}
+			return submit({
+				agentId,
+				input: {
+					requestId: crypto.randomUUID(),
+					message,
+					attachments,
+					expectedSelection
+				}
+			});
+		},
+		async stop() {
+			if (!state) {
+				setError("Load queue controls before stopping.");
+				return false;
+			}
+			return action("/stop", { expectedRevision: state.control.revision });
+		}
+	}));
+	async function edit(item) {
+		try {
+			const response = await fetch(`${base}/${encodeURIComponent(item.id)}/input`);
+			if (!response.ok) throw new Error("Retained input is unavailable");
+			const input = await response.json();
+			setEditing(item);
+			setText(input.message);
+			setEditFiles(input.attachments);
+		} catch (e) {
+			setError(e instanceof Error ? e.message : "Could not edit");
+		}
+	}
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-label": "Follow-up queue",
+		className: "max-h-[45%] min-w-0 shrink-0 space-y-3 overflow-y-auto border-t border-frost px-5 py-4 text-sm",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between",
+				children: [/* @__PURE__ */ jsxs("strong", {
+					className: "shrink-0",
+					children: ["Follow-ups ", state?.control.paused ? "· Paused" : ""]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-wrap items-center gap-2",
+					children: [
+						state && /* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							disabled: busy,
+							onClick: () => void action("/control", {
+								paused: !state.control.paused,
+								expectedRevision: state.control.revision
+							}),
+							children: state.control.paused ? "Resume queue" : "Pause queue"
+						}),
+						state && /* @__PURE__ */ jsx(Button, {
+							variant: "danger",
+							disabled: busy,
+							onClick: () => void action("/stop", { expectedRevision: state.control.revision }),
+							children: "Stop and pause"
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							onClick: () => {
+								setHistory(!history);
+								setOffset(0);
+							},
+							children: history ? "Pending" : "History"
+						})
+					]
+				})]
+			}),
+			error && /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				className: "m-0 break-words text-danger",
+				children: error
+			}),
+			notice && /* @__PURE__ */ jsx("p", {
+				role: "status",
+				className: "m-0 text-mocha",
+				children: notice
+			}),
+			pending && /* @__PURE__ */ jsxs("div", {
+				role: "status",
+				className: "flex min-w-0 flex-col gap-3 rounded-lg border border-frost bg-ivory p-3",
+				children: [
+					/* @__PURE__ */ jsx("p", { children: "A queue request has no confirmed acknowledgement. Retrying uses the same request and files." }),
+					/* @__PURE__ */ jsx("p", {
+						className: "truncate",
+						children: pending.input.message
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						variant: "primary",
+						disabled: busy,
+						onClick: () => void submit(pending, true),
+						children: "Retry saved request"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "min-w-0 space-y-3",
+				children: [state?.items.map((item) => /* @__PURE__ */ jsxs("article", {
+					className: "flex min-w-0 flex-col gap-3 rounded-lg border border-frost bg-ivory p-3",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex flex-wrap items-center justify-between gap-3",
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "flex flex-wrap items-center gap-2",
+								children: [/* @__PURE__ */ jsx("strong", {
+									className: "rounded-full bg-frost px-2 py-1 text-xs capitalize",
+									children: item.status
+								}), /* @__PURE__ */ jsx("span", {
+									className: "text-xs text-mocha",
+									children: item.source === "telegram" ? "Telegram" : "Web / API"
+								})]
+							}), /* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								onClick: () => onViewConversation(item.conversationId),
+								children: "View conversation"
+							})]
+						}),
+						/* @__PURE__ */ jsx("p", {
+							className: "m-0 whitespace-pre-wrap break-words [overflow-wrap:anywhere]",
+							children: item.text ?? "Input retention expired"
+						}),
+						item.attachments.map((file) => /* @__PURE__ */ jsxs("p", {
+							className: "m-0 break-all text-xs text-mocha",
+							children: [
+								file.name ?? "Attachment",
+								" · ",
+								file.byteLength,
+								" bytes"
+							]
+						}, file.id)),
+						item.diagnostic && /* @__PURE__ */ jsx("p", {
+							className: "m-0 break-words",
+							children: item.diagnostic
+						}),
+						item.approvalId && /* @__PURE__ */ jsx("a", {
+							href: `/approvals`,
+							children: "Review communication approval"
+						}),
+						item.status === "pending" && /* @__PURE__ */ jsxs("div", {
+							className: "flex flex-wrap items-center gap-2",
+							children: [/* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								disabled: busy || !!pending,
+								onClick: () => void edit(item),
+								children: "Edit"
+							}), /* @__PURE__ */ jsx(Button, {
+								variant: "danger",
+								disabled: busy,
+								onClick: () => void action(`/${item.id}`, { expectedRevision: item.revision }, "DELETE"),
+								children: "Remove"
+							})]
+						}),
+						item.status === "uncertain" && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", { children: "This input may already have acted. Review its conversation before closing it. Closing never retries it." }), /* @__PURE__ */ jsx(Button, {
+							variant: "danger",
+							disabled: busy,
+							onClick: () => void action(`/${item.id}/reconcile`, {
+								expectedRevision: item.revision,
+								acknowledged: true
+							}),
+							children: "Acknowledge and close"
+						})] })
+					]
+				}, item.id)), editing && /* @__PURE__ */ jsxs("form", {
+					className: "flex min-w-0 flex-col gap-3 rounded-lg border border-frost bg-ivory p-3",
+					onSubmit: (e) => {
+						e.preventDefault();
+						const expectedSelection = selection();
+						if (expectedSelection) submit({
+							agentId,
+							replacementId: editing.id,
+							input: {
+								requestId: crypto.randomUUID(),
+								expectedRevision: editing.revision,
+								expectedSelection,
+								message: text,
+								attachments: editFiles
+							}
+						});
+					},
+					children: [
+						/* @__PURE__ */ jsxs("label", {
+							className: "m-0 grid gap-2",
+							children: ["Edit queued input", /* @__PURE__ */ jsx("textarea", {
+								"aria-label": "Edit queued input",
+								rows: 3,
+								className: "w-full resize-y",
+								value: text,
+								onChange: (e) => setText(e.target.value)
+							})]
+						}),
+						editFiles.map((file, index) => /* @__PURE__ */ jsxs("div", { children: [
+							file.name ?? "Attachment",
+							" ",
+							/* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								onClick: () => setEditFiles((files) => files.filter((_, i) => i !== index)),
+								children: "Remove attachment"
+							})
+						] }, index)),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex flex-wrap items-center gap-2",
+							children: [/* @__PURE__ */ jsx(Button, {
+								variant: "primary",
+								type: "submit",
+								disabled: busy || !!pending,
+								children: "Save replacement"
+							}), /* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								onClick: () => setEditing(null),
+								children: "Cancel edit"
+							})]
+						})
+					]
+				})]
+			}),
+			state && (offset > 0 || offset + state.items.length < state.total) && /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center gap-2",
+				children: [/* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					disabled: offset === 0,
+					onClick: () => setOffset(Math.max(0, offset - 20)),
+					children: "Previous"
+				}), /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					disabled: offset + state.items.length >= state.total,
+					onClick: () => setOffset(offset + 20),
+					children: "Next"
+				})]
+			})
+		]
+	});
+});
+//#endregion
+//#region src/components/AgentQuestions.tsx
+function AgentQuestions({ agentId }) {
+	const [items, setItems] = useState([]);
+	const [error, setError] = useState("");
+	useEffect(() => {
+		let live = true;
+		let running = false;
+		const refresh = async () => {
+			if (running) return;
+			running = true;
+			try {
+				const response = await fetch(`/api/agents/${encodeURIComponent(agentId)}/questions`, { cache: "no-store" });
+				if (!response.ok) throw new Error("Questions could not be refreshed");
+				const body = await response.json();
+				if (live) {
+					setItems(body.questions);
+					setError("");
+				}
+			} catch (e) {
+				if (live) {
+					setItems([]);
+					setError(e instanceof Error ? e.message : "Questions unavailable");
+				}
+			} finally {
+				running = false;
+			}
+		};
+		refresh();
+		const timer = setInterval(() => {
+			refresh();
+		}, 2e3);
+		return () => {
+			live = false;
+			clearInterval(timer);
+		};
+	}, [agentId]);
+	if (!items.length && !error) return null;
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-label": "Agent questions",
+		className: "max-h-[40vh] min-w-0 shrink-0 space-y-3 overflow-y-auto border-t border-frost px-5 py-3",
+		children: [
+			error && /* @__PURE__ */ jsx("p", {
+				role: "status",
+				children: error
+			}),
+			items.filter((item) => item.status === "pending" || item.continuation === "unconfirmed").map((item) => /* @__PURE__ */ jsx(QuestionCard, { item }, item.id)),
+			items.some((item) => item.status !== "pending" && item.continuation !== "unconfirmed") && /* @__PURE__ */ jsxs("details", { children: [/* @__PURE__ */ jsx("summary", { children: "Recent question outcomes" }), items.filter((item) => item.status !== "pending" && item.continuation !== "unconfirmed").map((item) => /* @__PURE__ */ jsx(QuestionCard, { item }, item.id))] })
+		]
+	});
+}
+function QuestionCard({ item }) {
+	const storageKey = `bazilion-question-answer:${item.agentId}:${item.id}`;
+	const [choice, setChoice] = useState("");
+	const [text, setText] = useState("");
+	const [pending, setPending] = useState(null);
+	const pendingRef = useRef(null);
+	const [ready, setReady] = useState(false);
+	const [busy, setBusy] = useState(false);
+	const locked = useRef(false);
+	const [error, setError] = useState("");
+	const [notice, setNotice] = useState("");
+	useEffect(() => {
+		try {
+			const saved = sessionStorage.getItem(storageKey);
+			if (saved) {
+				const value = JSON.parse(saved);
+				pendingRef.current = value;
+				setPending(value);
+			}
+			setReady(true);
+		} catch {
+			setError("Answer recovery storage is unavailable. Enable session storage before answering.");
+		}
+	}, [storageKey]);
+	useEffect(() => {
+		if (item.status === "pending") return;
+		try {
+			sessionStorage.removeItem(storageKey);
+			pendingRef.current = null;
+			setPending(null);
+		} catch {}
+	}, [item.status, storageKey]);
+	async function submit(answer) {
+		if (locked.current || !ready || item.status !== "pending") return;
+		locked.current = true;
+		setBusy(true);
+		setError("");
+		try {
+			if (!pendingRef.current && !answer) throw new Error("Choose an answer first");
+			const input = pendingRef.current ?? {
+				requestId: crypto.randomUUID(),
+				conversationId: item.conversationId,
+				answer
+			};
+			sessionStorage.setItem(storageKey, JSON.stringify(input));
+			pendingRef.current = input;
+			setPending(input);
+			const response = await fetch(`/api/agents/${encodeURIComponent(item.agentId)}/questions/${encodeURIComponent(item.id)}/answer`, {
+				method: "POST",
+				headers: { "content-type": "application/json" },
+				body: JSON.stringify(input)
+			}).catch(() => {
+				throw new Error("Answer acknowledgement unavailable. Retry the same answer.");
+			});
+			if (!response.ok) {
+				if (response.status === 409 || response.status === 404) throw new Error("This question is no longer answerable. Its outcome will refresh shortly.");
+				throw new Error("Answer acknowledgement unavailable. Retry the same answer.");
+			}
+			if ((await response.json()).kind === "held") setNotice("Answer awaits communication approval. The Agent has not received it.");
+			else {
+				sessionStorage.removeItem(storageKey);
+				setNotice("Answer accepted. Waiting for saved conversation evidence that the Agent consumed it.");
+			}
+		} catch (e) {
+			setError(e instanceof Error ? e.message : "Answer failed");
+		} finally {
+			locked.current = false;
+			setBusy(false);
+		}
+	}
+	const disabled = !ready || busy || !!pending || item.status !== "pending" || !!item.answerApprovalId;
+	return /* @__PURE__ */ jsxs("article", {
+		className: "flex min-w-0 flex-col gap-3 rounded-lg border border-frost bg-ivory p-3",
+		children: [
+			/* @__PURE__ */ jsx("p", {
+				className: "m-0 break-words font-medium",
+				children: item.question.prompt
+			}),
+			/* @__PURE__ */ jsxs("details", {
+				className: "text-xs text-mocha",
+				children: [/* @__PURE__ */ jsxs("summary", {
+					className: "cursor-pointer",
+					children: ["Question details · ", item.status]
+				}), /* @__PURE__ */ jsxs("p", {
+					className: "mt-2 break-all",
+					children: [
+						"Conversation ",
+						item.conversationId,
+						" · ",
+						item.continuation
+					]
+				})]
+			}),
+			item.status === "pending" ? /* @__PURE__ */ jsxs("form", {
+				className: "flex min-w-0 flex-col gap-3",
+				onSubmit: (event) => {
+					event.preventDefault();
+					if (choice === "other") submit({
+						kind: "text",
+						text
+					});
+					else if (choice !== "") submit({
+						kind: "choice",
+						index: Number(choice)
+					});
+				},
+				children: [
+					/* @__PURE__ */ jsxs("fieldset", {
+						disabled,
+						className: "m-0 grid min-w-0 gap-2 border-0 p-0 sm:grid-cols-2",
+						children: [
+							/* @__PURE__ */ jsx("legend", {
+								className: "sr-only",
+								children: "Answer this question"
+							}),
+							item.question.choices.map((option, index) => /* @__PURE__ */ jsxs("label", {
+								className: "m-0 flex min-w-0 cursor-pointer items-center gap-2 rounded-md border border-frost px-3 py-2.5 has-[:checked]:border-sapphire has-[:checked]:bg-sapphire-glow",
+								children: [/* @__PURE__ */ jsx("input", {
+									className: "m-0 h-4 w-4 shrink-0 accent-sapphire",
+									type: "radio",
+									name: `question-${item.id}`,
+									value: index,
+									checked: choice === String(index),
+									onChange: () => setChoice(String(index))
+								}), /* @__PURE__ */ jsxs("span", {
+									className: "min-w-0 break-words [overflow-wrap:anywhere]",
+									children: [
+										option.label,
+										item.question.recommendedIndex === index ? " (Recommended)" : "",
+										option.description && /* @__PURE__ */ jsx("small", {
+											className: "block",
+											children: option.description
+										})
+									]
+								})]
+							}, index)),
+							/* @__PURE__ */ jsxs("label", {
+								className: "m-0 flex min-w-0 cursor-pointer items-center gap-2 rounded-md border border-frost px-3 py-2.5 has-[:checked]:border-sapphire has-[:checked]:bg-sapphire-glow",
+								children: [/* @__PURE__ */ jsx("input", {
+									className: "m-0 h-4 w-4 shrink-0 accent-sapphire",
+									type: "radio",
+									name: `question-${item.id}`,
+									checked: choice === "other",
+									onChange: () => setChoice("other")
+								}), /* @__PURE__ */ jsx("span", { children: "Other" })]
+							}),
+							choice === "other" && /* @__PURE__ */ jsxs("label", {
+								className: "m-0 grid gap-2 sm:col-span-2",
+								children: ["Your answer", /* @__PURE__ */ jsx("textarea", {
+									rows: 2,
+									className: "w-full resize-y",
+									value: text,
+									maxLength: 4096,
+									onChange: (event) => setText(event.target.value)
+								})]
+							})
+						]
+					}),
+					pending && /* @__PURE__ */ jsxs("p", {
+						className: "break-words",
+						children: ["Saved answer: ", pending.answer.kind === "choice" ? item.question.choices[pending.answer.index]?.label : pending.answer.kind === "text" ? pending.answer.text : "Skip"]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex flex-wrap gap-2",
+						children: [
+							/* @__PURE__ */ jsx(Button, {
+								variant: "primary",
+								type: "submit",
+								disabled: disabled || !choice || choice === "other" && (!text.trim() || new TextEncoder().encode(text).length > 4096),
+								children: "Send answer"
+							}),
+							/* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								disabled,
+								onClick: () => {
+									submit({ kind: "skip" });
+								},
+								children: "Skip"
+							}),
+							pending && !item.answerApprovalId && /* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								disabled: busy,
+								onClick: () => {
+									submit();
+								},
+								children: "Retry same answer"
+							})
+						]
+					}),
+					/* @__PURE__ */ jsxs("p", {
+						className: "m-0 text-xs text-mocha",
+						children: [
+							"Clarification does not grant permission. This question expires at ",
+							new Date(item.expiresAt).toLocaleTimeString(),
+							"."
+						]
+					}),
+					item.answerApprovalId && /* @__PURE__ */ jsx("a", {
+						href: "/approvals",
+						children: "View communication approvals"
+					})
+				]
+			}) : /* @__PURE__ */ jsxs("p", { children: [
+				item.answer?.kind === "choice" ? item.question.choices[item.answer.index]?.label : item.answer?.kind === "text" ? item.answer.text : `No answer: ${item.noAnswerReason ?? item.status}`,
+				". ",
+				item.continuation === "consumed" ? "Saved in the originating conversation; task completion is separate." : item.continuation === "interrupted" ? "The waiting turn ended." : "Consumption has not been confirmed."
+			] }),
+			notice && /* @__PURE__ */ jsx("p", {
+				role: "status",
+				children: notice
+			}),
+			error && /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				children: error
+			})
+		]
+	});
+}
+//#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 subscribeToHydration = () => () => {};
+var browserMarkdownReady = () => true;
+var serverMarkdownReady = () => false;
+/** Keep one inline card per ephemeral shell approval while preserving its first position. */
+function upsertCommandApprovalEntry(entries, approval) {
+	const index = entries.findIndex((entry) => entry.type === "command_approval" && entry.approval.id === approval.id);
+	if (index === -1) return [...entries, {
+		type: "command_approval",
+		approval
+	}];
+	const next = [...entries];
+	next[index] = {
+		type: "command_approval",
+		approval
+	};
+	return next;
+}
+function interactiveChatRequest(message, attachments) {
+	return {
+		message,
+		attachments,
+		bashApprovalMode: "interactive",
+		questionMode: "web"
+	};
+}
+function shellApprovalsUrl(agentId) {
+	return `/api/shell-approvals?agentId=${encodeURIComponent(agentId)}`;
+}
+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  /new               — open the retained conversation library\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.result) {
+			entries.push({
+				type: "result",
+				resultId: m.result.resultId
+			});
+			openTool = null;
+		}
+		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 markdownReady = useSyncExternalStore(subscribeToHydration, browserMarkdownReady, serverMarkdownReady);
+	const [serverMessages, setServerMessages] = useState(initialMessages);
+	const [liveEntries, setLiveEntries] = useState([]);
+	const deliveredCoding = useRef(/* @__PURE__ */ new Map());
+	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 [recoveredTurn, setRecoveredTurn] = useState(false);
+	const [approvalBusy, setApprovalBusy] = useState({});
+	const [approvalErrors, setApprovalErrors] = useState({});
+	const [libraryOpen, setLibraryOpen] = useState(false);
+	const [queueConversation, setQueueConversation] = useState();
+	const [queueMode, setQueueMode] = useState(false);
+	const [queueReady, setQueueReady] = useState(false);
+	const queueRef = useRef(null);
+	const [historyUnavailable, setHistoryUnavailable] = useState(initialSessionHead?.unavailable ?? false);
+	const messagesRef = useRef(null);
+	const fileInputRef = useRef(null);
+	const inputRef = useRef(null);
+	const currentAbortRef = useRef(null);
+	const currentAgentIdRef = useRef(agentId);
+	const commandApprovalTurnRef = useRef(false);
+	currentAgentIdRef.current = agentId;
+	const systemIdRef = useRef(0);
+	const visibleEntryCountRef = useRef(0);
+	const knownHeadRef = useRef(initialSessionHead ?? {
+		file: null,
+		size: 0
+	});
+	const streamingRef = useRef(false);
+	streamingRef.current = streaming;
+	const turnBusy = streaming || recoveredTurn;
+	useEffect(() => {
+		currentAbortRef.current?.abort();
+		currentAbortRef.current = null;
+		commandApprovalTurnRef.current = false;
+		deliveredCoding.current.clear();
+		setServerMessages(initialMessages);
+		setLiveEntries([]);
+		setSystemBubbles([]);
+		setEditIdx(null);
+		setInput("");
+		setQueueReady(false);
+		setAttachments([]);
+		setHistoryUnavailable(initialSessionHead?.unavailable ?? false);
+		setThinking(false);
+		setStreaming(false);
+		setStaleBanner(false);
+		setRecoveredTurn(false);
+		setApprovalBusy({});
+		setApprovalErrors({});
+		knownHeadRef.current = initialSessionHead ?? {
+			file: null,
+			size: 0
+		};
+	}, [agentId]);
+	useEffect(() => {
+		const controller = new AbortController();
+		let stopped = false;
+		async function recoverPendingCommandApprovals() {
+			try {
+				const response = await fetch(shellApprovalsUrl(agentId), { signal: controller.signal });
+				if (!response.ok) return;
+				const pending = (await response.json()).approvals.filter((approval) => approval.agentId === agentId && approval.status === "pending");
+				if (stopped || pending.length === 0) return;
+				sessionStorage.removeItem(`bz_pending_${agentId}`);
+				commandApprovalTurnRef.current = true;
+				setLiveEntries((entries) => pending.reduce(upsertCommandApprovalEntry, entries));
+				setRecoveredTurn(true);
+			} catch (error) {
+				if (error.name === "AbortError") return;
+			}
+		}
+		recoverPendingCommandApprovals();
+		return () => {
+			stopped = true;
+			controller.abort();
+		};
+	}, [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);
+				setStaleBanner(true);
+			}
+		}
+		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.unavailable !== known.unavailable || 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 refreshConversationHistory() {
+		if (streamingRef.current) return;
+		try {
+			const response = await fetch(`/api/agents/${encodeURIComponent(agentId)}/sessions/messages`);
+			if (!response.ok) throw new Error("Conversation history is unavailable. Your draft is preserved.");
+			const body = await response.json();
+			if (currentAgentIdRef.current !== agentId) return;
+			setHistoryUnavailable(body.head.unavailable ?? false);
+			setServerMessages(body.messages);
+			setLiveEntries([]);
+			setEditIdx(null);
+			knownHeadRef.current = body.head;
+			setStaleBanner(false);
+		} catch (error) {
+			pushSystem(error instanceof Error ? error.message : "Could not refresh conversation");
+		}
+	}
+	async function refreshKnownHead() {
+		if (currentAgentIdRef.current !== agentId) return;
+		try {
+			const res = await fetch(`/api/agents/${encodeURIComponent(agentId)}/sessions/head`);
+			if (!res.ok) return;
+			const body = await res.json();
+			if (currentAgentIdRef.current === agentId && typeof body.size === "number") {
+				const prior = knownHeadRef.current.selection;
+				if (prior?.conversationId && prior.conversationId !== body.selection?.conversationId) {
+					setStaleBanner(true);
+					return;
+				}
+				setHistoryUnavailable(body.unavailable ?? false);
+				knownHeadRef.current = body;
+			}
+		} 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 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,
+					expectedSelection: knownHeadRef.current.selection
+				})
+			});
+			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 "/new":
+				setLibraryOpen(true);
+				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 || turnBusy) 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 (!Array.from(e.dataTransfer.types).includes("Files")) return;
+		e.preventDefault();
+		setDragging(true);
+	}
+	function onDragLeave(e) {
+		if (e.currentTarget === e.target) setDragging(false);
+	}
+	function onDrop(e) {
+		if (e.dataTransfer.files.length === 0) return;
+		e.preventDefault();
+		setDragging(false);
+		addFiles(e.dataTransfer.files);
+	}
+	const send = useCallback(async (text) => {
+		const atts = attachments;
+		if (!text.trim() && atts.length === 0) return;
+		if (!queueReady) {
+			pushSystem("Queue status is loading. Your draft is preserved.");
+			return;
+		}
+		if (turnBusy || queueMode) {
+			if (await queueRef.current?.enqueue(text, atts, knownHeadRef.current.selection) && currentAgentIdRef.current === agentId) {
+				setInput((current) => current === text ? "" : current);
+				setAttachments((current) => current === atts ? [] : current);
+			}
+			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,
+						expectedSelection: knownHeadRef.current.selection
+					})
+				});
+				if (!res.ok) {
+					let err = res.statusText;
+					try {
+						err = (await res.json()).error || err;
+					} catch {}
+					setInput(text);
+					pushSystem(`Could not replace the last turn: ${err}`);
+					return;
+				}
+				truncatedServerMessages = serverMessages.slice(0, keep);
+				setServerMessages(truncatedServerMessages);
+				setEditIdx(null);
+			} catch (err) {
+				setInput(text);
+				pushSystem(`Could not replace the 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" })) } : {}
+		}]);
+		setRecoveredTurn(false);
+		setApprovalBusy({});
+		setApprovalErrors({});
+		commandApprovalTurnRef.current = false;
+		sessionStorage.setItem(`bz_pending_${agentId}`, "1");
+		const abort = new AbortController();
+		currentAbortRef.current = abort;
+		setStreaming(true);
+		setThinking(true);
+		let terminalFrameReceived = false;
+		try {
+			const res = await fetch(`/api/agents/${encodeURIComponent(agentId)}/chat`, {
+				method: "POST",
+				headers: { "content-type": "application/json" },
+				body: JSON.stringify({
+					...interactiveChatRequest(text, atts),
+					expectedSelection: knownHeadRef.current.selection
+				}),
+				signal: abort.signal
+			});
+			if (res.status === 202) {
+				const pending = await res.json();
+				setLiveEntries((prev) => [...prev, {
+					type: "error",
+					content: `[approval pending] ${pending.approvalId} · expires ${new Date(pending.expiresAt).toLocaleString()} · review in /approvals`
+				}]);
+				sessionStorage.removeItem(`bz_pending_${agentId}`);
+				return;
+			}
+			if (res.status === 409) {
+				setInput(text);
+				setAttachments(atts);
+				setLiveEntries([]);
+				setStaleBanner(true);
+				sessionStorage.removeItem(`bz_pending_${agentId}`);
+				pushSystem("Conversation changed. Refresh history, then review and send your preserved draft.");
+				return;
+			}
+			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 admittedSelection = res.headers.get("x-bazilion-conversation-selection");
+			if (admittedSelection) try {
+				const selection = JSON.parse(admittedSelection);
+				if (typeof selection.conversationId === "string" && Number.isSafeInteger(selection.revision) && selection.revision >= 0) knownHeadRef.current = {
+					...knownHeadRef.current,
+					selection
+				};
+			} catch {}
+			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;
+					}
+					if (frame.kind === "done" || frame.kind === "fatal") terminalFrameReceived = true;
+					handleFrame(frame);
+				}
+			}
+			if (buffer.trim()) try {
+				const frame = JSON.parse(buffer);
+				if (frame.kind === "done" || frame.kind === "fatal") terminalFrameReceived = true;
+				handleFrame(frame);
+			} 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 {
+			if (currentAgentIdRef.current === agentId && currentAbortRef.current === abort) {
+				if (!terminalFrameReceived && commandApprovalTurnRef.current) setRecoveredTurn(true);
+				setThinking(false);
+				setStreaming(false);
+				currentAbortRef.current = null;
+			}
+		}
+	}, [
+		agentId,
+		editIdx,
+		serverMessages,
+		turnBusy,
+		queueMode,
+		queueReady,
+		attachments
+	]);
+	function handleFrame(frame) {
+		if (currentAgentIdRef.current !== agentId) return;
+		if (frame.kind === "fatal") {
+			commandApprovalTurnRef.current = false;
+			setLiveEntries((prev) => [...prev.map((entry) => entry.type === "command_approval" && entry.approval.status === "pending" ? {
+				type: "command_approval",
+				approval: {
+					...entry.approval,
+					status: "cancelled"
+				}
+			} : entry), {
+				type: "error",
+				content: `[fatal] ${frame.error}`
+			}]);
+			setRecoveredTurn(false);
+			return;
+		}
+		if (frame.kind === "done") {
+			commandApprovalTurnRef.current = false;
+			setServerMessages(frame.messages);
+			setLiveEntries([]);
+			setRecoveredTurn(false);
+			setApprovalBusy({});
+			setApprovalErrors({});
+			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 === "command_approval") {
+			if (ev.approval.agentId !== agentId) return;
+			commandApprovalTurnRef.current = true;
+			setThinking(ev.approval.status !== "pending" && ev.approval.status !== "cancelled");
+			setLiveEntries((entries) => upsertCommandApprovalEntry(entries, ev.approval));
+			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
+			};
+			if (ev.type === "tool_result" && [
+				"repository_context",
+				"coding_environment",
+				"coding_command",
+				"coding_receipt"
+			].includes(ev.name)) {
+				deliveredCoding.current.set(`${ev.name}:${ev.id}`, ev.result);
+				while (deliveredCoding.current.size > 20) deliveredCoding.current.delete(deliveredCoding.current.keys().next().value);
+			}
+			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") {
+			if (ev.result) {
+				const resultId = ev.result.resultId;
+				setLiveEntries((prev) => [...prev, {
+					type: "result",
+					resultId
+				}]);
+				return;
+			}
+			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 reconcileCommandApproval(approvalId) {
+		if (currentAgentIdRef.current !== agentId) return null;
+		try {
+			const response = await fetch(shellApprovalsUrl(agentId));
+			if (!response.ok) return null;
+			const body = await response.json();
+			if (currentAgentIdRef.current !== agentId) return null;
+			const approval = body.approvals.find((item) => item.id === approvalId && item.agentId === agentId);
+			if (approval) setLiveEntries((entries) => upsertCommandApprovalEntry(entries, approval));
+			return approval ?? null;
+		} catch {
+			return null;
+		}
+	}
+	async function decideCommandApproval(approval, decision) {
+		if (approval.agentId !== agentId || approval.status !== "pending") return;
+		setApprovalBusy((current) => ({
+			...current,
+			[approval.id]: true
+		}));
+		setApprovalErrors((current) => {
+			const next = { ...current };
+			delete next[approval.id];
+			return next;
+		});
+		try {
+			const response = await fetch(`/api/shell-approvals/${encodeURIComponent(approval.id)}`, {
+				method: "POST",
+				headers: { "content-type": "application/json" },
+				body: JSON.stringify({ decision })
+			});
+			const body = await response.json().catch(() => null);
+			if (currentAgentIdRef.current !== agentId) return;
+			if (body?.approval?.agentId === agentId) setLiveEntries((entries) => upsertCommandApprovalEntry(entries, body.approval));
+			if (!response.ok) {
+				const message = body?.error ?? `Decision failed (${response.status})`;
+				const terminalStatus = commandApprovalStatusFromConflict(message);
+				if (terminalStatus) {
+					setLiveEntries((entries) => upsertCommandApprovalEntry(entries, {
+						...approval,
+						status: terminalStatus
+					}));
+					return;
+				}
+				throw new Error(message);
+			}
+		} catch (error) {
+			const reconciled = await reconcileCommandApproval(approval.id);
+			if (currentAgentIdRef.current !== agentId) return;
+			if (!reconciled || reconciled.status === "pending") setApprovalErrors((current) => ({
+				...current,
+				[approval.id]: error instanceof Error ? error.message : String(error)
+			}));
+		} finally {
+			if (currentAgentIdRef.current === agentId) setApprovalBusy((current) => ({
+				...current,
+				[approval.id]: false
+			}));
+		}
+	}
+	async function cancel() {
+		if (!await queueRef.current?.stop() && currentAgentIdRef.current === agentId) pushSystem("Stop was not confirmed. Check queue controls and try again; the active response may still be running.");
+	}
+	function onKeyDown(e) {
+		if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
+			e.preventDefault();
+			send(input);
+		}
+	}
+	const baseEntries = projectMessages(serverMessages.map((message) => {
+		if (message.role !== "tool" || !message.toolCallId || !message.toolName) return message;
+		const body = deliveredCoding.current.get(`${message.toolName}:${message.toolCallId}`);
+		return body === void 0 ? message : {
+			...message,
+			content: body
+		};
+	}));
+	visibleEntryCountRef.current = baseEntries.length + liveEntries.length;
+	const lastUserIdx = (() => {
+		if (liveEntries.length > 0 || turnBusy) 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-center justify-between gap-3 border-b border-frost px-4 py-2.5",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 items-center gap-2",
+					children: [/* @__PURE__ */ jsx("a", {
+						href: "/",
+						className: "inline-flex h-7 items-center rounded-md border border-frost px-2 text-xs font-semibold text-mocha lg:hidden",
+						children: "← agents"
+					}), /* @__PURE__ */ jsx("h1", {
+						className: "truncate font-display text-[1.2rem] text-charcoal",
+						children: agentName
+					})]
+				}), /* @__PURE__ */ jsx("a", {
+					href: `/agents/${agentId}?mode=settings`,
+					className: "shrink-0 text-xs text-mocha-light hover:text-sapphire",
+					children: "Manage agent →"
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "mx-5 mt-2",
+				children: /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					"aria-expanded": libraryOpen,
+					onClick: () => setLibraryOpen((value) => !value),
+					children: libraryOpen ? "Close conversations" : "Conversations"
+				})
+			}),
+			historyUnavailable && /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				className: "mx-5 mt-2 text-sm",
+				children: "Selected conversation history is unavailable. Open Conversations to start a new one; retained history and files stay listed."
+			}),
+			staleBanner && /* @__PURE__ */ jsxs("div", {
+				role: "status",
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				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: recoveredTurn ? "the recovered turn has new activity — reload to see it" : "new activity from another source — reload to see it"
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => void refreshConversationHistory(),
+						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,
+				role: "log",
+				"aria-label": `Conversation with ${agentName}`,
+				"aria-live": "polite",
+				"aria-relevant": "additions",
+				"aria-busy": turnBusy,
+				className: `min-h-0 flex-1 overflow-y-auto px-5 py-5 ${editIdx !== null ? "is-editing" : ""}`,
+				children: [
+					libraryOpen && /* @__PURE__ */ jsx(ConversationLibrary, {
+						initialConversationId: queueConversation,
+						agentId,
+						turnBusy,
+						onCreated: refreshConversationHistory,
+						renderHistory: (messages) => /* @__PURE__ */ jsx(ResultTranscript, { messages })
+					}, agentId),
+					!historyUnavailable && baseEntries.length === 0 && liveEntries.length === 0 && systemBubbles.length === 0 && /* @__PURE__ */ jsx("p", {
+						className: "py-12 text-center italic text-mocha-light",
+						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
+									},
+									markdownReady,
+									onCommandApprovalDecision: decideCommandApproval
+								}, `y-${sb.id}`));
+								sysIdx++;
+							}
+						};
+						flushSysUpTo(0);
+						for (let i = 0; i < baseEntries.length; i++) {
+							const entry = baseEntries[i];
+							out.push(/* @__PURE__ */ jsx(Bubble, {
+								entry,
+								markdownReady,
+								isLastUser: i === lastUserIdx && editIdx === null,
+								isWillDrop: willDropFromIdx !== -1 && i >= willDropFromIdx,
+								onEdit: enterEditMode,
+								onCommandApprovalDecision: decideCommandApproval,
+								commandApprovalBusy: entry.type === "command_approval" && Boolean(approvalBusy[entry.approval.id]),
+								commandApprovalError: entry.type === "command_approval" ? approvalErrors[entry.approval.id] : void 0
+							}, `s-${i}`));
+							flushSysUpTo(i + 1);
+						}
+						for (let i = 0; i < liveEntries.length; i++) {
+							const entry = liveEntries[i];
+							out.push(/* @__PURE__ */ jsx(Bubble, {
+								entry,
+								markdownReady,
+								onCommandApprovalDecision: decideCommandApproval,
+								commandApprovalBusy: entry.type === "command_approval" && Boolean(approvalBusy[entry.approval.id]),
+								commandApprovalError: entry.type === "command_approval" ? approvalErrors[entry.approval.id] : void 0
+							}, `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
+								},
+								markdownReady,
+								onCommandApprovalDecision: decideCommandApproval
+							}, `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…" })
+						]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "sr-only",
+				role: "status",
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				children: turnBusy ? `${agentName} is responding.` : "Conversation ready."
+			}),
+			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 max-h-24 shrink-0 flex-wrap gap-2 overflow-y-auto 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__ */ jsx(UserQueuePanel, {
+				onViewConversation: (id) => {
+					setQueueConversation(id);
+					setLibraryOpen(true);
+				},
+				ref: queueRef,
+				agentId,
+				selection: () => knownHeadRef.current.selection,
+				onQueueMode: (mode) => {
+					setQueueMode(mode);
+					setQueueReady(true);
+				}
+			}, agentId),
+			/* @__PURE__ */ jsx(AgentQuestions, { agentId }, `questions-${agentId}`),
+			/* @__PURE__ */ jsxs("form", {
+				className: "grid shrink-0 grid-cols-[auto_minmax(0,1fr)] items-end gap-2 border-t border-frost bg-ivory px-3 py-3 sm:grid-cols-[auto_minmax(0,1fr)_auto] sm:px-5",
+				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(),
+						title: "attach images or files",
+						"aria-label": "attach files",
+						className: "flex h-11 items-center justify-center 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,
+						placeholder: "Write a message…",
+						title: "Shift+Enter for a new line. Paste or attach files with the paperclip.",
+						autoComplete: "off",
+						"aria-label": `Message ${agentName}`,
+						className: "max-h-[200px] min-h-11 min-w-0 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__ */ jsxs("div", {
+						className: "col-span-2 flex flex-wrap justify-end gap-2 sm:col-span-1",
+						children: [/* @__PURE__ */ jsx(Button, {
+							variant: "primary",
+							type: "submit",
+							className: "min-h-11 whitespace-normal text-center",
+							disabled: !input.trim() && attachments.length === 0,
+							children: turnBusy || queueMode ? "Queue follow-up" : "Send"
+						}), turnBusy && /* @__PURE__ */ jsx(Button, {
+							variant: "danger",
+							className: "min-h-11",
+							onClick: () => void cancel(),
+							"aria-label": "Stop response and pause queue",
+							children: "Stop"
+						})]
+					})
+				]
+			})
+		]
+	});
+}
+function Bubble({ entry, markdownReady, isLastUser, isWillDrop, onEdit, onCommandApprovalDecision, commandApprovalBusy, commandApprovalError }) {
+	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("details", {
+				className: `my-3 rounded-lg border border-fawn bg-ivory px-3 py-2 text-sm text-mocha ${dropCls}`,
+				"aria-label": "Teammate update",
+				children: [
+					/* @__PURE__ */ jsx("summary", {
+						className: "cursor-pointer font-medium",
+						children: inboxUpdateLabel(body)
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "mt-2 text-xs",
+						children: "Original message and Agent instructions"
+					}),
+					/* @__PURE__ */ jsx("pre", {
+						className: "mt-1 max-h-64 overflow-auto whitespace-pre-wrap break-words text-xs",
+						children: body
+					})
+				]
+			});
+		}
+		return /* @__PURE__ */ jsxs("div", {
+			className: `team 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 team-hover:opacity-100 team-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, markdownReady) }
+				})] })
+			});
+		}
+		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-danger",
+				children: "error"
+			}), /* @__PURE__ */ jsx("div", {
+				className: "bubble-content rounded-r-sm border-l-[3px] border-l-danger bg-danger/10 py-1 pl-3 pr-2 leading-[1.55]",
+				dangerouslySetInnerHTML: { __html: renderMd(entry.content, markdownReady) }
+			})]
+		});
+		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, markdownReady) }
+			})]
+		});
+	}
+	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 === "result") return /* @__PURE__ */ jsx(ResultCard, { resultId: entry.resultId });
+	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 === "command_approval") return /* @__PURE__ */ jsx(CommandApprovalCard, {
+		approval: entry.approval,
+		busy: commandApprovalBusy,
+		error: commandApprovalError,
+		onDecision: onCommandApprovalDecision
+	});
+	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-danger bg-danger/10 px-3 py-1 text-[0.92em] text-danger ${dropCls}`,
+		children: entry.content
+	});
+	return null;
+}
+function CommandApprovalCard({ approval, busy = false, error, onDecision }) {
+	const pending = approval.status === "pending";
+	return /* @__PURE__ */ jsxs("section", {
+		className: "my-3 rounded-lg border border-danger/50 bg-danger/5 p-4 text-chocolate",
+		"aria-label": "Shell command approval",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-start justify-between gap-2",
+				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+					className: "m-0 text-[0.72em] font-semibold uppercase tracking-wider text-danger",
+					children: "Shell command approval"
+				}), /* @__PURE__ */ jsx("h2", {
+					className: "m-0 mt-1 font-body text-[0.95em] font-semibold",
+					children: pending ? "A risky command is waiting for you" : "Command decision recorded"
+				})] }), /* @__PURE__ */ jsx("span", {
+					className: "rounded-full border border-danger/30 px-2 py-0.5 text-[0.75em] font-semibold uppercase tracking-wide text-danger",
+					children: approval.status.replaceAll("_", " ")
+				})]
+			}),
+			/* @__PURE__ */ jsx("pre", {
+				className: "mt-3 max-h-48 overflow-auto whitespace-pre-wrap break-words rounded-md border border-fawn bg-snow p-3 font-mono text-[0.82em] leading-[1.45] text-charcoal",
+				children: approval.command
+			}),
+			/* @__PURE__ */ jsx("ul", {
+				className: "mt-3 space-y-1.5 pl-5 text-[0.84em] leading-[1.4] text-mocha",
+				children: approval.risks.map((risk) => /* @__PURE__ */ jsxs("li", { children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "font-medium text-chocolate",
+						children: risk.message
+					}),
+					" ",
+					/* @__PURE__ */ jsx("code", {
+						className: "text-[0.9em]",
+						children: risk.code
+					})
+				] }, `${risk.code}:${risk.span.start}:${risk.span.end}`))
+			}),
+			pending ? /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsxs("p", {
+					className: "mt-3 text-[0.78em] text-mocha-light",
+					children: [
+						"This approval expires",
+						" ",
+						/* @__PURE__ */ jsx("time", {
+							dateTime: new Date(approval.expiresAt).toISOString(),
+							children: new Date(approval.expiresAt).toLocaleString()
+						}),
+						". Deny blocks only this command; cancel stops the whole turn."
+					]
+				}),
+				error && /* @__PURE__ */ jsx("p", {
+					role: "alert",
+					className: "mt-2 rounded-md bg-danger/10 px-3 py-2 text-[0.82em] text-danger",
+					children: error
+				}),
+				onDecision && /* @__PURE__ */ jsxs("div", {
+					className: "mt-3 flex flex-wrap gap-2",
+					children: [/* @__PURE__ */ jsx(Button, {
+						variant: "primary",
+						disabled: busy,
+						onClick: () => onDecision(approval, "deny"),
+						children: "Deny"
+					}), /* @__PURE__ */ jsx(Button, {
+						variant: "danger",
+						disabled: busy,
+						onClick: () => onDecision(approval, "allow"),
+						children: "Allow once"
+					})]
+				})
+			] }) : /* @__PURE__ */ jsx("p", {
+				role: "status",
+				className: "mt-3 text-[0.84em] font-medium text-mocha",
+				children: commandApprovalStatusCopy(approval.status)
+			})
+		]
+	});
+}
+function commandApprovalStatusCopy(status) {
+	switch (status) {
+		case "pending": return "Waiting for a decision.";
+		case "allowed": return "Allowed once — the command may run for this tool call only.";
+		case "denied": return "Denied — the command was not run.";
+		case "auto_denied": return "Automatically denied — no interactive approval path was available.";
+		case "expired": return "Expired — the command was not run.";
+		case "cancelled": return "Cancelled — the command was not run.";
+	}
+}
+function commandApprovalStatusFromConflict(message) {
+	if (!message.startsWith("shell approval already decided: ")) return null;
+	const status = message.slice(32);
+	switch (status) {
+		case "allowed":
+		case "denied":
+		case "auto_denied":
+		case "expired":
+		case "cancelled": return status;
+		default: return null;
+	}
+}
+function ToolGroup({ items, dropCls }) {
+	const codingNames = [
+		"repository_context",
+		"coding_command",
+		"coding_environment",
+		"coding_receipt",
+		"send_message"
+	];
+	const hasCoding = items.some((item) => codingNames.includes(item.name));
+	const visibleItems = items.filter((item) => !(item.kind === "call" && codingNames.includes(item.name) && items.some((other) => other.id === item.id && other.kind !== "call")));
+	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 || hasCoding ? "none" : `${TOOL_GROUP_MAX_HEIGHT_PX}px` },
+			children: [visibleItems.map((it, i) => /* @__PURE__ */ jsx(ToolLine, { item: it }, i)), overflows && !expanded && !hasCoding && /* @__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 && !hasCoding && /* @__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.name === "send_message" && item.kind !== "error") return /* @__PURE__ */ jsxs("details", {
+		className: "py-1 font-sans text-sm",
+		children: [/* @__PURE__ */ jsx("summary", {
+			className: "cursor-pointer",
+			children: item.kind === "call" ? "Sending teammate message…" : item.body.startsWith("sent message ") ? "Teammate message sent" : "Teammate message status"
+		}), /* @__PURE__ */ jsx("pre", {
+			className: "mt-1 max-h-64 overflow-auto whitespace-pre-wrap break-words text-xs",
+			children: item.body
+		})]
+	});
+	if (item.kind !== "error" && [
+		"repository_context",
+		"coding_command",
+		"coding_environment",
+		"coding_receipt"
+	].includes(item.name)) return /* @__PURE__ */ jsx(CodingToolResult, {
+		name: item.name,
+		body: item.body,
+		pending: item.kind === "call"
+	});
+	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"
+	});
+}
+/** Read-only projection used when opening the exact available source of a saved result. */
+function ResultTranscript({ messages }) {
+	const markdownReady = useSyncExternalStore(subscribeToHydration, browserMarkdownReady, serverMarkdownReady);
+	return /* @__PURE__ */ jsx("div", {
+		"aria-label": "Source conversation",
+		children: projectMessages(messages).map((entry, index) => /* @__PURE__ */ jsx(Bubble, {
+			entry,
+			markdownReady
+		}, index))
+	});
+}
+//#endregion
+export { ResultTranscript as n, ChatPane as t };