@tangle-network/ui 5.1.0 → 5.2.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @tangle-network/ui
 
+## 5.2.0
+
+### Minor Changes
+
+- b0bf106: Single tool-call row implementation. `ToolCallStep` (the timeline/feed row used by `AgentTimeline` and `ToolCallFeed`) is now a thin adapter over the canonical `InlineToolItem` — it maps its flat `label`/`status`/`detail`/`output`/`duration` props onto a `ToolPart` and delegates rendering. The duplicate bespoke row markup is deleted, so every transcript (`RunGroup`, `AgentTimeline`, `ToolCallFeed`) shares one row component and one look. `InlineToolItem` gains optional `title`/`description` overrides for callers that supply explicit labels. No public API changes.
+
 ## 5.1.0
 
 ### Minor Changes

package/dist/chat.js

@@ -6,12 +6,11 @@ import {
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-FKDZOA4S.js";
-import "./chunk-54SQQMMM.js";
-import "./chunk-TAWY3KOH.js";
-import "./chunk-3O4XJCOE.js";
-import "./chunk-4CLN43XT.js";
-import "./chunk-BX6AQMUS.js";
+} from "./chunk-SJ6IL4HI.js";
+import "./chunk-AZWDI2JG.js";
+import "./chunk-LASW7CYH.js";
+import "./chunk-EOGJX2TU.js";
+import "./chunk-ULDNFLIM.js";
 import "./chunk-AAUNOHVL.js";
 import "./chunk-52Y3FMFI.js";
 import "./chunk-GYPQXTJU.js";

package/dist/{chunk-54SQQMMM.js → chunk-AZWDI2JG.js}

@@ -1,6 +1,6 @@
 import {
   getToolCategory
-} from "./chunk-BX6AQMUS.js";
+} from "./chunk-ULDNFLIM.js";
 
 // src/hooks/use-run-groups.ts
 import { useMemo } from "react";

package/dist/chunk-EOGJX2TU.js

