@marimo-team/frontend 0.20.5-dev9 → 0.20.5-dev90

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

@@ -6,7 +6,7 @@ import {
   ChevronsUpDownIcon,
   WrapTextIcon,
 } from "lucide-react";
-import React, { useLayoutEffect } from "react";
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { ToggleButton } from "react-aria-components";
 import { DebuggerControls } from "@/components/debugger/debugger-code";
 import { CopyClipboardIcon } from "@/components/icons/copy-icon";
@@ -33,6 +33,52 @@ import { useWrapText } from "../useWrapText";
 import { processOutput } from "./process-output";
 import { RenderTextWithLinks } from "./text-rendering";
 
+/**
+ * Delay in ms before clearing console outputs.
+ * This prevents flickering when a cell re-runs and outputs are briefly cleared
+ * before new outputs arrive (e.g., plt.show() with a slider).
+ */
+export const CONSOLE_CLEAR_DEBOUNCE_MS = 200;
+
+/**
+ * Debounces the clearing of console outputs.
+ * - Non-empty updates are applied immediately.
+ * - Transitions to empty are delayed by CONSOLE_CLEAR_DEBOUNCE_MS,
+ *   giving new outputs a chance to arrive and replace the old ones
+ *   without a visible flicker.
+ */
+function useDebouncedConsoleOutputs<T>(outputs: T[]): T[] {
+  const [debouncedOutputs, setDebouncedOutputs] = useState(outputs);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Non-empty outputs: apply immediately and cancel any pending clear
+  if (outputs.length > 0 && debouncedOutputs !== outputs) {
+    if (timerRef.current !== null) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+    setDebouncedOutputs(outputs);
+  }
+
+  // Empty outputs: delay the clear so new outputs can arrive first
+  useEffect(() => {
+    if (outputs.length === 0 && timerRef.current === null) {
+      timerRef.current = setTimeout(() => {
+        timerRef.current = null;
+        setDebouncedOutputs([]);
+      }, CONSOLE_CLEAR_DEBOUNCE_MS);
+    }
+    return () => {
+      if (timerRef.current !== null) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+  }, [outputs]);
+
+  return debouncedOutputs;
+}
+
 interface Props {
   cellId: CellId;
   cellName: string;
@@ -63,7 +109,7 @@ const ConsoleOutputInternal = (props: Props): React.ReactNode => {
     setValue: setStdinValue,
   });
   const {
-    consoleOutputs,
+    consoleOutputs: rawConsoleOutputs,
     stale,
     cellName,
     cellId,
@@ -73,6 +119,9 @@ const ConsoleOutputInternal = (props: Props): React.ReactNode => {
     className,
   } = props;
 
+  // Debounce clearing to prevent flickering when cells re-run
+  const consoleOutputs = useDebouncedConsoleOutputs(rawConsoleOutputs);
+
   /* The debugger UI needs some work. For now just use the regular
   /* console output. */
   /* if (debuggerActive) {

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

@@ -1,25 +1,15 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { fireEvent, render, screen } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { SetupMocks } from "@/__mocks__/common";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import type { CellId } from "@/core/cells/ids";
 import type { WithResponse } from "@/core/cells/types";
 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
-  }
-};
+import { CONSOLE_CLEAR_DEBOUNCE_MS, ConsoleOutput } from "../ConsoleOutput";
+
+SetupMocks.resizeObserver();
 
 const renderWithProvider = (ui: React.ReactElement) => {
   return render(<TooltipProvider>{ui}</TooltipProvider>);
@@ -203,3 +193,94 @@ describe("ConsoleOutput pdb history", () => {
     expect(input).toHaveValue("");
   });
 });
+
+describe("ConsoleOutput debounced clearing", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  const createOutput = (
+    data: string,
+    channel = "stdout",
+  ): WithResponse<OutputMessage> => ({
+    channel: channel as "stdout" | "stderr",
+    mimetype: "text/plain",
+    data,
+    timestamp: 0,
+    response: undefined,
+  });
+
+  const defaultProps = {
+    cellId: "cell-1" as CellId,
+    cellName: "test_cell",
+    consoleOutputs: [] as WithResponse<OutputMessage>[],
+    stale: false,
+    debuggerActive: false,
+    onSubmitDebugger: vi.fn(),
+  };
+
+  it("should keep old outputs visible when cleared, then show new outputs immediately", () => {
+    const outputs1 = [createOutput("hello world")];
+
+    const { rerender } = renderWithProvider(
+      <ConsoleOutput {...defaultProps} consoleOutputs={outputs1} />,
+    );
+
+    // Old output is visible
+    expect(screen.getByText("hello world")).toBeInTheDocument();
+
+    // Clear outputs (simulates cell re-run)
+    rerender(
+      <TooltipProvider>
+        <ConsoleOutput {...defaultProps} consoleOutputs={[]} />
+      </TooltipProvider>,
+    );
+
+    // Old output should still be visible during debounce period
+    expect(screen.getByText("hello world")).toBeInTheDocument();
+
+    // New outputs arrive before debounce fires
+    const outputs2 = [createOutput("new output")];
+    rerender(
+      <TooltipProvider>
+        <ConsoleOutput {...defaultProps} consoleOutputs={outputs2} />
+      </TooltipProvider>,
+    );
+
+    // New output should be shown immediately
+    expect(screen.getByText("new output")).toBeInTheDocument();
+    expect(screen.queryByText("hello world")).not.toBeInTheDocument();
+  });
+
+  it("should clear outputs after debounce period if no new outputs arrive", () => {
+    const outputs1 = [createOutput("old output")];
+
+    const { rerender } = renderWithProvider(
+      <ConsoleOutput {...defaultProps} consoleOutputs={outputs1} />,
+    );
+
+    expect(screen.getByText("old output")).toBeInTheDocument();
+
+    // Clear outputs
+    rerender(
+      <TooltipProvider>
+        <ConsoleOutput {...defaultProps} consoleOutputs={[]} />
+      </TooltipProvider>,
+    );
+
+    // Still visible during debounce
+    expect(screen.getByText("old output")).toBeInTheDocument();
+
+    // Advance past debounce period
+    act(() => {
+      vi.advanceTimersByTime(CONSOLE_CLEAR_DEBOUNCE_MS + 1);
+    });
+
+    // Now the output should be cleared
+    expect(screen.queryByText("old output")).not.toBeInTheDocument();
+  });
+});

package/src/components/editor/package-alert.tsx

@@ -174,6 +174,7 @@ export const PackageAlert: React.FC = () => {
                     })}
                     versions={desiredPackageVersions}
                     clearPackageAlert={() => clearPackageAlert(packageAlert.id)}
+                    source={packageAlert.source}
                   />
 
                   {!isWasm() && (
@@ -323,11 +324,13 @@ const InstallPackagesButton = ({
   packages,
   versions,
   clearPackageAlert,
+  source,
 }: {
   manager: PackageManagerName;
   packages: string[];
   versions: Record<string, string>;
   clearPackageAlert: () => void;
+  source?: "kernel" | "server";
 }) => {
   const { sendInstallMissingPackages } = useRequestClient();
   return (
@@ -347,6 +350,7 @@ const InstallPackagesButton = ({
         await sendInstallMissingPackages({
           manager,
           versions: completePackages,
+          source,
         }).catch((error) => {
           Logger.error(error);
         });

package/src/components/icons/marimo-icons.tsx

@@ -81,9 +81,9 @@ export const MarimoIcon = ({
       width={width ?? size}
       height={height ?? size}
       viewBox={viewBox}
+      aria-hidden={true}
       {...props}
     >
-      <title>marimo icon</title>
       <MarimoCirclePaths
         fill={fill}
         stroke={stroke ?? "currentColor"}
@@ -119,9 +119,9 @@ const MarimoMultiIcon = ({
       width={width ?? size}
       height={height ?? size}
       viewBox={viewBox}
+      aria-hidden={true}
       {...props}
     >
-      <title>marimo multi icon</title>
       <defs>
         <mask id={maskId}>
           <rect width="100%" height="100%" fill="white" />

package/src/components/pages/home-page.tsx

@@ -23,6 +23,11 @@ import {
 } from "react-arborist";
 import { useLocale } from "react-aria";
 import { MarkdownIcon } from "@/components/editor/cell/code/icons";
+import {
+  FILE_ICON as FILE_TYPE_ICONS,
+  type FileIconType as FileType,
+  guessFileIconType as guessFileType,
+} from "@/components/editor/file-tree/file-icons";
 import { useImperativeModal } from "@/components/modal/ImperativeModal";
 import { AlertDialogDestructiveAction } from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
@@ -47,11 +52,6 @@ import { newNotebookURL } from "@/utils/urls";
 import { ConfigButton } from "../app-config/app-config-button";
 import { ErrorBoundary } from "../editor/boundary/ErrorBoundary";
 import { ShutdownButton } from "../editor/controls/shutdown-button";
-import {
-  FILE_TYPE_ICONS,
-  type FileType,
-  guessFileType,
-} from "../editor/file-tree/types";
 import {
   Header,
   OpenTutorialDropDown,

package/src/components/storage/__tests__/storage-snippets.test.ts

@@ -0,0 +1,253 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { describe, expect, it } from "vitest";
+import {
+  STORAGE_SNIPPETS,
+  type StorageSnippetContext,
+} from "../storage-snippets";
+
+const readSnippet = STORAGE_SNIPPETS.find((s) => s.id === "read-file")!;
+const downloadSnippet = STORAGE_SNIPPETS.find((s) => s.id === "download-file")!;
+
+function makeCtx(
+  overrides: Partial<StorageSnippetContext> = {},
+): StorageSnippetContext {
+  return {
+    variableName: "store",
+    protocol: "s3",
+    entry: {
+      path: "data/file.csv",
+      kind: "object",
+      size: 1024,
+      lastModified: null,
+    },
+    backendType: "obstore",
+    ...overrides,
+  };
+}
+
+describe("read-file snippet", () => {
+  it("obstore backend", () => {
+    expect(readSnippet.getCode(makeCtx())).toMatchInlineSnapshot(`
+      "_data = store.get("data/file.csv").bytes()
+      _data"
+    `);
+  });
+
+  it("fsspec backend", () => {
+    expect(
+      readSnippet.getCode(
+        makeCtx({ backendType: "fsspec", variableName: "fs" }),
+      ),
+    ).toMatchInlineSnapshot(`
+      "_data = fs.cat_file("data/file.csv")
+      _data"
+    `);
+  });
+
+  it("returns null for directories", () => {
+    expect(
+      readSnippet.getCode(
+        makeCtx({
+          entry: {
+            path: "data/",
+            kind: "directory",
+            size: 0,
+            lastModified: null,
+          },
+        }),
+      ),
+    ).toBeNull();
+  });
+
+  it("escapes double quotes in paths", () => {
+    expect(
+      readSnippet.getCode(
+        makeCtx({
+          entry: {
+            path: 'data/"file".csv',
+            kind: "object",
+            size: 100,
+            lastModified: null,
+          },
+        }),
+      ),
+    ).toMatchInlineSnapshot(`
+      "_data = store.get("data/\\"file\\".csv").bytes()
+      _data"
+    `);
+  });
+
+  it("escapes backslashes in paths", () => {
+    expect(
+      readSnippet.getCode(
+        makeCtx({
+          entry: {
+            path: "data\\file.csv",
+            kind: "object",
+            size: 100,
+            lastModified: null,
+          },
+        }),
+      ),
+    ).toMatchInlineSnapshot(`
+      "_data = store.get("data\\\\file.csv").bytes()
+      _data"
+    `);
+  });
+
+  it("escapes newlines and tabs in paths", () => {
+    expect(
+      readSnippet.getCode(
+        makeCtx({
+          entry: {
+            path: "data/file\nname\there.csv",
+            kind: "object",
+            size: 100,
+            lastModified: null,
+          },
+        }),
+      ),
+    ).toMatchInlineSnapshot(`
+      "_data = store.get("data/file\\nname\\there.csv").bytes()
+      _data"
+    `);
+  });
+
+  it("escapes control characters in paths", () => {
+    expect(
+      readSnippet.getCode(
+        makeCtx({
+          entry: {
+            path: "data/\u0000\u001F.csv",
+            kind: "object",
+            size: 100,
+            lastModified: null,
+          },
+        }),
+      ),
+    ).toMatchInlineSnapshot(`
+      "_data = store.get("data/\\u0000\\u001f.csv").bytes()
+      _data"
+    `);
+  });
+});
+
+describe("download-file snippet", () => {
+  it("obstore s3 backend", () => {
+    expect(downloadSnippet.getCode(makeCtx())).toMatchInlineSnapshot(`
+      "from datetime import timedelta
+      from obstore import sign
+
+      signed_url = sign(
+          store, "GET", "data/file.csv",
+          expires_in=timedelta(hours=1),
+      )
+      signed_url"
+    `);
+  });
+
+  it("obstore gcs backend", () => {
+    expect(
+      downloadSnippet.getCode(makeCtx({ protocol: "gcs" })),
+    ).toMatchInlineSnapshot(`
+      "from datetime import timedelta
+      from obstore import sign
+
+      signed_url = sign(
+          store, "GET", "data/file.csv",
+          expires_in=timedelta(hours=1),
+      )
+      signed_url"
+    `);
+  });
+
+  it("obstore cloudflare backend", () => {
+    expect(
+      downloadSnippet.getCode(makeCtx({ protocol: "cloudflare" })),
+    ).toMatchInlineSnapshot(`
+      "from datetime import timedelta
+      from obstore import sign
+
+      signed_url = sign(
+          store, "GET", "data/file.csv",
+          expires_in=timedelta(hours=1),
+      )
+      signed_url"
+    `);
+  });
+
+  it("returns null for http obstore (not signable)", () => {
+    expect(downloadSnippet.getCode(makeCtx({ protocol: "http" }))).toBeNull();
+  });
+
+  it("returns null for file obstore (not signable)", () => {
+    expect(downloadSnippet.getCode(makeCtx({ protocol: "file" }))).toBeNull();
+  });
+
+  it("returns null for in-memory obstore (not signable)", () => {
+    expect(
+      downloadSnippet.getCode(makeCtx({ protocol: "in-memory" })),
+    ).toBeNull();
+  });
+
+  it("fsspec backend", () => {
+    expect(
+      downloadSnippet.getCode(
+        makeCtx({ backendType: "fsspec", variableName: "fs" }),
+      ),
+    ).toMatchInlineSnapshot(`"fs.get("data/file.csv", "file.csv")"`);
+  });
+
+  it("fsspec backend with nested path", () => {
+    expect(
+      downloadSnippet.getCode(
+        makeCtx({
+          backendType: "fsspec",
+          variableName: "fs",
+          entry: {
+            path: "nested/dir/report.parquet",
+            kind: "file",
+            size: 500,
+            lastModified: null,
+          },
+        }),
+      ),
+    ).toMatchInlineSnapshot(
+      `"fs.get("nested/dir/report.parquet", "report.parquet")"`,
+    );
+  });
+
+  it("returns null for directories", () => {
+    expect(
+      downloadSnippet.getCode(
+        makeCtx({
+          entry: {
+            path: "data/",
+            kind: "directory",
+            size: 0,
+            lastModified: null,
+          },
+        }),
+      ),
+    ).toBeNull();
+  });
+});
+
+describe("all snippets return null for directories", () => {
+  for (const snippet of STORAGE_SNIPPETS) {
+    it(`${snippet.id} returns null for directory entries`, () => {
+      expect(
+        snippet.getCode(
+          makeCtx({
+            entry: {
+              path: "some-dir/",
+              kind: "directory",
+              size: 0,
+              lastModified: null,
+            },
+          }),
+        ),
+      ).toBeNull();
+    });
+  }
+});

package/src/components/storage/components.tsx

@@ -8,15 +8,9 @@ import CoreweaveIcon from "@marimo-team/llm-info/icons/coreweave.svg?inline";
 import CoreweaveDarkIcon from "@marimo-team/llm-info/icons/coreweave-dark.svg?inline";
 import {
   DatabaseZapIcon,
-  FileCodeIcon,
-  FileIcon,
-  FileSpreadsheetIcon,
-  FileTextIcon,
-  FileVideoIcon,
   GithubIcon,
   GlobeIcon,
   HardDriveIcon,
-  ImageIcon,
 } from "lucide-react";
 import GoogleCloudIcon from "@/components/databases/icons/google-cloud-storage.svg?inline";
 import GoogleDriveIcon from "@/components/databases/icons/google-drive.svg?inline";
@@ -24,38 +18,6 @@ import type { KnownStorageProtocol } from "@/core/storage/types";
 import { useTheme } from "@/theme/useTheme";
 import { cn } from "@/utils/cn";
 
-export function renderFileIcon(name: string): React.ReactNode {
-  const ext = name.split(".").pop()?.toLowerCase();
-  switch (ext) {
-    case "png":
-    case "jpg":
-    case "jpeg":
-    case "gif":
-    case "svg":
-    case "webp":
-      return <ImageIcon className="h-3.5 w-3.5 text-purple-500" />;
-    case "csv":
-    case "parquet":
-    case "arrow":
-    case "xlsx":
-      return <FileSpreadsheetIcon className="h-3.5 w-3.5 text-green-500" />;
-    case "py":
-    case "js":
-    case "ts":
-    case "json":
-      return <FileCodeIcon className="h-3.5 w-3.5 text-blue-500" />;
-    case "mp4":
-    case "mpeg":
-      return <FileVideoIcon className="h-3.5 w-3.5 text-orange-500" />;
-    case "txt":
-    case "md":
-    case "log":
-      return <FileTextIcon className="h-3.5 w-3.5 text-muted-foreground" />;
-    default:
-      return <FileIcon className="h-3.5 w-3.5 text-muted-foreground" />;
-  }
-}
-
 type IconEntry =
   | { src: string; dark?: string }
   | React.ComponentType<{ className?: string }>;

package/src/components/storage/storage-file-viewer.tsx

@@ -5,6 +5,7 @@ import type React from "react";
 import { useCallback } from "react";
 import { useLocale } from "react-aria";
 import { FilePreviewHeader } from "@/components/editor/file-tree/file-header";
+import { renderFileIcon } from "@/components/editor/file-tree/file-icons";
 import {
   FileContentRenderer,
   isMediaMime,
@@ -18,7 +19,6 @@ import { formatBytes } from "@/utils/formatting";
 import { Logger } from "@/utils/Logger";
 import { CopyClipboardIcon } from "../icons/copy-icon";
 import { Button } from "../ui/button";
-import { renderFileIcon } from "./components";
 
 const MAX_MEDIA_PREVIEW_SIZE = 100 * 1024 * 1024; // 100 MB