@schlessera/brain-ui-react 0.35.0 → 0.37.0

package/src/components/settings/web-search-settings.tsx

@@ -1,7 +1,7 @@
-import { useEffect, useState } from "react";
-import { AlertTriangle, Check, Loader2, X } from "lucide-react";
-import { api, type WebSearchConfig, type WebSearchProvider } from "../../lib/api-client.js";
-import { cn } from "../../lib/utils.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { WebSearchConfig } from "../../lib/api-client.js";
+import { useBrainUiRoot } from "../../root-context.js";
+import { WebSearchChain } from "./web-search-chain.js";
 
 /**
  * Web-search provider settings for the pi backend's web extension
@@ -13,15 +13,16 @@ import { cn } from "../../lib/utils.js";
  * same list and can name a specific provider per search when a question
  * warrants it.
  *
- * Enabling a provider that has no credential is blocked in the UI rather than
- * bounced by the server: the extension would skip it at search time anyway,
- * leaving a chain entry that silently never runs.
- *
- * Key values never come back from the server; the UI only ever learns "a key
- * is stored". Renders nothing when the server reports pi as not configured,
- * so the Models tab is unchanged for Claude-only deployments.
+ * This is the container (S6): it owns the load, the update round-trip, the
+ * per-root lifetime guards and the "saved" flash, and hands everything on
+ * screen to `WebSearchChain`. Renders nothing when the server reports pi as
+ * not configured, so the Models tab is unchanged for Claude-only deployments.
  */
 export function WebSearchSection({ active }: { active: boolean }) {
+  const root = useBrainUiRoot();
+  const api = root.api;
+  const lifetime = useRef(0);
+  const flashTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
   const [config, setConfig] = useState<WebSearchConfig | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [busy, setBusy] = useState(false);
@@ -29,354 +30,83 @@ export function WebSearchSection({ active }: { active: boolean }) {
   const [keyDraft, setKeyDraft] = useState("");
   const [savedFlash, setSavedFlash] = useState(false);
 
-  async function reload() {
+  const reload = useCallback(async () => {
+    const generation = lifetime.current;
     try {
       const next = await api.webSearchConfig();
+      if (generation !== lifetime.current) return;
       setConfig(next);
       setError(null);
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Could not load web-search settings");
+      if (generation === lifetime.current) setError(err instanceof Error ? err.message : "Could not load web-search settings");
     }
-  }
+  }, [api]);
 
   useEffect(() => {
+    lifetime.current++;
+    setConfig(null);
+    setError(null);
+    setBusy(false);
+    setOpenKey(null);
+    setKeyDraft("");
+    setSavedFlash(false);
     if (active) void reload();
-  }, [active]);
+    const invalidate = () => {
+      lifetime.current++;
+      if (flashTimer.current !== null) clearTimeout(flashTimer.current);
+    };
+    return invalidate;
+  }, [active, root, reload]);
 
   async function update(change: {
     enabled?: Record<string, boolean>;
     apiKeys?: Record<string, string | null>;
     clearOverride?: boolean;
   }) {
+    const generation = lifetime.current;
     setBusy(true);
     setError(null);
     try {
       const next = await api.webSearchUpdate(change);
+      if (generation !== lifetime.current) return;
       setConfig(next);
       if (change.apiKeys) {
         setKeyDraft("");
         setSavedFlash(true);
-        setTimeout(() => setSavedFlash(false), 2000);
+        if (flashTimer.current !== null) clearTimeout(flashTimer.current);
+        flashTimer.current = setTimeout(() => {
+          if (generation === lifetime.current) setSavedFlash(false);
+        }, 2000);
       }
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Could not save web-search settings");
+      if (generation === lifetime.current) setError(err instanceof Error ? err.message : "Could not save web-search settings");
     } finally {
-      setBusy(false);
+      if (generation === lifetime.current) setBusy(false);
     }
   }
 
   if (!config || !config.configured) return null;
 
