@dungle-scrubs/admin-ui-soft 0.0.0-stage → 0.0.0

package/dist/ai/compositions/agent-console/agent-console.js

@@ -0,0 +1,644 @@
+import { Alert, AlertTitle } from "../../../components/ui/alert.js";
+import { Button } from "../../../components/ui/button.js";
+import { Badge } from "../../../components/ui/badge.js";
+import { CollapsibleTrigger } from "../../../components/ui/collapsible.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../../../components/ui/popover.js";
+import { Skeleton } from "../../../components/ui/skeleton.js";
+import { BranchMenu } from "../../../motion/branch-menu/branch-menu.js";
+import { DictationButton } from "../../../motion/dictation-button/dictation-button.js";
+import { PromptComposer } from "../../../motion/prompt-composer/prompt-composer.js";
+import { ScrubSelect } from "../../../motion/scrub-select/scrub-select.js";
+import { StarRating } from "../../../motion/star-rating/star-rating.js";
+import { StatusGlyph } from "../../../motion/status-glyph/status-glyph.js";
+import { formatElapsed } from "../../../lib/elapsed.js";
+import { ThinkingTrace } from "../../../motion/thinking-trace/thinking-trace.js";
+import { ToolCallChip } from "../../../motion/tool-call-chip/tool-call-chip.js";
+import { WorkingIndicator } from "../../../motion/working-indicator/working-indicator.js";
+import { MarkdownText } from "../../../components/assistant-ui/elements/markdown-text.js";
+import { ToolFallback } from "../../../components/assistant-ui/elements/tool-fallback.aui.js";
+import { summarizeArgs } from "../tool-approval/json-args.js";
+import { ToolApproval } from "../tool-approval/tool-approval.js";
+import { ToolCallJson, formatToolValue, toolCallTriggerClassName, useRevealOnOpen } from "../tool-call-row/tool-call-row.js";
+import { UsageMeter } from "../usage-meter/usage-meter.js";
+import * as React from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "cn";
+import { AlertCircleIcon, ArrowDownIcon, ChevronRightIcon, ShieldAlertIcon, SlidersHorizontalIcon, WrenchIcon } from "lucide-react";
+import { useSize } from "ahooks";
+import { AuiIf, MessagePrimitive, ThreadPrimitive, groupPartByType, useAui, useAuiState } from "@assistant-ui/react";
+//#region src/ai/compositions/agent-console/agent-console.tsx
+/** Narrower than this, the header collapses into a details popover. */
+const NARROW_WIDTH = 560;
+const STATUS_LABEL = {
+	idle: "Idle",
+	working: "Working",
+	blocked: "Blocked",
+	failed: "Failed"
+};
+const STATUS_GLYPH = {
+	idle: "pending",
+	working: "running",
+	blocked: "cancelled",
+	failed: "failed"
+};
+const ConsoleContext = React.createContext(null);
+function useConsole() {
+	const context = React.useContext(ConsoleContext);
+	if (!context) throw new Error("AgentConsole parts must render inside AgentConsole");
+	return context;
+}
+function collectDangerous(tools, into = /* @__PURE__ */ new Set()) {
+	for (const tool of tools) {
+		if (tool.dangerous) into.add(tool.id);
+		if (tool.children) collectDangerous(tool.children, into);
+	}
+	return into;
+}
+function countTools(tools) {
+	return tools.reduce((total, tool) => total + (tool.children ? countTools(tool.children) : 1), 0);
+}
+function toMenuItems(tools) {
+	return tools.map((tool) => tool.children ? {
+		id: tool.id,
+		label: tool.label ?? tool.id,
+		children: toMenuItems(tool.children)
+	} : {
+		id: tool.id,
+		label: tool.label ?? tool.id,
+		icon: tool.dangerous ? /* @__PURE__ */ jsx(ShieldAlertIcon, {
+			"aria-label": "Dangerous",
+			className: "text-destructive"
+		}) : /* @__PURE__ */ jsx(WrenchIcon, {})
+	});
+}
+/**
+* A chat with one agent, on the app's assistant-ui runtime. The header shows
+* the agent's name, model and status, a compact UsageMeter and its scoped
+* tool list (a BranchMenu in a popover). The thread streams the agent's
+* reasoning as a ThinkingTrace, each tool call as a ToolCallChip that
+* expands to its arguments and result (tool-fallback), and a gated call as a
+* ToolApproval card. A WorkingIndicator runs while the agent works, and with
+* `onRate` each finished answer gets a StarRating. The composer is a
+* PromptComposer with a ScrubSelect model picker and a DictationButton.
+*
+* AgentConsole renders inside the app's `AssistantRuntimeProvider` and never
+* creates a runtime: messages, streaming, approvals and cancelling all go
+* through it. A run error shows in place, under its message, and the
+* conversation stays on screen. Below 35rem the header collapses into a
+* details popover, and the composer stays pinned to the bottom.
+*/
+function AgentConsole(props) {
+	const { name, status: statusProp, statusDetail, usage, tools = [], onToolSelect, onToolDecision, models = [], model: modelProp, defaultModel, onModelChange, efforts, effort, defaultEffort, onEffortChange, sources, commands, onAttach, dictation, onSend, onRate, ratings, placeholder, className } = props;
+	const aui = useAui();
+	const rootRef = React.useRef(null);
+	const size = useSize(rootRef);
+	const narrow = size !== void 0 && size.width < NARROW_WIDTH;
+	const isRunning = useAuiState((s) => s.thread.isRunning);
+	const isDisabled = useAuiState((s) => s.thread.isDisabled);
+	const awaitingApproval = useAuiState((s) => s.thread.messages.at(-1)?.status?.type === "requires-action");
+	const lastRunFailed = useAuiState((s) => {
+		const last = s.thread.messages.at(-1);
+		return last?.role === "assistant" && last.status?.type === "incomplete" && last.status.reason === "error";
+	});
+	const status = statusProp ?? (awaitingApproval ? "blocked" : isRunning ? "working" : "idle");
+	const headerStatus = !statusProp && status === "idle" && lastRunFailed ? "failed" : status;
+	const detail = statusDetail ?? (statusProp ? void 0 : awaitingApproval ? "Waiting for your approval" : void 0);
+	const [uncontrolledModel, setUncontrolledModel] = React.useState(defaultModel ?? models[0]?.value ?? null);
+	const model = modelProp ?? uncontrolledModel;
+	const modelLabel = models.find((option) => option.value === model)?.label ?? usage?.model;
+	React.useEffect(() => {
+		if (!model) return;
+		const config = { config: { modelName: model } };
+		return aui.modelContext().register({ getModelContext: () => config });
+	}, [aui, model]);
+	const context = React.useMemo(() => ({
+		name,
+		dangerous: collectDangerous(tools),
+		onToolDecision,
+		onRate,
+		ratings
+	}), [
+		name,
+		tools,
+		onToolDecision,
+		onRate,
+		ratings
+	]);
+	const send = (text, sendDetail) => {
+		aui.thread().append(text);
+		onSend?.(text, {
+			...sendDetail,
+			...model ? { model } : {}
+		});
+	};
+	const modelPicker = models.length > 0 ? /* @__PURE__ */ jsx(ScrubSelect, {
+		label: "Model",
+		size: "default",
+		options: [...models],
+		value: model,
+		disabled: isDisabled,
+		onValueChange: (next) => {
+			if (modelProp === void 0) setUncontrolledModel(next);
+			onModelChange?.(next);
+		},
+		className: "border-transparent bg-transparent hover:bg-muted dark:bg-transparent dark:hover:bg-muted/50"
+	}) : void 0;
+	return /* @__PURE__ */ jsx(ConsoleContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsxs("section", {
+			ref: rootRef,
+			"aria-label": `${name} console`,
+			"data-slot": "agent-console",
+			"data-narrow": narrow || void 0,
+			className: cn("flex h-full min-h-0 w-full flex-col overflow-hidden bg-background text-sm", className),
+			children: [
+				/* @__PURE__ */ jsx(ConsoleHeader, {
+					name,
+					width: size?.width,
+					status: headerStatus,
+					detail,
+					modelLabel,
+					usage,
+					tools,
+					onToolSelect,
+					narrow
+				}),
+				/* @__PURE__ */ jsxs(ThreadPrimitive.Root, {
+					className: "relative flex min-h-0 flex-1 flex-col",
+					children: [/* @__PURE__ */ jsx(ThreadPrimitive.Viewport, {
+						"data-slot": "agent-console-viewport",
+						className: "flex min-h-0 flex-1 flex-col overflow-y-auto [mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%-1.25rem),transparent)]",
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "mx-auto flex w-full max-w-3xl flex-1 flex-col gap-6 px-4 pt-4 pb-6",
+							children: [
+								/* @__PURE__ */ jsx(AuiIf, {
+									condition: (s) => s.thread.messages.length === 0 && !s.thread.isLoading,
+									children: /* @__PURE__ */ jsxs("div", {
+										className: "my-auto flex flex-col items-center gap-1 py-10 text-center",
+										children: [/* @__PURE__ */ jsxs("p", {
+											className: "font-heading text-base font-medium",
+											children: [
+												"Ask ",
+												name,
+												" anything"
+											]
+										}), /* @__PURE__ */ jsx("p", {
+											className: "text-muted-foreground text-xs",
+											children: "It can only use the tools in its scope."
+										})]
+									})
+								}),
+								/* @__PURE__ */ jsx(AuiIf, {
+									condition: (s) => s.thread.messages.length === 0 && s.thread.isLoading,
+									children: /* @__PURE__ */ jsxs("div", {
+										role: "status",
+										"data-slot": "agent-console-loading",
+										className: "flex flex-col gap-6",
+										children: [
+											/* @__PURE__ */ jsx("span", {
+												className: "sr-only",
+												children: "Loading conversation"
+											}),
+											/* @__PURE__ */ jsx(Skeleton, { className: "ml-auto h-9 w-2/5 rounded-2xl" }),
+											/* @__PURE__ */ jsxs("div", {
+												className: "flex flex-col gap-2",
+												children: [
+													/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-11/12" }),
+													/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-4/5" }),
+													/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-3/5" })
+												]
+											}),
+											/* @__PURE__ */ jsx(Skeleton, { className: "ml-auto h-9 w-1/3 rounded-2xl" })
+										]
+									})
+								}),
+								/* @__PURE__ */ jsx(ThreadPrimitive.Messages, { children: () => /* @__PURE__ */ jsx(ConsoleMessage, {}) })
+							]
+						})
+					}), /* @__PURE__ */ jsx(ThreadPrimitive.ScrollToBottom, {
+						behavior: "smooth",
+						render: /* @__PURE__ */ jsx(Button, {
+							variant: "outline",
+							size: "icon-sm",
+							"aria-label": "Scroll to the latest message",
+							className: "absolute right-6 bottom-3 rounded-full bg-background shadow-sm disabled:invisible dark:bg-background"
+						}),
+						children: /* @__PURE__ */ jsx(ArrowDownIcon, { "aria-hidden": "true" })
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					"data-slot": "agent-console-composer",
+					className: "mx-auto w-full max-w-3xl shrink-0 px-4 pt-1 pb-4",
+					children: /* @__PURE__ */ jsx(PromptComposer, {
+						label: `Message ${name}`,
+						placeholder: placeholder ?? `Message ${name}`,
+						onSend: send,
+						busy: isRunning,
+						onStop: () => aui.thread().cancelRun(),
+						disabled: isDisabled,
+						modelPicker,
+						...efforts !== void 0 ? { efforts } : {},
+						...effort !== void 0 ? { effort } : {},
+						...defaultEffort !== void 0 ? { defaultEffort } : {},
+						...onEffortChange !== void 0 ? { onEffortChange } : {},
+						...sources !== void 0 ? { sources } : {},
+						...commands !== void 0 ? { commands } : {},
+						...onAttach !== void 0 ? { onAttach } : {},
+						dictation: dictation ? /* @__PURE__ */ jsx(DictationButton, {
+							...dictation,
+							disabled: isDisabled,
+							className: "me-0.5 focus-visible:bg-muted focus-visible:text-foreground focus-visible:ring-2 focus-visible:ring-ring/30"
+						}) : void 0
+					})
+				})
+			]
+		})
+	});
+}
+function StatusBadge({ status, detail, narrow }) {
+	return /* @__PURE__ */ jsxs("span", {
+		role: "status",
+		"data-slot": "agent-console-status",
+		"data-status": status,
+		className: "inline-flex min-w-0 items-center gap-1.5 text-muted-foreground text-xs",
+		children: [
+			/* @__PURE__ */ jsx(StatusGlyph, {
+				"aria-hidden": "true",
+				status: STATUS_GLYPH[status],
+				size: 14,
+				className: cn(status === "blocked" && "[&_svg]:text-warning dark:[&_svg]:text-warning")
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "shrink-0 font-medium text-foreground",
+				children: STATUS_LABEL[status]
+			}),
+			detail ? /* @__PURE__ */ jsxs("span", {
+				className: cn("truncate", narrow && "sr-only"),
+				"data-slot": "agent-console-status-detail",
+				children: [/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					children: "· "
+				}), detail]
+			}) : null
+		]
+	});
+}
+function ConsoleHeader({ name, status, detail, modelLabel, usage, tools, onToolSelect, narrow, width }) {
+	const toolCount = countTools(tools);
+	const menuItems = React.useMemo(() => toMenuItems(tools), [tools]);
+	const scopes = React.useMemo(() => tools.filter((tool) => tool.children).map((tool) => tool.id), [tools]);
+	const hasDetails = toolCount > 0 || narrow && (usage !== void 0 || modelLabel);
+	const meterUsage = React.useMemo(() => {
+		if (!usage || !modelLabel) return usage;
+		const { model: _model, ...rest } = usage;
+		return rest;
+	}, [usage, modelLabel]);
+	const popupRef = React.useRef(null);
+	const toolList = toolCount > 0 ? /* @__PURE__ */ jsx(BranchMenu, {
+		label: `${name} tools`,
+		items: menuItems,
+		defaultExpanded: scopes,
+		onActiveChange: (id) => onToolSelect?.(id),
+		className: "max-h-80 overflow-y-auto"
+	}) : null;
+	return /* @__PURE__ */ jsxs("header", {
+		"data-slot": "agent-console-header",
+		className: "flex shrink-0 items-center gap-3 border-b px-4 py-2.5",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-1 flex-col gap-0.5",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 items-center gap-2.5",
+					children: [/* @__PURE__ */ jsx("h2", {
+						className: "truncate font-heading text-sm font-medium",
+						children: name
+					}), /* @__PURE__ */ jsx(StatusBadge, {
+						status,
+						detail,
+						narrow
+					})]
+				}), modelLabel && !narrow ? /* @__PURE__ */ jsx("p", {
+					className: "truncate text-muted-foreground text-xs",
+					children: modelLabel
+				}) : null]
+			}),
+			meterUsage && !narrow ? /* @__PURE__ */ jsx(UsageMeter, {
+				usage: meterUsage,
+				scope: "thread",
+				className: "shrink"
+			}) : null,
+			hasDetails ? /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+				render: narrow ? /* @__PURE__ */ jsx(Button, {
+					variant: "outline",
+					size: "icon",
+					"aria-label": `${name} details`,
+					className: "shrink-0"
+				}) : /* @__PURE__ */ jsx(Button, {
+					variant: "outline",
+					size: "sm",
+					className: "shrink-0"
+				}),
+				children: narrow ? /* @__PURE__ */ jsx(SlidersHorizontalIcon, { "aria-hidden": "true" }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					/* @__PURE__ */ jsx(WrenchIcon, { "aria-hidden": "true" }),
+					"Tools",
+					/* @__PURE__ */ jsx(Badge, {
+						variant: "secondary",
+						className: "h-4 min-w-4 px-1 text-[0.625rem]",
+						children: toolCount
+					})
+				] })
+			}), /* @__PURE__ */ jsxs(PopoverContent, {
+				ref: popupRef,
+				tabIndex: -1,
+				initialFocus: popupRef,
+				align: "end",
+				className: "w-80 max-w-[calc(100vw-2rem)] gap-3",
+				style: narrow && width !== void 0 ? { width: width - 32 } : void 0,
+				"aria-label": narrow ? `${name} details` : `${name} tools`,
+				children: [narrow && (modelLabel || usage) ? /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-2 border-b pb-3",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col gap-1",
+						children: [/* @__PURE__ */ jsx("h3", {
+							className: "text-sm font-medium",
+							children: "Model and usage"
+						}), modelLabel ? /* @__PURE__ */ jsx("p", {
+							className: "text-muted-foreground",
+							children: modelLabel
+						}) : null]
+					}), meterUsage ? /* @__PURE__ */ jsx(UsageMeter, {
+						usage: meterUsage,
+						scope: "thread",
+						contextSide: "bottom"
+					}) : null]
+				}) : null, toolList ? /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-1.5",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col gap-1",
+						children: [/* @__PURE__ */ jsx("h3", {
+							className: "text-sm font-medium",
+							children: "Tools in scope"
+						}), /* @__PURE__ */ jsxs("p", {
+							className: "text-muted-foreground",
+							children: [
+								toolCount,
+								" ",
+								toolCount === 1 ? "tool" : "tools",
+								". Shielded tools need a press-and-hold to approve."
+							]
+						})]
+					}), toolList]
+				}) : null]
+			})] }) : null
+		]
+	});
+}
+const groupBy = groupPartByType({
+	reasoning: ["group-reasoning"],
+	"tool-call": ["group-tool"]
+});
+/** The settled time of a trace that never visibly ran. */
+const INSTANT = formatElapsed(0);
+/** Splits reasoning into steps: one per sentence, so the trace grows as it streams. */
+function reasoningSteps(text) {
+	return text.split(/(?<=[.!?])\s+|\n/).map((step) => step.trim()).filter((step) => step.length > 0);
+}
+function ReasoningGroup({ indices, running }) {
+	const steps = reasoningSteps(useAuiState((s) => indices.map((index) => {
+		const part = s.message.parts[index];
+		return part?.type === "reasoning" ? part.text : "";
+	}).join("\n")));
+	const [sawRunning] = React.useState(running);
+	const streamMs = useAuiState((s) => {
+		return s.message.metadata.timing?.totalStreamTime;
+	});
+	const [wasRunning, setWasRunning] = React.useState(running);
+	const [settledMs, setSettledMs] = React.useState(void 0);
+	if (wasRunning !== running) {
+		setWasRunning(running);
+		if (!running && sawRunning && streamMs !== void 0) setSettledMs(streamMs);
+	}
+	return /* @__PURE__ */ jsx(ThinkingTrace, {
+		working: running,
+		steps,
+		...!running && settledMs !== void 0 ? { elapsedMs: settledMs } : {},
+		doneLabel: (elapsed) => sawRunning && elapsed !== INSTANT ? `Thought for ${elapsed}` : "Reasoning",
+		className: "py-1"
+	});
+}
+function AssistantParts() {
+	return /* @__PURE__ */ jsx(MessagePrimitive.GroupedParts, {
+		groupBy,
+		indicator: "never",
+		children: ({ part, children }) => {
+			switch (part.type) {
+				case "group-reasoning": return /* @__PURE__ */ jsx(ReasoningGroup, {
+					indices: part.indices,
+					running: part.status.type === "running"
+				});
+				case "group-tool": return /* @__PURE__ */ jsx("div", {
+					"data-slot": "agent-console-tool-calls",
+					className: "flex min-w-0 flex-col items-start gap-1 py-1.5",
+					children
+				});
+				case "text": return /* @__PURE__ */ jsx(MarkdownText, {});
+				case "tool-call": return part.toolUI ?? /* @__PURE__ */ jsx(ConsoleToolCall, { ...part });
+				default: return /* @__PURE__ */ jsx(Fragment$1, {});
+			}
+		}
+	});
+}
+function errorText(error) {
+	if (typeof error === "string") return error;
+	if (error instanceof Error) return error.message;
+	return "The run failed.";
+}
+function ConsoleMessage() {
+	if (useAuiState((s) => s.message.role) === "user") return /* @__PURE__ */ jsx(MessagePrimitive.Root, {
+		"data-slot": "agent-console-user-message",
+		className: "flex flex-col items-end",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "max-w-[85%] rounded-2xl bg-muted px-4 py-2 wrap-break-word text-foreground",
+			children: /* @__PURE__ */ jsx(MessagePrimitive.Parts, { components: { Text: MarkdownText } })
+		})
+	});
+	return /* @__PURE__ */ jsx(AssistantMessage, {});
+}
+function AssistantMessage() {
+	const { name, onRate, ratings } = useConsole();
+	const id = useAuiState((s) => s.message.id);
+	const isLast = useAuiState((s) => s.message.isLast);
+	const statusType = useAuiState((s) => s.message.status?.type);
+	const failure = useAuiState((s) => s.message.status?.type === "incomplete" && s.message.status.reason === "error" ? errorText(s.message.status.error) : null);
+	const cancelled = useAuiState((s) => s.message.status?.type === "incomplete" && s.message.status.reason === "cancelled");
+	const streamMs = useAuiState((s) => {
+		return s.message.metadata.timing?.totalStreamTime;
+	});
+	const [sawRunning, setSawRunning] = React.useState(statusType === "running");
+	if (statusType === "running" && !sawRunning) setSawRunning(true);
+	const indicator = !isLast || !sawRunning || statusType === "requires-action" ? null : statusType === "running" ? "working" : failure || cancelled ? "error" : "done";
+	return /* @__PURE__ */ jsxs(MessagePrimitive.Root, {
+		"data-slot": "agent-console-assistant-message",
+		className: "flex flex-col gap-1.5",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "leading-relaxed wrap-break-word text-foreground",
+				children: /* @__PURE__ */ jsx(AssistantParts, {})
+			}),
+			failure ? /* @__PURE__ */ jsxs(Alert, {
+				variant: "destructive",
+				"data-slot": "agent-console-run-error",
+				children: [/* @__PURE__ */ jsx(AlertCircleIcon, { "aria-hidden": "true" }), /* @__PURE__ */ jsx(AlertTitle, { children: failure })]
+			}) : null,
+			indicator ? /* @__PURE__ */ jsx(WorkingIndicator, {
+				status: indicator,
+				label: `${name} is working`,
+				doneLabel: "Done",
+				errorLabel: cancelled ? "Stopped" : "Failed",
+				...indicator !== "working" && streamMs !== void 0 ? { elapsedMs: streamMs } : {}
+			}) : null,
+			onRate && statusType === "complete" ? /* @__PURE__ */ jsx(StarRating, {
+				size: "sm",
+				label: `Rate ${name}'s answer`,
+				clearable: true,
+				...ratings ? { value: ratings[id] ?? null } : {},
+				onValueChange: (value) => onRate(id, value),
+				className: "-ms-1"
+			}) : null
+		]
+	});
+}
+function chipStatus(part) {
+	if (part.approval?.approved === false || part.approval?.resolution) return "error";
+	if (part.status.type === "running" || part.status.type === "requires-action") return "running";
+	if (part.isError || part.status.type === "incomplete") return "error";
+	return part.result === void 0 ? "running" : "success";
+}
+function decisionLine(part) {
+	const approval = part.approval;
+	if (!approval) return null;
+	if (approval.resolution) return `Approval ${approval.resolution}`;
+	if (approval.approved === false) return `Denied${approval.reason ? `: ${approval.reason}` : ""}`;
+	if (approval.approved === true) return "Approved";
+	return null;
+}
+/**
+* One tool call. While it waits on the owner it is a ToolApproval card;
+* otherwise a ToolCallChip that expands to its arguments, result or error
+* through the registry's tool-fallback parts.
+*/
+function ConsoleToolCall(part) {
+	const { name, dangerous, onToolDecision } = useConsole();
+	const [open, setOpen] = React.useState(false);
+	const rowRef = useRevealOnOpen(open);
+	const [pending, setPending] = React.useState(false);
+	const [error, setError] = React.useState(null);
+	if (part.approval !== void 0 && part.approval.approved === void 0 && part.approval.resolution === void 0) {
+		const args = part.args ?? {};
+		const toolCall = {
+			id: part.toolCallId,
+			name: part.toolName,
+			args,
+			status: "awaiting-approval",
+			dangerous: dangerous.has(part.toolName)
+		};
+		const respond = (approved, reason) => {
+			setPending(true);
+			setError(null);
+			part.respondToApproval({
+				approved,
+				...reason ? { reason } : {}
+			}).then(() => setPending(false), (failure) => {
+				setPending(false);
+				setError(errorText(failure));
+			});
+		};
+		const ids = {
+			toolCallId: part.toolCallId,
+			toolName: part.toolName
+		};
+		return /* @__PURE__ */ jsx("div", {
+			"data-slot": "agent-console-approval",
+			className: "w-full py-1",
+			children: /* @__PURE__ */ jsx(ToolApproval, {
+				toolCall,
+				agent: name,
+				...part.approval?.prompt ? { description: part.approval.prompt } : {},
+				editable: onToolDecision !== void 0,
+				pending,
+				error,
+				onDismissError: () => setError(null),
+				onApprove: (amendedArgs) => {
+					onToolDecision?.({
+						kind: "approve",
+						...ids,
+						...amendedArgs ? { amendedArgs } : {}
+					});
+					respond(true);
+				},
+				onDeny: (reason) => {
+					onToolDecision?.({
+						kind: "deny",
+						...ids,
+						...reason ? { reason } : {}
+					});
+					respond(false, reason);
+				},
+				...onToolDecision ? { onAlwaysAllow: () => {
+					onToolDecision({
+						kind: "always-allow",
+						...ids
+					});
+					respond(true);
+				} } : {}
+			})
+		});
+	}
+	const status = chipStatus(part);
+	const { startedAt, completedAt } = part.timing ?? {};
+	const denied = part.approval?.approved === false;
+	const elapsedMs = !denied && status !== "running" && startedAt !== void 0 && completedAt !== void 0 ? completedAt - startedAt : void 0;
+	const decision = decisionLine(part);
+	const statusWord = denied ? "denied" : status === "success" ? "succeeded" : status === "error" ? "failed" : "running";
+	const detail = denied ? "denied" : summarizeArgs(part.args ?? {}, 2);
+	return /* @__PURE__ */ jsx("div", {
+		ref: rowRef,
+		"data-slot": "agent-console-tool-call",
+		className: "max-w-full scroll-my-6",
+		children: /* @__PURE__ */ jsxs(ToolFallback.Root, {
+			open,
+			onOpenChange: setOpen,
+			children: [/* @__PURE__ */ jsxs(CollapsibleTrigger, {
+				"data-slot": "agent-console-tool-call-trigger",
+				"aria-label": `${part.toolName}, ${statusWord}`,
+				className: toolCallTriggerClassName,
+				children: [/* @__PURE__ */ jsx(ToolCallChip, {
+					name: part.toolName,
+					detail,
+					status,
+					...elapsedMs !== void 0 ? { elapsedMs } : {},
+					className: cn("min-w-0", denied && "[&>[data-slot=tool-call-chip-time]]:hidden")
+				}), /* @__PURE__ */ jsx(ChevronRightIcon, {
+					"aria-hidden": "true",
+					className: "size-3.5 shrink-0 transition-transform duration-200 group-data-panel-open/trigger:rotate-90 motion-reduce:transition-none"
+				})]
+			}), /* @__PURE__ */ jsxs(ToolFallback.Content, { children: [
+				decision ? /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground text-xs",
+					children: decision
+				}) : null,
+				status === "error" && part.status.type === "incomplete" ? /* @__PURE__ */ jsx(ToolFallback.Error, {
+					status: part.status,
+					className: "text-xs"
+				}) : null,
+				part.argsText ? /* @__PURE__ */ jsx(ToolCallJson, { text: part.argsText }) : null,
+				part.result !== void 0 ? /* @__PURE__ */ jsx(ToolCallJson, {
+					heading: "Result:",
+					text: formatToolValue(part.result)
+				}) : null
+			] })]
+		})
+	});
+}
+//#endregion
+export { AgentConsole };