@marimo-team/frontend 0.23.16-dev6 → 0.23.16-dev62

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

@@ -1,5 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import { describe, expect, it } from "vitest";
+import { prefixPath } from "../../paths";
 import { prefixSecret } from "../../secrets";
 import { generateStorageCode } from "../as-code";
 import type { StorageConnection } from "../schemas";
@@ -9,9 +10,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 +36,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 +60,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 +78,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" }),
@@ -98,6 +156,26 @@ describe("generateStorageCode", () => {
         generateStorageCode(conn, { library: "obstore" }),
       ).toMatchSnapshot();
     });
+
+    it("with service account key from secrets", () => {
+      const conn: StorageConnection = {
+        ...baseGCS,
+        service_account_key: prefixSecret("GCS_SERVICE_ACCOUNT_KEY"),
+      };
+      expect(
+        generateStorageCode(conn, { library: "obstore" }),
+      ).toMatchSnapshot();
+    });
+
+    it("with service account key from a file path", () => {
+      const conn: StorageConnection = {
+        ...baseGCS,
+        service_account_key: prefixPath("/etc/secrets/gcs.json"),
+      };
+      expect(
+        generateStorageCode(conn, { library: "obstore" }),
+      ).toMatchSnapshot();
+    });
   });
 
   describe("Azure", () => {
@@ -143,6 +221,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 +251,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" }),
@@ -187,6 +287,26 @@ describe("generateStorageCode", () => {
         generateStorageCode(conn, { library: "fsspec", isEmbedded: true }),
       ).toMatchSnapshot();
     });
+
+    it("with service account credentials from secrets", () => {
+      const conn: StorageConnection = {
+        ...baseGDrive,
+        credentials_json: prefixSecret("GDRIVE_CREDENTIALS_JSON"),
+      };
+      expect(
+        generateStorageCode(conn, { library: "fsspec" }),
+      ).toMatchSnapshot();
+    });
+
+    it("with service account credentials from a file path", () => {
+      const conn: StorageConnection = {
+        ...baseGDrive,
+        credentials_json: prefixPath("/etc/secrets/gdrive.json"),
+      };
+      expect(
+        generateStorageCode(conn, { library: "fsspec" }),
+      ).toMatchSnapshot();
+    });
   });
 
   describe("invalid cases", () => {

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

@@ -2,8 +2,13 @@
 
 import dedent from "string-dedent";
 import { assertNever } from "@/utils/assertNever";
+import { escapePythonString, resolveJsonCredential } from "../json-credentials";
 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 +55,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 +96,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` : "";
 
@@ -92,20 +121,36 @@ function generateGCSCode(
   const bucket = secrets.print("bucket", connection.bucket);
   const imports = new Set(["from obstore.store import GCSStore"]);
 
-  let code: string;
-  if (connection.service_account_key) {
-    imports.add("import json");
-    code = dedent(`
-      _credentials = json.loads("""${connection.service_account_key}""")
+  if (!connection.service_account_key) {
+    return {
+      imports,
+      code: dedent(`
+        store = GCSStore(${bucket})
+      `),
+    };
+  }
+
+  const credential = resolveJsonCredential(
+    connection.service_account_key,
+    (v) => secrets.print("service_account_key", v),
+  );
+
+  if (credential.kind === "path") {
+    const code = dedent(`
       store = GCSStore(${bucket},
-          service_account_key=_credentials,
+          service_account_path="${escapePythonString(credential.path)}",
       )
     `);
-  } else {
-    code = dedent(`
-      store = GCSStore(${bucket})
-    `);
+    return { imports, code };
   }
+
+  imports.add("import json");
+  const code = dedent(`
+    _credentials = ${credential.expr}
+    store = GCSStore(${bucket},
+        service_account_key=_credentials,
+    )
+  `);
   return { imports, code };
 }
 
@@ -140,16 +185,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",`,
@@ -176,13 +212,20 @@ function generateGDriveCode(
   const imports = new Set(["from gdrive_fsspec import GoogleDriveFileSystem"]);
 
   if (connection.credentials_json) {
-    imports.add("import json");
-    const creds = secrets.print(
-      "credentials_json",
-      connection.credentials_json,
+    const credential = resolveJsonCredential(connection.credentials_json, (v) =>
+      secrets.print("credentials_json", v),
     );
+    // gdrive-fsspec accepts a filesystem path as `creds` when the string
+    // doesn't start with "{"; otherwise it expects a JSON object/string.
+    if (credential.kind === "path") {
+      const code = dedent(`
+        fs = GoogleDriveFileSystem(creds="${escapePythonString(credential.path)}", token="service_account", use_listings_cache=False, skip_instance_cache=True)
+      `);
+      return { imports, code };
+    }
+    imports.add("import json");
     const code = dedent(`
-      _creds = json.loads("""${connection.credentials_json?.startsWith("ENV:") ? `{${creds}}` : connection.credentials_json}""")
+      _creds = ${credential.expr}
       fs = GoogleDriveFileSystem(creds=_creds, token="service_account", use_listings_cache=False, skip_instance_cache=True)
     `);
     return { imports, code };

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" }));
 
@@ -77,7 +138,7 @@ export const GCSStorageSchema = z
       .describe(
         FieldOptions.of({
           label: "Service Account Key (JSON)",
-          inputType: "textarea",
+          special: "secret_textarea",
         }),
       ),
   })
@@ -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" }));
 
@@ -174,7 +214,7 @@ export const GoogleDriveStorageSchema = z
         FieldOptions.of({
           label: "Service Account JSON",
           description: "Leave empty to use browser-based authentication",
-          inputType: "textarea",
+          special: "secret_textarea",
         }),
       ),
   })
