@marimo-team/frontend 0.23.10-dev9 → 0.23.11-dev1

package/src/components/editor/chrome/wrapper/app-chrome.tsx

@@ -34,6 +34,26 @@ import { ErrorBoundary } from "../../boundary/ErrorBoundary";
 import { raf2 } from "../../navigation/focus-utils";
 import { ContextAwarePanel } from "../panels/context-aware-panel/context-aware-panel";
 import { PanelSectionProvider } from "../panels/panel-context";
+import { useTheme } from "@/theme/useTheme";
+import {
+  LazyAgentPanel,
+  LazyCachePanel,
+  LazyChatPanel,
+  LazyDependencyGraphPanel,
+  LazyDocumentationPanel,
+  LazyErrorsPanel,
+  LazyFileExplorerPanel,
+  LazyLogsPanel,
+  LazyOutlinePanel,
+  LazyPackagesPanel,
+  LazyScratchpadPanel,
+  LazySecretsPanel,
+  LazySessionPanel,
+  LazySnippetsPanel,
+  LazyTerminal,
+  LazyTracingPanel,
+  PANEL_PRELOADERS,
+} from "./lazy-panels";
 import { panelLayoutAtom, useChromeActions, useChromeState } from "../state";
 import {
   isPanelHidden,
@@ -50,33 +70,26 @@ import { useAiPanelTab } from "./useAiPanel";
 import { useDependencyPanelTab } from "./useDependencyPanelTab";
 import { handleDragging } from "./utils";
 
-const LazyTerminal = React.lazy(() => import("@/components/terminal/terminal"));
-const LazyChatPanel = React.lazy(() => import("@/components/chat/chat-panel"));
-const LazyAgentPanel = React.lazy(
-  () => import("@/components/chat/acp/agent-panel"),
-);
-const LazyDependencyGraphPanel = React.lazy(
-  () => import("@/components/editor/chrome/panels/dependency-graph-panel"),
-);
-const LazySessionPanel = React.lazy(() => import("../panels/session-panel"));
-const LazyDocumentationPanel = React.lazy(
-  () => import("../panels/documentation-panel"),
-);
-const LazyErrorsPanel = React.lazy(() => import("../panels/error-panel"));
-const LazyFileExplorerPanel = React.lazy(
-  () => import("../panels/file-explorer-panel"),
-);
-const LazyLogsPanel = React.lazy(() => import("../panels/logs-panel"));
-const LazyOutlinePanel = React.lazy(() => import("../panels/outline-panel"));
-const LazyPackagesPanel = React.lazy(() => import("../panels/packages-panel"));
-const LazyScratchpadPanel = React.lazy(
-  () => import("../panels/scratchpad-panel"),
-);
-const LazySecretsPanel = React.lazy(() => import("../panels/secrets-panel"));
-const LazySnippetsPanel = React.lazy(() => import("../panels/snippets-panel"));
-const LazyTracingPanel = React.lazy(() => import("../panels/tracing-panel"));
-const LazyCachePanel = React.lazy(() => import("../panels/cache-panel"));
-
+// Placeholder that matches the eventual xterm theme background so the
+// transition into the loaded terminal is seamless rather than a blank flash.
+const TerminalSkeleton: React.FC = () => {
+  const { theme } = useTheme();
+  const isDark = theme === "dark";
+  return (
+    <div
+      aria-label="Loading terminal"
+      role="status"
+      className="w-full h-full flex items-start p-3 font-mono text-xs select-none"
+      style={{
+        background: isDark ? "#0f172a" : "#ffffff",
+        color: isDark ? "#94a3b8" : "#64748b",
+      }}
+    >
+      <span className="opacity-70">Starting terminal</span>
+      <span className="ml-1 inline-block w-2 h-3.5 align-middle bg-current animate-pulse" />
+    </div>
+  );
+};
 export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
   const {
     isSidebarOpen,
@@ -96,6 +109,33 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
   const capabilities = useAtomValue(capabilitiesAtom);
   const aiEnabled = useAtomValue(aiEnabledAtom);
 
+  // On mount, idle-preload whichever panels the user had open at last unload,
+  // so the first interaction with the sidebar/dev panel doesn't hit a cold
+  // chunk fetch. Runs once.
+  // oxlint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => {
+    const preloadOpenPanels = () => {
+      if (isSidebarOpen && selectedPanel) {
+        PANEL_PRELOADERS[selectedPanel]?.();
+      }
+      if (isDeveloperPanelOpen && selectedDeveloperPanelTab) {
+        PANEL_PRELOADERS[selectedDeveloperPanelTab]?.();
+      }
+    };
+
+    const canIdle =
+      typeof window !== "undefined" &&
+      typeof window.requestIdleCallback === "function";
+    if (canIdle) {
+      const handle = window.requestIdleCallback(preloadOpenPanels, {
+        timeout: 2000,
+      });
+      return () => window.cancelIdleCallback(handle);
+    }
+    const handle = setTimeout(preloadOpenPanels, 300);
+    return () => clearTimeout(handle);
+  }, []);
+
   // Convert current developer panel items to PanelDescriptors
   // Filter out hidden panels (e.g., terminal when capability is not available)
   const devPanelItems = useMemo(() => {
@@ -256,32 +296,34 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
 
   const renderAiPanel = () => {
     if (agentsEnabled && aiPanelTab === "agents") {
-      return <LazyAgentPanel />;
+      return <LazyAgentPanel.Component />;
     }
-    return <LazyChatPanel />;
+    return <LazyChatPanel.Component />;
   };
 
   const SIDEBAR_PANELS: Record<PanelType, React.ReactNode> = {
-    files: <LazyFileExplorerPanel />,
-    variables: <LazySessionPanel />,
-    dependencies: <LazyDependencyGraphPanel />,
-    packages: <LazyPackagesPanel />,
-    outline: <LazyOutlinePanel />,
-    documentation: <LazyDocumentationPanel />,
-    snippets: <LazySnippetsPanel />,
+    files: <LazyFileExplorerPanel.Component />,
+    variables: <LazySessionPanel.Component />,
+    dependencies: <LazyDependencyGraphPanel.Component />,
+    packages: <LazyPackagesPanel.Component />,
+    outline: <LazyOutlinePanel.Component />,
+    documentation: <LazyDocumentationPanel.Component />,
+    snippets: <LazySnippetsPanel.Component />,
     ai: renderAiPanel(),
-    errors: <LazyErrorsPanel />,
-    scratchpad: <LazyScratchpadPanel />,
-    tracing: <LazyTracingPanel />,
-    secrets: <LazySecretsPanel />,
-    logs: <LazyLogsPanel />,
+    errors: <LazyErrorsPanel.Component />,
+    scratchpad: <LazyScratchpadPanel.Component />,
+    tracing: <LazyTracingPanel.Component />,
+    secrets: <LazySecretsPanel.Component />,
+    logs: <LazyLogsPanel.Component />,
     terminal: (
-      <LazyTerminal
-        visible={isSidebarOpen && selectedPanel === "terminal"}
-        onClose={() => setIsSidebarOpen(false)}
-      />
+      <Suspense fallback={<TerminalSkeleton />}>
+        <LazyTerminal.Component
+          visible={isSidebarOpen && selectedPanel === "terminal"}
+          onClose={() => setIsSidebarOpen(false)}
+        />
+      </Suspense>
     ),
-    cache: <LazyCachePanel />,
+    cache: <LazyCachePanel.Component />,
   };
 
   const helpPaneBody = (
@@ -414,12 +456,14 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
   const DEVELOPER_PANELS: Record<PanelType, React.ReactNode> = {
     ...SIDEBAR_PANELS,
     terminal: (
-      <LazyTerminal
-        visible={
-          isDeveloperPanelOpen && selectedDeveloperPanelTab === "terminal"
-        }
-        onClose={() => setIsDeveloperPanelOpen(false)}
-      />
+      <Suspense fallback={<TerminalSkeleton />}>
+        <LazyTerminal.Component
+          visible={
+            isDeveloperPanelOpen && selectedDeveloperPanelTab === "terminal"
+          }
+          onClose={() => setIsDeveloperPanelOpen(false)}
+        />
+      </Suspense>
     ),
   };
 
@@ -474,6 +518,7 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
             className="flex flex-row gap-1"
             minItems={0}
             onAction={(panel) => openApplication(panel.type)}
+            onItemPreloadHint={(panel) => PANEL_PRELOADERS[panel.type]?.()}
             renderItem={(panel) => (
               <div
                 className={cn(

package/src/components/editor/chrome/wrapper/lazy-panels.ts

@@ -0,0 +1,91 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { reactLazyWithPreload } from "@/utils/lazy";
+import { Logger } from "@/utils/Logger";
+import type { PanelType } from "../types";
+
+// Preloading is best-effort: a chunk-load failure here should not surface as
+// an unhandled rejection (the panel will retry the import when actually
+// rendered, where Suspense/ErrorBoundary handle the failure).
+const safePreload = (lazy: { preload: () => Promise<unknown> }) => (): void => {
+  void lazy.preload().catch((error) => {
+    Logger.debug("Failed to preload panel chunk", error);
+  });
+};
+
+// Centralized lazy panels. Using reactLazyWithPreload (instead of React.lazy)
+// gives each panel a .preload() method so the chunk can be fetched on intent
+// (hovering the sidebar icon or developer-panel tab) before the user clicks.
+
+export const LazyTerminal = reactLazyWithPreload(
+  () => import("@/components/terminal/terminal"),
+);
+export const LazyChatPanel = reactLazyWithPreload(
+  () => import("@/components/chat/chat-panel"),
+);
+export const LazyAgentPanel = reactLazyWithPreload(
+  () => import("@/components/chat/acp/agent-panel"),
+);
+export const LazyDependencyGraphPanel = reactLazyWithPreload(
+  () => import("../panels/dependency-graph-panel"),
+);
+export const LazySessionPanel = reactLazyWithPreload(
+  () => import("../panels/session-panel"),
+);
+export const LazyDocumentationPanel = reactLazyWithPreload(
+  () => import("../panels/documentation-panel"),
+);
+export const LazyErrorsPanel = reactLazyWithPreload(
+  () => import("../panels/error-panel"),
+);
+export const LazyFileExplorerPanel = reactLazyWithPreload(
+  () => import("../panels/file-explorer-panel"),
+);
+export const LazyLogsPanel = reactLazyWithPreload(
+  () => import("../panels/logs-panel"),
+);
+export const LazyOutlinePanel = reactLazyWithPreload(
+  () => import("../panels/outline-panel"),
+);
+export const LazyPackagesPanel = reactLazyWithPreload(
+  () => import("../panels/packages-panel"),
+);
+export const LazyScratchpadPanel = reactLazyWithPreload(
+  () => import("../panels/scratchpad-panel"),
+);
+export const LazySecretsPanel = reactLazyWithPreload(
+  () => import("../panels/secrets-panel"),
+);
+export const LazySnippetsPanel = reactLazyWithPreload(
+  () => import("../panels/snippets-panel"),
+);
+export const LazyTracingPanel = reactLazyWithPreload(
+  () => import("../panels/tracing-panel"),
+);
+export const LazyCachePanel = reactLazyWithPreload(
+  () => import("../panels/cache-panel"),
+);
+
+// Preloader registry: hovering an icon/tab calls into this map to warm the
+// corresponding chunk. Two panel types (chat and agents) share the "ai" slot,
+// so we preload both.
+export const PANEL_PRELOADERS: Record<PanelType, () => void> = {
+  files: safePreload(LazyFileExplorerPanel),
+  variables: safePreload(LazySessionPanel),
+  dependencies: safePreload(LazyDependencyGraphPanel),
+  packages: safePreload(LazyPackagesPanel),
+  outline: safePreload(LazyOutlinePanel),
+  documentation: safePreload(LazyDocumentationPanel),
+  snippets: safePreload(LazySnippetsPanel),
+  ai: () => {
+    safePreload(LazyChatPanel)();
+    safePreload(LazyAgentPanel)();
+  },
+  errors: safePreload(LazyErrorsPanel),
+  scratchpad: safePreload(LazyScratchpadPanel),
+  tracing: safePreload(LazyTracingPanel),
+  secrets: safePreload(LazySecretsPanel),
+  logs: safePreload(LazyLogsPanel),
+  terminal: safePreload(LazyTerminal),
+  cache: safePreload(LazyCachePanel),
+};

package/src/components/editor/chrome/wrapper/sidebar.tsx

@@ -22,6 +22,7 @@ import {
   PANELS,
   type PanelDescriptor,
 } from "../types";
+import { PANEL_PRELOADERS } from "./lazy-panels";
 
 export const Sidebar: React.FC = () => {
   const { selectedPanel, selectedDeveloperPanelTab, isSidebarOpen } =
@@ -141,6 +142,7 @@ export const Sidebar: React.FC = () => {
         className="flex flex-col gap-0"
         minItems={0}
         onAction={(panel) => toggleApplication(panel.type)}
+        onItemPreloadHint={(panel) => PANEL_PRELOADERS[panel.type]?.()}
         renderItem={(panel) => (
           <SidebarItem
             tooltip={panel.tooltip}

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

@@ -82,10 +82,17 @@ exports[`generateStorageCode > GCS > without service account key (default creden
 store = GCSStore("my-bucket")"
 `;
 
-exports[`generateStorageCode > Google Drive > with browser auth (no credentials) 1`] = `
+exports[`generateStorageCode > Google Drive > with default auth (no credentials) 1`] = `
 "from gdrive_fsspec import GoogleDriveFileSystem
 
-fs = GoogleDriveFileSystem(token="browser", use_listings_cache=False)"
+fs = GoogleDriveFileSystem(use_listings_cache=False)"
+`;
+
+exports[`generateStorageCode > Google Drive > with embedded auth (no credentials) 1`] = `
+"from gdrive_fsspec import GoogleDriveFileSystem
+
+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")"
 `;
 
 exports[`generateStorageCode > Google Drive > with service account credentials 1`] = `

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