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

package/dist/ai/compositions/run-inspector/run-model.js

@@ -0,0 +1,155 @@
+//#region src/ai/compositions/run-inspector/run-model.ts
+/** Milliseconds since the epoch for an ISO time, or `undefined` for a bad one. */
+function timeOf(iso) {
+	if (iso === void 0) return void 0;
+	const ms = Date.parse(iso);
+	return Number.isNaN(ms) ? void 0 : ms;
+}
+function runBounds(run, now) {
+	const stepTimes = run.steps.flatMap((step) => [timeOf(step.startedAt), timeOf(step.endedAt)].filter((ms) => ms !== void 0));
+	const start = timeOf(run.startedAt) ?? timeOf(run.createdAt) ?? (stepTimes.length > 0 ? Math.min(...stepTimes) : 0);
+	const ended = timeOf(run.endedAt);
+	if (ended !== void 0) return {
+		start,
+		end: Math.max(ended, start),
+		ended: true
+	};
+	const reference = timeOf(now) ?? (stepTimes.length > 0 ? Math.max(...stepTimes) : void 0) ?? start;
+	return {
+		start,
+		end: Math.max(reference, start),
+		ended: false
+	};
+}
+function stepTiming(step, bounds) {
+	const start = timeOf(step.startedAt) ?? bounds.start;
+	const end = timeOf(step.endedAt);
+	const offsetMs = Math.max(0, start - bounds.start);
+	if (end !== void 0) return {
+		offsetMs,
+		durationMs: Math.max(0, end - start),
+		open: false
+	};
+	if (step.status === "running") return {
+		offsetMs,
+		durationMs: Math.max(0, bounds.end - start),
+		open: true
+	};
+	return {
+		offsetMs,
+		durationMs: void 0,
+		open: false
+	};
+}
+/** How deep a step nests under its parents (0 for a top-level step). */
+function stepDepth(step, byId) {
+	let depth = 0;
+	const seen = /* @__PURE__ */ new Set([step.id]);
+	let parent = step.parentStepId ? byId.get(step.parentStepId) : void 0;
+	while (parent && !seen.has(parent.id)) {
+		seen.add(parent.id);
+		depth += 1;
+		parent = parent.parentStepId ? byId.get(parent.parentStepId) : void 0;
+	}
+	return depth;
+}
+/** The status word for a step, as the inspector says it. */
+const STEP_STATUS_LABEL = {
+	pending: "Pending",
+	running: "Running",
+	succeeded: "Succeeded",
+	failed: "Failed",
+	skipped: "Skipped"
+};
+/**
+* The status word for one step. A tool call the owner denied reads "Denied",
+* the word its detail uses, rather than the step's generic "Skipped".
+*/
+function stepStatusLabel(step) {
+	return step.toolCall?.status === "denied" ? "Denied" : STEP_STATUS_LABEL[step.status];
+}
+/** How a retry is marked in a step's name or chip, in both views: `#2` and up. */
+function attemptMark(step) {
+	return (step.attempt ?? 1) > 1 ? ` #${step.attempt}` : "";
+}
+/** The status word for a run. */
+const RUN_STATUS_LABEL = {
+	pending: "Queued",
+	running: "Running",
+	waiting: "Waiting for approval",
+	succeeded: "Succeeded",
+	failed: "Failed",
+	cancelled: "Cancelled"
+};
+/**
+* A step's name in the waterfall: its label, as the timeline titles it, with
+* `#2` and up for a retry so two attempts read apart.
+*/
+function spanName(step) {
+	return `${step.label}${attemptMark(step)}`;
+}
+const SPAN_STATUS = {
+	pending: "completed",
+	running: "running",
+	succeeded: "completed",
+	failed: "failed",
+	skipped: "completed"
+};
+/**
+* The run's steps as waterfall spans, in timeline order: each placed on the
+* run's clock, indented by nesting. A step with no recorded length draws as a
+* sliver at its start.
+*/
+function toSpans(run, bounds) {
+	const byId = new Map(run.steps.map((step) => [step.id, step]));
+	return run.steps.map((step) => {
+		const timing = stepTiming(step, bounds);
+		const duration = timing.durationMs === void 0 ? "no recorded length" : `${timing.durationMs} ms`;
+		const attempt = (step.attempt ?? 1) > 1 ? `, attempt ${step.attempt}` : "";
+		return {
+			id: step.id,
+			name: spanName(step),
+			depth: stepDepth(step, byId),
+			startMs: Math.round(timing.offsetMs),
+			durationMs: Math.round(timing.durationMs ?? 0),
+			status: SPAN_STATUS[step.status],
+			label: `${step.label}${attempt}, ${stepStatusLabel(step).toLowerCase()}, starts at ${Math.round(timing.offsetMs)} ms, ${duration}`
+		};
+	});
+}
+/**
+* The step an inspector opens on: the first failed step a retry did not
+* recover, else the step still running, else the first step.
+*/
+function defaultStepId(steps) {
+	const unrecovered = steps.find((step) => step.status === "failed" && !attemptsOf(step, steps).some((attempt) => attempt.status === "succeeded"));
+	if (unrecovered) return unrecovered.id;
+	return (steps.findLast((step) => step.status === "running") ?? steps[0])?.id ?? null;
+}
+/**
+* Every attempt of the action `step` belongs to, oldest first, linked by
+* `retryOf`. A step that was never retried returns just itself.
+*/
+function attemptsOf(step, steps) {
+	const byId = new Map(steps.map((item) => [item.id, item]));
+	const rootOf = (item) => {
+		let current = item;
+		const seen = /* @__PURE__ */ new Set([current.id]);
+		while (current.retryOf) {
+			const previous = byId.get(current.retryOf);
+			if (!previous || seen.has(previous.id)) break;
+			seen.add(previous.id);
+			current = previous;
+		}
+		return current.id;
+	};
+	const root = rootOf(step);
+	const group = steps.filter((item) => rootOf(item) === root);
+	return group.length > 1 ? [...group].sort((a, b) => (a.attempt ?? 1) - (b.attempt ?? 1)) : [step];
+}
+/** Paragraphs of reasoning or message text, split on blank lines. */
+function paragraphsOf(text) {
+	return text.split(/\n\s*\n/).map((paragraph) => paragraph.trim()).filter((paragraph) => paragraph.length > 0);
+}
+//#endregion
+export { RUN_STATUS_LABEL, STEP_STATUS_LABEL, attemptMark, attemptsOf, defaultStepId, paragraphsOf, runBounds, spanName, stepDepth, stepStatusLabel, stepTiming, timeOf, toSpans };

