@marimo-team/islands 0.23.7-dev20 → 0.23.7-dev22

package/src/components/chat/tool-call/tool-error-card.tsx

@@ -0,0 +1,81 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { ChevronDownIcon, XCircleIcon } from "lucide-react";
+import React from "react";
+import { cn } from "@/utils/cn";
+import { formatToolName } from "./shared";
+import { ToolArgsRenderer } from "./tool-args";
+
+interface ToolErrorCardProps {
+  toolName: string;
+  input: unknown;
+  errorText?: string;
+  // When false, defaults to collapsed (the conversation has moved past this).
+  isLive: boolean;
+  className?: string;
+}
+
+export const ToolErrorCard: React.FC<ToolErrorCardProps> = ({
+  toolName,
+  input,
+  errorText,
+  isLive,
+  className,
+}) => {
+  const [open, setOpen] = React.useState(isLive);
+
+  // Auto-collapse once when the conversation moves past this turn.
+  // The user can still re-open manually afterwards; we only do this on the
+  // live → not-live transition, never the reverse.
+  const wasLive = React.useRef(isLive);
+  React.useEffect(() => {
+    if (wasLive.current && !isLive) {
+      setOpen(false);
+    }
+    wasLive.current = isLive;
+  }, [isLive]);
+
+  return (
+    <div
+      className={cn(
+        "rounded-md border border-(--red-6) bg-(--red-2)",
+        className,
+      )}
+    >
+      <button
+        type="button"
+        onClick={() => setOpen((prev) => !prev)}
+        className="w-full flex items-center gap-2 px-3 py-2 text-xs text-(--red-11) hover:bg-(--red-3) rounded-md transition-colors"
+        aria-expanded={open}
+      >
+        <XCircleIcon className="h-3.5 w-3.5 shrink-0" />
+        <span className="flex-1 text-left">
+          <span className="font-semibold">Failed:</span>{" "}
+          <code className="font-mono">{formatToolName(toolName)}</code>
+        </span>
+        <ChevronDownIcon
+          className={cn(
+            "h-3.5 w-3.5 shrink-0 transition-transform",
+            open && "rotate-180",
+          )}
+        />
+      </button>
+
+      {open && (
+        <div className="px-3 pb-3 space-y-3 border-t border-(--red-6)/40 pt-3">
+          <ToolArgsRenderer input={input} />
+          {errorText && (
+            <div>
+              <h3 className="text-xs font-semibold text-(--red-11) mb-1">
+                Error
+              </h3>
+              <pre className="bg-(--red-2) border border-(--red-6) rounded p-2 text-xs text-(--red-11) leading-relaxed overflow-auto scrollbar-thin max-h-64 whitespace-pre-wrap">
+                {errorText}
+              </pre>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/chat/tool-call/tool-history-row.tsx

@@ -0,0 +1,153 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { BanIcon, CheckCircleIcon, Loader2, WrenchIcon } from "lucide-react";
+import React from "react";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { logNever } from "@/utils/assertNever";
+import { cn } from "@/utils/cn";
+import { formatToolName, type ToolApproval, type ToolState } from "./shared";
+import { ToolArgsRenderer } from "./tool-args";
+import { ResultRenderer } from "./tool-result";
+
+// States considered "inert" — they represent past or background work that the
+// user does not need to act on.
+export type HistoryState = Exclude<
+  ToolState,
+  "approval-requested" | "output-error"
+>;
+
+const STATUS_LABEL: Record<HistoryState, string> = {
+  "input-streaming": "Generating",
+  "input-available": "Running",
+  "approval-responded": "Awaiting result",
+  "output-available": "Done",
+  "output-denied": "Denied",
+};
+
+const StatusIcon: React.FC<{ state: HistoryState }> = ({ state }) => {
+  switch (state) {
+    case "input-streaming":
+    case "input-available":
+    case "approval-responded":
+      return <Loader2 className="h-3 w-3 animate-spin" />;
+    case "output-available":
+      return <CheckCircleIcon className="h-3 w-3 text-(--grass-11)" />;
+    case "output-denied":
+      return <BanIcon className="h-3 w-3 text-muted-foreground" />;
+    default:
+      logNever(state);
+      return <WrenchIcon className="h-3 w-3" />;
+  }
+};
+
+function getTriggerToneClass(state: HistoryState): string {
+  switch (state) {
+    case "output-available":
+      return "text-(--grass-11)/80";
+    case "output-denied":
+      return "text-muted-foreground";
+    case "input-streaming":
+    case "input-available":
+    case "approval-responded":
+      return "";
+    default:
+      logNever(state);
+      return "";
+  }
+}
+
+interface ToolHistoryRowProps {
+  toolName: string;
+  state: HistoryState;
+  input: unknown;
+  result?: unknown;
+  approval?: ToolApproval;
+  index?: number;
+  className?: string;
+}
+
+export const ToolHistoryRow: React.FC<ToolHistoryRowProps> = ({
+  toolName,
+  state,
+  input,
+  result,
+  approval,
+  index = 0,
+  className,
+}) => {
+  return (
+    <Accordion
+      key={`tool-${index}`}
+      type="single"
+      collapsible={true}
+      className={cn("w-full", className)}
+    >
+      <AccordionItem value="tool-call" className="border-0">
+        <AccordionTrigger
+          className={cn(
+            "h-6 text-xs border-border shadow-none! ring-0! bg-muted/60 hover:bg-muted py-0 px-2 gap-1 rounded-sm [&[data-state=open]>svg]:rotate-180 hover:no-underline",
+            getTriggerToneClass(state),
+          )}
+        >
+          <span className="flex items-center gap-1">
+            <StatusIcon state={state} />
+            {STATUS_LABEL[state]}:
+            <code className="font-mono text-xs">
+              {formatToolName(toolName)}
+            </code>
+          </span>
+        </AccordionTrigger>
+        <AccordionContent className="py-2 px-2">
+          <HistoryContent
+            state={state}
+            input={input}
+            result={result}
+            approval={approval}
+          />
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+};
+
+const HistoryContent: React.FC<{
+  state: HistoryState;
+  input: unknown;
+  result?: unknown;
+  approval?: ToolApproval;
+}> = ({ state, input, result, approval }) => {
+  switch (state) {
+    case "input-streaming":
+    case "input-available":
+    case "approval-responded":
+      return <ToolArgsRenderer input={input} />;
+
+    case "output-available":
+      return (
+        <div className="space-y-3">
+          <ToolArgsRenderer input={input} />
+          {result != null && <ResultRenderer result={result} />}
+        </div>
+      );
+
+    case "output-denied":
+      return (
+        <div className="space-y-3">
+          <ToolArgsRenderer input={input} />
+          <div className="bg-muted/40 border border-border rounded-md p-3 text-xs text-muted-foreground leading-relaxed">
+            Tool execution was denied
+            {approval?.reason ? `: ${approval.reason}` : "."}
+          </div>
+        </div>
+      );
+
+    default:
+      logNever(state);
+      return null;
+  }
+};

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

@@ -0,0 +1,101 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { isEmpty } from "lodash-es";
+import { InfoIcon } from "lucide-react";
+import React from "react";
+import { z } from "zod";
+
+// A value worth rendering: drop null/undefined and empty containers
+// (`{}`, `[]`), but keep meaningful primitives (`0`, `false`, `""`).
+function isUninformative(value: unknown): boolean {
+  if (value == null) {
+    return true;
+  }
+  if (typeof value === "object") {
+    return isEmpty(value);
+  }
+  return false;
+}
+
+// Zod schema matching the Python SuccessResult dataclass
+const SuccessResultSchema = z.looseObject({
+  status: z.string().default("success"),
+  auth_required: z.boolean().default(false),
+  action_url: z.any(),
+  next_steps: z.any(),
+  meta: z.any(),
+  message: z.string().nullish(),
+});
+
+type SuccessResult = z.infer<typeof SuccessResultSchema>;
+
+const PrettySuccessResult: React.FC<{ data: SuccessResult }> = ({ data }) => {
+  const {
+    status,
+    auth_required,
+    action_url: _action_url,
+    meta: _meta,
+    next_steps: _next_steps,
+    message,
+    ...rest
+  } = data;
+
+  return (
+    <div className="flex flex-col gap-1.5">
+      <div className="flex items-center justify-between">
+        <h3 className="text-xs font-semibold text-muted-foreground">
+          Tool Result
+        </h3>
+        <div className="flex items-center gap-2">
+          <span className="text-xs px-2 py-0.5 bg-(--grass-2) text-(--grass-11) rounded-full font-medium capitalize">
+            {status}
+          </span>
+          {auth_required && (
+            <span className="text-xs px-2 py-0.5 bg-(--amber-2) text-(--amber-11) rounded-full">
+              Auth Required
+            </span>
+          )}
+        </div>
+      </div>
+
+      {message && (
+        <div className="flex items-start gap-2">
+          <InfoIcon className="h-3 w-3 text-(--blue-11) mt-0.5 shrink-0" />
+          <div className="text-xs text-foreground">{message}</div>
+        </div>
+      )}
+
+      {rest && (
+        <div className="space-y-3">
+          {Object.entries(rest).map(([key, value]) => {
+            if (isUninformative(value)) {
+              return null;
+            }
+            return (
+              <div key={key} className="space-y-1.5">
+                <span className="text-xs text-muted-foreground">{key}</span>
+                <pre className="bg-(--slate-2) p-2 text-muted-foreground border border-(--slate-4) rounded text-xs overflow-auto scrollbar-thin max-h-64">
+                  {JSON.stringify(value, null, 2)}
+                </pre>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const ResultRenderer: React.FC<{ result: unknown }> = ({ result }) => {
+  const parseResult = SuccessResultSchema.safeParse(result);
+
+  if (parseResult.success) {
+    return <PrettySuccessResult data={parseResult.data} />;
+  }
+
+  return (
+    <div className="text-xs font-medium text-muted-foreground mb-1 max-h-64 overflow-y-auto scrollbar-thin">
+      {typeof result === "string" ? result : JSON.stringify(result, null, 2)}
+    </div>
+  );
+};

package/src/core/ai/tools/__tests__/registry.test.ts

@@ -18,13 +18,11 @@ describe("FrontendToolRegistry", () => {
 
   it("invokes a tool with valid args and validates input/output", async () => {
     const registry = new FrontendToolRegistry([new TestFrontendTool()]);
-    const response = await registry.invoke(
-      "test_frontend_tool",
-      {
-        name: "Alice",
-      },
-      {} as never,
-    );
+    const response = await registry.invoke({
+      toolName: "test_frontend_tool",
+      rawArgs: { name: "Alice" },
+      toolContext: {} as never,
+    });
 
     // Check InvokeResult wrapper
     expect(response.tool_name).toBe("test_frontend_tool");
@@ -47,11 +45,11 @@ describe("FrontendToolRegistry", () => {
 
   it("returns a structured error on invalid args", async () => {
     const registry = new FrontendToolRegistry([new TestFrontendTool()]);
-    const response = await registry.invoke(
-      "test_frontend_tool",
-      {},
-      {} as never,
-    );
+    const response = await registry.invoke({
+      toolName: "test_frontend_tool",
+      rawArgs: {},
+      toolContext: {} as never,
+    });
 
     // Check InvokeResult wrapper
     expect(response.tool_name).toBe("test_frontend_tool");

package/src/core/ai/tools/registry.ts

@@ -52,11 +52,15 @@ export class FrontendToolRegistry {
     return tool;
   }
 
-  async invoke<TName extends string>(
-    toolName: TName,
-    rawArgs: unknown,
-    toolContext: ToolNotebookContext,
-  ): Promise<InvokeResult<TName>> {
+  async invoke<TName extends string>({
+    toolName,
+    rawArgs,
+    toolContext,
+  }: {
+    toolName: TName;
+    rawArgs: unknown;
+    toolContext: ToolNotebookContext;
+  }): Promise<InvokeResult<TName>> {
     const tool = this.getToolOrThrow(toolName);
     const handler = tool.handler;
     const inputSchema = tool.schema;

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

@@ -1,247 +0,0 @@
-/* Copyright 2026 Marimo. All rights reserved. */
-
-import type { ToolUIPart } from "ai";
-import { isEmpty } from "lodash-es";
-import {
-  CheckCircleIcon,
-  InfoIcon,
-  Loader2,
-  WrenchIcon,
-  XCircleIcon,
-} from "lucide-react";
-import React from "react";
-import { z } from "zod";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@/components/ui/accordion";
-import { cn } from "@/utils/cn";
-
-// Zod schema matching the Python SuccessResult dataclass
-const SuccessResultSchema = z
-  .object({
-    status: z.string().default("success"),
-    auth_required: z.boolean().default(false),
-    action_url: z.any(),
-    next_steps: z.any(),
-    meta: z.any(),
-    message: z.string().nullish(),
-  })
-  .passthrough();
-
-type SuccessResult = z.infer<typeof SuccessResultSchema>;
-
-const PrettySuccessResult: React.FC<{ data: SuccessResult }> = ({ data }) => {
-  const {
-    status,
-    auth_required,
-    action_url: _action_url,
-    meta: _meta,
-    next_steps: _next_steps,
-    message,
-    ...rest
-  } = data;
-
-  return (
-    <div className="flex flex-col gap-1.5">
-      <div className="flex items-center justify-between">
-        <h3 className="text-xs font-semibold text-muted-foreground">
-          Tool Result
-        </h3>
-        <div className="flex items-center gap-2">
-          <span className="text-xs px-2 py-0.5 bg-[var(--grass-2)] text-[var(--grass-11)] rounded-full font-medium capitalize">
-            {status}
-          </span>
-          {auth_required && (
-            <span className="text-xs px-2 py-0.5 bg-[var(--amber-2)] text-[var(--amber-11)] rounded-full">
-              Auth Required
-            </span>
-          )}
-        </div>
-      </div>
-
-      {/* Message */}
-      {message && (
-        <div className="flex items-start gap-2">
-          <InfoIcon className="h-3 w-3 text-[var(--blue-11)] mt-0.5 flex-shrink-0" />
-          <div className="text-xs text-foreground">{message}</div>
-        </div>
-      )}
-
-      {/* Data */}
-      {rest && (
-        <div className="space-y-3">
-          {Object.entries(rest).map(([key, value]) => {
-            if (isEmpty(value)) {
-              return null;
-            }
-            return (
-              <div key={key} className="space-y-1.5">
-                <div className="text-xs font-medium text-muted-foreground capitalize flex items-center gap-2">
-                  <div className="w-1.5 h-1.5 bg-[var(--blue-9)] rounded-full" />
-                  {key}
-                </div>
-                <pre className="bg-[var(--slate-2)] p-2 text-muted-foreground border border-[var(--slate-4)] rounded text-xs overflow-auto scrollbar-thin max-h-64">
-                  {JSON.stringify(value, null, 2)}
-                </pre>
-              </div>
-            );
-          })}
-        </div>
-      )}
-    </div>
-  );
-};
-
-const ResultRenderer: React.FC<{ result: unknown }> = ({ result }) => {
-  // Try to parse the result with our Zod schema
-  const parseResult = SuccessResultSchema.safeParse(result);
-
-  if (parseResult.success) {
-    // If it matches the SuccessResult schema, show the pretty UI
-    return <PrettySuccessResult data={parseResult.data} />;
-  }
-
-  // Otherwise, fall back to the current JSON viewer
-  return (
-    <div className="text-xs font-medium text-muted-foreground mb-1 max-h-64 overflow-y-auto scrollbar-thin">
-      {typeof result === "string" ? result : JSON.stringify(result, null, 2)}
-    </div>
-  );
-};
-
-const ToolArgsRenderer: React.FC<{ input: unknown }> = ({ input }) => {
-  const hasinput = input && input !== null;
-
-  if (!hasinput) {
-    return null;
-  }
-
-  const isEmptyInput = isEmpty(input);
-
-  const isObject =
-    typeof input === "object" &&
-    !Array.isArray(input) &&
-    Object.keys(input as Record<string, unknown>).length > 0;
-
-  return (
-    <div className="space-y-2">
-      <h3 className="text-xs font-semibold text-muted-foreground">
-        Tool Request
-      </h3>
-      <pre className="bg-[var(--slate-2)] p-2 text-muted-foreground border border-[var(--slate-4)] rounded text-xs overflow-auto scrollbar-thin max-h-64">
-        {isEmptyInput
-          ? "{}"
-          : isObject
-            ? JSON.stringify(input, null, 2)
-            : String(input)}
-      </pre>
-    </div>
-  );
-};
-
-interface ToolCallAccordionProps {
-  toolName: string;
-  result: unknown;
-  error?: string;
-  index?: number;
-  state?: ToolUIPart["state"];
-  className?: string;
-  input?: unknown;
-}
-
-export const ToolCallAccordion: React.FC<ToolCallAccordionProps> = ({
-  toolName,
-  result,
-  error,
-  index = 0,
-  state,
-  className,
-  input,
-}) => {
-  const hasResult = state === "output-available" && (result || error);
-  const status = error ? "error" : hasResult ? "success" : "loading";
-
-  const getStatusIcon = () => {
-    switch (status) {
-      case "loading":
-        return <Loader2 className="h-3 w-3 animate-spin" />;
-      case "error":
-        return <XCircleIcon className="h-3 w-3 text-[var(--red-11)]" />;
-      case "success":
-        return <CheckCircleIcon className="h-3 w-3 text-[var(--grass-11)]" />;
-      default:
-        return <WrenchIcon className="h-3 w-3" />;
-    }
-  };
-
-  const getStatusText = () => {
-    if (status === "loading") {
-      return "Running";
-    }
-    if (error) {
-      return "Failed";
-    }
-    if (hasResult) {
-      return "Done";
-    }
-    return "Tool call";
-  };
-
-  return (
-    <Accordion
-      key={`tool-${index}`}
-      type="single"
-      collapsible={true}
-      className={cn("w-full", className)}
-    >
-      <AccordionItem value="tool-call" className="border-0">
-        <AccordionTrigger
-          className={cn(
-            "h-6 text-xs border-border shadow-none! ring-0! bg-muted/60 hover:bg-muted py-0 px-2 gap-1 rounded-sm [&[data-state=open]>svg]:rotate-180 hover:no-underline",
-            status === "error" && "text-[var(--red-11)]/80",
-            status === "success" && "text-[var(--grass-11)]/80",
-          )}
-        >
-          <span className="flex items-center gap-1">
-            {getStatusIcon()}
-            {getStatusText()}:
-            <code className="font-mono text-xs">
-              {formatToolName(toolName)}
-            </code>
-          </span>
-        </AccordionTrigger>
-        <AccordionContent className="py-2 px-2">
-          {/* Only show content when tool is complete */}
-          {hasResult && (
-            <div className="space-y-3">
-              <ToolArgsRenderer input={input} />
-              {result !== undefined && result !== null && (
-                <ResultRenderer result={result} />
-              )}
-
-              {/* Error */}
-              {error && (
-                <div className="bg-[var(--red-2)] border border-[var(--red-6)] rounded-lg p-3">
-                  <div className="text-xs font-semibold text-[var(--red-11)] mb-2 flex items-center gap-2">
-                    <div className="w-1.5 h-1.5 bg-[var(--red-9)] rounded-full" />
-                    Error
-                  </div>
-                  <div className="text-sm text-[var(--red-11)] leading-relaxed">
-                    {error}
-                  </div>
-                </div>
-              )}
-            </div>
-          )}
-        </AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  );
-};
-
-function formatToolName(toolName: string) {
-  return toolName.replace("tool-", "");
-}