@schlessera/brain-ui-react 0.35.0 → 0.36.0

package/src/components/connectivity/connection-gate.tsx

@@ -1,10 +1,11 @@
+import type { BrainUiRoot } from "../../root.js";
+import { useBrainUiRoot } from "../../root-context.js";
 import { Brain, WifiOff, ShieldAlert } from "lucide-react";
 import { motion, AnimatePresence } from "framer-motion";
 import { useConnectionStore } from "../../stores/connection-store.js";
 import { useEffect, useRef, useState, type ReactNode } from "react";
 import { LoginScreen } from "./login-screen.js";
 import { useVpnStatus } from "../../hooks/use-vpn-status.js";
-import { reconnectWebSocketNow } from "../../hooks/use-websocket.js";
 import {
   deriveConnectionIssue,
   type ConnectionIssue,
@@ -14,7 +15,19 @@ import { rebindPushSubscriptionAfterLogin } from "../../lib/push-registration.js
 const INITIAL_PUSH_REBIND_BACKOFF_MS = 1_000;
 const MAX_PUSH_REBIND_BACKOFF_MS = 60_000;
 
+function newPushRebind() {
+  return {
+    pending: true,
+    inFlight: false,
+    retryReady: true,
+    backoffMs: INITIAL_PUSH_REBIND_BACKOFF_MS,
+    retryTimer: undefined as ReturnType<typeof setTimeout> | undefined,
+    controller: new AbortController(),
+  };
+}
+
 export function ConnectionGate({ children }: { children: ReactNode }) {
+  const root = useBrainUiRoot();
   // The gate owns its connectivity probe — composing <ConnectionGate> is all
   // an embedder needs; the store would otherwise sit on "checking" forever.
   const successfulProbeCount = useVpnStatus();
@@ -30,28 +43,22 @@ export function ConnectionGate({ children }: { children: ReactNode }) {
 
   // Once the app has connected, never unmount the UI again — an intermittent
   // drop must not destroy rendered chat state. Show a banner instead.
-  const [everConnected, setEverConnected] = useState(false);
+  const [connectedRoot, setConnectedRoot] = useState<BrainUiRoot | null>(null);
+  const everConnected = connectedRoot === root;
   useEffect(() => {
-    if (vpnStatus === "connected") setEverConnected(true);
-  }, [vpnStatus]);
+    if (vpnStatus === "connected") setConnectedRoot(root);
+  }, [vpnStatus, root]);
 
-  const pushRebind = useRef({
-    pending: true,
-    inFlight: false,
-    retryReady: true,
-    backoffMs: INITIAL_PUSH_REBIND_BACKOFF_MS,
-    retryTimer: undefined as ReturnType<typeof setTimeout> | undefined,
-    disposed: false,
-  });
+  const pushRebind = useRef(newPushRebind());
 
   useEffect(() => {
-    const state = pushRebind.current;
-    state.disposed = false;
+    const state = newPushRebind();
+    pushRebind.current = state;
     return () => {
-      state.disposed = true;
+      state.controller.abort();
       clearTimeout(state.retryTimer);
     };
-  }, []);
+  }, [root]);
 
   // A successful authenticated probe follows a login reload (and is also the
   // boot path for ambient auth modes). Re-assert any browser-held subscription
@@ -71,14 +78,14 @@ export function ConnectionGate({ children }: { children: ReactNode }) {
     }
 
     state.inFlight = true;
-    void rebindPushSubscriptionAfterLogin().then(
+    void rebindPushSubscriptionAfterLogin(root.api, state.controller.signal).then(
       () => {
-        if (state.disposed) return;
+        if (state.controller.signal.aborted) return;
         state.inFlight = false;
         state.pending = false;
       },
       () => {
-        if (state.disposed) return;
+        if (state.controller.signal.aborted) return;
         state.inFlight = false;
         state.retryReady = false;
         const delay = state.backoffMs;
@@ -92,7 +99,7 @@ export function ConnectionGate({ children }: { children: ReactNode }) {
         }, delay);
       }
     );
-  }, [successfulProbeCount, vpnStatus]);
+  }, [successfulProbeCount, vpnStatus, root]);
 
   const refused = issue === "refused" || issue === "capacity";
   const wasRefused = useRef(false);
