@schlessera/brain-ui-react 0.21.0 → 0.24.0

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

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from "react";
-import { Eye, EyeOff, Loader2, RefreshCw } from "lucide-react";
+import { Eye, EyeOff, Loader2, RefreshCw, X } from "lucide-react";
 import type {
   BillingMode,
   ModelCatalogEntry,
@@ -8,6 +8,7 @@ import type {
 import { api } from "../../lib/api-client.js";
 import { useProviderStore } from "../../stores/provider-store.js";
 import { cn } from "../../lib/utils.js";
+import { PiAccountsSection } from "./pi-accounts.js";
 
 /**
  * The model picker's contents, and which of them to show.
@@ -131,6 +132,22 @@ export function ModelsTab({ active }: { active: boolean }) {
     );
   }
 
+  async function changeDefault(next: string | null) {
+    if (!catalog) return;
+    await commitCatalog(
+      { ...catalog, defaultModelId: next },
+      () => api.setDefaultModel(next)
+    );
+  }
+
+  async function setCustom(models: string[]) {
+    if (!catalog) return;
+    await commitCatalog(
+      { ...catalog, customModels: models },
+      () => api.setCustomModels(models)
+    );
+  }
+
   async function onRefresh() {
     if (refreshing) return;
     setRefreshing(true);
@@ -160,6 +177,10 @@ export function ModelsTab({ active }: { active: boolean }) {
           ones you never pick — running sessions are unaffected.
         </p>
 
+        {catalog && (
+          <DefaultModelSelect catalog={catalog} onChange={changeDefault} />
+        )}
+
         {loading ? (
           <div className="mt-6 flex justify-center">
             <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
@@ -200,6 +221,15 @@ export function ModelsTab({ active }: { active: boolean }) {
             profiles are listed.
           </p>
         )}
+
+        {catalog && (
+          <OpenRouterSection
+            models={catalog.customModels ?? []}
+            onChange={setCustom}
+          />
+        )}
+
+        <PiAccountsSection active={active} />
       </div>
 
       <div className="flex items-center justify-between gap-3 border-t border-border p-4">
@@ -219,6 +249,129 @@ export function ModelsTab({ active }: { active: boolean }) {
   );
 }
 
+/**
+ * The default-model choice: which profile answers when a turn names none —
+ * a fresh device's first conversation, a share filed into the brain, any
+ * host-initiated action. "Auto" prefers a connected subscription account
+ * (e.g. ChatGPT for the gpt profiles) and falls back to the built-in default.
+ */
+function DefaultModelSelect({
+  catalog,
+  onChange,
+}: {
+  catalog: ModelCatalogResponse;
+  onChange: (next: string | null) => void;
+}) {
+  const stored = catalog.defaultModelId ?? null;
+  const byId = new Map(catalog.models.map((model) => [model.id, model]));
+  const resolved = catalog.resolvedDefaultId
+    ? byId.get(catalog.resolvedDefaultId)
+    : undefined;
+  // Offer everything visible, plus a stored default that has since been
+  // hidden (dropping it from the list would silently rewrite the choice).
+  const options = catalog.models.filter(
+    (model) => !model.hidden || model.id === stored
+  );
+  return (
+    <div className="mt-4 flex items-center gap-3 rounded-lg border border-border-subtle bg-surface p-3">
+      <div className="min-w-0 flex-1">
+        <p className="text-sm text-foreground">Default model</p>
+        <p className="text-[11px] text-muted-foreground">
+          Used for new conversations, shares, and actions that don't pick one.
+        </p>
+      </div>
+      <select
+        value={stored ?? "auto"}
+        onChange={(e) => onChange(e.target.value === "auto" ? null : e.target.value)}
+        aria-label="Default model"
+        className="h-8 max-w-[45%] shrink-0 truncate 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">
+          {!stored && resolved ? `Auto (${resolved.label})` : "Auto"}
+        </option>
+        {options.map((model) => (
+          <option key={model.id} value={model.id}>
+            {model.label}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}
+
+/**
+ * User-managed OpenRouter models: added and removed here by model id, no env
+ * change or redeploy. They appear in the roster above as ordinary profiles
+ * (api-billed via OPENROUTER_API_KEY).
+ */
+function OpenRouterSection({
+  models,
+  onChange,
+}: {
+  models: string[];
+  onChange: (models: string[]) => void;
+}) {
+  const [draft, setDraft] = useState("");
+
+  function add() {
+    const id = draft.trim();
+    if (!id || models.includes(id)) return;
+    onChange([...models, id]);
+    setDraft("");
+  }
+
+  return (
+    <div className="mt-6">
+      <h3 className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+        OpenRouter models
+      </h3>
+      <p className="mt-1 text-xs text-muted-foreground">
+        Add any OpenRouter model by its id (needs OPENROUTER_API_KEY on the
+        server). Added models join the list above.
+      </p>
+      {models.length > 0 && (
+        <ul className="mt-3 flex flex-col gap-1.5">
+          {models.map((model) => (
+            <li
+              key={model}
+              className="flex items-center gap-2 rounded-lg border border-border-subtle bg-surface px-3 py-2"
+            >
+              <span className="min-w-0 flex-1 truncate font-[family-name:var(--font-mono)] text-xs text-foreground">
+                {model}
+              </span>
+              <button
+                onClick={() => onChange(models.filter((m) => m !== model))}
+                title={`Remove ${model}`}
+                className="flex h-6 w-6 shrink-0 items-center justify-center rounded text-muted-foreground transition-colors hover:bg-surface-raised hover:text-destructive"
+              >
+                <X className="h-3.5 w-3.5" />
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+      <div className="mt-3 flex gap-2">
+        <input
+          value={draft}
+          onChange={(e) => setDraft(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") add();
+          }}
+          placeholder="z.ai/glm-5.3-flash"
+          className="h-8 min-w-0 flex-1 rounded-lg border border-border-subtle bg-surface px-2 font-[family-name:var(--font-mono)] text-xs text-foreground placeholder:text-muted-foreground/50 focus:border-primary focus:outline-none"
+        />
+        <button
+          onClick={add}
+          disabled={!draft.trim()}
+          className="h-8 shrink-0 rounded-lg border border-border-subtle bg-surface px-3 text-xs font-medium text-foreground transition-colors hover:border-primary hover:text-primary disabled:opacity-50"
+        >
+          Add
+        </button>
+      </div>
+    </div>
+  );
+}
+
 /**
  * Request-ordering guard for optimistic commits: `begin()` claims a token
  * and returns a predicate that holds only while no later request has begun.

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

@@ -0,0 +1,264 @@
+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 { useProviderStore } from "../../stores/provider-store.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();
+          // A connected subscription account can change the picker's default
+          // ordering — refresh the composer's roster copy too.
+          void useProviderStore.getState().loadProviders();
+        }
+      } 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,48 @@ 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 }),
+    }),
+
+  /** Set the default model (a profile id, or null for auto); returns the new catalog. */
+  setDefaultModel: (defaultId: string | null) =>
+    fetchJson<ModelCatalogResponse>("/models/default", {
+      method: "PUT",
+      body: JSON.stringify({ defaultId }),
+    }),
+
+  /** Replace the custom OpenRouter model list (full list, not a delta). */
+  setCustomModels: (models: string[]) =>
+    fetchJson<ModelCatalogResponse>("/models/custom", {
+      method: "PUT",
+      body: JSON.stringify({ models }),
+    }),
+
   /** 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/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);