@marimo-team/frontend 0.23.7-dev20 → 0.23.7-dev23

package/src/components/chat/chat-utils.ts

@@ -1,11 +1,12 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import type { components } from "@marimo-team/marimo-api";
-import type {
-  ChatAddToolOutputFunction,
-  FileUIPart,
-  ToolUIPart,
-  UIMessage,
+import {
+  type ChatAddToolOutputFunction,
+  type FileUIPart,
+  isToolUIPart,
+  type ToolUIPart,
+  type UIMessage,
 } from "ai";
 import { useState } from "react";
 import useEvent from "react-use-event-hook";
@@ -16,6 +17,7 @@ import type {
   InvokeAiToolRequest,
   InvokeAiToolResponse,
 } from "@/core/network/types";
+import { logNever } from "@/utils/assertNever";
 import { blobToString } from "@/utils/fileToBase64";
 import { Logger } from "@/utils/Logger";
 import { getAICompletionBodyWithAttachments } from "../editor/ai/completion-utils";
@@ -134,11 +136,11 @@ export async function handleToolCall({
   try {
     if (FRONTEND_TOOL_REGISTRY.has(toolCall.toolName)) {
       // Invoke the frontend tool
-      const response = await FRONTEND_TOOL_REGISTRY.invoke(
-        toolCall.toolName,
-        toolCall.input,
-        toolContext,
-      );
+      const response = await FRONTEND_TOOL_REGISTRY.invoke({
+        toolName: toolCall.toolName,
+        rawArgs: toolCall.input,
+        toolContext: toolContext,
+      });
       addToolOutput({
         tool: toolCall.toolName,
         toolCallId: toolCall.toolCallId,
@@ -166,9 +168,33 @@ export async function handleToolCall({
   }
 }
 
+/**
+ * Returns true if a tool call is "ready to be sent back to the server" — i.e.
+ * either it has reached a terminal output state, or the user has just supplied
+ * an approval response that the server hasn't seen yet.
+ */
+function isToolCallReadyToSend(state: ToolUIPart["state"]): boolean {
+  switch (state) {
+    case "output-available":
+    case "output-error":
+    case "output-denied":
+    case "approval-responded":
+      return true;
+    case "input-streaming":
+    case "input-available":
+    case "approval-requested":
+      return false;
+    default:
+      logNever(state);
+      return false;
+  }
+}
+
 /**
  * Checks if we should send a message automatically based on the messages.
- * We only want to send a message if all tool calls are completed and there is no reply yet.
+ * We auto-send when every tool call on the last assistant message has either
+ * finished (output-available/error/denied) or has just received a user
+ * approval response, and the assistant hasn't replied yet.
  */
 export function hasPendingToolCalls(messages: UIMessage[]): boolean {
   if (messages.length === 0) {
@@ -188,17 +214,14 @@ export function hasPendingToolCalls(messages: UIMessage[]): boolean {
     return false;
   }
 
-  const toolParts = parts.filter((part) =>
-    part.type.startsWith("tool-"),
-  ) as ToolUIPart[];
+  const toolParts = parts.filter(isToolUIPart);
 
-  // Guard against no tool parts
   if (toolParts.length === 0) {
     return false;
   }
 
-  const allToolCallsCompleted = toolParts.every(
-    (part) => part.state === "output-available",
+  const allToolCallsReady = toolParts.every((part) =>
+    isToolCallReadyToSend(part.state),
   );
 
   // Check if the last part has any text content
@@ -206,10 +229,9 @@ export function hasPendingToolCalls(messages: UIMessage[]): boolean {
   const hasTextContent =
     lastPart.type === "text" && lastPart.text?.trim().length > 0;
 
-  Logger.warn("All tool calls completed: %s", allToolCallsCompleted);
+  Logger.debug("All tool calls ready to send: %s", allToolCallsReady);
 
-  // Only auto-send if we have completed tool calls and there is no reply yet
-  return allToolCallsCompleted && !hasTextContent;
+  return allToolCallsReady && !hasTextContent;
 }
 
 export function useFileState() {

package/src/components/chat/reasoning-accordion.tsx

@@ -21,20 +21,31 @@ export const ReasoningAccordion: React.FC<ReasoningAccordionProps> = ({
   index = 0,
   isStreaming = false,
 }) => {
+  const [openItem, setOpenItem] = React.useState<string>("");
+
+  // Some reasoning models emit a reasoning part with no surfaced content
+  // (e.g. OpenAI's o-series, which hides chain-of-thought but still marks
+  // its boundaries on the wire). pydantic-ai's Vercel adapter forwards the
+  // empty start/end pair, producing a 0-char ReasoningUIPart. Skip it.
+  if (!reasoning && !isStreaming) {
+    return null;
+  }
+
   return (
     <Accordion
       key={index}
       type="single"
       collapsible={true}
       className="w-full mb-2"
-      value={isStreaming ? "reasoning" : undefined}
+      value={isStreaming ? "reasoning" : openItem}
+      onValueChange={setOpenItem}
     >
       <AccordionItem value="reasoning" className="border-0">
         <AccordionTrigger className="text-xs text-muted-foreground hover:bg-muted/50 px-2 py-1 h-auto rounded-sm [&[data-state=open]>svg]:rotate-180">
           <span className="flex items-center gap-2">
             <BotMessageSquareIcon className="h-3 w-3" />
-            {isStreaming ? "Thinking" : "View reasoning"} ({reasoning.length}{" "}
-            chars)
+            {isStreaming ? "Thinking" : "View reasoning"}
+            {reasoning.length > 0 && ` (${reasoning.length} chars)`}
           </span>
         </AccordionTrigger>
         <AccordionContent className="pb-2 px-2">

package/src/components/chat/tool-call/shared.ts

@@ -0,0 +1,13 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { ToolUIPart } from "ai";
+
+export type ToolState = ToolUIPart["state"];
+
+// The AI SDK declares `approval` inline on every variant of `UIToolInvocation`
+// rather than exporting a named type, so we derive ours from there.
+export type ToolApproval = NonNullable<ToolUIPart["approval"]>;
+
+export function formatToolName(toolName: string): string {
+  return toolName.replace("tool-", "");
+}

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

@@ -0,0 +1,62 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { ChatAddToolApproveResponseFunction } from "ai";
+import { ShieldQuestionIcon } from "lucide-react";
+import React from "react";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/utils/cn";
+import { formatToolName, type ToolApproval } from "./shared";
+import { ToolArgsRenderer } from "./tool-args";
+
+interface ToolApprovalCardProps {
+  toolName: string;
+  input: unknown;
+  approval: ToolApproval;
+  onApprove: ChatAddToolApproveResponseFunction;
+  className?: string;
+}
+
+export const ToolApprovalCard: React.FC<ToolApprovalCardProps> = ({
+  toolName,
+  input,
+  approval,
+  onApprove,
+  className,
+}) => {
+  return (
+    <div
+      className={cn(
+        "rounded-md border border-(--amber-6) bg-(--amber-2) p-3 space-y-3",
+        className,
+      )}
+      role="alertdialog"
+      aria-label={`Approval required for ${formatToolName(toolName)}`}
+    >
+      <div className="flex items-start gap-2">
+        <ShieldQuestionIcon className="h-4 w-4 text-(--amber-11) mt-0.5 shrink-0" />
+        <div className="text-xs text-(--amber-11) leading-relaxed">
+          <span className="font-semibold">Approval required:</span>{" "}
+          <code className="font-mono">{formatToolName(toolName)}</code>
+        </div>
+      </div>
+
+      <ToolArgsRenderer input={input} />
+
+      <div className="flex items-center justify-end gap-2">
+        <Button
+          size="xs"
+          variant="outline"
+          onClick={() => onApprove({ id: approval.id, approved: false })}
+        >
+          Deny
+        </Button>
+        <Button
+          size="xs"
+          onClick={() => onApprove({ id: approval.id, approved: true })}
+        >
+          Approve
+        </Button>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,26 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import React from "react";
+
+interface ToolArgsRendererProps {
+  input: unknown;
+  label?: string;
+}
+
+export const ToolArgsRenderer: React.FC<ToolArgsRendererProps> = ({
+  input,
+  label = "Tool Request",
+}) => {
+  if (input == null) {
+    return null;
+  }
+
+  return (
+    <div className="space-y-2">
+      <h3 className="text-xs font-semibold text-muted-foreground">{label}</h3>
+      <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(input, null, 2)}
+      </pre>
+    </div>
+  );
+};

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

@@ -0,0 +1,99 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { ChatAddToolApproveResponseFunction } from "ai";
+import React from "react";
+import { logNever } from "@/utils/assertNever";
+import type { ToolApproval, ToolState } from "./shared";
+import { ToolApprovalCard } from "./tool-approval-card";
+import { ToolErrorCard } from "./tool-error-card";
+import { ToolHistoryRow } from "./tool-history-row";
+
+interface ToolCallViewProps {
+  toolName: string;
+  state: ToolState;
+  result?: unknown;
+  errorText?: string;
+  input?: unknown;
+  approval?: ToolApproval;
+  onApprove?: ChatAddToolApproveResponseFunction;
+  index?: number;
+  className?: string;
+  /**
+   * Whether this tool call belongs to the latest message in the conversation.
+   * Used by error cards to decide whether to stay expanded (live) or collapse
+   * (the user has moved on).
+   */
+  isLive?: boolean;
+}
+
+export const ToolCallView: React.FC<ToolCallViewProps> = ({
+  toolName,
+  state,
+  result,
+  errorText,
+  input,
+  approval,
+  onApprove,
+  index,
+  className,
+  isLive = true,
+}) => {
+  switch (state) {
+    case "approval-requested":
+      // Approval is a live, blocking action — render it as a prominent card
+      // Fall back to history row if the wiring isn't
+      // available (shouldn't happen in practice).
+      if (approval != null && onApprove != null) {
+        return (
+          <ToolApprovalCard
+            toolName={toolName}
+            input={input}
+            approval={approval}
+            onApprove={onApprove}
+            className={className}
+          />
+        );
+      }
+      return (
+        <ToolHistoryRow
+          toolName={toolName}
+          state="input-available"
+          input={input}
+          index={index}
+          className={className}
+        />
+      );
+
+    case "output-error":
+      return (
+        <ToolErrorCard
+          toolName={toolName}
+          input={input}
+          errorText={errorText}
+          isLive={isLive}
+          className={className}
+        />
+      );
+
+    case "input-streaming":
+    case "input-available":
+    case "approval-responded":
+    case "output-available":
+    case "output-denied":
+      return (
+        <ToolHistoryRow
+          toolName={toolName}
+          state={state}
+          input={input}
+          result={result}
+          approval={approval}
+          index={index}
+          className={className}
+        />
+      );
+
+    default:
+      logNever(state);
+      return null;
+  }
+};

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>
+  );
+};