@schlessera/brain-ui-react 0.35.0 → 0.36.0

package/dist/components/settings/passkey-list.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, Chip, Placeholder } from "@schlessera/brain-ui-kit";
+import { Check, Fingerprint, Pencil, Trash2, X } from "lucide-react";
+import { useState } from "react";
+export function PasskeyList(p) {
+    const canAdd = p.status === "ready" && p.supported;
+    return (_jsxs("div", { className: "flex h-full flex-col", children: [_jsxs("div", { className: "flex-1 overflow-y-auto p-4", children: [_jsx("h3", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: "Passkeys" }), _jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: "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.status === "loading" ? (_jsx("div", { className: "mt-4", children: _jsx(Placeholder, { variant: "loading", lines: 2 }) })) : (_jsxs("ul", { className: "mt-4 flex flex-col gap-2", children: [p.credentials.map((credential) => (_jsx(PasskeyRow, { credential: credential, foreign: credential.rpId !== p.hostname, onDelete: () => p.onDelete(credential.id), onRename: (label) => p.onRename(credential.id, label) }, credential.id))), p.credentials.length === 0 && p.status === "ready" && (_jsx("li", { children: _jsx(Placeholder, { variant: "empty", message: "No passkeys yet.", icon: "passkey" }) }))] })), p.error && (_jsx("p", { role: "alert", className: "mt-3 text-xs text-destructive", children: p.error })), canAdd ? (_jsx("div", { className: "mt-4", children: _jsx(Button, { label: p.busy ? "Adding a passkey…" : "Add a passkey", icon: "add", tone: "primary", size: "md", center: true, disabled: p.busy, onClick: p.onAdd }) })) : (_jsx("p", { className: "mt-4 text-xs text-muted-foreground", children: p.status === "unavailable"
+                            ? "Passkeys need password auth mode on the server."
+                            : "This browser does not support passkeys." }))] }), _jsx("div", { className: "border-t border-border p-4", children: _jsx(Button, { label: "Sign out everywhere", icon: "hand", tone: "danger", size: "md", center: true, onClick: p.onSignOut }) })] }));
+}
+function PasskeyRow({ credential, foreign, onDelete, onRename, }) {
+    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 (_jsxs("li", { className: "rounded-lg border border-border-subtle bg-surface p-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Fingerprint, { className: "h-4 w-4 shrink-0 text-primary" }), editing ? (_jsxs("span", { className: "flex flex-1 items-center gap-1", children: [_jsx("input", { autoFocus: true, 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" }), _jsx("button", { type: "button", onClick: commit, title: "Save", className: "p-1 text-muted-foreground hover:text-foreground", children: _jsx(Check, { className: "h-3.5 w-3.5" }) }), _jsx("button", { type: "button", onClick: () => setEditing(false), title: "Cancel", className: "p-1 text-muted-foreground hover:text-foreground", children: _jsx(X, { className: "h-3.5 w-3.5" }) })] })) : (_jsx("span", { className: "flex-1 truncate text-sm text-foreground", children: displayName })), !editing && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: () => {
+                                    setDraft(credential.label);
+                                    setEditing(true);
+                                }, title: "Rename", className: "p-1 text-muted-foreground transition-colors hover:text-foreground", children: _jsx(Pencil, { className: "h-3.5 w-3.5" }) }), _jsx("button", { type: "button", onClick: onDelete, title: "Remove", className: "p-1 text-muted-foreground transition-colors hover:text-destructive", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) })] }))] }), _jsxs("div", { className: "mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-1 pl-6 text-[11px] text-muted-foreground", children: [credential.backedUp && _jsx(Chip, { label: "synced", variant: "kv", tone: "teal" }), foreign && (_jsx("span", { title: `Registered on ${credential.rpId}; only usable there.`, className: "flex", children: _jsx(Chip, { label: credential.rpId, variant: "mono", tone: "neutral" }) })), _jsx("span", { children: credential.lastUsedAt
+                            ? `Last used ${new Date(credential.lastUsedAt).toLocaleDateString()}`
+                            : `Added ${new Date(credential.createdAt).toLocaleDateString()}` })] })] }));
+}
+//# sourceMappingURL=passkey-list.js.map

