@schlessera/brain-ui-react 0.34.1 → 0.36.0

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">
@@ -241,7 +242,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
       )}
     >