@marimo-team/frontend 0.23.16-dev6 → 0.23.16-dev62

package/src/components/editor/connections/form-renderers.tsx

@@ -1,5 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
+import { InfoIcon } from "lucide-react";
 import { createContext, type ReactNode, use, useMemo } from "react";
 import { z } from "zod";
 import type { FormRenderer } from "@/components/forms/form";
@@ -13,6 +14,7 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
+import { Tooltip } from "@/components/ui/tooltip";
 import { SECRETS_REGISTRY } from "@/core/secrets/request-registry";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { Functions } from "@/utils/functions";
@@ -20,8 +22,10 @@ import {
   sortProviders,
   WriteSecretModal,
 } from "../chrome/panels/write-secret-modal";
+import { looksLikeJson } from "./json-credentials";
+import { isPath, prefixPath, unprefixPath } from "./paths";
 import { partitionSecretKeys, SecretCombobox } from "./secret-combobox";
-import { prefixSecret } from "./secrets";
+import { isSecret, prefixSecret } from "./secrets";
 
 interface SecretsContextType {
   providerNames: string[];
@@ -141,3 +145,97 @@ export const ENV_RENDERER: FormRenderer<z.ZodString> = {
     );
   },
 };
+
+/**
+ * For credentials that shouldn't be baked into the generated notebook code
+ * (e.g. a service-account JSON key).
+ */
+export const SECRET_TEXTAREA_RENDERER: FormRenderer<z.ZodString> = {
+  isMatch: (schema: z.ZodType): schema is z.ZodString => {
+    if (schema instanceof z.ZodString) {
+      const { special } = FieldOptions.parse(schema.description || "");
+      return special === "secret_textarea";
+    }
+    return false;
+  },
+  Component: ({ schema, form, path }) => {
+    const { secretKeys, providerNames, refreshSecrets } = useSecrets();
+    const { openModal, closeModal } = useImperativeModal();
+    const { label, description, placeholder } = FieldOptions.parse(
+      schema.description || "",
+    );
+
+    return (
+      <FormField
+        control={form.control}
+        name={path}
+        render={({ field }) => {
+          const value = field.value ? String(field.value) : "";
+          // Non-secret values are file paths; display them unprefixed.
+          const displayValue = isPath(value) ? unprefixPath(value) : value;
+
+          return (
+            <FormItem>
+              <FormLabel className="flex items-center gap-1">
+                {label}
+                <Tooltip
+                  content="Enter a path to a file on disk, or create a secret to paste JSON directly."
+                  delayDuration={300}
+                >
+                  <button
+                    type="button"
+                    className="inline-flex"
+                    aria-label="Credential input help"
+                  >
+                    <InfoIcon className="h-3.5 w-3.5" />
+                  </button>
+                </Tooltip>
+              </FormLabel>
+              <FormDescription>{description}</FormDescription>
+              <FormControl>
+                <SecretCombobox
+                  value={displayValue}
+                  onChange={(next) => {
+                    field.onChange(
+                      !next || isSecret(next) || isPath(next)
+                        ? next
+                        : prefixPath(next),
+                    );
+                  }}
+                  placeholder={placeholder}
+                  searchPlaceholder="Type a file path or paste JSON"
+                  formatCustomValueLabel={(custom) =>
+                    `Use "${custom}" as a file path`
+                  }
+                  createSecretLabel="Paste JSON credentials"
+                  allowCustomValue={(search) => !looksLikeJson(search)}
+                  allowCreateSecret={(search) =>
+                    !search || looksLikeJson(search)
+                  }
+                  recommendedKeys={[]}
+                  otherKeys={secretKeys}
+                  onCreateSecret={(suggestedValue) => {
+                    openModal(
+                      <WriteSecretModal
+                        providerNames={providerNames}
+                        initialValue={suggestedValue}
+                        multiline={true}
+                        onSuccess={(secretKey) => {
+                          refreshSecrets();
+                          field.onChange(prefixSecret(secretKey));
+                          closeModal();
+                        }}
+                        onClose={closeModal}
+                      />,
+                    );
+                  }}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          );
+        }}
+      />
+    );
+  },
+};

