@tangle-network/ui 11.12.0 → 11.13.1

package/dist/run/inline-thinking-item.js

@@ -0,0 +1,60 @@
+import { TextShimmer } from "../primitives/text-shimmer.js";
+import { truncateText } from "../utils/format.js";
+import { ExpandableContent } from "./expandable-content.js";
+import { RunRowShell } from "./run-row-shell.js";
+import { Markdown } from "../markdown/markdown.js";
+import { memo, useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Brain } from "lucide-react";
+//#region src/run/inline-thinking-item.tsx
+const InlineThinkingItem = memo(({ part, defaultOpen = false, autoCollapse = true, className, contentClassName }) => {
+	const [open, setOpen] = useState(defaultOpen);
+	const autoCollapsedRef = useRef(false);
+	const startTime = part.time?.start;
+	const endTime = part.time?.end;
+	const durationMs = startTime != null && endTime != null ? endTime - startTime : void 0;
+	const isActive = startTime != null && endTime == null;
+	const preview = part.text ? truncateText(part.text, 120) : void 0;
+	useEffect(() => {
+		if (isActive) {
+			autoCollapsedRef.current = false;
+			setOpen(true);
+			return;
+		}
+		if (autoCollapse && !autoCollapsedRef.current && durationMs != null) {
+			const timer = window.setTimeout(() => {
+				setOpen(false);
+				autoCollapsedRef.current = true;
+			}, 900);
+			return () => window.clearTimeout(timer);
+		}
+	}, [
+		autoCollapse,
+		durationMs,
+		isActive
+	]);
+	return /* @__PURE__ */ jsx(RunRowShell, {
+		icon: /* @__PURE__ */ jsx(Brain, { className: "h-3.5 w-3.5" }),
+		title: isActive ? /* @__PURE__ */ jsx(TextShimmer, { children: "Thinking…" }) : "Reasoning",
+		description: preview,
+		status: isActive ? "running" : "idle",
+		durationMs,
+		open,
+		onOpenChange: setOpen,
+		className,
+		children: part.text ? /* @__PURE__ */ jsx(ExpandableContent, {
+			fadeClassName: "from-[var(--md3-surface-container)]",
+			className: contentClassName ? `px-3 py-3 ${contentClassName}` : "px-3 py-3",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "text-sm leading-relaxed text-foreground",
+				children: /* @__PURE__ */ jsx(Markdown, { children: part.text })
+			})
+		}) : /* @__PURE__ */ jsx("div", {
+			className: "px-3 py-2.5 text-xs text-muted-foreground",
+			children: "No reasoning text provided."
+		})
+	});
+});
+InlineThinkingItem.displayName = "InlineThinkingItem";
+//#endregion
+export { InlineThinkingItem };

package/dist/run/inline-tool-item.d.ts

@@ -0,0 +1,25 @@
+import { ToolPart } from "../types/parts.js";
+import { CustomToolRenderer } from "../types/tool-display.js";
+import { ReactNode } from "react";
+//#region src/run/inline-tool-item.d.ts
+export interface InlineToolItemProps {
+  part: ToolPart;
+  renderToolDetail?: CustomToolRenderer;
+  groupPosition?: "single" | "first" | "middle" | "last";
+  className?: string;
+  contentClassName?: string;
+  actions?: ReactNode;
+  /** Override the derived title (default: from `getToolDisplayMetadata`). */
+  title?: string;
+  /** Override the derived inline description. */
+  description?: string;
+}
+/**
+ * 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.
+ */
+export declare const InlineToolItem: import("react").MemoExoticComponent<({ part, renderToolDetail, groupPosition, className, contentClassName, actions, title: titleOverride, description: descriptionOverride }: InlineToolItemProps) => import("react").JSX.Element>;
+//#endregion

package/dist/run/inline-tool-item.js

@@ -0,0 +1,63 @@
+import { cn } from "../lib/utils.js";
+import { TextShimmer } from "../primitives/text-shimmer.js";
+import { getToolCategory, getToolDisplayMetadata, getToolErrorText } from "../utils/tool-display.js";
+import { ExpandedToolDetail } from "./expanded-tool-detail.js";
+import { RunRowShell } from "./run-row-shell.js";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Bot, ClipboardList, FileEdit, FileSearch, Globe, PencilLine, Search, Settings, Terminal } from "lucide-react";
+//#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
+export { InlineToolItem };

package/dist/run/run-group.d.ts

