@tangle-network/ui 5.0.0 → 5.2.0

package/dist/run.js

@@ -2,20 +2,19 @@ import "./chunk-LQS34IGP.js";
 import {
   ToolCallFeed,
   parseToolEvent
-} from "./chunk-5VPTNXX7.js";
+} from "./chunk-O6NUUCT2.js";
 import {
-  ExpandedToolDetail,
   InlineThinkingItem,
-  InlineToolItem,
-  LiveDuration,
   RunGroup
-} from "./chunk-JBPWIYTQ.js";
+} from "./chunk-LASW7CYH.js";
 import {
+  ExpandedToolDetail,
+  InlineToolItem,
+  LiveDuration,
   ToolCallGroup,
   ToolCallStep
-} from "./chunk-DGW77LD7.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-CMX2I43A.js";
+} from "./chunk-PN3S2MTV.js";
 import "./chunk-OEX7NZE3.js";
 import {
   useAutoScroll,
   useRunCollapseState,
   useRunGroups
-} from "./chunk-54SQQMMM.js";
-import "./chunk-5VPTNXX7.js";
-import "./chunk-DGW77LD7.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.0.0",
+  "version": "5.2.0",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",

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);
 
@@ -101,8 +109,8 @@ export const InlineToolItem = memo(
             <button
               className={cn(
                 "w-full border text-left transition-colors",
-                "border-border bg-card hover:border-[var(--border-accent-hover)] hover:bg-accent/35",
-                open && "border-border bg-accent/30",
+                "border-[var(--border-subtle)] bg-card/40 hover:border-border hover:bg-accent/25",
+                open && "border-border bg-accent/20",
                 shapeClass,
                 className,
               )}
@@ -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}
 
