@marimo-team/islands 0.20.5-dev9 → 0.20.5-dev90

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

@@ -218,12 +218,59 @@ export const SnowflakeConnectionSchema = z
           optionRegex: ".*snowflake.*",
         }),
       ),
-    username: usernameField(),
-    password: passwordField(),
     role: z
       .string()
       .optional()
       .describe(FieldOptions.of({ label: "Role" })),
+    authType: z
+      .discriminatedUnion("type", [
+        z.object({
+          type: z.literal("Password"),
+          username: usernameField(),
+          password: passwordField(),
+          enable_mfa: z
+            .boolean()
+            .default(false)
+            .describe(FieldOptions.of({ label: "Enable MFA (Duo Push)" })),
+        }),
+        z.object({
+          type: z.literal("SSO (Browser)"),
+          username: usernameField(),
+        }),
+        z.object({
+          type: z.literal("Key Pair"),
+          username: usernameField(),
+          private_key_path: z
+            .string()
+            .nonempty()
+            .describe(
+              FieldOptions.of({
+                label: "Private Key Path",
+                placeholder: "/path/to/rsa_key.p8",
+              }),
+            ),
+          private_key_passphrase: z
+            .string()
+            .optional()
+            .describe(
+              FieldOptions.of({
+                label: "Private Key Passphrase",
+                inputType: "password",
+                optionRegex: ".*passphrase.*",
+              }),
+            ),
+        }),
+        z.object({
+          type: z.literal("OAuth / PAT"),
+          token: tokenField("Token", true),
+        }),
+      ])
+      .default({
+        type: "Password",
+        username: "username",
+        enable_mfa: false,
+      })
+      .describe(FieldOptions.of({ special: "tabs" })),
   })
   .describe(FieldOptions.of({ direction: "two-columns" }));
 

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

@@ -8,7 +8,7 @@ import { type StorageConnection, StorageConnectionSchema } from "./schemas";
 export type StorageLibrary = "obstore" | "fsspec";
 
 export const StorageLibraryDisplayNames: Record<StorageLibrary, string> = {
-  obstore: "Obstore",
+  obstore: "obstore",
   fsspec: "fsspec",
 };
 

package/src/components/editor/controls/command-palette.tsx

@@ -78,6 +78,7 @@ const CommandPalette = () => {
     return (
       <CommandItem
         disabled={props.disabled}
+        keywords={hotkey.additionalKeywords}
         onSelect={() => {
           addRecentCommand(shortcut);
           // Close first and then run the action, so the dialog doesn't steal focus
@@ -105,15 +106,18 @@ const CommandPalette = () => {
     handle,
     props = {},
     hotkey,
+    additionalKeywords,
   }: {
     label: string;
     handle: () => void;
     props?: { disabled?: boolean; tooltip?: React.ReactNode };
     hotkey?: HotkeyAction;
+    additionalKeywords?: string[];
   }) => {
     return (
       <CommandItem
         disabled={props.disabled}
+        keywords={additionalKeywords}
         onSelect={() => {
           addRecentCommand(label);
           setOpen(false);
@@ -163,6 +167,7 @@ const CommandPalette = () => {
                       disabled: action.disabled,
                       tooltip: action.tooltip,
                     },
+                    additionalKeywords: action.additionalKeywords,
                   });
                 }
                 return null;
@@ -190,6 +195,7 @@ const CommandPalette = () => {
               label: action.label,
               handle: action.handleHeadless || action.handle,
               props: { disabled: action.disabled, tooltip: action.tooltip },
+              additionalKeywords: action.additionalKeywords,
             });
           })}
           {cellActions.map((action) => {
@@ -200,6 +206,7 @@ const CommandPalette = () => {
               label: `Cell > ${action.label}`,
               handle: action.handleHeadless || action.handle,
               props: { disabled: action.disabled, tooltip: action.tooltip },
+              additionalKeywords: action.additionalKeywords,
             });
           })}
         </CommandGroup>

package/src/components/editor/controls/keyboard-shortcuts.tsx

@@ -174,7 +174,9 @@ export const KeyboardShortcuts: React.FC = () => {
                 return;
               }
 
