@tangle-network/ui 11.6.0 → 11.8.0

package/dist/{chunk-ULDNFLIM.js → chunk-ND3ZFXQK.js}

@@ -18,10 +18,6 @@ function extractCommand(input) {
 function extractFilePath(input) {
   return extractString(input, "file_path") ?? extractString(input, "path") ?? extractString(input, "filePath") ?? extractString(input, "file");
 }
-function cleanPath(path) {
-  const parts = path.split("/");
-  return parts.length > 3 ? ".../" + parts.slice(-2).join("/") : path;
-}
 var TOOL_CATEGORY_ICONS = {
   command: "terminal",
   write: "file-plus",
@@ -87,7 +83,7 @@ function getToolDisplayMetadata(part) {
     case "command":
     case "execute":
       return {
-        title: "Run command",
+        title: "Shell",
         description: command ? truncateCommand(command) : void 0,
         displayVariant: "command",
         commandSnippet: command
@@ -96,7 +92,7 @@ function getToolDisplayMetadata(part) {
     case "write_file":
     case "create_file":
       return {
-        title: filePath ? `Write ${cleanPath(filePath)}` : "Write file",
+        title: "Write",
         description: filePath,
         displayVariant: "write-file",
         targetPath: filePath
@@ -104,7 +100,7 @@ function getToolDisplayMetadata(part) {
     case "edit":
     case "patch":
       return {
-        title: filePath ? `Edit ${cleanPath(filePath)}` : "Edit file",
+        title: "Edit",
         description: filePath,
         hasDiffOutput: true,
         diffFilePath: filePath,
@@ -115,7 +111,7 @@ function getToolDisplayMetadata(part) {
     case "read_file":
     case "cat":
       return {
-        title: filePath ? `Read ${cleanPath(filePath)}` : "Read file",
+        title: "Read",
         description: filePath,
         displayVariant: "read-file",
         targetPath: filePath
@@ -125,7 +121,7 @@ function getToolDisplayMetadata(part) {
     case "rg": {
       const pattern = extractString(input, "pattern");
       return {
-        title: pattern ? `Search: ${pattern}` : "Search",
+        title: "Search",
         description: pattern,
         displayVariant: "grep"
       };
@@ -135,7 +131,7 @@ function getToolDisplayMetadata(part) {
     case "ls": {
       const pattern = extractString(input, "pattern");
       return {
-        title: pattern ? `Find: ${pattern}` : "Find files",
+        title: "Find",
         description: pattern,
         displayVariant: "glob"
       };
@@ -145,8 +141,8 @@ function getToolDisplayMetadata(part) {
     case "fetch": {
       const query = extractString(input, "query") ?? extractString(input, "url");
       return {
-        title: query ? `Web: ${truncateCommand(query)}` : "Web search",
-        description: query,
+        title: name === "web_search" ? "Web search" : "Fetch",
+        description: query ? truncateCommand(query) : void 0,
         displayVariant: "web-search"
       };
     }
@@ -155,8 +151,8 @@ function getToolDisplayMetadata(part) {
     case "spawn": {
       const desc = extractString(input, "description") ?? extractString(input, "prompt");
       return {
-        title: desc ? `Task: ${truncateCommand(desc)}` : "Agent task",
-        description: desc
+        title: "Task",
+        description: desc ? truncateCommand(desc) : void 0
       };
     }
     default:
@@ -175,52 +171,9 @@ function getToolErrorText(part, fallback) {
   return part.state.error || fallback;
 }
 
-// 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 {
   TOOL_CATEGORY_ICONS,
   getToolCategory,
   getToolDisplayMetadata,
-  getToolErrorText,
-  formatDuration,
-  truncateText,
-  formatUptime,
-  formatBytes
+  getToolErrorText
 };

package/dist/{chunk-AAUNOHVL.js → chunk-NWECTSOH.js}

@@ -1,6 +1,6 @@
 import {
   getSyntaxLanguage
-} from "./chunk-ZRVH3WCA.js";
+} from "./chunk-XU3HB5QL.js";
 import {
   CodeBlock,
   CopyButton

package/dist/{chunk-R5GVQDL3.js → chunk-OXZRCXJK.js}

@@ -2,14 +2,17 @@ import {
   ExpandableContent,
   InlineToolItem,
   RunRowShell
-} from "./chunk-J2G7KCYH.js";
+} from "./chunk-KNYSKNZX.js";
 import {
-  formatDuration,
-  truncateText
-} from "./chunk-ULDNFLIM.js";
+  TextShimmer
+} from "./chunk-L57WRIND.js";
 import {
   OpenUIArtifactRenderer
 } from "./chunk-3M7BPSSW.js";
+import {
+  formatDuration,
+  truncateText
+} from "./chunk-4CLN43XT.js";
 import {
   Markdown
 } from "./chunk-P5F43A65.js";
@@ -54,10 +57,9 @@ var InlineThinkingItem = memo(
       RunRowShell,
       {
         icon: /* @__PURE__ */ jsx(Brain, { className: "h-3.5 w-3.5" }),
-        title: isActive ? "Thinking\u2026" : "Reasoning",
+        title: isActive ? /* @__PURE__ */ jsx(TextShimmer, { children: "Thinking\u2026" }) : "Reasoning",
         description: preview,
         status: isActive ? "running" : "idle",
-        startTime,
         durationMs,
         open,
         onOpenChange: setOpen,
@@ -107,7 +109,7 @@ function SpineRow({
         "span",
         {
           className: cn(
-            "relative mt-1.5 h-[var(--timeline-dot-size,0.5rem)] w-[var(--timeline-dot-size,0.5rem)] rounded-full ring-4 ring-[var(--bg-root)]",
+            "relative mt-2.5 h-[var(--timeline-dot-size,0.5rem)] w-[var(--timeline-dot-size,0.5rem)] rounded-full ring-4 ring-[var(--bg-root)]",
             accentClassName
           )
         }

package/dist/{chunk-XPYPZMYT.js → chunk-Q7ZR6LSD.js}

@@ -1,7 +1,7 @@
 import {
   ToolCallGroup,
   ToolCallStep
-} from "./chunk-J2G7KCYH.js";
+} from "./chunk-KNYSKNZX.js";
 import {
   Markdown
 } from "./chunk-P5F43A65.js";

package/dist/{chunk-RKC3GXHE.js → chunk-X53RZSX6.js}

@@ -2,18 +2,18 @@ import {
   useAutoScroll,
   useRunCollapseState,
   useRunGroups
-} from "./chunk-AZWDI2JG.js";
+} from "./chunk-565EATZZ.js";
 import {
   InlineThinkingItem,
   RunGroup
-} from "./chunk-R5GVQDL3.js";
+} from "./chunk-OXZRCXJK.js";
 import {
   ToolCallGroup,
   ToolCallStep
-} from "./chunk-J2G7KCYH.js";
+} from "./chunk-KNYSKNZX.js";
 import {
   getToolDisplayMetadata
-} from "./chunk-ULDNFLIM.js";
+} from "./chunk-ND3ZFXQK.js";
 import {
   OpenUIArtifactRenderer
 } from "./chunk-3M7BPSSW.js";
@@ -45,10 +45,17 @@ var UserMessage = memo(
   ({ message: _message, parts, content, timestamp, actions }) => {
     const text = content ?? (parts ?? []).filter((p) => p.type === "text").map((p) => p.text).join("\n");
     if (!text.trim()) return null;
-    return /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxs("div", { className: "flex max-w-[78%] flex-col items-end gap-2", children: [
-      /* @__PURE__ */ jsxs("div", { className: "w-full rounded-2xl border border-border bg-muted/50 px-4 py-3", children: [
-        timestamp ? /* @__PURE__ */ jsx("div", { className: "mb-1.5 text-right text-[var(--font-size-xs)] text-muted-foreground", children: formatTime(timestamp) }) : null,
-        /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap text-[var(--font-size-base)] leading-[var(--line-height-base)] text-foreground", children: text })
+    return /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxs("div", { className: "group flex max-w-[78%] flex-col items-end gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative w-full rounded-2xl bg-muted/50 px-4 py-3", children: [
+        timestamp ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-user-message-time": "",
+            className: "pointer-events-none absolute right-full top-1/2 mr-3 -translate-y-1/2 whitespace-nowrap text-[var(--font-size-xs)] text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100",
+            children: formatTime(timestamp)
+          }
+        ) : null,
+        /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap text-[var(--font-size-base)] leading-[1.5] text-foreground", children: text })
       ] }),
       actions ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center justify-end gap-1.5 text-xs text-muted-foreground", children: actions }) : null
     ] }) });
@@ -146,55 +153,56 @@ function ThinkingIndicator({ className }) {
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var TONE_STYLES = {
   default: {
-    dot: "bg-[var(--border-hover)]",
     card: "border-border bg-card",
     text: "text-foreground",
     icon: CircleDot
   },
   info: {
-    dot: "bg-[var(--surface-info-text)]",
     card: "border-[var(--surface-info-border)] bg-[var(--surface-info-bg)]",
     text: "text-[var(--surface-info-text)]",
     icon: Info
   },
   success: {
-    dot: "bg-[var(--surface-success-text)]",
     card: "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)]",
     text: "text-[var(--surface-success-text)]",
     icon: CheckCircle2
   },
   warning: {
-    dot: "bg-[var(--surface-warning-text)]",
     card: "border-[var(--surface-warning-border)] bg-[var(--surface-warning-bg)]",
     text: "text-[var(--surface-warning-text)]",
     icon: AlertTriangle
   },
   error: {
-    dot: "bg-[var(--surface-danger-text)]",
     card: "border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)]",
     text: "text-[var(--surface-danger-text)]",
     icon: AlertTriangle
   }
 };
-function formatTime2(date) {
-  return date.toLocaleTimeString(void 0, { hour: "numeric", minute: "2-digit" });
+function stepKind(item) {
+  if (item.kind === "message") return item.role === "user" ? "user" : "prose";
+  if (item.kind === "status" || item.kind === "artifact") return "card";
+  return "tool";
 }
-var CARD_ROW_DOT = "mt-[calc((2.5rem-var(--timeline-dot-size))/2)]";
-function AgentTimelineRow({ isLast, accentClassName, dotClassName = "mt-2", children }) {
-  return /* @__PURE__ */ jsxs3("div", { className: "grid grid-cols-[1.25rem_minmax(0,1fr)] gap-x-4", children: [
-    /* @__PURE__ */ jsxs3("div", { className: "relative flex justify-center", children: [
-      !isLast && /* @__PURE__ */ jsx4("span", { className: "absolute top-4 bottom-[-0.75rem] left-1/2 w-px -translate-x-1/2 bg-border" }),
-      /* @__PURE__ */ jsx4("span", { className: cn("relative h-[var(--timeline-dot-size)] w-[var(--timeline-dot-size)] rounded-full ring-4 ring-[var(--bg-root)]", dotClassName, accentClassName) })
-    ] }),
-    /* @__PURE__ */ jsx4("div", { className: "min-w-0 pb-3", children })
-  ] });
+function spacingBefore(prev, next) {
+  if (prev === void 0) return "";
+  if (prev === "user" || next === "user") return "mt-4";
+  if (prev === "card" || next === "card") return "mt-2";
+  if (prev === "tool" || next === "tool") return "mt-1";
+  return "mt-3";
 }
+var ROW_BLEED = "-mx-3";
 function AssistantMessage({ item }) {
-  return /* @__PURE__ */ jsxs3("div", { className: "-mt-0.5", children: [
-    item.timestamp && /* @__PURE__ */ jsx4("div", { className: "mb-2 text-[var(--font-size-xs)] text-muted-foreground", children: formatTime2(item.timestamp) }),
-    item.content && /* @__PURE__ */ jsx4(Markdown, { className: "tangle-prose text-[var(--font-size-base)] leading-[var(--line-height-base)]", children: item.content }),
-    item.isStreaming && /* @__PURE__ */ jsx4("span", { className: "ml-0.5 inline-block h-4 w-2 animate-pulse rounded-sm bg-primary align-text-bottom" }),
-    item.toolCalls && /* @__PURE__ */ jsx4("div", { className: "mt-3", children: item.toolCalls }),
+  return /* @__PURE__ */ jsxs3("div", { children: [
+    item.content && /* @__PURE__ */ jsx4(Markdown, { className: "tangle-prose text-[var(--font-size-base)] leading-[1.5]", children: item.content }),
+    item.isStreaming && /* @__PURE__ */ jsx4(
+      "span",
+      {
+        "aria-hidden": true,
+        "data-streaming-caret": "",
+        className: "ml-0.5 inline-block h-[1em] w-0.5 animate-pulse rounded-full bg-muted-foreground align-text-bottom"
+      }
+    ),
+    item.toolCalls && /* @__PURE__ */ jsx4("div", { className: "mt-1", children: item.toolCalls }),
     item.after && /* @__PURE__ */ jsx4("div", { className: "mt-3 border-t border-border pt-3", children: item.after })
   ] });
 }
@@ -252,101 +260,88 @@ function AgentTimeline({
   }
   const renderedItems = isThinking ? [...items, { id: "__thinking__", kind: "custom", content: /* @__PURE__ */ jsx4(ThinkingIndicator, {}) }] : items;
   const isUserMessage = (item) => item.kind === "message" && item.role === "user";
-  const timelineItems = renderedItems.filter((item) => !isUserMessage(item));
+  const stepItems = renderedItems.filter((item) => !isUserMessage(item));
   const limit = collapseAfter ?? Infinity;
-  const collapsible = timelineItems.length > limit;
+  const collapsible = stepItems.length > limit;
   const collapsed = collapsible && !expanded;
   let renderList = renderedItems;
   let hiddenCount = 0;
   if (collapsed) {
     const visible = [];
-    let spineCount = 0;
+    let stepCount = 0;
     for (const item of renderedItems) {
-      if (spineCount >= limit) break;
+      if (stepCount >= limit) break;
       visible.push(item);
-      if (!isUserMessage(item)) spineCount += 1;
+      if (!isUserMessage(item)) stepCount += 1;
     }
     renderList = visible;
-    hiddenCount = timelineItems.length - limit;
+    hiddenCount = stepItems.length - limit;
   }
-  const visibleSpine = renderList.filter((item) => !isUserMessage(item));
-  const lastSpineItem = collapsible ? void 0 : visibleSpine[visibleSpine.length - 1];
-  return /* @__PURE__ */ jsxs3("div", { className: cn("mx-auto w-full max-w-5xl px-4 py-4", className), children: [
-    renderList.map((item) => {
-      if (item.kind === "message" && item.role === "user") {
-        return /* @__PURE__ */ jsx4("div", { className: "mt-6 mb-4 first:mt-0", children: /* @__PURE__ */ jsx4(UserMessage, { content: item.content, timestamp: item.timestamp }) }, item.id);
-      }
-      const isLast = item === lastSpineItem;
-      if (item.kind === "message") {
-        return /* @__PURE__ */ jsx4(AgentTimelineRow, { isLast, accentClassName: "bg-[var(--brand-glow)]", children: /* @__PURE__ */ jsx4(AssistantMessage, { item }) }, item.id);
-      }
-      if (item.kind === "tool") {
-        return /* @__PURE__ */ jsx4(AgentTimelineRow, { isLast, accentClassName: "bg-[var(--border-hover)]", dotClassName: CARD_ROW_DOT, children: /* @__PURE__ */ jsx4(
-          ToolCallStep,
-          {
-            type: item.call.type,
-            label: item.call.label,
-            status: item.call.status,
-            detail: item.call.detail,
-            output: item.call.output,
-            duration: item.call.duration,
-            part: item.part,
-            actions: item.part ? renderToolActions?.(item.part) : void 0
-          }
-        ) }, item.id);
-      }
-      if (item.kind === "tool_group") {
-        return /* @__PURE__ */ jsx4(AgentTimelineRow, { isLast, accentClassName: "bg-[var(--border-hover)]", dotClassName: CARD_ROW_DOT, children: /* @__PURE__ */ jsx4(ToolCallGroup, { title: item.title, children: item.calls.map((call, callIndex) => {
-          const part = item.parts?.[callIndex];
-          return /* @__PURE__ */ jsx4(
-            ToolCallStep,
-            {
-              type: call.type,
-              label: call.label,
-              status: call.status,
-              detail: call.detail,
-              output: call.output,
-              duration: call.duration,
-              part,
-              actions: part ? renderToolActions?.(part) : void 0
-            },
-            call.id
-          );
-        }) }) }, item.id);
-      }
-      if (item.kind === "status") {
-        return /* @__PURE__ */ jsx4(
-          AgentTimelineRow,
-          {
-            isLast,
-            accentClassName: TONE_STYLES[item.tone ?? "default"].dot,
-            children: /* @__PURE__ */ jsx4(StatusCard, { item })
-          },
-          item.id
-        );
-      }
-      if (item.kind === "artifact") {
+  const renderItem = (item) => {
+    if (item.kind === "message") {
+      return item.role === "user" ? /* @__PURE__ */ jsx4(UserMessage, { content: item.content, timestamp: item.timestamp }) : /* @__PURE__ */ jsx4(AssistantMessage, { item });
+    }
+    if (item.kind === "tool") {
+      return /* @__PURE__ */ jsx4(
+        ToolCallStep,
+        {
+          type: item.call.type,
+          label: item.call.label,
+          status: item.call.status,
+          detail: item.call.detail,
+          output: item.call.output,
+          duration: item.call.duration,
+          part: item.part,
+          actions: item.part ? renderToolActions?.(item.part) : void 0
+        }
+      );
+    }
+    if (item.kind === "tool_group") {
+      return /* @__PURE__ */ jsx4(ToolCallGroup, { title: item.title, children: item.calls.map((call, callIndex) => {
+        const part = item.parts?.[callIndex];
         return /* @__PURE__ */ jsx4(
-          AgentTimelineRow,
+          ToolCallStep,
           {
-            isLast,
-            accentClassName: TONE_STYLES[item.tone ?? "default"].dot,
-            children: /* @__PURE__ */ jsx4(ArtifactCard, { item })
+            type: call.type,
+            label: call.label,
+            status: call.status,
+            detail: call.detail,
+            output: call.output,
+            duration: call.duration,
+            part,
+            actions: part ? renderToolActions?.(part) : void 0
           },
-          item.id
+          call.id
         );
-      }
-      return /* @__PURE__ */ jsx4(AgentTimelineRow, { isLast, accentClassName: "bg-[var(--border-hover)]", dotClassName: CARD_ROW_DOT, children: item.content }, item.id);
+      }) });
+    }
+    if (item.kind === "status") return /* @__PURE__ */ jsx4(StatusCard, { item });
+    if (item.kind === "artifact") return /* @__PURE__ */ jsx4(ArtifactCard, { item });
+    return item.content;
+  };
+  return /* @__PURE__ */ jsxs3("div", { className: cn("mx-auto flex w-full max-w-5xl flex-col px-4 py-4", className), children: [
+    renderList.map((item, index) => {
+      const kind = stepKind(item);
+      const prev = index > 0 ? stepKind(renderList[index - 1]) : void 0;
+      return /* @__PURE__ */ jsx4(
+        "div",
+        {
+          "data-timeline-step": kind,
+          className: cn(spacingBefore(prev, kind), kind === "tool" && ROW_BLEED),
+          children: renderItem(item)
+        },
+        item.id
+      );
     }),
-    collapsible ? /* @__PURE__ */ jsx4(AgentTimelineRow, { isLast: true, accentClassName: "bg-[var(--border-hover)]", children: /* @__PURE__ */ jsx4(
+    collapsible ? /* @__PURE__ */ jsx4(
       "button",
       {
         type: "button",
         onClick: () => setExpanded((value) => !value),
-        className: "text-xs font-medium text-muted-foreground transition-colors hover:text-foreground",
+        className: "mt-2 self-start text-xs font-medium text-muted-foreground transition-colors hover:text-foreground",
         children: collapsed ? `Show ${hiddenCount} more step${hiddenCount === 1 ? "" : "s"}` : "Show less"
       }
-    ) }) : null
+    ) : null
   ] });
 }
 
@@ -693,7 +688,7 @@ function ChatMessage({
       children: [
         !hideRoleLabel && /* @__PURE__ */ jsxs5("div", { className: cn("flex items-center gap-2 px-1", isUser && "flex-row-reverse"), children: [
           /* @__PURE__ */ jsx6("span", { className: "font-medium text-foreground text-xs", children: isUser ? userLabel : assistantLabel }),
-          timestamp && /* @__PURE__ */ jsx6("span", { className: "text-muted-foreground text-xs", children: formatTime3(timestamp) })
+          timestamp && /* @__PURE__ */ jsx6("span", { className: "text-muted-foreground text-xs", children: formatTime2(timestamp) })
         ] }),
         /* @__PURE__ */ jsxs5(
           "div",
@@ -716,7 +711,7 @@ function ChatMessage({
     }
   );
 }
-function formatTime3(date) {
+function formatTime2(date) {
   return date.toLocaleTimeString(void 0, {
     hour: "numeric",
     minute: "2-digit"