package/dist/components/settings/passkey-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"passkey-list.js","sourceRoot":"","sources":["../../../src/components/settings/passkey-list.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACrE,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,cAAc,CAAC;AAErE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAoCjC,MAAM,UAAU,WAAW,CAAC,CAAmB;IAC7C,MAAM,MAAM,GAAG,CAAC,CAAC,MAAM,KAAK,OAAO,IAAI,CAAC,CAAC,SAAS,CAAC;IACnD,OAAO,CACL,eAAK,SAAS,EAAC,sBAAsB,aACnC,eAAK,SAAS,EAAC,4BAA4B,aACzC,aAAI,SAAS,EAAC,mEAAmE,yBAE5E,EACL,YAAG,SAAS,EAAC,oCAAoC,iJAG7C,EAEH,CAAC,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,CACxB,cAAK,SAAS,EAAC,MAAM,YACnB,KAAC,WAAW,IAAC,OAAO,EAAC,SAAS,EAAC,KAAK,EAAE,CAAC,GAAI,GACvC,CACP,CAAC,CAAC,CAAC,CACF,cAAI,SAAS,EAAC,0BAA0B,aACrC,CAAC,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,CACjC,KAAC,UAAU,IAET,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,UAAU,CAAC,IAAI,KAAK,CAAC,CAAC,QAAQ,EACvC,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC,EACzC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE,EAAE,KAAK,CAAC,IAJhD,UAAU,CAAC,EAAE,CAKlB,CACH,CAAC,EACD,CAAC,CAAC,WAAW,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,CAAC,MAAM,KAAK,OAAO,IAAI,CACrD,uBACE,KAAC,WAAW,IAAC,OAAO,EAAC,OAAO,EAAC,OAAO,EAAC,kBAAkB,EAAC,IAAI,EAAC,SAAS,GAAG,GACtE,CACN,IACE,CACN,EAEA,CAAC,CAAC,KAAK,IAAI,CACV,YAAG,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,+BAA+B,YACtD,CAAC,CAAC,KAAK,GACN,CACL,EAEA,MAAM,CAAC,CAAC,CAAC,CACR,cAAK,SAAS,EAAC,MAAM,YACnB,KAAC,MAAM,IACL,KAAK,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,eAAe,EACrD,IAAI,EAAC,KAAK,EACV,IAAI,EAAC,SAAS,EACd,IAAI,EAAC,IAAI,EACT,MAAM,QACN,QAAQ,EAAE,CAAC,CAAC,IAAI,EAChB,OAAO,EAAE,CAAC,CAAC,KAAK,GAChB,GACE,CACP,CAAC,CAAC,CAAC,CACF,YAAG,SAAS,EAAC,oCAAoC,YAC9C,CAAC,CAAC,MAAM,KAAK,aAAa;4BACzB,CAAC,CAAC,iDAAiD;4BACnD,CAAC,CAAC,yCAAyC,GAC3C,CACL,IACG,EAGN,cAAK,SAAS,EAAC,4BAA4B,YACzC,KAAC,MAAM,IAAC,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,IAAI,EAAC,MAAM,QAAC,OAAO,EAAE,CAAC,CAAC,SAAS,GAAI,GACnG,IACF,CACP,CAAC;AACJ,CAAC;AAED,SAAS,UAAU,CAAC,EAClB,UAAU,EACV,OAAO,EACP,QAAQ,EACR,QAAQ,GAMT;IACC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;IAErD,MAAM,WAAW,GACf,UAAU,CAAC,KAAK;QAChB,aAAa,IAAI,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,kBAAkB,EAAE,EAAE,CAAC;IAErE,SAAS,MAAM;QACb,UAAU,CAAC,KAAK,CAAC,CAAC;QAClB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC;QAC3B,IAAI,KAAK,KAAK,UAAU,CAAC,KAAK;YAAE,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,CAAC;IAED,OAAO,CACL,cAAI,SAAS,EAAC,uDAAuD,aACnE,eAAK,SAAS,EAAC,yBAAyB,aACtC,KAAC,WAAW,IAAC,SAAS,EAAC,+BAA+B,GAAG,EACxD,OAAO,CAAC,CAAC,CAAC,CACT,gBAAM,SAAS,EAAC,gCAAgC,aAC9C,gBACE,SAAS,QACT,KAAK,EAAE,KAAK,gBACD,cAAc,EACzB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EACzC,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;oCACf,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO;wCAAE,MAAM,EAAE,CAAC;oCAChC,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ;wCAAE,UAAU,CAAC,KAAK,CAAC,CAAC;gCAC5C,CAAC,EACD,SAAS,EAAC,gIAAgI,GAC1I,EACF,iBAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAC,MAAM,EAAC,SAAS,EAAC,iDAAiD,YAC7G,KAAC,KAAK,IAAC,SAAS,EAAC,aAAa,GAAG,GAC1B,EACT,iBAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,KAAK,EAAC,QAAQ,EAAC,SAAS,EAAC,iDAAiD,YAChI,KAAC,CAAC,IAAC,SAAS,EAAC,aAAa,GAAG,GACtB,IACJ,CACR,CAAC,CAAC,CAAC,CACF,eAAM,SAAS,EAAC,yCAAyC,YAAE,WAAW,GAAQ,CAC/E,EACA,CAAC,OAAO,IAAI,CACX,8BACE,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE;oCACZ,QAAQ,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;oCAC3B,UAAU,CAAC,IAAI,CAAC,CAAC;gCACnB,CAAC,EACD,KAAK,EAAC,QAAQ,EACd,SAAS,EAAC,mEAAmE,YAE7E,KAAC,MAAM,IAAC,SAAS,EAAC,aAAa,GAAG,GAC3B,EACT,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,QAAQ,EACjB,KAAK,EAAC,QAAQ,EACd,SAAS,EAAC,oEAAoE,YAE9E,KAAC,MAAM,IAAC,SAAS,EAAC,aAAa,GAAG,GAC3B,IACR,CACJ,IACG,EACN,eAAK,SAAS,EAAC,2FAA2F,aACvG,UAAU,CAAC,QAAQ,IAAI,KAAC,IAAI,IAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAC,IAAI,EAAC,MAAM,GAAG,EACvE,OAAO,IAAI,CACV,eAAM,KAAK,EAAE,iBAAiB,UAAU,CAAC,IAAI,sBAAsB,EAAE,SAAS,EAAC,MAAM,YACnF,KAAC,IAAI,IAAC,KAAK,EAAE,UAAU,CAAC,IAAI,EAAE,OAAO,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,GAAG,GACzD,CACR,EACD,yBACG,UAAU,CAAC,UAAU;4BACpB,CAAC,CAAC,aAAa,IAAI,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC,kBAAkB,EAAE,EAAE;4BACrE,CAAC,CAAC,SAAS,IAAI,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,kBAAkB,EAAE,EAAE,GAC7D,IACH,IACH,CACN,CAAC;AACJ,CAAC"}

