@schlessera/brain-ui-react 0.19.0 → 0.20.0

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");
     })();
   }, []);

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

@@ -1,6 +1,13 @@
-import { isFailureOutcome } from "@schlessera/brain-ui-sdk/protocol";
+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";
 
@@ -52,7 +59,123 @@ 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.replace(/^execute_tool /, ""));
+  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. */

package/src/components/chat/subagent-view.tsx

@@ -1,5 +1,5 @@
-import { useMemo } from "react";
-import { ArrowLeft, Bot, Check, X } from "lucide-react";
+import { useMemo, useState } from "react";
+import { ArrowLeft, Bot, Check, ChevronRight, X } from "lucide-react";
 import { motion } from "framer-motion";
 import { useShallow } from "zustand/react/shallow";
 import { isFailureOutcome } from "@schlessera/brain-ui-sdk/protocol";
@@ -10,7 +10,7 @@ import { useUIStore } from "../../stores/ui-store.js";
 import { useChatStore, activeChat } from "../../stores/chat-store.js";
 import { cn } from "../../lib/utils.js";
 import { getToolLabel, formatDuration } from "./tool-views.js";
-import { SpanStatusDot, spanToolLabel } from "../activity/span-bits.js";
+import { SpanPayload, SpanStatusDot, spanToolLabel } from "../activity/span-bits.js";
 
 /**
  * Drill-in view of one subagent: the span tree under its Agent tool call,
@@ -171,33 +171,43 @@ function BackButton({ onClick }: { onClick: () => void }) {
 }
 
 function SpanRow({ span, onOpen }: { span: ActivitySpan; onOpen?: () => void }) {
+  // Tool rows expand to their recorded payload (AE7); a pre-feature span
+  // expands to the no-payload notice, so the affordance stays uniform.
+  const [expanded, setExpanded] = useState(false);
   const running = span.outcome === undefined;
   const failed = isFailureOutcome(span.outcome);
+  const expandable = !onOpen && span.kind === "tool";
   const duration =
     span.endedAt !== undefined
       ? formatDuration(span.endedAt - (span.waitUntil ?? span.startedAt))
       : null;
   return (
-    <motion.div
-      initial={{ opacity: 0, y: 2 }}
-      animate={{ opacity: 1, y: 0 }}
-      className={cn(
-        "flex items-center gap-2 rounded-md px-2 py-1.5 text-xs",
-        failed ? "text-destructive/80" : "text-muted-foreground",
-        onOpen && "cursor-pointer hover:text-foreground"
-      )}
-      onClick={onOpen}
-    >
-      <SpanStatusDot span={span} className="h-2 w-2" />
-      <span className="font-[family-name:var(--font-mono)] font-medium">
-        {spanToolLabel(span)}
-      </span>
-      {span.outcome && span.outcome !== "success" && (
-        <span className="text-[10px] uppercase">{span.outcome}</span>
-      )}
-      <span className="ml-auto font-[family-name:var(--font-mono)] text-[10px] text-muted-foreground/50">
-        {duration ?? (running ? "…" : "")}
-      </span>
+    <motion.div initial={{ opacity: 0, y: 2 }} animate={{ opacity: 1, y: 0 }}>
+      <div
+        className={cn(
+          "flex items-center gap-2 rounded-md px-2 py-1.5 text-xs",
+          failed ? "text-destructive/80" : "text-muted-foreground",
+          (onOpen || expandable) && "cursor-pointer hover:text-foreground"
+        )}
+        onClick={onOpen ?? (expandable ? () => setExpanded((v) => !v) : undefined)}
+      >
+        <SpanStatusDot span={span} className="h-2 w-2" />
+        <span className="font-[family-name:var(--font-mono)] font-medium">
+          {spanToolLabel(span)}
+        </span>
+        {span.outcome && span.outcome !== "success" && (
+          <span className="text-[10px] uppercase">{span.outcome}</span>
+        )}
+        <span className="ml-auto font-[family-name:var(--font-mono)] text-[10px] text-muted-foreground/50">
+          {duration ?? (running ? "…" : "")}
+        </span>
+        {expandable && (
+          <ChevronRight
+            className={cn("h-3 w-3 shrink-0 transition-transform", expanded && "rotate-90")}
+          />
+        )}
+      </div>
+      {expanded && <SpanPayload spanId={span.spanId} />}
     </motion.div>
   );
 }

package/src/components/settings/models-tab.tsx

@@ -1,6 +1,7 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Eye, EyeOff, Loader2, RefreshCw } from "lucide-react";
 import type {
+  BillingMode,
   ModelCatalogEntry,
   ModelCatalogResponse,
 } from "@schlessera/brain-ui-sdk/protocol";
@@ -21,6 +22,9 @@ export function ModelsTab({ active }: { active: boolean }) {
   const [refreshing, setRefreshing] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const loadProviders = useProviderStore((s) => s.loadProviders);
+  const commitGate = useRef(createRequestGate());
+  /** Serializes full-record PUTs — see commitCatalog. */
+  const commitQueue = useRef<Promise<void>>(Promise.resolve());
 
   useEffect(() => {
     if (!active) return;
@@ -45,34 +49,86 @@ export function ModelsTab({ active }: { active: boolean }) {
     };
   }, [active]);
 
