@marimo-team/frontend 0.23.15-dev7 → 0.23.15-dev72

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

@@ -1,20 +1,10 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { KeyIcon, PlusCircleIcon } from "lucide-react";
-import { createContext, type ReactNode, use } from "react";
+import { createContext, type ReactNode, use, useMemo } from "react";
 import { z } from "zod";
 import type { FormRenderer } from "@/components/forms/form";
 import { FieldOptions } from "@/components/forms/options";
 import { useImperativeModal } from "@/components/modal/ImperativeModal";
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
 import {
   FormControl,
   FormDescription,
@@ -23,18 +13,15 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { NumberField } from "@/components/ui/number-field";
 import { SECRETS_REGISTRY } from "@/core/secrets/request-registry";
 import { useAsyncData } from "@/hooks/useAsyncData";
-import { partition } from "@/utils/arrays";
-import { cn } from "@/utils/cn";
 import { Functions } from "@/utils/functions";
 import {
   sortProviders,
   WriteSecretModal,
 } from "../chrome/panels/write-secret-modal";
-import { displaySecret, isSecret, prefixSecret } from "./secrets";
+import { partitionSecretKeys, SecretCombobox } from "./secret-combobox";
+import { prefixSecret } from "./secrets";
 
 interface SecretsContextType {
   providerNames: string[];
@@ -77,25 +64,23 @@ export const SecretsProvider = ({ children }: SecretsProviderProps) => {
     };
   }, []);
 
-  return (
-    <SecretsContext
-      value={{
-        secretKeys: data?.secretKeys || [],
-        providerNames: data?.providerNames || [],
-        loading: isPending,
-        error,
-        refreshSecrets: reload,
-      }}
-    >
-      {children}
-    </SecretsContext>
+  const value = useMemo(
+    () => ({
+      secretKeys: data?.secretKeys || [],
+      providerNames: data?.providerNames || [],
+      loading: isPending,
+      error,
+      refreshSecrets: reload,
+    }),
+    [data?.secretKeys, data?.providerNames, isPending, error, reload],
   );
+
+  return <SecretsContext value={value}>{children}</SecretsContext>;
 };
 
