@marimo-team/frontend 0.19.3-dev8 → 0.19.4-dev0

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

@@ -1,4 +1,4 @@
-/* Copyright 2024 Marimo. All rights reserved. */
+/* Copyright 2026 Marimo. All rights reserved. */
 
 import { NoKernelConnectedError } from "@/utils/errors";
 import { Logger } from "@/utils/Logger";
@@ -67,6 +67,7 @@ const ACTIONS: Record<keyof AllRequests, Action> = {
   autoExportAsHTML: "waitForConnectionOpen",
   autoExportAsMarkdown: "waitForConnectionOpen",
   autoExportAsIPYNB: "waitForConnectionOpen",
+  updateCellOutputs: "waitForConnectionOpen",
 
   // Sidebar operations that wait for connection
   listSecretKeys: "throwError",
@@ -152,7 +153,7 @@ export function createLazyRequests(
             `Dropping request: ${key}, since not connected to a kernel.`,
           );
           // Silently drop the request
-          return Promise.resolve();
+          return;
 
         case "throwError":
           throw new NoKernelConnectedError();

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,
@@ -410,6 +405,14 @@ export function createNetworkRequests(): EditRequests & RunRequests {
         })
         .then(handleResponseReturnNull);
     },
+    updateCellOutputs: async (request) => {
+      return getClient()
+        .POST("/api/export/update_cell_outputs", {
+          body: request,
+          params: getParams(),
+        })
+        .then(handleResponseReturnNull);
+    },
     addPackage: (request) => {
       return getClient()
         .POST("/api/packages/add", {

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

@@ -79,6 +79,7 @@ export function createStaticRequests(): EditRequests & RunRequests {
     autoExportAsHTML: throwNotInEditMode,
     autoExportAsMarkdown: throwNotInEditMode,
     autoExportAsIPYNB: throwNotInEditMode,
+    updateCellOutputs: throwNotInEditMode,
     addPackage: throwNotInEditMode,
     removePackage: throwNotInEditMode,
     getPackageList: throwNotInEditMode,

package/src/core/network/requests-toasting.tsx

@@ -64,6 +64,7 @@ export function createErrorToastingRequests(
     autoExportAsHTML: "", // No toast
     autoExportAsMarkdown: "", // No toast
     autoExportAsIPYNB: "", // No toast
+    updateCellOutputs: "", // No toast
     addPackage: "Failed to add package",
     removePackage: "Failed to remove package",
     getPackageList: "Failed to get package list",

package/src/core/network/types.ts

@@ -21,6 +21,7 @@ export type ExportAsHTMLRequest = schemas["ExportAsHTMLRequest"];
 export type ExportAsMarkdownRequest = schemas["ExportAsMarkdownRequest"];
 export type ExportAsIPYNBRequest = schemas["ExportAsIPYNBRequest"];
 export type ExportAsScriptRequest = schemas["ExportAsScriptRequest"];
+export type UpdateCellOutputsRequest = schemas["UpdateCellOutputsRequest"];
 export type FileCreateRequest = schemas["FileCreateRequest"];
 export type FileCreateResponse = schemas["FileCreateResponse"];
 export type FileDeleteRequest = schemas["FileDeleteRequest"];
@@ -175,6 +176,7 @@ export interface EditRequests {
   autoExportAsHTML: (request: ExportAsHTMLRequest) => Promise<null>;
   autoExportAsMarkdown: (request: ExportAsMarkdownRequest) => Promise<null>;
   autoExportAsIPYNB: (request: ExportAsIPYNBRequest) => Promise<null>;
+  updateCellOutputs: (request: UpdateCellOutputsRequest) => Promise<null>;
   // Package requests
   getPackageList: () => Promise<ListPackagesResponse>;
   getDependencyTree: () => Promise<DependencyTreeResponse>;

package/src/core/wasm/bridge.ts

@@ -589,6 +589,7 @@ export class PyodideBridge implements RunRequests, EditRequests {
   autoExportAsHTML = throwNotImplemented;
   autoExportAsMarkdown = throwNotImplemented;
   autoExportAsIPYNB = throwNotImplemented;
+  updateCellOutputs = throwNotImplemented;
   writeSecret = throwNotImplemented;
   invokeAiTool = throwNotImplemented;
   clearCache = throwNotImplemented;

package/src/css/globals.css

@@ -184,8 +184,10 @@
   --shadow-2xl-solid: 10px 12px 0px 0px var(--base-shadow-darker), 0 0px 8px 0px hsl(0deg 0% 90% / 50%);
 
   /* Solid shadows with lighter shade color */
+
   /* biome-ignore format: definition needs to be oneline or breaks variants */
   --shadow-sm-solid-shade: 2px 2px 0px 0px var(--base-shadow), 0px 0px 2px 0px hsl(0deg 0% 50% / 20%);
+
   /* biome-ignore format: definition needs to be oneline or breaks variants */
   --shadow-md-solid-shade: 4px 4px 0px 0px var(--base-shadow), 0 0px 2px 0px hsl(0deg 0% 60% / 50%);
 }

package/src/hooks/__tests__/useInterval.test.tsx

@@ -67,4 +67,108 @@ describe("useInterval", () => {
     vi.advanceTimersByTime(1000);
     expect(callback).not.toHaveBeenCalled();
   });
+
+  describe("skipIfRunning", () => {
+    it("should allow overlapping async calls by default", async () => {
+      let concurrentCalls = 0;
+      let maxConcurrentCalls = 0;
+
+      const callback = vi.fn(async () => {
+        concurrentCalls++;
+        maxConcurrentCalls = Math.max(maxConcurrentCalls, concurrentCalls);
+        // Simulate slow async work
+        await new Promise((resolve) => setTimeout(resolve, 2000));
+        concurrentCalls--;
+      });
+
+      renderHook(() =>
+        useInterval(callback, { delayMs: 500, whenVisible: false }),
+      );
+
+      // First call at 500ms
+      vi.advanceTimersByTime(500);
+      expect(callback).toHaveBeenCalledTimes(1);
+
+      // Second call at 1000ms (while first is still running)
+      vi.advanceTimersByTime(500);
+      expect(callback).toHaveBeenCalledTimes(2);
+
+      // Third call at 1500ms
+      vi.advanceTimersByTime(500);
+      expect(callback).toHaveBeenCalledTimes(3);
+
+      // Multiple concurrent calls should have occurred
+      expect(maxConcurrentCalls).toBeGreaterThan(1);
+    });
+
+    it("should skip calls when skipIfRunning is true", async () => {
+      let concurrentCalls = 0;
+      let maxConcurrentCalls = 0;
+
+      const callback = vi.fn(async () => {
+        concurrentCalls++;
+        maxConcurrentCalls = Math.max(maxConcurrentCalls, concurrentCalls);
+        // Simulate slow async work (3 seconds)
+        await new Promise<void>((resolve) => setTimeout(resolve, 3000));
+        concurrentCalls--;
+      });
+
+      renderHook(() =>
+        useInterval(callback, {
+          delayMs: 500,
+          whenVisible: false,
+          skipIfRunning: true,
+        }),
+      );
+
+      // First call at 500ms
+      await vi.advanceTimersByTimeAsync(500);
+      expect(callback).toHaveBeenCalledTimes(1);
+
+      // Second interval tick at 1000ms - should be skipped since first is still running
+      await vi.advanceTimersByTimeAsync(500);
+      expect(callback).toHaveBeenCalledTimes(1); // Still 1, not 2
+
+      // Third interval tick at 1500ms - should still be skipped
+      await vi.advanceTimersByTimeAsync(500);
+      expect(callback).toHaveBeenCalledTimes(1); // Still 1
+
+      // Only one concurrent call should have occurred
+      expect(maxConcurrentCalls).toBe(1);
+
+      // Advance past the 3 second timeout to complete first callback
+      await vi.advanceTimersByTimeAsync(2000);
+
+      // Next interval tick should now be able to run
+      await vi.advanceTimersByTimeAsync(500);
+      expect(callback).toHaveBeenCalledTimes(2);
+    });
+
+    it("should allow next call after previous async call completes with skipIfRunning true", async () => {
+      const callback = vi.fn(async () => {
+        // Quick async operation
+        await Promise.resolve();
+      });
+
+      renderHook(() =>
+        useInterval(callback, {
+          delayMs: 1000,
+          whenVisible: false,
+          skipIfRunning: true,
+        }),
+      );
+
+      // First call
+      await vi.advanceTimersByTimeAsync(1000);
+      expect(callback).toHaveBeenCalledTimes(1);
+
+      // Second call - should proceed since first completed
+      await vi.advanceTimersByTimeAsync(1000);
+      expect(callback).toHaveBeenCalledTimes(2);
+
+      // Third call
+      await vi.advanceTimersByTimeAsync(1000);
+      expect(callback).toHaveBeenCalledTimes(3);
+    });
+  });
 });

package/src/hooks/useInterval.ts

@@ -1,9 +1,16 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import { useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import { useEventListener } from "./useEventListener";
 
 /**
  * Creates an interval that runs a callback every `delayMs` milliseconds.
+ *
+ * @param callback - The callback to run.
+ * @param opts - The options for the interval.
+ * @param opts.delayMs - The delay in milliseconds between runs.
+ * @param opts.whenVisible - Whether to run the callback when the document is visible.
+ * @param opts.disabled - Whether to disable the interval.
+ * @param opts.skipIfRunning - Whether to skip the callback if it is already running.
  */
 export function useInterval(
   callback: () => void,
@@ -11,16 +18,35 @@ export function useInterval(
     delayMs: number | null;
     whenVisible: boolean;
     disabled?: boolean;
+    skipIfRunning?: boolean;
   },
 ) {
-  const { delayMs, whenVisible, disabled = false } = opts;
-  const savedCallback = useRef<() => void>(undefined);
+  const {
+    delayMs,
+    whenVisible,
+    disabled = false,
+    skipIfRunning = false,
+  } = opts;
+  const savedCallback = useRef<() => void | Promise<void>>(undefined);
+  const isRunning = useRef(false);
 
   // Store the callback
   useEffect(() => {
     savedCallback.current = callback;
   }, [callback]);
 
+  const runCallback = useCallback(async () => {
+    if (isRunning.current && skipIfRunning) {
+      return;
+    }
+    isRunning.current = true;
+    try {
+      await savedCallback.current?.();
+    } finally {
+      isRunning.current = false;
+    }
+  }, [skipIfRunning]);
+
   // Run the interval
   useEffect(() => {
     if (delayMs === null || disabled) {
@@ -32,16 +58,16 @@ export function useInterval(
         return;
       }
 
-      savedCallback.current?.();
+      runCallback();
     }, delayMs);
 
     return () => clearInterval(id);
-  }, [delayMs, whenVisible, disabled]);
+  }, [delayMs, whenVisible, disabled, runCallback]);
 
   // When the document becomes visible, run the callback
   useEventListener(document, "visibilitychange", () => {
     if (document.visibilityState === "visible" && whenVisible && !disabled) {
-      savedCallback.current?.();
+      runCallback();
     }
   });
 

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,

package/src/plugins/impl/chat/ChatPlugin.tsx

@@ -15,7 +15,7 @@ export type PluginFunctions = {
   get_chat_history: (req: {}) => Promise<{ messages: UIMessage[] }>;
   delete_chat_history: (req: {}) => Promise<null>;
   delete_chat_message: (req: { index: number }) => Promise<null>;
-  send_prompt: (req: SendMessageRequest) => Promise<string | null>;
+  send_prompt: (req: SendMessageRequest) => Promise<unknown>;
 };
 
 const messageSchema = z.array(
@@ -47,7 +47,6 @@ export const ChatPlugin = createPlugin<{ messages: UIMessage[] }>(
       maxHeight: z.number().optional(),
       config: configSchema,
       allowAttachments: z.union([z.boolean(), z.string().array()]),
-      frontendManaged: z.boolean(),
     }),
   )
   .withFunctions<PluginFunctions>({
@@ -67,7 +66,7 @@ export const ChatPlugin = createPlugin<{ messages: UIMessage[] }>(
           config: configSchema,
         }),
       )
-      .output(z.union([z.string(), z.null()])),
+      .output(z.unknown()),
   })
   .renderer((props) => (
     <TooltipProvider>
@@ -77,7 +76,6 @@ export const ChatPlugin = createPlugin<{ messages: UIMessage[] }>(
           showConfigurationControls={props.data.showConfigurationControls}
           maxHeight={props.data.maxHeight}
           allowAttachments={props.data.allowAttachments}
-          frontendManaged={props.data.frontendManaged}
           config={props.data.config}
           get_chat_history={props.functions.get_chat_history}
           delete_chat_history={props.functions.delete_chat_history}