@stigmer/react 3.12.0 → 3.12.2

package/src/execution/ToolCallItem.tsx

@@ -15,21 +15,24 @@ import {
   ThreadCardShell,
   ThreadCardHeader,
   ThreadCardBody,
+  type ThreadCardVariant,
   SpinnerIcon,
   ClockIcon,
-  CheckCircleIcon,
   XCircleIcon,
   DotIcon,
   SlashCircleIcon,
 } from "../internal/thread-card/index.js";
-import { ToolCallDetail, formatDuration } from "./ToolCallDetail.js";
+import { TerminalTail } from "./TerminalSession.js";
+import { ToolCallDetail, formatHeaderDuration } from "./ToolCallDetail.js";
 import { SubAgentSection } from "./SubAgentSection.js";
 import { ApprovalCardBody } from "./ApprovalCard.js";
 import { useApproval } from "./ApprovalContext.js";
 import { useFileReviewRowState } from "./FileReviewContext.js";
 import type { FileReviewRowState } from "./file-review-status.js";
 import { FilePathLink } from "./FilePathLink.js";
-import { isFileCategory, type ToolCategory } from "./tool-categories.js";
+// ToolChrome is type-only here so the doc link below resolves; the strict
+// tsdoc gate (tsdoc:check) guards it against removal.
+import { isFileCategory, type ToolCategory, type ToolChrome } from "./tool-categories.js";
 import { useToolPresentation } from "./tool-presenter.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 
