@schlessera/brain-ui-react 0.4.0 → 0.5.1

package/src/components/layout/mobile-tab-bar.tsx

@@ -1,29 +1,94 @@
+import { useEffect, useRef, useState } from "react";
 import {
   Brain,
-  Newspaper,
   RefreshCw,
   History,
-  KeyRound,
+  SlidersHorizontal,
   FolderTree,
+  SquarePen,
+  MoreHorizontal,
 } from "lucide-react";
 import { useUIStore } from "../../stores/ui-store.js";
+import { useChatStore } from "../../stores/chat-store.js";
 import { cn } from "../../lib/utils.js";
 
 export function MobileTabBar() {
   const toggleSessionPanel = useUIStore((s) => s.toggleSessionPanel);
   const toggleSyncPanel = useUIStore((s) => s.toggleSyncPanel);
-  const toggleWhatsupPanel = useUIStore((s) => s.toggleWhatsupPanel);
   const toggleFilePanel = useUIStore((s) => s.toggleFilePanel);
-  const toggleSecurityPanel = useUIStore((s) => s.toggleSecurityPanel);
+  const toggleSettingsPanel = useUIStore((s) => s.toggleSettingsPanel);
+  const clearMessages = useChatStore((s) => s.clearMessages);
+
+  const [moreOpen, setMoreOpen] = useState(false);
+  const moreRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!moreOpen) return;
+    function onDocClick(e: MouseEvent) {
+      if (!moreRef.current?.contains(e.target as Node)) setMoreOpen(false);
+    }
+    function onKey(e: KeyboardEvent) {
+      if (e.key === "Escape") setMoreOpen(false);
+    }
+    document.addEventListener("mousedown", onDocClick);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDocClick);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [moreOpen]);
 
   return (
     <nav className="md:hidden fixed bottom-0 inset-x-0 z-30 flex h-14 items-center justify-around border-t border-border bg-surface px-1 pb-[env(safe-area-inset-bottom)]">
       <TabIcon icon={Brain} label="Chat" active />
-      <TabIcon icon={Newspaper} label="Brief" onClick={toggleWhatsupPanel} />
+      <TabIcon
+        icon={SquarePen}
+        label="New chat"
+        onClick={() => {
+          setMoreOpen(false);
+          clearMessages();
+        }}
+      />
       <TabIcon icon={FolderTree} label="Files" onClick={toggleFilePanel} />
-      <TabIcon icon={RefreshCw} label="Sync" onClick={toggleSyncPanel} />
-      <TabIcon icon={History} label="History" onClick={toggleSessionPanel} />
-      <TabIcon icon={KeyRound} label="Security" onClick={toggleSecurityPanel} />
+      <div ref={moreRef} className="relative">
+        <TabIcon
+          icon={MoreHorizontal}
+          label="More"
+          active={moreOpen}
+          onClick={() => setMoreOpen((v) => !v)}
+        />
+        {moreOpen && (
+          <div
+            role="menu"
+            className="absolute bottom-full right-0 z-50 mb-2 min-w-[10rem] overflow-hidden rounded-xl border border-border bg-surface-overlay py-1 shadow-2xl"
+          >
+            <MoreItem
+              icon={RefreshCw}
+              label="Sync"
+              onClick={() => {
+                setMoreOpen(false);
+                toggleSyncPanel();
+              }}
+            />
+            <MoreItem
+              icon={History}
+              label="History"
+              onClick={() => {
+                setMoreOpen(false);
+                toggleSessionPanel();
+              }}
+            />
+            <MoreItem
+              icon={SlidersHorizontal}
+              label="Settings"
+              onClick={() => {
+                setMoreOpen(false);
+                toggleSettingsPanel();
+              }}
+            />
+          </div>
+        )}
+      </div>
     </nav>
   );
 }
@@ -52,3 +117,25 @@ function TabIcon({
     </button>
   );
 }
+
+function MoreItem({
+  icon: Icon,
+  label,
+  onClick,
+}: {
+  icon: typeof Brain;
+  label: string;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      role="menuitem"
+      type="button"
+      onClick={onClick}
+      className="flex w-full items-center gap-2.5 px-3 py-2.5 text-left text-xs text-foreground transition-colors hover:bg-surface-raised"
+    >
+      <Icon className="h-4 w-4 shrink-0 text-muted-foreground" />
+      {label}
+    </button>
+  );
+}

