@tangle-network/ui 11.10.0 → 11.11.1

package/dist/text-shimmer-BUUo6I-g.js

@@ -0,0 +1,64 @@
+import { t as cn } from "./utils-C_uf36nf.js";
+import { useEffect, useLayoutEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/primitives/text-shimmer.tsx
+const CLASS_NAME = "tangle-text-shimmer";
+const STYLE_ID = "tangle-text-shimmer-styles";
+/**
+* The sweep is a MASK over the text's own colour, not a gradient background
+* clipped to the glyphs: if this stylesheet is missing the text still renders
+* in its normal colour instead of disappearing (`color: transparent`).
+*
+* Mask geometry mirrors the background variant: a 250%-wide tile whose bright
+* band sits at 45–60%, slid from 150% to -50% so one band crosses the text per
+* cycle. The tile repeats, so the .72 floor covers every glyph at every frame —
+* the label reads at ~72% foreground opacity with a brighter sweep through it.
+*/
+const SHIMMER_CSS = `
+@keyframes ${CLASS_NAME} {
+  from { -webkit-mask-position: 150% center; mask-position: 150% center; }
+  to { -webkit-mask-position: -50% center; mask-position: -50% center; }
+}
+.${CLASS_NAME} {
+  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.72) 0%, #000 45%, rgba(0,0,0,0.72) 60%);
+  mask-image: linear-gradient(90deg, rgba(0,0,0,0.72) 0%, #000 45%, rgba(0,0,0,0.72) 60%);
+  -webkit-mask-size: 250% 100%;
+  mask-size: 250% 100%;
+  animation: ${CLASS_NAME} 1.4s linear infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  .${CLASS_NAME} {
+    animation: none;
+    -webkit-mask-image: none;
+    mask-image: none;
+    text-decoration: underline dotted currentColor;
+    text-underline-offset: 3px;
+  }
+}
+`;
+/** Inject the shimmer stylesheet once per document. A no-op on the server. */
+function ensureShimmerStyles() {
+	if (typeof document === "undefined") return;
+	if (document.getElementById(STYLE_ID)) return;
+	const style = document.createElement("style");
+	style.id = STYLE_ID;
+	style.textContent = SHIMMER_CSS;
+	document.head.appendChild(style);
+}
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+/**
+* Inline text with a gradient-mask sweep — the in-flight signal for a run row
+* label ("Thinking…", a tool verb while its call is running). Carries the
+* styles it needs, so a consumer that only scans this package for Tailwind
+* classes still gets the animation.
+*/
+function TextShimmer({ children, className, durationMs = 1400 }) {
+	useIsomorphicLayoutEffect(ensureShimmerStyles, []);
+	return /* @__PURE__ */ jsx("span", {
+		className: cn(CLASS_NAME, "text-foreground", className),
+		style: { animationDuration: `${durationMs}ms` },
+		children
+	});
+}
+//#endregion
+export { TextShimmer as t };

package/dist/tool-call-feed-BeB1_4pX.d.ts

@@ -0,0 +1,47 @@
+import { ReactNode } from "react";
+//#region src/run/tool-call-step.d.ts
+type ToolCallType = "bash" | "read" | "write" | "edit" | "glob" | "grep" | "list" | "download" | "inspect" | "audit" | "unknown";
+type ToolCallStatus = "running" | "success" | "error";
+//#endregion
+//#region src/run/tool-call-feed.d.ts
+interface ToolCallData {
+  id: string;
+  type: ToolCallType;
+  label: string;
+  status: ToolCallStatus;
+  detail?: string;
+  output?: string;
+  duration?: number;
+}
+type FeedSegment = {
+  kind: "text";
+  content: string;
+} | {
+  kind: "tool_call";
+  call: ToolCallData;
+} | {
+  kind: "tool_group";
+  title?: string;
+  calls: ToolCallData[];
+};
+interface ToolCallFeedProps {
+  segments: FeedSegment[];
+  className?: string;
+}
+/**
+ * Renders a feed of interleaved text and tool calls.
+ */
+declare function ToolCallFeed({ segments, className }: ToolCallFeedProps): import("react").JSX.Element | null;
+/**
+ * Parse raw SSE tool events into FeedSegments.
+ *
+ * This is the bridge between the orchestrator's SSE stream format
+ * and the ToolCallFeed component. Consumers call this in their
+ * useToolCallStream hook.
+ */
+declare function parseToolEvent(event: {
+  type: string;
+  data: Record<string, unknown>;
+}): ToolCallData | null;
+//#endregion
+export { parseToolEvent as a, ToolCallFeedProps as i, ToolCallData as n, ToolCallStatus as o, ToolCallFeed as r, ToolCallType as s, FeedSegment as t };

package/dist/tool-call-feed-Djt2q11V.js

@@ -0,0 +1,109 @@
+import { t as cn } from "./utils-C_uf36nf.js";
+import { n as ToolCallStep, t as ToolCallGroup } from "./tool-call-step-DNebqhmX.js";
+import { t as Markdown } from "./markdown-BGqicV82.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/run/tool-call-feed.tsx
+/**
+* Renders a feed of interleaved text and tool calls.
+*/
+function ToolCallFeed({ segments, className }) {
+	if (segments.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("space-y-1", className),
+		children: segments.map((segment, i) => {
+			if (segment.kind === "text") return segment.content.trim() ? /* @__PURE__ */ jsx(Markdown, { children: segment.content }, i) : null;
+			if (segment.kind === "tool_call") return /* @__PURE__ */ jsx(ToolCallStep, {
+				type: segment.call.type,
+				label: segment.call.label,
+				status: segment.call.status,
+				detail: segment.call.detail,
+				output: segment.call.output,
+				duration: segment.call.duration
+			}, segment.call.id || i);
+			if (segment.kind === "tool_group") return /* @__PURE__ */ jsx(ToolCallGroup, {
+				title: segment.title,
+				children: segment.calls.map((call) => /* @__PURE__ */ jsx(ToolCallStep, {
+					type: call.type,
+					label: call.label,
+					status: call.status,
+					detail: call.detail,
+					output: call.output,
+					duration: call.duration
+				}, call.id))
+			}, i);
+			return null;
+		})
+	});
+}
+/**
+* Parse raw SSE tool events into FeedSegments.
+*
+* This is the bridge between the orchestrator's SSE stream format
+* and the ToolCallFeed component. Consumers call this in their
+* useToolCallStream hook.
+*/
+function parseToolEvent(event) {
+	const { type, data } = event;
+	if (type === "tool.invocation" || type === "tool_use") {
+		const toolName = data.name || data.tool || "unknown";
+		const input = data.input;
+		return {
+			id: data.id || data.toolUseId || createId(),
+			type: mapToolName(toolName),
+			label: formatToolLabel(toolName, input),
+			status: "running",
+			detail: input ? formatToolInput(toolName, input) : void 0
+		};
+	}
+	if (type === "tool.result" || type === "tool_result") return {
+		id: data.id || data.toolUseId || "",
+		type: mapToolName(data.name || data.tool || "unknown"),
+		label: formatToolLabel(data.name || data.tool || "unknown"),
+		status: data.error ? "error" : "success",
+		output: truncate(data.output || data.result || "", 500),
+		duration: data.duration
+	};
+	return null;
+}
+function createId() {
+	if (typeof globalThis.crypto !== "undefined" && typeof globalThis.crypto.randomUUID === "function") try {
+		return globalThis.crypto.randomUUID();
+	} catch {}
+	return `tool_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 10)}`;
+}
+function mapToolName(name) {
+	const lower = name.toLowerCase();
+	if (lower.includes("bash") || lower.includes("terminal") || lower.includes("exec")) return "bash";
+	if (lower.includes("read") || lower.includes("cat")) return "read";
+	if (lower.includes("write") || lower.includes("create")) return "write";
+	if (lower.includes("edit") || lower.includes("replace")) return "edit";
+	if (lower.includes("glob") || lower.includes("find")) return "glob";
+	if (lower.includes("grep") || lower.includes("search")) return "grep";
+	if (lower.includes("list") || lower.includes("ls")) return "list";
+	if (lower.includes("inspect")) return "inspect";
+	if (lower.includes("audit")) return "audit";
+	return "unknown";
+}
+function formatToolLabel(toolName, input) {
+	const lower = toolName.toLowerCase();
+	if (lower.includes("bash") && input?.command) {
+		const cmd = String(input.command);
+		return cmd.length > 80 ? `${cmd.slice(0, 77)}...` : cmd;
+	}
+	if ((lower.includes("read") || lower.includes("cat")) && input?.path) return `Read ${input.path}`;
+	if (lower.includes("write") && input?.path) return `Write ${input.path}`;
+	if (lower.includes("edit") && input?.path) return `Edit ${input.path}`;
+	if (lower.includes("glob") && input?.pattern) return `Find ${input.pattern}`;
+	if (lower.includes("grep") && input?.pattern) return `Search for ${input.pattern}`;
+	return toolName;
+}
+function formatToolInput(toolName, input) {
+	if (input.command) return String(input.command);
+	if (input.path) return String(input.path);
+	return JSON.stringify(input, null, 2).slice(0, 300);
+}
+function truncate(text, max) {
+	return text.length > max ? text.slice(0, max - 3) + "..." : text;
+}
+//#endregion
+export { parseToolEvent as n, ToolCallFeed as t };

