@tangle-network/ui 5.1.0 → 6.0.0

package/dist/run.js

@@ -2,20 +2,19 @@ import "./chunk-LQS34IGP.js";
 import {
   ToolCallFeed,
   parseToolEvent
-} from "./chunk-U4YRT6MT.js";
+} from "./chunk-O6NUUCT2.js";
 import {
-  ExpandedToolDetail,
   InlineThinkingItem,
-  InlineToolItem,
-  LiveDuration,
   RunGroup
-} from "./chunk-TAWY3KOH.js";
+} from "./chunk-LASW7CYH.js";
 import {
+  ExpandedToolDetail,
+  InlineToolItem,
+  LiveDuration,
   ToolCallGroup,
   ToolCallStep
-} from "./chunk-3O4XJCOE.js";
-import "./chunk-4CLN43XT.js";
-import "./chunk-BX6AQMUS.js";
+} from "./chunk-EOGJX2TU.js";
+import "./chunk-ULDNFLIM.js";
 import "./chunk-AAUNOHVL.js";
 import "./chunk-52Y3FMFI.js";
 import "./chunk-GYPQXTJU.js";

package/dist/sdk-hooks.js

@@ -5,16 +5,18 @@ import {
   useSSEStream,
   useSdkSession,
   useToolCallStream
-} from "./chunk-CJJMKDNN.js";
+} from "./chunk-PN3S2MTV.js";
 import "./chunk-OEX7NZE3.js";
 import {
   useAutoScroll,
   useRunCollapseState,
   useRunGroups
-} from "./chunk-54SQQMMM.js";
-import "./chunk-U4YRT6MT.js";
-import "./chunk-3O4XJCOE.js";
-import "./chunk-BX6AQMUS.js";
+} from "./chunk-AZWDI2JG.js";
+import "./chunk-O6NUUCT2.js";
+import "./chunk-EOGJX2TU.js";
+import "./chunk-ULDNFLIM.js";
+import "./chunk-AAUNOHVL.js";
+import "./chunk-ZRVH3WCA.js";
 import "./chunk-FJBTCTZM.js";
 import "./chunk-WUQDUBJG.js";
 import "./chunk-RQHJBTEU.js";

package/dist/utils.js

@@ -3,17 +3,15 @@ import {
   timeAgo
 } from "./chunk-XGKULLYE.js";
 import {
+  TOOL_CATEGORY_ICONS,
   formatBytes,
   formatDuration,
   formatUptime,
-  truncateText
-} from "./chunk-4CLN43XT.js";
-import {
-  TOOL_CATEGORY_ICONS,
   getToolCategory,
   getToolDisplayMetadata,
-  getToolErrorText
-} from "./chunk-BX6AQMUS.js";
+  getToolErrorText,
+  truncateText
+} from "./chunk-ULDNFLIM.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "5.1.0",
+  "version": "6.0.0",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -132,7 +132,7 @@
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19",
     "react-router": "^7",