@@ -179,7 +187,7 @@ export const InlineToolItem = memo(
         </div>
 
         <Collapsible.Content className="overflow-hidden data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp">
-          <div className={cn("mt-2 pl-4", contentClassName)}>
+          <div className={cn("mt-1.5 ml-2.5 border-l-2 border-primary/15 pl-3.5", contentClassName)}>
             {renderToolDetail?.(part) ?? <ExpandedToolDetail part={part} />}
           </div>
         </Collapsible.Content>

package/src/run/run-group.tsx

@@ -58,9 +58,9 @@ function AssistantShell({
   children: ReactNode;
 }) {
   return (
-    <div className="flex gap-3">
-      <div className="mt-1 flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[var(--brand-primary)] text-white">
-        <Bot className="h-4 w-4" />
+    <div className="flex gap-2.5">
+      <div className="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-[var(--brand-primary)] text-white">
+        <Bot className="h-3.5 w-3.5" />
       </div>
 
       <div className={ASSISTANT_SHELL}>
@@ -402,7 +402,7 @@ export const RunGroup = memo(
       <Collapsible.Root open={!collapsed} onOpenChange={() => onToggle()}>
         <div className="rounded-[28px] border border-[var(--border-subtle)] bg-[var(--bg-card)] shadow-none">
         {/* Header */}
-        <div className="flex items-start gap-3 px-4 py-3.5">
+        <div className="flex items-start gap-3 px-3 py-2.5">
           <Collapsible.Trigger asChild>
             <button
               className={cn(
@@ -410,13 +410,13 @@ export const RunGroup = memo(
                 "bg-transparent hover:bg-transparent",
               )}
             >
-              <div className="flex items-center gap-2.5">
+              <div className="flex items-center gap-2">
                 <div
                   className={cn(
-                    "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[var(--brand-primary)] text-white",
+                    "flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-[var(--brand-primary)] text-white",
                   )}
                 >
-                  <Bot className="h-4 w-4" />
+                  <Bot className="h-3.5 w-3.5" />
                 </div>
 
                 <span className={cn("text-sm font-semibold", branding.textClass)}>
@@ -473,10 +473,24 @@ export const RunGroup = memo(
 
         {/* Expanded content */}
         <Collapsible.Content className="overflow-hidden data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp">
-          <div className={cn("space-y-3 border-t border-[var(--border-subtle)] px-4 pb-4 pt-3")}>
+          <div className={cn("border-t border-[var(--border-subtle)] px-4 pb-4 pt-3")}>
             {allParts.map(({ part, msgId, index }, partIndex) => {
               const key = `${msgId}-${index}`;
 
+              // Consecutive (non-OpenUI) tool calls connect into one block —
+              // `getToolGroupPosition` already gives them joined radii, so they
+              // get no vertical gap; every other transition keeps a normal gap.
+              const prev = allParts[partIndex - 1]?.part;
+              const connectedTool =
+                part.type === "tool" &&
+                prev?.type === "tool" &&
+                !isOpenUITool(part as ToolPart) &&
+                !isOpenUITool(prev as ToolPart);
+              const gapClass =
+                partIndex === 0 ? "" : connectedTool ? "mt-px" : "mt-3";
+
+              let node: ReactNode = null;
+
               if (part.type === "tool") {
                 if (isOpenUITool(part as ToolPart)) {
                   const toolPart = part as ToolPart;
@@ -484,11 +498,8 @@ export const RunGroup = memo(
                   const summary = getOpenUISummary(toolPart.state.output);
 
                   if (toolPart.state.status === "completed" && schema) {
-                    return (
-                      <div
-                        key={key}
-                        className="overflow-hidden rounded-[24px] border border-[var(--border-subtle)] bg-[var(--bg-card)]"
-                      >
+                    node = (
+                      <div className="overflow-hidden rounded-[24px] border border-[var(--border-subtle)] bg-[var(--bg-card)]">
                         {summary ? (
                           <div className="border-b border-[var(--border-subtle)] px-4 py-3">
                             <div className="text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground">
@@ -502,14 +513,9 @@ export const RunGroup = memo(
                         </div>
                       </div>
                     );
-                  }
-
-                  if (toolPart.state.status === "running") {
-                    return (
-                      <div
-                        key={key}
-                        className="flex items-center gap-3 rounded-[20px] border border-[var(--border-subtle)] bg-[var(--bg-card)] px-4 py-3 text-sm text-muted-foreground"
-                      >
+                  } else if (toolPart.state.status === "running") {
+                    node = (
+                      <div className="flex items-center gap-3 rounded-[20px] border border-[var(--border-subtle)] bg-[var(--bg-card)] px-4 py-3 text-sm text-muted-foreground">
                         <Loader2 className="h-4 w-4 animate-spin text-primary" />
                         Building view…
                       </div>
@@ -517,47 +523,45 @@ export const RunGroup = memo(
                   }
                 }
 
-                return (
-                  <InlineToolItem
-                    key={key}
-                    part={part as ToolPart}
-                    renderToolDetail={renderToolDetail}
-                    groupPosition={getToolGroupPosition(partIndex, allParts)}
-                    actions={renderToolActions?.(part as ToolPart, {
-                      run,
-                      messageId: msgId,
-                      partIndex: index,
-                    })}
-                  />
-                );
-              }
-
-              if (part.type === "reasoning") {
-                return (
+                if (node === null) {
+                  node = (
+                    <InlineToolItem
+                      part={part as ToolPart}
+                      renderToolDetail={renderToolDetail}
+                      groupPosition={getToolGroupPosition(partIndex, allParts)}
+                      actions={renderToolActions?.(part as ToolPart, {
+                        run,
+                        messageId: msgId,
+                        partIndex: index,
+                      })}
+                    />
+                  );
+                }
+              } else if (part.type === "reasoning") {
+                node = (
                   <InlineThinkingItem
-                    key={key}
                     part={part as ReasoningPart}
                     defaultOpen={isStreaming}
                   />
                 );
-              }
-
-              if (
+              } else if (
                 part.type === "text" &&
                 !part.synthetic &&
                 part.text.trim()
               ) {
-                return (
-                  <div
-                    key={key}
-                    className="px-1 py-1"
-                  >
+                node = (
+                  <div className="px-1 py-1">
                     <Markdown className="tangle-prose text-[15px] leading-7">{part.text}</Markdown>
                   </div>
                 );
               }
 
-              return null;
+              if (!node) return null;
+              return (
+                <div key={key} className={gapClass}>
+                  {node}
+                </div>
+              );
             })}
           </div>
         </Collapsible.Content>

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

@@ -1,26 +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,
-  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"
@@ -64,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({
@@ -122,98 +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 transition-colors",
-        status === "running" && "border-border",
-        status === "success" && "border-border hover:border-primary/20",
-        status === "error" && "border-[var(--surface-danger-border)]",
-        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)] border",
-            status === "running" && "border-[var(--border-accent)] bg-[var(--accent-surface-soft)] text-primary",
-            status === "success" && "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]",
-            status === "error" && "border-[var(--surface-danger-border)] 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>
-
-        <span
-          className={cn(
-            "rounded-full border px-2 py-0.5 text-[11px] font-semibold uppercase tracking-[0.06em]",
-            status === "running" &&
-              "border-border bg-[var(--accent-surface-soft)] text-primary",
-            status === "success" &&
-              "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]",
-            status === "error" && "border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)] text-[var(--surface-danger-text)]",
-          )}
-        >
-          {status}
-        </span>
-
-        {/* Duration */}
-        {duration !== undefined && status !== "running" && (
-          <span className="shrink-0 text-xs tabular-nums text-muted-foreground">
-            {duration < 1000 ? `${duration}ms` : `${(duration / 1000).toFixed(1)}s`}
-          </span>
-        )}
-
-        {/* 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-border bg-muted 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
+      }
+    />
   );
 }
 
@@ -228,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-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
-};