@marimo-team/frontend 0.23.16-dev3 → 0.23.16-dev34

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/file-tree/__tests__/file-render-mode.test.ts

@@ -0,0 +1,27 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describe, expect, it } from "vitest";
+import { getFileRenderMode } from "../file-render-mode";
+
+describe("getFileRenderMode", () => {
+  it.each([
+    ["text/plain", false, "text"],
+    ["text/x-rust", false, "text"],
+    ["application/json", false, "text"],
+    ["application/xml", false, "text"],
+    ["text/csv", false, "csv"],
+    ["image/png", true, "media"],
+    ["video/mp4", true, "media"],
+    ["application/pdf", true, "media"],
+    ["application/x-apple-diskimage", true, "unsupported"],
+    ["application/zip", true, "unsupported"],
+    ["application/octet-stream", false, "unsupported"],
+    [null, false, "text"],
+    [null, true, "unsupported"],
+  ] as const)(
+    "maps %s with isBase64=%s to %s",
+    (mimeType, isBase64, expected) => {
+      expect(getFileRenderMode(mimeType, isBase64)).toBe(expected);
+    },
+  );
+});

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

@@ -0,0 +1,150 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { Provider } from "jotai";
+import type React from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { MockRequestClient } from "@/__mocks__/requests";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { requestClientAtom } from "@/core/network/requests";
+import type { FileDetailsResponse, FileInfo } from "@/core/network/types";
+import { store } from "@/core/state/jotai";
+import { FileViewer, MAX_FILE_PREVIEW_BYTES } from "../file-viewer";
+
+vi.mock("@/plugins/impl/code/LazyAnyLanguageCodeMirror", () => ({
+  LazyAnyLanguageCodeMirror: ({
+    value,
+    onChange,
+  }: {
+    value?: string;
+    onChange?: (value: string) => void;
+  }) => (
+    <textarea
+      data-testid="code-editor"
+      value={value ?? ""}
+      onChange={(evt) => onChange?.(evt.target.value)}
+    />
+  ),
+}));
+
+vi.mock("@/core/wasm/utils", () => ({ isWasm: () => false }));
+
+const wrapper = ({ children }: { children: React.ReactNode }) => (
+  <Provider store={store}>
+    <TooltipProvider>{children}</TooltipProvider>
+  </Provider>
+);
+
+const file: FileInfo = {
+  id: "/workspace/installer.dmg",
+  path: "/workspace/installer.dmg",
+  name: "installer.dmg",
+  isDirectory: false,
+  isMarimoFile: false,
+  size: 20 * 1024 * 1024,
+};
+
+function renderViewer(response: FileDetailsResponse) {
+  const client = MockRequestClient.create({
+    sendFileDetails: vi.fn().mockResolvedValue(response),
+  });
+  store.set(requestClientAtom, client);
+  render(<FileViewer file={file} onOpenNotebook={vi.fn()} />, { wrapper });
+  return client;
+}
+
+describe("FileViewer bounded previews", () => {
+  beforeEach(() => {
+    store.set(requestClientAtom, null);
+  });
+
+  it("requests a bounded preview and shows oversized metadata", async () => {
+    const client = renderViewer({
+      file,
+      contents: null,
+      mimeType: "application/x-apple-diskimage",
+      isBase64: false,
+      isTooLarge: true,
+    });
+
+    expect(await screen.findByText(/too large to preview/i)).toBeVisible();
+    expect(screen.getByText("20 MB")).toBeVisible();
+    expect(screen.getByRole("button", { name: /download/i })).toBeVisible();
+    expect(screen.queryByTestId("code-editor")).not.toBeInTheDocument();
+    expect(client.sendFileDetails).toHaveBeenCalledWith({
+      path: file.path,
+      maxBytes: MAX_FILE_PREVIEW_BYTES,
+    });
+  });
+
+  it("shows unsupported metadata with a download action, not base64 text", async () => {
+    renderViewer({
+      file: { ...file, size: 4 },
+      contents: "AAEC",
+      mimeType: "application/x-apple-diskimage",
+      isBase64: true,
+      isTooLarge: false,
+    });
+
+    expect(await screen.findByText(/cannot be previewed/i)).toBeVisible();
+    expect(screen.getByRole("button", { name: /download/i })).toBeVisible();
+    expect(screen.queryByTestId("code-editor")).not.toBeInTheDocument();
+  });
+
+  it("continues to render small text files", async () => {
+    renderViewer({
+      file: { ...file, name: "notes.txt", size: 5 },
+      contents: "hello",
+      mimeType: "text/plain",
+      isBase64: false,
+      isTooLarge: false,
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId("code-editor")).toBeInTheDocument();
+    });
+    expect(screen.queryByText(/too large to preview/i)).not.toBeInTheDocument();
+  });
+
+  it("preserves edits to an initially empty text file across remount", async () => {
+    const emptyFile: FileInfo = {
+      id: "/workspace/empty.txt",
+      path: "/workspace/empty.txt",
+      name: "empty.txt",
+      isDirectory: false,
+      isMarimoFile: false,
+      size: 0,
+    };
+    const response: FileDetailsResponse = {
+      file: emptyFile,
+      contents: "",
+      mimeType: "text/plain",
+      isBase64: false,
+      isTooLarge: false,
+    };
+    const client = MockRequestClient.create({
+      sendFileDetails: vi.fn().mockResolvedValue(response),
+    });
+    store.set(requestClientAtom, client);
+
+    const { unmount } = render(
+      <FileViewer file={emptyFile} onOpenNotebook={vi.fn()} />,
+      { wrapper },
+    );
+
+    const editor =
+      await screen.findByTestId<HTMLTextAreaElement>("code-editor");
+    fireEvent.change(editor, { target: { value: "draft" } });
+    unmount();
+
+    render(<FileViewer file={emptyFile} onOpenNotebook={vi.fn()} />, {
+      wrapper,
+    });
+
+    const reopened =
+      await screen.findByTestId<HTMLTextAreaElement>("code-editor");
+    await waitFor(() => {
+      expect(reopened.value).toBe("draft");
+    });
+  });
+});

