@marimo-team/islands 0.23.16-dev47 → 0.23.16-dev49

package/dist/{common-CrqeqHZV.js → common-Wat9e-dh.js}

@@ -36338,7 +36338,7 @@ ${d}`,
       return Logger.warn("Failed to get version from mount config"), null;
     }
   }
-  marimoVersionAtom = atom(getVersionFromMountConfig() || "0.23.16-dev47");
+  marimoVersionAtom = atom(getVersionFromMountConfig() || "0.23.16-dev49");
   showCodeInRunModeAtom = atom(true);
   atom(null);
   var import_compiler_runtime = require_compiler_runtime();

package/dist/main.js

@@ -26,7 +26,7 @@ import { $ as notebookOutline, $t as publishedCellClasses, A as ChevronDownIcon,
 import { __tla as __tla_1 } from "./chunk-5FQGJX7Z-B9WoXK1R.js";
 import { o as useSize, s as Root$1, u as createLucideIcon } from "./dist-DIlxLFXG.js";
 import { A as SquareFunction, C as DEFAULT_COLOR_SCHEME, D as SCALE_TYPE_DESCRIPTIONS, E as EMPTY_VALUE$1, O as TIME_UNIT_DESCRIPTIONS, S as DEFAULT_AGGREGATION, T as DEFAULT_TIME_UNIT, _ as AGGREGATION_TYPE_DESCRIPTIONS, a as AGGREGATION_FNS$1, b as COLOR_SCHEMES, c as COLOR_BY_FIELDS, d as NONE_VALUE, f as SELECTABLE_DATA_TYPES, g as TIME_UNITS, h as STRING_AGGREGATION_FNS, i as convertDataTypeToSelectable, j as ChartColumn, k as escapeFieldName, l as COMBINED_TIME_UNITS, m as SORT_TYPES, n as createSpecWithoutData, o as BIN_AGGREGATION, p as SINGLE_TIME_UNITS, r as isFieldSet, s as CHART_TYPES, t as augmentSpecWithData, u as ChartType, v as AGGREGATION_TYPE_ICON, w as DEFAULT_MAX_BINS_FACET, x as COUNT_FIELD, y as CHART_TYPE_ICON } from "./spec-CQKL_D3i.js";
-import { $ as CommandSeparator, $t as Kbd, A as ErrorState, At as getPageIndexForRow, B as ContextMenuTrigger, Bt as dateToLocalISODate, C as downloadHTMLAsImage, Ct as inferFieldTypes, D as ColumnName, Dt as DelayMount, E as downloadSizeLimitAtom, Et as ColumnChartSpecModel, F as getUserColumnVisibilityCounts, Ft as TOO_MANY_ROWS, G as DateRangePicker, Gt as TabsList, H as useSelectList, Ht as dateToLocalISOTime, I as ContextMenu, It as toFieldTypes, J as Command, Jt as ChartInfoState, K as Combobox, Kt as TabsTrigger, L as ContextMenuContent, Lt as getMimeValues, M as prettifyRowColumnCount, Mt as loadTableData, N as prettifyRowCount, Nt as INDEX_COLUMN_NAME, O as ColumnPreviewContainer, Ot as useIntersectionObserver, P as getColumnCountForDisplay, Pt as SELECT_COLUMN_ID, Q as CommandList, Qt as RenderTextWithLinks, R as ContextMenuItem, Rt as isNullishFilter, S as downloadExportedFile, St as generateColumns, T as Filenames, Tt as ColumnChartContext, U as CompactChipRow, Ut as Tabs, V as useInternalStateWithSync, Vt as dateToLocalISODateTime, W as DatePicker, Wt as TabsContent, X as CommandInput, Xt as LazyVegaEmbed, Y as CommandEmpty, Yt as ChartLoadingState, Z as CommandItem, Zt as useOverflowDetection, _ as DataTable, _n as ChevronLeft, _t as TableCell, an as TextWrap, at as contextAwarePanelType, b as downloadBlob, bt as TableRow, c as SLIDE_TYPE_OPTIONS_BY_VALUE, cn as EyeOff, ct as slotsController, d as Switch, dn as Download, en as HtmlOutput, et as smartMatch, f as RadioGroup, fn as Code, g as OutputRenderer, gn as ChevronsDownUp, gt as TableBody, h as OutputArea, hn as ChevronsLeft, ht as Table, i as showCodeInRunModeAtom, in as $fae977aafc393c5c$export$6b862160d295c8e, it as contextAwarePanelOwner, j as LoadingState, jt as loadTableAndRawData, k as EmptyState, kt as usePrevious$1, lt as Toggle, m as JsonOutput, mn as ChevronsRight, mt as Provider$1, n as useNotebookCodeAvailable, nn as safeLocale, nt as PANEL_TYPES, on as GripHorizontal, ot as isCellAwareAtom, p as RadioGroupItem, pn as ChevronsUpDown, pt as Fill, q as ComboboxItem, qt as ChartErrorState, r as marimoVersionAtom, rn as $fae977aafc393c5c$export$588937bcd60ade55, rt as contextAwarePanelOpen, sn as Funnel, st as SlotNames, t as cellDomProps, tn as EmotionCacheProvider, tt as ContextAwarePanelItem, u as Slide, un as Ellipsis, v as InstallPackageButton, vn as ArrowDownWideNarrow, vt as TableHead, w as Progress, wt as renderCellValue, x as downloadByURL, xt as NAMELESS_COLUMN_PREFIX, y as ADD_PRINTING_CLASS, yt as TableHeader, z as ContextMenuSeparator, zt as Maps, __tla as __tla_2 } from "./common-CrqeqHZV.js";
+import { $ as CommandSeparator, $t as Kbd, A as ErrorState, At as getPageIndexForRow, B as ContextMenuTrigger, Bt as dateToLocalISODate, C as downloadHTMLAsImage, Ct as inferFieldTypes, D as ColumnName, Dt as DelayMount, E as downloadSizeLimitAtom, Et as ColumnChartSpecModel, F as getUserColumnVisibilityCounts, Ft as TOO_MANY_ROWS, G as DateRangePicker, Gt as TabsList, H as useSelectList, Ht as dateToLocalISOTime, I as ContextMenu, It as toFieldTypes, J as Command, Jt as ChartInfoState, K as Combobox, Kt as TabsTrigger, L as ContextMenuContent, Lt as getMimeValues, M as prettifyRowColumnCount, Mt as loadTableData, N as prettifyRowCount, Nt as INDEX_COLUMN_NAME, O as ColumnPreviewContainer, Ot as useIntersectionObserver, P as getColumnCountForDisplay, Pt as SELECT_COLUMN_ID, Q as CommandList, Qt as RenderTextWithLinks, R as ContextMenuItem, Rt as isNullishFilter, S as downloadExportedFile, St as generateColumns, T as Filenames, Tt as ColumnChartContext, U as CompactChipRow, Ut as Tabs, V as useInternalStateWithSync, Vt as dateToLocalISODateTime, W as DatePicker, Wt as TabsContent, X as CommandInput, Xt as LazyVegaEmbed, Y as CommandEmpty, Yt as ChartLoadingState, Z as CommandItem, Zt as useOverflowDetection, _ as DataTable, _n as ChevronLeft, _t as TableCell, an as TextWrap, at as contextAwarePanelType, b as downloadBlob, bt as TableRow, c as SLIDE_TYPE_OPTIONS_BY_VALUE, cn as EyeOff, ct as slotsController, d as Switch, dn as Download, en as HtmlOutput, et as smartMatch, f as RadioGroup, fn as Code, g as OutputRenderer, gn as ChevronsDownUp, gt as TableBody, h as OutputArea, hn as ChevronsLeft, ht as Table, i as showCodeInRunModeAtom, in as $fae977aafc393c5c$export$6b862160d295c8e, it as contextAwarePanelOwner, j as LoadingState, jt as loadTableAndRawData, k as EmptyState, kt as usePrevious$1, lt as Toggle, m as JsonOutput, mn as ChevronsRight, mt as Provider$1, n as useNotebookCodeAvailable, nn as safeLocale, nt as PANEL_TYPES, on as GripHorizontal, ot as isCellAwareAtom, p as RadioGroupItem, pn as ChevronsUpDown, pt as Fill, q as ComboboxItem, qt as ChartErrorState, r as marimoVersionAtom, rn as $fae977aafc393c5c$export$588937bcd60ade55, rt as contextAwarePanelOpen, sn as Funnel, st as SlotNames, t as cellDomProps, tn as EmotionCacheProvider, tt as ContextAwarePanelItem, u as Slide, un as Ellipsis, v as InstallPackageButton, vn as ArrowDownWideNarrow, vt as TableHead, w as Progress, wt as renderCellValue, x as downloadByURL, xt as NAMELESS_COLUMN_PREFIX, y as ADD_PRINTING_CLASS, yt as TableHeader, z as ContextMenuSeparator, zt as Maps, __tla as __tla_2 } from "./common-Wat9e-dh.js";
 import { c as Calendar, i as createReducerAndAtoms, n as useOnUnmount, o as ToggleLeft, t as useOnMount } from "./useLifecycle-CMJGqBaY.js";
 import { t as Check } from "./check-DP7U0H0G.js";
 import { A as Icon, C as logNever, D as $18f2051aff69b9bf$export$a54013f0d02a8f82, E as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7, F as createCollection, I as X, M as clamp$2, N as usePrevious$2, P as useDirection, R as ChevronDown, S as assertNever, a as SelectGroup, c as SelectSeparator, d as NativeSelect, i as SelectContent, j as Trigger$1, l as SelectTrigger, n as capitalize, o as SelectItem, r as Select, s as SelectLabel, t as Strings, u as SelectValue, w as $a916eb452884faea$export$b7a616150fdb9f44 } from "./strings-DIy9NAmg.js";
@@ -38147,7 +38147,7 @@ ${c}
   function _temp2$2(e) {
     e.target === e.currentTarget && e.key === "Enter" && (e.preventDefault(), e.stopPropagation(), e.currentTarget.click());
   }
-  var LazySlidesComponent = import_react.lazy(() => import("./reveal-component-DpS6VbRW.js"));
+  var LazySlidesComponent = import_react.lazy(() => import("./reveal-component-DpO-LAhf.js"));
   const SlidesLayoutRenderer = ({ layout: e, setLayout: r, cells: c, mode: l }) => {
     var _a5;
     let u = useAtomValue(kioskModeAtom), d = l === "read" || u, f = useAtomValue(numColumnsAtom) > 1, [p, m] = (0, import_react.useState)(null), { slideCells: h, skippedIds: g, noOutputIds: _, slideTypes: v, startCellIndex: y } = (0, import_react.useMemo)(() => computeSlideCellsInfo(c, e), [

package/dist/{reveal-component-DpS6VbRW.js → reveal-component-DpO-LAhf.js}

@@ -9,7 +9,7 @@ import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
 import { ut as outputIsStale } from "./html-to-image-3w0AakWW.js";
 import "./chunk-5FQGJX7Z-B9WoXK1R.js";
 import { u as createLucideIcon } from "./dist-DIlxLFXG.js";
-import { a as DEFAULT_DECK_TRANSITION, cn as EyeOff, dt as PanelGroup, fn as Code, ft as PanelResizeHandle, l as SlideSidebar, ln as Expand, n as useNotebookCodeAvailable, o as DEFAULT_DECK_VERTICAL_ALIGN, s as DEFAULT_SLIDE_TYPE, t as cellDomProps, u as Slide, ut as Panel } from "./common-CrqeqHZV.js";
+import { a as DEFAULT_DECK_TRANSITION, cn as EyeOff, dt as PanelGroup, fn as Code, ft as PanelResizeHandle, l as SlideSidebar, ln as Expand, n as useNotebookCodeAvailable, o as DEFAULT_DECK_VERTICAL_ALIGN, s as DEFAULT_SLIDE_TYPE, t as cellDomProps, u as Slide, ut as Panel } from "./common-Wat9e-dh.js";
 import { R as ChevronDown } from "./strings-DIy9NAmg.js";
 import { X as useDebouncedCallback } from "./input-C5K4VBvB.js";
 import { v as kioskModeAtom } from "./toDate-CqhBWjvO.js";

package/package.json

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

package/src/components/editor/chrome/panels/write-secret-modal.tsx

@@ -19,9 +19,11 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
 import { toast } from "@/components/ui/use-toast";
 import { useRequestClient } from "@/core/network/requests";
 import type { ListSecretKeysResponse } from "@/core/network/types";
+import { flattenSecretValue } from "../../connections/json-credentials";
 
 // dotenv providers should be at the top
 export function sortProviders(providers: ListSecretKeysResponse["keys"]) {
@@ -44,10 +46,21 @@ export const WriteSecretModal: React.FC<{
   onClose: () => void;
   onSuccess: (secretName: string) => void;
   initialValue?: string;
-}> = ({ providerNames, onClose, onSuccess, initialValue }) => {
+  multiline?: boolean;
+}> = ({
+  providerNames,
+  onClose,
+  onSuccess,
+  initialValue = "",
+  multiline = false,
+}) => {
   const { writeSecret } = useRequestClient();
   const [key, setKey] = React.useState("");
-  const [value, setValue] = React.useState(initialValue || "");
+  // Multiline values are flattened so they fit on a single dotenv line;
+  // the textarea still wraps visually for readability.
+  const [value, setValue] = React.useState(() =>
+    multiline ? flattenSecretValue(initialValue) : initialValue,
+  );
   const [location, setLocation] = React.useState<string | undefined>(
     providerNames[0],
   );
@@ -65,7 +78,9 @@ export const WriteSecretModal: React.FC<{
       return;
     }
 
-    if (!key || !value || !location) {
+    const secretValue = multiline ? flattenSecretValue(value) : value;
+
+    if (!key || !secretValue || !location) {
       toast({
         title: "Error",
         description: "Please fill in all fields.",
@@ -77,7 +92,7 @@ export const WriteSecretModal: React.FC<{
     try {
       await writeSecret({
         key,
-        value,
+        value: secretValue,
         provider,
         name: location,
       });
@@ -120,14 +135,27 @@ export const WriteSecretModal: React.FC<{
           </div>
           <div className="grid gap-2">
             <Label htmlFor="value">Value</Label>
-            <Input
-              id="value"
-              type="password"
-              value={value}
-              onChange={(e) => setValue(e.target.value)}
-              required={true}
-              autoComplete="off"
-            />
+            {multiline ? (
+              <Textarea
+                id="value"
+                value={value}
+                onChange={(e) => setValue(flattenSecretValue(e.target.value))}
+                required={true}
+                className="my-0 font-code text-xs break-all"
+                rows={8}
+                autoFocus={true}
+                autoComplete="off"
+              />
+            ) : (
+              <Input
+                id="value"
+                type="password"
+                value={value}
+                onChange={(e) => setValue(e.target.value)}
+                required={true}
+                autoComplete="off"
+              />
+            )}
             {/* http is prone to man-in-the-middle */}
             {isHttpUrl() && (
               <FormDescription>

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

@@ -0,0 +1,114 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { describe, expect, test } from "vitest";
+import {
+  escapePythonString,
+  flattenSecretValue,
+  looksLikeJson,
+  resolveJsonCredential,
+} from "../json-credentials";
+import { prefixPath } from "../paths";
+import { prefixSecret } from "../secrets";
+
+describe("resolveJsonCredential", () => {
+  test("resolves a file path", () => {
+    expect(
+      resolveJsonCredential(prefixPath("/etc/secrets/key.json"), (v) => v),
+    ).toEqual({ kind: "path", path: "/etc/secrets/key.json" });
+  });
+
+  test("resolves a secret via printSecret", () => {
+    expect(
+      resolveJsonCredential(prefixSecret("MY_CREDS"), () => "_my_creds"),
+    ).toEqual({ kind: "json", expr: "json.loads(_my_creds)" });
+  });
+
+  test("resolves a raw JSON literal", () => {
+    expect(
+      resolveJsonCredential('{"type":"service_account"}', (v) => v),
+    ).toEqual({
+      kind: "json",
+      expr: 'json.loads(r"""{"type":"service_account"}""")',
+    });
+  });
+
+  test("uses a raw string so escaped newlines in a private_key survive", () => {
+    const credentialsJson =
+      '{"private_key":"-----BEGIN PRIVATE KEY-----\\nabc123\\n-----END PRIVATE KEY-----\\n"}';
+    const credential = resolveJsonCredential(credentialsJson, (v) => v);
+    expect(credential).toEqual({
+      kind: "json",
+      expr: `json.loads(r"""${credentialsJson}""")`,
+    });
+  });
+
+  test("prefers path over secret-looking values", () => {
+    // A path-prefixed value wins even if the path text starts with "env:".
+    expect(
+      resolveJsonCredential(prefixPath("env:not-a-secret"), (v) => v),
+    ).toEqual({ kind: "path", path: "env:not-a-secret" });
+  });
+});
+
+describe("looksLikeJson", () => {
+  test("detects objects and arrays, including partial paste", () => {
+    expect(looksLikeJson('{"type":"service_account"}')).toBe(true);
+    expect(looksLikeJson("  {")).toBe(true);
+    expect(looksLikeJson("[1, 2]")).toBe(true);
+    expect(looksLikeJson("/etc/secrets/key.json")).toBe(false);
+    expect(looksLikeJson("MY_SECRET")).toBe(false);
+    expect(looksLikeJson("")).toBe(false);
+  });
+
+  test("drives the path vs. create-secret combobox actions exclusively", () => {
+    // These mirror how SECRET_TEXTAREA_RENDERER wires allowCustomValue /
+    // allowCreateSecret, so a path and a JSON paste never both offer (or
+    // both hide) the wrong action.
+    const allowCustomValue = (search: string) => !looksLikeJson(search);
+    const allowCreateSecret = (search: string) =>
+      !search || looksLikeJson(search);
+
+    expect(allowCustomValue("/etc/secrets/key.json")).toBe(true);
+    expect(allowCreateSecret("/etc/secrets/key.json")).toBe(false);
+
+    expect(allowCustomValue('{"type":"service_account"}')).toBe(false);
+    expect(allowCreateSecret('{"type":"service_account"}')).toBe(true);
+
+    expect(allowCreateSecret("")).toBe(true);
+  });
+});
+
+describe("flattenSecretValue", () => {
+  test("minifies valid JSON", () => {
+    expect(
+      flattenSecretValue(`{
+  "type": "service_account",
+  "project_id": "test"
+}`),
+    ).toBe('{"type":"service_account","project_id":"test"}');
+  });
+
+  test("strips newlines from non-JSON", () => {
+    expect(flattenSecretValue("line1\nline2\r\nline3")).toBe("line1line2line3");
+  });
+
+  test("returns empty for blank input", () => {
+    expect(flattenSecretValue("")).toBe("");
+    expect(flattenSecretValue("   \n  ")).toBe("");
+  });
+});
+
+describe("escapePythonString", () => {
+  test("escapes backslashes and quotes", () => {
+    expect(escapePythonString('C:\\tmp\\"creds".json')).toBe(
+      'C:\\\\tmp\\\\\\"creds\\".json',
+    );
+    expect(escapePythonString("/etc/secrets/key.json")).toBe(
+      "/etc/secrets/key.json",
+    );
+  });
+
+  test("escapes control characters", () => {
+    expect(escapePythonString("line1\nline2")).toBe("line1\\nline2");
+    expect(escapePythonString("a\tb\rc")).toBe("a\\tb\\rc");
+  });
+});

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

@@ -0,0 +1,39 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { describe, expect, test } from "vitest";
+import {
+  isPath,
+  prefixPath,
+  type PathPlaceholder,
+  unprefixPath,
+} from "../paths";
+
+describe("paths", () => {
+  test("isPath", () => {
+    expect(isPath("path:/etc/secrets/key.json")).toBe(true);
+    expect(isPath("path:")).toBe(true);
+    expect(isPath("/etc/secrets/key.json")).toBe(false);
+    expect(isPath("env:MY_SECRET")).toBe(false);
+    expect(isPath("")).toBe(false);
+    expect(isPath(null)).toBe(false);
+    expect(isPath(undefined)).toBe(false);
+    expect(isPath(123)).toBe(false);
+  });
+
+  test("prefixPath", () => {
+    expect(prefixPath("/etc/secrets/key.json")).toBe(
+      "path:/etc/secrets/key.json",
+    );
+    expect(prefixPath("")).toBe("path:");
+  });
+
+  test("unprefixPath", () => {
+    expect(unprefixPath("path:/etc/secrets/key.json" as PathPlaceholder)).toBe(
+      "/etc/secrets/key.json",
+    );
+    expect(unprefixPath("path:" as PathPlaceholder)).toBe("");
+    // Only strips the leading prefix — path may itself contain "path:".
+    expect(unprefixPath("path:/tmp/path:weird.json" as PathPlaceholder)).toBe(
+      "/tmp/path:weird.json",
+    );
+  });
+});

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

@@ -21,9 +21,13 @@ import { maybeAddMarimoImport } from "@/core/cells/add-missing-import";
 import { useCellActions } from "@/core/cells/cells";
 import { useLastFocusedCellId } from "@/core/cells/focus";
 import { autoInstantiateAtom } from "@/core/config/config";
-import { ENV_RENDERER, SecretsProvider } from "./form-renderers";
+import {
+  ENV_RENDERER,
+  SECRET_TEXTAREA_RENDERER,
+  SecretsProvider,
+} from "./form-renderers";
 
-const RENDERERS: FormRenderer[] = [ENV_RENDERER];
+const RENDERERS: FormRenderer[] = [ENV_RENDERER, SECRET_TEXTAREA_RENDERER];
 
 /**
  * Grid layout for provider/database selector buttons.

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

@@ -4,7 +4,7 @@ exports[`generateDatabaseCode > basic connections > bigquery 1`] = `
 "import json
 import sqlmodel
 