package/src/components/editor/connections/json-credentials.ts

@@ -0,0 +1,57 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { isPath, unprefixPath } from "./paths";
+import { isSecret } from "./secrets";
+
+export type JsonCredential =
+  | { kind: "path"; path: string }
+  | { kind: "json"; expr: string };
+
+/**
+ * Resolves a `secret_textarea` field's value — a file path, a secret
+ * reference, or a raw literal — into either a path to hand to a
+ * provider's path-based auth kwarg, or a `json.loads(...)` expression.
+ */
+export function resolveJsonCredential(
+  value: string,
+  printSecret: (value: string) => string,
+): JsonCredential {
+  if (isPath(value)) {
+    return { kind: "path", path: unprefixPath(value) };
+  }
+  const expr = isSecret(value)
+    ? `json.loads(${printSecret(value)})`
+    : // Use raw string to avoid interpreting \n escapes as newlines.
+      `json.loads(r"""${value}""")`;
+  return { kind: "json", expr };
+}
+
+export function looksLikeJson(value: string): boolean {
+  const trimmed = value.trimStart();
+  return trimmed.startsWith("{") || trimmed.startsWith("[");
+}
+
+/**
+ * Collapse a credential value to a single dotenv-safe line: minify JSON
+ * when parseable, otherwise strip newlines.
+ */
+export function flattenSecretValue(value: string): string {
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return "";
+  }
+  try {
+    return JSON.stringify(JSON.parse(trimmed));
+  } catch {
+    return value.replaceAll(/\r?\n/g, "");
+  }
+}
+
+/** Escape a filesystem path for embedding in a Python double-quoted string. */
+export function escapePythonString(value: string): string {
+  return value
+    .replaceAll("\\", "\\\\")
+    .replaceAll('"', '\\"')
+    .replaceAll("\n", "\\n")
+    .replaceAll("\r", "\\r")
+    .replaceAll("\t", "\\t");
+}

package/src/components/editor/connections/paths.ts

@@ -0,0 +1,21 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import type { TypedString } from "@/utils/typed";
+
+const PREFIX = "path:";
+
+export type PathPlaceholder = TypedString<"path">;
+
+export function isPath(value: unknown): value is PathPlaceholder {
+  if (typeof value !== "string") {
+    return false;
+  }
+  return value.startsWith(PREFIX);
+}
+
+export function prefixPath(value: string): PathPlaceholder {
+  return `${PREFIX}${value}` as PathPlaceholder;
+}
+
+export function unprefixPath(value: PathPlaceholder): string {
+  return value.slice(PREFIX.length);
+}

package/src/components/editor/connections/quick-add-data-sources.tsx

