@schlessera/brain-ui-react 0.21.0 → 0.23.0

package/src/components/chat/risk-hints.ts

@@ -1,3 +1,4 @@
+import type { ToolSemantics } from "@schlessera/brain-ui-sdk/client";
 import type { ToolCall } from "../../stores/chat-store.js";
 
 // ============================================================
@@ -6,7 +7,9 @@ import type { ToolCall } from "../../stores/chat-store.js";
 //
 // Non-blocking advisories surfaced in the pending-approval detail so a human
 // notices known-risky shapes before hitting Allow. Detection only — the human
-// still decides. Each rule is { test, message } so the list is easy to extend.
+// still decides. Rules test backend-neutral SEMANTICS (the command line run,
+// the path written), supplied by the tool's renderer, so a rule written once
+// covers Claude's `Bash`, pi's `bash`, and any future backend's equivalent.
 
 /**
  * Does this path resolve inside the brain repo?
@@ -31,8 +34,58 @@ function asString(v: unknown): string {
   return typeof v === "string" ? v : "";
 }
 
+/** The extracted, plain-value meaning risk rules test against. */
+export type ResolvedSemantics = {
+  /** Shell command line the call executes, or "". */
+  command: string;
+  /** Filesystem path the call writes, or "". */
+  writePath: string;
+  /** Call explicitly opts out of its backend's sandbox. */
+  unsandboxed: boolean;
+};
+
+/**
+ * Shape-sniffing fallback for renderers that declare no semantics, so an
+ * unknown tool with a recognizable input still gets its advisories.
+ */
+function sniffSemantics(tool: ToolCall): ResolvedSemantics {
+  const input = tool.input ?? {};
+  const writeSignal =
+    "content" in input ||
+    "old_string" in input ||
+    "new_string" in input ||
+    "new_source" in input;
+  return {
+    command: asString(input.command) || asString(input.cmd),
+    writePath: writeSignal
+      ? asString(input.file_path) ||
+        asString(input.notebook_path) ||
+        asString(input.path)
+      : "",
+    unsandboxed: Boolean(input.dangerouslyDisableSandbox),
+  };
+}
+
+/** Evaluate a renderer's semantics accessors (each optional) for one call. */
+export function resolveSemantics(
+  tool: ToolCall,
+  semantics?: ToolSemantics
+): ResolvedSemantics {
+  const sniffed = sniffSemantics(tool);
+  if (!semantics) return sniffed;
+  return {
+    command: semantics.command ? semantics.command(tool) ?? "" : sniffed.command,
+    writePath: semantics.writePath
+      ? semantics.writePath(tool) ?? ""
+      : sniffed.writePath,
+    unsandboxed: semantics.unsandboxed
+      ? semantics.unsandboxed(tool)
+      : sniffed.unsandboxed,
+  };
+}
+
 export type RiskRule = {
-  test: (tool: ToolCall) => boolean;
+  test: (sem: ResolvedSemantics) => boolean;
   message: string;
 };
 
@@ -41,54 +94,49 @@ export const RISK_RULES: RiskRule[] = [
     // Note: the Bash input view already badges this red, so this line is
     // secondary. Kept for consistency so the advisory row reflects every known
     // risk in one place rather than the human having to cross-reference badges.
-    test: (t) => t.name === "Bash" && Boolean(t.input?.dangerouslyDisableSandbox),
+    test: (sem) => sem.unsandboxed,
     message: "runs without the sandbox",
   },
   {
     // Recursive + force in either flag order (-rf, -fr) or as separate flags
     // (rm -r -f). Lookaheads match a `-…r` flag and a `-…f` flag in any order.
-    test: (t) =>
-      t.name === "Bash" &&
-      /\brm\b(?=[^\n]*\s-[a-zA-Z]*r)(?=[^\n]*\s-[a-zA-Z]*f)/.test(
-        asString(t.input?.command)
-      ),
+    test: (sem) =>
+      /\brm\b(?=[^\n]*\s-[a-zA-Z]*r)(?=[^\n]*\s-[a-zA-Z]*f)/.test(sem.command),
     message: "removes files recursively (rm -rf)",
   },
   {
-    test: (t) =>
-      t.name === "Bash" &&
+    test: (sem) =>
       /git\s+push\b[^\n]*(?:--force\b|--force-with-lease\b|\s-f\b)/.test(
-        asString(t.input?.command)
+        sem.command
       ),
     message: "force-pushes a git branch",
   },
   {
-    test: (t) =>
-      t.name === "Bash" &&
-      /\b(?:curl|wget)\b[^|]*\|\s*(?:ba)?sh\b/.test(asString(t.input?.command)),
+    test: (sem) =>
+      /\b(?:curl|wget)\b[^|]*\|\s*(?:ba)?sh\b/.test(sem.command),
     message: "pipes a remote script into a shell",
   },
   {
-    test: (t) => {
-      if (t.name !== "Write" && t.name !== "Edit" && t.name !== "NotebookEdit")
-        return false;
-      const path =
-        asString(t.input?.file_path) || asString(t.input?.notebook_path);
-      if (!path) return false;
-      return !isInsideBrainRepo(path);
-    },
+    test: (sem) => Boolean(sem.writePath) && !isInsideBrainRepo(sem.writePath),
     message: "writes outside the brain repo",
   },
 ];
 
 /** Advisory messages for every risk rule that fires. Never throws. */
