@schlessera/brain-ui-react 0.34.1 → 0.36.0

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

@@ -1,15 +1,14 @@
 import { useEffect, useRef, useState } from "react";
-import { Eye, EyeOff, Loader2, RefreshCw, X } from "lucide-react";
 import {
-  THINKING_LEVELS,
   type BillingMode,
   type ModelCatalogEntry,
   type ModelCatalogResponse,
   type ThinkingLevel,
 } from "@schlessera/brain-ui-sdk/protocol";
-import { api } from "../../lib/api-client.js";
+import { useBrainUiRoot } from "../../root-context.js";
+import type { BrainUiRoot } from "../../root.js";
 import { useProviderStore } from "../../stores/provider-store.js";
-import { cn } from "../../lib/utils.js";
+import { ModelsCatalogView } from "./models-list.js";
 import { PiAccountsSection } from "./pi-accounts.js";
 import { WebSearchSection } from "./web-search-settings.js";
 import { ToolPermissionsSection } from "./tool-permissions.js";
@@ -20,8 +19,15 @@ import { ToolPermissionsSection } from "./tool-permissions.js";
  * The roster comes from the server (Anthropic model discovery plus any
  * host-declared profiles), so this tab never hardcodes model names. Hiding is
  * presentation only — a session already pinned to a hidden model keeps running.
