@schlessera/brain-ui-react 0.35.0 → 0.36.0

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

@@ -0,0 +1,201 @@
+import { Button, Chip, Placeholder } from "@schlessera/brain-ui-kit";
+import { Check, Fingerprint, Pencil, Trash2, X } from "lucide-react";
+import type { PasskeySummary } from "@schlessera/brain-ui-sdk/protocol";
+import { useState } from "react";
+
+/**
+ * The Security tab's surface, rendered from props (S6). `PasskeyTab` is the
+ * container: it owns the list request, the registration ceremony, the
+ * per-root abort signal and the confirm dialog; this owns what is on screen.
+ *
+ * `status` is the three-way answer the list request gives: `loading` while
+ * it is in flight, `ready` when the server is in password mode, and
+ * `unavailable` when it is not (a 400 from the list route, or anything else
+ * that degrades the same way). The Add button appears only when passkeys are
+ * possible here — server mode AND a browser that can do WebAuthn.
+ *
+ * The Add and Sign-out buttons are the kit's. The per-row rename and remove
+ * controls stay native icon buttons: the kit has no icon-only button and a
+ * `ListRow`'s trailing action is decorative. Rename state (which row is being
+ * edited, the draft) is the row's own and never leaves the view.
+ */
+export type PasskeyStatus = "loading" | "ready" | "unavailable";
+
+export interface PasskeyListProps {
+  credentials: PasskeySummary[];
+  status: PasskeyStatus;
+  /** A registration ceremony is in flight. */
+  busy: boolean;
+  error: string | null;
+  /** The browser can do WebAuthn at all. */
+  supported: boolean;
+  /** The hostname this page is served from; a credential registered elsewhere is badged. */
+  hostname: string;
+  onAdd: () => void;
+  onRename: (id: string, label: string) => void;
+  onDelete: (id: string) => void;
+  onSignOut: () => void;
+}
+
+export function PasskeyList(p: PasskeyListProps) {
+  const canAdd = p.status === "ready" && p.supported;
+  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">
+          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>
+
+        {p.status === "loading" ? (
+          <div className="mt-4">
+            <Placeholder variant="loading" lines={2} />
+          </div>
+        ) : (
+          <ul className="mt-4 flex flex-col gap-2">
+            {p.credentials.map((credential) => (
+              <PasskeyRow
+                key={credential.id}
+                credential={credential}
+                foreign={credential.rpId !== p.hostname}
+                onDelete={() => p.onDelete(credential.id)}
+                onRename={(label) => p.onRename(credential.id, label)}
+              />
+            ))}
+            {p.credentials.length === 0 && p.status === "ready" && (
+              <li>
+                <Placeholder variant="empty" message="No passkeys yet." icon="passkey" />
+              </li>
+            )}
+          </ul>
+        )}
+
+        {p.error && (
+          <p role="alert" className="mt-3 text-xs text-destructive">
+            {p.error}
+          </p>
+        )}
+
+        {canAdd ? (
+          <div className="mt-4">
+            <Button
+              label={p.busy ? "Adding a passkey…" : "Add a passkey"}
+              icon="add"
+              tone="primary"
+              size="md"
+              center
+              disabled={p.busy}
+              onClick={p.onAdd}
+            />
+          </div>
+        ) : (
+          <p className="mt-4 text-xs text-muted-foreground">
+            {p.status === "unavailable"
+              ? "Passkeys need password auth mode on the server."
+              : "This browser does not support passkeys."}
+          </p>
+        )}
+      </div>
+
+      {/* Sign out everywhere */}
+      <div className="border-t border-border p-4">
+        <Button label="Sign out everywhere" icon="hand" tone="danger" size="md" center onClick={p.onSignOut} />
+      </div>
+    </div>
+  );
+}
+
+function PasskeyRow({
+  credential,
+  foreign,
+  onDelete,
+  onRename,
+}: {
+  credential: PasskeySummary;
+  foreign: boolean;
+  onDelete: () => void;
+  onRename: (label: string) => void;
+}) {
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(credential.label);
+
+  const displayName =
+    credential.label ||
+    `Passkey · ${new Date(credential.createdAt).toLocaleDateString()}`;
+
+  function commit() {
+    setEditing(false);
+    const label = draft.trim();
+    if (label !== credential.label) onRename(label);
+  }
+
+  return (
+    <li className="rounded-lg border border-border-subtle bg-surface p-3">
+      <div className="flex items-center gap-2">
+        <Fingerprint className="h-4 w-4 shrink-0 text-primary" />
+        {editing ? (
+          <span className="flex flex-1 items-center gap-1">
+            <input
+              autoFocus
+              value={draft}
+              aria-label="Passkey name"
+              onChange={(e) => setDraft(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") commit();
+                if (e.key === "Escape") setEditing(false);
+              }}
+              className="w-full rounded border border-border-subtle bg-background px-2 py-0.5 text-sm text-foreground outline-none focus:border-primary"
+            />
+            <button type="button" onClick={commit} title="Save" className="p-1 text-muted-foreground hover:text-foreground">
+              <Check className="h-3.5 w-3.5" />
+            </button>
+            <button type="button" onClick={() => setEditing(false)} title="Cancel" className="p-1 text-muted-foreground hover:text-foreground">
+              <X className="h-3.5 w-3.5" />
+            </button>
+          </span>
+        ) : (
+          <span className="flex-1 truncate text-sm text-foreground">{displayName}</span>
+        )}
+        {!editing && (
+          <>
+            <button
+              type="button"
+              onClick={() => {
+                setDraft(credential.label);
+                setEditing(true);
+              }}
+              title="Rename"
+              className="p-1 text-muted-foreground transition-colors hover:text-foreground"
+            >
+              <Pencil className="h-3.5 w-3.5" />
+            </button>
+            <button
+              type="button"
+              onClick={onDelete}
+              title="Remove"
+              className="p-1 text-muted-foreground transition-colors hover:text-destructive"
+            >
+              <Trash2 className="h-3.5 w-3.5" />
+            </button>
+          </>
+        )}
+      </div>
+      <div className="mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-1 pl-6 text-[11px] text-muted-foreground">
+        {credential.backedUp && <Chip label="synced" variant="kv" tone="teal" />}
+        {foreign && (
+          <span title={`Registered on ${credential.rpId}; only usable there.`} className="flex">
+            <Chip label={credential.rpId} variant="mono" tone="neutral" />
+          </span>
+        )}
+        <span>
+          {credential.lastUsedAt
+            ? `Last used ${new Date(credential.lastUsedAt).toLocaleDateString()}`
+            : `Added ${new Date(credential.createdAt).toLocaleDateString()}`}
+        </span>
+      </div>
+    </li>
+  );
+}

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

