@tangle-network/ui 11.6.0 → 11.8.0

package/src/primitives/text-shimmer.tsx

@@ -0,0 +1,82 @@
+import { useEffect, useLayoutEffect, type ReactNode } from "react";
+import { cn } from "../lib/utils";
+
+const CLASS_NAME = "tangle-text-shimmer";
+const STYLE_ID = "tangle-text-shimmer-styles";
+
+/**
+ * The sweep is a MASK over the text's own colour, not a gradient background
+ * clipped to the glyphs: if this stylesheet is missing the text still renders
+ * in its normal colour instead of disappearing (`color: transparent`).
+ *
+ * Mask geometry mirrors the background variant: a 250%-wide tile whose bright
+ * band sits at 45–60%, slid from 150% to -50% so one band crosses the text per
+ * cycle. The tile repeats, so the .72 floor covers every glyph at every frame —
+ * the label reads at ~72% foreground opacity with a brighter sweep through it.
+ */
+const 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;
+  }
+}
+`;
+
+/** Inject the shimmer stylesheet once per document. A no-op on the server. */
+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);
+}
+
+// Layout effect so the mask is in place before the first paint; effect on the
+// server, where there is no layout phase.
+const useIsomorphicLayoutEffect =
+  typeof window === "undefined" ? useEffect : useLayoutEffect;
+
+export interface TextShimmerProps {
+  children: ReactNode;
+  className?: string;
+  /** One sweep across the text, in milliseconds. */
+  durationMs?: number;
+}
+
+/**
+ * Inline text with a gradient-mask sweep — the in-flight signal for a run row
+ * label ("Thinking…", a tool verb while its call is running). Carries the
+ * styles it needs, so a consumer that only scans this package for Tailwind
+ * classes still gets the animation.
+ */
+export function TextShimmer({
+  children,
+  className,
+  durationMs = 1400,
+}: TextShimmerProps) {
+  useIsomorphicLayoutEffect(ensureShimmerStyles, []);
+  return (
+    <span
+      className={cn(CLASS_NAME, "text-foreground", className)}
+      style={{ animationDuration: `${durationMs}ms` }}
+    >
+      {children}
+    </span>
+  );
+}

package/src/run/inline-thinking-item.stories.tsx

@@ -135,8 +135,8 @@ const bashTool: ToolPart = {
   },
 }
 
-// Reasoning and tool rows adjacent — they must read as one family (shared
-// badge geometry, trailing status/duration, chevron), not two designs.
+// Reasoning and tool rows adjacent — they must read as one family (same glyph
+// slot, same type scale, same hover reveal), not two designs.
 export const UnifiedWithToolRow: Story = {
   name: 'Unified shell (reasoning + tool)',
   render: () => (

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

@@ -3,6 +3,7 @@ import { Brain } from "lucide-react";
 import { truncateText } from "../utils/format";
 import type { ReasoningPart } from "../types/parts";
 import { Markdown } from "../markdown/markdown";
+import { TextShimmer } from "../primitives/text-shimmer";
 import { RunRowShell } from "./run-row-shell";
 import { ExpandableContent } from "./expandable-content";
 
@@ -52,10 +53,9 @@ export const InlineThinkingItem = memo(
     return (
       <RunRowShell
         icon={<Brain className="h-3.5 w-3.5" />}
-        title={isActive ? "Thinking…" : "Reasoning"}
+        title={isActive ? <TextShimmer>Thinking…</TextShimmer> : "Reasoning"}
         description={preview}
         status={isActive ? "running" : "idle"}
-        startTime={startTime}
         durationMs={durationMs}
         open={open}
         onOpenChange={setOpen}

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

@@ -0,0 +1,76 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import type { ToolPart } from "../types/parts";
+import { formatDuration } from "../utils/format";
+import { InlineToolItem } from "./inline-tool-item";
+
+const NOW = 1_700_000_000_000;
+
+function part(overrides: Partial<ToolPart["state"]>, tool = "read"): ToolPart {
+  return {
+    type: "tool",
+    id: `tool-${tool}`,
+    tool,
+    state: {
+      status: "completed",
+      input: { file_path: "src/lib/jitter.ts" },
+      output: "export function jitter() {}",
+      time: { start: NOW - 1200, end: NOW - 1140 },
+      ...overrides,
+    },
+  };
+}
+
+describe("InlineToolItem", () => {
+  it("titles the row with the bare verb and prints the path once", () => {
+    const { container } = render(<InlineToolItem part={part({})} />);
+    expect(screen.getByText("Read")).toBeInTheDocument();
+    expect(screen.getAllByText("src/lib/jitter.ts")).toHaveLength(1);
+    // The path never repeats inside the title.
+    expect(container.textContent).not.toContain("Read src/lib/jitter.ts");
+  });
+
+  it("renders no status dot and no spinner once the call completes", () => {
+    const { container } = render(<InlineToolItem part={part({})} />);
+    expect(container.querySelector("[data-run-row-status]")).toBeNull();
+    expect(container.querySelector(".animate-spin")).toBeNull();
+    expect(container.querySelector(".tangle-text-shimmer")).toBeNull();
+  });
+
+  it("shimmers the verb while running instead of spinning", () => {
+    const { container } = render(
+      <InlineToolItem
+        part={part({ status: "running", output: undefined, time: { start: NOW - 400 } }, "bash")}
+      />,
+    );
+    const shimmer = container.querySelector(".tangle-text-shimmer");
+    expect(shimmer).not.toBeNull();
+    expect(shimmer!.textContent).toBe("Shell");
+    expect(container.querySelector(".animate-spin")).toBeNull();
+    expect(container.querySelector("[data-run-row-duration]")).toBeNull();
+  });
+
+  it("treats a pending call as running", () => {
+    const { container } = render(
+      <InlineToolItem part={part({ status: "pending", input: undefined, output: undefined })} />,
+    );
+    expect(container.querySelector(".tangle-text-shimmer")).not.toBeNull();
+  });
+
+  it("keeps the red dot and the collapsed error on failure", () => {
+    const { container } = render(
+      <InlineToolItem
+        part={part({ status: "error", error: "ENOENT: no such file", output: undefined })}
+      />,
+    );
+    expect(container.querySelector('[data-run-row-status="error"]')).not.toBeNull();
+    expect(screen.getByText("ENOENT: no such file")).toBeInTheDocument();
+  });
+
+  it("carries the completed duration as a hover-only label", () => {
+    const { container } = render(<InlineToolItem part={part({})} />);
+    const duration = container.querySelector("[data-run-row-duration]");
+    expect(duration!.textContent).toBe(formatDuration(60));
+    expect(duration!.className).toContain("group-hover:opacity-100");
+  });
+});

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

@@ -20,6 +20,7 @@ import {
 import type { ToolPart } from "../types/parts";
 import type { ToolCategory } from "../types/run";
 import type { CustomToolRenderer } from "../types/tool-display";
+import { TextShimmer } from "../primitives/text-shimmer";
 import { ExpandedToolDetail } from "./expanded-tool-detail";
 import { RunRowShell, type RunRowStatus } from "./run-row-shell";
 
@@ -60,10 +61,11 @@ function toRowStatus(status: ToolPart["state"]["status"]): RunRowStatus {
 }
 
 /**
- * Compact single-line tool call display. Shows a category icon, title,
- * description, duration and status, and expands on click to show
- * ExpandedToolDetail. Rendered through the shared RunRowShell so it stays
- * consistent with the reasoning row.
+ * Compact single-line tool call display: a category glyph, the tool verb, and
+ * the path or command it acted on. While the call runs the verb shimmers;
+ * once it completes the row goes quiet (duration on hover, a red dot only on
+ * error). Expands on click to show ExpandedToolDetail. Rendered through the
+ * shared RunRowShell so it stays consistent with the reasoning row.
  */
 export const InlineToolItem = memo(
   ({
@@ -88,15 +90,15 @@ export const InlineToolItem = memo(
 
     const category = getToolCategory(part.tool);
     const DefaultIcon = TOOL_CATEGORY_ICON_MAP[category] ?? Settings;
+    const status = toRowStatus(part.state.status);
 
     return (
       <RunRowShell
         icon={<DefaultIcon className="h-3.5 w-3.5" />}
-        title={title}
+        title={status === "running" ? <TextShimmer>{title}</TextShimmer> : title}
         description={description}
         descriptionMono
-        status={toRowStatus(part.state.status)}
-        startTime={startTime}
+        status={status}
         durationMs={durationMs}
         groupPosition={groupPosition}
         collapsedError={errorText ?? undefined}

package/src/run/run-group.tsx

@@ -28,8 +28,9 @@ import { Markdown } from "../markdown/markdown";
 
 /**
  * One row on the run's timeline spine: a connector line + accent dot in a
- * narrow gutter, content to the right. Mirrors AgentTimeline's row so a run
- * reads as separated, distinct steps — not one filled box.
+ * narrow gutter, content to the right, so a run reads as separated, distinct
+ * steps — not one filled box. The dot's top offset centers it on a 30px run
+ * row header (RunRowShell: 22px glyph slot + 4px inset each side).
  */
 function SpineRow({
   accentClassName,
@@ -48,7 +49,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/src/run/run-row-shell.test.tsx

@@ -1,13 +1,18 @@
 import { render, screen } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
+import { formatDuration } from "../utils/format";
 import { RunRowShell } from "./run-row-shell";
 
-function renderShell(status: "running" | "success" | "error" | "idle") {
+function renderShell(
+  status: "running" | "success" | "error" | "idle",
+  extra: { durationMs?: number; collapsedError?: string } = {},
+) {
   return render(
     <RunRowShell
       icon={<span data-testid="lead-icon">icon</span>}
       title="Ran command"
       status={status}
+      {...extra}
     >
       <div>body</div>
     </RunRowShell>,
@@ -24,15 +29,80 @@ describe("RunRowShell", () => {
     }
   });
 
-  it("shows a spinner while running", () => {
+  it("draws no spinner while running — the running signal is the title", () => {
     const { container } = renderShell("running");
-    expect(container.querySelector(".animate-spin")).not.toBeNull();
+    expect(container.querySelector(".animate-spin")).toBeNull();
+    expect(container.querySelector("[data-run-row-status]")).toBeNull();
+  });
+
+  it("renders no status dot on success (success is silence)", () => {
+    const { container } = renderShell("success", { durationMs: 1200 });
+    expect(container.querySelector("[data-run-row-status]")).toBeNull();
+  });
+
+  it("renders the red dot and the collapsed error on error", () => {
+    const { container } = renderShell("error", {
+      collapsedError: "exit code 1",
+    });
+    expect(
+      container.querySelector('[data-run-row-status="error"]'),
+    ).not.toBeNull();
+    expect(screen.getByText("exit code 1")).toBeInTheDocument();
+  });
+
+  it("rests with no card chrome: transparent border and fill, bare glyph", () => {
+    const { container } = renderShell("success");
+    const row = container.querySelector("[data-run-row]");
+    expect(row).not.toBeNull();
+    expect(row!.className).toContain("border-transparent");
+    expect(row!.className).toContain("bg-transparent");
+    // The border stays reserved so hover/open never shift layout.
+    expect(row!.className).toMatch(/(^|\s)border(\s|$)/);
+    // No bordered badge box around the glyph.
+    const glyph = container.querySelector("[data-run-row-glyph]");
+    expect(glyph!.className).not.toContain("border");
+  });
+
+  it("takes the card fill only while open", () => {
+    const { container } = render(
+      <RunRowShell icon={<span>i</span>} title="Ran command" open>
+        <div>body</div>
+      </RunRowShell>,
+    );
+    const row = container.querySelector("[data-run-row]");
+    expect(row!.className).toContain("bg-[var(--md3-surface-container)]");
+    expect(row!.className).toContain("border-border");
+  });
+
+  it("reveals the completed duration on hover only", () => {
+    const { container } = renderShell("success", { durationMs: 1840 });
+    const duration = container.querySelector("[data-run-row-duration]");
+    expect(duration).not.toBeNull();
+    expect(duration!.textContent).toBe(formatDuration(1840));
+    expect(duration!.className).toContain("opacity-0");
+    expect(duration!.className).toContain("group-hover:opacity-100");
+  });
+
+  it("shows no duration while running", () => {
+    const { container } = renderShell("running", { durationMs: 1840 });
+    expect(container.querySelector("[data-run-row-duration]")).toBeNull();
+  });
+
+  it("puts the chevron in the glyph slot for expandable rows, hover/open only", () => {
+    const { container } = renderShell("success");
+    const chevron = container.querySelector("[data-run-row-chevron]");
+    expect(chevron).not.toBeNull();
+    expect(chevron!.getAttribute("class")).toContain("hidden");
+    expect(chevron!.getAttribute("class")).toContain("group-hover:block");
   });
 
   it("is not expandable and has no chevron when no children are provided", () => {
-    render(<RunRowShell icon={<span>i</span>} title="Reasoning" />);
+    const { container } = render(
+      <RunRowShell icon={<span>i</span>} title="Reasoning" />,
+    );
     // The trigger button is disabled when there is no expandable body.
     const button = screen.getByRole("button", { name: /reasoning/i });
     expect(button).toBeDisabled();
+    expect(container.querySelector("[data-run-row-chevron]")).toBeNull();
   });
 });

package/src/run/run-row-shell.tsx

@@ -1,49 +1,44 @@
 import { useState, type ReactNode } from "react";
 import * as Collapsible from "@radix-ui/react-collapsible";
-import { Loader2, ChevronRight } from "lucide-react";
+import { ChevronRight } from "lucide-react";
 import { cn } from "../lib/utils";
 import { formatDuration } from "../utils/format";
-import { LiveDuration } from "./run-item-primitives";
 
 export type RunRowStatus = "running" | "success" | "error" | "idle";
 
 /**
- * Trailing status indicator shared by every run row: a spinner while running,
- * a green/red dot on terminal states, nothing when idle. Status is shown here
- * — it never replaces the row's semantic lead icon.
+ * Trailing status indicator shared by every run row. Only `error` draws a
+ * mark (a red dot). Success is silence, and a running row carries its state in
+ * the title — a `TextShimmer` sweep — so neither renders anything here.
  */
 export function RunRowStatusDot({ status }: { status: RunRowStatus }) {
-  if (status === "running") {
-    return <Loader2 className="h-3 w-3 shrink-0 animate-spin text-[var(--accent-text)]" />;
-  }
-  if (status === "success") {
-    return (
-      <span className="h-1.5 w-1.5 shrink-0 rounded-full bg-[var(--surface-success-text)]" />
-    );
-  }
-  if (status === "error") {
-    return (
-      <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 (
+    <span
+      data-run-row-status="error"
+      className="h-1.5 w-1.5 shrink-0 rounded-full bg-[var(--surface-danger-text)]"
+    />
+  );
 }
 
 export interface RunRowShellProps {
-  /** Semantic lead glyph — always visible; never replaced by status. */
+  /** Semantic lead glyph (14px). At rest it is the row's only ornament; on
+   *  hover and while open the expand chevron takes its slot. */
   icon: ReactNode;
   /** Row title. A string in the common case; a node when the title carries its
-   *  own treatment (e.g. an active-state shimmer sweep) — it renders inline in
-   *  the shell's title slot either way. */
+   *  own treatment — a running row passes `<TextShimmer>` here, which is the
+   *  whole in-flight signal (the shell draws no spinner). */
   title: ReactNode;
   /** Secondary inline text (tool path/command, or a reasoning preview). */
   description?: string;
   /** Render the description in mono (tools) vs prose (reasoning). */
   descriptionMono?: boolean;
   status?: RunRowStatus;
-  /** Live-ticks a duration while running. */
+  /** @deprecated The shell no longer ticks a live duration while running; the
+   *  running state lives in the title (`TextShimmer`). Accepted and ignored so
+   *  existing callers keep compiling. */
   startTime?: number;
-  /** Static duration shown once the row is no longer running. */
+  /** Static duration, revealed on hover once the row is no longer running. */
   durationMs?: number;
   /** Radius shaping when rows are stacked into a group. */
   groupPosition?: "single" | "first" | "middle" | "last";
@@ -70,11 +65,17 @@ const SHAPE_CLASS: Record<
   last: "rounded-t-[var(--radius-sm)] rounded-b-[var(--radius-lg)]",
 };
 
+// Header geometry: 8px inset, 22px glyph slot, 8px gap. The collapsed error
+// indents by their sum so it starts under the title, not under the glyph.
+const HEADER_INSET = "px-2 py-1";
+const ERROR_INDENT = "pl-[2.375rem]";
+
 /**
- * Shared shell for the agent activity rows (reasoning + tool). Owns the
- * bordered container, the lead icon badge, title/description, the trailing
- * meta cluster (duration + status + chevron) and the collapsible body, so
- * both row kinds read as one family instead of two bespoke layouts.
+ * Shared shell for the agent activity rows (reasoning + tool). A quiet
+ * one-liner at rest — bare glyph, muted title and description, no fill, no
+ * border — that becomes a bordered card only while open. The border is always
+ * present (transparent at rest) so hover and expand never shift layout.
+ * Both row kinds render through it so they read as one family.
  */
 export function RunRowShell({
   icon,
@@ -82,7 +83,6 @@ export function RunRowShell({
   description,
   descriptionMono = false,
   status = "idle",
-  startTime,
   durationMs,
   groupPosition = "single",
   collapsedError,
@@ -109,11 +109,14 @@ export function RunRowShell({
     <Collapsible.Root open={open} onOpenChange={setOpen}>
       <div className="flex items-start gap-2">
         <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,
           )}
@@ -122,21 +125,48 @@ export function RunRowShell({
             <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",
               )}
             >
-              <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">
-                {icon}
+              <span
+                aria-hidden
+                className="flex h-[1.375rem] w-[1.375rem] shrink-0 items-center justify-center text-muted-foreground"
+              >
+                <span
+                  data-run-row-glyph=""
+                  className={cn(
+                    "flex items-center justify-center",
+                    expandable && "group-hover:hidden",
+                    open && "hidden",
+                  )}
+                >
+                  {icon}
+                </span>
+                {expandable ? (
+                  <ChevronRight
+                    data-run-row-chevron=""
+                    className={cn(
+                      "hidden h-3.5 w-3.5 transition-transform group-hover:block",
+                      open && "block rotate-90",
+                    )}
+                  />
+                ) : null}
               </span>
 
-              <span className="shrink-0 whitespace-nowrap text-xs font-medium text-foreground">
+              <span
+                className={cn(
+                  "shrink-0 whitespace-nowrap text-sm font-normal text-muted-foreground transition-colors group-hover:text-foreground",
+                  open && "text-foreground",
+                )}
+              >
                 {title}
               </span>
               {description ? (
                 <span
                   className={cn(
-                    "hidden min-w-0 flex-1 truncate text-xs text-muted-foreground sm:inline",
+                    "hidden min-w-0 flex-1 truncate text-sm text-muted-foreground transition-colors group-hover:text-foreground sm:inline",
                     descriptionMono && "font-mono",
                   )}
                 >
@@ -144,29 +174,27 @@ export function RunRowShell({
                 </span>
               ) : null}
 
-              <div className="ml-auto flex shrink-0 items-center gap-1.5">
-                {isRunning && startTime != null ? (
-                  <LiveDuration startTime={startTime} />
-                ) : durationMs != null ? (
-                  <span className="text-[10px] font-mono tabular-nums text-muted-foreground">
+              <span className="ml-auto flex shrink-0 items-center gap-1.5">
+                {!isRunning && durationMs != null ? (
+                  <span
+                    data-run-row-duration=""
+                    className="font-mono text-[10px] tabular-nums text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100"
+                  >
                     {formatDuration(durationMs)}
                   </span>
                 ) : null}
                 <RunRowStatusDot status={status} />
-                {expandable ? (
-                  <ChevronRight
-                    className={cn(
-                      "h-3 w-3 shrink-0 text-muted-foreground transition-transform",
-                      open && "rotate-90",
-                    )}
-                  />
-                ) : null}
-              </div>
+              </span>
             </button>
           </Collapsible.Trigger>
 
           {collapsedError && !open ? (
-            <div className="border-t border-border px-3 py-2 text-xs text-[var(--surface-danger-text)]">
+            <div
+              className={cn(
+                "pb-1.5 pr-2 text-xs leading-snug text-[var(--surface-danger-text)]",
+                ERROR_INDENT,
+              )}
+            >
               {collapsedError}
             </div>
           ) : null}

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

@@ -7,6 +7,7 @@
  */
 
 import { type ReactNode } from "react";
+import { cn } from "../lib/utils";
 import { CodeBlock } from "../markdown/code-block";
 import type { ToolPart, ToolStatus } from "../types/parts";
 import { InlineToolItem } from "./inline-tool-item";
@@ -129,7 +130,9 @@ export function ToolCallStep({
 }
 
 /**
- * ToolCallGroup — groups multiple tool calls under a heading.
+ * ToolCallGroup — a tight stack of consecutive tool rows. The title names the
+ * group for assistive tech only; the rows themselves are the visible label, so
+ * no heading is drawn above them.
  */
 export interface ToolCallGroupProps {
   title?: string;
@@ -139,12 +142,11 @@ export interface ToolCallGroupProps {
 
 export function ToolCallGroup({ title, children, className }: ToolCallGroupProps) {
   return (
-    <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}
-        </div>
-      )}
+    <div
+      role="group"
+      aria-label={title}
+      className={cn("flex flex-col gap-1", className)}
+    >
       {children}
     </div>
   );