@marimo-team/frontend 0.23.16-dev2 → 0.23.16-dev21

package/src/core/i18n/locale.ts

@@ -0,0 +1,71 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+/**
+ * Locale used when neither the configured locale nor the browser locale can be
+ * resolved to a valid BCP 47 tag.
+ */
+export const FALLBACK_LOCALE = "en-US";
+
+/**
+ * Whether a tag is accepted by `Intl` (and therefore by react-aria's
+ * `I18nProvider`, which constructs `Intl.Locale` internally).
+ */
+export function isValidLocale(locale: string): boolean {
+  if (!locale) {
+    return false;
+  }
+  try {
+    new Intl.Locale(locale);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Coerce a browser or config locale tag into a valid
+ * [BCP 47](https://www.rfc-editor.org/info/rfc5646) tag, or `null` if nothing
+ * usable can be recovered.
+ *
+ * Some environments report POSIX-style tags that `Intl` rejects with
+ * `RangeError: Incorrect locale information provided`, crashing anything that
+ * constructs an `Intl.*` formatter (see issue #9938). Known offenders:
+ * - POSIX modifiers, e.g. Chromium under Playwright reporting `en-US@posix`
+ * - charset suffixes, e.g. `en_US.UTF-8`
+ * - underscore separators, e.g. `en_US`
+ */
+export function normalizeLocale(tag: string | null | undefined): string | null {
+  if (!tag) {
+    return null;
+  }
+
+  const candidate = tag.split("@")[0].split(".")[0].trim().replaceAll("_", "-");
+
+  if (isValidLocale(candidate)) {
+    return candidate;
+  }
+
+  // Fall back to the language subtag alone (e.g. `en` from a mangled `en-XX`).
+  const language = candidate.split("-")[0];
+  if (isValidLocale(language)) {
+    return language;
+  }
+
+  return null;
+}
+
+/** Resolve the browser's locale to a safe BCP 47 tag.
+ * See https://github.com/marimo-team/marimo/issues/9938 */
+export function browserLocale(): string {
+  const language =
+    typeof navigator === "undefined" ? undefined : navigator.language;
+  return normalizeLocale(language) ?? FALLBACK_LOCALE;
+}
+
+/**
+ * Resolve a configured locale to a safe BCP 47 tag, preferring the config and
+ * falling back to the browser locale, then to {@link FALLBACK_LOCALE}.
+ */
+export function safeLocale(locale: string | null | undefined): string {
+  return normalizeLocale(locale) ?? browserLocale();
+}

package/src/core/islands/__tests__/bridge.test.ts

@@ -10,6 +10,7 @@ import {
 } from "@/__tests__/branded";
 import { notebookAtom } from "@/core/cells/cells";
 import { islandsPendingInitialRunsAtom } from "@/core/islands/state";
+import type { IslandsKernelMessage } from "../worker/worker";
 
 type Base64String = components["schemas"]["Base64String"];
 interface TestIslandApp {
@@ -173,6 +174,19 @@ describe("IslandsPyodideBridge", () => {
     });
   }
 
+  function sendKernelMessage(sessionGeneration: number) {
+    const listener = mockMessageListeners.get("kernelMessage");
+    if (!listener) {
+      throw new Error("Missing kernel message listener");
+    }
+    const message = {
+      message: "" as IslandsKernelMessage["message"],
+      sessionGeneration,
+    };
+    listener(message as never);
+    return message;
+  }
+
   async function initializeSingleApp() {
     mockSingleApp();
     await bridge.initializeApps();
@@ -281,6 +295,99 @@ describe("IslandsPyodideBridge", () => {
   });
 
   describe("app lifecycle", () => {
+    it("ignores messages after a session yields ownership", async () => {
+      const consumeMessage = vi.fn();
+      bridge.consumeMessages(consumeMessage);
+      mockSingleApp();
+      await bridge.initializeApps();
+
+      const firstMessage = sendKernelMessage(1);
+      let finishReplacement!: () => void;
+      mockReplaceSessionRequest.mockReturnValueOnce(
+        new Promise<void>((resolve) => {
+          finishReplacement = resolve;
+        }),
+      );
+      setSingleApp("generated app 2");
+      const replacement = bridge.initializeApps();
+      await vi.waitFor(() =>
+        expect(mockReplaceSessionRequest).toHaveBeenCalledOnce(),
+      );
+      sendKernelMessage(1);
+      const currentMessage = sendKernelMessage(2);
+
+      expect(consumeMessage.mock.calls).toEqual([
+        [firstMessage],
+        [currentMessage],
+      ]);
+
+      finishReplacement();
+      await replacement;
+    });
+
+    it("restores message ownership when replacement fails", async () => {
+      const consumeMessage = vi.fn();
+      bridge.consumeMessages(consumeMessage);
+      mockSingleApp();
+      await bridge.initializeApps();
+      mockReplaceSessionRequest.mockRejectedValueOnce(
+        new Error("replacement failed"),
+      );
+      setSingleApp("generated app 2");
+
+      await expect(bridge.initializeApps()).rejects.toThrow(
+        "replacement failed",
+      );
+      const previousMessage = sendKernelMessage(1);
+      sendKernelMessage(2);
+
+      expect(consumeMessage.mock.calls).toEqual([[previousMessage]]);
+    });
+
+    it("ignores messages while their session is stopping", async () => {
+      const consumeMessage = vi.fn();
+      bridge.consumeMessages(consumeMessage);
+      mockSingleApp();
+      await bridge.initializeApps();
+      let finishStop!: () => void;
+      mockStopSessionRequest.mockReturnValueOnce(
+        new Promise<void>((resolve) => {
+          finishStop = resolve;
+        }),
+      );
+
+      const stop = bridge.stopSession();
+      await vi.waitFor(() =>
+        expect(mockStopSessionRequest).toHaveBeenCalledOnce(),
+      );
+      sendKernelMessage(1);
+
+      expect(consumeMessage).not.toHaveBeenCalled();
+
+      finishStop();
+      await stop;
+    });
+
+    it("forwards messages from every app in a multi-app document", async () => {
+      const consumeMessage = vi.fn();
+      bridge.consumeMessages(consumeMessage);
+      mockParseMarimoIslandApps.mockReturnValue([app(), app("app-2")]);
+      mockCreateMarimoFile
+        .mockReturnValueOnce("generated app 1")
+        .mockReturnValueOnce("generated app 2");
+      signalWorkerReady();
+
+      await bridge.initializeApps();
+      const firstMessage = sendKernelMessage(1);
+      const secondMessage = sendKernelMessage(2);
+      sendKernelMessage(3);
+
+      expect(consumeMessage.mock.calls).toEqual([
+        [firstMessage],
+        [secondMessage],
+      ]);
+    });
+
     it("holds controls until the first app session is ready", async () => {
       setSingleApp();
 

package/src/core/islands/bridge.ts

@@ -66,6 +66,7 @@ export class IslandsPyodideBridge implements RunRequests, EditRequests {
   private session: AppSession | undefined;
   private sessionReady = new Deferred<AppSession>();
   private nextSessionGeneration = 0;
+  private readonly activeSessionGenerations = new Set<number>();
   private appTransition = Promise.resolve();
   private workerReady = new Deferred<void>();
 
@@ -110,6 +111,11 @@ export class IslandsPyodideBridge implements RunRequests, EditRequests {
     );
 
     this.rpc.addMessageListener("kernelMessage", (message) => {
+      // A stopped session can still have messages in transit after the next
+      // app takes ownership of the shared frontend state.
+      if (!this.activeSessionGenerations.has(message.sessionGeneration)) {
+        return;
+      }
       this.messageConsumer?.(message);
     });
   }
@@ -149,6 +155,7 @@ export class IslandsPyodideBridge implements RunRequests, EditRequests {
       return;
     }
     if (apps.length > 0) {
+      this.activeSessionGenerations.clear();
       this.store.set(
         islandsPendingInitialRunsAtom,
         new Set(apps.map((_, index) => this.nextSessionGeneration + index + 1)),
@@ -165,6 +172,7 @@ export class IslandsPyodideBridge implements RunRequests, EditRequests {
       };
       const previousSession = this.session;
       const replacesSession = managesSingleApp && previousSession !== undefined;
+      this.activeSessionGenerations.add(request.sessionGeneration);
       if (replacesSession) {
         this.store.set(notebookAtom, initialNotebookState());
       }
@@ -186,8 +194,14 @@ export class IslandsPyodideBridge implements RunRequests, EditRequests {
           this.sessionReady.resolve(this.session);
         }
       } catch (error) {
+        this.activeSessionGenerations.delete(request.sessionGeneration);
         if (this.session?.sessionGeneration === request.sessionGeneration) {
           this.session = previousSession;
+          if (previousSession) {
+            this.activeSessionGenerations.add(
+              previousSession.sessionGeneration,
+            );
+          }
         }
         Logger.error(`Failed to start session for app ${app.id}:`, error);
         if (managesSingleApp) {
@@ -203,6 +217,7 @@ export class IslandsPyodideBridge implements RunRequests, EditRequests {
       if (session?.code === undefined || (appId && session.appId !== appId)) {
         return;
       }
+      this.activeSessionGenerations.delete(session.sessionGeneration);
       await this.rpc.proxy.request.stopSession({
         appId: session.appId,
         sessionGeneration: session.sessionGeneration,

package/src/core/mode.ts

@@ -78,6 +78,16 @@ export const viewStateAtom = atom<ViewState>({
 
 export const initialModeAtom = atom<AppMode | undefined>(undefined);
 
+/**
+ * Whether the current page hosts a notebook, and so connects to a kernel.
+ * False for non-notebook pages (home, gallery), which are served without a
+ * session.
+ */
+export function isNotebookPage(): boolean {
+  const mode = store.get(initialModeAtom);
+  return mode !== "home" && mode !== "gallery";
+}
+
 export const kioskModeAtom = atom<boolean>(false);
 
 /**

package/src/core/network/__tests__/connection.test.ts

@@ -0,0 +1,45 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { afterEach, describe, expect, it } from "vitest";
+import { initialModeAtom } from "@/core/mode";
+import { store } from "@/core/state/jotai";
+import { WebSocketState } from "../../websocket/types";
+import { connectionAtom, waitForConnectionOpenIfNotebook } from "../connection";
+
+const NEVER = Symbol("never");
+
+/**
+ * Resolves to NEVER if the promise does not settle within a macrotask.
+ */
+function settledOrNever(promise: Promise<unknown>) {
+  return Promise.race([
+    promise,
+    new Promise((resolve) => setTimeout(() => resolve(NEVER), 0)),
+  ]);
+}
+
+describe("waitForConnectionOpenIfNotebook", () => {
+  afterEach(() => {
+    store.set(connectionAtom, { state: WebSocketState.NOT_STARTED });
+    store.set(initialModeAtom, undefined);
+  });
+
+  it.each(["home", "gallery"] as const)(
+    "resolves without a connection in %s mode",
+    async (mode) => {
+      store.set(initialModeAtom, mode);
+      await expect(
+        settledOrNever(waitForConnectionOpenIfNotebook()),
+      ).resolves.not.toBe(NEVER);
+    },
+  );
+
+  it("waits for the connection to open in edit mode", async () => {
+    store.set(initialModeAtom, "edit");
+    const promise = waitForConnectionOpenIfNotebook();
+    await expect(settledOrNever(promise)).resolves.toBe(NEVER);
+
+    store.set(connectionAtom, { state: WebSocketState.OPEN });
+    await expect(settledOrNever(promise)).resolves.not.toBe(NEVER);
+  });
+});

package/src/core/network/__tests__/requests-network.test.ts

@@ -32,6 +32,7 @@ vi.mock("../api", async () => {
 vi.mock("../connection", () => ({
   isConnectedAtom: { read: vi.fn(() => true) },
   waitForConnectionOpen: vi.fn().mockResolvedValue(undefined),
+  waitForConnectionOpenIfNotebook: vi.fn().mockResolvedValue(undefined),
 }));
 
 describe("createNetworkRequests", () => {
@@ -121,6 +122,18 @@ describe("createNetworkRequests", () => {
       expect(mockClient.GET).toHaveBeenCalledWith("/api/environment");
     });
 
+    it("getPackageList should not require a kernel connection", async () => {
+      const { waitForConnectionOpen, waitForConnectionOpenIfNotebook } =
+        await import("../connection");
+
+      const requests = createNetworkRequests();
+      await requests.getPackageList();
+
+      expect(mockClient.GET).toHaveBeenCalledWith("/api/packages/list");
+      expect(waitForConnectionOpenIfNotebook).toHaveBeenCalled();
+      expect(waitForConnectionOpen).not.toHaveBeenCalled();
+    });
+
     it("exportAsIPYNB should call the new endpoint as text", async () => {
       const requests = createNetworkRequests();
       await requests.exportAsIPYNB({

package/src/core/network/connection.ts

@@ -1,5 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import { atom } from "jotai";
+import { isNotebookPage } from "../mode";
 import { waitFor } from "../state/jotai";
 import { type ConnectionStatus, WebSocketState } from "../websocket/types";
 
@@ -17,6 +18,20 @@ export function waitForConnectionOpen() {
   });
 }
 
+/**
+ * Waits for the kernel connection, but only on pages that open one. Non-notebook
+ * pages (home, gallery) never connect, so waiting there would hang forever.
+ *
+ * Use for requests that the marimo server can serve without a session, but that
+ * should still wait for the kernel when a notebook is open.
+ */
+export function waitForConnectionOpenIfNotebook() {
+  if (!isNotebookPage()) {
+    return Promise.resolve();
+  }
+  return waitForConnectionOpen();
+}
+
 export const isConnectingAtom = atom((get) => {
   const connection = get(connectionAtom);
   return connection.state === WebSocketState.CONNECTING;

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

@@ -3,7 +3,10 @@
 import { once } from "@/utils/once";
 import { getRuntimeManager } from "../runtime/config";
 import { API, createClientWithRuntimeManager } from "./api";
-import { waitForConnectionOpen } from "./connection";
+import {
+  waitForConnectionOpen,
+  waitForConnectionOpenIfNotebook,
+} from "./connection";
 import type { EditRequests, RunRequests } from "./types";
 
 /**
@@ -489,12 +492,12 @@ export function createNetworkRequests(): EditRequests & RunRequests {
     },
     getPackageList: async () => {
       // If the sidebar is already open, it may try to load before the session has been initialized
-      await waitForConnectionOpen();
+      await waitForConnectionOpenIfNotebook();
       return getClient().GET("/api/packages/list").then(handleResponse);
     },
     getDependencyTree: async () => {
       // If the sidebar is already open, it may try to load before the session has been initialized
-      await waitForConnectionOpen();
+      await waitForConnectionOpenIfNotebook();
       return getClient().GET("/api/packages/tree").then(handleResponse);
     },
     listSecretKeys: async (request) => {

package/src/core/network/types.ts

@@ -191,7 +191,9 @@ export interface EditRequests {
     request: FileMoveRequest,
   ) => Promise<FileMoveResponse>;
   sendUpdateFile: (request: FileUpdateRequest) => Promise<FileUpdateResponse>;
-  sendFileDetails: (request: { path: string }) => Promise<FileDetailsResponse>;
+  sendFileDetails: (
+    request: FileDetailsRequest,
+  ) => Promise<FileDetailsResponse>;
   // Homepage requests
   openTutorial: (request: OpenTutorialRequest) => Promise<MarimoFile>;
   getRecentFiles: () => Promise<RecentFilesResponse>;

package/src/plugins/impl/FormPlugin.tsx

@@ -148,7 +148,7 @@ export const FormWrapper = <T,>({
           if (evt.key === "Enter" && (evt.ctrlKey || evt.metaKey)) {
             evt.preventDefault();
             evt.stopPropagation();
-            setValue(newValue);
+            formDiv.current?.requestSubmit();
           }
         }}
       >

package/src/plugins/impl/__tests__/FormPlugin.test.tsx

@@ -0,0 +1,162 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { FormWrapper } from "../FormPlugin";
+
+describe("FormPlugin", () => {
+  it("submits the form on Ctrl+Enter and calls setValue", async () => {
+    const setValue = vi.fn();
+    const validate = vi.fn().mockResolvedValue(null);
+
+    render(
+      <FormWrapper
+        currentValue="old-val"
+        newValue="new-val"
+        setValue={setValue}
+        validate={validate}
+        shouldValidate={false}
+        clearOnSubmit={false}
+        submitButtonLabel="Submit"
+        bordered={true}
+        loading={false}
+        submitButtonDisabled={false}
+        showClearButton={false}
+        clearButtonLabel="Clear"
+        label={null}
+      >
+        <input data-testid="input" />
+      </FormWrapper>,
+    );
+
+    const input = screen.getByTestId("input");
+
+    // Simulate Ctrl+Enter on input
+    fireEvent.keyDown(input, { key: "Enter", ctrlKey: true });
+
+    await waitFor(() => {
+      expect(setValue).toHaveBeenCalledWith("new-val");
+    });
+  });
+
+  it("submits the form on Ctrl+Enter and runs validation when shouldValidate is true", async () => {
+    const setValue = vi.fn();
+    const validate = vi.fn().mockResolvedValue("Validation failed message");
+
+    render(
+      <FormWrapper
+        currentValue="old-val"
+        newValue="new-val"
+        setValue={setValue}
+        validate={validate}
+        shouldValidate={true}
+        clearOnSubmit={false}
+        submitButtonLabel="Submit"
+        bordered={true}
+        loading={false}
+        submitButtonDisabled={false}
+        showClearButton={false}
+        clearButtonLabel="Clear"
+        label={null}
+      >
+        <input data-testid="input" />
+      </FormWrapper>,
+    );
+
+    const input = screen.getByTestId("input");
+
+    // Simulate Ctrl+Enter on input
+    fireEvent.keyDown(input, { key: "Enter", ctrlKey: true });
+
+    await waitFor(() => {
+      expect(validate).toHaveBeenCalledWith({ value: "new-val" });
+      // should not submit (setValue not called) due to validation failure
+      expect(setValue).not.toHaveBeenCalled();
+      // error message displayed
+      expect(screen.getByText("Validation failed message")).toBeInTheDocument();
+    });
+  });
+
+  it("clears inputs on submission when clearOnSubmit is true", async () => {
+    const setValue = vi.fn();
+    const validate = vi.fn().mockResolvedValue(null);
+
+    let mockUIElement: (HTMLElement & { reset?: () => void }) | null = null;
+    const mockReset = vi.fn();
+
+    render(
+      <FormWrapper
+        currentValue="old-val"
+        newValue="new-val"
+        setValue={setValue}
+        validate={validate}
+        shouldValidate={false}
+        clearOnSubmit={true}
+        submitButtonLabel="Submit"
+        bordered={true}
+        loading={false}
+        submitButtonDisabled={false}
+        showClearButton={false}
+        clearButtonLabel="Clear"
+        label={null}
+      >
+        <div
+          ref={(el) => {
+            if (el && !mockUIElement) {
+              mockUIElement = document.createElement("marimo-ui-element");
+              mockUIElement.setAttribute("data-testid", "mock-ui-element");
+              mockUIElement.reset = mockReset;
+              const inputEl = document.createElement("input");
+              inputEl.type = "text";
+              mockUIElement.appendChild(inputEl);
+              el.appendChild(mockUIElement);
+            }
+          }}
+        />
+      </FormWrapper>,
+    );
+
+    const input = screen.getByRole("textbox");
+
+    // Simulate Ctrl+Enter on input
+    fireEvent.keyDown(input, { key: "Enter", ctrlKey: true });
+
+    await waitFor(() => {
+      expect(setValue).toHaveBeenCalledWith("new-val");
+      expect(mockReset).toHaveBeenCalled();
+    });
+  });
+
+  it("does not submit on Shift+Enter", async () => {
+    const setValue = vi.fn();
+    const validate = vi.fn().mockResolvedValue(null);
+
+    render(
+      <FormWrapper
+        currentValue="old-val"
+        newValue="new-val"
+        setValue={setValue}
+        validate={validate}
+        shouldValidate={false}
+        clearOnSubmit={false}
+        submitButtonLabel="Submit"
+        bordered={true}
+        loading={false}
+        submitButtonDisabled={false}
+        showClearButton={false}
+        clearButtonLabel="Clear"
+        label={null}
+      >
+        <input data-testid="input" />
+      </FormWrapper>,
+    );
+
+    const input = screen.getByTestId("input");
+
+    // Simulate Shift+Enter on input
+    fireEvent.keyDown(input, { key: "Enter", shiftKey: true });
+
+    expect(setValue).not.toHaveBeenCalled();
+    expect(validate).not.toHaveBeenCalled();
+  });
+});