@marimo-team/islands 0.23.17-dev9 → 0.24.0

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,
@@ -37,13 +36,15 @@ import {
   SelectTrigger,
 } from "@/components/ui/select";
 import { replaceMessagesInChat } from "@/core/ai/chat-utils";
-import { useModelChange } from "@/core/ai/config";
+import { useAIConfigActions } 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 {
   activeChatAtom,
   type Chat,
   type ChatId,
+  chatOptionsAtom,
   chatStateAtom,
   pendingAiPromptAtom,
 } from "@/core/ai/state";
@@ -71,6 +72,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,8 +85,14 @@ 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 { CapabilitiesPopover } from "./capabilities-popover";
 import {
   type ChatMessagePart,
   convertToFileUIPart,
@@ -102,6 +110,7 @@ import {
 import { getCodes } from "@/core/codemirror/copilot/getCodes";
 import { focusInputAndMoveToEnd } from "@/core/codemirror/utils";
 import ScrollToBottomButton from "./acp/scroll-to-bottom-button";
+import { useChatControllerId } from "./use-chat-controller-id";
 
 // Default mode for the AI
 const DEFAULT_MODE = "manual";
@@ -292,7 +301,7 @@ const ChatInputFooter: React.FC<ChatInputFooterProps> = memo(
     const currentModel = ai?.models?.chat_model || DEFAULT_AI_MODEL;
     const currentProvider = AiModelId.parse(currentModel).providerId;
 
-    const { saveModeChange } = useModelChange();
+    const { saveModeChange } = useAIConfigActions();
 
     const modeOptions: {
       value: CopilotMode;
@@ -320,8 +329,9 @@ const ChatInputFooter: React.FC<ChatInputFooterProps> = memo(
       },
       {
         value: "code_mode",
-        label: "Code Mode (experimental)",
-        subtitle: "AI with access to the notebook's kernel. Use with caution.",
+        label: "Code Mode (beta)",
+        subtitle:
+          "AI with access to the notebook's kernel. Potentially destructive.",
         Icon: CodeIcon,
       },
     ];
@@ -335,12 +345,12 @@ const ChatInputFooter: React.FC<ChatInputFooterProps> = memo(
 
     return (
       <TooltipProvider>
-        <div className="px-3 py-2 border-t border-border/20 flex flex-row flex-wrap items-center justify-between gap-1">
-          <div className="flex items-center gap-2">
+        <div className="px-3 py-2 border-t border-border/20 flex flex-wrap items-center gap-1">
+          <div className="flex flex-wrap items-center gap-1">
             <Select value={currentMode} onValueChange={saveModeChange}>
-              <SelectTrigger className="h-6 text-xs border-border shadow-none! ring-0! bg-muted hover:bg-muted/30 py-0 px-2 gap-1.5">
+              <SelectTrigger className="h-6 text-xs border-border shadow-none! ring-0! bg-muted hover:bg-muted/30 py-0 px-2 gap-1.5 shrink-0">
                 {CurrentModeIcon && <CurrentModeIcon className="h-3 w-3" />}
-                <span>{CurrentModeLabel}</span>
+                <span className="text-nowrap">{CurrentModeLabel}</span>
               </SelectTrigger>
               <SelectContent>
                 <SelectGroup>
@@ -371,13 +381,14 @@ const ChatInputFooter: React.FC<ChatInputFooterProps> = memo(
             </Select>
             <AIModelDropdown
               placeholder="Model"
-              triggerClassName="h-6 text-xs shadow-none! ring-0! bg-muted hover:bg-muted/30 rounded-sm"
+              triggerClassName="h-6 text-xs shadow-none! ring-0! bg-muted hover:bg-muted/30 rounded-sm max-w-[200px]"
               iconSize="small"
               showAddCustomModelDocs={true}
               forRole="chat"
             />
+            <CapabilitiesPopover />
           </div>
-          <div className="flex flex-row">
+          <div className="flex flex-row ml-auto">
             <AddContextButton
               handleAddContext={onAddContext}
               isLoading={isLoading}
@@ -439,8 +450,8 @@ const ChatInput: React.FC<ChatInputProps> = memo(
     });
 
     return (
-      <div className="relative shrink-0 min-h-[80px] flex flex-col border-t">
-        <div className={cn("px-2 py-3 flex-1", inputClassName)}>
+      <div className="relative shrink-0 flex flex-col border-t">
+        <div className={cn("px-2 py-1.5", inputClassName)}>
           <PromptInput
             className="max-h-[400px]"
             inputRef={inputRef}
@@ -533,11 +544,19 @@ 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();
 
   const activeChatId = activeChat?.id;
+  const { chatControllerId, renewDraftChatId } =
+    useChatControllerId(activeChatId);
   const store = useStore();
 
   const { addStagedCell } = useStagedAICellsActions();
@@ -561,46 +580,56 @@ const ChatPanelBody = () => {
     addToolApprovalResponse,
     id: chatId,
   } = useChat({
-    id: activeChatId,
+    id: chatControllerId,
+    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(""),
+            options: store.get(chatOptionsAtom),
+          };
+
+          // 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 +637,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 +673,7 @@ const ChatPanelBody = () => {
   });
 
   const sendUserMessage = useEvent((parts: ChatMessagePart[]) => {
+    clearAbortState();
     sendMessage({ role: "user", parts });
   });
 
@@ -701,7 +747,8 @@ const ChatPanelBody = () => {
   useEffect(() => {
     setIsScrolledToBottom(true);
     clearQueuedMessages();
-  }, [activeChatId, clearQueuedMessages]);
+    clearAbortState();
+  }, [activeChatId, clearQueuedMessages, clearAbortState]);
 
   useEffect(() => {
     if (!isScrolledToBottom) {
@@ -772,6 +819,7 @@ const ChatPanelBody = () => {
   );
 
   const handleNewChat = useEvent(() => {
+    renewDraftChatId();
     setActiveChat(null);
     setInput("");
     setNewThreadInput("");
@@ -833,6 +881,7 @@ const ChatPanelBody = () => {
   );
 
   const handleReload = () => {
+    clearAbortState();
     regenerate();
   };
 
@@ -987,6 +1036,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/chat/use-chat-controller-id.ts

@@ -0,0 +1,24 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { useState } from "react";
+import useEvent from "react-use-event-hook";
+import type { ChatId } from "@/core/ai/state";
+import { generateUUID } from "@/utils/uuid";
+
+function generateChatId(): ChatId {
+  return generateUUID() as ChatId;
+}
+
+/**
+ * Keep an ID for an unsaved chat so `useChat` can distinguish it from the
+ * previously active chat. Empty chats are not added to chat history.
+ */
+export function useChatControllerId(activeChatId?: ChatId) {
+  const [draftChatId, setDraftChatId] = useState(generateChatId);
+  const renewDraftChatId = useEvent(() => setDraftChatId(generateChatId()));
+
+  return {
+    chatControllerId: activeChatId ?? draftChatId,
+    renewDraftChatId,
+  };
+}

package/src/components/data-table/charts/__tests__/schemas.test.ts

@@ -0,0 +1,35 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describe, expect, it } from "vitest";
+import { ChartSchema } from "../schemas";
+
+describe("ChartSchema", () => {
+  it("keeps a known axis column type", () => {
+    const result = ChartSchema.parse({
+      general: { xColumn: { field: "count", type: "integer" } },
+    });
+
+    expect(result.general?.xColumn?.type).toBe("integer");
+  });
+
+  it("normalizes an unrecognized axis column type", () => {
+    const result = ChartSchema.parse({
+      general: { xColumn: { field: "geom", type: "geometry" } },
+    });
+
+    expect(result.general?.xColumn?.type).toBe("unknown");
+  });
+
+  it("normalizes an unrecognized tooltip field type", () => {
+    const result = ChartSchema.parse({
+      tooltips: {
+        auto: false,
+        fields: [{ field: "geom", type: "geometry" }],
+      },
+    });
+
+    expect(result.tooltips?.fields).toEqual([
+      { field: "geom", type: "unknown" },
+    ]);
+  });
+});

package/src/components/data-table/charts/schemas.ts

@@ -28,7 +28,10 @@ export const BinSchema = z.object({
 
 const BaseColumnSchema = z.object({
   field: z.string().optional(),
-  type: z.enum([...DATA_TYPES, EMPTY_VALUE]).optional(),
+  type: z
+    .enum([...DATA_TYPES, EMPTY_VALUE])
+    .catch("unknown")
+    .optional(),
   selectedDataType: z.enum([...SELECTABLE_DATA_TYPES, EMPTY_VALUE]).optional(),
   sort: z.enum(SORT_TYPES).default("ascending").optional(),
   timeUnit: z.enum(TIME_UNITS).optional(),
@@ -102,7 +105,7 @@ export const ChartSchema = z.object({
       fields: z.array(
         z.object({
           field: z.string(),
-          type: z.enum(DATA_TYPES),
+          type: z.enum(DATA_TYPES).catch("unknown"),
         }),
       ),
     })

package/src/components/datasets/__tests__/icons.test.ts

@@ -0,0 +1,21 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describe, expect, it } from "vitest";
+import type { DataType } from "@/core/kernel/messages";
+import { DATA_TYPE_ICON, resolveDataType } from "../icons";
+
+describe("resolveDataType", () => {
+  it("passes through every mapped data type", () => {
+    for (const dataType of Object.keys(DATA_TYPE_ICON)) {
+      expect(resolveDataType(dataType as DataType)).toBe(dataType);
+    }
+  });
+
+  it("resolves unmapped data types to unknown", () => {
+    expect(resolveDataType("geometry" as DataType)).toBe("unknown");
+  });
+
+  it("resolves data types shadowing Object.prototype keys to unknown", () => {
+    expect(resolveDataType("toString" as DataType)).toBe("unknown");
+  });
+});

package/src/components/datasets/icons.tsx

@@ -30,6 +30,16 @@ export const DATA_TYPE_ICON: Record<DataType | SelectableDataType, LucideIcon> =
     unknown: CurlyBracesIcon,
   };
 
+/**
+ * A newer backend can send a data type this frontend does not know. Resolve
+ * those to `unknown` before indexing icon or color maps.
+ */
+export function resolveDataType(
+  dataType: DataType | SelectableDataType,
+): DataType | SelectableDataType {
+  return Object.hasOwn(DATA_TYPE_ICON, dataType) ? dataType : "unknown";
+}
+
 export function getDataTypeColor(
   dataType: DataType | SelectableDataType,
 ): string {

package/src/components/datasources/__tests__/components.test.tsx

@@ -0,0 +1,29 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { render } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import type { DataType } from "@/core/kernel/messages";
+import { Logger } from "@/utils/Logger";
+import { ColumnName } from "../components";
+
+describe("ColumnName", () => {
+  it("renders the unknown icon for unrecognized data types", () => {
+    const warn = vi.spyOn(Logger, "warn").mockImplementation(() => {});
+
+    try {
+      const unrecognized = render(
+        <ColumnName columnName="geom" dataType={"geometry" as DataType} />,
+      );
+      const unknown = render(
+        <ColumnName columnName="geom" dataType="unknown" />,
+      );
+
+      expect(unrecognized.container.innerHTML).toEqual(
+        unknown.container.innerHTML,
+      );
+      expect(warn).not.toHaveBeenCalled();
+    } finally {
+      warn.mockRestore();
+    }
+  });
+});

package/src/components/datasources/components.tsx

@@ -5,7 +5,11 @@ import type { CSSProperties } from "react";
 import { TreeChevron } from "@/components/editor/file-tree/tree-actions";
 import type { DataType } from "@/core/kernel/messages";
 import { cn } from "@/utils/cn";
-import { DATA_TYPE_ICON, getDataTypeColor } from "../datasets/icons";
+import {
+  DATA_TYPE_ICON,
+  getDataTypeColor,
+  resolveDataType,
+} from "../datasets/icons";
 
 export const RotatingChevron: React.FC<{ isExpanded: boolean }> = ({
   isExpanded,
@@ -101,8 +105,9 @@ export const ColumnName = ({
   columnName: React.ReactNode;
   dataType: DataType;
 }) => {
-  const Icon = DATA_TYPE_ICON[dataType];
-  const color = getDataTypeColor(dataType);
+  const resolvedDataType = resolveDataType(dataType);
+  const Icon = DATA_TYPE_ICON[resolvedDataType];
+  const color = getDataTypeColor(resolvedDataType);
 
   return (
     <div className="flex flex-row items-center gap-1.5">

package/src/components/editor/actions/export-dialog/__tests__/export-dialog.test.tsx

@@ -259,6 +259,7 @@ describe("ExportDialog", () => {
               format: "pdf",
               dependenciesAvailable: false,
               missingPackages: ["nbconvert[webpdf]"],
+              missingSetup: [],
             },
           ],
         }),
@@ -275,6 +276,40 @@ describe("ExportDialog", () => {
     expect(screen.getByTestId("export-format-pdf")).toBeVisible();
   });
 
+  it("explains missing Playwright Chromium setup", async () => {
+    store.set(
+      requestClientAtom,
+      MockRequestClient.create({
+        getExportAvailability: vi.fn().mockResolvedValue({
+          source: "server",
+          formats: [
+            {
+              format: "pdf",
+              dependenciesAvailable: false,
+              missingPackages: [],
+              missingSetup: [
+                {
+                  name: "playwright-chromium",
+                  command: "uv run playwright install chromium",
+                },
+              ],
+            },
+          ],
+        }),
+      }),
+    );
+
+    renderDialog("pdf");
+
+    expect(
+      await screen.findByText("PDF export requires Playwright Chromium."),
+    ).toBeVisible();
+    expect(
+      screen.getByText("uv run playwright install chromium"),
+    ).toBeVisible();
+    expect(screen.getByTestId("export-submit")).toBeDisabled();
+  });
+
   it("announces requirement checks as status updates", () => {
     store.set(
       requestClientAtom,

package/src/components/editor/actions/export-dialog/__tests__/state.test.ts

@@ -19,11 +19,13 @@ const AVAILABLE: ExportAvailabilityResponse = {
       format: "ipynb",
       dependenciesAvailable: true,
       missingPackages: [],
+      missingSetup: [],
     },
     {
       format: "pdf",
       dependenciesAvailable: true,
       missingPackages: [],
+      missingSetup: [],
     },
   ],
 };
@@ -188,6 +190,7 @@ describe("getExportFormatStatus", () => {
                 format: "pdf",
                 dependenciesAvailable: false,
                 missingPackages: ["nbconvert[webpdf]"],
+                missingSetup: [],
               },
             ],
           },
@@ -202,6 +205,64 @@ describe("getExportFormatStatus", () => {
     });
   });
 
+  it("reports missing server setup", () => {
+    expect(
+      status("pdf", {
+        availability: {
+          status: "success",
+          data: {
+            source: "server",
+            formats: [
+              {
+                format: "pdf",
+                dependenciesAvailable: false,
+                missingPackages: [],
+                missingSetup: [
+                  {
+                    name: "playwright-chromium",
+                    command: "uv run playwright install chromium",
+                  },
+                ],
+              },
+            ],
+          },
+        },
+      }),
+    ).toEqual({
+      available: false,
+      reason: {
+        type: "missing-setup",
+        requirements: [
+          {
+            name: "playwright-chromium",
+            command: "uv run playwright install chromium",
+          },
+        ],
+      },
+    });
+  });
+
+  it("fails open when an unavailable format has no requirements", () => {
+    expect(
+      status("pdf", {
+        availability: {
+          status: "success",
+          data: {
+            source: "server",
+            formats: [
+              {
+                format: "pdf",
+                dependenciesAvailable: false,
+                missingPackages: [],
+                missingSetup: [],
+              },
+            ],
+          },
+        },
+      }),
+    ).toEqual({ available: true, availabilityCheckFailed: true });
+  });
+
   it.each([
     ["html", true, undefined],
     ["markdown", true, undefined],

package/src/components/editor/actions/export-dialog/export-command.ts

@@ -1,18 +1,13 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
+import {
+  MARKDOWN_EXTENSIONS,
+  MARKDOWN_SUFFIXES,
+} from "@/core/network/markdown-export";
 import { Filenames } from "@/utils/filenames";
 import { shellQuote } from "@/utils/shell";
 import type { ExportFormat, ExportOptions, MarkdownFlavor } from "./state";
 
-const MARKDOWN_EXTENSIONS: Record<MarkdownFlavor, string> = {
-  pymdown: "md",
-  qmd: "qmd",
-  mystmd: "myst.md",
-  mdx: "mdx",
-};
-
-const MARKDOWN_SUFFIXES = [".myst.md", ".markdown", ".qmd", ".mdx", ".md"];
-
 function inferMarkdownFlavor(filename: string): MarkdownFlavor {
   if (filename.endsWith(".myst.md")) {
     return "mystmd";