@schlessera/brain-ui-react 0.35.0 → 0.37.0

package/src/components/settings/devices-agents-tab.tsx

@@ -1,9 +1,9 @@
-import { useEffect, useState, type FormEvent } from "react";
-import { Bot, Laptop, Loader2, Plus, Trash2 } from "lucide-react";
-import { api, type PrincipalSummary } from "../../lib/api-client.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { PrincipalSummary } from "../../lib/api-client.js";
+import { useBrainApi } from "../../root-context.js";
 import { formatRelativeTime } from "../../lib/format-time.js";
-import { cn } from "../../lib/utils.js";
 import { usePrincipalStore } from "../../stores/principal-store.js";
+import { PrincipalList } from "./principal-list.js";
 
 const MAX_LABEL_LENGTH = 64;
 const NOT_ENABLED = "Principal management is not enabled";
@@ -12,8 +12,16 @@ function displayLabel(label: string): string {
   return Array.from(label).slice(0, MAX_LABEL_LENGTH).join("");
 }
 
-/** Active devices and delegated agents, with owner-only mint and revoke controls. */
+/**
+ * Active devices and delegated agents, with owner-only mint and revoke
+ * controls. This is the container (S7): the principals request, the mint
+ * through the principal store and the revoke with its confirm live here;
+ * `PrincipalList` draws the list and the form on the kit.
+ */
 export function DevicesAgentsTab({ active }: { active: boolean }) {
+  const api = useBrainApi();
+  const lifetime = useRef(0);
+  const request = useRef(0);
   const [principals, setPrincipals] = useState<PrincipalSummary[]>([]);
   const [loading, setLoading] = useState(false);
   const [enabled, setEnabled] = useState(true);
@@ -28,15 +36,20 @@ export function DevicesAgentsTab({ active }: { active: boolean }) {
   );
   const mintAgent = usePrincipalStore((state) => state.mintAgent);
 
-  async function refresh() {
+  const refresh = useCallback(async () => {
+    const generation = lifetime.current;
+    const token = ++request.current;
+    const current = () => generation === lifetime.current && token === request.current;
     setLoading(true);
     setLoadFailed(false);
     setError(null);
     try {
       const data = await api.principals();
+      if (!current()) return;
       setPrincipals(data.principals);
       setEnabled(true);
     } catch (err) {
+      if (!current()) return;
       setPrincipals([]);
       if (err instanceof Error && err.message === NOT_ENABLED) {
         setEnabled(false);
@@ -46,22 +59,31 @@ export function DevicesAgentsTab({ active }: { active: boolean }) {
         setError(err instanceof Error ? err.message : "Could not load devices and agents");
       }
     } finally {
-      setLoading(false);
+      if (current()) setLoading(false);
     }
-  }
+  }, [api]);
 
   useEffect(() => {
+    lifetime.current++;
+    setPrincipals([]);
+    setLoading(false);
+    setEnabled(true);
+    setLoadFailed(false);
+    setError(null);
+    setLabel("");
+    setTtlDays(7);
     if (active) void refresh();
-  }, [active]);
+    const invalidate = () => { lifetime.current++; };
+    return invalidate;
+  }, [active, refresh]);
 
   useEffect(() => {
     if (!oneTimeCredential) return;
     setLabel("");
     if (active) void refresh();
-  }, [active, oneTimeCredential]);
+  }, [active, oneTimeCredential, refresh]);
 
