@marimo-team/islands 0.20.3-dev94 → 0.20.3-dev97

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

@@ -0,0 +1,188 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import dedent from "string-dedent";
+import { assertNever } from "@/utils/assertNever";
+import { isSecret, unprefixSecret } from "../secrets";
+import { type StorageConnection, StorageConnectionSchema } from "./schemas";
+
+export type StorageLibrary = "obstore" | "fsspec";
+
+export const StorageLibraryDisplayNames: Record<StorageLibrary, string> = {
+  obstore: "Obstore",
+  fsspec: "fsspec",
+};
+
+class SecretContainer {
+  private secrets: Record<string, string> = {};
+
+  get imports(): Set<string> {
+    if (Object.keys(this.secrets).length === 0) {
+      return new Set<string>();
+    }
+    return new Set<string>(["import os"]);
+  }
+
+  print(varName: string, value: string | undefined): string {
+    if (value === undefined || value === "") {
+      return "";
+    }
+    const privateVar = `_${varName}`;
+    if (isSecret(value)) {
+      const envVar = unprefixSecret(value);
+      this.secrets[privateVar] = `os.environ.get("${envVar}")`;
+      return privateVar;
+    }
+    return `"${value}"`;
+  }
+
+  formatSecrets(): string {
+    if (Object.keys(this.secrets).length === 0) {
+      return "";
+    }
+    return Object.entries(this.secrets)
+      .map(([k, v]) => `${k} = ${v}`)
+      .join("\n");
+  }
+}
+
+function generateS3Code(
+  connection: Extract<StorageConnection, { type: "s3" }>,
+  secrets: SecretContainer,
+): { imports: Set<string>; code: string } {
+  const bucket = secrets.print("bucket", connection.bucket);
+  const imports = new Set(["from obstore.store import S3Store"]);
+  const params: string[] = [];
+
+  if (connection.region) {
+    params.push(`    region=${secrets.print("region", connection.region)},`);
+  }
+  if (connection.access_key_id) {
+    params.push(
+      `    access_key_id=${secrets.print("access_key_id", connection.access_key_id)},`,
+    );
+  }
+  if (connection.secret_access_key) {
+    params.push(
+      `    secret_access_key=${secrets.print("secret_access_key", connection.secret_access_key)},`,
+    );
+  }
+  if (connection.endpoint_url) {
+    params.push(
+      `    endpoint_url=${secrets.print("endpoint_url", connection.endpoint_url)},`,
+    );
+  }
+
+  const paramsStr = params.length > 0 ? `\n${params.join("\n")}\n` : "";
+
+  const code = dedent(`
+    store = S3Store(${bucket},${paramsStr})
+  `);
+  return { imports, code };
+}
+
+function generateGCSCode(
+  connection: Extract<StorageConnection, { type: "gcs" }>,
+  secrets: SecretContainer,
+): { imports: Set<string>; code: string } {
+  const bucket = secrets.print("bucket", connection.bucket);
+  const imports = new Set(["from obstore.store import GCSStore"]);
+
+  let code: string;
+  if (connection.service_account_key) {
+    imports.add("import json");
+    code = dedent(`
+      _credentials = json.loads("""${connection.service_account_key}""")
+      store = GCSStore(${bucket},
+          service_account_key=_credentials,
+      )
+    `);
+  } else {
+    code = dedent(`
+      store = GCSStore(${bucket})
+    `);
+  }
+  return { imports, code };
+}
+
+function generateAzureCode(
+  connection: Extract<StorageConnection, { type: "azure" }>,
+  secrets: SecretContainer,
+): { imports: Set<string>; code: string } {
+  const container = secrets.print("container", connection.container);
+  const accountName = secrets.print("account_name", connection.account_name);
+  const imports = new Set(["from obstore.store import AzureStore"]);
+  const params: string[] = [`account_name=${accountName},`];
+
+  if (connection.account_key) {
+    params.push(
+      `account_key=${secrets.print("account_key", connection.account_key)},`,
+    );
+  }
+
+  const paramsStr = params.map((p) => `    ${p}`).join("\n");
+
+  const code = `store = AzureStore(${container},\n${paramsStr}\n)`;
+  return { imports, code };
+}
+
+function generateGDriveCode(
+  connection: Extract<StorageConnection, { type: "gdrive" }>,
+  secrets: SecretContainer,
+): { imports: Set<string>; code: string } {
+  const imports = new Set(["from gdrive_fsspec import GoogleDriveFileSystem"]);
+
+  if (connection.credentials_json) {
+    imports.add("import json");
+    const creds = secrets.print(
+      "credentials_json",
+      connection.credentials_json,
+    );
+    const code = dedent(`
+      _creds = json.loads("""${connection.credentials_json?.startsWith("ENV:") ? `{${creds}}` : connection.credentials_json}""")
+      fs = GoogleDriveFileSystem(creds=_creds, token="service_account")
+    `);
+    return { imports, code };
+  }
+
+  const code = dedent(`
+    fs = GoogleDriveFileSystem(token="browser")
+  `);
+  return { imports, code };
+}
+
+export function generateStorageCode(
+  connection: StorageConnection,
+  _library: StorageLibrary,
+): string {
+  StorageConnectionSchema.parse(connection);
+
+  const secrets = new SecretContainer();
+  let result: { imports: Set<string>; code: string };
+
+  switch (connection.type) {
+    case "s3":
+      result = generateS3Code(connection, secrets);
+      break;
+    case "gcs":
+      result = generateGCSCode(connection, secrets);
+      break;
+    case "azure":
+      result = generateAzureCode(connection, secrets);
+      break;
+    case "gdrive":
+      result = generateGDriveCode(connection, secrets);
+      break;
+    default:
+      assertNever(connection);
+  }
+
+  const allImports = new Set([...secrets.imports, ...result.imports]);
+  const lines = [...allImports].sort();
+  lines.push("");
+  const secretsStr = secrets.formatSecrets();
+  if (secretsStr) {
+    lines.push(secretsStr);
+  }
+  lines.push(result.code.trim());
+  return lines.join("\n");
+}