@@ -199,6 +206,7 @@ function OfflineBanner({
   show: boolean;
   issue: ConnectionIssue;
 }) {
+  const root = useBrainUiRoot();
   const message =
     issue === "forbidden"
       ? "VPN required — reconnect Tailscale"
@@ -222,7 +230,7 @@ function OfflineBanner({
         >
           <div
             role="status"
-            className="pointer-events-auto flex items-center gap-2 rounded-full border border-amber-500/30 bg-amber-950/90 px-4 py-1.5 text-xs text-amber-200 shadow-lg backdrop-blur"
+            className="pointer-events-auto flex items-center gap-2 rounded-full border border-primary/30 bg-surface-raised/90 px-4 py-1.5 text-xs text-primary shadow-lg backdrop-blur"
           >
             {issue === "forbidden" ? (
               <ShieldAlert className="h-3.5 w-3.5" />
@@ -233,14 +241,14 @@ function OfflineBanner({
             {(issue === "refused" || issue === "capacity") && (
               <button
                 type="button"
-                onClick={reconnectWebSocketNow}
-                className="font-medium underline underline-offset-2 hover:text-amber-100"
+                onClick={root.connection.reconnectNow}
+                className="font-medium underline underline-offset-2 hover:text-foreground"
               >
                 Retry now
               </button>
             )}
             <span
-              className="inline-block h-1.5 w-1.5 rounded-full bg-amber-400"
+              className="inline-block h-1.5 w-1.5 rounded-full bg-primary-mark"
               style={{ animation: "breathe 2s ease-in-out infinite" }}
             />
           </div>

package/src/components/connectivity/login-form.tsx

@@ -0,0 +1,122 @@
+import { Button, Callout, Icon } from "@schlessera/brain-ui-kit";
+import { motion } from "framer-motion";
+import { Lock } from "lucide-react";
+import type { FormEvent } from "react";
+
+/**
+ * The login surface, rendered from props (S6). `LoginScreen` owns the methods
+ * probe, the conditional-autofill ceremony, the session cookie and the
+ * lifetime guards; this owns nothing but what is on screen.
+ *
+ * Buttons are the kit's: `primary` for the one that signs you in, and the
+ * passkey button is `ghost` beside a password field or `primary` when it is
+ * the only way in. The error is a red banner `Callout` inside a live region.
+ * The password field stays a native input — the kit has no text input, and
+ * `autoComplete="current-password webauthn"` is what lets the browser offer a
+ * passkey in the field's autofill.
+ *
+ * Fail-open by design: `methods.password` defaults to true in the container,
+ * so a failed probe still shows the one method that always works.
+ */
+export interface LoginMethods {
+  password: boolean;
+  passkey: boolean;
+}
+
+export interface LoginFormProps {
+  appName: string;
+  methods: LoginMethods;
+  password: string;
+  busy: boolean;
+  error: string | null;
+  onPasswordChange: (value: string) => void;
+  onPassword: () => void;
+  onPasskey: () => void;
+}
+
+export function LoginForm(p: LoginFormProps) {
+  const { password: passwordAvailable, passkey: passkeyAvailable } = p.methods;
+  const canSubmit = passwordAvailable && p.password.length > 0 && !p.busy;
+
+  function onSubmit(e: FormEvent) {
+    e.preventDefault();
+    if (canSubmit) p.onPassword();
+  }
+
+  return (
+    <div className="flex h-[100dvh] items-center justify-center bg-background">
+      <motion.div
+        initial={{ opacity: 0, y: 8 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.3 }}
+        className="flex w-full max-w-xs flex-col items-center gap-6 px-6 text-center"
+      >
+        <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-surface">
+          <Icon icon="brain" size={32} color="var(--bk-amber-ink)" />
+        </div>
+        <div>
+          <h1 className="font-[family-name:var(--font-display)] text-2xl text-foreground">{p.appName}</h1>
+          <p className="mt-1 text-sm text-muted-foreground">
+            {!passwordAvailable
+              ? "Sign in with your passkey."
+              : passkeyAvailable
+                ? "Use your passkey or enter the password."
+                : "Enter the password to continue."}
+          </p>
+        </div>
+
+        {/* A form so Enter in the password field submits (implicit submission
+            needs only the one field); the kit Button below calls the same
+            handler, it is not a submit control. */}
+        <form onSubmit={onSubmit} className="flex w-full flex-col gap-3">
+          {passwordAvailable && (
+            <div className="relative">
+              <Lock className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground/60" />
+              <input
+                type="password"
+                autoFocus
+                autoComplete="current-password webauthn"
+                value={p.password}
+                onChange={(e) => p.onPasswordChange(e.target.value)}
+                placeholder="Password"
+                aria-label="Password"
+                className="w-full rounded-lg border border-border-subtle bg-surface py-2 pl-9 pr-3 text-sm text-foreground outline-none transition-colors focus:border-primary"
+              />
+            </div>
+          )}
+          {p.error && (
+            <div role="alert">
+              <Callout tone="red" variant="banner" icon="failed" mono text={p.error} />
+            </div>
+          )}
+          {passwordAvailable && (
+            <Button
+              label={p.busy ? "Signing in…" : "Sign in"}
+              tone="primary"
+              size="md"
+              center
+              disabled={!canSubmit}
+              onClick={p.onPassword}
+            />
+          )}
+          {passkeyAvailable && (
+            <Button
+              label="Sign in with a passkey"
+              icon="passkey"
+              tone={passwordAvailable ? "ghost" : "primary"}
+              size="md"
+              center
+              disabled={p.busy}
+              onClick={p.onPasskey}
+            />
+          )}
+          {!passwordAvailable && !passkeyAvailable && (
+            <p className="text-xs text-muted-foreground">
+              Password login is disabled. Use a device or browser that supports passkeys.
+            </p>
+          )}
+        </form>
+      </motion.div>
+    </div>
+  );
+}

package/src/components/connectivity/login-screen.tsx

@@ -1,8 +1,6 @@
-import { uiConfig } from "../../config.js";
-import { useEffect, useRef, useState, type FormEvent } from "react";
-import { Brain, Fingerprint, Lock } from "lucide-react";
-import { motion } from "framer-motion";
-import { api } from "../../lib/api-client.js";
+import { useBrainUiRoot } from "../../root-context.js";
+import { useEffect, useRef, useState } from "react";
+import { LoginForm } from "./login-form.js";
 import {
   isUserCancel,
   loginWithPasskey,
@@ -11,13 +9,20 @@ import {
 } from "../../lib/passkeys.js";
 
 /**
- * Login, shown when the server is in `password` auth mode and no valid session
- * cookie is present (the /api/vpn-check probe returns 401). Password is always
+ * Login CONTAINER, shown when the server is in `password` auth mode and no
+ * valid session cookie is present (the /api/vpn-check probe returns 401). It
+ * owns the methods probe, the conditional-autofill passkey ceremony, the two
+ * sign-in requests and the lifetime guard that keeps any of them from acting
+ * on a superseded root; `LoginForm` owns the surface (S6). Password is always
  * offered; a passkey button appears when the server reports registered
  * passkeys and the browser supports WebAuthn. On success the browser has the
  * HttpOnly session cookie; a reload boots the authenticated app.
  */
 export function LoginScreen() {
+  const root = useBrainUiRoot();
+  const api = root.api;
+  const uiConfig = root.config;
+  const lifetime = useRef(new AbortController());
   const [password, setPassword] = useState("");
   const [error, setError] = useState<string | null>(null);
   const [submitting, setSubmitting] = useState(false);
@@ -26,26 +31,31 @@ export function LoginScreen() {
   // server enforces the real policy, and hiding the only working method on a
   // transient error would be a self-inflicted lockout.
   const [passwordAvailable, setPasswordAvailable] = useState(true);
-  const conditionalStarted = useRef(false);
 
   useEffect(() => {
-    let cancelled = false;
+    const controller = new AbortController();
+    const signal = controller.signal;
+    lifetime.current = controller;
+    setPassword("");
+    setError(null);
+    setSubmitting(false);
+    setPasskeyAvailable(false);
+    setPasswordAvailable(true);
     api
       .authMethods()
       .then(async (methods) => {
-        if (cancelled) return;
+        if (signal.aborted) return;
         if (methods.passkey && !methods.password) setPasswordAvailable(false);
         if (!methods.passkey || !supportsPasskeys()) return;
         setPasskeyAvailable(true);
         // Conditional UI (progressive enhancement): surface passkeys in the
         // password input's autofill. Runs once; a user cancel is not an error.
-        if (conditionalStarted.current || !(await supportsAutofill())) return;
-        conditionalStarted.current = true;
+        if (!(await supportsAutofill()) || signal.aborted) return;
         try {
-          await loginWithPasskey({ useBrowserAutofill: true });
-          window.location.reload();
+          await loginWithPasskey(api, { useBrowserAutofill: true, signal });
+          if (!signal.aborted) window.location.reload();
         } catch (err) {
-          if (!isUserCancel(err)) {
+          if (!signal.aborted && !isUserCancel(err)) {
             console.warn("[passkeys] conditional UI failed:", err);
           }
         }
@@ -53,21 +63,20 @@ export function LoginScreen() {
       .catch(() => {
         // Methods probe failing degrades to password-only — unchanged behavior.
       });
-    return () => {
-      cancelled = true;
-    };
-  }, []);
+    return () => controller.abort();
+  }, [root, api]);
 
-  async function onSubmit(e: FormEvent) {
-    e.preventDefault();
+  async function onPasswordLogin() {
     if (!password || submitting) return;
+    const signal = lifetime.current.signal;
     setSubmitting(true);
     setError(null);
     try {
       await api.login(password);
       // Cookie is set; reload so the app boots authenticated.
-      window.location.reload();
+      if (!signal.aborted) window.location.reload();
     } catch (err) {
+      if (signal.aborted) return;
       setError(err instanceof Error ? err.message : "Login failed");
       setSubmitting(false);
     }
@@ -75,12 +84,14 @@ export function LoginScreen() {
 
   async function onPasskeyClick() {
     if (submitting) return;
+    const signal = lifetime.current.signal;
     setSubmitting(true);
     setError(null);
     try {
-      await loginWithPasskey();
-      window.location.reload();
+      await loginWithPasskey(api, { signal });
+      if (!signal.aborted) window.location.reload();
     } catch (err) {
+      if (signal.aborted) return;
       if (!isUserCancel(err)) {
         setError(err instanceof Error ? err.message : "Passkey login failed");
       }
@@ -89,81 +100,15 @@ export function LoginScreen() {
   }
 
   return (
-    <div className="flex h-[100dvh] items-center justify-center bg-background">
-      <motion.div
-        initial={{ opacity: 0, y: 8 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.3 }}
-        className="flex w-full max-w-xs flex-col items-center gap-6 px-6 text-center"
-      >
-        <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-surface">
-          <Brain className="h-8 w-8 text-primary" />
-        </div>
-        <div>
-          <h1 className="font-[family-name:var(--font-display)] text-2xl text-foreground">
-            {uiConfig.appName}
-          </h1>
-          <p className="mt-1 text-sm text-muted-foreground">
-            {!passwordAvailable
-              ? "Sign in with your passkey."
-              : passkeyAvailable
-                ? "Use your passkey or enter the password."
-                : "Enter the password to continue."}
-          </p>
-        </div>
-
-        <form onSubmit={onSubmit} className="flex w-full flex-col gap-3">
-          {passwordAvailable && (
-            <div className="relative">
-              <Lock className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground/60" />
-              <input
-                type="password"
-                autoFocus
-                autoComplete="current-password webauthn"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                placeholder="Password"
-                className="w-full rounded-lg border border-border-subtle bg-surface py-2 pl-9 pr-3 text-sm text-foreground outline-none transition-colors focus:border-primary"
-              />
-            </div>
-          )}
-          {error && (
-            <p role="alert" className="text-xs text-destructive">
-              {error}
-            </p>
-          )}
-          {passwordAvailable && (
-            <button
-              type="submit"
-              disabled={submitting || !password}
-              className="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:brightness-110 disabled:opacity-50"
-            >
-              {submitting ? "Signing in…" : "Sign in"}
-            </button>
-          )}
-          {passkeyAvailable && (
-            <button
-              type="button"
-              onClick={onPasskeyClick}
-              disabled={submitting}
-              className={
-                passwordAvailable
-                  ? "flex 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-primary disabled:opacity-50"
-                  : "flex 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"
-              }
-            >
-              <Fingerprint className="h-4 w-4" />
-              Sign in with a passkey
-            </button>
-          )}
-          {!passwordAvailable && !passkeyAvailable && (
-            <p className="text-xs text-muted-foreground">
-              Password login is disabled. Use a device or browser that supports
-              passkeys.
-            </p>
-          )}
-        </form>
-      </motion.div>
-    </div>
+    <LoginForm
+      appName={uiConfig.appName}
+      methods={{ password: passwordAvailable, passkey: passkeyAvailable }}
+      password={password}
+      busy={submitting}
+      error={error}
+      onPasswordChange={setPassword}
+      onPassword={() => void onPasswordLogin()}
+      onPasskey={() => void onPasskeyClick()}
+    />
   );
 }

package/src/components/dev/share-harness.tsx

@@ -143,7 +143,7 @@ export function ShareHarness({
         <button
           type="button"
           onClick={() => void send()}
-          className="flex items-center justify-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground"
+          className="flex items-center justify-center gap-2 rounded-lg bg-primary-fill px-4 py-2 text-sm font-medium text-primary-foreground"
         >
           <Send className="h-4 w-4" />
           Share it
@@ -151,7 +151,7 @@ export function ShareHarness({
       </div>
 
       {error && (
-        <p className="rounded-lg border border-destructive/40 bg-destructive/10 p-3 text-sm">
+        <p className="rounded-lg border border-destructive/40 bg-destructive-fill/10 p-3 text-sm">
           {error}
         </p>
       )}