@schlessera/brain-ui-react 0.34.1 → 0.36.0

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

@@ -1,10 +1,14 @@
+import { useBrainUiRoot } from "../../root-context.js";
 import { useState, useEffect, useRef } from "react";
-import { Loader2, CheckCircle2, XCircle } from "lucide-react";
 import { SlidePanel } from "../layout/slide-panel.js";
 import { linkifyPaths } from "../chat/brain-markdown.js";
+import { StreamingOutput, type StreamState } from "./streaming-output.js";
 
-type StreamState = "idle" | "running" | "success" | "error" | "cancelled";
-
+/**
+ * The container (S6) for a streamed backend job: the request, the SSE reader
+ * loop, the abort controller and the "still my stream" checks live here;
+ * `StreamingOutput` draws from props.
+ */
 export function StreamingPanel({
   open,
   onClose,
@@ -15,9 +19,11 @@ export function StreamingPanel({
   open: boolean;
   onClose: () => void;
   title: string;
+  /** Backend-relative path, resolved against the current root. */
   endpoint: string;
   method?: string;
 }) {
+  const root = useBrainUiRoot();
   const [state, setState] = useState<StreamState>("idle");
   const [lines, setLines] = useState<string[]>([]);
   const scrollRef = useRef<HTMLDivElement>(null);
@@ -29,28 +35,41 @@ export function StreamingPanel({
     setState("running");
     setLines([]);
 
+    let disposed = false;
+    let reader: ReadableStreamDefaultReader<Uint8Array> | undefined;
     const controller = new AbortController();
+    const cancelReader = () => { void reader?.cancel().catch(() => {}); };
+    controller.signal.addEventListener("abort", cancelReader);
     controllerRef.current = controller;
 
     (async () => {
       try {
-        const res = await fetch(endpoint, {
+        const res = await root.request(root.backendUrl(endpoint), {
           method,
           signal: controller.signal,
         });
 
+        if (disposed || controller.signal.aborted) {
+          await res.body?.cancel();
+          return;
+        }
+
         if (!res.ok || !res.body) {
+          const body = await res.json().catch(() => null);
+          if (disposed || controller.signal.aborted) return;
           setState("error");
-          setLines((l) => [...l, `HTTP ${res.status}: ${res.statusText}`]);
+          const message = typeof body?.error === "string" ? body.error : `HTTP ${res.status}: ${res.statusText}`;
+          if (!controller.signal.aborted) setLines((l) => [...l, message]);
           return;
         }
 
-        const reader = res.body.getReader();
+        reader = res.body.getReader();
         const decoder = new TextDecoder();
         let buffer = "";
 
         while (true) {
           const { done, value } = await reader.read();
+          if (disposed || controller.signal.aborted) return;
           if (done) break;
 
           buffer += decoder.decode(value, { stream: true });
@@ -75,6 +94,7 @@ export function StreamingPanel({
           }
         }
       } catch (err: any) {
+        if (disposed || controller.signal.aborted) return;
         if (err.name === "AbortError") {
           setLines((l) => [...l, "Cancelled."]);
           setState("cancelled");
@@ -83,15 +103,18 @@ export function StreamingPanel({
           setLines((l) => [...l, `Error: ${err.message}`]);
         }
       } finally {
-        controllerRef.current = null;
+        controller.signal.removeEventListener("abort", cancelReader);
+        reader?.releaseLock();
+        if (controllerRef.current === controller) controllerRef.current = null;
       }
     })();
 
     return () => {
+      disposed = true;
       controller.abort();
-      controllerRef.current = null;
+      if (controllerRef.current === controller) controllerRef.current = null;
     };
-  }, [open, endpoint, method]);
+  }, [open, endpoint, method, root]);
 
   // Auto-scroll
   useEffect(() => {
@@ -101,68 +124,18 @@ export function StreamingPanel({
   const isRunning = state === "running";
 
   return (
-    <SlidePanel
-      open={open}
-      onClose={isRunning ? () => {} : onClose}
-      title={title}
-    >
-      <div className="flex h-full flex-col">
-        {/* Status bar */}
-        <div className="flex items-center gap-2 border-b border-border px-5 py-2">
-          {isRunning && (
-            <Loader2 className="h-3.5 w-3.5 animate-spin text-primary" />
-          )}
-          {state === "success" && (
-            <CheckCircle2 className="h-3.5 w-3.5 text-green-500" />
-          )}
-          {(state === "error" || state === "cancelled") && (
-            <XCircle className="h-3.5 w-3.5 text-destructive" />
-          )}
-          <span className="text-xs text-muted-foreground">
-            {isRunning
-              ? "Running..."
-              : state === "success"
-                ? "Complete"
-                : state === "error"
-                  ? "Failed"
-                  : state === "cancelled"
-                    ? "Cancelled"
-                    : "Ready"}
-          </span>
-        </div>
-
-        {/* Log output */}
-        <div className="flex-1 overflow-y-auto p-4 font-[family-name:var(--font-mono)] text-xs leading-relaxed text-muted-foreground">
-          {lines.map((line, i) => (
-            <div key={i} className="whitespace-pre-wrap">
-              {linkifyPaths(line)}
-            </div>
-          ))}
-          {isRunning && lines.length === 0 && (
-            <div className="text-muted-foreground/50">Starting...</div>
-          )}
-          <div ref={scrollRef} />
-        </div>
-
-        {/* Footer */}
-        <div className="border-t border-border px-5 py-3 flex justify-end">
-          {isRunning ? (
-            <button
-              onClick={() => controllerRef.current?.abort()}
-              className="rounded-lg border border-destructive/30 px-4 py-1.5 text-xs font-medium text-destructive transition-colors hover:bg-destructive/10"
-            >
-              Cancel
-            </button>
-          ) : (
-            <button
-              onClick={onClose}
-              className="rounded-lg bg-surface-raised px-4 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-surface-overlay"
-            >
-              Close
-            </button>
-          )}
-        </div>
-      </div>
+    <SlidePanel open={open} onClose={isRunning ? () => {} : onClose} title={title}>
+      <StreamingOutput
+        state={state}
+        lines={lines.map((line) => linkifyPaths(line))}
+        anchor={<div ref={scrollRef} />}
+        onCancel={() => {
+          controllerRef.current?.abort();
+          setState("cancelled");
+          setLines((lines) => [...lines, "Cancelled."]);
+        }}
+        onClose={onClose}
+      />
     </SlidePanel>
   );
 }

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

@@ -0,0 +1,112 @@
+import { Button, Placeholder, StatusDot } from "@schlessera/brain-ui-kit";
+import type { ReactNode } from "react";
+import type { Tone } from "@schlessera/brain-ui-kit";
+
+/**
+ * What a streamed backend job looks like while it runs and once it has
+ * finished — rendered from props (S6). `StreamingPanel` and `WhatsupPanel`
+ * are the containers: they own the request, the reader loop, the abort
+ * controller and the "is this still my stream" checks; the two views here
+ * own the status row, the output area and the one button in the footer.
+ *
+ * `state` is the job's, in the container's vocabulary: `running` is the only
+ * state with a Cancel; every other state offers Close. The status dot is the
+ * kit's — amber breathing while running, teal when it completed, red for a
+ * failure or a cancellation — and the row is a polite live region so a
+ * screen reader hears "Complete" once, not every line.
+ */
+export type StreamState = "idle" | "running" | "success" | "error" | "cancelled";
+
+const STATUS: Record<StreamState, { tone: Tone; pulse: boolean; text: string }> = {
+  idle: { tone: "neutral", pulse: false, text: "Ready" },
+  running: { tone: "amber", pulse: true, text: "Running..." },
+  success: { tone: "teal", pulse: false, text: "Complete" },
+  error: { tone: "red", pulse: false, text: "Failed" },
+  cancelled: { tone: "red", pulse: false, text: "Cancelled" },
+};
+
+export interface StreamingOutputProps {
+  state: StreamState;
+  /** The job's lines so far, already turned into nodes by the container (paths linkified). */
+  lines: ReactNode[];
+  onCancel: () => void;
+  onClose: () => void;
+  /** Wire to the scroll anchor the container keeps in view. */
+  anchor?: ReactNode;
+}
+
+export function StreamingOutput(p: StreamingOutputProps) {
+  const running = p.state === "running";
+  const s = STATUS[p.state];
+  return (
+    <div className="flex h-full flex-col">
+      <div className="flex items-center gap-2 border-b border-border px-5 py-2" aria-live="polite">
+        <StatusDot tone={s.tone} pulse={s.pulse} size={7} />
+        <span className="text-xs text-muted-foreground">{s.text}</span>
+      </div>
+
+      <div className="flex-1 overflow-y-auto p-4 font-[family-name:var(--font-mono)] text-xs leading-relaxed text-muted-foreground">
+        {p.lines.map((line, i) => (
+          <div key={i} className="whitespace-pre-wrap">
+            {line}
+          </div>
+        ))}
+        {running && p.lines.length === 0 && <div className="text-muted-foreground/50">Starting...</div>}
+        {p.anchor}
+      </div>
+
+      <StreamFooter running={running} onCancel={p.onCancel} onClose={p.onClose} />
+    </div>
+  );
+}
+
+/**
+ * The briefing: one document rather than a log, so it loads behind a skeleton
+ * and renders as prose once it has all arrived. `content` is the container's
+ * rendered markdown node; the view does not know what it is made of.
+ */
+export interface BriefingOutputProps {
+  state: "loading" | "done" | "error" | "cancelled";
+  content: ReactNode;
+  onCancel: () => void;
+  onClose: () => void;
+}
+
+export function BriefingOutput(p: BriefingOutputProps) {
+  const loading = p.state === "loading";
+  return (
+    <div className="flex h-full flex-col">
+      {(p.state === "error" || p.state === "cancelled") && (
+        <div className="flex items-center gap-2 border-b border-border px-5 py-2" aria-live="polite">
+          <StatusDot tone="red" pulse={false} size={7} />
+          <span className="text-xs text-muted-foreground">Failed</span>
+        </div>
+      )}
+
+      <div className="flex-1 overflow-y-auto p-5">
+        {loading ? (
+          <div className="flex flex-col gap-3">
+            <Placeholder variant="loading" lines={4} bordered={false} pad={0} />
+            <p className="text-sm text-muted-foreground">Generating briefing...</p>
+          </div>
+        ) : (
+          p.content
+        )}
+      </div>
+
+      <StreamFooter running={loading} onCancel={p.onCancel} onClose={p.onClose} />
+    </div>
+  );
+}
+
+function StreamFooter({ running, onCancel, onClose }: { running: boolean; onCancel: () => void; onClose: () => void }) {
+  return (
+    <div className="flex justify-end border-t border-border px-5 py-3">
+      {running ? (
+        <Button label="Cancel" icon="cancel" tone="danger" size="sm" block={false} onClick={onCancel} />
+      ) : (
+        <Button label="Close" tone="quiet" size="sm" block={false} onClick={onClose} />
+      )}
+    </div>
+  );
+}

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

@@ -1,11 +1,16 @@
+import { useBrainUiRoot } from "../../root-context.js";
 import { useState, useEffect, useRef } from "react";
-import { Loader2, XCircle } from "lucide-react";
 import { SlidePanel } from "../layout/slide-panel.js";
 import { BrainMarkdown } from "../chat/brain-markdown.js";
-import { getBackendUrl } from "../../lib/backend.js";
+import { BriefingOutput } from "./streaming-output.js";
 
 type State = "loading" | "done" | "error" | "cancelled";
 
+/**
+ * The container (S6) for the briefing: the request, the SSE reader loop, the
+ * abort controller and the "still my stream" checks live here;
+ * `BriefingOutput` draws from props.
+ */
 export function WhatsupPanel({
   open,
   onClose,
@@ -13,6 +18,7 @@ export function WhatsupPanel({
   open: boolean;
   onClose: () => void;
 }) {
+  const root = useBrainUiRoot();
   const [state, setState] = useState<State>("loading");
   const [content, setContent] = useState("");
   const controllerRef = useRef<AbortController | null>(null);
@@ -23,29 +29,39 @@ export function WhatsupPanel({
     setState("loading");
     setContent("");
 
+    let disposed = false;
+    let reader: ReadableStreamDefaultReader<Uint8Array> | undefined;
     const controller = new AbortController();
+    const cancelReader = () => { void reader?.cancel().catch(() => {}); };
+    controller.signal.addEventListener("abort", cancelReader);
     controllerRef.current = controller;
 
     (async () => {
       try {
-        const res = await fetch(getBackendUrl("/api/brain/whatsup"), {
+        const res = await root.request(root.backendUrl("/api/brain/whatsup"), {
           method: "POST",
           signal: controller.signal,
         });
 
+        if (disposed || controller.signal.aborted) {
+          await res.body?.cancel();
+          return;
+        }
+
         if (!res.ok || !res.body) {
           setState("error");
           setContent(`HTTP ${res.status}: ${res.statusText}`);
           return;
         }
 
-        const reader = res.body.getReader();
+        reader = res.body.getReader();
         const decoder = new TextDecoder();
         let buffer = "";
         const lines: string[] = [];
 
         while (true) {
           const { done, value } = await reader.read();
+          if (disposed || controller.signal.aborted) return;
           if (done) break;
 
           buffer += decoder.decode(value, { stream: true });
@@ -72,6 +88,7 @@ export function WhatsupPanel({
 
         setContent(lines.join("\n"));
       } catch (err: any) {
+        if (disposed || controller.signal.aborted) return;
         if (err.name === "AbortError") {
           setState("cancelled");
           setContent("Cancelled.");
@@ -80,70 +97,31 @@ export function WhatsupPanel({
           setContent(`Error: ${err.message}`);
         }
       } finally {
-        controllerRef.current = null;
+        controller.signal.removeEventListener("abort", cancelReader);
+        reader?.releaseLock();
+        if (controllerRef.current === controller) controllerRef.current = null;
       }
     })();
 
     return () => {
+      disposed = true;
       controller.abort();
-      controllerRef.current = null;
+      if (controllerRef.current === controller) controllerRef.current = null;
     };
-  }, [open]);
-
-  const isLoading = state === "loading";
+  }, [open, root]);
 
   return (
-    <SlidePanel
-      open={open}
-      onClose={onClose}
-      title="Whatsup"
-      wide
-    >
-      <div className="flex h-full flex-col">
-        {/* Status bar (errors only — loading uses centered indicator) */}
-        {(state === "error" || state === "cancelled") && (
-          <div className="flex items-center gap-2 border-b border-border px-5 py-2">
-            <XCircle className="h-3.5 w-3.5 text-destructive" />
-            <span className="text-xs text-muted-foreground">Failed</span>
-          </div>
-        )}
-
-        {/* Content */}
-        <div className="flex-1 overflow-y-auto p-5">
-          {isLoading ? (
-            <div className="flex items-center justify-center h-32 text-muted-foreground text-sm">
-              <Loader2 className="h-5 w-5 animate-spin mr-2 text-primary" />
-              Generating briefing...
-            </div>
-          ) : (
-            <BrainMarkdown
-              content={content}
-              className="whatsup-briefing brain-prose"
-              entityTags
-              fileLinks
-            />
-          )}
-        </div>
-
-        {/* Footer */}
-        <div className="border-t border-border px-5 py-3 flex justify-end">
-          {isLoading ? (
-            <button
-              onClick={() => controllerRef.current?.abort()}
-              className="rounded-lg border border-destructive/30 px-4 py-1.5 text-xs font-medium text-destructive transition-colors hover:bg-destructive/10"
-            >
-              Cancel
-            </button>
-          ) : (
-            <button
-              onClick={onClose}
-              className="rounded-lg bg-surface-raised px-4 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-surface-overlay"
-            >
-              Close
-            </button>
-          )}
-        </div>
-      </div>
+    <SlidePanel open={open} onClose={onClose} title="Whatsup" wide>
+      <BriefingOutput
+        state={state}
+        content={<BrainMarkdown content={content} className="whatsup-briefing brain-prose" entityTags fileLinks />}
+        onCancel={() => {
+          controllerRef.current?.abort();
+          setState("cancelled");
+          setContent("Cancelled.");
+        }}
+        onClose={onClose}
+      />
     </SlidePanel>
   );
 }

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

@@ -0,0 +1,139 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { PrincipalSummary } from "../../lib/api-client.js";
+import { useBrainApi } from "../../root-context.js";
+import { formatRelativeTime } from "../../lib/format-time.js";
+import { usePrincipalStore } from "../../stores/principal-store.js";
+import { PrincipalList } from "./principal-list.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. This is the container (S7): the principals request, the mint
+ * through the principal store and the revoke with its confirm live here;
+ * `PrincipalList` draws the list and the form on the kit.
+ */
+export function DevicesAgentsTab({ active }: { active: boolean }) {
+  const api = useBrainApi();
+  const lifetime = useRef(0);
+  const request = useRef(0);
+  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);
+
+  const refresh = useCallback(async () => {
+    const generation = lifetime.current;
+    const token = ++request.current;
+    const current = () => generation === lifetime.current && token === request.current;
+    setLoading(true);
+    setLoadFailed(false);
+    setError(null);
+    try {
+      const data = await api.principals();
+      if (!current()) return;
+      setPrincipals(data.principals);
+      setEnabled(true);
+    } catch (err) {
+      if (!current()) return;
+      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 {
+      if (current()) setLoading(false);
+    }
+  }, [api]);
+
+  useEffect(() => {
+    lifetime.current++;
+    setPrincipals([]);
+    setLoading(false);
+    setEnabled(true);
+    setLoadFailed(false);
+    setError(null);
+    setLabel("");
+    setTtlDays(7);
+    if (active) void refresh();
+    const invalidate = () => { lifetime.current++; };
+    return invalidate;
+  }, [active, refresh]);
+
+  useEffect(() => {
+    if (!oneTimeCredential) return;
+    setLabel("");
+    if (active) void refresh();
+  }, [active, oneTimeCredential, refresh]);
+
+  function onMint() {
+    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;
+
+    const generation = lifetime.current;
+    setError(null);
+    try {
+      await api.principalRevoke(principal.id);
+      if (generation !== lifetime.current) return;
+      setPrincipals((rows) => rows.filter((row) => row.id !== principal.id));
+      if (principal.is_own) window.location.reload();
+    } catch (err) {
+      if (generation !== lifetime.current) return;
+      setError(err instanceof Error ? err.message : "Could not revoke access");
+    }
+  }
+
+  return (
+    <PrincipalList
+      state={loading ? "loading" : !enabled ? "unavailable" : loadFailed ? "error" : "ready"}
+      principals={principals.map((principal) => ({
+        id: principal.id,
+        label: displayLabel(principal.label),
+        kind: principal.kind,
+        isOwn: principal.is_own,
+        created: formatRelativeTime(principal.created_at),
+        lastSeen: principal.last_seen_at ? formatRelativeTime(principal.last_seen_at) : "Never",
+        expires: formatRelativeTime(principal.expires_at),
+      }))}
+      error={error ?? mintError}
+      label={label}
+      ttlDays={ttlDays}
+      minting={busy}
+      onLabel={setLabel}
+      onTtlDays={setTtlDays}
+      onMint={onMint}
+      onRevoke={(id) => {
+        const principal = principals.find((row) => row.id === id);
+        if (principal) void onRevoke(principal);
+      }}
+    />
+  );
+}