package/dist/ai/compositions/tool-approval/json-args.js

@@ -0,0 +1,54 @@
+//#region src/ai/compositions/tool-approval/json-args.ts
+/** Arguments as the editor shows them: two-space indented JSON. */
+function formatArgs(args) {
+	return JSON.stringify(args, null, 2);
+}
+/** One argument value as a single line: strings bare, everything else as compact JSON. */
+function formatArgValue(value) {
+	return typeof value === "string" ? value : JSON.stringify(value);
+}
+function isJsonObject(value) {
+	return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+/**
+* Reads edited argument text. It must be a JSON object, as a tool's arguments
+* are. On success `text` is the canonical form (`formatArgs`), so edits that
+* only change whitespace compare equal to the original.
+*/
+function parseArgs(text) {
+	if (text.trim() === "") return {
+		ok: false,
+		error: "Enter the arguments as a JSON object."
+	};
+	let value;
+	try {
+		value = JSON.parse(text);
+	} catch (error) {
+		return {
+			ok: false,
+			error: `Not valid JSON: ${error instanceof Error ? error.message : String(error)}`
+		};
+	}
+	if (!isJsonObject(value)) return {
+		ok: false,
+		error: "The arguments must be a JSON object, in braces."
+	};
+	return {
+		ok: true,
+		args: value,
+		text: formatArgs(value)
+	};
+}
+/**
+* A short, one-line summary of the arguments, such as
+* `account: fastmail, uids: [48112,48113]`, for a chip or a subtitle. The
+* caller truncates it visually.
+*/
+function summarizeArgs(args, maxEntries = 3) {
+	const entries = Object.entries(args);
+	const shown = entries.slice(0, maxEntries).map(([key, value]) => `${key}: ${formatArgValue(value)}`);
+	const more = entries.length - shown.length;
+	return more > 0 ? `${shown.join(", ")}, +${more} more` : shown.join(", ");
+}
+//#endregion
+export { formatArgValue, formatArgs, parseArgs, summarizeArgs };

package/dist/ai/compositions/tool-approval/tool-approval.d.ts

@@ -0,0 +1,57 @@
+import { JsonObject, ToolCall } from "../../types.js";
+import * as React from "react";
+//#region src/ai/compositions/tool-approval/tool-approval.d.ts
+export interface ToolApprovalProps extends Omit<React.ComponentProps<"div">, "children" | "title" | "onError"> {
+  /** The pending call. Its `approval` (or a status past `awaiting-approval`) settles the card. */
+  toolCall: ToolCall;
+  /** A plain-language title, such as "Purge 1 sign-in email". Defaults to the tool's name. */
+  title?: string;
+  /** The agent asking, as a display name, such as "Email agent". */
+  agent?: string;
+  /** Why the agent wants to run it, or what it will do. */
+  description?: string;
+  /**
+   * The owner approved. `amendedArgs` is set when they edited the arguments
+   * first: run the call with those instead of `toolCall.args`.
+   */
+  onApprove: (amendedArgs?: JsonObject) => void;
+  /** The owner denied, with the optional reason they typed. */
+  onDeny: (reason?: string) => void;
+  /**
+   * The owner wants this tool allowed from now on. The card only emits the
+   * intent; the app records the standing permission (and approves this call,
+   * if that is its rule). Omit it to hide the option.
+   */
+  onAlwaysAllow?: () => void;
+  /** Offer editing the arguments before approving. */
+  editable?: boolean;
+  /**
+   * A decision is in flight. The card stays as it is, controls disabled,
+   * until the app settles `toolCall` or sets `error`: it never assumes the
+   * decision landed.
+   */
+  pending?: boolean;
+  /** Why the last decision failed. It shows in place until dismissed. */
+  error?: string | null;
+  /** The owner dismissed `error`. Clear it here. */
+  onDismissError?: () => void;
+  /** How long a dangerous tool's approve button must be held, in ms. */
+  holdDuration?: number;
+}
+/**
+ * A card for one tool call waiting on the owner. Approve it, deny it (with an
+ * optional reason), edit its arguments and then approve (the card shows a
+ * diff of the edits and emits the amended arguments), or allow the tool from
+ * now on. A dangerous tool needs a press-and-hold to approve (HoldButton:
+ * hold Space or Enter on the keyboard).
+ *
+ * Decisions are non-optimistic: the card shows `pending` until the app
+ * settles `toolCall` (its `approval`, or a status past `awaiting-approval`),
+ * then shows the outcome as a receipt. A failed decision shows `error` in
+ * place, keeping any edits, until the owner dismisses it.
+ *
+ * Built on the registry's `elements-approval-card`, with `diff-viewer` for the
+ * edit diff and HoldButton for dangerous tools.
+ */
+export declare function ToolApproval({ toolCall, title, agent, description, onApprove, onDeny, onAlwaysAllow, editable, pending, error, onDismissError, holdDuration, className, ...props }: ToolApprovalProps): React.JSX.Element;
+//#endregion

package/dist/ai/compositions/tool-approval/tool-approval.js

@@ -0,0 +1,331 @@
+import { Alert, AlertAction, AlertDescription, AlertTitle } from "../../../components/ui/alert.js";
+import { Spinner } from "../../../components/ui/spinner.js";
+import { Button } from "../../../components/ui/button.js";
+import { Input } from "../../../components/ui/input.js";
+import { Textarea } from "../../../components/ui/textarea.js";
+import { Field, FieldDescription, FieldError, FieldLabel } from "../../../components/ui/field.js";
+import { HoldButton } from "../../../motion/hold-button/hold-button.js";
+import { formatArgValue, formatArgs, parseArgs } from "./json-args.js";
+import { ApprovalCard } from "../../../components/assistant-ui/elements/approval-card.js";
+import { DiffViewer } from "../../../components/ui/diff-viewer.js";
+import * as React from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "cn";
+import { AlertCircleIcon, PencilIcon, ShieldAlertIcon, WrenchIcon, XIcon } from "lucide-react";
+//#region src/ai/compositions/tool-approval/tool-approval.tsx
+/**
+* The receipt a settled call shows in place of the buttons. It is worded from
+* the record: a call with no approval on it claims no approval.
+*/
+function receipt(toolCall) {
+	const { approval, status } = toolCall;
+	const by = approval?.decidedBy ? ` by ${approval.decidedBy}` : "";
+	if (approval?.decision === "rejected" || status === "denied") return {
+		state: "denied",
+		label: `Denied${by}${approval?.reason ? `: ${approval.reason}` : ""}`
+	};
+	if (status === "cancelled") return {
+		state: "denied",
+		label: "Cancelled"
+	};
+	const allowed = !approval ? null : approval.byStandingPermission ? "Allowed by standing permission" : `Approved${approval.amendedArgs ? " with edits" : ""}${by}`;
+	const then = (outcome) => allowed ? `${allowed}, ${outcome}` : capitalize(outcome);
+	if (status === "failed") {
+		const why = toolCall.error ? `: ${toolCall.error.message}` : "";
+		return {
+			state: "denied",
+			label: allowed ? `${then("then failed")}${why}` : `Failed${why}`
+		};
+	}
+	if (status === "succeeded") return {
+		state: "done",
+		label: then("finished")
+	};
+	return {
+		state: "running",
+		label: then("running")
+	};
+}
+function capitalize(text) {
+	return text.charAt(0).toUpperCase() + text.slice(1);
+}
+function isSettled(toolCall) {
+	return toolCall.approval !== void 0 || toolCall.status !== "awaiting-approval";
+}
+/**
+* A card for one tool call waiting on the owner. Approve it, deny it (with an
+* optional reason), edit its arguments and then approve (the card shows a
+* diff of the edits and emits the amended arguments), or allow the tool from
+* now on. A dangerous tool needs a press-and-hold to approve (HoldButton:
+* hold Space or Enter on the keyboard).
+*
+* Decisions are non-optimistic: the card shows `pending` until the app
+* settles `toolCall` (its `approval`, or a status past `awaiting-approval`),
+* then shows the outcome as a receipt. A failed decision shows `error` in
+* place, keeping any edits, until the owner dismisses it.
+*
+* Built on the registry's `elements-approval-card`, with `diff-viewer` for the
+* edit diff and HoldButton for dangerous tools.
+*/
+function ToolApproval({ toolCall, title, agent, description, onApprove, onDeny, onAlwaysAllow, editable = true, pending = false, error, onDismissError, holdDuration = 1500, className, ...props }) {
+	const baseId = React.useId();
+	const [mode, setMode] = React.useState("review");
+	const [reason, setReason] = React.useState("");
+	const original = React.useMemo(() => formatArgs(toolCall.args), [toolCall.args]);
+	const [draft, setDraft] = React.useState(original);
+	const [holdHint, setHoldHint] = React.useState(false);
+	const denyButton = React.useRef(null);
+	const editButton = React.useRef(null);
+	const reasonInput = React.useRef(null);
+	const argsEditor = React.useRef(null);
+	const settled = isSettled(toolCall);
+	const dangerous = toolCall.dangerous === true;
+	const parsed = React.useMemo(() => parseArgs(draft), [draft]);
+	const changed = parsed.ok && parsed.text !== original;
+	React.useEffect(() => {
+		if (mode === "deny") reasonInput.current?.focus();
+		if (mode === "edit") argsEditor.current?.focus();
+	}, [mode]);
+	const leave = (to) => {
+		setMode("review");
+		requestAnimationFrame(() => to.current?.focus());
+	};
+	const deny = () => {
+		if (pending) return;
+		const trimmed = reason.trim();
+		onDeny(trimmed === "" ? void 0 : trimmed);
+	};
+	const approveEdited = () => {
+		if (pending || !parsed.ok || !changed) return;
+		onApprove(parsed.args);
+	};
+	const errorId = `${baseId}-error`;
+	const reasonId = `${baseId}-reason`;
+	const editorId = `${baseId}-args`;
+	const editorHelpId = `${baseId}-args-help`;
+	const holdHintId = `${baseId}-hold-hint`;
+	const secondary = "@max-sm/approval:flex-1";
+	const primary = "@max-sm/approval:w-full";
+	const approveButton = (label, onConfirm, disabled) => dangerous ? /* @__PURE__ */ jsx(HoldButton, {
+		variant: "destructive",
+		holdDuration,
+		doneLabel: "Approving",
+		disabled: disabled || pending,
+		onHold: onConfirm,
+		onTap: () => setHoldHint(true),
+		onBlur: () => setHoldHint(false),
+		"aria-describedby": holdHint ? holdHintId : void 0,
+		"data-action": "approve",
+		className: primary,
+		children: `Hold to ${label.toLowerCase()}`
+	}) : /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		disabled: disabled || pending,
+		onClick: onConfirm,
+		"data-action": "approve",
+		className: primary,
+		children: label
+	});
+	const pendingStatus = pending ? /* @__PURE__ */ jsxs("span", {
+		className: "inline-flex basis-full items-center justify-end gap-1.5 text-muted-foreground text-xs",
+		children: [/* @__PURE__ */ jsx(Spinner, {
+			"aria-hidden": "true",
+			className: "size-3.5"
+		}), "Recording decision"]
+	}) : null;
+	const actions = mode === "deny" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		pendingStatus,
+		/* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "ghost",
+			disabled: pending,
+			onClick: () => leave(denyButton),
+			className: secondary,
+			children: "Back"
+		}),
+		/* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "destructive",
+			disabled: pending,
+			onClick: deny,
+			"data-action": "deny-confirm",
+			className: primary,
+			children: "Deny"
+		})
+	] }) : mode === "edit" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		pendingStatus,
+		/* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "ghost",
+			disabled: pending,
+			onClick: () => leave(editButton),
+			className: secondary,
+			children: "Cancel"
+		}),
+		approveButton("Approve with edits", approveEdited, !parsed.ok || !changed)
+	] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		pendingStatus,
+		/* @__PURE__ */ jsx(Button, {
+			ref: denyButton,
+			type: "button",
+			variant: "ghost",
+			disabled: pending,
+			onClick: () => setMode("deny"),
+			"data-action": "deny",
+			className: secondary,
+			children: "Deny"
+		}),
+		editable ? /* @__PURE__ */ jsxs(Button, {
+			ref: editButton,
+			type: "button",
+			variant: "ghost",
+			disabled: pending,
+			onClick: () => {
+				setDraft(original);
+				setMode("edit");
+			},
+			"data-action": "edit",
+			className: secondary,
+			children: [/* @__PURE__ */ jsx(PencilIcon, { "aria-hidden": "true" }), "Edit"]
+		}) : null,
+		onAlwaysAllow ? /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "outline",
+			disabled: pending,
+			onClick: onAlwaysAllow,
+			"data-action": "always-allow",
+			className: secondary,
+			children: "Always allow"
+		}) : null,
+		approveButton("Approve", () => onApprove(), false)
+	] });
+	const argEntries = Object.entries(toolCall.args);
+	const outcome = settled ? receipt(toolCall) : null;
+	const subtitle = [agent, title && title !== toolCall.name ? toolCall.name : null].filter(Boolean).join(" · ");
+	return /* @__PURE__ */ jsxs(ApprovalCard, {
+		...props,
+		"data-tool-approval": "",
+		"data-mode": settled ? "settled" : mode,
+		"aria-busy": pending || void 0,
+		state: outcome?.state ?? "request",
+		statusLabel: outcome?.label,
+		title: title ?? toolCall.name,
+		subtitle: subtitle || (dangerous ? "Dangerous tool" : "Tool call"),
+		description,
+		variant: dangerous ? "destructive" : "default",
+		icon: dangerous ? /* @__PURE__ */ jsx(ShieldAlertIcon, { className: "size-4" }) : /* @__PURE__ */ jsx(WrenchIcon, { className: "size-4" }),
+		details: mode === "edit" || argEntries.length === 0 ? void 0 : argEntries.map(([label, value]) => ({
+			label,
+			value: formatArgValue(value)
+		})),
+		actions: settled ? void 0 : actions,
+		className: cn("@container/approval max-w-lg", className),
+		children: [
+			!settled && mode === "deny" ? /* @__PURE__ */ jsxs(Field, {
+				"data-part": "deny-form",
+				children: [/* @__PURE__ */ jsx(FieldLabel, {
+					htmlFor: reasonId,
+					children: "Reason (optional)"
+				}), /* @__PURE__ */ jsx(Input, {
+					ref: reasonInput,
+					id: reasonId,
+					value: reason,
+					disabled: pending,
+					placeholder: "Tell the agent why",
+					autoComplete: "off",
+					onChange: (event) => setReason(event.target.value),
+					onKeyDown: (event) => {
+						if (event.key === "Enter" && !event.nativeEvent.isComposing) {
+							event.preventDefault();
+							deny();
+						} else if (event.key === "Escape" && !pending) {
+							event.preventDefault();
+							event.stopPropagation();
+							leave(denyButton);
+						}
+					}
+				})]
+			}) : null,
+			!settled && mode === "edit" ? /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-3",
+				"data-part": "editor",
+				children: [/* @__PURE__ */ jsxs(Field, {
+					"data-invalid": !parsed.ok || void 0,
+					children: [
+						/* @__PURE__ */ jsx(FieldLabel, {
+							htmlFor: editorId,
+							children: "Arguments (JSON)"
+						}),
+						/* @__PURE__ */ jsx(Textarea, {
+							ref: argsEditor,
+							id: editorId,
+							value: draft,
+							disabled: pending,
+							spellCheck: false,
+							autoComplete: "off",
+							"aria-invalid": !parsed.ok || void 0,
+							"aria-describedby": editorHelpId,
+							className: "max-h-72 min-h-24 rounded-xl px-3 py-2.5 font-mono text-xs/relaxed md:text-xs/relaxed",
+							onChange: (event) => setDraft(event.target.value)
+						}),
+						parsed.ok ? /* @__PURE__ */ jsx(FieldDescription, {
+							id: editorHelpId,
+							children: changed ? "The agent runs the call with these arguments." : "Change a value to approve the call with your edits."
+						}) : /* @__PURE__ */ jsx(FieldError, {
+							id: editorHelpId,
+							children: parsed.error
+						})
+					]
+				}), parsed.ok && changed ? /* @__PURE__ */ jsx(DiffViewer, {
+					oldFile: {
+						content: original,
+						name: `${toolCall.name} arguments`
+					},
+					newFile: {
+						content: parsed.text,
+						name: `${toolCall.name} arguments`
+					},
+					viewMode: "unified",
+					copyable: false,
+					className: "max-h-64 overflow-auto rounded-xl"
+				}) : null]
+			}) : null,
+			!settled && error ? /* @__PURE__ */ jsxs(Alert, {
+				variant: "destructive",
+				"data-slot": "tool-approval-error",
+				className: "rounded-xl has-data-[slot=alert-action]:pr-8",
+				children: [
+					/* @__PURE__ */ jsx(AlertCircleIcon, { "aria-hidden": "true" }),
+					/* @__PURE__ */ jsx(AlertTitle, { children: "Decision not recorded" }),
+					/* @__PURE__ */ jsx(AlertDescription, {
+						id: errorId,
+						className: "text-pretty",
+						children: error
+					}),
+					onDismissError ? /* @__PURE__ */ jsx(AlertAction, {
+						className: "top-1 right-1",
+						children: /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							size: "icon-xs",
+							variant: "ghost",
+							"aria-label": "Dismiss error",
+							onClick: onDismissError,
+							children: /* @__PURE__ */ jsx(XIcon, {
+								"aria-hidden": "true",
+								className: "size-3"
+							})
+						})
+					}) : null
+				]
+			}) : null,
+			!settled && dangerous && holdHint ? /* @__PURE__ */ jsx("p", {
+				id: holdHintId,
+				role: "status",
+				className: "text-muted-foreground text-xs",
+				children: "Press and hold to approve: this tool is marked dangerous."
+			}) : null
+		]
+	});
+}
+//#endregion
+export { ToolApproval };