-  const byId = new Map(config.providers.map((p) => [p.id, p]));
-  const orderLabels = config.order.map((id) => byId.get(id)?.label ?? id);
-
-  return (
-    <div className="mt-6">
-      <h3 className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
-        Web search
-      </h3>
-      <p className="mt-1 text-xs text-muted-foreground">
-        Enable the providers this deployment may use. Searches run them
-        cheapest-first and only fall through to the next when one fails, so a
-        paid provider costs nothing until it is actually needed. The agent is
-        told which are enabled and can pick one deliberately. Changes apply to
-        new conversations.
-      </p>
-      <AppliesTo models={config.appliesTo} />
-
-      <div className="mt-4 rounded-lg border border-border-subtle bg-surface p-3">
-        {config.overriddenBy && (
-          <OverrideWarning
-            provider={config.overriddenBy}
-            busy={busy}
-            onClear={() => void update({ clearOverride: true })}
-          />
-        )}
-
-        <p className="text-[11px] text-muted-foreground">
-          {orderLabels.length > 0 ? (
-            <>
-              <span className="text-foreground">Order:</span>{" "}
-              {orderLabels.join(" → ")}
-            </>
-          ) : (
-            "Nothing enabled — the extension picks for itself, starting with a free rate-limited tier."
-          )}
-        </p>
-
-        <ul className="mt-3 space-y-1.5">
-          {config.providers.map((p) => (
-            <ProviderRow
-              key={p.id}
-              provider={p}
-              busy={busy}
-              keyOpen={openKey === p.id}
-              keyDraft={keyDraft}
-              setKeyDraft={setKeyDraft}
-              savedFlash={savedFlash}
-              onToggleKey={() => {
-                setKeyDraft("");
-                setOpenKey(openKey === p.id ? null : p.id);
-              }}
-              onToggle={() => void update({ enabled: { [p.id]: !p.enabled } })}
-              onSaveKey={() => void update({ apiKeys: { [p.id]: keyDraft } })}
-              onClearKey={() => void update({ apiKeys: { [p.id]: null } })}
-            />
-          ))}
-        </ul>
-
-        {error && <p className="mt-2 text-xs text-destructive">{error}</p>}
-      </div>
-    </div>
-  );
-}
-
-/**
- * Which models these toggles actually reach.
- *
- * The card is shown whenever the pi backend is configured, but a deployment
- * running both backends puts Claude models in the same picker — and those use
- * the Agent SDK's Anthropic-hosted WebSearch, which takes no provider setting.
- * Without this line the toggles look global and silently are not.
- */
-function AppliesTo({ models }: { models: string[] }) {
   return (
-    <p className="mt-2 text-xs text-muted-foreground">
-      Applies to{" "}
-      <span className="text-foreground">
-        {models.length > 0 ? models.join(", ") : "the pi models"}
-      </span>
-      . Claude models search through Anthropic instead, which has no provider
-      setting.
-    </p>
-  );
-}
-
-/**
- * A single-provider selection in the config file beats `searchRouting`
- * outright in the extension, and pi's own /curator command writes one back —
- * so a chain can be configured here and quietly not be what runs. Say so
- * instead of showing toggles that lie.
- */
-function OverrideWarning({
-  provider,
-  busy,
-  onClear,
-}: {
-  provider: string;
-  busy: boolean;
-  onClear: () => void;
-}) {
-  return (
-    <div className="mb-3 flex items-start gap-2 rounded-md border border-primary/40 bg-primary/10 p-2">
-      <AlertTriangle className="mt-0.5 h-3.5 w-3.5 shrink-0 text-primary" />
-      <div className="min-w-0 flex-1">
-        <p className="text-[11px] text-foreground">
-          Searches are pinned to <span className="font-medium">{provider}</span>,
-          which overrides the chain below. pi's own <code>/curator</code> command
-          sets this.
-        </p>
-        <button
-          onClick={onClear}
-          disabled={busy}
-          className="mt-1 rounded-md border border-border-subtle px-2 py-1 text-[11px] font-medium text-foreground transition-colors hover:border-primary hover:text-primary disabled:opacity-50"
-        >
-          Use the chain instead
-        </button>
-      </div>
-    </div>
-  );
-}
-
-function ProviderRow({
-  provider,
-  busy,
-  keyOpen,
-  keyDraft,
-  setKeyDraft,
-  savedFlash,
-  onToggle,
-  onToggleKey,
-  onSaveKey,
-  onClearKey,
-}: {
-  provider: WebSearchProvider;
-  busy: boolean;
-  keyOpen: boolean;
-  keyDraft: string;
-  setKeyDraft: (value: string) => void;
-  savedFlash: boolean;
-  onToggle: () => void;
-  onToggleKey: () => void;
-  onSaveKey: () => void;
-  onClearKey: () => void;
-}) {
-  const hasCredential = provider.keyless || provider.keyConfigured || provider.keyFromEnv;
-  return (
-    <li className="rounded-lg border border-border-subtle bg-background p-2.5">
-      {/* The switch sits in its own column; the label row carries the key chip,
-          so the cost note and blurb below get the full width instead of a
-          squeezed few characters. */}
-      <div className="flex items-start gap-3">
-        <Switch
-          // A provider that lost its key must still be switchable OFF —
-          // only turning one ON without a credential is blocked.
-          checked={provider.enabled}
-          disabled={busy || (!provider.enabled && !hasCredential)}
-          label={provider.label}
-          onToggle={onToggle}
-        />
-        <div className="min-w-0 flex-1">
-          <div className="flex items-start justify-between gap-2">
-            <p className="text-sm text-foreground">{provider.label}</p>
-            {provider.hasKeyField && (
-          <button
-            onClick={onToggleKey}
-            aria-expanded={keyOpen}
-            className={cn(
-              "shrink-0 rounded-md border px-2 py-1 text-[11px] font-medium transition-colors",
-              provider.keyConfigured
-                ? "border-border-subtle text-primary hover:border-primary"
-                : hasCredential
-                  ? "border-border-subtle text-muted-foreground hover:border-primary hover:text-foreground"
-                  : "border-dashed border-border text-muted-foreground hover:border-primary hover:text-primary"
-            )}
-          >
-            {provider.keyConfigured
-              ? "Key stored"
-              : provider.keyFromEnv
-                ? "Key from env"
-                : "Needs key"}
-          </button>
-            )}
-          </div>
-          {/* Not truncated: in a narrow settings panel a clipped "Paid —
-              metered p…" tells the reader nothing, and the blurb is the whole
-              reason to prefer one provider over another. */}
-          <p className="text-[11px] text-muted-foreground">{provider.costNote}</p>
-          <p className="text-[11px] text-muted-foreground/70">{provider.blurb}</p>
-        </div>
-      </div>
-
-      {keyOpen && provider.hasKeyField && (
-        <div className="mt-2">
-          {provider.keyFromEnv && !provider.keyConfigured && (
-            <p className="mb-1 text-[11px] text-muted-foreground">
-              A key is already coming from the environment. One saved here
-              takes its place.
-            </p>
-          )}
-          {provider.keyless && !provider.keyConfigured && (
-            <p className="mb-1 text-[11px] text-muted-foreground">
-              Optional — the free tier works without one, a key lifts its rate
-              limit.
-            </p>
-          )}
-          <KeyEditor
-            busy={busy}
-            draft={keyDraft}
-            setDraft={setKeyDraft}
-            keyConfigured={provider.keyConfigured}
-            savedFlash={savedFlash}
-            onSave={onSaveKey}
-            onClear={onClearKey}
-          />
-        </div>
-      )}
-    </li>
-  );
-}
-
-function Switch({
-  checked,
-  disabled,
-  label,
-  onToggle,
-}: {
-  checked: boolean;
-  disabled: boolean;
-  label: string;
-  onToggle: () => void;
-}) {
-  return (
-    <button
-      role="switch"
-      aria-checked={checked}
-      aria-label={`Enable ${label} for web search`}
-      disabled={disabled}
-      onClick={onToggle}
-      title={disabled && !checked ? `${label} needs an API key first` : undefined}
-      className={cn(
-        "relative mt-0.5 h-5 w-9 shrink-0 rounded-full border transition-colors disabled:opacity-40",
-        checked ? "border-primary bg-primary" : "border-border-subtle bg-surface-raised"
-      )}
-    >
-      <span
-        // left-0 is load-bearing: without it the knob lays out at its static
-        // position (the track's right edge) and the translate pushes it clean
-        // out of the pill.
-        className={cn(
-          "absolute left-0 top-0.5 h-3.5 w-3.5 rounded-full bg-background transition-transform",
-          checked ? "translate-x-[18px]" : "translate-x-0.5"
-        )}
-      />
-    </button>
-  );
-}
-
-function KeyEditor({
-  busy,
-  draft,
-  setDraft,
-  keyConfigured,
-  savedFlash,
-  onSave,
-  onClear,
-}: {
-  busy: boolean;
-  draft: string;
-  setDraft: (value: string) => void;
-  keyConfigured: boolean;
-  savedFlash: boolean;
-  onSave: () => void;
-  onClear: () => void;
-}) {
-  return (
-    <div className="flex items-center gap-2">
-      <input
-        type="password"
-        value={draft}
-        disabled={busy}
-        placeholder={keyConfigured ? "•••••••• (stored — enter to replace)" : "Paste API key"}
-        onChange={(e) => setDraft(e.target.value)}
-        onKeyDown={(e) => {
-          if (e.key === "Enter" && draft.trim()) onSave();
-        }}
-        autoComplete="off"
-        className="min-w-0 flex-1 rounded-md border border-border-subtle bg-background px-2 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none disabled:opacity-50"
-      />
-      <button
-        onClick={onSave}
-        disabled={busy || !draft.trim()}
-        className={cn(
-          "flex items-center gap-1 rounded-md border border-border-subtle px-2.5 py-1.5 text-xs font-medium transition-colors",
-          "text-foreground hover:border-primary hover:text-primary disabled:opacity-50"
-        )}
-      >
-        {busy ? <Loader2 className="h-3 w-3 animate-spin" /> : savedFlash ? <Check className="h-3 w-3" /> : null}
-        Save
-      </button>
-      {keyConfigured && (
-        <button
-          onClick={onClear}
-          disabled={busy}
-          title="Remove the stored key"
-          className="flex items-center gap-1 rounded-md border border-border-subtle px-2.5 py-1.5 text-xs font-medium text-muted-foreground transition-colors hover:border-destructive hover:text-destructive disabled:opacity-50"
-        >
-          <X className="h-3 w-3" />
-          Clear
-        </button>
-      )}
-    </div>
+    <WebSearchChain
+      config={config}
+      busy={busy}
+      error={error}
+      openKey={openKey}
+      keyDraft={keyDraft}
+      savedFlash={savedFlash}
+      onToggle={(id) => {
+        const provider = config.providers.find((p) => p.id === id);
+        if (provider) void update({ enabled: { [id]: !provider.enabled } });
+      }}
+      onToggleKey={(id) => {
+        setKeyDraft("");
+        setOpenKey(openKey === id ? null : id);
+      }}
+      onKeyDraft={setKeyDraft}
+      onSaveKey={(id) => void update({ apiKeys: { [id]: keyDraft } })}
+      onClearKey={(id) => void update({ apiKeys: { [id]: null } })}
+      onClearOverride={() => void update({ clearOverride: true })}
+    />
   );
 }

