@schlessera/brain-ui-react 0.18.0 → 0.20.0

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/hooks/use-now.ts

@@ -0,0 +1,32 @@
+import { useEffect, useState } from "react";
+
+/** All subscribed setters, driven by ONE shared interval. */
+const listeners = new Set<(now: number) => void>();
+let ticker: ReturnType<typeof setInterval> | null = null;
+
+/**
+ * A ticking `Date.now()` for live elapsed labels. Every consumer shares a
+ * single setInterval (created on the first subscriber's cadence, torn down
+ * with the last), so a screen full of running rows costs one timer, and all
+ * their labels tick in the same frame.
+ */
+export function useNow(intervalMs = 1000): number {
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    listeners.add(setNow);
+    if (!ticker) {
+      ticker = setInterval(() => {
+        const t = Date.now();
+        for (const listener of listeners) listener(t);
+      }, intervalMs);
+    }
+    return () => {
+      listeners.delete(setNow);
+      if (listeners.size === 0 && ticker) {
+        clearInterval(ticker);
+        ticker = null;
+      }
+    };
+  }, [intervalMs]);
+  return now;
+}

package/src/hooks/use-websocket.ts

@@ -4,6 +4,7 @@ import { useConnectionStore } from "../stores/connection-store.js";
 import { useChatStore, activeChat, type ChatKey } from "../stores/chat-store.js";
 import { useProviderStore } from "../stores/provider-store.js";
 import { useMaskStore } from "../stores/mask-store.js";
