@schlessera/brain-ui-react 0.19.0 → 0.21.0

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

@@ -1,9 +1,10 @@
-import { useEffect, useMemo, useState } from "react";
+import { Fragment, useEffect, useMemo, useState, type ReactNode } from "react";
 import {
   Activity as ActivityIcon,
   AlertTriangle,
   ArrowLeft,
   Bot,
+  ChevronRight,
   Clock,
   RefreshCw,
   Timer,
@@ -16,11 +17,17 @@ import {
   api,
   type ActivityIntent,
   type ActivityRollups,
+  type ActivityRunRollup,
   type ActivityRunSummary,
 } from "../../lib/api-client.js";
 import { sendClientMessage } from "../../hooks/use-websocket.js";
 import { useNow } from "../../hooks/use-now.js";
-import { useActivityStore, runSpans } from "../../stores/activity-store.js";
+import {
+  useActivityStore,
+  narrativeEventsFor,
+  runEvents,
+  runSpans,
+} from "../../stores/activity-store.js";
 import { useChatStore } from "../../stores/chat-store.js";
 import { useUIStore } from "../../stores/ui-store.js";
 import { cn } from "../../lib/utils.js";
@@ -29,8 +36,18 @@ import {
   formatRelativeTime,
   formatTokenCount,
 } from "../chat/tool-views.js";
-import { SpanStatusDot, spanToolLabel } from "./span-bits.js";
+import {
+  SpanEventBlock,
+  SpanPayload,
+  SpanStatusDot,
+  formatAggregateCost,
+  formatEffectiveCost,
+  formatSpanUsage,
+  runCostText,
+  spanToolLabel,
+} from "./span-bits.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,
@@ -46,11 +63,15 @@ export function ActivityPage() {
   const connectionEpoch = useActivityStore((s) => s.connectionEpoch);
   const liveSpans = useActivityStore((s) => s.spans);
   const setActiveView = useUIStore((s) => s.setActiveView);
+  const openSettings = useUIStore((s) => s.openSettings);
+  const settingsPanelOpen = useUIStore((s) => s.settingsPanelOpen);
+  const setSettingsPanelOpen = useUIStore((s) => s.setSettingsPanelOpen);
   const setActiveSession = useChatStore((s) => s.setActiveSession);
   const [runs, setRuns] = useState<{ live: ActivityRunSummary[]; history: ActivityRunSummary[] } | null>(null);
   const [rollups, setRollups] = useState<ActivityRollups | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [detailRunId, setDetailRunId] = useState<string | null>(null);
+  const [pricingStale, setPricingStale] = useState(false);
 
   const inbox = useActivityStore((s) => s.inbox);
   const loadInbox = useActivityStore((s) => s.loadInbox);
@@ -63,6 +84,13 @@ export function ActivityPage() {
       .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));
     void loadInbox();
   };
 
@@ -156,10 +184,29 @@ export function ActivityPage() {
 
   return (
     <div className="flex h-full flex-col overflow-y-auto">
+      {/* 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. */}
+      <SettingsPanel
+        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
@@ -295,10 +342,16 @@ function RollupCards({ rollups }: { rollups: ActivityRollups }) {
       runs: acc.runs + d.runs,
       failures: acc.failures + d.failures,
       costUsd: acc.costUsd + d.costUsd,
+      effectiveCostUsd: acc.effectiveCostUsd + (d.effectiveCostUsd ?? 0),
+      unpricedRuns: acc.unpricedRuns + (d.unpricedRuns ?? 0),
       tokens: acc.tokens + d.inputTokens + d.outputTokens,
     }),
-    { runs: 0, failures: 0, costUsd: 0, tokens: 0 }
+    { runs: 0, failures: 0, costUsd: 0, effectiveCostUsd: 0, unpricedRuns: 0, tokens: 0 }
   );
+  // A server that predates pricing omits the effective fields entirely; the
+  // card then keeps its single list-price number instead of claiming an
+  // effective $0.00 it never computed.
+  const hasEffective = rollups.days.some((d) => d.effectiveCostUsd !== undefined);
   return (
     <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
       <StatCard label="Runs today" value={String(today?.runs ?? 0)} />
@@ -307,16 +360,51 @@ function RollupCards({ rollups }: { rollups: ActivityRollups }) {
         value={String(week.failures)}
         alert={week.failures > 0}
       />
-      <StatCard label="Spend (7d)" value={`$${week.costUsd.toFixed(2)}`} />
+      <StatCard
+        label="Spend (7d)"
+        value={
+          hasEffective
+            ? formatAggregateCost(week.effectiveCostUsd, week.unpricedRuns)
+            : `$${week.costUsd.toFixed(2)}`
+        }
+        secondary={
+          hasEffective && (
+            <>
+              list ${week.costUsd.toFixed(2)}
+              {week.unpricedRuns > 0 && (
+                <>
+                  {/* Two cards per row below `sm`: the qualifier compacts. */}
+                  <span className="hidden sm:inline"> · {week.unpricedRuns} unpriced</span>
+                  <span className="sm:hidden"> · {week.unpricedRuns}?</span>
+                </>
+              )}
+            </>
+          )
+        }
+      />
       <StatCard label="Tokens (7d)" value={formatTokenCount(week.tokens)} />
     </div>
   );
 }
 
