@schlessera/brain-ui-react 0.20.0 → 0.21.0

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

@@ -1,7 +1,12 @@
 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 type {
+  ActivitySpan,
+  ActivitySpanEvent,
+  ActivitySpanOutcome,
+  BillingMode,
+} from "@schlessera/brain-ui-sdk/protocol";
 
 import {
   useActivityStore,
@@ -9,7 +14,7 @@ import {
   loadSpanPayloads,
 } from "../../stores/activity-store.js";
 import { cn } from "../../lib/utils.js";
-import { getToolLabel } from "../chat/tool-views.js";
+import { getToolLabel, formatTokenCount } from "../chat/tool-views.js";
 
 /**
  * THE status dot for activity spans — one outcome→color mapping so every
@@ -92,35 +97,86 @@ export function SpanPayload({ spanId }: { spanId: string }) {
   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>
+        <SpanEventBlock key={`${event.spanId}:${event.eventIndex}`} event={event} />
       ))}
     </div>
   );
 }
 
+/**
+ * Display label for a span event type. Known types get prose; an unknown one
+ * (a span-sink producer is free to invent them) prints its own type rather
+ * than being mislabelled as output.
+ */
+export function eventTypeLabel(eventType: string): string {
+  if (eventType === "tool_input") return "Input";
+  if (eventType === "tool_output") return "Output";
+  if (eventType.startsWith("transcript_")) return `Transcript · ${eventType.slice("transcript_".length)}`;
+  if (eventType === "job_output") return "Job output";
+  return eventType.replace(/_/g, " ");
+}
+
+/**
+ * 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 text =
+    typeof event.payload === "string" ? event.payload : JSON.stringify(event.payload, null, 2);
+  return (
+    <div>
+      <div className="mb-0.5 text-[10px] uppercase text-muted-foreground/60">
+        {eventTypeLabel(event.eventType)}
+      </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">
+        {text}
+      </pre>
+      {event.truncated && (
+        <p className="mt-0.5 text-[10px] italic text-muted-foreground/60">… truncated</p>
+      )}
+    </div>
+  );
+}
+
+/**
+ * A span's own token/model line, or null when the backend recorded no usage
+ * for it (every tool span, and any cron root without a span-sink producer).
+ * Cache reads are named separately: they are the cheap half of the bill and
+ * folding them into "in" would misstate what the run actually consumed.
+ */
+export function formatSpanUsage(span: ActivitySpan): string | null {
+  const usage = span.usage;
+  if (!usage) return null;
+  const parts: string[] = [];
+  if (usage.model) parts.push(usage.model);
+  if (usage.inputTokens) parts.push(`${formatTokenCount(usage.inputTokens)} in`);
+  if (usage.outputTokens) parts.push(`${formatTokenCount(usage.outputTokens)} out`);
+  if (usage.cacheReadTokens) parts.push(`${formatTokenCount(usage.cacheReadTokens)} cached`);
+  if (usage.cacheCreationTokens)
+    parts.push(`${formatTokenCount(usage.cacheCreationTokens)} cache write`);
+  return parts.length > 0 ? parts.join(" · ") : null;
+}
+
 /**
  * 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
+ * "subbed" when the run was subscription-billed and "free" otherwise (a
+ * genuinely zero-rate model, e.g. an OpenRouter free tier), 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.
+ *
+ * The zero split matters: a seat plan absorbing the run and a model that
+ * costs nothing are both $0 additive, but only one of them stays $0 once the
+ * subscription is cancelled.
  */
 export function formatEffectiveCost(
   costUsd: number | null | undefined,
-  estimate?: boolean
+  estimate?: boolean,
+  billingMode?: BillingMode | null
 ): string {
   if (costUsd === null || costUsd === undefined) return "—";
-  if (costUsd === 0) return "free";
+  if (costUsd === 0) return billingMode === "subscription" ? "subbed" : "free";
   const amount = costUsd < 0.005 ? "<$0.01" : `$${costUsd.toFixed(2)}`;
   return estimate ? `~${amount}` : amount;
 }
@@ -148,11 +204,12 @@ export function runCostText(run: {
   costUsd: number | null;
   effectiveCostUsd?: number | null;
   pricingEstimate?: boolean;
+  billingMode?: BillingMode | null;
 }): string | null {
   if (run.effectiveCostUsd === undefined) {
     return run.costUsd !== null && run.costUsd > 0 ? `$${run.costUsd.toFixed(2)}` : null;
   }
-  return formatEffectiveCost(run.effectiveCostUsd, run.pricingEstimate);
+  return formatEffectiveCost(run.effectiveCostUsd, run.pricingEstimate, run.billingMode);
 }
 
 /**

package/src/stores/activity-store.ts

@@ -407,6 +407,11 @@ export function eventsFor(state: ActivityState, spanId: string): ActivitySpanEve
   return state.events[spanId] ?? EMPTY_EVENTS;
 }
 
+/** Payload event types the tool expander owns — every OTHER type belongs to
+ *  the narrative stream (`narrativeEventsFor`) so nothing recorded is
+ *  rendered nowhere. */
+const TOOL_PAYLOAD_TYPES = new Set(["tool_input", "tool_output"]);
+
 /**
  * The recorded input/output payload events of a tool span (AE7). Returns a
  * fresh array per call — subscribe through `useShallow` (like `childSpans`).
@@ -414,12 +419,40 @@ export function eventsFor(state: ActivityState, spanId: string): ActivitySpanEve
 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"
-  );
+  const payloads = events.filter((e) => TOOL_PAYLOAD_TYPES.has(e.eventType));
   return payloads.length > 0 ? payloads : EMPTY_EVENTS;
 }
 
+/**
+ * Everything recorded against a span that is NOT a tool input/output payload:
+ * transcript excerpts, job output, and any span-sink event type a producer
+ * invents. Rendered as the span's narrative so an unknown type degrades to a
+ * labelled block rather than to invisibility.
+ */
+export function narrativeEventsFor(
+  state: ActivityState,
+  spanId: string
+): ActivitySpanEvent[] {
+  const events = state.events[spanId];
+  if (!events) return EMPTY_EVENTS;
+  const rest = events.filter((e) => !TOOL_PAYLOAD_TYPES.has(e.eventType));
+  return rest.length > 0 ? rest : EMPTY_EVENTS;
+}
+
+/** Every event recorded under a run, ordered by time — the run detail's
+ *  narrative stream and the raw-trace dump both read through this. */
+export function runEvents(state: ActivityState, runId: string): ActivitySpanEvent[] {
+  const byId = state.spans[runId];
+  if (!byId) return EMPTY_EVENTS;
+  const out: ActivitySpanEvent[] = [];
+  for (const spanId of Object.keys(byId)) {
+    const events = state.events[spanId];
+    if (events) out.push(...events);
+  }
+  if (out.length === 0) return EMPTY_EVENTS;
+  return out.sort((a, b) => a.ts - b.ts || a.eventIndex - b.eventIndex);
+}
+
 /** 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];