-export const ENV_RENDERER: FormRenderer<z.ZodString | z.ZodNumber> = {
-  isMatch: (schema: z.ZodType): schema is z.ZodString | z.ZodNumber => {
-    // string or number with optionsRegex
-    if (schema instanceof z.ZodString || schema instanceof z.ZodNumber) {
+export const ENV_RENDERER: FormRenderer<z.ZodString> = {
+  isMatch: (schema: z.ZodType): schema is z.ZodString => {
+    if (schema instanceof z.ZodString) {
       const { optionRegex } = FieldOptions.parse(schema.description || "");
       return Boolean(optionRegex);
     }
@@ -109,12 +94,13 @@ export const ENV_RENDERER: FormRenderer<z.ZodString | z.ZodNumber> = {
     const {
       label,
       description,
+      placeholder,
       optionRegex = "",
+      inputType,
     } = FieldOptions.parse(schema.description || "");
 
-    const [recommendedKeys, otherKeys] = partition(secretKeys, (key) =>
-      new RegExp(optionRegex, "i").test(key),
-    );
+    const secretsOnly = inputType === "password";
+    const { recommended, other } = partitionSecretKeys(secretKeys, optionRegex);
 
     return (
       <FormField
@@ -125,82 +111,28 @@ export const ENV_RENDERER: FormRenderer<z.ZodString | z.ZodNumber> = {
             <FormLabel>{label}</FormLabel>
             <FormDescription>{description}</FormDescription>
             <FormControl>
-              <div className="flex gap-2">
-                {schema instanceof z.ZodString ? (
-                  <Input
-                    {...field}
-                    value={displaySecret(field.value as string)}
-                    onChange={field.onChange}
-                    className={cn("flex-1")}
-                  />
-                ) : (
-                  <NumberField
-                    {...field}
-                    value={field.value as number}
-                    onChange={field.onChange}
-                    className="flex-1"
-                  />
-                )}
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild={true}>
-                    <Button
-                      variant="outline"
-                      size="icon"
-                      className={cn(
-                        isSecret(field.value as string) && "bg-accent",
-                      )}
-                    >
-                      <KeyIcon className="h-3 w-3" />
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent
-                    align="end"
-                    className="max-h-60 overflow-y-auto"
-                  >
-                    <DropdownMenuItem
-                      onSelect={() => {
-                        openModal(
-                          <WriteSecretModal
-                            providerNames={providerNames}
-                            onSuccess={(secretKey) => {
-                              refreshSecrets();
-                              field.onChange(prefixSecret(secretKey));
-                              closeModal();
-                            }}
-                            onClose={closeModal}
-                          />,
-                        );
+              <SecretCombobox
+                value={field.value ? String(field.value) : ""}
+                onChange={field.onChange}
+                placeholder={placeholder}
+                secretsOnly={secretsOnly}
+                recommendedKeys={recommended}
+                otherKeys={other}
+                onCreateSecret={(suggestedValue) => {
+                  openModal(
+                    <WriteSecretModal
+                      providerNames={providerNames}
+                      initialValue={suggestedValue}
+                      onSuccess={(secretKey) => {
+                        refreshSecrets();
+                        field.onChange(prefixSecret(secretKey));
+                        closeModal();
                       }}
-                    >
-                      <PlusCircleIcon className="mr-2 h-3.5 w-3.5" />
-                      Create a new secret
-                    </DropdownMenuItem>
-                    {recommendedKeys.length > 0 && (
-                      <>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuLabel>Recommended</DropdownMenuLabel>
-                      </>
-                    )}
-                    {recommendedKeys.map((key) => (
-                      <DropdownMenuItem
-                        key={key}
-                        onSelect={() => field.onChange(prefixSecret(key))}
-                      >
-                        {displaySecret(key)}
-                      </DropdownMenuItem>
-                    ))}
-                    {otherKeys.length > 0 && <DropdownMenuSeparator />}
-                    {otherKeys.map((key) => (
-                      <DropdownMenuItem
-                        key={key}
-                        onSelect={() => field.onChange(prefixSecret(key))}
-                      >
-                        {displaySecret(key)}
-                      </DropdownMenuItem>
-                    ))}
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </div>
+                      onClose={closeModal}
+                    />,
+                  );
+                }}
+              />
             </FormControl>
             <FormMessage />
           </FormItem>

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

@@ -0,0 +1,253 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { ChevronDownIcon, KeyIcon, PlusCircleIcon, XIcon } from "lucide-react";
+import React, { useState } from "react";
+import {
+  Command,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/utils/cn";
+import { displaySecret, isSecret, prefixSecret } from "./secrets";
+
+export function partitionSecretKeys(
+  secretKeys: string[],
+  optionRegex: string,
+): { recommended: string[]; other: string[] } {
+  if (!optionRegex) {
+    return { recommended: [], other: [...secretKeys] };
+  }
+
+  let pattern: RegExp;
+  try {
+    pattern = new RegExp(optionRegex, "i");
+  } catch {
+    return { recommended: [], other: [...secretKeys] };
+  }
+
+  const recommended: string[] = [];
+  const other: string[] = [];
+  for (const key of secretKeys) {
+    if (pattern.test(key)) {
+      recommended.push(key);
+    } else {
+      other.push(key);
+    }
+  }
+  return { recommended, other };
+}
+
+interface SecretComboboxProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  /** When true, only secrets (or creating one) can be chosen — no free-text literals. */
+  secretsOnly?: boolean;
+  recommendedKeys: string[];
+  otherKeys: string[];
+  /** Opens the create-secret flow; `suggestedValue` is the current search text when present. */
+  onCreateSecret: (suggestedValue?: string) => void;
+  className?: string;
+}
+
+/**
+ * Searchable combobox for connection fields that may reference secrets.
+ *
+ * - Default: pick a secret, create one, or commit a free-text literal.
+ * - `secretsOnly`: pick or create a secret only (for passwords/tokens/keys).
+ */
+export const SecretCombobox: React.FC<SecretComboboxProps> = ({
+  value,
+  onChange,
+  placeholder,
+  secretsOnly = false,
+  recommendedKeys,
+  otherKeys,
+  onCreateSecret,
+  className,
+}) => {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState("");
+
+  const trimmedSearch = search.trim();
+  // 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;
+
+  const displayValue = (() => {
+    if (!value) {
+      return null;
+    }
+    if (isSecret(value)) {
+      return displaySecret(value);
+    }
+    return value;
+  })();
+
+  const selectSecret = (key: string) => {
+    onChange(prefixSecret(key));
+    setOpen(false);
+    setSearch("");
+  };
+
+  const selectCustom = (custom: string) => {
+    onChange(custom);
+    setOpen(false);
+    setSearch("");
+  };
+
+  const clearValue = () => {
+    onChange("");
+    setSearch("");
+    setOpen(false);
+  };
+
+  return (
+    <div
+      className={cn("flex w-full min-w-48 mb-1 items-center gap-1", className)}
+    >
+      <Popover
+        modal={true} // own scroll lock so trackpad/wheel works inside the portaled list
+        open={open}
+        onOpenChange={(next) => {
+          setOpen(next);
+          if (!next) {
+            setSearch("");
+          }
+        }}
+      >
+        <PopoverTrigger asChild={true}>
+          <button
+            type="button"
+            className={cn(
+              "flex h-6 min-w-0 flex-1 shadow-xs-solid items-center justify-between",
+              "rounded-sm border border-input bg-background px-1.5 text-sm font-code ring-offset-background placeholder:text-muted-foreground",
+              "hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid",
+              isSecret(value) && "bg-accent",
+            )}
+            aria-expanded={open}
+          >
+            <span className="truncate flex-1 min-w-0 text-left flex items-center gap-1.5">
+              {displayValue ? (
+                <>
+                  {isSecret(value) && (
+                    <KeyIcon className="h-3 w-3 shrink-0 opacity-70" />
+                  )}
+                  <span className="truncate">{displayValue}</span>
+                </>
+              ) : (
+                <span className="text-muted-foreground">{placeholder}</span>
+              )}
+            </span>
+            <ChevronDownIcon className="ml-1 h-4 w-4 opacity-50 shrink-0" />
+          </button>
+        </PopoverTrigger>
+        <PopoverContent
+          className="w-(--radix-popover-trigger-width) p-0"
+          align="start"
+        >
+          <Command>
+            <CommandInput
+              placeholder={
+                secretsOnly
+                  ? "Search secrets..."
+                  : "Type a value or search secrets..."
+              }
+              rootClassName="px-1 h-8"
+              autoFocus={true}
+              value={search}
+              onValueChange={setSearch}
+            />
+            <CommandList className="max-h-60 overscroll-contain">
+              {showCustomValue && (
+                <CommandGroup>
+                  <CommandItem
+                    value={`use custom value ${trimmedSearch}`}
+                    onSelect={() => selectCustom(trimmedSearch)}
+                  >
+                    Use "{trimmedSearch}"
+                  </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" />
+                  <CommandGroup heading="Recommended">
+                    {recommendedKeys.map((key) => (
+                      <CommandItem
+                        key={key}
+                        value={key}
+                        onSelect={() => selectSecret(key)}
+                      >
+                        <KeyIcon className="mr-2 h-3 w-3 opacity-70" />
+                        {key}
+                      </CommandItem>
+                    ))}
+                  </CommandGroup>
+                </>
+              )}
+              {otherKeys.length > 0 && (
+                <>
+                  <CommandSeparator className="mt-0" />
+                  <CommandGroup
+                    heading={recommendedKeys.length > 0 ? "Other" : undefined}
+                  >
+                    {otherKeys.map((key) => (
+                      <CommandItem
+                        key={key}
+                        value={key}
+                        onSelect={() => selectSecret(key)}
+                      >
+                        <KeyIcon className="mr-2 h-3 w-3 opacity-70" />
+                        {key}
+                      </CommandItem>
+                    ))}
+                  </CommandGroup>
+                </>
+              )}
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+      {value && (
+        <button
+          type="button"
+          aria-label="Clear"
+          className={cn(
+            "flex h-6 w-6 shrink-0 items-center justify-center rounded-sm",
+            "text-muted-foreground hover:bg-muted hover:text-foreground",
+            "focus:outline-hidden focus:ring-1 focus:ring-ring",
+          )}
+          onClick={clearValue}
+        >
+          <XIcon className="h-3.5 w-3.5" />
+        </button>
+      )}
+    </div>
+  );
+};

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

@@ -12,6 +12,7 @@ export const S3StorageSchema = z
         FieldOptions.of({
           label: "Bucket",
           placeholder: "my-bucket",
+          optionRegex: "(bucket|s3.?bucket)",
         }),
       ),
     region: z
@@ -21,6 +22,7 @@ export const S3StorageSchema = z
         FieldOptions.of({
           label: "Region",
           placeholder: "us-east-1",
+          optionRegex: "(region|aws.?region)",
         }),
       ),
     access_key_id: z
@@ -30,7 +32,7 @@ export const S3StorageSchema = z
         FieldOptions.of({
           label: "Access Key ID",
           inputType: "password",
-          optionRegex: ".*access_key.*",
+          optionRegex: "(access.?key.?id|aws.?access.?key)",
         }),
       ),
     secret_access_key: z
@@ -40,7 +42,7 @@ export const S3StorageSchema = z
         FieldOptions.of({
           label: "Secret Access Key",
           inputType: "password",
-          optionRegex: ".*secret.*access.*",
+          optionRegex: "(secret.?access.?key|aws.?secret)",
         }),
       ),
     endpoint_url: z
@@ -50,6 +52,7 @@ export const S3StorageSchema = z
         FieldOptions.of({
           label: "Endpoint URL",
           placeholder: "https://s3.amazonaws.com",
+          optionRegex: "(endpoint|s3.?url|s3.?endpoint)",
         }),
       ),
   })
@@ -65,6 +68,7 @@ export const GCSStorageSchema = z
         FieldOptions.of({
           label: "Bucket",
           placeholder: "my-bucket",
+          optionRegex: "(bucket|gcs.?bucket|google.?bucket)",
         }),
       ),
     service_account_key: z
@@ -98,7 +102,7 @@ export const AzureStorageSchema = z
         FieldOptions.of({
           label: "Account Name",
           placeholder: "storageaccount",
-          optionRegex: ".*account.*",
+          optionRegex: "(azure.?account|account.?name|storage.?account)",
         }),
       ),
     account_key: z
@@ -108,7 +112,7 @@ export const AzureStorageSchema = z
         FieldOptions.of({
           label: "Account Key",
           inputType: "password",
-          optionRegex: ".*azure.*key.*",
+          optionRegex: "(azure.?key|account.?key|storage.?key)",
         }),
       ),
   })