-function StatCard({ label, value, alert }: { label: string; value: string; alert?: boolean }) {
+function StatCard({
+  label,
+  value,
+  secondary,
+  alert,
+}: {
+  label: string;
+  value: string;
+  /** Muted small line between the value and the label (e.g. the list-cost qualifier). */
+  secondary?: ReactNode;
+  alert?: boolean;
+}) {
   return (
     <div className="rounded-lg border border-border-subtle bg-surface p-3">
       <div className={cn("text-lg font-semibold", alert && "text-destructive")}>{value}</div>
+      {secondary && (
+        <div className="truncate text-[10px] text-muted-foreground/70">{secondary}</div>
+      )}
       <div className="text-[11px] text-muted-foreground">{label}</div>
     </div>
   );
@@ -370,6 +458,10 @@ function RunRow({
   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);
   return (
     <button
       type="button"
@@ -392,7 +484,7 @@ function RunRow({
         </span>
       )}
       <span className="ml-auto flex shrink-0 items-center gap-2 font-[family-name:var(--font-mono)] text-[10px] text-muted-foreground/60">
-        {run.costUsd !== null && run.costUsd > 0 && <span>${run.costUsd.toFixed(2)}</span>}
+        {cost !== null && <span>{cost}</span>}
         {run.durationMs !== null && (
           <span className="flex items-center gap-0.5">
             <Timer className="h-3 w-3" />
@@ -405,17 +497,28 @@ function RunRow({
   );
 }
 
-/** Chat-less run detail (cron runs; pruned runs show their rollup). */
+/**
+ * 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.
+ */
 function RunDetail({ runId, onBack }: { runId: string; onBack: () => void }) {
   const streamed = useActivityStore(useShallow((s) => runSpans(s, runId)));
+  const events = useActivityStore(useShallow((s) => runEvents(s, runId)));
   const applySnapshot = useActivityStore((s) => s.applySnapshot);
   const [pruned, setPruned] = useState<object | null>(null);
+  const [rollup, setRollup] = useState<ActivityRunRollup | null>(null);
   const [missing, setMissing] = useState(false);
+  const [rawOpen, setRawOpen] = useState(false);
 
   useEffect(() => {
     api
-      .activityRun(runId)
+      // Payload bodies are excluded from run detail by default; this view's
+      // rows expand to them, so opt in.
+      .activityRun(runId, { includePayloads: true })
       .then((detail) => {
+        if (detail.rollup) setRollup(detail.rollup);
         if (detail.detailPruned) {
           setPruned(detail.rollup ?? {});
         } else if (detail.spans) {
@@ -432,6 +535,27 @@ function RunDetail({ runId, onBack }: { runId: string; onBack: () => void }) {
       .catch(() => setMissing(true));
   }, [runId, applySnapshot]);
 
+  const root = streamed.find((s) => !s.parentSpanId);
+  const title = rollup?.jobName ?? rollup?.name ?? (root ? spanToolLabel(root) : runId);
+  // The root carries the run's usage for backend-recorded turns; a run whose
+  // usage only exists on children (the span-sink shape) sums them instead.
+  // Never both, so nothing is double-counted.
+  const totalUsage = useMemo(() => {
+    if (root?.usage) return formatSpanUsage(root);
+    const children = streamed.filter((s) => s.parentSpanId && s.usage);
+    if (children.length === 0) return null;
+    const sum = children.reduce(
+      (acc, s) => ({
+        inputTokens: acc.inputTokens + (s.usage?.inputTokens ?? 0),
+        outputTokens: acc.outputTokens + (s.usage?.outputTokens ?? 0),
+        cacheReadTokens: acc.cacheReadTokens + (s.usage?.cacheReadTokens ?? 0),
+        cacheCreationTokens: acc.cacheCreationTokens + (s.usage?.cacheCreationTokens ?? 0),
+      }),
+      { inputTokens: 0, outputTokens: 0, cacheReadTokens: 0, cacheCreationTokens: 0 }
+    );
+    return formatSpanUsage({ ...children[0]!, usage: { ...sum, model: undefined } });
+  }, [root, streamed]);
+
   return (
     <div className="flex h-full flex-col overflow-y-auto">
       <div className="flex items-center gap-2 border-b border-border-subtle px-4 py-3">
@@ -443,10 +567,57 @@ function RunDetail({ runId, onBack }: { runId: string; onBack: () => void }) {
         >
           <ArrowLeft className="h-4 w-4" />
         </button>
-        <h1 className="truncate text-sm font-medium">{runId}</h1>
+        <div className="min-w-0 flex-1">
+          <h1 className="truncate text-sm font-medium">{title}</h1>
+          <p className="truncate font-[family-name:var(--font-mono)] text-[10px] text-muted-foreground/60">
+            {runId}
+          </p>
+        </div>
       </div>
       <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>
+        )}
         {pruned && (
           <div className="rounded-lg border border-border-subtle bg-surface p-3 text-xs text-muted-foreground">
             Detail pruned — only the rollup remains.
@@ -454,35 +625,139 @@ function RunDetail({ runId, onBack }: { runId: string; onBack: () => void }) {
           </div>
         )}
         {streamed.map((span) => (
-          <div
-            key={span.spanId}
-            className="flex items-center gap-2 text-xs text-muted-foreground"
-            style={{ paddingLeft: `${depthOf(span, streamed) * 16}px` }}
-          >
-            <SpanStatusDot span={span} />
-            <span className="truncate font-[family-name:var(--font-mono)]">
-              {spanToolLabel(span)}
-            </span>
-            {span.outcome && span.outcome !== "success" && (
-              <span className="text-[10px] uppercase">{span.outcome}</span>
-            )}
-            {span.outcomeReason && (
-              <span className="truncate text-[10px] text-muted-foreground/60">
-                {span.outcomeReason}
-              </span>
+          <DetailSpanRow key={span.spanId} span={span} depth={depthOf(span, streamed)} />
+        ))}
+        {!pruned && !missing && streamed.length === 0 && (
+          <p className="text-xs text-muted-foreground">No spans recorded for this run.</p>
+        )}
+        {/* The escape hatch: whatever the rendered tree has no opinion about
+            is still readable here, so the view is never LESS than the trace. */}
+        {streamed.length > 0 && (
+          <div className="pt-3">
+            <button
+              type="button"
+              onClick={() => setRawOpen((v) => !v)}
+              className="flex items-center gap-1 text-[11px] text-muted-foreground transition-colors hover:text-foreground"
+            >
+              <ChevronRight
+                className={cn("h-3 w-3 transition-transform", rawOpen && "rotate-90")}
+              />
+              Raw trace
+            </button>
+            {rawOpen && (
+              <pre className="mt-1 max-h-[60vh] overflow-auto rounded-lg border border-border-subtle bg-surface p-2 font-[family-name:var(--font-mono)] text-[10px] leading-relaxed text-muted-foreground">
+                {JSON.stringify({ runId, rollup, spans: streamed, events }, null, 2)}
+              </pre>
             )}
-            <span className="ml-auto shrink-0 font-[family-name:var(--font-mono)] text-[10px] text-muted-foreground/50">
-              {span.endedAt !== undefined
-                ? formatDuration(span.endedAt - span.startedAt)
-                : "…"}
-            </span>
           </div>
-        ))}
+        )}
       </div>
     </div>
   );
 }
 
+/**
+ * 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
+ * affordance is the point: a cron root or a turn root used to be a dead dot
+ * with a duration, which is strictly less than the trace it was summarizing.
+ */
+function DetailSpanRow({ span, depth }: { span: ActivitySpan; depth: number }) {
+  const [expanded, setExpanded] = useState(false);
+  const usage = formatSpanUsage(span);
+  // Approval wait is not execution — same boundary the subagent drill-in uses.
+  const duration =
+    span.endedAt !== undefined
+      ? formatDuration(span.endedAt - (span.waitUntil ?? span.startedAt))
+      : "…";
+  return (
+    <div style={{ paddingLeft: `${depth * 16}px` }}>
+      <div
+        className="flex cursor-pointer items-center gap-2 text-xs text-muted-foreground hover:text-foreground"
+        onClick={() => setExpanded((v) => !v)}
+      >
+        <SpanStatusDot span={span} />
+        <span className="truncate font-[family-name:var(--font-mono)]">
+          {spanToolLabel(span)}
+        </span>
+        {span.kind !== "tool" && (
+          <span className="shrink-0 rounded bg-surface-raised px-1 text-[9px] uppercase text-muted-foreground/70">
+            {span.kind}
+          </span>
+        )}
+        {span.outcome && span.outcome !== "success" && (
+          <span className="text-[10px] uppercase">{span.outcome}</span>
+        )}
+        {span.outcomeReason && (
+          <span className="truncate text-[10px] text-muted-foreground/60">
+            {span.outcomeReason}
+          </span>
+        )}
+        <span className="ml-auto flex shrink-0 items-center gap-2 font-[family-name:var(--font-mono)] text-[10px] text-muted-foreground/50">
+          {usage && <span className="hidden sm:inline">{usage}</span>}
+          <span>{duration}</span>
+        </span>
+        <ChevronRight
+          className={cn("h-3 w-3 shrink-0 transition-transform", expanded && "rotate-90")}
+        />
+      </div>
+      {expanded && <DetailSpanBody span={span} usage={usage} />}
+    </div>
+  );
+}
+
+/** Everything recorded against one span, under its row. */
+function DetailSpanBody({ span, usage }: { span: ActivitySpan; usage: string | null }) {
+  const narrative = useActivityStore(useShallow((s) => narrativeEventsFor(s, span.spanId)));
+  const attrs = Object.entries(span.attrs ?? {});
+  return (
+    <div className="mb-1 ml-1 space-y-1.5 border-l border-border-subtle pl-2 pt-1">
+      <div className="flex flex-wrap gap-x-3 gap-y-0.5 px-2 text-[10px] text-muted-foreground/70">
+        <span>started {new Date(span.startedAt).toLocaleString()}</span>
+        {span.waitUntil !== undefined && (
+          <span>approval wait {formatDuration(span.waitUntil - span.startedAt)}</span>
+        )}
+        {usage && <span className="font-[family-name:var(--font-mono)]">{usage}</span>}
+        {span.usage?.costUsd !== undefined && (
+          <span className="font-[family-name:var(--font-mono)]">
+            {formatEffectiveCost(span.usage.costUsd)} list
+          </span>
+        )}
+      </div>
+      {span.subagent?.summary && (
+        <p className="px-2 text-[11px] text-muted-foreground">{span.subagent.summary}</p>
+      )}
+      {attrs.length > 0 && (
+        <dl className="grid grid-cols-[minmax(0,auto)_minmax(0,1fr)] gap-x-2 gap-y-0.5 px-2 text-[10px]">
+          {attrs.map(([key, value]) => (
+            <Fragment key={key}>
+              <dt className="truncate font-[family-name:var(--font-mono)] text-muted-foreground/60">
+                {key}
+              </dt>
+              <dd className="min-w-0 break-words font-[family-name:var(--font-mono)] text-muted-foreground">
+                {typeof value === "string" ? value : JSON.stringify(value)}
+              </dd>
+            </Fragment>
+          ))}
+        </dl>
+      )}
+      {narrative.length > 0 && (
+        <div className="space-y-1.5 px-2">
+          {narrative.map((event) => (
+            <SpanEventBlock key={`${event.spanId}:${event.eventIndex}`} event={event} />
+          ))}
+        </div>
+      )}
+      {span.kind === "tool" && <SpanPayload spanId={span.spanId} />}
+      {span.kind !== "tool" && narrative.length === 0 && attrs.length === 0 && (
+        <p className="px-2 text-[11px] text-muted-foreground/60">
+          Nothing else recorded for this step.
+        </p>
+      )}
+    </div>
+  );
+}
+
 function depthOf(span: ActivitySpan, all: ActivitySpan[]): number {
   let depth = 0;
   let current: ActivitySpan | undefined = span;

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

@@ -4,6 +4,7 @@ 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
@@ -40,6 +41,9 @@ export function DigestCard() {
   }
 
   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
@@ -68,7 +72,7 @@ export function DigestCard() {
         {digest.failures > 0 && (
           <span className="text-destructive"> · {digest.failures} failed</span>
         )}
-        {digest.costUsd > 0 && ` · $${digest.costUsd.toFixed(2)} spent`}
+        {costClause && ` · ${costClause}`}
       </div>
       {digest.notable.length > 0 && (
         <div className="mt-1.5 space-y-0.5">

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

@@ -13,6 +13,14 @@ import { cn } from "../../lib/utils.js";
  * 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"
@@ -40,6 +48,27 @@ export function PushToggle() {
       }
       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");
     })();
   }, []);