@schlessera/brain-ui-react 0.21.0 → 0.24.0

package/src/components/chat/renderers/claude-tools.tsx

@@ -3,13 +3,19 @@
 // delegated to the shared switch-based views so output stays byte-identical to
 // the pre-registry timeline.
 
-import type { RendererPack, ToolRenderer, ToolCallView } from "@schlessera/brain-ui-sdk/client";
+import type {
+  RendererPack,
+  ToolRenderer,
+  ToolCallView,
+  ToolSemantics,
+} from "@schlessera/brain-ui-sdk/client";
 import type { ToolCall } from "../../../stores/chat-store.js";
 import { GET_LOCATION_TOOL_NAME } from "../../../lib/tool-names.js";
 import {
   getToolIcon,
   getToolSummary,
   getOutputMeta,
+  getTouchedFile,
   ToolInputView,
   ToolOutputView,
 } from "../tool-views.js";
@@ -36,14 +42,39 @@ const CLAUDE_TOOL_NAMES = [
 // ToolCallView back to ToolCall here is safe.
 const asToolCall = (tool: ToolCallView) => tool as unknown as ToolCall;
 
+const str = (v: unknown) => (typeof v === "string" ? v : "");
+
+/** Backend-neutral meaning of Claude's shell tool, for risk advisories. */
+const bashSemantics: ToolSemantics = {
+  command: (tool) => str(tool.input?.command) || null,
+  unsandboxed: (tool) => Boolean(tool.input?.dangerouslyDisableSandbox),
+};
+
+/** Claude's file-writing tools all name their target in the input. */
+const writeSemantics: ToolSemantics = {
+  writePath: (tool) =>
+    str(tool.input?.file_path) || str(tool.input?.notebook_path) || null,
+};
+
+/** Per-tool contract extras beyond the shared switch-based views. */
+const CLAUDE_TOOL_EXTRAS: Record<string, Partial<ToolRenderer>> = {
+  Bash: { semantics: bashSemantics },
+  Edit: { semantics: writeSemantics },
+  Write: { semantics: writeSemantics },
+  NotebookEdit: { semantics: writeSemantics },
+  Agent: { subagentRows: true },
+};
+
 function claudeRenderer(name: string): ToolRenderer {
   return {
     match: name,
     icon: getToolIcon(name),
     summary: (tool) => getToolSummary(asToolCall(tool)),
     meta: (tool) => getOutputMeta(asToolCall(tool)),
+    touchedFile: (tool) => getTouchedFile(asToolCall(tool)),
     Input: ({ tool }) => <ToolInputView tool={asToolCall(tool)} />,
     Output: ({ tool }) => <ToolOutputView tool={asToolCall(tool)} />,
+    ...CLAUDE_TOOL_EXTRAS[name],
   };
 }
 

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

@@ -4,6 +4,7 @@
 
 import { registerToolRenderers } 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";
 
 let registered = false;
@@ -13,6 +14,7 @@ export function registerBuiltinRenderers(): void {
   if (registered) return;
   registered = true;
   registerToolRenderers(claudeToolPack);
+  registerToolRenderers(piToolPack);
   registerToolRenderers(genericToolPack);
 }
 

package/src/components/chat/renderers/pi-tools.tsx

@@ -0,0 +1,144 @@
+// pi backend tool-renderer pack. pi's curated tools are lowercase snake_case
+// (`bash`, `read_file`, …) with their own input shapes, so they get their own
+// backend-scoped renderers instead of riding the shape-sniffing generic tier.
+// Views are the same shared components the Claude pack composes; only the
+// field mapping differs.
+
+import type {
+  RendererPack,
+  ToolRenderer,
+  ToolCallView,
+  ToolSemantics,
+} from "@schlessera/brain-ui-sdk/client";
+import type { ToolCall } from "../../../stores/chat-store.js";
+import {
+  getToolIcon,
+  getOutputMeta,
+  toRepoRelative,
+  EditDiffView,
+  WriteFileView,
+  BashCommandView,
+  KeyValueView,
+  ClampedPre,
+  FileRowsView,
+} from "../tool-views.js";
+
+const asToolCall = (tool: ToolCallView) => tool as unknown as ToolCall;
+
+const str = (v: unknown) => (typeof v === "string" ? v : "");
+
+/** pi names its path input `path`; the shared views read `file_path`. */
+function withFilePath(tool: ToolCallView): ToolCall {
+  const t = asToolCall(tool);
+  return str(t.input?.file_path)
+    ? t
+    : ({ ...t, input: { ...t.input, file_path: t.input?.path } } as ToolCall);
+}
+
+function pathSummary(tool: ToolCallView): string | null {
+  const path = str(tool.input?.path);
+  return path ? toRepoRelative(path) ?? path : null;
+}
+
+const writeSemantics: ToolSemantics = {
+  writePath: (tool) => str(tool.input?.path) || null,
+};
+
+function DefaultOutput({ tool }: { tool: ToolCallView }) {
+  if (!tool.output) return null;
+  return <ClampedPre text={tool.output} isError={tool.isError} />;
+}
+
+const PI_RENDERERS: ToolRenderer[] = [
+  {
+    match: "bash",
+    icon: getToolIcon("Bash"),
+    summary: (tool) => str(tool.input?.command) || null,
+    meta: (tool) => getOutputMeta(asToolCall(tool)),
+    semantics: { command: (tool) => str(tool.input?.command) || null },
+    Input: ({ tool }) => <BashCommandView tool={asToolCall(tool)} />,
+    Output: DefaultOutput,
+  },
+  {
+    match: "read_file",
+    icon: getToolIcon("Read"),
+    summary: pathSummary,
+    meta: (tool) => getOutputMeta(asToolCall(tool)),
+    Input: ({ tool }) => <KeyValueView tool={asToolCall(tool)} />,
+    Output: DefaultOutput,
+  },
+  {
+    match: "write_file",
+    icon: getToolIcon("Write"),
+    summary: pathSummary,
+    meta: (tool) => getOutputMeta(asToolCall(tool)),
+    touchedFile: (tool) => str(tool.input?.path) || null,
+    semantics: writeSemantics,
+    Input: ({ tool }) => <WriteFileView tool={withFilePath(tool)} />,
+    Output: DefaultOutput,
+  },
+  {
+    match: "edit_file",
+    icon: getToolIcon("Edit"),
+    summary: pathSummary,
+    meta: (tool) => getOutputMeta(asToolCall(tool)),
+    touchedFile: (tool) => str(tool.input?.path) || null,
+    semantics: writeSemantics,
+    Input: ({ tool }) => <EditDiffView tool={withFilePath(tool)} />,
+    Output: DefaultOutput,
+  },
+  {
+    match: "grep",
+    icon: getToolIcon("Grep"),
+    summary: (tool) => {
+      const pattern = str(tool.input?.pattern);
+      if (!pattern) return null;
+      const path = str(tool.input?.path);
+      return path ? `${pattern} in ${toRepoRelative(path) ?? path}` : pattern;
+    },
+    meta: (tool) => {
+      const t = asToolCall(tool);
+      if (t.output && !t.isError && t.output.trim() !== "No matches.") {
+        const rows = t.output.split("\n").filter(Boolean).length;
+        return `${rows} match${rows === 1 ? "" : "es"}`;
+      }
+      return getOutputMeta(t);
+    },
+    Input: ({ tool }) => <KeyValueView tool={asToolCall(tool)} />,
+    Output: ({ tool }) =>
+      tool.output && !tool.isError ? (
+        <FileRowsView output={tool.output} />
+      ) : (
+        <DefaultOutput tool={tool} />
+      ),
+  },
+  {
+    match: "brain_search",
+    icon: getToolIcon("Grep"),
+    summary: (tool) => str(tool.input?.query) || null,
+    meta: (tool) => getOutputMeta(asToolCall(tool)),
+    Input: ({ tool }) => <KeyValueView tool={asToolCall(tool)} />,
+    Output: DefaultOutput,
+  },
+  {
+    match: "brain_context",
+    icon: getToolIcon("Read"),
+    summary: (tool) => str(tool.input?.query) || null,
+    meta: (tool) => getOutputMeta(asToolCall(tool)),
+    Input: ({ tool }) => <KeyValueView tool={asToolCall(tool)} />,
+    Output: DefaultOutput,
+  },
+  {
+    match: "brain_add",
+    icon: getToolIcon("Write"),
+    summary: (tool) => str(tool.input?.title) || str(tool.input?.type) || null,
+    meta: (tool) => getOutputMeta(asToolCall(tool)),
+    Input: ({ tool }) => <KeyValueView tool={asToolCall(tool)} />,
+    Output: DefaultOutput,
+  },
+];
+
+export const piToolPack: RendererPack = {
+  backend: "pi",
+  renderers: PI_RENDERERS,
+};

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">