+  /**
+   * Optimistic-update skeleton shared by the hidden toggle and the billing
+   * select: the change is the user's own click, so reflect it immediately,
+   * commit, then reload the composer picker's own roster copy (fetched once
+   * on mount, it would otherwise lag until a page reload). A failed write
+   * rolls back and surfaces the error.
+   *
+   * Ordered through `createRequestGate`: two rows edited within one
+   * round-trip interleave, and without the guard the FIRST response (or its
+   * failure rollback) lands last and silently overwrites the newer edit. A
+   * superseded response/rollback is dropped — the newer request's payload
+   * was built on top of this one's optimistic state, so it already carries
+   * this change (and its own catch surfaces any error that still matters).
+   */
+  async function commitCatalog(
+    optimistic: ModelCatalogResponse,
+    commit: () => Promise<ModelCatalogResponse>
+  ) {
+    const isCurrent = commitGate.current.begin();
+    const previous = catalog;
+    setCatalog(optimistic);
+    setError(null);
+    // The gate drops superseded RESPONSES; this queue serializes the WRITES.
+    // Both matter: the server stores full records, so two concurrent PUTs
+    // could land older-last and silently clobber the newer record server-side
+    // even while the client looked right. Each commit waits for the previous
+    // one to settle; payloads are built on optimistic state, so the newest
+    // write already carries every earlier edit.
+    const run = commitQueue.current.then(async () => {
+      try {
+        const confirmed = await commit();
+        if (isCurrent()) setCatalog(confirmed);
+        void loadProviders();
+      } catch (err) {
+        if (isCurrent()) {
+          setCatalog(previous);
+          setError(err instanceof Error ? err.message : "Could not save");
+        }
+      }
+    });
+    commitQueue.current = run;
+    await run;
+  }
+
   async function toggleHidden(entry: ModelCatalogEntry) {
     if (!catalog) return;
-    const previous = catalog;
     const hidden = catalog.models
       .filter((model) =>
         model.id === entry.id ? !entry.hidden : model.hidden
       )
       .map((model) => model.id);
 
-    // Optimistic: the list is the user's own click, so reflect it immediately
-    // and roll back if the write fails.
-    setCatalog({
-      ...catalog,
-      models: catalog.models.map((model) =>
-        model.id === entry.id ? { ...model, hidden: !model.hidden } : model
-      ),
-    });
-    setError(null);
-    try {
-      setCatalog(await api.setHiddenModels(hidden));
-      // The composer's picker holds its own copy of the roster, fetched once on
-      // mount — without this it keeps offering a model the user just hid until
-      // the page is reloaded.
-      void loadProviders();
-    } catch (err) {
-      setCatalog(previous);
-      setError(err instanceof Error ? err.message : "Could not save");
-    }
+    await commitCatalog(
+      {
+        ...catalog,
+        models: catalog.models.map((model) =>
+          model.id === entry.id ? { ...model, hidden: !model.hidden } : model
+        ),
+      },
+      () => api.setHiddenModels(hidden)
+    );
+  }
+
+  async function changeBilling(entry: ModelCatalogEntry, next: BillingMode | "auto") {
+    if (!catalog) return;
+
+    // What "auto" resolves to is only known server-side, so switching back to
+    // auto keeps the current resolved mode until the confirmed catalog
+    // corrects it a beat later.
+    await commitCatalog(
+      {
+        ...catalog,
+        models: catalog.models.map((model) => {
+          if (model.id !== entry.id) return model;
+          const { billingOverride: _cleared, ...base } = model;
+          return next === "auto" ? base : { ...base, billingOverride: next, billingMode: next };
+        }),
+      },
+      () => api.setBillingOverrides(nextBillingOverrides(catalog.models, entry.id, next))
+    );
   }
 
   async function onRefresh() {
@@ -115,6 +171,7 @@ export function ModelsTab({ active }: { active: boolean }) {
                 key={entry.id}
                 entry={entry}
                 onToggle={() => toggleHidden(entry)}
+                onBilling={(next) => changeBilling(entry, next)}
               />
             ))}
             {catalog?.models.length === 0 && (
@@ -162,12 +219,51 @@ export function ModelsTab({ active }: { active: boolean }) {
   );
 }
 
+/**
+ * Request-ordering guard for optimistic commits: `begin()` claims a token
+ * and returns a predicate that holds only while no later request has begun.
+ * An older in-flight request must never write over a newer edit's state.
+ */
+export function createRequestGate(): { begin: () => () => boolean } {
+  let seq = 0;
+  return {
+    begin() {
+      const token = ++seq;
+      return () => seq === token;
+    },
+  };
+}
+
+/**
+ * The billing-override record PUT after changing one profile: every other
+ * profile keeps its stored override, the changed one is set — or, for "auto",
+ * REMOVED, never stored as a redundant explicit value.
+ */
+export function nextBillingOverrides(
+  models: ModelCatalogEntry[],
+  id: string,
+  next: BillingMode | "auto"
+): Record<string, BillingMode> {
+  const billing: Record<string, BillingMode> = {};
+  for (const model of models) {
+    const value = model.id === id ? (next === "auto" ? undefined : next) : model.billingOverride;
+    if (value) billing[model.id] = value;
+  }
+  return billing;
+}
+
+function billingLabel(mode: BillingMode): string {
+  return mode === "api" ? "API" : "Subscription";
+}
+
 function ModelRow({
   entry,
   onToggle,
+  onBilling,
 }: {
   entry: ModelCatalogEntry;
   onToggle: () => void;
+  onBilling: (next: BillingMode | "auto") => void;
 }) {
   const Icon = entry.hidden ? EyeOff : Eye;
   return (
@@ -185,6 +281,24 @@ function ModelRow({
           {entry.source === "declared" ? " · configured" : ""}
         </p>
       </div>
+      {/* Tri-state billing: the collapsed control always reads as the
+          RESOLVED mode — the Auto option carries what auto resolves to, so
+          "Auto (subscription)" and a forced "Subscription" are both legible
+          at a glance. */}
+      <select
+        value={entry.billingOverride ?? "auto"}
+        onChange={(e) => onBilling(e.target.value as BillingMode | "auto")}
+        aria-label={`Billing for ${entry.label}`}
+        className="h-8 shrink-0 rounded-lg border border-border-subtle bg-surface px-1.5 text-[11px] text-muted-foreground transition-colors hover:border-primary hover:text-foreground"
+      >
+        <option value="auto">
+          {!entry.billingOverride && entry.billingMode
+            ? `Auto (${billingLabel(entry.billingMode).toLowerCase()})`
+            : "Auto"}
+        </option>
+        <option value="subscription">Subscription</option>
+        <option value="api">API</option>
+      </select>
       <button
         onClick={onToggle}
         title={entry.hidden ? "Show in picker" : "Hide from picker"}

package/src/lib/api-client.ts

@@ -6,6 +6,7 @@ import type {
   PronunciationOverride,
   ProviderInfo,
   PasskeySummary,
+  BillingMode,
   ModelCatalogResponse,
   ActivityRunSummary,
   ActivityRunDetail,
@@ -52,6 +53,23 @@ export interface BrainSearchResponse {
   warnings: string[];
 }
 
+/**
+ * Pricing-table freshness (GET /api/models/pricing) — mirrors the server
+ * pricing service's state. The route is additive: an older server 404s, and
+ * callers treat the rejection as "no freshness signal, show nothing".
+ */
+export interface PricingState {
+  enabled: boolean;
+  /** When a refresh last succeeded (either source); null when none ever has. */
+  fetchedAt: number | null;
+  /** The current table is older than the TTL (or was never fetched). */
+  stale: boolean;
+  /** What the table is served from: remote data (cache included) or the bundled snapshot. */
+  source: "remote" | "snapshot";
+  /** Last refresh failure, if the current table is served despite one. */
+  error?: string;
+}
+
 /** Backend id + capability flags the client renders behavior from. */
 export interface BackendInfo {
   id: string;
@@ -181,6 +199,16 @@ export const api = {
       body: JSON.stringify({ hidden }),
     }),
 
+  /** Replace the billing-override record (full record, not a delta); returns the new catalog. */
+  setBillingOverrides: (billing: Record<string, BillingMode>) =>
+    fetchJson<ModelCatalogResponse>("/models/billing", {
+      method: "PUT",
+      body: JSON.stringify({ billing }),
+    }),
+
+  /** Pricing-table freshness for the Activity staleness indicator (see `PricingState`). */
+  pricingState: () => fetchJson<PricingState>("/models/pricing"),
+
   /** Force a discovery refresh, bypassing the TTL. */
   refreshModels: () =>
     fetchJson<ModelCatalogResponse>("/models/refresh", { method: "POST" }),
@@ -261,8 +289,16 @@ export const api = {
           .join("&")
     ),
 
-  activityRun: (runId: string) =>
-    fetchJson<ActivityRunDetail>(`/activity/runs/${encodeURIComponent(runId)}`),
+  /**
+   * One run's detail. Payload bodies (tool_input/tool_output events) are
+   * excluded by default — the session-history fetch only needs span timings —
+   * and opted into by the drill-in views via `includePayloads`.
+   */
+  activityRun: (runId: string, opts?: { includePayloads?: boolean }) =>
+    fetchJson<ActivityRunDetail>(
+      `/activity/runs/${encodeURIComponent(runId)}` +
+        (opts?.includePayloads ? "?include=payloads" : "")
+    ),
 
   activityRollups: (days?: number) =>
     fetchJson<ActivityRollups>(`/activity/rollups${days ? `?days=${days}` : ""}`),

package/src/stores/activity-store.ts

@@ -273,6 +273,42 @@ export async function loadSessionActivityHistory(sessionId: string): Promise<voi
   }
 }
 
+/** Runs whose payload events have been backfilled over REST (per page lifetime). */
+const payloadLoadedRuns = new Set<string>();
+
+/**
+ * Backfill one finished run's tool payload events into the mirror. The
+ * history fetch above and the run-list default deliberately skip payload
+ * bodies — they exist for duration badges, not drill-ins — so the first
+ * expanded payload view of a history span pulls the full detail
+ * (`include=payloads`) and merges it. Live runs never need this: their
+ * payload events ride the delta stream. The merge is safe because a snapshot
+ * at the same high-water still applies and events insert-if-absent.
+ */
+export async function loadSpanPayloads(spanId: string): Promise<void> {
+  const state = useActivityStore.getState();
+  const runId = state.spanRun[spanId];
+  if (!runId || payloadLoadedRuns.has(runId)) return;
+  const root = rootSpanOf(state.spans[runId] ?? {});
+  if (!root || root.outcome === undefined) return;
+  payloadLoadedRuns.add(runId);
+  try {
+    const detail = await api.activityRun(runId, { includePayloads: true });
+    if (detail.detailPruned || !detail.spans) return;
+    useActivityStore.getState().applySnapshot({
+      type: "activity_snapshot",
+      view: "run",
+      runId,
+      spans: detail.spans,
+      events: detail.events ?? [],
+      highWaterSeq: { [runId]: detail.highWaterSeq ?? 0 },
+    });
+  } catch {
+    // Payloads are an enhancement; the row keeps its no-payload notice.
+    payloadLoadedRuns.delete(runId);
+  }
+}
+
 /** The four indexes that make up the mirror, mutated together during merges. */
 interface MirrorMaps {
   spans: Record<string, Record<string, ActivitySpan>>;
@@ -371,6 +407,19 @@ export function eventsFor(state: ActivityState, spanId: string): ActivitySpanEve
   return state.events[spanId] ?? EMPTY_EVENTS;
 }
 
+/**
+ * The recorded input/output payload events of a tool span (AE7). Returns a
+ * fresh array per call — subscribe through `useShallow` (like `childSpans`).
+ */
+export function payloadEventsFor(state: ActivityState, spanId: string): ActivitySpanEvent[] {
+  const events = state.events[spanId];
+  if (!events) return EMPTY_EVENTS;
+  const payloads = events.filter(
+    (e) => e.eventType === "tool_input" || e.eventType === "tool_output"
+  );
+  return payloads.length > 0 ? payloads : EMPTY_EVENTS;
+}
+
 /** The span behind one tool call (span ids ARE toolUseIds), if streamed. */
 export function spanForTool(state: ActivityState, toolUseId: string): ActivitySpan | null {
   const runId = state.spanRun[toolUseId];