-credentials = json.loads("""{"type": "service_account", "project_id": "test"}""")
+credentials = json.loads(r"""{"type": "service_account", "project_id": "test"}""")
 engine = sqlmodel.create_engine(f"bigquery://my-project/my_dataset", credentials_info=credentials)"
 `;
 
@@ -388,10 +388,26 @@ import sqlmodel
 
 _project = os.environ.get("ENV_PROJECT")
 _dataset = os.environ.get("ENV_DATASET")
-credentials = json.loads("""{"type": "service_account", "project_id": "test"}""")
+credentials = json.loads(r"""{"type": "service_account", "project_id": "test"}""")
 engine = sqlmodel.create_engine(f"bigquery://{_project}/{_dataset}", credentials_info=credentials)"
 `;
 
+exports[`generateDatabaseCode > connections with secrets > bigquery with credentials_json as a file path 1`] = `
+"import sqlmodel
+
+engine = sqlmodel.create_engine(f"bigquery://my-project/my_dataset", credentials_path="/etc/secrets/bigquery.json")"
+`;
+
+exports[`generateDatabaseCode > connections with secrets > bigquery with credentials_json as secret 1`] = `
+"import json
+import os
+import sqlmodel
+
+_credentials_json = os.environ.get("BIGQUERY_CREDENTIALS_JSON")
+credentials = json.loads(_credentials_json)
+engine = sqlmodel.create_engine(f"bigquery://my-project/my_dataset", credentials_info=credentials)"
+`;
+
 exports[`generateDatabaseCode > connections with secrets > clickhouse with all connection details as secrets 1`] = `
 "import clickhouse_connect
 import os
@@ -493,7 +509,7 @@ exports[`generateDatabaseCode > edge cases > bigquery with long credentials 1`]
 "import json
 import sqlmodel
 
-credentials = json.loads("""xxxxxxxxxx""")
+credentials = json.loads(r"""xxxxxxxxxx""")
 engine = sqlmodel.create_engine(f"bigquery://my-project/my_dataset", credentials_info=credentials)"
 `;
 
