@marimo-team/islands 0.23.10-dev4 → 0.23.10-dev42

package/src/core/network/requests-static.ts

@@ -3,6 +3,18 @@ import { toast } from "@/components/ui/use-toast";
 import { Logger } from "@/utils/Logger";
 import type { EditRequests, RunRequests } from "./types";
 
+const STATIC_NOTEBOOK_TOAST_ID = "static-notebook";
+
+function showStaticNotebookToast() {
+  toast({
+    id: STATIC_NOTEBOOK_TOAST_ID,
+    once: true,
+    title: "Static notebook",
+    description:
+      "This notebook is not connected to a kernel. Any interactive elements will not work.",
+  });
+}
+
 export function createStaticRequests(): EditRequests & RunRequests {
   const throwNotInEditMode = () => {
     throw new Error("Unreachable. Expected to be in run mode");
@@ -10,11 +22,7 @@ export function createStaticRequests(): EditRequests & RunRequests {
 
   return {
     sendComponentValues: async () => {
-      toast({
-        title: "Static notebook",
-        description:
-          "This notebook is not connected to a kernel. Any interactive elements will not work.",
-      });
+      showStaticNotebookToast();
       Logger.log("Updating UI elements is not supported in static mode");
       return null;
     },
@@ -27,11 +35,7 @@ export function createStaticRequests(): EditRequests & RunRequests {
       return null;
     },
     sendFunctionRequest: async () => {
-      toast({
-        title: "Static notebook",
-        description:
-          "This notebook is not connected to a kernel. Any interactive elements will not work.",
-      });
+      showStaticNotebookToast();
       Logger.log("Function requests are not supported in static mode");
       return null;
     },

package/src/core/wasm/worker/bootstrap.ts

@@ -55,6 +55,10 @@ export class DefaultWasmController implements WasmController {
     // Load pyodide and packages
     const span = t.startSpan("loadPyodide");
     try {
+      // Without this, this fails in Firefox with
+      // `Could not extract indexURL path from pyodide module`
+      // This fixes for Firefox and does not break Chrome/others
+      const indexURL = `https://cdn.jsdelivr.net/pyodide/${opts.pyodideVersion}/full/`;
       const pyodide = await loadPyodide({
         // Perf: These get loaded while pyodide is being bootstrapped
         packages: [
@@ -68,10 +72,14 @@ export class DefaultWasmController implements WasmController {
         ],
         _makeSnapshot: MAKE_SNAPSHOT,
         lockFileURL: `https://wasm.marimo.app/pyodide-lock.json?v=${opts.version}&pyodide=${opts.pyodideVersion}`,
-        // Without this, this fails in Firefox with
-        // `Could not extract indexURL path from pyodide module`
-        // This fixes for Firefox and does not break Chrome/others
-        indexURL: `https://cdn.jsdelivr.net/pyodide/${opts.pyodideVersion}/full/`,
+        indexURL,
+        // Since Pyodide 0.28.0, when lockFileURL is set, the package base URL
+        // defaults to the lockfile's URL (wasm.marimo.app) instead of indexURL.
+        // Unlike Node, browsers get no CDN fallback on a failed fetch, so we
+        // should pin packageBaseUrl back to the jsDelivr CDN  to restore
+        // the resolution akin to pre-0.28.
+        packageBaseUrl: indexURL,
+        convertNullToNone: true,
       });
       this.pyodide = pyodide;
       span.end("ok");

package/src/plugins/core/__test__/registerReactComponent.test.ts

@@ -3,11 +3,20 @@
 import ReactDOM from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
 import { z } from "zod";
+import { FUNCTIONS_REGISTRY } from "@/core/functions/FunctionRegistry";
+import type { FunctionCallResultMessage } from "@/core/kernel/messages";
+import { FunctionNotFoundError } from "@/utils/errors";
 import {
   isCustomMarimoElement,
   registerReactComponent,
 } from "../registerReactComponent";
 
+vi.mock("@/core/functions/FunctionRegistry", () => ({
+  FUNCTIONS_REGISTRY: { request: vi.fn() },
+}));
+
+const requestMock = vi.mocked(FUNCTIONS_REGISTRY.request);
+
 // Each custom element name can only be registered once per jsdom window,
 // so we use a counter to generate unique tag names across tests.
 let tagCounter = 0;
@@ -202,3 +211,90 @@ describe("connectedCallback - light DOM nesting detection", () => {
     outer.remove();
   });
 });
+
+describe("plugin function: not-found recovery", () => {
+  const NOT_FOUND: FunctionCallResultMessage = {
+    function_call_id:
+      "call-id" as FunctionCallResultMessage["function_call_id"],
+    status: { code: "error", message: "Function not found" },
+    found: false,
+    return_value: null,
+  };
+  const OK: FunctionCallResultMessage = {
+    function_call_id:
+      "call-id" as FunctionCallResultMessage["function_call_id"],
+    status: { code: "ok" },
+    found: true,
+    return_value: { ok: true },
+  };
+
+  // Mount a plugin exposing a single callable function and resolve the
+  // function map that PluginSlot hands to render(), so tests can invoke the
+  // request path directly.
+  async function mountWithFunction(): Promise<
+    (args: Record<string, unknown>) => Promise<unknown>
+  > {
+    const tag = uniqueTag("fn");
+    let captured:
+      | ((args: Record<string, unknown>) => Promise<unknown>)
+      | undefined;
+    registerReactComponent({
+      tagName: tag,
+      validator: z.any(),
+      functions: { run: { input: z.any(), output: z.any() } },
+      render: ({ functions }) => {
+        captured = (functions as Record<string, typeof captured>).run;
+        return null as never;
+      },
+    });
+
+    const wrapper = document.createElement("marimo-ui-element");
+    wrapper.setAttribute("object-id", "test-object-id");
+    const el = document.createElement(tag);
+    wrapper.append(el);
+    document.body.append(wrapper);
+
+    await vi.waitFor(() => expect(captured).toBeDefined());
+    return captured as (args: Record<string, unknown>) => Promise<unknown>;
+  }
+
+  beforeEach(() => {
+    requestMock.mockReset();
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  test("retries on found:false and resolves once the function appears", async () => {
+    const run = await mountWithFunction();
+    requestMock.mockResolvedValueOnce(NOT_FOUND).mockResolvedValueOnce(OK);
+
+    await expect(run({})).resolves.toEqual({ ok: true });
+    expect(requestMock).toHaveBeenCalledTimes(2);
+  });
+
+  test("throws FunctionNotFoundError after retries are exhausted", async () => {
+    const run = await mountWithFunction();
+    requestMock.mockResolvedValue(NOT_FOUND);
+
+    await expect(run({})).rejects.toBeInstanceOf(FunctionNotFoundError);
+    // Initial attempt plus three retries.
+    expect(requestMock).toHaveBeenCalledTimes(4);
+  });
+
+  test("does not retry once the function is found (found:true)", async () => {
+    const run = await mountWithFunction();
+    requestMock.mockResolvedValue({
+      function_call_id:
+        "call-id" as FunctionCallResultMessage["function_call_id"],
+      status: { code: "error", message: "boom" },
+      found: true,
+      return_value: null,
+    });
+
+    const promise = run({});
+    await expect(promise).rejects.toThrow("boom");
+    expect(requestMock).toHaveBeenCalledTimes(1);
+  });
+});

package/src/plugins/core/registerReactComponent.tsx

@@ -40,7 +40,10 @@ import {
 } from "@/hooks/useEventListener";
 import { StyleNamespace } from "@/theme/namespace";
 import { useTheme } from "@/theme/useTheme";
-import { CellNotInitializedError } from "@/utils/errors.ts";
+import {
+  CellNotInitializedError,
+  FunctionNotFoundError,
+} from "@/utils/errors.ts";
 import { Functions } from "@/utils/functions";
 import { shallowCompare } from "@/utils/shallow-compare";
 import { defineCustomElement } from "../../core/dom/defineCustomElement";
@@ -80,6 +83,12 @@ export interface IMarimoHTMLElement extends HTMLElement {
   rerender: () => void;
 }
 
+// Bounded exponential backoff for re-issuing a request whose function the
+// kernel reported as not found. Short enough to fail fast on a genuinely
+// missing function, long enough to outlast a transient object-id desync.
+const FUNCTION_NOT_FOUND_MAX_RETRIES = 3;
+const FUNCTION_NOT_FOUND_BASE_DELAY_MS = 150;
+
 interface PluginSlotProps<T> {
   hostElement: HTMLElement;
   plugin: IPlugin<T, unknown>;
@@ -188,8 +197,6 @@ function PluginSlotInternal<T>(
           args.length <= 1,
           `Plugin functions only supports a single argument. Called ${key}`,
         );
-        const objectId = getUIElementObjectId(hostElement);
-        invariant(objectId, "Object ID should exist");
 
         const isStatic = isStaticNotebook();
 
@@ -218,16 +225,41 @@ function PluginSlotInternal<T>(
           Logger.warn(`Cell ID ${cellId} cannot be found`);
         }
 
-        const response = await FUNCTIONS_REGISTRY.request({
-          args: prettyParse(input, args[0]),
-          functionName: key,
-          namespace: objectId,
-        });
-        if (response.status.code !== "ok") {
+        // A "function not found" response means the kernel never ran the
+        // function, so re-issuing the request is side-effect-safe regardless
+        // of whether the function is idempotent. This recovers from a
+        // transient window where the frontend's object-id leads the kernel's
+        // registry. The object-id is re-read each attempt so a corrected id
+        // from a re-render is picked up. Once the function is found
+        // (found === true) the request is never retried, since the failure
+        // is unrelated to lookup and retrying would not help.
+        const parsedArgs = prettyParse(input, args[0]);
+        for (let attempt = 0; ; attempt++) {
+          const namespace = getUIElementObjectId(hostElement);
+          invariant(namespace, "Object ID should exist");
+
+          const response = await FUNCTIONS_REGISTRY.request({
+            args: parsedArgs,
+            functionName: key,
+            namespace,
+          });
+          if (response.status.code === "ok") {
+            return prettyParse(output, response.return_value);
+          }
+
+          const recoverable = response.found === false;
+          if (recoverable && attempt < FUNCTION_NOT_FOUND_MAX_RETRIES) {
+            const delay = FUNCTION_NOT_FOUND_BASE_DELAY_MS * 2 ** attempt;
+            await new Promise((resolve) => setTimeout(resolve, delay));
+            continue;
+          }
+
           Logger.error(response.status);
+          if (recoverable) {
+            throw new FunctionNotFoundError();
+          }
           throw new Error(response.status.message || "Unknown error");
         }
-        return prettyParse(output, response.return_value);
       };
     }
 

package/src/plugins/impl/MultiselectPlugin.tsx

@@ -1,13 +1,10 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import { type JSX, useId, useMemo, useState } from "react";
-import { Virtuoso } from "react-virtuoso";
+import { type JSX, useId, useMemo } from "react";
 import { z } from "zod";
-import { cn } from "@/utils/cn";
-import { Combobox, ComboboxItem } from "../../components/ui/combobox";
-import { CommandSeparator } from "../../components/ui/command";
+import type { Option } from "@/components/ui/select-core";
+import { SelectList } from "@/components/ui/select-core";
 import type { IPlugin, IPluginProps, Setter } from "../types";
 import { Labeled } from "./common/labeled";
-import { multiselectFilterFn } from "./multiselectFilterFn";
 
 interface Data {
   label: string | null;
@@ -55,9 +52,6 @@ interface MultiselectProps extends Data {
   setValue: Setter<T>;
 }
 
-const SELECT_ALL_KEY = "__select_all__";
-const DESELECT_ALL_KEY = "__deselect_all__";
-
 export const Multiselect = ({
   options,
   label,
@@ -68,144 +62,27 @@ export const Multiselect = ({
   disabled,
 }: MultiselectProps): JSX.Element => {
   const id = useId();
-  const [searchQuery, setSearchQuery] = useState<string>("");
-
-  const filteredOptions = useMemo(() => {
-    if (!searchQuery) {
-      return options;
-    }
-    return options.filter(
-      (option) => multiselectFilterFn(option, searchQuery) === 1,
-    );
-  }, [options, searchQuery]);
-
-  const handleValueChange = (newValues: string[] | null) => {
-    if (!newValues || newValues.length === 0) {
-      setValue([]);
-      return;
-    }
-
-    // Remove select all and deselect all from the new values
-    newValues = newValues.filter(
-      (value) => value !== SELECT_ALL_KEY && value !== DESELECT_ALL_KEY,
-    );
-
-    if (maxSelections === 1) {
-      // For single selection, just take the last selected value
-      setValue([newValues[newValues.length - 1]]);
-      return;
-    }
-
-    if (maxSelections != null && newValues.length > maxSelections) {
-      // When over max selections, remove oldest selections
-      newValues = newValues.slice(-maxSelections);
-    }
-    setValue(newValues);
-  };
-
-  const handleSelectAll = () => {
-    setValue(options);
-  };
-
-  const handleDeselectAll = () => {
-    setValue([]);
-  };
-
-  const extraOptions: React.ReactNode[] = [];
-  const selectAllEnabled = options.length > 0 && value.length < options.length;
-  const deselectAllEnabled = options.length > 0 && value.length > 0;
-
-  // Only show when more than 2 options
-  // Only show select all when maxSelections is not set
-  if (options.length > 2 && maxSelections == null) {
-    extraOptions.push(
-      <ComboboxItem
-        key={SELECT_ALL_KEY}
-        value={SELECT_ALL_KEY}
-        onSelect={handleSelectAll}
-        disabled={!selectAllEnabled}
-      >
-        Select all
-      </ComboboxItem>,
-    );
-  }
-
-  if (options.length > 2) {
-    extraOptions.push(
-      <ComboboxItem
-        key={DESELECT_ALL_KEY}
-        value={DESELECT_ALL_KEY}
-        onSelect={handleDeselectAll}
-        disabled={!deselectAllEnabled}
-      >
-        {maxSelections === 1 ? "Deselect" : "Deselect all"}
-      </ComboboxItem>,
-      <CommandSeparator key="_separator" />,
-    );
-  }
-
-  const renderList = () => {
-    // List virtualization
-    if (filteredOptions.length > 200) {
-      return (
-        <Virtuoso
-          style={{ height: "200px" }}
-          totalCount={filteredOptions.length}
-          overscan={50}
-          itemContent={(i: number) => {
-            const comboboxItem = (
-              <ComboboxItem key={filteredOptions[i]} value={filteredOptions[i]}>
-                {filteredOptions[i]}
-              </ComboboxItem>
-            );
-
-            if (i === 0) {
-              return (
-                <>
-                  {extraOptions}
-                  {comboboxItem}
-                </>
-              );
-            }
-
-            return comboboxItem;
-          }}
-        />
-      );
-    }
-
-    const list = filteredOptions.map((option) => (
-      <ComboboxItem key={option} value={option}>
-        {option}
-      </ComboboxItem>
-    ));
-
-    return (
-      <>
-        {extraOptions}
-        {list}
-      </>
-    );
-  };
+  const items = useMemo<Array<Option<string>>>(
+    () => options.map((option) => ({ value: option, label: option })),
+    [options],
+  );
 
   return (
     <Labeled label={label} id={id} fullWidth={fullWidth}>
-      <Combobox<string>
-        displayValue={(option) => option}
-        placeholder="Select..."
-        multiple={true}
-        className={cn({
-          "w-full": fullWidth,
-        })}
+      <SelectList<string>
+        id={id}
+        options={items}
         value={value}
-        onValueChange={handleValueChange}
-        shouldFilter={false}
-        search={searchQuery}
-        onSearchChange={setSearchQuery}
+        onChange={(next: string[] | string | null) =>
+          setValue((next as string[] | null) ?? [])
+        }
+        multiple={true}
+        maxSelections={maxSelections}
+        pinSelected={true}
+        compactChipTrigger={true}
+        fullWidth={fullWidth}
         disabled={disabled}
-      >
-        {renderList()}
-      </Combobox>
+      />
     </Labeled>
   );
 };

package/src/plugins/impl/SearchableSelect.tsx

@@ -1,10 +1,9 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import { type JSX, useId, useMemo, useState } from "react";
-import { Virtuoso } from "react-virtuoso";
-import { Combobox, ComboboxItem } from "../../components/ui/combobox";
+import { type JSX, useId, useMemo } from "react";
+import type { Option } from "@/components/ui/select-core";
+import { SelectList } from "@/components/ui/select-core";
 import { cn } from "../../utils/cn";
 import { Labeled } from "./common/labeled";
-import { multiselectFilterFn } from "./multiselectFilterFn";
 
 interface SearchableSelectProps {
   options: string[];
@@ -16,8 +15,6 @@ interface SearchableSelectProps {
   disabled: boolean;
 }
 
-const NONE_KEY = "__none__";
-
 export const SearchableSelect = (props: SearchableSelectProps): JSX.Element => {
   const {
     options,
@@ -29,104 +26,26 @@ export const SearchableSelect = (props: SearchableSelectProps): JSX.Element => {
     disabled,
   } = props;
   const id = useId();
-  const [searchQuery, setSearchQuery] = useState<string>("");
-
-  const filteredOptions = useMemo(() => {
-    if (!searchQuery) {
-      return options;
-    }
-    return options.filter(
-      (option) => multiselectFilterFn(option, searchQuery) === 1,
-    );
-  }, [options, searchQuery]);
-
-  const handleValueChange = (newValue: string | null) => {
-    if (newValue == null) {
-      return;
-    }
-
-    if (newValue === NONE_KEY) {
-      setValue(null);
-    } else {
-      setValue(newValue);
-    }
-  };
-
-  const renderList = () => {
-    const extraOptions = allowSelectNone ? (
-      <ComboboxItem key={NONE_KEY} value={NONE_KEY}>
-        --
-      </ComboboxItem>
-    ) : null;
-
-    if (filteredOptions.length > 200) {
-      return (
-        <Virtuoso
-          style={{ height: "200px" }}
-          totalCount={filteredOptions.length}
-          overscan={50}
-          itemContent={(i: number) => {
-            const option = filteredOptions[i];
 
-            const comboboxItem = (
-              <ComboboxItem key={option} value={option}>
-                {option}
-              </ComboboxItem>
-            );
-
-            if (i === 0) {
-              return (
-                <>
-                  {extraOptions}
-                  {comboboxItem}
-                </>
-              );
-            }
-
-            return comboboxItem;
-          }}
-        />
-      );
-    }
-
-    const list = filteredOptions.map((option) => (
-      <ComboboxItem key={option} value={option}>
-        {option}
-      </ComboboxItem>
-    ));
-
-    return (
-      <>
-        {extraOptions}
-        {list}
-      </>
-    );
-  };
+  const items = useMemo<Array<Option<string>>>(
+    () => options.map((option) => ({ value: option, label: option })),
+    [options],
+  );
 
   return (
     <Labeled label={label} id={id} fullWidth={fullWidth}>
-      <Combobox<string>
-        displayValue={(option) => {
-          if (option === NONE_KEY) {
-            return "--";
-          }
-          return option;
-        }}
-        placeholder="Select..."
+      <SelectList<string>
+        id={id}
+        options={items}
+        value={value}
+        onChange={(next) => setValue((next as string | null) ?? null)}
         multiple={false}
-        className={cn({
-          "w-full": fullWidth,
-        })}
-        value={value ?? NONE_KEY}
-        onValueChange={handleValueChange}
-        shouldFilter={false}
-        search={searchQuery}
-        onSearchChange={setSearchQuery}
+        allowSelectNone={allowSelectNone}
+        fullWidth={fullWidth}
         disabled={disabled}
+        className={cn({ "w-full": fullWidth })}
         data-testid="marimo-plugin-searchable-dropdown"
-      >
-        {renderList()}
-      </Combobox>
+      />
     </Labeled>
   );
 };