@marimo-team/frontend 0.20.2 → 0.20.3-dev77

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

@@ -1,19 +1,18 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { EditorView, keymap } from "@codemirror/view";
+import { keymap } from "@codemirror/view";
 import { useAtomValue } from "jotai";
 import {
   AlertTriangleIcon,
   CopyIcon,
-  DownloadIcon,
   ExternalLinkIcon,
-  RefreshCwIcon,
   SaveIcon,
 } from "lucide-react";
 import type React from "react";
-import { Suspense, useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { renderShortcut } from "@/components/shortcuts/renderShortcut";
 import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
 import { Tooltip } from "@/components/ui/tooltip";
 import { disableFileDownloadsAtom, hotkeysAtom } from "@/core/config/config";
 import { useRequestClient } from "@/core/network/requests";
@@ -21,19 +20,15 @@ import type { FileInfo } from "@/core/network/types";
 import { filenameAtom } from "@/core/saving/file-state";
 import { isWasm } from "@/core/wasm/utils";
 import { useAsyncData } from "@/hooks/useAsyncData";
-import { LazyAnyLanguageCodeMirror } from "@/plugins/impl/code/LazyAnyLanguageCodeMirror";
 import { ErrorBanner } from "@/plugins/impl/common/error-banner";
-import { useTheme } from "@/theme/useTheme";
 import { copyToClipboard } from "@/utils/copy";
 import { downloadBlob, downloadByURL } from "@/utils/download";
 import { type Base64String, base64ToDataURL } from "@/utils/json/base64";
-import { Button } from "../inputs/Inputs";
+import { FilePreviewHeader } from "./file-header";
 import {
-  AudioViewer,
-  CsvViewer,
-  ImageViewer,
-  PdfViewer,
-  VideoViewer,
+  FileContentRenderer,
+  isMediaMime,
+  MIME_TO_LANGUAGE,
 } from "./renderers";
 
 interface Props {
@@ -46,7 +41,6 @@ interface Props {
 const unsavedContentsForFile = new Map<string, string>();
 
 export const FileViewer: React.FC<Props> = ({ file, onOpenNotebook }) => {
-  const { theme } = useTheme();
   const { sendFileDetails, sendUpdateFile } = useRequestClient();
   const hotkeys = useAtomValue(hotkeysAtom);
   const disableFileDownloads = useAtomValue(disableFileDownloadsAtom);
@@ -105,7 +99,7 @@ export const FileViewer: React.FC<Props> = ({ file, onOpenNotebook }) => {
   }
 
   const mimeType = data.mimeType || "text/plain";
-  const isEditable = mimeType in mimeToLanguage;
+  const isEditable = mimeType in MIME_TO_LANGUAGE;
   const isActiveNotebook =
     currentNotebookFilename &&
     data.file.isMarimoFile &&
@@ -127,7 +121,7 @@ export const FileViewer: React.FC<Props> = ({ file, onOpenNotebook }) => {
   }
 
   const handleDownload = () => {
-    if (isMedia(mimeType)) {
+    if (isMediaMime(mimeType)) {
       const dataURL = base64ToDataURL(data.contents as Base64String, mimeType);
       downloadByURL(dataURL, data.file.name);
       return;
@@ -140,109 +134,57 @@ export const FileViewer: React.FC<Props> = ({ file, onOpenNotebook }) => {
   };
 
   const header = (
-    <div className="text-xs text-muted-foreground p-1 flex justify-end gap-2 border-b">
-      <Tooltip content="Refresh">
-        <Button size="small" onClick={refetch}>
-          <RefreshCwIcon />
-        </Button>
-      </Tooltip>
-      {file.isMarimoFile && !isWasm() && (
-        <Tooltip content="Open notebook">
-          <Button size="small" onClick={(evt) => onOpenNotebook(evt)}>
-            <ExternalLinkIcon />
-          </Button>
-        </Tooltip>
-      )}
-      {!disableFileDownloads && (
-        <Tooltip content="Download">
-          <Button size="small" onClick={handleDownload}>
-            <DownloadIcon />
-          </Button>
-        </Tooltip>
-      )}
-      {!isMedia(mimeType) && (
+    <FilePreviewHeader
+      filename={data.file.name}
+      onRefresh={refetch}
+      onDownload={disableFileDownloads ? undefined : handleDownload}
+      actions={
         <>
-          <Tooltip content="Copy contents to clipboard">
-            <Button
-              size="small"
-              onClick={async () => {
-                await copyToClipboard(internalValue);
-              }}
-            >
-              <CopyIcon />
-            </Button>
-          </Tooltip>
-          <Tooltip content={renderShortcut("global.save")}>
-            <Button
-              size="small"
-              color={internalValue === data.contents ? undefined : "green"}
-              onClick={handleSaveFile}
-              disabled={internalValue === data.contents}
-            >
-              <SaveIcon />
-            </Button>
-          </Tooltip>
+          {file.isMarimoFile && !isWasm() && (
+            <Tooltip content="Open notebook">
+              <Button
+                variant="text"
+                size="xs"
+                onClick={(evt) => onOpenNotebook(evt)}
+              >
+                <ExternalLinkIcon className="h-3.5 w-3.5" />
+              </Button>
+            </Tooltip>
+          )}
+          {!isMediaMime(mimeType) && (
+            <>
+              <Tooltip content="Copy contents to clipboard">
+                <Button
+                  variant="text"
+                  size="xs"
+                  onClick={async () => {
+                    await copyToClipboard(internalValue);
+                  }}
+                >
+                  <CopyIcon className="h-3.5 w-3.5" />
+                </Button>
+              </Tooltip>
+              <Tooltip content={renderShortcut("global.save")}>
+                <Button
+                  variant={internalValue === data.contents ? "text" : "success"}
+                  size="xs"
+                  onClick={handleSaveFile}
+                  disabled={internalValue === data.contents}
+                >
+                  <SaveIcon className="h-3.5 w-3.5" />
+                </Button>
+              </Tooltip>
+            </>
+          )}
         </>
-      )}
-    </div>
+      }
+    />
   );
 
-  if (mimeType.startsWith("image/")) {
-    return (
-      <>
-        {header}
-        <div className="flex-1 overflow-hidden flex flex-col">
-          <ImageViewer base64={data.contents as Base64String} mime={mimeType} />
-        </div>
-      </>
-    );
-  }
-
-  if (mimeType === "text/csv" && data.contents) {
-    return (
-      <>
-        {header}
-        <div className="flex-1 overflow-hidden flex flex-col">
-          <CsvViewer contents={data.contents} />
-        </div>
-      </>
-    );
-  }
-
-  if (mimeType.startsWith("audio/")) {
-    return (
-      <>
-        {header}
-        <div className="flex-1 overflow-hidden flex flex-col">
-          <AudioViewer base64={data.contents as Base64String} mime={mimeType} />
-        </div>
-      </>
-    );
-  }
-
-  if (mimeType.startsWith("video/")) {
-    return (
-      <>
-        {header}
-        <div className="flex-1 overflow-hidden flex flex-col">
-          <VideoViewer base64={data.contents as Base64String} mime={mimeType} />
-        </div>
-      </>
-    );
-  }
-
-  if (mimeType.startsWith("application/pdf")) {
-    return (
-      <>
-        {header}
-        <div className="flex-1 overflow-hidden flex flex-col">
-          <PdfViewer base64={data.contents as Base64String} mime={mimeType} />
-        </div>
-      </>
-    );
-  }
+  const isMedia = isMediaMime(mimeType);
+  const isText = !isMedia && mimeType !== "text/csv";
 
-  const warningBanner = isActiveNotebook && (
+  const warningBanner = isText && isActiveNotebook && (
     <Alert variant="warning" className="rounded-none">
       <AlertTriangleIcon className="h-4 w-4" />
       <AlertDescription>
@@ -256,60 +198,39 @@ export const FileViewer: React.FC<Props> = ({ file, onOpenNotebook }) => {
     <>
       {header}
       {warningBanner}
-      <div className="flex-1 overflow-auto">
-        <Suspense>
-          <LazyAnyLanguageCodeMirror
-            theme={theme === "dark" ? "dark" : "light"}
-            language={mimeToLanguage[mimeType] || mimeToLanguage.default}
-            className="border-b"
-            extensions={[
-              EditorView.lineWrapping,
-              // Command S for save
-              keymap.of([
-                {
-                  key: hotkeys.getHotkey("global.save").key,
-                  stopPropagation: true,
-                  run: () => {
-                    if (internalValue !== data.contents) {
-                      handleSaveFile();
-                      return true;
-                    }
-                    return false;
-                  },
-                },
-              ]),
-            ]}
-            value={internalValue}
-            onChange={setInternalValue}
-          />
-        </Suspense>
-      </div>
+      <FileContentRenderer
+        mimeType={mimeType}
+        contents={
+          isMedia
+            ? undefined
+            : isText
+              ? internalValue
+              : (data.contents ?? undefined)
+        }
+        mediaSource={
+          isMedia
+            ? { base64: data.contents as Base64String, mime: mimeType }
+            : undefined
+        }
+        readOnly={!isText}
+        onChange={setInternalValue}
+        extensions={[
+          // Command S for save
+          keymap.of([
+            {
+              key: hotkeys.getHotkey("global.save").key,
+              stopPropagation: true,
+              run: () => {
+                if (internalValue !== data.contents) {
+                  handleSaveFile();
+                  return true;
+                }
+                return false;
+              },
+            },
+          ]),
+        ]}
+      />
     </>
   );
 };
-
-const isMedia = (mime: string) => {
-  if (!mime) {
-    return false;
-  }
-  return (
-    mime.startsWith("image/") ||
-    mime.startsWith("audio/") ||
-    mime.startsWith("video/") ||
-    mime.startsWith("application/pdf")
-  );
-};
-
-const mimeToLanguage: Record<string, string> = {
-  "application/javascript": "javascript",
-  "text/markdown": "markdown",
-  "text/html": "html",
-  "text/css": "css",
-  "text/x-python": "python",
-  "application/json": "json",
-  "application/xml": "xml",
-  "text/x-yaml": "yaml",
-  "text/csv": "markdown",
-  "text/plain": "markdown",
-  default: "markdown",
-};

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

@@ -1,20 +1,65 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
+import type { Extension } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
 import type { PaginationState } from "@tanstack/react-table";
 import type React from "react";
-import { useMemo, useState } from "react";
+import { Suspense, useMemo, useState } from "react";
 import {
   generateColumns,
   inferFieldTypes,
 } from "@/components/data-table/columns";
 import { DataTable } from "@/components/data-table/data-table";
+import { LazyAnyLanguageCodeMirror } from "@/plugins/impl/code/LazyAnyLanguageCodeMirror";
 import { parseCsvData } from "@/plugins/impl/vega/loader";
+import { useTheme } from "@/theme/useTheme";
 import { Arrays } from "@/utils/arrays";
 import { type Base64String, base64ToDataURL } from "@/utils/json/base64";
 import { Objects } from "@/utils/objects";
 
 const PAGE_SIZE = 25;
 
+export function isMediaMime(mime: string): boolean {
+  if (!mime) {
+    return false;
+  }
+  return (
+    mime.startsWith("image/") ||
+    mime.startsWith("audio/") ||
+    mime.startsWith("video/") ||
+    mime.startsWith("application/pdf")
+  );
+}
+
+export const MIME_TO_LANGUAGE: Record<string, string> = {
+  "application/javascript": "javascript",
+  "text/markdown": "markdown",
+  "text/html": "html",
+  "text/css": "css",
+  "text/x-python": "python",
+  "application/json": "json",
+  "application/xml": "xml",
+  "text/x-yaml": "yaml",
+  "text/csv": "markdown",
+  "text/plain": "markdown",
+  default: "markdown",
+};
+
+/**
+ * Media viewer props: provide either a direct `url` or `base64` + `mime`.
+ * When `url` is set it takes precedence.
+ */
+export type MediaSource =
+  | { url: string; base64?: undefined; mime?: string }
+  | { url?: undefined; base64: Base64String; mime: string };
+
+function resolveMediaSrc(source: MediaSource): string {
+  if (source.url != null) {
+    return source.url;
+  }
+  return base64ToDataURL(source.base64, source.mime);
+}
+
 export const CsvViewer: React.FC<{ contents: string }> = ({ contents }) => {
   const data = useMemo(() => parseCsvData(contents), [contents]);
   const [pagination, setPagination] = useState<PaginationState>({
@@ -48,36 +93,112 @@ export const CsvViewer: React.FC<{ contents: string }> = ({ contents }) => {
     />
   );
 };
-export const ImageViewer: React.FC<{ base64: Base64String; mime: string }> = ({
-  mime,
-  base64,
-}) => {
-  return <img src={base64ToDataURL(base64, mime)} alt="Preview" />;
+
+export const ImageViewer: React.FC<MediaSource> = (props) => {
+  return <img src={resolveMediaSrc(props)} alt="Preview" />;
 };
 
-export const AudioViewer: React.FC<{ base64: Base64String; mime: string }> = ({
-  mime,
-  base64,
-}) => {
-  return <audio controls={true} src={base64ToDataURL(base64, mime)} />;
+export const AudioViewer: React.FC<MediaSource> = (props) => {
+  return <audio controls={true} src={resolveMediaSrc(props)} />;
 };
 
-export const VideoViewer: React.FC<{ base64: Base64String; mime: string }> = ({
-  mime,
-  base64,
-}) => {
-  return <video controls={true} src={base64ToDataURL(base64, mime)} />;
+export const VideoViewer: React.FC<MediaSource> = (props) => {
+  return <video controls={true} src={resolveMediaSrc(props)} />;
 };
 
-export const PdfViewer: React.FC<{ base64: Base64String; mime: string }> = ({
-  mime,
-  base64,
-}) => {
+export const PdfViewer: React.FC<MediaSource> = (props) => {
   return (
     <iframe
-      src={base64ToDataURL(base64, mime)}
+      src={resolveMediaSrc(props)}
       title="PDF Viewer"
       className="w-full h-full"
     />
   );
 };
+
+/**
+ * Renders the appropriate media viewer for the given mime type.
+ * Accepts either a `url` or `base64` + `mime` via {@link MediaSource}.
+ */
+export const MediaRenderer: React.FC<MediaSource & { mimeType: string }> = ({
+  mimeType,
+  ...source
+}) => {
+  if (mimeType.startsWith("image/")) {
+    return <ImageViewer {...source} />;
+  }
+  if (mimeType.startsWith("audio/")) {
+    return <AudioViewer {...source} />;
+  }
+  if (mimeType.startsWith("video/")) {
+    return <VideoViewer {...source} />;
+  }
+  if (mimeType.startsWith("application/pdf")) {
+    return <PdfViewer {...source} />;
+  }
+  return null;
+};
+
+/**
+ * Unified content renderer that dispatches to the appropriate viewer
+ * based on MIME type. Used by both the local file viewer and the
+ * storage file viewer.
+ */
+export const FileContentRenderer: React.FC<{
+  mimeType: string;
+  /** Text content for text/CSV files. */
+  contents?: string;
+  /** Media source for image/audio/video/PDF files. */
+  mediaSource?: MediaSource;
+  readOnly?: boolean;
+  onChange?: (value: string) => void;
+  /** Additional CodeMirror extensions (e.g. save hotkey). */
+  extensions?: Extension[];
+}> = ({
+  mimeType,
+  contents,
+  mediaSource,
+  readOnly = true,
+  onChange,
+  extensions = [],
+}) => {
+  const { theme } = useTheme();
+
+  if (mimeType === "text/csv" && contents != null) {
+    return (
+      <div className="flex-1 overflow-hidden flex flex-col">
+        <CsvViewer contents={contents} />
+      </div>
+    );
+  }
+
+  if (isMediaMime(mimeType) && mediaSource) {
+    return (
+      <div className="flex-1 overflow-hidden flex flex-col">
+        <MediaRenderer {...mediaSource} mimeType={mimeType} />
+      </div>
+    );
+  }
+
+  if (contents != null) {
+    const language = MIME_TO_LANGUAGE[mimeType] || MIME_TO_LANGUAGE.default;
+    return (
+      <div className="flex-1 overflow-auto">
+        <Suspense>
+          <LazyAnyLanguageCodeMirror
+            theme={theme === "dark" ? "dark" : "light"}
+            language={language}
+            className="border-b"
+            extensions={[EditorView.lineWrapping, ...extensions]}
+            value={contents}
+            readOnly={readOnly}
+            editable={readOnly ? false : undefined}
+            onChange={readOnly ? undefined : onChange}
+          />
+        </Suspense>
+      </div>
+    );
+  }
+
+  return null;
+};

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

@@ -125,12 +125,16 @@ export class RequestingTree {
     await this.refreshAll([parentPath]);
   }
 
-  async createFile(name: string, parentId: string | null): Promise<void> {
+  async createFile(
+    name: string,
+    parentId: string | null,
+    type: "file" | "notebook" = "file",
+  ): Promise<void> {
     const parentPath = parentId
       ? (this.delegate.find(parentId)?.data.path ?? parentId)
       : this.rootPath;
     const newFile = await this.callbacks
-      .createFileOrFolder({ path: parentPath, type: "file", name: name })
+      .createFileOrFolder({ path: parentPath, type: type, name: name })
       .then(this.handleResponse);
     if (!newFile?.info) {
       return;

package/src/components/editor/output/console/ConsoleOutput.tsx

@@ -1,17 +1,25 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { ChevronRightIcon, WrapTextIcon } from "lucide-react";
+import {
+  ChevronRightIcon,
+  ChevronsDownUpIcon,
+  ChevronsUpDownIcon,
+  WrapTextIcon,
+} from "lucide-react";
 import React, { useLayoutEffect } from "react";
 import { ToggleButton } from "react-aria-components";
 import { DebuggerControls } from "@/components/debugger/debugger-code";
 import { CopyClipboardIcon } from "@/components/icons/copy-icon";
+import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Tooltip } from "@/components/ui/tooltip";
 import type { CellId } from "@/core/cells/ids";
 import { isInternalCellName } from "@/core/cells/names";
+import { useExpandedConsoleOutput } from "@/core/cells/outputs";
 import type { WithResponse } from "@/core/cells/types";
 import type { OutputMessage } from "@/core/kernel/messages";
 import { useInputHistory } from "@/hooks/useInputHistory";
+import { useOverflowDetection } from "@/hooks/useOverflowDetection";
 import { useSelectAllContent } from "@/hooks/useSelectAllContent";
 import { cn } from "@/utils/cn";
 import { invariant } from "@/utils/invariant";
@@ -45,6 +53,7 @@ export const ConsoleOutput = (props: Props) => {
 const ConsoleOutputInternal = (props: Props): React.ReactNode => {
   const ref = React.useRef<HTMLDivElement>(null);
   const { wrapText, setWrapText } = useWrapText();
+  const [isExpanded, setIsExpanded] = useExpandedConsoleOutput(props.cellId);
   const {
     consoleOutputs,
     stale,
@@ -72,6 +81,9 @@ const ConsoleOutputInternal = (props: Props): React.ReactNode => {
   // Enable Ctrl/Cmd-A to select all content within the console output
   const selectAllProps = useSelectAllContent(hasOutputs);
 
+  // Detect overflow on resize
+  const isOverflowing = useOverflowDetection(ref, hasOutputs);
+
   // Keep scroll at the bottom if it is within 120px of the bottom,
   // so when we add new content, it will lock to the bottom
   //
@@ -121,7 +133,7 @@ const ConsoleOutputInternal = (props: Props): React.ReactNode => {
   return (
     <div className="relative group">
       {hasOutputs && (
-        <div className="absolute top-1 right-5 z-10 opacity-0 group-hover:opacity-100 flex gap-1">
+        <div className="absolute top-1 right-4 z-10 opacity-0 group-hover:opacity-100 flex items-center gap-1 print:hidden">
           <CopyClipboardIcon
             tooltip="Copy console output"
             value={getOutputString}
@@ -139,6 +151,25 @@ const ConsoleOutputInternal = (props: Props): React.ReactNode => {
               </ToggleButton>
             </span>
           </Tooltip>
+          {(isOverflowing || isExpanded) && (
+            <Button
+              aria-label={isExpanded ? "Collapse output" : "Expand output"}
+              className="p-0 mb-px"
+              onClick={() => setIsExpanded(!isExpanded)}
+              size="xs"
+              variant={null}
+            >
+              {isExpanded ? (
+                <Tooltip content="Collapse output">
+                  <ChevronsDownUpIcon className="h-4 w-4" />
+                </Tooltip>
+              ) : (
+                <Tooltip content="Expand output">
+                  <ChevronsUpDownIcon className="h-4 w-4 " />
+                </Tooltip>
+              )}
+            </Button>
+          )}
         </div>
       )}
       <div
@@ -154,6 +185,7 @@ const ConsoleOutputInternal = (props: Props): React.ReactNode => {
           hasOutputs ? "p-5" : "p-3",
           className,
         )}
+        style={isExpanded ? { maxHeight: "none" } : undefined}
       >
         {reversedOutputs.map((output, idx) => {
           if (output.channel === "pdb") {

package/src/components/editor/output/console/__tests__/ConsoleOutput.test.tsx

@@ -7,6 +7,19 @@ import type { CellId } from "@/core/cells/ids";
 import type { OutputMessage } from "@/core/kernel/messages";
 import { ConsoleOutput } from "../ConsoleOutput";
 
+// Mock ResizeObserver for tests
+global.ResizeObserver = class ResizeObserver {
+  observe() {
+    // noop
+  }
+  unobserve() {
+    // noop
+  }
+  disconnect() {
+    // noop
+  }
+};
+
 describe("ConsoleOutput integration", () => {
   const createOutput = (data: string, channel = "stdout"): OutputMessage => ({
     channel: channel as "stdout" | "stderr",