bazilion 0.9.0 → 0.11.0

package/dist/web/server/assets/{ChatPane-Dh3qxzdb.js → ChatPane-Ba5wTsVk.js}

@@ -1,5 +1,6 @@
+import { t as Button } from "./Button-Dsnw22OF.js";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import DOMPurify from "dompurify";
 import { marked } from "marked";
 //#region src/lib/md.ts
@@ -40,6 +41,30 @@ var AUTOSCROLL_THRESHOLD_PX = 40;
 var SESSION_POLL_MS = 1e4;
 var TOOL_GROUP_MAX_HEIGHT_PX = 320;
 var MAX_INPUT_HEIGHT = 200;
+/** 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"
+	};
+}
+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  /reset             — reset chat history for this agent\n  /help              — show this list";
 function prettyArgs(raw) {
 	if (!raw) return "";
@@ -141,10 +166,16 @@ function ChatPane({ agentId, agentName, initialMessages, initialSessionHead }) {
 	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 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 ?? {
@@ -153,7 +184,11 @@ function ChatPane({ agentId, agentName, initialMessages, initialSessionHead }) {
 	});
 	const streamingRef = useRef(false);
 	streamingRef.current = streaming;
+	const turnBusy = streaming || recoveredTurn;
 	useEffect(() => {
+		currentAbortRef.current?.abort();
+		currentAbortRef.current = null;
+		commandApprovalTurnRef.current = false;
 		setServerMessages(initialMessages);
 		setLiveEntries([]);
 		setSystemBubbles([]);
@@ -162,11 +197,37 @@ function ChatPane({ agentId, agentName, initialMessages, initialSessionHead }) {
 		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;
@@ -227,11 +288,12 @@ function ChatPane({ agentId, agentName, initialMessages, initialSessionHead }) {
 		staleBanner
 	]);
 	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 (typeof body.size === "number") knownHeadRef.current = {
+			if (currentAgentIdRef.current === agentId && typeof body.size === "number") knownHeadRef.current = {
 				file: body.file ?? null,
 				size: body.size
 			};
@@ -369,7 +431,7 @@ function ChatPane({ agentId, agentName, initialMessages, initialSessionHead }) {
 		return -1;
 	}
 	function enterEditMode() {
-		if (liveEntries.length > 0 || streaming) return;
+		if (liveEntries.length > 0 || turnBusy) return;
 		const idx = findLastUserIdx();
 		if (idx === -1) return;
 		const userMsg = serverMessages[idx];
@@ -382,7 +444,7 @@ function ChatPane({ agentId, agentName, initialMessages, initialSessionHead }) {
 		setEditIdx(null);
 	}
 	async function addFiles(files) {
-		if (!files || streaming) return;
+		if (!files || turnBusy) return;
 		const arr = Array.from(files);
 		if (arr.length === 0) return;
 		const encoded = await Promise.all(arr.map(fileToAttachment));
@@ -398,7 +460,7 @@ function ChatPane({ agentId, agentName, initialMessages, initialSessionHead }) {
 	function onDragOver(e) {
 		if (!Array.from(e.dataTransfer.types).includes("Files")) return;
 		e.preventDefault();
-		if (streaming) {
+		if (turnBusy) {
 			setDragging(false);
 			return;
 		}
@@ -411,12 +473,12 @@ function ChatPane({ agentId, agentName, initialMessages, initialSessionHead }) {
 		if (e.dataTransfer.files.length === 0) return;
 		e.preventDefault();
 		setDragging(false);
-		if (streaming) return;
+		if (turnBusy) return;
 		addFiles(e.dataTransfer.files);
 	}
 	const send = useCallback(async (text) => {
 		const atts = attachments;
-		if (!text.trim() && atts.length === 0 || streaming) return;
+		if (!text.trim() && atts.length === 0 || turnBusy) return;
 		setInput("");
 		if (await maybeHandleSlashCommand(text)) return;
 		setAttachments([]);
@@ -456,19 +518,21 @@ function ChatPane({ agentId, agentName, initialMessages, initialSessionHead }) {
 			...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({
-					message: text,
-					attachments: atts
-				}),
+				body: JSON.stringify(interactiveChatRequest(text, atts)),
 				signal: abort.signal
 			});
 			if (res.status === 202) {
@@ -508,11 +572,14 @@ function ChatPane({ agentId, agentName, initialMessages, initialSessionHead }) {
 					} catch {
 						continue;
 					}
+					if (frame.kind === "done" || frame.kind === "fatal") terminalFrameReceived = true;
 					handleFrame(frame);
 				}
 			}
 			if (buffer.trim()) try {
-				handleFrame(JSON.parse(buffer));
+				const frame = JSON.parse(buffer);
+				if (frame.kind === "done" || frame.kind === "fatal") terminalFrameReceived = true;
+				handleFrame(frame);
 			} catch {}
 			await refreshKnownHead();
 			sessionStorage.removeItem(`bz_pending_${agentId}`);
@@ -523,28 +590,44 @@ function ChatPane({ agentId, agentName, initialMessages, initialSessionHead }) {
 			}]);
 			sessionStorage.removeItem(`bz_pending_${agentId}`);
 		} finally {
-			setThinking(false);
-			setStreaming(false);
-			currentAbortRef.current = null;
+			if (currentAgentIdRef.current === agentId && currentAbortRef.current === abort) {
+				if (!terminalFrameReceived && commandApprovalTurnRef.current) setRecoveredTurn(true);
+				setThinking(false);
+				setStreaming(false);
+				currentAbortRef.current = null;
+			}
 		}
 	}, [
 		agentId,
 		editIdx,
 		serverMessages,
-		streaming,
+		turnBusy,
 		attachments
 	]);
 	function handleFrame(frame) {
+		if (currentAgentIdRef.current !== agentId) return;
 		if (frame.kind === "fatal") {
-			setLiveEntries((prev) => [...prev, {
+			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;
@@ -584,6 +667,13 @@ function ChatPane({ agentId, agentName, initialMessages, initialSessionHead }) {
 			});
 			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" ? {
@@ -636,12 +726,92 @@ function ChatPane({ agentId, agentName, initialMessages, initialSessionHead }) {
 			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() {
+		const hasLocalStream = currentAbortRef.current !== null;
 		try {
 			const res = await fetch(`/api/agents/${encodeURIComponent(agentId)}/cancel`, { method: "POST" });
-			if (res.ok || res.status === 204) return;
+			if (currentAgentIdRef.current !== agentId) return;
+			if (res.ok || res.status === 204) {
+				if (!hasLocalStream) {
+					commandApprovalTurnRef.current = false;
+					setLiveEntries((entries) => entries.map((entry) => entry.type === "command_approval" && entry.approval.status === "pending" ? {
+						type: "command_approval",
+						approval: {
+							...entry.approval,
+							status: "cancelled"
+						}
+					} : entry));
+					setRecoveredTurn(false);
+				}
+				return;
+			}
 		} catch {}
-		currentAbortRef.current?.abort();
+		if (currentAgentIdRef.current !== agentId) return;
+		if (hasLocalStream) currentAbortRef.current?.abort();
+		else setLiveEntries((entries) => [...entries, {
+			type: "error",
+			content: "[cancel failed] could not reach the active turn"
+		}]);
 	}
 	function onKeyDown(e) {
 		if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
@@ -652,7 +822,7 @@ function ChatPane({ agentId, agentName, initialMessages, initialSessionHead }) {
 	const baseEntries = projectMessages(serverMessages);
 	visibleEntryCountRef.current = baseEntries.length + liveEntries.length;
 	const lastUserIdx = (() => {
-		if (liveEntries.length > 0 || streaming) return -1;
+		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;
 	})();
@@ -676,13 +846,20 @@ function ChatPane({ agentId, agentName, initialMessages, initialSessionHead }) {
 				children: "drop images or files to attach"
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: "flex items-baseline justify-between border-b border-frost px-4 py-2.5",
-				children: [/* @__PURE__ */ jsx("h1", {
-					className: "font-display text-[1.2rem] text-charcoal",
-					children: agentName
+				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}`,
-					className: "text-xs text-mocha-light hover:text-sapphire",
+					className: "shrink-0 text-xs text-mocha-light hover:text-sapphire",
 					children: "settings →"
 				})]
 			}),
@@ -695,7 +872,7 @@ function ChatPane({ agentId, agentName, initialMessages, initialSessionHead }) {
 					}),
 					/* @__PURE__ */ jsx("span", {
 						className: "flex-1",
-						children: "new activity from another source — reload to see it"
+						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",
@@ -727,10 +904,13 @@ function ChatPane({ agentId, agentName, initialMessages, initialSessionHead }) {
 						const flushSysUpTo = (idx) => {
 							while (sysIdx < systemBubbles.length && systemBubbles[sysIdx].afterIdx <= idx) {
 								const sb = systemBubbles[sysIdx];
-								out.push(/* @__PURE__ */ jsx(Bubble, { entry: {
-									type: "system",
-									content: sb.content
-								} }, `y-${sb.id}`));
+								out.push(/* @__PURE__ */ jsx(Bubble, {
+									entry: {
+										type: "system",
+										content: sb.content
+									},
+									onCommandApprovalDecision: decideCommandApproval
+								}, `y-${sb.id}`));
 								sysIdx++;
 							}
 						};
@@ -741,21 +921,32 @@ function ChatPane({ agentId, agentName, initialMessages, initialSessionHead }) {
 								entry,
 								isLastUser: i === lastUserIdx && editIdx === null,
 								isWillDrop: willDropFromIdx !== -1 && i >= willDropFromIdx,
-								onEdit: enterEditMode
+								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 }, `l-${i}`));
+							out.push(/* @__PURE__ */ jsx(Bubble, {
+								entry,
+								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
-							} }, `y-${sb.id}`));
+							out.push(/* @__PURE__ */ jsx(Bubble, {
+								entry: {
+									type: "system",
+									content: sb.content
+								},
+								onCommandApprovalDecision: decideCommandApproval
+							}, `y-${sb.id}`));
 							sysIdx++;
 						}
 						return out;
@@ -836,7 +1027,7 @@ function ChatPane({ agentId, agentName, initialMessages, initialSessionHead }) {
 					/* @__PURE__ */ jsx("button", {
 						type: "button",
 						onClick: () => fileInputRef.current?.click(),
-						disabled: streaming,
+						disabled: turnBusy,
 						title: "attach images or files",
 						"aria-label": "attach files",
 						className: "rounded-md border-[1.5px] border-frost bg-snow px-3 py-2 text-[1em] text-mocha transition-colors hover:border-sapphire hover:text-sapphire disabled:cursor-not-allowed disabled:opacity-50",
@@ -849,18 +1040,18 @@ function ChatPane({ agentId, agentName, initialMessages, initialSessionHead }) {
 						onChange: (e) => setInput(e.target.value),
 						onKeyDown,
 						onPaste,
-						disabled: streaming,
+						disabled: turnBusy,
 						placeholder: "say something… (Shift+Enter for newline; paste or 📎 to attach images/files)",
 						autoComplete: "off",
 						className: "max-h-[200px] min-h-[2.4rem] flex-1 resize-none overflow-y-auto rounded-md border-[1.5px] border-frost bg-snow px-3 py-2 text-[0.93em] leading-[1.45] text-chocolate outline-none transition-colors focus:border-sapphire focus:shadow-[0_0_0_3px_var(--color-sapphire-glow)]"
 					}),
 					/* @__PURE__ */ jsx("button", {
 						type: "submit",
-						disabled: streaming || !input.trim() && attachments.length === 0,
+						disabled: turnBusy || !input.trim() && attachments.length === 0,
 						className: "rounded-md bg-sapphire px-4 py-2 text-[0.92em] font-semibold text-snow transition-colors hover:bg-sapphire-deep disabled:cursor-not-allowed disabled:opacity-50",
 						children: "send"
 					}),
-					streaming && /* @__PURE__ */ jsx("button", {
+					turnBusy && /* @__PURE__ */ jsx("button", {
 						type: "button",
 						onClick: cancel,
 						className: "rounded-md border-[1.5px] border-frost bg-transparent px-3 py-1.5 text-[0.92em] font-medium text-mocha hover:border-sapphire-light hover:bg-sapphire-glow hover:text-sapphire",
@@ -871,7 +1062,7 @@ function ChatPane({ agentId, agentName, initialMessages, initialSessionHead }) {
 		]
 	});
 }
-function Bubble({ entry, isLastUser, isWillDrop, onEdit }) {
+function Bubble({ entry, 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)) {
@@ -943,10 +1134,10 @@ function Bubble({ entry, isLastUser, isWillDrop, onEdit }) {
 		if (entry.content.startsWith("[error]") || entry.content.startsWith("[fatal]") || entry.content.startsWith("[network error]")) return /* @__PURE__ */ jsxs("div", {
 			className: `my-4 flex flex-col items-start ${dropCls}`,
 			children: [/* @__PURE__ */ jsx("span", {
-				className: "mb-1 text-[0.72em] font-semibold uppercase tracking-wider text-[#9B3D3D]",
+				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-[#9B3D3D] bg-[rgba(196,135,138,0.06)] py-1 pl-3 pr-2 leading-[1.55]",
+				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) }
 			})]
 		});
@@ -1000,6 +1191,12 @@ function Bubble({ entry, isLastUser, isWillDrop, onEdit }) {
 			})]
 		});
 	}
+	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", {
@@ -1011,11 +1208,110 @@ function Bubble({ entry, isLastUser, isWillDrop, onEdit }) {
 		})]
 	});
 	if (entry.type === "error") return /* @__PURE__ */ jsx("div", {
-		className: `my-3 rounded-r-sm border-l-[3px] border-[#9B3D3D] bg-[rgba(196,135,138,0.08)] px-3 py-1 text-[0.92em] text-[#9B3D3D] ${dropCls}`,
+		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 [expanded, setExpanded] = useState(false);
 	const contentRef = useRef(null);