package/dist/components/settings/passkey-tab.d.ts

@@ -6,6 +6,9 @@
  *
  * `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 declare function PasskeyTab({ active }: {
     active: boolean;

package/dist/components/settings/passkey-tab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"passkey-tab.d.ts","sourceRoot":"","sources":["../../../src/components/settings/passkey-tab.tsx"],"names":[],"mappings":"AAiBA;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,OAAO,CAAA;CAAE,+BAuJzD"}
+{"version":3,"file":"passkey-tab.d.ts","sourceRoot":"","sources":["../../../src/components/settings/passkey-tab.tsx"],"names":[],"mappings":"AAMA;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,OAAO,CAAA;CAAE,+BAiHzD"}

package/dist/components/settings/passkey-tab.js

@@ -1,9 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
-import { Check, Cloud, Fingerprint, Loader2, LogOut, Pencil, Plus, Trash2, X, } from "lucide-react";
-import { api } from "../../lib/api-client.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+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.
  * Registration requires the current session (routes are behind the auth guard);
@@ -12,110 +11,119 @@ 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 }) {
+    const root = useBrainUiRoot();
+    const api = root.api;
+    const lifetime = useRef(new AbortController());
+    const listRequest = useRef(0);
     const [credentials, setCredentials] = useState([]);
     const [loading, setLoading] = useState(false);
     const [busy, setBusy] = useState(false);
     const [error, setError] = useState(null);
     const [passkeyMode, setPasskeyMode] = useState(true);
     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);
+        const controller = new AbortController();
+        lifetime.current = controller;
+        setCredentials([]);
+        setLoading(false);
+        setBusy(false);
+        setError(null);
+        setPasskeyMode(true);
+        if (active)
             void refresh();
-        }
-    }, [active]);
+        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) {
         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, label) {
+        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 (_jsxs("div", { className: "flex h-full flex-col", children: [_jsxs("div", { className: "flex-1 overflow-y-auto p-4", children: [_jsx("h3", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: "Passkeys" }), _jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: "Sign in with Face ID, fingerprint, or a security key instead of the password. Passkeys only work on the site they were added on." }), loading ? (_jsx("div", { className: "mt-6 flex justify-center", children: _jsx(Loader2, { className: "h-5 w-5 animate-spin text-muted-foreground" }) })) : (_jsxs("ul", { className: "mt-4 flex flex-col gap-2", children: [credentials.map((credential) => (_jsx(PasskeyRow, { credential: credential, onDelete: () => onDelete(credential.id), onRename: (label) => onRename(credential.id, label) }, credential.id))), credentials.length === 0 && passkeyMode && (_jsx("li", { className: "rounded-lg border border-dashed border-border-subtle p-4 text-center text-xs text-muted-foreground", children: "No passkeys yet." }))] })), error && (_jsx("p", { role: "alert", className: "mt-3 text-xs text-destructive", children: error })), passkeyMode && webAuthnSupported ? (_jsxs("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", children: [busy ? (_jsx(Loader2, { className: "h-4 w-4 animate-spin" })) : (_jsx(Plus, { className: "h-4 w-4" })), "Add a passkey"] })) : (_jsx("p", { className: "mt-4 text-xs text-muted-foreground", children: passkeyMode
-                            ? "This browser does not support passkeys."
-                            : "Passkeys need password auth mode on the server." }))] }), _jsx("div", { className: "border-t border-border p-4", children: _jsxs("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", children: [_jsx(LogOut, { className: "h-4 w-4" }), "Sign out everywhere"] }) })] }));
-}
-function PasskeyRow({ credential, onDelete, onRename, }) {
-    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 (_jsxs("li", { className: "rounded-lg border border-border-subtle bg-surface p-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Fingerprint, { className: "h-4 w-4 shrink-0 text-primary" }), editing ? (_jsxs("span", { className: "flex flex-1 items-center gap-1", children: [_jsx("input", { autoFocus: true, 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" }), _jsx("button", { onClick: commit, title: "Save", className: "p-1 text-muted-foreground hover:text-foreground", children: _jsx(Check, { className: "h-3.5 w-3.5" }) }), _jsx("button", { onClick: () => setEditing(false), title: "Cancel", className: "p-1 text-muted-foreground hover:text-foreground", children: _jsx(X, { className: "h-3.5 w-3.5" }) })] })) : (_jsx("span", { className: "flex-1 truncate text-sm text-foreground", children: displayName })), !editing && (_jsxs(_Fragment, { children: [_jsx("button", { onClick: () => {
-                                    setDraft(credential.label);
-                                    setEditing(true);
-                                }, title: "Rename", className: "p-1 text-muted-foreground transition-colors hover:text-foreground", children: _jsx(Pencil, { className: "h-3.5 w-3.5" }) }), _jsx("button", { onClick: onDelete, title: "Remove", className: "p-1 text-muted-foreground transition-colors hover:text-destructive", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) })] }))] }), _jsxs("div", { className: "mt-1.5 flex flex-wrap items-center gap-x-3 gap-y-1 pl-6 text-[11px] text-muted-foreground", children: [credential.backedUp && (_jsxs("span", { className: "flex items-center gap-1", children: [_jsx(Cloud, { className: "h-3 w-3" }), " Synced"] })), foreignRp && (_jsx("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.`, children: credential.rpId })), _jsx("span", { children: credential.lastUsedAt
-                            ? `Last used ${new Date(credential.lastUsedAt).toLocaleDateString()}`
-                            : `Added ${new Date(credential.createdAt).toLocaleDateString()}` })] })] }));
+    return (_jsx(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() }));
 }
 //# sourceMappingURL=passkey-tab.js.map

