@stigmer/react 3.12.1 → 3.12.3

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,9 +96,18 @@ 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.
+ * an inline approval decision badge when applicable. A shell row whose
+ * call carries a model-authored intent phrase is titled with that phrase
+ * instead — the command becomes the subtitle (stigmer#276).
  *
  * Wrapped in `React.memo` — structural sharing (DD-009/010) preserves
  * the `ToolCall` reference when unchanged, so a settled row skips
@@ -110,11 +129,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, intent, title, primaryArg, result, resultSummary, disclosure, chrome } =
     useToolPresentation(toolCall);
   const CategoryIcon = CATEGORY_ICON[category];
 
@@ -122,20 +148,39 @@ 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,
   });
 
+  // Sub-agents title the row with their subject; every other row titles with
+  // the resolved presentation `title` (host label override > model-authored
+  // shell intent > category label, stigmer#276).
   const displayLabel = isSubAgent
     ? subAgentExecution.subject || subAgentExecution.name || label
-    : label;
+    : title;
 
   const approvalBadge = getApprovalBadge(toolCall);
 
@@ -165,6 +210,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 +268,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 +288,7 @@ export const ToolCallItem = memo(function ToolCallItem({
   if (isNonExpandableRead) {
     return (
       <ThreadCardShell
-        bordered={bordered}
+        variant={variant}
         accent={gateAccent}
         cursorTarget="tool-call-row"
         className={className}
@@ -248,11 +313,17 @@ export const ToolCallItem = memo(function ToolCallItem({
     );
   }
 
-  // Shell shows neither a command subtitle nor an exit summary in the header —
-  // both live in the terminal session body below, so the header stays minimal
-  // (icon + label + status + duration).
-  const displaySubtitle =
-    isSubAgent || category === "shell" ? null : primaryArg;
+  // Shell headers stay minimal (icon + label + status + duration) — the
+  // command and exit summary live in the terminal session body — EXCEPT when
+  // the model authored an intent title (stigmer#276): the title then says
+  // *why*, so the command surfaces as the secondary text and a fully
+  // collapsed row still reads like a narrated log. Intent-less shell rows
+  // render byte-identically to before.
+  const displaySubtitle = isSubAgent
+    ? null
+    : category === "shell"
+      ? (intent ? primaryArg : null)
+      : primaryArg;
 
   // For file tools the subtitle is a path: render it filename-first through
   // FilePathLink (full path on hover) rather than the raw, often-absolute string
@@ -260,13 +331,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 +380,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 +430,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 +490,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 +499,9 @@ export const ToolCallItem = memo(function ToolCallItem({
         {headerInner}
       </ThreadCardHeader>
 
-      {expanded && <ThreadCardBody>{body}</ThreadCardBody>}
+      {expanded && (
+        <ThreadCardBody rail={variant === "quiet"}>{body}</ThreadCardBody>
+      )}
     </ThreadCardShell>
   );
 });
@@ -595,11 +723,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">