@marimo-team/frontend 0.23.16-dev4 → 0.23.16-dev40

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/connections/storage/__tests__/__snapshots__/as-code.test.ts.snap

@@ -51,6 +51,21 @@ store = S3Store("operator-bucket",
 )"
 `;
 
+exports[`generateStorageCode > CoreWeave > with container credentials 1`] = `
+"from obstore.store import S3Store
+import os
+
+_container_credentials_full_uri = os.environ.get("AWS_CONTAINER_CREDENTIALS_FULL_URI")
+_container_authorization_token_file = os.environ.get("AWS_CONTAINER_AUTHORIZATION_TOKEN_FILE")
+store = S3Store("operator-bucket",
+    region="US-EAST-04A",
+    container_credentials_full_uri=_container_credentials_full_uri,
+    container_authorization_token_file=_container_authorization_token_file,
+    endpoint="https://operator-bucket.cwobject.com",
+    virtual_hosted_style_request=True,
+)"
+`;
+
 exports[`generateStorageCode > CoreWeave > with secrets 1`] = `
 "from obstore.store import S3Store
 import os
@@ -119,6 +134,29 @@ exports[`generateStorageCode > S3 > minimal connection (bucket only) 1`] = `
 store = S3Store("my-bucket",)"
 `;
 
+exports[`generateStorageCode > S3 > with container credentials 1`] = `
+"from obstore.store import S3Store
+
+store = S3Store("my-bucket",
+    region="us-east-1",
+    container_credentials_full_uri="http://169.254.170.23/v1/credentials",
+    container_authorization_token_file="/var/run/secrets/token",
+)"
+`;
+
+exports[`generateStorageCode > S3 > with container credentials from secrets 1`] = `
+"from obstore.store import S3Store
+import os
+
+_container_credentials_full_uri = os.environ.get("AWS_CONTAINER_CREDENTIALS_FULL_URI")
+_container_authorization_token_file = os.environ.get("AWS_CONTAINER_AUTHORIZATION_TOKEN_FILE")
+store = S3Store("my-bucket",
+    region="us-east-1",
+    container_credentials_full_uri=_container_credentials_full_uri,
+    container_authorization_token_file=_container_authorization_token_file,
+)"
+`;
+
 exports[`generateStorageCode > S3 > with custom endpoint 1`] = `
 "from obstore.store import S3Store
 
@@ -130,6 +168,18 @@ store = S3Store("my-bucket",
 )"
 `;
 