-              let key = e.key.toLowerCase();
+              // Single character keys are always lowercase (e.g. "a", "b", "c")
+              // But we should preserve the original case for other keys (e.g. "Enter", "Escape")
+              let key = e.key.length === 1 ? e.key.toLowerCase() : e.key;
               // Handle edge cases
               if (e.key === " ") {
                 key = "Space";

package/src/components/editor/file-tree/__tests__/requesting-tree.test.ts

@@ -1,5 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+import { MockModules } from "@/__mocks__/common";
 import { toast } from "@/components/ui/use-toast";
 import type { FilePath } from "@/utils/paths";
 import { RequestingTree } from "../requesting-tree";
@@ -9,9 +10,7 @@ const sendCreateFileOrFolder = vi.fn();
 const sendDeleteFileOrFolder = vi.fn();
 const sendRenameFileOrFolder = vi.fn();
 
-vi.mock("@/components/ui/use-toast", () => ({
-  toast: vi.fn(),
-}));
+vi.mock("@/components/ui/use-toast", () => MockModules.toast());
 
 describe("RequestingTree", () => {
   let requestingTree: RequestingTree;

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

@@ -6,8 +6,6 @@ import {
   ArrowLeftIcon,
   BetweenHorizontalStartIcon,
   BracesIcon,
-  ChevronDownIcon,
-  ChevronRightIcon,
   CopyIcon,
   CopyMinusIcon,
   DownloadIcon,
@@ -17,9 +15,7 @@ import {
   FilePlus2Icon,
   FolderPlusIcon,
   ListTreeIcon,
-  MoreVerticalIcon,
   PlaySquareIcon,
-  RefreshCcwIcon,
   Trash2Icon,
   UploadIcon,
   ViewIcon,
@@ -32,6 +28,18 @@ import {
   type TreeApi,
 } from "react-arborist";
 import useEvent from "react-use-event-hook";
+import {
+  FILE_ICON,
+  FILE_ICON_COLOR,
+  type FileIconType,
+  guessFileIconType,
+} from "@/components/editor/file-tree/file-icons";
+import {
+  MENU_ITEM_ICON_CLASS,
+  MoreActionsButton,
+  RefreshIconButton,
+  TreeChevron,
+} from "@/components/editor/file-tree/tree-actions";
 import { MarimoIcon, MarimoPlusIcon } from "@/components/icons/marimo-icons";
 import { Spinner } from "@/components/icons/spinner";
 import { useImperativeModal } from "@/components/modal/ImperativeModal";
@@ -65,12 +73,7 @@ import { useTreeDndManager } from "./dnd-wrapper";
 import { FileViewer } from "./file-viewer";
 import type { RequestingTree } from "./requesting-tree";
 import { openStateAtom, treeAtom } from "./state";
-import {
-  FILE_TYPE_ICONS,
-  type FileType,
-  guessFileType,
-  PYTHON_CODE_FOR_FILE_TYPE,
-} from "./types";
+import { PYTHON_CODE_FOR_FILE_TYPE } from "./types";
 import { useFileExplorerUpload } from "./upload";
 
 const hiddenFilesState = atomWithStorage(
@@ -102,7 +105,10 @@ export const FileExplorer: React.FC<{
   const { isPending, error } = useAsyncData(() => tree.initialize(setData), []);
 
   const handleRefresh = useEvent(() => {
-    tree.refreshAll(Object.keys(openState).filter((id) => openState[id]));
+    // Return the promise so callers can await refresh completion
+    return tree.refreshAll(
+      Object.keys(openState).filter((id) => openState[id]),
+    );
   });
 
   const handleHiddenFilesToggle = useEvent(() => {
@@ -322,16 +328,10 @@ const Toolbar = ({
         </button>
       </Tooltip>
       <input {...getInputProps({})} type="file" />
-      <Tooltip content="Refresh">
-        <Button
-          data-testid="file-explorer-refresh-button"
-          onClick={onRefresh}
-          variant="text"
-          size="xs"
-        >
-          <RefreshCcwIcon size={16} />
-        </Button>
-      </Tooltip>
+      <RefreshIconButton
+        data-testid="file-explorer-refresh-button"
+        onClick={onRefresh}
+      />
       <Tooltip content="Toggle hidden files">
         <Button
           data-testid="file-explorer-hidden-files-button"
@@ -421,11 +421,11 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
     useRequestClient();
   const disableFileDownloads = useAtomValue(disableFileDownloadsAtom);
 
-  const fileType: FileType = node.data.isDirectory
+  const fileType: FileIconType = node.data.isDirectory
     ? "directory"
-    : guessFileType(node.data.name);
+    : guessFileIconType(node.data.name);
 
-  const Icon = FILE_TYPE_ICONS[fileType];
+  const Icon = FILE_ICON[fileType];
   const { openConfirm, openPrompt } = useImperativeModal();
   const { createNewCell } = useCellActions();
   const lastFocusedCellId = useLastFocusedCellId();
@@ -534,11 +534,7 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
   });
 
   const renderActions = () => {
-    const iconProps = {
-      size: 14,
-      strokeWidth: 1.5,
-      className: "mr-2",
-    };
+    const ic = MENU_ITEM_ICON_CLASS;
     return (
       <DropdownMenuContent
         align="end"
@@ -548,7 +544,7 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
       >
         {!node.data.isDirectory && (
           <DropdownMenuItem onSelect={() => node.select()}>
-            <ViewIcon {...iconProps} />
+            <ViewIcon className={ic} />
             Open file
           </DropdownMenuItem>
         )}
@@ -558,34 +554,34 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
               openFile({ path: node.data.path });
             }}
           >
-            <ExternalLinkIcon {...iconProps} />
+            <ExternalLinkIcon className={ic} />
             Open file in external editor
           </DropdownMenuItem>
         )}
         {node.data.isDirectory && (
           <>
             <DropdownMenuItem onSelect={() => handleCreateNotebook()}>
-              <MarimoPlusIcon {...iconProps} />
+              <MarimoPlusIcon className={ic} />
               Create notebook
             </DropdownMenuItem>
             <DropdownMenuItem onSelect={() => handleCreateFile()}>
-              <FilePlus2Icon {...iconProps} />
+              <FilePlus2Icon className={ic} />
               Create file
             </DropdownMenuItem>
             <DropdownMenuItem onSelect={() => handleCreateFolder()}>
-              <FolderPlusIcon {...iconProps} />
+              <FolderPlusIcon className={ic} />
               Create folder
             </DropdownMenuItem>
             <DropdownMenuSeparator />
           </>
         )}
         <DropdownMenuItem onSelect={() => node.edit()}>
-          <Edit3Icon {...iconProps} />
+          <Edit3Icon className={ic} />
           Rename
         </DropdownMenuItem>
         {!node.data.isDirectory && (
           <DropdownMenuItem onSelect={handleDuplicate}>
-            <CopyIcon {...iconProps} />
+            <CopyIcon className={ic} />
             Duplicate
           </DropdownMenuItem>
         )}
@@ -595,7 +591,7 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
             toast({ title: "Copied to clipboard" });
           }}
         >
-          <ListTreeIcon {...iconProps} />
+          <ListTreeIcon className={ic} />
           Copy path
         </DropdownMenuItem>
         {tree && (
@@ -607,7 +603,7 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
               toast({ title: "Copied to clipboard" });
             }}
           >
-            <ListTreeIcon {...iconProps} />
+            <ListTreeIcon className={ic} />
             Copy relative path
           </DropdownMenuItem>
         )}
@@ -620,7 +616,7 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
             handleInsertCode(pythonCode);
           }}
         >
-          <BetweenHorizontalStartIcon {...iconProps} />
+          <BetweenHorizontalStartIcon className={ic} />
           Insert snippet for reading file
         </DropdownMenuItem>
         <DropdownMenuItem
@@ -635,7 +631,7 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
             await copyToClipboard(pythonCode);
           }}
         >
