@marimo-team/frontend 0.23.16-dev35 → 0.23.16-dev37

package/src/components/editor/cell/code/__tests__/cell-editor-activity-lifecycle.test.ts

@@ -0,0 +1,250 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+/**
+ * Simulates React Activity's effect teardown when mode switches to "hidden":
+ * all useEffect cleanups run. On "visible", setups re-run (cleanups do not run
+ * again). Component state and DOM are preserved — only effects cycle.
+ *
+ * Registration order matches cell-editor.tsx: mount effect runs before destroy
+ * effect setup. With async editor creation (editorMountScheduler), destroy
+ * captures null initially; with sync creation it captures the live editor.
+ */
+import { EditorState } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+import { describe, expect, it } from "vitest";
+import { Functions } from "@/utils/functions";
+
+interface EffectRegistration {
+  cleanup: () => void;
+}
+
+function createActivitySimulator() {
+  const effects: EffectRegistration[] = [];
+
+  return {
+    /** Register effects in order — each setup runs synchronously, like React. */
+    useEffect(setup: () => (() => void) | undefined) {
+      const cleanup = setup() ?? Functions.NOOP;
+      effects.push({ cleanup });
+    },
+    hide() {
+      for (const effect of effects) {
+        effect.cleanup();
+      }
+    },
+    show() {
+      effects.length = 0;
+    },
+  };
+}
+
+function createEditor(doc = "hello") {
+  return new EditorView({
+    state: EditorState.create({ doc }),
+  });
+}
+
+interface RegisterCellEditorEffectsOptions {
+  activity: ReturnType<typeof createActivitySimulator>;
+  editorViewRef: { current: EditorView | null };
+  destroyPattern: "old" | "pr";
+  onDestroy?: () => void;
+  /** When true, editor creation is deferred like editorMountScheduler.request */
+  asyncMount?: boolean;
+}
+
+function registerCellEditorEffects({
+  activity,
+  editorViewRef,
+  destroyPattern,
+  onDestroy,
+  asyncMount = false,
+}: RegisterCellEditorEffectsOptions) {
+  activity.useEffect(() => {
+    if (editorViewRef.current !== null) {
+      return;
+    }
+    let cancelled = false;
+    const mount = () => {
+      if (!cancelled && editorViewRef.current === null) {
+        editorViewRef.current = createEditor();
+      }
+    };
+    if (asyncMount) {
+      const id = setTimeout(mount, 0);
+      return () => {
+        cancelled = true;
+        clearTimeout(id);
+      };
+    }
+    mount();
+    return () => {
+      cancelled = true;
+    };
+  });
+
+  if (destroyPattern === "old") {
+    activity.useEffect(() => {
+      const ev = editorViewRef.current;
+      return () => {
+        if (ev) {
+          ev.destroy();
+          onDestroy?.();
+        }
+      };
+    });
+  } else {
+    activity.useEffect(() => {
+      return () => {
+        if (editorViewRef.current) {
+          editorViewRef.current.destroy();
+          onDestroy?.();
+        }
+        editorViewRef.current = null;
+      };
+    });
+  }
+}
+
+describe("CellEditor Activity lifecycle (simulated)", () => {
+  it("old destroy pattern (sync mount): first hide/show leaves stale ref", () => {
+    const editorViewRef = { current: null as EditorView | null };
+    let destroyCount = 0;
+    const activity = createActivitySimulator();
+
+    registerCellEditorEffects({
+      activity,
+      editorViewRef,
+      destroyPattern: "old",
+      onDestroy: () => {
+        destroyCount++;
+      },
+    });
+    const liveEditor = editorViewRef.current;
+    expect(liveEditor).not.toBeNull();
+
+    activity.hide();
+    expect(destroyCount).toBeGreaterThan(0);
+    expect(editorViewRef.current).toBe(liveEditor);
+
+    activity.show();
+    registerCellEditorEffects({
+      activity,
+      editorViewRef,
+      destroyPattern: "old",
+    });
+    expect(editorViewRef.current).toBe(liveEditor);
+  });
+
+  it("old destroy pattern (async mount): first hide/show preserves editor", async () => {
+    const editorViewRef = { current: null as EditorView | null };
+    let destroyCount = 0;
+    const activity = createActivitySimulator();
+
+    registerCellEditorEffects({
+      activity,
+      editorViewRef,
+      destroyPattern: "old",
+      onDestroy: () => {
+        destroyCount++;
+      },
+      asyncMount: true,
+    });
+    await new Promise((r) => setTimeout(r, 0));
+    const liveEditor = editorViewRef.current;
+    expect(liveEditor).not.toBeNull();
+
+    // Destroy effect captured null at setup (editor created async after effects)
+    activity.hide();
+    expect(destroyCount).toBe(0);
+    expect(editorViewRef.current).toBe(liveEditor);
+
+    activity.show();
+    registerCellEditorEffects({
+      activity,
+      editorViewRef,
+      destroyPattern: "old",
+      asyncMount: true,
+    });
+    await new Promise((r) => setTimeout(r, 0));
+    expect(editorViewRef.current).toBe(liveEditor);
+  });
+
+  it("PR destroy pattern (async mount): recreates on first hide/show", async () => {
+    const editorViewRef = { current: null as EditorView | null };
+    const activity = createActivitySimulator();
+
+    registerCellEditorEffects({
+      activity,
+      editorViewRef,
+      destroyPattern: "pr",
+      asyncMount: true,
+    });
+    await new Promise((r) => setTimeout(r, 0));
+    const firstEditor = editorViewRef.current;
+
+    activity.hide();
+    expect(editorViewRef.current).toBeNull();
+
+    activity.show();
+    registerCellEditorEffects({
+      activity,
+      editorViewRef,
+      destroyPattern: "pr",
+      asyncMount: true,
+    });
+    await new Promise((r) => setTimeout(r, 0));
+    expect(editorViewRef.current).not.toBeNull();
+    expect(editorViewRef.current).not.toBe(firstEditor);
+  });
+
+  it("PR destroy pattern: nulls ref on hide so mount recreates on show", () => {
+    const editorViewRef = { current: null as EditorView | null };
+    const activity = createActivitySimulator();
+
+    registerCellEditorEffects({
+      activity,
+      editorViewRef,
+      destroyPattern: "pr",
+    });
+    const firstEditor = editorViewRef.current;
+
+    activity.hide();
+    expect(editorViewRef.current).toBeNull();
+
+    activity.show();
+    registerCellEditorEffects({
+      activity,
+      editorViewRef,
+      destroyPattern: "pr",
+    });
+    expect(editorViewRef.current).not.toBeNull();
+    expect(editorViewRef.current).not.toBe(firstEditor);
+  });
+
+  it("PR destroy pattern: stable across repeated hide/show cycles", () => {
+    const editorViewRef = { current: null as EditorView | null };
+    const activity = createActivitySimulator();
+
+    for (let i = 0; i < 3; i++) {
+      registerCellEditorEffects({
+        activity,
+        editorViewRef,
+        destroyPattern: "pr",
+      });
+      expect(editorViewRef.current).not.toBeNull();
+
+      activity.hide();
+      expect(editorViewRef.current).toBeNull();
+
+      activity.show();
+    }
+
+    registerCellEditorEffects({
+      activity,
+      editorViewRef,
+      destroyPattern: "pr",
+    });
+    expect(editorViewRef.current).not.toBeNull();
+  });
+});

