@marimo-team/islands 0.23.17-dev33 → 0.23.17-dev34

package/dist/{toDate-kxcuDOWd.js → toDate-eW__SzBR.js}

@@ -4,8 +4,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 import { t as __commonJSMin } from "./chunk-BNovOVIE.js";
 import { g as Logger } from "./button-8aS1QcHr.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
-import { u as createLucideIcon } from "./dist-DgzzIPS4.js";
-import { S as useAtomValue, T as atom, a as KnownQueryParams, g as store, v as waitFor, y as isIslands } from "./useTheme-CEMsu1Js.js";
+import { u as createLucideIcon } from "./dist-DarwE0ZO.js";
+import { S as useAtomValue, T as atom, a as KnownQueryParams, g as store, v as waitFor, y as isIslands } from "./useTheme-BUY7pfI9.js";
 import { t as invariant } from "./invariant-wRzNXIsJ.js";
 var CircleQuestionMark = createLucideIcon("circle-question-mark", [
   ["circle", {

package/dist/{tooltip-BkSv4x8S.js → tooltip-CkCWlUOf.js}

@@ -2,9 +2,9 @@ import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { d as createSlottable, h as cn, p as useComposedRefs } from "./button-8aS1QcHr.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-DgzzIPS4.js";
+import { a as createPopperScope, i as Root2, n as Arrow, r as Content, s as Root, t as Anchor } from "./dist-DarwE0ZO.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-DebpN0FN.js";
-import { Q as withSmartCollisionBoundary, Z as withFullScreenAsRoot, _t as createContextScope, at as Portal, ct as DismissableLayer, dt as useId, et as StyleNamespace, ft as Presence, ht as composeEventHandlers, pt as useControllableState, vt as Primitive } from "./zod-DdNi9290.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-yTHHzJiv.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-kNUyqkDD.js → types-uENjXsiC.js}

@@ -1,4 +1,4 @@
-import { u as createLucideIcon } from "./dist-DgzzIPS4.js";
+import { u as createLucideIcon } from "./dist-DarwE0ZO.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-Uo4VFafD.js → useAsyncData-B8UxSH4O.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 { A as useEvent_default } from "./useTheme-CEMsu1Js.js";
+import { A as useEvent_default } from "./useTheme-BUY7pfI9.js";
 import { t as invariant } from "./invariant-wRzNXIsJ.js";
 var import_compiler_runtime = require_compiler_runtime(), import_react = /* @__PURE__ */ __toESM(require_react(), 1), Result = {
   error(e, s) {

package/dist/{useDateFormatter-ZCfHadYP.js → useDateFormatter-BeN3fHMH.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-DgzzIPS4.js";
-import { E as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "./strings-CITcoFNY.js";
+import { u as createLucideIcon } from "./dist-DarwE0ZO.js";
+import { E as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "./strings-BUDhKc0s.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-s3ZvmdK3.js → useDeepCompareMemoize-BnhKck7C.js}

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

package/dist/{useLifecycle-CLPBATCv.js → useLifecycle-B7J7yvFt.js}

@@ -2,9 +2,9 @@ import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { g as Logger, h as cn, r as cva } from "./button-8aS1QcHr.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-DgzzIPS4.js";
+import { u as createLucideIcon } from "./dist-DarwE0ZO.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-DebpN0FN.js";
-import { C as useSetAtom, T as atom } from "./useTheme-CEMsu1Js.js";
+import { C as useSetAtom, T as atom } from "./useTheme-BUY7pfI9.js";
 var Calendar = createLucideIcon("calendar", [
   ["path", {
     d: "M8 2v4",

package/dist/{useTheme-CEMsu1Js.js → useTheme-BUY7pfI9.js}

@@ -2,7 +2,7 @@ import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { a as OverridingHotkeyProvider, g as Logger, s as resolvePlatform } from "./button-8aS1QcHr.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-DdNi9290.js";
+import { A as looseObject, I as record, L as string, N as number, P as object, T as boolean, b as _enum, w as array, z as union } from "./zod-yTHHzJiv.js";
 import { t as merge_default } from "./merge-Be1CqGnU.js";
 var import_react = /* @__PURE__ */ __toESM(require_react()), useInsertionEffect = typeof window < "u" ? import_react.useInsertionEffect || import_react.useLayoutEffect : () => {
 };

package/dist/{vega-component-DGkcoXu3.js → vega-component-BOeMnvAb.js}

@@ -2,24 +2,24 @@ import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { g as Logger, h as cn, m as Events } from "./button-8aS1QcHr.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, w as CircleQuestionMark } from "./toDate-kxcuDOWd.js";
+import { c as asRemoteURL, w as CircleQuestionMark } from "./toDate-eW__SzBR.js";
 import "./react-dom-BTJzcVJ9.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-DebpN0FN.js";
-import "./zod-DdNi9290.js";
-import { n as ErrorBanner } from "./error-banner-DHfPl1w3.js";
-import { t as Tooltip } from "./tooltip-BkSv4x8S.js";
+import "./zod-yTHHzJiv.js";
+import { n as ErrorBanner } from "./error-banner-dmkbm21G.js";
+import { t as Tooltip } from "./tooltip-CkCWlUOf.js";
 import { t as debounce_default } from "./debounce-BOD3DbfP.js";
-import { A as useEvent_default, n as useTheme } from "./useTheme-CEMsu1Js.js";
+import { A as useEvent_default, n as useTheme } from "./useTheme-BUY7pfI9.js";
 import { s as uniq } from "./arrays-sEtDRoG4.js";
 import { t as Objects } from "./objects-De59twF-.js";
-import { a as isValid, i as AlertTitle, n as Alert, t as arrow } from "./formats-D10vOEsT.js";
+import { a as isValid, i as AlertTitle, n as Alert, t as arrow } from "./formats-DcO6TofP.js";
 import { V as getContainerWidth, n as formats } from "./vega-loader.browser-DmpxCJqx.js";
 import { a as tooltipHandler, n as vegaLoadData } from "./loader-DP2JkPth.js";
 import { t as j } from "./react-vega-BazDALhI.js";
 import "./defaultLocale-BpsHxBd7.js";
 import "./defaultLocale-DoeErsX2.js";
-import { t as useAsyncData } from "./useAsyncData-Uo4VFafD.js";
-import { t as useDeepCompareMemoize } from "./useDeepCompareMemoize-s3ZvmdK3.js";
+import { t as useAsyncData } from "./useAsyncData-B8UxSH4O.js";
+import { t as useDeepCompareMemoize } from "./useDeepCompareMemoize-BnhKck7C.js";
 import { t as Semaphore } from "./semaphore-C8rmHdhj.js";
 import { t as useVegaContainerRemeasure } from "./use-vega-container-remeasure-DGNrIQSk.js";
 var import_compiler_runtime = require_compiler_runtime(), import_react = /* @__PURE__ */ __toESM(require_react(), 1);

package/dist/{zod-DdNi9290.js → zod-yTHHzJiv.js}

@@ -11758,77 +11758,76 @@ var external_exports = /* @__PURE__ */ __export({
 config(en_default());
 var zod_default = external_exports;
 export {
-  isInVscodeExtension as $,
+  StyleNamespace as $,
   looseObject as A,
-  union as B,
+  unknown as B,
   any as C,
   discriminatedUnion as D,
   custom as E,
   optional as F,
-  parse$1 as G,
-  safeParseAsync as H,
+  parseAsync$1 as G,
+  ZodError as H,
   record as I,
-  prettifyError as J,
-  parseAsync$1 as K,
-  strictObject as L,
+  MAX_HEIGHT_OFFSET as J,
+  $ZodError as K,
+  string$1 as L,
   never as M,
   number$1 as N,
   lazy as O,
   object as P,
-  withSmartCollisionBoundary as Q,
-  string$1 as R,
+  isInVscodeExtension as Q,
+  tuple as R,
   _null as S,
   boolean$1 as T,
-  ZodError as U,
-  unknown as V,
-  toJSONSchema as W,
-  useFullScreenElement as X,
-  MAX_HEIGHT_OFFSET as Y,
-  withFullScreenAsRoot as Z,
+  toJSONSchema as U,
+  safeParseAsync as V,
+  parse$1 as W,
+  withFullScreenAsRoot as X,
+  useFullScreenElement as Y,
+  withSmartCollisionBoundary as Z,
   ZodString as _,
-  createContextScope as _t,
+  Primitive as _t,
   ZodIssueCode as a,
-  Portal as at,
+  FocusScope as at,
   _enum as b,
   ZodBoolean as c,
-  DismissableLayer as ct,
+  Root as ct,
   ZodDiscriminatedUnion as d,
-  useId as dt,
-  StyleNamespace as et,
+  Presence as dt,
+  hideOthers as et,
   ZodEnum as f,
-  Presence as ft,
+  useControllableState as ft,
   ZodOptional as g,
-  createContext2 as gt,
+  createContextScope as gt,
   ZodObject as h,
-  composeEventHandlers as ht,
+  createContext2 as ht,
   string as i,
-  useFocusGuards as it,
+  Portal as it,
   nan as j,
   literal as k,
   ZodDate as l,
-  Root as lt,
+  useCallbackRef$1 as lt,
   ZodNumber as m,
-  useLayoutEffect2 as mt,
+  composeEventHandlers as mt,
   date as n,
-  Combination_default as nt,
+  __awaiter as nt,
   ZodAny as o,
-  FocusScope as ot,
+  Branch as ot,
   ZodLiteral as p,
-  useControllableState as pt,
-  $ZodError as q,
+  useLayoutEffect2 as pt,
+  prettifyError as q,
   number as r,
-  __awaiter as rt,
+  useFocusGuards as rt,
   ZodArray as s,
-  Branch as st,
+  DismissableLayer as st,
   zod_default as t,
-  hideOthers as tt,
+  Combination_default as tt,
   ZodDefault as u,
-  useCallbackRef$1 as ut,
+  useId as ut,
   ZodType as v,
-  Primitive as vt,
+  dispatchDiscreteCustomEvent as vt,
   array as w,
   _instanceof as x,
   ZodUnion as y,
-  dispatchDiscreteCustomEvent as yt,
-  tuple as z
+  union as z
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.23.17-dev33",
+  "version": "0.23.17-dev34",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",
@@ -21,7 +21,7 @@
     "./unstable_internal/*": "./src/*"
   },
   "dependencies": {
-    "@ai-sdk/react": "^3.0.134",
+    "@ai-sdk/react": "^4.0.40",
     "@anywidget/types": "^0.4.0",
     "@codemirror/autocomplete": "^6.20.1",
     "@codemirror/commands": "^6.10.2",
@@ -92,7 +92,7 @@
     "@xterm/addon-web-links": "^0.12.0",
     "@xterm/xterm": "^5.5.0",
     "@zed-industries/agent-client-protocol": "^0.4.5",
-    "ai": "^6.0.129",
+    "ai": "^7.0.37",
     "ansi_up": "^6.0.6",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

package/src/components/chat/__tests__/chat-abort.test.ts

@@ -0,0 +1,51 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { UIMessageChunk } from "ai";
+import { describe, expect, it } from "vitest";
+import {
+  describeChatAbortReason,
+  getAbortReasonFromChunk,
+  resolveChatAbortReason,
+  USER_CANCELLED_ABORT_REASON,
+} from "../chat-abort";
+
+describe("chat-abort", () => {
+  it("reads reason from abort chunks", () => {
+    const chunk: UIMessageChunk = {
+      type: "abort",
+      reason: USER_CANCELLED_ABORT_REASON,
+    };
+    expect(getAbortReasonFromChunk(chunk)).toBe(USER_CANCELLED_ABORT_REASON);
+  });
+
+  it("returns undefined for non-abort chunks", () => {
+    expect(
+      getAbortReasonFromChunk({ type: "text-delta", id: "1", delta: "hi" }),
+    ).toBeUndefined();
+  });
+
+  it("defaults client-side aborts to user_cancelled", () => {
+    expect(resolveChatAbortReason({ isAbort: true, streamReason: null })).toBe(
+      USER_CANCELLED_ABORT_REASON,
+    );
+    expect(resolveChatAbortReason({ isAbort: false })).toBeNull();
+  });
+
+  it("preserves stream abort reasons when present", () => {
+    expect(
+      resolveChatAbortReason({ isAbort: true, streamReason: "timeout" }),
+    ).toBe("timeout");
+  });
+
+  it("describes known and unknown abort reasons", () => {
+    expect(describeChatAbortReason(USER_CANCELLED_ABORT_REASON)).toBe(
+      "Generation stopped",
+    );
+    expect(describeChatAbortReason("timeout")).toBe(
+      "Generation stopped: timed out",
+    );
+    expect(describeChatAbortReason("provider_reset")).toBe(
+      "Generation stopped: provider_reset",
+    );
+  });
+});

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

@@ -0,0 +1,44 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { UIMessageChunk } from "ai";
+
+/** Matches pydantic-ai / marimo AbortChunk.reason for user Stop. */
+export const USER_CANCELLED_ABORT_REASON = "user_cancelled";
+
+/**
+ * Read an abort reason from a UI message stream chunk, if present.
+ */
+export function getAbortReasonFromChunk(
+  chunk: UIMessageChunk,
+): string | undefined {
+  if (chunk.type !== "abort") {
+    return undefined;
+  }
+  return chunk.reason;
+}
+
+/**
+ * Resolve the abort reason for logging/UI. Client-side Stop often never
+ * receives a server AbortChunk (the fetch is aborted first), so default to
+ * user_cancelled when the turn ended as an abort.
+ */
+export function resolveChatAbortReason(opts: {
+  isAbort: boolean;
+  streamReason?: string | null;
+}): string | null {
+  if (!opts.isAbort) {
+    return null;
+  }
+  return opts.streamReason || USER_CANCELLED_ABORT_REASON;
+}
+
+export function describeChatAbortReason(reason: string): string {
+  switch (reason) {
+    case USER_CANCELLED_ABORT_REASON:
+      return "Generation stopped";
+    case "timeout":
+      return "Generation stopped: timed out";
+    default:
+      return `Generation stopped: ${reason}`;
+  }
+}

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

@@ -92,6 +92,17 @@ export const renderUIMessage = ({
         );
       case "file":
         return <AttachmentRenderer attachment={part} key={index} />;
+      case "reasoning-file":
+        return (
+          <AttachmentRenderer
+            key={index}
+            attachment={{
+              type: "file",
+              mediaType: part.mediaType,
+              url: part.url,
+            }}
+          />
+        );
       case "dynamic-tool":
         return (
           <ToolCallView
@@ -128,6 +139,12 @@ export const renderUIMessage = ({
             href={part.url}
           />
         );
+      case "custom":
+        return (
+          <div key={index} className="text-sm text-muted-foreground">
+            {part.kind}
+          </div>
+        );
       case "step-start":
         return null;
       default:

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

@@ -6,7 +6,6 @@ import { storePrompt } from "@marimo-team/codemirror-ai";
 import type { ReactCodeMirrorRef } from "@uiw/react-codemirror";
 import {
   type ChatAddToolApproveResponseFunction,
-  DefaultChatTransport,
   type FileUIPart,
   safeValidateUIMessages,
   type TextUIPart,
@@ -38,6 +37,7 @@ import {
 } from "@/components/ui/select";
 import { replaceMessagesInChat } from "@/core/ai/chat-utils";
 import { useModelChange } from "@/core/ai/config";
+import { AI_SDK_UI_THROTTLE_MS } from "@/core/ai/constants";
 import { AiModelId } from "@/core/ai/ids/ids";
 import { useStagedAICellsActions } from "@/core/ai/staged-cells";
 import {
@@ -71,6 +71,7 @@ import {
   isContextAttachment,
   resolveChatContext,
 } from "../editor/ai/completion-utils";
+import { StreamingChunkTransport } from "../editor/ai/transport/chat-transport";
 import { PanelEmptyState } from "../editor/chrome/panels/empty-state";
 import { CopyClipboardIcon } from "../icons/copy-icon";
 import { useImperativeModal } from "../modal/ImperativeModal";
@@ -83,6 +84,11 @@ import {
   FileAttachmentPill,
   SendButton,
 } from "./chat-components";
+import {
+  describeChatAbortReason,
+  getAbortReasonFromChunk,
+  resolveChatAbortReason,
+} from "./chat-abort";
 import { renderUIMessage } from "./chat-display";
 import { ChatHistoryPopover } from "./chat-history-popover";
 import {
@@ -533,6 +539,12 @@ const ChatPanelBody = () => {
   const newMessageInputRef = useRef<ReactCodeMirrorRef>(null);
   const scrollContainerRef = useRef<HTMLDivElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
+  const lastAbortReasonRef = useRef<string | null>(null);
+  const [abortNotice, setAbortNotice] = useState<string | null>(null);
+  const clearAbortState = useEvent(() => {
+    lastAbortReasonRef.current = null;
+    setAbortNotice(null);
+  });
   const runtimeManager = useRuntimeManager();
   const { invokeAiTool, sendRun } = useRequestClient();
   const { openModal, closeModal } = useImperativeModal();
@@ -562,45 +574,54 @@ const ChatPanelBody = () => {
     id: chatId,
   } = useChat({
     id: activeChatId,
+    throttle: AI_SDK_UI_THROTTLE_MS,
     sendAutomaticallyWhen: ({ messages }) => hasPendingToolCalls(messages),
     messages: activeChat?.messages || [], // initial messages
-    transport: new DefaultChatTransport({
-      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,
-          );
-        }
+    transport: new StreamingChunkTransport(
+      {
+        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 = {
-          uiMessages: options.messages,
-          includeOtherCode: getCodes(""),
-        };
-
-        // Call this here to ensure the value is not stale
-        const chatMode = store.get(aiAtom)?.mode || DEFAULT_MODE;
-        const tools = FRONTEND_TOOL_REGISTRY.getToolSchemas(chatMode);
-
-        return {
-          api: runtimeManager.getAiURL("chat").toString(),
-          body: {
-            tools,
-            ...options,
-            ...completionBody,
-          },
-        };
+          const completionBody = {
+            uiMessages: options.messages,
+            includeOtherCode: getCodes(""),
+          };
+
+          // Call this here to ensure the value is not stale
+          const chatMode = store.get(aiAtom)?.mode || DEFAULT_MODE;
+          const tools = FRONTEND_TOOL_REGISTRY.getToolSchemas(chatMode);
+
+          return {
+            api: runtimeManager.getAiURL("chat").toString(),
+            body: {
+              tools,
+              ...options,
+              ...completionBody,
+            },
+          };
+        },
+      },
+      (chunk) => {
+        const abortReason = getAbortReasonFromChunk(chunk);
+        if (abortReason !== undefined) {
+          lastAbortReasonRef.current = abortReason;
+        }
       },
-    }),
-    onFinish: ({ messages, isError, isAbort }) => {
+    ),
+    onFinish: ({ messages, isError, isAbort, finishReason }) => {
       setChatState((prev) => {
         return replaceMessagesInChat({
           chatState: prev,
@@ -608,6 +629,22 @@ const ChatPanelBody = () => {
           messages: messages,
         });
       });
+
+      if (isAbort) {
+        const reason = resolveChatAbortReason({
+          isAbort: true,
+          streamReason: lastAbortReasonRef.current,
+        });
+        clearAbortState();
+        if (reason != null) {
+          const description = describeChatAbortReason(reason);
+          Logger.debug("Chat stream aborted", { reason, finishReason });
+          setAbortNotice(description);
+        }
+      } else {
+        clearAbortState();
+      }
+
       tryFlushQueuedMessages(messages, { isError, isAbort });
     },
     onToolCall: async ({ toolCall }) => {
@@ -628,6 +665,7 @@ const ChatPanelBody = () => {
   });
 
   const sendUserMessage = useEvent((parts: ChatMessagePart[]) => {
+    clearAbortState();
     sendMessage({ role: "user", parts });
   });
 
@@ -701,7 +739,8 @@ const ChatPanelBody = () => {
   useEffect(() => {
     setIsScrolledToBottom(true);
     clearQueuedMessages();
-  }, [activeChatId, clearQueuedMessages]);
+    clearAbortState();
+  }, [activeChatId, clearQueuedMessages, clearAbortState]);
 
   useEffect(() => {
     if (!isScrolledToBottom) {
@@ -833,6 +872,7 @@ const ChatPanelBody = () => {
   );
 
   const handleReload = () => {
+    clearAbortState();
     regenerate();
   };
 
@@ -987,6 +1027,14 @@ const ChatPanelBody = () => {
               </Button>
             </div>
           )}
+
+          {abortNotice && !isLoading && !error && (
+            <div className="flex justify-center py-2">
+              <span className="text-xs text-muted-foreground">
+                {abortNotice}
+              </span>
+            </div>
+          )}
         </div>
 
         <ScrollToBottomButton

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

@@ -291,7 +291,7 @@ export function shouldFlushQueue(opts: {
 export function useMessageQueue() {
   const [messages, setMessages] = useState<QueuedUserMessage[]>([]);
   // Mirror the queue in a ref so `flushNext` reads the latest value even when
-  // invoked from a callback (e.g. `onFinish`) captured on an earlier render.
+  // invoked from a callback (e.g. `onFinish`) in the same tick as `enqueue`.
   const messagesRef = useRef<QueuedUserMessage[]>([]);
   const hasQueuedRef = useRef(false);
   messagesRef.current = messages;

package/src/components/editor/ai/add-cell-with-ai.tsx

@@ -51,6 +51,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { toast } from "@/components/ui/use-toast";
 import { AiModelId } from "@/core/ai/ids/ids";
+import { AI_SDK_UI_THROTTLE_MS } from "@/core/ai/constants";
 import { stagedAICellsAtom, useStagedCells } from "@/core/ai/staged-cells";
 import type { ToolNotebookContext } from "@/core/ai/tools/base";
 import { useCellActions } from "@/core/cells/cells";
@@ -117,8 +118,7 @@ export const AddCellWithAI: React.FC<{
   };
 
   const { sendMessage, stop, status, addToolOutput } = useChat({
-    // Throttle the messages and data updates to 100ms
-    experimental_throttle: 100,
+    throttle: AI_SDK_UI_THROTTLE_MS,
     transport: new StreamingChunkTransport(
       {
         api: runtimeManager.getAiURL("completion").toString(),

package/src/components/editor/ai/ai-completion-editor.tsx

@@ -27,6 +27,7 @@ import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
 import { Tooltip } from "@/components/ui/tooltip";
 import { toast } from "@/components/ui/use-toast";
+import { AI_SDK_UI_THROTTLE_MS } from "@/core/ai/constants";
 import { stripWrappingBackticks } from "@/core/ai/strip-wrapping-backticks";
 import { type AiCompletionCell, includeOtherCellsAtom } from "@/core/ai/state";
 import type { CellId } from "@/core/cells/ids";
@@ -124,8 +125,7 @@ export const AiCompletionEditor: React.FC<Props> = ({
     api: runtimeManager.getAiURL("completion").toString(),
     headers: runtimeManager.headers(),
     initialInput: initialPrompt,
-    // Throttle the messages and data updates to 100ms
-    experimental_throttle: 100,
+    throttle: AI_SDK_UI_THROTTLE_MS,
     body: {
       ...(Object.keys(completionBody).length > 0
         ? completionBody

package/src/core/ai/constants.ts

@@ -0,0 +1,7 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+/**
+ * Throttle wait (ms) for AI SDK React hooks (`useChat` / `useCompletion`).
+ * Limits UI re-renders while streaming tokens.
+ */
+export const AI_SDK_UI_THROTTLE_MS = 100;