@schlessera/brain-ui-react 0.34.1 → 0.36.0

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

@@ -1,8 +1,8 @@
-import { useEffect, useRef, useState } from "react";
-import { Check, ExternalLink, Loader2, LogOut, X } from "lucide-react";
-import { api, type PiAuthProviderStatus, type PiLoginFlow } from "../../lib/api-client.js";
-import { useProviderStore } from "../../stores/provider-store.js";
-import { cn } from "../../lib/utils.js";
+import { useBrainUiRoot } from "../../root-context.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { PiAuthProviderStatus, PiLoginFlow } from "../../lib/api-client.js";
+import type { BrainUiRoot } from "../../root.js";
+import { AccountsList } from "./pi-accounts-list.js";
 
 /**
  * Provider sign-in for the pi backend's OAuth vendors — most importantly
@@ -12,12 +12,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 }: { active: boolean }) {
+  const root = useBrainUiRoot();
+  const api = root.api;
+  const lifetime = useRef(0);
+  const listRequest = useRef(0);
+  const flowRequest = useRef(0);
   const [providers, setProviders] = useState<PiAuthProviderStatus[]>([]);
   const [error, setError] = useState<string | null>(null);
   const [busy, setBusy] = useState<string | null>(null);
-  const [flow, setFlow] = useState<PiLoginFlow | null>(null);
+  const [ownedFlow, setOwnedFlow] = useState<{ root: BrainUiRoot; flow: PiLoginFlow } | null>(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: PiLoginFlow | null) => {
+    setOwnedFlow(flow ? { root, flow } : null);
+  }, [root]);
   const pollTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   function stopPolling() {
@@ -27,51 +41,55 @@ export function PiAccountsSection({ active }: { active: boolean }) {
     }
   }
 
-  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") return;
+    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) return;
+        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) return;
+        if (!current()) return;
         // Transient poll failure: keep trying until the flow expires.
         pollTimer.current = setTimeout(tick, delayMs);
         return;
@@ -82,183 +100,66 @@ export function PiAccountsSection({ active }: { active: boolean }) {
       disposed = true;
       stopPolling();
     };
-  }, [flow]);
+  }, [active, flow, root, api, reload, setFlow]);
 
   async function connect(providerId: string) {
+    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: string) {
+    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 (
-    <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">
-        {providers.map((provider) => (
-          <li
-            key={provider.providerId}
-            className="rounded-lg border border-border-subtle bg-surface p-3"
-          >
-            <div className="flex items-center gap-3">
-              <div className="min-w-0 flex-1">
-                <p className="truncate text-sm text-foreground">{provider.name}</p>
-                <p className="truncate text-[11px] text-muted-foreground">
-                  {provider.configured
-                    ? `Connected${provider.source ? ` · ${provider.source}` : ""}`
-                    : "Not connected"}
-                </p>
-              </div>
-              {provider.configured && (
-                <Check className="h-4 w-4 shrink-0 text-accent" />
-              )}
-              {provider.oauth && !provider.configured && (
-                <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"
-                >
-                  {busy === provider.providerId ? (
-                    <Loader2 className="h-3.5 w-3.5 animate-spin" />
-                  ) : (
-                    "Connect"
-                  )}
-                </button>
-              )}
-              {provider.configured && provider.source === "stored" && (
-                <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"
-                >
-                  <LogOut className="h-4 w-4" />
-                </button>
-              )}
-            </div>
-
-            {flow && flow.providerId === provider.providerId && (
-              <LoginFlowCard flow={flow} onCancel={cancel} onDismiss={() => setFlow(null)} />
-            )}
-          </li>
-        ))}
-      </ul>
-      {error && (
-        <p role="alert" className="mt-3 text-xs text-destructive">
-          {error}
-        </p>
-      )}
-    </div>
-  );
-}
-
-function LoginFlowCard({
-  flow,
-  onCancel,
-  onDismiss,
-}: {
-  flow: PiLoginFlow;
-  onCancel: () => void;
-  onDismiss: () => void;
-}) {
-  if (flow.status === "pending") {
-    return (
-      <div className="mt-3 rounded-lg border border-primary/40 bg-primary/5 p-3">
-        <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="mt-2 select-all text-center font-[family-name:var(--font-mono)] text-xl font-semibold tracking-widest text-foreground">
-          {flow.userCode ?? "…"}
-        </p>
-        <div className="mt-3 flex items-center justify-center gap-2">
-          {flow.verificationUri && (
-            <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"
-            >
-              <ExternalLink className="h-3 w-3" />
-              Open verification page
-            </a>
-          )}
-          <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"
-          >
-            <X className="h-3 w-3" />
-            Cancel
-          </button>
-        </div>
-        <p className="mt-2 flex items-center justify-center gap-1.5 text-center text-[11px] text-muted-foreground">
-          <Loader2 className="h-3 w-3 animate-spin" />
-          Waiting for approval…
-        </p>
-      </div>
-    );
-  }
-
-  const message =
-    flow.status === "success"
-      ? "Connected."
-      : flow.status === "cancelled"
-        ? "Login cancelled."
-        : flow.error ?? "Login failed.";
-  return (
-    <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"
-      )}
-    >
-      <span>{message}</span>
-      <button
-        onClick={onDismiss}
-        className="text-muted-foreground transition-colors hover:text-foreground"
-      >
-        <X className="h-3.5 w-3.5" />
-      </button>
-    </div>
+    <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)}
+    />
   );
 }

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

@@ -0,0 +1,172 @@
+import { Button, Callout, Chip, Placeholder, Surface } from "@schlessera/brain-ui-kit";
+import { Trash2 } from "lucide-react";
+import type { FormEvent } from "react";
+
+/**
+ * Devices and agents, rendered from props (S7, the `settings` directory).
+ * `DevicesAgentsTab` is the container: the principals request, the mint
+ * through the principal store and the revoke with its confirm live there;
+ * this draws the list and the mint form.
+ *
+ * A principal is a kit `Surface` — `strong` for this device, hairline for
+ * the others — with its kind as a chip, its three timestamps as a
+ * definition list (the tests read each value from its own term, so the
+ * structure is the contract) and a native revoke button, titled and named
+ * with the label because the kit has no icon-only button. The form's fields
+ * stay native; its submit is the kit `Button`, and ⏎ in a field submits the
+ * form the same way.
+ */
+export interface PrincipalRowData {
+  id: string;
+  label: string;
+  kind: "owner" | "agent" | string;
+  isOwn: boolean;
+  created: string;
+  lastSeen: string;
+  expires: string;
+}
+
+export interface PrincipalListProps {
+  state: "loading" | "unavailable" | "error" | "ready";
+  principals: PrincipalRowData[];
+  error: string | null;
+  label: string;
+  ttlDays: number;
+  minting: boolean;
+  onLabel: (value: string) => void;
+  onTtlDays: (days: number) => void;
+  onMint: () => void;
+  onRevoke: (id: string) => void;
+}
+
+export function PrincipalList(p: PrincipalListProps) {
+  const canMint = !p.minting && p.label.trim().length > 0;
+  function onSubmit(e: FormEvent) {
+    e.preventDefault();
+    if (canMint) p.onMint();
+  }
+  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>
+
+      {p.state === "loading" ? (
+        <div className="mt-4">
+          <Placeholder variant="loading" lines={3} />
+        </div>
+      ) : p.state === "unavailable" ? (
+        <p className="mt-4 text-xs text-muted-foreground">
+          Devices and agents can only be managed when password authentication is enabled.
+        </p>
+      ) : p.state === "error" ? (
+        <div role="alert" className="mt-4">
+          <Callout tone="red" variant="banner" icon="failed" mono text={p.error ?? "Could not load devices and agents"} />
+        </div>
+      ) : (
+        <>
+          <ul className="mt-4 flex flex-col gap-2">
+            {p.principals.map((principal) => (
+              <PrincipalCard key={principal.id} principal={principal} onRevoke={() => p.onRevoke(principal.id)} />
+            ))}
+            {p.principals.length === 0 ? (
+              <li>
+                <Placeholder variant="empty" message="No active devices or agents." icon="secure" />
+              </li>
+            ) : null}
+          </ul>
+
+          {p.error ? (
+            <div role="alert" className="mt-3">
+              <Callout tone="red" variant="banner" icon="failed" mono text={p.error} />
+            </div>
+          ) : null}
+
+          <form onSubmit={onSubmit} 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={p.label}
+              maxLength={64}
+              onChange={(event) => p.onLabel(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={p.ttlDays}
+              onChange={(event) => p.onTtlDays(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>
+            <div className="mt-4">
+              <Button
+                label={p.minting ? "Creating…" : "Create agent credential"}
+                icon="passkey"
+                tone="primary"
+                size="md"
+                center
+                disabled={!canMint}
+                onClick={p.onMint}
+              />
+            </div>
+          </form>
+        </>
+      )}
+    </div>
+  );
+}
+
+function PrincipalCard({ principal, onRevoke }: { principal: PrincipalRowData; onRevoke: () => void }) {
+  const agent = principal.kind === "agent";
+  const kind = principal.isOwn ? "This device" : agent ? "Agent" : "Device";
+  return (
+    <li data-principal-row>
+      <Surface emphasis={principal.isOwn ? "strong" : "hairline"} tone={principal.isOwn ? "amber" : undefined} pad={12}>
+        <div className="flex items-start gap-2">
+          <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">{principal.label}</span>
+              <Chip label={kind} variant="kv" tone={principal.isOwn ? "amber" : agent ? "purple" : "neutral"} caps />
+            </div>
+            <dl className="mt-1.5 grid grid-cols-[auto_1fr] gap-x-2 gap-y-0.5 font-[family-name:var(--font-mono)] text-[11px] text-muted-foreground">
+              <dt>Created</dt>
+              <dd>{principal.created}</dd>
+              <dt>Last seen</dt>
+              <dd>{principal.lastSeen}</dd>
+              <dt>Expires</dt>
+              <dd>{principal.expires}</dd>
+            </dl>
+          </div>
+          <button
+            type="button"
+            onClick={onRevoke}
+            aria-label={`Revoke ${principal.label}`}
+            title="Revoke"
+            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>
+      </Surface>
+    </li>
+  );
+}