@marimo-team/islands 0.19.3-dev30 → 0.19.3-dev34

package/dist/main.js

@@ -56281,7 +56281,7 @@ Database schema: ${c}`), (_a3 = r2.aiFix) == null ? void 0 : _a3.setAiCompletion
             shouldFilter: false,
             children: [
               (0, import_jsx_runtime.jsx)(CommandInput, {
-                placeholder: "Search",
+                placeholder: `Search among the top ${v.length} values`,
                 autoFocus: true,
                 onValueChange: (e3) => _(e3.trim())
               }),
@@ -101155,7 +101155,7 @@ Defaulting to \`null\`.`;
       return Logger.warn("Failed to get version from mount config"), null;
     }
   }
-  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.19.3-dev30"), showCodeInRunModeAtom = atom(true);
+  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.19.3-dev34"), showCodeInRunModeAtom = atom(true);
   atom(null);
   var VIRTUAL_FILE_REGEX = /\/@file\/([^\s"&'/]+)\.([\dA-Za-z]+)/g, VirtualFileTracker = class e {
     constructor() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.19.3-dev30",
+  "version": "0.19.3-dev34",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/__tests__/mount.test.ts

@@ -0,0 +1,128 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { connectionAtom } from "@/core/network/connection";
+import { store } from "@/core/state/jotai";
+import { WebSocketState } from "@/core/websocket/types";
+import { mount, visibleForTesting } from "../mount";
+
+// Mock React DOM
+vi.mock("react-dom/client", () => ({
+  createRoot: vi.fn(() => ({
+    render: vi.fn(),
+  })),
+}));
+
+// Mock static state
+vi.mock("@/core/static/static-state", () => ({
+  isStaticNotebook: vi.fn(() => false),
+}));
+
+// Mock other side-effect modules
+vi.mock("@/core/vscode/vscode-bindings", () => ({
+  maybeRegisterVSCodeBindings: vi.fn(),
+}));
+
+vi.mock("@/plugins/plugins", () => ({
+  initializePlugins: vi.fn(),
+}));
+
+vi.mock("@/core/network/auth", () => ({
+  cleanupAuthQueryParams: vi.fn(),
+}));
+
+vi.mock("@/utils/vitals", () => ({
+  reportVitals: vi.fn(),
+}));
+
+// Mock preloadPage
+vi.mock("@/core/MarimoApp", () => ({
+  MarimoApp: () => null,
+  preloadPage: vi.fn(),
+}));
+
+describe("mount", () => {
+  const mockElement = document.createElement("div");
+
+  beforeEach(() => {
+    visibleForTesting.reset();
+    // Reset connection atom to initial state
+    store.set(connectionAtom, { state: WebSocketState.NOT_STARTED });
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  const baseOptions = {
+    filename: "test.py",
+    code: "",
+    version: "0.0.1",
+    mode: "edit" as const,
+    config: {},
+    configOverrides: {},
+    appConfig: {},
+    view: { showAppCode: true },
+    serverToken: "",
+  };
+
+  describe("connection state initialization", () => {
+    it("should set connection to CONNECTING when runtimeConfig has lazy=false", () => {
+      mount(
+        {
+          ...baseOptions,
+          runtimeConfig: [{ url: "http://localhost:8080", lazy: false }],
+        },
+        mockElement,
+      );
+
+      const connection = store.get(connectionAtom);
+      expect(connection.state).toBe(WebSocketState.CONNECTING);
+    });
+
+    it("should keep connection as NOT_STARTED when runtimeConfig has lazy=true", () => {
+      mount(
+        {
+          ...baseOptions,
+          runtimeConfig: [{ url: "http://localhost:8080", lazy: true }],
+        },
+        mockElement,
+      );
+
+      const connection = store.get(connectionAtom);
+      expect(connection.state).toBe(WebSocketState.NOT_STARTED);
+    });
+
+    it("should keep connection as NOT_STARTED when no runtimeConfig is provided", () => {
+      mount(
+        {
+          ...baseOptions,
+          runtimeConfig: [],
+        },
+        mockElement,
+      );
+
+      const connection = store.get(connectionAtom);
+      expect(connection.state).toBe(WebSocketState.NOT_STARTED);
+    });
+
+    it("should keep connection as NOT_STARTED for static notebooks even with lazy=false", async () => {
+      const { isStaticNotebook } = await import("@/core/static/static-state");
+      vi.mocked(isStaticNotebook).mockReturnValue(true);
+
+      // Reset mount state to allow another mount
+      visibleForTesting.reset();
+
+      mount(
+        {
+          ...baseOptions,
+          runtimeConfig: [{ url: "http://localhost:8080", lazy: false }],
+        },
+        mockElement,
+      );
+
+      const connection = store.get(connectionAtom);
+      expect(connection.state).toBe(WebSocketState.NOT_STARTED);
+    });
+  });
+});

package/src/components/data-table/column-header.tsx

@@ -593,7 +593,7 @@ const PopoverFilterByValues = <TData, TValue>({
       <>
         <Command className="text-sm outline-hidden" shouldFilter={false}>
           <CommandInput
-            placeholder="Search"
+            placeholder={`Search among the top ${data.length} values`}
             autoFocus={true}
             onValueChange={(value) => setQuery(value.trim())}
           />

package/src/components/editor/alerts/connecting-alert.tsx

@@ -2,6 +2,7 @@
 
 import { useAtomValue } from "jotai";
 import { LoadingEllipsis } from "@/components/icons/loading-ellipsis";
+import { Spinner } from "@/components/icons/spinner";
 import { Button } from "@/components/ui/button";
 import { DelayMount } from "@/components/utils/delay-mount";
 import {
@@ -10,24 +11,50 @@ import {
   isNotStartedAtom,
 } from "@/core/network/connection";
 import { useConnectToRuntime } from "@/core/runtime/config";
+import { Banner } from "@/plugins/impl/common/error-banner";
 import { Tooltip } from "../../ui/tooltip";
 import { FloatingAlert } from "./floating-alert";
 
 const SHORT_DELAY_MS = 1000; // 1 second
+const LONG_DELAY_MS = 5000; // 5 seconds
 
 export const ConnectingAlert: React.FC = () => {
   const isConnecting = useAtomValue(isConnectingAtom);
   const isClosed = useAtomValue(isClosedAtom);
 
   if (isConnecting) {
+    const subtleNotification = (
+      <Tooltip content="Connecting to a marimo runtime">
+        <div className="flex items-center">
+          <LoadingEllipsis size={5} className="text-yellow-500" />
+        </div>
+      </Tooltip>
+    );
+
+    const longNotification = (
+      <Banner
+        kind="info"
+        className="flex flex-col rounded py-2 px-4 animate-in slide-in-from-top w-fit"
+      >
+        <div className="flex flex-col gap-4 justify-between items-start text-muted-foreground text-base">
+          <div className="flex items-center gap-2">
+            <Spinner className="h-4 w-4" />
+            <p>Connecting to a marimo runtime ...</p>
+          </div>
+        </div>
+      </Banner>
+    );
+
+    // This waits for 1 second to show the subtle notification, then shows the long notification after 5 seconds.
     return (
       <DelayMount milliseconds={SHORT_DELAY_MS}>
-        <div className="absolute top-4 m-0 flex items-center min-h-[28px] left-1/2 transform -translate-x-1/2 z-200 ">
-          <Tooltip content="Connecting to a marimo runtime">
-            <div className="flex items-center">
-              <LoadingEllipsis size={5} className="text-yellow-500" />
-            </div>
-          </Tooltip>
+        <div className="m-0 flex items-center min-h-[28px] fixed top-5 left-1/2 transform -translate-x-1/2 z-200">
+          <DelayMount
+            milliseconds={LONG_DELAY_MS}
+            fallback={subtleNotification}
+          >
+            {longNotification}
+          </DelayMount>
         </div>
       </DelayMount>
     );

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

@@ -34,12 +34,6 @@ vi.mock("../connection", () => ({
   waitForConnectionOpen: vi.fn().mockResolvedValue(undefined),
 }));
 
-vi.mock("../../state/jotai", () => ({
-  store: {
-    get: vi.fn(() => true),
-  },
-}));
-
 describe("createNetworkRequests", () => {
   let mockClient: any;
   let capturedCalls: Map<string, { hasParams: boolean; endpoint: string }>;
@@ -80,18 +74,6 @@ describe("createNetworkRequests", () => {
   });
 
   describe("special behavior", () => {
-    it("sendRun should drop requests if not connected", async () => {
-      const { store } = await import("../../state/jotai");
-
-      vi.mocked(store.get).mockReturnValue(false);
-
-      const requests = createNetworkRequests();
-      const result = await requests.sendRun({} as any);
-
-      expect(result).toBe(null);
-      expect(mockClient.POST).not.toHaveBeenCalled();
-    });
-
     it("exportAsHTML should set assetUrl in dev/test mode", async () => {
       const originalEnv = process.env.NODE_ENV;
       process.env.NODE_ENV = "development";

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

@@ -2,9 +2,8 @@
 
 import { once } from "lodash-es";
 import { getRuntimeManager } from "../runtime/config";
-import { store } from "../state/jotai";
 import { API, createClientWithRuntimeManager } from "./api";
-import { isConnectedAtom, waitForConnectionOpen } from "./connection";
+import { waitForConnectionOpen } from "./connection";
 import type { EditRequests, RunRequests } from "./types";
 
 const { handleResponse, handleResponseReturnNull } = API;
@@ -105,11 +104,7 @@ export function createNetworkRequests(): EditRequests & RunRequests {
         .then(handleResponseReturnNull);
     },
     sendRun: async (request) => {
-      // Rather than waiting, we just drop all sendRun requests if the connection is not open.
-      // Otherwise we can get into a weird state of sending requests for cells that no longer exist.
-      if (!store.get(isConnectedAtom)) {
-        return null;
-      }
+      await waitForConnectionOpen();
       return getClient()
         .POST("/api/kernel/run", {
           body: request,

package/src/mount.tsx

@@ -29,6 +29,7 @@ import {
 import { MarimoApp, preloadPage } from "./core/MarimoApp";
 import { type AppMode, initialModeAtom, viewStateAtom } from "./core/mode";
 import { cleanupAuthQueryParams } from "./core/network/auth";
+import { connectionAtom } from "./core/network/connection";
 import { requestClientAtom } from "./core/network/requests";
 import { resolveRequestClient } from "./core/network/resolve";
 import {
@@ -42,6 +43,7 @@ import { isStaticNotebook } from "./core/static/static-state";
 import { maybeRegisterVSCodeBindings } from "./core/vscode/vscode-bindings";
 import type { FileStore } from "./core/wasm/store";
 import { notebookFileStore } from "./core/wasm/store";
+import { WebSocketState } from "./core/websocket/types";
 import { vegaLoader } from "./plugins/impl/vega/loader";
 import { initializePlugins } from "./plugins/plugins";
 import { ThemeProvider } from "./theme/ThemeProvider";
@@ -304,6 +306,10 @@ function initStore(options: unknown) {
       ...firstRuntimeConfig,
       serverToken: parsedOptions.data.serverToken,
     });
+    // If the remote runtime is not lazy, start it in CONNECTING
+    if (!firstRuntimeConfig.lazy && !isStaticNotebook()) {
+      store.set(connectionAtom, { state: WebSocketState.CONNECTING });
+    }
   } else {
     store.set(runtimeConfigAtom, {
       ...DEFAULT_RUNTIME_CONFIG,