@marimo-team/frontend 0.20.1 → 0.20.3-dev76

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",

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

@@ -0,0 +1,173 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import type React from "react";
+import { useId } from "react";
+
+const MarimoLetterPaths = ({ stroke }: { stroke: string }) => {
+  return (
+    <g
+      // Center the original SVG: 1. Move to origin, 2. Scale to fit, 3. Shift to center of viewBox.
+      transform="translate(12 12) scale(0.115) translate(-433 -679)"
+      // The 'stroke' prop controls the color of the 'm' letter.
+      fill={stroke}
+      stroke="none"
+    >
+      {/* extracted from 'docs/_static/marimo-logotype-thick.svg' */}
+      <path d="m 388.08594,708.44141 h 23.32422 v -33.30079 c 0,-4.83203 2.625,-7.03906 6.30078,-7.03906 3.88672,0 6.19922,2.20703 6.19922,7.03906 v 33.30079 h 23.32031 v -33.30079 c 0,-4.83203 2.51953,-7.03906 6.30469,-7.03906 3.99218,0 6.30078,2.20703 6.30078,7.03906 v 33.30079 h 23.42578 V 670.625 c 0,-17.33594 -9.13672,-23.11328 -20.48438,-23.11328 -9.875,0 -15.96875,5.67578 -17.4375,10.92578 H 444.5 c -3.57422,-8.19141 -8.82422,-10.92578 -16.59766,-10.92578 -8.30078,0 -14.18359,4.9375 -15.65234,9.98047 h -0.83984 v -8.40235 h -23.32422 z" />
+    </g>
+  );
+};
+
+const MarimoCirclePaths = ({
+  fill,
+  stroke,
+  strokeWidth,
+}: {
+  fill?: string;
+  stroke: string;
+  strokeWidth: number | string;
+}) => {
+  return (
+    <>
+      {/* If provided, the 'fill' prop controls the inner fill color of the circular logo. */}
+      {fill && <circle fill={fill} stroke="none" cx="12" cy="12" r="10.3" />}
+      <g
+        // Center the original SVG: 1. Move to origin, 2. Scale to fit, 3. Shift to center of viewBox.
+        transform="translate(12 12) scale(0.094) translate(-600 -485)"
+        // The 'stroke' prop controls the fill and stroke color of the circular logo.
+        fill={stroke}
+        stroke={stroke}
+        // Adjusted by 1.5x for visual balance with other unscaled strokes.
+        strokeWidth={Number(strokeWidth) * 1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        {/* extracted from 'docs/_static/marimo-logotype-thick.svg' */}
+        <path d="m 517.37109,413.55859 c 1.51172,-1.78125 3.1875,-4.15625 2.10547,-6.26172 6.04688,-3.5625 11.39063,-8.26171 15.76172,-13.76562 -2.375,1.89062 -4.96484,3.40234 -7.71875,4.58984 20.67578,-20.40625 51.76953,-29.6914 80.32422,-23.96875 -22.99609,-0.86328 -46.42188,5.23438 -65.42578,18.19141 -19.05469,12.90234 -33.51953,32.71094 -39.07813,55.05859 8.41797,-24.45312 26.17969,-45.55859 48.85157,-57.97265 -1.78125,1.83593 -3.56641,3.72265 -5.39844,5.55859 8.63672,-3.5625 16.46094,-8.90625 25.04687,-12.63281 25.20703,-11.01172 55.54297,-6.85547 79.02344,7.5039 23.48047,14.35938 40.37891,37.89454 50.20313,63.58985 4.3164,11.22656 7.33984,23.69531 3.50781,35.08594 -0.86328,-14.84375 -5.72266,-29.14844 -12.03906,-42.58985 -10.47266,-22.40234 -25.47657,-43.39844 -46.58204,-56.24609 -21.10546,-12.79297 -49.01562,-16.19531 -70.60546,-4.15625 11.0664,-1.1875 22.23828,-1.83594 33.19531,-0.26953 20.62109,2.91406 39.67578,13.71093 54.14062,28.66015 14.41407,15.00782 24.40235,33.95313 30.28516,53.8711 5.72266,19.48828 7.60937,40.97265 0.26953,59.97265 21.42969,-34.65625 17.86719,-82.91015 -8.3125,-114.05859 -10.95703,-13.00781 -25.15625,-22.99609 -40.48437,-30.22656 -17.70704,-8.3125 -37.14063,-13.11719 -56.67969,-12.57813 -19.53906,0.53906 -39.08203,6.64063 -54.67969,18.40625 12.95313,-11.44531 29.84766,-17.92187 47.01563,-19.70312 17.21875,-1.72657 34.65234,1.08203 51.01171,6.58593 34.00391,11.55079 64.98829,37.03125 74.97657,71.52344 2.53515,8.85156 3.66797,18.02735 4.69531,27.20703 0.86328,7.9336 1.56641,15.86719 1.40234,23.85547 -0.7539,39.46094 -25.96484,78.00391 -62.72265,92.41406 -10.41797,4.05079 -21.42969,6.26172 -32.4961,7.82813 -17.70703,2.48047 -36.05859,3.23828 -53.11718,-2.05078 -8.79688,-2.75391 -17.00391,-7.01953 -24.61329,-12.25391 -31.52343,-21.59375 -51.4414,-59.21484 -51.4414,-97.43359 0,-6.80078 0.59375,-13.54688 1.51172,-20.24219 0.80859,-6.15234 1.88672,-12.25391 3.66797,-18.19141 2.69921,-8.74609 6.91015,-17.0039 12.47265,-24.28906 0.96875,-0.59375 1.94141,-1.24219 2.85938,-1.89062 -12.79297,27.04297 -20.40625,59 -8.69141,86.58203 -4.21094,-17.97266 -4.48047,-36.8125 -0.75391,-54.84375 1.1875,-0.42969 2.375,-0.91406 3.50782,-1.40235 0.0547,-1.1875 0.10547,-2.32031 0.16015,-3.50781 -0.86328,0.97266 -1.67187,1.94141 -2.53515,2.85938 1.99609,-14.30469 8.14843,-27.85157 17.3789,-38.8086 m 8.69141,-0.70312 c 3.34766,-2.26563 6.69531,-4.53516 10.04297,-6.80078 -2.10547,4.26562 -5.99219,7.60937 -10.52735,9.12109 -21.05078,21.75391 -27.53125,54.19531 -25.04687,84.31641 0.97266,11.39062 3.29297,23.21093 10.63281,31.95703 -5.125,-21.05469 -5.39844,-43.29297 -0.69922,-64.45313 0.91797,-0.0547 1.23828,1.13282 1.23828,2.05078 0.37891,14.19922 -2.05078,28.39454 -1.02343,42.58985 1.02343,14.14453 6.3164,29.09765 18.1914,36.8164 9.28516,6.04297 18.51563,12.08985 27.7461,18.13672 -21.59375,-6.91015 -40.4336,-21.91797 -52.08985,-41.34765 3.12891,8.47265 7.5,16.51562 12.89844,23.75 -0.69922,-1.94532 -1.34766,-3.94141 -2.05078,-5.9375 5.45312,5.1289 10.95703,10.14843 16.41016,15.22265 3.99609,3.72266 10.25781,7.5 14.35937,3.9375 0.64844,1.35157 -0.53906,3.02344 -1.99609,3.40235 -1.46094,0.43359 -3.02344,0 -4.48047,-0.4336 6.53125,4.69922 13.33203,9.01563 20.34765,12.95703 -1.02343,0.16016 -1.34765,1.67188 -0.69921,2.53516 0.64453,0.86719 1.72656,1.08203 2.75,1.35156 25.75,5.5586 53.17187,3.50782 77.78515,-5.99218 -21.16015,4.96484 -43.72265,6.10156 -64.23437,-1.07813 -17.32813,-6.04687 -32.4961,-17.97656 -42.42969,-33.35937 -3.18359,-4.96875 -5.82813,-10.20313 -8.25781,-15.54688 -7.82813,-17.59766 -12.79297,-36.8125 -11.39063,-56.03125 1.40625,-19.21484 9.82422,-38.37891 24.94141,-50.25391 1.5625,-1.24218 3.50781,-2.42968 5.44922,-1.94531 -14.89844,10.79688 -23.75,28.66406 -26.07032,46.91016 -2.32031,18.29687 1.45704,36.86719 8.09766,54.03125 4.75,12.14844 11.0625,23.91406 19.75391,33.6289 3.72656,4.15625 7.9375,7.9375 12.73828,10.79688 8.80078,5.28906 19.21875,7.28906 29.42187,8.58203 13.8711,1.78125 27.85157,2.53906 41.83203,2.21484 -17.65234,4.15625 -36.11328,1.1875 -53.98046,-1.78125 30.33984,11.39063 65.91015,4.42579 91.98437,-14.73828 5.17969,-3.83203 10.09375,-8.09375 14.03125,-13.22265 6.04688,-7.88282 9.66406,-17.48828 11.5,-27.26172 4.75,-25.47656 -2.05078,-52.08985 -14.41406,-74.92188 -8.58203,-15.87109 -19.97266,-30.55078 -34.97656,-40.53906 -14.03516,-9.28516 -30.71485,-14.19531 -47.50391,-15.11328 -25.80078,-1.51172 -53.11328,7.01562 -70.28125,26.44922 M 576.75,588.17969 c 11.60547,2.91406 23.32031,5.01953 35.19531,6.42578 -14.57422,3.34375 -29.58203,-1.78125 -43.66797,-6.80078 -8.3164,-2.91797 -16.73437,-5.94141 -24.45312,-10.25782 -18.67969,-10.36328 -32.71485,-28.125 -40.86328,-47.8789 -1.40235,-3.50781 -2.69922,-7.01953 -3.77735,-10.58203 -0.10937,-0.42969 -0.43359,0.59375 0,0.3789 0.42969,-0.16015 0.375,-0.80859 0.16016,-1.24218 -4.85938,-11.71094 -7.82813,-24.28907 -8.74609,-36.92188 -0.91797,19.10938 3.83203,38.32422 12.46875,55.4375 9.39453,18.62109 23.48437,34.98047 41.1875,46.04297 17.65234,11.06641 38.91796,16.67969 59.64843,14.68359 29.14844,-2.85937 54.73438,-19.86328 78.21485,-37.30078 -10.36328,13.71094 -26.07032,22.1875 -41.34766,30.17578 26.39453,-7.39453 47.55469,-28.28515 60.29688,-52.57422 -6.31641,10.79297 -16.19532,19.26954 -26.9375,25.63672 -10.79688,6.3711 -22.61719,10.79688 -34.4375,15.0625 -5.1836,1.89063 -10.41797,3.72266 -15.76172,5.23438 -15.27735,4.375 -31.36328,5.88672 -47.17969,4.48047 m 107.95703,-36.48828 c 2.69922,-2.53907 5.34766,-5.12891 7.50391,-8.04297 3.40234,-4.69532 5.66797,-10.14844 7.82812,-15.54688 2.91406,-7.33984 5.88281,-14.73828 6.64063,-22.61719 -1.40625,1.24219 -1.89063,3.07813 -2.42969,4.85938 -7.17969,24.88281 -24.9375,46.58203 -47.98828,58.45703 10.85156,-2.42969 20.1875,-9.5 28.44531,-17.10937 m -131.92187,26.44921 c 1.13281,0.26954 2.53515,0.75391 2.58984,1.89063 0.42969,-0.75781 1.72656,-0.75781 2.21094,0 0.21875,-0.0547 0.0547,-0.43359 -0.21485,-0.54297 -1.61718,-0.86328 -3.23828,-1.72656 -4.80468,-2.58984 -6.53125,-3.50782 -12.52344,-7.87891 -17.86719,-12.95313 -0.64844,1.40235 -0.16016,3.1836 1.08203,4.04688 2.375,1.72656 4.75,3.45312 7.125,5.18359 2.85937,2.375 6.26172,4.10156 9.87891,4.96484 m 155.89062,-81.61718 c -0.21484,3.99609 -0.43359,8.04297 -0.70312,12.03906 -0.0508,0.53906 -0.0508,1.07812 -0.0508,1.61719 -0.0547,0.97265 -0.10937,1.94531 -0.21875,2.86328 -0.0547,1.1875 -0.10546,2.26562 -0.10546,3.45312 2.26562,-9.17578 3.07421,-18.78515 2.375,-28.17578 -0.26954,-0.10937 -0.54297,-0.26953 -0.75782,-0.43359 -0.16015,2.85937 -0.3789,5.72265 -0.53906,8.63672 m -209.8164,-59.16016 c -0.3789,0.69922 -0.70312,1.40234 -1.02734,2.10547 0.37891,0.48437 1.07813,-0.10938 1.24219,-0.70313 0.16015,-0.53906 0.32422,-1.29687 0.91797,-1.34765 -0.26953,-0.27344 -0.53907,-0.54297 -0.8086,-0.8125 -0.10937,0.21875 -0.21875,0.53906 -0.10937,0.75781 m 39.02734,-44.80469 c 0.53906,-0.42968 1.07813,-0.86328 1.61719,-1.34765 -0.91797,-0.37891 -2.10547,0.10547 -2.48047,1.07812 0.26953,0.10938 0.53906,0.21485 0.86328,0.26953 m 1.67188,-2.53515 c 1.1875,0.26953 2.53906,-0.0547 3.50781,-0.86328 -1.23828,-0.0547 -2.48047,0.21484 -3.50781,0.86328 m -42.96485,54.78906 c -0.0547,-0.26953 -0.10937,-0.53906 -0.10937,-0.75781 -1.02735,0.3789 -1.51172,1.78125 -0.91797,2.69922 0.21484,-0.69922 0.53906,-1.34766 1.02734,-1.94141 m -6.10156,27.52734 c -0.26953,0.37891 -0.0547,1.02735 0.43359,1.08203 0.26954,-0.86328 0.21485,-1.78125 -0.0547,-2.69921 -0.53907,0.26953 -0.70313,1.02343 -0.37891,1.51171" />
+        <path d="m 527.08984,398.39062 c 0.10547,0.16016 0.21485,0.375 0.32422,0.53907 -0.48828,0.69922 -1.40625,1.02343 -2.21484,0.80859 0.43359,-0.59375 1.08203,-1.02344 1.78125,-1.1875" />
+        <path d="m 522.82422,401.84375 c 0.75781,-0.26953 1.5664,-0.43359 2.375,-0.37891 -0.16016,1.1875 -2.16016,1.51172 -2.64453,0.37891" />
+        <path d="m 520.125,399.35937 c 0.48828,-0.7539 1.40234,-1.29296 2.375,-1.1875 0.21484,0.54297 0.0547,1.1875 -0.37891,1.56641 -0.7539,0.10938 -1.67187,0.21484 -2.21093,-0.37891" />
+        <path d="m 671.42969,402.92187 c 0.32422,-0.0508 0.64843,0.26954 0.59375,0.59375 -0.0547,0.32422 -0.42969,0.54297 -0.75391,0.4336 -0.48828,-0.53906 -0.97266,-1.13281 -1.45703,-1.72656 0.53906,-0.4336 1.50781,-0.0547 1.61719,0.59375" />
+        <path d="m 524.98437,394.93359 c 0.37891,-0.42968 1.13282,-0.42968 1.56641,-0.0547 -0.70312,0.70312 -1.62109,1.1875 -2.59375,1.51171 -0.10547,-0.59375 0.43359,-1.29296 1.02734,-1.24218" />
+        <path d="m 516.13281,445.13672 c 0.48438,-0.70313 1.78125,-0.4336 1.94141,0.42969 -0.64844,-0.10547 -1.34766,0.10937 -1.78125,0.59375 -0.26953,0.10937 -0.70313,-0.10547 -0.70313,-0.42969 -0.0508,-0.26953 0.27344,-0.59375 0.59375,-0.54297" />
+        <path d="m 547.00781,410.58984 c 0.26953,-0.10937 0.64844,-0.21875 0.91797,-0.10937 0.32422,0.10937 0.48438,0.59375 0.26953,0.80859 -1.02734,0.64844 -2.21484,1.02735 -3.40234,1.08203 0.54297,-0.75781 1.35156,-1.35156 2.21484,-1.78125" />
+        <path d="m 562.92969,579.27344 c 0.54297,0.3789 1.13672,0.75781 1.67578,1.13281 -1.1875,0.48828 -2.58985,0.21875 -3.5625,-0.64453 -0.21485,-0.37891 0.21484,-0.91797 0.59375,-0.91797 0.48437,-0.0547 0.91797,0.21484 1.29297,0.42969" />
+        <path d="m 538.26172,405.62109 c -0.26953,-0.80859 -0.0547,-1.78125 0.59375,-2.375 0.43359,-0.10547 0.86328,-0.42968 1.02734,-0.91797 0.69922,0.26954 1.34766,0.54297 2.05078,0.8125 -1.1875,0.8086 -2.42968,1.61719 -3.67187,2.48047" />
+        <path d="m 511.92187,463.59766 c 0,-0.32422 0,-0.64844 0,-0.97266 0.53907,-0.26953 1.13282,-0.26953 1.61719,-0.0547 -0.96875,1.02735 -1.51172,2.42969 -1.40234,3.83203 -0.59375,-0.42968 -1.24219,-0.91797 -1.89063,-1.34765 0.54297,-0.4336 1.13672,-0.91797 1.73047,-1.40625" />
+        <path d="m 508.35937,415.93359 c 0.21485,-1.67578 1.1875,-3.1875 2.53516,-4.21093 0.37891,-0.26954 0.97266,-0.4336 1.1875,-0.0547 -1.1875,1.1875 -2.16016,2.53515 -2.85937,4.04687 -0.16407,0.27344 -0.59375,0.4336 -0.86329,0.21875" />
+        <path d="m 513.91797,449.39844 c 1.07812,-0.8086 2.10547,-1.61719 3.18359,-2.42969 -0.26953,1.02734 -0.53906,1.94531 -0.80859,2.96875 -0.37891,0.21875 -0.64844,0.59766 -1.02344,0.8125 -0.37891,0.21484 -0.91797,0.26953 -1.1875,-0.10938 -0.21875,-0.3789 0.375,-0.91796 0.59375,-0.53906 -0.21875,-0.21484 -0.48828,-0.43359 -0.75781,-0.70312" />
+        <path d="m 555.05078,407.56641 c -0.10937,0.26953 -0.21484,0.53906 -0.10937,0.86328 -0.86329,0.16015 -1.67188,0.32422 -2.42969,0.48437 -0.10547,0.32422 -0.21485,0.64844 -0.32031,0.97266 -0.64844,-0.0547 -1.29688,-0.0547 -1.89063,-0.0547 -0.53906,-0.26953 0,-1.02344 0.53906,-1.29297 1.07813,-0.54297 2.21485,-0.86719 3.40235,-1.02734 -0.16407,-0.26953 -0.32422,-0.48438 -0.48828,-0.75391 0.86328,-0.70312 1.89062,-1.1875 3.02343,-1.51172 0.21485,0.375 0.26953,0.8086 0.16407,1.23828 -0.37891,0.16407 -0.75782,0.21875 -1.13672,0.10938 0.0547,0.26953 0.10937,0.53906 0.16406,0.86328 -0.37891,0.10938 -0.64844,0.16406 -0.91797,0.10938" />
+        <path d="m 512.83984,412.64062 c 0.42969,-0.26953 1.02344,-0.3789 1.51172,-0.26953 -0.21875,-0.26953 -0.3789,-0.54297 -0.54297,-0.8125 0.54297,-0.10547 1.08203,-0.21484 1.67578,-0.26953 0.21485,-0.53906 0.21485,-1.1875 0,-1.72656 0.59375,-0.0547 1.24219,0.0547 1.78125,0.26953 0.16016,0.21484 0.21485,0.53906 0.16016,0.80859 -0.26953,0.10938 -0.59375,0.21875 -0.91797,0.32422 -0.10547,0.54297 -0.26953,1.08203 -0.375,1.6211 -0.26953,0.16015 -0.70312,0.21484 -1.02734,0.10937 -0.48438,2.91406 -3.67188,4.58594 -4.80469,7.28516 -0.37891,0.91797 -0.75391,2.10547 -1.72656,2.10547 -0.26953,-0.32422 -0.21485,-0.91797 0.16015,-1.1875 -0.375,-0.10938 -0.69921,-0.21485 -1.02343,-0.32422 -0.0547,-0.59375 0.91797,-0.42969 1.40234,-0.0547 0.43359,-0.375 0.0547,-1.24219 -0.48437,-1.24219 0.59375,-0.48437 0.97265,-1.23828 1.07812,-1.99609 0.59375,0.0547 1.1875,-0.16016 1.56641,-0.59375 -0.4336,0.10937 -0.91797,-0.21484 -1.02735,-0.69922 0.86328,0.16016 1.73047,-0.64844 1.67578,-1.51172 0.64844,-0.3789 1.29297,-0.75781 1.94141,-1.13672 -0.26953,-0.16015 -0.64844,-0.42968 -1.02344,-0.69922" />
+        <path d="m 682.38672,415.5 c -1.1875,-1.61719 -2.42969,-3.18359 -3.9375,-4.53516 -2.10547,-1.88672 -4.80469,-3.5625 -5.23828,-6.36718 12.6875,10.74218 22.45703,24.9375 27.90625,40.64453 0.48828,0.43359 -0.0508,1.40625 -0.64453,1.24218 -4.75,-10.95703 -10.85157,-21.42968 -18.08594,-30.98437" />
+        <path d="m 539.88281,406.97266 c 2.21094,-1.78125 4.75,-3.45704 5.66797,-6.15625 0.26953,-0.75391 1.02344,-1.34766 1.72656,-1.78125 10.90235,-6.85547 23.64453,-10.63282 36.48828,-10.84766 -6.42187,1.72656 -12.79296,3.39844 -19.21484,5.12891 -9.98437,2.64453 -17.32812,10.90234 -24.07422,18.78515 -5.83203,6.85547 -11.71484,13.71094 -17.54297,20.61719 -0.70312,1.89062 -1.35156,3.83203 -2.05078,5.72266 -0.26953,0.86328 -0.59375,1.72656 -1.35156,2.26562 -0.69922,0.54297 -1.88672,0.54297 -2.32031,-0.26953 2.58984,-4.53125 5.18359,-9.12109 7.82812,-13.71094 4.21094,-7.125 8.41797,-14.46484 14.84375,-19.7539" />
+      </g>
+    </>
+  );
+};
+
+export const MarimoIcon = ({
+  size = 24,
+  width,
+  height,
+  fill,
+  stroke,
+  strokeWidth = 2,
+  viewBox = "0 0 24 24",
+  ...props
+}: React.SVGProps<SVGSVGElement> & {
+  size?: number | string;
+}) => {
+  return (
+    <svg
+      width={width ?? size}
+      height={height ?? size}
+      viewBox={viewBox}
+      {...props}
+    >
+      <title>marimo icon</title>
+      <MarimoCirclePaths
+        fill={fill}
+        stroke={stroke ?? "currentColor"}
+        strokeWidth={strokeWidth}
+      />
+      <MarimoLetterPaths stroke={stroke ?? "currentColor"} />
+    </svg>
+  );
+};
+
+const MarimoMultiIcon = ({
+  size = 24,
+  width,
+  height,
+  fill,
+  stroke,
+  strokeWidth = 2,
+  maskCenterX,
+  maskCenterY,
+  maskRadius,
+  children,
+  viewBox = "0 0 24 24",
+  ...props
+}: React.SVGProps<SVGSVGElement> & {
+  size?: number | string;
+  maskCenterX: number | string;
+  maskCenterY: number | string;
+  maskRadius: number | string;
+}) => {
+  const maskId = useId();
+  return (
+    <svg
+      width={width ?? size}
+      height={height ?? size}
+      viewBox={viewBox}
+      {...props}
+    >
+      <title>marimo multi icon</title>
+      <defs>
+        <mask id={maskId}>
+          <rect width="100%" height="100%" fill="white" />
+          <circle
+            cx={maskCenterX}
+            cy={maskCenterY}
+            r={maskRadius}
+            fill="black"
+            stroke="none"
+          />
+        </mask>
+      </defs>
+      <g mask={`url(#${maskId})`}>
+        <MarimoCirclePaths
+          fill={fill}
+          stroke={stroke ?? "currentColor"}
+          strokeWidth={strokeWidth}
+        />
+      </g>
+      {children}
+      <MarimoLetterPaths stroke={stroke ?? "currentColor"} />
+    </svg>
+  );
+};
+
+export const MarimoPlusIcon = ({
+  stroke,
+  strokeWidth = 2,
+  ...props
+}: React.SVGProps<SVGSVGElement> & { size?: number | string }) => {
+  return (
+    <MarimoMultiIcon
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      maskCenterX={19} // center x of plus symbol
+      maskCenterY={19} // center y of plus symbol
+      maskRadius={Number(strokeWidth) + 3} // size of plus symbol
+      {...props}
+    >
+      {/* plus symbol at lower right corner */}
+      <path
+        stroke={stroke ?? "currentColor"}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        d="M16 19h6M19 16v6"
+      />
+    </MarimoMultiIcon>
+  );
+};

package/src/components/markdown/markdown-renderer.tsx

@@ -25,22 +25,6 @@ interface CodeBlockProps {
   language: string | undefined;
 }
 
-const SUPPORTED_LANGUAGES = new Set([
-  "python",
-  "markdown",
-  "sql",
-  "json",
-  "yaml",
-  "toml",
-  "shell",
-  "javascript",
-  "typescript",
-  "jsx",
-  "tsx",
-  "css",
-  "html",
-]);
-
 function maybeTransform(
   language: string | undefined,
   code: string,
@@ -128,10 +112,9 @@ const CodeBlock = ({ code, language }: CodeBlockProps) => {
       <Suspense>
         <LazyAnyLanguageCodeMirror
           theme={theme === "dark" ? "dark" : "light"}
-          // Only show the language if it's supported
-          language={
-            language && SUPPORTED_LANGUAGES.has(language) ? language : undefined
-          }
+          language={language}
+          // Since this may be LLM generated, we don't want show errors for unsupported languages
+          hideUnsupportedLanguageErrors={true}
           className="cm border rounded overflow-hidden"
           extensions={extensions}
           value={value}

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

@@ -1,12 +1,12 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { Panel, PanelGroup } from "react-resizable-panels";
+import { MarimoIcon } from "@/components/icons/marimo-icons";
 import type { AppConfig } from "@/core/config/config-schema";
 import { Constants } from "@/core/constants";
 import { RunApp } from "@/core/run-app";
 import { isStaticNotebook } from "@/core/static/static-state";
 import { isWasm } from "@/core/wasm/utils";
-import marimoIcon from "../../assets/icon-32x32.png";
 import { ContextAwarePanel } from "../editor/chrome/panels/context-aware-panel/context-aware-panel";
 import { PanelsWrapper } from "../editor/chrome/wrapper/panels";
 import { StaticBanner } from "../static-html/static-banner";
@@ -41,7 +41,7 @@ const Watermark = () => {
         className="text-sm text-(--grass-11) font-bold tracking-wide transition-colors bg-(--grass-4) hover:bg-(--grass-5) border-t border-l border-(--grass-8) px-3 py-1 rounded-tl-md flex items-center gap-2"
       >
         <span>made with marimo</span>
-        <img src={marimoIcon} alt="marimo" className="h-4 w-auto" />
+        <MarimoIcon className="h-4 w-auto" />
       </a>
     </div>
   );

package/src/components/storage/components.tsx

@@ -0,0 +1,86 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import AwsIcon from "@marimo-team/llm-info/icons/aws.svg?inline";
+import AwsDarkIcon from "@marimo-team/llm-info/icons/aws-dark.svg?inline";
+import AzureIcon from "@marimo-team/llm-info/icons/azure.svg?inline";
+import CloudflareIcon from "@marimo-team/llm-info/icons/cloudflare.svg?inline";
+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,
+  GlobeIcon,
+  HardDriveIcon,
+  ImageIcon,
+} from "lucide-react";
+import GoogleCloudIcon from "@/components/databases/icons/google-cloud-storage.svg?inline";
+import type { KnownStorageProtocol } from "@/core/storage/types";
+import { useTheme } from "@/theme/useTheme";
+
+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 }>;
+
+const PROTOCOL_ICONS: Record<KnownStorageProtocol, IconEntry> = {
+  s3: { src: AwsIcon, dark: AwsDarkIcon },
+  coreweave: { src: CoreweaveIcon, dark: CoreweaveDarkIcon },
+  cloudflare: { src: CloudflareIcon },
+  azure: { src: AzureIcon },
+  gcs: { src: GoogleCloudIcon },
+  http: GlobeIcon,
+  file: HardDriveIcon,
+  "in-memory": DatabaseZapIcon,
+};
+
+export const ProtocolIcon: React.FC<{
+  protocol: KnownStorageProtocol | (string & {});
+}> = ({ protocol }) => {
+  const { theme } = useTheme();
+  const entry =
+    PROTOCOL_ICONS[protocol.toLowerCase() as KnownStorageProtocol] ??
+    HardDriveIcon;
+
+  if ("src" in entry) {
+    const src = theme === "dark" && entry.dark ? entry.dark : entry.src;
+    return <img src={src} alt={protocol} className="h-3.5 w-3.5" />;
+  }
+
+  const Icon = entry;
+  return <Icon className="h-3.5 w-3.5" />;
+};