@@ -0,0 +1,26 @@
+import { SessionPart, ToolPart } from "../types/parts.js";
+import { AgentBranding } from "../types/branding.js";
+import { CustomToolRenderer } from "../types/tool-display.js";
+import { Run } from "../types/run.js";
+import { ReactNode } from "react";
+//#region src/run/run-group.d.ts
+export interface RunGroupProps {
+  run: Run;
+  partMap: Record<string, SessionPart[]>;
+  collapsed: boolean;
+  onToggle: () => void;
+  branding?: AgentBranding;
+  renderToolDetail?: CustomToolRenderer;
+  headerActions?: ReactNode;
+  renderToolActions?: (part: ToolPart, options: {
+    run: Run;
+    messageId: string;
+    partIndex: number;
+  }) => ReactNode;
+}
+/**
+ * Collapsible container for a consecutive group of assistant messages (a "run").
+ * Shows a summary header with stats and renders tool/thinking/text parts.
+ */
+export declare const RunGroup: import("react").MemoExoticComponent<({ run, partMap, collapsed, onToggle, branding, renderToolDetail, headerActions, renderToolActions }: RunGroupProps) => import("react").JSX.Element | null>;
+//#endregion

package/dist/{run-group-BWGeesgs.js → run/run-group.js}

@@ -1,64 +1,13 @@
-import { t as cn } from "./utils-C_uf36nf.js";
-import { t as TextShimmer } from "./text-shimmer-BUUo6I-g.js";
-import { i as truncateText, n as formatDuration } from "./format-DfcLWqMa.js";
-import { i as RunRowShell, r as InlineToolItem, s as ExpandableContent } from "./tool-call-step-DNebqhmX.js";
-import { t as Markdown } from "./markdown-Db08KAYF.js";
-import { t as OpenUIArtifactRenderer } from "./openui-artifact-renderer-DG_i2lOR.js";
-import { memo, useEffect, useMemo, useRef, useState } from "react";
+import { cn } from "../lib/utils.js";
+import { formatDuration } from "../utils/format.js";
+import { InlineToolItem } from "./inline-tool-item.js";
+import { Markdown } from "../markdown/markdown.js";
+import { InlineThinkingItem } from "./inline-thinking-item.js";
+import { OpenUIArtifactRenderer } from "../openui/openui-artifact-renderer.js";
+import { memo, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Bot, Brain, ChevronDown, ChevronRight, ClipboardList, FileEdit, FileSearch, Globe, Loader2, PencilLine, Search, Settings, Sparkles, Terminal } from "lucide-react";
+import { Bot, ChevronDown, ChevronRight, ClipboardList, FileEdit, FileSearch, Globe, Loader2, PencilLine, Search, Settings, Sparkles, Terminal } from "lucide-react";
 import * as Collapsible from "@radix-ui/react-collapsible";