@@ -0,0 +1,366 @@
+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";
+import { jsx, jsxs } 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__ */ 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(
+        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("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\u2026"
+    ] })
+  ] });
+});
+ExpandedToolDetail.displayName = "ExpandedToolDetail";
+
+// src/run/run-item-primitives.tsx
+import { useEffect, useState } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function LiveDuration({ startTime }) {
+  const [elapsed, setElapsed] = useState(Date.now() - startTime);
+  useEffect(() => {
+    const id = setInterval(() => setElapsed(Date.now() - startTime), 100);
+    return () => clearInterval(id);
+  }, [startTime]);
+  return /* @__PURE__ */ jsx2("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, useState as useState2 } from "react";
+import * as Collapsible from "@radix-ui/react-collapsible";
+import {
+  Loader2 as Loader22,
+  CheckCircle2,
+  AlertCircle as AlertCircle2,
+  ChevronDown,
+  ChevronRight,
+  Terminal,
+  FileEdit,
+  FileSearch,
+  Search,
+  PencilLine,
+  Bot,
+  Globe,
+  ClipboardList,
+  Settings
+} from "lucide-react";
+import { jsx as jsx3, jsxs as jsxs2 } 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
+};
+var InlineToolItem = memo2(
+  ({
+    part,
+    renderToolDetail,
+    groupPosition = "single",
+    className,
+    contentClassName,
+    actions,
+    title: titleOverride,
+    description: descriptionOverride
+  }) => {
+    const [open, setOpen] = useState2(false);
+    const meta = getToolDisplayMetadata(part);
+    const title = titleOverride ?? meta.title;
+    const description = descriptionOverride ?? meta.description;
+    const { status } = part.state;
+    const errorText = getToolErrorText(part);
+    const isRunning = status === "pending" || status === "running";
+    const isError = status === "error";
+    const isComplete = status === "completed";
+    const startTime = part.state.time?.start;
+    const endTime = part.state.time?.end;
+    const durationMs = startTime && endTime ? endTime - startTime : void 0;
+    const category = getToolCategory(part.tool);
+    const DefaultIcon = TOOL_CATEGORY_ICON_MAP[category] ?? Settings;
+    const shapeClass = {
+      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)]"
+    }[groupPosition];
+    return /* @__PURE__ */ jsxs2(Collapsible.Root, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsxs2("div", { className: "flex items-start gap-2", children: [
+        /* @__PURE__ */ jsx3(Collapsible.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs2(
+          "button",
+          {
+            className: cn(
+              "w-full border text-left transition-colors",
+              "border-[var(--border-subtle)] bg-card/40 hover:border-border hover:bg-accent/25",
+              open && "border-border bg-accent/20",
+              shapeClass,
+              className
+            ),
+            children: [
+              /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 px-2.5 py-1.5", children: [
+                /* @__PURE__ */ jsx3("div", { className: cn(
+                  "shrink-0",
+                  isRunning && "text-primary",
+                  isComplete && "text-[var(--surface-success-text)]",
+                  isError && "text-[var(--surface-danger-text)]",
+                  !isRunning && !isComplete && !isError && "text-muted-foreground"
+                ), children: isRunning ? /* @__PURE__ */ jsx3(Loader22, { className: "h-3.5 w-3.5 animate-spin" }) : isComplete ? /* @__PURE__ */ jsx3(CheckCircle2, { className: "h-3.5 w-3.5" }) : isError ? /* @__PURE__ */ jsx3(AlertCircle2, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx3(DefaultIcon, { className: "h-3.5 w-3.5" }) }),
+                /* @__PURE__ */ jsx3("span", { className: "truncate text-xs font-medium text-foreground", children: title }),
+                description ? /* @__PURE__ */ jsx3("span", { className: "hidden truncate text-xs font-mono text-muted-foreground sm:inline", children: description }) : null,
+                /* @__PURE__ */ jsxs2("div", { className: "ml-auto flex shrink-0 items-center gap-1.5", children: [
+                  isRunning && startTime ? /* @__PURE__ */ jsx3(LiveDuration, { startTime }) : null,
+                  !isRunning && durationMs != null ? /* @__PURE__ */ jsx3("span", { className: "text-[10px] font-mono tabular-nums text-muted-foreground", children: formatDuration(durationMs) }) : null,
+                  isError ? /* @__PURE__ */ jsx3("span", { className: "rounded-full border border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)] px-1.5 py-px text-[10px] font-semibold uppercase text-[var(--surface-danger-text)]", children: "Failed" }) : null,
+                  isRunning ? /* @__PURE__ */ jsx3("span", { className: "rounded-full border border-[var(--border-accent)] bg-primary/10 px-1.5 py-px text-[10px] font-semibold uppercase text-primary", children: "Running" }) : null,
+                  open ? /* @__PURE__ */ jsx3(ChevronDown, { className: "h-3 w-3 text-muted-foreground" }) : /* @__PURE__ */ jsx3(ChevronRight, { className: "h-3 w-3 text-muted-foreground" })
+                ] })
+              ] }),
+              errorText && !open ? /* @__PURE__ */ jsx3("div", { className: "border-t border-border px-3 py-2 text-xs text-red-200", children: errorText }) : null
+            ]
+          }
+        ) }),
+        actions ? /* @__PURE__ */ jsx3(
+          "div",
+          {
+            className: "flex shrink-0 flex-wrap items-center justify-end gap-1.5 pt-1",
+            onClick: (event) => event.stopPropagation(),
+            children: actions
+          }
+        ) : null
+      ] }),
+      /* @__PURE__ */ jsx3(Collapsible.Content, { className: "overflow-hidden data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp", children: /* @__PURE__ */ jsx3("div", { className: cn("mt-1.5 ml-2.5 border-l-2 border-primary/15 pl-3.5", contentClassName), children: renderToolDetail?.(part) ?? /* @__PURE__ */ jsx3(ExpandedToolDetail, { part }) }) })
+    ] });
+  }
+);
+InlineToolItem.displayName = "InlineToolItem";
+
+// src/run/tool-call-step.tsx
+import { jsx as jsx4, jsxs as jsxs3 } 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
+}) {
+  const 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__ */ jsx4(
+    InlineToolItem,
+    {
+      part,
+      title: label,
+      description: detail,
+      className,
+      renderToolDetail: output ? () => /* @__PURE__ */ jsx4(
+        CodeBlock,
+        {
+          code: output,
+          language: lang,
+          className: "max-h-72 overflow-auto text-xs"
+        }
+      ) : () => null
+    }
+  );
+}
+function ToolCallGroup({ title, children, className }) {
+  return /* @__PURE__ */ jsxs3("div", { className: ["my-2 space-y-2", className].filter(Boolean).join(" "), children: [
+    title && /* @__PURE__ */ jsx4("div", { className: "mb-1 px-1 text-xs font-medium uppercase tracking-wider text-muted-foreground", children: title }),
+    children
+  ] });
+}
+
+export {
+  ExpandedToolDetail,
+  LiveDuration,
+  InlineToolItem,
+  ToolCallStep,
+  ToolCallGroup
+};