+import { useActivityStore, loadSessionActivityHistory } from "../stores/activity-store.js";
 import { getWsUrl } from "../lib/backend.js";
 import type {
   ServerMessage,
@@ -121,9 +122,44 @@ function isOurDraftAnnouncement(
   return true;
 }
 
+/**
+ * Lazily open a session-scoped activity subscription (live subagent rows,
+ * server-stamped tool timing). Idempotent per connection; the subscribed set
+ * resets when a new socket's server_hello arrives.
+ */
+function ensureActivitySubscription(sessionId: string | null | undefined): void {
+  if (!sessionId) return;
+  const activity = useActivityStore.getState();
+  if (!activity.supported || activity.subscribed[sessionId]) return;
+  activity.markSubscribed(sessionId);
+  wsClient?.send({ type: "activity_subscribe", view: "session", sessionId });
+  // The subscription snapshot carries OPEN runs; finished runs (history
+  // timing, past fan-outs) come from the REST side.
+  void loadSessionActivityHistory(sessionId);
+}
+
 export function handleServerMessage(msg: ServerMessage) {
   const state = useChatStore.getState();
 
+  // Activity stream frames feed their own store and never touch chat state.
+  if (msg.type === "server_hello") {
+    useActivityStore.getState().setSupported(msg.capabilities?.activity === true);
+    // A new hello means a new connection: server-side subscriptions are gone.
+    useActivityStore.getState().resetSubscriptions();
+    // …and view-owned subscriptions (the Activity index) must re-send too.
+    useActivityStore.getState().bumpConnectionEpoch();
+    ensureActivitySubscription(state.activeSessionId);
+    return;
+  }
+  if (msg.type === "activity_snapshot") {
+    useActivityStore.getState().applySnapshot(msg);
+    return;
+  }
+  if (msg.type === "activity_delta") {
+    useActivityStore.getState().applyDelta(msg);
+    return;
+  }
+
   // Parallel-session demux (per-session buffers). Every frame is scoped by
   // sessionId; a scoped frame lands in ITS session's buffer, so a background
   // session's transcript keeps accumulating while another one is in view.
@@ -186,6 +222,10 @@ export function handleServerMessage(msg: ServerMessage) {
       break;
 
     case "tool_use_start":
+      // A tool call INSIDE a subagent nests under its Agent entry, rendered
+      // from the activity stream — putting it in the flat transcript would
+      // interleave fan-out work with the main turn's steps.
+      if (msg.parentToolUseId) break;
       state.startToolCall(key, msg.toolUseId, msg.toolName);
       break;
 
@@ -194,6 +234,9 @@ export function handleServerMessage(msg: ServerMessage) {
       break;
 
     case "tool_use_complete":
+      // Subagent tool calls render nested (activity stream), and the flat
+      // store's name-based fallback match must never see them.
+      if (msg.parentToolUseId) break;
       state.completeToolCall(key, msg.toolUseId, msg.toolName, msg.input);
       break;
 
@@ -237,6 +280,7 @@ export function handleServerMessage(msg: ServerMessage) {
       break;
 
     case "session_info": {
+      ensureActivitySubscription(msg.sessionId);
       // bindDraftSession above handled draft adoption; an info frame may still
       // re-pin the provider picker when it concerns the session in view.
       const current = useChatStore.getState();

package/src/index.ts

@@ -16,6 +16,7 @@ export { ConnectionGate } from "./components/connectivity/connection-gate.js";
 export { AppShell } from "./components/layout/app-shell.js";
 export { ChatPage } from "./components/chat/chat-page.js";
 export { GraphPage } from "./components/graph/graph-page.js";
+export { ActivityPage } from "./components/activity/activity-page.js";
 
 // Markdown renderer (also useful standalone, e.g. for a dev kitchen sink).
 export { BrainMarkdown } from "./components/chat/brain-markdown.js";

package/src/lib/api-client.ts

@@ -6,7 +6,25 @@ import type {
   PronunciationOverride,
   ProviderInfo,
   PasskeySummary,
+  BillingMode,
   ModelCatalogResponse,
+  ActivityRunSummary,
+  ActivityRunDetail,
+  ActivityRollups,
+  ActivityDigest,
+  ActivityIntent,
+} from "@schlessera/brain-ui-sdk/protocol";
+
+// Activity REST types live in the SDK protocol (shared with the server);
+// re-exported here so existing importers keep working.
+export type {
+  ActivityRunSummary,
+  ActivityRunDetail,
+  ActivityRunRollup,
+  ActivityAggregate,
+  ActivityRollups,
+  ActivityDigest,
+  ActivityIntent,
 } from "@schlessera/brain-ui-sdk/protocol";
 import type {
   AuthenticationResponseJSON,
@@ -35,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;
@@ -164,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" }),
@@ -219,4 +264,70 @@ export const api = {
     fetchJson<{ ok: true }>(`/auth/passkey/${encodeURIComponent(id)}`, {
       method: "DELETE",
     }),
+
+  // --- Activity record (read side; live updates ride the WebSocket) ---
+
+  activityRuns: (opts?: {
+    origin?: "session" | "cron";
+    job?: string;
+    session?: string;
+    status?: string;
+    limit?: number;
+    before?: number;
+  }) =>
+    fetchJson<{ live: ActivityRunSummary[]; history: ActivityRunSummary[] }>(
+      "/activity/runs?" +
+        [
+          opts?.origin && `origin=${opts.origin}`,
+          opts?.job && `job=${encodeURIComponent(opts.job)}`,
+          opts?.session && `session=${encodeURIComponent(opts.session)}`,
+          opts?.status && `status=${encodeURIComponent(opts.status)}`,
+          opts?.limit && `limit=${opts.limit}`,
+          opts?.before && `before=${opts.before}`,
+        ]
+          .filter(Boolean)
+          .join("&")
+    ),
+
+  /**
+   * 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}` : ""}`),
+
+  activityInbox: () => fetchJson<{ intents: ActivityIntent[] }>("/activity/inbox"),
+
+  activityInboxAck: (id: number) =>
+    fetchJson<{ ok: true }>(`/activity/inbox/${id}/ack`, { method: "POST" }),
+
+  activityInboxAckAll: () =>
+    fetchJson<{ acknowledged: number }>("/activity/inbox/ack-all", { method: "POST" }),
+
+  activityDigest: () =>
+    fetchJson<{ digest: ActivityDigest | null; dismissedAt: number }>("/activity/digest"),
+
+  activityDigestDismiss: () =>
+    fetchJson<{ ok: true }>("/activity/digest/dismiss", { method: "POST" }),
+
+  pushPublicKey: () => fetchJson<{ publicKey: string }>("/push/public-key"),
+
+  pushSubscribe: (subscription: unknown, label?: string) =>
+    fetchJson<{ ok: true }>("/push/subscribe", {
+      method: "POST",
+      body: JSON.stringify({ subscription, label }),
+    }),
+
+  pushUnsubscribe: (endpoint: string) =>
+    fetchJson<{ removed: boolean }>("/push/unsubscribe", {
+      method: "POST",
+      body: JSON.stringify({ endpoint }),
+    }),
 };