@schlessera/brain-ui-react 0.35.0 → 0.37.0

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

@@ -1,9 +1,9 @@
 import { useEffect, useState } from "react";
-import { AlertTriangle, Newspaper, X } from "lucide-react";
 
-import { api, type ActivityDigest } from "../../lib/api-client.js";
+import type { ActivityDigest } from "../../lib/api-client.js";
+import { useBrainApi } from "../../root-context.js";
 import { useUIStore } from "../../stores/ui-store.js";
-import { cn } from "../../lib/utils.js";
+import { DigestSummary } from "./digest-summary.js";
 import { digestCostClause } from "./span-bits.js";
 
 /**
@@ -13,17 +13,24 @@ import { digestCostClause } from "./span-bits.js";
  * dismissing persists server-side, so a phone and a laptop don't each nag.
  * An empty window stays quiet — no card for "nothing happened". The window
  * is labeled: the card says what period it covers, never implies "now".
+ *
+ * This is the container (S7): the fetch, the once-per-digest rule and the
+ * dismissal live here; `DigestSummary` draws the kit `DigestCard`.
  */
 export function DigestCard() {
+  const api = useBrainApi();
   const [digest, setDigest] = useState<ActivityDigest | null>(null);
   const [visible, setVisible] = useState(false);
   const setActiveView = useUIStore((s) => s.setActiveView);
 
   useEffect(() => {
+    let active = true;
+    setDigest(null);
+    setVisible(false);
     void api
       .activityDigest()
       .then(({ digest, dismissedAt }) => {
-        if (!digest || digest.runs === 0) return;
+        if (!active || !digest || digest.runs === 0) return;
         if (digest.generatedAt <= dismissedAt) return;
         setDigest(digest);
         setVisible(true);
@@ -31,7 +38,8 @@ export function DigestCard() {
       .catch(() => {
         // No digest is a quiet state, never an error surface.
       });
-  }, []);
+    return () => { active = false; };
+  }, [api]);
 
   if (!visible || !digest) return null;
 
@@ -40,63 +48,19 @@ export function DigestCard() {
     void api.activityDigestDismiss().catch(() => {});
   }
 
-  const windowLabel = `${formatDay(digest.windowStart)} – ${formatDay(digest.windowEnd)}`;
-  // Effective-only spend clause; a digest persisted before pricing shipped
-  // falls back to its old list-cost clause inside the helper.
-  const costClause = digestCostClause(digest);
-
   return (
-    <div
-      className={cn(
-        "mx-auto mb-3 w-full max-w-2xl rounded-xl border p-3 text-xs",
-        digest.failures > 0
-          ? "border-destructive/30 bg-destructive/5"
-          : "border-border-subtle bg-surface"
-      )}
-    >
-      <div className="flex items-center gap-2">
-        <Newspaper className="h-4 w-4 shrink-0 text-muted-foreground" />
-        <span className="font-medium">While you were away</span>
-        <span className="text-[10px] text-muted-foreground/60">{windowLabel}</span>
-        <button
-          type="button"
-          onClick={dismiss}
-          className="ml-auto rounded p-1 text-muted-foreground transition-colors hover:text-foreground"
-          aria-label="Dismiss"
-        >
-          <X className="h-3.5 w-3.5" />
-        </button>
-      </div>
-      <div className="mt-1.5 text-muted-foreground">
-        {digest.runs} run{digest.runs === 1 ? "" : "s"}
-        {digest.failures > 0 && (
-          <span className="text-destructive"> · {digest.failures} failed</span>
-        )}
-        {costClause && ` · ${costClause}`}
-      </div>
-      {digest.notable.length > 0 && (
-        <div className="mt-1.5 space-y-0.5">
-          {digest.notable.slice(0, 3).map((n) => (
-            <div key={n.runId} className="flex items-center gap-1.5 text-[11px]">
-              <AlertTriangle className="h-3 w-3 shrink-0 text-destructive" />
-              <span className="truncate">
-                {n.jobName ?? n.name} — {n.outcome}
-              </span>
-            </div>
-          ))}
-        </div>
-      )}
-      <button
-        type="button"
-        onClick={() => {
-          dismiss();
-          setActiveView("activity");
-        }}
-        className="mt-2 text-[11px] font-medium text-primary hover:underline"
-      >
-        Open Activity
-      </button>
-    </div>
+    <DigestSummary
+      digest={digest}
+      windowLabel={`${formatDay(digest.windowStart)} – ${formatDay(digest.windowEnd)}`}
+      // Effective-only spend clause; a digest persisted before pricing shipped
+      // falls back to its old list-cost clause inside the helper.
+      costClause={digestCostClause(digest)}
+      onDismiss={dismiss}
+      onOpen={() => {
+        dismiss();
+        setActiveView("activity");
+      }}
+    />
   );
 }
 

package/src/components/activity/digest-summary.tsx

@@ -0,0 +1,52 @@
+import { Button, DigestCard } from "@schlessera/brain-ui-kit";
+import type { DigestGroup } from "@schlessera/brain-ui-kit";
+import type { ActivityDigest } from "../../lib/api-client.js";
+
+/**
+ * The while-you-were-away card as the design draws it: the kit `DigestCard`
+ * — "the briefing as one chat block, ordered settled → needs-you so it can
+ * be abandoned halfway" — with the app's two actions under it. Rendered from
+ * props (S7); `DigestCard` in `digest-card.tsx` is the container.
+ *
+ * The kit card does no arithmetic, so the counts arrive as strings; the
+ * notable runs (failures, at most three) are the one group that needs you.
+ */
+export interface DigestSummaryProps {
+  digest: ActivityDigest;
+  windowLabel: string;
+  costClause: string | null;
+  onDismiss: () => void;
+  onOpen: () => void;
+}
+
+export function DigestSummary(p: DigestSummaryProps) {
+  const d = p.digest;
+  const runs = `${d.runs} run${d.runs === 1 ? "" : "s"}`;
+  const groups: DigestGroup[] = [
+    { label: "Ran", icon: "agent", tone: "teal", count: String(d.runs), items: [{ text: p.windowLabel, meta: p.costClause ?? undefined }] },
+  ];
+  if (d.failures > 0) {
+    groups.push({
+      label: "Failed",
+      icon: "failed",
+      tone: "red",
+      count: String(d.failures),
+      items: d.notable.slice(0, 3).map((n) => ({ text: n.jobName ?? n.name, meta: n.outcome ?? undefined })),
+    });
+  }
+  return (
+    <div className="mx-auto mb-3 w-full max-w-2xl">
+      <DigestCard
+        title="While you were away"
+        subtitle={`${p.windowLabel} · ${runs}${d.failures > 0 ? ` · ${d.failures} failed` : ""}`}
+        spend={p.costClause ?? ""}
+        groups={groups}
+        footnote=""
+      />
+      <div className="mt-2 flex justify-end gap-2">
+        <Button label="Dismiss" tone="quiet" size="sm" block={false} onClick={p.onDismiss} />
+        <Button label="Open Actions" icon="resolved" tone="primary" size="sm" block={false} onClick={p.onOpen} />
+      </div>
+    </div>
+  );
+}

package/src/components/activity/push-switch.tsx

@@ -0,0 +1,62 @@
+import { Toggle } from "@schlessera/brain-ui-kit";
+import { BellOff } from "lucide-react";
+
+/**
+ * What push looks like — nothing about how it is obtained. `PushToggle` is
+ * the container that owns the browser permission, the service worker, the
+ * server binding and every cancellation guard; this is the S6 split of its
+ * presentation into a view that renders from props alone.
+ *
+ * The permission model is THREE-state, not a bare switch: once the browser
+ * prompt is denied, Chrome silently ignores every further in-page request,
+ * so `blocked` says where the real switch lives instead of drawing one that
+ * does nothing. Where the platform has no push at all (an in-browser iOS
+ * tab), `unsupported` explains rather than hides.
+ *
+ * The switch is the kit's `Toggle`, named "Push notifications" — the name is
+ * what it switches, `aria-checked` is its state, and `disabled` is the
+ * subscription mid-flight (the design's fourth state, kept as a named switch
+ * rather than a vanished one).
+ */
+export type PushState = "unsupported" | "not-asked" | "blocked" | "subscribed" | "unsubscribed";
+
+export interface PushSwitchProps {
+  state: PushState;
+  busy: boolean;
+  onToggle: () => void;
+}
+
+export function PushSwitch({ state, busy, onToggle }: PushSwitchProps) {
+  if (state === "unsupported") {
+    return (
+      <div
+        className="flex items-center gap-1.5 text-[11px] text-muted-foreground/60"
+        title="This browser has no web push. On iOS, install the app to the home screen (iOS 16.4+)."
+      >
+        <BellOff className="h-3.5 w-3.5" />
+        No push here
+      </div>
+    );
+  }
+  if (state === "blocked") {
+    return (
+      <div
+        className="flex items-center gap-1.5 text-[11px] text-muted-foreground"
+        title="Notifications are blocked at the browser level. Allow them in this site's browser settings, then reload."
+      >
+        <BellOff className="h-3.5 w-3.5 text-destructive" />
+        Blocked in browser settings
+      </div>
+    );
+  }
+  const on = state === "subscribed";
+  return (
+    <label
+      className="flex items-center gap-2 text-[11px] text-muted-foreground"
+      title={on ? "Push notifications are on for this device" : "Get a push notification when background work fails"}
+    >
+      <span>{on ? "Push on" : "Push"}</span>
+      <Toggle on={on} tone="amber" label="Push notifications" disabled={busy} onClick={onToggle} />
+    </label>
+  );
+}

package/src/components/activity/push-toggle.tsx

@@ -1,38 +1,30 @@
-import { useEffect, useState } from "react";
-import { Bell, BellOff } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
 
-import { api } from "../../lib/api-client.js";
-import { cn } from "../../lib/utils.js";
+import { useBrainUiRoot } from "../../root-context.js";
+import { subscriptionMatchesKey } from "../../lib/push-registration.js";
+import { PushSwitch, type PushState } from "./push-switch.js";
 
 /**
- * The push enable/disable control, living on the Activity surface (where the
- * alerts it governs land). The permission model is THREE-state, not a bare
- * toggle: once the browser prompt is denied, Chrome silently ignores every
- * further in-page request — so the blocked state must say where the real
- * switch lives (site settings) instead of offering a button that does
- * nothing. Where the platform has no push at all (iOS Safari in-browser,
- * pre-16.4), the control renders disabled-with-explanation, not hidden.
+ * The push enable/disable CONTAINER, living on the Activity surface (where
+ * the alerts it governs land). It owns the browser permission, the service
+ * worker subscription, the server binding, and the lifetime guards that keep
+ * a late response from a superseded root or an unmounted panel from acting;
+ * `PushSwitch` owns what it looks like (S6). Nothing here renders markup.
  */
-/** The subscription's bound applicationServerKey, in the base64url form the
- *  server hands out — comparable against `pushPublicKey()` directly. */
-function keyToBase64Url(key: ArrayBuffer): string {
-  let bin = "";
-  for (const b of new Uint8Array(key)) bin += String.fromCharCode(b);
-  return btoa(bin).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
-}
-
-type PushState =
-  | "unsupported"
-  | "not-asked"
-  | "blocked"
-  | "subscribed"
-  | "unsubscribed";
 
 export function PushToggle() {
+  const root = useBrainUiRoot();
+  const api = root.api;
+  const lifetime = useRef(new AbortController());
   const [state, setState] = useState<PushState>("unsupported");
   const [busy, setBusy] = useState(false);
 
   useEffect(() => {
+    const controller = new AbortController();
+    const signal = controller.signal;
+    lifetime.current = controller;
+    setState("unsupported");
+    setBusy(false);
     void (async () => {
       if (!("Notification" in window) || !("serviceWorker" in navigator) || !("PushManager" in window)) {
         setState("unsupported");
@@ -47,20 +39,16 @@ export function PushToggle() {
         return;
       }
       const registration = await navigator.serviceWorker.ready;
+      if (signal.aborted) return;
       const subscription = await registration.pushManager.getSubscription();
+      if (signal.aborted) return;
       if (subscription) {
-        // The browser having a subscription doesn't mean the SERVER can
-        // still use it. Two disagreement cases: the server pruned/lost the
-        // row (a dead-endpoint send, a DB restore) — healed by re-asserting,
-        // an idempotent upsert; or the server's VAPID keypair changed, which
-        // makes this subscription permanently unsendable — its
-        // applicationServerKey no longer matches, so drop it and surface the
-        // re-enable button. Offline, trust the browser's own state.
+        // Heal a lost server-side binding, but do not delete a browser
+        // subscription merely because this UI displays a different server.
         try {
           const { publicKey } = await api.pushPublicKey();
-          const boundKey = subscription.options.applicationServerKey;
-          if (boundKey && keyToBase64Url(boundKey) !== publicKey) {
-            await subscription.unsubscribe().catch(() => {});
+          if (signal.aborted) return;
+          if (!subscriptionMatchesKey(subscription, publicKey)) {
             setState("unsubscribed");
             return;
           }
@@ -69,14 +57,17 @@ export function PushToggle() {
           // Server unreachable — keep the browser's answer.
         }
       }
-      setState(subscription ? "subscribed" : "unsubscribed");
-    })();
-  }, []);
+      if (!signal.aborted) setState(subscription ? "subscribed" : "unsubscribed");
+    })().catch(() => { if (!signal.aborted) setState("unsubscribed"); });
+    return () => controller.abort();
+  }, [root, api]);
 
   async function enable() {
+    const signal = lifetime.current.signal;
     setBusy(true);
     try {
       const permission = await Notification.requestPermission();
+      if (signal.aborted) return;
       if (permission === "denied") {
         setState("blocked");
         return;
@@ -86,72 +77,51 @@ export function PushToggle() {
         return;
       }
       const { publicKey } = await api.pushPublicKey();
+      if (signal.aborted) return;
       const registration = await navigator.serviceWorker.ready;
+      if (signal.aborted) return;
+      const existing = await registration.pushManager.getSubscription();
+      if (signal.aborted) return;
+      // Key rotation (or switching servers) is an explicit user action.
+      if (existing && !subscriptionMatchesKey(existing, publicKey)) {
+        await existing.unsubscribe();
+        if (signal.aborted) return;
+      }
       const subscription = await registration.pushManager.subscribe({
         userVisibleOnly: true,
         applicationServerKey: publicKey,
       });
+      if (signal.aborted) return;
       await api.pushSubscribe(subscription.toJSON(), navigator.userAgent.slice(0, 100));
-      setState("subscribed");
+      if (!signal.aborted) setState("subscribed");
     } catch {
-      setState("unsubscribed");
+      if (!signal.aborted) setState("unsubscribed");
     } finally {
-      setBusy(false);
+      if (!signal.aborted) setBusy(false);
     }
   }
 
   async function disable() {
+    const signal = lifetime.current.signal;
     setBusy(true);
     try {
       const registration = await navigator.serviceWorker.ready;
+      if (signal.aborted) return;
       const subscription = await registration.pushManager.getSubscription();
+      if (signal.aborted) return;
       if (subscription) {
         await api.pushUnsubscribe(subscription.endpoint).catch(() => {});
+        if (signal.aborted) return;
         await subscription.unsubscribe();
       }
-      setState("unsubscribed");
+      if (!signal.aborted) setState("unsubscribed");
+    } catch {
+      // Preserve the current state when the browser rejects an unsubscribe.
     } finally {
-      setBusy(false);
+      if (!signal.aborted) setBusy(false);
     }
   }
 
-  if (state === "unsupported") {
-    return (
-      <div className="flex items-center gap-1.5 text-[11px] text-muted-foreground/60" title="This browser has no web push. On iOS, install the app to the home screen (iOS 16.4+).">
-        <BellOff className="h-3.5 w-3.5" />
-        No push here
-      </div>
-    );
-  }
-
-  if (state === "blocked") {
-    return (
-      <div
-        className="flex items-center gap-1.5 text-[11px] text-muted-foreground"
-        title="Notifications are blocked at the browser level. Allow them in this site's browser settings, then reload."
-      >
-        <BellOff className="h-3.5 w-3.5 text-destructive" />
-        Blocked in browser settings
-      </div>
-    );
-  }
-
   const on = state === "subscribed";
-  return (
-    <button
-      type="button"
-      disabled={busy}
-      onClick={() => void (on ? disable() : enable())}
-      className={cn(
-        "flex items-center gap-1.5 rounded-md px-2 py-1 text-[11px] transition-colors disabled:opacity-50",
-        on
-          ? "text-primary hover:bg-surface-raised"
-          : "text-muted-foreground hover:bg-surface-raised hover:text-foreground"
-      )}
-      title={on ? "Push notifications are on for this device" : "Get a push notification when background work fails"}
-    >
-      {on ? <Bell className="h-3.5 w-3.5" /> : <BellOff className="h-3.5 w-3.5" />}
-      {on ? "Push on" : "Enable push"}
-    </button>
-  );
+  return <PushSwitch state={state} busy={busy} onToggle={() => void (on ? disable() : enable())} />;
 }

package/src/components/activity/span-bits.tsx

@@ -1,3 +1,4 @@
+import { useBrainUiRoot } from "../../root-context.js";
 import { useEffect } from "react";
 import { useShallow } from "zustand/react/shallow";
 import { isFailureOutcome, SPAN_TOOL_NAME_PREFIX } from "@schlessera/brain-ui-sdk/protocol";
@@ -11,7 +12,6 @@ import type {
 import {
   useActivityStore,
   payloadEventsFor,
-  loadSpanPayloads,
 } from "../../stores/activity-store.js";
 import { cn } from "../../lib/utils.js";
 import { getToolLabel, formatTokenCount } from "../chat/tool-views.js";
@@ -42,11 +42,11 @@ export function SpanStatusDot({
       className={cn(
         "h-1.5 w-1.5 shrink-0 rounded-full",
         isRunning
-          ? "animate-pulse bg-primary"
+          ? "animate-pulse bg-primary-mark"
           : resolved === "success"
-            ? "bg-accent"
+            ? "bg-accent-mark"
             : isFailureOutcome(resolved) || resolved === "denied"
-              ? "bg-destructive"
+              ? "bg-destructive-mark"
               : "bg-muted-foreground",
         className
       )}
@@ -80,13 +80,14 @@ export function spanToolLabel(span: ActivitySpan): string {
  * the wire `truncated` flag, rendered as a hint line under the block.
  */
 export function SpanPayload({ spanId }: { spanId: string }) {
+  const root = useBrainUiRoot();
   const events = useActivityStore(useShallow((s) => payloadEventsFor(s, spanId)));
   // History fetches skip payload bodies (they exist for duration badges);
   // the first expand of a finished run backfills them over REST. A no-op for
   // live runs (payloads ride the WS deltas) and once per run thereafter.
   useEffect(() => {
-    if (events.length === 0) void loadSpanPayloads(spanId);
-  }, [spanId, events.length]);
+    if (events.length === 0) void root.stores.activity.loadSpanPayloads(spanId);
+  }, [spanId, events.length, root]);
   if (events.length === 0) {
     return (
       <p className="px-2 py-1 text-[11px] text-muted-foreground/60">
@@ -116,12 +117,64 @@ export function eventTypeLabel(eventType: string): string {
   return eventType.replace(/_/g, " ");
 }
 
+// Maps, not object literals: a stored payload is untrusted, and indexing a
+// literal with "toString" or "__proto__" finds Object.prototype, not a miss.
+const DECISION_TEXT = new Map([
+  ["allow", "Allowed"],
+  ["always_allow", "Always allowed"],
+  ["deny", "Denied"],
+]);
+const CHANNEL_TEXT = new Map([
+  ["card", "on the card"],
+  ["voice", "by voice"],
+]);
+
+/**
+ * An `approval_decision` event as a sentence: what was decided and, when the
+ * client said, the channel it was decided on (#113) — "who said yes and how"
+ * is the question the record exists to answer. A decision recorded without a
+ * channel reads as the decision alone rather than guessing one. Anything
+ * this does not recognise returns null and falls back to the raw block.
+ */
+export function readApprovalDecision(
+  payload: unknown
+): { text: string; facts: string | null } | null {
+  if (!payload || typeof payload !== "object") return null;
+  const p = payload as Record<string, unknown>;
+  const decision = typeof p.decision === "string" ? DECISION_TEXT.get(p.decision) : undefined;
+  if (!decision) return null;
+  const channel = typeof p.channel === "string" ? CHANNEL_TEXT.get(p.channel) : undefined;
+  if (p.channel !== undefined && !channel) return null;
+  const facts = [
+    typeof p.principalId === "string" ? `principal ${p.principalId}` : null,
+    p.requestKind === "command" ? "command confirmation" : null,
+  ].filter(Boolean);
+  return {
+    text: channel ? `${decision} ${channel}` : decision,
+    facts: facts.length > 0 ? facts.join(" · ") : null,
+  };
+}
+
 /**
  * ONE labelled block per recorded event — the shared renderer behind the tool
  * payload expander and the run detail's narrative stream, so every event type
  * lands somewhere visible instead of only the two the expander knows.
  */
 export function SpanEventBlock({ event }: { event: ActivitySpanEvent }) {
+  const approval = event.eventType === "approval_decision" ? readApprovalDecision(event.payload) : null;
+  if (approval) {
+    return (
+      <div>
+        <div className="mb-0.5 text-[10px] uppercase text-muted-foreground/60">Approval</div>
+        <p data-testid="approval-decision" className="text-[11px] text-foreground">
+          {approval.text}
+        </p>
+        {approval.facts && (
+          <p className="text-[10px] text-muted-foreground/60">{approval.facts}</p>
+        )}
+      </div>
+    );
+  }
   const text =
     typeof event.payload === "string" ? event.payload : JSON.stringify(event.payload, null, 2);
   return (
@@ -241,7 +294,7 @@ export function CountBadge({ count, className }: { count: number; className?: st
   return (
     <span
       className={cn(
-        "absolute flex h-4 min-w-4 items-center justify-center rounded-full bg-destructive px-1 text-[9px] font-semibold text-white",
+        "absolute flex h-4 min-w-4 items-center justify-center rounded-full bg-destructive-fill px-1 text-[9px] font-semibold text-primary-foreground",
         className
       )}
     >