@schlessera/brain-ui-react 0.35.0 → 0.37.0

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

@@ -1,40 +1,54 @@
-import { useEffect, useMemo, useState } from "react";
-import {
-  Activity as ActivityIcon,
-  AlertTriangle,
-  RefreshCw,
-  Timer,
-} from "lucide-react";
+import { useBrainUiRoot } from "../../root-context.js";
+import { useCallback, useEffect, useMemo, useRef, useState, type KeyboardEvent } from "react";
+import { Activity as ActivityIcon, AlertTriangle, RefreshCw } from "lucide-react";
 import type { ActivitySpan } from "@schlessera/brain-ui-sdk/protocol";
 
-import {
-  api,
-  type ActivityIntent,
-  type ActivityRollups,
-  type ActivityRunSummary,
+import type {
+  ActivityIntent,
+  ActivityRollups,
+  ActivityRunSummary,
 } from "../../lib/api-client.js";
-import { sendClientMessage } from "../../hooks/use-websocket.js";
 import { useActivityStore } from "../../stores/activity-store.js";
-import { useChatStore } from "../../stores/chat-store.js";
-import { useUIStore } from "../../stores/ui-store.js";
+import { useChatStore, pendingApprovals } from "../../stores/chat-store.js";
+import { EmptyState, FilterRow, InlineToast, Label } from "@schlessera/brain-ui-kit";
 import { cn } from "../../lib/utils.js";
+import { ApprovalCard, approvalOutcome } from "./approval-card.js";
+import { useUIStore } from "../../stores/ui-store.js";
 import { formatRelativeTime } from "../chat/tool-views.js";
 import { RollupCards } from "./activity-rollups.js";
 import { LiveRow, RunRow } from "./activity-run-list.js";
-import { RunDetail } from "./activity-run-detail.js";
+import { RunDetail, RunTraceSteps } from "./activity-run-detail.js";
+import { IntentCard } from "./activity-views.js";
+import { focusAfterDecision, singleKey } from "../../lib/single-key.js";
+import { useFinePointer } from "../../hooks/use-fine-pointer.js";
 import { PushToggle } from "./push-toggle.js";
 import { SettingsPanel } from "../settings/settings-panel.js";
 
 /**
- * The Activity surface: an INDEX of all agent activity — live runs first,
- * then history — with cost/token rollups. Deliberately not a residence:
- * a session run deep-links back into its chat, a subagent into the drill-in
- * stack; only a cron run (which has no chat around it) details here.
+ * The Actions surface (D37): one queue, three lenses — `needs you` (pending
+ * approvals from every transcript, then the inbox), `running` (live runs),
+ * `done` (history and the rollups). "What needs me" and "what has been
+ * happening" are two lenses on one queue, so the rail has one destination
+ * and this page has a filter. Deliberately not a residence: a session run
+ * deep-links back into its chat, a subagent into the drill-in stack; only a
+ * cron run (which has no chat around it) details here.
  *
  * Live rows ride the index-view activity subscription while this surface is
- * open; history and rollups come from the REST activity API.
+ * open; history and rollups come from the REST activity API. The hash stays
+ * `#/activity` — the route is a contract with push notifications.
+ *
+ * Panes (D4): below `laptop:` the run detail replaces the queue, as on the
+ * phone. From `laptop:` the queue is a 360px list column beside the detail
+ * pane, and from `wide:` a 300px evidence rail on the right carries the
+ * run's trace and the last decision's receipt. Each pane scrolls on its own.
+ * The detail is one element at every width — the list hides under it below
+ * `laptop:` — so a deep link selects the same run everywhere.
  */
+export type ActionsLens = "needs-you" | "running" | "done";
 export function ActivityPage() {
+  const root = useBrainUiRoot();
+  const api = root.api;
+  const request = useRef(0);
   const supported = useActivityStore((s) => s.supported);
   const connectionEpoch = useActivityStore((s) => s.connectionEpoch);
   const liveSpans = useActivityStore((s) => s.spans);
@@ -50,39 +64,80 @@ export function ActivityPage() {
   const [pricingStale, setPricingStale] = useState(false);
 
   const inbox = useActivityStore((s) => s.inbox);
+  // Derived from the buffer references, not selected as a fresh array: a
+  // selector returning a new array every call re-renders without end.
+  const buffers = useChatStore((s) => s.buffers);
+  const draft = useChatStore((s) => s.draft);
+  const approvals = useMemo(() => pendingApprovals({ buffers, draft }), [buffers, draft]);
+  const resolveToolApproval = useChatStore((s) => s.resolveToolApproval);
+  /**
+   * The lens the reader picked, or — until they pick one — the one that has
+   * something in it: what needs you, else what is running, else what is
+   * done. A page that opens on an empty "needs you" when a run is live would
+   * be reassurance in the wrong place.
+   */
+  const [picked, setLens] = useState<ActionsLens | null>(null);
+  /**
+   * The receipt for the last DECISION — Allowed, Always allowed, Denied —
+   * shown above the `EmptyState` that replaces a drained section (D37) and
+   * in the evidence rail: a keyboard user is told "that is done" instead of
+   * being dropped at the document top. A decision earns a toast by the
+   * sixth pass's own criterion (§4: "a toast is for effects you can take
+   * back or that happen out of sight"): its effect happens in the run, out
+   * of sight, and the card leaving says nothing about what the run did
+   * with the answer.
+   *
+   * A DISMISSAL sets no receipt. Acknowledging an inbox item is neither —
+   * it cannot be taken back (the activity API has no un-acknowledge) and
+   * the row vanishing under the cursor is the whole effect. An `InlineToast`
+   * whose point is Undo, shipped without Undo, "teaches that the kit's
+   * receipts are decorative"; so until un-acknowledge exists, dismissal is
+   * silent and the row leaving the list is the receipt. Grow un-acknowledge
+   * and the toast returns with its Undo.
+   */
+  const [receipt, setReceipt] = useState<{ text: string; target: string; effect: string } | null>(null);
+  const [drained, setDrained] = useState(false);
   const loadInbox = useActivityStore((s) => s.loadInbox);
   const acknowledgeIntent = useActivityStore((s) => s.acknowledgeIntent);
   const acknowledgeAllIntents = useActivityStore((s) => s.acknowledgeAllIntents);
 
-  const refresh = () => {
-    api
-      .activityRuns({ limit: 100 })
-      .then(setRuns)
-      .catch((err) => setError(err instanceof Error ? err.message : String(err)));
-    api.activityRollups(7).then(setRollups).catch(() => {});
-    // Surface the pricing warning only when the table is stale AND refreshes
-    // are failing — a merely-aging table heals itself. A rejection (including
-    // 404 from a server that predates the route) means no signal: stay quiet.
-    api
-      .pricingState()
-      .then((s) => setPricingStale(Boolean(s.stale && s.error)))
-      .catch(() => setPricingStale(false));
+  const refresh = useCallback(() => {
+    const token = ++request.current;
+    const current = () => token === request.current;
+    setError(null);
+    api.activityRuns({ limit: 100 })
+      .then((runs) => { if (current()) setRuns(runs); })
+      .catch((err) => { if (current()) setError(err instanceof Error ? err.message : String(err)); });
+    api.activityRollups(7)
+      .then((rollups) => { if (current()) setRollups(rollups); })
+      .catch(() => {});
+    // A stale table is only a warning while refreshes are failing. Older
+    // servers have no pricing route, so a rejection remains a quiet state.
+    api.pricingState()
+      .then((s) => { if (current()) setPricingStale(Boolean(s.stale && s.error)); })
+      .catch(() => { if (current()) setPricingStale(false); });
     void loadInbox();
-  };
+  }, [api, loadInbox]);
 
-  // Re-runs on every reconnect (connectionEpoch): the new socket has no
-  // server-side subscriptions, and the REST refresh heals whatever finished
-  // while disconnected.
+  useEffect(() => {
+    setRuns(null);
+    setRollups(null);
+    setError(null);
+    setPricingStale(false);
+    setDetailRunId(null);
+  }, [root]);
+
+  // Reconnects heal the REST snapshot and establish a new subscription.
+  // Cleanup also invalidates responses from the old root or request generation.
   useEffect(() => {
     refresh();
-    if (supported) {
-      sendClientMessage({ type: "activity_subscribe", view: "index" });
-      return () => {
-        sendClientMessage({ type: "activity_unsubscribe", view: "index" });
-      };
-    }
-    return undefined;
-  }, [supported, connectionEpoch]);
+    if (supported) root.connection.send({ type: "activity_subscribe", view: "index" });
+    const invalidate = () => { request.current++; };
+    return () => {
+      invalidate();
+      if (supported) root.connection.send({ type: "activity_unsubscribe", view: "index" });
+    };
+  }, [supported, connectionEpoch, root, refresh]);
 
   // Deep-link consumer: `#/activity/<runId>` (the push notification landing
   // spot — the shell routes it here but leaves the hash intact) opens that
@@ -154,12 +209,60 @@ export function ActivityPage() {
     }
   }
 
