Bound file previews and offer download for unpreviewable files (#10277)

## 📝 Summary

Open every selected file in FileViewer while preventing oversized files
from being fully read, base64-encoded, and shipped through JSON.

The `/api/files/file_details` endpoint bounds a read only when the
caller passes `maxBytes`, so the file preview stays capped at 10 MiB
while every other consumer (AI attachments, ACP reads, vimrc) reads in
full as before. Metadata lookup is split from content retrieval, and
reads stop at the limit without opening oversized files. The frontend
classifies each response into text, CSV, media, or unsupported, and
renders file metadata with a download action instead of mounting an
empty editor or dumping base64 for oversized or unsupported files.
Native downloads use the streaming GET endpoint; the explicit WASM
download stays full-content.

Closes MO-6275

<img width="510" height="389" alt="Screenshot 2026-07-22 at 1 27 35 PM"
src="https://github.com/user-attachments/assets/c6486781-ef62-4c33-8f00-6ab1868aef24"
/>
<img width="510" height="389" alt="Screenshot 2026-07-22 at 1 27 45 PM"
src="https://github.com/user-attachments/assets/158fe326-c37f-44f6-89e6-3dd0aacdd933"
/>

Author: kirangadhave

frontend/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);
+    },
+  );
+});

frontend/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");
+    });
+  });
+});

frontend/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>
+  );
+};

frontend/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";
+}