@schlessera/brain-ui-react 0.35.0 → 0.37.0

package/src/components/activity/activity-run-detail.tsx

@@ -2,14 +2,16 @@ import { Fragment, useEffect, useMemo, useState } from "react";
 import { ArrowLeft, ChevronRight } from "lucide-react";
 import { useShallow } from "zustand/react/shallow";
 import { isFailureOutcome, type ActivitySpan } from "@schlessera/brain-ui-sdk/protocol";
+import { TraceSteps, type TraceStep } from "@schlessera/brain-ui-kit";
 
-import { api, type ActivityRunRollup } from "../../lib/api-client.js";
+import type { ActivityRunRollup } from "../../lib/api-client.js";
 import {
   useActivityStore,
   narrativeEventsFor,
   runEvents,
   runSpans,
 } from "../../stores/activity-store.js";
+import { useBrainApi } from "../../root-context.js";
 import { cn } from "../../lib/utils.js";
 import { formatDuration, formatRelativeTime } from "../chat/tool-views.js";
 import {
@@ -20,14 +22,29 @@ import {
   formatSpanUsage,
   spanToolLabel,
 } from "./span-bits.js";
+import { RunRollupReceipt } from "./activity-views.js";
 
 /**
  * Chat-less run detail (cron runs; pruned runs show their rollup) — the full
  * view of one run: its rollup header, the span tree with per-span usage,
  * attributes and recorded events, and a raw-trace escape hatch for anything
  * the rendered view does not have an opinion about.
+ *
+ * `embedded` is the D4 desktop pane: the Actions list sits beside this view
+ * from `laptop:` up, so the back chevron only renders below that width, and
+ * from `wide:` the span tree moves out to the page's evidence rail
+ * (`RunTraceSteps`) — the same store slice, fetched once here.
  */
-export function RunDetail({ runId, onBack }: { runId: string; onBack: () => void }) {
+export function RunDetail({
+  runId,
+  onBack,
+  embedded = false,
+}: {
+  runId: string;
+  onBack: () => void;
+  embedded?: boolean;
+}) {
+  const api = useBrainApi();
   const streamed = useActivityStore(useShallow((s) => runSpans(s, runId)));
   const events = useActivityStore(useShallow((s) => runEvents(s, runId)));
   const applySnapshot = useActivityStore((s) => s.applySnapshot);
@@ -38,6 +55,10 @@ export function RunDetail({ runId, onBack }: { runId: string; onBack: () => void
 
   useEffect(() => {
     let active = true;
+    setPruned(null);
+    setRollup(null);
+    setMissing(false);
+    setRawOpen(false);
     api
       // Payload bodies are excluded from run detail by default; this view's
       // rows expand to them, so opt in.
@@ -64,7 +85,7 @@ export function RunDetail({ runId, onBack }: { runId: string; onBack: () => void
     return () => {
       active = false;
     };
-  }, [runId, applySnapshot]);
+  }, [runId, applySnapshot, api]);
 
   const root = streamed.find((s) => !s.parentSpanId);
   const title = rollup?.jobName ?? rollup?.name ?? (root ? spanToolLabel(root) : runId);
@@ -93,7 +114,10 @@ export function RunDetail({ runId, onBack }: { runId: string; onBack: () => void
         <button
           type="button"
           onClick={onBack}
-          className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-surface-raised hover:text-foreground"
+          className={cn(
+            "rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-surface-raised hover:text-foreground",
+            embedded && "laptop:hidden"
+          )}
           aria-label="Back"
         >
           <ArrowLeft className="h-4 w-4" />
@@ -108,46 +132,18 @@ export function RunDetail({ runId, onBack }: { runId: string; onBack: () => void
       <div className="mx-auto w-full max-w-3xl space-y-1 p-4">
         {missing && <p className="text-xs text-muted-foreground">Unknown run.</p>}
         {rollup && (
-          <div className="mb-2 flex flex-wrap items-center gap-x-3 gap-y-0.5 rounded-lg border border-border-subtle bg-surface px-3 py-2 text-[11px] text-muted-foreground">
-            <span className="text-foreground/80">{rollup.origin}</span>
-            {rollup.outcome && (
-              <span className={cn(isFailureOutcome(rollup.outcome) && "text-destructive")}>
-                {rollup.outcome}
-              </span>
-            )}
-            <span>{formatRelativeTime(rollup.startedAt)}</span>
-            {rollup.durationMs !== null && <span>{formatDuration(rollup.durationMs)}</span>}
-            <span>
-              list{" "}
-              <span className="font-[family-name:var(--font-mono)] text-foreground/80">
-                {formatEffectiveCost(rollup.costUsd)}
-              </span>
-            </span>
-            <span>
-              effective{" "}
-              <span className="font-[family-name:var(--font-mono)] text-foreground/80">
-                {formatEffectiveCost(
-                  rollup.effectiveCostUsd,
-                  rollup.pricingEstimate,
-                  rollup.billingMode
-                )}
-              </span>
-            </span>
-            {rollup.billingMode && (
-              <span>{rollup.billingMode === "api" ? "API billed" : "subscription billed"}</span>
-            )}
-            {rollup.pricingEstimate && <span>~ estimated rates</span>}
-            {totalUsage && (
-              <span className="font-[family-name:var(--font-mono)] text-foreground/80">
-                {totalUsage}
-              </span>
-            )}
-            {rollup.failureReason && (
-              <span className="w-full whitespace-pre-wrap break-words pt-1 text-destructive/80">
-                {rollup.failureReason}
-              </span>
-            )}
-          </div>
+          <RunRollupReceipt
+            origin={rollup.origin}
+            outcome={rollup.outcome}
+            when={formatRelativeTime(rollup.startedAt)}
+            duration={rollup.durationMs !== null ? formatDuration(rollup.durationMs) : null}
+            listCost={formatEffectiveCost(rollup.costUsd)}
+            effectiveCost={formatEffectiveCost(rollup.effectiveCostUsd, rollup.pricingEstimate, rollup.billingMode)}
+            billing={rollup.billingMode ? (rollup.billingMode === "api" ? "API billed" : "subscription billed") : null}
+            estimated={Boolean(rollup.pricingEstimate)}
+            usage={totalUsage}
+            failureReason={rollup.failureReason}
+          />
         )}
         {pruned && (
           <div className="rounded-lg border border-border-subtle bg-surface p-3 text-xs text-muted-foreground">
@@ -155,9 +151,11 @@ export function RunDetail({ runId, onBack }: { runId: string; onBack: () => void
             <pre className="mt-2 overflow-x-auto text-[11px]">{JSON.stringify(pruned, null, 2)}</pre>
           </div>
         )}
-        {streamed.map((span) => (
-          <DetailSpanRow key={span.spanId} span={span} depth={depthOf(span, streamed)} />
-        ))}
+        <div className={cn("space-y-1", embedded && "wide:hidden")}>
+          {streamed.map((span) => (
+            <DetailSpanRow key={span.spanId} span={span} depth={depthOf(span, streamed)} />
+          ))}
+        </div>
         {!pruned && !missing && streamed.length === 0 && (
           <p className="text-xs text-muted-foreground">No spans recorded for this run.</p>
         )}
@@ -187,6 +185,42 @@ export function RunDetail({ runId, onBack }: { runId: string; onBack: () => void
   );
 }
 
+/**
+ * The run's trace as the kit's list timeline, for the D4 evidence rail. Reads
+ * the store slice `RunDetail` filled — no second fetch — and stays a record:
+ * the rail's steps do not expand, the escape hatch for that is the detail's
+ * raw trace.
+ */
+export function RunTraceSteps({ runId }: { runId: string }) {
+  const streamed = useActivityStore(useShallow((s) => runSpans(s, runId)));
+  const steps = useMemo<TraceStep[]>(
+    () =>
+      streamed.map((span) => ({
+        state: traceState(span),
+        tool: spanToolLabel(span),
+        text: span.outcomeReason ?? (span.kind !== "tool" ? span.kind : undefined),
+        time:
+          span.endedAt !== undefined
+            ? formatDuration(span.endedAt - (span.waitUntil ?? span.startedAt))
+            : undefined,
+      })),
+    [streamed]
+  );
+  if (steps.length === 0) {
+    return <p className="text-xs text-muted-foreground/70">No spans recorded for this run.</p>;
+  }
+  return <TraceSteps variant="list" steps={steps} />;
+}
+
+/** Same boundary `toolState` draws for the run cards: open is active, a
+ * failure outcome is failed and any other non-success outcome (cancelled,
+ * skipped) is skipped. */
+function traceState(span: ActivitySpan): TraceStep["state"] {
+  if (span.outcome === undefined || span.outcome === null) return "active";
+  if (span.outcome === "success") return "done";
+  return isFailureOutcome(span.outcome) ? "failed" : "skipped";
+}
+
 /**
  * One span tree row. EVERY span expands — a tool span to its recorded payload
  * (AE7), any span to its usage, attributes and recorded events. The uniform

package/src/components/activity/activity-run-list.tsx

@@ -1,14 +1,19 @@
-import { AlertTriangle, Bot, Clock, Timer } from "lucide-react";
 import { useShallow } from "zustand/react/shallow";
-import { isFailureOutcome, type ActivitySpan } from "@schlessera/brain-ui-sdk/protocol";
+import type { ActivitySpan } from "@schlessera/brain-ui-sdk/protocol";
 
 import type { ActivityRunSummary } from "../../lib/api-client.js";
 import { useNow } from "../../hooks/use-now.js";
 import { useActivityStore } from "../../stores/activity-store.js";
-import { cn } from "../../lib/utils.js";
 import { formatDuration, formatRelativeTime } from "../chat/tool-views.js";
+import { HistoryRow, LiveRunCard, toolState } from "./activity-views.js";
 import { runCostText, spanToolLabel } from "./span-bits.js";
 
+/**
+ * The containers (S7) for the Activity index's rows: `LiveRow` subscribes to
+ * a running run's child spans and renders a `LiveRunCard`; `RunRow` is a
+ * recorded run rendered as a `HistoryRow`. The views are in
+ * `activity-views.tsx`.
+ */
 export function LiveRow({
   span,
   onOpen,
@@ -21,31 +26,16 @@ export function LiveRow({
   );
   const now = useNow();
   const current = children.filter((c) => c.outcome === undefined).at(-1);
-  const currentLabel = current ? spanToolLabel(current) : null;
   return (
-    <button
-      type="button"
-      onClick={() => onOpen({ runId: span.runId, origin: span.origin, sessionId: span.sessionId })}
-      className="flex w-full items-center gap-2 rounded-lg border border-border-subtle bg-surface px-3 py-2 text-left text-xs transition-colors hover:bg-surface-raised"
-    >
-      <span className="h-2 w-2 shrink-0 animate-pulse rounded-full bg-primary" />
-      {span.origin === "cron" ? (
-        <Clock className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
-      ) : (
-        <Bot className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
-      )}
-      <span className="truncate font-medium">
-        {span.jobName ?? span.name}
-      </span>
-      {/* A span-only run (plain cron job) has no current step — name+elapsed
-          is its whole live story. */}
-      {currentLabel && (
-        <span className="truncate text-muted-foreground">· {currentLabel}</span>
-      )}
-      <span className="ml-auto shrink-0 font-[family-name:var(--font-mono)] text-[10px] text-muted-foreground/60">
-        {formatDuration(now - span.startedAt)}
-      </span>
-    </button>
+    <LiveRunCard
+      name={span.jobName ?? span.name}
+      // A span-only run (plain cron job) has no current step — name+elapsed
+      // is its whole live story.
+      current={current ? spanToolLabel(current) : null}
+      elapsed={formatDuration(now - span.startedAt)}
+      tools={children.map((c) => ({ label: spanToolLabel(c), state: toolState(c.outcome) }))}
+      onOpen={() => onOpen({ runId: span.runId, origin: span.origin, sessionId: span.sessionId })}
+    />
   );
 }
 
@@ -56,42 +46,20 @@ export function RunRow({
   run: ActivityRunSummary;
   onOpen: (row: ActivityRunSummary) => void;
 }) {
-  const failed = isFailureOutcome(run.outcome);
   // Effective cost only — list price lives on the Spend card and the detail
   // view. "—" is unknown, never $0.00 (AE3); a pre-pricing server that never
   // sent the field keeps the original list-cost span instead (see runCostText).
   const cost = runCostText(run);
+  const meta = [cost, run.durationMs !== null ? formatDuration(run.durationMs) : null, formatRelativeTime(run.startedAt)]
+    .filter((s): s is string => Boolean(s))
+    .join(" · ");
   return (
-    <button
-      type="button"
-      onClick={() => onOpen(run)}
-      className={cn(
-        "flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-xs transition-colors hover:bg-surface-raised",
-        failed && "border border-destructive/30 bg-destructive/5"
-      )}
-    >
-      {run.origin === "cron" ? (
-        <Clock className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
-      ) : (
-        <Bot className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
-      )}
-      <span className="truncate">{run.jobName ?? run.name}</span>
-      {failed && <AlertTriangle className="h-3 w-3 shrink-0 text-destructive" />}
-      {run.outcome && run.outcome !== "success" && (
-        <span className={cn("text-[10px] uppercase", failed ? "text-destructive" : "text-muted-foreground")}>
-          {run.outcome}
-        </span>
-      )}
-      <span className="ml-auto flex shrink-0 items-center gap-2 font-[family-name:var(--font-mono)] text-[10px] text-muted-foreground/60">
-        {cost !== null && <span>{cost}</span>}
-        {run.durationMs !== null && (
-          <span className="flex items-center gap-0.5">
-            <Timer className="h-3 w-3" />
-            {formatDuration(run.durationMs)}
-          </span>
-        )}
-        <span>{formatRelativeTime(run.startedAt)}</span>
-      </span>
-    </button>
+    <HistoryRow
+      name={run.jobName ?? run.name}
+      cron={run.origin === "cron"}
+      outcome={run.outcome}
+      meta={meta}
+      onOpen={() => onOpen(run)}
+    />
   );
 }

package/src/components/activity/activity-views.tsx

@@ -0,0 +1,155 @@
+import { ActionCard, AgentRunCard, Button, ListRow, Receipt } from "@schlessera/brain-ui-kit";
+import type { AgentRunTool, ReceiptRow, RunToolState } from "@schlessera/brain-ui-kit";
+import { isFailureOutcome, type ActivityIntent, type ActivitySpanOutcome } from "@schlessera/brain-ui-sdk/protocol";
+
+/**
+ * The Activity surface's rows, rendered from props (S7, the `activity`
+ * directory). The design's `1c` screen draws a running run as an
+ * `AgentRunCard` (the tool strip is "the shortest honest answer to 'is real
+ * work happening?'") and the day's history as plain `ListRow`s; `1c`/`2a`
+ * draw a thing that needs you as an `ActionCard`. The containers in
+ * `activity-run-list.tsx`, `activity-page.tsx` and `activity-run-detail.tsx`
+ * read the store and the API; these decide how a row looks.
+ */
+
+/** A child span's outcome as the kit's tool-strip state. */
+export function toolState(outcome: ActivitySpanOutcome | undefined | null): RunToolState {
+  if (outcome === undefined || outcome === null) return "active";
+  if (outcome === "success") return "done";
+  return isFailureOutcome(outcome) ? "failed" : "idle";
+}
+
+export interface LiveRunCardProps {
+  name: string;
+  /** The step in flight, if the run has steps at all (a plain cron job has none). */
+  current: string | null;
+  elapsed: string;
+  tools: AgentRunTool[];
+  onOpen: () => void;
+}
+
+/**
+ * A running run. The kit card carries no handler of its own — the design
+ * draws it as a monitor — so the row is a native button around it, named
+ * for what opening it does.
+ */
+export function LiveRunCard(p: LiveRunCardProps) {
+  return (
+    <button
+      type="button"
+      onClick={p.onOpen}
+      aria-label={`Open run ${p.name}`}
+      className="block w-full rounded-[13px] text-left transition-[filter] hover:brightness-110 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--bk-focus-ring)]"
+    >
+      <AgentRunCard
+        agent={p.name}
+        state="running"
+        meta={p.elapsed}
+        task={p.current ? `▸ ${p.current}` : undefined}
+        progress={null}
+        tools={p.tools.length ? p.tools : undefined}
+      />
+    </button>
+  );
+}
+
+export interface HistoryRowProps {
+  name: string;
+  cron: boolean;
+  /** The run's outcome, or null while unknown. */
+  outcome: ActivitySpanOutcome | null;
+  /** Cost, duration and when — already formatted, joined with a middle dot. */
+  meta: string;
+  onOpen: () => void;
+}
+
+export function HistoryRow(p: HistoryRowProps) {
+  const failed = isFailureOutcome(p.outcome);
+  return (
+    <ListRow
+      variant="plain"
+      icon={p.cron ? "repeat" : "agent"}
+      iconTone={failed ? "red" : "neutral"}
+      title={p.name}
+      subtitle={p.outcome && p.outcome !== "success" ? p.outcome : undefined}
+      subMono
+      value={p.meta}
+      valueTone={failed ? "red" : "neutral"}
+      onClick={p.onOpen}
+    />
+  );
+}
+
+export interface IntentCardProps {
+  intent: ActivityIntent;
+  /** When it was raised, already formatted. */
+  when: string;
+  onOpen: () => void;
+  onDismiss: () => void;
+  /** Print `d` on Dismiss: the list binds it while the card holds focus (D36). */
+  keyHint?: boolean;
+}
+
+/** A thing that needs attention: failure, stuck, or a completion to note. */
+export function IntentCard(p: IntentCardProps) {
+  const kind = p.intent.kind;
+  return (
+    <ActionCard
+      kind={kind === "failure" ? "dead-letter" : "fyi"}
+      icon={kind === "stuck" ? "deadline" : undefined}
+      kindLabel={kind === "failure" ? "Failed" : kind === "stuck" ? "Stuck" : "Completed"}
+      title={p.intent.title}
+      body={p.intent.body || undefined}
+      footMeta={p.when}
+      footDot={kind === "failure" ? "red" : kind === "stuck" ? "amber" : "teal"}
+      footPulse={kind === "stuck"}
+      chevron={false}
+      onClick={p.onOpen}
+    >
+      <div className="mt-2 flex justify-end" onClick={(e) => e.stopPropagation()}>
+        <Button label={p.keyHint ? "Dismiss · d" : "Dismiss"} tone="quiet" size="sm" block={false} onClick={p.onDismiss} />
+      </div>
+    </ActionCard>
+  );
+}
+
+export interface RunRollupReceiptProps {
+  origin: string;
+  outcome: ActivitySpanOutcome | null;
+  when: string;
+  duration: string | null;
+  listCost: string;
+  effectiveCost: string;
+  billing: string | null;
+  estimated: boolean;
+  usage: string | null;
+  failureReason: string | null;
+}
+
+/** The rollup header of a run's detail: machine facts, key/value, as a `Receipt`. */
+export function RunRollupReceipt(p: RunRollupReceiptProps) {
+  const failed = isFailureOutcome(p.outcome);
+  const rows: ReceiptRow[] = [
+    { k: "origin", v: p.origin },
+    ...(p.outcome ? [{ k: "outcome", v: p.outcome, tone: failed ? ("red" as const) : ("teal" as const) }] : []),
+    { k: "started", v: p.when },
+    ...(p.duration ? [{ k: "took", v: p.duration }] : []),
+    { k: "list", v: p.listCost },
+    { k: "effective", v: `${p.effectiveCost}${p.billing ? ` · ${p.billing}` : ""}${p.estimated ? " · ~ estimated rates" : ""}` },
+    ...(p.usage ? [{ k: "usage", v: p.usage }] : []),
+  ];
+  return (
+    <div className="mb-2">
+      <Receipt
+        title="This run"
+        titleIcon="ledger"
+        titleTone={failed ? "red" : "teal"}
+        rows={rows}
+        footnote={p.failureReason ?? ""}
+        footIcon={p.failureReason ? "failed" : undefined}
+        footTone={p.failureReason ? "red" : undefined}
+        keyWidth={66}
+      />
+    </div>
+  );
+}

package/src/components/activity/approval-card.tsx

@@ -0,0 +1,117 @@
+import { ActionCard, Button } from "@schlessera/brain-ui-kit";
+import type { KeyboardEvent } from "react";
+import type { ClientMessage } from "@schlessera/brain-ui-sdk/protocol";
+import { offersAlwaysAllow, type ToolCall } from "../../stores/chat-store.js";
+import { focusAfterDecision, singleKey } from "../../lib/single-key.js";
+import { effectOf, getToolLabel, getToolSummary } from "../chat/tool-views.js";
+import { KeyCap } from "../layout/key-cap.js";
+import { useFinePointer } from "../../hooks/use-fine-pointer.js";
+
+/**
+ * A pending tool approval as an Actions-pane card (D37): the transcript copy
+ * and this row are the same item in two places, and deciding either
+ * resolves both. The kit `ActionCard kind="approval"` carries the bold
+ * border that says "a run is stopped on this"; the buttons are the same
+ * three the transcript draws, with the same keys — `a` / `d` while the card
+ * holds focus, printed on the buttons, and "Always allow" deliberately
+ * without one, carrying its `write_policy` effect chip instead. The hint
+ * is printed only while a fine pointer is present (#86); the letters follow
+ * `keys` alone, so a paired keyboard works even if the pointer query stays coarse.
+ *
+ * The buttons follow the kit `ApprovalCard`'s rule (seventh drop, ruling 10):
+ * Allow takes the remaining width, Deny is content-sized with a 96 x 44 floor
+ * so it can never become a sliver, and no even split claims the two answers
+ * are equally likely. The title — the tool and its target — is the kit
+ * `ActionCard`'s, which wraps; the target is the record and never truncates.
+ */
+const ALLOW_MOUNT = { flex: "1 1 auto", minWidth: 0, width: "auto" } as const;
+const DENY_MOUNT = { flex: "0 0 auto", minWidth: 96, minHeight: 44, width: "auto" } as const;
+export interface ApprovalCardProps {
+  tool: ToolCall;
+  /** Where it came from, for the foot line. */
+  origin: string;
+  keys: boolean;
+  onDecide: (approved: boolean, always?: boolean) => void;
+}
+
+export const APPROVAL_CARD = "[data-approval-card]";
+
+/**
+ * What a decision on an Actions card prints and sends. The receipt follows
+ * what the card was allowed to offer, not the click (#147): "Always allowed"
+ * claims a policy write, and the host refuses one the card did not offer —
+ * so an `always` the card could not have offered is neither printed nor
+ * sent. A card no longer in the list (`tool` undefined) offered nothing.
+ */
+export function approvalOutcome(
+  tool: ToolCall | undefined,
+  toolUseId: string,
+  approved: boolean,
+  asked?: boolean
+): {
+  receipt: { text: string; target: string; effect: string };
+  frame: Extract<ClientMessage, { type: "tool_approval" | "tool_denial" }>;
+} {
+  const always = approved && asked === true && tool !== undefined && offersAlwaysAllow(tool);
+  return {
+    receipt: {
+      text: approved ? (always ? "Always allowed" : "Allowed") : "Denied",
+      target: tool ? tool.name : toolUseId,
+      effect: always ? "write_policy" : approved ? "tool_approval" : "tool_denial",
+    },
+    // Every decision on this surface is made on the card (#113).
+    frame: approved
+      ? { type: "tool_approval", toolUseId, ...(always ? { always: true } : {}), channel: "card" }
+      : { type: "tool_denial", toolUseId, message: "Denied by user", channel: "card" },
+  };
+}
+
+export function ApprovalCard(p: ApprovalCardProps) {
+  const label = getToolLabel(p.tool.name);
+  const summary = getToolSummary(p.tool);
+  const finePointer = useFinePointer();
+  const printKeys = p.keys && finePointer;
+  function decide(card: HTMLElement | null, approved: boolean, always?: boolean) {
+    if (card) focusAfterDecision(card, APPROVAL_CARD, "[data-needs-you-heading]");
+    p.onDecide(approved, always);
+  }
+  function onKeyDown(event: KeyboardEvent<HTMLDivElement>) {
+    if (!p.keys) return;
+    const key = singleKey(event);
+    if (key !== "a" && key !== "d") return;
+    event.preventDefault();
+    decide(event.currentTarget, key === "a");
+  }
+  return (
+    <div data-approval-card="" role="group" aria-label={`Approval: ${label}`} tabIndex={0} onKeyDown={onKeyDown} className="rounded-[14px] outline-none focus-visible:ring-2 focus-visible:ring-primary/50">
+      <ActionCard
+        kind="approval"
+        title={summary ? `${label} · ${summary}` : label}
+        rightMeta="blocks a run"
+        rightMetaTone="red"
+        {...(effectOf(p.tool) ? { body: effectOf(p.tool) } : {})}
+        footMeta={p.origin}
+        footDot="amber"
+        footPulse
+        chevron={false}
+      >
+        <div className="mt-2 flex flex-wrap gap-2">
+          <Button label="Allow" icon="confirm" tone="primary" size="sm" center block={false} style={ALLOW_MOUNT} onClick={() => decide(cardOf(), true)} />
+          {offersAlwaysAllow(p.tool) && (
+            <Button label="Always allow" effect="write_policy" tone="ghost" size="sm" block={false} onClick={() => decide(cardOf(), true, true)} />
+          )}
+          <Button label="Deny" icon="deny" tone="danger" size="sm" center block={false} style={DENY_MOUNT} onClick={() => decide(cardOf(), false)} />
+          {printKeys && (
+            <span className="ml-auto flex items-center gap-2 text-[10px] text-muted-foreground" aria-hidden="true">
+              <span>allow <KeyCap>a</KeyCap></span>
+              <span>deny <KeyCap>d</KeyCap></span>
+            </span>
+          )}
+        </div>
+      </ActionCard>
+    </div>
+  );
+  function cardOf(): HTMLElement | null {
+    return (document.activeElement as HTMLElement | null)?.closest(APPROVAL_CARD) ?? null;
+  }
+}