-    "@tangle-network/brand": "^0.6.0"
+    "@tangle-network/brand": "^0.7.0"
   },
   "peerDependenciesMeta": {
     "@nanostores/react": {

package/src/run/inline-tool-item.tsx

@@ -53,6 +53,10 @@ export interface InlineToolItemProps {
   className?: string;
   contentClassName?: string;
   actions?: ReactNode;
+  /** Override the derived title (default: from `getToolDisplayMetadata`). */
+  title?: string;
+  /** Override the derived inline description. */
+  description?: string;
 }
 
 /**
@@ -68,9 +72,13 @@ export const InlineToolItem = memo(
     className,
     contentClassName,
     actions,
+    title: titleOverride,
+    description: descriptionOverride,
   }: InlineToolItemProps) => {
     const [open, setOpen] = useState(false);
     const meta = getToolDisplayMetadata(part);
+    const title = titleOverride ?? meta.title;
+    const description = descriptionOverride ?? meta.description;
     const { status } = part.state;
     const errorText = getToolErrorText(part);
 
@@ -127,11 +135,11 @@ export const InlineToolItem = memo(
                 </div>
 
                 <span className="truncate text-xs font-medium text-foreground">
-                  {meta.title}
+                  {title}
                 </span>
-                {meta.description ? (
+                {description ? (
                   <span className="hidden truncate text-xs font-mono text-muted-foreground sm:inline">
-                    {meta.description}
+                    {description}
                   </span>
                 ) : null}
 

package/src/run/tool-call-step.tsx

@@ -1,27 +1,17 @@
 /**
- * ToolCallStep — renders a single agent tool invocation as a collapsible activity step.
+ * ToolCallStep — a single agent tool invocation as a collapsible activity step.
  *
- * Inspired by Conductor's workspace activity feed.
- * Each step shows: icon, label, optional output, expandable detail.
+ * Now a thin adapter over the canonical `InlineToolItem`: it maps the flat
+ * `ToolCallData`-style props (label / status / detail / output / duration) onto
+ * a `ToolPart` and delegates rendering, so the timeline feed (`AgentTimeline`,
+ * `ToolCallFeed`) and the run group share ONE row implementation and one look.
+ * The bespoke row markup is gone; only the prop adapter remains.
  */
 
-import { useState, type ReactNode } from "react";
-import {
-  Terminal,
-  FileText,
-  FileCode,
-  Search,
-  CheckCircle,
-  AlertCircle,
-  ChevronRight,
-  Loader2,
-  FolderOpen,
-  Download,
-  Pencil,
-  Eye,
-} from "lucide-react";
-import { cn } from "../lib/utils";
+import { type ReactNode } from "react";
 import { CodeBlock } from "../markdown/code-block";
+import type { ToolPart, ToolStatus } from "../types/parts";
+import { InlineToolItem } from "./inline-tool-item";
 
 export type ToolCallType =
   | "bash"
@@ -65,52 +55,19 @@ const EXT_LANGUAGE: Record<string, string> = {
   go: "go",
   sql: "sql",
   xml: "xml",
-}
+};
 
 function inferLanguage(detail?: string, language?: string): string | undefined {
-  if (language) return language
-  if (!detail) return undefined
-  const ext = detail.split(".").pop()?.toLowerCase()
-  return ext ? EXT_LANGUAGE[ext] : undefined
-}
-
-function isFilePath(detail: string): boolean {
-  return /[/\\]/.test(detail) || /\.\w{1,6}$/.test(detail)
+  if (language) return language;
+  if (!detail) return undefined;
+  const ext = detail.split(".").pop()?.toLowerCase();
+  return ext ? EXT_LANGUAGE[ext] : undefined;
 }
 
-function FilePathChip({ path }: { path: string }) {
-  const parts = path.replace(/\\/g, "/").split("/")
-  const filename = parts.pop() ?? path
-  const dir = parts.length > 0 ? parts.join("/") + "/" : ""
-  return (
-    <div className="flex items-center gap-1.5 rounded-[var(--radius-sm)] border border-border bg-background px-2.5 py-1.5 font-mono text-xs min-w-0">
-      <FileCode className="h-3.5 w-3.5 shrink-0 text-primary" />
-      {dir && (
-        <span className="truncate text-muted-foreground">{dir}</span>
-      )}
-      <span className="shrink-0 font-semibold text-foreground">{filename}</span>
-    </div>
-  )
-}
-
-const ICONS: Record<ToolCallType, typeof Terminal> = {
-  bash: Terminal,
-  read: Eye,
-  write: FileText,
-  edit: Pencil,
-  glob: FolderOpen,
-  grep: Search,
-  list: FolderOpen,
-  download: Download,
-  inspect: Search,
-  audit: CheckCircle,
-  unknown: FileCode,
-};
-
-const STATUS_COLORS: Record<ToolCallStatus, string> = {
-  running: "text-primary",
-  success: "text-[var(--code-success)]",
-  error: "text-[var(--code-error)]",
+const STATUS_MAP: Record<ToolCallStatus, ToolStatus> = {
+  running: "running",
+  success: "completed",
+  error: "error",
 };
 
 export function ToolCallStep({
@@ -123,93 +80,38 @@ export function ToolCallStep({
   duration,
   className,
 }: ToolCallStepProps) {
-  const [expanded, setExpanded] = useState(false);
-  const Icon = ICONS[type] || ICONS.unknown;
-  const hasExpandable = !!(detail || output);
+  const part: ToolPart = {
+    type: "tool",
+    id: `${type}:${label}`,
+    tool: type,
+    state: {
+      status: STATUS_MAP[status],
+      input: detail ? { detail } : undefined,
+      output,
+      time: duration != null ? { start: 0, end: duration } : undefined,
+    },
+  };
+
   const lang = inferLanguage(detail, language);
 
   return (
-    <div
-      className={cn(
-        "group overflow-hidden rounded-[var(--radius-lg)] border bg-card/40 transition-colors",
-        "border-[var(--border-subtle)] hover:border-border",
-        status === "error" && "border-[var(--surface-danger-border)]/60",
-        className,
-      )}
-    >
-      <button
-        onClick={() => hasExpandable && setExpanded(!expanded)}
-        disabled={!hasExpandable}
-        className={cn(
-          "flex w-full items-center gap-2.5 px-3 py-2 text-left text-sm",
-          hasExpandable && "cursor-pointer",
-        )}
-      >
-        <div
-          className={cn(
-            "flex h-6 w-6 shrink-0 items-center justify-center rounded-[var(--radius-sm)]",
-            status === "running" && "bg-[var(--accent-surface-soft)] text-primary",
-            status === "success" && "bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]",
-            status === "error" && "bg-[var(--surface-danger-bg)] text-[var(--surface-danger-text)]",
-          )}
-        >
-          {status === "running" ? (
-            <Loader2 className="h-3 w-3 animate-spin shrink-0" />
-          ) : (
-            <Icon className={cn("h-3 w-3 shrink-0", STATUS_COLORS[status])} />
-          )}
-        </div>
-
-        {/* Label */}
-        <span className="truncate flex-1 font-sans text-foreground">
-          {label}
-        </span>
-
-        {/* Duration — quiet, before the status glyph */}
-        {duration !== undefined && status !== "running" && (
-          <span className="shrink-0 text-[11px] tabular-nums text-muted-foreground">
-            {duration < 1000 ? `${duration}ms` : `${(duration / 1000).toFixed(1)}s`}
-          </span>
-        )}
-
-        {/* Quiet status glyph — the loud uppercase pill read as harsh; the colored
-            icon carries the same signal calmly (running spins in the left badge). */}
-        {status === "success" && (
-          <CheckCircle className="h-3.5 w-3.5 shrink-0 text-[var(--surface-success-text)]" />
-        )}
-        {status === "error" && (
-          <AlertCircle className="h-3.5 w-3.5 shrink-0 text-[var(--surface-danger-text)]" />
-        )}
-
-        {/* Expand chevron */}
-        {hasExpandable && (
-          <ChevronRight
-            className={cn(
-              "h-3 w-3 text-muted-foreground transition-transform shrink-0",
-              expanded && "rotate-90",
-            )}
-          />
-        )}
-      </button>
-
-      {/* Expandable content */}
-      {expanded && (detail || output) && (
-        <div className="space-y-2 border-t border-[var(--border-subtle)] bg-muted/40 px-3 py-2.5">
-          {detail && (
-            isFilePath(detail)
-              ? <FilePathChip path={detail} />
-              : <div className="text-xs font-mono text-muted-foreground">{detail}</div>
-          )}
-          {output && (
-            <CodeBlock
-              code={output}
-              language={lang}
-              className="max-h-72 overflow-auto text-xs"
-            />
-          )}
-        </div>
-      )}
-    </div>
+    <InlineToolItem
+      part={part}
+      title={label}
+      description={detail}
+      className={className}
+      renderToolDetail={
+        output
+          ? () => (
+              <CodeBlock
+                code={output}
+                language={lang}
+                className="max-h-72 overflow-auto text-xs"
+              />
+            )
+          : () => null
+      }
+    />
   );
 }
 
@@ -224,7 +126,7 @@ export interface ToolCallGroupProps {
 
 export function ToolCallGroup({ title, children, className }: ToolCallGroupProps) {
   return (
-    <div className={cn("my-2 space-y-2", className)}>
+    <div className={["my-2 space-y-2", className].filter(Boolean).join(" ")}>
       {title && (
         <div className="mb-1 px-1 text-xs font-medium uppercase tracking-wider text-muted-foreground">
           {title}

package/dist/chunk-3O4XJCOE.js

@@ -1,176 +0,0 @@
-import {
-  CodeBlock
-} from "./chunk-WUQDUBJG.js";
-import {
-  cn
-} from "./chunk-RQHJBTEU.js";
-
-// src/run/tool-call-step.tsx
-import { useState } from "react";
-import {
-  Terminal,
-  FileText,
-  FileCode,
-  Search,
-  CheckCircle,
-  AlertCircle,
-  ChevronRight,
-  Loader2,
-  FolderOpen,
-  Download,
-  Pencil,
-  Eye
-} from "lucide-react";
-import { jsx, jsxs } 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;
-}
-function isFilePath(detail) {
-  return /[/\\]/.test(detail) || /\.\w{1,6}$/.test(detail);
-}
-function FilePathChip({ path }) {
-  const parts = path.replace(/\\/g, "/").split("/");
-  const filename = parts.pop() ?? path;
-  const dir = parts.length > 0 ? parts.join("/") + "/" : "";
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 rounded-[var(--radius-sm)] border border-border bg-background px-2.5 py-1.5 font-mono text-xs min-w-0", children: [
-    /* @__PURE__ */ jsx(FileCode, { className: "h-3.5 w-3.5 shrink-0 text-primary" }),
-    dir && /* @__PURE__ */ jsx("span", { className: "truncate text-muted-foreground", children: dir }),
-    /* @__PURE__ */ jsx("span", { className: "shrink-0 font-semibold text-foreground", children: filename })
-  ] });
-}
-var ICONS = {
-  bash: Terminal,
-  read: Eye,
-  write: FileText,
-  edit: Pencil,
-  glob: FolderOpen,
-  grep: Search,
-  list: FolderOpen,
-  download: Download,
-  inspect: Search,
-  audit: CheckCircle,
-  unknown: FileCode
-};
-var STATUS_COLORS = {
-  running: "text-primary",
-  success: "text-[var(--code-success)]",
-  error: "text-[var(--code-error)]"
-};
-function ToolCallStep({
-  type,
-  label,
-  status,
-  detail,
-  output,
-  language,
-  duration,
-  className
-}) {
-  const [expanded, setExpanded] = useState(false);
-  const Icon = ICONS[type] || ICONS.unknown;
-  const hasExpandable = !!(detail || output);
-  const lang = inferLanguage(detail, language);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "group overflow-hidden rounded-[var(--radius-lg)] border bg-card/40 transition-colors",
-        "border-[var(--border-subtle)] hover:border-border",
-        status === "error" && "border-[var(--surface-danger-border)]/60",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            onClick: () => hasExpandable && setExpanded(!expanded),
-            disabled: !hasExpandable,
-            className: cn(
-              "flex w-full items-center gap-2.5 px-3 py-2 text-left text-sm",
-              hasExpandable && "cursor-pointer"
-            ),
-            children: [
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: cn(
-                    "flex h-6 w-6 shrink-0 items-center justify-center rounded-[var(--radius-sm)]",
-                    status === "running" && "bg-[var(--accent-surface-soft)] text-primary",
-                    status === "success" && "bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]",
-                    status === "error" && "bg-[var(--surface-danger-bg)] text-[var(--surface-danger-text)]"
-                  ),
-                  children: status === "running" ? /* @__PURE__ */ jsx(Loader2, { className: "h-3 w-3 animate-spin shrink-0" }) : /* @__PURE__ */ jsx(Icon, { className: cn("h-3 w-3 shrink-0", STATUS_COLORS[status]) })
-                }
-              ),
-              /* @__PURE__ */ jsx("span", { className: "truncate flex-1 font-sans text-foreground", children: label }),
-              duration !== void 0 && status !== "running" && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[11px] tabular-nums text-muted-foreground", children: duration < 1e3 ? `${duration}ms` : `${(duration / 1e3).toFixed(1)}s` }),
-              status === "success" && /* @__PURE__ */ jsx(CheckCircle, { className: "h-3.5 w-3.5 shrink-0 text-[var(--surface-success-text)]" }),
-              status === "error" && /* @__PURE__ */ jsx(AlertCircle, { className: "h-3.5 w-3.5 shrink-0 text-[var(--surface-danger-text)]" }),
-              hasExpandable && /* @__PURE__ */ jsx(
-                ChevronRight,
-                {
-                  className: cn(
-                    "h-3 w-3 text-muted-foreground transition-transform shrink-0",
-                    expanded && "rotate-90"
-                  )
-                }
-              )
-            ]
-          }
-        ),
-        expanded && (detail || output) && /* @__PURE__ */ jsxs("div", { className: "space-y-2 border-t border-[var(--border-subtle)] bg-muted/40 px-3 py-2.5", children: [
-          detail && (isFilePath(detail) ? /* @__PURE__ */ jsx(FilePathChip, { path: detail }) : /* @__PURE__ */ jsx("div", { className: "text-xs font-mono text-muted-foreground", children: detail })),
-          output && /* @__PURE__ */ jsx(
-            CodeBlock,
-            {
-              code: output,
-              language: lang,
-              className: "max-h-72 overflow-auto text-xs"
-            }
-          )
-        ] })
-      ]
-    }
-  );
-}
-function ToolCallGroup({ title, children, className }) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("my-2 space-y-2", className), children: [
-    title && /* @__PURE__ */ jsx("div", { className: "mb-1 px-1 text-xs font-medium uppercase tracking-wider text-muted-foreground", children: title }),
-    children
-  ] });
-}
-
-export {
-  ToolCallStep,
-  ToolCallGroup
-};

