@tangle-network/ui 11.5.0 → 11.7.0

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>
   );

package/src/utils/tool-display.test.ts

@@ -0,0 +1,53 @@
+import { describe, expect, it } from "vitest";
+import type { ToolPart } from "../types/parts";
+import { getToolDisplayMetadata } from "./tool-display";
+
+function part(tool: string, input: unknown): ToolPart {
+  return {
+    type: "tool",
+    id: `id-${tool}`,
+    tool,
+    state: { status: "completed", input },
+  };
+}
+
+describe("getToolDisplayMetadata", () => {
+  it.each([
+    ["read", { file_path: "/home/u/project/src/app.ts" }, "Read", "/home/u/project/src/app.ts"],
+    ["edit", { path: "src/app.ts" }, "Edit", "src/app.ts"],
+    ["write", { file: "src/new.ts" }, "Write", "src/new.ts"],
+    ["bash", { command: "pnpm test --run" }, "Shell", "pnpm test --run"],
+    ["grep", { pattern: "useCallback" }, "Search", "useCallback"],
+    ["glob", { pattern: "src/**/*.ts" }, "Find", "src/**/*.ts"],
+    ["web_search", { query: "vitest mocking" }, "Web search", "vitest mocking"],
+    ["web_fetch", { url: "https://vitest.dev" }, "Fetch", "https://vitest.dev"],
+    ["task", { description: "audit routes" }, "Task", "audit routes"],
+  ])("%s → bare verb title, subject in the description only", (tool, input, title, description) => {
+    const meta = getToolDisplayMetadata(part(tool, input));
+    expect(meta.title).toBe(title);
+    expect(meta.description).toBe(description);
+    expect(meta.title).not.toContain(description);
+  });
+
+  it("keeps the untruncated path and command for consumers that need them", () => {
+    const edit = getToolDisplayMetadata(part("edit", { file_path: "/a/b/c/d/e.ts" }));
+    expect(edit.targetPath).toBe("/a/b/c/d/e.ts");
+    expect(edit.diffFilePath).toBe("/a/b/c/d/e.ts");
+
+    const long = "x".repeat(80);
+    const shell = getToolDisplayMetadata(part("bash", { command: long }));
+    expect(shell.commandSnippet).toBe(long);
+    expect(shell.description).toHaveLength(60);
+  });
+
+  it("falls back to the verb alone when the input carries no subject", () => {
+    expect(getToolDisplayMetadata(part("read", {})).title).toBe("Read");
+    expect(getToolDisplayMetadata(part("read", {})).description).toBeUndefined();
+  });
+
+  it("names unknown tools by their tool name", () => {
+    const meta = getToolDisplayMetadata(part("custom_probe", { pattern: "p" }));
+    expect(meta.title).toBe("custom_probe");
+    expect(meta.description).toBe("p");
+  });
+});

package/src/utils/tool-display.ts

@@ -43,11 +43,6 @@ function extractFilePath(input: unknown): string | undefined {
   );
 }
 
-function cleanPath(path: string): string {
-  const parts = path.split("/");
-  return parts.length > 3 ? ".../" + parts.slice(-2).join("/") : path;
-}
-
 // ---------------------------------------------------------------------------
 // Category icons (emoji shorthand used by compact views)
 // ---------------------------------------------------------------------------
@@ -116,6 +111,12 @@ export function getToolCategory(toolName: string): ToolCategory {
 // Main metadata resolver
 // ---------------------------------------------------------------------------
 
+/**
+ * Title is the bare verb ("Read", "Edit", "Shell"); the path, command, pattern
+ * or query lives in `description` only, so a row prints its subject once.
+ * `targetPath` / `commandSnippet` carry the untruncated value for consumers
+ * that need it (diff headers, expanded detail).
+ */
 export function getToolDisplayMetadata(part: ToolPart): ToolDisplayMetadata {
   const name = normalizeToolName(part.tool);
   const input = part.state.status !== "pending" ? part.state.input : undefined;
@@ -128,7 +129,7 @@ export function getToolDisplayMetadata(part: ToolPart): ToolDisplayMetadata {
     case "command":
     case "execute":
       return {
-        title: "Run command",
+        title: "Shell",
         description: command ? truncateCommand(command) : undefined,
         displayVariant: "command",
         commandSnippet: command,
@@ -138,7 +139,7 @@ export function getToolDisplayMetadata(part: ToolPart): ToolDisplayMetadata {
     case "write_file":
     case "create_file":
       return {
-        title: filePath ? `Write ${cleanPath(filePath)}` : "Write file",
+        title: "Write",
         description: filePath,
         displayVariant: "write-file",
         targetPath: filePath,
@@ -147,7 +148,7 @@ export function getToolDisplayMetadata(part: ToolPart): ToolDisplayMetadata {
     case "edit":
     case "patch":
       return {
-        title: filePath ? `Edit ${cleanPath(filePath)}` : "Edit file",
+        title: "Edit",
         description: filePath,
         hasDiffOutput: true,
         diffFilePath: filePath,
@@ -159,7 +160,7 @@ export function getToolDisplayMetadata(part: ToolPart): ToolDisplayMetadata {
     case "read_file":
     case "cat":
       return {
-        title: filePath ? `Read ${cleanPath(filePath)}` : "Read file",
+        title: "Read",
         description: filePath,
         displayVariant: "read-file",
         targetPath: filePath,
@@ -170,7 +171,7 @@ export function getToolDisplayMetadata(part: ToolPart): ToolDisplayMetadata {
     case "rg": {
       const pattern = extractString(input, "pattern");
       return {
-        title: pattern ? `Search: ${pattern}` : "Search",
+        title: "Search",
         description: pattern,
         displayVariant: "grep",
       };
@@ -181,7 +182,7 @@ export function getToolDisplayMetadata(part: ToolPart): ToolDisplayMetadata {
     case "ls": {
       const pattern = extractString(input, "pattern");
       return {
-        title: pattern ? `Find: ${pattern}` : "Find files",
+        title: "Find",
         description: pattern,
         displayVariant: "glob",
       };
@@ -193,8 +194,8 @@ export function getToolDisplayMetadata(part: ToolPart): ToolDisplayMetadata {
       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) : undefined,
         displayVariant: "web-search",
       };
     }
@@ -206,8 +207,8 @@ export function getToolDisplayMetadata(part: ToolPart): ToolDisplayMetadata {
         extractString(input, "description") ??
         extractString(input, "prompt");
       return {
-        title: desc ? `Task: ${truncateCommand(desc)}` : "Agent task",
-        description: desc,
+        title: "Task",
+        description: desc ? truncateCommand(desc) : undefined,
       };
     }