@schlessera/brain-ui-react 0.34.1 → 0.36.0

package/src/components/chat/renderers/index.ts

@@ -2,20 +2,25 @@
 // import line + registerToolRenderers call here (React.lazy for heavy packs).
 // Runtime plugin loading into the compiled PWA is deliberately not supported.
 
-import { registerToolRenderers } from "@schlessera/brain-ui-sdk/client";
+import { defaultToolRendererRegistry, type ToolRendererRegistry } from "@schlessera/brain-ui-sdk/client";
 import { claudeToolPack } from "./claude-tools.js";
 import { piToolPack } from "./pi-tools.js";
 import { genericToolPack, GENERIC_RENDERER } from "./generic.js";
+import { brainUiToolPack } from "./brain-ui-tools.js";
 
-let registered = false;
-
-/** Register the built-in packs once (idempotent). */
-export function registerBuiltinRenderers(): void {
-  if (registered) return;
-  registered = true;
-  registerToolRenderers(claudeToolPack);
-  registerToolRenderers(piToolPack);
-  registerToolRenderers(genericToolPack);
+/**
+ * Register the built-in packs (idempotent).
+ *
+ * Idempotence belongs to the REGISTRY, which dedupes by pack identity, not to
+ * a module-level `registered` latch here: a latch survives
+ * `resetToolRenderers()`, so the first reset anywhere — one story, one test —
+ * permanently un-registered the builtins for everything that ran after it.
+ */
+export function registerBuiltinRenderers(registry: ToolRendererRegistry = defaultToolRendererRegistry): void {
+  registry.register(brainUiToolPack);
+  registry.register(claudeToolPack);
+  registry.register(piToolPack);
+  registry.register(genericToolPack);
 }
 
 export { GENERIC_RENDERER };

package/src/components/chat/session-drawer.tsx

@@ -1,9 +1,8 @@
 import { useState, useEffect } from "react";
-import { Plus, Loader2 } from "lucide-react";
-import { api } from "../../lib/api-client.js";
+import { useBrainUiRoot } from "../../root-context.js";
 import { useChatStore } from "../../stores/chat-store.js";
 import { SlidePanel } from "../layout/slide-panel.js";
-import { cn } from "../../lib/utils.js";
+import { SessionList } from "./session-list.js";
 import { formatRelativeTime } from "./tool-views.js";
 
 interface SessionInfo {
@@ -19,6 +18,10 @@ interface GroupedSessions {
   sessions: SessionInfo[];
 }
 
+/**
+ * The container (S7): the sessions request, the retry counter and the
+ * chat-store reads live here; `SessionList` draws the rows.
+ */
 export function SessionDrawer({
   open,
   onClose,
@@ -28,8 +31,12 @@ export function SessionDrawer({
   onClose: () => void;
   onResume: (sessionId: string) => void;
 }) {
+  const root = useBrainUiRoot();
+  const api = root.api;
   const [sessions, setSessions] = useState<SessionInfo[]>([]);
   const [loading, setLoading] = useState(false);
+  const [warning, setWarning] = useState<string | null>(null);
+  const [retry, setRetry] = useState(0);
   const clearMessages = useChatStore((s) => s.clearMessages);
   const currentSessionId = useChatStore((s) => s.activeSessionId);
   const runStates = useChatStore((s) => s.runStates);
@@ -41,150 +48,65 @@ export function SessionDrawer({
   const backgroundSessionId =
     Object.keys(runStates).find((id) => id !== currentSessionId) ?? null;
 
+  useEffect(() => { setSessions([]); setWarning(null); }, [root]);
+
   useEffect(() => {
-    if (open) {
-      setLoading(true);
-      api
-        .sessions()
-        .then((data) => setSessions(data.sessions))
-        .catch(() => setSessions([]))
-        .finally(() => setLoading(false));
-    }
-  }, [open]);
+    if (!open) return;
+    let active = true;
+    setLoading(true);
+    setWarning(null);
+    api.sessions()
+      .then((data) => {
+        if (!active) return;
+        setSessions(data.sessions);
+        setWarning(data.unavailableBackends?.length
+          ? "Some session histories are unavailable. Showing available sessions."
+          : null);
+      })
+      .catch(() => {
+        if (active) setWarning("Could not refresh sessions. Please retry.");
+      })
+      .finally(() => { if (active) setLoading(false); });
+    return () => { active = false; };
+  }, [open, retry, root, api]);
 
-  const groups = groupSessionsByDate(sessions);
+  const groups = groupSessionsByDate(sessions).map((group) => ({
+    label: group.label,
+    sessions: group.sessions.map((session) => {
+      const state = runStates[session.id];
+      return {
+        id: session.id,
+        title: session.title,
+        when: formatRelativeTime(session.lastActiveAt),
+        cost: session.totalCostUsd != null && session.totalCostUsd > 0 ? `$${session.totalCostUsd.toFixed(2)}` : null,
+        run: state === "streaming" || state === "queued" ? state : null,
+        note: queueNotes[session.id],
+      };
+    }),
+  }));
 
   return (
     <SlidePanel open={open} onClose={onClose} title="Sessions" wide>
-      <div className="flex h-full flex-col">
-        {/* New chat button */}
-        <div className="p-4">
-          <button
-            onClick={() => {
-              clearMessages();
-              onClose();
-            }}
-            className="flex w-full items-center justify-center gap-2 rounded-xl border-2 border-dashed border-primary/30 py-3 text-[13px] font-medium text-primary transition-all hover:border-primary/50 hover:bg-primary/5"
-          >
-            <Plus className="h-4 w-4" />
-            New conversation
-          </button>
-        </div>
-
-        {/* Session list */}
-        <div className="flex-1 overflow-y-auto px-2 pb-4">
-          {/* Active session banner */}
-          {backgroundSessionId && (
-            <div className="px-2 pb-2">
-              <button
-                onClick={() => {
-                  onResume(backgroundSessionId);
-                  onClose();
-                }}
-                className="flex w-full items-center gap-3 rounded-lg border border-primary/30 bg-primary/5 px-3 py-2.5 text-left transition-colors hover:bg-primary/10"
-              >
-                <span
-                  className="h-2 w-2 shrink-0 rounded-full bg-primary"
-                  style={{ animation: "breathe 2s ease-in-out infinite" }}
-                />
-                <div className="min-w-0">
-                  <div className="truncate text-[13px] font-medium text-foreground">
-                    Session running...
-                  </div>
-                  <div className="text-[11px] text-primary">
-                    Tap to reattach
-                  </div>
-                </div>
-              </button>
-            </div>
-          )}
-
-          {loading ? (
-            <div className="flex items-center justify-center py-12 text-muted-foreground">
-              <Loader2 className="h-4 w-4 animate-spin" />
-            </div>
-          ) : sessions.length === 0 && !backgroundSessionId ? (
-            <p className="py-12 text-center text-xs text-muted-foreground">
-              No sessions yet
-            </p>
-          ) : (
-            groups.map((group) => (
-              <div key={group.label}>
-                <div className="px-3 py-2 font-[family-name:var(--font-mono)] text-[10px] font-medium uppercase tracking-widest text-muted-foreground/40">
-                  {group.label}
-                </div>
-                {group.sessions.map((session) => (
-                  <button
-                    key={session.id}
-                    onClick={() => {
-                      onResume(session.id);
-                      onClose();
-                    }}
-                    className={cn(
-                      "w-full rounded-lg px-3 py-2.5 text-left transition-colors hover:bg-surface-raised",
-                      session.id === currentSessionId &&
-                        "border-l-2 border-primary bg-primary/5"
-                    )}
-                  >
-                    <div className="flex items-center gap-2">
-                      <div className="min-w-0 flex-1 truncate text-[13px] font-medium text-foreground">
-                        {session.title || "Untitled"}
-                      </div>
-                      <RunBadge state={runStates[session.id]} note={queueNotes[session.id]} />
-                    </div>
-                    <div className="mt-0.5 flex items-center gap-2">
-                      <span className="text-[11px] text-muted-foreground">
-                        {formatRelativeTime(session.lastActiveAt)}
-                      </span>
-                      {session.totalCostUsd != null &&
-                        session.totalCostUsd > 0 && (
-                          <span className="text-[11px] text-muted-foreground/40">
-                            ${session.totalCostUsd.toFixed(2)}
-                          </span>
-                        )}
-                    </div>
-                  </button>
-                ))}
-              </div>
-            ))
-          )}
-        </div>
-      </div>
+      <SessionList
+        groups={groups}
+        loading={loading}
+        warning={warning}
+        currentSessionId={currentSessionId}
+        backgroundSessionId={backgroundSessionId}
+        onNew={() => {
+          clearMessages();
+          onClose();
+        }}
+        onResume={(id) => {
+          onResume(id);
+          onClose();
+        }}
+        onRetry={() => setRetry((value) => value + 1)}
+      />
     </SlidePanel>
   );
 }
 
-/** Live run-state pill on a session row (streaming / queued). */
-function RunBadge({
-  state,
-  note,
-}: {
-  state?: "streaming" | "queued" | "idle";
-  /** Host's queue-pressure note, present only once the queue is heavy. */
-  note?: string;
-}) {
-  if (state !== "streaming" && state !== "queued") return null;
-  const running = state === "streaming";
-  // A note only ever accompanies a queue under pressure, so it doubles as the
-  // "this is getting heavy" signal: the pill turns red and says how much.
-  const heavy = !running && Boolean(note);
-  return (
-    <span
-      title={note}
-      className={cn(
-        "shrink-0 rounded-full px-1.5 py-0.5 text-[9px] font-medium uppercase tracking-wide",
-        running
-          ? "bg-primary/15 text-primary"
-          : heavy
-            ? "bg-destructive/15 text-destructive"
-            : "bg-amber-500/15 text-amber-500"
-      )}
-    >
-      {running ? "Running" : "Queued"}
-    </span>
-  );
-}
-
 function groupSessionsByDate(sessions: SessionInfo[]): GroupedSessions[] {
   const dayMs = 86400000;
   const today = new Date();

package/src/components/chat/session-list.tsx

@@ -0,0 +1,113 @@
+import { Button, Callout, Label, ListRow, Placeholder } from "@schlessera/brain-ui-kit";
+import type { Tone } from "@schlessera/brain-ui-kit";
+
+/**
+ * The session drawer's body, rendered from props (S7, the `chat` directory).
+ * `SessionDrawer` is the container: it owns the sessions request, the retry
+ * counter, the chat-store reads (which session is in view, which are
+ * running or queued) and the drawer chrome; this owns the rows.
+ *
+ * A session is the kit's card `ListRow`: title, when it was last active and
+ * what it cost as the subtitle, the live run state as the trailing value
+ * (amber "running", amber "queued", red once the host's queue note says the
+ * queue is heavy), and `selected` for the one in view — teal, "the choice
+ * belongs to the user". A background session still running is the first
+ * row, breathing, and taps to reattach.
+ */
+export interface SessionRowData {
+  id: string;
+  title: string | null;
+  /** Already formatted: "2h ago". */
+  when: string;
+  /** Already formatted: "$0.12", or null when nothing to say. */
+  cost: string | null;
+  run: "streaming" | "queued" | null;
+  /** The host's queue-pressure note; present only once the queue is heavy. */
+  note?: string;
+}
+
+export interface SessionGroupData {
+  label: string;
+  sessions: SessionRowData[];
+}
+
+export interface SessionListProps {
+  groups: SessionGroupData[];
+  loading: boolean;
+  warning: string | null;
+  currentSessionId: string | null;
+  /** A running session other than the one in view, reattachable. */
+  backgroundSessionId: string | null;
+  onNew: () => void;
+  onResume: (sessionId: string) => void;
+  onRetry: () => void;
+}
+
+export function SessionList(p: SessionListProps) {
+  const empty = p.groups.length === 0 && !p.backgroundSessionId;
+  return (
+    <div className="flex h-full flex-col">
+      <div className="p-4">
+        <Button label="New conversation" icon="compose" tone="suggest" size="md" center onClick={p.onNew} />
+      </div>
+
+      <div className="flex flex-1 flex-col gap-2 overflow-y-auto px-3 pb-4">
+        {p.backgroundSessionId && (
+          <ListRow
+            variant="card"
+            icon="run"
+            iconTone="amber"
+            title="Session running…"
+            subtitle="Tap to reattach"
+            value="live"
+            valueTone="amber"
+            selected
+            onClick={() => p.onResume(p.backgroundSessionId!)}
+          />
+        )}
+
+        {p.warning && (
+          <div role="status" className="flex flex-col gap-2">
+            <Callout tone="gold" variant="boxed" icon="unverified" text={p.warning} />
+            <div className="flex justify-end">
+              <Button label="Retry" icon="retry" tone="ghost" size="sm" block={false} onClick={p.onRetry} />
+            </div>
+          </div>
+        )}
+
+        {p.loading ? (
+          <Placeholder variant="loading" lines={3} bordered={false} pad={4} />
+        ) : empty ? (
+          <Placeholder variant="empty" message={p.warning ? "No sessions available" : "No sessions yet"} icon="chat" />
+        ) : (
+          p.groups.map((group) => (
+            <section key={group.label} className="flex flex-col gap-1.5">
+              <div className="px-1 pt-2">
+                <Label text={group.label} />
+              </div>
+              {group.sessions.map((session) => {
+                const tone: Tone | undefined =
+                  session.run === "streaming" ? "amber" : session.run === "queued" ? (session.note ? "red" : "amber") : undefined;
+                return (
+                  <span key={session.id} title={session.note} className="flex">
+                    <ListRow
+                      variant="card"
+                      icon="chat"
+                      iconTone={session.id === p.currentSessionId ? "teal" : "neutral"}
+                      title={session.title || "Untitled"}
+                      subtitle={session.cost ? `${session.when} · ${session.cost}` : session.when}
+                      value={session.run === "streaming" ? "running" : session.run === "queued" ? "queued" : undefined}
+                      valueTone={tone}
+                      selected={session.id === p.currentSessionId}
+                      onClick={() => p.onResume(session.id)}
+                    />
+                  </span>
+                );
+              })}
+            </section>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/chat/share-block.tsx

@@ -1,4 +1,5 @@
-import { uiConfig } from "../../config.js";
+import type { BrainUiRoot } from "../../root.js";
+import { useBrainUiRoot } from "../../root-context.js";
 import { useRef } from "react";
 import { BrainMarkdown } from "./brain-markdown.js";
 import { ShareMenu, type ShareOption } from "../share/share-menu.js";
@@ -26,30 +27,31 @@ interface ShareBlockProps {
 }
 
 export function ShareBlock({ body, format = "image", title }: ShareBlockProps) {
+  const root = useBrainUiRoot();
   const bodyRef = useRef<HTMLDivElement>(null);
   const filename = sanitizeFilename(title ?? "share");
 
-  const primary = makeAction(format, body, filename, title, bodyRef);
+  const primary = makeAction(root, format, body, filename, title, bodyRef);
   const secondary: ShareOption[] = ORDER.filter((f) => f !== format).map((f) =>
-    makeAction(f, body, filename, title, bodyRef)
+    makeAction(root, f, body, filename, title, bodyRef)
   );
 
   return (
-    <div className="my-4 overflow-hidden rounded-lg border border-primary/30 bg-primary/[0.04]">
-      <div className="flex items-center justify-between gap-3 border-b border-primary/20 bg-primary/[0.06] px-3 py-2">
+    <div className="my-4 overflow-hidden rounded-lg border border-primary/30 bg-primary-fill/[0.04]">
+      <div className="flex items-center justify-between gap-3 border-b border-primary/20 bg-primary-fill/[0.06] px-3 py-2">
         <div className="flex min-w-0 items-center gap-2 text-xs">
           <Share2 className="h-3.5 w-3.5 shrink-0 text-primary/80" />
           <span className="truncate font-medium text-primary/90">
             {title ?? "Share"}
           </span>
-          <span className="rounded-full bg-primary/15 px-2 py-0.5 text-[10px] uppercase tracking-wide text-primary/80">
+          <span className="rounded-full bg-primary-fill/15 px-2 py-0.5 text-[10px] uppercase tracking-wide text-primary">
             {format}
           </span>
         </div>
         <div className="flex items-center gap-1">
           <button
             onClick={() => void primary.run()}
-            className="rounded-md bg-primary px-2.5 py-1 text-[11px] font-medium text-primary-foreground transition-opacity hover:opacity-90"
+            className="rounded-md bg-primary-fill px-2.5 py-1 text-[11px] font-medium text-primary-foreground transition-opacity hover:opacity-90"
           >
             {primary.label}
           </button>
@@ -64,6 +66,7 @@ export function ShareBlock({ body, format = "image", title }: ShareBlockProps) {
 }
 
 function makeAction(
+  root: BrainUiRoot,
   fmt: ShareBlockFormat,
   body: string,
   filename: string,
@@ -73,11 +76,12 @@ function makeAction(
   return {
     id: fmt,
     label: FORMAT_LABELS[fmt],
-    run: () => runFormat(fmt, body, filename, title, bodyRef),
+    run: () => runFormat(root, fmt, body, filename, title, bodyRef),
   };
 }
 
 async function runFormat(
+  root: BrainUiRoot,
   fmt: ShareBlockFormat,
   body: string,
   filename: string,
@@ -86,22 +90,22 @@ async function runFormat(
 ): Promise<boolean> {
   switch (fmt) {
     case "image":
-      return renderAndShare({
+      return renderAndShare(root, {
         // The render page runs without JavaScript — mermaid fences are
         // pre-rendered to inline SVG on the client.
         content: await inlineMermaidDiagrams(body),
         contentType: "markdown",
         format: "png",
         filename,
-        title: title ?? uiConfig.shareTitle,
+        title: title ?? root.config.shareTitle,
       });
     case "pdf":
-      return renderAndShare({
+      return renderAndShare(root, {
         content: await inlineMermaidDiagrams(body),
         contentType: "markdown",
         format: "pdf",
         filename,
-        title: title ?? uiConfig.shareTitle,
+        title: title ?? root.config.shareTitle,
       });
     case "text":
       return shareText({ text: stripMarkdown(body), title });

package/src/components/chat/share-card.tsx

@@ -106,7 +106,7 @@ function ShareCard({
           type="button"
           onClick={onConfirm}
           disabled={busy}
-          className="flex items-center gap-2 rounded-lg bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground disabled:opacity-60"
+          className="flex items-center gap-2 rounded-lg bg-primary-fill px-3 py-1.5 text-sm font-medium text-primary-foreground disabled:opacity-60"
         >
           {busy && <Loader2 className="h-3.5 w-3.5 animate-spin" />}
           Add to brain
@@ -145,7 +145,7 @@ export function ShareIntake() {
   return (
     <>
       {error && (
-        <div className="mb-2 flex items-start gap-2 rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2 text-[11px] text-destructive">
+        <div className="mb-2 flex items-start gap-2 rounded-lg border border-destructive/30 bg-destructive-fill/5 px-3 py-2 text-[11px] text-destructive">
           <div className="flex-1">{error}</div>
           <button
             type="button"

package/src/components/chat/subagent-view.tsx

@@ -88,7 +88,7 @@ export function SubagentView({
           </div>
         </div>
         {running && (
-          <span className="inline-block h-2 w-2 animate-pulse rounded-full bg-primary" />
+          <span className="inline-block h-2 w-2 animate-pulse rounded-full bg-primary-mark" />
         )}
       </div>
 
@@ -96,7 +96,7 @@ export function SubagentView({
         {approvalsHere.map((tool) => (
           <div
             key={tool.id}
-            className="rounded-lg border-2 border-primary/40 bg-primary/5 p-3 text-xs"
+            className="rounded-lg border-2 border-primary/40 bg-primary-fill/5 p-3 text-xs"
           >
             <div className="mb-2 font-medium">
               Approval needed: {getToolLabel(tool.name)}
@@ -105,13 +105,13 @@ export function SubagentView({
               <div className="flex gap-2">
                 <button
                   onClick={() => onApproval(tool.id, true)}
-                  className="flex items-center gap-1.5 rounded-lg bg-primary px-4 py-1.5 text-xs font-medium text-primary-foreground hover:brightness-110"
+                  className="flex items-center gap-1.5 rounded-lg bg-primary-fill px-4 py-1.5 text-xs font-medium text-primary-foreground hover:brightness-110"
                 >
                   <Check className="h-3 w-3" /> Allow
                 </button>
                 <button
                   onClick={() => onApproval(tool.id, false)}
-                  className="flex items-center gap-1.5 rounded-lg border border-destructive/30 px-4 py-1.5 text-xs font-medium text-destructive hover:bg-destructive/10"
+                  className="flex items-center gap-1.5 rounded-lg border border-destructive/30 px-4 py-1.5 text-xs font-medium text-destructive hover:bg-destructive-fill/10"
                 >
                   <X className="h-3 w-3" /> Deny
                 </button>