@schlessera/brain-ui-react 0.20.0 → 0.23.0

package/src/components/settings/pi-accounts.tsx

@@ -0,0 +1,258 @@
+import { useEffect, useRef, useState } from "react";
+import { Check, ExternalLink, Loader2, LogOut, X } from "lucide-react";
+import { api, type PiAuthProviderStatus, type PiLoginFlow } from "../../lib/api-client.js";
+import { cn } from "../../lib/utils.js";
+
+/**
+ * Provider sign-in for the pi backend's OAuth vendors — most importantly
+ * OpenAI (ChatGPT Plus/Pro), whose device-code flow needs no browser callback
+ * on the server: the user gets a short code here, enters it at the provider's
+ * verification page on ANY device, and the server stores the credential.
+ *
+ * Renders nothing when the server reports no pi providers (pi not
+ * configured), so the Models tab is unchanged for Claude-only deployments.
+ */
+export function PiAccountsSection({ active }: { active: boolean }) {
+  const [providers, setProviders] = useState<PiAuthProviderStatus[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const [busy, setBusy] = useState<string | null>(null);
+  const [flow, setFlow] = useState<PiLoginFlow | null>(null);
+  const pollTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  function stopPolling() {
+    if (pollTimer.current) {
+      clearTimeout(pollTimer.current);
+      pollTimer.current = null;
+    }
+  }
+
+  async function reload() {
+    try {
+      const { providers } = await api.piAuthProviders();
+      setProviders(providers);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Could not load accounts");
+    }
+  }
+
+  useEffect(() => {
+    if (!active) return;
+    let cancelled = false;
+    api
+      .piAuthProviders()
+      .then(({ providers }) => {
+        if (!cancelled) setProviders(providers);
+      })
+      .catch(() => {
+        // A server without the endpoint (older release) just hides the card.
+        if (!cancelled) setProviders([]);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [active]);
+
+  // Poll the pending flow until it settles. Chained timeouts rather than an
+  // interval, so a slow response never stacks requests.
+  useEffect(() => {
+    if (!flow || flow.status !== "pending") return;
+    let disposed = false;
+    const delayMs = (flow.intervalSeconds ?? 5) * 1000;
+    const tick = async () => {
+      try {
+        const { flow: next } = await api.piAuthFlow(flow.id);
+        if (disposed) return;
+        setFlow(next);
+        if (next.status === "success") void reload();
+      } catch {
+        if (disposed) return;
+        // Transient poll failure: keep trying until the flow expires.
+        pollTimer.current = setTimeout(tick, delayMs);
+        return;
+      }
+    };
+    pollTimer.current = setTimeout(tick, delayMs);
+    return () => {
+      disposed = true;
+      stopPolling();
+    };
+  }, [flow]);
+
+  async function connect(providerId: string) {
+    setBusy(providerId);
+    setError(null);
+    try {
+      const { flow } = await api.piAuthStart(providerId);
+      setFlow(flow);
+      if (flow.status === "error") setError(flow.error ?? "Login failed");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Could not start login");
+    } finally {
+      setBusy(null);
+    }
+  }
+
+  async function cancel() {
+    if (!flow) return;
+    stopPolling();
+    try {
+      await api.piAuthCancel(flow.id);
+    } catch {
+      // The flow record may already be gone; clearing locally is enough.
+    }
+    setFlow(null);
+  }
+
+  async function disconnect(providerId: string) {
+    setBusy(providerId);
+    setError(null);
+    try {
+      await api.piAuthLogout(providerId);
+      await reload();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Could not disconnect");
+    } finally {
+      setBusy(null);
+    }
+  }
+
+  if (providers.length === 0) return null;
+
+  return (
+    <div className="mt-6">
+      <h3 className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+        Accounts
+      </h3>
+      <p className="mt-1 text-xs text-muted-foreground">
+        Model providers that sign in with an account instead of an API key.
+      </p>
+      <ul className="mt-4 flex flex-col gap-2">
+        {providers.map((provider) => (
+          <li
+            key={provider.providerId}
+            className="rounded-lg border border-border-subtle bg-surface p-3"
+          >
+            <div className="flex items-center gap-3">
+              <div className="min-w-0 flex-1">
+                <p className="truncate text-sm text-foreground">{provider.name}</p>
+                <p className="truncate text-[11px] text-muted-foreground">
+                  {provider.configured
+                    ? `Connected${provider.source ? ` · ${provider.source}` : ""}`
+                    : "Not connected"}
+                </p>
+              </div>
+              {provider.configured && (
+                <Check className="h-4 w-4 shrink-0 text-accent" />
+              )}
+              {provider.oauth && !provider.configured && (
+                <button
+                  onClick={() => connect(provider.providerId)}
+                  disabled={busy !== null || flow?.status === "pending"}
+                  className="shrink-0 rounded-lg border border-border-subtle bg-surface px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:border-primary hover:text-primary disabled:opacity-50"
+                >
+                  {busy === provider.providerId ? (
+                    <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                  ) : (
+                    "Connect"
+                  )}
+                </button>
+              )}
+              {provider.configured && provider.source === "stored" && (
+                <button
+                  onClick={() => disconnect(provider.providerId)}
+                  disabled={busy !== null}
+                  title="Disconnect"
+                  className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-surface-raised hover:text-destructive"
+                >
+                  <LogOut className="h-4 w-4" />
+                </button>
+              )}
+            </div>
+
+            {flow && flow.providerId === provider.providerId && (
+              <LoginFlowCard flow={flow} onCancel={cancel} onDismiss={() => setFlow(null)} />
+            )}
+          </li>
+        ))}
+      </ul>
+      {error && (
+        <p role="alert" className="mt-3 text-xs text-destructive">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}
+
+function LoginFlowCard({
+  flow,
+  onCancel,
+  onDismiss,
+}: {
+  flow: PiLoginFlow;
+  onCancel: () => void;
+  onDismiss: () => void;
+}) {
+  if (flow.status === "pending") {
+    return (
+      <div className="mt-3 rounded-lg border border-primary/40 bg-primary/5 p-3">
+        <p className="text-xs text-muted-foreground">
+          Enter this code at the provider's device page — on this or any other
+          device:
+        </p>
+        <p className="mt-2 select-all text-center font-[family-name:var(--font-mono)] text-xl font-semibold tracking-widest text-foreground">
+          {flow.userCode ?? "…"}
+        </p>
+        <div className="mt-3 flex items-center justify-center gap-2">
+          {flow.verificationUri && (
+            <a
+              href={flow.verificationUri}
+              target="_blank"
+              rel="noreferrer"
+              className="flex items-center gap-1.5 rounded-lg bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground transition-colors hover:brightness-110"
+            >
+              <ExternalLink className="h-3 w-3" />
+              Open verification page
+            </a>
+          )}
+          <button
+            onClick={onCancel}
+            className="flex items-center gap-1.5 rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground"
+          >
+            <X className="h-3 w-3" />
+            Cancel
+          </button>
+        </div>
+        <p className="mt-2 flex items-center justify-center gap-1.5 text-center text-[11px] text-muted-foreground">
+          <Loader2 className="h-3 w-3 animate-spin" />
+          Waiting for approval…
+        </p>
+      </div>
+    );
+  }
+
+  const message =
+    flow.status === "success"
+      ? "Connected."
+      : flow.status === "cancelled"
+        ? "Login cancelled."
+        : flow.error ?? "Login failed.";
+  return (
+    <div
+      className={cn(
+        "mt-3 flex items-center justify-between rounded-lg border p-3 text-xs",
+        flow.status === "success"
+          ? "border-border-subtle text-muted-foreground"
+          : "border-destructive/30 text-destructive"
+      )}
+    >
+      <span>{message}</span>
+      <button
+        onClick={onDismiss}
+        className="text-muted-foreground transition-colors hover:text-foreground"
+      >
+        <X className="h-3.5 w-3.5" />
+      </button>
+    </div>
+  );
+}

package/src/hooks/use-websocket.ts

@@ -60,6 +60,15 @@ function convertHistoryMessage(msg: SessionHistoryMessage): ChatMessage {
  * payload, so an answered question survives session resume (rendered in its
  * chronological slot, collapsed) instead of vanishing.
  */
+function isBareAnswersMap(v: unknown): v is Record<string, string> {
+  return (
+    !!v &&
+    typeof v === "object" &&
+    !Array.isArray(v) &&
+    Object.values(v).every((x) => typeof x === "string")
+  );
+}
+
 function reconstructAskUserExchanges(
   toolCalls: SessionHistoryMessage["toolCalls"]
 ): AskUserExchange[] | undefined {
@@ -74,8 +83,14 @@ function reconstructAskUserExchanges(
           answers?: Record<string, string>;
           annotations?: AskUserExchange["annotations"];
         };
-        exchange.answers = payload.answers;
-        exchange.annotations = payload.annotations;
+        if (payload && typeof payload === "object" && payload.answers) {
+          exchange.answers = payload.answers;
+          exchange.annotations = payload.annotations;
+        } else if (isBareAnswersMap(payload)) {
+          // The pi backend persists the bare answers map, without the
+          // `{answers}` envelope the Claude tool writes.
+          exchange.answers = payload;
+        }
       } catch {
         // Non-JSON output means the question was dismissed or errored out.
         exchange.cancelled = true;
@@ -281,6 +296,18 @@ export function handleServerMessage(msg: ServerMessage) {
 
     case "session_info": {
       ensureActivitySubscription(msg.sessionId);
+      // Record backend ownership for renderer scoping — for ANY session, since
+      // background sessions keep their own transcript buffers. Older servers
+      // omit backendId; derive it from the pinned profile when still possible
+      // (fails only for since-hidden profiles, which then use the default).
+      const ownerBackendId =
+        msg.backendId ??
+        useProviderStore
+          .getState()
+          .available.find((p) => p.id === msg.providerId)?.backendId;
+      if (ownerBackendId) {
+        useChatStore.getState().setSessionBackend(msg.sessionId, ownerBackendId);
+      }
       // 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/lib/api-client.ts

@@ -80,6 +80,30 @@ export interface BackendInfo {
   };
 }
 
+/** Auth status of one configured pi provider (mirror of the server view). */
+export interface PiAuthProviderStatus {
+  providerId: string;
+  /** Human label for the credential, e.g. "OpenAI (ChatGPT Plus/Pro)". */
+  name: string;
+  configured: boolean;
+  source?: string;
+  /** Whether this provider can be signed in through the UI. */
+  oauth: boolean;
+}
+
+/** One OAuth device-code login flow (mirror of the server view). */
+export interface PiLoginFlow {
+  id: string;
+  providerId: string;
+  status: "pending" | "success" | "error" | "cancelled";
+  userCode?: string;
+  verificationUri?: string;
+  intervalSeconds?: number;
+  expiresInSeconds?: number;
+  error?: string;
+  startedAt: number;
+}
+
 async function fetchJson<T>(path: string, init?: RequestInit): Promise<T> {
   const res = await fetch(`${apiBase()}${path}`, {
     ...init,
@@ -209,6 +233,34 @@ export const api = {
   /** Pricing-table freshness for the Activity staleness indicator (see `PricingState`). */
   pricingState: () => fetchJson<PricingState>("/models/pricing"),
 
+  /** Auth status of configured pi providers; empty when pi is not in play. */
+  piAuthProviders: () =>
+    fetchJson<{ providers: PiAuthProviderStatus[] }>("/pi-auth/providers"),
+
+  /** Start an OAuth device-code login; resolves once the user code exists. */
+  piAuthStart: (providerId: string) =>
+    fetchJson<{ flow: PiLoginFlow }>("/pi-auth/login", {
+      method: "POST",
+      body: JSON.stringify({ providerId }),
+    }),
+
+  /** Poll one login flow. */
+  piAuthFlow: (id: string) =>
+    fetchJson<{ flow: PiLoginFlow }>(`/pi-auth/login/${encodeURIComponent(id)}`),
+
+  /** Abort a pending login flow. */
+  piAuthCancel: (id: string) =>
+    fetchJson<{ ok: boolean }>(`/pi-auth/login/${encodeURIComponent(id)}`, {
+      method: "DELETE",
+    }),
+
+  /** Remove the stored credential for a pi provider. */
+  piAuthLogout: (providerId: string) =>
+    fetchJson<{ ok: boolean }>("/pi-auth/logout", {
+      method: "POST",
+      body: JSON.stringify({ providerId }),
+    }),
+
   /** Force a discovery refresh, bypassing the TTL. */
   refreshModels: () =>
     fetchJson<ModelCatalogResponse>("/models/refresh", { method: "POST" }),

package/src/lib/tool-names.ts

@@ -21,7 +21,12 @@ export function normalizeToolName(name: string): string {
     : name;
 }
 
+// The pi backend registers its ask-user tool under the bare name.
+const PI_ASK_USER_TOOL_NAME = "ask_user";
+
 export const isAskUserTool = (name: string | undefined): boolean =>
-  !!name && normalizeToolName(name) === ASK_USER_TOOL_NAME;
+  !!name &&
+  (normalizeToolName(name) === ASK_USER_TOOL_NAME ||
+    name === PI_ASK_USER_TOOL_NAME);
 export const isLocationTool = (name: string | undefined): boolean =>
   !!name && normalizeToolName(name) === GET_LOCATION_TOOL_NAME;

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];

package/src/stores/chat-store.ts

@@ -123,6 +123,12 @@ interface ChatState {
    * absence of a running/queued turn.
    */
   runStates: Record<string, "streaming" | "queued" | "idle">;
+  /**
+   * Backend that owns each session, from `session_info` (or the session list
+   * for history sessions). Scopes tool-call renderer resolution per backend;
+   * absence falls back to the deployment default.
+   */
+  backendIds: Record<string, string>;
   /**
    * Per-session note attached to a `queued` status — the host sends one once a
    * session's follow-up queue grows heavy. Cleared when the session leaves the
@@ -190,6 +196,8 @@ interface ChatState {
     state: "streaming" | "queued" | "idle",
     note?: string
   ) => void;
+  /** Record which backend owns a session (idempotent). */
+  setSessionBackend: (sessionId: string, backendId: string) => void;
 }
 
 let messageCounter = 0;
@@ -350,6 +358,7 @@ export const useChatStore = create<ChatState>((set, get) => {
     activeSessionId: readPersistedSessionId(),
     runStates: {},
     queueNotes: {},
+    backendIds: {},
 
     // createIfMissing: a user-initiated send must never be dropped, even when
     // the active session's buffer hasn't been materialized yet (cold start
@@ -659,6 +668,13 @@ export const useChatStore = create<ChatState>((set, get) => {
         return { runStates, queueNotes };
       }),
 
+    setSessionBackend: (sessionId, backendId) =>
+      set((state) =>
+        state.backendIds[sessionId] === backendId
+          ? state
+          : { backendIds: { ...state.backendIds, [sessionId]: backendId } }
+      ),
+
     clearMessages: () => {
       const state = get();
       if (state.draft) revokeAttachmentUrls(state.draft.messages);