-          <BracesIcon {...iconProps} />
+          <BracesIcon className={ic} />
           Copy snippet for reading file
         </DropdownMenuItem>
         {/* Not shown in WASM */}
@@ -643,7 +639,7 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
           <>
             <DropdownMenuSeparator />
             <DropdownMenuItem onSelect={handleOpenMarimoFile}>
-              <PlaySquareIcon {...iconProps} />
+              <PlaySquareIcon className={ic} />
               Open notebook
             </DropdownMenuItem>
           </>
@@ -658,14 +654,14 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
                 downloadBlob(new Blob([contents]), node.data.name);
               }}
             >
-              <DownloadIcon {...iconProps} />
+              <DownloadIcon className={ic} />
               Download
             </DropdownMenuItem>
             <DropdownMenuSeparator />
           </>
         )}
         <DropdownMenuItem onSelect={handleDeleteFile} variant="danger">
-          <Trash2Icon {...iconProps} />
+          <Trash2Icon className={ic} />
           Delete
         </DropdownMenuItem>
       </DropdownMenuContent>
@@ -699,7 +695,10 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
         {node.data.isMarimoFile ? (
           <MarimoIcon className="w-5 h-5 shrink-0 mr-2" strokeWidth={1.5} />
         ) : (
-          <Icon className="w-5 h-5 shrink-0 mr-2" strokeWidth={1.5} />
+          <Icon
+            className={cn("w-5 h-5 shrink-0 mr-2", FILE_ICON_COLOR[fileType])}
+            strokeWidth={1.5}
+          />
         )}
         {node.isEditing ? (
           <Edit node={node} />
@@ -712,19 +711,10 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
             tabIndex={-1}
             onClick={(e) => e.stopPropagation()}
           >
-            <Button
+            <MoreActionsButton
               data-testid="file-explorer-more-button"
-              variant="text"
-              tabIndex={-1}
-              size="xs"
-              className="mb-0"
-              aria-label="More options"
-            >
-              <MoreVerticalIcon
-                strokeWidth={2}
-                className="w-5 h-5 hidden group-hover:block"
-              />
-            </Button>
+              iconClassName="w-5 h-5"
+            />
           </DropdownMenuTrigger>
           {renderActions()}
         </DropdownMenu>
@@ -735,14 +725,10 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
 
 const FolderArrow = ({ node }: { node: NodeApi<FileInfo> }) => {
   if (!node.data.isDirectory) {
-    return <span className="w-5 h-5 shrink-0" />;
+    return <span className="w-4 h-4 shrink-0" />;
   }
 
-  return node.isOpen ? (
-    <ChevronDownIcon className="w-5 h-5 shrink-0" />
-  ) : (
-    <ChevronRightIcon className="w-5 h-5 shrink-0" />
-  );
+  return <TreeChevron isExpanded={node.isOpen} className="w-4 h-4" />;
 };
 
 function openMarimoNotebook(

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

@@ -0,0 +1,132 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import {
+  FileAudioIcon,
+  FileCodeIcon,
+  FileIcon,
+  FileJsonIcon,
+  FileSpreadsheetIcon,
+  FileTextIcon,
+  FileVideoIcon,
+  FolderArchiveIcon,
+  FolderIcon,
+  ImageIcon,
+  type LucideIcon,
+} from "lucide-react";
+import { cn } from "@/utils/cn";
+
+export type FileIconType =
+  | "directory"
+  | "python"
+  | "code"
+  | "json"
+  | "text"
+  | "image"
+  | "audio"
+  | "video"
+  | "data"
+  | "pdf"
+  | "zip"
+  | "unknown";
+
+const EXT_TO_TYPE: Record<string, FileIconType> = {
+  py: "python",
+  // Text / docs
+  txt: "text",
+  md: "text",
+  qmd: "text",
+  log: "text",
+  // Images
+  png: "image",
+  jpg: "image",
+  jpeg: "image",
+  gif: "image",
+  svg: "image",
+  webp: "image",
+  // Data / spreadsheets
+  csv: "data",
+  parquet: "data",
+  arrow: "data",
+  xlsx: "data",
+  // JSON
+  json: "json",
+  // Code
+  js: "code",
+  ts: "code",
+  tsx: "code",
+  html: "code",
+  css: "code",
+  toml: "code",
+  yaml: "code",
+  yml: "code",
+  wasm: "code",
+  // Audio
+  mp3: "audio",
+  m4a: "audio",
+  ogg: "audio",
+  wav: "audio",
+  // Video
+  mp4: "video",
+  m4v: "video",
+  mpeg: "video",
+  webm: "video",
+  mkv: "video",
+  // PDF
+  pdf: "pdf",
+  // Archives
+  zip: "zip",
+  tar: "zip",
+  gz: "zip",
+};
+
+export function guessFileIconType(name: string): FileIconType {
+  const ext = name.split(".").pop()?.toLowerCase();
+  if (!ext) {
+    return "unknown";
+  }
+  return EXT_TO_TYPE[ext] ?? "unknown";
+}
+
+export const FILE_ICON: Record<FileIconType, LucideIcon> = {
+  directory: FolderIcon,
+  python: FileCodeIcon,
+  code: FileCodeIcon,
+  json: FileJsonIcon,
+  text: FileTextIcon,
+  image: ImageIcon,
+  audio: FileAudioIcon,
+  video: FileVideoIcon,
+  data: FileSpreadsheetIcon,
+  pdf: FileTextIcon,
+  zip: FolderArchiveIcon,
+  unknown: FileIcon,
+};
+
+export const FILE_ICON_COLOR: Record<FileIconType, string> = {
+  directory: "text-amber-500",
+  python: "text-blue-500",
+  code: "text-blue-500",
+  json: "text-blue-500",
+  text: "text-muted-foreground",
+  image: "text-purple-500",
+  audio: "text-orange-500",
+  video: "text-orange-500",
+  data: "text-green-500",
+  pdf: "text-red-500",
+  zip: "text-muted-foreground",
+  unknown: "text-muted-foreground",
+};
+
+/**
+ * Render a colored file-type icon for a given filename.
+ * Pass `className` to control size (defaults to `h-3.5 w-3.5`).
+ */
+export function renderFileIcon(
+  name: string,
+  className?: string,
+): React.ReactNode {
+  const type = guessFileIconType(name);
+  const Icon = FILE_ICON[type];
+  const color = FILE_ICON_COLOR[type];
+  return <Icon className={cn("h-3.5 w-3.5 shrink-0", color, className)} />;
+}

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

@@ -166,7 +166,7 @@ export const FileViewer: React.FC<Props> = ({ file, onOpenNotebook }) => {
               </Tooltip>
               <Tooltip content={renderShortcut("global.save")}>
                 <Button
-                  variant={internalValue === data.contents ? "text" : "success"}
+                  variant="text"
                   size="xs"
                   onClick={handleSaveFile}
                   disabled={internalValue === data.contents}

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

@@ -0,0 +1,107 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import {
+  ChevronRightIcon,
+  MoreVerticalIcon,
+  RefreshCwIcon,
+} from "lucide-react";
+import React, { useCallback, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Tooltip } from "@/components/ui/tooltip";
+import { cn } from "@/utils/cn";
+
+/**
+ * Animated chevron for tree expand/collapse.
+ * Rotates 90° when `isExpanded` is true.
+ */
+export const TreeChevron: React.FC<{
+  isExpanded: boolean;
+  className?: string;
+}> = ({ isExpanded, className }) => (
+  <ChevronRightIcon
+    className={cn(
+      "shrink-0 transition-transform",
+      isExpanded && "rotate-90",
+      className,
+    )}
+  />
+);
+
+/**
+ * Refresh button that briefly spins its icon when clicked.
+ * Keeps spinning for at least 500ms, or until the onClick Promise resolves.
+ */
+export const RefreshIconButton: React.FC<{
+  onClick: (e: React.MouseEvent) => void | Promise<void>;
+  tooltip?: string;
+  className?: string;
+  iconClassName?: string;
+}> = ({ onClick, tooltip = "Refresh", className, iconClassName }) => {
+  const [isSpinning, setIsSpinning] = useState(false);
+
+  const handleClick = useCallback(
+    async (e: React.MouseEvent) => {
+      setIsSpinning(true);
+      // Artificially spin for 500ms to show the user that the button is working.
+      const minDelay = new Promise<void>((r) => setTimeout(r, 500));
+      try {
+        await Promise.all([onClick(e), minDelay]);
+      } finally {
+        setIsSpinning(false);
+      }
+    },
+    [onClick],
+  );
+
+  const button = (
+    <Button
+      variant="text"
+      size="xs"
+      className={className}
+      onClick={handleClick}
+    >
+      <RefreshCwIcon
+        className={cn(
+          "h-4 w-4",
+          iconClassName,
+          isSpinning && "animate-[spin_0.5s]",
+        )}
+      />
+    </Button>
+  );
+
+  return <Tooltip content={tooltip}>{button}</Tooltip>;
+};
+
+/**
+ * Three-dot menu trigger that fades in on row hover.
+ * Must be inside a `group` container.
+ * Forwards ref so it works with Radix `asChild`.
+ */
+export const MoreActionsButton = React.forwardRef<
+  HTMLButtonElement,
+  {
+    onClick?: (e: React.MouseEvent) => void;
+    className?: string;
+    iconClassName?: string;
+  } & Omit<React.ComponentPropsWithoutRef<typeof Button>, "variant" | "size">
+>(({ className, iconClassName, ...props }, ref) => (
+  <Button
+    ref={ref}
+    variant="text"
+    tabIndex={-1}
+    size="xs"
+    className={cn(
+      "mb-0 opacity-0 group-hover:opacity-100 transition-opacity",
+      className,
+    )}
+    aria-label="More options"
+    {...props}
+  >
+    <MoreVerticalIcon className={cn("w-4 h-4", iconClassName)} />
+  </Button>
+));
+MoreActionsButton.displayName = "MoreActionsButton";
+
+/** Standard class string for icons inside dropdown menu items. */
+export const MENU_ITEM_ICON_CLASS = "h-3.5 w-3.5 mr-2";