@tangle-network/ui 11.6.0 → 11.7.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @tangle-network/ui
 
+## 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,12 +5,13 @@ import {
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-RKC3GXHE.js";
-import "./chunk-AZWDI2JG.js";
-import "./chunk-R5GVQDL3.js";
-import "./chunk-J2G7KCYH.js";
-import "./chunk-ULDNFLIM.js";
+} from "./chunk-VDCZHOOO.js";
+import "./chunk-UYTRNR7Z.js";
+import "./chunk-CVX53NCC.js";
+import "./chunk-XT4JMYVB.js";
+import "./chunk-EIUE5GV2.js";
 import "./chunk-AAUNOHVL.js";
+import "./chunk-L57WRIND.js";
 import "./chunk-3M7BPSSW.js";
 import "./chunk-GYPQXTJU.js";
 import "./chunk-MKTSMWVD.js";

package/dist/{chunk-XROQW5J7.js → chunk-4ENFLPWQ.js}

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

package/dist/{chunk-XPYPZMYT.js → chunk-6RIX7M27.js}

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

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

@@ -2,11 +2,14 @@ import {
   ExpandableContent,
   InlineToolItem,
   RunRowShell
-} from "./chunk-J2G7KCYH.js";
+} from "./chunk-XT4JMYVB.js";
 import {
   formatDuration,
   truncateText
-} from "./chunk-ULDNFLIM.js";
+} from "./chunk-EIUE5GV2.js";
+import {
+  TextShimmer
+} from "./chunk-L57WRIND.js";
 import {
   OpenUIArtifactRenderer
 } from "./chunk-3M7BPSSW.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-ULDNFLIM.js → chunk-EIUE5GV2.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:

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
+};

package/dist/chunk-LFVF2HFB.js

@@ -0,0 +1,19 @@
+import {
+  formatDuration
+} from "./chunk-EIUE5GV2.js";
+
+// src/run/run-item-primitives.tsx
+import { useEffect, useState } from "react";
+import { jsx } 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__ */ jsx("span", { className: "text-xs font-mono text-neutral-400 dark:text-neutral-500 tabular-nums", children: formatDuration(elapsed) });
+}
+
+export {
+  LiveDuration
+};

package/dist/{chunk-AZWDI2JG.js → chunk-UYTRNR7Z.js}

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