package/src/components/editor/cell/code/cell-editor.tsx

@@ -39,7 +39,7 @@ import type { UserConfig } from "@/core/config/config-schema";
 import { OverridingHotkeyProvider } from "@/core/hotkeys/hotkeys";
 import { connectionAtom } from "@/core/network/connection";
 import { useRequestClient } from "@/core/network/requests";
-import { isRtcEnabled } from "@/core/rtc/state";
+import { canUseRtc, isRtcEnabled } from "@/core/rtc/state";
 import { useSaveNotebook } from "@/core/saving/save-component";
 import { isAppConnecting } from "@/core/websocket/connection-utils";
 import type { Theme } from "@/theme/useTheme";
@@ -342,7 +342,7 @@ const CellEditorInternal = ({
     saveOrNameNotebook,
   ]);
 
-  const rtcEnabled = isRtcEnabled();
+  const rtcEnabled = isRtcEnabled() && canUseRtc(cellId);
   const handleInitializeEditor = useEvent(() => {
     // If rtc is enabled, use collaborative editing
     if (rtcEnabled) {
@@ -451,6 +451,7 @@ const CellEditorInternal = ({
       setIsEditorMounted(true);
       return;
     }
+    setIsEditorMounted(false);
     if (serializedEditorState !== null) {
       handleDeserializeEditor();
       setIsEditorMounted(true);
@@ -479,11 +480,12 @@ const CellEditorInternal = ({
     handleReconfigureEditor();
   }, [handleReconfigureEditor, extensions, editorViewRef]);
 
-  // Destroy the editor when the component is unmounted
+  // Destroy the editor when the component is unmounted. Read the ref in cleanup
+  // (not setup) so Activity hide/show cycles don't leave a stale destroyed view.
   useEffect(() => {
-    const ev = editorViewRef.current;
     return () => {
-      ev?.destroy();
+      editorViewRef.current?.destroy();
+      editorViewRef.current = null;
     };
   }, [editorViewRef]);
 
@@ -635,14 +637,18 @@ CellCodeMirrorEditor.displayName = "CellCodeMirrorEditor";
 // Wait until the websocket connection is open before rendering the editor
 // This is used for real-time collaboration since the backend needs the connection started
 // before connecting the rtc websockets
-function WithWaitUntilConnected<T extends {}>(
+function WithWaitUntilConnected<T extends Pick<CellEditorProps, "id">>(
   Component: React.ComponentType<T>,
 ) {
   const WaitUntilConnectedComponent = (props: T) => {
     const connection = useAtomValue(connectionAtom);
     const [rtcDoc, setRtcDoc] = useAtom(connectedDocAtom);
 
-    if (isAppConnecting(connection.state) || rtcDoc === undefined) {
+    if (
+      isRtcEnabled() &&
+      canUseRtc(props.id) &&
+      (isAppConnecting(connection.state) || rtcDoc === undefined)
+    ) {
       return (
         <div className="flex h-full w-full items-baseline p-4">
           <DelayMount milliseconds={1000} fallback={null}>

package/src/components/editor/chrome/panels/__tests__/logs-panel.test.tsx

@@ -0,0 +1,25 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import type { CellLog } from "@/core/cells/logs";
+import { LogViewer } from "../logs-panel";
+
+describe("LogViewer", () => {
+  it("labels logs that came from a language server instead of a cell", () => {
+    const logs: CellLog[] = [
+      {
+        timestamp: 0,
+        level: "stderr",
+        message: "pylsp failed to start",
+        source: { type: "lsp", name: "pylsp" },
+      },
+    ];
+
+    render(<LogViewer logs={logs} />);
+
+    expect(screen.getByText("(lsp:pylsp)")).toBeInTheDocument();
+    expect(screen.getByText("pylsp failed to start")).toBeInTheDocument();
+    expect(screen.getByText("STDERR")).toBeInTheDocument();
+  });
+});

package/src/components/editor/chrome/panels/logs-panel.tsx

@@ -4,7 +4,11 @@ import { FileTextIcon } from "lucide-react";
 import React from "react";
 import { ClearButton } from "@/components/buttons/clear-button";
 import { useCellActions, useCellLogs } from "@/core/cells/cells";
-import { type CellLog, formatLogTimestamp } from "@/core/cells/logs";
+import {
+  type CellLog,
+  formatLogTimestamp,
+  logSourceLabel,
+} from "@/core/cells/logs";
 import { cn } from "@/utils/cn";
 import { CellLink } from "../../links/cell-link";
 import { PanelEmptyState } from "./empty-state";
@@ -84,7 +88,13 @@ function formatLog(log: CellLog) {
       </span>
       <span className={cn("shrink-0", color)}>{level}</span>
       <span className="shrink-0 text-(--gray-10)">
-        (<CellLink cellId={log.cellId} />)
+        (
+        {log.source.type === "cell" ? (
+          <CellLink cellId={log.source.cellId} />
+        ) : (
+          logSourceLabel(log.source)
+        )}
+        )
       </span>
       {log.message}
     </>

package/src/core/cells/__tests__/cells.test.ts

@@ -1870,8 +1870,18 @@ describe("cell reducer", () => {
 
   it("can clear logs", () => {
     state.cellLogs = [
-      { level: "stderr", message: "log1", timestamp: 0, cellId: firstCellId },
-      { level: "stderr", message: "log1", timestamp: 0, cellId: firstCellId },
+      {
+        level: "stderr",
+        message: "log1",
+        timestamp: 0,
+        source: { type: "cell", cellId: firstCellId },
+      },
+      {
+        level: "stderr",
+        message: "log1",
+        timestamp: 0,
+        source: { type: "cell", cellId: firstCellId },
+      },
     ];
     actions.clearLogs();
     expect(state.cellLogs).toEqual([]);

package/src/core/cells/__tests__/logs.test.ts

@@ -46,7 +46,7 @@ describe("getCellLogsForMessage", () => {
       timestamp: 1_234_567_890,
       level: "stdout",
       message: "Hello, World!",
-      cellId: "cell-1",
+      source: { type: "cell", cellId: "cell-1" },
     });
   });
 
@@ -74,7 +74,7 @@ describe("getCellLogsForMessage", () => {
       timestamp: 1_234_567_890,
       level: "stderr",
       message: "Error occurred",
-      cellId: "cell-2",
+      source: { type: "cell", cellId: "cell-2" },
     });
   });
 
@@ -102,7 +102,7 @@ describe("getCellLogsForMessage", () => {
       timestamp: 1_234_567_890,
       level: "stdout",
       message: "Error: Something went wrong",
-      cellId: "cell-3",
+      source: { type: "cell", cellId: "cell-3" },
     });
   });
 
@@ -130,7 +130,7 @@ describe("getCellLogsForMessage", () => {
       timestamp: 1_234_567_890,
       level: "stderr",
       message: "Critical Error: System failure",
-      cellId: "cell-4",
+      source: { type: "cell", cellId: "cell-4" },
     });
   });
 
@@ -157,7 +157,7 @@ describe("getCellLogsForMessage", () => {
     expect(logs[0].level).toBe("stderr"); // marimo-error should be treated as stderr
     expect(logs[0].message).toContain("Traceback (most recent call last):");
     expect(logs[0].message).toContain('File "test.py", line 1');
-    expect(logs[0].cellId).toBe("cell-5");
+    expect(logs[0].source).toEqual({ type: "cell", cellId: "cell-5" });
   });
 
   test("handles multiple console outputs with different MIME types", () => {

package/src/core/cells/cells.ts

@@ -28,7 +28,7 @@ import { findCollapseRange, mergeOutlines } from "../dom/outline";
 import type { CellMessage } from "../kernel/messages";
 import { isErrorMime } from "../mime";
 import type { CellConfig } from "../network/types";
-import { isRtcEnabled } from "../rtc/state";
+import { canUseRtc, isRtcEnabled } from "../rtc/state";
 import { createDeepEqualAtom, store } from "../state/jotai";
 import { isWasm } from "../wasm/utils";
 import { prepareCellForExecution, transitionCell } from "./cell";
@@ -927,6 +927,12 @@ const {
       cellLogs: [...nextState.cellLogs, ...getCellLogsForMessage(message)],
     };
   },
+  addLogs: (state, action: { logs: CellLog[] }) => {
+    return {
+      ...state,
+      cellLogs: [...state.cellLogs, ...action.logs],
+    };
+  },
   setCellIds: (state, action: { cellIds: CellId[] }) => {
     const isTheSame = isEqual(state.cellIds.inOrderIds, action.cellIds);
     if (isTheSame) {
@@ -1037,9 +1043,9 @@ const {
         };
       }
 
-      // Update codemirror if mounted
-      // If RTC is enabled, the editor view will already be updated, so we don't need to do this
-      if (!isRtcEnabled()) {
+      // Update codemirror if mounted. RTC-backed cells sync via Loro; others
+      // (e.g. scratchpad) still need an explicit editor update.
+      if (!isRtcEnabled() || !canUseRtc(cellId)) {
         const cellHandle = nextState.cellHandles[cellId].current;
         if (cellHandle?.editorViewOrNull) {
           updateEditorCodeFromPython(cellHandle.editorViewOrNull, code);
@@ -1698,6 +1704,13 @@ export {
   notebookAtom,
 };
 
+/** Actions for dispatching outside of React. */
+const imperativeActions = createActions((action) => {
+  store.set(notebookAtom, (state) => reducer(state, action));
+});
+
+export const addLogs = imperativeActions.addLogs;
+
 /// ATOMS
 
 export const cellIdsAtom = atom((get) => get(notebookAtom).cellIds);

package/src/core/cells/document-changes.ts

@@ -369,6 +369,7 @@ export function toDocumentChanges(
     case "clearCellConsoleOutput":
     case "clearAllCellOutputs":
     case "clearLogs":
+    case "addLogs":
       return [];
 
     // Editor UI state — no document changes.

package/src/core/cells/logs.ts

@@ -13,11 +13,21 @@ import { tracebackModalAtom } from "../errors/traceback-atom";
 import React from "react";
 import { ToastAction } from "@/components/ui/toast";
 
+/** Logs come from a cell, or from a language server, which has no cell. */
+export type LogSource =
+  | { type: "cell"; cellId: CellId }
+  | { type: "lsp"; name: string };
+
 export interface CellLog {
+  /** Unix timestamp, in seconds. */
   timestamp: number;
   level: "stdout" | "stderr";
   message: string;
-  cellId: CellId;
+  source: LogSource;
+}
+
+export function logSourceLabel(source: LogSource): string {
+  return source.type === "cell" ? source.cellId : `lsp:${source.name}`;
 }
 
 let didAlreadyToastError = false;
@@ -48,7 +58,7 @@ export function getCellLogsForMessage(cell: CellMessage): CellLog[] {
             timestamp: output.timestamp || Date.now(),
             level: isError ? "stderr" : "stdout",
             message: message,
-            cellId: cell.cell_id,
+            source: { type: "cell", cellId: cell.cell_id },
           });
           break;
         }
@@ -71,7 +81,7 @@ export function getCellLogsForMessage(cell: CellMessage): CellLog[] {
     cell.output.data.forEach((error) => {
       CellLogLogger.log({
         level: "stderr",
-        cellId: cell.cell_id,
+        source: { type: "cell", cellId: cell.cell_id },
         timestamp: cell.timestamp ?? 0,
         message: JSON.stringify(error),
       });
@@ -150,7 +160,7 @@ const CellLogLogger = {
       `%c[${status}]`,
       `color:${color}; padding:2px 0; border-radius:2px; font-weight:bold`,
       `[${formatLogTimestamp(payload.timestamp)}]`,
-      `(${payload.cellId}) ${payload.message}`,
+      `(${logSourceLabel(payload.source)}) ${payload.message}`,
     );
   },
 };