-  function onMint(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault();
+  function onMint() {
     const trimmed = label.trim();
     if (!trimmed || busy) return;
     setError(null);
@@ -76,156 +98,42 @@ export function DevicesAgentsTab({ active }: { active: boolean }) {
         : "That device will be signed out immediately.";
     if (!window.confirm(`${consequence} You can't undo this.`)) return;
 
+    const generation = lifetime.current;
     setError(null);
     try {
       await api.principalRevoke(principal.id);
+      if (generation !== lifetime.current) return;
       setPrincipals((rows) => rows.filter((row) => row.id !== principal.id));
       if (principal.is_own) window.location.reload();
     } catch (err) {
+      if (generation !== lifetime.current) return;
       setError(err instanceof Error ? err.message : "Could not revoke access");
     }
   }
 
   return (
-    <div className="h-full overflow-y-auto p-4">
-      <h3 className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
-        Devices &amp; agents
-      </h3>
-      <p className="mt-1 text-xs text-muted-foreground">
-        See where this brain is signed in and create time-limited access for an agent.
-      </p>
-
-      {loading ? (
-        <div className="mt-6 flex justify-center">
-          <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
-        </div>
-      ) : !enabled ? (
-        <p className="mt-4 text-xs text-muted-foreground">
-          Devices and agents can only be managed when password authentication is enabled.
-        </p>
-      ) : loadFailed ? (
-        <p role="alert" className="mt-4 text-xs text-destructive">
-          {error}
-        </p>
-      ) : (
-        <>
-          <ul className="mt-4 flex flex-col gap-2">
-            {principals.map((principal) => (
-              <PrincipalRow
-                key={principal.id}
-                principal={principal}
-                onRevoke={() => void onRevoke(principal)}
-              />
-            ))}
-            {principals.length === 0 ? (
-              <li className="rounded-lg border border-dashed border-border-subtle p-4 text-center text-xs text-muted-foreground">
-                No active devices or agents.
-              </li>
-            ) : null}
-          </ul>
-
-          {error || mintError ? (
-            <p role="alert" className="mt-3 text-xs text-destructive">
-              {error ?? mintError}
-            </p>
-          ) : null}
-
-          <form onSubmit={onMint} className="mt-6 border-t border-border pt-4">
-            <h4 className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
-              Agent access
-            </h4>
-            <p className="mt-1 text-xs text-muted-foreground">
-              Create a credential an agent can use until it expires or you revoke it.
-            </p>
-            <label className="mt-3 block text-xs font-medium text-foreground" htmlFor="agent-label">
-              Label
-            </label>
-            <input
-              id="agent-label"
-              value={label}
-              maxLength={MAX_LABEL_LENGTH}
-              onChange={(event) => setLabel(event.target.value)}
-              placeholder="Build agent"
-              className="mt-1 w-full rounded-lg border border-border-subtle bg-background px-3 py-2 text-sm text-foreground outline-none focus:border-primary"
-            />
-            <label className="mt-3 block text-xs font-medium text-foreground" htmlFor="agent-ttl">
-              Expires after
-            </label>
-            <select
-              id="agent-ttl"
-              value={ttlDays}
-              onChange={(event) => setTtlDays(Number(event.target.value))}
-              className="mt-1 w-full rounded-lg border border-border-subtle bg-background px-3 py-2 text-sm text-foreground outline-none focus:border-primary"
-            >
-              <option value={1}>1 day</option>
-              <option value={7}>7 days</option>
-              <option value={30}>30 days</option>
-            </select>
-            <button
-              type="submit"
-              disabled={busy || !label.trim()}
-              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" />}
-              Create agent credential
-            </button>
-          </form>
-        </>
-      )}
-    </div>
-  );
-}
-
-function PrincipalRow({
-  principal,
-  onRevoke,
-}: {
-  principal: PrincipalSummary;
-  onRevoke: () => void;
-}) {
-  const agent = principal.kind === "agent";
-  const Icon = agent ? Bot : Laptop;
-  const kind = principal.is_own ? "This device" : agent ? "Agent" : "Device";
-
-  return (
-    <li
-      className={cn(
-        "rounded-lg border bg-surface p-3",
-        principal.is_own ? "border-primary/60" : "border-border-subtle"
-      )}
-    >
-      <div className="flex items-start gap-2">
-        <Icon className="mt-0.5 h-4 w-4 shrink-0 text-primary" />
-        <div className="min-w-0 flex-1">
-          <div className="flex flex-wrap items-center gap-1.5">
-            <span className="break-words text-sm text-foreground">
-              {displayLabel(principal.label)}
-            </span>
-            <span className="rounded bg-surface-raised px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
-              {kind}
-            </span>
-          </div>
-          <dl className="mt-1.5 grid grid-cols-[auto_1fr] gap-x-2 gap-y-0.5 text-[11px] text-muted-foreground">
-            <dt>Created</dt>
-            <dd>{formatRelativeTime(principal.created_at)}</dd>
-            <dt>Last seen</dt>
-            <dd>
-              {principal.last_seen_at ? formatRelativeTime(principal.last_seen_at) : "Never"}
-            </dd>
-            <dt>Expires</dt>
-            <dd>{formatRelativeTime(principal.expires_at)}</dd>
-          </dl>
-        </div>
-        <button
-          type="button"
-          onClick={onRevoke}
-          aria-label={`Revoke ${displayLabel(principal.label)}`}
-          className="flex shrink-0 items-center gap-1 rounded px-1.5 py-1 text-xs text-muted-foreground transition-colors hover:text-destructive"
-        >
-          <Trash2 className="h-3.5 w-3.5" />
-          Revoke
-        </button>
-      </div>
-    </li>
+    <PrincipalList
+      state={loading ? "loading" : !enabled ? "unavailable" : loadFailed ? "error" : "ready"}
+      principals={principals.map((principal) => ({
+        id: principal.id,
+        label: displayLabel(principal.label),
+        kind: principal.kind,
+        isOwn: principal.is_own,
+        created: formatRelativeTime(principal.created_at),
+        lastSeen: principal.last_seen_at ? formatRelativeTime(principal.last_seen_at) : "Never",
+        expires: formatRelativeTime(principal.expires_at),
+      }))}
+      error={error ?? mintError}
+      label={label}
+      ttlDays={ttlDays}
+      minting={busy}
+      onLabel={setLabel}
+      onTtlDays={setTtlDays}
+      onMint={onMint}
+      onRevoke={(id) => {
+        const principal = principals.find((row) => row.id === id);
+        if (principal) void onRevoke(principal);
+      }}
+    />
   );
 }

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

@@ -0,0 +1,299 @@
+import { Button, Callout, Chip, Placeholder } from "@schlessera/brain-ui-kit";
+import { Eye, EyeOff, X } from "lucide-react";
+import {
+  THINKING_LEVELS,
+  type BillingMode,
+  type ModelCatalogEntry,
+  type ModelCatalogResponse,
+  type ThinkingLevel,
+} from "@schlessera/brain-ui-sdk/protocol";
+import { useState, type ReactNode } from "react";
+
+/**
+ * The Models tab's surface, rendered from props (S7, the `settings`
+ * directory). `ModelsTab` is the container: the catalog request, the
+ * optimistic commits, their ordering gate and their write queue live there;
+ * this draws the roster.
+ *
+ * The per-row choices stay native `<select>`s with the accessible names the
+ * tests read — the kit has no select — and the hide toggle stays a native,
+ * titled icon button. A hidden model is no longer faded (design-feedback
+ * §4, "no opacity de-emphasis"): it reads as hidden from its chip, at full
+ * contrast. Refresh, Add and the section errors are the kit's.
+ */
+export interface ModelsCatalogViewProps {
+  catalog: ModelCatalogResponse | null;
+  loading: boolean;
+  refreshing: boolean;
+  error: string | null;
+  /** The sections the tab hosts below the roster, rendered by the container. */
+  sections: ReactNode;
+  onToggleHidden: (entry: ModelCatalogEntry) => void;
+  onBilling: (entry: ModelCatalogEntry, next: BillingMode | "auto") => void;
+  onThinking: (entry: ModelCatalogEntry, next: ThinkingLevel | "auto") => void;
+  onDefault: (next: string | null) => void;
+  onCustomModels: (models: string[]) => void;
+  onRefresh: () => void;
+}
+
+export function ModelsCatalogView(p: ModelsCatalogViewProps) {
+  const catalog = p.catalog;
+  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={p.onDefault} />}
+
+        {p.loading ? (
+          <div className="mt-4">
+            <Placeholder variant="loading" lines={4} />
+          </div>
+        ) : (
+          <ul className="mt-4 flex flex-col gap-2">
+            {catalog?.models.map((entry) => (
+              <ModelRow
+                key={entry.id}
+                entry={entry}
+                onToggle={() => p.onToggleHidden(entry)}
+                onBilling={(next) => p.onBilling(entry, next)}
+                onThinking={(next) => p.onThinking(entry, next)}
+              />
+            ))}
+            {catalog?.models.length === 0 && (
+              <li>
+                <Placeholder variant="empty" message="No models available." icon="model" />
+              </li>
+            )}
+          </ul>
+        )}
+
+        {p.error && (
+          <div role="alert" className="mt-3">
+            <Callout tone="red" variant="banner" icon="failed" mono text={p.error} />
+          </div>
+        )}
+
+        {catalog?.discovery.error && (
+          <div className="mt-3">
+            <Callout tone="gold" variant="banner" icon="unverified" mono text={`Last refresh failed (${catalog.discovery.error}). Showing the last known list.`} />
+          </div>
+        )}
+        {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={p.onCustomModels} />}
+
+        {p.sections}
+      </div>
+
+      <div className="flex items-center justify-between gap-3 border-t border-border p-4">
+        <span className="font-[family-name:var(--font-mono)] text-[11px] text-muted-foreground">
+          {visibleCount} in picker · {formatRefreshed(catalog?.refreshedAt ?? null)}
+        </span>
+        <Button label={p.refreshing ? "Refreshing…" : "Refresh"} icon="retry" tone="ghost" size="sm" block={false} disabled={p.refreshing} onClick={p.onRefresh} />
+      </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). The draft is the section's own.
+ */
+export 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
+                type="button"
+                onClick={() => onChange(models.filter((m) => m !== model))}
+                title={`Remove ${model}`}
+                aria-label={`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 items-center 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"
+          aria-label="OpenRouter model id"
+          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 label="Add" icon="add" tone="ghost" size="sm" block={false} disabled={!draft.trim()} onClick={add} />
+      </div>
+    </div>
+  );
+}
+
+function billingLabel(mode: BillingMode): string {
+  return mode === "api" ? "API" : "Subscription";
+}
+
+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="flex items-center gap-3 rounded-lg border border-border-subtle bg-surface p-3">
+      <div className="min-w-0 flex-1">
+        <div className="flex items-center gap-2">
+          <p className={entry.hidden ? "truncate text-sm text-muted-foreground" : "truncate text-sm text-foreground"}>{entry.label}</p>
+          {entry.hidden && <Chip label="hidden" variant="kv" tone="neutral" />}
+        </div>
+        <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
+        type="button"
+        onClick={onToggle}
+        title={entry.hidden ? "Show in picker" : "Hide from picker"}
+        aria-label={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`;
+}