@stigmer/react 3.0.9-dev.20260616060535 → 3.1.1

package/src/execution/ApprovalCard.tsx

@@ -1,15 +1,28 @@
 "use client";
 
 import { memo, useCallback, useEffect, useMemo, useState } from "react";
+import type { ReactNode } from "react";
 import type { PendingApproval } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/approval_pb";
-import { ApprovalAction } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+import { ApprovalAction, ToolKind } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
 import { cn } from "@stigmer/theme";
+import {
+  describeApprovalPolicySource,
+  isInformativePolicySource,
+} from "./approval-provenance.js";
 import {
   resolveToolCategoryFromKind,
   extractPrimaryArgFromPreview,
-} from "./tool-categories";
-import { CATEGORY_ICON } from "./ToolCallItem";
-import { ToolArgsView } from "./ToolArgsView";
+  extractWriteContentFromPreview,
+  isFileCategory,
+  type ToolCategory,
+} from "./tool-categories.js";
+import { CATEGORY_ICON } from "./ToolCallItem.js";
+import { ToolArgsView } from "./ToolArgsView.js";
+import { EmptyChangeNotice } from "./EmptyChangeNotice.js";
+import { FilePathLink } from "./FilePathLink.js";
+import { DecisionButton } from "../internal/DecisionButton.js";
+import { InCardDecisionError } from "../internal/InCardDecisionError.js";
+import { useElapsedSince, formatElapsed } from "../internal/useElapsedSince.js";
 
 /** Props for {@link ApprovalCard}. */
 export interface ApprovalCardProps {
@@ -24,6 +37,14 @@ export interface ApprovalCardProps {
   readonly onSubmit: (action: ApprovalAction, comment?: string) => void;
   /** True while the RPC for this specific tool call is in flight. */
   readonly isSubmitting?: boolean;
+  /**
+   * This gate's last failed decision, or `null` — surfaced in-card, beside the
+   * action buttons (the optimistic spinner reverts on failure, so this explains
+   * the snap-back). A thread can hold many gates; the error must name the one it
+   * belongs to, which a single global banner cannot do. Supply the entry from
+   * {@link useSubmitApproval}'s `errorsByToolCallId` for this `toolCallId`.
+   */
+  readonly error?: Error | null;
   /** Additional CSS class names for the root container. */
   readonly className?: string;
 }
@@ -35,9 +56,11 @@ export interface ApprovalCardProps {
  * The compact header row matches the ToolCallItem layout:
  *   [CategoryIcon] Label  primaryArg  [⏳ waiting Xm]
  *
- * Arguments are rendered through the shared {@link ToolArgsView}
- * dispatch, ensuring pixel-level parity between the approval
- * preview and the post-execution detail view.
+ * The body shows the proposed change from the tool args (the
+ * pre-execution deny-gate has no captured `FileChangeSet` yet): the
+ * write/edit content when present, an {@link EmptyChangeNotice} when
+ * only a path is known, otherwise the shared {@link ToolArgsView}
+ * dispatch, keeping pixel-level parity with the detail view.
  *
  * Wrapped in `React.memo` — structural sharing (T04) preserves the
  * `PendingApproval` reference when unchanged, so approval cards
@@ -56,32 +79,69 @@ export const ApprovalCard = memo(function ApprovalCard({
   pendingApproval,
   onSubmit,
   isSubmitting = false,
+  error = null,
   className,
 }: ApprovalCardProps) {
-  const [activeAction, setActiveAction] = useState<ApprovalAction | null>(null);
+  // Prefer the denormalized wire tool_kind (populated by the server-side
+  // PendingApproval projection); fall back to the name for legacy executions.
+  const categoryInfo = resolveToolCategoryFromKind(
+    pendingApproval.toolKind,
+    pendingApproval.toolName,
+    pendingApproval.mcpServerSlug,
+  );
 
-  const handleAction = useCallback(
-    (action: ApprovalAction) => {
-      setActiveAction(action);
-      onSubmit(action);
-    },
-    [onSubmit],
+  // Cursor-grade chrome: a thin neutral card (no amber "brown" fill), with the
+  // gate's "needs your decision" signal carried by one restrained cue — a 2px
+  // left accent bar — plus the warning-colored clock/elapsed in the header. A
+  // destructive (delete) gate keeps a red accent as a hard safety signal.
+  const accentClass =
+    categoryInfo.category === "delete"
+      ? "border-l-2 border-l-destructive"
+      : "border-l-2 border-l-warning";
+
+  return (
+    <div
+      role="alert"
+      aria-label={`Approval required for ${pendingApproval.toolName}`}
+      className={cn(
+        "rounded-lg border border-border-prominent",
+        accentClass,
+        className,
+      )}
+    >
+      <ApprovalCardHeader pendingApproval={pendingApproval} bordered />
+      <ApprovalCardBody
+        pendingApproval={pendingApproval}
+        onSubmit={onSubmit}
+        isSubmitting={isSubmitting}
+        error={error}
+      />
+    </div>
   );
+});
 
-  useEffect(() => {
-    if (!isSubmitting) {
-      setActiveAction(null);
-    }
-  }, [isSubmitting]);
+/** Props for {@link ApprovalCardHeader}. */
+export interface ApprovalCardHeaderProps {
+  /** The pending approval to summarize. */
+  readonly pendingApproval: PendingApproval;
+  /** Adds a bottom divider, for use above {@link ApprovalCardBody}. */
+  readonly bordered?: boolean;
+}
 
-  // Prefer the denormalized wire tool_kind (populated by the server-side
-  // PendingApproval projection); fall back to the name for legacy executions.
+/**
+ * The compact summary row of an approval — `[icon] Label primaryArg [via sub]
+ * [⏳ Xm]`. Used as the standalone {@link ApprovalCard}'s header. Not rendered
+ * inline on a {@link ToolCallItem}, whose own row already serves as the header.
+ */
+export function ApprovalCardHeader({
+  pendingApproval,
+  bordered = false,
+}: ApprovalCardHeaderProps) {
   const categoryInfo = resolveToolCategoryFromKind(
     pendingApproval.toolKind,
     pendingApproval.toolName,
     pendingApproval.mcpServerSlug,
   );
-
   const CategoryIcon = CATEGORY_ICON[categoryInfo.category];
 
   const primaryArg = useMemo(
@@ -90,14 +150,114 @@ export const ApprovalCard = memo(function ApprovalCard({
         pendingApproval.toolName,
         pendingApproval.argsPreview,
         pendingApproval.mcpServerSlug,
+        pendingApproval.toolKind,
       ),
     [
       pendingApproval.toolName,
       pendingApproval.argsPreview,
       pendingApproval.mcpServerSlug,
+      pendingApproval.toolKind,
     ],
   );
 
+  return (
+    <div
+      className={cn(
+        "flex items-center gap-2 px-2.5 py-1.5 text-xs",
+        bordered && "border-b border-border-muted",
+      )}
+    >
+      <span className="shrink-0 text-warning" aria-hidden="true">
+        <CategoryIcon />
+      </span>
+
+      <span className="min-w-0 flex-1 flex items-center gap-1.5 overflow-hidden">
+        <span className="shrink-0 font-medium text-foreground">
+          {categoryInfo.label}
+        </span>
+        {primaryArg &&
+          categoryInfo.category !== "shell" &&
+          (isFileCategory(categoryInfo.category) ? (
+            // A file tool's primary arg is a path — render it filename-first
+            // with the full path on hover, matching the ToolCallItem header.
+            <FilePathLink
+              path={primaryArg}
+              className="min-w-0 text-xs text-muted-foreground"
+            />
+          ) : (
+            // Shell is the exception: its command is shown in the body's
+            // terminal session, so the header stays minimal (icon + label).
+            <span className="min-w-0 truncate font-mono text-muted-foreground">
+              {primaryArg}
+            </span>
+          ))}
+      </span>
+
+      {pendingApproval.fromSubAgent && pendingApproval.subAgentName && (
+        <span className="shrink-0 rounded bg-muted px-1 py-0.5 font-mono text-muted-foreground">
+          via {pendingApproval.subAgentSubject || pendingApproval.subAgentName}
+        </span>
+      )}
+
+      <WaitingDuration requestedAt={pendingApproval.requestedAt} />
+
+      <span className="shrink-0 text-warning" aria-hidden="true">
+        <ClockIcon />
+      </span>
+    </div>
+  );
+}
+
+/** Props for {@link ApprovalCardBody}. */
+export interface ApprovalCardBodyProps {
+  /** The pending approval to render a decision panel for. */
+  readonly pendingApproval: PendingApproval;
+  /** Called when the user picks Approve / Approve-all / Skip / Reject. */
+  readonly onSubmit: (action: ApprovalAction, comment?: string) => void;
+  /** True while the RPC for this tool call is in flight. */
+  readonly isSubmitting?: boolean;
+  /** This gate's last failed decision, or `null` — surfaced in-card below the actions. */
+  readonly error?: Error | null;
+  /** Additional CSS class names for the body container. */
+  readonly className?: string;
+}
+
+/**
+ * The decision panel of an approval: the optional message and gate reason, the
+ * file-changes / args preview, and the action buttons. Reused in two places —
+ * the standalone {@link ApprovalCard} (with {@link ApprovalCardHeader} above
+ * it) and inline inside a gated {@link ToolCallItem}'s expanded panel, where
+ * the item's own row is the header. One body, identical preview in both.
+ */
+export function ApprovalCardBody({
+  pendingApproval,
+  onSubmit,
+  isSubmitting = false,
+  error = null,
+  className,
+}: ApprovalCardBodyProps) {
+  const [activeAction, setActiveAction] = useState<ApprovalAction | null>(null);
+
+  const handleAction = useCallback(
+    (action: ApprovalAction) => {
+      setActiveAction(action);
+      onSubmit(action);
+    },
+    [onSubmit],
+  );
+
+  useEffect(() => {
+    if (!isSubmitting) {
+      setActiveAction(null);
+    }
+  }, [isSubmitting]);
+
+  const categoryInfo = resolveToolCategoryFromKind(
+    pendingApproval.toolKind,
+    pendingApproval.toolName,
+    pendingApproval.mcpServerSlug,
+  );
+
   const parsedArgs = useMemo<Record<string, unknown> | null>(() => {
     if (!pendingApproval.argsPreview) return null;
     try {
@@ -111,198 +271,211 @@ export const ApprovalCard = memo(function ApprovalCard({
     }
   }, [pendingApproval.argsPreview]);
 
-  const borderClass =
-    categoryInfo.category === "delete"
-      ? "border-destructive/30 bg-destructive-subtle"
-      : "border-warning/30 bg-warning/5";
+  // APPROVE_ALL now grants a run-lifetime lease scoped to the clicked tool's
+  // CLASS — its MCP server for an MCP tool, else its approval category (where
+  // write and edit collapse to one "file edits" class, mirroring the runner's
+  // toolApprovalCategory). The label must name that exact class so the button
+  // never over-promises: it does NOT silence other classes.
+  const approveAllLabel = useMemo(
+    () => buildApproveAllLabel(categoryInfo.category, pendingApproval.mcpServerSlug),
+    [categoryInfo.category, pendingApproval.mcpServerSlug],
+  );
 
-  return (
-    <div
-      role="alert"
-      aria-label={`Approval required for ${pendingApproval.toolName}`}
-      className={cn("rounded-lg border", borderClass, className)}
-    >
-      {/* Compact header row — matches ToolCallItem layout */}
-      <div
-        className={cn(
-          "flex items-center gap-2 px-2.5 py-1.5 text-xs",
-          "border-b border-border-muted",
-        )}
-      >
-        <span className="shrink-0 text-warning" aria-hidden="true">
-          <CategoryIcon />
-        </span>
+  // Why-gated: the authorization provenance the server projected onto the
+  // PendingApproval (approval_policy_source). Smart-suppressed — the everyday
+  // "this category needs approval" default is noise next to the action it gates,
+  // so only a genuinely informative provenance (an explicit override, a
+  // server-marked destructive tighten) earns a line; the full phrase is on hover.
+  const gateReason = useMemo(
+    () => describeApprovalPolicySource(pendingApproval.approvalPolicySource),
+    [pendingApproval.approvalPolicySource],
+  );
+  const showGateReason =
+    gateReason != null &&
+    isInformativePolicySource(pendingApproval.approvalPolicySource);
 
-        <span className="min-w-0 flex-1 flex items-baseline gap-1.5 overflow-hidden">
-          <span className="shrink-0 font-medium text-foreground">
-            {categoryInfo.label}
-          </span>
-          {primaryArg && (
-            <span className="min-w-0 truncate font-mono text-muted-foreground">
-              {primaryArg}
-            </span>
-          )}
-        </span>
+  // The runner's message for a file tool ("Write file: <path>") only restates
+  // the header + diff, so it is suppressed; a message is shown only when it adds
+  // information (e.g. an MCP tool's human-authored prompt). Shell shows its
+  // command in the args view, never a message.
+  const showMessage =
+    Boolean(pendingApproval.message) &&
+    categoryInfo.category !== "shell" &&
+    !isFileCategory(categoryInfo.category);
 
-        {pendingApproval.fromSubAgent && pendingApproval.subAgentName && (
-          <span className="shrink-0 rounded bg-muted px-1 py-0.5 font-mono text-muted-foreground">
-            via {pendingApproval.subAgentSubject || pendingApproval.subAgentName}
-          </span>
-        )}
+  const isWriteEdit =
+    categoryInfo.category === "write" || categoryInfo.category === "edit";
 
-        <WaitingDuration requestedAt={pendingApproval.requestedAt} />
+  // The proposed write/edit content from the args preview, when the gate carries
+  // no authoritative file_changes capture. Drives the three-way fallback below.
+  const writeContent = useMemo(
+    () => extractWriteContentFromPreview(pendingApproval.argsPreview),
+    [pendingApproval.argsPreview],
+  );
 
-        <span className="shrink-0 text-warning" aria-hidden="true">
-          <ClockIcon />
-        </span>
-      </div>
+  // The decision-relevant preview. The pre-execution deny-gate is an
+  // apply-then-review exception: the change has not been captured yet (the tool
+  // is DENIED, awaiting approval), so there is no `FileChangeSet` to render.
+  // Instead the gate shows the PROPOSED change from the tool args: the write/edit
+  // content when the args carry it (path suppressed — the header has it); a
+  // neutral "no preview" notice when only a path is known (the resume placeholder
+  // case); otherwise the shared args view for non-file tools. (Captured
+  // file-review — the apply-then-review path — renders via FileReviewCard, not
+  // here.)
+  let preview: ReactNode = null;
+  if (isWriteEdit && writeContent === null) {
+    // No proposed content in the args. A whole-file write is modeled as a create
+    // throughout the runner (FILE_WRITE -> CREATE), so the authoritative toolKind
+    // lets the gate say plainly that a new file is being written rather than the
+    // misleading non-committal "no preview". An edit (modify) cannot be proven a
+    // create, so it keeps the non-committal notice.
+    const kind =
+      pendingApproval.toolKind === ToolKind.FILE_WRITE ? "create" : "no-preview";
+    preview = <EmptyChangeNotice kind={kind} />;
+  } else if (parsedArgs) {
+    preview = (
+      <ToolArgsView
+        toolName={pendingApproval.toolName}
+        args={parsedArgs}
+        mcpServerSlug={pendingApproval.mcpServerSlug}
+        showFileName={!isWriteEdit}
+      />
+    );
+  }
 
-      {/* Body */}
-      <div className="px-3 py-2.5 space-y-2">
-        {pendingApproval.message && categoryInfo.category !== "shell" && (
-          <p className="text-xs text-foreground">
-            {pendingApproval.message}
-          </p>
-        )}
-
-        {/* Category-specific args preview — shared with ToolCallDetail */}
-        {parsedArgs && (
-          <ToolArgsView
-            toolName={pendingApproval.toolName}
-            args={parsedArgs}
-            mcpServerSlug={pendingApproval.mcpServerSlug}
-          />
-        )}
-
-        {/* Action buttons */}
-        <div className="flex items-center gap-2 pt-1">
-          <ActionButton
-            label="Approve"
-            action={ApprovalAction.APPROVE}
-            activeAction={activeAction}
-            isSubmitting={isSubmitting}
-            onClick={handleAction}
-            variant="approve"
-            cursorTarget="approve-button"
-          />
-          {/* Subordinate escalation: approve this call and stop asking for the
-              rest of the run. Kept visually quieter than the primary Approve so
-              it never competes with the per-call decision the user is making. */}
-          <ActionButton
-            label="Approve & don't ask again"
-            action={ApprovalAction.APPROVE_ALL}
-            activeAction={activeAction}
-            isSubmitting={isSubmitting}
-            onClick={handleAction}
-            variant="approveAll"
-            cursorTarget="approve-all-button"
-          />
-          <ActionButton
-            label="Skip"
-            action={ApprovalAction.SKIP}
-            activeAction={activeAction}
-            isSubmitting={isSubmitting}
-            onClick={handleAction}
-            variant="skip"
-          />
-          <ActionButton
-            label="Reject"
-            action={ApprovalAction.REJECT}
-            activeAction={activeAction}
-            isSubmitting={isSubmitting}
-            onClick={handleAction}
-            variant="reject"
-          />
-        </div>
-      </div>
-    </div>
-  );
-});
+  return (
+    <div className={cn("px-3 py-2.5 space-y-2", className)}>
+      {showMessage && (
+        <p className="text-xs text-foreground">{pendingApproval.message}</p>
+      )}
 
-// ---------------------------------------------------------------------------
-// Internal sub-components
-// ---------------------------------------------------------------------------
+      {preview}
 
-function ActionButton({
-  label,
-  action,
-  activeAction,
-  isSubmitting,
-  onClick,
-  variant,
-  cursorTarget,
-}: {
-  label: string;
-  action: ApprovalAction;
-  activeAction: ApprovalAction | null;
-  isSubmitting: boolean;
-  onClick: (action: ApprovalAction) => void;
-  variant: "approve" | "approveAll" | "skip" | "reject";
-  cursorTarget?: string;
-}) {
-  const isActive = activeAction === action;
-  const disabled = isSubmitting;
-
-  const variantClasses: Record<typeof variant, string> = {
-    approve: cn(
-      "bg-success text-success-foreground hover:bg-success/90",
-      "disabled:bg-success/50 disabled:text-success-foreground/70",
-    ),
-    approveAll: cn(
-      "text-success hover:bg-success/10",
-      "disabled:text-success/50",
-    ),
-    skip: cn(
-      "border border-border bg-background text-muted-foreground hover:bg-muted hover:text-foreground",
-      "disabled:bg-muted-faint disabled:text-muted-foreground-faint",
-    ),
-    reject: cn(
-      "bg-destructive text-destructive-foreground hover:bg-destructive-hover",
-      "disabled:bg-destructive-subtle0 disabled:text-destructive-foreground/70",
-    ),
-  };
+      {/* Consent stated at grant time (DD-28): approving a shell command covers
+          the files it creates or changes — when the turn's mutations all come
+          from approved commands, the file-change set is kept automatically and
+          never re-gates. A mixed turn (commands + file-tool edits) still
+          reviews everything, so this line under-promises rather than over-. */}
+      {categoryInfo.category === "shell" && (
+        <p className="text-[11px] italic text-muted-foreground">
+          Files this command creates or changes are covered by this approval —
+          they are kept automatically, with no second review.
+        </p>
+      )}
 
-  return (
-    <button
-      type="button"
-      disabled={disabled}
-      onClick={() => onClick(action)}
-      aria-label={label}
-      data-cursor-target={cursorTarget}
-      className={cn(
-        "inline-flex items-center justify-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-        "disabled:cursor-not-allowed",
-        variantClasses[variant],
+      {/* Decision actions — quiet, Cursor-grade hierarchy: one neutral-chip
+          primary (Approve), ghost Skip, ghost-danger Reject. The broad
+          run-lifetime lease (Approve all) is demoted to the far right via
+          `ml-auto` so it never competes with — or is mis-clicked for — the
+          per-call Approve (Fitts/Hick). */}
+      <div className="flex items-center gap-2 pt-1">
+        <DecisionButton
+          label="Approve"
+          variant="primary"
+          onClick={() => handleAction(ApprovalAction.APPROVE)}
+          isActive={activeAction === ApprovalAction.APPROVE}
+          isSubmitting={isSubmitting}
+          cursorTarget="approve-button"
+        />
+        <DecisionButton
+          label="Skip"
+          variant="ghost"
+          onClick={() => handleAction(ApprovalAction.SKIP)}
+          isActive={activeAction === ApprovalAction.SKIP}
+          isSubmitting={isSubmitting}
+        />
+        <DecisionButton
+          label="Reject"
+          variant="danger"
+          onClick={() => handleAction(ApprovalAction.REJECT)}
+          isActive={activeAction === ApprovalAction.REJECT}
+          isSubmitting={isSubmitting}
+        />
+        {/* Subordinate escalation: approve this call AND stop asking for THIS
+            CLASS of tool for the rest of the run (its MCP server, or its file
+            edit / delete / shell category) — other classes keep prompting. The
+            label names the leased class so the scope is never a surprise. */}
+        <DecisionButton
+          label={approveAllLabel}
+          variant="ghost"
+          onClick={() => handleAction(ApprovalAction.APPROVE_ALL)}
+          isActive={activeAction === ApprovalAction.APPROVE_ALL}
+          isSubmitting={isSubmitting}
+          className="ml-auto"
+          cursorTarget="approve-all-button"
+        />
+      </div>
+
+      {/* De-emphasized provenance, trailing the decision it explains. Only the
+          informative reasons reach here (see showGateReason); the full phrase is
+          on hover. */}
+      {showGateReason && (
+        <p
+          className="text-[11px] italic text-muted-foreground"
+          title={gateReason ?? undefined}
+          data-cursor-target="approval-gate-reason"
+        >
+          {gateReason}
+        </p>
       )}
-    >
-      {isActive && isSubmitting ? <SpinnerIcon /> : null}
-      {label}
-    </button>
+
+      {/* A failed decision is surfaced HERE, in-card, beside the actions — not
+          via the session's global banner. A thread can hold many gates (each
+          inline tool row, plus the bottom backstop), so a failure must name the
+          one it belongs to; the optimistic spinner has already reverted, and
+          this explains the snap-back. Shared with FileReviewCard. */}
+      {error && (
+        <InCardDecisionError
+          error={error}
+          leadIn="submit decision"
+          cursorTarget="approval-error"
+        />
+      )}
+    </div>
   );
 }
 
-function WaitingDuration({ requestedAt }: { requestedAt: string }) {
-  const startMs = useMemo(() => {
-    if (!requestedAt) return null;
-    const t = new Date(requestedAt).getTime();
-    return Number.isNaN(t) ? null : t;
-  }, [requestedAt]);
+// ---------------------------------------------------------------------------
+// Internal helpers
+// ---------------------------------------------------------------------------
 
-  const [elapsed, setElapsed] = useState<number | null>(null);
+/**
+ * Builds the truthful APPROVE_ALL button label for a tool's lease class.
+ *
+ * The lease an APPROVE_ALL grants is scoped to ONE class: the MCP server for an
+ * MCP tool, otherwise the approval category (write/delete/shell) — where the
+ * presentation "write" and "edit" categories collapse to a single "file edits"
+ * class, exactly as the runner's `toolApprovalCategory` collapses FILE_WRITE and
+ * FILE_EDIT to "write". The label names that class so the button never implies a
+ * broader effect than the lease actually has. The generic fallback only applies
+ * to a tool with no leasable class, which is not normally gated for approval.
+ */
+function buildApproveAllLabel(
+  category: ToolCategory,
+  mcpServerSlug: string,
+): string {
+  if (mcpServerSlug) {
+    return `Approve all ${mcpServerSlug} tools`;
+  }
+  switch (category) {
+    case "shell":
+      return "Approve all shell commands";
+    case "delete":
+      return "Approve all file deletions";
+    case "write":
+    case "edit":
+      return "Approve all file edits";
+    default:
+      return "Approve all of this kind";
+  }
+}
 
-  useEffect(() => {
-    if (startMs === null) {
-      setElapsed(null);
-      return;
-    }
-    setElapsed(Math.max(0, Date.now() - startMs));
-    const id = setInterval(() => {
-      setElapsed(Math.max(0, Date.now() - startMs));
-    }, 1000);
-    return () => clearInterval(id);
-  }, [startMs]);
+// ---------------------------------------------------------------------------
+// Internal sub-components
+// ---------------------------------------------------------------------------
 
+function WaitingDuration({ requestedAt }: { requestedAt: string }) {
+  const elapsed = useElapsedSince(requestedAt);
   if (elapsed === null) return null;
 
   return (
@@ -312,24 +485,6 @@ function WaitingDuration({ requestedAt }: { requestedAt: string }) {
   );
 }
 
-function formatElapsed(ms: number): string {
-  if (ms < 1000) return "just now";
-  const seconds = Math.floor(ms / 1000);
-  if (seconds < 60) return `${seconds}s`;
-  const minutes = Math.floor(seconds / 60);
-  const remainingSeconds = seconds % 60;
-  if (minutes < 60) {
-    return remainingSeconds > 0
-      ? `${minutes}m ${remainingSeconds}s`
-      : `${minutes}m`;
-  }
-  const hours = Math.floor(minutes / 60);
-  const remainingMinutes = minutes % 60;
-  return remainingMinutes > 0
-    ? `${hours}h ${remainingMinutes}m`
-    : `${hours}h`;
-}
-
 // ---------------------------------------------------------------------------
 // Inline SVG icons
 // ---------------------------------------------------------------------------
@@ -351,20 +506,3 @@ function ClockIcon() {
     </svg>
   );
 }
-
-function SpinnerIcon() {
-  return (
-    <svg
-      width="10"
-      height="10"
-      viewBox="0 0 12 12"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      className="animate-spin"
-      aria-hidden="true"
-    >
-      <path d="M6 1.5A4.5 4.5 0 1 1 1.5 6" strokeLinecap="round" />
-    </svg>
-  );
-}