package/src/components/editor/file-tree/file-preview-metadata.tsx

@@ -0,0 +1,51 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { DownloadIcon } from "lucide-react";
+import { useLocale } from "react-aria";
+import { Button } from "@/components/ui/button";
+import type { FileInfo } from "@/core/network/types";
+import { formatBytes } from "@/utils/formatting";
+
+interface Props {
+  file: FileInfo;
+  mimeType: string;
+  message: string;
+  onDownload?: () => void;
+}
+
+export const FilePreviewMetadata = ({
+  file,
+  mimeType,
+  message,
+  onDownload,
+}: Props) => {
+  const { locale } = useLocale();
+  return (
+    <div className="p-4 text-sm">
+      <div className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-2">
+        <span className="text-muted-foreground font-medium">Path</span>
+        <span className="font-mono text-xs break-all">{file.path}</span>
+        <span className="text-muted-foreground font-medium">Type</span>
+        <span>{mimeType}</span>
+        {file.size != null && (
+          <>
+            <span className="text-muted-foreground font-medium">Size</span>
+            <span>{formatBytes(file.size, locale)}</span>
+          </>
+        )}
+      </div>
+      <div className="mt-4 text-muted-foreground italic">{message}</div>
+      {onDownload && (
+        <Button
+          variant="outline"
+          size="sm"
+          className="mt-4"
+          onClick={onDownload}
+        >
+          <DownloadIcon className="h-3.5 w-3.5 mr-2" />
+          Download
+        </Button>
+      )}
+    </div>
+  );
+};

package/src/components/editor/file-tree/file-render-mode.ts

@@ -0,0 +1,32 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { isMediaMime, MIME_TO_LANGUAGE } from "./renderers";
+
+export type FileRenderMode = "text" | "csv" | "media" | "unsupported";
+
+export function getFileRenderMode(
+  mimeType: string | null | undefined,
+  isBase64: boolean | undefined,
+): FileRenderMode {
+  const mime = mimeType || "text/plain";
+
+  if (isMediaMime(mime)) {
+    return "media";
+  }
+  if (isBase64) {
+    return "unsupported";
+  }
+  if (mime === "text/csv") {
+    return "csv";
+  }
+  if (
+    mime.startsWith("text/") ||
+    (mime !== "default" && mime in MIME_TO_LANGUAGE)
+  ) {
+    return "text";
+  }
+  if (mimeType == null) {
+    return "text";
+  }
+  return "unsupported";
+}