@schlessera/brain-ui-react 0.18.0 → 0.20.0

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

@@ -0,0 +1,105 @@
+import { useEffect, useState } from "react";
+import { AlertTriangle, Newspaper, X } from "lucide-react";
+
+import { api, type ActivityDigest } from "../../lib/api-client.js";
+import { useUIStore } from "../../stores/ui-store.js";
+import { cn } from "../../lib/utils.js";
+import { digestCostClause } from "./span-bits.js";
+
+/**
+ * The while-you-were-away card: presented PROACTIVELY on app open when a
+ * fresh digest exists (planning decision — built passively, the flow
+ * collapses back into asking the agent what happened). Once per digest:
+ * 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".
+ */
+export function DigestCard() {
+  const [digest, setDigest] = useState<ActivityDigest | null>(null);
+  const [visible, setVisible] = useState(false);
+  const setActiveView = useUIStore((s) => s.setActiveView);
+
+  useEffect(() => {
+    void api
+      .activityDigest()
+      .then(({ digest, dismissedAt }) => {
+        if (!digest || digest.runs === 0) return;
+        if (digest.generatedAt <= dismissedAt) return;
+        setDigest(digest);
+        setVisible(true);
+      })
+      .catch(() => {
+        // No digest is a quiet state, never an error surface.
+      });
+  }, []);
+
+  if (!visible || !digest) return null;
+
+  function dismiss() {
+    setVisible(false);
+    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>
+  );
+}
+
+function formatDay(ms: number): string {
+  return new Date(ms).toLocaleDateString(undefined, { month: "short", day: "numeric" });
+}

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

