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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.20.3-dev94",
+  "version": "0.20.3-dev97",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/components/chat/acp/agent-panel.tsx

@@ -60,11 +60,11 @@ import {
 import { toast } from "@/components/ui/use-toast";
 import { DelayMount } from "@/components/utils/delay-mount";
 import { useRequestClient } from "@/core/network/requests";
-import { filenameAtom } from "@/core/saving/file-state";
+import { cwdAtom, filenameAtom } from "@/core/saving/file-state";
 import { store } from "@/core/state/jotai";
 import { ErrorBanner } from "@/plugins/impl/common/error-banner";
 import { Functions } from "@/utils/functions";
-import { Paths } from "@/utils/paths";
+import { PathBuilder, Paths } from "@/utils/paths";
 import {
   AddContextButton,
   AttachFileButton,
@@ -614,7 +614,11 @@ ChatContent.displayName = "ChatContent";
 
 const NO_WS_SET = "_skip_auto_connect_";
 
-function getCwd() {
+function getCwd(): string {
+  const cwd = store.get(cwdAtom);
+  if (cwd) {
+    return cwd;
+  }
   const filename = store.get(filenameAtom);
   if (!filename) {
     throw new Error(
@@ -624,6 +628,21 @@ function getCwd() {
   return Paths.dirname(filename);
 }
 
+function getAbsoluteFilename(): string {
+  const filename = store.get(filenameAtom);
+  if (!filename) {
+    throw new Error(
+      "Please save the notebook and refresh the browser to use the agent",
+    );
+  }
+  const cwd = store.get(cwdAtom);
+  if (cwd) {
+    const builder = PathBuilder.guessDeliminator(cwd);
+    return builder.join(cwd, String(Paths.basename(filename)));
+  }
+  return filename;
+}
+
 const AgentPanel: React.FC = () => {
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<Error | string | null>(null);
@@ -862,8 +881,10 @@ const AgentPanel: React.FC = () => {
         setSessionState((prev) => updateSessionTitle(prev, prompt));
       }
 
-      const filename = store.get(filenameAtom);
-      if (!filename) {
+      let absoluteFilename: string;
+      try {
+        absoluteFilename = getAbsoluteFilename();
+      } catch {
         toast({
           title: "Notebook must be named",
           description: "Please name the notebook to use the agent",
@@ -894,16 +915,16 @@ const AgentPanel: React.FC = () => {
         promptBlocks.push(
           {
             type: "resource_link",
-            uri: filename,
+            uri: absoluteFilename,
             mimeType: "text/x-python",
-            name: filename,
+            name: absoluteFilename,
           },
           {
             type: "resource",
             resource: {
               uri: "marimo_rules.md",
               mimeType: "text/plain",
-              text: getAgentPrompt(filename),
+              text: getAgentPrompt(absoluteFilename),
             },
           },
         );

package/src/components/databases/icons/google-drive.svg

@@ -0,0 +1,8 @@
+<svg viewBox="0 0 87.3 78" xmlns="http://www.w3.org/2000/svg">
+	<path d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z" fill="#0066da"/>
+	<path d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z" fill="#00ac47"/>
+	<path d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z" fill="#ea4335"/>
+	<path d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z" fill="#00832d"/>
+	<path d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z" fill="#2684fc"/>
+	<path d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z" fill="#ffba00"/>
+</svg>

package/src/components/datasources/datasources.tsx

@@ -60,7 +60,7 @@ import { ErrorBoundary } from "../editor/boundary/ErrorBoundary";
 import { PythonIcon } from "../editor/cell/code/icons";
 import { useAddCodeToNewCell } from "../editor/cell/useAddCell";
 import { PanelEmptyState } from "../editor/chrome/panels/empty-state";
-import { AddDatabaseDialog } from "../editor/database/add-database-form";
+import { AddConnectionDialog } from "../editor/connections/add-connection-dialog";
 import { DatasetColumnPreview } from "./column-preview";
 import {
   ColumnName,
@@ -160,12 +160,12 @@ export const DataSources: React.FC = () => {
         title="No tables found"
         description="Any datasets/dataframes in the global scope will be shown here."
         action={
-          <AddDatabaseDialog>
+          <AddConnectionDialog>
             <Button variant="outline" size="sm">
               Add database or catalog
               <PlusIcon className="h-4 w-4 ml-2" />
             </Button>
-          </AddDatabaseDialog>
+          </AddConnectionDialog>
         }
         icon={<DatabaseIcon />}
       />
@@ -201,7 +201,7 @@ export const DataSources: React.FC = () => {
           </button>
         )}
 
-        <AddDatabaseDialog>
+        <AddConnectionDialog>
           <Button
             variant="ghost"
             size="sm"
@@ -209,7 +209,7 @@ export const DataSources: React.FC = () => {
           >
             <PlusIcon className="h-4 w-4" />
           </Button>
-        </AddDatabaseDialog>
+        </AddConnectionDialog>
       </div>
 
       <CommandList className="flex flex-col">

package/src/components/editor/actions/useNotebookActions.tsx

@@ -24,6 +24,7 @@ import {
   FolderDownIcon,
   GithubIcon,
   GlobeIcon,
+  HardDrive,
   Home,
   ImageIcon,
   KeyboardIcon,
@@ -78,9 +79,9 @@ import { newNotebookURL } from "@/utils/urls";
 import { useRunAllCells } from "../cell/useRunCells";
 import { useChromeActions, useChromeState } from "../chrome/state";
 import { PANELS } from "../chrome/types";
+import { AddConnectionDialogContent } from "../connections/add-connection-dialog";
 import { keyboardShortcutsAtom } from "../controls/keyboard-shortcuts";
 import { commandPaletteAtom } from "../controls/state";
-import { AddDatabaseDialogContent } from "../database/add-database-form";
 import { displayLayoutName, getLayoutIcon } from "../renderers/layout-select";
 import { LAYOUT_TYPES } from "../renderers/types";
 import { runServerSidePDFDownload } from "./pdf-export";
@@ -450,7 +451,19 @@ export function useNotebookActions() {
       icon: <DatabaseIcon size={14} strokeWidth={1.5} />,
       label: "Add database connection",
       handle: () => {
-        openModal(<AddDatabaseDialogContent onClose={closeModal} />);
+        openModal(<AddConnectionDialogContent onClose={closeModal} />);
+      },
+    },
+    {
+      icon: <HardDrive size={14} strokeWidth={1.5} />,
+      label: "Add remote storage",
+      handle: () => {
+        openModal(
+          <AddConnectionDialogContent
+            defaultTab="storage"
+            onClose={closeModal}
+          />,
+        );
       },
     },
     {

package/src/components/editor/connections/add-connection-dialog.tsx

@@ -0,0 +1,83 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { ExternalLink } from "@/components/ui/links";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { AddDatabaseForm } from "./database/add-database-form";
+import { AddStorageForm } from "./storage/add-storage-form";
+
+type ConnectionTab = "databases" | "storage";
+
+export const AddConnectionDialog: React.FC<{
+  children: React.ReactNode;
+  defaultTab?: ConnectionTab;
+}> = ({ children, defaultTab = "databases" }) => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild={true}>{children}</DialogTrigger>
+      <AddConnectionDialogContent
+        defaultTab={defaultTab}
+        onClose={() => setOpen(false)}
+      />
+    </Dialog>
+  );
+};
+
+export const AddConnectionDialogContent: React.FC<{
+  defaultTab?: ConnectionTab;
+  onClose: () => void;
+}> = ({ defaultTab = "databases", onClose }) => {
+  const tabHeader = (
+    <TabsList className="w-full mb-4">
+      <TabsTrigger value="databases" className="flex-1">
+        Databases & Catalogs
+      </TabsTrigger>
+      <TabsTrigger value="storage" className="flex-1">
+        Remote Storages
+      </TabsTrigger>
+    </TabsList>
+  );
+
+  return (
+    <DialogContent className="max-h-[75vh] overflow-y-auto">
+      <DialogHeader>
+        <DialogTitle>Add Connection</DialogTitle>
+        <DialogDescription>
+          Connect to a{" "}
+          <ExternalLink href="https://docs.marimo.io/guides/working_with_data/sql/#connecting-to-a-custom-database">
+            database, data catalog
+          </ExternalLink>{" "}
+          or{" "}
+          <ExternalLink href="https://docs.marimo.io/guides/working_with_data/remote_storage/">
+            remote storage
+          </ExternalLink>{" "}
+          to work with data directly from your notebook.
+        </DialogDescription>
+      </DialogHeader>
+      <Tabs defaultValue={defaultTab}>
+        <TabsContent
+          value="databases"
+          className="mt-0 focus-visible:ring-0 focus-visible:ring-offset-0"
+        >
+          <AddDatabaseForm onSubmit={onClose} header={tabHeader} />
+        </TabsContent>
+        <TabsContent
+          value="storage"
+          className="mt-0 focus-visible:ring-0 focus-visible:ring-offset-0"
+        >
+          <AddStorageForm onSubmit={onClose} header={tabHeader} />
+        </TabsContent>
+      </Tabs>
+    </DialogContent>
+  );
+};

package/src/components/editor/connections/components.tsx

@@ -0,0 +1,177 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import React from "react";
+import { type DefaultValues, type FieldValues, useForm } from "react-hook-form";
+import type { z } from "zod";
+import { type FormRenderer, ZodForm } from "@/components/forms/form";
+import { getDefaults } from "@/components/forms/form-utils";
+import { Button } from "@/components/ui/button";
+import { FormErrorsBanner } from "@/components/ui/form";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useCellActions } from "@/core/cells/cells";
+import { useLastFocusedCellId } from "@/core/cells/focus";
+import { ENV_RENDERER, SecretsProvider } from "./form-renderers";
+
+const RENDERERS: FormRenderer[] = [ENV_RENDERER];
+
+/**
+ * Grid layout for provider/database selector buttons.
+ */
+export const SelectorGrid: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => <div className="grid grid-cols-2 md:grid-cols-3 gap-4">{children}</div>;
+
+/**
+ * A colored button tile for selecting a provider/database.
+ */
+export const SelectorButton: React.FC<{
+  name: string;
+  color: string;
+  icon: React.ReactNode;
+  onSelect: () => void;
+}> = ({ name, color, icon, onSelect }) => (
+  <button
+    type="button"
+    className="py-3 flex flex-col items-center justify-center gap-1 transition-all hover:scale-105 hover:brightness-110 rounded shadow-sm-solid hover:shadow-md-solid"
+    style={{ backgroundColor: color }}
+    onClick={onSelect}
+  >
+    {icon}
+    <span className="text-white font-medium text-lg">{name}</span>
+  </button>
+);
+
+/**
+ * Footer with Back/Add buttons and a library picker.
+ */
+export const ConnectionFormFooter = <L extends string>({
+  onBack,
+  isValid,
+  libraries,
+  preferredLibrary,
+  onLibraryChange,
+  displayNames,
+  libraryLabel = "Preferred library",
+}: {
+  onBack: () => void;
+  isValid: boolean;
+  libraries: L[];
+  preferredLibrary: L;
+  onLibraryChange: (library: L) => void;
+  displayNames: Record<L, string>;
+  libraryLabel?: string;
+}) => (
+  <div className="flex gap-2 justify-between">
+    <div className="flex gap-2">
+      <Button type="button" variant="outline" onClick={onBack}>
+        Back
+      </Button>
+      <Button type="submit" disabled={!isValid}>
+        Add
+      </Button>
+    </div>
+    <div>
+      <Select value={preferredLibrary} onValueChange={onLibraryChange}>
+        <div className="flex flex-col gap-1 items-end">
+          <SelectTrigger>
+            <SelectValue placeholder="Select a library" />
+          </SelectTrigger>
+          <span className="text-xs text-muted-foreground">{libraryLabel}</span>
+        </div>
+        <SelectContent>
+          <SelectGroup>
+            {libraries.map((library) => (
+              <SelectItem key={library} value={library}>
+                {displayNames[library] ?? library}
+              </SelectItem>
+            ))}
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+    </div>
+  </div>
+);
+
+/**
+ * Returns a callback that inserts code into a new cell after the last focused cell.
+ */
+export function useInsertCode() {
+  const { createNewCell } = useCellActions();
+  const lastFocusedCellId = useLastFocusedCellId();
+
+  return (code: string) => {
+    createNewCell({
+      code,
+      before: false,
+      cellId: lastFocusedCellId ?? "__end__",
+      skipIfCodeExists: true,
+    });
+  };
+}
+
+/**
+ * Generic connection form: Zod-driven form with secrets support, a library
+ * picker, and Back/Add buttons. Used by both database and storage forms.
+ */
+export const ConnectionForm = <T extends FieldValues, L extends string>({
+  schema,
+  libraries,
+  preferredLibrary: initialPreferred,
+  displayNames,
+  libraryLabel,
+  generateCode,
+  onSubmit,
+  onBack,
+}: {
+  schema: z.ZodType<T, FieldValues>;
+  libraries: L[];
+  preferredLibrary: L;
+  displayNames: Record<L, string>;
+  libraryLabel?: string;
+  generateCode: (values: T, library: L) => string;
+  onSubmit: () => void;
+  onBack: () => void;
+}) => {
+  const defaults = getDefaults(schema);
+  const form = useForm<T>({
+    defaultValues: defaults as DefaultValues<T>,
+    resolver: zodResolver(schema),
+    reValidateMode: "onChange",
+  });
+
+  const [preferredLibrary, setPreferredLibrary] =
+    React.useState<L>(initialPreferred);
+  const insertCode = useInsertCode();
+
+  const handleSubmit = (values: T) => {
+    insertCode(generateCode(values, preferredLibrary));
+    onSubmit();
+  };
+
+  return (
+    <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4">
+      <SecretsProvider>
+        <ZodForm schema={schema} form={form} renderers={RENDERERS}>
+          <FormErrorsBanner />
+        </ZodForm>
+      </SecretsProvider>
+      <ConnectionFormFooter
+        onBack={onBack}
+        isValid={form.formState.isValid}
+        libraries={libraries}
+        preferredLibrary={preferredLibrary}
+        onLibraryChange={setPreferredLibrary}
+        displayNames={displayNames}
+        libraryLabel={libraryLabel}
+      />
+    </form>
+  );
+};

package/src/components/editor/{database → connections/database}/__tests__/as-code.test.ts

@@ -1,8 +1,8 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import { describe, expect, it } from "vitest";
+import { prefixSecret } from "../../secrets";
 import { type ConnectionLibrary, generateDatabaseCode } from "../as-code";
 import type { DatabaseConnection } from "../schemas";
-import { prefixSecret } from "../secrets";
 
 describe("generateDatabaseCode", () => {
   // Test fixtures