@@ -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/file-tree/__tests__/renderers.test.ts

@@ -0,0 +1,31 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { describe, expect, it } from "vitest";
+import { buildMediaSource } from "../renderers";
+
+describe("buildMediaSource", () => {
+  it("returns base64 source for binary media", () => {
+    expect(
+      buildMediaSource({
+        contents: "aGVsbG8=",
+        mimeType: "image/png",
+        isBase64: true,
+      }),
+    ).toEqual({
+      base64: "aGVsbG8=",
+      mime: "image/png",
+    });
+  });
+
+  it("returns UTF-8 data URL for text-based media", () => {
+    const svg = '<svg xmlns="http://www.w3.org/2000/svg"></svg>';
+    expect(
+      buildMediaSource({
+        contents: svg,
+        mimeType: "image/svg+xml",
+        isBase64: false,
+      }),
+    ).toEqual({
+      url: `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`,
+    });
+  });
+});

package/src/components/editor/file-tree/file-viewer.tsx

@@ -22,12 +22,11 @@ import { isWasm } from "@/core/wasm/utils";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { ErrorBanner } from "@/plugins/impl/common/error-banner";
 import { copyToClipboard } from "@/utils/copy";
-import type { Base64String } from "@/utils/json/base64";
 import { downloadFile } from "./download";
 import { FilePreviewHeader } from "./file-header";
 import { FilePreviewMetadata } from "./file-preview-metadata";
 import { getFileRenderMode } from "./file-render-mode";
-import { FileContentRenderer } from "./renderers";
+import { buildMediaSource, FileContentRenderer } from "./renderers";
 
 export const MAX_FILE_PREVIEW_BYTES = 10 * 1024 * 1024;
 
@@ -226,6 +225,15 @@ export const FileViewer: React.FC<Props> = ({ file, onOpenNotebook }) => {
     </Alert>
   );
 
+  const mediaSource =
+    isMedia && data.contents
+      ? buildMediaSource({
+          contents: data.contents,
+          mimeType,
+          isBase64: data.isBase64 ?? false,
+        })
+      : undefined;
+
   return (
     <>
       {header}
@@ -239,11 +247,7 @@ export const FileViewer: React.FC<Props> = ({ file, onOpenNotebook }) => {
               ? (data.contents ?? undefined)
               : undefined
         }
-        mediaSource={
-          isMedia && data.contents
-            ? { base64: data.contents as Base64String, mime: mimeType }
-            : undefined
-        }
+        mediaSource={mediaSource}
         readOnly={!isText}
         onChange={isText ? setInternalValue : undefined}
         extensions={isText ? [saveKeymapExtension] : []}

package/src/components/editor/file-tree/renderers.tsx

@@ -60,6 +60,27 @@ function resolveMediaSrc(source: MediaSource): string {
   return base64ToDataURL(source.base64, source.mime);
 }
 
+/**
+ * Build a {@link MediaSource} from file details.
+ * Binary media is base64-encoded; text-based media (e.g. SVG) uses a UTF-8 data URL.
+ */
+export function buildMediaSource({
+  contents,
+  mimeType,
+  isBase64,
+}: {
+  contents: string;
+  mimeType: string;
+  isBase64: boolean;
+}): MediaSource {
+  if (isBase64) {
+    return { base64: contents as Base64String, mime: mimeType };
+  }
+  return {
+    url: `data:${mimeType};charset=utf-8,${encodeURIComponent(contents)}`,
+  };
+}
+
 export const CsvViewer: React.FC<{ contents: string }> = ({ contents }) => {
   const data = useMemo(() => parseCsvData(contents), [contents]);
   const [pagination, setPagination] = useState<PaginationState>({

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 () => {
@@ -252,7 +252,7 @@ const ActionButtons: React.FC<{
           key="download-python"
         >
           <CodeIcon className="mr-2" size={14} strokeWidth={1.5} />
-          Download as .py
+          Download notebook source
         </DropdownMenuItem>,
       );
     }

package/src/components/editor/viewer-banner.tsx

@@ -51,8 +51,13 @@ export const ViewerBanner = () => {
     }
   };
 
+  // A zero-height sticky row pins the banner to the top-left of the notebook
+  // scroll area, so it stays visible while scrolling without reserving space in
+  // the flow. Because it reserves no space, the banner visually overlaps the
+  // app header (sticky at z-50); setting the banner to z-100 keeps the header
+  // from covering the button and swallowing its clicks.
   return (
-    <div className="absolute top-2 left-2 z-50 w-fit print:hidden">
+    <div className="sticky top-2 left-2 z-100 h-0 ml-2 w-fit print:hidden">
       <Banner
         kind="info"
         className="flex items-center gap-2 rounded px-2 py-1 text-xs shadow-sm"