package/src/components/share/share-menu.tsx

@@ -1,3 +1,4 @@
+import { useBrainUiRoot } from "../../root-context.js";
 import { useEffect, useRef, useState } from "react";
 import { Share2, Loader2, Check, AlertCircle } from "lucide-react";
 import { cn } from "../../lib/utils.js";
@@ -33,11 +34,21 @@ interface ShareMenuProps {
 type Status = "idle" | "busy" | "done" | "error";
 
 export function ShareMenu({ options, title = "Share", className, renderTrigger }: ShareMenuProps) {
+  const root = useBrainUiRoot();
+  const lifetime = useRef(0);
+  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
   const [open, setOpen] = useState(false);
   const [status, setStatus] = useState<Status>("idle");
   const [error, setError] = useState<string | null>(null);
   const wrapperRef = useRef<HTMLDivElement>(null);
 
+  useEffect(() => {
+    lifetime.current++;
+    setOpen(false); setStatus("idle"); setError(null);
+    const invalidate = () => { lifetime.current++; clearTimeout(timer.current); };
+    return invalidate;
+  }, [root]);
+
   useEffect(() => {
     if (!open) return;
     const onDocClick = (e: MouseEvent) => {
@@ -63,18 +74,22 @@ export function ShareMenu({ options, title = "Share", className, renderTrigger }
   const single = options.length === 1 ? options[0] : null;
 
   const runOption = async (opt: ShareOption) => {
+    const token = ++lifetime.current;
+    clearTimeout(timer.current);
     setOpen(false);
     setStatus("busy");
     setError(null);
     try {
-      await opt.run();
-      setStatus("done");
-      setTimeout(() => setStatus("idle"), 1200);
+      const shared = await opt.run();
+      if (token !== lifetime.current) return;
+      setStatus(shared ? "done" : "idle");
+      timer.current = setTimeout(() => { if (token === lifetime.current) setStatus("idle"); }, 1200);
     } catch (err) {
+      if (token !== lifetime.current) return;
       console.error("[share-menu]", err);
       setError(err instanceof Error ? err.message : "Share failed");
       setStatus("error");
-      setTimeout(() => setStatus("idle"), 3000);
+      timer.current = setTimeout(() => { if (token === lifetime.current) setStatus("idle"); }, 3000);
     }
   };
 

package/src/components/voice/dictation-sheet.tsx

@@ -89,12 +89,12 @@ export function DictationSheet({
               {/* Pulse only once capture is actually live — a "connecting" dot
                   must not imply the mic is already open. */}
               {!connecting && (
-                <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-primary opacity-75" />
+                <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-primary-mark opacity-75" />
               )}
               <span
                 className={cn(
                   "relative inline-flex h-2 w-2 rounded-full",
-                  connecting ? "bg-muted-foreground/50" : "bg-primary"
+                  connecting ? "bg-muted-foreground/50" : "bg-primary-mark"
                 )}
               />
             </span>
@@ -135,7 +135,7 @@ export function DictationSheet({
         {/* Transcript */}
         <div ref={transcriptRef} className="flex-1 overflow-y-auto px-6 pb-6">
           {error ? (
-            <div className="rounded-lg bg-destructive/10 p-4 text-sm text-destructive">
+            <div className="rounded-lg bg-destructive-fill/10 p-4 text-sm text-destructive">
               {error}
             </div>
           ) : (
@@ -160,7 +160,7 @@ export function DictationSheet({
           <button
             onClick={onStop}
             disabled={draining}
-            className="flex h-14 w-full items-center justify-center gap-3 rounded-xl bg-primary text-primary-foreground transition-all duration-150 hover:brightness-110 active:scale-[0.99] disabled:opacity-60 disabled:cursor-progress"
+            className="flex h-14 w-full items-center justify-center gap-3 rounded-xl bg-primary-fill text-primary-foreground transition-all duration-150 hover:brightness-110 active:scale-[0.99] disabled:opacity-60 disabled:cursor-progress"
           >
             <Mic className="h-5 w-5" />
             <span className="text-sm font-semibold uppercase tracking-wider">
@@ -208,7 +208,7 @@ function Waveform({ level }: { level: number }) {
           <span
             key={i}
             style={{ height: `${h}px` }}
-            className="w-1.5 rounded-full bg-primary transition-[height] duration-75 ease-linear"
+            className="w-1.5 rounded-full bg-primary-mark transition-[height] duration-75 ease-linear"
           />
         );
       })}

package/src/components/voice/mic-button.tsx

@@ -20,7 +20,7 @@ export function MicButton({
       className={cn(
         "flex h-8 w-8 items-center justify-center rounded-lg transition-all duration-150",
         active
-          ? "bg-primary text-primary-foreground animate-pulse"
+          ? "bg-primary-fill text-primary-foreground animate-pulse"
           : "text-muted-foreground hover:bg-surface-raised hover:text-foreground",
         disabled && "opacity-30 cursor-not-allowed"
       )}

package/src/components/voice/review-card.tsx

@@ -55,7 +55,7 @@ export function ReviewCard({
         <button
           type="button"
           onClick={onSend}
-          className="flex h-10 items-center gap-2 rounded-xl bg-primary px-5 text-sm font-semibold text-primary-foreground transition-all duration-150 hover:brightness-110 active:scale-[0.98]"
+          className="flex h-10 items-center gap-2 rounded-xl bg-primary-fill px-5 text-sm font-semibold text-primary-foreground transition-all duration-150 hover:brightness-110 active:scale-[0.98]"
         >
           <Send className="h-4 w-4" />
           Send

package/src/config.ts

@@ -14,8 +14,9 @@
  * `scripts/check-env-access.ts` now refuses `import.meta.env` anywhere in a
  * package's `src`, so the loophole cannot reopen.
  *
- * Values are a module-level singleton, matching the renderer/ASR registries.
- * Runtime plugin-style reconfiguration is deliberately unsupported.
+ * `createBrainUiConfig` makes independent configurations for UI roots. The
+ * existing `uiConfig` remains the application's default until root migration
+ * is complete. Runtime plugin-style reconfiguration is unsupported.
  */
 export interface BrainUiConfig {
   /** Product name shown on the login screen and connection status. */
@@ -46,7 +47,7 @@ export interface BrainUiConfig {
   devTools: boolean;
 }
 
-export const uiConfig: BrainUiConfig = {
+const DEFAULT_CONFIG: Readonly<BrainUiConfig> = {
   appName: "Brain UI",
   assistantName: "Brain",
   shareTitle: "Shared from Brain",
@@ -55,6 +56,22 @@ export const uiConfig: BrainUiConfig = {
   devTools: false,
 };
 
+/** Fresh values for one UI root; never reads or mutates the default instance. */
+export function createBrainUiConfig(overrides: Partial<BrainUiConfig> = {}): BrainUiConfig {
+  const config = { ...DEFAULT_CONFIG };
+  applyConfig(config, overrides);
+  return config;
+}
+
+function applyConfig(config: BrainUiConfig, overrides: Partial<BrainUiConfig>): void {
+  Object.assign(config, overrides);
+  if (typeof overrides.backendUrl === "string") {
+    config.backendUrl = overrides.backendUrl.replace(/\/$/, "");
+  }
+}
+
+export const uiConfig = createBrainUiConfig();
+
 /**
  * Dev-handle installers, registered at module scope by the stores that own a
  * handle. They cannot read `uiConfig.devTools` themselves: ES imports are
@@ -78,9 +95,6 @@ export function registerDevHandle(install: () => void): void {
 }
 
 export function configureBrainUi(overrides: Partial<BrainUiConfig>): void {
-  Object.assign(uiConfig, overrides);
-  if (typeof overrides.backendUrl === "string") {
-    uiConfig.backendUrl = overrides.backendUrl.replace(/\/$/, "");
-  }
+  applyConfig(uiConfig, overrides);
   if (uiConfig.devTools) installDevHandles();
 }