@marimo-team/frontend 0.23.16-dev5 → 0.23.16-dev51

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/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>

package/src/components/editor/connections/__tests__/json-credentials.test.ts

@@ -0,0 +1,114 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { describe, expect, test } from "vitest";
+import {
+  escapePythonString,
+  flattenSecretValue,
+  looksLikeJson,
+  resolveJsonCredential,
+} from "../json-credentials";
+import { prefixPath } from "../paths";
+import { prefixSecret } from "../secrets";
+
+describe("resolveJsonCredential", () => {
+  test("resolves a file path", () => {
+    expect(
+      resolveJsonCredential(prefixPath("/etc/secrets/key.json"), (v) => v),
+    ).toEqual({ kind: "path", path: "/etc/secrets/key.json" });
+  });
+
+  test("resolves a secret via printSecret", () => {
+    expect(
+      resolveJsonCredential(prefixSecret("MY_CREDS"), () => "_my_creds"),
+    ).toEqual({ kind: "json", expr: "json.loads(_my_creds)" });
+  });
+
+  test("resolves a raw JSON literal", () => {
+    expect(
+      resolveJsonCredential('{"type":"service_account"}', (v) => v),
+    ).toEqual({
+      kind: "json",
+      expr: 'json.loads(r"""{"type":"service_account"}""")',
+    });
+  });
+
+  test("uses a raw string so escaped newlines in a private_key survive", () => {
+    const credentialsJson =
+      '{"private_key":"-----BEGIN PRIVATE KEY-----\\nabc123\\n-----END PRIVATE KEY-----\\n"}';
+    const credential = resolveJsonCredential(credentialsJson, (v) => v);
+    expect(credential).toEqual({
+      kind: "json",
+      expr: `json.loads(r"""${credentialsJson}""")`,
+    });
+  });
+
+  test("prefers path over secret-looking values", () => {
+    // A path-prefixed value wins even if the path text starts with "env:".
+    expect(
+      resolveJsonCredential(prefixPath("env:not-a-secret"), (v) => v),
+    ).toEqual({ kind: "path", path: "env:not-a-secret" });
+  });
+});
+
+describe("looksLikeJson", () => {
+  test("detects objects and arrays, including partial paste", () => {
+    expect(looksLikeJson('{"type":"service_account"}')).toBe(true);
+    expect(looksLikeJson("  {")).toBe(true);
+    expect(looksLikeJson("[1, 2]")).toBe(true);
+    expect(looksLikeJson("/etc/secrets/key.json")).toBe(false);
+    expect(looksLikeJson("MY_SECRET")).toBe(false);
+    expect(looksLikeJson("")).toBe(false);
+  });
+
+  test("drives the path vs. create-secret combobox actions exclusively", () => {
+    // These mirror how SECRET_TEXTAREA_RENDERER wires allowCustomValue /
+    // allowCreateSecret, so a path and a JSON paste never both offer (or
+    // both hide) the wrong action.
+    const allowCustomValue = (search: string) => !looksLikeJson(search);
+    const allowCreateSecret = (search: string) =>
+      !search || looksLikeJson(search);
+
+    expect(allowCustomValue("/etc/secrets/key.json")).toBe(true);
+    expect(allowCreateSecret("/etc/secrets/key.json")).toBe(false);
+
+    expect(allowCustomValue('{"type":"service_account"}')).toBe(false);
+    expect(allowCreateSecret('{"type":"service_account"}')).toBe(true);
+
+    expect(allowCreateSecret("")).toBe(true);
+  });
+});
+
+describe("flattenSecretValue", () => {
+  test("minifies valid JSON", () => {
+    expect(
+      flattenSecretValue(`{
+  "type": "service_account",
+  "project_id": "test"
+}`),
+    ).toBe('{"type":"service_account","project_id":"test"}');
+  });
+
+  test("strips newlines from non-JSON", () => {
+    expect(flattenSecretValue("line1\nline2\r\nline3")).toBe("line1line2line3");
+  });
+
+  test("returns empty for blank input", () => {
+    expect(flattenSecretValue("")).toBe("");
+    expect(flattenSecretValue("   \n  ")).toBe("");
+  });
+});
+
+describe("escapePythonString", () => {
+  test("escapes backslashes and quotes", () => {
+    expect(escapePythonString('C:\\tmp\\"creds".json')).toBe(
+      'C:\\\\tmp\\\\\\"creds\\".json',
+    );
+    expect(escapePythonString("/etc/secrets/key.json")).toBe(
+      "/etc/secrets/key.json",
+    );
+  });
+
+  test("escapes control characters", () => {
+    expect(escapePythonString("line1\nline2")).toBe("line1\\nline2");
+    expect(escapePythonString("a\tb\rc")).toBe("a\\tb\\rc");
+  });
+});

package/src/components/editor/connections/__tests__/paths.test.ts

@@ -0,0 +1,39 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { describe, expect, test } from "vitest";
+import {
+  isPath,
+  prefixPath,
+  type PathPlaceholder,
+  unprefixPath,
+} from "../paths";
+
+describe("paths", () => {
+  test("isPath", () => {
+    expect(isPath("path:/etc/secrets/key.json")).toBe(true);
+    expect(isPath("path:")).toBe(true);
+    expect(isPath("/etc/secrets/key.json")).toBe(false);
+    expect(isPath("env:MY_SECRET")).toBe(false);
+    expect(isPath("")).toBe(false);
+    expect(isPath(null)).toBe(false);
+    expect(isPath(undefined)).toBe(false);
+    expect(isPath(123)).toBe(false);
+  });
+
+  test("prefixPath", () => {
+    expect(prefixPath("/etc/secrets/key.json")).toBe(
+      "path:/etc/secrets/key.json",
+    );
+    expect(prefixPath("")).toBe("path:");
+  });
+
+  test("unprefixPath", () => {
+    expect(unprefixPath("path:/etc/secrets/key.json" as PathPlaceholder)).toBe(
+      "/etc/secrets/key.json",
+    );
+    expect(unprefixPath("path:" as PathPlaceholder)).toBe("");
+    // Only strips the leading prefix — path may itself contain "path:".
+    expect(unprefixPath("path:/tmp/path:weird.json" as PathPlaceholder)).toBe(
+      "/tmp/path:weird.json",
+    );
+  });
+});

package/src/components/editor/connections/components.tsx

@@ -21,9 +21,13 @@ import { maybeAddMarimoImport } from "@/core/cells/add-missing-import";
 import { useCellActions } from "@/core/cells/cells";
 import { useLastFocusedCellId } from "@/core/cells/focus";
 import { autoInstantiateAtom } from "@/core/config/config";
-import { ENV_RENDERER, SecretsProvider } from "./form-renderers";
+import {
+  ENV_RENDERER,
+  SECRET_TEXTAREA_RENDERER,
+  SecretsProvider,
+} from "./form-renderers";
 
-const RENDERERS: FormRenderer[] = [ENV_RENDERER];
+const RENDERERS: FormRenderer[] = [ENV_RENDERER, SECRET_TEXTAREA_RENDERER];
 
 /**
  * Grid layout for provider/database selector buttons.