@@ -735,7 +751,7 @@ exports[`generateDatabaseCode > security cases > bigquery with malformed JSON 1`
 "import json
 import sqlmodel
 
-credentials = json.loads("""{"type": "service_account", "project_id": "test"""")
+credentials = json.loads(r"""{"type": "service_account", "project_id": "test"""")
 engine = sqlmodel.create_engine(f"bigquery://my-project/my_dataset", credentials_info=credentials)"
 `;
 
@@ -743,7 +759,7 @@ exports[`generateDatabaseCode > security cases > bigquery with malformed JSON 2`
 "import json
 import sqlalchemy
 
-credentials = json.loads("""{"type": "service_account", "project_id": "test"""")
+credentials = json.loads(r"""{"type": "service_account", "project_id": "test"""")
 engine = sqlalchemy.create_engine(f"bigquery://my-project/my_dataset", credentials_info=credentials)"
 `;
 

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

@@ -1,5 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import { describe, expect, it } from "vitest";
+import { prefixPath } from "../../paths";
 import { prefixSecret } from "../../secrets";
 import { type ConnectionLibrary, generateDatabaseCode } from "../as-code";
 import type { DatabaseConnection } from "../schemas";
@@ -383,6 +384,22 @@ describe("generateDatabaseCode", () => {
         },
         "sqlmodel",
       ],
+      [
+        "bigquery with credentials_json as secret",
+        {
+          ...bigqueryConnection,
+          credentials_json: prefixSecret("BIGQUERY_CREDENTIALS_JSON"),
+        },
+        "sqlmodel",
+      ],
+      [
+        "bigquery with credentials_json as a file path",
+        {
+          ...bigqueryConnection,
+          credentials_json: prefixPath("/etc/secrets/bigquery.json"),
+        },
+        "sqlmodel",
+      ],
       [
         "clickhouse with all connection details as secrets",
         {

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

@@ -2,6 +2,7 @@
 
 import dedent from "string-dedent";
 import { assertNever } from "@/utils/assertNever";
+import { escapePythonString, resolveJsonCredential } from "../json-credentials";
 import { isSecret, unprefixSecret } from "../secrets";
 import { type DatabaseConnection, DatabaseConnectionSchema } from "./schemas";
 
@@ -415,8 +416,14 @@ ${formatUrlParams(params, (inner) => `              ${inner}`)},
 }
 
 class BigQueryGenerator extends CodeGenerator<"bigquery"> {
+  private get credential() {
+    return resolveJsonCredential(this.connection.credentials_json, (v) =>
+      this.secrets.print("credentials_json", v),
+    );
+  }
+
   generateImports(): string[] {
-    return ["import json"];
+    return this.credential.kind === "path" ? [] : ["import json"];
   }
 
   generateConnectionCode(): string {
@@ -428,9 +435,16 @@ class BigQueryGenerator extends CodeGenerator<"bigquery"> {
       "dataset",
       this.connection.dataset,
     );
+    const credential = this.credential;
+
+    if (credential.kind === "path") {
+      return dedent(`
+        engine = ${this.orm}.create_engine(f"bigquery://${project}/${dataset}", credentials_path="${escapePythonString(credential.path)}")
+      `);
+    }
 
     return dedent(`
-      credentials = json.loads("""${this.connection.credentials_json}""")
+      credentials = ${credential.expr}
       engine = ${this.orm}.create_engine(f"bigquery://${project}/${dataset}", credentials_info=credentials)
     `);
   }

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

@@ -295,11 +295,12 @@ export const BigQueryConnectionSchema = z
           optionRegex: "(bigquery.?dataset|dataset)",
         }),
       ),
-    credentials_json: z
-      .string()
-      .describe(
-        FieldOptions.of({ label: "Credentials JSON", inputType: "textarea" }),
-      ),
+    credentials_json: z.string().describe(
+      FieldOptions.of({
+        label: "Credentials JSON",
+        special: "secret_textarea",
+      }),
+    ),
   })
   .describe(FieldOptions.of({ direction: "two-columns" }));
 

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/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