package/dist/ai/compositions/tool-call-row/tool-call-row.js

@@ -0,0 +1,74 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "cn";
+import { useUpdateEffect } from "ahooks";
+import { useReducedMotionConfig } from "motion/react";
+//#region src/ai/compositions/tool-call-row/tool-call-row.tsx
+/**
+* Classes for the CollapsibleTrigger around a ToolCallChip and its chevron,
+* without a focus mark: for a row that marks keyboard focus itself.
+*/
+const toolCallTriggerBaseClassName = "group/trigger flex max-w-full min-w-0 items-center gap-1 rounded-md text-muted-foreground outline-none transition-colors hover:text-foreground";
+/**
+* Classes for the CollapsibleTrigger around a ToolCallChip and its chevron.
+* Keyboard focus marks the chip itself, with the Button focus family (ring
+* border plus a soft 2px ring), so no second outline wraps chip and chevron.
+* A failed or denied chip keeps its destructive tone, as the destructive
+* Button does, so focus never draws a grey ring around its red border.
+*/
+const toolCallTriggerClassName = cn(toolCallTriggerBaseClassName, "focus-visible:[&>[data-slot=tool-call-chip]]:border-ring focus-visible:[&>[data-slot=tool-call-chip]]:ring-2 focus-visible:[&>[data-slot=tool-call-chip]]:ring-ring/30", "focus-visible:[&>[data-slot=tool-call-chip][data-status=error]]:border-destructive/60 focus-visible:[&>[data-slot=tool-call-chip][data-status=error]]:ring-destructive/20 dark:focus-visible:[&>[data-slot=tool-call-chip][data-status=error]]:ring-destructive/40");
+/**
+* How long after a tool call opens to scroll it into view: past
+* ToolFallback's 200ms expand animation, whose scroll lock would undo an
+* earlier scroll.
+*/
+const REVEAL_DELAY_MS = 250;
+/**
+* Scrolls the returned ref's element into view (nearest edge) after `open`
+* turns true, so an expanded call near the bottom of a scroller is not left
+* cut off by its edge. Opening on mount (a deep link) scrolls nothing here.
+*/
+function useRevealOnOpen(open) {
+	const ref = React.useRef(null);
+	const reduced = useReducedMotionConfig() ?? false;
+	useUpdateEffect(() => {
+		if (!open) return;
+		const timer = window.setTimeout(() => {
+			ref.current?.scrollIntoView({
+				block: "nearest",
+				behavior: reduced ? "auto" : "smooth"
+			});
+		}, REVEAL_DELAY_MS);
+		return () => window.clearTimeout(timer);
+	}, [open]);
+	return ref;
+}
+/**
+* A tool call's arguments or result as indented JSON. Long lines scroll
+* sideways inside the block instead of wrapping to column 0, and the block is
+* focusable so a keyboard can scroll it.
+*/
+function ToolCallJson({ heading, text }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "tool-call-json",
+		children: [heading ? /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground text-xs font-medium",
+			children: heading
+		}) : null, /* @__PURE__ */ jsx("pre", {
+			tabIndex: 0,
+			className: cn("overflow-x-auto rounded-md border border-border/60 bg-muted/50 p-2.5 text-xs whitespace-pre text-foreground/90 outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30", heading && "mt-1"),
+			children: text
+		})]
+	});
+}
+/** A tool result as display text: strings as they are, anything else as JSON. */
+function formatToolValue(value) {
+	if (typeof value === "string") return value;
+	try {
+		return JSON.stringify(value, null, 2) ?? String(value);
+	} catch {
+		return String(value);
+	}
+}
+//#endregion
+export { ToolCallJson, formatToolValue, toolCallTriggerBaseClassName, toolCallTriggerClassName, useRevealOnOpen };