@stigmer/react 3.1.7 → 3.1.8

package/src/execution/WriteBackCard.tsx

@@ -1,8 +1,15 @@
 "use client";
 
+import { useCallback, useEffect, useRef, useState } from "react";
 import type { WorkspaceWriteBack } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/writeback_pb";
 import { WorkspaceWriteBackPhase } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/writeback_pb";
 import { cn } from "@stigmer/theme";
+import { DiffSummary } from "../version-history/DiffSummary.js";
+import {
+  parseDiffStatSummary,
+  trailingDiffStatLine,
+  writeBackDisplayName,
+} from "./write-back-utils.js";
 
 /** Props for {@link WriteBackCard}. */
 export interface WriteBackCardProps {
@@ -13,11 +20,15 @@ export interface WriteBackCardProps {
 }
 
 /**
- * Renders a single workspace write-back outcome as a compact card.
+ * Renders a single workspace write-back outcome as a dense, VS Code
+ * Source-Control-style row group: a header (workspace name + quiet phase
+ * caption), a pull-request row that opens the PR on the remote, a branch row
+ * with a hover-revealed copy control, and an aggregate change-stat line.
  *
- * Shows the workspace entry name, branch, diff summary, phase
- * indicator, and a "View PR" link when the pull request was
- * successfully created.
+ * Row geometry, hover, and focus treatment match {@link ArtifactRow}, so the
+ * session panel's Changes and Artifacts facets read as one surface. The PR
+ * link and the copy control are SIBLING interactive elements, never nested
+ * (axe `nested-interactive`, WCAG 4.1.2).
  *
  * Error rendering follows the record's phase honestly (DD-006):
  * a FAILED record's error is destructive (the work did not reach the
@@ -25,8 +36,12 @@ export interface WriteBackCardProps {
  * degraded notice — the branch is live and its info stays usable; only
  * the PR step failed.
  *
+ * The stat line is parsed from the record's `git diff --stat` summary and
+ * rendered through the shared {@link DiffSummary} component; unparseable
+ * text degrades to the raw trailing line rather than showing wrong numbers.
+ *
  * Themed via standard semantic tokens — no hardcoded colors, no
- * Console dependencies. Embedders can theme this card through
+ * Console dependencies. Embedders can theme this component through
  * their Tailwind/CSS configuration.
  *
  * @example
@@ -42,53 +57,49 @@ export interface WriteBackCardProps {
  * ```
  *
  * @see useWorkspaceWriteBacks — extracts write-back data from an execution
+ * @see writeBackDisplayName — the header's entry-name fallback chain
  */
 export function WriteBackCard({ writeBack, className }: WriteBackCardProps) {
   const isFailed =
     writeBack.phase === WorkspaceWriteBackPhase.WORKSPACE_WRITE_BACK_FAILED;
   const hasPR = !!writeBack.pullRequestUrl;
+  const displayName = writeBackDisplayName(writeBack);
 
   return (
     <div
       role="article"
-      aria-label={`Write-back: ${writeBack.workspaceEntryName}`}
-      className={cn(
-        "rounded-md border p-3",
-        isFailed ? "border-destructive/40" : "border-border",
-        className,
-      )}
+      aria-label={`Write-back: ${displayName}`}
+      className={cn("flex flex-col", className)}
     >
-      {/* Header: icon + workspace name + phase badge */}
-      <div className="flex items-start gap-2">
-        <span className="mt-0.5 shrink-0 text-muted-foreground">
-          <GitBranchIcon />
+      {/* Header: workspace name + quiet phase caption */}
+      <div className="flex items-center gap-2 px-2 py-1">
+        <span
+          className="min-w-0 flex-1 truncate text-xs font-medium text-foreground"
+          title={displayName}
+        >
+          {displayName}
         </span>
-        <div className="min-w-0 flex-1">
-          <div className="flex items-center gap-2">
-            <span className="truncate text-sm font-medium text-foreground">
-              {writeBack.workspaceEntryName}
-            </span>
-            <PhaseBadge phase={writeBack.phase} />
-          </div>
-          {writeBack.branchName && (
-            <div className="mt-0.5 truncate font-mono text-xs text-muted-foreground">
-              {writeBack.branchName}
-              {writeBack.baseBranch && (
-                <span className="text-muted-foreground-subtle">
-                  {" \u2190 "}
-                  {writeBack.baseBranch}
-                </span>
-              )}
-            </div>
-          )}
-        </div>
+        <PhaseCaption
+          phase={writeBack.phase}
+          pullRequestNumber={writeBack.pullRequestNumber}
+        />
       </div>
 
-      {/* Diff summary */}
-      {writeBack.diffSummary && (
-        <div className="mt-1.5 whitespace-pre-wrap font-mono text-xs text-muted-foreground">
-          {writeBack.diffSummary}
-        </div>
+      {/* Pull-request row — the primary action when the PR exists */}
+      {hasPR && (
+        <PullRequestRow
+          url={writeBack.pullRequestUrl}
+          number={writeBack.pullRequestNumber}
+        />
+      )}
+
+      {/* Branch row — primary when no PR was created; the branch is still
+          the user's handle on the pushed work */}
+      {writeBack.branchName && (
+        <BranchRow
+          branchName={writeBack.branchName}
+          baseBranch={writeBack.baseBranch}
+        />
       )}
 
       {/* Error message: destructive when the write-back itself failed,
@@ -96,7 +107,7 @@ export function WriteBackCard({ writeBack, className }: WriteBackCardProps) {
       {writeBack.error && (
         <div
           className={cn(
-            "mt-1.5 rounded px-2 py-1 text-xs",
+            "mx-2 my-1 rounded px-2 py-1 text-xs",
             isFailed
               ? "bg-destructive-subtle text-destructive"
               : "bg-status-degraded-subtle text-status-degraded",
@@ -106,78 +117,202 @@ export function WriteBackCard({ writeBack, className }: WriteBackCardProps) {
         </div>
       )}
 
-      {/* PR link */}
-      {hasPR && (
-        <div className="mt-2">
-          <a
-            href={writeBack.pullRequestUrl}
-            target="_blank"
-            rel="noopener noreferrer"
-            className={cn(
-              "inline-flex items-center gap-1 text-xs font-medium text-primary transition-colors hover:text-primary-muted",
-              FOCUS_RING_CLASSES,
-            )}
-          >
-            <ExternalLinkIcon />
-            View PR #{writeBack.pullRequestNumber}
-          </a>
-        </div>
-      )}
+      {/* Aggregate change stats */}
+      {writeBack.diffSummary && <StatLine diffSummary={writeBack.diffSummary} />}
     </div>
   );
 }
 
 // ---------------------------------------------------------------------------
-// Phase badge
+// Phase caption — quiet header text, replacing the retired pill badge
 // ---------------------------------------------------------------------------
 
-const PHASE_CONFIG: Record<
-  number,
-  { label: string; className: string }
-> = {
-  [WorkspaceWriteBackPhase.WORKSPACE_WRITE_BACK_COMMITTED]: {
-    label: "Committed",
-    className: "bg-muted text-muted-foreground",
-  },
-  [WorkspaceWriteBackPhase.WORKSPACE_WRITE_BACK_PUSHED]: {
-    label: "Pushed",
-    className: "bg-muted text-muted-foreground",
-  },
-  [WorkspaceWriteBackPhase.WORKSPACE_WRITE_BACK_PR_CREATED]: {
-    label: "PR Created",
-    className: "bg-primary-subtle text-primary",
-  },
-  [WorkspaceWriteBackPhase.WORKSPACE_WRITE_BACK_FAILED]: {
-    label: "Failed",
-    className: "bg-destructive-subtle text-destructive",
-  },
-};
-
-function PhaseBadge({ phase }: { phase: number }) {
-  const config = PHASE_CONFIG[phase];
-  if (!config) return null;
+function PhaseCaption({
+  phase,
+  pullRequestNumber,
+}: {
+  phase: WorkspaceWriteBackPhase;
+  pullRequestNumber: number;
+}) {
+  let label: string;
+  switch (phase) {
+    case WorkspaceWriteBackPhase.WORKSPACE_WRITE_BACK_COMMITTED:
+      label = "Committed";
+      break;
+    case WorkspaceWriteBackPhase.WORKSPACE_WRITE_BACK_PUSHED:
+      label = "Pushed";
+      break;
+    case WorkspaceWriteBackPhase.WORKSPACE_WRITE_BACK_PR_CREATED:
+      label = pullRequestNumber > 0 ? `PR #${pullRequestNumber}` : "PR created";
+      break;
+    case WorkspaceWriteBackPhase.WORKSPACE_WRITE_BACK_FAILED:
+      label = "Failed";
+      break;
+    default:
+      return null;
+  }
 
   return (
     <span
       className={cn(
-        "inline-flex shrink-0 items-center rounded-full px-1.5 py-0.5 text-[10px] font-medium leading-none",
-        config.className,
+        "shrink-0 text-[10px] font-medium tabular-nums",
+        phase === WorkspaceWriteBackPhase.WORKSPACE_WRITE_BACK_FAILED
+          ? "text-destructive"
+          : "text-muted-foreground",
       )}
     >
-      {config.label}
+      {label}
     </span>
   );
 }
 
+// ---------------------------------------------------------------------------
+// Pull-request row
+// ---------------------------------------------------------------------------
+
+function PullRequestRow({ url, number }: { url: string; number: number }) {
+  return (
+    <a
+      href={url}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={cn(
+        "group flex items-center gap-2 px-2 py-1 text-xs text-muted-foreground transition-colors",
+        "hover:bg-muted hover:text-foreground",
+        FOCUS_RING_CLASSES,
+      )}
+    >
+      <span className="shrink-0">
+        <PullRequestIcon />
+      </span>
+      <span className="min-w-0 flex-1 truncate text-foreground">
+        {number > 0 ? `Pull Request #${number}` : "Pull Request"}
+      </span>
+      <span
+        className="shrink-0 opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100"
+        aria-hidden="true"
+      >
+        <ExternalLinkIcon />
+      </span>
+    </a>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Branch row — info + sibling hover-revealed copy control
+// ---------------------------------------------------------------------------
+
+/** How long the copy control shows its "copied" confirmation. */
+const COPIED_FEEDBACK_MS = 2000;
+
+function BranchRow({
+  branchName,
+  baseBranch,
+}: {
+  branchName: string;
+  baseBranch: string;
+}) {
+  const [copied, setCopied] = useState(false);
+
+  // Clear the pending feedback timer on unmount so a resolved copy never
+  // sets state on an unmounted component (same guard as useArtifactCopy).
+  const copiedTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  useEffect(() => {
+    return () => {
+      if (copiedTimer.current !== null) clearTimeout(copiedTimer.current);
+    };
+  }, []);
+
+  const handleCopy = useCallback(() => {
+    navigator.clipboard.writeText(branchName).then(() => {
+      setCopied(true);
+      if (copiedTimer.current !== null) clearTimeout(copiedTimer.current);
+      copiedTimer.current = setTimeout(
+        () => setCopied(false),
+        COPIED_FEEDBACK_MS,
+      );
+    });
+  }, [branchName]);
+
+  return (
+    <div className="group flex items-stretch">
+      <div
+        className="flex min-w-0 flex-1 items-center gap-2 px-2 py-1 text-xs"
+        title={baseBranch ? `${branchName} \u2190 ${baseBranch}` : branchName}
+      >
+        <span className="shrink-0 text-muted-foreground">
+          <GitBranchIcon />
+        </span>
+        <span className="min-w-0 truncate font-mono text-foreground">
+          {branchName}
+        </span>
+        {baseBranch && (
+          <span className="shrink-0 font-mono text-muted-foreground-faint">
+            {"\u2190 "}
+            {baseBranch}
+          </span>
+        )}
+      </div>
+      <button
+        type="button"
+        onClick={handleCopy}
+        aria-label={copied ? "Branch name copied" : `Copy branch name ${branchName}`}
+        title={copied ? "Copied" : "Copy branch name"}
+        className={cn(
+          "flex shrink-0 items-center px-2 text-muted-foreground transition-opacity",
+          copied
+            ? "opacity-100"
+            : "opacity-0 group-hover:opacity-100 focus-visible:opacity-100",
+          "hover:text-foreground",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+        )}
+      >
+        {copied ? <CheckIcon /> : <CopyIcon />}
+      </button>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Stat line — parsed --stat summary through the shared DiffSummary
+// ---------------------------------------------------------------------------
+
+function StatLine({ diffSummary }: { diffSummary: string }) {
+  const stats = parseDiffStatSummary(diffSummary);
+
+  if (stats) {
+    return (
+      <DiffSummary
+        fileCount={stats.filesChanged}
+        additions={stats.insertions}
+        deletions={stats.deletions}
+        className="px-2 py-1"
+      />
+    );
+  }
+
+  // Unparseable text (format drift): the raw trailing line is still honest;
+  // structured-looking wrong numbers would not be.
+  const raw = trailingDiffStatLine(diffSummary);
+  if (!raw) return null;
+
+  return (
+    <div className="px-2 py-1 font-mono text-xs text-muted-foreground">
+      {raw}
+    </div>
+  );
+}
+
 // ---------------------------------------------------------------------------
 // Shared style constants
 // ---------------------------------------------------------------------------
 
 const FOCUS_RING_CLASSES =
-  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:rounded-sm";
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring";
 
 // ---------------------------------------------------------------------------
-// Inline SVG icons
+// Inline SVG icons — monochrome, `currentColor`-tinted (DD-005; SDK
+// independence — no icon-library dependency)
 // ---------------------------------------------------------------------------
 
 function GitBranchIcon() {
@@ -203,6 +338,29 @@ function GitBranchIcon() {
   );
 }
 
+/** Git pull-request glyph: base branch line joined to the merge commit. */
+function PullRequestIcon() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <circle cx="3.5" cy="3.5" r="1.5" />
+      <circle cx="3.5" cy="10.5" r="1.5" />
+      <circle cx="10.5" cy="10.5" r="1.5" />
+      <path d="M3.5 5V9" />
+      <path d="M7 3.5H8.5C9.6 3.5 10.5 4.4 10.5 5.5V9" />
+    </svg>
+  );
+}
+
 function ExternalLinkIcon() {
   return (
     <svg
@@ -223,3 +381,42 @@ function ExternalLinkIcon() {
     </svg>
   );
 }
+
+function CopyIcon() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="shrink-0"
+      aria-hidden="true"
+    >
+      <rect x="4" y="4" width="6.5" height="6.5" rx="1" />
+      <path d="M8 4V2.5C8 1.95 7.55 1.5 7 1.5H2.5C1.95 1.5 1.5 1.95 1.5 2.5V7C1.5 7.55 1.95 8 2.5 8H4" />
+    </svg>
+  );
+}
+
+function CheckIcon() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="shrink-0"
+      aria-hidden="true"
+    >
+      <path d="M2.5 6.5L5 9L9.5 3.5" />
+    </svg>
+  );
+}

package/src/execution/WriteBacksWidget.tsx

@@ -49,7 +49,7 @@ export interface WriteBacksWidgetProps {
  * />
  * ```
  *
- * @see {@link WriteBackCard} — compact card per write-back
+ * @see {@link WriteBackCard} — dense row group per write-back
  * @see {@link useSessionWriteBacks} — headless session-level write-back aggregation hook
  * @see {@link useWorkspaceWriteBacks} — headless single-execution write-back extraction hook
  */
@@ -71,13 +71,13 @@ export function WriteBacksWidget({
         </span>
       </div>
 
-      <div role="list" className="space-y-2">
+      <ul role="list" className="flex flex-col gap-3">
         {writeBacks.map((entry) => (
-          <div key={entry.writeBack.workspaceEntryName} role="listitem">
+          <li key={entry.writeBack.workspaceEntryName}>
             <WriteBackCard writeBack={entry.writeBack} />
-          </div>
+          </li>
         ))}
-      </div>
+      </ul>
     </section>
   );
 }

package/src/execution/__tests__/ToolCallItem.test.tsx

@@ -117,6 +117,57 @@ describe("ToolCallItem disclosure", () => {
     expect(isExpanded(container)).toBe(false);
   });
 
+  // --- Interrupted rows (issue #207): settled, neutral, never live -----------
+
+  it("renders an interrupted row settled: collapsed, no spinner, neutral slash icon", () => {
+    // A tool call the platform settled to INTERRUPTED when its execution
+    // terminalized mid-call. Before #207 a zombie RUNNING row spun forever and
+    // force-opened; the settled row must read as finished-by-interruption.
+    const { container } = render(
+      <ToolCallItem
+        toolCall={makeToolCall({
+          id: "tc-int",
+          name: "delete_file",
+          args: { path: "/x.ts" },
+          status: ToolCallStatus.TOOL_CALL_INTERRUPTED,
+        })}
+      />,
+    );
+    expect(container.querySelector(".animate-spin")).toBeNull();
+    expect(hasHeaderChevron(container)).toBe(true);
+    expect(isExpanded(container)).toBe(false);
+  });
+
+  it("collapses a force-opened running row the moment it settles to interrupted", () => {
+    // Mirrors the running→completed settle: the server-authored interruption
+    // arrives via a status update and the row must release its auto-open.
+    const { container, rerender } = render(
+      <ToolCallItem
+        toolCall={makeToolCall({
+          id: "tc-int",
+          name: "delete_file",
+          args: { path: "/x.ts" },
+          status: ToolCallStatus.TOOL_CALL_RUNNING,
+        })}
+      />,
+    );
+    expect(isExpanded(container)).toBe(true);
+    expect(container.querySelector(".animate-spin")).not.toBeNull();
+
+    rerender(
+      <ToolCallItem
+        toolCall={makeToolCall({
+          id: "tc-int",
+          name: "delete_file",
+          args: { path: "/x.ts" },
+          status: ToolCallStatus.TOOL_CALL_INTERRUPTED,
+        })}
+      />,
+    );
+    expect(container.querySelector(".animate-spin")).toBeNull();
+    expect(isExpanded(container)).toBe(false);
+  });
+
   // --- Preview categories: no chevron, always-visible body ------------------
 
   it("renders a settled edit as an always-visible diff with no header chevron", () => {

package/src/execution/__tests__/ToolRunGroup.test.tsx

@@ -74,6 +74,28 @@ describe("ToolRunGroup", () => {
     expect(chipExpanded(container)).toBe(false);
   });
 
+  it("treats an interrupted call as terminal: the chip settles instead of pinning to pending", () => {
+    // A platform-settled INTERRUPTED call (issue #207) inside a folded run.
+    // Before the fix an unknown status kept allTerminal=false forever, pinning
+    // the whole chip to a live-looking pending state with a spinner-adjacent
+    // dot; a settled run must render settled.
+    const { container } = render(
+      <ToolRunGroup
+        category="read"
+        toolCalls={[
+          makeRead("r1", "/a.ts", ToolCallStatus.TOOL_CALL_COMPLETED),
+          makeRead("r2", "/b.ts", ToolCallStatus.TOOL_CALL_INTERRUPTED),
+        ]}
+      />,
+    );
+    expect(container.querySelector(".animate-spin")).toBeNull();
+    expect(chipExpanded(container)).toBe(false);
+    // The aggregate resolves to the terminal branch (completed chip in
+    // text-success), not the non-terminal pending fallback (muted dot).
+    expect(container.querySelector(".text-success")).not.toBeNull();
+    expect(screen.getByText("Read 2 files")).toBeTruthy();
+  });
+
   it("auto-opens when a folded call is awaiting approval, so the gate is reachable", () => {
     const gated = makeRead("r2", "/b.ts", ToolCallStatus.TOOL_CALL_WAITING_APPROVAL);
     const approval: PendingApproval = create(PendingApprovalSchema, {

package/src/execution/__tests__/WriteBackCard.test.tsx

@@ -1,11 +1,13 @@
 /**
- * WriteBackCard — phase-honest rendering of a workspace write-back record.
+ * WriteBackCard — phase-honest rendering of a workspace write-back record
+ * as a dense VS Code-style row group.
+ *
  * The high-stakes matrix is the error treatment: FAILED errors are
  * destructive, while a PUSHED record carrying a PR error renders it as a
  * degraded notice with the branch info intact (the branch IS live).
  */
-import { describe, it, expect, afterEach } from "vitest";
-import { render, screen, cleanup } from "@testing-library/react";
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, cleanup, fireEvent, waitFor } from "@testing-library/react";
 import { create } from "@bufbuild/protobuf";
 import {
   WorkspaceWriteBackSchema,
@@ -19,7 +21,7 @@ function makeWriteBack(overrides: Record<string, unknown> = {}) {
     branchName: "stigmer/ses-01test",
     baseBranch: "main",
     commitSha: "abc123",
-    diffSummary: " 2 files changed",
+    diffSummary: " 2 files changed, 10 insertions(+), 3 deletions(-)",
     phase: WorkspaceWriteBackPhase.WORKSPACE_WRITE_BACK_PR_CREATED,
     pullRequestUrl: "https://github.com/acme/api/pull/12",
     pullRequestNumber: 12,
@@ -30,13 +32,64 @@ function makeWriteBack(overrides: Record<string, unknown> = {}) {
 afterEach(() => cleanup());
 
 describe("WriteBackCard", () => {
-  it("renders branch, diff summary, and the PR link for a PR_CREATED record", () => {
+  it("renders the header name, PR row, branch row, and parsed stats for a PR_CREATED record", () => {
     render(<WriteBackCard writeBack={makeWriteBack()} />);
-    expect(screen.getByText("stigmer/ses-01test")).toBeTruthy();
-    expect(screen.getByText(/2 files changed/)).toBeTruthy();
-    const link = screen.getByRole("link", { name: /view pr #12/i });
+
+    expect(screen.getByText("acme/api")).toBeTruthy();
+    // Quiet phase caption in the header.
+    expect(screen.getByText("PR #12")).toBeTruthy();
+
+    const link = screen.getByRole("link", { name: /pull request #12/i });
     expect(link.getAttribute("href")).toBe("https://github.com/acme/api/pull/12");
-    expect(screen.getByText("PR Created")).toBeTruthy();
+    expect(link.getAttribute("target")).toBe("_blank");
+    expect(link.getAttribute("rel")).toContain("noopener");
+
+    expect(screen.getByText("stigmer/ses-01test")).toBeTruthy();
+    expect(screen.getByText(/main/)).toBeTruthy();
+
+    // The --stat summary line renders structured, not as raw mono text.
+    expect(screen.getByText("2 files changed")).toBeTruthy();
+    expect(screen.getByText("+10 additions")).toBeTruthy();
+    expect(screen.getByText("-3 deletions")).toBeTruthy();
+  });
+
+  it("falls back to the raw trailing --stat line when the summary is unparseable", () => {
+    render(
+      <WriteBackCard
+        writeBack={makeWriteBack({ diffSummary: " something unexpected" })}
+      />,
+    );
+    expect(screen.getByText("something unexpected")).toBeTruthy();
+  });
+
+  // Single-entry sessions can write back under an empty entry name (the
+  // runner's resolveEntry convention) — the header must never be blank.
+  it("derives the header from the PR URL when the entry name is empty", () => {
+    render(
+      <WriteBackCard writeBack={makeWriteBack({ workspaceEntryName: "" })} />,
+    );
+    expect(screen.getByText("acme/api")).toBeTruthy();
+    expect(
+      screen.getByRole("article", { name: "Write-back: acme/api" }),
+    ).toBeTruthy();
+  });
+
+  it("copies the branch name with transient feedback", async () => {
+    const writeText = vi.fn().mockResolvedValue(undefined);
+    Object.defineProperty(navigator, "clipboard", {
+      value: { writeText },
+      configurable: true,
+    });
+
+    render(<WriteBackCard writeBack={makeWriteBack()} />);
+    fireEvent.click(
+      screen.getByRole("button", { name: /copy branch name/i }),
+    );
+
+    expect(writeText).toHaveBeenCalledWith("stigmer/ses-01test");
+    await waitFor(() =>
+      expect(screen.getByRole("button", { name: /copied/i })).toBeTruthy(),
+    );
   });
 
   it("renders a FAILED record's error destructively", () => {
@@ -52,7 +105,8 @@ describe("WriteBackCard", () => {
     );
     const error = screen.getByText(/git push failed/);
     expect(error.className).toContain("text-destructive");
-    expect(screen.getByText("Failed")).toBeTruthy();
+    const caption = screen.getByText("Failed");
+    expect(caption.className).toContain("text-destructive");
   });
 
   it("renders a PUSHED record's PR error as a degraded notice, branch info intact", () => {