@marimo-team/frontend 0.23.10-dev5 → 0.23.10-dev50

package/src/components/editor/connections/storage/__tests__/as-code.test.ts

@@ -43,7 +43,9 @@ describe("generateStorageCode", () => {
 
   describe("S3", () => {
     it("basic connection with all fields", () => {
-      expect(generateStorageCode(baseS3, "obstore")).toMatchSnapshot();
+      expect(
+        generateStorageCode(baseS3, { library: "obstore" }),
+      ).toMatchSnapshot();
     });
 
     it("minimal connection (bucket only)", () => {
@@ -51,7 +53,9 @@ describe("generateStorageCode", () => {
         type: "s3",
         bucket: "my-bucket",
       };
-      expect(generateStorageCode(conn, "obstore")).toMatchSnapshot();
+      expect(
+        generateStorageCode(conn, { library: "obstore" }),
+      ).toMatchSnapshot();
     });
 
     it("with custom endpoint", () => {
@@ -59,7 +63,9 @@ describe("generateStorageCode", () => {
         ...baseS3,
         endpoint_url: "https://minio.example.com:9000",
       };
-      expect(generateStorageCode(conn, "obstore")).toMatchSnapshot();
+      expect(
+        generateStorageCode(conn, { library: "obstore" }),
+      ).toMatchSnapshot();
     });
 
     it("with secrets", () => {
@@ -70,13 +76,17 @@ describe("generateStorageCode", () => {
         access_key_id: prefixSecret("AWS_ACCESS_KEY_ID"),
         secret_access_key: prefixSecret("AWS_SECRET_ACCESS_KEY"),
       };
-      expect(generateStorageCode(conn, "obstore")).toMatchSnapshot();
+      expect(
+        generateStorageCode(conn, { library: "obstore" }),
+      ).toMatchSnapshot();
     });
   });
 
   describe("GCS", () => {
     it("with service account key", () => {
-      expect(generateStorageCode(baseGCS, "obstore")).toMatchSnapshot();
+      expect(
+        generateStorageCode(baseGCS, { library: "obstore" }),
+      ).toMatchSnapshot();
     });
 
     it("without service account key (default credentials)", () => {
@@ -84,13 +94,17 @@ describe("generateStorageCode", () => {
         type: "gcs",
         bucket: "my-bucket",
       };
-      expect(generateStorageCode(conn, "obstore")).toMatchSnapshot();
+      expect(
+        generateStorageCode(conn, { library: "obstore" }),
+      ).toMatchSnapshot();
     });
   });
 
   describe("Azure", () => {
     it("basic connection with account key", () => {
-      expect(generateStorageCode(baseAzure, "obstore")).toMatchSnapshot();
+      expect(
+        generateStorageCode(baseAzure, { library: "obstore" }),
+      ).toMatchSnapshot();
     });
 
     it("without account key", () => {
@@ -99,7 +113,9 @@ describe("generateStorageCode", () => {
         container: "my-container",
         account_name: "storageaccount",
       };
-      expect(generateStorageCode(conn, "obstore")).toMatchSnapshot();
+      expect(
+        generateStorageCode(conn, { library: "obstore" }),
+      ).toMatchSnapshot();
     });
 
     it("with secrets", () => {
@@ -109,13 +125,17 @@ describe("generateStorageCode", () => {
         account_name: prefixSecret("AZURE_ACCOUNT"),
         account_key: prefixSecret("AZURE_KEY"),
       };
-      expect(generateStorageCode(conn, "obstore")).toMatchSnapshot();
+      expect(
+        generateStorageCode(conn, { library: "obstore" }),
+      ).toMatchSnapshot();
     });
   });
 
   describe("CoreWeave", () => {
     it("basic connection with all fields", () => {
-      expect(generateStorageCode(baseCoreWeave, "obstore")).toMatchSnapshot();
+      expect(
+        generateStorageCode(baseCoreWeave, { library: "obstore" }),
+      ).toMatchSnapshot();
     });
 
     it("minimal connection (bucket and region only)", () => {
@@ -124,7 +144,9 @@ describe("generateStorageCode", () => {
         bucket: "operator-bucket",
         region: "US-EAST-04A",
       };
-      expect(generateStorageCode(conn, "obstore")).toMatchSnapshot();
+      expect(
+        generateStorageCode(conn, { library: "obstore" }),
+      ).toMatchSnapshot();
     });
 
     it("with secrets", () => {
@@ -135,39 +157,52 @@ describe("generateStorageCode", () => {
         access_key_id: prefixSecret("COREWEAVE_OBJECT_STORAGE_KEY"),
         secret_access_key: prefixSecret("COREWEAVE_OBJECT_STORAGE_SECRET"),
       };
-      expect(generateStorageCode(conn, "obstore")).toMatchSnapshot();
+      expect(
+        generateStorageCode(conn, { library: "obstore" }),
+      ).toMatchSnapshot();
     });
   });
 
   describe("Google Drive", () => {
     it("with service account credentials", () => {
-      expect(generateStorageCode(baseGDrive, "fsspec")).toMatchSnapshot();
+      expect(
+        generateStorageCode(baseGDrive, { library: "fsspec" }),
+      ).toMatchSnapshot();
     });
 
-    it("with browser auth (no credentials)", () => {
+    it("with default auth (no credentials)", () => {
       const conn: StorageConnection = {
         type: "gdrive",
       };
-      expect(generateStorageCode(conn, "fsspec")).toMatchSnapshot();
+      expect(
+        generateStorageCode(conn, { library: "fsspec" }),
+      ).toMatchSnapshot();
+    });
+
+    it("with embedded auth (no credentials)", () => {
+      const conn: StorageConnection = {
+        type: "gdrive",
+      };
+      expect(
+        generateStorageCode(conn, { library: "fsspec", isEmbedded: true }),
+      ).toMatchSnapshot();
     });
   });
 
   describe("invalid cases", () => {
     it("throws for empty S3 bucket", () => {
       expect(() =>
-        generateStorageCode(
-          { type: "s3", bucket: "" } as StorageConnection,
-          "obstore",
-        ),
+        generateStorageCode({ type: "s3", bucket: "" } as StorageConnection, {
+          library: "obstore",
+        }),
       ).toThrow();
     });
 
     it("throws for empty GCS bucket", () => {
       expect(() =>
-        generateStorageCode(
-          { type: "gcs", bucket: "" } as StorageConnection,
-          "obstore",
-        ),
+        generateStorageCode({ type: "gcs", bucket: "" } as StorageConnection, {
+          library: "obstore",
+        }),
       ).toThrow();
     });
 
@@ -179,7 +214,7 @@ describe("generateStorageCode", () => {
             container: "",
             account_name: "acct",
           } as StorageConnection,
-          "obstore",
+          { library: "obstore" },
         ),
       ).toThrow();
     });
@@ -192,7 +227,7 @@ describe("generateStorageCode", () => {
             container: "my-container",
             account_name: "",
           } as StorageConnection,
-          "obstore",
+          { library: "obstore" },
         ),
       ).toThrow();
     });
@@ -205,7 +240,7 @@ describe("generateStorageCode", () => {
             bucket: "",
             region: "US-EAST-04A",
           } as StorageConnection,
-          "obstore",
+          { library: "obstore" },
         ),
       ).toThrow();
     });
@@ -218,7 +253,7 @@ describe("generateStorageCode", () => {
             bucket: "operator-bucket",
             region: "",
           } as StorageConnection,
-          "obstore",
+          { library: "obstore" },
         ),
       ).toThrow();
     });

package/src/components/editor/connections/storage/add-storage-form.tsx

@@ -5,6 +5,7 @@ import type { FieldValues } from "react-hook-form";
 import type { z } from "zod";
 import { ProtocolIcon } from "@/components/storage/components";
 import type { KnownStorageProtocol } from "@/core/storage/types";
+import { useIframeCapabilities } from "@/hooks/useIframeCapabilities";
 import { ConnectionForm, SelectorButton, SelectorGrid } from "../components";
 import {
   generateStorageCode,
@@ -108,6 +109,7 @@ export const AddStorageForm: React.FC<{
   onSubmit: () => void;
   header?: React.ReactNode;
 }> = ({ onSubmit, header }) => {
+  const { isEmbedded } = useIframeCapabilities();
   const [selectedSchema, setSelectedSchema] = useState<z.ZodType<
     StorageConnection,
     FieldValues
@@ -134,7 +136,9 @@ export const AddStorageForm: React.FC<{
       preferredLibrary={libs?.preferred ?? "obstore"}
       displayNames={StorageLibraryDisplayNames}
       libraryLabel="Preferred storage library"
-      generateCode={(values, library) => generateStorageCode(values, library)}
+      generateCode={(values, library) =>
+        generateStorageCode(values, { library, isEmbedded })
+      }
       onSubmit={onSubmit}
       onBack={() => setSelectedSchema(null)}
     />

package/src/components/editor/connections/storage/as-code.ts

@@ -7,6 +7,11 @@ import { type StorageConnection, StorageConnectionSchema } from "./schemas";
 
 export type StorageLibrary = "obstore" | "fsspec";
 
+export interface StorageCodeOptions {
+  library: StorageLibrary;
+  isEmbedded?: boolean;
+}
+
 export const StorageLibraryDisplayNames: Record<StorageLibrary, string> = {
   obstore: "obstore",
   fsspec: "fsspec",
@@ -161,8 +166,9 @@ function generateCoreWeaveCode(
 
 function generateGDriveCode(
   connection: Extract<StorageConnection, { type: "gdrive" }>,
-  secrets: SecretContainer,
+  options: { secrets: SecretContainer; isEmbedded?: boolean },
 ): { imports: Set<string>; code: string } {
+  const { secrets, isEmbedded = false } = options;
   const imports = new Set(["from gdrive_fsspec import GoogleDriveFileSystem"]);
 
   if (connection.credentials_json) {
@@ -178,15 +184,20 @@ function generateGDriveCode(
     return { imports, code };
   }
 
-  const code = dedent(`
-    fs = GoogleDriveFileSystem(token="browser", use_listings_cache=False)
-  `);
+  const code = isEmbedded
+    ? dedent(`
+        fs = GoogleDriveFileSystem(use_listings_cache=False, auth_kwargs={"use_local_webserver": False})
+        print("Google Drive connected! Important: Run this cell again to clear the console")
+      `)
+    : dedent(`
+        fs = GoogleDriveFileSystem(use_listings_cache=False)
+      `);
   return { imports, code };
 }
 
 export function generateStorageCode(
   connection: StorageConnection,
-  _library: StorageLibrary,
+  options: StorageCodeOptions,
 ): string {
   StorageConnectionSchema.parse(connection);
 
@@ -207,7 +218,10 @@ export function generateStorageCode(
       result = generateCoreWeaveCode(connection, secrets);
       break;
     case "gdrive":
-      result = generateGDriveCode(connection, secrets);
+      result = generateGDriveCode(connection, {
+        secrets,
+        isEmbedded: options.isEmbedded,
+      });
       break;
     default:
       assertNever(connection);

package/src/components/editor/documentation.css

@@ -51,6 +51,22 @@
     }
   }
 
+  a {
+    cursor: pointer;
+    text-decoration: inherit;
+
+    @apply text-link;
+  }
+
+  a:hover,
+  a:active {
+    text-decoration: underline;
+  }
+
+  a:visited {
+    @apply text-link-visited;
+  }
+
   code {
     @apply border px-1 rounded font-mono bg-[var(--slate-2)] text-sm mb-4 mt-2;
   }
@@ -137,3 +153,22 @@
     }
   }
 }
+
+/* Syntax highlighting for LSP hover code blocks (lezer classHighlighter tok-* classes) */
+.docs-documentation,
+.cm-tooltip .documentation {
+  .tok-keyword { color: light-dark(#708, #c678dd); font-weight: 500; }
+  .tok-string,
+  .tok-string2 { color: light-dark(#a11, #98c379); }
+  .tok-number { color: light-dark(#164, #d19a66); }
+  .tok-bool,
+  .tok-atom { color: light-dark(#219, #d19a66); }
+  .tok-comment { color: var(--cm-comment); }
+  .tok-className { color: light-dark(#00f, #61afef); }
+  .tok-typeName,
+  .tok-namespace { color: light-dark(#085, #56b6c2); }
+  .tok-operator { color: light-dark(#a2f, #56b6c2); }
+  .tok-propertyName { color: light-dark(#05a, #e5c07b); }
+  .tok-variableName { color: light-dark(#000, #abb2bf); }
+  .tok-punctuation { color: light-dark(#000, #abb2bf); }
+}

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

@@ -9,8 +9,6 @@ import {
   CopyMinusIcon,
   DownloadIcon,
   ExternalLinkIcon,
-  EyeIcon,
-  EyeOffIcon,
   FilePlus2Icon,
   FolderPlusIcon,
   ListTreeIcon,
@@ -43,6 +41,7 @@ import {
   MENU_ITEM_ICON_CLASS,
   RefreshIconButton,
   TreeChevron,
+  VisibilityToggleButton,
 } from "@/components/editor/file-tree/tree-actions";
 import { MarimoIcon, MarimoPlusIcon } from "@/components/icons/marimo-icons";
 import { Spinner } from "@/components/icons/spinner";
@@ -338,22 +337,13 @@ const Toolbar = ({
         data-testid="file-explorer-refresh-button"
         onClick={onRefresh}
       />
-      <Tooltip
-        content={showHiddenFiles ? "Hide hidden files" : "Show hidden files"}
-      >
-        <Button
-          data-testid="file-explorer-hidden-files-button"
-          onClick={onHidden}
-          variant="text"
-          size="xs"
-        >
-          {showHiddenFiles ? (
-            <EyeIcon size={16} className="text-primary" />
-          ) : (
-            <EyeOffIcon size={16} />
-          )}
-        </Button>
-      </Tooltip>
+      <VisibilityToggleButton
+        data-testid="file-explorer-hidden-files-button"
+        isVisible={showHiddenFiles}
+        onToggle={onHidden}
+        showTooltip="Show hidden files"
+        hideTooltip="Hide hidden files"
+      />
       <Tooltip content="Collapse all folders">
         <Button
           data-testid="file-explorer-collapse-button"

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

@@ -2,11 +2,13 @@
 
 import {
   ChevronRightIcon,
+  EyeIcon,
+  EyeOffIcon,
   MoreVerticalIcon,
   RefreshCwIcon,
 } from "lucide-react";
 import React, { useCallback, useState } from "react";
-import { Button } from "@/components/ui/button";
+import { Button, type ButtonProps } from "@/components/ui/button";
 import { Tooltip } from "@/components/ui/tooltip";
 import { cn } from "@/utils/cn";
 
@@ -73,6 +75,49 @@ export const RefreshIconButton: React.FC<{
   return <Tooltip content={tooltip}>{button}</Tooltip>;
 };
 
+/**
+ * Toggle button that switches between an eye (visible) and crossed-out eye
+ * (hidden) icon. Used to show/hide optional items in toolbars, e.g. hidden
+ * files in the file explorer or empty schemas in the data sources panel.
+ */
+export const VisibilityToggleButton: React.FC<{
+  /** Whether the optional items are currently visible. */
+  isVisible: boolean;
+  onToggle: () => void;
+  showTooltip: string;
+  hideTooltip: string;
+  size?: ButtonProps["size"];
+  className?: string;
+  iconClassName?: string;
+  "data-testid"?: string;
+}> = ({
+  isVisible,
+  onToggle,
+  showTooltip,
+  hideTooltip,
+  size = "xs",
+  className,
+  iconClassName,
+  "data-testid": dataTestId,
+}) => {
+  const Icon = isVisible ? EyeIcon : EyeOffIcon;
+  return (
+    <Tooltip content={isVisible ? hideTooltip : showTooltip}>
+      <Button
+        data-testid={dataTestId}
+        variant="text"
+        size={size}
+        className={className}
+        onClick={onToggle}
+      >
+        <Icon
+          className={cn("h-4 w-4", isVisible && "text-primary", iconClassName)}
+        />
+      </Button>
+    </Tooltip>
+  );
+};
+
 /**
  * Three-dot menu trigger that fades in on row hover.
  * Must be inside a `group` container.

package/src/components/editor/renderers/slides-layout/__tests__/plugin.test.ts

@@ -248,6 +248,26 @@ const BACKWARDS_COMPAT_SNAPSHOTS: BackwardsCompatCase[] = [
       ],
     },
   },
+  {
+    // `showCode` was added to SlideConfig. The validator must know about it (so
+    // it isn't silently stripped), the deserializer must carry it through, and
+    // serialize → deserialize must round-trip both values.
+    label: "showCode round-trips through validate + (de)serialize",
+    input: {
+      cells: [
+        { type: "slide", showCode: true },
+        { type: "fragment", showCode: false },
+      ],
+    },
+    expected: {
+      deck: {},
+      cellIds: ["a", "b"],
+      cellEntries: [
+        ["a", { type: "slide", showCode: true }],
+        ["b", { type: "fragment", showCode: false }],
+      ],
+    },
+  },
 ];
 
 describe("SlidesLayoutPlugin backwards compatibility", () => {

package/src/components/editor/renderers/slides-layout/types.ts

@@ -9,6 +9,7 @@ export type SlideType = z.infer<typeof SlideTypeSchema>;
 const SlideConfigSchema = z.looseObject({
   type: SlideTypeSchema.optional(),
   speakerNotes: z.string().optional(),
+  showCode: z.boolean().optional(),
 });
 export type SlideConfig = z.infer<typeof SlideConfigSchema>;
 

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

@@ -0,0 +1,43 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { render, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { MarkdownRenderer } from "../markdown-renderer";
+
+describe("MarkdownRenderer", () => {
+  // Regression test for https://github.com/marimo-team/marimo/issues/9847
+  it("preserves class names on raw HTML (e.g. marimo admonitions)", async () => {
+    const { container } = render(
+      <MarkdownRenderer
+        content={
+          '<div class="admonition error">' +
+          '<p class="admonition-title">Error</p>' +
+          "<p>Nope!</p>" +
+          "</div>"
+        }
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("Nope!")).toBeInTheDocument();
+    });
+
+    const admonition = container.querySelector(".admonition.error");
+    expect(admonition).toBeInTheDocument();
+    expect(container.querySelector(".admonition-title")).toBeInTheDocument();
+  });
+
+  it("strips unsafe tags while keeping class names", async () => {
+    const { container } = render(
+      <MarkdownRenderer
+        content={'<div class="safe"><script>alert(1)</script>hello</div>'}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("hello")).toBeInTheDocument();
+    });
+
+    expect(container.querySelector(".safe")).toBeInTheDocument();
+    expect(container.querySelector("script")).not.toBeInTheDocument();
+  });
+});

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

@@ -4,7 +4,12 @@ import { EditorView } from "@codemirror/view";
 import { useAtomValue } from "jotai";
 import { BetweenHorizontalStartIcon } from "lucide-react";
 import { memo, Suspense, useState } from "react";
-import { Streamdown, type StreamdownProps } from "streamdown";
+import rehypeSanitize, { defaultSchema } from "rehype-sanitize";
+import {
+  defaultRehypePlugins,
+  Streamdown,
+  type StreamdownProps,
+} from "streamdown";
 import { Button, type ButtonProps } from "@/components/ui/button";
 import { maybeAddMarimoImport } from "@/core/cells/add-missing-import";
 import { useCellActions } from "@/core/cells/cells";
@@ -148,6 +153,23 @@ const CopyButton: React.FC<ButtonProps> = ({ onClick, ...props }) => {
   );
 };
 
+// Allow `className` on every element; the default GitHub schema strips it,
+// which drops the styling on marimo HTML like `mo.md(...)` admonitions.
+const sanitizeSchema = {
+  ...defaultSchema,
+  attributes: {
+    ...defaultSchema.attributes,
+    "*": [...(defaultSchema.attributes?.["*"] ?? []), "className"],
+  },
+};
+
+// Keep Streamdown's other rehype plugins (raw, harden) so scripts and unsafe
+// URLs are still sanitized.
+const REHYPE_PLUGINS: StreamdownProps["rehypePlugins"] = Object.values({
+  ...defaultRehypePlugins,
+  sanitize: [rehypeSanitize, sanitizeSchema],
+});
+
 type Components = StreamdownProps["components"];
 
 const COMPONENTS: Components = {
@@ -187,6 +209,7 @@ export const MarkdownRenderer = memo(({ content }: { content: string }) => {
     <Streamdown
       components={COMPONENTS}
       plugins={plugins}
+      rehypePlugins={REHYPE_PLUGINS}
       className="mo-markdown-renderer"
     >
       {content}