@marimo-team/frontend 0.25.3-dev13 → 0.25.3-dev135

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/add-cell-with-ai", () => ({
+  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,
@@ -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",
@@ -493,7 +495,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 +503,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)"
                 >
@@ -566,6 +569,7 @@ export const Chatbot: React.FC<Props> = (props) => {
             onSelect={(prompt) => {
               setInput(prompt);
               requestAnimationFrame(() => {
+                const codemirrorView = codeMirrorInputRef.current?.view;
                 codemirrorView?.focus();
                 moveToEndOfEditor(codemirrorView);
               });
@@ -862,6 +866,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 +881,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 +891,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/data-editor/glide-data-editor.tsx

@@ -73,12 +73,16 @@ export const GlideDataEditor = ({
   });
 
   const [columnWidths, setColumnWidths] = useState<Record<string, number>>({});
+  const editableColumnSet = useMemo(
+    () => (editableColumns === "all" ? null : new Set(editableColumns)),
+    [editableColumns],
+  );
 
   const columns: ModifiedGridColumn[] = useMemo(() => {
     const columns: ModifiedGridColumn[] = [];
     for (const [columnName, fieldType] of columnFields) {
       const editable =
-        editableColumns === "all" || editableColumns.includes(columnName);
+        editableColumnSet === null || editableColumnSet.has(columnName);
 
       columns.push({
         id: columnName,
@@ -100,7 +104,7 @@ export const GlideDataEditor = ({
     }
 
     return columns;
-  }, [columnFields, columnWidths, editableColumns, theme]);
+  }, [columnFields, columnWidths, editableColumnSet, theme]);
 
   const getCellContent = useCallback(
     (cell: Item): GridCell => {
@@ -110,8 +114,7 @@ export const GlideDataEditor = ({
       const dataItem = dataRow[columns[col].title];
       const columnKind = columns[col].kind;
       const editable =
-        editableColumns === "all" ||
-        editableColumns.includes(columns[col].title);
+        editableColumnSet === null || editableColumnSet.has(columns[col].title);
 
       if (columnKind === GridCellKind.Boolean) {
         const value = Boolean(dataItem);
@@ -141,7 +144,7 @@ export const GlideDataEditor = ({
         data: String(dataItem),
       };
     },
-    [columns, data, editableColumns],
+    [columns, data, editableColumnSet],
   );
 
   const onCellEdited = useCallback(

package/src/plugins/impl/data-editor/glide-utils.ts

@@ -147,6 +147,8 @@ export function pasteCells(options: {
       }
 
       const edits: Edits["edits"] = [];
+      const editableColumnSet =
+        editableColumns === "all" ? null : new Set(editableColumns);
 
       for (const [rowIndex, dataRow] of parsedData.entries()) {
         if (!dataRow) {
@@ -175,7 +177,7 @@ export function pasteCells(options: {
           const column = columns[targetColIdx];
           const columnType = column.dataType;
           const editable =
-            editableColumns === "all" || editableColumns.includes(column.title);
+            editableColumnSet === null || editableColumnSet.has(column.title);
 
           if (!editable) {
             continue;

package/src/plugins/impl/data-explorer/ConnectedDataExplorerComponent.tsx

@@ -47,7 +47,7 @@ const ConnectedDataExplorerComponent = (props: DataTableProps): JSX.Element => {
     // Subscribe to the store
     const unsub = store.sub(chartSpecAtom, () => {
       const value = store.get(chartSpecAtom);
-      const { schema, ...withoutSchema } = value;
+      const { schema: _schema, ...withoutSchema } = value;
       props.setValue(withoutSchema);
     });
 

package/src/plugins/impl/data-explorer/components/column-summary.tsx

@@ -60,7 +60,9 @@ export const ColumnSummary: React.FC<Props> = ({ schema }) => {
             field: field,
           });
           return (
-            <span
+            <button
+              type="button"
+              aria-pressed={selectedField === field}
               key={field}
               className={cn(
                 "hover:bg-muted self-start px-2 py-2 rounded flex flex-row gap-1 items-center cursor-pointer lg:justify-center text-sm truncate shrink-0 overflow-hidden",
@@ -81,7 +83,7 @@ export const ColumnSummary: React.FC<Props> = ({ schema }) => {
                   ({cardinality})
                 </span>
               )}
-            </span>
+            </button>
           );
         })}
         {hasMore && (

package/src/plugins/impl/data-explorer/state/reducer.ts

@@ -47,7 +47,7 @@ const { valueAtom: chartSpecAtom, useActions } = createReducerAndAtoms(
     },
     set: (state, next: ChartSpec) => {
       // remove schema
-      const { schema, ...rest } = next;
+      const { schema: _schema, ...rest } = next;
       return { ...state, ...rest };
     },
   },

package/src/plugins/impl/data-frames/DataFramePlugin.tsx

@@ -154,7 +154,7 @@ export const DataFramePlugin = createPlugin<S>("marimo-dataframe")
       )
       .output(
         z.object({
-          data: z.union([z.string(), z.array(z.object({}).passthrough())]),
+          data: z.union([z.string(), z.array(z.looseObject({}))]),
           total_rows: z.number(),
         }),
       ),
@@ -192,7 +192,6 @@ const EMPTY: Transformations = {
 export const DataFrameComponent = memo(
   ({
     columns,
-    dataframeName,
     pageSize,
     showDownload,
     lazy,