-export function riskHints(tool: ToolCall): string[] {
+export function riskHints(tool: ToolCall, semantics?: ToolSemantics): string[] {
   const hints: string[] = [];
+  let sem: ResolvedSemantics;
+  try {
+    sem = resolveSemantics(tool, semantics);
+  } catch {
+    // Defensive: never let a malformed input break the approval UI.
+    return hints;
+  }
   for (const rule of RISK_RULES) {
     try {
-      if (rule.test(tool)) hints.push(rule.message);
+      if (rule.test(sem)) hints.push(rule.message);
     } catch {
-      // Defensive: never let a malformed input break the approval UI.
+      // Same defensiveness per rule.
     }
   }
   return hints;

package/src/components/chat/tool-call-timeline.tsx

@@ -9,8 +9,8 @@ import {
   AlertTriangle,
   FileText,
 } from "lucide-react";
-import { resolveToolRenderer } from "@schlessera/brain-ui-sdk/client";
-import type { ToolCall } from "../../stores/chat-store.js";
+import { resolveToolRenderer, type ToolSemantics } from "@schlessera/brain-ui-sdk/client";
+import { useChatStore, type ToolCall } from "../../stores/chat-store.js";
 import { cn } from "../../lib/utils.js";
 import { motion, AnimatePresence } from "framer-motion";
 import { getToolLabel, getTouchedFile, formatDuration, formatTokenCount } from "./tool-views.js";
@@ -26,10 +26,18 @@ import { SpanStatusDot } from "../activity/span-bits.js";
 // runs on module load.
 registerBuiltinRenderers();
 
-// One backend is active per deployment (v1). The shipped default is the Claude
-// backend; renderer resolution is backend-scoped so a future multi-backend
-// build can thread the real id through here.
-const BACKEND_ID = "claude";
+// Sessions that predate backend stamping (old servers, cleared stores) scope
+// to the shipped default backend.
+const DEFAULT_BACKEND_ID = "claude";
+
+/** Backend owning the session in view, scoping renderer resolution. */
+function useBackendId(): string {
+  return useChatStore(
+    (s) =>
+      (s.activeSessionId ? s.backendIds[s.activeSessionId] : undefined) ??
+      DEFAULT_BACKEND_ID
+  );
+}
 
 export function ToolCallTimeline({
   toolCalls,
@@ -44,6 +52,7 @@ export function ToolCallTimeline({
   // Collapse the whole run to a summary row once the turn is over. History
   // messages mount collapsed; a live timeline collapses when streaming ends.
   const [collapsed, setCollapsed] = useState(!live);
+  const backendId = useBackendId();
   const prevLive = useRef(live);
   useEffect(() => {
     if (prevLive.current && !live) setCollapsed(true);
@@ -57,7 +66,11 @@ export function ToolCallTimeline({
 
   if (effectiveCollapsed) {
     return (
-      <TimelineSummaryRow toolCalls={toolCalls} onExpand={() => setCollapsed(false)} />
+      <TimelineSummaryRow
+        toolCalls={toolCalls}
+        backendId={backendId}
+        onExpand={() => setCollapsed(false)}
+      />
     );
   }
 
@@ -75,7 +88,12 @@ export function ToolCallTimeline({
       )}
       <div className="relative ml-1 border-l-2 border-border/40 pl-4 space-y-1.5">
         {toolCalls.map((tool) => (
-          <ToolCallEntry key={tool.id} toolCall={tool} onApproval={onApproval} />
+          <ToolCallEntry
+            key={tool.id}
+            toolCall={tool}
+            backendId={backendId}
+            onApproval={onApproval}
+          />
         ))}
       </div>
     </div>
@@ -84,13 +102,22 @@ export function ToolCallTimeline({
 
 function TimelineSummaryRow({
   toolCalls,
+  backendId,
   onExpand,
 }: {
   toolCalls: ToolCall[];
+  backendId: string;
   onExpand: () => void;
 }) {
   const steps = toolCalls.length;
-  const files = new Set(toolCalls.map(getTouchedFile).filter(Boolean)).size;
+  const files = new Set(
+    toolCalls
+      .map(
+        (t) =>
+          resolveToolRenderer(t, backendId)?.touchedFile?.(t) ?? getTouchedFile(t)
+      )
+      .filter(Boolean)
+  ).size;
   const errors = toolCalls.filter((t) => t.isError).length;
   const started = Math.min(...toolCalls.map((t) => t.startedAt ?? Infinity));
   const ended = Math.max(...toolCalls.map((t) => t.endedAt ?? -Infinity));
@@ -123,9 +150,11 @@ function TimelineSummaryRow({
 
 function ToolCallEntry({
   toolCall,
+  backendId,
   onApproval,
 }: {
   toolCall: ToolCall;
+  backendId: string;
   onApproval: (toolUseId: string, approved: boolean) => void;
 }) {
   const [expanded, setExpanded] = useState(
@@ -147,8 +176,12 @@ function ToolCallEntry({
     : toolCall;
   // Resolve the renderer for this tool (backend-scoped exact -> global exact ->
   // shape-sniffing predicate). Falls back to the generic renderer.
-  const renderer = resolveToolRenderer(toolCall, BACKEND_ID) ?? GENERIC_RENDERER;
+  const renderer = resolveToolRenderer(toolCall, backendId) ?? GENERIC_RENDERER;
   const Icon = renderer.icon ?? FileText;
+  const label =
+    typeof renderer.label === "function"
+      ? renderer.label(toolCall)
+      : renderer.label ?? getToolLabel(toolCall.name);
   const isPending = toolCall.status === "pending_approval";
   const summary = renderer.summary?.(timed) ?? null;
   const meta = renderer.meta?.(timed) ?? null;
@@ -204,7 +237,7 @@ function ToolCallEntry({
       >
         <Icon className="h-3.5 w-3.5 shrink-0" />
         <span className="font-[family-name:var(--font-mono)] font-medium">
-          {getToolLabel(toolCall.name)}
+          {label}
         </span>
         {summary && (
           <span
@@ -226,8 +259,8 @@ function ToolCallEntry({
         </span>
       </button>
 
-      {/* Live subagent state for Agent fan-outs, fed by the activity stream. */}
-      {toolCall.name === "Agent" && <SubagentEntryRows agentToolUseId={toolCall.id} />}
+      {/* Live subagent state for tool fan-outs, fed by the activity stream. */}
+      {renderer.subagentRows && <SubagentEntryRows agentToolUseId={toolCall.id} />}
 
       {/* Expandable detail */}
       <AnimatePresence>
@@ -251,7 +284,9 @@ function ToolCallEntry({
               {Input && <Input tool={toolCall} />}
 
               {/* Risk hints — advisory only, never blocks approval */}
-              {isPending && <RiskHints toolCall={toolCall} />}
+              {isPending && (
+                <RiskHints toolCall={toolCall} semantics={renderer.semantics} />
+              )}
 
               {/* Approval buttons */}
               {isPending && (
@@ -333,8 +368,14 @@ function SubagentEntryRows({ agentToolUseId }: { agentToolUseId: string }) {
   );
 }
 
-function RiskHints({ toolCall }: { toolCall: ToolCall }) {
-  const hints = riskHints(toolCall);
+function RiskHints({
+  toolCall,
+  semantics,
+}: {
+  toolCall: ToolCall;
+  semantics?: ToolSemantics;
+}) {
+  const hints = riskHints(toolCall, semantics);
   if (hints.length === 0) return null;
   return (
     <div className="space-y-0.5 text-[11px] text-amber-400">

package/src/components/settings/models-tab.tsx

@@ -8,6 +8,7 @@ import type {
 import { api } from "../../lib/api-client.js";
 import { useProviderStore } from "../../stores/provider-store.js";
 import { cn } from "../../lib/utils.js";
+import { PiAccountsSection } from "./pi-accounts.js";
 
 /**
  * The model picker's contents, and which of them to show.
@@ -200,6 +201,8 @@ export function ModelsTab({ active }: { active: boolean }) {
             profiles are listed.
           </p>
         )}
+
+        <PiAccountsSection active={active} />
       </div>
 
       <div className="flex items-center justify-between gap-3 border-t border-border p-4">

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

@@ -0,0 +1,258 @@
+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 { cn } from "../../lib/utils.js";
+
+/**
+ * Provider sign-in for the pi backend's OAuth vendors — most importantly
+ * OpenAI (ChatGPT Plus/Pro), whose device-code flow needs no browser callback
+ * on the server: the user gets a short code here, enters it at the provider's
+ * verification page on ANY device, and the server stores the credential.
+ *
+ * Renders nothing when the server reports no pi providers (pi not
+ * configured), so the Models tab is unchanged for Claude-only deployments.
+ */
+export function PiAccountsSection({ active }: { active: boolean }) {
+  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 pollTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  function stopPolling() {
+    if (pollTimer.current) {
+      clearTimeout(pollTimer.current);
+      pollTimer.current = null;
+    }
+  }
+
+  async function reload() {
+    try {
+      const { providers } = await api.piAuthProviders();
+      setProviders(providers);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Could not load accounts");
+    }
+  }
+
+  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]);
+
+  // 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;
+    let disposed = false;
+    const delayMs = (flow.intervalSeconds ?? 5) * 1000;
+    const tick = async () => {
+      try {
+        const { flow: next } = await api.piAuthFlow(flow.id);
+        if (disposed) return;
+        setFlow(next);
+        if (next.status === "success") void reload();
+      } catch {
+        if (disposed) return;
+        // Transient poll failure: keep trying until the flow expires.
+        pollTimer.current = setTimeout(tick, delayMs);
+        return;
+      }
+    };
+    pollTimer.current = setTimeout(tick, delayMs);
+    return () => {
+      disposed = true;
+      stopPolling();
+    };
+  }, [flow]);
+
+  async function connect(providerId: string) {
+    setBusy(providerId);
+    setError(null);
+    try {
+      const { flow } = await api.piAuthStart(providerId);
+      setFlow(flow);
+      if (flow.status === "error") setError(flow.error ?? "Login failed");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Could not start login");
+    } finally {
+      setBusy(null);
+    }
+  }
+
+  async function cancel() {
+    if (!flow) return;
+    stopPolling();
+    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) {
+    setBusy(providerId);
+    setError(null);
+    try {
+      await api.piAuthLogout(providerId);
+      await reload();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Could not disconnect");
+    } finally {
+      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>
+  );
+}

package/src/hooks/use-websocket.ts

@@ -60,6 +60,15 @@ function convertHistoryMessage(msg: SessionHistoryMessage): ChatMessage {
  * payload, so an answered question survives session resume (rendered in its
  * chronological slot, collapsed) instead of vanishing.
  */
+function isBareAnswersMap(v: unknown): v is Record<string, string> {
+  return (
+    !!v &&
+    typeof v === "object" &&
+    !Array.isArray(v) &&
+    Object.values(v).every((x) => typeof x === "string")
+  );
+}
+
 function reconstructAskUserExchanges(
   toolCalls: SessionHistoryMessage["toolCalls"]
 ): AskUserExchange[] | undefined {
@@ -74,8 +83,14 @@ function reconstructAskUserExchanges(
           answers?: Record<string, string>;
           annotations?: AskUserExchange["annotations"];
         };
-        exchange.answers = payload.answers;
-        exchange.annotations = payload.annotations;
+        if (payload && typeof payload === "object" && payload.answers) {
+          exchange.answers = payload.answers;
+          exchange.annotations = payload.annotations;
+        } else if (isBareAnswersMap(payload)) {
+          // The pi backend persists the bare answers map, without the
+          // `{answers}` envelope the Claude tool writes.
+          exchange.answers = payload;
+        }
       } catch {
         // Non-JSON output means the question was dismissed or errored out.
         exchange.cancelled = true;
@@ -281,6 +296,18 @@ export function handleServerMessage(msg: ServerMessage) {
 
     case "session_info": {
       ensureActivitySubscription(msg.sessionId);
+      // Record backend ownership for renderer scoping — for ANY session, since
+      // background sessions keep their own transcript buffers. Older servers
+      // omit backendId; derive it from the pinned profile when still possible
+      // (fails only for since-hidden profiles, which then use the default).
+      const ownerBackendId =
+        msg.backendId ??
+        useProviderStore
+          .getState()
+          .available.find((p) => p.id === msg.providerId)?.backendId;
+      if (ownerBackendId) {
+        useChatStore.getState().setSessionBackend(msg.sessionId, ownerBackendId);
+      }
       // bindDraftSession above handled draft adoption; an info frame may still
       // re-pin the provider picker when it concerns the session in view.
       const current = useChatStore.getState();