@tangle-network/ui 11.6.0 → 11.8.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @tangle-network/ui
 
+## 11.8.0
+
+### Minor Changes
+
+- 3416c80: `FileArtifactPane` (and `FilePreview`, its body) now previews every file kind a sandbox produces, so a product no longer builds its own image, PDF, CSV, video, audio, or spreadsheet viewers. Pass `blobUrl` (an object URL or remote URL) for binary content and the pane renders an image fit to the pane on a checker ground (click for natural size), a PDF at full pane height, or a video/audio player; pass `content` for CSV and the pane parses quoted commas and line breaks (RFC 4180) into a sticky-header table capped at `CSV_PREVIEW_ROW_LIMIT` (500) rows with a "Showing N of M rows" line; an `.xlsx`/`.xls` file renders a download card with the filename, its size when the new optional `size` prop (bytes) is set, and a Download button wired to `onDownload`. A file with no `blobUrl` and no text content renders one sentence, "This file needs a download link to preview.", with the same Download button. Text, code, JSON, YAML, and markdown render as before. `@tangle-network/ui/files` also exports the pure `resolveFilePreviewKind(filename, mimeType)` helper (`FilePreviewKind`: MIME type wins over extension; anything unmatched is `binary`), `parseCsv`, and `CSV_PREVIEW_ROW_LIMIT`; `detectFileFormat` gains the `video` and `audio` formats and the `avif` image extension.
+
+## 11.7.0
+
+### Minor Changes
+
+- 0982a63: Quiet transcript rows: the agent transcript (`AgentTimeline`, `ChatContainer`'s `timeline` presentation) now reads as one column of prose with tool calls as quiet one-liners between the paragraphs. `RunRowShell` (and so `InlineToolItem` / `InlineThinkingItem`) rests with no card chrome — transparent border and fill, a bare 14px glyph, title and description at `text-sm` in `text-muted-foreground` that brighten on hover — and takes the bordered `--md3-surface-container` card only while open; the expand chevron replaces the glyph on hover and open, the success dot is gone (success is silence), the running spinner and live-ticking duration are gone (a running row shimmers its title through the new `TextShimmer` primitive, exported from `/primitives`), and the completed duration shows on hover only. `RunRowStatusDot` still exists and now draws only the error dot; `RunRowShellProps.startTime` is accepted and ignored (deprecated). `getToolDisplayMetadata` titles are the bare verb (`Read`, `Edit`, `Write`, `Shell`, `Search`, `Find`, `Web search`, `Fetch`, `Task`) and the path, command, pattern or query lives in `description` only, so a row no longer prints its subject twice; `targetPath` / `commandSnippet` are unchanged. `AgentTimeline` drops the connector spine, the uppercase "Tool activity" header above grouped calls (the group keeps that name as its `aria-label`), and the per-block timestamp on assistant prose; prose renders at 15px/1.5 with a muted streaming caret, and vertical rhythm now follows the pair of neighbours (`mt-4` at a user turn, `mt-1` inside tool sequences and between prose and tools). `UserMessage` loses its border and shows its timestamp beside the bubble on hover. Consumers that composed `RunRowShell` with a shimmer title of their own get the intended result now that the shell draws no spinner beside it.
+
 ## 11.6.0
 
 ### Minor Changes

package/README.md

@@ -26,6 +26,49 @@ export function App() {
 }
 ```
 
+## Styling
+
+This package ships no CSS. Its components are Tailwind v4 class names in source, and the build emits JavaScript only, so two pieces of consumer setup carry real weight.
+
+### Scan this package
+
+Your Tailwind or UnoCSS build has to read this package's files. Neither scans `node_modules` on its own, so a class that only this package names is never generated. Nothing fails loudly when one is missing: the element still renders, still occupies space and still takes clicks, it just looks inert. A `Switch` with no track colour in either state, a `Tabs` where the selected tab is indistinguishable from the rest, and a `Textarea` collapsed to one row all come out of this.
+
+Tailwind v4, in the stylesheet that imports `tailwindcss`. `@source` paths resolve relative to that stylesheet, so adjust the prefix to wherever yours lives:
+
+```css
+/* from src/styles/app.css, with node_modules two levels up */
+@source "../../node_modules/@tangle-network/ui/src/**/*.tsx";
+@source "../../node_modules/@tangle-network/ui/src/**/*.ts";
+```
+
+`sandbox-ui` runs exactly these two globs in `src/styles/globals.css`, alongside `@import "tailwindcss" source(none)` so the scan is the whole of what the bundle compiles from.
+
+UnoCSS, in `uno.config.ts`:
+
+```ts
+content: {
+  filesystem: ["node_modules/@tangle-network/ui/dist/**/*.js"],
+}
+```
+
+Under pnpm that plain glob can match zero files. `node_modules/@tangle-network/ui` is a symlink into `node_modules/.pnpm`, and UnoCSS's globber does not follow it, which leaves you exactly where you started with no error. Pre-expand the glob with something that does follow symlinks, resolve each hit through `realpath`, and hand UnoCSS concrete paths. `tangle-network/blueprint-agent`'s `apps/web/uno.config.ts` carries a worked version that walks the import graph of the two entries it uses rather than the whole `dist`.
+
+Two things to check after wiring this up, because the failure is silent either way. Read the generated CSS for a class this package alone names, rather than eyeballing the app. And assert the scan resolved a non-zero number of files: a scan that silently matches nothing looks identical to no scan at all.
+
+One consequence worth knowing. This is a scan, not a manifest, so a consumer emits only the classes the version it installed actually names. Upgrading this package can introduce a class your build has never generated, and it will go missing the same silent way.
+
+### Import the brand stylesheet
+
+`@tangle-network/brand` is a peer dependency. It holds the tokens every colour here resolves through, and a few real classes that some components reference by name instead of composing out of utilities. `Badge` with `dot` is the one to know about: it emits `status-dot status-dot-running` and its siblings, which are defined in `@tangle-network/brand/styles/globals.css` and nowhere else. Without that import the dots have no size and no colour.
+
+```css
+@import "@tangle-network/brand/styles";
+@import "tailwindcss";
+```
+
+See [`@tangle-network/brand`'s README](../brand/README.md) for the token-level breakdown, the finer-grained imports, and the fonts, which brand deliberately does not bundle.
+
 ## Subpaths
 
 Sixteen named exports: `primitives`, `chat`, `run`, `openui`, `files`, `editor`, `markdown`, `auth`, `hooks`, `sdk-hooks`, `stores`, `types`, `utils`, `tool-previews`, `nav`, `redaction`.

package/dist/chat.d.ts

@@ -87,9 +87,11 @@ interface UserMessageProps {
     actions?: ReactNode;
 }
 /**
- * The single user message bubble — a quiet, right-aligned bordered bubble on the
- * muted surface (no loud fill, no uppercase label). Used by both the run/message
- * list (session-model `parts`) and AgentTimeline (direct `content`/`timestamp`).
+ * The single user message bubble — a quiet, right-aligned fill on the muted
+ * surface (no border, no loud fill, no uppercase label). The timestamp sits
+ * beside the bubble and appears on hover, so it costs no height. Used by both
+ * the run/message list (session-model `parts`) and AgentTimeline (direct
+ * `content`/`timestamp`).
  */
 declare const UserMessage: React.MemoExoticComponent<({ message: _message, parts, content, timestamp, actions }: UserMessageProps) => react_jsx_runtime.JSX.Element | null>;
 
@@ -126,6 +128,8 @@ interface AgentTimelineMessageItem {
     content: string;
     toolCalls?: ReactNode;
     isStreaming?: boolean;
+    /** Shown beside a user bubble on hover. Assistant prose carries no
+     *  timestamp of its own — the turn's user message dates the exchange. */
     timestamp?: Date;
     after?: ReactNode;
 }
@@ -140,6 +144,7 @@ interface AgentTimelineToolItem {
 interface AgentTimelineToolGroupItem {
     id: string;
     kind: "tool_group";
+    /** Accessible name of the group. Not drawn — the rows are the label. */
     title?: string;
     calls: ToolCallData[];
     /** Source tool parts, parallel to `calls`. */
@@ -166,6 +171,9 @@ interface AgentTimelineArtifactItem {
 interface AgentTimelineCustomItem {
     id: string;
     kind: "custom";
+    /** Laid out as a run row: it takes the same horizontal bleed as tool rows,
+     *  so a `RunRowShell`-based row (reasoning) aligns its glyph with the prose
+     *  edge. */
     content: ReactNode;
 }
 type AgentTimelineItem = AgentTimelineMessageItem | AgentTimelineToolItem | AgentTimelineToolGroupItem | AgentTimelineStatusItem | AgentTimelineArtifactItem | AgentTimelineCustomItem;
@@ -177,14 +185,16 @@ 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. */
+    /** When set, collapse the timeline to the first N step rows (every item
+     *  except user messages) 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.
+ * AgentTimeline — unified mixed-content transcript for agent-backed sandbox
+ * sessions. Renders messages, tool rows, status cards, and artifact handoffs
+ * as one plain column: prose at the reading size, tool calls as quiet
+ * one-liners between the paragraphs, no connector chrome.
  */
 declare function AgentTimeline({ items, isThinking, emptyState, className, renderToolActions, collapseAfter, }: AgentTimelineProps): react_jsx_runtime.JSX.Element | null;
 

package/dist/chat.js

@@ -5,16 +5,18 @@ import {
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-RKC3GXHE.js";
-import "./chunk-AZWDI2JG.js";
-import "./chunk-R5GVQDL3.js";
-import "./chunk-J2G7KCYH.js";
-import "./chunk-ULDNFLIM.js";
-import "./chunk-AAUNOHVL.js";
+} from "./chunk-X53RZSX6.js";
+import "./chunk-565EATZZ.js";
+import "./chunk-OXZRCXJK.js";
+import "./chunk-KNYSKNZX.js";
+import "./chunk-ND3ZFXQK.js";
+import "./chunk-NWECTSOH.js";
+import "./chunk-L57WRIND.js";
 import "./chunk-3M7BPSSW.js";
 import "./chunk-GYPQXTJU.js";
+import "./chunk-4CLN43XT.js";
+import "./chunk-XU3HB5QL.js";
 import "./chunk-MKTSMWVD.js";
-import "./chunk-ZRVH3WCA.js";
 import "./chunk-P5F43A65.js";
 import "./chunk-WUQDUBJG.js";
 import "./chunk-RQHJBTEU.js";

package/dist/chunk-4CLN43XT.js

@@ -0,0 +1,45 @@
+// 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
+};

package/dist/{chunk-AZWDI2JG.js → chunk-565EATZZ.js}

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

package/dist/{chunk-XROQW5J7.js → chunk-BWOUSEHM.js}

@@ -11,7 +11,7 @@ import {
 } from "./chunk-OEX7NZE3.js";
 import {
   parseToolEvent
-} from "./chunk-XPYPZMYT.js";
+} from "./chunk-Q7ZR6LSD.js";
 
 // src/hooks/use-dropdown-menu.ts
 import { useEffect, useRef, useState } from "react";

package/dist/{chunk-J2G7KCYH.js → chunk-KNYSKNZX.js}

@@ -1,9 +1,8 @@
 import {
-  formatDuration,
   getToolCategory,
   getToolDisplayMetadata,
   getToolErrorText
-} from "./chunk-ULDNFLIM.js";
+} from "./chunk-ND3ZFXQK.js";
 import {
   CommandPreview,
   DiffPreview,
@@ -12,7 +11,13 @@ import {
   QuestionPreview,
   WebSearchPreview,
   WriteFilePreview
-} from "./chunk-AAUNOHVL.js";
+} from "./chunk-NWECTSOH.js";
+import {
+  TextShimmer
+} from "./chunk-L57WRIND.js";
+import {
+  formatDuration
+} from "./chunk-4CLN43XT.js";
 import {
   CodeBlock
 } from "./chunk-WUQDUBJG.js";
@@ -204,34 +209,20 @@ var ExpandedToolDetail = memo(({ part }) => {
 });
 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/run-row-shell.tsx
-import { useState as useState3 } from "react";
+import { useState as useState2 } 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";
+import { ChevronRight } from "lucide-react";
+import { jsx as jsx3, 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;
+  if (status !== "error") return null;
+  return /* @__PURE__ */ jsx3(
+    "span",
+    {
+      "data-run-row-status": "error",
+      className: "h-1.5 w-1.5 shrink-0 rounded-full bg-[var(--surface-danger-text)]"
+    }
+  );
 }
 var SHAPE_CLASS = {
   single: "rounded-[var(--radius-lg)]",
@@ -239,13 +230,14 @@ var SHAPE_CLASS = {
   middle: "rounded-[var(--radius-sm)]",
   last: "rounded-t-[var(--radius-sm)] rounded-b-[var(--radius-lg)]"
 };
+var HEADER_INSET = "px-2 py-1";
+var ERROR_INDENT = "pl-[2.375rem]";
 function RunRowShell({
   icon,
   title,
   description,
   descriptionMono = false,
   status = "idle",
-  startTime,
   durationMs,
   groupPosition = "single",
   collapsedError,
@@ -257,7 +249,7 @@ function RunRowShell({
   contentClassName,
   children
 }) {
-  const [openState, setOpenState] = useState3(defaultOpen);
+  const [openState, setOpenState] = useState2(defaultOpen);
   const isControlled = openProp !== void 0;
   const open = isControlled ? openProp : openState;
   const setOpen = (next) => {
@@ -266,62 +258,110 @@ function RunRowShell({
   };
   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: [
+  return /* @__PURE__ */ jsx3(Collapsible.Root, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs3("div", { className: "flex items-start gap-2", children: [
     /* @__PURE__ */ jsxs3(
       "div",
       {
+        "data-run-row": "",
+        "data-state": open ? "open" : "closed",
         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",
+          "group min-w-0 flex-1 overflow-hidden border transition-colors",
+          open ? "border-border bg-[var(--md3-surface-container)]" : "border-transparent bg-transparent",
+          expandable && !open && "hover:bg-[var(--md3-surface-container)]",
           SHAPE_CLASS[groupPosition],
           className
         ),
         children: [
-          /* @__PURE__ */ jsx4(Collapsible.Trigger, { asChild: true, disabled: !expandable, children: /* @__PURE__ */ jsxs3(
+          /* @__PURE__ */ jsx3(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",
+                "flex w-full items-center gap-2 text-left",
+                HEADER_INSET,
                 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(
+                /* @__PURE__ */ jsxs3(
+                  "span",
+                  {
+                    "aria-hidden": true,
+                    className: "flex h-[1.375rem] w-[1.375rem] shrink-0 items-center justify-center text-muted-foreground",
+                    children: [
+                      /* @__PURE__ */ jsx3(
+                        "span",
+                        {
+                          "data-run-row-glyph": "",
+                          className: cn(
+                            "flex items-center justify-center",
+                            expandable && "group-hover:hidden",
+                            open && "hidden"
+                          ),
+                          children: icon
+                        }
+                      ),
+                      expandable ? /* @__PURE__ */ jsx3(
+                        ChevronRight,
+                        {
+                          "data-run-row-chevron": "",
+                          className: cn(
+                            "hidden h-3.5 w-3.5 transition-transform group-hover:block",
+                            open && "block rotate-90"
+                          )
+                        }
+                      ) : null
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx3(
                   "span",
                   {
                     className: cn(
-                      "hidden min-w-0 flex-1 truncate text-xs text-muted-foreground sm:inline",
+                      "shrink-0 whitespace-nowrap text-sm font-normal text-muted-foreground transition-colors group-hover:text-foreground",
+                      open && "text-foreground"
+                    ),
+                    children: title
+                  }
+                ),
+                description ? /* @__PURE__ */ jsx3(
+                  "span",
+                  {
+                    className: cn(
+                      "hidden min-w-0 flex-1 truncate text-sm text-muted-foreground transition-colors group-hover:text-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,
+                /* @__PURE__ */ jsxs3("span", { className: "ml-auto flex shrink-0 items-center gap-1.5", children: [
+                  !isRunning && durationMs != null ? /* @__PURE__ */ jsx3(
+                    "span",
                     {
-                      className: cn(
-                        "h-3 w-3 shrink-0 text-muted-foreground transition-transform",
-                        open && "rotate-90"
-                      )
+                      "data-run-row-duration": "",
+                      className: "font-mono text-[10px] tabular-nums text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100",
+                      children: formatDuration(durationMs)
                     }
-                  ) : null
+                  ) : null,
+                  /* @__PURE__ */ jsx3(RunRowStatusDot, { status })
                 ] })
               ]
             }
           ) }),
-          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
+          collapsedError && !open ? /* @__PURE__ */ jsx3(
+            "div",
+            {
+              className: cn(
+                "pb-1.5 pr-2 text-xs leading-snug text-[var(--surface-danger-text)]",
+                ERROR_INDENT
+              ),
+              children: collapsedError
+            }
+          ) : null,
+          expandable ? /* @__PURE__ */ jsx3(Collapsible.Content, { className: "overflow-hidden data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp", children: /* @__PURE__ */ jsx3("div", { className: cn("border-t border-border", contentClassName), children }) }) : null
         ]
       }
     ),
-    actions ? /* @__PURE__ */ jsx4(
+    actions ? /* @__PURE__ */ jsx3(
       "div",
       {
         className: "flex shrink-0 flex-wrap items-center justify-end gap-1.5 pt-1",
@@ -345,7 +385,7 @@ import {
   ClipboardList,
   Settings
 } from "lucide-react";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var TOOL_CATEGORY_ICON_MAP = {
   command: Terminal,
   write: FileEdit,
@@ -382,22 +422,22 @@ var InlineToolItem = memo2(
     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(
+    const status = toRowStatus(part.state.status);
+    return /* @__PURE__ */ jsx4(
       RunRowShell,
       {
-        icon: /* @__PURE__ */ jsx5(DefaultIcon, { className: "h-3.5 w-3.5" }),
-        title,
+        icon: /* @__PURE__ */ jsx4(DefaultIcon, { className: "h-3.5 w-3.5" }),
+        title: status === "running" ? /* @__PURE__ */ jsx4(TextShimmer, { children: title }) : title,
         description,
         descriptionMono: true,
-        status: toRowStatus(part.state.status),
-        startTime,
+        status,
         durationMs,
         groupPosition,
         collapsedError: errorText ?? void 0,
         actions,
         className,
         contentClassName: cn("p-2", contentClassName),
-        children: renderToolDetail?.(part) ?? /* @__PURE__ */ jsx5(ExpandedToolDetail, { part })
+        children: renderToolDetail?.(part) ?? /* @__PURE__ */ jsx4(ExpandedToolDetail, { part })
       }
     );
   }
@@ -405,7 +445,7 @@ var InlineToolItem = memo2(
 InlineToolItem.displayName = "InlineToolItem";
 
 // src/run/tool-call-step.tsx
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var EXT_LANGUAGE = {
   ts: "typescript",
   tsx: "typescript",
@@ -468,7 +508,7 @@ function ToolCallStep({
     }
   };
   const lang = inferLanguage(detail, language);
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx5(
     InlineToolItem,
     {
       part: resolvedPart,
@@ -476,7 +516,7 @@ function ToolCallStep({
       description: detail,
       className,
       actions,
-      renderToolDetail: part ? void 0 : output ? () => /* @__PURE__ */ jsx6(
+      renderToolDetail: part ? void 0 : output ? () => /* @__PURE__ */ jsx5(
         CodeBlock,
         {
           code: output,
@@ -488,16 +528,20 @@ function ToolCallStep({
   );
 }
 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
-  ] });
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      role: "group",
+      "aria-label": title,
+      className: cn("flex flex-col gap-1", className),
+      children
+    }
+  );
 }
 
 export {
   ExpandableContent,
   ExpandedToolDetail,
-  LiveDuration,
   RunRowStatusDot,
   RunRowShell,
   InlineToolItem,

package/dist/chunk-L57WRIND.js

@@ -0,0 +1,59 @@
+import {
+  cn
+} from "./chunk-RQHJBTEU.js";
+
+// src/primitives/text-shimmer.tsx
+import { useEffect, useLayoutEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+var CLASS_NAME = "tangle-text-shimmer";
+var STYLE_ID = "tangle-text-shimmer-styles";
+var SHIMMER_CSS = `
+@keyframes ${CLASS_NAME} {
+  from { -webkit-mask-position: 150% center; mask-position: 150% center; }
+  to { -webkit-mask-position: -50% center; mask-position: -50% center; }
+}
+.${CLASS_NAME} {
+  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.72) 0%, #000 45%, rgba(0,0,0,0.72) 60%);
+  mask-image: linear-gradient(90deg, rgba(0,0,0,0.72) 0%, #000 45%, rgba(0,0,0,0.72) 60%);
+  -webkit-mask-size: 250% 100%;
+  mask-size: 250% 100%;
+  animation: ${CLASS_NAME} 1.4s linear infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  .${CLASS_NAME} {
+    animation: none;
+    -webkit-mask-image: none;
+    mask-image: none;
+    text-decoration: underline dotted currentColor;
+    text-underline-offset: 3px;
+  }
+}
+`;
+function ensureShimmerStyles() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = SHIMMER_CSS;
+  document.head.appendChild(style);
+}
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+function TextShimmer({
+  children,
+  className,
+  durationMs = 1400
+}) {
+  useIsomorphicLayoutEffect(ensureShimmerStyles, []);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(CLASS_NAME, "text-foreground", className),
+      style: { animationDuration: `${durationMs}ms` },
+      children
+    }
+  );
+}
+
+export {
+  TextShimmer
+};