@@ -1,19 +1,8 @@
-import { useEffect, useState } from "react";
-import {
-  Check,
-  Cloud,
-  Fingerprint,
-  Loader2,
-  LogOut,
-  Pencil,
-  Plus,
-  Trash2,
-  X,
-} from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import type { PasskeySummary } from "@schlessera/brain-ui-sdk/protocol";
-import { api } from "../../lib/api-client.js";
+import { useBrainUiRoot } from "../../root-context.js";
 import { isUserCancel, registerPasskey, supportsPasskeys } from "../../lib/passkeys.js";
-import { cn } from "../../lib/utils.js";
+import { PasskeyList } from "./passkey-list.js";
 
 /**
  * Passkey management + sign out — the Security tab of the settings panel.
@@ -23,8 +12,15 @@ import { cn } from "../../lib/utils.js";
  *
  * `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.
+ *
+ * This is the container (S6): the request, the ceremony, the per-root abort
+ * signal and the confirm dialog live here; `PasskeyList` draws from props.
  */
 export function PasskeyTab({ active }: { active: boolean }) {
+  const root = useBrainUiRoot();
+  const api = root.api;
+  const lifetime = useRef(new AbortController());
+  const listRequest = useRef(0);
   const [credentials, setCredentials] = useState<PasskeySummary[]>([]);
   const [loading, setLoading] = useState(false);
   const [busy, setBusy] = useState(false);
@@ -33,244 +29,104 @@ export function PasskeyTab({ active }: { active: boolean }) {
 
   const webAuthnSupported = supportsPasskeys();
 
-  async function refresh() {
+  const refresh = useCallback(async () => {
+    const signal = lifetime.current.signal;
+    const request = ++listRequest.current;
+    const current = () => !signal.aborted && request === listRequest.current;
     setLoading(true);
     try {
       const data = await api.passkeyList();
+      if (!current()) return;
       setCredentials(data.credentials);
       setPasskeyMode(true);
     } catch {
+      if (!current()) return;
       // 400 = server not in password mode; anything else degrades the same way.
       setPasskeyMode(false);
       setCredentials([]);
     } finally {
-      setLoading(false);
+      if (current()) setLoading(false);
     }
-  }
+  }, [api]);
 
   useEffect(() => {
-    if (active) {
-      setError(null);
-      void refresh();
-    }
-  }, [active]);
+    const controller = new AbortController();
+    lifetime.current = controller;
+    setCredentials([]);
+    setLoading(false);
+    setBusy(false);
+    setError(null);
+    setPasskeyMode(true);
+    if (active) void refresh();
+    return () => controller.abort();
+  }, [active, root, refresh]);
 
   async function onAdd() {
     if (busy) return;
+    const signal = lifetime.current.signal;
     setBusy(true);
     setError(null);
     try {
-      await registerPasskey();
+      await registerPasskey(api, undefined, signal);
+      if (signal.aborted) return;
       await refresh();
     } catch (err) {
-      if (!isUserCancel(err)) {
+      if (!signal.aborted && !isUserCancel(err)) {
         setError(err instanceof Error ? err.message : "Registration failed");
       }
     } finally {
-      setBusy(false);
+      if (!signal.aborted) setBusy(false);
     }
   }
 
   async function onDelete(id: string) {
     if (!window.confirm("Remove this passkey? You can't undo this.")) return;
+    const signal = lifetime.current.signal;
     setError(null);
     try {
       await api.passkeyDelete(id);
+      if (signal.aborted) return;
       setCredentials((rows) => rows.filter((row) => row.id !== id));
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Delete failed");
+      if (!signal.aborted) setError(err instanceof Error ? err.message : "Delete failed");
     }
   }
 
   async function onRename(id: string, label: string) {
+    const signal = lifetime.current.signal;
     setError(null);
     try {
       await api.passkeyRename(id, label);
+      if (signal.aborted) return;
       setCredentials((rows) =>
         rows.map((row) => (row.id === id ? { ...row, label } : row))
       );
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Rename failed");
+      if (!signal.aborted) setError(err instanceof Error ? err.message : "Rename failed");
     }
   }
 
   async function onSignOut() {
+    const signal = lifetime.current.signal;
     try {
       await api.logout();
     } finally {
-      window.location.reload();
+      if (!signal.aborted) window.location.reload();
     }
   }
 
   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">
-          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>
-        )}
-
-        {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>
-
-      {/* Sign out everywhere */}
-      <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 everywhere
-        </button>
-      </div>
-    </div>
-  );
-}
-
-function PasskeyRow({
-  credential,
-  onDelete,
-  onRename,
-}: {
-  credential: PasskeySummary;
-  onDelete: () => void;
-  onRename: (label: string) => void;
-}) {
-  const [editing, setEditing] = useState(false);
-  const [draft, setDraft] = useState(credential.label);
-  const foreignRp =
-    typeof window !== "undefined" && credential.rpId !== window.location.hostname;
-
-  const displayName =
-    credential.label ||
-    `Passkey · ${new Date(credential.createdAt).toLocaleDateString()}`;
-
-  function commit() {
-    setEditing(false);
-    const label = draft.trim();
-    if (label !== credential.label) onRename(label);
-  }
-
-  return (
-    <li className="rounded-lg border border-border-subtle bg-surface p-3">
-      <div className="flex items-center gap-2">
-        <Fingerprint className="h-4 w-4 shrink-0 text-primary" />
-        {editing ? (
-          <span className="flex flex-1 items-center gap-1">
-            <input
-              autoFocus
-              value={draft}
-              onChange={(e) => setDraft(e.target.value)}
-              onKeyDown={(e) => {
-                if (e.key === "Enter") commit();
-                if (e.key === "Escape") setEditing(false);
-              }}
-              className="w-full rounded border border-border-subtle bg-background px-2 py-0.5 text-sm text-foreground outline-none focus:border-primary"
-            />
-            <button onClick={commit} title="Save" className="p-1 text-muted-foreground hover:text-foreground">
-              <Check className="h-3.5 w-3.5" />
-            </button>
-            <button onClick={() => setEditing(false)} title="Cancel" className="p-1 text-muted-foreground hover:text-foreground">
-              <X className="h-3.5 w-3.5" />
-            </button>
-          </span>
-        ) : (
-          <span className="flex-1 truncate text-sm text-foreground">{displayName}</span>
-        )}
-        {!editing && (
-          <>
-            <button
-              onClick={() => {
-                setDraft(credential.label);
-                setEditing(true);
-              }}
-              title="Rename"
-              className="p-1 text-muted-foreground transition-colors hover:text-foreground"
-            >
-              <Pencil className="h-3.5 w-3.5" />
-            </button>
-            <button
-              onClick={onDelete}
-              title="Remove"
-              className="p-1 text-muted-foreground transition-colors hover:text-destructive"
-            >
-              <Trash2 className="h-3.5 w-3.5" />
-            </button>
-          </>
-        )}
-      </div>
-      <div className="mt-1.5 flex flex-wrap items-center gap-x-3 gap-y-1 pl-6 text-[11px] text-muted-foreground">
-        {credential.backedUp && (
-          <span className="flex items-center gap-1">
-            <Cloud className="h-3 w-3" /> Synced
-          </span>
-        )}
-        {foreignRp && (
-          <span
-            className={cn(
-              "rounded bg-surface-raised px-1.5 py-0.5 font-medium text-foreground/70"
-            )}
-            title={`Registered on ${credential.rpId}; only usable there.`}
-          >
-            {credential.rpId}
-          </span>
-        )}
-        <span>
-          {credential.lastUsedAt
-            ? `Last used ${new Date(credential.lastUsedAt).toLocaleDateString()}`
-            : `Added ${new Date(credential.createdAt).toLocaleDateString()}`}
-        </span>
-      </div>
-    </li>
+    <PasskeyList
+      credentials={credentials}
+      status={loading ? "loading" : passkeyMode ? "ready" : "unavailable"}
+      busy={busy}
+      error={error}
+      supported={webAuthnSupported}
+      hostname={typeof window !== "undefined" ? window.location.hostname : ""}
+      onAdd={() => void onAdd()}
+      onRename={(id, label) => void onRename(id, label)}
+      onDelete={(id) => void onDelete(id)}
+      onSignOut={() => void onSignOut()}
+    />
   );
 }

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