@@ -0,0 +1,106 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { PlusIcon, SparklesIcon } from "lucide-react";
+import { Tooltip, TooltipProvider } from "@/components/ui/tooltip";
+import type { DetectedDataSource } from "@/core/datasets/data-source-discovery";
+import { useDataSourceDiscovery } from "@/hooks/useDataSourceDiscovery";
+import { useInsertCode } from "./components";
+
+export const QuickAddDataSources: React.FC<{
+  sources: DetectedDataSource[];
+  onAdd: (source: DetectedDataSource) => void;
+}> = ({ sources, onAdd }) => {
+  if (sources.length === 0) {
+    return null;
+  }
+
+  return (
+    <section
+      aria-labelledby="quick-add-data-sources-title"
+      className="rounded-md border bg-muted/30 px-3 py-2"
+    >
+      <div className="flex flex-wrap items-center gap-2">
+        <div className="mr-1 flex items-center gap-1.5">
+          <SparklesIcon className="h-3.5 w-3.5 text-muted-foreground" />
+          <h3 id="quick-add-data-sources-title" className="text-sm font-medium">
+            Quick add
+          </h3>
+        </div>
+        <TooltipProvider delayDuration={200}>
+          {sources.map((source) => (
+            <Tooltip
+              key={source.id}
+              side="bottom"
+              content={<DetectedDataSourceDetails source={source} />}
+            >
+              <button
+                type="button"
+                aria-label={`Add ${source.displayName} connection`}
+                className="inline-flex items-center gap-1 rounded-full border border-(--blue-8) bg-(--blue-2) px-2.5 py-1 text-xs font-semibold text-(--blue-11) transition-colors hover:bg-(--blue-3) focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2"
+                onClick={() => onAdd(source)}
+              >
+                <PlusIcon className="h-3 w-3" />
+                {source.displayName}
+              </button>
+            </Tooltip>
+          ))}
+        </TooltipProvider>
+      </div>
+    </section>
+  );
+};
+
+const DetectedDataSourceDetails: React.FC<{
+  source: DetectedDataSource;
+}> = ({ source }) => (
+  <div className="min-w-64 space-y-2 py-1">
+    <div>
+      <div className="font-medium">{source.displayName}</div>
+      <div className="text-xs text-muted-foreground">
+        Detected from{" "}
+        {source.origins.map((origin) => origin.label).join(" and ")}
+      </div>
+    </div>
+    <dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 text-xs">
+      {source.configuration.map((item) => (
+        <div
+          className="contents"
+          key={
+            item.value.kind === "environment-variable"
+              ? item.value.name
+              : `${item.field}:${item.value.value}`
+          }
+        >
+          <dt className="text-muted-foreground">{item.field}</dt>
+          <dd>
+            <code>
+              {item.value.kind === "environment-variable"
+                ? `os.environ["${item.value.name}"]`
+                : item.value.value}
+            </code>
+          </dd>
+        </div>
+      ))}
+    </dl>
+    <div className="text-xs text-muted-foreground">
+      Click to add a configured cell.
+    </div>
+  </div>
+);
+
+export const AutoDiscoveredDataSources: React.FC<{
+  onSubmit: () => void;
+}> = ({ onSubmit }) => {
+  const insertCode = useInsertCode();
+  const { data } = useDataSourceDiscovery();
+
+  return (
+    <QuickAddDataSources
+      sources={data ?? []}
+      onAdd={(source) => {
+        insertCode(source.code);
+        onSubmit();
+      }}
+    />
+  );
+};

package/src/components/editor/connections/secret-combobox.tsx