-  if (detailRunId) {
-    return <RunDetail runId={detailRunId} onBack={() => showDetail(null)} />;
+  const keys = useUIStore((s) => s.singleKeyShortcuts);
+  // The keys bind on `keys` alone; they are PRINTED only while a mouse or
+  // trackpad is present (#86, #100), like the approval card's caps. A
+  // touch-only tablet past `laptop:` would otherwise read keys it cannot fire.
+  const finePointer = useFinePointer();
+  const printKeys = keys && finePointer;
+  const INTENT_CARD = "[data-intent-card] > [role=\"button\"]";
+  /**
+   * `j` / `k` move inside the focused list and `d` dismisses the focused
+   * card (D36): all three act only while a card in this list holds focus,
+   * and the footer prints them. After a dismiss, focus goes to the next
+   * card, else the previous, else the page heading.
+   */
+  function onInboxKeyDown(event: KeyboardEvent<HTMLDivElement>) {
+    if (!keys) return;
+    const key = singleKey(event);
+    if (key !== "j" && key !== "k" && key !== "d") return;
+    const cards = [...event.currentTarget.querySelectorAll<HTMLElement>(INTENT_CARD)];
+    const here = cards.findIndex((card) => card.contains(event.target as Node));
+    if (here === -1) return;
+    event.preventDefault();
+    if (key === "d") {
+      const intent = inbox[here];
+      focusAfterDecision(cards[here]!, INTENT_CARD, "[data-needs-you-heading]");
+      if (intent) dismiss(intent);
+      return;
+    }
+    cards[(here + (key === "j" ? 1 : -1) + cards.length) % cards.length]?.focus();
+  }
+
+  /** Silent by rule (see `receipt`): the row leaving is the receipt. `drained`
+   * still flips so the empty state's heading takes focus after the last one. */
+  function dismiss(intent: ActivityIntent) {
+    setDrained(inbox.length + approvals.length <= 1);
+    void acknowledgeIntent(intent.id);
+  }
+  function dismissAll() {
+    setDrained(approvals.length === 0);
+    void acknowledgeAllIntents();
   }
+  function decideApproval(key: string | null, toolUseId: string, approved: boolean, asked?: boolean) {
+    const tool = approvals.find((a) => a.tool.id === toolUseId)?.tool;
+    const { receipt, frame } = approvalOutcome(tool, toolUseId, approved, asked);
+    setReceipt(receipt);
+    setDrained(inbox.length + approvals.length <= 1);
+    resolveToolApproval(key, toolUseId, approved);
+    root.connection.send(frame);
+  }
+  const needsYouCount = inbox.length + approvals.length;
+  const runningCount = liveRoots.length + restLive.length;
+  const lens: ActionsLens = picked ?? (needsYouCount > 0 || drained ? "needs-you" : runningCount > 0 ? "running" : "done");
 
   return (
-    <div className="flex h-full flex-col overflow-y-auto">
+    <div className="flex h-full min-h-0 flex-1 flex-col laptop:flex-row">
       {/* Hosted here like GraphPage does: the chat page (the usual host) is
           hidden while this view is active, so the staleness deep-link below
           needs its own panel mount. */}
@@ -167,133 +270,211 @@ export function ActivityPage() {
         open={settingsPanelOpen}
         onClose={() => setSettingsPanelOpen(false)}
       />
-      <div className="flex items-center gap-2 border-b border-border-subtle px-4 py-3">
-        <ActivityIcon className="h-4 w-4 text-muted-foreground" />
-        <h1 className="text-sm font-medium">Activity</h1>
-        <div className="ml-auto flex items-center gap-2">
-          {pricingStale && (
-            <button
-              type="button"
-              onClick={() => openSettings("models")}
-              className="flex items-center gap-1 rounded-md p-1.5 text-amber-500 transition-colors hover:bg-surface-raised hover:text-amber-400"
-              aria-label="Pricing refresh is failing — costs may use stale rates. Open Settings"
-              title="Pricing refresh is failing — costs may use stale rates. Open Settings"
-            >
-              <AlertTriangle className="h-3.5 w-3.5" />
-              <span className="hidden text-[10px] sm:inline">Pricing stale</span>
-            </button>
-          )}
-          <PushToggle />
-        </div>
-        <button
-          type="button"
-          onClick={refresh}
-          className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-surface-raised hover:text-foreground"
-          aria-label="Refresh"
-        >
-          <RefreshCw className="h-3.5 w-3.5" />
-        </button>
-      </div>
-
-      <div className="mx-auto w-full max-w-3xl space-y-6 p-4">
-        {error && (
-          <p className="text-xs text-destructive">Could not load activity: {error}</p>
+      {/* The list column. Below `laptop:` it is the whole page and an open
+          detail replaces it; from `laptop:` it is 360px beside the detail. */}
+      <section
+        aria-label="Actions queue"
+        className={cn(
+          "min-h-0 flex-col overflow-y-auto laptop:flex laptop:w-[360px] laptop:flex-none laptop:border-r laptop:border-border-subtle",
+          detailRunId ? "hidden" : "flex flex-1"
         )}
-
-        {inbox.length > 0 && (
-          <section>
-            <div className="mb-2 flex items-center">
-              <h2 className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
-                Needs attention
-              </h2>
+      >
+        <div className="flex items-center gap-2 border-b border-border-subtle px-4 py-3">
+          <ActivityIcon className="h-4 w-4 text-muted-foreground" />
+          <h1 className="text-sm font-medium outline-none" tabIndex={-1} data-activity-heading="">Actions</h1>
+          <div className="ml-auto flex items-center gap-2">
+            {pricingStale && (
               <button
                 type="button"
-                onClick={() => void acknowledgeAllIntents()}
-                className="ml-auto text-[11px] text-muted-foreground transition-colors hover:text-foreground"
+                onClick={() => openSettings("models")}
+                className="flex items-center gap-1 rounded-md p-1.5 text-primary transition-colors hover:bg-surface-raised hover:text-primary/80"
+                aria-label="Pricing refresh is failing — costs may use stale rates. Open Settings"
+                title="Pricing refresh is failing — costs may use stale rates. Open Settings"
               >
-                Dismiss all
+                <AlertTriangle className="h-3.5 w-3.5" />
+                <span className="hidden text-[10px] sm:inline">Pricing stale</span>
               </button>
-            </div>
-            <div className="space-y-1">
-              {inbox.map((intent) => (
-                <div
-                  key={intent.id}
-                  className={cn(
-                    "flex items-center gap-2 rounded-lg border px-3 py-2 text-xs",
-                    intent.kind === "failure"
-                      ? "border-destructive/30 bg-destructive/5"
-                      : "border-border-subtle bg-surface"
-                  )}
-                >
-                  {intent.kind === "failure" ? (
-                    <AlertTriangle className="h-3.5 w-3.5 shrink-0 text-destructive" />
-                  ) : intent.kind === "stuck" ? (
-                    <Timer className="h-3.5 w-3.5 shrink-0 text-amber-500" />
-                  ) : (
-                    <ActivityIcon className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
-                  )}
-                  <button
-                    type="button"
-                    className="min-w-0 flex-1 truncate text-left hover:underline"
-                    onClick={() => {
-                      void acknowledgeIntent(intent.id);
-                      openIntent(intent);
-                    }}
-                  >
-                    {intent.title}
-                  </button>
-                  <span className="shrink-0 text-[10px] text-muted-foreground/60">
-                    {formatRelativeTime(intent.createdAt)}
-                  </span>
+            )}
+            <PushToggle />
+          </div>
+          <button
+            type="button"
+            onClick={refresh}
+            className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-surface-raised hover:text-foreground"
+            aria-label="Refresh"
+          >
+            <RefreshCw className="h-3.5 w-3.5" />
+          </button>
+        </div>
+
+        <div className="mx-auto w-full max-w-3xl space-y-6 p-4 laptop:max-w-none">
+          {error && (
+            <p className="text-xs text-destructive">Could not load activity: {error}</p>
+          )}
+
+          <FilterRow
+            items={[
+              { label: `needs you ${needsYouCount}`, onClick: () => setLens("needs-you") },
+              { label: `running ${runningCount}`, onClick: () => setLens("running") },
+              { label: `done ${history.length}`, onClick: () => setLens("done") },
+            ]}
+            active={lens === "needs-you" ? 0 : lens === "running" ? 1 : 2}
+          />
+
+          {lens === "needs-you" && (
+            <section aria-labelledby="needs-you-heading">
+              <div className="mb-2 flex items-center">
+                <h2 id="needs-you-heading" className="text-xs font-medium uppercase tracking-wide text-muted-foreground outline-none" tabIndex={-1} data-needs-you-heading="">
+                  Needs you
+                </h2>
+                {inbox.length > 0 && (
                   <button
                     type="button"
-                    onClick={() => void acknowledgeIntent(intent.id)}
-                    className="shrink-0 rounded p-1 text-muted-foreground transition-colors hover:text-foreground"
-                    aria-label="Dismiss"
+                    onClick={dismissAll}
+                    className="ml-auto text-[11px] text-muted-foreground transition-colors hover:text-foreground"
                   >
-                    ×
+                    Dismiss all
                   </button>
+                )}
+              </div>
+              {needsYouCount === 0 ? (
+                <div className="flex flex-col gap-3">
+                  {receipt && <InlineToast text={receipt.text} target={receipt.target} effect={receipt.effect} tone="teal" undoLabel="" />}
+                  {/* A drained section becomes the empty state, and its heading
+                      takes focus after the last decision (D37) — never the
+                      document top. */}
+                  <EmptyState variant="caught_up" meta="" focusTitle={drained} />
                 </div>
-              ))}
-            </div>
-          </section>
-        )}
+              ) : (
+                <>
+                  {approvals.length > 0 && (
+                    <div className="mb-3 space-y-2">
+                      {approvals.map(({ key, tool }) => (
+                        <ApprovalCard
+                          key={tool.id}
+                          tool={tool}
+                          origin={key ? `session ${key.slice(0, 8)}` : "this conversation"}
+                          keys={keys}
+                          onDecide={(approved, always) => decideApproval(key, tool.id, approved, always)}
+                        />
+                      ))}
+                    </div>
+                  )}
+                  <div className="space-y-2" onKeyDown={onInboxKeyDown}>
+                    {inbox.map((intent) => (
+                      <div key={intent.id} data-intent-card="">
+                        <IntentCard
+                          intent={intent}
+                          when={formatRelativeTime(intent.createdAt)}
+                          keyHint={printKeys}
+                          onOpen={() => {
+                            void acknowledgeIntent(intent.id);
+                            openIntent(intent);
+                          }}
+                          onDismiss={() => dismiss(intent)}
+                        />
+                      </div>
+                    ))}
+                  </div>
+                  {printKeys && (
+                    <p className="mt-1.5 font-[family-name:var(--font-mono)] text-[10px] text-muted-foreground/70 laptop:hidden">
+                      j / k move · d dismiss · ⏎ open{approvals.length > 0 ? " · a allow" : ""}
+                    </p>
+                  )}
+                </>
+              )}
+            </section>
+          )}
 
-        {rollups && <RollupCards rollups={rollups} />}
+          {lens === "running" && (
+            <section>
+              <h2 className="mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                Running now
+              </h2>
+              {liveRoots.length === 0 && restLive.length === 0 ? (
+                <p className="text-xs text-muted-foreground/70">Nothing is running.</p>
+              ) : (
+                <div className="space-y-1">
+                  {liveRoots.map((span) => (
+                    <LiveRow key={span.runId} span={span} onOpen={openRun} />
+                  ))}
+                  {restLive.map((run) => (
+                    <RunRow key={run.runId} run={run} onOpen={openRun} />
+                  ))}
+                </div>
+              )}
+            </section>
+          )}
 
-        <section>
-          <h2 className="mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
-            Running now
-          </h2>
-          {liveRoots.length === 0 && restLive.length === 0 ? (
-            <p className="text-xs text-muted-foreground/70">Nothing is running.</p>
-          ) : (
-            <div className="space-y-1">
-              {liveRoots.map((span) => (
-                <LiveRow key={span.runId} span={span} onOpen={openRun} />
-              ))}
-              {restLive.map((run) => (
-                <RunRow key={run.runId} run={run} onOpen={openRun} />
-              ))}
-            </div>
+          {lens === "done" && (
+            <>
+              {rollups && <RollupCards rollups={rollups} />}
+              <section>
+                <h2 className="mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                  History
+                </h2>
+                {history.length === 0 ? (
+                  <p className="text-xs text-muted-foreground/70">No recorded runs yet.</p>
+                ) : (
+                  <div className="space-y-1">
+                    {history.map((run) => (
+                      <RunRow key={run.runId} run={run} onOpen={openRun} />
+                    ))}
+                  </div>
+                )}
+              </section>
+            </>
           )}
-        </section>
+        </div>
+        {/* The column's footer (D4): the printed keys, pinned under the list
+            from `laptop:`. Only while the keys can fire — they act inside the
+            inbox list — so a lens without cards advertises nothing, and
+            only with a fine pointer (#100). */}
+        {printKeys && lens === "needs-you" && inbox.length > 0 && (
+          <p className="sticky bottom-0 mt-auto hidden border-t border-border-subtle bg-background px-4 py-2 font-[family-name:var(--font-mono)] text-[10px] text-muted-foreground/70 laptop:block">
+            j / k move · d dismiss
+          </p>
+        )}
+      </section>
+
+      {/* The detail pane. Below `laptop:` it shows only with a selection and
+          takes the whole page; from `laptop:` it is always there, holding the
+          selected run or the prompt to pick one. */}
+      <div className={cn("min-h-0 min-w-0 flex-1 flex-col", detailRunId ? "flex" : "hidden laptop:flex")}>
+        {detailRunId ? (
+          <RunDetail runId={detailRunId} onBack={() => showDetail(null)} embedded />
+        ) : (
+          <div className="flex h-full items-center justify-center overflow-y-auto p-4">
+            <EmptyState
+              variant="quiet"
+              title="Pick a run"
+              body="Its trace, attempts and what it was holding show here."
+              meta=""
+              minHeight={0}
+            />
+          </div>
+        )}
+      </div>
 
-        <section>
-          <h2 className="mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
-            History
-          </h2>
-          {history.length === 0 ? (
-            <p className="text-xs text-muted-foreground/70">No recorded runs yet.</p>
-          ) : (
-            <div className="space-y-1">
-              {history.map((run) => (
-                <RunRow key={run.runId} run={run} onOpen={openRun} />
-              ))}
+      {/* The evidence rail, `wide:` only: the run's trace as a record, and
+          the receipt for the last decision made on this page. */}
+      {detailRunId && (
+        <aside
+          aria-label="Run evidence"
+          className="hidden min-h-0 w-[300px] shrink-0 flex-col gap-4 overflow-y-auto border-l border-border-subtle bg-surface p-4 wide:flex"
+        >
+          <div className="flex flex-col gap-2">
+            <Label text="Trace" icon="steps" meta="this run" />
+            <RunTraceSteps runId={detailRunId} />
+          </div>
+          {receipt && (
+            <div className="flex flex-col gap-2">
+              <Label text="Last decision" icon="resolved" />
+              <InlineToast text={receipt.text} target={receipt.target} effect={receipt.effect} tone="teal" undoLabel="" />
             </div>
           )}
-        </section>
-      </div>
+        </aside>
+      )}
     </div>
   );
 }