@marimo-team/frontend 0.23.16-dev8 → 0.23.16

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/__tests__/state.test.ts

@@ -1,9 +1,15 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi } from "vitest";
 import { adaptForLocalStorage } from "@/utils/storage/jotai";
 import type { PanelLayout } from "../state";
 import { exportedForTesting } from "../state";
 
+// Panel visibility (and thus the default layout) depends on feature flags,
+// some of which default on in dev builds; pin them off for stable layouts.
+vi.mock("@/core/config/feature-flag", () => ({
+  getFeatureFlag: () => false,
+}));
+
 const { mergePanelLayout } = exportedForTesting;
 
 describe("mergePanelLayout", () => {

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/__tests__/panel-accordion-state.test.ts

@@ -0,0 +1,42 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { afterAll, expect, it } from "vitest";
+import { store } from "@/core/state/jotai";
+import { availableStorage } from "@/utils/storage/storage";
+
+const SESSION_PANEL_KEY = "marimo:session-panel:state";
+const FILE_EXPLORER_PANEL_KEY = "marimo:file-explorer-panel:state";
+
+afterAll(() => {
+  availableStorage.removeItem(SESSION_PANEL_KEY);
+  availableStorage.removeItem(FILE_EXPLORER_PANEL_KEY);
+});
+
+it("preserves stored panel state when expanding an unmounted panel", async () => {
+  const persistedState = {
+    openSections: [],
+    hasUserInteracted: true,
+  };
+  availableStorage.setItem(SESSION_PANEL_KEY, JSON.stringify(persistedState));
+  availableStorage.setItem(
+    FILE_EXPLORER_PANEL_KEY,
+    JSON.stringify(persistedState),
+  );
+
+  // Import after seeding storage to exercise atom initialization before a
+  // lazily mounted panel subscribes to it.
+  const { expandAccordionSection, fileExplorerPanelAtom, sessionPanelAtom } =
+    await import("../panel-accordion-state");
+
+  expandAccordionSection(sessionPanelAtom, "datasources");
+  expandAccordionSection(fileExplorerPanelAtom, "remote-storage");
+
+  expect(store.get(sessionPanelAtom)).toEqual({
+    openSections: ["datasources"],
+    hasUserInteracted: true,
+  });
+  expect(store.get(fileExplorerPanelAtom)).toEqual({
+    openSections: ["remote-storage"],
+    hasUserInteracted: true,
+  });
+});

package/src/components/editor/chrome/panels/file-explorer-panel.tsx

@@ -1,7 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { useAtom, useAtomValue } from "jotai";
-import { atomWithStorage } from "jotai/utils";
 import { FileIcon, HardDrive } from "lucide-react";
 import React, { useCallback, useMemo } from "react";
 import useResizeObserver from "use-resize-observer";
@@ -9,7 +8,6 @@ import { StorageInspector } from "@/components/storage/storage-inspector";
 import { Accordion } from "@/components/ui/accordion";
 import { storageNamespacesAtom } from "@/core/storage/state";
 import { cn } from "@/utils/cn";
-import { jotaiJsonStorage } from "@/utils/storage/jotai";
 import { TreeDndProvider } from "../../file-tree/dnd-wrapper";
 import { FileExplorer } from "../../file-tree/file-explorer";
 import { useFileExplorerUpload } from "../../file-tree/upload";
@@ -19,19 +17,10 @@ import {
   PanelAccordionTrigger,
   PanelBadge,
 } from "./components";
-
-type OpenSections = "files" | "remote-storage";
-
-interface FileExplorerPanelState {
-  openSections: OpenSections[];
-  hasUserInteracted: boolean;
-}
-
-const fileExplorerPanelAtom = atomWithStorage<FileExplorerPanelState>(
-  "marimo:file-explorer-panel:state",
-  { openSections: ["files"], hasUserInteracted: false },
-  jotaiJsonStorage,
-);
+import {
+  fileExplorerPanelAtom,
+  type FileExplorerPanelSection,
+} from "./panel-accordion-state";
 
 const FileExplorerComponent: React.FC<{ height: number }> = ({ height }) => {
   const { getRootProps, getInputProps, isDragActive } = useFileExplorerUpload({
@@ -70,7 +59,7 @@ const FileExplorerPanel: React.FC = () => {
   const storageNamespaces = useAtomValue(storageNamespacesAtom);
   const remoteStorageConnections = storageNamespaces.length;
 
-  const openSections = useMemo<OpenSections[]>(() => {
+  const openSections = useMemo<FileExplorerPanelSection[]>(() => {
     if (!state.hasUserInteracted && remoteStorageConnections > 0) {
       if (state.openSections.includes("remote-storage")) {
         return state.openSections;
@@ -81,7 +70,7 @@ const FileExplorerPanel: React.FC = () => {
   }, [state.hasUserInteracted, state.openSections, remoteStorageConnections]);
 
   const handleValueChange = useCallback(
-    (value: OpenSections[]) => {
+    (value: FileExplorerPanelSection[]) => {
       setState({
         openSections: value,
         hasUserInteracted: true,

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/components/editor/chrome/panels/panel-accordion-state.ts

@@ -0,0 +1,51 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { WritableAtom } from "jotai";
+import { atomWithStorage } from "jotai/utils";
+import { store } from "@/core/state/jotai";
+import { jotaiJsonStorage } from "@/utils/storage/jotai";
+
+export type SessionPanelSection = "variables" | "datasources";
+export type FileExplorerPanelSection = "files" | "remote-storage";
+
+export interface PanelAccordionState<Section extends string> {
+  openSections: Section[];
+  hasUserInteracted: boolean;
+}
+
+export const sessionPanelAtom = atomWithStorage<
+  PanelAccordionState<SessionPanelSection>
+>(
+  "marimo:session-panel:state",
+  { openSections: ["variables"], hasUserInteracted: false },
+  jotaiJsonStorage,
+  { getOnInit: true },
+);
+
+export const fileExplorerPanelAtom = atomWithStorage<
+  PanelAccordionState<FileExplorerPanelSection>
+>(
+  "marimo:file-explorer-panel:state",
+  { openSections: ["files"], hasUserInteracted: false },
+  jotaiJsonStorage,
+  { getOnInit: true },
+);
+
+/**
+ * Expand an accordion section without collapsing others. Leaves
+ * `hasUserInteracted` untouched so auto-open heuristics are unaffected.
+ */
+export function expandAccordionSection<Section extends string>(
+  panelAtom: WritableAtom<
+    PanelAccordionState<Section>,
+    [(prev: PanelAccordionState<Section>) => PanelAccordionState<Section>],
+    void
+  >,
+  section: Section,
+): void {
+  store.set(panelAtom, (prev) =>
+    prev.openSections.includes(section)
+      ? prev
+      : { ...prev, openSections: [...prev.openSections, section] },
+  );
+}

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

@@ -1,7 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { useAtom, useAtomValue } from "jotai";
-import { atomWithStorage } from "jotai/utils";
 import { DatabaseIcon, VariableIcon } from "lucide-react";
 import React, { useCallback } from "react";
 import {
@@ -13,26 +12,16 @@ import { VariableTable } from "@/components/variables/variables-table";
 import { useCellIds } from "@/core/cells/cells";
 import { datasetTablesAtom } from "@/core/datasets/state";
 import { useVariables } from "@/core/variables/state";
-import { jotaiJsonStorage } from "@/utils/storage/jotai";
 import {
   PanelAccordionContent,
   PanelAccordionItem,
   PanelAccordionTrigger,
   PanelBadge,
 } from "./components";
-
-type OpenSections = "variables" | "datasources";
-
-interface SessionPanelState {
-  openSections: OpenSections[];
-  hasUserInteracted: boolean;
-}
-
-const sessionPanelAtom = atomWithStorage<SessionPanelState>(
-  "marimo:session-panel:state",
-  { openSections: ["variables"], hasUserInteracted: false },
-  jotaiJsonStorage,
-);
+import {
+  sessionPanelAtom,
+  type SessionPanelSection,
+} from "./panel-accordion-state";
 
 const SessionPanel: React.FC = () => {
   const variables = useVariables();
@@ -50,7 +39,7 @@ const SessionPanel: React.FC = () => {
       : state.openSections;
 
   const handleValueChange = useCallback(
-    (value: OpenSections[]) => {
+    (value: SessionPanelSection[]) => {
       setState({
         openSections: value,
         hasUserInteracted: true,

package/src/components/editor/chrome/panels/write-secret-modal.tsx

@@ -19,9 +19,11 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
 import { toast } from "@/components/ui/use-toast";
 import { useRequestClient } from "@/core/network/requests";
 import type { ListSecretKeysResponse } from "@/core/network/types";
+import { flattenSecretValue } from "../../connections/json-credentials";
 
 // dotenv providers should be at the top
 export function sortProviders(providers: ListSecretKeysResponse["keys"]) {
@@ -44,10 +46,21 @@ export const WriteSecretModal: React.FC<{
   onClose: () => void;
   onSuccess: (secretName: string) => void;
   initialValue?: string;
-}> = ({ providerNames, onClose, onSuccess, initialValue }) => {
+  multiline?: boolean;
+}> = ({
+  providerNames,
+  onClose,
+  onSuccess,
+  initialValue = "",
+  multiline = false,
+}) => {
   const { writeSecret } = useRequestClient();
   const [key, setKey] = React.useState("");
-  const [value, setValue] = React.useState(initialValue || "");
+  // Multiline values are flattened so they fit on a single dotenv line;
+  // the textarea still wraps visually for readability.
+  const [value, setValue] = React.useState(() =>
+    multiline ? flattenSecretValue(initialValue) : initialValue,
+  );
   const [location, setLocation] = React.useState<string | undefined>(
     providerNames[0],
   );
@@ -65,7 +78,9 @@ export const WriteSecretModal: React.FC<{
       return;
     }
 
-    if (!key || !value || !location) {
+    const secretValue = multiline ? flattenSecretValue(value) : value;
+
+    if (!key || !secretValue || !location) {
       toast({
         title: "Error",
         description: "Please fill in all fields.",
@@ -77,7 +92,7 @@ export const WriteSecretModal: React.FC<{
     try {
       await writeSecret({
         key,
-        value,
+        value: secretValue,
         provider,
         name: location,
       });
@@ -120,14 +135,27 @@ export const WriteSecretModal: React.FC<{
           </div>
           <div className="grid gap-2">
             <Label htmlFor="value">Value</Label>
-            <Input
-              id="value"
-              type="password"
-              value={value}
-              onChange={(e) => setValue(e.target.value)}
-              required={true}
-              autoComplete="off"
-            />
+            {multiline ? (
+              <Textarea
+                id="value"
+                value={value}
+                onChange={(e) => setValue(flattenSecretValue(e.target.value))}
+                required={true}
+                className="my-0 font-code text-xs break-all"
+                rows={8}
+                autoFocus={true}
+                autoComplete="off"
+              />
+            ) : (
+              <Input
+                id="value"
+                type="password"
+                value={value}
+                onChange={(e) => setValue(e.target.value)}
+                required={true}
+                autoComplete="off"
+              />
+            )}
             {/* http is prone to man-in-the-middle */}
             {isHttpUrl() && (
               <FormDescription>