@@ -56,6 +56,16 @@ interface SecretComboboxProps {
   /** Opens the create-secret flow; `suggestedValue` is the current search text when present. */
   onCreateSecret: (suggestedValue?: string) => void;
   className?: string;
+  /** Placeholder for the search input inside the popover. */
+  searchPlaceholder?: string;
+  /** Label for the "commit a free-text literal" item, e.g. `Use "${value}" as a path`. */
+  formatCustomValueLabel?: (value: string) => string;
+  /** Label for the "create a new secret" item. */
+  createSecretLabel?: string;
+  /** When false for the current search, hide the free-text / path option. */
+  allowCustomValue?: (search: string) => boolean;
+  /** When false for the current search, hide the "create a new secret" option. */
+  allowCreateSecret?: (search: string) => boolean;
 }
 
 /**
@@ -73,6 +83,11 @@ export const SecretCombobox: React.FC<SecretComboboxProps> = ({
   otherKeys,
   onCreateSecret,
   className,
+  searchPlaceholder,
+  formatCustomValueLabel = (custom) => `Use "${custom}"`,
+  createSecretLabel = "Create a new secret",
+  allowCustomValue,
+  allowCreateSecret,
 }) => {
   const [open, setOpen] = useState(false);
   const [search, setSearch] = useState("");
@@ -81,7 +96,11 @@ export const SecretCombobox: React.FC<SecretComboboxProps> = ({
   // Non-secret fields may commit a literal even when it collides with an
   // existing secret key, so we intentionally don't filter out matches here.
   const showCustomValue =
-    !secretsOnly && trimmedSearch.length > 0 && trimmedSearch !== value;
+    !secretsOnly &&
+    trimmedSearch.length > 0 &&
+    trimmedSearch !== value &&
+    (allowCustomValue?.(trimmedSearch) ?? true);
+  const showCreateSecret = allowCreateSecret?.(trimmedSearch) ?? true;
 
   const displayValue = (() => {
     if (!value) {
@@ -158,9 +177,10 @@ export const SecretCombobox: React.FC<SecretComboboxProps> = ({
           <Command>
             <CommandInput
               placeholder={
-                secretsOnly
+                searchPlaceholder ??
+                (secretsOnly
                   ? "Search secrets..."
-                  : "Type a value or search secrets..."
+                  : "Type a value or search secrets...")
               }
               rootClassName="px-1 h-8"
               autoFocus={true}
@@ -174,26 +194,27 @@ export const SecretCombobox: React.FC<SecretComboboxProps> = ({
                     value={`use custom value ${trimmedSearch}`}
                     onSelect={() => selectCustom(trimmedSearch)}
                   >
-                    Use "{trimmedSearch}"
+                    {formatCustomValueLabel(trimmedSearch)}
+                  </CommandItem>
+                </CommandGroup>
+              )}
+              {showCreateSecret && (
+                <CommandGroup className="mt-0">
+                  <CommandItem
+                    // Include search so this stays visible while filtering
+                    value={`create new secret ${trimmedSearch}`}
+                    onSelect={() => {
+                      const suggestedValue = trimmedSearch || undefined;
+                      setOpen(false);
+                      setSearch("");
+                      onCreateSecret(suggestedValue);
+                    }}
+                  >
+                    <PlusCircleIcon className="mr-2 h-3.5 w-3.5" />
+                    {createSecretLabel}
                   </CommandItem>
                 </CommandGroup>
               )}
-              {showCustomValue && <CommandSeparator />}
-              <CommandGroup className="mt-0">
-                <CommandItem
-                  // Include search so this stays visible while filtering
-                  value={`create new secret ${trimmedSearch}`}
-                  onSelect={() => {
-                    const suggestedValue = trimmedSearch || undefined;
-                    setOpen(false);
-                    setSearch("");
-                    onCreateSecret(suggestedValue);
-                  }}
-                >
-                  <PlusCircleIcon className="mr-2 h-3.5 w-3.5" />
-                  Create a new secret
-                </CommandItem>
-              </CommandGroup>
               {recommendedKeys.length > 0 && (
                 <>
                   <CommandSeparator className="mt-0" />

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

@@ -51,6 +51,21 @@ store = S3Store("operator-bucket",
 )"
 `;
 
+exports[`generateStorageCode > CoreWeave > with container credentials 1`] = `
+"from obstore.store import S3Store
+import os
+
+_container_credentials_full_uri = os.environ.get("AWS_CONTAINER_CREDENTIALS_FULL_URI")
+_container_authorization_token_file = os.environ.get("AWS_CONTAINER_AUTHORIZATION_TOKEN_FILE")
+store = S3Store("operator-bucket",
+    region="US-EAST-04A",
+    container_credentials_full_uri=_container_credentials_full_uri,
+    container_authorization_token_file=_container_authorization_token_file,
+    endpoint="https://operator-bucket.cwobject.com",
+    virtual_hosted_style_request=True,
+)"
+`;
+
 exports[`generateStorageCode > CoreWeave > with secrets 1`] = `
 "from obstore.store import S3Store
 import os
@@ -70,7 +85,27 @@ exports[`generateStorageCode > GCS > with service account key 1`] = `
 "from obstore.store import GCSStore
 import json
 
-_credentials = json.loads("""{"type": "service_account", "project_id": "test"}""")
+_credentials = json.loads(r"""{"type": "service_account", "project_id": "test"}""")
+store = GCSStore("my-bucket",
+    service_account_key=_credentials,
+)"
+`;
+
+exports[`generateStorageCode > GCS > with service account key from a file path 1`] = `
+"from obstore.store import GCSStore
+
+store = GCSStore("my-bucket",
+    service_account_path="/etc/secrets/gcs.json",
+)"
+`;
+
+exports[`generateStorageCode > GCS > with service account key from secrets 1`] = `
+"from obstore.store import GCSStore
+import json
+import os
+
+_service_account_key = os.environ.get("GCS_SERVICE_ACCOUNT_KEY")
+_credentials = json.loads(_service_account_key)
 store = GCSStore("my-bucket",
     service_account_key=_credentials,
 )"
@@ -99,7 +134,23 @@ exports[`generateStorageCode > Google Drive > with service account credentials 1
 "from gdrive_fsspec import GoogleDriveFileSystem
 import json
 
-_creds = json.loads("""{"type": "service_account", "client_email": "test@test.iam.gserviceaccount.com"}""")
+_creds = json.loads(r"""{"type": "service_account", "client_email": "test@test.iam.gserviceaccount.com"}""")
+fs = GoogleDriveFileSystem(creds=_creds, token="service_account", use_listings_cache=False, skip_instance_cache=True)"
+`;
+
+exports[`generateStorageCode > Google Drive > with service account credentials from a file path 1`] = `
+"from gdrive_fsspec import GoogleDriveFileSystem
+
+fs = GoogleDriveFileSystem(creds="/etc/secrets/gdrive.json", token="service_account", use_listings_cache=False, skip_instance_cache=True)"
+`;
+
+exports[`generateStorageCode > Google Drive > with service account credentials from secrets 1`] = `
+"from gdrive_fsspec import GoogleDriveFileSystem
+import json
+import os
+
+_credentials_json = os.environ.get("GDRIVE_CREDENTIALS_JSON")
+_creds = json.loads(_credentials_json)
 fs = GoogleDriveFileSystem(creds=_creds, token="service_account", use_listings_cache=False, skip_instance_cache=True)"
 `;
 
@@ -119,6 +170,29 @@ exports[`generateStorageCode > S3 > minimal connection (bucket only) 1`] = `
 store = S3Store("my-bucket",)"
 `;
 
+exports[`generateStorageCode > S3 > with container credentials 1`] = `
+"from obstore.store import S3Store
+
+store = S3Store("my-bucket",
+    region="us-east-1",
+    container_credentials_full_uri="http://169.254.170.23/v1/credentials",
+    container_authorization_token_file="/var/run/secrets/token",
+)"
+`;
+
+exports[`generateStorageCode > S3 > with container credentials from secrets 1`] = `
+"from obstore.store import S3Store
+import os
+
+_container_credentials_full_uri = os.environ.get("AWS_CONTAINER_CREDENTIALS_FULL_URI")
+_container_authorization_token_file = os.environ.get("AWS_CONTAINER_AUTHORIZATION_TOKEN_FILE")
+store = S3Store("my-bucket",
+    region="us-east-1",
+    container_credentials_full_uri=_container_credentials_full_uri,
+    container_authorization_token_file=_container_authorization_token_file,
+)"
+`;
+
 exports[`generateStorageCode > S3 > with custom endpoint 1`] = `
 "from obstore.store import S3Store
 
@@ -130,6 +204,18 @@ store = S3Store("my-bucket",
 )"
 `;
 
+exports[`generateStorageCode > S3 > with plain-http endpoint 1`] = `
+"from obstore.store import S3Store
+
+store = S3Store("my-bucket",
+    region="us-east-1",
+    access_key_id="AKIAIOSFODNN7EXAMPLE",
+    secret_access_key="wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY",
+    endpoint_url="http://cwlota.com",
+    allow_http=True,
+)"
+`;
+
 exports[`generateStorageCode > S3 > with secrets 1`] = `
 "from obstore.store import S3Store
 import os