package/dist/components/settings/passkey-tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"passkey-tab.js","sourceRoot":"","sources":["../../../src/components/settings/passkey-tab.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"passkey-tab.js","sourceRoot":"","sources":["../../../src/components/settings/passkey-tab.tsx"],"names":[],"mappings":"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"}

package/dist/components/settings/pi-accounts-list.d.ts

@@ -0,0 +1,27 @@
+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 declare function AccountsList(p: AccountsListProps): import("react").JSX.Element;
+//# sourceMappingURL=pi-accounts-list.d.ts.map

package/dist/components/settings/pi-accounts-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pi-accounts-list.d.ts","sourceRoot":"","sources":["../../../src/components/settings/pi-accounts-list.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEjF;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,oBAAoB,EAAE,CAAC;IAClC,6DAA6D;IAC7D,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,IAAI,EAAE,WAAW,GAAG,IAAI,CAAC;IACzB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,SAAS,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,wBAAgB,YAAY,CAAC,CAAC,EAAE,iBAAiB,+BAuDhD"}

package/dist/components/settings/pi-accounts-list.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Callout, ListRow, StatusDot } from "@schlessera/brain-ui-kit";
+export function AccountsList(p) {
+    const pending = p.flow?.status === "pending";
+    return (_jsxs("div", { className: "mt-6", children: [_jsx("h3", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: "Accounts" }), _jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: "Model providers that sign in with an account instead of an API key." }), _jsx("ul", { className: "mt-4 flex flex-col gap-2", children: p.providers.map((provider) => (_jsxs("li", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "min-w-0 flex-1", children: _jsx(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" }) }), provider.oauth && !provider.configured && (_jsx(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" && (_jsx("span", { title: "Disconnect", className: "flex", children: _jsx(Button, { label: "Disconnect", icon: "hand", tone: "quiet", size: "sm", block: false, disabled: p.busy !== null, onClick: () => p.onDisconnect(provider.providerId) }) }))] }), p.flow && p.flow.providerId === provider.providerId && (_jsx(LoginFlowCard, { flow: p.flow, onCancel: p.onCancelFlow, onDismiss: p.onDismissFlow }))] }, provider.providerId))) }), p.error && (_jsx("div", { role: "alert", className: "mt-3", children: _jsx(Callout, { tone: "red", variant: "banner", icon: "failed", mono: true, text: p.error }) }))] }));
+}
+function LoginFlowCard({ flow, onCancel, onDismiss }) {
+    if (flow.status === "pending") {
+        return (_jsx(Callout, { tone: "amber", variant: "boxed", icon: "passkey", children: _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("p", { className: "text-xs text-muted-foreground", children: "Enter this code at the provider's device page \u2014 on this or any other device:" }), _jsx("p", { className: "select-all text-center font-[family-name:var(--font-mono)] text-xl font-semibold tracking-widest text-foreground", children: flow.userCode ?? "…" }), _jsxs("div", { className: "flex flex-wrap items-center justify-center gap-2", children: [flow.verificationUri && (_jsx("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", children: "Open verification page \u2197" })), _jsx(Button, { label: "Cancel", icon: "cancel", tone: "quiet", size: "sm", block: false, onClick: onCancel })] }), _jsxs("p", { className: "flex items-center justify-center gap-1.5 text-center text-[11px] text-muted-foreground", "aria-live": "polite", children: [_jsx(StatusDot, { tone: "amber", pulse: true, size: 6 }), "Waiting for approval\u2026"] })] }) }));
+    }
+    const ok = flow.status === "success";
+    const message = ok ? "Connected." : flow.status === "cancelled" ? "Login cancelled." : flow.error ?? "Login failed.";
+    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "min-w-0 flex-1", children: _jsx(Callout, { tone: ok ? "teal" : "red", variant: "banner", icon: ok ? "confirm" : "failed", mono: true, text: message }) }), _jsx(Button, { label: "Dismiss", tone: "quiet", size: "sm", block: false, onClick: onDismiss })] }));
+}
+//# sourceMappingURL=pi-accounts-list.js.map