+exports[`generateStorageCode > S3 > with plain-http endpoint 1`] = `
+"from obstore.store import S3Store
+
+store = S3Store("my-bucket",
+    region="us-east-1",
+    access_key_id="AKIAIOSFODNN7EXAMPLE",
+    secret_access_key="wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY",
+    endpoint_url="http://cwlota.com",
+    allow_http=True,
+)"
+`;
+
 exports[`generateStorageCode > S3 > with secrets 1`] = `
 "from obstore.store import S3Store
 import os

package/src/components/editor/connections/storage/__tests__/as-code.test.ts

@@ -9,9 +9,13 @@ describe("generateStorageCode", () => {
     type: "s3",
     bucket: "my-bucket",
     region: "us-east-1",
-    access_key_id: "AKIAIOSFODNN7EXAMPLE",
-    secret_access_key: "wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY",
     endpoint_url: undefined,
+    allow_http: false,
+    auth: {
+      type: "Access keys",
+      access_key_id: "AKIAIOSFODNN7EXAMPLE",
+      secret_access_key: "wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY",
+    },
   };
 
   const baseGCS: StorageConnection = {
@@ -31,8 +35,11 @@ describe("generateStorageCode", () => {
     type: "coreweave",
     bucket: "operator-bucket",
     region: "US-EAST-04A",
-    access_key_id: "AKIAIOSFODNN7EXAMPLE",
-    secret_access_key: "wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY",
+    auth: {
+      type: "Access keys",
+      access_key_id: "AKIAIOSFODNN7EXAMPLE",
+      secret_access_key: "wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY",
+    },
   };
 
   const baseGDrive: StorageConnection = {
@@ -52,6 +59,8 @@ describe("generateStorageCode", () => {
       const conn: StorageConnection = {
         type: "s3",
         bucket: "my-bucket",
+        allow_http: false,
+        auth: { type: "Access keys" },
       };
       expect(
         generateStorageCode(conn, { library: "obstore" }),
@@ -68,13 +77,61 @@ describe("generateStorageCode", () => {
       ).toMatchSnapshot();
     });
 
+    it("with plain-http endpoint", () => {
+      const conn: StorageConnection = {
+        ...baseS3,
+        endpoint_url: "http://cwlota.com",
+        allow_http: true,
+      };
+      expect(
+        generateStorageCode(conn, { library: "obstore" }),
+      ).toMatchSnapshot();
+    });
+
+    it("with container credentials", () => {
+      const conn: StorageConnection = {
+        ...baseS3,
+        auth: {
+          type: "Container credentials",
+          container_credentials_full_uri:
+            "http://169.254.170.23/v1/credentials",
+          container_authorization_token_file: "/var/run/secrets/token",
+        },
+      };
+      expect(
+        generateStorageCode(conn, { library: "obstore" }),
+      ).toMatchSnapshot();
+    });
+
+    it("with container credentials from secrets", () => {
+      const conn: StorageConnection = {
+        ...baseS3,
+        auth: {
+          type: "Container credentials",
+          container_credentials_full_uri: prefixSecret(
+            "AWS_CONTAINER_CREDENTIALS_FULL_URI",
+          ),
+          container_authorization_token_file: prefixSecret(
+            "AWS_CONTAINER_AUTHORIZATION_TOKEN_FILE",
+          ),
+        },
+      };
+      expect(
+        generateStorageCode(conn, { library: "obstore" }),
+      ).toMatchSnapshot();
+    });
+
     it("with secrets", () => {
       const conn: StorageConnection = {
         type: "s3",
         bucket: "my-bucket",
         region: "us-east-1",
-        access_key_id: prefixSecret("AWS_ACCESS_KEY_ID"),
-        secret_access_key: prefixSecret("AWS_SECRET_ACCESS_KEY"),
+        allow_http: false,
+        auth: {
+          type: "Access keys",
+          access_key_id: prefixSecret("AWS_ACCESS_KEY_ID"),
+          secret_access_key: prefixSecret("AWS_SECRET_ACCESS_KEY"),
+        },
       };
       expect(
         generateStorageCode(conn, { library: "obstore" }),
@@ -143,6 +200,25 @@ describe("generateStorageCode", () => {
         type: "coreweave",
         bucket: "operator-bucket",
         region: "US-EAST-04A",
+        auth: { type: "Access keys" },
+      };
+      expect(
+        generateStorageCode(conn, { library: "obstore" }),
+      ).toMatchSnapshot();
+    });
+
+    it("with container credentials", () => {
+      const conn: StorageConnection = {
+        ...baseCoreWeave,
+        auth: {
+          type: "Container credentials",
+          container_credentials_full_uri: prefixSecret(
+            "AWS_CONTAINER_CREDENTIALS_FULL_URI",
+          ),
+          container_authorization_token_file: prefixSecret(
+            "AWS_CONTAINER_AUTHORIZATION_TOKEN_FILE",
+          ),
+        },
       };
       expect(
         generateStorageCode(conn, { library: "obstore" }),
@@ -154,8 +230,11 @@ describe("generateStorageCode", () => {
         type: "coreweave",
         bucket: "operator-bucket",
         region: "US-EAST-04A",
-        access_key_id: prefixSecret("COREWEAVE_OBJECT_STORAGE_KEY"),
-        secret_access_key: prefixSecret("COREWEAVE_OBJECT_STORAGE_SECRET"),
+        auth: {
+          type: "Access keys",
+          access_key_id: prefixSecret("COREWEAVE_OBJECT_STORAGE_KEY"),
+          secret_access_key: prefixSecret("COREWEAVE_OBJECT_STORAGE_SECRET"),
+        },
       };
       expect(
         generateStorageCode(conn, { library: "obstore" }),

package/src/components/editor/connections/storage/as-code.ts

@@ -3,7 +3,11 @@
 import dedent from "string-dedent";
 import { assertNever } from "@/utils/assertNever";
 import { isSecret, unprefixSecret } from "../secrets";
-import { type StorageConnection, StorageConnectionSchema } from "./schemas";
+import {
+  type S3Auth,
+  type StorageConnection,
+  StorageConnectionSchema,
+} from "./schemas";
 
 export type StorageLibrary = "obstore" | "fsspec";
 
@@ -50,6 +54,36 @@ class SecretContainer {
   }
 }
 
+/**
+ * Credential kwargs shared by every S3-compatible store.
+ */
+function s3AuthParams(
+  auth: S3Auth | undefined,
+  secrets: SecretContainer,
+): string[] {
+  // obstore polls the credential endpoint with the token read from the file,
+  // refreshing credentials for the lifetime of the store.
+  if (auth?.type === "Container credentials") {
+    return [
+      `    container_credentials_full_uri=${secrets.print("container_credentials_full_uri", auth.container_credentials_full_uri)},`,
+      `    container_authorization_token_file=${secrets.print("container_authorization_token_file", auth.container_authorization_token_file)},`,
+    ];
+  }
+
+  const params: string[] = [];
+  if (auth?.access_key_id) {
+    params.push(
+      `    access_key_id=${secrets.print("access_key_id", auth.access_key_id)},`,
+    );
+  }
+  if (auth?.secret_access_key) {
+    params.push(
+      `    secret_access_key=${secrets.print("secret_access_key", auth.secret_access_key)},`,
+    );
+  }
+  return params;
+}
+
 function generateS3Code(
   connection: Extract<StorageConnection, { type: "s3" }>,
   secrets: SecretContainer,
@@ -61,21 +95,15 @@ function generateS3Code(
   if (connection.region) {
     params.push(`    region=${secrets.print("region", connection.region)},`);
   }
-  if (connection.access_key_id) {
-    params.push(
-      `    access_key_id=${secrets.print("access_key_id", connection.access_key_id)},`,
-    );
-  }
-  if (connection.secret_access_key) {
-    params.push(
-      `    secret_access_key=${secrets.print("secret_access_key", connection.secret_access_key)},`,
-    );
-  }
+  params.push(...s3AuthParams(connection.auth, secrets));
   if (connection.endpoint_url) {
     params.push(
       `    endpoint_url=${secrets.print("endpoint_url", connection.endpoint_url)},`,
     );
   }
+  if (connection.allow_http) {
+    params.push("    allow_http=True,");
+  }
 
   const paramsStr = params.length > 0 ? `\n${params.join("\n")}\n` : "";
 
@@ -140,16 +168,7 @@ function generateCoreWeaveCode(
     `    region=${secrets.print("region", connection.region)},`,
   ];
 
-  if (connection.access_key_id) {
-    params.push(
-      `    access_key_id=${secrets.print("access_key_id", connection.access_key_id)},`,
-    );
-  }
-  if (connection.secret_access_key) {
-    params.push(
-      `    secret_access_key=${secrets.print("secret_access_key", connection.secret_access_key)},`,
-    );
-  }
+  params.push(...s3AuthParams(connection.auth, secrets));
 
   params.push(
     `    endpoint="https://${connection.bucket}.cwobject.com",`,

package/src/components/editor/connections/storage/schemas.ts

@@ -2,6 +2,83 @@
 import { z } from "zod";
 import { FieldOptions } from "@/components/forms/options";
 
+/**
+ * Credentials shared by every S3-compatible store (Amazon S3, CoreWeave, ...).
+ *
+ * Rendered as tabs: either long-lived access keys, or a credential-vending
+ * endpoint (ECS/EKS task roles, CoreWeave sandboxes, ...) that obstore polls
+ * with a bearer token read from disk.
+ */
+const s3AuthField = () =>
+  z
+    .discriminatedUnion("type", [
+      z.object({
+        type: z.literal("Access keys"),
+        access_key_id: z
+          .string()
+          .optional()
+          .describe(
+            FieldOptions.of({
+              label: "Access Key ID",
+              description: "Leave empty to use the default credential chain",
+              inputType: "password",
+              optionRegex:
+                "(access.?key.?id|object.?storage.?key|aws.?access.?key)",
+            }),
+          ),
+        secret_access_key: z
+          .string()
+          .optional()
+          .describe(
+            FieldOptions.of({
+              label: "Secret Access Key",
+              inputType: "password",
+              optionRegex:
+                "(secret.?access.?key|object.?storage.?secret|aws.?secret)",
+            }),
+          ),
+      }),
+      z.object({
+        type: z.literal("Container credentials"),
+        container_credentials_full_uri: z
+          .string()
+          .nonempty()
+          .describe(
+            FieldOptions.of({
+              label: "Credentials URI",
+              description: "Endpoint that vends credentials to the container",
+              placeholder: "http://169.254.170.23/v1/credentials",
+              optionRegex: "container.?credentials",
+            }),
+          ),
+        container_authorization_token_file: z
+          .string()
+          .nonempty()
+          .describe(
+            FieldOptions.of({
+              label: "Authorization Token File",
+              description: "File holding the token sent to the credentials URI",
+              placeholder: "/var/run/secrets/token",
+              optionRegex:
+                "(container.?authorization.?token.?file|container.?auth.?token)",
+            }),
+          ),
+      }),
+    ])
+    .default({ type: "Access keys" })
+    .describe(FieldOptions.of({ label: "Credentials", special: "tabs" }));
+
+const allowHttpField = () =>
+  z
+    .boolean()
+    .default(false)
+    .describe(
+      FieldOptions.of({
+        label: "Allow HTTP",
+        description: "Required for plain-http (non-TLS) endpoints",
+      }),
+    );
+
 export const S3StorageSchema = z
   .object({
     type: z.literal("s3"),
@@ -25,36 +102,20 @@ export const S3StorageSchema = z
           optionRegex: "(region|aws.?region)",
         }),
       ),
-    access_key_id: z
-      .string()
-      .optional()
-      .describe(
-        FieldOptions.of({
-          label: "Access Key ID",
-          inputType: "password",
-          optionRegex: "(access.?key.?id|aws.?access.?key)",
-        }),
-      ),
-    secret_access_key: z
-      .string()
-      .optional()
-      .describe(
-        FieldOptions.of({
-          label: "Secret Access Key",
-          inputType: "password",
-          optionRegex: "(secret.?access.?key|aws.?secret)",
-        }),
-      ),
     endpoint_url: z
       .string()
       .optional()
       .describe(
         FieldOptions.of({
           label: "Endpoint URL",
+          description:
+            "Ignored if the AWS_ENDPOINT_URL_S3 environment variable is set",
           placeholder: "https://s3.amazonaws.com",
           optionRegex: "(endpoint|s3.?url|s3.?endpoint)",
         }),
       ),
+    allow_http: allowHttpField(),
+    auth: s3AuthField(),
   })
   .describe(FieldOptions.of({ direction: "two-columns" }));
 
@@ -139,28 +200,7 @@ export const CoreWeaveStorageSchema = z
           placeholder: "US-EAST-04A",
         }),
       ),
-    access_key_id: z
-      .string()
-      .optional()
-      .describe(
-        FieldOptions.of({
-          label: "Access Key ID",
-          inputType: "password",
-          optionRegex:
-            "(access.?key.?id|object.?storage.?key|aws.?access.?key)",
-        }),
-      ),
-    secret_access_key: z
-      .string()
-      .optional()
-      .describe(
-        FieldOptions.of({
-          label: "Secret Access Key",
-          inputType: "password",
-          optionRegex:
-            "(secret.?access.?key|object.?storage.?secret|aws.?secret)",
-        }),
-      ),
+    auth: s3AuthField(),
   })
   .describe(FieldOptions.of({ direction: "two-columns" }));
 
@@ -189,3 +229,4 @@ export const StorageConnectionSchema = z.discriminatedUnion("type", [
 ]);
 
 export type StorageConnection = z.infer<typeof StorageConnectionSchema>;
+export type S3Auth = Extract<StorageConnection, { type: "s3" }>["auth"];

package/src/components/editor/renderers/vertical-layout/vertical-layout.tsx

@@ -202,7 +202,7 @@ const ActionButtons: React.FC<{
     if (!app) {
       return;
     }
-    await downloadAsHTML({ filename: document.title, includeCode: true });
+    await downloadAsHTML({ includeCode: true });
   };
 
   const handleDownloadAsPython = async () => {

package/src/components/slides/__tests__/cell-output-block.test.tsx

@@ -0,0 +1,40 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { cellId } from "@/__tests__/branded";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { CellOutputId } from "@/core/cells/ids";
+import { createCell, createCellRuntimeState } from "@/core/cells/types";
+import { CellOutputBlock } from "../reveal-component";
+
+describe("CellOutputBlock", () => {
+  it("renders the cell's data-cell-id and data-cell-name so it can be targeted by custom CSS", () => {
+    const id = cellId("test");
+    const cell = {
+      ...createCell({ id, name: "title" }),
+      ...createCellRuntimeState({
+        output: {
+          channel: "output",
+          mimetype: "text/plain",
+          data: "hello",
+          timestamp: 0,
+        },
+      }),
+    };
+
+    const { container } = render(
+      <TooltipProvider>
+        <CellOutputBlock cell={cell} />
+      </TooltipProvider>,
+    );
+
+    const cellElement = container.querySelector(`[data-cell-id="${id}"]`);
+    expect(cellElement).toBeTruthy();
+    expect(cellElement?.getAttribute("data-cell-name")).toBe("title");
+
+    // The wrapper's `data-cell-id` must coexist with the output's own
+    // `CellOutputId`-derived id, without colliding.
+    expect(document.getElementById(CellOutputId.create(id))).toBeTruthy();
+  });
+});

package/src/components/slides/__tests__/slide-cell-view.test.tsx

@@ -0,0 +1,33 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { render } from "@testing-library/react";
+import { beforeAll, describe, expect, it } from "vitest";
+import { SetupMocks } from "@/__mocks__/common";
+import { cellId } from "@/__tests__/branded";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { createCell, createCellRuntimeState } from "@/core/cells/types";
+import { SlideCellReadOnlyView } from "../slide-cell-view";
+
+beforeAll(() => {
+  SetupMocks.resizeObserver();
+});
+
+describe("SlideCellReadOnlyView", () => {
+  it("renders the cell's data-cell-id and data-cell-name so it can be targeted by custom CSS", () => {
+    const id = cellId("test");
+    const cell = {
+      ...createCell({ id, name: "title", code: "x = 1" }),
+      ...createCellRuntimeState(),
+    };
+
+    const { container } = render(
+      <TooltipProvider>
+        <SlideCellReadOnlyView cell={cell} />
+      </TooltipProvider>,
+    );
+
+    const cellElement = container.querySelector(`[data-cell-id="${id}"]`);
+    expect(cellElement).toBeTruthy();
+    expect(cellElement?.getAttribute("data-cell-name")).toBe("title");
+  });
+});