-//#region src/run/inline-thinking-item.tsx
-const InlineThinkingItem = memo(({ part, defaultOpen = false, autoCollapse = true, className, contentClassName }) => {
-	const [open, setOpen] = useState(defaultOpen);
-	const autoCollapsedRef = useRef(false);
-	const startTime = part.time?.start;
-	const endTime = part.time?.end;
-	const durationMs = startTime != null && endTime != null ? endTime - startTime : void 0;
-	const isActive = startTime != null && endTime == null;
-	const preview = part.text ? truncateText(part.text, 120) : void 0;
-	useEffect(() => {
-		if (isActive) {
-			autoCollapsedRef.current = false;
-			setOpen(true);
-			return;
-		}
-		if (autoCollapse && !autoCollapsedRef.current && durationMs != null) {
-			const timer = window.setTimeout(() => {
-				setOpen(false);
-				autoCollapsedRef.current = true;
-			}, 900);
-			return () => window.clearTimeout(timer);
-		}
-	}, [
-		autoCollapse,
-		durationMs,
-		isActive
-	]);
-	return /* @__PURE__ */ jsx(RunRowShell, {
-		icon: /* @__PURE__ */ jsx(Brain, { className: "h-3.5 w-3.5" }),
-		title: isActive ? /* @__PURE__ */ jsx(TextShimmer, { children: "Thinking…" }) : "Reasoning",
-		description: preview,
-		status: isActive ? "running" : "idle",
-		durationMs,
-		open,
-		onOpenChange: setOpen,
-		className,
-		children: part.text ? /* @__PURE__ */ jsx(ExpandableContent, {
-			fadeClassName: "from-[var(--md3-surface-container)]",
-			className: contentClassName ? `px-3 py-3 ${contentClassName}` : "px-3 py-3",
-			children: /* @__PURE__ */ jsx("div", {
-				className: "text-sm leading-relaxed text-foreground",
-				children: /* @__PURE__ */ jsx(Markdown, { children: part.text })
-			})
-		}) : /* @__PURE__ */ jsx("div", {
-			className: "px-3 py-2.5 text-xs text-muted-foreground",
-			children: "No reasoning text provided."
-		})
-	});
-});
-InlineThinkingItem.displayName = "InlineThinkingItem";
-//#endregion
 //#region src/run/run-group.tsx
 /**
 * One row on the run's timeline spine: a connector line + accent dot in a
@@ -407,4 +356,4 @@ const RunGroup = memo(({ run, partMap, collapsed, onToggle, branding = DEFAULT_B
 });
 RunGroup.displayName = "RunGroup";
 //#endregion
-export { InlineThinkingItem as n, RunGroup as t };
+export { RunGroup };

package/dist/run/run-item-primitives.d.ts

@@ -0,0 +1,5 @@
+//#region src/run/run-item-primitives.d.ts
+export declare function LiveDuration({ startTime }: {
+  startTime: number;
+}): import("react").JSX.Element;
+//#endregion

package/dist/{run-ZsIKPA6J.js → run/run-item-primitives.js}

@@ -1,4 +1,4 @@
-import { n as formatDuration } from "./format-DfcLWqMa.js";
+import { formatDuration } from "../utils/format.js";
 import { useEffect, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/run/run-item-primitives.tsx
@@ -14,4 +14,4 @@ function LiveDuration({ startTime }) {
 	});
 }
 //#endregion
-export { LiveDuration as t };
+export { LiveDuration };

package/dist/run/run-row-shell.d.ts

@@ -0,0 +1,53 @@
+import { ReactNode } from "react";
+//#region src/run/run-row-shell.d.ts
+export type RunRowStatus = "running" | "success" | "error" | "idle";
+/**
+ * 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.
+ */
+export declare function RunRowStatusDot({ status }: {
+  status: RunRowStatus;
+}): import("react").JSX.Element | null;
+export interface RunRowShellProps {
+  /** Semantic lead glyph (14px). At rest it is the row's only ornament; on
+   *  hover and while open the expand chevron takes its slot. */
+  icon: ReactNode;
+  /** Row title. A string in the common case; a node when the title carries its
+   *  own treatment — a running row passes `<TextShimmer>` here, which is the
+   *  whole in-flight signal (the shell draws no spinner). */
+  title: ReactNode;
+  /** Secondary inline text (tool path/command, or a reasoning preview). */
+  description?: string;
+  /** Render the description in mono (tools) vs prose (reasoning). */
+  descriptionMono?: boolean;
+  status?: RunRowStatus;
+  /** @deprecated The shell no longer ticks a live duration while running; the
+   *  running state lives in the title (`TextShimmer`). Accepted and ignored so
+   *  existing callers keep compiling. */
+  startTime?: number;
+  /** Static duration, revealed on hover once the row is no longer running. */
+  durationMs?: number;
+  /** Radius shaping when rows are stacked into a group. */
+  groupPosition?: "single" | "first" | "middle" | "last";
+  /** Message shown below the header while collapsed (tool errors). */
+  collapsedError?: string;
+  actions?: ReactNode;
+  /** Controlled open state. Omit for internal (uncontrolled) state. */
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  defaultOpen?: boolean;
+  className?: string;
+  contentClassName?: string;
+  /** Expanded body. When absent the row is not expandable. */
+  children?: ReactNode;
+}
+/**
+ * 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.
+ */
+export declare function RunRowShell({ icon, title, description, descriptionMono, status, durationMs, groupPosition, collapsedError, actions, open: openProp, onOpenChange, defaultOpen, className, contentClassName, children }: RunRowShellProps): import("react").JSX.Element;
+//#endregion

package/dist/run/run-row-shell.js

@@ -0,0 +1,114 @@
+import { cn } from "../lib/utils.js";
+import { formatDuration } from "../utils/format.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRight } from "lucide-react";
+import * as Collapsible from "@radix-ui/react-collapsible";
+//#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
+export { RunRowShell, RunRowStatusDot };

package/dist/{tool-call-feed-BeB1_4pX.d.ts → run/tool-call-feed.d.ts}

@@ -1,10 +1,6 @@
-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
+import { ToolCallStatus, ToolCallType } from "./tool-call-step.js";
 //#region src/run/tool-call-feed.d.ts
