@marimo-team/islands 0.25.3-dev29 → 0.25.3-dev290

package/src/plugins/impl/anywidget/widget-binding.ts

@@ -46,38 +46,80 @@ function abortSignalAny(signals: AbortSignal[]): AbortSignal {
   return controller.signal;
 }
 
+interface ModuleEntry {
+  promise: Promise<unknown>;
+  references: number;
+  dispose: () => void;
+}
+
 /**
  * Deduplicates ESM imports by jsHash.
  * A single import is shared across all widget instances using the same module.
  */
 class WidgetDefRegistry {
-  #cache = new Map<string, Promise<unknown>>();
+  #cache = new Map<string, ModuleEntry>();
 
   /**
    * Get (or start) the ESM import for a widget module, cached by
    * jsHash so multiple instances share one import. Pass
    * `kernelAuthored: true` only for URLs from an `EsmSpec`; it widens
-   * the import gate to remote and data URLs.
+   * the import gate to remote and data URLs. A lifetime retains the module's
+   * temporary URL until that signal aborts; omit it to retain the URL for
+   * the notebook's lifetime. The evaluated module itself stays cached.
    */
   public getModule(options: {
     jsUrl: string;
     jsHash: string;
     kernelAuthored?: boolean;
+    lifetime?: AbortSignal;
   }): Promise<unknown> {
-    const { jsUrl, jsHash, kernelAuthored = false } = options;
-    const cached = this.#cache.get(jsHash);
-    if (cached) {
-      return cached;
+    const { jsUrl, jsHash, kernelAuthored = false, lifetime } = options;
+    let entry = this.#cache.get(jsHash);
+    if (!entry) {
+      const imported = this.#doImport(jsUrl, { kernelAuthored });
+      const created: ModuleEntry = {
+        references: 0,
+        dispose: () => undefined,
+        promise: imported.then(
+          ({ module, dispose }) => {
+            created.dispose = dispose;
+            return module;
+          },
+          (error) => {
+            // An invalidated import must not evict its replacement.
+            if (this.#cache.get(jsHash) === created) {
+              this.#cache.delete(jsHash);
+            }
+            throw error;
+          },
+        ),
+      };
+      this.#cache.set(jsHash, created);
+      entry = created;
     }
-
-    const promise = this.#doImport(jsUrl, { kernelAuthored }).catch((error) => {
-      // On failure, remove from cache so a retry with a new URL can work
-      this.#cache.delete(jsHash);
-      throw error;
-    });
-
-    this.#cache.set(jsHash, promise);
-    return promise;
+    const retained = entry;
+    retained.references += 1;
+    const release = () => {
+      retained.references -= 1;
+      if (retained.references === 0) {
+        // Keep the evaluated module cached: re-importing would re-run its
+        // top-level side effects (e.g. `customElements.define`). Only the
+        // temporary URL is released.
+        void retained.promise.then(
+          () => {
+            retained.dispose();
+            retained.dispose = () => undefined;
+          },
+          () => undefined,
+        );
+      }
+    };
+    if (lifetime?.aborted) {
+      release();
+    } else {
+      lifetime?.addEventListener("abort", release, { once: true });
+    }
+    return retained.promise;
   }
 
   public invalidate(jsHash: string): void {
@@ -87,7 +129,7 @@ class WidgetDefRegistry {
   async #doImport(
     jsUrl: string,
     opts: { kernelAuthored?: boolean } = {},
-  ): Promise<unknown> {
+  ): Promise<{ module: unknown; dispose: () => void }> {
     // By default, only trust marimo virtual file paths: arbitrary URLs
     // would let markdown-injected elements import attacker-controlled
     // JavaScript. Kernel-authored URLs (from an `EsmSpec`) are exempt —
@@ -103,11 +145,23 @@ class WidgetDefRegistry {
         )}`,
       );
     }
-    let url = asRemoteURL(jsUrl).toString();
-    if (isStaticNotebook()) {
-      url = resolveVirtualFileURL(url);
+    const remoteUrl = asRemoteURL(jsUrl).toString();
+    const url = isStaticNotebook()
+      ? resolveVirtualFileURL(remoteUrl)
+      : remoteUrl;
+    const dispose = () => {
+      // Only the static-file resolver's newly created URL belongs to us.
+      if (url !== remoteUrl) {
+        URL.revokeObjectURL(url);
+      }
+    };
+    try {
+      const module = await import(/* @vite-ignore */ url);
+      return { module, dispose };
+    } catch (error) {
+      dispose();
+      throw error;
     }
-    return import(/* @vite-ignore */ url);
   }
 }
 
@@ -132,6 +186,7 @@ interface CreateWidgetBindingOptions<T extends ModelState> {
   model: Model<T>;
   createHost: HostFactory;
   controller?: AbortController;
+  onDestroy?: () => void;
 }
 
 async function safelyRunCleanup(cleanup: Cleanup, reason: string) {
@@ -159,6 +214,7 @@ export class WidgetBinding<T extends ModelState = ModelState> {
   #createHost: HostFactory;
   #cleanupTasks = new Set<Promise<void>>();
   #viewTasks = new Set<Promise<void>>();
+  #onDestroy?: () => void;
 
   private constructor(options: {
     widget: ResolvedWidget<T>;
@@ -166,12 +222,14 @@ export class WidgetBinding<T extends ModelState = ModelState> {
     exports: unknown;
     controller: AbortController;
     createHost: HostFactory;
+    onDestroy?: () => void;
   }) {
     this.#widget = options.widget;
     this.#model = options.model;
     this.#exports = options.exports;
     this.#controller = options.controller;
     this.#createHost = options.createHost;
+    this.#onDestroy = options.onDestroy;
   }
 
   /**
@@ -185,76 +243,94 @@ export class WidgetBinding<T extends ModelState = ModelState> {
     model,
     createHost,
     controller = new AbortController(),
+    onDestroy,
   }: CreateWidgetBindingOptions<T>): Promise<WidgetBinding<T>> {
     const signal = controller.signal;
-    const widget: ResolvedWidget<T> =
-      typeof widgetDef === "function" ? await widgetDef() : widgetDef;
+    let lateCleanup: Promise<void> | undefined;
+    try {
+      const widget: ResolvedWidget<T> =
+        typeof widgetDef === "function" ? await widgetDef() : widgetDef;
 
-    const initPromise = Promise.resolve(
-      widget.initialize?.({
-        model: modelProxy(model, signal),
-        experimental,
-        signal,
-      }),
-    );
-    // If destroyed mid-initialize, still run a late-arriving legacy
-    // cleanup callback: the widget acquired resources.
-    initPromise
-      .then(async (settled) => {
-        if (signal.aborted && isCleanup(settled)) {
-          await safelyRunCleanup(settled, "late initialize");
-        }
-      })
-      .catch(() => undefined);
+      if (signal.aborted) {
+        throw new Error("[anywidget] binding destroyed");
+      }
+      const initPromise = Promise.resolve(
+        widget.initialize?.({
+          model: modelProxy(model, signal),
+          experimental,
+          signal,
+        }),
+      );
+      // If destroyed mid-initialize, still run a late-arriving legacy
+      // cleanup callback: the widget acquired resources.
+      lateCleanup = initPromise
+        .then(async (settled) => {
+          if (signal.aborted && isCleanup(settled)) {
+            await safelyRunCleanup(settled, "late initialize");
+          }
+        })
+        .catch(() => undefined);
 
-    // Race against destruction so a hung `initialize` can't strand
-    // callers whose model already closed.
-    const result = await Promise.race([
-      initPromise,
-      new Promise<never>((_, reject) => {
-        const abort = () => reject(new Error("[anywidget] binding destroyed"));
-        if (signal.aborted) {
-          abort();
-          return;
-        }
-        signal.addEventListener("abort", abort, { once: true });
-      }),
-    ]);
+      // Race against destruction so a hung `initialize` can't strand
+      // callers whose model already closed.
+      const result = await Promise.race([
+        initPromise,
+        new Promise<never>((_, reject) => {
+          const abort = () =>
+            reject(new Error("[anywidget] binding destroyed"));
+          if (signal.aborted) {
+            abort();
+            return;
+          }
+          signal.addEventListener("abort", abort, { once: true });
+        }),
+      ]);
 
-    if (signal.aborted) {
-      throw new Error("[anywidget] binding destroyed");
-    }
+      if (signal.aborted) {
+        throw new Error("[anywidget] binding destroyed");
+      }
 
-    // Distinguish anywidget's three return shapes:
-    //   function → legacy cleanup callback (run on destroy)
-    //   object   → widget exports (anywidget>=0.11)
-    //   void     → nothing
-    let exports: unknown;
-    let initializeCleanup: Cleanup | undefined;
-    if (isCleanup(result)) {
-      initializeCleanup = result;
-      exports = undefined;
-    } else if (typeof result === "object" && result !== null) {
-      exports = result;
-    } else {
-      exports = undefined;
-    }
+      // Distinguish anywidget's three return shapes:
+      //   function → legacy cleanup callback (run on destroy)
+      //   object   → widget exports (anywidget>=0.11)
+      //   void     → nothing
+      let exports: unknown;
+      let initializeCleanup: Cleanup | undefined;
+      if (isCleanup(result)) {
+        initializeCleanup = result;
+        exports = undefined;
+      } else if (typeof result === "object" && result !== null) {
+        exports = result;
+      } else {
+        exports = undefined;
+      }
 
-    const binding = new WidgetBinding({
-      widget,
-      model,
-      exports,
-      controller,
-      createHost,
-    });
-    if (initializeCleanup) {
-      signal.addEventListener(
-        "abort",
-        () => void binding.#trackCleanup(initializeCleanup, "initialize"),
-        { once: true },
-      );
+      const binding = new WidgetBinding({
+        widget,
+        model,
+        exports,
+        controller,
+        createHost,
+        onDestroy,
+      });
+      if (initializeCleanup) {
+        signal.addEventListener(
+          "abort",
+          () => void binding.#trackCleanup(initializeCleanup, "initialize"),
+          { once: true },
+        );
+      }
+      return binding;
+    } catch (error) {
+      // A canceled initialize may still be using import.meta.url in its
+      // late cleanup. Keep the module alive until that work settles.
+      if (lateCleanup) {
+        void lateCleanup.then(() => onDestroy?.());
+      } else {
+        onDestroy?.();
+      }
+      throw error;
     }
-    return binding;
   }
 
   /**
@@ -353,6 +429,8 @@ export class WidgetBinding<T extends ModelState = ModelState> {
     while (this.#cleanupTasks.size > 0) {
       await Promise.all(this.#cleanupTasks);
     }
+    this.#onDestroy?.();
+    this.#onDestroy = undefined;
   }
 }
 

package/src/plugins/impl/chat/__tests__/chat-prompts.test.tsx

@@ -0,0 +1,93 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render, screen } from "@testing-library/react";
+import type { ComponentProps } from "react";
+import { afterAll, beforeAll, describe, expect, it, vi } from "vitest";
+import type { PopoverContent } from "@/components/ui/popover";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { Chatbot } from "../chat-ui";
+
+vi.mock("@/components/editor/ai/prompt-input", () => ({
+  PromptInput: ({ value }: { value: string }) => (
+    <textarea aria-label="Chat prompt" value={value} readOnly={true} />
+  ),
+}));
+
+vi.mock("@/components/ui/popover", async (importOriginal) => {
+  const actual =
+    await importOriginal<typeof import("@/components/ui/popover")>();
+  return {
+    ...actual,
+    // Keep the form mounted when the prompt menu takes focus so this tests
+    // the prompt reset rather than the overlay's incidental unmount.
+    PopoverContent: (props: ComponentProps<typeof PopoverContent>) => (
+      <actual.PopoverContent
+        {...props}
+        onInteractOutside={(event) => event.preventDefault()}
+      />
+    ),
+  };
+});
+
+describe("chat prompt variables", () => {
+  const originalScrollTo = HTMLElement.prototype.scrollTo;
+  beforeAll(() => {
+    HTMLElement.prototype.scrollTo = vi.fn();
+  });
+  afterAll(() => {
+    HTMLElement.prototype.scrollTo = originalScrollTo;
+  });
+
+  it("clears entered values and replaces the fields when selecting another prompt", async () => {
+    const firstPrompt = "Tell {{name}} about {{topic}}";
+    const secondPrompt = "Send {{name}} to {{destination}}";
+    render(
+      <TooltipProvider>
+        <Chatbot
+          prompts={[firstPrompt, secondPrompt]}
+          config={{
+            max_tokens: null,
+            temperature: null,
+            top_p: null,
+            top_k: null,
+            frequency_penalty: null,
+            presence_penalty: null,
+          }}
+          showConfigurationControls={false}
+          maxHeight={undefined}
+          allowAttachments={false}
+          disabled={false}
+          value={[]}
+          setValue={vi.fn()}
+          host={document.createElement("div")}
+          get_chat_history={vi.fn().mockResolvedValue({ messages: [] })}
+          delete_chat_history={vi.fn().mockResolvedValue(null)}
+          delete_chat_message={vi.fn().mockResolvedValue(null)}
+          send_prompt={vi.fn().mockResolvedValue(null)}
+          cancel_prompt={vi.fn().mockResolvedValue(null)}
+        />
+      </TooltipProvider>,
+    );
+
+    const promptMenu = screen.getByRole("button", { expanded: false });
+    fireEvent.keyDown(promptMenu, { key: "ArrowDown" });
+    fireEvent.click(await screen.findByRole("menuitem", { name: firstPrompt }));
+    fireEvent.change(await screen.findByLabelText("name"), {
+      target: { value: "Ada" },
+    });
+    fireEvent.change(screen.getByLabelText("topic"), {
+      target: { value: "Python" },
+    });
+    expect(screen.getByRole("button", { name: "Submit" })).toBeEnabled();
+
+    fireEvent.keyDown(promptMenu, { key: "ArrowDown" });
+    fireEvent.click(
+      await screen.findByRole("menuitem", { name: secondPrompt }),
+    );
+
+    expect(await screen.findByLabelText("destination")).toHaveValue("");
+    expect(screen.getByLabelText("name")).toHaveValue("");
+    expect(screen.queryByLabelText("topic")).not.toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Submit" })).toBeDisabled();
+  });
+});

package/src/plugins/impl/chat/chat-ui.tsx

@@ -24,7 +24,7 @@ import {
   Trash2Icon,
   X,
 } from "lucide-react";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { z } from "zod";
 import {
   describeChatAbortReason,
@@ -39,7 +39,7 @@ import {
 import {
   type AdditionalCompletions,
   PromptInput,
-} from "@/components/editor/ai/add-cell-with-ai";
+} from "@/components/editor/ai/prompt-input";
 import { CopyClipboardIcon } from "@/components/icons/copy-icon";
 import { Spinner } from "@/components/icons/spinner";
 import { Button } from "@/components/ui/button";
@@ -163,7 +163,9 @@ export const Chatbot: React.FC<Props> = (props) => {
 
   // Use a ref to avoid stale closure in the fetch callback
   const configRef = useRef<ChatConfig>(config);
-  configRef.current = config;
+  useLayoutEffect(() => {
+    configRef.current = config;
+  }, [config]);
 
   // For frontend-managed streaming, create a controller to enqueue chunks to.
   const frontendStreamControllerRef =
@@ -411,9 +413,8 @@ export const Chatbot: React.FC<Props> = (props) => {
     });
   }, [messages.length, scrollContainerRef]);
 
-  const codemirrorView = codeMirrorInputRef.current?.view;
-
   const resetInput = () => {
+    const codemirrorView = codeMirrorInputRef.current?.view;
     // Clear input immediately by directly manipulating the editor
     // There is some delay if we use setInput("") only
     if (codemirrorView) {
@@ -440,6 +441,7 @@ export const Chatbot: React.FC<Props> = (props) => {
     >
       <div className="absolute top-0 right-0 flex justify-end z-10 border border-(--slate-6) bg-inherit rounded-bl-lg">
         <Button
+          aria-label="Reset chat"
           variant="text"
           size="icon"
           disabled={messages.length === 0}
@@ -470,7 +472,7 @@ export const Chatbot: React.FC<Props> = (props) => {
 
           return (
             <div
-              key={`${message.id}-${index}`}
+              key={message.id}
               className={cn(
                 "flex flex-col group gap-2",
                 message.role === "user" ? "items-end" : "items-start",
@@ -480,12 +482,11 @@ export const Chatbot: React.FC<Props> = (props) => {
                 className={`max-w-[80%] p-3 rounded-lg ${
                   message.role === "user"
                     ? "bg-(--sky-11) text-(--slate-1) whitespace-pre-wrap"
-                    : "bg-(--slate-4) text-(--slate-12)"
+                    : "bg-(--slate-4) text-(--slate-12) [--muted-foreground:var(--slate-11)]"
                 }`}
               >
                 {renderUIMessage({
                   message,
-                  isStreamingReasoning: status === "streaming",
                   isLast,
                   isActive: isLoading,
                   addToolApprovalResponse: isLast
@@ -493,7 +494,7 @@ export const Chatbot: React.FC<Props> = (props) => {
                     : undefined,
                 })}
               </div>
-              <div className="flex justify-end text-xs gap-2 invisible group-hover:visible">
+              <div className="flex justify-end text-xs gap-2 opacity-0 group-hover:opacity-100 focus-within:opacity-100">
                 <CopyClipboardIcon
                   value={textContent}
                   className="h-3 w-3"
@@ -501,6 +502,7 @@ export const Chatbot: React.FC<Props> = (props) => {
                 />
                 <button
                   type="button"
+                  aria-label="Delete message"
                   onClick={() => handleDelete(message.id)}
                   className="text-xs text-(--slate-9) hover:text-(--slate-11)"
                 >
@@ -511,7 +513,7 @@ export const Chatbot: React.FC<Props> = (props) => {
           );
         })}
 
-        {isLoading && (
+        {isLoading && messages.at(-1)?.role !== "assistant" && (
           <div className="flex items-center justify-center mb-4">
             <Spinner size="small" />
           </div>
@@ -566,6 +568,7 @@ export const Chatbot: React.FC<Props> = (props) => {
             onSelect={(prompt) => {
               setInput(prompt);
               requestAnimationFrame(() => {
+                const codemirrorView = codeMirrorInputRef.current?.view;
                 codemirrorView?.focus();
                 moveToEndOfEditor(codemirrorView);
               });
@@ -862,6 +865,7 @@ const PromptsPopover: React.FC<{
 
       <PopoverContent side="right" align="end" className="min-w-80 px-2">
         <PromptVariablesForm
+          key={selectedPrompt}
           prompt={selectedPrompt}
           onClose={() => setIsPopoverOpen(false)}
           onSelect={onSelect}
@@ -876,9 +880,7 @@ const PromptVariablesForm: React.FC<{
   onClose: () => void;
   onSelect: (prompt: string) => void;
 }> = ({ prompt, onClose, onSelect }) => {
-  const [variables, setVariables] = useState<{ [key: string]: string }>({});
-
-  useEffect(() => {
+  const [variables, setVariables] = useState<{ [key: string]: string }>(() => {
     const variableRegex = /{{(\w+)}}/g;
     const matches = [...prompt.matchAll(variableRegex)];
     const initialVariables = matches.reduce<{ [key: string]: string }>(
@@ -888,8 +890,8 @@ const PromptVariablesForm: React.FC<{
       },
       {},
     );
-    setVariables(initialVariables);
-  }, [prompt]);
+    return initialVariables;
+  });
 
   const handleVariableChange = (variable: string, value: string) => {
     setVariables((prev) => ({ ...prev, [variable]: value }));

package/src/plugins/impl/code/any-language-editor.tsx

@@ -53,14 +53,14 @@ const AnyLanguageCodeMirror: React.FC<
     extensions?: readonly Extension[];
   }
 > = ({
-  language,
+  language: requestedLanguage,
   hideUnsupportedLanguageErrors,
   showCopyButton,
   extensions = EMPTY_EXTENSIONS,
   ...props
 }) => {
   // Maybe normalize the language to the extension
-  language = LANGUAGE_MAP[language || ""] || language;
+  const language = LANGUAGE_MAP[requestedLanguage || ""] || requestedLanguage;
 
   const isSupported = isSupportedLanguage(language);
   if (!isSupported) {

package/src/plugins/impl/common/error-banner.tsx

@@ -47,11 +47,13 @@ export const ErrorBanner = ({
       <AlertDialog open={open} onOpenChange={setOpen}>
         <AlertDialogContent className="max-w-[80%] max-h-[80%] overflow-hidden flex flex-col">
           <AlertDialogHeader>
-            <AlertDialogTitle className="text-error">Error</AlertDialogTitle>
+            <AlertDialogTitle className="text-(--red-11)">
+              Error
+            </AlertDialogTitle>
           </AlertDialogHeader>
           <AlertDialogDescription
             asChild={true}
-            className="text-error text-sm p-2 font-mono overflow-auto whitespace-pre-wrap"
+            className="text-(--red-11) text-sm p-2 font-mono overflow-auto whitespace-pre-wrap"
           >
             <pre>{message}</pre>
           </AlertDialogDescription>
@@ -72,7 +74,7 @@ const bannerStyle = cva(
     variants: {
       kind: {
         danger:
-          "text-error border-(--red-6) shadow-md-solid shadow-error bg-(--red-1)",
+          "text-(--red-11) border-(--red-6) shadow-md-solid shadow-error bg-(--red-1)",
         info: "text-primary border-(--blue-6) shadow-md-solid shadow-accent bg-(--blue-1)",
         warn: "border-(--yellow-6) bg-(--yellow-2) dark:bg-(--yellow-4) text-(--yellow-11) dark:text-(--yellow-12)",
       },

package/src/plugins/impl/data-editor/__tests__/column-types.test.ts

@@ -0,0 +1,42 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { vegaLoadData, vegaLoader } from "../../vega/loader";
+import { normalizeConfiguredColumns } from "../column-types";
+import type { EditorRow } from "../types";
+
+describe("normalizeConfiguredColumns", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("preserves the data reference when no columns are configured", () => {
+    const data = [{ label: "01", done: "yes" }];
+    expect(normalizeConfiguredColumns(data, new Map())).toBe(data);
+  });
+
+  it("normalizes large integer boolean values from the CSV loader", async () => {
+    vi.spyOn(vegaLoader, "load").mockResolvedValueOnce(
+      "done,label\n9007199254740992,01\n-9007199254740992,02\n0,03\n",
+    );
+
+    const data = await vegaLoadData<EditorRow>(
+      "data.csv",
+      { type: "csv", parse: { done: "integer", label: "string" } },
+      { handleBigIntAndNumberLike: true },
+    );
+
+    expect(data).toEqual([
+      { done: BigInt("9007199254740992"), label: "01" },
+      { done: BigInt("-9007199254740992"), label: "02" },
+      { done: 0, label: "03" },
+    ]);
+    expect(
+      normalizeConfiguredColumns(data, new Map([["done", "boolean"]])),
+    ).toEqual([
+      { done: true, label: "01" },
+      { done: true, label: "02" },
+      { done: false, label: "03" },
+    ]);
+  });
+});