package/dist/chunk-4CLN43XT.js

@@ -1,45 +0,0 @@
-// src/utils/format.ts
-function formatDuration(ms) {
-  if (ms < 1e3) return "<1s";
-  const seconds = Math.floor(ms / 1e3);
-  if (seconds < 60) return `${seconds}s`;
-  const minutes = Math.floor(seconds / 60);
-  const remaining = seconds % 60;
-  return remaining > 0 ? `${minutes}m ${remaining}s` : `${minutes}m`;
-}
-function truncateText(text, max) {
-  const cleaned = text.replace(/\s+/g, " ").trim();
-  if (cleaned.length <= max) return cleaned;
-  return cleaned.slice(0, max).trim() + "...";
-}
-function formatUptime(ms) {
-  if (!Number.isFinite(ms) || ms < 0) return "\u2014";
-  const totalSeconds = Math.floor(ms / 1e3);
-  if (totalSeconds < 60) return `${totalSeconds}s`;
-  const minutes = Math.floor(totalSeconds / 60);
-  const seconds = totalSeconds % 60;
-  if (minutes < 60) return `${minutes}m ${seconds}s`;
-  const hours = Math.floor(minutes / 60);
-  const remMinutes = minutes % 60;
-  if (hours < 24) return `${hours}h ${remMinutes}m`;
-  const days = Math.floor(hours / 24);
-  const remHours = hours % 24;
-  return `${days}d ${remHours}h`;
-}
-function formatBytes(bytes) {
-  if (!Number.isFinite(bytes) || bytes < 0) return "\u2014";
-  if (bytes < 1024) return `${Math.round(bytes)} B`;
-  const kb = bytes / 1024;
-  if (kb < 1024) return `${kb < 10 ? kb.toFixed(1) : Math.round(kb)} KB`;
-  const mb = kb / 1024;
-  if (mb < 1024) return `${mb < 10 ? mb.toFixed(1) : Math.round(mb)} MB`;
-  const gb = mb / 1024;
-  return `${gb < 10 ? gb.toFixed(2) : gb.toFixed(1)} GB`;
-}
-
-export {
-  formatDuration,
-  truncateText,
-  formatUptime,
-  formatBytes
-};