@@ -0,0 +1,157 @@
+import { useEffect, useState } from "react";
+import { Bell, BellOff } from "lucide-react";
+
+import { api } from "../../lib/api-client.js";
+import { cn } from "../../lib/utils.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 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 [state, setState] = useState<PushState>("unsupported");
+  const [busy, setBusy] = useState(false);
+
+  useEffect(() => {
+    void (async () => {
+      if (!("Notification" in window) || !("serviceWorker" in navigator) || !("PushManager" in window)) {
+        setState("unsupported");
+        return;
+      }
+      if (Notification.permission === "denied") {
+        setState("blocked");
+        return;
+      }
+      if (Notification.permission === "default") {
+        setState("not-asked");
+        return;
+      }
+      const registration = await navigator.serviceWorker.ready;
+      const subscription = await registration.pushManager.getSubscription();
+      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.
+        try {
+          const { publicKey } = await api.pushPublicKey();
+          const boundKey = subscription.options.applicationServerKey;
+          if (boundKey && keyToBase64Url(boundKey) !== publicKey) {
+            await subscription.unsubscribe().catch(() => {});
+            setState("unsubscribed");
+            return;
+          }
+          await api.pushSubscribe(subscription.toJSON(), navigator.userAgent.slice(0, 100));
+        } catch {
+          // Server unreachable — keep the browser's answer.
+        }
+      }
+      setState(subscription ? "subscribed" : "unsubscribed");
+    })();
+  }, []);
+
+  async function enable() {
+    setBusy(true);
+    try {
+      const permission = await Notification.requestPermission();
+      if (permission === "denied") {
+        setState("blocked");
+        return;
+      }
+      if (permission !== "granted") {
+        setState("not-asked");
+        return;
+      }
+      const { publicKey } = await api.pushPublicKey();
+      const registration = await navigator.serviceWorker.ready;
+      const subscription = await registration.pushManager.subscribe({
+        userVisibleOnly: true,
+        applicationServerKey: publicKey,
+      });
+      await api.pushSubscribe(subscription.toJSON(), navigator.userAgent.slice(0, 100));
+      setState("subscribed");
+    } catch {
+      setState("unsubscribed");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function disable() {
+    setBusy(true);
+    try {
+      const registration = await navigator.serviceWorker.ready;
+      const subscription = await registration.pushManager.getSubscription();
+      if (subscription) {
+        await api.pushUnsubscribe(subscription.endpoint).catch(() => {});
+        await subscription.unsubscribe();
+      }
+      setState("unsubscribed");
+    } finally {
+      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>
+  );
+}

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

@@ -0,0 +1,194 @@
+import { useEffect } from "react";
+import { useShallow } from "zustand/react/shallow";
+import { isFailureOutcome, SPAN_TOOL_NAME_PREFIX } from "@schlessera/brain-ui-sdk/protocol";
+import type { ActivitySpan, ActivitySpanOutcome } from "@schlessera/brain-ui-sdk/protocol";
+
+import {
+  useActivityStore,
+  payloadEventsFor,
+  loadSpanPayloads,
+} from "../../stores/activity-store.js";
+import { cn } from "../../lib/utils.js";
+import { getToolLabel } from "../chat/tool-views.js";
+
+/**
+ * THE status dot for activity spans — one outcome→color mapping so every
+ * surface (timeline rows, drill-in, activity index) agrees on what a color
+ * means: running pulses primary, success is accent, failures (per
+ * `isFailureOutcome`) and denied are destructive, cancelled is muted.
+ */
+export function SpanStatusDot({
+  span,
+  outcome,
+  running,
+  className,
+}: {
+  span?: ActivitySpan;
+  /** Alternative to `span` when only the outcome is at hand. */
+  outcome?: ActivitySpanOutcome | string | null;
+  running?: boolean;
+  /** Size/position overrides; defaults to h-1.5 w-1.5. */
+  className?: string;
+}) {
+  const resolved = span ? span.outcome : outcome;
+  const isRunning = running ?? (span !== undefined && span.outcome === undefined);
+  return (
+    <span
+      className={cn(
+        "h-1.5 w-1.5 shrink-0 rounded-full",
+        isRunning
+          ? "animate-pulse bg-primary"
+          : resolved === "success"
+            ? "bg-accent"
+            : isFailureOutcome(resolved) || resolved === "denied"
+              ? "bg-destructive"
+              : "bg-muted-foreground",
+        className
+      )}
+    />
+  );
+}
+
+/**
+ * Display label for a span. Prefers the server-lifted `toolName`; root spans
+ * label by kind (a turn or cron root is not a tool call); the last resort
+ * un-parses the `execute_tool` naming convention for spans recorded before
+ * the field existed.
+ */
+export function spanToolLabel(span: ActivitySpan): string {
+  if (span.toolName) return getToolLabel(span.toolName);
+  if (span.kind === "turn") return "Turn";
+  if (span.kind === "cron") return span.jobName ?? span.name;
+  return getToolLabel(
+    span.name.startsWith(SPAN_TOOL_NAME_PREFIX)
+      ? span.name.slice(SPAN_TOOL_NAME_PREFIX.length)
+      : span.name
+  );
+}
+
+/**
+ * The recorded input/output of one tool span, expanded under its row — the
+ * ONE payload renderer shared by the subagent drill-in and the run detail.
+ * Mounted only while expanded (collapsed rows never subscribe). A span with
+ * no payload events (recorded before capture shipped) states so instead of
+ * offering an empty block (AE7); a payload clipped at persist time carries
+ * the wire `truncated` flag, rendered as a hint line under the block.
+ */
+export function SpanPayload({ spanId }: { spanId: string }) {
+  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) {
+    return (
+      <p className="px-2 py-1 text-[11px] text-muted-foreground/60">
+        No payload recorded for this run.
+      </p>
+    );
+  }
+  return (
+    <div className="space-y-1.5 px-2 py-1">
+      {events.map((event) => (
+        <div key={`${event.spanId}:${event.eventIndex}`}>
+          <div className="mb-0.5 text-[10px] uppercase text-muted-foreground/60">
+            {event.eventType === "tool_input" ? "Input" : "Output"}
+          </div>
+          <pre className="max-h-56 overflow-auto whitespace-pre-wrap break-words rounded-md bg-background/60 p-2 font-[family-name:var(--font-mono)] text-[11px] leading-relaxed text-muted-foreground">
+            {typeof event.payload === "string" ? event.payload : JSON.stringify(event.payload)}
+          </pre>
+          {event.truncated && (
+            <p className="mt-0.5 text-[10px] italic text-muted-foreground/60">… truncated</p>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+/**
+ * THE effective-cost glyph — one three-state rule so no surface ever renders
+ * an unknown cost as $0.00 (AE3): absent/NULL is "—" (we don't know), 0 is
+ * "free" (we know — subscription-billed or genuinely zero), positive is
+ * dollars, "~"-prefixed when computed from estimated rates. Sub-cent costs
+ * floor at "<$0.01" rather than rounding down to a zero look-alike.
+ */
+export function formatEffectiveCost(
+  costUsd: number | null | undefined,
+  estimate?: boolean
+): string {
+  if (costUsd === null || costUsd === undefined) return "—";
+  if (costUsd === 0) return "free";
+  const amount = costUsd < 0.005 ? "<$0.01" : `$${costUsd.toFixed(2)}`;
+  return estimate ? `~${amount}` : amount;
+}
+
+/**
+ * An aggregate's effective-cost sum. Sums exclude unknown-cost runs, so a
+ * nonzero `unpricedRuns` makes the number a floor ("≥ $X"), never a total.
+ * A known sub-cent sum floors at "<$0.01" like the per-run glyph — only an
+ * exact 0 (genuinely nothing to add up) renders "$0.00" (AE3).
+ */
+export function formatAggregateCost(effectiveUsd: number, unpricedRuns: number): string {
+  const amount =
+    effectiveUsd > 0 && effectiveUsd < 0.005 ? "<$0.01" : `$${effectiveUsd.toFixed(2)}`;
+  return unpricedRuns > 0 ? `≥ ${amount}` : amount;
+}
+
+/**
+ * A run row's cost text, three-way on `effectiveCostUsd`: ABSENT means a
+ * pre-pricing server never sent the field — fall back to the original
+ * list-cost rendering (a positive `costUsd`, else nothing) instead of
+ * claiming unknown; explicit null means THIS server computed "unknown" and
+ * renders the em dash; a number goes through `formatEffectiveCost` (AE3).
+ */
+export function runCostText(run: {
+  costUsd: number | null;
+  effectiveCostUsd?: number | null;
+  pricingEstimate?: boolean;
+}): string | null {
+  if (run.effectiveCostUsd === undefined) {
+    return run.costUsd !== null && run.costUsd > 0 ? `$${run.costUsd.toFixed(2)}` : null;
+  }
+  return formatEffectiveCost(run.effectiveCostUsd, run.pricingEstimate);
+}
+
+/**
+ * The digest card's cost clause (no leading separator), effective-only, or
+ * null for "say nothing". A digest persisted before pricing shipped carries
+ * neither new field and keeps its old list-cost clause.
+ */
+export function digestCostClause(digest: {
+  costUsd: number;
+  effectiveCostUsd?: number;
+  unpricedRuns?: number;
+}): string | null {
+  if (digest.effectiveCostUsd === undefined) {
+    return digest.costUsd > 0 ? `$${digest.costUsd.toFixed(2)} spent` : null;
+  }
+  const unpriced = digest.unpricedRuns ?? 0;
+  const qualifier = unpriced > 0 ? ` (${unpriced} unpriced)` : "";
+  if (digest.effectiveCostUsd > 0) {
+    return `${formatAggregateCost(digest.effectiveCostUsd, unpriced)} spent${qualifier}`;
+  }
+  // Known-zero spend: nothing to add up, but the unknowns still get named.
+  if (unpriced > 0) return `${unpriced} unpriced`;
+  return "free";
+}
+
+/** The "9+" unread-count bubble shared by the rail and the tab bar. Hidden at 0. */
+export function CountBadge({ count, className }: { count: number; className?: string }) {
+  if (count <= 0) return null;
+  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",
+        className
+      )}
+    >
+      {count > 9 ? "9+" : count}
+    </span>
+  );
+}

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

@@ -33,6 +33,8 @@ import { WelcomeState } from "./welcome-state.js";
 import { ShareIntake } from "./share-card.js";
 import { CommandPalette } from "./command-palette.js";
 import { SessionDrawer } from "./session-drawer.js";
+import { SubagentView } from "./subagent-view.js";
+import { DigestCard } from "../activity/digest-card.js";
 import { SettingsPanel } from "../settings/settings-panel.js";
 import { StreamingPanel } from "../quick-actions/streaming-modal.js";
 import { WhatsupPanel } from "../quick-actions/whatsup-modal.js";
@@ -125,6 +127,7 @@ export function ChatPage() {
 
   const sessionPanelOpen = useUIStore((s) => s.sessionPanelOpen);
   const setSessionPanelOpen = useUIStore((s) => s.setSessionPanelOpen);
+  const subagentStack = useUIStore((s) => s.subagentStack);
   const syncPanelOpen = useUIStore((s) => s.syncPanelOpen);
   const setSyncPanelOpen = useUIStore((s) => s.setSyncPanelOpen);
   const whatsupPanelOpen = useUIStore((s) => s.whatsupPanelOpen);
@@ -521,6 +524,17 @@ export function ChatPage() {
         }
       />
 
+      {/* Subagent drill-in: an overlay stack — chat is the residence, the
+          drill-in opens over it and backs out level by level. */}
+      {subagentStack.length > 0 && (
+        <div className="fixed inset-0 z-40 bg-background">
+          <SubagentView
+            spanId={subagentStack[subagentStack.length - 1]!}
+            onApproval={handleToolApproval}
+          />
+        </div>
+      )}
+
       {/* Panels */}
       <SessionDrawer
         open={sessionPanelOpen}
@@ -558,6 +572,9 @@ export function ChatPage() {
       <div className="relative flex-1 overflow-hidden">
         {messages.length === 0 ? (
           <div className="h-full overflow-y-auto">
+            <div className="px-4 pt-3 md:px-6">
+              <DigestCard />
+            </div>
             <WelcomeState onAction={handleWelcomeAction} />
           </div>
         ) : (

package/src/components/chat/session-drawer.tsx

@@ -4,6 +4,7 @@ import { api } from "../../lib/api-client.js";
 import { useChatStore } from "../../stores/chat-store.js";
 import { SlidePanel } from "../layout/slide-panel.js";
 import { cn } from "../../lib/utils.js";
+import { formatRelativeTime } from "./tool-views.js";
 
 interface SessionInfo {
   id: string;
@@ -215,15 +216,3 @@ function groupSessionsByDate(sessions: SessionInfo[]): GroupedSessions[] {
     .filter(([, sessions]) => sessions.length > 0)
     .map(([label, sessions]) => ({ label, sessions }));
 }
-
-function formatRelativeTime(ms: number): string {
-  const diff = Date.now() - ms;
-  const minutes = Math.floor(diff / 60000);
-  if (minutes < 1) return "just now";
-  if (minutes < 60) return `${minutes}m ago`;
-  const hours = Math.floor(minutes / 60);
-  if (hours < 24) return `${hours}h ago`;
-  const days = Math.floor(hours / 24);
-  if (days < 7) return `${days}d ago`;
-  return new Date(ms).toLocaleDateString();
-}