+ *
+ * This is the container (S7): the request, the optimistic commits, their
+ * ordering gate and their write queue live here; `ModelsCatalogView` draws
+ * the roster.
  */
 export function ModelsTab({ active }: { active: boolean }) {
+  const root = useBrainUiRoot();
+  const api = root.api;
+  const lifetime = useRef(0);
   const [catalog, setCatalog] = useState<ModelCatalogResponse | null>(null);
   const [loading, setLoading] = useState(false);
   const [refreshing, setRefreshing] = useState(false);
@@ -29,30 +35,29 @@ export function ModelsTab({ active }: { active: boolean }) {
   const loadProviders = useProviderStore((s) => s.loadProviders);
   const commitGate = useRef(createRequestGate());
   /** Serializes full-record PUTs — see commitCatalog. */
-  const commitQueue = useRef<Promise<void>>(Promise.resolve());
+  const commitQueues = useRef(new WeakMap<BrainUiRoot, Promise<void>>());
 
   useEffect(() => {
-    if (!active) return;
-    let cancelled = false;
-    setLoading(true);
+    const generation = ++lifetime.current;
+    const latest = commitGate.current.begin();
+    const current = () => generation === lifetime.current && latest();
+    setCatalog(null);
+    setLoading(active);
+    setRefreshing(false);
     setError(null);
-    api
-      .models()
-      .then((data) => {
-        if (!cancelled) setCatalog(data);
-      })
-      .catch((err: unknown) => {
-        if (!cancelled) {
-          setError(err instanceof Error ? err.message : "Could not load models");
-        }
-      })
-      .finally(() => {
-        if (!cancelled) setLoading(false);
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, [active]);
+    if (active) {
+      // Returning to a root waits for its accepted writes before reading.
+      void (commitQueues.current.get(root) ?? Promise.resolve())
+        .then(() => current() ? api.models() : null)
+        .then((data) => { if (data && current()) setCatalog(data); })
+        .catch((err: unknown) => {
+          if (current()) setError(err instanceof Error ? err.message : "Could not load models");
+        })
+        .finally(() => { if (generation === lifetime.current) setLoading(false); });
+    }
+    const invalidate = () => { lifetime.current++; };
+    return invalidate;
+  }, [active, root, api]);
 
   /**
    * Optimistic-update skeleton shared by the hidden toggle and the billing
@@ -72,7 +77,9 @@ export function ModelsTab({ active }: { active: boolean }) {
     optimistic: ModelCatalogResponse,
     commit: () => Promise<ModelCatalogResponse>
   ) {
-    const isCurrent = commitGate.current.begin();
+    const generation = lifetime.current;
+    const latest = commitGate.current.begin();
+    const isCurrent = () => generation === lifetime.current && latest();
     const previous = catalog;
     setCatalog(optimistic);
     setError(null);
@@ -82,7 +89,7 @@ export function ModelsTab({ active }: { active: boolean }) {
     // 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 () => {
+    const run = (commitQueues.current.get(root) ?? Promise.resolve()).then(async () => {
       try {
         const confirmed = await commit();
         if (isCurrent()) setCatalog(confirmed);
@@ -94,7 +101,7 @@ export function ModelsTab({ active }: { active: boolean }) {
         }
       }
     });
-    commitQueue.current = run;
+    commitQueues.current.set(root, run);
     await run;
   }
 
@@ -171,230 +178,46 @@ export function ModelsTab({ active }: { active: boolean }) {
 
   async function onRefresh() {
     if (refreshing) return;
+    const generation = lifetime.current;
+    const latest = commitGate.current.begin();
+    const current = () => generation === lifetime.current && latest();
     setRefreshing(true);
     setError(null);
     try {
-      setCatalog(await api.refreshModels());
+      await (commitQueues.current.get(root) ?? Promise.resolve());
+      if (generation !== lifetime.current) return;
+      const next = await api.refreshModels();
+      if (current()) setCatalog(next);
       // A refresh can surface newly released models — put them in the picker
       // now, not on next load.
       void loadProviders();
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Refresh failed");
+      if (current()) setError(err instanceof Error ? err.message : "Refresh failed");
     } finally {
-      setRefreshing(false);
+      if (generation === lifetime.current) setRefreshing(false);
     }
   }
 
-  const visibleCount = catalog?.models.filter((m) => !m.hidden).length ?? 0;
-
-  return (
-    <div className="flex h-full flex-col">
-      <div className="flex-1 overflow-y-auto p-4">
-        <h3 className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
-          Models
-        </h3>
-        <p className="mt-1 text-xs text-muted-foreground">
-          The list is read from the provider and refreshes on its own. Hide the
-          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" />
-          </div>
-        ) : (
-          <ul className="mt-4 flex flex-col gap-2">
-            {catalog?.models.map((entry) => (
-              <ModelRow
-                key={entry.id}
-                entry={entry}
-                onToggle={() => toggleHidden(entry)}
-                onBilling={(next) => changeBilling(entry, next)}
-                onThinking={(next) => changeThinking(entry, next)}
-              />
-            ))}
-            {catalog?.models.length === 0 && (
-              <li className="rounded-lg border border-dashed border-border-subtle p-4 text-center text-xs text-muted-foreground">
-                No models available.
-              </li>
-            )}
-          </ul>
-        )}
-
-        {error && (
-          <p role="alert" className="mt-3 text-xs text-destructive">
-            {error}
-          </p>
-        )}
-
-        {catalog?.discovery.error && (
-          <p className="mt-3 text-xs text-muted-foreground">
-            Last refresh failed ({catalog.discovery.error}). Showing the last
-            known list.
-          </p>
-        )}
-        {catalog && !catalog.discovery.enabled && (
-          <p className="mt-3 text-xs text-muted-foreground">
-            Discovery is disabled (BRAIN_UI_MODEL_DISCOVERY). Only configured
-            profiles are listed.
-          </p>
-        )}
-
-        {catalog && (
-          <OpenRouterSection
-            models={catalog.customModels ?? []}
-            onChange={setCustom}
-          />
-        )}
-
-        <PiAccountsSection active={active} />
-
-        <WebSearchSection active={active} />
-
-        <ToolPermissionsSection active={active} />
-      </div>
-
-      <div className="flex items-center justify-between gap-3 border-t border-border p-4">
-        <span className="text-[11px] text-muted-foreground">
-          {visibleCount} in picker · {formatRefreshed(catalog?.refreshedAt ?? null)}
-        </span>
-        <button
-          onClick={onRefresh}
-          disabled={refreshing}
-          className="flex items-center gap-2 rounded-lg border border-border-subtle bg-surface px-3 py-2 text-xs font-medium text-foreground transition-colors hover:border-primary hover:text-primary disabled:opacity-50"
-        >
-          <RefreshCw className={cn("h-3.5 w-3.5", refreshing && "animate-spin")} />
-          Refresh
-        </button>
-      </div>
-    </div>
-  );
-}
-
-/**
- * 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>
+    <ModelsCatalogView
+      catalog={catalog}
+      loading={loading}
+      refreshing={refreshing}
+      error={error}
+      sections={
+        <>
+          <PiAccountsSection active={active} />
+          <WebSearchSection active={active} />
+          <ToolPermissionsSection active={active} />
+        </>
+      }
+      onToggleHidden={(entry) => void toggleHidden(entry)}
+      onBilling={(entry, next) => void changeBilling(entry, next)}
+      onThinking={(entry, next) => void changeThinking(entry, next)}
+      onDefault={(next) => void changeDefault(next)}
+      onCustomModels={(models) => void setCustom(models)}
+      onRefresh={() => void onRefresh()}
+    />
   );
 }
 
@@ -431,10 +254,6 @@ export function nextBillingOverrides(
   return billing;
 }
 
-function billingLabel(mode: BillingMode): string {
-  return mode === "api" ? "API" : "Subscription";
-}
-
 /**
  * The effort-override record PUT after changing one profile: every other
  * profile keeps its stored override, the changed one is set — or, for "auto",
@@ -453,96 +272,3 @@ export function nextThinkingOverrides(
   }
   return thinking;
 }
-
-function ModelRow({
-  entry,
-  onToggle,
-  onBilling,
-  onThinking,
-}: {
-  entry: ModelCatalogEntry;
-  onToggle: () => void;
-  onBilling: (next: BillingMode | "auto") => void;
-  onThinking: (next: ThinkingLevel | "auto") => void;
-}) {
-  const Icon = entry.hidden ? EyeOff : Eye;
-  return (
-    <li
-      className={cn(
-        "flex items-center gap-3 rounded-lg border border-border-subtle bg-surface p-3",
-        entry.hidden && "opacity-50"
-      )}
-    >
-      <div className="min-w-0 flex-1">
-        <p className="truncate text-sm text-foreground">{entry.label}</p>
-        <p className="truncate text-[11px] text-muted-foreground">
-          {entry.id}
-          {entry.contextWindow ? ` · ${formatTokens(entry.contextWindow)}` : ""}
-          {entry.source === "declared" ? " · configured" : ""}
-        </p>
-      </div>
-      {/* Reasoning effort — only for profiles that take one (the gpt models).
-          Same tri-state pattern as billing: Default shows what it resolves
-          to, an explicit pick is stored as an override. */}
-      {entry.thinkingLevel && (
-        <select
-          value={entry.thinkingOverride ?? "auto"}
-          onChange={(e) => onThinking(e.target.value as ThinkingLevel | "auto")}
-          aria-label={`Reasoning effort 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.thinkingOverride ? `Default (${entry.thinkingLevel})` : "Default"}
-          </option>
-          {THINKING_LEVELS.map((level) => (
-            <option key={level} value={level}>
-              {level}
-            </option>
-          ))}
-        </select>
-      )}
-      {/* 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"}
-        aria-pressed={!entry.hidden}
-        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-foreground"
-      >
-        <Icon className="h-4 w-4" />
-      </button>
-    </li>
-  );
-}
-
-function formatTokens(tokens: number): string {
-  if (tokens >= 1_000_000) return `${tokens / 1_000_000}M context`;
-  if (tokens >= 1_000) return `${Math.round(tokens / 1_000)}K context`;
-  return `${tokens} context`;
-}
-
-function formatRefreshed(refreshedAt: number | null): string {
-  if (refreshedAt === null) return "never refreshed";
-  const minutes = Math.round((Date.now() - refreshedAt) / 60_000);
-  if (minutes < 1) return "refreshed just now";
-  if (minutes < 60) return `refreshed ${minutes}m ago`;
-  const hours = Math.round(minutes / 60);
-  if (hours < 24) return `refreshed ${hours}h ago`;
-  return `refreshed ${Math.round(hours / 24)}d ago`;
-}

package/src/components/settings/one-time-agent-credential.tsx

@@ -0,0 +1,131 @@
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { Check, Copy } from "lucide-react";
+import type { MintedAgent } from "../../lib/api-client.js";
+import { usePrincipalStore } from "../../stores/principal-store.js";
+
+/** App-level portal for the unrecoverable value returned by an agent mint. */
+export function OneTimeAgentCredentialDialog() {
+  const credential = usePrincipalStore((state) => state.oneTimeCredential);
+  const acknowledge = usePrincipalStore(
+    (state) => state.acknowledgeAgentCredential
+  );
+
+  return credential ? (
+    <OneTimeCredential
+      key={credential.id}
+      credential={credential}
+      onDone={acknowledge}
+    />
+  ) : null;
+}
+
+function OneTimeCredential({
+  credential,
+  onDone,
+}: {
+  credential: MintedAgent;
+  onDone: () => void;
+}) {
+  const [copied, setCopied] = useState(false);
+  const [saved, setSaved] = useState(false);
+  const [copyError, setCopyError] = useState(false);
+  const dialogRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const keepDialogOpen = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+      if (event.key !== "Tab") return;
+      const focusable = Array.from(
+        dialogRef.current?.querySelectorAll<HTMLElement>(
+          'button:not([disabled]), input:not([disabled])'
+        ) ?? []
+      );
+      if (focusable.length === 0) return;
+      const first = focusable[0]!;
+      const last = focusable[focusable.length - 1]!;
+      if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+    window.addEventListener("keydown", keepDialogOpen, true);
+    return () => window.removeEventListener("keydown", keepDialogOpen, true);
+  }, []);
+
+  async function copyCredential() {
+    try {
+      await navigator.clipboard.writeText(credential.cookie);
+      setCopied(true);
+      setCopyError(false);
+    } catch {
+      setCopyError(true);
+    }
+  }
+
+  return createPortal(
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="one-time-credential-title"
+      className="fixed inset-0 z-[60] flex items-center justify-center bg-black/60 p-4"
+    >
+      <div
+        ref={dialogRef}
+        className="w-full max-w-md rounded-xl border border-border bg-surface p-5 shadow-[0_16px_48px_rgba(0,0,0,0.5)]"
+      >
+        <h3 id="one-time-credential-title" className="text-base font-semibold text-foreground">
+          Save this credential now
+        </h3>
+        <p className="mt-2 text-sm font-medium text-destructive">
+          This is the only time you will see this value.
+        </p>
+        <p className="mt-1 text-xs text-muted-foreground">
+          Store it somewhere safe before continuing. It cannot be recovered later.
+        </p>
+        <div className="mt-4 rounded-lg border border-border-subtle bg-background p-3">
+          <code className="block break-all text-xs text-foreground">{credential.cookie}</code>
+        </div>
+        <button
+          autoFocus
+          type="button"
+          onClick={() => void copyCredential()}
+          className="mt-3 flex w-full items-center justify-center gap-2 rounded-lg border border-border-subtle bg-surface px-4 py-2 text-sm font-medium text-foreground transition-colors hover:border-primary"
+        >
+          {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+          {copied ? "Copied" : "Copy credential"}
+        </button>
+        {copyError ? (
+          <p role="alert" className="mt-2 text-xs text-destructive">
+            Copy failed. Select the value above and copy it manually.
+          </p>
+        ) : null}
+        <label className="mt-4 flex items-start gap-2 text-xs text-foreground">
+          <input
+            type="checkbox"
+            checked={saved}
+            onChange={(event) => setSaved(event.target.checked)}
+            className="mt-0.5"
+          />
+          I have saved this credential somewhere safe.
+        </label>
+        <button
+          type="button"
+          disabled={!saved}
+          onClick={onDone}
+          className="mt-3 w-full rounded-lg bg-primary-fill px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:brightness-110 disabled:opacity-50"
+        >
+          Done
+        </button>
+      </div>
+    </div>,
+    document.body
+  );
+}