package/src/components/layout/side-rail.tsx

@@ -3,7 +3,7 @@ import {
   RefreshCw,
   Newspaper,
   History,
-  KeyRound,
+  SlidersHorizontal,
   SquarePen,
   FolderTree,
 } from "lucide-react";
@@ -18,7 +18,7 @@ export function SideRail() {
   const toggleSyncPanel = useUIStore((s) => s.toggleSyncPanel);
   const toggleWhatsupPanel = useUIStore((s) => s.toggleWhatsupPanel);
   const toggleFilePanel = useUIStore((s) => s.toggleFilePanel);
-  const toggleSecurityPanel = useUIStore((s) => s.toggleSecurityPanel);
+  const toggleSettingsPanel = useUIStore((s) => s.toggleSettingsPanel);
   const clearMessages = useChatStore((s) => s.clearMessages);
   const hasMessages = useChatStore((s) => activeChat(s).messages.length > 0);
   const isStreaming = useChatStore((s) => activeChat(s).isStreaming);
@@ -71,11 +71,11 @@ export function SideRail() {
         onClick={toggleSessionPanel}
       />
 
-      {/* Security (passkeys, sign out) */}
+      {/* Settings (models, passkeys, sign out) */}
       <RailButton
-        icon={KeyRound}
-        label="Security"
-        onClick={toggleSecurityPanel}
+        icon={SlidersHorizontal}
+        label="Settings"
+        onClick={toggleSettingsPanel}
       />
 
       {/* Connection status */}

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

@@ -0,0 +1,214 @@
+import { useEffect, useState } from "react";
+import { Eye, EyeOff, Loader2, RefreshCw } from "lucide-react";
+import type {
+  ModelCatalogEntry,
+  ModelCatalogResponse,
+} from "@schlessera/brain-ui-sdk/protocol";
+import { api } from "../../lib/api-client.js";
+import { useProviderStore } from "../../stores/provider-store.js";
+import { cn } from "../../lib/utils.js";
+
+/**
+ * The model picker's contents, and which of them to show.
+ *
+ * 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.
+ */
+export function ModelsTab({ active }: { active: boolean }) {
+  const [catalog, setCatalog] = useState<ModelCatalogResponse | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [refreshing, setRefreshing] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const loadProviders = useProviderStore((s) => s.loadProviders);
+
+  useEffect(() => {
+    if (!active) return;
+    let cancelled = false;
+    setLoading(true);
+    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]);
+
+  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");
+    }
+  }
+
+  async function onRefresh() {
+    if (refreshing) return;
+    setRefreshing(true);
+    setError(null);
+    try {
+      setCatalog(await api.refreshModels());
+      // 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");
+    } finally {
+      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>
+
+        {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)}
+              />
+            ))}
+            {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>
+        )}
+      </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>
+  );
+}
+
+function ModelRow({
+  entry,
+  onToggle,
+}: {
+  entry: ModelCatalogEntry;
+  onToggle: () => 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>
+      <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/{passkey-panel.tsx → passkey-tab.tsx}

@@ -13,21 +13,18 @@ import {
 import type { PasskeySummary } from "@schlessera/brain-ui-sdk/protocol";
 import { api } from "../../lib/api-client.js";
 import { isUserCancel, registerPasskey, supportsPasskeys } from "../../lib/passkeys.js";
-import { SlidePanel } from "../layout/slide-panel.js";
 import { cn } from "../../lib/utils.js";
 
 /**
- * Passkey management + sign out. Registration requires the current session
- * (routes are behind the auth guard); credentials are RP-scoped, so entries
- * registered on another hostname are badged and only useful there.
+ * Passkey management + sign out — the Security tab of the settings panel.
+ * Registration requires the current session (routes are behind the auth guard);
+ * credentials are RP-scoped, so entries registered on another hostname are
+ * badged and only useful there.
+ *
+ * `active` is "this tab is on screen": the list reloads when it becomes visible
+ * rather than on mount, so switching tabs picks up changes made elsewhere.
  */
-export function PasskeyPanel({
-  open,
-  onClose,
-}: {
-  open: boolean;
-  onClose: () => void;
-}) {
+export function PasskeyTab({ active }: { active: boolean }) {
   const [credentials, setCredentials] = useState<PasskeySummary[]>([]);
   const [loading, setLoading] = useState(false);
   const [busy, setBusy] = useState(false);
@@ -52,11 +49,11 @@ export function PasskeyPanel({
   }
 
   useEffect(() => {
-    if (open) {
+    if (active) {
       setError(null);
       void refresh();
     }
-  }, [open]);
+  }, [active]);
 
   async function onAdd() {
     if (busy) return;
@@ -106,79 +103,77 @@ export function PasskeyPanel({
   }
 
   return (
-    <SlidePanel open={open} onClose={onClose} title="Security">
-      <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">
-            Passkeys
-          </h3>
-          <p className="mt-1 text-xs text-muted-foreground">
-            Sign in with Face ID, fingerprint, or a security key instead of the
-            password. Passkeys only work on the site they were added on.
-          </p>
+    <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">
+          Passkeys
+        </h3>
+        <p className="mt-1 text-xs text-muted-foreground">
+          Sign in with Face ID, fingerprint, or a security key instead of the
+          password. Passkeys only work on the site they were added on.
+        </p>
 
-          {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">
-              {credentials.map((credential) => (
-                <PasskeyRow
-                  key={credential.id}
-                  credential={credential}
-                  onDelete={() => onDelete(credential.id)}
-                  onRename={(label) => onRename(credential.id, label)}
-                />
-              ))}
-              {credentials.length === 0 && passkeyMode && (
-                <li className="rounded-lg border border-dashed border-border-subtle p-4 text-center text-xs text-muted-foreground">
-                  No passkeys yet.
-                </li>
-              )}
-            </ul>
-          )}
-
-          {error && (
-            <p role="alert" className="mt-3 text-xs text-destructive">
-              {error}
-            </p>
-          )}
+        {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">
+            {credentials.map((credential) => (
+              <PasskeyRow
+                key={credential.id}
+                credential={credential}
+                onDelete={() => onDelete(credential.id)}
+                onRename={(label) => onRename(credential.id, label)}
+              />
+            ))}
+            {credentials.length === 0 && passkeyMode && (
+              <li className="rounded-lg border border-dashed border-border-subtle p-4 text-center text-xs text-muted-foreground">
+                No passkeys yet.
+              </li>
+            )}
+          </ul>
+        )}
 
-          {passkeyMode && webAuthnSupported ? (
-            <button
-              onClick={onAdd}
-              disabled={busy}
-              className="mt-4 flex w-full items-center justify-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:brightness-110 disabled:opacity-50"
-            >
-              {busy ? (
-                <Loader2 className="h-4 w-4 animate-spin" />
-              ) : (
-                <Plus className="h-4 w-4" />
-              )}
-              Add a passkey
-            </button>
-          ) : (
-            <p className="mt-4 text-xs text-muted-foreground">
-              {passkeyMode
-                ? "This browser does not support passkeys."
-                : "Passkeys need password auth mode on the server."}
-            </p>
-          )}
-        </div>
+        {error && (
+          <p role="alert" className="mt-3 text-xs text-destructive">
+            {error}
+          </p>
+        )}
 
-        {/* Sign out */}
-        <div className="border-t border-border p-4">
+        {passkeyMode && webAuthnSupported ? (
           <button
-            onClick={onSignOut}
-            className="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-destructive hover:text-destructive"
+            onClick={onAdd}
+            disabled={busy}
+            className="mt-4 flex w-full items-center justify-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:brightness-110 disabled:opacity-50"
           >
-            <LogOut className="h-4 w-4" />
-            Sign out
+            {busy ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              <Plus className="h-4 w-4" />
+            )}
+            Add a passkey
           </button>
-        </div>
+        ) : (
+          <p className="mt-4 text-xs text-muted-foreground">
+            {passkeyMode
+              ? "This browser does not support passkeys."
+              : "Passkeys need password auth mode on the server."}
+          </p>
+        )}
+      </div>
+
+      {/* Sign out */}
+      <div className="border-t border-border p-4">
+        <button
+          onClick={onSignOut}
+          className="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-destructive hover:text-destructive"
+        >
+          <LogOut className="h-4 w-4" />
+          Sign out
+        </button>
       </div>
-    </SlidePanel>
+    </div>
   );
 }
 

package/src/components/settings/settings-panel.tsx

@@ -0,0 +1,61 @@
+import { KeyRound, SlidersHorizontal } from "lucide-react";
+import { useUIStore, type SettingsTab } from "../../stores/ui-store.js";
+import { SlidePanel } from "../layout/slide-panel.js";
+import { cn } from "../../lib/utils.js";
+import { ModelsTab } from "./models-tab.js";
+import { PasskeyTab } from "./passkey-tab.js";
+
+const TABS: Array<{ id: SettingsTab; label: string; icon: typeof KeyRound }> = [
+  { id: "models", label: "Models", icon: SlidersHorizontal },
+  { id: "security", label: "Security", icon: KeyRound },
+];
+
+/**
+ * The settings surface: one panel, one entry point in the menus, a tab per
+ * area. Only the selected tab is mounted — each fetches its own data on becoming
+ * active, so switching tabs (or reopening the panel) always shows current state.
+ */
+export function SettingsPanel({
+  open,
+  onClose,
+}: {
+  open: boolean;
+  onClose: () => void;
+}) {
+  const tab = useUIStore((s) => s.settingsTab);
+  const setTab = useUIStore((s) => s.setSettingsTab);
+
+  return (
+    <SlidePanel open={open} onClose={onClose} title="Settings">
+      <div className="flex h-full flex-col">
+        <div className="flex shrink-0 gap-1 border-b border-border px-2 pt-2">
+          {TABS.map(({ id, label, icon: Icon }) => (
+            <button
+              key={id}
+              onClick={() => setTab(id)}
+              aria-selected={tab === id}
+              role="tab"
+              className={cn(
+                "flex items-center gap-1.5 rounded-t-lg px-3 py-2 text-xs font-medium transition-colors",
+                tab === id
+                  ? "border-b-2 border-primary text-foreground"
+                  : "text-muted-foreground hover:text-foreground"
+              )}
+            >
+              <Icon className="h-3.5 w-3.5" />
+              {label}
+            </button>
+          ))}
+        </div>
+
+        <div className="min-h-0 flex-1">
+          {tab === "models" ? (
+            <ModelsTab active={open && tab === "models"} />
+          ) : (
+            <PasskeyTab active={open && tab === "security"} />
+          )}
+        </div>
+      </div>
+    </SlidePanel>
+  );
+}

package/src/lib/api-client.ts

@@ -6,6 +6,7 @@ import type {
   PronunciationOverride,
   ProviderInfo,
   PasskeySummary,
+  ModelCatalogResponse,
 } from "@schlessera/brain-ui-sdk/protocol";
 import type {
   AuthenticationResponseJSON,
@@ -119,6 +120,20 @@ export const api = {
       backends?: Record<string, BackendInfo>;
     }>("/providers"),
 
+  /** Full model catalog for the settings screen — hidden entries included. */
+  models: () => fetchJson<ModelCatalogResponse>("/models"),
+
+  /** Replace the hidden set (full list, not a delta); returns the new catalog. */
+  setHiddenModels: (hidden: string[]) =>
+    fetchJson<ModelCatalogResponse>("/models/hidden", {
+      method: "PUT",
+      body: JSON.stringify({ hidden }),
+    }),
+
+  /** Force a discovery refresh, bypassing the TTL. */
+  refreshModels: () =>
+    fetchJson<ModelCatalogResponse>("/models/refresh", { method: "POST" }),
+
   /** Password-mode login. Resolves on success; throws the server error otherwise. */
   login: (password: string) =>
     fetchJson<{ ok: true }>("/auth/login", {

package/src/stores/provider-store.ts

@@ -51,12 +51,23 @@ export const useProviderStore = create<ProviderState>((set, get) => ({
       const { providers, backends } = await api.providers();
       set((s) => {
         // Keep the persisted choice if it's still on offer; otherwise fall
-        // back to the first available combo.
+        // back to the first available combo. This runs on every reload of the
+        // roster, so hiding the selected model in settings moves the selection
+        // instead of leaving the composer pointing at a profile the picker no
+        // longer lists.
         const stillValid = providers.some((p) => p.id === s.selectedId);
         const selectedId =
           stillValid && s.selectedId
             ? s.selectedId
             : providers[0]?.id ?? "";
+        // Persist the fallback too — otherwise the stale id sits in
+        // localStorage and has to be re-resolved on every boot.
+        if (
+          selectedId !== s.selectedId &&
+          typeof localStorage !== "undefined"
+        ) {
+          localStorage.setItem(PROVIDER_ID_KEY, selectedId);
+        }
         return {
           available: providers,
           selectedId,