@@ -142,7 +146,8 @@ export const CoreWeaveStorageSchema = z
         FieldOptions.of({
           label: "Access Key ID",
           inputType: "password",
-          optionRegex: ".*object_storage_key.*",
+          optionRegex:
+            "(access.?key.?id|object.?storage.?key|aws.?access.?key)",
         }),
       ),
     secret_access_key: z
@@ -152,7 +157,8 @@ export const CoreWeaveStorageSchema = z
         FieldOptions.of({
           label: "Secret Access Key",
           inputType: "password",
-          optionRegex: ".*object_storage_secret.*",
+          optionRegex:
+            "(secret.?access.?key|object.?storage.?secret|aws.?secret)",
         }),
       ),
   })

package/src/components/editor/file-tree/download.ts

@@ -0,0 +1,46 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { getRequestClient } from "@/core/network/requests";
+import { getRuntimeManager } from "@/core/runtime/config";
+import { isWasm } from "@/core/wasm/utils";
+import { deserializeBlob } from "@/utils/blob";
+import { downloadBlob, downloadByURL } from "@/utils/download";
+import { type Base64String, base64ToDataURL } from "@/utils/json/base64";
+
+/**
+ * Download a workspace file by path.
+ *
+ * Over HTTP this navigates to a streaming download endpoint, so the
+ * browser's download manager handles the transfer and no file contents
+ * are buffered in memory. In WASM there is no HTTP server to stream
+ * from; contents come over the pyodide bridge as base64 and are saved
+ * via a Blob.
+ */
+export async function downloadFile(path: string, name: string): Promise<void> {
+  if (!isWasm()) {
+    const url = getRuntimeManager().formatNavigableHttpURL(
+      "api/files/download",
+      new URLSearchParams({ path }),
+    );
+    downloadByURL(url.toString(), name);
+    return;
+  }
+
+  const details = await getRequestClient().sendFileDetails({ path });
+  if (details.isBase64 && details.contents) {
+    const blob = deserializeBlob(
+      base64ToDataURL(
+        details.contents as Base64String,
+        details.mimeType || "application/octet-stream",
+      ),
+    );
+    downloadBlob(blob, name);
+  } else {
+    downloadBlob(
+      new Blob([details.contents || ""], {
+        type: details.mimeType || "application/octet-stream",
+      }),
+      name,
+    );
+  }
+}