package/src/components/editor/connections/storage/schemas.ts

@@ -0,0 +1,141 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { z } from "zod";
+import { FieldOptions } from "@/components/forms/options";
+
+export const S3StorageSchema = z
+  .object({
+    type: z.literal("s3"),
+    bucket: z
+      .string()
+      .nonempty()
+      .describe(
+        FieldOptions.of({
+          label: "Bucket",
+          placeholder: "my-bucket",
+        }),
+      ),
+    region: z
+      .string()
+      .optional()
+      .describe(
+        FieldOptions.of({
+          label: "Region",
+          placeholder: "us-east-1",
+          optionRegex: ".*region.*",
+        }),
+      ),
+    access_key_id: z
+      .string()
+      .optional()
+      .describe(
+        FieldOptions.of({
+          label: "Access Key ID",
+          inputType: "password",
+          optionRegex: ".*access_key.*",
+        }),
+      ),
+    secret_access_key: z
+      .string()
+      .optional()
+      .describe(
+        FieldOptions.of({
+          label: "Secret Access Key",
+          inputType: "password",
+          optionRegex: ".*secret.*access.*",
+        }),
+      ),
+    endpoint_url: z
+      .string()
+      .optional()
+      .describe(
+        FieldOptions.of({
+          label: "Endpoint URL",
+          placeholder: "https://s3.amazonaws.com",
+        }),
+      ),
+  })
+  .describe(FieldOptions.of({ direction: "two-columns" }));
+
+export const GCSStorageSchema = z
+  .object({
+    type: z.literal("gcs"),
+    bucket: z
+      .string()
+      .nonempty()
+      .describe(
+        FieldOptions.of({
+          label: "Bucket",
+          placeholder: "my-bucket",
+        }),
+      ),
+    service_account_key: z
+      .string()
+      .optional()
+      .describe(
+        FieldOptions.of({
+          label: "Service Account Key (JSON)",
+          inputType: "textarea",
+        }),
+      ),
+  })
+  .describe(FieldOptions.of({ direction: "two-columns" }));
+
+export const AzureStorageSchema = z
+  .object({
+    type: z.literal("azure"),
+    container: z
+      .string()
+      .nonempty()
+      .describe(
+        FieldOptions.of({
+          label: "Container",
+          placeholder: "my-container",
+        }),
+      ),
+    account_name: z
+      .string()
+      .nonempty()
+      .describe(
+        FieldOptions.of({
+          label: "Account Name",
+          placeholder: "storageaccount",
+          optionRegex: ".*account.*",
+        }),
+      ),
+    account_key: z
+      .string()
+      .optional()
+      .describe(
+        FieldOptions.of({
+          label: "Account Key",
+          inputType: "password",
+          optionRegex: ".*azure.*key.*",
+        }),
+      ),
+  })
+  .describe(FieldOptions.of({ direction: "two-columns" }));
+
+export const GoogleDriveStorageSchema = z
+  .object({
+    type: z.literal("gdrive"),
+    credentials_json: z
+      .string()
+      .optional()
+      .describe(
+        FieldOptions.of({
+          label: "Service Account JSON",
+          description: "Leave empty to use browser-based authentication",
+          inputType: "textarea",
+        }),
+      ),
+  })
+  .describe(FieldOptions.of({ direction: "two-columns" }));
+
+export const StorageConnectionSchema = z.discriminatedUnion("type", [
+  S3StorageSchema,
+  GCSStorageSchema,
+  AzureStorageSchema,
+  GoogleDriveStorageSchema,
+]);
+
+export type StorageConnection = z.infer<typeof StorageConnectionSchema>;