@@ -85,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,
 )"
@@ -114,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)"
 `;
 

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

@@ -1,5 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import { describe, expect, it } from "vitest";
+import { prefixPath } from "../../paths";
 import { prefixSecret } from "../../secrets";
 import { generateStorageCode } from "../as-code";
 import type { StorageConnection } from "../schemas";
@@ -155,6 +156,26 @@ describe("generateStorageCode", () => {
         generateStorageCode(conn, { library: "obstore" }),
       ).toMatchSnapshot();
     });
+
+    it("with service account key from secrets", () => {
+      const conn: StorageConnection = {
+        ...baseGCS,
+        service_account_key: prefixSecret("GCS_SERVICE_ACCOUNT_KEY"),
+      };
+      expect(
+        generateStorageCode(conn, { library: "obstore" }),
+      ).toMatchSnapshot();
+    });
+
+    it("with service account key from a file path", () => {
+      const conn: StorageConnection = {
+        ...baseGCS,
+        service_account_key: prefixPath("/etc/secrets/gcs.json"),
+      };
+      expect(
+        generateStorageCode(conn, { library: "obstore" }),
+      ).toMatchSnapshot();
+    });
   });
 
   describe("Azure", () => {
@@ -266,6 +287,26 @@ describe("generateStorageCode", () => {
         generateStorageCode(conn, { library: "fsspec", isEmbedded: true }),
       ).toMatchSnapshot();
     });
+
+    it("with service account credentials from secrets", () => {
+      const conn: StorageConnection = {
+        ...baseGDrive,
+        credentials_json: prefixSecret("GDRIVE_CREDENTIALS_JSON"),
+      };
+      expect(
+        generateStorageCode(conn, { library: "fsspec" }),
+      ).toMatchSnapshot();
+    });
+
+    it("with service account credentials from a file path", () => {
+      const conn: StorageConnection = {
+        ...baseGDrive,
+        credentials_json: prefixPath("/etc/secrets/gdrive.json"),
+      };
+      expect(
+        generateStorageCode(conn, { library: "fsspec" }),
+      ).toMatchSnapshot();
+    });
   });
 
   describe("invalid cases", () => {

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

@@ -2,6 +2,7 @@
 
 import dedent from "string-dedent";
 import { assertNever } from "@/utils/assertNever";
+import { escapePythonString, resolveJsonCredential } from "../json-credentials";
 import { isSecret, unprefixSecret } from "../secrets";
 import {
   type S3Auth,
@@ -120,20 +121,36 @@ function generateGCSCode(
   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}""")
+  if (!connection.service_account_key) {
+    return {
+      imports,
+      code: dedent(`
+        store = GCSStore(${bucket})
+      `),
+    };
+  }
+
+  const credential = resolveJsonCredential(
+    connection.service_account_key,
+    (v) => secrets.print("service_account_key", v),
+  );
+
+  if (credential.kind === "path") {
+    const code = dedent(`
       store = GCSStore(${bucket},
-          service_account_key=_credentials,
+          service_account_path="${escapePythonString(credential.path)}",
       )
     `);
-  } else {
-    code = dedent(`
-      store = GCSStore(${bucket})
-    `);
+    return { imports, code };
   }
+
+  imports.add("import json");
+  const code = dedent(`
+    _credentials = ${credential.expr}
+    store = GCSStore(${bucket},
+        service_account_key=_credentials,
+    )
+  `);
   return { imports, code };
 }
 
@@ -195,13 +212,20 @@ function generateGDriveCode(
   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 credential = resolveJsonCredential(connection.credentials_json, (v) =>
+      secrets.print("credentials_json", v),
     );
+    // gdrive-fsspec accepts a filesystem path as `creds` when the string
+    // doesn't start with "{"; otherwise it expects a JSON object/string.
+    if (credential.kind === "path") {
+      const code = dedent(`
+        fs = GoogleDriveFileSystem(creds="${escapePythonString(credential.path)}", token="service_account", use_listings_cache=False, skip_instance_cache=True)
+      `);
+      return { imports, code };
+    }
+    imports.add("import json");
     const code = dedent(`
-      _creds = json.loads("""${connection.credentials_json?.startsWith("ENV:") ? `{${creds}}` : connection.credentials_json}""")
+      _creds = ${credential.expr}
       fs = GoogleDriveFileSystem(creds=_creds, token="service_account", use_listings_cache=False, skip_instance_cache=True)
     `);
     return { imports, code };

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

@@ -138,7 +138,7 @@ export const GCSStorageSchema = z
       .describe(
         FieldOptions.of({
           label: "Service Account Key (JSON)",
-          inputType: "textarea",
+          special: "secret_textarea",
         }),
       ),
   })
@@ -214,7 +214,7 @@ export const GoogleDriveStorageSchema = z
         FieldOptions.of({
           label: "Service Account JSON",
           description: "Leave empty to use browser-based authentication",
-          inputType: "textarea",
+          special: "secret_textarea",
         }),
       ),
   })

package/src/components/forms/options.ts

@@ -28,7 +28,8 @@ export interface FieldOptions {
     | "date"
     | "datetime"
     | "time"
-    | "tabs";
+    | "tabs"
+    | "secret_textarea";
   /**
    * Only show options that match the regex
    */