package/dist/tool-call-step-DNebqhmX.js

@@ -0,0 +1,434 @@
+import { t as cn } from "./utils-C_uf36nf.js";
+import { t as TextShimmer } from "./text-shimmer-BUUo6I-g.js";
+import { t as CodeBlock } from "./code-block-B36KVUSN.js";
+import { i as getToolErrorText, n as getToolCategory, r as getToolDisplayMetadata } from "./tool-display-BAuAVa43.js";
+import { n as formatDuration } from "./format-DfcLWqMa.js";
+import { a as GrepResultsPreview, i as GlobResultsPreview, n as QuestionPreview, o as WriteFilePreview, r as WebSearchPreview, s as CommandPreview, t as DiffPreview } from "./diff-preview-BcK3nRXb.js";
+import { memo, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AlertCircle, ArrowLeft, ArrowRight, Bot, ChevronRight, ClipboardList, FileEdit, FileSearch, FileText, Globe, Loader2, PencilLine, Search, Settings, Terminal } from "lucide-react";
+import * as Collapsible from "@radix-ui/react-collapsible";
+//#region src/run/expandable-content.tsx
+/**
+* Clamps tall content to a fixed height with a bottom fade and a
+* "Show more / Show less" toggle. Content shorter than the cap renders
+* as-is with no toggle.
+*/
+function ExpandableContent({ children, collapsedMaxPx = 180, fadeClassName = "from-muted", className }) {
+	const [expanded, setExpanded] = useState(false);
+	const [overflowing, setOverflowing] = useState(false);
+	const contentRef = useRef(null);
+	useEffect(() => {
+		const el = contentRef.current;
+		if (!el) return;
+		const measure = () => setOverflowing(el.scrollHeight > collapsedMaxPx + 4);
+		measure();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(measure);
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, [collapsedMaxPx]);
+	const clamped = overflowing && !expanded;
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		children: [/* @__PURE__ */ jsxs("div", {
+			ref: contentRef,
+			className: "relative overflow-hidden",
+			style: clamped ? { maxHeight: collapsedMaxPx } : void 0,
+			children: [children, clamped ? /* @__PURE__ */ jsx("div", { className: cn("pointer-events-none absolute inset-x-0 bottom-0 h-10 bg-gradient-to-t to-transparent", fadeClassName) }) : null]
+		}), overflowing ? /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: () => setExpanded((value) => !value),
+			className: "mt-1 text-[11px] font-medium text-muted-foreground transition-colors hover:text-foreground",
+			children: expanded ? "Show less" : "Show more"
+		}) : null]
+	});
+}
+//#endregion
+//#region src/run/expanded-tool-detail.tsx
+const EXT_LANG = {
+	ts: "typescript",
+	tsx: "tsx",
+	js: "javascript",
+	jsx: "jsx",
+	rs: "rust",
+	py: "python",
+	go: "go",
+	rb: "ruby",
+	json: "json",
+	yaml: "yaml",
+	yml: "yaml",
+	toml: "toml",
+	md: "markdown",
+	css: "css",
+	scss: "scss",
+	html: "html",
+	sh: "bash",
+	bash: "bash",
+	zsh: "bash",
+	sql: "sql",
+	sol: "solidity",
+	proto: "protobuf"
+};
+function langFromPath(path) {
+	if (!path) return void 0;
+	const ext = path.split(".").pop()?.toLowerCase();
+	return ext ? EXT_LANG[ext] : void 0;
+}
+/** Format an unknown value as a displayable string. */
+function formatOutput(value) {
+	if (value == null) return "";
+	if (typeof value === "string") return value;
+	try {
+		return JSON.stringify(value, null, 2);
+	} catch {
+		return String(value);
+	}
+}
+/**
+* Renders full tool details when a tool item is expanded.
+* Dispatches to specialised previews (CommandPreview, WriteFilePreview)
+* or falls back to a generic input/output code view.
+*/
+const ExpandedToolDetail = memo(({ part }) => {
+	const meta = getToolDisplayMetadata(part);
+	const { status, input, output, error } = part.state;
+	if (meta.displayVariant === "command") return /* @__PURE__ */ jsx(CommandPreview, { part });
+	if (meta.displayVariant === "write-file") return /* @__PURE__ */ jsx(WriteFilePreview, { part });
+	if (meta.displayVariant === "grep") return /* @__PURE__ */ jsx(GrepResultsPreview, { part });
+	if (meta.displayVariant === "glob") return /* @__PURE__ */ jsx(GlobResultsPreview, { part });
+	if (meta.displayVariant === "web-search") return /* @__PURE__ */ jsx(WebSearchPreview, { part });
+	if (meta.displayVariant === "question") return /* @__PURE__ */ jsx(QuestionPreview, { part });
+	if (meta.displayVariant === "diff") return /* @__PURE__ */ jsx(DiffPreview, { part });
+	if (meta.displayVariant === "read-file") return /* @__PURE__ */ jsxs("div", {
+		className: "overflow-hidden rounded-[var(--radius-lg)] border border-border bg-card shadow-[var(--shadow-card)]",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2.5 border-b border-border bg-card px-3 py-2",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-[var(--radius-sm)] border border-[var(--border-accent)] bg-muted text-primary",
+				children: /* @__PURE__ */ jsx(FileText, { className: "h-3.5 w-3.5" })
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "min-w-0 flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-xs font-semibold text-foreground",
+					children: "Read file"
+				}), meta.targetPath ? /* @__PURE__ */ jsx("span", {
+					className: "truncate text-xs font-mono text-muted-foreground",
+					children: meta.targetPath
+				}) : null]
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "space-y-2 px-3 py-2.5",
+			children: [typeof output === "string" ? /* @__PURE__ */ jsx(CodeBlock, {
+				code: output,
+				language: langFromPath(meta.targetPath) ?? "text",
+				className: "rounded-[var(--radius-md)]"
+			}) : /* @__PURE__ */ jsx("div", {
+				className: "rounded-[var(--radius-md)] border border-dashed border-border bg-muted px-3 py-4 text-sm text-muted-foreground",
+				children: "No readable file content was returned."
+			}), error ? /* @__PURE__ */ jsx("div", {
+				className: "rounded-[var(--radius-md)] border border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)] px-3 py-3 text-sm text-[var(--surface-danger-text)]",
+				children: error
+			}) : null]
+		})]
+	});
+	const inputStr = formatOutput(input);
+	const outputStr = formatOutput(output);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-3",
+		children: [
+			inputStr && /* @__PURE__ */ jsxs("div", {
+				className: "overflow-hidden rounded-[var(--radius-lg)] border border-border bg-card",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2 border-b border-border bg-background px-3 py-2",
+					children: [/* @__PURE__ */ jsx(ArrowRight, { className: "h-3 w-3 text-primary" }), /* @__PURE__ */ jsx("span", {
+						className: "text-xs font-medium uppercase tracking-[0.08em] text-muted-foreground",
+						children: "Input"
+					})]
+				}), /* @__PURE__ */ jsx(CodeBlock, {
+					code: inputStr,
+					language: "json",
+					className: "rounded-none border-0"
+				})]
+			}),
+			status === "completed" && outputStr && /* @__PURE__ */ jsxs("div", {
+				className: "overflow-hidden rounded-[var(--radius-lg)] border border-border bg-card",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2 border-b border-border bg-background px-3 py-2",
+					children: [/* @__PURE__ */ jsx(ArrowLeft, { className: "h-3 w-3 text-primary" }), /* @__PURE__ */ jsx("span", {
+						className: "text-xs font-medium uppercase tracking-[0.08em] text-muted-foreground",
+						children: "Output"
+					})]
+				}), /* @__PURE__ */ jsx(ExpandableContent, {
+					fadeClassName: "from-card",
+					children: /* @__PURE__ */ jsx(CodeBlock, {
+						code: outputStr.length > 2e3 ? outputStr.slice(0, 2e3) + "\n...(truncated)" : outputStr,
+						language: "json",
+						className: "rounded-none border-0"
+					})
+				})]
+			}),
+			error && /* @__PURE__ */ jsxs("div", {
+				className: "overflow-hidden rounded-[var(--radius-lg)] border border-[var(--surface-danger-border)]",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2 border-b border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)] px-3 py-2",
+					children: [/* @__PURE__ */ jsx(AlertCircle, { className: "h-3 w-3 text-[var(--surface-danger-text)]" }), /* @__PURE__ */ jsx("span", {
+						className: "text-xs font-medium uppercase tracking-[0.08em] text-[var(--surface-danger-text)]",
+						children: "Error"
+					})]
+				}), /* @__PURE__ */ jsx(ExpandableContent, {
+					fadeClassName: "from-[var(--surface-danger-bg)]",
+					children: /* @__PURE__ */ jsx("pre", {
+						className: "bg-[var(--surface-danger-bg)] p-3 text-xs font-mono whitespace-pre-wrap break-all text-[var(--surface-danger-text)]",
+						children: error
+					})
+				})]
+			}),
+			(status === "pending" || status === "running") && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 rounded-[var(--radius-md)] border border-border bg-muted px-3 py-3 text-xs text-muted-foreground",
+				children: [/* @__PURE__ */ jsx(Loader2, { className: cn("h-3 w-3 animate-spin text-primary") }), "Running…"]
+			})
+		]
+	});
+});
+ExpandedToolDetail.displayName = "ExpandedToolDetail";
+//#endregion
+//#region src/run/run-row-shell.tsx
+/**
+* Trailing status indicator shared by every run row. Only `error` draws a
+* mark (a red dot). Success is silence, and a running row carries its state in
+* the title — a `TextShimmer` sweep — so neither renders anything here.
+*/
+function RunRowStatusDot({ status }) {
+	if (status !== "error") return null;
+	return /* @__PURE__ */ jsx("span", {
+		"data-run-row-status": "error",
+		className: "h-1.5 w-1.5 shrink-0 rounded-full bg-[var(--surface-danger-text)]"
+	});
+}
+const SHAPE_CLASS = {
+	single: "rounded-[var(--radius-lg)]",
+	first: "rounded-t-[var(--radius-lg)] rounded-b-[var(--radius-sm)]",
+	middle: "rounded-[var(--radius-sm)]",
+	last: "rounded-t-[var(--radius-sm)] rounded-b-[var(--radius-lg)]"
+};
+const HEADER_INSET = "px-2 py-1";
+const ERROR_INDENT = "pl-[2.375rem]";
+/**
+* Shared shell for the agent activity rows (reasoning + tool). A quiet
+* one-liner at rest — bare glyph, muted title and description, no fill, no
+* border — that becomes a bordered card only while open. The border is always
+* present (transparent at rest) so hover and expand never shift layout.
+* Both row kinds render through it so they read as one family.
+*/
+function RunRowShell({ icon, title, description, descriptionMono = false, status = "idle", durationMs, groupPosition = "single", collapsedError, actions, open: openProp, onOpenChange, defaultOpen = false, className, contentClassName, children }) {
+	const [openState, setOpenState] = useState(defaultOpen);
+	const isControlled = openProp !== void 0;
+	const open = isControlled ? openProp : openState;
+	const setOpen = (next) => {
+		if (!isControlled) setOpenState(next);
+		onOpenChange?.(next);
+	};
+	const isRunning = status === "running";
+	const expandable = children != null;
+	return /* @__PURE__ */ jsx(Collapsible.Root, {
+		open,
+		onOpenChange: setOpen,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex items-start gap-2",
+			children: [/* @__PURE__ */ jsxs("div", {
+				"data-run-row": "",
+				"data-state": open ? "open" : "closed",
+				className: cn("group min-w-0 flex-1 overflow-hidden border transition-colors", open ? "border-border bg-[var(--md3-surface-container)]" : "border-transparent bg-transparent", expandable && !open && "hover:bg-[var(--md3-surface-container)]", SHAPE_CLASS[groupPosition], className),
+				children: [
+					/* @__PURE__ */ jsx(Collapsible.Trigger, {
+						asChild: true,
+						disabled: !expandable,
+						children: /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							className: cn("flex w-full items-center gap-2 text-left", HEADER_INSET, expandable ? "cursor-pointer" : "cursor-default"),
+							children: [
+								/* @__PURE__ */ jsxs("span", {
+									"aria-hidden": true,
+									className: "flex h-[1.375rem] w-[1.375rem] shrink-0 items-center justify-center text-muted-foreground",
+									children: [/* @__PURE__ */ jsx("span", {
+										"data-run-row-glyph": "",
+										className: cn("flex items-center justify-center", expandable && "group-hover:hidden", open && "hidden"),
+										children: icon
+									}), expandable ? /* @__PURE__ */ jsx(ChevronRight, {
+										"data-run-row-chevron": "",
+										className: cn("hidden h-3.5 w-3.5 transition-transform group-hover:block", open && "block rotate-90")
+									}) : null]
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: cn("shrink-0 whitespace-nowrap text-sm font-normal text-muted-foreground transition-colors group-hover:text-foreground", open && "text-foreground"),
+									children: title
+								}),
+								description ? /* @__PURE__ */ jsx("span", {
+									className: cn("hidden min-w-0 flex-1 truncate text-sm text-muted-foreground transition-colors group-hover:text-foreground sm:inline", descriptionMono && "font-mono"),
+									children: description
+								}) : null,
+								/* @__PURE__ */ jsxs("span", {
+									className: "ml-auto flex shrink-0 items-center gap-1.5",
+									children: [!isRunning && durationMs != null ? /* @__PURE__ */ jsx("span", {
+										"data-run-row-duration": "",
+										className: "font-mono text-[10px] tabular-nums text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100",
+										children: formatDuration(durationMs)
+									}) : null, /* @__PURE__ */ jsx(RunRowStatusDot, { status })]
+								})
+							]
+						})
+					}),
+					collapsedError && !open ? /* @__PURE__ */ jsx("div", {
+						className: cn("pb-1.5 pr-2 text-xs leading-snug text-[var(--surface-danger-text)]", ERROR_INDENT),
+						children: collapsedError
+					}) : null,
+					expandable ? /* @__PURE__ */ jsx(Collapsible.Content, {
+						className: "overflow-hidden data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp",
+						children: /* @__PURE__ */ jsx("div", {
+							className: cn("border-t border-border", contentClassName),
+							children
+						})
+					}) : null
+				]
+			}), actions ? /* @__PURE__ */ jsx("div", {
+				className: "flex shrink-0 flex-wrap items-center justify-end gap-1.5 pt-1",
+				onClick: (event) => event.stopPropagation(),
+				children: actions
+			}) : null]
+		})
+	});
+}
+//#endregion
+//#region src/run/inline-tool-item.tsx
+/** Map tool category to a lucide-react icon component. */
+const TOOL_CATEGORY_ICON_MAP = {
+	command: Terminal,
+	write: FileEdit,
+	read: FileSearch,
+	search: Search,
+	edit: PencilLine,
+	task: Bot,
+	web: Globe,
+	todo: ClipboardList,
+	other: Settings
+};
+/** Map the tool part status onto the shared row status vocabulary. */
+function toRowStatus(status) {
+	if (status === "pending" || status === "running") return "running";
+	if (status === "error") return "error";
+	return "success";
+}
+/**
+* Compact single-line tool call display: a category glyph, the tool verb, and
+* the path or command it acted on. While the call runs the verb shimmers;
+* once it completes the row goes quiet (duration on hover, a red dot only on
+* error). Expands on click to show ExpandedToolDetail. Rendered through the
+* shared RunRowShell so it stays consistent with the reasoning row.
+*/
+const InlineToolItem = memo(({ part, renderToolDetail, groupPosition = "single", className, contentClassName, actions, title: titleOverride, description: descriptionOverride }) => {
+	const meta = getToolDisplayMetadata(part);
+	const title = titleOverride ?? meta.title;
+	const description = descriptionOverride ?? meta.description;
+	const errorText = getToolErrorText(part);
+	const startTime = part.state.time?.start;
+	const endTime = part.state.time?.end;
+	const durationMs = startTime != null && endTime != null ? endTime - startTime : void 0;
+	const category = getToolCategory(part.tool);
+	const DefaultIcon = TOOL_CATEGORY_ICON_MAP[category] ?? Settings;
+	const status = toRowStatus(part.state.status);
+	return /* @__PURE__ */ jsx(RunRowShell, {
+		icon: /* @__PURE__ */ jsx(DefaultIcon, { className: "h-3.5 w-3.5" }),
+		title: status === "running" ? /* @__PURE__ */ jsx(TextShimmer, { children: title }) : title,
+		description,
+		descriptionMono: true,
+		status,
+		durationMs,
+		groupPosition,
+		collapsedError: errorText ?? void 0,
+		actions,
+		className,
+		contentClassName: cn("p-2", contentClassName),
+		children: renderToolDetail?.(part) ?? /* @__PURE__ */ jsx(ExpandedToolDetail, { part })
+	});
+});
+InlineToolItem.displayName = "InlineToolItem";
+//#endregion
+//#region src/run/tool-call-step.tsx
+const EXT_LANGUAGE = {
+	ts: "typescript",
+	tsx: "typescript",
+	js: "javascript",
+	jsx: "javascript",
+	mjs: "javascript",
+	cjs: "javascript",
+	css: "css",
+	scss: "scss",
+	json: "json",
+	jsonc: "json",
+	md: "markdown",
+	mdx: "markdown",
+	py: "python",
+	sh: "bash",
+	bash: "bash",
+	zsh: "bash",
+	html: "html",
+	htm: "html",
+	yaml: "yaml",
+	yml: "yaml",
+	toml: "toml",
+	rs: "rust",
+	go: "go",
+	sql: "sql",
+	xml: "xml"
+};
+function inferLanguage(detail, language) {
+	if (language) return language;
+	if (!detail) return void 0;
+	const ext = detail.split(".").pop()?.toLowerCase();
+	return ext ? EXT_LANGUAGE[ext] : void 0;
+}
+const STATUS_MAP = {
+	running: "running",
+	success: "completed",
+	error: "error"
+};
+function ToolCallStep({ type, label, status, detail, output, language, duration, className, actions, part }) {
+	const resolvedPart = part ?? {
+		type: "tool",
+		id: `${type}:${label}`,
+		tool: type,
+		state: {
+			status: STATUS_MAP[status],
+			input: detail ? { detail } : void 0,
+			output,
+			time: duration != null ? {
+				start: 0,
+				end: duration
+			} : void 0
+		}
+	};
+	const lang = inferLanguage(detail, language);
+	return /* @__PURE__ */ jsx(InlineToolItem, {
+		part: resolvedPart,
+		title: label,
+		description: detail,
+		className,
+		actions,
+		renderToolDetail: part ? void 0 : output ? () => /* @__PURE__ */ jsx(CodeBlock, {
+			code: output,
+			language: lang,
+			className: "max-h-72 overflow-auto text-xs"
+		}) : () => null
+	});
+}
+function ToolCallGroup({ title, children, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"aria-label": title,
+		className: cn("flex flex-col gap-1", className),
+		children
+	});
+}
+//#endregion
+export { RunRowStatusDot as a, RunRowShell as i, ToolCallStep as n, ExpandedToolDetail as o, InlineToolItem as r, ExpandableContent as s, ToolCallGroup as t };