@@ -0,0 +1,128 @@
+import { Button, Callout, ListRow, StatusDot } from "@schlessera/brain-ui-kit";
+import type { PiAuthProviderStatus, PiLoginFlow } from "../../lib/api-client.js";
+
+/**
+ * Provider accounts, rendered from props (S7, the `settings` directory).
+ * `PiAccountsSection` is the container: the providers request, the login
+ * flow and its polling, the cancel and the disconnect live there; this
+ * draws the rows and the device-code card.
+ *
+ * A provider is a kit card `ListRow` with its state as the trailing value
+ * (teal "connected"); Connect and Disconnect are kit `Button`s beside it.
+ * The pending flow is an amber `Callout` carrying the code the user types
+ * at the provider's page — the verification link stays an anchor, because
+ * a link is what it is — and the settled flow is a teal or red `Callout`
+ * with a dismiss.
+ */
+export interface AccountsListProps {
+  providers: PiAuthProviderStatus[];
+  /** The provider whose connect or disconnect is in flight. */
+  busy: string | null;
+  flow: PiLoginFlow | null;
+  error: string | null;
+  onConnect: (providerId: string) => void;
+  onDisconnect: (providerId: string) => void;
+  onCancelFlow: () => void;
+  onDismissFlow: () => void;
+}
+
+export function AccountsList(p: AccountsListProps) {
+  const pending = p.flow?.status === "pending";
+  return (
+    <div className="mt-6">
+      <h3 className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+        Accounts
+      </h3>
+      <p className="mt-1 text-xs text-muted-foreground">
+        Model providers that sign in with an account instead of an API key.
+      </p>
+      <ul className="mt-4 flex flex-col gap-2">
+        {p.providers.map((provider) => (
+          <li key={provider.providerId} className="flex flex-col gap-2">
+            <div className="flex items-center gap-2">
+              <div className="min-w-0 flex-1">
+                <ListRow
+                  variant="card"
+                  icon="model"
+                  iconTone={provider.configured ? "teal" : "neutral"}
+                  title={provider.name}
+                  subtitle={provider.configured ? `Connected${provider.source ? ` · ${provider.source}` : ""}` : "Not connected"}
+                  value={provider.configured ? "connected" : undefined}
+                  valueTone="teal"
+                />
+              </div>
+              {provider.oauth && !provider.configured && (
+                <Button
+                  label={p.busy === provider.providerId ? "Connecting…" : "Connect"}
+                  icon="passkey"
+                  tone="ghost"
+                  size="sm"
+                  block={false}
+                  disabled={p.busy !== null || pending}
+                  onClick={() => p.onConnect(provider.providerId)}
+                />
+              )}
+              {provider.configured && provider.source === "stored" && (
+                <span title="Disconnect" className="flex">
+                  <Button label="Disconnect" icon="hand" tone="quiet" size="sm" block={false} disabled={p.busy !== null} onClick={() => p.onDisconnect(provider.providerId)} />
+                </span>
+              )}
+            </div>
+            {p.flow && p.flow.providerId === provider.providerId && (
+              <LoginFlowCard flow={p.flow} onCancel={p.onCancelFlow} onDismiss={p.onDismissFlow} />
+            )}
+          </li>
+        ))}
+      </ul>
+      {p.error && (
+        <div role="alert" className="mt-3">
+          <Callout tone="red" variant="banner" icon="failed" mono text={p.error} />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function LoginFlowCard({ flow, onCancel, onDismiss }: { flow: PiLoginFlow; onCancel: () => void; onDismiss: () => void }) {
+  if (flow.status === "pending") {
+    return (
+      <Callout tone="amber" variant="boxed" icon="passkey">
+        <div className="flex flex-col gap-2">
+          <p className="text-xs text-muted-foreground">
+            Enter this code at the provider's device page — on this or any other device:
+          </p>
+          <p className="select-all text-center font-[family-name:var(--font-mono)] text-xl font-semibold tracking-widest text-foreground">
+            {flow.userCode ?? "…"}
+          </p>
+          <div className="flex flex-wrap items-center justify-center gap-2">
+            {flow.verificationUri && (
+              <a
+                href={flow.verificationUri}
+                target="_blank"
+                rel="noreferrer"
+                className="flex items-center gap-1.5 rounded-[9px] bg-[var(--bk-amber-fill)] px-3 py-1.5 text-[11.5px] font-semibold text-[var(--bk-on-fill)] transition-[filter] hover:brightness-110"
+              >
+                Open verification page ↗
+              </a>
+            )}
+            <Button label="Cancel" icon="cancel" tone="quiet" size="sm" block={false} onClick={onCancel} />
+          </div>
+          <p className="flex items-center justify-center gap-1.5 text-center text-[11px] text-muted-foreground" aria-live="polite">
+            <StatusDot tone="amber" pulse size={6} />
+            Waiting for approval…
+          </p>
+        </div>
+      </Callout>
+    );
+  }
+  const ok = flow.status === "success";
+  const message = ok ? "Connected." : flow.status === "cancelled" ? "Login cancelled." : flow.error ?? "Login failed.";
+  return (
+    <div className="flex items-center gap-2">
+      <div className="min-w-0 flex-1">
+        <Callout tone={ok ? "teal" : "red"} variant="banner" icon={ok ? "confirm" : "failed"} mono text={message} />
+      </div>
+      <Button label="Dismiss" tone="quiet" size="sm" block={false} onClick={onDismiss} />
+    </div>
+  );
+}