package/dist/components/settings/pi-accounts-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pi-accounts-list.js","sourceRoot":"","sources":["../../../src/components/settings/pi-accounts-list.tsx"],"names":[],"mappings":"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"}

package/dist/components/settings/pi-accounts.d.ts

@@ -6,6 +6,9 @@
  *
  * Renders nothing when the server reports no pi providers (pi not
  * configured), so the Models tab is unchanged for Claude-only deployments.
+ *
+ * This is the container (S7): the request, the flow and its polling, the
+ * cancel and the disconnect live here; `AccountsList` draws the rows.
  */
 export declare function PiAccountsSection({ active }: {
     active: boolean;

package/dist/components/settings/pi-accounts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pi-accounts.d.ts","sourceRoot":"","sources":["../../../src/components/settings/pi-accounts.tsx"],"names":[],"mappings":"AAMA;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,OAAO,CAAA;CAAE,sCA+KhE"}
+{"version":3,"file":"pi-accounts.d.ts","sourceRoot":"","sources":["../../../src/components/settings/pi-accounts.tsx"],"names":[],"mappings":"AAMA;;;;;;;;;;;GAWG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,OAAO,CAAA;CAAE,sCAkJhE"}

package/dist/components/settings/pi-accounts.js

@@ -1,9 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
-import { Check, ExternalLink, Loader2, LogOut, X } from "lucide-react";
-import { api } from "../../lib/api-client.js";
-import { useProviderStore } from "../../stores/provider-store.js";
-import { cn } from "../../lib/utils.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useBrainUiRoot } from "../../root-context.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { AccountsList } from "./pi-accounts-list.js";
 /**
  * Provider sign-in for the pi backend's OAuth vendors — most importantly
  * OpenAI (ChatGPT Plus/Pro), whose device-code flow needs no browser callback
@@ -12,12 +10,26 @@ import { cn } from "../../lib/utils.js";
  *
  * Renders nothing when the server reports no pi providers (pi not
  * configured), so the Models tab is unchanged for Claude-only deployments.
+ *
+ * This is the container (S7): the request, the flow and its polling, the
+ * cancel and the disconnect live here; `AccountsList` draws the rows.
  */
 export function PiAccountsSection({ active }) {
+    const root = useBrainUiRoot();
+    const api = root.api;
+    const lifetime = useRef(0);
+    const listRequest = useRef(0);
+    const flowRequest = useRef(0);
     const [providers, setProviders] = useState([]);
     const [error, setError] = useState(null);
     const [busy, setBusy] = useState(null);
-    const [flow, setFlow] = useState(null);
+    const [ownedFlow, setOwnedFlow] = useState(null);
+    // The first render after root replacement must not poll the previous flow
+    // through the new API, even before the reset effect has run.
+    const flow = ownedFlow?.root === root ? ownedFlow.flow : null;
+    const setFlow = useCallback((flow) => {
+        setOwnedFlow(flow ? { root, flow } : null);
+    }, [root]);
     const pollTimer = useRef(null);
     function stopPolling() {
         if (pollTimer.current) {
@@ -25,56 +37,63 @@ export function PiAccountsSection({ active }) {
             pollTimer.current = null;
         }
     }
-    async function reload() {
+    const reload = useCallback(async (quiet = false) => {
+        const generation = lifetime.current;
+        const request = ++listRequest.current;
+        const current = () => generation === lifetime.current && request === listRequest.current;
         try {
             const { providers } = await api.piAuthProviders();
-            setProviders(providers);
+            if (current())
+                setProviders(providers);
         }
         catch (err) {
-            setError(err instanceof Error ? err.message : "Could not load accounts");
+            if (!current())
+                return;
+            // Older servers without this endpoint simply hide the initial card.
+            if (quiet)
+                setProviders([]);
+            else
+                setError(err instanceof Error ? err.message : "Could not load accounts");
         }
-    }
+    }, [api]);
     useEffect(() => {
-        if (!active)
-            return;
-        let cancelled = false;
-        api
-            .piAuthProviders()
-            .then(({ providers }) => {
-            if (!cancelled)
-                setProviders(providers);
-        })
-            .catch(() => {
-            // A server without the endpoint (older release) just hides the card.
-            if (!cancelled)
-                setProviders([]);
-        });
-        return () => {
-            cancelled = true;
-        };
-    }, [active]);
+        lifetime.current++;
+        setProviders([]);
+        setError(null);
+        setBusy(null);
+        setFlow(null);
+        if (active)
+            void reload(true);
+        const invalidate = () => { lifetime.current++; };
+        return invalidate;
+    }, [active, root, reload, setFlow]);
     // Poll the pending flow until it settles. Chained timeouts rather than an
     // interval, so a slow response never stacks requests.
     useEffect(() => {
-        if (!flow || flow.status !== "pending")
+        if (!active || !flow || flow.status !== "pending")
             return;
+        const generation = lifetime.current;
+        const request = flowRequest.current;
         let disposed = false;
+        const current = () => !disposed && generation === lifetime.current && request === flowRequest.current;
         const delayMs = (flow.intervalSeconds ?? 5) * 1000;
         const tick = async () => {
             try {
+                if (!current())
+                    return;
                 const { flow: next } = await api.piAuthFlow(flow.id);
-                if (disposed)
+                if (!current())
                     return;
                 setFlow(next);
                 if (next.status === "success") {
                     void reload();
                     // A connected subscription account can change the picker's default
                     // ordering — refresh the composer's roster copy too.
-                    void useProviderStore.getState().loadProviders();
+                    void root.stores.provider.getState().loadProviders();
                 }
             }
             catch {
-                if (disposed)
+                if (!current())
                     return;
                 // Transient poll failure: keep trying until the flow expires.
                 pollTimer.current = setTimeout(tick, delayMs);
@@ -86,66 +105,65 @@ export function PiAccountsSection({ active }) {
             disposed = true;
             stopPolling();
         };
-    }, [flow]);
+    }, [active, flow, root, api, reload, setFlow]);
     async function connect(providerId) {
+        const generation = lifetime.current;
+        const request = ++flowRequest.current;
+        const current = () => generation === lifetime.current && request === flowRequest.current;
         setBusy(providerId);
         setError(null);
         try {
             const { flow } = await api.piAuthStart(providerId);
+            if (!current())
+                return;
             setFlow(flow);
             if (flow.status === "error")
                 setError(flow.error ?? "Login failed");
         }
         catch (err) {
-            setError(err instanceof Error ? err.message : "Could not start login");
+            if (current())
+                setError(err instanceof Error ? err.message : "Could not start login");
         }
         finally {
-            setBusy(null);
+            if (current())
+                setBusy(null);
         }
     }
     async function cancel() {
         if (!flow)
             return;
+        flowRequest.current++;
         stopPolling();
+        setFlow(null);
         try {
             await api.piAuthCancel(flow.id);
         }
         catch {
             // The flow record may already be gone; clearing locally is enough.
         }
-        setFlow(null);
     }
     async function disconnect(providerId) {
+        const generation = lifetime.current;
+        const current = () => generation === lifetime.current;
         setBusy(providerId);
         setError(null);
         try {
             await api.piAuthLogout(providerId);
+            if (!current())
+                return;
             await reload();
         }
         catch (err) {
-            setError(err instanceof Error ? err.message : "Could not disconnect");
+            if (current())
+                setError(err instanceof Error ? err.message : "Could not disconnect");
         }
         finally {
-            setBusy(null);
+            if (current())
+                setBusy(null);
         }
     }
     if (providers.length === 0)
         return null;
-    return (_jsxs("div", { className: "mt-6", children: [_jsx("h3", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: "Accounts" }), _jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: "Model providers that sign in with an account instead of an API key." }), _jsx("ul", { className: "mt-4 flex flex-col gap-2", children: providers.map((provider) => (_jsxs("li", { className: "rounded-lg border border-border-subtle bg-surface p-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "truncate text-sm text-foreground", children: provider.name }), _jsx("p", { className: "truncate text-[11px] text-muted-foreground", children: provider.configured
-                                                ? `Connected${provider.source ? ` · ${provider.source}` : ""}`
-                                                : "Not connected" })] }), provider.configured && (_jsx(Check, { className: "h-4 w-4 shrink-0 text-accent" })), provider.oauth && !provider.configured && (_jsx("button", { onClick: () => connect(provider.providerId), disabled: busy !== null || flow?.status === "pending", className: "shrink-0 rounded-lg border border-border-subtle bg-surface px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:border-primary hover:text-primary disabled:opacity-50", children: busy === provider.providerId ? (_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" })) : ("Connect") })), provider.configured && provider.source === "stored" && (_jsx("button", { onClick: () => disconnect(provider.providerId), disabled: busy !== null, title: "Disconnect", 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-destructive", children: _jsx(LogOut, { className: "h-4 w-4" }) }))] }), flow && flow.providerId === provider.providerId && (_jsx(LoginFlowCard, { flow: flow, onCancel: cancel, onDismiss: () => setFlow(null) }))] }, provider.providerId))) }), error && (_jsx("p", { role: "alert", className: "mt-3 text-xs text-destructive", children: error }))] }));
-}
-function LoginFlowCard({ flow, onCancel, onDismiss, }) {
-    if (flow.status === "pending") {
-        return (_jsxs("div", { className: "mt-3 rounded-lg border border-primary/40 bg-primary/5 p-3", children: [_jsx("p", { className: "text-xs text-muted-foreground", children: "Enter this code at the provider's device page \u2014 on this or any other device:" }), _jsx("p", { className: "mt-2 select-all text-center font-[family-name:var(--font-mono)] text-xl font-semibold tracking-widest text-foreground", children: flow.userCode ?? "…" }), _jsxs("div", { className: "mt-3 flex items-center justify-center gap-2", children: [flow.verificationUri && (_jsxs("a", { href: flow.verificationUri, target: "_blank", rel: "noreferrer", className: "flex items-center gap-1.5 rounded-lg bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground transition-colors hover:brightness-110", children: [_jsx(ExternalLink, { className: "h-3 w-3" }), "Open verification page"] })), _jsxs("button", { onClick: onCancel, className: "flex items-center gap-1.5 rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground", children: [_jsx(X, { className: "h-3 w-3" }), "Cancel"] })] }), _jsxs("p", { className: "mt-2 flex items-center justify-center gap-1.5 text-center text-[11px] text-muted-foreground", children: [_jsx(Loader2, { className: "h-3 w-3 animate-spin" }), "Waiting for approval\u2026"] })] }));
-    }
-    const message = flow.status === "success"
-        ? "Connected."
-        : flow.status === "cancelled"
-            ? "Login cancelled."
-            : flow.error ?? "Login failed.";
-    return (_jsxs("div", { className: cn("mt-3 flex items-center justify-between rounded-lg border p-3 text-xs", flow.status === "success"
-            ? "border-border-subtle text-muted-foreground"
-            : "border-destructive/30 text-destructive"), children: [_jsx("span", { children: message }), _jsx("button", { onClick: onDismiss, className: "text-muted-foreground transition-colors hover:text-foreground", children: _jsx(X, { className: "h-3.5 w-3.5" }) })] }));
+    return (_jsx(AccountsList, { providers: providers, busy: busy, flow: flow, error: error, onConnect: (id) => void connect(id), onDisconnect: (id) => void disconnect(id), onCancelFlow: () => void cancel(), onDismissFlow: () => setFlow(null) }));
 }
 //# sourceMappingURL=pi-accounts.js.map