package/src/components/editor/file-tree/file-explorer.tsx

@@ -62,16 +62,14 @@ import type { FileInfo } from "@/core/network/types";
 import { isWasm } from "@/core/wasm/utils";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { ErrorBanner } from "@/plugins/impl/common/error-banner";
-import { deserializeBlob } from "@/utils/blob";
 import { cn } from "@/utils/cn";
 import { copyToClipboard } from "@/utils/copy";
-import { downloadBlob } from "@/utils/download";
-import { type Base64String, base64ToDataURL } from "@/utils/json/base64";
 import { openNotebook } from "@/utils/links";
 import type { FilePath } from "@/utils/paths";
 import { makeDuplicateName } from "@/utils/pathUtils";
 import { jotaiJsonStorage } from "@/utils/storage/jotai";
 import { useTreeDndManager } from "./dnd-wrapper";
+import { downloadFile } from "./download";
 import { FileViewer } from "./file-viewer";
 import type { RequestingTree } from "./requesting-tree";
 import { openStateAtom, treeAtom } from "./state";
@@ -393,7 +391,7 @@ const Show = ({
 };
 
 const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
-  const { openFile, sendFileDetails } = useRequestClient();
+  const { openFile } = useRequestClient();
   const disableFileDownloads = useAtomValue(disableFileDownloadsAtom);
 
   const fileType: FileIconType = node.data.isDirectory
@@ -645,23 +643,7 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
             <>
               <DropdownMenuItem
                 onSelect={async () => {
-                  const details = await sendFileDetails({
-                    path: node.data.path,
-                  });
-                  if (details.isBase64 && details.contents) {
-                    const blob = deserializeBlob(
-                      base64ToDataURL(
-                        details.contents as Base64String,
-                        details.mimeType || "application/octet-stream",
-                      ),
-                    );
-                    downloadBlob(blob, node.data.name);
-                  } else {
-                    downloadBlob(
-                      new Blob([details.contents || ""]),
-                      node.data.name,
-                    );
-                  }
+                  await downloadFile(node.data.path, node.data.name);
                 }}
                 data-testid="file-explorer-download-menu-item"
               >

package/src/components/editor/file-tree/file-viewer.tsx

@@ -21,10 +21,9 @@ import { filenameAtom } from "@/core/saving/file-state";
 import { isWasm } from "@/core/wasm/utils";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { ErrorBanner } from "@/plugins/impl/common/error-banner";
-import { deserializeBlob } from "@/utils/blob";
 import { copyToClipboard } from "@/utils/copy";
-import { downloadBlob, downloadByURL } from "@/utils/download";
-import { type Base64String, base64ToDataURL } from "@/utils/json/base64";
+import type { Base64String } from "@/utils/json/base64";
+import { downloadFile } from "./download";
 import { FilePreviewHeader } from "./file-header";
 import {
   FileContentRenderer,
@@ -121,30 +120,8 @@ export const FileViewer: React.FC<Props> = ({ file, onOpenNotebook }) => {
     );
   }
 
-  const handleDownload = () => {
-    if (data.isBase64 && data.contents) {
-      if (isMediaMime(mimeType)) {
-        const dataURL = base64ToDataURL(
-          data.contents as Base64String,
-          mimeType,
-        );
-        downloadByURL(dataURL, data.file.name);
-      } else {
-        const blob = deserializeBlob(
-          base64ToDataURL(
-            data.contents as Base64String,
-            data.mimeType || "application/octet-stream",
-          ),
-        );
-        downloadBlob(blob, data.file.name);
-      }
-      return;
-    }
-
-    downloadBlob(
-      new Blob([data.contents || internalValue], { type: mimeType }),
-      data.file.name,
-    );
+  const handleDownload = async () => {
+    await downloadFile(file.path, data.file.name);
   };
 
   const header = (