@schlessera/brain-ui-react 0.34.0 → 0.35.0

package/src/components/quick-actions/search-modal.tsx

@@ -24,6 +24,7 @@ export function SearchPanel({
 }) {
   const [query, setQuery] = useState("");
   const [state, setState] = useState<State>("idle");
+  const [resultQuery, setResultQuery] = useState("");
   const [results, setResults] = useState<BrainSearchHit[]>([]);
   const [warnings, setWarnings] = useState<string[]>([]);
   const [error, setError] = useState("");
@@ -31,15 +32,40 @@ export function SearchPanel({
 
   const inputRef = useRef<HTMLInputElement>(null);
   const listRef = useRef<HTMLDivElement>(null);
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const controllerRef = useRef<AbortController | null>(null);
 
   const openFile = useFileStore((s) => s.openFile);
   const setFilePanelOpen = useUIStore((s) => s.setFilePanelOpen);
 
   const trimmed = query.trim();
+  const currentResults = resultQuery === trimmed ? results : [];
 
-  const runSearch = useCallback(async (q: string) => {
+  const cancelSearch = useCallback(() => {
+    if (debounceRef.current !== null) clearTimeout(debounceRef.current);
+    debounceRef.current = null;
     controllerRef.current?.abort();
+    controllerRef.current = null;
+  }, []);
+
+  function changeQuery(value: string) {
+    if (value.trim() === trimmed) {
+      setQuery(value);
+      return;
+    }
+    // Invalidate before the debounce, including completions already queued.
+    cancelSearch();
+    setQuery(value);
+    setResultQuery("");
+    setResults([]);
+    setWarnings([]);
+    setError("");
+    setSelected(0);
+    setState("idle");
+  }
+
+  const runSearch = useCallback(async (q: string) => {
+    cancelSearch();
     const controller = new AbortController();
     controllerRef.current = controller;
 
@@ -50,6 +76,7 @@ export function SearchPanel({
         signal: controller.signal,
       });
       if (controller.signal.aborted) return;
+      setResultQuery(q);
       setResults(res.results);
       setWarnings(res.warnings ?? []);
       setSelected(0);
@@ -63,17 +90,17 @@ export function SearchPanel({
     } finally {
       if (controllerRef.current === controller) controllerRef.current = null;
     }
-  }, []);
+  }, [cancelSearch]);
 
   // Fresh panel every time it opens: stale results from a previous query would
   // otherwise flash before the first search lands.
   useEffect(() => {
     if (!open) {
-      controllerRef.current?.abort();
-      controllerRef.current = null;
+      cancelSearch();
       return;
     }
     setQuery("");
+    setResultQuery("");
     setResults([]);
     setWarnings([]);
     setError("");
@@ -82,27 +109,28 @@ export function SearchPanel({
     // Focus after the slide-in starts; focusing mid-transform fights the
     // mobile keyboard on some browsers.
     const t = setTimeout(() => inputRef.current?.focus(), 120);
-    return () => clearTimeout(t);
-  }, [open]);
+    return () => { clearTimeout(t); cancelSearch(); };
+  }, [open, cancelSearch]);
 
   // Debounced search on typing.
   useEffect(() => {
     if (!open) return;
     if (trimmed.length < MIN_QUERY) {
-      controllerRef.current?.abort();
-      controllerRef.current = null;
+      cancelSearch();
       setResults([]);
       setWarnings([]);
       setState("idle");
       return;
     }
-    const t = setTimeout(() => void runSearch(trimmed), DEBOUNCE_MS);
-    return () => clearTimeout(t);
-  }, [open, trimmed, runSearch]);
+    debounceRef.current = setTimeout(() => void runSearch(trimmed), DEBOUNCE_MS);
+    return cancelSearch;
+  }, [open, trimmed, runSearch, cancelSearch]);
 
   function handleOpenResult(hit: BrainSearchHit) {
     // The file panel takes the same right-hand slot, so hand the screen over
     // rather than stacking two sheets.
+    if (resultQuery !== trimmed || state !== "done") return;
+    cancelSearch();
     onClose();
     setFilePanelOpen(true);
     void openFile(hit.path);
@@ -110,10 +138,10 @@ export function SearchPanel({
 
   function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
     if (e.key === "ArrowDown" || e.key === "ArrowUp") {
-      if (results.length === 0) return;
+      if (currentResults.length === 0) return;
       e.preventDefault();
       const delta = e.key === "ArrowDown" ? 1 : -1;
-      const next = (selected + delta + results.length) % results.length;
+      const next = (selected + delta + currentResults.length) % currentResults.length;
       setSelected(next);
       listRef.current
         ?.querySelectorAll("[data-result]")
@@ -122,10 +150,10 @@ export function SearchPanel({
     }
     if (e.key === "Enter") {
       e.preventDefault();
-      const hit = results[selected];
+      const hit = currentResults[selected];
       if (hit) handleOpenResult(hit);
       // Enter with nothing selected jumps the debounce.
-      else if (trimmed.length >= MIN_QUERY) void runSearch(trimmed);
+      else if (trimmed.length >= MIN_QUERY && state !== "loading") void runSearch(trimmed);
     }
   }
 
@@ -139,7 +167,7 @@ export function SearchPanel({
             <input
               ref={inputRef}
               value={query}
-              onChange={(e) => setQuery(e.target.value)}
+              onChange={(e) => changeQuery(e.target.value)}
               onKeyDown={handleKeyDown}
               placeholder="Search your brain..."
               className="min-w-0 flex-1 bg-transparent text-sm text-foreground outline-none placeholder:text-muted-foreground"
@@ -153,7 +181,7 @@ export function SearchPanel({
             {query && state !== "loading" && (
               <button
                 onClick={() => {
-                  setQuery("");
+                  changeQuery("");
                   inputRef.current?.focus();
                 }}
                 className="shrink-0 rounded p-0.5 text-muted-foreground transition-colors hover:text-foreground"
@@ -192,7 +220,7 @@ export function SearchPanel({
             <Placeholder>No results for “{trimmed}”.</Placeholder>
           ) : (
             <div className="divide-y divide-border/40">
-              {results.map((hit, i) => (
+              {currentResults.map((hit, i) => (
                 <ResultRow
                   key={hit.path}
                   hit={hit}

package/src/components/quick-actions/streaming-modal.tsx

@@ -41,7 +41,9 @@ export function StreamingPanel({
 
         if (!res.ok || !res.body) {
           setState("error");
-          setLines((l) => [...l, `HTTP ${res.status}: ${res.statusText}`]);
+          const body = await res.json().catch(() => null);
+          const message = typeof body?.error === "string" ? body.error : `HTTP ${res.status}: ${res.statusText}`;
+          if (!controller.signal.aborted) setLines((l) => [...l, message]);
           return;
         }
 

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

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

package/src/components/settings/one-time-agent-credential.tsx

@@ -0,0 +1,131 @@
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { Check, Copy } from "lucide-react";
+import type { MintedAgent } from "../../lib/api-client.js";
+import { usePrincipalStore } from "../../stores/principal-store.js";
+
+/** App-level portal for the unrecoverable value returned by an agent mint. */
+export function OneTimeAgentCredentialDialog() {
+  const credential = usePrincipalStore((state) => state.oneTimeCredential);
+  const acknowledge = usePrincipalStore(
+    (state) => state.acknowledgeAgentCredential
+  );
+
+  return credential ? (
+    <OneTimeCredential
+      key={credential.id}
+      credential={credential}
+      onDone={acknowledge}
+    />
+  ) : null;
+}
+
+function OneTimeCredential({
+  credential,
+  onDone,
+}: {
+  credential: MintedAgent;
+  onDone: () => void;
+}) {
+  const [copied, setCopied] = useState(false);
+  const [saved, setSaved] = useState(false);
+  const [copyError, setCopyError] = useState(false);
+  const dialogRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const keepDialogOpen = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+      if (event.key !== "Tab") return;
+      const focusable = Array.from(
+        dialogRef.current?.querySelectorAll<HTMLElement>(
+          'button:not([disabled]), input:not([disabled])'
+        ) ?? []
+      );
+      if (focusable.length === 0) return;
+      const first = focusable[0]!;
+      const last = focusable[focusable.length - 1]!;
+      if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+    window.addEventListener("keydown", keepDialogOpen, true);
+    return () => window.removeEventListener("keydown", keepDialogOpen, true);
+  }, []);
+
+  async function copyCredential() {
+    try {
+      await navigator.clipboard.writeText(credential.cookie);
+      setCopied(true);
+      setCopyError(false);
+    } catch {
+      setCopyError(true);
+    }
+  }
+
+  return createPortal(
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="one-time-credential-title"
+      className="fixed inset-0 z-[60] flex items-center justify-center bg-black/60 p-4"
+    >
+      <div
+        ref={dialogRef}
+        className="w-full max-w-md rounded-xl border border-border bg-surface p-5 shadow-[0_16px_48px_rgba(0,0,0,0.5)]"
+      >
+        <h3 id="one-time-credential-title" className="text-base font-semibold text-foreground">
+          Save this credential now
+        </h3>
+        <p className="mt-2 text-sm font-medium text-destructive">
+          This is the only time you will see this value.
+        </p>
+        <p className="mt-1 text-xs text-muted-foreground">
+          Store it somewhere safe before continuing. It cannot be recovered later.
+        </p>
+        <div className="mt-4 rounded-lg border border-border-subtle bg-background p-3">
+          <code className="block break-all text-xs text-foreground">{credential.cookie}</code>
+        </div>
+        <button
+          autoFocus
+          type="button"
+          onClick={() => void copyCredential()}
+          className="mt-3 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-primary"
+        >
+          {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+          {copied ? "Copied" : "Copy credential"}
+        </button>
+        {copyError ? (
+          <p role="alert" className="mt-2 text-xs text-destructive">
+            Copy failed. Select the value above and copy it manually.
+          </p>
+        ) : null}
+        <label className="mt-4 flex items-start gap-2 text-xs text-foreground">
+          <input
+            type="checkbox"
+            checked={saved}
+            onChange={(event) => setSaved(event.target.checked)}
+            className="mt-0.5"
+          />
+          I have saved this credential somewhere safe.
+        </label>
+        <button
+          type="button"
+          disabled={!saved}
+          onClick={onDone}
+          className="mt-3 w-full rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:brightness-110 disabled:opacity-50"
+        >
+          Done
+        </button>
+      </div>
+    </div>,
+    document.body
+  );
+}

package/src/components/settings/settings-panel.tsx

@@ -1,8 +1,9 @@
 import { Suspense, lazy } from "react";
-import { KeyRound, Puzzle, SlidersHorizontal } from "lucide-react";
+import { KeyRound, Laptop, Puzzle, SlidersHorizontal } from "lucide-react";
 import { useUIStore, type SettingsTab } from "../../stores/ui-store.js";
 import { SlidePanel } from "../layout/slide-panel.js";
 import { cn } from "../../lib/utils.js";
+import { usePrincipalStore } from "../../stores/principal-store.js";
 
 /**
  * Each tab is fetched the first time it is opened. Settings is the largest
@@ -13,12 +14,14 @@ import { cn } from "../../lib/utils.js";
  */
 const ModelsTab = lazy(() => import("./models-tab.js").then((m) => ({ default: m.ModelsTab })));
 const PasskeyTab = lazy(() => import("./passkey-tab.js").then((m) => ({ default: m.PasskeyTab })));
+const DevicesAgentsTab = lazy(() => import("./devices-agents-tab.js").then((m) => ({ default: m.DevicesAgentsTab })));
 const SkillsTab = lazy(() => import("./skills-tab.js").then((m) => ({ default: m.SkillsTab })));
 
 const TABS: Array<{ id: SettingsTab; label: string; icon: typeof KeyRound }> = [
   { id: "models", label: "Models", icon: SlidersHorizontal },
   { id: "skills", label: "Skills", icon: Puzzle },
   { id: "security", label: "Security", icon: KeyRound },
+  { id: "devices", label: "Devices & agents", icon: Laptop },
 ];
 
 /**
@@ -35,19 +38,29 @@ export function SettingsPanel({
 }) {
   const tab = useUIStore((s) => s.settingsTab);
   const setTab = useUIStore((s) => s.setSettingsTab);
+  const mintPending = usePrincipalStore((s) => s.mintPending);
+  const oneTimeCredential = usePrincipalStore((s) => s.oneTimeCredential);
+  const credentialProtected = mintPending || oneTimeCredential !== null;
+
+  function closeIfSafe() {
+    if (!credentialProtected) onClose();
+  }
 
   return (
-    <SlidePanel open={open} onClose={onClose} title="Settings">
+    <SlidePanel open={open} onClose={closeIfSafe} title="Settings" wide>
       <div className="flex h-full flex-col">
         <div className="flex shrink-0 gap-1 border-b border-border px-2 pt-2">
           {TABS.map(({ id, label, icon: Icon }) => (
             <button
               key={id}
-              onClick={() => setTab(id)}
+              onClick={() => {
+                if (!credentialProtected) setTab(id);
+              }}
+              disabled={credentialProtected && tab !== id}
               aria-selected={tab === id}
               role="tab"
               className={cn(
-                "flex items-center gap-1.5 rounded-t-lg px-3 py-2 text-xs font-medium transition-colors",
+                "flex items-center gap-1.5 rounded-t-lg px-3 py-2 text-xs font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50",
                 tab === id
                   ? "border-b-2 border-primary text-foreground"
                   : "text-muted-foreground hover:text-foreground"
@@ -65,8 +78,10 @@ export function SettingsPanel({
               <ModelsTab active={open && tab === "models"} />
             ) : tab === "skills" ? (
               <SkillsTab active={open && tab === "skills"} />
-            ) : (
+            ) : tab === "security" ? (
               <PasskeyTab active={open && tab === "security"} />
+            ) : (
+              <DevicesAgentsTab active={open && tab === "devices"} />
             )}
           </Suspense>
         </div>