@@ -63,18 +66,25 @@ export interface ToolCallItemProps {
 /**
  * Renders a single tool call as a row in the tool call group.
  *
- * Three rendering modes, set by one rule — **does the body carry content the
- * one-line row cannot?**
+ * Four rendering modes, set by one rule — **does the body carry content the
+ * one-line row cannot, and does it stay content once the call settles?**
  *
  * - **Non-expandable** (completed/skipped Read): a static `<div>` row with a
  *   clickable {@link FilePathLink}. The path IS the complete information.
- * - **Preview** (content-bearing: shell / edit / write / fetch / web-search /
+ * - **Preview** (content-bearing: edit / write / fetch / web-search /
  *   unknown / mcp): a plain (non-button) header above an **always-visible**
  *   {@link ToolCallDetail} body — Cursor-style "previews aren't collapsible".
  *   There is no header chevron; each content block self-bounds with its own
-   *   single in-place reveal (`RevealToggle`), so a long diff or output
- *   never floods the thread. The body is suppressed only for an `empty` result
- *   (e.g. a no-output shell), which stays a clean one-line row.
+ *   single in-place reveal (`RevealToggle`), so a long diff or output
+ *   never floods the thread. The body is suppressed only for an `empty` result,
+ *   which stays a clean one-line row.
+ * - **Tail** (shell): live like preview — the full terminal session streams in
+ *   view while the command runs or awaits its gate — but a *successful* settle
+ *   collapses the row to a {@link TerminalTail} teaser (the `$ command` line
+ *   plus a dimmed tail of the last output lines) behind the header chevron.
+ *   A settled failure stays open: error output is content, not context. A
+ *   result that isn't a terminal session (e.g. an offloaded `outputRef`)
+ *   falls back to the preview layout — never hide evidence we cannot condense.
  * - **Summary / sub-agent** (read / list / search / delete / think, and
  *   sub-agent delegations): a chevron-gated `div[role=button]` header that
  *   discloses a body hidden by default — {@link ToolCallDetail}, a
@@ -86,6 +96,13 @@ export interface ToolCallItemProps {
  * content-overflow reveal — never govern the same body, which is what removes
  * the old "expand, then Show more" double control.
  *
+ * Orthogonal to the layout modes is the **chrome tier** (the density axis,
+ * stigmer#274): metadata-only categories (read / list / search / think)
+ * render as quiet unboxed lines — no card frame — while content-bearing
+ * categories keep their cards. A quiet row escalates to a card while gated
+ * or failed; its disclosed body renders under a light left rail instead of a
+ * border. See {@link ToolChrome}.
+ *
  * Shows category-aware labels (e.g., "Shell", "Read", "Edit") with
  * the primary argument as a subtitle, a category-specific icon, and
  * an inline approval decision badge when applicable.
@@ -110,11 +127,18 @@ export const ToolCallItem = memo(function ToolCallItem({
   useRenderTracer("ToolCallItem", { status: toolCall.status, id: toolCall.id });
 
   const status = mapToolCallStatus(toolCall);
+  const isRunning = status === "running";
+  // Success is the silent default: a completed row renders NO status icon —
+  // a green check on every settled row teaches the eye to ignore status
+  // entirely, so state is shown only when it says something (running, gated,
+  // failed, interrupted). Failure shouts; success is quiet (stigmer#274).
   const StatusIcon = STATUS_ICON[status];
-  const duration = formatDuration(toolCall.startedAt, toolCall.completedAt);
+  // Header chips only when the duration carries information (>= 1s); the
+  // sub-second chips were noise pinned to the least interesting rows.
+  const duration = formatHeaderDuration(toolCall.startedAt, toolCall.completedAt);
   const isSubAgent = subAgentExecution != null;
 
-  const { category, label, primaryArg, result, resultSummary, disclosure } =
+  const { category, label, primaryArg, result, resultSummary, disclosure, chrome } =
     useToolPresentation(toolCall);
   const CategoryIcon = CATEGORY_ICON[category];
 
@@ -122,13 +146,29 @@ export const ToolCallItem = memo(function ToolCallItem({
   // or null. Drives the inline approval panel and forces the row open.
   const approval = useApproval(toolCall.id);
 
-  // The card-level disclosure for *summary* rows (preview rows ignore it — their
-  // body is always visible). Force-open only while the row carries live or
-  // actionable content: while it runs, or while it awaits approval; a manual
-  // toggle takes over from there. Called unconditionally to honour the rules of
-  // hooks even though preview rows do not read `expanded`.
+  // Tail rows (shell): a settled failure keeps the row open — the error output
+  // is the content the user needs next, so it must never settle into a dimmed
+  // teaser. Detected on the result, not just the status: a command that
+  // "completed" with a non-zero exit is a failure to the reader.
+  const isTailCategory = !isSubAgent && disclosure === "tail";
+  const tailFailed =
+    isTailCategory &&
+    (toolCall.status === ToolCallStatus.TOOL_CALL_FAILED ||
+      result.type === "error" ||
+      (result.type === "terminal" &&
+        result.exitCode !== undefined &&
+        result.exitCode !== 0));
+
+  // The card-level disclosure for *summary* and *tail* rows (preview rows
+  // ignore it — their body is always visible). Force-open only while the row
+  // carries live or actionable content: while it runs, while it awaits
+  // approval, or (tail rows) while it shows a failure; a manual toggle takes
+  // over from there. Called unconditionally to honour the rules of hooks even
+  // though preview rows do not read `expanded`.
   const autoOpen =
-    toolCall.status === ToolCallStatus.TOOL_CALL_RUNNING || approval != null;
+    toolCall.status === ToolCallStatus.TOOL_CALL_RUNNING ||
+    approval != null ||
+    tailFailed;
   const [expanded, handleToggle] = useAutoDisclosure(autoOpen, {
     initialOpen: defaultExpanded || autoOpen,
   });
@@ -165,6 +205,24 @@ export const ToolCallItem = memo(function ToolCallItem({
   const gateAccent =
     approval != null ? (category === "delete" ? "destructive" : "warning") : null;
 
+  // The chrome tier (the density axis, stigmer#274): metadata-only rows
+  // (read / list / search / think) render as quiet unboxed lines — no card
+  // frame — so the conversation reads as prose with quiet evidence attached.
+  // A row escalates to a card while it carries something a bare line cannot:
+  // a pending gate (the decision surface, including its accent) or a failure
+  // (error output is content). Running deliberately does NOT escalate — a
+  // quiet row's in-flight state rides its label and status glyph, not a
+  // frame. Nested rows (inside an expanded fold chip) stay divider rows:
+  // their container owns the frame.
+  const rowFailed =
+    toolCall.status === ToolCallStatus.TOOL_CALL_FAILED ||
+    result.type === "error";
+  const variant: ThreadCardVariant = !bordered
+    ? "row"
+    : chrome === "quiet" && !isSubAgent && approval == null && !rowFailed
+      ? "quiet"
+      : "card";
+
   // Completed/skipped Read items are non-expandable — the clickable
   // path in the row is the complete information. Failed reads remain
   // expandable to show the error.
@@ -205,12 +263,14 @@ export const ToolCallItem = memo(function ToolCallItem({
         </span>
       )}
 
-      <span
-        className={cn("stg:shrink-0", STATUS_COLOR[status])}
-        aria-hidden="true"
-      >
-        <StatusIcon />
-      </span>
+      {StatusIcon && (
+        <span
+          className={cn("stg:shrink-0", STATUS_COLOR[status])}
+          aria-hidden="true"
+        >
+          <StatusIcon />
+        </span>
+      )}
 
       {duration && (
         <span className="stg:shrink-0 stg:tabular-nums stg:text-muted-foreground">
@@ -223,7 +283,7 @@ export const ToolCallItem = memo(function ToolCallItem({
   if (isNonExpandableRead) {
     return (
       <ThreadCardShell
-        bordered={bordered}
+        variant={variant}
         accent={gateAccent}
         cursorTarget="tool-call-row"
         className={className}
@@ -260,13 +320,24 @@ export const ToolCallItem = memo(function ToolCallItem({
   const subtitleIsFilePath =
     !isSubAgent && primaryArg != null && isFileCategory(category);
 
-  // Preview categories (shell, edit, write, fetch, web-search, unknown, mcp)
-  // render their body ALWAYS — Cursor-style "previews aren't collapsible" — so
-  // no header chevron competes with the body's own in-place reveal. Summary
+  // A tail row condenses only a terminal session. While gated it renders like
+  // preview — decision actions are never hidden behind a chevron — and any
+  // other result shape (an offloaded outputRef, bare error text) falls back to
+  // preview too: never hide evidence the tail cannot honestly condense.
+  const tailSession =
+    isTailCategory && approval == null && result.type === "terminal"
+      ? result
+      : null;
+
+  // Preview categories (edit, write, fetch, web-search, unknown, mcp) render
+  // their body ALWAYS — Cursor-style "previews aren't collapsible" — so no
+  // header chevron competes with the body's own in-place reveal. Summary
   // categories and sub-agents keep the chevron: their body is genuinely hidden
   // by default, so the chevron has a real job. The two disclosure axes
   // (card-level chevron vs. content-overflow reveal) never govern one body.
-  const isPreviewCategory = !isSubAgent && disclosure === "preview";
+  const isPreviewLayout =
+    !isSubAgent &&
+    (disclosure === "preview" || (isTailCategory && tailSession == null));
 
   // The disclosed body, shared by both layouts: a pending gate decides inline,
   // a sub-agent shows its delegation, otherwise the category detail.
@@ -298,7 +369,15 @@ export const ToolCallItem = memo(function ToolCallItem({
       </span>
 
       <span className="stg:min-w-0 stg:flex-1 stg:flex stg:items-baseline stg:gap-1.5 stg:overflow-hidden">
-        <span className="stg:shrink-0 stg:font-medium stg:text-foreground">
+        {/* While the call runs, the label carries the ambient-liveness sweep
+            (stigmer#277) — the shimmer class owns `color`, so it replaces
+            (never joins) the static color utility. */}
+        <span
+          className={cn(
+            "stg:shrink-0 stg:font-medium",
+            isRunning ? "stgm-shimmer-label" : "stg:text-foreground",
+          )}
+        >
           {displayLabel}
         </span>
         {subtitleIsFilePath && primaryArg ? (
@@ -340,20 +419,56 @@ export const ToolCallItem = memo(function ToolCallItem({
 
   // Preview layout: a plain (non-button) header above an always-visible body.
   // The body renders only when it has something to show — a pending gate, or a
-  // non-empty result — so a no-output shell (which normalizes to an `empty`
-  // result) stays a clean one-line row, never an empty padded box.
-  if (isPreviewCategory) {
+  // non-empty result — so a tool that produced nothing stays a clean one-line
+  // row, never an empty padded box.
+  if (isPreviewLayout) {
     const showBody = approval != null || result.type !== "empty";
     return (
       <ThreadCardShell
-        bordered={bordered}
+        variant={variant}
         accent={gateAccent}
         cursorTarget="tool-call-row"
         className={className}
       >
         <ThreadCardHeader>{headerInner}</ThreadCardHeader>
         {showBody && (
+          <ThreadCardBody cursorTarget="tool-preview" rail={variant === "quiet"}>
+            {body}
+          </ThreadCardBody>
+        )}
+      </ThreadCardShell>
+    );
+  }
+
+  // Tail layout: a chevron-gated header whose body is never fully hidden —
+  // expanded it is the live/full terminal session, collapsed it is the dimmed
+  // TerminalTail teaser. useAutoDisclosure keeps it open while the command
+  // runs and settles a *successful* session closed (tailFailed holds a failed
+  // one open); a manual toggle always wins.
+  if (tailSession) {
+    return (
+      <ThreadCardShell
+        variant={variant}
+        accent={gateAccent}
+        cursorTarget="tool-call-row"
+        className={className}
+      >
+        <ThreadCardHeader
+          gesture={{ kind: "expand", expanded, onToggle: handleToggle }}
+        >
+          {headerInner}
+        </ThreadCardHeader>
+        {expanded ? (
           <ThreadCardBody cursorTarget="tool-preview">{body}</ThreadCardBody>
+        ) : (
+          <ThreadCardBody>
+            <TerminalTail
+              command={tailSession.command}
+              stdout={tailSession.stdout}
+              stderr={tailSession.stderr}
+              exitCode={tailSession.exitCode}
+            />
+          </ThreadCardBody>
         )}
       </ThreadCardShell>
     );
@@ -364,7 +479,7 @@ export const ToolCallItem = memo(function ToolCallItem({
   // header with Enter/Space keyboard parity and the chevron.
   return (
     <ThreadCardShell
-      bordered={bordered}
+      variant={variant}
       accent={gateAccent}
       cursorTarget="tool-call-row"
       className={className}
@@ -373,7 +488,9 @@ export const ToolCallItem = memo(function ToolCallItem({
         {headerInner}
       </ThreadCardHeader>
 
-      {expanded && <ThreadCardBody>{body}</ThreadCardBody>}
+      {expanded && (
+        <ThreadCardBody rail={variant === "quiet"}>{body}</ThreadCardBody>
+      )}
     </ThreadCardShell>
   );
 });
@@ -595,11 +712,14 @@ function McpPlugIcon() {
 // Status icons — the shared thread-card glyph set (T05)
 // ---------------------------------------------------------------------------
 
-const STATUS_ICON: Record<ItemStatus, () => React.JSX.Element> = {
+// `completed` is deliberately iconless — success is the silent default, so
+// the states that remain visible (spinner, clock, cross, slash) all carry
+// real signal (stigmer#274).
+const STATUS_ICON: Record<ItemStatus, (() => React.JSX.Element) | null> = {
   running: SpinnerIcon,
   waiting: ClockIcon,
   failed: XCircleIcon,
-  completed: CheckCircleIcon,
+  completed: null,
   pending: DotIcon,
   interrupted: SlashCircleIcon,
 };

package/src/execution/ToolRunGroup.tsx

@@ -12,6 +12,7 @@ import { useAutoDisclosure } from "../internal/useAutoDisclosure.js";
 import { ApprovalContext } from "./ApprovalContext.js";
 import { ToolCallItem, CATEGORY_ICON } from "./ToolCallItem.js";
 import type { ToolCategory } from "./tool-categories.js";
+import { SpinnerIcon } from "../internal/thread-card/glyphs.js";
 
 /** Props for {@link ToolRunGroup}. */
 export interface ToolRunGroupProps {
@@ -59,8 +60,9 @@ export const ToolRunGroup = memo(function ToolRunGroup({
   useRenderTracer("ToolRunGroup", { category, count: toolCalls.length });
 
   const status = deriveAggregateStatus(toolCalls);
+  const isShimmering = status === "running";
   const isActive =
-    status === "running" || status === "waiting" || status === "pending";
+    isShimmering || status === "waiting" || status === "pending";
 
   // A gate raised inside a folded run must be reachable without a click. Reads
   // are ungated by default, but a presenter override (or future policy) could
@@ -87,11 +89,12 @@ export const ToolRunGroup = memo(function ToolRunGroup({
       role="group"
       aria-label={label}
       data-cursor-target="tool-run-group"
-      className={cn(
-        "stg:rounded-lg stg:border stg:border-border-prominent stg:overflow-hidden",
-        className,
-      )}
+      className={className}
     >
+      {/* Quiet chrome (stigmer#274): the folded run is metadata-only by
+          construction (its categories are the quiet set), so the chip renders
+          as an unboxed line — same tier as the lone read/list/search rows it
+          folds — never a bordered card shouting over the conversation. */}
       <button
         type="button"
         aria-expanded={expanded}
@@ -99,26 +102,36 @@ export const ToolRunGroup = memo(function ToolRunGroup({
         className={cn(
           "stg:flex stg:w-full stg:cursor-pointer stg:items-center stg:gap-2 stg:px-2.5 stg:py-1.5 stg:text-left stg:text-xs stg:text-muted-foreground stg:transition-colors",
           "stg:hover:bg-muted-subtle",
-          // ring-inset so the card's overflow-hidden does not clip the focus ring.
           "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-inset stg:focus-visible:ring-ring",
         )}
       >
         <span className="stg:shrink-0 stg:text-muted-foreground" aria-hidden="true">
           <Icon />
         </span>
-        <span className="stg:min-w-0 stg:flex-1 stg:truncate stg:font-medium stg:text-foreground">
+        {/* A running fold carries the ambient-liveness sweep on its label
+            (stigmer#277); the shimmer class owns `color`, so it replaces the
+            static color utility rather than fighting it. */}
+        <span
+          className={cn(
+            "stg:min-w-0 stg:flex-1 stg:truncate stg:font-medium",
+            isShimmering ? "stgm-shimmer-label" : "stg:text-foreground",
+          )}
+        >
           {label}
         </span>
-        <span className={cn("stg:shrink-0", STATUS_COLOR[status])} aria-hidden="true">
-          <StatusIcon />
-        </span>
+        {StatusIcon && (
+          <span className={cn("stg:shrink-0", STATUS_COLOR[status])} aria-hidden="true">
+            <StatusIcon />
+          </span>
+        )}
         <ChevronIcon expanded={expanded} />
       </button>
 
       {expanded && (
-        <div className="stg:border-t stg:border-border-muted">
-          {/* The chip is already the card; its children render as
-              divider-separated rows (bordered={false}) to avoid a card-in-a-card. */}
+        // With no card frame, the disclosed rows sit under a light left rail
+        // (the quiet-tier body containment, mirroring ThreadCardBody's rail)
+        // as divider-separated rows — their container owns the frame.
+        <div className="stg:ml-1.5 stg:border-l-2 stg:border-border-muted stg:pl-2">
           {toolCalls.map((tc) => (
             <ToolCallItem key={tc.id || tc.name} toolCall={tc} bordered={false} />
           ))}
@@ -228,11 +241,13 @@ const STATUS_COLOR: Record<AggregateStatus, string> = {
   pending: "stg:text-muted-foreground",
 };
 
-const STATUS_ICON: Record<AggregateStatus, () => React.JSX.Element> = {
+// `completed` is deliberately iconless — success is the silent default,
+// matching the tool rows' own status vocabulary (stigmer#274).
+const STATUS_ICON: Record<AggregateStatus, (() => React.JSX.Element) | null> = {
   running: SpinnerIcon,
   waiting: ClockIcon,
   failed: XCircleIcon,
-  completed: CheckCircleIcon,
+  completed: null,
   pending: DotIcon,
 };
 
@@ -240,14 +255,6 @@ const STATUS_ICON: Record<AggregateStatus, () => React.JSX.Element> = {
 // Inline SVG icons — kept inline for SDK independence (codebase pattern)
 // ---------------------------------------------------------------------------
 
-function SpinnerIcon() {
-  return (
-    <svg width="10" height="10" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" className="stg:animate-spin">
-      <path d="M6 1.5A4.5 4.5 0 1 1 1.5 6" strokeLinecap="round" />
-    </svg>
-  );
-}
-
 function ClockIcon() {
   return (
     <svg width="10" height="10" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
@@ -257,15 +264,6 @@ function ClockIcon() {
   );
 }
 
-function CheckCircleIcon() {
-  return (
-    <svg width="10" height="10" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-      <circle cx="6" cy="6" r="4.5" />
-      <path d="M4 6L5.5 7.5L8 4.5" />
-    </svg>
-  );
-}
-
 function XCircleIcon() {
   return (
     <svg width="10" height="10" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">

package/src/execution/WriteBackCard.tsx

@@ -1,12 +1,13 @@
 "use client";
 
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback } 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 { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 import { TruncatedText } from "../internal/truncated-text.js";
+import { useCopyFeedback } from "../internal/useCopyFeedback.js";
 import {
   parseDiffStatSummary,
   trailingDiffStatLine,
@@ -202,9 +203,6 @@ function PullRequestRow({ url, number }: { url: string; number: number }) {
 // 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,
@@ -212,27 +210,10 @@ function BranchRow({
   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 { copy, copied } = useCopyFeedback();
   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]);
+    void copy(branchName);
+  }, [copy, branchName]);
 
   return (
     <div className="stg:group stg:flex stg:items-stretch">

package/src/execution/__tests__/MessageEntry-copy.test.tsx

@@ -0,0 +1,125 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, cleanup, fireEvent, waitFor } from "@testing-library/react";
+import { create } from "@bufbuild/protobuf";
+import { AgentMessageSchema } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/message_pb";
+import { MessageType } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+
+import { MessageEntry } from "../MessageEntry";
+
+// ---------------------------------------------------------------------------
+// Per-message copy affordance (stigmer/stigmer#278): every settled human and
+// AI message carries a quiet copy control that writes the message's text to
+// the clipboard, with transient "Copied" feedback. The affordance is
+// hover-revealed but always in the DOM (keyboard/screen-reader reachable).
+// ---------------------------------------------------------------------------
+
+afterEach(() => {
+  cleanup();
+  vi.unstubAllGlobals();
+});
+
+function message(type: MessageType, content: string, isStreaming = false) {
+  return create(AgentMessageSchema, { type, content, isStreaming });
+}
+
+function stubClipboard() {
+  const writeText = vi.fn(() => Promise.resolve());
+  vi.stubGlobal("navigator", { clipboard: { writeText } });
+  return writeText;
+}
+
+describe("MessageEntry copy affordance", () => {
+  it("copies a human message's text on click and flips to Copied feedback", async () => {
+    const writeText = stubClipboard();
+    render(
+      <MessageEntry
+        message={message(MessageType.MESSAGE_HUMAN, "run the deploy again")}
+      />,
+    );
+
+    fireEvent.click(screen.getByLabelText("Copy message"));
+    expect(writeText).toHaveBeenCalledExactlyOnceWith("run the deploy again");
+
+    // The affordance answers with its transient feedback state.
+    await waitFor(() => {
+      expect(screen.getByLabelText("Copied")).toBeTruthy();
+    });
+  });
+
+  it("copies an AI message's markdown — formatting characters included", () => {
+    const writeText = stubClipboard();
+    const md = "## Plan\n\n- step **one**\n- step `two`";
+    render(<MessageEntry message={message(MessageType.MESSAGE_AI, md)} />);
+
+    fireEvent.click(screen.getByLabelText("Copy message"));
+    expect(writeText).toHaveBeenCalledExactlyOnceWith(md);
+  });
+
+  it("copies the fence-unwrapped markdown the reader actually sees", () => {
+    // A model that wraps its whole reply in a ```markdown fence renders
+    // unwrapped (MessageEntry's render seam); the copy must match the render,
+    // not re-wrap what the user is looking at.
+    const writeText = stubClipboard();
+    render(
+      <MessageEntry
+        message={message(MessageType.MESSAGE_AI, "```markdown\n# Title\nbody\n```")}
+      />,
+    );
+
+    fireEvent.click(screen.getByLabelText("Copy message"));
+    expect(writeText).toHaveBeenCalledExactlyOnceWith("# Title\nbody");
+  });
+
+  it("offers no copy while an AI message is still streaming", () => {
+    stubClipboard();
+    render(
+      <MessageEntry
+        message={message(MessageType.MESSAGE_AI, "partial answer…", true)}
+      />,
+    );
+    expect(screen.queryByLabelText("Copy message")).toBeNull();
+  });
+
+  it("offers no copy on system messages", () => {
+    stubClipboard();
+    render(
+      <MessageEntry
+        message={message(MessageType.MESSAGE_SYSTEM, "execution resumed")}
+      />,
+    );
+    expect(screen.queryByLabelText("Copy message")).toBeNull();
+  });
+
+  it("keeps copy and edit as siblings on a human bubble when editing is wired", () => {
+    stubClipboard();
+    const onEdit = vi.fn();
+    render(
+      <MessageEntry
+        message={message(MessageType.MESSAGE_HUMAN, "tweak this")}
+        onEdit={onEdit}
+      />,
+    );
+
+    // Both affordances present and independently operable.
+    expect(screen.getByLabelText("Copy message")).toBeTruthy();
+    fireEvent.click(screen.getByLabelText("Edit message"));
+    expect(onEdit).toHaveBeenCalledTimes(1);
+  });
+
+  it("claims no copy when the clipboard write is rejected", async () => {
+    // Insecure context / denied permission: the button must not flash
+    // "Copied" for a copy that never happened.
+    const writeText = vi.fn(() => Promise.reject(new Error("denied")));
+    vi.stubGlobal("navigator", { clipboard: { writeText } });
+    render(
+      <MessageEntry message={message(MessageType.MESSAGE_HUMAN, "hello")} />,
+    );
+
+    fireEvent.click(screen.getByLabelText("Copy message"));
+    await waitFor(() => {
+      expect(writeText).toHaveBeenCalledTimes(1);
+    });
+    expect(screen.queryByLabelText("Copied")).toBeNull();
+    expect(screen.getByLabelText("Copy message")).toBeTruthy();
+  });
+});