@tangle-network/ui 11.0.0 → 11.2.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @tangle-network/ui
 
+## 11.2.0
+
+### Minor Changes
+
+- ac4eaf4: feat(files): host-aligned artifact surface props
+
+  - `ArtifactPane`: `headerClassName` + `hideTitleBlock` (header row collapses when empty).
+  - `FileArtifactPane`: threads both through all render paths; `headerActions` is `undefined` (not an empty fragment) when there are no actions.
+  - `DocumentEditorPane`: `previewClassName` now governs the whole preview box (gutter/border/surface/padding), enabling a full-bleed document body.
+  - `FilePreview`: text previews sit on `bg-card` for a white surface in light theme.
+
+### Patch Changes
+
+- c5dfc7d: Use tokenized Tangle prose styling for markdown previews so light themes stay readable.
+
+## 11.1.0
+
+### Minor Changes
+
+- ea6f23e: Unify the agent reasoning and tool rows onto one shared row shell: both keep a
+  consistent semantic lead icon with a small trailing status dot/spinner (status
+  no longer hijacks the icon), on a calm neutral badge that is uniform across
+  reasoning and tool rows. Expanded and open rows read as the same surface as
+  their collapsed siblings (no background elevation), the reasoning body inherits
+  the card surface and stays readable in dark mode, and the timeline spine dot is
+  centered on card rows. Add a per-row content clamp with "Show more/less" for
+  long reasoning text and tool output, and an opt-in `collapseAfter` on
+  `AgentTimeline` (threaded as `collapseTimelineAfter` on `ChatContainer`) that
+  collapses the timeline to the first N steps behind a "Show N more steps" toggle.
+
 ## 11.0.0
 
 ### Patch Changes

package/dist/{artifact-pane-DvJyPWV4.d.ts → artifact-pane-DpuWcAiF.d.ts}

@@ -14,11 +14,20 @@ interface ArtifactPaneProps {
     children?: ReactNode;
     className?: string;
     contentClassName?: string;
+    /** Extra classes for the header band (e.g. to align its surface with the host chrome). */
+    headerClassName?: string;
+    /**
+     * Suppress the eyebrow/title/subtitle/meta block. Use when the host already
+     * shows the artifact's identity elsewhere (e.g. a surrounding path row), so the
+     * pane keeps only its tabs, toolbar, and header actions. The whole header row
+     * collapses when nothing else would render in it.
+     */
+    hideTitleBlock?: boolean;
 }
 /**
  * ArtifactPane — shared frame for files, previews, documents, inspectors, and
  * other artifact-like surfaces inside sandbox applications.
  */
-declare function ArtifactPane({ eyebrow, title, subtitle, meta, headerActions, tabs, toolbar, footer, emptyState, children, className, contentClassName, }: ArtifactPaneProps): react_jsx_runtime.JSX.Element;
+declare function ArtifactPane({ eyebrow, title, subtitle, meta, headerActions, tabs, toolbar, footer, emptyState, children, className, contentClassName, headerClassName, hideTitleBlock, }: ArtifactPaneProps): react_jsx_runtime.JSX.Element;
 
 export { ArtifactPane as A, type ArtifactPaneProps as a };

package/dist/chat.d.ts

@@ -42,12 +42,15 @@ interface ChatContainerProps {
     /** Optional actions rendered beside individual tool items in the `timeline`
      *  presentation, which has no run/message grouping (hence part-only). */
     renderTimelineToolActions?: (part: ToolPart) => ReactNode;
+    /** In the `timeline` presentation, collapse to the first N spine rows behind
+     *  a "Show N more steps" toggle. Omit to always show every row. */
+    collapseTimelineAfter?: number;
 }
 /**
  * Chat transcript container: message list + auto-scroll.
  * Orchestrates useRunGroups, useRunCollapseState, and useAutoScroll.
  */