-interface ToolCallData {
+export interface ToolCallData {
   id: string;
   type: ToolCallType;
   label: string;
@@ -13,7 +9,7 @@ interface ToolCallData {
   output?: string;
   duration?: number;
 }
-type FeedSegment = {
+export type FeedSegment = {
   kind: "text";
   content: string;
 } | {
@@ -24,14 +20,14 @@ type FeedSegment = {
   title?: string;
   calls: ToolCallData[];
 };
-interface ToolCallFeedProps {
+export 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;
+export declare function ToolCallFeed({ segments, className }: ToolCallFeedProps): import("react").JSX.Element | null;
 /**
  * Parse raw SSE tool events into FeedSegments.
  *
@@ -39,9 +35,8 @@ declare function ToolCallFeed({ segments, className }: ToolCallFeedProps): impor
  * and the ToolCallFeed component. Consumers call this in their
  * useToolCallStream hook.
  */
-declare function parseToolEvent(event: {
+export 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 };
+//#endregion

package/dist/{tool-call-feed-BpmMLpPX.js → run/tool-call-feed.js}

@@ -1,6 +1,6 @@
-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-Db08KAYF.js";
+import { cn } from "../lib/utils.js";
+import { Markdown } from "../markdown/markdown.js";
+import { ToolCallGroup, ToolCallStep } from "./tool-call-step.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/run/tool-call-feed.tsx
 /**
@@ -106,4 +106,4 @@ function truncate(text, max) {
 	return text.length > max ? text.slice(0, max - 3) + "..." : text;
 }
 //#endregion
-export { parseToolEvent as n, ToolCallFeed as t };
+export { ToolCallFeed, parseToolEvent };

package/dist/run/tool-call-step.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from "react";
+//#region src/run/tool-call-step.d.ts
+export type ToolCallType = "bash" | "read" | "write" | "edit" | "glob" | "grep" | "list" | "download" | "inspect" | "audit" | "unknown";
+export type ToolCallStatus = "running" | "success" | "error";
+//#endregion

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

@@ -0,0 +1,82 @@
+import { cn } from "../lib/utils.js";
+import { CodeBlock } from "../markdown/code-block.js";
+import { InlineToolItem } from "./inline-tool-item.js";
+import { jsx } from "react/jsx-runtime";
+//#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 { ToolCallGroup, ToolCallStep };

package/dist/run.d.ts

@@ -1,3 +1,9 @@
-import { a as parseToolEvent, i as ToolCallFeedProps, n as ToolCallData, o as ToolCallStatus, r as ToolCallFeed, s as ToolCallType, t as FeedSegment } from "./tool-call-feed-BeB1_4pX.js";
-import { a as InlineThinkingItemProps, c as RunRowShell, d as RunRowStatusDot, f as RunGroup, i as InlineThinkingItem, l as RunRowShellProps, n as ExpandedToolDetail, o as InlineToolItem, p as RunGroupProps, r as ExpandedToolDetailProps, s as InlineToolItemProps, t as LiveDuration, u as RunRowStatus } from "./index-DjKxO357.js";
+import { ToolCallStatus, ToolCallType } from "./run/tool-call-step.js";
+import { FeedSegment, ToolCallData, ToolCallFeed, ToolCallFeedProps, parseToolEvent } from "./run/tool-call-feed.js";
+import { RunGroup, RunGroupProps } from "./run/run-group.js";
+import { RunRowShell, RunRowShellProps, RunRowStatus, RunRowStatusDot } from "./run/run-row-shell.js";
+import { InlineToolItem, InlineToolItemProps } from "./run/inline-tool-item.js";
+import { InlineThinkingItem, InlineThinkingItemProps } from "./run/inline-thinking-item.js";
+import { ExpandedToolDetail, ExpandedToolDetailProps } from "./run/expanded-tool-detail.js";
+import { LiveDuration } from "./run/run-item-primitives.js";
 export { ExpandedToolDetail, type ExpandedToolDetailProps, type FeedSegment, InlineThinkingItem, type InlineThinkingItemProps, InlineToolItem, type InlineToolItemProps, LiveDuration, RunGroup, type RunGroupProps, RunRowShell, type RunRowShellProps, type RunRowStatus, RunRowStatusDot, type ToolCallData, ToolCallFeed, type ToolCallFeedProps, type ToolCallStatus, type ToolCallType, parseToolEvent };

package/dist/run.js

@@ -1,5 +1,8 @@
-import { a as RunRowStatusDot, i as RunRowShell, o as ExpandedToolDetail, r as InlineToolItem } from "./tool-call-step-DNebqhmX.js";
-import { n as InlineThinkingItem, t as RunGroup } from "./run-group-BWGeesgs.js";
-import { t as LiveDuration } from "./run-ZsIKPA6J.js";
-import { n as parseToolEvent, t as ToolCallFeed } from "./tool-call-feed-BpmMLpPX.js";
+import { ExpandedToolDetail } from "./run/expanded-tool-detail.js";
+import { RunRowShell, RunRowStatusDot } from "./run/run-row-shell.js";
+import { InlineToolItem } from "./run/inline-tool-item.js";
+import { InlineThinkingItem } from "./run/inline-thinking-item.js";
+import { RunGroup } from "./run/run-group.js";
+import { LiveDuration } from "./run/run-item-primitives.js";
+import { ToolCallFeed, parseToolEvent } from "./run/tool-call-feed.js";
 export { ExpandedToolDetail, InlineThinkingItem, InlineToolItem, LiveDuration, RunGroup, RunRowShell, RunRowStatusDot, ToolCallFeed, parseToolEvent };

package/dist/sdk-hooks.d.ts

@@ -1,2 +1,9 @@
-import { A as useRunGroups, C as SdkSessionSeed, D as UseToolCallStreamReturn, E as useSdkSession, M as useDropdownMenu, N as useAutoScroll, O as useToolCallStream, S as SdkSessionEvent, T as UseSdkSessionReturn, _ as AppendUserMessageOptions, a as SSEEvent, b as CompleteAssistantMessageOptions, c as UseSSEStreamOptions, d as RealtimeSessionOptions, f as RealtimeSessionRegistry, g as useRealtimeSession, h as RealtimeSessionTarget, i as ConnectionState, j as useRunCollapseState, k as UseRunGroupsOptions, l as UseSSEStreamResult, m as RealtimeSessionState, n as AutomationStreamEvent, o as TaskStreamEvent, p as RealtimeSessionRegistryProps, r as BotStreamEvent, s as TerminalStreamEvent, t as AgentStreamEvent, u as useSSEStream, v as ApplySdkEventOptions, w as UseSdkSessionOptions, x as SdkSessionAttachment, y as BeginAssistantMessageOptions } from "./use-sse-stream-Dm6R5YWz.js";
+import { useAutoScroll } from "./hooks/use-auto-scroll.js";
+import { useDropdownMenu } from "./hooks/use-dropdown-menu.js";
+import { useRunCollapseState } from "./hooks/use-run-collapse-state.js";
+import { UseRunGroupsOptions, useRunGroups } from "./hooks/use-run-groups.js";
+import { UseToolCallStreamReturn, useToolCallStream } from "./hooks/use-tool-call-stream.js";
+import { AppendUserMessageOptions, ApplySdkEventOptions, BeginAssistantMessageOptions, CompleteAssistantMessageOptions, SdkSessionAttachment, SdkSessionEvent, SdkSessionSeed, UseSdkSessionOptions, UseSdkSessionReturn, useSdkSession } from "./hooks/use-sdk-session.js";
+import { RealtimeSessionOptions, RealtimeSessionRegistry, RealtimeSessionRegistryProps, RealtimeSessionState, RealtimeSessionTarget, useRealtimeSession } from "./hooks/use-realtime-session.js";
+import { AgentStreamEvent, AutomationStreamEvent, BotStreamEvent, ConnectionState, SSEEvent, TaskStreamEvent, TerminalStreamEvent, UseSSEStreamOptions, UseSSEStreamResult, useSSEStream } from "./hooks/use-sse-stream.js";
 export { type AgentStreamEvent, type AppendUserMessageOptions, type ApplySdkEventOptions, type AutomationStreamEvent, type BeginAssistantMessageOptions, type BotStreamEvent, type CompleteAssistantMessageOptions, type ConnectionState, type RealtimeSessionOptions, RealtimeSessionRegistry, type RealtimeSessionRegistryProps, type RealtimeSessionState, type RealtimeSessionTarget, type SSEEvent, type SdkSessionAttachment, type SdkSessionEvent, type SdkSessionSeed, type TaskStreamEvent, type TerminalStreamEvent, type UseRunGroupsOptions, type UseSSEStreamOptions, type UseSSEStreamResult, type UseSdkSessionOptions, type UseSdkSessionReturn, type UseToolCallStreamReturn, useAutoScroll, useDropdownMenu, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useToolCallStream };