@marimo-team/islands 0.23.7-dev9 → 0.23.7-dev90

package/dist/{swiper-component-BHs0PWwp.js → swiper-component-DlD2GU2g.js}

@@ -1,9 +1,9 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
-import { g as cn, l as useEventListener, t as Button } from "./button-CA5pI2YF.js";
+import { g as cn, l as useEventListener, t as Button } from "./button-Dj4BTre0.js";
 import { t as require_react } from "./react-DA-nE2FX.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-COBk7ree.js";
-import { t as useIframeCapabilities } from "./useIframeCapabilities-DbdLoEDm.js";
+import { t as useIframeCapabilities } from "./useIframeCapabilities-BkYHTrss.js";
 var import_compiler_runtime = require_compiler_runtime(), import_react = /* @__PURE__ */ __toESM(require_react(), 1);
 function isObject$2(t2) {
   return typeof t2 == "object" && !!t2 && "constructor" in t2 && t2.constructor === Object;

package/dist/{toDate-CHtl9vts.js → toDate-CIpC_34u.js}

@@ -2,11 +2,11 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { t as __commonJSMin } from "./chunk-BNovOVIE.js";
-import { _ as Logger } from "./button-CA5pI2YF.js";
+import { _ as Logger } from "./button-Dj4BTre0.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
-import { u as createLucideIcon } from "./dist-ESg7xyoD.js";
+import { u as createLucideIcon } from "./dist-D3ZI9nhS.js";
 import { r as KnownQueryParams } from "./constants-D0gkYoE2.js";
-import { f as waitFor, p as isIslands, u as store, y as atom } from "./useTheme-CByZUW0p.js";
+import { f as waitFor, p as isIslands, u as store, y as atom } from "./useTheme-DykuNHR2.js";
 import { t as invariant } from "./invariant-UcGKQEhF.js";
 var CircleQuestionMark = createLucideIcon("circle-question-mark", [
   ["circle", {
@@ -512,15 +512,21 @@ var RuntimeManager = class {
   get isSameOrigin() {
     return this.httpURL.origin === window.location.origin;
   }
-  formatHttpURL(e, b, x = true) {
-    e || (e = "");
+  get isServerless() {
+    return isWasm() || isIslands() || isStaticNotebook();
+  }
+  formatHttpURL({ path: e = "", searchParams: b, restrictToKnownQueryParams: x = true }) {
     let S = this.httpURL, w = new URLSearchParams(window.location.search);
     if (b) for (let [e2, x2] of b.entries()) S.searchParams.set(e2, x2);
     for (let [e2, b2] of w.entries()) x && !Object.values(KnownQueryParams).includes(e2) || S.searchParams.set(e2, b2);
     return S.pathname = `${S.pathname.replace(/\/$/, "")}/${e.replace(/^\//, "")}`, S.hash = "", S;
   }
   formatWsURL(e, b) {
-    let x = this.formatHttpURL(e, b, false);
+    let x = this.formatHttpURL({
+      path: e,
+      searchParams: b,
+      restrictToKnownQueryParams: false
+    });
     return !this.isSameOrigin && this.config.authToken && x.searchParams.set(KnownQueryParams.accessToken, this.config.authToken), asWsUrl(x.toString());
   }
   getWsURL(e) {
@@ -546,26 +552,33 @@ var RuntimeManager = class {
     return this.formatWsURL(`/lsp/${e}`);
   }
   getAiURL(e) {
-    return this.formatHttpURL(`/api/ai/${e}`);
+    return this.formatHttpURL({ path: `/api/ai/${e}` });
   }
   healthURL() {
-    return this.formatHttpURL("/health");
+    return this.formatHttpURL({ path: "/health" });
   }
-  async isHealthy() {
-    if (isWasm() || isIslands() || isStaticNotebook()) return true;
+  async fetchHealth() {
     try {
-      let e = await fetch(this.healthURL().toString());
-      if (e.redirected) {
-        Logger.debug(`Runtime redirected to ${e.url}`);
-        let x2 = new URL(e.url);
-        x2.pathname = x2.pathname.replace(/\/health$/, ""), this.config.url = x2.toString();
-      }
-      let x = e.ok;
-      return x && this.setDOMBaseUri(this.config.url), x;
+      return await fetch(this.healthURL().toString());
     } catch (e) {
-      return Logger.error(`Failed to check health: ${e instanceof Error ? e.message : "Unknown error"}`, { cause: e }), false;
+      return Logger.error(`Failed to check health: ${e instanceof Error ? e.message : "Unknown error"}`, { cause: e }), null;
     }
   }
+  async reconcileFromHealth() {
+    if (this.isServerless) return true;
+    let e = await this.fetchHealth();
+    if (!e) return false;
+    if (e.redirected) {
+      Logger.debug(`Runtime redirected to ${e.url}`);
+      let x = new URL(e.url);
+      x.pathname = x.pathname.replace(/\/health$/, ""), this.config.url = x.toString();
+    }
+    return e.ok && this.setDOMBaseUri(this.config.url), e.ok;
+  }
+  async probeHealth() {
+    var _a;
+    return this.isServerless ? true : ((_a = await this.fetchHealth()) == null ? void 0 : _a.ok) ?? false;
+  }
   setDOMBaseUri(e) {
     e = e.split("?", 1)[0], e.endsWith("/") || (e += "/");
     let b = document.querySelector("base");
@@ -574,7 +587,7 @@ var RuntimeManager = class {
   async init(e) {
     Logger.debug("Initializing runtime...");
     let x = 0;
-    for (; !await this.isHealthy(); ) {
+    for (; !await this.reconcileFromHealth(); ) {
       if (x >= 25) {
         Logger.error("Failed to connect after 25 retries"), this.initialHealthyCheck.reject(/* @__PURE__ */ Error("Failed to connect after 25 retries"));
         return;

package/dist/{tooltip-B0mtKTXm.js → tooltip-DRaMBu06.js}

@@ -1,10 +1,10 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
-import { f as createSlottable, g as cn, m as useComposedRefs } from "./button-CA5pI2YF.js";
+import { f as createSlottable, g as cn, m as useComposedRefs } from "./button-Dj4BTre0.js";
 import { t as require_react } from "./react-DA-nE2FX.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
-import { a as createPopperScope, i as Root2, n as Arrow, r as Content, s as Root, t as Anchor } from "./dist-ESg7xyoD.js";
+import { a as createPopperScope, i as Root2, n as Arrow, r as Content, s as Root, t as Anchor } from "./dist-D3ZI9nhS.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-COBk7ree.js";
-import { $ as StyleNamespace, X as withFullScreenAsRoot, Z as withSmartCollisionBoundary, _t as Primitive, dt as Presence, ft as useControllableState, gt as createContextScope, it as Portal, mt as composeEventHandlers, st as DismissableLayer, ut as useId } from "./zod-BxdsqRPd.js";
+import { $ as StyleNamespace, X as withFullScreenAsRoot, Z as withSmartCollisionBoundary, _t as Primitive, dt as Presence, ft as useControllableState, gt as createContextScope, it as Portal, mt as composeEventHandlers, st as DismissableLayer, ut as useId } from "./zod-BWkcDORu.js";
 var import_react = /* @__PURE__ */ __toESM(require_react(), 1), import_jsx_runtime = /* @__PURE__ */ __toESM(require_jsx_runtime(), 1), [createTooltipContext, createTooltipScope] = createContextScope("Tooltip", [createPopperScope]), usePopperScope = createPopperScope(), PROVIDER_NAME = "TooltipProvider", DEFAULT_DELAY_DURATION = 700, TOOLTIP_OPEN = "tooltip.open", [TooltipProviderContextProvider, useTooltipProviderContext] = createTooltipContext(PROVIDER_NAME), TooltipProvider$1 = (n) => {
   let { __scopeTooltip: j, delayDuration: M = DEFAULT_DELAY_DURATION, skipDelayDuration: N = 300, disableHoverableContent: P = false, children: F } = n, I = import_react.useRef(true), L = import_react.useRef(false), R = import_react.useRef(0);
   return import_react.useEffect(() => {

package/dist/{types-DBtDeUKD.js → types-Dzuoc3LN.js}

@@ -1,4 +1,4 @@
-import { u as createLucideIcon } from "./dist-ESg7xyoD.js";
+import { u as createLucideIcon } from "./dist-D3ZI9nhS.js";
 var Pencil = createLucideIcon("pencil", [["path", {
   d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z",
   key: "1a8usu"

package/dist/{useAsyncData-B6hCGywC.js → useAsyncData-C56Khv_R.js}

@@ -1,7 +1,7 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-DA-nE2FX.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
-import { w as useEvent_default } from "./useTheme-CByZUW0p.js";
+import { w as useEvent_default } from "./useTheme-DykuNHR2.js";
 import { t as invariant } from "./invariant-UcGKQEhF.js";
 var import_compiler_runtime = require_compiler_runtime(), import_react = /* @__PURE__ */ __toESM(require_react(), 1), Result = {
   error(e, s) {

package/dist/{useDateFormatter-B3mCQMP3.js → useDateFormatter-B_9k85Ex.js}

@@ -1,7 +1,7 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-DA-nE2FX.js";
-import { u as createLucideIcon } from "./dist-ESg7xyoD.js";
-import { T as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "./strings-B_FOH6eV.js";
+import { u as createLucideIcon } from "./dist-D3ZI9nhS.js";
+import { T as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "./strings-BiIhGaI8.js";
 var ChartPie = createLucideIcon("chart-pie", [["path", {
   d: "M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z",
   key: "pzmjnu"

package/dist/{useDeepCompareMemoize-CmwDuYUH.js → useDeepCompareMemoize-Dt98v2ua.js}

@@ -1,6 +1,6 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-DA-nE2FX.js";
-import { C as dequal } from "./useTheme-CByZUW0p.js";
+import { C as dequal } from "./useTheme-DykuNHR2.js";
 var import_react = /* @__PURE__ */ __toESM(require_react(), 1);
 function useDeepCompareMemoize(e) {
   let i = import_react.useRef(e);

package/dist/{useIframeCapabilities-DbdLoEDm.js → useIframeCapabilities-BkYHTrss.js}

@@ -1,7 +1,7 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-DA-nE2FX.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
-import { t as getIframeCapabilities } from "./capabilities-6laDasij.js";
+import { t as getIframeCapabilities } from "./capabilities-C9rrYCzf.js";
 var import_compiler_runtime = require_compiler_runtime();
 require_react();
 function useIframeCapabilities() {

package/dist/{useLifecycle-CjMjllqy.js → useLifecycle-BF6-z62y.js}

@@ -1,10 +1,10 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
-import { _ as Logger, g as cn, r as cva } from "./button-CA5pI2YF.js";
+import { _ as Logger, g as cn, r as cva } from "./button-Dj4BTre0.js";
 import { t as require_react } from "./react-DA-nE2FX.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
-import { u as createLucideIcon } from "./dist-ESg7xyoD.js";
+import { u as createLucideIcon } from "./dist-D3ZI9nhS.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-COBk7ree.js";
-import { _ as useSetAtom, y as atom } from "./useTheme-CByZUW0p.js";
+import { _ as useSetAtom, y as atom } from "./useTheme-DykuNHR2.js";
 var Calendar = createLucideIcon("calendar", [
   ["path", {
     d: "M8 2v4",

package/dist/{useTheme-CByZUW0p.js → useTheme-DykuNHR2.js}

@@ -1,8 +1,8 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
-import { _ as Logger, a as OverridingHotkeyProvider, s as resolvePlatform } from "./button-CA5pI2YF.js";
+import { _ as Logger, a as OverridingHotkeyProvider, s as resolvePlatform } from "./button-Dj4BTre0.js";
 import { t as require_react } from "./react-DA-nE2FX.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
-import { A as looseObject, B as union, I as record, N as number, P as object, R as string, T as boolean, b as _enum, w as array } from "./zod-BxdsqRPd.js";
+import { A as looseObject, B as union, I as record, N as number, P as object, R as string, T as boolean, b as _enum, w as array } from "./zod-BWkcDORu.js";
 import { t as merge_default } from "./merge-CHn7Yx0N.js";
 var import_react = /* @__PURE__ */ __toESM(require_react()), useInsertionEffect = typeof window < "u" ? import_react.useInsertionEffect || import_react.useLayoutEffect : () => {
 };

package/dist/{vega-component-C2BYPkfd.js → vega-component-cSdqoAxe.js}

@@ -1,24 +1,24 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
-import { _ as Logger, c as Objects, g as cn, h as Events } from "./button-CA5pI2YF.js";
+import { _ as Logger, c as Objects, g as cn, h as Events } from "./button-Dj4BTre0.js";
 import { t as require_react } from "./react-DA-nE2FX.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
-import { c as asRemoteURL, v as CircleQuestionMark } from "./toDate-CHtl9vts.js";
+import { c as asRemoteURL, v as CircleQuestionMark } from "./toDate-CIpC_34u.js";
 import "./react-dom-BWRJ_g_k.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-COBk7ree.js";
-import "./zod-BxdsqRPd.js";
-import { n as ErrorBanner } from "./error-banner-DnBPzEWg.js";
-import { t as Tooltip } from "./tooltip-B0mtKTXm.js";
+import "./zod-BWkcDORu.js";
+import { n as ErrorBanner } from "./error-banner-CVkfBUT3.js";
+import { t as Tooltip } from "./tooltip-DRaMBu06.js";
 import { i as debounce_default } from "./constants-D0gkYoE2.js";
-import { n as useTheme, w as useEvent_default } from "./useTheme-CByZUW0p.js";
+import { n as useTheme, w as useEvent_default } from "./useTheme-DykuNHR2.js";
 import { s as uniq } from "./arrays-CldYf7p7.js";
-import { a as isValid, i as AlertTitle, n as Alert, t as arrow } from "./formats-CgaK7Gmx.js";
+import { a as isValid, i as AlertTitle, n as Alert, t as arrow } from "./formats-Dsy9kkZu.js";
 import { n as formats } from "./vega-loader.browser-3_z8GoFC.js";
-import { a as getContainerWidth, n as vegaLoadData, s as tooltipHandler } from "./loader-BvW0-YWZ.js";
-import { t as useAsyncData } from "./useAsyncData-B6hCGywC.js";
+import { a as getContainerWidth, n as vegaLoadData, s as tooltipHandler } from "./loader-Dr8Qem8p.js";
+import { t as useAsyncData } from "./useAsyncData-C56Khv_R.js";
 import { t as j } from "./react-vega-Dh6-UKKe.js";
 import "./defaultLocale-BpsHxBd7.js";
 import "./defaultLocale-DoeErsX2.js";
-import { t as useDeepCompareMemoize } from "./useDeepCompareMemoize-CmwDuYUH.js";
+import { t as useDeepCompareMemoize } from "./useDeepCompareMemoize-Dt98v2ua.js";
 import { t as Semaphore } from "./semaphore-CNDGTzkX.js";
 var import_compiler_runtime = require_compiler_runtime(), import_react = /* @__PURE__ */ __toESM(require_react(), 1);
 function fixRelativeUrl(e) {

package/dist/{zod-BxdsqRPd.js → zod-BWkcDORu.js}

@@ -1,5 +1,5 @@
 import { r as __export, s as __toESM } from "./chunk-BNovOVIE.js";
-import { d as createSlot, l as useEventListener, m as useComposedRefs } from "./button-CA5pI2YF.js";
+import { d as createSlot, l as useEventListener, m as useComposedRefs } from "./button-Dj4BTre0.js";
 import { t as require_react } from "./react-DA-nE2FX.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
 import { t as require_react_dom } from "./react-dom-BWRJ_g_k.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.23.7-dev9",
+  "version": "0.23.7-dev90",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",
@@ -21,7 +21,7 @@
     "./unstable_internal/*": "./src/*"
   },
   "dependencies": {
-    "@ai-sdk/react": "^3.0.131",
+    "@ai-sdk/react": "^3.0.134",
     "@anywidget/types": "^0.2.0",
     "@codemirror/autocomplete": "^6.20.1",
     "@codemirror/commands": "^6.10.2",
@@ -120,7 +120,7 @@
     "lz-string": "^1.5.0",
     "marked": "^15.0.12",
     "mermaid": "^11.12.3",
-    "partysocket": "1.1.10",
+    "partysocket": "1.1.13",
     "path-to-regexp": "^8.4.0",
     "plotly.js": "^3.3.1",
     "pyodide": "0.27.7",

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

@@ -13,6 +13,7 @@ import {
 } from "lucide-react";
 import { useState } from "react";
 import { cn } from "@/utils/cn";
+import { isUrl } from "@/utils/urls";
 import { Spinner } from "../icons/spinner";
 import { Button } from "../ui/button";
 import { Input } from "../ui/input";
@@ -182,3 +183,49 @@ function renderFileIcon(file: File): React.ReactNode {
 
   return <FileIcon className={classNames} />;
 }
+
+export const SourceChip = ({
+  icon,
+  title,
+  subtitle,
+  href,
+}: {
+  icon: React.ReactNode;
+  title: string;
+  subtitle?: string;
+  href?: string;
+}) => {
+  const content = (
+    <>
+      {icon}
+      <span className="truncate font-medium">{title}</span>
+      {subtitle && <span className="truncate opacity-70">({subtitle})</span>}
+    </>
+  );
+
+  const className =
+    "inline-flex max-w-full items-center gap-1.5 rounded-md border bg-muted/50 px-2 py-1 my-1 text-xs text-muted-foreground";
+
+  // Only treat absolute http(s) URLs as safe to render as a clickable link.
+  // Source URLs come from model output (e.g. citations) and could otherwise
+  // smuggle in `javascript:`/`data:` schemes.
+  if (href && isUrl(href)) {
+    return (
+      <a
+        href={href}
+        target="_blank"
+        rel="noopener noreferrer"
+        title={subtitle ?? title}
+        className={`${className} hover:bg-muted hover:text-foreground transition-colors`}
+      >
+        {content}
+      </a>
+    );
+  }
+
+  return (
+    <div className={className} title={subtitle ?? title}>
+      {content}
+    </div>
+  );
+};

package/src/components/chat/chat-display.tsx

@@ -1,23 +1,31 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import type { DataUIPart, ToolUIPart, UIMessage } from "ai";
+import type {
+  ChatAddToolApproveResponseFunction,
+  DataUIPart,
+  ToolUIPart,
+  UIMessage,
+} from "ai";
+import { ExternalLinkIcon, FileTextIcon } from "lucide-react";
 import React from "react";
 import { renderHTML } from "@/plugins/core/RenderHTML";
 import { logNever } from "@/utils/assertNever";
 import { Logger } from "@/utils/Logger";
 import { MarkdownRenderer } from "../markdown/markdown-renderer";
-import { AttachmentRenderer } from "./chat-components";
+import { AttachmentRenderer, SourceChip } from "./chat-components";
 import { ReasoningAccordion } from "./reasoning-accordion";
-import { ToolCallAccordion } from "./tool-call-accordion";
+import { ToolCallView } from "./tool-call/tool-call-view";
 
 export const renderUIMessage = ({
   message,
   isStreamingReasoning,
   isLast,
+  addToolApprovalResponse,
 }: {
   message: UIMessage;
   isStreamingReasoning: boolean;
   isLast: boolean;
+  addToolApprovalResponse?: ChatAddToolApproveResponseFunction;
 }) => {
   return (
     <>{message.parts.map((part, index) => renderUIMessagePart(part, index))}</>
@@ -29,14 +37,18 @@ export const renderUIMessage = ({
   ) {
     if (isToolPart(part)) {
       return (
-        <ToolCallAccordion
+        <ToolCallView
           key={index}
           index={index}
           toolName={part.type}
           result={part.output}
+          errorText={part.state === "output-error" ? part.errorText : undefined}
           className="my-2"
           state={part.state}
           input={part.input}
+          approval={part.approval}
+          onApprove={addToolApprovalResponse}
+          isLive={isLast}
         />
       );
     }
@@ -69,7 +81,7 @@ export const renderUIMessage = ({
             isStreaming={
               isStreamingReasoning &&
               isLast &&
-              // If there are multiple reasoning parts, only show the last one
+              // If there are multiple reasoning parts, only stream the last one
               index === (message.parts.length || 0) - 1
             }
           />
@@ -78,18 +90,40 @@ export const renderUIMessage = ({
         return <AttachmentRenderer attachment={part} key={index} />;
       case "dynamic-tool":
         return (
-          <ToolCallAccordion
+          <ToolCallView
             key={index}
             toolName={part.toolName}
             result={part.output}
+            errorText={
+              part.state === "output-error" ? part.errorText : undefined
+            }
             state={part.state}
             input={part.input}
+            approval={part.approval}
+            onApprove={addToolApprovalResponse}
+            isLive={isLast}
           />
         );
       case "source-document":
+        return (
+          <SourceChip
+            key={index}
+            icon={<FileTextIcon className="h-3 w-3 shrink-0" />}
+            title={part.title}
+            subtitle={part.filename}
+          />
+        );
       case "source-url":
+        return (
+          <SourceChip
+            key={index}
+            icon={<ExternalLinkIcon className="h-3 w-3 shrink-0" />}
+            title={part.title ?? part.url}
+            subtitle={part.title ? part.url : undefined}
+            href={part.url}
+          />
+        );
       case "step-start":
-        Logger.debug("Found non-renderable part", part);
         return null;
       default:
         logNever(part);

package/src/components/chat/chat-panel.tsx

@@ -4,7 +4,13 @@ import type { UIMessage } from "@ai-sdk/react";
 import { useChat } from "@ai-sdk/react";
 import { storePrompt } from "@marimo-team/codemirror-ai";
 import type { ReactCodeMirrorRef } from "@uiw/react-codemirror";
-import { DefaultChatTransport, type FileUIPart, type TextUIPart } from "ai";
+import {
+  type ChatAddToolApproveResponseFunction,
+  DefaultChatTransport,
+  type FileUIPart,
+  safeValidateUIMessages,
+  type TextUIPart,
+} from "ai";
 import { useAtom, useAtomValue, useSetAtom, useStore } from "jotai";
 import {
   BotMessageSquareIcon,
@@ -131,10 +137,18 @@ interface ChatMessageProps {
   onEdit: (index: number, newValue: string) => void;
   isStreamingReasoning: boolean;
   isLast: boolean;
+  addToolApprovalResponse?: ChatAddToolApproveResponseFunction;
 }
 
 const ChatMessageDisplay: React.FC<ChatMessageProps> = memo(
-  ({ message, index, onEdit, isStreamingReasoning, isLast }) => {
+  ({
+    message,
+    index,
+    onEdit,
+    isStreamingReasoning,
+    isLast,
+    addToolApprovalResponse,
+  }) => {
     const renderUserMessage = (message: UIMessage) => {
       const textParts = message.parts?.filter(
         (p): p is TextUIPart => p.type === "text",
@@ -181,7 +195,12 @@ const ChatMessageDisplay: React.FC<ChatMessageProps> = memo(
           <div className="absolute right-1 top-1 opacity-0 group-hover:opacity-100 transition-opacity">
             <CopyClipboardIcon className="h-3 w-3" value={content || ""} />
           </div>
-          {renderUIMessage({ message, isStreamingReasoning, isLast })}
+          {renderUIMessage({
+            message,
+            isStreamingReasoning,
+            isLast,
+            addToolApprovalResponse,
+          })}
         </div>
       );
     };
@@ -458,6 +477,7 @@ const ChatPanelBody = () => {
     regenerate,
     stop,
     addToolOutput,
+    addToolApprovalResponse,
     id: chatId,
   } = useChat({
     id: activeChatId,
@@ -467,6 +487,19 @@ const ChatPanelBody = () => {
       api: runtimeManager.getAiURL("chat").toString(),
       headers: () => runtimeManager.headers(),
       prepareSendMessagesRequest: async (options) => {
+        // Canary: flag outgoing messages that don't match the AI SDK's own
+        // schema. The server-side sanitizer in `_pydantic_ai_utils.py` corrects these before validation;
+        // this log surfaces drift early without affecting the request.
+        const validation = await safeValidateUIMessages({
+          messages: options.messages,
+        });
+        if (!validation.success) {
+          Logger.debug(
+            "Outgoing chat messages failed AI SDK schema validation",
+            validation.error,
+          );
+        }
+
         const completionBody = await buildCompletionRequestBody(
           options.messages,
         );
@@ -495,13 +528,6 @@ const ChatPanelBody = () => {
       });
     },
     onToolCall: async ({ toolCall }) => {
-      // Dynamic tool calls will throw an error for toolName
-      // https://ai-sdk.dev/docs/ai-sdk-ui/chatbot-tool-usage#client-side-page
-      if (toolCall.dynamic) {
-        Logger.debug("Skipping dynamic tool call", toolCall);
-        return;
-      }
-
       await handleToolCall({
         invokeAiTool,
         addToolOutput,
@@ -712,6 +738,7 @@ const ChatPanelBody = () => {
             onEdit={handleMessageEdit}
             isStreamingReasoning={isStreamingReasoning}
             isLast={idx === messages.length - 1}
+            addToolApprovalResponse={addToolApprovalResponse}
           />
         ))}
 

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() {