-declare const ChatContainer: React.MemoExoticComponent<({ messages, partMap, isStreaming, branding, className, renderToolDetail, presentation, onOpenUIAction, enableOpenUI, renderRunActions, renderUserMessageActions, renderToolActions, renderTimelineToolActions, }: ChatContainerProps) => react_jsx_runtime.JSX.Element>;
+declare const ChatContainer: React.MemoExoticComponent<({ messages, partMap, isStreaming, branding, className, renderToolDetail, presentation, onOpenUIAction, enableOpenUI, renderRunActions, renderUserMessageActions, renderToolActions, renderTimelineToolActions, collapseTimelineAfter, }: ChatContainerProps) => react_jsx_runtime.JSX.Element>;
 
 interface MessageListProps {
     groups: GroupedMessage[];
@@ -174,12 +177,15 @@ interface AgentTimelineProps {
     /** Optional actions rendered beside each tool item (e.g. "open in artifacts").
      *  Receives the source tool part carried on the item. */
     renderToolActions?: (part: ToolPart) => ReactNode;
+    /** When set, collapse the timeline to the first N spine rows behind a
+     *  "Show N more steps" toggle. Omit to always show every row. */
+    collapseAfter?: number;
 }
 /**
  * AgentTimeline — unified mixed-content timeline for agent-backed sandbox
  * sessions. Renders messages, tool steps, status cards, and artifact handoffs in
  * a single execution narrative.
  */
-declare function AgentTimeline({ items, isThinking, emptyState, className, renderToolActions, }: AgentTimelineProps): react_jsx_runtime.JSX.Element | null;
+declare function AgentTimeline({ items, isThinking, emptyState, className, renderToolActions, collapseAfter, }: AgentTimelineProps): react_jsx_runtime.JSX.Element | null;
 
 export { AgentTimeline, type AgentTimelineArtifactItem, type AgentTimelineCustomItem, type AgentTimelineItem, type AgentTimelineMessageItem, type AgentTimelineProps, type AgentTimelineStatusItem, type AgentTimelineTone, type AgentTimelineToolGroupItem, type AgentTimelineToolItem, ChatContainer, type ChatContainerProps, ChatMessage, type ChatMessageProps, MessageList, type MessageListProps, type MessageRole, ThinkingIndicator, type ThinkingIndicatorProps, UserMessage, type UserMessageProps };

package/dist/chat.js

@@ -5,17 +5,17 @@ import {
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-KHO7DYXH.js";
+} from "./chunk-OTZWQJ5W.js";
 import "./chunk-AZWDI2JG.js";
-import "./chunk-HHYUPAOJ.js";
-import "./chunk-INMWNFAS.js";
+import "./chunk-SRAKCVPO.js";
+import "./chunk-4ORVXSMU.js";
 import "./chunk-ULDNFLIM.js";
 import "./chunk-AAUNOHVL.js";
-import "./chunk-52Y3FMFI.js";
+import "./chunk-3M7BPSSW.js";
 import "./chunk-GYPQXTJU.js";
 import "./chunk-MKTSMWVD.js";
 import "./chunk-ZRVH3WCA.js";
-import "./chunk-FJBTCTZM.js";
+import "./chunk-P5F43A65.js";
 import "./chunk-WUQDUBJG.js";
 import "./chunk-RQHJBTEU.js";
 export {

package/dist/{chunk-52Y3FMFI.js → chunk-3M7BPSSW.js}

@@ -17,7 +17,7 @@ import {
 } from "./chunk-MKTSMWVD.js";
 import {
   Markdown
-} from "./chunk-FJBTCTZM.js";
+} from "./chunk-P5F43A65.js";
 import {
   CodeBlock
 } from "./chunk-WUQDUBJG.js";

package/dist/chunk-4ORVXSMU.js

@@ -0,0 +1,507 @@
+import {
+  formatDuration,
+  getToolCategory,
+  getToolDisplayMetadata,
+  getToolErrorText
+} from "./chunk-ULDNFLIM.js";
+import {
+  CommandPreview,
+  DiffPreview,
+  GlobResultsPreview,
+  GrepResultsPreview,
+  QuestionPreview,
+  WebSearchPreview,
+  WriteFilePreview
+} from "./chunk-AAUNOHVL.js";
+import {
+  CodeBlock
+} from "./chunk-WUQDUBJG.js";
+import {
+  cn
+} from "./chunk-RQHJBTEU.js";
+
+// src/run/expanded-tool-detail.tsx
+import { memo } from "react";
+import {
+  ArrowRight,
+  ArrowLeft,
+  AlertCircle,
+  Loader2,
+  FileText
+} from "lucide-react";
+
+// src/run/expandable-content.tsx
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+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
+  ] });
+}
+
+// src/run/expanded-tool-detail.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var 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;
+}
+function formatOutput(value) {
+  if (value == null) return "";
+  if (typeof value === "string") return value;
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+}
+var ExpandedToolDetail = memo(({ part }) => {
+  const meta = getToolDisplayMetadata(part);
+  const { status, input, output, error } = part.state;
+  if (meta.displayVariant === "command") {
+    return /* @__PURE__ */ jsx2(CommandPreview, { part });
+  }
+  if (meta.displayVariant === "write-file") {
+    return /* @__PURE__ */ jsx2(WriteFilePreview, { part });
+  }
+  if (meta.displayVariant === "grep") {
+    return /* @__PURE__ */ jsx2(GrepResultsPreview, { part });
+  }
+  if (meta.displayVariant === "glob") {
+    return /* @__PURE__ */ jsx2(GlobResultsPreview, { part });
+  }
+  if (meta.displayVariant === "web-search") {
+    return /* @__PURE__ */ jsx2(WebSearchPreview, { part });
+  }
+  if (meta.displayVariant === "question") {
+    return /* @__PURE__ */ jsx2(QuestionPreview, { part });
+  }
+  if (meta.displayVariant === "diff") {
+    return /* @__PURE__ */ jsx2(DiffPreview, { part });
+  }
+  if (meta.displayVariant === "read-file") {
+    return /* @__PURE__ */ jsxs2("div", { className: "overflow-hidden rounded-[var(--radius-lg)] border border-border bg-card shadow-[var(--shadow-card)]", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2.5 border-b border-border bg-card px-3 py-2", children: [
+        /* @__PURE__ */ jsx2("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__ */ jsx2(FileText, { className: "h-3.5 w-3.5" }) }),
+        /* @__PURE__ */ jsxs2("div", { className: "min-w-0 flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx2("span", { className: "text-xs font-semibold text-foreground", children: "Read file" }),
+          meta.targetPath ? /* @__PURE__ */ jsx2("span", { className: "truncate text-xs font-mono text-muted-foreground", children: meta.targetPath }) : null
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { className: "space-y-2 px-3 py-2.5", children: [
+        typeof output === "string" ? /* @__PURE__ */ jsx2(CodeBlock, { code: output, language: langFromPath(meta.targetPath) ?? "text", className: "rounded-[var(--radius-md)]" }) : /* @__PURE__ */ jsx2("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__ */ jsx2("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__ */ jsxs2("div", { className: "space-y-3", children: [
+    inputStr && /* @__PURE__ */ jsxs2("div", { className: "overflow-hidden rounded-[var(--radius-lg)] border border-border bg-card", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 border-b border-border bg-background px-3 py-2", children: [
+        /* @__PURE__ */ jsx2(ArrowRight, { className: "h-3 w-3 text-primary" }),
+        /* @__PURE__ */ jsx2("span", { className: "text-xs font-medium uppercase tracking-[0.08em] text-muted-foreground", children: "Input" })
+      ] }),
+      /* @__PURE__ */ jsx2(CodeBlock, { code: inputStr, language: "json", className: "rounded-none border-0" })
+    ] }),
+    status === "completed" && outputStr && /* @__PURE__ */ jsxs2("div", { className: "overflow-hidden rounded-[var(--radius-lg)] border border-border bg-card", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 border-b border-border bg-background px-3 py-2", children: [
+        /* @__PURE__ */ jsx2(ArrowLeft, { className: "h-3 w-3 text-primary" }),
+        /* @__PURE__ */ jsx2("span", { className: "text-xs font-medium uppercase tracking-[0.08em] text-muted-foreground", children: "Output" })
+      ] }),
+      /* @__PURE__ */ jsx2(ExpandableContent, { fadeClassName: "from-card", children: /* @__PURE__ */ jsx2(
+        CodeBlock,
+        {
+          code: outputStr.length > 2e3 ? outputStr.slice(0, 2e3) + "\n...(truncated)" : outputStr,
+          language: "json",
+          className: "rounded-none border-0"
+        }
+      ) })
+    ] }),
+    error && /* @__PURE__ */ jsxs2("div", { className: "overflow-hidden rounded-[var(--radius-lg)] border border-[var(--surface-danger-border)]", children: [
+      /* @__PURE__ */ jsxs2("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__ */ jsx2(AlertCircle, { className: "h-3 w-3 text-[var(--surface-danger-text)]" }),
+        /* @__PURE__ */ jsx2("span", { className: "text-xs font-medium uppercase tracking-[0.08em] text-[var(--surface-danger-text)]", children: "Error" })
+      ] }),
+      /* @__PURE__ */ jsx2(ExpandableContent, { fadeClassName: "from-[var(--surface-danger-bg)]", children: /* @__PURE__ */ jsx2("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__ */ jsxs2("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__ */ jsx2(Loader2, { className: cn("h-3 w-3 animate-spin text-primary") }),
+      "Running\u2026"
+    ] })
+  ] });
+});
+ExpandedToolDetail.displayName = "ExpandedToolDetail";
+
+// src/run/run-item-primitives.tsx
+import { useEffect as useEffect2, useState as useState2 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function LiveDuration({ startTime }) {
+  const [elapsed, setElapsed] = useState2(Date.now() - startTime);
+  useEffect2(() => {
+    const id = setInterval(() => setElapsed(Date.now() - startTime), 100);
+    return () => clearInterval(id);
+  }, [startTime]);
+  return /* @__PURE__ */ jsx3("span", { className: "text-xs font-mono text-neutral-400 dark:text-neutral-500 tabular-nums", children: formatDuration(elapsed) });
+}
+
+// src/run/inline-tool-item.tsx
+import { memo as memo2 } from "react";
+import {
+  Terminal,
+  FileEdit,
+  FileSearch,
+  Search,
+  PencilLine,
+  Bot,
+  Globe,
+  ClipboardList,
+  Settings
+} from "lucide-react";
+
+// src/run/run-row-shell.tsx
+import { useState as useState3 } from "react";
+import * as Collapsible from "@radix-ui/react-collapsible";
+import { Loader2 as Loader22, ChevronRight } from "lucide-react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function RunRowStatusDot({ status }) {
+  if (status === "running") {
+    return /* @__PURE__ */ jsx4(Loader22, { className: "h-3 w-3 shrink-0 animate-spin text-[var(--accent-text)]" });
+  }
+  if (status === "success") {
+    return /* @__PURE__ */ jsx4("span", { className: "h-1.5 w-1.5 shrink-0 rounded-full bg-[var(--surface-success-text)]" });
+  }
+  if (status === "error") {
+    return /* @__PURE__ */ jsx4("span", { className: "h-1.5 w-1.5 shrink-0 rounded-full bg-[var(--surface-danger-text)]" });
+  }
+  return null;
+}
+var 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)]"
+};
+function RunRowShell({
+  icon,
+  title,
+  description,
+  descriptionMono = false,
+  status = "idle",
+  startTime,
+  durationMs,
+  groupPosition = "single",
+  collapsedError,
+  actions,
+  open: openProp,
+  onOpenChange,
+  defaultOpen = false,
+  className,
+  contentClassName,
+  children
+}) {
+  const [openState, setOpenState] = useState3(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__ */ jsx4(Collapsible.Root, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs3("div", { className: "flex items-start gap-2", children: [
+    /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        className: cn(
+          "min-w-0 flex-1 overflow-hidden border transition-colors",
+          "border-[var(--border-subtle)] bg-[var(--md3-surface-container)]",
+          expandable && "hover:border-border",
+          open && "border-border",
+          SHAPE_CLASS[groupPosition],
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx4(Collapsible.Trigger, { asChild: true, disabled: !expandable, children: /* @__PURE__ */ jsxs3(
+            "button",
+            {
+              type: "button",
+              className: cn(
+                "flex w-full items-center gap-2.5 px-3 py-2 text-left",
+                expandable ? "cursor-pointer" : "cursor-default"
+              ),
+              children: [
+                /* @__PURE__ */ jsx4("span", { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-[var(--radius-sm)] border border-border bg-muted text-muted-foreground", children: icon }),
+                /* @__PURE__ */ jsx4("span", { className: "shrink-0 whitespace-nowrap text-xs font-medium text-foreground", children: title }),
+                description ? /* @__PURE__ */ jsx4(
+                  "span",
+                  {
+                    className: cn(
+                      "hidden min-w-0 flex-1 truncate text-xs text-muted-foreground sm:inline",
+                      descriptionMono && "font-mono"
+                    ),
+                    children: description
+                  }
+                ) : null,
+                /* @__PURE__ */ jsxs3("div", { className: "ml-auto flex shrink-0 items-center gap-1.5", children: [
+                  isRunning && startTime != null ? /* @__PURE__ */ jsx4(LiveDuration, { startTime }) : durationMs != null ? /* @__PURE__ */ jsx4("span", { className: "text-[10px] font-mono tabular-nums text-muted-foreground", children: formatDuration(durationMs) }) : null,
+                  /* @__PURE__ */ jsx4(RunRowStatusDot, { status }),
+                  expandable ? /* @__PURE__ */ jsx4(
+                    ChevronRight,
+                    {
+                      className: cn(
+                        "h-3 w-3 shrink-0 text-muted-foreground transition-transform",
+                        open && "rotate-90"
+                      )
+                    }
+                  ) : null
+                ] })
+              ]
+            }
+          ) }),
+          collapsedError && !open ? /* @__PURE__ */ jsx4("div", { className: "border-t border-border px-3 py-2 text-xs text-[var(--surface-danger-text)]", children: collapsedError }) : null,
+          expandable ? /* @__PURE__ */ jsx4(Collapsible.Content, { className: "overflow-hidden data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp", children: /* @__PURE__ */ jsx4("div", { className: cn("border-t border-border", contentClassName), children }) }) : null
+        ]
+      }
+    ),
+    actions ? /* @__PURE__ */ jsx4(
+      "div",
+      {
+        className: "flex shrink-0 flex-wrap items-center justify-end gap-1.5 pt-1",
+        onClick: (event) => event.stopPropagation(),
+        children: actions
+      }
+    ) : null
+  ] }) });
+}
+
+// src/run/inline-tool-item.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var TOOL_CATEGORY_ICON_MAP = {
+  command: Terminal,
+  write: FileEdit,
+  read: FileSearch,
+  search: Search,
+  edit: PencilLine,
+  task: Bot,
+  web: Globe,
+  todo: ClipboardList,
+  other: Settings
+};
+function toRowStatus(status) {
+  if (status === "pending" || status === "running") return "running";
+  if (status === "error") return "error";
+  return "success";
+}
+var InlineToolItem = memo2(
+  ({
+    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;
+    return /* @__PURE__ */ jsx5(
+      RunRowShell,
+      {
+        icon: /* @__PURE__ */ jsx5(DefaultIcon, { className: "h-3.5 w-3.5" }),
+        title,
+        description,
+        descriptionMono: true,
+        status: toRowStatus(part.state.status),
+        startTime,
+        durationMs,
+        groupPosition,
+        collapsedError: errorText ?? void 0,
+        actions,
+        className,
+        contentClassName: cn("p-2", contentClassName),
+        children: renderToolDetail?.(part) ?? /* @__PURE__ */ jsx5(ExpandedToolDetail, { part })
+      }
+    );
+  }
+);
+InlineToolItem.displayName = "InlineToolItem";
+
+// src/run/tool-call-step.tsx
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var 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;
+}
+var 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__ */ jsx6(
+    InlineToolItem,
+    {
+      part: resolvedPart,
+      title: label,
+      description: detail,
+      className,
+      actions,
+      renderToolDetail: part ? void 0 : output ? () => /* @__PURE__ */ jsx6(
+        CodeBlock,
+        {
+          code: output,
+          language: lang,
+          className: "max-h-72 overflow-auto text-xs"
+        }
+      ) : () => null
+    }
+  );
+}
+function ToolCallGroup({ title, children, className }) {
+  return /* @__PURE__ */ jsxs4("div", { className: ["my-2 space-y-2", className].filter(Boolean).join(" "), children: [
+    title && /* @__PURE__ */ jsx6("div", { className: "mb-1 px-1 text-xs font-medium uppercase tracking-wider text-muted-foreground", children: title }),
+    children
+  ] });
+}
+
+export {
+  ExpandableContent,
+  ExpandedToolDetail,
+  LiveDuration,
+  RunRowShell,
+  InlineToolItem,
+  ToolCallStep,
+  ToolCallGroup
+};