package/src/components/storage/components.tsx

@@ -19,8 +19,10 @@ import {
   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";
 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();
@@ -67,12 +69,14 @@ const PROTOCOL_ICONS: Record<KnownStorageProtocol, IconEntry> = {
   http: GlobeIcon,
   file: HardDriveIcon,
   "in-memory": DatabaseZapIcon,
+  gdrive: { src: GoogleDriveIcon },
   github: GithubIcon,
 };
 
 export const ProtocolIcon: React.FC<{
   protocol: KnownStorageProtocol | (string & {});
-}> = ({ protocol }) => {
+  className?: string;
+}> = ({ protocol, className }) => {
   const { theme } = useTheme();
   const entry =
     PROTOCOL_ICONS[protocol.toLowerCase() as KnownStorageProtocol] ??
@@ -80,9 +84,11 @@ export const ProtocolIcon: React.FC<{
 
   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" />;
+    return (
+      <img src={src} alt={protocol} className={cn("h-3.5 w-3.5", className)} />
+    );
   }
 
   const Icon = entry;
-  return <Icon className="h-3.5 w-3.5" />;
+  return <Icon className={cn("h-3.5 w-3.5", className)} />;
 };

package/src/components/storage/storage-inspector.tsx

@@ -10,6 +10,7 @@ import {
   HelpCircleIcon,
   LoaderCircle,
   MoreVerticalIcon,
+  PlusIcon,
   RefreshCwIcon,
   ViewIcon,
   XIcon,
@@ -18,6 +19,7 @@ import React, { useCallback, useState } from "react";
 import { useLocale } from "react-aria";
 import { EngineVariable } from "@/components/databases/engine-variable";
 import { PanelEmptyState } from "@/components/editor/chrome/panels/empty-state";
+import { AddConnectionDialog } from "@/components/editor/connections/add-connection-dialog";
 import { Command, CommandInput, CommandItem } from "@/components/ui/command";
 import {
   DropdownMenu,
@@ -550,6 +552,14 @@ export const StorageInspector: React.FC = () => {
             .
           </span>
         }
+        action={
+          <AddConnectionDialog defaultTab="storage">
+            <Button variant="outline" size="sm">
+              Add remote storage
+              <PlusIcon className="h-4 w-4 ml-2" />
+            </Button>
+          </AddConnectionDialog>
+        }
         icon={<HardDriveIcon className="h-8 w-8" />}
       />
     );
@@ -595,8 +605,17 @@ export const StorageInspector: React.FC = () => {
             content="Filters loaded entries only. Expand directories to include their contents in the search."
             delayDuration={200}
           >
-            <HelpCircleIcon className="h-3.5 w-3.5 mr-2 shrink-0 cursor-help text-muted-foreground hover:text-foreground" />
+            <HelpCircleIcon className="h-3.5 w-3.5 shrink-0 cursor-help text-muted-foreground hover:text-foreground mr-2" />
           </Tooltip>
+          <AddConnectionDialog defaultTab="storage">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="px-2 border-0 border-l border-muted-background rounded-none focus-visible:ring-0 focus-visible:ring-offset-0"
+            >
+              <PlusIcon className="h-4 w-4" />
+            </Button>
+          </AddConnectionDialog>
         </div>
         <CommandList className="flex flex-col">
           {namespaces.map((ns) => (

package/src/core/codemirror/__tests__/format.test.ts

@@ -4,7 +4,7 @@ import { python } from "@codemirror/lang-python";
 import { EditorState } from "@codemirror/state";
 import { EditorView } from "@codemirror/view";
 import { atom } from "jotai";
-import { beforeEach, describe, expect, it, vi } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { MockRequestClient } from "@/__mocks__/requests";
 import type { NotebookState } from "@/core/cells/cells";
 import { getNotebook } from "@/core/cells/cells";
@@ -44,6 +44,7 @@ vi.mock("@/core/config/config", () => ({
 }));
 
 const updateCellCode = vi.fn();
+const createdViews: EditorView[] = [];
 
 function createEditor(content: string, cellId: CellId) {
   const state = EditorState.create({
@@ -74,6 +75,7 @@ function createEditor(content: string, cellId: CellId) {
     parent: document.body,
   });
 
+  createdViews.push(view);
   return view;
 }
 
@@ -88,6 +90,12 @@ beforeEach(() => {
   store.set(requestClientAtom, mockRequestClient);
 });
 
+afterEach(() => {
+  for (const view of createdViews) {
+    view.destroy();
+  }
+});
+
 describe("format", () => {
   describe("formatEditorViews", () => {
     it("should format code in editor views", async () => {

package/src/core/saving/file-state.ts

@@ -9,6 +9,13 @@ import { getFilenameFromDOM } from "../dom/htmlUtils";
  */
 export const filenameAtom = atom<string | null>(getFilenameFromDOM());
 
+/**
+ * Atom for storing the notebook's working directory (absolute path).
+ * In directory mode, filenameAtom may be a relative display path;
+ * this atom holds the absolute directory containing the notebook.
+ */
+export const cwdAtom = atom<string | null>(null);
+
 /**
  * Set for static notebooks.
  */

package/src/core/storage/types.ts

@@ -54,5 +54,6 @@ export type KnownStorageProtocol =
   | "cloudflare"
   | "http"
   | "file"
+  | "gdrive"
   | "in-memory"
   | "github";

package/src/mount.tsx

@@ -36,7 +36,7 @@ import {
   DEFAULT_RUNTIME_CONFIG,
   runtimeConfigAtom,
 } from "./core/runtime/config";
-import { codeAtom, filenameAtom } from "./core/saving/file-state";
+import { codeAtom, cwdAtom, filenameAtom } from "./core/saving/file-state";
 import { store } from "./core/state/jotai";
 import { patchFetch, patchVegaLoader } from "./core/static/files";
 import {
@@ -146,6 +146,10 @@ const mountOptionsSchema = z.object({
       Logger.warn("No filename provided, using fallback");
       return getFilenameFromDOM();
     }),
+  /**
+   * absolute working directory of the notebook
+   */
+  cwd: z.string().nullish().default(null),
   /**
    * notebook code
    */
@@ -282,6 +286,7 @@ function initStore(options: unknown) {
 
   // Files
   store.set(filenameAtom, parsedOptions.data.filename);
+  store.set(cwdAtom, parsedOptions.data.cwd ?? null);
   store.set(codeAtom, parsedOptions.data.code);
   store.set(initialModeAtom, mode);