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

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

@@ -0,0 +1,703 @@
+import { Alert, AlertDescription, AlertTitle } from "../../../components/ui/alert.js";
+import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from "../../../components/ui/empty.js";
+import { Skeleton } from "../../../components/ui/skeleton.js";
+import { CheckItem } from "../../../motion/check-item/check-item.js";
+import { ScrubSelect } from "../../../motion/scrub-select/scrub-select.js";
+import { StatusGlyph } from "../../../motion/status-glyph/status-glyph.js";
+import { Stepper } from "../../../motion/stepper/stepper.js";
+import { mono, paper } from "../../../components/assistant-ui/elements/surfaces.js";
+import { formatLatency } from "../usage-meter/usage-format.js";
+import { UsageMeter } from "../usage-meter/usage-meter.js";
+import { ReasoningContent, ReasoningRoot, ReasoningText, ReasoningTrigger } from "../../../components/assistant-ui/elements/reasoning.js";
+import { ToolTimeline } from "../../../components/assistant-ui/elements/tool-timeline.js";
+import { TraceWaterfall } from "../../../components/assistant-ui/elements/trace-waterfall.js";
+import { JsonView } from "./json-view.js";
+import { RUN_STATUS_LABEL, STEP_STATUS_LABEL, attemptMark, attemptsOf, defaultStepId, paragraphsOf, runBounds, stepStatusLabel, stepTiming, timeOf, toSpans } from "./run-model.js";
+import * as React from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "cn";
+import { AlertCircleIcon, ChartGanttIcon, CircleCheckIcon, CircleXIcon, ListTreeIcon, RotateCcwIcon } from "lucide-react";
+import { useBoolean, useControllableValue } from "ahooks";
+import { useReducedMotionConfig } from "motion/react";
+//#region src/ai/compositions/run-inspector/run-inspector.tsx
+const timeFormat = new Intl.DateTimeFormat("en-GB", {
+	hour: "2-digit",
+	minute: "2-digit",
+	second: "2-digit"
+});
+function defaultFormatTime(iso) {
+	const ms = timeOf(iso);
+	return ms === void 0 ? iso : timeFormat.format(ms);
+}
+const RUN_GLYPH = {
+	pending: "pending",
+	running: "running",
+	waiting: "pending",
+	succeeded: "done",
+	failed: "failed",
+	cancelled: "cancelled"
+};
+const STEP_GLYPH = {
+	pending: "pending",
+	running: "running",
+	succeeded: "done",
+	failed: "failed",
+	skipped: "cancelled"
+};
+const TOOL_GLYPH = {
+	running: "running",
+	"awaiting-approval": "pending",
+	succeeded: "done",
+	failed: "failed",
+	denied: "cancelled",
+	cancelled: "cancelled"
+};
+const TOOL_STATUS_LABEL = {
+	running: "Running",
+	"awaiting-approval": "Awaiting approval",
+	succeeded: "Succeeded",
+	failed: "Failed",
+	denied: "Denied",
+	cancelled: "Cancelled"
+};
+const KIND_LABEL = {
+	message: "Message",
+	reasoning: "Reasoning",
+	"tool-call": "Tool call",
+	approval: "Approval",
+	progress: "Progress",
+	plan: "Plan",
+	error: "Error"
+};
+/**
+* A short tag for a step in the timeline: the tool for a call, else its kind,
+* with `#2` and up for a retry, as the waterfall marks it.
+*/
+function chipOf(step) {
+	return `${step.toolCall?.name ?? KIND_LABEL[step.kind].toLowerCase()}${attemptMark(step)}`;
+}
+function glyphIcon(status) {
+	function Glyph() {
+		return /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "flex shrink-0",
+			children: /* @__PURE__ */ jsx(StatusGlyph, {
+				status,
+				size: 14
+			})
+		});
+	}
+	Glyph.displayName = `RunStepGlyph(${status})`;
+	return Glyph;
+}
+const GLYPH_ICON = {
+	pending: glyphIcon("pending"),
+	running: glyphIcon("running"),
+	done: glyphIcon("done"),
+	failed: glyphIcon("failed"),
+	cancelled: glyphIcon("cancelled")
+};
+/** A StatusGlyph with its status in words beside it; the glyph is decoration. */
+function StatusText({ status, children, className }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn("inline-flex min-w-0 items-center gap-1.5", className),
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "flex shrink-0",
+			children: /* @__PURE__ */ jsx(StatusGlyph, {
+				status,
+				size: 14
+			})
+		}), /* @__PURE__ */ jsx("span", {
+			className: "min-w-0",
+			children
+		})]
+	});
+}
+/**
+* A line of facts separated by middle dots. Each fact carries its dot in
+* front, and the row is pulled one dot-width to the start inside a clipping
+* box: whichever fact starts a line has its dot clipped off, so a wrapped line
+* neither starts nor ends with a dot.
+*/
+function FactLine({ facts, className }) {
+	const shown = facts.filter((fact) => fact !== null && fact !== void 0 && fact !== false);
+	return /* @__PURE__ */ jsx("p", {
+		className: cn("text-xs text-muted-foreground", className),
+		children: /* @__PURE__ */ jsx("span", {
+			className: "block overflow-hidden",
+			children: /* @__PURE__ */ jsx("span", {
+				className: "-ms-4 flex flex-wrap items-center gap-y-0.5",
+				children: shown.map((fact, index) => /* @__PURE__ */ jsxs("span", {
+					className: "flex min-w-0 items-center",
+					children: [/* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: "w-4 shrink-0 text-center",
+						children: "·"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "min-w-0",
+						children: fact
+					})]
+				}, index))
+			})
+		})
+	});
+}
+function ErrorAlert({ error, title }) {
+	const details = [error.code ? /* @__PURE__ */ jsx("span", {
+		className: mono,
+		children: error.code
+	}, "code") : null, error.retryable === void 0 ? null : error.retryable ? "Retryable" : "Not retryable"].filter((item) => item !== null);
+	return /* @__PURE__ */ jsxs(Alert, {
+		variant: "destructive",
+		"data-slot": "run-inspector-error",
+		children: [
+			/* @__PURE__ */ jsx(AlertCircleIcon, { "aria-hidden": "true" }),
+			/* @__PURE__ */ jsx(AlertTitle, { children: title }),
+			/* @__PURE__ */ jsxs(AlertDescription, {
+				className: "flex flex-col gap-0.5 [&_p:not(:last-child)]:mb-0",
+				children: [/* @__PURE__ */ jsx("p", { children: error.message }), details.length > 0 ? /* @__PURE__ */ jsx("p", {
+					className: "flex flex-wrap items-center gap-x-1.5",
+					children: details.map((detail, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [index > 0 ? /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						children: "·"
+					}) : null, detail] }, index))
+				}) : null]
+			})
+		]
+	});
+}
+/** "Approved by Kevin at 09:02", worded from the record. */
+function decisionLine(approval, formatTime) {
+	const by = approval.decidedBy ? ` by ${approval.decidedBy}` : "";
+	const at = ` at ${formatTime(approval.decidedAt)}`;
+	if (approval.decision === "rejected") return `Denied${by}${at}`;
+	if (approval.byStandingPermission) return `Allowed by standing permission${at}`;
+	return `Approved${approval.amendedArgs ? " with edits" : ""}${by}${at}`;
+}
+function Decision({ approval, formatTime }) {
+	const rejected = approval.decision === "rejected";
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "run-inspector-decision",
+		className: "flex flex-col gap-1",
+		children: [/* @__PURE__ */ jsxs("p", {
+			className: "flex items-center gap-1.5 text-xs text-foreground",
+			children: [/* @__PURE__ */ jsx(rejected ? CircleXIcon : CircleCheckIcon, {
+				"aria-hidden": "true",
+				className: cn("size-3.5 shrink-0", rejected ? "text-destructive" : "text-chart-2")
+			}), decisionLine(approval, formatTime)]
+		}), approval.reason ? /* @__PURE__ */ jsx("blockquote", {
+			className: "border-border border-s-2 ps-2.5 text-xs text-muted-foreground",
+			children: approval.reason
+		}) : null]
+	});
+}
+/** A labeled block in the step detail. */
+function Block({ title, children, className }) {
+	const id = React.useId();
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-labelledby": id,
+		className: cn("flex min-w-0 flex-col gap-1.5", className),
+		children: [/* @__PURE__ */ jsx("h4", {
+			id,
+			className: "text-xs font-medium text-muted-foreground",
+			children: title
+		}), children]
+	});
+}
+function ToolCallBody({ toolCall, formatTime }) {
+	const unfinished = toolCall.status === "running" || toolCall.status === "awaiting-approval";
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-wrap items-center gap-x-2.5 gap-y-1.5",
+			children: [
+				/* @__PURE__ */ jsx("code", {
+					className: cn(mono, "rounded-md bg-foreground/[0.06] px-1.5 py-0.5 text-foreground/80 [overflow-wrap:anywhere]"),
+					children: toolCall.name
+				}),
+				/* @__PURE__ */ jsx(StatusText, {
+					status: TOOL_GLYPH[toolCall.status],
+					className: "text-xs text-foreground",
+					children: TOOL_STATUS_LABEL[toolCall.status]
+				}),
+				toolCall.dangerous ? /* @__PURE__ */ jsxs("span", {
+					className: "inline-flex items-center gap-1.5 text-xs text-destructive",
+					children: [/* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: "size-1.5 shrink-0 rounded-full bg-destructive"
+					}), "Dangerous"]
+				}) : null
+			]
+		}),
+		toolCall.approval ? /* @__PURE__ */ jsx(Decision, {
+			approval: toolCall.approval,
+			formatTime
+		}) : toolCall.status === "awaiting-approval" ? /* @__PURE__ */ jsx("p", {
+			className: "text-xs text-muted-foreground",
+			children: "Waiting for the owner's decision."
+		}) : null,
+		toolCall.error ? /* @__PURE__ */ jsx(ErrorAlert, {
+			error: toolCall.error,
+			title: "The call failed"
+		}) : null,
+		/* @__PURE__ */ jsx(Block, {
+			title: "Input",
+			children: /* @__PURE__ */ jsx(JsonView, {
+				value: toolCall.args,
+				label: `${toolCall.name} input`
+			})
+		}),
+		toolCall.approval?.amendedArgs ? /* @__PURE__ */ jsx(Block, {
+			title: "Input as approved",
+			children: /* @__PURE__ */ jsx(JsonView, {
+				value: toolCall.approval.amendedArgs,
+				label: `${toolCall.name} input as approved`
+			})
+		}) : null,
+		/* @__PURE__ */ jsx(Block, {
+			title: "Result",
+			children: toolCall.result !== void 0 ? /* @__PURE__ */ jsx(JsonView, {
+				value: toolCall.result,
+				label: `${toolCall.name} result`
+			}) : /* @__PURE__ */ jsx("p", {
+				className: "text-xs text-muted-foreground",
+				children: unfinished ? "No result yet." : "No result recorded."
+			})
+		})
+	] });
+}
+function PlanBody({ plan }) {
+	const doneCount = plan.filter((item) => item.done).length;
+	const current = plan.findIndex((item) => !item.done);
+	const completed = current === -1;
+	const checklist = /* @__PURE__ */ jsx("ul", {
+		"aria-label": "Plan items",
+		className: "flex flex-col gap-1",
+		children: plan.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(CheckItem, {
+			label: item.label,
+			description: item.description,
+			checked: item.done,
+			"aria-readonly": "true",
+			tabIndex: -1,
+			className: "pointer-events-none"
+		}) }, item.id))
+	});
+	if (plan.length === 0) return /* @__PURE__ */ jsx("p", {
+		className: "text-xs text-muted-foreground",
+		children: "The plan has no items."
+	});
+	return /* @__PURE__ */ jsx(Block, {
+		title: `Plan, ${doneCount} of ${plan.length} done`,
+		children: /* @__PURE__ */ jsx(Stepper, {
+			label: "Plan progress",
+			navigation: false,
+			clickableSteps: false,
+			step: completed ? plan.length - 1 : current,
+			completed,
+			completionTitle: "Plan complete",
+			completion: checklist,
+			className: "gap-4 [&_[data-slot=stepper-panel]>h3]:text-sm [&_[data-slot=stepper-panel]>h3]:font-medium [&_[data-slot=stepper-panel]>p]:text-xs",
+			steps: plan.map((item, index) => ({
+				id: item.id,
+				title: item.label,
+				description: `Step ${index + 1} of ${plan.length}`,
+				content: checklist
+			}))
+		})
+	});
+}
+function StepBody({ step, timing, formatTime }) {
+	switch (step.kind) {
+		case "tool-call": return step.toolCall ? /* @__PURE__ */ jsx(ToolCallBody, {
+			toolCall: step.toolCall,
+			formatTime
+		}) : null;
+		case "reasoning": {
+			const seconds = timing.durationMs !== void 0 && !timing.open ? Math.max(1, Math.round(timing.durationMs / 1e3)) : void 0;
+			return step.text ? /* @__PURE__ */ jsxs(ReasoningRoot, {
+				variant: "muted",
+				defaultOpen: true,
+				streaming: step.status === "running",
+				className: "mb-0",
+				children: [/* @__PURE__ */ jsx(ReasoningTrigger, {
+					active: step.status === "running",
+					...seconds !== void 0 ? { duration: seconds } : {}
+				}), /* @__PURE__ */ jsx(ReasoningContent, { children: /* @__PURE__ */ jsx(ReasoningText, {
+					className: "text-xs/relaxed",
+					children: paragraphsOf(step.text).map((paragraph) => /* @__PURE__ */ jsx("p", { children: paragraph }, paragraph))
+				}) })]
+			}) : null;
+		}
+		case "message":
+		case "progress":
+		case "error": return step.text ? /* @__PURE__ */ jsx("div", {
+			className: cn("flex flex-col gap-2 text-xs/relaxed text-foreground wrap-break-word", step.kind === "message" && "rounded-xl bg-muted px-3 py-2.5"),
+			children: paragraphsOf(step.text).map((paragraph) => /* @__PURE__ */ jsx("p", {
+				className: "whitespace-pre-wrap",
+				children: paragraph
+			}, paragraph))
+		}) : null;
+		case "approval": return step.approval ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Decision, {
+			approval: step.approval,
+			formatTime
+		}), step.approval.amendedArgs ? /* @__PURE__ */ jsx(Block, {
+			title: "Input as approved",
+			children: /* @__PURE__ */ jsx(JsonView, {
+				value: step.approval.amendedArgs,
+				label: "Input as approved"
+			})
+		}) : null] }) : null;
+		case "plan": return step.plan ? /* @__PURE__ */ jsx(PlanBody, { plan: step.plan }) : null;
+	}
+}
+function StepDetail({ step, steps, bounds, formatTime, onSelect }) {
+	const titleId = React.useId();
+	const timing = stepTiming(step, bounds);
+	const attempts = attemptsOf(step, steps);
+	const duration = timing.durationMs === void 0 ? null : timing.open ? `Running for ${formatLatency(timing.durationMs)}` : `Took ${formatLatency(timing.durationMs)}`;
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-labelledby": titleId,
+		"data-slot": "run-inspector-detail",
+		"data-step-id": step.id,
+		className: cn(paper, "flex min-w-0 flex-col gap-4 rounded-2xl p-4"),
+		children: [
+			/* @__PURE__ */ jsxs("header", {
+				className: "flex min-w-0 flex-col gap-1",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 items-start gap-2",
+					children: [/* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: "mt-px flex shrink-0",
+						children: /* @__PURE__ */ jsx(StatusGlyph, {
+							status: STEP_GLYPH[step.status],
+							size: 16
+						})
+					}), /* @__PURE__ */ jsx("h3", {
+						id: titleId,
+						className: "min-w-0 text-sm font-medium text-foreground wrap-break-word",
+						children: step.label
+					})]
+				}), /* @__PURE__ */ jsx(FactLine, {
+					className: "ps-6",
+					facts: [
+						stepStatusLabel(step),
+						KIND_LABEL[step.kind],
+						/* @__PURE__ */ jsxs(Fragment$1, { children: [
+							"Started ",
+							/* @__PURE__ */ jsx("time", {
+								dateTime: step.startedAt,
+								children: formatTime(step.startedAt)
+							}),
+							/* @__PURE__ */ jsxs("span", {
+								className: "tabular-nums",
+								children: [
+									" (+",
+									formatLatency(timing.offsetMs),
+									")"
+								]
+							})
+						] }),
+						duration,
+						(step.attempt ?? 1) > 1 ? `Attempt ${step.attempt}` : null
+					]
+				})]
+			}),
+			attempts.length > 1 ? /* @__PURE__ */ jsxs("nav", {
+				"aria-label": "Attempts",
+				className: "flex flex-wrap items-center gap-1.5",
+				children: [/* @__PURE__ */ jsx(RotateCcwIcon, {
+					"aria-hidden": "true",
+					className: "size-3.5 text-muted-foreground"
+				}), attempts.map((attempt) => {
+					const current = attempt.id === step.id;
+					return /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						"aria-current": current ? "true" : void 0,
+						"aria-label": `Attempt ${attempt.attempt ?? 1}, ${STEP_STATUS_LABEL[attempt.status].toLowerCase()}`,
+						onClick: () => onSelect(attempt.id),
+						className: cn("inline-flex h-6 items-center gap-1.5 rounded-md border px-2 text-xs outline-none transition-colors focus-visible:border-ring focus-visible:bg-foreground/[0.04] focus-visible:text-foreground", current ? "border-foreground/20 bg-foreground/[0.06] text-foreground" : "border-border text-muted-foreground hover:bg-foreground/[0.04] hover:text-foreground"),
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								"aria-hidden": "true",
+								className: "flex",
+								children: /* @__PURE__ */ jsx(StatusGlyph, {
+									status: STEP_GLYPH[attempt.status],
+									size: 12
+								})
+							}),
+							"Attempt ",
+							attempt.attempt ?? 1
+						]
+					}, attempt.id);
+				})]
+			}) : null,
+			step.error && !step.toolCall?.error ? /* @__PURE__ */ jsx(ErrorAlert, {
+				error: step.error,
+				title: "The step failed"
+			}) : null,
+			/* @__PURE__ */ jsx(StepBody, {
+				step,
+				timing,
+				formatTime
+			}),
+			step.status === "pending" && !step.text && !step.toolCall && !step.plan ? /* @__PURE__ */ jsx("p", {
+				className: "text-xs text-muted-foreground",
+				children: "This step has not started."
+			}) : null
+		]
+	});
+}
+function InspectorSkeleton() {
+	return /* @__PURE__ */ jsxs("div", {
+		role: "status",
+		"data-slot": "run-inspector-loading",
+		className: "flex flex-col gap-4",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: "Loading run"
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-2",
+				children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-2/3" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-1/2" })]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "grid gap-4 @3xl/run:grid-cols-2",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "flex flex-col gap-2.5 rounded-2xl border border-border/60 p-4",
+					children: Array.from({ length: 6 }, (_, index) => /* @__PURE__ */ jsx(Skeleton, {
+						className: "h-4",
+						style: { width: `${88 - index * 7}%` }
+					}, index))
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-2.5 rounded-2xl border border-border/60 p-4",
+					children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/2" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-24 w-full" })]
+				})]
+			})
+		]
+	});
+}
+const VIEW_OPTIONS = [{
+	value: "timeline",
+	label: "Timeline",
+	icon: /* @__PURE__ */ jsx(ListTreeIcon, { "aria-hidden": "true" })
+}, {
+	value: "waterfall",
+	label: "Waterfall",
+	icon: /* @__PURE__ */ jsx(ChartGanttIcon, { "aria-hidden": "true" })
+}];
+/**
+* The timeline of one agent run: its steps, reasoning, tool calls with their
+* input and result, timings, errors and retries, and the run's usage.
+*
+* Two views of the steps, switched with a ScrubSelect: a timeline (the
+* registry's ToolTimeline, one row per step with its StatusGlyph) and a
+* waterfall (the registry's TraceWaterfall, each step a bar on the run's time
+* axis). Either way the steps are a listbox: a click or the arrow keys (Home
+* and End too) select a step, and its detail shows beside the steps on a wide
+* container and below them on a narrow one. Plan steps show their progress
+* with a Stepper and their items with CheckItems.
+*
+* Dumb: the run is a prop, and selection and view are UI state the app may
+* control. It never reads a clock: pass `now` to measure a live run.
+*
+* Scale limit: both views mount every step - neither the timeline nor the
+* waterfall virtualizes - so rendering cost grows with the run's step count.
+*/
+function RunInspector(props) {
+	const { run, title = run.objective, label = `Run: ${run.objective}`, selectedStepId: _selectedStepId, defaultSelectedStepId: _defaultSelectedStepId, onSelectedStepChange: _onSelectedStepChange, view: _view, defaultView: _defaultView, onViewChange: _onViewChange, now, formatTime = defaultFormatTime, isLoading = false, error, className, ...rest } = props;
+	const reduced = useReducedMotionConfig() ?? false;
+	const selection = {};
+	if (_selectedStepId !== void 0) selection.selectedStepId = _selectedStepId;
+	if (_defaultSelectedStepId !== void 0) selection.defaultSelectedStepId = _defaultSelectedStepId;
+	if (_onSelectedStepChange) selection.onSelectedStepChange = _onSelectedStepChange;
+	const [selectedState, setSelected] = useControllableValue(selection, {
+		valuePropName: "selectedStepId",
+		defaultValuePropName: "defaultSelectedStepId",
+		trigger: "onSelectedStepChange",
+		defaultValue: null
+	});
+	const viewProps = {};
+	if (_view !== void 0) viewProps.view = _view;
+	if (_defaultView !== void 0) viewProps.defaultView = _defaultView;
+	if (_onViewChange) viewProps.onViewChange = _onViewChange;
+	const [view, setView] = useControllableValue(viewProps, {
+		valuePropName: "view",
+		defaultValuePropName: "defaultView",
+		trigger: "onViewChange",
+		defaultValue: "timeline"
+	});
+	const [timelineOpen, timelineToggle] = useBoolean(true);
+	const steps = run.steps;
+	const bounds = React.useMemo(() => runBounds(run, now), [run, now]);
+	const spans = React.useMemo(() => toSpans(run, bounds), [run, bounds]);
+	const selectedId = selectedState && steps.some((step) => step.id === selectedState) ? selectedState : defaultStepId(steps);
+	const selected = steps.find((step) => step.id === selectedId);
+	const timelineSteps = React.useMemo(() => steps.map((step) => ({
+		id: step.id,
+		verb: step.label,
+		chip: chipOf(step),
+		icon: GLYPH_ICON[STEP_GLYPH[step.status]],
+		label: `${step.label}, ${stepStatusLabel(step).toLowerCase()}, ${chipOf(step)}`
+	})), [steps]);
+	const detailRef = React.useRef(null);
+	const stepsRef = React.useRef(null);
+	const pointerSelect = React.useRef(false);
+	const select = (id) => {
+		setSelected(id);
+		if (!pointerSelect.current) return;
+		pointerSelect.current = false;
+		const detail = detailRef.current;
+		const list = stepsRef.current;
+		if (!detail || !list) return;
+		if (detail.getBoundingClientRect().top >= list.getBoundingClientRect().bottom - 1) requestAnimationFrame(() => detail.scrollIntoView({
+			block: "nearest",
+			behavior: reduced ? "auto" : "smooth"
+		}));
+	};
+	const durationMs = bounds.end - bounds.start;
+	const running = run.status === "running" || run.status === "waiting";
+	const finished = run.status !== "pending" && !running;
+	const emptyCopy = run.status === "pending" ? "Steps show here once the agent starts." : running ? "Steps show here as the agent works." : "This run ended without recording any steps.";
+	const stepCount = `${steps.length} ${steps.length === 1 ? "step" : "steps"}`;
+	const showsDuration = steps.length > 0 || bounds.ended;
+	const usage = run.usage && showsDuration ? {
+		...run.usage,
+		latencyMs: void 0
+	} : run.usage;
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-label": label,
+		"aria-busy": isLoading || void 0,
+		"data-slot": "run-inspector",
+		"data-status": run.status,
+		className: cn("@container/run flex min-w-0 flex-col gap-4 text-sm", className),
+		...rest,
+		children: [
+			/* @__PURE__ */ jsxs("header", {
+				"data-slot": "run-inspector-header",
+				className: "flex min-w-0 flex-col gap-2.5",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: cn("flex min-w-0 items-start", title === null ? "gap-3" : "gap-2.5"),
+					children: [/* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: cn("flex shrink-0", title !== null && "mt-px"),
+						children: /* @__PURE__ */ jsx(StatusGlyph, {
+							status: RUN_GLYPH[run.status],
+							size: title === null ? 16 : 18
+						})
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex min-w-0 flex-1 flex-col gap-1",
+						children: [title === null ? null : /* @__PURE__ */ jsx("h2", {
+							className: "text-sm font-medium leading-snug text-foreground wrap-break-word",
+							children: title
+						}), /* @__PURE__ */ jsx(FactLine, { facts: [
+							/* @__PURE__ */ jsx("span", {
+								className: "font-medium text-foreground",
+								children: RUN_STATUS_LABEL[run.status]
+							}, "status"),
+							run.agent,
+							/* @__PURE__ */ jsx("span", {
+								className: cn(mono, "text-muted-foreground"),
+								children: run.kind
+							}, "kind"),
+							run.startedAt || run.createdAt ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+								"Started",
+								" ",
+								/* @__PURE__ */ jsx("time", {
+									dateTime: run.startedAt ?? run.createdAt,
+									children: formatTime(run.startedAt ?? run.createdAt)
+								})
+							] }) : null,
+							showsDuration ? /* @__PURE__ */ jsxs("span", {
+								className: "tabular-nums",
+								children: [bounds.ended ? "" : "Running for ", formatLatency(durationMs)]
+							}, "duration") : null
+						] })]
+					})]
+				}), usage ? /* @__PURE__ */ jsx(UsageMeter, {
+					usage,
+					scope: "run",
+					className: "ps-7"
+				}) : null]
+			}),
+			error ? /* @__PURE__ */ jsxs(Alert, {
+				variant: "destructive",
+				"data-slot": "run-inspector-load-error",
+				children: [/* @__PURE__ */ jsx(AlertCircleIcon, { "aria-hidden": "true" }), /* @__PURE__ */ jsx(AlertTitle, { children: error })]
+			}) : null,
+			run.error ? /* @__PURE__ */ jsx(ErrorAlert, {
+				error: run.error,
+				title: run.status === "failed" ? "The run failed" : "The run reported an error"
+			}) : null,
+			isLoading && steps.length === 0 ? /* @__PURE__ */ jsx(InspectorSkeleton, {}) : steps.length === 0 ? /* @__PURE__ */ jsx(Empty, {
+				"data-slot": "run-inspector-empty",
+				className: "border",
+				children: /* @__PURE__ */ jsxs(EmptyHeader, { children: [/* @__PURE__ */ jsx(EmptyTitle, { children: finished ? "No steps recorded" : "No steps yet" }), /* @__PURE__ */ jsx(EmptyDescription, { children: emptyCopy })] })
+			}) : /* @__PURE__ */ jsxs("div", {
+				className: "grid min-w-0 gap-4 @3xl/run:grid-cols-[minmax(0,5fr)_minmax(0,6fr)]",
+				children: [/* @__PURE__ */ jsxs("div", {
+					ref: stepsRef,
+					"data-slot": "run-inspector-steps",
+					className: "flex min-w-0 flex-col gap-2",
+					onPointerDownCapture: () => {
+						pointerSelect.current = true;
+					},
+					onKeyDownCapture: () => {
+						pointerSelect.current = false;
+					},
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center justify-between gap-2",
+						children: [/* @__PURE__ */ jsx("h3", {
+							className: "text-xs font-medium text-muted-foreground",
+							children: "Steps"
+						}), /* @__PURE__ */ jsx(ScrubSelect, {
+							size: "sm",
+							label: "View",
+							align: "end",
+							options: VIEW_OPTIONS,
+							value: view,
+							onValueChange: (next) => setView(next)
+						})]
+					}), view === "timeline" ? /* @__PURE__ */ jsx("div", {
+						className: cn(paper, "rounded-2xl px-3 py-2"),
+						children: /* @__PURE__ */ jsx(ToolTimeline, {
+							className: "max-w-none",
+							steps: timelineSteps,
+							visibleSteps: timelineSteps.length,
+							streaming: running,
+							open: timelineOpen,
+							onOpenChange: timelineToggle.set,
+							restingLabel: stepCount,
+							activeLabel: `Working, ${stepCount}`,
+							stats: [],
+							selectedId,
+							onSelectedIdChange: select,
+							listLabel: "Run steps"
+						})
+					}) : /* @__PURE__ */ jsx(TraceWaterfall, {
+						className: "max-w-none",
+						spans,
+						totalMs: Math.round(durationMs),
+						formatDuration: formatLatency,
+						visibleCount: spans.length,
+						selectedId,
+						onSelectedIdChange: select,
+						listLabel: "Run steps"
+					})]
+				}), /* @__PURE__ */ jsx("div", {
+					ref: detailRef,
+					className: "flex min-w-0 scroll-mt-4 flex-col @3xl/run:sticky @3xl/run:top-4 @3xl/run:self-start",
+					children: selected ? /* @__PURE__ */ jsx(StepDetail, {
+						step: selected,
+						steps,
+						bounds,
+						formatTime,
+						onSelect: (id) => setSelected(id)
+					}) : null
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { RunInspector };